/* Showlofts Graphit Glow – freigegebene Designrichtung 06 */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --akzent: #f4f4f2;
  --akzent-hell: rgba(255, 255, 255, .07);
  --intern: #f1f1ef;
  --intern-bg: rgba(255, 255, 255, .055);
  --bg: #08090a;
  --karte: #0d0f10;
  --text: #f4f4f2;
  --text-2: #929497;
  --rand: rgba(255, 255, 255, .17);
  --rand-hell: rgba(255, 255, 255, .48);
  --schatten: 0 22px 70px rgba(0, 0, 0, .4);
  --glow: 0 0 9px rgba(255, 255, 255, .45), 0 0 30px rgba(255, 255, 255, .08);
  --ok: #e8e8e5;
}

html { font-size: 17px; background: #08090a; }
body {
  background:
    radial-gradient(ellipse 60% 34% at 50% 22%, rgba(255, 255, 255, .035), transparent 72%),
    linear-gradient(180deg, #08090a 0%, #0a0b0c 52%, #08090a 100%);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-weight: 350;
  letter-spacing: -.012em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 100% 5px;
}

button, input, textarea, select { font-family: inherit; letter-spacing: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
:focus-visible { outline: 1px solid rgba(255,255,255,.9); outline-offset: 4px; }

/* Schmale Sicherheitsanzeige statt farbiger Warnleiste */
.intern-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 35;
  min-height: 30px;
  padding: .28rem 1rem;
  gap: .7rem;
  background: #0c0d0e;
  color: #a9aaac;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 0;
  backdrop-filter: blur(18px);
  font-size: .72rem;
  font-weight: 420;
  letter-spacing: .035em;
}
.intern-banner button {
  padding: .14rem .55rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.4);
  border-radius: 0;
  background: transparent;
  color: #ececea;
  font-size: .7rem;
  font-weight: 420;
}

/* Kopfleiste */
.topbar {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(.9rem, 2vw, 1.5rem);
  min-height: 80px;
  padding: 0 clamp(1.4rem, 3vw, 2.4rem);
  background: rgba(8, 9, 10, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(18px) saturate(120%);
}
.logo-chip {
  justify-self: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #f2f2f0;
  font-size: 1rem;
  font-weight: 430;
  letter-spacing: -.025em;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* Nachts in Weiß wie die übrige Kopfzeile - das farbige Logo ginge auf dem
   dunklen Grund unter. Tagsüber in seinen Originalfarben. */
.logo-chip img {
  display: block;
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  transition: opacity .2s ease;
}
.logo-chip:hover img, .logo-chip:focus-visible img { opacity: 1; }
:root[data-modus="tag"] .logo-chip img { filter: none; opacity: 1; }
.topbar nav {
  grid-column: 2;
  justify-self: center;
  align-self: stretch;
  display: flex;
  /* Der Chef hat fünf Reiter (zwei Prüfkörbe) - auf dem Tablet rücken sie
     enger zusammen, statt zweizeilig umzubrechen. */
  gap: clamp(1rem, 2.2vw, 2.4rem);
  margin: 0;
  /* Reicht der Platz trotzdem nicht, lässt sich die Leiste seitlich wischen -
     statt dass die Seite breiter wird und Knöpfe aus dem Bild rutschen.
     max-width hält sie in ihrer Spalte: Ohne ragte sie mittig über Logo
     und Symbole hinaus. */
  min-width: 0;
  max-width: 100%;
  /* Eine wischbare Leiste schneidet alles ab, was über ihren Rand ragt. Die
     Zahl am Prüfkorb sitzt halb über dem Reiter - dieser Innenraum hält sie
     samt Kreis in der Leiste. Sonst war sie angeschnitten, und die Leiste
     ließ sich um genau dieses Stück hin- und herschieben. */
  padding: 0 14px;
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
/* Chef: Umschalter Berlin / Muenchen in der Reiterleiste */
.standort-schalter { display: inline-flex; align-items: center; gap: 2px; margin-left: .35rem; padding: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; flex: none; align-self: center; }
.standort-schalter button { border: 0; background: none; color: #a3a4a6; font: inherit; font-size: .82rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; position: relative; white-space: nowrap; }
.standort-schalter button:hover { color: #fff; }
.standort-schalter button[aria-pressed="true"] { background: rgba(255,255,255,.14); color: #fff; }
.standort-schalter .badge { top: -7px; right: -5px; transform: none; }
.nav-btn {
  min-width: 62px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 .1rem;
  border-radius: 0;
  color: #858689;
  font-size: .95rem;
  font-weight: 340;
}
.nav-btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: transparent;
}
.nav-btn:hover { color: #d9d9d7; }
.nav-btn.aktiv { background: none; color: #fff; }
.nav-btn.aktiv::after { background: #fff; box-shadow: var(--glow); }
.topbar-aktionen {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #b8b9bb;
}
.icon-btn:hover { border-color: rgba(255,255,255,.18); color: #fff; box-shadow: 0 0 18px rgba(255,255,255,.06); }
.icon-btn.aktiv { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.05); color: #fff; }
/* Polizeistern fuer das Design Vice: an = gefuellt, aus = nur Umriss */
#designBtn.aktiv svg .stern { fill: currentColor; }
.icon-btn svg,
.rund-btn svg,
.frage-suche svg,
.frage-typ-icon svg,
.frage-aktion svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Die Zaehlblase haengt am Wort "Pruefkorb", nicht am oberen Rand der
   Kopfleiste. Die Knoepfe sind hier so hoch wie die ganze Leiste - ohne
   diese Ausrichtung schwebte die Blase weit ueber der Beschriftung. */
.badge {
  top: 50%;
  right: -6px;
  transform: translateY(-100%);
  background: #f2f2f0;
  color: #090a0b;
  box-shadow: var(--glow);
}

/* Grundlayout und Typografie */
/* Breiter Inhaltsbereich, damit die Besucher-Tabelle am PC mit allen Spalten
   ohne Wischen passt (Betreiber, 19.10.2026). Fragefeld, Antwort und
   Logo-Gitter bleiben bei der gewohnten Breite. */
main { max-width: 1400px; margin: 0 auto; padding: clamp(4rem, 8vh, 6.5rem) 1.4rem 6rem; }
.frage-box, #antwortBereich, .logo-gitter { max-width: 1060px; margin-left: auto; margin-right: auto; }
h1 {
  margin: 0 0 2.5rem;
  color: #f7f7f5;
  font-size: clamp(2.5rem, 4.1vw, 3.45rem);
  font-weight: 190;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-align: center;
  text-shadow: 0 0 24px rgba(255,255,255,.13);
}
h2 { color: #c5c6c7; font-size: .92rem; font-weight: 330; letter-spacing: -.015em; }
.hinweis { color: var(--text-2); font-size: .84rem; font-weight: 330; }
.karte {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.008) 60%);
  /* Statt des schweren Schlagschattens ein zarter Lichtstreif oben. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* Fragefeld */
.frage-box {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .3rem;
  min-height: 104px;
  padding: 0 1.15rem;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(255,255,255,.018), rgba(255,255,255,.008));
  box-shadow: 0 0 10px rgba(255,255,255,.2), 0 0 42px rgba(255,255,255,.045), inset 0 0 16px rgba(255,255,255,.018);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.frage-box:focus-within {
  border-color: rgba(255,255,255,.95);
  box-shadow: 0 0 12px rgba(255,255,255,.32), 0 0 55px rgba(255,255,255,.075), inset 0 0 18px rgba(255,255,255,.025);
}
.frage-suche { display: grid; place-items: center; color: #f1f1ee; filter: drop-shadow(0 0 5px rgba(255,255,255,.48)); }
.frage-box textarea {
  min-height: 74px;
  max-height: 112px;
  padding: 1.45rem .5rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f4f4f2;
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.45;
  resize: none;
  overflow-y: hidden;
}
.frage-box textarea:focus { outline: 0; border: 0; }
.frage-box textarea::placeholder { color: #747679; opacity: 1; }
.rund-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: transparent;
  color: #d7d7d5;
  transition: color .18s ease, transform .18s ease, filter .18s ease;
}
.rund-btn:hover { color: #fff; transform: translateY(-1px); filter: drop-shadow(0 0 7px rgba(255,255,255,.45)); }
.btn-mikro { background: transparent; }
.btn-mikro.aufnahme { background: rgba(255,255,255,.12); color: #fff; }
.btn-senden { color: #fff; }
.btn-senden svg { width: 30px; height: 30px; stroke-width: 1.2; filter: drop-shadow(0 0 5px rgba(255,255,255,.42)); }

/* Antwort und Neuigkeiten */
.antwort { margin-top: 1.6rem; }
.antwort .kern { font-size: 1.65rem; font-weight: 280; letter-spacing: -.035em; }
.quelle, .news-meta { color: #77797c; font-size: .74rem; font-weight: 330; }
.intern-kasten {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.035);
  color: #e8e8e5;
}
.live-btn { border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-weight: 400; }
/* ── Dashboard in Kacheln ──
   Vom Betreiber gewuenscht: Kalender links, Neuigkeiten rechts, alles
   klarer voneinander abgegrenzt - "so wie der Chatbereich". Die Kacheln
   nehmen deshalb die Sprache des Fragefelds auf (heller Rahmen, runde
   Ecken, leichtes Leuchten), leuchten aber schwaecher: Das Fragefeld soll
   der Blickfang bleiben, mit dem man anfaengt. */
.dashboard-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  align-items: stretch;           /* beide Kacheln gleich hoch */
  margin-top: clamp(3.5rem, 7vh, 5rem);
}
/* Der Chef sieht beide Showrooms: links Berlin, rechts München - je mit
   Kalender und Neuigkeiten. Die Flächen sorgen dafür, dass die Kacheln einer
   Reihe gleich hoch sind und auf dem Handy jeder Showroom zusammenbleibt. */
.dashboard-reihe.zwei-standorte {
  grid-template-areas:
    "kopf-berlin kopf-muenchen"
    "kal-berlin  kal-muenchen"
    "news-berlin news-muenchen";
  row-gap: 1.1rem;
}
.standort-kopf {
  margin: 0 0 -.35rem .15rem;
  color: #f2f2f0;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.termine-spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  align-items: start;
}
.termine-spalte { min-width: 0; }
.termine-spalte > .standort-kopf { margin: 0 0 .6rem .15rem; }

/* Feinschliff "edler" (Betreiber): duenner, leiserer Rand; statt eines
   breiten Leuchtens ein zarter Lichtstreif an der Oberkante - wie Glas, das
   von oben Licht bekommt. Ueberschriften klein und gesperrt. */
.kachel {
  min-width: 0;
  padding: 1.2rem 1.45rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.032), rgba(255,255,255,.006) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -28px rgba(0,0,0,.8);
}
.kachel > h2 {
  margin: 0 0 .55rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #a3a4a6;
  font-size: .72rem;
  font-weight: 450;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.termine-bereich, .news-bereich { margin: 0; min-height: 0; border-bottom: 0; }
/* Die Kacheln sind gleich hoch. Damit "+ Neuer Termin" und "Anpinnen" auf
   derselben Hoehe am unteren Rand sitzen - egal wie viel darueber steht -,
   wird der Inhalt als Spalte gesetzt und die Aktionszeile nach unten
   geschoben. */
.dashboard-reihe .kachel { display: flex; flex-direction: column; }
.termine-heute, .news-liste { flex: 1; display: flex; flex-direction: column; }
.termine-heute > .kachel-aktion, .news-liste > .news-neu { margin-top: auto; padding-top: .9rem; }
/* Gleiche Hoehe wie die Anpinnen-Zeile (dort steht zusaetzlich das
   Eingabefeld) - sonst saessen die beiden Knoepfe versetzt. */
.kachel-aktion { display: flex; justify-content: flex-end; align-items: center; min-height: calc(2.45rem + .9rem); }
.termine-heute { padding-bottom: 0; }
.termin-eintrag { padding: .85rem 0; border-color: rgba(255,255,255,.12); }
.termin-uhr { color: #f1f1ef; font-weight: 400; }
.termin-tag { color: #77797c; font-weight: 400; }
.termin-neu { padding: 1.2rem 1.3rem; }

.news-liste { border-top: 0; }
/* In einer Kachel muss "Gerade keine Neuigkeiten." sichtbar bleiben - sonst
   saehe die leere Kachel kaputt aus. */
.news-liste > .hinweis, .termine-heute > .hinweis { margin: .4rem 0 0; }
/* Die letzte Zeile braucht keinen Trennstrich zum Kachelrand. */
.termin-eintrag:last-child, .news-eintrag:last-of-type { border-bottom: 0; }
.news-eintrag { padding: .85rem 0; border-color: rgba(255,255,255,.12); }
.news-pin { opacity: .55; filter: grayscale(1); }
.news-neu input {
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
  border-radius: 0;
  background: transparent;
  color: #fff;
}

/* Fragen im Blick – offene Liste statt Karten */
.offene-fragen-bereich { position: relative; margin-top: 0; }
/* Steht bei den Neuigkeiten wirklich nichts, ruecken "Fragen im Blick" in
   dieselbe Zeile wie die Ueberschrift "Neuigkeiten".
   Die Standortleitung sieht dort aber zusaetzlich das Eingabefeld zum
   Anpinnen - dann darf nichts hochruecken, sonst liegt die Ueberschrift
   samt Anzahl auf dem Anpinnen-Knopf und verschluckt sogar den Klick. */
/* Frueher rueckte "Zu pflegen" per negativem Abstand in die Zeile der
   Neuigkeiten hoch. Mit Kacheln wuerden sie sich dabei ueberlappen - der
   Kniff ist deshalb weg; "Zu pflegen" ist jetzt eine eigene Kachel ueber
   die ganze Breite unter Kalender und Neuigkeiten. */
.offene-fragen-bereich.kachel { margin-top: 1.4rem; padding-bottom: .4rem; }
.offene-fragen-reiter { padding: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
.offene-fragen-reiter > summary {
  justify-content: space-between;  /* Titel links, Anzahl rechts - wie die anderen Kacheln */
  gap: 2rem;
  min-height: 0;
  padding: 0 0 .7rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #a3a4a6;
  font-size: .72rem;
  font-weight: 450;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.offene-fragen-reiter > summary::after { display: none; }
.offene-fragen-reiter > summary .anzahl-badge { margin-left: 0; }
.anzahl-badge {
  min-width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #f3f3f1;
  font-size: .9rem;
  font-weight: 330;
}
#offeneFragenBereich { padding: 0; }
#offeneFragenBereich { border-top: 0; }
.offene-frage {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 1.05rem;
  min-height: 126px;
  padding: 1.1rem 0;
  border-top: 0;
  border-bottom: 1px solid rgba(255,255,255,.19);
}
/* Rueckfrage: ein heller Strich links macht sie sofort erkennbar, ohne
   eine Farbe ins monochrome Design zu bringen. */
.offene-frage.ist-rueckfrage { box-shadow: inset 3px 0 0 rgba(255,255,255,.75); padding-left: 1rem; }
.offene-frage.ist-rueckfrage .offene-frage-text { color: #fff; font-weight: 400; }
.pflege-kontext summary { color: #d9d9d7; font-weight: 400; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); }
.pflege-kontext > div { color: #9a9c9f; }
.frage-typ-icon { display: grid; place-items: center; color: #c9c9c7; }
.frage-typ-icon.ist-offen { color: #e8e8e5; }
.frage-typ-icon svg { width: 32px; height: 32px; stroke-width: 1.15; }
.offene-frage-kopf { display: block; min-width: 0; }
.offene-frage-text { color: #ededeb; font-size: 1.05rem; font-weight: 310; line-height: 1.4; }
.offene-frage-kopf .news-meta { display: block; margin-top: .38rem; }
.fragen-art {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #aaa;
  font-size: .9rem;
  font-weight: 310;
  white-space: nowrap;
}
.fragen-art.ist-offen { background: transparent; color: #e7e7e5; }
.fragen-art.ist-offen::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f7f7f4;
  box-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 18px rgba(255,255,255,.32);
}
.frage-aktion {
  display: grid;
  place-items: center;
  width: 40px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e8e8e5;
}
.frage-aktion:hover { color: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); transform: translateX(2px); }
.frage-aktion svg { width: 25px; height: 25px; stroke-width: 1.2; }
.fragen-mehr {
  padding: 1.1rem 0;
  border-color: rgba(255,255,255,.18);
  color: #b9babc;
  font-size: .82rem;
  font-weight: 340;
}
.fragen-mehr:hover { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.3); }

/* Gemeinsame Bedienelemente
   Vom Betreiber: Die Knoepfe wirkten "klobig", "nicht so edel". Vorher
   waren die Hauptknoepfe volle weisse Bloecke. Jetzt schmale Pillen mit
   duennem Rand; die Hauptaktion hat den helleren Rand und fuellt sich erst
   beim Darueberfahren - so bleibt das Auge beim Inhalt, nicht beim Knopf. */
.btn {
  padding: .5rem 1.15rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;
  background: transparent;
  color: #f4f4f2;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.3;
  box-shadow: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { background: rgba(244,244,242,.94); color: #0a0b0c; border-color: transparent; filter: none; box-shadow: 0 0 16px rgba(255,255,255,.12); }
.btn.ok { border-color: rgba(255,255,255,.78); background: transparent; color: #f4f4f2; }
.btn.ok:hover { background: rgba(244,244,242,.94); color: #0a0b0c; }
.btn.zweitrangig { border-color: rgba(255,255,255,.22); background: transparent; color: #d6d6d4; }
.btn.zweitrangig:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.07); color: #fff; box-shadow: none; }
.btn.gefahr { border-color: rgba(255,255,255,.2); background: transparent; color: #a9aaac; }
.btn.gefahr:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); color: #fff; box-shadow: none; }
.btn:disabled { opacity: .4; }

/* Kleine Aktionsknoepfe in Listen - "Geklaert", "Stimmt noch", "Anpinnen".
   Vom Betreiber bemaengelt: als volle weisse Bloecke "viel zu gross und zu
   klobig". Jetzt schmale umrandete Pillen, die erst beim Darueberfahren
   aufhellen - so ziehen sie den Blick nicht vom Inhalt ab. */
.pflege-ok,
.news-neu .btn,
.kachel-knopf {
  padding: .26rem .85rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: transparent;
  color: #ececea;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.4;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease;
}
.pflege-ok:hover,
.news-neu .btn:hover,
.kachel-knopf:hover {
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  color: #fff;   /* sonst erbt er die dunkle Schrift der grossen Knoepfe */
  box-shadow: 0 0 12px rgba(255,255,255,.07);
  filter: none;
}
.news-neu { align-items: center; }

/* Loeschen-Kreuz in Listen: ein kleiner runder Knopf statt eines Kastens.
   Unaufdringlich, weil Loeschen selten ist - beim Darueberfahren deutlich. */
.btn.loesch-x {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: transparent;
  color: #8e9093;
  font-size: .7rem;
  line-height: 1;
  box-shadow: none;
}
.btn.loesch-x:hover { border-color: rgba(255,255,255,.6); color: #fff; filter: none; }

/* Wiki, Shopseiten und Formulare im selben Materialsystem */
.suchfeld,
.feld input[type="text"], .feld input[type="url"], .feld input[type="password"], .feld textarea, .feld select,
.kontakt-formular input {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  color: #f1f1ef;
}
/* Die aufklappende Liste eines Auswahlfeldes malt der Browser selbst. Sie
   uebernimmt die halbdurchsichtige Flaeche des Feldes NICHT, sondern bleibt
   weiss - heller Text auf Weiss, also unlesbar. Sichtbar war nur die gerade
   markierte Zeile. Deshalb brauchen die Eintraege eine DECKENDE Farbe.
   Das Feld selbst bleibt unveraendert, damit es neben den anderen
   Eingabefeldern gleich aussieht. */
select option,
select optgroup {
  background-color: #15181a;
  color: #f1f1ef;
}

.suchfeld:focus,
.feld input:focus, .feld textarea:focus, .feld select:focus,
.kontakt-formular input:focus { outline: none; border-color: rgba(255,255,255,.65); box-shadow: 0 0 18px rgba(255,255,255,.06); }
.filter-leiste { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 1rem; }
.chip {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8f9092;
  font-weight: 330;
}
.chip.aktiv { border-bottom: 1px solid #fff; background: transparent; color: #fff; box-shadow: 0 5px 12px -8px rgba(255,255,255,.8); }
/* Kein eigener Strich oben: die Filterleiste darueber hat bereits einen -
   sonst stehen zwei Haarlinien dicht untereinander.
   overflow blendet den Trennstrich der letzten Spalte aus (siehe unten). */
.shop-gitter { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0; overflow: hidden; }
.shop-karte {
  min-height: 155px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.13);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: background .18s ease;
  /* Der senkrechte Strich gehoert zwischen die Karten. Die 1px Ueberlappung
     schiebt ihn bei der letzten Spalte aus dem Raster heraus, damit rechts
     aussen keine Linie ins Leere laeuft. */
  margin-right: -1px;
}
.shop-karte:hover { background: rgba(255,255,255,.025); }
.shop-karte .name { color: #f1f1ef; font-weight: 350; }
.shop-karte .kurz { color: #818386; }
.ort-badge, .intern-marke {
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 999px;
  background: transparent;
  color: #a5a6a8;
  font-weight: 420;
  letter-spacing: .03em;
  line-height: 1.4;
}
/* Shop-Seite: die Standorte als eigene Zeile unter dem Namen */
.shop-orte { justify-content: center; gap: .5rem; margin: -1.6rem 0 1.3rem; }
.shop-orte .ort-badge { padding: .24rem .8rem; color: #c5c6c7; font-size: .76rem; }
.zurueck { color: #cfd0d1; font-weight: 340; }
.link-leiste a { border: 1px solid rgba(255,255,255,.18); background: transparent; color: #e4e4e2; font-weight: 360; }
.eintrag, .kontakt { border-color: rgba(255,255,255,.14); }
.faq-frage { font-weight: 420; }
.stand-stempel, .eintrag .meta, .kontakt .meta, .vorschlag-karte .meta { color: #747679; }
.feld label { color: #a3a4a6; font-size: .76rem; font-weight: 420; letter-spacing: .04em; }

.overlay { background: rgba(0,0,0,.78); backdrop-filter: blur(14px); }
.overlay .karte { background: #101213; border-color: rgba(255,255,255,.22); box-shadow: 0 30px 100px rgba(0,0,0,.7), 0 0 36px rgba(255,255,255,.035); }
/* Die Meldung sitzt ueber der Sicherheitsleiste am unteren Rand, nicht darauf.
   In der Kundenansicht gibt es die Leiste nicht - dann rutscht sie herunter. */
.toast { bottom: 3.6rem; border: 1px solid rgba(255,255,255,.25); background: #f0f0ed; color: #08090a; font-weight: 430; }
body.kundenansicht .toast { bottom: 1.2rem; }

/* ── Kalender (Monatsansicht) ──
   Vom Betreiber gewünscht: Der Reiter soll aussehen wie ein Kalender. Ein
   ruhiges Raster mit Haarlinien; heute leuchtet, der gewählte Tag hat einen
   feinen Rahmen. Auf dem Handy werden die Einträge zu Punkten. */
.kalender-kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.kalender-kopf h1 { margin: 0; min-width: 10ch; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.kal-pfeil {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}
.kal-heute { position: absolute; right: 0; }
.kal-filter { display: flex; justify-content: center; gap: .45rem; margin: -.4rem 0 1.3rem; flex-wrap: wrap; }
.kal-filter .btn { position: relative; }
.kal-filter .badge { top: -7px; right: -7px; transform: none; }
.kal-filter .btn[aria-pressed="true"] { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.1); color: #fff; }
.kalender { padding: .9rem .9rem 1rem; }
.kal-wochentage, .kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-wochentage span {
  padding: .1rem 0 .6rem;
  color: #77797c;
  font-size: .68rem;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.kal-raster {
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
}
.kal-zelle {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  min-width: 0;
  min-height: 94px;
  padding: .4rem .42rem;
  border: 0;
  background: #0b0c0d;
  color: #d9d9d7;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.kal-zelle:hover { background: #121415; }
.kal-zelle.anders-monat { background: #090a0b; color: #4e5053; }
.kal-zelle.anders-monat .kal-eintrag { opacity: .45; }
.kal-zelle.gewaehlt { background: #141618; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.kal-zahl {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.kal-zelle.heute .kal-zahl { background: #f2f2f0; color: #08090a; box-shadow: var(--glow); }
.kal-eintraege { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.kal-eintrag {
  overflow: hidden;
  padding: .12rem .32rem;
  border-radius: 5px;
  background: rgba(255,255,255,.07);
  color: #cfd0d1;
  font-size: .68rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Feiertage (je Showroom): Name klein unter der Zahl, der Tag leicht
   abgesetzt - auf dem Handy nur ein feiner Ring um die Zahl. */
.kal-zelle.feiertag { background: #101113; }
.kal-feiertag {
  overflow: hidden;
  color: #c5c6c7;
  font-size: .64rem;
  letter-spacing: .02em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-feiertag { margin: 0 0 .5rem; color: #f2f2f0; font-size: .86rem; }
.kal-ort { margin-right: .28rem; color: #8d8f92; font-weight: 600; }
.kal-mehr { padding-left: .32rem; color: #77797c; font-size: .66rem; }
/* Schichtplan im Kalender (nur Leitung und Chef): klein unten rechts, wer
   an dem Tag da ist. */
.kal-schicht {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: auto;
  color: #77797c;
  font-size: .6rem;
  letter-spacing: .06em;
  line-height: 1.35;
  text-align: right;
}
.kal-schicht > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-zelle.anders-monat .kal-schicht { opacity: .45; }
/* Unter den Terminen des gewählten Tages: wer da ist, wer Urlaub hat */
.tag-schicht {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  padding: .7rem 0 .2rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #d9d9d7;
  font-size: .82rem;
  letter-spacing: .04em;
}
.tag-schicht .hinweis { margin-right: .3rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.tag-schicht-ort { color: #f2f2f0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
/* Titel im Bereich Standortleiter (die Leitung hat keinen Umschalter) */
.bereich-titel {
  margin: 0 0 1.2rem;
  color: #a3a4a6;
  font-size: .76rem;
  font-weight: 450;
  letter-spacing: .2em;
  text-align: center;
  text-transform: uppercase;
}
.kal-tag { margin-top: 1.4rem; padding: 1.25rem 1.4rem; }
.kal-tag > h2 { margin: 0 0 .4rem; color: #f2f2f0; font-size: 1.05rem; font-weight: 330; }
.kal-tag .termin-neu {
  margin: 1.1rem 0 0;
  padding: 1.2rem 0 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.wdh-vorschau { min-height: 1.1rem; margin-top: .4rem; color: #8d8f92; font-size: .76rem; }
#kalWiederkehrend .termine-bereich { margin-top: 2rem; }

/* ── Neuigkeiten (Reiter) ── */
.news-archiv { display: flex; flex-direction: column; gap: 1.1rem; }
.news-gruppe { padding: 1.1rem 1.35rem; }
.news-eintrag.frueher { opacity: .62; }
.feld-reihe .news-feld { flex: 3 1 16rem; }
.feld-reihe .news-ort { flex: 1 1 8rem; max-width: 13rem; }

/* Logo-Gitter: nur in der Kundenansicht, gleich große quadratische Kacheln.
   Viele Logos sind JPGs mit weißem Grund - "multiply" lässt dieses Weiß in
   der Kachelfarbe aufgehen, statt als hellerer Kasten im Kasten zu stehen. */
.logo-gitter { display: none; }
body.kundenansicht .logo-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: .9rem;
  margin-top: 2.8rem;
}
.logo-kachel {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16% 9%;   /* seitlich knapper: viele Logos sind breite Schriftzüge */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: #f1f0ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -24px rgba(0,0,0,.9);
  transition: transform .2s ease, box-shadow .2s ease;
}
.logo-kachel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
a.logo-kachel:hover, a.logo-kachel:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px -18px rgba(255,255,255,.28);
}
a.logo-kachel:active { transform: scale(.98); }
.logo-kachel.nur-name {
  padding: 10%;
  color: #2a2b2d;
  font-size: .86rem;
  font-weight: 450;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ── Schichtplan ──
   Ruhig wie der Kalender: "da" leicht gefüllt, "frei" nur angedeutet,
   "Urlaub" hell abgesetzt - das soll man auf einen Blick sehen. */
.plan-zeitraum { display: block; margin-top: .25rem; color: #77797c; font-size: .82rem; font-weight: 330; letter-spacing: .02em; }
.plan-block { margin-bottom: 1.8rem; }
.plan-block > .standort-kopf { margin: 0 0 .6rem .15rem; }
.plan-karte { padding: .55rem .65rem .4rem; overflow-x: auto; }
.plan-leer { padding: 1rem 1.2rem; }
.plan-tabelle { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.plan-tabelle th { padding: .15rem 0 .3rem; color: #a3a4a6; font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.plan-tabelle thead th { text-align: center; }
.plan-tabelle thead th.heute { color: #fff; }
.plan-wt, .plan-datum { display: block; }
.plan-datum { margin-top: .1rem; color: #77797c; font-size: .7rem; letter-spacing: .02em; }
.plan-tabelle tbody th, .plan-tabelle tfoot th { width: 3.4rem; text-align: left; color: #f2f2f0; font-size: .86rem; letter-spacing: .08em; }
.plan-tabelle tfoot th { color: #77797c; font-size: .7rem; }
.plan-tabelle tfoot td { padding-top: .2rem; text-align: center; color: #a3a4a6; font-size: .78rem; font-variant-numeric: tabular-nums; }
.plan-tabelle tfoot td.heute { color: #fff; }
.plan-zelle {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 40px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: transparent;
  color: #6f7174;
  font: inherit;
  font-size: .82rem;
}
button.plan-zelle { cursor: pointer; transition: background .15s ease, border-color .15s ease; }
button.plan-zelle:hover { border-color: rgba(255,255,255,.35); }
.plan-zelle.st-da { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #f2f2f0; }
.plan-zelle.st-urlaub { border-color: #f0f0ed; background: #f0f0ed; color: #08090a; font-weight: 450; }
td.heute .plan-zelle { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.plan-zelle.abweichung::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
}
.plan-zelle .kurz { display: none; }
/* Drei Wochen untereinander (vorige, aktuelle, nächste) - die aktuelle mit
   etwas hellerem Rahmen. Auch ohne Kürzel stehen Tage und Daten schon da. */
.plan-wochen { display: flex; flex-direction: column; gap: .7rem; }
.plan-karte.diese-woche { border-color: rgba(255,255,255,.3); }
.plan-tabelle thead th.plan-kw { color: #77797c; font-size: .66rem; letter-spacing: .08em; text-align: left; vertical-align: bottom; }
.plan-karte.diese-woche thead th.plan-kw { color: #f2f2f0; }
.plan-wochen-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  padding: .35rem .4rem .15rem;
}
.plan-relativ { color: #a3a4a6; font-size: .72rem; font-weight: 450; letter-spacing: .14em; text-transform: uppercase; }
.plan-kw-text { color: #77797c; font-size: .76rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-karte.diese-woche .plan-relativ { color: #fff; }
.plan-karte.diese-woche .plan-kw-text { color: #c5c6c7; }
.plan-karte-fuss { display: flex; justify-content: flex-end; padding: .2rem .35rem .3rem; }
.plan-feiertag {
  display: block;
  overflow: hidden;
  margin-top: .15rem;
  color: #c5c6c7;
  font-size: .58rem;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
td.feiertag .plan-zelle { border-style: dashed; border-color: rgba(255,255,255,.2); }
.plan-zelle.geschlossen { cursor: default; background: transparent; }
.plan-leer-zeile { padding: .55rem .2rem .45rem; color: #77797c; font-size: .8rem; }
.plan-verwaltung { margin-top: .7rem; }
.plan-verwaltung > summary {
  padding: .45rem .2rem;
  color: #a3a4a6;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.plan-person, .plan-neu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem .8rem;
  padding: .6rem .2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.plan-neu { border-bottom: 0; }
.plan-kz { width: 3.2rem; color: #f2f2f0; font-size: .9rem; letter-spacing: .08em; }
.plan-person .loesch-x { margin-left: auto; }
.plan-neu .plan-hinzu { margin-left: auto; }
.plan-kuerzel-neu {
  width: 6.4rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: uppercase;
}
.plan-kuerzel-neu::placeholder { text-transform: none; color: #6f7174; }
.tag-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag-chip {
  min-width: 2.35rem;
  height: 30px;
  padding: 0 .55rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: transparent;
  color: #8a8c8f;
  font: inherit;
  font-size: .76rem;
  cursor: pointer;
}
.tag-chip[aria-pressed="true"] { border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.12); color: #fff; }

/* Urlaubsübersicht - nur für den Chef */
.urlaub-uebersicht { margin-top: 0; }
.urlaub-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .55rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.urlaub-kopf h2 { margin: 0; color: #a3a4a6; font-size: .72rem; font-weight: 450; letter-spacing: .14em; text-transform: uppercase; }
.urlaub-jahre { display: flex; gap: .35rem; }
.urlaub-jahre .kal-pfeil { width: 30px; height: 30px; font-size: 1rem; }
.urlaub-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.urlaub-spalten .standort-kopf { margin: .4rem 0 .3rem; }
.urlaub-zeile {
  display: flex;
  justify-content: space-between;
  padding: .55rem .1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  letter-spacing: .06em;
}
.urlaub-zeile:last-child { border-bottom: 0; }
.urlaub-zahl { color: #fff; font-variant-numeric: tabular-nums; }

/* Prüfkorb: beim Chef der kleine Hinweis, welcher Showroom */
.korb-ort { margin: 0 0 .8rem .15rem; }

/* Umschalter Tag/Nacht: zeigt, wohin es geht - nachts die Sonne, tags den Mond */
#modusBtn .modus-mond { display: none; }
:root[data-modus="tag"] #modusBtn .modus-sonne { display: none; }
:root[data-modus="tag"] #modusBtn .modus-mond { display: block; }

/* Login und Sperrbildschirm */
.login-wrap { background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.045), transparent 34%); }
.login-karte { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.018); }
.login-karte img, .sperre-logo { filter: grayscale(1) brightness(1.45); opacity: .9; }
.login-karte input { border: 1px solid rgba(255,255,255,.24) !important; background: rgba(255,255,255,.025) !important; }
.sperre { background: #08090a; }
.ziffernblock button { border: 1px solid rgba(255,255,255,.2); background: transparent; font-weight: 260; }
.ziffernblock button:active { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.06); box-shadow: var(--glow); }
.ziffernblock button.leer:not(:disabled) { font-size: 1.15rem; color: #a3a4a6; cursor: pointer; }
.ziffernblock button.leer:not(:disabled):active { color: #fff; background: rgba(255,255,255,.06); box-shadow: none; }
.sperre-punkte span.voll { border-color: #fff; background: #fff; box-shadow: var(--glow); }

@media (prefers-reduced-motion: no-preference) {
  .fragen-start { animation: graphite-ein .5s ease-out both; }
  @keyframes graphite-ein { from { opacity: 0; transform: translateY(7px); } }
}

/* Passen die Reiter nicht neben Logo und Symbole (z. B. beim Chef mit fünf
   Reitern auf dem Tablet hochkant), bekommen sie eine eigene Zeile darunter -
   wie auf dem Handy. Ob es passt, misst app.js nach (pruefeKopfzeile), statt
   es an einer festen Breite festzumachen: Rollen, Schriften und Geräte sind
   verschieden. */
body.kopf-zweizeilig .topbar { grid-template-columns: 1fr auto; row-gap: 0; padding-top: .55rem; }
body.kopf-zweizeilig .logo-chip { grid-column: 1; }
body.kopf-zweizeilig .topbar-aktionen { grid-column: 2; }
body.kopf-zweizeilig .topbar nav {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-height: 44px;
}

@media (max-width: 700px) {
  html { font-size: 16px; }
  .intern-banner { font-size: .66rem; }
  .topbar {
    grid-template-columns: 1fr auto;
    /* Der Abstand von 1.5rem ist nur zwischen den Spalten gedacht. Untereinander
       riss er ein leeres Band zwischen Logo und Reitern auf - die Kopfleiste
       war dadurch auf dem Handy unnoetig hoch. */
    row-gap: 0;
    min-height: 68px;
    padding: 0 1rem;
  }
  .logo-chip { grid-column: 1; }
  .logo-chip img { height: 24px; }
  .topbar-aktionen { grid-column: 2; }
  .topbar nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    width: 100%;
    min-height: 44px;
    gap: 1.1rem;
  }
  .nav-btn { min-width: 0; }
  main { padding: 3.5rem 1.1rem 4.5rem; }
  h1 { margin-bottom: 2rem; font-size: clamp(2.15rem, 9vw, 2.7rem); }
  .frage-box { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 88px; padding: 0 .8rem; }
  .frage-box textarea { min-height: 68px; padding: 1.2rem .25rem; font-size: .94rem; }
  .btn-mikro { display: none !important; }
  .btn-senden { width: 42px; height: 42px; }
  /* Auf dem Handy stehen Kalender und Neuigkeiten untereinander. */
  .dashboard-reihe { grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  .dashboard-reihe.zwei-standorte {
    grid-template-areas:
      "kopf-berlin" "kal-berlin" "news-berlin"
      "kopf-muenchen" "kal-muenchen" "news-muenchen";
  }
  .standort-kopf.ort-muenchen { margin-top: 1.4rem; }
  .termine-spalten { grid-template-columns: 1fr; gap: 2.2rem; }
  .plan-karte { padding: .4rem .35rem .3rem; }
  .plan-tabelle { border-spacing: 3px; }
  .plan-tabelle tbody th, .plan-tabelle tfoot th { width: 2.5rem; font-size: .8rem; }
  .plan-zelle { height: 36px; border-radius: 9px; font-size: .8rem; }
  .plan-zelle .lang { display: none; }
  .plan-zelle .kurz { display: inline; }
  .urlaub-spalten { grid-template-columns: 1fr; gap: 1rem; }
  .kalender-kopf { flex-wrap: wrap; gap: .6rem; }
  .kal-heute { position: static; order: 3; }
  .kalender { padding: .5rem; }
  .kal-zelle { align-items: center; min-height: 56px; padding: .28rem .1rem; }
  .kal-eintraege { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .kal-eintrag { width: 6px; height: 6px; padding: 0; border-radius: 50%; background: #cfd0d1; font-size: 0; }
  .kal-mehr { display: none; }
  .kal-feiertag { display: none; }
  .kal-zelle.feiertag:not(.heute) .kal-zahl { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
  .kal-schicht { display: none; }   /* zu eng - steht beim gewählten Tag darunter */
  .kal-tag { padding: 1.05rem; }
  .kachel { padding: 1rem 1.05rem; }
  .offene-fragen-bereich.kachel { margin-top: 1rem; }
  .offene-fragen-reiter > summary { min-height: 0; }
  .offene-frage {
    grid-template-columns: 34px minmax(0, 1fr) 32px;
    gap: .75rem;
    min-height: 112px;
  }
  .frage-typ-icon svg { width: 27px; height: 27px; }
  .offene-frage-text { font-size: .98rem; }
  .fragen-art { font-size: .76rem; }
  /* Einspaltig ruecken Status und Knopf unter den Text, der Pfeil bleibt
     rechts daneben stehen. */
  .pflege-aktionen { grid-column: 2; flex-wrap: wrap; gap: .5rem; }
  .frage-aktion { grid-column: 3; grid-row: 1 / span 2; width: 32px; }
  .offene-frage-kopf .news-meta { display: none; }
  .shop-gitter { grid-template-columns: 1fr; }
  /* Einspaltig gibt es keinen senkrechten Trennstrich - also auch nicht die
     1px-Ueberlappung, die ihn sonst nach aussen schiebt. */
  .shop-karte { border-right: 0; margin-right: 0; }
  .kontakt-formular { grid-template-columns: 1fr; }
  .kontakt-weg { grid-column: 1; }
}

/* ── Besucher-Erfassung ──
   Formular aus Antipp-Gruppen (tag-chip), darunter die Tabelle des Tages
   bzw. des Monats. Ein "offener" Besuch (nur Personen eingetragen) traegt
   eine kleine Plakette, damit man am Counter sieht, was noch fehlt. */
.besuch-form { display: grid; gap: .95rem; margin-bottom: 1.4rem; padding: 1.1rem 1.2rem 1.2rem; }
.besuch-form .knopf-zeile { margin-top: .2rem; }
.besuch-titel { margin: 0 0 .2rem; color: #f2f2f0; font-size: 1rem; font-weight: 360; }
.besuch-gruppe > label { display: block; margin-bottom: .4rem; color: #a3a4a6; font-size: .76rem; font-weight: 420; letter-spacing: .04em; }
.besuch-gruppe .tag-chips { gap: .35rem; }
.besuch-gruppe .tag-chip { height: 34px; padding: 0 .8rem; font-size: .86rem; }
.besuch-felder { display: flex; gap: .8rem; flex-wrap: wrap; }
.besuch-felder .feld { flex: 1 1 12rem; margin: 0; }
.besuch-felder .feld.plz { flex: 0 1 8rem; }
/* Feste Spaltenbreiten (colgroup) und einzeilige Zellen: Beim Bearbeiten in
   der Zelle darf nichts springen (Betreiber, 19.10.2026). */
.besuch-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .86rem; }
.besuch-tabelle td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.besuch-tabelle th { padding: .3rem .5rem; color: #a3a4a6; font-size: .7rem; font-weight: 400; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.besuch-tabelle td { padding: .5rem .5rem; border-top: 1px solid rgba(255,255,255,.08); color: #d6d6d4; vertical-align: top; }
.besuch-tabelle tbody tr[data-id] { cursor: pointer; }
.besuch-tabelle tbody tr[data-id]:hover td { background: rgba(255,255,255,.04); color: #fff; }
.besuch-tabelle .besuch-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.besuch-tabelle .besuch-notiz { color: #8f9092; }
.besuch-tabelle .besuch-tag-kopf td { padding-top: 1.1rem; border-top: 0; color: #fff; font-size: .8rem; letter-spacing: .06em; }
.besuch-offen { display: inline-block; margin-left: .35rem; padding: .02rem .5rem; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #fff; font-size: .68rem; letter-spacing: .06em; vertical-align: middle; }
/* Handy: dieselbe Tabelle wie am PC - alle Spalten mit Ueberschrift,
   bei Bedarf seitlich wischbar; die Zeilen deutlicher getrennt
   (Betreiber, 19.10.2026). */
.besuch-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .besuch-scroll { margin: 0 -.9rem; padding: 0 .9rem; }
  /* Spalten nach Inhalt und eng gesetzt, damit Nr., Uhrzeit, Pers., Ampel,
     Wegen, Durch und Modell ohne Wischen zu sehen sind (Betreiber, 19.10.) */
  .besuch-tabelle { table-layout: auto; width: max-content; min-width: 100%; font-size: .74rem; }
  .besuch-tabelle colgroup { display: none; }
  .besuch-tabelle th { padding: .3rem .28rem; font-size: .6rem; letter-spacing: .06em; white-space: nowrap; }
  .besuch-tabelle td { padding: .6rem .28rem; border-top: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
  .besuch-tabelle td.besuch-notiz { white-space: nowrap; max-width: 14rem; }
  .besuch-tabelle td.besuch-ampel .ampel { width: 8px; height: 8px; }
  .besuch-tabelle tbody tr:nth-child(even) td { background: rgba(255,255,255,.025); }
  .besuch-tabelle .besuch-tag-kopf td { border-top: 0; }
  .besuch-schnell-zeile { margin-bottom: .9rem; gap: .5rem; }
  .besuch-schnell-zeile .feld.personen { flex: 0 0 5.5rem; }
  .besuch-schnell-zeile .feld:not(.personen):not(.knopf) { flex: 1 1 8rem; }
  .besuch-schnell-zeile .feld.knopf { flex: 1 1 100%; }
  .besuch-schnell-zeile .btn { width: 100%; }
  .besuch-form { padding: .9rem .9rem 1rem; gap: .7rem; }
}

/* Schnell-Erfassung auf der Startseite und die Datenadresse */
.besuch-schnell-zeile { align-items: flex-end; margin-bottom: 1.2rem; }
.besuch-schnell-zeile .feld.personen { flex: 0 1 8rem; }
.besuch-schnell-zeile .feld:not(.personen):not(.knopf) { flex: 1 1 11rem; }
.besuch-schnell-zeile .feld.knopf { flex: 0 0 auto; }
.besuch-schnell-titel { margin-bottom: .4rem; }
.besuch-felder select { width: 100%; }
.besuch-adresse { display: flex; gap: .5rem; align-items: center; }
.besuch-adresse input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }

/* ── Dashboard der Besucher-Erfassung ──
   Kennzahlen als Kacheln, darunter Balken: eine Reihe je Kachel, die Zahl
   steht direkt daneben. Bei den Shops zwei duenne Balken uebereinander:
   gezielt (hell) und auch angeschaut (gedaempft) - mit Legende. */
.dash-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.dash-kennzahl { padding: .9rem 1rem .8rem; }
.dash-kennzahl > h2 { margin-bottom: .35rem; }
.dash-wert { color: #fff; font-size: 1.9rem; font-weight: 220; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dash-delta { margin-left: .45rem; color: #a3a4a6; font-size: .78rem; font-weight: 400; letter-spacing: 0; }
.dash-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.dash-spalte { display: grid; gap: 1.2rem; }
.dash-legende { margin: -.3rem 0 .7rem; color: #a3a4a6; font-size: .74rem; }
.dash-punkt { display: inline-block; width: 9px; height: 9px; margin: 0 .4rem 0 0; border-radius: 50%; vertical-align: middle; }
.dash-punkt.auch { margin-left: .9rem; background: rgba(255,255,255,.35); }
.dash-punkt.gezielt { background: rgba(255,255,255,.85); }
.balken-zeile { display: grid; grid-template-columns: minmax(5.5rem, 9.5rem) 1fr 3.2rem; align-items: center; gap: .6rem; padding: .3rem 0; color: #d6d6d4; font-size: .84rem; }
.balken-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balken { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.balken > span { display: block; height: 100%; border-radius: 4px; background: rgba(255,255,255,.85); }
.balken.doppelt { display: grid; gap: 2px; height: auto; background: transparent; overflow: visible; }
.balken.doppelt > span { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.balken.doppelt > span > i { display: block; height: 100%; border-radius: 3px; }
.balken.doppelt > .gezielt > i { background: rgba(255,255,255,.85); }
.balken.doppelt > .auch > i { background: rgba(255,255,255,.35); }
.balken-zahl { color: #fff; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balken-zahl small { color: #8f9092; font-size: .78rem; }
@media (max-width: 700px) {
  .dash-raster { grid-template-columns: 1fr; }
}

/* Direkt in der Tabelle ändern (PC): die Zelle zeigt beim Darüberfahren,
   dass sie anklickbar ist; das Auswahlfeld sitzt klein an Ort und Stelle. */
@media (min-width: 900px) {
  .besuch-tabelle td[data-feld] { border-radius: 6px; }
  .besuch-tabelle td[data-feld]:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
}
.zelle-edit select, .zelle-edit input {
  display: block; width: 100%; min-width: 0; max-width: none; box-sizing: border-box;
  height: 1.45em; margin: 0; padding: 0 .15rem;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.55); border-radius: 0;
  background: transparent; color: #fff; font: inherit; font-size: inherit; line-height: 1.45;
  appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
}
.zelle-edit input { cursor: text; }
.zelle-edit select:focus, .zelle-edit input:focus { border-bottom-color: #fff; box-shadow: 0 6px 14px -10px rgba(255,255,255,.8); }
.besuch-tabelle td .zelle-edit { display: block; overflow: visible; }
.zelle-edit.auch { display: grid; gap: .2rem; }

/* Modelle je Shop (Bereich Standortleiter): je Shop eine Kachel mit den
   Eintraegen als Plaketten, dahinter das Feld fuer einen neuen Eintrag. */
.modell-liste { display: grid; gap: .9rem; }
.modell-shop .tag-chips { min-height: 1.2rem; }
.modell-chip { display: inline-flex; align-items: center; gap: .35rem; height: 30px; padding: 0 .35rem 0 .75rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #e8e8e6; font-size: .84rem; }
.modell-weg { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #8e9093; font-size: .7rem; line-height: 1; cursor: pointer; }
.modell-weg:hover { background: rgba(255,255,255,.1); color: #fff; }
.modell-neu { display: flex; gap: .5rem; margin-top: .7rem; }
.modell-neu input { flex: 1 1 12rem; max-width: 22rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.018); color: #f1f1ef; }
.modell-neu input:focus { outline: none; border-color: rgba(255,255,255,.65); }
.besuch-tabelle .besuch-nr { color: #8f9092; }
/* Noch auszufuellende Zellen zeigen ein dezentes Plus, bis etwas drinsteht */
/* Standard "Showlofts" (nichts gewaehlt): leicht grau, bis jemand aktiv waehlt */
.besuch-tabelle td.standard { color: rgba(255,255,255,.42); }
select.standard { color: rgba(255,255,255,.55); }
select.standard option { color: #f2f2f0; }
.besuch-tabelle td.leer:empty::before { content: '+'; color: rgba(255,255,255,.28); font-size: .95rem; line-height: 1; }
.besuch-tabelle tbody tr[data-id]:hover td.leer:empty::before { color: rgba(255,255,255,.6); }
.modell-chip.fest { padding-right: .75rem; color: #8f9092; border-style: dashed; }

/* ── Dashboard, zweite Fassung: Steuerung, Torten, Säulen ──
   Farben stehen in app.js (nur Diagramme), die Flächen bleiben im Design. */
.dash-steuerung { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem; margin: 0 0 1.1rem; }
.dash-steuerung .feld { margin: 0; flex: 0 1 13rem; }
.dash-steuerung .feld.knopf { flex: 0 0 auto; }
.dash-steuerung .feld.dash-shop { flex: 1 1 14rem; max-width: 20rem; margin-left: auto; }
.dash-steuerung input[type="date"] { width: 100%; padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.018); color: #f1f1ef; color-scheme: dark; }
.dash-titel { margin: 0 0 1.1rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-align: left; }
.dash-vergleich { margin: -.6rem 0 1.1rem; color: #8f9092; font-size: .78rem; }
.dash-delta.plus { color: #3fb97a; }
.dash-delta.minus { color: #e66767; }
.dash-donut { display: flex; align-items: center; gap: 1.1rem; }
.dash-donut svg { flex: 0 0 150px; width: 150px; height: 150px; }
.dash-donut-zahl { fill: #fff; font-size: 22px; font-weight: 300; }
.dash-legende-liste { flex: 1 1 auto; min-width: 0; display: grid; gap: .3rem; }
.dash-legende-zeile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; color: #d6d6d4; font-size: .84rem; }
.dash-legende-zeile .dash-punkt { margin: 0; }
.dash-legende-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-legende-zahl { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-legende-zahl small { color: #8f9092; font-size: .76rem; }
.dash-punkt-abstand { margin-left: .9rem; }
/* Saeulen als HTML - unverzerrt in jeder Breite */
.dash-saeulen { display: flex; align-items: stretch; gap: 4px; height: 190px; }
.dash-saeule { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.dash-saeule-zahl { font-size: .78rem; color: #fff; min-height: 1.1rem; line-height: 1.1rem; font-variant-numeric: tabular-nums; }
.dash-saeule-raum { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid rgba(255,255,255,.18); }
.dash-saeule-balken { display: block; width: 62%; border-radius: 3px 3px 0 0; }
.dash-saeule-text { font-size: .74rem; color: #a3a4a6; margin-top: .35rem; white-space: nowrap; }
@media (max-width: 700px) {
  .dash-donut { flex-direction: column; align-items: flex-start; }
  .dash-steuerung .feld.dash-shop { margin-left: 0; max-width: none; }
}
/* Ampel je Besuch: rot = Herkunft fehlt, gelb = Rest fehlt, gruen = vollstaendig */
.besuch-tabelle td.besuch-ampel { padding-left: 0; padding-right: 0; text-align: center; }
.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.ampel.rot { background: #e05a5a; box-shadow: 0 0 8px rgba(224,90,90,.6); }
.ampel.gelb { background: #d9a400; box-shadow: 0 0 8px rgba(217,164,0,.5); }
.ampel.gruen { background: #3fb97a; box-shadow: 0 0 8px rgba(63,185,122,.5); }

/* Notiz: breitere Spalte mit Umbruch, zum Schreiben ein mehrzeiliges Feld */
.besuch-tabelle td.besuch-notiz { white-space: normal; color: #d6d6d4; }
.zelle-edit textarea {
  display: block; width: 100%; min-width: 12rem; box-sizing: border-box; margin: 0; padding: .3rem .4rem;
  border: 1px solid rgba(255,255,255,.4); border-radius: 6px; resize: vertical;
  background: #15181a; color: #f1f1ef; font: inherit; font-size: inherit; line-height: 1.35;
}
.zelle-edit textarea:focus { outline: none; border-color: #fff; }
.besuch-felder .feld.notiz { flex: 1 1 100%; }
.besuch-felder .feld.notiz textarea { width: 100%; min-height: 4.5rem; resize: vertical; }

/* ── PLZ-Karte (schematisch, public/karte.js) ── */
.plz-karte { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.plz-karte-teil { flex: 1 1 60%; min-width: 0; }
.plz-karte-teil.klein { flex: 0 1 34%; }
.plz-karte-titel { margin-bottom: .35rem; color: #a3a4a6; font-size: .74rem; letter-spacing: .04em; }
.plz-karte-titel small { color: #77797c; }
.plz-karte svg { display: block; width: 100%; height: auto; }
.plz-karte-flaeche { fill: rgba(255,255,255,.035); }
.plz-karte-umriss { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.3); stroke-width: 1; stroke-linejoin: round; }
.plz-karte-zelle { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.16); stroke-width: .8; stroke-linejoin: round; }
.plz-karte-zelle.aktiv { fill: rgba(255,255,255,.07); }
.plz-karte-stadtumriss { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.2; stroke-linejoin: round; }
.plz-karte-name { fill: rgba(255,255,255,.3); font-size: 7.5px; pointer-events: none; }
.plz-karte-name.aktiv { fill: #fff; font-weight: 600; }
.plz-karte-showroom { fill: none; stroke: #fff; stroke-width: 1.6; }
@media (max-width: 700px) {
  .plz-karte { flex-direction: column; }
  .dash-saeulen { gap: 2px; height: 160px; }
  .dash-saeule-text { font-size: .62rem; }
  .dash-saeule-zahl { font-size: .68rem; }
  .plz-karte-teil.klein { flex-basis: auto; width: 60%; }
}

/* Fenster zum Bearbeiten: die Knopfzeile klebt unten, der Inhalt scrollt
   darunter - so bleiben Speichern, Abbrechen und Löschen immer sichtbar,
   auch wenn "Auch angeschaut" wächst (Betreiber, 19.10.2026). */
.overlay .karte.besuch-form, .overlay .besuch-form { padding-bottom: 0; }
.overlay .besuch-form .knopf-zeile { position: sticky; bottom: 0; margin: .2rem -1.2rem 0; padding: .7rem 1.2rem 1rem; background: #101213; border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 700px) {
  .overlay .besuch-form { gap: .55rem; padding: .8rem .8rem 0; }
  .overlay .besuch-form .knopf-zeile { margin: .2rem -.8rem 0; padding: .6rem .8rem .8rem; }
  .overlay .besuch-form .feld select, .overlay .besuch-form .feld input { padding: .45rem .6rem; font-size: .95rem; }
  .overlay .besuch-form .besuch-felder { gap: .5rem; }
  .overlay .besuch-form .besuch-felder .feld { flex: 1 1 9rem; }
  .overlay .besuch-form .feld.notiz textarea { min-height: 3.2rem; }
}

/* Luft zwischen Fragefeld/Antwort und dem Kasten "Besuch erfassen" (Betreiber, 19.10.2026) */
.besuch-schnell { margin-top: 1.8rem; }
@media (max-width: 700px) { .besuch-schnell { margin-top: 1.3rem; } }
/* "Allgemein" als Vorgabe steht gedaempft - erst eine Auswahl macht es zur Angabe */

/* Mehrfachauswahl der Modelle: Chips zum Antippen; in der Tabelle als
   aufklappende Liste an der Zelle, im Fenster direkt im Formular. */
.modell-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.modell-chips .tag-chip { height: 30px; padding: 0 .7rem; font-size: .82rem; }
.zelle-edit.modell { display: block; }
.zelle-edit.modell .zelle-text { color: #fff; }
.modell-panel { position: fixed; z-index: 60; max-height: 60vh; overflow-y: auto; min-width: 16rem; max-width: 24rem; padding: .6rem; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: #101213; box-shadow: 0 18px 40px rgba(0,0,0,.6); white-space: normal; }
.modell-panel-fuss { display: flex; justify-content: flex-end; margin-top: .55rem; }
.modell-panel-fuss .btn { padding: .3rem .8rem; font-size: .8rem; }
.besuch-form .besuch-modelle { flex: 1 1 100%; }