:root{
  --weiss:#ffffff; --flaeche:#f3f6f9; --linie:#dfe6ee;
  --text:#14243a; --text-leise:#4a5a70;
  --blau:#2563b0; --blau-dunkel:#1b4a86;
  --gruen:#2e7d32; --orange:#b26a00; --rot:#b42318;
  --breite:1160px; --rand:20px;
  --titel:"Barlow Semi Condensed",Arial Narrow,Arial,sans-serif;
  --fliess:"Source Sans 3",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--weiss);color:var(--text);font:400 18px/1.6 var(--fliess)}
img{max-width:100%;display:block}
a{color:var(--blau)}
h1,h2,h3{font-family:var(--titel);font-weight:700;line-height:1.1;margin:0 0 .5em}
h2{font-size:clamp(30px,4vw,44px)}
h3{font-size:24px}
p{margin:0 0 1em}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.abschnitt{padding:88px 0}
section[id],footer[id]{scroll-margin-top:76px}
.abschnitt.grau{background:var(--flaeche)}
.vorspann{font-size:20px;color:var(--text-leise);max-width:680px;margin-bottom:40px}
.knopf{display:inline-block;padding:14px 26px;border-radius:6px;font:600 17px var(--fliess);text-decoration:none;border:2px solid var(--blau);background:var(--blau);color:#fff}
.knopf:hover{background:var(--blau-dunkel);border-color:var(--blau-dunkel)}
.knopf.hell{background:transparent;color:#fff;border-color:#fff}
.knopf.hell:hover{background:rgba(255,255,255,.15)}
.knopf.rahmen{background:transparent;color:var(--blau)}
.klein{font-size:15px;color:var(--text-leise)}

/* Entwurfs-Hinweis */
.entwurf{background:#fff7d6;color:#5c4400;font-size:14px;text-align:center;padding:6px var(--rand)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--linie)}
.kopf .innen{display:flex;align-items:center;gap:24px;height:76px}
.logo img{height:52px;width:auto}
.menue{display:flex;gap:20px;margin-left:auto}
.menue a{color:var(--text);text-decoration:none;font-weight:600;font-size:16px;white-space:nowrap}
.menue a:hover{color:var(--blau)}
.zkb img{height:44px;width:auto}
.tel-handy{display:none}
.tel{white-space:nowrap;font-weight:600;text-decoration:none;color:var(--blau);border:2px solid var(--blau);border-radius:6px;padding:8px 14px;font-size:16px}
.menueknopf{display:none;margin-left:auto;background:none;border:0;font:600 16px var(--fliess);color:var(--text);padding:10px}

/* Loipenzustand */
.zustand{background:var(--text);color:#fff;font-size:16px}
.zustand .innen{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-top:10px;padding-bottom:10px}
.zustand strong{font-family:var(--titel);font-size:19px;letter-spacing:.02em}
.punkt{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:1px}
.p-gruen{background:#5cc163}.p-orange{background:#f0a531}.p-rot{background:#f2665a}
.zustand a{color:#fff;margin-left:auto;font-weight:600}
.muster{background:#fff7d6;color:#5c4400;border-radius:4px;padding:1px 8px;font-size:13px;font-weight:600}

/* Video oben */
.held{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#14243a}
.held video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.held::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,35,.78) 0%,rgba(10,20,35,.25) 60%,rgba(10,20,35,.1) 100%)}
.held .innen{position:relative;z-index:1;padding-bottom:64px;width:100%}
.held h1{font-size:clamp(40px,6.4vw,78px);max-width:900px;margin-bottom:16px}
.held p{font-size:21px;max-width:640px;margin-bottom:28px}
.held .knoepfe{display:flex;flex-wrap:wrap;gap:14px}
.videohinweis{position:absolute;right:var(--rand);bottom:16px;z-index:1;font-size:13px;opacity:.85}

/* Eckdaten */
.eckdaten{border-bottom:1px solid var(--linie)}
.eckdaten .innen{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:36px;padding-bottom:36px}
.eckdaten b{display:block;font:700 26px var(--titel);color:var(--blau)}
.eckdaten span{font-size:16px;color:var(--text-leise)}

/* Loipen-Karten */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.karte{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--blau);border-radius:10px;overflow:hidden}
.karte div{padding:26px 26px 28px}
.karte .laenge{font:700 18px var(--titel);color:var(--blau);margin-bottom:6px}
.unterzeile{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px;font-size:16px}
.karte-verlauf{margin-top:56px;display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:start}
#loipenkarte{height:620px;border:1px solid var(--linie);border-radius:10px;z-index:0}
.legende{list-style:none;padding:0;margin:20px 0;font-size:16px}
.legende li{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.legende .linie{display:inline-block;width:28px;height:5px;border-radius:3px;background:var(--blau)}
.quelle{font-size:14px;color:var(--text-leise);margin-top:8px}

/* Loipenbericht */
.zwei{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:start}
.bericht{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:28px}
.bericht table{width:100%;border-collapse:collapse;font-size:17px}
.bericht td{padding:12px 0;border-top:1px solid var(--linie)}
.bericht td:last-child{text-align:right;font-weight:600}
.s-gruen{color:var(--gruen)}.s-orange{color:var(--orange)}.s-rot{color:var(--rot)}
.webcam{border-radius:10px;overflow:hidden;background:var(--text);color:#fff}
.webcam div{padding:32px 30px 34px}

/* Pässe */
.paesse{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px}
.pass{border:2px solid var(--linie);border-radius:10px;padding:30px}
.pass.haupt{border-color:var(--blau)}
.preis{font:700 44px var(--titel);color:var(--blau);margin:4px 0 12px}
.preis small{font-size:18px;color:var(--text-leise);font-weight:600}
.app{background:var(--flaeche);border-radius:10px;padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:start}
.app ol{margin:0;padding-left:22px}


/* Anfahrt */
.liste{list-style:none;padding:0;margin:0 0 24px}
.liste li{padding:10px 0;border-top:1px solid var(--linie)}

/* Stimmen */
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.stimmen blockquote{margin:0;font-size:19px;border-left:3px solid var(--blau);padding-left:18px}
.stimmen cite{display:block;margin-top:10px;font-style:normal;font-size:15px;color:var(--text-leise)}

/* Vorstand */
.vorstand{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.vorstand figure{margin:0}
.vorstand img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:10px;background:var(--linie)}
.vorstand figcaption{margin-top:10px;font-size:16px;color:var(--text-leise)}
.vorstand b{display:block;color:var(--text);font-size:17px}

/* Sponsoren */
.hauptsponsor{display:flex;align-items:center;gap:24px;margin-bottom:36px}
.hauptsponsor img{height:100px;width:auto}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.logos a{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--linie);border-radius:8px;padding:14px;height:92px}
.logos img{max-height:62px;width:auto;object-fit:contain}

/* Fusszeile */
.fuss{background:var(--text);color:#d7e0ea;font-size:16px;padding:64px 0 28px}
.fuss a{color:#fff}
.fuss .spalten{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;margin-bottom:40px}
.fuss h3{color:#fff;font-size:20px}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:6px}
.fuss .unten{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px}

/* Handy */
@media (max-width:1100px){
  .menue{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--linie)}
  .menue.offen{display:flex}
  .menue a{padding:14px var(--rand);border-top:1px solid var(--linie)}
  .menueknopf{display:block;order:3;margin-left:0}
  .zkb{margin-left:auto}
  .kopf .tel{padding:8px 10px;font-size:15px;order:4}
  .eckdaten .innen{grid-template-columns:1fr 1fr}
  .karten,.stimmen,.paesse,.zwei,.karte-verlauf,.fuss .spalten{grid-template-columns:1fr}
  #loipenkarte{height:460px}
  .logos{grid-template-columns:repeat(3,1fr)}
  .vorstand{grid-template-columns:repeat(3,1fr)}
  .app{grid-template-columns:1fr}
  .abschnitt{padding:60px 0}
  .zustand a{margin-left:0}
}
@media (max-width:520px){
  body{font-size:17px}
  .logo img{height:40px}
  .kopf .innen{gap:12px}
  .kopf .tel{display:none}
  .zkb img{height:36px}
  .menueknopf{padding:10px 0 10px 6px}
  .zustand .tel-handy{display:inline-block;margin-left:0}
  .held{min-height:560px}
  .held p{font-size:18px}
  .videohinweis{left:var(--rand);right:auto}
  .logos{grid-template-columns:repeat(2,1fr)}
  .vorstand{grid-template-columns:repeat(2,1fr);gap:16px}
  #loipenkarte{height:380px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Unterseiten */
.menue a[aria-current="page"]{color:var(--blau);text-decoration:underline;text-underline-offset:6px}
.seitenkopf{background:var(--text);color:#fff;padding:72px 0 56px}
.seitenkopf h1{font-size:clamp(36px,5vw,60px);margin-bottom:14px}
.seitenkopf p{font-size:20px;max-width:720px;color:#d7e0ea;margin:0}
.text{max-width:780px}
.text h2{margin-top:56px}
.text h2:first-child{margin-top:0}
.text ul{padding-left:22px}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.zeitleiste details{border-top:1px solid var(--linie);padding:12px 0}
.zeitleiste summary{cursor:pointer;font-weight:600}
.zeitleiste p{margin:10px 0 0;color:var(--text-leise)}
.vorstand figcaption small{display:block;font-size:15px;line-height:1.45;margin-top:6px}
.formular{display:grid;gap:16px;max-width:640px}
.formular label{display:grid;gap:6px;font-weight:600;font-size:16px}
.formular input,.formular textarea{font:inherit;padding:12px;border:1px solid #b9c6d4;border-radius:6px;background:#fff}
.formular .wahl{display:flex;gap:10px;align-items:center;font-weight:400}
.formular .wahl input{width:20px;height:20px}
.hinweis-entwurf{background:#fff7d6;color:#5c4400;border-radius:6px;padding:10px 14px;font-size:15px}
.kommentare{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.kommentare li{border-left:3px solid var(--blau);padding-left:16px}
.kommentare b{display:block}
.kommentare small{color:var(--text-leise)}
.archiv{columns:2;column-gap:40px;font-size:16px;padding-left:20px}
.archiv li{margin-bottom:6px;break-inside:avoid}
@media (max-width:1100px){.zwei-spalten{grid-template-columns:1fr}.archiv{columns:1}}
.kommentare .antworten{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.kommentare .antworten li{border-left-color:var(--linie)}
.aeltere{margin-top:24px}
.aeltere summary{list-style:none;cursor:pointer}
.aeltere summary::-webkit-details-marker{display:none}
.aeltere .zu,.aeltere[open] .auf{display:none}
.aeltere[open] .zu{display:inline}
.aeltere[open] summary{margin-bottom:20px}
.kommentar-titel{margin-top:40px}