/* =====================================================================
   BENTO · Design-System markus-coenen.de (Richtung B, Bento / Modular)
   ---------------------------------------------------------------------
   Eine Datei für alle Seiten. Schrift: Titillium Web, lokal über
   /css/fonts.css (wird im HTML separat verlinkt, nicht hier).
   Grund: reines Weiß. Kacheln: Off-White / Warm / Weiß mit Rahmen /
   Dunkel / Cyan. Ein Radius, ein Gap, ein Raster.

   Aufbau:
     1. Tokens
     2. Reset und Basis
     3. Layout: Container, Section, Section-Head
     4. Typografie: Eyebrow, Überschriften, Lead, Small
     5. Buttons und Textlinks
     6. Kacheln (Tile) und Varianten
     7. Medien-Kachel (.tile-media, 16:9)
     8. Bento-Grid und Spalten-Spans
     9. Header: schwebende Pill-Navigation mit mobilem Menü
    10. Footer-Kachel
    11. Lese-Komponente .prose
    12. Seitenmuster (Hero, Lagen, Feature-Dunkel, Stimmen, Person,
        Link-Kacheln, Ausgang-Cyan)
    13. Responsive
    14. Scroll-Reveal und reduced-motion
   Bauanleitung: /_redesign/b/KIT.md
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  /* Farben */
  --cyan:#00a0de;              /* Markenfarbe. Flächen, Akzente, Buttons. */
  --cyan-deep:#0086bd;         /* Cyan als Text auf hellem Grund: nur große Schrift (>= 3:1) */
  --cyan-text:#00709f;         /* Cyan als Fließtext-Link auf Weiß/Off/Warm (AA, >= 4.5:1) */
  --cyan-soft:rgba(0,160,222,.12);
  --cyan-ring:rgba(0,160,222,.45);
  --ink:#1a1a1a;               /* Fließtext */
  --ink-soft:#4a4a4a;          /* Nebentext */
  --taupe:#67584d;             /* Eyebrows */
  --dark:#0a0a0a;              /* dunkle Kacheln, Footer, Ink-Buttons */
  --dark-2:#161616;            /* Flächen innerhalb dunkler Kacheln */
  --white:#ffffff;
  --off:#f7f5f1;               /* Standard-Kachel */
  --warm:#f1ece6;              /* Warm-Kachel */
  --ground:#ffffff;            /* Seitengrund */
  --line:rgba(26,26,26,.09);   /* Rahmen auf hell */
  --line-dark:rgba(255,255,255,.12); /* Rahmen auf dunkel */

  /* Radien */
  --r:24px;                    /* Kachel */
  --r-sm:16px;                 /* Elemente innerhalb einer Kachel */
  --r-pill:999px;              /* Buttons, Header, Chips */

  /* Abstände */
  --gap:16px;                  /* Grid-Gap */
  --pad:clamp(24px,3vw,40px);  /* Kachel-Innenabstand */
  --pad-lg:clamp(28px,4vw,56px);      /* große Kacheln (Person, Footer) */
  --pad-xl:clamp(28px,4.5vw,64px);    /* Hero, Feature */
  --space-section:clamp(20px,3vw,36px);
  --space-head:clamp(14px,2vw,22px);
  --container:1240px;
  --container-pad:clamp(16px,4vw,32px);

  /* Typo-Skala */
  --fs-display:clamp(40px,5.8vw,78px);   /* Hero h1 */
  --fs-feature:clamp(30px,3.8vw,46px);   /* h2 in Cyan-/Feature-Kacheln */
  --fs-section:clamp(26px,3vw,36px);     /* h2 Section-Head, .h-section */
  --fs-tile:clamp(22px,2.3vw,30px);      /* h3 in Kacheln, .h-tile */
  --fs-sub:clamp(19px,1.8vw,24px);       /* Hero-Tagline, Zwischenüberschrift h4 */
  --fs-lead:clamp(16px,1.3vw,18px);      /* Lead-Absätze */
  --fs-body:16px;
  --fs-small:14px;
  --fs-eyebrow:12px;
  --tracking-eyebrow:.18em;

  /* Schatten */
  --shadow:0 1px 2px rgba(26,26,26,.03), 0 10px 30px -18px rgba(26,26,26,.12);
  --shadow-hover:0 2px 4px rgba(26,26,26,.04), 0 24px 48px -20px rgba(0,160,222,.35);
  --shadow-menu:0 24px 48px -20px rgba(26,26,26,.28);

  /* Schrift und Bewegung */
  --font:'Titillium Web', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}


/* =====================================================================
   2. RESET UND BASIS
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img{max-width:100%;display:block;}
input,button,label{font-family:inherit;}
a{color:inherit;}
h1,h2,h3,p{margin:0;}
h1,h2,h3{font-weight:700;letter-spacing:-0.02em;line-height:1.1;text-wrap:balance;}
p{text-wrap:pretty;}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:8px;}
.tile--cyan :focus-visible{outline-color:var(--dark);}


/* =====================================================================
   3. LAYOUT: CONTAINER, SECTION, SECTION-HEAD
   ===================================================================== */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}
.section{padding-block:var(--space-section);}
.section-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:8px 32px;
  margin-bottom:var(--space-head);
  padding-inline:8px;
}
.section-head .eyebrow{margin-bottom:8px;}


/* =====================================================================
   4. TYPOGRAFIE
   ===================================================================== */
.eyebrow{
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--taupe);
  line-height:1.4;
}
.tile--dark .eyebrow{color:var(--cyan);}
.tile--cyan .eyebrow{color:var(--dark);}
.h-section{font-size:var(--fs-section);}
.h-tile{font-size:var(--fs-tile);font-weight:600;line-height:1.15;letter-spacing:-0.02em;}
.h-feature{font-size:var(--fs-feature);}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);}
.small{font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);}
.tile--dark .lead{color:rgba(255,255,255,.82);}
.tile--dark .small{color:rgba(255,255,255,.72);}
.tile--cyan .lead,.tile--cyan .small{color:rgba(10,10,10,.86);}

/* Cyan-Strich als Akzent (Lagen-Kachel, Hero-Foto) */
.mark{display:block;width:44px;height:6px;border-radius:var(--r-pill);background:var(--cyan);}


/* =====================================================================
   5. BUTTONS UND TEXTLINKS
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  min-height:50px;
  padding:12px 24px;
  border-radius:var(--r-pill);
  font-family:inherit;font-weight:700;font-size:16px;line-height:1.15;
  text-align:center;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .25s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
/* Cyan-Pill: der Haupt-CTA */
.btn-primary{background:var(--cyan);color:var(--dark);border-color:var(--cyan);}
.btn-primary:hover{background:var(--dark);color:var(--white);border-color:var(--dark);box-shadow:0 12px 24px -12px rgba(0,160,222,.6);}
/* Outline-Pill: der zweite Weg */
.btn-secondary{background:var(--white);color:var(--ink);border-color:rgba(26,26,26,.16);}
.btn-secondary:hover{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);}
/* Ink-Button: auf Cyan-Kacheln */
.btn-ink{background:var(--dark);color:var(--white);border-color:var(--dark);}
.btn-ink:hover{background:var(--white);color:var(--dark);border-color:var(--white);}

/* Textlink mit Cyan-Unterstrich (hell) */
.textlink{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;
  font-weight:700;font-size:15px;
  color:var(--ink);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--cyan);
  transition:color .2s, box-shadow .2s;
}
.textlink:hover{color:var(--cyan-deep);box-shadow:inset 0 -2px 0 var(--cyan-deep);}
.tile--dark .textlink{color:var(--white);}
.tile--dark .textlink:hover{color:var(--cyan);box-shadow:inset 0 -2px 0 var(--cyan);}

/* Textlink auf Cyan-Kachel (dunkler Unterstrich) */
.textlink-ink{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--dark);font-weight:600;font-size:15px;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(10,10,10,.5);
  transition:box-shadow .2s;
}
.textlink-ink:hover{box-shadow:inset 0 -2px 0 var(--dark);}

/* CTA-Reihen: Buttons nebeneinander, mobil untereinander */
.cta-row{display:flex;flex-wrap:wrap;gap:12px;}
.cta-row--center{justify-content:center;align-items:center;gap:14px 24px;}
.cta-row--links{gap:4px 28px;}


/* =====================================================================
   6. KACHELN
   ===================================================================== */
.tile{
  position:relative;
  background:var(--off);            /* Standard: Off-White */
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--pad);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  overflow:hidden;
}
.tile--white{background:var(--white);box-shadow:var(--shadow);}   /* Weiß mit Rahmen: klickbare Kacheln */
.tile--warm{background:var(--warm);}
.tile--dark{background:var(--dark);color:var(--white);border-color:rgba(255,255,255,.06);}
.tile--cyan{background:var(--cyan);color:var(--dark);border-color:var(--cyan);}
.tile--media{padding:0;}          /* Bild-Kachel ohne Innenabstand (Bild füllt) */
.tile--flush{padding:0;}          /* Kachel ohne Innenabstand, Inhalt setzt eigene Abstände */
.tile--hover:hover{
  transform:translateY(-3px);
  border-color:var(--cyan-ring);
  box-shadow:0 0 0 5px var(--cyan-soft), var(--shadow-hover);
}
a.tile{display:block;text-decoration:none;color:var(--ink);}
a.tile--dark{color:var(--white);}
a.tile--cyan{color:var(--dark);}

/* Innere Fläche in dunklen Kacheln (Info-Box, Schritt) */
.tile--dark .inset{
  background:var(--dark-2);border:1px solid var(--line-dark);
  border-radius:var(--r-sm);padding:16px 18px;
}

/* Chips (Footer-Beleg, Tags) */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
}
.tile--dark .chip{border-color:var(--line-dark);background:var(--dark-2);color:rgba(255,255,255,.85);}


/* =====================================================================
   7. MEDIEN-KACHEL (.tile-media) für iframes und Videos
   Responsives 16:9, Radius, kein Overflow. Für Bilder: .tile.tile--media
   ===================================================================== */
.tile-media{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  background:var(--dark);
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  isolation:isolate;
}
.tile-media--4-3{aspect-ratio:4/3;}
.tile-media--1-1{aspect-ratio:1/1;}
.tile-media > iframe,
.tile-media > video,
.tile-media > img,
.tile-media > object,
.tile-media > embed{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
  object-fit:cover;
}
/* Bildunterschrift: als Geschwister unter der Kachel, nie innerhalb der 16:9-Box */
.tile-media-caption{
  display:block;
  font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);
  padding:10px 8px 0;
}
.media-figure{margin:0;}
/* Fallback für Browser ohne aspect-ratio */
@supports not (aspect-ratio:16/9){
  .tile-media{height:0;padding-bottom:56.25%;}
  .tile-media--4-3{padding-bottom:75%;}
  .tile-media--1-1{padding-bottom:100%;}
}


/* =====================================================================
   8. BENTO-GRID UND SPALTEN-SPANS
   12 Spalten. Spans: .span-1 bis .span-12, .span-full.
   Zeilen: .row-2, .row-3. Ab 960px runter kollabieren die Spans
   (siehe Abschnitt 13).
   ===================================================================== */
.bento{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(12,minmax(0,1fr));
}
.bento--dense{grid-auto-flow:dense;}
.span-1{grid-column:span 1;}
.span-2{grid-column:span 2;}
.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-7{grid-column:span 7;}
.span-8{grid-column:span 8;}
.span-9{grid-column:span 9;}
.span-10{grid-column:span 10;}
.span-11{grid-column:span 11;}
.span-12,.span-full{grid-column:span 12;}
.row-2{grid-row:span 2;}
.row-3{grid-row:span 3;}

/* Kachel-Inhalt vertikal zentrieren oder unten ausrichten */
.tile--center{display:flex;flex-direction:column;justify-content:center;}
.tile--bottom{display:flex;flex-direction:column;justify-content:flex-end;}
.tile--stack{display:flex;flex-direction:column;gap:14px;}


/* =====================================================================
   9. HEADER: schwebende Pill-Navigation mit mobilem Menü
   ===================================================================== */
.site-header{
  position:sticky;top:10px;z-index:50;
  margin-top:10px;
}
.header-inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  min-height:64px;
  padding:8px 8px 8px 20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.4) blur(16px);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow);
}
.brand{display:inline-flex;align-items:center;border-radius:var(--r-pill);}
.brand-logo{height:36px;width:auto;}
.nav{display:flex;align-items:center;gap:2px;}
.nav-top{
  display:inline-flex;align-items:center;
  min-height:44px;
  padding:0 14px;border-radius:var(--r-pill);
  font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:background .2s, color .2s;
}
.nav-top:hover{background:var(--off);}
.nav-top[aria-current="page"]{background:var(--off);box-shadow:inset 0 -2px 0 var(--cyan);}
.nav-cta{
  display:inline-flex;align-items:center;
  min-height:46px;
  margin-left:8px;
  padding:0 20px;border-radius:var(--r-pill);
  background:var(--dark);color:var(--white);
  font-size:15px;font-weight:700;text-decoration:none;
  border:1.5px solid var(--dark);
  transition:background .2s, color .2s, box-shadow .25s, transform .25s var(--ease);
}
.nav-cta:hover{background:var(--cyan);border-color:var(--cyan);color:var(--dark);transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(0,160,222,.8);}

/* Mobiles Menü: Checkbox-Toggle (funktioniert ohne JS), JS ergänzt Tastatur, aria-expanded, Escape */
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.nav-burger{
  display:none;
  width:46px;height:46px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--white);
  cursor:pointer;
  position:relative;
  flex:0 0 46px;
}
.nav-burger span{
  position:absolute;left:14px;right:14px;height:2px;border-radius:2px;
  background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s, top .3s var(--ease);
}
.nav-burger span:nth-child(1){top:15px;}
.nav-burger span:nth-child(2){top:22px;}
.nav-burger span:nth-child(3){top:29px;}

@media (max-width:960px){
  .nav-burger{display:block;}
  .nav{
    display:none;
    position:absolute;left:0;right:0;top:calc(100% + 8px);
    padding:10px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow-menu);
    flex-direction:column;align-items:stretch;gap:2px;
  }
  .nav-top{min-height:48px;padding:0 16px;border-radius:14px;font-size:17px;}
  .nav-cta{margin:8px 0 0;justify-content:center;min-height:50px;font-size:16px;border-radius:14px;}
  .nav-toggle:checked ~ .nav{display:flex;}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){top:22px;transform:rotate(45deg);}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0;}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){top:22px;transform:rotate(-45deg);}
}


/* =====================================================================
   10. FOOTER-KACHEL
   ===================================================================== */
.site-footer{padding-block:clamp(12px,2vw,20px) clamp(20px,3vw,32px);}
.footer-tile{
  background:var(--dark);color:var(--white);
  border-radius:var(--r);
  padding:var(--pad-lg);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) repeat(5,minmax(0,1fr));
  gap:32px 24px;
}
.footer-col{display:flex;flex-direction:column;gap:4px;}
.footer-col h3{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--cyan);margin-bottom:8px;line-height:1.4;
}
.footer-col a{
  font-size:15px;line-height:1.4;color:rgba(255,255,255,.78);text-decoration:none;
  width:fit-content;padding:5px 0;
  transition:color .2s;
}
.footer-col a:hover{color:var(--cyan);}
.footer-brand-block{display:flex;flex-direction:column;gap:12px;max-width:34ch;}
.footer-claim{font-size:22px;font-weight:700;letter-spacing:-0.02em;line-height:1.15;}
.footer-brand-line{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);}
.footer-proof-row{display:flex;flex-wrap:wrap;gap:8px;}
.footer-proof-row span{
  font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);
  background:var(--dark-2);
  color:rgba(255,255,255,.85);
}
.footer-col a.footer-trust{
  font-size:15px;font-weight:700;color:var(--white);
  box-shadow:inset 0 -2px 0 var(--cyan);padding:2px 0;
  margin-top:4px;
}
.footer-col a.footer-trust:hover{color:var(--cyan);}
.footer-bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  margin-top:40px;padding-top:24px;
  border-top:1px solid var(--line-dark);
  font-size:13px;color:rgba(255,255,255,.62);
}
.footer-bottom a{color:rgba(255,255,255,.8);text-decoration:none;display:inline-block;padding:6px 0;transition:color .2s;}
.footer-bottom a:hover{color:var(--cyan);}


/* =====================================================================
   11. LESE-KOMPONENTE .prose
   Fließtext für Unterseiten (Magazin, Über, Leistungsdetails).
   Breite 68ch. Typo in der Skala, Links Cyan mit AA-Kontrast.
   ===================================================================== */
.prose{
  max-width:68ch;
  font-size:clamp(16px,1.15vw,18px);
  line-height:1.7;
  color:var(--ink);
}
.prose > *{margin-block:0;}
.prose > * + *{margin-top:1.1em;}
.prose p{text-wrap:pretty;}
.prose .lead,.prose > p.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);}
.prose small,.prose .small{font-size:var(--fs-small);color:var(--ink-soft);}
.prose strong,.prose b{font-weight:700;color:var(--ink);}
.prose em,.prose i{font-style:italic;}

/* Zwischenüberschriften in der Typo-Skala */
.prose h1{font-size:var(--fs-section);line-height:1.1;letter-spacing:-0.02em;font-weight:700;text-wrap:balance;}
.prose h2{font-size:var(--fs-section);line-height:1.15;letter-spacing:-0.02em;font-weight:700;text-wrap:balance;margin-top:2em;}
.prose h3{font-size:var(--fs-tile);line-height:1.2;letter-spacing:-0.02em;font-weight:600;text-wrap:balance;margin-top:1.8em;}
.prose h4{font-size:var(--fs-sub);line-height:1.25;letter-spacing:-0.01em;font-weight:700;margin-top:1.6em;}
.prose h5,.prose h6{font-size:var(--fs-body);font-weight:700;line-height:1.3;margin-top:1.4em;}
.prose h2 + *,.prose h3 + *,.prose h4 + *,.prose h5 + *,.prose h6 + *{margin-top:.6em;}
.prose > h1:first-child,.prose > h2:first-child,.prose > h3:first-child{margin-top:0;}
.prose .eyebrow{margin-bottom:-.4em;}
.prose .eyebrow + h1,.prose .eyebrow + h2,.prose .eyebrow + h3{margin-top:.8em;}

/* Links: Cyan mit AA-Kontrast, Unterstrich als zweites Signal */
.prose a{
  color:var(--cyan-text);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--cyan-ring);
  text-decoration-thickness:2px;
  text-underline-offset:.18em;
  transition:color .2s, text-decoration-color .2s;
}
.prose a:hover{color:var(--dark);text-decoration-color:var(--cyan);}
.prose a:focus-visible{outline-offset:2px;border-radius:4px;}

/* Listen */
.prose ul,.prose ol{padding-left:1.4em;}
.prose li{padding-left:.25em;}
.prose li + li{margin-top:.45em;}
.prose li > ul,.prose li > ol{margin-top:.45em;}
.prose ul{list-style:none;padding-left:0;}
.prose ul > li{position:relative;padding-left:26px;}
.prose ul > li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:10px;border-radius:3px;background:var(--cyan);
}
.prose ol{list-style:none;padding-left:0;counter-reset:prose-ol;}
.prose ol > li{position:relative;padding-left:40px;counter-increment:prose-ol;}
.prose ol > li::before{
  content:counter(prose-ol);
  position:absolute;left:0;top:.05em;
  width:28px;height:28px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cyan);color:var(--dark);
  font-weight:700;font-size:14px;line-height:1;
}

/* Zitat: Cyan-Balken links, wie die Person-Lead-Box */
.prose blockquote{
  margin-inline:0;
  padding:16px 20px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:inset 4px 0 0 var(--cyan);
  font-size:1.04em;line-height:1.6;
}
.prose blockquote > * + *{margin-top:.7em;}
.prose blockquote cite,.prose blockquote footer{
  display:block;font-style:normal;font-size:var(--fs-small);color:var(--ink-soft);
}
.prose blockquote p:last-child{margin-bottom:0;}

/* Pull-Quote ohne Rahmen: großes Zitat als Absatz */
.prose .pullquote{
  font-size:var(--fs-sub);font-weight:600;line-height:1.3;letter-spacing:-0.01em;
  padding-left:22px;border-left:4px solid var(--cyan);
}

/* Trennlinie, Bilder, Tabellen, Code */
.prose hr{border:0;height:1px;background:var(--line);margin-block:2em;}
.prose img,.prose figure{max-width:100%;}
.prose figure{margin-inline:0;}
.prose figure img{border-radius:var(--r-sm);}
.prose figcaption{font-size:var(--fs-small);color:var(--ink-soft);margin-top:8px;}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
.prose th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--taupe);}
.prose .table-wrap{overflow-x:auto;max-width:100%;}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--off);border:1px solid var(--line);border-radius:6px;padding:.1em .4em;}
.prose pre{overflow-x:auto;background:var(--dark);color:var(--white);border-radius:var(--r-sm);padding:18px 20px;font-size:14px;line-height:1.55;}
.prose pre code{background:none;border:0;padding:0;color:inherit;}

/* .prose in Kacheln */
.tile .prose{max-width:68ch;}
.tile--dark .prose{color:var(--white);}
.tile--dark .prose .lead,.tile--dark .prose .small{color:rgba(255,255,255,.78);}
.tile--dark .prose a{color:var(--cyan);text-decoration-color:rgba(0,160,222,.5);}
.tile--dark .prose a:hover{color:var(--white);text-decoration-color:var(--cyan);}
.tile--dark .prose blockquote{background:var(--dark-2);border-color:var(--line-dark);}
.tile--dark .prose hr{background:var(--line-dark);}
.tile--dark .prose th,.tile--dark .prose td{border-color:var(--line-dark);}
.tile--dark .prose th{color:var(--cyan);}
.tile--dark .prose code{background:var(--dark-2);border-color:var(--line-dark);}
.tile--cyan .prose a{color:var(--dark);text-decoration-color:rgba(10,10,10,.5);}
.tile--cyan .prose ul > li::before,.tile--cyan .prose ol > li::before{background:var(--dark);color:var(--white);}
.tile--cyan .prose blockquote{background:rgba(255,255,255,.35);border-color:rgba(10,10,10,.1);box-shadow:inset 4px 0 0 var(--dark);}
.prose--center{margin-inline:auto;}


/* =====================================================================
   12. SEITENMUSTER
   Fertige Kachel-Kompositionen. Auf der Startseite im Einsatz,
   auf Unterseiten wiederverwendbar.
   ===================================================================== */

/* ----- Hero: Zweier-Bento (Copy 8 + Foto 4) ----- */
.hero{padding-top:clamp(14px,2vw,24px);}
.hero-copy{
  grid-column:span 8;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad-xl);
  min-height:min(72vh,640px);
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(0,160,222,.13), rgba(0,160,222,0) 70%),
    var(--off);
}
.hero-copy .eyebrow{margin-bottom:22px;}
.hero h1{
  font-size:var(--fs-display);
  font-weight:700;
  line-height:.98;
  letter-spacing:-0.035em;
  margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--cyan-deep);}
