/* Future Maps Events – Prototyp im Stil von Future Maps.
   Farbwerte aus dem Future-Maps-Designsystem (core-colors), Dunkelmodus als eigene Übersetzung.
   Farbrollen (F30–F32, Variante „kräftig“): Rose = Marke und Handlung (Logo, Knöpfe, Links, Ort, Regler,
   aktive Filter), helles Violett #CAC0FD = Termine, helles Grün #BEEDCE = Gruppen (Simon, 06.10.: Farben aus dem
   Mockup), Gelb = Merken und Hinweise, Blau = Fokusring.
   Rose-Töne: große Elemente (Ortsname, Stift, Standort, Regler) im echten Future Rose #F50067 (3:1 reicht dort,
   3,8:1 auf dem Hintergrund); Knöpfe mit weißer Schrift #E0005E (4,9:1); kleine Links #C2004F (6,2:1). */
:root {
  --bg: #f4f3ff;                 /* primary-95 */
  --bg-verlauf: #fdeef4;         /* Lavendel läuft unten ins Rosa aus, wie die Future-Maps-Seitenleiste */
  --flaeche: #ffffff;
  --flaeche-2: #f4f3ff;
  --text: #1a1a2f;               /* neutral-10 */
  --text-2: #5d5c75;             /* neutral-40 */
  --rand-farbe: #1a1a2f;
  --gitter: rgba(26, 26, 47, .10); --gitter-leer: rgba(26, 26, 47, .025);
  --schatten-farbe: #1a1a2f;
  --violett: #4c3df5;            /* primary-40, Flächen */
  --violett-text: #4c3df5;
  --violett-label: #271bb4;      /* primary-20 */
  --violett-hell: #e8e5ff;       /* primary-85 */
  /* Rose = Marke und Handlung */
  --rose: #f50067;               /* Future Rose: Logo, Deko, Flächen ohne Text */
  --rose-knopf: #e0005e;         /* Knöpfe mit weißer Schrift (4,9:1), optisch wie #F50067 */
  --rose-text: #c2004f;          /* kleine Links und Symbole (6,2:1 auf Weiß) */
  --rose-gross: #f50067;         /* Ortsname, Stift, Standort, Regler: großes bzw. grafisches Element, 3:1 genügt */
  --rose-hell: #ffe1e7;          /* gedrückt, Hover, aktive Filter */
  /* Typfarben (F30, Simon 06.10.): Termine helles Violett, Gruppen helles Grün. Nur als Flächen mit
     dunkler Schrift und Kontur; als Textfarbe zu hell. Zum Wechseln hier und in den Dunkel-Blöcken ändern. */
  --termin: #cac0fd;             /* primary-80: Monatsleiste im Datumsblock, Themen-Chips auf Terminen */
  --auf-termin: #1a1a2f;
  /* Simon, 11.10.: Gruppen wieder in Grün (Jonathans Rot aus J31 zurückgenommen) */
  --gruppe: #beedce;             /* secondary-90: Gruppenblase, Themen-Chips auf Gruppen */
  --gruppe-text: #1b6b38;        /* Gruppenname als Text */
  --gruppe-hell: #e3f6ea;        /* Kasten und Beispielbild, heller als --gruppe */
  --gruppe-mittel: #8ad6a2;      /* nur Beispielbilder */
  --auf-gruppe: #1a1a2f;
  --gelb: #ffc700;               /* tertiary-80 */
  --gelb-hell: #fee5a0;          /* Halo-Gelb der Future-Maps-Figuren, nur für Beispielbilder */
  /* Halos der eigenen Figuren (Avatare, nur Beispiele) */
  --halo-gelb: #fee5a0; --halo-gruen: #c8ebd2; --halo-violett: #d9d5ff; --halo-lavendel: #c4bffc; --halo-pink: #ffd3df; --halo-koralle: #ffd9cc;
  --herz: #ffc700;               /* Merken-Herz gelb wie „Faves“ in Future Maps (F32), immer mit dunkler Kontur */
  --herz-kontur: #1a1a2f;
  --toast: #61cb7f;              /* Toast-Grün wie in Future Maps */
  --auf-farbe: #ffffff;
  --fokus: #0070d0;             /* 4,5:1 auf Lavendel */
  --regler: #f50067;
  --titel: "Roboto Slab", Georgia, serif;
  --schrift: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
/* Dunkelmodus: automatisch nach Systemeinstellung, per Knopf umschaltbar */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15142b; --bg-verlauf: #22132e; --flaeche: #23223d; --flaeche-2: #2e2d4a;
    --text: #f4f3ff; --text-2: #b3b2cc; --rand-farbe: #8f8ab8; --gitter: rgba(244, 243, 255, .10); --gitter-leer: rgba(244, 243, 255, .03); --schatten-farbe: #4c3df5;
    --violett-text: #9e97fd; --violett-label: #cac0fd; --violett-hell: #2e2860;
    --rose-text: #ff5c9a; --rose-hell: #5a1636; --fokus: #4db1ff; --regler: #d6005a;
    --gruppe: #2f7a4a; --gruppe-text: #7ad99a; --gruppe-hell: #1b4029; --gruppe-mittel: #2f7a4a; --auf-gruppe: #f4f3ff;
    --termin: #433b8c; --auf-termin: #f4f3ff;
    /* Simon, 06.10.: im Dunkelmodus ein leicht abgedunkeltes Future Rose, einheitlich für Logo, Knöpfe,
       Ortsname, Standort und Regler (3,4:1 auf dem Hintergrund, weiße Schrift darauf 5,2:1).
       Nur kleine Textlinks (--rose-text) bleiben heller, sonst wären sie zu schwach lesbar. */
    --rose: #d6005a; --rose-knopf: #d6005a; --rose-gross: #d6005a;
    --gelb-hell: #3d3418;
    --halo-gelb: #4a3d12; --halo-gruen: #1b4029; --halo-violett: #352d80; --halo-lavendel: #433b8c; --halo-pink: #5a1636; --halo-koralle: #4f2418;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15142b; --bg-verlauf: #22132e; --flaeche: #23223d; --flaeche-2: #2e2d4a;
  --text: #f4f3ff; --text-2: #b3b2cc; --rand-farbe: #8f8ab8; --gitter: rgba(244, 243, 255, .10); --gitter-leer: rgba(244, 243, 255, .03); --schatten-farbe: #4c3df5;
  --violett-text: #9e97fd; --violett-label: #cac0fd; --violett-hell: #2e2860;
  --rose-text: #ff5c9a; --rose-hell: #5a1636; --fokus: #4db1ff; --regler: #d6005a;
  --gruppe: #2f7a4a; --gruppe-text: #7ad99a; --gruppe-hell: #1b4029; --gruppe-mittel: #2f7a4a; --auf-gruppe: #f4f3ff;
    --termin: #433b8c; --auf-termin: #f4f3ff;
    /* Simon, 06.10.: im Dunkelmodus ein leicht abgedunkeltes Future Rose, einheitlich für Logo, Knöpfe,
       Ortsname, Standort und Regler (3,4:1 auf dem Hintergrund, weiße Schrift darauf 5,2:1).
       Nur kleine Textlinks (--rose-text) bleiben heller, sonst wären sie zu schwach lesbar. */
    --rose: #d6005a; --rose-knopf: #d6005a; --rose-gross: #d6005a;
  --gelb-hell: #3d3418;
  --halo-gelb: #4a3d12; --halo-gruen: #1b4029; --halo-violett: #352d80; --halo-lavendel: #433b8c; --halo-pink: #5a1636; --halo-koralle: #4f2418;
  color-scheme: dark;
}
:root {
  --rand: 2px solid var(--rand-farbe);
  /* Jonathan, 11.10.: Versatz-Schatten als filter: drop-shadow(…) statt box-shadow. box-shadow wird am Rand des
     Elements abgeschnitten; Firefox glättet Rand und Schatten in den runden Ecken getrennt, dabei blieb ein heller
     Strich zwischen beiden. drop-shadow liegt vollständig unter dem Element. Variablen bleiben für Altes erhalten. */
  --schatten: 4px 4px 0 var(--schatten-farbe);
  --schatten-klein: 2px 2px 0 var(--schatten-farbe);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; overflow-x: hidden; color: var(--text); font: 15px/1.5 var(--schrift);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 45%, var(--bg-verlauf) 100%) fixed;
  min-height: 100vh;
}
a { color: var(--rose-text); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
[hidden] { display: none !important; }
.nur-screenreader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .funken { display: none; }
}
.symbol-vorlagen { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.symbol { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.testhinweis { background: var(--gelb); color: #1a1a2f; font-size: 13px; font-weight: 500; text-align: center; padding: 6px 16px; }

/* Kopf */
.kopf { max-width: 1080px; margin: 0 auto; padding: 16px; display: flex; align-items: center; gap: 12px; }
.marke { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 700 20px var(--titel); margin-right: auto; }
/* Logo-Entwurf A (Simon, 11.10.): Sechseck aus dem Future-Maps-Logo mit den zwei Blättern des Vegan-Icons */
.marke-logo { flex: none; width: 40px; height: 40px; color: var(--rose); }   /* Simon, 11.10.: Future Rose statt Grün */
@media (max-width: 640px) { .marke-logo { width: 34px; height: 34px; } }
.marke-zeichen { flex: none; width: 30px; height: 30px; border: var(--rand); border-radius: 50% 50% 50% 6px; background: var(--rose); filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); }
.marke-name { line-height: 1.15; }
/* Schmale Handys: Marke kleiner und zweizeilig („Future Maps / Events“), damit Mond und „Eintragen“ daneben passen */
@media (max-width: 420px) {
  .kopf { gap: 6px; }
  .marke { font-size: 16px; gap: 6px; min-width: 0; }
  .marke-name { max-width: 7.5em; }
  .kopf .knopf { padding: 0 11px; }
  .kopf .knopf-rund { width: 38px; height: 38px; }
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border: var(--rand); border-radius: 999px;
  background: var(--flaeche); color: var(--text); font: 500 15px var(--schrift); cursor: pointer;
  filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); transition: transform .1s ease, filter .1s ease;
}
.knopf:hover { transform: translate(-1px, -1px); filter: drop-shadow(3px 3px 0 var(--schatten-farbe)); }
.knopf:active { transform: translate(1px, 1px); box-shadow: none; filter: none; }
.knopf:disabled { opacity: .7; cursor: default; transform: none; }
/* Handlung = Rose, für Termine und Gruppen gleich (wie „Download free app“ und „Got it!“ bei Future Maps) */
.knopf-primaer { background: var(--rose-knopf); color: var(--auf-farbe); }
.knopf-gruppe { background: var(--rose-knopf); color: var(--auf-farbe); }
.knopf-klein { min-height: 36px; font-size: 14px; padding: 0 14px; }
a.knopf { text-decoration: none; }
.knopf-termin { background: var(--rose-knopf); color: var(--auf-farbe); }
.knopf-rund {
  width: 42px; height: 42px; flex: none; border: var(--rand); border-radius: 50%; padding: 0;
  background: var(--flaeche); color: var(--text); display: inline-grid; place-items: center; cursor: pointer;
  filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); transition: transform .1s ease, filter .1s ease;
}
.knopf-rund:hover { transform: translate(-1px, -1px); filter: drop-shadow(3px 3px 0 var(--schatten-farbe)); }
.knopf-rund.klein { width: 32px; height: 32px; box-shadow: none; filter: none; border-width: 1.5px; }
.knopf-rund.klein svg.symbol { width: 16px; height: 16px; }
.knopf-rund:disabled { opacity: .6; cursor: default; }
.symbol-standort { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--rose-gross); box-shadow: inset 0 0 0 3px var(--flaeche), inset 0 0 0 8px var(--rose-gross); }
/* F41: eigener Standort aktiv = Knopf gefüllt in Rose (Simon, 11.10.: Ortsname immer gestrichelt unterstrichen) */
#knopf-standort[aria-pressed="true"] { background: var(--rose-knopf); }
#knopf-standort[aria-pressed="true"] .symbol-standort { border-color: #ffffff; box-shadow: inset 0 0 0 3px var(--rose-knopf), inset 0 0 0 8px #ffffff; }

