/* wasihrnichtseht.de — Basis, Shell und Komponenten
   Werte 1:1 aus den abgenommenen Design-Prototypen (design-handoff/pages/*.dc.html).
   Kein box-sizing-Reset: die Prototypen rendern mit Browser-Default (content-box). */

/* ---------- Basis ---------- */

html,body{margin:0;padding:0;background:#FFFFFF;color:#0C0608;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;} /* iOS Font-Boosting im Querformat unterbinden */
body{font-family:var(--font-body);}
a{color:var(--color-lakritz);}
a:hover{color:var(--color-petrol);}
:focus-visible{outline:3px solid var(--color-petrol);outline-offset:2px;}
[id]{scroll-margin-top:88px;}

/* /presse: Links erben die Textfarbe, Hover in der Leitfarbe (Prototyp-Abweichung, gescoped) */
.page-presse a{color:inherit;}
.page-presse a:hover{color:var(--color-petrol);}

/* ---------- Skip-Link ---------- */

.skip-link{
  position:absolute;top:0;left:0;z-index:100;
  background:var(--color-weiss);color:var(--color-lakritz);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:0.02em;font-size:14px;text-decoration:none;
  padding:14px 16px;
  transform:translateY(-200%);
}
.skip-link:focus-visible{transform:none;}

/* ---------- Shell ---------- */

.page{min-height:100vh;display:flex;flex-direction:column;background:var(--color-weiss);color:var(--color-lakritz);}

.site-header{position:sticky;top:0;z-index:40;background:var(--color-weiss);border-bottom:1px solid var(--color-lakritz);}
.site-header__inner{max-width:1280px;margin:0 auto;padding:10px var(--pad-x);display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;}

.brand{display:flex;align-items:center;padding:8px 0;text-decoration:none;}
.brand__logo{height:clamp(34px,4vw,42px);width:auto;display:block;}

.nav{display:flex;flex-wrap:wrap;align-items:center;}
.nav--main{gap:0 clamp(0px,1vw,10px);}
.nav--footer{gap:0 4px;}
.nav__link{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;text-decoration:none;padding:14px 12px;}
.nav--main .nav__link{font-size:14px;color:var(--color-lakritz);}
.nav--main .nav__link:hover{background:var(--color-lakritz);color:var(--color-weiss);}
.nav--main .nav__link[aria-current="page"]{background:var(--color-lakritz);color:var(--color-weiss);}
.nav--footer .nav__link{font-size:13px;color:var(--color-weiss);}
.nav--footer .nav__link:hover{background:var(--color-weiss);color:var(--color-lakritz);}

.site-main{flex:1;}
.wrap{max-width:1280px;margin:0 auto;}

.site-footer{background:var(--color-lakritz);color:var(--color-weiss);padding:clamp(44px,7vw,72px) var(--pad-x);}
.site-footer__inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px 48px;}
.site-footer__logo{height:clamp(52px,7vw,72px);width:auto;display:block;}
.site-footer__legal{width:100%;border-top:1px solid var(--color-weiss);padding-top:8px;display:flex;flex-wrap:wrap;gap:0 4px;}
.legal-link{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:13px;color:var(--color-weiss);text-decoration:none;padding:14px 12px;}
.legal-link:first-child{padding-left:0;}
.legal-link:hover{color:var(--color-petrol);}

/* ---------- Typografie ---------- */

.page-title{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:-0.01em;line-height:1.04;font-size:clamp(38px,6.5vw,84px);text-wrap:balance;}
.page-title--xl{font-size:clamp(46px,9vw,118px);line-height:1.02;}
.page-title--long{font-size:clamp(34px,6vw,80px);}

.kicker{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:clamp(17px,1.8vw,21px);}
.kicker--gap{margin-bottom:clamp(24px,3.5vw,40px);}

.lede{margin:clamp(24px,4vw,44px) 0 0;max-width:640px;font-family:var(--font-body);font-size:clamp(19px,2.3vw,24px);line-height:1.55;text-wrap:pretty;}
.lede--home{font-size:clamp(19px,2.3vw,26px);}

.lede-group{margin:clamp(24px,4vw,44px) 0 0;max-width:640px;display:flex;flex-direction:column;gap:1em;}
.lede-group p{margin:0;font-family:var(--font-body);font-size:clamp(19px,2.3vw,24px);line-height:1.55;text-wrap:pretty;}

.prose{margin:0;font-family:var(--font-body);font-size:clamp(18px,2vw,21px);line-height:1.6;text-wrap:pretty;}
.measure{max-width:640px;}
.measure-560{max-width:560px;}

/* ---------- Einstiegs-Sektionen ---------- */