.hero-tag{
  font-size:var(--fs-sub);
  font-weight:700;
  color:var(--cyan-deep);
  letter-spacing:-0.01em;
  margin-bottom:16px;
}
.hero-sub{max-width:56ch;margin-bottom:28px;}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;}
.hero-note{margin-top:14px;}
.hero-photo{
  grid-column:span 4;
  background:var(--dark);
  min-height:420px;
}
.hero-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) contrast(1.05);
  transition:transform .9s var(--ease);
}
.hero-photo:hover img{transform:scale(1.03);}
.hero-photo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:40%;
  background:linear-gradient(to top, rgba(10,10,10,.6), rgba(10,10,10,0));
  pointer-events:none;
}
.hero-photo::before{
  content:"";position:absolute;left:var(--pad);bottom:var(--pad);z-index:1;
  width:44px;height:6px;border-radius:var(--r-pill);background:var(--cyan);
}

/* Unterseiten-Hero: eine Kachel, volle Breite, ohne Foto */
.hero-page{
  grid-column:span 12;
  padding:var(--pad-xl);
  background:
    radial-gradient(55% 60% at 100% 0%, rgba(0,160,222,.13), rgba(0,160,222,0) 70%),
    var(--off);
}
.hero-page .eyebrow{margin-bottom:18px;}
.hero-page h1{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-0.03em;margin-bottom:18px;max-width:18ch;}
.hero-page h1 em{font-style:normal;color:var(--cyan-deep);}
.hero-page .lead{max-width:60ch;}
.hero-page .cta-row{margin-top:26px;}

/* ----- Lagen: zwei große Kacheln mit Cyan-Strich ----- */
.lage{
  grid-column:span 6;
  display:flex;flex-direction:column;gap:14px;
  min-height:320px;
}
.lage::before{
  content:"";
  display:block;width:44px;height:6px;border-radius:var(--r-pill);
  background:var(--cyan);
  margin-bottom:auto;
}
.lage h3{margin-top:clamp(40px,5vw,72px);max-width:16ch;}
.lage p{color:var(--ink-soft);max-width:46ch;font-size:clamp(16px,1.2vw,17px);}

/* ----- Feature-Dunkel (Arbeite mit mir): Copy links, Ablauf rechts ----- */
.premium{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
  padding:clamp(28px,4.5vw,60px);
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.premium .eyebrow{color:var(--cyan);margin-bottom:16px;}
.premium h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:18px;color:var(--white);}
.premium-lead{color:rgba(255,255,255,.82);margin-bottom:30px;max-width:56ch;}
.premium-passung-titel{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
.premium-passung{display:grid;gap:10px;margin-bottom:28px;}
.premium-passung-item{
  position:relative;padding-left:26px;
  font-size:16px;line-height:1.5;color:rgba(255,255,255,.86);
}
.premium-passung-item::before{
  content:"";position:absolute;left:0;top:9px;
  width:10px;height:10px;border-radius:3px;background:var(--cyan);
}
.premium-invest{
  font-size:15px;line-height:1.6;color:rgba(255,255,255,.74);
  background:var(--dark-2);border:1px solid var(--line-dark);
  border-radius:var(--r-sm);padding:16px 18px;
  margin-bottom:28px;max-width:60ch;
}
.premium-invest strong{color:var(--white);}
.premium-cta-row{display:flex;flex-wrap:wrap;gap:12px;}

/* Ablauf: nummerierte Schritte (dunkle Kachel) */
.ablauf{display:flex;flex-direction:column;gap:12px;}
.ablauf-titel{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-bottom:4px;
}
.step{
  display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;
  background:var(--dark-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-sm);
  padding:20px 22px;
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{border-color:var(--cyan-ring);transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,160,222,.14);}
.step-num{
  width:44px;height:44px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cyan);color:var(--dark);
  font-weight:700;font-size:18px;
}
.step-name{display:block;font-size:17px;font-weight:700;color:var(--white);margin-bottom:4px;line-height:1.3;}
.step-text{display:block;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72);}
/* Schritte auf hellen Kacheln */
.tile:not(.tile--dark) .step{background:var(--white);border-color:var(--line);}
.tile:not(.tile--dark) .step-name{color:var(--ink);}
.tile:not(.tile--dark) .step-text{color:var(--ink-soft);}
.tile:not(.tile--dark) .ablauf-titel{color:var(--taupe);}

/* ----- Kundenstimmen: drei gleiche Kacheln ----- */
.stimme{
  grid-column:span 4;
  display:flex;flex-direction:column;gap:20px;
}
.stimme-quote{
  font-size:16px;line-height:1.6;color:var(--ink);
  flex:1;
  position:relative;
  padding-top:18px;
}
.stimme-quote::before{
  content:"";
  position:absolute;left:0;top:0;
  width:28px;height:4px;border-radius:var(--r-pill);background:var(--cyan);
}
.stimme-author{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line);}
.stimme-avatar{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 56px;
  border:2px solid var(--white);
  box-shadow:0 0 0 2px var(--cyan);
}
.stimme-avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);}
.stimme-name{font-weight:700;font-size:16px;line-height:1.25;}
.stimme-role{font-size:13px;line-height:1.45;color:var(--ink-soft);}

/* ----- Person: Kachel mit Foto links (5 + 7) ----- */
.person{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:0;
  padding:0;
}
.person-photo{
  position:relative;min-height:400px;
  background:var(--dark);
}
.person-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 40%;
  filter:grayscale(1);
  transition:transform .9s var(--ease);
}
.person:hover .person-photo img{transform:scale(1.03);}
.person-body{
  padding:var(--pad-lg);
  display:flex;flex-direction:column;justify-content:center;
}
.person-body .eyebrow{margin-bottom:12px;}
.person-body h2{margin-bottom:20px;}
.person-lead{
  font-size:17px;line-height:1.65;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 20px;margin-bottom:20px;
  box-shadow:inset 4px 0 0 var(--cyan);
}
.person-lead strong{color:var(--ink);font-weight:700;}
.person-story{color:var(--ink-soft);max-width:60ch;margin-bottom:22px;}
.person-story em{font-style:italic;color:var(--ink);}
.person-cta-row{display:flex;flex-wrap:wrap;gap:4px 28px;}

/* ----- Intro-Kachel + Link-Kacheln (Exposé-Muster: 7 + 3 mal 5) ----- */
.expose-intro{
  grid-column:span 7;grid-row:span 3;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4vw,52px);
}
.expose-intro .eyebrow{margin-bottom:14px;}
.expose-intro h2{margin-bottom:16px;}
.expose-intro p{max-width:56ch;}
.expose-link{
  grid-column:span 5;
  display:block;text-decoration:none;color:var(--ink);
  padding:22px 64px 22px 24px;
}
.expose-link strong{display:block;font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px;}
.expose-link span{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);}
.expose-link::after{
  content:"";
  position:absolute;right:26px;top:50%;
  width:12px;height:12px;
  border-top:2.5px solid var(--cyan);border-right:2.5px solid var(--cyan);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.expose-link:hover::after{transform:translate(5px,-50%) rotate(45deg);}
/* Generische Link-Kachel mit Pfeil (gleiche Optik, freier Span) */
.tile-link{
  display:block;text-decoration:none;color:var(--ink);
  padding:22px 64px 22px 24px;
}
.tile-link strong{display:block;font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px;}
.tile-link span{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);}
.tile-link::after{
  content:"";
  position:absolute;right:26px;top:50%;
  width:12px;height:12px;
  border-top:2.5px solid var(--cyan);border-right:2.5px solid var(--cyan);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.tile-link:hover::after{transform:translate(5px,-50%) rotate(45deg);}

/* ----- Ausgang: volle Cyan-Kachel ----- */
.ausgang{
  grid-column:span 12;
  text-align:center;
  padding:clamp(40px,6vw,80px) clamp(24px,4vw,56px);
}
.ausgang .eyebrow{color:var(--dark);margin-bottom:14px;}
.ausgang h2{font-size:var(--fs-feature);color:var(--dark);margin-bottom:14px;}
.ausgang p{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:rgba(10,10,10,.86);max-width:62ch;margin:0 auto 28px;}
.ausgang-cta-row{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:center;align-items:center;}
.ausgang-link{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--dark);font-weight:600;font-size:15px;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(10,10,10,.5);
  transition:box-shadow .2s;
}
.ausgang-link:hover{box-shadow:inset 0 -2px 0 var(--dark);}
.ausgang::before{
  content:"";position:absolute;left:-10%;top:-40%;width:50%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%);
  pointer-events:none;
}


/* =====================================================================
   13. RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .footer-grid .footer-col:first-child{grid-column:span 3;}
}
@media (max-width:960px){
  /* Span-Utilities: breite Kacheln auf volle Breite, kleine auf halbe Breite */
  .span-5,.span-7,.span-8,.span-9,.span-10,.span-11{grid-column:span 12;}
  .span-3,.span-4{grid-column:span 6;}
  .row-2,.row-3{grid-row:auto;}
  /* Seitenmuster */
  .hero-copy{grid-column:span 12;min-height:0;}
  .hero-photo{grid-column:span 12;min-height:0;aspect-ratio:4/3;}
  .hero-photo img{object-position:50% 12%;}
  .premium{grid-template-columns:1fr;}
  .stimme{grid-column:span 12;}
  .person{grid-template-columns:1fr;}
  .person-photo{min-height:0;aspect-ratio:16/10;}
  .expose-intro{grid-column:span 12;grid-row:auto;}
  .expose-link{grid-column:span 12;}
  .lage{min-height:260px;}
  .lage h3{margin-top:clamp(28px,4vw,48px);}
}
@media (min-width:601px) and (max-width:960px){
  .stimme{grid-column:span 6;}
  .stimme:last-child{grid-column:span 12;}
}
@media (max-width:600px){
  :root{--gap:12px;--r:20px;--r-sm:14px;}
  .span-1,.span-2,.span-3,.span-4,.span-6{grid-column:span 12;}
  .site-header{top:8px;margin-top:8px;}
  .header-inner{padding:6px 6px 6px 14px;min-height:58px;}
  .brand-logo{height:30px;}
  .hero-photo{aspect-ratio:1/1;}
  .lage{grid-column:span 12;min-height:0;}
  .lage h3{margin-top:24px;}
  .hero-cta-row .btn,.premium-cta-row .btn,.ausgang-cta-row .btn,.cta-row .btn{width:100%;}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
  .footer-grid .footer-col:first-child{grid-column:span 2;}
  .footer-bottom{flex-direction:column;}
  .step{grid-template-columns:38px 1fr;padding:16px 18px;}
  .step-num{width:38px;height:38px;font-size:16px;border-radius:10px;}
  .prose ol > li{padding-left:36px;}
}


/* =====================================================================
   14. SCROLL-REVEAL UND REDUCED-MOTION
   Nur mit JS aktiv (html.js), nur unterhalb des Heros. bento.js setzt
   .is-in beim Sichtbarwerden, Fallback ohne IntersectionObserver.
   ===================================================================== */
.js .section:not(.hero) .tile:not(.is-in){opacity:0;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.js .section:not(.hero) .tile.is-in{animation:rise .7s var(--ease) backwards;}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  html{scroll-behavior:auto;}
  .js .section:not(.hero) .tile:not(.is-in){opacity:1;}
}

/* ===== BLOCK PARTIAL: 00-shell.css ===== */
/* Shell-Ergaenzungen (Header/Footer-Varianten aus dem Rollout) */
.footer-bottom .footer-links{display:flex;flex-wrap:wrap;gap:6px 18px;}
.footer-bottom .footer-links a{white-space:nowrap;}
.footer-brand-block .footer-brand{font-weight:800;font-size:var(--fs-sub,18px);color:#fff;margin:0 0 4px;}

/* ===== BLOCK PARTIAL: anker-hub.css ===== */
/* =====================================================================
   ANKER-HUB: die zwei Anker-Hub-Seiten (/buch-schreiben/, /buch-wirken-lassen/)
   Erzeugt von scripts/build_hubs.py. Aufbau pro Seite:
     1. Hero als Zweier-Bento (hero-copy 8 + hero-photo 4, Basis-Muster)
     2. Guide (nur /buch-schreiben/): Intro-Kachel mit .prose, fuenf Phasen-Kacheln
        (warm), Entscheidungs-Kachel dunkel mit zwei Buttons
     3. Offers: section-head + vier klickbare Kacheln (.hub-offer), Premium dunkel
     4. Stages: Kopf-Kachel (warm) + alle Etappen als klickbare Kacheln (.hub-stage)
     5. Final: dunkle Copy-Kachel (7) + Cyan-Ausgang (5) mit Ink-Button
   Nur Tokens, Klassen-Praefix "hub-". Keine Basis-Klassen ueberschrieben.
   ===================================================================== */

/* ----- 1. Hero: kurze Anker-Headline, Display-Groesse aus der Basis ----- */
.hub-hero .hero-sub{margin-bottom:26px;}
.hub-hero .hero-cta-row{align-items:center;gap:12px;}

/* ----- 2. Guide: Intro-Prose, Phasen-Kacheln, Entscheidung ----- */
.hub-guide-intro{
  padding:var(--pad-lg);
  background:
    radial-gradient(45% 55% at 100% 0%, var(--cyan-soft), transparent 70%),
    var(--off);
}
.hub-guide-intro .prose{max-width:72ch;}
.hub-phase{
  display:flex;flex-direction:column;
  gap:10px;
}
.hub-phase .eyebrow{color:var(--cyan-deep);}
.hub-phase-title{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.015em;
}
.hub-phase-text{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--ink-soft);
  max-width:48ch;
}
.hub-phase-text a{
  color:var(--cyan-text);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:rgba(0,160,222,.45);
  transition:color .2s, text-decoration-color .2s;
}
.hub-phase-text a:hover{color:var(--dark);text-decoration-color:var(--cyan);}
.hub-decision{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px 32px;
  padding:var(--pad-lg);
  background:
    radial-gradient(45% 55% at 100% 100%, var(--cyan-soft), transparent 70%),
    var(--dark);
}
.hub-decision-copy{flex:1 1 34ch;max-width:60ch;}
.hub-decision-title{
  font-size:var(--fs-tile);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.02em;
  margin-bottom:8px;
}
.hub-decision .cta-row{flex:0 1 auto;min-width:0;}

/* ----- 3. Offers: Hinweis rechts im section-head, klickbare Kacheln ----- */
.hub-offers-note{max-width:44ch;margin-bottom:6px;}
/* a.hub-offer statt .hub-offer: a.tile{display:block} aus der Basis hat sonst Vorrang */
a.hub-offer{
  display:flex;flex-direction:column;
  gap:10px;
  min-height:100%;
}
.hub-offer .chip{align-self:flex-start;}
.hub-offer-title{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin-top:6px;
}
.hub-offer-text{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--ink-soft);
}
.tile--dark .hub-offer-text{color:rgba(255,255,255,.78);}
.hub-offer-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 14px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.tile--dark .hub-offer-foot{border-top-color:var(--line-dark);}
.hub-offer-meta{
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--taupe);
}
.tile--dark .hub-offer-meta{color:rgba(255,255,255,.65);}
.hub-offer-cta{
  font-size:15px;
  font-weight:700;
  color:var(--cyan-text);
  transition:color .2s, transform .3s var(--ease);
}
.tile--dark .hub-offer-cta{color:var(--cyan);}
a.hub-offer:hover .hub-offer-cta,a.hub-offer:focus-visible .hub-offer-cta{color:var(--dark);transform:translateX(4px);}
a.hub-offer--fokus:hover .hub-offer-cta,a.hub-offer--fokus:focus-visible .hub-offer-cta{color:var(--white);}
/* Fokus-Kachel (dunkel): Chip wird Cyan, damit der Premium-Weg ins Auge faellt */
.hub-offer--fokus .chip{background:var(--cyan);color:var(--dark);border-color:var(--cyan);}

/* ----- 4. Stages: Kopf-Kachel mit Cyan-Strich, Etappen-Kacheln ----- */
.hub-stages-head{
  display:flex;flex-direction:column;
  gap:12px;
  min-height:220px;
}
.hub-stages-head .mark{margin-bottom:auto;}
.hub-stages-head .eyebrow{margin-top:18px;}
.hub-stages-head h2{max-width:14ch;}
a.hub-stage{
  display:flex;flex-direction:column;
  gap:10px;
  min-height:100%;
}
.hub-stage-title{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.015em;
}
.hub-stage-text{
  font-size:var(--fs-small);
  line-height:1.55;
  color:var(--ink-soft);
}
.hub-stage-cta{
  display:block;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:var(--cyan-text);
  transition:color .2s, border-color .3s var(--ease), transform .3s var(--ease);
}
a.hub-stage:hover .hub-stage-cta,a.hub-stage:focus-visible .hub-stage-cta{color:var(--dark);border-top-color:var(--cyan);transform:translateX(4px);}
/* Waisen in der letzten Reihe (Dreier-Raster inklusive Kopf-Kachel):
   eine allein -> volle Breite als Querformat, zwei allein -> je halbe Breite */
@media (min-width:961px){
  .hub-stages .hub-stage:last-child:nth-child(3n+1){
    grid-column:span 12;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--pad);
    align-items:center;
  }
  .hub-stages .hub-stage:last-child:nth-child(3n+1) .hub-stage-title{grid-row:span 2;}
  .hub-stages .hub-stage:last-child:nth-child(3n+1) .hub-stage-cta{margin-top:0;}
  .hub-stages .hub-stage:nth-last-child(2):nth-child(3n+1),
  .hub-stages .hub-stage:last-child:nth-child(3n+2){grid-column:span 6;}
}

/* ----- 5. Final: dunkle Copy-Kachel + Cyan-Ausgang ----- */
.hub-final-copy{
  padding:var(--pad-xl);
  background:
    radial-gradient(45% 55% at 100% 100%, var(--cyan-soft), transparent 70%),
    var(--dark);
}
.hub-final-copy .eyebrow{margin-bottom:14px;}
.hub-final-copy h2{margin-bottom:14px;max-width:20ch;}
.hub-final-copy .lead{max-width:60ch;}
.hub-final-exit{
  padding:var(--pad);
  text-align:center;
}
.hub-final-exit .cta-row{flex-direction:column;align-items:center;gap:14px;}
.hub-final-exit .btn{width:100%;max-width:400px;}

/* ----- Responsive ----- */
@media (max-width:960px){
  .hub-stages-head{min-height:0;}
  .hub-decision{justify-content:flex-start;}
  .hub-final-exit{min-height:0;}
}
@media (max-width:600px){
  a.hub-offer,a.hub-stage{min-height:0;}
  .hub-decision .cta-row{width:100%;}
  .hub-offers-note{margin-bottom:0;}
  .hub-final-exit .btn{max-width:none;}
}

/* ===== BLOCK PARTIAL: buecher.css ===== */
/* =====================================================================
   BLOCK · buecher: Uebersicht (/buecher/) und Buch-Detailseiten
   Praefixe: .buch-  (Detailseiten)   .buecher-  (Uebersicht)
   Nur Tokens aus bento.css, keine neuen Farben, keine neuen Radien.
   ===================================================================== */

/* ----- Brotkrumen im Hero (beide Seitentypen) ----- */
.buch-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  margin-bottom:18px;
  font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft);
}
.buch-crumbs a{color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line);transition:color .2s, box-shadow .2s;}
.buch-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}
.buch-crumbs .sep{color:var(--taupe);}
.buch-crumbs [aria-current="page"]{color:var(--ink);font-weight:600;}

/* =====================================================================
   DETAILSEITE
   ===================================================================== */

/* ----- Hero: Copy 8 + Cover 4 ----- */
.buch-hero-copy{
  grid-column:span 8;
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad-xl);
  background:
    radial-gradient(55% 60% at 100% 0%, var(--cyan-soft), rgba(0,160,222,0) 70%),
    var(--off);
}
.buch-hero-copy .eyebrow{margin-bottom:18px;}
.buch-hero-copy h1{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-0.03em;margin-bottom:16px;max-width:16ch;}
.buch-untertitel{
  font-size:var(--fs-sub);font-weight:600;line-height:1.35;letter-spacing:-0.01em;
  color:var(--ink);max-width:38ch;margin-bottom:14px;
}
.buch-hero-copy .lead{max-width:56ch;}
.buch-hero-copy .cta-row{margin-top:26px;}
.buch-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
}
.buch-meta-item{
  font-size:13px;line-height:1.4;font-weight:400;color:var(--ink-soft);
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);
}
.buch-meta-item strong{color:var(--ink);font-weight:700;}

.buch-cover{
  grid-column:span 4;
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad-lg);
  min-height:420px;
  background:
    radial-gradient(70% 70% at 30% 15%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.buch-cover img{
  width:auto;max-width:100%;
  max-height:min(520px,58vh);
  object-fit:contain;
  box-shadow:var(--shadow-menu);
  transition:transform .9s var(--ease);
}
.buch-cover:hover img{transform:scale(1.02);}
.buch-cover .mark{position:absolute;left:var(--pad);bottom:var(--pad);}

/* ----- Worum es geht (Lese-Kachel) + Fuer wen (warme Kachel) ----- */
.buch-fuerwen .prose h2{font-size:var(--fs-tile);font-weight:600;}
.buch-fuerwen .prose ul > li{font-size:var(--fs-body);line-height:1.5;}

/* ----- Highlights: dunkle Kachel, Kopf links, Punkte als Kachel-Gruppe rechts ----- */
.buch-highlights{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,48px);
  padding:clamp(28px,4.5vw,60px);
  background:
    radial-gradient(45% 55% at 0% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.buch-highlights--cloud{grid-template-columns:minmax(0,1fr);}
.buch-hl-head .eyebrow{margin-bottom:14px;}
.buch-hl-head h2{margin-bottom:14px;color:var(--white);}
.buch-hl-head .lead{max-width:46ch;}
.buch-hl{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  align-content:center;
}
.buch-hl li{
  position:relative;
  padding:16px 18px 16px 44px;
  background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--r-sm);
  font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.88);
  transition:border-color .3s var(--ease);
}
.buch-hl li::before{
  content:"";position:absolute;left:18px;top:23px;
  width:10px;height:10px;border-radius:3px;background:var(--cyan);
}
.buch-hl li:hover{border-color:var(--cyan-ring);}
.buch-autoren-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.buch-autor{
  font-size:14px;font-weight:600;line-height:1.3;letter-spacing:.01em;
  padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);background:var(--dark-2);color:var(--white);
}
.buch-autor span{color:var(--cyan);font-weight:400;}

/* ----- Leseprobe (Lese-Kachel) ----- */
.buch-leseprobe .prose{font-size:clamp(17px,1.25vw,19px);}
.buch-leseprobe-go{font-weight:700;letter-spacing:.12em;color:var(--cyan-text);}

