/* Handy-Ansicht für Mitarbeiter-Portal (index.html) UND Verwaltung (admin.html) — 2026-10-25.
   Wird in beiden Seiten NACH allen anderen Styles geladen und überschreibt sie nur auf kleinen
   Bildschirmen. Desktop bleibt unverändert. Gemeinsame Regeln stehen oben, Besonderheiten
   der Verwaltung unten (body.admin-page).
   Stufen: bis 900px = Tablet hochkant/großes Handy, bis 600px = Handy. */

/* Sichere Ränder (iPhone-Notch, Gesten-Leiste), wenn die App als Icon auf dem Home-Screen liegt */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }

/* Antippen: keine graue Flash-Fläche, schnelleres Tippen ohne Doppeltipp-Zoom-Verzögerung */
/* Eingabefelder bewusst ausgenommen: iPhone soll sie ohne Sonderregeln fokussieren und die Tastatur öffnen. */
button, a, summary, .lektion-item, .kal-tag, .themen-karte, .start-karte {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Kapitel-Umschalter und Download-Sprung gibt es nur, wenn Liste und Inhalt untereinander stehen */
#kapitel-toggle, .downloads-sprung { display: none; }

/* Lektionsliste: sobald Liste und Inhalt untereinander stehen (bis 1150px), Liste zum Aufklappen,
   begrenzt und scrollbar. Zu ist sie, sobald ein Kapitel offen ist, damit der Inhalt gleich oben steht. */
@media (max-width: 1150px) {
  #lektionen-liste { max-height: 50dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-top: 1px solid var(--creme-dunkler); }
  #detail-sidebar:not(.liste-offen) #lektionen-liste { display: none; }
  /* Volle Breite (die Grundregel mit 320px steht in index.html weiter unten und hat sonst Vorrang) */
  #detail-sidebar { width: 100%; box-sizing: border-box; }
  #detail-sidebar { padding-bottom: 0; }
  #kapitel-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; box-sizing: border-box;
    min-height: 56px; padding: 10px 16px; margin: 0; background: var(--creme); color: var(--text);
    border: 0; border-top: 1px solid var(--creme-dunkler); border-bottom: 1px solid var(--creme-dunkler);
    border-radius: 0; font-family: inherit; text-align: left; cursor: pointer;
  }
  .kapitel-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .kapitel-toggle-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-hell); }
  .kapitel-toggle-titel { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .kapitel-toggle-pfeil { font-size: 16px; flex-shrink: 0; }
  /* Downloads: Sprung-Knopf oben im Kapitel, in der unteren Spalte stehen sie vor Vorheriges/Nächstes */
  .downloads-sprung {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; margin: 0 0 14px;
    background: var(--weiss); color: var(--gruen); border: 1px solid var(--gruen); border-radius: 6px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  #roster-nav-downloads { display: flex; flex-direction: column; }
  #roster-nav-downloads .downloads-bereich { order: -1; margin-top: 0; margin-bottom: 20px; }
}

@media (max-width: 900px) {
  /* ===== Kopfzeile: Titel oben, Knöpfe darunter, nichts läuft über den Rand ===== */
  #top-bar {
    flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  #top-bar > strong { flex: 1 1 100%; font-size: 15px; }
  #top-bar > span { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  #top-bar > span > * { margin: 0 !important; }
  #eingeloggt-als { flex: 1 1 100%; font-size: 13px; color: var(--text-hell); order: -1; overflow-wrap: anywhere; }
  #top-bar button, #top-bar a.button { height: 44px; min-width: 44px; }
  #btn-logout { margin-left: auto !important; }
  #link-admin-bereich { flex: 1 1 100%; order: 5; padding: 8px 0; }
  #admin-hinweis-leiste, #hinweis-leiste { padding: 10px 14px !important; flex-wrap: wrap; }
  .hinweis-leiste-knoepfe { width: 100%; }
  .hinweis-leiste-knoepfe button { flex: 1; min-height: 44px; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }

  /* ===== Eingaben: mindestens 16px, sonst zoomt iPhone beim Antippen automatisch hinein ===== */
  input, select, textarea { font-size: 16px !important; min-height: 44px; }
  input[type=checkbox], input[type=radio] { min-height: 0; width: 22px; height: 22px; flex-shrink: 0; }
  textarea { min-height: 80px; }
  input, select, textarea, .antrag textarea { max-width: 100% !important; }
  button { min-height: 44px; }

  /* ===== Login ===== */
  #login-screen { align-items: flex-start; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  #login-box { padding: 28px 20px !important; margin: 16px auto !important; max-width: 100% !important; }
  #login-box label { font-size: 15px !important; }
  #login-box input { padding: 12px !important; font-size: 16px !important; }
  #login-box button { padding: 14px !important; font-size: 16px !important; }

  /* ===== Buddy: Knopf kleiner und über der Gesten-Leiste, Fenster füllt den Bildschirm ===== */
  #buddy-toggle { bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; padding: 12px 18px; font-size: 15px; }
  #buddy-fenster {
    top: 0; left: 0; right: 0; bottom: 0; width: 100%; max-height: none; height: 100dvh;
    border-radius: 0; z-index: 1200;
  }
  #buddy-header { padding: 14px 14px; padding-top: calc(14px + env(safe-area-inset-top)); font-size: 15px; }
  #buddy-neuer-chat { font-size: 13px; padding: 8px 12px; min-height: 40px; }
  #buddy-schliessen { font-size: 14px; font-weight: 600; padding: 8px 14px; min-height: 44px; }
  #buddy-verlauf { max-height: none; font-size: 15px; padding: 14px; -webkit-overflow-scrolling: touch; }
  #buddy-eingabe { padding-bottom: env(safe-area-inset-bottom); }
  #buddy-input { padding: 14px; font-size: 16px; min-height: 52px; }
  #buddy-senden { padding: 0 20px; min-height: 52px; }
  .buddy-beispiel-chip { font-size: 14px; padding: 10px 14px; min-height: 44px; }

  /* ===== Pop-ups und Panels: bildschirmfüllend und scrollbar ===== */
  #hinweise-panel { width: 100vw !important; max-height: 100dvh !important; height: 100dvh; top: 0 !important; left: 0 !important; transform: none !important; border-radius: 0 !important; padding: 16px !important; padding-top: calc(16px + env(safe-area-inset-top)) !important; z-index: 1300; }
  #hinweise-zu { min-height: 44px; }
  .hinweis-eintrag { font-size: 15px; }
  #admin-glocke-panel { top: 0 !important; right: 0 !important; left: 0 !important; width: 100vw !important; max-height: 100dvh; overflow-y: auto; border-radius: 0 !important; padding: 16px !important; padding-top: calc(16px + env(safe-area-inset-top)) !important; z-index: 1300 !important; }
  .feedback-popup-overlay { padding: 8px; align-items: flex-end; }
  /* Termin-Fenster: mittig auf dem Bildschirm */
  #kal-popup { padding: 16px; align-items: center; justify-content: center; }
  .feedback-popup-karte { padding: 24px 18px 18px; border-radius: 16px 16px 12px 12px; max-height: 94dvh; }
  .feedback-popup-karte .feedback-btn { padding: 11px 20px; font-size: 15px; min-height: 44px; }
  #kal-popup-box { max-height: 86dvh; padding: 20px 16px 16px; }
  #kal-popup-zu { width: 44px; height: 44px; top: 4px; right: 4px; font-size: 26px; }
  .feedback-popup-zu { padding: 8px 12px; font-size: 28px; }
  /* Willkommens-Fenster: Blatt von unten, Kopf und Knöpfe bleiben stehen, nur der Text scrollt */
  #willkommen-overlay { padding: 0; align-items: flex-end; }
  #willkommen-box {
    display: flex; flex-direction: column; overflow: hidden; max-width: none; width: 100%;
    height: 78dvh; max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 20px 20px 0;
  }
  #willkommen-kopf { flex-shrink: 0; margin-bottom: 12px; }
  #willkommen-avatar { width: 40px; height: 40px; }
  #willkommen-titel { flex-shrink: 0; font-size: 22px; line-height: 1.25; margin-bottom: 12px; }
  #willkommen-text { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: 16px; line-height: 1.6; }
  #willkommen-text p { margin: 0 0 14px; }
  #willkommen-punkte { flex-shrink: 0; margin: 12px 0; gap: 8px; }
  #willkommen-knoepfe { flex-shrink: 0; gap: 10px; padding: 12px 0 calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--creme-dunkler); }
  .willkommen-btn { min-height: 52px; font-size: 16px; border-radius: 10px; padding: 12px 16px; }
  #willkommen-zurueck { flex: 1; }
  #willkommen-weiter { flex: 2; }

  /* ===== Übersicht (Mitarbeiter) ===== */
  #uebersicht { padding: 16px 12px !important; }
  #themen-grid { gap: 14px; }
  .themen-karte-inhalt { padding: 12px 14px 14px; }
  .themen-karte-beschreibung { font-size: 14px; }
  .start-karte { padding: 14px 16px; min-height: 64px; }
  .start-karte h2 { font-size: 17px; }

  /* ===== Detailansicht (Lektionen): Liste oben begrenzt, Inhalt darunter, Navigation zuletzt ===== */
  #detail-layout { min-height: 0; }
  #detail-sidebar { padding: 12px 0 0; border-right: 0; border-bottom: 1px solid var(--creme-dunkler); }
  #detail-sidebar-kopf { padding: 0 14px 12px; margin-bottom: 4px; }
  #detail-zurueck { min-height: 44px; margin-bottom: 12px; padding: 10px 16px; }
  .lektion-item { padding-top: 13px; padding-bottom: 13px; font-size: 15px; min-height: 48px; }
  #detail-main { padding: 18px 14px 24px !important; max-width: 100% !important; width: 100%; }
  #detail-main h1 { font-size: 21px; flex-wrap: wrap; }
  #lektion-inhalt { font-size: 16px; line-height: 1.55; }
  #lektion-inhalt h1 { font-size: 20px; }
  #lektion-inhalt h2 { font-size: 18px; }
  #lektion-inhalt h3 { font-size: 16px; }
  #lektion-inhalt img { height: auto; }
  /* Breite Tabellen: seitlich wischbar statt die Seite zu sprengen */
  #lektion-inhalt table.md-tabelle { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: normal; }
  #lektion-inhalt table.md-tabelle th, #lektion-inhalt table.md-tabelle td { min-width: 110px; }
  .video-platzhalter { max-width: 100%; }
  /* Eingebettetes Video: bis an den Bildschirmrand, 16:9 bleibt */
  .video-platzhalter.video-eingebettet { width: calc(100% + 28px); max-width: none; margin-left: -14px; margin-right: -14px; border-radius: 0; }
  .video-platzhalter.video-eingebettet iframe { border-radius: 0; }
  /* Präsentation, Video-Link und Platzhalter: kompakte, gut antippbare Karte statt großer 16:9-Fläche */
  .video-platzhalter:not(.video-eingebettet) { aspect-ratio: auto; min-height: 110px; padding: 18px 16px; box-sizing: border-box; width: 100%; text-align: center; }
  .video-platzhalter-text { font-size: 15px; }
  #lektion-inhalt a { overflow-wrap: anywhere; }
  .lektion-aktionen { flex-direction: column; }
  #abschliessen-btn, #todo-abhaken-btn { width: 100%; padding: 14px 18px; font-size: 16px; }
  #abschliessen-btn.erledigt-btn, #todo-abhaken-btn.erledigt-btn { padding: 13px 17px; }
  #detail-roster { padding: 16px 14px calc(90px + env(safe-area-inset-bottom)); }
  /* Vorheriges/Nächstes nebeneinander, jeweils halbe Breite */
  #lektion-navigation { flex-direction: row; gap: 10px; }
  .lektion-nav-btn { flex: 1 1 0; width: auto; min-width: 0; padding: 12px 12px; min-height: 76px; }
  .lektion-nav-titel { display: block; font-size: 13px; overflow-wrap: anywhere; }
  .download-zeile { padding: 14px; min-height: 52px; }
  .feedback-bereich { width: 100%; padding: 10px 12px; }
  .feedback-btn { padding: 8px 16px; font-size: 14px; min-height: 40px; }
  #einreichung-datei { max-width: 100%; }
  #einreichung-hochladen-btn { width: 100%; padding: 13px 16px; font-size: 15px; }

  /* ===== Urlaubsantrag (Mitarbeiter): klare Abschnitte als Karten, nur Aufbau, kein Inhalt geändert =====
     Reihenfolge: 1. Mein Urlaub (Zahlen), 2. Urlaub beantragen (Formular), 3. Bisherige Einreichungen, 4. So funktioniert's */
  #detail-main .urlaub-konto,
  #detail-main .urlaub-antrag { background: var(--weiss); border: 1px solid var(--creme-dunkler); border-radius: 12px; padding: 16px 14px; margin: 0 0 16px; }
  #detail-main .urlaub-konto h3,
  #detail-main .urlaub-antrag h3 { font-size: 18px; margin: 0 0 12px; color: var(--text); }
  #detail-main .urlaub-zahlen { max-width: none; gap: 8px; }
  #detail-main .urlaub-zahlen > div { padding: 12px 6px; }
  #detail-main .urlaub-zahlen .zahl { font-size: 24px; white-space: nowrap; }
  /* Krankmeldung-Formular: Felder bleiben in der Karte (nicht über den Rand), Kacheln brechen "250 €" nicht mehr um */
  #krank-bereich > div[style*="display:grid"] { grid-template-columns: minmax(0, 1fr); max-width: 100% !important; }
  #krank-bereich label { display: block; max-width: 100%; }
  #krank-bereich input[type=text], #krank-bereich textarea { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  #krank-bereich input[type=file] { max-width: 100%; }
  #krank-bereich > div[style*="display:grid"] > div { min-width: 0; }
  #detail-main .urlaub-zahlen > div { min-width: 0; }
  #detail-main .urlaub-zahlen > div { padding: 12px 4px; }
  #detail-main .urlaub-zahlen .label { font-size: 11px; overflow-wrap: anywhere; hyphens: auto; }
  #detail-main .urlaub-konto > p.upload-hinweis { font-size: 14px; line-height: 1.55; margin: 12px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--creme-dunkler); }
  /* Online ausfüllen / Dokument hochladen: zwei Karten untereinander, gut antippbar */
  #detail-main .urlaub-wahl { gap: 10px; margin: 0 0 16px; max-width: none; }
  #detail-main .urlaub-wahl .wahl-karte { min-height: 64px; padding: 12px 14px 12px 42px; }
  #detail-main .urlaub-wahl .wahl-karte::before { top: 14px; left: 14px; }
  #detail-main .urlaub-wahl .wahl-titel { font-size: 16px; }
  #detail-main .urlaub-wahl .wahl-text { font-size: 13px; }
  /* Formular: Felder in voller Breite, Datumsfelder nebeneinander, Knopf über die ganze Breite */
  #urlaub-panel-online > div { max-width: none !important; }
  #urlaub-panel-online label { display: block; font-size: 15px; font-weight: 600; }
  #urlaub-panel-online label > input[type=checkbox] { margin-top: 2px !important; }
  #urlaub-panel-online label:has(> input[type=checkbox]) { display: flex !important; font-weight: 400; }
  #urlaub-panel-online div[style*="flex-wrap"] > label { flex: 1 1 150px; min-width: 0; }
  #urlaub-panel-online input:not([type=checkbox]), #urlaub-panel-online select, #urlaub-panel-online textarea { width: 100% !important; box-sizing: border-box; margin-top: 4px; }
  #urlaub-panel-online .urlaub-summe { font-size: 15px; padding: 12px 14px; }
  #uo-senden { width: 100%; padding: 14px 18px; font-size: 16px; }
  /* Bisherige Einreichungen: eigener Abschnitt unter dem Formular */
  #detail-main .urlaub-antrag #einreichung-liste { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--creme-dunkler); }
  #einreichung-liste .einreichung-titel { font-size: 16px !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; color: var(--text) !important; margin: 0 0 10px !important; }
  #einreichung-liste .urlaub-zeile { padding: 14px; margin: 0 0 12px; }
  #einreichung-liste .urlaub-zeile-kopf { align-items: flex-start; }
  #einreichung-liste .urlaub-zeile-meta, #einreichung-liste .urlaub-zeile-hinweis { font-size: 14px; line-height: 1.5; margin-top: 6px; }
  /* Verschieben / Zurückziehen: zwei gleich breite Knöpfe unter einer Zeile Text */
  #detail-main .urlaub-aendern { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  #detail-main .urlaub-aendern .urlaub-aendern-text { flex: 1 1 100%; margin: 0; }
  #detail-main .urlaub-aendern .urlaub-aktion { flex: 1 1 140px; margin: 0; min-height: 44px; padding: 8px 12px; font-size: 14px; }
  #detail-main .urlaub-aendern .urlaub-form { flex: 1 1 100%; margin-top: 4px; font-size: 14px; }
  #detail-main .urlaub-aendern .urlaub-form input[type=date] { margin: 4px 0; max-width: 100%; }
  /* "So funktioniert's" und Abschließen-Knopf: Abstand nach oben, damit der Abschnitt klar getrennt ist */
  #detail-main .urlaub-erklaerung-titel { margin: 28px 0 10px; font-size: 19px; }
  #detail-main .lektion-aktionen { margin-top: 24px; }

  /* ===== To-do-Liste / Zeitplan ===== */
  #plan-inhalt, #kalender-inhalt, #dashboard-inhalt { padding: 16px 12px !important; }
  .plan-tabs { flex-wrap: wrap; }
  .plan-tab { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .plan-gruppe { padding: 14px 14px; }
  .aufgabe-zeile { padding: 12px 0; font-size: 16px; gap: 14px; }
  .aufgabe-zeile input { width: 24px; height: 24px; margin-top: 0; }
  .aufgabe-reihe { flex-wrap: wrap; }
  .aufgabe-ansehen { margin: 0 0 10px 38px; min-height: 40px; }
  .zeitplan-phase { padding: 12px 14px; }
  .zeitplan-phase summary { font-size: 15px; min-height: 44px; }
  .phase-meta { margin-left: 0; flex-basis: 100%; }

  /* ===== Kalender ===== */
  #kal-kopf { gap: 6px; }
  #kal-monat { min-width: 0; flex: 1; font-size: 17px; }
  .kal-nav { min-height: 44px; min-width: 44px; padding: 8px 12px; }
  /* Monatsraster: größere Felder, Zahl groß in der Mitte. Das ganze Tagesfeld ist nach Art des Termins
     eingefärbt (keine Punkte). Antippen öffnet ein Fenster mit den Termindetails des Tages. */
  #kalender-inhalt { padding-left: 8px !important; padding-right: 8px !important; }
  #kal-raster { gap: 4px; }
  .kal-wt { font-size: 13px; padding: 6px 0; }
  #kal-raster .kal-tag { min-height: 58px; padding: 6px 2px; border-radius: 8px; align-items: center; justify-content: center; }
  #kal-raster .kal-nr { text-align: center; font-size: 17px; font-weight: 600; line-height: 1.2; }
  #kal-raster .kal-chip, #kal-raster .kal-mehr { display: none; }
  #kal-raster .kal-tag.heute { border: 2px solid var(--gruen); }
  #kal-raster .kal-tag.heute .kal-nr { text-decoration: underline; text-underline-offset: 3px; }
  /* Farben genau wie am PC (Legende bleibt unverändert): verpflichtend dunkel, freiwillig weiß mit dunklem Rahmen,
     Information grau, Urlaub und Feiertag mit eigenem Farbton und Rahmen */
  #kal-raster .kal-tag.tag-pflicht { background: var(--gruen); border-color: var(--gruen); }
  #kal-raster .kal-tag.tag-pflicht .kal-nr { color: #fff; }
  #kal-raster .kal-tag.tag-pflicht.heute { box-shadow: inset 0 0 0 2px #fff; }
  #kal-raster .kal-tag.tag-frei { background: var(--weiss); border: 1px solid var(--text); }
  #kal-raster .kal-tag.tag-frei.heute { border-width: 2px; }
  #kal-raster .kal-tag.tag-info { background: var(--creme-dunkler); border-color: var(--creme-dunkler); }
  #kal-raster .kal-tag.tag-urlaub { background: #F7E9DC; border: 1px solid #FF7F51; }
  #kal-raster .kal-tag.tag-feiertag { background: #E1F1EA; border: 1px solid #7d9a6b; }
  #kal-raster .kal-tag.tag-krank { background: #FBE3E0; border: 1px solid #c28f8f; }
  #kal-raster .kal-tag.heute.tag-urlaub, #kal-raster .kal-tag.heute.tag-feiertag, #kal-raster .kal-tag.heute.tag-krank { border-width: 2px; }
  /* Fenster mit mehreren Terminen eines Tages */
  .kal-popup-tag { margin: 0 36px 12px 0; font-size: 17px; color: var(--gruen); }
  #kal-popup-box .kal-termin + .kal-termin { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--creme-dunkler); }
  .kal-zeile { padding: 10px 12px; min-height: 48px; }
  .kal-termin { padding: 14px 14px; }
  .kal-antwort-btn, .kal-speichern { min-height: 44px; flex: 1; }

  /* ===== Chat: Kopf und Eingabe bequem mit dem Daumen ===== */
  #chat-panel .chat-kopf { padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top)); }
  #chat-panel .chat-kopf button, #chat-panel .chat-zurueck { min-height: 44px; padding: 8px 14px; }
  .chat-eingabe { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .chat-eingabe textarea { font-size: 16px !important; }
  .chat-eingabe button { min-height: 44px; }
  .chat-blase { max-width: 88%; font-size: 16px; }
  .chat-ma { min-height: 56px; }

  /* ===== Verwaltung (admin.html) ===== */
  body.admin-page { background-attachment: scroll; }
  #inhalt { padding: 14px 12px calc(90px + env(safe-area-inset-bottom)) !important; }
  #inhalt h1.abschnitt-titel { font-size: 22px; }
  .card { padding: 14px 14px; margin-bottom: 14px; }
  .card button, #inhalt > .technik-card button { min-height: 44px; padding: 11px 18px; width: auto; }
  .card p.hinweis-text, .hinweis-text { font-size: 14px; }
  label { font-size: 15px; }
  details.akkordeon > summary { min-height: 48px; }
  details.akkordeon > summary h3 { font-size: 16px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .akkordeon-symbol { width: 32px; font-size: 24px; }
  .akkordeon-leiste button { min-height: 44px; width: 100%; }
  .unterblock { margin-left: 0; padding-left: 10px; }
  /* Zeilen mit Name + Knöpfen: untereinander statt gequetscht nebeneinander */
  .mitarbeiter-zeile { flex-wrap: wrap; align-items: flex-start; }
  .antrag-knoepfe, .ma-aktionen, .fb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
  .antrag .antrag-knoepfe button { flex: 1 1 140px; min-height: 44px; margin: 0; }
  .ma-aktionen button, .fb-knoepfe button, .uk-aendern button { min-height: 44px; padding: 8px 14px; font-size: 14px; flex: 1 1 130px; }
  .antrag-info > summary, .ma-ordner > summary { padding: 14px; min-height: 52px; }
  .ma-ordner-inhalt { padding: 0 6px 8px; }
  .ma-daten input[type=date], .urlaub-aendern .urlaub-form input[type=date] { padding: 8px; }
  .ma-daten button { width: 100%; }
  .uk-zahlen { max-width: 100%; }
  .uk-teil > summary { padding: 12px; min-height: 48px; }
  .uk-reihe { flex-direction: column; align-items: stretch; }
  .uk-zeile button { min-height: 40px; }
  .uk-aendern-btn { padding: 8px 14px; }
  .urlaub-aendern .urlaub-aktion { padding: 10px 14px; min-height: 44px; }
  .urlaub-zeile-kopf strong { font-size: 15px; }
  /* Tabellen in der Verwaltung: seitlich wischbar */
  .akkordeon-inhalt table, .antrag-info-inhalt table, .ma-ordner-inhalt table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fb-tabelle th:nth-child(n+2), .fb-tabelle td:nth-child(n+2), .fb-antraege th:nth-child(2), .fb-antraege td:nth-child(2), .fb-antraege th:nth-child(3), .fb-antraege td:nth-child(3) { width: auto; min-width: 70px; }
  /* Arbeitstage-Auswahl mit großen Tippflächen */
  #ma-arbeitstage label { min-height: 44px; display: flex; align-items: center; gap: 6px; }
  /* Buddy-Knopf soll Speichern-Knöpfe am Seitenende nicht verdecken */
  #urlaub-jahr { width: 100% !important; }
}

/* Verwaltung am Handy, Ergänzung 03.11.2026: Menü oben, Kalender, Tabellen, Eingabefelder */
@media (max-width: 860px) {
  /* Menü bleibt beim Scrollen oben sichtbar und lässt sich seitlich wischen */
  body.admin-page #admin-menue { position: sticky; top: 0; z-index: 20; margin: 0 -12px 14px; padding: 8px 12px; background: var(--creme); border-bottom: 1px solid var(--creme-dunkler); -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  body.admin-page #admin-menue .menue-punkt { min-height: 44px; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  /* 16 Pixel verhindern das automatische Hineinzoomen beim Tippen in ein Feld */
  body.admin-page input, body.admin-page select, body.admin-page textarea { font-size: 16px; max-width: 100%; }
  body.admin-page input[type=checkbox], body.admin-page input[type=radio] { width: auto; min-width: 22px; min-height: 22px; }
  /* Kalender-Übersicht: Kopf in zwei Zeilen, Heute-Knopf rechts, Legende umbrechen */
  #kalu-kopf { gap: 6px; }
  #kalu-monat { flex: 1 1 auto; min-width: 0; font-size: 15px; }
  .card .kalu-nav { min-height: 44px; min-width: 44px; padding: 8px 12px; }
  #kalu-legende { display: flex; flex-wrap: wrap; gap: 6px; }
  .kalu-zeile-btn { padding: 8px 10px; }
  /* Legende unter dem Kalender: die schmalen Balken der Tagesfelder gelten nicht für die Beschriftungen */
  #kalu-legende .kalu-chip { height: auto; padding: 3px 10px; font-size: 12px; }
  /* Monatszahlen: jede Mitarbeiterin als eigene Karte statt breiter Tabelle, damit man am Handy bequem eintragen kann */
  #mz-tabelle .praemie-tabelle { display: block; overflow: visible; white-space: normal; }
  #mz-tabelle thead { display: none; }
  #mz-tabelle tbody, #mz-tabelle tr { display: block; }
  #mz-tabelle tr { border: 1px solid var(--creme-dunkler); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; background: var(--weiss); }
  #mz-tabelle td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; text-align: right; }
  #mz-tabelle td::before { content: attr(data-label); color: var(--text-gedaempft); font-size: 13px; text-align: left; flex: 0 0 auto; }
  #mz-tabelle td.mz-name { font-weight: 700; justify-content: flex-start; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--creme-dunkler); }
  #mz-tabelle td.mz-name::before { content: none; }
  #mz-tabelle input[type=text] { width: 120px !important; text-align: right; }
  /* Team-Dashboard: jede Mitarbeiterin als eigene Karte */
  #td-tabelle .praemie-tabelle { display: block; overflow: visible; white-space: normal; }
  #td-tabelle thead { display: none; }
  #td-tabelle tbody, #td-tabelle tr { display: block; }
  #td-tabelle tr { border: 1px solid var(--creme-dunkler); border-radius: 10px; padding: 8px 12px; margin: 0 0 10px; background: var(--weiss); }
  #td-tabelle td { display: block; overflow: hidden; padding: 6px 0; border: 0; text-align: right; }
  #td-tabelle td::before { content: attr(data-label); float: left; color: var(--text-gedaempft); font-size: 13px; text-align: left; margin-right: 12px; }
  #td-tabelle td .antrag-meta { display: block; }
  #td-tabelle td.td-name { text-align: left; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--creme-dunkler); }
  #td-tabelle td.td-name::before { content: none; }
  /* Tabellen (Prämie, Krankmeldungen): seitlich wischbar statt abgeschnitten */
  .praemie-tabelle { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .praemie-tabelle td, .praemie-tabelle th { padding: 8px 8px; }
  /* Popups füllen den Bildschirm */
  #kalu-popup-box { max-width: 100%; border-radius: 12px 12px 0 0; }
  /* Karten und Überschriften nicht über den Rand hinaus */
  .card, .antrag, .kalu-eintrag { overflow-wrap: anywhere; }
  .akkordeon-inhalt > * { max-width: 100%; }
}

/* Verwaltung am Handy: Menü oben, alle Bereiche sichtbar (umbrechend, nicht fest), Kalender mit Punkten */
@media (max-width: 700px) {
  /* Menü am Handy: zugeklappt nur der aktuelle Bereich, Tippen klappt die Liste auf (nicht fest am Rand) */
  body.admin-page #admin-menue { position: static; display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: 6px; margin: 0 0 14px; padding: 0; background: transparent; border: 0; box-shadow: none; }
  body.admin-page #admin-menue .menue-punkt { display: none; width: 100%; justify-content: space-between; min-height: 48px; padding: 10px 16px; font-size: 16px; white-space: normal; text-align: left; }
  body.admin-page #admin-menue .menue-punkt.aktiv { display: flex; }
  body.admin-page #admin-menue:not(.offen) .menue-punkt.aktiv::after { content: "▾"; margin-left: auto; padding-left: 10px; font-size: 18px; }
  body.admin-page #admin-menue.offen .menue-punkt { display: flex; }
  body.admin-page #inhalt { padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
  body.admin-page .admin-bereich > h1.abschnitt-titel { font-size: 18px; margin: 0 0 10px; padding-bottom: 4px; }
  body.admin-page .card { padding: 12px; margin-bottom: 10px; border-radius: 10px; }
  body.admin-page details.akkordeon > summary h3 { font-size: 15px; }
  body.admin-page .fb-tabelle { font-size: 13px; }
  body.admin-page .fb-tabelle th, body.admin-page .fb-tabelle td { padding: 8px 6px; }
  /* Eingereichte Dokumente: Name immer gleich links, Zahl darunter */
  body.admin-page .ma-ordner > summary { flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  body.admin-page .ma-ordner .ma-ordner-titel { flex: 1 1 100%; }
  body.admin-page .ma-ordner .ma-ordner-zahl { flex: 1 1 auto; text-align: left; font-size: 12px; }
}

/* Schließen-Knopf der Glocke: nur am Handy sichtbar (dort füllt das Fenster den Bildschirm) */
.nur-handy { display: none; }
@media (max-width: 600px) {
  #admin-glocke-zu { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; background: var(--weiss); border: 1px solid var(--text-hell); border-radius: 4px; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  /* Verwaltung am Handy: "Zum Test Mitarbeiterbereich" und "Abmelden" ausgeblendet */
  body.admin-page #top-bar a.button, body.admin-page #btn-logout { display: none; }
}

/* Sehr kleine Handys */
@media (max-width: 380px) {
  #top-bar > strong { font-size: 14px; }
  .kal-nr { font-size: 12px; }
  .urlaub-zahlen, .uk-zahlen { gap: 6px; }
  .urlaub-zahlen .zahl { font-size: 22px; }
}

/* Querformat auf dem Handy: Buddy-Fenster nicht höher als der Bildschirm */
@media (max-height: 500px) and (orientation: landscape) {
  #buddy-toggle { padding: 8px 14px; }
  #lektionen-liste { max-height: 50dvh; }
}

/* Meine Gespräche und Ziele (04.11.2026): kompakt am Handy */
@media (max-width: 700px) {
  #gespraeche-tabs .gesp-tab { flex: 1 1 auto; text-align: center; }
  .gesp-zeile { flex-wrap: wrap; padding: 14px; }
  .gesp-karte { padding: 16px 14px; }
  .gesp-karte textarea, .gesp-karte select { font-size: 16px; }
  .gesp-selbst-zeile { flex-wrap: wrap; }
  .gesp-selbst-zeile select { min-height: 44px; }
  .gesp-aktionen button { flex: 1 1 100%; }
  .gesp-verlauf-zeile { grid-template-columns: 80px 1fr; }
  .gesp-verlauf-zeile strong { grid-column: 2; }
  .gesp-karte input[type=range] { min-height: 44px; }
}

/* Verwaltung am Handy: Feinschliff (06.11.2026) */
@media (max-width: 700px) {
  body.admin-page input[type=file] { width: 100% !important; max-width: 100%; box-sizing: border-box; }
  body.admin-page .uk-form button + .antrag-meta { display: block; margin-top: 6px; }
  body.admin-page button:not(.kalu-nav):not(.menue-punkt):not(#termin-popup-zu) { min-height: 44px; }
  /* Popup "Termine eintragen" füllt den Bildschirm */
  #termin-popup { padding: 0 !important; }
  #termin-popup > div { border-radius: 0 !important; max-width: none !important; min-height: 100%; }
  #termin-popup-inhalt { padding: 12px 14px 28px !important; }
  /* Gesundheitsprämie: pro Mitarbeiterin ein Block statt breiter Tabelle */
  table.pm-tab, table.pm-tab thead, table.pm-tab tbody, table.pm-tab tr, table.pm-tab td { display: block; white-space: normal; }
  table.pm-tab thead { display: none; }
  table.pm-tab tr { border: 1px solid var(--creme-dunkler, #EBDCCB); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; background: #fff; }
  table.pm-tab tbody tr:nth-child(even):not(.summe) { background: #fff; }
  table.pm-tab td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.pm-tab td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7A3A44; padding-top: 2px; }
  table.pm-tab td[data-label="Name"] { display: block; text-align: left; padding-bottom: 6px; border-bottom: 1px solid #FFF8EF; margin-bottom: 4px; }
  table.pm-tab td[data-label="Name"]::before, table.pm-tab td:not([data-label])::before { content: none; }
  table.pm-tab td.pm-hinweis-zelle { display: block; text-align: left; min-width: 0; padding-top: 8px; border-top: 1px solid #FFF8EF; margin-top: 4px; }
  table.pm-tab td.pm-hinweis-zelle::before { display: block; margin-bottom: 4px; }
  table.pm-tab tr.summe { background: #F7E9DC; }
  table.pm-tab tr.summe td:empty { display: none; }
  table.pm-tab tr.summe td:first-child { display: block; }
}
@media (max-width: 700px) {
  table.pm-tab tr.summe { display: flex; justify-content: space-between; align-items: center; }
  table.pm-tab tr.summe td { border: 0 !important; padding: 2px 0 !important; display: block; }
}

/* Handy-Feinschliff 07.11.2026: Hinweisleiste kompakter, Reiter der Zahlen in einer Zeile, Tabellen mit Wisch-Hinweis */
@media (max-width: 600px) {
  #hinweis-leiste, #admin-hinweis-leiste { padding: 8px 14px !important; gap: 8px !important; font-size: 13.5px !important; }
  #hinweis-leiste-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
  .hinweis-leiste-knoepfe { width: 100%; }
  .hinweis-leiste-knoepfe button { flex: 1 1 0; padding: 7px 10px !important; font-size: 14px; min-height: 36px; }
  #zahlen-reiter { gap: 6px !important; }
  #zahlen-reiter button { padding: 8px 11px !important; font-size: 13px !important; }
  .td-ausw-scroll { background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat local, linear-gradient(to left, rgba(79,0,11,.20), rgba(79,0,11,0)) right center / 16px 100% no-repeat scroll; }
  .lf-saeule-wert { font-size: 8.5px; }
}