@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/plus-jakarta-sans-latin.cd8db90c.woff2') format('woff2'); }
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/young-serif-latin.0473ce5e.woff2') format('woff2'); }

/* ---------- 1. Tokens (Papier ist Standard, Richtung Reisejournal 07.10.) ---------- */
:root {
  
  color-scheme: light;
  --grund: #f3ecdf; --f1: #fffcf7; --f2: #f4ede0; --f3: #ebe2d0; --sand: #efe6d6;
  --linie: #ebe2d1; --linie-stark: #cdbfa3; --kante: rgba(70, 45, 10, 0.07);
  --tinte: #1d1a16; --text: #2e2a24; --ui: #4a4339; --leise: #5f5647; --leiser: #6b6152;
  --link: var(--tinte); --titel-hover: var(--tinte);
  --gelb-schein: transparent; --marker-band: rgba(255, 224, 38, 0.9); --marker-hoehe: 0.45em;
  --strich: rgba(255, 224, 38, 0.9); --strich-hoehe: 0.45em;
  --gruen: #2f6b46; --gruen-ton: rgba(47, 107, 70, 0.14); --auf-gruen: #fbf7ef;
  --gold: #8a5a10; --rot: #b81f1b; --rot-ton: rgba(184, 31, 27, 0.4); --rot-pille: #b81f1b; --rot-flaeche: #f8e4dc;
  --e2: 0 1px 2px rgba(60, 40, 10, 0.06), 0 8px 18px -10px rgba(60, 40, 10, 0.22);
  --e3: 0 2px 6px rgba(60, 40, 10, 0.08), 0 22px 44px -18px rgba(60, 40, 10, 0.32);
  --e-karte: 0 1px 2px rgba(70, 45, 10, 0.05), 0 8px 24px rgba(70, 45, 10, 0.055);
  --e-karte-hoch: 0 2px 4px rgba(70, 45, 10, 0.06), 0 14px 32px rgba(70, 45, 10, 0.1);
  --e-gelb: inset 0 -1px 0 rgba(90, 70, 0, 0.18), 0 4px 10px -6px rgba(90, 70, 0, 0.45);
  --scrim: rgba(29, 26, 22, 0.42);
  --av1: #e6dcc3; --av2: #ddd0b4; --av3: #d3c5a7; --av4: #eae0c9; --av5: #e0d3b8;
  --logo-filter: invert(1);
  --schalter-bahn: #9c8f74; --schalter-knopf: #fffdf6;
  --heat-1: rgba(47, 107, 70, 0.3); --heat-2: rgba(47, 107, 70, 0.6); --heat-3: #2f6b46;
  --toast-text: #fbf7ef;
  --papier-grund: #f8f2e6;
  --papier: radial-gradient(110% 70% at 12% -10%, rgba(255, 253, 248, 0.6), rgba(255, 253, 248, 0) 65%), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.55'%20numOctaves%3D'4'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.40%200%200%200%200%200.28%200%200%200%200%200.13%201.3%200%200%200%20-0.35'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'300'%20height%3D'300'%20filter%3D'url(%23f)'%20opacity%3D'0.2'%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'600'%20height%3D'600'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.06'%20numOctaves%3D'4'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.40%200%200%200%200%200.28%200%200%200%200%200.13%201.4%200%200%200%20-0.45'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'600'%20height%3D'600'%20filter%3D'url(%23f)'%20opacity%3D'0.075'%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1400'%20height%3D'1400'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.0022'%20numOctaves%3D'2'%20seed%3D'11'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.40%200%200%200%200%200.28%200%200%200%200%200.13%201.6%200%200%200%20-0.62'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'1400'%20height%3D'1400'%20filter%3D'url(%23f)'%20opacity%3D'0.07'%2F%3E%3C%2Fsvg%3E"); --papier-groesse: 100% 1000px, 300px 300px, 600px 600px, 1400px 1400px; --papier-wdh: no-repeat, repeat, repeat, repeat;

  /* Handlung: nur Klickbares */
  --gelb: #ffe026; --gelb-hover: #ffd60a; --auf-gelb: #1c1915;
  /* Markenrot als reiner Akzent (Linien, Punkte), Schrift in Rot nimmt --rot/--stempel */
  --marke-rot: #ff3130;
  --karte-meer: #0b0e14; --karte-land: #1b2030;
  /* Typo, Raster, Radien, Bewegung */
  --schrift: 'Plus Jakarta Sans', 'Open Sans', Arial, Helvetica, sans-serif;
  --titel-schrift: 'Young Serif', Georgia, 'Times New Roman', serif;
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px;
  /* Rund (Nikita 07.10. abends: "zu blockig, mehr Rundheit"): Bogen 16, Knopf 12, Reiter und Schilder als Pille */
  --r-card: 16px; --r-btn: 12px;
  --r-anh: 999px; --r-feld: 12px; --r-kasten: 16px; --r-gross: 16px; --r-ticket: 16px; --r-blatt: 22px; --r-pille: 999px;
  /* Bewegung: weich und ruhig, schnell rein, langsam raus, kein Ueberschwingen */
  --kurve: cubic-bezier(0.22, 1, 0.36, 1); --rein: 140ms; --raus: 500ms; --ui-zeit: 280ms;
  /* Bewegung (28.09.): Feder = kleiner Ueberschwinger fuer Pop und Blatt, Druck = kurzes Einsinken.
     Alle Wege stehen als Tokens, damit prefers-reduced-motion sie an einer Stelle auf null setzt. */
  --feder: var(--kurve); --feder-sanft: var(--kurve); --druck-zeit: 60ms;
  --hub: -2px; --hub-klein: -1px; --schub: 0px; --zoom: 1; --druck: 0.98; --sinken: 0.995; --auf-weg: 6px; --auf-skala: 0.98; --kipp: 0deg;
  --breite: 1120px; --rand: 20px; --seitenleiste: 300px; --spalt: 24px; /* kompakt (Nikita 07.10.: kein offener Platz) */
  --kopf-h: 58px; --leiste-h: 0px;

  /* Alte Namen (vor dem 27.09.) zeigen auf die neuen Tokens, damit Seiten-STYLEs weiterlaufen.
     Neue Seiten nehmen die Namen oben. --text heisst jetzt Fliesstext, Titel sind --tinte. */
  --bg: var(--grund); --bg-alt: var(--grund); --bg-card: var(--f1); --bg-elevated: var(--f2); --bg-hover: var(--f3);
  --text-muted: var(--ui); --text-subtle: var(--leise);
  --accent: var(--gelb); --accent-hover: var(--gelb-hover); --accent-text: var(--auf-gelb);
  --accent-soft: var(--f2); --accent-ink: var(--tinte); --blau: var(--tinte);
  --border: var(--linie-stark); --border-soft: var(--linie);
  --kopf-bg: var(--grund);
  --leiste-bg: var(--grund);
  --schatten: var(--e3); --schatten-klein: var(--e2);
  --radius: var(--r-kasten); --radius-sm: 8px; --radius-button: var(--r-pille);
  --font: var(--schrift); --ein: var(--rein) var(--kurve);
}
:root[data-thema="hell"] {
  color-scheme: light;
  --grund: #f3ecdf; --f1: #fffcf7; --f2: #f4ede0; --f3: #ebe2d0; --sand: #efe6d6;
  --linie: #ebe2d1; --linie-stark: #cdbfa3; --kante: rgba(70, 45, 10, 0.07);
  --tinte: #1d1a16; --text: #2e2a24; --ui: #4a4339; --leise: #5f5647; --leiser: #6b6152;
  --link: var(--tinte); --titel-hover: var(--tinte);
  --gelb-schein: transparent; --marker-band: rgba(255, 224, 38, 0.9); --marker-hoehe: 0.45em;
  --strich: rgba(255, 224, 38, 0.9); --strich-hoehe: 0.45em;
  --gruen: #2f6b46; --gruen-ton: rgba(47, 107, 70, 0.14); --auf-gruen: #fbf7ef;
  --gold: #8a5a10; --rot: #b81f1b; --rot-ton: rgba(184, 31, 27, 0.4); --rot-pille: #b81f1b; --rot-flaeche: #f8e4dc;
  --e2: 0 1px 2px rgba(60, 40, 10, 0.06), 0 8px 18px -10px rgba(60, 40, 10, 0.22);
  --e3: 0 2px 6px rgba(60, 40, 10, 0.08), 0 22px 44px -18px rgba(60, 40, 10, 0.32);
  --e-karte: 0 1px 2px rgba(70, 45, 10, 0.05), 0 8px 24px rgba(70, 45, 10, 0.055);
  --e-karte-hoch: 0 2px 4px rgba(70, 45, 10, 0.06), 0 14px 32px rgba(70, 45, 10, 0.1);
  --e-gelb: inset 0 -1px 0 rgba(90, 70, 0, 0.18), 0 4px 10px -6px rgba(90, 70, 0, 0.45);
  --scrim: rgba(29, 26, 22, 0.42);
  --av1: #e6dcc3; --av2: #ddd0b4; --av3: #d3c5a7; --av4: #eae0c9; --av5: #e0d3b8;
  --logo-filter: invert(1);
  --schalter-bahn: #9c8f74; --schalter-knopf: #fffdf6;
  --heat-1: rgba(47, 107, 70, 0.3); --heat-2: rgba(47, 107, 70, 0.6); --heat-3: #2f6b46;
  --toast-text: #fbf7ef;
  --papier-grund: #f8f2e6;
  --papier: radial-gradient(110% 70% at 12% -10%, rgba(255, 253, 248, 0.6), rgba(255, 253, 248, 0) 65%), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'300'%20height%3D'300'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.55'%20numOctaves%3D'4'%20seed%3D'7'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.40%200%200%200%200%200.28%200%200%200%200%200.13%201.3%200%200%200%20-0.35'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'300'%20height%3D'300'%20filter%3D'url(%23f)'%20opacity%3D'0.2'%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'600'%20height%3D'600'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.06'%20numOctaves%3D'4'%20seed%3D'5'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.40%200%200%200%200%200.28%200%200%200%200%200.13%201.4%200%200%200%20-0.45'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'600'%20height%3D'600'%20filter%3D'url(%23f)'%20opacity%3D'0.075'%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1400'%20height%3D'1400'%3E%3Cfilter%20id%3D'f'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.0022'%20numOctaves%3D'2'%20seed%3D'11'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.40%200%200%200%200%200.28%200%200%200%200%200.13%201.6%200%200%200%20-0.62'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'1400'%20height%3D'1400'%20filter%3D'url(%23f)'%20opacity%3D'0.07'%2F%3E%3C%2Fsvg%3E"); --papier-groesse: 100% 1000px, 300px 300px, 600px 600px, 1400px 1400px; --papier-wdh: no-repeat, repeat, repeat, repeat;
}
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --grund: #0d0c0a; --f1: #161512; --f2: #1f1d19; --f3: #29261f;
  --linie: #24221d; --linie-stark: #3a362d;
  --tinte: #f4efe3; --text: #dcd6c8; --ui: #b8b1a1; --leise: #938b7b; --leiser: #7a7364;
  --link: var(--gelb); --titel-hover: var(--gelb);
  --gelb-schein: transparent; --marker-band: #ffe026; --marker-hoehe: 0px;
  --strich: var(--gelb); --strich-hoehe: 2px;
  --gruen: #4fc08a; --gruen-ton: rgba(79, 192, 138, 0.14); --auf-gruen: #03140c;
  --gold: #d8b654; --rot: #ff3130; --rot-ton: rgba(255, 49, 48, 0.5); --rot-pille: #d32423;
  --e2: 2px 3px 0 rgba(0, 0, 0, 0.5);
  --e3: 4px 6px 0 rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.6);
  --av1: #2b2925; --av2: #35322c; --av3: #3f3b33; --av4: #26241f; --av5: #312e28;
  --logo-filter: none;
  --schalter-bahn: #3a362d; --schalter-knopf: #ffffff;
  --heat-1: rgba(79, 192, 138, 0.28); --heat-2: rgba(79, 192, 138, 0.55); --heat-3: #4fc08a;
  --toast-text: #000000;
  --kante: rgba(255, 255, 255, 0.07); --rot-flaeche: rgba(255, 49, 48, 0.12);
  --e-karte: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  --e-karte-hoch: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 34px -16px rgba(0, 0, 0, 0.8);
  --e-gelb: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  --papier: none; --papier-groesse: auto; --papier-wdh: repeat; --sand: #29261f; --papier-grund: var(--grund);
}
@media (prefers-color-scheme: dark) { :root[data-thema="auto"] {
  color-scheme: dark;
  --grund: #0d0c0a; --f1: #161512; --f2: #1f1d19; --f3: #29261f;
  --linie: #24221d; --linie-stark: #3a362d;
  --tinte: #f4efe3; --text: #dcd6c8; --ui: #b8b1a1; --leise: #938b7b; --leiser: #7a7364;
  --link: var(--gelb); --titel-hover: var(--gelb);
  --gelb-schein: transparent; --marker-band: #ffe026; --marker-hoehe: 0px;
  --strich: var(--gelb); --strich-hoehe: 2px;
  --gruen: #4fc08a; --gruen-ton: rgba(79, 192, 138, 0.14); --auf-gruen: #03140c;
  --gold: #d8b654; --rot: #ff3130; --rot-ton: rgba(255, 49, 48, 0.5); --rot-pille: #d32423;
  --e2: 2px 3px 0 rgba(0, 0, 0, 0.5);
  --e3: 4px 6px 0 rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.6);
  --av1: #2b2925; --av2: #35322c; --av3: #3f3b33; --av4: #26241f; --av5: #312e28;
  --logo-filter: none;
  --schalter-bahn: #3a362d; --schalter-knopf: #ffffff;
  --heat-1: rgba(79, 192, 138, 0.28); --heat-2: rgba(79, 192, 138, 0.55); --heat-3: #4fc08a;
  --toast-text: #000000;
  --kante: rgba(255, 255, 255, 0.07); --rot-flaeche: rgba(255, 49, 48, 0.12);
  --e-karte: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  --e-karte-hoch: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 34px -16px rgba(0, 0, 0, 0.8);
  --e-gelb: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  --papier: none; --papier-groesse: auto; --papier-wdh: repeat; --sand: #29261f; --papier-grund: var(--grund);
} }