/* ----- Kauf: Cyan-Kachel mit Karten (neben der Leseprobe 4 breit, sonst volle Breite) ----- */
.buch-kauf{
  grid-column:span 4;
  display:flex;flex-direction:column;gap:18px;
  scroll-margin-top:96px;
}
.buch-kauf-head .eyebrow{margin-bottom:10px;}
.buch-kauf-head h2{font-size:var(--fs-tile);color:var(--dark);}
.buch-kauf-cards{display:grid;gap:12px;}
.buch-kauf-card{
  display:flex;flex-direction:column;gap:6px;
  padding:20px;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(10,10,10,.1);
  border-radius:var(--r-sm);
}
.buch-kauf-card--featured{box-shadow:inset 0 0 0 2px var(--dark);}
.buch-kauf-preis{font-size:var(--fs-tile);font-weight:700;letter-spacing:-0.02em;line-height:1.1;color:var(--dark);}
.buch-kauf-card .small{flex:1;}
.buch-kauf-card .btn{margin-top:10px;width:100%;}
.buch-kauf--wide{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(24px,4vw,48px);align-items:center;
}
.buch-kauf--wide .buch-kauf-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.buch-leseprobe{scroll-margin-top:96px;}

/* ----- Werkzeug zum Buch: warme Kachel, Kopf links, Text rechts ----- */
.buch-werkzeug{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,48px);align-items:center;
  padding:var(--pad-lg);
}
.buch-werkzeug-head{display:flex;flex-direction:column;gap:14px;}
.buch-werkzeug-head .eyebrow{margin-bottom:0;}
.buch-werkzeug-body{display:flex;flex-direction:column;gap:14px;}
.buch-werkzeug-body .lead{max-width:56ch;}
.buch-werkzeug-body .cta-row{margin-top:8px;}

/* ----- Bruecke: dunkle Kachel, zentriert ----- */
.buch-bruecke{
  grid-column:span 12;
  text-align:center;
  padding:clamp(40px,6vw,80px) clamp(24px,4vw,56px);
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.buch-bruecke .eyebrow{margin-bottom:14px;}
.buch-bruecke h2{font-size:var(--fs-feature);color:var(--white);margin:0 auto 14px;max-width:22ch;}
.buch-bruecke .lead{max-width:62ch;margin:0 auto 28px;}

/* ----- Cross-Sells: Link-Kacheln mit Pfeil ----- */
.buch-xs{
  display:flex;flex-direction:column;gap:8px;
  padding:var(--pad);padding-right:60px;
  text-decoration:none;color:var(--ink);
}
.buch-xs .eyebrow{margin-bottom:4px;}
.buch-xs-title{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:var(--ink);}
.buch-xs-text{font-size:15px;line-height:1.5;color:var(--ink-soft);flex:1;}
.buch-xs-cta{
  display:inline-block;align-self:flex-start;margin-top:8px;
  font-weight:700;font-size:15px;color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--cyan);
}
.buch-xs::after{
  content:"";
  position:absolute;right:26px;top:50%;
  width:12px;height:12px;
  border-top:2.5px solid var(--cyan);border-right:2.5px solid var(--cyan);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .3s var(--ease);
}
.buch-xs:hover::after{transform:translate(5px,-50%) rotate(45deg);}

/* ----- Final-CTA: warme Kachel, zentriert ----- */
.buch-final{
  grid-column:span 12;
  text-align:center;
  padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px);
}
.buch-final .eyebrow{margin-bottom:12px;}
.buch-final h2{margin-bottom:12px;}
.buch-final .lead{max-width:60ch;margin:0 auto 24px;}

/* =====================================================================
   UEBERSICHT /buecher/
   ===================================================================== */

/* ----- Hero: Unterseiten-Hero 8 + Zitat-Kachel 4 ----- */
.buecher-hero-copy{grid-column:span 8;}
.buecher-zitat{
  grid-column:span 4;
  display:flex;flex-direction:column;justify-content:flex-end;gap:20px;
}
.buecher-zitat .mark{margin-bottom:auto;}
.buecher-zitat p{
  font-size:var(--fs-sub);font-weight:600;line-height:1.4;letter-spacing:-0.01em;
  color:var(--ink);
}

/* ----- Buch-Kachel-Raster: erstes Buch breit, danach zwei pro Zeile ----- */
.buecher-buch{
  grid-column:span 6;
  display:grid;
  grid-template-columns:minmax(120px,170px) minmax(0,1fr);
  gap:clamp(18px,2.5vw,32px);
  align-items:start;
}
.buecher-buch--featured{
  grid-column:span 12;
  grid-template-columns:minmax(200px,300px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  padding:var(--pad-lg);
}
.buecher-cover img{width:100%;height:auto;box-shadow:var(--shadow-menu);}
.buecher-buch-body{display:flex;flex-direction:column;}
.buecher-buch-body .eyebrow{margin-bottom:10px;}
.buecher-buch-titel{font-size:var(--fs-tile);font-weight:700;line-height:1.1;letter-spacing:-0.02em;margin-bottom:8px;}
.buecher-buch--featured .buecher-buch-titel{font-size:var(--fs-section);}
.buecher-buch-sub{font-size:var(--fs-lead);font-weight:600;line-height:1.4;color:var(--ink);margin-bottom:12px;max-width:44ch;}
.buecher-buch-text{font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft);margin-bottom:20px;max-width:56ch;}
.buecher-buch .cta-row{align-items:center;gap:10px 16px;}

/* ----- Themen-Welten (warm) + Kommende Werke (dunkel) ----- */
.buecher-themen .eyebrow{margin-bottom:12px;}
.buecher-themen h2{margin-bottom:14px;}
.buecher-themen .lead{max-width:56ch;}
.buecher-felder{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.buecher-feld{
  font-size:15px;font-weight:600;line-height:1.3;
  padding:10px 16px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:inset 4px 0 0 var(--cyan);
}
.buecher-kommend{display:flex;flex-direction:column;gap:12px;}
.buecher-kommend h2{margin-bottom:2px;}
.buecher-kommend .lead{margin-bottom:10px;max-width:52ch;}
.buecher-kommend-item{display:flex;flex-direction:column;gap:4px;}
.buecher-kommend-titel{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:var(--white);}
.buecher-kommend-desc{font-size:15px;line-height:1.5;color:rgba(255,255,255,.72);}
.buecher-kommend-date{font-size:14px;font-weight:700;color:var(--cyan);margin-top:4px;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .buch-hero-copy{grid-column:span 12;}
  .buch-cover{grid-column:span 12;order:-1;min-height:0;padding:var(--pad-lg);}
  .buch-cover img{max-height:min(52vh,420px);}
  .buch-highlights{grid-template-columns:minmax(0,1fr);}
  .buch-kauf{grid-column:span 12;}
  .buch-kauf .buch-kauf-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  .buch-kauf--wide{grid-template-columns:minmax(0,1fr);}
  .buch-werkzeug{grid-template-columns:minmax(0,1fr);}
  .buch-xs{grid-column:span 6;}
  .buecher-hero-copy{grid-column:span 12;}
  .buecher-zitat{grid-column:span 12;min-height:0;}
  .buecher-zitat .mark{margin-bottom:0;}
  .buecher-buch{grid-column:span 12;}
  .buecher-buch--featured{grid-template-columns:minmax(160px,220px) minmax(0,1fr);padding:var(--pad);}
}
@media (max-width:600px){
  .buch-hl{grid-template-columns:minmax(0,1fr);}
  .buch-kauf .buch-kauf-cards{grid-template-columns:minmax(0,1fr);}
  .buch-xs{grid-column:span 12;}
  .buecher-buch,.buecher-buch--featured{grid-template-columns:minmax(0,1fr);}
  .buecher-cover{max-width:200px;}
}

/* ===== BLOCK PARTIAL: danke.css ===== */
/* =====================================================================
   BLOCK: danke (Danke- und Eingegangen-Seiten nach Kauf, Anmeldung, Formular)
   Praefix: .danke-*  Nur Tokens aus bento.css. Keine Basis-Klassen ueberschrieben.
   Varianten: Hero-Kachel (Badge, H1, Lead), Pfade (Cyan primaer / Warm),
   Schritt-Kacheln, Karten, Signatur, Zugangscode-Eingabe.
   ===================================================================== */

/* ----- Hero: Badge mit Haken, Leads gestapelt ----- */
.danke-hero .lead + .lead{margin-top:14px;}
.danke-hero .eyebrow + h1{margin-top:0;}
.danke-hero--8{grid-column:span 8;}
.danke-hero--7{grid-column:span 7;}
.danke-badge{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:22px;
  font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--taupe);line-height:1.4;
}
.danke-haken{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--r-pill);
  background:var(--cyan);color:var(--dark);
  font-size:15px;font-weight:700;line-height:1;letter-spacing:0;
}
/* Haken ohne Label (Anfrage, Briefing): groesser, damit er als Status-Marke traegt */
.danke-badge--solo .danke-haken{width:48px;height:48px;font-size:22px;}

/* ----- Section-Head mit Einleitung ----- */
.danke-intro{margin-top:14px;max-width:68ch;}

/* ----- Gemeinsames Innenleben: Kacheln als Spalten-Stack ----- */
.danke-path,.danke-step,.danke-card,.danke-tipp,.danke-soft,.danke-sign,
.danke-ausgang,.danke-mailbox,.danke-token,.danke-hinweis{
  display:flex;flex-direction:column;gap:12px;
}
.danke-path .eyebrow,.danke-mailbox .eyebrow,.danke-token .eyebrow{margin-bottom:4px;}
.danke-path .cta-row,.danke-card .cta-row{margin-top:auto;padding-top:10px;}
.danke-path .small,.danke-card .danke-back-row{margin-top:0;}
.danke-path--primary .cta-row{margin-top:auto;}
.danke-back-row{margin-top:auto;padding-top:8px;}
.danke-ausgang .cta-row{margin-top:8px;}
.danke-ausgang .cta-row .btn{width:100%;}

/* ----- Kachel-Ueberschriften wie die Leistung-Kacheln der Referenz ----- */
.danke-step h3,.danke-card h2{
  font-size:var(--fs-sub);font-weight:600;line-height:1.3;letter-spacing:-0.01em;
}

/* ----- Schritte: Nummer als Cyan-Quadrat, auf Cyan-Kachel dunkel ----- */
.danke-step p{color:var(--ink-soft);line-height:1.6;}
.tile--cyan.danke-step p{color:rgba(10,10,10,.86);}
.danke-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--cyan);color:var(--dark);
  font-weight:700;font-size:18px;line-height:1;
  margin-bottom:6px;
}
.tile--cyan .danke-step-num{background:var(--dark);color:var(--white);}

/* ----- Karten (Infopaket): Akzent-Karte als System-Ausgang (volle Cyan-Kachel) ----- */
.danke-ausgang-card{grid-column:span 12;}
.danke-ausgang-card .ausgang-cta-row + .ausgang-cta-row{margin-top:14px;}
.danke-ausgang-card a:not(.btn){color:var(--dark);text-decoration-color:rgba(10,10,10,.5);}

/* ----- Signatur: kleine Kachel mit Cyan-Strich ----- */
.danke-sign{gap:6px;justify-content:flex-end;}
.danke-sign .mark{margin-bottom:12px;}
.danke-sign p{line-height:1.5;}
.danke-sign strong{font-weight:700;}

/* ----- Fliesstext-Links in hellen Kacheln (AA-Kontrast) ----- */
.danke-soft a,.danke-card a:not(.btn):not(.textlink),.danke-hinweis a,
.danke-mailbox .lead a,.danke-mailbox .small a{
  color:var(--cyan-text);font-weight:700;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;
}
.tile--cyan.danke-card a:not(.btn),.danke-mailbox .lead a,.danke-mailbox .small a{
  color:var(--dark);text-decoration-color:rgba(10,10,10,.5);
}

/* ----- Zugangscode: Eingabe plus Button in einer Reihe ----- */
.danke-token-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.danke-token-row input{
  flex:1 1 200px;min-height:50px;
  padding:12px 20px;
  border:1.5px solid var(--line);border-radius:var(--r-pill);
  background:var(--white);color:var(--ink);
  font-size:16px;line-height:1.2;
}
.danke-token-row input::placeholder{color:var(--ink-soft);}
.danke-token-row input:focus-visible{border-color:var(--cyan);outline-offset:2px;}
/* Schritte-Liste: H2 in Kachel-Groesse (Hierarchie H1 > H2 ohne Sprung) */
.danke-steps .prose h2{
  font-size:var(--fs-tile);line-height:1.2;letter-spacing:-0.02em;font-weight:600;margin-top:0;
}

/* ----- Responsiv ----- */
@media (max-width:960px){
  .danke-hero--8,.danke-hero--7{grid-column:span 12;}
}
@media (max-width:600px){
  .danke-token-row .btn{width:100%;}
}

/* ===== BLOCK PARTIAL: einzel-404-html.css ===== */
/* =====================================================================
   BLOCK: einzel-404 (Fehlerseite 404, eine ruhige Hero-Kachel)
   Praefix: .einzel-404-*  Nur Tokens aus bento.css. Keine Basis-Klassen ueberschrieben.
   Inhalt: grosse Zahl in Cyan (grosse Schrift, daher --cyan-deep zulaessig),
   Eyebrow, H1, Lead, zwei Wege zurueck.
   ===================================================================== */

.einzel-404{
  display:flex;flex-direction:column;justify-content:center;
  min-height:min(64vh,560px);
}
.einzel-404-num{
  font-size:clamp(72px,12vw,140px);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--cyan-deep);
  margin-bottom:18px; /* gleicher Rhythmus wie Eyebrow zu H1 in .hero-page */
}
.einzel-404 .lead{max-width:60ch;}

/* ===== BLOCK PARTIAL: einzel-autoren-playbook-index-html.css ===== */
/* =====================================================================
   BLOCK: einzel autoren-playbook (Lead-Magnet-Landingpage, Prefix ap-)
   Hero: Copy 7 breit ueber zwei Zeilen, Brevo-Formular als dunkle Kachel
   rechts oben, Paket-Kachel warm rechts unten. Module, Zahlen, Paket und
   FAQ als Kachelraster. Ausgang: Cyan-Kachel mit Wiederholungs-Formular
   plus dunkle Autopilot-Bruecke. Klassen, auf die das Seiten-JS zugreift
   (ap-recaptcha, ap-capture-form, data-ap-capture-*), bleiben erhalten.
   Nur Tokens aus bento.css.
   ===================================================================== */

/* ----- Hero-Raster ----- */
.ap-hero-copy{grid-column:span 7;min-height:0;}
.ap-hero-copy h1{font-size:clamp(34px,4.3vw,58px);max-width:16ch;}
.ap-hero-copy .hero-sub{max-width:52ch;}
.ap-form-tile{grid-column:span 5;}

/* Paket-Kachel: Titel links (5), Haken-Liste rechts (7) in zwei Spalten */
.ap-paket-tile{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(20px,3vw,40px);
  align-items:center;
}
.ap-paket-head{display:flex;flex-direction:column;gap:12px;}
.ap-paket-tile .ap-check-list{grid-template-columns:1fr 1fr;gap:12px 24px;}
.ap-paket-tile .ap-check-list li{border-top:0;padding:12px 0 12px 32px;border-bottom:1px solid var(--line);}
.ap-paket-tile .ap-check-list li::before{top:16px;}
.ap-paket-tile .ap-check-list li::after{top:20px;}

/* ----- Formular-Kachel (dunkel) ----- */
.ap-form-tile{
  display:flex;flex-direction:column;gap:14px;
  background:
    radial-gradient(50% 55% at 100% 0%, rgba(0,160,222,.18), rgba(0,160,222,0) 70%),
    var(--dark);
}
.ap-form-tile .h-tile{color:var(--white);}
.ap-form-text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);}
.ap-form-tile .ap-capture-form{margin-top:6px;}

/* ----- Formular selbst (in beiden Kacheln) ----- */
.ap-capture-form{display:flex;flex-direction:column;gap:12px;width:100%;}
.ap-capture-input{
  display:block;width:100%;
  min-height:52px;
  font-family:inherit;font-size:16px;line-height:1.4;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid rgba(26,26,26,.16);
  border-radius:var(--r-pill);
  padding:12px 20px;
  transition:border-color .2s, box-shadow .2s;
}
.ap-capture-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);}
/* Auf der dunklen Kachel braucht der Ring mehr Deckkraft, sonst ist der Fokus auf Schwarz kaum sichtbar */
.ap-form-tile .ap-capture-input:focus{box-shadow:0 0 0 4px var(--cyan-ring);}
.tile--cyan .ap-capture-input{border-color:rgba(10,10,10,.18);}
.tile--cyan .ap-capture-input:focus{border-color:var(--dark);box-shadow:0 0 0 4px rgba(10,10,10,.14);}
.ap-capture-input::placeholder{color:var(--ink-soft);opacity:.8;}
.ap-capture-btn{width:100%;font-size:17px;min-height:54px;}
.ap-capture-btn:disabled{cursor:wait;opacity:.7;transform:none;}
.ap-recaptcha{display:flex;justify-content:flex-start;min-height:0;max-width:100%;overflow:hidden;}
.ap-recaptcha:empty{display:none;}
.ap-recaptcha > div{max-width:100%;}
.ap-honey{position:absolute;left:-9999px;width:1px;height:0;overflow:hidden;opacity:0;pointer-events:none;}
.ap-brevo-target{display:none;width:0;height:0;border:0;}
.ap-capture-status{font-size:var(--fs-small);font-weight:700;line-height:1.5;color:var(--cyan);}
.ap-capture-status:empty{display:none;}
.tile--cyan .ap-capture-status{color:var(--dark);}
.ap-capture-meta{margin:0;}
.ap-form-tile .ap-capture-meta a{color:var(--white);text-decoration:underline;text-decoration-color:var(--cyan-ring);text-underline-offset:.18em;}
.ap-form-tile .ap-capture-meta a:hover{color:var(--cyan);text-decoration-color:var(--cyan);}
.tile--cyan .ap-capture-meta a{color:var(--dark);text-decoration:underline;text-decoration-color:rgba(10,10,10,.5);text-underline-offset:.18em;}
.tile--cyan .ap-capture-meta a:hover{text-decoration-color:var(--dark);}

/* ----- Haken-Liste in der Paket-Kachel ----- */
.ap-check-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.ap-check-list li{
  position:relative;padding:10px 0 10px 30px;
  font-size:15px;line-height:1.5;color:var(--ink);
  border-top:1px solid var(--line);
}
.ap-check-list li:first-child{border-top:0;padding-top:0;}
.ap-check-list li:first-child::before{top:4px;}
.ap-check-list li::before{
  content:"";position:absolute;left:0;top:14px;
  width:16px;height:16px;border-radius:50%;
  background:var(--cyan);
}
.ap-check-list li::after{
  content:"";position:absolute;left:5px;top:18px;
  width:5px;height:8px;
  border-right:2px solid var(--dark);border-bottom:2px solid var(--dark);
  transform:rotate(45deg);
}
.ap-check-list li:first-child::after{top:8px;}

/* ----- Section-Lead unter der Ueberschrift ----- */
.ap-section-lead{margin-top:12px;max-width:62ch;}

/* ----- Modul-Kacheln ----- */
.ap-modul{display:flex;flex-direction:column;gap:14px;}
.ap-modul-text{font-size:16px;line-height:1.6;color:var(--ink);}
.ap-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px;}
.ap-list li{position:relative;padding-left:22px;font-size:15px;line-height:1.55;color:var(--ink-soft);}
.ap-list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;border-radius:3px;background:var(--cyan);
}

/* ----- Zahlen-Kacheln ----- */
.ap-stat{display:flex;flex-direction:column;gap:12px;}
.ap-stat-num{
  font-size:clamp(34px,3.2vw,46px);font-weight:700;line-height:1;letter-spacing:-0.03em;
  color:var(--cyan-deep);
}
.ap-stat-text{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.ap-stat-text strong{color:var(--ink);}
.ap-note{margin-top:var(--space-head);padding-inline:8px;max-width:72ch;}

/* ----- Paket-Kacheln ----- */
.ap-pack{display:flex;flex-direction:column;gap:12px;}
.ap-pack .mark{margin-bottom:6px;}
.ap-pack-text{font-size:15px;line-height:1.6;color:var(--ink-soft);}

/* ----- Stimmen: zwei Kacheln halbe Breite ----- */
.ap-stimme{grid-column:span 6;}

/* ----- FAQ-Kacheln ----- */
.ap-faq{display:flex;flex-direction:column;gap:10px;}
.ap-faq-q{font-size:var(--fs-sub);font-weight:700;line-height:1.3;letter-spacing:-0.01em;}
.ap-faq-a{font-size:15px;line-height:1.6;color:var(--ink-soft);}

/* ----- Ausgang: Cyan-Kachel mit Formular (7) plus Bruecke dunkel (5) ----- */
.ap-ausgang{
  grid-column:span 7;
  display:flex;flex-direction:column;align-items:center;gap:0;
  padding:clamp(32px,4.5vw,56px) clamp(24px,4vw,48px);
}
.ap-ausgang .ap-capture-form{max-width:480px;margin:0 auto;align-items:stretch;}
.ap-ausgang .ap-recaptcha{justify-content:center;}
/* .ausgang p bringt 28px Unterabstand mit; Status und Meta sind die letzten Zeilen der Kachel, deshalb ohne */
.ap-ausgang .ap-capture-status{margin-top:12px;margin-bottom:0;}
.ap-ausgang .ap-capture-meta{margin-top:12px;margin-bottom:0;color:rgba(10,10,10,.86);}
.ap-bridge{grid-column:span 5;gap:14px;}
.ap-bridge .h-tile{color:var(--white);}
.ap-bridge .cta-row{margin-top:8px;}

/* ----- Responsive ----- */
@media (max-width:960px){
  .ap-hero-copy{grid-column:span 12;}
  .ap-form-tile{grid-column:span 12;}
  .ap-paket-tile{grid-template-columns:1fr;align-items:start;}
  .ap-stimme{grid-column:span 12;}
  .ap-ausgang,.ap-bridge{grid-column:span 12;}
}
@media (max-width:600px){
  .ap-paket-tile .ap-check-list{grid-template-columns:1fr;gap:8px;}
  .ap-recaptcha > div{transform:scale(.9);transform-origin:0 0;}
  .ap-ausgang .ap-recaptcha > div{transform-origin:50% 0;}
}

/* ===== BLOCK PARTIAL: einzel-blueprint-index-html.css ===== */
/* =====================================================================
   EINZELSEITE /blueprint/ (Autoren-Playbook statt Blueprint)
   Aufbau: Hero als Zweier-Bento (hero-copy 8 + hero-photo 4, Basis-Muster),
   dann "Warum so?" (7) neben Orientierungs-Notiz (warm, 5),
   dann Ausgang als Cyan-Kachel. Nur Tokens, Praefix "blueprint-".
   ===================================================================== */

/* Hero: Headline in Display-Groesse wie auf den Referenzseiten, zweizeilig
   (Zeilenumbruch vor dem Kompositum), das Kompositum darf am Bindestrich brechen */
.blueprint-hero h1{overflow-wrap:anywhere;}
.blueprint-hero .hero-sub{margin-bottom:26px;}

/* Warum so: Lead und Haken-Liste */
.blueprint-warum .eyebrow{margin-bottom:14px;}
.blueprint-warum .h-section{margin-bottom:16px;max-width:22ch;}
.blueprint-warum .lead{max-width:58ch;margin-bottom:22px;}
.blueprint-list{display:grid;gap:12px;}
.blueprint-list > div{
  display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;
  font-size:var(--fs-body);line-height:1.55;color:var(--ink);
}
.blueprint-list b{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--cyan);color:var(--dark);
  font-weight:700;font-size:15px;line-height:1;
}

