/* SV Havelblick – sv-havelblick.de
   Idee: der Blick über die Havel. Horizont, Wasser, Abendsonne – ruhig, warm, gut lesbar.
   Schriften: Atkinson Hyperlegible Next (für Lesbarkeit entworfen) + Fraunces (weiche Serife). */

@font-face {
  font-family: "Atkinson Next";
  src: url("/assets/fonts/atkinson-next-wght.woff2?v=18b2a1a39a") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("/assets/fonts/fraunces-soft.woff2?v=9fc3a8586b") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces Soft";
  src: url("/assets/fonts/fraunces-soft-italic.woff2?v=cc851a4d63") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  color-scheme: light;
  --sand: #faf5ec;
  --sand-2: #f3eadb;
  --papier: #fffdf9;
  --tinte: #16262e;        /* Fliesstext, 14.9:1 auf Sand */
  --tinte-2: #3a4a52;      /* Nebentext, 8.6:1 */
  --havel: #0e4553;        /* tiefes Havelblau */
  --havel-2: #16606f;
  --nebel: #e7f0f1;
  --schilf: #4f6c52;
  --sonne: #e98f4c;        /* nur Schmuck */
  --sonne-text: #9a4414;   /* Akzenttext, 6.6:1 auf Sand */
  --hell: #f6e3cc;
  --fokus: #c2410c;
  --serif: "Fraunces Soft", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --radius: 1.25rem;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
html[data-schrift="2"] { font-size: 115%; }
html[data-schrift="3"] { font-size: 132%; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--sand); color: var(--tinte);
  font-family: var(--sans); font-size: 1.25rem; line-height: 1.65; font-weight: 400;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }
a { color: var(--havel); text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--sonne-text); }
:focus-visible { outline: 4px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
.nowrap { white-space: nowrap; }

h1, h2, h3 { font-family: var(--serif); font-weight: 560; line-height: 1.15; letter-spacing: -.012em; color: var(--havel); margin: 0 0 .5em; font-variation-settings: "SOFT" 100; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: 1.04; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.6rem; }
em { font-style: italic; }
h1 em, h2 em { color: var(--sonne-text); font-weight: 480; }

.rahmen { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: var(--rand); }

.sprung { position: absolute; left: 1rem; top: -10rem; z-index: 10; background: var(--havel); color: #fff; padding: 1rem 1.25rem; border-radius: .75rem; font-weight: 700; }
.sprung:focus { top: 1rem; color: #fff; }

.ikon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; }

/* ---------- Lesehilfe ---------- */
.lesehilfe { background: var(--havel); color: #fff; font-size: 1.05rem; }
.lesehilfe__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; padding-block: .35rem; }
.groesse { display: flex; align-items: center; gap: .4rem; }
.groesse__titel { margin-right: .35rem; opacity: .92; }
.groesse__knopf {
  font: 700 1.05rem/1 var(--sans); color: #fff; background: transparent; cursor: pointer;
  min-width: 2.9rem; min-height: 2.9rem; border: 2px solid rgba(255,255,255,.55); border-radius: .7rem;
}
.groesse__knopf--2 { font-size: 1.3rem; }
.groesse__knopf--3 { font-size: 1.6rem; }
.groesse__knopf[aria-pressed="true"] { background: var(--hell); color: var(--havel); border-color: var(--hell); }
.groesse__knopf:hover { border-color: #fff; }
.lesehilfe__tel { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; text-decoration: none; min-height: 2.9rem; padding-inline: .25rem; letter-spacing: .01em; }
.lesehilfe__tel:hover { color: var(--hell); text-decoration: underline; }

/* ---------- Kopf ---------- */
.kopf { background: var(--sand); position: relative; z-index: 3; }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; }
.marke { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--havel); }
.marke__zeichen { width: 3.6rem; height: 3.6rem; flex: none; }
.marke__text { display: flex; flex-direction: column; line-height: 1.15; }
.marke__name { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; font-variation-settings: "SOFT" 100; }
.marke__zusatz { font-size: 1rem; color: var(--tinte-2); }
.navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.navi a { display: flex; align-items: center; min-height: 3.1rem; padding: .4rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--tinte); font-size: 1.15rem; }
.navi a:hover { background: var(--nebel); color: var(--havel); }
.menue-knopf { display: none; }

