/* Mobile-Anpassungen. Wird zusaetzlich zu style.css eingebunden (auf allen Seiten ausser
   mitarbeiterverwaltung.html/ampel_regeln.html/systemeinstellungen.html/projekt_neu.html - siehe Memory
   "Mobile-Version Planung", diese bleiben bewusst PC-only). Enthaelt zwei Arten von Regeln:
   1) Regeln OHNE @media: Grundzustand fuer Elemente, die nur mobil eine Bedeutung haben
      (z.B. .app-bottom-nav, .wizard-nav sind auf Desktop-Breite unsichtbar/neutral).
   2) Regeln INNERHALB @media (max-width: 768px): eigentliche mobile Layout-Umstellung. */

/* ---- Bottom-Nav: von js/mobile.js nach der Sidebar eingefuegt ---- */

.app-bottom-nav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 100;
    background: var(--farbe-sidebar);
    border-top: 1px solid rgba(255,255,255,.14);
    padding-bottom: env(safe-area-inset-bottom);
}
.app-bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px 8px;
    color: var(--farbe-sidebar-text);
    text-decoration: none;
    font-size: 13px;
    /* align-items:center zentriert nur die Box als Ganzes - bricht das Label auf schmalen Screens
       (4 Tabs, z.B. "Meine Aktionen") in mehrere Zeilen um, waeren diese ohne text-align sonst
       untereinander linksbuendig statt zentriert. */
    text-align: center;
}
.app-bottom-nav a .icon { position: relative; display: inline-flex; }
.app-bottom-nav a .icon svg { display: block; width: 22px; height: 22px; }
.badge-punkt {
    position: absolute;
    top: -2px;
    right: -6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--farbe-sidebar);
}
/* --farbe-rot-auf-dunkel/--farbe-gelb-auf-dunkel statt --farbe-rot/--farbe-gelb: .app-bottom-nav hat
   denselben dunklen Hintergrund wie die Desktop-Sidebar (--farbe-sidebar), siehe Kommentar bei
   .sidebar-nav-punkt-rot/-gelb in style.css - die normalen Statusfarben sind fuer helle Hintergruende
   abgestimmt und fielen dort bei einer Kontrast-Pruefung durch. */
.badge-punkt-rot { background: var(--farbe-rot-auf-dunkel); }
.badge-punkt-gelb { background: var(--farbe-gelb-auf-dunkel); }
.app-bottom-nav a.aktiv { color: var(--farbe-marke-gelb); border-top: 2px solid var(--farbe-marke-gelb); }
.app-bottom-nav a:not(.aktiv) { border-top: 2px solid transparent; }

/* ---- Wizard (Termin abschliessen, Berichte): auf Desktop immer alle Schritte sichtbar,
   .wizard-nav (Weiter/Zurueck-Leiste) unsichtbar - nur auf schmalen Screens aktiv. ---- */

.wizard-nav { display: none; }
.wizard-schritt-label { display: none; }

/* ---- Generisches Tabelle/Karten-Umschalten: manche Seiten rendern fuer dieselben Daten sowohl
   eine <table class="tabelle-mobil-versteckt"> als auch eine <div class="liste-karten mobil-karten">
   (z.B. Kontakte/Versicherung-Makler in projekt.js) - hier nur die Sichtbarkeits-Umschaltung. ---- */
.liste-karten.mobil-karten { display: none; }

/* Elemente, die nur mobil eine Bedeutung haben (z.B. Sortier-Umschaltknopf im Messprotokoll, siehe
   renderMessprotokoll() in js/messprotokoll.js - am Desktop wird stattdessen ueber die Tabellenkoepfe
   sortiert, siehe .sortierbar in style.css, gleiches Muster wie "Alle Projekte" in js/projekte.js). */
.nur-mobil { display: none; }

/* Messprotokoll-Kartenliste: zusaetzlicher Abstand zwischen Gruppen mit demselben Hauptsortier-Wert
   (siehe neueGruppe-Berechnung in renderMessprotokoll()) - zusaetzlich zum normalen .liste-karten-Gap,
   macht die Gruppierung ohne Tabellenkopf erkennbar. */
.mp-karte-neue-gruppe { margin-top: 14px; }