/* ---------- 2. Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; background: var(--grund); }
body { margin: 0; background: var(--grund); color: var(--ui); font: 400 15px/1.55 var(--schrift); min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--tinte); text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
svg { width: 1em; height: 1em; flex: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--gelb); color: var(--auf-gelb); }
/* Fokus: 2 px Tinte am Rand, Gelb aussen, in beiden Themen sichtbar */
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; box-shadow: 0 0 0 2px var(--tinte); }
h1, h2, h3, h4 { color: var(--tinte); line-height: 1.2; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
kbd { font: inherit; font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 6px; border: 1px solid var(--linie-stark); border-bottom-width: 2px; border-radius: 5px; color: var(--ui); }
.i { width: 20px; height: 20px; flex: none; }
.i--16 { width: 16px; height: 16px; } .i--24 { width: 24px; height: 24px; } .i--32 { width: 32px; height: 32px; }
.ikon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }

/* Typo-Rollen (Satzschreibung; Versalien nur fuer Schilder und einen Marken-Moment) */
.t-anzeige { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tinte); }
.t-h1 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; color: var(--tinte); }
.t-h2 { font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--tinte); }
.t-h3 { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--tinte); }
.t-text { font-size: 16px; line-height: 1.6; color: var(--text); }
.t-lang { font-size: 17px; line-height: 1.7; color: var(--text); max-width: 62ch; }
.t-meta { font-size: 13px; line-height: 1.45; color: var(--leise); }
.t-schild { font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.zahl-tab { font-variant-numeric: tabular-nums; }

/* ---------- 3. Bewegung: schnell rein, weich raus ---------- */
.knopf, .ikon, .kopf__weg, .markerstrich, .reiterleiste a, .segment > *, .menue__liste a, .menue__liste button, .leiste-unten__schalter, .wegweiser__weg, .kasten--klick, .feld {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity, background-size;
  transition-duration: var(--raus); transition-timing-function: var(--kurve);
}
.knopf:hover, .ikon:hover, .kopf__weg:hover, .markerstrich:hover, .reiterleiste a:hover, .segment > *:hover, .menue__liste a:hover, .menue__liste button:hover, .leiste-unten__schalter:hover, .wegweiser__weg:hover, .kasten--klick:hover, .feld:hover { transition-duration: var(--rein); }
/* Druecken: kurz einsinken, beim Loslassen federt es ueber --raus zurueck. */
.knopf:active, .ikon:active, .leiste-unten__schalter:active { transform: scale(var(--druck)); transition-duration: var(--druck-zeit); }
.leiste-unten__aktion:active { transition-duration: var(--druck-zeit); }
/* Gelbe Hauptaktion hebt sich beim Ueberfahren um 1 px (nur mit Maus, am Handy bleibt kein Hover kleben). */
@media (hover: hover) and (pointer: fine) {
  .knopf--gelb:hover:not([disabled]):not(.knopf--aus), .knopf--ja:hover:not([disabled]) { transform: translateY(var(--hub-klein)); }
  .knopf--gelb:active:not([disabled]), .knopf--ja:active:not([disabled]) { transform: translateY(0) scale(var(--druck)); }
}
.knopf[disabled]:active, .knopf--aus:active { transform: none; }
/* Ikonknopf: beim Hover nur Flaeche einfaerben, nichts waechst (Nikita 07.10.). */
.ikon::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: var(--f2); opacity: 0; transition: opacity var(--raus) var(--kurve); pointer-events: none; }
.ikon > svg, .ikon > .i, .ikon > img { position: relative; }
.ikon--rand::before { display: none; }
@media (hover: hover) { .ikon:hover::before { opacity: 1; transition-duration: var(--rein); } }
.ikon:active::before, .ikon[aria-expanded="true"]::before, .menue[open] > summary.ikon::before { opacity: 1; transition-duration: var(--druck-zeit); }
/* Namen, Titel und Zeilenlinks: beim Hover nur Farbe, kein Strich (Nikita 07.10.: der duenne
   wachsende Unterstrich sieht nach KI aus). Titel werden gelb, Namen und Meta-Links hell. Die
   Hover-Ausloeser stehen bei den Bausteinen (ganze Zeile oder der Link selbst). */