.inhalt { max-width: 1080px; margin: 0 auto; padding: 8px 16px 16px; }

/* Ort als Satz; der Ortsname ist ein Eingabefeld */
.suche { margin: 12px 0 20px; }
.ort-satz { font: 700 clamp(24px, 4.2vw, 38px)/1.25 var(--titel); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ort-satz h1 { font: inherit; margin: 0; text-wrap: balance; }
.ort-feld { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; }
/* Breite = genau die Textbreite: ein unsichtbarer Zwilling (::after, Text aus data-wert) liegt in derselben
   Rasterzelle wie das Feld und bestimmt die Breite. So sitzt der Stift immer direkt hinter dem Namen statt
   in einer geschätzten Lücke, auch wenn die Schrift erst später lädt. Der Stift steht im Feld selbst
   (rechter Innenabstand) über der gestrichelten Linie: Name und Stift lesen sich als ein Feld, und ein
   langer Name kann ihn nicht wegdrücken, er endet vorher mit „…“. */
.ort-eingabe-rahmen {
  --stift: max(14px, .58em); --stift-platz: calc(var(--stift) + 9px);
  position: relative; display: inline-grid; align-items: center; cursor: text; min-width: 0;
  max-width: calc(100vw - 32px - 56px);
}
.ort-eingabe-rahmen.ist-lang { font-size: .72em; }
.ort-eingabe-rahmen:focus-within::after { min-width: 7ch; }   /* leeres Feld beim Tippen behält eine sinnvolle Breite */   /* lange Ortsnamen kleiner, damit sie aufs Handy passen */
.ort-eingabe-rahmen::after {
  content: attr(data-wert); grid-area: 1 / 1; height: 0; overflow: hidden; visibility: hidden; white-space: pre;
  min-width: 4ch; padding: 0 var(--stift-platz) 0 2px; font: inherit;
}
#ort-eingabe {
  grid-area: 1 / 1; width: 100%; min-width: 0;
  font: inherit; color: var(--rose-gross); background: transparent; border: 0;
  border-bottom: 3px dashed var(--rose-gross); border-radius: 0; padding: 0 var(--stift-platz) 0 2px;
  text-overflow: ellipsis; cursor: text;
}
#ort-eingabe::placeholder { color: var(--text-2); opacity: 1; }   /* bisheriger Ort beim Tippen grau (Rose mit Transparenz läge unter 4,5:1) */
#ort-eingabe:hover { background: var(--rose-hell); border-radius: 4px 4px 0 0; }
#ort-eingabe:focus { outline: none; background: var(--flaeche); border-bottom-style: solid; box-shadow: 0 0 0 3px var(--fokus); border-radius: 4px 4px 0 0; }
.stift { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; color: var(--rose-gross); pointer-events: none; }
.stift svg.symbol { width: var(--stift); height: var(--stift); stroke-width: 2.4; }
#ort-eingabe:focus + .stift { opacity: 0; }
/* Vorschlagsliste: direkt unter dem Eingabefeld angedockt (oben eckig, unten rund), eigene kleine Schrift */
.ort-vorschlaege, .ort-meldung {
  position: absolute; top: calc(100% + 3px); left: 0; z-index: 20;
  width: max-content; min-width: 100%; max-width: min(420px, calc(100vw - 32px));
  font: 400 15px/1.35 var(--schrift); color: var(--text); text-align: left; white-space: normal;
}
.ort-vorschlaege {
  list-style: none; margin: 0; padding: 4px; max-height: min(340px, 55vh); overflow-y: auto;
  background: var(--flaeche); border: var(--rand); border-radius: 0 0 16px 16px; filter: drop-shadow(4px 4px 0 var(--schatten-farbe));
}
.ort-vorschlag { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; cursor: pointer; }
.ort-vorschlag[aria-selected="true"] { background: var(--rose-hell); }
.vorschlag-pin { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rand-farbe); background: var(--flaeche-2); display: grid; place-items: center; }
.vorschlag-pin::after { content: ""; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid var(--rose-text); }
.vorschlag-text { display: grid; min-width: 0; }
.vorschlag-name { font-weight: 500; }
.vorschlag-zusatz { font-size: 13px; color: var(--text-2); }
/* Meldung: unsichtbar, solange leer (bleibt aber als Live-Region im Baum) */
.ort-meldung:not(:empty) {
  padding: 8px 12px; background: var(--flaeche); border: var(--rand); border-radius: 0 0 14px 14px; filter: drop-shadow(2px 2px 0 var(--schatten-farbe));
}

/* Umkreis: feste Höhe der Kopfzeile, damit der Regler nie verrutscht */
.umkreis { margin-top: 14px; max-width: 420px; }
.umkreis-kopf { display: flex; align-items: center; gap: 10px; min-height: 34px; white-space: nowrap; }
.umkreis-kopf label { font-size: 15px; }
.umkreis input[type=range] { display: block; width: 100%; margin: 2px 0 0; accent-color: var(--regler); height: 28px; }

