/* ===========================================================
   erhanguengoer.com — gemeinsames Stylesheet
   Display: Trirong 700 (thailaendische Serif) · Text: Inter
   Zwei Grundflaechen: Ink (dunkel) und Paper (hell), Akzent = Markenrot aus dem EG-Logo.
   =========================================================== */

@font-face{font-family:'Trirong';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/trirong-700-latin.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:'Trirong';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/trirong-700-latinext.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:'Trirong';font-style:italic;font-weight:500;font-display:swap;
src:url('fonts/trirong-500i-latin.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:'Trirong';font-style:italic;font-weight:500;font-display:swap;
src:url('fonts/trirong-500i-latinext.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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/inter-latin.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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
src:url('fonts/inter-latinext.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}

:root{
  --ink:#131317; --ink2:#1b1b21; --ink3:#26262e;
  --paper:#f3f0e9; --paper2:#e9e5da;
  /* Markenrot aus dem EG-Logo. --acc traegt Grafik und Grosstext (3:1 erfuellt),
     fuer Kleintext braucht es die abgestuften Varianten (beide 4.56:1). */
  --acc:#ED1C24; --acc-tx:#D91119; --accd:#EF3138;
  --mut:#5d574e; --mutd:#a59e94;
  --line:#dcd7cb; --lined:#2f2f38;
  --disp:'Trirong','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Inter',ui-sans-serif,system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --bar:58px;
}
/* Unter 760px bricht die Navigation in eine zweite Zeile um, die Leiste ist dann
   hoeher. --bar traegt alle Abstaende darunter, deshalb hier nachziehen. */
@media(max-width:759px){:root{--bar:92px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--accd);outline-offset:3px}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.light{background:var(--paper);color:var(--ink)}
.dark{background:var(--ink);color:var(--paper)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);color:var(--ink);padding:10px 16px}

.kick{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accd);margin:0 0 22px}
.kick::before{content:"";width:34px;height:2px;background:var(--accd)}
.light .kick{color:var(--acc-tx)}
.light .kick::before{background:var(--acc)}

/* ---------- Kopfleiste ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;
  background:rgba(19,19,23,.92);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--lined);color:var(--paper)}
.bar-in{min-height:var(--bar);display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
/* Marke: EG-Monogramm der alten Website plus Wortmarke. Das Zeichen behaelt sein
   Rot; fuer dunklen Grund gibt es eine Fassung, in der nur die schwarzen Flaechen
   aufgehellt sind (eg-logo-dark.png). Original mit Schwarz: eg-logo.png. */
.bar-brand{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap}
/* In der Leiste steht das Zeichen einfarbig; bei Hover, Tastaturfokus und Klick
   blendet die zweifarbige Fassung mit dem Markenrot darueber. */
.bar-mark{position:relative;display:block;width:26px;flex:none;line-height:0}
.bar-mark img{width:100%;height:auto;display:block;transition:opacity .18s}
.bar-mark .m2{position:absolute;inset:0;opacity:0}
.bar-brand:hover .m2,.bar-brand:focus-visible .m2,.bar-brand:active .m2{opacity:1}
.bar-brand:hover .m1,.bar-brand:focus-visible .m1,.bar-brand:active .m1{opacity:0}
.bar-name{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:.005em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:18px;font-size:13.5px;font-weight:500;order:3;width:100%;
  border-top:1px solid var(--lined);padding-top:8px;margin-top:2px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--mutd);text-decoration:none;white-space:nowrap;padding-bottom:2px}
.nav a:hover{color:var(--paper)}
.nav a[aria-current]{color:var(--paper);border-bottom:2px solid var(--acc)}
@media(min-width:760px){
  .bar-in{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
  .nav{order:2;width:auto;border-top:0;padding-top:0;margin-top:0;margin-right:auto;gap:22px}
}
.lang{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.1em;margin-left:auto;order:2}
@media(min-width:760px){.lang{order:3;margin-left:0}}
.lang a,.lang span{text-decoration:none;padding:5px 8px;line-height:1;border-radius:2px}
.lang .is{color:var(--ink);background:var(--paper)}
.lang a{color:var(--mutd)}
.lang a:hover{color:var(--paper);background:var(--ink3)}
.lang .sep{color:var(--lined);padding:0}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accd);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- Hero ---------- */
.hero{padding:calc(var(--bar) + clamp(52px,9vw,96px)) 0 clamp(40px,7vw,80px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lined)}
.hero-in{display:grid;gap:clamp(32px,5vw,56px);align-items:end}
@media(min-width:900px){.hero-in{grid-template-columns:1fr minmax(0,420px)}}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(44px,8.6vw,102px);line-height:1.02;
  letter-spacing:-.02em;margin:0}
