/* warm.css — das Design „warm und bewegt“ (Kirsten, 08.10.2026).
   Liegt als letzte Schicht über site.css, components.css und umbau.css.
   Die Farben selbst tauscht tools/warm-farben.py in den Quell-Stylesheets;
   hier stehen Schrift, Formen, Signaturen und Bewegung.
   Eingebunden von tools/warm.py (Block <!-- warm:auto -->). */

:root{
  --w-cream:#FBF4EC; --w-blush:#F6DDD5; --w-rose:#EBCBD6; --w-line:#EBCFC6;
  --w-wine:#3B1027; --w-wine2:#55203C; --w-berry:#B8245A; --w-berry-d:#8E1A45;
  --w-apri:#F59E6C; --w-apri-l:#FFD3B8; --w-muted:#5A3A48;
  --w-display:'Bricolage Grotesque','Manrope',Arial,sans-serif;
  --w-serif:'Instrument Serif',Georgia,serif;
}

/* ---------- Schrift ---------- */
body.kb-theme h1, body.kb-theme h2, body.kb-theme h3,
body.kb-theme .logo, body.kb-theme .sf-logo, body.kb-theme .kf-logo{
  font-family:var(--w-display)!important; font-weight:800!important;
}
body.kb-theme h1{letter-spacing:-.035em; line-height:1.02}
body.kb-theme h2{letter-spacing:-.03em; line-height:1.08}
body.kb-theme h3{font-weight:700!important; letter-spacing:-.015em}
body.kb-theme h1, body.kb-theme h2, body.kb-theme h3{text-wrap:balance}
body.kb-theme .logo{font-weight:800!important; letter-spacing:-.04em}
body.kb-theme .logo span{color:var(--w-berry)}
body.kb-theme ::selection{background:var(--w-apri-l); color:var(--w-wine)}

/* Kursive Hervorhebung: das Markenzeichen des Entwurfs.
   <em class="w-akz">…</em> oder die farbigen Spans der Überschriften. */
body.kb-theme .w-akz, body.kb-theme h1 em, body.kb-theme h2 em{
  font-family:var(--w-serif)!important; font-style:italic!important; font-weight:400!important;
  color:var(--w-berry); letter-spacing:-.01em;
}
/* Wörter, die warm.js in Spans zerlegt, behalten die Schrift der Hervorhebung
   (auf älteren Seiten setzte eine Span-Regel sonst Manrope). */
body.kb-theme h1 em .w-wort, body.kb-theme h2 em .w-wort{font-family:inherit!important; font-style:inherit!important; font-weight:inherit!important}
body.kb-theme .w-unter{position:relative; display:inline-block}
body.kb-theme .w-unter::after{
  content:""; position:absolute; left:0; right:0; bottom:.02em; height:.2em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cpath d='M3 11 C 80 3, 200 3, 297 9' fill='none' stroke='%23F59E6C' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  transform-origin:left; animation:w-strich 1.1s .5s cubic-bezier(.65,0,.35,1) both;
}
@keyframes w-strich{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Kopfzeile ---------- */
body.kb-theme .kb-nav{background:rgba(251,244,236,.92)!important; border-bottom:1px solid var(--w-line)!important}
body.kb-theme .kb-nav .cta, body.kb-theme .kb-nav .nav-links .cta{
  border-radius:999px!important; padding:13px 22px!important; font-size:13px!important;
  transition:transform .2s, background .2s, box-shadow .2s!important;
}
body.kb-theme .kb-nav .cta:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(184,36,90,.25)!important}
body.kb-theme .nav-links>a:not(.cta){position:relative}
body.kb-theme .nav-links>a:not(.cta)::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background:var(--w-apri); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
body.kb-theme .nav-links>a:not(.cta):hover::after{transform:scaleX(1)}

/* ---------- Knöpfe ---------- */
body.kb-theme .button, body.kb-theme .btn, body.kb-theme .kh-cta,
body.kb-theme .cta-box a.btn, body.kb-theme .akt-kauf{
  border-radius:999px!important;
  transition:transform .2s, background .2s, box-shadow .2s!important;
}
body.kb-theme .button:hover, body.kb-theme .btn:hover, body.kb-theme .kh-cta:hover{
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(184,36,90,.25);
}
body.kb-theme .button span, body.kb-theme .btn span{transition:transform .2s}
body.kb-theme .button:hover span, body.kb-theme .btn:hover span{transform:translateX(4px)}

/* ---------- Karten und Kästen ---------- */
body.kb-theme .cta-box, body.kb-theme .cta-box.voll, body.kb-theme .blog-karte,
body.kb-theme .service, body.kb-theme .karte, body.kb-theme .preis-karte{
  border-radius:24px!important;
}
body.kb-theme .blog-karte{transition:transform .25s, box-shadow .25s}
body.kb-theme .blog-karte:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(59,16,39,.12)}
body.kb-theme .cta-box.voll{background:var(--w-wine)!important; color:var(--w-cream)!important; border:0!important}
body.kb-theme .cta-box.voll h3, body.kb-theme .cta-box.voll p{color:var(--w-cream)!important}
body.kb-theme .cta-box.voll a{background:var(--w-apri)!important; color:var(--w-wine)!important; border-radius:999px!important}

/* Bilder: weiche Rundung */
body.kb-theme main img:not([class*="logo"]):not([width="16"]):not([width="20"]){border-radius:20px}