.unterstrich, .name-level a, .bz__titel a, .bz__name, .bz__thema, .aushang__zeile b, .regal__titel a, .rest__name, .stzeile__titel, .modul-link__titel, .kommentar__name, .artikel__wer .t-meta a {
  text-decoration: none; background: none;
  transition: color var(--raus) var(--kurve);
}
.unterstrich:hover, .name-level a:hover, .bz__name:hover, .bz__thema:hover, .regal__titel a:hover, .rest__name:hover, .kommentar__name:hover, .artikel__wer .t-meta a:hover,
.bz:hover .bz__titel a, .aushang__zeile:hover b, .regal > li:hover .regal__titel a, .rest li:hover .rest__name, a.stzeile:hover .stzeile__titel, .modul-link:hover .modul-link__titel, .bz:has(.beitrag__titel:focus-visible) .bz__titel a {
  color: var(--tinte); text-decoration: none; transition-duration: var(--rein);
}
.bz:hover .bz__titel a, .bz:hover .beitrag__titel, .aushang__zeile:hover b, .regal > li:hover .regal__titel a, a.stzeile:hover .stzeile__titel, .modul-link:hover .modul-link__titel, .bz:has(.beitrag__titel:focus-visible) .bz__titel a { color: var(--titel-hover); }
/* Fokus-Ring nur bei Tastatur, rastet mit einem kurzen Zug ein. */
:focus-visible { animation: fokus-rein 180ms var(--kurve); }
@keyframes fokus-rein { from { outline-offset: 6px; } to { outline-offset: 2px; } }
/* Einblenden: Menues und Schwebekaesten klappen aus ihrer Ecke auf, Dialoge wachsen leicht, Blaetter fahren hoch. */
@keyframes auf { from { opacity: 0; translate: 0 calc(-1 * var(--auf-weg)); scale: var(--auf-skala); } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes auf-hoch { from { opacity: 0; translate: 0 var(--auf-weg); scale: var(--auf-skala); } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes dialog-auf { from { opacity: 0; translate: 0 10px; scale: 0.96; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes blatt-hoch { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes schleier-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes daumen-pop { 0% { transform: scale(1) rotate(0); } 22% { transform: scale(0.78) rotate(-6deg); } 55% { transform: scale(1.28) rotate(-14deg); } 78% { transform: scale(0.94) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes daumen-ab { 0% { transform: scale(1); } 40% { transform: scale(0.8) translateY(1px); } 100% { transform: scale(1); } }
@keyframes ring-weg { from { opacity: 0.7; transform: scale(0.6); } to { opacity: 0; transform: scale(1.7); } }
@keyframes live-puls { 0% { box-shadow: 0 0 0 0 var(--rot-ton); } 100% { box-shadow: 0 0 0 9px rgba(0, 0, 0, 0); } }
@keyframes atmen { from { opacity: 0.45; } to { opacity: 1; } }
.menue[open] > .menue__liste { animation: auf 200ms var(--kurve) both; transform-origin: top right; }
.popover:not([hidden]), .mk:not([hidden]), .likes:not([hidden]) { animation: auf 220ms var(--kurve) both; transform-origin: top left; }
.popover:not([hidden]) { transform-origin: top right; }
dialog[open].dialog, dialog[open].suchdialog { animation: dialog-auf 280ms var(--kurve) both; }
dialog[open]::backdrop { animation: schleier-auf 260ms var(--kurve) both; }
/* Daumen: federnder Pop beim Druecken (app.js setzt like--pop bzw. like--ab), dazu ein gelber Ring. */
.like { position: relative; }
/* entfernt 07.10. (ruhig): .like.like--pop svg */
/* entfernt 07.10. (ruhig): .like.like--ab svg */
/* entfernt 07.10. (ruhig): .like.like--pop::after */
/* Handy: Antippen gibt sofort Rueckmeldung (Hover gibt es dort nicht), der graue Standard-Blitz entfaellt. */
html { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  :root { --hub: 0px; --hub-klein: 0px; --schub: 0px; --zoom: 1; --druck: 1; --sinken: 1; --auf-weg: 0px; --auf-skala: 1; --kipp: 0deg; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation: none !important; }
  .leiste-unten__aktion:active, .ikon::before, .weiter__spiel, .bz__zaehler .i, .like svg { transform: none !important; }
}

/* ---------- 4. Kopf: eine Etage ---------- */
.kopf { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); background: var(--kopf-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
.kopf__zeile { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); height: var(--kopf-h); display: flex; align-items: center; gap: 24px; }
.kopf__marke { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
.kopf__marke img { height: 16px; width: auto; filter: var(--logo-filter); }
html img[src="/assets/freiformation-wortmarke.1ae2857b.png"] { filter: var(--logo-filter); }
.kopf__marke span { font-size: 13px; font-weight: 600; color: var(--leise); white-space: nowrap; }
.kopf__wege { display: flex; align-items: center; gap: 2px; min-width: 0; }
.kopf__weg { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px; font-size: 15px; font-weight: 600; color: var(--ui); white-space: nowrap; }
.kopf__weg { border-radius: 8px; transition: background-color var(--raus) var(--kurve), color var(--raus) var(--kurve); }
.kopf__weg:hover { color: var(--tinte); background: var(--f3); transition-duration: var(--rein); }
.kopf__weg[aria-current] { color: var(--tinte); }
.kopf__weg[aria-current] { background: var(--f3); }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.kopf__rechts .menue { margin-left: 6px; }
.kopf__zeile .kopf__zurueck, .kopf__untertitel { display: none; }
.kopf__untertitel { font-weight: 800; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-size: 16px; }
/* Sieben Bereiche plus Wortmarke und vier Knoepfe brauchen Platz: bis 1340 px enger setzen. */
@media (min-width: 1024px) and (max-width: 1340px) {
  .kopf__zeile { gap: 16px; }
  .kopf__marke span { display: none; }
  .kopf__weg { padding: 0 9px; }
  .kopf__weg::after { left: 9px; right: 9px; }
}
@media (min-width: 1024px) and (max-width: 1150px) {
  .kopf__zeile { gap: 10px; }
  .kopf__marke img { height: 14px; }
  .kopf__weg { padding: 0 7px; font-size: 14px; }
  .kopf__weg::after { left: 7px; right: 7px; }
  .kopf__rechts { gap: 0; }
}

/* Standort-Punkt "du bist hier" (aktiver Bereich, aktiver Reiter, eigener Ort) und andere Zustandszeichen */
.hier-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-ton); flex: none; }
.neu-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); flex: none; }
.live-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); flex: none; animation: live-puls 1.6s var(--kurve) infinite; }
.neu-wort { font-size: 12px; font-weight: 800; color: var(--gruen); letter-spacing: 0.02em; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }

/* Menue (details/summary), schwebend E2 */
.menue { position: relative; }
.menue > summary { list-style: none; cursor: pointer; }
.menue > summary::-webkit-details-marker { display: none; }
.menue__liste { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--f1); border: 1px solid var(--linie-stark); border-radius: var(--r-kasten); box-shadow: var(--e2); padding: 6px; z-index: 30; display: grid; gap: 1px; --hinter: var(--f1); }
.menue__liste a, .menue__liste button:not(.knopf) { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--tinte); font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; }
.menue__liste a:hover, .menue__liste button:not(.knopf):hover { background: var(--f2); color: var(--tinte); }
.menue__liste .i { color: var(--leise); }
.menue__kopf { display: grid; padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--linie); min-width: 0; }
.menue__kopf b { color: var(--tinte); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menue__kopf span { font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menue__trenner { height: 1px; background: var(--linie); margin: 4px 0; }
.menue__rot, .menue__liste .menue__rot { color: var(--rot); }
/* Darstellung Hell/Dunkel/System (Cookie ff_thema + localStorage, public-community/thema.js) */
.menue__thema { margin-top: 4px; padding: 8px 12px 6px; border-top: 1px solid var(--linie); }
.menue__thema > span { display: block; margin-bottom: 6px; }
.thema-form { margin: 0; }
.thema-wahl { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border: 1px solid var(--linie-stark); border-radius: 10px; }
.thema-wahl label { position: relative; text-align: center; font-size: 13px; font-weight: 700; padding: 6px 6px; border-radius: 7px; cursor: pointer; color: var(--ui); white-space: nowrap; }
@media (hover: hover) { .thema-wahl label:hover { color: var(--tinte); box-shadow: inset 0 -2px 0 var(--gelb); } }
.thema-wahl label:has(input:checked) { background: var(--f3); color: var(--tinte); box-shadow: none; }
.thema-wahl label:has(input:focus-visible) { outline: 3px solid var(--gelb); outline-offset: 1px; }
.thema-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

/* Suche: Lupe oder Taste / oeffnet den Dialog (public-community/rahmen.js) */
.suchdialog { margin: 12vh auto auto; width: calc(100% - 32px); max-width: 640px; padding: 0; }
.suchdialog__form { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 16px; margin: 0; color: var(--leise); }
.suchdialog__form input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font-size: 18px; color: var(--tinte); }
.suchdialog__form input::placeholder { color: var(--leise); }
.suchdialog__form input:focus-visible { outline: none; box-shadow: none; }
.suchdialog:has(input:focus-visible) { border-color: var(--tinte); }
.suchdialog__form input::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; cursor: pointer; }
.suchdialog__tipp { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--leise); }

/* ---------- 5. Handy: Daumenleiste und Wegweiser (unter 1024 px) ---------- */
.leiste-unten, .wegweiser, .wegweiser__scrim { display: none; }
.wegweiser:focus { outline: none; box-shadow: none; }
.wegweiser__griff { width: 40px; height: 4px; border-radius: 4px; background: var(--linie-stark); margin: 0 auto 14px; }
.wegweiser__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wegweiser__wege { list-style: none; margin: 0; padding: 0; }
.wegweiser__weg { display: flex; align-items: center; gap: 12px; min-height: 54px; border-bottom: 1px solid var(--linie); font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--tinte); }
.wegweiser__weg .i { color: var(--leise); }
.wegweiser__weg:hover .wegweiser__name { text-decoration: underline 2px var(--gelb); text-underline-offset: 5px; }
.wegweiser__weg[aria-current] .i { color: var(--gruen); }
.wegweiser__info { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--leise); }
.wegweiser__info--gruen { color: var(--gruen); }
.wegweiser__info--rot { color: var(--rot); }
.wegweiser__name { flex: 1; min-width: 0; }
.wegweiser__weg .hier-punkt { margin-left: 8px; }
.wegweiser__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.wegweiser__fuss .thema-form { flex: 1 1 220px; }

/* ---------- 6. Live-Leiste, App-Hinweis, Fuss ---------- */
.live-leiste { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 6px var(--rand); background: var(--f1); color: var(--tinte); border-bottom: 1px solid var(--linie); font-weight: 700; }
.live-leiste__innen { max-width: calc(var(--breite) - 2 * var(--rand)); margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 12px; min-width: 0; }
.live-leiste__punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rot); animation: live-puls 1.6s var(--kurve) infinite; }
.live-leiste__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.live-leiste__text b { color: var(--rot); font-weight: 800; }
.live-leiste__text small { font-weight: 600; font-size: 13px; color: var(--ui); }
.live-leiste__knopf { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--r-pille); background: var(--gelb); color: var(--auf-gelb); font-size: 13px; font-weight: 800; transition: background-color var(--raus) var(--kurve), box-shadow var(--raus) var(--kurve); }
.live-leiste:hover .live-leiste__knopf { background: var(--gelb-hover); box-shadow: 0 0 0 5px var(--gelb-schein); transition-duration: var(--rein); }

.pwa-hinweis { position: fixed; left: 12px; right: 12px; bottom: calc(var(--leiste-h) + 8px); z-index: 24; display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 14px; background: var(--f1); color: var(--ui); border: 1px solid var(--linie-stark); border-radius: var(--r-kasten); box-shadow: var(--e2); font-size: 13.5px; line-height: 1.4; }
.pwa-hinweis span { flex: 1; min-width: 0; }
.pwa-hinweis b { color: var(--tinte); }
.pwa-hinweis button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--ui); display: grid; place-items: center; cursor: pointer; }
.pwa-hinweis button:hover { background: var(--f2); color: var(--tinte); }

.seitenfuss { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 20px var(--rand) 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--leise); }
.seitenfuss a { color: var(--leise); }
.seitenfuss a:hover { color: var(--tinte); text-decoration: underline 2px var(--gelb); text-underline-offset: 4px; }

/* ---------- 7. Raster und Seitenkopf ---------- */
.raster { max-width: var(--breite); margin: 0 auto; padding: 32px var(--rand) 96px; display: grid; grid-template-columns: minmax(0, 1fr) var(--seitenleiste); gap: var(--spalt); width: 100%; flex: 1; align-items: start; }
.raster--voll { grid-template-columns: minmax(0, 1fr); }
/* Landing (ausgeloggt: Anmelden, Beitreten, Ueber uns, Zustimmung): gleiches Mass wie jede Seite, ohne
   Daumenleiste darunter, deshalb weniger Fussraum. */