.hero h1.small{font-size:clamp(36px,6vw,68px)}
.tagline{font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(22px,3.6vw,36px);
  line-height:1.24;color:var(--paper);margin:20px 0 0;max-width:19ch}
.standfirst{color:var(--mutd);font-size:16px;max-width:46ch;margin:24px 0 0;border-left:2px solid var(--acc);padding-left:16px}
.hero-fig{margin:0;position:relative}
.hero-fig img{width:100%;filter:grayscale(.35) contrast(1.05)}
.hero-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,19,23,.35) 0%,rgba(19,19,23,0) 45%,rgba(19,19,23,.55) 100%)}
.cue{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mutd);text-decoration:none}
.cue svg{transition:transform .3s}
.cue:hover svg{transform:translateY(3px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- Startseite: eigener Auftritt ----------
   Die Story fuehrt mit Eyebrow, Namen, kursiver Zeile und einem Portraet daneben.
   Die Startseite laesst all das weg: nur der Name, direkt darunter der Absatz.
   Das Foto liegt als Hintergrund dahinter und ist nach rechts versetzt; nach
   links laeuft ein Verlauf ins Ink aus, damit der Text darauf lesbar bleibt.
   Der Streifen ist bewusst flacher als der Story-Hero. */
.hero-home{position:relative;overflow:hidden;background:var(--ink);
  display:flex;align-items:center;
  min-height:clamp(400px,52vh,520px);
  padding:calc(var(--bar) + 44px) 0 48px}
.hero-home::after{display:none}
.hero-home > .wrap{position:relative;z-index:1}
.hero-home .in{max-width:min(48%,540px)}
.hero-home h1{font-size:clamp(40px,5.6vw,76px)}
.hero-home .standfirst{max-width:42ch;font-size:16.5px;margin-top:24px}
.hero-home .hero-cta{margin-top:26px}
/* EG-Zeichen rechts neben dem Namen. Die H1 faellt dafuer etwas kleiner aus,
   damit Name und Zeichen zusammen in die linke Spalte passen. */
.hero-head{display:flex;align-items:center;gap:clamp(22px,3.2vw,44px)}
.hero-head h1{font-size:clamp(34px,4.4vw,58px)}
.hero-mark{flex:none;width:clamp(48px,5.6vw,78px)}
.hero-mark img{width:100%;height:auto;display:block}
@media(max-width:520px){.hero-mark{width:44px}}

.hero-bg{position:absolute;inset:0 0 0 auto;width:80%;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 28%}
.hero-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    var(--ink) 0%,
    rgba(19,19,23,.97) 18%,
    rgba(19,19,23,.88) 38%,
    rgba(19,19,23,.58) 58%,
    rgba(19,19,23,.22) 80%,
    rgba(19,19,23,.36) 100%)}

@media(max-width:900px){
  .hero-home{min-height:auto;align-items:stretch;padding:calc(var(--bar) + 34px) 0 38px}
  .hero-home .in{max-width:none}
  .hero-home .standfirst{max-width:46ch}
  .hero-bg{inset:0;width:100%}
  .hero-bg img{object-position:60% 22%}
  .hero-bg::after{background:linear-gradient(180deg,
    rgba(19,19,23,.88) 0%,
    rgba(19,19,23,.78) 34%,
    rgba(19,19,23,.93) 74%,
    var(--ink) 100%)}
}