/* ---------- Fußzeile ---------- */
body.kb-theme footer.kb-footer{background:var(--w-wine)!important; color:var(--w-cream)!important}
body.kb-theme .kb-footer h2, body.kb-theme .kb-footer .kf-logo{color:var(--w-cream)!important}
body.kb-theme .kb-footer .kf-claim, body.kb-theme .kb-footer-eyebrow{color:var(--w-apri)!important}
body.kb-theme .kb-footer .kf-entity, body.kb-theme .kb-footer .kf-head{color:var(--w-rose)!important}
body.kb-theme .kb-footer a{color:var(--w-cream)!important}
body.kb-theme .kb-footer a:hover{color:var(--w-apri)!important}
body.kb-theme .kb-footer .kb-footer-cta{color:var(--w-apri)!important; border-bottom-color:var(--w-apri)!important}
body.kb-theme .kb-footer-intro, body.kb-theme .kb-footer .kf-grid, body.kb-theme .kb-footer .kf-bottom{border-color:rgba(251,244,236,.18)!important}
body.kb-theme .kb-footer *{border-color:rgba(251,244,236,.18)}

/* ---------- Bewegung beim Scrollen ---------- */
/* Ohne JS bleibt alles sichtbar. warm.js setzt .w-js und die Klasse .w-da. */
.w-js body.kb-theme main > section > *, .w-js body.kb-theme .w-rein{
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.w-js body.kb-theme .w-warte{opacity:0; transform:translateY(26px)}
.w-js body.kb-theme .w-da{opacity:1; transform:none}

/* Schwebendes Sternchen am Logo */
body.kb-theme .logo span{display:inline-block; transition:transform .6s}
body.kb-theme .logo:hover span{transform:rotate(90deg)}

@media (prefers-reduced-motion: reduce){
  body.kb-theme *, body.kb-theme *::before, body.kb-theme *::after{animation:none!important; transition:none!important}
  .w-js body.kb-theme .w-warte{opacity:1; transform:none}
}

/* =====================================================================
   Prinzip der Startseite auf allen Seiten (Kirsten, 08.10.2026)
   ===================================================================== */

/* ---------- Kopf der Angebotsseiten: Bogen, Ring, Apricot-Kreis ---------- */
body.kb-angebot .hero-photo{isolation:isolate; margin-right:18px}
body.kb-angebot .hero-photo>img{border-radius:999px 999px 28px 28px!important; z-index:1; transition:transform .7s cubic-bezier(.2,.8,.2,1)}
body.kb-angebot .hero-photo::before{
  content:""; position:absolute; left:16px; right:-16px; top:-16px; bottom:16px; z-index:0;
  border:2px solid var(--w-berry); border-radius:999px 999px 28px 28px; transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
body.kb-angebot .hero-photo::after{
  content:""; position:absolute; left:-34px; bottom:46px; width:150px; height:150px; border-radius:50%;
  background:var(--w-apri); z-index:0;
}
body.kb-angebot .hero-photo:hover::before{transform:translate(8px,-8px)}
body.kb-angebot .hero-photo.ki-bild{counter-reset:none}
body.kb-angebot .hero-photo.ki-bild>img{outline:0}
body.kb-angebot .hero-photo.ki-bild{--ki:"Bild mit KI bearbeitet"}
body.kb-angebot .hero-photo .w-ki, body.kb-theme .w-ki{
  position:absolute; right:14px; top:14px; z-index:2; font:600 11px/1 Manrope,sans-serif; color:#fff;
  background:rgba(59,16,39,.55); padding:5px 9px; border-radius:999px; letter-spacing:.02em;
}
@media (max-width:760px){
  body.kb-angebot .hero-photo{margin:22px 16px 0 6px}
  body.kb-angebot .hero-photo::after{width:96px; height:96px; left:-14px}
}

/* Überschrift: Worte erscheinen nacheinander (warm.js setzt .w-wort) */
@keyframes w-wort{from{opacity:0; transform:translateY(.5em) rotate(3deg)}to{opacity:1; transform:none}}
.w-js body.kb-theme .w-wort{display:inline-block; opacity:0; animation:w-wort .7s cubic-bezier(.2,.8,.2,1) forwards}
body.kb-theme h1 em{position:relative; display:inline}
body.kb-theme h1 em.w-strich{
  /* Strich knapp unter der Grundlinie, nicht am Rand der Zeilenbox: sonst schneidet er
     bei mehrzeiligen Hervorhebungen in die nächste Zeile (Handy, Kirsten 08.10.) */
  background:no-repeat left 86%/0% .07em linear-gradient(var(--w-apri),var(--w-apri));
  animation:w-strich-bg .9s 1.1s cubic-bezier(.65,0,.35,1) forwards; padding-bottom:0;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
@keyframes w-strich-bg{to{background-size:100% .07em}}
@media (max-width:760px){body.kb-theme h1:has(em.w-strich){line-height:1.1}}

/* ---------- Abschnitte: randlose Flächen wie auf der Startseite ---------- */
body.kb-theme .w-weg, body.kb-theme .w-schluss{
  box-shadow:0 0 0 100vmax var(--w-bg)!important; clip-path:inset(0 -100vmax); background:var(--w-bg)!important;
}
body.kb-theme .w-innen{max-width:1224px; margin:0 auto}

/* ---------- Der Weg ---------- */
body.kb-theme .w-weg{--w-bg:var(--w-blush); padding:100px 0; margin:0}
body.kb-theme .w-weg h2{margin:0 0 14px; font-size:clamp(32px,4.4vw,62px)!important; color:var(--w-wine)}
body.kb-theme .w-lead{margin:0 0 36px; max-width:640px; font-size:19px; line-height:1.6; color:var(--w-muted)}
body.kb-theme .w-karten{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; align-items:stretch}
@media (max-width:1100px){body.kb-theme .w-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){body.kb-theme .w-karten{grid-template-columns:1fr}}
body.kb-theme .w-karte{
  position:relative; min-width:0; background:#fff; color:var(--w-wine); border-radius:28px; padding:26px 26px 18px;
  display:flex; flex-direction:column; gap:12px; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
body.kb-theme .w-karte:hover{transform:translateY(-6px); box-shadow:0 24px 44px rgba(59,16,39,.14)}
body.kb-theme .w-karte.dunkel{background:var(--w-wine); color:#FFF7F0}
body.kb-theme .w-karte.dunkel h3, body.kb-theme .w-karte.dunkel b{color:#FFF7F0!important}
body.kb-theme .w-karte h3{color:var(--w-wine)}
body.kb-theme .w-karte:not(.dunkel) h3{color:var(--w-wine)!important}
body.kb-theme .w-karte.ist-hier{outline:3px solid var(--w-berry); outline-offset:4px}
body.kb-theme .w-nr{width:46px; height:46px; border-radius:50%; background:var(--w-apri); color:var(--w-wine);
  display:flex; align-items:center; justify-content:center; font:800 20px/1 var(--w-display)}
body.kb-theme .w-hier{position:absolute; top:-14px; right:18px; background:var(--w-berry); color:#fff; border-radius:999px;
  padding:6px 14px; font:700 13px/1 Manrope,sans-serif; box-shadow:0 8px 18px rgba(184,36,90,.3)}
body.kb-theme .w-karte h3{margin:0; font:800 24px/1.1 var(--w-display)!important; letter-spacing:-.02em; color:inherit}
body.kb-theme .w-karte p{margin:0; font-size:16px; line-height:1.55; color:var(--w-muted)}
body.kb-theme .w-karte.dunkel p{color:var(--w-rose)}
body.kb-theme .w-produkte{margin-top:auto; display:flex; flex-direction:column}
body.kb-theme .w-produkt{display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:12px 0;
  border-top:1px solid var(--w-line); text-decoration:none; color:inherit; transition:padding .25s, color .25s}
body.kb-theme .w-karte.dunkel .w-produkt{border-top-color:rgba(255,247,240,.2)}
body.kb-theme .w-produkt span:first-child{min-width:0; display:flex; flex-direction:column; gap:2px}
body.kb-theme .w-produkt b{font-weight:700; font-size:17px}
body.kb-theme .w-produkt small{font-size:15px; line-height:1.4; color:var(--w-muted)}
body.kb-theme .w-karte.dunkel .w-produkt small{color:var(--w-rose)}
body.kb-theme .w-produkt .ar{color:var(--w-berry); font-weight:700; transition:transform .25s}
body.kb-theme .w-karte.dunkel .w-produkt .ar{color:var(--w-apri)}
body.kb-theme .w-produkt:hover{padding-left:6px; color:var(--w-berry)}
body.kb-theme .w-karte.dunkel .w-produkt:hover{color:var(--w-apri)}
body.kb-theme .w-produkt:hover .ar{transform:translateX(5px)}
body.kb-theme .w-produkt.aktiv b::after{content:"diese Seite"; display:table; margin:6px 0 2px; font:700 11px/1 Manrope,sans-serif;
  background:var(--w-apri-l); color:var(--w-wine); padding:4px 8px; border-radius:999px; vertical-align:2px}
body.kb-theme .w-fuss{margin:30px 0 0; font-size:18px; color:var(--w-muted)}
body.kb-theme .w-fuss a{font-weight:700; color:var(--w-wine)}

/* ---------- Der Schluss ---------- */
body.kb-theme .w-schluss{--w-bg:var(--w-wine); color:#FFF7F0; padding:110px 0 120px; margin:0}
body.kb-theme .w-schluss h2{margin:0 0 26px; color:#FFF7F0!important; font-size:clamp(38px,6vw,88px)!important; line-height:1!important}
body.kb-theme .w-schluss h2 em{color:var(--w-apri)!important}
body.kb-theme .w-schluss p{margin:0 0 30px; max-width:560px; font-size:20px; line-height:1.55; color:#F3E3E0}
body.kb-theme .w-aktionen{display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center}
body.kb-theme .w-knopf{display:inline-flex; align-items:center; gap:12px; min-height:62px; padding:8px 30px; border-radius:999px;
  background:var(--w-apri); color:#2A0E1C!important; font:700 18px/1.2 Manrope,sans-serif; text-decoration:none;
  transition:transform .2s, box-shadow .25s}
body.kb-theme .w-knopf:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.25)}
body.kb-theme .w-knopf .ar{transition:transform .25s}
body.kb-theme .w-knopf:hover .ar{transform:translateX(7px)}
body.kb-theme .w-leise{color:#FFF7F0!important; font-weight:700; font-size:17px; text-decoration:none; border-bottom:2px solid transparent}
body.kb-theme .w-leise:hover{border-bottom-color:var(--w-apri)}

/* Eigener Schluss der Angebotsseiten im selben Weinrot */
body.kb-angebot section.schluss.closing{
  display:block!important; background:var(--w-wine)!important; color:#FFF7F0; border-radius:0!important;
  box-shadow:0 0 0 100vmax var(--w-wine); clip-path:inset(0 -100vmax); padding:100px 0 110px!important; margin:0!important;
}
body.kb-angebot section.schluss.closing h2{color:#FFF7F0!important; font-size:clamp(36px,5vw,72px)!important}
body.kb-angebot section.schluss.closing p{color:#F3E3E0!important; font-size:19px!important; line-height:1.6; max-width:640px}
body.kb-angebot section.schluss.closing a:not(.btn):not(.button){color:var(--w-apri)!important; font-weight:700}
body.kb-angebot section.schluss.closing .btn, body.kb-angebot section.schluss.closing .button{background:var(--w-apri)!important; color:#2A0E1C!important}

/* Bunter Wechsel der Abschnitte auf Angebotsseiten */
body.kb-angebot main > section.abschnitt:nth-of-type(even){
  background:var(--w-blush); box-shadow:0 0 0 100vmax var(--w-blush); clip-path:inset(0 -100vmax);
}

/* Kopf-Foto: Gesicht bleibt im Bild */
body.kb-angebot .hero-photo.lage-oben>img{object-position:50% 18%!important}
html[lang="en"] body.kb-theme .w-produkt.aktiv b::after{content:"this page"}
/* Seitenrand für Weg und Schluss auf schmalen Bildschirmen (Blogartikel haben keinen eigenen) */
@media (max-width:760px){
  body.kb-theme .w-innen{padding-inline:16px}
  body.kb-theme .w-weg{padding:72px 0}
  body.kb-theme .w-schluss{padding:80px 0 90px}
}

@media (max-width:760px){html[lang="en"] .kb-angebot .vn-zeile .v:before{content:'Before'}html[lang="en"] .kb-angebot .vn-zeile .n:before{content:'After'}}

/* Bild-Band auf dem Handy (Kirsten 08.10., Screenshot iPhone): Safari rechnet bei einem
   Grid-Element mit aspect-ratio, dessen Inhalt nur absolut positioniert ist, die Breite aus
   der Höhe – das Foto wurde zu einem schmalen Streifen und lag über dem Text davor.
   Höhe deshalb über ein Platzhalter-Element statt aspect-ratio. */
@media (max-width:760px){
  body.kb-angebot .bild-band .bild{aspect-ratio:auto!important; width:100%; height:auto; min-height:0!important; align-self:start; justify-self:stretch}
  body.kb-angebot .bild-band .bild::before{content:""; display:block; padding-top:75%}
}

/* Stern im Logo als Zeichnung statt Schriftzeichen (Kirsten 08.10.): iOS zeigt ✳ als
   grünes Emoji-Quadrat. Das Zeichen bleibt im HTML, wird aber ausgeblendet und durch
   eine Maske in Beere ersetzt. Gilt für .logo > span und alles mit .w-stern (warm.js). */
body.kb-theme .logo > span, body.kb-theme .w-stern{
  display:inline-block; width:.78em; height:.78em; margin-left:.12em; vertical-align:-.04em;
  overflow:hidden; text-indent:300%; white-space:nowrap; color:var(--w-berry); background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M2.5 12h19M5.3 5.3l13.4 13.4M18.7 5.3L5.3 18.7'/%3E%3C/g%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='black' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M2.5 12h19M5.3 5.3l13.4 13.4M18.7 5.3L5.3 18.7'/%3E%3C/g%3E%3C/svg%3E");
}
body.kb-theme .w-stern{margin-left:0}

/* Bild-Band auf dem Handy (Kirsten 08.10., Screenshot iPhone): Safari rechnet bei einem
   Grid-Element mit aspect-ratio, dessen Inhalt nur absolut positioniert ist, die Breite aus
   der Höhe – das Foto wurde zum schmalen Streifen und lag über dem Text davor.
   Höhe deshalb über ein Platzhalter-Element statt aspect-ratio. */
@media (max-width:760px){
  body.kb-angebot .bild-band .bild{aspect-ratio:auto!important; width:100%; height:auto; min-height:0!important; align-self:start; justify-self:stretch}
  body.kb-angebot .bild-band .bild::before{content:""; display:block; padding-top:75%}
}

/* ==========================================================================
   Inhaltsseiten im Startseiten-Stil (Kirsten 08.10.: „die komplette Seite, so wie
   wir es besprochen haben“). Gilt für Über mich, Community, Angebote, Website-Check,
   Kontakt (body.kb-core ohne Angebot/Startseite). Gleiche Größen wie die Startseite:
   H1 bis 80px, H2 bis 58px, Fließtext 17–19px, Abschnitte 96px, Bänder randlos.
   ========================================================================== */
body.kb-core:not(.kb-angebot):not(.kb-home) main{overflow-x:clip}
body.kb-core:not(.kb-angebot):not(.kb-home) .wrap{max-width:1160px; padding-inline:32px}
body.kb-core:not(.kb-angebot):not(.kb-home) .eyebrow{display:flex; align-items:center; gap:10px; font:800 11px/1.4 Manrope,sans-serif; letter-spacing:.18em; color:var(--w-wine)}
body.kb-core:not(.kb-angebot):not(.kb-home) .eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--w-berry); flex:none}
body.kb-core:not(.kb-angebot):not(.kb-home) main h2{font-size:clamp(32px,4.4vw,58px)!important; line-height:1.04; margin:18px 0 22px}
body.kb-core:not(.kb-angebot):not(.kb-home) main h3{font-size:22px}
body.kb-core:not(.kb-angebot):not(.kb-home) main > section:not(.w-weg):not(.w-schluss) p{font-size:17px; line-height:1.65; color:var(--w-muted)}

/* Kopf: Text links, Foto im Bogen rechts */
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero{grid-template-columns:1.1fr .9fr; gap:72px; padding-top:72px; padding-bottom:104px}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero h1{font-size:clamp(40px,5.6vw,80px)!important; line-height:1.02; margin:20px 0 26px}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero p{font-size:19px; line-height:1.6; max-width:560px; margin:0 0 32px}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero figure{position:relative; isolation:isolate; max-width:440px; justify-self:center; width:100%}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero figure::before{content:""; position:absolute; inset:-14px -14px 0 -14px; border:2px solid var(--w-berry); border-radius:999px 999px 30px 30px; opacity:.5; pointer-events:none}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero figure::after{content:""; position:absolute; left:-40px; bottom:16%; width:110px; height:110px; border-radius:50%; background:var(--w-apri); z-index:-1}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero img{aspect-ratio:4/5; height:auto; border-radius:999px 999px 24px 24px; object-position:50% 16%}
body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero figcaption{display:none}

/* Abschnitte: großzügig, jeder zweite als randloses Blush-Band */
body.kb-core:not(.kb-angebot):not(.kb-home) .content-section{padding-top:96px; padding-bottom:96px; position:relative}
body.kb-core:not(.kb-angebot):not(.kb-home) main > section.content-section:nth-of-type(odd):not(:first-of-type):not(:has(.closing)){background:var(--w-blush); box-shadow:0 0 0 100vmax var(--w-blush); clip-path:inset(0 -100vmax)}
body.kb-core:not(.kb-angebot):not(.kb-home) .prose-section{max-width:1160px}
body.kb-core:not(.kb-angebot):not(.kb-home) .prose-section p{font-size:19px; max-width:720px}

/* Karten wie auf der Startseite: weiß, feine Linie, Nummer im Apricot-Kreis */
body.kb-core:not(.kb-angebot):not(.kb-home) .feature-grid{gap:22px; margin-top:40px; counter-reset:wk}
body.kb-core:not(.kb-angebot):not(.kb-home) .feature-card{background:#fff; border:1px solid var(--w-line); border-radius:24px; padding:32px; box-shadow:0 18px 40px rgba(59,16,39,.07); counter-increment:wk; transition:transform .25s, box-shadow .25s}
body.kb-core:not(.kb-angebot):not(.kb-home) .feature-card:hover{transform:translateY(-4px); box-shadow:0 24px 48px rgba(59,16,39,.12)}
body.kb-core:not(.kb-angebot):not(.kb-home) .feature-grid:not(.offer-grid) .feature-card::before{content:counter(wk); display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--w-apri); color:var(--w-wine); font:800 18px/1 'Bricolage Grotesque',sans-serif; margin-bottom:20px}
body.kb-core:not(.kb-angebot):not(.kb-home) .feature-card p{font-size:16px}
body.kb-core:not(.kb-angebot):not(.kb-home) .offer-grid .feature-card:nth-child(2n){background:var(--w-wine); border-color:var(--w-wine)}
body.kb-core:not(.kb-angebot):not(.kb-home) .offer-grid .feature-card:nth-child(2n) :is(h2,h3){color:#fff}
body.kb-core:not(.kb-angebot):not(.kb-home) .offer-grid .feature-card:nth-child(2n) p{color:var(--w-rose)}

/* Team/Conny: Foto im Bogen */
body.kb-core:not(.kb-angebot):not(.kb-home) .team-section{grid-template-columns:.8fr 1.2fr; gap:72px}
body.kb-core:not(.kb-angebot):not(.kb-home) .team-section img{aspect-ratio:4/5; height:auto; object-fit:cover; object-position:50% 25%; border-radius:999px 999px 24px 24px; max-width:400px; width:100%; box-shadow:0 18px 40px rgba(59,16,39,.12)}
body.kb-core:not(.kb-angebot):not(.kb-home) .team-section p{font-size:17px}

/* Video im ruhigen Rahmen */
body.kb-core:not(.kb-angebot):not(.kb-home) .video-wrap{max-width:960px; margin:40px auto 0}
body.kb-core:not(.kb-angebot):not(.kb-home) .video-wrap iframe{border-radius:24px; background:var(--w-wine); box-shadow:0 24px 50px rgba(59,16,39,.18)}
body.kb-core:not(.kb-angebot):not(.kb-home) .video-cap{font-size:12px; color:var(--w-muted); margin-top:14px}

/* Seiteneigener Schluss: weinrote Fläche wie auf der Startseite */
body.kb-core:not(.kb-angebot):not(.kb-home) .closing{background:var(--w-wine)!important; border-radius:32px; padding:64px; grid-template-columns:1.4fr 1fr}
body.kb-core:not(.kb-angebot):not(.kb-home) .closing h2{color:#fff}
body.kb-core:not(.kb-angebot):not(.kb-home) .closing p{color:var(--w-rose)!important; font-size:17px}
body.kb-core:not(.kb-angebot):not(.kb-home) .closing .eyebrow{color:var(--w-rose)}
body.kb-core:not(.kb-angebot):not(.kb-home) .closing .eyebrow::before{background:var(--w-apri)}

/* FAQ */
body.kb-core:not(.kb-angebot):not(.kb-home) summary{font-size:18px; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; color:var(--w-wine)}
body.kb-core:not(.kb-angebot):not(.kb-home) details p{font-size:16px}
body.kb-core:not(.kb-angebot):not(.kb-home) details{border-bottom-color:var(--w-line); padding:22px 0}

@media (max-width:900px){
  body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero, body.kb-core:not(.kb-angebot):not(.kb-home) .team-section{grid-template-columns:1fr; gap:44px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .closing{grid-template-columns:1fr; padding:40px 28px}
}
@media (max-width:700px){
  body.kb-core:not(.kb-angebot):not(.kb-home) .wrap{padding-inline:16px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero{padding-top:40px; padding-bottom:64px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero h1{font-size:clamp(38px,10.5vw,48px)!important; letter-spacing:-.035em}
  body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero p{font-size:17px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero figure{max-width:320px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .sub-hero figure::after{left:-20px; width:80px; height:80px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .content-section{padding-top:64px; padding-bottom:64px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .prose-section p{font-size:17px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .feature-card{padding:26px}
  body.kb-core:not(.kb-angebot):not(.kb-home) .team-section img{max-width:300px}
}

/* ==========================================================================
   Ältere Seiten (body.kb-existing): Kundenstimmen, Claude, Empfehlungen,
   Partnerprogramm, Tarif-Rechner, Rechtstexte, Freebies – und alle Blogartikel.
   Gleiche Bühne wie die Startseite: Kopf links ausgerichtet und groß, ruhige
   Bänder, weiße Karten, Lesespalte für Fließtext.
   ========================================================================== */
body.kb-existing main{overflow-x:clip}
body.kb-existing main .fog, body.kb-existing main .blob{display:none!important}
body.kb-existing main .kicker{display:inline-flex!important; align-items:center; gap:10px; font:800 11px/1.4 Manrope,sans-serif!important; letter-spacing:.18em!important; text-transform:uppercase; color:var(--w-wine)!important; background:none!important; padding:0!important; border:0!important}
body.kb-existing main .kicker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--w-berry); flex:none}

/* Kopf */
body.kb-existing main > header.hero, body.kb-existing main > .freebie-head{text-align:left!important; padding:80px 32px 72px!important; max-width:1224px!important; margin:0 auto!important; background:none!important; border:0!important}
body.kb-existing main > header.hero .hero-inner{text-align:left!important; max-width:none!important; margin:0!important}
body.kb-existing main > header.hero h1, body.kb-existing main > .freebie-head h1, body.kb-existing main .prose > h1:first-child{font-size:clamp(40px,5.6vw,80px)!important; line-height:1.02!important; letter-spacing:-.035em!important; max-width:16ch; text-align:left!important; margin-left:0!important; margin-right:0!important}
body.kb-existing main > header.hero p, body.kb-existing main > .freebie-head p{font-size:19px!important; line-height:1.6!important; max-width:620px!important; margin-left:0!important; text-align:left!important; color:var(--w-muted)!important}

/* Abschnitte: jeder zweite als randloses Band */
body.kb-existing:not(.kb-journal) main > section:not(.w-weg):not(.w-schluss):not(.final):not(.related):not(.newsletter){padding-top:88px!important; padding-bottom:88px!important}
body.kb-existing:not(.kb-journal) main > section:not(.w-weg):not(.w-schluss):not(.final):not(.related):not(.newsletter):nth-of-type(even){background:var(--w-blush)!important; box-shadow:0 0 0 100vmax var(--w-blush); clip-path:inset(0 -100vmax)}
body.kb-existing main :is(.wrap,.inner){max-width:1160px!important}
body.kb-existing main h2{font-size:clamp(30px,4vw,52px)!important; line-height:1.06!important; letter-spacing:-.03em!important}
body.kb-existing main h3{font-family:'Bricolage Grotesque',sans-serif!important; font-weight:700!important; color:var(--w-wine)!important}
body.kb-existing main p, body.kb-existing main li{font-size:17px; line-height:1.65}

/* Karten */
body.kb-existing main :is(.card,.book,.way,.voice,.faq-item,.tarif-karte,.feld,.r-zeile.summe){background:#fff!important; border:1px solid var(--w-line)!important; border-radius:24px!important; box-shadow:0 18px 40px rgba(59,16,39,.07)!important}
body.kb-existing main :is(.card,.book,.way,.voice){padding:30px!important; transition:transform .25s, box-shadow .25s}
body.kb-existing main :is(.card,.book,.way,.voice):hover{transform:translateY(-4px); box-shadow:0 24px 48px rgba(59,16,39,.12)!important}
body.kb-existing main .way.best{background:var(--w-wine)!important; border-color:var(--w-wine)!important; color:var(--w-rose)!important}
body.kb-existing main .way.best :is(h3,h4,strong,b){color:#fff!important}
body.kb-existing main .book .num, body.kb-existing main .tick{display:inline-grid; place-items:center; min-width:42px; height:42px; border-radius:50%; background:var(--w-apri)!important; color:var(--w-wine)!important; font:800 18px/1 'Bricolage Grotesque',sans-serif!important; border:0!important}
body.kb-existing main .voice .stars{color:var(--w-apri)!important}
body.kb-existing main figure.frame img, body.kb-existing main .frame{border-radius:24px!important; border:0!important; box-shadow:0 18px 40px rgba(59,16,39,.12)!important}

/* Seiteneigener Schluss in Wein */
body.kb-existing main > section.final{background:var(--w-wine)!important; color:var(--w-rose)!important; border:0!important; padding:96px 32px!important}
body.kb-existing main > section.final :is(h2,h3){color:#fff!important}
body.kb-existing main > section.final p{color:var(--w-rose)!important}

/* Kundenstimmen: Zitate größer und luftiger */
body.kb-existing main .voices{gap:22px!important}
body.kb-existing main .voice blockquote, body.kb-existing main .voice p{font-size:16px!important; line-height:1.65!important; color:var(--w-wine2)!important}
body.kb-existing main .who-name{font-family:'Bricolage Grotesque',sans-serif!important; font-weight:700!important; color:var(--w-wine)!important}

/* Rechtstexte */
body.kb-existing main > .prose:only-child, body.kb-existing main > .prose{max-width:820px!important; margin:0 auto!important; padding:80px 32px 96px!important}

/* ---------- Blogartikel ---------- */
body.kb-existing:not(.kb-journal) main > header.article-head{max-width:860px!important; padding:72px 32px 40px!important; margin:0 auto!important}
body.kb-existing main > header.article-head h1{font-size:clamp(36px,5vw,64px)!important; line-height:1.04!important; letter-spacing:-.035em!important}
body.kb-existing main > header.article-head .meta{font:800 11px/1.4 Manrope,sans-serif!important; letter-spacing:.16em!important; text-transform:uppercase; color:var(--w-berry)!important}
body.kb-existing main > header.article-head p{font-size:19px!important; line-height:1.6!important; color:var(--w-muted)!important}
body.kb-existing main > article.prose{max-width:860px!important; margin:0 auto!important; padding:0 32px 40px!important}
body.kb-existing main > article.prose p, body.kb-existing main > article.prose li{font-size:18px!important; line-height:1.75!important; color:var(--w-wine2)}
body.kb-existing main > article.prose h2{font-size:clamp(28px,3.2vw,40px)!important; line-height:1.1!important; margin:64px 0 18px!important}
body.kb-existing main > article.prose h2::before{content:none!important}
body.kb-existing main > article.prose h3{font-size:22px!important; margin:40px 0 12px!important}
body.kb-existing main > article.prose a{color:var(--w-berry)!important; text-underline-offset:4px}
body.kb-existing main > article.prose blockquote{border-left:4px solid var(--w-apri)!important; background:var(--w-blush)!important; border-radius:0 20px 20px 0; padding:22px 26px!important; font-style:normal}
body.kb-existing main > article.prose .tablewrap{border-radius:20px; border:1px solid var(--w-line); overflow:auto}
body.kb-existing main > article.prose table th{background:var(--w-wine)!important; color:#fff!important}
body.kb-existing main > article.prose :is(aside.cta-box, aside.punkt){border-radius:24px!important; border:0!important}
body.kb-existing main > article.prose img{border-radius:20px}
body.kb-existing main .kb-author-box{background:var(--w-blush)!important; border:0!important; border-radius:24px!important}
body.kb-existing main section.related{padding-top:72px!important; padding-bottom:72px!important}
body.kb-existing main section.related h2{font-size:clamp(28px,3.4vw,44px)!important}

@media (max-width:700px){
  body.kb-existing main > header.hero, body.kb-existing main > .freebie-head{padding:44px 16px 48px!important}
  body.kb-existing main > header.hero h1, body.kb-existing main > .freebie-head h1, body.kb-existing main .prose > h1:first-child{font-size:clamp(36px,10.5vw,48px)!important}
  body.kb-existing main > header.hero p, body.kb-existing main > .freebie-head p{font-size:17px!important}
  body.kb-existing:not(.kb-journal) main > section:not(.w-weg):not(.w-schluss):not(.final):not(.related):not(.newsletter){padding-top:60px!important; padding-bottom:60px!important}
  body.kb-existing:not(.kb-journal) main > header.article-head{padding:44px 16px 28px!important}
  body.kb-existing main > header.article-head h1{font-size:clamp(32px,9vw,44px)!important}
  body.kb-existing main > article.prose{padding:0 16px 32px!important}
  body.kb-existing main > article.prose p, body.kb-existing main > article.prose li{font-size:17px!important}
  body.kb-existing main > .prose{padding:44px 16px 64px!important}
  body.kb-existing main :is(.card,.book,.way,.voice){padding:24px!important}
}
body.kb-core:not(.kb-angebot):not(.kb-home) summary{line-height:1.35}
/* Freebie-Kasten (Skool) im warmen Stil */
body.kb-existing main .freebie-skool{background:#fff!important; border:1px solid var(--w-line)!important; border-radius:24px!important; box-shadow:0 18px 40px rgba(59,16,39,.08)!important}
body.kb-existing main .freebie-skool .fs-k{font:800 11px/1.4 Manrope,sans-serif!important; letter-spacing:.16em!important; color:var(--w-berry)!important}
body.kb-existing main .freebie-skool .fs-t{font-family:'Bricolage Grotesque',sans-serif!important; font-size:clamp(20px,2.6vw,26px)!important; color:var(--w-wine)!important}
body.kb-existing main .freebie-skool a{font:700 16px/1.2 Manrope,sans-serif!important; text-transform:none!important; letter-spacing:0!important; background:var(--w-berry)!important; border:0!important; border-radius:999px!important; color:#fff!important; padding:18px 28px!important}
body.kb-existing main .freebie-skool a:hover{background:var(--w-berry-d)!important; transform:translateY(-2px)}

/* ==========================================================================
   Alte Farbvariablen auf die warme Palette umbiegen (08.10.2026)
   Kirsten: „die Farben müssen auch konsequent überall umgesetzt werden.“
   Die älteren Seiten und die Blogartikel bringen eigene <style>-Blöcke mit dem
   Sprint-Look mit (--cream #E8E0D8, --pink #E8607A, --ink #1A1612 …). Statt jede
   Seite anzufassen, gelten hier die neuen Werte – mit höherer Spezifität als :root,
   auch für den alten Dunkelmodus (html[data-theme=dark] wird nicht mehr genutzt).
   ========================================================================== */
html:root:root, html[data-theme]:root:root{
  --cream:#FBF4EC; --cream-2:#F6DDD5; --surface:#FFFFFF; --warm:#F6DDD5; --warm-2:#EBCFC6;
  --shell:#FBF4EC; --sand:#EBCFC6; --sand-2:#F6DDD5; --paper:#FFFFFF; --paper-2:#FBF4EC;
  --ink:#3B1027; --ink-strong:#3B1027; --ink-soft:#5A3A48;
  --coral:#F59E6C; --coral-dark:#E07F4C; --peach:#F59E6C; --mark:#FFD3B8;
  --pink:#B8245A; --pink-deep:#8E1A45; --grad-end:#B8245A;
  --font-display:'Bricolage Grotesque','Manrope',Arial,sans-serif;
  --font-body:'Manrope',Arial,sans-serif;
  color-scheme:light;
}
/* Space Mono / DM Sans aus alten Inline-Stilen */
body.kb-theme [style*="Space Mono"], body.kb-theme [style*="DM Sans"]{font-family:'Manrope',Arial,sans-serif!important}
body.kb-theme main :is(th,.nl-label,.num,.chip,.btn,.kicker,.tick,.meta,.q-label,.p-seg){font-family:'Manrope',Arial,sans-serif!important}
body.kb-theme main th{font-weight:800; letter-spacing:.02em}
/* Alle Knöpfe rund wie auf der Startseite */
body.kb-theme main :is(a.cta,a.btn,.btn,a.button,button.cta,.cta-schluss a){border-radius:999px!important}
body.kb-theme main :is(.opt,.type-btn){border-radius:16px!important}

/* Kopf mit Foto im Bogen auch auf älteren Seiten ohne eigenes Bild (Claude, Empfehlungen,
   Kundenstimmen, Freebies) – wie auf Startseite und Angebotsseiten. Reines CSS, kein Text. */
body.kb-existing main > header.hero:not(:has(img)), body.kb-existing main > .freebie-head{display:grid!important; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); column-gap:72px; align-items:center}
body.kb-existing main > header.hero:not(:has(img)) > *, body.kb-existing main > .freebie-head > *{grid-column:1; min-width:0}
body.kb-existing main > header.hero:not(:has(img))::after, body.kb-existing main > .freebie-head::after{content:""; grid-column:2; grid-row:1 / span 12; justify-self:center; width:100%; max-width:400px; aspect-ratio:4/5; background:url("/assets/img/kirsten-blazer.webp") 50% 14%/cover no-repeat; border-radius:999px 999px 24px 24px; outline:2px solid rgba(184,36,90,.45); outline-offset:12px; box-shadow:-46px 60px 0 -10px var(--w-apri)}
body.kb-existing main > header.hero .hero-inner{grid-column:1}
/* Werkzeug-Seiten (Tarif-Rechner, Standort-Check EN): Einstieg wie ein Seitenkopf */
body.kb-existing main > .wrap > #intro{text-align:left!important; padding:48px 0 24px}
body.kb-existing main > .wrap > #intro h1{font-size:clamp(40px,5.6vw,76px)!important; line-height:1.03!important; letter-spacing:-.035em!important}
body.kb-existing main > .wrap > #intro p{font-size:19px!important; color:var(--w-muted)!important; max-width:640px}
body.kb-existing main .chip{background:#fff!important; border:1px solid var(--w-line)!important; border-radius:999px!important; color:var(--w-wine)!important; font-weight:700!important}
body.kb-existing main .mark{background:linear-gradient(transparent 62%, var(--w-apri-l) 0)!important; color:inherit!important}
/* Rechtstexte: lange Wörter sauber trennen */
body.kb-existing main .prose > h1:first-child{max-width:none!important; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; font-size:clamp(36px,5vw,64px)!important}
body.kb-existing main .prose h2, body.kb-existing main .prose h3{hyphens:auto; -webkit-hyphens:auto}
@media (max-width:860px){
  body.kb-existing main > header.hero:not(:has(img)), body.kb-existing main > .freebie-head{grid-template-columns:1fr; row-gap:36px}
  body.kb-existing main > header.hero:not(:has(img))::after, body.kb-existing main > .freebie-head::after{grid-column:1; grid-row:auto; max-width:280px; box-shadow:-26px 40px 0 -8px var(--w-apri)}
}
/* Kopf mit Foto: Überschrift darf nicht ins Foto laufen */
body.kb-existing main > header.hero:not(:has(img)) h1, body.kb-existing main > .freebie-head h1{font-size:clamp(36px,4.6vw,66px)!important; max-width:none!important; overflow-wrap:break-word}
/* Empfehlungen: Buchkarte ohne inneren alten Rahmen */
body.kb-existing main .book{display:grid!important; grid-template-columns:42px 1fr!important; gap:18px!important}
body.kb-existing main .book-body{border:0!important; background:none!important; padding:0!important}
@media (max-width:700px){
  body.kb-existing main .prose > h1:first-child{font-size:clamp(26px,7.6vw,40px)!important}
  body.kb-existing main .book{grid-template-columns:1fr!important}
}
body.kb-existing main .book .num{white-space:nowrap; min-width:46px!important; height:46px!important; font-size:15px!important; padding:0!important}
@media (max-width:700px){ body.kb-existing main .prose > h1:first-child{font-size:clamp(24px,6.8vw,40px)!important} }
/* Blog-Übersicht: Porträt im Bogen wie überall */
body.kb-theme .kb-journal-portrait{border-radius:999px 999px 24px 24px!important; outline:2px solid rgba(184,36,90,.45); outline-offset:12px; box-shadow:-40px 50px 0 -10px var(--w-apri)!important; object-position:50% 14%!important}
@media (min-width:861px){ body.kb-theme .kb-journal-portrait{aspect-ratio:4/5; height:auto!important; max-width:340px; justify-self:center} }