:root{
  --blau:#88cfeb;
  --blau-tief:#0f3f5c;
  --blau-mittel:#1f6f92;
  --sand:#f1f8fc;
  --text:#22323c;
  --linie:#cfe3ee;
  --max:1180px;
  --bergbild:url("../img/kampenwand.png");
  --pad:clamp(20px,5vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Montserrat','Avenir Next','Segoe UI',Roboto,system-ui,sans-serif;
  font-size:19px;line-height:1.72;color:var(--text);background:#fff;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau-mittel)}
:focus-visible{outline:3px solid var(--blau-mittel);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mess{max-width:66ch}

/* ---------- Kopfzeile ---------- */
/* Skip-Link. Bewusst ohne left:-9999px: diese alte Technik vergroessert in
   manchen Engines den Scrollbereich nach links und wird nur durch
   body{overflow-x:hidden} kaschiert. clip-path nimmt das Element zuverlaessig
   aus dem Fluss, laesst es aber fokussierbar. */
.sprung{
  position:fixed;top:0;left:0;z-index:100;
  width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--blau-tief);color:#fff;text-decoration:none;
  font-size:16px;font-weight:600;
}
.sprung:focus{
  width:auto;height:auto;padding:14px 22px;
  overflow:visible;clip-path:none;
}
main:focus{outline:none}

.kopf{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie);
}
.kopf-innen{
  max-width:var(--max);margin:0 auto;padding:10px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.marke{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--blau-tief)}
.marke img{width:52px;height:52px;flex:0 0 auto}
.marke b{display:block;font-size:16px;font-weight:600;letter-spacing:.01em;line-height:1.2}
.marke small{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blau-mittel);font-weight:600}

.menu ul{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.menu a{
  display:block;padding:11px 15px;text-decoration:none;color:var(--text);
  font-size:15.5px;font-weight:500;border-radius:3px;
}
.menu a:hover{color:var(--blau-tief);background:var(--sand)}
.menu a[aria-current="page"]{color:var(--blau-tief);box-shadow:inset 0 -3px 0 var(--blau)}
.menu .knopf{background:var(--blau-tief);color:#fff;padding:12px 20px;font-weight:600}
.menu .knopf:hover{background:var(--blau-mittel);color:#fff}

.burger{
  display:none;width:48px;height:44px;border:1px solid var(--linie);background:#fff;
  border-radius:4px;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{position:relative;display:block;width:22px;height:2px;background:var(--blau-tief)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--blau-tief);
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:900px){
  .burger{display:flex}
  .menu{
    position:absolute;left:0;right:0;top:100%;background:#fff;
    border-bottom:1px solid var(--linie);display:none;
  }
  .menu.offen{display:block}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px}
  .menu a{padding:15px 2px;font-size:19px;border-bottom:1px solid var(--linie);border-radius:0}
  .menu .knopf{margin-top:14px;text-align:center;border-bottom:0;border-radius:3px}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.hero.klein{min-height:min(52vh,430px)}
.hero picture{position:absolute;inset:0}
.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
@media(max-width:700px){
  .hero{min-height:min(76svh,620px)}
  .hero img{object-position:28% 32%}
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,40,60,.42) 0%,rgba(10,40,60,.05) 34%,rgba(8,32,48,.72) 100%);
}
.hero-text{position:relative;z-index:2;width:100%;padding-bottom:clamp(38px,7vw,84px);color:#fff}
.hero-farbe{background:var(--blau-tief);min-height:min(52vh,430px);position:relative}
.hero-farbe::after{display:none}

/* Kampenwand als Hintergrund auf tiefblauen Flaechen */
.hero-farbe::before,
section.berg-grund::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--bergbild);
  background-size:cover;background-position:50% 100%;background-repeat:no-repeat;
  opacity:.22;pointer-events:none;
}
section.berg-grund{position:relative;overflow:hidden}
section.berg-grund > .wrap{position:relative;z-index:1}
@media(max-width:700px){
  .hero-farbe{min-height:min(48svh,380px)}
  .hero-farbe::before,
  section.berg-grund::before{background-position:78% 100%}
}
.hero-farbe .hero-text{padding-top:clamp(46px,8vw,92px)}

/* Gleiche Hero-Hoehe auf allen Themenseiten ab Laptop.
   Die Hoehe des Farb-Heros haengt an der Zeilenzahl von h1 und .unter.
   Beide bekommen deshalb eine reservierte Mindesthoehe: h1 eine Zeile in der
   Basisgroesse, .unter drei Zeilen. Kuerzere Titel oder Unterzeilen fuellen den
   reservierten Raum, laengere gibt es derzeit nicht. Wird spaeter eine
   Unterzeile laenger als drei Zeilen, springt die Hoehe wieder.
   .titel-lang verkleinert den Titel so weit, dass er einzeilig bleibt. */
@media(min-width:901px){
  .hero-farbe h1{min-height:calc(clamp(2.5rem,7.4vw,5rem) * 1.03)}
  .hero-farbe .unter{min-height:calc(3 * 1.4em)}
  h1.titel-lang{font-size:min(5.2vw,3.8rem)}
}

.auge{
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 18px;color:var(--blau);
}
h1{
  font-size:clamp(2.5rem,7.4vw,5rem);font-weight:300;line-height:1.03;
  letter-spacing:-.022em;margin:0 0 18px;
}
h1 .stark{font-weight:600}
.unter{
  font-size:clamp(1.1rem,2.3vw,1.5rem);font-weight:300;line-height:1.4;
  margin:0 0 30px;max-width:24ch;
}
.hero-text .unter{color:rgba(255,255,255,.93)}

