/* WERT — Design-System aus dem Prototyp „WERT Prototyp.html" (Zwischenstand).
   Farben, Schrift, Rundungen und Abstände sind unverändert übernommen.
   Die Schrift liegt lokal: die Halle hat nicht immer Netz, und eine Anwendung,
   die auf fonts.googleapis.com wartet, ist genau dann langsam, wenn es zählt. */

@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/schrift/hanken-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/schrift/hanken-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0,
                 U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/schrift/hanken-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: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/schrift/hanken-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;
}

:root {
  --tinte:#0F2B2E;        /* Text und dunkle Flächen */
  --mint:#09d2a8;         /* Aktion */
  --mint-2:#1fcdbf;       /* Verlauf */
  --mint-dunkel:#0a9d80;
  --mint-tief:#0a7c66;
  --mint-blass:#E6FAF5;
  --mint-tipp:#EFFBF8;
  --mint-hell:#9FD8CD;
  --grund:#F4F7F7;
  --flaeche:#FFFFFF;
  --linie:#DDE7E6;
  --linie-2:#F0F4F4;
  --gedaempft:#5B6E70;
  --matt:#9FB0B1;
  --matt-2:#B9C4C4;
  --kachel:#E4ECEB;
  --bernstein:#E8A33D;
  --bernstein-text:#B07A20;
  --bernstein-blass:#FBF2E1;
  --grau-chip:#EEF2F2;
  /* Kaatsch-Verlauf, ausgelesen aus der gelieferten Datei Farbverlauf_2.jpg
     (1390 x 319) an den Stellen 0 %, 50 % und 100 %. Nicht geschätzt — die
     zuvor hier stehenden Werte waren nach Augenmaß abgenommen und lagen am
     grünen Ende um mehrere Stufen daneben.
     Diese drei Zeilen sind die einzige Stelle, an der die Verlaufsfarben für
     die Oberfläche stehen. Die beiden SVG-Dateien (icon.svg) tragen sie ein
     zweites Mal, weil eine SVG-Datei keine CSS-Variable lesen kann. */
  --kaatsch-blau:#09B0DD;
  --kaatsch-tuerkis:#07D0C8;
  --kaatsch-gruen:#03F3B6;
  --verlauf:linear-gradient(90deg, var(--kaatsch-blau) 0%,
                            var(--kaatsch-tuerkis) 50%, var(--kaatsch-gruen) 100%);
  --schatten:0 2px 8px rgba(15,43,46,.06);
  --schatten-tief:0 12px 28px rgba(9,210,168,.35);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; }
body {
  font-family:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background:var(--grund); color:var(--tinte); font-size:17px;
  padding-bottom:env(safe-area-inset-bottom);
}
button, input, select, textarea { font-family:inherit; }
button { cursor:pointer; }

/* Konfetti beim Abschliessen eines Auftrags — siehe konfetti() in app.js.
   Nur eine Bewegung, keine Aenderung am Design-System. */
@keyframes wertKonfetti {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(104vh) rotate(720deg); }
}

