/* Grundgestaltung der Basis. Farben und Schriften einer Instanz stehen in
   deren branding.css und uebersteuern die Variablen in :root.
   Die Basis traegt die CI des Anbieters (verbindliche Quelle im Vault unter
   unternehmen/vermarktung/ci-farben.md). Bis zum 03.08.2026 stand hier die
   Gestaltung der ersten Instanz, weil es keine zweite gab; sie liegt jetzt in
   deren eigener branding.css und ist unveraendert geblieben.
   Schriften bewusst systemseitig: Google Fonts wuerde bei jedem Aufruf die
   IP-Adresse an Google uebertragen, was bei einer App mit Kundendaten nicht
   vertretbar ist. Echte Schriftdateien koennen spaeter lokal eingebunden
   werden. */

:root {
  /* CI des Anbieters, verbindliche Quelle im Vault:
     unternehmen/vermarktung/ci-farben.md (Stand 13.07.2026).
     Dunkler Grund, weil der Kanal meist abends am Telefon geoeffnet wird und
     die Aufnahmetaste die einzige Flaeche sein soll, die leuchtet.
     Eine Instanz uebersteuert diese Variablen in ihrer branding.css. */
  --bg: #1a1a1a;                 /* Anthrazit */
  --surface: #232323;            /* Anthrazit 2 */
  --surface-2: #2c2a29;
  --line: #3a3330;
  --accent: #d4634a;             /* Rust Bright, laut CI fuer Akzent auf Dunkel */
  --text: #ece4df;               /* Text Light */
  --muted: #9c8e88;
  --action: #a4452c;             /* Rust Deep. Nicht Rust #c25538: dort kaeme
                                    die Schrift auf der Aufnahmetaste nur auf
                                    4,21:1, noetig sind 4,5. So sind es 5,65. */
  --action-dim: #8a3924;
  --ok: #6d9a5f;

  /* Bis zum 03.08.2026 standen diese Farben fest quer durch die Datei. Der
     Kommentar oben versprach, eine Instanz uebersteuere nur die Variablen in
     :root, aber genau das ging nicht: Ein heller Entwurf waere an diesen
     Stellen zerbrochen, weil dort Schwarz auf Schwarz und Weiss auf Weiss
     gestanden haette. */
  --text-soft: #cfc3bd;          /* Einleitung unter der Ueberschrift */
  --text-dim: #ded4cf;           /* Transkript im Verlauf */
  --on-action: #fbf6f3;          /* Warm White, Schrift auf der Aktionsfarbe */
  --on-accent: #1a1a1a;          /* Schrift auf der Akzentfarbe */
  --error-bg: #2a1512;
  --error-text: #f0c8bf;
  --low-conf-bg: rgba(212, 99, 74, 0.20);
  --pulse: rgba(194, 85, 56, 0.35);

  --radius: 3px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* Muss vor allen Layout-Regeln stehen und sich durchsetzen: eine eigene
   display-Angabe (etwa display:flex) schlaegt sonst das hidden-Attribut,
   und ausgeblendete Bereiche bleiben sichtbar. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body {
  padding: 0 1rem env(safe-area-inset-bottom) 1rem;
  max-width: 720px;
  margin: 0 auto;
}

h1, h2 { font-weight: 400; margin: 0; }

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

.top { text-align: center; padding: 2rem 0 1.5rem; }

.wordmark {
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.claim {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.intro {
  margin: 1.2rem auto 0;
  max-width: 30rem;
  font-size: 0.92rem;
  color: var(--text-soft);
  line-height: 1.6;
}

/* Absenderzeile ueber einem Eintrag: bei Antworten der Name des
   Ansprechpartners, bei eingehenden Nachrichten der Zugang, von dem sie kam.
   Stand frueher als fester Name hier in der CSS-Datei, also an der
   Stelle, an der niemand nach einem Kundennamen sucht. */
.h-item .h-von {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

/* --- Sperrbildschirm ---------------------------------------------------- */

.gate {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
}
.gate-text { color: var(--text); margin: 1rem 0 0; }
.gate-hint { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* --- Aufnahme ----------------------------------------------------------- */

.recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 2rem;
}

.rec {
  width: 100%;
  max-width: 340px;
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  background: var(--action);
  color: var(--on-action);
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  /* Auf Beruehrung sofort sichtbar reagieren. */
  transition: transform 0.08s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rec:active { transform: scale(0.985); background: var(--action-dim); }
.rec[disabled] { opacity: 0.5; cursor: default; }

.rec-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--on-action);
  flex: none;
}
.rec.is-recording .rec-dot { animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
  .rec.is-recording .rec-dot { animation: none; }
  * { transition: none !important; }
}

/* Laufende Aufnahme: Zeit und Pegel, damit sichtbar ist, dass die Stimme
   ankommt. Ohne das spricht man unsicher oder bricht ab. */
.rec-live {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.meter {
  width: 100%;
  height: 5px;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.08s linear;
}

.timer {
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  color: var(--accent);
}
.timer.near-limit { color: var(--action); }

.btn-stop {
  width: 100%;
  padding: 0.85rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--sans);
  cursor: pointer;
}
.btn-plain {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem;
}

/* --- Alternativen ------------------------------------------------------- */

.alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 340px;
}
.alt-item {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.65rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.alt-item:hover, .alt-item:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.hint {
  max-width: 340px;
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding: 0.6rem 0.75rem;
}

/* --- Textformular ------------------------------------------------------- */

.text-form { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 0.6rem; }
.text-form textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  font-family: var(--sans);
  font-size: 1rem;
  resize: vertical;
}
.text-form textarea:focus { outline: none; border-color: var(--accent); }

.btn-send {
  padding: 0.8rem;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --- Upload-Fortschritt ------------------------------------------------- */

.upload {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 30px;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.upload-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  opacity: 0.28;
  transition: width 0.2s ease;
}
.upload-text {
  position: relative;
  display: block;
  text-align: center;
  line-height: 30px;
  font-size: 0.82rem;
  color: var(--text);
}

.error {
  max-width: 340px;
  background: var(--error-bg);
  border-left: 2px solid var(--action);
  padding: 0.75rem;
  font-size: 0.88rem;
  color: var(--error-text);
}
.error a { color: var(--accent); }

/* --- Fragen ------------------------------------------------------------- */

.questions, .history { padding: 1.5rem 0; border-top: 1px solid var(--line); }

.questions h2, .history h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.q-intro, .h-empty { color: var(--muted); font-size: 0.88rem; margin: 0 0 1rem; }

.q-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }

.q-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem;
}
.q-text { margin: 0 0 0.75rem; }
.q-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.q-actions button {
  flex: 1 1 auto;
  padding: 0.55rem 0.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.82rem;
  cursor: pointer;
}
/* Beige statt Rot: Rot bleibt allein dem Aufnahmeknopf vorbehalten, sonst
   verliert die wichtigste Aktion der Seite ihre Wirkung. */
.q-actions .primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.q-done { color: var(--ok); font-size: 0.9rem; }

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

.h-list { display: flex; flex-direction: column; gap: 0.75rem; }

.h-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 0.85rem;
  animation: fade-in 0.25s ease;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.h-item.is-answer { border-left-color: var(--accent); background: var(--surface-2); }
.h-item.is-pending { border-left-color: var(--muted); }
.h-item.is-processed { border-left-color: var(--ok); }
.h-item.is-problem { border-left-color: var(--action); }

.h-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.h-body { margin: 0; white-space: pre-wrap; word-break: break-word; }

.h-transcript {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--line);
  font-size: 0.92rem;
  color: var(--text-dim);
}
/* Stellen, bei denen die Erkennung unsicher war. Nur diese werden markiert,
   statt pauschal um Pruefung zu bitten. */
