/* =========================================================
   style.css  ·  Das gesamte Aussehen des Dashboards
   ========================================================= */

/* --- Farben zentral festlegen ------------------------------
   ":root" ist die oberste Ebene der Seite. Was hier steht,
   gilt ueberall. Die Namen mit zwei Bindestrichen sind
   selbst gewaehlte Farbvariablen. Aendert man sie hier,
   aendert sich die Farbe an jeder Stelle der Seite. */
:root{
  --tiefsee:#0E3A53;    /* Dunkelblau fuer Text und Ueberschriften */
  --nordsee:#2A7F9E;    /* Mittelblau fuer Akzente */
  --schwimm:#3F9BB8;    /* Helles Blau fuer die Schwimmfenster */
  --sand:#FBF7F0;       /* Heller Sandton als Seitenhintergrund */
  --sandtief:#EFE5D6;   /* Etwas dunklerer Sandton fuer Trennlinien */
  --signal:#C4553B;     /* Rot fuer Warnungen und den roten Autozug */
  --weiss:#FFFFFF;      /* Kartenflaechen */
  --grau:#5C6B75;       /* Gedaempfter Text */
  --jetzt:#FFD166;      /* Gelb fuer die Jetzt-Marke */
}

/* --- Grundeinstellung fuer alle Elemente ------------------- */
*{
  box-sizing:border-box;  /* Innenabstand zaehlt zur Breite, verhindert Ueberlaeufe */
  margin:0;               /* Keine Standardabstaende des Browsers */
  padding:0;              /* Ebenso */
}

/* --- Die Seite selbst -------------------------------------- */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Nimmt die Systemschrift des Geraets. Nichts muss nachgeladen werden. */
  background:var(--sand);          /* Sandfarbener Hintergrund */
  color:var(--tiefsee);            /* Dunkelblaue Grundschrift */
  font-size:18px;                  /* Etwas groesser als ueblich, gut lesbar */
  line-height:1.5;                 /* Zeilenabstand */
  padding:16px;                    /* Luft zum Bildschirmrand */
  -webkit-text-size-adjust:100%;   /* iPhone soll die Schrift nicht eigenmaechtig skalieren */
}

.huelle{
  max-width:900px;   /* Auf grossen Bildschirmen nicht unendlich breit werden */
  margin:0 auto;     /* Mittig ausrichten */
}

/* --- Kopfbereich ------------------------------------------- */
header{ padding:8px 4px 20px; }
header h1{ font-size:1.6rem; letter-spacing:-.01em; }
header p{
  display:flex; align-items:center; gap:8px;
  color:var(--grau); font-size:.95rem; margin-top:2px;
}

/* Der Aktualisieren-Knopf neben dem Stand-Text. Fuer alle, die
   lieber selbst nachschauen als auf den Zehn-Minuten-Takt zu warten. */
#aktualisieren-knopf{
  font:inherit;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  border:1px solid var(--sandtief);
  background:var(--weiss);
  color:var(--nordsee);
  border-radius:999px;
  width:32px; height:32px;
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
#aktualisieren-knopf:disabled{ opacity:.5; cursor:default; }

/* --- Das Karten-Raster ------------------------------------- */
.raster{
  display:grid;               /* Rasterlayout einschalten */
  gap:16px;                   /* Abstand zwischen den Karten */
  grid-template-columns:1fr;  /* Standard: eine Spalte (Handy) */
}

/* Ab 700 Pixel Breite zwei Spalten. Das ist der einzige Umbruchpunkt. */
@media(min-width:700px){
  .raster{ grid-template-columns:1fr 1fr; }
  .breit{ grid-column:1/-1; }   /* Karten mit dieser Klasse gehen ueber beide Spalten */
}

/* --- Eine einzelne Karte ----------------------------------- */
.karte{
  background:var(--weiss);
  border-radius:18px;   /* Abgerundete Ecken */
  padding:20px;         /* Innenabstand */
  box-shadow:0 1px 3px rgba(14,58,83,.10),0 8px 24px rgba(14,58,83,.06);
  /* Zwei sehr weiche Schatten. Das laesst die Karte schweben, ohne hart zu wirken. */
}

