/* =====================================================================
   goc.css — Design-System "Geld oder Chaos?"
   Eine Datei für alle Seiten. Farbe, Schrift, Abstände, Bewegung.
   Wer hier etwas ändert, ändert es überall.

   Angelegt: 05.08.2026
   Schriften kommen aus /fonts/fonts.css (lokal gehostet, kein Google).
   ===================================================================== */

/* ==================================================================
   1. TOKENS  — Farben aus der Motion-Demo
   ================================================================== */
:root{
  --ink:#14181d;
  --ink-soft:#4a5058;
  --ink-mute:#5f6771;
  --cream:#f7f3ea;
  --paper:#fffdf8;
  --gold:#b8892f;
  --gold-text:#8a6620;      /* dunkler, damit kleiner Text lesbar bleibt */
  --line:#e2dccd;
  --line-2:#d0c7b2;
  --on-dark:#f2ede2;
  --on-dark-mute:#9aa0a8;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.7s;
  --wrap:1120px;
  --pad:clamp(1.25rem,5vw,2rem);
}

/* ==================================================================
   2. BASIS
   ================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-text)}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.015em;margin:0;color:var(--ink)}
h1{font-size:clamp(2.4rem,6.4vw,4.3rem);line-height:1.03}
h2{font-size:clamp(1.85rem,3.9vw,2.9rem);line-height:1.12}
h3{font-family:var(--body);font-weight:600;font-size:1.06rem;line-height:1.4;letter-spacing:0}
p{margin:0;color:var(--ink-soft);max-width:64ch}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--pad)}
.pad{padding-block:clamp(4.5rem,9vw,7.5rem)}
.eyebrow{
  font-size:.735rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);margin:0 0 1rem;
}
.lead{font-size:clamp(1.06rem,1.7vw,1.24rem);color:var(--ink-soft);line-height:1.6}
.small{font-size:.86rem;color:var(--ink-mute);line-height:1.6;max-width:70ch}
.rule{position:relative;padding-bottom:.62em}
.rule::after{
  content:"";position:absolute;left:0;bottom:0;width:3.4rem;height:2px;
  background:var(--gold);transform-origin:left;transition:transform .8s var(--ease) .2s;
}
.js .rule::after{transform:scaleX(0)}
.js .rule.is-in::after{transform:scaleX(1)}

/* ==================================================================
   3. BEWEGUNG  (ruhig, organisiert)
   ================================================================== */
.js [data-anim]{
  opacity:0;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-anim="rise"]{transform:translate3d(0,20px,0)}
.js [data-anim="fade"]{transform:none}
.js [data-anim="left"]{transform:translate3d(-22px,0,0)}
.js [data-anim="scale"]{transform:scale(.97)}
.js [data-anim].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-anim]{opacity:1!important;transform:none!important;transition:none!important}
  .js .rule::after{transform:scaleX(1)!important}
}

/* ==================================================================
   4. BUTTONS
   ================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-size:.95rem;font-weight:600;
  padding:.88rem 1.6rem;border-radius:4px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn--primary{background:var(--ink);color:var(--cream)}
.btn--primary:hover{background:var(--gold);color:#1a1208}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold-text)}
.btn--onDark{background:var(--cream);color:var(--ink)}
.btn--onDark:hover{background:var(--gold);color:#1a1208}
.btn[disabled]{opacity:.6;cursor:default}

.arrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.9rem;font-weight:600;color:var(--gold-text);text-decoration:none;
}
.arrow span{transition:transform .3s var(--ease)}
.arrow:hover span{transform:translateX(4px)}

/* ==================================================================
   5. KOPFZEILE
   ================================================================== */
/* Dunkles Band: hebt sich klar von der hellen Seite ab und nimmt die
   Farbe der dunklen Abschnitte (Spickzettel, Kontakt, Fuß) wieder auf. */