/* Orientierungs-Notiz: Cyan-Strich direkt ueber dem Text, Block vertikal zentriert
   (tile--center), damit die Kachel neben der hohen Erklaerung nicht leer wirkt */
.blueprint-note .mark{margin-bottom:18px;}
.blueprint-note-body{display:flex;flex-direction:column;gap:10px;}
.blueprint-note-body strong{
  font-size:var(--fs-tile);font-weight:700;line-height:1.2;letter-spacing:-0.015em;color:var(--ink);
}
.blueprint-note-body span{font-size:var(--fs-lead);line-height:1.6;color:var(--ink-soft);max-width:44ch;}

/* Ausgang: Ueberschrift ist eine h3 (Hierarchie wie im Original unter der h2 von "Warum so?") */
.blueprint-ausgang h3{font-size:var(--fs-feature);color:var(--dark);margin-bottom:14px;letter-spacing:-0.02em;}

@media (max-width:600px){
  .blueprint-note .mark{margin-bottom:14px;}
}

/* ===== BLOCK PARTIAL: einzel-buchmarketing-autopilot-index-html.css ===== */
/* =====================================================================
   BLOCK PARTIAL: einzel-buchmarketing-autopilot-index-html
   Produkt- und Verkaufsseite /buchmarketing-autopilot/ (gleiche
   Kachel-Sprache wie das Buchmarketing-Audit). Präfix ap-.
   Nur Tokens aus bento.css, keine neuen Farben, Radien oder Schriften.
   ===================================================================== */

/* ----- Brotkrumen über dem Hero ----- */
.ap-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:var(--space-head);padding-inline:8px;}
.ap-crumbs a{color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line);transition:color .2s,box-shadow .2s;}
.ap-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}
.ap-crumbs .sep{color:var(--taupe);}
.ap-crumbs [aria-current]{color:var(--ink);font-weight:600;}

/* ----- Hero: Story-Hook in der Unterseiten-Hero-Kachel ----- */
.ap-hero .lead{max-width:64ch;}
.ap-hero .lead strong{color:var(--ink);}

/* ----- Story: warme Kachel, Überschrift links, Geschichte rechts ----- */
.ap-story{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(20px,3vw,44px);
  padding:var(--pad-lg);
}
.ap-story .mark{margin-bottom:18px;}
.ap-story .h-section{max-width:14ch;}
.ap-story .lead{max-width:62ch;}
.ap-story .lead strong{color:var(--ink);}

/* ----- Zahlen: sechs Kacheln ----- */
.ap-stat{display:flex;flex-direction:column;gap:12px;}
.ap-stat-num{
  font-size:var(--fs-feature);font-weight:700;line-height:1;letter-spacing:-0.03em;
  color:var(--cyan-deep);
}
.ap-stat p:not(.ap-stat-num){font-size:15px;line-height:1.55;color:var(--ink-soft);}
.ap-stat p strong{color:var(--ink);}

/* ----- Prozess: Schritte zweispaltig in der dunklen Kachel ----- */
.ap-ablauf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}

/* ----- Optionen: drei helle Kacheln, die vierte als dunkle Angebots-Kachel ----- */
.ap-option{display:flex;flex-direction:column;gap:10px;}
.ap-option .h-tile{margin-top:4px;}
.ap-option-text{font-size:15px;line-height:1.55;color:var(--ink-soft);flex:1;}
.ap-option-cost{
  font-size:var(--fs-small);font-weight:700;line-height:1.5;color:var(--ink);
  padding-top:12px;border-top:1px solid var(--line);
}
.ap-angebot{align-items:center;}
.ap-angebot .ap-option .h-tile{color:var(--white);}
.ap-angebot .ap-option-text{color:rgba(255,255,255,.8);}
.ap-angebot .ap-option-cost{color:var(--white);border-top-color:var(--line-dark);}
.ap-angebot-cta{display:flex;flex-direction:column;gap:20px;}
.ap-angebot-cta .lead strong{color:var(--white);}

/* ----- Paket: sechs weiße Kacheln mit Cyan-Strich ----- */
.ap-paket p{font-size:16px;line-height:1.55;color:var(--ink-soft);}
.ap-paket p strong{color:var(--ink);}

/* ----- Differenzierer + Beleg-Anker ----- */
.ap-diff .lead strong{color:var(--white);}
.ap-anker-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.ap-anker{
  flex:1 1 120px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 18px;
}
.ap-anker-num{font-size:var(--fs-tile);font-weight:700;line-height:1;letter-spacing:-0.02em;color:var(--cyan-deep);margin-bottom:6px;}
.ap-anker-label{font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft);}

/* ----- Cross-Sells: klickbare Kacheln ----- */
.ap-xsell{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);}
.ap-xsell .h-tile{margin-top:2px;}
.ap-xsell-text{font-size:15px;line-height:1.55;color:var(--ink-soft);flex:1;}
.ap-xsell .textlink{align-self:flex-start;margin-top:6px;}

/* ----- FAQ ----- */
.ap-faq-q{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;margin-bottom:10px;}
.ap-faq-a{font-size:16px;line-height:1.6;color:var(--ink-soft);}
.ap-faq-a strong{color:var(--ink);}
.ap-faq-a em{font-style:italic;color:var(--ink);}

/* ----- Responsiv ----- */
@media (max-width:960px){
  .ap-story{grid-template-columns:1fr;}
  .ap-story .h-section{max-width:none;}
  .ap-ablauf{grid-template-columns:1fr;}
}
/* Tablet: bei drei Kacheln pro Reihe wird die dritte (wie .stimme:last-child im
   Basissystem) auf volle Breite gezogen, damit keine halbbreite Waise entsteht. */
@media (min-width:601px) and (max-width:960px){
  .bento > .ap-option:nth-child(3){grid-column:span 12;}
  .ap-xsell:last-child{grid-column:span 12;}
}

/* ===== BLOCK PARTIAL: einzel-buchtitel-sparring-index-html.css ===== */
/* Einzelseite /buchtitel-sparring/ (Produkt- und Verkaufsseite). Praefix: bts- */

/* Brotkrumen ueber dem Hero */
.bts-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:0 8px 12px;
  font-size:var(--fs-small);color:var(--ink-soft);
}
.bts-crumbs a{color:var(--ink);text-decoration:none;font-weight:600;box-shadow:inset 0 -2px 0 var(--cyan);}
.bts-crumbs a:hover{color:var(--cyan-deep);}
.bts-crumbs .sep{color:var(--taupe);}

/* Story: Ueberschrift links, Geschichte rechts */
.bts-story{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(20px,3vw,40px);
  padding:var(--pad-lg);
}
.bts-story .mark{margin-bottom:18px;}
.bts-story .lead{max-width:62ch;}

/* Zahlen-Kacheln */
.bts-stat{display:flex;flex-direction:column;gap:12px;}
.bts-stat-num{
  font-size:var(--fs-feature);font-weight:700;line-height:1;letter-spacing:-0.03em;
  color:var(--cyan-deep);
}
.bts-stat-num--text{font-size:var(--fs-section);}
.bts-stat p:not(.bts-stat-num){font-size:15px;line-height:1.55;color:var(--ink-soft);}
.bts-stat p strong{color:var(--ink);}

/* Ablauf: vier Schritte in zwei Spalten in der dunklen Kachel */
.bts-ablauf--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}

/* Optionen: drei Wege als Kacheln, der vierte als dunkle Angebots-Kachel */
.bts-option{display:flex;flex-direction:column;gap:12px;}
.bts-option .h-tile{font-size:var(--fs-sub);}
.bts-option-text{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.bts-option-cost{
  font-size:var(--fs-small);font-weight:700;line-height:1.5;color:var(--taupe);
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
}
.bts-angebot{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(28px,4.5vw,60px);
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.bts-angebot .bts-option .h-tile{color:var(--white);font-size:var(--fs-tile);}
.bts-angebot .bts-option-text{color:rgba(255,255,255,.82);font-size:16px;}
.bts-angebot .bts-option-cost{color:var(--cyan);border-top-color:var(--line-dark);}
.bts-angebot .inset{padding:clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:20px;}
.bts-angebot .inset .lead{color:rgba(255,255,255,.82);}
.bts-angebot .inset strong{color:var(--white);}

/* Nutzen-Kacheln: Cyan-Strich plus Satz */
.bts-nutzen p{font-size:16px;line-height:1.55;color:var(--ink-soft);}
.bts-nutzen p strong{color:var(--ink);}

/* Beleg-Anker (500+ / 20+ / 96h) */
.bts-anker-row{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:24px;}
.bts-anker-num{font-size:var(--fs-section);font-weight:700;line-height:1;letter-spacing:-0.03em;color:var(--cyan-deep);}
.bts-anker-label{font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft);margin-top:6px;}

/* Cross-Sell-Kacheln (klickbar) */
.bts-xsell{display:flex;flex-direction:column;gap:10px;}
.bts-xsell .h-tile{font-size:var(--fs-sub);}
.bts-xsell-text{font-size:15px;line-height:1.55;color:var(--ink-soft);flex:1;}
.bts-xsell .textlink{align-self:flex-start;min-height:0;padding:4px 0;}

/* FAQ-Kacheln */
.bts-faq-q{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;margin-bottom:12px;}
.bts-faq-a{font-size:16px;line-height:1.6;color:var(--ink-soft);}
.bts-faq-a strong{color:var(--ink);}
.bts-faq-a a{
  color:var(--cyan-text);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--cyan-ring);text-decoration-thickness:2px;text-underline-offset:.18em;
}
.bts-faq-a a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

@media (max-width:960px){
  .bts-story{grid-template-columns:1fr;}
  .bts-ablauf--grid{grid-template-columns:1fr;}
  .bts-angebot{grid-template-columns:1fr;}
}

/* ===== BLOCK PARTIAL: einzel-buecher-wirken-index-html.css ===== */
/* =====================================================================
   BLOCK PARTIAL: einzel-buecher-wirken-index-html
   Opt-in-Seite /buecher-wirken/: eine zentrierte Hero-Kachel mit
   Brevo-Formular (Vorname, E-Mail, reCAPTCHA). Praefix bw-. Nur Tokens aus bento.css,
   keine neuen Farben, Radien oder Schriften.
   ===================================================================== */

/* ----- Hero-Kachel: zentrierte 8er-Spalte, Inhalt mittig ----- */
.bw-hero{
  grid-column:3 / span 8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:min(64vh,560px);
}
.bw-hero h1{margin-inline:auto;max-width:16ch;}
.bw-hero .lead{margin-inline:auto;max-width:48ch;}

/* ----- Formular: eine Spalte, Feld und Cyan-Pill ----- */
.bw-form{
  position:relative;
  display:flex;flex-direction:column;gap:12px;
  width:100%;max-width:480px;
  margin:28px auto 0;
}
.bw-input{
  display:block;width:100%;
  font-family:inherit;font-size:16px;line-height:1.4;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid rgba(26,26,26,.16);
  border-radius:var(--r-pill);
  padding:14px 22px;
  min-height:54px;
  text-align:center;
  transition:border-color .2s, box-shadow .2s;
}
.bw-input:hover{border-color:rgba(26,26,26,.3);}
.bw-input:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 4px var(--cyan-soft);
}
.bw-input::placeholder{color:var(--ink-soft);opacity:.85;}  /* AA: >= 4.5:1 auf Weiss, wie formular.css */
.bw-btn{width:100%;min-height:54px;font-size:17px;}
.bw-btn:disabled{cursor:wait;opacity:.7;transform:none;}

/* ----- reCAPTCHA-Widget: zentriert unter dem Button, nie breiter als die Kachel ----- */
.bw-recaptcha{display:flex;justify-content:center;max-width:100%;overflow:hidden;}
.bw-recaptcha:empty{display:none;}
.bw-recaptcha > div{max-width:100%;}
@media (max-width:420px){.bw-recaptcha > div{transform:scale(.9);transform-origin:50% 0;}}

/* ----- Ziel-Iframe fuer Brevo: unsichtbar ----- */
.bw-brevo-target{display:none;width:0;height:0;border:0;}

/* ----- Status nach dem Absenden (aria-live) ----- */
.bw-status{
  min-height:22px;
  margin:14px auto 0;
  max-width:480px;
  font-size:var(--fs-small);font-weight:700;line-height:1.5;
  color:var(--cyan-text);
}
.bw-status:empty{min-height:0;margin-top:0;}

/* ----- Datenschutz und Cookie-Einstellungen ----- */
.bw-meta{margin-top:16px;}
.bw-meta a{
  color:var(--cyan-text);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--cyan-ring);
  text-decoration-thickness:2px;text-underline-offset:.18em;
  transition:color .2s, text-decoration-color .2s;
}
.bw-meta a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

/* ----- Responsive ----- */
@media (max-width:960px){
  .bw-hero{grid-column:span 12;min-height:0;}
}

/* ===== BLOCK PARTIAL: einzel-datenschutz-index-html.css ===== */
/* =====================================================================
   BLOCK PARTIAL: einzel-datenschutz-index-html
   Einzelseite /datenschutz/ (Rechtstext): Hero-Kachel plus eine grosse,
   ruhige Lese-Kachel mit .prose. Nur Tokens aus bento.css, Praefix ds-.
   Spiegelt bewusst das Muster der Impressum-Partial (imp-), damit beide
   Rechtstexte dieselbe Sprache sprechen.
   ===================================================================== */

/* Hero: Standzeile unter der H1 */
.ds-hero h1{margin-bottom:12px;}
.ds-subline{max-width:72ch;line-height:1.6;}
.ds-subline .textlink{white-space:nowrap;}

/* Lese-Kachel: grosszuegiger Innenabstand, Text mittig in der Kachel */
.ds-lese{padding:var(--pad-xl);}
/* Die Lese-Kachel ist sehr hoch (ueber 20000px): der Scroll-Reveal aus bento.js
   (5 Prozent sichtbar) wuerde nie greifen, deshalb ist sie sofort sichtbar. */
.js .section:not(.hero) .ds-lese:not(.is-in){opacity:1;}
.ds-prose{max-width:68ch;}
.ds-prose :is(h2,h3)[id]{scroll-margin-top:96px;}
.ds-prose h2:not(:first-child){padding-top:1.2em;border-top:1px solid var(--line);}
.ds-prose h3{font-size:var(--fs-sub);font-weight:700;}
/* h3 direkt unter der h2 (Hoster/Hostinger, Cookies, Google): etwas Luft */
.ds-prose h2 + h3{margin-top:1em;}
.ds-prose a{overflow-wrap:anywhere;}

/* Kontaktblock: Telefon und E-Mail als abgesetzte Info-Box mit Cyan-Balken
   (identisch zum Impressum) */
.ds-kontakt{
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  padding:16px 20px;margin-top:1em;
  background:var(--off);border-radius:var(--r-sm);
  box-shadow:inset 4px 0 0 var(--cyan);
  font-size:var(--fs-small);line-height:1.55;
}
.ds-kontakt dt{font-weight:700;color:var(--ink);}
.ds-kontakt dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}
@media (max-width:600px){
  .ds-kontakt{grid-template-columns:1fr;gap:2px 0;}
  .ds-kontakt dd + dt{margin-top:8px;}
}

/* Schlusszeile: leise abgesetzt, mit Trennlinie ueber dem Datum */
.ds-prose .ds-schluss{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line);}

/* ===== BLOCK PARTIAL: einzel-downloads-index-html.css ===== */
/* =====================================================================
   BLOCK: einzel downloads (Workbooks und PDFs zu den Video-Serien, Prefix dl-)
   Hero: Copy 7 breit (hero-copy-Muster ohne Mindesthoehe), Brevo-Formular
   als dunkle Kachel 5 breit rechts. Zwei Serien als Kachelraster: je drei
   weisse (Werkstatt) bzw. warme (Irgendwas mit Buechern) Cover-Kacheln,
   Cover fuellt den Kopf der Kachel, darunter Meta, Titel, Download-Pill
   und Episoden-Textlink. Cross-Sell: weisse Link-Kachel plus Cyan-Ausgang.
   Klassen, auf die das Seiten-JS zugreift (dl-recaptcha, data-dl-form,
   data-dl-status, dl-brevo-target), bleiben erhalten. Nur Tokens aus bento.css.
   ===================================================================== */

/* ----- Brotkrumen ----- */
.dl-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  font-size:var(--fs-small);color:var(--ink-soft);
  margin-bottom:var(--space-head);padding-inline:8px;
}
.dl-crumbs a{color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line);transition:color .2s, box-shadow .2s;}
.dl-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}
.dl-crumbs .sep{color:var(--taupe);}
.dl-crumbs [aria-current]{color:var(--ink);font-weight:600;}

/* ----- Hero-Raster: Copy 7, Formular 5 ----- */
.dl-hero-copy{grid-column:span 7;min-height:0;}
.dl-hero-copy h1{font-size:clamp(34px,4.6vw,60px);line-height:1.02;letter-spacing:-0.03em;max-width:16ch;}
.dl-hero-copy .hero-sub{max-width:56ch;margin-bottom:24px;}

/* Versprechen-Chip: Haken plus Text, Cyan-Ring auf Off-White */
.dl-promise{
  display:inline-flex;align-items:center;gap:10px;
  width:fit-content;
  padding:9px 16px 9px 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--cyan-ring);
  background:var(--white);
  color:var(--ink);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.02em;line-height:1.3;
}
.dl-promise svg{width:18px;height:18px;flex:0 0 18px;color:var(--cyan-deep);}

/* ----- Opt-in-Kachel (dunkel) ----- */
.dl-optin-tile{
  grid-column:span 5;
  display:flex;flex-direction:column;gap:14px;
  background:
    radial-gradient(50% 55% at 100% 0%, rgba(0,160,222,.18), rgba(0,160,222,0) 70%),
    var(--dark);
}
.dl-optin-tile .h-tile{color:var(--white);}
.dl-optin-text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);}
.dl-optin-form{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:4px;}
.dl-optin-input{
  display:block;width:100%;
  min-height:52px;
  font-family:inherit;font-size:16px;line-height:1.4;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid rgba(26,26,26,.16);
  border-radius:var(--r-pill);
  padding:12px 20px;
  transition:border-color .2s, box-shadow .2s;
}
.dl-optin-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);}
.dl-optin-input::placeholder{color:var(--ink-soft);opacity:.8;}
.dl-optin-btn{width:100%;font-size:17px;min-height:54px;}
.dl-optin-btn:disabled{cursor:wait;opacity:.7;transform:none;}
.dl-recaptcha{display:flex;justify-content:flex-start;max-width:100%;overflow:hidden;}
.dl-recaptcha:empty{display:none;}
.dl-recaptcha > div{max-width:100%;}
.dl-honey{position:absolute;left:-9999px;width:1px;height:0;overflow:hidden;opacity:0;pointer-events:none;}
.dl-brevo-target{display:none;width:0;height:0;border:0;}
.dl-optin-status{font-size:var(--fs-small);font-weight:700;line-height:1.5;color:var(--cyan);}
.dl-optin-status:empty{display:none;}
.dl-optin-note{margin:0;}
.dl-optin-tile .dl-optin-note a{color:var(--white);text-decoration:underline;text-decoration-color:var(--cyan-ring);text-underline-offset:.18em;}
.dl-optin-tile .dl-optin-note a:hover{color:var(--cyan);text-decoration-color:var(--cyan);}

/* ----- Serien-Kopf: Titel links, YouTube-Link rechts ----- */
.dl-series-head .textlink{white-space:nowrap;}

/* ----- Cover-Kacheln ----- */
.dl-card{
  grid-column:span 4;
  display:flex;flex-direction:column;
}
.dl-cover{
  position:relative;
  aspect-ratio:565/800;
  width:100%;
  background:var(--warm);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.dl-card.tile--warm .dl-cover{background:var(--off);}
.dl-cover img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 0;
  transition:transform .9s var(--ease);
}
.dl-card:hover .dl-cover img{transform:scale(1.02);}
.dl-card-body{
  display:flex;flex-direction:column;gap:10px;
  flex:1;
  padding:clamp(20px,2.4vw,28px) var(--pad) var(--pad);
}
.dl-card-title{
  font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.015em;
  text-wrap:balance;
}
/* Aktionen bewusst als Spalte: Download-Pill oben, Episoden-Link darunter
   (in jeder Breite gleich, kein zufaelliger Umbruch) */
.dl-card-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  margin-top:auto;padding-top:10px;
}
.dl-btn{font-size:15px;min-height:46px;padding:10px 20px;}
.dl-btn svg{width:16px;height:16px;flex:0 0 16px;}

/* ----- Cross-Sell: zwei halbe Kacheln, rechts der Cyan-Ausgang ----- */
.dl-xsell{
  grid-column:span 6;
  display:flex;flex-direction:column;gap:12px;
}
.dl-xsell .h-tile{margin-top:2px;}
.dl-xsell-text{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:52ch;}
.dl-xsell .textlink,.dl-xsell .textlink-ink{margin-top:auto;align-self:flex-start;}
.dl-xsell.tile--cyan .dl-xsell-text{color:rgba(10,10,10,.86);}
.dl-xsell.tile--cyan.tile--hover:hover{border-color:var(--dark);box-shadow:0 0 0 5px rgba(10,10,10,.08), var(--shadow-hover);}

/* ----- Responsive ----- */
@media (max-width:960px){
  .dl-hero-copy,.dl-optin-tile{grid-column:span 12;}
  .dl-card{grid-column:span 6;}
  .dl-xsell{grid-column:span 12;}
}
@media (max-width:600px){
  .dl-recaptcha > div{transform:scale(.9);transform-origin:0 0;}
  /* Listenkarte: Cover links (2/5), Text rechts. Das Cover fuellt die
     Zeilenhoehe, Zuschnitt nur unten, falls der Text hoeher wird. */
  .dl-card{
    grid-column:span 12;
    display:grid;grid-template-columns:40% minmax(0,1fr);
    align-items:stretch;
  }
  .dl-cover{
    aspect-ratio:565/800;height:100%;
    border-bottom:0;border-right:1px solid var(--line);
  }
  .dl-card-body{padding:16px;gap:8px;}
  .dl-card-title{font-size:17px;line-height:1.25;}
  .dl-card-actions{gap:4px;padding-top:6px;width:100%;}
  .dl-btn{width:100%;font-size:14px;min-height:42px;padding:9px 14px;}
  .dl-btn svg{width:15px;height:15px;flex-basis:15px;}
}

