/* =====================================================================
   Sprudel · Pilot-PWA — DESIGN V4
   =====================================================================
   Vollständige Neufassung des Stylesheets auf Grundlage von
   design_v4/ (Stand 10. September 2026).

   Quelle aller Werte ist tokens.css (--sp-*). Diese Datei übersetzt sie
   nur in die Bausteine der App — hier stehen KEINE neuen Farben, Radien
   oder Größen. Wer etwas ändern will, ändert tokens.css.

   Die Klassennamen sind identisch zur bisherigen Fassung (app/), damit
   dieselbe app.js beide Designs bedienen kann und der Vergleich ehrlich
   bleibt: gleiche Inhalte, gleiche Logik, anderes Gewand.

   Leitsätze aus design_v4:
   · Die Karte ist Hintergrund. Alle Bedienelemente schweben als Inseln.
   · Ein Primärbutton pro Ansicht. Aktion in Karten immer unten, ganzbreit.
   · Bedienelemente 56 / 48 / 44 px — nie darunter.
   · Fokusring immer sichtbar: Teal 300, 3 px, 3 px Abstand.
   · Sechs Textstufen. Outfit Black nur für Wortmarke und eine Hero-Zeile.
   · Bubbles nur beim Warten, Gelingen, Wechseln — nichts unter 1 Sekunde.
   ===================================================================== */

/* ---- App-eigene Maße ------------------------------------------------
   Farben, Schriften und Status stehen in bruecke.css — gemeinsam mit Hub
   und Website. Hier bleibt nur, was es ausschließlich in der App gibt.   */
:root{
  /* Linse (Kultur / Kühle Orte) — im v4-System nur kartennah wirksam. */
  --lens:    var(--sp-primary-600);
  --lensd:   var(--sp-primary-700);
  --lenstint:var(--sp-primary-50);
  --lensbtn: var(--sp-primary-600);
  /* Höhen und Telefon-Breite kommen aus massstab.css; ohne diese Datei
     gilt der volle Maßstab des Design-Systems. */
  --topbar-h:72px;
  --tabbar-h:76px;
  --tabbar-bottom-gap:12px;
  --app-max:560px;
  --bar-desktop-h:64px;
  --bar-top-clear:calc(var(--topbar-h) + env(safe-area-inset-top));
  --bar-bottom-clear:calc(var(--tabbar-h) + var(--tabbar-bottom-gap) + env(safe-area-inset-bottom));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font);
  font-size:var(--sp-text-5-size);
  line-height:var(--sp-text-5-lh);
  color:var(--ink);
  background:var(--paper);
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
a{color:var(--brandd);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Fokusring: Teal 300, 3 px, 3 px Abstand — auf JEDEM Bedienelement,
   nie entfernt (design_v4 · Komponenten · Buttons). */
:focus{outline:none;}
:focus-visible{
  outline:var(--sp-focus-ring);
  outline-offset:var(--sp-focus-offset);
  border-radius:var(--sp-radius-input);
}

#app{
  position:fixed;inset:0;
  max-width:var(--app-max);margin:0 auto;background:var(--paper);overflow:hidden;
}

/* =====================================================================
   KOPF — mobil weiße Leiste oben, Desktop schwebende Insel unten
   ===================================================================== */
#topbar{
  position:absolute;top:0;left:0;right:0;
  height:calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:var(--sp-space-3);
  padding-left:var(--sp-space-4);padding-right:var(--sp-space-3);
  background:var(--sp-white);
  box-shadow:var(--sp-shadow-1);
  z-index:30;
}
/* Zeichen: drei Kreise auf einem gleichseitigen Dreieck der Seitenlänge r,
   Teal 300 im Mischmodus Multiplizieren — aus einem Ton werden vier.
   isolation:isolate hält das Multiplizieren im Zeichen (design_v4 · Marke). */
#brandmark{
  width:24px;height:23px;flex:none;isolation:isolate;
  color:var(--signal);
}
#brandmark svg{width:100%;height:100%;display:block;overflow:visible;}
#brandmark.haslogo{
  width:30px;height:30px;background:var(--sp-white);
  border-radius:var(--sp-radius-input);overflow:hidden;box-shadow:var(--sp-shadow-1);
}
#brandmark.haslogo img{width:100%;height:100%;object-fit:cover;display:block;}

#citybox{flex:1;min-width:0;}
#cityrow{display:flex;align-items:center;gap:var(--sp-space-2);min-width:0;}
/* Wortmarke — die EINE Outfit-Black-Zeile dieser Ansicht. */
#cityname{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--sp-text-4-size);line-height:1;letter-spacing:-0.04em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#citybadge{
  flex:none;height:22px;padding:0 8px;border-radius:var(--sp-radius-pill);
  background:var(--sf);color:var(--ink2);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:0.09em;text-transform:uppercase;line-height:1;
  display:inline-flex;align-items:center;
}
/* Der Claim ist im v4-Kopf bewusst still: eine Wortmarke, ein Chip, sonst
   nichts. Er lebt in der Hero-Zeile der Unterseiten weiter. */
#cityclaim{display:none;}

#profileBtn{
  position:relative;flex:none;
  width:var(--sp-control-sm);height:var(--sp-control-sm);border-radius:var(--sp-radius-pill);
  display:flex;align-items:center;justify-content:center;
  background:var(--sf);color:var(--ink);
  font-size:var(--sp-text-6-size);font-weight:700;
}
#profileBtn:hover{background:var(--btint);color:var(--brandd);}
#profileBtn svg{width:19px;height:19px;}

/* Bereichs-Nav (ab 720 sichtbar, ersetzt dort die Tabbar) */
#dnav{display:none;align-items:center;gap:var(--sp-space-1);margin-left:auto;}
#dnav .tab{
  flex:none;flex-direction:row;gap:10px;
  height:var(--sp-control-sm);padding:0 var(--sp-space-4);
  border-radius:var(--sp-radius-button);
  color:var(--ink2);font-size:var(--sp-text-5-size);font-weight:500;line-height:1;
}
#dnav .tab svg{width:18px;height:18px;}
#dnav .tab .tl-lbl{font-size:var(--sp-text-5-size);font-weight:inherit;}
#dnav .tab.on{background:var(--btint);color:var(--brandd);font-weight:600;}

/* Kein Farbwechsel des Kopfes mehr: im v4-System bleibt die Chrome ruhig,
   die Linse färbt nur die Karte (design_v4 · Kartenansicht). */

/* =====================================================================
   CONTENT + VIEWS
   ===================================================================== */
#content{position:absolute;inset:0;}
.view{position:absolute;inset:0;display:none;}
.view.active{display:block;}

/* =====================================================================
   DESKTOP (≥720px): Nahtloser Splitscreen für den Ideen- und Anschluss-Bereich
   ===================================================================== */