.knopf-gross{
  display:inline-block;background:#fff;color:var(--blau-tief);text-decoration:none;
  padding:17px 32px;font-size:17px;font-weight:600;letter-spacing:.01em;border-radius:3px;
}
.knopf-gross:hover{background:var(--blau);color:var(--blau-tief)}
.knopf-linie{
  display:inline-block;border:2px solid var(--blau-tief);color:var(--blau-tief);
  text-decoration:none;padding:15px 30px;font-size:17px;font-weight:600;border-radius:3px;
}
.knopf-linie:hover{background:var(--blau-tief);color:#fff}

/* ---------- Faktenband unter dem Hero ---------- */
.fakten{background:var(--blau);padding:clamp(26px,4vw,40px) 0}
.fakten .zahlen{
  display:grid;grid-template-columns:1fr;gap:22px;text-align:center;color:var(--blau-tief);
}
.fakten .zahlen div span{
  display:block;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  opacity:.72;margin-bottom:4px;
}
.fakten .zahlen div b{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:500;letter-spacing:-.01em}
.fakten .zahlen b{font-weight:500}
.fakten .zahlen a{color:inherit;text-decoration:none;border-bottom:2px solid rgba(15,63,92,.35)}


/* ---------- Abschnitte ---------- */
section{padding:clamp(56px,8vw,110px) 0}
section.sand{background:var(--sand)}
section.tief{background:var(--blau-tief);color:#fff}
section.tief a{color:var(--blau)}
h2{
  font-size:clamp(1.85rem,4.2vw,2.9rem);font-weight:300;line-height:1.12;
  letter-spacing:-.02em;margin:0 0 20px;
}
h2 .stark{font-weight:600}
h3{font-size:clamp(1.2rem,2.4vw,1.45rem);font-weight:600;margin:44px 0 10px;line-height:1.3}
p{margin:0 0 20px}
.gross{font-size:clamp(1.15rem,2.4vw,1.4rem);line-height:1.55;font-weight:300}
ul.liste{margin:0 0 22px;padding:0;list-style:none;max-width:66ch}
ul.liste li{padding:11px 0 11px 30px;position:relative;border-bottom:1px solid var(--linie)}
ul.liste li::before{
  content:"";position:absolute;left:2px;top:22px;width:12px;height:2px;background:var(--blau);
}
section.tief ul.liste li{border-color:rgba(255,255,255,.18)}

/* ---------- Themenkacheln ---------- */
.themen{display:grid;grid-template-columns:1fr;gap:2px;margin-top:44px}
.thema{
  display:block;text-decoration:none;background:var(--blau-tief);color:#fff;
  padding:clamp(30px,4vw,48px) clamp(26px,3vw,40px);
}
.thema:nth-child(2){background:#15597e}
.thema:nth-child(3){background:var(--blau-mittel)}
.thema h3{margin:0 0 12px;font-size:clamp(1.4rem,3vw,1.85rem);font-weight:400;letter-spacing:-.015em}
.thema p{font-size:16.5px;line-height:1.6;margin:0;color:rgba(255,255,255,.86)}
.thema .mehr{
  display:inline-block;margin-top:20px;font-size:14px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;border-bottom:2px solid var(--blau);padding-bottom:3px;
}
.thema:hover{background:#0a3149}

/* ---------- Hinweis / Zitatkasten ---------- */
.hinweis{
  border-left:4px solid var(--blau);padding:6px 0 6px 22px;margin:36px 0;
  font-size:17px;line-height:1.6;color:#3c4f5a;max-width:66ch;
}
section.tief .hinweis{color:rgba(255,255,255,.82)}

.duo{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,56px);align-items:start}

/* ---------- Fusszeile ---------- */
/* ---------- Fehlerseite ---------- */
.fehler{font-size:clamp(3.5rem,12vw,7rem);font-weight:200;line-height:1;letter-spacing:-.04em;margin:0 0 8px}
.hero-text .fehler{color:#fff}
.hero .zurueck{margin-top:26px}
.hero .zurueck a{color:#fff}

/* ---------- Rechtstexte ---------- */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.35rem,2.8vw,1.7rem);font-weight:600;margin:44px 0 12px;letter-spacing:-.01em}
.legal h3{font-size:1.12rem;font-weight:600;margin:30px 0 8px}
.legal h4{font-size:1rem;font-weight:600;margin:22px 0 6px}
.legal p,.legal li{font-size:17px;line-height:1.68}
.legal ul{padding-left:22px;margin:0 0 18px}
.legal li{margin-bottom:6px}
.legal .klein{font-size:15px;color:#5a6b76}
.legal .versal{font-size:15px;line-height:1.6}

footer{background:#12222c;color:#c8d8e2;padding:clamp(50px,7vw,80px) 0 40px;font-size:16.5px}
footer .wrap{display:grid;gap:34px;grid-template-columns:1fr}
footer .fusslogo{width:56px;height:56px;margin-bottom:22px}
footer h2{font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px;font-weight:700;color:#fff}
footer a{color:#c8d8e2;text-decoration:none;border-bottom:1px solid rgba(200,216,226,.3)}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px}
footer .schluss{
  border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px;
  font-size:14px;color:#8ea6b4;
}

@media(min-width:760px){
  .fakten .zahlen{grid-template-columns:repeat(3,1fr)}
  .themen{grid-template-columns:repeat(3,1fr)}
  footer .wrap{grid-template-columns:1.4fr 1fr 1fr}
  .duo{grid-template-columns:1.25fr .75fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}
@media(prefers-reduced-motion:no-preference){
  .menu a,.thema,.knopf-gross,.knopf-linie{transition:background .18s ease,color .18s ease}
}