/* Betriebsassistent: Gestaltung nach masdemas-Standard fuer interne Werkzeuge
   (dunkelblaue Seitenleiste, beige Seite, weisse Karten, Orange als Akzent).
   Grundlage: Tools/42_podcast-maschine/app/oberflaeche/stil.css, ergaenzt um Handy-Navigation.
   Schrift Inter, lokal. Text immer schwarz, Bedeutung nur als Flaeche, nie als Akzent-Rahmen. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('inter-latin.woff2') format('woff2');
}

:root {
  --seite: #f2e9de;
  --leiste: #0f172a;
  --karte: #ffffff;
  --karte-2: #faf6f0;
  --linie: #e6ddd0;
  --linie-2: #d8cdbb;
  --text: #000;
  --akzent: #f59e0b;
  --akzent-hell: #fdf0d5;
  --rot: #b3361f;
  --rot-hell: #f9dcd4;
  --gruen: #1f7a45;
  --gelb: #fde7b0;
  --hellblau: #d5e5f6;
  --hellgruen: #cdeedb;
  --hellgrau: #ebe6de;
  --lila: #e6dcf5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--seite); color: var(--text); line-height: 1.55; min-height: 100vh;
}
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--karte); padding: 8px 12px; border-radius: 6px; }
.skip-link:focus { left: 8px; z-index: 10; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px;
  padding: 10px 16px; border-radius: 8px; border: 1px solid transparent;
  font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; text-decoration: none; color: #000;
}
.btn-primaer { background: var(--akzent); color: #000; }
.btn-primaer:hover { background: #f8bb4c; }
.btn-leise { background: var(--karte); border-color: var(--linie-2); color: #000; }
.btn-leise:hover { background: var(--karte-2); }
.btn-gefahr { background: var(--karte); border-color: var(--rot); color: var(--rot); }
.btn-gefahr:hover { background: var(--rot-hell); }
.btn-ki { background: var(--leiste); color: #fff; }
.btn-ki:hover { background: var(--akzent); color: #000; }
.btn-dunkel { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; width: 100%; }
.btn-dunkel:hover { background: rgba(255,255,255,0.08); }
.btn-klein { min-height: 34px; padding: 6px 12px; font-size: 0.85rem; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--akzent); outline-offset: 2px;
}

/* Formulare */
label { display: block; font-size: 0.88rem; font-weight: 600; margin: 12px 0 5px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 1rem; color: #000;
  background: var(--karte); border: 1px solid var(--linie-2); border-radius: 8px; padding: 9px 12px;
}
input[type="checkbox"] { width: 20px; height: 20px; padding: 0; accent-color: var(--leiste); flex: none; }
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
textarea.gross { min-height: 200px; }
.feldreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.haken { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-weight: 600; font-size: 0.95rem; cursor: pointer; }
.hinweis { font-size: 0.88rem; margin-top: 8px; }
.meldung { margin-top: 10px; font-size: 0.92rem; min-height: 1.4em; }
.meldung.fehler { color: var(--rot); font-weight: 600; }
.meldung.ok { color: var(--gruen); font-weight: 600; }

/* Anmeldung: Gestaltung aus overlay-hell.css (Standard-Maske), hier nur der Zurueck-Link */
.pw-link { background: transparent; border: none; color: #000; font-size: .82rem; cursor: pointer;
           font-family: inherit; text-decoration: underline; padding: .3rem; margin-top: .75rem; }
.pw-link:hover { text-decoration: none; }