@media (min-width:720px){
  #content[data-view="ideenview"] #mapview{
    position:absolute;
    inset:0;
    display:block!important;
  }
  #content[data-view="ideenview"] #mapswitch,
  #content[data-view="ideenview"] #lensFab,
  #content[data-view="ideenview"] #lenschips,
  #content[data-view="ideenview"] #peek{
    display:none!important;
  }

  /* Auf Desktop bleibt #ideenview im Hintergrund IMMER transparent */
  #content[data-view="ideenview"] #ideenview{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:32;
    background:transparent!important;
  }

  /* 1. Blickdichter Untergrund für maximale Lesbarkeit links */
  #content[data-view="ideenview"] #ideenview::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:clamp(540px, 52vw, 680px);
    background:var(--paper);
    pointer-events:none;
    z-index:1;
  }
  /* 2. Sanfter Sprudel-Schleier (90deg), der die Fläche weich in die Stadtkarte auslaufen lässt */
  #content[data-view="ideenview"] #ideenview::after{
    content:"";
    position:absolute;
    left:clamp(540px, 52vw, 680px);
    top:0;
    bottom:0;
    width:150px;
    background:linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 45%, transparent 100%);
    pointer-events:none;
    z-index:1;
  }
  /* 3. Die scrollbare Inhaltsspalte */
  #content[data-view="ideenview"] #ideenview .ideen-scroll{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:clamp(540px, 52vw, 680px);
    max-width:none;
    margin:0;
    border-radius:0;
    box-shadow:none;
    border:none;
    background:transparent;
    display:block!important;
    overflow-y:auto;
    overflow-x:hidden;
    pointer-events:auto;
    z-index:2;
    padding-top:var(--sp-space-6);
    padding-bottom:calc(var(--bar-desktop-h) + var(--sp-gutter-map) * 2 + 24px);
    scrollbar-width:thin;
    scrollbar-color:var(--bd) transparent;
  }
  #content[data-view="ideenview"] #ideenview .ideen-list-content{
    max-width:none;
    margin:0;
    padding:0 var(--sp-space-6);
    box-sizing:border-box;
  }

  /* Großzügiger Hero im Desktop-Splitscreen */
  #content[data-view="ideenview"] #ideenview .pg-hero,
  #content[data-view="ideenview"] #ideenview .ideen-hero{
    min-height:clamp(340px, 45vh, 430px);
    padding:var(--sp-space-6) var(--sp-space-3) var(--sp-space-5);
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  #content[data-view="ideenview"] #ideenview .hero-title{
    font-size:var(--sp-text-2-size);
    margin-bottom:var(--sp-space-2);
  }
  #content[data-view="ideenview"] #ideenview .hero-sub{
    font-size:var(--sp-text-5-easy-size);
    line-height:var(--sp-text-5-easy-lh);
    margin-bottom:var(--sp-space-5);
    max-width:44ch;
  }
  #content[data-view="ideenview"] #ideenview .composer-bar,
  #content[data-view="anschlussview"] #anschlussview .composer-bar{
    width:100%;
    max-width:520px;
    height:50px;
    margin-bottom:var(--sp-space-4);
  }
  #content[data-view="ideenview"] #ideenview .ideen-chips{
    justify-content:center;
    margin-bottom:var(--sp-space-4);
  }

  /* Segmentbar & Ideenkarten */
  #content[data-view="ideenview"] #ideenview .segbar{
    margin:var(--sp-space-5) 0 var(--sp-space-2);
  }
  #content[data-view="ideenview"] #ideenview .idea-card{
    margin:var(--sp-space-4) 0 0;
    transition:border-color .2s, box-shadow .2s, transform .15s;
    cursor:pointer;
  }
  #content[data-view="ideenview"] #ideenview .idea-card:hover{
    border-color:var(--brand);
    box-shadow:0 8px 24px -6px rgba(12,26,31,0.18);
    transform:translateY(-2px);
  }
  #content[data-view="ideenview"] #ideenview .idea-card.is-active{
    border-color:var(--brand);
    box-shadow:0 0 0 2px var(--brand), var(--sp-shadow-2);
  }

  /* DESKTOP (≥720px): Nahtloser Splitscreen als einzige Ansicht für den Anschluss-Bereich */
  #content[data-view="anschlussview"] #mapview{
    position:absolute;
    inset:0;
    display:block!important;
  }
  #content[data-view="anschlussview"] #mapswitch,
  #content[data-view="anschlussview"] #lensFab,
  #content[data-view="anschlussview"] #lenschips,
  #content[data-view="anschlussview"] #peek{
    display:none!important;
  }

  /* Auf Desktop bleibt #anschlussview im Hintergrund IMMER transparent */
  #content[data-view="anschlussview"] #anschlussview{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:32;
    background:transparent!important;
  }

  /* 1. Blickdichter Untergrund für maximale Lesbarkeit links */
  #content[data-view="anschlussview"] #anschlussview::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:clamp(540px, 52vw, 680px);
    background:var(--paper);
    pointer-events:none;
    z-index:1;
  }
  /* 2. Sanfter Sprudel-Schleier (90deg), der die Fläche weich in die Stadtkarte auslaufen lässt */
  #content[data-view="anschlussview"] #anschlussview::after{
    content:"";
    position:absolute;
    left:clamp(540px, 52vw, 680px);
    top:0;
    bottom:0;
    width:150px;
    background:linear-gradient(90deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 45%, transparent 100%);
    pointer-events:none;
    z-index:1;
  }
  /* 3. Die scrollbare Inhaltsspalte */
  #content[data-view="anschlussview"] #anschlussview .anschluss-scroll{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:clamp(540px, 52vw, 680px);
    max-width:none;
    margin:0;
    border-radius:0;
    box-shadow:none;
    border:none;
    background:transparent;
    display:block!important;
    overflow-y:auto;
    overflow-x:hidden;
    pointer-events:auto;
    z-index:2;
    padding-top:var(--sp-space-6);
    padding-bottom:calc(var(--bar-desktop-h) + var(--sp-gutter-map) * 2 + 24px);
    scrollbar-width:thin;
    scrollbar-color:var(--bd) transparent;
  }
  #content[data-view="anschlussview"] #anschlussview .anschluss-list-content{
    max-width:none;
    margin:0;
    padding:0 var(--sp-space-6);
    box-sizing:border-box;
  }

  /* Großzügiger Hero im Desktop-Splitscreen — identisch zu Ideen */
  #content[data-view="anschlussview"] #anschlussview .pg-hero,
  #content[data-view="anschlussview"] #anschlussview .anschluss-hero{
    min-height:clamp(340px, 45vh, 430px);
    padding:var(--sp-space-6) var(--sp-space-3) var(--sp-space-5);
    background:transparent;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    margin:0;
    gap:var(--sp-space-4);
  }
  #content[data-view="anschlussview"] #anschlussview .hero-title{
    font-size:var(--sp-text-2-size);
    margin-bottom:var(--sp-space-2);
  }
  #content[data-view="anschlussview"] #anschlussview .hero-sub{
    font-size:var(--sp-text-5-easy-size);
    line-height:var(--sp-text-5-easy-lh);
    margin-bottom:var(--sp-space-5);
    max-width:44ch;
  }
  #content[data-view="anschlussview"] #anschlussview .anschluss-chips{
    display:flex;
    justify-content:center;
    gap:var(--sp-space-2);
    flex-wrap:wrap;
    margin-bottom:var(--sp-space-4);
  }

  /* Segmentbar & Treffen-Karten */
  #content[data-view="anschlussview"] #anschlussview .segbar{
    margin:var(--sp-space-5) 0 var(--sp-space-2);
    width:100%;
  }
  /* transition/cursor sowie :hover und .highlight kommen unverändert aus der
     Grundregel weiter unten (.ev) — hier bleibt nur der abweichende margin. */
  #content[data-view="anschlussview"] #anschlussview .ev{
    margin:var(--sp-space-4) 0 0;
  }
}

/* =====================================================================
   KARTE — die Fläche ist die Karte, alles andere schwebt als Insel
   ===================================================================== */
#map{position:absolute;inset:0;background:var(--paper);}

.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{
  margin-bottom:calc(var(--sp-space-5) + var(--bar-bottom-clear));
  margin-right:var(--sp-gutter-map);
}
/* Unter 720 px entfällt die Zoom/Kompass-Gruppe, die Gesten reichen
   (Entscheidung Session 29). Es bleiben der Standort-Knopf und der
   Kartennachweis (beide zurück seit 17.09.2026).
   Der Nachweis ist Pflicht: Die OSM-Lizenz verlangt ihn an der Karte,
   einklappbar zu einem (i). Er sitzt unten rechts, genau auf Höhe des
   Legenden-Knopfs (42 px, unten links), und läuft ausgeklappt nie über ihn.
   app.js klappt ihn nach fünf Sekunden ein, MapLibre beim ersten Verschieben.
   Der Standort-Knopf steht darüber, bündig am selben rechten Rand. */
@media (max-width:719px){
  .maplibregl-ctrl-bottom-right{
    margin-bottom:calc(var(--sp-space-4) + var(--bar-bottom-clear));
    margin-right:var(--sp-space-3);
  }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib.maplibregl-compact{
    margin:9px 0;   /* 24 px hoch: mittig zum 42-px-Legenden-Knopf */
    /* Breite ohne Innenabstand (36 px): Legenden-Knopf + drei Abstände frei lassen */
    max-width:calc(100vw - 42px - 3 * var(--sp-space-3) - 36px);
  }
  .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in){
    display:none!important;
  }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group{
    margin:0 0 var(--sp-space-3) 0;
  }
}
/* Bewusst neben der Skala: Die Quellenangabe ist rechtlich vorgeschrieben und
   muss lesbar bleiben. 11 px (unsere kleinste Stufe) wäre eine Verschlechterung
   gegenüber MapLibres Standard. Einzige Ausnahme im Fließtext. */
.maplibregl-ctrl-attrib{
  font-family:var(--font);font-size:12px;
  border-radius:var(--sp-radius-input)!important;
}
.maplibregl-ctrl-attrib a{color:var(--ink3);}
/* Zoom / Kompass / Standort als eine Insel: Radius 20, Schatten 2, 44er Felder */
.maplibregl-ctrl-group{
  border-radius:var(--sp-radius-surface)!important;
  box-shadow:var(--sp-shadow-2)!important;
  border:none!important;
  background:var(--sp-white)!important;
  padding:var(--sp-space-1);
  overflow:hidden;
}
.maplibregl-ctrl-group button{
  width:var(--sp-control-sm)!important;height:var(--sp-control-sm)!important;
  border-radius:var(--sp-radius-button)!important;
}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--bd)!important;}
.maplibregl-ctrl-group button:hover{background:var(--sf)!important;}

