/* Lischer App Online – Stylesheet
   Farben kommen als CSS-Variablen aus config.php (Branding).
   22.07.2026 (Design-Überarbeitung io, Auftrag Freddy, KONZEPT_DESIGN_IO.md):
   neuer Look nach Design-Entwurf „Lischer App – Final" – dunkelblauer Header,
   Schrift Saira (Überschriften) + Public Sans (Fließtext), zusätzliche feste
   Signalfarben (Rot/Grün/Orange/Lila) für Badges/Prioritäten. Gilt NUR für io. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--primary)}
:root{
  --rot:#E23B2E; --gruen:#2E7D46; --orange:#B7791F; --lila:#6B4EA0;
  --gelb-avatar:#F4C542;

  /* ══ 03.08.2026 (Befund IO-135): Tagesfarben des Wochenrapports ══
     Diese acht Farben standen bisher als feste Zahlenwerte in
     public/assets/js/app.js – die einzige Stelle der App, an der Farben NICHT hier
     gepflegt wurden. Wer die Farbwelt anpasst, sucht sie in der style.css und
     findet sie dort nicht. Jetzt stehen sie hier; app.js liest die Werte über
     getComputedStyle() aus und setzt sie an der Tabellenzeile.
     Wird eine Farbe geändert, reicht diese eine Stelle. */
  --tag-notdienst:#fef2f2;
  --tag-feiertag:#fee2e2;
  --tag-urlaub:#dcfce7;
  --tag-krank:#fef9c3;
  --tag-schule:#dbeafe;
  --tag-samstag:#ffedd5;
  --tag-sonntag:#fed7aa;
  --tag-frei:#f3f4f6;
  --karte-rand:#E4E8F0; --karte-schatten:0 1px 3px rgba(15,27,61,.06);

  /* ══ 27.07.2026 (Auftrag Freddy: „die untere Leiste darf nie etwas überlappen") ══
     Verbindliche Schichten-Ordnung für die ganze io. Vorher hatte jedes Element
     seine eigene, frei gewählte Zahl (60, 70, 90, 900, 1000) – dadurch lag die am
     22.07.2026 neu eingebaute untere Leiste über Kamera-Vollbild, Dialogen und
     angehefteten Knopfleisten.
     REGEL für neue Elemente: keine eigenen z-index-Zahlen mehr erfinden, sondern
     immer eine dieser vier Stufen benutzen. */
  --z-leiste:800;    /* angeheftete Leisten am unteren Rand – UNTER der Navigation */
  --z-nav:1000;      /* untere Navigationsleiste                                   */
  --z-topbar:1100;   /* Kopfleiste samt Aufklapp-Menüs (Glocke, Konto) – ihre
                        Menüs klappen nach unten und müssen deshalb über der
                        unteren Leiste liegen dürfen                              */
  --z-overlay:2000;  /* Vollbilder und Dialoge – liegen IMMER über allem           */

  /* Freiraum, den die untere Navigationsleiste am Seitenende belegt.
     --bn-hoehe ist NUR der Rückfallwert (reine Leistenhöhe ohne Schutzbereich);
     --bn-platz ist der Wert, mit dem gerechnet wird.

     31.07.2026 (Befund IO-017): Das Messskript in templates/layout.php schrieb den
     gemessenen Wert früher in --bn-hoehe. Die Messung (getBoundingClientRect) liefert
     aber die volle Außenhöhe – und darin steckt das padding-bottom der Leiste, das
     env(safe-area-inset-bottom) bereits enthält (siehe .bottom-nav weiter unten).
     Die Zeile hier hat den Schutzbereich dann ein zweites Mal daraufgerechnet: auf
     iPhones mit Home-Balken blieben rund 34 px zu viel Luft, und alles mit
     .leiste-unten / .klebt-unten / .fab-support schwebte sichtbar zu hoch.
     Jetzt schreibt das Skript direkt --bn-platz; die Rechnung hier ist nur noch der
     Rückfall, solange nicht gemessen wurde (kein JS, Moment vor DOMContentLoaded)
     oder wenn es gar keine Leiste gibt (Anmeldeseite, body.keine-bottom-nav). */
  --bn-hoehe:64px;
  --bn-platz:calc(var(--bn-hoehe) + env(safe-area-inset-bottom));
}
body{
  font-family:'Public Sans',Arial,Helvetica,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.45;
  font-size:14px;
  overflow-x:hidden;
  /* Gerätespezifisch: unten den vom Gerät gemeldeten Schutzbereich (Home-Indikator /
     Browser-Leiste auf iPhones) freihalten, damit die letzte Karte nicht verdeckt wird.
     Zusätzlich Platz für die fixe untere Navigationsleiste (siehe .bottom-nav).
     27.07.2026: statt der früher fest eingetragenen 64 px jetzt die gemessene Höhe
     (--bn-platz). Wächst die Leiste (größere Schrift am Handy, längere Wörter in einer
     anderen Sprache), wächst der Freiraum automatisch mit. */
  padding-bottom:var(--bn-platz);
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-family:'Saira',sans-serif;font-weight:800;font-size:1.4rem;margin:.2rem 0 1rem;color:var(--ink);letter-spacing:.2px}
h2{font-family:'Saira',sans-serif;font-weight:700;font-size:1.1rem;margin:1.5rem 0 .6rem;color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:.82rem}
/* Seiten ohne eigene Bottom-Nav (Login) brauchen den unteren Puderpolster nicht.
   27.07.2026: Es reicht, die Leistenhöhe auf 0 zu setzen – der Schutzbereich des
   Geräts (safe-area) bleibt über --bn-platz weiterhin frei. */
body.keine-bottom-nav{--bn-hoehe:0px}

/* ── Safe-Area-Spacer: hält Statusleisten-Zone besetzt, Topbar startet darunter ── */
.topbar-safe-area{
  height:env(safe-area-inset-top);
  background:var(--primary);
  position:sticky;
  top:0;
  z-index:calc(var(--z-topbar) + 1);
}

