/* ============================================================
   Campaigner — Mobilisierungsportal Die Mitte
   Prototyp-Stylesheet. Reines CSS, keine Abhängigkeiten.

   Farben: Annäherung an das CI der Mitte (Orange auf hellem
   Sand, Anthrazit als Textfarbe). Die exakten CI-Werte sind
   hier zentral hinterlegt und lassen sich in einer Zeile
   austauschen.
   ============================================================ */

:root{
  /* Die Mitte — CI, ausgelesen von die-mitte.ch (Theme-CSS und Logo):
     Dunkelblau #003C69 als Grundfarbe, Orange #FF9B00 als Akzent.
     Hausschrift ist «Modern Era» — nicht lizenziert, darum Systemschrift. */
  --blau:         #003C69;
  --blau-dunkel:  #002B4C;
  --blau-sanft:   #EDF1F5;
  --blau-linie:   #C3D3E0;

  --orange:        #FF9B00;
  --orange-dunkel: #B36D00;
  --orange-sanft:  #FFF3E0;
  --orange-linie:  #FFD79B;

  --tinte:    #003C69;
  --tinte-2:  #4A6480;
  --tinte-3:  #8AA0B4;
  --linie:    #DDE5EC;
  --flaeche:  #F5F7F9;
  --weiss:    #FFFFFF;

  --gruen:  #0DA05A;
  --rot:    #C0392B;

  /* Erklärleiste: bewusst ausserhalb des Mitte-Farbsystems.
     Sie trägt die Tincan-Markenwelt (Werte aus Tincan Piper): Tinte auf
     neutralem Papier, feine Linien, Mono-Labels, Pillen. So ist klar,
     wer hier spricht: die Agentur, nicht das Produkt. */
  --regie:        #F7F7F5;
  --regie-karte:  #FFFFFF;
  --regie-linie:  #E5E5E0;
  --regie-linie2: #D2D2CB;
  --regie-text:   #5B6167;
  --regie-stark:  #16181A;
  --regie-leise:  #8E959B;
  --regie-blau:   #0090FF;  --regie-blauS:#EAF5FF;
  --regie-gelb:   #C98A00;  --regie-gelbS:#FFF7E4;
  --regie-sans:   Inter,"Helvetica Now Text",-apple-system,"Segoe UI",system-ui,sans-serif;
  --regie-mono:   "SF Mono","IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --regie-breite: 330px;

  --radius: 12px;
  --schatten: 0 1px 2px rgba(0,60,105,.05), 0 8px 24px -12px rgba(0,60,105,.20);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--tinte);
  background:var(--regie);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

/* ---------- Bühne: links das Produkt, rechts die Erklärung ---------- */
.buehne{ display:flex; align-items:flex-start; min-height:100vh; }

.produkt{
  flex:1;
  min-width:0;
  display:flex;
  align-items:flex-start;
  background:var(--flaeche);
  min-height:100vh;
}

/* ---------- Seitenleiste ---------- */
.seitenleiste{
  position:sticky; top:0;
  width:252px; flex:0 0 252px;
  height:100vh; overflow-y:auto;
  background:var(--weiss);
  border-right:1px solid var(--linie);
  display:flex; flex-direction:column;
}
.marke{
  padding:20px 18px 18px;
  border-bottom:1px solid var(--linie);
  display:flex; gap:11px; align-items:center;
}
.marke-zeichen{
  width:44px; height:44px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
}
.marke-zeichen img{ width:100%; height:auto; display:block; }
.marke-text b{ display:block; font-size:15px; letter-spacing:-.2px; }
.marke-text span{ display:block; font-size:11.5px; color:var(--tinte-3); }

.menue{ padding:14px 12px; flex:1; }
.menue-titel{
  font-size:10.5px; font-weight:700; letter-spacing:.9px;
  color:var(--tinte-3); text-transform:uppercase;
  padding:12px 10px 7px;
}
.menue-punkt{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; margin-bottom:2px;
  border-radius:8px; cursor:pointer;
  font-size:14.5px; color:var(--tinte-2);
  border:none; background:none; width:100%; text-align:left;
}
.menue-punkt:hover{ background:var(--flaeche); color:var(--tinte); }
.menue-punkt.aktiv{ background:var(--blau-sanft); color:var(--orange-dunkel); font-weight:700; }
.menue-punkt .zeichen{ width:19px; height:19px; flex:0 0 19px; color:var(--tinte-3); --duo:.22; transition:color .15s; }
.menue-punkt:hover .zeichen{ color:var(--blau); }
.menue-punkt.aktiv .zeichen{ color:var(--orange); --duo:.3; }
.untermenue .menue-punkt .zeichen{ width:17px; height:17px; flex-basis:17px; }
.menue-punkt .pfeil{ margin-left:auto; width:14px; height:14px; color:var(--tinte-3); transition:transform .15s; }
.menue-punkt.offen .pfeil{ transform:rotate(90deg); }

.untermenue{ display:none; margin:2px 0 6px; padding-left:14px; }
.untermenue.offen{ display:block; }
.untermenue .menue-punkt{ font-size:13.5px; padding:7px 10px; }

.nutzer{
  border-top:1px solid var(--linie);
  padding:14px 16px;
  display:flex; gap:10px; align-items:center;
}
.avatar{
  width:34px; height:34px; flex:0 0 34px; border-radius:50%;
  background:var(--orange-sanft); color:var(--orange-dunkel);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:700;
}
.nutzer{ padding:10px 10px 10px 8px; gap:4px; }
.nutzer-profil{
  flex:1; min-width:0; display:flex; gap:10px; align-items:center; text-align:left;
  border:none; background:none; cursor:pointer; padding:6px 8px; border-radius:10px;
}
.nutzer-profil:hover, .nutzer-profil.aktiv{ background:var(--flaeche); }
.nutzer-text{ min-width:0; }
.nutzer-text b{ display:block; font-size:13.5px; color:var(--tinte); white-space:nowrap; }
.nutzer-text span{ display:block; font-size:11.5px; color:var(--tinte-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.abmelden{
  flex:0 0 34px; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:none; background:none; cursor:pointer; color:var(--tinte-3);
}
.abmelden svg{ width:18px; height:18px; }
.abmelden:hover{ background:var(--orange-sanft); color:var(--orange-dunkel); }

/* Abgemeldet: nur die Anmeldemaske, ohne Seitenleiste und Kopfzeile */
body[data-modus="anmeldung"] .seitenleiste,
body[data-modus="anmeldung"] .kopfzeile{ display:none; }
body[data-modus="anmeldung"] .inhalt{ padding:0; max-width:none; }
body[data-modus="anmeldung"] #v-anmeldung > .karte{ border:none; border-radius:0; box-shadow:none; }

/* ---------- Kopfzeile & Inhalt ---------- */
.hauptteil{ flex:1; min-width:0; }
.kopfzeile{
  position:sticky; top:0; z-index:5;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);
  padding:14px 30px;
  display:flex; align-items:center; gap:14px;
}
.kopfzeile h1{ font-size:19px; margin:0; letter-spacing:-.3px; }
/* Mitmachen: Herkunftsfilter über alle Mitgliedschaften */
.herkunft-filter{
  display:flex; gap:2px; padding:3px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:999px;
}
.herkunft-filter button{
  border:none; background:none; cursor:pointer;
  padding:5px 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:var(--tinte-2);
}
.herkunft-filter button:hover{ color:var(--blau); }
.herkunft-filter button.aktiv{ background:var(--weiss); color:var(--blau); box-shadow:0 1px 3px rgba(0,60,105,.16); }

/* Verwalten: eine Organisation, umschaltbar */
.verwalte{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--tinte-3); }
.verwalte select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding:6px 30px 6px 13px; border-radius:999px;
  border:1px solid var(--orange-linie); background:var(--orange-sanft);
  font:inherit; font-size:13px; font-weight:700; color:var(--blau);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23003C69' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
body[data-modus="verwalten"] .herkunft-filter,
body[data-modus="anmeldung"] .herkunft-filter,
body[data-modus="konto"] .herkunft-filter,
body[data-modus="support"] .herkunft-filter,
body:not([data-modus="verwalten"]) .verwalte{ display:none; }

body[data-herkunft="kanton"] [data-herkunft]:not([data-herkunft="kanton"]),
body[data-herkunft="jm"] [data-herkunft]:not([data-herkunft="jm"]),
body[data-herkunft="cham"] [data-herkunft]:not([data-herkunft="cham"]),
body[data-verwaltet="jm"] [data-verwaltet]:not([data-verwaltet="jm"]),
body[data-verwaltet="cham"] [data-verwaltet]:not([data-verwaltet="cham"]){ display:none !important; }

body[data-verwaltet="jm"] [data-knoten="jm"],
body[data-verwaltet="cham"] [data-knoten="cham"]{
  background:var(--orange-sanft); box-shadow:0 0 0 1px var(--orange-linie); border-radius:8px;
}
.klein-merker{ font-size:9.5px; padding:2px 7px; margin-left:6px; }

.countdown-klein{ text-align:right; font-size:11px; color:var(--tinte-3); letter-spacing:.6px; text-transform:uppercase; }
.countdown-klein b{ display:block; font-size:15px; color:var(--blau); letter-spacing:0; text-transform:none; }

.inhalt{ padding:30px; max-width:1120px; }
.ansicht{ display:none; }
.ansicht.aktiv{ display:block; animation:auf .18s ease-out; }
@keyframes auf{ from{ opacity:0; transform:translateY(5px);} to{ opacity:1; transform:none;} }

.ueberschrift{ margin-bottom:26px; }
.hinweiszeile{
  font-size:11px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--blau); margin-bottom:7px;
}
.ueberschrift h2{ margin:0 0 8px; font-size:31px; letter-spacing:-.7px; color:var(--orange); font-weight:800; }
.ueberschrift p{ margin:0; color:var(--tinte-2); max-width:65ch; }