/* ---- Pins ------------------------------------------------------------
   Die Form sagt, um was es geht. Die Farbe sagt, wie weit es ist.
   Projekt = Tropfen 38 px in Statusfarbe, Icon 19 px weiß, Spitze auf
   dem Ort. Tastfläche 44 px, unsichtbar größer als der Pin.           */
.mk{width:38px;height:38px;position:absolute;top:0;left:0;cursor:pointer;}
.mk-in{position:absolute;inset:0;transform-origin:50% 100%;transition:transform .12s ease;}
.mk:active .mk-in{transform:scale(.92);}
.mk-dot{
  position:absolute;left:4px;top:2px;width:30px;height:30px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 4px 12px -6px rgba(12,26,31,0.4);
}
.mk-ic{
  position:absolute;left:0;top:0;width:38px;height:30px;
  display:flex;align-items:center;justify-content:center;color:var(--sp-white);
}
.mk-ic svg{width:16px;height:16px;}
.mk.sel{z-index:5;}
/* Auswahl: der Fokusring des Systems, nicht ein zweiter weißer Ring. */
.mk.sel .mk-dot{outline:var(--sp-focus-ring);outline-offset:3px;}
.mk:focus-visible{outline:none;}
.mk:focus-visible .mk-dot{outline:var(--sp-focus-ring);outline-offset:3px;}

/* Kontext-Ort (Rathaus, Bücherei, Haltestelle): Kreis 30 px, weiß mit
   Linie, Icon 16 px in Ink 3. Nie eine Statusfarbe — er hat keinen Status. */
.mk-anchor{width:32px;height:32px;}
.mk-anchor .mk-dot{
  left:4px;top:3px;width:24px;height:24px;border-radius:var(--sp-radius-pill);
  transform:none;background:var(--sp-white)!important;
  border:1.5px solid var(--bd);
  box-shadow:0 4px 12px -6px rgba(12,26,31,0.24);
}
.mk-anchor .mk-ic{width:32px;height:27px;color:var(--ink3);}
.mk-anchor .mk-ic svg{width:13px;height:13px;}

/* POI-Marker der Linsen-Karten: runder Punkt, eigener Look, kein Status. */
.mk-kk .mk-dot{border-radius:var(--sp-radius-pill);transform:none;left:4px;top:3px;width:30px;height:30px;}
.mk-kk .mk-ic{height:36px;}
.mk-kk .mk-ic svg{width:15px;height:15px;}

/* Visions-Pin (Zeitreise) */
.mk-vision .mk-dot{background:var(--brand)!important;border:2px dashed var(--sp-white);}

/* Lebenszeichen — Bewegung nur beim Warten, nichts unter einer Sekunde. */
@media (prefers-reduced-motion: no-preference){
  .mk-pulse .mk-dot::after{
    content:"";position:absolute;inset:-6px;border-radius:inherit;
    background:var(--signal);opacity:0;z-index:-1;
    animation:mkPulse 2.4s var(--sp-motion-ease) infinite;
  }
  .mk-glow .mk-dot{animation:mkGlow 3s var(--sp-motion-ease) infinite;}
}
@keyframes mkPulse{0%{transform:scale(.8);opacity:.5;}70%,100%{transform:scale(1.5);opacity:0;}}
@keyframes mkGlow{0%,100%{box-shadow:0 4px 12px -6px rgba(12,26,31,0.4);}
  50%{box-shadow:0 4px 12px -6px rgba(12,26,31,0.4),0 0 0 6px color-mix(in srgb, var(--sp-primary-300) 35%, transparent);}}

/* ---- Karten-Umschalter (Linsen) — Pille, schwebend --------------- */
#mapswitch{
  position:absolute;left:50%;right:auto;transform:translateX(-50%);
  top:calc(var(--sp-space-3) + var(--bar-top-clear));
  z-index:9;display:flex;gap:4px;
  width:max-content;max-width:calc(100vw - 32px);
  background:var(--sp-white);border-radius:var(--sp-radius-pill);
  padding:4px;box-shadow:var(--sp-shadow-2);
}
.ms-tab{
  flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 var(--sp-space-4);
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-text-6-size);font-weight:600;line-height:1;
  color:var(--ink2);white-space:nowrap;
  transition:color .15s,background .15s;
}
.ms-tab svg{width:15px;height:15px;flex:none;}
.ms-tab.on{background:var(--lensbtn);color:var(--sp-white);}

/* ---- Legende & Filter — eine Insel, ein Muster ------------------- */
#lensFab{
  position:absolute;left:var(--sp-space-3);bottom:calc(var(--sp-space-4) + var(--bar-bottom-clear));
  z-index:8;width:42px;height:42px;border-radius:var(--sp-radius-surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:var(--sp-white);box-shadow:var(--sp-shadow-2);
  transition:transform .1s ease;
}
#lensFab svg{width:19px;height:19px;}
#lensFab:active{transform:scale(.95);}
#lensFab .fdot{
  position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:var(--sp-radius-pill);
  border:2px solid var(--sp-white);background:var(--lens);display:none;
}
#lensFab.filtered .fdot{display:block;}

#lenschips{
  position:absolute;left:var(--sp-space-3);bottom:calc(66px + var(--bar-bottom-clear));
  z-index:9;width:172px;
  display:none;flex-direction:column;gap:var(--sp-space-1);
  background:var(--sp-white);border-radius:var(--sp-radius-surface);
  padding:var(--sp-space-4);box-shadow:var(--sp-shadow-2);
}
#lenschips.open{display:flex;animation:panelIn .18s var(--sp-motion-ease);}
@keyframes panelIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
#lenschips::before{
  content:attr(data-title);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);text-transform:uppercase;color:var(--ink3);
  padding:var(--sp-space-1) 10px var(--sp-space-2);
}
.kk-chip{
  display:flex;align-items:center;gap:10px;
  height:var(--sp-control-sm);padding:0 var(--sp-space-3);
  border-radius:var(--sp-radius-button);
  font-size:var(--sp-text-5-size);font-weight:500;line-height:1;
  color:var(--ink);white-space:nowrap;text-align:left;
  transition:background .15s,color .15s;
}
.kk-chip:hover:not(.on){background:var(--sf);}
.kk-chip.on{background:var(--lenstint);color:var(--lensd);font-weight:600;}
.kk-chip .sd{width:10px;height:10px;border-radius:var(--sp-radius-pill);flex:none;}

/* =====================================================================
   VORSCHAU-KARTE (Peek) — mobil Bottom-Sheet, Desktop schwebende Karte
   ===================================================================== */
#peek{
  /* Das Sheet liegt ÜBER der Tabbar (z 30) — so wie im Entwurf: es deckt die
     Navigation zu, die Karte darüber bleibt sichtbar. Tipp auf die Karte oder
     Verschieben der Karte schließt die Vorschau; der Griffbalken unten zeigt
     nur an, dass es ein Sheet ist (kein eigener Schließen-Griff). */
  position:absolute;left:0;right:0;bottom:0;z-index:31;
  background:var(--sp-white);
  border-radius:var(--sp-radius-card) var(--sp-radius-card) 0 0;
  box-shadow:0 -12px 32px -16px rgba(12,26,31,0.22);
  padding:var(--sp-space-3) var(--sp-space-3) calc(var(--sp-space-5) + env(safe-area-inset-bottom));
  transform:translateY(110vh);
  transition:transform .32s cubic-bezier(.42,0,1,1);
}
#peek.show{transform:translateY(0);transition:transform .32s var(--sp-motion-ease);}
/* Griff — zeigt nur an, dass es ein Sheet ist (reine Dekoration, kein eigener Touch-Handler). */
#peek::before{
  content:"";display:block;width:48px;height:4px;border-radius:var(--sp-radius-pill);
  background:var(--bd);margin:0 auto var(--sp-space-4);
}
.peek-top{display:flex;align-items:flex-start;gap:var(--sp-space-3);padding:0 var(--sp-space-2);}
.peek-ic{
  width:36px;height:36px;border-radius:var(--sp-radius-button);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--sp-white);
}
.peek-ic svg{width:19px;height:19px;}
.peek-ic-anchor{background:var(--sf)!important;color:var(--ink3)!important;}
.peek-head{flex:1;min-width:0;}
.peek-meta{display:flex;align-items:center;gap:var(--sp-space-2);}
.peek-meta .peek-cat{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.peek-cat{font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);}
.peek-title{
  font-size:var(--sp-text-4-size);font-weight:var(--sp-text-4-weight);
  line-height:var(--sp-text-4-lh);letter-spacing:var(--sp-text-4-ls);
  margin-top:var(--sp-space-2);overflow-wrap:break-word;
}
/* Der Anreißer auf der Karte ist kein Lesetext, sondern ein Zweizeiler, der
   zum Antippen einlädt — deshalb die normale Textstufe, nicht die der Leichten
   Sprache. Die 17 px gelten dort, wo wirklich gelesen wird: im Projektdetail
   (.dt-body). Titel 17 / Text 15 gibt der Karte außerdem wieder eine Hierarchie;
   gleich große Zeilen führen das Auge nicht. */