/* Filter in einer Zeile */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.segment { display: inline-flex; border: var(--rand); border-radius: 999px; background: var(--flaeche); padding: 3px; filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); }
.segment button { border: 0; background: transparent; font: 500 14px var(--schrift); color: var(--text); min-height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer; }
.segment button[aria-pressed="true"], .segment button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.ansicht button { min-height: 38px; padding: 0 20px; font-weight: 600; }
/* Knöpfe „Zeitraum“ und „Themen“ (bzw. „Schwerpunkt“): Pillen mit Pfeil, „Themen“ zusätzlich mit Zähler */
.filter-aufklapp { position: relative; }
.filter-knopf {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  min-height: 42px; padding: 0 14px 0 16px; border: var(--rand); border-radius: 999px; background: var(--flaeche);
  color: var(--text); font: 500 14px var(--schrift); filter: drop-shadow(2px 2px 0 var(--schatten-farbe));
}
.filter-knopf.ist-aktiv { background: var(--rose-hell); }
.filter-knopf[aria-expanded="true"] { box-shadow: none; filter: none; transform: translate(2px, 2px); }
.filter-knopf:disabled { opacity: .45; cursor: not-allowed; }
.filter-zahl {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--rose-knopf); color: #ffffff; font: 700 11px/20px var(--schrift); text-align: center;
}
.filter-pfeil { width: 7px; height: 7px; border-right: 2px solid; border-bottom: 2px solid; transform: rotate(45deg) translateY(-2px); margin: 0 2px; }
.filter-knopf[aria-expanded="true"] .filter-pfeil { transform: rotate(-135deg) translate(-2px, 0); }
/* Aufklapp-Feld: klein, direkt unter dem Knopf, über dem Inhalt (Figma: Filter-Sheet im Kleinen) */
.filter-feld {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
  width: min(360px, calc(100vw - 32px)); padding: 10px 14px 12px;
  background: var(--flaeche); border: var(--rand); border-radius: 20px; filter: drop-shadow(4px 4px 0 var(--schatten-farbe));
}
.filter-feld-schmal { width: 240px; }
/* Zeitraum: Liste mit Haken, ein Klick wählt und schließt */
.zeit-liste { list-style: none; margin: 0; padding: 2px 0 0; }
.zeit-liste [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 12px; margin: 0 -6px; border-radius: 12px; cursor: pointer; font: 400 14px var(--schrift);
}
.zeit-liste [role="option"]:hover { background: var(--rose-hell); }
.zeit-liste [role="option"]:focus-visible { outline-offset: -3px; }
.zeit-liste [role="option"][aria-selected="true"] { font-weight: 700; color: var(--rose-text); }
.zeit-liste [role="option"][aria-selected="true"]::after {
  content: ""; flex: none; width: 6px; height: 11px; margin: -3px 4px 0 0;
  border-right: 2.5px solid; border-bottom: 2.5px solid; transform: rotate(45deg);
}
.filter-feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.filter-feld-titel { margin: 0; font: 700 16px var(--titel); }
.knopf-schliessen-klein { width: 34px; height: 34px; border-width: 1.5px; flex: none; }
.knopf-schliessen-klein::before, .knopf-schliessen-klein::after { width: 13px; }
.filter-feld-fuss { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 6px; padding-top: 10px; border-top: 1.5px solid var(--gitter); }
/* Textknopf wie „Reset“ in Future Maps: grau, unterstrichen */
.text-knopf { border: 0; background: none; padding: 6px 2px; min-height: 36px; font: 500 13px var(--schrift); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-knopf:disabled { opacity: .45; cursor: default; text-decoration: none; }
.filter-schleier { display: none; }
/* Schmale Handys: Zeitraum, Themen und Herz passen gemeinsam in die zweite Zeile (unter „Termine | Gruppen“) */
@media (max-width: 420px) {
  .filter { gap: 8px; }
  .filter-knopf { padding: 0 10px 0 12px; gap: 5px; }
  #themen-knopf.ist-aktiv .filter-pfeil { display: none; }   /* mit Zähler wird es sonst zu breit */
}
/* Handy: dasselbe Feld als kompaktes Bottom-Sheet */
@media (max-width: 560px) {
  .filter-feld {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 75vh; overflow-y: auto;
    padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: none; filter: none; z-index: 41;
  }
  .filter-feld::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 6px; border-radius: 2px; background: var(--text-2); opacity: .4; }
  .filter-schleier:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 25, .45); }
  .filter-feld-fuss .knopf { flex: 1; max-width: 260px; }
  .zeit-liste { padding-bottom: 4px; }
  .zeit-liste [role="option"] { min-height: 48px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  .filter-feld:not([hidden]) { animation: feld-rein .16s ease-out; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  .filter-feld:not([hidden]) { animation: sheet-rein .22s ease-out; }
}
@keyframes feld-rein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sheet-rein { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
/* Herz-Filter: gleiche Kontur und gleicher Schatten wie die übrigen Filter; aktiv dunkel wie der gewählte Tab */
.filter-herz { position: relative; }
.filter-herz svg.symbol { transition: fill .15s ease; }
.filter-herz[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.filter-herz[aria-pressed="true"] svg.symbol { fill: var(--herz); stroke: var(--bg); }
/* J19: Stichwortsuche – runde Lupe wie das Herz, klappt ein schmales Feld auf (Nebenfeature, kein Hauptfilter) */
.filter-lupe.ist-aktiv { background: var(--text); color: var(--bg); }
.such-feld { display: inline-flex; align-items: center; gap: 4px; border: var(--rand); border-radius: 999px; background: var(--flaeche);
  padding: 0 4px 0 14px; min-height: 44px; filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); }
.such-feld[hidden] { display: none; }
.such-feld input { border: 0; background: none; font: 400 15px var(--schrift); color: var(--text); width: 210px; min-width: 0; outline: none; }
.such-feld input::-webkit-search-cancel-button { display: none; }
.such-feld:focus-within { outline: 3px solid var(--fokus); outline-offset: 2px; }
.such-leeren { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; cursor: pointer; position: relative; flex: none; }
.such-leeren::before, .such-leeren::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--text-2); transform: translate(-50%, -50%) rotate(45deg); }
.such-leeren::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (max-width: 640px) { .such-feld { flex: 1 1 100%; } .such-feld input { width: 100%; } }
.chip-reihe { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 6px; }
.chip { border: 1.5px solid var(--rand-farbe); border-radius: 999px; background: var(--flaeche); color: var(--text); font: 400 13px var(--schrift); min-height: 32px; padding: 0 12px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--rose-knopf); border-color: var(--rose-knopf); color: var(--auf-farbe); }
/* F88 (Simon): im Eintragen-Formular ist die Auswahl schwarz wie der Umschalter „Termine | Gruppen“, nicht rosa */
#eintragen .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Ergebnisse */
.ergebnis-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ergebnis-anzahl { font: 600 16px var(--schrift); margin: 0; padding-top: 9px; }
.sortier-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.segment-klein { box-shadow: none; filter: none; padding: 2px; }
.segment-klein button { min-height: 32px; font-size: 13px; padding: 0 12px; }
.ergebnis-steuerung { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px 16px; margin-left: auto; }
/* Liste/Kalender sitzt fest am rechten Rand; die Sortierung links davon verschwindet im Kalender, ohne dass der Umschalter springt */
.sortier-zeile.im-kalender { visibility: hidden; }
/* Platz für den Scrollbalken immer freihalten: der breite Kalender (Liste rechts) ist oft kürzer als
   das Fenster, sonst verschwände der Balken beim Umschalten und die ganze Seite rückte zur Seite */
html { scrollbar-gutter: stable; }
@media (max-width: 900px) {
  /* Schmal: Steuerung immer in eigener Zeile, Liste/Kalender vorne links, Sortierung dahinter bzw. darunter */
  .ergebnis-steuerung { flex-basis: 100%; justify-content: flex-start; margin-left: 0; }
  .darstellung { order: -1; }
  .sortier-zeile.im-kalender { display: none; }
}
/* Umschalter Liste/Kalender: wie die Sortierknöpfe, mit kleinem Symbol */
.darstellung button { display: inline-flex; align-items: center; gap: 5px; }
.darstellung svg.symbol { width: 15px; height: 15px; }