/* ---------- Auftakt ---------- */
.auftakt { position: relative; background: var(--sand); }
.auftakt__text { padding-top: clamp(2rem, 6vw, 5rem); padding-bottom: 2rem; position: relative; z-index: 2; }
.auftakt__ort { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; color: var(--sonne-text); margin-bottom: 1.1rem; }
.auftakt h1 { max-width: 14em; }
.auftakt h1 em { display: block; }
.auftakt__lead { font-size: clamp(1.3rem, 2.1vw, 1.55rem); line-height: 1.6; max-width: 34em; color: var(--tinte); }
.auftakt__wege { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.75rem; padding: .8rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 1.25rem; text-decoration: none; line-height: 1.2; text-align: center;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.knopf--voll { background: var(--havel); color: #fff; box-shadow: 0 .5rem 1.5rem -0.6rem rgba(14,69,83,.55); }
.knopf--voll:hover { background: var(--havel-2); color: #fff; transform: translateY(-2px); }
.knopf--rand { border: 3px solid var(--havel); color: var(--havel); background: var(--papier); }
.knopf--rand:hover { background: var(--nebel); color: var(--havel); }

.panorama { position: relative; margin-top: -1rem; line-height: 0; }
.panorama__bild { width: 100%; height: clamp(12rem, 26vw, 24rem); }
.panorama__welle { animation: treiben 18s linear infinite; }
.panorama__welle--1 { --weg: -180px; animation-duration: 16s; }
.panorama__welle--2 { --weg: -240px; animation-duration: 22s; animation-direction: reverse; }
.panorama__welle--3 { --weg: -320px; animation-duration: 30s; }
.panorama__schein { transform-origin: 1060px 206px; animation: atmen 9s ease-in-out infinite; }
@keyframes treiben { from { transform: translateX(0); } to { transform: translateX(var(--weg)); } }
@keyframes atmen { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }

@media (min-width: 60rem) {
  .panorama { margin-top: clamp(-15rem, -13vw, -8rem); z-index: 1; }
  .panorama__bild { height: clamp(20rem, 30vw, 30rem); }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(4rem, 9vw, 7.5rem); }
.kicker { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1rem; color: var(--sonne-text); margin-bottom: .8rem; display: flex; align-items: center; gap: .75rem; }
.kicker::before { content: ""; width: 2.4rem; height: .75rem; flex: none; background: url("/assets/welle.svg?v=bc9926b5ba") center/contain no-repeat; }
.kicker--hell { color: var(--hell); }
.kicker--hell::before { background-image: url("/assets/welle-hell.svg?v=d4460fc407"); }

.herkunft { background: var(--havel); color: #fff; }
.herkunft h2 { color: #fff; }
.herkunft .kicker { color: var(--hell); }
.herkunft .kicker::before { background-image: url("/assets/welle-hell.svg?v=d4460fc407"); }
.herkunft__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.herkunft__text { font-size: 1.3rem; }
.herkunft__text .gross { font-family: var(--serif); font-size: clamp(1.6rem, 2.5vw, 2rem); line-height: 1.4; font-variation-settings: "SOFT" 100; font-weight: 400; }
.herkunft__text strong { color: var(--hell); font-weight: 600; }

.werte { background: var(--sand); }
.werte__liste { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.wert { background: var(--papier); border-radius: var(--radius); padding: 2rem 1.75rem 2.25rem; border: 1px solid #eadfcd; box-shadow: 0 1.5rem 3rem -2.2rem rgba(14,69,83,.35); }
.wert__bild { width: 5rem; height: 5rem; margin-bottom: 1.25rem; }
.wert h3 { font-size: 1.65rem; }
.wert p { color: var(--tinte); }

.blick { background: linear-gradient(180deg, var(--sand) 0%, #f8e2c9 100%); text-align: center; }
.blick__innen { max-width: 58rem; }
.blick__linie { width: min(18rem, 70%); height: 1.6rem; margin: 0 auto 2rem; color: var(--sonne); }
.blick__satz { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.12; margin-bottom: 1.5rem; }
.blick__satz em { display: block; }
.blick__hinweis { max-width: 36em; margin-inline: auto; color: var(--tinte-2); font-size: 1.15rem; }

.mitmachen { background: var(--papier); }
.schritte { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1rem; }
.schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.75rem 0; border-top: 2px solid var(--nebel); }
.schritt:last-child { border-bottom: 2px solid var(--nebel); }
.schritt__zahl { width: 4rem; height: 4rem; border-radius: 50%; background: var(--nebel); color: var(--havel); display: grid; place-items: center; font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.schritt h3 { margin-bottom: .3em; }
.schritt p { max-width: 40em; }
.zeiten { margin-top: 3rem; display: flex; gap: 1.5rem; align-items: flex-start; background: var(--nebel); border-radius: var(--radius); padding: 2rem; color: var(--havel); }
.zeiten__bild { width: 3.5rem; height: 3.5rem; flex: none; }
.zeiten h3 { font-size: 1.5rem; }
.zeiten p { color: var(--tinte); max-width: 44em; }

.vorstand { background: var(--sand-2); }
.vorstand__liste { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.vorstand__liste li { background: var(--papier); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; gap: .35rem; border-left: 6px solid var(--sonne); }
.vorstand__rolle { color: var(--tinte-2); font-size: 1.05rem; }
.vorstand__name { font-family: var(--serif); font-size: 1.75rem; color: var(--havel); font-weight: 560; line-height: 1.2; }

.kontakt { background: var(--havel); color: #fff; position: relative; overflow: hidden; }
.kontakt::after { content: ""; position: absolute; right: -8rem; bottom: -14rem; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(circle, rgba(233,143,76,.35), rgba(233,143,76,0) 65%); pointer-events: none; }
.kontakt h2 { color: #fff; }
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; position: relative; z-index: 1; }
.kontakt__lead { font-size: 1.25rem; color: #e8f1f2; }
.kontakt__karten { display: grid; gap: 1rem; }
.karte { display: flex; flex-direction: column; gap: .2rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25); color: #fff; text-decoration: none; transition: background-color .2s, border-color .2s; }
a.karte:hover { background: var(--hell); border-color: var(--hell); color: var(--havel); }
a.karte:hover .karte__titel { color: var(--havel); }
.karte__titel { font-size: 1.05rem; color: var(--hell); font-weight: 600; }
.karte__wert { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.25; font-weight: 500; }
.karte__wert--mail { overflow-wrap: anywhere; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.karte__wert--adresse { font-style: normal; font-family: var(--sans); font-size: 1.25rem; line-height: 1.55; }

/* ---------- Fuss ---------- */
.fuss { background: #0a333e; color: #e2ecee; padding-block: 2.5rem; font-size: 1.1rem; }
.fuss__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.fuss__name { margin: 0; }
.fuss__links { list-style: none; display: flex; gap: .5rem; margin: 0; padding: 0; }
.fuss__links a { color: #fff; display: inline-flex; align-items: center; min-height: 3rem; padding-inline: .6rem; font-weight: 600; }
.fuss__links a:hover { color: var(--hell); }
.auctor { flex-basis: 100%; margin: .5rem 0 0; text-align: center; }

.csl-atthis-signum {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.02em;
  text-transform: none; color: inherit; text-decoration: none; border: 0;
}
.csl-atthis-signum span { opacity: 0.6; transition: opacity 0.2s; }
.csl-atthis-signum svg { display: block; flex: none; opacity: 0.9; }
.csl-atthis-signum:hover span, .csl-atthis-signum:focus-visible span { opacity: 0.95; }
.fuss .csl-atthis-signum { color: #e2ecee; }
.fuss .csl-atthis-signum span { opacity: .8; }

/* ---------- Unterseiten ---------- */
.seite { padding-block: clamp(3rem, 7vw, 6rem); }
.seite__inhalt { max-width: 44rem; }
.seite h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.seite h2 { font-size: 1.6rem; margin-top: 2.2rem; margin-bottom: .5rem; }
.seite address { font-style: normal; margin-bottom: 1em; }
.seite dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1em; }
.seite dt { font-weight: 700; }
.seite dd { margin: 0; }
.seite ul.personen { margin: 0 0 1em; padding-left: 1.25em; }
.seite .stand { margin-top: 2.5rem; color: var(--tinte-2); font-size: 1.05rem; }
.zurueck { display: inline-flex; margin-top: 2rem; }

.leer { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; }

/* ---------- Handy ---------- */
@media (max-width: 60rem) {
  .herkunft__raster, .kontakt__raster { grid-template-columns: 1fr; }
  .werte__liste, .vorstand__liste { grid-template-columns: 1fr; }
}
@media (max-width: 52rem) {
  .kopf__innen { flex-wrap: wrap; }
  .menue-knopf {
    display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .5rem 1.1rem;
    font: 700 1.15rem/1 var(--sans); color: var(--havel); background: var(--papier);
    border: 2px solid var(--havel); border-radius: 999px; cursor: pointer;
  }
  .menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after { display: block; width: 1.2rem; height: 3px; background: currentColor; border-radius: 2px; position: relative; }
  .menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
  .menue-knopf__striche::before { top: -7px; }
  .menue-knopf__striche::after { top: 7px; }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche { background: transparent; }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche::before { top: 0; transform: rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-knopf__striche::after { top: 0; transform: rotate(-45deg); }
  .js .navi { display: none; flex-basis: 100%; }
  .js .navi.offen { display: block; }
  .navi { flex-basis: 100%; }
  .navi ul { flex-direction: column; gap: .5rem; padding-bottom: .5rem; }
  .navi a { min-height: 3.6rem; background: var(--papier); border: 2px solid #eadfcd; border-radius: 1rem; font-size: 1.25rem; padding-inline: 1.25rem; }
}
@media (max-width: 30rem) {
  body { font-size: 1.1875rem; }
  .groesse__titel { display: none; }
  .lesehilfe__innen { gap: .5rem; }
  .groesse { gap: .3rem; }
  .groesse__knopf { min-width: 2.75rem; min-height: 2.75rem; }
  .lesehilfe__tel { gap: .4rem; padding-inline: 0; }
  .kopf__innen { gap: .75rem; }
  .marke { gap: .6rem; }
  .marke__zeichen { width: 2.75rem; height: 2.75rem; }
  .marke__name { font-size: 1.4rem; }
  .marke__zusatz { font-size: .875rem; }
  .menue-knopf { padding: .5rem .8rem; gap: .5rem; }
  .auftakt__wege .knopf { width: 100%; }
  .schritt { grid-template-columns: 1fr; gap: .9rem; }
  .zeiten { flex-direction: column; padding: 1.5rem; }
  .wert { padding: 1.6rem 1.35rem 1.8rem; }
  .fuss__innen { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}