/* Zahlen auf der Startseite: eine Zeile im Textblock statt der grossen Leiste */
.statline{display:flex;flex-wrap:wrap;gap:12px 26px;margin:0 0 24px;padding:0;list-style:none}
.statline li{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--mut)}
.statline b{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--acc);letter-spacing:-.015em}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--paper);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:15px;letter-spacing:.04em;padding:15px 26px;transition:background .2s,color .2s}
.btn:hover{background:var(--accd);color:#17100e}
.btn-ghost{background:none;color:var(--paper);border:1px solid var(--lined)}
.btn-ghost:hover{background:var(--ink3);color:var(--paper);border-color:var(--accd)}
.light .btn{background:var(--ink);color:var(--paper)}
.light .btn:hover{background:var(--acc);color:#fff}

/* ---------- Zahlenleiste ---------- */
.facts{border-bottom:1px solid var(--lined)}
.facts ul{list-style:none;margin:0;padding:26px 0;display:grid;gap:24px 36px;grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.facts ul{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.facts ul{grid-template-columns:repeat(5,1fr);gap:0 34px}}
.facts li{padding:0}
.facts b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(33px,4.3vw,48px);line-height:1.05;
  color:var(--paper);letter-spacing:-.015em}
.facts span{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--mutd);
  letter-spacing:.02em;max-width:22ch}

/* ---------- Karten (drei Wege auf der Startseite) ---------- */
.paths{padding:clamp(56px,8vw,100px) 0}
.paths h2,.block h2{font-family:var(--disp);font-weight:700;font-size:clamp(27px,3.6vw,40px);
  margin:0 0 8px;letter-spacing:-.018em;line-height:1.16}
.paths .sub,.block .sub{color:var(--mut);margin:0 0 34px;font-size:16px;max-width:56ch}
.dark .paths .sub,.dark .block .sub{color:var(--mutd)}
.cards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.cards{grid-template-columns:repeat(3,1fr)}}
/* Bewusst monochrom: keine beige Fuellung, kein Terrakotta-Akzent. Die Kombination
   creme-Karte plus Rostton ist inzwischen die Signatur generierter Seiten. Hier
   traegt nur der umlaufende Haarrahmen, die Ziffer steht in Schwarz. */
.card{display:flex;flex-direction:column;background:transparent;
  border:1px solid rgba(19,19,23,.18);
  padding:24px 22px 22px;text-decoration:none;
  transition:background .2s,border-color .2s}
.card:hover{background:rgba(19,19,23,.045);border-color:rgba(19,19,23,.55)}
.card .n{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:.02em}
.card h3{font-family:var(--disp);font-weight:700;font-size:24px;margin:8px 0 8px;line-height:1.2;letter-spacing:-.015em}
.card p{margin:0;color:var(--mut);font-size:15px}
.card .go{margin-top:16px;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.02em;
  border-bottom:1px solid rgba(19,19,23,.3);align-self:flex-start;padding-bottom:2px}
.card:hover .go{border-bottom-color:var(--ink)}

/* ---------- Textblock ---------- */
.block{padding:clamp(56px,8vw,100px) 0}
.block-grid{display:grid;gap:34px}
@media(min-width:920px){.block-grid{grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:56px;align-items:start}}
.prose p{margin:0 0 18px;font-size:17.5px;line-height:1.72;max-width:62ch}
.light .prose p{color:#2b2822}
.dark .prose p{color:var(--mutd)}
.prose a{color:var(--acc-tx);text-underline-offset:3px}
.dark .prose a{color:var(--accd)}

/* ---------- Inhalt / Kapitelverzeichnis ---------- */
.toc{padding:clamp(44px,6vw,72px) 0}
.toc h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,32px);margin:0 0 24px;letter-spacing:-.01em}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:44px}
.toc li{border-top:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;
  padding:13px 0;text-decoration:none;transition:color .2s}
.toc a:hover{color:var(--acc)}
.toc .n{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--acc-tx)}
.toc .tx{font-size:15.5px;font-weight:500}

/* ---------- Kapitel ---------- */
.story{padding:clamp(20px,3vw,40px) 0 clamp(50px,7vw,90px)}
.ch{scroll-margin-top:calc(var(--bar) + 20px);padding:clamp(34px,5vw,58px) 0;border-top:1px solid var(--line)}
.ch-grid{display:grid;gap:0}
@media(min-width:1000px){.ch-grid{grid-template-columns:170px minmax(0,650px);column-gap:56px}}
.ch-head{margin:0 0 18px}
@media(min-width:1000px){.ch-head{position:sticky;top:calc(var(--bar) + 28px);align-self:start;margin:0}}
.ch-no{font-family:var(--disp);font-weight:700;font-size:38px;line-height:1;color:var(--acc);display:block;letter-spacing:-.02em}
.ch-kick{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut)}
.ch-body{max-width:650px}
.ch-body h2{font-family:var(--disp);font-weight:700;font-size:clamp(27px,3.6vw,39px);line-height:1.16;
  letter-spacing:-.018em;margin:0 0 22px}