/* Aufbau */
.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.seitenleiste { background: var(--leiste); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 4px;
                position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.seitenleiste-logo { height: 25px; width: auto; align-self: flex-start; }
.seitenleiste-titel { font-weight: 800; font-size: 1.1rem; margin: 10px 0 0; }
.seitenleiste-betrieb { font-size: 0.85rem; color: #fff; margin-bottom: 14px; }
.seitenleiste-label { color: #fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 10px 0 6px; }
.seitenleiste select { margin-bottom: 10px; }
.navigation { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.navigation button {
  width: 100%; text-align: left; background: transparent; border: 0; color: #fff; display: flex; align-items: center; gap: 10px;
  font: inherit; font-size: 0.95rem; padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.navigation button:hover { background: rgba(255,255,255,0.08); }
.navigation button[aria-current="page"] { background: var(--akzent); color: #000; font-weight: 700; }
.navigation svg, .unten-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.zahl { margin-left: auto; background: var(--akzent); color: #000; border-radius: 999px; font-size: 0.75rem; font-weight: 800; padding: 1px 8px; }
.navigation button[aria-current="page"] .zahl { background: #fff; }
/* Nur für Screenreader sichtbar */
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* Testrolle: eingeklappt eine Zeile, aufgeklappt ein Fenster NEBEN der Leiste (Desktop).
   So wird die Seitenleiste nie höher, sie darf nie scrollen (Vorgabe User 26.10.2026). */
.testrolle { margin-top: 12px; padding: 10px 12px 8px; border-radius: 10px; background: rgba(255,255,255,0.07); }
.testrolle-label { color: #fff; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px;
                   display: flex; align-items: center; gap: 8px; }
.testrolle select { margin-bottom: 4px; padding: 7px 10px; }
.testrolle-hinweis { font-size: 0.78rem; color: #fff; margin: 4px 0 2px; }
.testrolle-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 0.82rem; font-weight: 700; color: #fff;
                  text-decoration: underline; cursor: pointer; text-align: left; }
.testrolle-link:hover { color: var(--akzent); }
.testrolle-link:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
/* Fußzeile in einer Zeile: Adresse gekürzt, daneben Abmelden */
.seitenleiste-fuss { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 8px; }
.seitenleiste-fuss .btn-dunkel { width: auto; flex: none; }
.angemeldet { flex: 1; min-width: 0; font-size: 0.78rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unten-nav { display: none; }

.inhalt { padding: 28px 32px 90px; max-width: 1100px; min-width: 0; width: 100%; }
.inhalt:focus { outline: none; }
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
        padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--linie); }
.kopf h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.kopf p { font-size: 0.95rem; margin-top: 4px; }
.kopf-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.zurueck-link { background: none; border: 0; font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: 8px; text-decoration: underline; color: #000; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; min-width: 0; }
.karte h2 { font-size: 1.08rem; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.karte h3 { font-size: 0.95rem; font-weight: 700; margin-top: 14px; }
.karte p { white-space: pre-wrap; }
.karte-aktionen { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.karte-ki { background: var(--leiste); color: #fff; border-color: var(--leiste); }
.leer { background: var(--karte); border: 1px dashed var(--linie-2); border-radius: 12px; padding: 18px; font-size: 0.95rem; }
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.raster-2 > .karte { margin-bottom: 0; }
.abstand-oben { margin-top: 18px; }

/* Heute: Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; text-align: left;
          font: inherit; color: #000; cursor: pointer; }
.kachel:hover { background: var(--karte-2); }
.kachel b { display: block; font-size: 1.8rem; font-weight: 800; line-height: 1.1; }
.kachel span { font-size: 0.9rem; }
.kachel-wichtig { background: var(--leiste); border-color: var(--leiste); color: #fff; }
.kachel-wichtig:hover { background: #1e293b; }

/* Listen */
.liste { display: flex; flex-direction: column; gap: 8px; }
.zeile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; background: var(--karte);
         border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; }
.zeile-titel { font-weight: 700; font-size: 1rem; }
.zeile-unter { font-size: 0.86rem; margin-top: 2px; }
.zeile-etiketten { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.zeile-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.zeile-wichtig { background: var(--leiste); border-color: var(--leiste); color: #fff; }

.filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filter button { font: inherit; font-size: 0.86rem; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linie-2);
                 background: var(--karte); cursor: pointer; color: #000; }
.filter button[aria-pressed="true"] { background: var(--leiste); color: #fff; border-color: var(--leiste); }

/* Etiketten: Bedeutung als Flaeche, Schrift schwarz, immer mit Text */
.etikett { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; background: var(--hellgrau); color: #000; }
.etikett-dringend { background: var(--rot-hell); }
.etikett-rueckruf { background: var(--gelb); }
.etikett-test { background: var(--gelb); border: 1px solid var(--akzent); }
.etikett-ki { background: var(--lila); }
.etikett-stufe-anfrage { background: var(--gelb); }
.etikett-stufe-besichtigung, .etikett-stufe-angebot { background: var(--hellblau); }
.etikett-stufe-auftrag, .etikett-stufe-ausfuehrung { background: var(--akzent-hell); }
.etikett-stufe-abschluss { background: var(--hellgruen); }
.etikett-status-entwurf, .etikett-status-geplant { background: var(--gelb); }
.etikett-status-freigegeben, .etikett-status-gesendet, .etikett-status-versendet, .etikett-status-angenommen { background: var(--hellgruen); }
.etikett-status-verworfen, .etikett-status-abgelehnt { background: var(--hellgrau); }

/* Stufenleiste eines Auftrags */
.stufen { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 4px 0 14px; }
.stufen li { font-size: 0.78rem; font-weight: 600; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--karte); border: 1px solid var(--linie); }
.stufen li.erledigt { background: var(--hellgrau); }
.stufen li.aktuell { background: var(--akzent); border-color: var(--akzent); font-weight: 800; }

/* Tabellen */
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); }
.tabelle th, .tabelle td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); font-size: 0.92rem; vertical-align: top; }
.tabelle th { background: var(--karte-2); font-weight: 700; font-size: 0.82rem; }
.tabelle td.zahl-spalte, .tabelle th.zahl-spalte { text-align: right; white-space: nowrap; }
.tabelle tr.summe td { font-weight: 800; border-bottom: 0; }
.tabelle input { padding: 6px 8px; font-size: 0.92rem; }
.tabelle input.menge { width: 90px; text-align: right; }
.tabelle .gesagt { font-size: 0.8rem; margin-top: 3px; }

/* Tagebuch und Verlauf */
.eintrag { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: 0.93rem; }
.eintrag:last-child { border-bottom: 0; }
.eintrag-zeit { font-size: 0.8rem; font-weight: 600; }
.eintrag-hinweis { background: var(--rot-hell); border-radius: 8px; padding: 10px; border-bottom: 0; margin: 4px 0; }
.vorschau-eintrag { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linie); }

.postausgang { border-bottom: 1px solid var(--linie); padding: 8px 0; }
.postausgang:last-child { border-bottom: 0; }
.postausgang summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; }
.nachricht-text { white-space: pre-wrap; font-size: 0.92rem; background: var(--karte-2); border-radius: 8px; padding: 12px; margin-top: 8px; }
.ki-hinweis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.86rem; margin-top: 8px; }
.infokasten { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; margin-top: 10px; }
.infokasten-warn { background: var(--rot-hell); }
.karte .infokasten { background: var(--karte-2); border-color: transparent; }
.karte .infokasten-warn { background: var(--rot-hell); }
/* Meldungen in dunklen Boxen: reines Weiß (Grün und Rot wären dort nicht lesbar) */
.zeile-wichtig .meldung, .karte-ki .meldung, .kachel-wichtig .meldung { color: #fff; }

/* Onboarding */
.wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.wahl button { text-align: left; font: inherit; color: #000; background: var(--karte); border: 1px solid var(--linie-2); border-radius: 12px; padding: 16px; cursor: pointer; }
.wahl button:hover { background: var(--karte-2); }
.wahl button[aria-pressed="true"] { background: var(--akzent-hell); border-color: var(--akzent); }
.wahl b { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.wahl span { font-size: 0.88rem; }
.schrittzahl { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }

/* Kalender, Ansicht Monat: weiche, abgerundete Tagesfelder mit Abstand statt Gitterlinien,
   Einträge als runde Flächen mit Farbpunkt. Heute als orangefarbener Kreis, der gewählte Tag
   hebt sich mit einem weichen Schatten ab. Bedeutung immer als Fläche, Schrift schwarz. */
.umschalter { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 14px; background: var(--hellgrau); border-radius: 999px; }
.umschalter button { font: inherit; font-size: 0.88rem; font-weight: 700; color: #000; background: transparent; border: 0;
                     border-radius: 999px; padding: 7px 18px; cursor: pointer; }
.umschalter button[aria-pressed="true"] { background: var(--karte); box-shadow: 0 2px 8px -3px rgba(15, 23, 42, .25); }
.umschalter button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.karte-monat { padding: 20px; border-radius: 18px; }
.monat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.monat-kopf h2 { font-size: 1.15rem; }
.monat-titel { font-size: 1.5rem !important; font-weight: 800; letter-spacing: -0.02em; }
.monat-titel span { font-weight: 400; }
.monat-blaettern { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rund { width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 999px; font-size: 1.15rem; line-height: 1; }
.pille { border-radius: 999px; padding: 6px 16px; }
.monat-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wochentag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-align: left; padding: 0 8px 4px; }
.mtag { min-height: 116px; padding: 6px; border-radius: 14px; background: var(--karte-2);
        display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: background .15s, box-shadow .15s; }
.mtag:hover { background: #f5eee4; }
.mtag-fremd { background: transparent; }
.mtag-fremd .mtag-zahl { font-weight: 400; }
.mtag-heute { background: var(--karte-2); }
.mtag-gewaehlt { background: var(--karte); box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .35), 0 0 0 1px var(--linie); }
.mtag-zahl { align-self: flex-start; font: inherit; font-size: 0.88rem; font-weight: 700; color: #000; background: transparent; border: 0;
             min-width: 30px; height: 30px; border-radius: 999px; cursor: pointer; padding: 0 7px; }
.mtag-zahl:hover { background: var(--hellgrau); }
.mtag-heute .mtag-zahl { background: var(--akzent); }
.mtag-eintraege { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chip { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; font: inherit; font-size: 0.76rem; line-height: 1.3; color: #000;
        border: 0; border-radius: 8px; padding: 4px 8px; cursor: pointer; min-width: 0; }
.chip::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip > .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip-zeit { font-weight: 800; margin-right: 4px; }
.chip-termin { background: var(--hellblau); }
.chip-termin::before { background: #4a7fc1; }
.chip-erinnerung { background: var(--lila); }
.chip-erinnerung::before { background: #8b6cc4; }
.chip-nachricht { background: var(--gelb); }
.chip-nachricht::before { background: var(--akzent); }
.chip-mehr { background: transparent; font-weight: 700; padding-left: 8px; }
.chip-mehr::before { display: none; }
.chip:hover { filter: brightness(0.96); }
.mtag-punkte { display: none; }
.punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.punkt-termin { background: #4a7fc1; }
.punkt-erinnerung { background: #8b6cc4; }
.punkt-nachricht { background: var(--akzent); }
.legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; margin-top: 14px; }
.legende > span { display: inline-flex; align-items: center; gap: 6px; }

/* Board: eine Spalte je Stufe. Breite Bildschirme zeigen alle sechs Spalten, sonst wird
   innerhalb des Boards seitlich geblättert (die Seite selbst steht nie über). */
.board { display: grid; grid-template-columns: repeat(6, minmax(155px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px;
         scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.spalte { background: var(--leiste); color: #fff; border-radius: 16px; padding: 10px 8px; min-width: 0; scroll-snap-align: start;
          display: flex; flex-direction: column; gap: 8px; transition: background .15s, box-shadow .15s; }
.spalte-ziel { background: #1e293b; box-shadow: inset 0 0 0 2px var(--akzent); }
.spalte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.82rem; font-weight: 800; padding: 4px 2px 2px; }
.spalte-name { flex: 0 1 auto; min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.spalte-zahl { flex: none; margin-left: auto; background: var(--karte); color: #000; border-radius: 999px; font-size: 0.75rem; font-weight: 800; padding: 1px 7px; }
.spalte-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.spalte-punkt-anfrage { background: #e2b33a; }
.spalte-punkt-besichtigung, .spalte-punkt-angebot { background: #4a7fc1; }
.spalte-punkt-auftrag, .spalte-punkt-ausfuehrung { background: var(--akzent); }
.spalte-punkt-abschluss { background: var(--gruen); }
.spalte-karten { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.spalte-leer { font-size: 0.8rem; color: #fff; text-align: center; padding: 18px 8px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.45); }
.bkarte { background: var(--karte); color: #000; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px -10px rgba(15, 23, 42, .3);
          display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bkarte[draggable="true"] { cursor: grab; }
.bkarte-zieht { opacity: .5; }
.bkarte-wichtig { background: var(--rot-hell); }
.bkarte-titel { font: inherit; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: #000; text-align: left; background: none; border: 0; padding: 0;
                cursor: pointer; overflow-wrap: anywhere; }
.bkarte-titel:hover { text-decoration: underline; }
.bkarte-unter, .bkarte-termin { font-size: 0.8rem; overflow-wrap: anywhere; }
.bkarte-termin { font-weight: 600; }
.bkarte .zeile-etiketten { margin-top: 2px; }
.bkarte-weiter { align-self: flex-start; margin-top: 4px; font: inherit; font-size: 0.78rem; font-weight: 700; color: #000; background: var(--hellgrau);
                 border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.bkarte-weiter:hover { background: var(--akzent); }
.bkarte-titel:focus-visible, .bkarte-weiter:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
h3.gruppe { font-size: 0.95rem; font-weight: 800; margin: 14px 0 8px; }
.gruppe-zahl { font-weight: 600; }
.etikett-erinnerung { background: var(--lila); }
.etikett-termin { background: var(--hellblau); }
details.karte summary { cursor: pointer; font-weight: 700; }

/* Feedback: schwebender Button und Fenster */
.feedback-knopf { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 7px;
                  background: var(--leiste); color: #fff; border: 0; border-radius: 999px; padding: 10px 16px; font: inherit; font-size: 0.88rem;
                  font-weight: 700; cursor: pointer; box-shadow: 0 12px 26px -12px rgba(0,0,0,.45); }
.feedback-knopf:hover { background: #1e293b; }
.feedback-knopf svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* margin: auto setzt das Fenster in die Mitte (die Grundeinstellung oben nimmt allen Elementen den Rand) */
.dialog { margin: auto; border: 0; border-radius: 14px; padding: 22px; width: min(560px, calc(100vw - 32px)); color: #000; background: var(--karte); }
.dialog::backdrop { background: rgba(15, 23, 42, .5); }
.dialog h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; }
.dialog p { font-size: 0.95rem; }

/* Wartezeichen ohne Rahmen: Kreisausschnitt aus einem Farbverlauf */
.warte { display: inline-block; width: 16px; height: 16px; border-radius: 50%;
         background: conic-gradient(currentColor 0 70%, transparent 0);
         -webkit-mask: radial-gradient(circle, transparent 4px, #000 5px); mask: radial-gradient(circle, transparent 4px, #000 5px);
         animation: drehen .8s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .warte { animation: none; } }

/* Niedrige Bildschirme (Laptop): Seitenleiste enger setzen, sie darf nie scrollen.
   Gemessen mit app/test/layout-testen.mjs (Seitenleiste bei 1280 x 600 ohne Scrollen). */
@media (min-width: 861px) and (max-height: 760px) {
  .seitenleiste { padding: 14px 16px; }
  .seitenleiste-titel { margin-top: 6px; }
  .seitenleiste-betrieb { margin-bottom: 8px; }
  .navigation button { padding: 6px 12px; }
  .testrolle-hinweis { display: none; }
}
/* Sehr niedrige Bildschirme (unter 640 px Höhe): noch enger, Seitenleiste darf trotzdem nie scrollen */
@media (min-width: 861px) and (max-height: 640px) {
  .seitenleiste { padding: 10px 16px; }
  .seitenleiste-titel { margin-top: 2px; }
  .navigation button { padding: 4px 12px; }
  .testrolle { margin-top: 8px; padding: 6px 10px 4px; }
  .seitenleiste-fuss { padding-top: 8px; }
}

/* Handy */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste { position: static; height: auto; padding: 14px 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .seitenleiste-logo { display: none; }
  .seitenleiste-titel { margin: 0; font-size: 1rem; }
  .seitenleiste-betrieb { margin: 0; flex-basis: 100%; order: 1; }
  .seitenleiste .navigation, .seitenleiste-fuss .angemeldet { display: none; }
  .seitenleiste-fuss { margin: 0 0 0 auto; padding: 0; }
  .seitenleiste-fuss .btn-dunkel { width: auto; min-height: 34px; padding: 6px 10px; font-size: 0.8rem; }
  .testrolle { flex-basis: 100%; margin-top: 8px; order: 3; }
  #betrieb-wahl, #betrieb-wahl-label { flex-basis: 100%; order: 2; }
  .inhalt { padding: 18px 16px 150px; }
  /* Board am Handy: eine Spalte fast bildschirmbreit, seitlich wischen rastet je Spalte ein */
  .board { grid-template-columns: repeat(6, 82%); gap: 10px; }
  /* Monat am Handy: kleine Felder mit Punkten, ein Tipp öffnet den Tag darunter */
  .karte-monat { padding: 14px 10px; }
  .monat-raster { gap: 4px; }
  .wochentag { text-align: center; padding: 0 0 4px; font-size: 0.68rem; letter-spacing: 0.04em; }
  .monat-titel { font-size: 1.25rem !important; }
  .mtag { min-height: 54px; align-items: center; padding: 4px 1px; border-radius: 10px; cursor: pointer; }
  .mtag-zahl { align-self: center; font-size: 0.82rem; min-width: 28px; height: 28px; }
  .mtag-eintraege { display: none; }
  .mtag-punkte { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  .punkt { width: 6px; height: 6px; }
  /* Über die untere Navigation heben */
  .feedback-knopf { right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); padding: 8px 13px; font-size: 0.8rem; }
  .kopf h1 { font-size: 1.3rem; }
  .zeile { grid-template-columns: minmax(0, 1fr); }
  .zeile-aktionen { justify-content: flex-start; }
  .stufen { grid-template-columns: repeat(3, 1fr); }
  .eintrag { grid-template-columns: 1fr; gap: 2px; }
  .raster-2 { grid-template-columns: minmax(0, 1fr); }
  .unten-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--leiste);
               padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .unten-nav ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
  .unten-nav button { width: 100%; background: transparent; border: 0; color: #fff; font: inherit; font-size: 0.68rem; font-weight: 600;
                      display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border-radius: 8px; cursor: pointer; position: relative; }
  .unten-nav button[aria-current="page"] { background: var(--akzent); color: #000; }
  .unten-nav .zahl { position: absolute; top: 0; right: 6px; margin: 0; font-size: 0.65rem; padding: 0 5px; }
}

/* Anfrage-Ablauf (PLANUNG.md 4b): Prüfkarte, Personenauswahl im Test, Vorschau einer internen Mail */
.karte-pruefen { border: 2px solid var(--leiste); }
.personwahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.personwahl label { margin: 0; font-weight: 600; }
.personwahl select { width: auto; min-width: 160px; }
.mailvorschau { white-space: pre-wrap; font: inherit; font-size: 0.9rem; background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 12px 14px; margin: 6px 0 0; }

/* Testpilot Luxor (Rundgang 27.10.2026): vier Stufen, Angaben der Anfrage als Liste, Weitere Werkzeuge eingeklappt */
.board-4 { grid-template-columns: repeat(4, minmax(155px, 1fr)); }
.stufen-4 { grid-template-columns: repeat(4, 1fr); }
.angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 8px 0 4px; }
.angaben dt { font-weight: 700; }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
.werkzeuge > summary { font-size: 0.95rem; }
@media (max-width: 860px) {
  .board-4 { grid-template-columns: repeat(4, 82%); }
  .stufen-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Handy-App (Umbau 27.10.2026, planung/umbau-handy-app-bestand.md): Zeilen zum Antippen, Abschnitte,
   fester Button für den nächsten Schritt, Mail-Vorschau. Bedeutung als Fläche, Schrift schwarz. */
h2.abschnitt { font-size: 1.02rem; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 24px 0 10px; }
.kopf + h2.abschnitt { margin-top: 0; }
.abschnitt-zahl { background: var(--hellgrau); border-radius: 999px; font-size: 0.78rem; padding: 1px 9px; }
.abschnitt-rot .abschnitt-zahl { background: var(--rot); color: #fff; }
.tzeile { display: flex; flex-wrap: wrap; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.tzeile-rot { background: var(--rot-hell); border-color: #efb9aa; }
.tzeile-haupt { flex: 1 1 260px; min-width: 0; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 13px 14px;
                background: none; border: 0; font: inherit; color: #000; text-align: left; cursor: pointer; }
.tzeile-haupt:hover { background: rgba(15, 23, 42, .035); }
.tzeile-haupt:focus-visible { outline: 3px solid var(--akzent); outline-offset: -3px; }
.tzeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tzeile-titel { font-weight: 700; overflow-wrap: anywhere; }
.tzeile-unter { font-size: 0.86rem; overflow-wrap: anywhere; }
.tzeile .zeile-etiketten { margin-top: 4px; }
.tzeile-pfeil { font-size: 1.6rem; line-height: 1; flex: none; }
.tzeile-extra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 14px 12px; }
.punkt-stand { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--linie-2); }
.punkt-stand-anfrage { background: #e2b33a; }
.punkt-stand-besichtigung, .punkt-stand-angebot { background: #4a7fc1; }
.punkt-stand-auftrag, .punkt-stand-ausfuehrung { background: var(--akzent); }
.punkt-stand-abschluss { background: var(--gruen); }
.punkt-stand-abgesagt { background: #9ca3af; }
.punkt-stand-dringend, .punkt-stand-hinweis { background: var(--rot); }
.punkt-stand-mail, .punkt-stand-erinnerung { background: #8b6cc9; }
.punkt-stand-mehr { background: var(--leiste); }
.etikett-stand-anfrage { background: var(--gelb); }
.etikett-stand-besichtigung, .etikett-stand-angebot { background: var(--hellblau); }
.etikett-stand-auftrag, .etikett-stand-ausfuehrung { background: var(--akzent-hell); }
.etikett-stand-abschluss { background: var(--hellgruen); }
.etikett-rot { background: var(--rot); color: #fff; }
.etikett-zahl { background: var(--akzent); }

/* Filter der Anfragen als Umschalter über die ganze Breite */
.reiter-filter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--hellgrau); border-radius: 999px; max-width: 560px; }
.reiter-filter button { border: 0; background: transparent; padding: 10px 6px; }
.reiter-filter button[aria-pressed="true"] { background: var(--karte); color: #000; border: 0; box-shadow: 0 2px 8px -3px rgba(15, 23, 42, .25); }
.fab { position: fixed; right: 22px; bottom: 78px; z-index: 55; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
       background: var(--akzent); color: #000; font: inherit; font-size: 2rem; font-weight: 600; line-height: 1;
       box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5); }
.fab:hover { background: #f8bb4c; }
.fab:focus-visible { outline: 3px solid var(--leiste); outline-offset: 3px; }

/* Eine Anfrage */
.detail-kopf { margin-bottom: 16px; }
.detail-kopf h1 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin: 8px 0 4px; overflow-wrap: anywhere; }
.detail-unter { font-size: 0.95rem; }
.schalter { margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 16px 6px 6px; border-radius: 999px;
            background: var(--karte); border: 1px solid var(--linie-2); font: inherit; font-size: 0.92rem; font-weight: 700; color: #000; cursor: pointer; }
.schalter-knopf { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--hellgrau); flex: none; }
.schalter-knopf::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
                         box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.schalter-an { background: var(--rot-hell); border-color: #efb9aa; }
.schalter-an .schalter-knopf { background: var(--rot); }
.schalter-an .schalter-knopf::after { left: 19px; }
.schalter:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.karte-dunkel { background: var(--leiste); border-color: var(--leiste); color: #fff; }
.kontakt { display: flex; flex-direction: column; gap: 10px; }
.kontakt-name { display: flex; flex-direction: column; }
.kontakt-name span { font-size: 0.9rem; overflow-wrap: anywhere; }
.kontakt-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.kontakt .hinweis { margin-top: 0; }
.abschnitte { display: flex; flex-direction: column; gap: 8px; }
details.abschnitt-klapp { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; }
details.abschnitt-klapp > summary { list-style: none; cursor: pointer; font-weight: 700; min-height: 54px; padding: 14px 18px;
                                   display: flex; align-items: center; justify-content: space-between; gap: 10px; }
details.abschnitt-klapp > summary::-webkit-details-marker { display: none; }
details.abschnitt-klapp > summary::after { content: '›'; font-size: 1.5rem; line-height: 1; transform: rotate(90deg); transition: transform .15s; flex: none; }
details.abschnitt-klapp[open] > summary::after { transform: rotate(-90deg); }
.abschnitt-inhalt { padding: 0 18px 16px; }
.abschnitt-inhalt > .karte { border: 0; padding: 0; margin: 0; background: none; }
.abschnitt-inhalt > .karte > h2:first-child { display: none; }
/* Fester Button für den nächsten Schritt: bleibt beim Scrollen am unteren Rand */
.aktionsleiste { position: sticky; bottom: 0; z-index: 40; display: flex; gap: 10px; margin-top: 18px; padding: 14px 0;
                 background: linear-gradient(rgba(242, 233, 222, 0), var(--seite) 30%); }
.aktionsleiste .btn { min-height: 52px; font-size: 1rem; }
.btn-gross { min-width: 260px; }
body.mit-aktion .feedback-knopf { bottom: 96px; }
.mail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--linie); }
.mail-kopf p { font-size: 0.92rem; overflow-wrap: anywhere; }
.mail-betreff { font-weight: 800; font-size: 1.05rem; margin-bottom: 8px; }
.mail-text { white-space: pre-wrap; font-size: 0.97rem; line-height: 1.6; }

@media (max-width: 860px) {
  /* Kopfleiste schlank: Testauswahl, Betriebswechsel und Abmelden liegen am Handy unter „Mehr“ */
  .testrolle, #betrieb-wahl, #betrieb-wahl-label, .seitenleiste-fuss { display: none !important; }
  .seitenleiste { padding: 10px 16px; }
  .seitenleiste-betrieb { font-size: 0.8rem; }
  .fab { right: 16px; bottom: calc(128px + env(safe-area-inset-bottom)); }
  .aktionsleiste { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .aktionsleiste .btn { flex: 1; }
  .btn-gross { min-width: 0; flex: 2 !important; }
  body.mit-aktion .feedback-knopf { bottom: calc(172px + env(safe-area-inset-bottom)); }
  .detail-kopf h1 { font-size: 1.3rem; }
  .tzeile-pfeil { font-size: 1.4rem; }
}

/* Marke in der Seitenleiste bzw. Kopfleiste: Logo des Betriebs links, daneben App-Name und Betrieb */
.marke { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-width: 0; }
.marke-text { min-width: 0; }
.marke .seitenleiste-titel { margin: 0; }
.betrieb-logo { width: 40px; height: 40px; flex: none; border-radius: 50%; background: #fff; }
@media (max-width: 860px) {
  /* Feste Kopfleiste wie in einer App: immer gleich hoch, bleibt beim Scrollen oben.
     Ohne „auto 1fr“ verteilt das Raster freien Platz einer kurzen Seite auch auf die Kopfleiste. */
  .app { grid-template-rows: auto 1fr; }
  .seitenleiste { position: sticky; top: 0; z-index: 45; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; min-height: 0; }
  .marke { margin: 0; flex: 1 1 auto; }
  .marke .seitenleiste-titel { font-size: 1rem; line-height: 1.25; }
  .marke .seitenleiste-betrieb { margin: 0; font-size: 0.8rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Der Name steht am Handy immer da, die Auswahl der Betriebe liegt dort unter „Mehr“ */
  .seitenleiste #betrieb-name[hidden] { display: block !important; }
  .betrieb-logo { width: 36px; height: 36px; }
}
.vorlage-wahl { max-width: 420px; margin-bottom: 12px; }
.vorlage-wahl label { margin-top: 0; }

/* Dringend: Schalter mit Erklärung unter den Angaben */
.dringend-feld { margin: 0 0 14px; }
.dringend-feld .schalter { margin-top: 0; }
.dringend-feld .hinweis { margin-top: 6px; }
textarea.klein { min-height: 70px; }
/* Leistungen: am Rechner Tabelle, am Handy Liste mit eigener Seite zum Ändern */
.nur-handy { display: none; }
@media (max-width: 860px) {
  .nur-handy { display: block; }
  .nur-gross { display: none; }
}

/* Anmeldemaske unter der Adresse eines Kunden: dessen rundes Logo statt des masdemas-Schriftzugs */
#pw-logo img.pw-logo-kunde { width: 88px; height: 88px; }