/* ---------- Kalender (Versuch, Feedback S1) ---------- */
.kalender { display: grid; gap: 22px; }
.kal-karte {
  max-width: 560px; background: var(--flaeche); border: var(--rand); border-radius: 22px;
  padding: 12px 14px 10px; filter: drop-shadow(4px 4px 0 var(--schatten-farbe));
}
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 6px; }
.kal-monat { font: 700 20px/1.2 var(--titel); margin: 0; }
.kal-navi { display: flex; align-items: center; gap: 6px; }
.kal-navi .knopf-rund.klein { width: 36px; height: 36px; }
.kal-navi .knopf-rund:disabled:hover { transform: none; box-shadow: none; filter: none; }
.kal-raster { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kal-raster th { font: 600 12px var(--schrift); color: var(--text-2); text-align: center; padding: 2px 0 6px; }
/* Raster: feine Haarlinien nur zwischen den Zellen, ohne Außenrahmen (die Karte rahmt schon) */
.kal-raster td { padding: 3px; text-align: center; vertical-align: top; border: 1px solid var(--gitter); }
.kal-raster tr > td:first-child { border-left: 0; }
.kal-raster tr > td:last-child { border-right: 0; }
.kal-raster tbody tr:last-child > td { border-bottom: 0; }
.kal-raster td.kal-leer { background: var(--gitter-leer); }
.kal-tag { cursor: default; }
.kal-tag:focus { outline: none; }
.kal-zelle {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 50px; padding: 5px 0 4px;
  border: 2px solid transparent; border-radius: 10px;
}
.kal-tag:focus-visible .kal-zelle { outline: 3px solid var(--fokus); outline-offset: 0; }
.kal-hat { cursor: pointer; }
.kal-hat:hover .kal-zelle { background: var(--violett-hell); }
.kal-zahl { display: inline-block; min-width: 26px; padding: 0 4px; border-radius: 999px; font: 500 14px/22px var(--schrift); }
.kal-hat .kal-zahl { font-weight: 600; }
.kal-vorbei .kal-zahl { color: var(--text-2); opacity: .6; }
/* Heute: gelb hinterlegt (wie das Markenzeichen), unabhängig von der Auswahl */
.kal-heute .kal-zahl { background: var(--gelb); color: #1a1a2f; font-weight: 700; opacity: 1; }
/* Ausgewählter Tag: Kontur und Versatzschatten wie die Kacheln */
.kal-tag[aria-selected="true"] .kal-zelle {
  background: var(--violett-hell); border-color: var(--rand-farbe); filter: drop-shadow(2px 2px 0 var(--schatten-farbe));
  transform: translate(-1px, -1px);
}
/* Punkte: ein gleicher Punkt je Termin (höchstens drei), Termin-Violett; ohne Legende (Feedback F33) */
.kal-punkte { display: flex; align-items: center; justify-content: center; gap: 3px; height: 10px; }
.kal-punkt { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--violett-text); }
.kal-tag-titel { font: 700 18px var(--titel); margin: 0 0 12px; }
/* Breit: Termine des gewählten Tages rechts neben dem Kalender, einspaltig; der Kalender bleibt
   beim Scrollen durch eine lange Tagesliste oben stehen (nur wenn das Fenster hoch genug ist) */
@media (min-width: 1000px) {
  .kalender { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); align-items: start; gap: 28px; }
  .kal-tag-bereich { min-width: 0; padding-top: 18px; }
  #kal-tag-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) and (min-height: 600px) {
  .kal-karte { position: sticky; top: 16px; }
}
.kal-leer-box .kal-leer-satz { color: var(--text); font: 700 18px var(--titel); margin-bottom: 4px; }
@media (max-width: 420px) {
  .kal-karte { padding: 10px 6px 8px; border-radius: 18px; }
  .kal-raster td { padding: 2px; }
  .kal-zelle { min-height: 46px; border-radius: 10px; }
  .kal-punkt { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kal-zelle { transition: transform .12s ease, filter .12s ease, background-color .12s ease; }
  #kal-tag-liste > li { animation: kal-rein .22s ease-out both; }
  #kal-tag-liste > li:nth-child(2) { animation-delay: .04s; }
  #kal-tag-liste > li:nth-child(n+3) { animation-delay: .08s; }
}
@keyframes kal-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kachelwand .abschnitt { grid-column: 1 / -1; list-style: none; }
.kachelwand .abschnitt h3 { font: 700 18px var(--titel); margin: 10px 0 -4px; display: flex; align-items: center; gap: 10px; }
.kachelwand .abschnitt h3::after { content: ""; flex: 1; border-top: 2px dashed var(--rand-farbe); opacity: .35; }
.kachelwand .abschnitt:first-child h3 { margin-top: 0; }
.kachelwand { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Kachel: dunkler Rand, harter Schatten – wie die Future-Maps-Karten */
.kachel {
  position: relative; display: flex; gap: 14px; align-items: flex-start; height: 100%;
  background: var(--flaeche); border: var(--rand); border-radius: 22px; padding: 16px;
  filter: drop-shadow(4px 4px 0 var(--schatten-farbe)); cursor: pointer; transition: transform .1s ease, filter .1s ease;
}
.kachel:hover { transform: translate(-2px, -2px); filter: drop-shadow(6px 6px 0 var(--schatten-farbe)); }
/* Andrücken: die Kachel rückt auf ihren Schatten zu */
.kachel:active { transform: translate(2px, 2px); filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); }
.kachel-text { min-width: 0; flex: 1; }
.kachel-link { all: unset; cursor: pointer; }
.kachel-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.kachel-link:focus-visible { outline: none; }
.kachel-link:focus-visible::after { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kachel-titel { font: 700 17px/1.3 var(--titel); margin: 2px 0 4px; overflow-wrap: anywhere; }   /* sehr lange Wörter brechen notfalls mitten im Wort */
.kachel-zeile { font-size: 13px; color: var(--text-2); margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; }
.kachel-zeile .punkt { white-space: nowrap; }
.kachel-zeile .punkt::before { content: "·"; margin: 0 6px; }
.zeit-bis { opacity: .7; } /* Endzeit dezenter als der Beginn */
.wann-datum, .wann-zeit { white-space: nowrap; }
.wann-datum { margin-right: 6px; }
.label-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.kachel .label-zeile { padding-right: 58px; }   /* Platz für die Entfernung in der Ecke */
/* Terminkachel ohne Chips (F18): leere Zeile weg, dafür hält der Titel Abstand zur Entfernung */
.kachel .label-zeile:empty { display: none; }
.kachel .label-zeile:empty + .kachel-titel { padding-right: 58px; }
/* F20 (Variante C): kleinere, randlose Pille */
.entfernung-ecke {
  position: absolute; top: 15px; right: 15px; white-space: nowrap;
  font: 600 11px var(--schrift); color: var(--text-2); background: var(--flaeche-2);
  border: 0; border-radius: 999px; padding: 0 8px; line-height: 20px;
}
.kachel-label { font: 600 11px var(--schrift); letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
/* F20 (Variante C): wiederkehrend grau hinter der Uhrzeit („18:00 Uhr · ↻ monatlich“); der Punkt hängt
   an der Uhrzeit, damit er beim Umbruch am Zeilenende bleibt */
.wdh { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); white-space: nowrap; align-self: center; }
.wdh svg.symbol { width: 13px; height: 13px; color: var(--violett-text); }
.kachel-zeile .wann-zeit:has(+ .wdh)::after { content: "·"; margin: 0 6px; }
/* F20 (Variante C): Themen als Symbol + Wort ohne Rahmen, eigene Zeile */
.themen-zeile { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 7px 0 0; font-size: 12.5px; font-weight: 500; color: var(--text); }
.thema { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.thema svg.symbol { width: 15px; height: 15px; color: var(--text-2); }
/* F42: Themen als Chips in der Typfarbe der Kachel */
.themen-zeile:has(.thema-chip) { gap: 6px; }
.thema-chip { border: 1.5px solid var(--rand-farbe); border-radius: 999px; padding: 1px 9px 1px 7px; font-size: 12px; line-height: 18px; background: var(--chip-farbe, var(--flaeche-2)); color: var(--chip-text, var(--text)); }
.thema-chip svg.symbol { width: 13px; height: 13px; color: currentColor; }
.chip-mit-symbol { display: inline-flex; align-items: center; gap: 5px; }
.chip-mit-symbol svg.symbol, .tag svg.symbol { width: 14px; height: 14px; color: currentColor; flex: none; }
.tag:has(svg) { display: inline-flex; align-items: center; gap: 4px; }
.gruppen-zeile { margin-top: 8px; }
.gruppen-zeile .abzeichen-gruppe { font-weight: 500; }
/* Jonathan, 11.10. (J39): Themen-Pillen farblos wie auf den Highlight-Karten, nur Umriss und Schrift */
.kachel-termin, .tags-termin, .kachel-gruppe, .tags-gruppe { --chip-farbe: transparent; --chip-text: var(--text); }
.tags-termin .tag, .tags-gruppe .tag { background: var(--chip-farbe); color: var(--chip-text); }
.termine-anzahl strong { color: var(--text); font-weight: 600; }
.kosten-kurz { white-space: nowrap; color: var(--text); font-weight: 500; }   /* nur teils / Spende erwartet / kostenpflichtig */
.thema-mehr { color: var(--text-2); font-weight: 600; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tag { border: 1.5px solid var(--rand-farbe); border-radius: 999px; padding: 0 9px; font-size: 12px; line-height: 20px; }

/* Termin: Datumsblock (violett) */
.datumsblock { flex: none; width: 54px; border: var(--rand); border-radius: 14px; overflow: hidden; text-align: center; background: var(--flaeche); }
.datumsblock .monat { display: block; background: var(--termin); color: var(--auf-termin); border-bottom: 1.5px solid var(--rand-farbe); font: 600 11px var(--schrift); text-transform: uppercase; padding: 2px 0; }
.datumsblock .tag-zahl { display: block; font: 700 22px/1.2 var(--titel); padding-top: 2px; }
.datumsblock .wochentag { display: block; font-size: 11px; color: var(--text-2); padding-bottom: 4px; }

/* Gruppe: runde Sprechblase in der Gruppenfarbe (F30) */
.blase {
  flex: none; width: 54px; height: 54px; border: var(--rand); border-radius: 50% 50% 50% 10px;
  background: var(--gruppe); color: var(--auf-gruppe); display: grid; place-items: center; font: 700 20px var(--titel);
}
/* Abzeichen „+ Gruppe“ in derselben Blasenform */
.abzeichen-gruppe { margin-left: 2px; display: inline-flex; align-items: center; gap: 4px; font: 600 11px var(--schrift); color: var(--gruppe-text); }
/* F19: Gruppenname statt „+ Gruppe“, eine Zeile, zu lange Namen enden mit „…“ */
.gruppen-zeile { display: flex; min-width: 0; margin: 6px 0 0; }
.gruppen-zeile .abzeichen-gruppe { margin-left: 0; min-width: 0; max-width: 100%; }
.gruppen-zeile .mini-blase { flex: none; }
.abzeichen-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-blase { width: 14px; height: 14px; border: 1.5px solid var(--rand-farbe); border-radius: 50% 50% 50% 3px; background: var(--gruppe); }

/* Leer / weiter weg */
.leer { background: var(--flaeche); border: 2px dashed var(--rand-farbe); border-radius: 22px; padding: 20px; }
.leer h3 { margin: 0 0 6px; font: 700 18px var(--titel); }
.leer-kopf { display: flex; align-items: center; gap: 14px; }
.leer-kopf .leer-satz { margin: 0; }
.figur-gross { flex: none; width: 72px; height: 72px; }
.figur-gross .fig-k { stroke-width: 2; }
.leer p { color: var(--text-2); }
.leer .querverweis { color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mehr-laden { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 26px; }
.mehr-laden-info { margin: 0; font-size: 14px; color: var(--text-2); text-align: center; }
.weiter-weg { margin-top: 32px; }
.weiter-weg .ergebnis-anzahl { margin-bottom: 12px; }

/* Dialoge */
.blatt {
  border: var(--rand); padding: 0; width: min(600px, calc(100vw - 32px)); max-height: 88vh;
  border-radius: 26px; background: var(--flaeche); color: var(--text); filter: drop-shadow(6px 6px 0 var(--schatten-farbe));
}
.blatt::backdrop { background: rgba(10, 10, 25, .55); }
/* Gescrollt wird nur der Inhalt, nicht das ganze Fenster: so bleibt der Scrollbalken (auch der beim
   Darüberfahren breitere) innerhalb der runden Ecken, und der Kopf mit „Schließen“ steht fest. */
.blatt[open] { display: flex; flex-direction: column; overflow: hidden; }
.blatt-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Solange ein Fenster offen ist, scrollt die Seite dahinter nicht mit */
html:has(dialog.blatt[open]) { overflow: hidden; }
@media (max-width: 640px) {
  .blatt { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: 26px 26px 0 0; border-bottom: 0; box-shadow: none; filter: none; max-height: 92vh; }
}
.blatt-kopf { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px; background: var(--flaeche); z-index: 1; }
.knopf-schliessen { width: 42px; height: 42px; border-radius: 50%; border: var(--rand); background: var(--flaeche); cursor: pointer; position: relative; }
.knopf-schliessen::before, .knopf-schliessen::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: var(--text); transform: translate(-50%, -50%) rotate(45deg); }
.knopf-schliessen::after { transform: translate(-50%, -50%) rotate(-45deg); }
.blatt-inhalt { padding: 0 28px 34px; }
.blatt-inhalt h2 { font: 700 24px/1.25 var(--titel); margin: 6px 0 8px; }
.blatt-inhalt h2:focus { outline: none; }
.blatt-inhalt h3 { font: 600 15px var(--schrift); margin: 34px 0 12px; }
.fakten { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 14px 0; font-size: 14px; }
.fakten dt { color: var(--text-2); }
.fakten dd { margin: 0; }
.fakten .auch-in { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-2); }   /* J52: weitere Orte */
.infokasten { background: var(--flaeche-2); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--text-2); margin: 12px 0; }
.gruppenkasten { border: var(--rand); background: var(--gruppe-hell); border-radius: 18px; padding: 12px 14px; margin: 14px 0; }
.kasten-titel { margin: 0 0 4px; }
.kasten-text { margin: 0 0 10px; font-size: 14px; }
.termin-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.termin-liste button {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; gap: 12px; align-items: center;
  padding: 8px; border: 1.5px solid var(--rand-farbe); border-radius: 16px; background: var(--flaeche);
}
.termin-liste .datumsblock { width: 46px; }
.knopfzeile { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.status-zeile { font-size: 13px; color: var(--text-2); margin: 8px 0 0; min-height: 1em; }
.klein-grau { font-size: 14px; color: var(--text-2); }

/* Detailseiten (F22): feste Rangfolge, gleichmäßige Abstände (Abschnitte 22px, innen 8–10px),
   nur ein farbiger Knopf; alles andere ruhig in Textfarbe oder Grau */
.fakten-kopf { margin: 14px 0 0; font-size: 15px; gap: 8px 18px; }
.fakten dd.unbekannt { font-weight: 400; color: var(--text-2); }
.fakten-kopf dd { font-weight: 500; }
.wdh-hinweis { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--text-2); white-space: nowrap; }
.wdh-hinweis svg.symbol, .serie-rhythmus svg.symbol { width: 14px; height: 14px; flex: none; }
.haupt-aktion { margin: 26px 0 34px; }
.knopf-haupt { width: 100%; max-width: 420px; min-height: 48px; padding: 10px 20px; font-weight: 600; text-align: center; }
.knopf-haupt[aria-pressed="true"] { background: var(--rose-hell); color: var(--rose-text); }
.aktion-zeile { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }
/* „In meinen Kalender“: ruhiger zweiter Knopf (Fläche statt Rose), Serien-Auswahl klappt darunter auf */
.kalender-aktion { margin-top: 14px; }
.knopf-kalender svg.symbol { width: 17px; height: 17px; }
.knopf-kalender[aria-expanded="true"] { background: var(--flaeche-2); box-shadow: none; filter: none; transform: none; }
.kal-auswahl { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding-left: 14px; border-left: 2px solid var(--termin); }
.kal-auswahl[hidden] { display: none; }
.kal-auswahl .knopf { text-align: left; min-height: 40px; height: auto; padding-top: 6px; padding-bottom: 6px; }
.kal-bis { color: var(--text-2); font-weight: 400; }
.kal-hinweis { font-size: 13px; max-width: 420px; }
.beschreibung { margin: 0; font-size: 15px; line-height: 1.65; }
.tags-liste { list-style: none; padding: 0; margin: 14px 0 0; gap: 6px; }
.veranstalter-zeile { margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
/* „Wer kommt“ (F25): eigener Abschnitt, gestrichelter Rahmen = Platzhalter */
.leute { margin: 34px 0; padding: 14px 16px 16px; border: 1.5px dashed var(--rand-farbe); border-radius: 18px; }
.leute-kopf { display: flex; align-items: center; gap: 8px; }
.blatt-inhalt .leute h3 { margin: 0; }
.beispiel-marke { font: 600 11px/18px var(--schrift); padding: 0 8px; border-radius: 999px; background: var(--flaeche-2); color: var(--text-2); }
.leute .avatar-zeile { margin: 10px 0 0; }
.leute .avatar { width: 40px; height: 40px; margin-left: -9px; }
/* Rhythmus und nächste Daten an einer Stelle (F26) */
.serie-rhythmus { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; }
.serie-rhythmus svg.symbol { color: var(--text-2); }
.serie-daten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.serie-daten li { white-space: nowrap; }
.serie-daten li + li::before { content: "·"; margin: 0 8px; }
/* Gruppe als Nebenweg: sichtbar, aber ruhiger als der Hauptknopf */
/* F47 + Simon 06.10.: Gruppenkasten im Gruppengrün, mit Gruppenblase wie auf der Gruppenkachel */
.nebenweg { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: 34px 0; padding: 16px; border: 1.5px solid var(--rand-farbe); border-radius: 18px; background: var(--gruppe-hell); }
.nebenweg-kopf { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nebenweg-text { margin: 0; font-size: 14px; line-height: 1.45; }
.nebenweg-text strong { font-size: 15px; }
.blase-mittel { width: 46px; height: 46px; font-size: 18px; }
.nebenweg .knopf { background: var(--flaeche); }
/* „Wo“ als Kartenlink */
.karten-link { color: inherit; text-decoration: underline; text-decoration-color: var(--rose-gross); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.karten-link:hover { color: var(--rose-text); }
/* Ort ist in Future Maps: kleines Future-Maps-Zeichen (wie das Logo) vor dem Namen */
.fm-zeichen { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; border: 1.5px solid var(--rand-farbe); border-radius: 50% 50% 50% 3px; background: var(--rose); }
/* Quelle und Fahne „Eintrag melden“ */
.quelle-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 10px; border-top: 1.5px dashed var(--rand-farbe); }
.quelle-text { margin: 0; font-size: 13px; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.melden { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.knopf-melden { color: var(--text-2); border-color: transparent; background: transparent; }
.knopf-melden:hover { transform: none; box-shadow: none; filter: none; background: var(--rose-hell); color: var(--text); }

/* Beispielbilder (selbst gezeichnet): Titelbild flach halten, damit „Zur Gruppe“ sichtbar bleibt */
.beispielbild { position: relative; overflow: hidden; border: var(--rand); border-radius: 12px; background: var(--flaeche-2); }
.beispielbild svg { display: block; width: 100%; height: 100%; }
.titelbild { height: clamp(84px, 20vw, 116px); margin: 2px 0 14px; border-radius: 18px; }
.treffenbild { aspect-ratio: 1; }
.beispiel-chip {
  position: absolute; left: 8px; bottom: 8px; padding: 0 8px; border-radius: 999px; line-height: 20px;
  font: 600 11px/20px var(--schrift); color: var(--text); background: var(--flaeche); border: 1.5px solid var(--rand-farbe);
}
.bilder-reihe { overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; border-radius: 12px; }
.bilder-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 42%); gap: 12px; }
.bilder-liste li { scroll-snap-align: start; }
/* J53: echte Bilder der Gruppe (Icon in der Blase, Titelbild, Bilder von Treffen) */
.blase-bild { overflow: hidden; padding: 0; background: var(--flaeche); }
.blase-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.titelbild-foto { overflow: hidden; border: var(--rand); background: var(--flaeche-2); }
.titelbild-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.treffenfoto { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: var(--rand); border-radius: 12px; background: var(--flaeche-2); }
.bf-violett { fill: var(--violett); }
.bf-violett-hell { fill: var(--violett-hell); }
.bf-termin { fill: var(--termin); }
.bf-gruppe { fill: var(--gruppe); }
.bf-gruppe-mittel { fill: var(--gruppe-mittel); }
.bf-gruppe-hell { fill: var(--gruppe-hell); }
.bf-gelb { fill: var(--gelb); }
.bf-gelb-hell { fill: var(--gelb-hell); }
.bf-flaeche { fill: var(--flaeche); }
.b-kontur { stroke: var(--rand-farbe); stroke-width: 2; vector-effect: non-scaling-stroke; }
.b-linie, .b-linie-f { stroke: var(--text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.b-linie { fill: none; }
.b-punkte { stroke-width: 6; }
.b-initiale { font: 700 30px var(--titel); }
.bt-auf-violett { fill: var(--auf-farbe); }
.bt-auf-gruppe { fill: var(--auf-gruppe); }
.bt-auf-gelb { fill: #1a1a2f; }
.bt-auf-flaeche { fill: var(--text); }

/* Formular */
.formular { display: grid; gap: 14px; }
.formular label { display: grid; gap: 4px; font-size: 14px; font-weight: 500; }
.formular input, .formular select, .formular textarea {
  font: 400 16px var(--schrift); min-height: 44px; padding: 8px 12px; color: var(--text);
  border: var(--rand); border-radius: 14px; background: var(--flaeche);
}
.formular textarea { min-height: 90px; }
.formular fieldset { border: var(--rand); border-radius: 16px; padding: 10px 14px; margin: 0; }
.formular legend { font-size: 13px; color: var(--text-2); padding: 0 4px; }
.formular .radio { display: flex; gap: 8px; align-items: center; min-height: 34px; font-weight: 400; }
.formular .radio input { min-height: 0; accent-color: var(--rose-knopf); width: 18px; height: 18px; }
.themen-auswahl { display: flex; flex-wrap: wrap; gap: 0 16px; }
.feld-gruppe { display: grid; gap: 6px; justify-items: start; }
.feld-titel { font-size: 14px; font-weight: 500; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fehler { color: #b3261e; font-size: 13px; font-weight: 500; }
:root[data-theme="dark"] .fehler { color: #ffb4ab; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fehler { color: #ffb4ab; } }
.fehler:empty { display: none; }

/* Eintragen-Formular (F66): kurze Abschnitte, Auswahl als Chips und Karten statt Aufklapplisten */
.eintragen-intro { margin: 0 0 6px; color: var(--text-2); }
.eintragen-formular { grid-template-columns: minmax(0, 1fr); }
.eintragen-formular .feld-gruppe { justify-items: stretch; }
.eintragen-formular .chip-reihe { min-width: 0; padding-bottom: 0; }
.eintragen-formular input, .eintragen-formular textarea { width: 100%; box-sizing: border-box; min-width: 0; }
.eintragen-formular .segment { justify-self: start; }
.feld-zeile > label { min-width: 0; }
.eintragen-abschnitt { font: 600 13px var(--schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
  margin: 10px 0 -4px; padding-top: 14px; border-top: 1px solid var(--gitter); }
.eintragen-abschnitt .feld-frei { text-transform: none; letter-spacing: 0; }
.feld-frei { font-size: 12px; font-weight: 400; color: var(--text-2); }
.pflicht { color: var(--rose-text); }
.feld-hinweis { font-size: 12.5px; font-weight: 400; color: var(--text-2); }
/* J53: Bilder im Eintragen-Formular */
.bilder-felder input[type=file] { font: 400 13px var(--schrift); }
.bildrechte { display: flex !important; flex-direction: row !important; gap: 8px; align-items: flex-start; font-weight: 400; }
.eintragen-formular .bildrechte input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--text); }
.bildrechte span { flex: 1; font-size: 13.5px; line-height: 1.45; }
.bilder-felder { display: grid; gap: 14px; }
.feld-hinweis:empty { display: none; }
.feld-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.feld-breit { width: 100%; max-width: 360px; margin-top: 4px; }
.wahl-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .wahl-karten { grid-template-columns: 1fr; } }
.wahl-karte { display: grid; gap: 2px; text-align: left; border: var(--rand); border-radius: 16px; background: var(--flaeche);
  color: var(--text); font: inherit; padding: 10px 14px; cursor: pointer; }
.wahl-karte strong { font: 600 15px var(--schrift); }
.wahl-karte span { font-size: 13px; color: var(--text-2); }
.wahl-karte[aria-pressed="true"] { border-color: var(--rose-knopf); background: var(--rose-hell); box-shadow: inset 0 0 0 1px var(--rose-knopf); }
.eintragen-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 0; }
.eintragen-aktion .status-zeile { margin: 0; }
.eintragen-ersatz { margin: 0; font-size: 14px; background: var(--flaeche-2); border-radius: 14px; padding: 10px 14px; }
.eintragen-ersatz a { color: var(--rose-text); font-weight: 600; }
.eintragen-datenschutz { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; }
.chip-plus { border-style: dashed; }
.merk-kalender { margin: 0 0 16px; display: grid; gap: 4px; justify-items: start; }
.merk-kalender .kal-hinweis { margin: 0; max-width: 60ch; }
/* Jonathan, 11.10.: je Serie wählen, nur nächster Termin oder alle */
.merk-kal-auswahl { display: grid; gap: 10px; justify-items: start; margin: 4px 0 6px; padding: 12px 14px; border: var(--rand); border-radius: 16px; background: var(--flaeche); max-width: 100%; }
.merk-kal-frage { margin: 0; font-size: 14px; color: var(--text-2); }
.merk-kal-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.merk-kal-titel { font: 600 14px var(--schrift); color: var(--text); }
/* Gruppe zum Termin: aufklappbarer Bereich im Gruppengrün */
.tg-bereich { border: 1.5px dashed var(--rand-farbe); border-radius: 16px; padding: 4px 12px; }
.tg-bereich:has(.tg-felder:not([hidden])) { border-style: solid; background: var(--gruppe-hell); }
.tg-knopf { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; border: 0; background: none;
  font: 600 15px var(--schrift); color: var(--text); text-align: left; cursor: pointer; padding: 0; }
.tg-knopf .feld-frei { font-weight: 400; }
.tg-plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--gruppe); color: var(--auf-gruppe); border: 1.5px solid var(--rand-farbe); font-weight: 700; line-height: 1; }
.tg-felder { display: grid; gap: 12px; padding: 4px 0 12px; }
[aria-invalid="true"] { border-color: #e5484d !important; }

/* Footer im Stil von future.coop: Rose-Fläche (Knopf-Rose, damit weiße Schrift 4,9:1 hat), weiße Links */
.fuss { margin-top: 56px; background: var(--rose-knopf); color: #ffffff; }
.fuss-innen { max-width: 1080px; margin: 0 auto; padding: 48px 16px 40px; display: grid; grid-template-columns: auto 1fr; gap: 32px 72px; align-items: start; }   /* Simon, 10.10.: mehr Luft */
.fuss-marke img { display: block; width: 160px; height: auto; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 20px 72px; padding-top: 6px; }
.fuss-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.fuss a { color: #ffffff; }
.fuss-links a { font: 500 16px/24px var(--schrift); text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; }
.fuss :focus-visible { outline-color: #ffffff; }
.fuss-text { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .85); }
.fuss-credits { grid-column: 1 / -1; margin: -16px 0 0; font: 500 14px/1.6 var(--schrift); color: #ffffff; }   /* Simon, 11.10.: Credits */
.credits-herz { font-size: 15px; margin-right: 3px; }
@media (max-width: 640px) { .fuss-innen { grid-template-columns: 1fr; padding: 40px 16px 32px; gap: 28px; } .fuss-marke img { width: 140px; } }

/* ---------- Emotionalität (F14): kleine, feine Effekte ---------- */
.emoji { font-style: normal; }

/* Eigene Figuren (Avatare, nur Beispiele) */
svg.figur { display: block; }
.fig-k { stroke: #1a1a2f; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fig-auge { fill: #1a1a2f; }
.fig-strich { fill: none; stroke: #1a1a2f; stroke-width: 1.2; stroke-linecap: round; }
.fh-gelb { fill: var(--halo-gelb); }
.fh-gruen { fill: var(--halo-gruen); }
.fh-violett { fill: var(--halo-violett); }
.fh-lavendel { fill: var(--halo-lavendel); }
.fh-pink { fill: var(--halo-pink); }
.fh-koralle { fill: var(--halo-koralle); }
.avatar-zeile { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.avatar-reihe { display: inline-flex; padding-left: 8px; flex: none; }
.avatar { width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--flaeche); }
.avatar-text { margin: 0; font-size: 13px; color: var(--text-2); }

/* Titelzeile mit Merken-Herz */
.titel-zeile { display: flex; align-items: flex-start; gap: 12px; }
.titel-zeile h2 { flex: 1; min-width: 0; }
.herz-knopf { position: relative; margin-top: 2px; }
.herz-knopf svg.symbol { width: 22px; height: 22px; transition: fill .15s ease; }
/* F32: gelbes Herz mit dunkler Kontur (Gelb allein hätte auf Weiß kaum Kontrast) */
.herz-knopf[aria-pressed="true"] svg.symbol { fill: var(--herz); stroke: var(--herz-kontur); }
.funken { position: absolute; inset: 0; pointer-events: none; }
/* Funken: gelb wie das Herz, dazwischen Future Rose; feine dunkle Kontur, damit Gelb auf Weiß sichtbar bleibt */
.funke { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--herz); border: 1px solid var(--herz-kontur); opacity: 0; }
.funke:nth-child(1) { --w: 0deg; }
.funke:nth-child(2) { --w: 60deg; background: var(--rose); }
.funke:nth-child(3) { --w: 120deg; }
.funke:nth-child(4) { --w: 180deg; background: var(--rose); }
.funke:nth-child(5) { --w: 240deg; }
.funke:nth-child(6) { --w: 300deg; background: var(--rose); }

/* Zähler am Herz-Filter (Optik; die Zahl steht für Screenreader in der Beschreibung) */
.merk-zaehler {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1.5px solid var(--herz-kontur); border-radius: 999px; background: var(--herz); color: #1a1a2f;   /* gelb wie das Herz (F32) */
  font: 700 11px/17px var(--schrift); text-align: center; pointer-events: none;
}
/* Simon, 11.10.: Zähler am Stern (Highlights bis 300 km), gleiche Form wie am Herz, in Future Rose */
.filter-stern { position: relative; }
.hl-zaehler {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1.5px solid var(--rand-farbe); border-radius: 999px; background: var(--rose-knopf); color: #ffffff;
  font: 700 11px/17px var(--schrift); text-align: center; pointer-events: none;
}
.hl-zaehler[hidden] { display: none; }
/* Gemerkte Termine, die schon vorbei sind (unter der Liste beim Herz-Filter) */
.label-vorbei { background: var(--flaeche-2); color: var(--text-2); border: 1px solid var(--rand-farbe); padding: 1px 7px; }
.kachel-vorbei { filter: drop-shadow(2px 2px 0 var(--schatten-farbe)); }
.kachel-vorbei .datumsblock, .kachel-vorbei .kachel-titel { opacity: .7; }
/* J6: abgesagte Termine – bleiben sichtbar, aber unübersehbar: rotes Etikett, Titel durchgestrichen, Kachel gedämpft */
.label-abgesagt { display: inline-flex; align-items: center; gap: 4px; background: #b3261e; color: #ffffff; }
.label-abgesagt .symbol { width: 13px; height: 13px; }
.kachel-abgesagt .kachel-titel .kachel-link { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #b3261e; }
.kachel-abgesagt .datumsblock, .kachel-abgesagt .kachel-zeile { opacity: .6; }
/* Geänderte Angaben: dezentes Etikett auf der Kachel, Markierung direkt an Wann/Wo in den Details */
.label-geaendert { display: inline-flex; align-items: center; gap: 4px; background: var(--violett-hell); color: var(--violett-label); border: 1px solid var(--violett-label); padding: 1px 7px; cursor: help; }
.label-geaendert .symbol { width: 12px; height: 12px; }
.aend-marke { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; border: 1px solid var(--violett-label); border-radius: 999px;
  background: var(--violett-hell); color: var(--violett-label); font: 600 11px var(--schrift); padding: 1px 7px; cursor: pointer; }
.aend-marke .symbol { width: 12px; height: 12px; }
.aend-marke.aend-neu { border-style: dashed; }
.aend-vorher { display: block; margin-top: 3px; font-size: 13px; color: var(--text-2); }
.aend-vorher[hidden] { display: none; }
/* Simulierter Beispiel-Termin: deutlich als „nicht echt“ gekennzeichnet */
.label-beispiel { background: var(--gelb); color: #1a1a2f; border: 1px solid #1a1a2f; }
.kachel-beispiel { outline: 2px dashed var(--text-2); outline-offset: -8px; }
.beispiel-hinweis { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.absage-kasten { background: #fdecea; color: #5f1410; border: 2px solid #b3261e; border-radius: 14px; padding: 10px 14px; margin: 12px 0; }
.absage-kasten p { margin: 0; }
.absage-titel { display: flex; align-items: center; gap: 6px; font: 700 17px var(--schrift); color: #b3261e; margin-bottom: 4px !important; }
.absage-titel .symbol { width: 20px; height: 20px; }
.beispiel-kasten { background: var(--gelb); color: #1a1a2f; border: 2px dashed #1a1a2f; border-radius: 14px; padding: 10px 14px; margin: 12px 0; }
.beispiel-kasten p { margin: 0 0 4px; } .beispiel-kasten p:last-child { margin: 0; }
:root[data-theme="dark"] .label-abgesagt { background: #e5534b; color: #1a1a2f; }
:root[data-theme="dark"] .absage-kasten { background: #3b1513; color: #ffd9d5; border-color: #e5534b; }
:root[data-theme="dark"] .absage-titel { color: #ffb4ab; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .label-abgesagt { background: #e5534b; color: #1a1a2f; }
  :root:not([data-theme="light"]) .absage-kasten { background: #3b1513; color: #ffd9d5; border-color: #e5534b; }
  :root:not([data-theme="light"]) .absage-titel { color: #ffb4ab; }
}

/* Toast: grün, Kontur, harter Versatzschatten */
.toast-ort { position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.toast {
  pointer-events: auto; max-width: 440px; padding: 10px 16px; cursor: pointer;
  background: var(--toast); color: #1a1a2f; border: 2px solid #1a1a2f; border-radius: 12px;
  filter: drop-shadow(3px 3px 0 var(--schatten-farbe)); font: 500 14px/1.4 var(--schrift);
}
.toast.weg { opacity: 0; }

/* Robbe am Listenende */
.robbe { font-size: 28px; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none; }

/* Animationen nur, wenn Bewegung erwünscht ist */
@media (prefers-reduced-motion: no-preference) {
  .herz-knopf.pop svg.symbol { animation: herz-pop .35s cubic-bezier(.34, 1.56, .64, 1); }
  .funke { animation: funke-flug .55s ease-out forwards; }
  .toast { animation: toast-rein .25s ease-out; }
  .toast.weg { animation: toast-raus .22s ease-in forwards; }
  .robbe.wackeln { display: inline-block; animation: robbe-wackeln .6s ease-in-out; }
  .merk-zaehler.pop { animation: zaehler-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes zaehler-pop { 0% { transform: scale(.4); } 50% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes herz-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes funke-flug {
  0% { opacity: 1; transform: rotate(var(--w)) translateY(-8px) scale(1); }
  100% { opacity: 0; transform: rotate(var(--w)) translateY(-28px) scale(.4); }
}
@keyframes toast-rein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes toast-raus { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px); } }
@keyframes robbe-wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } }
.weiter-knopf { margin: 14px 0 0; }

/* Highlights (große Events, Jonathan 11.10.): schmalere Bildschirme als waagerecht wischbares Band über der Liste,
   ab 1680 px eine eigene Spalte im freien Raum links neben dem Inhalt, die beim Scrollen stehen bleibt */
.inhalt { position: relative; }
.highlights { margin: 36px 0 8px; }   /* Simon, 11.10. (F83): unter der Liste; früher 28 px über der Liste */   /* Simon, 11.10.: oben gleich viel Luft wie unten (Knöpfe → Überschrift = Karten → „x Termine“, je 28 px; fällt mit den 18 px der Filterleiste zusammen) */
.hl-kopf { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 18px var(--titel); }
.hl-kopf .symbol { width: 20px; height: 20px; color: var(--rose-gross); fill: var(--rose-gross); }
.hl-unter { margin: 2px 0 10px; color: var(--text-2); font-size: 13px; }
.hl-liste { list-style: none; margin: 0; padding: 4px 6px 8px 2px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.hl-liste > li { flex: 0 0 240px; scroll-snap-align: start; }
.hl-karte {
  position: relative; height: 100%; box-sizing: border-box; padding: 12px 14px; cursor: pointer;
  background: var(--halo-gelb); color: var(--text); border: var(--rand); border-radius: 18px; filter: drop-shadow(2px 2px 0 var(--schatten-farbe));
  transition: transform .1s ease, filter .1s ease;
}
.hl-karte:hover { transform: translate(-2px, -2px); filter: drop-shadow(5px 5px 0 var(--schatten-farbe)); }
.hl-karte:active { transform: translate(1px, 1px); }
.hl-wann { margin: 0; font: 600 12px var(--schrift); letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.hl-titel { margin: 4px 0; font: 700 16px/1.3 var(--titel); overflow-wrap: anywhere; }
.hl-wo { margin: 0; font-size: 13px; color: var(--text-2); }
@media (min-width: 1680px) {
  .highlights { position: absolute; top: 8px; bottom: 0; right: calc(100% + 28px); width: 270px; margin: 0; }
  /* Jonathan, 11.10.: Spalte darf nie über den Footer hinauslaufen – eigene Scrollleiste der Liste,
     sobald sie sonst den verfügbaren Platz sprengt (z. B. Umkreis „ganz Deutschland“). Kopf (Titel +
     Unterzeile) bleibt fest stehen, nur die Kartenliste bekommt die begrenzte Höhe + Scroll. */
  .hl-innen { position: sticky; top: 24px; display: flex; flex-direction: column; max-height: min(calc(100vh - 48px), 100%); }
  /* Bei wenigen Treffern ist der Inhalt kürzer als die Highlights: Mindesthöhe, damit die Spalte (die nie länger
     als der Inhaltsbereich wird) noch sinnvoll Platz hat und nie in den Footer läuft (Jonathan, 11.10.) */
  .inhalt:has(> .highlights:not([hidden])) { min-height: min(calc(100vh - 140px), 820px); }
  .hl-kopf, .hl-unter { flex: none; }
  .hl-liste {
    display: grid; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    /* Rand innen, damit Hover-Versatz und Schatten der Karten nicht abgeschnitten werden (Jonathan, 11.10.) */
    padding: 6px 12px 10px 4px; scrollbar-width: thin; scrollbar-color: var(--text-2) transparent;
  }
  .hl-liste > li { flex: none; }
  .hl-liste::-webkit-scrollbar { width: 6px; }
  .hl-liste::-webkit-scrollbar-track { background: transparent; }
  .hl-liste::-webkit-scrollbar-thumb { background: var(--text-2); border-radius: 999px; }
}
/* Simon, 11.10.: Stern in der Filterleiste = nur Highlights (gedrückt: dunkel, Stern rosa) */
.filter-stern svg.symbol { transition: fill .15s ease; }
.filter-stern[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.filter-stern[aria-pressed="true"] svg.symbol { fill: var(--hl-farbe); stroke: var(--bg); }
/* Simon, 11.10.: Highlight in der Kopfzeile der Termindetails, links (rechts Herz und X) */
.kopf-highlight { margin: 0 auto 0 18px;   /* bündig mit dem Inhalt darunter (28 px Einzug, Kopfzeile hat 10 px) */  display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--hl-farbe); }
.kopf-highlight .symbol { width: 18px; height: 18px; color: var(--hl-farbe); fill: var(--hl-farbe); }
/* Simon, 11.10.: Highlight als Text in Future Rose statt Chip */
/* Jonathan, 11.10.: Highlight überall in genau einer Farbe, Future Rose (#f50067), hell wie dunkel: Stern, Schrift
   und Entfernung. Bewusst nicht die abgestuften Rosatöne (--rose-text u. a.); kurze fette Großbuchstaben, Kontrast 4,1:1 bzw. 3,7:1 */
:root { --hl-farbe: #f50067; }
.hl-text { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 3px; white-space: nowrap; font: 700 13px var(--schrift); letter-spacing: .04em; text-transform: uppercase; color: var(--hl-farbe); }
.hl-text .symbol { width: 16px; height: 16px; color: var(--hl-farbe); fill: var(--hl-farbe); }
/* Jonathan, 11.10.: Entfernung bei allen Highlights in Future Rose auf der normalen grauen Pille (vorher fern: rosa gefüllt) */
.entfernung-hl, .entfernung-weit { background: var(--flaeche-2); color: var(--hl-farbe); font-weight: 700; }
/* Simon, 11.10.: gemerkte Einträge in der Liste: gelbes Herz als Sticker an der Ecke von Datumsblock bzw. Gruppenblase */
.merk-rahmen { position: relative; flex: none; display: block; }
.merk-rahmen > .datumsblock { display: block; }
.merk-marke { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; display: grid; place-items: center;
  background: var(--flaeche); border: 1.5px solid var(--rand-farbe); border-radius: 50%; }
.merk-marke[hidden] { display: none; }
.merk-marke svg.symbol { width: 14px; height: 14px; fill: var(--herz); stroke: var(--herz-kontur); stroke-width: 2; }   /* gelb wie das Merken-Herz überall */
.hl-leute { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 600 13px var(--schrift); color: var(--text); }
.hl-leute .symbol { flex: none; width: 16px; height: 16px; }
/* Top-Event: Future Rose als Fläche, steht deutschlandweit ganz oben */
.hl-top { background: var(--rose-hell); border-width: 3px; }
.hl-top-label { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--rose-knopf); color: #fff; font: 600 11px var(--schrift); letter-spacing: .04em; text-transform: uppercase; }
.hl-top-label .symbol { width: 12px; height: 12px; fill: #fff; }

/* Simon, 11.10.: Kalender als kleiner Link bei „Wann“; Veranstalter-Kasten ohne Gruppe neutral */
.fakten-kopf .kalender-aktion { margin: 4px 0 0; }
/* Simon, 11.10.: gleiche Link-Art wie „Wo“: Textfarbe, rosa Unterstreichung */
.kal-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: 500 14px var(--schrift);
  color: inherit; text-decoration: underline; text-decoration-color: var(--rose-gross); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.kal-link:hover { color: var(--rose-text); }
.kal-link svg.symbol { width: 16px; height: 16px; }
.kal-link[aria-expanded="true"] { text-decoration: none; }
.blatt-inhalt .veranstalter-zeile { margin: 0 0 34px; font-size: 15px; color: var(--text); }
/* Simon, 11.10.: Themen-Chips auf Highlight-Karten farblos, also in Kartenfarbe mit Kontur */
.hl-karte { --chip-farbe: transparent; --chip-text: var(--text); }

/* „Mehr Infos“ in den Termindetails (Jonathan, 11.10., J10). Schlicht wie ein Textlink
   statt Kasten/Pille (Jonathan, 11.10.): gleiche Link-Art wie „Wo“/Kalender, kleiner Pfeil
   statt Rahmen/Fläche. Liste beim Aufklappen in normaler Textgröße wie .beschreibung. */
.mehr-info { margin: 6px 0 14px; }
.mehr-info summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  list-style: none; color: inherit; font: 400 15px var(--schrift);
  text-decoration: underline; text-decoration-color: var(--rose-gross);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.mehr-info summary::-webkit-details-marker { display: none; }
.mehr-info summary:hover { color: var(--rose-text); }
.mehr-info-pfeil { width: 7px; height: 7px; border-right: 2px solid; border-bottom: 2px solid;
  flex: none; transform: rotate(45deg) translateY(-2px); }
.mehr-info[open] summary .mehr-info-pfeil { transform: rotate(-135deg) translate(-2px, 0); }
.mehr-info ul { margin: 8px 0 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.65; }
.mehr-info li + li { margin-top: 4px; }