/* Körperjahre „Signal“: Ergänzungen für die Kursseiten /kurse/longevity/ und /kurse/fettstoffwechsel/.
   Erzeugt von _kursseiten-bauen.mjs. Baut auf assets/signal.css auf (Farben, Schriften, Kopf, Fuß, Knöpfe, FAQ,
   Andreas, Formular); hier steht nur, was die Startseite nicht hat. Nicht hier ändern, sondern im Bauskript. */

header nav a[aria-current="page"]{color:var(--sig)}

/* Kurs-Hero: Text links, Foto rechts (kein Text über dem Foto, damit kein Gesicht verdeckt wird); Handy: Foto oben */
.kh{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));min-height:max(640px,90vh);overflow:hidden}
.kh-img{position:relative;grid-column:8/-1;grid-row:1;min-height:100%;overflow:hidden}
.kh-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#0c0a09 0%,rgba(12,10,9,.3) 22%,rgba(12,10,9,0) 48%),linear-gradient(to top,rgba(12,10,9,.5) 0%,rgba(12,10,9,0) 35%)}
.kh-in{position:relative;grid-column:1/8;grid-row:1;align-self:end;padding:112px var(--pad) 40px}
.krumen ol{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,230,216,.6)}
/* 20.10.2026 (Nachtrag 18, wie die Evidenz in Lauf 3): Trennstrich am Ende eines Eintrags statt am Anfang des nächsten, damit am
   Handy keine Zeile mit „/“ beginnt (Fettstoffwechsel bei 360 px); die Namen haben keine Leerzeichen, die Einträge brechen nicht in sich um */
.krumen li:not(:last-child)::after{content:"/";margin-left:10px;color:rgba(240,230,216,.35)}
.krumen a{color:rgba(240,230,216,.82);text-decoration:underline;text-decoration-color:rgba(240,230,216,.3);text-underline-offset:4px}
.krumen a:hover{color:var(--sig)}
.krumen [aria-current]{color:var(--b)}
.kh .eyebrow{margin:0 0 18px}
.kh h1{margin:0;font-weight:500;font-size:clamp(34px,5.6vw,112px);line-height:.92;letter-spacing:-.05em;max-width:14ch;overflow-wrap:break-word}
.kh h1 .k1{display:block}
.kh h1 .k2{display:block;margin:10px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;font-size:.88em;line-height:.98;letter-spacing:-.02em;color:var(--sig)}
.kh-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 40px;align-items:end;margin-top:44px;padding-top:22px;border-top:1px solid rgba(240,230,216,.18)}
.kh-row p{margin:0;font-size:var(--lese);line-height:1.55;max-width:46ch;color:rgba(240,230,216,.84)}
.kh-row .ctas{grid-column:1/-1}

/* Abschnitte */
.ks{border-top:1px solid var(--line);padding:clamp(72px,10vw,140px) var(--pad) clamp(56px,7vw,96px)}
.ks .h2{font-size:clamp(36px,5vw,88px)}
.ks .h2 .serif{color:rgba(240,230,216,.55)}
.ks .lead{margin:24px 0 0;font-size:var(--lese);line-height:1.65;color:rgba(240,230,216,.72);max-width:62ch}

/* Für wen */
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px 40px;margin-top:40px}
.zwei > div{border-top:1px solid var(--line2);padding-top:16px}
.zwei .k{display:block;margin-bottom:10px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--sig)}
.zwei .nicht .k{color:rgba(240,230,216,.55)}
.zwei p{margin:0;font-size:var(--lese);line-height:1.6;color:rgba(240,230,216,.84);max-width:56ch}

/* Lernziele */
.ziele{list-style:none;margin:40px 0 0;padding:0;border-bottom:1px solid var(--line2)}
.ziele li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line2);font-size:clamp(17px,1.5vw,21px);line-height:1.45;letter-spacing:-.01em}
.ziele li span{font-family:var(--mono);font-size:14px;letter-spacing:0;color:var(--sig);padding-top:5px}

/* Module */
.mods{margin-top:48px;border-bottom:1px solid var(--line2)}
.mod{display:grid;grid-template-columns:48px minmax(0,4fr) minmax(0,6fr);gap:12px 32px;padding:28px 0;border-top:1px solid var(--line2)}
.mod .num{font-family:var(--mono);font-size:14px;color:var(--sig);padding-top:8px}
.mod h3{margin:0;font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.12;letter-spacing:-.03em}
.mod .meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;font-size:15px;color:rgba(240,230,216,.55)}
.mod .meta .vid{color:var(--sig)}
.mod .txt p{margin:0;font-size:var(--lese);line-height:1.65;color:rgba(240,230,216,.82);max-width:62ch}
.mod .ev{display:block;width:fit-content;margin-top:12px;font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--sig)}
.mod .ev:hover{color:var(--b)}

/* So lernst du */
.arbeit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;border-top:1px solid var(--line2);border-left:1px solid var(--line2)}
.arbeit > div{padding:22px 22px 26px;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.arbeit > div:last-child:nth-child(odd){grid-column:1/-1}
.arbeit h3{margin:0 0 12px;font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--sig)}
.arbeit p{margin:0;font-size:var(--lese);line-height:1.6;color:rgba(240,230,216,.82)}

/* Preis und Zugang */
.preis-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:32px 48px;margin-top:40px;align-items:start}
.preis-liste{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line2)}
.preis-liste li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding:14px 0;border-top:1px solid var(--line2);font-size:var(--lese);line-height:1.5}
.preis-liste li::before{content:"";width:7px;height:7px;margin-top:8px;background:var(--sig)}
.preis-status{margin:0 0 22px;font-size:var(--lese);line-height:1.6;color:rgba(240,230,216,.84);max-width:46ch}
/* 14.10.2026: Geld-zurück-Satz mit Link, Probelektion als Zweitknopf neben dem Kaufknopf */
.preis-status a{color:var(--sig);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,91,31,.5)}
.preis-knoepfe{display:flex;gap:10px;flex-wrap:wrap}