.top{
  position:sticky;top:0;z-index:60;
  background:var(--ink);                         /* Rückfall für ältere Browser */
  background:color-mix(in srgb,var(--ink) 94%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid #262c33;
  box-shadow:none;transition:box-shadow .3s var(--ease);
}
.top.is-stuck{box-shadow:0 6px 20px rgba(20,24,29,.16)}
.top__in{display:flex;align-items:center;gap:1.5rem;height:66px}
.brand{
  font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.01em;
  color:var(--on-dark);text-decoration:none;margin-right:auto;
}
.nav{display:flex;align-items:center;gap:1.55rem}
.nav a{font-size:.92rem;font-weight:500;color:#c3c9d0;text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--gold)}
.nav .btn{padding:.6rem 1.15rem;font-size:.88rem}
.nav .btn--primary{background:var(--gold);color:#1a1208;border-color:var(--gold)}
.nav .btn--primary:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.burger{
  display:none;background:none;border:1px solid #39404880;border-radius:4px;
  width:42px;height:38px;cursor:pointer;color:var(--on-dark);font-size:1.1rem;line-height:1;
}
@media (max-width:860px){
  .burger{display:block}
  .nav{
    position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid #262c33;padding:.5rem var(--pad) 1.25rem;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid #262c33}
  .nav .btn{margin-top:.9rem;border-bottom:0}
}

/* ==================================================================
   6. HERO
   ================================================================== */
.hero{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem)}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero__q{
  font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2vw,1.35rem);
  color:var(--gold-text);margin:1.6rem 0 0;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero__fig{position:relative}
.hero__fig img{
  border-radius:5px;width:100%;max-width:420px;margin-inline:auto;
  aspect-ratio:4/5;object-fit:cover;object-position:center 22%;
  border:1px solid var(--line);
}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__fig{order:-1}
  .hero__fig img{max-width:290px;aspect-ratio:1/1}
}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:2rem;border-top:1px solid var(--line);
}
.stat b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1;color:var(--gold-text);
}
.stat span{
  display:block;margin-top:.5rem;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-mute);
}
@media (max-width:620px){.stats{grid-template-columns:1fr;gap:1.35rem}}
.fussnote{margin-top:1.5rem;font-size:.8rem;color:var(--ink-mute);line-height:1.6;max-width:78ch}

/* ==================================================================
   7. SIGNATUR-SZENE: Aus Chaos wird Ordnung
   ================================================================== */
.order{--p:1;position:relative}
.js .order{--p:0;height:260vh}
.order__stage{
  display:grid;place-items:center;padding-block:5rem;overflow:hidden;
  background:var(--cream);
}
.js .order__stage{
  position:sticky;top:0;height:100vh;padding-block:0;background:var(--ink);
}
@supports (background:color-mix(in oklab,red,blue 50%)){
  .js .order__stage{background:color-mix(in oklab,var(--ink),var(--cream) calc(var(--p) * 100%))}
}
.order__inner{width:min(1000px,90vw);display:grid;gap:clamp(1.6rem,4vw,2.8rem);justify-items:center}
.order__line{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.8rem,5.8vw,4rem);line-height:1.06;letter-spacing:-.02em;
  text-align:center;margin:0;color:var(--ink);
}
@supports (color:color-mix(in oklab,red,blue 50%)){
  .js .order__line{color:color-mix(in oklab,var(--cream),var(--ink) calc(var(--p) * 100%))}
}
.word{position:relative;display:inline-block;white-space:nowrap}
.word--chaos::after{
  content:"";position:absolute;left:-.06em;right:-.06em;top:55%;height:3px;
  background:var(--gold);transform-origin:left;
}
.js .word--chaos::after{transform:scaleX(clamp(0,(var(--p) - .35) * 3,1))}
.word--order{color:var(--gold)}
.js .word--order{opacity:clamp(0,(var(--p) - .45) * 3,1)}

/* die Streuung: unruhig oben, ausgerichtet unten */
.scatter{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .6rem;max-width:760px}
.frag{
  font-size:.82rem;font-weight:500;letter-spacing:.02em;
  padding:.45rem .85rem;border-radius:3px;
  border:1px solid var(--line-2);color:var(--ink-soft);background:var(--paper);
}
.js .frag{
  color:var(--on-dark-mute);background:transparent;border-color:#2c3238;
  transform:translate3d(var(--fx,0),var(--fy,0),0) rotate(var(--fr,0deg));
  transition:transform .85s var(--ease),color .6s var(--ease),
             border-color .6s var(--ease),background .6s var(--ease);
  transition-delay:var(--fd,0ms);
}
.js .order.is-settled .frag{
  transform:none;color:var(--ink-soft);background:var(--paper);border-color:var(--line-2);
}
@media (prefers-reduced-motion:reduce){
  .js .order{height:auto}
  .js .order__stage{position:static;height:auto;padding-block:5rem;background:var(--cream)}
  .js .order__line{color:var(--ink)}
  .js .word--chaos::after{transform:scaleX(1)}
  .js .word--order{opacity:1}
  .js .frag{transform:none;color:var(--ink-soft);background:var(--paper);border-color:var(--line-2);transition:none}
}

/* ==================================================================
   8. KARTEN / RASTER
   ================================================================== */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--3{grid-template-columns:1fr}}