.peek-kurz{
  font-size:var(--sp-text-5-size);line-height:var(--sp-text-5-lh);
  color:var(--ink2);margin-top:var(--sp-space-3);padding:0 var(--sp-space-2);
}
/* Die Aktion sitzt in Karten immer unten und über die ganze Breite. */
.peek-cta{
  margin-top:var(--sp-space-5);width:100%;
  height:var(--sp-control-lg);border-radius:var(--sp-radius-surface);
  background:var(--brand);color:var(--sp-white);
  font-size:var(--sp-text-5-size);font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-space-2);
  text-decoration:none;
}
.peek-cta:hover{background:var(--brandd);text-decoration:none;}

/* =====================================================================
   PROJEKTBILD
   ---------------------------------------------------------------------
   Im Detail randabfallend 16:9 mit dem Statuschip darauf, in der
   Vorschau-Karte im Rahmen mit 12 px Abstand und einem Radius eine Stufe
   unter der Karte (design_v4 · Komponenten · „Bild im Rahmen").
   Ohne Bild bleibt die Fläche — getönt in der Statusfarbe, mit dem
   Bläschen-Motiv. Das Layout springt dadurch nie.
   ===================================================================== */
.dt-bild, .peek-bild{position:relative;overflow:hidden;background:var(--sf);}
/* Das Bild liegt als Ebene hinter dem Inhalt — nur so kann der Statuschip
   im Flex-Fluss unten links auf dem Bild sitzen. */
.dt-bild img, .peek-bild img{
  display:block;position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
}
.dt-bild{aspect-ratio:16/9;display:flex;align-items:flex-end;padding:var(--sp-space-4);}
.peek-bild{
  aspect-ratio:16/9;border-radius:var(--sp-radius-surface);
  margin-bottom:var(--sp-space-4);
}
/* Der Statuschip liegt auf dem Bild — deshalb weiße Fläche statt Tint,
   damit er auf jedem Foto lesbar bleibt. */
.dt-bild .chip{
  position:relative;z-index:2;background:var(--sp-white);
  box-shadow:var(--sp-shadow-1);
}
.dt-bild.st-geplant .chip{color:var(--st-geplant-d);}
.dt-bild.st-beteiligung .chip{color:var(--st-beteiligung-d);}
.dt-bild.st-bau .chip{color:var(--st-bau-d);}
.dt-bild.st-fertig .chip{color:var(--st-fertig-d);}
.bild-credit{
  position:absolute;right:var(--sp-space-3);bottom:var(--sp-space-3);z-index:2;
  background:rgba(255,255,255,.88);color:var(--ink3);
  border-radius:var(--sp-radius-input);padding:3px var(--sp-space-2);
  font-size:var(--sp-label-size);font-weight:500;line-height:1.4;
}
.peek-bild .bild-credit{right:var(--sp-space-2);bottom:var(--sp-space-2);}
/* Ohne Bild gibt es nichts zu belegen. */
.dt-bild.leer .bild-credit, .peek-bild.leer .bild-credit{display:none;}

/* Ruhige Fläche statt Bild: Statustönung plus drei Bläschen. */
.bild-leer{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;
  background:var(--sf);
  background:color-mix(in srgb, var(--bk) 12%, var(--sp-white));}
.bild-leer i{position:absolute;border-radius:var(--sp-radius-pill);background:var(--bk);display:block;}
.bild-leer .b1{right:8%;bottom:-14%;width:46%;aspect-ratio:1;opacity:var(--sp-bubble-opacity-lg);}
.bild-leer .b2{right:34%;top:8%;width:22%;aspect-ratio:1;opacity:var(--sp-bubble-opacity-md);}
.bild-leer .b3{right:22%;bottom:30%;width:11%;aspect-ratio:1;opacity:var(--sp-bubble-opacity-sm);}
/* Liegt ein Bild darüber, ist die Fläche nur der Grund während des Ladens. */
.dt-bild:not(.leer) .bild-leer, .peek-bild:not(.leer) .bild-leer{opacity:.5;}

/* =====================================================================
   CHIPS — filtern, Status zeigen, Merkmale auflisten
   ===================================================================== */
/* Status-Chip: Statusfläche + Statustext, Versalien, nie anklickbar. */
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  height:32px;padding:0 var(--sp-space-4);border-radius:var(--sp-radius-pill);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:0.09em;text-transform:uppercase;line-height:1;
  flex:none;white-space:nowrap;
  background:var(--sf);color:var(--ink2);
}
.chip.st-geplant{background:var(--st-geplant-t);color:var(--st-geplant-d);}
.chip.st-beteiligung{background:var(--st-beteiligung-t);color:var(--st-beteiligung-d);}
.chip.st-bau{background:var(--st-bau-t);color:var(--st-bau-d);}
.chip.st-fertig{background:var(--st-fertig-t);color:var(--st-fertig-d);}

/* Merkmal-Chip: weiß mit Linie, für Fakten. */
.kk-row{
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  height:32px;padding:0 var(--sp-space-4);border-radius:var(--sp-radius-pill);
  background:var(--sp-white);border:1px solid var(--bd);color:var(--ink2);
  font-size:var(--sp-text-6-size);font-weight:500;line-height:1;
  margin-top:var(--sp-space-2);margin-right:var(--sp-space-2);
}
.kk-row svg{width:14px;height:14px;color:var(--ink3);flex:none;}

/* =====================================================================
   DETAIL-OVERLAY
   ===================================================================== */
#detail{
  position:fixed;inset:0;z-index:50;background:var(--paper);
  display:none;flex-direction:column;max-width:var(--app-max);margin:0 auto;
}
#detail.show{display:flex;}
.dt-bar{
  height:calc(48px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:var(--sp-space-3);
  padding-left:var(--sp-space-2);padding-right:var(--sp-space-3);
  background:var(--sp-white);border-bottom:1px solid var(--bd);flex:none;
}
.iconbtn{
  width:var(--sp-control-sm);height:var(--sp-control-sm);border-radius:var(--sp-radius-pill);
  display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none;
}
.iconbtn:hover{background:var(--sf);}
.dt-bar-title{
  flex:1;min-width:0;font-size:var(--sp-text-6-size);font-weight:600;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dt-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--sp-space-7);}

/* Kopf des Projekts: Statuschip, dann die EINE Outfit-Zeile der Seite. */
.dt-hero{
  padding:var(--sp-space-6) var(--sp-space-5) var(--sp-space-5);
  background:var(--sp-white);border-bottom:1px solid var(--bd);
}
.dt-title{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--sp-text-3-size);line-height:1.1;letter-spacing:-0.03em;
  margin:0;
}
.dt-addr{
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  margin-top:var(--sp-space-3);
  font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);
}
.dt-addr svg{width:14px;height:14px;flex:none;}

/* Flächen-Karte im Detail: Linie statt Schatten, Radius 28. */
.card{
  background:var(--sp-white);border:1px solid var(--bd);
  border-radius:var(--sp-radius-card);
  margin:var(--sp-space-5) var(--sp-space-5) 0;
  padding:var(--sp-space-6);
}
.card-h{
  display:flex;align-items:center;gap:var(--sp-space-2);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);text-transform:uppercase;color:var(--ink3);
}
.card-h svg{width:14px;height:14px;color:var(--ink3);}

/* ---- Leichte Sprache: 20 px, eigene Fläche in Teal 50 ------------- */
.leicht{
  font-size:var(--sp-text-5-easy-size);line-height:var(--sp-text-5-easy-lh);
  color:var(--ink);margin-top:var(--sp-space-4);max-width:45ch;
}
.whatfor{
  background:var(--btint);border-radius:var(--sp-radius-surface);
  padding:var(--sp-space-5);margin-top:var(--sp-space-5);
}
.whatfor .t{
  font-size:var(--sp-text-5-easy-size);line-height:var(--sp-text-5-easy-lh);color:var(--sp-primary-900);
}
.whatfor .t b{
  display:block;margin-bottom:var(--sp-space-2);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);text-transform:uppercase;color:var(--brandd);
}
.whatfor .t br{display:none;}

.procon{display:flex;flex-direction:column;gap:var(--sp-space-3);margin-top:var(--sp-space-5);}
.pc{border-radius:var(--sp-radius-surface);padding:var(--sp-space-5);}
.pc.pro{background:var(--st-fertig-t);}
.pc.con{background:var(--st-bau-t);}
.pc-h{
  display:flex;align-items:center;gap:var(--sp-space-2);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);text-transform:uppercase;
}
.pc.pro .pc-h{color:var(--st-fertig-d);}
.pc.con .pc-h{color:var(--st-bau-d);}
.pc-h svg{width:14px;height:14px;}
.pc li{
  font-size:var(--sp-text-5-size);line-height:1.55;
  margin-top:var(--sp-space-3);padding-left:var(--sp-space-5);position:relative;
  overflow-wrap:break-word;color:var(--ink2);
}
/* Punkt in der Farbe des Abschnitts, Text bleibt Ink 2 — Farbe markiert,
   sie trägt nicht den Text (Kontrastregel des Systems). */
