/* =========================================================
   easyrhetorik – Dieter Brandt

   FARBEN (nach Wirkung):
   ─ GRAFIT  #24211E   Primär-Fließtext auf hellem Grund
   ─ STEIN   #F3F2EF   Primär-Fließtext auf dunklem Grund
   ─ GRAU    #6B655F   Sekundär: Lead-Untertitel, Meta-Info (hell)
   ─ GRAU-HELL #A9A29A Sekundär: Lead, Meta (dunkel)
   ─ SANDSTEIN #E0D3C2 Akzent auf dunklem Grund: Preise, Nummern
   ─ BORDEAUX #8C2B3A  Signal: Buttons, Marken, Pausenstriche
   ─ BORDEAUX-HELL #A8404F  Signal auf dunklem Grund

   SCHRIFTEN (nach Rolle):
   ─ EB GARAMOND (--stimme) = Effekt, verlangsamt bewusst
     • Sektions-Überschriften (H1, H2)
     • Card-Titel (2–4-Wort-Bezeichnungen): .weg h3, .takt h3
     • Blickanker: Preise, Nummerierungen, Namen, Zitate
     • Merksatz-Zitat
   ─ PUBLIC SANS (--schrift) = Funktion, lässt lesen
     • Fließtext, Aufzählungen
     • FAQ-Fragen (ganze Sätze, keine Titel)
     • Buttons, Navigation, Labels, Meta-Info

   Faustregel: Was BENANNT wird → Garamond.
              Was GELESEN wird → Public Sans.

   Farbverteilung ca. 80/15/5 (Stein/Grafit/Bordeaux).
   Jeder Fließtext-Absatz mit Kernaussage bekommt die
   Primärfarbe (Grafit/Stein), nie die Sekundärfarbe.
   ========================================================= */


/* ---------- Schriften, lokal ausgeliefert (kein Fremdserver) ---------- */
@font-face{
  font-family:"EB Garamond";
  src:url("/assets/fonts/ebgaramond.woff2") format("woff2");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("/assets/fonts/publicsans.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;
  color-scheme:light only;

  --stein:#F3F2EF;
  --leinen:#E7E4DE;
  --grafit:#24211E;
  --bordeaux:#8C2B3A;
  --bordeaux-hell:#A8404F;
  --sandstein:#E0D3C2;
  --grau:#6B655F;
  --grau-hell:#A9A29A;
  --linie:rgba(36,33,30,.15);
  --linie-hell:rgba(243,242,239,.22);

  --stimme:"EB Garamond","Iowan Old Style","Hoefler Text","Palatino Linotype",Georgia,serif;
  --schrift:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --mass:70rem;
  --s2:1rem; --s3:1.618rem; --s4:2.618rem; --s5:4.236rem; --s6:6.854rem;
  --kopfhoehe:4.6rem;
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  background:var(--stein);color:var(--grafit);
  scroll-behavior:smooth;scroll-padding-top:calc(var(--kopfhoehe) + 1rem);
}
[id]{scroll-margin-top:calc(var(--kopfhoehe) + 1rem)}
body{
  margin:0;background:var(--stein);color:var(--grafit);
  font-family:var(--schrift);font-size:17px;line-height:1.65;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--bordeaux);text-underline-offset:.2em;text-decoration-thickness:1px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
.wrap{width:min(100% - 2.5rem, var(--mass));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--bordeaux);color:#fff;padding:.6rem 1rem}

/* ---------- Typografie ----------
   EB Garamond hat eine kleine x-Höhe. Deshalb laufen die Überschriften
   eine Spur größer und mit Schnitt 500 statt 400.                    */
h1,h2,h3,blockquote,.zitat{
  font-family:var(--stimme);font-weight:500;margin:0;
  letter-spacing:0;overflow-wrap:break-word;text-wrap:balance;
}
h1{font-size:clamp(2.7rem,6.2vw,4.6rem);line-height:1.04;max-width:17ch}
h2{font-size:clamp(1.95rem,3.5vw,2.7rem);line-height:1.14;max-width:22ch}
h2.weit{max-width:30ch}
h3{font-size:1.28rem;line-height:1.3;font-weight:600}
p{margin:0 0 1rem}
p,li,dd,dt,cite{overflow-wrap:break-word}
.lead{font-size:1.15rem;color:var(--grau);max-width:58ch;margin-top:1rem;line-height:1.6}
.zahl{font-variant-numeric:lining-nums tabular-nums}

.eyebrow{
  font-size:.71rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  color:var(--bordeaux);display:flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;line-height:1.5;
}
.eyebrow::before{content:"";width:2px;height:.95em;background:var(--bordeaux);flex:none}
.eyebrow--hell{color:var(--sandstein)}
.eyebrow--hell::before{background:var(--sandstein)}
.pause{color:var(--bordeaux);font-weight:400;padding:0 .06em}
.pause--hell{color:var(--sandstein)}
.pause--stark{color:var(--bordeaux-hell)}
.h2-zeile{white-space:nowrap}
.abschluss a:not(.knopf){color:var(--sandstein);text-decoration-color:rgba(224,211,194,.5)}
.abschluss a:not(.knopf):hover{text-decoration-color:var(--sandstein)}

/* ---------- Schaltflächen ----------
   flex:none verhindert, dass die Fläche in Flex-Containern
   unter ihre Textbreite schrumpft.                                   */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:1rem 1.618rem;
  background:var(--bordeaux);color:#fff;border:1px solid var(--bordeaux);
  font-family:var(--schrift);font-size:1rem;font-weight:600;line-height:1.2;
  text-decoration:none;text-align:center;white-space:nowrap;flex:none;max-width:100%;
}
.knopf:hover{background:var(--bordeaux-hell);border-color:var(--bordeaux-hell)}
.knopf:focus-visible{outline:2px solid var(--grafit);outline-offset:3px}
.textlink{color:var(--grafit);font-size:.97rem;text-underline-offset:.25em;text-decoration-color:rgba(36,33,30,.35)}
.textlink:hover{text-decoration-color:var(--grafit)}
.aktionen{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:var(--s4)}
.ctahinweis{font-size:.86rem;color:var(--grau);margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem}
.ctahinweis span{display:inline-flex;align-items:center}