.card{
  background:var(--paper);padding:clamp(1.5rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:.65rem;
  transition:background .3s var(--ease);
}
.card:hover{background:#fff}
.card__no{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--ink-mute);
}
.card p{font-size:.95rem;flex:1}
.card .arrow{margin-top:.35rem}

/* ==================================================================
   9. ABLAUF (Zeitstrahl)
   ================================================================== */
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 3.1rem;max-width:640px}
.steps::before,.steps::after{
  content:"";position:absolute;left:1rem;top:.5rem;bottom:1.5rem;width:2px;
}
.steps::before{background:var(--line-2)}
.steps::after{background:var(--gold);transform:scaleY(var(--p,1));transform-origin:top}
.js .steps{--p:0}
.steps>li{position:relative;padding-bottom:2.1rem}
.steps>li:last-child{padding-bottom:0}
.steps>li::before{
  content:"";position:absolute;left:-2.55rem;top:.42rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:2px solid var(--gold);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.js .steps>li::before{background:var(--cream);border-color:var(--line-2)}
.js .steps>li.is-lit::before{background:var(--gold);border-color:var(--gold)}
.steps h3{margin-bottom:.2rem}
.steps p{font-size:.95rem}
@media (prefers-reduced-motion:reduce){
  .js .steps{--p:1}
  .js .steps>li::before{background:var(--gold);border-color:var(--gold)}
}

/* ==================================================================
   10. ÜBER MICH / STIMMEN
   ================================================================== */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.split img{border-radius:5px;max-width:360px;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 22%;border:1px solid var(--line)}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{
  background:var(--paper);border:1px solid var(--line);border-radius:5px;
  padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.85rem;
}
.quote blockquote{margin:0;font-size:.97rem;color:var(--ink-soft);line-height:1.6}
.quote cite{font-style:normal;font-size:.85rem;font-weight:600;color:var(--ink)}
.stars{color:var(--gold-text);letter-spacing:.12em;font-size:.9rem}
.ratingbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:0 0 1.75rem;font-size:.92rem;color:var(--ink-soft);
}
.ratingbar b{color:var(--ink)}

/* ==================================================================
   11. DUNKLE BÄNDER (Spickzettel, Abschluss)
   ================================================================== */
.dark{background:var(--ink);color:var(--on-dark)}
.dark h2,.dark h3{color:var(--on-dark)}
.dark p{color:#b9bfc7}
.dark .eyebrow{color:var(--gold)}
.dark .small{color:var(--on-dark-mute)}
.dark a{color:var(--gold)}
.dark .rule::after{background:var(--gold)}

/* ==================================================================
   12. FORMULARE
   ================================================================== */
.feld{display:grid;gap:.4rem;margin-bottom:1rem}
.feld label{font-size:.83rem;font-weight:600;letter-spacing:.02em}
.feld input,.feld select,.feld textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:4px;
  padding:.78rem .9rem;width:100%;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,137,47,.15);
}
.feld textarea{min-height:110px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.check{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.85rem .9rem;border:1px solid transparent;border-radius:4px;
  margin-bottom:.7rem;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.check input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--gold)}
