/* Philosophia · Ratgeber · aus dem Handover vom 20.10.2026 mit Nachtrag vom 21.10.2026
   (docs/design/handover-nachtrag-21-10/vorlage/ratgeber.css). Unverändert übernommen;
   ergänzt sind nur die selbst gehosteten Schriften der Website (statt Google Fonts).
   Breakpoint: Container .page ab 720 px, wie geliefert. */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/5.3.0/eb-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/5.3.0/eb-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/5.3.0/eb-garamond-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/5.3.0/eb-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/5.3.0/eb-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/5.3.0/eb-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --tinte:#2A251D; --papier:#F5F1E8; --blatt:#FFFEFA; --sand:#EFE8DA;
  --bronze:#7E6849; --bronze-dunkel:#6E5A3E; --stein:#756B5C; --sepia:#4A4335; --nebel:#A79C8A;
  --gold-auf-tinte:#C9B795; --hell-auf-tinte:#E6DDCB;
  --linie:rgba(42,37,29,.12); --linie-stark:rgba(42,37,29,.22); --rahmen:rgba(42,37,29,.13);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:'EB Garamond',Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:var(--bronze-dunkel);text-decoration:none}
a:hover{color:var(--tinte)}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page{container:page / inline-size;min-height:100vh;background:var(--papier);color:var(--tinte);font-family:'EB Garamond',Georgia,serif}
.col{width:min(100% - 40px,680px);margin-inline:auto}
.col-breit{width:min(100% - 40px,820px);margin-inline:auto}
.wide{width:min(100% - 40px,1080px);margin-inline:auto}

/* 1 · Kopf */
.nav{position:sticky;top:0;z-index:20;background:rgba(245,241,232,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(42,37,29,.08)}
.nav-in{max-width:1160px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:var(--tinte)}
.brand svg{width:28px;height:28px;flex:none}
.brand span{font-size:21px;font-weight:600;letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-size:17px;color:var(--sepia)}
.nav-links a.aktiv{color:var(--tinte);border-bottom:1px solid rgba(42,37,29,.4);padding-bottom:1px}
.nav-links .cta{background:var(--tinte);color:var(--papier);border-radius:999px;padding:9px 18px}
.nav-links .nur-breit{display:none}

/* 2 · Brotkrumen */
.crumbs{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:24px;font-size:14px;color:var(--stein)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px;min-width:0}
.crumbs li{min-width:0}
.crumbs li+li::before{content:'›';margin-right:6px}
.crumbs a{color:var(--stein)}
.crumbs a:hover{color:var(--tinte)}
.crumbs .sprache{flex:none;color:var(--bronze-dunkel)}

/* 3–6 · Kicker, Titel, Einleitung, Kurzantwort, Meta */
.kicker{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);font-weight:400;margin:0;line-height:1.4}
.head{margin-top:36px}
.titel{font-size:34px;line-height:1.14;font-weight:600;margin:12px 0 0;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.einleitung{font-size:19.5px;line-height:1.55;color:var(--sepia);margin:16px 0 0;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.kurz{margin-top:28px;padding:20px 0 22px;border-top:1px solid var(--linie-stark);border-bottom:1px solid var(--linie-stark)}
.kurz .antwort{font-size:21px;line-height:1.45;margin:8px 0 0;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.meta{font-size:14px;color:var(--stein);margin:14px 0 0}

/* 7 · Bedeutung */
.text{margin-top:20px}
.text h2{font-size:24px;line-height:1.25;font-weight:600;margin:40px 0 12px;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
.text p{font-size:18.5px;line-height:1.62;margin:0 0 18px;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}

/* 7a · Leise Einladung */
.leise{margin:30px 0 0;padding:16px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font-size:17px;line-height:1.5;color:var(--sepia);text-wrap:pretty}
.leise a{border-bottom:1px solid rgba(110,90,62,.5);white-space:nowrap}

/* 8 · Zitat */
.zitat{margin:56px 0 0;text-align:center}
.zitat blockquote{margin:0;font-size:24px;line-height:1.4;font-style:italic;text-wrap:balance}
.zitat figcaption{font-size:14.5px;line-height:1.45;color:var(--stein);margin-top:12px}

/* 9 · Übung */
.uebung{margin-top:56px;background:var(--blatt);border:1px solid var(--rahmen);border-radius:20px;padding:24px 22px 12px}
.uebung h2{margin:0 0 6px}
.uebung ol{list-style:none;margin:0;padding:0}
.uebung li{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:12px 0;border-top:1px solid var(--linie);font-size:18.5px;line-height:1.5;text-wrap:pretty}
.uebung li:first-child{border-top:0}
.uebung li .n{color:var(--bronze);font-weight:600;font-variant-numeric:oldstyle-nums}

/* 10 · Drei Schreibanregungen */
.anregungen{margin-top:56px}
.anregungen ul{list-style:none;margin:14px 0 0;padding:0}
.anregungen li{font-size:22px;line-height:1.4;font-style:italic;padding:18px 0;border-top:1px solid var(--linie);text-wrap:pretty}
.anregungen li:last-child{border-bottom:1px solid var(--linie)}
.anregungen .unter{font-size:16px;line-height:1.5;color:var(--stein);margin:12px 0 0}

/* 11 · Hinweis bei heiklen Themen */
.hinweis{margin-top:36px;background:var(--sand);border-radius:16px;padding:18px 20px}
.hinweis p{margin:0;font-size:16.5px;line-height:1.55;color:var(--sepia);text-wrap:pretty}

/* 11 · Hinweis: Nummern (Nachtrag 21.10.) */
.hinweis .nummern{margin:12px 0 0;padding:0}
.hinweis .nummern div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 12px;padding:9px 0;border-top:1px solid var(--linie)}
.hinweis .nummern dt{font-size:14px;line-height:1.5;color:var(--bronze-dunkel);padding-top:2px}
.hinweis .nummern dd{margin:0;font-size:16.5px;line-height:1.5;color:var(--tinte)}
.hinweis .nummern a{color:var(--tinte);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;border-bottom:1px solid rgba(42,37,29,.3)}
@container page (max-width:340px){ .hinweis .nummern div{grid-template-columns:1fr} }

/* Horizontlinie vor Teil 12 */
.horizont{position:relative;height:16px;width:min(100% - 40px,680px);margin:64px auto 0}
.horizont::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(42,37,29,.18)}
.horizont::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--tinte)}

