:root {
  /* Zehner Immobilien — Blau exakt aus der Logodatei ausgelesen */
  --ci:        #07609E;
  --ci-mittel: #3390cd;
  --ci-hell:   #a9dcf6;
  --ci-zart:   #eaf4fb;

  --grund:     #f6f9fc;   /* sehr helles Blaugrau, wärmer als reines Weiss */
  --flaeche:   #ffffff;
  --rand:      #e2eaf1;
  --rand-satt: #cbdbe8;
  --schrift:   #12222f;
  --gedaempft: #62798c;
  --warn:      #b06a12;
  --fehler:    #c8434f;

  --schatten:      0 1px 2px rgba(18, 34, 47, .05), 0 6px 20px rgba(18, 34, 47, .05);
  --schatten-hoch: 0 2px 6px rgba(18, 34, 47, .07), 0 20px 50px rgba(18, 34, 47, .13);
  --rund:      14px;
}

/* Abends nicht blenden — dieselbe Gestaltung, nur gedämpft */
@media (prefers-color-scheme: dark) {
  :root {
    --grund:     #101821;
    --flaeche:   #17222d;
    --rand:      #24333f;
    --rand-satt: #33475a;
    --schrift:   #e8eef4;
    --gedaempft: #94a9ba;
    --ci-zart:   #16303f;
    --warn:      #e0a458;
    --fehler:    #e97b85;
    --schatten:      0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    --schatten-hoch: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 50px rgba(0, 0, 0, .45);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--grund);
  color: var(--schrift);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---------------- Kopf ---------------- */

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 22px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 5;
}

