/* Stil der Brandschutz-App auf dem Gerät.
 *
 * Alle Maße sind Pixel der Power-Apps-Fläche (1366 × 768); die Fläche wird als
 * Ganzes auf den Bildschirm skaliert (flaeche.js). Lage und Größe kommen aus dem
 * Snapshot 2026-11-11_1303 (Src/*.pa.yaml); die Steuerelement-Namen stehen in
 * Kommentaren, die Zuordnung in templates/app/abgleich.md.
 * Schriftgrößen: klassische Steuerelemente geben Punkt an (× 4/3 = Pixel),
 * moderne Pixel (am Video vom 11.11.2026 nachgemessen).
 */

@font-face { font-family: "BSW Segoe"; src: url("/app/schriften/Selawik-Light.ttf") format("truetype"); font-weight: 300; font-display: block; }
@font-face { font-family: "BSW Segoe"; src: url("/app/schriften/Selawik-Semilight.ttf") format("truetype"); font-weight: 350; font-display: block; }
@font-face { font-family: "BSW Segoe"; src: url("/app/schriften/Selawik-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "BSW Segoe"; src: url("/app/schriften/Selawik-Semibold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "BSW Segoe"; src: url("/app/schriften/Selawik-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }
@font-face { font-family: "BSW Open Sans"; src: url("/app/schriften/OpenSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: block; }
@font-face { font-family: "BSW Open Sans"; src: url("/app/schriften/OpenSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: block; }
@font-face { font-family: "BSW Open Sans"; src: url("/app/schriften/OpenSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: block; }
@font-face { font-family: "BSW Open Sans"; src: url("/app/schriften/OpenSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: block; }

:root {
  --segoe: "BSW Segoe", "Segoe UI", sans-serif;
  --opensans: "BSW Open Sans", "Open Sans", sans-serif;
  /* DropShadow.Semibold der Power App */
  --schatten: 0 6.4px 14.4px rgba(0, 0, 0, 0.132), 0 1.2px 3.6px rgba(0, 0, 0, 0.108);
  --text: #242424;
  --marke: #0f6cbd;
  --dunkel: #4a4a4a;
  --nachtblau: #00126b;
  --blau: #3860b2;
  --hellblau: #bacae2;
  --gefuellt: #f5f5f5;
}

/* ------------------------------------------------------------ Grundlagen */
html, body { margin: 0; height: 100%; background: #000; }
body {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--segoe);
  color: #000;
}
[hidden] { display: none !important; }
#buehne {
  position: fixed;
  left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px);
  top: env(safe-area-inset-top, 0px);
  bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  background: #000;
}
.flaeche {
  position: absolute;
  left: 0;
  top: 0;
  width: 1366px;
  height: 768px;
  overflow: hidden;
  background: #fff;
  transform-origin: 0 0;
  visibility: hidden;
  transition: none;
}
/* Erscheinen mit kurzer Überblendung (Power App: ScreenTransition.Fade). */
.flaeche { opacity: 0; }
.flaeche.bereit { visibility: visible; opacity: 1; transition: opacity 0.15s ease-out; }
.flaeche.bereit.verschoben { transition: opacity 0.15s ease-out, transform 0.18s ease-out; }
.flaeche, .flaeche * { box-sizing: border-box; }
/* Kein Markieren und kein Kontextmenü auf Knöpfen und Flächen, nur in Feldern (Vertrag 7.7). */
.flaeche, .flaeche button, .flaeche a, .meldungen, .schleier-geraet {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.flaeche input, .flaeche textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Rückstellungen ohne Gewicht (:where), damit jede Klasse sie überschreibt. */
:where(.flaeche) :where(button, input, textarea) { font: inherit; color: inherit; margin: 0; }
:where(.flaeche) :where(a) { color: inherit; text-decoration: none; }
:where(.flaeche) :where(img) { -webkit-user-drag: none; }
.abs { position: absolute; }
.fett { font-weight: 700; }

/* Symbole (Classic/Icon): Glyphe füllt den Kasten. */
.symbol {
  position: absolute;
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
}
.symbol svg { display: block; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.symbol:active { filter: brightness(0.8); }
.symbol:disabled { color: var(--aus, #a6a6a6) !important; cursor: default; } /* DisabledColor */
@media (hover: hover) {
  .symbol:not(:disabled):hover { filter: brightness(1.2); }
}

/* ------------------------------------------------------------ Kopfleiste (Header) */
.kopf { position: absolute; left: 0; top: 0; width: 1366px; height: 95px; box-shadow: var(--schatten); z-index: 4; }
.kopf-titel {
  position: absolute; left: 0; top: 0; width: 1366px; height: 95px; padding: 5px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dunkel); color: #fff;
  font: 700 46.67px/1.2 var(--opensans); /* Label1, Size 35 */
}
.kopf-logo { position: absolute; left: 0; top: 0; width: 160px; height: 95px; object-fit: contain; }
.kopf .symbol { top: 15px; color: #fff; }
.kopf-start { left: 170px; }                 /* Icon3_…, Icon.Home */
.bereich-tuer .kopf-start, .bereich-schott .kopf-start { left: 176px; } /* Kategorieauswahl: X 176 */
.kopf-ablage { left: 1129px; }               /* neu, nur Administratoren */
.kopf-verwaltung { left: 1213px; }           /* neu, nur Administratoren */
.kopf-abmelden { left: 1297px; }             /* Icon.Leave */

/* ------------------------------------------------------------ Kacheln (Hauptmenü, Auswahl) */
.kachel {
  position: absolute; display: block; width: 300px; height: 150px; padding: 0; border: 0;
  border-radius: 20px; overflow: hidden; box-shadow: var(--schatten);
  background: #253046 center / cover no-repeat; color: #fff; cursor: pointer;
}
.kachel-gelb { background-image: url("/app/bilder/kachel_gelb.svg"); }   /* '34344972_hol4' */
.kachel-blau { background-image: url("/app/bilder/kachel_blau.svg"); }   /* '34344941_hol1' */
.kachel-gruen { background-image: url("/app/bilder/kachel_gruen.svg"); } /* '34344979_hol5' */
.kachel-text {
  position: absolute; left: 0; top: 0; width: 223px; height: 150px; padding: 5px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 40px/1.2 var(--segoe); color: #fff; /* Label1_…, Size 30 */
}
.kachel-gross { width: 350px; height: 350px; }
.kachel-gross .kachel-text { width: 350px; height: 350px; }

/* ------------------------------------------------------------ Anmeldung (Scr-Login) */
.anm-kasten { position: absolute; left: 375px; top: 212px; width: 616px; height: 488px; background: #fff; border-radius: 20px; box-shadow: var(--schatten); overflow: hidden; } /* Container1_1 */
.anm-titel { position: absolute; left: 0; top: 0; width: 616px; height: 79px; padding: 5px; display: flex; align-items: center; justify-content: center; background: #dbdbdb; font: 700 40px/1.2 var(--segoe); } /* Label9 */
.anm-zeile { position: absolute; left: 58px; width: 500px; height: 65px; background: #dbdbdb; border: 2px solid #dbdbdb; border-radius: 20px; box-shadow: var(--schatten); overflow: clip; }
/* clip statt hidden: Die Auswahlliste ragt 2 px über den Innenrand; mit „hidden“ rollte der Browser die
   Zeile beim Fokus um 2 px nach links, Beschriftung und Feld saßen 1–2 px falsch (Abgleich N2). */
.anm-zeile-name { top: 98px; }      /* Cont Mitarbeiterauswahl_1 */
.anm-zeile-passwort { top: 177px; } /* Cont Passwort */
.anm-beschriftung { position: absolute; left: -2px; top: -2px; width: 124px; height: 65px; padding: 5px; display: flex; align-items: center; justify-content: center; text-align: center; font: 400 21.33px/1.2 var(--segoe); } /* Label4_24, Label4_43: Size 16 */
.anm-name-platz { position: absolute; left: 122px; top: -2px; width: 375px; height: 65px; } /* Dropdown_Mitarbeiterauswahl X 557 */
.anm-name-platz .dd, .anm-name-platz .eingabe-klassisch { left: 0; top: 0; width: 375px; height: 65px; font-size: 26.67px; font-family: var(--segoe); } /* Dropdown_Mitarbeiterauswahl: Size 20, App.Theme.Font */
.anm-name-platz .dd-pfeil { background: #253046; } /* ChevronBackground RGBA(37, 48, 70, 1) */
.anm-name-platz .dd-pfeil svg { width: 30px; height: 30px; } /* Chevron so groß wie im Video (Abgleich N2) */
.anm-name-platz .eingabe-klassisch { border: 0; border-radius: 0; padding: 0 10px; }
/* „Vor- und Nachname eintippen ...“ (T-016) ist in 26,67 px 382 px breit, das Feld hat 355 px:
   der Platzhalter in 24 px (Size 18) passt ganz hinein, der eingetippte Name bleibt 26,67 px. */
.anm-name-platz .eingabe-klassisch::placeholder { font-size: 24px; }
#anm-name-liste button.gewaehlt { background: #253046; } /* SelectionFill RGBA(37, 48, 70, 1) */
.anm-passwort { position: absolute; left: 122px; top: -2px; width: 376px; height: 65px; padding: 5px 12px; border: 0; border-radius: 5px; background: #fff; font: 400 26.67px/1.2 var(--opensans); outline: none; } /* txt_Passwort */
.anm-passwort::placeholder { color: #767676; }
.anm-passwort::-ms-reveal, .anm-passwort::-ms-clear { display: none; } /* kein Auge im Passwortfeld (Edge), wie die Power App (Abgleich N3) */
@media (hover: hover) { .anm-passwort:hover { background: var(--hellblau); } }
.anm-person { position: absolute; left: 0; top: 257px; width: 616px; height: 230px; } /* Gallery5 */
.anm-foto { position: absolute; left: 60px; top: 0; width: 200px; height: 200px; border-radius: 100px; object-fit: cover; } /* Image5 */
.anm-anzeigename { position: absolute; left: 238px; top: 0; width: 378px; height: 200px; padding: 0 5px; display: flex; align-items: center; justify-content: center; text-align: center; color: #323130; font: 600 40px/1.2 var(--segoe); } /* Title1 */
.anm-weiter { left: 1081px; top: 356px; width: 200px; height: 200px; color: #000; } /* Icon5, Icon.NextArrow */

/* ------------------------------------------------------------ Hauptmenü (Scr_Übersicht) */
.menue-ueberschrift { position: absolute; top: 95px; height: 94px; padding: 5px; display: flex; align-items: center; justify-content: center; font: 600 26.67px/1.2 var(--opensans); } /* Label11, Size 20 */
.menue-pruefungen { left: 0; width: 451px; }
.menue-sonstiges { left: 453px; width: 913px; }   /* Label11_1 */
.menue-linie { position: absolute; left: 451px; top: 129px; width: 2px; height: 597px; background: #2b2b2b; } /* Rectangle9 */
.menue-k-tuer { left: 75px; top: 189px; }         /* Cont Türen */
.menue-k-klappe { left: 75px; top: 382px; }       /* Cont Klappen */
.menue-k-schott { left: 75px; top: 576px; }       /* Cont Schotte */
.menue-k-termine { left: 533px; top: 189px; }     /* Cont Termine */
.menue-k-email { left: 533px; top: 382px; }       /* Cont Email */
.menue-k-fotos { left: 533px; top: 576px; }       /* Cont Fotos */
.menue-k-aufgabe { left: 997px; top: 189px; }     /* Cont Aufgaben */
.menue-k-checkliste { left: 997px; top: 382px; }  /* Cont Checkliste */
.menue-k-hilti { left: 997px; top: 576px; }       /* Cont Hilti Handbuch */
.menue-k-klappe .kachel-text, .menue-k-fotos .kachel-text { width: 224px; }
.menue-k-schott .kachel-text, .menue-k-checkliste .kachel-text, .menue-k-hilti .kachel-text { width: 225px; }
.menue-k-termine .kachel-text { width: 222px; }
.menue-k-email .kachel-text { width: 226px; }
.menue-wartend { position: absolute; left: 460px; top: 94px; width: 373px; height: 80px; padding: 5px; overflow: auto; display: flex; flex-direction: column; justify-content: center; background: #ffbf00; color: #000; font: 400 17.33px/1.2 var(--opensans); z-index: 5; } /* Label21, Size 13 */
.menue-wartend br { display: none; }
.menue-wartend.lange { background: #ff0000; color: #fff; }
/* „Abgelehnt: N“ unter der Zahl, rot hinterlegt (lesbar auf Gelb und auf Rot) */
.menue-abgelehnt { align-self: flex-start; padding: 0 6px; border-radius: 3px; background: #c50f1f; color: #fff; font-weight: 700; }
.menue-wartend.mit-abgelehnt { height: 94px; } /* vier Zeilen ohne Rollbalken, endet über den Kacheln (top 189) */
.menue-wartend span[hidden] { display: none; }
.menue-version { position: absolute; left: 266px; top: 740px; width: 1100px; height: 28px; padding: 5px; display: flex; align-items: center; justify-content: flex-end; color: #808080; font: 400 16px/1.2 var(--opensans); } /* lblVersion, Size 12 */

/* ------------------------------------------------------------ Kategorie-Auswahl */
.auswahl-pruefung { left: 202px; top: 236px; } /* Cont Türen Prüfung / Cont Schott Prüfung */
.auswahl-doku { left: 768px; top: 236px; }     /* Cont Türen Dokumentation / Cont Schotte Dokumentation */

/* ------------------------------------------------------------ Titelleiste (cont Titel_…) */
.titelleiste, .ue-titelleiste { position: absolute; left: 0; top: 95px; width: 1366px; height: 100px; background: #fff; box-shadow: var(--schatten); z-index: 2; }
.titelleiste-text, .ue-titel { position: absolute; left: 0; top: 0; width: 1366px; height: 100px; text-align: center; color: var(--text); font: 700 60px/1.33 var(--segoe); white-space: nowrap; overflow: hidden; }
.pj-zurueck { left: 40px; top: 15px; }    /* Icon3_28, Icon.BackArrow */
.pj-speichern { left: 1275px; top: 15px; } /* Icon3_29, Icon.Save */
.ue-hinzufuegen { left: 1291px; top: 0; height: 53px; } /* Icon3_…, Icon.Add */
.ue-hinzufuegen-text { position: absolute; left: 1280px; top: 53px; width: 86px; height: 47px; text-align: center; font: 400 14px/1.3 var(--segoe); color: var(--text); } /* TextCanvas3_… */

/* ------------------------------------------------------------ Projektangaben (Scr-Projektangaben) */
.pj-formular { position: absolute; left: 30px; top: 212px; width: 1306px; height: 527px; background: #fff; box-shadow: var(--schatten); display: flex; flex-direction: column; } /* cont Formular_13, form_Projekt_1 */
.pj-karte { position: relative; flex: none; height: 134px; }
.pj-karte.mit-fehler { height: 164px; }
.pj-stern { position: absolute; left: 0; top: 10px; width: 30px; height: 30px; text-align: center; font: 400 14px/1.3 var(--segoe); color: var(--text); } /* StarVisible… */
.pj-name { position: absolute; left: 24px; top: 10px; width: 1258px; height: 60px; font: 600 30px/1.33 var(--segoe); color: var(--text); white-space: nowrap; } /* DataCardKey…, Size 30 */
.pj-wert { position: absolute; left: 24px; top: 74px; width: 1258px; height: 60px; font-size: 30px; } /* DataCardValue…, FontSize 30 */
.pj-fehler { position: absolute; left: 24px; top: 134px; width: 1258px; height: 30px; font: 400 14px/1.3 var(--segoe); color: #c50f1f; } /* ErrorMessage… */

/* ------------------------------------------------------------ Übersicht (Scr-…-Übersicht) */
.ue-projektbereich, .ue-detail { position: absolute; background: #fff; box-shadow: var(--schatten); overflow: hidden; }
.ue-projektbereich { left: 0; top: 195px; width: 1366px; height: 573px; } /* cont Formular_11/_22, cont Prüfprojekte */
.ue-projekte-kopf { position: absolute; left: 0; top: 0; width: 100%; height: 58px; display: flex; align-items: center; justify-content: center; background: var(--dunkel); color: #fff; font: 700 30px/1.33 var(--segoe); } /* TextCanvas7_… */
.ue-suche { position: absolute; left: 5px; top: 4px; width: 281px; height: 51px; padding: 0 12px; border: 2px solid #dbdbdb; border-radius: 20px; background: #fff; color: #000; font: 400 28px/1.2 var(--segoe); outline: none; -webkit-appearance: none; appearance: none; } /* Kundenfilter…, Size 21 */
.ue-suche::placeholder { color: #767676; }
.ue-suche::-webkit-search-cancel-button { display: none; }
.galerie { position: absolute; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.galerie::-webkit-scrollbar { display: none; }
.ue-projekte { left: 0; top: 58px; width: 1366px; height: 515px; padding: 20px 20px 0; } /* GalleryPrüfprojekte / gal-Prüfprojekte_… */
.ue-projekt, .ue-pruefung { position: relative; height: 100px; margin-bottom: 20px; border-radius: 20px; box-shadow: var(--schatten); overflow: hidden; } /* Container2_… */
.pz, .dz, .az { position: absolute; overflow: hidden; color: var(--text); font: 400 18px/1.33 var(--segoe); }
.pz.fett, .dz.fett { top: 0; height: 42px; display: flex; align-items: center; font-weight: 700; }
.pz:not(.fett), .dz:not(.fett) { top: 42px; height: 58px; }
.pz-linie { position: absolute; top: 0; width: 1px; height: 100px; background: var(--dunkel); } /* Trennlinie_… */
.pz-neu, .pz-abschluss { top: 1px; height: 52px; color: var(--nachtblau); }
.pz-ansehen { top: 0; color: var(--nachtblau); }
.pz-neu-text, .pz-abschluss-text { position: absolute; height: 47px; text-align: center; font: 400 14px/1.2 var(--segoe); color: var(--text); overflow: hidden; }
/* „Abschließen“ (T-016): eine Zeile, mittig unter dem Papierflieger, 136 breit (Flieger X − 36);
   so reicht der Text in keiner Prüfart unter das Auge oder an den Statuskreis. */
.pz-abschluss-text { width: 136px; white-space: nowrap; text-overflow: ellipsis; }
.pz-kreis { position: absolute; width: 50px; height: 50px; border-radius: 25px; background: #ffa500; } /* Circle1…: Color.Orange */
.pz-kreis.zu { background: #008000; }                                                                  /* Color.Green */
.ue-detail { left: 0; top: 195px; width: 1366px; height: 573px; } /* cont Projektdetail-… */
.ue-detail-kopf { position: absolute; left: 0; top: 0; width: 100%; height: 119px; padding-top: 2px; text-align: center; text-decoration: underline; background: var(--dunkel); color: #fff; font: 700 30px/1.33 var(--segoe); white-space: nowrap; overflow: hidden; } /* TextCanvas7_… */
.ue-zurueck { position: absolute; left: 20px; top: 4px; width: 240px; height: 51px; border-radius: 10px; } /* ButtonCanvas2_… */
.ue-detail-neu { left: 1242px; top: 3px; height: 52px; color: #fff; }
.ue-detail-neu-text { position: absolute; top: 4px; height: 51px; display: flex; align-items: center; justify-content: flex-end; text-align: right; color: #fff; font: 400 14px/1.2 var(--segoe); }
.ue-detail-anzahl { position: absolute; left: 690px; top: 60px; width: 318px; height: 37px; padding: 5px; display: flex; align-items: center; color: #fff; font: 600 17.33px/1.2 var(--opensans); white-space: nowrap; } /* Label16_… */
.ue-tag { position: absolute; left: 446px; top: 55px; width: 200px; height: 44px; } /* DatePicker1_… */
.ue-tag .datum, .abs-naechste .dd { left: 0; top: 0; width: 100%; height: 100%; }
.ue-tag .datum { font-size: 18.67px; } /* Size 14 */
.abs-naechste .dd { font-size: 17.33px; } /* Size 13 */
.ue-tag-leeren { left: 565px; top: 57px; width: 37px; height: 40px; } /* Icon14_…, Icon.Cancel */
.ue-pruefungen { left: 0; top: 119px; width: 1366px; height: 454px; padding: 20px 20px 0; } /* Gallery… */
.dz-uhr { position: absolute; left: 1038px; top: 65px; width: 150px; height: 33px; padding: 5px; display: flex; align-items: center; font: 400 17.33px/1.2 var(--opensans); color: #000; } /* Label20…, Size 13 */
.dz-uhr.wartet { color: #000; background: #ffbf00; width: auto; padding: 2px 8px; font-weight: 600; }
.dz-uhr.abgelehnt { color: #fff; background: #ff0000; width: auto; padding: 2px 8px; font-weight: 600; }
.dz-ampel { position: absolute; left: 1184px; top: 16px; width: 64px; height: 64px; } /* Icon2…: Check, Warning, Cancel */
.ampel-gut { color: #008000; } .ampel-warnung { color: #ffa500; } .ampel-schlecht { color: #ff0000; }
.dz-knopf { position: absolute; left: 0; top: 0; width: 1266px; height: 100px; border: 0; background: transparent; padding: 0; cursor: pointer; } /* ButtonCanvas3_…, Transparent */
.dz-knopf:active { background: rgba(0, 0, 0, 0.04); }

/* Neu, nur Administratoren (T-020, Julius 12.11.2026): „Abschluss aufheben“ in der Kopfzeile
   gespiegelt zu „zu den Projekten“, an der Stelle von „neue Prüfung“ (bei einem
   abgeschlossenen Projekt ausgeblendet); darunter die Linkzeile. Nur mit der Linkzeile
   (Klasse `mit-link`) rückt die Galerie 52 px tiefer, für Benutzer bleibt alles am Platz. */
.knopf-modern.ue-aufheben { position: absolute; top: 4px; right: 20px; width: 240px; height: 51px; border-radius: 10px; font-size: 21px; }
.ue-link { position: absolute; left: 0; top: 119px; width: 100%; height: 52px; padding: 0 20px; display: flex; align-items: center; gap: 12px; background: #fff; border-bottom: 1px solid #d1d1d1; }
.ue-link-titel { flex: none; color: var(--text); font: 600 18px/1.2 var(--segoe); white-space: nowrap; }
.ue-link-text { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #d1d1d1; border-radius: 4px; background: var(--gefuellt); color: var(--text); font: 400 18px/1.2 var(--segoe); outline: none; }
.ue-link-hinweis { flex: 1; min-width: 0; color: var(--text); font: 400 18px/1.2 var(--segoe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knopf-modern.ue-link-knopf { flex: none; min-width: 120px; height: 38px; font-size: 18px; }
.ue-detail.mit-link .ue-pruefungen { top: 171px; height: 402px; }

/* Abschlussfenster (cont-Projekt abschließen_…) */
.schleier { position: absolute; left: 0; top: 0; width: 1366px; height: 768px; background: rgba(214, 221, 224, 0.75); z-index: 20; }
.abs-kasten { position: absolute; left: 175px; top: 33px; width: 1016px; height: 702px; background: #fff; border-radius: 20px; box-shadow: var(--schatten); overflow: hidden; } /* Container4_2… */
.abs-titel { position: absolute; left: 0; top: 0; width: 1016px; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--dunkel); color: #fff; font: 700 30px/1.33 var(--segoe); }
.abs-text { position: absolute; left: 0; top: 70px; width: 1016px; height: 65px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text); font: 400 21px/1.33 var(--segoe); }
.abs-liste { left: 0; top: 135px; width: 1016px; height: 450px; padding: 10px 10px 0; } /* gal-…-Abschluss */
.abs-zeile { position: relative; height: 50px; margin-bottom: 10px; border-radius: 20px; box-shadow: var(--schatten); overflow: hidden; }
.az { top: 0; height: 50px; padding-left: 5px; }
.az-ampel { position: absolute; top: 0; width: 50px; height: 50px; }
.az-pdf.fehlt { color: #c50f1f; }
.abs-naechste { position: absolute; left: 28px; top: 625px; width: 393px; height: 40px; } /* Dropdown_Terminerinnerung_… */
.abs-knopf { position: absolute; top: 605px; width: 240px; height: 80px; } /* ButtonCanvas1_… */
.abs-abbrechen { left: 467px; }
.abs-ok { left: 749px; }

/* Übersicht je Prüfart: Türen (Scr-Türen-Übersicht) */
.art-tuer .ue-projekt { border-radius: 0; }
.art-tuer .pz-t1, .art-tuer .pz-w1 { left: 0; width: 210px; padding-left: 5px; }
.art-tuer .pz-t2, .art-tuer .pz-w2 { left: 210px; width: 210px; padding-left: 5px; }
.art-tuer .pz-t3, .art-tuer .pz-w3 { left: 420px; width: 160px; padding-left: 5px; }
.art-tuer .pz-t4, .art-tuer .pz-w4 { left: 580px; width: 120px; padding-left: 5px; }
.art-tuer .pz-l1 { left: 209px; } .art-tuer .pz-l2 { left: 420px; } .art-tuer .pz-l3 { left: 579px; } .art-tuer .pz-l4 { left: 699px; }
.art-tuer .pz-neu { left: 915px; } .art-tuer .pz-neu-text { left: 904px; top: 53px; width: 86px; }
.art-tuer .pz-ansehen { left: 984px; top: 1px; height: 53px; }
.art-tuer .pz-abschluss { left: 1092px; } .art-tuer .pz-abschluss-text { left: 1056px; top: 53px; }
.art-tuer .pz-kreis { left: 1216px; top: 25px; }
.art-tuer .ue-detail { left: 30px; top: 205px; width: 1306px; height: 550px; }
.art-tuer .ue-tag { left: 373px; top: 57px; width: 276px; } .art-tuer .ue-tag-leeren { left: 516px; top: 61px; }
.art-tuer .ue-detail-anzahl { width: 264px; }
.art-tuer .ue-detail-neu-text { left: 1146px; width: 96px; }
.art-tuer .ue-pruefungen { width: 1306px; height: 431px; }
.art-tuer .ue-detail.mit-link .ue-pruefungen { height: 379px; }
.art-tuer .dz-t0, .art-tuer .dz-w0 { left: 0; width: 140px; padding-left: 10px; }
.art-tuer .dz-t1, .art-tuer .dz-w1 { left: 140px; width: 223px; }
.art-tuer .dz-t2, .art-tuer .dz-w2 { left: 375px; width: 663px; }
.art-tuer .dz-tdatum, .art-tuer .dz-wdatum { left: 1038px; width: 122px; }
.art-tuer .dz-uhr { top: 68px; height: 32px; width: 135px; font-size: 16px; }
.art-tuer .az-nummer { left: 0; width: 162px; padding-left: 10px; }
.art-tuer .az-pdf { left: 162px; width: 388px; padding-left: 0; }
.art-tuer .az-zweite { left: 550px; width: 223px; padding-left: 0; }
.art-tuer .az-datum { left: 773px; width: 122px; padding-left: 0; }
.art-tuer .az-ampel { left: 932px; }

/* Türen-Dokumentation (Scr-Türen-Dokumentation-Übersicht). Projektliste so breit wie ihr
   Bereich, damit „Abschließen“ in der Zeile liegt (Power App: Galerie 1049 breit, Symbol außerhalb). */
.art-tuer_doku .ue-projektbereich { left: 30px; top: 205px; width: 1306px; height: 550px; }
.art-tuer_doku .ue-projekte { width: 1306px; height: 492px; }
.art-tuer_doku .pz-t1, .art-tuer_doku .pz-w1 { left: 0; width: 210px; padding-left: 5px; }
.art-tuer_doku .pz-t2, .art-tuer_doku .pz-w2 { left: 210px; width: 190px; padding-left: 5px; }
.art-tuer_doku .pz-t3 { left: 401px; width: 178px; padding-left: 5px; } .art-tuer_doku .pz-w3 { left: 400px; width: 180px; padding-left: 5px; }
.art-tuer_doku .pz-t4, .art-tuer_doku .pz-w4 { left: 580px; width: 119px; padding-left: 5px; }
.art-tuer_doku .pz-l1 { left: 209px; } .art-tuer_doku .pz-l2 { left: 400px; } .art-tuer_doku .pz-l3 { left: 579px; } .art-tuer_doku .pz-l4 { left: 699px; }
.art-tuer_doku .pz-neu { left: 749px; } .art-tuer_doku .pz-neu-text { left: 726px; top: 53px; width: 110px; }
.art-tuer_doku .pz-ansehen { left: 888px; }
.art-tuer_doku .pz-abschluss { left: 1092px; } .art-tuer_doku .pz-abschluss-text { left: 1056px; top: 53px; }
.art-tuer_doku .ue-detail-anzahl { width: 277px; }
.art-tuer_doku .ue-detail-neu-text { left: 1123px; width: 119px; }
.art-tuer_doku .dz-t0, .art-tuer_doku .dz-w0 { left: 0; width: 140px; padding-left: 10px; }
.art-tuer_doku .dz-t1, .art-tuer_doku .dz-w1 { left: 140px; width: 223px; }
.art-tuer_doku .dz-t2, .art-tuer_doku .dz-w2 { left: 375px; width: 663px; }
.art-tuer_doku .dz-tdatum, .art-tuer_doku .dz-wdatum { left: 1038px; width: 122px; }
.art-tuer_doku .dz-wdatum { height: 29px; }
.art-tuer_doku .dz-uhr { left: 1034px; top: 71px; height: 29px; }
.art-tuer_doku .az-nummer { left: 0; width: 162px; padding-left: 10px; }
.art-tuer_doku .az-pdf { left: 162px; width: 388px; padding-left: 0; }
.art-tuer_doku .az-zweite { left: 550px; width: 223px; padding-left: 0; }
.art-tuer_doku .az-datum { left: 773px; width: 122px; padding-left: 0; }

/* Klappen (Scr-Klappen-Übersicht) */
.art-klappe .pz-t1, .art-klappe .pz-w1 { left: 0; width: 220px; padding-left: 10px; }
.art-klappe .pz-t2, .art-klappe .pz-w2 { left: 220px; width: 160px; padding-left: 5px; }
.art-klappe .pz-t3, .art-klappe .pz-w3 { left: 381px; width: 170px; padding-left: 5px; }
.art-klappe .pz-t4, .art-klappe .pz-w4 { left: 551px; width: 130px; padding-left: 5px; }
.art-klappe .pz-l1 { left: 219px; } .art-klappe .pz-l2 { left: 380px; } .art-klappe .pz-l3 { left: 551px; } .art-klappe .pz-l4 { left: 681px; }
.art-klappe .pz-neu { left: 916px; } .art-klappe .pz-neu-text { left: 898px; top: 53px; width: 100px; }
.art-klappe .pz-ansehen { left: 998px; }
.art-klappe .pz-abschluss { left: 1107px; top: 0; } .art-klappe .pz-abschluss-text { left: 1071px; top: 52px; }
.art-klappe .pz-kreis { left: 1216px; top: 7px; }
.art-klappe .ue-detail { left: 30px; top: 212px; width: 1306px; height: 527px; }
.art-klappe .ue-detail-kopf { top: 2px; }
.art-klappe .ue-zurueck { left: 13px; top: 6px; height: 47px; }
.art-klappe .ue-detail-neu { top: 2px; }
.art-klappe .ue-detail-neu-text { left: 1137px; top: 6px; width: 104px; height: 47px; }
.art-klappe .ue-detail-anzahl { width: 264px; }
.art-klappe .ue-tag { left: 373px; top: 57px; width: 276px; } .art-klappe .ue-tag-leeren { left: 516px; top: 61px; }
.art-klappe .ue-pruefungen { top: 121px; width: 1306px; height: 406px; }
.art-klappe .ue-link { top: 121px; }
.art-klappe .knopf-modern.ue-aufheben { top: 6px; right: 13px; height: 47px; } /* gespiegelt zu ButtonCanvas2 der Klappen */
.art-klappe .ue-detail.mit-link .ue-pruefungen { top: 173px; height: 354px; }
.art-klappe .abs-naechste { left: 32px; width: 390px; } /* Dropdown_Terminerinnerung_Klappenprüfung: X 207, Breite 390 (Abgleich M5) */
.art-klappe .dz-t0 { left: 0; width: 120px; padding-left: 10px; } .art-klappe .dz-w0 { left: 0; width: 298px; padding-left: 10px; }
.art-klappe .dz-t1, .art-klappe .dz-w1 { left: 375px; width: 663px; }
.art-klappe .dz-tdatum, .art-klappe .dz-wdatum { left: 1038px; width: 122px; }
.art-klappe .dz-wdatum { height: 26px; }
.art-klappe .dz-uhr { top: 68px; height: 32px; width: 135px; font-size: 16px; }
.art-klappe .az-nummer { left: 0; width: 278px; }
.art-klappe .az-pdf { left: 278px; width: 509px; }
.art-klappe .az-datum { left: 790px; width: 122px; }
.art-klappe .az-ampel { left: 912px; }

/* Schott-Prüfung (Scr-Schotte-Prüfung-Übersicht) */
.art-schott .pz-t1, .art-schott .pz-w1 { left: 0; width: 160px; padding-left: 10px; }
.art-schott .pz-t2, .art-schott .pz-w2 { left: 160px; width: 180px; padding-left: 5px; }
.art-schott .pz-t3, .art-schott .pz-w3 { left: 340px; width: 180px; padding-left: 5px; }
.art-schott .pz-t4, .art-schott .pz-w4 { left: 520px; width: 140px; padding-left: 5px; }
.art-schott .pz-l1 { left: 159px; } .art-schott .pz-l2 { left: 339px; } .art-schott .pz-l3 { left: 519px; } .art-schott .pz-l4 { left: 661px; }
.art-schott .pz-neu { left: 939px; } .art-schott .pz-neu-text { left: 921px; top: 53px; width: 100px; }
.art-schott .pz-ansehen { left: 1034px; }
.art-schott .pz-abschluss { left: 1156px; } .art-schott .pz-abschluss-text { left: 1120px; top: 53px; }
.art-schott .pz-kreis { left: 1265px; top: 7px; }
.art-schott .ue-detail-anzahl { width: 264px; }
.art-schott .ue-detail-neu-text { left: 1156px; top: 6px; width: 86px; height: 47px; }
.art-schott .ue-pruefungen { height: 453px; } /* GallerySchotte: 453 hoch (Abgleich N8) */
.art-schott .ue-detail.mit-link .ue-pruefungen { height: 401px; }
.art-schott .dz-t0, .art-schott .dz-w0 { left: 0; width: 218px; padding-left: 10px; }
.art-schott .dz-t1, .art-schott .dz-w1 { left: 375px; width: 663px; }
.art-schott .dz-tdatum { left: 1038px; width: 122px; }
.art-schott .dz-wdatum { left: 1038px; top: 32px; width: 122px; height: 35px; }
.art-schott .dz-uhr { left: 1034px; top: 67px; }
.art-schott .dz-knopf { width: 1326px; }
.art-schott .az-nummer { left: 0; width: 222px; }
.art-schott .az-pdf { left: 244px; width: 544px; }
.art-schott .az-datum { left: 790px; width: 122px; }
.art-schott .az-ampel { left: 912px; }

/* Schott-Dokumentation (Scr-Schotte-Dokumentation-Übersicht). Projektliste so breit wie ihr
   Bereich, damit „Abschließen“ in der Zeile liegt (Power App: Galerie 1136 breit). */
.art-schott_doku .ue-projektbereich { left: 30px; top: 212px; width: 1306px; height: 527px; }
.art-schott_doku .ue-projekte { width: 1306px; height: 469px; }
.art-schott_doku .pz-t1, .art-schott_doku .pz-w1 { left: 0; width: 160px; padding-left: 10px; }
.art-schott_doku .pz-t2, .art-schott_doku .pz-w2 { left: 160px; width: 180px; padding-left: 5px; }
.art-schott_doku .pz-t3, .art-schott_doku .pz-w3 { left: 340px; width: 220px; padding-left: 5px; }
.art-schott_doku .pz-t4, .art-schott_doku .pz-w4 { left: 561px; width: 200px; padding-left: 5px; }
.art-schott_doku .pz-l1 { left: 159px; } .art-schott_doku .pz-l2 { left: 339px; } .art-schott_doku .pz-l3 { left: 560px; } .art-schott_doku .pz-l4 { left: 760px; }
.art-schott_doku .pz-neu { left: 817px; top: 0; } .art-schott_doku .pz-neu-text { left: 799px; top: 52px; width: 100px; }
.art-schott_doku .pz-ansehen { left: 961px; }
.art-schott_doku .pz-abschluss { left: 1063px; top: 0; } .art-schott_doku .pz-abschluss-text { left: 1027px; top: 52px; }
.art-schott_doku .ue-detail-neu-text { left: 1122px; top: 6px; width: 120px; height: 47px; }
.art-schott_doku .dz-t0, .art-schott_doku .dz-w0 { left: 0; width: 218px; padding-left: 10px; }
.art-schott_doku .dz-t1, .art-schott_doku .dz-w1 { left: 375px; width: 663px; }
.art-schott_doku .dz-tdatum { left: 1038px; width: 122px; }
.art-schott_doku .dz-wdatum { left: 1038px; top: 34px; width: 122px; height: 31px; }
.art-schott_doku .az-nummer { left: 0; width: 120px; }
.art-schott_doku .az-pdf { left: 120px; width: 670px; }
.art-schott_doku .az-datum { left: 790px; width: 122px; }

/* ------------------------------------------------------------ PDF in der App (Vertrag 7.2a, T-016) */
/* Eigener Screen über der Übersicht; die Kopfleiste der Seite bleibt darüber (z-index 4).
   Titelleiste wie in den Eingabe-Screens: Zurück-Pfeil X 22, Y 113 (Icon3_105), Titel ab X 104
   (TextCanvas1_54) – hier der Dateiname, deshalb 40 px statt 60 px und höchstens zwei Zeilen –,
   rechts Minus, „Breite“, Plus (Plus an der Stelle der Diskette, X 1275). */
.pdf-ansicht { position: absolute; left: 0; top: 0; width: 1366px; height: 768px; background: #fff; z-index: 3; }
.pdf-zurueck { left: 22px; top: 18px; }
.pdf-titel { position: absolute; left: 104px; top: 0; width: 967px; height: 100px; padding-left: 10px; display: flex; align-items: center; color: var(--text); font: 700 40px/1.2 var(--segoe); }
.pdf-titel span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.pdf-kleiner { left: 1081px; top: 18px; }
.knopf-modern.pdf-breite { position: absolute; left: 1155px; top: 25px; width: 110px; height: 51px; font-size: 21px; border-radius: 10px; }
.pdf-groesser { left: 1275px; top: 18px; }
/* Seiten untereinander, Rand und Abstand 20 px; beim Zoomen auch waagrecht scrollbar. */
.pdf-seiten { position: absolute; left: 0; top: 195px; width: 1366px; height: 573px; padding: 20px; overflow: auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pdf-seite { margin: 0 auto 20px; background: #fff; box-shadow: var(--schatten); }
.pdf-seite canvas { display: block; width: 100%; height: 100%; }
/* Laden: Punkte wandern oben über den Bereich (wie die Ladeanzeige der Power App), ohne Text. */
.pdf-laden { position: absolute; left: 0; top: 195px; width: 1366px; height: 8px; overflow: hidden; pointer-events: none; }
.pdf-laden::before { content: ""; position: absolute; top: 2px; left: 0; width: 6px; height: 6px; border-radius: 3px; background: var(--dunkel); box-shadow: 14px 0 var(--dunkel), 28px 0 var(--dunkel); animation: pdf-laden 1.6s linear infinite; }
@keyframes pdf-laden { from { transform: translateX(-40px); } to { transform: translateX(1366px); } }
/* Ein Satz statt einer leeren Fläche (ohne Internet, abgelaufen, nicht lesbar). */
.pdf-meldung { position: absolute; left: 0; top: 195px; width: 1366px; height: 573px; padding: 0 80px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text); font: 400 21px/1.33 var(--segoe); }

/* ------------------------------------------------------------ Bedienelemente der Power App */
/* Moderne Textfelder (TextInput@0.0.54, Darstellung „FilledDarker“): 1 px Rand und 12 px Innenabstand,
   Text und Platzhalter also 13 px vom Rand; mehrzeilig 9 px von oben (Abgleich M2, M3). */
.eingabe-modern {
  position: absolute; padding: 0 12px; border: 1px solid transparent; border-radius: 4px;
  background: var(--gefuellt); color: var(--text); font-family: var(--segoe); font-weight: 400; line-height: 1.3;
  outline: none; -webkit-appearance: none; appearance: none;
}
textarea.eingabe-modern { padding: 8px 12px; resize: none; }
/* Fokus als Unterstrich ohne Verschieben des Texts; gesperrte Felder (DisplayMode.View) ohne. */
.eingabe-modern:focus { box-shadow: inset 0 -2px 0 var(--marke); }
.eingabe-modern[readonly]:focus { box-shadow: none; }
.eingabe-modern::placeholder { color: #707070; }
.eingabe-modern:disabled, .eingabe-modern[readonly] { color: var(--text); -webkit-text-fill-color: var(--text); opacity: 1; }
/* Klassische Textfelder (Classic/TextInput) */
.eingabe-klassisch {
  position: absolute; padding: 0 12px; border: 1px solid var(--nachtblau); border-radius: 5px; background: #fff; color: #000;
  font-family: var(--opensans); outline: none; -webkit-appearance: none; appearance: none;
}
.eingabe-klassisch::placeholder { color: #767676; }

/* Klassische Auswahlliste (Classic/DropDown): weißes Feld, Pfeil im farbigen Kasten. */
.dd { position: absolute; display: block; padding: 0; border: 0; background: #fff; color: #000; text-align: left; cursor: pointer; font-family: var(--opensans); overflow: hidden; }
.dd-text { position: absolute; left: 0; top: 0; bottom: 0; right: 0; padding: 0 10px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-pfeil { position: absolute; top: 0; right: 0; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: center; background: var(--blau); color: #fff; }
.dd-pfeil svg { width: 16px; height: 16px; }
.dd.rand { border: 2px solid var(--nachtblau); }
.dd.rand .dd-pfeil { top: -2px; bottom: -2px; right: -2px; }
.dd.modern { background: var(--gefuellt); border-radius: 4px; font-family: var(--segoe); }
.dd.modern .dd-pfeil { background: transparent; color: #424242; }
/* Geöffnete Liste */
.liste-auf { position: absolute; z-index: 30; max-height: 360px; overflow-y: auto; background: #fff; border: 1px solid #c8c8c8; box-shadow: var(--schatten); scrollbar-width: thin; }
.liste-auf button { display: block; width: 100%; padding: 10px; border: 0; background: #fff; color: #000; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 40px; }
.liste-auf button.gewaehlt { background: var(--blau); color: #fff; }
@media (hover: hover) { .liste-auf button:not(.gewaehlt):hover { background: var(--hellblau); } }

/* Klassische Datumsauswahl (Classic/DatePicker 2.6): Feld mit Kalender-Kasten rechts. */
.datum { position: absolute; display: block; padding: 0; border: 1px solid var(--nachtblau); background: #fff; color: #000; text-align: left; cursor: pointer; font-family: var(--opensans); overflow: hidden; }
.datum.rand2 { border-width: 2px; }
.datum-text { position: absolute; left: 0; top: 0; bottom: 0; right: 40px; padding: 0 5px 0 12px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.datum-text.leer { color: #767676; }
.datum-symbol { position: absolute; top: 0; right: 0; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: center; background: var(--blau); color: #fff; }
.datum-symbol svg { width: 20px; height: 20px; } /* Kalender im Datumsfeld, so groß wie in der Power App (Abgleich M1) */
.datum.modern { background: var(--gefuellt); border: 0; border-radius: 4px; font-family: var(--segoe); }
.datum.modern .datum-symbol { background: transparent; color: #424242; }
/* Kalender des Geräts (Entscheidung Julius 12.11., Vertrag 3.3): über allem in Bildschirm-
   punkten, nicht mit der Fläche skaliert; Tippflächen 48 px, ruhig in Farben und Schrift der App. */
.kal-schleier { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(0, 0, 0, 0.35); touch-action: manipulation; }
.kal { width: 360px; max-width: 100%; padding: 10px 12px 8px; background: #fff; border-radius: 8px; box-shadow: 0 25.6px 57.6px rgba(0, 0, 0, 0.22), 0 4.8px 14.4px rgba(0, 0, 0, 0.18); font: 400 17px/1.2 var(--segoe); color: var(--text); -webkit-user-select: none; user-select: none; }
.kal button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.kal button:focus-visible { outline: 2px solid var(--marke); outline-offset: 1px; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.kal-pfeil { width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; }
.kal-pfeil svg { width: 22px; height: 22px; }
.kal .kal-titel { height: 48px; padding: 0 14px; border-radius: 6px; font-size: 19px; font-weight: 600; }
.kal-wochentage { display: grid; grid-template-columns: repeat(7, 48px); justify-content: center; height: 30px; align-items: center; text-align: center; font-size: 14px; color: #616161; }
.kal-raster { display: grid; justify-content: center; }
.kal-raster.tage { grid-template-columns: repeat(7, 48px); grid-auto-rows: 48px; }
.kal-raster.monate, .kal-raster.jahre { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 64px; gap: 8px; padding: 8px 0 12px; }
.kal-tag { width: 48px; height: 48px; border-radius: 24px; }
.kal-feld { border-radius: 8px; }
.kal .draussen { color: #a19f9d; }
.kal .heute { box-shadow: inset 0 0 0 2px var(--marke); font-weight: 700; }
.kal .gewaehlt { background: var(--marke); color: #fff; font-weight: 700; }
.kal-fuss { display: flex; justify-content: flex-end; padding-top: 4px; }
.kal .kal-heute { min-height: 44px; padding: 0 16px; border-radius: 6px; color: var(--marke); font-weight: 600; }
.kal button:active { background: #e6e6e6; }
.kal .gewaehlt:active { background: #0c5a9e; }
@media (hover: hover) { .kal button:not(.gewaehlt):hover { background: #f3f2f1; } }

/* Optionsfelder (Classic/Radio) */
.optionen { position: absolute; display: flex; flex-wrap: wrap; align-content: center; gap: 0 22px; padding: 10px 0; font-family: var(--opensans); color: #000; }
.optionen.senkrecht { flex-direction: column; flex-wrap: nowrap; align-content: flex-start; gap: 0; } /* Layout.Vertical: Zeilen so hoch wie RadioSize */
.option { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.option-kreis { flex: none; width: var(--radio, 20px); height: var(--radio, 20px); border: 1px solid var(--nachtblau); border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; } /* RadioSize */
.option.gewaehlt .option-kreis::after { content: ""; width: 50%; height: 50%; border-radius: 50%; background: #000; }

/* Häkchen: klassisch (Classic/CheckBox) und modern (CheckboxCanvas) */
.haken { position: absolute; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; color: #000; font-family: var(--opensans); }
.haken-kasten { flex: none; width: var(--haken, 24px); height: var(--haken, 24px); border: 2px solid var(--nachtblau); background: #fff; display: flex; align-items: center; justify-content: center; color: #000; }
.haken-kasten svg { width: 80%; height: 80%; visibility: hidden; }
.haken.an .haken-kasten svg { visibility: visible; }
.haken.modern { font-family: var(--segoe); font-weight: 600; color: var(--text); }
.haken.modern .haken-kasten { border: 1px solid #616161; border-radius: 4px; }
.haken.modern.an .haken-kasten { background: var(--marke); border-color: var(--marke); color: #fff; }
/* Gesperrt (DisplayMode.Disabled, z. B. Türart, wenn schon eine gewählt ist): grau wie Fluent. */
.haken:disabled { cursor: default; opacity: 0.4; } /* auch gegen die Textfarbe aus der Beschreibung (Inline-Stil) */

/* Foto (AddMedia + Image) */
.foto { position: absolute; display: block; padding: 0; border: 0; background: #fff; color: #000; cursor: pointer; overflow: hidden; }
.foto-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 33.33px/1.2 var(--opensans); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.foto.fuellen img { object-fit: cover; } /* ImagePosition.Fill */
.foto input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Unterschrift (PenInput): Zeichnen mit Finger und Stift, nie scrollen (Vertrag 7.7). */
.unterschrift { position: absolute; border: 2px solid var(--nachtblau); background: transparent; touch-action: none; overflow: hidden; }
.unterschrift canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* Moderne Knöpfe (Button@0.0.45) */
.knopf-modern {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 4px; background: var(--marke); color: #fff;
  font: 600 14px/1.36 var(--segoe); cursor: pointer; text-align: center; /* Zeilenabstand wie Button@0.0.45 (30 px → 41 px, Abgleich M4) */
}
.knopf-modern svg { width: 20px; height: 20px; flex: none; }
.knopf-modern.dunkel { background: var(--dunkel); color: #fff; } /* BasePaletteColor RGBA(74, 74, 74, 1) */
.knopf-modern.sekundaer { background: #fff; color: var(--text); border-color: #d1d1d1; }
.knopf-modern:active { filter: brightness(0.85); }
.knopf-modern:disabled { background: #f0f0f0 !important; color: #bdbdbd !important; border-color: #e0e0e0; cursor: default; filter: none; } /* gegen Farben aus der Beschreibung (Inline-Stil) */

/* Pflichtfeld leer nach dem ersten Prüfen, nur bei Beschreibungen ohne `fehler` (sonst setzt
   s-erfassen.js Rand oder Farbe aus `fehler`). Als Umrandung, damit der Rand aus der
   Beschreibung (Inline-Stil) sie nicht überdeckt. */
.el.fehlt { outline: 2px solid #ff0000; outline-offset: -2px; }
.optionen.fehlt, .haken.fehlt { color: #ff0000; outline: none; }

/* Elemente der Beschreibungen (Eingabe-Ansichten) */
.ansicht { position: absolute; left: 0; top: 0; width: 1366px; height: 768px; overflow: hidden; }
.el { position: absolute; overflow: hidden; }
.el-text { display: flex; flex-direction: column; justify-content: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; }
.el-text.ohne-umbruch { white-space: pre; }
.el-bild img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ Rückfragen (cont-Header-Navigation, cont-Wirklich speichern) */
.frage-kasten { position: absolute; left: 283px; top: 234px; width: 800px; height: 300px; background: #fff; border-radius: 20px; box-shadow: var(--schatten); overflow: hidden; } /* Container4_… */
.frage-titel { position: absolute; left: 0; top: 0; width: 800px; height: 70px; padding: 0 10px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--dunkel); color: #fff; font: 700 30px/1.33 var(--segoe); }
.frage-text { position: absolute; left: 0; top: 70px; width: 800px; height: 98px; padding: 0 20px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text); font: 400 21px/1.33 var(--segoe); }
.frage-knopf { position: absolute; top: 235px; width: 160px; height: 40px; }
.knopf-modern.frage-knopf, .knopf-modern.abs-knopf, .knopf-modern.ue-zurueck { font-size: 21px; } /* FontSize 21 */
.knopf-modern.ue-zurueck { border-radius: 10px; } /* ButtonCanvas2_…: Radius 10 (sonst gewinnt .knopf-modern mit 4 px, Abgleich N1) */
.frage-nein { left: 400px; }
.frage-ja { left: 600px; }
.frage-hinweis { position: absolute; left: 600px; top: 182px; width: 186px; height: 53px; padding: 5px; display: flex; align-items: center; color: #ffbf00; font: 700 17.33px/1.2 var(--opensans); } /* Label14_…: „Offline: wird später übertragen.“ */
.link-kasten { height: 340px; top: 214px; }
.link-text { position: absolute; left: 40px; top: 96px; width: 720px; height: 110px; padding: 10px 14px; border: 1px solid #d1d1d1; border-radius: 4px; background: var(--gefuellt); color: var(--text); font: 400 22px/1.4 var(--segoe); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; -webkit-touch-callout: default; resize: none; }
.link-kasten .frage-knopf { top: 260px; }
.link-kopieren { left: 40px; } .link-teilen { left: 220px; } .link-schliessen { left: 600px; }
.link-gesperrt { top: 96px; height: 140px; } /* ohne Link (Vertrag A-16): der Satz an der Stelle des Links */

/* ------------------------------------------------------------ Meldungen (Notify) und Hinweise außerhalb der Fläche */
.meldungen { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 100; display: flex; flex-direction: column; gap: 8px; padding: 8px; pointer-events: none; }
.meldung { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 4px; box-shadow: var(--schatten); font: 400 16px/1.35 var(--segoe); background: #fde7e9; color: #a4262c; }
.meldung svg { flex: none; width: 20px; height: 20px; }
.meldung-text { flex: 1; }
.meldung-zu { flex: none; width: 32px; height: 32px; border: 0; background: transparent; color: inherit; padding: 6px; cursor: pointer; }
.meldung-zu svg { width: 20px; height: 20px; }
.meldung.warnung { background: #fff4ce; color: #835b00; }
.meldung.erfolg { background: #dff6dd; color: #0e700e; }
.meldung.info { background: #f3f2f1; color: #323130; }

.schleier-geraet { position: fixed; inset: 0; z-index: 90; background: #fff; overflow: auto; font-family: var(--segoe); color: var(--text); }
.install { max-width: 640px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 40px) 24px 40px; }
.install img { width: 96px; height: 96px; border-radius: 22px; }
.install h1 { font-size: 28px; margin: 20px 0 8px; }
.install p { font-size: 18px; line-height: 1.45; }
.install ol { list-style: none; padding: 0; margin: 24px 0 0; }
.install li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid #e0e0e0; font-size: 19px; }
.install li svg { flex: none; width: 44px; height: 44px; color: #0a84ff; }
.install .schritt { flex: none; width: 32px; height: 32px; border-radius: 16px; background: var(--dunkel); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* ------------------------------------------------------------ Diagnose und Offline-Hinweis (schlicht, ohne Fläche) */
.seite-diagnose, .seite-offline { overflow: auto; background: #f5f5f5; position: static; height: auto; min-height: 100%; } /* wächst mit dem Inhalt, sonst schwarz unter der ersten Bildschirmhöhe */
.d-kopf { position: sticky; top: 0; display: flex; align-items: center; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px; background: var(--dunkel); color: #fff; }
.d-kopf h1 { margin: 0; font: 700 24px/1.2 var(--opensans); }
.d-zurueck { color: #fff; text-decoration: none; font-size: 18px; min-height: 44px; display: flex; align-items: center; }
.d-inhalt { max-width: 1100px; margin: 0 auto; padding: 16px 20px 60px; font: 400 16px/1.45 var(--segoe); color: var(--text); }
.d-inhalt section { background: #fff; border-radius: 8px; box-shadow: var(--schatten); padding: 16px 20px; margin-bottom: 16px; }
.d-inhalt h2 { margin: 0 0 10px; font: 600 20px/1.3 var(--segoe); }
.d-liste { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 0 0 10px; }
.d-liste dt { color: #616161; }
.d-liste dd { margin: 0; overflow-wrap: anywhere; }
.d-knopf { min-height: 44px; padding: 0 18px; margin: 6px 8px 0 0; border: 0; border-radius: 4px; background: var(--dunkel); color: #fff; font: 600 16px var(--segoe); cursor: pointer; }
.d-knopf:disabled { opacity: 0.5; }
.d-meldung { min-height: 1.4em; margin: 10px 0 0; }
.d-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.d-tabelle th, .d-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
.d-gut { color: #0e700e; } .d-schlecht { color: #a4262c; } .d-warten { color: #835b00; }
.d-tabelle .d-erneut { margin: 0; white-space: nowrap; }