/* ===== BLOCK PARTIAL: einzel-impressum-index-html.css ===== */
/* =====================================================================
   BLOCK PARTIAL: einzel-impressum-index-html
   Einzelseite /impressum/ (Rechtstext): Hero-Kachel plus eine ruhige
   Lese-Kachel mit .prose. Nur Tokens aus bento.css, Praefix imp-.
   ===================================================================== */

/* Hero: Standzeile unter der H1 */
.imp-hero h1{margin-bottom:12px;}
.imp-subline{max-width:60ch;line-height:1.6;}
.imp-subline .textlink{white-space:nowrap;}

/* Lese-Kachel: grosszuegiger Innenabstand, Text mittig in der Kachel */
.imp-lese{padding:var(--pad-xl);}
.imp-prose{max-width:68ch;}
.imp-prose :is(h2,h3)[id]{scroll-margin-top:96px;}
/* Sicherheitsnetz fuer sehr schmale Geraete (unter 360px): das Wort
   Umsatzsteueridentnummer (299px breit) wuerde sonst ueber den Kachelrand
   laufen. Ab 360px bleibt es einzeilig, bei 375 laeuft es nur knapp in den
   Innenabstand der Kachel, was unsichtbar bleibt. */
@media (max-width:359px){
  .imp-prose :is(h2,h3){hyphens:auto;overflow-wrap:anywhere;}
}
.imp-prose h2:not(:first-child){padding-top:1.2em;border-top:1px solid var(--line);}
.imp-prose h3{font-size:var(--fs-sub);font-weight:700;}
.imp-prose a{overflow-wrap:anywhere;}

/* Kontaktblock: Telefon und E-Mail als abgesetzte Info-Box mit Cyan-Balken */
.imp-kontakt{
  display:grid;grid-template-columns:auto 1fr;gap:6px 18px;
  padding:16px 20px;margin-top:1em;
  background:var(--off);border-radius:var(--r-sm);
  box-shadow:inset 4px 0 0 var(--cyan);
  font-size:var(--fs-small);line-height:1.55;
}
.imp-kontakt dt{font-weight:700;color:var(--ink);}
.imp-kontakt dd{margin:0;color:var(--ink);overflow-wrap:anywhere;}
@media (max-width:600px){
  .imp-kontakt{grid-template-columns:1fr;gap:2px 0;}
  .imp-kontakt dd + dt{margin-top:8px;}
}

/* ===== BLOCK PARTIAL: einzel-lektorat-sachbuch-index-html.css ===== */
/* Einzelseite /lektorat-sachbuch/ (Produkt- und Verkaufsseite Hybrid-Lektorat). Praefix: lek- */

/* Brotkrumen ueber dem Hero */
.lek-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:0 8px 12px;
  font-size:var(--fs-small);color:var(--ink-soft);
}
.lek-crumbs a{color:var(--ink);text-decoration:none;font-weight:600;box-shadow:inset 0 -2px 0 var(--cyan);}
.lek-crumbs a:hover{color:var(--cyan-deep);}
.lek-crumbs .sep{color:var(--taupe);}

/* Hero ohne Foto: Story-Hook, breiterer Lead als das Standard-Muster */
.lek-hero .lead{max-width:66ch;}
.lek-hero .lead strong{color:var(--ink);}

/* Story: Ueberschrift links, Geschichte rechts */
.lek-story{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(20px,3vw,40px);
  padding:var(--pad-lg);
}
.lek-story .mark{margin-bottom:18px;}
.lek-story .lead{max-width:62ch;}
.lek-story .lead strong{color:var(--ink);}

/* Zahlen-Kacheln */
.lek-stat{display:flex;flex-direction:column;gap:12px;}
.lek-stat-num{
  font-size:var(--fs-feature);font-weight:700;line-height:1;letter-spacing:-0.03em;
  color:var(--cyan-deep);
}
.lek-stat-num--text{font-size:var(--fs-section);}
.lek-stat p:not(.lek-stat-num){font-size:15px;line-height:1.55;color:var(--ink-soft);}
.lek-stat p strong{color:var(--ink);}

/* Ablauf: vier Schritte in zwei Spalten in der dunklen Kachel */
.lek-ablauf--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}

/* Optionen: drei Wege als Kacheln, der vierte als dunkle Angebots-Kachel */
.lek-option{display:flex;flex-direction:column;gap:12px;}
.lek-option .h-tile{font-size:var(--fs-sub);}
.lek-option-text{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.lek-option-cost{
  font-size:var(--fs-small);font-weight:700;line-height:1.5;color:var(--taupe);
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
}
.lek-angebot{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(28px,4.5vw,60px);
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.lek-angebot .lek-option .h-tile{color:var(--white);font-size:var(--fs-tile);}
.lek-angebot .lek-option-text{color:rgba(255,255,255,.82);font-size:16px;}
.lek-angebot .lek-option-cost{color:var(--cyan);border-top-color:var(--line-dark);}
.lek-angebot .inset{padding:clamp(20px,2.5vw,32px);display:flex;flex-direction:column;gap:20px;}
.lek-angebot .inset .lead{color:rgba(255,255,255,.82);}
.lek-angebot .inset strong{color:var(--white);}

/* Nutzen-Kacheln: Cyan-Strich plus Satz */
.lek-nutzen p{font-size:16px;line-height:1.55;color:var(--ink-soft);}
.lek-nutzen p strong{color:var(--ink);}

/* Beleg-Anker (500+ / 20+ / 3) */
.lek-anker-row{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:24px;}
.lek-anker-num{font-size:var(--fs-section);font-weight:700;line-height:1;letter-spacing:-0.03em;color:var(--cyan-deep);}
.lek-anker-label{font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft);margin-top:6px;}

/* Cross-Sell-Kacheln (klickbar) */
.lek-xsell{display:flex;flex-direction:column;gap:10px;}
.lek-xsell .h-tile{font-size:var(--fs-sub);}
.lek-xsell-text{font-size:15px;line-height:1.55;color:var(--ink-soft);flex:1;}
.lek-xsell .textlink{align-self:flex-start;min-height:0;padding:4px 0;}

/* FAQ-Kacheln */
.lek-faq-q{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;margin-bottom:12px;}
.lek-faq-a{font-size:16px;line-height:1.6;color:var(--ink-soft);}
.lek-faq-a strong{color:var(--ink);}

@media (max-width:960px){
  .lek-story{grid-template-columns:1fr;}
  .lek-ablauf--grid{grid-template-columns:1fr;}
  .lek-angebot{grid-template-columns:1fr;}
}

/* ===== BLOCK PARTIAL: einzel-podcast-index-html.css ===== */
/* Einzelseite /podcast/ (Podcast und So-Geht-Show). Praefix: pod- */

/* Brotkrumen ueber dem Hero */
.pod-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:0 8px 12px;
  font-size:var(--fs-small);color:var(--ink-soft);
}
.pod-crumbs a{color:var(--ink);text-decoration:none;font-weight:600;box-shadow:inset 0 -2px 0 var(--cyan);}
.pod-crumbs a:hover{color:var(--cyan-deep);}
.pod-crumbs .sep{color:var(--taupe);}

/* Cover-Kachel eines Formats: dunkel, Titel unten, Cyan-Strich oben */
.pod-cover{
  min-height:clamp(240px,30vw,400px);
  gap:12px;
  background:
    radial-gradient(60% 50% at 100% 0%, var(--cyan-soft), rgba(0,160,222,0) 70%),
    var(--dark);
}
.pod-cover .mark{position:absolute;top:0;left:var(--pad);border-radius:0 0 var(--r-pill) var(--r-pill);}
.pod-cover-title{
  font-size:var(--fs-tile);font-weight:700;line-height:1.1;letter-spacing:-0.02em;
  color:var(--white);
}
.pod-cover-note{
  display:block;margin-top:10px;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* Inhalts-Kachel eines Formats */
.pod-format{display:flex;flex-direction:column;gap:14px;}
.pod-format .eyebrow{margin-bottom:2px;}
.pod-format .h-section{max-width:20ch;}
.pod-format-sub{color:var(--ink);font-weight:600;max-width:58ch;}
.pod-format-text{font-size:var(--fs-body);line-height:1.65;color:var(--ink-soft);max-width:62ch;}

/* Eckdaten-Zeile: Rhythmus, Laenge, Format */
.pod-meta{
  display:flex;flex-wrap:wrap;gap:8px 24px;
  margin-top:8px;padding-block:14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:var(--fs-small);color:var(--ink-soft);
}
.pod-meta strong{color:var(--ink);font-weight:700;}

/* Plattform-Pills: noch nicht klickbar (aria-disabled), daher ohne Hover */
.pod-platforms{margin-top:4px;}
.pod-platform{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;
  border-radius:var(--r-pill);
  border:1.5px dashed rgba(26,26,26,.2);
  background:var(--white);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.02em;
  color:var(--ink-soft);
  cursor:default;
}
.pod-platform--primary{border-style:solid;border-color:var(--cyan-ring);background:var(--cyan-soft);color:var(--ink);}

/* Hinweis-Kachel: Folgen-Uebersicht folgt */
.pod-teaser{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.pod-teaser .h-section{max-width:22ch;}
.pod-teaser .lead{max-width:64ch;}

/* Cross-Sell-Kacheln: klickbar */
a.pod-xsell{display:flex;flex-direction:column;gap:12px;}
.pod-xsell .h-tile{margin-top:2px;}
.pod-xsell-text{font-size:var(--fs-body);line-height:1.6;color:var(--ink-soft);max-width:52ch;}
.pod-xsell .textlink{margin-top:auto;align-self:flex-start;}

@media (max-width:960px){
  .pod-cover{grid-column:span 12;min-height:220px;}
  .pod-format{grid-column:span 12;}
}
@media (max-width:600px){
  .pod-platform{width:100%;}
}

/* ===== BLOCK PARTIAL: einzel-services-index-html.css ===== */
/* =====================================================================
   SERVICES-HUB (/services/): Einzelseite, Kachel-Raster wie /leistungen/
   Aufbau:
     1. Hero als Unterseiten-Kachel (hero-page, Basis)
     2. Differenzierung: warme Kachel, Ueberschrift links, Lead rechts
     3. Phasen-Linie: section-head plus vier Kacheln mit Nummer (step-num),
        darunter eine Trennzeile mit Linien
     4. Vier Services: Intro-Kachel (warm, 4 breit, 2 Zeilen) plus vier
        klickbare weisse Kacheln (.svc-card) mit Preis-Fusszeile
     5. Cross-Sells: eine dunkle und eine weisse Link-Kachel
     6. FAQ: fuenf Kacheln (2 mal 6 breit, 3 mal 4 breit)
     7. Ausgang als Cyan-Kachel (Basis-Muster .ausgang)
   Nur Tokens, Klassen-Praefix "svc-". Keine Basis-Klassen ueberschrieben.
   ===================================================================== */

/* ----- 2. Differenzierung: Zweiteiler ----- */
.svc-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);
  align-items:center;
  padding:var(--pad-lg);
}
.svc-split .mark{margin-bottom:18px;}
.svc-split h2{max-width:22ch;}
.svc-split .lead{max-width:56ch;}
.svc-split .lead strong{color:var(--ink);}

/* ----- Section-Head mit Unterzeile ----- */
.svc-head-sub{margin-top:12px;max-width:60ch;}

/* ----- 3. Phasen-Linie ----- */
.svc-phase{display:flex;flex-direction:column;gap:6px;}
.svc-phase-num{margin-bottom:14px;}
.svc-phase-title{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.015em;
}
.svc-phase-product{font-size:15px;line-height:1.5;color:var(--ink-soft);}
.svc-phase-divider{
  grid-column:span 12;
  display:flex;align-items:center;gap:16px;
  margin-top:4px;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--taupe);
  text-align:center;
}
.svc-phase-divider::before,.svc-phase-divider::after{content:"";flex:1;height:1px;background:var(--line);}

/* ----- 4. Vier Services: Intro-Kachel und Service-Kacheln ----- */
.svc-intro{display:flex;flex-direction:column;gap:14px;min-height:220px;}
.svc-intro .mark{margin-bottom:auto;}
.svc-intro .eyebrow{margin-top:clamp(28px,4vw,56px);}
.svc-intro h2{max-width:14ch;}
.svc-intro .lead{max-width:40ch;}
/* a.svc-card statt .svc-card: a.tile{display:block} aus der Basis hat sonst Vorrang */
a.svc-card{display:flex;flex-direction:column;gap:12px;min-height:100%;}
.svc-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;}
.svc-card-meta{font-size:var(--fs-small);font-weight:600;line-height:1.4;color:var(--ink-soft);}
.svc-card-title{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.015em;
}
.svc-card-text{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.svc-card-foot{
  margin-top:auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px 14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.svc-card-price{font-size:var(--fs-sub);font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.svc-card-cta{
  font-size:15px;font-weight:700;color:var(--cyan-text);
  transition:color .2s, transform .3s var(--ease);
}
a.svc-card:hover .svc-card-cta,a.svc-card:focus-visible .svc-card-cta{color:var(--dark);transform:translateX(4px);}

/* ----- 5. Cross-Sells: dunkle und weisse Link-Kachel ----- */
a.svc-cross{display:flex;flex-direction:column;gap:12px;min-height:100%;}
.svc-cross-title{
  font-size:var(--fs-tile);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
}
.svc-cross-text{line-height:1.6;color:var(--ink-soft);max-width:56ch;}
.tile--dark .svc-cross-text{color:inherit;opacity:.82;}
.svc-cross-cta{
  display:block;
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:15px;font-weight:700;line-height:1.4;
  color:var(--cyan-text);
  transition:color .2s, border-color .3s var(--ease), transform .3s var(--ease);
}
.tile--dark .svc-cross-cta{border-top-color:var(--line-dark);color:var(--cyan);}
a.svc-cross:hover .svc-cross-cta,a.svc-cross:focus-visible .svc-cross-cta{color:var(--dark);border-top-color:var(--cyan);transform:translateX(4px);}
a.svc-cross.tile--dark:hover .svc-cross-cta,a.svc-cross.tile--dark:focus-visible .svc-cross-cta{color:var(--white);}

/* ----- 6. FAQ-Kacheln ----- */
.svc-faq{display:flex;flex-direction:column;gap:12px;}
.svc-faq-q{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.svc-faq-a{line-height:1.6;color:var(--ink-soft);}
.svc-faq-a strong{color:var(--ink);}

/* ----- Responsive ----- */
@media (max-width:960px){
  .svc-split{grid-template-columns:1fr;}
  .svc-split h2{max-width:none;}
  .svc-intro{grid-column:span 12;grid-row:auto;min-height:0;}
  .svc-intro .eyebrow{margin-top:20px;}
  .svc-intro h2,.svc-intro .lead{max-width:none;}
}
@media (max-width:600px){
  a.svc-card,a.svc-cross{min-height:0;}
  .svc-phase-divider{flex-direction:column;gap:8px;}
  .svc-phase-divider::before,.svc-phase-divider::after{width:100%;flex:none;}
}

/* ----- 7. Ausgang: die Frage-Zeile als Eyebrow darf durchlaufen ----- */
.svc-ausgang .eyebrow{max-width:none;margin-bottom:14px;}

/* ===== BLOCK PARTIAL: einzel-speaker-index-html.css ===== */
/* Einzelseite /speaker/ (Keynote und Vortrag). Praefix: spk- */

/* Brotkrumen ueber dem Hero */
.spk-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  padding:0 8px 12px;
  font-size:var(--fs-small);color:var(--ink-soft);
}
.spk-crumbs a{color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line);transition:color .2s, box-shadow .2s;}
.spk-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}
.spk-crumbs .sep{color:var(--taupe);}
.spk-crumbs [aria-current]{color:var(--ink);font-weight:600;}

/* Hero: Copy-Kachel 8 breit, daneben die Hinweis-Kachel 4 breit */
.spk-hero{grid-column:span 8;display:flex;flex-direction:column;justify-content:center;}
.spk-hero h1{max-width:12ch;}
.spk-hinweis{display:flex;flex-direction:column;justify-content:flex-end;gap:18px;}
.spk-hinweis .small strong{color:var(--cyan-text);font-weight:700;}

/* Themen: Intro-Kachel plus Stichwort-Kacheln */
.spk-intro .lead{max-width:40ch;}
.spk-stichwort{display:flex;flex-direction:column;justify-content:center;gap:14px;}
.spk-stichwort p{
  font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;
  color:var(--ink);text-wrap:balance;
}

/* Formate: dunkle Kachel, Copy oben, drei Insets darunter */
.spk-formate{display:flex;flex-direction:column;gap:clamp(22px,3vw,36px);}
.spk-formate .eyebrow{margin-bottom:12px;}
.spk-formate .h-section{margin-bottom:12px;color:var(--white);}
.spk-formate-copy .lead{max-width:56ch;}
.spk-formate-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.tile--dark .spk-format{display:flex;flex-direction:column;gap:6px;padding:clamp(20px,2.5vw,28px);}
.spk-format-dauer{
  font-size:var(--fs-section);font-weight:700;line-height:1;letter-spacing:-0.03em;
  color:var(--cyan);margin-bottom:6px;
}
.spk-format h3{font-size:17px;font-weight:700;line-height:1.3;color:var(--white);}
.spk-format p:not(.spk-format-dauer){font-size:var(--fs-small);line-height:1.55;color:rgba(255,255,255,.72);}

@media (max-width:960px){
  .spk-hero{grid-column:span 12;}
  .spk-hinweis{grid-column:span 12;}
  .spk-formate-row{grid-template-columns:1fr;}
}

/* ===== BLOCK PARTIAL: einzel-strategiegespraech-vereinbaren-index-html.css ===== */
/* Einzelseite /strategiegespraech-vereinbaren/ (Konversionsseite mit Calendly-Einbettung). Praefix: sgv- */

/* Versprechen: drei Kacheln mit Cyan-Nummer, Titel und Satz */
.sgv-promise{display:flex;flex-direction:column;gap:14px;}
.sgv-promise .h-tile{font-size:var(--fs-sub);}
.sgv-promise-text{font-size:15px;line-height:1.55;color:var(--ink-soft);}

/* Termin: grosse Cyan-Kachel, Calendly-Widget in weisser Innenflaeche */
.sgv-termin-section{scroll-margin-top:96px;}
.sgv-termin{
  grid-column:span 12;
  padding:clamp(10px,1.5vw,16px);
  text-align:left;
}
.sgv-termin-widget{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.sgv-termin .calendly-inline-widget{width:100%;min-width:0;height:760px;}
.sgv-termin-note{
  text-align:center;
  font-size:var(--fs-small);line-height:1.6;
  color:var(--dark);
  padding:16px 12px 8px;
}
.sgv-termin-note a{
  color:var(--dark);font-weight:700;text-decoration:none;
  box-shadow:inset 0 -2px 0 rgba(10,10,10,.5);
  transition:box-shadow .2s;
}
.sgv-termin-note a:hover{box-shadow:inset 0 -2px 0 var(--dark);}

/* Filter: dunkle Kachel, Haltung links, Liste rechts als abgesetzte Flaeche */
.sgv-filter{
  grid-column:span 12;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  padding:clamp(28px,4.5vw,60px);
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.sgv-filter .eyebrow{margin-bottom:16px;}
.sgv-filter .h-section{margin-bottom:18px;color:var(--white);}
.sgv-filter .lead{max-width:56ch;}
.sgv-filter .inset{padding:clamp(20px,2.5vw,32px);}
.sgv-filter .inset .prose{font-size:16px;}
.sgv-filter .inset .prose strong{color:var(--cyan);}
.sgv-filter-schluss{color:rgba(255,255,255,.82);}

@media (max-width:960px){
  .sgv-termin .calendly-inline-widget{height:1100px;}
  .sgv-filter{grid-template-columns:1fr;}
}

/* ===== BLOCK PARTIAL: etappe.css ===== */
/* =====================================================================
   ETAPPE: Etappen-Landingpages (/buch-schreiben/<slug>/, /buch-wirken-lassen/<slug>/)
   Erzeugt von scripts/build_etappen.py. Aufbau pro Seite:
     1. Hero als Zweier-Bento (hero-copy 8 + hero-photo 4, Basis-Muster)
     2. Tueren: section-head + zwei oder drei gleich grosse Link-Kacheln
        (.etappe-door, die "Fuer dich machen"-Tuer als dunkle Fokus-Kachel)
     3. Verwandtes: Kopf-Kachel (warm, ab 4 Links ueber zwei Zeilen) + Link-Kacheln
        (.tile-link); Spans zahlenbasiert, damit das Raster ohne Luecke aufgeht
     4. Ausgang: die Cyan-Kachel (.ausgang aus der Basis), id="final-cta" auf der Section
   Nur Tokens, Klassen-Praefix "etappe-". Keine Basis-Klassen ueberschrieben.
   ===================================================================== */

/* ----- 1. Hero: lange Pain-Headlines brauchen die Feature-Groesse statt Display ----- */
.etappe-hero h1{
  font-size:var(--fs-feature);
  line-height:1.08;
  letter-spacing:-0.025em;
  margin-bottom:18px;
}
.etappe-hero .hero-sub{margin-bottom:26px;}
.etappe-hero .hero-cta-row{align-items:center;gap:12px 24px;}

/* ----- 2. Tueren: ganze Kachel ist der Link ----- */
/* a.etappe-door statt .etappe-door: a.tile{display:block} aus der Basis hat sonst Vorrang */
a.etappe-door{
  display:flex;flex-direction:column;
  gap:12px;
  min-height:100%;
}
.etappe-door .chip{align-self:flex-start;}
.etappe-door-title{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.015em;
  margin-top:6px;
}
.etappe-door .lead{font-size:var(--fs-body);}
.etappe-door .textlink{margin-top:auto;align-self:flex-start;padding-top:8px;}
/* Fokus-Tuer (dunkel): Chip wird Cyan, damit der Weg ins Auge faellt */
.etappe-door--fokus .chip{background:var(--cyan);color:var(--dark);border-color:var(--cyan);}

/* ----- 3. Verwandtes: Kopf-Kachel mit Cyan-Strich, Link-Kacheln daneben ----- */
.etappe-rel-head{
  display:flex;flex-direction:column;
  gap:12px;
  min-height:180px;
}
.etappe-rel-head .mark{margin-bottom:auto;}
.etappe-rel-head .eyebrow{margin-top:18px;}
.etappe-rel-head h2{max-width:14ch;}
a.etappe-rel-link{
  display:flex;align-items:center;
  min-height:120px;
}
.etappe-rel-link strong{margin-bottom:0;}

/* ----- 4. Ausgang: Anker-Ziel des Hero-Buttons, bleibt unter der Sticky-Pill sichtbar ----- */
.etappe-final{scroll-margin-top:96px;}

/* ----- Responsive ----- */
@media (max-width:960px){
  .etappe-rel-head{min-height:0;}
  a.etappe-rel-link{min-height:96px;}
}
/* Tablet (Zweispalter): bei drei Tueren wird die dritte volle Breite statt halb und allein.
   Verwandtes: Kopf-Kachel ist Kind 1, der letzte Link ist Kind n+1. Ist die Gesamtzahl
   ungerade (letztes Kind an ungerader Stelle), fuellt der letzte Link die Reihe; ist sie
   gerade, wird er halb, auch wenn er auf dem Desktop span-12 traegt. So bleibt keine Waise. */
@media (min-width:601px) and (max-width:960px){
  .etappe-doors .bento > a.etappe-door:nth-child(3):last-child{grid-column:span 12;}
  .etappe-related .bento > a.etappe-rel-link:last-child:nth-child(odd){grid-column:span 12;}
  .etappe-related .bento > a.etappe-rel-link:last-child:nth-child(even){grid-column:span 6;}
}
@media (max-width:600px){
  a.etappe-door{min-height:0;}
  a.etappe-rel-link{min-height:0;}
}

/* ===== BLOCK PARTIAL: formular.css ===== */
/* =====================================================================
   BLOCK: formular (Fragebogen, Infopaket-Anfragen, Kontakt)
   Formular als grosse weisse Kachel (.fm-card), jeder Fragenblock (.fblock)
   eine Off-White-Unterkachel, Felder in einer Formular-Komponente,
   Fokus-Ring Cyan, Auswahl als Chips, Submit als Cyan-Pill.
   Klassen aus dem Original-Markup (opt-chip, sm-handle, is-on, show,
   checks, filebox, honey, mathrow, checkrow) bleiben, weil Seiten-JS
   darauf zugreift; sie werden hier nur unter .fm-card gestylt.
   Nur Tokens aus bento.css.
   ===================================================================== */

/* ----- Hero: Hinweis-Pill fuer die Quelle (wird per JS eingeblendet) ----- */
.fm-hero .quelle-pill{
  display:none;
  margin-bottom:14px;
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);color:var(--ink);
}

/* ----- Formular-Kachel: zentrierte 8er-Spalte, im Split-Layout 7 Spalten ----- */
.fm-card{grid-column:3 / span 8;}
.fm-layout .fm-card{grid-column:span 7;}
.fm-card form{display:block;}

/* ----- Unterkacheln pro Fragenblock ----- */
.fm-card .fblock{
  background:var(--off);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:clamp(18px,2.4vw,28px);
}
/* Cyan-Strich als Block-Marke, wie .mark auf der Startseite (kein DOM-Text) */
.fm-card .fblock::before{
  content:"";display:block;width:44px;height:6px;border-radius:var(--r-pill);
  background:var(--cyan);margin-bottom:14px;
}
.fm-card .fblock + .fblock{margin-top:var(--gap);}
.fm-card .fblock .bt{margin-bottom:14px;}
.fm-card .fblock > .bt + label,
.fm-card .fblock > .bt + .lhint,
.fm-card .fblock > .bt + .checks,
.fm-card .fblock > .bt + .fm-chip-row{margin-top:0;}

/* ----- Labels und Hinweise ----- */
.fm-card label{
  display:block;
  font-weight:700;font-size:var(--fs-body);line-height:1.4;
  color:var(--ink);
  margin:18px 0 6px;
}
.fm-card .lhint{
  font-size:var(--fs-small);line-height:1.5;
  color:var(--ink-soft);
  margin:2px 0 8px;
}
.fm-card label > .lhint{display:inline;font-weight:400;margin:0;}

/* ----- Eingabefelder ----- */
.fm-card input[type=text],
.fm-card input[type=email],
.fm-card input[type=url],
.fm-card textarea{
  display:block;
  width:100%;
  font-family:inherit;font-size:16px;line-height:1.4;
  color:var(--ink);
  background:var(--white);
  border:1.5px solid rgba(26,26,26,.16);
  border-radius:var(--r-sm);
  padding:12px 16px;
  transition:border-color .2s, box-shadow .2s;
}
.fm-card textarea{min-height:110px;resize:vertical;}
.fm-card input[type=text]:focus,
.fm-card input[type=email]:focus,
.fm-card input[type=url]:focus,
.fm-card textarea:focus{
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 4px var(--cyan-soft);
}
.fm-card input[type=text]:hover,
.fm-card input[type=email]:hover,
.fm-card input[type=url]:hover,
.fm-card textarea:hover{border-color:rgba(26,26,26,.3);}
.fm-card ::placeholder{color:var(--ink-soft);opacity:.85;}  /* AA: >= 4.5:1 auf Weiss */

/* Datei-Felder: gestrichelte Box */
.fm-card .filebox{
  display:block;width:100%;
  font-family:inherit;font-size:var(--fs-small);color:var(--ink-soft);
  border:1.5px dashed rgba(26,26,26,.16);
  border-radius:var(--r-sm);
  padding:14px 16px;
  background:var(--white);
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.fm-card .filebox:hover,
.fm-card .filebox:focus-within,
.fm-card input.filebox:focus{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);outline:none;}
.fm-card .filebox input[type=file]{font-family:inherit;font-size:var(--fs-small);color:var(--ink-soft);max-width:100%;}
.fm-card .filebox input[type=file]:focus-visible{outline:none;}
.fm-card input[type=file]::file-selector-button{
  font-family:inherit;font-size:var(--fs-small);font-weight:700;line-height:1.15;
  color:var(--ink);background:var(--white);
  border:1.5px solid rgba(26,26,26,.16);border-radius:var(--r-pill);
  padding:8px 16px;margin-right:12px;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.fm-card input[type=file]:hover::file-selector-button{border-color:var(--cyan);box-shadow:0 0 0 4px var(--cyan-soft);}

/* ----- Auswahl-Chips: Checkbox oder Radio in einer Pill ----- */
.fm-card .checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.fm-card .checks.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fm-card .checkbox-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;}
.fm-card .fm-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.fm-card .fm-chip{position:relative;display:inline-flex;}

.fm-card label.opt-chip,
.fm-card label.check-tile,
.fm-card .fm-chip label{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  margin:0;
  padding:10px 16px 10px 14px;
  min-height:46px;
  border:1.5px solid rgba(26,26,26,.16);
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--ink);
  font-size:var(--fs-body);font-weight:600;line-height:1.3;
  cursor:pointer;
  user-select:none;
  transition:background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.fm-card .checks.grid2 label.opt-chip,
.fm-card .checkbox-grid label.check-tile{display:flex;width:100%;}
.fm-card label.check-tile span{flex:1;}

/* natives Kaestchen unsichtbar, aber fokussierbar */
.fm-card label.opt-chip input,
.fm-card label.check-tile input,
.fm-card .fm-chip input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}
/* Zustands-Punkt */
.fm-card label.opt-chip::before,
.fm-card label.check-tile::before,
.fm-card .fm-chip label::before{
  content:"";flex:0 0 14px;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(26,26,26,.25);
  background:var(--white);
  transition:background .2s, border-color .2s;
}
.fm-card label.opt-chip:hover,
.fm-card label.check-tile:hover,
.fm-card .fm-chip label:hover{border-color:var(--cyan);}
/* aktiv: per JS (.is-on) oder per CSS-Zustand */
.fm-card label.opt-chip.is-on,
.fm-card label.opt-chip:has(input:checked),
.fm-card label.check-tile:has(input:checked),
.fm-card .fm-chip input:checked + label{
  background:var(--cyan);border-color:var(--cyan);color:var(--dark);
}
.fm-card label.opt-chip.is-on::before,
.fm-card label.opt-chip:has(input:checked)::before,
.fm-card label.check-tile:has(input:checked)::before,
.fm-card .fm-chip input:checked + label::before{
  background:var(--dark);border-color:var(--dark);
}
/* sichtbarer Fokus, wenn per Tastatur auf dem versteckten Kaestchen */
.fm-card label.opt-chip:has(input:focus-visible),
.fm-card label.check-tile:has(input:focus-visible),
.fm-card .fm-chip input:focus-visible + label{
  outline:3px solid var(--cyan);outline-offset:3px;
}

/* Social-Media-Handles: erscheinen per JS (.show) */
.fm-card .sm-handles{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.fm-card .sm-handle{display:none;align-items:center;gap:12px;}
.fm-card .sm-handle.show{display:flex;}
.fm-card .sm-handle .sm-lbl{flex:0 0 96px;font-size:var(--fs-small);font-weight:700;color:var(--ink);}
.fm-card .sm-handle input{flex:1;margin:0;}

/* ----- Bot-Bremse und Newsletter-Zeile ----- */
.fm-card label.mathrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:0;}
.fm-card .mathrow .mathq{font-weight:700;font-size:var(--fs-body);color:var(--ink);}
.fm-card .mathrow input{width:auto;max-width:120px;margin:0;}
.fm-card .checkrow{display:flex;align-items:flex-start;gap:12px;margin-top:18px;}
.fm-card .checkrow input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--cyan);cursor:pointer;}
.fm-card .checkrow label{margin:0;font-weight:400;font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);cursor:pointer;}
.fm-card .checkrow a{color:var(--cyan-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--cyan-ring);text-underline-offset:.18em;}
.fm-card .checkrow a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

