/* TRIOBILD Cam – der eigene Look (02.10.2026).
 *
 * Liegt HINTER stil.css und überschreibt nur Farbwerte und ein paar
 * Grundregeln. Alles, was die Seiten an Aufbau haben, bleibt von TB Web;
 * so trägt jede Verbesserung dort auch hier.
 *
 * Vorgabe des Betreibers: frische Farben, anderer Look, „luftig leicht und
 * leicht zu bedienen", Rückmeldung beim Klicken, Bilder blenden ein statt
 * hart zu laden.
 *
 * Grundton Himmel (Blau mit einem Hauch Grün) – eine Webcam zeigt den
 * Himmel über einer Stadt, nicht eine Baugrube. Hell ist die Vorgabe, dunkel
 * ein tiefes Nachtblau statt Schwarz. */

:root {
  /* Das Marken-Gelb bleibt als Variable, weil Hunderte Regeln darauf
   * zeigen – es bekommt hier aber die Himmelfarbe. */
  --gelb: #1e9bd7;
  --gelb-marke: #2aa9e6;
  --auf-gelb: #ffffff;
  --gelb-schrift: #8fd3f7;
  --kreisfarbe: #2aa9e6;
  --orange: #f08a4b;
  --wind: #f3a4c9;

  --tinte: #0a1a2a;
  --grund: #203145;
  --grund-tief: #16243a;
  --karte: #2a3d55;
  --karte-hell: #334a65;
  --linie: #3d526c;
  --linie-leise: #32465f;
  --schrift: #e8eef5;
  --schrift-leise: #a5b8cb;
  --gut: #4fd1a1;
  --schlecht: #ff7a6e;
  --achtung: #ffc152;

  --schatten: 0 10px 30px rgba(0, 0, 0, .35);
  --schatten-klein: 0 2px 6px rgba(0, 0, 0, .2);
  --schatten-schwebend: 0 30px 70px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .35);
  --seitengrund: radial-gradient(110% 50% at 50% -10%, #2d4461 0%, var(--grund) 60%) fixed;
  --kartengrund: linear-gradient(180deg, var(--karte-hell), var(--karte) 60%);
  --knopfgrund: linear-gradient(180deg, #37b4ee, #1e9bd7);

  --textschrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titelschrift: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --rund: 14px;
  --rund-gross: 24px;
  --breite: 1480px;

  /* Eigene Werte nur für dieses Blatt. */
  --cam-dauer: .32s;
  --cam-kurve: cubic-bezier(.2, .8, .2, 1);
}

:root[data-thema="hell"] {
  /* Pastellblau, ziemlich hell (Wunsch 02.10.2026). Der Akzent bleibt
   * kräftig genug für Schrift auf Weiß; Knöpfe tragen dunkle Schrift auf
   * hellem Blau, das liest sich besser als Weiß auf Pastell. */
  --gelb: #79bde8;
  --gelb-marke: #3f9fdc;
  --auf-gelb: #10283d;
  --gelb-schrift: #1f7fc0;
  --kreisfarbe: #3f9fdc;
  --wind: #c25b8c;

  --tinte: #10283d;
  --grund: #eef6fc;
  --grund-tief: #dbe9f5;      /* Bildflächen bleiben hell, kein Schwarz */
  --karte: #ffffff;
  --karte-hell: #ffffff;
  --linie: #d9e8f4;
  --linie-leise: #e8f1f9;
  --schrift: #1b3448;
  --schrift-leise: #6f8aa1;
  --gut: #2aa37a;
  --schlecht: #d9483b;
  --achtung: #c08414;

  --schatten: 0 18px 44px rgba(63, 120, 170, .12), 0 2px 8px rgba(63, 120, 170, .06);
  --schatten-klein: 0 1px 2px rgba(63, 120, 170, .06), 0 10px 28px rgba(63, 120, 170, .07);
  --schatten-schwebend: 0 30px 60px rgba(63, 120, 170, .20), 0 6px 16px rgba(63, 120, 170, .10);
  --seitengrund: linear-gradient(180deg, #f6fafd 0%, #e6f1fa 100%) fixed;
  --kartengrund: #ffffff;
  --knopfgrund: linear-gradient(180deg, #a9d8f5, #7cc0ea);
}

/* Die Wortmarke in der Himmelfarbe statt Gelb. */
.logo path, .marken-logo path { fill: var(--gelb-marke); }
.marke em { color: var(--gelb-marke); }

/* ------------------------------------------------------------ Luftig */

body { font-size: 15.5px; line-height: 1.65; }
main { padding: 2.6rem 2rem 6rem; }
h1 { font-size: 1.8rem; font-weight: 600; letter-spacing: -.02em; }
h2 { font-weight: 600; }

.kopf {
  background: color-mix(in srgb, var(--grund) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--linie) 60%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
}
:root[data-thema="hell"] .kopf {
  background: color-mix(in srgb, #ffffff 70%, transparent);
}

.karte, .ortkachel {
  border-color: var(--linie-leise);
  box-shadow: var(--schatten-klein);
}
.karte { padding: 1.9rem 2rem 2rem; }

/* Knöpfe: rund, ruhig, mit spürbarem Druck. */
.knopf, button {
  border-radius: 999px;
  transition: transform var(--cam-dauer) var(--cam-kurve),
              box-shadow var(--cam-dauer) var(--cam-kurve),
              background-color var(--cam-dauer) var(--cam-kurve),
              border-color var(--cam-dauer) var(--cam-kurve),
              opacity var(--cam-dauer) var(--cam-kurve);
}
.knopf:hover, button:hover { transform: translateY(-1px); }
.knopf:active, button:active,
.knopf.gedrueckt, button.gedrueckt { transform: translateY(0) scale(.96); }

/* Modul-Reiter: der aktive Punkt bekommt eine weiche Pille statt eines
 * Strichs. */
.module a {
  border-radius: 999px;
  padding-inline: .9rem;
  transition: background-color var(--cam-dauer) var(--cam-kurve),
              color var(--cam-dauer) var(--cam-kurve);
}
.module a:hover { background: color-mix(in srgb, var(--gelb) 10%, transparent); }
.module a.hier {
  background: color-mix(in srgb, var(--gelb) 16%, transparent);
  color: var(--gelb-schrift);
}
.module a.hier::after { display: none; }

/* Kacheln heben sich beim Zeigen leicht an. */
.ortkachel, .karte, .kachel {
  transition: transform var(--cam-dauer) var(--cam-kurve),
              box-shadow var(--cam-dauer) var(--cam-kurve),
              border-color var(--cam-dauer) var(--cam-kurve);
}
.ortkachel:hover, a.kachel:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}

/* Eingabefelder: weich, mit Lichtkranz beim Fokus. */
input, select, textarea {
  border-radius: var(--rund);
  transition: border-color var(--cam-dauer) var(--cam-kurve),
              box-shadow var(--cam-dauer) var(--cam-kurve);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gelb);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gelb) 22%, transparent);
  outline: none;
}

