@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'); }

/* ---------- 1. Tokens (dunkel ist Standard) ---------- */
:root {
  color-scheme: dark;
  /* Grund und Flaechen */
  --grund: #070707; --f1: #121212; --f2: #1a1a1a; --f3: #232323;
  --linie: #1f1f1f; --linie-stark: #2e2e2e;
  /* Schrift: Titel, Fliesstext, Bedientext, leise, noch leiser */
  --tinte: #ffffff; --text: #dadada; --ui: #b3b3b3; --leise: #8a8a8a; --leiser: #6b6b6b;
  /* Handlung: nur Klickbares */
  --gelb: #ffe026; --gelb-hover: #ffea5c; --auf-gelb: #0a0a0a; --gelb-schein: rgba(255, 224, 38, 0.18);
  --marker-band: #ffe026; --marker-hoehe: 2px;
  --strich: var(--gelb); --strich-hoehe: 2px; /* wachsender Unterstrich (Namen, Titel) */
  /* Zustand: gruen = geht voran, gold = Papierkram (nur Schrift), rot = jetzt/heute/Fehler */
  --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);
  /* Rote Flaeche mit weisser Schrift (Claim-Pille, heute): dunkler als --rot, damit Weiss AA haelt */
  --rot-pille: #d32423;
  /* Tiefe: E1 flach mit Linie, E2 schwebend, E3 Blatt und Dialog */
  --e2: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 28px rgba(0, 0, 0, 0.5);
  --e3: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px rgba(0, 0, 0, 0.65);
  --scrim: rgba(0, 0, 0, 0.6);
  --av1: #2b2b2b; --av2: #353535; --av3: #3f3f3f; --av4: #262626; --av5: #313131;
  --karte-meer: #0b0e14; --karte-land: #1b2030;
  --logo-filter: none;
  --schalter-bahn: #2e2e2e; --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;
  /* Typo, Raster, Radien, Bewegung */
  --schrift: 'Plus Jakarta Sans', 'Open Sans', Arial, Helvetica, sans-serif;
  --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 24px; --a6: 32px; --a7: 48px; --a8: 64px;
  --r-anh: 4px; --r-feld: 10px; --r-kasten: 12px; --r-gross: 16px; --r-ticket: 18px; --r-blatt: 22px; --r-pille: 999px;
  --kurve: cubic-bezier(0.22, 1, 0.36, 1); --rein: 140ms; --raus: 520ms; --ui-zeit: 260ms;
  /* 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: cubic-bezier(0.34, 1.56, 0.64, 1); --feder-sanft: cubic-bezier(0.3, 1.22, 0.56, 1); --druck-zeit: 90ms;
  --hub: -3px; --hub-klein: -1px; --schub: 3px; --zoom: 1.04; --druck: 0.97; --sinken: 0.99; --auf-weg: 6px; --auf-skala: 0.97; --kipp: -1deg;
  --breite: 1120px; --rand: 24px; --seitenleiste: 300px; --spalt: 56px;
  --kopf-h: 64px; --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: color-mix(in srgb, var(--grund) 90%, transparent);
  --leiste-bg: color-mix(in srgb, var(--grund) 94%, transparent);
  --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: #f2e9d8; --f1: #f9f3e6; --f2: #ebdfc9; --f3: #d5c4a1;
  --linie: #e2d4ba; --linie-stark: #c9b793;
  --tinte: #282828; --text: #3c3836; --ui: #504945; --leise: #665c54; --leiser: #7c6f64; /* Kontrast auf Beige: leise 5,4:1 (AA), leiser nur fuer Nebensaechliches */
  --gelb-schein: rgba(255, 224, 38, 0.45); --marker-band: rgba(255, 224, 38, 0.85); --marker-hoehe: 0.42em;
  --strich: rgba(255, 224, 38, 0.8); --strich-hoehe: 0.34em; /* auf Beige traegt ein 2-px-Gelbstrich nicht: Textmarker-Band */
  --gruen: #356a4a; --gruen-ton: rgba(53, 106, 74, 0.14); --auf-gruen: #fbf1c7;
  --gold: #8f5b0e; --rot: #cc241d; /* gold auf Beige 4,75:1 */ --rot-ton: rgba(204, 36, 29, 0.45); --rot-pille: #cc241d;
  --e2: 0 1px 2px rgba(60, 56, 54, 0.08), 0 10px 28px rgba(60, 56, 54, 0.14);
  --e3: 0 2px 4px rgba(60, 56, 54, 0.1), 0 24px 60px rgba(60, 56, 54, 0.22);
  --scrim: rgba(40, 40, 40, 0.42);
  --av1: #e6d9bf; --av2: #ddcfb2; --av3: #d5c4a1; --av4: #ebe0c9; --av5: #e0d3b8;
  --logo-filter: invert(1);
  --schalter-bahn: #c9b793; --schalter-knopf: #ffffff;
  --heat-1: rgba(66, 123, 88, 0.3); --heat-2: rgba(66, 123, 88, 0.6); --heat-3: #427b58;
  --toast-text: #ffffff;
}
@media (prefers-color-scheme: light) { :root[data-thema="auto"] {
  color-scheme: light;
  --grund: #f2e9d8; --f1: #f9f3e6; --f2: #ebdfc9; --f3: #d5c4a1;
  --linie: #e2d4ba; --linie-stark: #c9b793;
  --tinte: #282828; --text: #3c3836; --ui: #504945; --leise: #665c54; --leiser: #7c6f64; /* Kontrast auf Beige: leise 5,4:1 (AA), leiser nur fuer Nebensaechliches */
  --gelb-schein: rgba(255, 224, 38, 0.45); --marker-band: rgba(255, 224, 38, 0.85); --marker-hoehe: 0.42em;
  --strich: rgba(255, 224, 38, 0.8); --strich-hoehe: 0.34em; /* auf Beige traegt ein 2-px-Gelbstrich nicht: Textmarker-Band */
  --gruen: #356a4a; --gruen-ton: rgba(53, 106, 74, 0.14); --auf-gruen: #fbf1c7;
  --gold: #8f5b0e; --rot: #cc241d; /* gold auf Beige 4,75:1 */ --rot-ton: rgba(204, 36, 29, 0.45); --rot-pille: #cc241d;
  --e2: 0 1px 2px rgba(60, 56, 54, 0.08), 0 10px 28px rgba(60, 56, 54, 0.14);
  --e3: 0 2px 4px rgba(60, 56, 54, 0.1), 0 24px 60px rgba(60, 56, 54, 0.22);
  --scrim: rgba(40, 40, 40, 0.42);
  --av1: #e6d9bf; --av2: #ddcfb2; --av3: #d5c4a1; --av4: #ebe0c9; --av5: #e0d3b8;
  --logo-filter: invert(1);
  --schalter-bahn: #c9b793; --schalter-knopf: #ffffff;
  --heat-1: rgba(66, 123, 88, 0.3); --heat-2: rgba(66, 123, 88, 0.6); --heat-3: #427b58;
  --toast-text: #ffffff;
} }

