/* ════════════════════════════════════════════════════════════════════════════
   MEIN KIZIL INTERIOR – Baukasten „Entwurf B“ (Oktays Wahl 22.10.2026, Brain 7c25b3c5)
   Brand Guide v3.0, derselbe Baukasten wie der Entscheidungskompass:
   Muschelkalk, Schwarz, nur DM Sans, eckig, keine Schatten, keine Verläufe.
   Terrakotta NUR für „Wartet auf Sie“ und den nächsten Termin (= „hier sind Sie dran“).
   Herkunft: _design/entwurf-b/index.html (dort die Begründungen in ENTWURF.md).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;
  --grund: #F9F7F4;      /* Muschelkalk, nie reines Weiß */
  --schwarz: #0A0A0A;
  --text: #333333;
  --meta: #686868;
  --linie: #E0DDD4;
  --feld: #BDB7AC;       /* Rand von Eingabefeldern, eine Stufe dunkler, damit man sie erkennt */
  --fein: #EFECE6;
  --terra: #C8786A;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --rand: 20px;
  --sektion: 56px;
}
@media (min-width: 768px) { :root { --rand: 60px; --sektion: 88px; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.7; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; }
@media (min-width: 768px) { body { font-size: 17px; } }
h1, h2, h3, h4 { margin: 0; color: var(--schwarz); font-weight: 500; text-wrap: balance; }
h1 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 18px; font-weight: 600; line-height: 1.3; }
@media (min-width: 768px) { h1 { font-size: 56px; } h2 { font-size: 44px; } h3 { font-size: 30px; } h4 { font-size: 22px; } }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rahmen { max-width: calc(1000px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.text { max-width: 680px; }

/* ---------- Knöpfe: eckig, keine Schatten, Hauptknopf schwarz, Hover Terrakotta ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 32px; background: var(--schwarz); color: #fff; border: 0; border-radius: 0; font-size: 16px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.knopf:hover { background: var(--terra); }
.knopf[disabled] { opacity: 0.5; cursor: default; background: var(--schwarz); }
.knopf.umriss { background: transparent; color: var(--schwarz); border: 1px solid var(--linie); }
.knopf.umriss:hover { background: var(--schwarz); color: #fff; border-color: var(--schwarz); }
.knopf.geist { background: transparent; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.4); }
.knopf.geist:hover { background: rgba(255,255,255,0.1); color: #fff; }
@media (max-width: 767px) { .knopf.voll { width: 100%; } }
.leise { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; padding: 0; color: var(--meta); font-size: 16px; text-decoration: none; cursor: pointer; }
.leise:hover { color: var(--schwarz); }
.leise.unterstrichen { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Kopf ---------- */
.kopf { border-bottom: 1px solid var(--linie); }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
@media (min-width: 768px) { .kopf .rahmen { min-height: 75px; } }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { height: 22px; width: auto; }
@media (min-width: 768px) { .logo img { height: 26px; } }
.kopf-rechts { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.portal-name { color: var(--schwarz); font-weight: 500; }
.kunde { color: var(--text); }
@media (max-width: 767px) { .eingeloggt .kopf .portal-name, .eingeloggt .kopf .kunde { display: none; } }

.bildschirm { animation: erscheint 0.35s ease both; }
@keyframes erscheint { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Sektionen ---------- */
.sektion { border-top: 1px solid var(--linie); }
.sektion > .rahmen { padding-block: var(--sektion); }
.sektion h2 { margin-bottom: 8px; }
.unter { color: var(--text); max-width: 620px; }
.meta { color: var(--meta); }

/* ---------- Laden / Zustände ---------- */
.warten { padding-block: 25vh; text-align: center; color: var(--meta); }
.warten h1 { font-size: 28px; margin-bottom: 8px; }

/* ---------- Anmeldung ---------- */
.anmeldung { display: grid; }
.anmeldung .bild { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.anmeldung .bild img { width: 100%; height: 100%; object-fit: cover; }
.anmeldung .seite { display: flex; flex-direction: column; gap: 40px; padding: 40px var(--rand) 24px; }
.anmeldung .block { max-width: 440px; display: grid; gap: 20px; }
.anmeldung h1 { margin-bottom: 4px; }
.anmeldung form { display: grid; gap: 20px; margin-top: 12px; }
.feld label, .feld .titel { display: block; font-size: 16px; color: var(--text); margin-bottom: 8px; }
.id-zeile { position: relative; }
.id-zeile input { width: 100%; min-height: 56px; padding: 14px 112px 14px 20px; border: 1px solid var(--feld); background: transparent; border-radius: 0; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--schwarz); }
.id-zeile input::placeholder { color: var(--meta); }
.id-zeile input:focus { outline: none; border-color: var(--schwarz); }
.zeigen { position: absolute; right: 4px; top: 4px; bottom: 4px; min-width: 96px; padding: 0 16px; background: none; border: 0; color: var(--meta); cursor: pointer; font-size: 16px; }
.zeigen:hover { color: var(--schwarz); }
.fehlerzeile { color: var(--schwarz); font-weight: 500; display: flex; gap: 10px; align-items: baseline; }
.fehlerzeile::before { content: ""; width: 8px; height: 8px; background: var(--terra); flex: none; transform: translateY(-2px); }
.hilfe { color: var(--text); }
.hilfe a { color: var(--schwarz); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; white-space: nowrap; }
.fuss-hell { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 16px; color: var(--meta); margin-top: auto; }
.fuss-hell a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss-hell a:hover { color: var(--schwarz); }
@media (min-width: 1024px) {
  .anmeldung { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: calc(100vh - 76px); }
  .anmeldung .bild { aspect-ratio: auto; height: 100%; }
  .anmeldung .seite { padding: 64px 96px 32px; }
  .anmeldung .block { margin-block: auto; }
}

/* ---------- Begrüßung + der eine nächste Schritt ---------- */
.begruessung > .rahmen { padding-block: 40px var(--sektion); }
.begruessung .innen { display: grid; gap: 32px; }
.lead { font-size: 18px; line-height: 1.6; max-width: 540px; margin-top: 16px; }
@media (min-width: 768px) { .lead { font-size: 21px; line-height: 1.5; margin-top: 20px; } }
.stimmung { display: none; margin: 0; }
@media (min-width: 1024px) {
  .begruessung > .rahmen { padding-top: 56px; }
  .begruessung .innen { grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; align-items: stretch; }
  .stimmung { display: block; overflow: hidden; min-height: 420px; }
  .stimmung img { width: 100%; height: 100%; object-fit: cover; }
}
.naechster { margin-top: 36px; padding-top: 24px; border-top: 2px solid var(--schwarz); max-width: 540px; }
.naechster.wartet { border-top-color: var(--terra); }
.naechster .stand { font-size: 16px; color: var(--schwarz); font-weight: 500; display: flex; align-items: center; gap: 10px; }
.naechster.wartet .stand::before { content: ""; width: 8px; height: 8px; background: var(--terra); flex: none; }
.naechster h2 { font-size: 26px; line-height: 1.2; margin: 10px 0 0; }
@media (min-width: 768px) { .naechster h2 { font-size: 32px; } }
.naechster p.unter { margin-top: 12px; }
.naechster .knopf { margin-top: 24px; }

/* ---------- Projekt-Status als Zeitleiste ---------- */
.zeitleiste { list-style: none; margin: 28px 0 0; padding: 0; display: grid; }
.schritt { position: relative; padding: 10px 0 10px 32px; }
.schritt::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--linie); }
.schritt:first-child::before { top: 22px; }
.schritt:last-child::before { bottom: auto; height: 22px; }
.punkt { position: absolute; left: 0; top: 20px; width: 11px; height: 11px; background: var(--grund); border: 1px solid var(--linie); }
.erledigt .punkt { background: var(--schwarz); border-color: var(--schwarz); }
.jetzt .punkt { background: var(--terra); border-color: var(--terra); }
.schritt b { display: block; font-weight: 500; color: var(--schwarz); font-size: 18px; line-height: 1.4; }
.schritt .zustand, .schritt .wann { color: var(--meta); font-size: 16px; }
.schritt .zustand::after { content: " · "; }
.schritt .zustand:last-child::after { content: none; }
.schritt.jetzt .zustand { color: var(--terra); font-weight: 500; }
.schritt.jetzt .wann { color: var(--schwarz); }
.schritt.offen b { color: var(--meta); }
@media (min-width: 768px) {
  .zeitleiste { grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; margin-top: 40px; }
  .zeitleiste::before { content: ""; position: absolute; left: 5px; right: calc(100% / 6 - 6px); top: 5px; height: 1px; background: var(--linie); }
  .schritt { padding: 30px 16px 0 0; }
  .schritt::before { display: none; }
  .punkt { top: 0; left: 0; }
  .schritt b { font-size: 19px; margin-bottom: 2px; }
  .schritt .zustand, .schritt .wann { display: block; line-height: 1.5; }
  .schritt .zustand::after { content: none; }
}

/* ---------- Bereiche als ruhige Liste ---------- */
.liste { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.zeile { display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-areas: "name pfeil" "stand pfeil"; align-items: center; gap: 2px 16px; padding: 16px 0; min-height: 72px; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; }
.zeile .name { grid-area: name; font-size: 18px; font-weight: 500; color: var(--schwarz); line-height: 1.35; }
.zeile .was { display: none; color: var(--text); }
.zeile .stand { grid-area: stand; display: flex; align-items: center; gap: 10px; color: var(--meta); font-size: 16px; }
.zeile .pfeil { grid-area: pfeil; color: var(--schwarz); font-size: 20px; line-height: 1; transition: transform 0.2s ease; }
a.zeile:hover .name { color: var(--terra); }
a.zeile:hover .pfeil { transform: translateX(4px); }
.stand.wartet { color: var(--schwarz); font-weight: 500; }
.stand.wartet::before { content: ""; width: 8px; height: 8px; background: var(--terra); flex: none; }
.stand svg { flex: none; }
.zeile.bald .name { color: var(--meta); font-weight: 400; }
@media (min-width: 768px) {
  .liste { margin-top: 40px; }
  .zeile { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.25fr) 240px 24px; grid-template-areas: "name was stand pfeil"; gap: 0 32px; padding: 22px 0; min-height: 80px; }
  .zeile .name { font-size: 20px; }
  .zeile .was { display: block; grid-area: was; }
  .zeile .stand { justify-content: flex-end; white-space: nowrap; }
}
.bald-titel { margin-top: 40px; }
.mit-projekt { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--linie); max-width: 680px; }
.mit-projekt p { margin-top: 10px; }

/* ---------- o.KI ---------- */
.frage-oki { display: grid; gap: 12px; margin-top: 28px; max-width: 680px; }
@media (min-width: 768px) { .frage-oki { grid-template-columns: minmax(0, 1fr) auto; } }
.frage-oki input { width: 100%; min-height: 56px; padding: 14px 20px; border: 1px solid var(--feld); background: transparent; border-radius: 0; font-size: 17px; color: var(--schwarz); }
.frage-oki input::placeholder { color: var(--meta); }
.frage-oki input:focus { outline: none; border-color: var(--schwarz); }

/* ---------- Kontakt, dunkel, mit Fußzeile ---------- */
.dunkel { background: var(--schwarz); color: rgba(255,255,255,0.8); border-top: 0; }
.dunkel h2 { color: #fff; }
.dunkel .unter { color: rgba(255,255,255,0.8); }
.tel { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; color: #fff; text-decoration: none; font-size: 30px; font-weight: 500; letter-spacing: -0.01em; }
@media (min-width: 768px) { .tel { font-size: 44px; } }
.tel:hover { color: var(--terra); }
.aktionen { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 24px; }
.fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 16px; color: rgba(255,255,255,0.6); }
.fuss img { height: 18px; width: auto; opacity: 0.9; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss a, .fuss button { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: 16px; }
.fuss a:hover, .fuss button:hover { color: #fff; }

/* ---------- Unterseiten: Kopf mit Zurück ---------- */
.zurueck { margin-top: 20px; }
.seitenkopf > .rahmen { padding-block: 24px 40px; }
.seitenkopf + .sektion > .rahmen { padding-top: 40px; }
@media (min-width: 768px) { .seitenkopf > .rahmen { padding-bottom: 56px; } .seitenkopf + .sektion > .rahmen { padding-top: 56px; } }
.seitenkopf .hinweis { max-width: 680px; margin-top: 24px; }
.seitenkopf h1 { margin-top: 24px; }

/* ---------- Formulare (Liefer-Fragebogen, Termine) ---------- */
.formular { max-width: 680px; }
.frage { border: 0; margin: 0; padding: 28px 0; border-top: 1px solid var(--linie); min-width: 0; }
.frage:first-of-type { border-top: 0; padding-top: 8px; }
.frage legend, .frage > .titel { display: block; padding: 0; font-size: 19px; line-height: 1.45; font-weight: 500; color: var(--schwarz); margin-bottom: 6px; }
/* legend aus der Rahmenlinie lösen (sonst läuft die Linie hinter der Frage durch) */
.frage legend { float: left; width: 100%; }
.frage legend ~ * { clear: both; }
@media (min-width: 768px) { .frage legend, .frage > .titel { font-size: 21px; } }
.frage .erklaerung { color: var(--text); margin-bottom: 14px; }
.wahl { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 768px) { .wahl.nebeneinander { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.wahl label { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 14px 18px; border: 1px solid var(--linie); cursor: pointer; color: var(--schwarz); background: transparent; transition: border-color 0.2s ease, background-color 0.2s ease; }
.wahl label:hover { border-color: var(--schwarz); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label::before { content: ""; width: 18px; height: 18px; border: 1px solid var(--feld); flex: none; background: var(--grund); }
.wahl label:has(input:checked) { border-color: var(--schwarz); }
.wahl label:has(input:checked)::before { background: var(--schwarz); border-color: var(--schwarz); box-shadow: inset 0 0 0 3px var(--grund); }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--schwarz); outline-offset: 2px; }
.wahl label .zwei { display: grid; gap: 2px; }
.wahl label .zwei b { font-weight: 500; color: var(--schwarz); }
.wahl label .zwei .meta { font-size: 16px; line-height: 1.45; }
@media (min-width: 768px) { .wahl.zweispaltig { grid-template-columns: 1fr 1fr; } }
.eingabe { width: 100%; min-height: 56px; padding: 14px 18px; border: 1px solid var(--feld); background: transparent; border-radius: 0; font-size: 17px; color: var(--schwarz); }
textarea.eingabe { min-height: 120px; resize: vertical; line-height: 1.55; }
.eingabe:focus { outline: none; border-color: var(--schwarz); }
.eingabe::placeholder { color: var(--meta); }
.felder { display: grid; gap: 16px; margin-top: 14px; }
@media (min-width: 768px) { .felder.zwei { grid-template-columns: 1fr 1fr; } .felder.drei { grid-template-columns: repeat(3, 1fr); } }
.feld .klein { display: block; font-size: 16px; color: var(--meta); margin-bottom: 6px; }
.hinweis { margin-top: 14px; padding: 16px 18px; border-left: 2px solid var(--terra); background: var(--fein); color: var(--schwarz); }
.hinweis.ruhig { border-left-color: var(--schwarz); }
.daten { margin-top: 14px; padding: 18px 20px; border: 1px solid var(--linie); color: var(--schwarz); line-height: 1.6; }
.daten .meta { display: block; }
.ist-fehler { border-color: var(--terra) !important; }
.frage.ist-fehler { border-top-color: var(--terra) !important; }
.frage .fehlerzeile { margin-top: 12px; }
.absenden { display: grid; gap: 16px; padding-top: 28px; border-top: 1px solid var(--linie); }
.einwilligung { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.einwilligung input { width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--schwarz); flex: none; }
.danke { max-width: 680px; padding-top: 8px; }
.danke h2 { margin-bottom: 12px; }
.danke .liste-punkte { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.danke .liste-punkte li { padding: 14px 0; border-bottom: 1px solid var(--linie); display: flex; gap: 12px; align-items: baseline; color: var(--schwarz); }
.danke .liste-punkte li::before { content: ""; width: 8px; height: 8px; background: var(--terra); flex: none; transform: translateY(-2px); }

/* ---------- Termine: Anfragen-Liste ---------- */
.termine { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--linie); max-width: 680px; }
.termine li { padding: 18px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 4px; }
.termine .art { font-size: 19px; font-weight: 500; color: var(--schwarz); }
.termine .status { display: flex; align-items: center; gap: 10px; color: var(--meta); }
.termine .status.fest { color: var(--schwarz); font-weight: 500; }
.termine .status.fest::before { content: ""; width: 8px; height: 8px; background: var(--terra); flex: none; }
.termine .absagen { justify-self: start; }

/* ---------- Einkaufsvorteile ---------- */
.partner { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--linie); max-width: 680px; }
.partner button { all: unset; display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 64px; padding: 16px 0; border-bottom: 1px solid var(--linie); cursor: pointer; font-size: 22px; line-height: 1.3; color: var(--schwarz); font-weight: 500; letter-spacing: -0.01em; box-sizing: border-box; }
@media (min-width: 768px) { .partner button { font-size: 26px; min-height: 76px; } }
.partner button::after { content: ""; width: 20px; height: 20px; border: 1px solid var(--feld); flex: none; transition: background-color 0.2s ease, border-color 0.2s ease; }
.partner button:hover::after { border-color: var(--schwarz); }
.partner button[aria-pressed="true"]::after { background: var(--schwarz); border-color: var(--schwarz); }
.partner button:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 0; }
.anfrage { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.anfrage .anzahl { color: var(--meta); font-size: 16px; }
.notiz { margin-top: 32px; max-width: 560px; }

/* ════════════════════════════════════════════════════════════════════════════
   App-Ansicht (23.10.2026, Oktay: „wie eine ganz professionelle App“ – Entwurf
   https://claude.ai/artifact/25noui72JUNT3FX9M6STJU, „so ins Design übernehmen“).
   Gilt nur angemeldet (body.app, gesetzt von portal-rahmen.js). Handy und Tablet: Kopf oben,
   Leiste unten. Desktop ab 1100 px: Seitenleiste links. Die Anmeldung bleibt wie sie ist.
   ════════════════════════════════════════════════════════════════════════════ */
body.app { --rand: 20px; line-height: 1.55; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { body.app { --rand: 40px; } }
body.app h1 { font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
body.app h2 { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
body.app h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
body.app .lead { font-size: 16px; line-height: 1.5; margin-top: 8px; color: var(--meta); max-width: 620px; }
@media (min-width: 700px) { body.app h1 { font-size: 34px; } body.app h2 { font-size: 24px; } body.app .lead { font-size: 17px; } }
body.app .rahmen { max-width: calc(780px + 2 * var(--rand)); }
body.app .breit .rahmen { max-width: calc(1120px + 2 * var(--rand)); }

/* Kopf: schmal, bleibt oben stehen, Konto-Knopf statt Name und Abmelden */
body.app .kopf { position: sticky; top: 0; z-index: 20; background: rgba(249, 247, 244, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.app .kopf .rahmen { min-height: 60px; }
body.app .kopf .portal-name, body.app .kopf .kunde, body.app .kopf [data-abmelden] { display: none; }
.konto { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; color: var(--schwarz); }
.konto svg { width: 24px; height: 24px; display: block; }

/* Leiste unten */
.reiterleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(249, 247, 244, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--linie); padding: 4px 8px calc(6px + env(safe-area-inset-bottom)); }
.reiterleiste-innen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; }
.reiterleiste .reiter { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; color: var(--meta); text-decoration: none; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; }
.reiterleiste .symbol svg { width: 24px; height: 24px; display: block; }
.reiterleiste .reiter.aktiv { color: var(--schwarz); font-weight: 600; }
.reiterleiste .reiter:focus-visible { outline-offset: -2px; }

/* Seitenleiste (nur Desktop) */
.seitenleiste { display: none; }
@media (min-width: 1100px) {
  body.app { --rand: 48px; padding-bottom: 0; padding-left: 248px; }
  body.app .kopf, body.app .reiterleiste { display: none; }
  body.app .rahmen { margin-inline: 0; }
  .seitenleiste { display: flex; flex-direction: column; gap: 32px; position: fixed; top: 0; bottom: 0; left: 0; z-index: 25; width: 248px; overflow-y: auto; padding: 32px 16px 24px; background: var(--grund); border-right: 1px solid var(--linie); }
  .seitenlogo { display: block; padding: 0 12px; }
  .seitenlogo img { height: 24px; width: auto; }
  .seitennav-innen { display: flex; flex-direction: column; gap: 4px; }
  .seitennav .reiter { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; }
  .seitennav .symbol svg { width: 20px; height: 20px; display: block; }
  .seitennav .reiter:hover { background: var(--fein); }
  .seitennav .reiter.aktiv { background: var(--schwarz); color: #fff; }
  .seitenteam { margin-top: auto; padding: 16px; border: 1px solid var(--linie); background: #fff; }
  .seitenteam small { display: block; font-size: 13px; line-height: 1.4; color: var(--meta); }
  .seitenteam a { display: block; margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--schwarz); text-decoration: none; }
}

/* Unterseiten im App-Rahmen: kompakter Seitenkopf, Fragen als Karten, dunkler Kasten als Karte */
body.app .seitenkopf > .rahmen { padding-block: 16px 8px; }
body.app .seitenkopf h1 { margin-top: 4px; }
body.app .zurueck { margin-top: 0; font-size: 15px; }
/* Reiter-Seiten brauchen kein „Zurück“ – dafür ist die Leiste unten da */
body.app[data-reiter="termine"] .zurueck, body.app[data-reiter="oki"] .zurueck { display: none; }
body.app[data-reiter="termine"] .seitenkopf h1 { margin-top: 0; }
body.app .seitenkopf .hinweis { margin-top: 16px; }
body.app .sektion { border-top: 0; }
body.app .sektion > .rahmen, body.app .seitenkopf + .sektion > .rahmen { padding-block: 16px; }
body.app .sektion h2 { margin-bottom: 4px; }
body.app .frage { background: #fff; border: 1px solid var(--linie); padding: 20px; margin-bottom: 12px; }
body.app .frage:first-of-type { padding-top: 20px; border-top: 1px solid var(--linie); }
body.app .frage.ist-fehler { border-color: var(--terra) !important; }
body.app .frage legend, body.app .frage > .titel { font-size: 17px; font-weight: 600; line-height: 1.4; }
body.app .absenden { border-top: 0; padding-top: 8px; }
body.app .termine { border-top: 0; display: grid; gap: 10px; }
body.app .termine li { background: #fff; border: 1px solid var(--linie); padding: 16px 20px; }
body.app .partner { background: #fff; border: 1px solid var(--linie); padding: 0 20px; }
body.app .partner li:last-child button { border-bottom: 0; }
body.app .partner button { font-size: 18px; min-height: 60px; }
/* Einkaufsvorteile nach Überbegriffen (24.10.2026) */
.vorteil-gruppen { display: grid; gap: 24px; margin-top: 8px; max-width: 680px; }
.vorteil-gruppen .partner { margin-top: 8px; }
body.app .sektion.dunkel { background: transparent; padding: 8px var(--rand) 24px; }
body.app .sektion.dunkel > .rahmen { background: var(--schwarz); padding: 24px; max-width: 780px; margin-inline: auto; }
body.app .dunkel h2 { font-size: 20px; }
body.app .dunkel .tel { font-size: 26px; margin-top: 8px; }
body.app .dunkel .fuss { margin-top: 20px; padding-top: 16px; font-size: 14px; }
body.app .dunkel .fuss img { display: none; }
@media (min-width: 1100px) { body.app .sektion.dunkel > .rahmen { margin-inline: 0; } }

/* Karten, Kacheln, Startseite */
.karte { background: #fff; border: 1px solid var(--linie); overflow: hidden; }
.karte-innen { padding: 20px; }
.ueber { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.ueber.warm { color: #9A4F42; }
.ueber.warm::before { content: ""; width: 8px; height: 8px; background: var(--terra); flex: none; }
body.app .karte h2 { font-size: 20px; margin-top: 8px; }
.karte .text { margin-top: 6px; font-size: 15px; line-height: 1.5; color: #555; }
.karte .knopf { margin-top: 18px; min-height: 48px; padding: 12px 22px; font-size: 15px; }
.start > .rahmen { padding-block: 24px 16px; }
.raster { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.spalte { display: contents; }
.k-naechster { order: 1; } .k-projekt { order: 2; } .k-termin { order: 3; } .k-bereiche { order: 4; } .k-oki { order: 5; } .k-team { order: 6; }
.k-naechster .knopf { width: 100%; }
.projekt-bild { width: 100%; height: 190px; object-fit: cover; }
.fortschritt { display: flex; gap: 4px; margin-top: 16px; }
.fortschritt span { flex: 1; height: 4px; background: var(--linie); }
.fortschritt .erledigt { background: var(--schwarz); }
.fortschritt .jetzt { background: var(--terra); }
.schritt-zeile { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; color: var(--meta); }
.schritt-zeile b { color: var(--schwarz); font-weight: 600; }
.fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fein); }
.fakt small { display: block; font-size: 12px; color: var(--meta); }
.fakt b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--schwarz); }
.textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--schwarz); text-decoration: none; }
.textlink svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.textlink:hover svg { transform: translateX(3px); }
.termin-zeile { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; }
.kalenderblatt { flex: none; width: 68px; display: flex; flex-direction: column; text-align: center; background: #fff; border: 1px solid var(--linie); }
.kalenderblatt .monat { background: var(--terra); color: var(--schwarz); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 0; }
.kalenderblatt .tag { font-size: 28px; font-weight: 600; line-height: 1; color: var(--schwarz); padding-top: 8px; }
.kalenderblatt .wtag { font-size: 12px; color: var(--meta); padding: 4px 0 8px; }
.termin-zeile h3 { font-size: 17px; margin-top: 2px; }
.termin-zeile p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--meta); }
.bestaetigt { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--schwarz); }
.bestaetigt svg { width: 16px; height: 16px; }
.abschnitt, body.app h2.abschnitt { font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); }
.k-bereiche { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.kachel { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; height: 100%; min-height: 140px; padding: 16px; background: #fff; border: 1px solid var(--linie); color: inherit; text-decoration: none; transition: border-color 0.2s ease; }
.kachel:hover { border-color: var(--schwarz); }
.kachel .symbol svg { width: 26px; height: 26px; display: block; color: var(--schwarz); }
.kachel b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--schwarz); -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
.kachel small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--meta); }
.kachel .marke { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--meta); }
.kachel .marke.wartet { color: #9A4F42; }
.kachel .marke.wartet::before { content: ""; width: 7px; height: 7px; background: var(--terra); flex: none; }
.kachel .marke.erledigt { color: var(--schwarz); }
.kachel .marke svg { width: 14px; height: 14px; }
.bald-zeile { font-size: 14px; color: var(--meta); }
.k-oki { background: var(--schwarz); border-color: var(--schwarz); }
.k-oki .ueber { color: #B8B3AA; }
body.app .k-oki h2 { color: #fff; }
.k-oki .text { color: #D6D1C8; }
.oki-form { display: flex; margin-top: 18px; border: 1px solid #4A4844; }
.oki-form:focus-within { border-color: #fff; }
.oki-form input { flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; background: transparent; border: 0; color: #fff; font-size: 16px; }
.oki-form input::placeholder { color: #A8A39A; }
.oki-form input:focus { outline: none; }
.oki-form button { width: 52px; flex: none; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; }
.oki-form button svg { width: 18px; height: 18px; }
.oki-form button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.team-zeile { display: flex; gap: 16px; align-items: center; }
.team-zeile img { width: 84px; height: 84px; object-fit: cover; object-position: 50% 18%; flex: none; }
body.app .team-zeile h2 { font-size: 17px; margin-top: 4px; }
.team-zeile .text { margin-top: 2px; font-size: 14px; }
.knopf-zeile { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.knopf-zeile .knopf { flex: 1 1 140px; margin-top: 0; padding-inline: 16px; }
.knopf .symbol svg, .knopf > svg { width: 18px; height: 18px; display: block; }
.app-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 24px; padding: 24px 0 8px; }
.app-fuss a, .app-fuss button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0; color: var(--meta); font-size: 14px; text-decoration: none; cursor: pointer; }
.app-fuss a:hover, .app-fuss button:hover { color: var(--schwarz); }
@media (min-width: 700px) {
  .start > .rahmen { padding-top: 32px; }
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .projekt-bild { height: 250px; }
  .k-naechster .knopf { width: auto; }
}
@media (min-width: 1100px) {
  .start > .rahmen { padding-top: 40px; }
  .raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
  .spalte { display: flex; flex-direction: column; gap: 24px; }
  .k-projekt.mit-bild { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .k-projekt.mit-bild .projekt-bild { height: 100%; min-height: 280px; }
}

/* Projekt-Seite: Schritte untereinander */
.schritte-liste { list-style: none; margin: 0; padding: 4px 20px; }
.schritte-liste li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--fein); }
.schritte-liste li:last-child { border-bottom: 0; }
.schritte-liste .marke { flex: none; width: 14px; height: 14px; margin-top: 5px; border: 1.5px solid var(--feld); background: #fff; }
.schritte-liste .erledigt .marke { background: var(--schwarz); border-color: var(--schwarz); }
.schritte-liste .jetzt .marke { background: var(--terra); border-color: var(--terra); }
.schritte-liste b { display: block; font-size: 16px; font-weight: 600; color: var(--schwarz); }
.schritte-liste small { display: block; margin-top: 2px; font-size: 14px; color: var(--meta); }
.schritte-liste .jetzt .zustand { color: #9A4F42; font-weight: 500; }
.schritte-liste .offen b { color: var(--meta); }
.stapel { display: grid; gap: 16px; }

/* Mehr-Seite: Menü als Liste */
.menue { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--linie); }
.menue li + li { border-top: 1px solid var(--fein); }
.menue a, .menue button { box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 20px; background: none; border: 0; color: var(--schwarz); font-size: 16px; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; }
.menue a:hover, .menue button:hover { background: var(--grund); }
.menue a:focus-visible, .menue button:focus-visible { outline: 2px solid var(--schwarz); outline-offset: -2px; }
.menue .symbol svg { width: 22px; height: 22px; display: block; }
.menue small { display: block; font-size: 13px; color: var(--meta); }
.menue .pfeil { margin-left: auto; color: var(--meta); flex: none; }
.menue .pfeil svg { width: 18px; height: 18px; display: block; }
.menue .leise-zeile { color: var(--meta); }

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

/* ════════════════════════════════════════════════════════════════════════════
   Design C „dunkel“ (25.10.2026) – nach Oktays Vorbild (dunkle Reise-App), Entwurf
   https://claude.ai/artifact/PLtGb3pJVNL6m43YsQ1n3c. Gilt für die angemeldete App (body.app)
   und die Anmeldung (body.anmeldung-dunkel). Dunkler Grund, Muschelkalk als Schrift und Knopf,
   Playfair Display für Überschriften, runde Karten, Pillen-Knöpfe, schwebende Leiste unten.
   Terrakotta nur für „Wartet auf Sie / läuft gerade / neu“.
   ════════════════════════════════════════════════════════════════════════════ */
body.app, body.anmeldung-dunkel {
  --grund: #121212; --schwarz: #F4F1EC; --text: #E6E1D8; --meta: #A9A39A; --linie: #2E2D2B;
  --feld: #4A4844; --fein: #1E1E1E; --karte: #1E1E1E; --karte2: #262626; --warm: #E09A8B;
  --serif: "Playfair Display", Georgia, serif;
  color-scheme: dark; background: #121212; color: #E6E1D8;
}
body.app { padding-bottom: calc(172px + env(safe-area-inset-bottom)); }   /* Platz für Leiste + o.KI-Knopf */
body.app h1, body.app .h-serif, body.app .seitenkopf h1, body.app .karte h2, body.app .abschnitt-serif {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: #F4F1EC; }
body.app h1 { font-size: 32px; line-height: 1.12; }
@media (min-width: 700px) { body.app h1 { font-size: 40px; } }
body.app .lead, body.app .unter { color: var(--meta); }
body.app :focus-visible { outline-color: #F4F1EC; }

/* Kopf: dunkel, weißes Logo (portal-rahmen.js tauscht das Bild), Glocke rechts */
body.app .kopf { background: rgba(18, 18, 18, 0.9); border-bottom-color: #232322; }
.glocke { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #242424; color: #F4F1EC; text-decoration: none; }
.glocke svg { width: 20px; height: 20px; display: block; }
.glocke .zahl { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #C8786A; color: #121212; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; }
body.app .konto { display: none; }

/* Leiste unten: schwebende Pille, nur Symbole (Beschriftung für Vorleseprogramme bleibt) */
body.app .reiterleiste { left: 50%; right: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 304px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; background: #262626; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.app .reiterleiste-innen { display: flex; justify-content: space-between; max-width: none; }
body.app .reiterleiste .reiter { width: 52px; min-height: 52px; height: 52px; border-radius: 50%; color: #CFC9BF; }
body.app .reiterleiste .reiter.aktiv { background: #F4F1EC; color: #121212; }
body.app .reiterleiste .beschriftung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Desktop-Seitenleiste */
@media (min-width: 1100px) {
  body.app .seitenleiste { background: #121212; border-right-color: #232322; }
  body.app .seitennav .reiter { color: #CFC9BF; border-radius: 999px; }
  body.app .seitennav .reiter:hover { background: #1E1E1E; }
  body.app .seitennav .reiter.aktiv { background: #F4F1EC; color: #121212; }
  body.app .seitenteam { background: #1E1E1E; border: 0; border-radius: 20px; }
  body.app .seitenteam a { color: #F4F1EC; }
}

/* Knöpfe als Pillen */
body.app .knopf { border-radius: 999px; background: #F4F1EC; color: #121212; }
body.app .knopf:hover { background: #FFFFFF; color: #121212; }
body.app .knopf.umriss { background: #2A2A2A; color: #F4F1EC; border: 0; }
body.app .knopf.umriss:hover { background: #333230; color: #F4F1EC; }
body.app .knopf[disabled] { background: #F4F1EC; }
body.app .leise { color: var(--meta); }
body.app .leise:hover { color: #F4F1EC; }

/* Karten, Kacheln, Listen */
body.app .karte { background: #1E1E1E; border: 0; border-radius: 24px; }
body.app .karte .text { color: #CFC9BF; }
body.app .ueber { color: var(--meta); }
body.app .ueber.warm { color: var(--warm); }
body.app .menue { background: #1E1E1E; border: 0; border-radius: 22px; overflow: hidden; }
body.app .menue li + li { border-top-color: #2A2A2A; }
body.app .menue a, body.app .menue button { color: #F4F1EC; }
body.app .menue a:hover, body.app .menue button:hover { background: #262626; }
body.app .menue .symbol { width: 40px; height: 40px; border-radius: 50%; background: #2A2A2A; display: inline-flex; align-items: center; justify-content: center; flex: none; }
body.app .menue .symbol svg { width: 20px; height: 20px; }
body.app .schritte-liste .marke { background: #1E1E1E; border-color: #4A4844; border-radius: 50%; }
body.app .schritte-liste .erledigt .marke { background: #F4F1EC; border-color: #F4F1EC; }
body.app .schritte-liste .jetzt .marke { background: #C8786A; border-color: #C8786A; }
body.app .schritte-liste li { border-bottom-color: #2A2A2A; }
body.app .schritte-liste .jetzt .zustand { color: var(--warm); }
body.app .projekt-bild { border-radius: 0; }
body.app .kalenderblatt { background: #262626; border: 0; border-radius: 16px; overflow: hidden; }
body.app .kalenderblatt .tag { color: #F4F1EC; }
.erklaer { margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: #262626; }
.erklaer p { margin: 0; font-size: 14px; line-height: 1.5; color: #E6E1D8; }
.erklaer p + p { margin-top: 8px; }
.erklaer b { color: #FFFFFF; }

/* Formulare (Liefer-Fragebogen, Termine, Zugang) */
body.app .frage { background: #1E1E1E; border: 0; border-radius: 22px; }
body.app .frage:first-of-type { border-top: 0; }
body.app .frage legend, body.app .frage > .titel { color: #F4F1EC; }
body.app .wahl label { background: #262626; border: 1px solid transparent; border-radius: 16px; color: #F4F1EC; }
body.app .wahl label:hover { border-color: #4A4844; }
body.app .wahl label::before { background: #121212; border-color: #5A5752; border-radius: 6px; }
body.app .wahl label:has(input:checked) { border-color: #F4F1EC; }
body.app .wahl label:has(input:checked)::before { background: #F4F1EC; border-color: #F4F1EC; box-shadow: inset 0 0 0 3px #121212; }
body.app .wahl label .zwei b { color: #F4F1EC; }
body.app .eingabe, body.app input.eingabe, body.app textarea.eingabe, body.app select.eingabe { background: #121212; border: 1px solid #3A3936; border-radius: 16px; color: #F4F1EC; }
body.app .eingabe:focus { border-color: #F4F1EC; }
body.app .hinweis { background: #262626; border-left: 0; border-radius: 16px; color: #E6E1D8; }
body.app .daten { border-color: #2E2D2B; border-radius: 16px; color: #F4F1EC; }
body.app .termine li { background: #1E1E1E; border: 0; border-radius: 20px; }
body.app .termine .status.fest { color: #F4F1EC; }
body.app .partner { background: #1E1E1E; border: 0; border-radius: 22px; }
body.app .partner button { color: #F4F1EC; border-bottom-color: #2A2A2A; }
body.app .partner button::after { border-color: #5A5752; border-radius: 50%; }
body.app .partner button[aria-pressed="true"]::after { background: #F4F1EC; border-color: #F4F1EC; }
body.app .partner button:focus-visible { outline-color: #F4F1EC; }
body.app .einwilligung input { accent-color: #F4F1EC; }
body.app .fehlerzeile { color: #F4F1EC; }
body.app .sektion.dunkel > .rahmen { background: #1E1E1E; border-radius: 24px; }
body.app .dunkel .tel { color: #F4F1EC; }

/* o.KI-Seite */
body.app .ob { background: #1E1E1E; border: 0; border-radius: 20px 20px 20px 6px; color: #E6E1D8; }
body.app .me { background: #F4F1EC; color: #121212; border-radius: 20px 20px 6px 20px; }
body.app .q { background: #1E1E1E; border: 0; border-radius: 999px; color: #F4F1EC; }
body.app .verlauf { border-top-color: #232322; }
body.app .eingabe-leiste { background: #121212; border-top-color: #232322; bottom: calc(92px + env(safe-area-inset-bottom)); }
body.app #msg { background: #1E1E1E; border: 0; border-radius: 999px; color: #F4F1EC; padding-inline: 20px; }
body.app #send { background: #F4F1EC; color: #121212; border-radius: 999px; padding: 0 18px; }
body.app #mic, body.app #snd { background: #242424; color: #F4F1EC; border-radius: 50%; }
@media (min-width: 1100px) { body.app .eingabe-leiste { bottom: 0; } }

/* Startseite Design C */
.gruss-zeile { display: flex; align-items: center; gap: 14px; }
.kuerzel { width: 52px; height: 52px; border-radius: 50%; background: #2A2A2A; display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--serif); font-size: 20px; color: #F4F1EC; }
.gruss-zeile .klein { margin: 0; font-size: 14px; color: var(--meta); }
.gruss-zeile h1 { font-size: 26px !important; line-height: 1.15; }
.neu-hinweis { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: 22px; background: #1E1E1E; color: #F4F1EC; text-decoration: none; }
.neu-hinweis .punkt-neu { width: 10px; height: 10px; border-radius: 50%; background: #C8786A; flex: none; }
.neu-hinweis b { display: block; font-size: 15px; font-weight: 600; }
.neu-hinweis span span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--meta); }
.chips { display: flex; gap: 8px; margin: 16px calc(-1 * var(--rand)) 0; padding: 0 var(--rand); overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #242424; color: #E6E1D8; font-size: 14px; text-decoration: none; white-space: nowrap; }
.chip:hover { background: #2E2D2B; color: #FFFFFF; }
.chip.an { background: #F4F1EC; color: #121212; font-weight: 500; }
.titel-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.titel-zeile h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: #F4F1EC; margin: 0; }
.titel-zeile a { color: #E6E1D8; font-size: 15px; text-decoration: none; }
.foto-karte { position: relative; display: block; height: 400px; border-radius: 28px; overflow: hidden; text-decoration: none; color: #FFFFFF; }
.foto-karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-karte .schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.85) 100%); }
.foto-karte .marke-oben { position: absolute; top: 16px; right: 16px; padding: 8px 14px; border-radius: 999px; background: #F4F1EC; color: #121212; font-size: 13px; font-weight: 500; }
.foto-karte .unten { position: absolute; left: 22px; right: 22px; bottom: 22px; }
.foto-karte .gross { display: block; font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.foto-karte .klein { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: #E6E1D8; }
.foto-karte .balken { display: flex; gap: 4px; margin-top: 14px; }
.foto-karte .balken span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.foto-karte .balken .erledigt { background: #F4F1EC; }
.foto-karte .balken .jetzt { background: #C8786A; }
.frei { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #F4F1EC; color: #121212; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.frei svg { width: 14px; height: 14px; }
.info-kacheln { display: flex; gap: 10px; }
.info-kachel { flex: 1 1 0; min-width: 0; padding: 14px; border-radius: 18px; background: #1E1E1E; color: #F4F1EC; text-decoration: none; }
.info-kachel b { display: block; font-family: var(--serif); font-weight: 500; font-size: 17px; }
.info-kachel span { display: block; margin-top: 6px; font-size: 13px; color: var(--meta); }
.zeilen-karte { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 24px; background: #1E1E1E; color: #F4F1EC; text-decoration: none; }
.zeilen-karte:hover { background: #242424; }
.zeilen-karte .rund { width: 52px; height: 52px; border-radius: 50%; background: #2A2A2A; display: flex; align-items: center; justify-content: center; flex: none; }
.zeilen-karte .rund svg { width: 24px; height: 24px; }
.zeilen-karte b { display: block; font-family: var(--serif); font-weight: 500; font-size: 20px; }
.zeilen-karte small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--meta); }
.zeilen-karte .pfeil { margin-left: auto; width: 18px; height: 18px; flex: none; color: var(--meta); }
.team-rund { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }

/* Unterlagen, Geräte, Neuigkeiten */
.geraet-zeile { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 78px; padding: 12px 14px; border: 0; border-radius: 22px; background: #1E1E1E; color: #F4F1EC; text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.geraet-zeile:hover { background: #242424; }
.geraet-zeile .rund { width: 48px; height: 48px; border-radius: 50%; background: #2A2A2A; display: flex; align-items: center; justify-content: center; flex: none; }
.geraet-zeile .rund svg { width: 24px; height: 24px; }
.geraet-zeile b { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.geraet-zeile small { display: block; margin-top: 2px; font-size: 13px; color: var(--meta); }
.geraet-zeile .etikett { margin-left: auto; flex: none; padding: 5px 10px; border-radius: 999px; background: #2E2D2B; color: #E6E1D8; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.stapel-eng { display: grid; gap: 10px; }
.ordner-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .ordner-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.punkte-liste { list-style: none; margin: 0; padding: 0; }
.punkte-liste li { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid #2E2D2B; }
.punkte-liste li:first-child { border-top: 0; padding-top: 6px; }
.punkte-liste .nr { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F4F1EC; color: #121212; font-size: 14px; font-weight: 600; }
.punkte-liste b { display: block; font-size: 16px; font-weight: 600; color: #F4F1EC; }
.punkte-liste p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #CFC9BF; }
.meldung { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 22px; background: #1E1E1E; color: #F4F1EC; text-decoration: none; }
.meldung.gelesen { background: transparent; border: 1px solid #2A2A2A; }
.meldung .rund { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #2A2A2A; display: flex; align-items: center; justify-content: center; flex: none; }
.meldung .rund svg { width: 22px; height: 22px; }
.meldung .neu-punkt { position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #C8786A; border: 2px solid #1E1E1E; }
.meldung b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.meldung p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #CFC9BF; }
.meldung time { display: block; margin-top: 6px; font-size: 12px; color: var(--meta); }
.angebot-zeile { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 22px; background: #1E1E1E; }
.angebot-zeile .rund { width: 48px; height: 48px; border-radius: 50%; background: #2A2A2A; display: flex; align-items: center; justify-content: center; flex: none; color: #F4F1EC; }
.angebot-zeile .rund svg { width: 24px; height: 24px; }
.angebot-zeile b { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; color: #F4F1EC; }
.angebot-zeile p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #CFC9BF; }

/* Anmeldung Design C: Foto über die ganze Fläche */
body.anmeldung-dunkel .kopf { position: absolute; top: 0; left: 0; right: 0; z-index: 2; border: 0; background: transparent; }
body.anmeldung-dunkel .kopf .portal-name { color: #F4F1EC; }
body.anmeldung-dunkel .anmeldung { position: relative; min-height: 100vh; min-height: 100dvh; display: block; }
body.anmeldung-dunkel .anmeldung .bild { position: absolute; inset: 0; aspect-ratio: auto; }
body.anmeldung-dunkel .anmeldung .bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.15) 18%, rgba(10,10,10,0.6) 36%, rgba(10,10,10,0.95) 58%); }
body.anmeldung-dunkel .anmeldung .seite { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; justify-content: flex-end; padding: 96px 24px 28px; gap: 24px; }
body.anmeldung-dunkel .anmeldung .block { max-width: 440px; gap: 16px; }
body.anmeldung-dunkel .anmeldung h1 { font-family: var(--serif); font-weight: 500; font-size: 46px; line-height: 1.02; color: #FFFFFF; letter-spacing: -0.01em; }
body.anmeldung-dunkel .anmeldung .unter, body.anmeldung-dunkel .hilfe, body.anmeldung-dunkel .feld label { color: #E6E1D8; }
body.anmeldung-dunkel .id-zeile input { min-height: 58px; border-radius: 999px; border-color: rgba(255,255,255,0.28); background: rgba(18,18,18,0.55); color: #F4F1EC; padding-left: 22px; }
body.anmeldung-dunkel .id-zeile input::placeholder { color: #B8B3AA; }
body.anmeldung-dunkel .id-zeile input:focus { border-color: #F4F1EC; }
body.anmeldung-dunkel .zeigen { color: #CFC9BF; border-radius: 999px; }
body.anmeldung-dunkel .knopf { border-radius: 999px; background: #F4F1EC; color: #121212; min-height: 56px; }
body.anmeldung-dunkel .knopf:hover { background: #FFFFFF; }
body.anmeldung-dunkel .hilfe a, body.anmeldung-dunkel .fuss-hell a { color: #F4F1EC; }
body.anmeldung-dunkel .fuss-hell { color: #CFC9BF; margin-top: 0; }
body.anmeldung-dunkel .fehlerzeile { color: #FFFFFF; }
.sicher-zeile { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #CFC9BF; }
.sicher-zeile svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 1024px) {
  body.anmeldung-dunkel .anmeldung .seite { padding: 120px 96px 48px; max-width: 720px; }
}
/* Design C: Reihenfolge der Karten am Handy (Desktop: zwei Spalten) */
/* 25.10.2026 Oktay: Unterlagen „nach oben, direkt unter die Reise“; 26.10.: „Wir melden uns“-Karte nur wenn etwas zu tun ist, dann ganz oben */
.k-naechster { order: 0; } .k-projekt { order: 1; } .k-unterlagen { order: 2; } .k-termin { order: 3; }
.k-vorteile { order: 5; } .k-empfehlen { order: 5; } .k-gilde { order: 6; } .k-interior { order: 7; } .k-team { order: 8; }
@media (min-width: 1100px) { .k-team { order: 0; } }   /* Desktop: Team-Bild oben in der rechten Spalte (Oktay 26.10.) */
/* o.KI als kleiner schwebender, pulsierender Knopf rechts unten (Oktay 25.10.2026, „nicht als Zeile“);
   am Handy über der Leiste, am Desktop in der Ecke. Ohne Bewegung bei „Bewegung reduzieren“ (Regel weiter oben). */
.oki-knopf { display: none; }
body.app .oki-knopf { display: flex; align-items: center; justify-content: center; position: fixed; right: 16px; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 31; width: 52px; height: 52px; border-radius: 50%; background: #C8786A; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); font: 600 15px/1 'DM Sans', sans-serif; letter-spacing: 0.01em; text-decoration: none; }
body.app .oki-knopf::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: #C8786A; animation: oki-puls 2.6s ease-out infinite; }
body.app .oki-knopf:focus-visible { outline: 2px solid #F4F1EC; outline-offset: 3px; }
@keyframes oki-puls { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
@media (min-width: 1100px) { body.app .oki-knopf { right: 32px; bottom: 32px; } }
.neu-hinweis .pfeil { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--meta); }
.neu-hinweis > span:nth-child(2) { flex: 1; min-width: 0; }
/* Garantie und Kundendienst in der Geräte-Ansicht (25.10.2026) */
.link-liste { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.karte-innen .mit-abstand { margin-top: 28px; }
.karte-innen .knopf + .meta { margin-top: 10px; }
/* 10 Jahre Garantie über Garantiemax (25.10.2026): eigener Kasten in der Garantie-Karte und unter der Geräteliste */
.garantie-plus { margin-top: 24px; padding: 18px; border-radius: 18px; background: #262626; }
.karte-innen > .garantie-plus:first-child { margin-top: 0; padding: 0; background: transparent; }
.garantie-plus .text { margin-bottom: 14px; }
/* Kundenreise kompakt unter dem Bild der Startseite (25.10.2026) */
.reise-kompakt { margin-top: 12px; }
.reise-kompakt li { padding: 11px 0; gap: 14px; }
.reise-kompakt b { font-size: 15px; }
.reise-kompakt small { font-size: 13px; }
/* Startseite 26.10.2026 (Oktay): großes Team-Bild, kompakte Kundenreise mit Link zu allen Schritten */
.k-team .team-foto { display: block; width: 100%; height: 260px; object-fit: cover; object-position: 50% 22%; }
.reise-kompakt li.reise-alle { display: block; padding: 12px 0 4px; border-bottom: 0; }
.reise-kompakt .reise-alle a { color: var(--schwarz); font-size: 15px; font-weight: 500; text-decoration: none; }
.reise-kompakt .reise-alle a::after { content: " →"; }
/* Weiterempfehlen (Fassung 10.10, 26.10.2026) */
.reiter-wahl { margin: 0 0 18px; }
.empf-link { margin: 16px 0 14px; padding: 14px 16px; border-radius: 16px; background: #262626; color: #F4F1EC; font-size: 15px; word-break: break-all; }
.empf-liste { display: grid; gap: 8px; margin-top: 14px; }
.empf-zeile { padding: 12px 14px; border-radius: 16px; background: #262626; }
.empf-zeile b { display: block; font-weight: 600; color: #F4F1EC; }
.empf-zeile small { display: block; margin-top: 2px; font-size: 13px; color: var(--meta); }
.empf-zeile.gekauft b { color: var(--warm); }
/* Zahlungen mit Dank (Fassung 10.11, 26.10.2026) */
.zahlung-zeile { cursor: default; }
.zahlung-zeile .rund { color: var(--warm); }
/* Einkaufsvorteile nach Räumen (03.11.2026, Werkstatt): Bildkacheln, Tippen zeigt nur die Partner für diesen Raum */
.raum-titel { margin: 28px 0 12px; }
.raum-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 680px; }
.raum-kachel { position: relative; display: block; height: 132px; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #262626; color: #FFFFFF; font: inherit; text-align: left; cursor: pointer; transition: opacity 0.2s ease, box-shadow 0.2s ease; }
.raum-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.raum-kachel .schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.8) 100%); }
.raum-kachel .name { position: absolute; left: 14px; right: 14px; bottom: 12px; font-family: var(--serif); font-size: 20px; line-height: 1.15; }
.raum-kachel.ohne-bild { background: linear-gradient(160deg, #3A332E 0%, #1E1E1E 100%); }
.raum-kacheln.gewaehlt .raum-kachel[aria-pressed="false"] { opacity: 0.5; }
.raum-kachel[aria-pressed="true"] { box-shadow: 0 0 0 2px #F4F1EC; }
.raum-kachel:focus-visible { outline: 2px solid #F4F1EC; outline-offset: 2px; }
.raum-kacheln + .raum-hinweis[hidden] + .vorteil-gruppen { margin-top: 28px; }
.raum-hinweis { margin: 16px 0 20px; max-width: 680px; padding: 16px 18px; border-radius: 18px; background: #262626; color: #F4F1EC; font-size: 15px; line-height: 1.45; }
.raum-hinweis .meta { margin-top: 6px; }
.raum-hinweis .textlink { color: #F4F1EC; }
.raum-alle { display: block; min-height: 44px; padding: 0; background: none; border: 0; color: #E6E1D8; font: inherit; text-decoration: underline; cursor: pointer; }
@media (min-width: 700px) {
  .raum-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raum-kachel { height: 168px; }
}
/* Auszeit in Südtirol (03./04.11.2026, Werkstatt): kurzer Satz unter dem Überbegriff, Ort klein unter dem Hotelnamen */
.gruppe-text { margin: 6px 0 0; max-width: 560px; color: var(--meta); font-size: 15px; line-height: 1.45; }
.partner .ort { display: block; margin-top: 2px; color: var(--meta); font-size: 14px; font-weight: 400; letter-spacing: 0; }
/* Vorteile der Gilde (04.11.2026, Werkstatt): Gilde-Logo im Seitenkopf, Übersicht Einkauf/Licht/Kompass/Forum, Einkaufsvorteile darunter */
.gilde-logo { display: block; width: 230px; max-width: 72%; height: auto; margin: 22px 0 6px -16px; }
body:not(.app) .gilde-logo { filter: invert(1); }
.gilde-vorteile { max-width: 680px; }
.einkauf-sektion { scroll-margin-top: 72px; }
.einkauf-titel h2 { margin: 0 0 14px; }
/* ═══ Investoren-Demo 05.11.2026 (Werkstatt): Startseite mit Kizil-Bereich vorne, Gilde-Bereich mit Bildkacheln ═══ */
.k-wunschliste { order: -1; } .k-naechster { order: 0; } .k-projekt { order: 1; } .k-unterlagen { order: 2; } .k-termin { order: 3; }
.k-team { order: 4; } .k-gilde-bereich { order: 5; } .k-empfehlen { order: 6; } .k-interior { order: 7; }
@media (min-width: 1100px) { .k-team { order: 0; } }
.zeilen-karte .rund.foto { overflow: hidden; background: #2A2A2A; }
.zeilen-karte .rund.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Neuigkeiten: immer da, ohne Neues schmal und leise */
.neu-hinweis.leer { display: inline-flex; max-width: 100%; padding: 10px 16px; gap: 10px; }
.neu-hinweis.leer .punkt-neu { background: #5A5752; width: 8px; height: 8px; }
.neu-hinweis.leer b { font-size: 14px; }
.neu-hinweis.leer span span { display: inline; margin: 0 0 0 6px; font-size: 13px; }
/* Gilde-Bereich */
.k-gilde-bereich { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.gilde-kopf .gilde-logo { margin: 0 0 4px -14px; width: 190px; }
.gilde-kopf h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; color: #F4F1EC; }
.gilde-kopf .text { margin-top: 4px; color: var(--meta); }
.foto-karte.held { height: 440px; }
.foto-karte.held .gross { font-size: 36px; }
.foto-karte .knopf.hell { display: inline-flex; margin-top: 16px; background: #F4F1EC; color: #121212; border-color: #F4F1EC; }
.bild-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bild-kachel { position: relative; display: block; height: 210px; border-radius: 22px; overflow: hidden; color: #FFFFFF; text-decoration: none; background: #262626; }
.bild-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bild-kachel .schleier { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.82) 100%); }
.bild-kachel .unten { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.bild-kachel .wort { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.1; hyphens: manual; }
.bild-kachel .serif-kursiv { font-style: italic; }
.bild-kachel .ueber-wort { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E6E1D8; margin-bottom: 2px; }
.bild-kachel .klein { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: #E6E1D8; }
.bild-kachel .forum-logo { position: static; display: block; width: 120px; height: auto; margin-left: -4px; }
.bild-kachel.ohne-bild { background: linear-gradient(160deg, #4A3F37 0%, #1E1E1E 100%); }
@media (min-width: 700px) { .bild-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bild-kachel { height: 240px; } }
@media (min-width: 1100px) { .bild-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bild-kachel .forum-logo { mix-blend-mode: screen; }
.bild-kachel .wortmarke { position: static; display: block; width: 100%; max-width: 190px; height: auto; margin-left: -4px; }
.k-team .team-foto.quer { object-position: 50% 45%; }
/* Vorteile als Shop (Investoren-Demo 05.11.2026): Held oben, Reiter, Partner als Kacheln mit Bild je Kategorie */
.einkauf-held { margin-bottom: 8px; }
.einkauf-held h2.gross { margin: 0; color: #FFFFFF; font-size: 40px; }
.einkauf-held .klein { max-width: 520px; }
.kat-wahl { margin-top: 20px; margin-bottom: 4px; }
.kat-wahl .chip { border: 0; font: inherit; font-size: 14px; cursor: pointer; }
.gruppe-bild { display: block; width: 100%; height: 150px; margin: 10px 0 0; border-radius: 20px; object-fit: cover; }
body.app .vorteil-gruppen .partner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; padding: 0; background: none; border: 0; border-radius: 0; }
body.app .vorteil-gruppen .partner li[hidden] { display: none; }
body.app .vorteil-gruppen .partner button { position: relative; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0; min-height: 104px; padding: 16px 16px 14px; border: 1px solid #2A2A2A; border-radius: 20px; background: #1E1E1E; font-family: var(--serif); font-size: 19px; line-height: 1.2; box-sizing: border-box; }
body.app .vorteil-gruppen .partner li:last-child button { border-bottom: 1px solid #2A2A2A; }
body.app .vorteil-gruppen .partner button::after { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; }
body.app .vorteil-gruppen .partner button[aria-pressed="true"] { border-color: #F4F1EC; background: #262626; }
body.app .vorteil-gruppen .partner .ort { font-family: var(--sans, inherit); }
@media (min-width: 700px) { body.app .vorteil-gruppen .partner { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gruppe-bild { height: 190px; } }
/* Gilde Forum (Investoren-Demo 05.11.2026): Gerätemarken als kleine Schilder */
.angebot-zeile .marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.angebot-zeile .marken span { padding: 5px 10px; border-radius: 999px; background: #262626; color: #E6E1D8; font-size: 13px; }
/* o.KI-Knopf rot-purpur wie die O-Ki-Wan-Kugel im Launchpad (nur Optik; Sprechen kommt später, 05.11.2026) */
body.app .oki-knopf::before { background: linear-gradient(140deg, #9E1B32 0%, #6A2C7E 100%); }
body.app .oki-knopf { background: linear-gradient(140deg, #9E1B32 0%, #6A2C7E 100%); }
/* Zugang nach Feierabend als Kalender (Investoren-Demo 05.11.2026) */
.kalender .kal-tage { margin-top: 8px; }
.kalender .kal-tage .chip { border: 0; font: inherit; font-size: 14px; cursor: pointer; }
.kal-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.kal-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 56px; padding: 8px 4px; border: 1px solid #3A3A3A; border-radius: 14px; background: #1E1E1E; color: #F4F1EC; font: inherit; cursor: pointer; }
.kal-slot b { font-size: 15px; font-weight: 600; }
.kal-slot small { font-size: 11px; color: var(--meta); }
.kal-slot:disabled { cursor: default; opacity: 0.55; border-color: transparent; }
.kal-slot.offen { background: #262626; }
.kal-slot.event { background: #3B2442; } .kal-slot.event small { color: #E6C9EE; }
.kal-slot.vorbei { opacity: 0.3; }
.kal-slot.an { background: #F4F1EC; color: #121212; border-color: #F4F1EC; } .kal-slot.an small { color: #121212; }
.kal-legende { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--meta); }
.kal-legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; border: 1px solid #3A3A3A; background: #1E1E1E; }
.kal-legende .kl-offen::before { background: #262626; border-color: transparent; } .kal-legende .kl-event::before { background: #3B2442; border-color: transparent; }
.kal-wahl { margin-top: 16px; padding-top: 16px; border-top: 1px solid #2A2A2A; }
.kal-wahl .knopf { margin-top: 12px; }
.kal-wahl .meta { margin-top: 10px; }
@media (min-width: 700px) { .kal-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Sichtprüfung Brain 05.11.2026 08:05: kein Lade-Schleier mehr, Wortmarken größer und besser lesbar */
.bildschirm { animation: none; }
.bild-kachel .wortmarke { max-width: none; width: 118%; margin-bottom: 2px; }
.bild-kachel .schleier { background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.92) 100%); }
/* Korrekturen Oktay 06.11.2026: Team-Karte mit rundem Telefon- und WhatsApp-Knopf (schwarz-weiß) neben „Termin buchen“ */
.kontakt-zeile { align-items: center; }
.knopf-zeile .knopf.rund-knopf { flex: 0 0 48px; width: 48px; min-height: 48px; height: 48px; padding: 0; }
.knopf.rund-knopf svg { width: 22px; height: 22px; display: block; }
.wa-hinweis { margin-top: 12px; font-size: 14px; }
.wa-hinweis a { color: inherit; }
/* Termin buchen mit Monatskalender (Oktay 06.11.2026, „ähnlich wie bei Calendly“) */
.monat-kal { max-width: 480px; margin-top: 6px; }
.mk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.mk-titel { margin: 0; font-family: var(--serif); font-size: 21px; color: #F4F1EC; }
.mk-pfeil { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #2A2A2A; color: #F4F1EC; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.mk-pfeil:hover { background: #333230; }
.mk-pfeil:disabled { opacity: 0.3; cursor: default; }
.mk-wt, .mk-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
.mk-wt span { padding: 4px 0; font-size: 12px; color: var(--meta); }
.mk-tag { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 38px; padding: 0; text-align: center; border: 0; border-radius: 50%; background: transparent; color: #5E5A55; font: inherit; font-size: 15px; cursor: default; }
.mk-tag.frei { background: #2C2C2C; color: #F4F1EC; font-weight: 600; cursor: pointer; }
.mk-tag.frei:hover { background: #3A3936; }
.mk-tag.heute { box-shadow: inset 0 0 0 1px #5E5A55; }
.mk-tag.an, .mk-tag.an:hover { background: #F4F1EC; color: #121212; }
.mk-tag:focus-visible, .mk-pfeil:focus-visible { outline: 2px solid #F4F1EC; outline-offset: 2px; }
.mk-zeiten { margin-top: 18px; padding-top: 16px; border-top: 1px solid #2A2A2A; }
.mk-zeiten-titel { margin: 0; font-weight: 600; color: #F4F1EC; }
.mk-zeiten .kal-slot { min-height: 46px; justify-content: center; cursor: pointer; }
.mk-auswahl { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: #262626; color: #F4F1EC; }
.garantie-plus .garantie-link { margin: -4px 0 16px; }
/* Gilde-Menü mit echten Logos statt Symbolen (Oktay 06.11.2026: „Das müssen wir mit besseren Logos versehen.“) */
.gilde-vorteile a { padding-top: 16px; padding-bottom: 16px; }
.marken-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.marke-logo { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.marke-logo img { display: block; width: auto; max-width: 100%; }
.marke-logo .lg-svg { height: 40px; }
.marke-logo .lg-gilde { height: 30px; }
.marke-logo .lg-forum { height: 26px; }
.lg-zusatz { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #F4F1EC; line-height: 1.15; }
/* Neuigkeiten gleich groß wie die Digitale Wunschliste (Oktay 06.11.2026) */
.k-neu { order: -2; }
.k-neu .rund { position: relative; }
.k-neu .punkt-neu { position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #C8786A; box-shadow: 0 0 0 2px #1E1E1E; }
.k-neu.leer .punkt-neu { display: none; }
.k-neu small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* gleiche Höhe wie die Wunschliste, ganze Meldung unter „Neuigkeiten“ */
.k-neu, .k-wunschliste { min-height: 114px; }   /* beide Felder gleich hoch, auch wenn die Meldung zwei Zeilen hat */
.kal-slot.vergeben { opacity: 0.45; } .kal-slot.vergeben b { text-decoration: line-through; }   /* 10.13: vergebene Zeit (06.11.2026) */
/* Produktfotos bei „Ihre Geräte“ (Fassung 10.14, Oktay 06.11.2026) */
.geraet-zeile .rund.produkt { background: #FFFFFF; overflow: hidden; }
.geraet-zeile .rund.produkt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.geraet-foto { display: block; width: 140px; height: 140px; margin: 18px 0 14px; border-radius: 20px; background: #FFFFFF; object-fit: contain; }