/* Honeypot: bleibt unsichtbar und ausserhalb */
.fm-card .honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;overflow:hidden;}

/* ----- Absenden: Cyan-Pill, volle Breite ----- */
.fm-card .fsubmit{margin-top:clamp(20px,3vw,28px);}
.fm-card .fsubmit .btn{width:100%;}
.fm-card .fsubmit .fassure{text-align:center;margin-top:12px;}

/* ----- Split-Layout (1:1-Projekt-Check): Formular 7, Passung dunkel 5 ----- */
.fm-fit{
  grid-column:span 5;
  align-self:start;
  position:sticky;top:96px;
}
.fm-fit h2{font-size:var(--fs-tile);font-weight:600;line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px;}
.fm-fit p{font-size:var(--fs-body);line-height:1.55;color:rgba(255,255,255,.78);}
.fm-fit .fit-list{display:grid;gap:12px;margin:22px 0;}
.fm-fit .fit-list div{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;color:var(--white);font-size:var(--fs-body);line-height:1.5;}
.fm-fit .fit-list b{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--cyan);color:var(--dark);
  font-size:13px;font-weight:700;
}
.fm-fit .fit-next{border-top:1px solid var(--line-dark);padding-top:18px;margin-top:22px;}
.fm-fit .fit-next strong{display:block;color:var(--white);margin-bottom:6px;}
.fm-fit .fit-next p{margin:0;}

/* ----- Responsive ----- */
@media (max-width:960px){
  .fm-card,.fm-layout .fm-card{grid-column:span 12;}
  .fm-fit{grid-column:span 12;position:static;}
}
@media (max-width:600px){
  .fm-card{padding:12px;}
  .fm-card .fblock{padding:18px 16px;}
  .fm-card .fsubmit{padding:0 6px 8px;}
  .fm-card .checks.grid2{grid-template-columns:1fr;}
  .fm-card .checkbox-grid{grid-template-columns:1fr 1fr;}
  .fm-card .sm-handle .sm-lbl{flex-basis:80px;}
}

/* ===== BLOCK PARTIAL: magazin-artikel.css ===== */
/* =====================================================================
   BLOCK PARTIAL: magazin-artikel
   Magazin-Artikel (54 Seiten): Brotkrumen, Artikel-Hero plus Meta-/Show-
   Notes-Kachel, Medien-Kachel (Featured Image oder Video), Kapitel-Kachel,
   Lese-Kachel mit .prose und Unter-Kacheln, Seitenleiste (Autor, Quellen),
   Link-Kacheln, Cyan-Ausgang. Nur Tokens aus bento.css, Praefix ma-.
   ===================================================================== */

/* ----- Brotkrumen ----- */
.ma-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 8px 14px;font-size:var(--fs-small);line-height:1.5;color:var(--taupe);font-weight:700;}
.ma-crumbs a{color:var(--ink);font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 var(--cyan);padding:2px 0;transition:color .2s;}
.ma-crumbs a:hover{color:var(--cyan-deep);}
.ma-crumbs-sep{color:var(--taupe);}
.ma-crumbs [aria-current]{color:var(--ink-soft);font-weight:600;}

/* ----- Kopf: Artikel-Kachel 8 (mit Byline) + Notes-/Antwort-Kachel 4 -----
   Ohne Show Notes oder Antwort-Box steht die Artikel-Kachel allein (span 12). */
.ma-hero{grid-column:span 8;display:flex;flex-direction:column;justify-content:center;}
.ma-hero--full{grid-column:span 12;}
.ma-hero h1{max-width:24ch;}
.ma-hero--long h1{font-size:var(--fs-feature);line-height:1.08;max-width:30ch;}
.ma-hero .lead{max-width:62ch;color:var(--ink);}
.ma-side{grid-column:span 4;display:flex;flex-direction:column;gap:22px;}
.ma-side .prose{font-size:var(--fs-body);}
.ma-side .prose .eyebrow{margin-bottom:0;}
.ma-side .prose .eyebrow + *{margin-top:.7em;}
.ma-side .prose p strong{color:var(--ink);}
.ma-side .prose li + li{margin-top:.35em;}
.ma-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--ink-soft);}
.ma-meta strong{font-weight:700;color:var(--ink);}
.ma-meta-sep{color:var(--cyan-deep);font-weight:700;}

/* ----- Medien: Featured Image (1200 x 630) ----- */
.ma-featured{aspect-ratio:1200/630;}
@supports not (aspect-ratio:16/9){.ma-featured{padding-bottom:52.5%;}}

/* ----- Antwort-Kachel und Kapitel-Kachel (Video-Seiten) ----- */
.ma-answer .prose{max-width:60ch;}
.ma-answer .prose .eyebrow{margin-bottom:0;}
.ma-answer .prose .eyebrow + *{margin-top:.7em;}
.ma-kapitel .eyebrow{margin-bottom:4px;}
.ma-kapitel-list{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:32px;}
.ma-kapitel-list li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line-dark);font-size:15px;line-height:1.45;}
.ma-ts{font-size:13px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums;}
.ma-kapitel-list a{color:var(--white);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line-dark);transition:color .2s, box-shadow .2s;}
.ma-kapitel-list a:hover{color:var(--cyan);box-shadow:inset 0 -2px 0 var(--cyan);}
@media (min-width:961px){.ma-kapitel.span-12 .ma-kapitel-list{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ----- Lese-Kachel ----- */
.ma-article{grid-column:span 8;}
.ma-prose{max-width:68ch;}
.ma-prose :is(h2,h3,h4)[id]{scroll-margin-top:96px;}
.ma-prose small{font-size:var(--fs-small);color:var(--ink-soft);}

/* Seitenleiste: Autor, Quellen (sticky) */
.ma-aside{grid-column:span 4;display:flex;flex-direction:column;gap:var(--gap);align-self:start;position:sticky;top:96px;}
.ma-autor{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.ma-autor-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;border:2px solid var(--warm);box-shadow:0 0 0 2px var(--cyan);margin-bottom:6px;}
.ma-autor-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .9s var(--ease);}
.ma-autor:hover .ma-autor-photo img{transform:scale(1.05);}
.ma-autor .h-tile{font-size:var(--fs-sub);}
.ma-autor .lead{font-size:var(--fs-body);}
.ma-quellen .prose{max-width:none;}

/* ----- Unter-Kacheln im Fliesstext: dunkle CTA, Router, Buch-Promo ----- */
.ma-prose > .tile{margin-block:2em;}
.ma-prose > .tile:last-child{margin-bottom:0;}
.ma-cta,.ma-router,.ma-promo{padding:clamp(22px,2.6vw,32px);}
.ma-cta .eyebrow,.ma-router .eyebrow{margin-bottom:12px;}
.ma-cta h3,.ma-router h3{font-size:var(--fs-tile);font-weight:600;line-height:1.15;letter-spacing:-0.02em;color:var(--white);margin:0 0 12px;}
.ma-cta p,.ma-router .lead{color:rgba(255,255,255,.82);font-size:var(--fs-body);line-height:1.6;margin:0 0 18px;}
.ma-cta p strong{color:var(--white);}
.ma-cta .cta-row{margin-top:2px;}
.ma-cta .cta-row + .small{margin-top:14px;}
.ma-cta .small,.ma-cta p.small{margin:14px 0 0;color:rgba(255,255,255,.72);font-size:var(--fs-small);}
/* Buttons im .prose: Link-Farben und Unterstrich neutralisieren */
.ma-prose .btn{text-decoration:none;font-size:15px;}
.ma-prose .btn-primary{color:var(--dark);}
.ma-prose .btn-primary:hover{color:var(--white);}
.ma-prose .btn-secondary{color:var(--ink);}
.ma-prose .btn-secondary:hover{color:var(--ink);}
.ma-prose .textlink{color:var(--ink);text-decoration:none;}
.ma-prose .textlink:hover{color:var(--cyan-deep);}

/* Router: drei Karten untereinander in der dunklen Kachel (die Lese-Spalte ist
   zu schmal fuer drei Spalten). Jede Karte: Stufe oben, Titel links, Aktion rechts. */
.ma-router-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.ma-router .ma-router-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"stage stage" "title action";column-gap:20px;row-gap:6px;align-items:end;padding:16px 18px;background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--r-sm);color:var(--white);text-decoration:none;font-weight:400;transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);}
.ma-router .ma-router-card:hover{border-color:var(--cyan-ring);transform:translateY(-2px);box-shadow:0 0 0 4px rgba(0,160,222,.14);color:var(--white);}
.ma-router-stage{grid-area:stage;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);}
.ma-router-card strong{grid-area:title;font-size:16px;line-height:1.35;color:var(--white);}
.ma-router-action{grid-area:action;white-space:nowrap;font-size:14px;font-weight:700;color:rgba(255,255,255,.85);box-shadow:inset 0 -2px 0 var(--cyan);width:fit-content;}

/* Buch-Promo: Cover links, Text rechts */
.ma-promo{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:start;}
.ma-promo-cover a{display:block;}
.ma-promo-cover img{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);box-shadow:var(--shadow);}
.ma-promo-body{display:flex;flex-direction:column;gap:10px;}
.ma-promo-body .h-tile{font-size:var(--fs-sub);margin:0;}
.ma-promo-body p{margin:0;font-size:var(--fs-body);line-height:1.55;color:var(--ink-soft);}
.ma-promo-body .cta-row{margin-top:6px;align-items:center;}
.ma-promo-body .small{margin-top:4px;}

/* ----- Helle Inhaltsboxen im Fliesstext (Off-White, innerer Radius) ----- */
.ma-prose :is(.ma-example,.ma-checklist,.ma-note,.ma-check,.ma-overview,.ma-vergleich,.ma-karten){background:var(--off);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;font-size:var(--fs-body);}
.ma-prose :is(.ma-example,.ma-checklist,.ma-note,.ma-check,.ma-overview) > * + *{margin-top:.8em;}
.ma-prose .ma-note{box-shadow:inset 4px 0 0 var(--cyan);}
.ma-prose .ma-example p,.ma-prose .ma-note p,.ma-prose .ma-checklist p{margin:0;}
.ma-prose .ma-template-line{display:block;padding-left:14px;border-left:3px solid var(--cyan);}
.ma-prose .ma-template-line + .ma-template-line{margin-top:.6em;}
.ma-prose .ma-step-result{background:var(--off);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px;font-size:var(--fs-body);}
.ma-prose .ma-check h3{margin:0 0 .5em;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--taupe);}
.ma-prose .ma-check p:last-child{font-style:italic;color:var(--ink-soft);}
.ma-prose .ma-overview p{font-weight:700;margin:0 0 .6em;}
.ma-prose .ma-overview ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;margin:0;}
.ma-prose .ma-overview li + li{margin-top:0;}
.ma-prose .ma-short-answers > * + *{margin-top:1.1em;}
.ma-prose .ma-short-answers h3 + p{margin-top:.6em;}
.ma-prose .ma-sources{font-size:var(--fs-small);}

/* Vergleichs- und Kartenraster (aus Inline-Styles uebersetzt) */
.ma-prose .ma-vergleich h3,.ma-prose .ma-karten h3{margin:0 0 16px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--taupe);line-height:1.5;}
.ma-prose .ma-vergleich > div{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.ma-prose .ma-karten > div{display:flex;flex-direction:column;gap:10px;}
.ma-prose .ma-vergleich > div > div,.ma-prose .ma-karten > div > div{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;}
/* Vergleichskarten: Strich oben wie .mark (Taupe, Akzent-Karte Cyan) */
.ma-prose .ma-vergleich > div > div::before{content:"";display:block;width:44px;height:6px;border-radius:var(--r-pill);background:var(--taupe);margin-bottom:12px;}
.ma-prose .ma-vergleich > div > div.is-akzent{border-color:var(--cyan-ring);}
.ma-prose .ma-vergleich > div > div.is-akzent::before{background:var(--cyan);}
.ma-prose .ma-karten > div > div{box-shadow:inset 4px 0 0 var(--taupe);}
.ma-prose .ma-karten > div > div.is-akzent{box-shadow:inset 4px 0 0 var(--cyan);}
.ma-prose .ma-vergleich h4{margin:0 0 12px;font-size:17px;font-weight:700;line-height:1.3;color:var(--taupe);}
.ma-prose .ma-vergleich .is-akzent h4{color:var(--cyan-text);}
.ma-prose .ma-vergleich p{margin:0;font-size:15px;line-height:1.5;}
.ma-prose .ma-vergleich p + p{margin-top:10px;}
.ma-prose .ma-vergleich p strong{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);margin-bottom:2px;}
.ma-prose .ma-vergleich .is-akzent p strong{color:var(--cyan-text);}
.ma-prose .ma-karten > div > div > div:first-child{font-weight:700;font-size:16px;color:var(--taupe);}
.ma-prose .ma-karten > div > div.is-akzent > div:first-child{color:var(--cyan-text);}
.ma-prose .ma-karten p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink-soft);}

/* Kandidaten-Karten (Werkstatt) */
.ma-prose .ma-kandidat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px;box-shadow:inset 4px 0 0 var(--line);}
.ma-prose .ma-kandidat + .ma-kandidat{margin-top:12px;}
.ma-prose .ma-kandidat strong{display:block;font-size:17px;}
.ma-prose .ma-kandidat p{margin:8px 0 0;font-size:var(--fs-body);color:var(--ink-soft);}
/* ausgeschiedene Kandidaten: gedaempft ueber Farbe (AA bleibt), nicht ueber Deckkraft */
.ma-prose .ma-kandidat.is-raus{background:var(--off);box-shadow:inset 4px 0 0 var(--line);}
.ma-prose .ma-kandidat.is-raus strong{color:var(--ink-soft);}
.ma-prose .ma-kandidat.is-sieger{border-color:var(--cyan-ring);box-shadow:inset 4px 0 0 var(--cyan);}

