/* Ortsseiten: aus dem Stil der Startseite geschnitten (web-app/scripts/ortsseiten/stil.mjs) */
html:has(.modal-bg.anm-hinter){overflow:hidden}
.konto-trenner{height:1px;margin:4px 6px;background:var(--line)}
header.start-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:28px}
header.start-kopf>.start-marke{justify-self:start}
header.start-kopf>.start-nav{margin-left:0;justify-self:center;gap:30px}
header.start-kopf>.start-kopf-rechts{margin-left:0;justify-self:end}
.start-nav a{font-size:var(--schrift-text);font-weight:500}
@media (max-width: 760px){header.start-kopf{grid-template-columns:minmax(0,1fr) auto}}
.start-nav a{position:relative}
.start-nav a.aktiv{color:var(--ink);font-weight:600}
.start-nav a.aktiv:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:var(--radius-pill);background:var(--teal)}
.kopf-menue-knopf{display:none;cursor:pointer;width:var(--gk-rund);height:var(--gk-rund);place-items:center;color:var(--ink);border-radius:var(--radius-pill)}
.kopf-blatt{display:none}
@media (max-width: 760px){.kopf-menue-knopf{display:grid}.kopf-blatt{display:flex;flex-direction:column;gap:18px;position:sticky;top:64px;z-index:19;padding:18px 20px 22px}.kopf-blatt.glas-stark{border-width:0 0 1px;border-color:var(--line);border-radius:0}.kopf-blatt nav{display:flex;flex-direction:column}.kopf-blatt nav a{font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line)}.kopf-blatt nav a.aktiv{color:var(--teal-deep)}}
.start-kopf{view-transition-name:seiten-kopf}
:root{--navy: #0B2C4D;--navy2: #14406B;--navy-tiefer: #091A29;--navy-tief: #0B2236;--teal: #00A896;--teal-deep: #007A68;--teal-flaeche: #007A68;--knopf: #1F6FB8;--knopf-tief: #195C9C;--knopf-soft: #DDEBF8;--knopf-text: #175E9F;--teal-knopf: #1F6FB8;--teal-tiefer: #195C9C;--teal-soft: #D7F4EE;--paper: #F4FAF8;--paper2: #E7F1EE;--sand: #EFE2C2;--surface: #FFFFFF;--ink: #123043;--ink60: rgba(18,48,67,.68);--ink40: rgba(18,48,67,.42);--line: #DEEBE7;--coral: #FF6B57;--sun: #FFC94D;--reef: #7C5CBF;--aqua: #4ECDC4;--orange: #E8730C;--note-gut: #2D9D78;--note-mittel: #D1A83B;--note-schlecht: #D95151;--note-gut-tinte: color-mix(in srgb, var(--note-gut) 62%, var(--ink));--note-mittel-tinte: var(--gold-tinte);--note-schlecht-tinte: color-mix(in srgb, var(--note-schlecht) 75%, var(--ink));--zustand-guenstig: var(--teal);--zustand-gemischt: var(--sun);--zustand-exponiert: var(--coral);--zustand-leer: #8C9AA5;--on-brand: #FFFFFF;--on-dark: #F5F2E9;--grund-sand: #E3C88B;--grund-seegras: #4E7C59;--grund-schlick: #8C7A63;--grund-kies: #A8A29B;--grund-fels: #6B6F76;--font-body: "Outfit", system-ui, -apple-system, sans-serif;--font-display: "Manrope", "Outfit", system-ui, sans-serif;--font-marke: "Manrope", "Outfit", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, monospace;--font-serif: "Instrument Serif", Georgia, serif;--gewicht-text: 400;--gewicht-mittel: 500;--gewicht-halbfett: 600;--gewicht-fett: 700;--gewicht-titel: 700;--gewicht-untertitel: 600;--radius-fein: 4px;--radius-klein: 8px;--radius-mittel: 12px;--radius-button: 14px;--radius-card: 18px;--radius-panel: 24px;--radius-sheet: 28px;--radius-pill: 999px;--radius-mini: 8px;--abstand-0: 0px;--abstand-1: 4px;--abstand-2: 8px;--abstand-3: 12px;--abstand-4: 16px;--abstand-5: 20px;--abstand-6: 24px;--abstand-8: 32px;--abstand-10: 40px;--abstand-12: 48px;--abstand-16: 64px;--knopf-hoehe: 52px;--knopf-kompakt: 46px;--radius-knopf: 14px;--strich-duenn: 1.5;--strich-normal: 2;--strich-stark: 2.4;--gold-tinte: #8A6400;--hebung: #016B5B;--on-dark-72: rgba(245,242,233,.72);--on-dark-50: rgba(245,242,233,.5);--glas-06: rgba(255,255,255,.06);--glas-10: rgba(255,255,255,.1);--glas-12: rgba(255,255,255,.12);--glas-22: rgba(255,255,255,.22);--glas-35: rgba(255,255,255,.35);--glas-55: rgba(255,255,255,.55);--glas-72: rgba(255,255,255,.72);--glas-88: rgba(255,255,255,.88);--glas-92: rgba(255,255,255,.92);--papier-82: rgba(244,250,248,.82);--schleier: rgba(11,44,77,.42);--schatten-1: 0 2px 12px rgba(11,44,77,.12);--schatten-2: 0 6px 28px rgba(11,44,77,.09);--schatten-3: 0 10px 44px rgba(11,44,77,.18);--shadow-float: 0 10px 44px rgba(11,44,77,.18);--schatten-marke: 0 14px 34px rgba(0,168,150,.22);--schatten-dunkel: 0 10px 30px rgba(0,0,0,.28);--zeit-schnell: .16s;--zeit-mittel: .28s;--kurve: cubic-bezier(.22, .61, .36, 1);--schrift-nano: 9px;--schrift-mini: 10px;--schrift-mikro: 11px;--schrift-fein: 12px;--schrift-klein: 13px;--schrift-basis: 14px;--schrift-text: 15px;--schrift-mittel: 16px;--schrift-gross: 17px;--schrift-titel: 18px;--schrift-h3: 20px;--schrift-seite: 22px;--schrift-held: 26px;--schrift-kennzahl: 28px;--schrift-reiter: 30px;--schrift-h1: clamp(30px, 4.4vw, 52px);--schrift-h2: clamp(24px, 2.8vw, 36px);--schrift-3xs: 9px;--schrift-2xs: 11px;--schrift-xs: 12px;--schrift-s: 13px;--schrift-m: 14px;--schrift-l: 16px;--schrift-xl: 17px;--eng: -.03em;--eng-klein: -.015em;--gesperrt: .16em;--zeile-eng: 1;--zeile-titel: 1.15;--zeile-knapp: 1.3;--zeile-text: 1.45;--zeile-lang: 1.6;--titel: var(--navy);--knopf-dunkel: var(--navy);--milchglas: var(--glas-92);--milchglas-88: var(--glas-88);--auswahl: var(--navy);--auf-auswahl: var(--on-dark);--marke-filter: none;--leucht-hell: #D7F4EE;--leucht-ende: var(--navy2);--daten-anteil: 100%;--grafik-linie: var(--navy2);--skelett-grund: var(--paper2);--skelett-schimmer: var(--paper);--ring-teal-1: #0E9384;--ring-teal-2: #0B8577;--ring-teal-3: #08776B;--ring-teal-4: #056A5F;--ring-aqua-1: #0A869A;--ring-aqua-2: #087A8E;--ring-aqua-3: #066E82;--ring-blau-1: #2F74C0;--ring-blau-2: #2666B0;--ring-blau-3: #1E58A0;--ring-indigo-1: #5059D6;--ring-indigo-2: #464EC4;--ring-indigo-3: #3C43B0;--ring-violett-1: #8150D2;--ring-violett-2: #7342C2;--ring-violett-3: #6535AE;--ring-gold-1: #A87708;--ring-gold-2: #9A6A04;--ring-gold-3: #8A5E00;--ring-sieben-1: #007A68;--ring-sieben-2: #2666B0;--ring-sieben-3: #7342C2;--ring-sieben-4: #9A6A04;--glas-flaeche: rgba(255,255,255,.78);--glas-flaeche-stark: rgba(244,250,248,.94);--glas-flaeche-dunkel: rgba(11,44,77,.88);--glas-deckend: #FFFFFF;--glas-deckend-stark: #F4FAF8;--glas-deckend-dunkel: #0B2C4D;--glas-rand: rgba(255,255,255,.62);--glas-rand-dunkel: rgba(255,255,255,.18);--glas-licht: inset 0 1px 0 rgba(255,255,255,.75);--glas-licht-dunkel: inset 0 1px 0 rgba(255,255,255,.14);--glas-unschaerfe: 20px;--glas-unschaerfe-stark: 32px;--glas-saettigung: 1.4;--glas-saettigung-dunkel: 1;--glas-schatten: 0 1px 2px rgba(11,44,77,.08), 0 12px 32px rgba(11,44,77,.14);--glas-schatten-dialog: 0 40px 100px rgba(0,0,0,.45);--glas-schatten-klein: 0 1px 2px rgba(11,44,77,.08), 0 4px 14px rgba(11,44,77,.1);--gk-haupt-flaeche: rgba(0,91,174,.88);--gk-haupt-dicht: rgba(0,91,174,.94);--gk-haupt-deckend: #1F6FB8;--gk-haupt-gedrueckt: rgba(0,91,174,.97);--gk-haupt-rand: rgba(255,255,255,.28);--gk-haupt-licht: inset 0 1px 0 rgba(255,255,255,.38);--gk-haupt-glanz: rgba(255,255,255,.11);--gk-haupt-schatten: 0 1px 2px rgba(31,111,184,.24), 0 6px 16px rgba(31,111,184,.28);--gk-zweit-flaeche: rgba(255,255,255,.86);--gk-zweit-dicht: rgba(255,255,255,.94);--gk-zweit-deckend: #FFFFFF;--gk-zweit-gedrueckt: rgba(221,235,248,.94);--gk-zweit-rand: rgba(11,44,77,.14);--gk-zweit-licht: inset 0 1px 0 rgba(255,255,255,.9);--gk-zweit-glanz: rgba(255,255,255,.7);--gk-zweit-schatten: 0 1px 2px rgba(11,44,77,.08), 0 4px 14px rgba(11,44,77,.1);--gk-dunkel-flaeche: rgba(11,44,77,.88);--gk-dunkel-dicht: rgba(11,44,77,.94);--gk-dunkel-deckend: #0B2C4D;--gk-dunkel-gedrueckt: rgba(11,44,77,.97);--gk-dunkel-rand: rgba(255,255,255,.18);--gk-dunkel-licht: inset 0 1px 0 rgba(255,255,255,.14);--gk-dunkel-glanz: rgba(255,255,255,.14);--gk-dunkel-schatten: 0 1px 2px rgba(0,0,0,.24), 0 4px 14px rgba(0,0,0,.28);--gk-gefahr-flaeche: rgba(166,49,13,.88);--gk-gefahr-dicht: rgba(166,49,13,.94);--gk-gefahr-deckend: #B14A2A;--gk-gefahr-gedrueckt: rgba(166,49,13,.97);--gk-gefahr-rand: rgba(255,255,255,.28);--gk-gefahr-licht: inset 0 1px 0 rgba(255,255,255,.38);--gk-gefahr-glanz: rgba(255,255,255,.11);--gk-gefahr-schatten: 0 1px 2px rgba(177,74,42,.24), 0 6px 16px rgba(177,74,42,.26);--gk-chip-an-flaeche: rgba(11,44,77,.9);--gk-chip-an-dicht: rgba(11,44,77,.95);--gk-chip-an-deckend: #0B2C4D;--gk-chip-an-gedrueckt: rgba(11,44,77,.97);--gk-chip-an-rand: rgba(255,255,255,.18);--gk-chip-an-licht: inset 0 1px 0 rgba(255,255,255,.16);--gk-chip-an-glanz: rgba(255,255,255,.16);--gk-chip-an-schatten: 0 1px 2px rgba(11,44,77,.14), 0 4px 12px rgba(11,44,77,.16);--gk-chip-schrift: rgba(18,48,67,.8);--gk-klein: 36px;--gk-chip: 34px;--gk-rund: 44px;--gk-glanz-bis: 50%;--gk-gedrueckt-skala: .97;--gk-aus: .45;--buchtkopf-tief: #0E3D52;--buchtkopf-mittel: #11607A;--buchtkopf-hell: #1A8F9E;--buchtkopf-welle1: #12718C;--buchtkopf-welle2: #199AA8;--buchtkopf-welle3: #26B6B0;--buchtkopf-sonne: #FFE9B0;--buchtkopf-sonne-hell: #FFF3D0;--buchtkopf-rosa: #FF6FA5;--buchtkopf-schleier: #061A24;--buchtkopf-schleier-42: rgba(6,26,36,.42);--buchtkopf-schleier-60: rgba(6,26,36,.6);--buchtkopf-dunkel-45: rgba(0,0,0,.45);--buchtkopf-dunkel-05: rgba(0,0,0,.05);--buchtkopf-dunkel-60: rgba(0,0,0,.6);--buchtkopf-schein: rgba(0,0,0,1);color-scheme:light dark}
:root[data-theme=light]{color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme=light]){color-scheme:dark;--paper: #091A29;--paper2: #0B2C4D;--surface: #0B2236;--ink: #F5F2E9;--ink60: rgba(245,242,233,.72);--ink40: rgba(245,242,233,.5);--line: rgba(255,255,255,.12);--teal-deep: #4ECDC4;--teal-soft: rgba(0,168,150,.16);--knopf-soft: #17324D;--knopf-text: #8CC2F2;--sand: rgba(232,160,19,.14);--gold-tinte: #E8C468;--hebung: #4ECDC4;--papier-82: rgba(9,26,41,.82);--schleier: rgba(9,26,41,.66);--titel: var(--on-dark);--knopf-dunkel: #14406B;--milchglas: rgba(11,34,54,.92);--milchglas-88: rgba(11,34,54,.88);--auswahl: #4ECDC4;--auf-auswahl: #091A29;--marke-filter: invert(.96);--leucht-ende: var(--leucht-hell);--daten-anteil: 50%;--grafik-linie: #8FD0DA;--skelett-grund: var(--paper2);--skelett-schimmer: var(--navy2);--schatten-1: 0 2px 12px rgba(0,0,0,.22);--schatten-2: 0 6px 28px rgba(0,0,0,.24);--schatten-3: 0 10px 44px rgba(0,0,0,.4);--shadow-float: 0 10px 44px rgba(0,0,0,.4);--schatten-marke: 0 14px 34px rgba(0,168,150,.16);--glas-flaeche: rgba(11,34,54,.78);--glas-flaeche-stark: rgba(9,26,41,.84);--glas-deckend: #0B2236;--glas-deckend-stark: #091A29;--glas-rand: rgba(255,255,255,.12);--glas-licht: inset 0 1px 0 rgba(255,255,255,.1);--glas-saettigung: 1.4;--glas-schatten: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4);--glas-schatten-klein: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3);--gk-haupt-schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(31,111,184,.36);--gk-zweit-flaeche: rgba(11,44,77,.88);--gk-zweit-dicht: rgba(11,44,77,.94);--gk-zweit-deckend: #0B2C4D;--gk-zweit-gedrueckt: rgba(23,50,77,.96);--gk-zweit-rand: rgba(255,255,255,.36);--gk-zweit-licht: inset 0 1px 0 rgba(255,255,255,.12);--gk-zweit-glanz: rgba(255,255,255,.06);--gk-zweit-schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3);--gk-gefahr-schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(177,74,42,.34);--gk-chip-an-flaeche: rgba(78,205,196,.9);--gk-chip-an-dicht: rgba(78,205,196,.95);--gk-chip-an-deckend: #4ECDC4;--gk-chip-an-gedrueckt: rgba(78,205,196,.97);--gk-chip-an-rand: rgba(255,255,255,.3);--gk-chip-an-licht: inset 0 1px 0 rgba(255,255,255,.35);--gk-chip-an-glanz: rgba(255,255,255,.25);--gk-chip-an-schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.3);--gk-chip-schrift: rgba(245,242,233,.8);--ring-teal-1: #2EBFAB;--ring-teal-2: #3CCAB6;--ring-teal-3: #4DD4C1;--ring-teal-4: #5FDECB;--ring-aqua-1: #45C6DA;--ring-aqua-2: #5AD0E4;--ring-aqua-3: #6FDAEE;--ring-blau-1: #5E9DEF;--ring-blau-2: #72ABF4;--ring-blau-3: #86B9F8;--ring-indigo-1: #8A92F4;--ring-indigo-2: #9BA2F7;--ring-indigo-3: #ACB2FA;--ring-violett-1: #AA86F1;--ring-violett-2: #B897F5;--ring-violett-3: #C6A8F9;--ring-gold-1: #E2AE38;--ring-gold-2: #EBBE50;--ring-gold-3: #F3CD68;--ring-sieben-1: #4DD4C1;--ring-sieben-2: #72ABF4;--ring-sieben-3: #B897F5;--ring-sieben-4: #EBBE50}}
:root[data-theme=dark]{color-scheme:dark;--paper: #091A29;--paper2: #0B2C4D;--surface: #0B2236;--ink: #F5F2E9;--ink60: rgba(245,242,233,.72);--ink40: rgba(245,242,233,.5);--line: rgba(255,255,255,.12);--teal-deep: #4ECDC4;--teal-soft: rgba(0,168,150,.16);--knopf-soft: #17324D;--knopf-text: #8CC2F2;--sand: rgba(232,160,19,.14);--gold-tinte: #E8C468;--hebung: #4ECDC4;--papier-82: rgba(9,26,41,.82);--schleier: rgba(9,26,41,.66);--titel: var(--on-dark);--knopf-dunkel: #14406B;--milchglas: rgba(11,34,54,.92);--milchglas-88: rgba(11,34,54,.88);--auswahl: #4ECDC4;--auf-auswahl: #091A29;--marke-filter: invert(.96);--leucht-ende: var(--leucht-hell);--daten-anteil: 50%;--grafik-linie: #8FD0DA;--skelett-grund: var(--paper2);--skelett-schimmer: var(--navy2);--schatten-1: 0 2px 12px rgba(0,0,0,.22);--schatten-2: 0 6px 28px rgba(0,0,0,.24);--schatten-3: 0 10px 44px rgba(0,0,0,.4);--shadow-float: 0 10px 44px rgba(0,0,0,.4);--schatten-marke: 0 14px 34px rgba(0,168,150,.16);--glas-flaeche: rgba(11,34,54,.78);--glas-flaeche-stark: rgba(9,26,41,.84);--glas-deckend: #0B2236;--glas-deckend-stark: #091A29;--glas-rand: rgba(255,255,255,.12);--glas-licht: inset 0 1px 0 rgba(255,255,255,.1);--glas-saettigung: 1.4;--glas-schatten: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px rgba(0,0,0,.4);--glas-schatten-klein: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3);--gk-haupt-schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(31,111,184,.36);--gk-zweit-flaeche: rgba(11,44,77,.88);--gk-zweit-dicht: rgba(11,44,77,.94);--gk-zweit-deckend: #0B2C4D;--gk-zweit-gedrueckt: rgba(23,50,77,.96);--gk-zweit-rand: rgba(255,255,255,.36);--gk-zweit-licht: inset 0 1px 0 rgba(255,255,255,.12);--gk-zweit-glanz: rgba(255,255,255,.06);--gk-zweit-schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3);--gk-gefahr-schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(177,74,42,.34);--gk-chip-an-flaeche: rgba(78,205,196,.9);--gk-chip-an-dicht: rgba(78,205,196,.95);--gk-chip-an-deckend: #4ECDC4;--gk-chip-an-gedrueckt: rgba(78,205,196,.97);--gk-chip-an-rand: rgba(255,255,255,.3);--gk-chip-an-licht: inset 0 1px 0 rgba(255,255,255,.35);--gk-chip-an-glanz: rgba(255,255,255,.25);--gk-chip-an-schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.3);--gk-chip-schrift: rgba(245,242,233,.8);--ring-teal-1: #2EBFAB;--ring-teal-2: #3CCAB6;--ring-teal-3: #4DD4C1;--ring-teal-4: #5FDECB;--ring-aqua-1: #45C6DA;--ring-aqua-2: #5AD0E4;--ring-aqua-3: #6FDAEE;--ring-blau-1: #5E9DEF;--ring-blau-2: #72ABF4;--ring-blau-3: #86B9F8;--ring-indigo-1: #8A92F4;--ring-indigo-2: #9BA2F7;--ring-indigo-3: #ACB2FA;--ring-violett-1: #AA86F1;--ring-violett-2: #B897F5;--ring-violett-3: #C6A8F9;--ring-gold-1: #E2AE38;--ring-gold-2: #EBBE50;--ring-gold-3: #F3CD68;--ring-sieben-1: #4DD4C1;--ring-sieben-2: #72ABF4;--ring-sieben-3: #B897F5;--ring-sieben-4: #EBBE50}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block;max-width:100%}
picture{display:contents}
.glas{--glas-grund: var(--glas-flaeche);--glas-filter: blur(var(--glas-unschaerfe)) saturate(var(--glas-saettigung));--glas-kante: var(--glas-rand);--glas-glanz: var(--glas-licht)}
.glas-stark,.sprach-liste{--glas-grund: var(--glas-flaeche-stark);--glas-filter: blur(var(--glas-unschaerfe-stark)) saturate(var(--glas-saettigung));--glas-kante: var(--glas-rand);--glas-glanz: var(--glas-licht)}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.glas{--glas-grund: var(--glas-deckend);--glas-filter: none}.glas-stark,.sprach-liste{--glas-grund: var(--glas-deckend-stark);--glas-filter: none}}
@media (prefers-reduced-transparency: reduce){.glas{--glas-grund: var(--glas-deckend);--glas-filter: none}.glas-stark,.sprach-liste{--glas-grund: var(--glas-deckend-stark);--glas-filter: none}}
.glas,.glas-stark,.sprach-liste{background:var(--glas-grund);-webkit-backdrop-filter:var(--glas-filter);backdrop-filter:var(--glas-filter);border:1px solid var(--glas-kante);box-shadow:var(--glas-schatten),var(--glas-glanz)}
.glas{--ink60: color-mix(in srgb, var(--ink) 80%, transparent)}
.glas,.glas-stark,.sprach-liste{--teal-deep: var(--hebung)}
.search{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-button);padding:0 14px;height:46px;transition:border-color .15s}
.search:focus-within{border-color:var(--teal)}
.search input{flex:1;border:none;outline:none;font-size:var(--schrift-text);color:var(--ink);background:transparent;height:100%}
.sprach-knopf,.start-knopf.geist,.kopf-menue-knopf{--gk-grund: var(--gk-zweit-dicht);--gk-weich: var(--gk-zweit-flaeche);--gk-deckend: var(--gk-zweit-deckend);--gk-gedrueckt: var(--gk-zweit-gedrueckt);--gk-kante: var(--gk-zweit-rand);--gk-licht: var(--gk-zweit-licht);--gk-glanz: var(--gk-zweit-glanz);--gk-schatten: var(--gk-zweit-schatten);--gk-ring: var(--knopf-text);--gk-filter: blur(var(--glas-unschaerfe)) saturate(var(--glas-saettigung));background:linear-gradient(to bottom,var(--gk-ohne-glanz, var(--gk-glanz)),transparent var(--gk-glanz-bis)),var(--gk-zustand, var(--gk-fest, var(--gk-grund)));border:1px solid var(--gk-kante);box-shadow:var(--gk-ohne-schatten, var(--gk-schatten)),var(--gk-licht);scale:var(--gk-druck, none);filter:var(--gk-blass, none);outline:var(--gk-fokus, none) var(--gk-ring);outline-offset:2px;transition:scale var(--zeit-schnell) var(--kurve),box-shadow var(--zeit-schnell) var(--kurve),background-color var(--zeit-schnell) var(--kurve)}
.start-knopf{--gk-grund: var(--gk-haupt-flaeche);--gk-weich: var(--gk-haupt-flaeche);--gk-deckend: var(--gk-haupt-deckend);--gk-gedrueckt: var(--gk-haupt-gedrueckt);--gk-kante: var(--gk-haupt-rand);--gk-licht: var(--gk-haupt-licht);--gk-glanz: var(--gk-haupt-glanz);--gk-schatten: var(--gk-haupt-schatten);--gk-ring: var(--knopf-text);--gk-filter: blur(var(--glas-unschaerfe)) saturate(var(--glas-saettigung));background:linear-gradient(to bottom,var(--gk-ohne-glanz, var(--gk-glanz)),transparent var(--gk-glanz-bis)),var(--gk-zustand, var(--gk-fest, var(--gk-grund)));border:1px solid var(--gk-kante);box-shadow:var(--gk-ohne-schatten, var(--gk-schatten)),var(--gk-licht);scale:var(--gk-druck, none);filter:var(--gk-blass, none);outline:var(--gk-fokus, none) var(--gk-ring);outline-offset:2px;transition:scale var(--zeit-schnell) var(--kurve),box-shadow var(--zeit-schnell) var(--kurve),background-color var(--zeit-schnell) var(--kurve);color:var(--on-brand)}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){*{--gk-fest: var(--gk-deckend)}}
@media (prefers-reduced-transparency: reduce){*{--gk-fest: var(--gk-deckend);--gk-ohne-glanz: transparent;--gk-ohne-filter: none}}
.start{background:var(--paper);color:var(--ink)}
.start-kopf{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:16px clamp(20px,5vw,64px);border-width:0 0 1px;border-color:var(--line);border-radius:0;box-shadow:none}
.start-marke{display:flex;align-items:baseline;gap:7px}
.start-nav{display:flex;gap:26px;margin-left:auto}
.start-nav a{font-size:var(--schrift-m);color:var(--ink60);transition:color .15s}
.start-nav a:hover{color:var(--ink)}
.sprachwahl{position:relative}
.sprach-knopf{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;cursor:pointer;font-family:var(--font-mono);font-size:var(--schrift-xs);letter-spacing:.1em;color:var(--ink60);border-radius:var(--radius-pill)}
.sprach-knopf:hover{color:var(--ink)}
.sprach-pfeil{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform var(--zeit-schnell) var(--kurve)}
.sprach-knopf[aria-expanded=true] .sprach-pfeil{transform:rotate(180deg)}
.sprach-liste{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:168px;padding:6px;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px);overflow-y:auto;border-radius:var(--radius-card);display:flex;flex-direction:column;animation:sprach-auf var(--zeit-schnell) var(--kurve)}
@media (prefers-reduced-motion: reduce){.sprach-liste{animation:none}}
.sprach-eintrag{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius-button);font-size:var(--schrift-text);color:var(--ink);transition:background var(--zeit-schnell)}
.sprach-eintrag:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sprach-eintrag.jetzt{color:var(--hebung);font-weight:600}
.sprach-kuerzel{font-family:var(--font-mono);font-size:var(--schrift-2xs);letter-spacing:.08em;color:var(--ink60);width:20px}
.sprach-eintrag.jetzt .sprach-kuerzel{color:var(--hebung)}
.sprach-liste .konto-trenner{height:1px;margin:4px 6px;background:var(--line)}
.start-kopf :is(.sprach-liste,.konto-liste){--glas-grund: var(--glas-deckend-stark);--glas-filter: none}
.start-kopf .start-knopf.geist{--gk-filter: none}
@media (max-width: 480px){.sprach-pfeil{display:none}.sprach-knopf{padding:7px 6px;min-width:44px;min-height:44px;justify-content:center}}
@media (max-width: 760px){.start-nav{display:none}}
@media (max-width: 480px){.start-kopf{gap:14px;padding-left:16px;padding-right:16px}.start-marke{flex:0 0 auto}.start-kopf-rechts{gap:6px}.start-kopf-rechts .start-knopf.klein{padding:9px 14px}.start-knopf.nur-breit{display:none}}
.start-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:var(--knopf-hoehe);padding:13px 26px;border-radius:var(--radius-knopf);font-size:var(--schrift-text);font-weight:600;letter-spacing:-.01em}
.start-knopf.klein{min-height:var(--knopf-kompakt);padding:9px 18px;font-size:var(--schrift-m)}
.start-knopf:focus-visible,.start-nav a:focus-visible,.sprach-knopf:focus-visible{outline:2px solid var(--knopf-text);outline-offset:2px}
.start-kopf-rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.start-kopf-rechts .start-knopf.klein{white-space:nowrap}
@media (max-width: 1100px){.start-kopf-rechts .start-knopf.nur-breit{display:none}}
button.start-knopf{cursor:pointer;font-family:inherit}
.start-knopf.geist{color:var(--knopf-text)}
.start-knopf.voll{width:100%;margin-top:20px}
.start-abschnitt{max-width:1080px;margin:0 auto;padding:clamp(64px,11vh,132px) clamp(20px,5vw,64px)}
.start-abschnitt.dunkel{max-width:none;color:var(--on-dark);background:linear-gradient(180deg,var(--navy) 0%,var(--navy-tief) 100%);position:relative}
.start-abschnitt.dunkel .abschnitt-ober{color:var(--aqua)}
.start-abschnitt.dunkel .abschnitt-text{color:var(--on-dark-72)}
.mittig{max-width:1080px;margin:0 auto}
.abschnitt-ober{font-family:var(--font-mono);font-size:var(--schrift-2xs);letter-spacing:2.4px;text-transform:uppercase;color:var(--teal-deep);margin-bottom:16px}
.abschnitt-titel{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.03em;margin-bottom:20px}
.abschnitt-titel.klein{font-size:clamp(26px,3.2vw,40px)}
.abschnitt-text{max-width:620px;font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:var(--ink60);margin-bottom:14px}
.abschnitt-text.breit{max-width:760px}
.abschnitt-text em{font-style:italic}
.fehlt-suche{display:flex;gap:10px;flex-wrap:wrap;max-width:560px;margin:6px 0 28px}
.fehlt-suche .search{min-width:0;flex:1 1 180px}
.fehlt-suche .start-knopf{flex:none}
.merksatz{max-width:760px;margin:clamp(26px,4vh,40px) 0;padding:clamp(20px,2.6vw,28px) clamp(22px,3vw,32px);background:var(--surface);border-left:3px solid var(--teal);border-radius:0 var(--radius-panel) var(--radius-panel) 0;box-shadow:var(--schatten-1);font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.1vw,26px);line-height:1.28;letter-spacing:var(--eng-klein);color:var(--titel)}
.merksatz span{display:block;margin-top:12px;font-family:var(--font-body);font-weight:400;font-size:var(--schrift-text);line-height:1.6;letter-spacing:0;color:var(--ink60)}
.start-abschnitt.dunkel .merksatz{background:var(--glas-06);border-left-color:var(--aqua);box-shadow:none;color:var(--on-dark)}
.start-abschnitt.dunkel .merksatz span{color:var(--on-dark-72)}
.start-fuss{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-tiefer) 100%);color:var(--on-dark);padding:clamp(48px,8vh,80px) clamp(20px,5vw,64px) 40px}
.fuss-oben{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--glas-12)}
.fuss-kopf{display:flex;flex-direction:column;max-width:300px}
.fuss-ort{font-size:var(--schrift-s);color:var(--on-dark-72);margin-top:14px}
.fuss-spalten{display:flex;gap:clamp(28px,6vw,72px);flex-wrap:wrap}
.fuss-spalten>div{display:flex;flex-direction:column;gap:9px}
.fuss-spalten b{font-family:var(--font-mono);font-size:var(--schrift-2xs);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-50);margin-bottom:5px}
.fuss-spalten a{font-size:var(--schrift-m);color:var(--on-dark-72);transition:color .15s}
.fuss-spalten a:hover{color:var(--on-dark)}
.fuss-warnung{max-width:1080px;margin:32px auto 0}
.fuss-warnung p{max-width:74ch;padding:2px 0 2px 16px;border-left:2px solid var(--aqua);font-size:var(--schrift-text);line-height:1.65;color:var(--on-dark-72)}
.fuss-jahr{max-width:1080px;margin:28px auto 0;font-family:var(--font-mono);font-size:var(--schrift-2xs);letter-spacing:1.4px;color:var(--on-dark-50)}
.start-marke{font-family:var(--font-display);font-weight:700;font-size:var(--schrift-h3);letter-spacing:.16em;color:var(--ink);text-transform:uppercase}
.start-marke.gross{font-size:22px;color:var(--on-dark)}
.start-fuss .start-marke{color:var(--on-dark)}
.fuss-claim{margin-top:10px;font-family:var(--font-serif);font-style:italic;font-size:clamp(18px,2vw,24px);line-height:1.2;color:var(--aqua)}
@media (max-width: 860px){.start-knopf.klein{padding:12px 18px}.start-nav{display:none}.fuss-spalten a{min-height:44px;display:flex;align-items:center}.fuss-oben{flex-direction:column;gap:28px}.fuss-kopf{max-width:none}}
.abschnitt-bild{margin:40px 0 0;border-radius:var(--radius-panel);overflow:hidden;max-width:760px}
.abschnitt-bild.breit{max-width:none}
.abschnitt-bild img{width:100%;height:auto;display:block}
.abschnitt-bild figcaption{margin-top:12px;font-size:var(--schrift-m);line-height:1.6;color:var(--ink60);max-width:520px}
.start-abschnitt.dunkel .abschnitt-bild figcaption{color:var(--on-dark-72)}
@media (max-width: 860px){.abschnitt-bild{margin-top:28px}}
.start-marke img{width:116px;height:auto;display:block}
.abschnitt-hinweis{margin-top:18px;padding:14px 16px;border-left:2px solid var(--line);font-size:var(--schrift-m);line-height:1.6;color:var(--ink60)}
.start-abschnitt.dunkel .abschnitt-hinweis{border-left-color:var(--glas-22);color:var(--on-dark-72)}
.abschnitt-bild{box-shadow:var(--schatten-2)}
.start-kopf{transition:box-shadow var(--zeit-mittel),background var(--zeit-mittel)}
@media (prefers-reduced-motion: reduce){.start-kopf{transition:none}}
@media (max-width: 560px){.start-kopf-rechts{gap:6px}.start-kopf-rechts .start-knopf.klein{min-height:var(--gk-rund);padding:0 12px;font-size:var(--schrift-s);white-space:nowrap}.start-marke img{width:92px}}
.start-abschnitt.schmal{padding-top:clamp(48px,7vh,88px);padding-bottom:clamp(48px,7vh,88px)}
.fuss-marke{display:flex;align-items:center;gap:12px}
.fuss-marke img{width:34px;height:34px;display:block}
.start-marke.mit-zeichen{display:flex;align-items:center;gap:9px}
.start-marke img.marke-zeichen{width:26px;height:26px;display:block}
.start-kopf .start-marke img{filter:var(--marke-filter)}
.wasserlinie{position:absolute;top:0;left:0;right:0;height:20px;z-index:3;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--glas-06) 0%,transparent 100%)}
.wasserlinie:before,.wasserlinie:after{content:"";position:absolute;top:0;left:-30%;right:-30%;will-change:transform}
.wasserlinie:before{height:2px;background:repeating-linear-gradient(90deg,transparent 0 38px,var(--glas-22) 38px 104px,transparent 104px 214px);animation:linie-oben 61s linear infinite}
.wasserlinie:after{top:3px;height:1px;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0 62px,var(--glas-35) 62px 118px,transparent 118px 178px);animation:linie-unten 83s linear infinite reverse}
@media (prefers-reduced-motion: reduce){.wasserlinie:before,.wasserlinie:after{animation:none}}
@keyframes skelett-schimmer{0%{background-position:200% 0}to{background-position:-200% 0}}
@keyframes sprach-auf{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes linie-oben{to{transform:translate3d(214px,0,0)}}
@keyframes linie-unten{to{transform:translate3d(178px,0,0)}}
/*
 * Was es nur auf den Ortsseiten gibt — hinter dem ausgeschnittenen Stil der
 * Startseite (`stil.mjs`). Farben nur als Tokens aus `:root` von
 * `web-app/src/styles.css`; `tests/ortsseiten.test.js` weist feste Werte ab.
 *
 * Keine Karten, keine Kästen: Text mit Linien dazwischen, wie eine
 * Seitenleiste der Startseite (`docs/WEBSEITE-GESTALTUNG.md`, Punkt 2).
 */

.ortsseite main { display: block; }

/*
 * Die Kopfzeile ohne JavaScript (26.09.2026). Markup und Stil sind die von
 * `SeitenKopf`; wo dort ein Knopf mit Zustand steht, steht hier
 * `<details>` — also: kein Dreieck, der Pfeil dreht sich beim Öffnen, und
 * das Menü hängt unter der Kopfzeile statt als eigenes Blatt danach.
 */
.ortsseite summary { list-style: none; }
.ortsseite summary::-webkit-details-marker { display: none; }
.ortsseite .sprachwahl[open] .sprach-pfeil { transform: rotate(180deg); }
.ortsseite .kopf-menue-knopf .zu,
.ortsseite .kopf-menue[open] .kopf-menue-knopf .auf { display: none; }
.ortsseite .kopf-menue[open] .kopf-menue-knopf .zu { display: block; }
@media (max-width: 760px) {
  .ortsseite .kopf-blatt { position: absolute; top: 100%; left: 0; right: 0; }
}

/* Der Kopf einer Ortsseite ist ein ruhiger Titelabschnitt, keine Bühne. */
.ort-kopf { padding-bottom: clamp(28px, 5vh, 56px); }
.ort-kopf .abschnitt-titel { margin-bottom: 14px; }

.ort-pfad {
  font-size: var(--schrift-m); color: var(--ink60); margin-bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 4px;
}
.ort-pfad a { color: var(--teal-deep); }
.ort-pfad a:hover { text-decoration: underline; }

.ort-auch { font-size: var(--schrift-text); color: var(--ink60); margin: -4px 0 16px; }
.ort-unter { font-size: var(--schrift-text); line-height: 1.9; margin: 8px 0 4px; }
.ort-unter a { color: var(--teal-deep); }

.ort-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.ort-klein { font-size: var(--schrift-m); line-height: 1.6; color: var(--ink60); }
p.ort-klein { margin-top: 8px; }

/* Die Teile der Faktenseite: Überschrift, Text, eine Linie davor. */
.ort-fakten { padding-top: 0; }
.ort-teil { max-width: 760px; }
.ort-teil + .ort-teil { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.ort-teil h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: var(--eng-klein); line-height: 1.2; margin-bottom: 12px;
}
.ort-teil h2 a { color: inherit; }
.ort-teil h2 a:hover { color: var(--teal-deep); }
.ort-teil h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--schrift-l);
  margin: 22px 0 8px;
}
.ort-teil p { font-size: var(--schrift-l); line-height: 1.7; color: var(--ink60); margin-bottom: 10px; }
.ort-teil p.ort-klein { font-size: var(--schrift-m); }
.ort-teil a { color: var(--teal-deep); }
.ort-teil a:hover { text-decoration: underline; }
.ort-teil .merksatz { margin: 6px 0 14px; }