.low-conf {
  background: var(--low-conf-bg);
  border-bottom: 1px dotted var(--accent);
}
.h-actions { margin-top: 0.6rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.h-actions button {
  padding: 0.4rem 0.7rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.78rem;
  cursor: pointer;
}
.h-actions button:hover { color: var(--accent); border-color: var(--accent); }

/* Der Rueckfallweg, auf den die Mikrofon-Fehlermeldung zeigt. Die Klasse
   wurde vom Skript gesetzt, war aber nie definiert: der Knopf blieb ein
   grauer Kasten zwischen zwei gleich aussehenden Kaesten. */
.alt-highlight {
  border-color: var(--action) !important;
  color: var(--text) !important;
  animation: puls 1.4s ease-in-out 3;
}
@keyframes puls {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 4px var(--pulse); }
}
@media (prefers-reduced-motion: reduce) {
  .alt-highlight { animation: none; }
}

/* Wiederholknopf in der Fehlerbox: die Aufnahme ist noch da. */
.btn-retry {
  margin-left: 0.5rem;
  padding: 0.5rem 0.9rem;
  min-height: 44px;
  background: var(--action);
  border: none;
  border-radius: var(--radius);
  color: var(--on-action);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Trefferflaechen auf das Mindestmass. Der Abbrechen-Knopf sass mit 23 Pixeln
   direkt unter dem 44 Pixel hohen Bestaetigen-Knopf: der gefaehrlichere war
   der kleinere. */
.btn-plain, .h-actions button, .btn-ack, .alt-item, .q-actions button {
  min-height: 44px;
}
.h-actions button, .btn-ack, .q-actions button { padding-inline: 0.9rem; }

/* Im Standalone-Modus reicht der Inhalt bis unter die Statusleiste. Ohne
   diesen Abstand sitzt der Schriftzug hinter der Uhr. */
.top { padding-top: calc(2rem + env(safe-area-inset-top)); }
body {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* Lange Adressen und Namen im Transkript sprengen sonst die Karte. */
.h-transcript, .h-done-note, .q-text { word-break: break-word; }

/* iOS zoomt bei Feldern unter 16 Pixeln hinein und nicht wieder heraus.
   Ausgerechnet die Korrekturfunktion verstellte damit die Ansicht. */
.edit-area { font-size: 1rem; }

/* Erledigt: der Haken traegt die Botschaft, der Rest bleibt ruhig. */
.h-item.is-resolved { border-left: 2px solid var(--ok); }

.h-done {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.h-done-note {
  flex: 1 1 12rem;
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.45;
}
.h-done-note::before {
  content: "✓";
  margin-right: 0.45rem;
  color: var(--ok);
  font-weight: 700;
}
/* Hier stand bis zum 04.08.2026 ein fest in der Kundensprache der ersten
   Instanz geschriebener Sammelbegriff fuer den Fall einer Erledigung ohne
   Notiz. Die Datei ist fuer alle Instanzen dieselbe, der Text erschien damit
   auch in anderssprachigen Kanaelen. Den Sammelbegriff setzt jetzt app.js aus
   den Sprachdateien. In dieser Datei stehen keine sichtbaren Texte, und auch
   in den Kommentaren steht nichts in einer Kundensprache. */

.btn-ack {
  flex: 0 0 auto;
  padding: 0.45rem 0.8rem;
  background: none;
  border: 1px solid var(--ok);
  border-radius: var(--radius);
  color: var(--ok);
  font-family: var(--sans);
  font-size: 0.78rem;
  cursor: pointer;
}
.btn-ack:hover { background: var(--ok); color: var(--bg); }

.btn-older {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem;
  background: none;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.8rem;
  cursor: pointer;
}
.btn-older:hover { color: var(--accent); border-color: var(--accent); }

/* Abgehaktes tritt zurueck, bleibt aber lesbar. */
.h-older { margin-top: 0.8rem; opacity: 0.72; }

.edit-area {
  width: 100%;
  margin-top: 0.5rem;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.6rem;
  font-family: var(--sans);
  font-size: 0.92rem;
}

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

.foot {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}
.foot p { margin: 0.3rem 0; }

/* Der Hinweis, dass Rueckmeldung zur Oberflaeche ueber denselben Kanal geht.
   Absichtlich staerker als der Rest der Fusszeile. */
.foot-feedback {
  color: var(--accent);
  font-size: 0.85rem;
  max-width: 26rem;
  margin: 0 auto 1rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

/* --- Groessere Bildschirme ---------------------------------------------- */

@media (min-width: 640px) {
  body { padding: 0 2rem 2rem; }
  .wordmark { font-size: 2.6rem; }
  .rec { max-width: 420px; min-height: 96px; }
  .rec-live, .alt, .text-form, .upload, .error, .hint { max-width: 420px; }
}

/* Angehaengte Bilder im Verlauf */
.h-image {
  display: block;
  max-width: 100%;
  margin-top: 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}