.raster--landing { max-width: var(--breite); padding: 32px var(--rand) 64px; }
.haupt { min-width: 0; }
.seitenleiste { display: grid; gap: 20px; min-width: 0; }
.seitenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.seitenkopf__text { min-width: 0; }
.seitenkopf__zeile { margin-top: 6px; }
.seitenkopf__aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ui); margin-bottom: 20px; }
.zurueck:hover { color: var(--tinte); }

/* ---------- 8. Bausteine ---------- */
/* Knoepfe: gelb = die eine Hauptaktion je Bildschirm, Rand = Nebenaktion, still = Werkzeug */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-pille); background: none; font-size: 14px; font-weight: 800; line-height: 1.2; white-space: nowrap; cursor: pointer; text-decoration: none; }
.knopf .i { width: 18px; height: 18px; }
.knopf--gelb, .knopf--ja { background: var(--gelb); color: var(--auf-gelb); }
.knopf--gelb:hover, .knopf--ja:hover { background: var(--gelb-hover); color: var(--auf-gelb); box-shadow: 0 0 0 5px var(--gelb-schein); }
.knopf--rand, .knopf--ruhig { border-color: var(--linie-stark); color: var(--tinte); }
.knopf--rand:hover, .knopf--ruhig:hover { border-color: var(--gelb); color: var(--tinte); }
.knopf--still { color: var(--ui); }
.knopf--still:hover { color: var(--tinte); background: var(--f2); }
.knopf--klein { min-height: 32px; padding: 0 12px; font-size: 13px; gap: 6px; }
.knopf--gross { min-height: 48px; padding: 0 24px; font-size: 15px; }
.knopf--breit { width: 100%; }
.knopf[disabled], .knopf--aus, .knopf[aria-disabled="true"] { background: var(--f2); color: var(--leise); border-color: transparent; cursor: not-allowed; box-shadow: none; }

/* Ikonknopf (Kreis) mit Zaehler-Plakette */
.ikon { position: relative; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ui); display: inline-grid; place-items: center; flex: none; cursor: pointer; }
.ikon:hover { color: var(--tinte); }
.ikon svg, .ikon .i { width: 20px; height: 20px; }
.ikon--rand { border: 1px solid var(--linie-stark); }
.ikon--rand:hover { border-color: var(--gelb); background: none; }
.ikon[aria-pressed="true"] { color: var(--tinte); }
.ikon[aria-pressed="true"] svg { fill: currentColor; }
.ikon__zahl { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pille); background: var(--gruen); color: var(--auf-gruen); font-size: 11px; line-height: 18px; font-weight: 800; text-align: center; box-shadow: 0 0 0 2px var(--grund); }

/* Markerstrich: so sieht ein Link aus (statt Linkblau). Dunkel 2-px-Gelbstrich, hell Textmarker-Band. */
.markerstrich, .kommentar__text a, a.erwaehnung, .modul__inhalt a, .modul__text a, .ueber__text a, .termin__inhalt a, .profil__kommentar-text a, .landing__text a, .blase a, .gruppe__text a, .t-lang a {
  color: var(--link, var(--tinte)); font-weight: 700; text-decoration: none; border-radius: 2px;
  background-image: linear-gradient(var(--marker-band), var(--marker-band)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% var(--marker-hoehe);
  transition: background-size var(--raus) var(--kurve), color var(--raus) var(--kurve);
}
.markerstrich:hover, .kommentar__text a:hover, a.erwaehnung:hover, .modul__inhalt a:hover, .modul__text a:hover, .ueber__text a:hover, .termin__inhalt a:hover, .profil__kommentar-text a:hover, .landing__text a:hover, .blase a:hover, .gruppe__text a:hover, .t-lang a:hover {
  background-size: 100% 100%; color: var(--auf-gelb); transition-duration: var(--rein);
}

/* Segment-Umschalter und Reiterleiste: gewaehlt ist Zustand, also neutral */
.segment { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linie-stark); border-radius: 10px; }
.segment > * { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font-size: 13px; font-weight: 700; color: var(--ui); cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .segment > *:hover { color: var(--tinte); background: var(--f2, var(--f3)); } }
.segment > [aria-pressed="true"], .segment > [aria-current] { background: var(--f3); color: var(--tinte); box-shadow: none; }
.reiterleiste { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linie); }
.reiterleiste::-webkit-scrollbar { display: none; }
.reiterleiste a, .reiterleiste button { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 14px 11px; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--ui); white-space: nowrap; cursor: pointer; }
.reiterleiste small { font-size: 12px; font-weight: 600; color: var(--leise); }
.reiterleiste a, .reiterleiste button { border-radius: 8px; margin: 6px 0; padding-top: 8px; padding-bottom: 8px; transition: background-color var(--raus) var(--kurve), color var(--raus) var(--kurve); }
.reiterleiste a:hover, .reiterleiste button:hover { color: var(--tinte); background: var(--f3); transition-duration: var(--rein); }
/* Themenreiter: Unterstrich waechst von links rein und laeuft nach rechts aus; beim Druecken schiebt er
   sich auf volle Breite und der Reiter sinkt 1 px (der Wechsel selbst laedt die Seite neu, ohne Animation).
   Der aktive Reiter bekommt seinen Standort-Punkt mit einem kleinen Pop beim Laden. */

@keyframes punkt-da { from { transform: scale(0); } to { transform: scale(1); } }
.reiterleiste [aria-current], .reiterleiste [aria-selected="true"] { color: var(--tinte); background: var(--f3); }
.reiterleiste [aria-current]::after, .reiterleiste [aria-selected="true"]::after { display: none; }
.reiterleiste [aria-current]::before, .reiterleiste [aria-selected="true"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-ton); flex: none; }

/* Pillen (alte Filter-Chips): gewaehlt neutral statt gelb */
.pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.85rem; border-radius: var(--r-pille); border: 1px solid var(--linie-stark); color: var(--ui); font-size: 0.85rem; font-weight: 600; background: none; }
.pill:hover { color: var(--tinte); border-color: var(--gelb); }
.pill[aria-current] { background: var(--f3); color: var(--tinte); border-color: var(--f3); }

/* Formularfelder */
.feld { display: block; width: 100%; min-height: 44px; padding: 0.65rem 0.9rem; border: 1px solid var(--linie-stark); border-radius: var(--r-feld); background: var(--f2); color: var(--tinte); font-size: 15px; }
.feld::placeholder { color: var(--leise); }
.feld:hover { border-color: color-mix(in srgb, var(--gelb) 55%, var(--linie-stark)); }
.feld:focus { outline: none; border-color: var(--tinte); }
.feld:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; box-shadow: none; }
.feld[aria-invalid="true"], .feld--fehler { border-color: var(--rot); }
.feld--pille { border-radius: var(--r-pille); padding-inline: 1.1rem; }
textarea.feld { resize: vertical; min-height: 90px; line-height: 1.5; }
select.feld { cursor: pointer; }
.feld-gruppe { display: grid; gap: 6px; margin-bottom: 16px; }
.feld-label { font-size: 13px; font-weight: 700; color: var(--tinte); }
.feld-hinweis, .hinweis { color: var(--leise); font-size: 13px; }
.feld-fehler, .fehler { color: var(--rot); font-size: 13.5px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gruen); }

