/* support.rc-tec.info — Oberflaeche des Telefonsupports.
 *
 * Farben und Schriften sind die rc-tec-CI, unveraendert uebernommen aus
 * control/public/style.css:
 *   Rot #E30A18 · Dunkel #212121 / #1C1B1B · Grau #A8A8A8 / #DADADA
 *   Source Sans Pro (Ueberschriften, Bedienelemente) · Tajawal (Fliesstext)
 *
 * Abweichend von den Prospektseiten ist hier nichts animiert und nichts
 * diagonal: das ist ein Werkzeug, das jemand acht Stunden am Tag mit einem
 * Kunden am Ohr bedient. Uebernommen wird die Handschrift -- Rot als einzige
 * Akzentfarbe, scharfe Kanten, roter Balken unter der Ueberschrift,
 * Versalien mit Sperrung fuer Bedienelemente -- nicht die Gesten.
 *
 * Die Schriften liegen lokal unter fonts/, nicht bei Google: der Aufruf an
 * fonts.gstatic.com uebertraegt die IP jedes Besuchers dorthin. Beide
 * Familien stehen unter der SIL Open Font License. Die Dateien sind
 * byte-identisch mit denen der control-Seite -- neue Schnitte muessen hier
 * UND als Datei ergaenzt werden, sonst rechnet der Browser einen Kunstschnitt.
 */

@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url('fonts/source-sans-pro-200-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url('fonts/source-sans-pro-200-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/source-sans-pro-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/source-sans-pro-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-sans-pro-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/source-sans-pro-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/source-sans-pro-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/source-sans-pro-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/source-sans-pro-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/source-sans-pro-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Tajawal';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------------
   Farbtokens — identisch benannt wie in control/public/style.css.
   Wer die CI anfasst, kann die beiden :root-Bloecke nebeneinanderlegen.

   Dark ist der Standard, Light kommt ueber data-theme="light" am <html>.
   Die Wahl merkt sich der Browser unter "rct-theme" — derselbe Schluessel
   wie auf den anderen rc-tec-Seiten (der Speicher ist je Domain getrennt,
   der Name bleibt trotzdem einheitlich).
   --------------------------------------------------------------------------- */

:root{
  /* CI-Konstanten — in beiden Modi identisch */
  --red:#E30A18;
  --red-dark:#c00815;
  --on-red:#ffffff;

  /* Dark Mode (Standard) */
  --bg-dark:#212121;
  --bg-darker:#1C1B1B;
  --bg-darkest:#151414;
  --border:#3a3a3a;
  --text-strong:#ffffff;
  --text-grey:#A8A8A8;
  --text-light-grey:#DADADA;
  --text-muted:#9C9C9C;

  /* CI-Rot erreicht als Kleintext auf Dunkel nur 3,3:1 — aufgehellte
     Variante nur fuer Textrot, Flaechen und Rahmen bleiben --red */
  --red-text:#FF3B47;
  --panel-tint:rgba(255,255,255,0.02);
  --zeile-hover:rgba(255,255,255,0.04);

  /* Zustandsfarben. Die CI kennt nur Rot und Graustufen; eine Warteschlange
     braucht aber drei unterscheidbare Zustaende. Deshalb genau zwei
     Zusatzfarben, entsaettigt, ausschliesslich fuer Status. */
  --warn:#D9A33A;
  --warn-bg:rgba(217,163,58,0.14);
  --ok:#5FC78D;
  --ok-bg:rgba(95,199,141,0.13);
  --red-bg:rgba(227,10,24,0.16);

  --schatten:0 20px 50px -12px rgba(0,0,0,0.6);
  --ui:'Source Sans Pro', sans-serif;
  --text:'Tajawal', sans-serif;
  color-scheme:dark;
}

:root[data-theme="light"]{
  --bg-dark:#ffffff;
  --bg-darker:#f4f4f4;
  --bg-darkest:#efefef;
  --border:#d9d9d9;
  --text-strong:#1C1B1B;
  --text-grey:#5a5a5a;
  --text-light-grey:#3d3d3d;
  --text-muted:#5d5c5c;
  --red-text:#CE0916;
  --panel-tint:rgba(0,0,0,0.02);
  --zeile-hover:rgba(0,0,0,0.04);

  --warn:#8a5a00;
  --warn-bg:rgba(217,163,58,0.18);
  --ok:#1c7c4a;
  --ok-bg:rgba(28,124,74,0.12);
  --red-bg:rgba(227,10,24,0.08);

  --schatten:0 20px 50px -12px rgba(0,0,0,0.18);
  color-scheme:light;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg-dark);
  color:var(--text-strong);
  font-family:var(--text);
  font-weight:400;
  font-size:15px;
  line-height:1.6;
}