/* Was der Kurs nicht ersetzt */
.grenze p{margin:0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:64ch;color:rgba(240,230,216,.86)}
.grenze .klein{margin-top:16px;font-size:var(--lese);line-height:1.6;color:rgba(240,230,216,.6)}
/* 16.10.2026: erster Satz über der Arzt-Grenze (T39); Preisanker und Belegzeile im Preiskasten (Andreas 16.10.) */
.grenze .grenze-lead{margin-bottom:16px}
.preis-anker{font-size:clamp(19px,1.7vw,22px);line-height:1.45;color:var(--b)}

/* Wer die Kurse schreibt: ohne Zitat steht die Angabe unten, wie auf der Startseite */
.andreas-bio{justify-content:flex-end}

/* Weiterlesen */
.weiter{border-bottom:1px solid var(--line2)}
.weiter a{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:6px 24px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line2);transition:padding-left .3s}
.weiter a:hover{padding-left:6px;color:var(--b)}
.weiter small{font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(240,230,216,.5)}
.weiter b{font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.35;letter-spacing:-.01em}
.weiter b::after{content:" →";color:var(--sig)}

@media (max-width:859px){
  .kh{display:flex;flex-direction:column;min-height:0}
  .kh-img{aspect-ratio:4/3;min-height:0}
  .kh-shade{background:linear-gradient(to top,#0c0a09 0%,rgba(12,10,9,0) 40%),linear-gradient(to bottom,rgba(12,10,9,.6) 0%,rgba(12,10,9,0) 28%)}
  .kh-in{padding:18px var(--pad) 36px}
  /* 14.10.2026: Knöpfe direkt unter der Überschrift, damit „Jetzt kaufen“ im ersten Bildschirm ganz zu sehen ist
     (gemessen bei 360 × 740, 375 × 667, 390 × 844, 412 × 915); Reihenfolge im Quelltext bleibt Text, Info-Zeilen, Knöpfe */
  .kh-row .ctas{order:-1}
  .krumen a{display:inline-block;padding:14px 0}
  .arbeit{grid-template-columns:minmax(0,1fr)}
  .weiter a{grid-template-columns:minmax(0,1fr)}
  .mod{grid-template-columns:32px minmax(0,1fr)}
  .mod .txt{grid-column:2}
  .mod .ev{padding:14px 0;margin-top:2px}
  .ziele li{grid-template-columns:32px minmax(0,1fr)}
}
/* 19.10.2026 (Andreas, Nachtrag 5 Punkt 21): auf niedrigen Handy-Bildschirmen (bis 700 px Höhe) ist das Kopffoto etwas
   weniger hoch (3:2 statt 4:3); Foto und Bildmitte bleiben, damit bei 375 × 667 „Jetzt kaufen“ und „Probelektion lesen“
   beide ganz im ersten Bildschirm stehen */
@media (max-width:859px) and (max-height:700px){
  .kh-img{aspect-ratio:3/2}
}
/* 19.10.2026 (Andreas, Nachtrag 13 Punkt 51): Mit Autorenzeile unter der Überschrift stehen auf niedrigen Handy-Bildschirmen
   (bis 760 px Höhe) die Abstände im Kopf enger, damit „Jetzt kaufen“ und „Probelektion lesen“ ganz im ersten Bildschirm bleiben
   (gemessen 375 × 667 und 360 × 740); Foto und Bildausschnitt bleiben unverändert */
@media (max-width:859px) and (max-height:760px){
  .kh-mit-autor .krumen ol{margin-bottom:10px}
  .kh-mit-autor .eyebrow{margin-bottom:10px}
  .kh-mit-autor .autor{margin-top:12px}
  .kh-mit-autor .kh-row{margin-top:16px;padding-top:12px}
}
/* 19.10.2026 (Andreas, Nachtrag 14 Punkt 60, wie Punkt 21): auf sehr niedrigen Handys (bis 660 px Höhe, z. B. 360 × 640) ist das
   Kopffoto der Kursseite mit Autorenzeile etwas weniger hoch (16:9 statt 3:2); gleiche Datei, Bildmitte 50 % 50 %, die Figur bleibt
   im Bild (gemessen und angesehen bei 360 × 640). Fettstoffwechsel braucht das nicht (dort 9 px Luft). */
@media (max-width:859px) and (max-height:660px){
  .kh-mit-autor .kh-img{aspect-ratio:16/9}
}
/* 20.10.2026 (Webcheck-Abnahme N4; Andreas, Nachtrag 17 Punkt 67): am Rechner mit niedrigem Fenster (bis 820 px Höhe) stehen die
   Abstände im Kopf mit Autorenzeile enger, damit „Jetzt kaufen“ und „Probelektion lesen“ auch bei 1366 × 768 ganz und mit Luft im
   ersten Bildschirm stehen (gemessen beide Kursseiten); Bild, Bildausschnitt und Wortlaut bleiben, höhere Fenster unverändert */
@media (min-width:860px) and (max-height:820px){
  .kh-mit-autor .kh-in{padding-top:72px}
  .kh-mit-autor .krumen ol{margin-bottom:16px}
  .kh-mit-autor .eyebrow{margin-bottom:12px}
  .kh-mit-autor .autor{margin-top:14px}
  .kh-mit-autor .kh-row{margin-top:24px;padding-top:16px;row-gap:16px}
}