/* Farben aus den Fotos: Himmel, Main, Ufergrün, Sandsteinrot der Brücken */
:root {
  --himmel: #8ec5f0;
  --himmel-hell: #0d1a2b;   /* Seitenhintergrund (dunkel) */
  --main: #1d3557;
  --main-tief: #0f2238;
  --wasser: #3a6ea5;
  --gruen: #5a8a3c;
  --sandstein: #b5533c;
  --text: #e6edf5;
  --text-hell: #f4f7fb;
  --karte: #16263b;
  --schatten: 0 10px 30px rgba(0, 0, 0, .4);
}
/* immer die dunkle Fassung, auf allen Geräten gleich (siehe color-scheme im HTML) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text); background: var(--himmel-hell); line-height: 1.6; }
h1, h2, h3 { line-height: 1.15; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .4em; color: var(--himmel); }
a { color: inherit; }

/* ---- Kopf: Skyline mit Tiefenwirkung ---- */
.kopf { position: relative; z-index: 1; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; color: var(--text-hell); }
.kopf-bild { position: absolute; inset: -8% 0 0 0; background: url("bilder/header-frankfurt.webp") center 35% / cover no-repeat; will-change: transform; transform: translateY(var(--parallax, 0)); }
.kopf-schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,34,56,.05) 30%, rgba(15,34,56,.55) 70%, rgba(15,34,56,.92) 100%); }
.kopf-inhalt { position: relative; display: flex; gap: clamp(1rem, 4vw, 2.5rem); align-items: center; padding: 0 clamp(1rem, 6vw, 5rem) 6rem; flex-wrap: wrap; }
.portraet { width: clamp(130px, 22vw, 230px); height: clamp(130px, 22vw, 230px); object-fit: cover; border-radius: 50%; border: 5px solid rgba(255,255,255,.85); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.verfuegbar { display: inline-block; margin: 0 0 .9rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--main); font-size: .95rem; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.kopf h1 { margin: .1em 0 0; font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 800; letter-spacing: -.02em; text-shadow: 0 4px 24px rgba(0,0,0,.35); }
.unterzeile { margin: 0; font-size: clamp(.95rem, 2.2vw + .3rem, 1.3rem); }   /* direkt unter dem Namen */
.unterzeile strong { color: #ffd27a; white-space: nowrap; }   /* Künstliche Intelligenz hervorgehoben, nie getrennt */
/* Kurzblock im Kopf: eigene Zeile unter Porträt und Name, zentriert */
.kopf-inhalt > .kurzblock { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem clamp(1rem, 3vw, 2rem); max-width: 56rem; margin: .4rem auto 0; text-align: center; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(10,20,35,.45); border: 1px solid rgba(255,255,255,.15); font-size: .95rem; line-height: 1.5; }
.kurzblock p { margin: 0; }
/* breite Bildschirme (Porträt neben dem Namen): Kasten beginnt bündig mit dem „A“ von Anna statt mittig */
@media (min-width: 761px) {
  .kopf { min-height: 100vh; }   /* Desktop: Kopf füllt den ganzen Bildschirm, mehr Skyline sichtbar */
  /* Raster (Nutzerin 2026-10-21): links das Porträt, rechts Verfügbarkeit, Name, Unterzeile und Kurzblock in eigenen
     Zeilen. Das Porträt steht mittig neben dem Namen und ragt nach oben und unten hinaus, ohne Platz zu belegen
     (negativer Rand = halbe Bildhöhe) – so bleibt keine Lücke zwischen Unterzeile und Kurzblock. */
  .kopf-inhalt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1rem, 4vw, 2.5rem); row-gap: 0; align-items: center; }
  .kopf-text { display: contents; }
  .kopf-inhalt > .portraet { grid-column: 1; grid-row: 2; margin-block: calc(clamp(130px, 22vw, 230px) / -2); }
  .kopf-text > .verfuegbar { grid-column: 2; grid-row: 1; justify-self: start; }
  .kopf-text > h1 { grid-column: 2; grid-row: 2; }
  .kopf-text > .unterzeile { grid-column: 2; grid-row: 3; }
  .kopf-inhalt > .kurzblock { grid-column: 2; grid-row: 4; max-width: 56rem; margin: 1.2rem 0 0; text-align: left; }
}
.kopf-inhalt > div { flex: 1 1 18rem; min-width: 0; }   /* Textspalte darf schrumpfen, sonst wird der Kurzblock breiter als der Bildschirm */
.kurz-titel { margin: 0 0 .25rem; color: #ffd27a; font-size: .8rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.weiter { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); text-decoration: none; font-size: .95rem; opacity: .9; display: inline-flex; white-space: nowrap; align-items: center; gap: .3em; min-height: 44px; padding: 0 1rem; animation: wippen 2.4s ease-in-out infinite; }
@keyframes wippen { 50% { transform: translate(-50%, 6px); } }

/* ---- Weg am Fluss ---- */
main section { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 6vw, 5rem); }
/* Überschrift nur für Screenreader und Suchmaschinen; die Flusslinie beginnt bündig unter dem Kopfbild */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.weg { padding-top: 0 !important; }
.fluss { position: relative; max-width: 1100px; margin: 0 auto; padding: clamp(3rem, 8vw, 5rem) 0 2rem; }
.fluss-linie { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fluss-linie path { fill: none; stroke: var(--wasser); stroke-width: 14; stroke-linecap: round; opacity: .85; filter: drop-shadow(0 4px 6px rgba(29,53,87,.25)); }
.kind-name { font-size: 1.35em; }
.portraet-kind { width: clamp(100px, 16vw, 180px); height: clamp(100px, 16vw, 180px); flex: none; }   /* Kinderfoto am Anfang des Weges, Gegenstück zum Porträt im Kopf */
/* Quelle ganz oben: See bei Stotel über die volle Seitenbreite, dort entspringt die Flusslinie */
.weg { overflow-x: clip; padding-bottom: 0 !important; }
.quelle { position: relative; width: 100vw; margin: calc(-1 * clamp(3rem, 8vw, 5rem)) 0 3.5rem calc(50% - 50vw); }   /* oben bündig mit dem Anfang von .fluss */
.quelle > img { display: block; width: 100%; height: clamp(220px, 26vw, 340px); object-fit: cover; }
.quelle figcaption { position: absolute; inset: 0; display: flex; flex-direction: row-reverse; text-align: right; align-items: center; gap: clamp(.8rem, 3vw, 1.8rem); padding: 1rem clamp(1rem, 6vw, 5rem); color: #fff; background: linear-gradient(180deg, rgba(15,34,56,.92), rgba(15,34,56,0) 20%), linear-gradient(90deg, rgba(10,20,35,.1) 20%, rgba(10,20,35,.75)); font-size: 1.1rem; }   /* über das ganze Bild, Foto rechts senkrecht mittig; oben 20 % Übergang wie am Kopfbild */
.station { position: relative; width: min(44%, 30rem); margin: 0 0 3.5rem; padding: 1.3rem 1.5rem; background: var(--karte); border-radius: 18px; box-shadow: var(--schatten); transition: opacity .7s ease, transform .7s ease; }
.mit-js .station:not(.sichtbar) { opacity: 0; transform: translateY(30px); }   /* nur mit Skript ausblenden, sonst bleibt der Lebensweg sichtbar */
.station:nth-of-type(odd) { margin-right: auto; }
.station:nth-of-type(even) { margin-left: auto; }
.station.sichtbar { opacity: 1; transform: none; }
.station time { font-weight: 700; color: var(--sandstein); font-size: .9rem; letter-spacing: .05em; }
.station h3 { margin: .2em 0 .4em; font-size: 1.3rem; }
.station p { margin: 0; }
.station p + p { margin-top: .6rem; }
.station .station-hinweis { margin-top: .6rem; font-size: .9rem; font-style: italic; opacity: .8; }
.station::before { content: ""; position: absolute; top: 1.6rem; width: 18px; height: 18px; border-radius: 50%; background: var(--sandstein); border: 4px solid var(--karte); box-shadow: 0 0 0 3px var(--sandstein); }
.station:nth-of-type(odd)::before { right: -2.1rem; }
.station:nth-of-type(even)::before { left: -2.1rem; }
.station-ziel { background: linear-gradient(135deg, var(--main), #2b4c7e); color: var(--text-hell); }
.station-ziel time { color: #ffd27a; }
.station-ziel::before { background: #ffd27a; box-shadow: 0 0 0 3px #ffd27a, 0 0 28px 8px rgba(255,210,122,.7); animation: leuchten 2.2s ease-in-out infinite; }
@keyframes leuchten { 50% { box-shadow: 0 0 0 3px #ffd27a, 0 0 40px 14px rgba(255,210,122,.4); } }

/* ---- Projekte: Karten unter dem Fluss, „Diese Website“ mit Server-Status ---- */
.projekte { background: linear-gradient(180deg, var(--himmel-hell), var(--main) 3rem); color: var(--text-hell); }   /* Blau der Werkzeugkiste, oben sanfter Übergang vom Fluss */
.projekte > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.projekte h2 { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; color: #e3896d; font-size: clamp(.95rem, 2vw, 1.05rem); font-weight: 700; letter-spacing: .3em; text-transform: uppercase; }   /* wie ein Kapitel-Trenner; Sandstein der Stationen, aufgehellt für Lesbarkeit auf Dunkelblau */
.projekte h2::before, .projekte h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(227,137,109,.6)); }
.projekte h2::after { background: linear-gradient(90deg, rgba(227,137,109,.6), transparent); }
main section.projekte { padding-top: clamp(3.2rem, 5vw, 3.8rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }   /* weniger Abstand oben und zur Werkzeugkiste */
main section.weg { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.fluss > .station:last-child { margin-bottom: 0; }   /* letzte Station: kein Leerraum vor den Projekten */
.projekt { color: var(--text); }
.projekt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.projekt { display: flex; flex-direction: column; gap: .7rem; background: var(--karte); border-radius: 18px; border-top: 5px solid var(--sandstein); box-shadow: var(--schatten); padding: 1.3rem 1.5rem; }
.projekt h3 { margin: 0; font-size: 1.3rem; }
.projekt p { margin: 0; }
.projekt-art { color: var(--wasser); font-weight: 600; font-size: .95rem; }
.schlagworte { display: flex; flex-wrap: wrap; gap: .4rem; margin: auto 0 0; padding: 0; list-style: none; }
.schlagworte li { padding: .2rem .65rem; border-radius: 999px; background: var(--himmel-hell); border: 1px solid rgba(58,110,165,.3); font-size: .9rem; }
/* ---- Server-Status ---- */
.status { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.lampe { width: 14px; height: 14px; border-radius: 50%; background: #aaa; }
.lampe.an { background: #3cc46b; box-shadow: 0 0 12px #3cc46b; animation: blinken 2s ease-in-out infinite; }
.lampe.aus { background: #d9534f; }
@keyframes blinken { 50% { opacity: .55; } }

/* ---- Kontakt oben rechts im Kopfbild ---- */
.kontakt-oben { position: absolute; top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 3vw, 2rem); z-index: 2; display: flex; gap: .6rem; }
.kontakt-oben .knopf { padding: .65rem 1.2rem; min-height: 44px; box-sizing: border-box; background: rgba(255,255,255,.85); color: var(--main); box-shadow: 0 6px 18px rgba(0,0,0,.3); }   /* gleiches Weiß wie der Rahmen ums Porträt */
.knopf { display: inline-block; padding: .9rem 1.6rem; border-radius: 999px; background: #0a66c2; color: #fff; text-decoration: none; font-weight: 600; box-shadow: var(--schatten); transition: transform .2s ease; }
.knopf:hover { transform: translateY(-3px); }
footer { text-align: center; padding: .1rem .5rem; font-size: .9rem; white-space: nowrap; background: var(--main-tief); color: #b9c6d6; }
footer a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 .4rem; }

@media (max-width: 1200px) { .kopf-bild { background-image: url("bilder/header-frankfurt-1200.webp"); } }
@media (max-width: 800px) { .kopf-bild { background-image: url("bilder/header-frankfurt-800.webp"); } }

/* ---- Schmale Bildschirme: Fluss links, Stationen rechts daneben ---- */
@media (max-width: 760px) {
  .verfuegbar { border-radius: 14px; } .verfuegbar strong { display: block; } .verfuegbar .trenner { display: none; }
  .quelle > img { height: clamp(240px, 62vw, 280px); }   /* schmal: Mindesthöhe, damit Kinderfoto und Text daraufpassen */
  .quelle figcaption { padding: .8rem 1rem; font-size: 1rem; background: linear-gradient(180deg, rgba(15,34,56,.92), rgba(15,34,56,0) 20%), linear-gradient(90deg, rgba(10,20,35,.55), rgba(10,20,35,.8)); }   /* Text bleibt auf dem See, schmal etwas dunkler zum Lesen */
  .station, .station:nth-of-type(odd), .station:nth-of-type(even) { width: auto; margin: 0 0 2.5rem 2.6rem; }
  .station:nth-of-type(odd)::before, .station:nth-of-type(even)::before { left: -2.2rem; right: auto; }
  .kopf-inhalt { padding-bottom: 5rem; padding-top: 4.5rem; }   /* oben Platz für die Kontakt-Knöpfe, wenn der Kopf durch den Kurzblock höher wird */
  .kurzblock { grid-template-columns: 1fr; }
  .station { padding: 1.1rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .station { opacity: 1; transform: none; transition: none; }
  .weiter, .lampe.an, .station-ziel::before { animation: none; }
}