h1,h2,h3,h4{ font-family:var(--ui); margin:0; }
a{ color:var(--red-text); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Kopfleiste und Seitenleiste ----------
 *
 * Eine Navigation, zwei Darstellungen. Ab 1024px steht sie als Spalte links
 * und traegt Marke, Konto und Abmelden; die Kopfzeile entfaellt dann ganz.
 * Darunter uebernimmt die Kopfzeile diese Rolle, und dieselbe Navigation
 * klappt als Schublade darunter auf.
 */

.kopf{
  display:none;              /* erscheint erst unter 1024px */
  align-items:center; gap:12px;
  padding:0 16px; min-height:52px;
  background:var(--bg-darker);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}

.marke{
  font-family:var(--ui); font-weight:700; font-size:17px;
  letter-spacing:0.02em; color:var(--text-strong);
  flex-shrink:0;
}
.marke:hover{ text-decoration:none; }
/* Der rote Punkt ist das kleinste Stueck CI, das in eine Kopfzeile passt. */
.marke::after{
  content:''; display:inline-block;
  width:6px; height:6px; margin-left:6px; vertical-align:middle;
  background:var(--red);
}

button.menu-knopf{ display:none; }

.abmelden{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ui); font-size:12px; letter-spacing:0.04em;
  color:var(--text-muted);
}
.abmelden a{ color:var(--text-light-grey); }

/* ---- Die Navigation selbst ---- */

.seitenleiste{
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg-darker);
  border-right:1px solid var(--border);
  padding:16px 12px;
}

.seitenleiste .marke{ padding:0 10px; margin-bottom:20px; font-size:18px; }

.nav-gruppe{ display:flex; flex-direction:column; gap:1px; margin-bottom:18px; }

.nav-titel{
  font-family:var(--ui); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-muted);
  margin:0 0 6px; padding:0 10px;
}

.seitenleiste a{
  font-family:var(--ui); font-size:13px; font-weight:600;
  letter-spacing:0.03em;
  color:var(--text-light-grey);
  padding:7px 10px;
  border-left:2px solid transparent;
}
.seitenleiste a:hover{ color:var(--red-text); background:var(--panel-tint); text-decoration:none; }
/* Der rote Balken links ist dasselbe Leitmotiv wie unter den Ueberschriften. */
.seitenleiste a.aktiv{ color:var(--text-strong); border-left-color:var(--red); background:var(--panel-tint); }
.seitenleiste a.klein{ font-size:12px; font-weight:400; letter-spacing:0; }

/* Der haeufigste Klick des Tages, entsprechend hervorgehoben. */
.seitenleiste a.ruf{
  background:var(--red); color:var(--on-red);
  border-left-color:var(--red);
  margin:2px 0;
}
.seitenleiste a.ruf:hover{ background:var(--red-dark); color:var(--on-red); }
.seitenleiste a.ruf.aktiv{ background:var(--red); color:var(--on-red); }

.nav-fuss{
  margin-top:auto; padding-top:14px;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:8px;
}
.nav-fuss > a{ font-weight:400; font-size:12px; color:var(--text-muted); }
.nav-fuss .reihe{ padding:0 10px; align-items:center; }

/* Zeigt das Ziel, nicht den Ist-Zustand: Dark aktiv -> Sonne.
   button.theme-toggle statt .theme-toggle: die allgemeine Regel button:hover
   ist mit ihrer Pseudoklasse spezifischer als eine reine Klasse und faerbt
   den Knopf sonst beim Ueberfahren rot aus. */
