/* Garage Mischel Sprach-App. Werte aus dem Angebots-Mockup (angebot/mockup.html), Kontraste nach WCAG 2.2 AA:
   --orange nur als Schmuck (Welle), --orange-d für Rahmen und Ringe (mind. 3:1),
   --orange-knopf für Flächen mit weißer Schrift (4,6:1), --orange-text für Links und Hinweise (5:1). */
@font-face { font-family: 'Outfit'; src: url('/fonts/outfit.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }

:root {
  --orange: #F37A1F; --orange-d: #D9640C; --orange-knopf: #BF550A; --orange-knopf-aktiv: #A84A08; --orange-text: #A84A08;
  --tinte: #212121; --grau: #6B6B66; --creme: #F2F0E7; --linie: #E4E1D6; --gruen: #336739; --gruen-hell: #E3EFE4;
  --rot: #B3261E; --weiss: #fff; --fokus: #1F4F8F;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Outfit, system-ui, sans-serif; background: var(--creme); color: var(--tinte); min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--orange-text); font-weight: 600; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; max-width: 560px; margin: 0 auto; min-height: 62px; }
.logo { height: 20px; width: auto; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--tinte); color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.avatar:hover { background: #000; }
.kopf-link { font-size: 15px; font-weight: 600; color: var(--grau); min-height: 44px; padding: 0 4px; }
.kopf-link:hover { color: var(--tinte); }

main { max-width: 560px; margin: 0 auto; }
.schirm { padding: 0 24px 32px; display: flex; flex-direction: column; min-height: calc(100dvh - 62px); }
h1 { font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px; margin-bottom: 16px; text-wrap: balance; }
.gruss { font-size: 15px; color: var(--grau); margin: 8px 0 2px; }
.vorspann { font-size: 16px; font-weight: 600; color: var(--orange-text); margin-bottom: 8px; }
.text-grau, .hinweis { font-size: 15px; color: var(--grau); line-height: 1.45; text-wrap: pretty; }
.meldung { font-size: 15px; color: var(--gruen); font-weight: 600; margin-top: 12px; }
.meldung:empty, .fehler:empty { display: none; }
.fehler { color: var(--rot); font-size: 15px; font-weight: 600; margin: 8px 0; }
.klein { font-size: 14px; margin-top: 16px; text-align: center; }

/* Anmelden und Formulare */
.formular { display: flex; flex-direction: column; gap: 8px; }
.formular label, .lab { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--grau); margin-top: 8px; }
input, select, textarea { background: var(--weiss); border: 2px solid #8A8780; border-radius: 14px; padding: 12px 16px; font-size: 16px; min-height: 48px; width: 100%; }
input:hover, select:hover, textarea:hover { border-color: var(--tinte); }
input:focus, select:focus, textarea:focus { border-color: var(--fokus); outline: none; box-shadow: 0 0 0 2px var(--fokus); }
textarea { resize: vertical; line-height: 1.45; min-height: 110px; }

/* Knöpfe */
.cta { margin-top: 24px; background: var(--orange-knopf); color: #fff; border-radius: 18px; padding: 16px; min-height: 56px; text-align: center; font-size: 19px; font-weight: 700; width: 100%; }
.cta:hover { background: var(--orange-knopf-aktiv); }
.cta:active { background: #8F3F07; }
.cta:disabled { background: #8A8780; cursor: default; }
.zweit { background: var(--weiss); border: 2px solid var(--tinte); border-radius: 16px; padding: 12px; min-height: 50px; font-size: 16px; font-weight: 700; width: 100%; margin-top: 12px; }
.zweit:hover { background: var(--linie); }
.leise { color: var(--grau); font-size: 15px; font-weight: 600; text-decoration: underline; min-height: 44px; margin: 8px auto 0; }
.leise:hover { color: var(--tinte); }
.zurueck { align-self: flex-start; font-size: 15px; color: var(--orange-text); font-weight: 600; min-height: 44px; padding-right: 8px; }
.zurueck:hover { color: var(--tinte); }
.unter { font-size: 14px; color: var(--grau); text-align: center; margin-top: 8px; }

/* Start */
.knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.knopf { background: var(--weiss); border-radius: 22px; padding: 16px 16px 16px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; box-shadow: 0 1px 0 var(--linie); border: 2px solid transparent; }
.knopf:hover { border-color: var(--linie); }
.knopf:active { border-color: var(--tinte); }
.knopf.haupt { background: var(--orange-knopf); color: #fff; }
.knopf.haupt:hover { background: var(--orange-knopf-aktiv); border-color: transparent; }
.knopf.breit { grid-column: span 2; min-height: 118px; flex-direction: row-reverse; align-items: flex-end; }
.knopf.breit .ic { align-self: flex-start; }
.knopf .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--creme); display: flex; align-items: center; justify-content: center; flex: none; }
.knopf.haupt .ic { background: rgba(255, 255, 255, .2); }
.knopf b { font-size: 19px; font-weight: 700; display: block; }
.knopf small { font-size: 14px; color: var(--grau); line-height: 1.3; display: block; margin-top: 2px; }
.knopf.haupt small { color: #fff; }
.zwt { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--grau); margin: 24px 0 8px; }
.liste { background: var(--weiss); border-radius: 20px; overflow: hidden; }
.liste:empty::before { content: "Noch nichts festgehalten."; display: block; padding: 16px 16px; color: var(--grau); font-size: 15px; }
.zeile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linie); width: 100%; text-align: left; min-height: 60px; }
.zeile:last-child { border-bottom: 0; }
button.zeile:hover { background: var(--creme); }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: #8A8780; flex: none; }
.gesendet .punkt { background: var(--gruen); }
.wartet-auf-dich .punkt { background: var(--orange-d); }
.mit-fehler .punkt { background: var(--rot); }
.zeile b { font-size: 15px; font-weight: 600; display: block; }
.zeile .sub { font-size: 13px; color: var(--grau); }
.zeile .zeit { margin-left: auto; font-size: 13px; color: var(--grau); white-space: nowrap; text-align: right; }
.wartet-auf-dich .zeit { color: var(--orange-text); font-weight: 600; }

/* Aufnahme */
.aufn { align-items: center; text-align: center; }
.chip { display: inline-flex; gap: 8px; align-items: center; background: var(--weiss); border-radius: 30px; padding: 8px 16px; font-size: 15px; font-weight: 600; margin-top: 8px; min-height: 40px; }
.chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange-d); display: inline-block; }
.chip.sprache { border: 2px solid var(--linie); min-height: 44px; }
.chip.sprache:hover { border-color: var(--tinte); }
.uhr { font-size: 58px; font-weight: 300; letter-spacing: 1px; margin-top: 32px; font-variant-numeric: tabular-nums; }
.welle { display: flex; align-items: center; justify-content: center; gap: 4px; height: 90px; margin: 24px 0 8px; }
.welle span { width: 5px; border-radius: 3px; background: var(--orange); height: 6px; transition: height .08s linear; }
.hinweis { max-width: 290px; text-wrap: balance; }
.rec { margin-top: auto; width: 92px; height: 92px; border-radius: 50%; border: 5px solid var(--orange-d); display: flex; align-items: center; justify-content: center; }
.rec i { width: 34px; height: 34px; border-radius: 8px; background: var(--orange-knopf); display: block; }
.rec:hover { border-color: var(--orange-knopf-aktiv); }
.rec:active i { background: var(--orange-knopf-aktiv); }
.offline { font-size: 13px; color: var(--grau); margin: 16px 0 8px; display: flex; gap: 8px; align-items: center; }

/* Wird verarbeitet */
.mitte { justify-content: center; text-align: center; align-items: center; }
.haken { width: 76px; height: 76px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }

/* Ergebnis */
.karte { background: var(--weiss); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.karte .lab { display: block; margin: 0 0 8px; }
.kunde { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kunde b { font-size: 18px; font-weight: 700; display: block; line-height: 1.2; }
.kunde span { font-size: 14px; color: var(--grau); line-height: 1.35; display: block; }
.ok { background: var(--gruen-hell); color: var(--gruen); font-size: 13px; font-weight: 700; border-radius: 20px; padding: 4px 8px; white-space: nowrap; }
.ok.pruefen { background: #FBE9DC; color: var(--orange-text); }
.anders { font-size: 14px; color: var(--orange-text); font-weight: 600; margin-top: 8px; min-height: 44px; text-align: left; }
.anders:hover { color: var(--tinte); }
.karte textarea { padding: 8px 12px; min-height: 96px; font-size: 16px; color: #2d2d2d; border-radius: 12px; }

.felder { display: flex; gap: 8px; }
.felder .karte { flex: 1; min-width: 0; }
.felder b { font-size: 16px; font-weight: 700; }
.karte input[type=date] { padding: 4px 8px; min-height: 44px; font-weight: 700; font-size: 16px; }
.orig { display: flex; align-items: center; gap: 12px; padding: 12px 16px; width: 100%; text-align: left; }
.orig .play { width: 44px; height: 44px; border-radius: 50%; background: var(--tinte); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.orig b { font-size: 15px; font-weight: 600; display: block; }
.orig span { font-size: 13px; color: var(--grau); }
.pos { display: grid; grid-template-columns: 1fr 84px 44px; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.pos:last-of-type { border-bottom: 0; }
.pos input { min-height: 44px; padding: 8px 8px; }
.pos .weg { width: 44px; height: 44px; border-radius: 12px; color: var(--grau); font-size: 22px; }
.pos .weg:hover { background: var(--creme); color: var(--tinte); }
.plus { color: var(--orange-text); font-weight: 600; font-size: 15px; min-height: 44px; margin-top: 4px; }
.plus:hover { color: var(--tinte); }
.wahlreihe { display: flex; gap: 8px; flex-wrap: wrap; border: 0; }
.pill { position: relative; background: var(--weiss); border-radius: 30px; padding: 8px 16px; min-height: 44px; font-size: 15px; font-weight: 600; border: 2px solid var(--linie); display: inline-flex; align-items: center; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill:hover { border-color: var(--tinte); }
.pill:has(input:checked) { background: var(--orange-knopf); border-color: var(--orange-knopf); color: #fff; }
.pill:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Kunde wählen */
.wahlen { border: 0; }
.wahl { background: var(--weiss); border-radius: 18px; padding: 16px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 2px solid transparent; cursor: pointer; min-height: 64px; }
.wahl:hover { border-color: var(--linie); }
.wahl:has(input:checked) { border-color: var(--orange-d); }
.wahl b { font-size: 16px; font-weight: 700; display: block; }
.wahl span span { font-size: 13px; color: var(--grau); display: block; line-height: 1.35; }
.radio { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; min-height: 24px; padding: 0; border-radius: 50%; border: 2px solid var(--grau); flex: none; background: var(--weiss); cursor: pointer; }
.radio:checked { border: 7px solid var(--orange-d); }
.radio:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.suche { display: flex; gap: 8px; align-items: center; margin: 4px 0 16px; color: var(--grau); }
#neu-feld { margin-bottom: 8px; }
#neu-feld .lab { display: block; margin-bottom: 8px; }

/* Textseiten */
.seite-text .text { padding: 24px; max-width: 640px; margin: 0 auto; line-height: 1.55; }
.seite-text h2 { font-size: 19px; margin: 24px 0 8px; }
.seite-text ul { padding-left: 20px; }
.seite-text li { margin-bottom: 8px; }

@media (min-width: 700px) {
  .schirm { min-height: auto; padding-bottom: 60px; }
}
@media (prefers-reduced-motion: reduce) { .welle span { transition: none; } }
.karte b.block { display: block; font-size: 16px; }
h1[tabindex="-1"]:focus { outline: none; }
.kunde b, .kunde span, .zeile b, .wahl b, .wahl span span, .formular label, .lab, .text-grau { text-wrap: balance; }

/* Verwaltung (Rechner) */
.top.breit, .verwaltung { max-width: 1100px; }
.verwaltung { margin: 0 auto; padding: 0 24px 48px; }
.verwaltung h2 { font-size: 20px; margin-bottom: 12px; }
.verwaltung h3 { font-size: 17px; margin: 24px 0 4px; }
.verwaltung .karte p { margin-bottom: 4px; }
.tabelle-rahmen { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--grau); }
.klein-knopf { border: 2px solid var(--tinte); border-radius: 12px; padding: 4px 12px; min-height: 44px; font-weight: 600; margin: 4px 8px 4px 0; }
.klein-knopf:hover { background: var(--linie); }
.raster { max-width: 520px; }
code { font-size: 18px; font-weight: 700; background: var(--creme); padding: 4px 8px; border-radius: 8px; user-select: all; }
details.post { border-top: 1px solid var(--linie); padding: 12px 0; }
details.post summary { cursor: pointer; min-height: 44px; }
details.post pre { white-space: pre-wrap; font-family: inherit; font-size: 15px; background: var(--creme); padding: 12px; border-radius: 12px; margin-top: 8px; }