/* Developed by Enjyn Gruppe — https://enjyn.de */
@import url('https://fonts.eg-core.de/css2?family=Fredoka:wght@500;600;700&family=Figtree:wght@400;500;600;700;800&display=swap');

:root {
  --text: #1b1c3a;
  --text-2: #555a7d;
  --linie: #1b1c3a;
  --grund: #eef2fb;
  --karte: #ffffff;
  --flaeche: #f2f4fb;
  --leer: #dce1ef;
  --himmel-1: #8fb4ff;
  --himmel-2: #d3e3ff;
  --wiese-1: #8edb8c;
  --wiese-2: #6cc673;
  --land-berg: #b9d7ef; --land-boden-fern: #cdeab0; --land-boden-nah: #8fd68a; --land-huegel: #a6dd95; --land-huegel-schatten: #8cc97e;
  --land-feld: #f6d77a; --land-feld-streifen: #e3b94e; --land-weg: #ead9b0; --land-wasser-fern: #c4e8fb; --land-wasser: #7cc4f0; --land-welle: #eaf7ff;
  --land-baum: #5cbf72; --land-baum-2: #49a862; --land-stamm: #b07a4f; --land-geruest: #d98a2b;
  --wand-licht: #fbf3e4; --wand-schatten: #ddcfb8; --dach-licht: #ea7a5f; --dach-schatten: #c75a43; --kuppel: #eef1f7;
  --scheune: #d9534a; --scheune-schatten: #b13f37; --stein: #d7d0c4; --stein-schatten: #a9a195;
  --fluegel-tuch: #fffaf0; --fenster: #bfe2ff; --ballon: #ff8a5c; --korb: #c98b4d; --korb-dunkel: #9b6634;
  --kuppel-schatten: #c6cde0; --tor-dunkel: #3a2a2c; --kuh: #ffffff; --kuh-fleck: #3d3553; --kuh-maul: #ffb3c1; --kuh-horn: #f6e8c6;
  --dorf-an: #ffb22e; --dorf-zwischen: #bfe2ff; --seerose: #6cc673; --seerose-ader: #49a862;
  --land-berg-fern: #d5e7f7; --land-acker: #bfe49b; --land-acker-streifen: #93c86d; --dorf-wand: #ffe2bf; --zier: #fffaf0;
  --schiefer: #7a8bbb; --schiefer-2: #5d6c99; --heu: #f7d36b; --heu-schatten: #dcae45; --heu-spirale: #b98a2e; --zaun: #d9a066;
  --schaf: #ffffff; --schaf-kopf: #3d3553; --ente: #ffffff; --kueken: #ffd84d; --schnabel: #ff9f1c; --rauch: #ffffff;
  --laterne-mast: #3c3f63; --laterne-glas: #fff4cf; --laterne-licht: #ffd36b; --laterne-schein: 0;
  --kamm: #ff5a5f; --kegel: #ff8a3d;
  --bluete-1: #ffffff; --bluete-2: #ff9ec0; --bluete-3: #ffd23f; --fenster-schein: none; --fenster-schein-fern: none; --gluehwurm-sicht: 0;
  --wolke: #ffffff;
  --wolke-grau: #d9dfee;
  --sonne: #ffd23f;
  --krater: #f1c232;
  --wange: #ff8fa3;
  --stern: #fff4c2;
  --regen: rgba(74, 94, 140, .5); --regen-ring: rgba(255, 255, 255, .85); --regen-tropfen: #6683ba; --leuchten: rgba(255, 255, 255, .72);
  --dampf: #ffffff; --dampf-deckung: .85; --schnuppe: #fff6d0;
  --online: #2fcf8e;
  --wackelig: #ffc53d;
  --stoerung: #ff8a3d;
  --offline: #ff5a5f;
  --wartung: #4f8cff;
  --unbekannt: #b9bfd3;
  --helm: #ffd23f;
  --marke: #7a3cf2;
  --marke-hell: #ece4ff;
  --plesk: #52bbe6;
  --plesk-wort: #ffffff;
  --andeutung: rgba(85, 90, 125, .3);
  --andeutung-schraffur: rgba(85, 90, 125, .2);
  --andeutung-grund: rgba(85, 90, 125, .04);
  --andeutung-text: rgba(85, 90, 125, .9);
  --spur: rgba(27, 28, 58, .1);
  --fokus: #7a3cf2;
  --auf-farbe: #1b1c3a;
  --figur-grau: #c9cddc;
  --schleier: rgba(22, 24, 56, .46);
  --kante-fein: rgba(27, 28, 58, .13);
  --schatten-weich: 0 1px 2px rgba(18, 20, 52, .06), 0 14px 32px -18px rgba(18, 20, 52, .35);
  --radius: 22px;
  --rand: clamp(16px, 3.6vw, 56px);
  --schatten: 0 4px 0 var(--linie);
  --schatten-hoch: 0 7px 0 var(--linie);
  --federn: cubic-bezier(.34, 1.56, .64, 1);
  --weich: cubic-bezier(.22, 1, .36, 1);
  --schrift: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titel: 'Fredoka', 'Figtree', ui-rounded, system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text: #eef0ff;
    --text-2: #a9aed3;
    --linie: #05061c;
    --grund: #13173a;
    --karte: #1f2352;
    --flaeche: #282d63;
    --leer: #343a74;
    --himmel-1: #0b1034;
    --himmel-2: #2a3380;
    --wiese-1: #2e7552;
    --wiese-2: #235e43;
    --land-berg: #24345f; --land-boden-fern: #23523f; --land-boden-nah: #1d4a37; --land-huegel: #26603f; --land-huegel-schatten: #1d4d33;
    --land-feld: #8f7a3e; --land-feld-streifen: #6f5d2c; --land-weg: #6e6248; --land-wasser-fern: #3a5d8c; --land-wasser: #24507f; --land-welle: #6f9fcf;
    --land-baum: #2c7a50; --land-baum-2: #23663f; --land-stamm: #6a4630; --land-geruest: #b06a1c;
    --wand-licht: #bcb19c; --wand-schatten: #8f8572; --dach-licht: #a24c3a; --dach-schatten: #7d3729; --kuppel: #a9adbd;
    --scheune: #8f3a33; --scheune-schatten: #6d2b26; --stein: #8a847a; --stein-schatten: #66615a;
    --fluegel-tuch: #d9d1c2; --fenster: #ffd36b; --ballon: #c9603d; --korb: #8a5d33; --korb-dunkel: #6a4424;
    --kuppel-schatten: #7f8499; --tor-dunkel: #120d16; --kuh: #c9ccdb; --kuh-fleck: #241f36; --kuh-maul: #c48795; --kuh-horn: #b8ab8c;
    --dorf-an: #fff4cf; --dorf-zwischen: #2a2d52; --seerose: #2f7a4f; --seerose-ader: #22603d;
    --land-berg-fern: #1f2c5e; --land-acker: #2f6140; --land-acker-streifen: #244f33; --dorf-wand: #b8a586; --zier: #cfc7b6;
    --schiefer: #414d76; --schiefer-2: #333c5f; --heu: #a88b45; --heu-schatten: #8a7034; --heu-spirale: #6b5626; --zaun: #8a6440;
    --schaf: #c9ccdb; --schaf-kopf: #241f36; --ente: #cfd2e0; --kueken: #c9a93c; --schnabel: #c97a1a; --rauch: #8f95b8;
    --laterne-mast: #20223f; --laterne-glas: #ffd36b; --laterne-licht: #ffcf5c; --laterne-schein: .55;
    --kamm: #c9454a; --kegel: #c9672b;
    --bluete-1: #d9dbe6; --bluete-2: #c97a96; --bluete-3: #d1ad3a; --fenster-schein: drop-shadow(0 0 6px rgba(255, 207, 92, .95)); --fenster-schein-fern: drop-shadow(0 0 12px rgb(255, 207, 92)); --gluehwurm-sicht: 1;
    --wolke: #3d4591;
    --wolke-grau: #323877;
    --sonne: #ffe7a1;
    --krater: #f2d27f;
    --stern: #fff4c2;
    --regen: rgba(178, 198, 232, .3); --regen-ring: rgba(190, 214, 245, .55); --regen-tropfen: #8ea6d4; --leuchten: rgba(168, 184, 255, .3);
    --dampf: #8d94b8; --dampf-deckung: .5; --schnuppe: #fff8e1;
    --online: #3ae29d;
    --wackelig: #ffd057;
    --stoerung: #ff9b52;
    --offline: #ff6b70;
    --wartung: #6aa2ff;
    --unbekannt: #9097b8;
    --marke: #8352f6;
    --marke-hell: #2c2462;
    --plesk: #52bbe6;
    --plesk-wort: #ffffff;
    --andeutung: rgba(169, 174, 211, .28);
    --andeutung-schraffur: rgba(169, 174, 211, .18);
    --andeutung-grund: rgba(169, 174, 211, .04);
    --andeutung-text: rgba(169, 174, 211, .9);
    --spur: rgba(238, 240, 255, .12);
    --fokus: #b596ff;
    --figur-grau: #aeb3cb;
    --schleier: rgba(3, 4, 18, .62);
    --kante-fein: rgba(255, 255, 255, .09);
    --schatten-weich: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 34px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --text: #eef0ff;
  --text-2: #a9aed3;
  --linie: #05061c;
  --grund: #13173a;
  --karte: #1f2352;
  --flaeche: #282d63;
  --leer: #343a74;
  --himmel-1: #0b1034;
  --himmel-2: #2a3380;
  --wiese-1: #2e7552;
  --wiese-2: #235e43;
  --land-berg: #24345f; --land-boden-fern: #23523f; --land-boden-nah: #1d4a37; --land-huegel: #26603f; --land-huegel-schatten: #1d4d33;
  --land-feld: #8f7a3e; --land-feld-streifen: #6f5d2c; --land-weg: #6e6248; --land-wasser-fern: #3a5d8c; --land-wasser: #24507f; --land-welle: #6f9fcf;
  --land-baum: #2c7a50; --land-baum-2: #23663f; --land-stamm: #6a4630; --land-geruest: #b06a1c;
  --wand-licht: #bcb19c; --wand-schatten: #8f8572; --dach-licht: #a24c3a; --dach-schatten: #7d3729; --kuppel: #a9adbd;
  --scheune: #8f3a33; --scheune-schatten: #6d2b26; --stein: #8a847a; --stein-schatten: #66615a;
  --fluegel-tuch: #d9d1c2; --fenster: #ffd36b; --ballon: #c9603d; --korb: #8a5d33; --korb-dunkel: #6a4424;
  --kuppel-schatten: #7f8499; --tor-dunkel: #120d16; --kuh: #c9ccdb; --kuh-fleck: #241f36; --kuh-maul: #c48795; --kuh-horn: #b8ab8c;
  --dorf-an: #fff4cf; --dorf-zwischen: #2a2d52; --seerose: #2f7a4f; --seerose-ader: #22603d;
  --land-berg-fern: #1f2c5e; --land-acker: #2f6140; --land-acker-streifen: #244f33; --dorf-wand: #b8a586; --zier: #cfc7b6;
  --schiefer: #414d76; --schiefer-2: #333c5f; --heu: #a88b45; --heu-schatten: #8a7034; --heu-spirale: #6b5626; --zaun: #8a6440;
  --schaf: #c9ccdb; --schaf-kopf: #241f36; --ente: #cfd2e0; --kueken: #c9a93c; --schnabel: #c97a1a; --rauch: #8f95b8;
  --laterne-mast: #20223f; --laterne-glas: #ffd36b; --laterne-licht: #ffcf5c; --laterne-schein: .55;
  --kamm: #c9454a; --kegel: #c9672b;
  --bluete-1: #d9dbe6; --bluete-2: #c97a96; --bluete-3: #d1ad3a; --fenster-schein: drop-shadow(0 0 6px rgba(255, 207, 92, .95)); --fenster-schein-fern: drop-shadow(0 0 12px rgb(255, 207, 92)); --gluehwurm-sicht: 1;
  --wolke: #3d4591;
  --wolke-grau: #323877;
  --sonne: #ffe7a1;
  --krater: #f2d27f;
  --stern: #fff4c2;
  --regen: rgba(178, 198, 232, .3); --regen-ring: rgba(190, 214, 245, .55); --regen-tropfen: #8ea6d4; --leuchten: rgba(168, 184, 255, .3);
  --dampf: #8d94b8; --dampf-deckung: .5; --schnuppe: #fff8e1;
  --online: #3ae29d;
  --wackelig: #ffd057;
  --stoerung: #ff9b52;
  --offline: #ff6b70;
  --wartung: #6aa2ff;
  --unbekannt: #9097b8;
  --marke: #8352f6;
  --marke-hell: #2c2462;
  --plesk: #52bbe6;
  --plesk-wort: #ffffff;
  --andeutung: rgba(169, 174, 211, .28);
  --andeutung-schraffur: rgba(169, 174, 211, .18);
  --andeutung-grund: rgba(169, 174, 211, .04);
  --andeutung-text: rgba(169, 174, 211, .9);
  --spur: rgba(238, 240, 255, .12);
  --fokus: #b596ff;
  --figur-grau: #aeb3cb;
  --schleier: rgba(3, 4, 18, .62);
  --kante-fein: rgba(255, 255, 255, .09);
  --schatten-weich: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 34px -20px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* Tageszeit: Die Szene folgt der Uhrzeit (app.js setzt data-tageszeit), nicht dem Hell- oder Dunkelmodus. Ihre Farben
   stehen deshalb an der Bühne; Karten, Knöpfe und Texte darauf folgen weiter dem gewählten Modus. Im Dunkelmodus
   dimmt tagsüber ein Schleier die helle Szene (siehe .buehne::after). */
:root[data-tageszeit] .buehne {
  --himmel-1: #8fb4ff; --himmel-2: #d3e3ff; --wiese-1: #8edb8c; --wiese-2: #6cc673; --land-berg: #b9d7ef; --land-boden-fern: #cdeab0;
  --land-boden-nah: #8fd68a; --land-huegel: #a6dd95; --land-huegel-schatten: #8cc97e; --land-feld: #f6d77a; --land-feld-streifen: #e3b94e;
  --land-weg: #ead9b0; --land-wasser-fern: #c4e8fb; --land-wasser: #7cc4f0; --land-welle: #eaf7ff; --land-baum: #5cbf72; --land-baum-2: #49a862;
  --land-stamm: #b07a4f; --land-geruest: #d98a2b; --wand-licht: #fbf3e4; --wand-schatten: #ddcfb8; --dach-licht: #ea7a5f; --dach-schatten: #c75a43;
  --kuppel: #eef1f7; --scheune: #d9534a; --scheune-schatten: #b13f37; --stein: #d7d0c4; --stein-schatten: #a9a195; --fluegel-tuch: #fffaf0;
  --fenster: #bfe2ff; --ballon: #ff8a5c; --korb: #c98b4d; --korb-dunkel: #9b6634; --kuppel-schatten: #c6cde0; --tor-dunkel: #3a2a2c; --kuh: #ffffff;
  --kuh-fleck: #3d3553; --kuh-maul: #ffb3c1; --kuh-horn: #f6e8c6; --dorf-an: #ffb22e; --dorf-zwischen: #bfe2ff; --seerose: #6cc673;
  --seerose-ader: #49a862; --land-berg-fern: #d5e7f7; --land-acker: #bfe49b; --land-acker-streifen: #93c86d; --dorf-wand: #ffe2bf; --zier: #fffaf0;
  --schiefer: #7a8bbb; --schiefer-2: #5d6c99; --heu: #f7d36b; --heu-schatten: #dcae45; --heu-spirale: #b98a2e; --zaun: #d9a066; --schaf: #ffffff;
  --schaf-kopf: #3d3553; --ente: #ffffff; --kueken: #ffd84d; --schnabel: #ff9f1c; --rauch: #ffffff; --laterne-mast: #3c3f63; --laterne-glas: #fff4cf;
  --laterne-licht: #ffd36b; --laterne-schein: 0; --kamm: #ff5a5f; --kegel: #ff8a3d; --bluete-1: #ffffff; --bluete-2: #ff9ec0; --bluete-3: #ffd23f;
  --fenster-schein: none; --fenster-schein-fern: none; --gluehwurm-sicht: 0; --wolke: #ffffff; --wolke-grau: #d9dfee; --sonne: #ffd23f;
  --krater: #f1c232; --wange: #ff8fa3; --stern: #fff4c2; --regen: rgba(74, 94, 140, .5); --regen-ring: rgba(255, 255, 255, .85);
  --regen-tropfen: #6683ba; --leuchten: rgba(255, 255, 255, .72); --dampf: #ffffff; --dampf-deckung: .85; --schnuppe: #fff6d0;
}
:root[data-tageszeit="nacht"] .buehne {
  --himmel-1: #0b1034; --himmel-2: #2a3380; --wiese-1: #2e7552; --wiese-2: #235e43; --land-berg: #24345f; --land-boden-fern: #23523f;
  --land-boden-nah: #1d4a37; --land-huegel: #26603f; --land-huegel-schatten: #1d4d33; --land-feld: #8f7a3e; --land-feld-streifen: #6f5d2c;
  --land-weg: #6e6248; --land-wasser-fern: #3a5d8c; --land-wasser: #24507f; --land-welle: #6f9fcf; --land-baum: #2c7a50; --land-baum-2: #23663f;
  --land-stamm: #6a4630; --land-geruest: #b06a1c; --wand-licht: #bcb19c; --wand-schatten: #8f8572; --dach-licht: #a24c3a; --dach-schatten: #7d3729;
  --kuppel: #a9adbd; --scheune: #8f3a33; --scheune-schatten: #6d2b26; --stein: #8a847a; --stein-schatten: #66615a; --fluegel-tuch: #d9d1c2;
  --fenster: #ffd36b; --ballon: #c9603d; --korb: #8a5d33; --korb-dunkel: #6a4424; --kuppel-schatten: #7f8499; --tor-dunkel: #120d16; --kuh: #c9ccdb;
  --kuh-fleck: #241f36; --kuh-maul: #c48795; --kuh-horn: #b8ab8c; --dorf-an: #fff4cf; --dorf-zwischen: #2a2d52; --seerose: #2f7a4f;
  --seerose-ader: #22603d; --land-berg-fern: #1f2c5e; --land-acker: #2f6140; --land-acker-streifen: #244f33; --dorf-wand: #b8a586; --zier: #cfc7b6;
  --schiefer: #414d76; --schiefer-2: #333c5f; --heu: #a88b45; --heu-schatten: #8a7034; --heu-spirale: #6b5626; --zaun: #8a6440; --schaf: #c9ccdb;
  --schaf-kopf: #241f36; --ente: #cfd2e0; --kueken: #c9a93c; --schnabel: #c97a1a; --rauch: #8f95b8; --laterne-mast: #20223f; --laterne-glas: #ffd36b;
  --laterne-licht: #ffcf5c; --laterne-schein: .55; --kamm: #c9454a; --kegel: #c9672b; --bluete-1: #d9dbe6; --bluete-2: #c97a96; --bluete-3: #d1ad3a;
  --fenster-schein: drop-shadow(0 0 6px rgba(255, 207, 92, .95)); --fenster-schein-fern: drop-shadow(0 0 12px rgb(255, 207, 92));
  --gluehwurm-sicht: 1; --wolke: #3d4591; --wolke-grau: #323877; --sonne: #ffe7a1; --krater: #f2d27f; --stern: #fff4c2;
  --regen: rgba(178, 198, 232, .3); --regen-ring: rgba(190, 214, 245, .55); --regen-tropfen: #8ea6d4; --leuchten: rgba(168, 184, 255, .3);
  --dampf: #8d94b8; --dampf-deckung: .5; --schnuppe: #fff8e1;
}
:root[data-tageszeit="morgen"] .buehne { --himmel-1: #8fa8ec; --himmel-2: #ffd8c0; --wolke: #fff4ec; --sonne: #ffcf55; }
:root[data-tageszeit="abend"] .buehne {
  --himmel-1: #8088d8; --himmel-2: #ffb48c; --wolke: #ffe2d4; --sonne: #ffb347;
  --fenster: #ffd36b; --fenster-schein: drop-shadow(0 0 6px rgba(255, 207, 92, .95)); --fenster-schein-fern: drop-shadow(0 0 12px rgb(255, 207, 92));
  --laterne-glas: #ffd36b; --laterne-schein: .4;
}
:root[data-tageszeit] .buehne[data-wetter="wolkig"] { --himmel-1: #9db4e2; --himmel-2: #d7e0f1; --wolke: #f2f4f9; }
:root[data-tageszeit] .buehne[data-wetter="regen"] { --himmel-1: #93a6cf; --himmel-2: #d0d9ec; --wolke: #e3e7f2; }
:root[data-tageszeit] .buehne[data-wetter="sturm"] { --himmel-1: #6b7699; --himmel-2: #aeb8d2; --wolke: #c7cde0; }
:root[data-tageszeit="nacht"] .buehne[data-wetter="wolkig"] { --himmel-1: #0e1333; --himmel-2: #2b3274; --wolke: #3a4186; }
:root[data-tageszeit="nacht"] .buehne:is([data-wetter="regen"], [data-wetter="sturm"]) { --himmel-1: #080b24; --himmel-2: #1c2256; }
:root[data-tageszeit="nacht"] .buehne[data-wetter="regen"] { --wolke: #343a78; }
:root[data-tageszeit="nacht"] .buehne[data-wetter="sturm"] { --wolke: #2e346e; }

/* Jahreszeiten (app.js setzt data-jahreszeit nach dem Monat); der Sommer ist die Grundfassung. Der Himmel bleibt
   Sache der Tageszeit. */
:root[data-jahreszeit="fruehling"]:not([data-tageszeit="nacht"]) .buehne {
  --land-baum: #74d27f; --land-baum-2: #5bbd6c; --land-feld: #c5e79a; --land-feld-streifen: #9fd06f;
  --wiese-1: #9be596; --land-boden-nah: #98dc8d;
}
:root[data-jahreszeit="herbst"]:not([data-tageszeit="nacht"]) .buehne {
  --land-baum: #f2a33a; --land-baum-2: #dd6b2c; --land-feld: #d8b06a; --land-feld-streifen: #b98b46;
  --land-acker: #c69a62; --land-acker-streifen: #a57a46; --land-boden-nah: #a7d27f; --land-boden-fern: #d6e7ad;
  --land-huegel: #b9da8a; --land-huegel-schatten: #9fc574; --wiese-1: #a9d989; --wiese-2: #8fc56f;
}
:root[data-jahreszeit="winter"]:not([data-tageszeit="nacht"]) .buehne {
  --land-boden-fern: #eef4fb; --land-boden-nah: #e4edf7; --land-huegel: #f3f8fd; --land-huegel-schatten: #d6e2ef;
  --land-feld: #eaf1f9; --land-feld-streifen: #d3dfec; --land-acker: #e8f0f8; --land-acker-streifen: #cfdbe9;
  --wiese-1: #e8f0f9; --wiese-2: #d4e0ee; --land-berg: #dfeaf6; --land-berg-fern: #e9f1fa; --land-weg: #efe9de;
  --land-wasser: #9fd0ee; --land-wasser-fern: #d2eaf8; --land-welle: #f5fbff; --land-baum: #3f9168; --land-baum-2: #2f7754;
  --dach-licht: #f6f9fd; --dach-schatten: #d6e1ee; --schiefer: #f1f5fb; --schiefer-2: #d2dcea; --heu: #efe6cf; --heu-schatten: #d7cba9;
}
:root[data-tageszeit="nacht"][data-jahreszeit="herbst"] .buehne {
  --land-baum: #8a5a26; --land-baum-2: #6f3f1d; --land-feld: #6f5a33; --land-acker: #5c4a32; --land-acker-streifen: #4a3b28;
}
:root[data-tageszeit="nacht"][data-jahreszeit="winter"] .buehne {
  --land-boden-fern: #3a4775; --land-boden-nah: #34416c; --land-huegel: #3f4c7b; --land-huegel-schatten: #34406a;
  --land-feld: #3c4876; --land-feld-streifen: #323e69; --land-acker: #394574; --land-acker-streifen: #303b66;
  --wiese-1: #3a4673; --wiese-2: #313d67; --land-berg: #2c3a6a; --land-berg-fern: #263362; --land-weg: #4a5580;
  --land-wasser: #2c5a86; --land-baum: #1f5a3e; --land-baum-2: #184a33;
  --dach-licht: #8e9bc0; --dach-schatten: #6f7ca3; --schiefer: #8e9bc0; --schiefer-2: #6f7ca3; --heu: #77799a; --heu-schatten: #5d607f;
}
/* Glühwürmchen gibt es nur in Sommernächten. */
:root[data-tageszeit][data-jahreszeit]:not([data-jahreszeit="sommer"]) .buehne { --gluehwurm-sicht: 0; }
:root[data-jahreszeit="herbst"]:not([data-tageszeit="nacht"]) .baum-art-1 { --land-baum: #e4572e; --land-baum-2: #c03f24; }
:root[data-jahreszeit="herbst"]:not([data-tageszeit="nacht"]) .baum-art-2 { --land-baum: #f4c430; --land-baum-2: #d8a01c; }
:root[data-tageszeit="nacht"][data-jahreszeit="herbst"] .baum-art-1 { --land-baum: #7a3424; --land-baum-2: #5f281b; }
:root[data-tageszeit="nacht"][data-jahreszeit="herbst"] .baum-art-2 { --land-baum: #7d6524; --land-baum-2: #61501c; }
.saison-bluete, .saison-schnee { display: none; }
:root[data-jahreszeit="fruehling"] .saison-bluete { display: inline; }
:root[data-jahreszeit="winter"] .saison-schnee { display: inline; }
.saison-bluete circle { fill: #ffc6da; stroke-width: 1.4 !important; }
:root[data-tageszeit="nacht"] .saison-bluete circle { fill: #b9849a; }
.saison-schnee { fill: #fbfdff; stroke-width: 1.8 !important; }
:root[data-tageszeit="nacht"] .saison-schnee { fill: #c9d3ea; }
:root[data-jahreszeit="winter"] :is(.blume, .regen-pfuetze, .mw-pfuetze) { display: none; }
:root[data-jahreszeit="fruehling"] .heuballen { display: none; }
/* Im Winter ist der Fluss teilweise zugefroren, der Mühlenteich ebenso (app.js: SCHOLLEN). Seerosen ziehen sich
   zurück, und weil es statt zu regnen schneit, gibt es keine Regenringe auf dem Wasser. */
.eis { display: none; }
:root[data-jahreszeit="winter"] .eis { display: inline; }
.eis-scholle { fill: var(--eis, #eef8ff); }
.eis-glanz { fill: none; stroke: var(--eis-glanz, #fff) !important; stroke-width: 2.2 !important; }
.eis-ufer { fill: none; }
:root[data-tageszeit="nacht"] .eis { --eis: #6f8fbf; --eis-glanz: #a6c0e6; }
:root[data-jahreszeit="winter"] .seerose { display: none; }
:root[data-jahreszeit="winter"] .buehne .regen-ringe { display: none; }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  min-height: 100vh;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 10px; }

.ic { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }
.nur-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nur-mobil { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprungmarke {
  position: absolute; left: 16px; top: -60px; z-index: 1200;
  padding: 10px 16px; border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); font-weight: 700; text-decoration: none;
}
.sprungmarke:focus { top: 16px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.1em;
  border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--text);
  font-weight: 700; font-size: .95rem; line-height: 1.1; white-space: nowrap; text-decoration: none;
  box-shadow: 0 3px 0 var(--linie);
  transition: transform .14s var(--weich), box-shadow .14s var(--weich), background-color .2s;
}
.knopf:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--linie); }
.knopf:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--linie); }
.knopf-marke { background: var(--marke); color: var(--auf-marke, #fff); }
.knopf-rund { width: 44px; padding: 0; }
.knopf-rund .ic { width: 21px; height: 21px; }
.knopf-breit { width: 100%; }
.knopf[disabled] { opacity: .6; pointer-events: none; }
.text-knopf {
  border: 0; background: none; padding: 4px 2px; font-weight: 700; font-size: .88rem;
  color: var(--marke); text-decoration: underline; text-underline-offset: 3px;
}
:root[data-theme="dark"] .text-knopf { color: var(--fokus); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .text-knopf { color: var(--fokus); } }

.logo {
  display: inline-flex; align-items: center; flex: none;
  padding: 8px 16px; border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); box-shadow: 0 3px 0 var(--linie);
  transition: transform .14s var(--weich), box-shadow .14s var(--weich);
}
.logo:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--linie); }
.logo img { width: auto; height: clamp(22px, 1.9vw, 30px); }
.logo-dunkel { display: none !important; }
:root[data-theme="dark"] .logo-hell { display: none !important; }
:root[data-theme="dark"] .logo-dunkel { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-hell { display: none !important; }
  :root:not([data-theme="light"]) .logo-dunkel { display: block !important; }
}

.buehne {
  /* Landschaft unten; die SVG wird per "slice" skaliert, die Uferwiese ist 90 von 420 Einheiten hoch */
  --land: clamp(230px, 36svh, 420px);
  --huegel: max(5.625vw, calc(var(--land) * .2143));
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: min(100svh, 1120px);
  background: linear-gradient(180deg, var(--himmel-1) 0%, var(--himmel-2) 78%);
  border-bottom: 3px solid var(--linie);
}
/* Je schlechter das Wetter, desto grauer Himmel und Wolken (nachts siehe Tageszeit unten). */
.buehne[data-wetter="wolkig"] { --himmel-1: #9db4e2; --himmel-2: #d7e0f1; --wolke: #f2f4f9; }
.buehne[data-wetter="regen"] { --himmel-1: #93a6cf; --himmel-2: #d0d9ec; --wolke: #e3e7f2; }
.buehne[data-wetter="sturm"] { --himmel-1: #6b7699; --himmel-2: #aeb8d2; --wolke: #c7cde0; }
/* Zwei Schleier über Himmel und Land, unter Figuren, Karten und Texten: ::before tönt morgens und abends warm,
   ::after dunkelt im Dunkelmodus die helle Tagesszene ab. */
.buehne::before, .buehne::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
}
.buehne::before { background: linear-gradient(180deg, rgba(255, 170, 120, .1), rgba(255, 130, 72, .2)); }
:root[data-tageszeit="abend"] .buehne::before { opacity: 1; }
:root[data-tageszeit="morgen"] .buehne::before { opacity: .5; }
.buehne::after { background: #070a26; }
:root[data-theme="dark"][data-tageszeit]:not([data-tageszeit="nacht"]) .buehne::after { opacity: .45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-tageszeit]:not([data-tageszeit="nacht"]) .buehne::after { opacity: .45; }
}
/* Die Figuren stehen über dem Schleier und werden deshalb eigens gedimmt, etwas schwächer als die Landschaft, damit
   ihr Zustand gut lesbar bleibt. Nachts hat die ganze Szene ihre dunklen Farben, dort bleibt es dabei. */
:root[data-theme="dark"][data-tageszeit]:not([data-tageszeit="nacht"]) .crew-figur { filter: brightness(.8) saturate(.9); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-tageszeit]:not([data-tageszeit="nacht"]) .crew-figur { filter: brightness(.8) saturate(.9); }
}
/* Morgens und abends steht die Sonne halb hinter dem Bergkamm (app.js, sonnenStandSetzen); left und top zeigen auf
   ihre Mitte, bei der Wolke davor auf deren Mitte. */
.am-horizont { translate: -50% -50%; }

.himmel { position: absolute; inset: 0; z-index: 1; pointer-events: none; container-type: inline-size; }

.kopf {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) var(--rand) 14px;
}
.kopf-aktionen { display: flex; align-items: center; gap: 10px; }

.botschaft {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-block: auto; padding: 28px var(--rand) 18px; text-align: center;
}
.schlagzeile {
  max-width: 14ch;
  font-family: var(--titel); font-weight: 700;
  font-size: clamp(2.5rem, 1rem + 5.2vw, 6.6rem);
  line-height: 1.02; letter-spacing: .01em;
  color: #fff;
  -webkit-text-stroke: .13em var(--linie);
  paint-order: stroke fill;
  text-shadow: 0 .075em 0 var(--linie);
  text-wrap: balance;
  /* Umrandung, Schatten und Unterlängen ragen über den Textrahmen hinaus; ohne Abstand klebt die Statuszeile daran */
  margin-bottom: .3em;
}
.lage {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  max-width: min(100%, 860px);
  padding: 10px 20px;
  border: 2px solid var(--linie); border-radius: 22px;
  background: var(--karte); box-shadow: 0 3px 0 var(--linie);
  font-weight: 600; font-size: clamp(.95rem, .85rem + .3vw, 1.08rem); line-height: 1.35;
}
/* Bricht ein Teil um, bleibt der Punkt vor der ersten Zeile und der Text läuft linksbündig daneben weiter. */
.lage-teil { display: inline-flex; align-items: flex-start; gap: 7px; }
.lage-teil > span:last-child { text-align: left; }
.lage-teil > .lage-punkt { margin-top: calc((1.35em - 12px) / 2); }
.lage-punkt {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--linie); background: var(--unbekannt);
}
.lage-punkt.ist-online { background: var(--online); }
.lage-punkt.ist-wackelig { background: var(--wackelig); }
.lage-punkt.ist-offline { background: var(--offline); }
.lage-punkt.ist-wartung { background: var(--wartung); }
.lage-zeit { margin-top: -8px; min-height: 1.3em; color: var(--text-2); font-weight: 600; font-size: .9rem; }

.crew {
  --figur: 58px;
  --luecke: 8px;
  position: relative; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  padding: 18px 12px calc(var(--huegel) * .79 - 7px);
}
.crew-reihe {
  display: flex; justify-content: center; align-items: flex-end; gap: var(--luecke);
  transform: translateY(calc(var(--tiefe, 0) * var(--figur) * -.06)) scale(max(.7, calc(1 - var(--tiefe, 0) * .12)));
  transform-origin: 50% 100%;
}
.crew-reihe + .crew-reihe { margin-top: calc(var(--figur) * -.66); }
.crew-figur {
  position: relative; display: block; width: var(--figur); cursor: pointer;
  transform: translateY(var(--hoehe, 0px));
  translate: 0 0;
  transition: translate .3s var(--federn), filter 1.2s ease;
}
.crew-figur:hover { translate: 0 -10px; }
.figur-pop { display: block; transform-origin: 50% 100%; }

.landschaft {
  --fluegel: 14s; --wiegen: 2deg; --wiegen-dauer: 4.5s; --welle: 1; --welle-dauer: 7s;
  --schaukeln: 2deg; --schaukel-dauer: 4.2s; --schweben: 6px;
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--land); pointer-events: none;
  transition: filter 1.2s ease;
}
.landschaft svg { display: block; width: 100%; height: 100%; overflow: hidden; }
/* Auf großen Bildschirmen wäre die Box niedriger als die Zeichnung und „slice“ schnitte die Hügelkuppen ab. Die Grafik
   behält deshalb ihr volles Seitenverhältnis und ragt unten bündig über die Box in den Himmel; Maßstab und Fußpunkt
   bleiben gleich, die Figuren (szeneMass) stehen also weiter richtig. */
:root:not(.ist-teilansicht) .buehne.szene-modus .landschaft svg { position: absolute; left: 0; bottom: 0; height: auto; min-height: 100%; aspect-ratio: 1600 / 700; }
.landschaft :is(path, circle, ellipse) { stroke: var(--linie); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.landschaft .schatten { fill: var(--linie); opacity: .14; stroke: none; }
.berge { fill: var(--land-berg); }
.boden { fill: url(#land-boden); }
.huegel-licht { fill: var(--land-huegel); }
.huegel-schatten { fill: var(--land-huegel-schatten); stroke: none !important; }
.feld-flaeche { fill: var(--land-feld); }
.feld-streifen { fill: none; stroke: var(--land-feld-streifen) !important; stroke-width: 2 !important; }
.weg { fill: var(--land-weg); stroke-width: 1.8 !important; }
.fluss { fill: url(#land-wasser); transition: filter 1.2s ease; }
.wellen path { fill: none; stroke: var(--land-welle) !important; stroke-width: 2.6 !important; }
/* Bei Wind wird jede Welle für sich höher; ein Skalieren der ganzen Gruppe schöbe die Wellen aus dem Fluss in den Himmel. */
.wellen path { transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(var(--welle)); transition: transform 1.2s ease; }
.wellen { animation: wellen-tanzen var(--welle-dauer) ease-in-out infinite alternate; }

.wand-licht { fill: var(--wand-licht); }
.wand-schatten { fill: var(--wand-schatten); }
.dach-licht { fill: var(--dach-licht); }
.dach-schatten { fill: var(--dach-schatten); }
.tuer { fill: var(--land-stamm); }
.fenster-licht, .fensterreihe { fill: var(--fenster); transition: fill 1s ease; }
.fluegel { animation: drehen var(--fluegel) linear infinite; }
.fluegel-holm { fill: none; stroke-width: 3 !important; }
.fluegel-tuch { fill: var(--fluegel-tuch); stroke-width: 1.8 !important; }
.nabe { fill: var(--dach-licht); }
.geruest { opacity: 0; transition: opacity .8s ease; }
.geruest path { fill: none; stroke: var(--land-geruest) !important; stroke-width: 2.8 !important; }
.schornstein { fill: var(--dach-schatten); }
.schornstein-ring { fill: none; stroke: #fff !important; stroke-width: 2 !important; }
/* Dampf ist weich (Verlauf statt Kontur), wächst beim Aufsteigen und vergeht; nachts gedämpft (--dampf-deckung). */
.dampf circle { fill: url(#dampf-weich); stroke: none !important; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: dampf 4.2s ease-out infinite; }
.dampf circle:nth-child(2) { animation-delay: -1.4s; }
.dampf circle:nth-child(3) { animation-delay: -2.8s; }
.blitz-schild { fill: #ffd23f; stroke-width: 1.6 !important; }
.mast path { fill: none; stroke-width: 2.2 !important; }
/* Kraftwerk und Masten am Horizont sind stark verkleinert; dickere Linien halten sie so kräftig wie die Bauten vorne. */
.mast-fern path { stroke-width: 3.2 !important; }
.kraftwerk :is(path, circle, ellipse) { stroke-width: 3.6; }
.kraftwerk .mast path { stroke-width: 3.4 !important; }
.kraftwerk .kw-stuetze { fill: none; stroke-width: 3.4 !important; }
.kraftwerk :is(.blitz-schild, .dach-kante, .schornstein-kappe, .schornstein-ring, .isolator) { stroke-width: 2.8 !important; }
.kraftwerk .fensterreihe { filter: var(--fenster-schein-fern); }
.kuppel { fill: var(--kuppel); stroke: none !important; }
.kuppel-schatten { fill: var(--kuppel-schatten); stroke: none !important; }
.kuppel-licht { fill: none; stroke: rgba(255, 255, 255, .75) !important; stroke-width: 4 !important; }
.kuppel-kontur { fill: none; }
.teleskop { fill: var(--wand-schatten); }
.scheune-front { fill: var(--scheune); }
.scheune-seite { fill: var(--scheune-schatten); }
.scheune-dach { fill: var(--dach-schatten); }
.scheune-tor { fill: var(--wand-licht); stroke-width: 2 !important; }
.silo { fill: var(--wand-licht); }
.silo-ring { fill: none; stroke-width: 1.8 !important; }
.bruecke-bogen { fill: var(--stein-schatten); }
.bruecke-deck { fill: var(--stein); }
.bruecke-gelaender { fill: none; stroke-width: 2.2 !important; }

.stamm { fill: var(--land-stamm); }
.krone { fill: var(--land-baum); }
.krone-2 { fill: var(--land-baum-2); }
.krone-licht { fill: none; stroke: rgba(255, 255, 255, .55) !important; stroke-width: 3 !important; }
.baum-wipfel { transform-box: fill-box; transform-origin: 50% 100%; animation: baum-wiegen var(--wiegen-dauer) ease-in-out infinite alternate; }
.baum:nth-of-type(2n) .baum-wipfel { animation-delay: -1.3s; }
.baum-dreh { transition: transform 1.4s cubic-bezier(.6, 0, .9, .45); }
.gluehwuermchen { opacity: var(--gluehwurm-sicht); transition: opacity 1s ease; }
.gluehwurm { fill: #fff3a8; stroke: none !important; animation: gluehen 2.8s ease-in-out infinite; }

@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes wellen-tanzen { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes baum-wiegen { from { transform: rotate(calc(var(--wiegen) * -.35)); } to { transform: rotate(var(--wiegen)); } }
@keyframes dampf { 0% { transform: translateY(14px) scale(.45); opacity: 0; } 25% { opacity: var(--dampf-deckung); } 100% { transform: translateY(-30px) scale(1.5); opacity: 0; } }
@keyframes gluehen { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes schweben { from { transform: translateY(calc(var(--schweben) * -1)) rotate(calc(var(--schaukeln) * -.5)); } to { transform: translateY(var(--schweben)) rotate(calc(var(--schaukeln) * .5)); } }
@keyframes schaukeln { 0%, 100% { transform: rotate(calc(var(--schaukeln) * -1)); } 50% { transform: translateY(3px) rotate(var(--schaukeln)); } }

.berge-fern { fill: var(--land-berg-fern); stroke-width: 2 !important; }
.feld-acker .feld-flaeche { fill: var(--land-acker); }
.feld-acker .feld-streifen { stroke: var(--land-acker-streifen) !important; }
.dorf :is(path, circle, ellipse) { stroke-width: 3.6; }
.dorf-wand { fill: var(--dorf-wand); }
.dach-kante { fill: var(--dach-schatten); stroke-width: 1.8 !important; }
.dach-schiefer { fill: var(--schiefer); }
.dach-schiefer-2 { fill: var(--schiefer-2); }
.kreuz { fill: none; stroke-width: 3.4 !important; }
.uhr { fill: var(--zier); }
.uhr-zeiger { fill: none; stroke-width: 1.8 !important; }
.rauch circle { fill: var(--rauch); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: rauch 6s ease-out infinite; }
.rauch circle:nth-child(2) { animation-delay: -3s; }
@keyframes rauch { 0% { transform: translateY(6px) scale(.4); opacity: 0; } 25% { opacity: .85; } 100% { transform: translate(8px, -22px) scale(1.4); opacity: 0; } }
.fenster-licht, .fensterreihe { filter: var(--fenster-schein); }
.dorf .fenster-licht { filter: var(--fenster-schein-fern); }
.fenster-sprosse { fill: none; stroke-width: 1.4 !important; }
.stein-fugen { fill: none; stroke: color-mix(in srgb, var(--linie) 32%, transparent) !important; stroke-width: 1.5 !important; }
.schornstein-seite { fill: var(--dach-schatten); filter: brightness(.82); }
.schornstein-kappe { fill: var(--stein-schatten); stroke-width: 1.8 !important; }
.isolator { fill: var(--zier); stroke-width: 1.4 !important; }
.dampf-stoss circle { fill: url(#dampf-weich); stroke: none !important; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.teleskop-ring { fill: none; stroke-width: 2 !important; }
.bruecke-laibung { fill: var(--stein-schatten); filter: brightness(.78); stroke-width: 1.6 !important; }

.scheune-front { fill: var(--scheune); }
.scheune-seite { fill: var(--scheune-schatten); }
.scheune-bretter { fill: none; stroke: color-mix(in srgb, var(--linie) 30%, var(--scheune-schatten)) !important; stroke-width: 1.4 !important; }
.scheune-torfeld { fill: var(--scheune-schatten); }
.zier { fill: none; stroke: var(--zier) !important; stroke-width: 2.8 !important; }
.zier-flaeche { fill: var(--zier); stroke-width: 1.8 !important; }
.dach-scheune { fill: var(--schiefer); }
.dach-scheune-2 { fill: var(--schiefer-2); }
.dach-linie { fill: none; stroke: color-mix(in srgb, var(--linie) 30%, transparent) !important; stroke-width: 1.6 !important; }
.wetterfahne { fill: none; stroke-width: 2.2 !important; }

.zaun-kontur { fill: none; stroke-width: 4.6 !important; }
.zaun-holz { fill: none; stroke: var(--zaun) !important; stroke-width: 2.2 !important; }
.heu-seite { fill: var(--heu-schatten); }
.heu-stirn { fill: var(--heu); }
.heu-spirale { fill: none; stroke: var(--heu-spirale) !important; stroke-width: 2 !important; }
.kabel { fill: none; stroke-width: 1.3 !important; opacity: .7; }
.wegweiser-pfahl { fill: var(--land-stamm); }
.wegweiser-brett { fill: var(--korb); stroke-width: 2 !important; }
.wegweiser-schrift { fill: none; stroke: var(--korb-dunkel) !important; stroke-width: 2.4 !important; }
.absperrung { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.bake-bein { fill: none; stroke-width: 3 !important; }
.bake-weiss { fill: #fff; }
.bake-rot { fill: #ff5a5f; stroke: none !important; }
.bake-lampe { fill: #ffc53d; animation: blinken 1.1s steps(2, jump-none) infinite; }
@keyframes blinken { 50% { fill: #fff3c4; } }

.einsatzwagen { opacity: 0; visibility: hidden; transform: translateX(70px); transition: opacity .5s ease, transform .9s var(--weich), visibility 0s .9s; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .wagen-notfall,
.buehne[data-wetter="baustelle"] .wagen-bau { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .9s var(--weich), visibility 0s 0s; }
/* Steht eine Kategorie auf der Brücke, hat sie Vorrang vor dem Wagen. */
.buehne:has(.zone-bruecke) .einsatzwagen { display: none; }
.ew-karosserie { fill: #fff; }
.wagen-bau .ew-karosserie { fill: #ffc53d; }
.ew-scheibe { fill: #bfe3ff; }
.ew-tuerlinie, .ew-halter, .ew-leiter, .ew-kegel-band { fill: none; }
.ew-rad { fill: #33365c; }
.ew-nabe { fill: #dfe3f2; stroke-width: 1.6 !important; }
.ew-band { fill: #ff5a5f; stroke: none !important; }
.ew-kreuz-grund { fill: #ff5a5f; }
.ew-kreuz { fill: none; stroke: #fff !important; stroke-width: 5 !important; }
.ew-blau { fill: #3f7bff; }
.ew-schein { fill: #6aa2ff; stroke: none !important; opacity: .18; }
.ew-warn { fill: #33365c; stroke: none !important; }
.ew-leiter { stroke-width: 2.4 !important; }
.ew-werkzeug { fill: none; stroke-width: 6 !important; }
.ew-werkzeug-kopf { fill: #33365c; }
.ew-licht-bau { fill: #ff9f1c; }
.ew-kegel { fill: #ff7a2f; }
.ew-kegel-band { stroke: #fff !important; stroke-width: 4 !important; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .ew-blau { animation: blaulicht .9s steps(2, jump-none) infinite; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .ew-blau.spaet { animation-delay: .45s; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .ew-schein { animation: blauschein .9s steps(2, jump-none) infinite; }
.buehne[data-wetter="baustelle"] .ew-licht-bau { animation: rundumlicht 1.1s steps(2, jump-none) infinite; }
@keyframes blaulicht { 50% { fill: #d6e4ff; } }
@keyframes blauschein { 50% { opacity: .42; } }
@keyframes rundumlicht { 50% { fill: #ffe39a; } }
@media (prefers-reduced-motion: reduce) {
  .einsatzwagen { transform: none; }
  .ew-blau, .ew-blau.spaet, .ew-schein, .ew-licht-bau { animation: none !important; }
}

.laterne-mast { fill: var(--laterne-mast); stroke-width: 1.6 !important; }
.laterne-glas { fill: var(--laterne-glas); stroke-width: 1.6 !important; transition: fill 1s ease; }
.laterne-schein { fill: url(#laterne-glanz); stroke: none !important; opacity: calc(var(--laterne-schein) * 1.7); transition: opacity 1s ease; }

.schaf-wolle { fill: var(--schaf); }
.schaf-gesicht, .schaf-ohr { fill: var(--schaf-kopf); stroke-width: 1.8 !important; }
.schaf-beine { fill: none; stroke: var(--schaf-kopf) !important; stroke-width: 3.4 !important; }
.schaf-auge { fill: #fff; stroke: none !important; }
.schaf { transition: transform 2.6s var(--weich); }
.schaf-kopf { animation: grasen 8s ease-in-out infinite; animation-delay: var(--v, 0s); }
@keyframes grasen {
  0%, 30%, 100% { transform: rotate(0deg); }
  40%, 56%, 72% { transform: rotate(-50deg); }
  48%, 64% { transform: rotate(-42deg); }
  84% { transform: rotate(-4deg); }
}

.ente-koerper { fill: var(--ente); }
.kueken .ente-koerper, .kueken .ente-fluegel { fill: var(--kueken); }
.ente-fluegel { fill: var(--ente); stroke-width: 1.6 !important; }
.ente-schnabel { fill: var(--schnabel); stroke-width: 1.6 !important; }
.ente-auge { fill: var(--linie); stroke: none !important; }
.ente-ring { fill: none; stroke: var(--land-welle) !important; stroke-width: 2.2 !important; }
.ente-wippen { transform-box: fill-box; transform-origin: 50% 100%; animation: wippen 2.6s ease-in-out infinite alternate; }
.kueken .ente-wippen { animation-duration: 1.7s; }
.ente-bug { fill: none; stroke: var(--land-welle) !important; stroke-width: 1.8 !important; animation: bugwelle 1.3s ease-in-out infinite alternate; }
.ente-kreis {
  fill: none; stroke: var(--land-welle) !important; stroke-width: 2.2 !important; opacity: 0;
  transform-box: fill-box; transform-origin: 50% 50%; animation: ente-kreis var(--enten-dauer) ease-out var(--tv, 0s) infinite;
}
.enten { --enten-dauer: 30s; transition: opacity .9s ease, transform .9s ease, visibility 0s 0s; }
.enten-schwimmen { animation: enten-schwimmen var(--enten-dauer) linear infinite; }
.ente-tauchen { transform-box: fill-box; transform-origin: 30% 100%; animation: ente-tauchen var(--enten-dauer) ease-in-out var(--tv, 0s) infinite; }
@keyframes wippen { from { transform: rotate(-3deg); } to { transform: translateY(1px) rotate(3deg); } }
@keyframes bugwelle { from { opacity: .35; transform: translateX(1.5px); } to { opacity: .95; transform: translateX(-1.5px); } }
/* Nur nach links: Am Ende tauchen die Enten ab, springen unsichtbar zurück an den Anfang und tauchen dort wieder auf. */
@keyframes enten-schwimmen {
  0% { transform: translateX(90px); }
  86% { transform: translateX(-34px); }
  93.9% { transform: translateX(-38px); }
  94%, 100% { transform: translateX(90px); }
}
@keyframes ente-tauchen {
  0%, 83% { transform: translateY(0) rotate(0deg); }
  86% { transform: translateY(2px) rotate(-26deg); }
  89%, 95.5% { transform: translateY(44px) rotate(-38deg); }
  95.6% { transform: translateY(44px) rotate(0deg); }
  98.6% { transform: translateY(-2px) rotate(0deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes ente-kreis {
  0%, 85% { opacity: 0; transform: scale(.3); }
  87% { opacity: .95; transform: scale(.7); }
  92%, 95.4% { opacity: 0; transform: scale(1.6); }
  95.5% { opacity: 0; transform: scale(.3); }
  97.5% { opacity: .95; transform: scale(.75); }
  100% { opacity: 0; transform: scale(1.5); }
}
.seerose-blatt { fill: var(--seerose); stroke-width: 1.8 !important; }
.seerose-ader { fill: none; stroke: var(--seerose-ader) !important; stroke-width: 1.4 !important; }
.seerose-bluete { fill: var(--bluete-2); stroke-width: 1.4 !important; }
.stein-welle { fill: none; stroke: var(--land-welle) !important; stroke-width: 2 !important; }
.rampe-wand { fill: var(--stein-schatten); }

/* Scheunentor: Flügel klappen an die Wand, dahinter steigt abwechselnd Schaf oder Kuh auf. Beim Schließen taucht
   das Tier zuerst ab, dann gehen die Flügel zu. */
.tor-innen { fill: var(--tor-dunkel); }
.tor-fluegel { transform-box: fill-box; transition: transform .38s cubic-bezier(.5, 0, .75, 0) .22s; }
.tor-links { transform-origin: 0% 50%; }
.tor-rechts { transform-origin: 100% 50%; }
.hof.tor-offen .tor-fluegel { transform: scaleX(-.72); transition: transform .5s var(--weich); }
.tor-tier { transform: translateY(46px); transition: transform .26s ease-in; }
.hof.tor-offen .tor-tier { transform: translateY(1px); transition: transform .55s var(--federn) .24s; }
.hof:not(.zeigt-kuh) .tier-kuh, .hof.zeigt-kuh .tier-schaf { display: none; }
.tor-tier :is(path, circle, ellipse) { stroke-width: 1.8 !important; }
.kuh-fell { fill: var(--kuh); }
.kuh-fleck { fill: var(--kuh-fleck); stroke: none !important; }
.kuh-horn { fill: var(--kuh-horn); }
.kuh-maul { fill: var(--kuh-maul); }
.kuh-punkt { fill: var(--linie); stroke: none !important; }

/* Dorf: Fenster gehen Haus für Haus an und wieder aus; im Dunkeln erst kurz aus, dann heller als vorher. */
.dorf .fenster-licht { stroke-width: 2.4 !important; }
.dorf.licht-an .fenster-licht { animation: dorf-licht 3s ease-in-out calc(var(--i, 0) * .16s) both; }
/* Die Häuser sind auf gut ein Drittel verkleinert; der Schein wird mitskaliert und ist deshalb so groß angesetzt. */
@keyframes dorf-licht {
  0%, 100% { fill: var(--fenster); }
  12% { fill: var(--dorf-zwischen); filter: none; }
  26%, 82% { fill: var(--dorf-an); filter: drop-shadow(0 0 10px rgb(255, 200, 90)) drop-shadow(0 0 26px rgb(255, 170, 50)); }
}
/* Dazu ein warmer Lichtschein über dem ganzen Dorf, damit die Rückmeldung auch bei Tag zu sehen ist. */
.dorf-schein { fill: url(#laterne-glanz); stroke: none !important; opacity: 0; pointer-events: none; }
.dorf.licht-an .dorf-schein { animation: dorf-schein 3.4s ease-in-out both; }
@keyframes dorf-schein { 0%, 100% { opacity: 0; } 25%, 80% { opacity: .85; } }

.busch-koerper { fill: var(--land-baum); }
.busch-2 { fill: var(--land-baum-2); }
.busch-licht { fill: none; stroke: rgba(255, 255, 255, .45) !important; stroke-width: 3 !important; }
.beere { fill: var(--offline); stroke-width: 1.2 !important; }
.stein-dunkel { fill: var(--stein-schatten); }
.stein-hell { fill: var(--stein); stroke: none !important; }
.schilf { transform-box: fill-box; transform-origin: 50% 100%; animation: baum-wiegen var(--wiegen-dauer) ease-in-out infinite alternate; animation-delay: var(--v, 0s); }
.schilf-halm { fill: none; stroke: var(--land-baum-2) !important; stroke-width: 2.6 !important; }
.schilf-kolben { fill: var(--land-stamm); stroke-width: 1.6 !important; }
.tuff { fill: var(--land-huegel); stroke-width: 2 !important; }
.bluete { stroke-width: 1.3 !important; }
.bluete-1 { fill: var(--bluete-1); }
.bluete-2 { fill: var(--bluete-2); }
.bluete-3 { fill: var(--bluete-3); }
.bluete-mitte { fill: var(--sonne); stroke: none !important; }
.regen-pfuetze { fill: var(--land-wasser); stroke-width: 1.6 !important; opacity: 0; transition: opacity 1.2s ease; }
.regen-ringe { display: none; }
.regen-ringe ellipse {
  fill: none; stroke: var(--regen-ring) !important; stroke-width: 1.5 !important; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: 50% 50%; opacity: 0;
  animation: regen-ring 1.9s ease-out infinite; animation-delay: var(--v, 0s);
}
@keyframes regen-ring { 0% { transform: scale(.12); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.treffer { fill: transparent; stroke: none !important; }
.landschaft [data-deko] { pointer-events: auto; cursor: pointer; }

/* Szene (nur breite Bildschirme): app.js verteilt die Figuren einzeln auf die freien Flächen; Anker = Füße.
   Nur der Ballon ordnet seine Figuren selbst als Reihe im Korb an. */
/* Auf hohen, schmalen Bildschirmen (Tablet hochkant) wird das Land flacher: Sonst zeigt der Ausschnitt fast nur
   den Fluss, und die Kategorien hätten links und rechts keinen Platz. */
.buehne.szene-modus {
  --land: clamp(320px, calc(100svh - var(--szene-text, 420px) + 70px), min(820px, 46vw + 260px));
  padding-bottom: calc(var(--land) - 40px);
}
/* Hochkant reicht die Breite nicht für alles: Der Ausschnitt umfasst dann gut 1300 Einheiten, von der Mühle bis
   zur Scheune, statt beide anzuschneiden (Höhe 53vw entspricht 1320 der 1600 Einheiten). Darüber bliebe ein hohes,
   leeres Himmelsband; die Bühne ist deshalb nur wenig höher als ihr Inhalt. */
@media (orientation: portrait) {
  :root:not(.ist-teilansicht) .buehne.szene-modus { --land: clamp(300px, calc(100svh - var(--szene-text, 420px) + 70px), max(400px, 53vw)); }
}
/* Die Startseite zeigt im ersten Bildschirm genau die Szene, die Knöpfe stehen am unteren Rand. Die Landschaft darf
   70 px unter die Botschaft reichen, dort ist sie noch Himmel und ferne Hügel. */
:root:not(.ist-teilansicht) .buehne:is(.szene-modus, .muehlen-modus) { height: 100svh; min-height: 0; }
.buehne.szene-modus .botschaft { gap: 14px; padding-top: 4px; }
/* Der Textblock reicht über den Horizont; nur die Texte selbst fangen Klicks, Kraftwerk und Dorf dahinter bleiben klickbar. */
.buehne.szene-modus .botschaft { pointer-events: none; }
.buehne.szene-modus .botschaft > * { pointer-events: auto; }
.buehne.szene-modus .schlagzeile { max-width: 18ch; font-size: clamp(2.3rem, 1rem + 3vw, 4.6rem); }
.buehne.szene-modus .crew { position: absolute; left: 0; right: 0; bottom: 0; height: var(--land); padding: 0; display: block; }
.huegel-schmuck { display: none; }
.zone { position: absolute; left: 0; top: 0; }
.zone:not(.zone-ballon) .crew-figur { position: absolute; margin: calc(var(--figur) * -1.3125) 0 0 calc(var(--figur) * -.5); }
.zone-ballon { transform: translate(-50%, -100%); }
.zone-schweben { position: relative; display: grid; justify-items: center; }
.zone-figuren { position: relative; display: grid; justify-items: center; }
.zone-reihe { display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--figur) * .06); }
.zone .crew-figur { width: var(--figur); }
.zone .crew-figur::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: -2px; height: 10%;
  border-radius: 50%; background: var(--linie); opacity: .16; z-index: -1;
}
/* Schilder liegen über allen Figuren; app.js wählt unter oder neben der vordersten Reihe einen freien Platz. */
.zone-schild {
  position: absolute; z-index: 800;
  padding: 3px 10px; border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); box-shadow: 0 2px 0 var(--linie);
  font-size: .74rem; font-weight: 800; white-space: nowrap; pointer-events: none;
  transition: translate .2s var(--weich), box-shadow .2s var(--weich);
}
/* Auf großen Bildschirmen wachsen die Schilder mit den Figuren (gleiche Rechnung in app.js, schildSchrift). */
.buehne.szene-modus .zone-schild { font-size: clamp(.74rem, .75vw, .94rem); padding: .2em .8em; }
.schild-unten { transform: translate(-50%, 6px); }
.schild-links { transform: translate(calc(-100% - 6px), -50%); }
.schild-rechts { transform: translate(6px, -50%); }
.schild-oben { transform: translate(-50%, calc(-100% - 6px)); }
/* Die Szene liegt über der Landschaft: nur Figuren, Requisiten und Schilder fangen Klicks ab, der Rest geht durch. */
.buehne.szene-modus .crew { pointer-events: none; }
.buehne.szene-modus :is(.crew-figur, .zone-schild) { pointer-events: auto; }
/* Hintere Figuren schauen zwischen den vorderen hervor. Getroffen wird deshalb nur, was gemalt ist; sonst öffnete ein
   Klick auf den sichtbaren Teil einer hinteren Figur über den leeren Rand der vorderen Box die falsche. */
:root:not(.ist-teilansicht) .buehne.szene-modus .zone:not(.zone-ballon) :is(.crew-figur, .crew-figur svg) { pointer-events: none; }
:root:not(.ist-teilansicht) .buehne.szene-modus .zone:not(.zone-ballon) .crew-figur svg * { pointer-events: visiblePainted; }
.buehne.szene-modus .ballon-huelle :is(path, circle) { pointer-events: auto; cursor: pointer; }
.buehne.szene-modus .zone-schild { cursor: pointer; }
.buehne.szene-modus .zone-schild:hover { translate: 0 -2px; box-shadow: 0 4px 0 var(--linie); }
.zone-stoss { position: relative; transform-origin: 50% 90%; transition: translate 1.6s var(--weich); }
.zone-ballon.brennt .zone-stoss { translate: 0 calc(var(--figur) * -.9); transition-duration: .9s; }
.ballon-flamme { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.3); transition: opacity .2s ease, transform .25s var(--weich); }
.zone-ballon.brennt .ballon-flamme { opacity: 1; transform: scale(1); }
.zone-ballon.brennt .flamme-innen { animation: flackern .14s ease-in-out infinite alternate; }
.flamme-aussen { fill: #ff8a3d; }
.flamme-innen { fill: #ffd23f; stroke-width: 1.6 !important; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flackern { from { transform: scale(.9, .85); } to { transform: scale(1.06, 1.1); } }

.szene-blasen { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: var(--land); pointer-events: none; }
.szene-blase {
  position: absolute; translate: -50% calc(-100% - 12px); transform-origin: 50% 100%;
  padding: 4px 12px; border: 2px solid var(--linie); border-radius: 14px;
  background: var(--karte); color: var(--text); box-shadow: 0 2px 0 var(--linie);
  font-family: var(--titel); font-weight: 700; font-size: .95rem; line-height: 1.2; white-space: nowrap;
  animation: blase 1.5s var(--weich) both;
}
.szene-blase::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 11px; height: 11px; margin-left: -6px;
  border: solid var(--linie); border-width: 0 2px 2px 0; background: var(--karte); transform: rotate(45deg);
}
@keyframes blase {
  0% { opacity: 0; transform: scale(.4); }
  14% { opacity: 1; transform: scale(1.06); }
  24%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(-8px) scale(.95); }
}
.gruppe.ist-markiert .gruppe-schalter { border-radius: 18px; animation: gruppe-markieren 2.4s var(--weich); }
@keyframes gruppe-markieren {
  0%, 35% { background: color-mix(in srgb, var(--marke) 16%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--marke) 16%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .zone-stoss { transition: none; }
  .zone-ballon.brennt .zone-stoss { translate: none; }
  .szene-blase { animation: none; }
}

.zone-ballon .zone-schweben { animation: schweben 5s ease-in-out infinite alternate; transform-origin: 50% 0; }
.zone-ballon .zone-figuren { z-index: 1; }
.ballon-huelle { width: calc(var(--figur) * 3.6); margin-bottom: calc(var(--figur) * -.35); overflow: visible; }
.ballon-stoff { fill: var(--ballon); }
.ballon-bahn { fill: none; stroke-width: 2 !important; }
.ballon-glanz { fill: none; stroke: rgba(255, 255, 255, .6) !important; stroke-width: 6 !important; }
.ballon-seil { fill: none; stroke-width: 1.8 !important; }
.ballon-huelle :is(path) { stroke: var(--linie); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ballon-korb { position: relative; z-index: 2; width: calc(100% + var(--figur) * .3); height: calc(var(--figur) * .55); margin-top: calc(var(--figur) * -.48); }
.ballon-korb path { stroke: var(--linie); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.korb { fill: var(--korb); }
.korb-flecht { fill: none; stroke: var(--korb-dunkel) !important; }
.korb-rand { fill: none; stroke-width: 4 !important; }
.zone-ballon .zone-schild { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); }


/* Stufen: wolkig = beeinträchtigt, regen = kleine Störung, sturm = großer Ausfall, baustelle = Wartung */
.buehne[data-wetter="wolkig"] :is(.landschaft, .crew) { --fluegel: 5s; --wiegen: 4.5deg; --wiegen-dauer: 2.8s; --welle: 1.3; --welle-dauer: 4s; --schaukeln: 3.5deg; --schaukel-dauer: 3s; --schweben: 9px; }
.buehne[data-wetter="wolkig"] .landschaft { filter: saturate(.9); }
.buehne[data-wetter="regen"] :is(.landschaft, .crew) { --fluegel: 1.9s; --wiegen: 8deg; --wiegen-dauer: 1.5s; --welle: 1.9; --welle-dauer: 2s; --schaukeln: 7deg; --schaukel-dauer: 1.8s; --schweben: 14px; }
.buehne[data-wetter="regen"] .landschaft { filter: saturate(.62) brightness(.88); }
.buehne[data-wetter="sturm"] :is(.landschaft, .crew) { --fluegel: .7s; --wiegen: 13deg; --wiegen-dauer: .9s; --welle: 2.7; --welle-dauer: 1.1s; --schaukeln: 12deg; --schaukel-dauer: 1.1s; --schweben: 22px; }
.buehne[data-wetter="sturm"] .landschaft { filter: saturate(.45) brightness(.72); }
.buehne[data-wetter="sturm"] .baum-kippt .baum-dreh { transform: rotate(84deg); }
.buehne[data-wetter="sturm"] .baum-kippt .baum-wipfel { animation: none; }
.buehne[data-wetter="sturm"] .fb3 { opacity: 0; display: none; }
.buehne[data-wetter="sturm"] .dampf { display: none; }
.buehne[data-wetter="baustelle"] .fluegel,
.buehne[data-wetter="baustelle"] .dampf circle { animation-play-state: paused; }
.buehne[data-wetter="baustelle"] .geruest { opacity: 1; }
/* Regen (app.js, regenZeichnen): eine Ebene über die ganze Bühne von der Oberkante bis zum Boden, über der
   Landschaft (2) und unter Figuren (4), Texten (5) und Kopfzeile (6). Die Ebenen werden per skewX geneigt; damit
   die Unterkante links nicht leer läuft, reichen sie um (Höhe + 2 Kacheln) × Neigung nach links (100cqh = Höhe). */
.regen {
  --neigung: 9deg; --schraeg: .16; --boe: 0;
  position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none;
  container-type: size;
}
.regen[hidden] { display: none; }
.regen[data-wetter="sturm"] { --neigung: 19deg; --schraeg: .35; --boe: .13; }
.regen-boe { position: absolute; inset: 0; transform-origin: 50% 0; }
.regen[data-wetter="sturm"] .regen-boe { animation: regen-boe 9.4s ease-in-out infinite; }
.regen-ebene {
  --ueber: calc((100cqh + 2 * var(--kachel)) * (var(--schraeg) + var(--boe)) + 8px);
  position: absolute; top: calc(-1 * var(--kachel)); left: calc(-1 * var(--ueber));
  width: calc(100% + var(--ueber)); height: calc(100% + var(--kachel));
  overflow: visible; transform-origin: 0 0;
  transform: skewX(var(--neigung)); will-change: transform;
  animation: regen-fallen var(--dauer) linear infinite;
}
.regen-ebene:nth-child(1) { opacity: .5; }
.regen-ebene:nth-child(2) { opacity: .75; }
.regen-strich { fill: none; stroke: var(--regen); stroke-width: var(--dicke); stroke-linecap: round; }
.regen-strich.blass { stroke-opacity: .5; }
@keyframes regen-fallen { from { transform: skewX(var(--neigung)) translateY(0); } to { transform: skewX(var(--neigung)) translateY(var(--kachel)); } }
@keyframes regen-boe { 0%, 52%, 100% { transform: skewX(0deg); } 62% { transform: skewX(6deg); } 70% { transform: skewX(2.5deg); } 78% { transform: skewX(5deg); } 90% { transform: skewX(0deg); } }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .regen-ringe { display: inline; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .regen-pfuetze { opacity: 1; }
.buehne[data-wetter="sturm"] .regen-ringe ellipse { animation-duration: 1.3s; }
/* Wetterleuchten: zwei weiche Aufhellungen hinter den Wolken, je Ereignis höchstens zwei kurze Pulse und
   mehrere Sekunden Pause. Die Takte passen zum Blitz der Sturmwolke (4,2 s), damit nie mehr als drei Pulse in eine Sekunde fallen. */
.wetterleuchten { position: absolute; inset: 0; }
.wetterleuchten span { position: absolute; inset: 0; opacity: 0; }
.wetterleuchten span:first-child {
  background: radial-gradient(ellipse 60% 48% at 78% 12%, var(--leuchten), transparent 72%);
  animation: leuchten-doppelt 8.4s ease-out infinite;
}
.wetterleuchten span:last-child {
  background: radial-gradient(ellipse 55% 42% at 22% 18%, var(--leuchten), transparent 70%);
  animation: leuchten-fern 12.6s ease-out infinite;
}
@keyframes leuchten-doppelt { 0%, 42%, 100% { opacity: 0; } 43.4% { opacity: .85; } 44.6% { opacity: .25; } 45.8% { opacity: .6; } 51% { opacity: 0; } }
@keyframes leuchten-fern { 0%, 44%, 100% { opacity: 0; } 45.4% { opacity: .5; } 50% { opacity: 0; } }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .landschaft { --laterne-glas: #ffd36b; --laterne-schein: .5; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .schaf { transform: translate(var(--zx), var(--zy)); }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .schaf-kopf { animation: none; }
.buehne[data-wetter="regen"] .enten { --enten-dauer: 18s; }
.buehne[data-wetter="sturm"] .enten { opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .9s ease, transform .9s ease, visibility 0s .9s; }
.buehne[data-wetter="sturm"] .rauch { display: none; }
.buehne[data-wetter="baustelle"] .absperrung { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s 0s; }

@media (prefers-reduced-motion: reduce) {
  .fluegel, .wellen, .baum-wipfel, .gluehwurm, .dampf circle, .zone-schweben, .regen-ebene, .regen-boe, .regen-ringe ellipse,
  .rauch circle, .schaf-kopf, .ente-wippen, .enten-schwimmen, .ente-tauchen, .ente-kreis, .ente-bug, .schilf, .bake-lampe { animation: none !important; }
  .schaf, .enten, .tor-fluegel, .tor-tier { transition: none !important; }
  .dorf.licht-an .fenster-licht { animation: none; fill: var(--dorf-an); filter: drop-shadow(0 0 10px rgb(255, 200, 90)) drop-shadow(0 0 26px rgb(255, 170, 50)); }
  .dorf.licht-an .dorf-schein { animation: none; opacity: .85; }
  /* Ruhiger Regen: stehende, blassere Striche, ein Ring je Stelle und kein Wetterleuchten. */
  .regen { opacity: .6; }
  .regen-ringe ellipse { opacity: .45; transform: scale(.7); }
  .wetterleuchten { display: none; }
  .dampf circle { opacity: calc(var(--dampf-deckung) * .7); }
}
.huegel-schmuck { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.halm, .blume {
  position: absolute; transform: translateX(-50%); transform-origin: 50% 100%;
  animation: wiegen 3.4s ease-in-out infinite alternate; animation-delay: var(--v, 0s);
}
.halm { width: clamp(16px, 1.4vw, 24px); }
.blume { width: clamp(14px, 1.2vw, 20px); animation-duration: 4.2s; }
.halm svg, .blume svg { width: 100%; height: auto; overflow: visible; }
.halm path { fill: none; stroke: var(--linie); stroke-width: 2.2; stroke-linecap: round; }
.blume .stiel { fill: none; stroke: var(--linie); stroke-width: 2; stroke-linecap: round; }
.blume .bluete circle { fill: var(--bluete, #fff); stroke: var(--linie); stroke-width: 1.5; }
.blume .mitte { fill: var(--sonne); stroke: var(--linie); stroke-width: 1.5; }
@keyframes wiegen { from { transform: translateX(-50%) rotate(-6deg); } to { transform: translateX(-50%) rotate(6deg); } }

.buehne-wege {
  position: absolute; left: 50%; bottom: calc(var(--huegel) * .16); z-index: 5;
  display: flex; align-items: center; gap: 10px;
  transform: translateX(-50%);
}
.weiter {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 6px 14px 6px 18px;
  border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--text); box-shadow: 0 3px 0 var(--linie);
  font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: box-shadow .14s var(--weich), translate .14s var(--weich);
}
.weiter:hover { translate: 0 -1px; box-shadow: 0 4px 0 var(--linie); }
.weiter .ic { width: 18px; height: 18px; animation: nicken 1.6s ease-in-out infinite; }
.weiter-wartung { padding: 6px 18px 6px 14px; }
.weiter-wartung .ic { animation: none; color: var(--wartung); }
@keyframes nicken { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

.himmelskoerper {
  position: absolute; top: clamp(88px, 14svh, 160px); right: 8%;
  width: clamp(84px, 8.5vw, 150px);
  pointer-events: auto; cursor: pointer;
}
.himmelskoerper svg { width: 100%; height: auto; overflow: visible; }
.strahlen { transform-origin: 0 0; animation: drehen 48s linear infinite; }
.strahlen rect { fill: var(--sonne); stroke: var(--linie); stroke-width: 3; }
.scheibe { fill: var(--sonne); stroke: var(--linie); stroke-width: 3.5; }
.krater { fill: var(--krater); }
.strich { fill: none; stroke: var(--linie); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.tinte { fill: var(--linie); }
.wange { fill: var(--wange); opacity: .8; }
.helm { fill: #fff; stroke: var(--linie); stroke-width: 3; stroke-linejoin: round; }
.zzz { fill: var(--text); font: 700 15px var(--titel); opacity: 0; animation: zzz 5s ease-in-out infinite; }
.zzz:nth-of-type(2) { animation-delay: 1.6s; }

.wolke { position: absolute; left: 0; animation: ziehen 120s linear infinite; }
.wolke.w1 { top: var(--w1-top, 26%); display: var(--w1-zeigen, block); width: clamp(110px, 11vw, 210px); }
.wolke.w2 { top: var(--w2-top, 47%); display: var(--w2-zeigen, block); width: clamp(80px, 7vw, 132px); }
.wolke.w3 { top: var(--w3-top, 12%); display: var(--w3-zeigen, block); width: clamp(64px, 5.5vw, 104px); }
.wolke svg, .wolke-fest svg { width: 100%; height: auto; overflow: visible; }
.wolke-koerper { fill: var(--wolke); stroke: var(--linie); stroke-width: 3; stroke-linejoin: round; }
.wolke-fest { position: absolute; }
.wolke-vor-sonne { top: calc(clamp(88px, 14svh, 160px) + 44px); right: calc(8% + 36px); width: clamp(112px, 12vw, 200px); animation: schweben 7s ease-in-out infinite alternate; }
.regenwolke { top: clamp(84px, 12svh, 150px); right: 7%; width: clamp(132px, 14vw, 230px); animation: schweben 6s ease-in-out infinite alternate; }
.regenwolke.links { right: auto; left: 6%; top: calc(clamp(84px, 12svh, 150px) + 40px); width: clamp(100px, 10vw, 170px); animation-delay: -3s; }
.regenwolke .wolke-koerper { fill: var(--wolke-grau); }
.sturmwolke .wolke-koerper { fill: #8c94b3; }
:root[data-tageszeit="nacht"] .sturmwolke .wolke-koerper { fill: #2a2f63; }
.tropfen-linie { stroke: var(--regen-tropfen); stroke-width: 2.2; stroke-linecap: round; animation: regnen .9s linear infinite; }
.blitz { fill: var(--wackelig); stroke: var(--linie); stroke-width: 3; stroke-linejoin: round; opacity: 0; animation: blitzen 4.2s infinite; }
.stern { position: absolute; animation: funkeln 3.4s ease-in-out infinite; }
.stern svg { width: 100%; height: 100%; }
.stern path { fill: var(--stern); }
.voegel { position: absolute; top: var(--voegel-top, 20%); left: 0; width: clamp(40px, 3.6vw, 64px); animation: fliegen 44s linear infinite; animation-delay: -14s; }
.voegel svg { width: 100%; height: auto; overflow: visible; }
.vogel {
  fill: none; stroke: var(--linie); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: 50% 70%; animation: flattern .42s ease-in-out infinite alternate;
}
/* Sternschnuppe (app.js, schnuppeFliegen): Kopf am rechten Ende, der Schweif verläuft nach hinten ins Nichts.
   Lage, Richtung und Flug setzt das Skript; der Drehpunkt ist der Kopf. */
.sternschnuppe { position: absolute; height: 2px; opacity: 0; transform-origin: 100% 50%; pointer-events: none; }
.sternschnuppe span {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--schnuppe) 35%, transparent) 55%, var(--schnuppe));
}
.sternschnuppe::after {
  content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 4px 1px var(--schnuppe), 0 0 12px 3px color-mix(in srgb, var(--schnuppe) 45%, transparent);
}

@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes ziehen { from { transform: translateX(-240px); } to { transform: translateX(calc(100cqw + 40px)); } }
@keyframes schweben { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes regnen { from { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(16px); opacity: 0; } }
@keyframes blitzen { 0%, 84%, 100% { opacity: 0; } 86%, 91% { opacity: 1; } 88.5% { opacity: .25; } }
@keyframes funkeln { 0%, 100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -18px); } }
@keyframes fliegen { from { transform: translate(-100px, 0); } 45% { transform: translate(45cqw, -28px); } to { transform: translate(calc(100cqw + 100px), 14px); } }
@keyframes flattern { to { transform: scaleY(.35); } }
.figur { display: block; }
.figur svg { width: 100%; height: auto; overflow: visible; }
.figur-huelle { display: block; transform-origin: 50% 100%; animation: atmen 3.6s ease-in-out infinite alternate; animation-delay: var(--phase, 0s); }
.fg-koerper { stroke: var(--linie); stroke-width: 2.6; stroke-linejoin: round; }
.fg-schirm { stroke: var(--linie); stroke-width: 2.2; }
.fg-linie { fill: none; stroke: var(--linie); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fg-duenn { fill: none; stroke: var(--linie); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fg-tinte { fill: var(--linie); }
.fg-glanz { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.fg-schatten { fill: var(--linie); opacity: .16; }
.fg-licht { fill: url(#fg-licht); pointer-events: none; }
.fg-kante { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.fg-fassung { fill: rgba(27, 28, 58, .14); }
.fg-schirmlicht { fill: url(#fg-schirmlicht); pointer-events: none; }
.fg-glas { fill: #fff; opacity: .22; pointer-events: none; }
.fg-auge { fill: #1b1c3a; }
.fg-funke { fill: #fff; }
.fg-backe { fill: #ff8fa3; opacity: .6; }
.fg-gesichtslinie { fill: none; stroke: #1b1c3a; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.fg-arm-rand { fill: none; stroke: var(--linie); stroke-width: 7; stroke-linecap: round; }
.fg-arm { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.fg-panel { fill: rgba(27, 28, 58, .09); stroke: rgba(27, 28, 58, .18); stroke-width: 1.2; }
.fg-schlitz { fill: none; stroke: rgba(27, 28, 58, .45); stroke-width: 2; stroke-linecap: round; }
.fg-rauch circle { fill: #c3c8d8; stroke: var(--linie); stroke-width: 2; }
.fg-rauch { animation: rauchen 3s ease-in-out infinite alternate; }
@keyframes rauchen { from { transform: translateY(0); opacity: .95; } to { transform: translateY(-3px); opacity: .6; } }
.ist-offline .fg-arm { stroke: var(--figur-grau) !important; }
.fg-helm { fill: var(--helm); stroke: var(--linie); stroke-width: 2.6; stroke-linejoin: round; }
.fg-tropfen { fill: #8fd0ff; stroke: var(--linie); stroke-width: 2; animation: schwitzen 2.4s ease-in infinite; }
.fg-brief { fill: #fff; stroke: var(--linie); stroke-width: 2.4; stroke-linejoin: round; }
.fg-muetze { fill: var(--marke); stroke: var(--linie); stroke-width: 2.6; stroke-linejoin: round; }
.fg-blick { transition: transform .18s ease-out; }
.fg-augen { transform-box: fill-box; transform-origin: 50% 50%; animation: blinzeln 5.6s infinite; animation-delay: var(--blinz, 0s); }
.fg-led { stroke: var(--linie); stroke-width: 1.6; animation: flackern 3.3s steps(1, end) infinite; animation-delay: var(--blinz, 0s); }
.fg-halo { transform-box: fill-box; transform-origin: 50% 50%; animation: puls 2.6s ease-out infinite; animation-delay: var(--phase, 0s); }
.ist-online .fg-schirm, .ist-online .fg-lampe, .ist-online .fg-halo { fill: var(--online); }
.ist-wackelig .fg-schirm, .ist-wackelig .fg-lampe, .ist-wackelig .fg-halo { fill: var(--wackelig); }
.ist-offline .fg-schirm, .ist-offline .fg-lampe { fill: var(--offline); }
.ist-wartung .fg-schirm, .ist-wartung .fg-lampe, .ist-wartung .fg-halo { fill: var(--wartung); }
.ist-unbekannt .fg-schirm, .ist-unbekannt .fg-lampe { fill: var(--unbekannt); }
.ist-offline .fg-rumpf { fill: var(--figur-grau) !important; }
.ist-offline .fg-halo, .ist-unbekannt .fg-halo { display: none; }
.ist-wackelig .figur-huelle { animation: zittern 2.8s ease-in-out infinite; }
.ist-offline .figur-huelle { animation: none; transform: rotate(-9deg) translateY(3px); }
.ist-offline .fg-augen, .ist-wartung .fg-augen, .ist-unbekannt .fg-augen, .ist-offline .fg-led { animation: none; }

.zb-ton { stroke: var(--linie); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.zb-linie { fill: none; stroke: var(--linie); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zb-weissstrich { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.zb-gelb { fill: #ffd23f; }
.zb-orange { fill: #ff8a3d; }
.zb-pink { fill: #ff6f9c; }
.zb-blau { fill: #8fd0ff; }
.zb-violett { fill: #7a3cf2; }
.zb-violett-hell { fill: #b79bff; }
.zb-gruen { fill: #2fcf8e; }
.zb-braun { fill: #c68d5e; }
.zb-weiss { fill: #fff; }
.zb-grau { fill: #c9cddc; }
.zb-plesk { fill: var(--plesk); }
.zb-plesk-wort { fill: var(--plesk-wort); overflow: visible; }
.zb-plesk-wort path { stroke: var(--plesk-wort); stroke-width: .45; stroke-linejoin: round; }
.zb-tinte { fill: var(--linie); }
.zb-glas { fill-opacity: .85; }
.zb-funkel { transform-box: fill-box; transform-origin: 50% 50%; animation: funkeln 2.4s ease-in-out infinite; }
.zb-punkt { fill: var(--linie); animation: tippen 1.2s ease-in-out infinite; }
.zb-signal { fill: none; stroke: var(--linie); stroke-width: 1.8; stroke-linecap: round; animation: senden 1.8s ease-out infinite; }
.zb-schweben { animation: schwebchen 2.6s ease-in-out infinite alternate; }
.zb-rollen { animation: rollen 3.4s ease-in-out infinite alternate; }
.zb-ohr { transform-box: fill-box; transform-origin: 50% 0; animation: wackeln 3.2s ease-in-out infinite; }
.zb-drehen { transform-box: fill-box; transform-origin: 50% 50%; animation: globus 2.8s linear infinite; }
.zb-balken { transform-box: fill-box; transform-origin: 50% 100%; animation: diagramm 2.4s ease-in-out infinite alternate; }
.ist-offline .zb-punkt, .ist-offline .zb-signal, .ist-offline .zb-schweben, .ist-offline .zb-rollen,
.ist-offline .zb-ohr, .ist-offline .zb-drehen, .ist-offline .zb-balken { animation: none; }

@keyframes atmen { from { transform: translateY(0); } to { transform: translateY(-1.8px); } }
@keyframes blinzeln { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes zittern {
  0%, 78%, 100% { transform: translateX(0); }
  82% { transform: translateX(-1.4px) rotate(-1deg); }
  86% { transform: translateX(1.4px) rotate(1deg); }
  90% { transform: translateX(-1px); }
  94% { transform: translateX(.8px); }
}
@keyframes schwitzen { 0%, 40% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(7px); opacity: 0; } }
@keyframes flackern { 0%, 100% { opacity: 1; } 11% { opacity: .3; } 13% { opacity: 1; } 46% { opacity: .3; } 48% { opacity: 1; } 50% { opacity: .3; } 52% { opacity: 1; } }
@keyframes puls { from { transform: scale(.8); opacity: .55; } to { transform: scale(2.1); opacity: 0; } }
@keyframes tippen { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-2px); } }
@keyframes senden { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes schwebchen { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes rollen { from { transform: translateX(-2.5px); } to { transform: translateX(2.5px); } }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes globus { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }
@keyframes diagramm { from { transform: scaleY(.5); } to { transform: scaleY(1); } }

.inhalt, .fuss { width: min(1760px, 100% - 2 * var(--rand)); margin-inline: auto; }

.hinweise { display: grid; gap: 16px; margin-top: 36px; }
.hinweise:empty { display: none; }
.hinweis {
  overflow: hidden;
  border: 2px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten);
}
.hinweis::before {
  content: ''; display: block; height: 14px; border-bottom: 2px solid var(--linie);
  background: repeating-linear-gradient(-45deg, var(--wackelig) 0 14px, var(--linie) 14px 28px);
  background-size: 40px 14px; animation: band 1.6s linear infinite;
}
.hinweis.ist-geplant::before { background-image: repeating-linear-gradient(-45deg, var(--wartung) 0 14px, var(--karte) 14px 28px); animation: none; }
@keyframes band { to { background-position: 40px 0; } }
.hinweis-inhalt { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px 18px; }
.hinweis-symbol {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px;
  border: 2px solid var(--linie); border-radius: 14px; background: var(--wartung); color: var(--auf-farbe);
}
.hinweis-symbol .ic { width: 24px; height: 24px; }
.hinweis h2 { font-family: var(--titel); font-weight: 600; font-size: 1.2rem; line-height: 1.25; }
.hinweis p { color: var(--text-2); margin-top: 4px; }
.hinweis .hinweis-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--text); }

/* Kartenstapel der Wartungen unter der Brücke (nur Desktop-Szene); app.js setzt left/top in Szenenkoordinaten. */
.szene-wartung { display: none; }
.buehne.szene-modus .szene-wartung:not([hidden]) {
  display: grid; position: absolute; z-index: 4; width: min(310px, 25vw); translate: -50% 0; cursor: pointer;
}
.buehne.szene-modus .szene-wartung.passt-nicht { display: none; }
/* Den Fokus zeigt das Auffächern; Safari wertet auch den Klick als :focus-visible, ein Rahmen bliebe dann stehen. */
.szene-wartung:focus, .szene-wartung:focus-visible { outline: none; }
.sw-karte {
  grid-area: 1 / 1; z-index: calc(4 - var(--i));
  transform: translate(calc(var(--i) * 9px), calc(var(--i) * -8px)) rotate(calc(var(--i) * 2deg));
  transform-origin: 50% 100%; transition: transform .35s var(--weich);
}
.szene-wartung:is(:hover, :focus-visible) .sw-karte { transform: translate(calc(var(--i) * 24px), calc(var(--i) * -20px)) rotate(calc(var(--i) * 4deg)); }
.swk {
  position: relative; display: flex; align-items: center; gap: 10px; height: 100%; overflow: hidden;
  padding: 13px 14px 10px 10px;
  border: 2px solid var(--linie); border-radius: 14px; background: var(--karte); box-shadow: 0 3px 0 var(--linie);
}
.sw-karte:not(:first-child) .swk { background: color-mix(in srgb, var(--karte) 94%, var(--linie)); }
.swk::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(-45deg, var(--wackelig) 0 7px, var(--linie) 7px 14px);
}
.swk.ist-geplant::before { background: repeating-linear-gradient(-45deg, var(--wartung) 0 7px, var(--karte) 7px 14px); }
.swk-symbol {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px;
  border: 2px solid var(--linie); border-radius: 10px; background: var(--wartung); color: var(--auf-farbe);
}
.swk.ist-geplant .swk-symbol { background: color-mix(in srgb, var(--wartung) 20%, var(--karte)); color: var(--wartung); }
.swk-symbol .ic { width: 17px; height: 17px; }
.swk-text { display: grid; min-width: 0; gap: 1px; }
.swk-art { color: var(--text-2); font-size: .72rem; font-weight: 700; }
.swk-titel { overflow: hidden; font-family: var(--titel); font-weight: 600; font-size: .94rem; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.swk-zeit { color: var(--text); font-size: .76rem; font-weight: 600; }
.sw-mehr {
  position: absolute; top: -11px; right: -12px; z-index: 1; padding: 0 9px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--wartung); color: var(--auf-farbe);
  box-shadow: 0 2px 0 var(--linie); font-weight: 700; font-size: .7rem; line-height: 1.6; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .sw-karte { transition: none; } }

.gruppen { display: grid; gap: 48px; margin-top: 48px; }
.suche { display: grid; gap: 8px; margin-top: 36px; }
.ist-teilansicht .suche { display: none; }
.suche-feld {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 3px 8px 3px 14px;
  border: 2px solid var(--linie); border-radius: 14px; background: var(--karte); box-shadow: 0 2px 0 var(--linie);
  cursor: text; transition: box-shadow .14s var(--weich), translate .14s var(--weich);
}
/* Fokus ohne Rahmen: Das Feld hebt sich leicht und die Lupe bekommt Farbe. */
.suche-feld:focus-within { translate: 0 -1px; box-shadow: 0 3px 0 var(--linie); }
.suche-feld:focus-within .ic { color: var(--text); }
.suche-feld .ic { flex: none; width: 20px; height: 20px; color: var(--text-2); }
.suche-feld input { flex: 1; min-width: 0; padding: 5px 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; font-size: .95rem; outline: none; }
.suche-feld input:focus-visible { outline: none; }
.suche-feld input::placeholder { color: var(--text-2); opacity: 1; font-weight: 500; }
.suche-taste {
  flex: none; padding: 0 8px; border: 2px solid color-mix(in srgb, var(--linie) 25%, transparent); border-radius: 8px;
  color: var(--text-2); font: inherit; font-weight: 700; font-size: .78rem; line-height: 1.5;
}
.suche-feld:focus-within .suche-taste { visibility: hidden; }
.suche-info { padding-left: 4px; color: var(--text-2); font-weight: 600; font-size: .88rem; }
.suche-info:empty { display: none; }
.such-aus, .gruppe.such-leer { display: none !important; }
.inhalt.sucht .gruppe-raster[hidden] { display: grid !important; }
.inhalt.sucht .dritt-inhalt[hidden] { display: block !important; }
@media (max-width: 759.98px) { .suche { margin-top: 28px; } .suche-taste { display: none; } }
.gruppen-hinweis { color: var(--text-2); font-weight: 600; text-align: center; }
.gruppe-kopf { font-size: inherit; }
.gruppe-schalter {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 4px 4px 4px 2px; border: 0; background: none; text-align: left;
}
.gruppe-name { font-family: var(--titel); font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
.gruppe-anzahl {
  display: inline-grid; place-items: center; min-width: 32px; height: 28px; padding: 0 8px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--karte);
  font-weight: 800; font-size: .85rem;
}
.gruppe-lage { margin-left: auto; color: var(--text-2); font-weight: 600; font-size: .92rem; }
.gruppe-lage.hat-problem { color: var(--text); }
.gruppe-pfeil {
  width: 34px; height: 34px; padding: 6px;
  border: 2px solid var(--linie); border-radius: 50%; background: var(--karte);
  transition: transform .3s var(--federn);
}
.gruppe-schalter[aria-expanded="false"] .gruppe-pfeil { transform: rotate(-90deg); }
.gruppe-raster {
  display: grid; gap: clamp(14px, 1.3vw, 22px); margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
}

.karte {
  position: relative; container-type: inline-size;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px 18px;
  border: 2px solid var(--linie); border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten);
  transition:
    transform .18s var(--weich),
    box-shadow .18s var(--weich),
    opacity .5s var(--weich) var(--v, 0s),
    translate .75s var(--federn) var(--v, 0s);
}
.enthuellen .karte:not(.da) { opacity: 0; translate: 0 30px; }
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.karte:has(.karte-oeffnen:active) { transform: translateY(2px); box-shadow: 0 2px 0 var(--linie); }
.karte.ist-offline { background: color-mix(in srgb, var(--offline) 9%, var(--karte)); }
.karte.ist-wackelig { background: color-mix(in srgb, var(--wackelig) 12%, var(--karte)); }
.karte.ist-wartung { background: color-mix(in srgb, var(--wartung) 10%, var(--karte)); }
.karte.hat-gewechselt { animation: anstupsen .7s var(--federn); }
@keyframes anstupsen { 30% { transform: translateY(-6px) rotate(-.6deg); } 60% { transform: translateY(1px) rotate(.3deg); } }

.karte-oeffnen { position: absolute; inset: 0; z-index: 1; border: 0; border-radius: inherit; background: none; }
.karte-oeffnen:focus-visible { outline-offset: 4px; border-radius: var(--radius); }
.karte-kopf { display: flex; align-items: center; gap: 12px; }
.karte-figur { flex: none; width: 46px; }
.karte-titel { flex: 1; min-width: 0; }
.karte-titel h3 {
  font-family: var(--titel); font-weight: 600; font-size: 1.22rem; line-height: 1.2;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.karte-ort { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-2); font-size: .86rem; font-weight: 500; }
.karte-ort span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.karte-ort .ic { width: 15px; height: 15px; }
.karte-text { color: var(--text-2); font-size: .93rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.plakette {
  flex: none; display: inline-flex; align-items: center;
  padding: 3px 11px; border: 2px solid var(--linie); border-radius: 999px;
  background: var(--unbekannt); color: var(--auf-farbe);
  font-weight: 800; font-size: .78rem; letter-spacing: .01em;
}
.plakette.ist-online { background: var(--online); }
.plakette.ist-wackelig { background: var(--wackelig); }
.plakette.ist-offline { background: var(--offline); }
.plakette.ist-wartung { background: var(--wartung); }

.werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wert { display: grid; gap: 5px; }
.wert-kopf { display: flex; justify-content: space-between; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.wert-kopf strong { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.saft { height: 12px; overflow: hidden; border: 2px solid var(--linie); border-radius: 999px; background: var(--flaeche); }
.saft span { display: block; height: 100%; border-radius: 999px; background: var(--online); transition: width .8s var(--weich); }
.saft .stufe-wackelig { background: var(--wackelig); }
.saft .stufe-offline { background: var(--offline); }
.werte-knapp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; font-size: .88rem; font-weight: 600; color: var(--text-2); }
.werte-knapp > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.werte-knapp .ic { width: 17px; height: 17px; }
.werte-knapp strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* Unten ausgerichtet, damit die Leisten nebeneinanderliegender Karten auf einer Höhe stehen */
.verlauf { position: relative; z-index: 2; margin-top: auto; }
.verlauf-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.verlauf-kopf strong { font-family: var(--titel); font-weight: 600; font-size: 1.08rem; color: var(--text); font-variant-numeric: tabular-nums; }
.leiste {
  display: flex; gap: 1px; height: 32px; padding: 3px;
  border: 2px solid var(--linie); border-radius: 11px; background: var(--karte);
  touch-action: pan-y; cursor: crosshair;
}
@container (min-width: 460px) { .leiste { gap: 2px; } }
.tag { flex: 1 1 0; min-width: 0; border-radius: 3px; background: var(--leer); transform-origin: 50% 100%; transition: transform .12s var(--federn); }
.tag.ok { background: var(--online); }
.tag.leicht { background: linear-gradient(var(--wackelig) 0 32%, var(--online) 32%); }
.tag.wackelig { background: var(--wackelig); }
.tag.stoerung { background: var(--stoerung); }
.tag.ausfall { background: var(--offline); }
.tag.wartung { background: var(--wartung); }
.tag.heute { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 6px); }
.tag.aktiv { transform: scaleY(1.14); box-shadow: 0 0 0 1.5px var(--linie); }
.leiste.wachsen .tag { animation: wachsen .55s var(--federn) backwards; animation-delay: calc(var(--i, 0) * 5ms); }
@keyframes wachsen { from { transform: scaleY(0); } }

/* Drittanbieter in zwei Zonen: oben die Anbieter mit mehreren Teildiensten in gleich gebauten Kacheln
   (freie Plätze als Andeutung), darunter die mit einem Teil als kompakte Kacheln. Die Plakette steht überall oben rechts. */
.dritt { margin-top: 56px; }
.dritt[hidden], .ist-teilansicht .dritt { display: none !important; }
.dritt-inhalt { container: dritt / inline-size; }
.dritt-vorspann {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 28px;
  margin-top: 6px;
}
.dritt-text { max-width: 70ch; color: var(--text-2); font-size: .92rem; }
.dritt-stand {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dritt-stand .ic { width: 15px; height: 15px; }
.dritt-raster { --luft: 16px; display: grid; gap: var(--luft); margin: 16px 0 0; padding: 0; list-style: none; }
.dritt-raster + .dritt-raster { margin-top: 24px; }
.dritt-raster.ist-mehrteilig { grid-template-columns: minmax(0, 1fr); }
/* max() deckelt die Spaltenzahl (2, ab 1240 px 4), auto-fit zieht wenige Kacheln auf die volle Breite. */
@container dritt (min-width: 640px) {
  .dritt-raster.ist-mehrteilig { grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 16px) / 2)), 1fr)); }
}
@container dritt (min-width: 1240px) {
  .dritt-raster.ist-mehrteilig { grid-template-columns: repeat(auto-fit, minmax(max(280px, calc((100% - 48px) / 4)), 1fr)); }
}
/* Flex statt Grid: Eine unvollständige letzte Reihe wird gleichmäßig breiter statt Lücken zu lassen. */
.dritt-raster.ist-einteilig { --spalten-max: 1; display: flex; flex-wrap: wrap; }
.dritt-raster.ist-einteilig > .dritt-kachel { flex: 1 1 230px; }
@container dritt (min-width: 640px) { .dritt-raster.ist-einteilig { --spalten-max: 3; } }
@container dritt (min-width: 1240px) { .dritt-raster.ist-einteilig { --spalten-max: 5; } }
@supports (width: calc(round(up, 5 / 3, 1) * 1px)) {
  /* Gleichmäßig auf die nötigen Reihen verteilt, fünf Kacheln also 3 + 2 statt 2 + 2 + 1 oder 4 + 1 (--anzahl setzt app.js).
     Das abgezogene Pixel verhindert, dass ein Rundungsrest eine Kachel in die nächste Reihe schiebt. */
  .dritt-raster.ist-einteilig > .dritt-kachel {
    --reihen: round(up, var(--anzahl, 1) / var(--spalten-max), 1);
    --spalten: round(up, var(--anzahl, 1) / var(--reihen), 1);
    flex-basis: calc((100% - (var(--spalten) - 1) * var(--luft)) / var(--spalten) - 1px);
  }
}
.dritt-kachel {
  --akzent: var(--unbekannt);
  --kante: color-mix(in srgb, var(--linie) 13%, transparent);
  --toenung: 9%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 14px;
  padding: 14px 16px;
  border: 1px solid var(--kante); border-radius: 18px;
  background: var(--karte);
  box-shadow: 0 1px 2px rgba(18, 20, 52, .06), 0 10px 24px -18px rgba(18, 20, 52, .35);
}
.ist-mehrteilig > .dritt-kachel { grid-template-rows: auto 1fr; }
@supports (grid-template-rows: subgrid) {
  /* Kopf und Teileliste nebeneinanderstehender Kacheln fluchten, auch wenn ein Zusatz umbricht. */
  .ist-mehrteilig > .dritt-kachel { grid-row: span 2; grid-template-rows: subgrid; }
}
.ist-einteilig > .dritt-kachel { grid-template-rows: auto 1fr; }
/* Nebeneinander sind Kompaktkacheln zu schmal für Logo, Name und Plakette in einer Zeile. Die Plakette bleibt
   trotzdem oben rechts wie bei den großen Kacheln, der Name rückt unter das Logo. */
@container dritt (min-width: 640px) {
  .ist-einteilig > .dritt-kachel { grid-template: "logo plakette" auto "titel titel" auto "teile teile" 1fr / auto minmax(0, 1fr); }
  .ist-einteilig .dritt-logo { grid-area: logo; }
  .ist-einteilig .dritt-titel { grid-area: titel; }
  .ist-einteilig .plakette { grid-area: plakette; justify-self: end; }
  .ist-einteilig .dritt-teile { grid-area: teile; }
}
.dritt-kachel.ist-online { --akzent: var(--online); }
.dritt-kachel.ist-wackelig { --akzent: var(--wackelig); background: linear-gradient(180deg, color-mix(in srgb, var(--wackelig) var(--toenung), var(--karte)), var(--karte) 70%); }
.dritt-kachel.ist-offline { --akzent: var(--offline); background: linear-gradient(180deg, color-mix(in srgb, var(--offline) var(--toenung), var(--karte)), var(--karte) 70%); }
.dritt-kachel.ist-wartung { --akzent: var(--wartung); }
.dritt-kachel .plakette.ist-unbekannt { --akzent: var(--unbekannt); background: color-mix(in srgb, var(--unbekannt) 24%, var(--karte)); }
.dritt-logo {
  display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden;
  padding: var(--logo-innen, 0px); border-radius: 12px;
  background: var(--logo-grund, var(--flaeche));
  box-shadow: inset 0 0 0 1px rgba(18, 20, 52, .1);
}
.dritt-logo img { width: 100%; height: 100%; object-fit: contain; }
.dritt-logo.ist-monogramm { font-family: var(--titel); font-weight: 600; font-size: 1.25rem; color: var(--text); }
.dritt-titel { min-width: 0; }
.dritt-titel h3 {
  font-family: var(--titel); font-weight: 600; font-size: 1.1rem; line-height: 1.2;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.dritt-titel p { margin-top: 1px; color: var(--text-2); font-size: .82rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.dritt-zeit {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  color: var(--text-2); font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dritt-zeit .ic { width: 13px; height: 13px; color: var(--wackelig); }
.dritt-teile {
  grid-column: 1 / -1; align-self: stretch;
  display: flex; flex-direction: column;
  margin: 0; padding: 2px 12px; list-style: none;
  border-radius: 12px; background: var(--flaeche);
}
/* Streckt das Raster die Liste auf die Höhe der Nachbarkachel, verteilt sich der Rest auf alle Zeilen
   statt als leerer Streifen unter der letzten oder als Loch unter dem Kopf. */
.dritt-teil {
  --akzent: var(--unbekannt);
  flex: 1 0 auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; gap: 2px 10px;
  padding: 7px 0; font-size: .86rem; line-height: 1.3;
}
.dritt-teil + .dritt-teil { border-top: 1px solid var(--kante); }
.dritt-teil::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}
.dritt-teil.ist-online { --akzent: var(--online); }
.dritt-teil.ist-wackelig { --akzent: var(--wackelig); }
.dritt-teil.ist-offline { --akzent: var(--offline); }
.dritt-teil.ist-wartung { --akzent: var(--wartung); }
.dritt-teil-name { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; font-weight: 600; color: var(--text); }
.dritt-teil-status { color: var(--text-2); font-size: .78rem; font-weight: 600; white-space: nowrap; }
/* Hervorgehoben wird nur, was der Anbieter wirklich meldet; ein fehlender Stand ist kein Alarm. */
.dritt-teil:not(.ist-online, .ist-unbekannt, .ist-andeutung) .dritt-teil-status { color: var(--text); font-weight: 800; }
.dritt-teil-hinweis { grid-column: 2 / -1; color: var(--text-2); font-size: .78rem; text-wrap: pretty; }
/* Freie Plätze im Stil der Serverkarten: hohler Punkt statt Statusfarbe, schraffierte Leerstelle, kein Ladezustand.
   Der Ring ist kleiner als die Balken daneben und braucht deshalb etwas mehr Kontrast, um als Form lesbar zu bleiben.
   Der Hof gibt ihm dieselbe Gesamtgröße wie den echten Punkten, ohne die auto-Spalte aller Zeilen zu verbreitern. */
.dritt-teil.ist-andeutung::before {
  background: transparent; border: 1.5px solid color-mix(in srgb, var(--andeutung-text) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--andeutung) 55%, transparent);
}
/* Als Block hat der Name keine Textzeile mehr, an deren x-Höhe sich der Balken ausrichtet, und sitzt per Raster
   auf derselben Achse wie Ring und Strich. */
.dritt-teil.ist-andeutung .andeutung { display: block; width: 54%; }
.dritt-teil.ist-andeutung .dritt-teil-status { color: var(--andeutung-text); }
.dritt-teil + .dritt-teil.ist-andeutung { border-top-color: color-mix(in srgb, var(--kante) 55%, transparent); }
/* Einspaltig gibt es keine Nachbarkachel, deren Höhe aufgefüllt werden müsste. Ab zwei Spalten zählt nur die eigene
   Rasterreihe; welche Andeutung dafür gebraucht wird, rechnet app.js für beide Spaltenzahlen vor. */
@container dritt (max-width: 639.98px) { .dritt-teil.ist-andeutung:not(.ist-platzhalter) { display: none; } }
@container dritt (min-width: 640px) and (max-width: 1239.98px) { .dritt-teil.nur-vierspaltig { display: none; } }
@container dritt (min-width: 1240px) { .dritt-teil.nur-zweispaltig { display: none; } }
:root[data-theme="dark"] .dritt-kachel { --kante: rgba(255, 255, 255, .08); --toenung: 17%; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -18px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .dritt-kachel:is(.ist-wackelig, .ist-offline) { border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
:root[data-theme="dark"] .dritt-logo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dritt-kachel { --kante: rgba(255, 255, 255, .08); --toenung: 17%; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 26px -18px rgba(0, 0, 0, .8); }
  :root:not([data-theme="light"]) .dritt-kachel:is(.ist-wackelig, .ist-offline) { border-color: color-mix(in srgb, var(--akzent) 45%, transparent); }
  :root:not([data-theme="light"]) .dritt-logo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
}
@media (max-width: 620px) {
  .dritt { margin-top: 44px; }
  .dritt-raster { --luft: 12px; }
  .dritt-kachel { gap: 10px 12px; padding: 12px 14px; border-radius: 16px; }
  .dritt-logo { width: 40px; height: 40px; border-radius: 11px; }
  .dritt-teile { padding: 1px 10px; border-radius: 11px; }
  .dritt-teil { padding: 6px 0; font-size: .84rem; }
  .dritt-raster + .dritt-raster { margin-top: 12px; }
}

.abo-teaser {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  margin-top: 64px; padding: 24px clamp(20px, 2.4vw, 36px);
  border: 2px solid var(--linie); border-radius: 30px;
  background: var(--marke-hell); box-shadow: var(--schatten);
}
.abo-teaser-figur { width: 78px; }
.abo-teaser h2 { font-family: var(--titel); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.9rem); line-height: 1.15; }
.abo-teaser p { color: var(--text-2); margin-top: 4px; max-width: 60ch; }

.fuss {
  display: grid; justify-items: center; gap: 14px;
  margin-top: 56px; padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
  text-align: center; color: var(--text-2); font-size: .9rem;
}
.fuss > p { text-wrap: balance; }
.fuss-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fuss-link {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px;
  border: 2px solid transparent; border-radius: 999px; background: none;
  color: var(--text); font-weight: 700; font-size: .92rem; text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.fuss-link:hover { border-color: var(--linie); background: var(--karte); }
.fuss-link .ic { width: 18px; height: 18px; }

.skelett-raster { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.skelett { position: relative; overflow: hidden; height: 176px; border: 2px solid var(--linie); border-radius: var(--radius); background: var(--karte); box-shadow: var(--schatten); }
.skelett::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--leer) 70%, transparent) 50%, transparent 70%);
  animation: schimmern 1.4s linear infinite;
}
@keyframes schimmern { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.leiste-oben {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; gap: 14px;
  padding: max(8px, env(safe-area-inset-top)) var(--rand) 8px;
  border-bottom: 2.5px solid var(--linie);
  background: color-mix(in srgb, var(--karte) 90%, transparent);
  backdrop-filter: blur(10px);
  transform: translateY(-115%);
  transition: transform .4s var(--federn);
}
.leiste-oben.sichtbar { transform: none; }
.logo-klein { padding: 5px 11px; box-shadow: 0 2px 0 var(--linie); }
.logo-klein img { height: 18px; }
.oben-status { display: flex; align-items: center; gap: 9px; min-width: 0; font-family: var(--titel); font-weight: 600; font-size: 1.05rem; }
.oben-status span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oben-aktionen { display: flex; gap: 8px; margin-left: auto; }
.oben-aktionen .knopf-rund { width: 40px; min-height: 40px; }

.fenster {
  width: min(800px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain;
  border: 2.5px solid var(--linie); border-radius: 30px;
  background: var(--karte); color: var(--text);
  box-shadow: 0 8px 0 var(--linie);
}
.fenster::backdrop { background: var(--schleier); backdrop-filter: blur(3px); }
.griff { display: none; }
.fenster-kopf {
  position: relative; display: flex; align-items: flex-end; gap: 20px;
  padding: 26px 76px 22px 28px;
  border-bottom: 2.5px solid var(--linie);
  background: linear-gradient(180deg, var(--himmel-1), var(--himmel-2));
}
.fenster-kopf::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 0;
  background: var(--wiese-1); border-top: 2.5px solid var(--linie);
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
}
.fenster-kopf > * { position: relative; z-index: 1; }
.schliessen { position: absolute !important; top: 16px; right: 16px; z-index: 2 !important; }
.sb-figur { flex: none; width: 108px; margin-bottom: -4px; }
.sb-titel { min-width: 0; padding-bottom: 30px; }
.sb-titel h2 {
  font-family: var(--titel); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.05;
  color: #fff; -webkit-text-stroke: .12em var(--linie); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--linie);
  overflow-wrap: anywhere;
}
.sb-titel .plakette { margin-top: 12px; }
.fenster-rumpf { display: grid; gap: 26px; padding: 24px 28px 28px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

.abo-kopf { align-items: center; }
.abo-kopf .abo-figur { flex: none; width: 90px; margin-bottom: 4px; }
.abo-kopf h2 {
  font-family: var(--titel); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.05;
  color: #fff; -webkit-text-stroke: .12em var(--linie); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--linie);
}
.abo-kopf p { max-width: 44ch; margin-top: 8px; padding-bottom: 26px; font-weight: 600; }
.feld { display: grid; gap: 8px; min-width: 0; padding: 0; border: 0; }
.feld-name { padding: 0; font-family: var(--titel); font-weight: 600; font-size: 1.08rem; }
.feld input[type="email"] {
  width: 100%; min-height: 50px; padding: 10px 16px;
  border: 2px solid var(--linie); border-radius: 16px; background: var(--flaeche);
  font-size: 1rem; font-weight: 600; box-shadow: inset 0 3px 0 color-mix(in srgb, var(--linie) 10%, transparent);
}
.feld input[type="email"]::placeholder { color: var(--text-2); font-weight: 500; }
.feld input[type="email"]:focus-visible { outline-offset: 2px; border-radius: 16px; }
.wahl-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wahl-kopf span { font-size: .88rem; font-weight: 600; color: var(--text-2); }
.wahl-gruppe { display: grid; gap: 8px; }
.wahl-gruppe + .wahl-gruppe { margin-top: 12px; }
.wahl-gruppe-name { font-size: .8rem; font-weight: 800; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.wahl-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl { position: relative; }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 13px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--karte);
  font-size: .88rem; font-weight: 700; cursor: pointer; user-select: none;
  transition: background-color .15s, transform .12s var(--federn);
}
.wahl span::before {
  content: ''; flex: none; width: 14px; height: 14px;
  border: 2px solid var(--linie); border-radius: 5px; background: var(--karte);
}
.wahl input:checked + span { background: var(--online); color: var(--auf-farbe); }
.wahl input:checked + span::before {
  background: var(--linie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.wahl input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wahl span:active { transform: scale(.96); }
.schalter { display: flex; align-items: center; gap: 12px; min-height: 40px; font-weight: 600; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; pointer-events: none; }
.schalter-bahn {
  position: relative; flex: none; width: 52px; height: 30px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--leer);
  transition: background-color .2s;
}
.schalter-bahn::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border: 2px solid var(--linie); border-radius: 50%; background: #fff;
  transition: transform .3s var(--federn);
}
.schalter input:checked + .schalter-bahn { background: var(--online); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(22px); }
.schalter input:focus-visible + .schalter-bahn { outline: 3px solid var(--fokus); outline-offset: 2px; }
.formfehler { padding: 10px 14px; border: 2px solid var(--linie); border-radius: 14px; background: color-mix(in srgb, var(--offline) 22%, var(--karte)); font-weight: 700; }
.vorschau-hinweis { display: flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--text-2); }
.vorschau-hinweis .ic { width: 18px; height: 18px; }
.abo-fertig { display: grid; justify-items: center; gap: 12px; padding: 34px 28px 32px; text-align: center; }
.abo-fertig .abo-figur { width: 112px; }
.abo-fertig h2 { font-family: var(--titel); font-weight: 700; font-size: 1.8rem; }
.abo-fertig p { max-width: 42ch; color: var(--text-2); font-weight: 600; }

.tipp {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  max-width: 250px; padding: 8px 12px;
  border: 2px solid var(--linie); border-radius: 14px;
  background: var(--karte); color: var(--text); box-shadow: 0 3px 0 var(--linie);
  font-size: .84rem; font-weight: 500; line-height: 1.4;
  opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s var(--weich);
}
.tipp.sichtbar { opacity: 1; transform: none; }
.tipp strong { display: block; font-weight: 800; }
.tipp::after {
  content: ''; position: absolute; left: var(--spitze, 50%); bottom: -8px; width: 12px; height: 12px;
  background: var(--karte); border-right: 2px solid var(--linie); border-bottom: 2px solid var(--linie);
  transform: translateX(-50%) rotate(45deg);
}
.tipp[data-seite="unten"]::after { bottom: auto; top: -8px; transform: translateX(-50%) rotate(225deg); }
.toast {
  position: fixed; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); z-index: 1100;
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 10px 18px; border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--text); box-shadow: 0 4px 0 var(--linie);
  font-weight: 700; font-size: .92rem;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .2s, transform .35s var(--federn);
}
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { width: 18px; height: 18px; }

/* Prototyp-Auswahl, nur lokal (app.js, vorschauEinrichten): Der Knopf sitzt in der Kopfzeile, das Feld hängt am
   Body und wird unter dem Knopf ausgerichtet, sonst schnitte es der niedrige Szenenstreifen der Einzelansicht ab. */
.vorschau-knopf[aria-expanded="true"] { background: var(--text); color: var(--karte); }
.vorschau-feld {
  position: absolute; z-index: 950;
  display: grid; gap: 14px; width: min(560px, calc(100vw - 24px));
  padding: 16px 16px 14px; border: 2px solid var(--linie); border-radius: 20px;
  background: var(--karte); color: var(--text); box-shadow: 0 4px 0 var(--linie), var(--schatten-weich);
}
.vorschau-feld[hidden] { display: none; }
.vorschau-titel { margin: 0 0 8px; color: var(--text-2); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vorschau-feld .vl-filter { gap: 6px; }
.vorschau-feld .vl-filter-knopf { min-height: 32px; padding: 3px 12px; font-size: .84rem; }
.vorschau-fuss { margin: 0; color: var(--text-2); font-size: .78rem; }
/* In der Einzelansicht stehen Sonne und feste Wolken gleich links der Kopfknöpfe; der zusätzliche Prototyp-Knopf
   schiebt sie um seine Breite samt Abstand weiter (margin-right verschiebt absolut positionierte Elemente mit right). */
.hat-vorschau.ist-teilansicht .himmel > :is(.himmelskoerper, .wolke-fest) { margin-right: 136px; }
@media (max-width: 1000px) {
  .hat-vorschau.ist-teilansicht .himmel > :is(.himmelskoerper, .wolke-fest) { margin-right: 54px; }
}
@media (max-width: 1000px) {
  .vorschau-knopf { width: 44px; padding: 0; }
  .vorschau-knopf .knopf-text { display: none; }
  .vorschau-knopf .ic { width: 20px; height: 20px; }
}

@media (max-width: 1000px) {
  .himmelskoerper { top: 84px; right: 4%; width: 84px; }
  .wolke-vor-sonne { top: 116px; right: calc(4% + 26px); width: 108px; }
  .regenwolke { top: 80px; right: 3%; width: 140px; }
}
@media (max-width: 720px) {
  .abo-teaser { grid-template-columns: 1fr; justify-items: center; padding: 26px 20px; text-align: center; }
  .abo-teaser p { margin-inline: auto; }
  .gruppe-lage { display: none; }
  .gruppe-pfeil { margin-left: auto; }
}
@media (max-width: 620px) {
  .nur-gross { display: none !important; }
  .nur-mobil { display: inline-flex !important; }
  .kopf { padding: max(12px, env(safe-area-inset-top)) 14px 10px; }
  .logo { padding: 6px 11px; }
  .logo img { height: 19px; }
  .kopf-aktionen { gap: 8px; }
  .kopf-aktionen .knopf-text { display: none; }
  .kopf-aktionen .knopf { width: 42px; min-height: 42px; padding: 0; }
  .botschaft { gap: 14px; padding-top: 18px; }
  .lage { flex-direction: column; gap: 2px; padding: 9px 16px; }
  .crew { padding-top: 12px; }
  .himmelskoerper { top: 72px; right: 4%; width: 62px; }
  .wolke-vor-sonne { top: 98px; right: calc(4% + 16px); width: 84px; }
  .regenwolke { top: 68px; right: 3%; width: 106px; }
  .regenwolke.links { display: none; }
  .weiter { min-height: 38px; font-size: .86rem; }
  .buehne-wege { gap: 8px; }
  .gruppen { gap: 36px; margin-top: 36px; }
  .karte { padding: 14px 14px 16px; }
  .leiste { height: 30px; padding: 2px; }
  .tag { border-radius: 2px; }
  .oben-status { font-size: .98rem; }
  .oben-zahl { display: none; }
  .leiste-oben .logo-klein { display: none; }
  .fenster {
    width: 100vw; max-width: 100vw; max-height: 92dvh;
    margin: auto 0 0; border-radius: 28px 28px 0 0; border-bottom: 0; box-shadow: none;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .griff {
    display: block; position: absolute; top: 8px; left: 50%; z-index: 3;
    width: 46px; height: 5px; margin-left: -23px; border-radius: 999px;
    background: var(--linie); opacity: .4;
  }
  .fenster-kopf { padding: 28px 64px 18px 18px; gap: 14px; touch-action: none; }
  .sb-figur { width: 82px; }
  .fenster-rumpf { gap: 22px; padding: 20px 18px 26px; }
}
@media (hover: none) {
  .crew-figur:hover { translate: 0 0; }
  .karte:hover { transform: none; box-shadow: var(--schatten); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .wolke { animation: none; transform: translateX(var(--ruhepos, 20cqw)); }
  .voegel, .sternschnuppe { display: none; }
}

.fenster-breit { width: min(980px, calc(100vw - 24px)); }
.fenster-schmal { width: min(640px, calc(100vw - 24px)); }
.fenster-klein { width: min(460px, calc(100vw - 24px)); }
.sb-titel .kopf-text { max-width: 48ch; margin-top: 8px; font-weight: 600; color: var(--text); }

.feld input:is([type="text"], [type="url"], [type="password"], [type="number"], [type="datetime-local"]),
.feld select, .feld textarea, .feld-reihe input {
  width: 100%; min-height: 46px; padding: 9px 14px;
  border: 2px solid var(--linie); border-radius: 14px;
  background: var(--flaeche); color: var(--text);
  font-size: 1rem; font-weight: 600;
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--linie) 10%, transparent);
}
.feld textarea { min-height: 88px; resize: vertical; font-weight: 500; line-height: 1.45; }
.feld select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.feld :is(input, select, textarea):focus-visible { outline-offset: 2px; border-radius: 14px; }
.feld-reihe { display: flex; gap: 10px; }
.feld-reihe input { flex: 1; min-width: 0; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.reiter {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 16px 28px 2px;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter [role="tab"] {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  min-height: 40px; padding: 6px 14px;
  border: 2px solid var(--linie); border-radius: 999px;
  background: var(--karte); color: var(--text); box-shadow: 0 2px 0 var(--linie);
  font-weight: 700; font-size: .9rem;
  transition: background-color .15s, transform .12s var(--weich);
}
.reiter [role="tab"] .ic { width: 17px; height: 17px; }
.reiter [role="tab"]:hover { transform: translateY(-1px); }
.reiter [role="tab"][aria-selected="true"] { background: var(--marke); color: var(--auf-marke, #fff); }

.info-rumpf { gap: 0; }
.info-tafel { display: grid; gap: 12px; }
.info-tafel h3 { margin-top: 6px; font-family: var(--titel); font-weight: 600; font-size: 1.15rem; }
.info-tafel > p { max-width: 70ch; }
.info-liste { display: grid; gap: 8px; }
.info-liste > div {
  display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 4px 16px;
  padding: 10px 14px; border: 2px solid var(--linie); border-radius: 14px; background: var(--flaeche);
}
.info-liste dt { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.info-liste dd { color: var(--text-2); font-weight: 500; }
.info-farben dt i { flex: none; width: 16px; height: 16px; border: 2px solid var(--linie); border-radius: 4px; background: var(--leer); }
.info-farben .ok { background: var(--online); }
.info-farben .leicht { background: linear-gradient(var(--wackelig) 0 32%, var(--online) 32%); }
.info-farben .wackelig { background: var(--wackelig); }
.info-farben .stoerung { background: var(--stoerung); }
.info-farben .ausfall { background: var(--offline); }
.info-farben .wartung { background: var(--wartung); }
.info-figuren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-figur-karte {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 2px solid var(--linie); border-radius: 16px; background: var(--flaeche);
}
.info-figur-karte .figur { flex: none; width: 54px; }
.info-figur-karte p { margin-top: 2px; color: var(--text-2); font-size: .9rem; }
.info-formel {
  padding: 12px 16px; border: 2px dashed var(--linie); border-radius: 14px;
  font-family: var(--titel); font-weight: 600; text-align: center;
}
.info-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 2px solid var(--linie); border-radius: 14px; }
.info-tabelle th, .info-tabelle td { padding: 9px 14px; text-align: left; }
.info-tabelle th { background: var(--flaeche); font-size: .85rem; }
.info-tabelle td { border-top: 2px solid var(--linie); font-weight: 600; }

.willkommen-kopf { align-items: center; }
.willkommen-crew { display: flex; flex: none; align-items: flex-end; gap: 2px; margin-bottom: 4px; }
.willkommen-crew .figur { width: 52px; }
.willkommen-crew .figur:nth-child(2) { width: 62px; }
.willkommen-kopf h2 {
  font-family: var(--titel); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); line-height: 1.05;
  color: #fff; -webkit-text-stroke: .12em var(--linie); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--linie);
}
.willkommen-kopf p { max-width: 40ch; margin-top: 8px; padding-bottom: 26px; font-weight: 600; }
.design-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.design-option {
  display: grid; justify-items: center; gap: 4px;
  padding: 10px 10px 12px; border: 2px solid var(--linie); border-radius: 18px;
  background: var(--karte); box-shadow: 0 3px 0 var(--linie); text-align: center;
  transition: transform .14s var(--weich), background-color .15s;
}
.design-option:hover { transform: translateY(-1px); }
.design-option[aria-checked="true"] { background: var(--marke-hell); outline: 3px solid var(--marke); outline-offset: 2px; }
.design-bild { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 4px; border: 2px solid var(--linie); border-radius: 12px; }
.design-bild::before {
  content: ''; position: absolute; top: 14%; right: 14%; width: 26%; aspect-ratio: 1;
  border: 2px solid #1b1c3a; border-radius: 50%; background: #ffd23f;
}
.design-bild::after {
  content: ''; position: absolute; left: -12%; right: -12%; bottom: -34%; height: 58%;
  border: 2px solid #1b1c3a; border-radius: 50%; background: #8edb8c;
}
.design-hell { background: linear-gradient(#8fb4ff, #d3e3ff); }
.design-dunkel { background: radial-gradient(circle at 22% 30%, #fff4c2 0 2px, transparent 3px), radial-gradient(circle at 40% 18%, #fff4c2 0 2px, transparent 3px), linear-gradient(#0b1034, #2a3380); }
.design-dunkel::before { background: #ffe7a1; }
.design-dunkel::after { background: #2e7552; }
.design-auto { background: radial-gradient(circle at 24% 30%, #ffe7a1 0 11%, transparent 11.5%), linear-gradient(115deg, #a4c3ff 50%, #141a4d 50%); }
.design-auto::before { right: auto; left: 60%; }
.design-name { font-weight: 800; }
.design-text { font-size: .8rem; font-weight: 600; color: var(--text-2); }

.widget-buehne {
  display: grid; place-items: center; min-height: 220px; padding: 24px;
  border: 2px solid var(--linie); border-radius: 18px;
  background: conic-gradient(#262b52 25%, #1d2140 0 50%, #262b52 0 75%, #1d2140 0) 0 0 / 22px 22px;
}
.widget-buehne.ist-hell { background: conic-gradient(#e4e8f4 25%, #f6f7fc 0 50%, #e4e8f4 0 75%, #f6f7fc 0) 0 0 / 22px 22px; }
.widget-buehne iframe { max-width: 100%; border: 0; background: transparent; }
.widget-einstellungen { display: grid; gap: 16px; }
.segmente { display: flex; flex-wrap: wrap; gap: 8px; }
.segment {
  min-height: 38px; padding: 6px 15px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--text);
  font-weight: 700; font-size: .88rem;
  transition: background-color .15s, transform .12s var(--federn);
}
.segment:active { transform: scale(.96); }
.segment[aria-checked="true"] { background: var(--online); color: var(--auf-farbe); }
.farben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.farbfeld, .zahlfeld { display: flex; align-items: center; gap: 8px; }
.farbfeld input[type="text"] { flex: 1; min-width: 0; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .92rem; }
.farbfeld input[type="color"] {
  flex: none; width: 46px; height: 46px; padding: 0;
  border: 2px solid var(--linie); border-radius: 12px; background: none; cursor: pointer;
}
.farbfeld input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.farbfeld input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.farbfeld input[type="color"]::-moz-color-swatch { border: 0; border-radius: 7px; }
.zahlfeld input { max-width: 110px; }
.zahlfeld span { font-weight: 700; color: var(--text-2); }
.code-feld { display: grid; gap: 12px; padding: 14px; border: 2px solid var(--linie); border-radius: 16px; background: var(--flaeche); }
.code-feld code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; word-break: break-all; }
.code-feld .knopf { justify-self: start; }

.admin-abmelden { position: absolute !important; top: 18px; right: 72px; z-index: 2 !important; }
.admin-login { display: grid; gap: 14px; max-width: 440px; }
.admin-tafel { display: grid; gap: 22px; }
.admin-abschnitt { display: grid; gap: 12px; }
.admin-abschnitt h3 { font-family: var(--titel); font-weight: 600; font-size: 1.15rem; }
.admin-formular { padding: 18px; border: 2px solid var(--linie); border-radius: 18px; background: var(--flaeche); }
.admin-formular .feld :is(input:not([type="checkbox"]), select, textarea) { background: var(--karte); }
.admin-hinweis { color: var(--text-2); font-size: .9rem; font-weight: 500; }
.admin-hinweis-klein { align-self: center; color: var(--text-2); font-size: .8rem; font-weight: 600; }
.sortier-liste { display: grid; gap: 8px; padding: 0; list-style: none; }
.sortier-eintrag {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 6px; border: 2px solid var(--linie); border-radius: 14px;
  background: var(--karte); box-shadow: 0 2px 0 var(--linie); cursor: grab;
}
.sortier-eintrag.wird-gezogen { opacity: .45; cursor: grabbing; }
.griff-punkte { display: grid; flex: none; place-items: center; width: 24px; color: var(--text-2); }
.griff-punkte .ic { width: 18px; height: 18px; }
.sortier-name { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.sortier-knoepfe { display: flex; flex: none; gap: 6px; }
.knopf-klein { min-height: 36px; padding: .35em .85em; font-size: .85rem; box-shadow: 0 2px 0 var(--linie); }
.knopf-klein .ic { width: 17px; height: 17px; }
.knopf-rund.knopf-klein { width: 36px; padding: 0; }
.knopf-gefahr { background: var(--offline); color: var(--auf-farbe); }
.admin-marke {
  display: inline-flex; padding: 1px 8px; border: 2px solid var(--linie); border-radius: 999px;
  background: var(--marke-hell); color: var(--text); font-size: .7rem; font-weight: 800; white-space: nowrap;
}
.admin-marke.phase-laeuft { background: var(--wackelig); color: var(--auf-farbe); }
.admin-marke.phase-geplant { background: var(--wartung); color: var(--auf-farbe); }
.admin-marke.phase-vorbei { background: var(--leer); }
.admin-marke.marke-warnung { background: var(--wackelig); color: var(--auf-farbe); }
.admin-liste { display: grid; gap: 10px; }
.admin-eintrag {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 2px solid var(--linie); border-radius: 16px; background: var(--karte);
}
.admin-eintrag-text { display: grid; gap: 4px; min-width: 0; }
.admin-eintrag h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.admin-eintrag p { color: var(--text-2); font-size: .88rem; }
.admin-meta { display: flex; align-items: center; gap: 6px; }
.admin-meta .ic { flex: none; width: 15px; height: 15px; }
.admin-url { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8rem !important; word-break: break-all; }
.admin-eintrag-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-eintrag-fake { flex-wrap: wrap; }

.frage-rumpf { display: grid; gap: 18px; padding: 26px 24px 22px; }
.frage-text { font-weight: 600; font-size: 1.02rem; }
.frage-aktionen { justify-content: flex-end; }

.teilansicht { display: none; }
.ist-teilansicht :is(.gruppen, .abo-teaser, #hinweise, .nur-uebersicht, .fuss-links) { display: none !important; }

/* Liste aus index.php für Suchmaschinen und Besucher ohne JavaScript. Mit JavaScript liegt sie unter dem Vorlader
   und app.js entfernt sie, bevor er ausblendet. */
.systemliste {
  margin-top: 48px; padding: clamp(20px, 2.6vw, 34px);
  border: 1px solid var(--kante-fein); border-radius: var(--radius);
  background: var(--karte); box-shadow: var(--schatten-weich);
}
.systemliste > h2 { font-family: var(--titel); font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); line-height: 1.1; }
.systemliste-hinweis { max-width: 62ch; margin-top: 8px; color: var(--text-2); }
.systemliste-gruppen {
  display: grid; gap: 28px 44px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.systemliste h3 {
  padding-bottom: 8px; border-bottom: 1px solid var(--kante-fein);
  font-family: var(--titel); font-weight: 600; font-size: 1.2rem; line-height: 1.25;
}
.systemliste ul { display: grid; gap: 12px; margin-top: 14px; padding: 0; list-style: none; }
.systemliste li { display: grid; gap: 2px; }
.systemliste a {
  justify-self: start; font-weight: 700;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px;
}
.systemliste a:hover { text-decoration-color: currentColor; }
.systemliste a:focus-visible { outline-offset: 2px; border-radius: 4px; }
.ist-teilansicht .systemliste { display: none; }

@media (max-width: 620px) {
  .reiter { padding: 14px 18px 2px; }
  .feld-paar, .info-figuren { grid-template-columns: 1fr; }
  .info-liste > div { grid-template-columns: 1fr; }
  .design-wahl { gap: 8px; }
  .design-option { padding: 8px 6px 10px; }
  .farben { grid-template-columns: 1fr 1fr; }
  .admin-eintrag { flex-direction: column; }
  .admin-eintrag-knoepfe { justify-content: flex-start; }
  .admin-abmelden { top: 14px; right: 62px; }
  .willkommen-crew .figur { width: 40px; }
  .willkommen-crew .figur:nth-child(2) { width: 48px; }
}

.fuss-link .kurz { display: none; }

/* Muss hinter den Breiten der Fenster-Varianten stehen, sonst gewinnen diese auf dem Handy */
@media (max-width: 620px) {
  .fenster-breit, .fenster-schmal, .fenster-klein { width: 100vw; max-width: 100vw; }
  .fuss-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
  .fuss-link {
    flex-direction: column; justify-content: center; gap: 5px;
    min-width: 0; min-height: 62px; padding: 8px 2px;
    border-radius: 16px; font-size: .76rem; line-height: 1.1; text-align: center;
  }
  .fuss-link .ic { width: 22px; height: 22px; }
  .fuss-link .lang { display: none; }
  .fuss-link .kurz { display: inline; }
}

.wv-rumpf { gap: 22px; }
.wv-abschnitt { display: grid; gap: 10px; }
.wv-abschnitt h3 { display: flex; align-items: center; gap: 8px; font-family: var(--titel); font-weight: 600; font-size: 1.1rem; }
.wv-abschnitt h3 .wv-zahl { padding: 0 8px; border: 2px solid var(--linie); border-radius: 999px; background: var(--flaeche); font-family: inherit; font-size: .75rem; font-weight: 800; }
.wv-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wv-eintrag {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 14px 16px; border: 2px solid var(--linie); border-radius: 16px;
  background: var(--karte); box-shadow: 0 2px 0 var(--linie);
}
.wv-symbol { display: grid; place-items: center; width: 38px; height: 38px; border: 2px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.wv-symbol .ic { width: 20px; height: 20px; }
.wv-eintrag.phase-laeuft .wv-symbol { background: var(--wackelig); color: var(--auf-farbe); }
.wv-eintrag.phase-geplant .wv-symbol { background: var(--wartung); color: var(--auf-farbe); }
.wv-text { display: grid; gap: 5px; min-width: 0; }
.wv-text h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1rem; font-weight: 800; }
.wv-text p { color: var(--text-2); font-size: .9rem; overflow-wrap: anywhere; }
.wv-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-2); font-size: .84rem; font-weight: 600; }
.wv-meta span { display: inline-flex; align-items: center; gap: 5px; }
.wv-meta .ic { flex: none; width: 15px; height: 15px; }
.wv-mehr { justify-self: start; }
.wv-leer { padding: 18px; border: 2px dashed var(--linie); border-radius: 16px; color: var(--text-2); font-weight: 600; text-align: center; }

/* Verlauf: Filter, Zeitleiste nach Tagen, zusammengefasste ruhige Tage */
.vl-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.vl-filter-knopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 14px;
  border: 2px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--text); box-shadow: 0 2px 0 var(--linie);
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  transition: translate .14s var(--weich), box-shadow .14s var(--weich), background .14s ease, color .14s ease;
}
.vl-filter-knopf:hover { translate: 0 -1px; box-shadow: 0 3px 0 var(--linie); }
.vl-filter-knopf[aria-pressed="true"] { background: var(--text); color: var(--karte); }
.vl-zahl { padding: 0 7px; border-radius: 999px; background: var(--flaeche); color: var(--text); font-size: .74rem; line-height: 1.6; }
.vl-filter-knopf[aria-pressed="true"] .vl-zahl { background: color-mix(in srgb, var(--karte) 22%, transparent); color: inherit; }
/* Stufen eines Tages (app.js, vlStufe): Farbe für Kästchen, Legende und Punkt der Zeitleiste */
.vl-ruhig { --stufe: var(--online); }
.vl-wackelig { --stufe: var(--wackelig); }
.vl-ausfall { --stufe: var(--offline); }
.vl-wartung { --stufe: var(--wartung); }
.vl-laedt { --stufe: var(--leer); }

/* Bilanz: die letzten 30 Tage als Kästchenreihe, darunter Achse und Legende */
.vl-bilanz {
  display: grid; gap: 10px; padding: 16px 18px 14px;
  border: 2px solid var(--linie); border-radius: 20px; background: var(--karte); box-shadow: 0 3px 0 var(--linie);
}
.vl-bilanz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.vl-bilanz-kopf strong { font-family: var(--titel); font-size: 2.1rem; font-weight: 700; line-height: 1; }
.vl-bilanz-kopf span { color: var(--text-2); font-size: .95rem; font-weight: 700; }
.vl-streifen { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin: 4px 0 0; padding: 0; list-style: none; }
.vl-streifen li { display: flex; }
.vl-zelle {
  position: relative; display: block; width: 100%; height: 30px; padding: 0;
  border: 1.5px solid var(--linie); border-radius: 6px; background: var(--stufe); cursor: pointer;
  transition: translate .14s var(--weich), box-shadow .14s var(--weich);
}
button.vl-zelle:hover { translate: 0 -2px; box-shadow: 0 2px 0 var(--linie); }
.vl-zelle.ist-heute::after {
  content: ''; position: absolute; left: 50%; bottom: -9px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--text);
}
.vl-zelle.vl-laedt { cursor: default; animation: vl-laden 1s ease-in-out infinite alternate; }
@keyframes vl-laden { to { opacity: .4; } }
.vl-achse { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-2); font-size: .76rem; font-weight: 700; }
.vl-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: .78rem; font-weight: 700; }
.vl-legende li { display: inline-flex; align-items: center; gap: 6px; }
.vl-legende i { width: 11px; height: 11px; border: 1.5px solid var(--linie); border-radius: 3px; background: var(--stufe); }

/* Zeitleiste nach Tagen: je Tag eine Karte mit schlanken Zeilen */
.vl-tage { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vl-tag, .vl-ruhe { position: relative; padding-left: 32px; border-radius: 14px; }
.vl-tag::before, .vl-ruhe::before {
  content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.vl-tage > :first-child::before { top: 16px; }
.vl-tage > :last-child::before { bottom: calc(100% - 16px); }
.vl-tag-kopf { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 8px 0; font-family: var(--titel); font-weight: 600; font-size: 1.02rem; }
.vl-tag-kopf::before {
  content: ''; position: absolute; left: -28px; top: .18em; width: 16px; height: 16px;
  border: 2px solid var(--linie); border-radius: 50%; background: var(--stufe, var(--karte));
}
.vl-tag-kopf small { color: var(--text-2); font-family: var(--schrift); font-weight: 600; font-size: .8rem; }
.vl-tag-zahl { margin-left: auto; color: var(--text-2); font-family: var(--schrift); font-size: .78rem; font-weight: 700; }
.vl-ereignisse {
  display: grid; margin: 0 0 12px; padding: 0; list-style: none;
  border: 2px solid var(--linie); border-radius: 16px; background: var(--karte); overflow: hidden;
}
.vl-ereignis { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px 11px 12px; }
.vl-ereignis + .vl-ereignis { border-top: 1.5px dashed var(--kante-fein); }
.vl-symbol { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.vl-symbol .ic { width: 17px; height: 17px; }
.art-offline .vl-symbol { background: var(--offline); color: var(--auf-farbe); }
:is(.art-degraded, .art-dienst) .vl-symbol { background: var(--wackelig); color: var(--auf-farbe); }
.art-wartung .vl-symbol { background: var(--wartung); color: var(--auf-farbe); }
.vl-ereignis.ist-jetzt .vl-symbol { animation: vl-puls 1.6s ease-in-out infinite; }
@keyframes vl-puls { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--offline) 28%, transparent); } }
.vl-text { display: grid; gap: 1px; min-width: 0; }
.vl-text strong { font-weight: 800; font-size: .95rem; overflow-wrap: anywhere; }
.vl-meta { color: var(--text-2); font-size: .82rem; font-weight: 600; }
.vl-auch { color: var(--text-2); font-size: .78rem; }
.vl-dauer {
  padding: 3px 10px; border: 1.5px solid var(--linie); border-radius: 999px; background: var(--flaeche);
  font-size: .78rem; font-weight: 800; white-space: nowrap;
}
.art-offline .vl-dauer { background: color-mix(in srgb, var(--offline) 24%, var(--karte)); }
:is(.art-degraded, .art-dienst) .vl-dauer { background: color-mix(in srgb, var(--wackelig) 32%, var(--karte)); }
.art-wartung .vl-dauer { background: color-mix(in srgb, var(--wartung) 22%, var(--karte)); }
/* Die Namen einer Sammelzeile laufen unter Text und Dauer über die volle Breite, sonst brächen sie auf dem Handy um. */
.vl-chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: -4px; }
.vl-chip { padding: 1px 8px; border: 1.5px solid var(--kante-fein); border-radius: 999px; background: var(--flaeche); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.vl-chip b { color: var(--text-2); font-weight: 700; }
.vl-ruhe { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text-2); font-size: .88rem; font-weight: 600; }
.vl-ruhe .ic { position: absolute; left: 3px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--online); color: var(--auf-farbe); }
.vl-ruhe strong { color: var(--text); }
.vl-ruhe-zahl {
  margin-left: 4px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--online) 22%, var(--karte));
  color: var(--text); font-size: .74rem; font-weight: 800;
}
.vl-hinweis { color: var(--text-2); font-size: .82rem; }
.vl-markiert { animation: vl-markieren 1.8s ease; }
@keyframes vl-markieren { 0%, 35% { background: color-mix(in srgb, var(--fokus) 14%, transparent); } }
@media (max-width: 620px) {
  .vl-bilanz { padding: 14px 14px 12px; }
  .vl-bilanz-kopf strong { font-size: 1.8rem; }
  .vl-streifen { gap: 2px; }
  .vl-zelle { height: 26px; border-width: 1px; border-radius: 4px; }
  .vl-ereignis { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .vl-symbol { width: 28px; height: 28px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .vl-ereignis.ist-jetzt .vl-symbol, .vl-zelle.vl-laedt, .vl-markiert { animation: none; }
}
.vl-aelter { display: grid; gap: 10px; }
.vl-aelter summary { display: flex; align-items: center; gap: 8px; width: max-content; font-weight: 700; cursor: pointer; }
.vl-aelter[open] summary { margin-bottom: 10px; }

.sortier-gruppen { display: grid; gap: 14px; }
.sortier-gruppe { display: grid; gap: 8px; padding: 10px; border: 2px solid var(--linie); border-radius: 18px; background: var(--flaeche); }
.sortier-gruppe.wird-gezogen { opacity: .45; }
.sortier-gruppe-kopf { display: flex; align-items: center; gap: 10px; padding: 2px 0 2px 2px; cursor: grab; }
.sortier-gruppe-kopf h4 { flex: 1; min-width: 0; overflow: hidden; font-family: var(--titel); font-size: 1.05rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sortier-gruppe-kopf .admin-marke { margin-left: 6px; font-family: var(--text-schrift, inherit); }
.sortier-gruppe .sortier-liste { gap: 6px; }

.fake-bearbeiten { display: grid; gap: 12px; flex-basis: 100%; margin-top: 4px; padding: 14px; border: 2px solid var(--linie); border-radius: 14px; background: var(--flaeche); }
.fake-bearbeiten .feld :is(input, select) { background: var(--karte); }
.fake-bearbeiten .aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.extra-knapp { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; font-size: .84rem; font-weight: 600; color: var(--text-2); }
.extra-knapp .ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--online); }
.extra-knapp.extra-warnung, .extra-knapp.extra-fehler { padding: 6px 10px; border: 2px solid var(--linie); border-radius: 12px; color: var(--text); }
.extra-knapp.extra-warnung { background: color-mix(in srgb, var(--wackelig) 28%, var(--karte)); }
.extra-knapp.extra-fehler { background: color-mix(in srgb, var(--offline) 22%, var(--karte)); }
.extra-knapp.extra-warnung .ic, .extra-knapp.extra-fehler .ic { color: var(--text); }

html.laedt body { overflow: hidden; }
.vorlader { display: none; }
html.laedt .vorlader, .vorlader.geht {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 24px; background: linear-gradient(180deg, var(--himmel-1) 0%, var(--himmel-2) 85%);
  color: var(--text); text-align: center;
}
.vorlader.geht { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s; }
.vorlader-buehne { position: relative; display: grid; justify-items: center; width: 240px; padding-top: 34px; }
.vorlader-ringe { position: absolute; top: 36px; left: 50%; width: 150px; height: 150px; transform: translateX(-50%); }
.vorlader-ringe span {
  position: absolute; inset: 0; border: 3px solid var(--karte); border-radius: 50%; opacity: 0;
  animation: vl-ring 2.4s ease-out infinite;
}
.vorlader-ringe span:nth-child(2) { animation-delay: .8s; }
.vorlader-ringe span:nth-child(3) { animation-delay: 1.6s; }
.vorlader-springer { position: relative; z-index: 1; width: clamp(110px, 16vw, 136px); animation: vl-hupf 1.1s cubic-bezier(.3, 0, .4, 1) infinite; transform-origin: 50% 100%; }
.vorlader-figur { width: 100%; }
.vorlader-figur svg { display: block; width: 100%; height: auto; }
.vorlader-schatten { width: 70px; height: 10px; margin-top: -6px; border-radius: 50%; background: var(--linie); opacity: .18; animation: vl-schatten 1.1s cubic-bezier(.3, 0, .4, 1) infinite; }
.vorlader-huegel { display: block; width: 240px; height: 46px; margin-top: -8px; }
.vorlader-huegel path { fill: var(--wiese-1); stroke: var(--linie); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vorlader-text { max-width: 26ch; min-height: 2.6em; font-family: var(--titel); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.3; transition: opacity .25s ease; }
.vorlader-text.wechselt { opacity: 0; }
.vorlader-punkte { display: flex; gap: 8px; }
.vorlader-punkte i { width: 10px; height: 10px; border: 2px solid var(--linie); border-radius: 50%; background: var(--karte); animation: vl-punkt 1.2s ease-in-out infinite; }
.vorlader-punkte i:nth-child(2) { animation-delay: .15s; }
.vorlader-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes vl-hupf {
  0%, 100% { transform: translateY(0) scale(1.06, .94); }
  12% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(-34px) scale(.97, 1.03); }
  88% { transform: translateY(0) scale(1, 1); }
}
@keyframes vl-schatten { 0%, 100% { transform: scaleX(1); opacity: .2; } 50% { transform: scaleX(.6); opacity: .08; } }
@keyframes vl-ring { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes vl-punkt { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  .vorlader-springer, .vorlader-schatten, .vorlader-ringe span, .vorlader-punkte i { animation: none; }
  .vorlader-ringe span:first-child { opacity: .35; transform: scale(1.2); }
}

/* Kartenstil 2026: feine Kanten, weiche Schatten, Status als Akzent statt Vollfläche */
.karte {
  --akzent: var(--online);
  --kante: color-mix(in srgb, var(--linie) 13%, transparent);
  gap: 14px; padding: 18px 20px;
  border: 1px solid var(--kante); border-radius: 20px;
  background: var(--karte);
  box-shadow: 0 1px 2px rgba(18, 20, 52, .06), 0 14px 32px -18px rgba(18, 20, 52, .35);
  overflow: hidden;
}
.karte.ist-wackelig { --akzent: var(--wackelig); background: var(--karte); }
.karte.ist-offline { --akzent: var(--offline); background: linear-gradient(180deg, color-mix(in srgb, var(--offline) 7%, var(--karte)), var(--karte) 55%); }
.karte.ist-wartung { --akzent: var(--wartung); background: var(--karte); }
.karte:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--linie) 24%, transparent); box-shadow: 0 2px 4px rgba(18, 20, 52, .06), 0 22px 40px -20px rgba(18, 20, 52, .45); }
.karte:has(.karte-oeffnen:active) { transform: translateY(0); box-shadow: 0 1px 2px rgba(18, 20, 52, .08); }
/* Der Link füllt die Karte, die ihren Inhalt beschneidet; ein Fokusrahmen nach außen wäre unsichtbar. Er liegt
   deshalb an der Karte selbst, ohne :has() wenigstens innen an der Kante. */
.karte-oeffnen:focus-visible { outline: 3px solid var(--fokus); outline-offset: -4px; border-radius: 20px; }
.karte:has(.karte-oeffnen:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.karte:has(.karte-oeffnen:focus-visible) .karte-oeffnen { outline: 0; }

.karte-kopf { gap: 14px; }
.karte-figur {
  width: 54px; padding: 6px 5px 2px; border-radius: 16px;
  background: color-mix(in srgb, var(--akzent) 16%, var(--flaeche));
}
/* Der Name wird nie gekürzt: Er darf notfalls zweizeilig werden. In schmalen Karten rückt die Plakette dafür unter
   den Namen, sodass er die ganze Breite hat und alle Karten gleich aufgebaut bleiben. */
.karte-titel h3 {
  font-size: 1.14rem; letter-spacing: .005em;
  white-space: normal; text-overflow: clip; overflow-wrap: break-word;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
@container (max-width: 380px) {
  .karte-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 4px; }
  .karte-figur { grid-row: 1 / span 2; }
  .karte-kopf .plakette { grid-column: 2; justify-self: start; }
}
.karte-ort { margin-top: 2px; font-size: .82rem; }
.karte-text { font-size: .9rem; }

.plakette {
  gap: 6px; padding: 4px 10px 4px 8px; border: 0;
  background: color-mix(in srgb, var(--akzent, var(--online)) 18%, var(--karte));
  color: var(--text); font-weight: 700; font-size: .76rem;
}
.plakette::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent, var(--online)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent, var(--online)) 28%, transparent); }
.plakette.ist-online { --akzent: var(--online); background: color-mix(in srgb, var(--online) 18%, var(--karte)); }
.plakette.ist-wackelig { --akzent: var(--wackelig); background: color-mix(in srgb, var(--wackelig) 24%, var(--karte)); }
.plakette.ist-offline { --akzent: var(--offline); background: color-mix(in srgb, var(--offline) 20%, var(--karte)); }
.plakette.ist-wartung { --akzent: var(--wartung); background: color-mix(in srgb, var(--wartung) 20%, var(--karte)); }
.karte .plakette.ist-offline::before { animation: puls-punkt 1.6s ease-in-out infinite; }
@keyframes puls-punkt { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--offline) 0%, transparent); } }

.werte { gap: 16px; padding: 12px 14px; border-radius: 14px; background: var(--flaeche); }
.wert-kopf { font-size: .76rem; }
.saft { height: 6px; border: 0; background: var(--spur); }
.werte-knapp { font-size: .84rem; }

/* Jede Karte hat denselben Aufbau. Fehlt eine Angabe, bleibt ihr Platz als blasse Leerstelle stehen: gleiche Maße wie
   gefüllt, aber weder ein Wert wie 0 % noch ein Ladezustand. Die feste Schraffur ist das Zeichnungssymbol für
   „nicht vorhanden“; ein flacher grauer Balken sähe dagegen wie ein Ladeskelett aus. */
.karte-werte, .karte-extra { display: contents; }
.karte .extra-knapp { margin-top: 0; }
.andeutung {
  display: inline-block; vertical-align: middle; width: 60%; height: 8px; border-radius: 999px;
}
/* Gestrichelte Konturen zerfallen an so kleinen Rundungen; eine durchgehende Haarlinie bleibt ruhig. Die Schraffur
   liegt nur innerhalb der Kante, sonst dunkelt sie die halbtransparente Linie fleckig nach. Die Periode 3·√2 ergibt
   waagerecht genau 6 px; mit glatten 4 px wären es 5,66 px, und auf 1x-Bildschirmen wäre jede dritte Linie dünner. */
.andeutung, .werte.ist-leer .saft {
  border: 1px solid var(--andeutung);
  background: repeating-linear-gradient(135deg, var(--andeutung-schraffur) 0 1px, transparent 1px 4.243px) padding-box var(--andeutung-grund);
}
.karte-text.ist-leer .andeutung { width: 72%; }
/* Ohne Kontur und nur halb so stark getönt wie die gefüllte Fläche: Eine umlaufende Linie gibt es sonst an keiner
   Innenfläche der Karte und ließ die Leerstelle wie ein gesperrtes Eingabefeld wirken. Das Leer-Signal tragen die
   schraffierten Balken und die Striche. */
.werte.ist-leer { background: color-mix(in srgb, var(--flaeche) 50%, transparent); }
.werte.ist-leer .wert-kopf, .werte.ist-leer .wert-kopf strong { color: var(--andeutung-text); }
.werte-knapp > .ist-leer, .werte-knapp > .ist-leer strong { color: var(--andeutung-text); }
.extra-knapp.ist-leer { align-items: center; min-height: 1.5em; color: var(--andeutung-text); }
.extra-knapp.ist-leer .ic { margin-top: 0; color: var(--andeutung-text); }
.extra-knapp.ist-leer .andeutung { width: 36%; }
.extra-knapp .leer-text { color: var(--andeutung-text); }
/* Eine Zeile, damit die Karten gleich hoch bleiben; Probleme dürfen dagegen umbrechen (.extra-warnung). */
.extra-zeile { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Offline: Die Werte sind nur der Stand der letzten Meldung; grau statt grün, damit nichts „gesund“ wirkt. */
.werte.ist-alt, .werte-knapp.ist-alt { opacity: .8; }
.werte.ist-alt .saft span { background: var(--unbekannt); }
.werte.ist-alt .wert-kopf strong, .werte-knapp.ist-alt strong { color: var(--text-2); }
.extra-knapp.ist-alt .ic { color: var(--text-2); }

.verlauf { padding-top: 12px; border-top: 1px dashed var(--kante); }
.verlauf-kopf { font-size: .76rem; }
.verlauf-kopf strong { font-size: 1rem; }
.leiste { height: 26px; padding: 0; gap: 2px; border: 0; border-radius: 6px; background: transparent; }
.tag { border-radius: 2px; }
.tag:not(.ok, .leicht, .wackelig, .stoerung, .ausfall, .wartung) { background: var(--spur); }

.gruppen { gap: 56px; }
.gruppe-anzahl { height: 26px; border: 0; background: var(--spur); font-size: .8rem; }
.gruppe-pfeil { border: 1px solid color-mix(in srgb, var(--linie) 18%, transparent); box-shadow: 0 1px 2px rgba(18, 20, 52, .08); }
.gruppe-raster { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: stretch; }

:root[data-theme="dark"] .karte { --kante: rgba(255, 255, 255, .08); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 34px -20px rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .karte { --kante: rgba(255, 255, 255, .08); box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 34px -20px rgba(0, 0, 0, .8); }
}

.lage-zeit:not(:empty) {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 0; padding: 5px 14px; border-radius: 999px;
  border: 1.5px solid var(--linie);
  background: var(--karte);
  box-shadow: 0 2px 0 var(--linie);
  color: var(--text); font-weight: 600; font-size: .84rem; line-height: 1.3; font-variant-numeric: tabular-nums;
}
/* Der Ring leert sich bis zum nächsten Abruf. Er bleibt in Textfarbe, damit er nicht wie eine Statusanzeige wirkt. */
.lage-zeit.mit-ring { padding-left: 9px; }
.lage-zeit.mit-ring::before {
  content: ''; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: conic-gradient(currentColor calc(var(--rest, 1) * 1turn), color-mix(in srgb, currentColor 18%, transparent) 0);
  -webkit-mask: radial-gradient(circle closest-side, transparent 54%, #000 58%);
  mask: radial-gradient(circle closest-side, transparent 54%, #000 58%);
}
@media (min-width: 760px) {
  .lage-zeit:not(:empty) { padding: 6px 16px; font-size: .9rem; }
  .lage-zeit.mit-ring { padding-left: 11px; }
}

.lage-wartung {
  display: inline-flex; align-items: center; gap: 10px; max-width: min(100%, 720px);
  padding: 6px 18px 6px 7px;
  border: 2px solid var(--linie); border-radius: 16px;
  background: var(--karte); color: var(--text); box-shadow: 0 3px 0 var(--linie);
  font: inherit; font-weight: 500; font-size: .94rem; line-height: 1.3; text-align: left; cursor: pointer;
  transition: box-shadow .14s var(--weich), translate .14s var(--weich);
}
.lage-wartung[hidden] { display: none; }
.lage-wartung:hover { translate: 0 -1px; box-shadow: 0 4px 0 var(--linie); }
.lage-wartung strong { font-weight: 700; }
.lw-symbol { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--wartung); color: #fff; }
.lw-symbol .ic { width: 18px; height: 18px; }
.lage-wartung.ist-geplant .lw-symbol { background: color-mix(in srgb, var(--wartung) 20%, var(--karte)); color: var(--wartung); }
.lw-kurz { display: none; }
@media (max-width: 759.98px) {
  .lage-wartung { padding: 4px 14px 4px 5px; font-size: .84rem; border-radius: 14px; }
  .lw-symbol { width: 26px; height: 26px; border-radius: 9px; }
  .lw-symbol .ic { width: 16px; height: 16px; }
  .lw-lang { display: none; }
  .lw-kurz { display: inline; }
}

/* Handy (unter 760 px): Alle Figuren stehen auf der Wiese vor einer großen Windmühle.
   --text-hoehe (Kopf + Botschaft - 52 px, gesetzt von app.js) lässt die Szene genau den Rest des Bildschirms füllen;
   140vw deckelt die Höhe auf langen, schmalen Handys. --szene-oben (app.js) ist die erste freie Zeile unter der
   Lagezeile, auf ihr stehen auch die Flügelspitzen. */
.buehne.muehlen-modus {
  --land: clamp(min(520px, 80vw), min(calc(100svh - var(--text-hoehe, 230px)), calc(140vw + 30px)), 760px);
  padding-bottom: calc(var(--land) - 52px);
}
/* Die Parallaxe rechnet app.js (parallaxEinrichten) für alle Ansichten: Ganz oben auf der Seite ist --parallaxe 0,
   Schlagzeile und Himmel stehen also an ihrem Platz; beim Hinausscrollen sinken sie dezent nach und verblassen. */
.buehne .himmel { transform: translateY(calc(var(--parallaxe, 0) * 180px)); }
.buehne .botschaft { transform: translateY(calc(var(--parallaxe, 0) * 110px)); opacity: calc(1 - var(--parallaxe, 0) * .9); }
/* Auf niedrigen Handys fehlt jeder Pixel über der Lagezeile der Szene, Mühle und Figuren würden kleiner. */
@media (max-height: 760px) {
  :root:not(.ist-teilansicht) .buehne.muehlen-modus .botschaft { gap: 10px; padding-top: 8px; }
}
/* Quer gehaltenes Handy: Die Szene ist höchstens so hoch wie der Bildschirm unter der festen Kopfleiste
   (.leiste-oben), damit Mühle und Figuren beim Scrollen gemeinsam zu sehen sind. */
@media (orientation: landscape) and (max-height: 520px) {
  .buehne.muehlen-modus { --land: max(240px, calc(100svh - 64px)); }
}
/* Sonne, Mond und Wolken stehen rechts neben den Mühlenflügeln statt neben der Schlagzeile. */
.buehne.muehlen-modus .himmelskoerper { top: calc(var(--szene-oben, 360px) + 4px); right: 4%; width: 54px; }
.buehne.muehlen-modus .wolke-vor-sonne { top: calc(var(--szene-oben, 360px) + 30px); right: calc(4% + 14px); width: 74px; }
.buehne.muehlen-modus .regenwolke { top: calc(var(--szene-oben, 360px) - 2px); right: 2%; width: 96px; }
.buehne.muehlen-modus .crew { position: absolute; left: 0; right: 0; bottom: 0; height: var(--land); padding: 0; display: block; pointer-events: none; }
.buehne.muehlen-modus .crew-figur { position: absolute; width: var(--figur); margin: calc(var(--figur) * -1.3125) 0 0 calc(var(--figur) * -.5); pointer-events: auto; }
.buehne.muehlen-modus .crew-figur::after {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: -2px; height: 9%;
  border-radius: 50%; background: var(--linie); opacity: .2; z-index: -1;
}
.buehne.muehlen-modus .buehne-wege { bottom: max(12px, env(safe-area-inset-bottom)); }

/* Kleine Bäume am Horizont sind stark verkleinert; dickere Linien halten sie so kräftig wie die Dinge vorne. */
.mw-fern :is(path, circle, ellipse) { stroke-width: 4.4; }
/* Die Felder am Horizont sind schmale Streifen; eine kräftige Kontur ließe sie wie aufgestellte Bretter wirken. */
.mw-feld .feld-flaeche { stroke-width: 1.4; }
.mw-feld .feld-streifen { stroke-width: 1.8 !important; }
.mw-muehle { transition: transform .8s var(--weich); }
.mw-stein { fill: var(--stein); stroke-width: 1.8 !important; }
.mw-stein-2 { fill: var(--stein-schatten); stroke-width: 1.8 !important; }
.mw-holz { fill: var(--land-stamm); stroke-width: 1.8 !important; }
.mw-strebe { fill: none; stroke: var(--land-stamm) !important; stroke-width: 2.4 !important; }
.mw-gelaender-kontur { fill: none; stroke-width: 3.8 !important; }
.mw-gelaender { fill: none; stroke: var(--zaun) !important; stroke-width: 1.6 !important; }
.mw-brett { fill: none; stroke: color-mix(in srgb, var(--linie) 35%, transparent) !important; stroke-width: 1.4 !important; }
.mw-knauf { fill: var(--laterne-mast); stroke: none !important; }
.mw-glanz { fill: none; stroke: rgba(255, 255, 255, .55) !important; stroke-width: 3.4 !important; }
.mw-sack { fill: var(--fluegel-tuch); stroke-width: 1.8 !important; }
.mw-sack-band { fill: none; stroke-width: 1.4 !important; }
.mw-teich { fill: url(#land-wasser); }
.mw-gras { fill: none; stroke: var(--land-baum-2) !important; stroke-width: 1.8 !important; }
.mw-kegel { fill: var(--kegel); stroke-width: 1.8 !important; }
.mw-kegel-streifen { fill: #fff; stroke: none !important; }
.mw-kegel-fuss { fill: var(--laterne-mast); stroke-width: 1.6 !important; }
.mw-pfuetze { fill: var(--land-wasser); stroke-width: 1.8 !important; opacity: 0; transition: opacity 1.2s ease; }

.huhn-koerper, .huhn-fluegel { fill: var(--ente); }
.huhn-fluegel { stroke-width: 1.6 !important; }
.kueken :is(.huhn-koerper, .huhn-fluegel) { fill: var(--kueken); }
.kueken .huhn-kamm { display: none; }
.huhn-kamm { fill: var(--kamm); stroke-width: 1.4 !important; }
.huhn-schnabel { fill: var(--schnabel); stroke-width: 1.4 !important; }
.huhn-beine { fill: none; stroke: var(--schnabel) !important; stroke-width: 2.2 !important; }
.huhn-auge { fill: var(--linie); stroke: none !important; }
.huhn-picken { transform-box: fill-box; transform-origin: 50% 100%; animation: picken 3.4s ease-in-out infinite; animation-delay: var(--v, 0s); }
@keyframes picken { 0%, 55%, 84%, 100% { transform: rotate(0deg); } 62%, 74% { transform: rotate(-26deg); } 68% { transform: rotate(-8deg); } }

/* Bei Wind fliegen Heuhalme quer über die Wiese; Regen kommt von der gemeinsamen Regenebene der Bühne (.regen). */
.mw-flug { opacity: 0; transition: opacity 1s ease; }
.mw-flug-halm { animation: stroh-fliegen var(--flug-dauer, 7s) linear infinite paused; animation-delay: var(--v, 0s); }
.mw-flug-halm path { fill: none; stroke: var(--heu) !important; stroke-width: 2.6 !important; }
@keyframes stroh-fliegen { from { transform: translate(-320px, var(--y)) rotate(0deg); } to { transform: translate(720px, calc(var(--y) - 70px)) rotate(900deg); } }

.buehne.muehlen-modus[data-wetter="sturm"] .landschaft { --flug-dauer: 2.4s; }
.buehne[data-wetter="wolkig"] .mw-flug { opacity: .9; }
.buehne[data-wetter="sturm"] .mw-flug { opacity: 1; }
.buehne:is([data-wetter="wolkig"], [data-wetter="sturm"]) .mw-flug-halm { animation-play-state: running; }
.buehne:is([data-wetter="regen"], [data-wetter="sturm"]) .mw-pfuetze { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .huhn-picken, .mw-flug-halm { animation: none !important; }
  .mw-flug { display: none; }
}

/* Einzelansicht (?server=…): Die Szene ist nur ein Streifen von gut einem Drittel der Höhe, damit Status und
   Details ohne Scrollen sichtbar sind. Den Bildausschnitt um den Schauplatz rechnet app.js (teilBlickBerechnen). */
.ist-teilansicht .buehne { --teil-h: clamp(300px, 36svh, 420px); }
.ist-teilansicht .buehne:is(.szene-modus, .muehlen-modus) {
  --land: var(--teil-h);
  height: var(--teil-h); min-height: 0; padding-bottom: 0;
}
.ist-teilansicht .buehne.muehlen-modus { --teil-h: clamp(300px, 40svh, 380px); --land: calc(var(--teil-h) - var(--text-hoehe, 20px)); }
/* Auf dem Handy beginnen die Hügel knapp unter der Kopfzeile. Sonne, Mond und Wetterwolke stehen deshalb in der
   Kopfzeile links neben dem Farbschalter, sonst verschwänden sie zur Hälfte hinter den Hügeln. */
.ist-teilansicht .buehne.muehlen-modus .himmelskoerper { top: 12px; right: calc(var(--rand) + 56px); }
.ist-teilansicht .buehne.muehlen-modus .wolke-vor-sonne { top: 38px; right: calc(var(--rand) + 70px); }
.ist-teilansicht .buehne.muehlen-modus .regenwolke { top: 4px; right: calc(var(--rand) + 50px); }
.ist-teilansicht :is(.schlagzeile, .lage, .lage-zeit, .buehne-wege) { display: none; }
/* Der Ausschnitt zeigt oft nur Ufer und Fluss, der Horizont liegt weit darüber. Das obere Viertel bleibt deshalb
   reiner Himmel, erst darunter taucht das Land auf; Sonne, Mond und Wolken bleiben in diesem Band (app.js,
   wolkenBahnenSetzen), damit kein Wetter auf der Wiese liegt. */
.ist-teilansicht .buehne.szene-modus .landschaft {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 22%, rgba(0, 0, 0, .5) 31%, #000 44%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 22%, rgba(0, 0, 0, .5) 31%, #000 44%);
}
/* Bauwerke, die fast ganz im Übergang der Maske stünden, entfallen samt Weg (app.js: teilDunstPruefen). */
.ist-teilansicht .buehne.szene-modus .landschaft .im-dunst { display: none; }
.ist-teilansicht .botschaft { padding: 0; }
/* Der Himmel liegt hier über dem ausgeblendeten Land und läuft selbst nach unten aus; Sonne, Mond und
   Wetterwolken stehen deshalb oben neben dem Farbschalter. */
.ist-teilansicht .buehne.szene-modus .himmel {
  z-index: 3;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 27%, transparent 38%);
  mask-image: linear-gradient(180deg, #000 0, #000 27%, transparent 38%);
}
.ist-teilansicht .buehne.szene-modus .himmelskoerper { top: 16px; right: calc(var(--rand) + 70px); width: clamp(64px, 6vw, 90px); }
.ist-teilansicht .buehne.szene-modus .wolke-vor-sonne { top: 42px; right: calc(var(--rand) + 92px); width: clamp(86px, 7.5vw, 122px); }
.ist-teilansicht .buehne.szene-modus .regenwolke { top: 8px; right: calc(var(--rand) + 64px); width: clamp(108px, 9vw, 150px); }
.ist-teilansicht .buehne.szene-modus .regenwolke.links { top: 26px; right: auto; left: max(240px, 20%); width: clamp(90px, 7.5vw, 124px); }
/* Eine einzelne Figur braucht keine Hülle für vier: der Ballon wird schmaler, damit die Figur größer sein kann. */
.ist-teilansicht .ballon-huelle { width: calc(var(--figur) * 2.6); margin-bottom: calc(var(--figur) * -.26); }
.ist-teilansicht .buehne .zone-schild { pointer-events: none; cursor: default; }
.ist-teilansicht .crew-figur { --akzent: var(--unbekannt); }
.ist-teilansicht .crew-figur.ist-online { --akzent: var(--online); }
.ist-teilansicht .crew-figur.ist-wackelig { --akzent: var(--wackelig); }
.ist-teilansicht .crew-figur.ist-offline { --akzent: var(--offline); }
.ist-teilansicht .crew-figur.ist-wartung { --akzent: var(--wartung); }
.ist-teilansicht .crew-figur::before {
  content: ''; position: absolute; left: -24%; right: -24%; bottom: -10%; height: 24%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--akzent) 62%, transparent), transparent);
}

.ist-teilansicht .inhalt { width: min(1180px, 100% - 2 * var(--rand)); }
.ist-teilansicht .teilansicht { display: grid; gap: 20px; margin-top: 28px; }
.teilansicht .hinweise { margin-top: 0; }
.teilansicht .hinweis { border: 1px solid var(--kante-fein); border-radius: 20px; box-shadow: var(--schatten-weich); }
.teilansicht .hinweis::before { height: 6px; border-bottom: 0; }
.teilansicht .hinweis-symbol { border: 0; border-radius: 12px; }

.teil-kopf {
  --akzent: var(--unbekannt);
  position: relative; display: grid; gap: 14px; overflow: hidden;
  padding: 22px clamp(18px, 2.6vw, 30px) 18px;
  border: 1px solid var(--kante-fein); border-radius: 24px;
  background: var(--karte); box-shadow: var(--schatten-weich);
}
.teil-kopf::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--akzent); }
.teil-kopf.ist-online { --akzent: var(--online); }
.teil-kopf.ist-wackelig { --akzent: var(--wackelig); }
.teil-kopf.ist-offline { --akzent: var(--offline); }
.teil-kopf.ist-wartung { --akzent: var(--wartung); }
.teil-zurueck {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 5px 14px 5px 10px; border: 1px solid var(--kante-fein); border-radius: 999px;
  background: var(--flaeche); color: var(--text); font-weight: 700; font-size: .88rem; text-decoration: none;
  transition: background-color .15s, translate .15s var(--weich);
}
.teil-zurueck .ic { width: 17px; height: 17px; transition: translate .15s var(--weich); }
.teil-zurueck:hover { background: color-mix(in srgb, var(--marke) 14%, var(--flaeche)); }
.teil-zurueck:hover .ic { translate: -2px 0; }
.teil-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.teil-titel h1 { min-width: 0; font-family: var(--titel); font-weight: 600; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.08; overflow-wrap: anywhere; }
.teil-titel .plakette { padding: 5px 12px 5px 10px; font-size: .84rem; }
.teil-text { max-width: 72ch; color: var(--text-2); font-size: 1.02rem; }
.teil-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.teil-meta li {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; padding: 4px 12px 4px 10px;
  border-radius: 999px; background: var(--flaeche); font-size: .86rem; font-weight: 600;
}
.teil-meta .ic { width: 16px; height: 16px; color: var(--text-2); }
.teil-meta a, .fakt a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.teil-meta a:hover, .fakt a:hover { text-decoration-color: currentColor; }
.teil-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--kante-fein);
}
.teil-zeit { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.teil-zeit .ic { width: 16px; height: 16px; }
.teil-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }
.teil-aktionen .knopf { min-height: 42px; padding: .5em 1.05em; border: 1px solid var(--kante-fein); box-shadow: var(--schatten-weich); font-size: .9rem; }
.teil-aktionen .knopf:not(.knopf-marke) { background: var(--flaeche); }
.teil-aktionen .knopf-marke { border-color: transparent; }
.teil-aktionen .knopf:hover { transform: translateY(-1px); box-shadow: var(--schatten-weich); }
.teil-aktionen .knopf:active { transform: translateY(0); }

.teil-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.teil-raster.ist-einspaltig { grid-template-columns: minmax(0, 1fr); }
.teil-spalte { display: grid; gap: 20px; min-width: 0; }
.teil-spalte:empty { display: none; }
.teil-block {
  min-width: 0; padding: 20px clamp(16px, 2vw, 24px) 22px;
  border: 1px solid var(--kante-fein); border-radius: 20px;
  background: var(--karte); box-shadow: var(--schatten-weich);
}
.teil-block-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 16px; }
.teil-block h2 { display: flex; align-items: center; gap: 9px; font-family: var(--titel); font-weight: 600; font-size: 1.16rem; line-height: 1.2; }
.teil-block h2 .ic { width: 20px; height: 20px; color: var(--text-2); }
.teil-block-zusatz { color: var(--text-2); font-size: .82rem; font-weight: 600; }
.teil-gesamt {
  --akzent: var(--online);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--akzent) 16%, var(--karte)); font-size: .8rem; font-weight: 700;
}
.teil-gesamt .ic { width: 15px; height: 15px; color: color-mix(in srgb, var(--akzent) 70%, var(--text)); }
.teil-gesamt.ist-warnung { --akzent: var(--wackelig); }
.teil-gesamt.ist-fehler { --akzent: var(--offline); }
.teil-stand {
  display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--wackelig) 16%, var(--flaeche)); font-size: .86rem; font-weight: 600;
}
.teil-stand .ic { flex: none; width: 17px; height: 17px; margin-top: 1px; }

.dienst-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 28px; }
.dienst-gruppe h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--text-2); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dienst-gruppe h3 span { padding: 1px 7px; border-radius: 999px; background: var(--flaeche); letter-spacing: 0; }
.dienst-liste { margin: 0; padding: 0; list-style: none; }
.dienst {
  --akzent: var(--unbekannt);
  display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px;
  padding: 9px 4px; border-bottom: 1px solid var(--kante-fein);
}
.dienst:last-child { border-bottom: 0; }
.dienst.ist-ok { --akzent: var(--online); }
.dienst.ist-warnung { --akzent: var(--wackelig); }
.dienst.ist-fehler { --akzent: var(--offline); }
.dienst:is(.ist-warnung, .ist-fehler) { margin-block: 3px; padding-inline: 10px; border-bottom-color: transparent; border-radius: 12px; background: color-mix(in srgb, var(--akzent) 14%, var(--karte)); }
.dienst-punkt { align-self: start; width: 8px; height: 8px; margin: 7px 0 0 2px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 26%, transparent); }
.dienst-name { font-weight: 600; overflow-wrap: anywhere; }
.dienst-info { grid-column: 2; color: var(--text-2); font-size: .84rem; font-weight: 500; }

.messwerte { display: grid; gap: 14px; }
.messwert-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 7px; color: var(--text-2); font-size: .86rem; font-weight: 600; }
.messwert-kopf strong { color: var(--text); font-family: var(--titel); font-weight: 600; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.messwert .saft { height: 8px; }
.messwert-zusatz { display: block; margin-top: 5px; color: var(--text-2); font-size: .78rem; font-weight: 600; }
/* Die Kacheln teilen sich jede Zeile ganz; eine einzelne am Ende wird so breit wie die Zeile, statt leere Spuren
   neben sich stehen zu lassen. Die Mindestbreite hält Namen wie „Mail-Warteschlange“ in einer Zeile. */
.kacheln { display: flex; flex-wrap: wrap; gap: 10px; }
.messwerte + .kacheln { margin-top: 18px; }
.kachel { flex: 1 1 160px; display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--flaeche); }
.kachel-name { color: var(--text-2); font-size: .78rem; font-weight: 700; hyphens: manual; }
.kachel-wert { font-family: var(--titel); font-weight: 600; font-size: 1.4rem; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kachel-zusatz { color: var(--text-2); font-size: .76rem; font-weight: 600; }

.quote-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; }
.quote-gross { font-family: var(--titel); font-weight: 600; font-size: clamp(2.1rem, 1.7rem + 1.3vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.quote-text { color: var(--text-2); font-size: .9rem; font-weight: 600; }
.leiste.leiste-gross { height: 56px; padding: 0; gap: 2px; border: 0; border-radius: 8px; }
.leiste-gross .tag { border-radius: 3px; }
.achse { display: flex; justify-content: space-between; margin-top: 8px; color: var(--text-2); font-size: .76rem; font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; color: var(--text-2); font-size: .78rem; font-weight: 600; }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--spur); box-shadow: inset 0 0 0 1px var(--kante-fein); }
.legende .ok { background: var(--online); }
.legende .leicht { background: linear-gradient(var(--wackelig) 0 32%, var(--online) 32%); }
.legende .wackelig { background: var(--wackelig); }
.legende .stoerung { background: var(--stoerung); }
.legende .ausfall { background: var(--offline); }
.legende .wartung { background: var(--wartung); }

.fakten { display: grid; margin: 0; }
/* Das Label wächst und schiebt den Wert nach rechts, solange beide in eine Zeile passen. Reicht der Platz nicht,
   rutscht der Wert linksbündig unter das Label, statt allein rechts in einer eigenen Zeile zu hängen. */
.fakt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px;
  padding: 11px 0; border-bottom: 1px solid var(--kante-fein);
}
.fakt:first-child { padding-top: 0; }
.fakt:last-child { padding-bottom: 0; border-bottom: 0; }
.fakt dt { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--text-2); font-size: .86rem; font-weight: 600; }
.fakt dt .ic { width: 16px; height: 16px; }
.fakt dd { flex: 0 1 auto; min-width: 0; margin: 0; padding-left: 23px; font-weight: 700; overflow-wrap: anywhere; }

/* In der schmalen Spalte stehen alle Fakten gleich gebaut: Label oben, Wert darunter. Ein Wechsel zwischen
   rechtsbündigen und umgebrochenen Werten ergäbe sonst einen unruhigen Zickzack. */
.teil-fakten:not(.ist-breit) .fakt { display: grid; gap: 3px; }

/* Breite Abschlusskarte unter beiden Spalten (app.js: steckbriefAnordnen). Die Spaltenzahl folgt der Anzahl der
   Fakten (7 → 4 + 3, 5 → 3 + 2), und ein allein übrig bleibender Fakt nimmt den Rest der Zeile ein. */
.teil-fakten.ist-breit .fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.teil-fakten.ist-breit .fakten:is([data-anzahl="4"], [data-anzahl="7"], [data-anzahl="8"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.teil-fakten.ist-breit .fakten[data-anzahl="7"] .fakt:last-child { grid-column: span 2; }
.teil-fakten.ist-breit .fakten:not([data-anzahl="4"], [data-anzahl="7"], [data-anzahl="8"]) .fakt:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.teil-fakten.ist-breit .fakten:not([data-anzahl="4"], [data-anzahl="7"], [data-anzahl="8"]) .fakt:last-child:nth-child(3n + 2) { grid-column: span 2; }
.teil-fakten.ist-breit .fakt,
.teil-fakten.ist-breit .fakt:is(:first-child, :last-child) {
  display: grid; align-content: start; gap: 5px;
  padding: 12px 14px; border: 0; border-radius: 14px; background: var(--flaeche);
}

@media (max-width: 980px) {
  .teil-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ist-teilansicht .teilansicht { gap: 16px; margin-top: 18px; }
  .teil-kopf { padding: 18px 16px 16px; border-radius: 20px; }
  .teil-fuss { flex-direction: column; align-items: stretch; }
  .teil-aktionen .knopf { flex: 1 1 auto; }
  .teil-block { padding: 16px 16px 18px; border-radius: 18px; }
  .leiste.leiste-gross { height: 44px; gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .teil-zurueck, .teil-zurueck .ic { transition: none; }
}

.logo-name { font-family: var(--titel); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--text); max-width: min(62vw, 420px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-klein .logo-name { font-size: 1.05rem; max-width: 34vw; }
[data-festes-schema] [data-farbe] { display: none; }
.fuss-marke { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-size: .86rem; }
.fuss-marke:hover { color: var(--text); }
.fuss-marke img { height: 20px; width: auto; }

/* Teilchen der Jahreszeit: Schnee, Laub oder Blütenblätter (app.js: teilchenZeichnen). */
.teilchen { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; container-type: size; }
.teilchen[hidden] { display: none; }
.teil {
  position: absolute; top: -28px; left: var(--x); width: var(--g); height: var(--g);
  animation: teil-fallen var(--d) linear var(--v) infinite;
}
.teil::before {
  content: ''; display: block; width: 100%; height: 100%;
  animation: teil-pendeln calc(var(--d) / 3.2) ease-in-out var(--v) infinite alternate;
}
.art-schnee .teil::before { border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(27, 28, 58, .14); }
.art-laub .teil::before { border: 1.5px solid var(--linie); border-radius: 0 80% 0 80%; background: var(--laub); }
.art-bluete .teil::before { border: 1px solid rgba(27, 28, 58, .35); border-radius: 70% 0 70% 0; background: #ffc6da; }
.teilchen.ist-sturm .teil { animation-duration: calc(var(--d) * .45); }
@keyframes teil-fallen { to { transform: translateY(calc(100cqh + 56px)); } }
@keyframes teil-pendeln {
  from { transform: translateX(calc(var(--w) * -1)) rotate(-30deg); }
  to { transform: translateX(var(--w)) rotate(40deg); }
}
@media (prefers-reduced-motion: reduce) { .teilchen { display: none; } }