.marke { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hauszeichen { width: 30px; height: auto; flex: none; }

.markentext { min-width: 0; }
.markentext strong {
  display: block; font-size: 14.5px; font-weight: 700;
  letter-spacing: .08em; color: var(--ci); white-space: nowrap;
}
.markentext strong span { color: var(--schrift); font-weight: 500; }
.unterzeile {
  display: block; font-size: 12px; color: var(--gedaempft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

.kopfknoepfe { display: flex; align-items: center; gap: 6px; flex: none; }

.symbol {
  background: transparent; border: 1px solid transparent;
  color: var(--gedaempft); font-size: 17px; line-height: 1;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.symbol:hover { background: var(--ci-zart); color: var(--ci); }
.symbol[aria-pressed="true"] { background: var(--ci-zart); color: var(--ci); }
.symbol.gross { font-size: 18px; padding: 12px 14px; border-radius: 12px; }
.symbol.senden {
  background: var(--ci); color: #fff; border-color: var(--ci);
  box-shadow: 0 2px 8px rgba(7, 96, 158, .28);
}
.symbol.senden:hover { background: #0a72b8; }
.symbol.senden:disabled { opacity: .4; cursor: default; box-shadow: none; }
.symbol.hoert {
  color: #fff; background: var(--fehler); border-color: var(--fehler);
  animation: hoerpuls 1.5s ease-in-out infinite;
}
@keyframes hoerpuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 67, 79, .4); }
  50%      { box-shadow: 0 0 0 8px rgba(200, 67, 79, 0); }
}

/* ---------------- Statusleiste ---------------- */

.statuszeile {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 10px 22px 0;
  font-size: 12px; color: var(--gedaempft);
}
.statuszeile .feld {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.statuszeile .feld b { color: var(--ci); font-weight: 600; }
.statuszeile .feld.aus { border-color: rgba(176, 106, 18, .4); }
.statuszeile .feld.aus b { color: var(--warn); }

/* ---------------- Die Wabe ---------------- */

.wabe {
  flex: none; display: block;
  width: min(280px, 56vw); height: auto;
  filter: drop-shadow(0 12px 28px rgba(7, 96, 158, .18));
}

.wabe .skala, .wabe .bogen, .wabe .speichen line { fill: none; stroke: var(--ci-mittel); }
.wabe circle, .wabe .speichen { transform-origin: 120px 120px; }
.wabe .skala { stroke-width: 1.2; opacity: .22; stroke-dasharray: 1.5 10; }
.wabe .bogen { stroke-width: 2; opacity: .3; stroke-linecap: round; }
.wabe .r2 { stroke-dasharray: 300 347; }
.wabe .r4 { stroke-dasharray: 120 383; }
.wabe .speichen line { stroke-width: 2.5; opacity: .25; stroke-linecap: round; }

.wabe .zellen use {
  fill: var(--ci); opacity: .13;
  stroke: var(--ci-mittel); stroke-width: 1.5; stroke-opacity: .3;
}
.wabe .kern use {
  transform-origin: 0 0; transform: scale(.92);
  stroke: #fff; stroke-width: 2; stroke-opacity: .55;
}
.wabe .kern { opacity: .96; }

@media (prefers-color-scheme: dark) {
  .wabe { filter: drop-shadow(0 0 26px rgba(51, 144, 205, .3)); }
  .wabe .zellen use { opacity: .2; }
  .wabe .kern use { stroke-opacity: .3; }
}

/* Ruhezustand: sanftes Atmen */
.wabe .r1 { animation: drehen 90s linear infinite; }
.wabe .r2 { animation: drehen-zurueck 30s linear infinite; }
.wabe .r3 { animation: drehen 52s linear infinite; }
.wabe .r4 { animation: drehen-zurueck 18s linear infinite; }
.wabe .zellen use { animation: welle 4s ease-in-out infinite; }
.wabe .kern use   { animation: kernpuls 4.2s ease-in-out infinite; }

/* Denkt nach */
.wabe.denkt .r2 { animation-duration: 3.4s; }
.wabe.denkt .r4 { animation-duration: 2.2s; }
.wabe.denkt .r1 { animation-duration: 16s; }
.wabe.denkt .zellen use { animation: zellenblinken 1.6s ease-in-out infinite; }
.wabe.denkt .kern use   { animation: kernpuls 1.1s ease-in-out infinite; }

/* Hört zu */
.wabe.hoert .bogen, .wabe.hoert .speichen line { stroke: var(--fehler); opacity: .45; }
.wabe.hoert .kern use { animation: kernpuls .9s ease-in-out infinite; }

/* Spricht — Welle läuft durch die Zellen, Kern pulsiert unregelmässig.
   Rein über CSS, läuft damit auch bei gedrosseltem JavaScript. */
.wabe.spricht .r2 { animation-duration: 10s; }
.wabe.spricht .r4 { animation-duration: 6s; }
.wabe.spricht .bogen { opacity: .5; }
.wabe.spricht .kern use   { animation: sprechen 760ms ease-in-out infinite; }
.wabe.spricht .zellen use { animation: welle 1.2s ease-in-out infinite; }
.wabe.spricht { filter: drop-shadow(0 10px 34px rgba(7, 96, 158, .3)); }

.wabe .zellen use:nth-child(1) { animation-delay: 0s; }
.wabe .zellen use:nth-child(2) { animation-delay: .2s; }
.wabe .zellen use:nth-child(3) { animation-delay: .4s; }
.wabe .zellen use:nth-child(4) { animation-delay: .6s; }
.wabe .zellen use:nth-child(5) { animation-delay: .8s; }
.wabe .zellen use:nth-child(6) { animation-delay: 1s; }

.wabe.fehler .bogen { stroke: var(--fehler); }
.wabe.fehler .kern  { opacity: .35; }

@keyframes sprechen {
  0%   { transform: scale(.9); }
  20%  { transform: scale(1.07); }
  40%  { transform: scale(.95); }
  58%  { transform: scale(1.12); }
  78%  { transform: scale(.97); }
  100% { transform: scale(.9); }
}
@keyframes welle          { 0%, 100% { opacity: .1; } 45% { opacity: .5; } }
@keyframes drehen         { to { transform: rotate(360deg); } }
@keyframes drehen-zurueck { to { transform: rotate(-360deg); } }
@keyframes kernpuls       { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1); } }
@keyframes zellenblinken  { 0%, 100% { opacity: .1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) { .wabe * { animation: none !important; } }

/* ---------------- Menü ---------------- */

.menue {
  position: absolute; right: 16px; top: 66px; z-index: 10;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--rund); padding: 7px; min-width: 250px;
  box-shadow: var(--schatten-hoch);
}
.menue button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--schrift);
  padding: 11px 13px; border-radius: 9px; font-size: 14.5px; cursor: pointer;
}
.menue button:hover { background: var(--ci-zart); color: var(--ci); }
.menue button.warnung { color: var(--fehler); }
.menue button.warnung:hover { background: rgba(200, 67, 79, .08); color: var(--fehler); }

/* ---------------- Karten und Tafeln ---------------- */

.panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 20; width: min(420px, calc(100vw - 32px));
  max-height: 86vh; overflow-y: auto;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 20px; padding: 26px;
  box-shadow: var(--schatten-hoch);
  display: flex; flex-direction: column; gap: 8px;
}
/* Muss nach .panel stehen: sonst gewinnt display:flex gegen das hidden-Attribut */
.panel[hidden] { display: none; }

.panelschatten {
  position: fixed; inset: 0; z-index: 19;
  background: rgba(18, 34, 47, .35); backdrop-filter: blur(3px);
}
.panelschatten[hidden] { display: none; }

.panel h2 {
  font-size: 17px; font-weight: 600; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--rand);
}
.panel label { font-size: 13px; color: var(--gedaempft); margin-top: 12px; }
.panel select {
  background: var(--grund); color: var(--schrift);
  border: 1px solid var(--rand-satt); border-radius: 10px;
  padding: 12px 13px; font-size: 15px;
}
.panel select:focus { outline: none; border-color: var(--ci-mittel); }
.panel input[type="range"] { accent-color: var(--ci); width: 100%; }
.panel .notiz { font-size: 12.5px; color: var(--gedaempft); line-height: 1.55; }