.ch-body p{margin:0 0 20px;font-size:17.5px;line-height:1.72;color:#2b2822}
.ch-body p.lead{font-size:20.5px;line-height:1.62;color:var(--ink)}
.ch-body p.dropcap::first-letter{float:left;font-family:var(--disp);font-weight:700;font-size:68px;
  line-height:.82;padding:7px 10px 0 0;color:var(--acc)}
.ch-body p.q{font-family:var(--disp);font-style:italic;font-weight:500;font-size:clamp(21px,2.7vw,28px);
  line-height:1.34;color:var(--ink);margin:34px 0;padding-left:22px;border-left:2px solid var(--acc);max-width:26ch}
@media(min-width:1000px){.ch-body p.q{margin-left:-22px;max-width:34ch}}
.ch-body p.motto{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3.1vw,34px);letter-spacing:-.005em;
  color:var(--acc);margin:26px 0 30px}
.ch-body p.sig{font-family:var(--disp);font-style:italic;font-weight:500;font-size:24px;color:var(--mut);margin-top:34px}
.ch-body a{color:var(--acc-tx);text-underline-offset:3px}

.fig{margin:32px 0}
.fig img{width:100%}
.fig figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--mut);
  border-left:2px solid var(--line);padding-left:12px}
@media(min-width:1000px){
  .fig.side{float:right;width:250px;margin:6px -110px 24px 32px}
  .fig.side figcaption{font-size:11.5px}
}
/* Bild-Band: an der Textspalte der Kapitel ausgerichtet. Die Vorlage ist eine
   hochskalierte Datei, deshalb wird sie nie breiter als noetig ausgegeben. */
.band{margin:0;background:var(--ink);padding:30px 0 28px}
.band-grid{display:grid;gap:0}
@media(min-width:1000px){.band-grid{grid-template-columns:170px minmax(0,650px);column-gap:56px}}
.band-col{max-width:650px}
@media(min-width:1000px){.band-col{grid-column:2}}
.band img{width:100%}
.band-cap{margin:12px 0 0;color:var(--mutd);font-size:12.5px}

/* ---------- Stationen am Mongkhon ----------
   Bis 980px eine schlichte Liste mit Punkt und Linie. Darueber laufen die
   Stationen am Kopfreif entlang: die Punkte sitzen auf Positionen, die aus
   mongkhon.png (337x972) ausgemessen wurden und auf der Seilmitte liegen
   (Werte stehen in views.php). Erste Station unten links am Uebergang zum
   Zopf, dann links hoch, ueber den Bogen, rechts herunter, letzte unten rechts.
   Die Texte stehen aussen neben ihrem Punkt und zeigen zu ihm hin. */
.route{padding:clamp(56px,8vw,100px) 0}
.route h2{font-family:var(--disp);font-weight:700;font-size:clamp(27px,3.6vw,40px);margin:0 0 6px;
  letter-spacing:-.018em;text-align:center}
.route .sub{color:var(--mutd);margin:0 0 40px;font-size:15px}
.route ol{list-style:none;margin:0;padding:0}
.route li{display:grid;grid-template-columns:16px 1fr;gap:20px;padding:0 0 30px;position:relative}
.route li::before{content:"";grid-column:1;margin-top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:2px solid var(--acc);z-index:1;box-sizing:border-box}
.route li::after{content:"";position:absolute;left:5px;top:20px;bottom:-10px;width:1px;background:var(--lined)}
.route li:last-child{padding-bottom:0}
.route li:last-child::after{display:none}
.route .t h3{font-family:var(--disp);font-weight:700;font-size:22px;margin:0 0 4px;line-height:1.22;letter-spacing:-.015em}
.route .t p{margin:0;color:var(--mutd);font-size:15.5px;max-width:56ch}
@media(min-width:860px) and (max-width:1019px){
  .route .t{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:baseline}
  .route .t h3{margin:0}
}
.ring-img{display:none}

/* Ab 1020px, damit Ring plus beide Textspalten mit Abstand hineinpassen:
   290 Ring + 2x(250 Text + 48 Luft) = 886px bei 932px verfuegbarer Breite. */
