/* ============================================================================
   CHAT-228-KP-DESIGN - die EINE gemeinsame KP-Gestaltung der Oberflaeche.

   Verbindliche Referenz: die vom PO am 19.10.2026 freigegebenen Entwuerfe
   ("Mobil – persoenlicher Kalender" und "Auftragsakte"). Uebernommen werden Palette,
   Proportionen und Bausteine - KEINE Vorschau-IDs, keine Musterinhalte, keine Fremdbibliothek.

     Kopf #1a1a1e | Tagesleiste #292929 | Akzent #ffd266 | Seitenflaeche #f2f2f1/#f1f1f0
     Karten weiss | Kalendercontrols #e4e4e3 | Schrift dunkel (#202020/#525252)

   Jede Seite bindet diese Datei NACH ihrem eigenen Stilblock ein; gleich spezifische Regeln
   gewinnen dadurch, klassengebundene Fach- und Statusfarben der Seiten (gut, gefahr,
   abweichung, Statusmarken) bleiben bewusst erhalten. Reine Darstellung - kein Verhalten.
   ============================================================================ */
:root {
  --kp-kopf: #1a1a1e;
  --kp-tagesleiste: #292929;
  --kp-akzent: #ffd266;
  --kp-akzent-rand: #d6a22d;
  --kp-akzent-text: #24211b;
  --kp-flaeche: #f2f2f1;
  --kp-karte: #fff;
  --kp-control: #e4e4e3;
  --kp-control-rand: #b9b9b9;
  --kp-text: #202020;
  --kp-text-leise: #525252;
  --kp-linie: #d2d2d2;
  --kp-aktiv: #303030;
}

html { scroll-padding-top: 3.5rem; }
body { background: var(--kp-flaeche); color: var(--kp-text); font-family: Arial, Helvetica, sans-serif; }