/* 12 · Einladung in die App */
.einladung{margin-top:28px;background:var(--tinte);color:var(--papier);border-radius:24px;padding:30px 22px 28px}
.einladung .kicker{color:var(--gold-auf-tinte)}
.einladung h2{font-size:30px;line-height:1.2;font-weight:600;margin:10px 0 0;text-wrap:balance}
.einladung p{font-size:18px;line-height:1.55;color:var(--hell-auf-tinte);margin:12px 0 0;text-wrap:pretty}
.einstieg{margin-top:22px;background:var(--blatt);color:var(--tinte);border-radius:14px;padding:16px 18px}
.einstieg .label{font-size:14px;color:var(--stein);line-height:1.4}
.einstieg .zeile{font-size:19px;font-style:italic;line-height:1.45;margin-top:6px;color:var(--tinte)}
.einstieg .cursor{display:inline-block;width:1.5px;height:1.05em;background:var(--tinte);vertical-align:-.15em;margin-left:3px}
.knopf{display:inline-block;margin-top:24px;background:var(--papier);color:var(--tinte);border:0;border-radius:999px;padding:15px 28px;font:inherit;font-size:18.5px;cursor:pointer}
.knopf:hover{background:#fff;color:var(--tinte)}
.einladung .klein{font-size:15px;line-height:1.5;color:var(--gold-auf-tinte);margin-top:14px}
.warteliste{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.warteliste input{font:inherit;font-size:18px;border:0;border-radius:999px;padding:14px 20px;background:var(--blatt);color:var(--tinte);min-width:0}
.warteliste input::placeholder{color:var(--stein)}
.warteliste .knopf{margin-top:0}

/* 13 · Weiterlesen, Karten */
.weiterlesen{width:min(100% - 40px,1080px);margin:64px auto 0}
.karten{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.karte{display:block;background:var(--blatt);border:1px solid var(--rahmen);border-radius:16px;padding:18px 20px;color:var(--tinte)}
.karte:hover{border-color:rgba(42,37,29,.3);color:var(--tinte)}
.karte .k{display:block;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);line-height:1.4}
.karte .t{display:block;font-size:20px;line-height:1.3;font-weight:600;margin-top:8px;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
.karte .s{display:block;font-size:16.5px;line-height:1.5;color:var(--sepia);margin-top:6px;text-wrap:pretty}

/* B · Übersicht */
.themen{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.themen a{font-size:16px;background:var(--sand);color:var(--tinte);border-radius:999px;padding:8px 15px}
.themen a:hover{background:#E6DDCB}
.abschnitt{margin-top:56px}
.gruppe{margin-top:56px;scroll-margin-top:80px}
.gruppe-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--linie-stark)}
.gruppe-kopf h2{font-size:26px;line-height:1.2;font-weight:600;margin:0}
.gruppe-kopf .anz{font-size:14px;color:var(--stein);flex:none}
.liste{list-style:none;margin:0;padding:0}
.liste a{display:block;padding:16px 0;border-bottom:1px solid var(--linie);color:var(--tinte)}
.liste a:hover .t{color:var(--bronze-dunkel)}
.liste .t{display:block;font-size:19.5px;line-height:1.3;font-weight:600;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto}
.liste .s{display:block;font-size:16.5px;line-height:1.5;color:var(--sepia);margin-top:4px;text-wrap:pretty}
.alle{display:inline-block;margin-top:14px;font-size:16.5px;border-bottom:1px solid rgba(110,90,62,.5)}
.hinweis-neu{font-size:16px;color:var(--stein);margin:18px 0 0;line-height:1.5}

/* C · Startseite */
.zw{width:min(100% - 40px,1080px);margin:72px auto 0}
.zw-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.zw-kopf h2{font-size:30px;line-height:1.2;font-weight:600;margin:8px 0 0}
.zw-kopf a{font-size:17px;border-bottom:1px solid rgba(110,90,62,.5)}
.platzhalter{width:min(100% - 40px,1080px);margin:40px auto 0;border:1px dashed rgba(42,37,29,.3);border-radius:24px;padding:40px 20px;text-align:center;font-size:16px;color:var(--stein)}

/* 14 · Fuss */
.fuss{width:min(100% - 40px,1160px);margin:72px auto 0;padding:40px 0 44px;border-top:1px solid rgba(42,37,29,.1);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.fuss .brand svg{width:26px;height:26px}
.fuss .brand span{font-size:20px}
.fuss .claim{font-size:17px;font-style:italic;color:var(--stein);margin:8px 0 0}
.fuss nav{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:16px}
.fuss .copy{color:var(--stein)}

/* Silbentrennung: Titel nur lange Wörter, Fliesstext ab 10 Zeichen */
.titel,.text h2,.karte .t,.liste .t,.einladung h2,.zw-kopf h2{hyphenate-limit-chars:14 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6}
.einleitung,.text p,.kurz .antwort{hyphenate-limit-chars:10 4 4}

/* Sehr schmal (z. B. 130 % Zoom auf dem Handy): nur der aktive Navigationspunkt */
@container page (max-width:359px){
  .nav-links a:not(.aktiv):not(.cta){display:none}
  .brand span{font-size:19px}
}

/* Desktop */
@container page (min-width:720px){
  .nav-in{padding:14px 48px}
  .nav-links .nur-breit{display:inline}
  .crumbs{margin-top:32px}
  .head{margin-top:52px}
  .titel{font-size:50px;line-height:1.1}
  .einleitung{font-size:22px}
  .kurz .antwort{font-size:24px}
  .text p{font-size:20px;line-height:1.65}
  .text h2{font-size:28px;margin-top:48px}
  .leise{font-size:18px}
  .zitat blockquote{font-size:28px}
  .uebung{padding:30px 34px 16px}
  .uebung li{font-size:19.5px}
  .anregungen li{font-size:24px}
  .einladung{padding:44px 52px 40px}
  .einladung h2{font-size:36px}
  .warteliste{flex-direction:row}
  .warteliste input{flex:1}
  .karten{grid-template-columns:repeat(3,1fr);gap:16px}
  .gruppe-kopf h2{font-size:30px}
  .zw-kopf h2{font-size:36px}
  .fuss{padding:48px 0}
}

/* Ergänzung Story 13.4 (21.10.2026), nicht im Handover: Links im Fliesstext
   sind nicht nur an der Farbe erkennbar (Lighthouse „link-in-text-block“).
   Gleicher Stil wie der Link der leisen Einladung (Teil 7a). */
.text a{border-bottom:1px solid rgba(110,90,62,.5)}