.intro{padding:clamp(56px,9vw,120px) var(--pad-x) 0;}
.intro--pad-bottom{padding-bottom:clamp(56px,9vw,120px);}

/* Startseite: Hero + Original-Tafeln */
.hero{padding-top:clamp(56px,9vw,128px);}
.hero__inner{max-width:1280px;margin:0 auto;padding:0 var(--pad-x);}
.hero__media{margin-top:clamp(44px,7vw,88px);}
.hero__img{width:100%;height:clamp(360px,64vh,780px);object-fit:cover;display:block;}

.tafeln{padding:clamp(56px,9vw,128px) var(--pad-x);}
.tafeln__wrap{max-width:920px;margin:0 auto;}
.img-framed{width:100%;height:auto;display:block;border:1px solid var(--color-lakritz);}

.about{padding:clamp(72px,11vw,140px) var(--pad-x) 0;}
.about__inner{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(16px,2.5vw,24px);}

/* ---------- Zitat-Flächen (Lakritz) ---------- */

.quote-band{background:var(--color-lakritz);color:var(--color-weiss);padding:clamp(72px,11vw,150px) var(--pad-x);}
.quote{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);}
.quote__text{margin:0;font-family:var(--font-body);font-size:clamp(21px,2.7vw,32px);line-height:1.55;text-wrap:pretty;}
.quote__text--xl{font-size:clamp(23px,3.1vw,38px);line-height:1.5;}
.quote__source{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:clamp(13px,1.3vw,16px);}

/* Eingerücktes Zitat (Material-Spalte /schulen) */
.quote-aside{margin:clamp(8px,1.5vw,16px) 0 0;padding-left:20px;border-left:3px solid var(--color-lakritz);display:flex;flex-direction:column;gap:12px;}
.quote-aside__text{margin:0;font-family:var(--font-body);font-size:clamp(18px,2vw,21px);line-height:1.6;text-wrap:pretty;}
.quote-aside__source{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:13px;}

/* ---------- Bild-Sektionen ---------- */

.gallery{padding:clamp(44px,7vw,88px) var(--pad-x);}
.gallery__stack{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(12px,2vw,24px);}
.gallery__lead{width:100%;height:clamp(300px,52vh,620px);object-fit:cover;display:block;}
.gallery-row{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,24px);}
.gallery-row__img{min-width:0;width:100%;object-fit:cover;display:block;}
.gallery-row--4 .gallery-row__img{flex:1 1 230px;height:clamp(240px,36vh,400px);}
.gallery-row--5 .gallery-row__img{flex:1 1 220px;height:clamp(240px,34vh,380px);}

.img-strip{padding:0 var(--pad-x) clamp(56px,9vw,120px);}

/* ---------- Ablauf (/ausleihen) ---------- */

.steps-section{padding:clamp(56px,9vw,120px) var(--pad-x);}
.steps-layout{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(44px,6vw,96px);}
.steps-col{flex:1 1 480px;min-width:0;}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
.steps__item{display:flex;gap:clamp(16px,2.5vw,28px);align-items:baseline;border-top:1px solid var(--color-lakritz);padding:clamp(16px,2.2vw,22px) 0;}
.steps__item:last-child{border-bottom:1px solid var(--color-lakritz);}
.steps__num{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,30px);min-width:1.6em;}
.steps__text{font-family:var(--font-body);font-size:clamp(18px,2vw,21px);line-height:1.55;text-wrap:pretty;}

.video-col{flex:0 1 320px;min-width:260px;margin:0 auto;}
.video-slot{aspect-ratio:9/16;border:1px solid var(--color-lakritz);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;}
.video-slot--filled{padding:0;overflow:hidden;}
.video-slot__video{width:100%;height:100%;object-fit:cover;display:block;}
.video-slot__mark{width:48px;height:auto;display:block;}
.video-slot__label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:14px;}
.video-slot__note{font-family:var(--font-body);font-size:14px;color:var(--text-muted);}

/* ---------- Terminliste (/iwgr) ---------- */

.dates-section{padding:clamp(56px,9vw,120px) var(--pad-x);}
.dates{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;}
.dates__item{display:flex;flex-wrap:wrap;gap:8px clamp(24px,4vw,48px);align-items:baseline;border-top:1px solid var(--color-lakritz);padding:clamp(16px,2.2vw,22px) 0;}
.dates__item:last-child{border-bottom:1px solid var(--color-lakritz);}
.dates__year{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,40px);min-width:3.2em;}
.dates__range{font-family:var(--font-body);font-size:clamp(19px,2.2vw,24px);}
.dates-note{margin:clamp(32px,5vw,56px) 0 0;max-width:640px;font-family:var(--font-body);font-size:clamp(18px,2vw,21px);line-height:1.6;text-wrap:pretty;}