.check span{font-size:.9rem;line-height:1.55}
/* Rote Hervorhebung, wenn die Pflicht-Zustimmung fehlt */
.check.fehlt{border-color:#c0392b;background:rgba(192,57,43,.07)}
.dark .check.fehlt{border-color:#e8776a;background:rgba(232,119,106,.12)}
.check__warn{
  display:none;font-size:.85rem;font-weight:600;color:#c0392b;margin:-.2rem 0 .8rem;
}
.dark .check__warn{color:#e8776a}
.check__warn.an{display:block}

.formhinweis{font-size:.83rem;color:var(--ink-mute);line-height:1.6;margin-top:.9rem}
.dark .formhinweis{color:var(--on-dark-mute)}
.status{margin-top:1rem;font-size:.93rem;font-weight:500;line-height:1.6}
.status.ok{color:#2f7d4f}
.status.fehler{color:#c0392b}
.dark .status.ok{color:#8fd6a8}
.dark .status.fehler{color:#e8776a}

.spick{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.spick{grid-template-columns:1fr}}
.spickform{background:#1b2026;border:1px solid #2c3238;border-radius:6px;padding:clamp(1.5rem,3vw,2rem)}
.spickform .feld input{background:#14181d;border-color:#333a41;color:var(--on-dark)}
.spickform .feld input:focus{border-color:var(--gold)}
.spickform .feld label{color:var(--on-dark)}
.spickform .check span{color:#c4cad1}

/* ==================================================================
   13. FAQ
   ================================================================== */
.faq{border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-weight:600;font-size:1rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  font-size:1.3rem;font-weight:400;color:var(--gold-text);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 1.4rem;font-size:.96rem}

/* ==================================================================
   14. ABSCHLUSS / KONTAKT
   ================================================================== */
.kontakt{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.kontakt{grid-template-columns:1fr}}
.kontaktform{background:#1b2026;border:1px solid #2c3238;border-radius:6px;padding:clamp(1.5rem,3vw,2rem)}
.kontaktform .feld input,.kontaktform .feld select,.kontaktform .feld textarea{
  background:#14181d;border-color:#333a41;color:var(--on-dark);
}
.kontaktform .feld label{color:var(--on-dark)}
.zeile2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.zeile2{grid-template-columns:1fr}}

/* ==================================================================
   15. SOCIAL / FUSS
   ================================================================== */
.social{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.social a{
  font-size:.9rem;font-weight:600;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-2);border-radius:4px;padding:.6rem 1.1rem;
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.social a:hover{border-color:var(--gold);color:var(--gold-text)}

.fuss{background:var(--ink);color:var(--on-dark-mute);padding-block:3.5rem 2rem;font-size:.9rem}
.fuss__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:820px){.fuss__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fuss__grid{grid-template-columns:1fr}}
.fuss h4{
  font-family:var(--body);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark);margin:0 0 .9rem;
}
.fuss a{color:var(--on-dark-mute);text-decoration:none;display:block;padding:.22rem 0}
.fuss a:hover{color:var(--gold)}
.fuss__brand{font-family:var(--display);font-size:1.1rem;color:var(--on-dark);text-decoration:none}
.fuss__ende{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #2c3238;
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;font-size:.85rem;
}


/* ==================================================================
   16. SCHWEBEKNOEPFE (WhatsApp / Termin / Anrufen)
   Auf der Startseite stehen sie im Quelltext, auf allen anderen
   Seiten baut track.js sie selbst ein.
   ================================================================== */
.sprung{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.sprung a{display:inline-flex;align-items:center;font-weight:700;font-size:.92rem;text-decoration:none;padding:11px 17px;border-radius:999px;box-shadow:0 4px 14px rgba(20,24,29,.3);transition:transform .25s var(--ease)}
.sprung a:hover{transform:translateY(-2px)}
.sprung__wa{background:#0F7A40;color:#fff}
.sprung__termin{background:var(--gold);color:#1a1208}
.sprung__tel{background:var(--ink);color:var(--on-dark);border:1px solid var(--gold)}
@media (max-width:600px){.sprung{right:12px;bottom:12px;gap:8px}.sprung a{padding:10px 15px;font-size:.87rem}}
@media print{.sprung,.top{display:none}}


/* =====================================================================
   17. INHALTSSEITEN — Magazin, Blogartikel, Lexikon, Landingpages,
       Über mich, Themenseiten, Rechtstexte.
       Ergänzt 07.08.2026. Klassennamen stammen aus den vorhandenen
       Seiten und wurden nicht umbenannt.
   ===================================================================== */

/* -------- Grundgerüst -------- */
.wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:var(--pad)}
.prose,.lexikon,.artikel{width:min(760px,100%);margin-inline:auto}

/* Kopfband dunkel, wie auf der Startseite */
body > header,.pagehead > header,.nav-in{
  background:var(--ink);color:var(--on-dark);
}
.nav-in{
  display:flex;align-items:center;gap:1.5rem;height:66px;
  width:min(1120px,100%);margin-inline:auto;padding-inline:var(--pad);
}
.nav-links{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
.nav-links a{font-size:.92rem;font-weight:500;color:#c3c9d0;text-decoration:none}
.nav-links a:hover{color:var(--gold)}
.nav-toggle{
  display:none;background:none;border:1px solid #39404880;border-radius:4px;
  width:42px;height:38px;color:var(--on-dark);cursor:pointer;
}
@media (max-width:820px){
  .nav-toggle{display:block;margin-left:auto}
  .nav-links{
    position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);padding:.5rem var(--pad) 1.25rem;display:none;
  }
  .nav-links.is-open{display:flex}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid #262c33}
}

/* -------- Seitenkopf -------- */
.pagehead{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.5rem)}
.pagehead h1{margin-bottom:.6rem}
.lede,.lead,.intro{
  font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--ink-soft);line-height:1.6;max-width:64ch;
}
.meta,.ago{font-size:.85rem;color:var(--ink-mute)}

/* -------- Fließtext der Artikel -------- */
.prose{font-size:1.06rem;line-height:1.75}
.prose > * + *{margin-top:1.1rem}
.prose h2{
  font-family:var(--display);font-size:clamp(1.45rem,2.8vw,1.95rem);font-weight:500;
  line-height:1.2;margin-top:2.6rem;
}
.prose h3{font-size:1.12rem;font-weight:600;margin-top:1.9rem}
.prose p{color:var(--ink-soft);max-width:none}
.prose ul,.prose ol{padding-left:1.3rem;color:var(--ink-soft)}
.prose li{margin-bottom:.5rem}
.prose strong{color:var(--ink)}
.prose a{color:var(--gold-text);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{
  margin:1.6rem 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid var(--gold);
  color:var(--ink-soft);font-style:normal;
}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.prose th,.prose td{padding:.7rem .6rem;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-weight:600;color:var(--ink)}

/* -------- Inhaltsverzeichnis -------- */
.toc{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius,5px);
  padding:1.2rem 1.4rem;margin:1.8rem 0;
}
.toc ul{list-style:none;margin:.6rem 0 0;padding:0}
.toc li{margin-bottom:.45rem}
.toc a{color:var(--ink-soft);text-decoration:none;font-size:.95rem}
.toc a:hover{color:var(--gold-text)}

/* -------- Kacheln, Kategorien, Übersichten -------- */
.areas,.values,.tiles{display:grid;gap:1.2rem}
.grid--2,.intro-grid{grid-template-columns:repeat(2,1fr)}
.areas,.values{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.areas,.values,.grid--2,.intro-grid{grid-template-columns:1fr}}
.tile,.acard,.block,.it{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius,5px);
  padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.6rem;
  transition:border-color .25s var(--ease);
}
.tile:hover,.acard:hover,.it:hover{border-color:var(--line-2)}
.tile h3,.acard h3,.block h3{font-size:1.05rem;font-weight:600}
.cat,.acat,.label{
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-text);
}
.num,.big,.money-figure,.value{
  font-family:var(--display);font-weight:500;line-height:1.05;color:var(--gold-text);
  font-size:clamp(1.6rem,3.2vw,2.3rem);
}
.sub,.note,.disc,.sign{font-size:.88rem;color:var(--ink-mute);line-height:1.6}

/* -------- Aufruf zum Gespräch -------- */
.cta,.cta-final,.ctabox,.closer,.contact,.band{
  background:var(--ink);color:var(--on-dark);border-radius:var(--radius,5px);
  padding:clamp(1.6rem,3.5vw,2.6rem);margin-top:2.6rem;
}
.cta h2,.cta-final h2,.ctabox h2,.closer h2,.contact h2,.band h2,
.cta h3,.ctabox h3{color:var(--on-dark)}
.cta p,.cta-final p,.ctabox p,.closer p,.contact p,.band p{color:#b9bfc7}
.btn-gold{background:var(--gold);color:#1a1208;border-color:var(--gold)}
.btn-gold:hover{background:var(--on-dark);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-text)}
.cta .btn-ghost,.ctabox .btn-ghost,.band .btn-ghost{color:var(--on-dark);border-color:#39404880}

/* -------- Teilen-Leiste -------- */
.share{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.share a{
  font-size:.85rem;font-weight:600;text-decoration:none;color:var(--ink);
  border:1px solid var(--line-2);border-radius:4px;padding:.5rem .9rem;
}
.share a:hover{border-color:var(--gold);color:var(--gold-text)}

/* -------- Porträt (Über mich) -------- */
.portrait,.portrait img{
  border-radius:5px;max-width:360px;width:100%;
  aspect-ratio:1/1;object-fit:cover;object-position:center 22%;
}

/* -------- Fußbereich -------- */
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;
}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
body > footer,.foot{background:var(--ink);color:var(--on-dark-mute);padding-block:3.5rem 2rem;font-size:.9rem;margin-top:4rem}
body > footer a,.foot a{color:var(--on-dark-mute);text-decoration:none;display:block;padding:.22rem 0}
body > footer a:hover,.foot a:hover{color:var(--gold)}
.foot-col h4{
  font-family:var(--body);font-size:.75rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark);margin:0 0 .9rem;
}
.foot-bottom{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #262c33;
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;font-size:.85rem;
}

/* Reste aus dem alten dunklen Entwurf unschaedlich machen */
.marble,.vein{background:none!important}
.reveal{opacity:1!important;transform:none!important}


/* =====================================================================
   18. INHALTSSEITEN — Gestaltung (07.08.2026)
   Rückmeldung: Die Seiten wirkten wie rohes HTML. Ursache: Ganze Kacheln
   stecken in einem Link, dadurch war jeder Text unterstrichen, und die
   Kachelklassen (.rcard, .acard) waren nicht gestaltet.
   ===================================================================== */

/* -------- Kopfband dunkel, volle Breite ------------------------------ */
.wrap > header{
  margin-inline:calc(50% - 50vw);
  padding-inline:max(var(--pad),calc(50vw - 560px + var(--pad)));
  padding-block:1.1rem;margin-bottom:clamp(2.5rem,6vw,4rem);
  background:var(--ink);border-bottom:1px solid #262c33;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.wrap > header .logo{
  font-family:var(--display);font-size:1.12rem;font-weight:600;
  letter-spacing:-.01em;color:var(--on-dark);
}
.wrap > header .logo span{color:var(--gold)}
.wrap > header .back{font-size:.92rem;font-weight:500;color:#c3c9d0}
.wrap > header a{text-decoration:none}
.wrap > header .back:hover{color:var(--gold)}

/* -------- Unterstreichungen nur im Fließtext ------------------------- */
a{text-decoration:none}
.prose a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}

/* -------- Seitenkopf ------------------------------------------------- */
section.hero:not(.wrap),.pagehead{padding-block:0 clamp(2rem,5vw,3rem);max-width:44rem}
section.hero:not(.wrap) h1,.pagehead h1{margin:.4rem 0 .8rem}
.eyebrow{
  font-size:.735rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);margin:0;
}
.lede,.lead{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--ink-soft);line-height:1.6}

/* -------- Kachelraster ----------------------------------------------- */
.grid:not(.grid--3){
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;
  margin-top:clamp(2rem,4vw,3rem);
}
@media (max-width:900px){.grid:not(.grid--3){grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid:not(.grid--3){grid-template-columns:1fr}}

/* Kachel: ganze Fläche ist der Link */
.rcard,.acard,.tile,.it{
  display:flex;flex-direction:column;gap:.55rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:5px;
  padding:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--ink);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.rcard:hover,.acard:hover,.tile:hover,.it:hover{
  border-color:var(--line-2);
  transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(20,24,29,.04),0 10px 26px rgba(20,24,29,.06);
}
/* Kategorie-Zeile über der Überschrift */
.rcat,.acat,.cat,.meta{
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-text);
}
/* Überschrift in der Kachel: ruhig, nicht als Link markiert */
.rcard h2,.rcard h3,.acard h2,.acard h3,.tile h2,.tile h3{
  font-family:var(--display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.2rem,2.2vw,1.45rem);line-height:1.2;color:var(--ink);margin:0;
}
.rcard p,.acard p,.tile p,.it p{
  font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0;flex:1;
}
/* "Jetzt prüfen →" */
.rgo,.go,.mehr{
  margin-top:.5rem;font-size:.9rem;font-weight:600;color:var(--gold-text);
  display:inline-flex;align-items:center;gap:.35rem;
}
.rcard:hover .rgo,.acard:hover .mehr{gap:.6rem}

/* -------- Abschlussband ---------------------------------------------- */
.closer,.cta,.cta-final,.ctabox,.contact,.band{
  margin-top:clamp(3rem,6vw,4.5rem);
  background:var(--ink);color:var(--on-dark);
  border-radius:6px;
  padding:clamp(1.8rem,4vw,3rem);
}
.closer h2,.cta h2,.ctabox h2,.contact h2,.band h2{color:var(--on-dark);margin-bottom:.7rem}
.closer p,.cta p,.ctabox p,.contact p,.band p{color:#b9bfc7;max-width:58ch}
.closer .btn,.cta .btn,.ctabox .btn,.band .btn{
  margin-top:1.4rem;background:var(--gold);color:#1a1208;border-color:var(--gold);
}
.closer .btn:hover,.cta .btn:hover,.band .btn:hover{background:var(--on-dark);color:var(--ink)}

/* -------- Artikelseiten ---------------------------------------------- */
.prose{width:min(720px,100%);margin-inline:auto;font-size:1.07rem;line-height:1.75}
.prose > * + *{margin-top:1.15rem}
.prose h2{
  font-family:var(--display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.7vw,1.9rem);line-height:1.2;margin-top:2.8rem;
}
.prose h3{font-size:1.1rem;font-weight:600;margin-top:2rem}
.prose p{color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:1.25rem;color:var(--ink-soft)}
.prose li{margin-bottom:.45rem}
.prose strong{color:var(--ink);font-weight:600}

/* Reste des alten dunklen Entwurfs unschaedlich machen */
.marble{background:none!important;position:static}
.vein{background:none!important}
.reveal{opacity:1!important;transform:none!important}

/* =====================================================================
   19. INHALTSSEITEN — Nacharbeit (11.08.2026)

   WARUM DIESER ABSCHNITT:
   Bei der Umstellung aller Seiten auf goc.css sind drei Bauweisen zum
   Vorschein gekommen, die es auf der Startseite nicht gibt und die
   deshalb vorher niemandem aufgefallen sind:
     a) ein alter Seitenkopf mit Zierlinie (header class="marble"),
     b) eine Kopfzeile direkt im body statt in .wrap,
     c) das Lexikon, das die Klasse ".term" fuer ganze Eintraege nutzt.
   Was hier steht, zieht diese drei Faelle nach. Nichts davon greift in
   die Startseite ein.
   ===================================================================== */

/* --- 19.1 Alter Seitenkopf mit Zierlinie -----------------------------
   Das svg.vein ist reine Zierde. Ohne Groessenangabe ist es auf ueber
   500 Pixel gewachsen und hat ein Loch in die Seite gerissen. Es liegt
   jetzt flach hinter dem Text. */
header.marble{
  position:relative!important;overflow:hidden;
  padding-block:clamp(2.5rem,6vw,4rem) clamp(2rem,5vw,3rem);
  padding-inline:max(1.5rem,calc(50vw - 528px));
}
header.marble > .vein{
  position:absolute!important;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.55;
}
header.marble > *:not(.vein){position:relative;z-index:1}
header.marble > .wrap{max-width:none;margin-inline:0;padding-inline:0}
header.marble .hero{padding-block:0}

/* --- 19.2 Kopfzeile direkt im body -----------------------------------
   Sie soll wie auf der Startseite ueber die ganze Breite laufen. Vorher
   sass die dunkle Farbe auf dem inneren Kasten, dadurch stand das Band
   wie ein Balken mitten im Hellen. */
body > nav,
body > header:not(.marble){
  background:var(--ink);
  border-bottom:1px solid #262c33;
}
body > nav .nav-in,
body > nav > .wrap,
body > header:not(.marble) > .wrap{
  background:transparent;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:1.05rem;
}
body > nav a,
body > header:not(.marble) a{color:var(--on-dark);text-decoration:none}
body > nav .logo,
body > header:not(.marble) .logo{
  font-family:var(--serif);font-size:1.12rem;font-weight:600;
  color:var(--on-dark);letter-spacing:-.01em;
}
body > nav .logo span,
body > header:not(.marble) .logo span{color:var(--gold)}
body > nav .nav-links{display:flex;align-items:center;gap:1.35rem}
body > nav .nav-links a{color:var(--on-dark-mute);font-size:.94rem}
body > nav .nav-links a:hover{color:var(--on-dark)}
body > nav .btn-gold,
body > nav .nav-links .btn-gold{
  background:var(--gold);color:#1b1408;
  padding:.6rem 1.05rem;border-radius:999px;
  font-weight:600;font-size:.92rem;border:0;
}
body > nav .btn-gold:hover{background:color-mix(in oklab,var(--gold) 86%,#000)}

@media (max-width:820px){
  body > nav{position:relative}
  body > nav .nav-links{display:none}
  body > nav .nav-links.is-open{
    display:flex;flex-direction:column;align-items:flex-start;
    position:absolute;left:0;right:0;top:100%;
    background:var(--ink);padding:1rem 1.5rem 1.4rem;gap:.9rem;
    border-bottom:1px solid #262c33;
  }
}

/* --- 19.3 Lesespalte --------------------------------------------------
   Ueberschrift und Absatz muessen gleich breit sein, sonst wirkt die
   Seite unruhig. Und: Ueberschriften im Artikel sind kleiner als auf der
   Startseite. Dort werben sie, hier gliedern sie nur. */
article:not(.card){max-width:44rem;margin-inline:auto}
article:not(.card) h1{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12;margin:.2rem 0 .5rem}
article:not(.card) h2{font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.3;margin:2.2rem 0 .55rem}
article:not(.card) h3{font-size:clamp(1.06rem,1.6vw,1.22rem);line-height:1.35;margin:1.6rem 0 .4rem}
article:not(.card) p,
article:not(.card) ul,
article:not(.card) ol,
article:not(.card) .lede,
article:not(.card) .lead{max-width:none}
article:not(.card) > * + *{margin-top:1rem}
article:not(.card) p{margin-block:0 1rem}

main.wrap{max-width:44rem}
main.wrap h1{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12}
main.wrap h2{font-size:clamp(1.22rem,2vw,1.5rem);margin:2.2rem 0 .5rem}
main.wrap h3{font-size:1.05rem;margin:1.4rem 0 .35rem}
main.wrap p,main.wrap li{max-width:none}

/* --- 19.4 Lexikon -----------------------------------------------------
   ".term" ist hier ein ganzer Eintrag, kein kleines Etikett. Vorher lief
   er in der Etiketten-Regel mit und stand komplett in Grossbuchstaben. */
.term{
  font-size:1rem;letter-spacing:normal;text-transform:none;
  color:var(--ink);max-width:44rem;
  padding-block:1.3rem;border-bottom:1px solid var(--line);
}
.term h2{
  font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.3;
  text-transform:none;letter-spacing:-.01em;margin:0 0 .35rem;
}
.term p{
  font-size:1rem;letter-spacing:normal;text-transform:none;
  color:var(--ink-soft);margin:0;max-width:none;
}
.term a{color:var(--gold-text)}

/* Sprungmarken: einzelne Knoepfe statt einer Textwand */
.toc{
  display:flex;flex-wrap:wrap;gap:.5rem;
  max-width:44rem;padding:1.15rem;
  border:1px solid var(--line);border-radius:14px;background:var(--paper);
}
.toc a{
  display:inline-block;padding:.4rem .8rem;
  border:1px solid var(--line-2);border-radius:999px;
  font-size:.86rem;color:var(--ink-soft);text-decoration:none;background:transparent;
}
.toc a:hover{border-color:var(--gold);color:var(--gold-text)}

/* --- 19.5 Zwei Klassen, zwei Bedeutungen -----------------------------
   ".it" ist auf manchen Seiten eine Kachel, in Ueberschriften aber nur
   eine kursive Hervorhebung. In Ueberschriften darf daraus deshalb keine
   Kachel werden. */
h1 .it,h2 .it,h3 .it{
  display:inline;background:none;border:0;border-radius:0;
  padding:0;box-shadow:none;font-style:italic;color:inherit;
}

/* Zweispalter auf "Ueber mich": die Spaltenangabe stand da, die
   Rasterschaltung fehlte, deshalb lagen Bild und Text uebereinander. */
.intro-grid{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media (max-width:820px){.intro-grid{grid-template-columns:1fr}}
.intro-grid img,.portrait img{width:100%;height:auto;display:block;border-radius:14px}

/* --- 19.6 Symbolflaechen ---------------------------------------------
   Ein inline-SVG ohne Groessenangabe wird so gross wie seine Spalte.
   Auf "Ueber mich" waren die drei kleinen Symbole dadurch ueber 300
   Pixel hoch und haben die Kacheln auseinandergezogen. */
.ic,.icon{
  width:2.6rem;height:2.6rem;display:grid;place-items:center;
  margin-bottom:.9rem;color:var(--gold);
}
.ic > svg,.icon > svg{width:100%;height:100%;display:block;stroke:currentColor}
.values .value{align-content:start}

/* --- 19.7 Grundgroesse fuer alle Symbole -----------------------------
   Die alten Seiten haben ihre Symbole im eigenen <style> massgeschneidert.
   Der ist beim Umstellen weggefallen, und ein inline-SVG ohne Groessen-
   angabe wird so breit wie seine Spalte. Auf "Ueber mich" waren die
   Haekchen dadurch ueber 1000 Pixel gross. Hier bekommt jedes SVG ohne
   eigene Groessenangabe ein vernuenftiges Mass. Die Startseite ist nicht
   betroffen: dort tragen alle Grafiken width und height im Quelltext. */
.wrap svg:not([width]):not([height]):not(.vein){width:1.15em;height:1.15em;flex:0 0 auto}
.ic > svg,.icon > svg{width:100%;height:100%}

/* Aufzaehlung mit Haekchen */
.money-list{list-style:none;padding:0;margin:0;max-width:44rem}
.money-list li{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.6rem 0;border-bottom:1px solid var(--line);
}
.money-list li svg{color:var(--gold);margin-top:.25em}

/* =====================================================================
   20. VIDEOKASTEN — Zwei-Klick-Loesung (11.08.2026)

   WARUM SO:
   Ein normal eingebundenes YouTube-Video baut schon beim Aufruf der
   Seite eine Verbindung zu Google auf, ohne dass der Besucher etwas
   getan hat. Hier passiert vor dem Klick nichts. Zu sehen ist nur ein
   Standbild von der eigenen Domain. Erst wenn jemand bewusst auf
   Abspielen drueckt, wird der YouTube-Rahmen eingesetzt, und zwar
   ueber youtube-nocookie.com. Die Logik dazu steht in goc.js.
   ===================================================================== */
.videobox{
  position:relative;margin-inline:auto;
  aspect-ratio:16/9;max-width:46rem;
  border-radius:16px;overflow:hidden;
  background:var(--ink);border:1px solid var(--line-2);
}
/* Hochkant gedreht (Handyformat) */
.videobox--hoch{aspect-ratio:9/16;max-width:23rem}

.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.videobox__start{
  position:absolute;inset:0;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;display:block;
  color:var(--on-dark);font:inherit;text-align:left;
}
.videobox__start img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.5;
}
.videobox__play{
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);
  width:4.4rem;height:4.4rem;border-radius:50%;
  background:var(--gold);color:#1b1408;
  display:grid;place-items:center;font-size:1.35rem;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .25s ease;
}
.videobox__start:hover .videobox__play{transform:translate(-50%,-50%) scale(1.06)}
.videobox__start:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.videobox__hinweis{
  position:absolute;left:0;right:0;bottom:0;
  padding:1rem 1.1rem;font-size:.8rem;line-height:1.45;
  color:var(--on-dark);
  background:linear-gradient(to top,rgba(10,12,15,.94),rgba(10,12,15,0));
}
.videobox__hinweis a{color:var(--gold);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .videobox__play{transition:none}
  .videobox__start:hover .videobox__play{transform:translate(-50%,-50%)}
}

/* --- 20.1 Zwei Knoepfe in einem dunklen Abschluss -------------------
   Der zweite Knopf (".btn-ghost") hatte im dunklen Kasten weder Rand
   noch Innenabstand und sah deshalb aus wie blosser Text neben einem
   Knopf. Ausserdem klebten beide aneinander. */
.cta .btn-ghost,.cta-final .btn-ghost,.band .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:4px;
  border:1px solid rgba(242,237,226,.4);
  color:var(--on-dark);text-decoration:none;font-weight:600;
  margin-top:22px;
}
.cta .btn-ghost:hover,.cta-final .btn-ghost:hover,.band .btn-ghost:hover{
  border-color:var(--gold);color:var(--gold);background:transparent;
}
.cta .btn + .btn-ghost,.cta .btn + .btn{margin-left:.75rem}
@media (max-width:520px){
  .cta .btn,.cta .btn-ghost{display:flex;width:100%}
  .cta .btn + .btn-ghost{margin-left:0;margin-top:.7rem}
}

/* Der Fuss innerhalb von .wrap hatte keinen Abstand nach oben und
   klebte am dunklen Kasten. */
.wrap > footer{
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:1.6rem;border-top:1px solid var(--line);
}