/* ---------- Kopfzeile ---------- */
.kopf{background:var(--grafit);color:var(--stein);position:sticky;top:0;z-index:40}
.kopf-in{display:flex;align-items:center;gap:var(--s3);padding:.85rem 0;flex-wrap:wrap;min-height:var(--kopfhoehe)}
.marke{font-family:var(--stimme);font-size:1.45rem;color:var(--stein);text-decoration:none;
  line-height:1.05;flex:none;display:inline-flex;flex-direction:column;font-weight:500}
.marke-name{white-space:nowrap}
.marke .marke-zeile{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--schrift);font-size:.9rem;font-weight:700;font-style:normal;line-height:1;
  text-transform:lowercase;letter-spacing:0;color:var(--bordeaux-hell);margin-top:.344rem}
.marke .marke-zeile i{font-style:normal!important;text-transform:lowercase;line-height:1;font-weight:700}
.nav{margin-left:auto;display:flex;gap:1.35rem;flex-wrap:wrap;align-items:center}
.nav a:not(.knopf){color:var(--stein);text-decoration:none;font-size:.93rem;padding:.4rem 0;border-bottom:1px solid transparent;display:inline-block}
.nav a:not(.knopf):hover{border-bottom-color:var(--sandstein)}
.nav .knopf{min-height:42px;padding:.5rem 1.25rem;font-size:.9rem}

/* ---------- Hero ---------- */
.hero{padding:var(--s6) 0 var(--s5);background:var(--stein)}
.hero-grid{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5);align-items:center}
.hero .lead{font-size:1.18rem;max-width:44ch}
.bild{margin:0;position:relative;background:var(--leinen);overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover}
.bild--hoch{aspect-ratio:4/5}
@supports not (aspect-ratio:1/1){
  .bild--hoch{padding-top:125%}
  .bild--hoch img{position:absolute;inset:0}
}