/* Avatar: sauberer Kreis, ohne Foto Initialen auf Grau. Auf dem Bild sitzt hoechstens der Online-Punkt. */
.avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--av1); flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tinte); font-size: 0.9rem; letter-spacing: 0.02em; overflow: hidden; }
.avatar[data-ton="2"] { background: var(--av2); } .avatar[data-ton="3"] { background: var(--av3); } .avatar[data-ton="4"] { background: var(--av4); } .avatar[data-ton="5"] { background: var(--av5); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--22 { width: 22px; height: 22px; font-size: 9.5px; }
.avatar--s, .avatar--28 { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar--32 { width: 32px; height: 32px; font-size: 11.5px; }
.avatar--m { width: 44px; height: 44px; }
.avatar--48 { width: 48px; height: 48px; font-size: 16px; }
.avatar--64 { width: 64px; height: 64px; font-size: 21px; }
.avatar--l { width: 88px; height: 88px; font-size: 1.6rem; }
.avatar--xl { width: 140px; height: 140px; font-size: 2.4rem; }
.avatar-rahmen { position: relative; display: inline-flex; flex: none; }
.avatar-rahmen .avatar__on { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 2px var(--hinter, var(--grund)); }
/* Alte Level-Zahl am Avatar (avatarHtml level:true): nur noch fuer Screenreader. Sichtbar steht das
   Level als Schild neben dem Namen (levelSchild, nameMitLevel). */
.avatar-mit-level { position: relative; display: inline-flex; flex: none; }
.avatar-mit-level .level { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stapel { display: inline-flex; }
.stapel .avatar { box-shadow: 0 0 0 2px var(--hinter, var(--grund)); }
.stapel .avatar + .avatar { margin-left: -7px; }

/* Level-Schild rechts neben dem Namen (Gepaeckanhaenger mit Oese). 1-3 neutral, 4-6 gruene Kontur, 7-9 gruen gefuellt. */
.level-schild { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px 0 13px; border-radius: var(--r-anh); background: var(--f3); color: var(--tinte); font-size: 11.5px; line-height: 1; font-weight: 800; white-space: nowrap; vertical-align: 2px; font-variant-numeric: tabular-nums; }
.level-schild::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.3px currentColor; opacity: 0.7; }
.level-schild--mitte { background: transparent; color: var(--gruen); box-shadow: inset 0 0 0 1.5px var(--gruen); }
.level-schild--hoch { background: var(--gruen); color: var(--auf-gruen); }
.name-level { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.name-level b, .name-level a { color: var(--tinte); font-weight: 700; }

/* Schilder */
.schild { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.2; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.team-schild { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border: 1px solid var(--linie-stark); border-radius: var(--r-anh); font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ui); }
.gold-text { color: var(--gold); }
.entwurf-schild { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1.5px dashed var(--gold); border-radius: var(--r-anh); color: var(--gold); font-size: 11.5px; font-weight: 800; }

/* Behaelter: Kasten (flach, 1-px-Linie). .karte ist der alte Name dafuer. Listen stehen ohne Kasten auf dem Grund. */
.kasten, .karte { background: var(--f1); border: 1px solid var(--linie); border-radius: var(--r-kasten); --hinter: var(--f1); }
.kasten { padding: 16px; }
.kasten--gross { border-radius: var(--r-gross); }
.kasten--rand-stark { border-color: var(--linie-stark); }
.kasten--klick:hover { border-color: color-mix(in srgb, var(--gelb) 60%, var(--linie-stark)); }
@media (hover: hover) and (pointer: fine) { .kasten--klick:hover { transform: translateY(var(--hub)); box-shadow: var(--e2); } }
.kasten--klick:active { transform: translateY(0) scale(var(--sinken)); box-shadow: none; transition-duration: var(--druck-zeit); }
.kasten__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kasten__titel, .karte__titel { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--tinte); }
.karte + .karte { margin-top: 1rem; }
.karte__innen { padding: 16px; }
.karte__titel { margin-bottom: 0.5rem; }
.karte__link { display: block; text-align: center; font-size: 13px; font-weight: 700; color: var(--ui); padding-top: 0.6rem; }
.karte__link:hover { color: var(--tinte); }
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen > * { border-top: 1px solid var(--linie); }
.zeilen > :first-child { border-top: 0; }

/* Zustaende: leer, laden, Fehler */
.zustand { text-align: center; padding: 40px 24px; border-radius: var(--r-gross); }
.zustand--leer { border: 1.5px dashed var(--linie-stark); }
.zustand .i { width: 32px; height: 32px; color: var(--leise); margin: 0 auto; }
.zustand h1, .zustand h2, .zustand h3 { font-size: 18px; font-weight: 800; margin: 10px 0 6px; }
.zustand p { font-size: 15px; color: var(--ui); max-width: 40ch; margin: 0 auto 16px; }
.zustand--fehler { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 16px; text-align: left; border: 1px solid var(--linie-stark); border-radius: var(--r-kasten); background: var(--f1); }
.zustand--fehler .i { width: 24px; height: 24px; color: var(--rot); margin: 0; }
.zustand--fehler h2, .zustand--fehler h3 { font-size: 16px; margin: 0; }
.zustand--fehler p { font-size: 14px; margin: 4px 0 12px; max-width: none; }
.skelett { display: grid; gap: 22px; }
.skelett__zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.skel { display: block; background: var(--f2); border-radius: 6px; height: 12px; animation: atmen 1.4s ease-in-out infinite alternate; }
.skel--rund { width: 28px; height: 28px; border-radius: 50%; }
.skel--titel { height: 18px; width: 70%; grid-column: 1 / -1; }
.skel--text { grid-column: 1 / -1; }
.skel--kurz { width: 45%; }
/* Schlichter Leer-Satz ohne Rahmen (leerHtml ist der volle Leer-Zustand). ".kal .leer" haelt die Termine-Seite,
   bis sie auf .zustand-leer umgestellt ist (seiten/kalender.js, public-community/kalender.js). */
.zustand-leer, .kal .leer { padding: 2rem 1rem; text-align: center; color: var(--leise); }

/* Dialoge (<dialog>, E3) und Blatt von unten am Handy */
.dialog { width: calc(100% - 32px); max-width: 560px; padding: 20px; border: 1px solid var(--linie-stark); border-radius: var(--r-gross); background: var(--f1); color: var(--ui); box-shadow: var(--e3); --hinter: var(--f1); }
.dialog::backdrop { background: var(--scrim); }
.dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dialog__kopf h2 { font-size: 17px; font-weight: 700; }
.dialog__fuss { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Ticket (naechster Call, Termine): Abriss links, Perforation, Inhalt rechts */
.ticket { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); border: 1px solid var(--linie-stark); border-radius: 14px; background: var(--f1); --hinter: var(--f1); transition: transform var(--raus) var(--kurve), box-shadow var(--raus) var(--kurve); }
/* Ticket hebt sich wie ein Stueck Papier (federnd, Schatten E2). */
@media (hover: hover) and (pointer: fine) {
  .ticket:hover { transform: translateY(var(--hub)); box-shadow: var(--e2); transition-duration: 380ms, var(--rein); transition-timing-function: var(--feder), var(--kurve); }
}
.ticket::before, .ticket::after { content: ""; position: absolute; left: 77px; width: 14px; height: 14px; border-radius: 50%; background: var(--grund); border: 1px solid var(--linie-stark); }
.ticket::before { top: -8px; clip-path: inset(50% 0 0 0); }
.ticket::after { bottom: -8px; clip-path: inset(0 0 50% 0); }
.ticket__abriss { display: grid; place-content: center; text-align: center; padding: 14px 6px; border-right: 1.5px dashed var(--linie-stark); }
.ticket__wt, .ticket__mo { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.ticket__tag { font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--tinte); margin: 4px 0 3px; }
.ticket__abriss--heute .ticket__wt { color: var(--rot); }
.ticket__inhalt { padding: 14px 16px; min-width: 0; }
.ticket__titel { font-size: 16px; line-height: 1.35; font-weight: 700; margin: 4px 0 6px; color: var(--tinte); }
.ticket__zeit { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ui); }
.ticket__zeit--live { color: var(--rot); }
.ticket__knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Strecke (Fortschritt): kurz als Balken, lang mit Halten */
.strecke-kurz { height: 6px; border-radius: 6px; background: var(--f2); overflow: hidden; }
.strecke-kurz > span { display: block; height: 100%; background: var(--gruen); border-radius: 6px; }
.strecke-text { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--leise); margin-top: 8px; }
.strecke-text b { color: var(--tinte); }
.strecke { display: flex; align-items: center; height: 14px; }
.strecke > i { flex: 1; height: 2px; background: var(--linie-stark); position: relative; }
.strecke > i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--hinter, var(--grund)); box-shadow: inset 0 0 0 2px var(--linie-stark); z-index: 1; }
.strecke > i.ok { background: var(--gruen); }
.strecke > i.ok::after { background: var(--gruen); box-shadow: none; }
.strecke > i.hier::after { width: 14px; height: 14px; right: -7px; top: -6px; background: var(--hinter, var(--grund)); box-shadow: inset 0 0 0 2px var(--tinte), 0 0 0 3px var(--gruen-ton); }
.strecke > i.hier::before { content: ""; position: absolute; right: -2px; top: -1px; width: 4px; height: 4px; border-radius: 50%; background: var(--gruen); z-index: 2; }

/* Hinweis-Band (neutral, frueher gelb getoent) */
.meldung { padding: 0.75rem 1rem; border: 1px solid var(--linie-stark); border-radius: var(--r-kasten); background: var(--f1); color: var(--text); font-size: 0.9rem; margin-bottom: 1rem; }

/* Neuigkeiten-Zeile und Nachrichten: gelten fuer die Seiten (/benachrichtigungen, /chat) und das Popover
   (public-community/popover.js). Seiten und Popover setzen nur Layout und Abstaende obendrauf. */