.karte h2{
  /* Frueher in Versalien mit Sperrung, das ist fuer aeltere Augen
     schwerer zu erfassen, weil die Wortumrisse verschwinden.
     Normale Gross- und Kleinschreibung, dafuer 1rem statt .8rem. */
  font-size:1rem;
  color:var(--nordsee);
  margin-bottom:14px;
  font-weight:700;
}

/* --- Wiederkehrende Textgroessen --------------------------- */
.gross{
  font-size:2.7rem;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;  /* Alle Ziffern gleich breit, nichts springt */
}
.mittel{ font-size:1.3rem; font-weight:600; font-variant-numeric:tabular-nums; }
.klein{ color:var(--grau); font-size:.9rem; }

/* --- Symbol neben der grossen Zahl -------------------------
   Damit sich Wetter und Wasser auf den ersten Blick
   unterscheiden, statt nur zwei gleich aussehende Zahlen zu zeigen. */
.kopfwert{ display:flex; align-items:center; gap:14px; }

/* Alle Symbole sind Linienzeichnungen ohne Fuellung. */
.symbol svg, .ausblick .sym svg{
  fill:none;
  stroke:var(--nordsee);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.symbol svg{ width:56px; height:56px; display:block; }

/* Sonnenteile warm einfaerben, das trennt Wetter optisch vom Wasser. */
.symbol svg .warm, .ausblick .sym svg .warm{ stroke:#E8A33D; }

/* Das Wellensymbol der Wasserkarte in einem kuehleren Blau. */
.symbol.kuehl svg{ stroke:var(--schwimm); }

/* Eine Zeile mit Beschriftung links und Wert rechts */
.zeile{
  display:flex;
  justify-content:space-between;      /* Links und rechts auseinanderziehen */
  align-items:baseline;               /* An der Schriftgrundlinie ausrichten */
  padding:11px 0;
  border-bottom:1px solid var(--sandtief);
}
.zeile:last-child{ border-bottom:0; }  /* Die letzte Zeile ohne Trennlinie */

/* Mehrere Werte nebeneinander, zum Beispiel die Gezeiten von heute.
   Auf schmalen Bildschirmen zwei feste Spalten, damit nicht drei
   Werte in einer Reihe stehen und der vierte allein darunter. */
.paar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 26px;
  margin-top:14px;
}
@media(min-width:520px){
  .paar{ grid-template-columns:repeat(4,auto); justify-content:start; }
}
.paar div span{ display:block; }

/* Kleine runde Etiketten */
.pill{
  display:inline-block;
  border-radius:999px;   /* Sehr grosser Radius ergibt eine Kapselform */
  padding:3px 11px;
  font-size:.9rem;       /* Untergrenze fuer aeltere Augen, war .78rem */
  font-weight:700;
  background:var(--sandtief);
  color:var(--tiefsee);
}
.pill.blau{ background:#DDEAF2; color:#17567A; }
.pill.rot{ background:#F7E2DC; color:var(--signal); }

/* =========================================================
   SCHWIMMKARTE
   ========================================================= */
.schwimmkarte{ background:linear-gradient(160deg,#0E3A53,#17557A); }
/* Farbverlauf statt einer flachen Farbe, das hebt die Karte deutlicher ab. */

.schwimmkarte h2{ color:#9FD0E2; }
.schwimmkarte, .schwimmkarte .gross{ color:#fff; }
.schwimmkarte .klein{ color:#B9D3E0; }

/* Das 24-Stunden-Band */
.band{
  position:relative;              /* Bezugsrahmen fuer die Bloecke darin */
  height:44px;
  background:rgba(255,255,255,.13);
  border-radius:12px;
  margin:18px 0 6px;
}
.band .fenster{
  position:absolute;              /* Wird per Prozentwert platziert */
  top:0; bottom:0;
  background:var(--schwimm);
  border-radius:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;
}
.band .fenster span{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);  /* Exakt mittig im Block */
  font-size:.72rem;
  font-weight:700;
  color:#06283A;
  white-space:nowrap;              /* Uhrzeit nicht umbrechen */
  display:none;                    /* Auf schmalen Bildschirmen zu eng, siehe unten */
}
/* Erst ab Tabletbreite ist im Block genug Platz fuer die Uhrzeit.
   Auf dem Handy stehen die Zeiten stattdessen in der Liste darunter. */
@media(min-width:700px){
  .band .fenster span{ display:block; }
}
.band .jetzt{
  position:absolute;
  top:-4px; bottom:-4px;           /* Ragt oben und unten leicht heraus */
  width:3px;
  background:var(--jetzt);
  border-radius:2px;
  box-shadow:0 0 8px rgba(255,209,102,.8);   /* Leichtes Leuchten */
}
/* Fruehere Flex-Loesung mit space-between verteilte die ABSTAENDE
   zwischen den Beschriftungen gleichmaessig, nicht die Beschriftungen
   selbst auf 0/25/50/75/100 Prozent. Dadurch klebte "0" mit der linken
   Kante am Rand statt mit der Mitte, und "24 Uhr" war breiter als die
   anderen und schob alles nach links. Jetzt liegt jede Beschriftung
   exakt ueber der Position, die sie beschriftet, so wie die gelbe
   Jetzt-Marke im Band darueber. */
.achse{
  position:relative;
  height:1.2em;
  font-size:.9rem;          /* Untergrenze fuer aeltere Augen, war .72rem */
  color:#B9D3E0;            /* Kontrast zu #17557A jetzt 5,15:1, war 3,95:1 */
  font-variant-numeric:tabular-nums;
}
.achse span{ position:absolute; transform:translateX(-50%); }
.achse span:nth-child(1){ left:0; transform:none; }
.achse span:nth-child(2){ left:25%; }
.achse span:nth-child(3){ left:50%; }
.achse span:nth-child(4){ left:75%; }
.achse span:nth-child(5){ right:0; left:auto; transform:none; }

/* Die schmalen Baender der Folgetage */
.minibaender{ margin-top:14px; }
.mini{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.mini .name{ font-size:.8rem; color:#B9D3E0; width:52px; flex:none; font-weight:600; }
.mini .spur{
  position:relative; height:12px; flex:1;
  background:rgba(255,255,255,.13); border-radius:6px;
}
.mini .spur i{ position:absolute; top:0; bottom:0; background:var(--schwimm); border-radius:6px; }

/* Die Textliste der Folgetage */
.fensterliste{
  margin-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  padding-top:14px;
}
.fzeile{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.10);
  gap:12px;
}
.fzeile:last-child{ border-bottom:0; }
.fzeile .tag{ font-size:.9rem; color:#B9D3E0; font-weight:600; }
.fzeile .zeiten{ font-variant-numeric:tabular-nums; font-weight:600; font-size:1rem; color:#fff; text-align:right; }

.fussnote{
  font-size:.9rem;          /* Untergrenze fuer aeltere Augen, war .8rem */
  color:#B9D3E0;            /* Kontrast jetzt 5,15:1, war 3,95:1. Steht hier
                                der Sicherheitshinweis, der soll lesbar sein. */
  margin-top:14px;
  line-height:1.45;
}

/* =========================================================
   GEZEITEN, WETTER, WASSER
   ========================================================= */
.balken{ height:8px; border-radius:99px; background:var(--sandtief); margin-top:16px; overflow:hidden; }
.balken i{ display:block; height:100%; width:0; background:var(--nordsee); transition:width .4s; }
/* transition sorgt dafuer, dass der Balken sanft waechst statt zu springen. */

.ausblick{
  display:grid;
  grid-template-columns:repeat(3,1fr);   /* Genau drei gleich breite Spalten */
  gap:10px;
  margin-top:18px;
  border-top:1px solid var(--sandtief);
  padding-top:16px;
  text-align:center;
}
.ausblick div span{ display:block; }
.ausblick .tag{ font-size:.85rem; color:var(--grau); font-weight:600; }
.ausblick .sym svg{ width:30px; height:30px; margin:4px auto 0; display:block; }
.ausblick .temp{ font-size:1.2rem; font-weight:700; font-variant-numeric:tabular-nums; margin-top:4px; }
.ausblick .zusatz{ font-size:.9rem; color:var(--grau); }   /* war .8rem */

.folgetag{ padding:12px 0; border-top:1px solid var(--sandtief); }
.folgetag .tagname{ font-weight:700; font-size:.95rem; margin-bottom:6px; }
.gzliste{ display:flex; gap:8px; flex-wrap:wrap; }
.gz{ font-variant-numeric:tabular-nums; font-size:.95rem; background:var(--sand); border-radius:10px; padding:5px 10px; }
.gz b{ color:var(--nordsee); font-size:.75rem; letter-spacing:.05em; }

/* =========================================================
   AUTOZUG
   ========================================================= */
.reiter{ display:flex; gap:8px; margin:4px 0 16px; flex-wrap:wrap; }
.reiter button{
  font:inherit;                 /* Gleiche Schrift wie der Rest, nicht die Browser-Standardschrift */
  font-size:.9rem; font-weight:600;
  cursor:pointer;
  border:1px solid var(--sandtief);
  background:var(--weiss);
  color:var(--grau);
  border-radius:999px;
  padding:8px 15px;
  min-height:40px;              /* Gross genug fuer Finger auf dem Touchscreen */
}
.reiter button[aria-pressed="true"]{
  background:var(--tiefsee); border-color:var(--tiefsee); color:#fff;
}

/* Die beiden Fahrtrichtungen nebeneinander.
   Erst ab 560 Pixel Breite, darunter waeren die Zeitkacheln zu schmal. */
.richtungen{ display:grid; gap:18px 20px; grid-template-columns:1fr; }
@media(min-width:560px){
  .richtungen{ grid-template-columns:1fr 1fr; }
}
.richtung .klein{ margin-bottom:6px; }

.fahrplan{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(76px,1fr));
  /* auto-fill legt so viele 84-Pixel-Spalten an, wie hineinpassen.
     Dadurch passt sich das Raster jeder Bildschirmbreite selbst an. */
  gap:8px;
  margin-top:6px;
}
.abf{
  border-radius:10px; padding:8px 6px; text-align:center;
  font-variant-numeric:tabular-nums; font-weight:600; font-size:1rem;
}
.abf.rot{ background:#F9EAE5; color:#8C3A24; }
.abf.blau{ background:#E4EFF6; color:#17567A; }
.abf.weg{ opacity:.5; }   /* Vergangene/nicht mehr erreichbare Abfahrten blass darstellen, war .35 */
.abf.naechste{ box-shadow:0 0 0 2px var(--tiefsee); }  /* Die naechste Abfahrt umranden */

/* Kuerzel unter der Uhrzeit, DB oder AZ. Die Kachelfarbe allein war
   die einzige Unterscheidung zwischen den beiden Betreibern, dabei
   entscheidet sie, welches Ticket gilt. In Graustufen, bei
   Sonnenblendung oder gedimmtem Display bleibt so trotzdem lesbar,
   welcher Zug gemeint ist. */
.abf .kuerzel{ display:block; font-size:.7rem; font-weight:600; opacity:.75; margin-top:2px; }

.legende{ display:flex; gap:14px; margin:14px 0 10px; font-size:.9rem; color:var(--grau); flex-wrap:wrap; }  /* war .85rem */

.knopf{
  font:inherit; font-size:.9rem; font-weight:600; margin-top:16px; cursor:pointer;
  border:1px solid var(--sandtief); background:var(--sand); color:var(--tiefsee);
  border-radius:999px; padding:10px 18px; min-height:44px;
}

/* =========================================================
   SONSTIGES
   ========================================================= */
.fehler{
  background:#FBEAE6; border:1px solid #E8C4B8; color:#8C3A24;
  border-radius:12px; padding:12px 14px; font-size:.88rem; margin-top:10px;
}
/* Rote Box, falls eine Datenquelle nicht antwortet. */

.schwimmkarte .fehler{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#FFD9CF; }

footer{ text-align:center; color:var(--grau); font-size:.82rem; padding:26px 0 6px; }
footer a, .karte a{ color:var(--nordsee); }

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine Animation. */
@media(prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}