@media (max-width: 768px) {
    body {
        flex-direction: column;
        /*background-image: url('../assets/hintergrund_entwurf_unscharf_hell.png');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% auto;
        background-attachment: fixed;*/
    }

    .app-sidebar { display: none; }

    /* Der Lade-Platzhalter (body:not(.app-bereit)::before/::after in style.css) bildet die Desktop-Sidebar
       nach (212px breiter Balken links, Spinner mittig daneben versetzt) - auf Mobil gibt es keine linke
       Sidebar (siehe .app-sidebar { display: none } oben), der Balken erschien bisher bei jedem
       Seitenwechsel kurz als Flackern einer Form, die auf Mobil gar nicht existiert. Hier ausgeblendet,
       Spinner stattdessen ueber die volle Breite zentriert. */
    body:not(.app-bereit)::before { display: none; }
    body:not(.app-bereit)::after { left: 50%; }

    .app-hauptbereich { width: 100%; }

    main { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); } /* unten Platz fuer die fixe Bottom-Nav */

    /* Mindestabstand zwischen Breadcrumb-Text und dem rechts daneben sitzenden Button (z.B. "Zurueck
       zum Projekt") - justify-content:space-between allein garantiert bei wenig Restbreite keinen
       Abstand. */
    .breadcrumb { gap: 5px; }

    /* Chips sind breiter als der fruehere reine Text - bei mehr als zwei Ebenen (Projekt/Paket/Termin)
       wuerde die Breadcrumb-Zeile durch mehrfachen Zeilenumbruch sehr hoch werden. Standardmaessig daher
       nur das letzte (aktuelle) Segment sichtbar, davor der "..."-Chip (siehe .breadcrumb-mehr in
       style.css, eingefuegt von aktualisiereBreadcrumbTrenner() in app.js) zum bei Bedarf Ausklappen der
       uebrigen Kette - einmal angeklickt (Klasse .erweitert auf .breadcrumb) bleibt die volle Kette
       sichtbar, der "..."-Chip verschwindet dann (seine Aufgabe ist erledigt). */
    .breadcrumb-mehr { display: inline-flex; }
    .breadcrumb:not(.erweitert) .breadcrumb-teil:not(:last-child) { display: none; }
    .breadcrumb.erweitert .breadcrumb-mehr { display: none; }

    /* Die vier festen Lasche-Positionen (siehe .lasche in style.css) sind fuer Desktop-Breiten gedacht -
       auf einem schmalen Handybildschirm wuerden mehrere davon durch den clamp()-Rand-Schutz auf dieselbe
       Stelle zusammenfallen (Unterscheidungswert verloren) und zusaetzlich mit der ohnehin schon knappen
       Bildschirmhoehe/der fixen Bottom-Nav konkurrieren - deshalb hier ausgeblendet. Der per body.hat-lasche
       reservierte Zusatzabstand oben (siehe style.css) wird hier wieder zurueckgesetzt, sonst bliebe eine
       Luecke ohne sichtbaren Grund. */
    .lasche { display: none; }
    body.hat-lasche main { padding-top: 18px; }

    /* Projektseite: Badges (Projektnummer/dringend/abgeschlossen) sollen mobil ueber statt unter dem
       Titel stehen. column-reverse dreht nur die Anzeigereihenfolge um (DOM-Reihenfolge bleibt
       Titel-zuerst, damit der Titel weiterhin als Erstes vorgelesen/fokussiert wird). */
    .projekt-titel-zeile { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }

    /* Suchfeld "Alle Projekte": am Desktop begrenzt (siehe .projekte-suchfeld in style.css), mobil
       soll es die gesamte Breite der Toolbar einnehmen ("+ Neues Projekt" ist mobil ohnehin
       ausgeblendet, siehe .mobil-versteckt, daher keine Konkurrenz um den Platz). */
    .projekte-suchfeld { max-width: none; }
    .filter-leiste .tf-clear-wrap { max-width: none; flex: 1 0 100%; }

    .app-bottom-nav { display: flex; }

    /* Grids einspaltig statt nebeneinander */
    .feld-zeile, .feld-zeile.drei, .feld-zeile.vier { grid-template-columns: 1fr; gap: 10px 0; }
    /* Ausnahme: kurze Felder (z.B. Anrede + Titel im Kontakt-Formular, siehe kontaktFelderHtml() in
       app.js), die auch mobil nebeneinander bleiben sollen statt je eine eigene Zeile zu beanspruchen. */
    .feld-zeile.feld-zeile-immer-zwei { grid-template-columns: 1fr 1fr; gap: 0 10px; }
    /* Dig/°C/%relF im "Messwerte hinzufuegen"-Dialog (siehe kontrollfahrtFelderHtml() in
       js/messprotokoll.js) - sollen auch mobil nebeneinander bleiben, sonst wird der Dialog bei
       mehreren Messpunkten sehr lang. */
    .feld-zeile.feld-zeile-immer-drei { grid-template-columns: 1fr 1fr 1fr; gap: 0 8px; }
    /* Adresse/Top/Ort (siehe .feld-zeile-adresse in style.css) - blieb bisher ueber eine Inline-
       Vorgabe an grid-template-columns auch mobil dreispaltig, erbte dabei aber versehentlich den
       obigen Spaltenabstand 0 der Einspaltig-Regel, daher keine sichtbaren Abstaende zwischen den
       Feldern. */
    .feld-zeile.feld-zeile-adresse { grid-template-columns: 2fr 1fr 2fr; gap: 0 10px; }

    /* Filterleiste "Alle Fotos" (siehe .af-filter-felder in style.css - Label-ueber-Feld gilt dort schon
       fuer alle Groessen): mobil erzwingt ein 2-Spalten-Raster statt der freien Desktop-Zeile. Die vier
       Felder liegen im DOM bereits in der Reihenfolge Ersteller/Paket/Von/Bis, ein einfaches 2-Spalten-
       Grid ergibt daher automatisch Ersteller+Paket in Zeile 1 und Von+Bis in Zeile 2. */
    .af-filter-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .af-filter-feld select, .af-filter-feld input { width: 100%; }

    /* Favoriten-Herz (siehe .af-favorit-btn in style.css): am Desktop nur bei Hover ueber die Kachel
       sichtbar, aber Hover gibt es auf Touch-Geraeten nicht - mobil daher immer sichtbar. */
    .af-favorit-btn { opacity: 1; }

    /* ---- Groessere Schrift & Tap-Targets: die Seite muss auch fuer aeltere Arbeiter mit
       einfachen/kleinen Handys gut bedienbar sein - lieber mehr scrollen als winzigen Text/Knoepfe. ---- */
    body { font-size: 16px; }
    h1 { font-size: 22px; }
    h2 { font-size: 17px; }
    h3 { font-size: 15px; }
    h4 { font-size: 14px; }
    label { font-size: 14px; }
    input, select, textarea { font-size: 16px; padding: 10px 10px; min-height: 44px; }
    /* Gleiche ca. drei-Zeilen-Standardhoehe wie am Desktop, nur an die groessere mobile Schrift
       angepasst (16px statt 13px). */
    textarea { height: 88px; }
    /* Audioaufnahme-Button (.text-mit-audio in style.css) etwas groesser als am Desktop fuer einen
       ausreichenden Tap-Bereich, aber kleiner als die Textarea - align-items:center dort zentriert ihn
       vertikal daneben. */
    .text-mit-audio .audio-aufnahme .toolbar button.audio-start-btn { width: 56px; height: 56px; }
    /* Seitliches Padding etwas knapper als frueher (18px) - laesst mehrspaltigen Buttons (z.B. "Aus
       Projekt" neben "Suchen"/"+ Neu" im Kontaktfeld) etwas mehr Raum fuer einzeilige Beschriftung,
       ohne den Tap-Bereich (min-height bleibt) spuerbar zu verkleinern. Bewusst allgemein an dieser
       einen Stelle geaendert statt nur fuer einzelne Buttons - keine Garantie, dass jede Beschriftung
       dadurch einzeilig bleibt. */
    button, .knopf { font-size: 16px; padding: 12px 12px; min-height: 44px; }
    /* Chips (.chip-vorschlag im Schadensbericht, .chip-auswahl bei Termin abschliessen, siehe
       style.css) bleiben bewusst kleiner/dezenter als normale Buttons - etwas mehr Hoehe als am
       Desktop fuer eine angenehmere Tap-Flaeche, aber ohne auf die volle Button-Groesse zu wachsen. */
    .chip-vorschlag, .chip-auswahl { padding: 6px 12px; }
    /* Umschalt-Buttons in Meine Aktionen ("Gelesene/Erledigte anzeigen"): sitzen oben rechts in der
       Kartenecke, dort wirkt die normale grosse Tap-Groesse zu wuchtig - kleiner statt der globalen
       Button-Regel. Gezielt ueber eine eigene Klasse statt .karte-kopf-aktionen (siehe style.css),
       da dieser generische Mechanismus auch anderswo Kartenkopf-Buttons erzeugt (z.B. "+ Problem
       melden" auf der Paketseite) - eine Regel auf der generischen Klasse haette die dort faelschlich
       mitverkleinert. */
    .dashboard-umschalt-btn { font-size: 12px; padding: 4px 8px; min-height: 0; }
    /* Nur fuer Meine Aktionen: dank der kleinen Groesse oben passt der Button auch mobil oben rechts
       in die Kartenecke (siehe .karte-kopf-aktionen in style.css, dort am Desktop gehalten) - gezielt
       ueber :has() statt generisch, damit andere Kartenkopf-Buttons (z.B. "+ Problem melden") mobil
       weiterhin normal im Fluss unter dem Titel bleiben. */
    .karte-kopf-aktionen:has(.dashboard-umschalt-btn) { position: absolute; top: 14px; right: 16px; margin: 0; }
    .karte-inhalt.hat-kopf-aktionen:has(.dashboard-umschalt-btn) { padding-top: 12px; }
    /* Der Titel ("Benachrichtigungen ▾" etc.) liegt in derselben Zeile wie der oben absolut
       positionierte Button - ohne reservierten Platz laeuft ein laengerer Titel auf schmalen Screens
       sonst optisch in den Button hinein. Platz reserviert (ca. Button-Breite), Titel kuerzt sich zur
       Sicherheit zusaetzlich per Ellipsis, falls es auf einem noch schmaleren Geraet doch eng wird. */
    .karte:has(.dashboard-umschalt-btn) .karte-kopf-klickbar { padding-right: 128px; }
    .karte:has(.dashboard-umschalt-btn) .karte-kopf-klickbar h3 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .karte:has(.dashboard-umschalt-btn) .karte-einklapp-pfeil { flex-shrink: 0; }
    /* Kontaktfeld (Mieter/Eigentuemer im Mietschein, Kunde/Mieter vor Ort im Schadensbericht,
       Versicherung/Makler, ...; siehe kontaktFeldHtml() in app.js): die Button-Reihe (Aus Projekt/
       Suchen/+Neu) daneben nimmt mobil sonst fast die ganze Breite ein und laesst dem Textfeld kaum
       noch Platz. Textfeld bekommt daher eine eigene volle Zeile, die Buttons brechen darunter um. */
    .kontakt-feld-reihe { flex-wrap: wrap; }
    .kontakt-feld-reihe .kontakt-feld-input-wrap { flex: 1 1 100%; }
    .kontakt-feld-reihe button { flex: 1; }
    .badge { font-size: 13px; padding: 3px 8px; }
    .eintrag-karte .titel { font-size: 16px; }
    .eintrag-karte .neben { font-size: 14px; }
    .eintrag-karte { padding: 12px 14px; }

    /* Tabellen bleiben technisch Tabellen (horizontal scrollbar in .karte), aber mit lesbarer Schrift */
    th, td { padding: 10px 10px; font-size: 14px; }
    th { font-size: 12px; }

    /* Tabelle/Karten-Umschalten (siehe Definition oben) */
    .tabelle-mobil-versteckt { display: none; }
    .liste-karten.mobil-karten { display: flex; }
    .nur-mobil { display: block; }

    /* Probleme (paket.js): Ignorieren/Beseitigen-Buttons untereinander statt nebeneinander */
    .problem-aktionen { flex-direction: column; }

    /* Foto-/Dokument-Upload-Formulare (paket.js, termin.js, termin_abschliessen.js, abnahmebericht.js):
       Datei-Input, Text-Input und Button stehen inline (display:flex; align-items:end) nebeneinander -
       auf schmalen Screens quetscht das den nativen "Datei auswaehlen"-Button. Gestapelt statt
       nebeneinander (align-items:end ist inline gesetzt, daher !important noetig zum Ueberschreiben). */
    #foto-formular, #dokument-formular {
        flex-direction: column;
        align-items: stretch !important;
    }

    /* Bild-Feld: "Foto aufnehmen"-Button nur mobil, beide Buttons teilen sich die Breite */
    .bild-feld-kamera-btn { display: block; }
    .bild-feld-knoepfe button { flex: 1; }

    /* Foto-Upload-Zeile (siehe .foto-upload-zeile in style.css): Desktop-3-Spalten sind mobil zu schmal
       - Bildbeschreibung wuerde neben die (hier breiteren) Auswahl/Aufnehmen-Knoepfen gequetscht und aus
       der Karte ragen. Eine Spalte, jedes Feld/der Button/die Tags jeweils in eigener Zeile. */
    .foto-upload-zeile { grid-template-columns: 1fr; }
    .foto-upload-tags-zeile { grid-column: 1; }

    /* Generische Utility-Klasse: Element ist mobil nicht sinnvoll (z.B. verlinkt auf eine PC-only-Seite) */
    .mobil-versteckt { display: none; }

    /* Wizard: nur der aktive Schritt ist sichtbar */
    .wizard-schritt { display: none; }
    .wizard-schritt.aktiv { display: block; }
    .wizard-nav {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
    }
    .wizard-schritt-label {
        display: block;
        text-align: center;
        font-size: 13px;
        color: var(--farbe-text-schwach);
        margin-bottom: 10px;
    }

    /* Der urspruengliche Abschluss-Knopf entfaellt mobil - der Wizard-Fertig-Knopf (wizard-nav) uebernimmt */
    .wizard-abschluss-knopf { display: none; }

    /* ---- Kalender: eigene Tagesansicht statt der Desktop-Wochenansicht (siehe js/kalender.js,
       mobilModus-Verzweigung in render()/renderAnsicht()) ---- */

    .kalender-mobil-kopf {
        position: sticky;
        top: 0;
        background: var(--farbe-hintergrund);
        z-index: 5;
        padding-bottom: 4px;
        margin: -14px -14px 6px;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 6px;
    }
    .kalender-mobil-wochen-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 13px;
    }
    .kalender-mobil-tage {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .kalender-mobil-tag-chip {
        flex: 1 0 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 4px;
        border: 1px solid var(--farbe-rand);
        border-radius: 8px;
        background: #fff;
        font-size: 13px;
        color: var(--farbe-text);
        cursor: pointer;
    }
    .kalender-mobil-tag-chip .tag-nummer { font-size: 15px; font-weight: 600; }
    .kalender-mobil-tag-chip.heute { border-color: var(--farbe-marke-gelb-dunkel); }
    .kalender-mobil-tag-chip.aktiv { background: var(--farbe-marke-gelb); color: #1a1a1a; border-color: var(--farbe-marke-gelb-dunkel); }
    .kalender-mobil-filter {
        display: flex;
        gap: 6px;
    }
    .kalender-mobil-filter select, .kalender-mobil-filter button {
        flex: 1;
        font-size: 14px;
        padding: 6px 4px;
        min-width: 0;
    }

    /* Kopfzeile im Kalender-Grid selbst: mobil nur eine Mitarbeiternamen-Zeile (kein Tag-Titel wie
       am Desktop), deshalb reicht eine niedrigere feste Hoehe als die Desktop-68px. */
    .kalender-outlook-kopf-zeile, .kalender-outlook-ecke { height: 36px; }

    /* ---- Projekthistorie: Zeitleiste am Desktop reserviert viel Breite fuer Datum/Spur/Einrueckung
       (108px + 16px + bis zu 24px) - mobil ist das zu viel, die eigentlichen Karteninhalte werden zu
       schmal gequetscht. Datum/Uhrzeit (siehe historieDatumHtml() in projekt_historie.js) stehen hier
       als zwei separate Spans im Markup - display:flex/column stellt sie untereinander, ganz ohne
       eigene mobil/desktop-Verzweigung in JS. ---- */
    .historie-zeile { gap: 6px; }
    .historie-datum {
        flex: 0 0 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 11px;
    }
    .historie-spur { flex: 0 0 14px; }
    .historie-inhalt { margin-left: calc(var(--historie-ebene, 0) * 6px); }

    /* Mitarbeiter-Auswahl-Dialog als Bottom-Sheet statt zentriertem Modal */
    #dialog-mitarbeiter-auswahl {
        position: fixed;
        inset: auto 0 0 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        max-height: 75vh;
        border-radius: 12px 12px 0 0;
    }
}