/* LICHTFELD — Ghost theme stylesheet (shared across V1/V2/V3) */
/* picturefish-lagune — Systemmagazin: Brennweite-Schriften, Lagune & Sand. */
/* Die Werte stehen in 02 Projekte/hausdesign-rollout/Notes/Design-Tokens.  */

:root{
  /* Grund und Flaechen — Sand als ganze Flaeche, Card als helle Karte */
  --paper:#F0EEE9; --paper-2:#E6E3DC; --paper-3:#D8D4CB;
  --card:#FFFFFF;

  /* Schrift */
  --ink:#2E2F2F;   --ink-2:#5A5B5B;
  --ink-soft:rgba(46,47,47,.66); --ink-faint:rgba(46,47,47,.38);

  /* Linien — Hauswert Line #D5D5D8, hier als Alpha fuer beliebige Gruende */
  --rule:rgba(46,47,47,.20); --rule-faint:rgba(46,47,47,.11);

  /* Akzente — Lagune traegt, Terra warnt */
  --accent:#2F6D9E;
  --accent-2:#B33456;
  --accent-ink:#285F8A;
  --on-accent:#FFFFFF;   /* Text auf Lagune-Flaechen */
  --on-accent-2:#FFFFFF; /* Text auf Terra-Flaechen  */

  /* Wortmarke — der Fisch steht im Wasser und traegt immer die Lagune.
     Nur --wm-picture wechselt, wenn eine andere Zweitfarbe gewaehlt wird. */
  --wm-fish:var(--accent);
  --wm-picture:#B33456;  /* Terra */

  /* Ghost injects --gh-font-heading/body when an editor-selected custom font
     is active. The locally hosted house fonts remain the default fallback. */
  --theme-font-heading:"Brennweite Antiqua",Georgia,"Times New Roman",serif;
  --theme-font-body:"Brennweite Grotesk","Avenir Next","Segoe UI",system-ui,sans-serif;
  --serif:var(--gh-font-heading,var(--theme-font-heading)); /* Display */
  --sans:var(--gh-font-body,var(--theme-font-body)); /* Text */
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  /* Breakpoints (mobile-first, min-width): sm 600 · md 768 · lg 1024 · xl 1280 */
  --pad-x: clamp(28px, 6vw, 88px); /* single source for horizontal wrap padding */
  --gutter:24px;
  --maxw: 1440px;
  --radius:22px;  /* Hausradius fuer Karten und Felder */
  --img-shadow: 0 3px 7px rgba(46,47,47,.16), 0 16px 34px rgba(46,47,47,.20);
  --img-shadow-hover: 0 6px 14px rgba(46,47,47,.20), 0 22px 46px rgba(46,47,47,.26);
  --footer-bg:#2E2F2F;
  --footer-fg:#F0EEE9;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }
::selection{ background:var(--accent); color:var(--on-accent); }

/* type ---------------------------------------------------- */
.serif   { font-family:var(--serif); font-weight:400; letter-spacing:-.015em; line-height:.96; }
.serif-it{ font-family:var(--serif); font-style:normal; letter-spacing:-.02em; line-height:.96; }
.mono    { font-family:var(--mono); font-size:13px; letter-spacing:.02em; }
.mono-sm { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; }
.mono-xs { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.uc      { text-transform:uppercase; letter-spacing:.04em; }
.ink-soft{ color:var(--ink-soft); }

/* layout -------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0; padding-left:28px !important; padding-right:28px !important; }

/* nav ---------------------------------------------------- */
.gh-nav{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:24px;
  padding:14px var(--pad-x);
  border-bottom:1px solid var(--ink); background:var(--paper);
  position:sticky; top:0; z-index:50;
}
.gh-nav__brand{ display:flex; align-items:baseline; gap:8px;
  font-family:var(--serif); font-size:22px; letter-spacing:-.02em; font-weight:500; }
.gh-nav__brand .swatch{
  width:14px; height:14px; background:var(--accent); display:inline-block; border-radius:2px;
}
.gh-nav__brand .pf-logo{
  width:22px; height:22px; color:var(--accent); flex:0 0 auto; align-self:center;
  display:inline-block; vertical-align:middle;
}
.gh-nav__brand .pf-logo--type{ width:32px; height:auto; }
.gh-nav__brand .pf-logo{ filter:drop-shadow(0 2px 3px rgba(20,17,11,.42)); }
html[data-theme="dark"] .gh-nav__brand .pf-logo{ filter:drop-shadow(0 3px 5px rgba(0,0,0,.9)) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
.gh-nav__brand i{ font-style:normal; transform:skewX(-7deg); display:inline-block; opacity:.85; }
.gh-nav__tagline{ display:none; }
@media (min-width:1100px){ .gh-nav__tagline{ display:inline; opacity:.7; } }
.gh-nav__menu{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.gh-nav__menu > a{ padding:6px 0; opacity:.78; border-bottom:1px solid transparent; }
.gh-nav__menu > a.is-current{ opacity:1; border-bottom-color:var(--ink); }
.gh-nav__cta{ display:flex; gap:10px; align-items:center; }

/* pills -------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 6px; border:1px solid var(--ink); border-radius:999px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
}
.pill--solid{ background:var(--ink); color:var(--paper); }
.pill--accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* image placeholder ------------------------------------- */
.ph{ position:relative; overflow:hidden; background:var(--paper-2); display:block; box-shadow:var(--img-shadow); }
.ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02); transition:filter .4s; }
@media (hover:hover){ .ph:hover img{ filter:grayscale(0) contrast(1.02); } }
.ph__num,.ph__cap{
  position:absolute; left:8px; font-family:var(--mono); font-size:10.5px;
  color:var(--paper); mix-blend-mode:difference; opacity:.9; letter-spacing:.06em; text-transform:uppercase;
}
.ph__num{ top:8px; left:auto; right:8px; mix-blend-mode:normal; opacity:1; color:#fff; font-size:11px;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.45); } .ph__cap{ bottom:8px; }

/* marquee ----------------------------------------------- */
.marquee{ display:flex; overflow:hidden; white-space:nowrap; gap:48px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:10px 0; }
.marquee__track{ display:flex; gap:48px; flex:0 0 auto; animation: lf-marquee 24s linear infinite; }
@media (min-width:768px){ .marquee__track{ animation-duration:38s; } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes lf-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee span.bullet{ width:6px; height:6px; background:var(--accent); border-radius:99px; display:inline-block; margin-left:48px; }

/* hero shared headings ---------------------------------- */
.hero-h1{ font-family:var(--serif); font-size:clamp(80px,12vw,168px); letter-spacing:-.04em; line-height:.88; }
.hero-h2{ font-family:var(--serif); font-size:clamp(56px,9vw,120px); letter-spacing:-.035em; line-height:.92; }

/* post cards (used by all themes for blog index sections) */
.post-card{ display:flex; flex-direction:column; gap:14px; }
.post-card__img{ aspect-ratio: 5/4; overflow:hidden; }
.post-card__title{ font-family:var(--serif); font-size:clamp(22px, 4vw, 28px); line-height:1.05; letter-spacing:-.012em; overflow-wrap:break-word; }
.post-card--feature .post-card__title{ font-size:clamp(30px, 7vw, 48px); overflow-wrap:break-word; }
.post-card--feature .post-card__img{ aspect-ratio: 16/10; }
.post-card__meta{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.7; }
.post-card__excerpt{ font-size:15px; line-height:1.5; color:var(--ink-soft); }

/* spotlight (used on V1/V2 home) ----------------------- */
.spot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink); }
.spot__slide{ position:absolute; inset:0; opacity:0; transition:opacity 1s, transform 6s ease-out; transform:scale(1.04); }
.spot__slide.is-active{ opacity:1; transform:scale(1); }
.spot__slide img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.spot__caption{
  position:absolute; left:10px; right:10px; bottom:10px;
  display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column; gap:6px;
  color:var(--paper); mix-blend-mode:difference;
}
@media (min-width:768px){
  .spot__caption{ left:18px; right:18px; bottom:18px; align-items:flex-end; flex-direction:row; gap:0; }
}
.spot__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.2); }
.spot__progress > span{ display:block; height:100%; background:var(--accent); transition:width .5s; }
.spot__dots{ display:flex; gap:6px; margin-top:14px; }
.spot__dots button{
  flex:1; padding:0 0 6px; border:0; cursor:pointer; background:transparent;
  border-top:2px solid var(--rule); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; opacity:.55; text-align:left;
}
.spot__dots button.is-active{ border-top-color:var(--ink); opacity:1; }

/* card link block ------------------------------------- */
.card{ position:relative; background:var(--paper-2); padding:18px;
  display:flex; flex-direction:column; gap:14px; transition:background .25s; }
@media (hover:hover){ .card:hover{ background:var(--paper-3); } }
.card .arrow{ position:absolute; right:14px; top:14px; }

/* sections ------------------------------------------- */
.section-head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px;
  padding-bottom:14px; border-bottom:1px solid var(--ink); }
.section-head__kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.65; margin-bottom:10px; }
.section-head__title{ font-family:var(--serif); font-size:clamp(36px,5vw,56px); letter-spacing:-.02em; line-height:1; }

/* footer slab --------------------------------------- */
.gh-foot{ background:var(--footer-bg); color:var(--footer-fg); padding:56px var(--pad-x) 28px; margin-top:64px; }
.gh-foot__brand{ font-family:var(--serif); font-size:clamp(64px,9vw,128px); line-height:.92; letter-spacing:-.025em; }
.gh-foot input{ flex:1; background:transparent; border:0; color:inherit; padding:10px 0;
  outline:none; font-family:var(--mono); font-size:13px; }