.pc li::before{
  content:"";position:absolute;left:0;top:10px;
  width:8px;height:8px;border-radius:var(--sp-radius-pill);background:var(--ink3);
}
.pc.pro li::before{background:var(--st-fertig);}
.pc.con li::before{background:var(--st-bau);}

/* Vorlesen — sekundärer Button (Rahmen 600), nie ein zweiter Vollton. */
.ttsbtn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;margin-top:var(--sp-space-5);
  height:var(--sp-control-md);border-radius:var(--sp-radius-button);
  border:1.5px solid var(--bd);background:var(--sp-white);color:var(--ink);
  font-size:var(--sp-text-5-size);font-weight:600;line-height:1;
  padding:0 var(--sp-space-4);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.ttsbtn:hover{background:var(--sf);border-color:var(--ink3);}
.ttsbtn:active{transform:scale(0.99);}
.tts-label{display:inline-flex;align-items:center;gap:var(--sp-space-2);}
.tts-label svg{width:16px;height:16px;color:var(--brand);flex:none;}
.ttsbtn .tts-pill{
  font-size:var(--sp-label-size);font-weight:600;letter-spacing:0.02em;
  padding:3px 10px;border-radius:var(--sp-radius-pill);
  background:var(--sf);color:var(--ink3);border:1px solid var(--bd);
}

.kifoot{
  display:flex;align-items:flex-start;gap:var(--sp-space-3);
  background:var(--sf);border-radius:var(--sp-radius-button);
  padding:var(--sp-space-4);margin-top:var(--sp-space-5);
}
.kifoot svg{width:16px;height:16px;color:var(--ink3);flex:none;margin-top:2px;}
.kifoot .t{font-size:var(--sp-text-6-size);color:var(--ink3);line-height:1.55;}

/* ---- Zeitstrahl --------------------------------------------------- */
.tl{margin-top:var(--sp-space-5);}
.tl-item{display:grid;grid-template-columns:18px minmax(0,1fr);gap:var(--sp-space-4);}
.tl-rail{display:flex;flex-direction:column;align-items:center;}
.tl-node{
  width:12px;height:12px;border-radius:var(--sp-radius-pill);flex:none;margin-top:5px;
}
.tl-line{flex:1;width:2px;background:var(--bd);min-height:16px;margin-top:var(--sp-space-1);}
.tl-item:last-child .tl-line{display:none;}
.tl-body{padding-bottom:var(--sp-space-5);min-width:0;}
.tl-date{
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);text-transform:uppercase;color:var(--ink3);
}
.tl-title{
  font-size:var(--sp-text-5-size);font-weight:700;line-height:1.35;margin-top:var(--sp-space-1);
}
.tl-text{
  font-size:var(--sp-text-6-size);color:var(--ink2);line-height:1.6;margin-top:var(--sp-space-2);
}

.dt-foot{
  flex:none;padding:var(--sp-space-3) var(--sp-space-5) calc(var(--sp-space-3) + env(safe-area-inset-bottom));
  background:var(--sp-white);border-top:1px solid var(--bd);
}

/* =====================================================================
   TABBAR (mobil: Schwebende Insel nach Design System V3)
   ===================================================================== */
#tabbar{
  position:absolute;left:12px;right:12px;
  bottom:calc(var(--tabbar-bottom-gap) + env(safe-area-inset-bottom));
  height:var(--tabbar-h);
  max-width:420px;margin:0 auto;
  display:flex;background:var(--sp-white);
  border-radius:var(--sp-radius-surface);
  box-shadow:var(--sp-shadow-2);
  z-index:30;
  padding:4px;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-space-1);color:var(--ink3);
  border-radius:var(--sp-radius-button);
  transition:color .15s,background .15s;
}
.tab svg{width:22px;height:22px;}
.tab .tl-lbl{font-size:var(--sp-text-6-size);font-weight:500;}
.tab.on{color:var(--brandd);}
.tab.on .tl-lbl{font-weight:600;}
.tab:active{transform:scale(.97);}

/* =====================================================================
   TOAST
   ===================================================================== */
#toast{
  position:fixed;left:50%;bottom:calc(var(--sp-space-4) + var(--bar-bottom-clear));transform:translateX(-50%);
  width:min(420px,88%);
  background:var(--tiefe);color:var(--sp-white);
  font-size:var(--sp-text-5-size);line-height:1.4;
  padding:var(--sp-space-4) var(--sp-space-5);border-radius:var(--sp-radius-surface);
  z-index:90;opacity:0;transition:opacity .25s ease;pointer-events:none;text-align:center;
  box-shadow:var(--sp-shadow-2);
}
#toast.show{opacity:1;}

/* =====================================================================
   SEITEN (Ideen · Anschluss) — Mobil 100% fokussierter Scroll-Feed
   ===================================================================== */
#ideenview,
#anschlussview{
  overflow-y:auto;background:var(--paper);-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--sp-space-6) + var(--bar-bottom-clear));
}

@media (max-width:719px){
  .idea-card:not(.ev) .idea-fuss{display:none;}
  .idea-map-btn{display:none!important;}
}

/* Hero-Zone: weiße Fläche, darunter beginnt die Liste auf Papier. */
.pg-hero{
  position:relative;background:var(--sp-white);border-bottom:1px solid var(--bd);
  padding:calc(var(--sp-space-6) + var(--bar-top-clear)) var(--sp-space-5) var(--sp-space-6);
}
.hero-title{
  margin:0;position:relative;max-width:14ch;
  font-family:var(--font-display);font-weight:900;
  font-size:var(--sp-text-3-size);line-height:1.05;letter-spacing:-0.035em;color:var(--ink);
}
.hero-sub{
  margin:var(--sp-space-4) 0 0;position:relative;max-width:34ch;
  font-size:var(--sp-text-5-easy-size);line-height:var(--sp-text-5-easy-lh);color:var(--ink2);
}
/* Bubbles: Größen verdoppeln, drei Deckkraftstufen, Überlappung ist Pflicht. */
.hero-bubbles{position:absolute;right:var(--sp-space-5);top:calc(var(--sp-space-6) + var(--bar-top-clear));
  width:92px;height:92px;pointer-events:none;}
.hero-bubbles i{position:absolute;border-radius:var(--sp-radius-pill);display:block;background:var(--signal);}
.hero-bubbles .b1{right:0;top:26px;width:var(--sp-bubble-4);height:var(--sp-bubble-4);opacity:var(--sp-bubble-opacity-lg);}
.hero-bubbles .b2{right:38px;top:4px;width:var(--sp-bubble-3);height:var(--sp-bubble-3);opacity:var(--sp-bubble-opacity-md);}
.hero-bubbles .b3{right:28px;top:46px;width:var(--sp-bubble-2);height:var(--sp-bubble-2);opacity:var(--sp-bubble-opacity-sm);}
@media (prefers-reduced-motion: no-preference){
  .hero-bubbles .b1{animation:bubbleFloat 7s var(--sp-motion-ease) infinite;}
  .hero-bubbles .b2{animation:bubbleFloat 6s var(--sp-motion-ease) 1.1s infinite;}
  .hero-bubbles .b3{animation:bubbleFloat 5.5s var(--sp-motion-ease) 2.2s infinite;}
}
@keyframes bubbleFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* Segment-Umschalter — aktiv gefüllt, nicht nur farbig beschriftet. */
.segbar{
  display:flex;gap:var(--sp-space-1);
  background:var(--sp-white);border:1px solid var(--bd);
  border-radius:var(--sp-radius-pill);padding:var(--sp-space-1);
  margin:var(--sp-space-5) var(--sp-space-5) 0;
  box-shadow:var(--sp-shadow-1);
}
.seg{
  flex:1;text-align:center;height:var(--sp-control-sm);
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-text-5-size);font-weight:500;line-height:1;color:var(--ink2);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.seg:hover:not(.on){background:var(--sf);}
.seg.on{background:var(--brand);color:var(--sp-white);font-weight:600;}

/* ---- Ideen- & Anschluss-Bühne ---- */
.ideen-hero,
.anschluss-hero{
  position:relative;background:var(--sp-white);border-bottom:1px solid var(--bd);
  min-height:clamp(340px, 56vh, 440px);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--sp-space-6) var(--sp-space-5);
  box-sizing:border-box;
  gap:var(--sp-space-4);
}
.ideen-hero-top,
.anschluss-hero-top{
  position:relative;
  z-index:1;
}
.ideen-hero .hero-title,
.anschluss-hero .hero-title{
  font-size:var(--sp-text-2-size);
  font-family:var(--font-display);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-0.03em;
  margin:0;
  max-width:16ch;
  color:var(--ink);
}
.ideen-hero .hero-sub,
.anschluss-hero .hero-sub{
  margin:var(--sp-space-2) 0 0;
  max-width:38ch;
  font-size:var(--sp-text-5-size);
  line-height:1.45;
  color:var(--ink2);
}