button.theme-toggle{
  flex-shrink:0; width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--border); color:var(--text-light-grey);
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
button.theme-toggle:hover{ background:transparent; border-color:var(--red); color:var(--red-text); }
button.theme-toggle svg{ width:16px; height:16px; display:block; }
button.theme-toggle .icon-sun{ display:block; }
button.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] button.theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] button.theme-toggle .icon-moon{ display:block; }

/* ---- Feste Leiste unten (nur Telefon, siehe Stufen am Dateiende) ---- */

.unten{ display:none; }

/* ---------- Grundlayout ---------- */

/* Die Schale traegt ab 1024px die Seitenleiste in der ersten Spalte. */
.schale{ display:block; }
main{ max-width:1280px; margin:0 auto; padding:24px 24px 64px; }

@media (min-width:1024px){
  .schale{ display:grid; grid-template-columns:240px minmax(0, 1fr); align-items:start; }
  /* Klebt mit und scrollt fuer sich: mit acht Berichten wird sie laenger
     als so mancher Bildschirm. */
  .seitenleiste{ position:sticky; top:0; height:100dvh; overflow-y:auto; }
  /* Die Umschaltleiste auf der Berichtsseite zeigt dasselbe wie die
     Seitenleiste -- eine der beiden reicht. Mit .schale davor, weil die
     Regel .reihe{display:flex} weiter unten steht und bei gleicher
     Spezifitaet sonst gewinnt. */
  .schale .berichtswahl{ display:none; }
}

@media (max-width:1023px){
  /* Ohne Seitenleiste uebernimmt die Kopfzeile Marke, Konto und Abmelden. */
  .kopf{ display:flex; }
  .nur-breit{ display:none; }
}

h1{ font-weight:300; font-size:24px; letter-spacing:0.01em; }
h2{ font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:0.06em; margin:28px 0 10px; color:var(--text-strong); }
h3{ font-family:var(--ui); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:var(--red-text); margin:0 0 10px; }

.leise-text{ color:var(--text-grey); }
.klein{ font-size:13px; }

.kopfzeile{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
/* Der rote Balken unter der Ueberschrift ist das Leitmotiv der CI. */
.kopfzeile h1::after{
  content:''; display:block; width:64px; height:3px;
  background:var(--red); margin:8px 0 0;
}
.kopfzeile .untertitel{ color:var(--text-grey); font-size:14px; margin-top:8px; max-width:70ch; }

.karte{
  background:var(--panel-tint);
  border:1px solid var(--border);
  padding:18px 20px;
  margin-bottom:16px;
}

/* Ein unwiderruflicher Schritt soll sich auch so anfuehlen. */
.karte.gefahr{ border-color:var(--red); border-left-width:3px; background:var(--red-bg); }
.karte.gefahr code{ font-weight:600; }

/* ---------- Befehle zum Abtippen ---------- */
code{ font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-size:0.92em; }
pre{
  font-family:ui-monospace, "Cascadia Mono", Consolas, monospace;
  background:var(--bg-darkest);
  border:1px solid var(--border);
  padding:12px 14px;
  margin:0 0 12px;
  line-height:1.5;
  color:var(--text-light-grey);
  /* Lieber schieben als umbrechen: ein Befehl, den der Browser an einer
     beliebigen Stelle umbricht, wird beim Abtippen zur Fehlerquelle. */
  overflow-x:auto;
}
pre code{ font-size:12px; white-space:pre; }

.spalten{ display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start; }
/* Ein Rasterfeld ist von sich aus mindestens so breit wie sein breitester
   Inhalt. Ein Befehlsblock oder eine breite Tabelle schiebt damit die ganze
   Seite auf -- auf dem Telefon sichtbar als Querlauf. min-width:0 gibt dem
   Feld die Erlaubnis, schmaler zu sein; der Inhalt regelt seinen Ueberlauf
   dann selbst (pre schiebt, Tabellen stapeln). */
.spalten > *{ min-width:0; }
.reihe{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }

/* ---------- Meldungen ---------- */

.meldung{
  font-family:var(--ui); font-size:14px;
  padding:10px 14px; margin:0 0 14px;
  border:1px solid currentColor; border-left-width:3px;
}
.meldung.ok{ background:var(--ok-bg); color:var(--ok); }
.meldung.fehler{ background:var(--red-bg); color:var(--red-text); }

/* ---------- Formulare ---------- */

label{
  display:block; font-family:var(--ui); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.07em;
  color:var(--text-muted); margin-bottom:5px;
}

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=datetime-local], input[type=search], input[type=number], select, textarea{
  width:100%;
  padding:8px 10px;
  background:var(--bg-darkest);
  color:var(--text-strong);
  border:1px solid var(--border);
  font-family:var(--text); font-size:14px;
}
input:focus, select:focus, textarea:focus{ border-color:var(--red); }
textarea{ min-height:76px; resize:vertical; }

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .knopf:focus-visible{
  outline:2px solid var(--red); outline-offset:1px;
}

