/* WWA – Corporate Design der bisherigen Seite, neu und schlank geschrieben.
   Farben, Radien, Abstände und Schrift stammen aus dem alten Theme (tailwind.config.js, global.scss). */
:root {
  --blau: #064058; --blau-tief: #073245; --orange: #EA8263; --gelb: #F7EBD4; --gruen: #C6E8ED; --schwarz: #2B2B2B;
  --rund: 1rem; --breite: 80rem; --rand: 1rem; --kopf: 6rem;
  /* Ohne Einwilligung wird museo-sans nicht geladen. Die Ersatzschriften sind bewusst geometrisch-humanistisch gewählt, damit das Bild stimmig bleibt. */
  --schrift: museo-sans, "Avenir Next", Avenir, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
  --schrift-rund: museo-sans-rounded, museo-sans, "Avenir Next Rounded", "Avenir Next", Avenir, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 1rem); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
body { margin: 0; font-family: var(--schrift); font-size: 1rem; line-height: 1.5; color: #000; background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--schrift-rund); font-weight: 500; margin: 0; }
p { margin: 0; padding-bottom: 1.5rem; }
hr { border: 0; border-top: 1px solid currentColor; margin: 0 0 1rem; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
.karte-blau :focus-visible, .fuss :focus-visible, .anfahrt :focus-visible { outline-color: #fff; }
.ic { fill: currentColor; flex: none; }

.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; color: var(--blau); padding: .75rem 1rem; }
.sprung:focus { left: .5rem; top: .5rem; }
.seite { background: #fff url("img/background.svg") center top / cover no-repeat; overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
main { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); flex: 1; }

/* Kopf */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; min-height: var(--kopf); background: rgba(255,255,255,.97); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
.kopf-innen { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); min-height: var(--kopf); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
.marke { flex: 1 1 0; min-width: 0; max-width: 25rem; display: block; }
.marke img { width: 100%; height: auto; max-height: 2.5rem; object-fit: contain; object-position: left center; }
.menue-knopf { display: flex; flex-direction: column; align-items: center; gap: .15rem; background: none; border: 0; padding: .5rem; font: inherit; color: var(--blau); cursor: pointer; }
.hauptnav { display: none; width: 100%; padding-bottom: 1rem; }
.hauptnav.offen { display: block; max-height: calc(100vh - var(--kopf)); max-height: calc(100svh - var(--kopf)); overflow-y: auto; }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hauptnav a { display: block; padding: .5rem 1rem; border: 2px solid transparent; border-radius: 9999px; color: var(--blau); text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.hauptnav a:hover { background: var(--blau); border-color: var(--blau); color: #fff; }
.hauptnav a.aktiv { border-color: var(--blau); font-family: var(--schrift-rund); }
.hauptnav a.hervor { background: var(--blau); border-color: var(--blau); color: #fff; }
.hauptnav a.hervor:hover { background: transparent; color: var(--blau); }
@media (min-width: 68.75rem) {
  .menue-knopf { display: none; }
  .hauptnav { display: block; width: auto; padding: 0; }
  .hauptnav ul { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
}

/* Großes Foto am Seitenanfang */
.hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); }
.hero-medien { position: relative; height: 62svh; min-height: 18rem; display: flex; align-items: flex-end; background: var(--gruen); }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mehr { position: relative; display: flex; align-items: center; width: 100%; height: 6rem; background: #fff; color: var(--blau); text-decoration: none; }
.hero-mehr-innen { display: flex; align-items: center; gap: .6rem; width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.hero-mehr:hover .hero-mehr-innen { text-decoration: underline; }
/* Bilderwechsler */
.hero-bilder { position: absolute; inset: 0; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.hero-bild.ist-an { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-bild { transition: none; } }
.hero-steuerung { position: absolute; right: var(--rand); bottom: 7rem; z-index: 2; display: flex; align-items: stretch; background: #fff; border-radius: .75rem; overflow: hidden; box-shadow: 0 4px 12px rgba(6,64,88,.18); }
.hero-pfeil { display: flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; border: 0; background: #fff; color: var(--blau); cursor: pointer; }
.hero-pfeil:hover { background: var(--blau); color: #fff; }
.hero-zaehler { display: flex; align-items: center; justify-content: center; min-width: 3rem; font-variant-numeric: tabular-nums; color: var(--blau); }
@media (min-width: 64rem) { .hero-steuerung { right: max(var(--rand), calc(50vw - var(--breite) / 2 + var(--rand))); } }

/* Kasten mit Text, Knöpfen und Video-Vorschau */
.hero-innen { background: #fff; padding-inline: var(--rand); max-width: var(--breite); margin-inline: auto; }
.hero-box { padding-block: 1.75rem 2rem; display: grid; gap: 1.5rem; align-items: start; }
.hero-titel { font-size: clamp(1.4rem, 3.4vw, 2.1rem); line-height: 1.15; padding-bottom: .75rem; text-wrap: balance; }
.hero-text { padding-bottom: 1.25rem; max-width: 34rem; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-hinweis { font-size: .8125rem; padding: .5rem 0 0; color: #3c5966; max-width: 18rem; }
/* Video-Vorschau mit Playknopf */
.video-vorschau { display: block; text-decoration: none; color: var(--blau); max-width: 20rem; }
.video-bild { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: .75rem; overflow: hidden; background: var(--blau); }
.video-bild img { width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; inset: 0; margin: auto; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--blau); display: flex; align-items: center; justify-content: center; transition: transform .2s, background-color .2s; }
.video-play .ic { width: 1.1rem; height: auto; margin-left: .18rem; }
.video-vorschau:hover .video-play, .video-vorschau:focus-visible .video-play { background: #fff; transform: scale(1.08); }
.video-label { display: flex; align-items: center; gap: .4rem; padding-top: .5rem; font-family: var(--schrift-rund); font-weight: 500; }
.video-vorschau:hover .video-label { text-decoration: underline; }
@media (min-width: 40rem) { .hero-box { grid-template-columns: minmax(0, 1fr) 17rem; } }
@media (min-width: 64rem) {
  .hero-medien { height: 100svh; min-height: 32rem; }
  .hero-innen { position: absolute; inset: 0; background: none; display: flex; align-items: flex-end; padding-bottom: 8rem; pointer-events: none; }
  .hero-box { pointer-events: auto; background: rgba(255,255,255,.95); border-radius: var(--rund); padding: 2rem; max-width: 45rem; box-shadow: 0 10px 30px rgba(6,64,88,.18); }
}

/* Überschriften und Text */
.seitenkopf { padding-top: 12.5rem; }
.seitenkopf h1 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.1; padding-bottom: 1rem; }
.intro { width: 100%; margin-bottom: 2rem; }
.intro h1 { margin-top: 2rem; font-size: clamp(1.875rem, 4.2vw, 4.5rem); line-height: 1.05; padding-bottom: 1rem; }
.intro p { padding: 0 1rem 0 0; margin-bottom: 1rem; }
.intro .knopf { margin-bottom: 4em; }
@media (min-width: 80rem) { .intro { width: 66.666%; } }
@media (min-width: 96rem) { .intro { width: 50%; } }
.zwischen { font-size: 1.5rem; line-height: 2rem; text-align: center; padding-bottom: .5rem; }
.block { padding-block: 3rem 6rem; }
.block.eng { padding-bottom: 0; }
.block.eng + .block { padding-top: 2rem; }
.seitenkopf + .block { padding-top: 1.5rem; }
.stapel { display: flex; flex-direction: column; gap: 2rem; }
.raster { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 56.25rem) { .raster { grid-template-columns: 1fr 1fr; } }
.text { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
@media (min-width: 56.25rem) { .text-zwei { grid-template-columns: 1fr 1fr; } .text:not(.text-zwei) { max-width: 50rem; } }
.text-mitte { text-align: center; margin-inline: auto; }
.text-aktion { display: flex; padding-top: .5rem; }
.text-aktion.mitte { justify-content: center; }
.rt > :last-child { padding-bottom: 0; margin-bottom: 0; }
.rt ul, .rt ol { margin: 0; padding: 0 0 1.5rem 1.25rem; }
.rt h2 { font-size: 1.5rem; line-height: 2rem; padding: .5rem 0; }
.rt h3 { font-size: 1.25rem; padding-bottom: .5rem; }
.rt a { text-decoration: underline; }

/* Knöpfe */
.knopf, .knopf-umriss, .knopf-rand, .link-pfeil, .knopf-hell { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--schrift-rund); text-decoration: none; border-radius: 9999px; padding: .5rem 1rem; border: 2px solid transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; font-size: 1rem; line-height: 1.5; }
.knopf { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf:hover { background: transparent; color: var(--blau); }
.knopf-umriss { width: 100%; background: var(--blau); border-color: #fff; color: #fff; font-weight: 500; }
.knopf-umriss:hover { background: #fff; color: var(--blau); }
.link-pfeil { color: var(--schwarz); border-color: var(--schwarz); }
.link-pfeil:hover { background: var(--schwarz); color: #fff; }
.knopf-rand { background: #fff; border-color: var(--blau); color: var(--blau); }
.knopf-rand:hover { background: var(--blau); color: #fff; }
.knopf-hell { width: 100%; border-radius: var(--rund); background: #fff; border-color: #fff; color: var(--blau); margin-top: 1rem; }
.knopf-hell:hover { background: transparent; color: #fff; }

/* Karten */
.karte { display: flex; flex-direction: column; border-radius: var(--rund); overflow: hidden; height: 100%; }
.karte-text { display: flex; flex-direction: column; padding: 2.5rem 2rem; flex: 1; min-width: 0; }
.karte-titel { font-size: 1.25rem; line-height: 1.25; margin-bottom: .75rem; }
@media (min-width: 64rem) { .karte-titel { font-size: 1.875rem; } }
.karte-ort { display: flex; align-items: center; gap: .5rem; padding-bottom: .5rem; }
.karte-ort .ic { width: .8rem; height: auto; }
.karte-aktion { margin-top: auto; padding-top: 2rem; display: flex; justify-content: flex-end; }
.karte-aktion.links { justify-content: flex-start; }
.karte-bild { position: relative; height: 24rem; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rund); }
.karte-orange { background: var(--orange); color: var(--schwarz); }
.karte-orange .rt { max-width: 80%; }
.karte-gelb { background: var(--gelb); color: var(--blau); }
.karte-gelb .karte-aktion { justify-content: flex-start; }
.karte-blau { background: var(--blau); color: #fff; }
.karte-blau .karte-titel, .karte-gruen .karte-titel { margin-bottom: 0; padding-bottom: .5rem; }
.karte-blau .karte-bild, .karte-gruen .karte-bild { height: 18rem; }
.karte-gruen { background: var(--gruen); color: var(--blau); }
@media (min-width: 64rem) {
  .karte-orange.hat-bild, .karte-gelb.hat-bild { flex-direction: row; }
  .karte-orange.hat-bild .karte-bild { width: 40%; height: auto; min-height: 24rem; }
  .karte-orange.hat-bild .karte-text { width: 60%; }
  .karte-gelb.hat-bild .karte-bild { width: 60%; height: auto; min-height: 24rem; order: 2; }
  .karte-gelb.hat-bild .karte-text { width: 40%; order: 1; }
}
.belegung-zahl { font-family: var(--schrift-rund); font-weight: 500; font-size: 1.25rem; padding-bottom: .5rem; }
.kontakt-name { padding-bottom: 0; }
.kontakt-liste { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 .4rem; }
.kontakt-liste dd { margin: 0; }
.kontakt-liste a, .fuss li a { display: inline-block; padding-block: .35rem; }
.kontakt-liste { align-items: center; }
.anfahrt { background: var(--blau); color: #fff; border-radius: var(--rund); padding: 2rem; display: flex; flex-direction: column; }
.anfahrt p { padding-bottom: 1rem; }
.anfahrt-label { display: flex; align-items: center; gap: .5rem; padding-bottom: .5rem !important; }
.anfahrt-label .ic { width: .75rem; height: auto; }
.social { display: flex; justify-content: center; padding-block: 3rem 6rem; }

/* Formular */
.formular { padding-block: 3rem 6rem; }
.formular-intro { text-align: center; }
.formular-pflicht { padding: 1rem 0 0; font-size: .875rem; }
.formular form { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; }
@media (min-width: 56.25rem) { .formular form { grid-template-columns: 1fr 1fr; } .feld.breit { grid-column: 1 / -1; } }
.feld label { display: block; padding-bottom: .25rem; }
.feld input[type=text], .feld textarea { width: 100%; font: inherit; color: inherit; background: #fff; border: 2px solid var(--schwarz); border-radius: var(--rund); padding: .5rem 1rem; -webkit-appearance: none; appearance: none; }
.feld.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; font-style: italic; }
.feld.check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--blau); }
.feld.check label { padding: 0; }
.feld.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweis { border-radius: var(--rund); padding: 1rem 1.25rem; margin-top: 1rem; }
.hinweis.ok { background: var(--gruen); color: var(--blau); }
.hinweis.fehler { background: var(--gelb); color: #000; border: 2px solid var(--schwarz); }

/* Einwilligung: Banner unten, verschwindet nach der Auswahl */
.zustimmung { position: fixed; inset: auto 0 0 0; z-index: 60; background: #fff; border-top: 2px solid var(--blau); box-shadow: 0 -8px 24px rgba(6,64,88,.18); }
:root[data-zustimmung] .zustimmung { display: none; }
.zustimmung-innen { max-width: var(--breite); margin-inline: auto; padding: 1.25rem var(--rand); display: grid; gap: .75rem; }
.zustimmung h2 { font-size: 1.125rem; }
.zustimmung p { padding: 0; max-width: 60ch; font-size: .9375rem; }
.zustimmung a { text-decoration: underline; }
.zustimmung-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 60rem) { .zustimmung-innen { grid-template-columns: 1fr auto; align-items: center; } .zustimmung h2 { grid-column: 1; } .zustimmung-knoepfe { grid-column: 2; grid-row: 1 / span 2; } }

/* Video-Fenster: YouTube wird erst geladen, wenn jemand den Knopf drückt */
.videofenster { width: min(64rem, 94vw); max-width: 94vw; padding: 0; border: 0; border-radius: var(--rund); background: #000; color: #fff; overflow: visible; }
.videofenster::backdrop { background: rgba(6,64,88,.85); }
.video-rahmen { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: var(--rund); overflow: hidden; }
.video-rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-zu { position: absolute; right: 0; bottom: calc(100% + .5rem); font: inherit; font-family: var(--schrift-rund); background: #fff; color: var(--blau); border: 2px solid #fff; border-radius: 9999px; padding: .4rem 1.1rem; min-height: 2.75rem; cursor: pointer; }
.video-zu:hover { background: transparent; color: #fff; }
.videofenster :focus-visible { outline-color: #fff; }

/* Anruf-Knopf (nur schmale Bildschirme) */
.anruf { position: fixed; right: 0; top: 80%; z-index: 40; background: var(--orange); color: var(--schwarz); padding: 1.5rem 1rem; border-radius: 9999px 0 0 9999px; transition: padding .2s; display: flex; }
.anruf:hover { padding-right: 2rem; }
@media (min-width: 96rem) { .anruf { display: none; } }

/* Fuß */
.fuss { background: var(--blau); color: #fff; border-top: 2px solid transparent; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-innen { max-width: var(--breite); margin-inline: auto; padding: 2rem var(--rand); display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 48rem) { .fuss-innen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 80rem) { .fuss-innen { grid-template-columns: 1fr 1.4fr 1fr 1.2fr; } }
.fuss-logo img { height: 3rem; width: auto; }
.fuss-titel { font-family: var(--schrift-rund); font-weight: 500; padding-bottom: .5rem; }
.fuss p { padding-bottom: 0; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss nav li a { display: inline-block; padding-block: .45rem; }
.fuss-unten ul { gap: .5rem 1.5rem; }
.fuss-unten { background: var(--blau-tief); }
.fuss-unten-innen { max-width: var(--breite); margin-inline: auto; padding: 1rem var(--rand); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 1rem; }
.kontrast-knopf { min-height: 2.75rem; font: inherit; color: #fff; background: none; border: 2px solid #fff; border-radius: 9999px; padding: .25rem 1rem; cursor: pointer; }
.kontrast-knopf:hover, .kontrast-knopf[aria-pressed=true] { background: #fff; color: var(--blau-tief); }

/* Kontrastansicht: die „reduzierte Ansicht“ der bisherigen Seite in Schwarz und Weiß */
html[data-kontrast="1"] { --blau: #000; --blau-tief: #000; }
html[data-kontrast="1"] .seite { background-image: none; }
html[data-kontrast="1"] .kopf { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-kontrast="1"] .karte-orange, html[data-kontrast="1"] .karte-blau, html[data-kontrast="1"] .anfahrt { background: #000; color: #fff; box-shadow: inset 0 0 0 2px var(--schwarz); }
html[data-kontrast="1"] .karte-gelb, html[data-kontrast="1"] .karte-gruen { background: #fff; color: #000; box-shadow: inset 0 0 0 2px var(--schwarz); }
html[data-kontrast="1"] .link-pfeil:hover { color: #000; }
html[data-kontrast="1"] .anruf { background: #000; border: 2px solid #fff; border-right: 0; }
html[data-kontrast="1"] .fuss { border-top-color: #fff; }
html[data-kontrast="1"] .fuss-unten { border-top: 2px solid #fff; }
html[data-kontrast="1"] .hinweis.ok { background: #fff; color: #000; border: 2px solid #000; }
html[data-kontrast="1"] a:not([class]), html[data-kontrast="1"] .fuss a { text-decoration: underline; }
html[data-kontrast="1"] .karte-orange :focus-visible, html[data-kontrast="1"] .karte-blau :focus-visible, html[data-kontrast="1"] .anfahrt :focus-visible, html[data-kontrast="1"] .fuss :focus-visible { outline-color: #fff; }
html[data-kontrast="1"] .hauptnav a.aktiv { text-decoration: underline; }
html[data-kontrast="1"] .hero-box { background: #fff; color: #000; box-shadow: inset 0 0 0 2px var(--schwarz); }
html[data-kontrast="1"] .zustimmung { border-top-color: #000; }
html[data-kontrast="1"] .karte-orange { color: #fff; }
html[data-kontrast="1"] .link-pfeil { color: #fff; border-color: #fff; }
html[data-kontrast="1"] .link-pfeil:hover { background: #fff; color: #000; }
html[data-kontrast="1"] .hero-hinweis { color: #000; }
html[data-kontrast="1"] .video-play { background: #fff; color: #000; box-shadow: 0 0 0 2px #000; }
html[data-kontrast="1"] .video-vorschau, html[data-kontrast="1"] .hero-zaehler, html[data-kontrast="1"] .hero-pfeil { color: #000; }
html[data-kontrast="1"] .hero-steuerung { box-shadow: inset 0 0 0 2px #000; }
html[data-kontrast="1"] .hero-pfeil:hover { background: #000; color: #fff; }
html[data-kontrast="1"] .knopf-rand { border-color: #000; color: #000; }
html[data-kontrast="1"] .knopf-rand:hover { background: #000; color: #fff; }