/* Der berührbare Composer-Button (wie Google Maps / Airbnb Suche) */
.composer-bar{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;height:52px;
  background:var(--sp-white);border:1.5px solid var(--bd);
  border-radius:var(--sp-radius-pill);padding:4px 4px 4px var(--sp-space-4);
  box-shadow:var(--sp-shadow-1);cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .12s;
  text-align:left;box-sizing:border-box;
  position:relative;z-index:1;
}
.composer-bar:hover{
  border-color:var(--brand);
  box-shadow:0 4px 14px rgba(var(--sp-primary-600-rgb), 0.16);
}
.composer-bar:active{
  transform:scale(0.99);
}
.composer-left{
  display:flex;align-items:center;gap:var(--sp-space-3);
  overflow:hidden;min-width:0;
}
.composer-icon{
  width:32px;height:32px;border-radius:var(--sp-radius-pill);
  background:var(--btint);color:var(--brandd);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.composer-icon svg{width:16px;height:16px;}
.composer-placeholder{
  font-size:var(--sp-text-5-size);color:var(--ink2);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.composer-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--brand);color:var(--sp-white);
  height:40px;padding:0 16px;border-radius:var(--sp-radius-pill);
  font-size:var(--sp-text-5-size);font-weight:600;line-height:1;
  flex-shrink:0;transition:background .15s;
}
.composer-bar:hover .composer-cta{
  background:var(--brandd);
}

/* Inspirations- & Themen-Chips */
.ideen-chips,
.anschluss-chips{
  display:flex;align-items:center;gap:var(--sp-space-2);
  flex-wrap:wrap;position:relative;z-index:1;
}
.chip-item{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 var(--sp-space-3);
  background:var(--paper);border:1px solid var(--bd);
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-text-6-size);font-weight:600;color:var(--ink2);
  cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
}
.chip-item:hover{
  background:var(--btint);border-color:var(--brand);color:var(--brandd);
  transform:translateY(-1px);
}
.chip-item:active{
  transform:scale(0.97);
}

/* ---- Ideen-Karte — Ruhige Hierarchie, viel Weißraum ---------------- */
.idea-card{
  background:var(--sp-white);border:1px solid var(--bd);
  border-radius:var(--sp-radius-card);box-shadow:var(--sp-shadow-1);
  margin:22px var(--sp-space-4) 0;padding:22px 20px 18px;
  scroll-margin-top:calc(var(--bar-top-clear) + 16px);
  transition:border-color .2s,box-shadow .2s;
}
.idea-card.highlight{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--btint),var(--sp-shadow-2);
}
.idea-kopf{display:flex;flex-direction:column;gap:var(--sp-space-1);}
.idea-eyebrow-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-space-2);
  margin-bottom:var(--sp-space-2);flex-wrap:wrap;
}
.idea-kat-label{
  font-size:var(--sp-label-size);font-weight:700;letter-spacing:0.06em;color:var(--ink3);
  text-transform:uppercase;
}
.idea-card .idea-title{
  font-size:var(--sp-text-4-size);font-weight:700;
  line-height:1.28;letter-spacing:-0.015em;
  margin:0 0 var(--sp-space-3);color:var(--ink);overflow-wrap:break-word;
}
.idea-card .idea-text{
  font-size:var(--sp-text-5-size);line-height:1.55;color:var(--ink2);
  margin:0 0 var(--sp-space-4);
}

/* Antwort der Verwaltung — einzige getönte Fläche in der Karte */
.idea-card .antwort{
  margin:0 0 var(--sp-space-3);background:var(--btint);
  border-radius:var(--sp-radius-button);padding:14px 16px;
}
.idea-card .antwort-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-space-2);
  margin-bottom:6px;flex-wrap:wrap;
}
.idea-card .antwort-von{
  font-size:var(--sp-label-size);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brandd);
  display:flex;align-items:center;gap:6px;
}
.idea-card .antwort-datum{
  font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);
}
.idea-card .antwort-text{
  font-size:var(--sp-text-5-size);color:var(--ink2);line-height:1.55;margin:0;
}

/* Fußzeile: Dezenter Karten-Sprung ohne Trennlinie */
.idea-card .idea-fuss,
.idea-fuss{
  display:flex;align-items:center;justify-content:flex-start;
  margin-top:var(--sp-space-2);padding-top:0;
  border-top:none;
}
.idea-card .idea-map-btn,
.idea-map-btn{
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  height:32px;padding:0 14px;border-radius:var(--sp-radius-pill);
  background:var(--sf);color:var(--brandd);border:1px solid var(--bd);
  font-size:var(--sp-text-6-size);font-weight:600;line-height:1;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.idea-card .idea-map-btn:hover,
.idea-map-btn:hover{
  background:var(--btint);border-color:var(--brand);color:var(--brandd);
}
.idea-card .idea-map-btn svg,
.idea-map-btn svg{width:14px;height:14px;color:var(--brand);flex:none;}

.res{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-space-1);
  height:28px;
  padding:0 var(--sp-space-3);
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-label-size);
  font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
  box-sizing:border-box;
}
.res svg{width:13px;height:13px;flex:none;}
.res.umgesetzt{background:var(--st-fertig-t);color:var(--st-fertig-d);}
.res.geprueft{background:var(--st-beteiligung-t);color:var(--st-beteiligung-d);}
.res.abgelehnt{background:var(--sf);color:var(--ink2);}

/* .antwort-von svg bleibt: Ikon-Regel ohne Entsprechung im .idea-card-Block
   (die restlichen .antwort*-Regeln sind unerreichbar — .idea-card .antwort*
   ist spezifischer und gewinnt immer, weil .antwort nur dort vorkommt). */
.antwort-von svg{width:14px;height:14px;color:var(--brandd);}

/* Ideen-Pin auf der Karte */
.mk-idee .mk-dot{background:var(--mkc, var(--brand));}
.mk-idee.sel .mk-dot{outline:var(--sp-focus-ring);outline-offset:3px;}
.mk-idee .mk-ic{color:var(--sp-white);}
.mk-idee .mk-ic svg{width:15px;height:15px;}

/* Treffen-Pin auf der Karte */
.mk-treffen .mk-dot{background:var(--mkc, var(--brand));}
.mk-treffen.sel .mk-dot{outline:var(--sp-focus-ring);outline-offset:3px;}
.mk-treffen .mk-ic{color:var(--sp-white);}
.mk-treffen .mk-ic svg{width:15px;height:15px;}

/* Abschnitts-Label */
.sec-head{
  padding:var(--sp-space-7) var(--sp-space-5) var(--sp-space-1);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:var(--sp-label-ls);text-transform:uppercase;color:var(--ink3);
}

/* Meine Ideen — leerer Zustand mit Bubbles statt Symbol. */
.mine-empty{
  margin:var(--sp-space-5) var(--sp-space-5) 0;
  background:var(--sp-white);border:1px solid var(--bd);
  border-radius:var(--sp-radius-card);
  padding:var(--sp-space-8) var(--sp-space-5);text-align:center;
}
.mine-empty svg{width:30px;height:30px;color:var(--signal);}
.mine-empty .t{
  font-size:var(--sp-text-5-easy-size);line-height:var(--sp-text-5-easy-lh);
  color:var(--ink2);margin-top:var(--sp-space-4);max-width:44ch;
  margin-left:auto;margin-right:auto;
}
.mine-status{
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  height:26px;padding:0 var(--sp-space-3);border-radius:var(--sp-radius-pill);
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:0.09em;text-transform:uppercase;line-height:1;flex:none;white-space:nowrap;
}
.mine-status.eingereicht{background:var(--st-geplant-t);color:var(--st-geplant-d);}
.mine-status.pruefung{background:var(--st-beteiligung-t);color:var(--st-beteiligung-d);}
.mine-status.beantwortet{background:var(--st-fertig-t);color:var(--st-fertig-d);}
.mverlauf{margin-top:var(--sp-space-5);}
.mverlauf-text{font-size:var(--sp-text-6-size);color:var(--ink2);line-height:1.6;}

/* =====================================================================
   ANSCHLUSS
   ===================================================================== */
.ev{
  display:flex;flex-direction:column;
  background:var(--sp-white);border:1px solid var(--bd);
  border-radius:var(--sp-radius-card);box-shadow:var(--sp-shadow-1);
  margin:22px var(--sp-space-4) 0;padding:22px 20px 18px;
  scroll-margin-top:calc(var(--bar-top-clear) + 16px);
  cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.ev:hover{
  border-color:var(--brand);
  box-shadow:0 8px 24px -6px rgba(12,26,31,0.18);
  transform:translateY(-2px);
}
.ev.highlight{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--btint),var(--sp-shadow-2);
}