.panelknoepfe { display: flex; gap: 9px; margin-top: 22px; }
.panelknoepfe button {
  flex: 1; padding: 12px; border-radius: 10px; font-size: 14px; cursor: pointer;
  background: var(--grund); color: var(--schrift); border: 1px solid var(--rand-satt);
  transition: background .15s, border-color .15s;
}
.panelknoepfe button.haupt {
  background: var(--ci); border-color: var(--ci); color: #fff; font-weight: 500;
}
.panelknoepfe button:hover { border-color: var(--ci-mittel); }
.panelknoepfe button.haupt:hover { background: #0a72b8; }

.panel.tafel { width: min(780px, calc(100vw - 32px)); }
.ergebnistext {
  max-height: 58vh; overflow-y: auto; text-align: left;
  font-size: 14.5px; line-height: 1.75; padding-right: 8px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------------- Bühne ---------------- */

#buehne {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; padding: 24px; text-align: center;
}

.gesagt {
  font-size: 14px; color: var(--gedaempft);
  min-height: 18px; max-width: 60ch;
  opacity: 0; transition: opacity .3s;
}
.gesagt.da { opacity: 1; }

.taetigkeitzeile {
  font-size: 13.5px; color: var(--ci);
  min-height: 18px; opacity: 0; transition: opacity .25s;
}
.taetigkeitzeile.da { opacity: 1; }
.taetigkeitzeile::after { content: ' …'; }

.antwort {
  font-size: clamp(16px, 2.2vw, 21px); line-height: 1.6;
  max-width: 50ch; color: var(--schrift);
  max-height: 40vh; overflow-y: auto;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s, transform .35s;
}
.antwort.da { opacity: 1; transform: none; }
.antwort.fehler { color: var(--fehler); }
.antwort .quelle {
  display: block; margin-top: 14px; font-size: 12px; color: var(--gedaempft);
}

.vorschlaege { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.vorschlaege button {
  background: var(--flaeche); border: 1px solid var(--rand); color: var(--schrift);
  padding: 10px 17px; border-radius: 999px; font-size: 13.5px; cursor: pointer;
  box-shadow: var(--schatten);
  transition: transform .15s, border-color .15s, color .15s, box-shadow .15s;
}
.vorschlaege button:hover {
  border-color: var(--ci-mittel); color: var(--ci);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(7, 96, 158, .13);
}

/* ---------------- Fuss ---------------- */

footer {
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
}

.hinweis { font-size: 13px; color: var(--warn); padding: 2px 10px 12px; text-align: center; }
.hinweis.aktion { color: var(--ci); cursor: pointer; text-decoration: underline; }

#eingabezeile {
  display: flex; align-items: flex-end; gap: 10px;
  max-width: 860px; margin: 0 auto;
}
#mikroknopf[aria-pressed="true"] { background: var(--ci-zart); color: var(--ci); }

textarea {
  flex: 1; resize: none; max-height: 30vh;
  background: var(--grund); color: var(--schrift);
  border: 1px solid var(--rand-satt); border-radius: 16px;
  padding: 14px 17px; font: inherit; font-size: 16px;   /* 16px: kein Zoom auf iOS */
  line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
textarea::placeholder { color: var(--gedaempft); }
textarea:focus {
  outline: none; border-color: var(--ci-mittel);
  box-shadow: 0 0 0 3px rgba(51, 144, 205, .15);
}

/* ---------------- Anmeldung ---------------- */

body.anmeldung { justify-content: center; align-items: center; padding: 24px; }

.karte {
  width: 100%; max-width: 380px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 20px; padding: 36px 30px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--schatten-hoch);
}
.karte .kopf { text-align: center; margin-bottom: 22px; }
.karte .kopf img { width: 54px; height: auto; margin-bottom: 16px; }
.karte .kopf strong {
  display: block; font-size: 15px; font-weight: 700;
  letter-spacing: .08em; color: var(--ci);
}
.karte .kopf strong span { color: var(--schrift); font-weight: 500; }
.karte .kopf .unterzeile { margin-top: 5px; text-align: center; }
.karte label { font-size: 13px; color: var(--gedaempft); }
.karte input {
  background: var(--grund); border: 1px solid var(--rand-satt); border-radius: 12px;
  padding: 13px 15px; color: var(--schrift); font-size: 16px;
}
.karte input:focus {
  outline: none; border-color: var(--ci-mittel);
  box-shadow: 0 0 0 3px rgba(51, 144, 205, .15);
}
.karte button {
  margin-top: 12px; background: var(--ci); color: #fff; border: 0;
  border-radius: 12px; padding: 14px; font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: 0 2px 10px rgba(7, 96, 158, .25);
}
.karte button:hover { background: #0a72b8; }
.karte .fussnote { font-size: 12px; color: var(--gedaempft); text-align: center; }
.karte .fehler {
  background: rgba(200, 67, 79, .08); border: 1px solid rgba(200, 67, 79, .3);
  color: var(--fehler); border-radius: 12px; padding: 11px 13px; font-size: 13.5px;
}

@media (max-width: 560px) {
  header { padding: 12px 16px; }
  .statuszeile { padding: 10px 16px 0; font-size: 11.5px; }
  #buehne { padding: 18px 16px; gap: 16px; }
  footer { padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  #buehne { gap: 24px; }
}