/* ── Topbar ── */
.topbar{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  background:var(--primary);color:#fff;
  padding:.75rem max(1.1rem, env(safe-area-inset-right)) .75rem max(1.1rem, env(safe-area-inset-left));
  position:sticky;top:env(safe-area-inset-top);z-index:var(--z-topbar);
  min-height:56px;
}
.brand{display:flex;align-items:center;gap:.65rem;color:#fff;font-size:1.05rem;font-weight:700}
.brand:hover{text-decoration:none;color:#fff}

/* Logo in weißem Quadrat – exakt wie Büro-App */
.brand-logo-wrap{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.96);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
}
.brand-logo-wrap img{width:28px;height:28px;object-fit:contain}

.brand b{font-weight:800}
/* 03.08.2026 (Befund IO-158): Die Regeln .nav / .nav a / .nav a:hover /
   .nav a.active gehörten zum oberen Hauptmenü. Das wurde am 23.06.2026 aus
   templates/layout.php entfernt (Navigation läuft über das Kachelraster der
   Startseite und die untere Leiste). Die Regeln waren seitdem wirkungslos und
   sind hier gelöscht – sie standen beim Suchen nach der richtigen Klasse im Weg.
   Rückgängig: aus dem Backup _backups_2026-08-03_pruefbericht_runde5 holen. */
.userbox{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.role{color:rgba(255,255,255,.65);font-size:.83rem}
.role:hover{color:#fff;text-decoration:none}
/* Abmelden-Button in der Topbar: weißer Text/Rand auf dunklem Hintergrund */
.topbar .btn-ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.15);border-color:#fff;text-decoration:none}

/* ── Topbar: Zurück-zur-Startseite-Link ── */
.topbar-back{
  color:rgba(255,255,255,.82);padding:.3rem .75rem;
  border:1px solid rgba(255,255,255,.4);border-radius:7px;
  font-size:.88rem;font-weight:600;white-space:nowrap;
}
.topbar-back:hover{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}

/* ── Monteur: Konto-Dropdown ── */
.konto-menu summary{
  list-style:none;cursor:pointer;
  color:#fff;border:1px solid rgba(255,255,255,.65);border-radius:8px;
  padding:.45rem .85rem;font-size:.88rem;font-weight:700;
  background:transparent;user-select:none;
  display:inline-flex;align-items:center;min-height:40px;
}
.konto-menu summary::-webkit-details-marker{display:none}
.konto-menu summary:hover{background:rgba(255,255,255,.15);border-color:#fff}
/* 20.07.2026 (Freddy): Dropdown hängt jetzt bewusst NICHT an .konto-menu selbst,
   sondern an der .topbar (nächster positionierter Vorfahre, position:sticky zählt
   dafür bereits) – dadurch ist „right" immer relativ zum tatsächlichen Bildschirmrand
   und nicht zum (schmaleren) Knopf. So kann das Fenster nie über den Rand hinausragen,
   unabhängig davon, wie viele Knöpfe noch rechts daneben stehen. */
.konto-dropdown{
  position:absolute;right:max(1.1rem, env(safe-area-inset-right));top:calc(100% + .5rem);
  background:#fff;border:1px solid #cfd6df;border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.14);
  /* 31.07.2026 (Befund IO-157): eigene Zahl 999 ersetzt. Sie fiel bisher nur
     deshalb nicht auf, weil .topbar mit z-index:var(--z-topbar) einen eigenen
     Stapelraum aufmacht. Nimmt jemand das z-index der .topbar heraus oder
     ändert ihre Positionierung, rutscht das Menü unter die untere Leiste. */
  min-width:170px;max-width:88vw;z-index:var(--z-overlay);
  display:flex;flex-direction:column;overflow:hidden;
}
.konto-dropdown a{
  padding:.7rem 1rem;color:var(--ink);font-size:.93rem;
  border-bottom:1px solid #f0f4f9;display:block;
}
.konto-dropdown a:last-child{border-bottom:0;color:#b91c1c}
.konto-dropdown a:hover{background:var(--bg);text-decoration:none}

/* ── Benachrichtigungs-Glocke (02.07.2026) ── */
.glocke-menu summary{
  list-style:none;cursor:pointer;position:relative;
  color:#fff;border:1px solid rgba(255,255,255,.65);border-radius:8px;
  padding:.35rem .55rem;background:transparent;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;min-width:44px;
}
.glocke-menu summary::-webkit-details-marker{display:none}
.glocke-menu summary:hover{background:rgba(255,255,255,.15);border-color:#fff}
.glocke-icon{font-size:1.15rem;line-height:1}
.glocke-badge{
  position:absolute;top:-6px;right:-6px;
  background:#dc2626;color:#fff;font-size:.7rem;font-weight:800;line-height:1;
  min-width:18px;height:18px;padding:0 4px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid var(--primary);box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.glocke-badge[hidden]{display:none}
/* 20.07.2026 (Freddy): wie beim Konto-Dropdown – hängt bewusst an der .topbar
   (nächster positionierter Vorfahre, position:sticky zählt bereits dafür), nicht an
   .glocke-menu selbst. Dadurch ist „right" immer relativ zum echten Bildschirmrand,
   auch wenn rechts daneben noch das Konto-Menü sitzt – das Fenster ragt so nie über
   den linken ODER rechten Rand hinaus, egal wie schmal der Bildschirm ist. */
.glocke-dropdown{
  position:absolute;right:max(1.1rem, env(safe-area-inset-right));top:calc(100% + .5rem);
  background:#fff;border:1px solid #cfd6df;border-radius:10px;
  box-shadow:0 4px 20px rgba(0,0,0,.14);
  /* 31.07.2026 (Befund IO-157): siehe .konto-dropdown – keine eigenen Zahlen. */
  width:320px;max-width:88vw;z-index:var(--z-overlay);overflow:hidden;
}
.glocke-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.6rem .85rem;border-bottom:1px solid #eef2f7;background:var(--bg);
}
.glocke-kopf-titel{font-weight:800;color:var(--ink);font-size:.92rem}
.glocke-alle{
  background:transparent;border:0;cursor:pointer;
  color:var(--primary);font-size:.8rem;font-weight:700;padding:.2rem .3rem;
}
.glocke-alle:hover{text-decoration:underline}
/* 27.07.2026: Höhe zusätzlich so begrenzt, dass die Liste auf kleinen Bildschirmen
   nicht bis in die untere Navigationsleiste hineinreicht. */
.glocke-liste{max-height:min(60vh, calc(100vh - 130px - var(--bn-platz)));overflow-y:auto}
.glocke-eintrag{
  display:flex;align-items:flex-start;gap:.55rem;
  padding:.65rem .85rem;border-bottom:1px solid #f0f4f9;
  color:var(--ink);font-size:.9rem;line-height:1.3;
}
.glocke-eintrag:last-child{border-bottom:0}
.glocke-eintrag:hover{background:var(--bg);text-decoration:none}
.glocke-eintrag--neu{background:#eef5ff}
.glocke-eintrag--neu:hover{background:#e2eefc}
.glocke-e-icon{flex-shrink:0;font-size:1rem;line-height:1.3}
.glocke-e-text{flex:1;word-break:break-word}
.glocke-e-zeit{flex-shrink:0;color:var(--muted);font-size:.72rem;white-space:nowrap;margin-top:.1rem}
.glocke-leer{padding:1rem .85rem;color:var(--muted);font-size:.88rem;text-align:center}

/* ── Layout ── */
.wrap{max-width:1600px;width:95%;margin:1.5rem auto;padding:0 1.1rem}
.wrap--center{max-width:430px;margin-top:8vh}
.foot{text-align:center;color:var(--muted);font-size:.78rem;padding:2rem 1rem}

/* ── Buttons ── */
.btn{
  display:inline-block;background:var(--primary);color:#fff;
  border:0;border-radius:10px;padding:.55rem 1.1rem;
  font-size:.95rem;cursor:pointer;font-weight:600;
}
.btn:hover{background:var(--primary-d);text-decoration:none;color:#fff}
.btn--accent{background:var(--accent);color:var(--primary-d)}
.btn--accent:hover{filter:brightness(.93)}
.btn--ghost,.btn-ghost{
  background:transparent;border:1px solid var(--primary);
  color:var(--primary);border-radius:10px;padding:.55rem 1.1rem;
  font-size:.95rem;cursor:pointer;font-weight:600;display:inline-block;
}
.btn--ghost:hover{background:rgba(11,55,109,.08);text-decoration:none}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}

/* ── Cards & forms ── */
.card{background:#fff;border:1px solid var(--karte-rand);border-radius:16px;padding:1.3rem;box-shadow:var(--karte-schatten);margin-bottom:1rem}
.card--login{margin-top:0}
.login-head{text-align:center;margin-bottom:1.2rem}
.login-head img{height:52px;margin-bottom:.5rem}
.login-head h1{font-size:1.2rem;margin:.2rem 0;color:var(--primary)}
.form{display:flex;flex-direction:column;gap:.85rem}
.form label{display:flex;flex-direction:column;gap:.3rem;font-weight:700;font-size:.88rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.form input,.form select,.form textarea{
  padding:.52rem .65rem;border:1px solid #cfd6df;border-radius:8px;
  font-size:.97rem;font-family:inherit;background:#fff;color:var(--ink);
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--primary);border-color:var(--primary)}
.check{flex-direction:row !important;align-items:center;gap:.5rem;text-transform:none !important}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}

/* ── Flash ── */
.flash{padding:.65rem 1rem;border-radius:9px;margin-bottom:.9rem;font-weight:700}
.flash--ok{background:#dcf5e7;color:#15803d}
.flash--err{background:#fee2e2;color:#b91c1c}
.flash--warn{background:#fef3c7;color:#92400e}

/* ── Dashboard: Header ── */
.dash-head{
  display:flex;align-items:center;gap:1.2rem;
  margin-bottom:1.8rem;
  padding:1.2rem 1.4rem;
  background:#fff;border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  border-left:5px solid var(--accent);
}
.dash-logo-wrap{
  width:64px;height:64px;border-radius:14px;
  background:var(--bg);border:2px solid #e3e8ef;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.dash-logo{width:52px;height:52px;object-fit:contain}
.dash-greeting{font-size:1.3rem;font-weight:800;color:var(--primary)}
.dash-sub{font-size:.85rem;color:var(--muted);margin-top:.2rem}

/* ── Dashboard: Büro-App-Stil (Logo + Suchfeld + große Buttons) ── */
.dash-brand{
  display:flex;align-items:center;gap:1.4rem;
  justify-content:center;text-align:center;
  flex-direction:column;
  padding:1.8rem 1rem 1rem;
}
.dash-logo-box{
  width:80px;height:80px;border-radius:18px;
  background:#fff;border:2px solid #e3e8ef;
  box-shadow:0 4px 16px rgba(11,55,109,.10);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.dash-logo-img{width:64px;height:64px;object-fit:contain}
.dash-brand-text{}
.dash-title{font-size:1.7rem;font-weight:900;color:var(--primary);letter-spacing:-.3px}
.dash-sub{font-size:.85rem;color:var(--muted);margin-top:.25rem}

.dash-search-wrap{
  max-width:520px;margin:1rem auto .2rem;
  padding:0 1rem;
}
.dash-search{
  width:100%;padding:.65rem 1rem;
  border:2px solid #cfd6df;border-radius:10px;
  font-size:.97rem;background:#fff;color:var(--ink);
  cursor:not-allowed;opacity:.55;
}

/* Große Navigations-Buttons (Büro-App-Stil) */
.dash-nav{
  display:flex;flex-direction:column;gap:.5rem;
  max-width:520px;margin:.8rem auto 0;padding:0 1rem;
}
.dash-btn{
  display:flex;align-items:center;gap:1rem;
  padding:.95rem 1.3rem;border-radius:11px;
  font-size:1.05rem;font-weight:700;
  cursor:pointer;transition:filter .12s,transform .1s;
  text-decoration:none;
}
.dash-btn--active{
  background:var(--accent);color:var(--primary);
  box-shadow:0 4px 14px rgba(255,212,0,.35);
}
.dash-btn--active:hover{
  filter:brightness(.95);transform:translateY(-1px);
  text-decoration:none;color:var(--primary);
}
.dash-btn--soon{
  background:var(--primary);color:rgba(255,255,255,.65);
  cursor:default;
}
.dash-btn-icon{font-size:1.4rem;flex-shrink:0}
.dash-btn-label{flex:1}
.dash-btn-count{
  font-size:.85rem;font-weight:700;
  background:rgba(0,0,0,.15);color:inherit;
  border-radius:20px;padding:.1rem .7rem;
}
.dash-btn-badge{
  font-size:.72rem;font-weight:700;letter-spacing:.5px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.5);
  border-radius:20px;padding:.1rem .7rem;text-transform:uppercase;
}

.dash-quickrow{
  display:flex;gap:.6rem;flex-wrap:wrap;
  max-width:520px;margin:.9rem auto 0;padding:0 1rem 2rem;
}
.dash-quick{
  background:#fff;border:1px solid #cfd6df;border-radius:9px;
  padding:.4rem .9rem;font-size:.85rem;font-weight:700;color:var(--primary);
  transition:background .1s,border-color .1s;
}
.dash-quick:hover{
  background:var(--bg);border-color:var(--primary);text-decoration:none;
}

/* ── Dashboard: Kacheln (Fallback, nicht mehr Hauptdesign) ── */
.kachel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}
.kachel{
  background:#fff;
  border-radius:14px;
  padding:1.5rem 1rem 1.2rem;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  border-bottom:4px solid var(--primary);
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.5rem;
  color:var(--ink);
  transition:transform .12s,box-shadow .12s,border-color .12s;
  cursor:pointer;
}
.kachel:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(11,55,109,.15);
  border-bottom-color:var(--accent);
  text-decoration:none;
  color:var(--ink);
}
.kachel-icon{font-size:2.4rem;line-height:1}
.kachel-title{font-size:1rem;font-weight:800;color:var(--primary)}
.kachel-badge{
  font-size:.75rem;font-weight:700;
  background:var(--bg);color:var(--muted);
  border-radius:20px;padding:.15rem .75rem;
}

/* ── Dashboard: Schnellstart ── */
.dash-schnellstart{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  margin-top:.5rem;
}
.dash-schnellstart-label{
  font-size:.75rem;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);
}
.dash-quickbtn{
  background:#fff;border:1px solid #cfd6df;border-radius:9px;
  padding:.42rem .9rem;font-size:.88rem;font-weight:700;color:var(--primary);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .1s,border-color .1s;
}
.dash-quickbtn:hover{
  background:var(--bg);border-color:var(--primary);
  text-decoration:none;color:var(--primary);
}

/* ── Tabellen ── */
.head-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.tablewrap{overflow-x:auto;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.07);margin-top:.4rem}
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th,.tbl td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid #e3e8ef;vertical-align:middle}
.tbl thead th{background:#f0f4f9;color:var(--primary);font-weight:700;white-space:nowrap;font-size:.8rem;text-transform:uppercase;letter-spacing:.4px}
.tbl tfoot td{background:#f7fafd;font-weight:700}
/* Wochensumme-Zeile: dunkelblau mit weißer Schrift (vorher weiß auf weiß). */
.tbl.tbl--form tfoot td{background:var(--primary);color:#fff;font-weight:800}
.tbl.tbl--form tfoot td b{color:#fff}
.tbl--form input,.tbl--form select{padding:.38rem;border:1px solid #cfd6df;border-radius:7px;width:100%}

/* ── Wochenrapport: Desktop-Tabelle ohne horizontalen Scrollbalken ── */
#wr-tablewrap{overflow-x:visible}
/* Im Phone-Landscape: Tabellen-Scroll statt Seiten-Scroll */
@media(orientation:landscape) and (max-height:500px){
  #wr-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Extra-Positions-Zeilen (mehrere Baustellen pro Tag) */
.extra-pos-row td{font-size:.87rem}
.extra-pos-row input{font-size:inherit}
.pos-add-row td{padding:.15rem .38rem !important}
.extra-pos-std{white-space:nowrap}
@media(min-width:1024px){
  #wr-table{table-layout:fixed}
  #wr-table th,#wr-table td{padding:.32rem .38rem}
  #wr-table thead th{font-size:.72rem;white-space:normal;line-height:1.2;hyphens:auto}
  #wr-table input,#wr-table select{
    width:100%;min-width:0;box-sizing:border-box;
    padding:.25rem .3rem;font-size:.82rem;
  }
}
.badge{background:#dbeafe;color:#1d4ed8;padding:.15rem .55rem;border-radius:999px;font-size:.77rem;font-weight:700}
.badge--accent{background:#fef3c7;color:#92400e}
/* „Nur Admin"-Kennzeichnung (30.06.2026): markiert dezent Bereiche, die nur Admins sehen.
   Reine Anzeige – ändert keine Rechte. Bewusst zurückhaltend in Hausfarben (grau/blau),
   kein Emoji, kein greller Kasten. Abzeichen via admin_marker(); .nur-admin am umgebenden
   Block ergänzt einen feinen Akzentrand. */
.admin-badge{background:#eef2f7;color:#334155;border:1px solid #cfd6df}
.nur-admin{border-left:2px solid #cbd5e1;padding-left:.5rem}
.admin-legende{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin:.2rem 0 .6rem}
/* Schalter in der Kopfzeile: blendet die Admin-Markierungen ein/aus (Session). Dezent. */
.markierung-form{display:inline;margin-right:.5rem}
.markierung-toggle{background:transparent;border:1px solid #cfd6df;border-radius:8px;cursor:pointer;color:var(--muted);font-size:.8rem;line-height:1;padding:.4rem .6rem}
.markierung-toggle:hover{border-color:var(--primary);color:var(--primary)}
/* Schalter AUS: alle Admin-Markierungen ausblenden (reine Anzeige). */
body.markierungen-aus .admin-badge,
body.markierungen-aus .admin-legende{display:none !important}
body.markierungen-aus .nur-admin{border-left:0;padding-left:0}
.filterbar{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;background:#fff;padding:1rem;border-radius:11px;margin-bottom:.4rem}
.filterbar label{display:flex;flex-direction:column;font-size:.83rem;font-weight:700;gap:.25rem;color:var(--muted);text-transform:uppercase}
.filterbar input{padding:.42rem;border:1px solid #cfd6df;border-radius:7px;width:7rem}
summary{cursor:pointer;font-weight:700}

/* ── Login-Logo ── */
.login-head .brand-logo-login{
  width:64px;height:64px;border-radius:14px;background:var(--bg);
  border:2px solid #e3e8ef;display:inline-flex;align-items:center;
  justify-content:center;margin-bottom:.6rem;
}
.login-head .brand-logo-login img{width:52px;height:52px;object-fit:contain}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE & MOBILE (iPhone / Android)
   ══════════════════════════════════════════════════════════ */

/* Wochenrapport: Tageskarten-Layout (< 1024px – Handy + Tablet) */
@media(max-width:1023px){
  .tbl.tbl--form thead{display:none}
  .tbl.tbl--form,.tbl.tbl--form tbody,.tbl.tbl--form tr,.tbl.tbl--form td{display:block;width:100%}
  .tbl.tbl--form tr{
    border:1px solid #cfd6df;border-radius:11px;
    margin:.6rem 0;overflow:hidden;background:#fff;
  }
  .tbl.tbl--form td{
    border:0;border-bottom:1px solid #f0f4f9;
    display:flex;justify-content:space-between;align-items:center;
    gap:.6rem;padding:.5rem .75rem;
  }
  .tbl.tbl--form td:last-child{border-bottom:0}
  .tbl.tbl--form td::before{
    content:attr(data-label);font-weight:700;color:var(--muted);
    flex-shrink:0;font-size:.83rem;min-width:8.5rem;
  }
  /* Tag-Zelle: farbige Karten-Überschrift */
  .tbl.tbl--form td[data-label="Tag"]{
    background:var(--primary);color:#fff;
    flex-direction:column;align-items:flex-start;
    gap:.1rem;padding:.65rem .75rem;
  }
  .tbl.tbl--form td[data-label="Tag"]::before{display:none}
  .tbl.tbl--form td[data-label="Tag"] .day-wochentag{
    font-size:1.05rem;font-weight:800;color:#fff;display:block;
  }
  .tbl.tbl--form td[data-label="Tag"] .day-datum-anzeige{
    color:rgba(255,255,255,.75);font-size:.88rem;
  }
  .tbl.tbl--form td[data-label="Tag"] .badge{
    background:rgba(255,255,255,.2);color:#fff;margin-top:.25rem;
  }
  /* Eingabefelder: volle verfügbare Breite */
  .tbl.tbl--form td input[type="time"],
  .tbl.tbl--form td input[type="text"],
  .tbl.tbl--form td input[type="number"],
  .tbl.tbl--form td select{flex:1;width:auto;font-size:16px;min-height:44px}
  /* Checkbox kompakt */
  .tbl.tbl--form td input[type="checkbox"]{
    width:24px;height:24px;min-height:24px;flex:none;cursor:pointer;
  }
  /* Stunden-Ausgabe */
  .tbl.tbl--form td.t-out{
    justify-content:space-between;font-size:1rem;font-weight:700;
    color:var(--primary);border-top:2px solid #e3e8ef;
  }
  .tbl.tbl--form td.t-out::before{content:"Stunden"}
  .tbl.tbl--form tfoot{display:block}
}

/* Tablet */
@media(max-width:880px){
  .row3{grid-template-columns:1fr}
  .kachel-grid{grid-template-columns:repeat(2,1fr)}
  .nav{order:3;width:100%;gap:.15rem}
  .wrap{padding:0 .75rem}
  .dash-nav,.dash-search-wrap,.dash-quickrow{max-width:100%;padding:0 .75rem}
}

/* Mobil (≤ 640px) – iPhone / Android */
@media(max-width:640px){

  /* Topbar kompakt – etwas mehr Luft oben, Button gut erreichbar */
  .topbar{padding:.6rem .75rem;gap:.6rem}
  .konto-menu summary{min-height:38px}
  .brand span:not(.brand-logo-wrap){display:none}        /* Nur Logo, kein Text */
  .nav a{padding:.3rem .5rem;font-size:.82rem}
  .role{display:none}                                    /* Username ausblenden */
  .btn-ghost{padding:.3rem .65rem;font-size:.82rem}
  .topbar-back{padding:.25rem .5rem;font-size:.78rem}

  /* Wrap */
  .wrap{margin:.75rem auto;padding:0 .65rem}
  .wrap--center{margin-top:5vh;padding:0 .75rem}

  /* Dashboard: volle Breite */
  .dash-brand{padding:1.2rem .75rem .6rem;flex-direction:column}
  .dash-logo-box{width:64px;height:64px}
  .dash-logo-img{width:52px;height:52px}
  .dash-title{font-size:1.35rem}
  .dash-nav{gap:.4rem;padding:0 .75rem}
  .dash-btn{padding:.8rem 1rem;font-size:.97rem}
  .dash-btn-icon{font-size:1.2rem}
  .dash-quickrow{flex-direction:column;gap:.35rem;padding:0 .75rem .75rem}
  .dash-quick{width:100%;justify-content:center;text-align:center;padding:.55rem}

  /* Login */
  .card--login{border-radius:0;box-shadow:none;padding:1.5rem 1rem}
  .card{border-radius:10px;padding:1rem}

  /* Formulare: touch-friendly */
  .form input,.form select,.form textarea{
    font-size:16px;        /* verhindert Auto-Zoom auf iOS */
    padding:.65rem .75rem;
    min-height:44px;       /* Apple HIG Mindestgröße */
  }
  .btn{
    width:100%;text-align:center;
    padding:.75rem 1rem;
    min-height:48px;font-size:1rem;
  }
  .btn--ghost{width:auto}
  .actions{flex-direction:column}
  .actions .btn,.actions .btn--ghost{width:100%;text-align:center}

  /* Kachel-Grid */
  .kachel-grid{grid-template-columns:1fr}

  /* Tabellen allgemein */
  .tablewrap{border-radius:10px}
  .tbl th,.tbl td{padding:.5rem .6rem;font-size:.85rem}

  /* head-row stapeln */
  .head-row{flex-direction:column;align-items:flex-start;gap:.5rem}
  .head-row .btn,.head-row .btn--ghost{width:100%;text-align:center}

  /* Filterbar stapeln */
  .filterbar{flex-direction:column;gap:.5rem}
  .filterbar input{width:100%}

  /* Flash: ganzer Rand */
  .flash{border-radius:0;margin-left:-.65rem;margin-right:-.65rem;padding:.65rem 1rem}

  /* Wochenrapport-Tabelle: Tag-Zeilen vereinfacht */
  .day-row td:last-child .t-out{font-size:1rem;font-weight:700}

  /* Footer kompakt */
  .foot{font-size:.72rem;padding:1rem}
}

/* iPhone Landscape (max-height statt max-width – trifft Phones, nicht Tablets/Desktop) */
@media(orientation:landscape) and (max-height:500px){
  .topbar-safe-area{height:env(safe-area-inset-top)}
  .topbar{padding:.3rem max(1rem, env(safe-area-inset-right)) .3rem max(1rem, env(safe-area-inset-left));gap:.6rem;min-height:40px}
  .brand-logo-wrap{width:28px;height:28px}
  .brand-logo-wrap img{width:22px;height:22px}
  .dash-brand{padding:.8rem .75rem .4rem}
  .dash-logo-box{width:52px;height:52px}
  .dash-logo-img{width:42px;height:42px}
  .dash-title{font-size:1.2rem}
}

/* Extra klein (≤ 380px – kleine Android-Geräte) */
@media(max-width:380px){
  /* 03.08.2026 (IO-158): .nav-Regeln entfernt – siehe oben. */
  .dash-title{font-size:1.15rem}
}

/* 03.08.2026 (Befund IO-158): .dash-tile--clickable und .dash-tile-hint entfernt –
   keine Vorlage nutzt sie mehr (die Startseite arbeitet mit .home-tile). */

/* ── Dashboard: Vier-Kacheln-Struktur ── */
/* 03.08.2026 (Befund IO-158): .dash-tiles und .dash-tiles--single entfernt –
   von keiner Vorlage mehr benutzt (die Startseite arbeitet mit .home-tile). */
.dash-tile{
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.09);
  overflow:hidden;
}
/* 21.06.2026: ruhigeres Kachel-Design – weiße Karten statt durchgehendem Gelb.
   Titelzeile weiß, dünne Trennlinie; Gelb/Rot nur noch für Badges/Hinweise. */
.dash-tile-head{
  background:#fff;
  color:var(--primary);
  padding:.95rem 1.3rem;
  font-size:1.05rem;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:.7rem;
  border-bottom:1px solid #eef2f7;
}
/* Symbol-Chip: kleines, dezent gelb hinterlegtes Quadrat als Akzent. */
.dash-tile-icon{
  font-size:1.15rem;flex-shrink:0;
  width:2rem;height:2rem;border-radius:9px;
  background:rgba(255,212,0,.18);
  display:inline-flex;align-items:center;justify-content:center;
}
.dash-tile-body{display:flex;flex-direction:column}
.dash-tile-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.8rem 1.3rem;
  color:var(--primary);
  font-weight:600;
  font-size:.97rem;
  border-bottom:1px solid #f0f4f9;
  transition:background .1s;
}
.dash-tile-link:last-child{border-bottom:0}
.dash-tile-link:hover{
  background:var(--bg);
  text-decoration:none;
  color:var(--primary);
}
.dash-tile-count{
  font-size:.8rem;font-weight:700;
  background:rgba(11,55,109,.09);color:var(--muted);
  border-radius:20px;padding:.1rem .65rem;flex-shrink:0;
}
.dash-tile-badge{
  font-size:.8rem;font-weight:700;
  background:#fee2e2;color:#b91c1c;
  border-radius:20px;padding:.1rem .65rem;flex-shrink:0;
}
/* Karte "in Vorbereitung": gelber Balken bleibt, Karte nur leicht gedämpft + Hinweis-Badge */
.dash-tile--soon{opacity:.92;cursor:default}
.dash-tile-soon-badge{
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
  background:rgba(11,55,109,.12);color:var(--primary);
  border-radius:20px;padding:.12rem .6rem;margin-left:auto;flex-shrink:0;
}
@media(max-width:640px){
  /* 03.08.2026 (IO-158): .dash-tiles-Regeln entfernt – siehe oben. */
}

/* ── Dashboard: "Zu erledigen"-Liste (21.06.2026) ──
   Ersetzt die früheren Zahlen-Kacheln. Kompakte Liste, nur offene Punkte.
   Rote Zahl = Handlungsbedarf. Tippflächen mind. 48px hoch. */
.dash-todo{
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.09);
  overflow:hidden;
  margin-bottom:1rem;
}
.dash-todo-row{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-height:52px;
  padding:.6rem 1.1rem;
  border-bottom:1px solid #f0f4f9;
  color:var(--primary);
  font-weight:600;
}
.dash-todo-row:last-child{border-bottom:0}
.dash-todo-row:hover{background:var(--bg);text-decoration:none;color:var(--primary)}
.dash-todo-num{
  flex-shrink:0;
  min-width:1.9rem;height:1.9rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:#b91c1c;color:#fff;
  font-size:.92rem;font-weight:800;
  border-radius:20px;padding:0 .45rem;
}
.dash-todo-label{flex:1;font-size:.97rem}
.dash-todo-arrow{flex-shrink:0;color:var(--muted);font-size:1.3rem;line-height:1}

/* ── Dashboard: Info-Pinnwand „Aktuelles" (21.06.2026, Teil B) ──
   Interner Infokanal an alle. Gleiche Kartenoptik wie die übrigen Bereiche. */
/* Info-Kachel auf der Startseite (21.06.2026): führt auf die eigene Info-Seite.
   Ersetzt die frühere Inline-Liste „Aktuelles". */
.dash-info-kachel{
  display:flex;align-items:center;gap:.8rem;
  max-width:860px;margin:1.2rem auto 0;
  background:#fff;border:1px solid var(--accent);
  border-radius:14px;padding:.85rem 1rem;
  text-decoration:none;color:inherit;
}
.dash-info-kachel:hover{box-shadow:0 2px 14px rgba(0,0,0,.09)}
.dash-info-icon{
  flex-shrink:0;font-size:1.2rem;
  width:2.4rem;height:2.4rem;border-radius:10px;
  background:rgba(255,212,0,.18);
  display:inline-flex;align-items:center;justify-content:center;
}
.dash-info-body{flex:1;min-width:0}
.dash-info-titel{
  display:flex;align-items:center;gap:.5rem;
  font-weight:800;color:var(--primary);font-size:1.05rem;
}
.dash-info-badge{
  background:var(--accent);color:#12263a;
  font-size:.72rem;font-weight:700;padding:.1rem .55rem;border-radius:20px;
}
.dash-info-hint{display:block;font-size:.85rem;color:var(--muted);margin-top:.15rem}
.dash-info-arrow{flex-shrink:0;color:var(--muted);font-size:1.3rem}

/* Info-Seite: Karten-Liste der Einträge (21.06.2026) */
.info-card{
  background:#fff;border:1px solid #e7edf3;border-radius:12px;
  padding:.85rem 1rem;margin:0 0 .7rem;
}
.info-card--neu{border-left:4px solid var(--accent);border-radius:0 12px 12px 0}
.info-card--gelesen{opacity:.78}
.info-card-titel{font-weight:700;color:var(--primary);font-size:1rem}
.info-card-text{margin-top:.3rem;font-size:.92rem;color:var(--muted);line-height:1.5}
.info-card-meta{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.info-card-aktionen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.info-neu-badge{
  background:var(--accent);color:#12263a;
  font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:20px;margin-right:.4rem;
}
@media(max-width:640px){
  .dash-info-kachel{margin-top:1.1rem}
}

/* ── Pflege-Seite „Aktuelles" (21.06.2026) ── */
.news-hinweis{color:var(--muted);font-size:.92rem;line-height:1.5;margin:.2rem 0 1rem}
.news-form{margin-bottom:1.5rem}
.news-check{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem}
.news-liste-titel{font-size:1.05rem;color:var(--primary);margin:1.5rem 0 .8rem}
.news-leer{color:var(--muted)}
.news-liste{display:flex;flex-direction:column;gap:.8rem}
.news-eintrag{
  background:#fff;border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);padding:.85rem 1.1rem;
}
.news-eintrag-kopf{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.3rem}
.news-typ{font-weight:700;color:var(--primary);font-size:.9rem}
.news-badge-intern{
  font-size:.72rem;font-weight:700;
  background:#fee2e2;color:#b91c1c;border-radius:20px;padding:.1rem .55rem;
}
.news-zeit{margin-left:auto;font-size:.82rem;color:var(--muted)}
.news-eintrag-titel{font-weight:700;color:var(--ink)}
.news-vorname{font-weight:600;color:var(--muted)}
.news-eintrag-text{margin-top:.25rem;font-size:.92rem;color:var(--muted);line-height:1.45}
.news-loeschen{margin-top:.6rem}

/* ── Google-Bewertung (21.06.2026): handy-optimierte Vorzeige-Seite ── */
.gb-wrap{display:flex;justify-content:center;padding:1rem .75rem 2.5rem}
.gb-card{
  width:100%;max-width:440px;background:#fff;border-radius:20px;
  box-shadow:0 4px 22px rgba(0,0,0,.10);border:2px solid var(--primary);
  padding:1.6rem 1.4rem 2rem;text-align:center;
}
.gb-logo img{width:96px;height:96px;object-fit:contain}
.gb-marke{color:var(--primary);font-weight:800;letter-spacing:.04em;font-size:1.05rem;margin:.4rem 0 .2rem}
.gb-headline{color:var(--ink);font-weight:800;font-size:1.5rem;line-height:1.2;margin:.8rem 0 .4rem}
.gb-stars{color:#f5b400;font-size:1.9rem;letter-spacing:.15rem;margin:.1rem 0 .2rem}
.gb-sub{color:var(--primary);font-weight:800;font-size:1.15rem;margin:.2rem 0 1rem}
.gb-qrbox{
  background:#fff;border:3px solid var(--primary);border-radius:16px;
  padding:14px;display:inline-block;margin:.2rem auto .9rem;
}
.gb-qr{display:block;width:min(74vw,300px);height:auto;image-rendering:pixelated}
.gb-hint{color:var(--muted);font-size:.95rem;line-height:1.5;margin-bottom:1.1rem}
.gb-link{
  display:inline-block;background:var(--primary);color:#fff;font-weight:700;
  padding:.7rem 1.3rem;border-radius:10px;text-decoration:none;
}
.gb-link:hover{background:var(--primary-d);color:#fff;text-decoration:none}

/* ── Dashboard: Bereich "Meine Arbeit" (19.06.2026) ──
   Oberer Fokus-Bereich: Zahlen-Kacheln + EINE ausgeklappte Liste des Hauptbereichs.
   Gleiche Breite/Optik wie die Navigations-Kacheln darunter. */
.dash-fokus{
  max-width:860px;
  margin:1.5rem auto .5rem;
  padding:0 1rem;
}
.dash-fokus-title{
  font-size:1.05rem;
  font-weight:800;
  color:var(--primary);
  margin:0 .2rem .8rem;
}
.dash-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem;
  margin-bottom:1rem;
}
.dash-kpi{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.09);
  padding:1rem 1.2rem;
  text-decoration:none;
  transition:transform .12s,box-shadow .12s;
}
.dash-kpi:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.13);
  text-decoration:none;
}
.dash-kpi-num{
  font-size:2rem;
  font-weight:800;
  line-height:1.1;
  color:var(--primary);
}
.dash-kpi-label{
  font-size:.9rem;
  font-weight:600;
  color:var(--muted);
}
/* Fokus-Liste: gleiche Optik wie dash-list, aber außerhalb des Kachel-Rasters. */
.dash-list--fokus{
  grid-column:auto;
}
@media(max-width:640px){
  .dash-fokus{padding:0 .75rem;margin-top:1.1rem}
  .dash-kpis{grid-template-columns:1fr;gap:.8rem}
  .dash-kpi-num{font-size:1.7rem}
}

/* ── Dashboard-Listen (18.06.2026): offene Einträge unter den Kacheln ──
   Volle Breite im 2-Spalten-Raster (grid-column:1/-1). Reines Anzeige-Element. */
.dash-list{
  grid-column:1 / -1;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 14px rgba(0,0,0,.09);
  overflow:hidden;
}
.dash-list-head{
  background:var(--accent);
  color:var(--primary);
  padding:.8rem 1.3rem;
  font-size:1rem;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
}
.dash-list-count{
  font-size:.8rem;font-weight:700;
  background:rgba(11,55,109,.12);color:var(--primary);
  border-radius:20px;padding:.1rem .65rem;flex-shrink:0;
}
.dash-list-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1.3rem;
  color:var(--primary);
  font-size:.95rem;
  border-bottom:1px solid #f0f4f9;
  transition:background .1s;
}
.dash-list-row:hover{background:var(--bg);text-decoration:none;color:var(--primary)}
.dash-list-main{font-weight:600}
.dash-list-sub{color:var(--muted);font-size:.86rem;text-align:right}
.dash-list-empty{
  padding:.8rem 1.3rem;color:var(--muted);font-size:.92rem;
  border-bottom:1px solid #f0f4f9;
}
.dash-list-all{
  display:block;
  padding:.65rem 1.3rem;
  color:var(--primary);
  font-weight:700;
  font-size:.9rem;
  text-align:right;
}
.dash-list-all:hover{background:var(--bg);text-decoration:none}

/* ── FAB: Support / Feedback ── */
/* 22.07.2026: Optik jetzt im Block „Design-Überarbeitung io" weiter unten definiert
   (.fab-support/.fab-badge, KONZEPT_DESIGN_IO.md) – hier bewusst NICHT doppelt
   gepflegt, um zwei Quellen für dieselbe Klasse zu vermeiden. */

/* ── Time stepper (+15 / -15 buttons) ── */
.t-wrap{display:flex;align-items:center;gap:2px;width:100%}
.t-wrap>input[type="time"]{flex:1;width:auto !important;min-width:0}
.t-step{
  flex-shrink:0;
  background:var(--primary);color:#fff;
  border:0;border-radius:5px;
  width:0;height:0;           /* hidden on desktop – no layout space */
  overflow:hidden;
  font-size:1rem;font-weight:700;
  cursor:pointer;padding:0;line-height:1;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
  transition:background .12s;
}
.t-step:hover{background:var(--primary-d)}
/* Show buttons on mobile card layout */
@media(max-width:1023px){
  .t-step{width:38px;height:38px;font-size:1.2rem;border-radius:7px}
  .t-wrap>input[type="time"]{font-size:16px;min-height:38px}
}

/* ── Art-Chips (ersetzt Select) ── */
.art-chips{display:flex;flex-wrap:wrap;gap:.25rem}
.art-chip{
  padding:.22rem .55rem;border:1px solid #cfd6df;border-radius:20px;
  font-size:.78rem;font-weight:700;cursor:pointer;
  background:#fff;color:var(--muted);transition:all .12s;white-space:nowrap;line-height:1.4
}
.art-chip:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.art-chip--active{background:var(--primary);color:#fff;border-color:var(--primary)}
.art-chip--active[data-val="urlaub"]  {background:#15803d;border-color:#15803d}
.art-chip--active[data-val="krank"]   {background:#a16207;border-color:#a16207}
.art-chip--active[data-val="schule"]  {background:#6d28d9;border-color:#6d28d9}
.art-chip--active[data-val="feiertag"]{background:#b91c1c;border-color:#b91c1c}
.art-chip--active[data-val="frei"]    {background:#374151;border-color:#374151}
/* Alt-Tag mit art='notdienst' (nicht mehr auswählbar, nur Bestandsanzeige) */
.art-chip--alt{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.art-chip:disabled{opacity:.4;cursor:not-allowed}
@media(min-width:1024px){
  .art-chip{padding:.13rem .35rem;font-size:.7rem}
  .art-chips{gap:.12rem}
}

/* ── Pause: Desktop zeigt TD-Spalten, Mobile zeigt pause-section-row ── */
@media(min-width:1024px){ .pause-section-row{ display:none !important } }
@media(max-width:1023px){ .tbl.tbl--form .day-row .pause-cell{ display:none !important } }

/* ══════════════════════════════════════════════════════════
   WOCHENRAPPORT – MOBILE APP DESIGN
   ══════════════════════════════════════════════════════════ */

/* ── Mobiler Wochenkopf (Desktop: ausgeblendet) ── */
.mob-week-header{display:none}

/* ── Gemeinsame Komponenten (alle Viewports) ── */
.day-abbr-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--primary);color:#fff;
  font-size:.78rem;font-weight:800;flex-shrink:0;letter-spacing:-.01em;
}
.day-hdr-info{display:flex;flex-direction:column;gap:.03rem;min-width:0;flex:1;overflow:hidden}
.day-hdr-name{font-size:.93rem;font-weight:800;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-hdr-date{font-size:.77rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day-ft-badge{
  font-size:.7rem;font-weight:700;background:#fef3c7;color:#92400e;
  border-radius:20px;padding:.1rem .48rem;white-space:nowrap;flex-shrink:0;
}
.day-hdr-right{display:flex;align-items:center;gap:.45rem;flex-shrink:0}
.pause-section-td{padding:.5rem .75rem !important;background:#f8fafc;border-top:1px dashed #e5e7eb}

/* Art-Badge Farben je Tag-Typ */
.day-toggle-row[data-art="urlaub"]   .day-abbr-badge{background:#16a34a}
.day-toggle-row[data-art="krank"]    .day-abbr-badge{background:#d97706}
.day-toggle-row[data-art="feiertag"] .day-abbr-badge{background:#dc2626}
.day-toggle-row[data-art="schule"]   .day-abbr-badge{background:#7c3aed}
.day-toggle-row[data-art="frei"]     .day-abbr-badge{background:#9ca3af}

/* Zeitbereich-Anzeige im Karten-Header */
.tg-time-range{
  font-size:.77rem;font-weight:600;color:var(--muted);
  white-space:nowrap;flex-shrink:0;
}
.day-open .tg-time-range{display:none}

/* Pause-Trigger-Zelle: auf Desktop ausblenden */
@media(min-width:1024px){
  .mob-pause-trigger-cell{display:none !important}
}

/* ══════════════════════════════════════════════════════════
   MOBILE (max-width:1023px)
   ══════════════════════════════════════════════════════════ */
@media(max-width:1023px){

  /* ── Mobiler Wochenkopf: App-Bar-Stil ── */
  .mob-week-header{
    display:flex;align-items:stretch;gap:.7rem;
    background:var(--primary);color:#fff;
    border-radius:14px;padding:.85rem .8rem;
    margin-bottom:1.1rem;
    box-shadow:0 4px 16px rgba(11,55,109,.22);
  }
  /* KW-Navigationspfeile (ersetzen mobil die Jahr/KW-Auswahl oben) */
  .mob-week-nav{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    min-width:2.6rem;background:rgba(255,255,255,.15);border-radius:10px;
    color:#fff;font-size:1.9rem;font-weight:700;line-height:1;
    text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;
  }
  .mob-week-nav:active{background:rgba(255,255,255,.32)}
  /* Jahr/KW-Auswahl oben mobil ausblenden – Navigation läuft über die Pfeile. */
  .wr-period-field{display:none !important}
  .mob-week-kw{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(255,255,255,.15);border-radius:10px;
    padding:.5rem .85rem;min-width:3.8rem;flex-shrink:0;gap:.1rem;
  }
  .mob-week-kw-num{
    font-size:2.2rem;font-weight:900;line-height:1;letter-spacing:-.03em;
  }
  .mob-week-kw-label{
    font-size:.62rem;opacity:.8;text-transform:uppercase;
    letter-spacing:.1em;font-weight:700;
  }
  .mob-week-center{
    flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.2rem;
  }
  .mob-week-year{font-size:.78rem;opacity:.75;font-weight:600}
  .mob-week-range{font-size:.88rem;font-weight:700;line-height:1.3}

  /* ── Desktop Zeitraum-Box ausblenden ── */
  .wr-zeitraum-box{display:none}

  /* ── row3: kompakter auf Mobil ── */
  .row3{gap:.5rem !important;margin-bottom:.75rem !important}
  .row3 label{font-size:.78rem !important}
  .row3 select,.row3 input[type="number"]{
    font-size:.9rem !important;padding:.35rem .4rem !important;
  }

  /* ── Tabelle auf Block setzen → kein horizontales Überlaufen ── */
  .tbl.tbl--form,.tbl.tbl--form tbody,.tbl.tbl--form tfoot{
    display:block !important;width:100% !important;max-width:100% !important;
  }
  .tbl.tbl--form thead{display:none !important}
  #wr-tablewrap{overflow-x:hidden !important}

  /* ── Generische tr-Stile für Tag-Karten-Rows aufheben ── */
  .tbl.tbl--form .day-toggle-row,
  .tbl.tbl--form .day-row,
  .tbl.tbl--form .pause-section-row,
  .tbl.tbl--form .extra-pos-row,
  .tbl.tbl--form .pos-add-row,
  .tbl.tbl--form .nd-row,
  .tbl.tbl--form .nd-add-row{
    border:none !important;border-radius:0 !important;
    margin:0 !important;box-shadow:none !important;overflow:visible !important;
  }

  /* ── Toggle-Row: App-Karte Header ── */
  .tbl.tbl--form .day-toggle-row{
    margin-top:1rem !important;
    border:1.5px solid #e2e8f0 !important;
    border-left:5px solid var(--primary) !important;
    border-radius:14px !important;
    box-shadow:0 2px 10px rgba(11,55,109,.1) !important;
    overflow:hidden !important;
    background:#fff !important;
  }
  /* Art-spezifische Accent-Farben für linken Kartenrand */
  .tbl.tbl--form .day-toggle-row[data-art="urlaub"]   {border-left-color:#16a34a !important}
  .tbl.tbl--form .day-toggle-row[data-art="krank"]    {border-left-color:#d97706 !important}
  .tbl.tbl--form .day-toggle-row[data-art="feiertag"] {border-left-color:#dc2626 !important}
  .tbl.tbl--form .day-toggle-row[data-art="schule"]   {border-left-color:#7c3aed !important}
  .tbl.tbl--form .day-toggle-row[data-art="frei"]     {border-left-color:#9ca3af !important}
  .tbl.tbl--form .day-toggle-row.day-open{
    border-radius:14px 14px 0 0 !important;
    border-bottom-color:transparent !important;
    box-shadow:0 -1px 4px rgba(11,55,109,.08) !important;
  }
  /* Generische td-Regel (display:flex + ::before-Label mit min-width:8.5rem) für den
     Karten-Kopf zurücksetzen – sonst reserviert ein leeres Phantom-Label Platz links
     und drängt Tagname/Zeit/Badge über den Kartenrand (Abschneiden). */
  .day-toggle-cell{display:block !important;padding:.8rem 1rem !important}
  .day-toggle-cell::before{display:none !important}
  .day-toggle-header{display:flex;align-items:center;gap:.65rem;width:100%;min-width:0}

  /* ── Größerer Day-Badge ── */
  .day-abbr-badge{
    width:3.1rem;height:3.1rem;font-size:.88rem;font-weight:900;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
  }
  .day-hdr-name{font-size:1.02rem;font-weight:900}
  .day-hdr-date{font-size:.82rem}

  /* ── Stunden-Badge: farbiges Pill ── */
  .tg-hours{font-size:.88rem;font-weight:800;white-space:nowrap}
  .tg-hours--ok{
    background:#d1fae5;color:#065f46;
    padding:.28rem .75rem;border-radius:20px;
    font-size:.9rem;font-weight:900;
  }
  .tg-hours--special{
    background:#fef3c7;color:#92400e;
    padding:.28rem .75rem;border-radius:20px;
    font-size:.88rem;font-weight:800;
  }
  .tg-hours--feiertag{
    background:#fee2e2;color:#b91c1c;
    padding:.28rem .75rem;border-radius:20px;
    font-size:.88rem;font-weight:800;
  }
  /* Geschlossene Arbeitstage zeigen schon den Zeitbereich (08:00 – 15:00) –
     die grüne Stunden-Pille daneben wäre doppelt und drängt den Header über den
     Kartenrand. Daher nur in der geöffneten Karte zeigen. Spezialtage
     (Urlaub/Frei/Krank/Feiertag) haben keinen Zeitbereich und behalten ihre Pille. */
  .day-toggle-row:not(.day-open) .tg-hours--ok{display:none !important}

  /* ── Day-Row: Karten-Körper ── */
  .tbl.tbl--form .day-row{
    border:1.5px solid #e2e8f0 !important;border-top:none !important;
    border-left:5px solid var(--primary) !important;
    background:#fff !important;
  }
  .tbl.tbl--form .day-row[data-art="urlaub"]   {border-left-color:#16a34a !important}
  .tbl.tbl--form .day-row[data-art="krank"]    {border-left-color:#d97706 !important}
  .tbl.tbl--form .day-row[data-art="feiertag"] {border-left-color:#dc2626 !important}
  .tbl.tbl--form .day-row[data-art="schule"]   {border-left-color:#7c3aed !important}
  .tbl.tbl--form .day-row[data-art="frei"]     {border-left-color:#9ca3af !important}

  .tbl.tbl--form .pause-section-row{
    border:1.5px solid #e2e8f0 !important;border-top:1px solid #f0f4f9 !important;
    border-left:5px solid #e2e8f0 !important;
  }
  .tbl.tbl--form .extra-pos-row,.tbl.tbl--form .nd-row{
    border:1.5px solid #e2e8f0 !important;border-top:1px solid #f0f4f9 !important;
    border-left:5px solid #e2e8f0 !important;
  }
  .tbl.tbl--form .pos-add-row,.tbl.tbl--form .nd-add-row{
    border:1.5px solid #e2e8f0 !important;border-top:1px solid #f0f4f9 !important;
    border-left:5px solid #e2e8f0 !important;
  }

  /* Letztes Element einer Karten-Gruppe (per JS gesetzt) */
  .tbl.tbl--form .day-card-bottom{
    border-bottom:1.5px solid #e2e8f0 !important;
    border-radius:0 0 14px 14px !important;
    box-shadow:0 4px 14px rgba(11,55,109,.1) !important;
    overflow:hidden !important;
  }

  /* ── Zellen in Day-Row ── */
  .tbl.tbl--form .day-row td{
    display:block !important;width:100% !important;
    border:none !important;border-bottom:1px solid #f3f5f8 !important;
    padding:.65rem 1rem !important;
  }
  .tbl.tbl--form .day-row td:last-child{border-bottom:none !important}
  .tbl.tbl--form .day-row td::before{display:none !important}

  /* Tag + Std ausblenden (im Karten-Header enthalten) */
  .tbl.tbl--form .day-row td[data-label="Tag"],
  .tbl.tbl--form .day-row td[data-label="Std"]{display:none !important}

  /* 15.06.2026: Auftrags-Nr./Baustelle aus der Hauptzeile entfernt – die leeren
     Platzhalter-Zellen mobil ausblenden (auf Desktop bleiben sie für die Spalten-
     Ausrichtung als leere Zellen sichtbar). Erfassung nur noch über „+ Baustelle". */
  .tbl.tbl--form .day-row td.main-bs-removed{display:none !important}

  /* ── Art-Chips: native Pill-Selector ── */
  .tbl.tbl--form .day-row td[data-label="Art"]{
    padding:.65rem 1rem .55rem !important;
    border-bottom:1px solid #f3f5f8 !important;
  }
  .art-chips{
    flex-wrap:nowrap !important;overflow-x:auto !important;
    padding-bottom:0 !important;gap:.4rem !important;scrollbar-width:none;
  }
  .art-chips::-webkit-scrollbar{display:none}
  .art-chip{
    padding:.52rem .95rem !important;font-size:.84rem !important;
    white-space:nowrap !important;flex-shrink:0 !important;
    border-radius:22px !important;font-weight:800 !important;
    min-height:2.4rem !important;
    display:inline-flex !important;align-items:center !important;gap:.25rem !important;
  }

  /* ── Beginn + Ende: große Zeitfelder, jeweils volle Zeilenbreite ──
     15.06.2026: vorher 50% nebeneinander – dort schnitt das native Zeitfeld
     (mit Auswahl-Pfeil) im Hochformat die Minuten ab („11:" statt „11:00").
     Volle Breite = immer genug Platz, in jeder Bildschirm-Ausrichtung. */
  .tbl.tbl--form .day-row td[data-label="Beginn"],
  .tbl.tbl--form .day-row td[data-label="Ende"]{
    display:flex !important;flex-direction:column !important;
    width:100% !important;box-sizing:border-box !important;
    padding:.6rem .9rem !important;gap:.28rem;
    align-items:stretch !important;
    border-bottom:1px solid #f3f5f8 !important;
  }
  .tbl.tbl--form .day-row td[data-label="Beginn"]::before{
    content:"Beginn Arbeitstag" !important;display:block !important;
    font-size:.67rem;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;
  }
  .tbl.tbl--form .day-row td[data-label="Ende"]::before{
    content:"Ende Arbeitstag" !important;display:block !important;
    font-size:.67rem;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;
  }

  /* Kompakte Time inputs + Steppers */
  .t-step{
    width:2.2rem !important;height:2.5rem !important;
    font-size:1.1rem !important;border-radius:9px !important;
  }
  .t-wrap>input[type="time"]{
    font-size:1.15rem !important;min-height:2.5rem !important;
    font-weight:700 !important;text-align:center;
    padding:.3rem .1rem !important;
    border:1.5px solid #dde3eb !important;
    border-radius:9px !important;background:#f8fafc !important;
  }
  .t-wrap>input[type="time"]:not(:disabled):focus{
    border-color:var(--primary) !important;background:#fff !important;outline:none;
  }
  .t-wrap>input[type="time"]:disabled{opacity:.55;background:#f3f4f6 !important}

  /* Pause-Spalten in Day-Row ausblenden */
  .tbl.tbl--form .day-row .pause-cell{display:none !important}

  /* ── Auftragsnr + Baustelle nebeneinander ── */
  .tbl.tbl--form .day-row td[data-label="Auftragsnummer"]{
    display:inline-flex !important;flex-direction:column !important;
    width:38% !important;box-sizing:border-box !important;
    padding:.6rem .75rem !important;gap:.25rem;
    align-items:stretch !important;
    border-right:1px solid #f3f5f8 !important;
    border-bottom:1px solid #f3f5f8 !important;vertical-align:top;
  }
  .tbl.tbl--form .day-row td[data-label="Auftragsnummer"]::before{
    content:"Auftrags-Nr." !important;display:block !important;
    font-size:.67rem;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;
  }
  .tbl.tbl--form .day-row td[data-label="Baustelle"]{
    display:inline-flex !important;flex-direction:column !important;
    width:62% !important;box-sizing:border-box !important;
    padding:.6rem .75rem !important;gap:.25rem;
    align-items:stretch !important;
    border-bottom:1px solid #f3f5f8 !important;vertical-align:top;
  }
  .tbl.tbl--form .day-row td[data-label="Baustelle"]::before{
    content:"Baustelle / Tätigkeit" !important;display:block !important;
    font-size:.67rem;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;
  }

  /* Inputs in Zwei-Spalten-Zellen: volle Breite */
  .tbl.tbl--form .day-row td[data-label="Beginn"] input,
  .tbl.tbl--form .day-row td[data-label="Ende"] input,
  .tbl.tbl--form .day-row .pause-cell input,
  .tbl.tbl--form .day-row td[data-label="Auftragsnummer"] input,
  .tbl.tbl--form .day-row td[data-label="Baustelle"] input{
    width:100% !important;box-sizing:border-box;
  }

  /* Styling für Text-Inputs in Auftrag/Baustelle */
  .tbl.tbl--form .day-row td[data-label="Auftragsnummer"] input[type="text"],
  .tbl.tbl--form .day-row td[data-label="Baustelle"] input[type="text"]{
    min-height:2.4rem !important;padding:.4rem .55rem !important;
    font-size:.9rem !important;
    border:1.5px solid #dde3eb !important;
    border-radius:8px !important;background:#f8fafc !important;
    font-family:inherit;
  }
  .tbl.tbl--form .day-row td[data-label="Auftragsnummer"] input[type="text"]:focus,
  .tbl.tbl--form .day-row td[data-label="Baustelle"] input[type="text"]:focus{
    border-color:var(--primary) !important;background:#fff !important;outline:none;
  }

  /* ── Notdienstbereitschaft ── */
  .tbl.tbl--form .day-row td[data-label="Notdienstbereitschaft"]{
    display:flex !important;align-items:center !important;
    gap:.8rem;padding:.75rem 1rem !important;border-bottom:none !important;
  }
  .tbl.tbl--form .day-row td[data-label="Notdienstbereitschaft"]::before{
    content:"Notdienstbereitschaft" !important;display:block !important;
    font-size:.88rem;font-weight:700;color:var(--ink);flex:1;min-width:0 !important;
  }
  .tbl.tbl--form .day-row td[data-label="Notdienstbereitschaft"] input[type="checkbox"]{
    width:26px !important;height:26px !important;min-height:26px !important;
    flex-shrink:0;cursor:pointer;accent-color:var(--primary);order:-1;
  }

  /* ── Pause-Section Karte ── */
  .pause-section-td{
    display:block !important;
    padding:.65rem 1rem .5rem !important;
    background:#f8fafc !important;
  }
  /* Phantom-Label-Spalte auch in der Pausen-Zelle entfernen (sonst Frühstück-Überlauf). */
  .pause-section-td::before{display:none !important}
  .pause-slot{
    display:flex;flex-direction:column;gap:.35rem;
    padding:.2rem 0;
  }
  .pause-slot--sep{border-top:1px solid #e9edf3;padding-top:.5rem;margin-top:.15rem}
  .pause-slot-filled{
    display:flex;align-items:center;gap:.45rem .5rem;flex-wrap:wrap;width:100%;
  }
  /* Kopfzeile: Icon + Name (dehnt sich) + Löschen rechts.
     Die Zeitfelder rutschen per flex-basis:100% in eine eigene volle Zeile darunter
     -> kein horizontaler Überlauf mehr in schmalen Karten. */
  .pause-slot-icon{font-size:.98rem;flex-shrink:0;order:1}
  .pause-slot-name{
    font-size:.72rem;font-weight:900;color:var(--muted);
    flex:1 1 auto;min-width:0;order:2;text-transform:uppercase;letter-spacing:.05em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pause-slot-del{order:3}
  .pause-slot-times{
    display:flex;align-items:center;gap:.3rem;
    flex:1 1 100%;min-width:0;order:4;margin-top:.15rem;
  }
  .pause-til{color:var(--muted);font-size:.85rem;flex-shrink:0;padding:0 .1rem}
  .pause-slot-times .t-wrap{flex:1;min-width:0}
  .pause-slot-times .t-wrap>input[type="time"]{
    min-height:2.2rem !important;font-size:.95rem !important;
    font-weight:700 !important;text-align:center;
    width:100% !important;padding:.22rem .1rem !important;
    border:1.5px solid #dde3eb !important;
    border-radius:8px !important;background:#fff !important;
  }
  .pause-slot-times .t-step{
    width:2rem !important;height:2rem !important;font-size:1rem !important;
    border-radius:7px !important;
  }
  .pause-slot-del{
    background:none;border:1.5px solid #fca5a5;color:#dc2626;
    border-radius:50%;width:1.75rem;height:1.75rem;min-width:1.75rem;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:.75rem;line-height:1;flex-shrink:0;padding:0;
    touch-action:manipulation;
  }
  .pause-slot-del:hover{background:#fee2e2}
  .pause-slot-add-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    background:none;border:1.5px dashed #c7cdd8;color:#8795a8;
    border-radius:10px;padding:.45rem .8rem;font-size:.84rem;font-weight:800;
    cursor:pointer;width:100%;
    transition:border-color .12s,color .12s;
    min-height:2.4rem;touch-action:manipulation;
  }
  .pause-slot-add-btn:hover{border-color:var(--primary);color:var(--primary)}
  .pause-slot-add-btn span{font-size:1.1rem;line-height:1}
  .pause-slot-none{font-size:.8rem;color:#c8d0db;font-style:italic}

  /* ── Pause-Trigger-Button (nur Mobil) ── */
  .mob-pause-trigger-cell{
    display:block !important;width:100% !important;
    border:none !important;border-top:1px solid #f3f5f8 !important;
    padding:.45rem 1rem .55rem !important;background:#f8fafc !important;
    text-align:center !important;
  }
  .mob-pause-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    background:none;border:1.5px dashed #c7cdd8;color:#8795a8;
    border-radius:10px;padding:.4rem 1.2rem;font-size:.84rem;font-weight:800;
    cursor:pointer;min-height:2.2rem;touch-action:manipulation;width:100%;
    transition:border-color .12s,color .12s;
  }
  .mob-pause-btn:hover{border-color:var(--primary);color:var(--primary)}

  /* ── Wochensumme (tfoot) ── */
  .tbl.tbl--form tfoot tr{
    border:none !important;border-radius:14px !important;margin-top:1.1rem !important;
    overflow:hidden !important;background:var(--primary) !important;
    box-shadow:0 4px 16px rgba(11,55,109,.25) !important;
  }
  .tbl.tbl--form tfoot td{
    display:flex !important;justify-content:space-between !important;align-items:center;
    color:#fff !important;font-size:1.1rem !important;font-weight:900 !important;
    padding:.9rem 1.1rem !important;border:none !important;letter-spacing:.01em;
  }

  /* ── Extra-Baustellen-Zeile („+ Baustelle"): Karten-Layout + Beschriftungen (Mobil)
     15.06.2026 – bisher waren die Felder dieser Zeile auf dem Handy ohne Label.
     Layout spiegelt die normale Tageszeile (Beginn/Ende, Auftrags-Nr./Baustelle). ── */
  .tbl.tbl--form .extra-pos-row td{
    display:block !important;width:100% !important;
    border:none !important;border-bottom:1px solid #f3f5f8 !important;
    padding:.6rem 1rem !important;vertical-align:top;
  }
  /* ↳-Spalte, leere Abstandszellen und die Einzel-Std-Anzeige mobil ausblenden */
  .tbl.tbl--form .extra-pos-row td:first-child,
  .tbl.tbl--form .extra-pos-row td.extra-pos-std,
  .tbl.tbl--form .extra-pos-row td:not([data-label]):empty{display:none !important}

  /* Jedes Feld der „+ Baustelle"-Zeile auf voller Zeilenbreite (gestapelt) –
     15.06.2026: vorher nebeneinander (inline-flex 50%/38%/62%), wodurch die
     Zeitfelder im Hochformat abgeschnitten wurden und die Zellen durch
     Whitespace unsauber umbrachen. Volle Breite = Uhrzeit immer vollständig. */
  .tbl.tbl--form .extra-pos-row td[data-label="Beginn"],
  .tbl.tbl--form .extra-pos-row td[data-label="Ende"],
  .tbl.tbl--form .extra-pos-row td[data-label="Auftragsnummer"],
  .tbl.tbl--form .extra-pos-row td[data-label="Baustelle"]{
    display:flex !important;flex-direction:column !important;
    width:100% !important;box-sizing:border-box !important;
    padding:.6rem .9rem !important;gap:.28rem;align-items:stretch !important;
  }
  .tbl.tbl--form .extra-pos-row td[data-label="Beginn"]::before{content:"Beginn" !important}
  .tbl.tbl--form .extra-pos-row td[data-label="Ende"]::before{content:"Ende" !important}
  .tbl.tbl--form .extra-pos-row td[data-label="Auftragsnummer"]::before{content:"Auftrags-Nr." !important}
  .tbl.tbl--form .extra-pos-row td[data-label="Baustelle"]::before{content:"Baustelle / Tätigkeit" !important}

  /* gemeinsames Label-Styling der Extra-Zeile */
  .tbl.tbl--form .extra-pos-row td[data-label]::before{
    display:block !important;font-size:.67rem;font-weight:800;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;
  }
  /* Text-Inputs der Extra-Zeile: volle Breite, touch-tauglich (16px = kein iOS-Zoom) */
  .tbl.tbl--form .extra-pos-row td[data-label] input[type="text"]{
    width:100% !important;box-sizing:border-box;
    min-height:2.4rem !important;padding:.4rem .55rem !important;
    font-size:16px !important;
    border:1.5px solid #dde3eb !important;border-radius:8px !important;
    background:#f8fafc !important;font-family:inherit;
  }
  .tbl.tbl--form .extra-pos-row td[data-label] input[type="text"]:focus{
    border-color:var(--primary) !important;background:#fff !important;outline:none;
  }
  /* Löschen-Knopf der Extra-Zeile: eigene Zeile, gut erreichbar */
  .tbl.tbl--form .extra-pos-row td:has(.btn-del-pos){
    text-align:right !important;padding:.35rem 1rem .6rem !important;border-bottom:none !important;
  }

  /* ── Punkt 3 (15.06.2026): Zeitfelder dürfen NICHT unter die Breite von „07:00"
     schrumpfen. Vorher griff min-width:0 (flex), wodurch das Handy im Hochformat
     die zentrierte Uhrzeit auf „7" abschnitt. Mindestbreite sichern; im Querformat
     bleibt das Feld dank flex:1 weiterhin breiter. ── */
  .tbl.tbl--form .day-row .t-wrap>input[type="time"],
  .tbl.tbl--form .extra-pos-row .t-wrap>input[type="time"]{
    min-width:3.6rem !important;flex:1 1 auto !important;
    padding-left:.05rem !important;padding-right:.05rem !important;
  }
}

/* ── Fehlerseite: Code-Box & Admin-Detail ── */
.fehler-code-box{
  display:inline-block;background:#eef2ff;border:1.5px solid #c7d2fe;border-radius:8px;
  padding:.45rem .9rem;font-size:.9rem;color:#3730a3;margin:.6rem 0 .9rem;
}
.fehler-code-box strong{ font-family:monospace;font-size:1.05em;letter-spacing:.05em }
.fehler-detail{
  background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;
  padding:.7rem 1rem;font-size:.8rem;color:#475569;overflow-x:auto;
  white-space:pre-wrap;word-break:break-word;margin:.4rem 0 1rem;
}

/* ============================================================
   Aufgabenboard (22.06.2026)
   ========================================================== */
/* kleine + gefährliche Knopf-Varianten (allgemein nutzbar) */
.btn--small{padding:.3rem .7rem;font-size:.8rem}
.btn--danger{background:#b91c1c}
.btn--danger:hover{background:#991b1b;color:#fff}

.aufg-kopf{display:flex;align-items:center;gap:.8rem;margin:.4rem 0 1rem}
.aufg-logo{height:42px;width:auto}
.aufg-kopf h1{margin:0;font-size:1.3rem}

.aufg-form{margin-bottom:1.4rem}
.aufg-form-titel{margin:0 0 .6rem;font-size:1.05rem}
.aufg-form-zeile{display:flex;gap:.8rem;flex-wrap:wrap}
.aufg-form-zeile label{flex:1 1 160px}

.aufg-gruppe{margin:1.2rem 0}
.aufg-gruppe-name{
  font-size:1.05rem;margin:0 0 .5rem;padding-bottom:.3rem;
  border-bottom:2px solid var(--accent,#e7b008);color:var(--primary,#0b376d);
}
.aufg-liste{display:flex;flex-direction:column;gap:.6rem}

.aufg-card{
  background:#fff;border:1px solid #e2e8f0;border-left:4px solid var(--primary,#0b376d);
  border-radius:8px;padding:.7rem .85rem;
}
.aufg-card--done{opacity:.7;border-left-color:#15803d}
.aufg-card-top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.aufg-card-titel{font-weight:700;margin-right:auto}
.aufg-card-text{margin:.4rem 0 0;font-size:.9rem;color:#334155}
.aufg-card-meta{margin-top:.4rem;font-size:.82rem;color:#475569}
.aufg-overdue{color:#b91c1c;font-weight:700}
.aufg-card-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.aufg-inline{display:inline}
.aufg-leer{color:#64748b;text-align:center;padding:1.2rem}
.aufg-serie-form{display:inline-flex;gap:.3rem;align-items:center}
.aufg-serie-select{padding:.25rem .4rem;font-size:.8rem;border:1px solid #cbd5e1;border-radius:6px}
.aufg-serien{margin:1.6rem 0}

/* Aufgaben-Heute-Box auf der Startseite */
.dash-aufg-heute{
  display:flex;align-items:center;gap:.8rem;max-width:860px;
  margin:.6rem auto 0;padding:.7rem 1rem;background:#fff;text-decoration:none;color:inherit;
  border:1px solid #e2e8f0;border-left:4px solid #15803d;border-radius:10px;
}
.dash-aufg-heute:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);text-decoration:none}
.dash-aufg-heute-zahl{font-size:1.3rem;font-weight:800;color:#15803d;min-width:3.2rem;text-align:center}
.dash-aufg-heute-body{display:flex;flex-direction:column;margin-right:auto}
.dash-aufg-heute-titel{font-weight:700}
.dash-aufg-heute-sub{font-size:.85rem;color:#475569}
.dash-aufg-heute-liste{
  max-width:860px;margin:.3rem auto 0;padding:.2rem 1rem;
  display:flex;flex-direction:column;gap:.25rem;
}
.dash-aufg-row{display:flex;gap:.5rem;align-items:center;font-size:.86rem;padding:.2rem 0;border-bottom:1px solid #f1f5f9}
.dash-aufg-row-status{flex:0 0 auto}
.dash-aufg-row-titel{flex:1 1 auto;font-weight:600;color:#334155}
.dash-aufg-row-name{flex:0 0 auto;color:#64748b}

/* Mein Überblick (22.06.2026) */
.ueb-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .8rem}
.ueb-tab{
  text-decoration:none;border:1px solid #cbd5e1;border-radius:999px;
  padding:.3rem .9rem;font-size:.85rem;color:var(--primary,#0b376d);background:#fff;
}
.ueb-tab:hover{background:#f1f5f9;text-decoration:none}
.ueb-tab--active{background:var(--primary,#0b376d);color:#fff;border-color:var(--primary,#0b376d)}
.ueb-todo{display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .8rem}
.ueb-todo-item{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:inherit;
  background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:.4rem .7rem;font-size:.86rem;
}
.ueb-todo-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);text-decoration:none}
.ueb-todo-num{font-weight:800;color:var(--primary,#0b376d);background:#eef2f7;border-radius:999px;padding:0 .5rem}
.ueb-subtitel{font-size:.95rem;margin:.6rem 0 .4rem;color:#334155}

/* Info „Aktuelles": bearbeiten / abgelaufen (22.06.2026) */
.news-eintrag-aktionen{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.5rem}
.news-eintrag--abgelaufen{opacity:.72;border-left:4px solid #b45309}
.news-badge-abgelaufen{
  background:#fef3c7;color:#92400e;border-radius:999px;
  padding:.1rem .55rem;font-size:.72rem;font-weight:700;
}

/* Fahrzeug-Dashboard (22.06.2026) */
.fz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;max-width:1000px;margin-top:1rem}
.fz-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:.8rem 1rem;border-top:4px solid var(--primary,#0b376d)}
.fz-card-kopf{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
.fz-kennz{font-size:.9rem}
.fz-bez{color:#475569;margin-right:auto}
.fz-tuev{font-size:.76rem}
.fz-zeilen{display:flex;flex-direction:column;font-size:.88rem}
.fz-zeile{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px solid #f1f5f9;padding:.22rem 0}
.fz-label{color:#64748b}
.fz-wert{font-weight:600;color:#334155;text-align:right}
.fz-notiz{margin-top:.5rem;font-size:.85rem;color:#475569;background:#f8fafc;border-radius:6px;padding:.4rem .6rem}
.fz-aktionen{display:flex;flex-wrap:wrap;gap:.4rem;align-items:flex-start;margin-top:.7rem}
.fz-km-form{display:inline-flex;gap:.3rem;align-items:center}
.fz-km-form input{width:7rem;padding:.25rem .4rem}
.fz-service{display:inline-block}
.fz-service>summary{display:inline-block;list-style:none;cursor:pointer}
.fz-service>summary::-webkit-details-marker{display:none}
.fz-service-form{margin-top:.5rem;max-width:340px}

/* ── Bereichs-Unterseiten: Listen-Kacheln (Neufassung 22.07.2026, KONZEPT_DESIGN_IO.md) ──
   Vorher ein Icon-Raster (Grid), jetzt eine Zeilen-Liste in einer einzigen weißen
   Karte – wie „Täglich"/„Administration" im Design-Entwurf. Gleiche Klassennamen wie
   zuvor (home-tiles/home-tile/…) bewusst beibehalten, damit templates/bereich.php
   (alle bereich_*-Unterseiten: Material, Meldungen, Verwaltung, Urlaub, Meldungen, …)
   UNVERÄNDERT bleibt und automatisch den neuen Look übernimmt. Die Startseite selbst
   (dashboard.php) nutzt eigene, neue Klassen (siehe „Startseite – Neufassung" unten). */
.home-tiles{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--karte-rand);border-radius:16px;
  overflow:hidden;max-width:760px;margin:1.1rem 0 1.4rem;
  box-shadow:var(--karte-schatten);
}
.home-tile{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:13px 14px;border-bottom:1px solid #eef1f6;
  background:#fff;color:var(--ink);text-decoration:none;
}
.home-tile:last-child{border-bottom:0}
.home-tile:hover{background:#f7f9fc;text-decoration:none;color:var(--ink)}
.home-tile-ic{
  width:40px;height:40px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;
  background:#E9EEFA;color:var(--primary);
}
.home-tile-label{flex:1;min-width:0;font-weight:600;font-size:.98rem;line-height:1.2}
.home-tile-badge{
  flex:none;background:var(--primary);color:#fff;border-radius:999px;
  font-size:.72rem;font-weight:800;min-width:20px;height:20px;
  display:grid;place-items:center;padding:0 .35rem;
}
.home-tile-badge--rot{background:var(--rot)}
/* Pfeil rechts – nur wenn KEIN Zähler-Badge in der Zeile steht (sonst würde es eng). */
.home-tile::after{
  content:'›';flex:none;color:#c2cadd;font-size:1.3rem;font-weight:700;line-height:1;
}
.home-tile:has(.home-tile-badge)::after{display:none}

/* ── Admin-Kacheln: Variante A (Hausfarbe) – 03.07.2026, angepasst 22.07.2026 ──
   Markiert Zeilen, die Sonderrechte voraussetzen. Jetzt NUR das Icon-Quadrat
   dunkel eingefärbt (wie „Administration" im Entwurf) statt die ganze Zeile. */
.home-tile--admin .home-tile-ic{background:var(--primary-d);color:#fff}
.home-tile-admin-marker{display:none} /* Optik jetzt allein über das dunkle Icon-Quadrat */

.home-anordnen-leiste{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.6rem 0 .1rem;min-height:32px}
.home-tile--sort{cursor:default}
.home-sort-arrows{flex:none;display:flex;gap:.3rem;margin-left:auto}
.home-sort-arrows form{margin:0;line-height:0}
.home-sort-btn{width:30px;height:26px;border:1px solid var(--primary);background:#eef2fb;color:var(--primary);border-radius:7px;font-size:.85rem;cursor:pointer;display:grid;place-items:center;padding:0}
.home-sort-btn:hover{background:var(--primary);color:#fff}
.home-tile--sort::after{display:none}

.home-kacheln-leiste{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.6rem 0 .1rem;min-height:32px;
  background:#eef2fb;border:1px solid #d7e0ee;border-radius:10px;padding:.5rem .8rem}
.home-kacheln-leiste[hidden]{display:none}
.home-kacheln-leiste-btns{display:flex;gap:.5rem}
.home-tile{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ══════════════════════════════════════════════════════════════════════════
   Design-Überarbeitung io (22.07.2026, Auftrag Freddy, KONZEPT_DESIGN_IO.md)
   Quelle: Design-Entwurf „Lischer App – Final" (Richtung 1b + 2a). Ab hier NEUE
   Bausteine: Profil-Avatar, untere Navigationsleiste, Startseiten-Schnellzugriff,
   Aufgaben-Statistik/-Filter/-Karten, Floating-Action-Button.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Profil-Avatar in der Topbar (ersetzt optisch „👤 Name") ── */
.avatar-kreis{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:var(--gelb-avatar);color:var(--primary-d);
  font-family:'Saira',sans-serif;font-weight:700;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
}
.konto-menu summary.avatar-kreis-btn{
  padding:0;border:0;background:transparent;min-height:auto;
}
.konto-menu summary.avatar-kreis-btn:hover{background:transparent}

/* ── Untere Navigationsleiste (neu – gibt es vorher nicht) ── */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-nav);
  display:flex;background:#fff;border-top:1px solid var(--karte-rand);
  padding:9px max(8px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  color:#9aa6bd;text-decoration:none;position:relative;padding:2px 0;font-size:11px;font-weight:600;
}
.bn-item:hover{text-decoration:none;color:var(--primary)}
.bn-item svg{width:23px;height:23px}
.bn-item.active{color:var(--primary);font-weight:700}
.bn-badge{
  position:absolute;top:-2px;right:22%;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--rot);color:#fff;font-weight:700;font-size:10px;
  display:flex;align-items:center;justify-content:center;
}
/* 22.07.2026 (Bugfix, Freddy: "eine null muss nicht angezeigt werden"): OHNE diese
   Regel gewinnt das feste "display:flex" oben gegen das hidden-Attribut, das der
   Browser sonst per UA-Stylesheet auf display:none setzt – die "0" blieb dadurch
   IMMER sichtbar, unabhängig vom hidden-Attribut. Gleiches Muster wie bereits bei
   .glocke-badge[hidden] oben. */
.bn-badge[hidden]{display:none}
[dir="rtl"] .bn-badge{right:auto;left:22%}
main.wrap{padding-bottom:1rem} /* body-padding übernimmt bereits den Abstand zur Bottom-Nav */

/* ══ 27.07.2026 – Bausteine gegen Überlappung durch die untere Leiste ══════════
   Auftrag Freddy: „die neue Ansicht mit der Home-Leiste unten darf niemals etwas
   in den Fenstern oder Ansichten überlappen."

   Aufgetreten war das an drei Sorten von Elementen, die alle VOR der Leiste gebaut
   wurden und deshalb noch mit dem Bildschirmrand als unterster Kante rechneten:
   Kamera-Vollbild (Führerschein), Dialoge die von unten aufklappen (Schlüssel,
   Werkzeug-Unterschrift, QR-Scanner) und angeheftete Knopfleisten (Wochenrapport-
   Prüfung, Projektstand, Auto-Prüfung, Kachel-Icons).

   ── SO WIRD ES AB JETZT GEMACHT (bitte bei jeder neuen Ansicht beachten) ──
   1. Vollbild oder Dialog über der ganzen Seite
        → Klasse .ueber-nav  (oder z-index:var(--z-overlay))
        → beim Öffnen zusätzlich  lischerOverlay(true)  aufrufen, beim Schließen
          lischerOverlay(false)  – dann verschwindet die Leiste solange komplett.
   2. Leiste, die fest am unteren Rand kleben soll (Speichern/Freigeben)
        → Klasse .leiste-unten  – sitzt automatisch ÜBER der Navigationsleiste.
   3. Knopf, der beim Scrollen unten mitläuft (sticky)
        → Klasse .klebt-unten
   4. Freiraum am Seitenende selbst berechnen? Nicht nötig – dafür gibt es
      var(--bn-platz) (Leistenhöhe + Schutzbereich des Geräts).
   Eigene z-index-Zahlen bitte nicht mehr erfinden, siehe Stufen oben in :root. */

/* Vollbild/Dialog – liegt immer über allem. */
.ueber-nav{z-index:var(--z-overlay)}

/* Solange ein Vollbild offen ist, wird die untere Leiste (und der Hilfe-Knopf)
   ausgeblendet. Damit kann sie grundsätzlich nichts mehr verdecken – auch bei
   Ansichten, die wir heute noch nicht kennen. */
body.overlay-offen .bottom-nav,
body.overlay-offen .fab-support{display:none}

/* Fest angeheftete Leiste am unteren Rand – sitzt über der Navigationsleiste. */
.leiste-unten{
  position:fixed;left:0;right:0;bottom:var(--bn-platz);z-index:var(--z-leiste);
}
/* Mitlaufender Knopf/Leiste im Textfluss (sticky) – hält denselben Abstand. */
.klebt-unten{
  position:sticky;bottom:calc(var(--bn-platz) + 10px);z-index:var(--z-leiste);
}

/* ── Startseite – Neufassung: Schnellzugriff (3 große Kacheln) ── */
.qa-reihe{display:flex;gap:10px;margin-bottom:22px;max-width:760px}
.qa-karte{
  flex:1;border-radius:16px;padding:14px 10px;
  display:flex;flex-direction:column;gap:9px;
  background:#fff;border:1px solid var(--karte-rand);color:var(--ink);text-decoration:none;
  position:relative;
}
.qa-karte:hover{text-decoration:none;color:var(--ink);border-color:var(--primary)}
.qa-karte svg{width:24px;height:24px}
.qa-karte-label{font-weight:600;font-size:13px;line-height:1.2}
.qa-karte--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.qa-karte--primary:hover{color:#fff}
.qa-karte-badge{
  position:absolute;top:10px;right:10px;min-width:19px;height:19px;padding:0 5px;
  border-radius:10px;background:var(--rot);color:#fff;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}

/* ── Startseite – Abschnitts-Überschriften (SCHNELLZUGRIFF / TÄGLICH / …) ── */
.home-abschnitt-titel{
  font-family:'Saira',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.2px;
  color:var(--muted);margin:0 0 10px;text-transform:uppercase;
}

/* ── Floating-Action-Button (Feedback/Support) – Optik an neuen Look angepasst ── */
.fab-support{
  /* 27.07.2026: Abstand nicht mehr fest (88 px), sondern auf der gemessenen
     Leistenhöhe aufgesetzt – so rutscht der Knopf nie hinter die Leiste. */
  position:fixed;right:18px;bottom:calc(var(--bn-platz) + 18px);z-index:var(--z-leiste);
  width:56px;height:56px;border-radius:18px;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  box-shadow:0 10px 22px rgba(30,58,142,.4);text-decoration:none;
}
.fab-support:hover{color:#fff;text-decoration:none;background:var(--primary-d)}
.fab-badge{
  position:absolute;top:-4px;right:-4px;background:var(--rot);color:#fff;
  border-radius:999px;min-width:20px;height:20px;padding:0 .3rem;font-size:.72rem;font-weight:800;
  display:grid;place-items:center;
}

/* ── Aufgaben: Statistik-Pillen ── */
.aufg-stats{display:flex;gap:10px;overflow-x:auto;margin-bottom:16px;max-width:760px}
.aufg-stat-pille{
  flex:none;min-width:96px;background:#fff;border:1px solid var(--karte-rand);border-radius:14px;padding:12px 14px;
}
.aufg-stat-zahl{font-family:'Saira',sans-serif;font-weight:700;font-size:26px;line-height:1.1}
.aufg-stat-label{font-size:12px;color:var(--muted)}
.aufg-stat-pille--ueberfaellig{background:#FBE9E6;border-color:#F2C9C2}
.aufg-stat-pille--ueberfaellig .aufg-stat-zahl,
.aufg-stat-pille--ueberfaellig .aufg-stat-label{color:var(--rot)}

/* ── Aufgaben: Karten (ersetzt die schlichten .aufg-card-Kästen optisch) ── */
.aufg-card{
  background:#fff;border:1px solid var(--karte-rand);border-radius:16px;overflow:hidden;
  margin-bottom:14px;box-shadow:var(--karte-schatten);
}
.aufg-card-innen{padding:15px 16px;border-left:4px solid #cbd5e1}
.aufg-card-innen--dringend{border-left-color:var(--rot)}
.aufg-card-innen--hoch{border-left-color:var(--orange)}
/* 'normal' bleibt bewusst der neutrale Standardrand (kein eigener Farbwert) –
   passend zu aufgaben_prioritaet_badge(), die für 'normal' ebenfalls KEIN
   Badge zeigt („ruhige Karten"). Nur dringend/hoch/niedrig stechen hervor. */
.aufg-card-innen--niedrig{border-left-color:#cbd5e1}
.aufg-card--done .aufg-card-innen{opacity:.6}
.aufg-card-titelzeile{display:flex;align-items:flex-start;gap:10px}
.aufg-card-titelzeile .aufg-card-titel{flex:1;font-family:'Saira',sans-serif;font-weight:700;font-size:16px;color:var(--ink);line-height:1.25}
.aufg-card-person{display:flex;align-items:center;gap:8px;margin-top:12px}
.aufg-avatar{width:26px;height:26px;border-radius:50%;background:#E9EEFA;color:var(--primary);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;flex:none}
.aufg-card-person-name{font-size:13px;color:#5a6788}
.aufg-card-faellig{margin-left:auto;display:flex;align-items:center;gap:5px;color:#8a95b3;font-weight:600;font-size:12.5px}
.aufg-card-faellig svg{width:14px;height:14px}
.aufg-card-faellig--ueberfaellig{color:var(--rot)}
.aufg-card-tags{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.aufg-tag{background:#EEF1F6;color:#5a6788;font-weight:600;font-size:11.5px;padding:4px 9px;border-radius:7px}
.aufg-tag--serie{background:#F1EBFA;color:var(--lila)}
.aufg-card-aktionen{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #eef1f6;align-items:center}
.aufg-card-aktionen form{flex:1;margin:0}
.aufg-btn-primaer{width:100%;border:none;background:var(--primary);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;padding:10px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.aufg-btn-erledigt{width:100%;border:1px solid #B7DBC4;background:#fff;color:var(--gruen);font-family:inherit;font-weight:600;font-size:13.5px;padding:10px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.aufg-btn-mehr{flex:none;width:42px;border:1px solid var(--karte-rand);background:#fff;color:#5a6788;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:10px}

/* ── Aufgaben: Filter-Chips (Bereich) ──
   22.07.2026: HIER bewusst KEINE eigenen .aufg-chip*-Klassen – die gibt es schon
   in aufgaben_bereich_chips_html() (src/routes/aufgaben.php), die ihr eigenes
   <style> mitliefert (.aufg-bereich-chips/.aufg-chip/.aufg-chip--aktiv/…). Um
   keine zwei Chip-Systeme zu haben, wurde stattdessen NUR die Farbe dort
   angepasst (nutzt jetzt automatisch var(--primary) aus dem neuen BRAND). */

@media(max-width:520px){
  .qa-karte-label{font-size:12px}
}

/* ── Aufgaben-Seite: Status-Abschnitte + schlankes Anlegen (Neuaufbau 23.06.2026) ── */
.aufg-neu{padding:.4rem .9rem;margin:0 0 1.2rem}
.aufg-neu>summary{cursor:pointer;font-weight:700;font-size:1.02rem;padding:.45rem 0;list-style:none}
.aufg-neu>summary::-webkit-details-marker{display:none}
.aufg-neu[open]>summary{margin-bottom:.6rem;border-bottom:1px solid #eef1f6}
.aufg-mehr{margin:.2rem 0 .6rem;border:1px solid #e7ebf2;border-radius:10px;padding:.35rem .7rem;background:#fafbfd}
.aufg-mehr>summary{cursor:pointer;font-weight:600;font-size:.92rem;color:var(--primary);padding:.35rem 0;list-style:none}
.aufg-mehr>summary::-webkit-details-marker{display:none}
.aufg-status-sek{margin:1.3rem 0 .4rem}
.aufg-sek-titel{font-size:1.05rem;margin:0 0 .6rem;display:flex;align-items:center;gap:.5rem}
details.aufg-status-sek>summary.aufg-sek-titel{cursor:pointer;list-style:none;padding:.5rem 0;border-bottom:1px solid #eef1f6}
details.aufg-status-sek>summary.aufg-sek-titel::-webkit-details-marker{display:none}
details.aufg-status-sek[open]>summary.aufg-sek-titel{margin-bottom:.6rem}
.aufg-sek-count{background:#eef2fb;color:var(--primary);border-radius:999px;font-size:.78rem;font-weight:700;padding:.05rem .55rem}
.aufg-sek-leer{margin:.2rem 0 .4rem}
.aufg-card-person{font-weight:700;font-size:.9rem;color:var(--primary);margin-bottom:.25rem}

/* ══════════════════════════════════════════════════════════
   WOCHENRAPPORT – MOBILE ZEITSTRAHL & NOTDIENST (03.07.2026)
   Entwurf 2 (Zeitstrahl). REINE Handy-Ansicht (< 1024px). Die
   Desktop-Tabelle bleibt vollständig unberührt: das 🚨-Symbol und
   der rote Notdienst-Kopf sind Basis-`display:none` und werden nur
   im Mobil-Breakpoint eingeblendet.
   ========================================================== */

/* 🚨-Notdienst-Knopf (unten am Tag) + roter Notdienst-Kopf: Desktop nie sichtbar
   (reine Handy-Elemente – auf Desktop bleibt die Tabellenspalte „Bereitschaft"). */
.nd-trigger-row{display:none}
.nd-head-row{display:none}

@media(max-width:1023px){
  /* ── 🚨-Notdienst-Knopf UNTEN am Tag (03.07.2026: bewusst nicht mehr im Tageskopf) ── */
  .tbl.tbl--form .nd-trigger-row{
    display:block;
    border:1.5px solid #e2e8f0 !important;border-top:1px solid #f0f4f9 !important;
    border-left:5px solid var(--primary) !important;background:#fff !important;
  }
  .nd-trigger-td{display:block !important;padding:.45rem 1rem .55rem !important;background:#fff !important}
  .nd-trigger-td::before{display:none !important}
  .nd-trigger-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    width:100%;min-height:2.4rem;cursor:pointer;touch-action:manipulation;
    border:1.5px dashed #fca5a5;border-radius:10px;background:#fff;
    color:#b91c1c;font-size:.86rem;font-weight:800;padding:.45rem .8rem;
    transition:background .12s,border-color .12s;
  }
  .nd-trigger-btn.an{background:#fef2f2;border-style:solid;border-color:#fca5a5}

  /* ── Bereitschaft-Spalte wandert mobil in den roten Bereich (Pauschale-Schalter).
        Das Formularfeld notdienst_bereitschaft[…] bleibt versteckt im Formular und
        wird ausschließlich vom Schalter gesteuert – kein zweites Feld. ── */
  .tbl.tbl--form .day-row td[data-label="Notdienstbereitschaft"]{display:none !important}

  /* ── Roter Notdienst-Kopf mit Pauschale-Schalter ── */
  .tbl.tbl--form .nd-head-row{
    display:block;
    border:1.5px solid #fca5a5 !important;border-top:none !important;
    border-left:5px solid #dc2626 !important;background:#fef2f2 !important;
  }
  .nd-head-td{display:block !important;padding:.7rem 1rem .8rem !important;background:#fef2f2 !important}
  .nd-head-td::before{display:none !important}
  .nd-head-titel{
    display:flex;align-items:center;gap:.5rem;
    font-weight:800;color:#b91c1c;font-size:.9rem;margin-bottom:.55rem;
  }
  .nd-head-aus{
    margin-left:auto;background:none;border:none;color:#b91c1c;
    font-size:.8rem;text-decoration:underline;cursor:pointer;padding:.1rem .2rem;
    touch-action:manipulation;
  }
  .nd-pauschale-zeile{
    display:flex;align-items:center;gap:.7rem;
    background:#fff;border:1px solid #fecaca;border-radius:10px;padding:.55rem .7rem;
  }
  .nd-pauschale-text{min-width:0}
  .nd-pauschale-text b{display:block;font-size:.86rem;color:var(--ink)}
  .nd-pauschale-text span{font-size:.74rem;color:var(--muted)}
  .nd-pauschale-schalter{
    margin-left:auto;flex:0 0 auto;position:relative;
    width:2.9rem;height:1.65rem;border-radius:999px;background:#d1d5db;
    cursor:pointer;transition:background .15s;touch-action:manipulation;
  }
  .nd-pauschale-schalter::after{
    content:"";position:absolute;top:.185rem;left:.185rem;
    width:1.28rem;height:1.28rem;border-radius:50%;background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s;
  }
  .nd-pauschale-schalter.an{background:#15803d}
  .nd-pauschale-schalter.an::after{left:1.42rem}
  .nd-pauschale-schalter.nd-schalter-locked{opacity:.6;cursor:default}
  .nd-pauschale-schalter:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
  /* Nur Anzeige: Einsatzstunden-Summe des Tages im roten Bereich */
  .nd-einsatz-summe{margin-top:.5rem;font-size:.82rem;font-weight:700;color:#b91c1c}
  .nd-einsatz-summe-wert{font-variant-numeric:tabular-nums}

  /* ── Zeitstrahl-Motiv: der linke Kartenrand ist der Strahl. Baustellen sind blaue
        Stationen (Auftrags-Nr. als blaues Etikett), die Pause eine gelbe Station. ── */
  .tbl.tbl--form .day-row td[data-label="Auftragsnummer"]::before,
  .tbl.tbl--form .extra-pos-row td[data-label="Auftragsnummer"]::before{
    content:"Auftrags-Nr." !important;align-self:flex-start !important;
    background:#eef2ff !important;color:var(--primary) !important;
    padding:.12rem .5rem !important;border-radius:6px !important;
    font-size:.68rem !important;font-weight:800 !important;
    letter-spacing:.02em !important;text-transform:none !important;
  }
  /* Pause = gelbe Station am Strahl */
  .tbl.tbl--form .pause-section-row{border-left-color:#f59e0b !important}
  .pause-section-td{background:#fffbeb !important}
}


/* ══════════════════════════════════════════════════════════════════════════
   03.08.2026 – Tippflächen am Handy (Befund IO-141)
   --------------------------------------------------------------------------
   Die zentralen Handy-Regeln weiter oben (min-height:44px/48px, font-size:16px)
   greifen nur für `.form input/select/textarea` und `.btn`. Mehrere Bedienelemente
   nutzen keines von beidem und blieben deshalb bei rund 20 bis 30 Pixel:
     · die ✕-Knöpfe für Zusatz- und Notdienst-Zeilen im Wochenrapport (IO-141)
     · die ✕-Knöpfe der Pausen-Zeilen (ebenfalls IO-141)
   Die beiden übrigen Fälle – Fahrzeug-Wochencheck (IO-069) und Baustellenstand
   (IO-033) – sind in ihren eigenen Vorlagen geregelt, weil dort auch die Klassen
   definiert sind; ein Stil aus der Vorlage würde eine Regel von hier sonst
   überstimmen.
   Mit Arbeitshandschuhen trifft man das nicht zuverlässig – beim Wochencheck
   löst ein Fehlgriff sogar die Foto-Pflicht aus, im Baustellenstand verstellt
   man die Nachbarposition.

   Zielmaß ist 44 Pixel (gängige Mindestgröße für Tippflächen).

   Nur unter 640 px – am Rechner mit Maus bleibt alles wie bisher.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){

  /* IO-141: Löschknöpfe im Wochenrapport (Zusatz-Zeile / Notdienst-Zeile).
     Die Knöpfe tragen ihre Farben als Inline-Stil, deshalb hier nur die Größe –
     mit !important, weil Inline-Stile sonst gewinnen. */
  .btn-del-pos,
  .btn-del-nd{
    min-width:44px !important;min-height:44px !important;
    padding:0 !important;font-size:1.15rem !important;
    display:inline-flex !important;align-items:center;justify-content:center;
    border-radius:10px !important;touch-action:manipulation;
  }
  .btn-del-pos:active,
  .btn-del-nd:active{background:#fee2e2 !important}

  /* IO-141: auch der Pausen-Löschknopf war mit 1,75 rem (≈28 px) zu klein. */
  .pause-slot-del{
    width:44px !important;height:44px !important;min-width:44px !important;
    font-size:.95rem !important;
  }

}