/* Zeit- / Rhythmus-Badge in der Eyebrow-Zeile */
.ev-badge-time{
  display:inline-flex;align-items:center;gap:var(--sp-space-1);
  height:28px;padding:0 var(--sp-space-3);
  border-radius:var(--sp-radius-pill);
  font-size:var(--sp-label-size);font-weight:600;letter-spacing:0.04em;
  white-space:nowrap;background:var(--btint);color:var(--brandd);flex:none;
}
.ev-badge-time.gruppe{
  background:var(--sf);color:var(--ink2);border:1px solid var(--bd);
}
.ev-badge-time svg{width:12px;height:12px;flex:none;}

/* 16:9-Bild im Kartenrahmen mit Innenabstand und Radius (DESIGN.md §6) */
.ev-card-media{
  width:100%;aspect-ratio:16/9;max-height:220px;
  border-radius:var(--sp-radius-button);overflow:hidden;
  background:var(--sf);margin-bottom:var(--sp-space-3);
}
.ev-card-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* Text und Träger */
.ev .ev-title{
  font-size:var(--sp-text-4-size);font-weight:700;
  line-height:1.28;letter-spacing:-0.015em;
  margin:0 0 var(--sp-space-3);color:var(--ink);overflow-wrap:break-word;
}
.ev .ev-text{
  font-size:var(--sp-text-5-size);line-height:1.55;color:var(--ink2);
  margin:0 0 var(--sp-space-3);
}
.ev-traeger-row{
  display:flex;align-items:center;gap:var(--sp-space-2);
  font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);
  margin-bottom:var(--sp-space-4);
}
.ev-traeger-row svg{width:14px;height:14px;color:var(--brand);flex:none;}

/* Fußzeile: Teilnehmer links, Aktionen rechts */
.ev .ev-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-space-2) var(--sp-space-3);
  margin-top:auto;padding-top:var(--sp-space-2);flex-wrap:wrap;
}
.ev-foot-left{display:flex;align-items:center;gap:var(--sp-space-2);}
.ev-foot-actions{display:flex;align-items:center;gap:var(--sp-space-2);margin-left:auto;}
.av-stack{display:flex;}
.av{
  width:24px;height:24px;border-radius:var(--sp-radius-pill);
  border:2px solid var(--sp-white);display:flex;align-items:center;justify-content:center;
  font-size:var(--sp-label-size);font-weight:700;color:var(--sp-white);margin-right:-8px;
}
.av:last-child{margin-right:0;}
.ev-dabei{font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);}

/* CTA Button */
.ev-cta{
  height:var(--sp-control-sm);padding:0 var(--sp-space-4);
  border-radius:var(--sp-radius-pill);
  border:1.5px solid var(--brand);background:var(--sp-white);color:var(--brandd);
  font-size:var(--sp-text-6-size);font-weight:600;line-height:1;
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.ev-cta:hover{background:var(--btint);border-color:var(--brandd);}
.ev-cta:active{transform:scale(0.97);}
.ev-cta.on{background:var(--st-fertig-t);border-color:var(--st-fertig-t);color:var(--st-fertig-d);}
.ev-cta.on svg{width:13px;height:13px;}

/* Treffen-Detail */
.ev-hero{
  height:172px;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.ev-hero-ic{color:rgba(255,255,255,.92);}
.ev-hero-ic svg{width:56px;height:56px;}
.ev-row{
  display:flex;gap:var(--sp-space-3);align-items:flex-start;
  padding:var(--sp-space-4) 0;border-bottom:1px solid var(--bd);
}
.ev-row:last-child{border-bottom:none;padding-bottom:0;}
.ev-row:first-child{padding-top:0;}
.ev-row > svg{width:18px;height:18px;color:var(--ink3);flex:none;margin-top:4px;}
.ev-row-l{font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);}
.ev-row-v{font-size:var(--sp-text-5-size);font-weight:600;color:var(--ink);margin-top:2px;line-height:1.45;}

/* =====================================================================
   IDEE & TREFFEN EINBRINGEN — Beschriftung über dem Feld, Fehler im Klartext
   ===================================================================== */
#ideaform,
#treffenform{
  position:fixed;inset:0;z-index:55;background:var(--paper);
  display:none;flex-direction:column;max-width:var(--app-max);margin:0 auto;
}
#ideaform.show,
#treffenform.show{display:flex;}
.if-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--sp-space-7);}
.if-intro{padding:var(--sp-space-6) var(--sp-space-5) var(--sp-space-2);}
.if-intro h1{
  margin:0;font-family:var(--font-display);font-weight:900;
  font-size:var(--sp-text-3-size);line-height:1.08;letter-spacing:-0.035em;
}
.if-intro p{
  margin:var(--sp-space-4) 0 0;max-width:45ch;
  font-size:var(--sp-text-5-easy-size);line-height:var(--sp-text-5-easy-lh);color:var(--ink2);
}
.if-field{margin:var(--sp-space-6) var(--sp-space-5) 0;}
.if-field-row{
  display:flex;gap:var(--sp-space-3);align-items:flex-start;
}
.if-field-row > *{flex:1;min-width:0;margin:0;}
.if-label{
  display:block;margin-bottom:var(--sp-space-2);
  font-size:var(--sp-text-5-size);font-weight:600;color:var(--ink);
}
.if-label .opt{font-weight:500;color:var(--ink3);}
.if-input,.if-textarea,.if-select{
  width:100%;font-family:inherit;font-size:var(--sp-text-5-size);color:var(--ink);
  background:var(--sp-white);border:1.5px solid var(--bd);
  border-radius:var(--sp-radius-input);
  padding:0 var(--sp-space-4);height:var(--sp-control-lg);
  outline:none;transition:border-color .15s;
}
.if-textarea{min-height:100px;padding:12px var(--sp-space-4);height:auto;resize:vertical;line-height:1.6;}
.if-input:focus,.if-textarea:focus,.if-select:focus{
  border-color:var(--brand);
  outline:var(--sp-focus-ring);outline-offset:var(--sp-focus-offset);
}
.if-hint{font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);
  margin-top:var(--sp-space-2);line-height:1.55;}
.if-hint.warn{color:var(--st-bau-d);font-weight:600;}
.if-submit{
  margin:var(--sp-space-6) var(--sp-space-5) 0;width:calc(100% - 2*var(--sp-space-5));
  height:var(--sp-control-lg);border-radius:var(--sp-radius-button);
  background:var(--brand);color:var(--sp-white);
  font-size:var(--sp-text-5-size);font-weight:600;line-height:1;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-space-2);
  transition:background .15s;
}
.if-submit:hover:not(:disabled){background:var(--brandd);}
.if-submit svg{width:17px;height:17px;}
/* Gesperrt: Linie auf Ink 3 — keine halbdurchsichtige Marke. */
.if-submit:disabled{background:var(--bd);color:var(--ink3);cursor:not-allowed;}
.if-submit.is-on{background:var(--brandd);}
.if-note{
  display:flex;gap:var(--sp-space-3);
  margin:var(--sp-space-5) var(--sp-space-5) 0;
  background:var(--sf);border-radius:var(--sp-radius-surface);padding:var(--sp-space-5);
}
.if-note svg{width:18px;height:18px;color:var(--ink3);flex:none;margin-top:2px;}
.if-note .t{font-size:var(--sp-text-6-size);color:var(--ink2);line-height:1.6;}

/* =====================================================================
   PROFIL & EINSTELLUNGEN
   ===================================================================== */
#profil{
  position:fixed;inset:0;z-index:56;background:var(--paper);
  display:none;flex-direction:column;max-width:var(--app-max);margin:0 auto;
}
#profil.show{display:flex;}
.prof-head{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-space-3);
  padding:var(--sp-space-6) var(--sp-space-5) var(--sp-space-2);
}
.prof-av{
  width:60px;height:60px;border-radius:var(--sp-radius-pill);
  background:var(--btint);color:var(--brandd);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--sp-text-4-size);font-weight:700;
}
.prof-av svg{width:28px;height:28px;}
.prof-sub{font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);}
.set-group{
  margin:var(--sp-space-4) var(--sp-space-5) 0;
  background:var(--sp-white);border:1px solid var(--bd);
  border-radius:var(--sp-radius-card);overflow:hidden;
}
.set-row{
  display:flex;align-items:center;gap:var(--sp-space-4);
  padding:var(--sp-space-4) var(--sp-space-5);
  border-top:1px solid var(--bd);width:100%;text-align:left;min-height:var(--sp-control-lg);
}
.set-group>.set-row:first-child{border-top:none;}
.set-row:hover{background:var(--paper);}
.set-row.col{flex-direction:column;align-items:stretch;gap:var(--sp-space-2);}
.set-t{flex:1;min-width:0;}
.set-title{font-size:var(--sp-text-5-size);font-weight:600;color:var(--ink);}
.set-sub{font-size:var(--sp-text-6-size);color:var(--ink2);margin-top:2px;line-height:1.55;}
.set-danger .set-title{color:var(--st-bau-d);}
/* Rechtliches im Menü: die ganze Zeile ist der Link. */
a.set-row,a.set-row:hover{color:inherit;text-decoration:none;}
.set-row>svg{width:18px;height:18px;flex:none;color:var(--ink3);}
/* Schalter */
.sw{
  position:relative;flex:none;width:46px;height:28px;
  border-radius:var(--sp-radius-pill);background:var(--bd);
  transition:background .18s ease;
}
.sw::after{
  content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;
  border-radius:var(--sp-radius-pill);background:var(--sp-white);
  box-shadow:var(--sp-shadow-1);transition:transform .18s ease;
}
.sw.on{background:var(--brand);}
.sw.on::after{transform:translateX(18px);}