.feld{ margin-bottom:12px; flex:1 1 200px; }
.feld.schmal{ flex:0 1 140px; }
/* Zwei Datumsfelder, die zusammengehoeren und deshalb zusammen umbrechen. */
.feld.zeitraum{ flex:0 1 300px; }
/* Fuer Felder, deren Beschriftung laenger ist als das Bedienelement --
   etwa ein Haken mit einem ganzen Satz daneben. */
.feld.mittel{ flex:0 1 250px; }
.reihe.zeit-paar{ flex-wrap:nowrap; gap:6px; }

button, .knopf{
  display:inline-block;
  font-family:var(--ui); font-size:12px; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; white-space:nowrap;
  padding:9px 18px;
  border:1px solid var(--red); background:var(--red); color:var(--on-red);
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
button:hover, .knopf:hover{ background:var(--red-dark); border-color:var(--red-dark); color:var(--on-red); text-decoration:none; }

button.leise, .knopf.leise{
  background:transparent; color:var(--text-light-grey); border-color:var(--border);
}
button.leise:hover, .knopf.leise:hover{ background:transparent; border-color:var(--red); color:var(--red-text); }

button.winzig, .knopf.winzig{ padding:4px 10px; font-size:11px; letter-spacing:0.05em; }

fieldset{ border:1px solid var(--border); padding:12px 14px; margin:0 0 14px; }
legend{ font-family:var(--ui); font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); padding:0 6px; }

summary{ cursor:pointer; }

/* ---------- Tabellen ---------- */

table{ width:100%; border-collapse:collapse; font-size:14px; }
th{
  text-align:left;
  font-family:var(--ui); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.07em;
  color:var(--text-muted);
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  background:var(--bg-darker);
}
td{ padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text-light-grey); }
tbody tr{ transition:background 0.15s ease; }
tbody tr:hover{ background:var(--zeile-hover); }
td.zahl, th.zahl{ text-align:right; font-variant-numeric:tabular-nums; }
.tabelle-rahmen{ background:var(--panel-tint); border:1px solid var(--border); overflow-x:auto; }
.leer{ padding:32px; text-align:center; color:var(--text-muted); font-family:var(--ui); }

/* ---------- Marken ---------- */

.marke-status, .prio, .pille{
  display:inline-block;
  font-family:var(--ui); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em;
  padding:2px 8px; white-space:nowrap;
  border:1px solid currentColor;
}
.pille{ color:var(--text-muted); }
.marke-status.open{ background:var(--red-bg); color:var(--red-text); }
.marke-status.waiting{ background:var(--warn-bg); color:var(--warn); }
.marke-status.resolved, .marke-status.closed{ background:var(--ok-bg); color:var(--ok); }
/* Gesperrtes Konto -- eigene Klasse, damit sie sich nicht die des
   Vorgangsstatus borgt und bei dessen naechster Aenderung mitwandert. */
