/* CSE Baustelle -> Vorgang - mobile-first, grosse Bedienelemente (Handschuh-tauglich). Farbwelt = CSE-Logo: ROTER Kopf + GELBE Zweitfarbe (Lager ist genau umgekehrt: gelber Kopf). Hell/Dunkel automatisch. */ :root { color-scheme: light; /* nativer Datumswaehler hell */ --akzent: #e11d27; /* Rot: Kopf + Hauptknoepfe (weisse Schrift) */ --akzent-dunkel: #b8161f; --blau: #f5b301; /* Zweitfarbe GELB (leicht-Knoepfe) - traegt dunkle Schrift */ --gelb-text: #2b2200; /* Schrift AUF Gelb */ --bg: #f4f3f1; --karte: #ffffff; --text: #1f1f1e; --text-dim: #5f5e5a; --rand: #e2e0dc; --gruen: #107c10; --rot: #c53030; --akzent-bg: #fdeceb; } /* Erzwungenes Dunkel: der Umschalter im Kopf setzt data-theme am . Ohne Attribut greift weiter die Windows-Einstellung (@media unten). */ html[data-theme="dunkel"] { color-scheme: dark; --bg: #1a1513; /* warmes Dunkel wie im Entwurf */ --karte: #241d1a; --text: #f3f2f1; --text-dim: #a89f9a; --rand: #3a2f2a; --gruen: #6ccb5f; --rot: #f1707b; --akzent-bg: #3a1a1a; } @media (prefers-color-scheme: dark) { html:not([data-theme="hell"]) { color-scheme: dark; --bg: #1a1513; /* warmes Dunkel wie im Entwurf */ --karte: #241d1a; --text: #f3f2f1; --text-dim: #a89f9a; --rand: #3a2f2a; --gruen: #6ccb5f; --rot: #f1707b; --akzent-bg: #3a1a1a; } } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } #kopf { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--akzent); color: #fff; position: sticky; top: 0; z-index: 10; } #kopf { flex-wrap: wrap; } #kopf h1 { font-size: 17px; margin: 0; } #kopf-datum { font-size: 12px; opacity: .85; } #kopf-text { flex: 1; min-width: 0; } /* Wie im Entwurf: Portal/Lager/Konto in EIGENER Zeile, gleich breit. :empty/kein sichtbares Kind -> keine Luecke, wenn alle Knoepfe versteckt sind. */ #kopf-knoepfe { flex: 1 1 100%; display: flex; gap: 6px; } #kopf-knoepfe:not(:has(> :not([hidden]))) { display: none; } /* Bewusst flacher als die Knoepfe im Inhalt: das sind Sprungziele, keine Hauptaktionen - sie sollen nicht ein Viertel des Handy-Bilds einnehmen. */ #kopf-knoepfe .leise { flex: 1; min-width: 0; padding: 6px 6px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } main, #anmeldung { flex: 1; width: 100%; max-width: 650px; margin: 0 auto; padding: 14px; } .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .karte.mitte { text-align: center; padding: 28px 20px; } .karte.mitte h2 { margin: 12px 0 6px; } .karte.mitte p { color: var(--text-dim); } button { font: inherit; /* Haus-Look: dünner roter Rahmen an ALLEN Knoepfen (wie Lager, Nutzer 28.07.). Kopf-/Sonderknoepfe ueberschreiben border-color selbst (siehe unten). */ border: 1.5px solid var(--rot); border-radius: 10px; padding: 12px 16px; cursor: pointer; } .primaer { background: var(--akzent); color: #fff; font-weight: 600; } .primaer:hover { background: var(--akzent-dunkel); } .primaer.leicht { background: var(--blau); color: var(--gelb-text); } /* Gelb traegt dunkle Schrift */ .primaer.gross { padding: 14px 22px; font-size: 16px; } .primaer:disabled { opacity: .55; cursor: default; } .leise { background: none; border: 1.5px solid var(--rot); color: var(--text); } .leise.klein { padding: 8px 12px; font-size: 13.5px; } /* Checklisten & Vorlagen: bewusst NEUTRAL (kein Erfassungsweg, sondern Helfer), aber deutlicher als ein reiner Umriss - dezente graue Füllung + kräftigere Kontur. Der Grauton per rgba wirkt in Hell UND Dunkel gleich (Nutzer 27.07.). */ #btn-checklisten { background: rgba(128, 128, 128, .18); border: 1.5px solid var(--akzent); /* dünner roter Rahmen (Baustelle-Farbe) */ color: var(--text); font-weight: 600; } #btn-checklisten:hover { background: rgba(128, 128, 128, .26); } #kopf .leise { color: #fff; border-color: rgba(255,255,255,.5); } /* Hell/Dunkel-Knopf sitzt neben dem Titel und darf sich NICHT dehnen (die Kopfknoepfe darunter tun das, siehe #kopf-knoepfe .leise). */ #kopf > .thema { flex: 0 0 auto; padding: 6px 9px; font-size: 15px; line-height: 1; } /* Fehlzeit-Knopf HELLBLAU wie das Fehlzeiten-Portal (= hellblauer Zettel) */ #kopf #btn-fehlzeit { background: #4da3d8; border-color: #4da3d8; font-weight: 600; } #kopf #btn-fehlzeit:hover { background: #2e86c1; border-color: #2e86c1; } /* Lager-Knopf GELB wie die Lager-App - so tragen die Sprung-Knöpfe die Themenfarbe ihres Ziels (Nutzer-Wunsch 26.07.2026). Gelb trägt dunkle Schrift. */ #kopf #btn-lager { background: #f2c200; border-color: #f2c200; color: #2b2200; font-weight: 600; } #kopf #btn-lager:hover { background: #d4a800; border-color: #d4a800; } /* Schritt 1: Ablageflaeche */ #ablage { border: 2px dashed var(--rand); border-radius: 12px; background: var(--akzent-bg); padding: 28px 16px; text-align: center; display: flex; flex-direction: column; gap: 6px; cursor: pointer; } #ablage.aktiv { border-color: var(--akzent); } .ablage-symbol { font-size: 40px; } .knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .knopfreihe button { flex: 1 1 140px; } /* Platzhalter-Knopf (Lagerscanner): deutlich abgesetzt vom Foto-Block darueber, damit er nicht wie eine weitere Foto-Aktion gelesen wird. */ .knopfreihe.vorschau { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rand); } .knopfreihe.vorschau button { opacity: .85; } /* Hinweiszeile direkt unter dem Platzhalter - enger als der normale Abstand. */ .hinweis.klein-hinweis { margin-top: 6px; font-size: 12.5px; } /* Schritt 2: Fotoleiste */ #foto-leiste { display: flex; gap: 8px; flex-wrap: wrap; } #foto-leiste:empty { display: none; } .foto-kachel { position: relative; width: 88px; height: 88px; } .foto-kachel img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; border: 1px solid var(--rand); background: var(--bg); } .foto-kachel .foto-weg { position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--rot); color: #fff; font-size: 14px; line-height: 1; } .foto-aktionen { margin: 8px 0 4px; } .foto-aktionen > * { flex: 0 0 auto; } /* Diktat-Zeile */ #diktat-zeile { display: flex; gap: 8px; align-items: stretch; margin-top: 6px; } #feld-text { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--rand); border-radius: 10px; padding: 11px 12px; flex: 1; resize: vertical; min-height: 66px; } #btn-mikro { flex: 0 0 54px; font-size: 22px; border-radius: 10px; } #btn-mikro.aktiv { background: var(--rot); border-color: var(--rot); animation: puls 1.2s infinite; } @keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(197, 48, 48, .5); } 70% { box-shadow: 0 0 0 12px rgba(197, 48, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(197, 48, 48, 0); } } input[type=text], input[type=date], select { font: inherit; color: var(--text); background: var(--feld, var(--bg)); border: 1px solid var(--feld-rand, var(--rand)); border-radius: 10px; padding: 11px 12px; width: 100%; margin-bottom: 10px; } .zeile { display: flex; gap: 8px; flex-wrap: wrap; } .zeile > * { flex: 1; min-width: 110px; } .zeile.rechts { justify-content: flex-end; margin-top: 4px; } .zeile.rechts > * { flex: 0 0 auto; } .feld-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-dim); margin-top: 8px; } .feld-label select, .feld-label input { margin-bottom: 0; } #volltext-box { margin: 10px 0 12px; font-size: 13.5px; } #volltext-box summary { cursor: pointer; color: var(--akzent); font-weight: 600; } #volltext { white-space: pre-wrap; word-break: break-word; margin: 8px 0 0; max-height: 200px; overflow: auto; color: var(--text-dim); font-family: inherit; } /* Schritt 3: fertig */ .fertig-symbol { font-size: 48px; } #fertig h2 { margin: 10px 0 4px; } .leise-link { display: inline-block; margin: 10px 0 18px; color: var(--akzent); } #fertig .primaer { display: block; width: 100%; } .hinweis { font-size: 13px; color: var(--text-dim); margin: 8px 0 0; } .hinweis.ok { color: var(--gruen); } .hinweis.warn { color: var(--rot); } .hinweis.mitte { text-align: center; } #fehler-banner { background: var(--rot); color: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; } #toast { position: sticky; bottom: 16px; margin: 0 auto; width: fit-content; max-width: 90%; background: var(--text); color: var(--bg); border-radius: 999px; padding: 11px 18px; font-size: 14px; z-index: 20; } footer { display: flex; justify-content: space-between; max-width: 650px; margin: 0 auto; width: 100%; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); font-size: 11.5px; color: var(--text-dim); } [hidden] { display: none !important; } /* ---------- Checklisten & Vorlagen ---------- */ .check-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .check-gruppe { margin: 14px 0 6px; font-size: 0.95rem; color: var(--text-dim); font-weight: 600; } .check-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin-bottom: 6px; border: 1px solid var(--rand); border-radius: 10px; background: var(--karte); color: var(--text); text-decoration: none; } .check-zeile:active { background: var(--akzent-bg); } .check-abzeichen { flex: 0 0 auto; min-width: 46px; padding: 4px 6px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-align: center; color: #fff; background: #757575; letter-spacing: 0.3px; } .check-abzeichen.typ-pdf { background: #c53030; } .check-abzeichen.typ-docx, .check-abzeichen.typ-doc { background: #185abd; } .check-abzeichen.typ-xlsx, .check-abzeichen.typ-xls { background: #107c41; } .check-abzeichen.typ-png, .check-abzeichen.typ-jpg, .check-abzeichen.typ-jpeg { background: #b46000; } .check-text { display: flex; flex-direction: column; min-width: 0; } .check-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .check-text small { color: var(--text-dim); } /* Entwurfs-Zeilen: Loeschknopf rechts in der Zeile (nicht absolut wie bei Fotos) */ .entwurf-weg { position: static; margin-left: auto; flex: 0 0 auto; } /* PDF-Formular ausfuellen (F3) */ .formular-haken { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-weight: 600; } .formular-haken input { width: 22px; height: 22px; } .formular-knopf { font-size: 1rem; } /* Kalender-Vorschlag (heutige Termine als Baustellen-Vorschlag) */ #kalender-vorschlag { border: 1px dashed var(--rand); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: var(--akzent-bg); } .kal-kopf { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 8px; } .kal-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kal-chip { font: inherit; font-size: 0.95rem; padding: 8px 12px; border: 1px solid var(--rand); border-radius: 20px; background: var(--karte); color: var(--text); cursor: pointer; text-align: left; } .kal-chip:hover { border-color: var(--akzent); } .kal-chip.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); } .kal-auftrag { opacity: 0.75; font-size: 0.85em; margin-left: 4px; } .kal-chip.aktiv .kal-auftrag { opacity: 0.9; } /* Tagesangabe (heute/gestern/Mo 21.7.) im Chip - kräftig abgesetzt */ .kal-tag { font-weight: 700; color: var(--akzent); margin-right: 2px; } .kal-chip.aktiv .kal-tag { color: #fff; } .kal-rueck { font-size: 0.85rem; margin-left: 8px; white-space: nowrap; cursor: pointer; } .kal-rueck input { vertical-align: -1px; margin-right: 3px; } .kal-leer { font-size: 0.85rem; color: var(--text-dim); } .kal-radierer { margin-top: 10px; font: inherit; font-size: 0.9rem; padding: 6px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--karte); color: var(--text-dim); cursor: pointer; } .kal-radierer:hover { border-color: var(--akzent); color: var(--text); } /* ---------- Auftrags-Notizpool (geteilte technische Infos je Auftrag) ---------- */ .notiz-pool { margin: 6px 0 12px; padding: 10px 12px; border: 1px solid var(--rand); border-left: 4px solid var(--akzent); border-radius: 10px; background: var(--akzent-bg); } .notiz-pool-kopf { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 8px; } .np-anzahl { color: var(--text-dim); font-weight: 600; } /* Auftrag-Status im Notizpool-Kopf + eingeklapptes Archiv bei abgeschlossen */ .np-badge { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: 1px; } .np-badge-offen { background: rgba(16,124,16,.14); color: #107c10; } .np-badge-zu { background: rgba(128,128,128,.18); color: var(--text-dim); } details.np-archiv > summary { cursor: pointer; font-size: 13px; color: var(--text-dim); padding: 6px 0; } .notiz-pool-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 260px; overflow-y: auto; } .np-eintrag { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px; } .np-text { font-size: 14px; line-height: 1.4; color: var(--text); } .np-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; } .np-meta a { color: var(--akzent); text-decoration: none; } .np-leer, .np-lade, .np-fehler { font-size: 13px; color: var(--text-dim); padding: 4px 2px; } .np-fehler { color: var(--rot); } .notiz-pool-neu { display: flex; flex-direction: column; gap: 6px; } .notiz-pool-neu textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--feld-rand, var(--rand)); border-radius: 8px; padding: 8px 10px; font: inherit; background: var(--feld, var(--karte)); color: var(--text); resize: vertical; } .notiz-pool-aktionen { display: flex; align-items: center; gap: 8px; } .np-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 38px; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); color: var(--text); font-size: 18px; cursor: pointer; } .np-btn.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); } .np-fotoname { font-size: 12px; color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .np-speichern { margin-left: auto; height: 38px; padding: 0 14px; border: none; border-radius: 8px; background: var(--akzent); color: #fff; font-weight: 600; cursor: pointer; } .np-speichern:disabled { opacity: .6; cursor: default; } .np-status { font-size: 12px; color: var(--text-dim); min-height: 14px; } /* ---------- Lieferscheine (letzte 4 Wochen, read-only) ---------- */ .ls-suche { width: 100%; box-sizing: border-box; border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px; font: inherit; background: var(--karte); color: var(--text); margin-bottom: 10px; } .ls-liste { display: flex; flex-direction: column; gap: 8px; } .ls-eintrag { border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px; background: var(--karte); } .ls-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ls-kopf b { font-size: 15px; color: var(--text); } .ls-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; } .ls-notiz { font-size: 13px; color: var(--text); margin-top: 4px; } .ls-oeffnen { flex: none; font-size: 13px; font-weight: 600; color: #fff; background: var(--akzent); padding: 5px 10px; border-radius: 7px; text-decoration: none; white-space: nowrap; } /* ---------- Knopf-Farb-Konvention (Haus-Regel 2026-08-20) ---------- Gruen = bestaetigen/speichern, Rot-Umriss = abbrechen, Rot gefuellt = loeschen. Neutrale Hauptaktionen (Anmelden, Neu, Suchen) bleiben bewusst blau. Der Mehrfach-Selektor sorgt dafuer, dass die Regel eine vorhandene .leise-/.primaer-Regel sicher schlaegt; Rot wird im Dunkeln aufgehellt. */ button.speichern, main button.speichern, .popup button.speichern { background: #107c10; color: #fff; border: 1.5px solid #107c10; font-weight: 600; } button.speichern:hover, main button.speichern:hover, .popup button.speichern:hover { background: #0b5c0b; } button.speichern:disabled { opacity: .55; cursor: default; } button.abbrechen, main button.abbrechen, .popup button.abbrechen { background: transparent; color: #d13438; border: 1.5px solid #d13438; font-weight: 600; } button.abbrechen:hover, main button.abbrechen:hover, .popup button.abbrechen:hover { background: rgba(209, 52, 56, .12); } button.gefahr, main button.gefahr, .popup button.gefahr { background: #d13438; color: #fff; border: 1.5px solid #d13438; font-weight: 600; } button.gefahr:hover { filter: brightness(1.08); } html[data-theme="dunkel"] button.abbrechen { color: #ea6a6d; border-color: #ea6a6d; } html[data-theme="dunkel"] button.gefahr { background: #ea6a6d; border-color: #ea6a6d; } @media (prefers-color-scheme: dark) { html:not([data-theme="hell"]) button.abbrechen { color: #ea6a6d; border-color: #ea6a6d; } html:not([data-theme="hell"]) button.gefahr { background: #ea6a6d; border-color: #ea6a6d; } }