.benachr-gruppe { display: block; padding: 18px 0 6px; }
.benachr { display: grid; grid-template-columns: 40px minmax(0, 1fr) 10px; gap: 12px; align-items: start; padding: 12px; color: var(--ui); transition: background-color var(--raus) var(--kurve); --hinter: var(--grund); }
.benachr:hover { background: var(--f1); color: var(--ui); transition-duration: var(--rein); --hinter: var(--f1); }
.benachr__body { min-width: 0; }
.benachr__zeile { display: block; font-size: 15px; line-height: 1.45; color: var(--text); }
.benachr__zeile b { color: var(--tinte); font-weight: 700; }
.benachr__titel { display: block; font-size: 14px; color: var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.benachr__zeit { display: block; font-size: 13px; color: var(--leise); margin-top: 2px; }
.benachr:not(.benachr--neu) .benachr__zeile { color: var(--ui); }
.benachr__punkt { width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--gruen); }
.benachr__zeichen { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--f2); color: var(--ui); }
.benachr__zeichen--live { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rot); color: var(--rot); }
.benachr__zeichen--gruen { color: var(--gruen); }
.benachr__zeichen .i { width: 18px; height: 18px; }
.chat__suche { padding: 12px; flex: none; }
.chat__suchfeld { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-pille); background: var(--f2); color: var(--leise); transition: border-color var(--raus) var(--kurve); }
.chat__suchfeld:hover { border-color: color-mix(in srgb, var(--gelb) 55%, var(--linie-stark)); transition-duration: var(--rein); }
.chat__suchfeld:focus-within { border-color: var(--tinte); }
.chat__suchfeld .i, .chat__suchfeld svg { width: 18px; height: 18px; }
.chat__suchfeld input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--tinte); font-size: 15px; }
.chat__suchfeld input::placeholder { color: var(--leise); }
.chat__suchfeld input:focus-visible { outline: none; box-shadow: none; }
.chat__suchfeld input::-webkit-search-cancel-button { display: none; }
.chat__leeren { border: 0; background: none; color: var(--leise); font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; }
.chat__leeren:hover { color: var(--tinte); }
.chat__eintrag { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; color: var(--leise); transition: background-color var(--raus) var(--kurve); }
.chat__eintrag:hover { background: var(--f2); color: var(--leise); transition-duration: var(--rein); }
.chat__eintrag .avatar-rahmen, .chat__eintrag > .avatar { --hinter: var(--f1); }
.chat__mitte { min-width: 0; }
.chat__eintrag b { display: block; color: var(--tinte); font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__vorschau { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat__eintrag--neu .chat__vorschau { color: var(--text); font-weight: 700; }
.chat__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chat__zeit { font-size: 12px; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chat__punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.chat__treffer-titel { padding: 12px 16px 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.chat__zurueck { display: none; }
.chat__partner { min-width: 0; line-height: 1.3; }
.chat__partner > a { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.chat__partner > a b { color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chat__handle { font-weight: 500; color: var(--leise); font-size: 13px; white-space: nowrap; }
.chat__status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--leise); }
.chat__status--online { color: var(--gruen); font-weight: 700; }
.blase { align-self: flex-start; width: fit-content; max-width: 72%; padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: var(--f2); color: var(--text); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; --hinter: var(--f2); }
.blase--ich { align-self: flex-end; background: var(--f3); color: var(--tinte); border-radius: 16px 16px 6px 16px; --hinter: var(--f3); }
.blase__zeit { display: none; }
.chat__tag { align-self: center; margin: 12px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); }
.chat__gesehen { align-self: flex-end; font-size: 12px; color: var(--leise); margin: 0 4px; }
.chat__senden { min-height: 44px; padding: 0 18px; flex: none; align-self: start; }
.chat__senden svg { width: 18px; height: 18px; }
.chat__leer { padding: 48px 16px; text-align: center; color: var(--leise); font-size: 15px; }
.chat__gesperrt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--linie); background: var(--f1); font-size: 14px; color: var(--ui); }
.chat__gesperrt form { margin: 0; }
.chat__eis { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: auto; }
.chat__eis-avatare { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.chat__eis-avatare span { color: var(--leise); font-size: 18px; }
.chat__eis p { margin: 0; }
.chat__eis b { color: var(--tinte); }
/* Senden ist aus (grau), solange weder Text noch Anhang da ist; dann gelb. */
.chat__form:not(:has(textarea:not(:placeholder-shown))):not(:has(.chat__kachel)):not(:has(input[name="gif_url"])) .chat__senden,
.popover__form:not(:has(textarea:not(:placeholder-shown))) .chat__senden { background: var(--f2); color: var(--leise); box-shadow: none; cursor: default; }

/* Formkarte fuer schmale Formularseiten (Anmelden, Beitreten, Willkommen; Helfer formKarte): ein Kasten
   440 px mittig, Titel, eine gelbe Hauptaktion. */
.formkarte { max-width: 440px; margin: 0 auto 16px; padding: 32px 28px 28px; border: 1px solid var(--linie-stark); border-radius: var(--r-gross); background: var(--f1); --hinter: var(--f1); }
.formkarte h1 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.formkarte__text { margin: 0 0 20px; color: var(--ui); font-size: 15px; line-height: 1.6; }
.formkarte__text b { color: var(--tinte); }
.formkarte form { display: grid; gap: 12px; margin: 0; }
.formkarte .feld { min-height: 48px; font-size: 16px; }
.formkarte input.feld:read-only { color: var(--ui); background: var(--f1); }
.formkarte .knopf--gross { width: 100%; }
.formkarte__hinweis { margin: -4px 0 0; font-size: 13px; color: var(--leise); }
.formkarte__fuss { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--linie); }
.formkarte__fuss p { margin: 0 0 10px; font-size: 14px; color: var(--ui); line-height: 1.55; }
.formkarte .meldung, .formkarte .fehler { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; }
.formkarte .fehler { padding: 12px 14px; border: 1px solid var(--linie-stark); border-radius: var(--r-kasten); background: var(--grund); color: var(--text); font-size: 14px; }
.formkarte .fehler .i { color: var(--rot); width: 18px; height: 18px; margin-top: 1px; }
.formkarte .meldung .i { color: var(--gruen); width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 1023px) { .formkarte { margin: 0 auto 16px; padding: 24px 20px 20px; } .formkarte h1 { font-size: 24px; } }

/* ---------- 9. Alte Seitenbausteine (bis die Seiten neu gebaut sind) ---------- */
/* Thema-abhaengige Stellen aus den Seiten-STYLEs (Selektoren mit html davor gewinnen gegen die Seiten-Regeln) */
html .toast { color: var(--toast-text); }
html #karte, html .ortkarte__map { background: var(--grund); }
html .karte-hinweis, html .maplibregl-ctrl-attrib, html .ortkarte__map .maplibregl-ctrl-attrib { background: var(--kopf-bg) !important; }
html .maplibregl-ctrl-attrib, html .maplibregl-ctrl-attrib a { color: var(--leise); }
/* Ortkarte in den Einstellungen: MapLibre setzt .maplibregl-ctrl.maplibregl-ctrl-attrib (0,2,0) schwarz, im Dunklen
   unlesbar (Audit 27.09.). Die Seite /karte hat eigene Regeln in seiten/karte.js. */
html .ortkarte__map .maplibregl-ctrl-attrib, html .ortkarte__map .maplibregl-ctrl-attrib-inner, html .ortkarte__map .maplibregl-ctrl-attrib a { color: var(--leise) !important; }
html .marker:hover, html .marker--ich { border-color: var(--tinte); }
html .schalter i { background: var(--schalter-bahn); }
html .schalter i::after { background: var(--schalter-knopf); }
html .heat__z.s1 { background: var(--heat-1); }
html .heat__z.s2 { background: var(--heat-2); }
html .heat__z.s3 { background: var(--heat-3); }
html .benachr__menue, html .sortier__menue, html .heat__info p, html .wz-picker, html .wz-mention, html .likes, html .popover, html .composer-anker .composer__kat-liste { box-shadow: var(--e2); }
/* Gelb als Schrift ist raus (Gelb heisst nur "drueck hier"): diese alten Stellen werden Tinte. */
html .profil__stufe, html .profil__bis b, html .profil__warn, html .lvl__stufe, html .mitglied__rolle, html mark, html .karte-hinweis a, html .popup__stufe, html .popup__bis b, html .benachr__alle, html .popover__link, html .benachr__menue a[aria-current], html .lvl__ikon.erreicht, html .sortier--aktiv .sortier__knopf, html .fertig[aria-pressed="true"], html .modul-link__haken, html .profil__kommentar-kopf a:hover, html .modul__weiter:hover, html .kal__uhr:hover, html .kal__zeile-link:hover b, html .kal__ics a:hover, html .termin__tz:hover, html .lvl__info a:hover, html .lvl__frei a:hover, html .composer-anker .composer__entwurf button:hover, html .gif-knopf[aria-expanded="true"], html .einst__nav a[aria-current] { color: var(--tinte); }
html .modul-link__haken, html .lvl__ikon.erreicht { color: var(--gruen); }


/* Beitrag als Sheet ueber dem Feed (nur Desktop) */
.sheet { border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; overflow: hidden; }
.sheet::backdrop { background: var(--scrim); }
.sheet__zu { position: fixed; top: 12px; left: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--f1); color: var(--tinte); border: 1px solid var(--linie-stark); font-size: 1.8rem; line-height: 1; cursor: pointer; z-index: 2; }
.sheet__zu:hover { border-color: var(--gelb); }
.sheet__innen { position: absolute; top: 62px; bottom: 0; left: 50%; transform: translateX(-50%); width: min(790px, calc(100vw - 32px)); background: var(--grund); border: 1px solid var(--linie); border-bottom: 0; border-radius: 16px 16px 0 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet__innen > .artikel { border-radius: 0; border: 0; }
.sheet[open] .sheet__innen { animation: blatt-rein 440ms var(--kurve) both; }
.sheet[open] .sheet__zu { animation: auf 300ms var(--kurve) 80ms both; }
@keyframes blatt-rein { from { opacity: 0.3; translate: 0 48px; } to { opacity: 1; translate: 0 0; } }
.sheet__laden { padding: 3rem; text-align: center; color: var(--leise); }

/* Composer (Overlay) */
.composer { border: 0; padding: 0; background: transparent; max-width: 720px; width: calc(100% - 2rem); margin: auto; }
.composer::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.composer__form { background: var(--f1); border: 1px solid var(--linie-stark); border-radius: var(--r-gross); padding: 1.1rem 1.25rem; display: grid; gap: 0.6rem; box-shadow: var(--e3); }
.composer__kopf { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--ui); }
.composer__kopf b { color: var(--tinte); }
.composer__titel { border: 0; background: transparent; color: var(--tinte); font-size: 20px; font-weight: 700; padding: 0.2rem 0; outline: 0; }
.composer__titel::placeholder { color: var(--leise); }
.composer__text { border: 0; background: transparent; color: var(--text); font-size: 17px; line-height: 1.6; resize: none; min-height: 140px; outline: 0; padding: 0; }
.composer__text::placeholder { color: var(--leise); }
.composer__extra { display: grid; gap: 0.4rem; }
.composer__leiste { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; padding-top: 0.6rem; border-top: 1px solid var(--linie); }
.composer__knopf { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ui); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; }
.composer__knopf:hover, .composer__knopf[aria-pressed="true"] { background: var(--f2); color: var(--tinte); }
.composer__knopf svg { width: 20px; height: 20px; }
.composer__kategorie { background: var(--f2); color: var(--tinte); border: 1px solid var(--linie-stark); border-radius: var(--r-pille); padding: 0.35rem 0.8rem; font-size: 0.85rem; max-width: 220px; }
.composer__rechts { margin-left: auto; display: flex; gap: 0.5rem; }
.composer__emojis { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.composer__emojis button { background: transparent; border: 0; font-size: 1.3rem; cursor: pointer; padding: 0.2rem; border-radius: 6px; }
.composer__emojis button:hover { background: var(--f2); }
@media (max-width: 720px) { .composer { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; } .composer__form { border-radius: 0; min-height: 100dvh; } }

/* Blaettern (Seitenzahlen) */
.seiten { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 1.25rem 0 0; font-size: 14px; }
.seiten a, .seiten span { min-width: 36px; height: 36px; border-radius: var(--r-pille); display: inline-flex; align-items: center; justify-content: center; color: var(--ui); font-weight: 700; }
.seiten a { transition: box-shadow var(--raus) var(--kurve), color var(--raus) var(--kurve), transform var(--raus) var(--kurve); }
.seiten a:hover { box-shadow: inset 0 0 0 1px var(--gelb); color: var(--tinte); transition-duration: var(--rein); }
.seiten a:active { transform: scale(0.94); transition-duration: var(--druck-zeit); }
.seiten [aria-current] { background: var(--f3); color: var(--tinte); font-weight: 800; }

.treffer__auszug, .ktreffer__text, .modul__text, .gruppe__text { overflow-wrap: anywhere; }
.medien { display: grid; gap: 0.6rem; margin: 0.9rem 0; }
.bilder { display: grid; gap: 0.4rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bilder[data-anzahl="1"] { grid-template-columns: minmax(0, 420px); }
.bilder .bild { display: block; aspect-ratio: 4/3; border-radius: var(--r-feld); overflow: hidden; background: #000; border: 1px solid var(--linie); }
.bilder .bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--raus) var(--kurve); }
.bilder .bild:hover img { transform: scale(1.03); transition-duration: var(--rein); }
.bilder--klein { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-width: 480px; }
.bilder--klein[data-anzahl="1"] { grid-template-columns: minmax(0, 220px); }
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; }
.lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.lightbox__zu { position: absolute; top: 14px; right: 18px; color: #fff; font-size: 2rem; line-height: 1; background: none; border: 0; cursor: pointer; }
.lightbox__pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; cursor: pointer; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }
.lightbox__pfeil:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__pfeil--l { left: 16px; } .lightbox__pfeil--r { right: 16px; }
.lightbox__zaehler { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; background: rgba(0, 0, 0, 0.5); padding: 4px 12px; border-radius: 999px; }
.modul__text ul { margin: 0.4rem 0 0.9rem 1.2rem; padding: 0; }
.modul__text li { margin: 0.2rem 0; }
.video--eigen video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--r-gross); overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video__play span { width: 64px; height: 64px; border-radius: 50%; background: var(--gelb); color: var(--auf-gelb); display: flex; align-items: center; justify-content: center; }
.video__play svg { width: 30px; height: 30px; fill: var(--auf-gelb); stroke: var(--auf-gelb); }
.anhang { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border: 1px solid var(--linie-stark); border-radius: var(--r-feld); font-size: 0.85rem; color: var(--tinte); }
.anhang:hover { border-color: var(--gelb); }
.umfrage { margin: 0.9rem 0; display: grid; gap: 0.4rem; }
.umfrage__option { position: relative; border: 1px solid var(--linie-stark); border-radius: var(--r-feld); padding: 0.55rem 0.8rem; overflow: hidden; font-size: 0.9rem; color: var(--tinte); display: flex; justify-content: space-between; cursor: pointer; background: none; text-align: left; width: 100%; }
.umfrage__option:hover { border-color: var(--gelb); }
.umfrage__option .balken { position: absolute; left: 0; top: 0; bottom: 0; background: var(--f3); z-index: 0; }
.umfrage__option span { position: relative; z-index: 1; }
.umfrage__option[aria-pressed="true"] { border-color: var(--tinte); }