/* ---------- 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 { transform: scale(0.92); 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: der Hover-Kreis waechst aus der Mitte (statt die Flaeche nur einzufaerben). */
.ikon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--f2); opacity: 0; transform: scale(0.45); transition: transform var(--raus) var(--kurve), 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; transform: scale(1); transition-duration: var(--rein); } }
.ikon:active::before, .ikon[aria-expanded="true"]::before, .menue[open] > summary.ikon::before { opacity: 1; transform: scale(1); transition-duration: var(--druck-zeit); }
/* Unterstrich waechst von links (Gelb, 2 px) und laeuft beim Verlassen nach rechts aus. Fuer Namen,
   Titel und Zeilenlinks; Textlinks im Fliesstext bleiben beim Markerstrich. 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-image: linear-gradient(var(--strich), var(--strich)); background-repeat: no-repeat; background-position: 100% 100%; background-size: 0% var(--strich-hoehe); padding-bottom: 2px;
  transition: background-size var(--raus) var(--kurve), 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 {
  background-size: 100% var(--strich-hoehe); background-position: 0 100%; text-decoration: none; transition-duration: var(--rein);
}
/* 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; }
.like.like--pop svg { animation: daumen-pop 560ms var(--kurve); }
.like.like--ab svg { animation: daumen-ab 300ms var(--kurve); }
.like.like--pop::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gelb); pointer-events: none; animation: ring-weg 520ms var(--kurve) both; }
/* 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::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--gelb); transform: scaleX(0); transform-origin: right; transition: transform var(--raus) var(--kurve); }
.kopf__weg:hover { color: var(--tinte); }
.kopf__weg:hover::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--rein); }
.kopf__weg:active { transform: translateY(1px); transition-duration: var(--druck-zeit); }
.kopf__weg[aria-current] { color: var(--tinte); }
.kopf__weg[aria-current]::after { display: none; }
.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: var(--r-pille); }
.thema-wahl label { position: relative; text-align: center; font-size: 13px; font-weight: 700; padding: 6px 6px; border-radius: var(--r-pille); 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(--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: var(--r-pille); }
.segment > * { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pille); background: none; font-size: 13px; font-weight: 700; color: var(--ui); cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .segment > *:hover { color: var(--tinte); box-shadow: inset 0 -2px 0 var(--gelb); } }
.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::after, .reiterleiste button::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gelb); transform: scaleX(0); transform-origin: right; transition: transform var(--raus) var(--kurve); }
.reiterleiste a:hover, .reiterleiste button:hover { color: var(--tinte); }
.reiterleiste a:hover::after, .reiterleiste button:hover::after { transform: scaleX(1); transform-origin: left; 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. */
.reiterleiste a:active, .reiterleiste button:active { transform: translateY(1px); transition-duration: var(--druck-zeit); }
.reiterleiste a:active::after, .reiterleiste button:active::after { transform: scaleX(1); transform-origin: left; transition-duration: var(--druck-zeit); }
.reiterleiste [aria-current]::before, .reiterleiste [aria-selected="true"]::before { animation: punkt-da 460ms var(--feder) both; }
@keyframes punkt-da { from { transform: scale(0); } to { transform: scale(1); } }
.reiterleiste [aria-current], .reiterleiste [aria-selected="true"] { color: var(--tinte); }
.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; }
}