/* Tabellen: erste Spalte fett, Scrollbereich als Rahmen erkennbar */
.ma-prose .table-wrap{border:1px solid var(--line);border-radius:var(--r-sm);}
.ma-prose .table-wrap table{min-width:560px;}
.ma-prose .table-wrap th,.ma-prose .table-wrap td{padding:12px 14px;}
.ma-prose .table-wrap tr:last-child td{border-bottom:0;}
.ma-prose td:first-child{font-weight:700;}
/* Tabellen mit data-label je Zelle: auf dem Handy gestapelt statt gescrollt */
@media (max-width:600px){
  .ma-prose .table-wrap:has(.ma-table--stack){border:0;overflow:visible;}
  .ma-prose .table-wrap .ma-table--stack{min-width:0;}
  .ma-prose .ma-table--stack thead{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .ma-prose .ma-table--stack,.ma-prose .ma-table--stack tbody,.ma-prose .ma-table--stack tr,.ma-prose .ma-table--stack td{display:block;}
  .ma-prose .ma-table--stack tr{background:var(--off);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 16px;}
  .ma-prose .ma-table--stack tr + tr{margin-top:10px;}
  .ma-prose .ma-table--stack td{padding:10px 0;border-bottom:1px solid var(--line);font-weight:400;}
  .ma-prose .ma-table--stack td:first-child{font-weight:700;}
  .ma-prose .ma-table--stack td:last-child{border-bottom:0;}
  .ma-prose .ma-table--stack td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);}
}

/* FAQ mit details/summary */
.ma-prose .ma-faq{margin-top:2.4em;}
.ma-prose .ma-faq h2{margin:0 0 .6em;}
.ma-prose .ma-faq details{border-top:1px solid var(--line);padding:14px 0;}
.ma-prose .ma-faq details:last-child{border-bottom:1px solid var(--line);}
.ma-prose .ma-faq summary{font-weight:700;cursor:pointer;color:var(--ink);list-style:none;position:relative;padding-right:32px;}
.ma-prose .ma-faq summary::-webkit-details-marker{display:none;}
.ma-prose .ma-faq summary::after{content:"";position:absolute;right:8px;top:.55em;width:10px;height:10px;border-right:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);transform:rotate(45deg);transition:transform .3s var(--ease);}
.ma-prose .ma-faq details[open] summary::after{transform:rotate(225deg);top:.8em;}
.ma-prose .ma-faq details p{margin:12px 0 0;}

/* ----- Link-Kacheln (Weiterlesen) ----- */
.ma-card .eyebrow{margin-bottom:10px;}
.ma-card strong{margin-bottom:8px;}
.tile-link .ma-card-cta{display:inline-block;width:fit-content;margin-top:12px;font-size:14px;font-weight:700;color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}

/* ----- Ausgang ----- */
.ma-ausgang p a{color:var(--dark);font-weight:600;text-decoration:underline;text-decoration-color:rgba(10,10,10,.5);text-underline-offset:.18em;}
.ma-ausgang .ma-ausgang-note{margin:18px auto 0;max-width:62ch;}

/* ----- Responsiv ----- */
@media (max-width:960px){
  .ma-hero,.ma-side,.ma-article,.ma-aside{grid-column:span 12;}
  .ma-aside{position:static;}
  .ma-side{gap:18px;}
  .ma-autor{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:24px;row-gap:8px;align-items:center;}
  .ma-autor-photo{grid-row:span 3;margin-bottom:0;}
  .ma-router-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .ma-autor{display:flex;align-items:flex-start;}
  .ma-autor-photo{margin-bottom:6px;}
  .ma-router .ma-router-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "title" "action";}
  .ma-router-action{white-space:normal;margin-top:4px;}
  .ma-promo{grid-template-columns:1fr;}
  .ma-promo-cover{max-width:140px;}
  .ma-prose .ma-overview ol{grid-template-columns:1fr;}
  .ma-prose .ma-vergleich > div{grid-template-columns:1fr;}
}

/* ===== BLOCK PARTIAL: magazin-hub.css ===== */
/* =====================================================================
   MAGAZIN-HUB (Praefix mh-): Magazin-Uebersicht, zwoelf Cluster-Seiten,
   Alle-Artikel-Seite, zwei Video-Serien-Seiten. Nur Tokens aus bento.css.
   Bausteine: Hero 8 + Seitenkachel 4, Gruppen-Kachel im Raster (wie die
   Leistungen-Seite), Artikel-Kacheln als weisse Link-Kacheln mit Bildflaeche
   oben und Text auf Weiss (die Featured-Bilder tragen eigene Typo, darum
   liegt kein Text ueber dem Bild), Phasen-Kacheln als weisse Link-Kacheln
   mit Cyan-Nummer, Download-Kacheln mit Cover, Video-Serien als zwei
   Kachel-Spalten, Final-CTA dunkel + Cyan.
   ===================================================================== */

/* ----- Brotkrumen ueber dem Hero ----- */
.mh-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:6px 8px 14px;
  font-size:var(--fs-small);line-height:1.4;color:var(--ink-soft);
}
.mh-crumbs a{
  display:inline-flex;align-items:center;min-height:32px;
  color:var(--ink);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--cyan);
  transition:color .2s;
}
.mh-crumbs a:hover{color:var(--cyan-deep);}
.mh-crumbs .sep{color:var(--ink-soft);}

/* ----- Hero 8 + Seitenkachel 4 (Differenzierung, Stand, YouTube-Ausgang) ----- */
.mh-hero-8{grid-column:span 8;}
.mh-hero-side{
  grid-column:span 4;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
}
.mh-hero-side .mark{margin-bottom:10px;}
.mh-hero-side .h-tile{max-width:22ch;}
.mh-hero-side .lead{font-size:var(--fs-body);}
.mh-hero-side .prose p{font-size:15px;line-height:1.6;color:var(--ink-soft);}
.mh-hero-side .prose strong{color:var(--ink);}
/* Serien-Seiten: der YouTube-Link ist der Cyan-Ausgang der Seite (kein Final-CTA dort) */
.mh-hero-yt{align-items:stretch;justify-content:center;min-height:220px;}
.mh-hero-yt .btn{width:100%;}
.hero-page .eyebrow span{color:var(--ink-soft);}

/* ----- Gruppen-Kachel: Ueberschrift im Raster (wie Leistungen-Seite) ----- */
.mh-gruppe{
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  min-height:240px;
}
.mh-gruppe .mark{margin-bottom:auto;}
.mh-gruppe .eyebrow{margin-top:clamp(28px,4vw,56px);}
.mh-gruppe .h-section{max-width:16ch;}
.mh-gruppe .lead{max-width:44ch;}

/* Section-Head mit Lead-Absatz unter der Ueberschrift */
.mh-head-lead{margin-top:10px;max-width:60ch;}

/* ----- Artikel-Kachel: Bildflaeche oben, Text auf Weiss ----- */
.tile.mh-card{
  display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
}
.mh-card-media{
  flex:0 0 auto;
  aspect-ratio:1200/630;width:100%;
  background-color:var(--dark);
  background-size:cover;background-position:center;
  transition:transform .9s var(--ease);
}
.mh-card:hover .mh-card-media{transform:scale(1.03);}
.mh-card-body{
  position:relative;z-index:1;
  flex:1 1 auto;
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2.4vw,28px) var(--pad) var(--pad);
  background:var(--white);
}
.mh-card-kicker{
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--taupe);line-height:1.4;
}
.mh-card-title{
  font-size:var(--fs-sub);font-weight:700;line-height:1.2;
  letter-spacing:-0.01em;color:var(--ink);text-wrap:balance;
}
.mh-card-text{font-size:15px;line-height:1.55;color:var(--ink-soft);}
.mh-card-meta{font-size:13px;line-height:1.4;color:var(--ink-soft);letter-spacing:.04em;margin-top:auto;padding-top:6px;}
.mh-card-cta{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:15px;font-weight:700;line-height:1.4;color:var(--cyan-text);
  transition:color .2s, border-color .3s var(--ease), transform .3s var(--ease);
}
.mh-card:hover .mh-card-cta,.mh-card:focus-visible .mh-card-cta{color:var(--dark);border-top-color:var(--cyan);transform:translateX(4px);}
.mh-card-meta + .mh-card-cta{margin-top:0;}
/* Grosse Varianten: Pillar (span 8) gestapelt mit grosser Typo; Hero (neuester Artikel, span 12)
   und Wide (einzelne Rest-Kachel, span 12) legen Bild links und Text rechts. Die Bildflaeche
   haelt ihr Seitenverhaeltnis ueber padding-bottom (52,5 % der Spaltenbreite = 1200x630),
   damit die Featured-Bilder mit eigener Typo nicht beschnitten werden. */
.mh-card--pillar .mh-card-body{padding:var(--pad);gap:10px;}
.mh-card--pillar .mh-card-title,.mh-card--hero .mh-card-title{font-size:var(--fs-tile);}
.mh-card--pillar .mh-card-text,.mh-card--hero .mh-card-text{font-size:var(--fs-body);}
.tile.mh-card--hero,.tile.mh-card--wide{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.mh-card--hero .mh-card-media,.mh-card--wide .mh-card-media{aspect-ratio:auto;height:auto;padding-bottom:52.5%;}
.mh-card--hero .mh-card-body,.mh-card--wide .mh-card-body{justify-content:center;padding:var(--pad);}
.mh-card--hero .mh-card-meta,.mh-card--wide .mh-card-meta{margin-top:0;}

/* ----- Phasen-Kacheln (zwoelf Cluster): weisse Link-Kacheln mit Cyan-Nummer, ohne Bild ----- */
.tile.mh-phase{padding:var(--pad);}
.mh-phase .mh-card-body{padding:0;min-height:100%;}
.mh-phase .mh-card-num{
  font-size:var(--fs-sub);font-weight:700;letter-spacing:.06em;color:var(--cyan-deep);line-height:1;
  margin-bottom:6px;
}
/* Alle-Kachel: dunkel, quer (die eine dunkle Kachel der Section) */
.tile.mh-phase-alle{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,3vw,40px);align-items:center;
  text-decoration:none;
}
.mh-phase-alle .mh-card-num{font-size:var(--fs-section);font-weight:700;letter-spacing:-0.02em;color:var(--cyan);line-height:1;}
.mh-phase-alle .mh-card-title{font-size:var(--fs-sub);font-weight:700;line-height:1.2;color:var(--white);margin-bottom:4px;}
.mh-phase-alle .mh-card-text{font-size:15px;color:rgba(255,255,255,.78);max-width:60ch;}
.mh-phase-alle .mh-card-cta{margin:0;padding:0;border:0;white-space:nowrap;color:var(--cyan);}
.mh-phase-alle:hover .mh-card-cta{color:var(--white);transform:translateX(4px);}

/* ----- Download-Kacheln: Cover links, Text rechts ----- */
.tile.mh-dl{
  display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;align-items:center;
  text-decoration:none;color:var(--ink);
}
.mh-dl-cover{
  aspect-ratio:210/297;width:100%;
  border-radius:var(--r-sm);overflow:hidden;
  background:var(--dark);box-shadow:var(--shadow);
}
.mh-dl-cover img{width:100%;height:100%;object-fit:cover;}
.mh-dl-cover-draw{
  width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px 10px;
  background:radial-gradient(70% 60% at 100% 100%, rgba(0,160,222,.32), rgba(0,160,222,0) 70%), var(--dark);
  color:var(--white);
}
.mh-dl-cover-draw .t-badge{
  align-self:flex-start;margin-bottom:auto;
  font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 6px;border-radius:var(--r-pill);
  background:var(--white);color:var(--dark);
}
.mh-dl-cover-draw .t-title{font-size:12px;font-weight:700;line-height:1.2;color:var(--white);}
.mh-dl-cover-draw .t-author{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-top:6px;}
.mh-dl-info{display:flex;flex-direction:column;gap:8px;}
.mh-dl-info .eyebrow{margin-bottom:2px;}
.mh-dl-info h3{font-size:var(--fs-sub);font-weight:700;line-height:1.2;letter-spacing:-0.01em;}
.mh-dl-info p{font-size:15px;line-height:1.55;color:var(--ink-soft);}
/* CTA-Zeile in Link-Kacheln (Download, Cross-Sell): wie die Leistungen-Kacheln */
.mh-more{
  display:block;width:100%;margin-top:6px;padding-top:14px;border-top:1px solid var(--line);
  font-weight:700;font-size:15px;line-height:1.4;color:var(--cyan-text);
  transition:color .2s, border-color .3s var(--ease), transform .3s var(--ease);
}
.tile--hover:hover .mh-more,.tile--hover:focus-visible .mh-more{color:var(--dark);border-top-color:var(--cyan);transform:translateX(4px);}

/* ----- Video-Serien: zwei Spalten aus Kacheln ----- */
.mh-serie{grid-column:span 6;display:grid;gap:var(--gap);align-content:start;}
.mh-serie-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 20px;
  padding:clamp(20px,2.4vw,28px) var(--pad);
}
.mh-serie-head .mark{grid-column:1 / -1;margin-bottom:10px;}
.mh-serie--imb .mh-serie-head .mark{background:var(--taupe);}
.mh-serie-head .textlink{min-height:0;padding-bottom:2px;}
.mh-badge{
  display:inline-flex;align-items:center;gap:4px;align-self:flex-start;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--off);color:var(--ink);
  margin-bottom:4px;
}
.mh-badge span{color:var(--ink-soft);}
.mh-ep--imb .mh-badge{background:var(--taupe);border-color:var(--taupe);color:var(--white);}
.mh-ep--imb .mh-badge span{color:rgba(255,255,255,.8);}

/* ----- Cross-Sell: zwei weisse Link-Kacheln ----- */
.tile.mh-xsell{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);}
.mh-xsell .eyebrow{margin-bottom:4px;}
.mh-xsell p{color:var(--ink-soft);}
.mh-xsell .mh-more{margin-top:auto;}

/* ----- Final-CTA: dunkle Kachel 8 + Cyan-Kachel 4 (wie Leistungen-Seite) ----- */
.mh-final{
  grid-column:span 8;
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:var(--pad-lg);
  background:radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%), var(--dark);
}
.mh-final h2{color:var(--white);}
.mh-final .lead{max-width:56ch;}
.mh-final-cta{
  grid-column:span 4;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;
}
.mh-final-cta .btn{width:100%;}

/* ----- Responsive ----- */
@media (max-width:960px){
  .mh-hero-8,.mh-hero-side,.mh-serie,.mh-final,.mh-final-cta{grid-column:span 12;}
  .mh-hero-yt{min-height:0;}
  /* Gruppen-Kachel als Band ueber volle Breite: Strich, Eyebrow und Titel in einer Zeile (wie Leistungen) */
  .mh-gruppe{grid-column:span 12;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:12px 20px;min-height:0;}
  /* Download-Kacheln (Cover + Text) brauchen unter 960px die volle Breite */
  .tile.mh-dl{grid-column:span 12;}
  .mh-gruppe .mark{margin:0;flex:0 0 44px;}
  .mh-gruppe .eyebrow{margin-top:0;flex:1 1 100%;order:-1;}
  .mh-gruppe .h-section{max-width:none;}
  .tile.mh-card--hero,.tile.mh-card--wide{grid-template-columns:1fr;}
  .tile.mh-phase-alle{grid-template-columns:auto minmax(0,1fr);}
  .mh-phase-alle .mh-card-cta{grid-column:2;white-space:normal;}
  .mh-final-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 28px;}
  .mh-final-cta .btn{width:auto;}
}
@media (max-width:600px){
  .mh-gruppe .mark{flex-basis:32px;width:32px;}
  .tile.mh-dl{grid-template-columns:96px minmax(0,1fr);gap:16px;}
  .tile.mh-phase-alle{grid-template-columns:1fr;gap:10px;}
  .mh-phase-alle .mh-card-cta{grid-column:1;}
  .mh-final-cta{flex-direction:column;align-items:stretch;}
  .mh-final-cta .btn{width:100%;}
  .mh-final-cta .textlink-ink{align-self:flex-start;}
}

/* ===== BLOCK PARTIAL: persoenlich.css ===== */
/* =====================================================================
   PERSOENLICH: die drei Seiten der persoenlichen Wege
   (/persoenlich/, /persoenlich/1zu1/, /persoenlich/autoren-lounge/)
   Erzeugt von convert_persoenlich.py. Aufbau pro Seite:
     1. Hero als Unterseiten-Kachel (hero-page) mit Brotkrumen
     2. Angebot als dunkle Feature-Kachel, Ablauf/Saeulen als Unter-Kacheln (.inset)
     3. Kundenstimmen: drei .stimme-Kacheln in <div class="testimonials-grid">
     4. Ausgang als Cyan-Kachel
   Nur Tokens, Klassen-Praefix "pers-". Keine Basis-Klassen ueberschrieben.
   ===================================================================== */

/* ----- Brotkrumen im Hero ----- */
.pers-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:18px;}
.pers-crumbs a{color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line);transition:color .2s, box-shadow .2s;}
.pers-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}
.pers-crumbs .sep{color:var(--taupe);}
.pers-crumbs [aria-current]{color:var(--ink);font-weight:600;}

/* ----- Hero ----- */
.pers-hero h1{max-width:22ch;}
.pers-hero--long h1{font-size:var(--fs-feature);max-width:28ch;}
.pers-hero .pers-hero-sub{font-size:var(--fs-sub);font-weight:600;line-height:1.4;color:var(--ink);margin-bottom:14px;max-width:44ch;}
.pers-hero .cta-row{align-items:center;gap:12px 20px;}
.pers-hero-note{font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);}
.pers-hero-note strong{color:var(--ink);}

/* ----- Section-Head mit Unterzeile ----- */
.pers-head-sub{margin-top:12px;max-width:62ch;}

/* ----- Link-Kacheln (Einordnen): Chip, Titel, Text, Fusszeile ----- */
/* a.pers-card statt .pers-card: a.tile{display:block} aus der Basis hat sonst Vorrang */
a.pers-card{display:flex;flex-direction:column;gap:12px;min-height:100%;}
.pers-card .chip{align-self:flex-start;}
.pers-card-title{font-size:var(--fs-sub);font-weight:700;line-height:1.2;letter-spacing:-0.015em;margin-top:4px;}
.pers-card-text{line-height:1.55;color:var(--ink-soft);}
.tile--dark .pers-card-text{color:rgba(255,255,255,.82);}
.pers-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px 12px;padding-top:14px;border-top:1px solid var(--line);}
.tile--dark .pers-card-foot{border-top-color:var(--line-dark);}
.pers-card-price{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--taupe);}
.tile--dark .pers-card-price{color:var(--cyan);}
.pers-card--fokus .chip{background:var(--cyan);color:var(--dark);border-color:var(--cyan);}

/* ----- Zweiteiler: Ueberschrift links, Lead rechts (Differenzierung, Brand-Anker) ----- */
.pers-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:center;}
.pers-split .mark{margin-bottom:18px;}
.pers-split .eyebrow{margin-bottom:12px;}
.pers-split h2{max-width:16ch;}
.pers-split .lead a{color:var(--cyan-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;}
.pers-split .lead a:hover{color:var(--ink);}

/* ----- Feature-Kachel: Copy links, Liste plus Eckdaten rechts (1:1 dunkel, Lounge warm) ----- */
.pers-feature{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,56px);
  padding:var(--pad-xl);
}
.pers-feature.tile--dark{background:radial-gradient(45% 55% at 100% 100%, var(--cyan-soft), transparent 70%), var(--dark);}
.pers-feature .eyebrow{margin-bottom:16px;}
.pers-feature h2{font-size:var(--fs-feature);margin-bottom:18px;}
.pers-feature-copy{display:flex;flex-direction:column;}
.pers-feature-copy .cta-row{margin-top:auto;padding-top:28px;}
.pers-feature-sub{font-weight:600;color:var(--ink);}
.tile--dark .pers-feature-sub{color:var(--white);}
.pers-feature-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px;}
.pers-feature-list li{position:relative;padding-left:26px;line-height:1.5;color:var(--ink);}
.pers-feature-list li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;border-radius:3px;background:var(--cyan);}
.tile--dark .pers-feature-list li{color:rgba(255,255,255,.86);}
.pers-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.pers-meta-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:var(--fs-small);line-height:1.45;color:var(--ink-soft);}
.pers-meta-item strong{display:block;color:var(--ink);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;margin-bottom:4px;}
.tile--dark .pers-meta-item{background:var(--dark-2);border-color:var(--line-dark);color:rgba(255,255,255,.72);}
.tile--dark .pers-meta-item strong{color:var(--cyan);}

/* ----- Vergleich als Tabelle in einer weissen Kachel ----- */
.pers-vergleich{overflow:hidden;}
.pers-table{width:100%;border-collapse:collapse;line-height:1.5;}
.pers-table th,.pers-table td{padding:16px 22px;text-align:left;vertical-align:top;border-top:1px solid var(--line);}
.pers-table thead th{background:var(--dark);color:var(--white);font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;border-top:0;}
.pers-table tbody th{font-weight:700;color:var(--ink);background:var(--off);width:28%;}
.pers-table td{color:var(--ink-soft);}
.pers-table td strong{color:var(--cyan-text);}

/* ----- Kundenstimmen: der Container behaelt seine Klasse (build_testimonials.py), das Raster kommt von hier ----- */
.pers-stimmen .testimonials-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(12,minmax(0,1fr));}

/* ----- Andere Wege: zwei Link-Kacheln ----- */
a.pers-weg{display:flex;flex-direction:column;gap:10px;min-height:100%;}
.pers-weg-title{font-size:var(--fs-tile);font-weight:600;line-height:1.15;letter-spacing:-0.02em;}
.pers-weg .lead{max-width:56ch;}
.pers-weg .textlink{margin-top:auto;align-self:flex-start;padding-top:8px;}

/* ----- Ausgang: Hinweiszeile neben dem Ink-Button ----- */
.pers-ausgang-note{font-size:var(--fs-small);font-weight:600;color:rgba(10,10,10,.86);}

/* ----- Sechs Fragen: Kacheln mit Cyan-Strich ----- */
.pers-frage{display:flex;flex-direction:column;gap:14px;}
.pers-frage p{line-height:1.6;color:var(--ink-soft);}
.pers-frage p strong{color:var(--ink);}

/* ----- Drei Saeulen: dunkle Kachel, drei Unter-Kacheln ----- */
.pers-saeulen-tile .eyebrow{margin-bottom:14px;}
.pers-saeulen-tile h2{margin-bottom:26px;}
.pers-saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.pers-saeule{display:flex;flex-direction:column;gap:10px;padding:22px;}
.pers-saeule h3{color:var(--white);}
.pers-saeule p{line-height:1.6;color:rgba(255,255,255,.82);}