/* Profil, Listen */
.profil { text-align: center; padding: 1.5rem 1.25rem; }
.profil__name { font-size: 1.4rem; font-weight: 800; margin-top: 0.75rem; color: var(--tinte); }
.profil__handle { color: var(--leise); font-size: 0.85rem; }
.profil__bio { margin: 0.6rem 0 0.9rem; color: var(--ui); }
.profil__fakten { text-align: left; font-size: 0.9rem; display: grid; gap: 0.35rem; padding: 0.9rem 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.profil__fakten span { display: flex; gap: 0.5rem; align-items: center; }
.profil__fakten svg { width: 16px; height: 16px; color: var(--leise); flex: none; }
.profil__zahlen { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 0.9rem; }
.profil__zahlen b { display: block; color: var(--tinte); font-size: 1.1rem; }
.profil__zahlen span { font-size: 0.75rem; color: var(--leise); }
.links { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.7rem; flex-wrap: wrap; }
.mitglied { display: flex; gap: 0.85rem; padding: 1rem 1.25rem; border-top: 1px solid var(--linie); }
.mitglied:first-child { border-top: 0; }
.mitglied__body { flex: 1; min-width: 0; }
.mitglied__name { font-weight: 800; color: var(--tinte); }
.mitglied__handle { font-size: 0.8rem; color: var(--leise); }
.mitglied__bio { font-size: 0.9rem; color: var(--ui); margin: 0.25rem 0 0.5rem; }
.mitglied__fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.2rem 1rem; font-size: 0.8rem; color: var(--leise); }
.mitglied__fakten span { display: flex; gap: 0.4rem; align-items: center; }
.mitglied__fakten svg { width: 14px; height: 14px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabelle td { padding: 0.5rem 0.4rem; border-top: 1px solid var(--linie); vertical-align: middle; }
.abschnitt { margin-bottom: 1.5rem; }
.abschnitt h2 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .zwei, .drei { grid-template-columns: minmax(0, 1fr); } }
.zwei > .karte + .karte, .drei > .karte + .karte { margin-top: 0; }
.nur-mobil { display: none; }

/* ---------- 10. Handy-Rahmen (unter 1024 px) ---------- */
@media (max-width: 1023px) {
  :root { --kopf-h: 56px; --rand: 16px; }
  body.mit-leiste { --leiste-h: calc(72px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--leiste-h); }
  .kopf__wege, .kopf__nur-breit { display: none !important; }
  .kopf__zeile { gap: 8px; }
  .kopf__marke span { display: none; }
  .kopf__marke img { height: 14px; }
  .kopf--unterseite .kopf__marke { display: none; }
  .kopf__zeile .kopf__zurueck { display: inline-grid; margin-left: -8px; }
  .kopf__untertitel { display: block; }
  .raster { grid-template-columns: minmax(0, 1fr); padding: 16px var(--rand) 48px; gap: 24px; }
  .raster--landing { padding: 16px var(--rand) 40px; }
  .seitenleiste { display: none; }
  .t-h1 { font-size: 24px; }
  .t-anzeige { font-size: 34px; }
  .suchdialog { margin: 0 auto auto; width: 100%; max-width: none; border-radius: 0 0 var(--r-gross) var(--r-gross); border-top: 0; padding-top: env(safe-area-inset-top, 0px); }
  .dialog--blatt { margin: auto 0 0; width: 100%; max-width: none; border-radius: var(--r-blatt) var(--r-blatt) 0 0; border-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  dialog[open].dialog--blatt { animation: blatt-hoch 360ms var(--kurve) both; }
  .likes:not([hidden]), .mk:not([hidden]) { animation: blatt-hoch 360ms var(--kurve) both; }

  .leiste-unten { display: flex; align-items: center; gap: 4px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--leiste-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linie); }
  .leiste-unten__schalter { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 16px; border: 1px solid var(--linie-stark); border-radius: var(--r-pille); background: none; color: var(--tinte); font-size: 16px; font-weight: 800; text-align: left; cursor: pointer; }
  @media (hover: hover) { .leiste-unten__schalter:hover { border-color: var(--gelb); } }
  .leiste-unten__schalter:active { border-color: var(--gelb); background: var(--f1); }
  .leiste-unten__schalter > .i:last-child { width: 16px; height: 16px; color: var(--leise); }
  .leiste-unten__was { flex: 1; min-width: 0; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leiste-unten__was small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--gruen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leiste-unten__was small.rot { color: var(--rot); }
  .leiste-unten .ikon { width: 44px; height: 44px; }
  .leiste-unten .ikon__zahl { top: 3px; right: 1px; }
  .leiste-unten .ikon[aria-current] { color: var(--tinte); }
  .leiste-unten__aktion { width: 52px; height: 52px; margin-left: 2px; border-radius: 50%; background: var(--gelb); color: var(--auf-gelb); display: grid; place-items: center; flex: none; transition: background-color var(--raus) var(--kurve), box-shadow var(--raus) var(--kurve), transform var(--raus) var(--feder); }
  .leiste-unten__aktion:active { box-shadow: 0 0 0 6px var(--gelb-schein); }
  .leiste-unten__aktion:hover { background: var(--gelb-hover); box-shadow: 0 0 0 5px var(--gelb-schein); transition-duration: var(--rein); }
  .leiste-unten__aktion .i { width: 24px; height: 24px; stroke-width: 2.2; }

  .wegweiser__scrim { display: block; position: fixed; inset: 0; z-index: 88; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--ui-zeit) var(--kurve); }
  .wegweiser { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 89; max-height: calc(100dvh + 16px); overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px calc(60px + env(safe-area-inset-bottom, 0px)); margin-bottom: -40px; background: var(--f1); border-top: 1px solid var(--linie-stark); border-radius: var(--r-blatt) var(--r-blatt) 0 0; box-shadow: var(--e3); --hinter: var(--f1); transform: translateY(105%); visibility: hidden; transition: transform var(--ui-zeit) var(--kurve), visibility 0s linear var(--ui-zeit); }
  /* Auf: Blatt faehrt mit kleinem Ueberschwinger hoch (40 px Reserve unter dem Rand verdecken die Luecke),
     die Zeilen folgen versetzt. Zu: schnell und ohne Feder. */
  body.wegweiser-offen .wegweiser, .wegweiser:target { transform: none; visibility: visible; transition: transform 560ms var(--feder-sanft), visibility 0s linear 0s; }
  .wegweiser__wege > li, .wegweiser__fuss { opacity: 0; transform: translateY(14px); transition: opacity 160ms var(--kurve), transform 160ms var(--kurve); }
  body.wegweiser-offen :is(.wegweiser__wege > li, .wegweiser__fuss), .wegweiser:target :is(.wegweiser__wege > li, .wegweiser__fuss) { opacity: 1; transform: none; transition-duration: 460ms; transition-delay: calc(70ms + var(--n, 0) * 32ms); }
  .wegweiser__wege > li:nth-child(2) { --n: 1; } .wegweiser__wege > li:nth-child(3) { --n: 2; } .wegweiser__wege > li:nth-child(4) { --n: 3; }
  .wegweiser__wege > li:nth-child(5) { --n: 4; } .wegweiser__wege > li:nth-child(6) { --n: 5; } .wegweiser__wege > li:nth-child(7) { --n: 6; } .wegweiser__wege > li:nth-child(n+8), .wegweiser__fuss { --n: 7; }
  .wegweiser__weg { transform-origin: left center; }
  .wegweiser__weg:active { transform: scale(0.97); transition-duration: var(--druck-zeit); }
  .wegweiser__weg:active .wegweiser__name { color: var(--tinte); text-decoration: underline 2px var(--gelb); text-underline-offset: 5px; }
  body.wegweiser-offen .wegweiser__scrim, .wegweiser:target + .wegweiser__scrim { opacity: 1; pointer-events: auto; }
  body.wegweiser-offen { overflow: hidden; }
}

/* Alte Handy-Regeln der Seiten (bis 720 px) */
@media (max-width: 720px) {
  .feld, textarea.feld, .composer__text, .composer__titel { font-size: 16px; }
  body { overflow-x: hidden; }
  .nur-mobil { display: inline-flex; }
  .bilder--klein { max-width: 100%; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { white-space: nowrap; flex: none; }
}

/* ---------- 11. Richtung Reisejournal, Runde 2 (Nikita 07.10. abends) ----------
   "Zu blockig. Mehr Rundheit und Dynamik, das Weisse deutlich besser." Ein warmes Papier mit feiner
   Faser als Untergrund, darauf hellere Boegen mit weichen Ecken und weichem Schatten statt eines
   Linien-Gitters. Titel in Young Serif. Bewegung ruhig: Boegen heben sich 2 px, Farben gleiten, die
   Reiter-Markierung gleitet zur neuen Kategorie. Nichts glaenzt, nichts federt, nichts springt. */
html { background: var(--grund); scrollbar-gutter: stable; }
body { background-color: var(--papier-grund, var(--grund)); background-image: var(--papier); background-size: var(--papier-groesse); background-repeat: var(--papier-wdh); color: var(--text); }
h1, h2, .t-h1, .t-anzeige, .formkarte h1, .zustand h1, .zustand h2 { font-family: var(--titel-schrift); font-weight: 400; letter-spacing: 0; }
.t-anzeige { text-transform: none; }
/* Schilder in Satzschreibung und Serifenschrift statt gesperrter Versalien */
.t-schild, .schild { font-family: var(--titel-schrift); font-size: 15px; line-height: 1.3; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinte); }
.live-punkt, .live-leiste__punkt { animation: none; }