.fakten{display:flex;gap:2.618rem;flex-wrap:wrap;margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--linie)}
.fakten>div{min-width:8rem}
.fakten dt{font-size:.69rem;text-transform:uppercase;letter-spacing:.15em;color:var(--grau)}
.fakten dd{margin:.3rem 0 0;font-family:var(--stimme);font-size:1.42rem;color:var(--grafit)}
.fakten dd small{font-family:var(--schrift);font-size:.72rem;color:var(--grau)}
.fakten>div:last-child dd{color:var(--bordeaux)}

.vertrauen{background:var(--leinen);color:var(--grau);padding:1.4rem 0;font-size:.93rem;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.vertrauen-in{display:flex;gap:2.4rem;flex-wrap:wrap;align-items:baseline}
.vertrauen b{color:var(--grafit);font-weight:600}

/* ---------- Abschnitte ---------- */
.sek{padding:var(--s6) 0;background:var(--stein)}
.sek+.sek{border-top:1px solid var(--linie)}
.kopfblock{max-width:44rem;margin-bottom:var(--s4)}
.zwei{display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s5)}
.zwei--bild{grid-template-columns:1fr 1.618fr;align-items:center}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.vier{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-top:var(--s4)}

.moment{border-top:2px solid var(--grafit);padding-top:1rem}
.moment h3{margin-bottom:.5rem}
.moment p{color:var(--grafit);margin:0}
.these-liste{display:grid;gap:1.618rem;align-content:center}
.these{border-left:2px solid var(--bordeaux);padding-left:1.4rem}
.these h3{margin-bottom:.4rem}
.these p{color:var(--grafit);margin:0}
.zitat-klein{color:var(--grau)}

/* ---------- Der Tag ---------- */
.tag{background:var(--grafit);color:var(--stein)}
section.tag,section.tag.sek{background:var(--grafit);color:var(--stein)}
.tag h2{color:#fff}
.tag .lead{color:var(--grau-hell)}
.linien{margin-top:var(--s5);border-top:1px solid var(--linie-hell)}
.takt{display:grid;grid-template-columns:6.5rem 1fr 1fr;gap:var(--s3);padding:1.5rem 0;border-bottom:1px solid var(--linie-hell);position:relative}
.takt::before{content:"";position:absolute;top:0;left:0;width:1px;height:20px;background:var(--sandstein)}
.zeit{font-family:var(--stimme);font-size:1.15rem;color:var(--sandstein);font-variant-numeric:lining-nums tabular-nums;padding-top:.1rem}
.takt h3{color:var(--stein);font-size:1.15rem}
.takt p{color:var(--stein);font-size:.96rem;margin:0;line-height:1.55}
.schritt{font-size:.71rem;text-transform:uppercase;letter-spacing:.13em;color:var(--grau-hell);margin-top:.4rem;display:block}

/* ---------- Methode ---------- */
.stufe{border-top:2px solid var(--bordeaux);padding-top:1rem}
.stufe .buchstabe{font-family:var(--stimme);font-size:2.6rem;line-height:1;color:var(--bordeaux);display:block;margin-bottom:.3rem}
.stufe h3{font-size:1.06rem;margin-bottom:.3rem}
.stufe p{color:var(--grafit);font-size:.94rem;margin:0;line-height:1.5}
.methode-fuss{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4);align-items:start}
.merksatz{border-left:2px solid var(--bordeaux);padding:.2rem 0 .2rem 1.4rem;max-width:46ch}
.merksatz p{font-family:var(--stimme);font-size:1.45rem;line-height:1.32;margin:0 0 .5rem}
.merksatz cite{font-style:normal;font-size:.84rem;color:var(--grau)}
.merksatz-quelle{display:block;margin-top:.35rem;font-size:.82rem;color:var(--grau-hell)}
.fliess{color:var(--grafit);margin:0;max-width:62ch}

/* ---------- Trainer ---------- */
.zitat{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.32;margin:1.4rem 0 1rem}
.zitat-quelle{font-size:.85rem;color:var(--grau)}
.trainer-text{align-self:center}
.trainer-text .fliess{margin-top:1.4rem}