.gh-foot button{ background:transparent; color:inherit; border:0; padding:6px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.gh-foot__bot{ display:flex; justify-content:space-between; gap:20px; }

/* Themenseiten ---------------------------------------------------------------
   Das Thema ist ein kuratierter Einstieg – kein Bilderraster. Der kleine
   Terra-Punkt übernimmt bewusst die Signatur aus brennweite28. */
.pf-terra-dot{
  display:inline-block; position:relative;
  top:clamp(5px,.11em,13px);
  width:clamp(5px,.07em,8px); height:clamp(5px,.07em,8px);
  margin-left:clamp(8px,.14em,16px);
  border-radius:50%; background:var(--topic, var(--accent-2));
  vertical-align:baseline; font-size:inherit; line-height:0;
}
.pf-sentence-unit{ white-space:nowrap; }
.pf-inline-stop{
  display:inline-block;
  width:.105em; height:.105em;
  margin:0 .105em .075em .045em;
  background:currentColor; border-radius:0;
  vertical-align:baseline; font-size:inherit; line-height:0;
}
.pf-sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important;
  white-space:nowrap!important; border:0!important;
}
.pf-topic-page{ border-bottom:1px solid var(--rule); }
.pf-topic-page__hero{
  display:grid; grid-template-areas:"meta" "title";
  gap:clamp(12px,1.5vw,20px);
  padding:clamp(28px,3vw,44px) var(--pad-x) clamp(26px,3vw,42px);
  border-bottom:1px solid var(--rule);
}
.pf-topic-page__hero-main{
  grid-area:meta; display:flex; justify-content:space-between;
  align-items:flex-start; gap:32px; min-height:48px;
}
.pf-topic-page__kicker,.pf-topic-page__meta{
  margin:0; color:var(--accent-ink); font-family:var(--mono); font-size:11px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.pf-topic-page__hero h1{
  grid-area:title; min-width:0; margin:0; font-family:var(--serif);
  font-size:clamp(42px,5.5vw,84px); font-weight:400; letter-spacing:-.055em;
  line-height:1.02; white-space:nowrap;
}
.pf-topic-page__intro{
  max-width:410px; margin:0; font-family:var(--serif);
  font-size:clamp(17px,1.5vw,22px); letter-spacing:-.025em;
  line-height:1.25; text-align:right;
}
.pf-topic-page__switcher{
  display:flex; flex-wrap:nowrap; gap:7px; padding:13px var(--pad-x);
  border-bottom:1px solid var(--rule); overflow-x:auto; white-space:nowrap;
}
.pf-topic-page__switch{
  flex:0 0 auto; padding:8px 10px; border:1px solid var(--rule); font-size:11px; line-height:1.2;
  transition:color .2s,background .2s,border-color .2s;
}
.pf-topic-page__mobile-switcher{ display:none; }
.pf-topic-page[data-topic="konflikt-spannung"] .pf-topic-page__switch[data-topic="konflikt-spannung"],
.pf-topic-page[data-topic="organisation-system"] .pf-topic-page__switch[data-topic="organisation-system"],
.pf-topic-page[data-topic="wandel-veraenderung"] .pf-topic-page__switch[data-topic="wandel-veraenderung"],
.pf-topic-page[data-topic="zusammenarbeit-co-creation"] .pf-topic-page__switch[data-topic="zusammenarbeit-co-creation"],
.pf-topic-page[data-topic="haltung-denken"] .pf-topic-page__switch[data-topic="haltung-denken"]{
  color:var(--paper); background:var(--ink); border-color:var(--ink);
}
@media (hover:hover){ .pf-topic-page__switch:hover{ border-color:var(--ink); } }
.pf-topic-page__feature{
  display:grid; grid-template-columns:minmax(0,1.65fr) minmax(250px,.75fr);
  gap:clamp(34px,6vw,80px); padding:0 var(--pad-x); border-bottom:1px solid var(--rule);
}
.pf-topic-page__lead{ padding:clamp(40px,5vw,70px) 0; }
.pf-topic-page__lead h2,.pf-topic-page__question h2{
  margin:16px 0 20px; font-family:var(--serif); font-size:clamp(39px,4.7vw,72px);
  font-weight:400; letter-spacing:-.045em; line-height:.91;
}
.pf-topic-page__lead>p:not(.pf-topic-page__meta){ max-width:660px; margin:0; font-size:17px; line-height:1.55; color:var(--ink-soft); }
.pf-topic-page__read{
  display:inline-block; margin-top:28px; padding-bottom:8px; border-bottom:2px solid var(--accent-2);
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
/* Feste Themenflaechen: --topic wird im Dunkelmodus aufgehellt, diese
   Hintergruende bleiben fuer weisse Schrift in beiden Modi kontrastreich. */
.pf-topic-page[data-topic="konflikt-spannung"]{ --pf-question-bg:oklch(0.52 0.145 18); }
.pf-topic-page[data-topic="organisation-system"]{ --pf-question-bg:oklch(0.46 0.080 238); }
.pf-topic-page[data-topic="wandel-veraenderung"]{ --pf-question-bg:oklch(0.56 0.090 72); }
.pf-topic-page[data-topic="zusammenarbeit-co-creation"]{ --pf-question-bg:oklch(0.51 0.075 165); }
.pf-topic-page[data-topic="haltung-denken"]{ --pf-question-bg:oklch(0.49 0.070 310); }
.pf-topic-page__question{
  align-self:stretch; min-width:0; margin:0 calc(var(--pad-x) * -1); padding:clamp(40px,5vw,70px) var(--pad-x);
  background:var(--pf-question-bg, #526f5d); color:#fff;
}
.pf-topic-page__question .pf-topic-page__meta{ color:inherit; }
.pf-topic-page__question .pf-terra-dot{ background:currentColor; }
.pf-topic-page__question h2{
  max-width:405px; font-size:clamp(29px,3.15vw,39px); line-height:1.06;
  letter-spacing:-.035em; font-weight:400;
}
.pf-topic-page__question-ending{ display:inline-block; white-space:nowrap; }
.site-main .pf-heading-question-mark{
  display:inline-block; font-family:Georgia,"Times New Roman",serif;
  font-size:.55em; font-weight:400; line-height:0;
  letter-spacing:0; margin-left:.03em; vertical-align:.2em;
}
.site-main .pf-topic-page__question .pf-heading-question-mark{ font-size:.48em; }
.pf-topic-page__question>p:not(.pf-topic-page__meta){ max-width:370px; margin:0; font-size:15px; line-height:1.55; }
.pf-topic-page__question a{
  display:inline-block; margin-top:26px; padding-bottom:6px; border-bottom:1px solid currentColor;
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.pf-topic-page__list{ padding:0 var(--pad-x) clamp(52px,7vw,92px); }
.pf-topic-page__list>header{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:30px 0 16px; border-bottom:1px solid var(--ink);
}
.pf-topic-page__list>header p{ margin:0; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.pf-topic-page__list>header span,.pf-topic-page__time{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.pf-topic-page__row{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:18px; align-items:baseline;
  padding:23px 0; border-bottom:1px solid var(--rule);
}
.pf-topic-page__number{ font-family:var(--serif); font-size:22px; color:var(--accent-2); }
.pf-topic-page__row h2{ margin:0; font-family:var(--serif); font-size:clamp(26px,3vw,42px); font-weight:400; letter-spacing:-.035em; line-height:1.02; }
@media(max-width:760px){
  .pf-topic-page__hero{
    grid-template-areas:"kicker" "title" "intro";
    gap:0; padding:27px 21px 24px;
  }
  .pf-topic-page__hero-main{ display:contents; }
  .pf-topic-page__kicker{ grid-area:kicker; }
  .pf-topic-page__hero h1{
    min-height:2.06em; margin-top:15px; font-size:clamp(33px,10.1vw,42px);
    white-space:normal; overflow-wrap:normal; hyphens:manual; line-height:1.03;
  }
  .pf-topic-page__intro{
    grid-area:intro; min-height:2.7em; max-width:350px; margin-top:12px;
    font-size:16px; line-height:1.35; text-align:left;
  }
  .pf-topic-page__switcher{ display:none; }
  .pf-topic-page__mobile-switcher{
    display:flex; align-items:center; gap:10px; padding:10px 21px;
    border-bottom:1px solid var(--rule);
  }
  .pf-topic-page__mobile-switcher label{
    font-family:var(--mono); font-size:10px; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase;
  }
  .pf-topic-page__mobile-switcher select{
    width:100%; min-width:0; padding:7px 28px 7px 10px;
    color:var(--ink); background:var(--paper); border:1px solid var(--rule);
    border-radius:0; font:12px var(--sans);
  }
  .pf-topic-page__feature{ grid-template-columns:minmax(0,1fr); gap:0; padding-left:21px; padding-right:21px; }
  .pf-topic-page__lead{ padding:30px 0 32px; }
  .pf-topic-page__question{ margin:0 -21px; padding:30px 21px 34px; }
  .pf-topic-page__question h2{ font-size:33px; overflow-wrap:normal; }
  .pf-topic-page__list{ padding-left:21px; padding-right:21px; }
  .pf-topic-page__row{ grid-template-columns:34px minmax(0,1fr); gap:12px; }
  .pf-topic-page__time{ grid-column:2; }
}
@media(max-width:360px){
  .pf-topic-page__kicker-name{ display:none; }
  .pf-topic-page__intro{ min-height:4.05em; }
}
.gh-foot__col{ display:flex; flex-direction:column; gap:14px; }

/* reading view (post.hbs / page.hbs) --------------- */
.article{ max-width:760px; margin:0 auto; padding:48px var(--pad-x) 64px; }
.article__h1{ font-family:var(--serif); font-size:clamp(42px,6vw,84px); letter-spacing:-.025em; line-height:.95; }
.article__meta{ display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 28px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.7; }
.article__cover{ aspect-ratio: 16/9; overflow:hidden; margin: 0 0 32px; }
.article__cover img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.02); }
.article__body{ font-family:var(--serif); font-size:19px; line-height:1.6; }
.article__body p,
.article__body ul,
.article__body ol,
.article__body blockquote { margin:1.1em 0; }
.article__body h2{ font-family:var(--serif); font-size:36px; letter-spacing:-.015em; line-height:1.05; margin:1.6em 0 .4em; }
.article__body h3{ font-family:var(--serif); font-size:24px; letter-spacing:-.012em; margin:1.4em 0 .3em; }
.article__body a{ color:var(--accent-ink); border-bottom:1px solid var(--accent); }
/* Kein Kursivschnitt im Haus — das Zitat traegt ueber Groesse, Farbe und Kante. */
.article__body blockquote{ border-left:2px solid var(--accent); padding-left:24px; font-size:1.06em; line-height:1.55; color:var(--ink-soft); }
.article__body figure{ margin:32px -40px; }
.article__body figure img{ width:100%; }
.article__body figcaption{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.65; margin-top:8px; }
.article__body code{ font-family:var(--mono); font-size:14px; background:var(--paper-2); padding:2px 6px; border-radius:3px; }
.article__body pre{ background:var(--ink); color:var(--paper); padding:18px; overflow:auto; }
.article__body pre code{ background:none; padding:0; color:inherit; }
.article__body hr{ border-top:1px solid var(--ink); margin:48px 0; }

/* tag/author headers ---------------------------------- */
.archive-head{ padding:32px var(--pad-x) 28px; border-bottom:1px solid var(--ink); }
.archive-head h1{ font-family:var(--serif); font-size:clamp(36px,5vw,68px); letter-spacing:-.02em; line-height:1; margin:0; }
.archive-head__sub{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-top:14px; }

/* pagination ------------------------------------------ */
.pag{ display:flex; justify-content:space-between; gap:18px; padding:32px var(--pad-x); border-top:1px solid var(--rule); }
.pag a, .pag span{ font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }

/* error ------------------------------------------------ */
.err{ padding:120px var(--pad-x); text-align:center; }
.err h1{ font-family:var(--serif); font-size:clamp(72px,28vw,180px); letter-spacing:-.04em; line-height:.85; color:var(--accent); margin:0; }
@media (min-width:768px){ .err h1{ font-size:clamp(96px,18vw,260px); } }
.err p{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-top:14px; }

/* utility colors -------------------------------------- */
.bg-ink{ background:var(--ink); color:var(--paper); }
.bg-paper2{ background:var(--paper-2); }
.rule-t{ border-top:1px solid var(--ink); }
.rule-b{ border-bottom:1px solid var(--ink); }

/* cursor-spot only used by V3 — but cheap to ship in the shared CSS */
.cursor-spot{
  position:absolute; pointer-events:none; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  mix-blend-mode:overlay; transform:translate(-50%,-50%);
  transition:transform .12s linear;
}


/* ============================================================
   KOENIG (Ghost editor) cards — required for theme validation
   ============================================================ */
.gh-content { position: relative; }
.gh-content > * { margin-top: 1.1em; margin-bottom: 1.1em; }

/* width modifiers — break out of the article column */
.kg-width-wide { width: min(100vw, 1200px); margin-left: 50%; transform: translateX(-50%); max-width: none; }
.kg-width-full { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.kg-width-wide img, .kg-width-full img { width: 100%; height: auto; }

/* image / gallery cards */
.kg-image-card { margin: 32px 0; }
.kg-image-card figcaption,
.kg-gallery-card figcaption { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; opacity:.65; margin-top:10px; text-align:center; }
.kg-gallery-container { display:flex; flex-direction:column; max-width:1200px; width:100vw; margin-left:50%; transform:translateX(-50%); }
.kg-gallery-row { display:flex; flex-direction:row; justify-content:center; }
.kg-gallery-image img { display:block; margin:0; width:100%; height:100%; }
.kg-gallery-row:not(:first-of-type) { margin: 0.75em 0 0 0; }
.kg-gallery-image:not(:first-of-type) { margin: 0 0 0 0.75em; }

/* embed / video / audio / file cards */
.kg-embed-card,
.kg-video-card,
.kg-audio-card,
.kg-file-card { margin: 32px 0; }

/* callout / toggle / button / header */
.kg-callout-card { display:flex; gap:14px; padding:18px 20px; background:var(--paper-2); border-left:3px solid var(--accent); }
.kg-callout-emoji { font-size:22px; line-height:1.3; }
.kg-callout-text { font-size:16px; line-height:1.5; }
.kg-toggle-card { padding:16px 20px; background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.kg-toggle-heading { font-family:var(--serif); font-size:22px; letter-spacing:-.012em; }
.kg-button-card { text-align:center; margin:32px 0; }
.kg-button-card a { display:inline-block; padding:12px 22px; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; border-radius:999px; }
.kg-header-card { padding:48px 24px; text-align:center; }
.kg-header-card h2 { font-family:var(--serif); font-size:48px; letter-spacing:-.025em; line-height:.96; }

/* product card */
.kg-product-card { display:grid; gap:16px; padding:18px; background:var(--paper-2); }
.kg-product-card img { max-width:100%; }
.kg-product-card-title { font-family:var(--serif); font-size:24px; letter-spacing:-.012em; }
.kg-product-card-button { display:inline-block; padding:10px 16px; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; }

/* signup card */
.kg-signup-card { padding:32px 24px; background:var(--paper-2); margin:32px 0; }

/* code blocks */
.gh-content pre { background: var(--ink); color: var(--paper); padding: 18px; overflow:auto; font-family: var(--mono); font-size:13px; line-height:1.55; }
.gh-content code { font-family: var(--mono); font-size:14px; background:var(--paper-2); padding:2px 6px; }

/* ----- bookmark card ----- */
.kg-bookmark-card,
.kg-bookmark-publisher { position: relative; width: 100%; }
.kg-bookmark-card a.kg-bookmark-container,
.kg-bookmark-card a.kg-bookmark-container:hover {
  display: flex;
  background: var(--paper);
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid var(--rule);
  overflow: hidden;
  color: var(--ink);
  min-height: 148px;
}
.kg-bookmark-content {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
}
.kg-bookmark-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
}
.kg-bookmark-card a:hover .kg-bookmark-title { color: var(--accent-ink); }
.kg-bookmark-description {
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 10px;
  overflow-y: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kg-bookmark-thumbnail {
  position: relative;
  flex-grow: 1;
  min-width: 33%;
}
.kg-bookmark-thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 2px 2px 0;
}
.kg-bookmark-metadata {
  display: flex;
  align-items: center;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.kg-bookmark-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
.kg-bookmark-author { margin-right: 10px; }
.kg-bookmark-author:after {
  content: "•";
  margin-left: 10px;
}
.kg-bookmark-publisher {
  overflow: hidden;
  max-width: 240px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* author bio block (used when @custom.show_author_bio) */
.author-bio { max-width:760px; margin: 56px auto 0; padding: 32px 0; border-top:1px solid var(--rule); }

/* navigation layout variants from @custom.navigation_layout */
body.nav-left .gh-nav { grid-template-columns: 1fr auto; }
body.nav-left .gh-nav__menu { justify-content:flex-start; order:3; grid-column:1/-1; padding-top:6px; }
body.nav-stacked .gh-nav, body.nav-Stacked .gh-nav { grid-template-columns: 1fr; row-gap:14px; text-align:center; }
body.nav-stacked .gh-nav__brand, body.nav-Stacked .gh-nav__brand { justify-content:center; }
body.nav-stacked .gh-nav__menu, body.nav-Stacked .gh-nav__menu { justify-content:center; }
body.nav-stacked .gh-nav__cta, body.nav-Stacked .gh-nav__cta { justify-content:center; }


/* field-row stagger (V3 recent list) */
.field-row:nth-child(2),
.field-row:nth-child(5) { margin-top: 60px; }
.field-row:nth-child(3) { margin-top: 40px; }

/* MOBILE-FIRST refinements v1.1 */
:root{ --gutter: clamp(14px,2.4vw,24px); }
.hero-h1,.hero-h2{ font-size:clamp(48px,12vw,168px); line-height:.9; }
.serif{ overflow-wrap:break-word; }
.gh-nav{ grid-template-columns:1fr auto auto; gap:12px; padding:12px var(--pad-x); position:relative; }
.gh-nav__menu{ display:none; }
.gh-nav__cta .pill{ padding:6px 10px; font-size:10px; }
.gh-nav__cta .gh-nav__tagline{ display:none; }
.gh-nav__brand{ font-size:19px; }
.gh-nav__toggle{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border:1px solid var(--ink); background:transparent; border-radius:99px; cursor:pointer; font-family:var(--mono); font-size:14px; }
.gh-nav.is-open .gh-nav__menu{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; position:absolute; top:100%; left:0; right:0; background:var(--paper); padding:18px var(--pad-x); border-bottom:1px solid var(--ink); z-index:60; }
@media (min-width:768px){
  .gh-nav{ grid-template-columns:auto 1fr auto; gap:24px; padding:14px var(--pad-x); }
  .gh-nav__menu{ display:flex; position:static; flex-direction:row; padding:0; border:0; background:transparent; }
  .gh-nav__toggle{ display:none; }
  .gh-nav__brand{ font-size:22px; }
  .gh-nav__cta .pill{ padding:5px 11px 6px; font-size:10.5px; }
}
@media (min-width:1100px){ .gh-nav__cta .gh-nav__tagline{ display:inline; opacity:.7; } }
.grid12{ display:grid; grid-template-columns:1fr; column-gap:var(--gutter); row-gap:24px; }
[class*="col-"]{ grid-column:1 / -1; min-width:0; }
@media (min-width:768px){
  .grid12{ grid-template-columns:repeat(6,1fr); row-gap:32px; }
  .col-2,.col-3,.col-4{ grid-column:span 3; }
}
@media (min-width:1024px){
  .grid12{ grid-template-columns:repeat(12,1fr); }
  .col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}
  .col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}
  .col-8{grid-column:span 8}.col-9{grid-column:span 9}.col-10{grid-column:span 10}
  .col-12{grid-column:span 12}
  /* Featured spotlight: the hero (first card, col-6) spans two grid rows
     so the smaller col-3 cards tile 2×2 to its right and fill the block —
     no orphan card on a near-empty second row, no tall gap beside the
     hero. The hero image grows to fill the taller cell (flex:1) instead
     of keeping a fixed aspect-ratio, so no white opens up below a short
     hero. Only at ≥1024px, where grid12 is the full 12-column grid;
     tablet/mobile keep the stacked layout untouched. */
  .feat-grid .feat-hero{ grid-row:span 2; }
  .feat-grid .feat-hero .post-card{ height:100%; }
  .feat-grid .feat-hero .post-card__img{ aspect-ratio:auto; flex:1 1 auto; min-height:360px; }
}
.gh-foot{ padding:40px var(--pad-x) 24px; }
.gh-foot__bot{ flex-direction:column; gap:8px; }
.article{ padding:32px var(--pad-x) 48px; }
.article__body figure{ margin:24px 0; }
@media (min-width:768px){ .article__body figure{ margin:32px -40px; } }
.pill,.post-card a,.gh-nav__menu a,.pag a{ min-height:36px; display:inline-flex; align-items:center; }
img{ height:auto; }

/* HAUSSCHRIFT-EDITION — Brennweite Antiqua und Grotesk                    */
/* Display und Text bleiben klar getrennt: Die Antiqua trägt die           */
/* gedankliche Tiefe, die Grotesk die Arbeits- und Lesbarkeit.             */
body{ font-family:var(--sans); letter-spacing:0; }
.serif,.serif-it,.hero-h1,.hero-h2,.article__h1,.article__body h2,.article__body h3,.section-head__title,.post-card__title,.archive-head h1,.err h1,.gh-foot__brand,.gh-nav__brand,.kg-header-card h2,.kg-bookmark-title,.kg-toggle-heading,.kg-product-card-title{ font-family:var(--serif); font-weight:500; letter-spacing:-.018em; }
/* Kein Kursivschnitt im Haus — die Neigung entsteht geometrisch. */
.serif-it{ font-style:normal; transform:skewX(-7deg); display:inline-block; font-weight:500; }
.article__body{ font-family:var(--sans); font-size:18px; line-height:1.72; font-weight:400; }

/* Zeilenabstaende, die auf die Vorgaengerschrift kalibriert waren */
.serif{ line-height:1.04; letter-spacing:-.018em; }
.serif-it{ line-height:1.04; }
.hero-h1{ font-size:clamp(64px,10vw,132px); letter-spacing:-.03em; line-height:.98; }
.hero-h2{ font-size:clamp(46px,7.5vw,96px); letter-spacing:-.026em; line-height:1.0; }
.post-card__title{ line-height:1.18; letter-spacing:-.014em; }
.post-card--feature .post-card__title{ line-height:1.1; }
.article__h1{ font-size:clamp(38px,5.2vw,70px); letter-spacing:-.024em; line-height:1.08; }
.article__body h2,.article__body h3{ line-height:1.2; }
.section-head__title{ font-size:clamp(32px,4.4vw,48px); letter-spacing:-.02em; line-height:1.08; }
.archive-head__h1{ line-height:1.04; letter-spacing:-.024em; }
.article__lede{ line-height:1.45; }
.err h1{ font-size:clamp(64px,22vw,150px); letter-spacing:-.03em; line-height:.94; }
.gh-foot__pitch{ line-height:1.28; }
.author-bio__name{ line-height:1.14; }
/* Light 300 wirkt erst gross — unterhalb 32px nie einsetzen. */
.pf-light{ font-weight:300; }

/* Wortmarke ---------------------------------------------------------------- */
/* Zwei Farben in einem Wort, ohne Fuge: die beiden Haelften sitzen direkt   */
/* aneinander und erben Groesse, Gewicht und Laufweite ihrer Umgebung.       */
.wm{ display:inline; white-space:nowrap; }
.wm__picture{ color:var(--wm-picture); }
.wm__fish{ color:var(--wm-fish); }
/* Auf farbigem Grund — etwa in einer Akzentflaeche — tritt die Teilung      */
/* zurueck, sonst kaempfen drei Farben gegeneinander.                        */
.pill .wm__picture,.pill .wm__fish,
.gh-foot__bot .wm__picture,.gh-foot__bot .wm__fish{ color:inherit; }

/* Startseiten-Kopf — vorher als Inline-Style im Template, jetzt hier, weil  */
/* die Groessen an der Schrift haengen und nicht am Markup.                  */
.home-hero__title{ font-size:clamp(52px,10vw,140px); line-height:.96; letter-spacing:-.03em; margin-top:8px; }
.home-hero__sub{ font-size:clamp(34px,6vw,84px); line-height:1.06; letter-spacing:-.022em; padding-left:18%; color:var(--accent); margin-top:6px; }
.home-hero__sub [data-home-leitsatz-line]{ display:block; }

/* =====================================================================
   PICTUREFISH · ENTWURF A — Systemmagazin-Startseite
   Entwurf C (Arbeitsheft) und B (Landkarte) folgen als eigene Ebenen.
   ===================================================================== */
.pf-home-editorial{ max-width:1600px; margin:0 auto; border-left:1px solid var(--rule); border-right:1px solid var(--rule); }
.pf-home-editorial__lead{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr); border-top:1px solid var(--rule); }
.pf-home-editorial__essay{ min-height:560px; padding:clamp(54px,7vw,112px) clamp(36px,6vw,100px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.pf-home-editorial__label,.pf-workbook__label,.pf-map-page__label{ margin:0 0 26px; color:var(--accent-2); font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; }
.pf-home-editorial__essay h1{ max-width:9ch; margin:0; color:var(--ink); font-family:var(--serif); font-size:clamp(56px,7vw,112px); font-weight:500; letter-spacing:-.05em; line-height:.88; }
.pf-home-editorial__intro{ max-width:52ch; margin:31px 0; color:var(--ink-2); font-size:18px; line-height:1.55; }
.pf-home-editorial__link{ display:inline-block; padding-bottom:8px; border-bottom:1px solid var(--accent-2); color:var(--ink); font:600 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.pf-home-editorial__thought{ min-height:560px; padding:clamp(36px,4vw,64px); background:#386d77; color:#f7f5f1; display:flex; flex-direction:column; justify-content:space-between; }
.pf-home-editorial__thought-label,.pf-home-editorial__thought-meta{ margin:0; color:#dce6e3; font:600 12px/1.25 var(--sans); letter-spacing:.15em; text-transform:uppercase; }
.pf-home-editorial__thought-copy{ margin:62px 0; font-family:var(--serif); font-size:clamp(31px,3.1vw,52px); font-weight:500; letter-spacing:-.035em; line-height:1.04; }
.pf-home-editorial__briefs{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); }
.pf-home-editorial__brief{ min-height:282px; padding:38px clamp(28px,3.5vw,56px); border-right:1px solid var(--rule); display:flex; flex-direction:column; }
.pf-home-editorial__brief:last-child{ border-right:0; }
.pf-home-editorial__number{ color:var(--accent-2); font-family:var(--serif); font-size:27px; font-weight:500; letter-spacing:-.02em; }
.pf-home-editorial__brief h2{ max-width:15ch; margin:42px 0 15px; font-family:var(--serif); font-size:clamp(28px,3vw,45px); font-weight:500; letter-spacing:-.03em; line-height:1.03; }
.pf-home-editorial__brief h2 a{ color:inherit; }.pf-home-editorial__brief p{ margin:auto 0 0; color:var(--ink-2); font-size:15px; }

/* Entwurf C · Arbeitsheft */
.pf-workbook__intro{ max-width:1100px; margin:0 auto; padding:clamp(80px,10vw,150px) 28px 72px; text-align:center; border-bottom:1px solid var(--rule); }
.pf-workbook__intro h1,.pf-map-page__head h1{ max-width:12ch; margin:0 auto; font-family:var(--serif); font-size:clamp(54px,8vw,112px); font-weight:500; letter-spacing:-.045em; line-height:.92; }
.pf-workbook__intro > p:not(.pf-workbook__label){ max-width:55ch; margin:28px auto 0; color:var(--ink-2); font-size:18px; line-height:1.55; }
.pf-workbook__meta{ margin-top:25px; color:var(--ink-2); font:600 11px/1.3 var(--sans); letter-spacing:.11em; text-transform:uppercase; }
.pf-workbook__prompt{ max-width:1180px; margin:0 auto; padding:clamp(48px,7vw,94px) 28px; }.pf-workbook__eyebrow{ margin:0 0 12px; color:var(--accent-2); font:600 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.pf-workbook__prompt h2{ margin:0 0 30px; font-family:var(--serif); font-size:clamp(36px,5vw,62px); font-weight:500; letter-spacing:-.035em; line-height:1; }
.pf-workbook__choices{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.pf-workbook__choices > div{ min-height:124px; padding:24px; border:1px solid var(--rule); }.pf-workbook__choices b{ display:block; margin-bottom:10px; color:var(--accent-2); font:600 11px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase; }.pf-workbook__choices span{ font-size:16px; line-height:1.4; }
.pf-workbook__journey{ display:grid; grid-template-columns:.75fr 1.25fr; border-top:1px solid var(--rule); }.pf-workbook__journey > aside{ padding:clamp(38px,5vw,80px); background:#61734c; color:#f7f5f1; }.pf-workbook__journey > aside .pf-workbook__eyebrow{ color:#edf0e6; }.pf-workbook__journey > aside h2{ margin:16px 0; font-family:var(--serif); font-size:clamp(36px,4vw,56px); font-weight:500; letter-spacing:-.035em; line-height:1; }.pf-workbook__journey > aside p:not(.pf-workbook__eyebrow){ max-width:32ch; color:#edf0e6; font-size:16px; line-height:1.55; }.pf-workbook__body{ max-width:760px; padding:clamp(38px,6vw,94px); }

/* Entwurf B · Landkarte. Das Template bleibt bis zur redaktionellen
   Befuellung ohne Navigationslink und kann dann als Ghost-Seite erscheinen. */
.pf-map-page__head{ max-width:1280px; margin:0 auto; padding:clamp(76px,10vw,145px) 28px 60px; border-bottom:1px solid var(--rule); }.pf-map-page__head h1{ margin:0; }.pf-map-page__head > p:not(.pf-map-page__label){ max-width:54ch; margin:26px 0 0; color:var(--ink-2); font-size:18px; line-height:1.55; }
.pf-map-page__map{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-height:590px; padding:54px clamp(28px,6vw,100px); overflow:hidden; background:var(--paper-2); }.pf-map-page__map:before,.pf-map-page__map:after{ content:""; position:absolute; width:62%; height:1px; left:18%; background:var(--rule); opacity:.85; }.pf-map-page__map:before{ top:45%; transform:rotate(22deg); }.pf-map-page__map:after{ top:55%; transform:rotate(-26deg); }
.pf-map-page__node{ position:relative; z-index:1; min-height:120px; padding:21px; border:1px solid var(--rule); background:var(--paper); color:var(--ink); display:flex; flex-direction:column; justify-content:space-between; }.pf-map-page__node span,.pf-map-page__node small{ color:var(--ink-2); font:600 10px/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; }.pf-map-page__node strong{ font-family:var(--serif); font-size:28px; font-weight:500; letter-spacing:-.025em; line-height:1; }.pf-map-page__node--denken{ transform:translateY(-72px); }.pf-map-page__node--theorie{ transform:translateY(76px); }.pf-map-page__node--konflikt{ transform:translateY(36px); }.pf-map-page__center{ position:relative; z-index:2; grid-column:2; grid-row:1 / span 2; width:170px; height:170px; margin:auto; border-radius:50%; background:var(--accent-2); color:#fff7f0; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--serif); font-size:29px; font-weight:500; letter-spacing:-.035em; line-height:.96; }.pf-map-page__content{ max-width:820px; margin:0 auto; padding:clamp(48px,7vw,100px) 28px; }

@media (max-width:760px){
  .pf-home-editorial__lead,.pf-workbook__journey{ grid-template-columns:1fr; }.pf-home-editorial__essay,.pf-home-editorial__thought{ min-height:auto; }.pf-home-editorial__essay{ padding:66px 28px; }.pf-home-editorial__thought{ min-height:310px; padding:36px 28px; }.pf-home-editorial__thought-copy{ margin:44px 0; }.pf-home-editorial__briefs{ grid-template-columns:1fr; }.pf-home-editorial__brief{ min-height:235px; border-right:0; border-bottom:1px solid var(--rule); }.pf-home-editorial__brief:last-child{ border-bottom:0; }.pf-workbook__choices{ grid-template-columns:1fr; }.pf-workbook__body{ padding:52px 28px; }.pf-map-page__map{ grid-template-columns:1fr 1fr; min-height:760px; }.pf-map-page__node--denken,.pf-map-page__node--theorie,.pf-map-page__node--konflikt{ transform:none; }.pf-map-page__center{ grid-column:1 / span 2; grid-row:auto; }
}


/* =====================================================================
   DARK MODE — [data-theme="dark"] on <html>
   ===================================================================== */

html[data-theme="dark"]{
  /* Grundtoene aus dem Grotesk-Dunkelmodus (Alexanders Wahl 2026-08-18):
     das warme Grau statt des fast schwarzen App-Grunds #0F1517. Akzente,
     Schrift und Wortmarke bleiben die Hauswerte. */
  --paper:#2b2b2b; --paper-2:#3f3f3f; --paper-3:#484849;
  --card:#3f3f3f;
  --ink:#E6E9E4;   --ink-2:#96A6AA;
  --ink-soft:rgba(230,233,228,.72); --ink-faint:rgba(230,233,228,.44);
  --rule:rgba(230,233,228,.18); --rule-faint:rgba(230,233,228,.10);
  /* Lagune ist im Dunkeln hell — Text darauf wird dunkel gesetzt.        */
  --accent:#6BA9DE; --accent-ink:#8FC0E8; --on-accent:#0F1517;
  /* Terra bleibt das Marken-Rot; auf dunklem Grund traegt es nur als     */
  /* Flaeche mit weisser Schrift, nie als farbiger Text.                  */
  --accent-2:#B33456; --on-accent-2:#FFFFFF;
  /* Als Schrift auf dunklem Grund ist Terra zu dunkel (3,1:1) — die
     Wortmarke bekommt deshalb den aufgehellten Ton. */
  --wm-picture:#E0798F;
  --footer-bg:#1f1f1f; --footer-fg:#E6E9E4;
  /* Auf fast schwarzem Grund traegt kein Schatten — dunkler als der Grund
     geht nicht. Die Trennung uebernimmt eine feine helle Kante; der Schatten
     bleibt als Rest-Tiefe darunter. */
  --img-shadow: 0 0 0 1px rgba(230,233,228,.16), 0 3px 8px rgba(0,0,0,.50), 0 14px 34px rgba(0,0,0,.60);
  --img-shadow-hover: 0 0 0 1px rgba(230,233,228,.26), 0 6px 16px rgba(0,0,0,.55), 0 24px 52px rgba(0,0,0,.70);
}

/* dark topic overrides — tint dark, ink light; --topic hue dot unchanged */
html[data-theme="dark"] [data-topic="ai-vibe-coding"]{ --topic:oklch(0.70 0.090 250); --topic-tint:oklch(0.30 0.045 250); --topic-ink:oklch(0.86 0.060 250); }
html[data-theme="dark"] [data-topic="landscape-alps"]{ --topic:oklch(0.70 0.075 168); --topic-tint:oklch(0.30 0.040 168); --topic-ink:oklch(0.86 0.055 168); }
html[data-theme="dark"] [data-topic="leadership-coaching"]{ --topic:oklch(0.66 0.130 15); --topic-tint:oklch(0.30 0.050 15); --topic-ink:oklch(0.84 0.075 15); }
html[data-theme="dark"] [data-topic="photography-people"]{ --topic:oklch(0.72 0.075 78); --topic-tint:oklch(0.30 0.040 78); --topic-ink:oklch(0.86 0.060 78); }
html[data-theme="dark"] [data-topic="blog-gedanken"]{ --topic:oklch(0.70 0.050 235); --topic-tint:oklch(0.30 0.030 235); --topic-ink:oklch(0.86 0.040 235); }
html[data-theme="dark"] [data-topic="gesundheit-philosophy"]{ --topic:oklch(0.70 0.018 250); --topic-tint:oklch(0.30 0.012 250); --topic-ink:oklch(0.86 0.016 250); }
html[data-theme="dark"] [data-topic="konflikt-spannung"]{ --topic:oklch(0.72 0.115 18); --topic-tint:oklch(0.31 0.045 18); --topic-ink:oklch(0.88 0.070 18); }
html[data-theme="dark"] [data-topic="organisation-system"]{ --topic:oklch(0.70 0.070 238); --topic-tint:oklch(0.30 0.035 238); --topic-ink:oklch(0.86 0.050 238); }
html[data-theme="dark"] [data-topic="wandel-veraenderung"]{ --topic:oklch(0.74 0.080 72); --topic-tint:oklch(0.32 0.040 72); --topic-ink:oklch(0.89 0.055 72); }
html[data-theme="dark"] [data-topic="zusammenarbeit-co-creation"]{ --topic:oklch(0.72 0.065 165); --topic-tint:oklch(0.31 0.034 165); --topic-ink:oklch(0.88 0.050 165); }
html[data-theme="dark"] [data-topic="haltung-denken"]{ --topic:oklch(0.72 0.055 310); --topic-tint:oklch(0.31 0.030 310); --topic-ink:oklch(0.88 0.042 310); }

/* =====================================================================
   PICTUREFISH v2 — Topic color system + Editorial nav + i18n + extras
   ===================================================================== */

/* topic palettes (earthy, mid-intensity, harmonized) */
/* Die sechs Themen liegen jetzt auf einem Faecher zwischen Lagune (250)   */
/* und Terra (15). Die Chroma ist gedaempft, damit die Farben neben dem     */
/* warmen Sand als eine Familie lesen statt als sechs Fremdfarben.          */
[data-topic="ai-vibe-coding"]{ --topic:oklch(0.50 0.100 250); --topic-tint:oklch(0.93 0.028 250); --topic-ink:oklch(0.40 0.095 250); }
[data-topic="landscape-alps"]{ --topic:oklch(0.52 0.080 168); --topic-tint:oklch(0.93 0.030 168); --topic-ink:oklch(0.41 0.075 168); }
[data-topic="leadership-coaching"]{ --topic:oklch(0.48 0.150 15); --topic-tint:oklch(0.93 0.032 15); --topic-ink:oklch(0.43 0.140 15); }
[data-topic="photography-people"]{ --topic:oklch(0.56 0.075 78); --topic-tint:oklch(0.93 0.032 78); --topic-ink:oklch(0.43 0.070 78); }
[data-topic="blog-gedanken"]{ --topic:oklch(0.53 0.050 235); --topic-tint:oklch(0.93 0.020 235); --topic-ink:oklch(0.42 0.045 235); }
[data-topic="gesundheit-philosophy"]{ --topic:oklch(0.50 0.020 250); --topic-tint:oklch(0.93 0.008 250); --topic-ink:oklch(0.41 0.018 250); }
[data-topic="konflikt-spannung"]{ --topic:oklch(0.52 0.145 18); --topic-tint:oklch(0.93 0.030 18); --topic-ink:oklch(0.43 0.130 18); }
[data-topic="organisation-system"]{ --topic:oklch(0.46 0.080 238); --topic-tint:oklch(0.93 0.020 238); --topic-ink:oklch(0.38 0.075 238); }
[data-topic="wandel-veraenderung"]{ --topic:oklch(0.56 0.090 72); --topic-tint:oklch(0.94 0.028 72); --topic-ink:oklch(0.44 0.080 72); }
[data-topic="zusammenarbeit-co-creation"]{ --topic:oklch(0.51 0.075 165); --topic-tint:oklch(0.93 0.026 165); --topic-ink:oklch(0.41 0.070 165); }
[data-topic="haltung-denken"]{ --topic:oklch(0.49 0.070 310); --topic-tint:oklch(0.93 0.022 310); --topic-ink:oklch(0.40 0.065 310); }

/* topic chip ---------------------------------------------------------- */
.topic-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px 6px; border-radius:99px; line-height:1;
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .2s, color .2s, border-color .2s;
}
.topic-chip__dot{
  width:8px; height:8px; border-radius:99px; background:var(--topic, var(--accent));
  display:inline-block; flex:none;
}
.topic-chip:hover{ background:var(--topic, var(--accent)); color:#fff; border-color:var(--topic, var(--accent)); }
.topic-chip:hover .topic-chip__dot{ background:#fff; }
.topic-chip{ cursor:pointer; }
.topic-chip[hidden]{ display:none !important; }   /* leerer Chip: display:inline-flex würde [hidden] sonst überschreiben */
.topic-chip.is-active{ background:var(--topic, var(--ink)); color:#fff; border-color:var(--topic, var(--ink)); }
.topic-chip.is-active .topic-chip__dot{ background:#fff; }
.archive-empty{ opacity:.6; margin-top:18px; }

/* intensity scaling --------------------------------------------------- */
body.intensity-1 [data-topic], body.intensity-Subtle [data-topic]{ --topic-tint:transparent; }
body.intensity-3 [data-topic] .post-card__topic, body.intensity-Strong [data-topic] .post-card__topic{ background:var(--topic); color:#fff; }
body.intensity-3 .archive-head--topic, body.intensity-Strong .archive-head--topic{ background:var(--topic-tint); }

/* post-card topic accents -------------------------------------------- */
.post-card{ position:relative; }
.post-card[data-topic] .post-card__title a{
  background-image:linear-gradient(var(--topic),var(--topic));
  background-size:0 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .35s ease;
}
.post-card[data-topic]:hover .post-card__title a{ background-size:100% 1px; }
.post-card__topic{
  position:absolute; left:10px; top:10px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 9px 5px; border-radius:99px; line-height:1;
  background:var(--paper); color:var(--ink); border:1px solid var(--topic, var(--ink));
  box-shadow:0 1px 0 rgba(63,63,63,.05);
}
.post-card[data-topic] .ph::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--topic);
  opacity:.85;
}

/* nav refresh -------------------------------------------------------- */
.gh-nav__link{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 4px; min-height:36px; display:inline-flex; align-items:center; color:var(--ink);
  border-bottom:1px solid transparent;
}
.gh-nav__link:hover{ border-bottom-color:var(--ink); }
.gh-nav__link--cta{ color:var(--accent-ink); }

/* dropdown */
.gh-nav__dd{ position:relative; }
.gh-nav__dd-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; border:0; cursor:pointer; padding:8px 4px; color:inherit;
  display:inline-flex; align-items:center; gap:6px; min-height:36px;
}
.gh-nav__dd-panel{
  position:absolute; top:100%; left:0; margin:0; padding:14px;
  list-style:none; background:var(--paper); border:1px solid var(--ink);
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; min-width:560px;
  box-shadow:0 12px 28px rgba(63,63,63,.12);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .18s, transform .18s, visibility .18s;
  z-index:55;
}
.gh-nav__dd[data-open="1"] .gh-nav__dd-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.gh-nav__dd-panel li{ margin:0; }
.gh-nav__dd-panel .topic-chip{ width:100%; justify-content:flex-start; padding:10px 14px; border-radius:8px; line-height:1.35; }

/* mobile: Topics-Button bündig zu den anderen Menüpunkten + Panel passt in den Viewport */
@media (max-width:767px){
  .gh-nav__dd-btn{ padding-left:0; }
  .gh-nav__dd-panel{ min-width:0; width:calc(100vw - 2 * var(--pad-x)); grid-template-columns:1fr; gap:8px; }
}

/* nav layouts via custom setting */
body.nav-centered .gh-nav, body.nav-Centered .gh-nav{ grid-template-columns:1fr; justify-items:center; row-gap:8px; }
body.nav-centered .gh-nav__menu, body.nav-Centered .gh-nav__menu{ justify-content:center; flex-wrap:wrap; }
body.nav-stacked .gh-nav, body.nav-Stacked .gh-nav{ grid-template-columns:1fr; row-gap:10px; padding:18px var(--pad-x); }
body.nav-stacked .gh-nav__menu, body.nav-Stacked .gh-nav__menu{ flex-wrap:wrap; gap:18px 22px; }

/* tag/author archive heads ------------------------------------------ */
.archive-head{ padding:32px var(--pad-x) 24px; border-bottom:1px solid var(--rule); }
.archive-head--topic{ background:var(--topic-tint, var(--paper-2)); }
.archive-head__kicker{ opacity:.65; margin-bottom:14px; }
.archive-head__h1{
  font-family:var(--serif); font-size:clamp(34px,4.4vw,58px); line-height:1.05; letter-spacing:-.015em;
  margin:0; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.topic-bullet{ width:clamp(12px,1.6vw,18px); height:clamp(12px,1.6vw,18px); border-radius:99px; background:var(--topic, var(--accent)); display:inline-block; flex:none; transform:translateY(-2px); }
.archive-head__lede{ font-size:clamp(16px,1.6vw,20px); line-height:1.45; max-width:640px; margin:18px 0 0; letter-spacing:-.005em; opacity:.85; }
.archive-head__sub{ margin-top:18px; opacity:.7; }
.archive-head__row{ row-gap:24px; }
.archive-head__avatar{ aspect-ratio:3/4; max-width:280px; }
.archive-head__social{ display:flex; gap:14px; margin-top:14px; opacity:.7; }
.archive-head__social a{ border-bottom:1px solid currentColor; }

/* topic grid --------------------------------------------------------- */
.topics-grid{ padding:48px 0; }
.topics-grid__cards{
  display:grid; gap:14px; margin-top:28px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.topic-card{
  display:grid; gap:8px; padding:18px 20px; border:1px solid var(--ink); border-radius:3px;
  background:var(--topic-tint, var(--paper));
  transition:transform .25s, background .25s;
  min-height:140px; align-content:start;
}
.topic-card:hover{ transform:translateY(-3px); background:var(--topic); color:#fff; }
.topic-card:hover .topic-card__count{ color:#fff; opacity:.9; }
.topic-card:hover .topic-card__dot{ background:#fff; }
.topic-card__dot{ width:14px; height:14px; border-radius:99px; background:var(--topic, var(--accent)); }
.topic-card__name{ font-family:var(--serif); font-size:24px; letter-spacing:-.018em; line-height:1.05; }
.topic-card__count{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; }
.topic-card__desc{ font-size:13px; line-height:1.4; color:var(--ink-soft); margin-top:4px; }
.topic-card--empty{ opacity:.55; }

/* article topic accents --------------------------------------------- */
.article[data-topic] .article__h1::before{
  content:""; display:block; width:48px; height:6px; background:var(--topic); margin-bottom:18px;
}
.article__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.article__head{ padding-top:48px; padding-bottom:24px; }
.article__lede{ font-size:clamp(20px,2.2vw,26px); line-height:1.4; letter-spacing:-.01em; margin:18px 0 0; max-width:720px; }
.article__meta{ margin-top:18px; opacity:.7; display:flex; gap:8px; flex-wrap:wrap; }
.article__author{ border-bottom:1px solid currentColor; }
.article__cover{ margin:24px 0 32px; }
.article__cover img{ width:100%; height:auto; }
.article__cover figcaption{ font-family:var(--mono); font-size:11px; opacity:.6; margin-top:8px; padding:0 var(--pad-x); }
.article__body{ font-size:clamp(16px, 2.4vw, 18px); line-height:1.65; max-width:720px; margin-left:auto; margin-right:auto; }
.article__body h2{ font-family:var(--serif); font-size:36px; margin:48px 0 14px; letter-spacing:-.018em; line-height:1.05; }
.article__body h3{ font-family:var(--serif); font-size:26px; margin:36px 0 10px; letter-spacing:-.012em; }
.article__body p{ margin:0 0 16px; }
.article__lede.serif .pf-terra-dot--body,
.pf-signature-copy .pf-terra-dot--body,
.article__body blockquote .pf-terra-dot--body,
.pf-workbook__body blockquote .pf-terra-dot--body,
.pf-map-page__content blockquote .pf-terra-dot--body{
  top:clamp(3px,.14em,6px); width:clamp(4px,.12em,5px); height:clamp(4px,.12em,5px);
  margin-left:clamp(5px,.18em,8px);
}
.pf-home-editorial__thought-copy .pf-terra-dot--body{
  top:clamp(5px,.11em,13px); width:clamp(5px,.07em,8px); height:clamp(5px,.07em,8px);
  margin-left:clamp(8px,.14em,16px);
}
.pf-toc__title .pf-terra-dot--toc,
.pf-toc__toggle .pf-terra-dot--toc,
.lc-theses__toggle .pf-terra-dot--toc,
.lc-theses h3 .pf-terra-dot,
.lc-impulse h3 .pf-terra-dot,
.lc-links h3 .pf-terra-dot{
  top:3px; width:4px; height:4px; margin-left:5px;
}
.article__body h2 .pf-terra-dot--body,
.article__body h3 .pf-terra-dot--body,
.pf-workbook__body h2 .pf-terra-dot--body,
.pf-workbook__body h3 .pf-terra-dot--body,
.pf-map-page__content h2 .pf-terra-dot--body,
.pf-map-page__content h3 .pf-terra-dot--body{
  top:clamp(4px,.12em,8px); width:clamp(4px,.08em,6px); height:clamp(4px,.08em,6px);
  margin-left:clamp(6px,.14em,10px);
}
.article__body a{ border-bottom:1px solid var(--topic, var(--accent)); }

/* author bio --------------------------------------------------------- */
.author-bio{ padding:32px 0; border-top:1px solid var(--rule); margin-top:40px; }
.author-bio__inner{ display:grid; grid-template-columns:1fr; gap:18px; max-width:720px; margin:0 auto; }
@media(min-width:768px){ .author-bio__inner{ grid-template-columns:120px 1fr; gap:24px; } }
.author-bio__avatar img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:99px; }
.author-bio__kicker{ opacity:.6; margin-bottom:8px; }
.author-bio__name{ font-size:28px; letter-spacing:-.018em; line-height:1.05; font-family:var(--serif); }
.author-bio__txt{ font-size:16px; line-height:1.55; color:var(--ink-soft); margin:8px 0 12px; }
.author-bio__link{ display:inline-block; border-bottom:1px solid; }

/* section padding helpers ------------------------------------------- */
.section-pad{ padding:48px 0; }
.section-pad--rule{ border-top:1px solid var(--rule); }

/* archive list (custom-archive page) -------------------------------- */
.archive-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.archive-list{ list-style:none; padding:0; margin:0; border-top:1px solid var(--ink); }
.archive-row{
  display:grid; grid-template-columns:1fr auto; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--rule); align-items:baseline;
  position:relative;
}
.archive-row[hidden]{ display:none !important; }   /* Filter: display:grid würde [hidden] sonst überschreiben */
.archive-row__date,.archive-row__rt{ grid-column:span 1; }
.archive-row__title{ grid-column:1/-1; order:1; font-size:18px; }
@media(min-width:768px){
  .archive-row{ grid-template-columns:80px 1fr auto auto; }
  .archive-row__date,.archive-row__rt{ grid-column:auto; }
  .archive-row__title{ grid-column:auto; order:0; font-size:20px; }
}
.archive-row::before{ content:""; position:absolute; left:-14px; top:18px; width:6px; height:6px; border-radius:99px; background:var(--topic, var(--ink-faint)); }
.archive-row__date{ opacity:.6; }
.archive-row__title{ font-family:var(--serif); letter-spacing:-.012em; line-height:1.2; }
.archive-row__title:hover{ color:var(--topic, var(--accent-ink)); }
.archive-row__topic{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border:1px solid var(--topic, var(--ink-faint)); color:var(--topic-ink, var(--ink)); border-radius:99px; }
.archive-row__rt{ opacity:.5; }
.archive-count{ margin-top:24px; opacity:.5; }
/* Archive: Alias-Topic-Farben für Primär-Tags außerhalb der 6 Kern-Topics (nur Punkte) */
.archive-row[data-topic="blog"],
.archive-row[data-topic="gedanken"]       { --topic:oklch(0.53 0.050 235); } /* = Blog & Gedanken */
.archive-row[data-topic="business"],
.archive-row[data-topic="strategie"],
.archive-row[data-topic="wardley-mapping"]{ --topic:oklch(0.48 0.150 15); }  /* = Leadership */
.archive-row[data-topic="erlebnis"],
.archive-row[data-topic="outdoor"],
.archive-row[data-topic="wandern"],
.archive-row[data-topic="alpen"],
.archive-row[data-topic="alps"]           { --topic:oklch(0.52 0.080 168); } /* = Landscape & Alps */

/* footer redo (real Ghost data) ------------------------------------- */
.gh-foot{ background:var(--footer-bg); color:var(--footer-fg); padding:56px var(--pad-x) 24px; margin-top:64px; }
.gh-foot__grid{ row-gap:32px; }
.gh-foot__col{ font-size:14px; line-height:1.55; }
.gh-foot__brand{ font-family:var(--serif); font-size:32px; letter-spacing:-.022em; margin-bottom:10px; }
.gh-foot__desc{ opacity:.7; max-width:380px; }
.gh-foot__kicker{ opacity:.5; margin-bottom:10px; }
.gh-foot__pitch{ font-size:22px; line-height:1.2; margin-bottom:14px; max-width:300px; }
.gh-foot__form{ display:flex; gap:0; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:6px; }
.gh-foot__form input{
  flex:1; background:transparent; border:0; color:var(--paper); padding:6px 0;
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
}
.gh-foot__form input::placeholder{ color:rgba(255,255,255,.5); }
.gh-foot__form input:focus{ outline:none; }
.gh-foot__form button{
  background:transparent; border:0; color:var(--accent); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 0 6px 12px;
}
.gh-foot__err{ font-family:var(--mono); font-size:11px; color:#E8899F; margin-top:6px; min-height:14px; }
.gh-foot__topics, .gh-foot__nav{ list-style:none; padding:0; margin:0; }
.gh-foot__topics li, .gh-foot__nav li{ padding:6px 0; }
.gh-foot__topics a{ display:flex; align-items:center; gap:8px; opacity:.85; }
.gh-foot__topics a:hover{ opacity:1; color:var(--topic, var(--accent)); }
.gh-foot__nav a{ opacity:.85; border-bottom:1px solid transparent; }
.gh-foot__nav a:hover{ border-bottom-color:var(--paper); opacity:1; }
.gh-foot__rule{ border-top:1px solid rgba(255,255,255,.18); margin:40px 0 16px; }
.gh-foot__bot{ display:flex; flex-direction:column; gap:8px; }
.gh-foot__bot .mono-xs{ opacity:.5; }
.gh-foot__bot a{ border-bottom:1px solid currentColor; }
@media(min-width:768px){ .gh-foot__bot{ flex-direction:row; justify-content:space-between; } }

/* error page --------------------------------------------------------- */
.err{ padding:80px 0; text-align:left; }
.err__kicker{ opacity:.6; margin-bottom:24px; }
.err__code{ font-family:var(--serif); font-size:clamp(120px,28vw,280px); line-height:.85; letter-spacing:-.04em; margin:0; }
.err__msg{ font-size:clamp(22px,3vw,32px); line-height:1.3; max-width:560px; margin:24px 0 0; }
.err__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }

/* pill styles refresh */
.pill{ display:inline-flex; align-items:center; padding:7px 14px 8px; border:1px solid var(--ink); border-radius:99px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; line-height:1; transition:background .2s, color .2s; }
.pill--solid,.pill--accent{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pill--accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.pill:hover{ background:var(--ink); color:var(--paper); }

/* pagination */
.pag{ display:flex; justify-content:space-between; align-items:center; padding:32px 0; border-top:1px solid var(--rule); margin:0 var(--pad-x); }
.pag a{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.pag a:hover{ color:var(--accent-ink); }
.pag__pos,.pag__disabled{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; opacity:.55; }

/* gh-content (Koenig editor) - already covered for kg-* in earlier appendix, ensure base styles */
.gh-content{ }
.gh-content figure{ margin:24px 0; }
.gh-content figure img{ width:100%; height:auto; }
.gh-content blockquote{ font-family:var(--serif); font-size:24px; line-height:1.35; padding-left:18px; border-left:3px solid var(--topic, var(--accent)); margin:24px 0; }
.gh-content code{ font-family:var(--mono); font-size:.95em; background:var(--paper-2); padding:1px 5px; border-radius:2px; }
.gh-content pre{ background:var(--ink); color:var(--paper); padding:16px; border-radius:3px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.5; margin:24px 0; }
.gh-content pre code{ background:transparent; padding:0; color:inherit; }
.gh-content ul,.gh-content ol{ padding-left:22px; margin:0 0 16px; }
.gh-content hr{ border-top:1px solid var(--rule); margin:32px 0; }

/* newsletter form on member pages */
[data-members-form] button{ cursor:pointer; }


/* responsive reading widths --------------------------------- */
/* Mobile-first: edge-to-edge minus pad. Container grows by breakpoint.
   NOTE: .article__body is deliberately excluded here — it gets a fixed reading
   measure below, so the body text keeps an optimal line length while header,
   meta, cover image and bio may use the wider container width. */
.article,
.author-bio__inner {
  max-width: 100%;
}
@media (min-width: 768px) {
  .article, .author-bio__inner { max-width: 680px; }
}
@media (min-width: 1024px) {
  .article, .author-bio__inner { max-width: 820px; }
}
@media (min-width: 1280px) {
  .article, .author-bio__inner { max-width: 960px; }
}
@media (min-width: 1600px) {
  .article, .author-bio__inner { max-width: 1100px; }
}
@media (min-width: 1920px) {
  .article, .author-bio__inner { max-width: 1240px; }
}

/* Reading column — optimal typographic measure (~68ch ≈ 60–75 chars/line),
   centered with whitespace on Desktop/Laptop. On mobile 68ch is wider than the
   viewport, so the column stays edge-to-edge (minus .wrap padding) as before. */
.article__body {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* Wide/Full Koenig cards still break out of the narrow reading column */
.article__body .kg-width-wide { width: min(100vw, 1400px); }
.article__body .kg-width-full { width: 100vw; }


/* mobile archive-head padding — mobile-first */
.archive-head { padding-left: 16px; padding-right: 16px; }
.archive-head__h1 { font-size: clamp(26px, 6.5vw, 40px); }
@media (min-width: 480px) {
  .archive-head { padding-left: 20px; padding-right: 20px; }
}
@media (min-width: 768px) {
  .archive-head { padding-left: max(var(--pad-x), 20px); padding-right: max(var(--pad-x), 20px); }
  .archive-head__h1 { font-size: clamp(34px, 4.4vw, 58px); }
}


/* mobile: breathing room around post-card text on edge-to-edge layouts — mobile-first */
.post-card__meta,
.post-card__title,
.post-card__excerpt,
.post-card__lede {
  padding-left: 14px;
  padding-right: 14px;
}
.post-card__topic {
  left: 16px !important;
  top: 16px !important;
}
@media (min-width: 480px) {
  .post-card__meta,
  .post-card__title,
  .post-card__excerpt,
  .post-card__lede {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (min-width: 768px) {
  .post-card__meta,
  .post-card__title,
  .post-card__excerpt,
  .post-card__lede {
    padding-left: 0;
    padding-right: 0;
  }
  .post-card__topic {
    left: 10px !important;
    top: 10px !important;
  }
}

/* image lift — Blog & Pages content images get a subtle shadow */
.kg-image-card img,
.kg-gallery-image img,
.gh-canvas .kg-image,
.post-feature-image img,
.post-full-image img{
  box-shadow: var(--img-shadow);
}
/* breathing room — archive & blog grid never flush against viewport edge */
/* .wrap mobile-first padding ladder — separate from --pad-x (nav/footer) */
@media (min-width:768px){ .wrap{ padding-left:36px !important; padding-right:36px !important; } }
@media (min-width:1024px){ .wrap{ padding-left:48px !important; padding-right:48px !important; } }
@media (min-width:1280px){ .wrap{ padding-left:var(--pad-x) !important; padding-right:var(--pad-x) !important; } }
/* At ≥1280, elements that intentionally use shorthand-padding to zero horizontal padding
   must explicitly restore 0 — because the .wrap !important ladder now wins over inline styles
   and later-declared shorthand classes. Preserve old-master cascade intent per element. */
@media (min-width:1280px){
  .wrap.pf-gal-section{ padding-left:0 !important; padding-right:0 !important; }
  .wrap[style*="padding:"]:not([class*="section-pad"]){ padding-left:0 !important; padding-right:0 !important; }
}

/* footer layout v3 — mobile-first grid */
.gh-foot .gh-foot__grid{
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  row-gap: 32px;
  align-items: start;
}
.gh-foot .gh-foot__grid > .gh-foot__col{
  grid-column: auto !important;
  min-width: 0;
}
@media (min-width: 480px){
  .gh-foot .gh-foot__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px){
  .gh-foot .gh-foot__grid{
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    column-gap: 28px;
    row-gap: 36px;
  }
}
@media (min-width: 1281px){
  .gh-foot .gh-foot__grid{
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    column-gap: 40px;
  }
}
.gh-foot__bot{ padding-top: 8px; }

/* ============================================================
   GALLERY (v2.2)
   A) Native Koenig Gallery Card .kg-gallery-card — refinements
   B) Custom Gallery page .pf-gal — justified layout via JS
   C) Lightbox .pf-lightbox — vanilla, keyboard + swipe
   ============================================================ */

/* --- A. Native Gallery Card refinements --- */
.gh-content .kg-gallery-card { margin: 48px 0; }
.gh-content .kg-gallery-image {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: zoom-in;
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
@media (hover:hover){
.gh-content .kg-gallery-image:hover {
  transform: translateY(-2px);
  box-shadow: var(--img-shadow-hover);
}
}
.gh-content .kg-gallery-image::after {
  /* Caption-Overlay — Text wird per JS aus dem img.alt gefüllt */
  content: attr(data-caption);
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 14px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.gh-content .kg-gallery-image:hover::after,
.gh-content .kg-gallery-image:focus-within::after { opacity: 1; }

@media (hover: none) {
  /* Touch: Caption always visible at reduced opacity */
  .gh-content .kg-gallery-image::after { opacity: .85; }
}

/* Topic-coloured hairline on hover (uses --accent set by [data-topic] on article) */
.gh-content .kg-gallery-image::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color .25s ease;
  pointer-events: none;
  z-index: 1;
}
.gh-content .kg-gallery-image:hover::before {
  border-color: var(--accent, rgba(0,0,0,.4));
}

/* --- B. Custom Gallery Page (.pf-gal) --- */
.pf-gal-section { padding: 24px 0 64px; }

.pf-gal-hero {
  margin: 0 0 32px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-height: 78vh;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--img-shadow);
}
.pf-gal-hero img {
  width: 100%;
  height: 100%;
  max-height: 78vh;
  object-fit: cover;
  display: block;
}
.pf-gal-hero figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
  margin-top: 10px;
  text-align: center;
  padding: 0 24px;
}

.pf-gal-intro { margin-bottom: 40px; }

.pf-gal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* container is laid out by JS — items get explicit width + height inline */
}
.pf-gal__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--rule, #eee);
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
  /* fallback size until JS runs (justified mode) */
  flex: 1 1 240px;
  min-height: 180px;
  /* Schatten — gleiche Tonalität wie .kg-image-card img */
  box-shadow: var(--img-shadow);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.pf-gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.pf-gal__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--img-shadow-hover);
}
.pf-gal__item:hover img { transform: scale(1.04); }

.pf-gal__item::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color .25s ease;
  pointer-events: none;
  z-index: 2;
}
.pf-gal__item:hover::before { border-color: var(--accent, rgba(0,0,0,.4)); }

.pf-gal__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 12px 10px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 3;
}
.pf-gal[data-show-captions="1"] .pf-gal__item:hover .pf-gal__cap,
.pf-gal[data-show-captions="1"] .pf-gal__item:focus-within .pf-gal__cap {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .pf-gal[data-show-captions="1"] .pf-gal__cap { opacity: .9; transform: none; }
}

.pf-gal-count {
  margin-top: 24px;
  opacity: .55;
  text-align: right;
}

/* Selectors target [data-gallery-mode] on <article>, because the partial-local
   {{mode}} is lost inside nested {{#get}}/{{#if}} blocks in Ghost. The article
   attribute is set in the outer scope of the partial where {{mode}} still works. */

/* Mobile fallback for JUSTIFIED mode — single column, fixed aspect */
/* Base (mobile): 1 col; at ≥701px JS layout takes over with multi-col */
[data-gallery-mode="justified"] .pf-gal { gap: 4px; }
[data-gallery-mode="justified"] .pf-gal__item {
  flex: 1 1 100% !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
}
@media (min-width: 701px) {
  [data-gallery-mode="justified"] .pf-gal { gap: 8px; }
  [data-gallery-mode="justified"] .pf-gal__item {
    flex: 1 1 240px !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: unset;
  }
}

/* ---------- MASONRY mode (CSS column-count, Pinterest-style) ---------- */
/* Base (mobile ≤700px): 1 column */
[data-gallery-mode="masonry"] .pf-gal {
  display: block !important;
  column-count: 1;
  column-gap: 0;
}
[data-gallery-mode="masonry"][data-gallery-density="Compact"]  .pf-gal { column-count: 1; }
[data-gallery-mode="masonry"][data-gallery-density="Standard"] .pf-gal { column-count: 1; }
[data-gallery-mode="masonry"][data-gallery-density="Spacious"] .pf-gal { column-count: 1; }

[data-gallery-mode="masonry"] .pf-gal__item {
  display: inline-block;            /* required for column flow */
  width: 100%;
  margin: 0 0 8px;
  break-inside: avoid;
  page-break-inside: avoid;         /* Firefox */
  -webkit-column-break-inside: avoid;
  flex: unset;
  min-height: 0;
  height: auto !important;          /* override any JS-set height */
}

[data-gallery-mode="masonry"] .pf-gal__item img {
  width: 100%;
  height: auto;
  object-fit: contain;              /* preserve full image */
}

/* ≥701px: 2–3 columns (matches master at 768/1024 via old ≤1100px rule) */
@media (min-width: 701px) {
  [data-gallery-mode="masonry"] .pf-gal,
  [data-gallery-mode="masonry"][data-gallery-density="Compact"]  .pf-gal { column-count: 3; column-gap: 8px;  }
  [data-gallery-mode="masonry"][data-gallery-density="Standard"] .pf-gal { column-count: 2; column-gap: 12px; }
  [data-gallery-mode="masonry"][data-gallery-density="Spacious"] .pf-gal { column-count: 2; column-gap: 16px; }
  [data-gallery-mode="masonry"] .pf-gal__item { margin-bottom: 12px; }
  [data-gallery-mode="masonry"][data-gallery-density="Spacious"] .pf-gal__item { margin-bottom: 16px; }
  [data-gallery-mode="masonry"][data-gallery-density="Compact"]  .pf-gal__item { margin-bottom: 8px;  }
}

/* ≥1101px: full column counts (master base, old >1100px state) */
@media (min-width: 1101px) {
  [data-gallery-mode="masonry"] .pf-gal                                        { column-count: 3; column-gap: 12px; }
  [data-gallery-mode="masonry"][data-gallery-density="Compact"]  .pf-gal { column-count: 4; column-gap: 8px;  }
  [data-gallery-mode="masonry"][data-gallery-density="Standard"] .pf-gal { column-count: 3; column-gap: 12px; }
  [data-gallery-mode="masonry"][data-gallery-density="Spacious"] .pf-gal { column-count: 2; column-gap: 16px; }
}

/* ---------- GRID mode (CSS grid, equal-height 4:3 cells) ---------- */
/* Base (mobile ≤700px): 1 column */
[data-gallery-mode="grid"] .pf-gal,
[data-gallery-mode="grid"][data-gallery-density="Compact"]  .pf-gal,
[data-gallery-mode="grid"][data-gallery-density="Standard"] .pf-gal,
[data-gallery-mode="grid"][data-gallery-density="Spacious"] .pf-gal {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 4px;
}

[data-gallery-mode="grid"] .pf-gal__item {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;              /* uniform cells; object-fit:cover handles the crop */
  flex: unset;
  min-height: 0;
}
[data-gallery-mode="grid"] .pf-gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ≥701px: multi-column auto-fill (master base) */
@media (min-width: 701px) {
  [data-gallery-mode="grid"]                                          .pf-gal { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  [data-gallery-mode="grid"][data-gallery-density="Compact"]  .pf-gal { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;  }
  [data-gallery-mode="grid"][data-gallery-density="Standard"] .pf-gal { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  [data-gallery-mode="grid"][data-gallery-density="Spacious"] .pf-gal { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; }
}

/* --- C. Lightbox --- */
.pf-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(63,63,63,.96);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.pf-lightbox.is-open { display: flex; }
.pf-lightbox__stage {
  position: relative;
  width: min(96vw, 1600px);
  height: min(82vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.pf-lightbox__img.is-loaded { opacity: 1; }

.pf-lightbox__cap {
  margin-top: 18px;
  padding: 0 32px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  text-align: center;
  max-width: 880px;
}
.pf-lightbox__cap a {
  color: rgba(255,255,255,.95);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
}
.pf-lightbox__cap a:hover { border-bottom-color: var(--accent, #fff); }

.pf-lightbox__count {
  position: absolute;
  top: 18px;
  left: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

.pf-lightbox__btn {
  position: absolute;
  background: none;
  border: 0;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  padding: 12px 16px;
  transition: color .2s ease, transform .2s ease;
  z-index: 2;
}
.pf-lightbox__btn:hover { color: #fff; transform: scale(1.1); }
.pf-lightbox__btn:focus-visible { outline: 2px solid var(--accent, #fff); outline-offset: 2px; }

.pf-lightbox__close { top: 14px; right: 18px; font-size: 26px; }
.pf-lightbox__prev  { left: max(12px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.pf-lightbox__next  { right: max(12px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
.pf-lightbox__prev:hover { transform: translateY(-50%) scale(1.1); }
.pf-lightbox__next:hover { transform: translateY(-50%) scale(1.1); }

/* Base (mobile ≤700px): smaller buttons, shorter stage, tighter cap */
.pf-lightbox__btn { font-size: 26px; padding: 10px 12px; }
.pf-lightbox__stage { height: 70vh; }
.pf-lightbox__cap { font-size: 11px; padding: 0 18px; }

/* ≥701px: full-size lightbox controls */
@media (min-width: 701px) {
  .pf-lightbox__btn { font-size: 32px; padding: 12px 16px; }
  .pf-lightbox__stage { height: min(82vh, 900px); }
  .pf-lightbox__cap { font-size: 12px; padding: 0 32px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pf-gal__item, .pf-gal__item img, .gh-content .kg-gallery-image,
  .pf-lightbox__img, .pf-lightbox__btn {
    transition: none !important;
  }
}

/* ── B2: light/dark theme toggle pill ── */
.pf-theme-toggle{ position:fixed; left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom));
  z-index:55; width:44px; height:44px; border-radius:99px; border:1px solid var(--rule);
  background:var(--paper-2); color:var(--ink); cursor:pointer; display:none; align-items:center; justify-content:center;
  font-size:18px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.pf-theme-toggle__icon{ transition:transform .3s, opacity .3s; }
@media (hover:hover){ .pf-theme-toggle:hover{ transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .pf-theme-toggle__icon{ transition:none; } }
/* desktop: floating pill; mobile: toggle lives inside the hamburger menu instead */
@media (min-width:768px){ .pf-theme-toggle{ display:flex; } }
.gh-nav__theme{ display:flex; align-items:center; gap:8px; min-height:36px; background:transparent; border:0; padding:6px 0; cursor:pointer; font:inherit; color:inherit; }
@media (min-width:768px){ .gh-nav__theme{ display:none; } }
/* Font Awesome Free icons (CC BY 4.0) — inline-SVG, self-hosted; theme-driven swap */
.pf-ico{ width:18px; height:18px; fill:currentColor; display:inline-block; vertical-align:-.18em; }
.pf-ico-sun{ display:none; }
html[data-theme="dark"] .pf-ico-moon{ display:none; }
html[data-theme="dark"] .pf-ico-sun{ display:inline-block; }

/* Mobile Satzbreite ---------------------------------------------------------
   Freigegebene Variante „Bestandstreu“: Die vorhandenen Themen-Chips bleiben
   sichtbar und umbrechen innerhalb des Viewports. Lange deutsche Komposita,
   Ueberschriften und Codezeilen duerfen die Seite nicht verbreitern. */
@media (max-width:760px){
  .article--page{
    padding-left:0;
    padding-right:0;
  }
  .article--page > .article__head.wrap,
  .article--page > .article__body.wrap,
  .article--essay > .article__head.wrap,
  .article--reportage > .article__head.wrap,
  .article--leadership > .article__head.wrap,
  .rt-layout.wrap{
    padding-left:22px!important;
    padding-right:22px!important;
  }
  .article__head,
  .article__body,
  .rt-layout,
  .rt-main,
  .pf-topic-page__hero,
  .pf-topic-page__hero-main{
    min-width:0;
    max-width:100%;
  }
  .article__h1,
  .article__body h2,
  .article__body h3,
  .pf-topic-page__hero h1,
  .pf-topic-page__lead h2,
  .pf-topic-page__row h2{
    overflow-wrap:anywhere;
    word-break:normal;
    hyphens:auto;
  }
  .article--page .article__body p,
  .article--page .article__body li,
  .article--page .article__body a,
  .article__body code{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .article__body pre,
  .gh-content pre{
    max-width:100%;
    overflow-x:visible;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .pf-topic-page__switcher{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 21px;
    overflow:visible;
    white-space:normal;
  }
  .pf-topic-page__switch{
    flex:0 1 auto;
    max-width:100%;
    white-space:normal;
  }
  .pf-topic-page__mobile-switcher{ display:none; }
}

/* ============================================================
   Ratgeber / Pillar-Page (custom-ratgeber.hbs)
   Lesespalte links + kuratierte sticky Inhaltsangabe rechts.
   Mobile-first: einspaltig, .pf-toc als Box oben; ab 1024px
   wird .pf-toc per JS in die rechte sticky Spalte gehoben.
   ============================================================ */
html{ scroll-behavior:smooth; }

/* Container: schmale .article-Leiter aufheben; Breite steuert .rt-layout/.wrap */
.article--essay, .article--reportage{ max-width:none; padding:48px 0 64px; }

/* Body-Layout — mobil einspaltig */
.rt-layout{ max-width:1200px; margin-left:auto; margin-right:auto; }
.rt-main .article__body{ max-width:68ch; }   /* Lesemaß beibehalten */
.rt-rail{ display:none; }                     /* mobil: .pf-toc bleibt inline im Body */

/* Kuratierte Inhaltsangabe-Box */
.pf-toc{ border:1px solid var(--rule); border-radius:8px; padding:20px 22px; background:var(--paper-2); }
.pf-toc__title{ font-family:var(--serif); font-size:18px; letter-spacing:-.01em; margin:0 0 14px; }
.pf-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pf-toc li{ margin:0; position:relative; padding-left:14px; }
.pf-toc li::before{ content:""; position:absolute; left:0; top:2px; bottom:2px; width:2px; border-radius:2px; background:var(--topic, var(--accent)); opacity:.45; transition:opacity .2s; }
.pf-toc li:hover::before{ opacity:1; }
.pf-toc a{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:inherit; line-height:1.4; }
.pf-toc a:hover{ text-decoration:underline; color:var(--accent-ink); }
.pf-toc__cta{ border-top:1px solid var(--rule); margin:16px 0 0; padding-top:14px; }
.pf-toc__cta a{ color:var(--accent-ink); }
.article__body .pf-toc{ margin:0 0 32px; }    /* mobil: Box oben im Artikel */
.article--essay .article__body h2{ scroll-margin-top:84px; }  /* Sprungziel nicht unter sticky-Nav */
.article--reportage .article__body h2,
.article--reportage .article__body img{ scroll-margin-top:84px; }

/* ── Reportage-Bausteine: Steckbrief / Schlüssel-Zitat / Bild-Index ──────────── */
.article__body .rp-facts, .article__body .rp-quote, .article__body .rp-index{ margin:0 0 28px; }
.rp-facts, .rp-index{ border:1px solid var(--rule); border-radius:8px; padding:18px 20px; background:var(--paper-2); }
.rp-facts h3, .rp-index__title{ font-family:var(--serif); font-size:18px; letter-spacing:-.01em; margin:0 0 12px; }
/* Steckbrief „Auf einen Blick" */
.rp-facts dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 14px; }
.rp-facts dt{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; opacity:.6; padding-top:2px; }
.rp-facts dd{ margin:0; font-family:var(--mono); font-size:12px; line-height:1.4; }
/* Schlüssel-Zitat (Pull-quote mit linkem Akzentbalken in Themenfarbe) */
.rp-quote{ position:relative; margin-left:0; padding:2px 0 2px 16px; border:0; background:none;
  font-family:var(--serif); font-size:20px; line-height:1.35; letter-spacing:-.01em; color:var(--ink); }
.rp-quote::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:2px; background:var(--topic, var(--accent)); }
/* Bild-Index / Kontaktabzug */
.rp-index__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:8px; }
.rp-index__list li{ margin:0; }
.rp-index__item{ display:block; border:2px solid transparent; border-radius:6px; overflow:hidden; line-height:0; }
.rp-index__item img{ width:100%; aspect-ratio:1; object-fit:cover; display:block; opacity:.7; transition:opacity .2s; }
.rp-index__item:hover img{ opacity:1; }

/* Mobile (mobile-first): Inhaltsangabe auf-/zuklappbar, Default eingeklappt */
.pf-toc__toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:18px; letter-spacing:-.01em; color:inherit; }
.pf-toc__title{ display:none; }                       /* mobil: Button ersetzt die Überschrift */
.pf-toc__chev{ flex:none; transition:transform .2s ease; }
.pf-toc.is-open .pf-toc__chev{ transform:rotate(180deg); }
.pf-toc > ul{ display:none; }                         /* eingeklappt */
.pf-toc__cta{ display:none; }
.pf-toc.is-open > ul{ display:flex; margin-top:14px; }
.pf-toc.is-open .pf-toc__cta{ display:block; }

/* Desktop: zwei Spalten; rechte Spalte läuft beim Scrollen mit (sticky) */
@media (min-width:1024px){
  .rt-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; column-gap:48px; align-items:stretch; }
  .rt-main{ min-width:0; }
  .rt-main .article__body{ margin-left:0; margin-right:auto; }   /* linksbündig neben der Spalte */
  .rt-rail{ display:block; }
  .rt-rail__inner{ position:sticky; top:88px; display:flex; flex-direction:column; gap:32px; }  /* unter der sticky .gh-nav (top:0); gap = Abstand gestapelter Bausteine */
  .rt-rail .pf-toc{ margin:0; }
  /* Scrollspy: aktiver Abschnitt — Balken voll & dicker, Text kräftiger */
  .rt-rail .pf-toc li.is-active::before{ opacity:1; width:3px; }
  .rt-rail .pf-toc li.is-active a{ color:var(--ink); font-weight:600; }
  /* Reportage: gestapelte Bausteine in der Rail, Abstand + Index-Scrollspy */
  .rt-rail .rp-facts, .rt-rail .rp-quote, .rt-rail .rp-index{ margin:0; }
  .rt-rail .rp-index__list li.is-active .rp-index__item{ border-color:var(--topic, var(--accent)); }
  .rt-rail .rp-index__list li.is-active .rp-index__item img{ opacity:1; }
  /* leere Rail (keine Bausteine) → einspaltig, keine Lücke */
  .rt-layout:has(.rt-rail:empty){ grid-template-columns:minmax(0,1fr); }
  .rt-rail:empty{ display:none; }
  /* Desktop: kein Toggle, Inhalt immer ausgeklappt */
  .pf-toc__toggle{ display:none; }
  .pf-toc__title{ display:block; }
  .pf-toc > ul{ display:flex; }
  .pf-toc__cta{ display:block; }
}

/* === pf-stamp: KI/Mensch-Kennzeichnung (Gummistempel) ==================== */
.pf-stamp{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:.5em .95em;border:2.5px solid currentColor;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--paper),inset 0 0 0 2.5px currentColor;filter:url(#pfStampRough);width:max-content;line-height:1;vertical-align:middle}
.pf-stamp svg{width:1.15em;height:1.15em;flex:none}
.pf-stamp--hand{color:var(--ink);transform:rotate(-2.5deg)}
.pf-stamp--ki{color:var(--accent);transform:rotate(1.5deg)}
.pf-stamp--s{font-size:9.5px;padding:.38em .8em;border-width:2px;letter-spacing:.12em;box-shadow:inset 0 0 0 1px var(--paper),inset 0 0 0 2px currentColor}
.article__head .pf-stamp{margin-top:18px}
.post-card__meta .pf-stamp{margin-left:6px}
@media (prefers-reduced-motion:no-preference){.pf-stamp{transition:transform .15s ease}.pf-stamp:hover{transform:rotate(0deg)}}

/* iOS Safari fix: filter:url() (feTurbulence/feDisplacementMap) rendert auf iPhone/iPad fehlerhaft -> raue Kanten dort weglassen, Doppelrahmen bleibt */
@supports (-webkit-touch-callout: none){.pf-stamp{filter:none}}

/* ============================================================
   LEADERSHIP (custom-leadership) — v4.1
   Bordeaux-Topic, Essay-Satzspiegel mit erweiterter Rail
   (Kernthesen / Inhalt / Coaching-Impuls / Links) und
   generativer Header-Art (leadership-art.js).
   ============================================================ */

/* Topic-Umfärbung leadership-coaching: Kupfer (hue 45) → Bordeaux (hue 20) */
[data-topic="leadership-coaching"]{ --topic:oklch(0.48 0.150 15); --topic-tint:oklch(0.93 0.032 15); --topic-ink:oklch(0.43 0.140 15); }
html[data-theme="dark"] [data-topic="leadership-coaching"]{ --topic:oklch(0.66 0.130 15); --topic-tint:oklch(0.30 0.050 15); --topic-ink:oklch(0.84 0.075 15); }

/* Container-Verhalten wie Essay/Reportage; Sprungziele unter der Sticky-Nav */
.article--leadership{ max-width:none; padding:48px 0 64px; }
.article--leadership .article__body h2{ scroll-margin-top:84px; }

/* Header-Art: Band zwischen Kopf und Zweispalten-Raster */
.lc-art-wrap{ margin:12px auto 40px; }
.lc-art svg{ display:block; width:100%; height:auto; aspect-ratio:1200/420;
  border-radius:8px; box-shadow:var(--img-shadow); }

/* Rail-Karten — Grundform wie .rp-facts (Reportage) */
.lc-theses, .lc-impulse, .lc-links{ border:1px solid var(--rule); border-radius:8px;
  padding:18px 20px; background:var(--paper-2); }
.article__body .lc-theses, .article__body .lc-impulse, .article__body .lc-links{ margin:0 0 28px; }
.lc-theses h3, .lc-impulse h3, .lc-links h3{ font-family:var(--serif); font-size:18px;
  letter-spacing:-.01em; margin:0 0 12px; }

/* Kernthesen: kompakte Liste mit Topic-Spiegelstrich */
.lc-theses ul{ list-style:none; margin:0; padding:0; }
.lc-theses li{ position:relative; padding-left:16px; margin:0 0 10px;
  font-size:13.5px; line-height:1.5; }
.lc-theses li:last-child{ margin-bottom:0; }
.lc-theses li::before{ content:""; position:absolute; left:0; top:.55em;
  width:8px; height:2px; background:var(--topic, var(--accent)); }

/* Coaching-Impuls: getoente Karte. Statt Kursive traegt hier das halbfette */
/* Gewicht — die Hausschrift hat keinen kursiven Schnitt.                   */
.lc-impulse{ background:var(--topic-tint, var(--paper-2)); border-color:transparent; }
.lc-impulse p{ margin:0 0 10px; font-family:var(--serif); font-style:normal; font-weight:600;
  font-size:15px; line-height:1.5; color:var(--ink); }
.lc-impulse p:last-child{ margin-bottom:0; }

/* Weiterführende Links */
.lc-links ul{ list-style:none; margin:0; padding:0; }
.lc-links li{ margin:0 0 9px; font-size:13px; line-height:1.45; }
.lc-links li:last-child{ margin-bottom:0; }
.lc-links a{ border-bottom:1px solid var(--topic, var(--accent)); }

/* In der Rail übernimmt .rt-rail__inner (flex, gap 32px) die Abstände */
.rt-rail .lc-theses, .rt-rail .lc-impulse, .rt-rail .lc-links{ margin:0; }

/* Mobil (mobile-first): Kernthesen auf-/zuklappbar wie .pf-toc, Default eingeklappt */
.lc-theses__toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; background:none; border:0; padding:0; margin:0; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:18px; letter-spacing:-.01em; color:inherit; }
.lc-theses > h3{ display:none; }                      /* mobil: Button ersetzt die Überschrift */
.lc-theses__chev{ flex:none; transition:transform .2s ease; }
.lc-theses.is-open .lc-theses__chev{ transform:rotate(180deg); }
.lc-theses > ul{ display:none; }                      /* eingeklappt */
.lc-theses.is-open > ul{ display:block; margin-top:14px; }

/* Mobil: Impuls + Links stehen am Artikelende — Abstand zum letzten Absatz */
.article__body .lc-impulse{ margin-top:44px; }

@media (min-width:1024px){
  .lc-theses__toggle{ display:none; }
  .lc-theses > h3{ display:block; }
  .lc-theses > ul{ display:block; }
}


/* Fachartikel als PDF — Karte und Ablauf im Artikel.
   Einbau: an assets/css/screen.css anhängen (oder als eigene Datei einbinden).
   Farben und Radien folgen dem Hausdesign; die Variablen kommen aus dem Theme,
   die Rückfallwerte stehen daneben, damit der Baustein auch allein trägt. */
.pf-pdf {
  --pf-sand: var(--color-sand, #F0EEE9);
  --pf-ink: var(--color-ink, #2E2F2F);
  --pf-ink2: #5A5B5B;
  --pf-ink3: #8A8B8B;
  --pf-lagune: var(--color-lagune, #2F6D9E);
  --pf-linie: #D5D5D8;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--pf-linie);
}
.pf-pdf h2 { font-size: 1.05rem; margin: 0; }
.pf-pdf h3 { font-size: 1rem; margin: 0 0 .35rem; }
.pf-pdf p { margin: 0; }

.pf-pdf__karte { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.pf-pdf__sym {
  flex: 0 0 auto; width: 2.6rem; height: 3.2rem; display: grid; place-items: center;
  border: 1px solid var(--pf-lagune); border-radius: 4px; background: #EAF1F7;
  color: var(--pf-lagune); font-size: .62rem; font-weight: 700; letter-spacing: .06em;
}
.pf-pdf__text { flex: 1 1 15rem; }
.pf-pdf__zeile { font-size: .9rem; color: var(--pf-ink2); margin-top: .25rem; }

.pf-pdf__stufe {
  border: 1px solid var(--pf-linie); border-radius: 14px; padding: 1.1rem 1.2rem;
  background: var(--pf-sand);
}
.pf-pdf__unter { font-size: .9rem; color: var(--pf-ink2); }
.pf-pdf__feld { display: block; margin-top: .9rem; }
.pf-pdf__feld span {
  display: block; font-size: .78rem; font-weight: 600; color: var(--pf-ink2);
  margin-bottom: .35rem;
}
.pf-pdf__feld input {
  width: 100%; max-width: 26rem; padding: .7rem .85rem; font: inherit; font-size: 1rem;
  color: var(--pf-ink); background: #fff; border: 1px solid var(--pf-linie); border-radius: 10px;
}
.pf-pdf__feld input:focus { outline: 2px solid var(--pf-lagune); outline-offset: 1px; }
.pf-pdf__recht { font-size: .78rem; color: var(--pf-ink3); margin-top: .8rem; line-height: 1.55; }
.pf-pdf__hinweis { font-size: .85rem; color: #B33456; margin-top: .7rem; }

.pf-pdf__aktionen { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.pf-pdf__knopf {
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  min-height: 2.8rem; padding: .65rem 1.2rem; border-radius: 999px;
  background: var(--pf-lagune); color: #fff; border: 1px solid var(--pf-lagune);
}
.pf-pdf__knopf:hover { background: #285F8A; }
.pf-pdf__knopf--still { background: transparent; color: var(--pf-ink2); border-color: var(--pf-linie); }
.pf-pdf__knopf--still:hover { background: transparent; border-color: var(--pf-ink3); }

@media (prefers-color-scheme: dark) {
  .pf-pdf {
    --pf-sand: #16202400; --pf-ink: #E6E9E4; --pf-ink2: #96A6AA; --pf-ink3: #7A8A8E;
    --pf-lagune: #6BA9DE; --pf-linie: #2A383C;
  }
  .pf-pdf__stufe { background: rgba(107,169,222,.06); }
  .pf-pdf__feld input { background: #131b1e; color: #E6E9E4; }
  .pf-pdf__sym { background: rgba(107,169,222,.12); }
  .pf-pdf__knopf { color: #0F1517; }
}

/* Desktop-Lesesatz ---------------------------------------------------------
   Die physische Breite wächst über den Schriftgrad, nicht über mehr Zeichen
   pro Zeile. 36em bildet mit Brennweite Grotesk das freigegebene Lesemaß
   zuverlässiger ab als ch; Mobil und kleine Desktops bleiben unverändert. */
@media (min-width:1280px){
  .article__body{
    font-size:19px;
    line-height:1.6;
    max-width:36em;
  }
  .rt-main .article__body{ max-width:36em; }
  .article__body h2{ font-size:38px; }
  .article__body h3{ font-size:27px; }
  .rt-layout{ max-width:1280px; }
}

@media (min-width:1600px){
  .article__body{
    font-size:20px;
    line-height:1.58;
  }
  .article__body h2{ font-size:40px; }
  .article__body h3{ font-size:28px; }
  .rt-layout{ max-width:1360px; }
  .rt-layout:not(:has(.rt-rail:empty)){
    grid-template-columns:minmax(0,1fr) 320px;
    column-gap:56px;
  }
}