/* ---------- Bausteine ---------- */
.karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--schatten);
}
.karte h3{ margin:0 0 3px; font-size:15.5px; }
.karte-kopf{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.karte-kopf h3{ margin:0; }
.karte-kopf .neben{ margin-left:auto; font-size:11.5px; color:var(--tinte-3); }

.gitter{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.g-haupt{ grid-template-columns:2fr 1fr; align-items:start; }

.kennzahl{ background:var(--weiss); border:1px solid var(--linie); border-radius:var(--radius); padding:16px 18px; }
.kennzahl span{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); }
.kennzahl b{ display:block; font-size:30px; font-weight:700; letter-spacing:-1px; margin-top:4px; }
.kennzahl.o b{ color:var(--orange-dunkel); }
.kennzahl b{ color:var(--blau); }
.kennzahl.g b{ color:var(--gruen); }
.kennzahl.r b{ color:var(--rot); }

.knopf{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 19px; border-radius:14px; border:1px solid transparent;
  background:var(--orange); color:var(--blau); font-weight:800; font-size:14px;
  cursor:pointer; transition:box-shadow .25s, transform .25s;
}
.knopf:hover{ box-shadow:0 8px 22px -8px rgba(0,60,105,.35); transform:translateY(-1px); }
.knopf.leise{ background:var(--weiss); color:var(--blau); border-color:var(--blau-linie); font-weight:700; }
.knopf.leise:hover{ background:var(--blau-sanft); }
.knopf.klein{ padding:7px 14px; font-size:13px; border-radius:11px; }

.merker{
  display:inline-block; padding:3px 10px; border-radius:20px;
  font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:var(--blau-sanft); color:var(--blau);
}
.merker.akzent{ background:var(--orange); color:var(--blau); }
.merker.grau{ background:var(--flaeche); color:var(--tinte-2); }
.merker.gruen{ background:#E5F2EA; color:var(--gruen); }
.merker.rot{ background:#FBE9E7; color:var(--rot); }
.merker.blau{ background:var(--orange-sanft); color:var(--orange-dunkel); }

.liste{ list-style:none; margin:0; padding:0; }
.liste li{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 0; border-top:1px solid var(--linie);
}
.liste li:first-child{ border-top:none; padding-top:0; }
.liste .haupt{ flex:1; min-width:0; }
.liste b{ font-weight:600; font-size:14.5px; display:block; }
.liste small{ color:var(--tinte-3); font-size:12.5px; }

.balken{ height:7px; border-radius:4px; background:var(--linie); overflow:hidden; }
.balken i{ display:block; height:100%; background:var(--orange); border-radius:4px; }
.balken.gruen i{ background:var(--gruen); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{
  text-align:left; font-size:10.5px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--tinte-3); padding:0 10px 10px; font-weight:700;
}
td{ padding:12px 10px; border-top:1px solid var(--linie); }
tr:hover td{ background:var(--flaeche); }

.leer{
  border:1.5px dashed var(--linie); border-radius:var(--radius);
  padding:44px 20px; text-align:center; color:var(--tinte-3);
}
.leer b{ display:block; color:var(--tinte); font-size:15.5px; margin-bottom:5px; }

.feld{ margin-bottom:14px; }
.feld label{ display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; }
.feld input, .feld textarea, .feld select{
  width:100%; padding:9px 11px; font-size:14px;
  border:1px solid var(--linie); border-radius:8px; background:var(--weiss);
  font-family:inherit; color:var(--tinte);
}
.feld small{ color:var(--tinte-3); font-size:12px; display:block; margin-top:4px; }

.reiter{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.reiter button{
  padding:7px 14px; border-radius:20px; border:1px solid var(--linie);
  background:var(--weiss); font-size:13px; cursor:pointer; color:var(--tinte-2);
}
.reiter button.aktiv{ background:var(--blau); color:#fff; border-color:var(--blau); font-weight:700; }

.karte-bild{ height:150px; border-radius:10px 10px 0 0; margin:-20px -20px 16px; background:var(--blau-sanft); position:relative; overflow:hidden; }
.karte-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.karte-bild::after{ content:""; position:absolute; inset:auto 0 0 0; height:60%; background:linear-gradient(180deg,transparent,rgba(0,60,105,.72)); }
.karte-bild span{ position:absolute; z-index:2; left:14px; bottom:11px; color:#fff; font-size:10.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }

.karte-fokus{
  background:linear-gradient(120deg,var(--blau),#00558F);
  color:#fff; border:none; padding:30px;
}
.karte-fokus h3{ font-size:27px; letter-spacing:-.6px; margin-bottom:10px; color:var(--orange); font-weight:800; }
.karte-fokus p{ margin:0 0 20px; color:rgba(255,255,255,.88); max-width:52ch; }
.karte-fokus .hinweiszeile{ color:rgba(255,255,255,.7); }

.datum{
  width:52px; flex:0 0 52px; text-align:center;
  border:1px solid var(--linie); border-radius:8px; padding:6px 0;
}
.datum span{ display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--orange-dunkel); font-weight:800; }
.datum b{ display:block; font-size:19px; }

.karte-kette{ display:flex; flex-direction:column; gap:14px; }

/* Baum für Gruppen/Vererbung */
.baum{ list-style:none; margin:0; padding:0; font-size:14px; }
.baum ul{ list-style:none; margin:0; padding-left:22px; border-left:1px solid var(--linie); }
.baum li{ padding:5px 0; }
.baum .knoten{ display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:7px; }
.baum .knoten:hover{ background:var(--flaeche); }
.baum .knoten b{ font-weight:600; }
.modulchips{ display:flex; gap:5px; flex-wrap:wrap; margin-left:auto; }
.modulchip{ font-size:10.5px; padding:2px 8px; border-radius:20px; background:var(--flaeche); color:var(--tinte-2); border:1px solid var(--linie); }
.baum-leiste{ display:flex; gap:6px; margin:-4px 0 12px; }
.baum li.zu > ul{ display:none; }
.baum .klapp, .baum .klapp-platz{ flex:0 0 18px; width:18px; height:18px; }
.baum .klapp{
  border:none; background:none; padding:0; cursor:pointer; color:var(--tinte-3);
  display:flex; align-items:center; justify-content:center; border-radius:5px;
}
.baum .klapp:hover{ background:var(--blau-sanft); color:var(--blau); }
.baum .klapp svg{ width:13px; height:13px; transform:rotate(90deg); transition:transform .15s; }
.baum li.zu > .knoten .klapp svg{ transform:none; }
.baum .anzahl{ font-size:11.5px; color:var(--tinte-3); white-space:nowrap; }
.stufe{
  flex:0 0 18px; width:18px; height:18px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; line-height:1;
}
.stufe-n{ background:var(--blau); color:#fff; }
.stufe-k{ background:var(--blau-sanft); color:var(--blau); box-shadow:inset 0 0 0 1px var(--blau-linie); }
.stufe-g{ background:var(--weiss); color:var(--tinte-2); box-shadow:inset 0 0 0 1px var(--linie); }
.stufen-legende{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--linie);
  font-size:12px; color:var(--tinte-3);
}
.stufen-legende .stufe{ margin-left:8px; }
.stufen-legende .stufe:first-child{ margin-left:0; }
.katalog th .stufe{ margin-right:5px; vertical-align:-4px; }
.dekl{ display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:20px; }
.dekl.frei{ background:var(--orange-sanft); color:var(--orange-dunkel); }
.dekl.erbt{ background:var(--flaeche); color:var(--tinte-2); }
.dekl.nein{ color:var(--tinte-3); padding:2px 4px; }
.modulchip.eigen{ background:var(--orange-sanft); color:var(--orange-dunkel); border-color:var(--orange-linie); font-weight:700; }

/* Aufgaben */
.aufgabe{ align-items:center !important; }
.haken{
  flex:0 0 22px; width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:1.6px solid var(--blau-linie); background:var(--weiss); padding:0;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.haken:hover{ border-color:var(--gruen); background:#EDF8F1; }
.haken::after{
  content:""; width:9px; height:5px; margin-top:-2px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
  opacity:0;
}
.haken:hover::after{ opacity:1; border-color:var(--gruen); }
.aufgabe.erledigt .haken{ background:var(--gruen); border-color:var(--gruen); }
.aufgabe.erledigt .haken::after{ opacity:1; border-color:#fff; }
.aufgabe .haupt b{ transition:color .15s; }
.aufgabe.erledigt .haupt b{ text-decoration:line-through; color:var(--tinte-3); font-weight:600; }
#v-aufgaben[data-zeige="offen"] .aufgabe.erledigt,
#v-aufgaben[data-zeige="erledigt"] .aufgabe:not(.erledigt){ display:none; }
.aufgaben-reiter .zaehler-offen{ margin-left:4px; opacity:.75; }
.aufgaben-leer{ display:none; }
#v-aufgaben.nichts-offen[data-zeige="offen"] #aufgaben-liste{ display:none; }
#v-aufgaben.nichts-offen[data-zeige="offen"] .aufgaben-leer{ display:block; }
.karte-fuss{
  display:flex; justify-content:space-between; align-items:center; width:calc(100% + 40px);
  margin:12px -20px -20px; padding:13px 20px; border:none; border-top:1px solid var(--linie);
  background:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; color:var(--blau);
  border-radius:0 0 var(--radius) var(--radius);
}
.karte-fuss:hover{ background:var(--flaeche); color:var(--orange-dunkel); }

/* Spendenbarometer */
.barometer{ display:flex; gap:26px; align-items:flex-end; }
.saeule{
  width:74px; height:270px; border-radius:12px;
  background:var(--flaeche); border:1px solid var(--linie);
  position:relative; overflow:hidden; flex:0 0 74px;
}
.saeule i{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,var(--orange),#E08800);
  border-radius:0 0 11px 11px;
}
.etappen{ flex:1; }
.etappe{ display:flex; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--linie); }
.etappe:first-child{ border-top:none; }
.etappe .punkt{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  border:2px solid var(--linie); display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--tinte-3); background:var(--weiss);
}
.etappe.erreicht .punkt{ background:var(--gruen); border-color:var(--gruen); color:#fff; }
.etappe.aktuell .punkt{ border-color:var(--orange); color:var(--orange-dunkel); background:var(--orange-sanft); }
.etappe .haupt b{ display:block; font-size:14px; }
.etappe .haupt small{ color:var(--tinte-3); font-size:12.5px; }
.etappe .betrag{ margin-left:auto; font-weight:700; font-size:14px; }

/* Karte (Landkarten-Platzhalter) */
.landkarte{
  height:300px; border-radius:8px; border:1px solid var(--linie);
  background:
    repeating-linear-gradient(0deg,rgba(31,39,51,.05) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(31,39,51,.05) 0 1px,transparent 1px 34px),
    linear-gradient(150deg,#EAF1E9,#E7EDF2);
  position:relative;
}
.nadel{
  position:absolute; width:15px; height:15px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.nadel.gruen{ background:var(--gruen); }
.nadel.orange{ background:var(--orange); }
.nadel.rot{ background:var(--rot); }
.legende{ display:flex; gap:16px; font-size:12px; color:var(--tinte-2); margin-top:10px; }
.legende span{ display:flex; align-items:center; gap:6px; }
.legende i{ width:9px; height:9px; border-radius:50%; display:block; }

/* Schritt-Assistent */
.schritte{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.schritt{ padding:6px 13px; border-radius:20px; font-size:12.5px; background:var(--flaeche); color:var(--tinte-2); border:1px solid var(--linie); }
.schritt.aktiv{ background:var(--orange); color:var(--blau); border-color:var(--orange); font-weight:800; }
.schritt.fertig{ background:#E5F2EA; color:var(--gruen); border-color:#CBE4D5; }

/* Anmeldemaske */
.anmelde-buehne{ display:grid; grid-template-columns:1.15fr 1fr; min-height:calc(100vh - 0px); }
.anmelde-links{ background:linear-gradient(150deg,var(--blau),#00558F); color:#fff; padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
.anmelde-links h2{ font-size:46px; line-height:1.08; letter-spacing:-1.5px; margin:0 0 20px; max-width:12ch; color:var(--orange); font-weight:800; }
.anmelde-links p{ opacity:.92; max-width:44ch; margin:0 0 26px; }
.anmelde-links ul{ list-style:none; padding:0; margin:0; }
.anmelde-links li{ padding:7px 0 7px 26px; position:relative; }
.anmelde-links li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:800; }
.anmelde-rechts{ background:var(--weiss); padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }

/* ============================================================
   Erklärleiste — gehört bewusst NICHT zum Produkt
   Tincan-Markenwelt: Tinte auf Papier, Mono-Labels, Pillen.
   «Wie es funktioniert» ist eingeklappt.
   ============================================================ */
.regie{
  position:sticky; top:0;
  width:var(--regie-breite); flex:0 0 var(--regie-breite);
  height:100vh; overflow-y:auto;
  background:var(--regie);
  color:var(--regie-text);
  border-left:1px solid var(--regie-linie2);
  font-family:var(--regie-sans);
  font-size:13px;
}
.regie-kopf{
  position:sticky; top:0; z-index:2;
  padding:20px 24px 16px;
  background:var(--regie);
  border-bottom:1px solid var(--regie-linie);
}
.regie-kopf .stempel{
  display:inline-block; font-family:var(--regie-mono);
  font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--regie-stark);
  padding:4px 10px; border-radius:999px; margin-bottom:12px;
}
.regie-kopf h2{
  margin:0; font-size:17px; font-weight:600; letter-spacing:-.015em;
  color:var(--regie-stark);
}
.regie-kopf p{ margin:3px 0 0; font-size:12px; color:var(--regie-leise); line-height:1.45; }

.regie-koerper{ padding:18px 24px 60px; }
.regie-block{ display:none; }
.regie-block.aktiv{ display:block; }

.regie-abschnitt{ margin-bottom:22px; }
.regie-abschnitt > h3{
  font-family:var(--regie-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--regie-leise); margin:0 0 8px;
}
.regie-abschnitt p{ margin:0 0 8px; line-height:1.55; }
.regie-abschnitt ul{ margin:0; padding-left:15px; }
.regie-abschnitt li{ margin-bottom:6px; line-height:1.5; }
.regie-abschnitt li::marker{ color:var(--regie-linie2); }
.regie-abschnitt strong{ color:var(--regie-stark); font-weight:600; }

/* «Wie es funktioniert» eingeklappt; Klick auf die Zeile öffnet */
.regie-abschnitt.klappbar > h3{
  cursor:pointer; user-select:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 12px; margin:0; border:1px solid var(--regie-linie);
  border-radius:999px; background:var(--regie-karte);
}
.regie-abschnitt.klappbar > h3:hover{ border-color:var(--regie-linie2); color:var(--regie-stark); }
.regie-abschnitt.klappbar > h3::after{ content:"+"; font-size:13px; color:var(--regie-stark); }
.regie-abschnitt.klappbar.offen > h3{ margin-bottom:10px; }
.regie-abschnitt.klappbar.offen > h3::after{ content:"−"; }
.regie-abschnitt.klappbar:not(.offen) > :not(h3){ display:none; }

.regie-kasten{
  background:var(--regie-karte); border:1px solid var(--regie-linie);
  border-radius:12px; padding:12px 14px; margin-bottom:10px;
  box-shadow:0 1px 2px rgba(22,24,26,.04);
}
.regie-kasten b{ color:var(--regie-stark); display:block; margin-bottom:3px; font-size:13px; font-weight:600; }
.regie-kasten small{ color:var(--regie-text); font-size:12.5px; line-height:1.5; display:block; }

.regie-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-bottom:16px; }
.regie-chip{
  font-size:11px; padding:3px 9px; border-radius:999px;
  border:1px solid var(--regie-linie2); color:var(--regie-text); background:none;
}
.regie-chip.modul{ border-color:transparent; background:var(--regie-blauS); color:var(--regie-blau); }
.regie-chip.spaeter{ border-color:transparent; background:var(--regie-gelbS); color:var(--regie-gelb); }

.regie-fuss{
  border-top:1px solid var(--regie-linie); margin-top:4px; padding-top:12px;
  font-size:11.5px; color:var(--regie-leise); line-height:1.5;
}
.regie-kopf-schalter{
  position:absolute; top:18px; right:20px;
  background:none; border:1px solid var(--regie-linie2); color:var(--regie-text);
  border-radius:999px; padding:3px 10px; font-size:11px; cursor:pointer;
}
.regie-kopf-schalter:hover{ color:var(--regie-stark); border-color:var(--regie-stark); }

.regie-schalter{
  display:none;
  position:fixed; right:14px; bottom:14px; z-index:20;
  background:var(--regie-stark); color:#fff;
  border:none; border-radius:999px; padding:8px 15px;
  font-family:var(--regie-sans); font-size:12px; font-weight:600; cursor:pointer;
  box-shadow:0 4px 16px -4px rgba(22,24,26,.25);
}
body.regie-zu .regie{ display:none; }
body.regie-zu .regie-schalter{ display:block; }

/* ---------- Schmale Fenster ---------- */
@media (max-width:1400px){
  :root{ --regie-breite:300px; }
  .inhalt{ padding:24px; }
}
@media (max-width:1150px){
  .buehne{ flex-direction:column; }
  .regie{ position:static; width:100%; flex:auto; height:auto; border-left:none; border-top:2px solid var(--regie-akzent); }
  .regie-kopf{ position:static; }
  .produkt{ width:100%; }
}
@media (max-width:820px){
  .seitenleiste{ position:static; width:100%; flex:auto; height:auto; }
  .produkt{ flex-direction:column; }
  .g2,.g3,.g4,.g-haupt{ grid-template-columns:1fr; }
  .anmelde-buehne{ grid-template-columns:1fr; }
}

/* ---------- Live-Lampe (nur beim Arbeiten sichtbar) ---------- */
.live-lampe{
  position:fixed; right:calc(var(--regie-breite) + 14px); bottom:14px; z-index:30;
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--blau);
  pointer-events:none;
}
.live-lampe i{
  width:8px; height:8px; border-radius:50%;
  background:#3FBF6A; display:block; transition:background .25s, box-shadow .25s;
}
.live-lampe.frisch i{ background:#8FE9AE; box-shadow:0 0 0 4px rgba(63,191,106,.30); }
body.regie-zu .live-lampe{ display:flex; right:14px; bottom:56px; }
@media (max-width:1150px){ .live-lampe{ right:14px; } }

/* ---------- Markenzeichen: der Bogen der Mitte, gespiegelt ---------- */
.marke-zeichen{ width:22px; flex:0 0 22px; height:44px; color:var(--orange); }
.marke-zeichen svg{ width:22px; height:44px; display:block; }

/* Nachbesserungen Baum, Katalog, Aufgabenliste */
.baum .knoten b{ white-space:nowrap; }
.baum .knoten .modulchips{ justify-content:flex-end; }
.katalog th{ white-space:nowrap; }
.katalog th .stufe{ display:inline-flex; vertical-align:middle; margin-top:-2px; }
#v-aufgaben .karte > .liste > li:first-child{ border-top:none; padding-top:4px; }
#v-gruppen > .gitter.g-haupt{ grid-template-columns:1fr; }
#v-gruppen .karte-kette .liste{ display:grid; grid-template-columns:repeat(3,1fr); column-gap:24px; }
@media (max-width:820px){ #v-gruppen .karte-kette .liste{ grid-template-columns:1fr; } }
#v-gruppen .karte-kette .liste li{ border-top:none; padding:6px 0 0; }

/* Vererbt: dasselbe Orange wie «eigen», aber nur gestrichelt umrandet */
.modulchip{ background:transparent; color:var(--orange-dunkel); border:1px dashed #F0B24D; font-weight:500; }
.modulchip.eigen{ border-style:solid; }
.dekl.erbt{ background:transparent; color:var(--orange-dunkel); border:1px dashed #F0B24D; padding:1px 8px; font-weight:500; }

/* Modulraster im Gruppenbaum: jedes Modul an fester Stelle */
.modulzeile{ display:flex; gap:4px; margin-left:auto; flex:0 0 auto; }
.mz{
  width:24px; height:24px; flex:0 0 24px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
}
.mz svg{ width:15px; height:15px; }
.mz.eigen{ background:var(--orange-sanft); border:1px solid #F0B24D; color:var(--orange-dunkel); --duo:.35; }
.mz.erbt{ background:transparent; border:1px dashed #F0B24D; color:var(--orange); --duo:.12; }
.mz.aus{ background:var(--flaeche); border:1px solid var(--linie); color:var(--tinte-3); opacity:.55; --duo:0; }
.mz.nein{ position:relative; }
.mz.nein::after{ content:""; width:4px; height:4px; border-radius:50%; background:var(--linie); }
.mz.kopf{ color:var(--tinte-3); --duo:0; }
.baum-leiste{ align-items:center; }
.baum-leiste .modulzeile.kopf{ padding-right:9px; }
.stufen-legende .mz{ width:16px; height:16px; flex-basis:16px; border-radius:5px; margin-left:8px; }
.stufen-legende .mz:first-of-type{ margin-left:0; }
.legende-trenner{ width:1px; height:14px; background:var(--linie); margin:0 10px; }
.katalog-modul{ display:inline-flex; align-items:center; gap:9px; }
.katalog-icon{ width:18px; height:18px; color:var(--tinte-3); --duo:.14; }

/* =====================================================================
   Werkzeug-Bausteine (seit der Datenbank): Eingaben, Auswahl, Dialog,
   Rückmeldung. Eingaben und Auswahl sehen überall gleich aus.
   ===================================================================== */
.werkzeugleiste{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.werkzeugleiste .eingabe{ flex:1; min-width:220px; max-width:420px; }
.werkzeugleiste .knopf{ margin-left:auto; }
.eingabe{
  font:inherit; font-size:14px; color:var(--tinte);
  padding:9px 14px; border:1px solid var(--linie); border-radius:10px;
  background:var(--weiss); outline:none; transition:border-color .15s, box-shadow .15s;
}
.eingabe::placeholder{ color:var(--tinte-3); }
.eingabe:focus, .auswahl:focus{ border-color:var(--blau-linie); box-shadow:0 0 0 3px var(--blau-sanft); }
.auswahl{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  font:inherit; font-size:14px; font-weight:600; color:var(--blau);
  padding:9px 38px 9px 14px; border:1px solid var(--linie); border-radius:10px;
  background-color:var(--weiss);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23003C69' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; outline:none;
}
.auswahl:hover{ border-color:var(--blau-linie); }
.auswahl.klein{ font-size:12.5px; padding:5px 30px 5px 11px; border-radius:999px; background-position:right 10px center; }
.haekchen{ font-size:13.5px; color:var(--tinte-2); display:flex; gap:7px; align-items:center; cursor:pointer; }
.haekchen input{ accent-color:var(--orange); width:16px; height:16px; }
.feld .eingabe{ width:100%; }

/* Formulardialog */
dialog.formular{
  border:none; border-radius:16px; padding:0; width:min(520px, calc(100vw - 32px));
  box-shadow:0 30px 80px -20px rgba(0,43,76,.45);
}
dialog.formular::backdrop{ background:rgba(0,43,76,.35); backdrop-filter:blur(2px); }
dialog.formular form{ padding:26px 26px 22px; display:flex; flex-wrap:wrap; gap:14px 12px; }
dialog.formular h3{ width:100%; margin:0; font-size:19px; color:var(--blau); }
.formular-text{ width:100%; margin:-6px 0 0; font-size:13px; color:var(--tinte-2); }
.formular-feld{ width:100%; display:flex; flex-direction:column; gap:6px; }
.formular-feld.halb{ width:calc(50% - 6px); }
.formular-feld > span{ font-size:12.5px; font-weight:700; color:var(--blau); }
.formular-feld .eingabe, .formular-feld .auswahl{ width:100%; }
.formular-knoepfe{ width:100%; display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* Rückmeldung nach dem Speichern */
#meldung{
  position:fixed; left:50%; bottom:22px; z-index:50; transform:translate(-50%, 20px);
  background:var(--blau); color:#fff; font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:999px; box-shadow:0 8px 24px -8px rgba(0,43,76,.5);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
}
#meldung.zeigen{ opacity:1; transform:translate(-50%, 0); }
#meldung.fehler{ background:var(--rot); }

/* Listen: Löschen erscheint beim Überfahren, leere Zustände */
.liste li .weg{
  margin-left:auto; flex:0 0 26px; width:26px; height:26px; border-radius:8px;
  border:none; background:none; cursor:pointer; color:var(--tinte-3); font-size:18px; line-height:1;
  opacity:0; transition:opacity .15s;
}
.liste li:hover .weg{ opacity:1; }
.liste li .weg:hover{ background:#FBE9E7; color:var(--rot); }
.liste li.leer, td.leer, .karte.leer{ color:var(--tinte-3); font-size:13.5px; }
.ueberfaellig{ color:var(--rot) !important; }
.belegung{ display:flex; align-items:center; gap:10px; margin-top:9px; max-width:260px; }
.belegung .balken{ flex:1; }
.belegung small{ color:var(--tinte-3); white-space:nowrap; }
.anlass-knoepfe{ display:flex; flex-direction:column; gap:7px; margin-left:auto; }
.liste li.dabei .datum{ background:var(--orange-sanft); }

/* Module im Baum per Klick schalten (nur wo man Admin ist) */
.mz.klickbar{ cursor:pointer; transition:transform .1s, box-shadow .1s; }
.mz.klickbar:hover{ transform:translateY(-1px); box-shadow:0 2px 6px rgba(179,109,0,.25); opacity:1; }
.baum .knoten.gewaehlt{ background:var(--orange-sanft); box-shadow:0 0 0 1px var(--orange-linie); }

/* Ohne Admin-Rolle keine Verwaltungsansichten */
body.ohne-admin .menue [data-ziel="gruppen"],
body.ohne-admin .menue [data-ziel="mitglieder"],
body.ohne-admin .menue [data-ziel="admin"],
body.ohne-admin .menue .admin-titel{ display:none; }

/* Anmeldung */
.anmelde-fehler{ color:var(--rot); font-size:13px; margin:4px 0 0; min-height:1em; }
.testzugaenge{ margin-top:22px; padding-top:16px; border-top:1px dashed var(--linie); }
.testzugaenge-titel{ font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); margin-bottom:10px; }
#testzugaenge{ display:grid; grid-template-columns:1fr 1fr; gap:6px; max-height:280px; overflow:auto; }
.testzugang{
  display:flex; gap:9px; align-items:center; text-align:left; cursor:pointer;
  border:1px solid var(--linie); background:var(--weiss); border-radius:10px; padding:7px 9px; font:inherit;
}
.testzugang:hover{ border-color:var(--orange-linie); background:var(--orange-sanft); }
.testzugang .avatar{ width:28px; height:28px; flex-basis:28px; font-size:11px; }
.testzugang b{ display:block; font-size:12.5px; color:var(--blau); }
.testzugang small{ display:block; font-size:11px; color:var(--tinte-3); line-height:1.3; }

/* Erklärleiste: Testdaten zurücksetzen */
.regie-zuruecksetzen{
  margin-top:10px; background:none; border:none; padding:0; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--regie-text);
  text-decoration:underline; text-decoration-color:var(--regie-linie2); text-underline-offset:3px;
}
.regie-zuruecksetzen:hover{ color:var(--regie-stark); }

/* Kommunikation */
.menue-zahl{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--orange); color:var(--blau); font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}
.nachricht{ cursor:pointer; align-items:flex-start !important; border-radius:8px; }
.nachricht:hover{ background:var(--flaeche); }
.nachricht .punkt{ flex:0 0 8px; width:8px; height:8px; border-radius:50%; margin-top:7px; background:transparent; }
.nachricht.neu .punkt{ background:var(--orange); }
.nachricht:not(.neu) .haupt b{ font-weight:600; color:var(--tinte-2); }
.nachricht .vorschau{ display:block; margin-top:4px; font-size:13px; color:var(--tinte-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:640px; }
.nachricht .wann{ margin-left:auto; white-space:nowrap; color:var(--tinte-3); font-size:12px; padding-left:12px; }
.nachricht-text{ width:100%; white-space:pre-wrap; font-size:14.5px; line-height:1.6; color:var(--tinte); background:var(--flaeche); border-radius:10px; padding:16px 18px; max-height:50vh; overflow:auto; }
.klickzeile{ cursor:pointer; }
.klickzeile:hover td{ background:var(--flaeche); }
.formular-zahl{ width:100%; margin:0; font-size:13px; color:var(--tinte-2); background:var(--blau-sanft); border-radius:8px; padding:9px 12px; }
textarea.eingabe{ resize:vertical; min-height:120px; line-height:1.5; }
.formular-feld.haekchen{ flex-direction:row; align-items:center; font-size:13.5px; color:var(--tinte-2); }

/* =====================================================================
   Admin-Kennzeichnung: das Schild heisst «das darfst du, weil du Admin
   bist». Mitmachen bleibt orange (Anmelden) oder weiss (Abmelden);
   Admin-Funktionen sind hellblau mit Schild. Ganze Admin-Bereiche
   werden als Bereich markiert, nicht jeder Knopf darin.
   ===================================================================== */
.schild{ width:14px; height:14px; flex:0 0 14px; }
.knopf.admin{
  background:var(--blau-sanft); color:var(--blau); border-color:var(--blau-linie); font-weight:700;
}
.knopf.admin .schild{ color:var(--blau); }
.knopf.admin:hover{ background:#E1E9F1; }
.knopf.admin.gefahr:hover{ background:#FBE9E7; color:var(--rot); border-color:#F2C4BE; }
.knopf.admin.gefahr:hover .schild{ color:var(--rot); }
.knopf.gefahr:not(.admin){ background:var(--rot); color:#fff; }
.admin-aktionen{ margin-top:4px; padding-top:8px; border-top:1px dashed var(--linie); display:flex; justify-content:flex-end; }
.admin-titel{ display:flex; align-items:center; gap:6px; }
.admin-titel .schild{ width:12px; height:12px; color:var(--blau); opacity:.7; }
.verwalte .schild{ color:var(--blau); }
.hinweiszeile.admin-bereich{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blau-sanft); border:1px solid var(--blau-linie); border-radius:999px; padding:4px 11px 4px 9px;
}
.admin-reiter{ display:inline-flex; align-items:center; gap:6px; }
.legende-admin{ display:inline-flex; align-items:center; gap:5px; }
.legende-admin .schild{ color:var(--blau); }

/* Rückfrage statt confirm() */
dialog.rueckfrage{ width:min(440px, calc(100vw - 32px)); }
dialog.rueckfrage h3{ font-size:18px; }
dialog.rueckfrage.gefahr h3{ color:var(--rot); }
.rueckfrage-admin{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--blau); background:var(--blau-sanft); border-radius:999px; padding:3px 10px 3px 8px;
}

/* Verwaltung im Menü: abgehobener Block unter den Modulen, nur für Admins */
.menue-admin{
  margin-top:18px; padding:2px 6px 6px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:12px;
}
.menue-admin .menue-titel{ padding:10px 10px 6px; }
.menue-admin .menue-punkt:hover{ background:var(--weiss); }
.menue-admin .menue-punkt.aktiv{ background:var(--weiss); box-shadow:0 1px 3px rgba(0,60,105,.1); }
body.ohne-admin .menue-admin{ display:none; }
.mitglied-merker{ background:var(--weiss); color:var(--blau); box-shadow:inset 0 0 0 1px var(--blau-linie); }

/* Modulkatalog: Beschreibung und Hinweis in der ersten Spalte */
.katalog .katalog-erste{ width:58%; }
.katalog td{ vertical-align:top; }
.katalog td:not(:first-child){ padding-top:16px; }
.katalog-modul{ display:flex; align-items:flex-start; gap:11px; }
.katalog-modul .katalog-icon{ margin-top:2px; flex:0 0 18px; }
.katalog-text{ margin:3px 0 0; font-size:13px; line-height:1.45; color:var(--tinte-2); max-width:560px; }
.katalog-hinweis{ margin:5px 0 0; font-size:12px; color:var(--orange-dunkel); }
.katalog-hinweis::before{ content:"Hinweis: "; font-weight:700; }

/* Support: Rolle an der Person, dunkelblaue Marke */
.support-merker{
  display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  background:var(--blau); color:#fff; border-radius:999px; padding:2px 7px; vertical-align:1px;
}
.support-karte{ border-color:var(--blau-linie); }

/* =====================================================================
   Inhalte aus der Datenbank (inhalte.js)
   ===================================================================== */
.news-gross{ display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; overflow:hidden; margin-bottom:18px; }
.news-gross .news-bild{ position:relative; min-height:300px; }
.news-gross .news-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-gross .news-text{ padding:30px; }
.news-gross:not(:has(.news-bild)){ grid-template-columns:1fr; }
.karte-bild.ohne-bild{ background:linear-gradient(135deg,var(--blau),#00558F); height:96px; }
.lese-bild{ width:100%; max-height:240px; object-fit:cover; border-radius:10px; }
.kennzahl.r b{ color:var(--rot); }
.nadel.grau{ background:var(--tinte-3); }
@media (max-width:820px){ .news-gross{ grid-template-columns:1fr; } }

/* Direkt als Datei geöffnet: deutlicher Hinweis oben */
#lokal-hinweis{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:var(--orange); color:var(--blau); font-size:13.5px; line-height:1.4;
  padding:10px 18px; text-align:center; box-shadow:0 4px 14px -6px rgba(0,43,76,.4);
}
#lokal-hinweis code{ background:rgba(255,255,255,.5); padding:1px 5px; border-radius:4px; }
body.mit-lokal-hinweis{ padding-top:40px; }
.plakat-zeile{ display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.verwalte select{ max-width:280px; text-overflow:ellipsis; }
.support-schilde{ display:inline-flex; gap:1px; vertical-align:-2px; color:var(--blau); }
.support-schilde .schild{ width:13px; height:13px; flex-basis:13px; }
.nutzer .support-schilde{ display:inline-flex; margin-left:3px; }

/* Kampagnen */
.kampagnen-leiste{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;
  background:var(--weiss); border:1px solid var(--linie); border-radius:12px; padding:10px 14px;
}
.kampagnen-label{ font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); }
.kampagnen-leiste small{ color:var(--tinte-3); }
.karte.kampagne.gewaehlt{ box-shadow:0 0 0 2px var(--orange-linie), var(--schatten); }
.kampagne-module{ display:flex; gap:6px; flex-wrap:wrap; }
.kampagne-modul{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--orange-dunkel);
  background:var(--orange-sanft); border:1px solid #F0B24D; border-radius:8px; padding:3px 8px 3px 6px;
}
.kampagne-modul svg{ width:15px; height:15px; --duo:.3; }
.kampagne-modul.aus{ background:var(--flaeche); border-color:var(--linie); color:var(--tinte-3); opacity:.6; --duo:0; }
.formular-feld.gesperrt{ opacity:.45; }

/* Dashboard: Aktuell offene Einsätze, volle Breite */
.fokus-kopf{ display:flex; align-items:flex-end; gap:20px; }
.fokus-kopf > div{ flex:1; min-width:0; }
.fokus-kopf h3{ margin:0; }
.fokus-kopf .knopf{ flex:0 0 auto; }
.fokus-einsaetze{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
.fokus-einsaetze:empty{ display:none; }
.fokus-einsatz{
  display:flex; flex-direction:column; gap:4px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:10px; padding:14px 16px;
}
.fokus-einsatz .wann{ font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.65); }
.fokus-einsatz b{ font-size:15.5px; font-weight:700; color:#fff; }
.fokus-einsatz small{ font-size:12.5px; color:rgba(255,255,255,.72); }
.fokus-einsatz .fuss{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; }
.fokus-einsatz .fehlt{ flex:1; font-size:12.5px; font-weight:700; color:var(--orange); }
.fokus-einsatz .knopf{ white-space:nowrap; flex:0 0 auto; }
@media (max-width:900px){
  .fokus-kopf{ flex-direction:column; align-items:flex-start; }
  .fokus-einsaetze{ grid-template-columns:1fr; }
}

/* Suche: Lupe in der Kopfzeile, Fenster mit Sofort-Treffern */
.suche-knopf{
  margin-left:auto; width:36px; height:36px; flex:0 0 36px;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--linie); border-radius:999px; background:var(--weiss); color:var(--blau);
  transition:background .15s, border-color .15s;
}
.suche-knopf:hover{ background:var(--blau-sanft); border-color:var(--blau-linie); }
.suche-knopf svg{ width:18px; height:18px; }

dialog.suchfenster{
  border:none; border-radius:16px; padding:0; margin:12vh auto auto;
  width:min(640px, calc(100vw - 32px)); max-height:70vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 80px -20px rgba(0,43,76,.5);
}
dialog.suchfenster:not([open]){ display:none; }
dialog.suchfenster::backdrop{ background:rgba(0,43,76,.35); backdrop-filter:blur(2px); }
.suchfeld{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--linie); }
.suchfeld svg{ width:20px; height:20px; color:var(--tinte-3); flex:0 0 20px; }
.suchfeld input{ flex:1; min-width:0; border:none; outline:none; font:inherit; font-size:17px; color:var(--tinte); background:none; }
.suchfeld input::-webkit-search-cancel-button{ display:none; }
.suchfenster kbd{
  font:600 10.5px/1 var(--regie-mono); color:var(--tinte-3);
  border:1px solid var(--linie); border-bottom-width:2px; border-radius:5px; padding:3px 5px; background:var(--flaeche);
}
.such-treffer{ overflow-y:auto; padding:6px 8px 10px; flex:1; }
.such-gruppe{ font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); padding:12px 10px 5px; }
.such-zeile{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  border:none; background:none; cursor:pointer; font:inherit; color:var(--tinte);
  padding:9px 10px; border-radius:10px;
}
.such-zeile .zeichen{ width:20px; height:20px; flex:0 0 20px; color:var(--blau); --duo:.16; }
.such-zeile .haupt{ flex:1; min-width:0; }
.such-zeile b{ display:block; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.such-zeile small{ display:block; font-size:12.5px; color:var(--tinte-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.such-zeile mark{ background:var(--orange-sanft); color:inherit; border-radius:3px; box-shadow:0 0 0 1px var(--orange-linie); }
.such-zeile .schild{ width:16px; height:16px; color:var(--blau); flex:0 0 16px; }
.such-zeile .pfeil{ width:14px; height:14px; color:var(--tinte-3); flex:0 0 14px; opacity:0; }
.such-zeile.gewaehlt{ background:var(--blau-sanft); }
.such-zeile.gewaehlt .pfeil{ opacity:1; }
.such-leer{ padding:30px 12px; text-align:center; color:var(--tinte-3); font-size:14px; }
.such-fuss{ display:flex; gap:16px; align-items:center; padding:10px 18px; border-top:1px solid var(--linie); background:var(--flaeche); font-size:12px; color:var(--tinte-3); }
.such-fuss kbd{ margin-right:3px; }
.such-fuss .rechts{ margin-left:auto; }
@media (max-width:700px){ .such-fuss{ display:none; } dialog.suchfenster{ margin-top:16px; } }

/* Treffer in der Zielansicht kurz hervorheben */
.such-blitz{ animation:such-blitz 2.2s ease-out; border-radius:8px; }
@keyframes such-blitz{ 0%,35%{ box-shadow:0 0 0 3px var(--orange); background-color:var(--orange-sanft); } 100%{ box-shadow:0 0 0 3px transparent; } }

/* Info-Symbol (i) neben Titeln und seine Blase */
.info{
  display:inline-grid; place-items:center; vertical-align:2px;
  width:16px; height:16px; margin-left:6px; padding:0;
  border:1.5px solid currentColor; border-radius:50%; background:none; cursor:pointer;
  color:var(--tinte-3); opacity:.8; transition:opacity .15s, color .15s;
  font:700 10px/1 Georgia, serif; letter-spacing:0; text-transform:none;
}
.info::before{ content:"i"; }
.info:hover, .info.offen{ opacity:1; color:var(--blau); }
.hinweiszeile .info{ vertical-align:1px; width:15px; height:15px; font-size:9.5px; }
.karte-fokus .info{ color:rgba(255,255,255,.75); }
.karte-fokus .info:hover, .karte-fokus .info.offen{ color:#fff; }
.info-blase{
  position:fixed; z-index:60; width:min(300px, calc(100vw - 24px));
  background:var(--weiss); color:var(--tinte); border:1px solid var(--blau-linie); border-radius:10px; padding:12px 14px;
  font-size:13px; line-height:1.5; box-shadow:0 18px 40px -14px rgba(0,43,76,.5);
}
.info-blase::before{
  content:""; position:absolute; top:-5px; left:calc(var(--spitze, 24px) - 5px);
  width:10px; height:10px; background:inherit; transform:rotate(45deg); border-radius:2px;
  border-left:1px solid var(--blau-linie); border-top:1px solid var(--blau-linie);
}
.info-blase.oben::before{ top:auto; bottom:-6px; border:none; border-right:1px solid var(--blau-linie); border-bottom:1px solid var(--blau-linie); }
.info-blase p{ margin:0; }
.info-blase p + p{ margin-top:8px; }
.info-blase .leise{ color:var(--tinte-3); font-size:12px; }
.nobr{ white-space:nowrap; }
.suche-knopf:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* Dashboard: Bilanz als drei Zahlenblöcke */
.bilanz-zahlen{ grid-template-columns:repeat(3,1fr); gap:8px; }
.bilanz-zahlen .kennzahl{ padding:12px 10px; }
.bilanz-zahlen .kennzahl b{ font-size:23px; }
.gitter > *{ min-width:0; }
.bilanz-zahlen .kennzahl span{ letter-spacing:.5px; font-size:10px; }
.unterzeile{ display:block; margin:-8px 0 12px; font-size:12.5px; color:var(--tinte-3); }

/* Leerer Zustand «Alles erledigt»: grünes Häkchen, Dank, ein Satz. Gleich überall. */
.leer-danke{
  display:flex; gap:12px; align-items:flex-start;
  background:#EEF8F2; border:1px solid #CBEBD8; border-radius:10px; padding:14px 16px;
}
.leer-haken{ flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--gruen); position:relative; }
.leer-haken::after{
  content:""; position:absolute; left:9px; top:5px; width:6px; height:11px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg);
}
.leer-danke b{ display:block; font-size:14.5px; color:var(--tinte); margin:2px 0 3px; }
.leer-danke span:not(.leer-haken){ display:block; font-size:12.5px; color:var(--tinte-2); line-height:1.45; }
.liste li.leer-danke-zeile{ display:block; border-top:none; padding:0 0 12px; }

/* 5-Minuten-Einsätze auf dem Dashboard */
.kurz-liste{ display:flex; flex-direction:column; gap:12px; }
.kurz-einsatz{ border:1px solid var(--linie); border-radius:8px; padding:14px; }
.kurz-einsatz .hinweiszeile{ font-size:10px; }
.kurz-einsatz b{ display:block; margin-bottom:4px; }
.kurz-einsatz small{ display:block; color:var(--tinte-2); }
.kurz-knoepfe{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.kurz-erledigt{
  margin-left:auto; border:none; background:none; cursor:pointer; padding:4px 0;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--tinte-3);
  display:inline-flex; align-items:center; gap:6px;
}
.kurz-erledigt::before{ content:""; width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; box-sizing:border-box; }
.kurz-erledigt:hover{ color:var(--gruen); }
.kurz-mehr{ display:block; font-size:12px; color:var(--tinte-3); text-align:center; }
#kurz-admin{ justify-content:space-between; align-items:center; margin-top:14px; }
#kurz-admin small{ font-size:12px; color:var(--tinte-3); }

/* Verwaltung der 5-Minuten-Einsätze (Dialog) */
dialog.kurz-verwaltung{ width:min(720px, calc(100vw - 32px)); }
.kurz-tabelle{ width:100%; max-height:52vh; overflow-y:auto; }
.kurz-tabelle li{ align-items:center; }
.kurz-tabelle li .merker{ flex:0 0 auto; }
.kurz-zahl{ flex:0 0 auto; font-size:12px; color:var(--tinte-3); white-space:nowrap; }
.kurz-zahl b{ display:inline; font-size:14px; color:var(--blau); }
.kurz-tabelle .weg{ margin-left:0; }
.formular-zahl:empty{ display:none; }

/* Spendenbarometer auf dem Dashboard: mehrere Aktionen zum Durchblättern */
.spenden-spur{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  overscroll-behavior-x:contain; gap:24px;
}
.spenden-spur::-webkit-scrollbar{ display:none; }
.spenden-folie{ flex:0 0 100%; min-width:0; scroll-snap-align:start; }
.spenden-folie .hinweiszeile{ font-size:10px; margin-bottom:4px; }
.spenden-titel{ display:block; font-size:14.5px; font-weight:700; color:var(--tinte); line-height:1.35; margin-bottom:12px; }
.spenden-stand{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.spenden-stand b{ font-size:23px; letter-spacing:-.7px; white-space:nowrap; color:var(--blau); }
.spenden-stand small{ color:var(--tinte-3); font-size:12.5px; }
.spenden-fuss{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; flex-wrap:wrap; }
.spenden-fuss small{ font-size:12px; color:var(--tinte-3); }
.spenden-blaettern{ display:flex; gap:4px; }
.spenden-blaettern button{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--linie); background:var(--weiss);
  color:var(--blau); font-size:17px; line-height:1; cursor:pointer; padding:0 0 2px;
}
.spenden-blaettern button:hover:not(:disabled){ background:var(--blau-sanft); border-color:var(--blau-linie); }
.spenden-blaettern button:disabled{ opacity:.35; cursor:default; }
.spenden-punkte{ display:flex; justify-content:center; gap:6px; margin-top:14px; }
.spenden-punkte:empty{ display:none; }
.spenden-punkte button{ width:7px; height:7px; border-radius:50%; border:none; padding:0; background:var(--linie); cursor:pointer; transition:width .2s, background .2s; }
.spenden-punkte button.aktiv{ width:18px; border-radius:4px; background:var(--orange); }
/* Knopf für ein Modul, das noch kommt: ausgegraut, nicht klickbar */
.knopf.modul-folgt, .knopf.modul-folgt:hover{ background:var(--flaeche); color:var(--tinte-3); border:1px dashed var(--blau-linie); box-shadow:none; cursor:not-allowed; transform:none; }
/* Dashboard-Raster: links zwei Drittel, rechts eine durchgehende Spalte */
.dash-raster{ grid-template-columns:2fr 1fr; align-items:start; }
.dash-links .g2{ align-items:stretch; }
@media (max-width:1000px){ .dash-raster{ grid-template-columns:1fr; } }
.kurz-tabelle .haupt small{ display:block; }
/* Aufgaben: private Aufgabe (nur für sich selbst angelegt) */
.privat{ display:inline-flex; align-items:center; gap:4px; }
.privat::before{
  content:""; width:9px; height:10px; border-radius:2px; background:currentColor; opacity:.7;
  -webkit-mask:radial-gradient(circle at 50% 0, transparent 2.5px, #000 3px) top/100% 45% no-repeat, linear-gradient(#000,#000) bottom/100% 60% no-repeat;
}

/* Erklärleiste: Notizen für alle (Tincan-Markenwelt wie die Leiste) */
.regie-notizen{ margin-top:8px; padding-top:18px; border-top:1px solid var(--regie-linie); }
.regie-notizen-kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.regie-notizen-kopf h3{ margin:0; font:500 10.5px/1 var(--regie-mono); letter-spacing:1px; text-transform:uppercase; color:var(--regie-leise); }
.regie-notizen-wahl{ display:flex; gap:2px; padding:2px; border:1px solid var(--regie-linie); border-radius:999px; background:var(--regie-karte); }
.regie-notizen-wahl button{ border:none; background:none; cursor:pointer; font:500 11px/1 var(--regie-sans); color:var(--regie-leise); padding:5px 10px; border-radius:999px; }
.regie-notizen-wahl button.aktiv{ background:var(--regie-stark); color:#fff; }
.regie-notizen-wahl span:empty{ display:none; }
.regie-notizen-liste{ list-style:none; margin:0 0 10px; padding:0; }
.regie-notizen-liste li{
  display:flex; gap:9px; align-items:flex-start;
  background:var(--regie-karte); border:1px solid var(--regie-linie); border-radius:10px;
  padding:9px 10px; margin-bottom:6px; font:13px/1.45 var(--regie-sans); color:var(--regie-stark);
}
.regie-notizen-liste li > div{ flex:1; min-width:0; }
.regie-notizen-liste p{ margin:0 0 2px; overflow-wrap:anywhere; }
.regie-notizen-liste small{ font-size:11px; color:var(--regie-leise); }
.regie-notizen-liste small a{ color:inherit; }
.regie-notizen-liste li.erledigt p{ text-decoration:line-through; color:var(--regie-leise); }
.regie-notizen-liste li.leer{ background:none; border:1px dashed var(--regie-linie2); color:var(--regie-leise); font-size:12px; display:block; }
.regie-notizen-liste li.gruppe{ background:none; border:none; padding:10px 2px 2px; margin:0; font:500 10.5px/1 var(--regie-mono); letter-spacing:.8px; text-transform:uppercase; }
.regie-notizen-liste li.gruppe a{ color:var(--regie-text); text-decoration:none; }
.regie-notizen-liste li.gruppe a:hover{ color:var(--regie-stark); }
.notiz-haken{ flex:0 0 15px; width:15px; height:15px; margin-top:2px; border:1.5px solid var(--regie-linie2); border-radius:4px; background:none; cursor:pointer; padding:0; position:relative; }
.notiz-haken:hover{ border-color:var(--regie-stark); }
li.erledigt .notiz-haken{ background:var(--regie-stark); border-color:var(--regie-stark); }
li.erledigt .notiz-haken::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.notiz-weg{ flex:0 0 auto; border:none; background:none; cursor:pointer; color:var(--regie-leise); font-size:16px; line-height:1; padding:0 2px; opacity:0; }
.regie-notizen-liste li:hover .notiz-weg{ opacity:1; }
.notiz-weg:hover{ color:var(--regie-stark); }
#notiz-eingabe{
  width:100%; box-sizing:border-box; resize:vertical; min-height:58px;
  font:13px/1.45 var(--regie-sans); color:var(--regie-stark);
  background:var(--regie-karte); border:1px solid var(--regie-linie2); border-radius:10px; padding:9px 11px;
}
#notiz-eingabe:focus{ outline:none; border-color:var(--regie-stark); }
.regie-notizen-fuss{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:7px; }
.regie-notizen-fuss small{ font-size:10.5px; color:var(--regie-leise); line-height:1.35; }
#notiz-speichern{ flex:0 0 auto; border:none; cursor:pointer; background:var(--regie-stark); color:#fff; font:500 12px/1 var(--regie-sans); padding:8px 14px; border-radius:999px; }
/* Unten links: Name kürzt sich, Schilde bleiben immer sichtbar */
#ich-name{ display:flex; align-items:center; gap:4px; min-width:0; }
#ich-name .name-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#ich-name .support-schilde{ flex:0 0 auto; margin-left:0; }
/* Aufgaben: Gruppenaufgabe (wer zuerst kommt) */
.gruppe-merker{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--blau); background:var(--blau-sanft); border-radius:999px; padding:2px 7px; vertical-align:1px; }
.erledigt-von{ font-weight:600; color:var(--gruen); }
/* Aufgaben: zweite Filterebene unter den Reitern */
.aufgaben-art{ flex-basis:100%; order:3; display:flex; gap:18px; flex-wrap:wrap; border-bottom:1px solid var(--linie); }
.aufgaben-art button{
  border:none; background:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:600; color:var(--tinte-2);
  padding:8px 0 9px; margin-bottom:-1px; border-bottom:2px solid transparent;
}
.aufgaben-art button:hover{ color:var(--blau); }
.aufgaben-art button.aktiv{ color:var(--blau); border-bottom-color:var(--orange); }
.aufgaben-art span{ font-size:11.5px; color:var(--tinte-3); margin-left:3px; }
.aufgabe.fremd .haken{ opacity:.35; cursor:default; }
/* 5-Minuten-Karte füllt die Höhe neben «Meine Aufgaben», Knöpfe unten */
.dash-links .g2 > .karte:first-child{ display:flex; flex-direction:column; }
#dash-kurz-spur{ flex:1; }
#dash-kurz-spur .kurz-einsatz{ display:flex; flex-direction:column; }
#dash-kurz-spur .kurz-knoepfe{ margin-top:auto; padding-top:12px; }
.kurz-bild{ position:relative; margin:-14px -14px 12px; height:120px; border-radius:8px 8px 0 0; overflow:hidden; background:var(--blau-sanft); }
.kurz-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.kurz-bild-laden{
  position:absolute; right:8px; bottom:8px; font-size:11px; font-weight:700; text-decoration:none;
  color:var(--blau); background:rgba(255,255,255,.92); border-radius:999px; padding:4px 9px;
}
.kurz-bild-laden:hover{ background:#fff; }

/* Bildergalerie im Formular: Vorschau, «Bild hochladen», «Aus Galerie wählen» */
.galerie{ width:100%; display:flex; flex-direction:column; gap:6px; }
.galerie-titel{ font-size:12.5px; font-weight:700; color:var(--blau); }
.galerie-wahl{ display:flex; gap:14px; align-items:center; }
.galerie-vorschau{ width:150px; height:100px; flex:0 0 150px; border-radius:10px; object-fit:cover; background:var(--flaeche); border:1px solid var(--linie); }
.galerie-vorschau.leer{ display:grid; place-items:center; font-size:12px; color:var(--tinte-3); border-style:dashed; }
.galerie-knoepfe{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.galerie-knoepfe small{ font-size:12px; color:var(--tinte-3); }
.galerie-knoepfe label.knopf{ cursor:pointer; }

/* Galeriefenster über dem Formular */
dialog.galerie-fenster{ width:min(980px, calc(100vw - 32px)); }
dialog.galerie-fenster form{ flex-direction:column; flex-wrap:nowrap; max-height:86vh; }
.galerie-kopf{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.galerie-kopf h3{ width:auto; }
.galerie-hoch-knopf{ cursor:pointer; }
.galerie-filter{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.galerie-filter .eingabe{ flex:1; min-width:180px; }
.galerie-gross{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;
  overflow-y:auto; min-height:240px; padding:2px; align-content:start; flex:1;
}
.galerie-bild{ position:relative; aspect-ratio:4/3; border-radius:8px; cursor:pointer; overflow:hidden; border:2px solid transparent; padding:0; background:var(--flaeche); }
.galerie-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.galerie-bild:hover{ border-color:var(--blau-linie); }
.galerie-bild.gewaehlt{ border-color:var(--orange); }
.galerie-name{
  position:absolute; left:0; right:0; bottom:0; padding:14px 8px 6px; text-align:left;
  background:linear-gradient(180deg,transparent,rgba(0,43,76,.78)); color:#fff; font-size:11.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.galerie-name small{ display:block; font-weight:500; opacity:.8; font-size:10.5px; overflow:hidden; text-overflow:ellipsis; }
.galerie-weg{
  position:absolute; right:5px; top:5px; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--tinte-2); font-size:15px; line-height:22px; text-align:center; opacity:0;
}
.galerie-bild:hover .galerie-weg{ opacity:1; }
.galerie-weg:hover{ color:var(--rot); }
.galerie-mehr{ grid-column:1 / -1; justify-self:center; }
.galerie-leer{ grid-column:1 / -1; color:var(--tinte-3); text-align:center; padding:30px 0; }
.galerie-fenster .formular-knoepfe{ align-items:center; }
.galerie-zahl{ margin-right:auto; font-size:12px; color:var(--tinte-3); }

/* News: ganze Kachel öffnet den Artikel */
.news-kachel{ cursor:pointer; transition:box-shadow .15s, transform .15s; }
.news-kachel:hover{ box-shadow:0 1px 2px rgba(0,60,105,.06), 0 14px 32px -14px rgba(0,60,105,.32); transform:translateY(-1px); }
.news-kachel:hover b, .news-kachel:hover h3{ color:var(--orange-dunkel); }
.news-weiter{ display:block; margin-top:10px; font-size:13px; font-weight:700; color:var(--blau); }
.news-kachel:hover .news-weiter{ color:var(--orange-dunkel); }
.aufgaben-art.unterfilter{ margin-bottom:16px; }
.galerie-gross{ grid-auto-rows:120px; }
.galerie-gross .galerie-bild{ aspect-ratio:auto; height:120px; }
.galerie-gross .galerie-mehr, .galerie-gross .galerie-leer{ height:auto; align-self:center; }
.galerie-hoch-knopf{ white-space:nowrap; }

/* Richtext: Eingabe in News erfassen und Anzeige in der geöffneten News */
.richtext-feld{ width:100%; border:1px solid var(--linie); border-radius:10px; background:var(--weiss); overflow:hidden; }
.richtext-feld:focus-within{ border-color:var(--blau-linie); box-shadow:0 0 0 3px var(--blau-sanft); }
.richtext-leiste{ display:flex; gap:2px; padding:5px 6px; border-bottom:1px solid var(--linie); background:var(--flaeche); }
.richtext-leiste button{
  width:30px; height:28px; border:none; border-radius:6px; background:none; cursor:pointer;
  font:15px/1 Georgia, serif; color:var(--blau); display:grid; place-items:center;
}
.richtext-leiste button:hover{ background:var(--blau-sanft); }
.richtext-leiste button.an{ background:var(--blau); color:#fff; }
.richtext-leiste svg{ width:16px; height:16px; fill:currentColor; }
.richtext-text{ min-height:130px; max-height:40vh; overflow-y:auto; padding:11px 13px; font-size:14.5px; line-height:1.55; color:var(--tinte); outline:none; }
.richtext-text:empty::before{ content:"Text …"; color:var(--tinte-3); }
.v-news-formular .richtext-text:empty::before{ content:"Text der News …"; }
.richtext p{ margin:0 0 .7em; }
.richtext p:last-child{ margin-bottom:0; }
.richtext ul{ margin:0 0 .7em; padding-left:1.3em; }
.richtext li{ margin-bottom:.25em; }
.richtext li::marker{ color:var(--orange); }
.richtext strong{ font-weight:700; }
.nachricht-text.richtext{ white-space:normal; }
.galerie-vorschau[data-galerie-oeffnen]{ cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.galerie-vorschau[data-galerie-oeffnen]:hover{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-sanft); }
.richtext-feld{ margin-top:-8px; }

/* 5-Minuten-Einsätze als Slider: die nächste Folie schaut rechts herein */
.kurz-spur{ margin:0 -20px; padding:2px 20px 4px; scroll-padding-left:20px; }
.kurz-spur > .spenden-folie{ flex:0 0 84%; }
.kurz-spur > .spenden-folie:only-child{ flex-basis:100%; }
.kurz-spur::after{ content:""; flex:0 0 calc(16% - 24px); }   /* damit auch die letzte Folie ganz nach links rückt */
.kurz-spur .kurz-einsatz{ background:var(--weiss); box-shadow:0 1px 2px rgba(0,60,105,.05), 0 6px 16px -10px rgba(0,60,105,.25); transition:opacity .25s; }
.slider-zahl{ font-size:11.5px; font-weight:700; color:var(--tinte-3); margin-right:4px; align-self:center; font-variant-numeric:tabular-nums; }
.spenden-blaettern{ align-items:center; }
.slider-fuss{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; }
.slider-fuss .spenden-punkte{ margin-top:0; }
.slider-fuss .slider-zahl{ margin:0; font-size:11px; }
.slider-fuss .slider-zahl:empty{ display:none; }
/* Aufgaben: 5-Minuten-Einsätze in der Liste */
.kurz-merker{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--orange-dunkel); background:var(--orange-sanft); border-radius:999px; padding:2px 7px; vertical-align:1px; }
.aufgabe-aktion{ display:flex; gap:6px; margin-left:auto; flex:0 0 auto; align-self:center; }
.aufgabe.erledigt .aufgabe-aktion{ display:none; }

/* Umschalter (z. B. Liste / Monat) */
.umschalter{ display:flex; gap:2px; padding:3px; background:var(--flaeche); border:1px solid var(--linie); border-radius:999px; }
.umschalter button{ border:none; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600; color:var(--tinte-2); padding:6px 14px; border-radius:999px; }
.umschalter button.aktiv{ background:var(--weiss); color:var(--blau); box-shadow:0 1px 3px rgba(0,60,105,.15); }

/* Veranstaltungen: Monatsansicht */
.monat-kopf{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.monat-kopf h3{ margin:0 6px; min-width:150px; text-align:center; font-size:18px; }
.monat-legende{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--tinte-3); }
.monat-legende i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-left:8px; }
.monat-legende i.dabei{ background:var(--gruen); }
.monat-legende i.frei{ background:var(--orange); }
.monat-raster{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-top:1px solid var(--linie); border-left:1px solid var(--linie); }
.monat-wochentag{ font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--tinte-3); padding:7px 8px; border-right:1px solid var(--linie); border-bottom:1px solid var(--linie); background:var(--flaeche); }
.monat-tag{ min-height:96px; padding:5px 5px 6px; border-right:1px solid var(--linie); border-bottom:1px solid var(--linie); display:flex; flex-direction:column; gap:3px; min-width:0; }
.monat-tag.leer{ background:var(--flaeche); }
.monat-tag.vorbei{ background:#FAFBFC; }
.monat-tag.vorbei .monat-zahl{ color:var(--tinte-3); }
.monat-zahl{ font-size:12px; font-weight:700; color:var(--tinte-2); padding:2px 4px; align-self:flex-start; border-radius:999px; }
.monat-tag.heute .monat-zahl{ background:var(--orange); color:var(--blau); }
.monat-anlass{
  display:block; width:100%; text-align:left; border:none; cursor:pointer; font:inherit; font-size:11.5px; line-height:1.3;
  padding:3px 6px; border-radius:5px; background:var(--blau-sanft); color:var(--blau);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid var(--blau-linie);
}
.monat-anlass b{ font-weight:700; }
.monat-anlass.dabei{ background:#E6F5EC; border-left-color:var(--gruen); }
.monat-anlass.frei{ background:var(--orange-sanft); border-left-color:var(--orange); }
.monat-anlass:hover{ filter:brightness(.96); }
.monat-tag.vorbei .monat-anlass{ opacity:.6; }
dialog.anlass-fenster{ width:min(620px, calc(100vw - 32px)); }
dialog.anlass-fenster .liste{ width:100%; }
@media (max-width:760px){ .monat-tag{ min-height:64px; } .monat-anlass b{ display:none; } }

/* Dashboard: Veranstaltungen über die volle Breite, rechts die Monatskachel */
.dash-termine{ margin-top:26px; }
.dash-termine .dash-raster{ align-items:stretch; }
.mini-kalender{ display:flex; flex-direction:column; }
.mk-kopf{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mk-kopf b{ font-size:15px; color:var(--blau); }
.mk-kopf button{ width:28px; height:28px; border-radius:50%; border:1px solid var(--linie); background:var(--weiss); color:var(--blau); cursor:pointer; font-size:17px; line-height:1; padding:0 0 2px; }
.mk-kopf button:hover{ background:var(--blau-sanft); }
.mk-raster{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; flex:1; align-content:start; }
.mk-wt{ font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--tinte-3); text-align:center; padding-bottom:4px; }
.mk-tag{
  position:relative; aspect-ratio:1; border:none; background:none; border-radius:8px; padding:0;
  font:inherit; font-size:13px; font-weight:600; color:var(--tinte-2); cursor:default;
}
.mk-tag.vorbei{ color:var(--tinte-3); font-weight:500; }
.mk-tag.hat{ cursor:pointer; background:var(--flaeche); color:var(--blau); font-weight:700; }
.mk-tag.hat:hover{ background:var(--blau-sanft); }
.mk-tag.heute{ background:var(--orange); color:var(--blau); }
.mk-tag i{ position:absolute; left:50%; bottom:4px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--blau-linie); }
.mk-tag i.dabei{ background:var(--gruen); }
.mk-tag i.frei{ background:var(--orange); }
.mk-tag.heute i{ background:var(--blau); }
.mk-legende{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; font-size:11px; color:var(--tinte-3); }
.mk-legende i{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blau-linie); margin-right:5px; vertical-align:1px; }
.mk-legende i.dabei{ background:var(--gruen); }
.mk-legende i.frei{ background:var(--orange); }

/* Dashboard: beide Spalten gleich lang, die kürzere dehnt ihre letzte Karte (keine Lücken) */
#v-dashboard > .dash-raster{ align-items:stretch; }
.dash-links{ display:flex; flex-direction:column; }
.dash-links #dash-news{ flex:1; align-items:stretch; }
#dash-news .news-kachel{ display:flex; flex-direction:column; }
#dash-news .news-kachel .news-weiter{ margin-top:auto; padding-top:10px; }
#v-dashboard > .dash-raster > .karte-kette > .karte:last-child{ flex:1; }
/* Den gewonnenen Platz nimmt das Bild, nicht Leerraum */
#dash-news .news-kachel .karte-bild{ flex:1 1 auto; min-height:150px; height:auto; }
#dash-news .news-kachel .news-weiter{ margin-top:10px; padding-top:0; }

/* 5-Minuten-Einsatz: öffnen, ignorieren */
.kurz-spur .kurz-einsatz{ cursor:pointer; }
.kurz-spur .kurz-einsatz:hover{ border-color:var(--blau-linie); }
.kurz-mehr-lesen{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--blau); }
.kurz-einsatz:hover .kurz-mehr-lesen{ color:var(--orange-dunkel); }
.kurz-klein{ margin-left:auto; display:flex; gap:12px; align-items:center; }
.kurz-klein .kurz-erledigt{ margin-left:0; }
.kurz-ignorieren{ border:none; background:none; cursor:pointer; padding:4px 0; font:inherit; font-size:12.5px; font-weight:600; color:var(--tinte-3); }
.kurz-ignorieren:hover{ color:var(--rot); }
.kurz-titel{ cursor:pointer; }
.kurz-titel:hover{ color:var(--orange-dunkel); }
dialog.kurz-fenster{ width:min(600px, calc(100vw - 32px)); }
dialog.kurz-fenster .kurz-merker{ width:auto; }
.kurz-bild.gross{ width:100%; height:220px; margin:0; border-radius:10px; }
.kurz-anleitung{ width:100%; margin:0; font-size:14px; font-weight:600; color:var(--tinte); }
.kurz-vorlage{ width:100%; background:var(--orange-sanft); border:1px dashed var(--orange-linie); border-radius:10px; padding:12px 14px; font-size:14px; line-height:1.5; color:var(--tinte); }
.kurz-vorlage span{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--orange-dunkel); margin-bottom:4px; }
.kurz-fenster-knoepfe{ align-items:center; flex-wrap:wrap; }
.kurz-fenster-knoepfe .luecke{ flex:1; }

/* Support-Bereich: eigener Menüblock mit zwei Schilden, nur für Support */
body.ohne-support .menue-support{ display:none; }
.menue-support{ margin-top:10px; border-color:var(--blau-linie); background:linear-gradient(180deg, var(--blau-sanft), var(--flaeche)); }
.menue-support .support-schilde{ margin-right:6px; }
.support-bereich .support-schilde{ margin-right:6px; }
.einstellungen .einstellung{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-top:1px solid var(--linie); cursor:default; }
.einstellungen .einstellung:first-of-type{ border-top:none; padding-top:4px; }
.einstellung b{ display:block; font-size:14.5px; font-weight:600; color:var(--tinte); }
.einstellung small{ display:block; font-size:12.5px; color:var(--tinte-3); margin-top:2px; }
.einstellung-wert{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.einstellung-wert .eingabe{ width:96px; text-align:right; font-weight:700; }
.einstellung-wert em{ font-style:normal; font-size:13px; color:var(--tinte-2); min-width:64px; }
/* Belegung: Strich bei der Mindestanzahl */
.belegung .balken{ position:relative; overflow:visible; }
.belegung .balken i{ border-radius:4px; }
.min-strich{ position:absolute; top:-3px; bottom:-3px; width:2px; margin-left:-1px; background:var(--blau); border-radius:1px; }
.belegung{ max-width:400px; }
/* Seiten (News) */
.seiten{ display:flex; align-items:center; justify-content:center; gap:4px; margin-top:22px; flex-wrap:wrap; }
.seiten button{
  min-width:36px; height:36px; padding:0 10px; border:1px solid var(--linie); background:var(--weiss); border-radius:999px;
  font:inherit; font-size:13.5px; font-weight:600; color:var(--blau); cursor:pointer;
}
.seiten button:hover:not(:disabled){ background:var(--blau-sanft); border-color:var(--blau-linie); }
.seiten button.aktiv{ background:var(--blau); color:#fff; border-color:var(--blau); }
.seiten button:disabled{ opacity:.4; cursor:default; }
.seite-luecke{ padding:0 4px; color:var(--tinte-3); }
.seiten small{ margin-left:12px; font-size:12px; color:var(--tinte-3); }
/* Anlass, bei dem ich dabei bin: Datum grün (wie «Du bist dabei») */
.liste li.dabei .datum{ background:#E6F5EC; border-color:#B7E2C8; }
.liste li.dabei .datum span, .liste li.dabei .datum b{ color:var(--gruen); }
/* Zwei Schilde: nur Support */
.doppel-schild{ display:inline-flex; gap:1px; margin-right:6px; }
.doppel-schild .schild{ width:13px; height:13px; }
.knopf.support-knopf{ border-color:var(--blau); }
.knopf.support-knopf .doppel-schild{ margin-right:6px; }
.rueckfrage-admin.support .doppel-schild{ margin-right:5px; }
.du{ font-weight:500; color:var(--tinte-2); }

/* Anschreiben: einzelne Personen wählen */
.personen-wahl{ width:100%; display:flex; flex-direction:column; gap:8px; }
.personen-titel{ font-size:12.5px; font-weight:700; color:var(--blau); }
.personen-chips{ display:flex; flex-wrap:wrap; gap:6px; min-height:28px; align-items:center; }
.personen-chips small{ font-size:12.5px; color:var(--tinte-3); }
.chip{ display:inline-flex; align-items:center; gap:4px; background:var(--blau); color:#fff; font-size:12.5px; font-weight:600; border-radius:999px; padding:4px 6px 4px 11px; }
.chip button{ border:none; background:rgba(255,255,255,.2); color:#fff; width:18px; height:18px; border-radius:50%; cursor:pointer; font-size:13px; line-height:18px; padding:0; }
.chip button:hover{ background:rgba(255,255,255,.35); }
.personen-liste{ max-height:190px; overflow-y:auto; border:1px solid var(--linie); border-radius:10px; padding:4px; }
.personen-zeile{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; }
.personen-zeile:hover{ background:var(--flaeche); }
.personen-zeile input{ accent-color:var(--orange); width:16px; height:16px; flex:0 0 16px; }
.personen-zeile b{ display:block; font-size:13.5px; font-weight:600; }
.personen-zeile small{ display:block; font-size:12px; color:var(--tinte-3); }
.personen-liste .leer{ display:block; padding:10px; }
/* Kommunikation: Entwürfe */
.reiter-zahl:empty{ display:none; }
.reiter-zahl{ margin-left:5px; font-size:11px; opacity:.75; }
.nachricht.entwurf{ cursor:pointer; align-items:center; }
.entwurf-merker{ flex:0 0 auto; align-self:flex-start; margin-top:2px; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--tinte-2); background:var(--flaeche); border:1px dashed var(--blau-linie); border-radius:999px; padding:2px 7px; }
.nachricht.entwurf .knopf{ flex:0 0 auto; margin-left:10px; }
.menue-zahl[hidden]{ display:none; }   /* 0 ungelesen: gar nichts zeigen */

/* Menü Kampagnen: gewählte Kampagne unter «Übersicht», ihre Module darunter eingerückt */
.menue-kampagne{ display:flex; align-items:center; gap:7px; margin:4px 6px 2px 10px; padding:6px 8px; border-radius:8px; background:var(--orange-sanft); border:1px solid var(--orange-linie); }
.mk-punkt{ flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--tinte-3); }
.mk-punkt.laeuft{ background:var(--gruen); }
.mk-punkt.geplant{ background:var(--orange); }
.menue-kampagne-wahl{
  flex:1; min-width:0; border:none; background:transparent; cursor:pointer; padding:0 14px 0 0;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--blau); text-overflow:ellipsis;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23003C69' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center;
}
.menue-kampagne-wahl:focus{ outline:none; }
.mk-leer{ font-size:12.5px; color:var(--tinte-3); font-style:normal; }
.menue-kmodule{ margin-left:14px; padding-left:6px; border-left:2px solid var(--orange-linie); }
.menue-kampagne{ margin:4px 0 2px; }   /* gleich breit wie «Übersicht» */
/* Kampagnen: Hinweis zur Laufzeit, Archiv */
.kampagne-hinweis{ margin-top:10px; font-size:12.5px; line-height:1.45; color:var(--orange-dunkel); background:var(--orange-sanft); border-radius:8px; padding:7px 10px; }
.kampagne-hinweis.grau{ color:var(--tinte-2); background:var(--flaeche); }
.kampagne-admin{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.kampagnen-archiv .karte{ background:var(--flaeche); }
.kampagnen-archiv .karte h3{ color:var(--tinte-2); }
/* Kampagnen-Module: gewählte Kampagne als Zeile unter dem Seitentitel */
.kampagne-zeile{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-4px 0 12px; font-size:14px; }
.kampagne-zeile:empty{ display:none; }
.kz-label{ font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); }
.kampagne-zeile b{ color:var(--blau); font-weight:700; }
.kampagne-zeile small{ color:var(--tinte-3); font-size:12.5px; }

/* Kampagnenwahl (Menü und Balken): eigener Knopf mit Liste statt Browser-Dropdown */
.menue-kampagne{ padding:0; border:none; background:none; }
.kw-knopf{
  display:flex; align-items:center; gap:8px; width:100%; min-width:0; cursor:pointer; text-align:left;
  font:inherit; font-size:13px; font-weight:700; color:var(--blau);
  background:var(--weiss); border:1px solid var(--orange-linie); border-radius:10px; padding:7px 10px;
  box-shadow:0 1px 2px rgba(0,60,105,.06); transition:border-color .15s, box-shadow .15s;
}
.kw-knopf:hover{ border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-sanft); }
.kw-titel{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kw-pfeil{ width:10px; height:6px; flex:0 0 10px; color:var(--tinte-3); }
.kw-menue{ background:var(--orange-sanft); }
.kw-balken{ width:auto; max-width:340px; font-size:14px; padding:6px 12px; }
.kw-liste{
  position:fixed; z-index:70; overflow-y:auto; padding:6px;
  background:var(--weiss); border:1px solid var(--linie); border-radius:12px;
  box-shadow:0 20px 44px -14px rgba(0,43,76,.45);
}
.kw-gruppe{ font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); padding:10px 10px 4px; }
.kw-eintrag{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  border:none; background:none; font:inherit; color:var(--tinte); padding:8px 10px; border-radius:8px;
}
.kw-eintrag:hover{ background:var(--flaeche); }
.kw-eintrag.gewaehlt{ background:var(--orange-sanft); }
.kw-eintrag > span:not(.mk-punkt){ flex:1; min-width:0; }
.kw-eintrag b{ display:block; font-size:13.5px; font-weight:700; color:var(--blau); }
.kw-eintrag small{ display:block; font-size:11.5px; color:var(--tinte-3); }
.kw-haken{ font-style:normal; font-weight:800; color:var(--orange-dunkel); }
.kw-leer{ display:block; padding:6px 10px; color:var(--tinte-3); }
.kw-alle{ display:block; width:100%; margin-top:6px; padding:9px 10px; border:none; border-top:1px solid var(--linie); background:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--blau); text-align:left; }
.kw-alle:hover{ color:var(--orange-dunkel); }

/* Kampagnenbalken unter der Kopfzeile: ganze Seite gehört zu dieser Kampagne */
.kampagnen-balken{
  position:sticky; top:65px; z-index:4;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 30px; background:var(--orange-sanft); border-bottom:1px solid var(--orange-linie);
}
.kampagnen-balken[hidden]{ display:none; }
.kb-label{ font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--orange-dunkel); }
.kampagnen-balken small{ font-size:12.5px; color:var(--tinte-2); }
.kb-hinweis{ margin-left:auto; font-size:11.5px; color:var(--orange-dunkel); }
@media (max-width:900px){ .kb-hinweis{ display:none; } .kampagnen-balken{ padding:10px 16px; } }
#kampagnen-balken [data-kampagne-bearbeiten]{ margin-left:auto; }
.kampagne-weitere{ display:flex; gap:6px; margin-right:auto; }
.kampagne-weitere .knopf{ white-space:nowrap; }
.formular-knoepfe:has(.kampagne-weitere){ flex-wrap:wrap; }
.kampagne-weitere{ flex-basis:100%; margin:0 0 6px; padding-bottom:12px; border-bottom:1px dashed var(--linie); }
.kampagnen-balken{ flex-wrap:nowrap; }
.kampagnen-balken small{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kampagnen-balken .kw-knopf, .kampagnen-balken .merker, .kb-label{ flex:0 0 auto; }

/* Gesprächsleitfaden */
dialog.leitfaden-fenster{ width:min(620px, calc(100vw - 32px)); }
.leitfaden-kopf{ width:100%; }
.leitfaden-kopf h3{ margin:4px 0 6px; }
.leitfaden{ width:100%; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; counter-reset:none; }
.leitfaden li{ display:flex; gap:12px; align-items:flex-start; background:var(--flaeche); border:1px solid var(--linie); border-radius:12px; padding:12px 14px; }
.lf-nr{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--orange); color:var(--blau); font-weight:800; font-size:14px; display:grid; place-items:center; }
.leitfaden li > div{ flex:1; min-width:0; }
.leitfaden b{ display:block; font-size:12px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--tinte-2); margin:2px 0 3px; }
.leitfaden p{ margin:0; font-size:15px; line-height:1.5; color:var(--tinte); }
.lf-link{ margin-top:6px; border:none; background:none; padding:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--blau); }
.lf-link:hover{ color:var(--orange-dunkel); }
.lf-tipp{ width:100%; font-size:13px; line-height:1.5; color:var(--tinte-2); background:#EEF8F2; border:1px solid #CBEBD8; border-radius:10px; padding:10px 14px; }
.lf-tipp b{ color:var(--gruen); }
.leitfaden.bearbeiten li{ background:var(--weiss); }
.lf-felder{ display:flex; flex-direction:column; gap:6px; }
.lf-felder .eingabe{ width:100%; font-size:14px; }
.lf-felder textarea{ resize:vertical; font:inherit; font-size:14px; }
.leitfaden.bearbeiten .weg{ opacity:1; margin-left:0; }
.formular-text code{ font:600 12px var(--regie-mono); background:var(--blau-sanft); color:var(--blau); border-radius:5px; padding:1px 5px; }
/* Werkzeugleiste: der erste Knopf links (z. B. Gesprächsleitfaden), Admin-Knopf rechts */
.werkzeugleiste > .knopf:first-child{ margin-left:0; }
.leitfaden.kompakt li{ padding:8px 12px; }
.leitfaden.kompakt p{ font-size:13.5px; color:var(--tinte-2); }
.leitfaden.kompakt .lf-nr{ flex-basis:24px; width:24px; height:24px; font-size:12px; }

/* Anruf erfassen: fünf Ergebnisse, ein Klick speichert und schliesst */
dialog.anruf-fenster{ width:min(520px, calc(100vw - 32px)); }
.anruf-ergebnisse{ width:100%; display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.anruf-ergebnis{
  display:flex; align-items:baseline; gap:8px; width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:14.5px; padding:12px 14px; border-radius:10px; border:1px solid var(--linie);
  background:var(--weiss); color:var(--tinte); border-left-width:5px; transition:transform .1s, box-shadow .15s;
}
.anruf-ergebnis b{ font-weight:700; }
.anruf-ergebnis span{ color:var(--tinte-2); }
.anruf-ergebnis:hover{ box-shadow:0 6px 16px -10px rgba(0,60,105,.4); transform:translateY(-1px); }
.anruf-ergebnis.grau{ border-left-color:var(--tinte-3); }
.anruf-ergebnis.rot{ border-left-color:var(--rot); }
.anruf-ergebnis.hellgruen{ border-left-color:#7CCB9E; }
.anruf-ergebnis.gruen{ border-left-color:var(--gruen); background:#EEF8F2; }
.anruf-ergebnis.gruen b{ color:var(--gruen); }
dialog.anruf-fenster textarea{ min-height:0; height:58px; resize:vertical; }

/* Moduleinstellungen: links Module, rechts ihre Vorgaben */
.modul-einstellungen{ grid-template-columns:250px 1fr; align-items:start; }
.modul-liste{ padding:8px; display:flex; flex-direction:column; gap:2px; }
.modul-liste .menue-punkt{ width:100%; }
.modul-liste .menue-punkt span{ flex:1; min-width:0; text-align:left; }
.modul-liste .menue-punkt small{ display:block; font-size:11px; font-weight:500; color:var(--tinte-3); }
.modul-liste .menue-punkt.aus{ color:var(--tinte-3); }
.modul-liste .menue-punkt em{ font-style:normal; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--tinte-3); border:1px solid var(--linie); border-radius:999px; padding:1px 6px; }
.modul-kopf{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.modul-kopf .zeichen{ width:28px; height:28px; flex:0 0 28px; color:var(--blau); --duo:.16; margin-top:2px; }
.modul-kopf h3{ margin:0 0 3px; font-size:19px; }
.modul-kopf small{ font-size:13px; color:var(--tinte-2); }
@media (max-width:900px){ .modul-einstellungen{ grid-template-columns:1fr; } }
.kontakt-notiz{ display:block; font-size:12px; color:var(--tinte-3); margin-top:3px; max-width:260px; }
#inhalt-personen .merker{ white-space:nowrap; }

/* Karten (Leaflet): Übersicht und Gebietswahl */
.karte-box{ height:340px; border-radius:10px; overflow:hidden; border:1px solid var(--linie); background:var(--flaeche); z-index:0; }
.karte-wahl{ width:100%; display:flex; flex-direction:column; gap:8px; }
.karte-wahl-kopf{ display:flex; gap:12px; width:100%; }
.karte-wahl-kopf .formular-feld{ flex:1; }
.karte-wahl input[type=range]{ width:100%; accent-color:var(--orange); margin-top:10px; }
.karte-feld{ height:230px; border-radius:10px; overflow:hidden; border:1px solid var(--linie); background:var(--flaeche); z-index:0; }
.karte-hinweis{ font-size:12px; color:var(--tinte-3); }
.karte-zentrum{ width:16px; height:16px; border-radius:50%; background:var(--orange); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); }
.karte-fehlt{ display:grid; place-items:center; height:100%; color:var(--tinte-3); font-size:13px; }
.leaflet-container{ font:inherit; }

/* Feedback: gut sichtbar unten rechts, links neben dem Live-Punkt */
.feedback-knopf{
  position:fixed; right:calc(var(--regie-breite) + 44px); bottom:10px; z-index:30;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:800; color:var(--blau);
  background:var(--orange); border:none; border-radius:999px; padding:9px 16px 9px 13px;
  box-shadow:0 8px 22px -8px rgba(0,43,76,.55); transition:transform .15s, box-shadow .15s;
}
.feedback-knopf:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(0,43,76,.6); }
.feedback-knopf svg{ width:17px; height:17px; }
body.regie-zu .feedback-knopf{ right:44px; }
body[data-modus="anmeldung"] .feedback-knopf{ display:none; }
dialog.feedback-fenster{ width:min(560px, calc(100vw - 32px)); }
.feedback-kopf{ display:flex; gap:14px; align-items:flex-start; width:100%; }
.feedback-zeichen{ flex:0 0 44px; width:44px; height:44px; border-radius:12px; background:var(--orange-sanft); color:var(--orange-dunkel); display:grid; place-items:center; }
.feedback-zeichen svg{ width:24px; height:24px; }
.feedback-kopf h3{ margin:2px 0 6px; }
.feedback-kopf .formular-text{ margin:0; font-size:13.5px; line-height:1.5; }
.feedback-arten{ display:flex; gap:6px; flex-wrap:wrap; }
.feedback-arten button{ border:1px solid var(--linie); background:var(--weiss); border-radius:999px; padding:7px 14px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--tinte-2); }
.feedback-arten button.aktiv{ background:var(--blau); border-color:var(--blau); color:#fff; }
.feedback-details{ width:100%; font-size:12.5px; color:var(--tinte-2); background:var(--flaeche); border-radius:10px; padding:10px 12px; }
.feedback-details summary{ cursor:pointer; font-weight:700; color:var(--blau); }
.feedback-details dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:10px 0 0; }
.feedback-details dt{ font-weight:700; color:var(--tinte-2); }
.feedback-details dd{ margin:0; overflow-wrap:anywhere; }
.einstellung-breit{ flex-direction:column; align-items:stretch !important; }
.einstellung-breit .eingabe{ width:100%; font-size:13px; }
.feedback-liste-titel{ margin:22px 0 6px; font-size:14px; color:var(--blau); }
body.regie-zu .feedback-knopf{ bottom:62px; }
.feedback-kopf .feedback-antwort{ margin-top:6px; font-size:12.5px; color:var(--tinte-3); }
/* Kartenübersicht über die volle Breite, Liste darunter */
.karten-raster{ grid-template-columns:1fr; }
.karten-raster .karte-box{ height:460px; }
.karten-raster > .karte:last-child .liste{ columns:2; column-gap:28px; }
.karten-raster > .karte:last-child .liste li{ break-inside:avoid; }
@media (max-width:900px){ .karten-raster > .karte:last-child .liste{ columns:1; } .karten-raster .karte-box{ height:320px; } }

/* Plakat erfassen: Pin und Foto */
.pin-wahl{ width:100%; display:flex; flex-direction:column; gap:8px; }
.pin-kopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--tinte-2); }
.pin-kopf b{ color:var(--blau); }
.pin-karte{ height:260px; cursor:crosshair; }
/* Pin: Leaflet setzt die Position per transform, darum steckt die Form in <i> */
.karte-pin{ background:none; border:none; }
.karte-pin i{
  position:absolute; left:3px; top:0; width:28px; height:28px; box-sizing:border-box;
  background:var(--rot); border:3px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 3px 8px rgba(0,0,0,.45);
}
.karte-pin i::after{ content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#fff; }
.karte-pin b{ position:absolute; left:11px; bottom:0; width:12px; height:5px; border-radius:50%; background:rgba(0,0,0,.25); }
.karte-pin.springt i{ animation:pin-springt .45s ease-out; }
@keyframes pin-springt{ 0%{ transform:translateY(-14px) rotate(-45deg); } 60%{ transform:translateY(2px) rotate(-45deg); } 100%{ transform:rotate(-45deg); } }
.foto-wahl{ width:100%; display:flex; gap:14px; align-items:center; }
.foto-vorschau{ width:96px; height:72px; flex:0 0 96px; border-radius:8px; overflow:hidden; border:1px solid var(--linie); background:var(--flaeche); }
.foto-vorschau.leer{ display:grid; place-items:center; font-size:12px; color:var(--tinte-3); border-style:dashed; }
.foto-vorschau img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto-knoepfe{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.foto-knoepfe label.knopf{ cursor:pointer; }
.foto-knoepfe small{ font-size:12px; color:var(--tinte-3); }
.plakat-foto{ flex:0 0 64px; width:64px; height:48px; border-radius:6px; overflow:hidden; display:block; }
.plakat-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.karte-popup{ width:180px; }
.karte-popup img{ width:100%; border-radius:6px; display:block; margin-bottom:6px; }
.karte-zoomhinweis{
  position:absolute; inset:0; z-index:1000; display:grid; place-items:center; pointer-events:none;
  background:rgba(0,43,76,.45); color:#fff; font-weight:700; font-size:15px; opacity:0; transition:opacity .2s;
}
.karte-zoomhinweis.sichtbar{ opacity:1; }

/* Plakate: Ebenen Wild/Paid, Formen auf der Karte */
.plakat-ebenen{ margin-left:auto; display:flex; gap:6px; }
.ebene{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--linie); border-radius:999px; padding:5px 12px 5px 9px; font-size:13px; font-weight:700; color:var(--tinte-3); background:var(--weiss); }
.ebene input{ display:none; }
.ebene i{ width:12px; height:12px; border:2px solid currentColor; }
.ebene.wild i{ border-radius:50%; }
.ebene.paid i{ border-radius:3px; }
.ebene.an{ color:var(--blau); border-color:var(--blau-linie); background:var(--blau-sanft); }
.ebene.an i{ background:var(--blau); border-color:var(--blau); }
.ebene span{ font-weight:600; color:var(--tinte-3); }
.legende i.form-kreis{ background:none !important; border:2px solid var(--tinte-2); border-radius:50%; }
.legende i.form-quadrat{ background:none !important; border:2px solid var(--tinte-2); border-radius:2px; }
.legende-tipp{ margin-left:auto; color:var(--tinte-3); font-style:italic; }
.karte-quadrat i{ display:block; width:15px; height:15px; border:2px solid #fff; border-radius:3px; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.klickbar-karte{ cursor:crosshair; }
.klickbar-karte .leaflet-interactive{ cursor:pointer; }
.legende{ flex-wrap:wrap; } .klickbar-karte.leaflet-container, .klickbar-karte .leaflet-grab{ cursor:crosshair; }
.pin-kopf .knopf{ white-space:nowrap; flex:0 0 auto; }

/* Plakat erfassen: Anzahl je Format */
.formate-wahl{ width:100%; display:flex; flex-direction:column; gap:6px; }
.formate-titel{ font-size:12.5px; font-weight:700; color:var(--blau); }
.formate-titel small{ font-weight:500; color:var(--tinte-3); margin-left:4px; }
.formate-zeile{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.format-zaehler{ display:flex; align-items:center; gap:6px; border:1px solid var(--linie); border-radius:10px; padding:6px 8px; background:var(--weiss); }
.format-zaehler.an{ border-color:var(--orange); background:var(--orange-sanft); }
.format-zaehler b{ flex:1; font-size:13.5px; color:var(--blau); }
.format-zaehler span{ min-width:18px; text-align:center; font-weight:800; font-size:15px; color:var(--tinte); }
.format-zaehler button{ width:30px; height:30px; border-radius:50%; border:1px solid var(--linie); background:var(--weiss); color:var(--blau); font-size:17px; line-height:1; cursor:pointer; padding:0; }
.format-zaehler button:hover{ background:var(--blau-sanft); }

/* Budget */
.menue-schild{ width:12px; height:12px; margin-left:auto; color:var(--blau); opacity:.7; }
.budget-deckung{ margin-bottom:18px; }
.budget-deckung small{ display:block; margin-top:8px; font-size:12.5px; color:var(--tinte-3); }
.budget-tabelle td.zahl, .budget-tabelle th.zahl{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.budget-tabelle td small{ display:block; font-size:12px; color:var(--tinte-3); margin-top:3px; }
.budget-gruppe td{ background:var(--flaeche); font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--tinte-2); padding-top:10px; padding-bottom:10px; }
.budget-gruppe td.zahl{ letter-spacing:0; text-transform:none; font-size:13px; color:var(--blau); }
.budget-total td{ font-weight:800; color:var(--blau); border-top:2px solid var(--blau-linie); }
.budget-tabelle tr.ueber .balken i{ background:var(--rot); }
.budget-tabelle tr.ueber td small{ color:var(--rot); font-weight:700; }
.adresse-hinweis{ font-size:12px; color:var(--tinte-3); margin-top:2px; }
/* Moduleinstellungen Door2Door */
.d2d-vorgaben{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.d2d-vorgaben h4{ margin:0 0 8px; font-size:13px; color:var(--blau); }
.d2d-liste{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.d2d-liste li{ display:flex; align-items:center; gap:8px; font-size:14px; padding:8px 10px; background:var(--flaeche); border-radius:8px; }
.d2d-liste i{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.d2d-titel{ width:100%; margin:6px 0 0; font-size:13px; color:var(--blau); }
.d2d-felder{ flex-direction:row !important; flex-wrap:wrap; align-items:center; }
.d2d-felder .eingabe{ flex:1 1 180px; width:auto; }
.d2d-felder .auswahl{ width:auto; }
@media (max-width:760px){ .d2d-vorgaben{ grid-template-columns:1fr; } }

/* Argumentarium als FAQ mit Akkordeon */
.faq-liste{ padding:6px 20px; }
.faq{ border-top:1px solid var(--linie); }
.faq:first-child{ border-top:none; }
.faq summary{ list-style:none; display:flex; align-items:center; gap:14px; padding:16px 0; cursor:pointer; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--flaeche); color:var(--blau); display:grid; place-items:center; font-weight:700; font-size:17px; transition:transform .2s; }
.faq[open] summary::after{ content:"−"; background:var(--orange); }
.faq-frage{ flex:1; min-width:0; font-size:15.5px; font-weight:700; color:var(--blau); }
.faq summary:hover .faq-frage{ color:var(--orange-dunkel); }
.faq-merker{ display:flex; gap:6px; flex:0 0 auto; }
.faq-antwort{ padding:0 42px 18px 0; }
.faq-antwort p{ margin:0 0 12px; font-size:14.5px; line-height:1.6; color:var(--tinte); }
.faq-fuss{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.faq-fuss small{ font-size:12px; color:var(--tinte-3); }
.reiter button span{ font-size:11px; opacity:.7; margin-left:3px; }
.themen-liste{ flex-direction:row !important; flex-wrap:wrap; }
@media (max-width:760px){ .faq-merker{ display:none; } .faq-antwort{ padding-right:0; } }
.faq-admin{ display:flex; gap:6px; }

/* Plakate: kompakte Liste unter der Karte, eine Zeile pro Standort */
.plakat-tabelle-karte{ padding-top:14px; }
.plakat-filter{ margin-bottom:10px; }
.plakat-filter .eingabe{ max-width:340px; }
.pl-zahl{ margin-left:auto; font-size:12.5px; color:var(--tinte-3); }
.plakat-tabelle{ width:100%; table-layout:fixed; font-size:13.5px; }
.plakat-tabelle th:nth-child(1){ width:44px; }
.plakat-tabelle th:nth-child(3){ width:64px; }
.plakat-tabelle th:nth-child(4){ width:130px; }
.plakat-tabelle th:nth-child(5){ width:110px; }
.plakat-tabelle th:nth-child(6){ width:150px; }
.plakat-tabelle th:nth-child(7){ width:160px; }
.plakat-tabelle td{ padding-top:6px; padding-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; }
.pl-foto a, .pl-foto img{ display:block; width:34px; height:26px; border-radius:4px; object-fit:cover; }
.pl-adresse{ font-weight:600; color:var(--blau); }
.pl-art{ font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:2px 6px; border-radius:4px; border:1.5px solid var(--tinte-3); color:var(--tinte-2); }
.pl-art.wild{ border-radius:999px; }
.pl-formate, .pl-wann{ color:var(--tinte-2); font-size:12.5px; }
.pl-aktion{ text-align:right; }
.pl-aktion .knopf{ padding:4px 10px; font-size:12px; }
@media (max-width:900px){ .plakat-tabelle th:nth-child(4), .plakat-tabelle td:nth-child(4), .plakat-tabelle th:nth-child(6), .plakat-tabelle td:nth-child(6){ display:none; } }
.plakat-tabelle th:nth-child(3){ width:70px; }
.plakat-tabelle th:nth-child(4){ width:120px; }
.plakat-tabelle th:nth-child(5){ width:108px; }
.plakat-tabelle th:nth-child(6){ width:96px; }
.plakat-tabelle th:nth-child(7){ width:150px; }
.pl-art{ padding:2px 5px; font-size:10px; }

/* Materialcenter */
.material-bild{ height:110px !important; }
.material-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.datei-typ{ position:absolute; left:14px; top:12px; z-index:2; font-style:normal; font-size:12px; font-weight:800; letter-spacing:1px; color:#fff; background:rgba(0,0,0,.25); border:1.5px solid rgba(255,255,255,.7); border-radius:5px; padding:3px 7px; }
.material-knoepfe{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
.material-knoepfe a.knopf{ text-decoration:none; }
.material-admin{ margin-left:auto; display:flex; gap:6px; }
.datei-wahl{ width:100%; cursor:pointer; }
.datei-feld{ display:flex; flex-direction:column; gap:3px; border:1.5px dashed var(--orange); background:var(--orange-sanft); border-radius:10px; padding:14px 16px; }
.datei-feld b{ color:var(--orange-dunkel); font-size:14px; overflow-wrap:anywhere; }
.datei-feld small{ color:var(--tinte-2); font-size:12.5px; }
.datei-wahl:hover .datei-feld{ background:#FFE9C7; }
/* Plakatliste: ohne Fotospalte, sortierbare Köpfe */
.plakat-tabelle th:nth-child(1){ width:auto; }
.plakat-tabelle th:nth-child(2){ width:70px; }
.plakat-tabelle th:nth-child(3){ width:120px; }
.plakat-tabelle th:nth-child(4){ width:108px; }
.plakat-tabelle th:nth-child(5){ width:100px; }
.plakat-tabelle th:nth-child(6){ width:150px; }
.plakat-tabelle th:first-child, .plakat-tabelle td:first-child{ padding-left:0; }
.pl-foto{ display:inline-block; vertical-align:middle; margin-right:8px; }
.pl-foto img{ display:block; width:30px; height:22px; border-radius:4px; object-fit:cover; }
.sortier{ border:none; background:none; padding:0; cursor:pointer; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; display:inline-flex; gap:5px; align-items:center; }
.sortier i{ font-style:normal; font-size:9px; opacity:.45; }
.sortier.aktiv{ color:var(--blau); }
.sortier.aktiv i{ opacity:1; color:var(--orange-dunkel); }
.sortier:hover{ color:var(--blau); }
@media (max-width:900px){ .plakat-tabelle th:nth-child(3), .plakat-tabelle td:nth-child(3), .plakat-tabelle th:nth-child(5), .plakat-tabelle td:nth-child(5){ display:none; } .plakat-tabelle th:nth-child(4), .plakat-tabelle td:nth-child(4), .plakat-tabelle th:nth-child(6), .plakat-tabelle td:nth-child(6){ display:table-cell; } }
.material-admin{ margin-left:0; width:100%; flex-wrap:wrap; }
.plakat-tabelle th:nth-child(5){ width:112px; }
.plakat-tabelle th:nth-child(6){ width:178px; }
.pl-aktion{ overflow:visible !important; }

/* Materialcenter: Kaufen und Ausleihen */
.art-schild{ position:absolute; right:12px; top:12px; z-index:2; font-style:normal; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; border-radius:999px; padding:3px 9px; }
.art-schild.kauf{ background:var(--orange); color:var(--blau); }
.art-schild.verleih{ background:#fff; color:var(--blau); }
.mat-preis{ display:block; font-size:14px; font-weight:800; color:var(--blau); margin:2px 0; }
.meine-bestellungen{ margin-bottom:18px; }
.meine-bestellungen .liste li{ align-items:center; }
#inhalt-material .werkzeugleiste .reiter{ margin-right:6px; }

/* Materialcenter: Download ohne Datei (nur Admins sehen es) */
.knopf.warnung{ background:#fff4e5; color:#a65b00; border:1px dashed #f28c00; }

/* Spenden: Aktion, Etappen-Editor, Schnellbeträge */
.spenden-text{ color:var(--tinte-2); margin:-4px 0 18px; font-size:14px; }
.spenden-summe{ display:flex; align-items:baseline; gap:10px; margin-top:24px; padding-top:18px; border-top:1px solid var(--linie); flex-wrap:wrap; }
.spenden-summe > b{ font-size:27px; letter-spacing:-1px; }
.spenden-summe > span{ color:var(--tinte-3); }
.spenden-admin{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.spenden-zu .saeule i{ filter:grayscale(.6); }
.spenden-gruss{ display:block; color:var(--tinte-2); font-style:normal; margin-top:2px; }
.spenden-archiv{ margin-top:12px; border-top:1px solid var(--linie); padding-top:10px; }
.spenden-archiv summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--tinte-3); }
.liste .klickzeile.aktiv{ background:var(--orange-sanft); }
.spenden-schnell{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.schnell-betrag{ border:1px solid var(--linie); background:#fff; border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.schnell-betrag:hover{ border-color:var(--orange); background:var(--orange-sanft); }
.etappen-editor{ margin:6px 0 4px; }
.etappen-titel{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.etappen-titel small{ font-weight:400; color:var(--tinte-3); margin-left:6px; }
.etappen-zeile{ display:grid; grid-template-columns:110px 1fr 1.3fr 32px; gap:6px; margin-bottom:6px; }
.etappen-zeile .eingabe{ min-width:0; }
.etappe-weg{ border:1px solid var(--linie); background:#fff; border-radius:8px; cursor:pointer; font-size:17px; color:var(--tinte-3); }
.etappe-weg:hover:not([disabled]){ color:#c0392b; border-color:#c0392b; }
.etappe-weg[disabled]{ opacity:.35; cursor:default; }
@media (max-width:640px){ .etappen-zeile{ grid-template-columns:90px 1fr 32px; } .etappen-zeile [data-f=text]{ grid-column:1 / -1; grid-row:2; } }

/* Spenden: Dankeschöns (wie Crowdfunding) */
.dank-liste{ list-style:none; margin:0; padding:0; }
.dank-liste li{ padding:11px 12px; margin:0 -12px; border-top:1px solid var(--linie); border-radius:10px; }
.dank-liste li:first-child{ border-top:none; }
.dank-liste li.klickbar{ cursor:pointer; }
.dank-liste li.klickbar:hover{ background:var(--orange-sanft); }
.dank-liste li.weg{ opacity:.5; }
.dank-liste b, .dank-option b{ display:block; font-size:14px; }
.dank-liste small, .dank-option small{ display:block; color:var(--tinte-3); font-size:12.5px; }
.dank-ab{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--orange-dunkel); background:var(--orange-sanft); border-radius:999px; padding:2px 8px; margin-bottom:4px; }
.dank-rest{ display:block; font-style:normal; font-size:12px; font-weight:600; color:var(--tinte-2); margin-top:3px; }
.dank-rest.vergriffen{ color:#c0392b; }
.dank-meins{ margin-top:12px; padding:10px 12px; background:#e8f6ee; border-radius:10px; font-size:13px; }
.dank-wahl{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.dank-wahl .etappen-titel{ grid-column:1 / -1; margin-bottom:0; }
.dank-option{ text-align:left; border:1.5px solid var(--linie); background:#fff; border-radius:12px; padding:10px 12px; cursor:pointer; font:inherit; color:inherit; }
.dank-option:hover:not([disabled]){ border-color:var(--orange); }
.dank-option.aktiv{ border-color:var(--orange); background:var(--orange-sanft); box-shadow:0 0 0 1px var(--orange); }
.dank-option[disabled]{ opacity:.5; cursor:default; }
.dank-option.ohne{ display:flex; flex-direction:column; justify-content:center; }
.dank-editor{ margin-top:14px; }
.dank-zeile{ grid-template-columns:90px 1fr 1.2fr 76px 32px; }
@media (max-width:640px){ .dank-wahl{ grid-template-columns:1fr; } .dank-zeile{ grid-template-columns:80px 1fr 70px 32px; } .dank-zeile [data-d=text]{ grid-column:1 / -1; grid-row:2; } }

/* Spenden: Beitragsliste für Admins */
.beitraege-karte .karte-kopf h3{ display:flex; align-items:center; gap:6px; }
.beitraege-karte .karte-kopf h3 .schild{ width:16px; height:16px; }
.beitraege-tabelle td{ vertical-align:top; }
.beitraege-tabelle .leise-text{ color:var(--tinte-3); }
.dank-liste li.dank-gruppe{ font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--tinte-3); padding:14px 12px 4px; border-top:none; cursor:default; }
.dank-liste li.dank-gruppe:first-child{ padding-top:0; }
.als-wahl{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.als-wahl .etappen-titel{ width:100%; margin-bottom:0; }
.als-wahl button{ flex:1; border:1.5px solid var(--linie); background:#fff; border-radius:12px; padding:9px 12px; font:inherit; font-weight:600; cursor:pointer; color:inherit; }
.als-wahl button.aktiv{ border-color:var(--orange); background:var(--orange-sanft); box-shadow:0 0 0 1px var(--orange); }
.dank-option[hidden]{ display:none; }
.dank-wahl.nur-ohne .dank-option.ohne{ grid-column:1 / -1; }
.dank-zeile{ grid-template-columns:82px 84px 1fr 1.1fr 70px 32px; }
@media (max-width:640px){ .dank-zeile{ grid-template-columns:80px 80px 1fr 32px; } .dank-zeile [data-d=text]{ grid-column:1 / -1; grid-row:2; } .dank-zeile [data-d=anzahl]{ grid-row:2; } }
.spende-merker{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--orange-dunkel); background:var(--orange-sanft); border-radius:999px; padding:2px 7px; vertical-align:1px; }
.spenden-verantwortlich{ margin-left:auto; align-self:center; color:var(--tinte-3); font-size:12.5px; }
dialog.formular.aktion-formular{ width:min(820px, calc(100vw - 32px)); max-width:none; }
.dank-zeile{ grid-template-columns:96px 90px 1fr 1.2fr 76px 32px; }

/* Etappen und Dankeschöns im Aktionsfenster: zweizeilige Blöcke */
.block-zeile{ display:grid; grid-template-columns:120px 1fr 32px; gap:8px 10px; align-items:end; background:var(--flaeche, #f5f7f9); border-radius:12px; padding:10px 12px 12px; margin-bottom:8px; }
.dank-zeile.block-zeile{ grid-template-columns:120px 1fr 124px 32px; }
.block-zeile .mini{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.block-zeile .mini span{ font-size:11px; font-weight:600; color:var(--tinte-3); }
.block-zeile .mini .eingabe{ background:#fff; min-width:0; width:100%; }
.block-zeile .ganz{ grid-column:1 / -1; }
.block-zeile .etappe-weg{ height:40px; }
.dank-gruppe-edit{ margin-top:10px; }
.dank-gruppe-edit > b{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--tinte-3); margin-bottom:6px; }
@media (max-width:640px){ .block-zeile, .dank-zeile.block-zeile{ grid-template-columns:1fr 1fr 32px; } .block-zeile .breit{ grid-column:1 / -1; grid-row:2; } }
.aktion-formular .etappen-editor, dialog.formular .dank-wahl, dialog.formular .als-wahl, dialog.formular .spenden-schnell{ width:100%; }
.warnung-text{ color:#a65b00; font-weight:600; }

/* Plakate: Klick auf einen Punkt in der Karte */
.plakat-popup{ font-size:13px; line-height:1.4; }
.plakat-popup img{ width:100%; max-height:150px; object-fit:cover; border-radius:8px; display:block; margin-bottom:8px; }
.plakat-popup b{ display:block; font-size:14px; margin:6px 0 2px; }
.plakat-popup small{ display:block; color:var(--tinte-3); }
.plakat-popup-knopf{ margin-top:10px; }
.plakat-popup-knopf .knopf{ width:100%; justify-content:center; }
.pl-zeile{ cursor:pointer; }
.pl-zeile:hover td{ background:var(--orange-sanft); }
.leaflet-container .plakat-popup{ font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; }

/* Modulkatalog: Gruppen Basis, Zusatz, Kampagne */
.dekl.basis{ background:var(--blau-sanft); color:var(--blau); }
.katalog-gruppe td{ background:var(--flaeche); padding:12px 14px !important; border-top:2px solid var(--linie); }
.katalog-gruppe b{ font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--blau); margin-right:10px; }
.katalog-gruppe span{ font-size:12.5px; color:var(--tinte-3); }
.katalog-zeile.kampagne .katalog-modul{ border-left:3px solid var(--orange); padding-left:10px; }
.mz.basis{ background:var(--blau-sanft); border:1px solid var(--blau-sanft); color:var(--blau); --duo:.25; }
.mz.gruppe-start{ margin-left:10px; }

/* Gruppenhierarchie: Admin als Hintergrund statt Merker, gewählte Gruppe als Rahmen */
.baum .knoten.rolle-admin{ background:#E6F4EC; }
.baum .knoten.rolle-admin:hover{ background:#D8EEE1; }
.baum .knoten.gewaehlt{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--orange); }
.baum .knoten.gewaehlt.rolle-admin{ background:#E6F4EC; }
.legende-feld{ display:inline-block; width:16px; height:12px; border-radius:4px; vertical-align:-1px; }
.legende-feld.admin{ background:#E6F4EC; border:1px solid #BFE2CC; }
.legende-feld.gewaehlt{ box-shadow:inset 0 0 0 1.5px var(--orange); }

/* Module: Katalog, Freischaltung und Einstellungen zusammen */
.modul-liste-gruppe{ font-size:10.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); padding:12px 12px 4px; }
.modul-liste-gruppe:first-child{ padding-top:2px; }
.modul-kopf p{ margin:4px 0 0; color:var(--tinte-2); font-size:14px; }
.modul-kopf .katalog-hinweis{ margin-top:6px; }
.modul-gruppe{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; border-radius:999px; padding:2px 8px; margin-bottom:4px; }
.modul-gruppe.basis{ background:var(--blau-sanft); color:var(--blau); }
.modul-gruppe.zusatz{ background:var(--flaeche); color:var(--tinte-2); border:1px solid var(--linie); }
.modul-gruppe.kampagne{ background:var(--orange-sanft); color:var(--orange-dunkel); }
.modul-dekl{ display:flex; gap:18px; flex-wrap:wrap; margin:16px 0 12px; font-size:13px; color:var(--tinte-2); }
.modul-dekl > span{ display:inline-flex; align-items:center; gap:6px; }
.modul-status{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; border-radius:12px; padding:12px 14px; margin-bottom:20px; border:1px solid var(--linie); }
.modul-status b{ font-size:14px; }
.modul-status span{ color:var(--tinte-2); font-size:13px; flex:1 1 260px; }
.modul-status .knopf{ margin-left:auto; }
.modul-status.basis{ background:var(--blau-sanft); border-color:var(--blau-sanft); }
.modul-status.eigen{ background:var(--orange-sanft); border-color:#F0B24D; }
.modul-status.erbt{ border-style:dashed; border-color:#F0B24D; }
.modul-status.aus{ background:var(--flaeche); }
.modul-abschnitt{ font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); margin:0 0 10px; padding-top:14px; border-top:1px solid var(--linie); }
#v-freischaltung .gitter.g-haupt{ grid-template-columns:1fr; }

/* Gruppen */
.gruppen-baum .gruppe-knoten{ padding:8px 10px; }
.gruppe-zahlen{ color:var(--tinte-3); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.gruppe-knoepfe{ margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.gruppe-knoepfe .knopf{ opacity:0; transition:opacity .12s; }
.gruppe-knoten:hover .gruppe-knoepfe .knopf, .gruppe-knoepfe .knopf:focus{ opacity:1; }
@media (hover:none){ .gruppe-knoepfe .knopf{ opacity:1; } }
.modul-keine{ margin:0; color:var(--tinte-3); font-size:13.5px; }
.gruppen-baum .gruppe-knoten{ padding:3px 10px; min-height:40px; }
.gruppen-baum .gruppe-knoepfe .knopf{ padding-top:5px; padding-bottom:5px; }

/* ×-Knöpfe in Fenstern (Leitfaden, Door2Door, Kategorien …): einheitlich rund und ruhig */
dialog .weg, .leitfaden.bearbeiten .weg{
  flex:0 0 34px; width:34px; height:34px; margin:3px 0 0 0; padding:0; opacity:1;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--linie); border-radius:10px; background:#fff;
  color:var(--tinte-3); font-size:18px; line-height:1; cursor:pointer;
  transition:color .12s, border-color .12s, background .12s;
}
dialog .weg:hover, .leitfaden.bearbeiten .weg:hover{ color:#c0392b; border-color:#e8b4ad; background:#fdf1ef; }
dialog .weg:disabled{ opacity:.35; cursor:default; }
.einladung-info{ display:block; margin-top:2px; }

/* Gruppe löschen: grosse Warnung */
.gross-warnung{ width:100%; background:#fdecea; border:1.5px solid #e6a39b; border-radius:12px; padding:14px 16px; color:#7a1f14; }
.gross-warnung > b{ display:block; font-size:15px; margin-bottom:4px; }
.gross-warnung p{ margin:0 0 8px; font-size:13.5px; }
.gross-warnung ul{ margin:0; padding-left:18px; font-size:13px; line-height:1.55; }
.gruppe-loeschen .formular-feld span{ color:#7a1f14; }
.gross-warnung p.klein{ margin:10px 0 0; font-size:12.5px; opacity:.85; }
.papierkorb{ margin-top:18px; border:1.5px dashed #c9b3e6; }
.papierkorb .karte-kopf h3{ display:flex; align-items:center; gap:6px; }
.papierkorb .liste li{ gap:8px; }
.gross-warnung .warnung-zwischen{ margin:10px 0 4px; font-weight:700; }
.gross-warnung ul.warnung-zahlen{ list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 16px; }
.gross-warnung ul.warnung-zahlen li{ display:flex; justify-content:space-between; border-bottom:1px dotted #e6a39b; }

/* Mitglied hinzufügen: bestehendes Konto suchen */
.konto-suche{ width:100%; }
.konto-treffer{ list-style:none; margin:6px 0 0; padding:4px; border:1px solid var(--linie); border-radius:12px; background:#fff; }
.konto-treffer button{ width:100%; display:flex; align-items:center; gap:10px; border:none; background:none; padding:7px 8px; border-radius:8px; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.konto-treffer button:hover:not([disabled]){ background:var(--orange-sanft); }
.konto-treffer button[disabled]{ opacity:.55; cursor:default; }
.konto-treffer b{ display:block; font-size:14px; }
.konto-treffer small{ display:block; color:var(--tinte-3); font-size:12px; }
.konto-treffer em{ margin-left:auto; font-style:normal; font-size:11.5px; color:var(--tinte-3); }
.konto-treffer .leer{ padding:8px; color:var(--tinte-3); font-size:13px; }
.konto-oder{ display:flex; align-items:center; gap:10px; margin:14px 0 2px; color:var(--tinte-3); font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
.konto-oder::before, .konto-oder::after{ content:""; flex:1; border-top:1px solid var(--linie); }
.gruppe-knoten.ohne-info b{ color:var(--tinte-3); font-weight:500; }
.gruppe-knoten.ohne-info .stufe{ opacity:.5; }
.legende-feld.ohne{ background:transparent; border:1px dashed var(--linie); }

/* Gruppen: Admins als Chips, vererbte gestrichelt, Mitgliederliste zum Aufklappen */
.gruppe-mg{ border:none; background:none; padding:2px 6px; border-radius:6px; color:var(--tinte-3); font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.gruppe-mg:hover{ background:var(--flaeche); color:var(--blau); text-decoration:underline; }
.admin-chips{ display:flex; flex-wrap:wrap; gap:4px; min-width:0; }
.admin-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; color:var(--blau); background:var(--blau-sanft); border:1px solid var(--blau-sanft); border-radius:999px; padding:2px 8px; white-space:nowrap; }
.admin-chip .schild{ width:11px; height:11px; }
.admin-chip.geerbt{ background:transparent; border:1px dashed #9fb3c8; color:var(--tinte-2); font-weight:500; }
.admin-chip.geerbt small{ color:var(--tinte-3); font-size:10.5px; }
.admin-chip.leer{ background:transparent; border:1px dashed var(--linie); color:var(--tinte-3); font-weight:500; }
.gruppe-mitglieder{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px 64px; padding:10px 12px; background:var(--flaeche); border-radius:10px; }
.mg-chip{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--linie); border-radius:999px; padding:3px 10px 3px 3px; font-size:12.5px; }
.mg-chip .avatar{ width:22px; height:22px; font-size:9.5px; }
.mg-chip small{ color:var(--tinte-3); font-size:11px; }
.mg-chip.admin{ border-color:#b9c9da; }
.gruppe-mitglieder .leise-text{ color:var(--tinte-3); font-size:13px; }
.admin-chip.mehr{ cursor:pointer; background:#fff; border-color:#b9c9da; font:inherit; font-size:11.5px; font-weight:700; color:var(--blau); }
.admin-chip.mehr:hover{ background:var(--blau-sanft); }
.stufen-legende.drei-zeilen{ display:flex; flex-direction:column; gap:8px; }
.stufen-legende .legende-zeile{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }
.stufen-legende .legende-zeile > .legende-feld:not(:first-child), .stufen-legende .legende-zeile > .admin-chip:not(:first-child), .stufen-legende .legende-zeile > .stufe:not(:first-child){ margin-left:12px; }
.gruppen-baum .admin-chips{ flex:1 1 0; min-width:0; }
.stufen-legende.drei-zeilen, .stufen-legende .legende-zeile{ justify-content:flex-start; text-align:left; align-items:flex-start; }
.stufen-legende .legende-zeile{ align-items:center; }
/* Bearbeiten schwebt rechts über der Zeile, damit die Admin-Chips den Platz bekommen */
.gruppen-baum .gruppe-knoten{ position:relative; }
.gruppen-baum .gruppe-knoepfe{ position:absolute; right:8px; top:50%; transform:translateY(-50%); }
dialog .eingabe[readonly]{ background:var(--flaeche); color:var(--tinte-2); cursor:not-allowed; }
.gruppen-baum .gruppe-knoten:hover .gruppe-knoepfe{ background:inherit; box-shadow:-16px 0 12px -4px var(--flaeche); border-radius:8px; }
.anfrage-merker{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#1f7a4d; background:#e6f4ec; border-radius:999px; padding:2px 7px; vertical-align:1px; }
.anfrage-zeile{ background:#f3faf6; border-radius:10px; padding:10px 12px !important; gap:8px; border:1px dashed #9fd3b5; margin-bottom:6px; }
.aufgabe-aktion .knopf + .knopf{ margin-left:6px; }

/* Labels (je Gruppe) */
.label-liste{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.label-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:#5b3a8c; background:#f1ebfa; border:1px solid #ddd0f0; border-radius:999px; padding:2px 9px; margin:0 4px 4px 0; white-space:nowrap; }
.label-chip.gross{ font-size:13px; padding:5px 12px; cursor:pointer; font-family:inherit; margin:0; }
.label-chip.gross:hover{ border-color:#b89be0; }
.label-chip.gross span{ background:#fff; border-radius:999px; padding:0 7px; font-size:11.5px; color:#5b3a8c; }
.label-zelle{ max-width:280px; }
.label-plus{ width:22px; height:22px; border-radius:50%; border:1px dashed #b89be0; background:#fff; color:#5b3a8c; cursor:pointer; font-size:14px; line-height:1; vertical-align:top; }
.label-plus:hover{ background:#f1ebfa; }
.labels-karte{ margin-bottom:18px; }
.marke[data-ziel]{ cursor:pointer; }
.stufen-legende .legende-zeile > .mz:not(:first-child), .stufen-legende .legende-zeile > .legende-admin{ margin-left:12px; }

/* ============================================================
   Werbung (werbung.js): Anzeige auf dem Dashboard und klein unten
   auf jeder Seite. Bewusst neutral grau statt Mitte-Farben, damit
   niemand sie für einen Inhalt der Partei hält. Immer mit «Anzeige».
   ============================================================ */
.werbung-flaeche[hidden]{ display:none; }
#werbung-dash{ margin-bottom:18px; }
#werbung-fuss{ margin:30px 0 56px; }
.werbung{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 18px;
  background:#FAFAF8; border:1px solid #E3E3DE; border-radius:var(--radius); padding:26px 22px 18px;
  color:#3D4247;
}
.werbung-marke{
  position:absolute; top:7px; left:14px; display:flex; align-items:center; gap:2px;
  font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#8E959B;
}
.werbung-marke .info{ transform:scale(.85); }
.werbung-logo{
  display:grid; place-items:center; width:58px; height:58px; border-radius:12px;
  color:#fff; font-weight:800; font-size:19px; letter-spacing:.5px;
}
.werbung-logo.mini{ width:34px; height:34px; border-radius:8px; font-size:12px; flex:0 0 34px; }
.werbung-bild{ width:96px; height:64px; object-fit:cover; border-radius:10px; }
.werbung-text small{ display:block; font-size:12px; color:#8E959B; font-weight:600; }
.werbung-text b{ display:block; font-size:16px; color:#16181A; margin-top:1px; }
.werbung-text p{ margin:4px 0 0; font-size:13.5px; line-height:1.45; color:#5B6167; }
.werbung-knopf{
  display:inline-block; padding:9px 16px; border-radius:12px; border:1px solid #D2D2CB; background:#fff;
  color:#16181A; font-weight:700; font-size:13.5px; text-decoration:none; white-space:nowrap; cursor:pointer;
}
.werbung-knopf:hover{ background:#F1F1ED; }
.werbung.klein{ padding:22px 16px 12px; gap:4px 14px; }
.werbung.klein .werbung-logo{ width:40px; height:40px; border-radius:9px; font-size:14px; }
.werbung.klein .werbung-bild{ width:64px; height:42px; }
.werbung.klein .werbung-text b{ font-size:14px; }
.werbung.klein .werbung-knopf{ padding:7px 13px; font-size:12.5px; }
@media (max-width:640px){
  .werbung{ grid-template-columns:auto 1fr; align-items:start; }
  .werbung-knopf{ grid-column:1 / -1; justify-self:start; }
}
/* Support › Werbung */
.werbung-erklaerung{ margin:0 0 12px; color:var(--tinte-2); font-size:13.5px; }
.werbung-liste li{ gap:12px; flex-wrap:wrap; }
.werbung-liste li .haupt{ flex:1 1 300px; }
.werbung-aktionen{ display:flex; gap:6px; flex-wrap:wrap; width:100%; padding-left:46px; }
dialog.formular input[type="color"]{ height:44px; padding:4px 6px; cursor:pointer; }
.werbung-vorschau-titel{ display:block; font-size:10.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--tinte-3); margin-bottom:8px; }
dialog.formular.breit{ width:min(720px, calc(100vw - 32px)); }
dialog.formular.breit .formular-zahl{ background:var(--flaeche); }
dialog.formular.breit .formular-zahl .werbung{ background:#fff; }
.fehler-text{ color:var(--rot); font-weight:600; }