/* ═════════════════════════════════════════════════════════════════════════════ Carswap Portal – neues Design (Seitenleiste + Karten). Liegt parallel zu style.css und wird nur von den *_neu-Layouts geladen; Schalter: ?design=neu / ?design=alt (siehe design_neu() in helpers.php). Aufbau: 1. Schrift (D-DIN, selbst gehostet – Begründung in style.css) 2. Farbwerte hell/dunkel 3. Grundgerüst (Seitenleiste, Arbeitsfläche) 4. Bauteile des neuen Designs 5. Bestehende Klassen im neuen Kleid (Views ohne eigene _neu-Fassung) 6. Schmale Fenster ═════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: "D-DIN"; src: url("fonts/D-DIN.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "D-DIN"; src: url("fonts/D-DIN-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "D-DIN"; src: url("fonts/D-DIN-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ── 2. Farbwerte ────────────────────────────────────────────────────────── */ :root { --schrift: "D-DIN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --grund: #eef1f5; --karte: #ffffff; --karte-innen: #f7f9fb; --rand: #dde3ea; --rand-zart: #e9edf2; --text: #16222e; --text-hell: #5c6c7b; --text-zart: #8797a6; /* Seitenleiste: eigener Farbsatz, hell kühl-grau, dunkel marine */ --leiste: #e6ecf3; --leiste-rand: #d4dde8; --leiste-text: #46596c; --leiste-titel: #16222e; --leiste-schwach: #7a8c9d; --leiste-hover: rgba(255,255,255,.65); --leiste-flaeche: #ffffff; --leiste-schatten: 0 1px 3px rgba(16,32,48,.10); --leiste-chip: rgba(22,34,46,.08); --leiste-trenner: #d5dee8; --blau: #1293de; --blau-hell: #29a3ff; --rot: #ff3b30; --rot-dunkel: #d92e24; --neu: #ff9500; --terminiert: #007aff; --erledigt: #34c759; --storniert: #ff3b30; --grau: #8e8e93; /* Aliasse für die alten Views: Die nutzen var(--farbe-…) in style-Attributen und sollen im neuen Design nicht farblos dastehen. */ --farbe-text-hell: var(--text-hell); --farbe-text: var(--text); --farbe-primaer: var(--rot); --farbe-primaer-dunkel: var(--rot-dunkel); --farbe-rand: var(--rand); --farbe-karte: var(--karte); --schatten: 0 1px 2px rgba(16,32,48,.05), 0 4px 16px rgba(16,32,48,.06); --radius: 12px; --radius-klein: 8px; /* Untergrund und Schrift der Anmeldeseiten – beides unabhängig von der Farbstimmung. Die Werte hier gelten für die Kundenanmeldung (blaues Schild auf dunklem Blau); die Mitarbeiteranmeldung mit dem gelben Schild überschreibt sie weiter unten. */ /* Genau der Blauton des Schildes – wie im Adminbereich gehen Grund und Schild ineinander über, sichtbar bleibt der weiße Rand mit seinem Inhalt. */ --anmeldung-grund: #154889; --anmeldung-schrift: #fff; --marke-rot: #FF5C5C; --marke-grau: #D5DBE5; } /* ── Farbstimmung ──────────────────────────────────────────────────────────── Fünf Möglichkeiten, gesetzt als data-theme am (siehe layout_wahl() in helpers.php): auto folgt dem Betriebssystem, hell/mittel/dunkel/schild legen fest. Die ausdrücklichen Stimmungen stehen in der Ausnahmeliste der Systemabfrage, damit ein dunkel eingestelltes Gerät sie nicht überschreibt. Der Reihenfolge wegen: Erst die Systemvorliebe (greift nur bei „auto" und wenn gar nichts gesetzt ist), danach die ausdrücklichen Wahlen – so gewinnt die Entscheidung des Nutzers immer über die des Systems. ────────────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]):not([data-theme="mittel"]):not([data-theme="schild"]) { --grund: #0e1720; --karte: #16212d; --karte-innen: #1b2836; --rand: #263443; --rand-zart: #1f2c3a; --text: #e6edf3; --text-hell: #9bacbc; --text-zart: #6f8195; --leiste: #0a121b; --leiste-rand: #1b2836; --leiste-text: #a9bccd; --leiste-titel: #ffffff; --leiste-schwach: #6f8195; --leiste-hover: rgba(255,255,255,.07); --leiste-flaeche: rgba(41,163,255,.16); --leiste-schatten: 0 0 0 0 transparent; --leiste-chip: rgba(255,255,255,.12); --leiste-trenner: rgba(255,255,255,.09); --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35); } } /* Mittel: gedämpftes Tageslicht. Kein Weiß und kein Schwarz – der Grund ist ein ruhiges Blaugrau, die Karten heben sich hell ab. Für lange Sitzungen angenehmer als das grelle Weiß, ohne die Umkehrung ins Dunkle. */ :root[data-theme="mittel"] { --grund: #c9d2dc; --karte: #eef2f6; --karte-innen: #e2e8ef; --rand: #b3c0ce; --rand-zart: #cdd6e0; --text: #16222e; --text-hell: #4d5f70; --text-zart: #748495; --leiste: #aeb9c6; --leiste-rand: #9aa7b6; --leiste-text: #33445a; --leiste-titel: #101a26; --leiste-schwach: #5d6c7d; --leiste-hover: rgba(255,255,255,.55); --leiste-flaeche: #eef2f6; --leiste-schatten: 0 1px 3px rgba(16,32,48,.14); --leiste-chip: rgba(22,34,46,.10); --leiste-trenner: #9aa7b6; --schatten: 0 1px 2px rgba(16,32,48,.08), 0 4px 16px rgba(16,32,48,.10); } /* Dunkel als ausdrückliche Wahl – gleiche Werte wie oben, aber unabhängig vom System. */ :root[data-theme="dunkel"] { --grund: #0e1720; --karte: #16212d; --karte-innen: #1b2836; --rand: #263443; --rand-zart: #1f2c3a; --text: #e6edf3; --text-hell: #9bacbc; --text-zart: #6f8195; --leiste: #0a121b; --leiste-rand: #1b2836; --leiste-text: #a9bccd; --leiste-titel: #ffffff; --leiste-schwach: #6f8195; --leiste-hover: rgba(255,255,255,.07); --leiste-flaeche: rgba(41,163,255,.16); --leiste-schatten: 0 0 0 0 transparent; --leiste-chip: rgba(255,255,255,.12); --leiste-trenner: rgba(255,255,255,.09); --schatten: 0 1px 2px rgba(0,0,0,.4), 0 4px 18px rgba(0,0,0,.35); } /* Schild: die Farben der Anmeldeseite. Grund und Karten in den Blautönen des Verkehrsschildes, Weiß als Schrift, das Gelb des „Einloggen“-Banners als Akzent. Es ersetzt die Blautöne, die sonst Verweise und Knöpfe tragen – auf blauem Grund wären sie kaum zu sehen. Voreinstellung in beiden Bereichen (siehe layout_standard()). */ :root[data-theme="schild"] { --grund: #154889; --karte: #1b5498; --karte-innen: #1a4f8f; --rand: #2e6bb0; --rand-zart: #245c9e; --text: #ffffff; --text-hell: #c2d5ee; --text-zart: #9ab5d8; --leiste: #103a70; --leiste-rand: #1d5197; --leiste-text: #c2d5ee; --leiste-titel: #ffffff; --leiste-schwach: #8fabce; --leiste-hover: rgba(255,255,255,.10); --leiste-flaeche: rgba(240,201,0,.20); --leiste-schatten: 0 0 0 0 transparent; --leiste-chip: rgba(255,255,255,.14); --leiste-trenner: rgba(255,255,255,.12); /* Akzent: das Gelb des Schildes statt des Blaus. */ --blau: #f0c900; --blau-hell: #ffda33; --schatten: 0 1px 2px rgba(0,0,0,.35), 0 4px 18px rgba(0,0,0,.30); } /* ── 3. Grundgerüst ──────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--schrift); background: var(--grund); color: var(--text); line-height: 1.5; font-size: 15px; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--blau-hell); outline-offset: 2px; border-radius: 4px; } a { color: var(--blau); } .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; } .seitenleiste { background: var(--leiste); border-right: 1px solid var(--leiste-rand); color: var(--leiste-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 22px 14px 16px; } .marke { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; } .marke-zeichen { width: 30px; height: 30px; border-radius: 8px; flex: none; background: linear-gradient(140deg, var(--blau-hell), var(--blau)); display: grid; place-items: center; } .marke-zeichen img { width: 22px; height: 22px; display: block; } .marke-zeichen-admin { background: linear-gradient(140deg, #ff6b5e, var(--rot-dunkel)); } /* In der Stimmung „Schild“ tragen --blau/--blau-hell das Gelb des Banners – als Fläche hinter dem Rad wäre das zu grell. Hier deshalb ein gedämpftes, dunkleres Gold. */ :root[data-theme="schild"] .marke-zeichen { background: linear-gradient(140deg, #c9a800, #8a7400); } .marke-name { font-weight: 700; font-size: 15px; color: var(--leiste-titel); letter-spacing: -.01em; line-height: 1.2; } .marke-firma { font-size: 11.5px; color: var(--leiste-schwach); } /* Größere Fassung des Markenblocks im Kundenportal: Das Portal trägt hier den Namen des Auftraggebers, da darf die eigene Marke deutlicher stehen. Der Zusatz „by mklogistik" läuft in derselben Zeile weiter, klein und blass – er soll den Namen begleiten, nicht mit ihm konkurrieren. */ .marke-gross { padding-bottom: 22px; } .marke-gross .marke-zeichen { width: 46px; height: 46px; border-radius: 12px; } .marke-gross .marke-zeichen img { width: 34px; height: 34px; } .marke-gross .marke-name { font-size: 22px; line-height: 1.15; } .marke-beisatz { font-size: 11px; font-weight: 400; color: var(--leiste-schwach); white-space: nowrap; letter-spacing: 0; line-height: 1.3; } /* Auftraggeber über der Navigation. Darf umbrechen statt zu kürzen: Der Name ist hier die Aussage, und ein abgeschnittener Firmenname wäre schlechter als eine zweite Zeile. overflow-wrap fängt sehr lange Einzelwörter ab, die sonst seitlich hinausliefen. */ .leiste-kunde { padding: 0 10px; margin: 24px 0 10px; font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--leiste-titel); overflow-wrap: anywhere; } .leiste-etikett { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--leiste-schwach); padding: 0 10px; margin: 10px 0 6px; } .navi { display: flex; flex-direction: column; gap: 2px; } .navi a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-klein); color: var(--leiste-text); text-decoration: none; font-size: 14px; transition: background .12s ease, color .12s ease; } .navi a svg { width: 17px; height: 17px; flex: none; opacity: .8; } .navi a:hover { background: var(--leiste-hover); color: var(--leiste-titel); } .navi a[aria-current="page"] { background: var(--leiste-flaeche); color: var(--leiste-titel); box-shadow: inset 2px 0 0 var(--blau-hell), var(--leiste-schatten); } .navi a[aria-current="page"] svg { opacity: 1; } .navi .zaehler { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--leiste-chip); color: var(--leiste-titel); padding: 1px 7px; border-radius: 20px; font-variant-numeric: tabular-nums; } .leiste-fuss { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--leiste-trenner); } .nutzer { display: flex; align-items: center; gap: 10px; padding: 6px 8px; } .nutzer-kuerzel { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--leiste-chip); color: var(--leiste-titel); display: grid; place-items: center; font-size: 12px; font-weight: 700; } .nutzer-name { font-size: 13px; color: var(--leiste-titel); line-height: 1.25; } .nutzer-rolle { font-size: 11px; color: var(--leiste-schwach); } .abmelden, .design-wechsel { display: block; padding: 7px 10px; border-radius: var(--radius-klein); color: var(--leiste-schwach); font-size: 12.5px; text-decoration: none; } .abmelden:hover, .design-wechsel:hover { background: var(--leiste-hover); color: var(--leiste-titel); } .design-wechsel { font-size: 11px; margin-top: 4px; } .flaeche { display: flex; flex-direction: column; min-width: 0; } .kopfzeile { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 32px; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand-zart); } .kopfzeile h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; } .kopfzeile .unterzeile { font-size: 12.5px; color: var(--text-hell); margin-top: 1px; } .kopfzeile .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inhalt { padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 18px; max-width: 1180px; width: 100%; } /* ── 4. Bauteile ─────────────────────────────────────────────────────────── */ .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); } .karte-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rand-zart); } .karte-kopf h2 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; } .karte-kopf .nebentext { margin-left: auto; font-size: 12px; color: var(--text-hell); } .karte-koerper { padding: 16px 18px; } .karte-schmal-mitte { max-width: 640px; } .karte-verwaltung { border-top: 3px solid var(--rot); } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--radius-klein); background: var(--rot); color: #fff; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, transform .08s ease; } .btn:hover { background: var(--rot-dunkel); } .btn:active { transform: translateY(1px); } .btn svg { width: 15px; height: 15px; } .btn-sekundaer { background: var(--karte); color: var(--text); border-color: var(--rand); } .btn-sekundaer:hover { background: var(--karte-innen); border-color: var(--text-zart); } .btn-klein { padding: 5px 11px; font-size: 12.5px; } .btn-still { background: transparent; border-color: transparent; color: var(--text-hell); } .btn-still:hover { background: var(--karte-innen); color: var(--text); } .btn-gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 40%, var(--rand)); } .btn-gefahr:hover { background: color-mix(in srgb, var(--rot) 8%, var(--karte)); } /* Alle Statuspillen gleich breit, Beschriftung mittig: In den Listen stehen sie in einer Spalte untereinander – unterschiedlich breite Pillen ließen die Kante ausfransen („Neu" gegen „Terminiert"). Der Punkt liegt dafür absolut am linken Rand statt im Textfluss; läge er im Fluss, wäre die Beschriftung um seine halbe Breite nach rechts verschoben und säße nicht wirklich in der Mitte. Das Polster ist deshalb beidseitig gleich. min-width statt width, damit längere Ausnahmen (z. B. „Bestätigt am 21.08.2026" in der Kopfzeile) weiterhin Platz finden. */ .pille { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 106px; padding: 3px 22px; border-radius: 20px; font-size: 11.5px; font-weight: 700; line-height: 1.4; white-space: nowrap; text-align: center; } .pille::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pille-neu { color: var(--neu); background: color-mix(in srgb, var(--neu) 14%, transparent); } .pille-terminiert { color: var(--terminiert); background: color-mix(in srgb, var(--terminiert) 14%, transparent); } .pille-erledigt { color: var(--erledigt); background: color-mix(in srgb, var(--erledigt) 16%, transparent); } .pille-storniert { color: var(--storniert); background: color-mix(in srgb, var(--storniert) 13%, transparent); } .pille-ohne::before { display: none; } .pille-neutral { color: var(--text-hell); background: var(--karte-innen); border: 1px solid var(--rand); padding: 3px 14px; } /* Bestätigung als eigenes Farbpaar: Grün heißt erledigt, Orange heißt „liegt noch an". Vorher waren beide grau – man musste lesen statt zu sehen, was offen ist. */ .pille-bestaetigt { color: var(--erledigt); background: color-mix(in srgb, var(--erledigt) 16%, transparent); } .pille-unbestaetigt { color: var(--neu); background: color-mix(in srgb, var(--neu) 14%, transparent); } .etikett { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-zart); } .kennung { font-variant-numeric: tabular-nums; letter-spacing: .01em; } .hinweistext { font-size: 12.5px; color: var(--text-hell); margin: 0; } .kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .kennzahl { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 15px 17px 14px; display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; } .kennzahl::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ton, var(--blau)); } /* Die Kacheln sind Knöpfe: Sie öffnen die Aufträge hinter der Zahl. Deshalb die Knopf-Vorgaben zurücksetzen und einen Hinweis geben, dass hier etwas passiert. */ .kennzahl { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; } .kennzahl:hover { border-color: var(--text-zart); } .kennzahl .kopf { display: flex; align-items: center; gap: 7px; } .kennzahl .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ton); } .kennzahl .titel { font-size: 12.5px; color: var(--text-hell); font-weight: 700; } .kennzahl .wert { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kennzahl .fuss { display: block; font-size: 12px; color: var(--text-zart); } /* Auftragsliste im Kachelfenster. Begrenzte Höhe, damit das Fenster bei vielen Aufträgen nicht über den Bildschirm hinauswächst – und ein engeres Raster als in der Auftragsliste: Im Fenster steht weniger Breite zur Verfügung, sonst würde die Statuspille abgeschnitten. */ .kachel-liste { max-height: 46vh; overflow-y: auto; } .kachel-liste .zeile { grid-template-columns: 52px minmax(110px, 1.4fr) minmax(92px, 1fr) auto auto; gap: 10px; padding: 10px 12px; } /* Die Route entfällt hier: Sie ist die längste Angabe, und Ort für Ort steht ohnehin im Auftrag selbst, der einen Klick entfernt ist. */ .kachel-liste .zeile .route { display: none; } /* Auftragszeilen (Liste als Karten statt Tabelle) */ .zeilen { display: flex; flex-direction: column; } .zeile { display: grid; align-items: center; gap: 14px; grid-template-columns: 62px minmax(160px, 1.3fr) minmax(140px, 1fr) minmax(150px, 1.2fr) auto auto; width: 100%; padding: 12px 18px; border: 0; border-top: 1px solid var(--rand-zart); background: transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; text-decoration: none; transition: background .1s ease; } .zeilen > .zeile:first-child, .zeilen > .zeile-mit-wahl:first-child { border-top: 0; } .zeile:hover { background: var(--karte-innen); } .zeile .datum { text-align: center; line-height: 1.15; } .zeile .datum .tag { display: block; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .zeile .datum .monat { display: block; font-size: 10.5px; color: var(--text-hell); text-transform: uppercase; letter-spacing: .06em; } .zeile .datum .kw { display: block; font-size: 10px; color: var(--text-zart); } /* Kein verabredeter Termin, sondern ein Ersatzdatum (Wunsch, Auftragsdatum): kursiv, damit man den Unterschied bemerkt, ohne dass die Zeile unruhig wird. */ .zeile .datum .kw-vage { font-style: italic; } /* „Auftrag" heißt: Es gibt weder Termin noch Wunschdatum, hier steht nur der Tag der Beauftragung. Das ist der Fall, der Arbeit nach sich zieht – deshalb in der Farbe, die im Portal überall für „neu, noch zu terminieren" steht. */ .zeile .datum .kw-auftrag { color: var(--neu); font-weight: 700; font-style: normal; } .zeile .haupt { min-width: 0; } .zeile .haupt .name { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .haupt .neben { display: block; font-size: 12.5px; color: var(--text-hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .fahrzeug { font-size: 13px; min-width: 0; } .zeile .fahrzeug .kz { display: block; font-weight: 700; } .zeile .fahrzeug .typ { display: block; font-size: 12px; color: var(--text-hell); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .route { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 7px; min-width: 0; } .zeile .route span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .route svg { width: 13px; height: 13px; flex: none; color: var(--text-zart); } .zeile .pfeil { color: var(--text-zart); display: grid; place-items: center; } .zeile .pfeil svg { width: 16px; height: 16px; } /* Admin-Zeile mit Auswahlkasten davor */ .zeile-mit-wahl { display: flex; align-items: center; border-top: 1px solid var(--rand-zart); } .zeile-mit-wahl .wahl { margin: 0 4px 0 16px; width: 15px; height: 15px; accent-color: var(--blau); flex: none; cursor: pointer; } .zeile-mit-wahl .zeile { border-top: 0; flex: 1; min-width: 0; padding-left: 10px; } .zeile-mit-wahl .zeile { grid-template-columns: 62px minmax(150px, 1.3fr) minmax(130px, 1fr) minmax(140px, 1.1fr) auto auto auto; } .auswahl-leiste { display: flex; align-items: center; gap: 12px; } .auswahl-leiste[hidden] { display: none; } .auswahl-leiste { padding: 9px 14px; border-radius: var(--radius-klein); background: color-mix(in srgb, var(--blau) 10%, var(--karte)); border: 1px solid color-mix(in srgb, var(--blau) 30%, var(--rand)); font-size: 13px; font-weight: 700; } .auswahl-leiste .btn { margin-left: auto; } /* Suchfeld + Filter */ .werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .suche { position: relative; flex: 1; min-width: 200px; } .suche svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-zart); } .suche input { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--karte); font-size: 13.5px; } .suche input::placeholder { color: var(--text-zart); } .filter { display: flex; gap: 6px; flex-wrap: wrap; } .filter button { padding: 7px 13px; border: 1px solid var(--rand); border-radius: 20px; background: var(--karte); font-size: 12.5px; font-weight: 700; color: var(--text-hell); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .filter button:hover { border-color: var(--text-zart); } .filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--karte); } /* Zweite Filtergruppe optisch abgesetzt, damit man sie nicht für eine Fortsetzung der Statusfilter hält – beide wirken zusammen, sind aber verschiedene Fragen. */ .filter-bestaetigt { padding-left: 10px; border-left: 1px solid var(--rand); } /* Sortierung: Auswahlliste plus Richtungsknopf, optisch an die Filter angelehnt. */ .sortierung { display: inline-flex; align-items: center; gap: 6px; } .sortierung label { font-size: 12.5px; color: var(--text-hell); } .sortierung select { padding: 7px 30px 7px 11px; border: 1px solid var(--rand); border-radius: 20px; background-color: var(--karte); font-size: 12.5px; font-weight: 700; color: var(--text-hell); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%238797a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 10px 7px; } .sortierung button { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 1px solid var(--rand); background: var(--karte); color: var(--text-hell); font-size: 13px; line-height: 1; } .sortierung button:hover { border-color: var(--text-zart); color: var(--text); } /* Detailansicht */ .zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .feldliste { display: flex; flex-direction: column; } .feld { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 9px 0; border-top: 1px solid var(--rand-zart); font-size: 13.5px; } .feldliste .feld:first-child { border-top: 0; padding-top: 0; } .feld .bezeichnung { color: var(--text-hell); } .feld .wert { font-weight: 700; overflow-wrap: anywhere; } .feld .wert.normal { font-weight: 400; } .wert-neben { display: block; font-weight: 400; font-size: 12px; color: var(--text-hell); } .fahrt { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .fahrt-halb { padding: 4px 18px 4px 0; } .fahrt-halb + .fahrt-halb { padding-left: 24px; border-left: 1px dashed var(--rand); } .fahrt-marke { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fahrt-marke .ring { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--blau); flex: none; } .fahrt-marke .ring.ziel { border-color: var(--erledigt); } .fahrt-ort { font-size: 17px; font-weight: 700; letter-spacing: -.01em; } .fahrt-termin { font-size: 13.5px; margin-top: 2px; font-variant-numeric: tabular-nums; } .fahrt-kontakt { font-size: 13px; color: var(--text-hell); margin-top: 8px; line-height: 1.6; } .dokumente { display: flex; flex-direction: column; } .dokument { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--rand-zart); } .dokumente .dokument:first-child { border-top: 0; padding-top: 2px; } .dokument-zeichen { width: 34px; height: 34px; border-radius: var(--radius-klein); flex: none; background: var(--karte-innen); border: 1px solid var(--rand); display: grid; place-items: center; color: var(--text-hell); } .dokument-zeichen svg { width: 16px; height: 16px; } .dokument .titel { font-size: 13.5px; font-weight: 700; } .dokument .neben { font-size: 12px; color: var(--text-hell); } .dokument .dokument-aktionen { margin-left: auto; display: flex; gap: 6px; align-items: center; } .aktionen { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 2px; align-items: center; } .zurueck { display: inline-flex; align-items: center; gap: 6px; color: var(--text-hell); font-size: 13px; text-decoration: none; margin-bottom: 2px; } .zurueck:hover { color: var(--text); } .zurueck svg { width: 14px; height: 14px; } /* Formulare (neue Struktur) */ .formular-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .formular-gruppe { display: flex; flex-direction: column; gap: 5px; } .formular-gruppe.breit { grid-column: 1 / -1; } .formular-gruppe label { font-size: 12.5px; color: var(--text-hell); font-weight: 700; } .formular-gruppe input, .formular-gruppe select, .formular-gruppe textarea { padding: 9px 11px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background-color: var(--karte-innen); font-size: 13.5px; } .formular-gruppe input:focus, .formular-gruppe select:focus, .formular-gruppe textarea:focus { background-color: var(--karte); } .formular-gruppe .hilfe { font-size: 11.5px; color: var(--text-zart); } .abschnitt-titel { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-zart); grid-column: 1 / -1; margin-top: 6px; } .formular-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--rand-zart); background: var(--karte-innen); border-radius: 0 0 var(--radius) var(--radius); } .formular-fuss .hinweistext { margin-right: auto; } .schalter-zeile { flex-direction: row; align-items: center; gap: 9px; } .schalter-zeile input { width: 15px; height: 15px; accent-color: var(--blau); } .schalter-zeile label { font-weight: 400; font-size: 13.5px; color: var(--text); } .firmen-zeichen { width: 36px; height: 36px; border-radius: var(--radius-klein); flex: none; background: var(--karte-innen); border: 1px solid var(--rand); display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-hell); } .zeile-firma { display: flex; align-items: center; gap: 14px; grid-template-columns: none; } .zeile-firma .haupt { flex: 1; min-width: 0; } /* ── Kalender (Wochenraster) ─────────────────────────────────────────────── */ /* Aufbau wie in der Mac-App: Zeilen sind Kalenderwochen, Spalten die Wochentage. Feste Spaltenbreiten in einem waagerecht rollbaren Bereich – schmaler als rund 700 px wird ein Sieben-Tage-Raster sonst zu Brei. */ .kal-schalter { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-hell); white-space: nowrap; } .kal-schalter input { width: 14px; height: 14px; accent-color: var(--blau); } .kal-eingang { padding: 12px 18px; border-bottom: 1px solid var(--rand-zart); } .kal-eingang-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .kal-eingang-liste .kal-kachel { width: 180px; flex: none; } .kal-rollflaeche { overflow-x: auto; padding: 12px 18px 16px; } .kalender { min-width: 680px; display: flex; flex-direction: column; gap: 4px; } /* minmax(112px, 1fr) statt 1fr: Ein reines 1fr hat als Mindestbreite den Inhalt – eine lange Kommission hätte die Spalte auseinandergezogen und alle anderen gestaucht. Mit festem Minimum sind alle Tage gleich breit, und zu lange Beschriftungen werden gekürzt. */ .kal-kopfzeile, .kal-woche { display: grid; grid-template-columns: 62px repeat(7, minmax(112px, 1fr)); gap: 4px; } .kal-kw-kopf, .kal-tag-kopf { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-zart); padding-bottom: 2px; } .kal-tag-kopf { text-align: center; } .kal-kw { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 4px; } .kal-kw-nummer { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .kal-kw-spanne { font-size: 9.5px; color: var(--text-zart); line-height: 1.2; } .kal-tag { min-height: 58px; border-radius: var(--radius-klein); padding: 3px; background: color-mix(in srgb, var(--text) 3%, transparent); display: flex; flex-direction: column; gap: 3px; } .kal-wochenende { background: color-mix(in srgb, var(--text) 6%, transparent); } .kal-heute { box-shadow: inset 0 0 0 1px var(--blau); } .kal-tag-zahl { font-size: 9.5px; color: var(--text-zart); text-align: right; padding-right: 2px; font-variant-numeric: tabular-nums; } .kal-heute .kal-tag-zahl { color: var(--blau); font-weight: 700; } /* Kacheln in Statusfarbe – dieselbe Zuordnung wie Pillen und Punkte in den Listen. Getönt statt deckend, damit mehrere Kacheln an einem Tag nicht wie ein Warnschild wirken. */ .kal-kachel { display: block; width: 100%; text-align: left; text-decoration: none; color: var(--text); font: inherit; cursor: pointer; border: 0; border-left: 3px solid transparent; border-radius: 6px; padding: 3px 5px; overflow: hidden; transition: filter .1s ease; } .kal-kachel:hover { filter: brightness(1.06); } .kal-kachel span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kal-kachel-firma { font-size: 9px; color: var(--text-hell); } .kal-kachel-titel { font-size: 10.5px; font-weight: 700; line-height: 1.25; } .kal-kachel-neben { font-size: 9.5px; color: var(--text-hell); font-variant-numeric: tabular-nums; } .kal-neu { background: color-mix(in srgb, var(--neu) 22%, transparent); border-left-color: var(--neu); } .kal-terminiert { background: color-mix(in srgb, var(--terminiert) 20%, transparent); border-left-color: var(--terminiert); } .kal-erledigt { background: color-mix(in srgb, var(--erledigt) 20%, transparent); border-left-color: var(--erledigt); } .kal-storniert { background: color-mix(in srgb, var(--storniert) 16%, transparent); border-left-color: var(--storniert); } /* Erledigte ausblendbar – der Schalter setzt diese Klasse auf den Kalender. */ .kalender.ohne-erledigte .kal-erledigt, .kal-eingang-liste.ohne-erledigte .kal-erledigt { display: none; } /* ── Übersichtskarte ───────────────────────────────────────────────────────── Die Umrisse liegen als eigene SVG-Datei vor (dauerhaft zwischenspeicherbar), die Punkte sitzen darüber – in Prozent, damit sie beim Skalieren mitwandern. Das Seitenverhältnis kommt aus der Projektion und steckt in einer Variablen, nicht fest in der CSS. */ .ktafel { position: relative; width: 100%; max-width: 620px; margin: 0 auto; aspect-ratio: 1 / var(--ktafel-verhaeltnis, 1.26); overflow: hidden; border-radius: var(--radius-klein); cursor: grab; touch-action: none; /* touch-action: Ziehen soll die Karte bewegen, nicht die Seite */ } .ktafel.zieht { cursor: grabbing; } /* Die Bühne trägt Karte und Punkte gemeinsam – vergrößert wird sie, nicht die Einzelteile. --kz ist der aktuelle Vergrößerungsfaktor; die Punkte rechnen ihn wieder heraus, damit sie bei jeder Stufe gleich groß bleiben. */ .ktafel-buehne { position: absolute; inset: 0; transform-origin: 0 0; } .ktafel-buehne picture { display: block; width: 100%; height: 100%; } .ktafel-grund { width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; } .ktafel-punkt { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid var(--karte); box-shadow: 0 1px 3px rgba(16,32,48,.35); cursor: default; } /* Filter Übernahme/Übergabe: Die Punkte bleiben im Dokument und werden nur ausgeblendet – so bleiben Zoom und Verschiebung erhalten, wenn man die Auswahl wechselt. Die Proben in der Legende tragen dieselben Klassen, stehen aber außerhalb der Bühne und sind deshalb nicht betroffen. */ .ktafel-buehne.nur-uebernahme .ktafel-punkt.ktafel-uebergabe, .ktafel-buehne.nur-uebergabe .ktafel-punkt.ktafel-uebernahme { display: none; } /* Bedienknöpfe oben rechts in der Karte */ .ktafel-bedienung { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; } .ktafel-bedienung button { width: 28px; height: 28px; border-radius: 7px; cursor: pointer; background: var(--karte); border: 1px solid var(--rand); color: var(--text); font-size: 14px; line-height: 1; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(16,32,48,.18); } .ktafel-bedienung button:hover { background: var(--karte-innen); } /* Übergabe hohl, Übernahme gefüllt – dieselbe Unterscheidung wie in der Auftragsansicht. */ .ktafel-uebergabe { background: var(--karte); border-width: 3px; } .ktafel-neu.ktafel-uebernahme { background: var(--neu); } .ktafel-terminiert.ktafel-uebernahme { background: var(--terminiert); } .ktafel-erledigt.ktafel-uebernahme { background: var(--erledigt); } .ktafel-storniert.ktafel-uebernahme { background: var(--storniert); } .ktafel-neu.ktafel-uebergabe { border-color: var(--neu); } .ktafel-terminiert.ktafel-uebergabe { border-color: var(--terminiert); } .ktafel-erledigt.ktafel-uebergabe { border-color: var(--erledigt); } .ktafel-storniert.ktafel-uebergabe { border-color: var(--storniert); } .ktafel-legende { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--text-hell); } .ktafel-legende > span { display: inline-flex; align-items: center; gap: 6px; } .ktafel-probe { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--text-hell); background: var(--text-hell); } .ktafel-probe.ktafel-uebergabe { background: var(--karte); border-width: 3px; } /* Auswahl der Farbstimmung. Jeder Knopf trägt eine kleine Farbprobe, damit man sieht, was einen erwartet, statt es aus dem Wort zu erraten. Die Proben zeigen bewusst feste Farben und nicht die Felder der Seite – sonst sähen alle vier gleich aus. */ .layout-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .layout-knopf { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; cursor: pointer; text-align: left; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius-klein); transition: border-color .12s ease, background .12s ease; } .layout-knopf:hover { border-color: var(--text-zart); } .layout-aktiv { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); } .layout-titel { font-size: 13.5px; font-weight: 700; } .layout-hinweis { font-size: 11px; color: var(--text-hell); } .layout-probe { width: 100%; height: 22px; border-radius: 5px; margin-bottom: 4px; border: 1px solid rgba(16,32,48,.18); } .layout-probe-auto { background: linear-gradient(100deg, #ffffff 0 50%, #0e1720 50% 100%); } .layout-probe-hell { background: linear-gradient(100deg, #ffffff 0 60%, #eef1f5 60% 100%); } .layout-probe-mittel { background: linear-gradient(100deg, #eef2f6 0 60%, #c9d2dc 60% 100%); } .layout-probe-dunkel { background: linear-gradient(100deg, #16212d 0 60%, #0e1720 60% 100%); } .layout-probe-schild { background: linear-gradient(100deg, #1b5498 0 60%, #f0c900 60% 100%); } /* Detailfenster des Kalenders */ .kal-modal { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--karte); color: var(--text); padding: 0; max-width: 720px; width: calc(100vw - 48px); box-shadow: 0 12px 40px rgba(16,32,48,.28); } .kal-modal::backdrop { background: rgba(10,20,32,.45); backdrop-filter: blur(2px); } .kal-modal-inhalt { padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 16px; } .kal-modal-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .kal-modal-kopf h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; } .kal-modal-pillen { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } .kal-modal-fuss { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--rand-zart); padding-top: 14px; } /* Hinweise (Flash) */ .hinweis { margin: 16px 32px 0; padding: 10px 14px; border-radius: var(--radius-klein); font-size: 13.5px; border: 1px solid; } .hinweis-info { background: color-mix(in srgb, var(--erledigt) 10%, var(--karte)); border-color: color-mix(in srgb, var(--erledigt) 35%, var(--rand)); } .hinweis-error { background: color-mix(in srgb, var(--rot) 9%, var(--karte)); border-color: color-mix(in srgb, var(--rot) 35%, var(--rand)); } .inhalt .hinweis, .card .hinweis, .anmeldung-mitte .hinweis { margin: 0 0 12px; } .leer { color: var(--text-hell); font-size: 13.5px; } /* ── 5. Bestehende Klassen im neuen Kleid ────────────────────────────────── */ /* Views ohne _neu-Fassung (Formulare, Firmen-Detail, Einstellungen, …) laufen im neuen Layout mit ihrem alten Markup weiter – diese Regeln geben ihnen das neue Erscheinungsbild, ohne dass am PHP etwas geändert werden muss. */ .card { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); padding: 20px 22px; } .card-schmal { max-width: 460px; } .card h1 { margin: 0 0 12px; font-size: 19px; letter-spacing: -.01em; } .card h2 { margin: 22px 0 8px; font-size: 14.5px; } .tabelle-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13.5px; } th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rand); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-zart); white-space: nowrap; } td { padding: 9px 10px; border-bottom: 1px solid var(--rand-zart); vertical-align: top; } tbody tr:hover { background: var(--karte-innen); } .th-sortierbar { cursor: pointer; } .sortier-pfeil { font-size: 9px; margin-left: 3px; } .badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; color: #fff; } .badge-neu { background: var(--neu); } .badge-terminiert { background: var(--terminiert); } .badge-erledigt { background: var(--erledigt); } .badge-storniert { background: var(--storniert); } .badge-bestaetigt { background: var(--erledigt); } .badge-unbestaetigt { background: var(--grau); } .detail-zeile { display: grid; grid-template-columns: 190px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--rand-zart); font-size: 13.5px; } .detail-zeile .label { color: var(--text-hell); } .aktionen-leiste { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; align-items: center; } .such-leiste { margin: 10px 0; } .such-leiste input[type="text"] { padding: 9px 12px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--karte-innen); font-size: 13.5px; min-width: 220px; } .formular { display: flex; flex-direction: column; gap: 4px; max-width: 560px; } .formular label { font-size: 12.5px; color: var(--text-hell); font-weight: 700; margin-top: 10px; } .formular input, .formular select, .formular textarea { padding: 9px 11px; border: 1px solid var(--rand); border-radius: var(--radius-klein); background-color: var(--karte-innen); font-size: 13.5px; } .formular input:focus, .formular select:focus, .formular textarea:focus { background-color: var(--karte); } .formular .btn { margin-top: 16px; align-self: flex-start; } /* Gleiche Höhe für alle Eingabefelder – gilt für beide Formularbauweisen. Nötig, weil die drei Feldarten von sich aus unterschiedlich hoch sind: in die Maße seines Systemelements und ignoriert die Höhe darüber – die Liste blieb dort flach, während Textfelder daneben 40 px hoch waren (in Chrome fiel es nicht auf, dort greift die Höhe). Mit appearance: none rendert der Browser das Feld selbst, dann gilt die Höhe überall. Den Pfeil muss man sich dann selbst danebenlegen; er steckt als SVG im Hintergrundbild, in einem Grau, das auf hellem wie dunklem Grund lesbar bleibt. Das rechte Polster hält ihm den Platz frei. */ .formular select, .formular-gruppe select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%238797a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px; padding-right: 34px; } .checkbox-zeile { display: flex; align-items: center; gap: 9px; margin-top: 10px; } .checkbox-zeile input { width: 15px; height: 15px; accent-color: var(--blau); } .checkbox-zeile label { margin: 0; font-weight: 400; color: var(--text); font-size: 13.5px; } .form-fuss { display: flex; gap: 8px; margin-top: 14px; align-items: center; flex-wrap: wrap; } .link-button { background: none; border: 0; padding: 0; color: var(--blau); cursor: pointer; font-size: 13px; text-decoration: underline; } .footer-hinweis { font-size: 12px; color: var(--text-zart); margin-top: 10px; } .adress-vorschlaege { border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--karte); box-shadow: var(--schatten); max-height: 220px; overflow-y: auto; } .adress-vorschlag-item { padding: 7px 11px; cursor: pointer; font-size: 13px; } .adress-vorschlag-item:hover { background: var(--karte-innen); } /* ── Anmeldung als Verkehrsschild ──────────────────────────────────────────── Das Schild zeigt bereits Eingabefelder und einen Knopf; die echten Bedienelemente liegen deckungsgleich darüber, statt daneben eine zweite Maske aufzubauen. Die Prozentwerte stammen aus der Vermessung der Zeichnung. Weil alles in Prozent liegt, wandert es beim Skalieren mit – und die Schriftgröße hängt über cqw an der Breite des Schildes, damit die Eingabe nie aus ihrem Kasten läuft. Zwei Fassungen: das blaue Schild im Kundenbereich, das gelbe im Adminbereich. Beide Zeichnungen sind deckungsgleich aufgebaut (nachgemessen), es unterscheiden sich nur die Farben – deshalb hängt die Fassung an drei Werten statt an eigenen Regeln. ────────────────────────────────────────────────────────────────────────── */ .schild { --schild-schrift: #fff; --schild-blass: rgba(255,255,255,.55); --schild-tupfer: rgba(255,255,255,.12); --schild-ring: #f0c900; position: relative; width: 100%; max-width: 440px; margin: 0 auto; container-type: inline-size; } /* Gelbes Schild: schwarze Schrift, dunkler Tupfer, blauer Fokusring. */ .schild-admin { --schild-schrift: #111; --schild-blass: rgba(0,0,0,.45); --schild-tupfer: rgba(0,0,0,.10); --schild-ring: #154889; } .schild-bild { display: block; width: 100%; height: auto; } .schild-feld { position: absolute; border: 0; background: transparent; color: var(--schild-schrift); font-family: var(--schrift); font-weight: 700; font-size: 18px; /* Rückfall, falls cqw fehlt */ /* Unter 16px zoomt Safari auf dem iPhone beim Antippen ins Feld – deshalb die Untergrenze. */ font-size: max(16px, 3.6cqw); padding: 0 1.8cqw; margin: 0; border-radius: 1.4cqw; /* Die Kästen sind Teil der Zeichnung – ein zweiter Rahmen wäre doppelt gemoppelt. */ outline-offset: 0.4cqw; } .schild-feld::placeholder { color: var(--schild-blass); font-weight: 400; } .schild-feld:focus { outline: 2px solid var(--schild-ring); } /* Automatisch ausgefüllte Felder färbt der Browser sonst weiß ein und macht sie unlesbar. */ .schild-feld:-webkit-autofill { -webkit-text-fill-color: var(--schild-schrift); transition: background-color 9999s; } /* E-Mail-Adressen sind länger als „Passwort“ – etwas kleiner gesetzt, damit auch disposition@autohaus-beispiel.de noch in den Kasten passt. */ .schild-benutzer { left: 6.8%; top: 46.51%; width: 37.99%; height: 6.98%; font-size: max(16px, 2.9cqw); } .schild-passwort { left: 56.61%; top: 63.98%; width: 37.99%; height: 6.98%; } .schild-knopf { position: absolute; left: 14.45%; top: 7.71%; width: 67.43%; height: 12%; background: transparent; border: 0; cursor: pointer; border-radius: 1.4cqw; padding: 0; } .schild-knopf:hover { background: var(--schild-tupfer); } .schild-knopf:focus-visible { outline: 3px solid var(--schild-ring); outline-offset: 2px; } .schild-hinweis { max-width: 440px; margin: 0 auto 12px; } .schild-fuss { max-width: 440px; margin: 14px auto 0; text-align: center; font-size: 13px; } .schild-fuss a { color: var(--anmeldung-schrift); } /* Nur für Vorlesehilfen: sichtbar für Technik, unsichtbar für Augen. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Adresseingabe im Auftragsformular ─────────────────────────────────────── Ein Suchfeld über zwei Zeilen: Straße + Nr., darunter PLZ + Ort. Siehe adresseingabe.js. Die Formulare drumherum stellen Beschriftung und Feld untereinander, weil beide direkte Kinder eines Flex-Containers sind. Sobald hier Spalten dazwischenkommen, gilt das nicht mehr – jede Spalte muss die Anordnung selbst herstellen, sonst steht die Beschriftung neben dem Feld. ────────────────────────────────────────────────────────────────────────── */ .adr { gap: 10px; } .adr legend { font-size: 12.5px; font-weight: 700; color: var(--text-hell); } .adr input { width: 100%; box-sizing: border-box; } .adr label { margin-top: 0; } .adr-suche { position: relative; } /* Das Suchfeld ist ein beschreibbarer Bereich statt eines (siehe Formular): Safaris Ausfüllhelfer greift nur an Formularfeldern an. Damit es sich anfühlt wie ein Feld, übernimmt es deren Maße – und den Beispieltext malt das CSS, solange nichts darinsteht. */ .adr-feld { min-height: 40px; padding: 9px 11px; box-sizing: border-box; border: 1px solid var(--rand); border-radius: var(--radius-klein); background-color: var(--karte-innen); color: var(--text); font-family: var(--schrift); font-size: 13.5px; line-height: 1.5; white-space: nowrap; overflow-x: auto; cursor: text; } .adr-feld:focus { background-color: var(--karte); outline: 2px solid var(--blau-hell); outline-offset: 1px; } .adr-feld:empty::before { content: attr(data-beispiel); color: var(--text-zart); } /* Die vier Einzelfelder sind aus demselben Grund Bereiche statt Felder. */ .adr-feld-teil { min-height: 40px; } .adr-liste { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius-klein); box-shadow: var(--schatten); overflow: hidden; display: none; } .adr-liste-offen { display: block; } .adr-treffer { padding: 8px 12px; cursor: pointer; font-size: 13px; } .adr-treffer + .adr-treffer { border-top: 1px solid var(--rand-zart); } .adr-treffer-aktiv, .adr-treffer:hover { background: color-mix(in srgb, var(--blau) 18%, transparent); } .adr-treffer-ort { display: block; font-size: 11px; color: var(--text-hell); } .adr-leer { padding: 10px 12px; font-size: 12px; color: var(--text-hell); } .adr-status { font-size: 11.5px; color: var(--text-zart); min-height: 16px; } .adr-zeile { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; } .adr-zeile-ort { grid-template-columns: 1fr 3fr; } .adr-zeile-voll { grid-template-columns: 1fr; } /* Jede Spalte trägt ihre eigene Anordnung – siehe Kommentar oben. */ .adr-zeile > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; } @media (max-width: 520px) { .adr-zeile, .adr-zeile-ort { grid-template-columns: 1fr; } } /* Anmeldeseiten: ruhiges Grau, damit das Schild allein wirkt */ /* Die Mitarbeiteranmeldung steht auf Gelb – dort bleiben die dunklen Töne des Schriftzugs, die auf dem dunklen Blau der Kundenseite absaufen. Auch die Fußzeilen müssen dunkel sein: Weiß auf Gelb wäre nicht zu lesen. */ body.anmeldung:has(.schild-admin) { /* Genau der Gelbton des Schildes – Grund und Schild gehen ineinander über, sichtbar bleibt der schwarze Rand mit seinem Inhalt. */ --anmeldung-grund: #F0C900; --anmeldung-schrift: #111; --marke-rot: #D80000; --marke-grau: #545454; } body.anmeldung { background: var(--anmeldung-grund); /* Der Untergrund ist in jeder Farbstimmung derselbe – die Schrift darf deshalb nicht der Stimmung folgen, sonst stünde sie im hellen Modus dunkel darauf. */ color: var(--anmeldung-schrift); min-height: 100vh; display: flex; flex-direction: column; } .anmeldung-mitte { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 16px; gap: 12px; } .anmeldung-mitte .card { width: 100%; max-width: 420px; } /* Rad und Schriftzug als kleines Gespann. */ .login-marke { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; } .login-marke-icon { width: 30px; height: 30px; } .login-marke-titel { font-weight: 700; font-size: 16px; } .marke-signal { color: var(--marke-rot); } .marke-silber { color: var(--marke-grau); } /* Auf der Schild-Anmeldung gehört das Gespann ans Ende der Seite, direkt über „powered by mklogistik“. Im Quelltext steht es schon hinten; order sorgt dafür, dass es auch unter der Zeile „Impressum & Datenschutz“ landet, die das Seitengerüst nach dem Seiteninhalt anhängt. */ .anmeldung-mitte:has(.schild) { padding-bottom: 4px; } .anmeldung-mitte:has(.schild) .login-marke { order: 1; margin: 6px 0 0; } /* Zwei mitwachsende Zwischenräume: einer über dem Schild, einer darunter. Sie halten das Schild in der Mitte und schieben zugleich das Gespann ganz nach unten. */ .anmeldung-mitte:has(.schild)::before, .anmeldung-mitte:has(.schild)::after { content: ''; flex-grow: 1; } .anmeldung-rechtliches { margin: 4px 0 0; text-align: center; font-size: 12px; } .anmeldung-rechtliches a { color: var(--anmeldung-schrift); } .powered-by { text-align: center; padding: 14px; font-size: 11px; color: rgba(255,255,255,.75); } .powered-by a { color: rgba(255,255,255,.9); } body.anmeldung .powered-by, body.anmeldung .powered-by a { color: var(--anmeldung-schrift); } .no-print {} @media print { .seitenleiste, .kopfzeile .rechts, .no-print, .werkzeuge, .auswahl-leiste { display: none !important; } .app { display: block; } body { background: #fff; color: #000; } } /* ── 6. Schmale Fenster ──────────────────────────────────────────────────── */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .seitenleiste { position: static; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 10px 14px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--leiste-rand); } .marke { padding: 0 10px 0 0; } .marke-firma, .leiste-etikett, .leiste-fuss { display: none; } .navi { flex-direction: row; } .navi a { white-space: nowrap; } .navi a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--blau-hell); } .kopfzeile, .inhalt { padding-left: 16px; padding-right: 16px; } .hinweis { margin: 12px 16px 0; } .kennzahlen, .zwei-spalten, .formular-gitter, .fahrt { grid-template-columns: 1fr; } .fahrt-halb + .fahrt-halb { padding-left: 0; border-left: 0; border-top: 1px dashed var(--rand); padding-top: 14px; margin-top: 12px; } .zeile { grid-template-columns: 54px 1fr auto; row-gap: 4px; } .zeile .fahrzeug, .zeile .route { grid-column: 2 / -1; } .zeile-mit-wahl .zeile { grid-template-columns: 54px 1fr auto; } .feld, .detail-zeile { grid-template-columns: 1fr; gap: 2px; } }