/* Der KI-Coach — Buch-CI: Schwarz #0B0B0B, Cover-Gelb #FFE000, Weiß.
   Verwandtschaft Whitesides (Libre Caslon Text liest, Inter bedient), Buch-CI führt. */

/* ---------- Fonts (self-hosted, kein externer Request) ---------- */
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/inter-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:optional}
@font-face{font-family:'Libre Caslon Text';src:url('/assets/fonts/libre-caslon-text.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Caslon Text';src:url('/assets/fonts/lc-text-kc-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
/* Fallback-Schriften mit Metrik-Override (10.10.2026): Arial bzw. Georgia werden auf die Laufweite und Zeilenmetrik
   von Inter und Libre Caslon Text gezogen, damit der Wechsel nach dem Laden der Webfonts den Artikelkopf nicht verschiebt (CLS).
   Die Overrides treffen die Textbreite nur auf rund 1 % genau; bei Ueberschriften und Vorspann kippt damit an manchen Breiten
   der Zeilenumbruch. Inter Black (auf jeder Seite vorgeladen) steht deshalb auf font-display:optional. Auf den Blogseiten
   (alle Schriften vorgeladen) gelten per --sans/--serif die *Opt-Familien unten, ebenfalls optional: kommt eine Schrift nicht
   innerhalb der Blockphase, bleibt die Fallback-Schrift bis zum naechsten Seitenaufruf stehen, es gibt keinen Wechsel mehr. */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT');font-weight:400;font-style:normal;size-adjust:105.35%;ascent-override:91.96%;descent-override:22.90%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;font-style:normal;size-adjust:100.44%;ascent-override:96.45%;descent-override:24.01%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;font-style:normal;size-adjust:101.50%;ascent-override:95.44%;descent-override:23.76%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:900;font-style:normal;size-adjust:105.34%;ascent-override:91.97%;descent-override:22.90%;line-gap-override:0%}
@font-face{font-family:'Libre Caslon Fallback';src:local('Georgia');font-weight:400 700;font-style:normal;size-adjust:107.19%;ascent-override:90.49%;descent-override:24.26%;line-gap-override:0%}
@font-face{font-family:'Libre Caslon Fallback';src:local('Georgia Italic'),local('Georgia-Italic');font-weight:400 700;font-style:italic;size-adjust:103.19%;ascent-override:94.00%;descent-override:25.20%;line-gap-override:0%}
@font-face{font-family:'Inter Opt';src:url('/assets/fonts/inter-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional}
@font-face{font-family:'Inter Opt';src:url('/assets/fonts/inter-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional}
@font-face{font-family:'Inter Opt';src:url('/assets/fonts/inter-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional}
@font-face{font-family:'Inter Opt';src:url('/assets/fonts/inter-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:optional}
@font-face{font-family:'Libre Caslon Opt';src:url('/assets/fonts/libre-caslon-text.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:optional}
@font-face{font-family:'Libre Caslon Opt';src:url('/assets/fonts/lc-text-kc-italic.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:optional}

/* ---------- Tokens ---------- */
:root{
  --schwarz:#0B0B0B; --gelb:#FFE000; --weiss:#FFFFFF;
  --grau:#B9B9B9; --grau-dunkel:#3A3A3A; --flaeche:#141414; --linie:#2A2A2A;
  --sans:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Libre Caslon Text','Libre Caslon Fallback',Georgia,'Times New Roman',serif;
  --mass:72rem; --text:44rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--weiss);background:var(--schwarz)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gelb)}
a:hover{color:var(--weiss)}
:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}
::selection{background:var(--gelb);color:var(--schwarz)}

.skip-link{position:absolute;left:-999px;top:0;background:var(--gelb);color:var(--schwarz);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip-link:focus{left:0}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--sans);font-weight:900;line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(1.9rem,1.2rem + 3.4vw,3.4rem)}
h2{font-size:clamp(1.45rem,1.05rem + 2.1vw,2.25rem)}
h3{font-size:clamp(1.08rem,1rem + .5vw,1.3rem)}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gelb)}
.lede{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.65}
/* overflow-wrap: lange Einzelwoerter (Ueberschrift "Geschaeftsbedingungen",
   E-Mail-Adressen, "Umsatzsteuer-Identifikationsnummer") schoben die
   Rechtstexte bei 320-390px horizontal aus dem Viewport -- gemessen am
   02.09.2026 auf /agb/ (50px bei 320px), /widerruf/ und /datenschutz/,
   in WebKit wie Chromium. Greift nur, wenn ein Wort sonst wirklich nicht
   passt, und aendert das normale Layout nicht. */
.prosa{font-family:var(--serif);font-size:1.06rem;line-height:1.65;overflow-wrap:break-word}
.prosa p+p{margin-top:1em}
.gelb{color:var(--gelb)}
.hinweis{font-size:.85rem;color:var(--grau)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--mass);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.wrap-text{max-width:var(--text);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
section{padding-block:clamp(2.4rem,1.6rem + 4.5vw,5.5rem);position:relative}
section+section{padding-top:clamp(2.3rem,1.6rem + 3vw,4.2rem)}
.section-kopf{margin-bottom:clamp(1.5rem,4vw,3rem)}
.section-kopf .eyebrow{display:block;margin-bottom:.9rem}
.section-kopf .lede{margin-top:1.1rem}
.section-kopf h1+.lede,.section-kopf h2+.lede{margin-top:1.1rem}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linie)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand img{height:1.7rem;width:auto}
.nav-toggle{display:none;background:none;border:1px solid var(--linie);color:var(--weiss);padding:.45rem .7rem;border-radius:4px;font:inherit;cursor:pointer}
.site-nav ul{display:flex;gap:clamp(.7rem,2vw,1.6rem);list-style:none;align-items:center}
.site-nav a{color:var(--weiss);text-decoration:none;font-weight:600;font-size:.95rem;letter-spacing:.02em}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--gelb)}
.site-nav .cta a{background:var(--gelb);color:var(--schwarz);padding:.5rem 1.1rem;border-radius:4px}
.site-nav .cta a:hover{background:var(--weiss);color:var(--schwarz)}
@media(max-width:56rem){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;inset-inline:0;top:100%;background:#111318;border-top:1px solid #B9BDC3;border-bottom:1px solid #2A2D33;box-shadow:0 18px 40px rgba(0,0,0,.65);padding:1rem}
  .site-nav.offen{display:block}
  body.menue-offen{overflow:hidden}
  body.menue-offen::after{content:"";position:fixed;inset:0;top:0;background:rgba(0,0,0,.6);z-index:40}
  .site-nav ul{flex-direction:column;align-items:stretch;gap:.2rem}
  .site-nav a{display:block;padding:.7rem .5rem;font-size:1.05rem}
}

/* ---------- Sonnenstrahlen-Hintergrund (Branding-Element 1) ---------- */
.strahlen{position:relative;overflow:hidden}
.strahlen::before{content:"";position:absolute;inset:-20%;background:url('/assets/brand/der-ki-coach-sonnenstrahlen-voll.svg') center/contain no-repeat;opacity:.16;pointer-events:none}
.strahlen>*{position:relative}
.strahlen--kraeftig::before{opacity:.32}
@media(max-width:44rem){.strahlen::before{opacity:.09}.strahlen--kraeftig::before{opacity:.16}.zitat-band::before{opacity:.3}}
.strahlen--ecke::before{inset:auto -30% -60% auto;width:120%;aspect-ratio:1;opacity:.14}

/* ---------- Ruhige Trennzone (ohne Strahlen) ---------- */
section.ruhig{background:var(--schwarz);padding-block:clamp(4.5rem,12vw,8.5rem)}

/* ---------- Zitat-Bänder: Text auf schwarzem Band vor Strahlen (Cover-Innenseite) ---------- */
.zitat-band{background:var(--schwarz);padding-block:clamp(3.5rem,9vw,7rem);overflow:hidden;position:relative}
.zitat-band::before{content:"";position:absolute;inset:-40% -10%;background:url('/assets/brand/der-ki-coach-sonnenstrahlen-voll.svg') center/cover no-repeat;opacity:.5;pointer-events:none}
.zitat-band .band{position:relative;background:var(--schwarz);padding:clamp(1.2rem,3vw,2rem) clamp(1.4rem,4vw,3rem);max-width:56rem;margin-inline:auto;box-shadow:0 0 0 1px rgba(255,224,0,.12)}
.zitat-band .band p{font-family:var(--sans);font-weight:900;font-size:clamp(1.4rem,3.4vw,2.3rem);line-height:1.2;letter-spacing:.005em;text-transform:uppercase}
.zitat-band .band .quelle{margin-top:.8rem;font-weight:600;font-size:.85rem;letter-spacing:.2em;color:var(--gelb);text-transform:uppercase}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.25;letter-spacing:.02em;text-decoration:none;border-radius:6px;padding:.8rem 1.4rem;text-align:center;max-width:100%;box-sizing:border-box;cursor:pointer;border:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn+.btn,.btn+.erinnern-details,p .btn{margin-block:.25rem}
.aktionen .btn{margin:0}
/* Gestapelte Buttons: nie buendig aufeinander */
.btn{margin-bottom:.15rem}
.btn-gelb{background:var(--gelb);color:var(--schwarz)}
.btn-gelb:hover{background:var(--weiss);color:var(--schwarz)}
.btn-ghost{background:transparent;color:var(--weiss);border-color:#B9BDC3}
.btn-ghost:hover{background:var(--weiss);color:var(--schwarz)}
.btn:disabled{opacity:.5;cursor:wait}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.5rem,6vw,5rem);min-height:min(88vh,54rem);display:flex;align-items:center}
.hero .inner{width:100%;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero .untertitel{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,2.2vw,1.45rem);line-height:1.5;margin-top:1.2rem;max-width:34rem;text-wrap:pretty}
.hero .aktionen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem;align-items:center;row-gap:.9rem}
.hero .mockup img{filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
.hero .autorzeile{margin-top:1.4rem;font-size:.95rem;color:var(--grau);text-wrap:pretty}
.hero .autorzeile .hinweis{white-space:nowrap}
.hero .autorzeile strong{color:var(--weiss)}
@media(max-width:56rem){.hero .inner{grid-template-columns:1fr}.hero .mockup{order:-1;max-width:22rem;margin-inline:auto}}

/* ---------- Countdown ---------- */
.badge-hero{margin-top:2rem}

/* ---------- Karten / Raster ---------- */
.raster{display:grid;gap:clamp(1rem,2.5vw,2rem)}
.raster-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.raster-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.karte{background:var(--flaeche);border:1px solid #2A2D33;border-radius:8px;padding:clamp(1.5rem,1.35rem + .8vw,1.75rem);transition:border-color .15s}
@media(hover:hover){.karte:hover{border-color:#3A3E45}}
.karte h3{margin-bottom:.6rem}
.karte .preis{font-weight:900;font-size:2rem;color:var(--gelb);font-variant-numeric:tabular-nums;white-space:nowrap}
.karte .preis .preis-mwst{font-weight:600;font-size:.85rem;color:var(--grau);letter-spacing:.02em}
.karte .preis-zusatz{margin-top:.2rem;font-size:.9rem;color:var(--grau)}
.karte ul{list-style:none;margin-top:1rem}
.karte li{padding-left:1.4rem;position:relative;margin-top:.5rem}
.karte li::before{content:"";position:absolute;left:0;top:.55em;width:.7em;height:.18em;background:var(--gelb)}
.karten-fussnote{margin-top:1.6rem}
.badge{display:inline-block;background:var(--gelb);color:var(--schwarz);font-weight:700;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .7rem;border-radius:3px}

/* ---------- Formulare ---------- */
form .feld{margin-bottom:1.1rem}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.45rem;color:var(--weiss)}
input,textarea,select{width:100%;font:inherit;color:var(--weiss);background:#24262B;border:2px solid #B9BDC3;border-radius:5px;padding:.85rem 1rem;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:#B3B7BD;opacity:1}
input:hover,textarea:hover,select:hover{border-color:#E6D19C}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gelb);box-shadow:0 0 0 3px rgba(255,224,0,.25)}
select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9"><path d="M1 1l6 6 6-6" fill="none" stroke="%23B9BDC3" stroke-width="2"/></svg>');background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.6rem}
.einwilligung{margin-top:1rem;font-size:.8rem;line-height:1.55;color:var(--grau);max-width:38rem}
.einwilligung a{color:var(--grau);text-decoration:underline}
.einwilligung a:hover{color:var(--gelb)}
.nutzen{list-style:none;margin:1rem 0 1.5rem}
.nutzen li{padding-left:1.4rem;position:relative;margin-top:.45rem}
.nutzen li::before{content:"";position:absolute;left:0;top:.55em;width:.7em;height:.18em;background:var(--gelb)}
.karte .erinnern-details{margin-top:1.2rem}
.erinnern-details summary{cursor:pointer;list-style:none;display:inline-block}
.erinnern-details summary::-webkit-details-marker{display:none}
.erinnern-details[open] summary{display:none}
.erinnern-form{margin-top:1rem}
.checkbox{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;font-weight:400}
.checkbox input{width:auto;margin-top:.25rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Formularkarte: deckt das Strahlen-Motiv im Eingabebereich mit einer ruhigen,
   klar abgegrenzten Flaeche ab (das Motiv bleibt im Hero/an den Randbereichen). */
.formularkarte{margin-top:1.6rem}
.formular-abschnitt{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gelb);margin:1.6rem 0 .7rem}
.formular-abschnitt:first-child{margin-top:0}
.auswahlkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:.8rem}
@media(max-width:44rem){.auswahlkarten{grid-template-columns:1fr}}
.auswahlkarte{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;background:#24262B;border:2px solid #B9BDC3;border-radius:8px;padding:1rem 1.1rem;transition:border-color .15s,background-color .15s;margin:0}
.auswahlkarte:hover{border-color:#E6D19C}
.auswahlkarte input{width:auto;margin-top:.2rem;flex-shrink:0}
.auswahlkarte-titel{display:block;font-weight:700;font-size:.95rem}
.auswahlkarte-erklaerung{display:block;font-size:.85rem;color:var(--grau);font-weight:400;margin-top:.2rem}
.auswahlkarte.ist-gewaehlt,.auswahlkarte:has(input:checked){border-color:var(--gelb);background:rgba(255,224,0,.08)}
.form-status{margin-top:1rem;display:none;background:#16181D;border:1px solid #2A2D33;border-radius:8px;padding:.9rem 1rem .9rem .9rem;font-family:var(--sans);color:var(--weiss);align-items:flex-start;gap:.8rem}
.form-status.ok,.form-status.fehler{display:flex;animation:notice-ein .15s ease-out}
.form-status.ok{border-color:#B9BDC3}
.form-status.fehler{border-color:#C9852B}
.form-status .notice-icon{flex:none;width:1.6rem;height:1.6rem}
.form-status .notice-text{padding-top:.1rem}
@keyframes notice-ein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.form-status.ok,.form-status.fehler{animation:none}}

/* ---------- Galerie / Lightbox ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem}
.galerie button{border:none;background:none;padding:0;cursor:zoom-in;border-radius:6px;overflow:hidden}
.galerie img{width:100%;aspect-ratio:2/3;object-fit:cover;transition:transform .25s}
.galerie button:hover img{transform:scale(1.04)}
dialog.lightbox{border:none;background:rgba(11,11,11,.96);max-width:100vw;max-height:100vh;width:100vw;height:100vh;padding:2rem;display:none;align-items:center;justify-content:center}
dialog.lightbox[open]{display:flex}
dialog.lightbox img{max-width:min(92vw,60rem);max-height:82vh;width:auto;height:auto;object-fit:contain}
dialog.lightbox .lb-leiste{position:absolute;top:1rem;right:1rem;display:flex;gap:.6rem;z-index:3}
dialog.lightbox .lb-nav{position:absolute;top:6rem;bottom:4rem;width:18%;background:none;border:none;cursor:pointer;color:transparent;z-index:2}
dialog.lightbox .lb-nav:hover{color:var(--gelb);font-size:3rem}
dialog.lightbox .lb-prev{left:0}
dialog.lightbox .lb-next{right:0}
dialog.lightbox .lb-caption{position:absolute;bottom:1.2rem;inset-inline:2rem;text-align:center;font-size:.85rem;color:var(--grau)}
.lb-btn{background:var(--flaeche);border:1px solid var(--linie);color:var(--weiss);border-radius:4px;padding:.5rem .9rem;cursor:pointer;font:inherit;text-decoration:none;font-size:.9rem}
.lb-btn:hover{border-color:var(--gelb)}

/* ---------- Audio ---------- */
#hoeren .raster{align-items:stretch}
.audio-quote{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:1.2rem 1.4rem;display:flex;flex-direction:column}
.audio-quote figcaption{font-family:var(--serif);font-style:italic;margin-bottom:.8rem}
.audio-quote audio{width:100%;margin-top:auto}

/* ---------- FAQ ---------- */
details.faq{border-bottom:1px solid var(--linie)}
details.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;padding-block:1.1rem;list-style:none;position:relative;padding-right:2.2rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);color:var(--gelb);font-weight:900;font-size:1.5rem}
details.faq[open] summary::after{content:"−"}
details.faq .antwort{padding-bottom:1.2rem;color:var(--grau);max-width:38rem}
details.faq .antwort a{color:var(--gelb)}

/* ---------- Tabellen ---------- */
.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--linie)}
.tabelle th{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
/* Faktentabellen Label | Wert (/formate/, /presse/; 16.09.2026). Unter 30rem
   liefen beide 21px (390px) bzw. 51px (360px) seitlich ueber: das gesperrte
   Versal-Label "ERSCHEINUNGSTERMIN" braucht allein 243px, ISBN (geschuetzte
   Bindestriche) und Mailadresse je gut 180px, zusammen mehr als die ~358px
   Inhaltsbreite. Schmal daher Label ueber Wert, lange Werte duerfen umbrechen. */
.tabelle--fakten td{overflow-wrap:anywhere}
@media(max-width:30rem){
  .tabelle--fakten th,.tabelle--fakten td{display:block;padding-inline:0}
  .tabelle--fakten th{border-bottom:none;padding-bottom:.15rem}
  .tabelle--fakten td{padding-top:0}
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--linie);padding-block:clamp(1.8rem,4vw,3rem) clamp(1.2rem,3vw,2rem);margin-top:2rem}
.site-footer .oben{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.site-footer .wortmarke img{height:2.2rem;width:auto}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem}
.site-footer a{color:var(--grau);text-decoration:none}
.site-footer a:hover{color:var(--gelb)}
.site-footer .verlag{display:flex;align-items:flex-start;gap:.7rem;margin-top:1.6rem;color:var(--grau);font-size:.85rem;max-width:44rem}
.site-footer .verlag img{height:2rem;width:auto;flex:none}
.site-footer .verlag .vsatz1{display:block}
.site-footer .verlag .vsatz2{display:inline-block;white-space:nowrap}
.site-footer .verlag-info{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid #1E2025;color:var(--grau);font-size:.82rem;line-height:1.55;max-width:44rem}
.site-footer .verlag-info strong{color:#D9D9D9}
.site-footer .marken-hinweis{margin-top:1rem;font-size:.75rem;line-height:1.5;color:var(--grau);max-width:44rem}
@media(max-width:44rem){
  .site-footer .wortmarke img{height:1.6rem}
  .site-footer nav ul{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .9rem}
  .site-footer nav a{font-size:.9rem;line-height:1.9}
  .site-footer .oben{gap:1.2rem}
}

/* ---------- Leseprobe-CTA: Abstand zu Reader und Footer ---------- */
.lp-cta{margin-block:clamp(2.4rem,1.6rem + 4.5vw,5.5rem);padding-block:clamp(3rem,2rem + 5vw,6rem)}

/* ---------- Nach-oben-Pfeil ---------- */
.nach-oben{position:fixed;right:1rem;bottom:1.1rem;z-index:55;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--schwarz);border:1.5px solid #B9BDC3;color:var(--gelb);font-size:1.2rem;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s,border-color .15s;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.nach-oben.sichtbar{opacity:1;pointer-events:auto}
.nach-oben:hover{border-color:var(--gelb)}
body.hat-leiste .nach-oben{bottom:4.4rem}

/* ---------- Leseprobe: Startmarker, Buchseiten-Anmutung, Mitnehmen-Leiste ---------- */
.lp-start{border:none;margin:0;padding:clamp(2rem,5vw,3rem) 0 0;text-align:center}
.lp-start .linie{display:flex;align-items:center;gap:1rem;max-width:34rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.lp-start .linie::before,.lp-start .linie::after{content:"";flex:1;height:1px;background:#3A3E45}
.lp-start span{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.28em;color:var(--gelb);white-space:nowrap}
.lp-reader{background:#101114;border-block:1px solid #22242A}
.lp-leiste{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#111318;border-top:1px solid #B9BDC3;padding:.55rem .9rem;display:none;align-items:center;justify-content:center;gap:.7rem;font-family:var(--sans);font-size:.85rem}
.lp-leiste.sichtbar{display:flex}
.lp-leiste .lb-btn{padding:.4rem .8rem}
.lp-leiste .schliessen{background:none;border:none;color:var(--grau);font-size:1.1rem;cursor:pointer;padding:.2rem .4rem}
@media(min-width:56rem){.lp-leiste{display:none!important}}

/* ---------- Leseprobe-Reader ---------- */
.lp-fortschritt{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:transparent}
#lp-balken{height:100%;width:0;background:var(--gelb);transition:width .1s linear}
.lp-reader{padding-block:clamp(2rem,5vw,4rem)}
.lp-reader img{max-width:min(100%,15rem);height:auto}
.lp-satz{max-width:34rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);font-family:var(--serif);font-size:1.08rem;line-height:1.7}
.lp-satz p{margin:0 0 0;text-indent:1.4em}
.lp-satz p.lp-erst,.lp-satz p.lp-abschnitt,.lp-satz p.lp-merksatz,.lp-satz .lp-zitat p{text-indent:0}
.lp-satz p.lp-erst::first-letter{font-weight:700;font-size:3em;float:left;line-height:.85;padding-right:.1em;color:var(--gelb)}
.lp-kapitelkopf{margin:clamp(3rem,8vw,5rem) 0 1.5rem;text-align:center}
.lp-kapitelkopf:first-child{margin-top:0}
.lp-kapitelkopf h2{font-family:var(--sans);font-weight:900;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:.01em;text-transform:uppercase}
.lp-kapitelkopf .eyebrow{display:block;margin-bottom:.6rem}
.lp-vignette{margin:2rem auto;max-width:13rem}
.lp-vignette img{width:100%;height:auto}
.lp-vignette--hell{background:var(--weiss);border-radius:8px;padding:1rem;max-width:11rem}
.lp-zitat{margin:2rem 0;padding:0 1.5rem;border-left:3px solid var(--gelb)}
.lp-zitat .lp-zitat-text{font-style:italic;font-size:1.15rem}
.lp-zitat .lp-zitat-quelle{font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.2em;color:var(--gelb);margin-top:.6rem}
.lp-merksatz{margin:2rem auto;text-align:center;font-style:italic;color:var(--gelb);max-width:26rem}
hr.lp-breche{border:none;margin:2rem auto;width:6rem;height:1px;background:var(--linie);overflow:visible;position:relative}
hr.lp-breche::after{content:"✳";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--schwarz);padding:0 .7rem;color:var(--gelb);font-size:.8rem}
.lp-teil{font-family:var(--sans);font-weight:700;color:var(--gelb);margin-top:1.4rem;text-indent:0!important}

/* ---------- Diverses ---------- */
.datum{white-space:nowrap}
.breadcrumb{font-size:.85rem;color:var(--grau);padding-top:1.2rem}
.breadcrumb a{color:var(--grau);text-decoration:none}
.breadcrumb a:hover{color:var(--gelb)}
.autor-teaser{display:grid;grid-template-columns:minmax(14rem,20rem) 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.autor-teaser img{border-radius:8px}
@media(max-width:44rem){.autor-teaser{grid-template-columns:1fr}}
/* Kanal-Icons im Autorenblock (16.09.2026). Monochrom im Site-CI: Grau im
   Ruhezustand, Cover-Gelb im Hover -- wie jeder andere Link der Seite.
   Die Seite ist durchgehend dunkel, es gibt keine helle Variante.
   Klickflaeche 44x44px (WCAG 2.5.8), das Glyph selbst misst 24px. */
.sozial{display:flex;gap:.75rem;list-style:none;margin-top:1.4rem;margin-left:-.6rem}
.sozial a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:6px;color:var(--grau);
  transition:color .15s ease,background-color .15s ease}
.sozial a:hover{color:var(--gelb);background:rgba(255,224,0,.08)}
.sozial svg{width:24px;height:24px;display:block}
.leseprobe-blatt{background:var(--weiss);color:#1a1a1a;border-radius:8px;padding:clamp(1.6rem,5vw,3.5rem);font-family:var(--serif);font-size:1.08rem;line-height:1.7}
.leseprobe-blatt h2,.leseprobe-blatt h3{color:#0B0B0B}
.leseprobe-blatt p+p{margin-top:0;text-indent:1.4em}
.leseprobe-blatt .initial::first-letter{font-weight:700;font-size:3.2em;float:left;line-height:.85;padding-right:.08em}
.hinweisbox{border:1px solid var(--gelb);border-radius:6px;padding:1rem 1.2rem;background:rgba(255,224,0,.06)}
.error-hero{min-height:70vh;display:flex;align-items:center;text-align:center}
.error-hero .code{font-weight:900;font-size:clamp(5rem,18vw,11rem);color:var(--gelb);line-height:1}

/* Hinweiszeilen unter einem Formularfeld (Anzahl-Feld auf /vorbestellen/,
   02.09.2026): kleiner als der Fliesstext, aber nicht verschluckt. */
.feld-hinweis{margin:.4rem 0 0;font-size:.88rem;line-height:1.5;color:var(--grau,#5b5b5b)}
.feld-hinweis a{text-decoration:underline}
/* Feldbezogene Fehlermeldung (z. B. 409 bei zu grosser Anzahl) -- steht direkt
   am Feld, nicht in der allgemeinen Formular-Statuszeile. */
.feld-fehler{color:#C9852B;font-weight:600}

/* ---------- HaendlerBlock (16.09.2026): Amazon-Badge + Aufruf an den Buchhandel ----------
   Markenregeln Amazon: Badge-Datei unveraendert (weiss), gerendert mind. 140px
   breit (hier 190px bzw. 160px in Karten). Freiraum rundum mindestens in Hoehe
   der Amazon-Buchstaben: die machen 53 % der Badge-Hoehe aus, bei 190px Breite
   also rund 18px -> 1.2rem Padding am Link, kein anderes Element ragt hinein.
   Ruhiger Untergrund: eigene schwarze Flaeche statt Strahlen-Motiv; in Karten
   traegt die Kartenflaeche. Keine Amazon-Farben, kein Gelb am Badge (sonst
   Naehe zum Amazon-Button), kein Prime-Logo. */
.haendler-block{margin-top:1.6rem;background:var(--schwarz);border:1px solid var(--linie);border-radius:8px;padding:1rem 1.35rem 1.1rem}
.haendler-begleit{font-weight:700;font-size:.95rem;line-height:1.4;color:var(--weiss)}
.haendler-badge{display:block;width:max-content;max-width:none;padding:1.2rem;margin-left:-1.2rem;border-radius:6px;transition:box-shadow .15s}
.haendler-badge img{width:190px;height:auto}
.haendler-badge:hover{box-shadow:inset 0 0 0 1px #3A3E45}
.haendler-prime{font-size:.85rem;line-height:1.5;color:var(--grau)}
.haendler-aufruf{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--linie);font-size:.82rem;line-height:1.55;color:var(--grau)}
.haendler-aufruf a{color:var(--grau);text-decoration:underline;overflow-wrap:anywhere}
.haendler-aufruf a:hover{color:var(--gelb)}
.haendler-aufruf .kein-umbruch{white-space:nowrap}
.haendler-block--karte{background:none;border:none;border-top:1px solid var(--linie);border-radius:0;padding:1.1rem 0 0;margin-top:1.4rem}
.haendler-block--karte .haendler-badge img{width:160px}
@media(min-width:56rem){.haendler-block--hero{max-width:32rem}}
/* Hoerbuch bei Haendlern (08.10.2026): Textlinks, dem Kauf-Button untergeordnet */
.hoerbuch-haendler{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--linie);font-size:.9rem;line-height:1.5}
.hoerbuch-haendler-titel{color:var(--grau)}
/* Trenner steht VOR jedem Eintrag; die Liste ist um den Trennerabstand nach
   links verschoben und dort per clip-path beschnitten. So verschwindet der
   Trenner am Anfang jeder Zeile, am Zeilenende steht nie einer. Der Schnitt
   liegt zwischen Trenner und Link, der Fokusrahmen bleibt sichtbar. */
.hoerbuch-haendler-liste{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 0;margin:.35rem 0 0 -1.4rem;padding:0;clip-path:inset(-.5rem -.5rem -.5rem 1rem)}
.hoerbuch-haendler .hoerbuch-haendler-liste li{position:relative;padding-left:1.4rem;margin-top:0}
.hoerbuch-haendler .hoerbuch-haendler-liste li::before{content:"·";content:"·" / "";position:absolute;left:.55rem;top:0;width:auto;height:auto;background:none;color:var(--grau)}
.hoerbuch-haendler-liste a{color:var(--gelb);text-underline-offset:.18em}
.bezugsoption{margin-top:clamp(2rem,5vw,3rem)}
.bezugsoption .prosa{margin-top:.6rem}

/* ---------- Stimmen-Seite (16.09.2026) ----------
   Einstieg mobil ohne grossen Leerraum, kompakter leerer Zustand, Karten mit
   Format/Umfang/Freiexemplar direkt an der Stimme. Sterne als Radiogruppe in
   DOM-Reihenfolge 1..5 (Pfeiltasten laufen in Leserichtung); markiert werden
   die gewaehlte und alle davor. Touch-Ziele mind. 44px. */
section.stimmen-einstieg{padding-top:clamp(.25rem,2vw,2rem);padding-bottom:clamp(1.4rem,3vw,2.6rem)}
.stimmen-titel{margin-top:clamp(.8rem,2.5vw,1.6rem);font-size:clamp(1.7rem,1.1rem + 3vw,3rem);overflow-wrap:break-word}
.stimmen-einstieg .lede{margin-top:1rem;max-width:40rem}
.stimmen-aktionen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.stimmen-aktionen .btn{margin:0}
#bestaetigung{margin-top:1.2rem}
section.stimmen-bereich{padding-block:clamp(1.8rem,1.2rem + 3vw,3.5rem)}
.stimmen-h2{margin-bottom:1.1rem}
.stimmen-liste{display:grid;gap:1rem}
.stimmen-leer{border:1px dashed #3A3E45;border-radius:8px;padding:1rem 1.2rem;color:var(--grau);font-size:.95rem}
.stimme{overflow-wrap:anywhere}
.stimme-name{font-weight:700}
.stimme-meta{font-size:.85rem;color:var(--grau);margin-top:.1rem}
.stimme-merkmale{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.stimme-merkmale li{font-size:.8rem;line-height:1.4;border:1px solid #3A3E45;border-radius:4px;padding:.15rem .55rem;color:#D9D9D9}
.karte .stimme-merkmale li{margin-top:0;padding:.15rem .55rem}
.karte .stimme-merkmale li::before{content:none}
.stimme-merkmale li.eingeschraenkt{border-color:var(--gelb);color:var(--gelb)}
.stimme-sterne{color:var(--gelb);letter-spacing:.12em;margin-top:.7rem}
.stimme-text{margin-top:.8rem;font-family:var(--serif);font-size:1.02rem;line-height:1.65;white-space:pre-line}
.stimmen-mehr{margin-top:1.2rem}
.stimmen-mehr[hidden]{display:none}
.stimmen-formular{margin-top:1.4rem}
/* Fokus nach Fehlern nie unter dem fixierten Seitenkopf (WCAG 2.4.11) */
.stimmen-formular input,.stimmen-formular textarea,.stimmen-formular fieldset,.stimmen-formular .form-status,.formular-fehler,#bestaetigung,#erfahrung-teilen{scroll-margin-top:5.5rem}
fieldset.wahl{border:none;padding:0;min-width:0}
fieldset.wahl legend{font-weight:600;font-size:.92rem;margin-bottom:.35rem;padding:0}
fieldset.wahl[hidden]{display:none}
.wahl-optionen{display:grid;gap:0}
.wahl-option{display:flex;gap:.65rem;align-items:center;min-height:44px;margin:0;font-weight:400;font-size:.95rem;cursor:pointer}
.wahl-option[hidden]{display:none}
.wahl-option input{width:1.15rem;height:1.15rem;margin:0;flex:none;accent-color:var(--gelb)}
.pflicht,.optional{font-weight:400;font-size:.85em;color:var(--grau)}
.umfang-fest{margin:-.3rem 0 1.1rem}
.umfang-fest[hidden]{display:none}
.zeichen-zaehler{font-variant-numeric:tabular-nums}
.zeichen-zaehler.zu-lang{color:#E8A04E;font-weight:600}
.feld-fehler[hidden]{display:none}
.formular-fehler{border:1px solid #C9852B;border-radius:8px;padding:.9rem 1.1rem;margin-bottom:1.4rem;background:rgba(201,133,43,.08)}
.formular-fehler[hidden]{display:none}
.formular-fehler-kopf{font-weight:700}
.formular-fehler ul{margin:.4rem 0 0 1.1rem}
.formular-fehler a{color:var(--weiss)}
.stimmen-formular input[aria-invalid=true],.stimmen-formular textarea[aria-invalid=true]{border-color:#C9852B}
.sterne-wahl{display:flex;flex-wrap:wrap;gap:.1rem;position:relative}
.sterne-wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sterne-wahl label{cursor:pointer;font-size:1.9rem;line-height:1;color:#7A7A7A;margin:0;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:6px}
.sterne-wahl input:checked+label{color:var(--gelb)}
.sterne-wahl:has(input:checked) label{color:var(--gelb)}
.sterne-wahl input:checked+label~label{color:#7A7A7A}
.sterne-wahl input:focus-visible+label{outline:3px solid var(--gelb);outline-offset:2px}
.link-knopf{background:none;border:none;color:var(--gelb);text-decoration:underline;font:inherit;font-size:.9rem;cursor:pointer;padding:.5rem 0;min-height:44px}
.link-knopf[hidden]{display:none}
.einwilligung-feld{font-size:.92rem;line-height:1.55}
.stimmen-datenhinweis{margin-top:.5rem}
.stimmen-formular .cf-turnstile{margin:.4rem 0 .6rem}
.notice-knopf{display:block;margin-top:.7rem;font-size:.9rem;padding:.55rem 1rem}
.stimmen-moderation{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--grau);font-size:.9rem;line-height:1.6}
.stimmen-moderation h3{color:var(--weiss);font-size:1rem;margin-bottom:.4rem}
/* Zwischenseiten der Functions (Bestaetigung, Moderation) */
section.zwischenseite{padding-block:clamp(2rem,6vw,4rem)}
.zwischen-titel{font-size:clamp(1.5rem,1.1rem + 2vw,2.2rem);margin-bottom:1rem}
.zwischen-aktionen{margin:1.4rem 0}
.zwischen-formular{margin-top:1.6rem}
.moderation-text{margin:1.2rem 0;padding-left:1rem;border-left:3px solid var(--gelb);font-family:var(--serif);white-space:pre-line;overflow-wrap:anywhere}

/* ---------- Infografiken Blog (09.10.2026, Paket kicoach-blog: infografik.css unveraendert) ---------- */
.ig{margin:2.5rem 0;padding:clamp(1.25rem,3vw,2rem);background:var(--flaeche,#141414);border:1px solid var(--linie,#2A2A2A);border-radius:6px;color:var(--weiss,#fff);font-family:var(--sans,Inter,system-ui,sans-serif)}
.ig-kopf{margin:0 0 1.25rem}
.ig-eyebrow{display:block;font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gelb,#FFE000);margin-bottom:.4rem}
.ig-titel{font-weight:900;font-size:clamp(1.15rem,1rem + 1vw,1.55rem);line-height:1.15;margin:0}
.ig-raster{display:grid;gap:1rem;grid-template-columns:repeat(var(--spalten,3),minmax(0,1fr));list-style:none;padding:0;margin:0}
@media(max-width:44rem){.ig-raster{grid-template-columns:1fr}}
.ig-karte{border-top:3px solid var(--gelb,#FFE000);background:var(--schwarz,#0B0B0B);padding:1rem 1rem 1.1rem}
.ig-karte h3{font-size:1.05rem;font-weight:900;margin:0 0 .5rem}
.ig-karte p,.ig-karte li{font-size:.92rem;line-height:1.45;color:var(--grau,#B9B9B9)}
.ig-karte ul{margin:0;padding-left:1.1rem}
.ig-nr{display:inline-block;font-weight:900;color:var(--gelb,#FFE000);font-size:.85rem;letter-spacing:.1em;margin-bottom:.35rem}
.ig-mitte{margin:1.25rem 0 0;padding:.85rem 1rem;background:var(--gelb,#FFE000);color:var(--schwarz,#0B0B0B);font-weight:900;text-align:center;letter-spacing:.04em}
.ig-fuss{margin:1rem 0 0;font-size:.85rem;color:var(--grau,#B9B9B9);line-height:1.5}
.ig-quelle{display:block;margin-top:.5rem;font-size:.75rem;color:#8a8a8a}
.ig-tabelle{width:100%;border-collapse:collapse;font-size:.92rem}
.ig-tabelle th,.ig-tabelle td{text-align:left;vertical-align:top;padding:.7rem .6rem;border-bottom:1px solid var(--linie,#2A2A2A)}
.ig-tabelle thead th{color:var(--gelb,#FFE000);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase}
.ig-tabelle tbody th{font-weight:700;color:var(--weiss,#fff);width:24%}
.ig-tabelle td{color:var(--grau,#B9B9B9)}
@media(max-width:44rem){.ig-tabelle thead{display:none}.ig-tabelle tr{display:block;border-bottom:1px solid var(--linie,#2A2A2A);padding:.6rem 0}.ig-tabelle th,.ig-tabelle td{display:block;border:0;padding:.2rem 0;width:auto}.ig-tabelle td::before{content:attr(data-rolle);display:block;color:var(--gelb,#FFE000);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;margin-top:.4rem}}
.ig-schritte{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:.75rem;grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:52rem){.ig-schritte{grid-template-columns:1fr}}
.ig-schritte li{position:relative;background:var(--schwarz,#0B0B0B);border-left:3px solid var(--gelb,#FFE000);padding:.85rem .9rem}
.ig-schritte b{display:block;font-weight:900;font-size:1rem;margin-bottom:.3rem}
.ig-schritte span{display:block;font-size:.88rem;line-height:1.4;color:var(--grau,#B9B9B9)}
.ig-schritte em{display:block;font-style:normal;font-size:.8rem;color:var(--gelb,#FFE000);margin-top:.45rem}
.ig-check{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.ig-check li{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;align-items:start;background:var(--schwarz,#0B0B0B);padding:.75rem .9rem}
.ig-check li::before{content:"";width:1.4rem;height:1.4rem;border:2px solid var(--gelb,#FFE000);border-radius:3px;margin-top:.1rem;background:linear-gradient(var(--gelb,#FFE000),var(--gelb,#FFE000)) center/0 0 no-repeat}
.ig-check b{display:block;font-weight:900}
.ig-check span{color:var(--grau,#B9B9B9);font-size:.9rem;line-height:1.45}
.ig-kurve{width:100%;height:auto;display:block;margin:0 0 1rem}
@media(min-width:44.01rem) and (max-width:60rem){.ig-raster[style*="--spalten:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:44rem){.ig-tabelle tbody th{width:auto;font-size:1rem;color:var(--weiss,#fff)}}

/* ---------- Blog (09.10.2026) ---------- */
.blog-artikel{padding-bottom:clamp(2rem,5vw,4rem)}
.artikel-kopf{max-width:56rem;padding-top:.2rem;padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.artikel-kopf .eyebrow{display:block;margin-top:1.6rem}
.artikel-kopf h1{margin-top:.8rem;font-size:clamp(1.7rem,1.1rem + 3vw,3rem);overflow-wrap:break-word}
.vorspann{font-family:var(--serif);font-size:clamp(1.12rem,1rem + .6vw,1.35rem);line-height:1.6;margin-top:1.3rem;text-wrap:pretty}
.artikel-meta{margin-top:1.2rem;font-size:.88rem;color:var(--grau)}
.artikel-meta a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.artikel-meta a:hover{color:var(--weiss)}
.artikel-hero{margin:0 auto clamp(2rem,5vw,3.2rem);max-width:67rem}
.artikel-hero img,.artikel-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:6px;background:var(--flaeche)}
.artikel-hero figcaption,.artikel-bild figcaption{margin-top:.6rem;font-size:.85rem;line-height:1.5;color:var(--grau)}
.artikel-raster{display:block}
@media(min-width:64rem){
  .artikel-raster{display:grid;grid-template-columns:13rem minmax(0,44rem);gap:clamp(2rem,4vw,4rem);justify-content:center}
}
.toc-mobil{border:1px solid var(--linie);border-radius:6px;padding:.2rem 1rem;margin-bottom:2rem;background:var(--flaeche)}
.toc-mobil summary{cursor:pointer;font-weight:700;padding:.7rem 0;min-height:44px;display:flex;align-items:center}
.toc-mobil ol,.toc-seite ol{list-style:none;padding:0;margin:0 0 .8rem}
.toc-mobil li a,.toc-seite li a{display:block;padding:.4rem 0;color:var(--weiss);text-decoration:none;font-size:.92rem;line-height:1.35}
.toc-mobil li a:hover,.toc-seite li a:hover{color:var(--gelb)}
.toc-seite{display:none}
.toc-titel{font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gelb);margin-bottom:.6rem}
@media(min-width:64rem){
  .toc-mobil{display:none}
  .toc-seite{display:block;position:sticky;top:5.5rem;max-height:calc(100vh - 7rem);overflow:auto;border-left:2px solid var(--linie);padding-left:1rem}
  .toc-seite li a{color:var(--grau)}
}
.artikel-text{min-width:0;overflow-wrap:break-word}
.artikel-text>p,.artikel-text>ul,.artikel-text>ol{font-family:var(--serif);font-size:1.1rem;line-height:1.72}
.artikel-text>p+p,.artikel-text>p+ul,.artikel-text>p+ol,.artikel-text>ul+p,.artikel-text>ol+p{margin-top:1.1em}
.artikel-text>ul,.artikel-text>ol{padding-left:1.4rem}
.artikel-text>ul li+li,.artikel-text>ol li+li{margin-top:.5em}
.artikel-text h2{margin:2.8rem 0 1rem;scroll-margin-top:5rem}
.artikel-text a{color:var(--gelb);text-underline-offset:.15em}
.artikel-text a:hover{color:var(--weiss)}
.artikel-text strong{font-weight:700}
.auf-einen-blick{border:2px solid var(--gelb);border-radius:6px;padding:clamp(1.1rem,3vw,1.6rem);margin:2rem 0;background:var(--flaeche)}
.auf-einen-blick h2{margin:0 0 .8rem;font-size:clamp(1.1rem,1rem + .6vw,1.35rem);scroll-margin-top:5rem}
.auf-einen-blick ul{padding-left:1.2rem;font-size:1rem;line-height:1.55}
.auf-einen-blick li+li{margin-top:.55rem}
.auf-einen-blick li::marker{color:var(--gelb)}
.pull-quote{margin:2.4rem 0;padding:.4rem 0 .4rem 1.3rem;border-left:4px solid var(--gelb)}
.pull-quote p{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.1rem + .9vw,1.6rem);line-height:1.45;color:var(--weiss)}
.artikel-bild{margin:2.4rem 0}
.tabelle-rahmen{margin:1.8rem 0;overflow-x:auto}
.artikel-text .tabelle td{font-size:.95rem;line-height:1.45;vertical-align:top}
.artikel-text .tabelle th{color:var(--gelb)}
.artikel-text details.faq .antwort{max-width:none}
.artikel-text details.faq .antwort p+p{margin-top:.8em}
.artikel-text .ig{margin:2.6rem 0}
.artikel-text .ig h3{margin:0 0 .5rem}
.teilen{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem}
.teilen-titel{font-weight:600;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gelb)}
.teilen ul{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;list-style:none;padding:0;margin:0}
.teilen a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem}
.teilen .link-knopf{font-size:.95rem}
.teilen-status{font-size:.85rem;color:var(--grau);flex-basis:100%}
.teilen-status:empty{display:none}
.buchbox{display:grid;grid-template-columns:minmax(6rem,9rem) 1fr;gap:clamp(1rem,3vw,1.8rem);align-items:center;margin:2.6rem 0;padding:clamp(1.1rem,3vw,1.6rem);background:var(--flaeche);border:1px solid #2A2D33;border-radius:8px}
.buchbox img{filter:drop-shadow(0 14px 24px rgba(0,0,0,.55))}
.buchbox .eyebrow{display:block}
.buchbox h3{margin-top:.4rem;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem)}
.buchbox-untertitel{font-family:var(--serif);font-style:italic;color:var(--grau);margin-top:.3rem;line-height:1.45}
.buchbox-aktionen{margin-top:1rem}
.buchbox-links{margin-top:.6rem;font-size:.95rem}
.buchbox-links a{display:inline-block;padding:.35rem 0}
.buchbox-preis{margin-top:.5rem;font-size:.85rem;color:var(--grau)}
@media(max-width:30rem){.buchbox{grid-template-columns:1fr}.buchbox picture{max-width:8rem}}
.autorbox{display:grid;grid-template-columns:7rem 1fr;gap:1.2rem;align-items:start;margin-top:2.6rem;padding:0;border-top:1px solid var(--linie);padding-top:1.6rem}
.autorbox img{border-radius:50%}
.autorbox h2{margin:0 0 .6rem;font-size:clamp(1.1rem,1rem + .6vw,1.35rem)}
.autorbox p{font-family:var(--serif);line-height:1.6;color:var(--weiss)}
.autorbox p+p{margin-top:.6rem;font-family:var(--sans)}
@media(max-width:30rem){.autorbox{grid-template-columns:5rem 1fr}}
section.blog-verwandt{padding-top:clamp(2rem,5vw,3rem)}
.blog-verwandt h2{margin-bottom:1.4rem}
.blog-raster{display:grid;gap:clamp(1rem,2.5vw,1.8rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
.blog-karte{background:var(--flaeche);border:1px solid #2A2D33;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.blog-karte:hover{border-color:var(--gelb)}
.blog-karte-bild{display:block}
.blog-karte-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.blog-karte-text{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.blog-karte h2,.blog-karte h3{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);line-height:1.25;overflow-wrap:break-word}
.blog-karte h2 a,.blog-karte h3 a{color:var(--weiss);text-decoration:none}
.blog-karte h2 a:hover,.blog-karte h3 a:hover{color:var(--gelb)}
.blog-karte-text p{font-size:.95rem;line-height:1.5;color:var(--grau)}
.blog-karte-text .blog-karte-meta{margin-top:auto;font-size:.82rem}
.blog-liste{display:grid;gap:clamp(1rem,2.5vw,1.8rem)}
.blog-karte--haupt h2{font-size:clamp(1.35rem,1.1rem + 1.4vw,2rem)}
@media(min-width:52rem){
  .blog-karte--haupt{display:grid;grid-template-columns:1.25fr 1fr}
  .blog-karte--haupt .blog-karte-bild img{height:100%}
  .blog-karte--haupt .blog-karte-text{padding:clamp(1.4rem,3vw,2.2rem);justify-content:center}
}
section.blog-beitraege{padding-top:0}
.rubrik-anker{display:block;position:relative;top:-6rem;visibility:hidden}
.rubrik-filter ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0 0 1.6rem}
.rubrik-filter a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .95rem;border:1px solid var(--linie);border-radius:999px;color:var(--weiss);text-decoration:none;font-size:.9rem;font-weight:600}
.rubrik-filter a:hover{border-color:var(--gelb);color:var(--gelb)}
.blog-beitraege:has(#rubrik-berufsbild:target) .blog-karte:not([data-rubrik=berufsbild]),
.blog-beitraege:has(#rubrik-unternehmen:target) .blog-karte:not([data-rubrik=unternehmen]),
.blog-beitraege:has(#rubrik-weiterbildung:target) .blog-karte:not([data-rubrik=weiterbildung]),
.blog-beitraege:has(#rubrik-das-buch:target) .blog-karte:not([data-rubrik=das-buch]){display:none}
.blog-beitraege:has(#rubrik-berufsbild:target) .rubrik-filter a[href="#rubrik-berufsbild"],
.blog-beitraege:has(#rubrik-unternehmen:target) .rubrik-filter a[href="#rubrik-unternehmen"],
.blog-beitraege:has(#rubrik-weiterbildung:target) .rubrik-filter a[href="#rubrik-weiterbildung"],
.blog-beitraege:has(#rubrik-das-buch:target) .rubrik-filter a[href="#rubrik-das-buch"]{background:var(--gelb);border-color:var(--gelb);color:var(--schwarz)}
section.blog-buch{padding-top:clamp(1rem,3vw,2rem)}
.artikel-text .btn-gelb,.buchbox .btn-gelb{color:var(--schwarz);text-decoration:none}
.artikel-text .btn-gelb:hover,.buchbox .btn-gelb:hover{color:var(--schwarz)}
.artikel-text li a,.artikel-text p a{overflow-wrap:anywhere}
@media(max-width:30rem){.artikel-text .tabelle th,.artikel-text .tabelle td{padding:.6rem .45rem}.artikel-text .tabelle th{letter-spacing:.06em}}
@media(min-width:40rem){.blog-liste .blog-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Startseite v2 (09.10.2026) ---------- */
.hero-links{margin-top:1rem;font-size:1rem;color:var(--grau)}
.hero-links a{display:inline-block;padding:.35rem 0;color:var(--weiss);text-underline-offset:.2em}
.hero-links a:hover{color:var(--gelb)}
.haendler-kompakt{display:inline-flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.2rem;color:var(--grau);text-decoration:none;font-size:.9rem}
.haendler-kompakt img{width:160px;max-width:40vw;height:auto}
.haendler-kompakt:hover .haendler-kompakt-zeile{color:var(--gelb)}
.haendler-kompakt-zeile{text-decoration:underline;text-underline-offset:.2em}
.definition{font-family:var(--serif);font-size:clamp(1.12rem,1rem + .6vw,1.3rem);line-height:1.65}
.definition dfn{font-style:normal;font-weight:700;color:var(--gelb)}
.definition-felder{margin-top:1.8rem}
.definition-felder .karte{padding:1.1rem 1.2rem}
.definition-felder h3{color:var(--gelb)}
.definition-felder p{margin-top:.4rem;color:var(--grau);font-size:.95rem;line-height:1.5}
.definition-link{margin-top:1.6rem}
/* Selbsttest */
.selbsttest{margin-top:.5rem}
.st-feld{border:0;margin:0 0 1.6rem;padding:0;min-width:0}
.st-feld-titel{font-weight:600;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gelb);margin-bottom:.6rem}
.st-liste{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.st-aussage{border:1px solid var(--linie);border-radius:6px;padding:.9rem 1rem;margin:0;min-width:0;background:var(--flaeche)}
.st-aussage legend{float:left;width:100%;font-family:var(--serif);font-size:1.05rem;line-height:1.5}
.st-wahl{clear:both;display:flex;flex-wrap:wrap;gap:.4rem .6rem;padding-top:.7rem}
.st-option{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.35rem .8rem;border:1px solid var(--linie);border-radius:999px;cursor:pointer;font-size:.9rem;font-weight:600}
.st-option input{accent-color:var(--gelb);width:1.05rem;height:1.05rem;margin:0;padding:0;border:0}
/* Chromium wendet Rahmen und Innenabstand der allgemeinen input-Regel beim Fokus auf das Radio an:
   es wird 36 px breit, die Optionen brechen um und ein Mausklick landet daneben (09.10.2026) */
.st-option input:focus{box-shadow:none}
.st-option:has(input:checked){border-color:var(--gelb);background:rgba(255,224,0,.12)}
.st-option:has(input:focus-visible){outline:3px solid var(--gelb);outline-offset:2px}
.st-ergebnis{margin-top:1.4rem;padding:clamp(1.1rem,3vw,1.6rem);border:2px solid var(--gelb);border-radius:8px;background:var(--flaeche)}
.st-balken-gruppe{display:grid;gap:.55rem;margin-bottom:1.2rem}
.st-balken{display:grid;grid-template-columns:6.5rem 1fr 3rem;align-items:center;gap:.6rem;font-size:.88rem}
.st-balken-spur{height:.55rem;background:var(--linie);border-radius:99px;overflow:hidden}
.st-balken-wert{display:block;height:100%;width:0;background:var(--gelb);transition:width .25s}
.st-balken-zahl{text-align:right;color:var(--grau);font-variant-numeric:tabular-nums}
.st-stufe-name{font-weight:900;font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);color:var(--gelb)}
.st-stufe p+p{margin-top:.5rem}
.st-stufe-links a{display:inline-block;padding:.3rem 0}
.st-ergebnis .hinweis{margin-top:1rem}
.st-teilen-status{font-size:.85rem;color:var(--grau)}
.st-teilen-status:empty{display:none}
.st-statisch{margin-top:1rem;overflow-x:auto}
.st-auswertung td{vertical-align:top;font-size:.92rem;line-height:1.5}
.st-auswertung td a{display:inline-block;padding:.2rem 0}
/* Themen-Widget "Aus dem Blog" */
.bw{display:grid;gap:clamp(1rem,2.5vw,1.8rem)}
.bw-haupt{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin}
.bw-haupt-karte{flex:0 0 min(85%,22rem);scroll-snap-align:start;background:var(--flaeche);border:1px solid #2A2D33;border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.bw-bild{display:block}
.bw-bild img{width:100%;aspect-ratio:3/2;object-fit:cover}
.bw-text{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.45rem}
.bw-text h3{font-size:clamp(1.05rem,1rem + .5vw,1.4rem);line-height:1.25}
.bw-text h3 a,.bw-liste a{color:var(--weiss);text-decoration:none}
.bw-text h3 a:hover,.bw-liste a:hover .bw-liste-titel{color:var(--gelb)}
.bw-text p{color:var(--grau);font-size:.95rem;line-height:1.5}
.bw-liste,.bw-punkte{display:none}
.bw-alle{margin-top:1.6rem}
@media(min-width:56rem){
  .bw{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .bw-haupt{display:grid;overflow:visible;padding:0}
  .bw-haupt-karte{grid-area:1/1;transition:opacity .4s;opacity:1}
  .bw-haupt-karte:not(.aktiv){visibility:hidden;opacity:0}
  .bw-liste{display:grid;gap:.7rem;list-style:none;padding:0;margin:0}
  .bw-liste a{display:grid;grid-template-columns:7rem 1fr;gap:.9rem;align-items:center;padding:.55rem;border:1px solid transparent;border-radius:8px}
  .bw-liste li[aria-current] a{border-color:var(--gelb)}
  .bw-mini img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:4px}
  .bw-liste-text{display:flex;flex-direction:column;gap:.25rem}
  .bw-liste-text .eyebrow{font-size:.66rem}
  .bw-liste-titel{font-weight:700;line-height:1.3;font-size:.98rem}
  .bw-punkte:not([hidden]){display:flex;gap:.2rem;grid-column:1}
  .bw-punkt{width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
  .bw-punkt::after{content:"";position:absolute;inset:50% auto auto 50%;width:.7rem;height:.7rem;margin:-.35rem 0 0 -.35rem;border-radius:50%;border:2px solid var(--grau)}
  .bw-punkt[aria-pressed=true]::after{background:var(--gelb);border-color:var(--gelb)}
}
/* Podcast-Folgen */
.podcast-folge h3 a{color:var(--weiss);text-decoration:none}
.podcast-folge h3 a:hover{color:var(--gelb)}
.podcast-folge p{margin-top:.5rem;color:var(--grau)}
.definition-felder{grid-template-columns:repeat(auto-fit,minmax(min(100%,11.5rem),1fr))}
section#was-ist-ein-ki-coach{padding-bottom:clamp(1.5rem,1rem + 2vw,2.5rem)}
section#was-ist-ein-ki-coach+section#worum{padding-top:clamp(2.3rem,1.6rem + 3vw,4.2rem)}

/* Autorenseite: Beitraege im Blog (09.10.2026) */
.autor-beitraege-liste{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;max-width:46rem}
.autor-beitraege-liste li{border-top:1px solid var(--linie);padding-top:1.1rem}
.autor-beitraege-liste h3{margin:0 0 .4rem;font-size:clamp(1.1rem,1rem + .6vw,1.35rem)}
.autor-beitraege-liste p{margin:0;font-family:var(--serif);line-height:1.6;color:var(--grau)}
.autor-beitraege-liste h3 a{color:var(--weiss);text-decoration:none}
.autor-beitraege-liste h3 a:hover,.autor-beitraege-liste h3 a:focus-visible{color:var(--gelb);text-decoration:underline;text-underline-offset:.15em}