/* 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; }

/* Die Anmeldung. Bis zum 08.10.2026 stand sie im Geraeterahmen der
   Handy-Ansicht — am Telefon unsichtbar, am Rechner ein kleines nachgebautes
   Handy auf leerer Flaeche. Jetzt eine Karte: am Telefon fuellt sie den
   Bildschirm, am Rechner steht sie in der Mitte. */
.anmeldeflaeche { min-height:100dvh; display:flex; justify-content:center;
                  align-items:flex-start; padding:48px 16px 60px; }
.anmeldekarte { width:402px; max-width:100%; background:var(--grund);
                border-radius:24px; box-shadow:0 18px 50px rgba(15,43,46,.13);
                overflow:hidden; display:flex; flex-direction:column; }
.anmeldekarte .seite { padding-bottom:34px; animation:none; }
@media (max-width:820px) {
  .anmeldeflaeche { padding:0; }
  .anmeldekarte { width:100%; min-height:100dvh; border-radius:0; box-shadow:none; }
}

/* ── 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; }

/* Das aufklappbare Auswahlfeld (30.09.2026).
   Zugeklappt sieht es aus wie ein Eingabefeld und nimmt eine Zeile ein —
   aufgeklappt bekommt die Liste einen eigenen Kasten mit eigener Rolle,
   damit die Maske darunter stehen bleibt. */
.auswahlfeld { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px;
               width:100%; margin-top:12px; padding:14px; background:var(--flaeche);
               border:1.5px solid var(--linie); border-radius:14px; cursor:pointer; }
.auswahlfeld.gewaehlt { border-color:var(--mint); background:var(--mint-blass); }
.auswahlfeld.offen { margin-top:0; border-color:var(--mint); }
.auswahlfeld .bild { font-size:20px; flex:none; }
.auswahlfeld .text { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.auswahlfeld .titel { font-size:16.5px; font-weight:700; }
.auswahlfeld .zusatz { font-size:13.5px; color:var(--gedaempft); }
.auswahlfeld .pfeil { flex:none; font-size:15px; color:var(--gedaempft); }
.auswahlauf { margin-top:12px; padding:12px; background:var(--grund);
              border:1.5px solid var(--linie); border-radius:16px; }
.auswahlliste { margin-top:10px; max-height:46vh; overflow-y:auto;
                -webkit-overflow-scrolling:touch; }

.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; }
/* Der Wert ist ein Feld, sieht aber aus wie Text: getippt wird die Zahl von
   denen, die 8.472 Betriebsstunden ablesen, und nicht erklommen (30.09.2026).
   Kein Rahmen, keine Pfeilchen — erst beim Hineintippen zeigt sich, dass es
   ein Feld ist. */
.zaehlwerk input.wert { min-width:0; border:none; background:transparent;
                        color:var(--tinte); padding:10px 2px; border-radius:8px;
                        font-family:inherit; -moz-appearance:textfield; }
.zaehlwerk input.wert:focus { outline:none; background:var(--grund);
                              box-shadow:inset 0 0 0 2px var(--mint); }
.zaehlwerk .einheit { flex:none; font-size:15px; font-weight:700; color:var(--gedaempft); }
.materialzeile input.menge { width:54px; border:none; background:transparent;
                             font-family:inherit; border-radius:8px; padding:6px 0; }
.materialzeile input.menge:focus { outline:none; background:var(--grund);
                                   box-shadow:inset 0 0 0 2px var(--mint); }

.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); }
/* Keine Stoppuhr (15.09.2026): klein, ruhig, in Minuten. */
.uhr { font-size:16px; font-weight:600; color:var(--gedaempft); margin-top:8px; line-height:1.4; }
.uhr.gross { font-size:17px; margin-top:0; }

/* ── 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; }
/* Eine wartende Fassung ist keine Stoerung — Bernstein heisst hier „es hakt",
   und es hakt ja nichts (12.10.2026). */
.fahne.neu { background:var(--mint-tief); }

@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; }

/* ══════════════════════════════ Kanal ══════════════════════════════
   Aufbau wie Microsoft Teams (Marlen Weißbeck, 14.09.2026), Farben und
   Schrift aus WERT: Tinte, Mint, Hanken Grotesk. Die linke Leiste ist
   dunkel wie die Seitenleiste im Büro — dieselbe Handschrift. */

.chat {
  display:grid; grid-template-columns:330px minmax(0,1fr);
  height:calc(100vh - 56px); height:calc(100dvh - 56px);
  background:var(--grund); position:relative;
}

