/* Trecker Treck · ruhiger Stil auf Sand */
body{background:var(--sand);color:var(--nacht);font-size:18px}
:focus-visible{outline-color:var(--nacht)}
.rahmen{max-width:1240px;margin-inline:auto;padding-inline:var(--rand)}
h1{font-size:clamp(48px,6.4vw,96px)}
.h2{font-size:clamp(34px,3.6vw,52px)}
.h3{font:600 20px/1.3 var(--barlow);margin-bottom:14px}
.h3.abstand{margin-top:40px}
.lead{font-size:clamp(19px,1.5vw,21px);line-height:1.55;max-width:36em}
.klein{font-size:16px;color:var(--nebelhell)}
.klein.abstand{margin-top:32px}
.abschnitt{padding-block:clamp(56px,7vw,104px)}
.abschnitt-linie{border-top:1px solid var(--liniehell)}
.abschnitt-ton{background:var(--ton-sand)}
.abschnitt-kopf{display:grid;grid-template-columns:1fr 1.4fr;gap:24px 64px;align-items:end;margin-bottom:40px}
.abschnitt-kopf p{color:var(--nebelhell)}
.zwei{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,96px);align-items:start}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px)}
@media (max-width:900px){.zwei,.drei,.abschnitt-kopf{grid-template-columns:1fr}}
.nur-kommend,.nur-heute,.nur-laeuft,.nur-vergangen{display:none}
[data-status="kommend"] .nur-kommend,[data-status="heute"] .nur-heute,[data-status="laeuft"] .nur-laeuft,[data-status="vergangen"] .nur-vergangen{display:inline}
.status{font-weight:600;font-size:16px;color:var(--nebelhell);margin-bottom:20px;max-width:34em}
.status[data-status="vergangen"]{color:var(--nacht);padding:12px 16px;background:var(--ton-sand);border-left:3px solid var(--nacht)}

/* Knöpfe */
.aktionen{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 20px;border:1.5px solid var(--nacht);border-radius:6px;font-weight:600;font-size:16px;text-decoration:none;color:var(--nacht);transition:background .2s,color .2s}
.knopf:hover{background:var(--nacht);color:var(--sand)}
.knopf-voll-farbe,.knopf-akzent,.formular .knopf{background:var(--nacht);color:var(--sand)}
.knopf-voll-farbe:hover,.knopf-akzent:hover,.formular .knopf:hover{background:var(--schiefer)}
.knopf-voll{width:100%}

/* Kopf */
.kopf{background:var(--sand);border-bottom:1px solid var(--liniehell);position:sticky;top:0;z-index:50}
.kopf-in{max-width:1240px;margin-inline:auto;padding-inline:var(--rand);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.kopf-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.kopf-logo img{width:clamp(120px,11vw,150px);height:auto}
.kopf-logo span{font-weight:600;font-size:16px;padding-left:14px;border-left:1px solid var(--liniehell);white-space:nowrap}
.nav ul{display:flex;gap:clamp(14px,2vw,28px)}
.nav a{font-weight:500;font-size:16px;text-decoration:none;padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--nacht)}
.menue-knopf{display:none;font-weight:600;border:1.5px solid var(--nacht);border-radius:6px;padding:9px 14px}
@media (max-width:900px){
  .menue-knopf{display:block}
  .nav{position:absolute;top:72px;left:0;right:0;background:var(--sand);border-bottom:1px solid var(--liniehell);padding:4px var(--rand) 20px;display:none}
  .menue-offen .nav{display:block}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:14px 0;border-bottom:1px solid var(--liniehell);font-size:19px}
}

/* Hero */
.hero{padding-block:clamp(48px,7vw,104px) clamp(48px,6vw,80px)}
.hero-raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.hero-meta{font-weight:600;font-size:clamp(17px,1.4vw,20px);margin:18px 0 22px}
.plakat img{width:100%;box-shadow:0 20px 50px rgba(14,14,16,.16)}
.plakat figcaption{font-size:14px;color:var(--nebelhell);margin-top:10px}
@media (max-width:900px){.hero-raster{grid-template-columns:1fr}.plakat{max-width:320px}}
.luftbild img{width:100%;height:clamp(320px,56vw,720px);object-fit:cover}

/* Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1.5px solid var(--nacht)}
.zahlen div{display:flex;flex-direction:column-reverse;gap:4px;padding-top:20px}
.zahlen dd{font-size:clamp(44px,5vw,72px)}
.zahlen dt{font-size:16px;color:var(--nebelhell);font-weight:500}
@media (max-width:700px){.zahlen{grid-template-columns:1fr 1fr}}

/* Zeitplan */
.zeitplan{display:grid;border-top:1px solid var(--liniehell)}
.zeitplan li{display:grid;grid-template-columns:96px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--liniehell)}
.zeitplan time{font-size:30px;line-height:1.1}
.zeitplan strong{font-weight:600;font-size:19px}
.zeitplan p{color:var(--nebelhell);margin-top:2px}
.regeln-nr li{grid-template-columns:48px 1fr}
.regeln-nr p{color:var(--nacht);margin:0}

/* Klassen */
.klassen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.klasse{display:grid;gap:14px;align-content:start;padding:28px;border:1px solid var(--liniehell);border-radius:8px;background:rgba(255,255,255,.18)}
.klasse h3{font-size:30px}
.klasse>p{color:var(--nebelhell)}
.klasse .stufen-label{font-weight:600;font-size:14px;color:var(--nacht);margin-top:6px}
.stufen{display:flex;flex-wrap:wrap;gap:6px}
.stufen li{padding:5px 10px;border-radius:4px;background:var(--ton-sand);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.klasse .knopf{margin-top:8px;justify-self:start}
@media (max-width:1000px){.klassen{grid-template-columns:1fr}}

/* Listen */
.liste{display:grid;border-top:1px solid var(--liniehell)}
.liste li{display:flex;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--liniehell);font-size:18px}
.liste .i{width:24px;height:24px}
.punkte-liste{display:grid;gap:10px;margin-bottom:20px}
.punkte-liste li{position:relative;padding-left:22px}
.punkte-liste li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--nacht)}
#anfahrt p{margin-bottom:12px}

/* Seitenkopf und gemeinsame Seiten */
.seitenkopf{padding:clamp(48px,6vw,88px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--liniehell)}
.seitenkopf h1{margin-bottom:14px}
.seitenkopf .lead{color:#3d3a36}
.schmal{max-width:820px}
.abschnitt-formular{background:var(--ton-sand)}
.kontakt-wege>a{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--liniehell);text-decoration:none;font-size:20px;font-weight:500}
.kontakt-wege>a .i{width:26px;height:26px}
.kontakt-wege small{display:block;font-size:14px;color:var(--nebelhell);font-weight:600}
.social-reihe{display:flex;gap:20px;margin-top:20px;flex-wrap:wrap}
.social-reihe a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600}
.feld input,.feld textarea{border-color:var(--nebelhell)}
.feld input:focus,.feld textarea:focus{border-color:var(--nacht);outline:2px solid var(--nacht);outline-offset:0}
.check input{accent-color:var(--nacht)}
.prosa{display:grid;gap:14px}
.prosa h2{font:600 21px/1.3 var(--barlow);margin-top:22px;text-transform:none}
.prosa ul{list-style:disc;padding-left:1.2em}
mark.fehlt{outline-color:var(--nacht);background:rgba(240,214,40,.55)}
.zwei .formular{margin-top:0}

/* Fuß */
.fuss{background:var(--ton-sand);border-top:1px solid var(--liniehell);padding:clamp(48px,6vw,80px) 0 24px;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.fuss-raster img{width:180px;height:auto}
.fuss-claim{font-size:15px;color:var(--nebelhell);margin-top:14px;max-width:22em}
.fuss p{line-height:1.7}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-unten{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:48px;padding-top:20px;border-top:1px solid var(--liniehell);font-size:14px;color:var(--nebelhell)}
@media (max-width:860px){.fuss-raster{grid-template-columns:1fr 1fr}}