@keyframes pulseCard { 0%,100%{box-shadow:0 0 0 0 rgba(9,210,168,.28)} 50%{box-shadow:0 0 0 14px rgba(9,210,168,0)} }
@keyframes scanline  { 0%{top:8%} 50%{top:88%} 100%{top:8%} }
@keyframes popIn     { 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1);opacity:1} }
@keyframes fadeUp    { 0%{transform:translateY(14px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes sheetUp   { 0%{transform:translateY(100%)} 100%{transform:translateY(0)} }

/* ── Gerüst ───────────────────────────────────────────── */

/* ── Kaatsch-Verlauf als Kante ──────────────────────────
   Ein Band von 3 Pixeln über dem Kopf jeder Ansicht. Genug, um die Anwendung
   als Kaatsch zu erkennen; wenig genug, um dem Inhalt nicht im Weg zu stehen. */
.verlaufskante { height:3px; background:var(--verlauf); flex:none; }

.kopfleiste {
  background:var(--flaeche); border-bottom:1px solid var(--linie); padding:10px 20px;
  display:flex; align-items:center; gap:20px; position:sticky; top:0; z-index:200;
}
.kopfleiste .marke { font-size:14px; font-weight:700; letter-spacing:.14em; color:var(--tinte); }
.kopfleiste .marke span { font-weight:500; letter-spacing:0; color:var(--gedaempft); }
.logo { height:26px; width:auto; display:block; }

/* Die Bildmarke als Maske: die Form kommt aus marke.png, die Farbe aus dem
   CSS. Dadurch trägt dieselbe Datei die Marke schwarz auf hellem Grund, weiß
   auf dunklem und bei Bedarf im Kaatsch-Verlauf — statt drei Dateien, die
   auseinanderlaufen können. */
.bildmarke {
  display:inline-block; flex:none; background:currentColor;
  -webkit-mask:url('/marke.png') no-repeat center/contain;
          mask:url('/marke.png') no-repeat center/contain;
}
.bildmarke.imverlauf { background:var(--verlauf); }
/* Die Anmeldung ist für die meisten der erste Eindruck der Anwendung.
   Deshalb steht die Kante dort über dem Logo, nicht am Rand des Fensters. */
.seite > .verlaufskante { border-radius:2px; width:76px; margin-bottom:16px; }
.schalter { display:flex; gap:4px; background:var(--grund); border:1px solid var(--linie);
            border-radius:12px; padding:4px; }
.schalter button { border:none; border-radius:9px; padding:8px 18px; font-size:14px;
                   font-weight:600; background:transparent; color:var(--gedaempft); }
.schalter button.an { background:var(--tinte); color:#fff; }

/* Handy-Ansicht. Auf dem Handy füllt sie den Bildschirm, am Rechner steht sie
   in einem Rahmen — dafür ist sie schließlich gedacht. */
.handy { flex:1; display:flex; justify-content:center; align-items:flex-start; padding:36px 16px 60px; }

/* Der Admin sieht die Handy-Ansicht mit einem Hinweis darueber. Ohne diesen
   Rahmen laege der Hinweis neben dem Geraet statt darauf - .handy ist eine
   Zeile, keine Spalte. */
.vorschau { display:flex; flex-direction:column; align-items:center; max-width:100%; }
.vorschau > .warnkasten { width:402px; max-width:100%; box-sizing:border-box; }
@media (max-width:820px) { .vorschau > .warnkasten { display:none; } }
.handy .geraet {
  width:402px; height:874px; max-width:100%; background:var(--grund); border-radius:52px;
  border:12px solid #10171a; box-shadow:0 24px 60px rgba(15,43,46,.28);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}
@media (max-width:820px) {
  .handy { padding:0; }
  .handy .geraet { width:100%; height:100dvh; border:none; border-radius:0; box-shadow:none; }
  .kopfleiste { display:none; }
}
.blatt-flaeche { flex:1; overflow:auto; -webkit-overflow-scrolling:touch; position:relative; }

/* ── Bausteine ────────────────────────────────────────── */

.seite { flex:1; overflow:auto; padding:34px 20px 110px; animation:fadeUp .22s ease both; }
.seite.eng { padding-top:22px; }

.h1 { font-size:26px; font-weight:800; color:var(--tinte); line-height:1.15; }
.h2 { font-size:23px; font-weight:800; color:var(--tinte); }
.unter { font-size:16px; color:var(--gedaempft); margin-top:4px; }
.rubrik { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
          color:var(--gedaempft); margin:30px 0 10px; }

/* ── Kopfbild der Startseite ────────────────────────────
   Läuft bis an die Ränder des Geräts: .seite hat 34px oben und 20px seitlich
   Polster, die hier wieder herausgerechnet werden. */
.kopfbild {
  position:relative; margin:-34px -20px 0; padding:24px 20px 18px;
  min-height:176px; display:flex; flex-direction:column; justify-content:flex-end;
  /* align-items MUSS gesetzt sein: in einer Flex-Spalte streckt der
     Vorgabewert stretch das Logo auf die volle Breite, und width:auto
     richtet sich dann nicht mehr nach dem Seitenverhaeltnis des Bildes. */
  align-items:flex-start;
  background:var(--tinte) url('/werk.jpg') center/cover no-repeat;
  color:#fff; overflow:hidden;
}
/* Der Schleier macht die Schrift lesbar — unten dunkel, oben durchsichtig.
   Ohne ihn steht der Gruß bei Sonne auf hellem Himmel und ist weg. */
.kopfbild::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,43,46,.62) 0%, rgba(15,43,46,.48) 38%,
                             rgba(15,43,46,.93) 100%);
}
.kopfbild > * { position:relative; }
/* Das Logo liegt schwarz vor; auf dem Bild wird es weiß gefärbt. */
/* Weiss gefaerbt, mit einem weichen Schatten darunter: die Luftaufnahme hat
   helle Stellen, auf denen weisse Schrift ohne Schatten verschwindet. */
.kopfbild .logo { filter:brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,.55)); }
.kopfbild .h1 { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.kopfbild .unter { color:rgba(255,255,255,.88); text-shadow:0 1px 5px rgba(0,0,0,.45); }
.kopfbild .kante { position:absolute; left:0; right:0; bottom:0; height:3px;
                   background:var(--verlauf); }

.riesenknopf {
  all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;
  gap:10px; width:100%; margin-top:26px; background:linear-gradient(135deg,var(--mint),var(--mint-2));
  border-radius:16px; padding:38px 24px; color:#fff; text-align:center;
  box-shadow:var(--schatten-tief);
}
.riesenknopf:active { transform:scale(.985); }
.riesenknopf .gross { font-size:27px; font-weight:800; letter-spacing:.01em; }
.riesenknopf .klein { font-size:15px; opacity:.9; font-weight:500; }

.reihe {
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:14px;
  background:var(--flaeche); border-radius:14px; padding:12px 14px; min-height:56px;
  box-shadow:var(--schatten); width:100%;
}
.reihe:active { background:var(--mint-tipp); }
.reihe .bild { width:52px; height:52px; border-radius:12px; flex:none; background-color:var(--kachel);
               background-size:cover; background-position:center; display:flex;
               align-items:center; justify-content:center; font-size:22px; }
.reihe .text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.reihe .titel { font-size:17px; font-weight:700; color:var(--tinte); }
.reihe .zusatz { font-size:14px; color:var(--gedaempft); }

/* Ein Auftrag, den die Werkstattleitung diesem Mechaniker zugeteilt hat.
   Hebt sich ab, sperrt aber nichts — jeder darf weiterhin auf alles buchen. */
.reihe.meiner { background:var(--mint-tipp); box-shadow:0 2px 10px rgba(9,210,168,.16); }
.reihe .pfeil { flex:none; }
.liste { display:flex; flex-direction:column; gap:10px; }
.liste.eng { gap:8px; }

.plakette { align-self:flex-start; font-size:12.5px; font-weight:700; padding:3px 9px;
            border-radius:20px; }

.zurueck { all:unset; width:44px; height:44px; display:flex; align-items:center;
           justify-content:center; background:var(--flaeche); border-radius:12px;
           box-shadow:0 2px 6px rgba(15,43,46,.08); flex:none; }

.feld { box-sizing:border-box; width:100%; border:1.5px solid var(--linie); background:var(--flaeche);
        border-radius:14px; padding:16px; font-size:17px; color:var(--tinte); outline:none; }
.feld:focus { border-color:var(--mint); }
textarea.feld { min-height:110px; resize:vertical; }

.reiter { display:flex; gap:4px; background:var(--flaeche); border:1.5px solid var(--linie);
          border-radius:12px; padding:4px; }
.reiter button { flex:1; border:none; border-radius:9px; min-height:46px; font-size:15.5px;
                 font-weight:700; background:transparent; color:var(--gedaempft); }
.reiter button.an { background:var(--tinte); color:#fff; }

.werkzeuge { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.werkzeug { all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center;
            justify-content:center; gap:5px; background:var(--flaeche); border:1.5px solid var(--linie);
            border-radius:14px; min-height:74px; font-size:13.5px; font-weight:700; color:var(--tinte); }
.werkzeug:active { background:var(--mint-tipp); }
.werkzeug .zeichen { font-size:22px; }

.zaehlwerk { display:flex; align-items:center; gap:14px; background:var(--flaeche);
             border:1.5px solid var(--linie); border-radius:14px; padding:10px 14px; }
.zaehlwerk button { width:52px; height:52px; border-radius:12px; border:none; flex:none;
                    background:var(--grund); font-size:26px; font-weight:700; color:var(--tinte); }
.zaehlwerk .wert { flex:1; text-align:center; font-size:22px; font-weight:800;
                   font-variant-numeric:tabular-nums; }

.hauptknopf { width:100%; border:none; background:var(--mint); color:#fff; border-radius:14px;
              min-height:60px; font-size:19px; font-weight:800; }
.hauptknopf:active { transform:scale(.985); }
.hauptknopf.dunkel { background:var(--tinte); }
.hauptknopf.still { background:var(--flaeche); color:var(--tinte); border:1.5px solid var(--linie); }
.hauptknopf[disabled] { background:var(--grund); color:var(--matt); }

.fusszeile { position:sticky; bottom:0; background:linear-gradient(180deg,rgba(244,247,247,0),var(--grund) 26%);
             padding:14px 20px calc(18px + env(safe-area-inset-bottom)); }

/* Streifen im Geraet: der Adminzugang sieht jederzeit, dass er in der
   Vorschau ist. Sitzt bewusst innerhalb des Rahmens — auf dem Telefon ist
   ausserhalb nichts zu sehen. */
.vorschaustreifen {
  flex:none; background:var(--bernstein-blass); color:var(--bernstein-text);
  font-size:12.5px; font-weight:700; text-align:center; padding:7px 12px;
  border-bottom:1px solid #F0E2C4; line-height:1.3;
}

/* Rueckweg aus dem Buero. Auf dem Telefon wird die Seitenleiste zur Zeile,
   dort steht der Knopf dann ganz links. */
.zurueckzumhandy {
  border:none; background:rgba(255,255,255,.10); color:#D6E6E4; text-align:left;
  padding:11px 14px; border-radius:10px; font-size:14px; font-weight:700;
  margin-bottom:10px; flex:none; white-space:nowrap;
}
.zurueckzumhandy:hover { background:rgba(255,255,255,.18); }

.navi { display:flex; border-top:1px solid var(--linie); background:var(--flaeche);
        padding-bottom:env(safe-area-inset-bottom); }
.navi button { flex:1; border:none; background:none; padding:10px 4px 12px; display:flex;
               flex-direction:column; align-items:center; gap:3px; font-size:11.5px;
               font-weight:700; color:#7C8F90; }
.navi button.an { color:var(--mint-dunkel); }
.navi .zeichen { font-size:21px; }

/* ── Uhr ──────────────────────────────────────────────── */

.laufkarte { margin-top:26px; background:var(--flaeche); border:1.5px solid var(--mint);
             border-radius:16px; padding:22px 20px; animation:pulseCard 2.6s ease-in-out infinite; }
.punkt { width:9px; height:9px; border-radius:50%; flex:none; background:var(--mint); }
.zustand { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
           color:var(--mint-tief); }
.uhr { font-size:46px; font-weight:800; color:var(--tinte); font-variant-numeric:tabular-nums;
       letter-spacing:.02em; }
.uhr.gross { font-size:58px; }

/* ── Blätter von unten ────────────────────────────────── */

.dunkelfeld { position:absolute; inset:0; background:rgba(15,43,46,.45); z-index:120;
              display:flex; align-items:flex-end; }
.blatt { background:var(--flaeche); border-radius:22px 22px 0 0; width:100%;
         padding:22px 20px calc(24px + env(safe-area-inset-bottom));
         max-height:86%; overflow:auto; animation:sheetUp .24s ease both; }
.blatt .titel { font-size:20px; font-weight:800; margin-bottom:14px; }

/* Der Uebernehmen-Knopf im Materialblatt wandert beim Scrollen mit.
   Gemeldet am 02.09.2026: Bei 635 Katalogeintraegen ist ein Knopf, der oben
   stehen bleibt und beim ersten Scrollen verschwindet, fast so unbrauchbar wie
   einer ganz unten. `.blatt` ist der Scrollbehaelter, also klebt er an dessen
   oberem Rand. Ohne Auswahl ist der Behaelter leer und nimmt keinen Platz. */
#matoben { position:sticky; top:-2px; z-index:4; background:var(--flaeche);
           padding:8px 0 10px; box-shadow:0 8px 12px -8px rgba(15,43,46,.18); }
#matoben:empty { display:none; }
.blatt.voll { height:100%; border-radius:0; max-height:100%; display:flex;
              flex-direction:column; background:#0b1416; }

.sucher { flex:1; position:relative; background:#000; overflow:hidden;
          display:flex; align-items:center; justify-content:center; }
.sucher img { width:100%; height:100%; object-fit:cover; opacity:.85; }
.rahmen { position:absolute; width:62%; aspect-ratio:1; border:3px solid var(--mint);
          border-radius:18px; }
.strahl { position:absolute; left:19%; width:62%; height:2px; background:var(--mint);
          box-shadow:0 0 12px var(--mint); animation:scanline 2.2s ease-in-out infinite; }
.treffer { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
           justify-content:center; gap:14px; background:rgba(15,43,46,.72); color:#fff;
           font-size:19px; font-weight:800; animation:popIn .3s ease both; }
.ausloeser { width:74px; height:74px; border-radius:50%; background:#fff; border:5px solid #4a5658; }
.ausloeser:active { transform:scale(.92); }

/* Suchfeld mit Mikrofonknopf daneben. */
.suchzeile { display:flex; gap:8px; align-items:stretch; }
.suchzeile .feld { flex:1; min-width:0; }
.mikro {
  all:unset; box-sizing:border-box; flex:none; width:56px;
  display:flex; align-items:center; justify-content:center;
  background:var(--flaeche); border:1.5px solid var(--linie); border-radius:14px;
  font-size:22px; line-height:1;
}
.mikro:active { transform:scale(.96); }
.mikro.hoert { background:var(--mint-blass); border-color:var(--mint);
               animation:pulseCard 1.4s ease-in-out infinite; }

/* Frei eingetippt oder gesprochen: steht ganz oben und hebt sich ab, damit
   niemand denkt, das Teil sei aus dem Katalog. */
.materialzeile.frei { background:var(--mint-tipp); border:1.5px dashed var(--mint); }

.materialzeile { display:flex; align-items:center; gap:12px; padding:10px 0;
                 border-bottom:1px solid var(--linie-2); }
.materialzeile .text { flex:1; display:flex; flex-direction:column; }
.materialzeile .name { font-size:16px; font-weight:700; }
.materialzeile .preis { font-size:13.5px; color:var(--gedaempft); }
.materialzeile button { width:42px; height:42px; border-radius:11px; border:1.5px solid var(--linie);
                        background:var(--flaeche); font-size:21px; font-weight:700; flex:none; }
.materialzeile .menge { width:34px; text-align:center; font-size:17px; font-weight:800;
                        font-variant-numeric:tabular-nums; }

.schieber { display:flex; align-items:center; gap:12px; background:var(--flaeche);
            border:1.5px solid var(--linie); border-radius:14px; padding:14px; width:100%; }
.schieber .bahn { width:46px; height:28px; border-radius:14px; background:#D3DEDD;
                  position:relative; flex:none; transition:.15s; }
.schieber .bahn.an { background:var(--mint); }
.schieber .knopf { position:absolute; top:3px; left:3px; width:22px; height:22px;
                   border-radius:50%; background:#fff; transition:.15s; }
.schieber .bahn.an .knopf { left:21px; }

.chip { border:1.5px solid var(--linie); background:var(--flaeche); border-radius:12px;
        padding:11px 14px; font-size:15px; font-weight:700; color:var(--tinte); }
.chip.an { border-color:var(--mint); background:var(--mint-blass); color:var(--mint-tief); }
.chip.voll { border-color:var(--mint); background:var(--mint); color:#fff; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }

.protokoll { display:flex; align-items:center; gap:10px; padding:9px 0;
             border-bottom:1px solid var(--linie-2); font-size:14.5px; }
.protokoll:last-child { border-bottom:none; }
.protokoll .zeichen { width:22px; flex:none; }
.protokoll .was { flex:1; }
.protokoll .wann { color:var(--matt); font-size:13px; font-variant-numeric:tabular-nums; }

.hinweisfeld { display:flex; gap:10px; align-items:flex-start; background:var(--bernstein-blass);
               border:1px solid #F0DFC0; border-radius:12px; padding:12px 14px; font-size:14.5px;
               color:var(--bernstein-text); }
.gutfeld { display:flex; gap:10px; align-items:center; background:var(--mint-blass);
           border:1px solid #C5EFE4; border-radius:12px; padding:12px 14px; font-size:14.5px;
           color:var(--mint-tief); font-weight:600; }

.uebersichtskarte { background:var(--flaeche); border-radius:16px; padding:18px 20px;
                    box-shadow:var(--schatten); }
.paarzeile { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
             padding:11px 0; border-bottom:1px solid var(--linie-2); font-size:16px; }
.paarzeile:last-child { border-bottom:none; }
.paarzeile .kopf { color:var(--gedaempft); }
.paarzeile .wert { font-weight:700; text-align:right; }

.meldung { position:absolute; left:16px; right:16px; bottom:92px; background:var(--tinte);
           color:#fff; padding:14px 18px; border-radius:14px; font-size:15px; z-index:300;
           box-shadow:0 10px 28px rgba(15,43,46,.35); animation:fadeUp .2s ease both; }

/* ── Büro ─────────────────────────────────────────────── */

.buero { display:flex; min-height:calc(100vh - 47px); }
.seitenleiste { width:250px; flex:none; background:var(--tinte); color:#B8CDCB;
                padding:22px 14px; display:flex; flex-direction:column; gap:4px; }
.seitenleiste .marke { font-size:12px; font-weight:800; letter-spacing:.16em; color:#5EEDD0;
                       padding:0 12px 16px; display:flex; align-items:center; gap:9px; }
.seitenleiste .marke .bildmarke { width:19px; height:19px; }
/* Im Büro und im Adminbereich sitzt die Kante unter der Wortmarke der
   Seitenleiste statt ganz oben — dort ist sie auf dunklem Grund sichtbar. */
.seitenleiste .kante { height:3px; background:var(--verlauf); border-radius:2px;
                       margin:0 12px 14px; }
.seitenleiste button { border:none; background:transparent; color:#B8CDCB; text-align:left;
                       padding:12px 14px; border-radius:10px; font-size:15px; font-weight:600; }
.seitenleiste button:hover { background:rgba(255,255,255,.08); }
.seitenleiste button.an { background:rgba(9,210,168,.16); color:#5EEDD0; }
.seitenleiste .wer { margin-top:auto; padding:14px 14px 0; font-size:12.5px; color:#7E9997;
                     border-top:1px solid rgba(255,255,255,.09); }
.seitenleiste .wer b { color:#D6E6E4; font-weight:700; }
.buero-inhalt { flex:1; padding:30px 34px 60px; min-width:0; overflow-x:hidden; }
@media (max-width:860px) {
  /* Jeder Kasten in der Kette wird ausdruecklich auf die Schirmbreite
     festgenagelt. Ohne das nimmt sich die waagerechte Menueleiste die Breite
     ihrer zehn Punkte — rund 900 Pixel — und zieht die ganze Bueroansicht mit.
     `min-width:0` ist dabei kein Zierrat: ein Flexkind ist von sich aus
     mindestens so breit wie sein Inhalt. */
  .buero { flex-direction:column; width:100%; max-width:100%; min-width:0; }
  .seitenleiste {
    width:100%; max-width:100%; min-width:0;
    flex-direction:row; overflow-x:auto; padding:10px;
    -webkit-overflow-scrolling:touch;
  }
  .seitenleiste .marke, .seitenleiste .wer { display:none; }
  .seitenleiste button { flex:none; white-space:nowrap; }
  .buero-inhalt { padding:18px 14px 50px; width:100%; max-width:100%; min-width:0; }

  /* Kennzahlen untereinander. Zwei Spalten zu je 190 Pixel passen auf 390
     Pixel Schirm nicht nebeneinander — sie standen trotzdem dort, weil die
     Seite ja breiter war als der Schirm. */
  .kennzahlen { grid-template-columns:1fr; gap:10px; }
  .kennzahl { padding:14px 16px; }
  .kennzahl .zahl { font-size:27px; }

  /* Tabellen bleiben Tabellen und rollen in ihrem eigenen Rahmen zur Seite —
     die Seite selbst nicht. Auf dem Handy ist das der ehrlichere Weg als
     Spalten wegzulassen: die Werkstattleitung sucht dort Zahlen, und eine
     halbe Zeile ist schlimmer als eine, die man schieben muss. */
  .tafel-rollen { max-width:100%; }
  .tafel-rollen .tafel { min-width:640px; }
  .tafel .kopf, .tafel .zeile { padding:11px 14px; }

  /* Die Schublade fuellt den Schirm, statt daneben zu stehen. */
  .schublade { width:100%; box-shadow:none; }

  /* Ueberschriften duerfen umbrechen statt zu ueberstehen. */
  .h1 { font-size:26px; }
  .buero-inhalt .unter { max-width:100%; }
}

/* Ganz schmale Geraete: das Eingabefeld und sein Mikrofon untereinander wuerde
   die Maske unnoetig lang machen — das Mikrofon bleibt daneben, wird aber
   schmaler. */
@media (max-width:420px) {
  .pa-matzeile { grid-template-columns:1fr 68px; }
  .pa-matzeile .hauptknopf { grid-column:1 / -1; }
  .mit-mikro { gap:6px; }
}

.kennzahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px;
              margin:18px 0 20px; }
.kennzahl { background:var(--flaeche); border-radius:14px; padding:16px 18px; box-shadow:var(--schatten); }
.kennzahl .bez { font-size:13.5px; color:var(--gedaempft); font-weight:600; }
.kennzahl .zahl { font-size:31px; font-weight:800; color:var(--tinte); margin-top:5px;
                  font-variant-numeric:tabular-nums; }

.tafel { background:var(--flaeche); border-radius:14px; box-shadow:var(--schatten); overflow:hidden; }
.tafel .kopf, .tafel .zeile { display:grid; gap:10px; align-items:center; padding:13px 18px; }
.tafel .kopf { background:var(--grund); font-size:12.5px; font-weight:700; color:var(--gedaempft);
               text-transform:uppercase; letter-spacing:.06em; }
.tafel .zeile { border-top:1px solid var(--linie-2); font-size:14.5px; width:100%;
                border-left:none; border-right:none; border-bottom:none; background:var(--flaeche);
                text-align:left; }
.tafel button.zeile:hover { background:#F7FBFA; }
.tafel .zeile.an { background:#F0FAF7; }
.tafel-rollen { overflow-x:auto; }
.tafel-rollen .tafel { min-width:720px; }

/* Rechnung und Abrechnung: Beleg neben der Liste, darunter sobald es eng wird.
   Die minmax(0,…) verhindert, dass die scrollbare Tabelle die Spalte aufbläht. */
.rg-raster, .abr-raster { display:grid; gap:20px; align-items:start;
                          grid-template-columns:minmax(0,1fr) minmax(280px,320px); }
@media (max-width:1180px) {
  .rg-raster, .abr-raster { grid-template-columns:minmax(0,1fr); }
}

/* Formular links, Erklaerung rechts — und untereinander, sobald es eng wird.
   Die Spaltenbreiten stehen HIER und nicht als style="" am Element: eine
   inline gesetzte grid-template-columns schlaegt jede Media Query, und dann
   quetscht sich die rechte Spalte auf ein Wort je Zeile. Genau das ist am
   01.09.2026 auf der Projektanlage passiert. */
.pa-raster { display:grid; gap:20px; align-items:start;
             grid-template-columns:minmax(340px,460px) minmax(0,1fr); }
@media (max-width:1080px) { .pa-raster { grid-template-columns:minmax(0,1fr); } }
.rg-raster .tafel { min-width:640px; }

.balken { display:flex; align-items:flex-end; gap:3px; height:130px; }
.balken .stab { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.balken .stab i { width:100%; border-radius:3px 3px 0 0; display:block; }
.balken .stab span { font-size:10px; color:var(--matt); white-space:nowrap; }

.schublade { position:fixed; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--flaeche);
             box-shadow:-14px 0 40px rgba(15,43,46,.18); z-index:300; display:flex;
             flex-direction:column; animation:fadeUp .2s ease both; }
.schublade .kopf { padding:20px; border-bottom:1px solid var(--linie); display:flex;
                   align-items:flex-start; gap:12px; }
.schublade .rumpf { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.schublade .fuss { padding:18px 20px calc(18px + env(safe-area-inset-bottom));
                   border-top:1px solid var(--linie); }

.beleg { background:var(--flaeche); border-radius:14px; padding:26px; box-shadow:var(--schatten); }
.beleg .kopf { display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
               padding-bottom:16px; border-bottom:2px solid var(--tinte); }
.beleg .zeile { display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:10px 0;
                border-bottom:1px solid var(--linie-2); font-size:14.5px; }
.beleg .summe { display:flex; justify-content:space-between; padding:7px 0; font-size:15px; }
.beleg .summe.brutto { border-top:2px solid var(--tinte); margin-top:6px; padding-top:11px;
                       font-weight:800; font-size:17px; }

.etikettenblatt { display:flex; flex-wrap:wrap; gap:12px; }
.etikett { border:1px dashed var(--matt); border-radius:10px; padding:10px; background:#fff;
           width:158px; display:flex; flex-direction:column; align-items:center; gap:5px; }
.etikett img { width:118px; height:118px; display:block; }
.etikett .ks { font-weight:800; font-size:15px; }
.etikett .bez { font-size:11px; text-align:center; color:var(--gedaempft); line-height:1.25; }

.leer { text-align:center; color:var(--gedaempft); padding:34px 14px; font-size:15px; }
.mini { font-size:12.5px; color:var(--gedaempft); }
.fahne { background:var(--bernstein); color:#fff; text-align:center; padding:8px 14px;
         font-size:14px; font-weight:700; }

@media print {
  .kopfleiste, .seitenleiste, .navi, .fusszeile, .nichtdrucken { display:none !important; }
  .buero-inhalt { padding:0; }
  .etikett { break-inside:avoid; }
  body { background:#fff; }
}

/* ─────────────── Zuordnung einer Rechnungszeile ───────────────
   Statt einer Auswahlliste mit 216 Maschinen wird getippt. Die Trefferliste
   klappt unter dem Feld auf und bleibt in ihrer eigenen Bildlaufspur, damit
   die Rechnungszeilen darunter nicht wegrutschen. */
.zgesetzt {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14.5px;
}

.zliste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: 232px;
  overflow-y: auto;
  padding: 4px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  box-shadow: var(--schatten);
}

.zeintrag {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--tinte);
}

.zeintrag:hover,
.zeintrag:focus-visible {
  background: var(--mint-tipp);
}

.zeintrag:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: -2px;
}

/* Der Hinweis, dass die Gesellschaft nicht erkannt wurde: kein Fehler, aber
   auch nichts, was man überlesen soll. */
.zwarnung {
  color: var(--bernstein-text);
}

/* ─────────────── Hinterlegte Strecken im Fahrt-Blatt ───────────────
   Je Standort eine Zeile: Name links, daneben die einfache Strecke und
   hin/zurück. Der Mechaniker tippt an, statt zu schätzen. */
.strecken {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.strecke {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
}

.strecke-ort {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 15px;
}

.strecke-ort b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strecke .chip {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die gewählte Rechnungsdatei, bevor sie hochgeht. */
.rgwahl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--mint-blass);
  color: var(--mint-tief);
  font-size: 14px;
  max-width: 320px;
}

.rgwahl b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─────────────── Meldungen in der Anmeldemaske ───────────────
   Zwei verschiedene Dinge, deshalb zwei Farben: der Fehlerkasten sagt, dass
   gerade etwas nicht geklappt hat. Der Warnkasten sagt, dass die Verbindung
   unverschlüsselt ist — das ist kein Bedienfehler, sondern ein Zustand, den
   der Nutzer kennen muss, bevor er ein Passwort eintippt. */
.fehlerkasten,
.warnkasten {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.45;
}

.fehlerkasten {
  background: #FDECEC;
  color: #9B2C2C;
}

.warnkasten {
  background: var(--bernstein-blass);
  color: var(--bernstein-text);
}

/* Eingabefelder in der Anmeldung dürfen ruhig etwas größer sein: sie werden
   mit Handschuhen und auf einem kleinen Bildschirm getroffen. */
.seite > input.feld {
  font-size: 16px;   /* unter 16px zoomt iOS beim Antippen hinein */
  padding: 14px 14px;
}

/* ─────────────── Was gewählt wurde, bevor angestempelt wird ───────────────
   Bewusst groß und ruhig: das ist die letzte Gelegenheit zu merken, dass man
   die falsche Maschine erwischt hat. Auf dem Handy, mit Handschuhen, aus
   einem Meter Abstand lesbar. */
.wahlkarte {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 22px 20px;
  border-radius: 18px;
  background: var(--flaeche);
  border: 2px solid var(--mint);
  box-shadow: var(--schatten);
}

.wahl-zeichen {
  font-size: 34px;
  line-height: 1;
  flex: none;
}

.wahl-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wahl-titel {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--tinte);
  text-wrap: balance;
}

.wahl-unter {
  font-size: 14.5px;
  color: var(--gedaempft);
}


/* ── Projektanlage ─────────────────────────────────────────
   Die Maske ist seit dem 03.09.2026 nach der Reihenfolge gebaut, in der man
   denkt: Art, Bezeichnung, Auftraggeber, worum es geht — und darunter, klar
   abgesetzt, alles Freiwillige. */

/* Eingabefeld mit Mikrofon rechts daneben. Das Feld nimmt den Platz, der
   Knopf bleibt gleich gross. */
.mit-mikro { display:flex; gap:8px; align-items:flex-start; }
.mit-mikro .feld { flex:1; padding:12px 14px; }
.mit-mikro textarea.feld { resize:vertical; min-height:92px; line-height:1.5; }
.mit-mikro .mikro { flex:none; }

/* Zwei Felder nebeneinander, auf schmalen Schirmen untereinander. */
.pa-zeile2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pa-zeile2 .feld { padding:12px 14px; width:100%; }
@media (max-width: 560px) { .pa-zeile2 { grid-template-columns:1fr; } }

/* Der Schnitt zwischen Pflicht und freiwillig. Eine Linie mit einem Wort
   darin — deutlicher als jede Ueberschrift und ruhiger als ein Kasten. */
.pa-trenner {
  display:flex; align-items:center; gap:12px;
  margin:26px 0 14px; color:var(--gedaempft);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.pa-trenner::before, .pa-trenner::after {
  content:""; flex:1; height:1px; background:var(--linie);
}

/* Der neue Auftraggeber klappt direkt unter dem Auswahlfeld auf, aus dem er
   gewaehlt wurde. */
.pa-neuerkunde {
  margin-top:10px; padding:14px; border-radius:14px;
  background:var(--mint-blass); border:1.5px solid var(--mint);
}
.pa-neuerkunde .feld { width:100%; padding:11px 13px; }

/* Material vormerken: suchen, Menge, uebernehmen. */
.pa-matzeile { display:grid; grid-template-columns:1fr 84px auto; gap:8px; }
.pa-matzeile .feld { padding:12px 14px; width:100%; }
.pa-matzeile .hauptknopf { width:auto; padding:0 18px; min-height:46px; }
@media (max-width: 560px) {
  .pa-matzeile { grid-template-columns:1fr 84px; }
  .pa-matzeile .hauptknopf { grid-column:1 / -1; }
}
.pa-matliste { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.pa-matposten {
  display:flex; align-items:center; gap:10px;
  background:var(--grund); border:1px solid var(--linie);
  border-radius:11px; padding:9px 12px;
}
.pa-matposten .menge { font-weight:800; font-variant-numeric:tabular-nums; min-width:38px; }
.pa-matposten .bez { flex:1; font-weight:700; }

/* ── Auftragszettel auf dem Handy ──────────────────────────
   Was das Buero mitgegeben hat. Steht ueber der Uhr, damit es gelesen wird,
   bevor angestempelt wird — genau dafuer sind die Felder da. */
.auftragszettel {
  margin-top:14px; padding:14px 15px; border-radius:16px;
  background:var(--flaeche); border:1.5px solid var(--linie);
  border-left:4px solid var(--mint);
}
.auftragszettel .zettelkopf {
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint-tief);
}
.auftragszettel .zetteltext {
  margin-top:7px; font-size:16px; line-height:1.5; white-space:pre-wrap;
}
.auftragszettel .zettelfakten {
  margin-top:11px; display:flex; flex-direction:column; gap:6px;
  border-top:1px solid var(--linie); padding-top:10px;
}
.auftragszettel .zettelfakten > div { display:flex; gap:10px; align-items:baseline; }
.auftragszettel .zettelfakten .k {
  flex:none; min-width:96px; font-size:12px; font-weight:700;
  color:var(--gedaempft); text-transform:uppercase; letter-spacing:.06em;
}
.auftragszettel .zettelfakten .v { flex:1; font-weight:700; }

/* Pflicht oder freiwillig — als Plakette hinter der Ueberschrift.
   Als blosser Zusatztext erbte er das Gesperrte und die Grossbuchstaben der
   Rubrik und verschmolz mit ihr: „BEZEICHNUNG PFLICHT" las sich als ein Wort. */
.marke-pflicht, .marke-frei {
  display:inline-block; margin-left:9px; padding:2px 9px; border-radius:999px;
  font-size:10px; font-weight:800; letter-spacing:.08em; vertical-align:2px;
}
.marke-pflicht { background:var(--mint-blass); color:var(--mint-tief); }
.marke-frei    { background:var(--grund); color:var(--gedaempft); border:1px solid var(--linie); }

/* Ein Knopf, der nicht wie ein Knopf drueckt: fuer „Abbrechen" neben einer
   Hauptaktion. Nimmt keinen Platz weg und zieht keine Aufmerksamkeit. */
.knopf-schlicht {
  background:none; border:none; padding:0 6px; min-height:44px;
  font-family:inherit; font-size:15px; font-weight:700;
  color:var(--gedaempft); text-decoration:underline; text-underline-offset:3px;
}
.knopf-schlicht:hover { color:var(--tinte); }

/* Ueberschrift ueber einer Gruppe freiwilliger Felder. Sie sagt nicht nur,
   was zusammengehoert, sondern WOHIN es geht — das ist der Unterschied
   zwischen „noch ein Feld" und „das liest der Mechaniker". */
.pa-block {
  margin:24px 0 4px; padding:9px 13px; border-radius:11px;
  background:var(--tinte); color:var(--flaeche);
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}

/* Eilt. Faellt auf, ohne zu schreien — Bernstein, nicht Rot: rot ist in WERT
   fuer Fehler reserviert, und ein eiliger Auftrag ist kein Fehler. */
.eiltmarke {
  display:inline-block; margin-left:7px; padding:2px 9px; border-radius:999px;
  background:#FBF2E1; color:#B07A20; border:1px solid #E8A33D;
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  vertical-align:1px;
}

/* Der Sicherheitshinweis auf dem Auftragszettel. Steht abgesetzt, weil ihn
   niemand ueberlesen soll — in einem Schrottbetrieb ist „Anlage muss stromlos
   sein" keine Nebenbemerkung. */
.auftragszettel .zettelachtung {
  display:flex; gap:9px; align-items:flex-start;
  margin-top:11px; padding:10px 12px; border-radius:12px;
  background:#FBF2E1; border:1px solid #E8A33D; color:#7A5312;
  line-height:1.5;
}
.auftragszettel .zettelachtung .zeichen { font-size:17px; line-height:1.2; }

/* Die Trefferliste beim Vormerken von Material. Hoehenbegrenzt und rollbar:
   der Katalog hat ueber 200 Eintraege, und die Maske soll nicht kilometerlang
   werden, nur weil jemand das Suchfeld leer laesst. */
.pa-mattreffer {
  margin-top:10px; max-height:290px; overflow-y:auto;
  border:1px solid var(--linie); border-radius:13px; background:var(--flaeche);
}
.pa-mattreffer .materialzeile { border-radius:0; border:none;
                                border-bottom:1px solid var(--linie-2); }
.pa-mattreffer .materialzeile:last-child { border-bottom:none; }
.pa-mattreffer .leer { padding:16px; }

/* Die Karte „Neuer Auftrag fuer dich" auf der Startseite des Mechanikers.
   Bei einem eiligen Auftrag wechselt sie von Mint auf Bernstein — dieselbe
   Farbe, in der WERT ueberall „hier fehlt etwas" oder „hier ist Eile"
   ausdrueckt. Rot bleibt Fehlern vorbehalten. */
.zuteilkarte {
  background:var(--mint-blass); border:2px solid var(--mint);
  border-radius:18px; padding:16px 16px 14px; margin:16px 0 4px;
}
.zuteilkarte.eilig { background:#FBF2E1; border-color:#E8A33D; }

/* Eine eilige Zeile in der Auftragsliste des Mechanikers.
   Bernstein statt Rot: Rot bedeutet in WERT „hier ist etwas kaputt". Und nur
   das Eilige wird eingefaerbt — waeren alle Zeilen bunt, fiele die eilige
   weniger auf statt mehr. Kontrast entsteht dadurch, dass EINES anders ist. */
.reihe.eilig { background:#FEF9EF; }
.reihe.eilig:hover { background:#FBF2E1; }
.reihe.eilig .titel { color:#7A5312; }

/* Wer arbeitet mit? Ankreuzknoepfe statt eines Mehrfach-Auswahlfelds: ein
   <select multiple> ist auf dem Handy kaum bedienbar, und mit oeligen
   Handschuhen gar nicht. */
.pa-team { display:flex; flex-wrap:wrap; gap:8px; }
.pa-teamknopf {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 14px; border-radius:999px; min-height:44px;
  background:var(--flaeche); border:1.5px solid var(--linie);
  font-family:inherit; font-size:15px; font-weight:700; color:var(--tinte);
}
.pa-teamknopf .haken { width:14px; color:var(--mint-tief); font-weight:900; }
.pa-teamknopf.an { background:var(--mint-blass); border-color:var(--mint); }

/* „Werner arbeitet gerade hier" auf dem Auftragszettel des Mechanikers.
   Verhindert, dass zwei zur selben Maschine fahren, ohne voneinander zu
   wissen — genau die Luecke, die beim Nachmessen am 03.09.2026 auffiel. */
.auftragszettel .zettellaeuft {
  margin-bottom:10px; padding:9px 12px; border-radius:11px;
  background:var(--mint-blass); color:var(--mint-tief);
  font-weight:700; line-height:1.45;
}

/* Ein Teil, das heute auf diesem Vorgang schon gebucht wurde. Bernstein wie
   ueberall in WERT fuer „hier bitte hinsehen" — und deutlich genug, dass es
   niemand aus Versehen ein zweites Mal antippt. */
.materialzeile.schondrin { background:#FEF9EF; }

/* ── Offene Vorgaenge als Karten (Handy) ───────────────────
   Eine Tabelle mit sechs Spalten passt auf 375 Pixel nicht; sichtbar waren
   genau zwei. Auf dem Telefon steht deshalb je Vorgang alles untereinander. */
.vkarten { display:flex; flex-direction:column; gap:10px; }
.vkarte {
  display:flex; flex-direction:column; gap:5px; width:100%; text-align:left;
  background:var(--flaeche); border:1px solid var(--linie);
  border-left:4px solid var(--linie); border-radius:14px;
  padding:13px 15px; font-family:inherit; font-size:15px; color:var(--tinte);
  box-shadow:var(--schatten);
}
.vkarte.an    { border-color:var(--mint); background:#F0FAF7; }
.vkarte.eilig { border-left-color:#E8A33D; background:#FEF9EF; }
.vkarte .kopfzeile { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vkarte .was { font-weight:800; font-size:16.5px; line-height:1.3; }
.vkarte .beschreibung { line-height:1.5; }
.vkarte .ueberfaellig { color:#B07A20; font-weight:700; }
.vkarte .zustand { margin-top:3px; }
.vkarte .laeuft {
  display:flex; align-items:center; gap:8px;
  background:var(--mint-blass); color:var(--mint-tief);
  border-radius:10px; padding:7px 10px; font-size:14px;
}
.vkarte .fakten {
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:2px;
  font-variant-numeric:tabular-nums;
}
.vkarte .angaben {
  display:flex; align-items:center; gap:7px;
  border-top:1px solid var(--linie-2); padding-top:8px; margin-top:3px;
}

/* Eine Reiterleiste, die mehr Punkte hat als Platz — sie rollt seitlich.
   Am Rechner nimmt sie nur die Breite, die sie braucht.

   `min-width:0` ist die entscheidende Zeile und der Grund, warum der erste
   Anlauf nicht wirkte: ein Flexkind schrumpft von sich aus NICHT unter die
   Breite seines Inhalts. Ohne diese Zeile wird die Leiste einfach breiter als
   der Platz und wird abgeschnitten, statt zu rollen. */
.reiter-schiebbar { width:auto; min-width:0; max-width:100%; }

@media (max-width:700px) {
  .reiter-schiebbar {
    flex:1 1 100%;              /* eigene Zeile ueber die volle Breite */
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    /* Ein weicher Verlauf am rechten Rand zeigt, dass dort noch etwas kommt —
       auf dem Telefon gibt es keinen sichtbaren Rollbalken. Er verschwindet,
       sobald ans Ende gerollt ist. */
    background:
      linear-gradient(to right, var(--flaeche) 30%, rgba(255,255,255,0)) left / 26px 100% no-repeat,
      linear-gradient(to left,  var(--flaeche) 30%, rgba(255,255,255,0)) right / 26px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(15,43,46,.13), rgba(0,0,0,0)) left / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(15,43,46,.13), rgba(0,0,0,0)) right / 12px 100% no-repeat,
      var(--flaeche);
    background-attachment: local, local, scroll, scroll, local;
  }
  /* Beim Rollen behaelt jeder Knopf seine eigene Breite. `flex:1` wuerde sie
     auf die sichtbare Breite zusammenquetschen — dann waere nichts zu rollen
     und die Beschriftung braeche um. */
  .reiter-schiebbar button { flex:0 0 auto; white-space:nowrap; padding:0 16px; }

  /* Die Reiter der Stammdaten und der Projektanlage duerfen weiter umbrechen —
     drei kurze Woerter passen nebeneinander. */
  .buero-inhalt .reiter:not(.reiter-schiebbar) { flex-wrap:wrap; }
}

/* Der Selbsttest der Spracheingabe. Eine Stufe je Zeile, mit Haken oder Kreuz —
   damit man auf einen Blick sieht, WO die Kette reisst. */
.sprachtest { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.sprachtest .stufe {
  display:flex; gap:10px; align-items:flex-start;
  border-radius:11px; padding:9px 12px; font-size:14.5px; line-height:1.45;
  background:var(--grund); border:1px solid var(--linie);
}
.sprachtest .stufe .zeichen { flex:none; font-weight:900; width:16px; text-align:center; }
.sprachtest .stufe.gut    { background:var(--mint-blass); border-color:var(--mint); }
.sprachtest .stufe.gut    .zeichen { color:var(--mint-tief); }
.sprachtest .stufe.halt   { background:#FBF2E1; border-color:#E8A33D; color:#7A5312; }
.sprachtest .stufe.halt   .zeichen { color:#B07A20; }
.sprachtest .stufe.laeuft { border-style:dashed; }

/* Warum das Diktat nicht ging — als feststehende Zeile im Blatt.
   Eine Kurzmeldung wird von der naechsten ueberschrieben; beim Rueckfall kamen
   zwei hintereinander und zu sehen war nur die nichtssagende. */
.diktatfehler {
  display:flex; gap:9px; align-items:flex-start;
  margin-top:10px; padding:10px 12px; border-radius:12px;
  background:#FBF2E1; border:1px solid #E8A33D; color:#7A5312;
  font-size:14px; line-height:1.5;
}
.diktatfehler .zeichen { flex:none; font-size:16px; line-height:1.3; }

/* Dieselbe Zeile wie beim Fehler, aber kein Fehler: die Zahlen aus einem
   Diktat, die gegengelesen werden müssen. Blau statt bernstein — es ist eine
   Bitte, keine Warnung. */
.diktatfehler.zahlen {
  background:#EAF2FA; border-color:#5B8FC7; color:#1F4568;
}
.diktatfehler.zahlen b { font-variant-numeric:tabular-nums; }

/* Der Ziffernhinweis am Mikrofon. Leise — er soll da sein, wenn man ihn
   braucht, und nicht mit dem Diktatknopf um Aufmerksamkeit ringen. */
.ziffterntipp {
  margin-top:8px; line-height:1.5; text-transform:none; letter-spacing:0;
  opacity:.78;
}

/* Was der zweite Blick am Text geändert hat. Grün, nicht bernstein: es ist
   eine Verbesserung, keine Warnung — aber sichtbar muss sie sein. */
.diktatfehler.berichtigt {
  background:#E9F5EE; border-color:#4E9A6B; color:#1F4A33;
}

/* Die gesammelten Seiten einer Eingangsrechnung, bevor sie hochgeladen werden.
   Sie stehen untereinander und nicht in einer Zeile: drei Dateinamen
   nebeneinander sind auf einem Handy nicht mehr zu lesen. */
.rgseiten { display:flex; flex-direction:column; gap:6px; margin:0 0 12px; }
.rgseiten .rgwahl { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rgseiten .rgwahl b { flex:0 0 auto; }

/* Der Stand einer Eingangsrechnung, über der Positionsliste. Bernstein,
   solange etwas ohne Zuordnung ist — grün, wenn nichts mehr offen steht. */
.rgstand {
  display:flex; gap:10px; align-items:flex-start;
  margin:14px 0 4px; padding:12px 14px; border-radius:12px;
  background:#FBF2E1; border:1px solid #E8A33D; color:#7A5312;
  font-size:14px; line-height:1.5;
}
.rgstand.fertig { background:#E9F5EE; border-color:#4E9A6B; color:#1F4A33; }
.rgstand .zeichen { flex:none; font-size:16px; line-height:1.35; }

/* Das Materialmikrofon wird gedrückt gehalten. Ohne diese Zeilen wählt ein
   langer Druck auf dem Handy Text aus oder scrollt die Seite weg. */
.mikro.halten { touch-action:none; user-select:none; -webkit-user-select:none;
                -webkit-touch-callout:none; }