/* ══════════════════════════════════════════════════════════════════════════
   Startseite (index.html) — seiteneigener Stil, geladen NACH site.css.
   Film · Erfolgsgeschichte · Die Arche (Herzstück) · Über · Kernwerte ·
   Erfolge · Ansprechpartner · Leitsatz. Nichts wird per CSS vorversteckt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Willkommen + Imagefilm ─────────────────────────────────────────────── */
.film-sektion { padding-bottom: 5rem; overflow: clip; }
@media (min-width: 768px) { .film-sektion { padding-top: 5rem; padding-bottom: 7rem; } }
.film-kopf { max-width: 52rem; margin: 0 auto 2.5rem; text-align: center; }
.film-kopf h2 { margin: 0 0 .9rem; color: #FFFFFF; }
.film-kopf .lead { margin: 0 auto; max-width: 40rem; }
.film-buehne { padding: 0 1.25rem; }
@media (min-width: 768px) { .film-buehne { padding: 0 2rem; } }
.film-rahmen {
  position: relative; margin: 0 auto; max-width: 80rem; aspect-ratio: 16 / 9;
  border-radius: 28px; overflow: hidden; background: #0F3F4A;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6);
  clip-path: inset(0 0 0 0 round 28px);            /* Endzustand = offen (Fail-Safe) */
}
.film-rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-welle { position: absolute; left: 0; width: 200%; height: 46px; pointer-events: none; z-index: 1; animation: film-welle calc(26s * var(--tempo)) var(--ease-in-out) infinite alternate; }
.film-welle path { fill: var(--tiefsee); }
.film-welle-oben { top: -1px; }
.film-welle-unten { bottom: -1px; animation-duration: calc(34s * var(--tempo)); animation-direction: alternate-reverse; }
@media (min-width: 768px) { .film-welle { height: 64px; } }
@keyframes film-welle { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
/* Play/Pause-Knopf kommt aus site.js (data-arche-film); hier nur aus der Wellenkante gehoben. */
.film-rahmen .film-steuerung { bottom: 3rem; left: 1.2rem; right: 1.2rem; }
@media (min-width: 768px) { .film-rahmen .film-steuerung { bottom: 4.2rem; left: 2rem; right: 2rem; } }

/* ── Kopfbereich mit Imagefilm als Hintergrund (Test 21.09.2026) ─────────────
   Das Foto (.hero-foto) bleibt darunter: sichtbar bis der Film läuft und bei
   reduzierter Bewegung. Leichte Weichzeichnung + Abdunklung, weil die Quelle nur 720p hat. */
.hero-film { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-out); transform: scale(1.03); }
.hero-film video.laeuft { opacity: 1; }
.hero-film + .hero-overlay, .hero-film ~ .hero-overlay { background: linear-gradient(100deg, rgb(10 46 54 / .9) 0%, rgb(10 46 54 / .72) 45%, rgb(10 46 54 / .42) 100%); }
.film-hinweis { margin: 1.1rem auto 0; max-width: 80rem; text-align: center; font-size: .92rem; color: var(--auf-tiefsee-muted); }

/* ── Erfolgsgeschichte + Jubiläum ───────────────────────────────────────── */
.geschichte { display: grid; gap: 2.5rem; align-items: center; margin-bottom: 3.5rem; }
@media (min-width: 900px) { .geschichte { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; } }
.geschichte h2 { margin: 0 0 1rem; }
.jubilaeum { margin: 0; justify-self: center; width: min(100%, 22rem); background: #FFFFFF; border-radius: var(--r-lg); padding: 1.4rem 1.4rem 1.1rem; box-shadow: var(--shadow); border: 1px solid var(--line); }
.jubilaeum img { width: 100%; height: auto; display: block; }
.jubilaeum figcaption { margin-top: .6rem; text-align: center; font-weight: 600; color: #3E5A60; font-size: .95rem; }

/* ── Die Arche (Herzstück) — Szene über die volle Breite ─────────────────────
   Ebenen: Himmel (.ak-himmel-svg) · Meer (.ak-see-svg) · Boot (.arche-boot) ·
   vordere Wellen (.ak-vorn) · Tafel rechts (.arche-panel) liegt ÜBER der Szene.
   Wasserlinie des Boots (viewBox-y 470 von 80…620 → 27,8 % der Höhe ab unten
   = 0,1876 × Bootsbreite) sitzt auf --wl über dem unteren Rand. */
.scrolly-arche { --bw: min(60vw, 104svh); --wl: 22svh; --horizont: 60svh; background: #0F6E7B; }
.scrolly-arche .scrolly-buehne { isolation: isolate; }
.ak-szene, .ak-vorn { position: absolute; inset: 0; pointer-events: none; }
.arche-ebene { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.arche-ebene .arche-panel { pointer-events: auto; }
.ak-himmel-svg { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--horizont) + 2px); display: block; }
.ak-see-svg { position: absolute; left: 0; top: var(--horizont); width: 100%; height: calc(100% - var(--horizont)); display: block; }
.ak-vorn { z-index: 2; top: auto; height: calc(var(--wl) + 4svh); }
.ak-vorn-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.arche-boot { position: absolute; z-index: 1; left: max(1.5rem, 3vw); width: var(--bw); aspect-ratio: 800 / 540; bottom: calc(var(--wl) + 2.5svh - var(--bw) * .1876); }
.arche-boot-kamera { width: 100%; height: 100%; transform-origin: 50% 80%; }
.sp-arche { width: 100%; height: 100%; display: block; overflow: visible; }

/* Dauerschleifen: Wolken ziehen, Wellen laufen (je exakt eine Kachel = 1600 Einheiten), Sonne dreht */
.akz-wolken-fern  { animation: akz-zug calc(160s * var(--tempo)) linear infinite; }
.akz-wolken-mitte { animation: akz-zug calc(110s * var(--tempo)) linear infinite; }
.akz-wolken-nah   { animation: akz-zug calc(75s * var(--tempo)) linear infinite; }
@keyframes akz-zug { from { transform: translateX(0); } to { transform: translateX(-1600px); } }
.akz-strahlen { animation: akz-dreh calc(90s * var(--tempo)) linear infinite; }
@keyframes akz-dreh { to { transform: rotate(360deg); } }
.akz-lauf { animation: akz-zug calc(var(--lauf, 20s) * var(--tempo)) linear infinite; }
.akz-lauf-0 { --lauf: 64s; } .akz-lauf-1 { --lauf: 48s; } .akz-lauf-2 { --lauf: 36s; }
.akz-lauf-3 { --lauf: 27s; } .akz-lauf-4 { --lauf: 20s; } .akz-lauf-5 { --lauf: 15s; }
.akz-vlauf-0 { --lauf: 12s; } .akz-vlauf-1 { --lauf: 9.5s; } .akz-vlauf-2 { --lauf: 7.5s; }
/* Dünung: jedes Band hebt und senkt sich, gegeneinander versetzt — vorne stärker als hinten */
.akz-hub { animation: akz-hub calc(var(--hub-t, 5s) * var(--tempo)) var(--ease-in-out) infinite alternate; }
.akz-hub-0 { --hub-t: 6.2s; --hub: 1.5px; } .akz-hub-1 { --hub-t: 5.6s; --hub: 2.5px; animation-delay: -1.3s; }
.akz-hub-2 { --hub-t: 5s; --hub: 3.5px; animation-delay: -2.1s; } .akz-hub-3 { --hub-t: 4.6s; --hub: 5px; animation-delay: -.7s; }
.akz-hub-4 { --hub-t: 4.2s; --hub: 7px; animation-delay: -2.8s; } .akz-hub-5 { --hub-t: 3.8s; --hub: 9px; animation-delay: -1.6s; }
.akz-vhub-0 { --hub-t: 3.6s; --hub: 10px; animation-delay: -.4s; } .akz-vhub-1 { --hub-t: 3.2s; --hub: 13px; animation-delay: -1.9s; }
.akz-vhub-2 { --hub-t: 2.9s; --hub: 16px; animation-delay: -1.1s; }
@keyframes akz-hub { from { transform: translateY(calc(var(--hub) * -1)); } to { transform: translateY(var(--hub)); } }
.akz-moewen { animation: akz-moewen calc(26s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes akz-moewen { from { transform: translate(-40px, 6px); } to { transform: translate(60px, -10px); } }
.akz-moewe { transform-box: fill-box; transform-origin: 50% 100%; animation: akz-fluegel calc(1.6s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes akz-fluegel { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
.akz-leuchtfeuer { transform-box: fill-box; transform-origin: 100% 50%; animation: akz-feuer calc(8s * var(--tempo)) var(--ease-in-out) infinite; }
@keyframes akz-feuer { 0%, 100% { opacity: 0; } 45%, 55% { opacity: .45; } }
.akz-funke { animation: akz-funkeln calc(3.4s * var(--tempo)) var(--ease-in-out) infinite alternate; }
.akz-funke-1 { animation-delay: -1.1s; } .akz-funke-2 { animation-delay: -2.2s; }
@keyframes akz-funkeln { from { opacity: .15; } to { opacity: .85; } }
.sp-arche .ak-wiegen { transform-box: fill-box; transform-origin: 50% 82%; animation: ak-wiegen calc(5.4s * var(--tempo)) var(--ease-in-out) infinite; }
@keyframes ak-wiegen { 0%, 100% { transform: rotate(-1.4deg) translateY(2px); } 50% { transform: rotate(1.2deg) translateY(-7px); } }
.sp-arche .ak-kurve { stroke-dasharray: 250 60; animation: ak-kurve calc(3.2s * var(--tempo)) linear infinite; }
@keyframes ak-kurve { from { stroke-dashoffset: 310; } to { stroke-dashoffset: 0; } }
.sp-arche .ak-flagge { transform-box: fill-box; transform-origin: 100% 50%; animation: ak-flagge calc(5s * var(--tempo)) var(--ease-in-out) infinite; }
@keyframes ak-flagge { 0%, 100% { transform: skewY(-3deg) scaleX(1); } 50% { transform: skewY(3deg) scaleX(.94); } }

/* Bugwelle schäumt im Takt des Wiegens */
.sp-arche .ak-bugwelle { transform-box: fill-box; transform-origin: 0 100%; animation: ak-gischt calc(2.7s * var(--tempo)) var(--ease-in-out) infinite alternate; }
@keyframes ak-gischt { from { transform: scale(.92, .85); opacity: .75; } to { transform: scale(1.06, 1.1); opacity: 1; } }

/* Nummerierte Punkte am Boot (gleiche Nummer wie in der Tafel) */
.ak-punkt-zahl { font-family: var(--font-head); font-weight: 700; font-size: 16px; fill: #FFFFFF; }
.ak-punkt-puls { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.ak-punkt.ist-jetzt .ak-punkt-puls { animation: ak-puls calc(2.2s * var(--tempo)) var(--ease-out) infinite; }
@keyframes ak-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.ak-punkt.ist-jetzt > circle:nth-of-type(3) { fill: #E4664F; }

/* Tafel rechts — liegt über der Szene */
.arche-panel { position: absolute; z-index: 3; right: max(1.25rem, 3.5vw); top: 50%; transform: translateY(-46%); width: min(27rem, 34vw); }
.arche-panel-innen {
  background: rgb(255 255 255 / .82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .7); border-radius: 24px; padding: 1.6rem 1.6rem 1.3rem;
  box-shadow: 0 30px 70px -30px rgb(10 46 54 / .55), 0 2px 0 rgb(255 255 255 / .6) inset;
}
.arche-panel h2 { margin: 0 0 .45rem; font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.1; }
.arche-intro { margin: 0 0 1rem; color: var(--muted); font-size: .98rem; }
.arche-fortschritt { height: 4px; border-radius: 999px; background: rgb(10 46 54 / .1); overflow: hidden; margin: 0 0 .9rem; }
.arche-fortschritt i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tuerkis), var(--koralle)); transform-origin: 0 50%; transform: scaleX(var(--fortschritt, 1)); transition: transform .35s var(--ease-out); }
.arche-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.arche-schritt { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; align-items: start; padding: .55rem .6rem; border-radius: 14px; transition: background-color .4s var(--ease-out); }
.schritt-nr {
  width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--tiefsee); color: #FFFFFF;
  font-family: var(--font-head); font-weight: 700; font-size: .9rem; transition: background-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.schritt-innen { display: grid; gap: .1rem; min-width: 0; }
.schritt-teil { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tuerkis-tief); }
.arche-schritt strong { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--fg); }
.schritt-text { font-size: .93rem; line-height: 1.45; color: var(--muted); }
.schritt-text a { color: var(--tuerkis-tief); font-weight: 600; white-space: nowrap; }
/* Mit Motorik: nur der aktuelle Punkt ist aufgeklappt, erledigte treten zurück */
.scrolly-arche.ist-aktiv .schritt-text { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.scrolly-arche.ist-aktiv .schritt-text-innen { min-height: 0; overflow: hidden; }
.scrolly-arche.ist-aktiv .arche-schritt { opacity: .55; }
.scrolly-arche.ist-aktiv .arche-schritt.ist-erledigt { opacity: .8; }
.scrolly-arche.ist-aktiv .arche-schritt.ist-jetzt { opacity: 1; background: rgb(0 155 170 / .1); }
.scrolly-arche.ist-aktiv .arche-schritt.ist-jetzt .schritt-text { grid-template-rows: 1fr; }
.scrolly-arche.ist-aktiv .arche-schritt.ist-jetzt .schritt-nr { background: var(--koralle); transform: scale(1.08); }
.scrolly-arche.ist-aktiv .arche-schritt.ist-erledigt .schritt-nr { background: var(--tuerkis); }
.scrolly-arche .scrolly-wert { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgb(10 46 54 / .1); }

/* Dunkelmodus: Nachthimmel, Tafel dunkel */
html.dark .scrolly-arche .akz-h1 { stop-color: #0B2530; }
html.dark .scrolly-arche .akz-h2 { stop-color: #164252; }
html.dark .scrolly-arche .akz-h3 { stop-color: #2A6474; }
html.dark .scrolly-arche .akz-w1 { stop-color: #2B6B78; }
html.dark .scrolly-arche .akz-w2 { stop-color: #164E5A; }
html.dark .scrolly-arche .akz-w3 { stop-color: #0A2E36; }
html.dark .scrolly-arche .akz-sonne { opacity: .35; }
html.dark .arche-panel-innen { background: rgb(12 38 46 / .82); border-color: rgb(255 255 255 / .12); }
html.dark .scrolly-arche .arche-fortschritt { background: rgb(255 255 255 / .12); }
html.dark .scrolly-arche .scrolly-wert { border-top-color: rgb(255 255 255 / .12); }

/* Tablet/Handy: Boot oben groß, Tafel als Karte unten über dem Wasser, nur der aktuelle Punkt */
@media (max-width: 1023px) {
  .scrolly-arche { --bw: min(94vw, 74svh); --wl: 44svh; --horizont: 38svh; }
  .arche-boot { left: 50%; margin-left: calc(var(--bw) / -2); }
  .ak-vorn { height: calc(var(--wl) + 2svh); }
  .arche-panel { left: 1rem; right: 1rem; top: auto; bottom: max(1rem, env(safe-area-inset-bottom)); width: auto; transform: none; }
  .arche-panel-innen { padding: 1.1rem 1.1rem .9rem; border-radius: 20px; }
  .arche-panel h2 { font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .arche-intro { display: none; }
  .scrolly-arche.ist-aktiv .arche-schritt:not(.ist-jetzt) { display: none; }
  .scrolly-arche.ist-aktiv .arche-schritt.ist-jetzt + .arche-schritt.ist-jetzt .schritt-text { grid-template-rows: 0fr; }   /* Deckshaus + Reling im selben Schritt: auf dem Handy nur ein Text offen */
  .scrolly-arche .scrolly-wert { font-size: 1.35rem; margin-top: .5rem; padding-top: .5rem; }
}
@media (max-width: 1023px) and (max-height: 700px) { .scrolly-arche .scrolly-wert { display: none; } }
@media (min-width: 1024px) and (max-height: 760px) {
  .arche-intro { display: none; }
  .scrolly-arche.ist-aktiv .arche-schritt:not(.ist-jetzt):not(:hover) strong { font-size: .95rem; }
}

/* ── Über Arche ─────────────────────────────────────────────────────────── */
.ueber-kopf { max-width: 52rem; margin-bottom: 2rem; }
.ueber-kopf h2 { margin: 0; }
.ueber-text { display: grid; gap: 0 3.5rem; }
@media (min-width: 900px) { .ueber-text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bild-team { aspect-ratio: 1188 / 569; margin: 2.5rem 0 0; }
.bild-team figcaption { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1; color: #FFFFFF; font-weight: 600; font-size: .95rem; text-shadow: 0 1px 12px rgb(0 0 0 / .45); }

/* ── Kernwerte mit Fotos ────────────────────────────────────────────────── */
.werte-foto { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .werte-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wert-karte { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.wert-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); }
.wert-bild img { width: 100%; height: 100%; object-fit: cover; }
.wert-text { padding: 1.4rem 1.5rem 1.6rem; display: grid; gap: .6rem; }
.wert-text h3 { margin: 0; }
.wert-text p { margin: 0; color: var(--muted); }

/* ── Erfolge ────────────────────────────────────────────────────────────── */
.bild-quadrat { aspect-ratio: 1 / 1; }
.erfolge-kopf h2 { margin: 0 0 .6rem; }
.erfolge-kopf .lead { margin: 0 0 1.6rem; }
.erfolge-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.erfolge-liste li { position: relative; padding-left: 3.4rem; }
.erfolge-liste li::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 2.4rem; height: 2.4rem; border-radius: 14px; background: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300707C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 1.3rem;
}
.erfolge-liste h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.erfolge-liste p { margin: 0; color: var(--muted); }

/* ── Ansprechpartner ────────────────────────────────────────────────────── */
.ansprech { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .ansprech { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ansprech-karte { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
@media (min-width: 600px) { .ansprech-karte { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ansprech-bild { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
@media (min-width: 600px) { .ansprech-bild { aspect-ratio: auto; min-height: 100%; } }
.ansprech-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ansprech-text { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; }
.ansprech-text h3 { margin: 0; }
.ansprech-rolle { margin: 0; color: var(--tuerkis-tief); font-weight: 600; }
.ansprech-text p { margin: 0; color: var(--muted); }
.ansprech-kontakt { margin-top: auto !important; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.ansprech-kontakt a { color: var(--tuerkis-tief); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ansprech-kontakt a:hover { color: var(--koralle-tief); }

/* ── Leitsatz ───────────────────────────────────────────────────────────── */
.leitsatz { margin: 0 auto; max-width: 56rem; text-align: center; display: grid; justify-items: center; gap: 1.6rem; }
.leitsatz-marke { width: 120px; height: auto; opacity: .95; }
.leitsatz blockquote { margin: 0; }
.leitsatz blockquote p { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 2.05rem); line-height: 1.3; color: #FFFFFF; text-wrap: balance; letter-spacing: -.01em; }
.leitsatz figcaption { margin: 0; }

/* ── Reduced Motion: dämpfen, nicht abschalten ──────────────────────────────
   Die Schleifen oben laufen über var(--tempo) (tokens.css: 2.5 bei reduzierter Bewegung) —
   langsamer, nicht aus. Zusätzlich kleinere Ausschläge: */
@media (prefers-reduced-motion: reduce) {
  @keyframes ak-wiegen { 0%, 100% { transform: rotate(-.45deg) translateY(0); } 50% { transform: rotate(.4deg) translateY(-2px); } }
  @keyframes akz-hub { from { transform: translateY(calc(var(--hub) * -.35)); } to { transform: translateY(calc(var(--hub) * .35)); } }
}