/* Boegen: alles, was auf dem Papier liegt, ist heller, rund und hat einen weichen Schatten */
.kasten, .karte { background-color: var(--f1); border: 1px solid var(--kante); border-radius: var(--r-card); box-shadow: var(--e-karte); }
.kasten--klick { transition: transform var(--raus) var(--kurve), box-shadow var(--raus) var(--kurve), border-color var(--raus) var(--kurve); }
@media (hover: hover) and (pointer: fine) { .kasten--klick:hover { transform: translateY(var(--hub)); box-shadow: var(--e-karte-hoch); border-color: var(--kante); transition-duration: var(--rein); } }
.menue__liste { border-radius: 14px; border-color: var(--kante); box-shadow: var(--e3); padding: 6px; }
.menue__liste a, .menue__liste button:not(.knopf) { border-radius: 10px; }
.dialog, .composer__form, .formkarte { border-radius: 20px; border-color: var(--kante); }
.zustand--fehler, .meldung { border-radius: var(--r-card); border-color: var(--kante); }
.zustand--leer { border-radius: var(--r-card); }

/* Kopf: Papierstreifen mit einer Haarlinie, aktiver Bereich als Tinten-Pille */
.kopf { background-color: var(--kopf-papier, var(--grund)); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--kante); box-shadow: 0 10px 24px -22px rgba(70, 45, 10, 0.4); }
:root:not([data-thema="dunkel"]) { --kopf-papier: #f9f4ea; }
@media (prefers-color-scheme: dark) { :root[data-thema="auto"] { --kopf-papier: var(--grund); } }
.kopf__zeile { gap: 18px; }
.kopf__marke img { height: 15px; }
.kopf__marke span { display: none; }
.kopf__weg { height: 36px; padding: 0 13px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ui); }
.kopf__weg:hover { background: var(--f2); color: var(--tinte); }
.kopf__weg[aria-current], .kopf__weg[aria-current]:hover { background: var(--tinte); color: var(--f1); }
.kopf__weg[aria-current] .hier-punkt { display: none; }
.ikon, .ikon::before { border-radius: 999px; }
.ikon__zahl { background: var(--marke-rot); color: #fff; border-radius: 999px; box-shadow: 0 0 0 2px var(--grund); }
.kopf .menue > summary.ikon .avatar { width: 32px; height: 32px; }

/* Knoepfe: Gelb nur fuer Klickbares, weiche Ecken, ein ruhiger Schatten statt Rand */
.knopf { border-radius: var(--r-btn); }
.knopf--gelb, .knopf--ja { border: 0; color: #1d1a16; box-shadow: var(--e-gelb); }
.knopf--gelb:hover, .knopf--ja:hover { background: var(--gelb-hover); color: #1d1a16; box-shadow: var(--e-gelb), 0 8px 16px -10px rgba(90, 70, 0, 0.5); }
.knopf--rand, .knopf--ruhig { border: 1px solid var(--linie-stark); background: var(--f1); color: var(--tinte); }
.knopf--rand:hover, .knopf--ruhig:hover { background: var(--gelb); border-color: transparent; color: #1d1a16; }
.knopf--still:hover { background: var(--f2); }
.live-leiste__knopf { border-radius: var(--r-btn); box-shadow: var(--e-gelb); }
.live-leiste:hover .live-leiste__knopf { box-shadow: var(--e-gelb); }
.feld { border-radius: var(--r-feld); background: var(--f1); border-color: var(--linie); }
.feld:hover { border-color: var(--linie-stark); }
.segment, .thema-wahl { border: 0; border-radius: 999px; padding: 3px; background: var(--f2); }
.segment > *, .thema-wahl label { border-radius: 999px; }
.segment > [aria-pressed="true"], .segment > [aria-current], .thema-wahl label:has(input:checked) { background: var(--f1); color: var(--tinte); box-shadow: 0 1px 2px rgba(60, 40, 10, 0.1), 0 3px 8px -4px rgba(60, 40, 10, 0.2); }
.thema-wahl label:hover { box-shadow: none; }

/* Markerstrich: Textmarker steht fest, beim Hover wird er nur kraeftiger (kein wachsendes Band) */
.markerstrich, .kommentar__text a, a.erwaehnung, .modul__inhalt a, .modul__text a, .ueber__text a, .termin__inhalt a, .profil__kommentar-text a, .landing__text a, .blase a, .gruppe__text a, .t-lang a { transition: color var(--raus) var(--kurve); }
.markerstrich:hover, .kommentar__text a:hover, a.erwaehnung:hover, .modul__inhalt a:hover, .modul__text a:hover, .ueber__text a:hover, .termin__inhalt a:hover, .profil__kommentar-text a:hover, .landing__text a:hover, .blase a:hover, .gruppe__text a:hover, .t-lang a:hover { background-size: 100% var(--marker-hoehe); --marker-band: var(--gelb-hover); color: var(--link, var(--tinte)); }
/* Erwaehnungen: Tinte halbfett mit 2 px gelber Unterkante, die volle Markierung erst beim Hover (Runde 3) */
a.erwaehnung { font-weight: 600; --marker-hoehe: 2px; }
a.erwaehnung:hover { background-size: 100% 100%; color: #1d1a16; }
:root[data-thema="dunkel"] a.erwaehnung { --marker-hoehe: 0px; }
@media (prefers-color-scheme: dark) { :root[data-thema="auto"] a.erwaehnung { --marker-hoehe: 0px; } }

/* Profilbilder: rund mit Papier-Ring; im Stapel ueberlappen sie sich */
.avatar { border-radius: 50%; border: 0; box-shadow: 0 0 0 2px var(--hinter, var(--grund)); font-family: var(--titel-schrift); font-weight: 400; letter-spacing: 0; color: var(--tinte); }
.stapel .avatar { box-shadow: 0 0 0 2px var(--hinter, var(--grund)); }
.stapel .avatar + .avatar { margin-left: -8px; }

/* Level und Team: kleine Pillen */
.level-schild { height: 19px; padding: 0 8px; border-radius: 999px; background: var(--f2); color: var(--ui); box-shadow: none; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.level-schild::before { display: none; }
.level-schild--mitte { background: var(--gruen-ton); color: var(--gruen); box-shadow: none; }
.level-schild--hoch { background: var(--gruen); color: var(--auf-gruen); }
.team-schild { height: 19px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--f3); color: var(--tinte); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; }

/* Thema-Etikett (Runde 3): neutrale Sand-Pille mit Tinte, Rot bleibt Akzent (LIVE, neu, Benachrichtigungen).
   Emojis werden einfarbig mitgefaerbt (Schrift durchsichtig, Abdruck ueber einen harten Textschatten),
   damit kein bunter Fleck auf jeder Karte sitzt. Klickbar = Gelb beim Hover. */
.stempel, .bz__thema, .artikel__kategorie {
  display: inline-block; height: 22px; line-height: 22px; max-width: 100%; padding: 0 10px; border: 0; border-radius: 999px; vertical-align: middle;
  background: var(--sand); color: transparent; text-shadow: 0 0 0 var(--ui);
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--raus) var(--kurve), text-shadow var(--raus) var(--kurve);
}
.stempel:hover, a.bz__thema:hover, .artikel__kategorie:hover, .artikel__wer .t-meta .artikel__kategorie:hover { background: var(--gelb); color: transparent; text-shadow: 0 0 0 #1d1a16; transition-duration: var(--rein); }
@media (forced-colors: active) { .stempel, .bz__thema, .artikel__kategorie { color: LinkText; text-shadow: none; } }

/* Reiterleiste: Pillen; die gewaehlte liegt als heller Bogen obenauf (ohne Skript direkt am Reiter,
   mit Skript als eigenes Element, das zum neuen Reiter gleitet, public-community/feed.js). */
.reiterleiste { border-bottom: 0; gap: 2px; }
.reiterleiste a, .reiterleiste button { margin: 0; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.reiterleiste a:hover, .reiterleiste button:hover { background: rgba(80, 60, 30, 0.07); }
.reiterleiste [aria-current], .reiterleiste [aria-selected="true"] { background: var(--f1); color: var(--tinte); box-shadow: 0 0 0 1px var(--kante), 0 1px 2px rgba(60, 40, 10, 0.08), 0 4px 10px -5px rgba(60, 40, 10, 0.22); }
.reiterleiste [aria-current]::before, .reiterleiste [aria-selected="true"]::before { display: none; }
.reiterleiste [aria-current] small, .reiterleiste [aria-selected="true"] small { color: var(--leise); }

/* Seitenleiste: Boegen untereinander */
.raster { padding-top: 20px; }
.seitenleiste { gap: 12px; align-content: start; }
.seitenleiste > .kasten { padding: 16px; }
.seitenleiste .kasten__kopf { margin-bottom: 8px; }

/* Ticket (naechster Call): Fahrkarte mit runden Ecken und Abriss */
.ticket { border-radius: var(--r-card); border: 1px solid var(--kante); background: var(--f1); box-shadow: var(--e-karte); }
@media (hover: hover) and (pointer: fine) { .ticket:hover { box-shadow: var(--e-karte-hoch); } }
.ticket::before, .ticket::after { background: var(--grund); border-color: var(--kante); }
.ticket__abriss { border-right: 1.5px dashed var(--linie-stark); }
.ticket__tag { font-family: var(--titel-schrift); font-weight: 400; letter-spacing: 0; }
.ticket__wt, .ticket__mo { color: var(--ui); font-family: var(--schrift); font-size: 11px; letter-spacing: 0.08em; }

.bilder .bild { border-radius: 12px; border: 0; }
.seitenfuss { border-top: 1px solid var(--kante); }

/* Handy: Daumenleiste und Wegweiser als Papierstreifen mit runden Knoepfen */
@media (max-width: 1023px) {
  .kopf__untertitel { font-family: var(--titel-schrift); font-weight: 400; font-size: 19px; }
  .leiste-unten { background-color: var(--kopf-papier, var(--grund)); background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--kante); box-shadow: 0 -8px 22px -18px rgba(60, 40, 10, 0.4); }
  .leiste-unten__schalter { height: 48px; border-radius: 999px; border: 1px solid var(--linie); background: var(--f1); box-shadow: var(--e-karte); }
  .leiste-unten__aktion { width: 48px; height: 48px; border-radius: 50%; color: #1d1a16; box-shadow: var(--e-gelb); }
  .leiste-unten__aktion:hover, .leiste-unten__aktion:active { box-shadow: var(--e-gelb); }
  .wegweiser { background-color: var(--kopf-papier, var(--grund)); background-image: none; border-top: 0; border-radius: var(--r-blatt) var(--r-blatt) 0 0; }
  .wegweiser__weg { font-family: var(--titel-schrift); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 22px; border-bottom-color: var(--linie); }
}