/* Laptop und Küchentisch · Ergänzungen für die PHP-Seiten (Phase 7)
   Nur Tokens aus system.css, keine neuen Farben. */

/* Hero ohne Reel (Rückfall, wenn weder Web-Version noch Original da ist): Text links, Paarfoto rechts */
.hero--noreel{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"txt pic" "txt pic"}
.hero--noreel .hero__txt{justify-content:center}
.hero--noreel .hero__couple{height:var(--rh);max-height:620px}
@media (max-width:900px){
  .hero--noreel .hero__couple{position:relative;right:auto;bottom:auto;width:100%;transform:none;padding-bottom:34px;height:auto}
  .hero--noreel .hero__txt .lead{margin-top:24px}
}

/* Legende auf der Startseite verlinkt ins gefilterte Archiv */
.legend a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-small);font-weight:800;text-decoration:none;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}
.legend a:hover{text-decoration:underline;text-decoration-color:var(--c-ink);text-underline-offset:4px}
/* Rechtliches: Zwischentitel statt Labels in der linken Spalte */
.recht-block{max-width:44em;margin-top:var(--s-7)}
.recht-block h2{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:var(--s-3)}
/* Seitenköpfe der Unterseiten auf Farbfläche */
.page-kopf .bigword{top:auto;bottom:clamp(-30px,-2vw,-8px)}
.page-kopf .d1{max-width:15ch;text-wrap:balance}
.page-kopf p{max-width:36em;margin-top:18px;font-size:var(--fs-lead)}

/* Folgenseite */
/* Kopf der Folge: grosse Farbfläche im Thema der Folge */
.folge-kopf .bigword{top:auto;bottom:clamp(-30px,-2vw,-8px)}
.folge-meta{font-size:var(--fs-small);font-weight:700}
.folge-meta b{font-weight:800}
.folge-h{font-size:clamp(2.25rem,1.1rem + 4.4vw,5.25rem);font-weight:800;line-height:.96;letter-spacing:-.05em;max-width:17ch;text-wrap:balance;margin-top:14px}
.abo-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:var(--s-6)}
.abo-leiste>span{font-size:var(--fs-small);font-weight:700;margin-right:6px}
.abo-leiste a{display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:8px 14px 8px 10px;border-radius:var(--r-s);background:rgba(255,255,255,.85);font-weight:700;font-size:var(--fs-small);text-decoration:none;color:var(--c-ink);transition:background var(--d-1),transform var(--d-1)}
.abo-leiste a:hover{background:#fff;transform:translateY(-1px)}
.abo-leiste svg{width:20px;height:20px;fill:var(--c-ink);flex:none}
.folge-zitate,.folge-text{margin-top:var(--s-section)}
.folge-zitate .quotes{display:grid;gap:var(--s-8)}
.folge-text__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.folge-text__in .folge-thumb{position:sticky;top:var(--s-6)}
@media (max-width:900px){.folge-text__in{grid-template-columns:minmax(0,1fr)}.folge-text__in .folge-thumb{position:static}}
.folge-thumb{margin-bottom:var(--s-5);border-radius:var(--r-m);overflow:hidden;transform:rotate(-1deg);box-shadow:0 30px 60px -36px rgba(14,17,34,.45)}
.folge-thumb img{width:100%;height:auto;display:block}
.folge-prose{max-width:40em}
.folge-prose a{color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--c-line-2);text-underline-offset:3px;overflow-wrap:anywhere}
.folge-prose ul,.folge-prose ol{padding-left:1.2em;margin-top:var(--s-3)}
.folge-prose li+li{margin-top:4px}
.folge-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);margin-top:var(--s-section)}
.folge-nav a,.folge-nav__soon{display:flex;flex-direction:column;gap:6px;padding:22px 24px;border-radius:var(--r-s);text-decoration:none;color:var(--c-ink);background:var(--tint);transition:box-shadow var(--d-2)}
.folge-nav a:hover{box-shadow:0 0 0 1.5px var(--c-ink)}
.folge-nav b{font-size:clamp(1.125rem,1rem + .6vw,1.5rem);line-height:1.15;letter-spacing:-.025em}
.folge-nav__next{text-align:right;align-items:flex-end}
.folge-nav__soon{background:none;color:var(--c-grey)}
@media (max-width:760px){
  .folge-nav{grid-template-columns:minmax(0,1fr)}
  .folge-nav__next{text-align:left;align-items:flex-start}
}

/* Archiv */
.suche{display:flex;gap:10px;margin-top:var(--s-5);max-width:34em}
.suche input{flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--c-ink);background:var(--c-surface);border:1px solid var(--c-field);border-radius:var(--r-pill);padding:10px 18px;min-height:var(--tap)}
.suche input:focus{outline:0;border-color:var(--c-focus);box-shadow:0 0 0 3px rgba(106,71,232,.2)}
.archiv-status{margin-top:var(--s-4);color:var(--c-label)}
.archiv-leer{margin-top:var(--s-5);color:var(--c-grey)}
.archiv-leer a{color:var(--c-ink)}

/* Partner */
.partner-punkte{list-style:none;margin-top:var(--s-4);display:grid;gap:14px;color:var(--c-ink);font-weight:700;max-width:30em}

/* Rechtliches */
.recht p+p{margin-top:var(--s-5)}
.recht a{color:var(--c-ink)}

.form__fail a{color:inherit;text-decoration:underline}
.kapitel-t{font-weight:700;color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--c-line-2);text-underline-offset:3px;min-height:28px;margin-right:4px}
.kapitel-t:hover{text-decoration-color:var(--c-ink)}
.folge-text__in:not(:has(.folge-thumb)){grid-template-columns:minmax(0,1fr)}
.story-sec{overflow:clip}
/* Übergang: datenschutz.php nutzt noch das alte Raster cols-3-9 mit Label links. Darstellung wie .recht-block
   (Zwischentitel statt gesperrtes Grau-Label, keine Haarlinie). Beim nächsten Bearbeiten auf .head/.recht-block umstellen. */
.cols-3-9{display:block;max-width:44em;margin-top:var(--s-7)}
.cols-3-9>.label{font-size:var(--fs-h4);font-weight:800;line-height:1.15;letter-spacing:-.03em;color:var(--c-ink);margin-bottom:var(--s-3)}
.cols-3-9.sec-head{margin-top:0}
.cols-3-9.sec-head>.label{display:none}
.cols-3-9.sec-head .d2{font-size:var(--fs-d1);line-height:var(--lh-tight);letter-spacing:var(--tr-d1)}
.cols-3-9.sec-head .lead{margin-top:18px}

.folge-mehr{max-width:40em;margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--c-line-2)}
.folge-mehr a{color:var(--c-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--c-line-2);text-underline-offset:3px}