/* =====================================================================
   ZEITMASCHINE (Feature aus; Grundstile bleiben konsistent)
   ===================================================================== */
#ttToggle{
  position:absolute;right:var(--sp-gutter-map);top:calc(var(--sp-space-4) + var(--bar-top-clear));
  z-index:9;height:var(--sp-control-sm);padding:0 var(--sp-space-4);
  border-radius:var(--sp-radius-button);background:var(--sp-white);color:var(--ink);
  box-shadow:var(--sp-shadow-2);
  display:inline-flex;align-items:center;gap:var(--sp-space-2);
  font-size:var(--sp-text-6-size);font-weight:600;line-height:1;
}
#ttBanner{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(var(--sp-space-5) + var(--bar-top-clear));z-index:9;
  background:var(--time);color:var(--sp-white);
  height:40px;padding:0 var(--sp-space-4);border-radius:var(--sp-radius-pill);
  display:inline-flex;align-items:center;
  font-size:var(--sp-label-size);font-weight:var(--sp-label-weight);
  letter-spacing:0.09em;text-transform:uppercase;
}
#ttPanel{
  position:absolute;left:var(--sp-space-3);right:var(--sp-space-3);
  bottom:calc(var(--sp-space-4) + var(--bar-bottom-clear));z-index:9;
  background:var(--sp-white);border-radius:var(--sp-radius-card);
  padding:var(--sp-space-5);box-shadow:var(--sp-shadow-2);
}
.ttscale{display:flex;justify-content:space-between;
  font-size:var(--sp-text-6-size);font-weight:500;color:var(--ink3);margin-top:var(--sp-space-2);}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;}
}

/* =====================================================================
   TABLET & DESKTOP (≥720px) — Inseln statt Rahmen
   ---------------------------------------------------------------------
   Legende links, Ebenen oben, Steuerung rechts, Absender und Navigation
   unten. Jede Insel: Radius 20, Schatten 2, mindestens 20 px zum Rand.
   ===================================================================== */
@media (min-width:720px){

  :root{
    --bar-top-clear:0px;
    --bar-bottom-clear:calc(var(--bar-desktop-h) + var(--sp-gutter-map) + env(safe-area-inset-bottom));
  }

  #app{max-width:none;margin:0;}

  /* Der Kopf wird zur schwebenden Insel am unteren Rand. */
  #topbar{
    top:auto;bottom:calc(var(--sp-gutter-map) + env(safe-area-inset-bottom));
    left:var(--sp-gutter-map);right:var(--sp-gutter-map);
    height:var(--bar-desktop-h);padding:0 var(--sp-space-5);
    border-radius:var(--sp-radius-surface);
    box-shadow:var(--sp-shadow-2);
    gap:var(--sp-space-4);
    z-index:40;
  }
  #brandmark{width:26px;height:25px;}
  #citybox{flex:none;max-width:38vw;}
  #tabbar{display:none;}
  #dnav{display:flex;}
  #profileBtn{margin-left:var(--sp-space-3);}

  .pg-hero{
    padding:var(--sp-rhythm-group) max(var(--sp-gutter-gross), calc(50% - 360px)) var(--sp-space-7);
  }
  .hero-title{font-size:var(--sp-text-2-size);max-width:16ch;}
  .hero-sub{font-size:var(--sp-text-5-easy-size);max-width:52ch;}
  .hero-bubbles{
    right:max(var(--sp-space-7), calc(50% - 330px));top:var(--sp-space-7);
    width:132px;height:132px;
  }
  .hero-bubbles .b1{width:var(--sp-bubble-5);height:var(--sp-bubble-5);right:0;top:40px;}
  .hero-bubbles .b2{width:var(--sp-bubble-4);height:var(--sp-bubble-4);right:58px;top:0;}
  .hero-bubbles .b3{width:var(--sp-bubble-3);height:var(--sp-bubble-3);right:42px;top:72px;}

  /* ---- Karten-Inseln ---------------------------------------------- */
  /* Ebenen oben Mitte, neben der Legende ausgerichtet. */
  #mapswitch{
    left:50%;right:auto;transform:translateX(-50%);
    top:var(--sp-gutter-map);
    width:auto;padding:6px;gap:var(--sp-space-1);
  }
  .ms-tab{flex:none;height:var(--sp-control-sm);padding:0 14px;}

  /* Legende dauerhaft oben links. */
  #lensFab{display:none;}
  #lenschips{
    display:flex;left:var(--sp-gutter-map);top:var(--sp-gutter-map);bottom:auto;
  }

  /* Vorschau als schwebende Karte, nie breiter als 344 px. */
  /* Breiter als hoch: In einer schmalen Spalte bricht der Teasertext in
     viele Zeilen und die Karte wird zum Turm. 384 px kosten am linken Rand
     nichts und sparen Höhe. Das Bild bekommt hier ein flacheres Format —
     16:9 würde die gewonnene Breite sofort wieder in Höhe umsetzen. */
  #peek{
    left:var(--sp-gutter-map);right:auto;
    width:384px;
    bottom:calc(var(--sp-space-5) + var(--bar-bottom-clear));
    border-radius:var(--sp-radius-card);
    box-shadow:var(--sp-shadow-2);
    padding:var(--sp-space-3) var(--sp-space-3) var(--sp-space-3);
    transform:translateY(0);opacity:0;pointer-events:none;
    transition:opacity .22s var(--sp-motion-ease);
  }
  #peek::before{display:none;}
  #peek.show{opacity:1;pointer-events:auto;}
  .peek-cta{margin-top:var(--sp-space-4);}
  .peek-bild{aspect-ratio:2/1;}

  #ttPanel{left:var(--sp-gutter-map);right:auto;width:min(360px,40vw);
    bottom:calc(var(--sp-space-5) + var(--bar-bottom-clear));}
  #ttToggle{right:var(--sp-gutter-map);top:var(--sp-gutter-map);}
  #ttBanner{top:var(--sp-gutter-map);}

  /* ---- Overlays als zentrierte Karten ------------------------------ */
  #app.dlg-open::after{
    content:"";position:absolute;inset:0;z-index:48;
    background:color-mix(in srgb, var(--sp-primary-900) 45%, transparent);
  }
  #detail, #ideaform, #treffenform, #profil{
    inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(620px,94vw);height:auto;max-height:min(840px,92vh);
    max-width:none;margin:0;
    border-radius:var(--sp-radius-card);overflow:hidden;
    box-shadow:0 32px 90px -30px rgba(12,26,31,.5);
  }
  #detail.show, #ideaform.show, #treffenform.show, #profil.show{animation:dlgIn .22s var(--sp-motion-ease);}
  .dt-bar{height:56px;padding-top:0;}
  .dt-hero{padding:var(--sp-space-7) var(--sp-space-7) var(--sp-space-5);}
  .dt-title{font-size:var(--sp-text-2-size);line-height:1.05;letter-spacing:-0.035em;}
  .card{margin:var(--sp-space-5) var(--sp-space-7) 0;}

  /* ---- Komfort ----------------------------------------------------- */
  .tab:hover{color:var(--ink);}
  #dnav .tab:hover:not(.on){background:var(--sf);color:var(--ink);}
  #content .view::-webkit-scrollbar, .dt-scroll::-webkit-scrollbar, .if-scroll::-webkit-scrollbar{width:12px;}
  #content .view::-webkit-scrollbar-thumb, .dt-scroll::-webkit-scrollbar-thumb, .if-scroll::-webkit-scrollbar-thumb{
    background:var(--bd);border-radius:var(--sp-radius-pill);border:4px solid var(--paper);
  }
  #content .view::-webkit-scrollbar-thumb:hover{background:var(--ink3);}
}

@keyframes dlgIn{
  from{opacity:0;transform:translate(-50%,-48.5%);}
  to{opacity:1;transform:translate(-50%,-50%);}
}