/* ---- Seitentitelzone: hell unter dem dunklen Kopf - nie mehr ein blauer Standardkopf ---- */
body > header:not(.kp-markenkopf) { background: var(--kp-flaeche); color: var(--kp-text); border-bottom: 1px solid #d9d9d8; }
body > header:not(.kp-markenkopf) h1 { color: var(--kp-text); }
body > header:not(.kp-markenkopf) a { color: var(--kp-akzent-text); }
body > header:not(.kp-markenkopf) .kopfbenutzer { color: #3d3d3d; }
body > header:not(.kp-markenkopf) .kopfbenutzer strong { color: var(--kp-text); }
body > header:not(.kp-markenkopf) .kopfbenutzer button { color: var(--kp-text); border-color: #777; }
body > header :focus-visible { outline-color: var(--kp-kopf); }

/* ---- Markenkopf der Seiten ohne Sitzung (Anmeldung, Passwort festlegen) ---- */
header.kp-markenkopf { background: var(--kp-kopf); color: #fff; display: flex; align-items: center; gap: 12px 17px; flex-wrap: wrap; padding: 12px 20px; }
header.kp-markenkopf h1 { color: #fff; }
.kp-logo { display: block; width: 108px; height: auto; flex: none; }
.kp-beta { display: block; font-size: 11px; letter-spacing: 1px; color: var(--kp-akzent); margin-top: 4px; font-weight: 400; }

/* ---- Knoepfe: Hauptaktion warmes Gelb, Nebenaktion hell mit grauem Rand ---- */
button, .knopf, .knopflink { background: var(--kp-akzent); color: var(--kp-akzent-text); border-color: var(--kp-akzent-rand); }
button.sekundaer, .knopf.sekundaer { background: #fff; color: #222; border: 1px solid #bcbcbc; }
/* CHAT-228-MONTAGE-P1: keine braunen oder gruenen Sonderknoepfe - Anthrazit/Weiss/KP-Gelb.
   Eine bewusste Abweichung ("stimmt nicht", "nicht moeglich") ist anthrazit, eine Bestaetigung gelb. */
button.abweichung, .knopf.abweichung { background: var(--kp-kopf); color: #fff; border: 1px solid var(--kp-kopf); }
button.gut, .knopf.gut { background: var(--kp-akzent); color: var(--kp-akzent-text); border-color: var(--kp-akzent-rand); }
button:focus-visible, .knopf:focus-visible, .knopflink:focus-visible { outline: 3px solid var(--kp-kopf); outline-offset: 2px; }
h2, h3 { color: var(--kp-text); }
.badge { background: #ececeb; color: #242424; }

/* =============================================================================================
   B - DIE KALENDERSTEUERUNG (persoenlicher Kalender, Montageplan, Dispo-Wochenuebersicht)
   Zeile 1 Monat + Jahr | Zeile 2 vorige Woche / KW mit Jahr / naechste Woche | darunter der
   Datumsbereich und "Zur aktuellen Woche". Gleiche Hoehe, Farbe, Rundung, Schrift.
   ============================================================================================= */
.kp-kalender { max-width: 32rem; margin: 0 0 1rem; }
.kp-kal-monat .kp-monatssprung { display: grid; grid-template-columns: 1.4fr 1fr; gap: 9px; margin-bottom: 9px; }
.kp-kal-woche { display: grid; grid-template-columns: 50px minmax(0, 1fr) 50px; gap: 9px; }
.kp-kalender select, .kp-kal-woche button, .kp-kal-woche .kp-kal-kw {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; min-height: 46px; margin: 0;
  border: 1px solid var(--kp-control-rand); border-radius: 8px; background-color: var(--kp-control); color: #222;
  font: 600 16px Arial, Helvetica, sans-serif; line-height: 1.2; padding: 10px; text-align: center;
}
.kp-kalender select {
  text-align: left; text-align-last: center; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #222 50%), linear-gradient(135deg, #222 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.kp-kal-woche button { cursor: pointer; font-size: 22px; padding: 0; }
.kp-kal-woche .kp-kal-kw { display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
.kp-kalender select:focus-visible, .kp-kal-woche button:focus-visible, .kp-kal-heute:focus-visible { outline: 3px solid var(--kp-kopf); outline-offset: 2px; }
.kp-kal-zeitraum { text-align: center; font-size: 13px; color: #545454; margin: 9px 0 4px; }
button.kp-kal-heute {
  display: block; width: auto; min-height: 44px; margin: 0 auto; padding: 0 12px; background: none; border: 0;
  color: #444; font: 400 13px Arial, Helvetica, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
/* Nur die Wochenzeile (Belegungspanel, Blockraster): dieselbe Kontrolloptik ohne Monatszeile. */
.kp-kal-woche.kp-kal-einzeln { max-width: 32rem; margin-bottom: .5rem; }

/* ---- Die Tagesleiste: eigenstaendig, dunkel, gelber Akzent, Wochentag gross und fett ---- */
.kp-tag { background: var(--kp-tagesleiste); color: #fff; border-left: 5px solid var(--kp-akzent); border-radius: 8px;
  padding: 13px 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 12px; }
.kp-tag .kp-tag-name { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #fff; line-height: 1.15; }
.kp-tag .kp-tag-datum { font-size: 15px; color: #eee; white-space: nowrap; font-weight: 400; }
.kp-tag .kp-tag-heute { display: block; font-size: 12px; letter-spacing: 1px; color: var(--kp-akzent); font-weight: 700; margin-top: 2px; text-transform: uppercase; }

/* =============================================================================================
   E - AUFTRAGSIDENTITAET: Karte mit gelbem Akzent am Arbeitsbereich + kompakte angeheftete Leiste
   ============================================================================================= */
.kp-identitaet { background: var(--kp-karte); border: 1px solid var(--kp-linie); border-top: 5px solid var(--kp-akzent);
  border-radius: 9px; padding: 20px; margin: 0 0 14px; display: flex; justify-content: space-between; gap: 18px;
  align-items: flex-start; flex-wrap: wrap; color: var(--kp-text); }
.kp-identitaet-text { min-width: 0; flex: 1 1 18rem; }
.kp-identitaet-art { font-size: 13px; color: #565656; margin: 0 0 7px; font-weight: 400; }
.kp-identitaet-name { font-size: 29px; margin: 0 0 8px; color: var(--kp-text); line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.kp-identitaet-nummer { font-size: 19px; font-weight: 700; margin: 0 0 9px; color: var(--kp-text); overflow-wrap: anywhere; }
/* Laden / kein Leserecht / Lesefehler: sichtbar als Zustand, nicht als Kundenname. */
.kp-identitaet-name.kp-identitaet-offen { font-size: 18px; font-weight: 400; color: var(--kp-text-leise); }
.kp-identitaet-meta { font-size: 14px; color: var(--kp-text-leise); line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.kp-identitaet-leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: var(--kp-karte);
  border-bottom: 1px solid var(--kp-linie); box-shadow: 0 2px 8px rgba(0,0,0,.12); border-left: 5px solid var(--kp-akzent);
  padding: 8px 14px; font: 700 15px/1.3 Arial, Helvetica, sans-serif; color: var(--kp-text);
  display: flex; align-items: baseline; gap: .5rem; white-space: nowrap; overflow: hidden; }
.kp-identitaet-leiste[hidden] { display: none; }
/* Nur der Name wird gekuerzt - die AUF-Nummer bleibt bei jeder Breite vollstaendig sichtbar. */
.kp-identitaet-leiste .kp-leiste-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kp-identitaet-leiste .kp-leiste-nummer { flex: 0 0 auto; font-weight: 400; color: var(--kp-text-leise); }
/* Nachzug P-1: Die Leiste liegt NIE ueber einem angehefteten Element. Nur solange sie sichtbar ist
   (Klasse + gemessene Hoehe von auftragsidentitaet.js), ruecken die bestehenden sticky Elemente um
   die Leistenhoehe nach unten und behalten ihren bisherigen Abstand: Montage-Schrittkopf (sticky
   unter 700 px, bisher top 0) und Bereichsnavigation der Akte (sticky ab 651 px, bisher .75rem).
   Ausserhalb ihrer sticky-Breiten wirkt "top" auf diese Elemente nicht. Kein z-index-Eingriff. */
html.kp-leiste-sichtbar .schrittkopf { top: var(--kp-leiste-hoehe, 0px); }
html.kp-leiste-sichtbar nav.bereiche { top: calc(var(--kp-leiste-hoehe, 0px) + 0.75rem); }

/* =============================================================================================
   D - BEARBEITUNGSWEGE am Auftragskopf
   ============================================================================================= */
.kp-bearbeiten { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 1 auto; }
.kp-bearbeiten-knopf { border: 1px solid var(--kp-akzent-rand); border-radius: 7px; padding: 13px 17px; font-size: 15px;
  font-weight: 700; color: var(--kp-akzent-text); background: var(--kp-akzent); display: inline-flex; align-items: center;
  gap: 9px; min-height: 46px; text-decoration: none; cursor: pointer; width: auto; margin: 0; }
.kp-bearbeiten-knopf:focus-visible { outline: 3px solid var(--kp-kopf); outline-offset: 2px; }
.kp-bearbeiten-knopf .kp-pfeil { font-size: 12px; }
.kp-bearbeiten-ziel { font-size: 13px; color: #565656; }
.kp-nurlesen { font-size: 14px; color: #3d3d3d; background: #f1f1f0; border: 1px solid var(--kp-linie); border-radius: 7px;
  padding: 10px 12px; max-width: 22rem; }
.kp-wege { padding: 14px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kp-wege[hidden] { display: none; }
.kp-wege-titel { font-size: 13px; color: #565656; margin-right: 3px; }
.kp-wege a { background: #fff; border: 1px solid #bcbcbc; border-radius: 7px; padding: 11px 12px; display: inline-flex;
  align-items: center; gap: 7px; min-height: 44px; font-size: 14px; color: #222; text-decoration: none; }
.kp-wege a:hover { background: #f1f1f0; }
.kp-wege a:focus-visible { outline: 3px solid var(--kp-kopf); outline-offset: 2px; }

@media (max-width: 650px) {
  .kp-identitaet { padding: 16px; }
  .kp-identitaet-name { font-size: 24px; }
  .kp-bearbeiten { align-items: stretch; width: 100%; }
  .kp-bearbeiten-knopf { justify-content: center; }
  header.kp-markenkopf { padding: 12px; gap: 10px; }
  header.kp-markenkopf .kp-logo { width: 100px; }
}
@media (max-width: 350px) {
  header.kp-markenkopf .kp-logo { width: 84px; }
}

/* ---- Montage: "Meine Woche" als Seitenueberschrift der Referenz; offene Abschnitte neutral ---- */
#abschnittMeineWoche > summary { font-size: 24px; color: var(--kp-text); }
/* FORTSETZUNG (Soll-Ist mobil): wie die Referenz liegt "Meine Woche" mobil direkt auf der
   Seitenflaeche - keine doppelt verschachtelten Rahmen, Karten nutzen die volle Breite. */
@media (max-width: 650px) {
  #bereichArbeitsvorrat.card { background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
  #abschnittMeineWoche { border: 0; background: transparent; margin: 0.4rem 0; }
  #abschnittMeineWoche > summary { padding-left: 0; padding-right: 0; }
  #abschnittMeineWoche > .abschnittsinhalt { border-top: 0; padding: 0; }
  /* Nachzug H-2 (PO 20.10.2026): der mobile Einstieg wie die Referenz - unter Logo/BETA/Menü/Suche
     direkt "Meine Woche". Die Titelzone (Montage / Monteur / Zur Startseite) entfaellt NUR in der
     Einsatzliste und NUR, wenn die globale Kopfzone da ist: Startseite steht im Menü, Name und
     Rollen in den Einstellungen. Namensmaske, geführte Montage und der Rückfallweg ohne Anmeldung
     behalten die Titelzone. Abschnittstitel und Berechtigungshinweis bleiben vollständig erhalten,
     stehen aber hinter dem Kalender - direkt über der Einsatzliste, zu der sie gehören. */
  body:has(#bereichArbeitsvorrat:not(.hidden)):has(#bereichDetail.hidden) > #kpSitzungsleiste + header { display: none; }
  #bereichArbeitsvorrat:not(.hidden) { display: flex; flex-direction: column; }
  #bereichArbeitsvorrat > #abschnittMeineWoche { order: -1; margin-top: 0; }
}
details.ablaufabschnitt[open] { border-color: var(--kp-linie); }

/* ---- FORTSETZUNG (Soll-Ist Auftragsreferenz): Folgeschritte Unterlagen/Wert als Arbeitsschritt ----
   Breite und Bausteine wie das Referenzpanel "Aktueller Arbeitsschritt"; der Schritt bleibt der
   eigene dedizierte Weg (Titel, Rueckweg) - keine Sammelansicht, keine neue Regel. */
body.kp-folgeschritt main { max-width: 1100px; }
body.kp-folgeschritt #folgeschritt .folgeschritt-weg { font-size: 13px; color: #595959; }
body.kp-folgeschritt #puHochladen { border: 1px dashed #aaa; background: #fafafa; border-radius: 7px; padding: 19px;
  text-align: center; margin-top: 18px; }
body.kp-folgeschritt #puHochladen input[type="file"] { display: block; margin: 10px auto; max-width: 100%; }
body.kp-folgeschritt #puHochladen input[type="file"]::file-selector-button { background: #fff; border: 1px solid #bcbcbc;
  border-radius: 7px; padding: 11px 12px; min-height: 44px; font: 14px Arial, Helvetica, sans-serif; color: #222; cursor: pointer; }
body.kp-folgeschritt #puHochladenKnopf { width: auto; padding: 12px 18px; font-weight: 700; }

/* =============================================================================================
   CHAT-228-MONTAGE-P1 - Versand der Abschlussdokumente (Montage und Auftragsakte, ein Baustein)
   ============================================================================================= */
#dokumentversandBereich { margin: .8rem 0; }
#dokumentversandBereich .versandkarte { background: var(--kp-karte); border: 1px solid var(--kp-linie); border-left: 5px solid var(--kp-akzent); border-radius: 8px; padding: .7rem .8rem; margin: .6rem 0; }
#dokumentversandBereich input[type=email] { width: 100%; min-height: 44px; padding: .6rem; border: 1px solid #767676; border-radius: 6px; font-size: 16px; box-sizing: border-box; }
#dokumentversandBereich input[readonly] { background: #f2f2f1; }
#dokumentversandBereich dl.daten { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: .2rem .7rem; margin: .5rem 0; }
#dokumentversandBereich dl.daten dd { margin: 0; overflow-wrap: anywhere; }
#dokumentversandBereich .fehler { background: #fdeaea; border: 1px solid #d98d8d; color: #8a1f1f; border-radius: 6px; padding: .5rem .7rem; }
#dokumentversandBereich .erfolg { background: #eef6ee; border: 1px solid #9ccfa6; color: #1d5a2a; border-radius: 6px; padding: .5rem .7rem; }
#dokumentversandBereich .hinweis { background: #fff7e6; border: 1px solid #e0b45c; color: #6b4a00; border-radius: 6px; padding: .5rem .7rem; }
#dokumentversandBereich .erlaeuterung { font-size: 14px; color: var(--kp-text-leise); }
#dokumentversandBereich .badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: 14px; overflow-wrap: anywhere; }