.marke-status.gesperrt{ background:var(--red-bg); color:var(--red-text); }
.prio.p3{ background:var(--warn-bg); color:var(--warn); }
.prio.p4{ background:var(--red-bg); color:var(--red-text); }
/* Nur was Aufmerksamkeit braucht, bekommt eine Pille. */
.prio.p1, .prio.p2{ color:var(--text-muted); border-color:transparent; padding-left:0; padding-right:0; }

.nr{ font-family:var(--ui); font-weight:600; font-size:13px; color:var(--text-muted); }

/* ---------- Kennzahlen ---------- */

.kacheln{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; margin-bottom:22px; }
.kachel{
  background:var(--panel-tint); border:1px solid var(--border);
  border-left:3px solid var(--red);
  padding:14px 16px;
  transition:border-color 0.25s ease, box-shadow 0.25s ease;
}
a.kachel:hover{ border-color:var(--red); box-shadow:0 0 24px -6px rgba(227,10,24,0.35); text-decoration:none; }
/* In einer Karte stehen Kacheln in einer schmalen Spalte -- dort zwei
   nebeneinander statt untereinander. */
.karte .kacheln{ grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.karte .kachel{ padding:10px 12px; }
.karte .kachel .wert{ font-size:22px; }
.kachel .wert{
  font-family:var(--ui); font-size:28px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
  color:var(--text-strong); line-height:1.1;
}
.kachel .bez{ font-family:var(--ui); font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-top:4px; }
/* Fuer Kacheln, in denen keine Zahl steht, sondern eine Angabe wie
   "vor 3 Tagen" -- in Ziffergroesse saehe die aus wie ein Messwert. */
.kachel .wert.klein-wert{ font-size:17px; letter-spacing:0; }

/* Beschriftete Angaben in einer Karte: Bezeichnung klein darueber,
   Wert darunter. Statt einer Tabelle, die bei zwei Spalten uebertrieben waere. */
.angaben{ margin:0; font-size:13px; }
.angaben dt{
  font-family:var(--ui); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted);
  margin-top:12px;
}
.angaben dt:first-of-type{ margin-top:0; }
.angaben dd{ margin:2px 0 0; color:var(--text-light-grey); }

/* ---------- Autocomplete ---------- */

.auto{ position:relative; }
.auto-liste{
  position:absolute; z-index:30; left:0; right:0; margin:2px 0 0;
  background:var(--bg-darker); border:1px solid var(--red);
  box-shadow:var(--schatten);
  max-height:280px; overflow-y:auto; padding:2px;
}
.auto-liste[hidden]{ display:none; }
.auto-liste li{
  list-style:none; padding:7px 10px; cursor:pointer;
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font-size:14px;
}
.auto-liste li:hover, .auto-liste li[aria-selected="true"]{ background:var(--red-bg); }
.auto-liste li .meta{ font-family:var(--ui); font-size:11px; color:var(--text-muted); white-space:nowrap; }
.auto-liste li.neu{ color:var(--red-text); }

/* ---------- Anrufmaske ---------- */

/* Schmal einspaltig in der Reihenfolge des Markups: Anrufer, Anliegen,
   Ursachen-Kasten, Ausgang. Breit wandert der Kasten in die zweite Spalte,
   ohne dass sich die Reihenfolge im Markup aendern muesste. */
.maske{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; }

@media (min-width:1061px){
  .maske{ grid-template-columns:1fr 350px; }
  .maske .bereich-anrufer  { grid-column:1; grid-row:1; }
  .maske .bereich-anliegen { grid-column:1; grid-row:2; }
  .maske .bereich-ausgang  { grid-column:1; grid-row:3; }
  .maske .bereich-knoepfe  { grid-column:1; grid-row:4; }
  .maske .bereich-diagnose { grid-column:2; grid-row:1; }
  .maske .bereich-hilfe    { grid-column:2; grid-row:2; }
  /* Solange noch kein Produkt und Problem gewaehlt sind, ist der
     Ursachen-Kasten leer und ausgeblendet -- dann soll die Hinweiskarte
     nach oben ruecken statt eine Luecke stehen zu lassen. */
  .maske .bereich-diagnose[hidden] ~ .bereich-hilfe { grid-row:1; }
}

