/* ==========================================================================
   0.16 · letzte Schicht: Themes, Navigation nach Wichtigkeit, Objektsuche mit Bereichen,
   Suche, Kontakte als Karten, ruhigere Startseite. Liegt über allen anderen CSS-Dateien.
   ========================================================================== */

/* ---------- Themes (0.17: drei Modi) ----------
   Hell     Grundfläche #ffffff, Flächen weiß mit feiner Linie
   Dunkel   helles Anthrazit #2a2b2e (0.18), Flächen in klaren Stufen heller
   Midnight echtes Schwarz #000000, Schrift #ffffff (html[data-nacht="midnight"]) */
:root:not([data-theme="dark"]) {
  --bg: #ffffff; --card: #ffffff; --fill: #f1f2f1;
  --text: #141515; --text-2: #5c5f62;
  --line: rgba(20, 24, 22, .10);
  --glass-bg: #ffffff; --glass-bg-hover: #f5f6f5; --glass-line: rgba(20, 24, 22, .10);
  --lg-shadow: 0 0 0 1px rgba(20, 24, 22, .09), 0 1px 3px rgba(20, 24, 22, .05);
  --glass-shadow: var(--lg-shadow);
}
:root:not([data-theme="dark"]) .sidebar { background: #fafafa; }
:root[data-theme="dark"] {
  --bg: #2a2b2e; --card: #34353a; --fill: #3f4045;
  --line: rgba(255, 255, 255, .11);
  --text: #f4f4f5; --text-2: #bfc0c4;
  --glass-bg: #34353a; --glass-bg-hover: #3c3d42; --glass-line: rgba(255, 255, 255, .10);
  --lg-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .3);
  --glass-shadow: var(--lg-shadow);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .sidebar { background: #26272a; }
:root[data-theme="dark"][data-nacht="midnight"] {
  --bg: #000000; --card: #101010; --fill: #1c1c1c;
  --line: rgba(255, 255, 255, .13);
  --text: #ffffff; --text-2: #b4b4b4;
  --glass-bg: #101010; --glass-bg-hover: #181818; --glass-line: rgba(255, 255, 255, .12);
  --lg-shadow: 0 0 0 1px rgba(255, 255, 255, .11);
  --glass-shadow: var(--lg-shadow);
  --shadow: none;
}
:root[data-theme="dark"][data-nacht="midnight"] .sidebar { background: #000000; }
:root[data-theme="dark"] .steps li::before { color: var(--bg); }
#setTheme { flex-wrap: wrap; }
/* Jahreszeiten-Schein im Hintergrund nur noch angedeutet, bei Midnight gar nicht: die Fläche bleibt wirklich weiß bzw. schwarz */
body::before { opacity: .9; }
:root[data-nacht="midnight"][data-theme="dark"] body::before { display: none; }

/* ---------- Ruhe und Flüssigkeit ---------- */
.tile, .kt-row, .ob-row summary, .nav-link, .res, .ob-ber button, .ob-seg button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.tile:hover { transform: none; }
.ob-row { content-visibility: auto; contain-intrinsic-size: auto 64px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Navigation ---------- */
.nav-group { display: flex; align-items: center; gap: 8px; margin-top: 20px; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; font-weight: 650; }
.nav-ghint { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--text-2); }

/* ---------- Startseite ---------- */
.home-g { margin-top: 26px; }
.sec h2.home-gh, .home-gh { margin: 0 0 10px; font: 650 12px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.tile-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tile-tag { font-style: normal; font-size: 10.5px; font-weight: 650; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--text-2); }
.tile-tag.pf { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

/* ---------- Suche oben ---------- */
.search-input { border-radius: 12px; }
.search-input:focus { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.results { border-radius: 16px; padding: 6px; box-shadow: 0 16px 48px rgba(0, 0, 0, .16), 0 0 0 1px var(--line); border: 0; overscroll-behavior: contain; }
:root[data-theme="dark"] .results { box-shadow: 0 16px 48px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
.res { display: flex; gap: 12px; padding: 9px 10px; border-radius: 11px; }
.res-ico { width: 30px; height: 30px; border-radius: 9px; }
.res-t { font-size: 14.5px; line-height: 1.3; }
.res-p { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.res-typ { font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; padding: 0 6px; border-radius: 99px; background: var(--fill); color: var(--text-2); }
.res-s { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-group { padding: 10px 10px 4px; font-size: 11px; letter-spacing: .07em; font-weight: 700; }
.res mark, .res-s mark, .res-t mark, .ob-name mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (min-width: 901px) { .topbar .search .results { min-width: 560px; } }
@media (max-width: 900px) {
  .topbar .search .results { position: fixed; left: 10px; right: 10px; top: 62px; max-height: calc(100dvh - 170px); }
}

/* ---------- Objektsuche ---------- */
.ob .kt-q { position: relative; }
.ob-n { flex: none; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.ob-filter { display: grid; gap: 10px; margin-top: -14px; }
.ob-ber { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; scroll-snap-type: x proximity; }
.ob-ber::-webkit-scrollbar { display: none; }
.ob-ber button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--card); cursor: pointer; font: 600 13.5px var(--font); color: var(--text); scroll-snap-align: start; }
.ob-ber button svg { color: var(--text-2); }
.ob-ber button em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--text-2); }
.ob-ber button:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.ob-ber button.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.ob-ber button.on svg, .ob-ber button.on em { color: inherit; opacity: .8; }
.ob-seg { display: inline-flex; justify-self: start; padding: 3px; gap: 2px; border-radius: 10px; background: var(--fill); }
.ob-seg button { padding: 5px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font: 600 13px var(--font); color: var(--text-2); }
.ob-seg button.on { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ob-sec { gap: 6px; }
.ob-sec .kt-h svg { align-self: center; color: var(--text-2); }
.ob-k[hidden] { display: none; }
.ob-kh { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; font: 650 14.5px/1.3 var(--font); color: var(--text); }
.ob-kh em { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--text-2); }
.ob-list { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--card); box-shadow: var(--lg-shadow); overflow: hidden; }
.ob-row + .ob-row { border-top: 1px solid var(--line); }
.ob-row[hidden] { display: none; }
.ob-row summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; }
.ob-row summary::-webkit-details-marker { display: none; }
.ob-row summary:hover { background: var(--glass-bg-hover); }
.ob-ic { color: var(--text-2); }
.ob-row.anl .ob-ic { color: var(--accent); }
.ob-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.ob-name { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.ob-tag { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.ob-kurz { flex-basis: 100%; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-kurz.offen { font-style: italic; opacity: .75; }
.ob-chev { color: var(--text-2); transform: rotate(90deg); transition: transform .2s ease; }
.ob-row details[open] .ob-chev { transform: rotate(-90deg); }
.ob-row details[open] summary { background: transparent; }
.ob-row details[open] .ob-kurz { display: none; }
.ob-body { padding: 0 14px 14px 42px; animation: obAuf .18s ease; }
@keyframes obAuf { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ob-ort, .ob-leer { margin: 0; font-size: 15px; line-height: 1.5; }
.ob-ort b { display: block; font: 650 11px/1.6 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.ob-leer { color: var(--text-2); }
.ob-schritte { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 15px; line-height: 1.5; }
.ob-schritte li::marker { font-weight: 700; color: var(--accent); }
.ob-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; }
.ob-row.ziel { animation: none; box-shadow: inset 3px 0 0 var(--accent); }
@media (max-width: 640px) {
  .ob-body { padding-left: 14px; }
  .ob-row summary { padding: 11px 12px; gap: 10px; }
  .ob-n { display: none; }
}

/* ---------- Kontakte: Zuständigkeiten als Karten ---------- */
.kt-list:not(.ob-list) { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.kt-row { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px; border: 0; border-radius: 16px; background: var(--card); box-shadow: var(--lg-shadow); }
.kt-row .pfp { width: 48px; height: 48px; }
.kt-row .pfp b { font-size: 17px; }
.kt-row .kt-k { grid-column: 2; justify-self: start; }
.kt-n { flex-direction: column; gap: 1px; }
.kt-th { display: flex; flex-wrap: wrap; gap: 5px; margin: 9px 0 0; }
.kt-th span { font-size: 12.5px; line-height: 1.2; padding: 4px 9px; border-radius: 99px; background: var(--fill); color: var(--text); }
.kt-first { padding: 18px; border-radius: 18px; background: var(--card); box-shadow: var(--lg-shadow); }
.kt-regel li { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 640px) {
  .kt-list:not(.ob-list) { grid-template-columns: 1fr; }
  .kt-first { padding: 14px; }
}

/* ---------- 0.18: Glow im Standard-Design ---------- */
:root[data-design="standard"] body::before { opacity: 1;
  background: radial-gradient(900px 560px at 4% -8%, rgba(47, 93, 70, .16), transparent 70%),
              radial-gradient(820px 560px at 98% 4%, rgba(127, 193, 155, .24), transparent 70%),
              radial-gradient(900px 640px at 55% 112%, rgba(47, 93, 70, .10), transparent 70%); }
:root[data-design="standard"][data-theme="dark"] body::before {
  background: radial-gradient(900px 560px at 4% -8%, rgba(127, 193, 155, .16), transparent 70%),
              radial-gradient(820px 560px at 98% 4%, rgba(90, 160, 125, .14), transparent 70%); }
:root[data-design="standard"] .tile:hover, :root[data-design="standard"] .ob-list:hover { box-shadow: var(--lg-shadow), 0 6px 26px color-mix(in srgb, var(--accent) 16%, transparent); }

/* ---------- 0.18: Handy ---------- */
@media (max-width: 640px) {
  #main { padding-bottom: calc(118px + env(safe-area-inset-bottom)); }
  .ph-row { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .ph-row h1 { min-width: 0; overflow-wrap: anywhere; }
  .ph-row .page-actions { flex: none; margin-top: 0; display: flex; gap: 6px; }
  .ph-row .pa { width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center; border-radius: 12px; }
  .ph-row .pa span { display: none; }
  .page-head .lead { font-size: 15.5px; margin-top: 6px; }
  .kt { gap: 26px; }
  .kt-regel { gap: 10px; }
  .kt-row { padding: 14px; gap: 12px; }
  .kt-first { grid-template-columns: auto minmax(0, 1fr); }
  .kt-first .pfp { width: 58px; height: 58px; }
  .kt-first .kt-n b { font-size: 24px; }
  .kt-why { font-size: 14.5px; }
  .kt-wege > div { padding: 12px 0; }
  .tiles .tile { min-height: 96px; }
  .home-g { margin-top: 20px; }
  .ob-ber button { padding: 9px 13px; }
  .ob-row summary { min-height: 52px; }
  .results .res { padding: 10px 8px; }
  .fab > span[data-ico] { display: inline-flex; }          /* Feedback-Knopf: Symbol sichtbar lassen, nur der Text fällt weg */
  .fab { width: 44px; height: 44px; padding: 0; justify-content: center; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .deko-top { height: 48px; }
  .deko-top svg { transform: scale(.78); transform-origin: top center; }
}
@media (hover: none) { .tile:hover, .ob-row summary:hover { background: var(--glass-bg); } }

/* ---------- 0.17.2a: Offene Punkte ---------- */
.of { max-width: 860px; display: grid; gap: 22px; margin-top: 10px; }
.of-top { display: flex; align-items: center; gap: 22px; padding: 20px; border-radius: 18px; background: var(--card); box-shadow: var(--lg-shadow); }
.of-top .pf-ring { width: 96px; height: 96px; flex: none; }
.of-n { margin: 0; font-size: 16px; color: var(--text-2); }
.of-n b { font: italic 900 40px/1 var(--head); color: var(--text); margin-right: 4px; }
.of-sub { margin: 4px 0 10px; font-size: 14px; color: var(--text-2); }
.of-art { display: flex; flex-wrap: wrap; gap: 6px; }
.of-live { display: flex; align-items: center; gap: 5px; margin: 10px 0 0; font-size: 12.5px; color: var(--text-2); }
.of-b { flex: none; font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 99px; }
.of-b.bestaetigen { background: var(--tbc-soft); color: var(--tbc); }
.of-b.ergaenzen { background: var(--accent-soft); color: var(--accent); }
:root:not([data-theme="dark"]) .of-b.bestaetigen { color: #7a5b00; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.of-kat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; background: var(--card); box-shadow: var(--lg-shadow); cursor: pointer; font: inherit; color: var(--text); }
.of-kat svg { grid-row: 1 / 3; color: var(--text-2); }
.of-kat span { font-size: 13px; color: var(--text-2); }
.of-kat b { font-size: 22px; line-height: 1.1; }
.of-kat.on { border-color: var(--text); }
.of-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.of-q { flex: 1 1 260px; height: 46px; }
.of-sec { gap: 8px; }
.of-sec .kt-h svg { align-self: center; color: var(--text-2); }
.of-list { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: var(--card); box-shadow: var(--lg-shadow); overflow: hidden; }
.of-row + .of-row { border-top: 1px solid var(--line); }
.of-row[hidden] { display: none; }
.of-row a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 14px; color: inherit; text-decoration: none; }
.of-row a:hover { background: var(--glass-bg-hover); }
.of-row a > svg { color: var(--text-2); }
.of-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.of-dot.bestaetigen { background: var(--tbc); }
.of-t { min-width: 0; }
.of-t b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.of-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .of-top { padding: 16px; gap: 16px; }
  .of-top .pf-ring { width: 76px; height: 76px; }
  .of-n b { font-size: 32px; }
  .of-grid { grid-template-columns: repeat(2, 1fr); }
  .of-row a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .of-row a .of-b { display: none; }
}
.of-top .pf-ring b { width: 78%; height: 78%; }
:root[data-theme="dark"] .lock-form input { background: var(--fill); color: var(--text); border-color: var(--line); }

/* ---------- 0.17.3a Raumkunde ---------- */
.rk-nav { margin: 4px 0 8px; }
.rk-teil h2 small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 2px; font-style: normal; font-family: inherit; }
.rk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.rk-room { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: var(--card); box-shadow: var(--lg-shadow); color: var(--text); text-decoration: none; border: 1px solid transparent; transition: transform .18s ease, border-color .18s ease; }
.rk-room:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.rk-room .rk-n { font-weight: 800; font-size: 17px; }
.rk-room .tile-bg { position: absolute; right: -14px; bottom: -18px; opacity: .06; pointer-events: none; }
.rk-room .room-st i, .page-head .room-st i { padding: 3px 8px; font-size: 11.5px; }
.page-head .room-st { margin-top: 8px; }
.rk-hero { margin: 6px 0 4px; }
.rk-info p { margin: 0; }
.rk-info .rk-kap { margin-top: 12px; font-size: 14px; }
.rk-st { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rk-s { background: var(--card); border-radius: 18px; padding: 14px; box-shadow: var(--lg-shadow); scroll-margin-top: 90px; }
.rk-s h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; }
.rk-s p { margin: 10px 2px 0; font-size: 14px; color: var(--text-2); }
.rk-media { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.rk-media .room-hero { aspect-ratio: auto; min-height: 120px; }
.rk-media .room-ph { min-height: 120px; }
.rk-media .room-empty b { font-size: 13px; }
.rk-media .room-empty span { font-size: 12px; }
.rk-ein { display: grid; gap: 10px; }
.rk-e { background: var(--card); border-radius: 16px; box-shadow: var(--lg-shadow); scroll-margin-top: 90px; }
.rk-e summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.rk-e summary::-webkit-details-marker { display: none; }
.rk-e summary b { flex: 1; }
.rk-e summary > svg:last-child { transition: transform .2s ease; color: var(--text-2); }
.rk-e[open] summary > svg:last-child { transform: rotate(90deg); }
.rk-e-b { padding: 0 16px 16px; }
.rk-e-b p, .rk-e-b ol { margin: 10px 0 0; font-size: 14px; }
.rk-mehr { margin: 18px 0 0; font-size: 14px; color: var(--text-2); }
@media (max-width: 640px) {
  .rk-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rk-room { padding: 12px; }
  .rk-room .rk-n { font-size: 15px; }
  .rk-media { grid-template-columns: 1.3fr 1fr; }
  .rk-media .room-hero, .rk-media .room-ph { min-height: 104px; aspect-ratio: auto; }
  .rk-media .room-empty span { display: none; }
}

/* ---------- 0.18.0a Konten: Login mit Vorschlägen, Profil ---------- */
.ava { --s: 36px; --h: 150; flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden;
  background: hsl(var(--h) 42% 46%); color: #fff; font-weight: 700; font-size: calc(var(--s) * .38); letter-spacing: .02em; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.guser { z-index: 3; }
.gate-list { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; z-index: 5; max-height: 300px; overflow: auto;
  background: rgba(22, 48, 35, .96); border: 1px solid rgba(255,255,255,.22); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.gate-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; cursor: pointer; color: #fff; }
.gate-list li[aria-selected="true"], .gate-list li:hover { background: rgba(255,255,255,.12); }
.gate-list li span { display: grid; min-width: 0; }
.gate-list li b { font-weight: 600; font-size: 15px; }
.gate-list li small { font-size: 12px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gate-list li.leer { cursor: default; color: rgba(255,255,255,.6); font-size: 14px; }
.gate-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 16px; border-radius: 17px; background: rgba(255,255,255,.1); border: 1px solid rgba(127,193,155,.7); color: #fff; }
.gate-who.in { animation: gwIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes gwIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.gw-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.gw-t b { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gw-t small { font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.35; }
.gw-x { flex: none; border: 0; background: rgba(255,255,255,.12); color: #fff; font: 600 12.5px var(--font); padding: 7px 11px; border-radius: 10px; cursor: pointer; }
.gw-x:hover { background: rgba(255,255,255,.2); }
.kb { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; }
.kb.neu { background: #7fc19b; color: #0e2d1e; }
.kb.sonder { background: rgba(255,255,255,.18); color: #fff; }
.kb.leit { background: #f2c46d; color: #3b2a06; }
.side-konto { display: flex; align-items: center; gap: 10px; margin: 8px 12px 4px; padding: 10px; border-radius: 14px; background: var(--fill); }
.side-konto .sk-t { display: grid; min-width: 0; }
.side-konto b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-konto small { font-size: 11.5px; color: var(--text-2); line-height: 1.3; }
.side-konto .ava { box-shadow: none; }
.gate-who[hidden], .gfield[hidden], .gate-list[hidden], .side-konto[hidden] { display: none; }
.gate-who { position: relative; align-items: flex-start; padding-right: 74px; }
.gw-x { position: absolute; top: 10px; right: 10px; padding: 5px 9px; font-size: 12px; }
.side-konto .sk-b { display: flex; gap: 4px; margin: 2px 0; }
.side-konto .kb.sonder { background: var(--accent-soft); color: var(--accent); }

/* ---------- 0.18.1a Wunsch-PIN, Mein Konto ---------- */
.gate-neu { margin: -4px 0 14px; padding: 12px 14px; border-radius: 16px; background: rgba(127,193,155,.16); border: 1px solid rgba(127,193,155,.55); color: #fff; }
.gate-neu.in { animation: gwIn .35s cubic-bezier(.2,.8,.2,1); }
.gn-top { display: flex; align-items: center; gap: 10px; }
.gn-top b { flex: 1; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.gn-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #7fc19b; color: #0e2d1e; font-size: 14px; flex: none; }
.gn-q { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.1); color: #fff; font: 700 14px var(--font); cursor: pointer; }
.gn-q:hover, .gn-q[aria-expanded="true"] { background: #fff; color: #1e4a34; }
.gn-hilfe { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); }
#startWrap[hidden], #pin2Wrap[hidden], .gate-neu[hidden], .gn-hilfe[hidden] { display: none; }
.konto-card .kc-top { display: flex; align-items: center; gap: 14px; }
.konto-card .kc-top b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px; }
.konto-card .kc-top small { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.konto-card .kb.sonder { background: var(--accent-soft); color: var(--accent); }
.kc-test { margin: 12px 0 0; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #f2c46d 22%, transparent); }
.kc-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.kc-form h3 { margin: 0 0 10px; font-size: 16px; }
.kc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.kc-grid select { width: 100%; }
.kc-msg { min-height: 20px; margin: 8px 0; font-size: 14px; color: var(--bad, #c0392b); }
.kc-msg.ok { color: var(--good); }
.home-rolle { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-left: 6px; }
.seit-login { margin: 0 0 18px; }
.chip.fuer-mich { background: var(--accent); color: #fff; border-color: transparent; font-size: 11.5px; padding: 3px 9px; margin-left: 6px; }
.seit-login-p { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 600; color: var(--accent); }
.recht h3 { font-size: 16px; margin: 20px 0 6px; }
.recht h3:first-child { margin-top: 0; }
.recht p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; }
.side-recht { margin: 2px 16px 6px; font-size: 12px; color: var(--text-2); }
.side-recht a { color: inherit; }
.gate-recht { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.6); }
.gate-recht button { border: 0; background: none; color: rgba(255,255,255,.75); font: inherit; text-decoration: underline; cursor: pointer; padding: 2px; }
.recht-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.55); }
.recht-card { width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--card, #fff); color: var(--text, #111); border-radius: 20px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.recht-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; position: sticky; top: -20px; background: inherit; padding: 6px 0; }
.recht-top h2 { margin: 0; font-size: 22px; }