:root{
  --grund:#0f1117; --flaeche:#171a23; --flaeche2:#1f2330; --rand:#2a2f3e;
  --tinte:#e8e9f0; --tinte2:#a9adbd; --akzent:#9d8cff; --akzent2:#c5b8ff;
  --radius:14px; --breite:1040px;
}
@media (prefers-color-scheme: light){
  :root{ --grund:#f7f7fb; --flaeche:#ffffff; --flaeche2:#eeeef6; --rand:#dddfe8; --tinte:#15171f; --tinte2:#565b6b; --akzent:#5b46e0; --akzent2:#3d2fb0; }
}
*{box-sizing:border-box}
html{color-scheme:dark light}
body{margin:0;background:var(--grund);color:var(--tinte);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--akzent2);text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:.92em}
code{background:var(--flaeche2);padding:.1em .4em;border-radius:6px}
pre{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:16px 18px;overflow:auto;line-height:1.5}
pre code{background:none;padding:0}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Kopf (wie im Arcade): klebt oben unterhalb von Statusleiste und Dynamic Island, reicht über die ganze Breite, der Inhalt
   fluchtet mit der Spalte (--breite); matter Hintergrund, gleiche Höhe auf allen Seiten. */
.kopf{position:sticky;top:0;z-index:40;min-height:calc(64px + env(safe-area-inset-top));padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;padding-left:max(16px,env(safe-area-inset-left),calc((100% - var(--breite)) / 2 + 16px));padding-right:max(16px,env(safe-area-inset-right),calc((100% - var(--breite)) / 2 + 16px));background:color-mix(in srgb,var(--grund) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--rand) 60%,transparent)}
.marke{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--tinte);font-size:1.1em;white-space:nowrap;min-width:0}
.marke img{border-radius:9px}
.kopf nav{display:flex;gap:4px}
.kopf nav a{padding:8px 12px;border-radius:999px;color:var(--tinte2)}
.kopf nav a:hover{background:var(--flaeche2);text-decoration:none;color:var(--tinte)}
.kopf nav a.aktiv{background:var(--flaeche2);color:var(--tinte)}
main{max-width:var(--breite);margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 40px max(16px,env(safe-area-inset-left))}
.buehne{padding:56px 0 24px}
.vorzeile{color:var(--akzent2);font-weight:600;letter-spacing:.02em;margin:0 0 8px;font-size:.95em}
h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.1;margin:0 0 18px;letter-spacing:-.01em}
h2{font-size:1.55rem;margin:0 0 12px}
h3{font-size:1.1rem;margin:0 0 6px}
.lead{font-size:1.2em;max-width:52ch;margin:0 0 12px}
.en{color:var(--tinte2);font-style:italic;max-width:60ch;margin:0 0 18px}
.taten{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.knopf{display:inline-block;background:var(--akzent);color:#fff;padding:10px 18px;border-radius:999px;font-weight:600}
.knopf:hover{text-decoration:none;filter:brightness(1.08)}
.knopf.leise{background:var(--flaeche2);color:var(--tinte)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.karte{display:block;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:20px 22px;color:var(--tinte)}
a.karte:hover{text-decoration:none;border-color:var(--akzent)}
.karte h2{font-size:1.25rem;margin-bottom:8px}
.karte p{margin:0 0 8px;color:var(--tinte2)}
.abschnitt{padding:28px 0;border-top:1px solid var(--rand)}
.abschnitt:first-child{border-top:0}
.spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.spalten p{margin:0;color:var(--tinte2)}
figure{margin:0}
figure img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--rand);display:block}
figcaption{color:var(--tinte2);font-size:.95em;margin-top:8px}
.tabelle{width:100%;border-collapse:collapse;background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}
.tabelle th,.tabelle td{text-align:left;padding:10px 12px;vertical-align:top;border-top:1px solid var(--rand)}
.tabelle th{background:var(--flaeche2);border-top:0}
.schritte li{margin:8px 0}
.klein{color:var(--tinte2);font-size:.9em}
.fuss{max-width:var(--breite);margin:0 auto;padding:24px max(16px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--rand);color:var(--tinte2)}
.fuss p{margin:6px 0}
@media (max-width:600px){ body{font-size:16px} .buehne{padding:28px 0 16px} .lead{font-size:1.1em} }

/* (Das Seitenmenü ist seit 30.09. weg: eine Seite, ein Kopf.) */
.menue{display:none;position:relative}
.menue summary{list-style:none;white-space:nowrap;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:var(--flaeche2);border:1px solid var(--rand);color:var(--tinte);font-weight:600;cursor:pointer;user-select:none;-webkit-user-select:none}
.menue summary::-webkit-details-marker{display:none}
.menue .striche{width:16px;height:12px;background:linear-gradient(currentColor 0 0) top/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) bottom/100% 2px no-repeat;border-radius:1px}
.menue[open] .striche{background:linear-gradient(45deg,transparent 45%,currentColor 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45% 55%,transparent 55%)}
.menue nav{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:2px;min-width:200px;padding:8px;border-radius:16px;background:var(--flaeche);border:1px solid var(--rand);box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.menue nav a{padding:10px 14px;border-radius:10px}
@media (max-width:760px){ .kopf nav.breit{display:none} .menue{display:block} .marke{font-size:1.02em} }

/* ---- Matrix Forms: Kopf, Karten, Formulare, Editor, Umfrage, Auswertung ---- */
[hidden]{display:none !important}   /* das hidden-Attribut schlägt jede display-Regel (die Karte hatte display:block) */
.kopfrechts{display:flex;align-items:center;gap:8px;flex:none}
.marke{flex:1 1 auto;overflow:hidden} .marke .wort{overflow:hidden;text-overflow:ellipsis}
.kopflink{padding:8px 14px;border-radius:999px;color:var(--tinte2);font-weight:600} .kopflink:hover{background:var(--flaeche2);text-decoration:none;color:var(--tinte)}
@media (max-width:600px){ .kopflink{display:none} }
.kontoknopf{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:.95em;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer}
.kontoknopf:not(.angemeldet){padding-left:14px;background:var(--akzent);border-color:var(--akzent);color:#fff} .kontoknopf.angemeldet{border-color:var(--akzent)}
.kreis{--h:250;flex:none;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;background:linear-gradient(145deg,hsl(var(--h) 60% 58%),hsl(var(--h) 55% 42%))} .kreis[hidden]{display:none}
.buehne{padding:40px 0 12px}
.karte{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:22px}
.karte h2{font-size:1.25rem;margin:0 0 10px}
.zweispaltig{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start;margin:20px 0 32px}
.feld{display:block;margin-bottom:12px} .feld > span{display:block;font-size:.88em;color:var(--tinte2);margin-bottom:4px}
input[type=text],input[type=password],input[type=number],textarea,select{width:100%;font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
textarea{resize:vertical;min-height:80px}
.taten{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0;align-items:center}
button.knopf{font:inherit;font-weight:600;border:0;cursor:pointer} .knopf:disabled{opacity:.5;cursor:default}
.knopf.klein{padding:7px 12px;font-size:.88em;color:#fff} .knopf.leise.klein{color:var(--tinte)} .knopf.gefaehrlich{background:#e5453a;color:#fff}   /* «.klein» ist auch die graue Kleinschrift: ohne eigene Farbe wird die Pille grau auf violett (Rüge 30.09.) */
.textknopf{background:none;border:0;font:inherit;font-weight:600;color:var(--tinte2);cursor:pointer;padding:6px 4px;text-decoration:underline;text-underline-offset:3px} .textknopf:hover{color:var(--tinte)}
.fehler{color:#ff7a7a;margin:10px 0 0;font-weight:600} .fehler[hidden]{display:none}
.hinweis{padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche2));font-weight:600}
.honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0;pointer-events:none}
/* Liste meiner Umfragen. */
.liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--flaeche);border:1px solid var(--rand)}
.liste .titel{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .liste .meta{color:var(--tinte2);font-size:.9em}
.liste .taten{margin:0;grid-column:1/-1} .liste .zu{color:var(--tinte2);font-weight:600;font-size:.85em;padding:2px 8px;border-radius:999px;background:var(--flaeche2)} .liste .zu.offen{color:#1f7a3a;background:color-mix(in srgb,#3aa655 14%,var(--flaeche2))} @media (prefers-color-scheme: dark){ .liste .zu.offen{color:#6fd68c} }   /* vorher #3aa655 auf Grau: 2,7:1 (Kontrastprobe 01.10.) */
/* Editor. */
.frage{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:16px 18px;display:grid;gap:10px;margin-bottom:12px}
.frage .kopf2{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .frage .nr{font-weight:800;color:var(--akzent);min-width:1.6em}
.frage .kopf2 select{width:auto;flex:none;padding:7px 10px} .frage .kopf2 .schieben{margin-left:auto;display:flex;gap:4px}
.frage .optionen{display:grid;gap:6px} .frage .option{display:flex;gap:6px;align-items:center} .frage .option input{flex:1}
.knopfklein{font:inherit;font-weight:700;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);border-radius:10px;padding:6px 10px;cursor:pointer;line-height:1} .knopfklein:hover{border-color:var(--akzent)}
.schalter{display:inline-flex;align-items:center;gap:8px;font-size:.92em;color:var(--tinte2);cursor:pointer} .schalter input{width:auto;accent-color:var(--akzent)}
.frage .zeile{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .frage .zeile label{display:flex;align-items:center;gap:6px;font-size:.9em;color:var(--tinte2)} .frage .zeile input[type=number],.frage .zeile input[type=text]{width:6em;padding:7px 10px} .frage .zeile input.breit{width:10em}
.typen{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.typen button{font:inherit;font-weight:600;font-size:.92em;padding:9px 14px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche);color:var(--tinte);cursor:pointer} .typen button:hover{border-color:var(--akzent)}
.leiste{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--grund) 85%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--rand)}
.leiste .stand{color:var(--tinte2);font-size:.9em;margin-left:auto}
.teilen{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--flaeche2)} .teilen code{display:block;padding:8px 10px;border-radius:10px;background:var(--flaeche);word-break:break-all;font-size:.95em}
/* Ausfüllen. */
.umfrage .frage{gap:8px} .umfrage .ftext{font-weight:700;font-size:1.05rem;margin:0} .umfrage .ftext .pflicht{color:#e5453a} .umfrage .hilfe{margin:-4px 0 0;color:var(--tinte2);font-size:.92em}
.wahlen{display:grid;gap:6px} .wahl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--flaeche2);cursor:pointer;border:1px solid transparent} .wahl:has(input:checked){border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche2))} .wahl input{width:auto;accent-color:var(--akzent);margin:0}
.wahl .eigene{flex:1;padding:6px 10px}
.skala{display:flex;gap:6px;flex-wrap:wrap} .skala label{flex:1 1 0;min-width:40px;text-align:center;padding:10px 4px;border-radius:12px;background:var(--flaeche2);cursor:pointer;font-weight:700;border:1px solid transparent} .skala label:has(input:checked){border-color:var(--akzent);background:color-mix(in srgb,var(--akzent) 18%,var(--flaeche2))} .skala input{display:none}
.skalaenden{display:flex;justify-content:space-between;color:var(--tinte2);font-size:.85em}
.dank{text-align:center;padding:30px 20px} .dank h2{font-size:1.6rem;margin:0 0 8px}
/* Auswertung. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.kachel{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:14px 10px;text-align:center;display:grid;gap:2px} .kachel b{font-size:1.5rem;line-height:1.1;font-variant-numeric:tabular-nums} .kachel small{color:var(--tinte2);font-size:.85em}
.aw{display:grid;gap:14px} .aw .frage{gap:10px} .aw .frage p{margin:0} .aw .ftext{font-weight:700;font-size:1.05rem}   /* Fragetitel fett, kein Luftloch unter dem Titel (Gipfeli-Probe 30.09.) */
.balken{display:grid;gap:6px} .balken .b{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font-size:.95em} .balken .b .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .balken .b .spur{grid-column:1/-1;height:10px;border-radius:5px;background:var(--flaeche2);overflow:hidden} .balken .b .spur i{display:block;height:100%;border-radius:5px;background:var(--akzent)} .balken .b .n{color:var(--tinte2);font-variant-numeric:tabular-nums;white-space:nowrap}
.donutzeile{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .donut{width:120px;height:120px;flex:none} .legende{display:grid;gap:4px;font-size:.95em} .legende span{display:flex;align-items:center;gap:8px} .legende i{width:12px;height:12px;border-radius:3px;flex:none}
.saeulen{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:18px} .saeulen div{flex:1 1 0;display:grid;grid-template-rows:1fr auto;align-items:end;justify-items:center;gap:4px;height:100%;position:relative} .saeulen i{display:block;width:100%;background:var(--akzent);border-radius:6px 6px 0 0;min-height:2px} .saeulen small{color:var(--tinte2);font-size:.8em} .saeulen b{position:absolute;top:-16px;font-size:.78em;color:var(--tinte2);font-weight:600}
.texte{list-style:none;margin:0;padding:0;display:grid;gap:6px} .texte li{padding:8px 12px;border-radius:12px;background:var(--flaeche2)}
.leer{color:var(--tinte2)}
@media (max-width:600px){ body{font-size:16px} .buehne{padding:24px 0 8px} .karte{padding:16px} .frage{padding:14px} }

/* Nachtrag 30.09. (Notizen aus der Gipfeli-Probe): Abschnitte, Handy-Editor, fehlende Pflichtfrage, Zusammenfassung, Legende. */
.abschnittkopf{padding:22px 4px 6px} .abschnittkopf h2{font-size:1.35rem;margin:0 0 4px} .abschnittkopf p{margin:0;color:var(--tinte2)}
.frage.abschnitt{border-left:4px solid var(--akzent)}
.frage .kopf2{flex-wrap:nowrap} .frage .kopf2 select{flex:1 1 0;width:0;min-width:0} .frage .kopf2 .schieben{margin-left:0;flex:none} .frage .kopf2 .knopfklein{padding:6px 7px;font-size:.85em}   /* Typ links schrumpfbar (width:0, sonst hält es seine Eigenbreite und die Seite wird 39 px zu breit), Knöpfe rechts in einer Zeile */
@media (max-width:420px){ .knopfklein{padding:6px 7px} .frage .kopf2{gap:5px} }
.leiste{margin-top:16px} #editor{padding-bottom:20px}
.zeile2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.frage.fehlt{border-color:#e5453a;box-shadow:0 0 0 3px color-mix(in srgb,#e5453a 25%,transparent)}
.zusammenfassung{text-align:left;margin-top:22px} .zusammenfassung h3{font-size:1rem;color:var(--tinte2);margin:0 0 8px} .zusammenfassung b{display:block;font-size:.88em;color:var(--tinte2)}
@media (min-width:600px){ .legende{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px} }

/* ---- Lebenslauf: Editor ---- */
.listentitel{font-size:1.1rem;color:var(--tinte2);margin:22px 0 8px}
.station{display:grid;gap:8px;padding:12px;border-radius:12px;background:var(--flaeche2);margin-bottom:8px} .stationszeile{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .stationszeile input,.stationszeile select{flex:1 1 160px;min-width:0;padding:8px 10px;background:var(--flaeche)} .stationszeile .kurz{flex:0 1 110px} .station textarea{background:var(--flaeche);min-height:60px}
.stationstaten{display:flex;gap:4px;margin-left:auto} .karte h3{margin:0 0 10px;font-size:1.1rem}
.stufen{display:flex;gap:4px} .stufe{width:22px;height:22px;border-radius:50%;border:2px solid var(--akzent);background:transparent;cursor:pointer;padding:0} .stufe.voll{background:var(--akzent)}
.fotozeile{display:flex;gap:14px;align-items:center;margin-top:6px} .fotovorschau{width:84px;height:84px;border-radius:14px;background:var(--flaeche2);display:grid;place-items:center;overflow:hidden;flex:none} .fotovorschau img{width:100%;height:100%;object-fit:cover} .fotozeile .klein{margin:6px 0 0}
label.knopf{display:inline-block;cursor:pointer}
.chips2{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px} .chip2{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--flaeche2);font-size:.92em} .chip2 button{border:0;background:none;color:var(--tinte2);cursor:pointer;font:inherit;padding:0 2px}
.suchzeile{display:flex;gap:6px} .suchzeile input{flex:1;min-width:0}
/* ---- Lebenslauf: Ansicht (Blatt) ---- */
body[data-akzent=violett]{--cv:#5b46e0} body[data-akzent=blau]{--cv:#1f6fd6} body[data-akzent=gruen]{--cv:#2f8f4e} body[data-akzent=grau]{--cv:#4b5062} body[data-akzent=rot]{--cv:#c9463d}
.cvmain{max-width:900px}
.blatt{display:grid;grid-template-columns:250px minmax(0,1fr);background:#fff;color:#1a1c24;border-radius:6px;box-shadow:0 20px 60px -30px rgba(0,0,0,.5);overflow:hidden;margin:16px 0 40px}
.seitenleiste{background:color-mix(in srgb,var(--cv) 8%,#fff);padding:28px 22px;display:grid;gap:22px;align-content:start;border-right:4px solid var(--cv)}
.seitenleiste .foto{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.seitenleiste h3,.hauptteil h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cv);margin:0 0 8px} .seitenleiste .block p{margin:0 0 4px;font-size:.92em;word-break:break-word} .seitenleiste a{color:inherit}
.seitenleiste{min-width:0} .seitenleiste > *{min-width:0} .seitenleiste .block p{overflow-wrap:break-word}
.faehigkeit,.sprache{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.92em;margin:0 0 5px} .faehigkeit,.sprache{flex-wrap:wrap} .faehigkeit > span:first-child,.sprache > span:first-child{flex:1 1 0;min-width:auto;overflow-wrap:break-word} .punkte,.niveau{flex:none;margin-left:auto}   /* Basis 0 + min-content: der Name bricht wortweise um und die Punkte bleiben rechts; erst wenn das längste Wort plus Punkte nicht in die Spalte passt, rutschen die Punkte in die nächste Zeile */   /* lange Namen brechen um, Punkte und Niveau bleiben in der Spalte (Gipfeli-Lebenslauf 30.09.) */ .punkte{display:flex;gap:3px} .punkte i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--cv) 25%,#fff)} .punkte i.voll{background:var(--cv)} .niveau{color:var(--cv);font-weight:700;font-size:.85em}
.chips3{display:flex;flex-wrap:wrap;gap:5px} .chips3 span{padding:3px 9px;border-radius:999px;background:#fff;border:1px solid color-mix(in srgb,var(--cv) 35%,#fff);font-size:.85em}
.hauptteil{padding:32px 34px;display:grid;gap:22px;align-content:start} .cvkopf h1{font-size:2rem;margin:0;line-height:1.1;letter-spacing:-.01em} .cvkopf .beruf{margin:6px 0 0;color:var(--cv);font-weight:700;font-size:1.05rem}
.profiltext{margin:0;line-height:1.55}
.station2{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;margin:0 0 12px} .station2 .zeit{color:#6b6f80;font-size:.9em;padding-top:2px} .station2 .inhalt b{display:block} .station2 .unter{color:#6b6f80;font-size:.92em} .station2 p{margin:4px 0 0;font-size:.95em;line-height:1.5}
@media (max-width:640px){ .blatt{grid-template-columns:1fr} .seitenleiste{border-right:0;border-top:4px solid var(--cv);order:2} .hauptteil{padding:24px 20px} .station2{grid-template-columns:1fr} }
@media (prefers-color-scheme: dark){ .cvseite{background:#0f1117} }
@media print{ .kopf,.fuss,#taten{display:none !important} body,.cvseite{background:#fff !important;font-size:12.5px} .cvmain{max-width:none;padding:0;margin:0} .blatt{box-shadow:none;border-radius:0;margin:0;grid-template-columns:200px 1fr} .hauptteil,.seitenleiste{padding:22px 24px} @page{size:A4;margin:12mm} .station2,.block{break-inside:avoid} }
.cvtaten{margin:14px 0 0}   /* die Knöpfe der Ansicht unter dem Kopf, nicht darin: auf dem Handy verdrängten sie die Marke */

/* ---- Familie Frage (aus der Arcade übernommen, 30.09.) ---- */
@keyframes dialogAuf{from{opacity:0;transform:translateY(10px) scale(.97)}} @keyframes dialogZu{to{opacity:0;transform:translateY(8px) scale(.97)}} @keyframes vorhangZu{to{opacity:0}}
/* Familie Frage (frage.js): das Rückfrage-Blatt statt confirm/prompt/alert; gleiche Bewegung wie der Profildialog. */
.fragedialog{border:0;border-radius:20px;padding:0;background:var(--flaeche);color:var(--tinte);width:min(92vw,400px);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fragedialog::backdrop{background:rgba(10,12,20,.55);backdrop-filter:blur(3px)}
.fragedialog[open]{animation:dialogAuf .22s cubic-bezier(.2,.8,.3,1.1)} .fragedialog.zu{animation:dialogZu .18s ease forwards} .fragedialog.zu::backdrop{animation:vorhangZu .18s ease forwards}
.fragekarte{padding:20px 20px 18px;display:grid;gap:12px} .fragetitel{margin:0;font-weight:800;font-size:1.15rem} .fragetitel[hidden]{display:none} .fragetext{margin:0;font-weight:600;line-height:1.4}
.fragefeld:empty{display:none} .fragefeld input{width:100%;font:inherit;padding:11px 14px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte)}
.fragetaten{display:flex;gap:8px;margin-top:2px} .fragetaten .knopf{flex:1 1 0;min-width:0;padding-inline:12px;white-space:normal;line-height:1.15} .fragetaten .knopf.gefaehrlich{background:#e5453a}
@media (prefers-reduced-motion: reduce){ .fragedialog[open],.fragedialog.zu{animation:none} }
.fragetaten .knopf.leise{background:var(--flaeche2);color:var(--tinte)}

/* Familie Seiten (Umfrage mit Abschnitten): Fortschritt oben, eine Seite auf einmal. */
.fortschritt{display:grid;gap:6px;margin:0 0 14px} .fortschritt[hidden]{display:none} .fortschrittbalken{height:8px;border-radius:4px;background:var(--flaeche2);overflow:hidden} .fortschrittbalken i{display:block;height:100%;background:var(--akzent);border-radius:4px;transition:width .25s} .fortschritt .klein{margin:0}
.seite[hidden]{display:none} .umfrage .taten .knopf[hidden]{display:none}

/* Abstände (30.09., dritte Rüge): gestapelte Karten und Stationen berühren sich nie. Gilt für alle Seiten. */
main > .karte + .karte,.mitpanel .inhalt > .karte + .karte,.mitpanel .inhalt > .karte + #schlussplatz{margin-top:16px}   /* gestapelte Karten brauchen Luft (Rüge 30.09.); die Leiste liegt in .panel mit gap */
.mitpanel .inhalt > .karte{margin-bottom:0} .mitpanel .inhalt > .buehne + .karte{margin-top:6px}
.station{margin-bottom:12px} .stationszeile{gap:8px} .station + .textknopf{margin-top:4px}
.frage + .frage{margin-top:12px}

/* Sichtbarkeit (Freundschaften gelten überall): drei Wahlen, darunter die Freunde zum Anhaken. */
.untertitel2{font-size:1rem;color:var(--tinte2);margin:16px 0 8px}
.sichtbar{display:grid;gap:6px} .sichtbar .wahl{align-items:flex-start} .sichtbar .wahl input{margin-top:5px} .sichtbar .wahl b{display:block} .sichtbar .wahl small{color:var(--tinte2)}
.freundewahl{display:grid;gap:6px;padding:10px 12px;border-radius:12px;border:1px dashed var(--rand)} .freundewahl[hidden]{display:none} .freundewahl .wahl{padding:8px 10px} .freundewahl .klein{margin:0}

/* Familie Panel (panel.js): Einstellungen neben dem Inhalt. Laptop: Spalte links oder rechts (html[data-panel]), klebend;
   Handy: Blatt von rechts, geöffnet über «Einstellungen» im Kopf; die Speichern-Leiste (#schluss) wandert per JS. */
body[data-seite=editor],body[data-seite=lebenslauf]{--breite:1180px}
.mitpanel{display:grid;gap:24px;align-items:start} .mitpanel .inhalt{min-width:0}
.panel{display:grid;gap:12px;align-content:start} .panel > * + *{margin-top:0}
.panelkopf{display:flex;align-items:center;justify-content:space-between;gap:8px} .panelkopf b{font-size:1.05em}
.panelknopf{font:inherit;font-weight:600;font-size:.95em;padding:7px 14px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer}
body:has(#editor[hidden]) .panelknopf,body:has(#cveditor[hidden]) .panelknopf{display:none}
@media (min-width:900px){
  .mitpanel{grid-template-columns:minmax(0,1fr) 360px} html[data-panel=links] .mitpanel{grid-template-columns:360px minmax(0,1fr)} html[data-panel=links] .mitpanel .panel{order:-1}
  .panel{position:sticky;top:calc(80px + env(safe-area-inset-top));max-height:calc(100vh - 96px - env(safe-area-inset-top));overflow:auto;padding-bottom:4px}
  .panelkopf{display:none} .panelknopf{display:none} .panel .leiste{position:static;background:none;backdrop-filter:none;margin-top:0;padding:4px 0 0}
  .panel #panelseite{justify-self:start}
}
@media (max-width:899px){
  .panel{position:fixed;top:0;bottom:0;right:0;width:min(88vw,380px);z-index:60;background:var(--grund);border-left:1px solid var(--rand);padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));overflow:auto;transform:translateX(102%);transition:transform .25s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 60px rgba(0,0,0,.4)}
  .panel.offen{transform:none} .panel .karte{padding:16px} #panelseite{display:none}
  .panelschleier{position:fixed;inset:0;z-index:55;background:rgba(10,12,20,.55);opacity:0;pointer-events:none;transition:opacity .25s} .panelschleier.offen{opacity:1;pointer-events:auto}
  body.paneloffen{overflow:hidden}
}
@media (prefers-reduced-motion: reduce){ .panel,.panelschleier{transition:none} }

/* Einladungskarten (einladung.js): die Karte mit Farbband und Kalenderblatt, Antwortknöpfe, Gästeliste, Datumsvorschläge. */
.einl{max-width:760px}
.einlkarte{background:var(--flaeche);border:1px solid var(--rand);border-radius:22px;overflow:hidden;margin:16px 0 24px}
.einlband{background:linear-gradient(135deg,var(--cv),color-mix(in srgb,var(--cv) 55%,#101018));color:#fff;padding:26px 24px 22px}
.einlband .art{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin:0 0 6px;font-weight:700} .einlband h1{margin:0;font-size:clamp(1.7rem,5vw,2.5rem);line-height:1.1;color:#fff} .einlband .von{margin:8px 0 0;opacity:.9}
.einlinhalt{padding:20px 24px;display:grid;gap:18px}
.datumzeile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.kalender{width:74px;border-radius:14px;overflow:hidden;border:1px solid var(--rand);text-align:center;background:var(--flaeche2);flex:none}
.kalender .monat{background:var(--cv);color:#fff;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 0;font-weight:700} .kalender .tag{font-size:1.9rem;font-weight:800;line-height:1.15;padding:4px 0 0} .kalender .woche{font-size:.75rem;color:var(--tinte2);padding-bottom:6px}
.wann b{font-size:1.1em} .wann p{margin:2px 0 0} .verschoben{color:var(--tinte2);font-size:.9em;margin:0}
.einltext p{margin:0 0 8px} .einltext p:last-child{margin:0}
.einlteil h2{font-size:1.05rem;margin:0 0 8px}
.antwortknoepfe{display:flex;gap:8px;flex-wrap:wrap} .antwortknoepfe .knopf{flex:1 1 0;min-width:100px;text-align:center;background:var(--flaeche2);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--rand)}
.antwortknoepfe .knopf.gewaehlt.ja{background:#3aa655;color:#fff} .antwortknoepfe .knopf.gewaehlt.vielleicht{background:#b58a19;color:#fff} .antwortknoepfe .knopf.gewaehlt.nein{background:#d9534f;color:#fff}
.antwortzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:10px} .antwortzeile .feld{margin:0}
.antwortstand{margin:10px 0 0;font-weight:600}
.gaeste{display:flex;flex-wrap:wrap;gap:6px} .gast{display:inline-flex;align-items:baseline;gap:4px;padding:5px 10px;border-radius:999px;background:var(--flaeche2);font-size:.92em} .gast span{color:var(--tinte2)} .gast.vielleicht{opacity:.8} .gast.nein b{text-decoration:line-through;color:var(--tinte2)}
.vorschlaege{display:grid;gap:8px} .vorschlag{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--flaeche2)} .vorschlag small{color:var(--tinte2)} .vorschlag .taten{margin:0}
.vorschlagform{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:10px} .vorschlagform .feld{margin:0} @media (max-width:520px){ .vorschlagform{grid-template-columns:1fr 1fr} .vorschlagform .knopf{grid-column:1/-1} }
.einlkarte .taten{margin-top:0}

/* Etiketten (Rezeptkopf, später auch anderswo): kleine Pillen in einer Reihe; die Klasse fehlte in Forms, die Wörter klebten aneinander (01.10.). */
.etiketten{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px} .etikett{font-size:.85em;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--flaeche2);border:1px solid var(--rand);color:var(--tinte2)}
/* Rezepte (rezept.js): Editor-Zeilen für Zutaten und Schritte; Ansicht mit Bild, Kopf, Portionenrechner, Haken. */
.zutatzeile{display:grid;grid-template-columns:72px 90px minmax(0,1fr) auto auto;gap:6px;align-items:center;margin-bottom:8px} .zutatzeile input{width:100%;min-width:0}
@media (max-width:520px){ .zutatzeile{grid-template-columns:64px 76px minmax(0,1fr)} .zutatzeile .knopfklein{grid-row:2} .zutatzeile .knopfklein:nth-last-child(2){grid-column:1} .zutatzeile .knopfklein:last-child{grid-column:2} }
.schrittzeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;margin-bottom:10px} .schrittzeile .nummer{width:28px;height:28px;border-radius:50%;background:var(--flaeche2);display:grid;place-items:center;font-weight:700;font-size:.9em;margin-top:6px} .schrittzeile textarea{min-height:64px} .schrittknoepfe{display:grid;gap:4px}
.fotovorschau.rezeptbild{width:120px;height:84px} .fotovorschau.rezeptbild img{width:100%;height:100%;object-fit:cover}
.rz{max-width:820px}
.rzkarte{background:var(--flaeche);border:1px solid var(--rand);border-radius:22px;overflow:hidden;margin:16px 0 24px}
.rzbild{display:block;width:100%;max-height:420px;object-fit:cover}
.rzkopf{padding:22px 24px 6px} .rzkopf .art{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cv);font-weight:700;margin:0 0 6px} .rzkopf h1{margin:0 0 10px;font-size:clamp(1.7rem,5vw,2.4rem);line-height:1.1} .rzkopf .von{margin:10px 0 0;color:var(--tinte2)}
.rzinhalt{padding:12px 24px 24px;display:grid;gap:22px}
.rzteil h2{font-size:1.1rem;margin:0 0 10px} .rzkopf2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px} .rzkopf2 h2{margin:0}
.portionen{display:inline-flex;align-items:center;gap:8px;padding:4px;border-radius:999px;background:var(--flaeche2)} .portionen b{min-width:7.5em;text-align:center;font-variant-numeric:tabular-nums} .portionen .knopfklein{border-radius:999px;width:32px;height:32px;padding:0;display:grid;place-items:center}
ul.zutaten{list-style:none;margin:0;padding:0;display:grid;gap:6px} ul.zutaten li{display:grid;grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:12px;padding:9px 12px;border-radius:12px;background:var(--flaeche2);cursor:pointer} ul.zutaten .menge{font-weight:700;color:var(--cv);font-variant-numeric:tabular-nums} ul.zutaten li.weg{opacity:.45} ul.zutaten li.weg .name{text-decoration:line-through}
ol.schritte{list-style:none;margin:0;padding:0;display:grid;gap:10px} ol.schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;cursor:pointer} ol.schritte .nummer{width:30px;height:30px;border-radius:50%;background:var(--cv);color:#fff;display:grid;place-items:center;font-weight:800;flex:none} ol.schritte .text{padding-top:3px;line-height:1.55} ol.schritte li.weg{opacity:.45} ol.schritte li.weg .text{text-decoration:line-through}
.rzteil p{margin:0 0 8px} .rzteil .textknopf{margin-top:8px}
@media print{ .kopf,.fuss,.rztaten,.portionen .knopfklein{display:none !important} body{background:#fff;color:#000} .rzkarte{border:0;box-shadow:none;margin:0} .rzbild{max-height:260px} ul.zutaten li,.rzkarte{background:#fff} ul.zutaten li.weg,ol.schritte li.weg{opacity:1} ul.zutaten li.weg .name,ol.schritte li.weg .text{text-decoration:none} }

/* Übersicht (01.10., Politur): vier Bausteine als Kacheln mit Farbmarke, Kopf mit Gruss und stillem Abmelden, Zahlen hinter den
   Listentiteln, leere Listen als stille Zeile statt weisser Karte, «Mit dir geteilt» oben und nur, wenn es etwas gibt. */
.bausteine{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 28px}
.baustein{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:start;padding:16px;border-radius:var(--radius);background:var(--flaeche);border:1px solid var(--rand);color:var(--tinte);text-decoration:none;transition:border-color .15s,transform .15s}
a.baustein:hover{border-color:var(--bs);text-decoration:none;transform:translateY(-1px)} .baustein b{font-size:1.05rem} .baustein small{grid-column:2;color:var(--tinte2);line-height:1.4}
.bsmarke{grid-row:1/3;width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--bs) 70%,#fff),var(--bs));box-shadow:inset 0 -2px 3px rgba(0,0,0,.18)}
.baustein.umfrage{--bs:#5b46e0} .baustein.einladung{--bs:#d9467a} .baustein.rezept{--bs:#2f8f4e} .baustein.lebenslauf{--bs:#1f6fd6}
@media (max-width:900px){ .bausteine{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .bausteine{gap:8px} .baustein{padding:12px;column-gap:10px} .bsmarke{width:28px;height:28px;border-radius:9px} .baustein small{display:none} .baustein{grid-template-rows:auto;align-items:center} .bsmarke{grid-row:auto} }
.buehne-meine{display:flex;align-items:flex-end;justify-content:space-between;gap:12px} .buehne-meine h1{margin-bottom:0} .buehne-meine .textknopf{padding-bottom:10px}
.listentitel{display:flex;align-items:center;gap:8px} .listentitel .zahlchen{font-size:.72em;font-weight:700;color:var(--tinte2);background:var(--flaeche2);border-radius:999px;padding:1px 9px} .listentitel .zahlchen:empty{display:none}
.liste li.leer{background:transparent;border:1px dashed var(--rand);color:var(--tinte2);padding:12px 16px;font-size:.95em}
#geteiltblock .liste li{border-color:color-mix(in srgb,var(--akzent) 35%,var(--rand))}
.kacheln .kachel:nth-child(odd):last-child{grid-column:1/-1}   /* fünf Kacheln der Auswertung: die letzte steht nicht allein halb */
@media (max-width:520px){ .liste li{grid-template-columns:minmax(0,1fr)} .liste li > .zu{justify-self:start;grid-row:2} .liste .titel{white-space:normal} }   /* Handy: Titel voll, Etikett darunter */

/* Sammlungen (rezept.js): Seite mit Kopf und Kartenraster der Rezepte, Bild oder Anfangsbuchstabe, ✕ für den Besitzer. */
.sl{max-width:1040px} .slkopf{padding-bottom:8px} .slkopf .lead{margin:0 0 6px} .slkopf .klein{margin:0}
.slgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:12px 0 32px}
.slkarte{position:relative;display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius);overflow:hidden;background:var(--flaeche);border:1px solid var(--rand);color:var(--tinte);text-decoration:none;transition:border-color .15s,transform .15s}
a.slkarte:hover{border-color:#2f8f4e;text-decoration:none;transform:translateY(-1px)}
.slbild{aspect-ratio:4/3;background:linear-gradient(145deg,color-mix(in srgb,#2f8f4e 22%,var(--flaeche2)),var(--flaeche2));display:grid;place-items:center;overflow:hidden} .slbild img{width:100%;height:100%;object-fit:cover} .slbild span{font-size:2.6rem;font-weight:800;color:color-mix(in srgb,#2f8f4e 70%,var(--tinte))}
.sltext{display:grid;gap:2px;padding:12px 14px} .sltext small{color:var(--tinte2)}
.slweg{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(15,17,23,.6);color:#fff;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:480px){ .slgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .sltext{padding:10px} }
.liste-leer{border:1px dashed var(--rand);border-radius:var(--radius);padding:14px 16px;color:var(--tinte2)}
.listentitel-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px} .listentitel-zeile .textknopf{margin-top:14px}
.sammlungblatt .wahlen{max-height:min(46vh,360px);overflow:auto} .sammlungblatt .suchzeile{margin-top:4px}

.codefeld{text-transform:uppercase} .codefeld::placeholder{text-transform:none}   /* Einladungscode gross, Platzhalter normal */

/* ===== Matrix Basar (02.10.2026): Inserate, Inseratseite, Verwaltung. Baut auf dem Forms-Stil auf; eigene Klassen mit Präfix, wo Forms den Namen schon hat. ===== */
.fuss{max-width:var(--breite);margin:0 auto;padding:24px 16px 40px;color:var(--tinte2);font-size:.9em}
.bhinweis{background:color-mix(in srgb,var(--akzent) 12%,var(--flaeche));border:1px solid color-mix(in srgb,var(--akzent) 40%,var(--rand));border-radius:12px;padding:10px 14px;color:var(--tinte);margin:0 0 16px}
.filterzeile{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 18px} .filterzeile .knopf{margin-left:auto} .filter{display:flex;flex-wrap:wrap;gap:6px}
.inserate{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0 0 32px}
.inserat{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;color:var(--tinte)} .inserat:hover{text-decoration:none;border-color:var(--akzent)}
.vbild{aspect-ratio:4/3;background:var(--flaeche2);display:grid;place-items:center;position:relative} .vbild img{width:100%;height:100%;object-fit:cover;display:block} .vbild.leer .rubrikwort{font-weight:700;color:var(--tinte2);opacity:.6;font-size:1.1em}
.standmarke{position:absolute;top:10px;left:10px;font-size:.78em;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--tinte);color:var(--grund)}
.vinhalt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .vinhalt h3{margin:0;font-size:1.1rem} .vtext{margin:0;color:var(--tinte2);font-size:.95em;line-height:1.45}
.ikopf{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .richtung{font-size:.78em;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff;background:#2f8f4e} .richtung.suche{background:#1f6fd6}
.vfakt{font-size:.8em;padding:3px 9px;border-radius:999px;background:var(--flaeche2);color:var(--tinte2)}
.vfuss{margin-top:auto;display:grid;gap:4px;padding-top:6px} .vbetrag{font-size:1.05em;color:var(--tinte)} .interessemarke{font-size:.8em;font-weight:700;color:var(--akzent)}
.bilderreihe{display:flex;gap:10px;overflow-x:auto;margin:0 0 16px;padding-bottom:4px} .bilderreihe img{height:220px;max-width:100%;border-radius:12px;object-fit:cover;flex:none;cursor:zoom-in;border:1px solid var(--rand)} .bilderreihe img.gross{height:auto;width:100%;cursor:zoom-out}
.itext{white-space:pre-wrap;line-height:1.55;margin:0 0 14px} .fakten{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 12px} .fakten dt{color:var(--tinte2)} .fakten dd{margin:0;font-weight:600}
.anfkopf{display:block;width:100%;margin:6px 0 2px;color:var(--tinte2);font-size:.9em}
.interessenten{display:grid;gap:10px;margin:10px 0} .interessent{border:1px solid var(--rand);border-radius:12px;padding:10px 12px;background:var(--flaeche2)} .interessent p{margin:6px 0 8px;font-style:italic} .interessent .knopf.klein{color:var(--tinte)}
.bzbild{width:52px;height:52px;border-radius:10px;background:var(--flaeche2);overflow:hidden;display:block} .bzbild img{width:100%;height:100%;object-fit:cover;display:block}
.bztext{display:grid;gap:2px;min-width:0} .bztext b{overflow-wrap:anywhere} .bztext small{color:var(--tinte2)}
.vtaten{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .vtaten .knopf.klein{color:#fff} .vtaten .knopf.klein.leise{color:var(--tinte)} .knopf.leise.gefaehrlich,.vtaten .knopf.klein.leise.gefaehrlich{color:#e5453a}
.vliste{display:grid;gap:8px} .vzeile{display:grid;grid-template-columns:52px 1fr auto;grid-template-areas:'bild text taten';gap:12px;align-items:center;padding:8px 12px;border:1px solid var(--rand);border-radius:14px;background:var(--flaeche);min-width:0} .vzeile.inaktiv{opacity:.65}
.vzeile .bzbild{grid-area:bild} .vzeile .bztext{grid-area:text} .vzeile .vtaten{grid-area:taten} @media (max-width:640px){ .vzeile{grid-template-columns:52px 1fr;grid-template-areas:'bild text' 'taten taten'} }
.kartenkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .kartenkopf h2{margin:0}
.bestelldialog{position:fixed;inset:0;background:rgba(10,12,20,.55);display:grid;place-items:center;padding:16px;z-index:60;overflow:auto;overscroll-behavior:contain}
.dialogbox{background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--radius);padding:22px;width:min(100%,460px);display:grid;gap:4px;max-height:calc(100dvh - 32px);overflow:auto} .dialogbox.breit{width:min(100%,680px)} .dialogbox h3{margin:0 0 6px}
.farbchips{display:flex;flex-wrap:wrap;gap:6px} .chip{font:inherit;font-size:.9em;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer} .chip.aktiv{background:var(--akzent);border-color:var(--akzent);color:#fff} .chip.klein{font-size:.82em;padding:5px 10px}
.chip2 .chipweg,.bildkachel .chipweg{font:inherit;border:0;background:transparent;color:var(--tinte2);cursor:pointer;padding:0 2px;line-height:1} .chip2 .chipweg:hover{color:#e5453a}
.bildwahl{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0} .bildkachel{position:relative;width:96px;height:72px;border-radius:10px;background:var(--flaeche2);overflow:hidden;display:grid;place-items:center;border:1px solid var(--rand)} .bildkachel img{width:100%;height:100%;object-fit:cover} .bildkachel .chipweg{position:absolute;top:2px;right:4px;background:rgba(255,255,255,.85);border-radius:999px;color:#222;padding:0 6px} .bildkachel.plus{cursor:pointer;font-size:1.6em;color:var(--tinte2);border-style:dashed}
.betragfeld[hidden]{display:none}
.meldung{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--tinte);color:var(--grund);padding:10px 16px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:70;max-width:calc(100vw - 32px)} .meldung.da{opacity:1;transform:translate(-50%,0)} .meldung.fehler{background:#e5453a;color:#fff}
main > section + section,main > .zweispaltig + section{margin-top:16px}   /* gestapelte Karten brauchen Luft */
.dialogbox input:not([type=checkbox]):not([type=radio]):not([type=file]),.dialogbox textarea{width:100%;box-sizing:border-box}   /* Forms gibt nur Textfeldern volle Breite; hier auch Titel, Ort, Wann, Betrag */
/* Einordnung der Interessenten (nur der Inserent): Gruppenköpfe, gedämpfte «nein», Grundwahl */
.urteilkopf{margin:14px 0 4px;font-size:.85em;letter-spacing:.03em;text-transform:uppercase;color:var(--tinte2)} .urteilkopf.urteil-passt{color:#2f8f4e} .urteilkopf.urteil-nein{color:#b23a2e}
.interessent.urteil-nein{opacity:.62} .interessent.urteil-passt{border-color:#2f8f4e;background:color-mix(in srgb,#2f8f4e 10%,var(--flaeche))} .interessent .grund{margin:2px 0 8px;font-size:.9em;color:#b23a2e;font-style:normal}
.interessent .farbchips{margin-top:6px} .chip.chip-passt.aktiv{background:#2f8f4e;border-color:#2f8f4e} .chip.chip-nein.aktiv{background:#b23a2e;border-color:#b23a2e} .chip.chip-vielleicht.aktiv{background:#b9770e;border-color:#b9770e}
.grundwahl{display:grid;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--rand)} .grundwahl input{width:100%;box-sizing:border-box}
.sichtmarke{position:absolute;top:10px;right:10px;font-size:.78em;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--flaeche);color:var(--tinte2);border:1px solid var(--rand)}
.freundewahl{display:grid;gap:4px;margin-top:6px;padding:8px 10px;border:1px dashed var(--rand);border-radius:10px} .freundewahl .wahl{display:flex;gap:8px;align-items:center}

/* ===== Chat (Familie Chat von matrixhardline.ch, 02.10. übernommen: gleiche Optik, gleiche Töne; die Unterhaltungen sind eigene, pro Inserat) ===== */
.chatreihe{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;padding:8px 10px;background:color-mix(in srgb,var(--flaeche) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--rand);border-radius:999px;box-shadow:0 16px 40px -14px rgba(0,0,0,.65);animation:chatReihe .35s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes chatReihe{from{transform:translate(-50%,130%);opacity:0}}
.chatknopf{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;padding:10px 16px;border-radius:999px;border:0;cursor:pointer;background:var(--flaeche2);color:var(--tinte);box-shadow:inset 0 0 0 1px var(--rand);white-space:nowrap}
.chatknopf .zeichen{width:1.15em;height:1.15em;flex:none} .chatknopf[aria-expanded="true"]{background:var(--akzent);color:#fff;box-shadow:none} .chatknopf[aria-expanded="true"] .chatzaehler{background:#fff;color:var(--akzent2)}
.chatblatt{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(94px + env(safe-area-inset-bottom));z-index:61;width:min(400px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 120px));overscroll-behavior:contain;display:flex;flex-direction:column;background:color-mix(in srgb,var(--flaeche) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--rand);border-radius:22px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6);overflow:hidden}
/* Handy: das Blatt ist ein Bogen von unten, die Leiste verschwindet, solange es offen ist (sonst klebte sie am Blatt), die Seite dahinter
   scrollt nicht mit (body.chat-offen). Der Faden darf schrumpfen (min-height:0), damit Tastatur und Sprüche-Leiste das Blatt nicht
   über den Rand schieben. */
@media (max-width:600px), ((pointer:coarse) and (max-width:1100px)){   /* Handy und Tablet (iPad): Vollbild, der Tastatur wegen; dazu :root.touch unten */
  .chatblatt{inset:0;left:0;right:0;top:0;bottom:auto;transform:none;width:auto;height:100dvh;max-height:none;border-radius:0;border:0;box-shadow:none;background:var(--grund)}   /* Vollbild; chat.js setzt Höhe/Lage nach der Tastatur */
  .chatkopf{padding-top:calc(12px + env(safe-area-inset-top))} .chatzeile{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  body.chat-offen .chatreihe{display:none} body.chat-offen{overflow:hidden}
}@media (max-width:1100px){   /* Touch-Geräte bis 1100 px (iPad): dieselben Vollbild-Regeln wie das Handy; die Klasse touch setzt chat.js */
  :root.touch .chatblatt{inset:0;left:0;right:0;top:0;bottom:auto;transform:none;width:auto;height:100dvh;max-height:none;border-radius:0;border:0;box-shadow:none;background:var(--grund)}
  :root.touch .chatkopf{padding-top:calc(12px + env(safe-area-inset-top))} :root.touch .chatzeile{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  :root.touch body.chat-offen .chatreihe{display:none} :root.touch body.chat-offen{overflow:hidden}
}

.chatkopf,.chatgriffe,.chatzeile{flex:none} .chatkopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 6px} .chatkopf b{font-size:1.05em} .chatkopf .textknopf{padding:4px 0;text-decoration:none}
.chatfreunde{flex:none;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 14px 10px;scrollbar-width:none;border-bottom:1px solid var(--rand);cursor:grab} .chatfreunde:active{cursor:grabbing}
@media (hover:hover){ .chatfreunde{scrollbar-width:thin;scrollbar-color:var(--rand) transparent} .chatfreunde::-webkit-scrollbar{display:block;height:6px} .chatfreunde::-webkit-scrollbar-thumb{background:var(--rand);border-radius:3px} }   /* mit Maus: ein dünner Rollbalken, mit Finger keiner */   /* Trennlinie: darunter scrollt der Faden, oben angeschnittene Blasen lesen sich sonst wie ein Fehler */ .chatfreunde::-webkit-scrollbar{display:none}
.chatchip{--h:250;display:inline-flex;align-items:center;gap:7px;flex:none;font:inherit;font-size:.9em;font-weight:600;padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer}
.chatchip.aktiv{border-color:hsl(var(--h) 60% 55%);box-shadow:inset 0 0 0 1px hsl(var(--h) 60% 55%)} .chatchip.online .chatavatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#3aa655;border:2px solid var(--flaeche)}
.chatavatar{position:relative;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-weight:800;font-size:.8rem;color:#fff;background:linear-gradient(145deg,hsl(var(--h) 60% 58%),hsl(var(--h) 55% 42%))}
.chatzaehler{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--akzent);color:#fff;font-size:.72em;font-weight:700}
.chatfaden{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 14px;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb,var(--grund) 40%,transparent)}
.chatnachricht{--h:250;display:flex;flex-direction:column;align-items:flex-start;max-width:86%;gap:4px} .chatnachricht.ich{align-self:flex-end;align-items:flex-end}
.chatblase{position:relative;display:inline-block;padding:9px 13px;border-radius:18px 18px 18px 5px;background:var(--flaeche2);border:1.5px solid color-mix(in srgb,hsl(var(--h) 60% 55%) 55%,var(--rand));color:var(--tinte);font-weight:600;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere}
.chatnachricht.ich .chatblase{border-radius:18px 18px 5px 18px;background:color-mix(in srgb,var(--akzent) 22%,var(--flaeche2));border-color:color-mix(in srgb,var(--akzent) 55%,var(--rand))}
.chatnachricht.antwortbar .chatblase{cursor:pointer} .chatnachricht .chatblase.gewaehlt{box-shadow:0 0 0 3px color-mix(in srgb,hsl(var(--h) 60% 55%) 35%,transparent)}
.chatbezug{font-size:.8em;color:var(--tinte2);padding:0 6px;border-left:2px solid var(--rand);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chatbezug::before{content:"↩ "}
.chatzeit{font-size:.72em;color:var(--tinte2);padding:0 4px}
.chatkarte{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:var(--flaeche);border:1px solid var(--rand);min-width:200px;max-width:100%} .chatkarte b{line-height:1.25} .chatkarte .klein{margin:0;font-size:.85em} .chatkarte .klein.warn{color:#e0a43a;font-weight:600} .chatkarte .knopf{justify-self:start;margin-top:4px}
.chatart{font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent2)}
.chatmeldung{margin:0;align-self:center;font-size:.85em;color:var(--tinte2);text-align:center} .chatmeldung.fehler{color:#ff7a7a;font-weight:600}
.chatleiste{flex:none;display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 0;max-height:min(220px,34dvh);overflow-y:auto;overscroll-behavior:contain} .chatleiste .klein{margin:0}
.chatspruch{font:inherit;font-size:.88em;font-weight:600;padding:7px 12px;border-radius:16px 16px 16px 4px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer} .chatspruch:hover{border-color:var(--akzent)} .chatspruch.oeffnen{background:var(--akzent);color:#fff;border-color:var(--akzent)}
.chatteil{display:grid;gap:2px;text-align:left;font:inherit;width:100%;padding:8px 12px;border-radius:12px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer} .chatteil .klein{margin:0;font-size:.82em} .chatteil.privat .klein{color:#e0a43a} .chatteil:hover{border-color:var(--akzent)}
.chatfrage{display:grid;gap:6px;width:100%;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,#e0a43a 12%,var(--flaeche2));border:1px solid color-mix(in srgb,#e0a43a 45%,var(--rand))} .chatfrage .klein{margin:0} .chatfrage .taten{margin:4px 0 0}
.chatgriffe{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap;border-top:1px solid var(--rand)} .chatgriff{font:inherit;font-size:.85em;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--rand);background:transparent;color:var(--tinte2);cursor:pointer} .chatgriff:hover{color:var(--tinte);border-color:var(--akzent)} .chatgriff:disabled{opacity:.5}
.chatzeile{display:flex;gap:8px;align-items:flex-end;padding:8px 14px calc(12px + env(safe-area-inset-bottom))} .chattext{flex:1 1 auto;font:inherit;line-height:1.3;padding:10px 14px;border-radius:18px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);resize:none;max-height:120px} .chattext:focus{outline:2px solid var(--akzent);outline-offset:1px}
.chatsenden{flex:none;padding:10px 16px}
/* Der Flug über die Seite: wie die Sprechblasen der Arcade, aber ruhiger und 9 s lang; die Antwortwahl darüber. */
.chatflug{--h:250;--dx:0px;--rot:0deg;position:fixed;z-index:70;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));display:grid;justify-items:center;gap:3px;width:max-content;max-width:min(300px,84vw);cursor:pointer;animation:chatFlug 9.2s cubic-bezier(.25,.6,.35,1) forwards;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.chatflug .chatblase{background:var(--flaeche);border:2px solid hsl(var(--h) 60% 55%);border-radius:18px;font-size:1rem;text-align:center;padding:10px 14px 10px} .chatflug .chatblase::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--flaeche);border-right:2px solid hsl(var(--h) 60% 55%);border-bottom:2px solid hsl(var(--h) 60% 55%);transform:translateX(-50%) rotate(45deg)}
.chatflug .chatname{font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 9px;border-radius:999px;color:#fff;background:hsl(var(--h) 55% 42%);margin-top:5px} .chatbezugflug{font-size:.75em;color:var(--tinte2)}
.chatflug.ich .chatblase{background:color-mix(in srgb,var(--akzent) 22%,var(--flaeche))} .chatflug.ich{animation-duration:4s}
.chatflug.gewaehlt{z-index:80} .chatflug.verblasst{opacity:0;transition:opacity .35s}
@keyframes chatFlug{0%{opacity:0;transform:translate(-50%,24px) scale(.5)}6%{opacity:1;transform:translate(-50%,0) scale(1.08) rotate(var(--rot))}12%{transform:translate(-50%,-6px) scale(1) rotate(var(--rot))}45%{transform:translate(calc(-50% + var(--dx)),-14vh) rotate(calc(var(--rot) * -1))}80%{opacity:1;transform:translate(calc(-50% - var(--dx) / 2),-26vh) rotate(var(--rot))}100%{opacity:0;transform:translate(-50%,-34vh) scale(.92)}}
@media (prefers-reduced-motion: reduce){ .chatflug{animation:chatStill 9s ease forwards} @keyframes chatStill{0%,100%{opacity:0;transform:translate(-50%,-10vh)}6%,90%{opacity:1;transform:translate(-50%,-10vh)}} }
.chatwahl{position:fixed;z-index:85;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:min(320px,calc(100vw - 20px));padding:10px;border-radius:20px;background:color-mix(in srgb,var(--flaeche) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--rand);box-shadow:0 20px 40px -18px rgba(0,0,0,.6)}
.chatwahlkopf{flex:1 1 100%;margin:0 0 2px;text-align:center;font-size:.8em;font-weight:700;color:var(--tinte2)}
/* Chat: Tagestrenner, «Gelesen», ältere laden, Links in Blasen. */
.chattag{margin:4px 0 -2px;align-self:center;font-size:.75em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinte2)}
.chatgelesen{font-size:.7em;color:var(--akzent2);font-weight:600;padding:0 4px;margin-top:-4px} .chataeltere{align-self:center;font-size:.85em}
.chatblase a{color:var(--akzent2);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
/* Familie Klang: Stummschalter im Chat-Kopf. */
.chatkopfrechts{display:flex;align-items:center;gap:6px} .chattonknopf{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer} .chattonknopf .zeichen{width:1.15em;height:1.15em} .chattonknopf.still{color:var(--tinte2)}
/* Chat: «schreibt gerade» mit atmenden Punkten. */
.chattippt{margin:0;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.85em;color:var(--tinte2)} .chattippt .punkte{display:inline-flex;gap:3px} .chattippt .punkte::before,.chattippt .punkte::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--tinte2);animation:chatPunkt 1.2s ease-in-out infinite} .chattippt .punkte::after{animation-delay:.4s}
@keyframes chatPunkt{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@media (prefers-reduced-motion: reduce){ .chattippt .punkte::before,.chattippt .punkte::after{animation:none;opacity:.7} }
.chatchip.nichtfrei{opacity:.75;border-style:dashed} .chatchip.nichtfrei .klein{font-size:.75em;margin:0}
.mkglas{isolation:isolate;background:color-mix(in srgb,var(--flaeche) 42%,transparent);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border:1px solid color-mix(in srgb,#fff 55%,transparent);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(0,0,0,.14),0 18px 40px -16px rgba(0,0,0,.45),0 2px 6px -2px rgba(0,0,0,.2)}
.mkglas::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;padding:2.5px;
  background:linear-gradient(155deg,rgba(255,255,255,.65) 0%,rgba(140,210,255,.35) 14%,transparent 32%,transparent 66%,rgba(255,140,220,.28) 86%,rgba(0,0,0,.18) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.mkglas::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.28),transparent 55%)}   /* Lichtschein oben links wie das Randlicht */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mkglas{border-color:color-mix(in srgb,#fff 22%,transparent);box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(0,0,0,.35),0 18px 40px -16px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4)} :root:not([data-theme="light"]) .mkglas::after{background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.12),transparent 55%)} }
/* Die Chat-Leiste trägt das Glas; der Knopf darin ist eine stille Pille ohne eigenen Körper (im Kit verschmelzen Nachbarn zu einem Körper). */
.chatreihe.mkglas{background:color-mix(in srgb,var(--flaeche) 42%,transparent);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}
.chatreihe.mkglas .chatknopf{background:color-mix(in srgb,var(--flaeche) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 35%,transparent)} .chatreihe.mkglas .chatknopf[aria-expanded="true"]{background:color-mix(in srgb,var(--akzent) 75%,transparent);color:#fff;box-shadow:none}
@media (min-width:601px) and (max-width:1100px){ :root.touch .chatfaden,:root.touch .chatzeile,:root.touch .chatgriffe,:root.touch .chatfreunde,:root.touch .chatkopf,:root.touch .chatleiste{max-width:720px;width:100%;margin-left:auto;margin-right:auto} .chatfaden,.chatzeile,.chatgriffe,.chatfreunde,.chatkopf,.chatleiste{max-width:720px;width:100%;margin-left:auto;margin-right:auto} }   /* iPad: Inhalt mittig, nicht randlos breit */
/* Chat im Basar: Chips mit Name und Inserat, Vereinbarungskarten, Ruf */
.chatchip .nm{display:grid;line-height:1.15;text-align:left} .chatchip .nm small{font-weight:500;color:var(--tinte2);font-size:.78em}
.chatgriff{font:inherit;font-size:.88em;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--tinte);cursor:pointer}
.chatfrage input,.chatfrage textarea{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--rand);background:var(--grund);color:var(--tinte)}
.vereinbarungskarte{min-width:min(78vw,340px)} .vereinbarungskarte.stand-besiegelt{border-color:#2f8f4e} .vereinbarungskarte.stand-erfuellt{border-color:#2f8f4e;background:color-mix(in srgb,#2f8f4e 12%,var(--flaeche))} .vereinbarungskarte.stand-aufgeloest{border-color:#b23a2e;opacity:.85}
.vereinbarungskarte .vtaten{margin-top:6px} .vereinbarungskarte .grund,.rufliste .grund,.ruf{color:#b23a2e} .ruf{display:block;font-size:.85em;margin-top:2px}
.rufliste{display:grid;gap:8px} .rufzeile{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--rand);border-radius:10px;background:var(--flaeche2)}
.chatoeffnen{margin:6px 0 10px}