/* Die Windrichtungen: eine schlichte Tabelle, die Einstufung als Wort. */
.ort-tabelle-rahmen { overflow-x: auto; margin: 14px 0 16px; }
.ort-tabelle { border-collapse: collapse; width: 100%; max-width: 460px; font-size: var(--schrift-text); }
.ort-tabelle th, .ort-tabelle td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.ort-tabelle thead th { font-family: var(--font-display); font-weight: 700; font-size: var(--schrift-m); color: var(--ink); }
.ort-tabelle tbody th { font-weight: 500; color: var(--ink); }
.ort-note { font-weight: 600; }
.ort-note.gut { color: var(--note-gut); }
.ort-note.mittel { color: var(--ink60); }
.ort-note.schlecht { color: var(--note-schlecht); }

/* Eine Liste mit Linien: links die Sache, rechts die Angabe. */
.ort-liste { list-style: none; margin: 6px 0 4px; padding: 0; }
.ort-liste li {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--schrift-text); color: var(--ink);
}
.ort-liste li:last-child { border-bottom: 0; }

.ort-regeln { margin: 6px 0 8px 20px; }
.ort-regeln li { font-size: var(--schrift-text); line-height: 1.65; color: var(--ink); margin-bottom: 8px; }
.ort-regeln li .ort-klein { display: block; }

/* Die Ortslisten der Reviere: in Spalten, damit 400 Buchten keine Rolle werden. */
.ort-spalten { list-style: none; padding: 0; margin: 6px 0 10px; columns: 2 260px; column-gap: 32px; }
.ort-spalten li { break-inside: avoid; padding: 5px 0; font-size: var(--schrift-text); line-height: 1.45; }
.ort-spalten a { color: var(--ink); }
.ort-spalten a:hover { color: var(--teal-deep); text-decoration: underline; }

.ort-foto { max-width: 860px; }
.ort-foto figcaption a { color: inherit; text-decoration: underline; }

.ort-heute .start-knopf { margin-top: 10px; }
.ort-schluss { padding-top: clamp(40px, 7vh, 72px); }
.ort-quellen p.ort-klein { margin-bottom: 4px; }

/* Die Datenquellen im Fuss — leiser als der Sicherheitshinweis darüber. */
.fuss-quellen {
  max-width: 1080px; margin: 18px auto 0; font-size: var(--schrift-s); line-height: 1.6;
  color: var(--on-dark-72);
}