/* DR.SCHNELL Chat-Auswertung.
   Farben und Schriften nach den Markenrichtlinien: Nacht über München als
   Grundton, Herbstnebel als Fläche, Königssee für ruhige Abstufungen,
   Frühlingssonne nur als Hinweisfarbe – nie für Fließtext. */

@font-face {
  font-family: 'DR.SCHNELL Sans';
  src: url('schriften/DRSCHNELLSans-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DR.SCHNELL Sans';
  src: url('schriften/DRSCHNELLSans-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --nacht: #365D7F;
  --nacht-hell: #5b7f9e;
  --koenigssee: #D2E8DC;
  --herbstnebel: #EEEEE6;
  --fruehling: #FBB874;
  --weiss: #ffffff;
  --linie: #d9d9cf;
  --text-leise: #6b7280;
  --warnung: #9a3b1f;
  --schrift: 'DR.SCHNELL Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(54, 93, 127, .06), 0 4px 16px rgba(54, 93, 127, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--herbstnebel);
  color: var(--nacht);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nacht); }
h1 { font-size: 1.6rem; font-weight: 400; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }

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

.kopf {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .85rem 1.5rem;
  background: var(--nacht); color: var(--herbstnebel);
}
.kopf a { color: var(--herbstnebel); text-decoration: none; }
.kopfmarke { font-weight: 600; letter-spacing: .02em; }
.kopf nav { display: flex; gap: 1.25rem; margin-right: auto; }
.kopf nav a { padding: .2rem 0; border-bottom: 2px solid transparent; }
.kopf nav a:hover { border-bottom-color: var(--fruehling); }
.kopf nav a[aria-current="page"] { border-bottom-color: var(--fruehling); font-weight: 600; }
.konto { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.konto form { margin: 0; }

/* ---------- Grundraster ---------- */

.inhalt { max-width: 1240px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; }
.inhalt-schmal { max-width: 460px; padding-top: 4rem; }

.raster {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  margin-top: 1.25rem;
}
.karte {
  background: var(--weiss); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; box-shadow: var(--schatten);
}
.karte-breit { grid-column: 1 / -1; margin-top: 1.25rem; }
.karte-unter { margin: .15rem 0 1.1rem; color: var(--text-leise); font-size: .85rem; }
.karte-anmeldung h1 { margin-bottom: .2rem; }

/* ---------- Kacheln ---------- */

.kacheln {
  display: grid; gap: 1rem; margin: 1.25rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.kachel {
  background: var(--weiss); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--schatten);
  display: flex; flex-direction: column; gap: .15rem;
}
.kachel-zahl { font-size: 2rem; line-height: 1.1; font-weight: 600; }
.kachel-text { color: var(--text-leise); font-size: .85rem; }
.kachel-warnung { box-shadow: var(--schatten), inset 4px 0 0 var(--fruehling); }

/* ---------- Säulen ---------- */

.saeulen { display: flex; align-items: flex-end; gap: .4rem; padding-top: 1.2rem; }
.saeule-spalte {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.saeule-flaeche { display: block; position: relative; height: 150px; width: 100%; }
.saeule {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px;
  border-radius: 4px 4px 0 0; background: var(--nacht);
}
.saeule-wert { font-size: .7rem; color: var(--text-leise); min-height: 1em; }
.saeule-tag { font-size: .75rem; color: var(--text-leise); }

/* ---------- Balkenliste ---------- */

.balken { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.balken li { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr 2.5rem; align-items: center; gap: .6rem; }
.balken-name {
  font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--koenigssee); border-radius: 999px; padding: .1rem .6rem;
}
.balken-spur { position: relative; display: block; background: var(--herbstnebel); border-radius: 999px; height: 1.15rem; }
.balken-fuellung { position: absolute; left: 0; top: 0; bottom: 0; min-width: 2px; border-radius: 999px; background: var(--nacht); }
.balken-zahl { font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Gesprächstiefe ---------- */

.tiefe { width: 100%; border-collapse: collapse; }
.tiefe th { text-align: left; font-weight: 400; font-size: .85rem; padding: .3rem .6rem .3rem 0; white-space: nowrap; }
.tiefe-balken { width: 100%; }
.tiefe-balken .spur { position: relative; display: block; width: 100%; height: .9rem; border-radius: 999px; background: var(--herbstnebel); }
.tiefe-balken .fuellung { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--nacht); min-width: 2px; }
.tiefe .zahl, .tiefe .anteil { text-align: right; font-size: .85rem; padding-left: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tiefe .anteil { color: var(--text-leise); }

/* ---------- Wärmekarte ---------- */

.waerme { border-collapse: collapse; width: 100%; margin-top: .5rem; }
.waerme th { font-weight: 400; font-size: .8rem; color: var(--text-leise); text-align: left; padding-right: .5rem; }
.waerme td { padding: 1px; }
.zelle { display: block; width: 100%; height: 18px; min-width: 8px; border-radius: 3px; background: var(--herbstnebel); }
.stufe-0 { background: #f4f4ee; }
.stufe-1 { background: var(--koenigssee); }
.stufe-2 { background: #9dc4bb; }
.stufe-3 { background: var(--nacht-hell); }
.stufe-4 { background: var(--nacht); }
.waerme-stunde { font-size: .68rem; color: var(--text-leise); text-align: left; }
.legende { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-leise); margin: .7rem 0 0; }
.legende .zelle { width: 18px; }
.legende-max { margin-left: .4rem; }

.zeit-kopf { display: flex; gap: 2.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.zeit-marke { display: block; font-size: .8rem; color: var(--text-leise); }
.zeit-kopf strong { font-size: 1.3rem; font-weight: 600; }

/* ---------- Gesprächsliste ---------- */

.chatliste { list-style: none; margin: 0; padding: 0; }
.chatzeile { padding: .8rem 0; border-top: 1px solid var(--linie); }
.chatzeile:first-child { border-top: 0; }
.chatzeile-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.chatfrage { font-weight: 600; text-decoration: none; }
.chatfrage:hover { text-decoration: underline; }
.chatzeile time { color: var(--text-leise); font-size: .8rem; white-space: nowrap; }
.chatzeile-fuss { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; align-items: center; }
.chat-anzahl { font-size: .78rem; color: var(--text-leise); }
.marke {
  font-size: .75rem; padding: .1rem .55rem; border-radius: 999px;
  background: var(--koenigssee); color: var(--nacht);
}
.marke-warnung { background: var(--fruehling); }
.marke-test { background: var(--linie); color: var(--text-leise); }
/* QR-Einstieg: eigener Ton, damit er sich von den Produktmarken abhebt. */
.marke-qr { background: var(--nacht); color: var(--herbstnebel); }

/* ---------- Einzelgespräch ---------- */

.zurueck { margin: 0 0 .8rem; font-size: .9rem; }
.verlauf { display: grid; gap: 1.5rem; }
.runde-frage { font-weight: 600; margin: 0 0 .5rem; }
.runde-antwort { white-space: pre-wrap; background: var(--herbstnebel); border-radius: var(--radius); padding: .9rem 1.1rem; }
.runde-ohne { box-shadow: inset 4px 0 0 var(--fruehling); }
.runde-leer { color: var(--text-leise); font-style: italic; }

/* ---------- Tabellen, Formulare, Hinweise ---------- */

.liste { width: 100%; border-collapse: collapse; font-size: .92rem; }
.liste th { text-align: left; font-weight: 600; font-size: .8rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--text-leise); padding: .5rem .6rem; border-bottom: 1px solid var(--linie); }
.liste td { padding: .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.nebensache { color: var(--text-leise); font-size: .85rem; white-space: nowrap; }

label { display: block; font-size: .85rem; margin: .8rem 0 .25rem; color: var(--text-leise); }
input[type=text], input[type=password], input:not([type]), select {
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); color: var(--nacht);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--nacht); outline-offset: 2px;
}
.knopf {
  font: inherit; font-weight: 600; cursor: pointer; margin-top: 1rem;
  background: var(--nacht); color: var(--herbstnebel);
  border: 0; border-radius: 6px; padding: .55rem 1.1rem;
}
.knopf-voll { width: 100%; }
.knopf-schlicht {
  font: inherit; font-size: .85rem; cursor: pointer; background: transparent;
  border: 1px solid currentColor; border-radius: 6px; padding: .25rem .7rem; color: inherit;
}
.reihe { display: flex; gap: .4rem; align-items: center; margin: .2rem 0; }
.reihe select, .reihe input { width: auto; }
details summary { cursor: pointer; font-size: .85rem; color: var(--text-leise); margin-top: .4rem; }

.zeitraum { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.zeitraum label { margin: 0; }
.zeitraum select { width: auto; }
.schalter { display: flex; align-items: center; gap: .4rem; }
.schalter input { width: auto; }
.suche { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.suche label { margin: 0 0 .25rem; }
.suche input { width: 22rem; max-width: 100%; }
.suche .knopf { margin: 0; }
.zuruecksetzen { font-size: .85rem; }

.hinweis { padding: .7rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; }
.hinweis-fehler { background: #f7e2db; box-shadow: inset 4px 0 0 var(--warnung); }
.hinweis-erfolg { background: var(--koenigssee); }
.einleitung { max-width: 68ch; color: var(--text-leise); margin-top: -.4rem; }
.leer { color: var(--text-leise); font-style: italic; }
.hilfe { font-size: .8rem; color: var(--text-leise); margin: .3rem 0 0; }
.mehr { margin: 1rem 0 0; font-size: .9rem; }

.datenstand {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  font-size: .82rem; color: var(--text-leise); max-width: 80ch;
}
.datenstand strong { color: var(--warnung); font-weight: 600; }

@media (max-width: 640px) {
  .balken li { grid-template-columns: 8rem 1fr 2.2rem; }
  .zeit-kopf { gap: 1.2rem; }
  .kopf { gap: .75rem; }
}

/* ---------- Anteile ----------
   Breiten und Höhen als Klassen, weil die Content-Security-Policy
   style-Attribute blockiert (und das so bleiben soll). */
.a-0 { width: 0%; }
.a-1 { width: 1%; }
.a-2 { width: 2%; }
.a-3 { width: 3%; }
.a-4 { width: 4%; }
.a-5 { width: 5%; }
.a-6 { width: 6%; }
.a-7 { width: 7%; }
.a-8 { width: 8%; }
.a-9 { width: 9%; }
.a-10 { width: 10%; }
.a-11 { width: 11%; }
.a-12 { width: 12%; }
.a-13 { width: 13%; }
.a-14 { width: 14%; }
.a-15 { width: 15%; }
.a-16 { width: 16%; }
.a-17 { width: 17%; }
.a-18 { width: 18%; }
.a-19 { width: 19%; }
.a-20 { width: 20%; }
.a-21 { width: 21%; }
.a-22 { width: 22%; }
.a-23 { width: 23%; }
.a-24 { width: 24%; }
.a-25 { width: 25%; }
.a-26 { width: 26%; }
.a-27 { width: 27%; }
.a-28 { width: 28%; }
.a-29 { width: 29%; }
.a-30 { width: 30%; }
.a-31 { width: 31%; }
.a-32 { width: 32%; }
.a-33 { width: 33%; }
.a-34 { width: 34%; }
.a-35 { width: 35%; }
.a-36 { width: 36%; }
.a-37 { width: 37%; }
.a-38 { width: 38%; }
.a-39 { width: 39%; }
.a-40 { width: 40%; }
.a-41 { width: 41%; }
.a-42 { width: 42%; }
.a-43 { width: 43%; }
.a-44 { width: 44%; }
.a-45 { width: 45%; }
.a-46 { width: 46%; }
.a-47 { width: 47%; }
.a-48 { width: 48%; }
.a-49 { width: 49%; }
.a-50 { width: 50%; }
.a-51 { width: 51%; }
.a-52 { width: 52%; }
.a-53 { width: 53%; }
.a-54 { width: 54%; }
.a-55 { width: 55%; }
.a-56 { width: 56%; }
.a-57 { width: 57%; }
.a-58 { width: 58%; }
.a-59 { width: 59%; }
.a-60 { width: 60%; }
.a-61 { width: 61%; }
.a-62 { width: 62%; }
.a-63 { width: 63%; }
.a-64 { width: 64%; }
.a-65 { width: 65%; }
.a-66 { width: 66%; }
.a-67 { width: 67%; }
.a-68 { width: 68%; }
.a-69 { width: 69%; }
.a-70 { width: 70%; }
.a-71 { width: 71%; }
.a-72 { width: 72%; }
.a-73 { width: 73%; }
.a-74 { width: 74%; }
.a-75 { width: 75%; }
.a-76 { width: 76%; }
.a-77 { width: 77%; }
.a-78 { width: 78%; }
.a-79 { width: 79%; }
.a-80 { width: 80%; }
.a-81 { width: 81%; }
.a-82 { width: 82%; }
.a-83 { width: 83%; }
.a-84 { width: 84%; }
.a-85 { width: 85%; }
.a-86 { width: 86%; }
.a-87 { width: 87%; }
.a-88 { width: 88%; }
.a-89 { width: 89%; }
.a-90 { width: 90%; }
.a-91 { width: 91%; }
.a-92 { width: 92%; }
.a-93 { width: 93%; }
.a-94 { width: 94%; }
.a-95 { width: 95%; }
.a-96 { width: 96%; }
.a-97 { width: 97%; }
.a-98 { width: 98%; }
.a-99 { width: 99%; }
.a-100 { width: 100%; }
.hoch-0 { height: 0%; }
.hoch-1 { height: 1%; }
.hoch-2 { height: 2%; }
.hoch-3 { height: 3%; }
.hoch-4 { height: 4%; }
.hoch-5 { height: 5%; }
.hoch-6 { height: 6%; }
.hoch-7 { height: 7%; }
.hoch-8 { height: 8%; }
.hoch-9 { height: 9%; }
.hoch-10 { height: 10%; }
.hoch-11 { height: 11%; }
.hoch-12 { height: 12%; }
.hoch-13 { height: 13%; }
.hoch-14 { height: 14%; }
.hoch-15 { height: 15%; }
.hoch-16 { height: 16%; }
.hoch-17 { height: 17%; }
.hoch-18 { height: 18%; }
.hoch-19 { height: 19%; }
.hoch-20 { height: 20%; }
.hoch-21 { height: 21%; }
.hoch-22 { height: 22%; }
.hoch-23 { height: 23%; }
.hoch-24 { height: 24%; }
.hoch-25 { height: 25%; }
.hoch-26 { height: 26%; }
.hoch-27 { height: 27%; }
.hoch-28 { height: 28%; }
.hoch-29 { height: 29%; }
.hoch-30 { height: 30%; }
.hoch-31 { height: 31%; }
.hoch-32 { height: 32%; }
.hoch-33 { height: 33%; }
.hoch-34 { height: 34%; }
.hoch-35 { height: 35%; }
.hoch-36 { height: 36%; }
.hoch-37 { height: 37%; }
.hoch-38 { height: 38%; }
.hoch-39 { height: 39%; }
.hoch-40 { height: 40%; }
.hoch-41 { height: 41%; }
.hoch-42 { height: 42%; }
.hoch-43 { height: 43%; }
.hoch-44 { height: 44%; }
.hoch-45 { height: 45%; }
.hoch-46 { height: 46%; }
.hoch-47 { height: 47%; }
.hoch-48 { height: 48%; }
.hoch-49 { height: 49%; }
.hoch-50 { height: 50%; }
.hoch-51 { height: 51%; }
.hoch-52 { height: 52%; }
.hoch-53 { height: 53%; }
.hoch-54 { height: 54%; }
.hoch-55 { height: 55%; }
.hoch-56 { height: 56%; }
.hoch-57 { height: 57%; }
.hoch-58 { height: 58%; }
.hoch-59 { height: 59%; }
.hoch-60 { height: 60%; }
.hoch-61 { height: 61%; }
.hoch-62 { height: 62%; }
.hoch-63 { height: 63%; }
.hoch-64 { height: 64%; }
.hoch-65 { height: 65%; }
.hoch-66 { height: 66%; }
.hoch-67 { height: 67%; }
.hoch-68 { height: 68%; }
.hoch-69 { height: 69%; }
.hoch-70 { height: 70%; }
.hoch-71 { height: 71%; }
.hoch-72 { height: 72%; }
.hoch-73 { height: 73%; }
.hoch-74 { height: 74%; }
.hoch-75 { height: 75%; }
.hoch-76 { height: 76%; }
.hoch-77 { height: 77%; }
.hoch-78 { height: 78%; }
.hoch-79 { height: 79%; }
.hoch-80 { height: 80%; }
.hoch-81 { height: 81%; }
.hoch-82 { height: 82%; }
.hoch-83 { height: 83%; }
.hoch-84 { height: 84%; }
.hoch-85 { height: 85%; }
.hoch-86 { height: 86%; }
.hoch-87 { height: 87%; }
.hoch-88 { height: 88%; }
.hoch-89 { height: 89%; }
.hoch-90 { height: 90%; }
.hoch-91 { height: 91%; }
.hoch-92 { height: 92%; }
.hoch-93 { height: 93%; }
.hoch-94 { height: 94%; }
.hoch-95 { height: 95%; }
.hoch-96 { height: 96%; }
.hoch-97 { height: 97%; }
.hoch-98 { height: 98%; }
.hoch-99 { height: 99%; }
.hoch-100 { height: 100%; }