/* ---------- Ergebnisse ---------- */
.ergebnis{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.ergebnis li{padding:1rem 0;border-bottom:1px solid var(--linie)}
.ergebnis li:last-child{border-bottom:0}
.ergebnis li:nth-child(1),.ergebnis li:nth-child(2){border-top:1px solid var(--linie)}

/* ---------- Fragen ---------- */
.fragen-liste{max-width:46rem}
.frage{border-bottom:1px solid var(--linie)}
.frage:first-child{border-top:1px solid var(--linie)}
.frage summary::marker{content:""}
.frage summary{cursor:pointer;display:block;list-style:none;padding:1.05rem 2.2rem 1.05rem 0;position:relative;font-family:var(--schrift);font-size:1.05rem;font-weight:400;line-height:1.45;color:var(--grafit)}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:.2rem;top:.9rem;color:var(--bordeaux);font-size:1.35rem;font-family:var(--schrift)}
.frage[open] summary::after{content:"–"}
.frage p{max-width:64ch;color:var(--grafit);padding-bottom:.4rem}

/* ---------- Abschluss ---------- */
section.abschluss{background:var(--grafit);color:var(--stein);padding:var(--s6) 0}
.abschluss h2{color:#fff;max-width:30ch}
.abschluss .lead{color:var(--grau-hell)}
.abschluss-kopf{max-width:44rem;margin-bottom:var(--s5)}
.wege{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:stretch}
.weg{border-top:1px solid var(--linie-hell);padding-top:1.618rem;display:flex;flex-direction:column}
.weg h3{color:var(--stein);margin-bottom:.5rem}
.weg p{color:var(--stein);font-size:.97rem;line-height:1.55}
.weg-fuss{margin-top:auto;padding-top:1.618rem}
.weg-fuss .knopf{margin-top:1rem}
.preis{font-family:var(--stimme);font-size:2rem;color:var(--sandstein);display:block;line-height:1.15;font-variant-numeric:lining-nums}
.preis small{font-family:var(--schrift);font-size:.79rem;color:var(--grau-hell);display:block;margin-top:.35rem;line-height:1.5}
.abschluss-kontakt{margin-top:var(--s4);color:var(--grau-hell);font-size:.97rem}
.abschluss-kontakt a{color:var(--sandstein)}

/* ---------- Handlungsleiste (nur Telefon) ---------- */
.handlungsleiste{display:none}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--grafit);color:var(--grau-hell);border-top:1px solid var(--linie-hell);padding:var(--s4) 0;font-size:.88rem}
.fuss-in{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:space-between}
.fuss-in>div{min-width:0}
.fuss a{color:var(--grau-hell);word-break:break-word}
.fuss strong{color:var(--stein)}

/* ---------- Rechtstexte ---------- */
.rechtstext{padding:var(--s5) 0 var(--s6)}
.rechtstext .wrap{width:min(100% - 2.5rem, 46rem)}
.rechtstext h1{font-size:clamp(2.2rem,4vw,3rem);margin-bottom:var(--s4);max-width:none}
.rechtstext h2{font-size:1.45rem;margin:var(--s4) 0 .8rem;max-width:none}
.rechtstext p,.rechtstext li{color:var(--grau)}
.rechtstext strong{color:var(--grafit)}

/* =========================================================
   Umbruchpunkte
   ========================================================= */
@media (max-width:1100px){
  :root{--s6:5rem; --s5:3.25rem}
  .takt{grid-template-columns:5.5rem 1fr 1fr;gap:1.2rem}
}

@media (max-width:860px){
  .zwei,.zwei--bild,.hero-grid,.drei,.wege,.methode-fuss,.ergebnis{grid-template-columns:1fr;gap:var(--s4)}
  .ergebnis{gap:0}
  .ergebnis li:nth-child(2){border-top:0}
  .vier{grid-template-columns:1fr 1fr}
  .takt{grid-template-columns:4.5rem 1fr;gap:1rem}
  .takt>p{grid-column:2}
  .nav{width:100%;margin-left:0;gap:1rem}
  .hero{padding:var(--s5) 0 var(--s4)}
  .sek,.tag,.abschluss{padding:var(--s5) 0}
  .bild--hoch{aspect-ratio:1/1}
  .zwei--bild figure{max-width:22rem}
  .weg-fuss{margin-top:1.2rem}
}