@media(min-width:1020px){
  .ring{position:relative;width:290px;margin:34px auto 0}
  .ring-img{display:block;width:100%;height:auto;opacity:.42}
  .ring ol{position:absolute;inset:0}
  /* Jedes li ist ein Punkt ohne Ausdehnung; Marke und Text haengen daran. */
  .ring li{position:absolute;left:var(--x);top:var(--y);
    display:block;width:0;height:0;padding:0;gap:0}
  .ring li::before{position:absolute;left:-9px;top:-9px;margin:0;
    width:18px;height:18px;border:3px solid var(--acc);background:var(--ink)}
  .ring li::after{display:none}
  .ring li .t{position:absolute;top:50%;transform:translateY(-50%);width:250px}
  .ring li.s-l .t{right:48px;text-align:right}
  .ring li.s-r .t{left:48px;text-align:left}
  .ring li .t p{max-width:none;font-size:14.5px}
}

/* ---------- Podcast ---------- */
.pod{padding:clamp(56px,8vw,100px) 0;border-top:1px solid var(--line)}
.pod-grid{display:grid;gap:34px}
@media(min-width:920px){.pod-grid{grid-template-columns:1fr minmax(0,480px);column-gap:56px;align-items:start}}
.pod h2{font-family:var(--disp);font-weight:700;font-size:clamp(27px,3.5vw,38px);margin:0 0 16px;line-height:1.18;letter-spacing:-.018em}
.pod p{color:#43403a;font-size:17px;margin:0 0 16px;max-width:52ch}
.pod .meta{font-size:12.5px;letter-spacing:.06em;color:var(--mut)}
/* wie die Karten: umlaufender Rahmen statt Akzentbalken an einer Kante */
.pod-card{background:var(--ink);color:var(--paper);padding:26px;border:1px solid var(--ink3)}
.pod-btn{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--ink2);color:var(--paper);border:1px solid var(--lined);padding:18px 20px;
  font:inherit;font-size:16px;font-weight:600;transition:background .2s,border-color .2s}
.pod-btn:hover{background:var(--ink3);border-color:var(--accd)}
.pod-btn .play{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accd);color:#17100e;
  display:grid;place-items:center}
.pod-note{margin:14px 0 0;font-size:12.5px;line-height:1.55;color:var(--mutd)}
.pod-out{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;color:var(--paper);
  text-decoration:none;border-bottom:1px solid var(--accd);padding-bottom:2px}
.pod-out:hover{color:var(--accd)}
.pod-card iframe{width:100%;height:232px;border:0;display:block}

/* ---------- Seitenkopf (Blog, Recht) ---------- */
.phead{padding:calc(var(--bar) + clamp(46px,7vw,78px)) 0 clamp(30px,5vw,52px);border-bottom:1px solid var(--lined)}
.phead h1{font-size:clamp(36px,6vw,64px)}
.phead .sub{color:var(--mutd);margin:18px 0 0;font-size:16.5px;max-width:56ch}

/* ---------- Artikelliste ---------- */
.postlist{padding:clamp(40px,6vw,70px) 0 clamp(56px,8vw,100px)}
.postlist ol{list-style:none;margin:0;padding:0}
.postlist li{border-top:1px solid var(--line)}
.postlist li:last-child{border-bottom:1px solid var(--line)}
.postlist a{display:grid;gap:6px 32px;padding:26px 0;text-decoration:none;align-items:baseline}
@media(min-width:820px){.postlist a{grid-template-columns:130px minmax(0,1fr)}}
.postlist time{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.postlist h2{font-family:var(--disp);font-weight:700;font-size:clamp(23px,2.9vw,31px);margin:0 0 8px;
  line-height:1.2;letter-spacing:-.018em;transition:color .2s}
.postlist a:hover h2{color:var(--acc)}
.postlist p{margin:0;color:var(--mut);font-size:15.5px;max-width:62ch}
.postlist .go{margin-top:10px;font-size:13px;font-weight:600;color:var(--acc-tx)}

/* ---------- Instagram im Blog ----------
   Die Vorschaubilder liegen lokal unter /ig/media/, es geht kein Request an
   Meta raus. Verlinkt wird der Beitrag selbst; erst der Klick fuehrt zu
   Instagram. Ohne verbundenes Konto rendert die Sektion gar nicht. */
.ig{padding:clamp(48px,7vw,86px) 0;border-top:1px solid var(--lined)}
.ig h2{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,32px);
  margin:0 0 26px;letter-spacing:-.015em}