.followup{padding:clamp(72px,11vw,140px) var(--pad-x);}
.followup__inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(28px,4vw,40px);}
.followup__text{margin:0;font-family:var(--font-body);font-size:clamp(19px,2.2vw,24px);line-height:1.55;text-wrap:pretty;}
.tip-box{margin:0;border:1px solid var(--color-lakritz);padding:clamp(20px,3vw,28px);font-family:var(--font-body);font-size:clamp(17px,1.9vw,20px);line-height:1.6;text-wrap:pretty;}

/* ---------- Zwei Spalten (/schulen) ---------- */

.cols-section{padding:clamp(72px,11vw,140px) var(--pad-x);}
.cols{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(44px,6vw,96px);}
.col{display:flex;flex-direction:column;gap:clamp(16px,2.5vw,24px);}

/* ---------- Jahresblöcke (/presse) ---------- */

.year{padding:0 var(--pad-x) clamp(56px,8vw,96px);}
.year--last{padding-bottom:clamp(72px,10vw,140px);}
.year__inner{max-width:1280px;margin:0 auto;border-top:3px solid currentColor;padding-top:clamp(20px,3vw,32px);}
.year__title{margin:0 0 clamp(20px,3vw,32px);font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.5vw,56px);letter-spacing:-0.01em;}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(12px,2vw,24px);}
.tile{display:flex;flex-direction:column;gap:14px;background:var(--color-lakritz);color:var(--color-weiss);padding:clamp(24px,3.5vw,40px);}
a.tile{text-decoration:none;color:var(--color-weiss);} /* explizit: schlägt .page-presse a{color:inherit} */
a.tile:hover{background:var(--color-petrol);color:var(--color-weiss);}
.tile__org{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:clamp(14px,1.4vw,16px);}
.tile__fact{font-family:var(--font-body);font-size:clamp(19px,2.1vw,23px);line-height:1.45;text-wrap:pretty;}

.press-list{margin:clamp(16px,2.5vw,28px) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;}
.press-list__item{border-top:1px solid currentColor;padding:clamp(14px,2vw,18px) 0;font-family:var(--font-body);font-size:clamp(17px,1.9vw,20px);line-height:1.55;text-wrap:pretty;}

/* ---------- Rechtstexte (/impressum, /datenschutz) ---------- */

.legal-stand{margin:clamp(16px,2.5vw,28px) 0 0;font-family:var(--font-body);font-size:clamp(15px,1.6vw,17px);color:var(--text-muted);}
.legal-section{padding:0 var(--pad-x) clamp(72px,10vw,140px);}
.legal{max-width:720px;}
.legal h2{margin:clamp(40px,6vw,64px) 0 clamp(12px,2vw,20px);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:clamp(17px,1.8vw,21px);}
.legal p{margin:0 0 1em;font-family:var(--font-body);font-size:clamp(17px,1.9vw,20px);line-height:1.6;text-wrap:pretty;}
.legal ul{margin:0 0 1em;padding-left:1.2em;font-family:var(--font-body);font-size:clamp(17px,1.9vw,20px);line-height:1.6;}
.legal li{margin:0 0 6px;}
.legal a{overflow-wrap:anywhere;} /* lange URLs duerfen mobil umbrechen */

/* ---------- Gespräch vereinbaren ---------- */

.cta{padding:clamp(88px,13vw,170px) var(--pad-x);display:flex;justify-content:center;}
.cta--rule{border-top:1px solid currentColor;}
.cta--home{display:block;text-align:center;}
.cta__inner{max-width:620px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,44px);}
.cta__text{margin:0;font-family:var(--font-body);font-size:clamp(19px,2.2vw,25px);line-height:1.55;text-wrap:pretty;}

/* Button nach Design-System-Spezifikation (README): flach, eckig, Lakritz-Fläche,
   weiße Versalien, Hover invertiert mit 1px Rahmen, Gesamthöhe 56px */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 32px;background:var(--color-lakritz);color:var(--color-weiss);border:1px solid var(--color-lakritz);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:0.02em;font-size:15px;text-decoration:none;}
.btn:hover{background:var(--color-weiss);color:var(--color-lakritz);}
a.btn{color:var(--color-weiss);} /* explizit: schlägt .page-presse a{color:inherit} */
a.btn:hover{color:var(--color-lakritz);}

/* Presse: Button-Umrahmung aus dem Prototyp (aufgelöst: transparent) */
.btn-ring{border:1px solid transparent;}

/* Anfrage-Zweitzeile unter dem Button (Texte v2.3): zurückhaltender Textlink */
.cta__actions{display:flex;flex-direction:column;align-items:center;gap:16px;}
.cta-alt{font-family:var(--font-body);font-size:17px;line-height:1.4;text-decoration:underline;}