@media (max-width:560px){
  :root{--s6:3.75rem; --s5:2.75rem; --s4:2rem; --kopfhoehe:3.5rem}
  body{font-size:16.5px}
  .h2-zeile{white-space:normal}
  .abschluss h2 .pause{display:none}
  .wrap{width:min(100% - 2rem, var(--mass))}
  .kopf-in{padding:.55rem 0;gap:.75rem;flex-wrap:nowrap;align-items:center}
  .marke{font-size:1.15rem}
  .marke-zeile{font-size:.71rem;margin-top:.27rem}
  .nav{width:auto;margin-left:auto;gap:.95rem;flex-wrap:nowrap;overflow-x:auto;
       scrollbar-width:none;-webkit-overflow-scrolling:touch;
       -webkit-mask-image:linear-gradient(90deg,#000 96%,transparent);
       mask-image:linear-gradient(90deg,#000 96%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .nav a:not(.knopf){font-size:.82rem;white-space:nowrap;padding:.3rem 0}
  .nav .knopf{display:none}
  .hero .lead{font-size:1.06rem}
  .aktionen{gap:.75rem}
  .aktionen .knopf{flex:1 1 100%;white-space:normal}
  .fakten{gap:1.1rem 1.6rem}
  .fakten>div{min-width:6.5rem;flex:1 1 42%}
  .fakten dd{font-size:1.2rem}
  .vertrauen-in{gap:.5rem 1.4rem;font-size:.88rem}
  .vier{grid-template-columns:1fr}
  .takt{grid-template-columns:4rem 1fr;gap:.4rem .9rem;padding:1.25rem 0}
  .merksatz p{font-size:1.25rem}
  .frage summary{font-size:1.02rem;padding-right:2.2rem}
  .preis{font-size:1.7rem}

  .handlungsleiste{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--grafit);border-top:1px solid rgba(243,242,239,.16);
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));gap:.6rem;
    transform:translateY(115%);opacity:0;
    transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .5s ease-out;
    pointer-events:none;visibility:hidden}
  .handlungsleiste.is-visible{transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible}
  .handlungsleiste a{flex:1 1 0;min-height:48px;display:inline-flex;align-items:center;justify-content:center;
    font-size:.95rem;font-weight:600;text-decoration:none;padding:.7rem .5rem;white-space:nowrap}
  .handlungsleiste .primaer{background:var(--bordeaux);color:#fff}
  .handlungsleiste .sekundaer{background:transparent;color:var(--stein);border:1px solid rgba(243,242,239,.45);font-weight:500}
  body{padding-bottom:0;transition:padding-bottom .55s cubic-bezier(.22,.61,.36,1)}
  body.has-sticky{padding-bottom:4.6rem}
}

@media (max-width:360px){
  h1{font-size:2.3rem}
  .knopf{padding:.85rem 1.1rem;font-size:.95rem}
}

@media (min-width:1500px){
  :root{--mass:74rem}
  body{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- Druckfassung ---------- */
@media print{
  .kopf,.nav,.aktionen,.skip,.handlungsleiste,.ctahinweis{display:none!important}
  body{padding-bottom:0}
  body,.sek,.hero,.tag,.abschluss,.fuss,section.tag,section.abschluss{background:#fff!important;color:#000!important}
  .tag h2,.tag h3,.takt h3,.abschluss h2,.weg h3,.zeit,.preis,.fuss strong{color:#000!important}
  .takt p,.tag .lead,.abschluss .lead,.weg p,.fuss,.fuss a,.abschluss-kontakt{color:#333!important}
  .bild{max-width:9cm}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  details[open],details{break-inside:avoid}
  details:not([open])>*:not(summary){display:block}
  .sek,.tag,.abschluss{padding:1.2rem 0;break-inside:avoid}
}