/* ---------------------------------------------------- Bilder einblenden */

/* Jedes Bild beginnt unsichtbar und ein wenig kleiner; sobald es geladen
 * ist, setzt cam.js `data-geladen` – dann gleitet es herein. Bilder, die
 * vor dem Skript fertig waren, bekommen das Merkmal sofort; ohne Skript
 * (Fehler, alter Browser) sorgt die Animation unten dafür, dass trotzdem
 * nichts unsichtbar bleibt. */
img:not([data-geladen]) {
  opacity: 0;
  transform: scale(1.015);
  animation: cam-notbremse 0s 1.5s forwards;
}
img[data-geladen] {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--cam-kurve), transform .9s var(--cam-kurve);
}
@keyframes cam-notbremse { to { opacity: 1; transform: none; } }

/* Die Bildflächen (Kamerabild, Archiv, Vorschau) werden in der Zeit, in
 * der das Bild noch kommt, nicht schwarz, sondern schimmern leise. */
.bild, .bildflaeche, .livebild, .kamerabild {
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--karte-hell) 70%, transparent) 20%,
      color-mix(in srgb, var(--karte-hell) 100%, transparent) 50%,
      color-mix(in srgb, var(--karte-hell) 70%, transparent) 80%)
      var(--grund-tief);
  background-size: 200% 100%;
  animation: cam-schimmer 2.2s linear infinite;
}
@keyframes cam-schimmer { to { background-position: -200% 0; } }

/* Zeitleiste der Wiedergabe: Aufnahmen in der Himmelfarbe statt Gelb. */
.zeitleiste .abschnitt { background: color-mix(in srgb, var(--gelb) 55%, transparent); }

/* ----------------------------------------------------- Seitenwechsel */

/* Der Inhalt kommt beim Öffnen sanft von unten; die Kopfzeile steht. */
main { animation: cam-herein .5s var(--cam-kurve) both; }
@keyframes cam-herein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Klick-Welle: ein kurzer Lichtkreis, der vom Berührungspunkt ausgeht.
 * Setzt cam.js auf Knöpfe und Reiter. */
.cam-welle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, currentColor 28%, transparent);
  transform: scale(0);
  animation: cam-welle .55s var(--cam-kurve) forwards;
}
@keyframes cam-welle { to { transform: scale(2.6); opacity: 0; } }
.cam-wellenrand { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  img:not([data-geladen]) { opacity: 1; transform: none; }
}