/* ----- Versprechen: zentrierte Warm-Kachel ----- */
.pers-versprechen{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--pad-xl);}
.pers-versprechen .eyebrow{margin-bottom:14px;}
.pers-versprechen h2{font-size:var(--fs-feature);margin-bottom:16px;max-width:20ch;}
.pers-versprechen .lead{max-width:62ch;font-weight:600;color:var(--ink);}

/* ----- Filter-Gate: dunkle Kachel mit Haupt-CTA ----- */
.pers-gate{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:var(--pad-xl);
  background:radial-gradient(45% 55% at 100% 100%, var(--cyan-soft), transparent 70%), var(--dark);
}
.pers-gate .eyebrow{margin-bottom:14px;}
.pers-gate h2{font-size:var(--fs-feature);margin-bottom:16px;max-width:20ch;}
.pers-gate .lead{max-width:62ch;margin-bottom:26px;}
.pers-gate .small{margin-top:14px;}

/* ----- Lounge: zwei Ebenen ----- */
.pers-ebene{display:flex;flex-direction:column;gap:14px;}
.pers-ebene .eyebrow{margin-bottom:0;}
.pers-ebene .cta-row{margin-top:auto;padding-top:14px;}
.pers-ebene-claim{font-weight:700;color:var(--ink);}
.tile--dark .pers-ebene-claim{color:var(--white);}
.pers-ebene-price{color:rgba(255,255,255,.82);}
.pers-ebene-price strong{color:var(--white);font-size:var(--fs-sub);font-weight:700;}

/* ----- Lounge: kostenloser Bereich (Intro-Kachel drei Zeilen hoch + sechs Kacheln) ----- */
.pers-free-intro{display:flex;flex-direction:column;justify-content:center;gap:14px;}
.pers-free-intro .cta-row{margin-top:10px;}
.pers-free-item{display:flex;flex-direction:column;justify-content:center;gap:14px;}
.pers-free-item p{font-size:var(--fs-lead);line-height:1.5;color:var(--ink);}

/* ----- Lounge: Mitgliederbereich (dunkle Kachel, vier Unter-Kacheln) ----- */
.pers-member-tile .eyebrow{margin-bottom:14px;}
.pers-member{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px;}
.pers-member-card{display:flex;flex-direction:column;gap:8px;padding:22px;}
.pers-member-card h3{font-size:var(--fs-sub);font-weight:700;line-height:1.25;color:var(--white);}
.pers-member-card p{line-height:1.6;color:rgba(255,255,255,.82);}
.pers-member-foot{margin-top:26px;font-size:var(--fs-lead);line-height:1.6;color:rgba(255,255,255,.82);}
.pers-member-foot strong{color:var(--white);}

/* ----- Lounge: Mitglied werden (Preis-Kachel 7 + Ablauf-Kachel 5) ----- */
.pers-preis{display:flex;flex-direction:column;gap:12px;}
.pers-preis h2{font-size:var(--fs-feature);}
.pers-preis-num{font-size:var(--fs-display);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--ink);margin-top:12px;}
.pers-preis-per{font-size:var(--fs-lead);font-weight:600;color:var(--ink-soft);}
.pers-preis-note{color:var(--ink-soft);margin-top:8px;}
.pers-preis-note strong{color:var(--ink);}
.pers-preis .cta-row{margin-top:auto;padding-top:16px;align-items:center;gap:12px 20px;}
.pers-preis-soon{font-size:var(--fs-small);font-weight:600;color:var(--ink-soft);}
.pers-ramp{display:flex;flex-direction:column;gap:12px;}
.pers-ramp-step{
  flex:1;display:flex;align-items:center;gap:18px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:18px 22px;
}
.pers-ramp-step .eyebrow{flex:0 0 auto;min-width:7ch;}
.pers-ramp-name{font-size:var(--fs-tile);font-weight:600;line-height:1.1;letter-spacing:-0.02em;}

/* ----- Lounge: Fuer wen (vier Kacheln) ----- */
.pers-profil{display:flex;flex-direction:column;gap:10px;}
.pers-profil h3{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.015em;}
.pers-profil p{line-height:1.55;color:var(--ink-soft);}

/* ----- Responsive ----- */
@media (max-width:960px){
  .pers-feature,.pers-split{grid-template-columns:1fr;}
  .pers-split h2{max-width:none;}
  .pers-saeulen,.pers-member{grid-template-columns:1fr;}
  .pers-free-intro{grid-row:auto;grid-column:span 12;}
}
@media (max-width:700px){
  .pers-table thead,.pers-table tbody,.pers-table tr,.pers-table th,.pers-table td{display:block;}
  .pers-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .pers-table th:first-child{grid-column:1 / -1;width:auto;}
  .pers-table th,.pers-table td{padding:12px 16px;}
  .pers-table tbody th{padding-bottom:6px;}
  .pers-table td{border-top:0;}
  .pers-table td + td,.pers-table thead th + th + th{border-left:1px solid var(--line);}
  .pers-table thead th + th + th{border-left-color:var(--line-dark);}
}
@media (max-width:600px){
  a.pers-card,a.pers-weg{min-height:0;}
  .pers-meta{grid-template-columns:1fr;}
  .pers-hero .cta-row{align-items:stretch;}
  .pers-hero .cta-row .btn{padding-inline:14px;}
  .pers-hero-note,.pers-preis-soon,.pers-ausgang-note{text-align:center;}
  .pers-ramp-step{align-items:flex-start;flex-direction:column;gap:6px;}
}

/* ===== BLOCK PARTIAL: ressourcen.css ===== */
/* =====================================================================
   BLOCK PARTIAL: ressourcen (Shop-Uebersicht + Tripwire-Produktseiten)
   Praefix res-. Nur Tokens aus bento.css, keine neuen Farben, Radien
   oder Schriften. Erzeugt durch convert_ressourcen.py.
   ===================================================================== */

/* ----- Brotkrumen ueber dem Hero ----- */
.res-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:var(--space-head);padding-inline:8px;}
.res-crumbs a{color:var(--ink-soft);text-decoration:none;box-shadow:inset 0 -1px 0 var(--line);transition:color .2s,box-shadow .2s;}
.res-crumbs a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);}
.res-crumbs .sep{color:var(--taupe);}
.res-crumbs [aria-current]{color:var(--ink);font-weight:600;}

/* ----- Hero: Copy-Kachel (8) plus dunkle Preis-Kachel (4) ----- */
.res-hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad-xl);
  background:radial-gradient(55% 60% at 100% 0%, var(--cyan-soft), transparent 70%), var(--off);
}
.res-hero-copy .eyebrow{margin-bottom:18px;}
.res-hero-copy h1{font-size:var(--fs-feature);line-height:1.06;letter-spacing:-0.03em;margin-bottom:18px;max-width:28ch;}
.res-hero-copy .lead{max-width:60ch;}
.res-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:26px;}
.res-meta-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;font-size:var(--fs-small);line-height:1.45;color:var(--ink-soft);
}
.res-meta-item strong{display:block;color:var(--ink);font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;margin-bottom:4px;}
.res-price{display:flex;flex-direction:column;justify-content:center;gap:10px;}
.res-price .eyebrow{margin-bottom:6px;}
.res-price-num{font-size:var(--fs-display);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--white);}
.res-price-format{margin-bottom:8px;}
.res-price .cta-row{margin-top:10px;}
.res-price .btn{width:100%;}
.res-price-note strong{color:var(--white);}

/* ----- Proof: Zitat-Kachel (8) plus Beleg-Kachel (4) ----- */
.res-quote{display:flex;flex-direction:column;justify-content:center;}
.res-quote blockquote{margin:0;padding-left:22px;border-left:4px solid var(--cyan);}
.res-quote p{font-size:var(--fs-sub);font-weight:600;line-height:1.4;letter-spacing:-0.01em;}
.res-quote cite{display:block;margin-top:12px;font-style:normal;font-size:var(--fs-small);color:var(--ink-soft);}
.res-proof{display:flex;flex-direction:column;justify-content:center;}
.res-proof span{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-top:1px solid var(--line);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.res-proof span:first-child{border-top:0;padding-top:0;}
.res-proof span:last-child{padding-bottom:0;}
.res-proof span::before{content:"";flex:0 0 10px;width:10px;height:10px;border-radius:3px;background:var(--cyan);}

/* ----- Value-Stack: Cover als Medien-Kachel, Lieferumfang, Preis-Anker ----- */
.res-cover{background:var(--dark);aspect-ratio:3/2;}
.res-cover img{width:100%;height:100%;object-fit:contain;}
.res-stack .h-section{margin-bottom:14px;text-wrap:pretty;}
.res-liefer{list-style:none;margin:22px 0 0;padding:0;}
.res-liefer li{position:relative;padding:14px 0 14px 28px;border-top:1px solid var(--line);line-height:1.55;color:var(--ink-soft);}
.res-liefer li strong{color:var(--ink);}
.res-liefer li::before{content:"";position:absolute;left:0;top:1.35em;width:10px;height:10px;border-radius:3px;background:var(--cyan);}
.res-anchor{display:flex;flex-direction:column;justify-content:center;gap:14px;}
.res-anchor p{color:var(--ink-soft);line-height:1.55;}
.res-anchor p strong{color:var(--ink);}
.res-anchor-price{font-size:var(--fs-feature);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--cyan-deep);}

/* ----- Schritte, Module, Prompts, Phasen als Kacheln ----- */
.res-step{display:flex;flex-direction:column;gap:10px;}
.res-step .step-num{margin-bottom:6px;}
.res-step-title{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;}
.res-step-text{font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);}

/* ----- Dunkle Differenzierer (Ampel, Ergebnis-Schichten) ----- */
.res-dark{
  padding:clamp(28px,4.5vw,60px);
  background:radial-gradient(45% 55% at 100% 100%, var(--cyan-soft), transparent 70%), var(--dark);
}
.res-dark > .eyebrow{margin-bottom:14px;}
.res-dark > .h-section{margin-bottom:14px;max-width:26ch;}
.res-dark > .lead{max-width:62ch;margin-bottom:28px;}
.res-dark-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.res-dark-card{display:flex;flex-direction:column;gap:8px;}
.res-dark-title{font-size:var(--fs-sub);font-weight:700;line-height:1.25;color:var(--white);}
.res-ampel-dot{display:block;width:14px;height:14px;border-radius:50%;margin-bottom:4px;}

/* ----- Zwischenruf: dunkle CTA-Kachel ----- */
.res-mid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;}
.res-mid .lead{max-width:56ch;font-size:var(--fs-sub);font-weight:600;color:var(--white);}

/* ----- FAQ ----- */
.res-faq-q{font-size:var(--fs-sub);font-weight:700;line-height:1.3;letter-spacing:-0.01em;margin-bottom:10px;text-wrap:pretty;}
.res-faq-a{color:var(--ink-soft);}
.res-faq-a a{color:var(--cyan-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--cyan-ring);text-decoration-thickness:2px;text-underline-offset:.18em;}
.res-faq-a a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

/* ----- Cross-Sells: klickbare Kacheln ----- */
/* a.tile.res-xsell statt .res-xsell: a.tile{display:block} aus der Basis hat sonst Vorrang, der Textlink saesse nicht unten */
a.tile.res-xsell{display:flex;flex-direction:column;gap:10px;}
.res-xsell-title{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;}
.res-xsell .textlink{margin-top:auto;width:fit-content;padding-top:6px;}
.res-xsell:hover .textlink{color:var(--cyan-deep);box-shadow:inset 0 -2px 0 var(--cyan-deep);}

/* ----- Ausgang: Soft-Link unter den Buttons ----- */
.ausgang .res-soft{margin:24px auto 0;}
.res-soft a{color:var(--dark);font-weight:700;text-decoration:underline;text-decoration-color:var(--cyan-ring);text-decoration-thickness:2px;text-underline-offset:.18em;}
.res-soft a:hover{text-decoration-color:var(--dark);}

/* ----- Shop-Uebersicht ----- */
.res-shop-hero h1{max-width:26ch;}
.res-group-label{display:flex;align-items:center;gap:14px;padding:14px 8px 0;}
.res-group-label .eyebrow{white-space:nowrap;margin:0;}
.res-group-label::after{content:"";flex:1;height:1px;background:var(--line);}
/* a.tile.res-product statt .res-product: a.tile{display:block} aus der Basis hat sonst Vorrang, die Meta-Zeile saesse nicht unten */
a.tile.res-product{display:flex;flex-direction:column;}
.res-product-cover{aspect-ratio:3/2;background:var(--dark);border-bottom:1px solid var(--line);overflow:hidden;}
.res-product-cover img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.res-product:hover .res-product-cover img{transform:scale(1.03);}
.res-product-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:22px 24px 20px;}
.res-product h3{font-size:var(--fs-sub);font-weight:700;line-height:1.25;letter-spacing:-0.01em;}
.res-product p{font-size:var(--fs-small);line-height:1.55;color:var(--ink-soft);}
.res-product-meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.res-product-price{font-size:var(--fs-tile);font-weight:700;letter-spacing:-0.02em;color:var(--ink);}
.res-product-more{font-size:var(--fs-small);font-weight:700;color:var(--ink);box-shadow:inset 0 -2px 0 var(--cyan);transition:color .2s,box-shadow .2s;}
.res-product:hover .res-product-more{color:var(--cyan-deep);box-shadow:inset 0 -2px 0 var(--cyan-deep);}
.res-playbook .eyebrow{margin-bottom:14px;}
.res-playbook .h-section{margin-bottom:14px;max-width:26ch;}
.res-playbook .lead{max-width:62ch;margin-bottom:26px;}
.res-playbook .cta-row{align-items:center;gap:12px 24px;}

/* ----- Responsive ----- */
@media (max-width:960px){
  .res-price{grid-column:span 12;}
  /* Beleg-Kachel: unter 960 volle Breite und als Reihe, sonst steht sie halbbreit verwaist unter dem Zitat */
  .res-proof{grid-column:span 12;flex-direction:row;flex-wrap:wrap;gap:12px 32px;}
  .res-proof span{border-top:0;padding:0;}
  .res-cover{aspect-ratio:auto;}
  .res-cover img{aspect-ratio:3/2;object-fit:cover;}
}
@media (max-width:600px){
  .res-meta{grid-template-columns:1fr;}
  .res-dark-row{grid-template-columns:1fr;}
  .res-mid{justify-content:stretch;}
  .res-mid .cta-row{width:100%;}
}

/* ===== BLOCK PARTIAL: seo-landing.css ===== */
/* =====================================================================
   BLOCK: seo-landing (50 SEO-Landingpages)
   Nur Tokens aus bento.css, Praefix .seo-. Baut auf hero-copy, tile,
   prose, tile-link, stimme, person auf. Keine Basis-Klassen ueberschreiben.
   Reihenfolge auf der Seite: Hero (Text-Kachel + Typo-Bild-Kachel),
   Lese-Kacheln mit .prose, Reason-Kachel-Reihen, Mid-CTA (Cyan),
   Trust (dunkle Kachel + drei Stimmen), FAQ (Kachel-Liste),
   Mesh (Link-Kachel-Raster), Final-CTA (dunkel), Reise-Router
   (Kachel-Gruppe), Bio (Person-Kachel).
   ===================================================================== */

/* ----- Hero: Text-Kachel (hero-copy) plus Typo-Hero-Bild-Kachel ----- */
.seo-hero-copy h1{
  font-size:clamp(34px,4.6vw,60px); /* identisch mit .hero-page h1 (Unterseiten-Hero) */
  line-height:1.02;
  letter-spacing:-0.03em;
  margin-bottom:20px;
}
.seo-hero-copy .eyebrow{max-width:60ch;}
.seo-hero-copy .hero-sub{max-width:60ch;}
.seo-hero-visual{
  grid-column:span 4;
  background:var(--dark);
  min-height:420px;
}
.seo-hero-visual img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  transition:transform .9s var(--ease);
}
.seo-hero-visual:hover img{transform:scale(1.02);}
.seo-hero-points{margin-top:18px;}
.seo-hero-points .chip{line-height:1.35;text-transform:none;letter-spacing:0;font-size:13px;}

/* ----- Lese-Kachel im Story-Muster (wie ap-story, bts-story, lek-story):
   Cyan-Mark plus H2 links (4 Spalten), Prosa rechts (8 Spalten).
   Folgetext nach einer Reason-Reihe (seo-read--cont) laeuft in derselben
   Textspalte weiter, damit die Lesespur nicht springt. ----- */
.seo-read{
  grid-column:span 12;
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(20px,3vw,48px);
  padding:var(--pad-lg);
}
.seo-read-head .mark{margin-bottom:18px;}
.seo-read-head h2{max-width:18ch;}
.seo-read .prose{max-width:68ch;min-width:0;}
.seo-read--cont .prose{grid-column:2;}

/* Vergleichstabelle (Sonderfall autorencoaching-fuer-sachbuchautoren):
   Mindestbreite, damit die Spalten lesbar bleiben; .table-wrap scrollt horizontal */
.seo-compare-table{min-width:560px;}
.seo-compare-table td:first-child{font-weight:700;white-space:nowrap;}

/* ----- Reason-Kachel (frueher reason-block / phase-block) ----- */
.seo-reason{display:flex;flex-direction:column;gap:12px;}
.seo-reason .mark{margin-bottom:2px;}
.seo-reason h3{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.seo-reason p{color:var(--ink-soft);line-height:1.6;}
.seo-reason p strong{color:var(--ink);}
.seo-reason a{
  color:var(--cyan-text);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--cyan-ring);
  text-decoration-thickness:2px;text-underline-offset:.18em;
}
.seo-reason a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

/* ----- Mid-CTA: Cyan-Kachel ----- */
.seo-mid{
  grid-column:span 12;
  text-align:center;
  padding:var(--pad-lg) clamp(24px,4vw,56px);
}
.seo-mid .eyebrow{margin-bottom:12px;}
.seo-mid h3{font-size:var(--fs-section);color:var(--dark);margin-bottom:12px;text-wrap:balance;}
.seo-mid p{
  font-size:var(--fs-lead);line-height:1.6;color:rgba(10,10,10,.86);
  max-width:62ch;margin:0 auto 24px;
}
.seo-mid .cta-row{justify-content:center;}

/* ----- Trust: dunkle Kachel mit drei Ankern ----- */
.seo-trust h2{margin-bottom:22px;}
.seo-anker-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gap);
}
.seo-anker{
  background:var(--dark-2);
  border:1px solid var(--line-dark);
  border-radius:var(--r-sm);
  padding:18px 20px;
}
.seo-anker-num{
  font-size:var(--fs-feature);
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--cyan);
}
.seo-anker-label{font-size:var(--fs-small);line-height:1.45;color:rgba(255,255,255,.72);margin-top:8px;}
.seo-anker-label a{
  color:var(--white);
  text-decoration:underline;text-decoration-color:var(--cyan-ring);
  text-underline-offset:.18em;
}
.seo-anker-label a:hover{text-decoration-color:var(--cyan);}

/* ----- FAQ: Kachel-Liste ----- */
.seo-faq{display:flex;flex-direction:column;gap:10px;}
.seo-faq-q{
  font-size:var(--fs-sub);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.seo-faq-a{color:var(--ink-soft);line-height:1.6;max-width:72ch;}
.seo-faq-a strong{color:var(--ink);}
.seo-faq-a a{
  color:var(--cyan-text);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--cyan-ring);
  text-decoration-thickness:2px;text-underline-offset:.18em;
}
.seo-faq-a a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

/* ----- Mesh: Link-Kacheln (tile-link), Restzeile fuellt sich per nth-child ----- */
.seo-link-card .eyebrow{margin-bottom:8px;}
.seo-link-card strong{margin-bottom:6px;}
.seo-mesh .seo-link-card:nth-last-child(2):nth-child(3n+1),
.seo-mesh .seo-link-card:nth-last-child(1):nth-child(3n+2){grid-column:span 6;}
.seo-mesh .seo-link-card:last-child:nth-child(3n+1){grid-column:span 12;}

/* ----- Final-CTA: dunkle Kachel ----- */
.seo-final{
  grid-column:span 12;
  text-align:center;
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px);
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}
.seo-final .eyebrow{margin-bottom:14px;}
.seo-final h2{font-size:var(--fs-feature);margin-bottom:14px;color:var(--white);}
.seo-final .lead{max-width:62ch;margin:0 auto 28px;}
.seo-final .cta-row{justify-content:center;}

/* ----- Reise-Router: Intro-Kachel plus drei Karten-Kacheln ----- */
.seo-router-intro .eyebrow{margin-bottom:12px;}
.seo-router-intro h2{margin-bottom:14px;}
.seo-router-intro p{color:var(--ink-soft);}
a.tile.seo-router-card{display:flex;flex-direction:column;gap:10px;}
.seo-router-card .eyebrow{margin-bottom:4px;}
.seo-router-card strong,.seo-router-card span{display:block;}
.seo-router-card strong{
  font-size:var(--fs-tile);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.seo-router-card span{color:var(--ink-soft);line-height:1.55;}
.seo-router-card.tile--dark span{color:rgba(255,255,255,.78);}
.seo-router-card em{font-style:normal;margin-top:auto;align-self:flex-start;}
.seo-router-card > span{padding-bottom:10px;} /* Luft vor dem Link oder Button, der unten sitzt */
.seo-router-card:hover em.textlink{color:var(--cyan-deep);box-shadow:inset 0 -2px 0 var(--cyan-deep);}
.seo-router-card--primary{
  background:
    radial-gradient(45% 55% at 100% 100%, rgba(0,160,222,.16), rgba(0,160,222,0) 70%),
    var(--dark);
}

/* ----- Bio: Person-Kachel ----- */
.seo-bio .person-photo{min-height:320px;}
.seo-bio .person-body p{color:var(--ink-soft);max-width:60ch;}
.seo-bio .person-body a{
  color:var(--cyan-text);font-weight:600;
  text-decoration:underline;text-decoration-color:var(--cyan-ring);
  text-decoration-thickness:2px;text-underline-offset:.18em;
}
.seo-bio .person-body a:hover{color:var(--dark);text-decoration-color:var(--cyan);}

/* ----- Responsive ----- */
@media (max-width:960px){
  .seo-hero-visual{grid-column:span 12;min-height:0;aspect-ratio:4/3;} /* wie .hero-photo der Startseite: volle Breite, das dunkle Typo-Bild sitzt mittig auf --dark */
  .seo-read{grid-template-columns:minmax(0,1fr);padding:var(--pad);} /* minmax(0,...) damit die Tabelle im .table-wrap scrollt statt die Kachel zu sprengen */
  .seo-read-head h2{max-width:none;}
  .seo-read--cont .prose{grid-column:auto;}
  .seo-anker-row{grid-template-columns:1fr;}
  .seo-router-intro{grid-column:span 12;}
  .seo-bio .person-photo{aspect-ratio:16/10;min-height:0;}
}
@media (max-width:600px){
  .seo-mesh .seo-link-card:nth-child(n):nth-last-child(n){grid-column:span 12;}
  .seo-hero-visual{aspect-ratio:1/1;}
}