.ig-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
.ig-grid a{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--ink2)}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s,opacity .2s}
.ig-grid a:hover img{transform:scale(1.04);opacity:.86}
.ig-play{position:absolute;right:8px;bottom:7px;line-height:0;color:var(--paper);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))}
.ig-note{margin:20px 0 0;font-size:14px}
.ig-note a{color:var(--accd);text-decoration:none;font-weight:600}
.ig-note a:hover{text-decoration:underline}

/* ---------- Einzelartikel ---------- */
.article{padding:clamp(36px,5vw,60px) 0 clamp(50px,7vw,86px)}
.article-in{max-width:680px;margin:0 auto}
.article-meta{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin:0 0 14px}
.article h1{font-size:clamp(31px,4.6vw,50px);line-height:1.14;margin:0 0 26px}
.article-body p{margin:0 0 20px;font-size:17.5px;line-height:1.74;color:#2b2822}
.article-body h3{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.7vw,28px);
  line-height:1.24;letter-spacing:-.015em;margin:36px 0 14px}
.article-body b,.article-body strong{color:var(--ink)}
.article-body a{color:var(--acc-tx);text-underline-offset:3px}
.article-body .fig{margin:28px 0}
.backlink{display:inline-block;margin:0 0 26px;font-size:13.5px;font-weight:600;color:var(--acc-tx);text-decoration:none}
.backlink:hover{text-decoration:underline}

/* ---------- Eingefrorene Kommentare ---------- */
.comments{margin-top:52px;border-top:1px solid var(--line);padding-top:30px}
.comments h2{font-family:var(--disp);font-weight:700;font-size:24px;margin:0 0 6px;letter-spacing:-.015em}
.comments .note{font-size:13px;color:var(--mut);margin:0 0 24px}
.comments ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.comments li{background:var(--paper2);padding:16px 18px;border-left:2px solid var(--line)}
.comments .who{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:6px}
.comments .who b{font-size:14.5px;font-weight:700}
.comments .who time{font-size:12px;color:var(--mut);letter-spacing:.06em}
.comments .own{border-left-color:var(--acc)}
.comments .own .who b::after{content:"Autor";margin-left:8px;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-tx);vertical-align:1px}
.comments p{margin:0;font-size:15.5px;color:#2b2822;line-height:1.6}

/* ---------- Rechtstexte ---------- */
.legal{padding:clamp(40px,6vw,70px) 0 clamp(56px,8vw,100px)}
.legal-in{max-width:680px}
.legal h2{font-family:var(--disp);font-weight:700;font-size:23px;margin:34px 0 10px;letter-spacing:-.015em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16px;line-height:1.7;color:#2b2822}
.legal p{margin:0 0 14px;max-width:62ch}
.legal ul{margin:0 0 16px;padding-left:20px}
.legal li{margin-bottom:6px}
.legal a{color:var(--acc-tx);text-underline-offset:3px}
.legal .gap{background:#f7e9e5;border-left:3px solid var(--acc);padding:12px 14px;font-size:14.5px;color:#6c2b20}

/* ---------- Abbinder ---------- */
.cta{padding:clamp(64px,9vw,120px) 0;position:relative;overflow:hidden}
.cta .in{max-width:640px}
.cta h2{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6.4vw,72px);line-height:1.05;
  letter-spacing:-.02em;margin:0 0 20px}
.cta p{color:var(--mutd);font-size:17px;max-width:46ch;margin:0 0 30px}

/* ---------- Fuss ---------- */
footer{border-top:1px solid var(--lined);padding:44px 0 54px;font-size:14px}
.f-grid{display:flex;flex-wrap:wrap;gap:26px 34px;align-items:baseline}
footer a{color:var(--mutd);text-decoration:none}
footer a:hover{color:var(--paper)}
.f-legal{margin-left:auto;display:flex;gap:20px}
.f-note{margin:26px 0 0;color:#6c675f;font-size:12.5px;max-width:60ch}

/* ---------- 404 ---------- */
.nf{padding:calc(var(--bar) + 90px) 0 110px}
.nf h1{font-size:clamp(48px,9vw,96px);margin-bottom:18px}
.nf p{color:var(--mutd);max-width:46ch;margin:0 0 28px;font-size:17px}