/* ── Leiste ── */
.chat-leiste {
  background:var(--tinte); color:#E8F2F0; display:flex; flex-direction:column;
  min-height:0; border-right:1px solid rgba(255,255,255,.06);
}
.chat-leiste-kopf { display:flex; align-items:center; gap:10px; padding:18px 16px 10px; }
.chat-titel { font-size:21px; font-weight:800; letter-spacing:-.01em; flex:1; }
.chat-neu {
  border:none; border-radius:10px; padding:8px 13px; font-size:14px; font-weight:700;
  background:var(--mint); color:#fff; box-shadow:0 4px 14px rgba(9,210,168,.28);
}
.chat-neu:hover { background:var(--mint-dunkel); }
.chat-zurueck {
  border:none; background:rgba(255,255,255,.08); color:#E8F2F0; width:34px; height:34px;
  border-radius:10px; font-size:22px; line-height:1; display:grid; place-items:center;
}
.chat-gespraech .chat-zurueck { background:var(--grund); color:var(--tinte); display:none; }
.chat-suche { padding:0 16px 10px; }
.chat-suche .feld {
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.10); color:#fff;
  padding:10px 13px; font-size:15px; border-radius:11px;
}
.chat-suche .feld::placeholder { color:#8FB0AE; }
.chat-suche .feld:focus { border-color:var(--mint); }
.chat-liste { flex:1; overflow-y:auto; padding:2px 8px 12px; }
.chat-rubrik {
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#7FA3A1; padding:14px 10px 6px;
}
.chat-dialog .chat-rubrik { color:var(--matt); padding-left:0; }
.chat-leer { font-size:13.5px; color:#8FB0AE; padding:10px; line-height:1.45; }
.chat-dialog .chat-leer, .chat-verlauf .chat-leer { color:var(--gedaempft); }
.chat-eintrag {
  width:100%; border:none; background:transparent; color:inherit; text-align:left;
  display:flex; gap:11px; align-items:center; padding:9px 10px; border-radius:12px;
  position:relative;
}
.chat-eintrag:hover { background:rgba(255,255,255,.06); }
.chat-eintrag.an { background:rgba(9,210,168,.16); }
.chat-eintrag.an::before {
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:3px; background:var(--mint);
}
.chat-eintrag-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-eintrag-zeile { display:flex; align-items:center; gap:8px; min-width:0; }
.chat-eintrag-zeile b { flex:1; min-width:0; font-size:15px; font-weight:600; white-space:nowrap;
                        overflow:hidden; text-overflow:ellipsis; }
.chat-eintrag.neu .chat-eintrag-zeile b { font-weight:800; color:#fff; }
.chat-vorschau { flex:1; min-width:0; font-size:13px; color:#9DBDBA; white-space:nowrap;
                 overflow:hidden; text-overflow:ellipsis; }
.chat-eintrag.neu .chat-vorschau { color:#D7EDEA; }
.chat-leiste .chat-zeit { font-size:11.5px; color:#7FA3A1; flex:none; }
.chat-zahl {
  flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--mint); color:#fff; font-size:11.5px; font-weight:800;
  display:grid; place-items:center;
}
.chat-ich {
  border:none; border-top:1px solid rgba(255,255,255,.07); background:transparent;
  color:#E8F2F0; display:flex; align-items:center; gap:10px; padding:12px 16px; text-align:left;
}
.chat-ich:hover { background:rgba(255,255,255,.05); }
.chat-ich b { display:block; font-size:14px; }
.chat-ich .mini { color:#8FB0AE; }

/* ── Bilder und Symbole ── */
.chat-avatar {
  flex:none; border-radius:50%; object-fit:cover; display:inline-grid; place-items:center;
  color:#fff; font-weight:800; letter-spacing:.02em; background:var(--gedaempft);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.chat-leiste .chat-avatar { box-shadow:0 0 0 2px var(--tinte); }
.chat-raute {
  flex:none; border-radius:11px; display:grid; place-items:center; font-weight:800;
  font-size:19px; color:var(--mint-tief); background:var(--mint-blass);
}
.chat-leiste .chat-raute { background:rgba(9,210,168,.16); color:var(--mint); }
.chat-raute.gross { width:64px; height:64px; font-size:30px; border-radius:18px; }
.chat-stapel { position:relative; flex:none; }
.chat-stapel .chat-avatar { position:absolute; }
.chat-stapel .a { left:0; top:0; }
.chat-stapel .b { right:0; bottom:0; }

/* ── Gespräch ── */
.chat-gespraech { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--flaeche); }
.chat-kopf {
  display:flex; align-items:center; gap:12px; padding:12px 22px;
  border-bottom:1px solid var(--linie); background:var(--flaeche);
}
.chat-kopf-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-kopf-text b { font-size:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-kopf-leute { display:flex; align-items:center; }
.chat-kopf-leute .chat-avatar.klein { margin-left:-8px; box-shadow:0 0 0 2px var(--flaeche); }
.chat-kopf-leute .chat-knopf { margin-left:10px; }
.chat-knopf {
  border:1.5px solid var(--linie); background:var(--flaeche); color:var(--tinte);
  border-radius:10px; padding:7px 12px; font-size:13.5px; font-weight:700; white-space:nowrap;
}
.chat-knopf:hover { border-color:var(--mint); }
.chat-knopf.warn { color:var(--bernstein-text); }

.chat-verlauf {
  flex:1; overflow-y:auto; padding:18px 22px 10px;
  background:linear-gradient(180deg, var(--grund) 0%, #FAFCFC 100%);
}
.chat-tag { display:flex; align-items:center; gap:12px; margin:18px 0 10px; color:var(--matt);
            font-size:12px; font-weight:700; letter-spacing:.04em; }
.chat-tag::before, .chat-tag::after { content:""; flex:1; height:1px; background:var(--linie); }
.chat-anfang { display:flex; flex-direction:column; align-items:center; gap:6px; padding:40px 0 20px;
               text-align:center; }
.chat-anfang b { font-size:19px; }

.chat-zeile { display:flex; gap:10px; align-items:flex-end; margin-top:12px; max-width:860px; }
.chat-zeile.folgt { margin-top:3px; }
.chat-seite { width:34px; flex:none; align-self:flex-start; }
.chat-blase {
  background:var(--flaeche); border:1px solid var(--linie); border-radius:4px 16px 16px 16px;
  padding:9px 13px 10px; min-width:0; max-width:min(640px, 100%);
  box-shadow:0 1px 2px rgba(15,43,46,.04);
}
.chat-zeile.folgt .chat-blase { border-radius:16px; }
.chat-zeile.eigen { margin-left:auto; justify-content:flex-end; flex-direction:row-reverse; }
.chat-zeile.eigen .chat-blase {
  background:var(--mint-blass); border-color:#C6EFE4; border-radius:16px 4px 16px 16px;
}
.chat-zeile.eigen.folgt .chat-blase { border-radius:16px; }
.chat-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
.chat-meta b { font-size:14px; }
.chat-rolle { font-size:12px; color:var(--matt); }
.chat-verlauf .chat-zeit { font-size:12px; color:var(--matt); }
.chat-text { font-size:15.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-text.abschrift { font-size:14px; color:var(--gedaempft); margin-top:6px; }
.chat-text.abschrift .mini { font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; }
.chat-nr {
  display:inline-block; font-weight:800; color:var(--mint-tief); background:var(--mint-blass);
  border-radius:6px; padding:0 5px; font-variant-numeric:tabular-nums;
}
.chat-zeile.eigen .chat-nr { background:#fff; }
.chat-zurueckgenommen { font-style:italic; color:var(--matt); font-size:14px; }
.chat-mehr {
  border:none; background:none; color:var(--matt); font-size:12px; font-weight:600;
  opacity:0; transition:opacity .15s; padding:4px 6px; align-self:center;
}
.chat-zeile:hover .chat-mehr, .chat-mehr:focus { opacity:1; }
@media (hover:none) { .chat-mehr { opacity:.7; } }

/* Auftragskarte */
.chat-karte {
  display:grid; grid-template-columns:1fr auto; gap:2px 12px; text-align:left; width:100%;
  margin-top:8px; padding:11px 13px; border-radius:12px; border:1.5px solid var(--linie);
  background:var(--flaeche); color:var(--tinte); font:inherit;
}
button.chat-karte:hover { border-color:var(--mint); box-shadow:0 4px 16px rgba(9,210,168,.14); }
.chat-karte-kopf { grid-column:1; font-size:11px; font-weight:800; letter-spacing:.12em;
                   text-transform:uppercase; color:var(--mint-tief); }
.chat-karte-titel { grid-column:1; font-size:15px; font-weight:800; }
.chat-karte-zeile { grid-column:1; font-size:13px; color:var(--gedaempft); }
.chat-status {
  grid-column:2; grid-row:1 / span 3; align-self:center; font-size:12px; font-weight:800;
  border-radius:999px; padding:4px 10px; background:var(--grau-chip); color:var(--gedaempft);
  white-space:nowrap;
}
.chat-status.s-laeuft, .chat-status.s-offen { background:var(--mint-blass); color:var(--mint-tief); }
.chat-status.s-wartet, .chat-status.s-klaerung, .chat-status.s-pausiert
  { background:var(--bernstein-blass); color:var(--bernstein-text); }

/* Sprachnachricht */
.chat-ton { display:flex; align-items:center; gap:10px; min-width:230px; }
.chat-ton-knopf {
  width:36px; height:36px; border-radius:50%; border:none; background:var(--tinte);
  color:#fff; font-size:13px; display:grid; place-items:center; flex:none;
}
.chat-zeile.eigen .chat-ton-knopf { background:var(--mint-tief); }
.chat-welle { display:flex; align-items:center; gap:2px; flex:1; height:26px; }
.chat-welle i { width:3px; border-radius:2px; background:var(--mint-hell); display:block; }
.chat-ton-dauer { font-size:12.5px; color:var(--gedaempft); font-variant-numeric:tabular-nums; }

/* ── Eingabe ── */
.chat-eingabe { padding:10px 22px 16px; background:var(--flaeche); position:relative; }
.chat-feld {
  border:1.5px solid var(--linie); border-radius:16px; background:var(--flaeche);
  box-shadow:0 2px 12px rgba(15,43,46,.05); transition:border-color .15s, box-shadow .15s;
}
.chat-feld:focus-within { border-color:var(--mint); box-shadow:0 4px 20px rgba(9,210,168,.14); }
.chat-feld textarea {
  width:100%; border:none; outline:none; resize:none; background:transparent; color:var(--tinte);
  font:inherit; font-size:16px; line-height:1.45; padding:13px 16px 4px; min-height:48px;
}
.chat-werkzeuge { display:flex; align-items:center; gap:6px; padding:6px 8px 8px; }
.chat-werkzeug {
  border:none; background:transparent; color:var(--gedaempft); font-size:14px; font-weight:700;
  padding:7px 10px; border-radius:9px;
}
.chat-werkzeug:hover { background:var(--grund); color:var(--tinte); }
.chat-tipp { color:var(--matt); margin-right:6px; }
.chat-senden {
  border:none; border-radius:11px; padding:9px 16px; font-size:14.5px; font-weight:800;
  background:var(--mint); color:#fff;
}
.chat-senden:hover { background:var(--mint-dunkel); }
.chat-senden:disabled { background:var(--matt-2); cursor:default; }
.chat-anhaenge { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.chat-anhang {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700;
  background:var(--mint-blass); color:var(--mint-tief); border-radius:999px; padding:5px 6px 5px 11px;
}
.chat-anhang button { border:none; background:#fff; color:var(--gedaempft); width:22px; height:22px;
                      border-radius:50%; font-size:11px; }
.chat-aufnahme {
  display:flex; align-items:center; gap:10px; border:1.5px solid var(--bernstein);
  background:var(--bernstein-blass); border-radius:16px; padding:12px 14px;
}
.chat-rec { width:12px; height:12px; border-radius:50%; background:#D9534F; animation:chatRec 1s infinite; }
@keyframes chatRec { 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { .chat-rec { animation:none; } }
.chat-rec-zeit { font-variant-numeric:tabular-nums; font-weight:700; }

.chat-wahl {
  position:absolute; left:22px; right:22px; bottom:calc(100% - 4px); z-index:5;
  background:var(--flaeche); border:1.5px solid var(--linie); border-radius:16px;
  box-shadow:0 18px 50px rgba(15,43,46,.18); padding:12px; max-width:560px;
}
.chat-wahl-kopf { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.chat-wahl-liste { max-height:280px; overflow-y:auto; margin-top:8px; }
.chat-wahl-eintrag {
  width:100%; border:none; background:none; text-align:left; display:flex; gap:10px;
  align-items:center; padding:8px; border-radius:10px; color:var(--tinte);
}
.chat-wahl-eintrag:hover { background:var(--grund); }
.chat-wahl-eintrag b { display:block; font-size:14.5px; }

/* Willkommen */
.chat-willkommen { display:grid; place-items:center; background:var(--grund); }
.chat-willkommen-inhalt { max-width:440px; text-align:center; padding:30px; display:flex;
                          flex-direction:column; align-items:center; gap:10px; }
.chat-willkommen-titel { font-size:24px; font-weight:800; }
.chat-willkommen p { margin:0; color:var(--gedaempft); line-height:1.55; }

/* ── Dialog ── */
.chat-dunkel { position:fixed; inset:0; background:rgba(8,22,24,.55); z-index:400;
               display:grid; place-items:center; padding:20px; }
.chat-dialog {
  position:relative; width:min(520px, 100%); max-height:86vh; overflow-y:auto;
  background:var(--flaeche); border-radius:20px; padding:22px 22px 18px;
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.chat-dialog-titel { font-size:21px; font-weight:800; margin-bottom:12px; padding-right:40px; }
.chat-dialog-zu { position:absolute; right:14px; top:14px; border:none; background:var(--grund);
                  width:34px; height:34px; border-radius:10px; font-size:14px; color:var(--gedaempft); }
.chat-tabs { display:flex; gap:4px; background:var(--grund); border:1px solid var(--linie);
             border-radius:12px; padding:4px; margin-bottom:12px; }
.chat-tabs button { flex:1; border:none; border-radius:9px; padding:9px; font-size:14px; font-weight:700;
                    background:transparent; color:var(--gedaempft); }
.chat-tabs button.an { background:var(--tinte); color:#fff; }
.chat-dialog .feld { padding:11px 14px; font-size:15px; }
.chat-personen { margin-top:10px; max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.chat-personen.kurz { max-height:220px; }
.chat-person {
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:12px;
  border:none; background:none; text-align:left; width:100%; color:var(--tinte);
}
.chat-person > span:not(.chat-avatar) { flex:1; min-width:0; }
.chat-person b { display:block; font-size:15px; }
button.chat-person:hover, .chat-person.wahl:hover { background:var(--grund); }
.chat-person.wahl { cursor:pointer; }
.chat-person.wahl input { width:18px; height:18px; accent-color:var(--mint); flex:none; }
.chat-dialog-fuss { display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px;
                    border-top:1px solid var(--linie); }

/* Der Melde-Knopf der Meldestelle sitzt unten rechts — im Kanal genau auf
   „Senden". Dort rückt er über das Eingabefeld. */
body:has(.chat) #meldestelle-wurzel { transform:translateY(-92px); }

/* Kanal-Zahl an Knöpfen außerhalb */
.kanalZahl:not(:empty) {
  display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px;
  border-radius:9px; background:var(--mint); color:#fff; font-size:11px; font-weight:800;
}
.schalter button.an .kanalZahl:not(:empty) { background:#fff; color:var(--tinte); }
.kopf-avatar { display:inline-flex; align-items:center; gap:8px; }
.kopf-avatar .chat-avatar { box-shadow:none; }

/* Profilbild im Zugangsblatt */
.profilbild { display:flex; align-items:center; gap:16px; margin-top:6px; }
.profilbild .chat-avatar { box-shadow:0 0 0 3px var(--mint-blass); }

/* ── Schmal: erst die Liste, dann das Gespräch ── */
@media (max-width:820px) {
  .chat { grid-template-columns:minmax(0,1fr); height:100vh; height:100dvh; }
  .chat[data-mobil="gespraech"] .chat-leiste { display:none; }
  .chat[data-mobil="liste"] .chat-gespraech { display:none; }
  .chat-gespraech .chat-zurueck { display:grid; }
  .chat-kopf { padding:10px 12px; }
  .chat-kopf-leute .chat-avatar { display:none; }
  .chat-verlauf { padding:12px 12px 8px; }
  .chat-eingabe { padding:8px 10px 10px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  .chat-tipp { display:none; }
  .chat-wahl { left:10px; right:10px; }
  .chat-blase { max-width:100%; }
}

/* ══ Kanal: Smileys, Reaktionen, @Erwähnungen, Mitteilungen (14.09.2026) ══ */
.chat-spalte { display:flex; flex-direction:column; align-items:flex-start; min-width:0; max-width:min(640px, 100%); }
.chat-zeile.eigen .chat-spalte { align-items:flex-end; }
.chat-spalte .chat-blase { max-width:100%; position:relative; }

/* Reaktionsleiste: am PC beim Überfahren, am Handy nach Antippen der Blase. */
.chat-reagieren {
  position:absolute; top:-20px; right:8px; z-index:3; display:none; align-items:center; gap:1px;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:999px; padding:3px 5px;
  box-shadow:0 8px 24px rgba(15,43,46,.14);
}
.chat-zeile.eigen .chat-reagieren { right:auto; left:8px; }
.chat-zeile:hover .chat-reagieren, .chat-zeile.gewaehlt .chat-reagieren, .chat-reagieren:focus-within { display:flex; }
@media (hover:none) { .chat-zeile:hover:not(.gewaehlt) .chat-reagieren { display:none; } }
.chat-reagieren button {
  border:none; background:none; font-size:19px; line-height:1; width:34px; height:32px; border-radius:50%;
  display:grid; place-items:center; transition:transform .12s;
}
.chat-reagieren button:hover { background:var(--grund); transform:scale(1.18); }
.chat-reagieren button.mehr { font-size:16px; color:var(--gedaempft); font-weight:800; }
.chat-reagieren button.text {
  width:auto; font-size:12.5px; font-weight:700; color:var(--gedaempft); padding:0 10px; border-radius:999px;
}
.chat-reagieren button.text:hover { transform:none; color:var(--bernstein-text); }
.chat-zeile.gewaehlt .chat-blase { border-color:var(--mint); }
@media (prefers-reduced-motion:reduce) { .chat-reagieren button { transition:none; } .chat-reagieren button:hover { transform:none; } }

.chat-reaktionen { display:flex; flex-wrap:wrap; gap:4px; margin-top:-6px; padding:0 10px; position:relative; z-index:1; }
.chat-reaktion {
  display:inline-flex; align-items:center; gap:4px; border:1.5px solid var(--linie); background:var(--flaeche);
  border-radius:999px; padding:1px 8px 1px 6px; font-size:15px; line-height:1.5;
  box-shadow:0 1px 3px rgba(15,43,46,.06);
}
.chat-reaktion b { font-size:12px; font-weight:800; color:var(--gedaempft); font-variant-numeric:tabular-nums; }
.chat-reaktion.ich { background:var(--mint-blass); border-color:var(--mint); }
.chat-reaktion.ich b { color:var(--mint-tief); }
.chat-reaktion:hover { border-color:var(--mint); }

/* Nur Smileys: groß, ohne Blase drumherum. */
.chat-text.gross { font-size:40px; line-height:1.15; letter-spacing:.04em; }
.chat-blase.nur-smiley { background:transparent !important; border-color:transparent !important; box-shadow:none; padding:2px 4px; }
.chat-zeile.gewaehlt .chat-blase.nur-smiley { border-color:var(--mint) !important; }

/* @Erwähnung im Text, und die Nachricht, die mich nennt. */
.chat-at { font-weight:800; color:var(--mint-tief); }
.chat-at.ich { background:var(--bernstein-blass); color:var(--bernstein-text); border-radius:6px; padding:0 4px; }
.chat-blase.mich { box-shadow:inset 3px 0 0 var(--bernstein), 0 1px 2px rgba(15,43,46,.04); }

/* Abgelaufene Sprachnachricht */
.chat-ton-weg {
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--gedaempft);
  background:var(--grau-chip); border-radius:999px; padding:4px 11px;
}
.chat-rec-hinweis { color:var(--bernstein-text); }

/* Smiley-Auswahl */
.chat-werkzeug.an { background:var(--mint-blass); color:var(--mint-tief); }
.chat-smiley-reiter { display:flex; gap:4px; overflow-x:auto; padding-bottom:6px; border-bottom:1px solid var(--linie-2); }
.chat-smiley-reiter button {
  border:none; background:none; border-radius:9px; padding:6px 11px; font-size:13px; font-weight:700;
  color:var(--gedaempft); white-space:nowrap;
}
.chat-smiley-reiter button.an { background:var(--tinte); color:#fff; }
.chat-smiley-raster {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:2px;
  max-height:228px; overflow-y:auto; padding-top:8px;
}
.chat-smiley-raster button {
  border:none; background:none; font-size:26px; line-height:1; height:44px; border-radius:12px;
  display:grid; place-items:center; transition:transform .1s;
}
.chat-smiley-raster button:hover, .chat-smiley-raster button:focus-visible { background:var(--mint-blass); transform:scale(1.12); }
@media (prefers-reduced-motion:reduce) { .chat-smiley-raster button, .chat-smiley-raster button:hover { transition:none; transform:none; } }

/* @-Auswahl */
.chat-at-wahl { padding:6px; max-width:380px; }
.chat-at-wahl .chat-wahl-eintrag > span:not(.chat-avatar):not(.chat-at-taste) { flex:1; min-width:0; }
.chat-at-wahl .chat-wahl-eintrag.erst { background:var(--grund); }
.chat-at-taste {
  border:1px solid var(--linie); border-radius:6px; padding:1px 6px; font-size:11px; color:var(--matt); flex:none;
}

/* Glocke im Kopf */
.chat-glocke {
  display:inline-flex; align-items:center; gap:6px; margin-right:12px;
  border:1.5px solid var(--linie); background:var(--flaeche); color:var(--gedaempft);
  border-radius:999px; padding:5px 12px 5px 9px; font-size:13px; font-weight:700; white-space:nowrap;
}
.chat-glocke.an { color:var(--mint-tief); border-color:#C6EFE4; background:var(--mint-blass); }
.chat-glocke:hover { border-color:var(--mint); }

/* Mitteilungen in der Leiste */
.chat-push {
  margin:0 12px 10px; display:flex; align-items:center; gap:10px; text-align:left; width:calc(100% - 24px);
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:#E8F2F0;
  border-radius:14px; padding:10px 12px;
}
button.chat-push.aus { border-color:rgba(9,210,168,.55); background:rgba(9,210,168,.12); }
button.chat-push.aus:hover { background:rgba(9,210,168,.2); }
.chat-push-symbol { font-size:20px; flex:none; }
.chat-push-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.chat-push-text b { font-size:13.5px; }
.chat-push-text .mini { color:#9DBDBA; line-height:1.35; }
.chat-push-knoepfe { display:flex; gap:4px; flex:none; }
.chat-push-knoepfe button {
  border:none; background:rgba(255,255,255,.1); color:#E8F2F0; border-radius:8px; padding:5px 9px;
  font-size:12px; font-weight:700;
}
.chat-push-knoepfe button:hover { background:rgba(255,255,255,.18); }

@media (max-width:820px) {
  .chat-glocke span { display:none; }
  .chat-glocke { padding:5px 9px; margin-right:4px; }
  .chat-reagieren { top:-40px; }
  .chat-reagieren button { width:40px; height:38px; font-size:22px; }
  .chat-rec-hinweis { display:none; }
  .chat-werkzeuge { flex-wrap:wrap; }
}

/* ══ Kanal: Fotos, Videos, Markieren (14.09.2026) ══ */
.chat-bild {
  display:block; max-width:100%; max-height:380px; margin-top:6px; padding:0; border:none; border-radius:12px;
  overflow:hidden; background:var(--kachel); cursor:zoom-in;
}
.chat-bild img { width:100%; height:100%; object-fit:cover; display:block; }
.chat-bild:hover img { filter:brightness(.96); }
.chat-bezug {
  display:flex; align-items:center; gap:6px; width:100%; text-align:left; margin:2px 0 4px;
  border:none; border-left:3px solid var(--bernstein); background:var(--bernstein-blass); color:var(--bernstein-text);
  border-radius:6px; padding:4px 9px; font-size:12.5px; font-weight:700;
}
.chat-zeile.eigen .chat-bezug { background:#fff; }
.chat-zeile.aufblitzen .chat-blase { box-shadow:0 0 0 3px var(--bernstein); transition:box-shadow .2s; }
.chat-gespraech.ziehen .chat-verlauf { outline:3px dashed var(--mint); outline-offset:-10px; background:var(--mint-tipp); }

/* Senden mit Fortschritt */
.chat-hoch {
  display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; font-weight:700; color:var(--mint-tief);
}
.chat-hoch i { flex:1; height:6px; border-radius:3px; background:var(--mint-blass); overflow:hidden; display:block; }
.chat-hoch b { display:block; height:100%; background:var(--mint); transition:width .2s; }
.chat-hoch-zahl { font-variant-numeric:tabular-nums; min-width:40px; text-align:right; }

/* Großansicht */
.chat-ansicht-grund { background:rgba(6,18,20,.86); }
.chat-ansicht {
  position:relative; width:min(1000px, 100%); max-height:94vh; display:flex; flex-direction:column; gap:10px;
  background:var(--flaeche); border-radius:18px; padding:12px; box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.chat-ansicht-kopf { display:flex; align-items:center; gap:10px; padding:2px 44px 2px 4px; }
.chat-ansicht-kopf > span { display:flex; flex-direction:column; }
.chat-ansicht-kopf .chat-dialog-zu { top:10px; right:10px; }
.chat-ansicht img { max-width:100%; max-height:calc(94vh - 170px); object-fit:contain; border-radius:10px; background:var(--grund); align-self:center; }
.chat-ansicht-text { font-size:15px; padding:0 6px; }
.chat-ansicht-fuss { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.chat-ansicht-fuss a { text-decoration:none; display:inline-flex; align-items:center; }

/* @-Auswahl mit allen */
.chat-at-kopf { font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--matt); padding:4px 8px 6px; }
.chat-at-liste { max-height:min(320px, 42vh); overflow-y:auto; }
.chat-at-wahl .chat-wahl-eintrag.fremd b { color:var(--gedaempft); }
.chat-at-wahl .chat-wahl-eintrag.fremd .chat-avatar { opacity:.55; }
.chat-at-wahl .chat-wahl-eintrag.fremd .mini { color:var(--bernstein-text); }

/* Kanal in der Seitenleiste von Büro und Admin */
.seitenleiste .seitenleiste-kanal {
  display:flex; align-items:center; justify-content:space-between; margin:2px 0 10px;
  background:rgba(9,210,168,.14); color:#E8F2F0; font-weight:700;
}
.seitenleiste .seitenleiste-kanal:hover { background:rgba(9,210,168,.24); }

/* ── Medienwerk: Foto markieren ── */
body.mw-offen { overflow:hidden; }
body.mw-offen #meldestelle-wurzel { display:none; }
.mw {
  position:fixed; inset:0; z-index:600; background:#0b1d1f; color:#fff; display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.mw-kopf { display:flex; align-items:center; gap:10px; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); }
.mw-titel { flex:1; min-width:0; text-align:center; font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mw-platz { width:42px; }
.mw-knopf {
  width:42px; height:42px; border:none; border-radius:12px; background:rgba(255,255,255,.1); color:#fff;
  font-size:18px; display:grid; place-items:center;
}
.mw-knopf:hover { background:rgba(255,255,255,.18); }
.mw-knopf:disabled { opacity:.35; }
.mw-buehne { flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; padding:0 8px; }
.mw-leinwand { touch-action:none; border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.4); cursor:crosshair; }
.mw-tipp { position:absolute; left:0; right:0; bottom:6px; text-align:center; font-size:12.5px; color:#9DBDBA; pointer-events:none; }
.mw-werkzeuge { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; padding:10px 12px 4px; }
.mw-gruppe { display:flex; align-items:center; gap:6px; }
.mw-werkzeug {
  min-width:54px; height:52px; border:none; border-radius:13px; background:rgba(255,255,255,.08); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:0 8px;
}
.mw-werkzeug span { font-size:20px; line-height:1; font-weight:800; }
.mw-werkzeug small { font-size:10.5px; color:#9DBDBA; font-weight:700; }
.mw-werkzeug.an { background:var(--mint); }
.mw-werkzeug.an small { color:#fff; }
.mw-farbe {
  width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.2); background:var(--f);
  transition:transform .12s;
}
.mw-farbe.an { border-color:#fff; transform:scale(1.15); box-shadow:0 0 0 2px var(--mint); }
@media (prefers-reduced-motion:reduce) { .mw-farbe { transition:none; } }
.mw-fuss { display:flex; gap:8px; padding:10px 12px 14px; }
.mw-text {
  flex:1; min-width:0; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff;
  border-radius:14px; padding:12px 14px; font:inherit; font-size:16px; outline:none;
}
.mw-text:focus { border-color:var(--mint); }
.mw-text::placeholder { color:#8FB0AE; }
.mw-senden { border:none; border-radius:14px; padding:0 18px; background:var(--mint); color:#fff; font-size:15.5px; font-weight:800; white-space:nowrap; }
.mw-senden:disabled { background:var(--gedaempft); }
@media (max-width:820px) {
  .mw-werkzeuge { gap:8px 12px; }
  .mw-werkzeug { min-width:46px; height:48px; padding:0 4px; }
  .mw-farbe { width:30px; height:30px; }
  .chat-ansicht { padding:8px; border-radius:14px; }
  .chat-ansicht img { max-height:calc(94vh - 190px); }
}
/* Großansicht und Dialoge im Kanal liegen über dem Melde-Knopf. */
body:has(.chat-dunkel) #meldestelle-wurzel { display:none; }

/* ══ Kanal: Anheften, Suche, Meldungen von WERT (15.09.2026) ══ */
.chat-pins {
  display:flex; align-items:flex-start; gap:8px; padding:8px 22px; background:var(--bernstein-blass);
  border-bottom:1px solid #F1DDB5;
}
.chat-pins-liste { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-pin {
  display:flex; align-items:center; gap:8px; width:100%; min-width:0; text-align:left; border:none; background:none;
  padding:4px 6px; border-radius:8px; color:var(--tinte); font:inherit; font-size:14px;
}
.chat-pin:hover { background:rgba(232,163,61,.14); }
.chat-pin-zeichen { flex:none; font-size:15px; }
.chat-pin-text { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-pins.offen .chat-pin-text { white-space:normal; }
.chat-pin-text b { font-weight:800; margin-right:4px; }
.chat-pins-mehr {
  flex:none; border:1.5px solid #E9C88C; background:var(--flaeche); color:var(--bernstein-text); border-radius:999px;
  padding:4px 11px; font-size:12.5px; font-weight:800; margin-top:2px; white-space:nowrap;
}
.chat-pin-marke { font-size:12px; margin-left:2px; }

/* Meldung von WERT: in der Mitte, ohne Profilbild */
.chat-zeile.wert-meldung { justify-content:center; margin-left:auto; margin-right:auto; max-width:620px; }
.chat-zeile.wert-meldung .chat-spalte { width:100%; align-items:stretch; }
.chat-blase.chat-meldung {
  background:var(--mint-tipp); border:1px dashed #9FD8CD; border-radius:14px; box-shadow:none;
}
.chat-meldung-von {
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px !important; font-weight:800;
  letter-spacing:.12em; color:var(--mint-tief);
}
.chat-meldung-von::before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--mint); display:inline-block;
}
.chat-meldung .chat-text { font-size:15px; }

/* Suchtreffer in der Leiste */
.chat-treffer .chat-eintrag-text { gap:3px; }
.chat-treffer-text {
  font-size:13px; line-height:1.4; color:#C9DEDB; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.chat-treffer-wer { color:#8FB0AE; font-weight:700; margin-right:3px; }
.chat-treffer mark { background:rgba(9,210,168,.32); color:#fff; border-radius:3px; padding:0 2px; }

@media (max-width:820px) {
  .chat-pins { padding:6px 12px; }
  .chat-zeile.wert-meldung { max-width:100%; }
}

/* Die Uhr beim Anstempeln (15.09.2026): Wanduhr statt Stoppuhr. */
.uhrzeile { display:flex; align-items:center; gap:14px; margin-top:16px; }
.uhrtext { flex:1; min-width:0; }
.uhr-oben { font-size:17px; font-weight:800; color:var(--tinte); font-variant-numeric:tabular-nums; }
.uhrtext .uhr.gross { margin-top:2px; font-size:15px; }
.zifferblatt { width:92px; height:92px; flex:none; }
.zifferblatt.klein { width:58px; height:58px; }
.zifferblatt .blatt { fill:var(--flaeche); stroke:var(--linie); stroke-width:1.5; }
.zifferblatt .bogen { fill:none; stroke:var(--mint); stroke-width:5; stroke-linecap:round; opacity:.55; }
.zifferblatt .bogen.pause { stroke:var(--bernstein); }
.zifferblatt .strich { stroke:var(--matt-2); stroke-width:1.4; stroke-linecap:round; }
.zifferblatt .strich.viertel { stroke:var(--gedaempft); stroke-width:2.4; }
.zifferblatt .zeiger { stroke:var(--tinte); stroke-linecap:round; transform-box:view-box;
  transform-origin:50px 50px; transition:transform 30s linear; }
.zifferblatt .stunde { stroke-width:4.2; }
.zifferblatt .minute { stroke-width:2.6; }
.zifferblatt .nabe { fill:var(--mint-tief); }
@media (prefers-reduced-motion:reduce) { .zifferblatt .zeiger { transition:none; } }

/* Nacharbeitungszeit (15.09.2026): sichtbar getrennt von der Arbeitszeit. */
.nacharbeit-hinweis { margin-top:14px; background:var(--grau-chip); border-radius:12px;
  padding:12px 14px; font-size:15px; line-height:1.45; color:var(--tinte); }
.nacharbeit-block { margin-top:28px; padding-top:18px; border-top:1.5px dashed var(--linie); }
.nacharbeit-block .reihe { display:flex; align-items:center; gap:10px; }

/* Der kleine Kreisel, wenn WERT gerade etwas liest (16.09.2026). */
.lader { width:20px; height:20px; flex:none; border-radius:50%;
  border:3px solid var(--linie); border-top-color:var(--mint);
  animation:laderdreht .9s linear infinite; }
@keyframes laderdreht { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .lader { animation:none; } }

/* „WERT arbeitet gerade" — Schleier ueber allem, Klicks kommen nicht durch. */
.arbeitet-schleier { position:fixed; inset:0; z-index:9000; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(15,43,46,.34); backdrop-filter:blur(2px); }
.arbeitet-karte { display:flex; gap:16px; align-items:center; max-width:420px;
  background:var(--flaeche); border-radius:18px; padding:20px 24px;
  box-shadow:0 18px 50px rgba(6,16,17,.28); }
.arbeitet-was { font-size:17px; font-weight:800; color:var(--tinte); }
.lader.gross { width:34px; height:34px; border-width:4px; }

/* Der Zustand eines Auftrags in „Meine Woche" (16.09.2026). */
.zustandchip { font-size:12.5px; font-weight:800; border-radius:999px;
  padding:2px 9px; letter-spacing:.02em; white-space:nowrap; }

/* Ein Blatt, das schon offen ist, faehrt beim Neuzeichnen nicht noch einmal
   ein — sonst wackelt es bei jedem Nachladen (16.09.2026). */
.blatt.still { animation:none; }

/* „Zu verrechnen" oben in der Abrechnung (17.09.2026). */
.vgruppe { border:1px solid var(--linie); border-radius:14px; padding:12px 14px; margin-top:12px; }
.vgruppe-kopf { display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.vkarte-verrechnen { display:block; width:100%; text-align:left; background:var(--flaeche);
  border:1px solid var(--linie-2); border-radius:12px; padding:10px 12px; margin-top:8px;
  font:inherit; color:inherit; }
.vkarte-verrechnen.wartet { cursor:pointer; }
.vkarte-verrechnen.wartet:hover { border-color:var(--bernstein); }
.vposten-liste { margin-top:8px; border-top:1px dashed var(--linie); padding-top:6px; }
.vposten { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:baseline;
  padding:2px 0; font-size:14.5px; }
.vposten .mini { min-width:90px; text-align:right; }
.vposten span:last-child { min-width:88px; text-align:right; }

/* „Bekommst du Bescheid?" — die Karte auf der Startseite (17.09.2026). */
.mitteilungskarte { position:relative; display:grid; gap:4px 12px; margin-top:16px;
  grid-template-columns:auto 1fr; align-items:start;
  background:var(--flaeche); border:1.5px solid var(--mint-hell); border-radius:16px;
  padding:14px 16px; }
.mitteilungskarte .zeichen { font-size:22px; line-height:1.1; }
.mitteilungskarte b { display:block; font-size:16px; padding-right:26px; }
.mitteilungskarte .mini { display:block; margin-top:3px; }
.mitteilungskarte > div { min-width:0; }
.mitteilungskarte .hauptknopf { grid-column:1 / -1; width:100%; margin-top:10px; }
.mitteilungskarte .knopf-mini { position:absolute; top:8px; right:10px;
  border:0; background:none; font-size:15px; color:var(--matt); padding:4px 6px; cursor:pointer; }


/* ── Tagesseite im Büro ────────────────────────────────────────────────
   „Was ist heute zu tun?" — die Seite, die sich der Werkstattleitung als
   Erstes öffnet (Marlen, 17.09.2026). Reihenfolge nach Handlung, nicht nach
   Datenherkunft; leere Blöcke fallen ganz weg. */
.tagkopf { display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap; margin-bottom:6px; }
.tagzahlen { display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px;
  color:var(--gedaempft); }
.tagzahlen b { display:block; font-size:21px; color:var(--tinte); font-weight:800;
  font-variant-numeric:tabular-nums; line-height:1.15; }

.tagblock { background:var(--flaeche); border:1px solid var(--linie); border-radius:16px;
  padding:16px 18px 8px; margin-top:16px; box-shadow:var(--schatten); }
.tagblock.wichtig { border-color:var(--bernstein); background:var(--bernstein-blass); }
.tagblock-kopf { display:flex; align-items:center; gap:9px; font-weight:800; font-size:16px;
  margin-bottom:6px; }
.tagblock-kopf .mini { font-weight:600; }

.tagliste { display:flex; flex-direction:column; }
.tagzeile { display:flex; justify-content:space-between; align-items:center; gap:14px;
  width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--linie-2);
  padding:12px 2px; font:inherit; color:inherit; cursor:pointer; }
.tagblock.wichtig .tagzeile { border-top-color:#EFE0C0; }
.tagzeile:first-child { border-top:0; }
.tagzeile:hover { background:var(--mint-tipp); border-radius:10px; }
.tagblock.wichtig .tagzeile:hover { background:#FDF7EA; }
.tagzeile b { font-size:15.5px; }
.tagrechts { flex:0 0 auto; font-size:13.5px; font-weight:700; color:var(--mint-tief);
  white-space:nowrap; }
.tagrechts.warnung { color:var(--bernstein-text); }
.tagmehr { background:none; border:0; color:var(--mint-tief); font:inherit; font-weight:700;
  font-size:13.5px; padding:10px 2px; cursor:pointer; text-align:left; }

@media (max-width: 720px) {
  .tagkopf { align-items:flex-start; }
  .tagzahlen { gap:14px; }
  .tagzeile { align-items:flex-start; }
}


/* ── Feierabend einsprechen ────────────────────────────────────────────
   Steht oben auf der Nacherfassung. Beim Zuhoeren pulst der Rand leicht -
   sonst weiss niemand, ob das Mikrofon wirklich laeuft. */
.feierabend { position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:4px 12px; align-items:start; margin:14px 0 4px;
  background:var(--flaeche); border:1.5px solid var(--mint-hell); border-radius:16px;
  padding:14px 16px; }
.feierabend .zeichen { font-size:22px; line-height:1.1; }
.feierabend b { display:block; font-size:16px; padding-right:26px; }
.feierabend .mini { display:block; margin-top:3px; }
.feierabend > div { min-width:0; }
.feierabend .hauptknopf { grid-column:1 / -1; width:100%; margin-top:10px; }
.feierabend .knopf-mini { position:absolute; top:8px; right:10px; border:0;
  background:none; font-size:15px; color:var(--matt); padding:4px 6px; cursor:pointer; }
.feierabend.laeuft { border-color:var(--mint); animation:feierabend-puls 1.6s ease-in-out infinite; }
.feierabend.fertig { border-color:var(--mint); background:var(--mint-blass); }
@keyframes feierabend-puls {
  0%, 100% { box-shadow:0 0 0 0 rgba(9,210,168,.30); }
  50%      { box-shadow:0 0 0 7px rgba(9,210,168,0); }
}
@media (prefers-reduced-motion: reduce) {
  .feierabend.laeuft { animation:none; }
}


/* ── Wochenplanung ────────────────────────────────────────────────────── */
.planleiste { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 4px; }
.planzeitraum { font-weight:800; font-size:15px; margin-left:6px; }

.planwarnung { background:var(--bernstein-blass); border:1.5px solid var(--bernstein);
  border-radius:14px; padding:12px 16px; margin-top:14px; }
.planwarnung b { color:var(--bernstein-text); display:block; margin-bottom:4px; }

.plantafel { display:grid; gap:1px; background:var(--linie); border:1px solid var(--linie);
  border-radius:14px; overflow-x:auto; margin-top:10px; }
.planzeile { display:grid; grid-template-columns:subgrid; grid-column:1 / -1; gap:1px; }
.planzeile.kopf .plantag { background:var(--grund); }
.planwer { background:var(--flaeche); padding:10px 12px; position:sticky; left:0; z-index:1;
  border-right:1px solid var(--linie); }
.planwer b { font-size:14.5px; }
.planwer .mini { display:block; }

.plantag { background:var(--flaeche); padding:8px 10px; text-align:center; }
.plantag .wtag { display:block; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gedaempft); }
.plantag .tzahl { display:block; font-size:14px; font-weight:700; }
.plantag.heute { background:var(--mint-blass); }
.plantag.heute .wtag, .plantag.heute .tzahl { color:var(--mint-tief); }

.planzelle { background:var(--flaeche); padding:6px; display:flex; flex-direction:column;
  gap:5px; min-height:52px; }
.planzelle.frei { background:var(--linie-2); }
.planzelle.warnung { background:var(--bernstein-blass); }

.plankarte { display:block; width:100%; text-align:left; border:0; border-left:3px solid var(--mint);
  background:var(--mint-blass); border-radius:8px; padding:5px 7px; cursor:pointer; font:inherit; }
.plankarte:hover { filter:brightness(.97); }
.plankarte .nr { display:block; font-size:11px; font-weight:800; color:var(--mint-tief);
  font-variant-numeric:tabular-nums; }
.plankarte .was { display:block; font-size:12px; line-height:1.25; }
.plankarte.eilt { border-left-color:var(--bernstein); }
.plankarte.doppelt { border-left-color:#C0483A; background:#FBEDEB; }

.planoffen { display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; background:var(--flaeche); border:1px solid var(--linie);
  border-radius:12px; padding:12px 14px; margin-bottom:8px; }
.planfelder { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.planfelder .feld { min-height:42px; }

@media (max-width: 900px) {
  .plantafel { font-size:13px; }
  .planwer { position:static; }
}

/* Meldung #27 (07.10.2026): In der aufgeklappten Auswahlliste schob die
   begrenzte Hoehe (max-height) die Reihen auf ihre Mindesthoehe zusammen —
   zweizeilige Maschinennamen liefen ueber die naechste Reihe. Reihen behalten
   jetzt ihre volle Hoehe, die Liste rollt stattdessen. */
.auswahlliste > .reihe { flex:none; }