.timer{
  font-family:var(--ui); font-weight:600; font-size:15px;
  font-variant-numeric:tabular-nums; letter-spacing:0.04em;
  padding:6px 12px;
  background:var(--bg-darkest); border:1px solid var(--border);
  color:var(--text-strong);
}

.anrufer-treffer{ margin:8px 0 0; padding:0; }
.anrufer-treffer li{
  list-style:none; padding:8px 10px; cursor:pointer;
  border:1px solid transparent; border-left-width:3px;
}
.anrufer-treffer li:hover{ background:var(--red-bg); border-left-color:var(--red); }

.gewaehlt{
  background:var(--red-bg); border:1px solid var(--border); border-left:3px solid var(--red);
  padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
/* display:flex oben wuerde das hidden-Attribut sonst ueberstimmen. */
.gewaehlt[hidden]{ display:none; }
.gewaehlt .name{ font-family:var(--ui); font-size:16px; }

/* Der Ursachen-Kasten: die eigentliche Hilfe waehrend des Gespraechs.
   Traegt deshalb den roten Akzentbalken wie die Highlight-Karte der CI. */
.diagnose{ border-left:3px solid var(--red); }
.diagnose ol{ margin:0; padding:0; }
.diagnose li{
  list-style:none; display:flex; justify-content:space-between; gap:10px;
  padding:6px 0; border-bottom:1px solid var(--border); align-items:baseline;
}
.diagnose li:last-child{ border-bottom:0; }
.diagnose .nimm{
  cursor:pointer; text-align:left; background:none; border:0; padding:0;
  font-family:var(--text); font-size:14px; font-weight:400;
  text-transform:none; letter-spacing:0;
  color:var(--red-text);
}
.diagnose .nimm:hover{ background:none; text-decoration:underline; color:var(--red-text); }
.diagnose .anzahl{ font-family:var(--ui); font-variant-numeric:tabular-nums; color:var(--text-muted); font-size:13px; white-space:nowrap; }

.abschluss[hidden]{ display:none; }

/* ---------- Verlauf ---------- */

.verlauf{ margin:0; padding:0; }
.verlauf li{ list-style:none; padding:10px 0 10px 18px; border-left:2px solid var(--border); position:relative; }
.verlauf li::before{
  content:''; position:absolute; left:-5px; top:16px;
  width:8px; height:8px; border-radius:50%; background:var(--border);
}
.verlauf li.anruf::before{ background:var(--red); }
.verlauf .wann{ font-family:var(--ui); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.verlauf p{ margin:5px 0 0; white-space:pre-wrap; color:var(--text-light-grey); }

/* ---------- Heatmap ---------- */

.heat td{ text-align:center; font-variant-numeric:tabular-nums; padding:5px 7px; color:var(--text-light-grey); }
.heat td.h0{ color:var(--text-muted); }
.heat td.h1{ background:rgba(227,10,24,0.12); }
.heat td.h2{ background:rgba(227,10,24,0.28); }
.heat td.h3{ background:rgba(227,10,24,0.46); color:#fff; }
.heat td.h4{ background:rgba(227,10,24,0.68); color:#fff; }
.heat td.h5{ background:var(--red); color:var(--on-red); }

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

.anmeldung-toggle{ position:fixed; top:16px; right:16px; }
.anmeldung{ max-width:360px; margin:12vh auto; padding:0 20px; }
.anmeldung h1{ margin-bottom:6px; }
.anmeldung h1::after{ content:''; display:block; width:64px; height:3px; background:var(--red); margin:10px 0 22px; }

/* ---------- Hilfsklassen ----------
 *
 * Die Content-Security-Policy erlaubt kein style-Attribut (style-src 'self'),
 * weil dieselbe Lockerung, die inline-Styles zulaesst, auch die haeufigste
 * Einfallstuer fuer eingeschleustes CSS ist. Was sonst ein kurzes style=""
 * waere, steht deshalb hier.
 */

.auto-breit{ width:auto; }
.wahl{ display:flex; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-size:13px; color:var(--text-light-grey); }
.reihe.eng{ gap:6px; }
.reihe.weit{ gap:28px; }
.fliess{ white-space:pre-wrap; margin:0; color:var(--text-light-grey); }
.fliess.nach{ margin-top:12px; }
.fliess.eng{ margin-top:2px; }
.breit-m{ max-width:340px; }
.mitte{ align-self:center; }
.erbt{ color:inherit; }
.stark{ font-family:var(--ui); font-weight:600; }

.mt-0{ margin-top:0; }
.mt-s{ margin-top:8px; }
.mt-m{ margin-top:12px; }
.mb-s{ margin-bottom:4px; }
.mb-m{ margin-bottom:14px; }

/* Wer im Betriebssystem Animationen abbestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* ===========================================================================
   Schmale Schirme
   ===========================================================================
   Drei Stufen, jede loest ein konkretes Problem:

   1060px  Die Anrufmaske verliert ihre zweite Spalte. Der Ursachen-Kasten
           rutscht dabei direkt hinter "Anliegen" statt ans Seitenende --
           sonst steht die Diagnosehilfe unter dem Abschluss, also genau
           dort, wo sie nicht mehr hilft.
    900px  Zweispaltige Seiten werden einspaltig, und Tabellen hoeren auf,
           Tabellen zu sein: die Vorgangsliste braucht mit ihren sieben
           Spalten rund 900px. Jede Zeile wird zu einem kleinen Block, die
           Spaltenueberschrift steht per data-label davor.
   1000px  Die Navigation klappt hinter einen Knopf. Frueher als der Rest,
           weil sie mit Katalog, Benutzer und Wartung rund 940px braucht --
           darunter schiebt sie die Abmeldung aus dem Bild.
    760px  Ueberschriften, Formularfelder und Knoepfe gehen in die Breite.
   =========================================================================== */

@media (max-width:900px){
  .spalten{ grid-template-columns:1fr; }
  main{ padding:20px 16px 56px; }
  .kacheln{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }

  /* ---- Tabellen werden zu Bloecken ---- */
  .tabelle-stapel thead{ display:none; }
  .tabelle-stapel, .tabelle-stapel tbody, .tabelle-stapel tr, .tabelle-stapel td{ display:block; width:100%; }
  .tabelle-stapel tr{ padding:10px 0; border-bottom:1px solid var(--border); }
  .tabelle-stapel tr:last-child{ border-bottom:0; }
  .tabelle-stapel tr:hover{ background:transparent; }
  /* Die Beschriftung steht absolut in einer eigenen Spalte, der Inhalt
     bleibt ein gewoehnlicher Block. Mit display:flex waeren Name und
     E-Mail einer Zelle zwei Flex-Elemente nebeneinander geworden und das
     <br> dazwischen wirkungslos. */
  .tabelle-stapel td{
    display:block; border:0;
    position:relative;
    padding:4px 14px 4px 132px;
    min-height:1.6em;
  }
  .tabelle-stapel td::before{
    content:attr(data-label);
    position:absolute; left:14px; top:6px; width:110px;
    font-family:var(--ui); font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted);
  }
  /* Zellen ohne Beschriftung (Aktionsknoepfe) brauchen die Spalte nicht. */
  .tabelle-stapel td:not([data-label]){ padding-left:14px; padding-top:8px; }
  .tabelle-stapel td:not([data-label])::before{ display:none; }
  .tabelle-stapel td.zahl{ text-align:left; }
  .tabelle-stapel td:empty{ display:none; }
  /* Gestapelt kostet jede Zeile eine Zeile Hoehe. Was leer ist, faellt
     deshalb ganz weg -- ein "MOBIL  --" hilft am Telefon niemandem. */
  .tabelle-stapel td.leer-zelle{ display:none; }
}

@media (max-width:1023px){
  /* ---- Navigation als Schublade unter der Kopfzeile ---- */
  .kopf{ flex-wrap:wrap; }
  button.menu-knopf{
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; padding:0;
    background:transparent; border:1px solid var(--border); color:var(--text-light-grey);
  }
  button.menu-knopf:hover{ background:transparent; border-color:var(--red); color:var(--red-text); }
  button.menu-knopf svg{ width:18px; height:18px; }

  .marke{ flex:1; }
  .abmelden{ gap:8px; }

  /* Die Seitenleiste wird zur Schublade: gleiche Eintraege, andere Lage.
     Ueber die Kopfzeile geschoben statt darunter im Fluss, damit sich der
     Inhalt beim Auf- und Zuklappen nicht verschiebt. */
  .seitenleiste{
    display:none;
    position:fixed; top:52px; left:0; right:0; z-index:49;
    max-height:calc(100dvh - 52px); overflow-y:auto;
    border-right:0; border-bottom:1px solid var(--border);
    box-shadow:var(--schatten);
    padding:12px;
  }
  .kopf.offen + .schale .seitenleiste{ display:flex; }
  .seitenleiste a{ padding:11px 12px; font-size:14px; }
  .seitenleiste a.klein{ font-size:13px; }
  .seitenleiste a.ruf{ text-align:center; margin:4px 0; }
  .nav-gruppe{ margin-bottom:14px; }
}

@media (max-width:760px){
  /* ---- Ueberschriften und Formulare ---- */
  .kopfzeile{ flex-direction:column; align-items:stretch; gap:10px; }
  .kopfzeile .untertitel{ font-size:13px; }
  h1{ font-size:21px; }

  .feld, .feld.schmal{ flex:1 1 100%; }
  .karte{ padding:14px 16px; }
  .reihe.weit{ gap:14px; }

  /* Die Heatmap bleibt eine Matrix -- gestapelt waere sie sinnlos. */
  .heat td, .heat th{ padding:4px 5px; font-size:12px; }

  /* ---- Feste Leiste unten ----
     Die drei Wege des Tagesgeschaefts in Daumenreichweite. Alles Uebrige
     bleibt hinter dem Knopf oben; eine Leiste, die alles enthaelt, waere
     keine Abkuerzung mehr. */
  .unten{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:48;
    background:var(--bg-darker);
    border-top:1px solid var(--border);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .unten a{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:9px 4px;
    font-family:var(--ui); font-size:11px; font-weight:600;
    letter-spacing:0.04em;
    color:var(--text-muted);
    border-top:2px solid transparent;
  }
  .unten a:hover{ text-decoration:none; }
  .unten a svg{ width:21px; height:21px; }
  .unten a.aktiv{ color:var(--red-text); border-top-color:var(--red); }

  /* Platz fuer die Leiste, sonst verdeckt sie das Seitenende. */
  main{ padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width:430px){
  main{ padding:16px 12px 48px; }
  .karte{ padding:12px 14px; }
  .kacheln{ grid-template-columns:1fr 1fr; }
  .kachel .wert{ font-size:22px; }
  /* Knoepfe in voller Breite: mit dem Daumen ist das der Unterschied
     zwischen treffen und danebentippen. */
  .kopfzeile .knopf, .kopfzeile button{ width:100%; text-align:center; }
  .tabelle-stapel td{ padding-left:112px; }
  .tabelle-stapel td::before{ width:92px; }
}

/* Auf Fingerbedienung: iOS zoomt beim Fokus in jedes Feld unter 16px hinein
   und laesst die Seite verschoben zurueck. Ausserdem brauchen Ziele Flaeche. */
@media (pointer: coarse){
  input[type=text], input[type=email], input[type=password], input[type=tel],
  input[type=date], input[type=datetime-local], input[type=search],
  input[type=number], select, textarea{ font-size:16px; padding:10px 12px; }
  button, .knopf{ min-height:40px; }
  button.winzig, .knopf.winzig{ min-height:32px; padding:6px 12px; }
  .auto-liste li{ padding:11px 12px; }
  .anrufer-treffer li{ padding:11px 12px; }
  .diagnose li{ padding:9px 0; }
}