in cab-partner.php und gar nichts fuer alle uebrigen Ziele (#la-kosten-titel, #inhalt hinter dem Skip-Link). Von zwei Knoepfen derselben Zeile sprang der eine sauber, beim anderen verschwand die Ueberschrift hinter der Leiste. scroll-margin wirkt ausschliesslich beim Scrollen-ins-Bild und veraendert kein Layout. Der Geltungsbereich bleibt trotzdem bei .la-body: Verwaltung und Buchungspanel scrollen in eigenen Behaeltern ohne klebende Landing-Kopfzeile, dort waere der Rand falsch. */ :root { --la-sprungrand: 88px; } .la-body [id] { scroll-margin-top: var(--la-sprungrand); } body { margin: 0; background: var(--cab-bg); color: var(--cab-vg); font-family: var(--cab-schrift); /* IN rem, NICHT IN px. Ueberschriften, Lead und Kleintext rechnen durchgehend relativ (37 von 38 font-size-Angaben der la-Schicht); der Fliesstext war als einziger festgenagelt. Wer seine Browser-Grundschrift auf 20 px stellt, bekam damit eine H1 von 65 px, ein Kleingedrucktes von 17,5 px, AGB-Text von 20 px - und einen Startseiten-Fliesstext, der bei 16 px stehen blieb. Das Kleingedruckte wurde groesser als der Haupttext. */ font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--cab-akzent-tinte); } /* ===================================================================== * cab-Schicht: Kundenseiten im App-Stil (eine Spalte, ruhig) * ===================================================================== */ .cab-huelle { max-width: 560px; margin: 0 auto; padding: 0 20px calc(32px + env(safe-area-inset-bottom)); } .cab-kopf { display: flex; align-items: center; gap: 12px; padding: 18px 0 10px; min-height: 60px; } .cab-kopf h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; } .cab-zurueck { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; border: 0; border-radius: 50%; background: none; color: var(--cab-vg); font-size: 22px; cursor: pointer; } .cab-zurueck:hover { background: var(--cab-flaeche); } .cab-titel { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 6px; } .cab-untertitel { font-size: 15px; color: var(--cab-sekundaer); margin: 0 0 20px; } .cab-sekundaer { color: var(--cab-sekundaer); } .cab-klein { font-size: 13px; } .cab-karte { background: var(--cab-karte-bg); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); padding: 4px 16px; box-shadow: var(--cab-schatten); } .cab-zeile { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid var(--cab-linie); background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .cab-zeile:last-child { border-bottom: 0; } .cab-zeile:hover { background: transparent; } .cab-zeile:hover .cab-zeile__titel { color: var(--cab-akzent); } .cab-zeile__text { flex: 1; min-width: 0; display: block; } .cab-zeile__titel { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; transition: color .12s; } .cab-zeile__wert { display: block; font-size: 13.5px; line-height: 1.45; color: var(--cab-sekundaer); } .cab-zeile__pfeil { color: var(--cab-sekundaer); flex-shrink: 0; font-size: 20px; } .cab-zeile[style*="cursor:default"]:hover .cab-zeile__titel { color: inherit; } /* --- Formularfelder --- */ .cab-feld-gruppe { margin-bottom: 15px; } .cab-label { display: block; margin-bottom: 7px; font-size: 13.5px; font-weight: 600; } .cab-feld { width: 100%; padding: 14px 15px; border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-button); background: var(--cab-karte-bg); color: var(--cab-vg); font-family: inherit; font-size: 16px; /* unter 16px zoomt iOS beim Fokus hinein */ transition: border-color .12s, box-shadow .12s; } .cab-feld::placeholder { color: var(--cab-sekundaer); opacity: .7; } .cab-feld:focus { outline: none; border-color: var(--cab-akzent); box-shadow: 0 0 0 3px var(--cab-akzent-tinte); } .cab-feld:disabled { color: var(--cab-sekundaer); background: var(--cab-flaeche); } select.cab-feld { appearance: auto; } textarea.cab-feld { resize: vertical; min-height: 80px; } .cab-feld--code { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: 10px; } /* --- Knoepfe der cab-Schicht (App-Identitaet: Schwarz/Weiss) --- */ .cab-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 54px; padding: 0 20px; border: 0; border-radius: var(--cab-radius-button); background: var(--cab-vg); color: var(--cab-bg); font-family: inherit; font-size: 16.5px; font-weight: 600; cursor: pointer; transition: opacity .12s, transform .06s; } a.cab-btn { text-decoration: none; } .cab-btn:hover { opacity: .9; } .cab-btn:active { transform: scale(.99); } .cab-btn:disabled { opacity: .38; cursor: default; } .cab-btn--text { min-height: 44px; background: none; color: var(--cab-vg); font-size: 15px; } .cab-btn--text:hover { opacity: 1; background: var(--cab-flaeche); } .cab-btn--gefahr { color: var(--cab-fehler); } /* --- Hinweise --- */ .cab-hinweis { display: flex; gap: 10px; padding: 13px 15px; border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-button); background: var(--cab-karte-bg); font-size: 13.5px; line-height: 1.55; box-shadow: var(--cab-schatten); } .cab-hinweis--fehler { border-color: transparent; color: var(--cab-fehler); background: var(--cab-fehler-tinte); box-shadow: none; } /* Wurde in mehreren Verwaltungsseiten benutzt, gab es aber nie - "Gespeichert." sah dadurch aus wie ein beliebiger Hinweis. Bei einer Meldung, die nur nach einer Aenderung erscheint, ist die Farbe die halbe Information. */ .cab-hinweis--ok { border-color: transparent; color: var(--cab-erfolg); background: var(--cab-erfolg-tinte); box-shadow: none; } .cab-geprueft { color: var(--cab-erfolg); font-weight: 700; } .cab-versteckt { display: none !important; } /* ===================================================================== * Anmeldeseiten: geteilter Schirm - Markenseite links, Formular rechts * ===================================================================== */ .auth { display: flex; min-height: 100vh; min-height: 100dvh; } .auth__marke { display: none; flex: 1; position: relative; background: radial-gradient(1000px 600px at 15% -10%, rgba(10, 150, 200, .25), transparent 55%), radial-gradient(900px 700px at 110% 110%, rgba(8, 124, 169, .30), transparent 55%), #0d1b24; color: #eef6fa; padding: 48px; flex-direction: column; justify-content: space-between; } @media (min-width: 900px) { .auth__marke { display: flex; } } .auth__logo { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; } .auth__claim { max-width: 420px; } .auth__claim h2 { font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 14px; } .auth__claim p { font-size: 15.5px; line-height: 1.65; color: rgba(238, 246, 250, .75); margin: 0; } .auth__fuss { font-size: 13px; color: rgba(238, 246, 250, .5); } .auth__seite { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 20px; } .auth__karte { width: 100%; max-width: 400px; } .auth__karte h1 { font-size: 26px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; } .auth__karte > p { color: var(--cab-sekundaer); font-size: 14.5px; margin: 0 0 26px; } /* Cably-Wortmarke: das echte Logo von cably.de (bilder/logo*.png). Zwei nebeneinander, das Thema entscheidet, welches sichtbar ist - dasselbe Muster wie beim Sonne/Mond-Umschalter. */ .cab-wortmarke { display: inline-flex; align-items: center; } .cab-wortmarke img { display: block; height: 34px; width: auto; } .cab-wortmarke--gross img { height: 42px; } .cab-wortmarke__dunkel { display: none !important; } :root[data-theme="dark"] .cab-wortmarke__hell { display: none !important; } :root[data-theme="dark"] .cab-wortmarke__dunkel { display: block !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cab-wortmarke__hell { display: none !important; } :root:not([data-theme="light"]) .cab-wortmarke__dunkel { display: block !important; } } /* Quadratisches Zeichen (bilder/icon.png) */ .cab-zeichen { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; object-fit: contain; background: #fff; padding: 5px; border: 1px solid var(--cab-linie); } /* Vorrangiger Knopf im Auth-Kontext: Akzent statt Schwarz */ .auth .cab-btn { background: var(--cab-akzent); color: #fff; } .auth .cab-btn:hover { background: var(--cab-akzent-hell); opacity: 1; } .auth .cab-btn--text { background: none; color: var(--cab-vg); } .auth .cab-btn--text:hover { background: var(--cab-flaeche); } /* ===================================================================== * pt-Schicht: das Portal * ===================================================================== */ .pt-huelle { display: flex; min-height: 100vh; min-height: 100dvh; } /* --- Seitenleiste -------------------------------------------------- */ .pt-seite { display: flex; flex-direction: column; flex-shrink: 0; width: 252px; border-right: 1px solid var(--cab-linie); background: var(--cab-karte-bg); position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 40; } .pt-marke { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; color: var(--cab-vg); text-decoration: none; } .pt-marke__text { min-width: 0; line-height: 1.25; } .pt-marke__text b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; } .pt-marke__text small { display: block; font-size: 12px; font-weight: 500; color: var(--cab-sekundaer); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-navi { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 6px 12px 12px; } .pt-navi a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: var(--cab-sekundaer); font-size: 14px; font-weight: 500; text-decoration: none; transition: background .1s, color .1s; } .pt-navi a svg { flex-shrink: 0; opacity: .85; } .pt-navi a:hover { background: var(--cab-flaeche); color: var(--cab-vg); } .pt-navi a.aktiv { background: var(--cab-akzent-tinte); color: var(--cab-akzent); font-weight: 600; } :root[data-theme="dark"] .pt-navi a.aktiv { color: var(--cab-akzent-hell); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-navi a.aktiv { color: var(--cab-akzent-hell); } } /* Gruppe im Menue: Ueberschrift zum Auf- und Zuklappen.

statt eigener Klapp-Mechanik - das kann der Browser von sich aus, auch ohne JavaScript und mit der Tastatur. */ .pt-navi__block { margin-top: 6px; } .pt-navi__block:first-of-type { margin-top: 2px; } .pt-navi__gruppe { display: flex; align-items: center; gap: 7px; padding: 14px 11px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cab-sekundaer); opacity: .85; cursor: pointer; list-style: none; user-select: none; } .pt-navi__gruppe::-webkit-details-marker { display: none; } .pt-navi__gruppe:hover { opacity: 1; color: var(--cab-vg); } .pt-navi__gruppe:focus-visible { outline: 2px solid var(--cab-akzent); outline-offset: 2px; border-radius: 6px; } .pt-navi__winkel { flex-shrink: 0; opacity: .7; transition: transform .15s ease; } .pt-navi__block[open] > .pt-navi__gruppe .pt-navi__winkel { transform: rotate(90deg); } /* Zaehler an einem Navigationspunkt: wie viel liegt dort zur Bearbeitung */ .pt-navi__zahl { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cab-fehler); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } /* Summe der Gruppe - nur sichtbar, solange sie zugeklappt ist. Sonst staende dieselbe Zahl zweimal untereinander. */ .pt-navi__zahl--gruppe { height: 18px; min-width: 18px; font-size: 10.5px; } .pt-navi__block[open] > .pt-navi__gruppe .pt-navi__zahl--gruppe { display: none; } /* Wer ist angemeldet - und mit welcher Rolle */ .pt-seite__wer { display: flex; align-items: center; gap: 8px; padding: 0 18px 8px; min-width: 0; } .pt-seite__wer .pt-status { font-size: 11px; padding: 2px 9px 2px 7px; } .pt-seite__wer small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Fusszeile der Leiste: Thema + Abmelden */ .pt-seite__fuss { padding: 12px; border-top: 1px solid var(--cab-linie); display: flex; flex-direction: column; gap: 2px; } .pt-seite__fuss button, .pt-seite__fuss a { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 0; border-radius: 10px; background: none; color: var(--cab-sekundaer); font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; } .pt-seite__fuss button:hover, .pt-seite__fuss a:hover { background: var(--cab-flaeche); color: var(--cab-vg); } /* --- Inhaltsbereich ------------------------------------------------- */ .pt-inhalt { flex: 1; min-width: 0; background: var(--cab-bg); } .pt-kopf { display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 30; padding: 0 28px; min-height: 66px; border-bottom: 1px solid var(--cab-linie); background: color-mix(in srgb, var(--cab-bg) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pt-kopf h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-koerper { padding: 26px 28px 64px; } /* Suchfeld im Kopf - steht auf JEDER Seite. Die Lupe sitzt im Feld, damit klar ist, was das Feld tut, ohne dass ein Wort daneben Platz kostet. */ .pt-kopf__suche { position: relative; display: flex; align-items: center; flex: 0 1 260px; min-width: 0; margin: 0 10px 0 0; } .pt-kopf__suche svg { position: absolute; left: 11px; color: var(--cab-sekundaer); opacity: .8; pointer-events: none; } .pt-kopf__suche .pt-suche { width: 100%; min-width: 0; padding-left: 36px; } /* Hamburger - erscheint nur auf schmalen Schirmen */ .pt-burger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: -8px; border: 0; border-radius: 10px; background: none; color: var(--cab-vg); cursor: pointer; } .pt-burger:hover { background: var(--cab-flaeche); } .pt-schleier { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(10, 12, 16, .5); } /* --- Block: Karte mit Kopfzeile -------------------------------------- */ .pt-block { border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); background: var(--cab-karte-bg); box-shadow: var(--cab-schatten); overflow: hidden; margin-bottom: 22px; } .pt-block__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 15px 20px; border-bottom: 1px solid var(--cab-linie); } .pt-block__titel { font-size: 15.5px; font-weight: 700; margin: 0; letter-spacing: -.005em; } .pt-block__leer { padding: 52px 24px; color: var(--cab-sekundaer); font-size: 14.5px; line-height: 1.7; text-align: center; } /* Filterzeile ueber einer Tabelle. Umbricht auf schmalen Geraeten, statt die Felder zusammenzuquetschen - ein Datumsfeld mit 60 px Breite ist auf dem Handy nicht mehr bedienbar. */ .pt-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 15px 20px; } .pt-filter .pt-suche { min-width: 132px; } /* Steckbrief: Beschriftung links, Wert rechts. Fuer Akten und Detail- ansichten, in denen eine Tabelle falsch waere - es ist EIN Datensatz, keine Liste. Auf schmalen Geraeten uebereinander, weil eine Beschriftung in 90 px Breite sonst dreizeilig umbricht. */ .pt-daten { padding: 4px 0; } .pt-daten__zeile { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 11px 20px; font-size: 14.5px; line-height: 1.6; border-bottom: 1px solid var(--cab-linie); } .pt-daten__zeile:last-child { border-bottom: 0; } .pt-daten__zeile > span:first-child { color: var(--cab-sekundaer); } .pt-daten__zeile > span:last-child { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 640px) { .pt-daten__zeile { grid-template-columns: 1fr; gap: 2px; } } /* --- Tabelle --------------------------------------------------------- */ .pt-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; } .pt-tabelle th { padding: 11px 20px; border-bottom: 1px solid var(--cab-linie); background: var(--cab-flaeche); color: var(--cab-sekundaer); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; } .pt-tabelle td { padding: 14px 20px; border-bottom: 1px solid var(--cab-linie); vertical-align: middle; } .pt-tabelle tr:last-child td { border-bottom: 0; } .pt-tabelle tbody tr { transition: background .1s; } .pt-tabelle tbody tr:hover { background: var(--cab-flaeche); } .pt-tabelle .pt-haupt { font-weight: 600; } .pt-tabelle .pt-neben { color: var(--cab-sekundaer); font-size: 13px; } .pt-tabelle .pt-rechts { text-align: right; white-space: nowrap; } .pt-tabelle-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Zwei Haelften einer Karte - links die Datei, rechts die Entscheidung. Stand als Inline-Angabe in der Unterlagen-Pruefung; dort liess sich die Trennlinie fuer das Telefon nicht umstellen, weil ein style-Attribut von keiner Regel mehr eingeholt wird. */ .pt-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; } .pt-paar__links { padding: 16px 20px; border-right: 1px solid var(--cab-linie); } .pt-paar__rechts { padding: 16px 20px; } /* Eine Tabelle darf auf dem Telefon SCHIEBEN, nicht quetschen: Sechs Spalten auf 360 px ergeben sonst dreizeilige Zellen, in denen man die Zeile verliert. Der zweite Wahlschalter faengt die Tabellen ab, die ohne Huelle direkt im Block stehen - lieber hier eine Regel als in zwanzig Dateien ein zusaetzliches div. */ @media (max-width: 720px) { /* Bewusst OHNE :has() - die Regel muss auch in aelteren Browsern greifen, sonst schneidet der Block (overflow:hidden) die Tabelle ab, statt sie schiebbar zu machen. Das waere schlimmer als eng. */ .pt-block { overflow-x: auto; } .pt-tabelle { min-width: 560px; } .pt-tabelle th { padding: 10px 14px; } .pt-tabelle td { padding: 12px 14px; } /* Zweispaltig nebeneinander, einspaltig untereinander: Die Trennlinie muss mitwandern, sonst laufen Vorschau und Entscheidung auf dem Telefon ohne Kante ineinander. */ .pt-paar__links { border-right: 0; border-bottom: 1px solid var(--cab-linie); } } /* --- Status: Punkt + Wort -------------------------------------------- */ .pt-status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--cab-flaeche); color: var(--cab-sekundaer); } .pt-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .pt-status--gruen { background: var(--cab-erfolg-tinte); color: var(--cab-erfolg); } .pt-status--rot { background: var(--cab-fehler-tinte); color: var(--cab-fehler); } .pt-status--gelb { background: var(--cab-warnung-tinte); color: var(--cab-warnung); } .pt-status--grau { background: var(--cab-flaeche); color: var(--cab-sekundaer); } /* --- Knoepfe --------------------------------------------------------- */ .pt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; background: var(--cab-akzent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); } .pt-btn:hover { background: var(--cab-akzent-hell); } .pt-btn:active { transform: scale(.98); } .pt-btn--leer { background: var(--cab-karte-bg); border-color: var(--cab-linie-stark); color: var(--cab-vg); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); } .pt-btn--leer:hover { background: var(--cab-flaeche); border-color: var(--cab-linie-stark); } .pt-btn--klein { min-height: 33px; padding: 0 12px; font-size: 13px; border-radius: 9px; } .pt-btn--gefahr { background: none; border-color: transparent; color: var(--cab-fehler); box-shadow: none; } .pt-btn--gefahr:hover { background: var(--cab-fehler-tinte); } /* --- Suchfeld -------------------------------------------------------- */ .pt-suche { min-width: 220px; padding: 9px 14px; border: 1px solid var(--cab-linie); border-radius: 10px; background: var(--cab-karte-bg); color: var(--cab-vg); font: inherit; font-size: 13.5px; transition: border-color .12s, box-shadow .12s; } .pt-suche:focus { outline: none; border-color: var(--cab-akzent); box-shadow: 0 0 0 3px var(--cab-akzent-tinte); } .pt-suche::placeholder { color: var(--cab-sekundaer); opacity: .7; } /* --- Reiter ---------------------------------------------------------- */ .pt-reiter { display: flex; gap: 22px; overflow-x: auto; padding: 0 28px; border-bottom: 1px solid var(--cab-linie); background: var(--cab-karte-bg); } .pt-reiter a { padding: 13px 2px; border-bottom: 2px solid transparent; color: var(--cab-sekundaer); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .1s; } .pt-reiter a:hover { color: var(--cab-vg); } .pt-reiter a.aktiv { color: var(--cab-akzent); border-bottom-color: var(--cab-akzent); } /* --- Fahrerbild ------------------------------------------------------ */ .pt-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--cab-flaeche); flex-shrink: 0; } .pt-avatar--gross { width: 76px; height: 76px; } .pt-avatar--leer { display: inline-flex; align-items: center; justify-content: center; background: var(--cab-akzent-tinte); color: var(--cab-akzent); font-size: 12.5px; font-weight: 700; } .pt-avatar--gross.pt-avatar--leer { font-size: 24px; } .pt-name { color: var(--cab-akzent); font-weight: 600; text-decoration: none; } .pt-name:hover { text-decoration: underline; } :root[data-theme="dark"] .pt-name { color: var(--cab-akzent-hell); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-name { color: var(--cab-akzent-hell); } } /* --- Dialog ---------------------------------------------------------- */ .pt-dialog { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--cab-linie); border-radius: 18px; background: var(--cab-dialog); color: var(--cab-vg); box-shadow: var(--cab-schatten-dialog); } .pt-dialog[open] { animation: pt-dialog-auf .18s ease-out; } .pt-dialog::backdrop { background: rgba(8, 10, 14, .55); backdrop-filter: blur(3px); animation: pt-schleier-auf .18s ease-out; } @keyframes pt-dialog-auf { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes pt-schleier-auf { from { opacity: 0; } to { opacity: 1; } } .pt-dialog__inhalt { padding: 26px 26px 22px; } .pt-dialog h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; } .pt-dialog__text { margin: 0 0 18px; font-size: 14px; color: var(--cab-sekundaer); line-height: 1.6; } .pt-dialog__fuss { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--cab-linie); } /* Felder heben sich vom Dialog ab, nicht von der Seite */ .pt-dialog .cab-feld { background: var(--cab-dialog-feld); border-color: var(--cab-linie); } .pt-dialog .cab-feld:focus { border-color: var(--cab-akzent); } .pt-dialog .cab-hinweis { background: var(--cab-dialog-feld); box-shadow: none; } .pt-dialog .cab-hinweis--fehler { background: var(--cab-fehler-tinte); } /* --- Assistent: Schritte im Dialog ----------------------------------- */ .pt-schritt { display: none; } .pt-schritt.aktiv { display: block; animation: pt-schritt-auf .16s ease-out; } @keyframes pt-schritt-auf { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } } .pt-schritt__zaehler { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--cab-akzent-tinte); color: var(--cab-akzent); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } :root[data-theme="dark"] .pt-schritt__zaehler { color: var(--cab-akzent-hell); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pt-schritt__zaehler { color: var(--cab-akzent-hell); } } /* --- Dateiwahl -------------------------------------------------------- */ .pt-hoch { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px dashed var(--cab-linie-stark); border-radius: 12px; background: var(--cab-dialog-feld); margin-bottom: 10px; cursor: pointer; transition: border-color .12s, background .12s; } .pt-hoch:hover { border-color: var(--cab-akzent); } .pt-hoch__text { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; } .pt-hoch__text small { display: block; font-weight: 400; font-size: 12.5px; color: var(--cab-sekundaer); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-hoch input[type=file] { display: none; } /* --- Auswahlliste (vorhandene Fahrer/Fahrzeuge) ----------------------- */ .pt-wahl { max-height: 250px; overflow-y: auto; border: 1px solid var(--cab-linie); border-radius: 12px; background: var(--cab-dialog-feld); } .pt-wahl button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; border: 0; border-bottom: 1px solid var(--cab-linie); background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .pt-wahl button:last-child { border-bottom: 0; } .pt-wahl button:hover { background: var(--cab-akzent-tinte); } .pt-wahl__leer { padding: 16px; color: var(--cab-sekundaer); font-size: 13.5px; text-align: center; } .pt-pruef { display: flex; gap: 18px; align-items: center; padding: 6px 0 2px; } .pt-pruef ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.75; } /* --- Kennzahlen ------------------------------------------------------- */ .pt-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; } .pt-zahl { padding: 18px 20px; border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); background: var(--cab-karte-bg); box-shadow: var(--cab-schatten); } .pt-zahl b { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } .pt-zahl span { font-size: 13px; color: var(--cab-sekundaer); } /* --- "Was wartet auf mich" -------------------------------------------- Die erste Zeile der Uebersicht. Keine Kennzahl, sondern ein Stapel Arbeit: jede Kachel fuehrt genau dorthin, wo man sie abarbeitet. Deshalb sind es Links und keine Kaesten. */ .pt-warten { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 22px; } .pt-warten__kachel { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); background: var(--cab-karte-bg); box-shadow: var(--cab-schatten); color: inherit; text-decoration: none; transition: border-color .12s, transform .06s; } .pt-warten__kachel:hover { border-color: var(--cab-linie-stark); } .pt-warten__kachel:active { transform: scale(.995); } .pt-warten__zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; flex-shrink: 0; border-radius: 12px; background: var(--cab-flaeche); color: var(--cab-sekundaer); font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .pt-warten__kachel--offen .pt-warten__zahl { background: var(--cab-warnung-tinte); color: var(--cab-warnung); } .pt-warten__text { min-width: 0; line-height: 1.35; } .pt-warten__text b { display: block; font-size: 14px; font-weight: 600; } .pt-warten__text span { display: block; font-size: 12.5px; color: var(--cab-sekundaer); } /* --- Aufgabenliste (Einrichtung Schritt fuer Schritt) ------------------ */ .pt-aufgabe { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-bottom: 1px solid var(--cab-linie); color: inherit; text-decoration: none; transition: background .1s; } .pt-aufgabe:last-child { border-bottom: 0; } a.pt-aufgabe:hover { background: var(--cab-flaeche); } .pt-aufgabe__nr { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--cab-akzent-tinte); color: var(--cab-akzent); font-size: 13.5px; font-weight: 700; } .pt-aufgabe--fertig .pt-aufgabe__nr { background: var(--cab-erfolg-tinte); color: var(--cab-erfolg); } .pt-aufgabe__text { flex: 1; min-width: 0; } .pt-aufgabe__text b { display: block; font-size: 14.5px; font-weight: 600; } .pt-aufgabe__text span { display: block; font-size: 13px; color: var(--cab-sekundaer); } .pt-aufgabe--fertig .pt-aufgabe__text b { text-decoration: line-through; opacity: .6; } /* --- Schmale Schirme -------------------------------------------------- */ @media (max-width: 900px) { .pt-seite { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--cab-schatten-dialog); } .navi-offen .pt-seite { transform: none; } .navi-offen .pt-schleier { display: block; } .pt-burger { display: inline-flex; } .pt-kopf { padding: 0 16px; gap: 10px; } .pt-koerper { padding: 18px 16px 56px; } .pt-reiter { padding: 0 16px; } .pt-kopf__suche { flex: 0 1 210px; } } /* Ganz schmal: Der Seitentitel darf schrumpfen, das Suchfeld nicht verschwinden - es ist der schnellste Weg zu einem Anrufer. */ @media (max-width: 560px) { .pt-kopf h1 { font-size: 17px; } .pt-kopf__suche { flex: 1 1 108px; margin-right: 6px; } .pt-kopf__suche .pt-suche { font-size: 16px; } /* iOS zoomt sonst beim Tippen */ } /* ===================================================================== * FORMULARSCHICHT DER VERWALTUNG * ===================================================================== * * Warum es das gibt: Bis hierher endete das Gestaltungssystem bei * `.cab-feld`. Kontrollkästchen, Schalter und Auswahlfelder hatten GAR * KEINE Regel — `select` stand sogar ausdrücklich auf `appearance: auto`. * Deshalb sah jede Einstellungsseite aus wie ein Formular von 1999: blaue * Systemkästchen, Systempfeile, und die Einheit („%", „€") als loser Text * neben dem Feld. Zusammengehalten wurde das mit `style="max-width:80px"` * an jedem einzelnen Feld. * * Ab hier gilt: Eine Einstellungszeile wird NICHT mehr von Hand gebaut. * Es gibt `.pt-feld`, und die Bausteine in cab-admin-bausteine.php geben * das Markup vor. Wer hier ein `style="…"` in eine Seite schreibt, hat * einen Baustein übersehen. * * Größen sind für die MAUS gemacht (36 px hohe Bedienelemente), nicht für * den Daumen — das ist der Unterschied zur `.cab-`Schicht der App, wo * 54 px richtig sind. Auf schmalen Geräten wachsen sie unten wieder. * ===================================================================== */ :root { /* Der Fokusring. „Kein Bedienelement ohne sichtbaren Fokus" braucht eine Marke, sonst erfindet ihn jede Stelle neu. */ --pt-fokus: var(--cab-akzent); --pt-fokus-ring: 0 0 0 3px var(--cab-akzent-tinte); /* Einheitliche Höhe für Feld, Auswahl und Knopf. Verschiedene Höhen nebeneinander in einer Zeile sind der häufigste Grund, warum ein Formular unaufgeräumt wirkt, ohne dass man sagen kann warum. */ --pt-hoehe: 36px; --pt-hoehe-klein: 30px; --pt-radius: 9px; /* Z-Leiter. Vier Dinge kleben oder überlagern gleichzeitig; ohne feste Reihenfolge gewinnt das zuletzt geschriebene. */ --pt-z-tabellenkopf: 10; --pt-z-kopf: 20; --pt-z-navi: 30; --pt-z-schleier: 40; --pt-z-blatt: 50; --pt-z-dialog: 60; --pt-z-meldung: 70; } /* Ziffern, die untereinander stehen sollen: Beträge, Prozente, Uhrzeiten. Ohne tabular-nums tanzen Spaltenwerte um bis zu einem halben Zeichen. */ .pt-zahl, .pt-zahlen, .pt-eingabe--zahl, .pt-tabelle td.pt-zahl { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --------------------------------------------------------------------- * Die Einstellungszeile * ------------------------------------------------------------------- */ /* DAS MASS. * * Hier lag der Grund, warum jede Einstellungsseite „hingeschmissen" * aussah: .pt-block hatte keine Breitenbegrenzung, und die zweite * Rasterspalte war 1fr. Auf einem 2000px-Monitor wurde daraus eine * 1400px breite Spalte für ein 80px schmales Zahlenfeld — der Inhalt * klebte links, rechts stand eine tote Flaeche ueber die halbe Breite, * und die Satzfragmente zwischen den Feldern („10 % unter bis 20 %“) * rissen ueber diese Distanz auseinander. * * Ein Formular braucht ein MASS, keinen Bildschirm. Karten, die * Einstellungszeilen enthalten, werden deshalb begrenzt — Karten mit * Tabellen bleiben unberuehrt, die brauchen die Breite wirklich. * :has() statt einer neuen Klasse, damit an den ~25 Seiten und ihren * Aufrufen NICHTS geaendert werden muss. */ .pt-block:has(.pt-feld) { max-width: 940px; } .pt-feld { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 28px; align-items: start; /* Gleicher Rhythmus fuer jede Zeile. Vorher ergab sich die Hoehe * allein aus dem Inhalt: Eine Zeile mit Schalter war 56px hoch, eine * mit dreizeiligem Hilfetext 140px — untereinander sah das aus wie * verschiedene Bausteine, nicht wie eine Liste. */ min-height: 64px; padding: 18px 20px; border-top: 1px solid var(--cab-linie); } .pt-feld:first-child { border-top: 0; } .pt-feld__label { padding-top: 8px; color: var(--cab-sekundaer); font-size: 13.5px; font-weight: 500; line-height: 1.4; } /* Pflichtfeld: der Stern gehört an das Label, nicht in den Hilfetext. */ .pt-feld__label[data-pflicht]::after { content: " *"; color: var(--cab-fehler); font-weight: 600; } .pt-feld__eingabe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } /* Hilfetext steht UNTER dem Bedienelement, in dessen Spalte — nicht unter dem Label. Er erklärt die Eingabe, nicht die Beschriftung. */ .pt-feld__hilfe { grid-column: 2; max-width: 62ch; margin-top: 2px; color: var(--cab-sekundaer); font-size: 12.5px; line-height: 1.5; } .pt-feld__fehler { grid-column: 2; margin-top: 2px; color: var(--cab-fehler); font-size: 12.5px; font-weight: 500; line-height: 1.5; } /* Über die volle Breite — für Textfelder und Tabellen in einer Zeile. */ .pt-feld--breit { grid-template-columns: minmax(0, 1fr); } .pt-feld--breit .pt-feld__label { padding-top: 0; margin-bottom: 4px; } .pt-feld--breit .pt-feld__hilfe, .pt-feld--breit .pt-feld__fehler { grid-column: 1; } /* --------------------------------------------------------------------- * Eingabefeld * ------------------------------------------------------------------- */ .pt-eingabe { height: var(--pt-hoehe); min-width: 0; padding: 0 11px; border: 1px solid var(--cab-linie-stark); border-radius: var(--pt-radius); background: var(--cab-karte-bg); color: var(--cab-vg); font-family: inherit; font-size: 14px; line-height: normal; transition: border-color .12s, box-shadow .12s; } .pt-eingabe::placeholder { color: var(--cab-sekundaer); opacity: .75; } .pt-eingabe:hover:not(:disabled):not(:focus) { border-color: var(--cab-sekundaer); } .pt-eingabe:focus-visible, .pt-eingabe:focus { outline: none; border-color: var(--pt-fokus); box-shadow: var(--pt-fokus-ring); } .pt-eingabe:disabled { background: var(--cab-flaeche); color: var(--cab-sekundaer); cursor: not-allowed; } .pt-eingabe[aria-invalid="true"] { border-color: var(--cab-fehler); } .pt-eingabe[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--cab-fehler-tinte); } textarea.pt-eingabe { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.55; resize: vertical; } /* Breiten als Klasse, nicht als style-Attribut an jedem Feld. */ .pt-eingabe--2 { width: 62px; } /* 2 Stellen: 10, 20 */ .pt-eingabe--4 { width: 88px; } /* Beträge bis 9999 */ .pt-eingabe--6 { width: 124px; } .pt-eingabe--voll { width: 100%; } .pt-eingabe--zahl { text-align: right; } /* --------------------------------------------------------------------- * Feld mit Einheit — „20 %", „25 €" * * Die Einheit gehört AN das Feld, nicht daneben. Als loser Text hinter dem * Eingabefeld bezieht sie sich optisch auf nichts und bricht bei schmalen * Fenstern in die nächste Zeile, wo sie dann vor dem nächsten Feld steht. * ------------------------------------------------------------------- */ .pt-mit-einheit { display: inline-flex; align-items: stretch; border: 1px solid var(--cab-linie-stark); border-radius: var(--pt-radius); background: var(--cab-karte-bg); transition: border-color .12s, box-shadow .12s; } .pt-mit-einheit:hover:not(:focus-within) { border-color: var(--cab-sekundaer); } .pt-mit-einheit:focus-within { border-color: var(--pt-fokus); box-shadow: var(--pt-fokus-ring); } .pt-mit-einheit .pt-eingabe { border: 0; background: none; border-radius: var(--pt-radius) 0 0 var(--pt-radius); } .pt-mit-einheit .pt-eingabe:focus { box-shadow: none; } .pt-einheit { display: inline-flex; align-items: center; padding: 0 10px; border-left: 1px solid var(--cab-linie); background: var(--cab-flaeche); border-radius: 0 var(--pt-radius) var(--pt-radius) 0; color: var(--cab-sekundaer); font-size: 13px; font-weight: 500; white-space: nowrap; } /* Verbindungstext zwischen zwei Feldern („unter bis", „höchstens"). */ .pt-zwischen { color: var(--cab-sekundaer); font-size: 13.5px; white-space: nowrap; } /* --------------------------------------------------------------------- * Auswahlfeld * * Eigener Pfeil statt des Systempfeils: Der Systempfeil ist auf jedem * Betriebssystem anders groß, anders platziert und ignoriert das dunkle * Thema — er war der auffälligste Fremdkörper auf den Einstellungsseiten. * ------------------------------------------------------------------- */ .pt-auswahl { height: var(--pt-hoehe); max-width: 100%; padding: 0 32px 0 11px; border: 1px solid var(--cab-linie-stark); border-radius: var(--pt-radius); background-color: var(--cab-karte-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; color: var(--cab-vg); font-family: inherit; font-size: 14px; appearance: none; cursor: pointer; transition: border-color .12s, box-shadow .12s; } :root[data-theme="dark"] .pt-auswahl, :root:not([data-theme="light"]) .pt-auswahl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2399a0ac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .pt-auswahl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E"); } } .pt-auswahl:hover:not(:disabled):not(:focus) { border-color: var(--cab-sekundaer); } .pt-auswahl:focus-visible, .pt-auswahl:focus { outline: none; border-color: var(--pt-fokus); box-shadow: var(--pt-fokus-ring); } .pt-auswahl:disabled { background-color: var(--cab-flaeche); color: var(--cab-sekundaer); cursor: not-allowed; } /* Die Liste selbst kommt vom System — wenigstens die Farben stimmen dann. */ .pt-auswahl option { background: var(--cab-karte-bg); color: var(--cab-vg); } /* --------------------------------------------------------------------- * Schalter (an/aus) * * Ersetzt das Kontrollkästchen überall dort, wo etwas EINGESCHALTET wird — * also bei fast jeder Einstellung. Ein Kästchen sagt „ausgewählt", ein * Schalter sagt „in Betrieb"; auf einer Einstellungsseite ist fast immer * das zweite gemeint. * ------------------------------------------------------------------- */ .pt-schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .pt-schalter input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pt-schalter__spur { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--cab-linie-stark); transition: background-color .16s ease; } .pt-schalter__spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform .16s ease; } .pt-schalter input:checked + .pt-schalter__spur { background: var(--cab-akzent); } .pt-schalter input:checked + .pt-schalter__spur::after { transform: translateX(16px); } .pt-schalter input:focus-visible + .pt-schalter__spur { box-shadow: var(--pt-fokus-ring); } .pt-schalter input:disabled + .pt-schalter__spur { opacity: .45; } .pt-schalter:has(input:disabled) { cursor: not-allowed; } .pt-schalter__text { font-size: 13.5px; } /* Der Zustand steht daneben, damit man ihn LESEN kann und nicht nur sieht. */ .pt-schalter__zustand { color: var(--cab-sekundaer); font-size: 13.5px; } .pt-schalter input:checked ~ .pt-schalter__zustand { color: var(--cab-vg); } /* --------------------------------------------------------------------- * Kontrollkästchen — für „mehrere davon auswählen", nicht für an/aus * ------------------------------------------------------------------- */ .pt-haken { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13.5px; } .pt-haken input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .pt-haken__kaestchen { position: relative; flex: none; width: 17px; height: 17px; border: 1.5px solid var(--cab-linie-stark); border-radius: 5px; background: var(--cab-karte-bg); transition: background-color .12s, border-color .12s; } .pt-haken__kaestchen::after { content: ""; position: absolute; top: 1.5px; left: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s ease; } .pt-haken input:checked + .pt-haken__kaestchen { background: var(--cab-akzent); border-color: var(--cab-akzent); } .pt-haken input:checked + .pt-haken__kaestchen::after { transform: rotate(45deg) scale(1); } .pt-haken input:focus-visible + .pt-haken__kaestchen { box-shadow: var(--pt-fokus-ring); } .pt-haken input:disabled + .pt-haken__kaestchen { opacity: .45; } /* --------------------------------------------------------------------- * Knopf * * Fehlte als Baustein komplett, obwohl auf jeder Seite einer steht. Die * Folge: `.cab-btn` (54 px hoch, volle Breite — für die App gemacht) stand * mitten in Verwaltungsformularen. * ------------------------------------------------------------------- */ .pt-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--pt-hoehe); padding: 0 14px; border: 1px solid transparent; border-radius: var(--pt-radius); background: var(--cab-akzent); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .12s, border-color .12s, opacity .12s; } .pt-knopf:hover { background: var(--cab-akzent-hell); } .pt-knopf:active { transform: translateY(.5px); } .pt-knopf:focus-visible { outline: none; box-shadow: var(--pt-fokus-ring); } /* Zweite Wahl: gleiche Größe, weniger Gewicht. */ .pt-knopf--zweit { background: var(--cab-karte-bg); border-color: var(--cab-linie-stark); color: var(--cab-vg); } .pt-knopf--zweit:hover { background: var(--cab-flaeche); border-color: var(--cab-sekundaer); } /* Still: nur Text, für Nebenwege („Abbrechen"). */ .pt-knopf--still { background: none; color: var(--cab-sekundaer); } .pt-knopf--still:hover { background: var(--cab-flaeche); color: var(--cab-vg); } /* Gefahr: löschen, sperren, stornieren. */ .pt-knopf--gefahr { background: var(--cab-fehler); } .pt-knopf--gefahr:hover { background: var(--cab-fehler); filter: brightness(1.08); } .pt-knopf--klein { height: var(--pt-hoehe-klein); padding: 0 10px; font-size: 12.5px; } .pt-knopf--voll { width: 100%; } /* Ausgeschaltet. Der Grund gehört ins title-Attribut — ein grauer Knopf ohne Erklärung ist eine Sackgasse, und genau danach wird angerufen. */ .pt-knopf:disabled, .pt-knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* Lädt: der Knopf bleibt stehen und dreht, statt zu verschwinden. */ .pt-knopf[data-laedt]::before { content: ""; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pt-dreht .6s linear infinite; } @keyframes pt-dreht { to { transform: rotate(360deg); } } /* Knopfzeile am Fuß eines Formulars. */ .pt-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--cab-linie); } .pt-knopfzeile--rechts { justify-content: flex-end; } /* Schiebt alles Folgende nach rechts — „Löschen" links, Rest rechts. */ .pt-knopfzeile__luecke { margin-left: auto; } /* --------------------------------------------------------------------- * Schmale Fenster * * Ab hier steht die Beschriftung ÜBER dem Bedienelement — zwei Spalten * unter 720 px lassen für das Feld keine 200 px übrig. Und Schriftgröße * 16 px bei Feldern, sonst zoomt iOS beim Antippen in die Seite hinein. * ------------------------------------------------------------------- */ @media (max-width: 720px) { .pt-feld { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; } .pt-feld__label { padding-top: 0; } .pt-feld__hilfe, .pt-feld__fehler { grid-column: 1; } .pt-eingabe, .pt-auswahl { font-size: 16px; height: 40px; } .pt-eingabe--voll { width: 100%; } .pt-knopf { height: 40px; font-size: 14.5px; } .pt-knopfzeile .pt-knopf { flex: 1 1 auto; } } /* ===================================================================== * Seitenkopf, Blockrumpf, Meldungen * ===================================================================== */ /* Der Kopf einer Seite: Titel, ein erklärender Satz, rechts die Knöpfe, die für die GANZE Seite gelten (nicht für einen einzelnen Block). */ .pt-seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .pt-seitenkopf__text { min-width: 0; } .pt-seitenkopf__titel { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.015em; } /* Der Satz unter dem Titel ist kein Kleingedrucktes — er sagt, wofür die Seite da ist, und wird von jemandem gelesen, der sie zum ersten Mal öffnet. Deshalb Fließtextgröße und begrenzte Zeilenlänge: über 75 Zeichen findet das Auge den Zeilenanfang nicht mehr zuverlässig. */ .pt-seitenkopf__satz { max-width: 78ch; margin: 7px 0 0; color: var(--cab-sekundaer); font-size: 13.5px; line-height: 1.6; } .pt-seitenkopf__satz b { color: var(--cab-vg); font-weight: 600; } .pt-seitenkopf__knoepfe { display: flex; gap: 9px; flex-wrap: wrap; } /* Rumpf eines Blocks. Der Innenabstand sitzt HIER, nicht an den Zeilen — sonst hat jede Seite ihren eigenen Rand. */ .pt-block__leib { padding: 4px 20px 20px; } /* Trennlinien der Zeilen bis an den Blockrand ziehen: eine Linie, die 20 px vor der Kante aufhört, sieht aus wie ein Fehler. */ .pt-block__leib > .pt-feld { margin: 0 -20px; padding-left: 20px; padding-right: 20px; } .pt-block__hinweis { margin-left: 6px; color: var(--cab-sekundaer); font-size: 13px; font-weight: 400; letter-spacing: 0; } .pt-block__knoepfe { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; } /* --------------------------------------------------------------------- * Meldung * * Vier Arten, EIN Aussehen: farbiger Streifen links, getönte Fläche. Die * Farbe trägt nie allein die Bedeutung — der Text sagt es auch, sonst ist * die Meldung für rot-grün-blinde Leser stumm. * ------------------------------------------------------------------- */ .pt-meldung { padding: 12px 15px; margin-bottom: 18px; border: 1px solid var(--cab-linie); border-left: 3px solid var(--cab-sekundaer); border-radius: var(--pt-radius); background: var(--cab-karte-bg); font-size: 13.5px; line-height: 1.55; } .pt-meldung--ok { border-left-color: var(--cab-erfolg); background: var(--cab-erfolg-tinte); } .pt-meldung--fehler { border-left-color: var(--cab-fehler); background: var(--cab-fehler-tinte); } .pt-meldung--warnung { border-left-color: var(--cab-warnung); background: var(--cab-warnung-tinte); } .pt-meldung--info { border-left-color: var(--cab-akzent); background: var(--cab-akzent-tinte); } .pt-meldung b { font-weight: 600; } /* Blau fehlte in der Statusreihe — „angenommen", „unterwegs", „zugewiesen" sind weder gut noch schlecht, sondern IN ARBEIT. Ohne eigenen Ton landeten sie bei Grau und sahen aus wie erledigt. */ .pt-status--blau { background: var(--cab-akzent-tinte); color: var(--cab-akzent-hell); } @media (max-width: 720px) { .pt-seitenkopf__titel { font-size: 19px; } .pt-block__leib { padding: 4px 16px 16px; } .pt-block__leib > .pt-feld { margin: 0 -16px; padding-left: 16px; padding-right: 16px; } } /* ===================================================================== * Kleinteile * ===================================================================== */ /* Erzwungener Umbruch innerhalb einer Feldzeile. Braucht man, wenn ein Schalter und die davon abhängigen Felder in DERSELBEN Zeile stehen: der Schalter oben, die Felder darunter. Ohne das stehen sie nebeneinander und der Schalter sieht aus wie eine Beschriftung des ersten Feldes. */ .pt-feld__umbruch { flex-basis: 100%; height: 0; } /* Erklärender Absatz im Blockrumpf, über den Zeilen. */ .pt-fliess { max-width: 78ch; margin: 12px 0 4px; color: var(--cab-sekundaer); font-size: 13.5px; line-height: 1.6; } .pt-fliess b { color: var(--cab-vg); font-weight: 600; } /* Abweichung in Geldspalten: teurer oder günstiger. Das Vorzeichen steht IMMER da (+/−) - die Farbe allein sagt einem rot-grün-blinden Leser nichts, das Zeichen schon. */ .pt-abweichung { font-variant-numeric: tabular-nums; } .pt-abweichung--hoch { color: var(--cab-warnung); } .pt-abweichung--runter { color: var(--cab-erfolg); } /* Fußnote unter einem Tabellenwert („am Korridor geklemmt"). */ .pt-notiz { display: block; margin-top: 2px; color: var(--cab-sekundaer); font-size: 11.5px; font-weight: 400; line-height: 1.3; } /* Zurückgenommene Tabellenspalte - Nebeninformation, die nicht mit dem Hauptwert um Aufmerksamkeit ringen soll. */ .pt-leise { color: var(--cab-sekundaer); font-size: 13px; } /* Kein Wert vorhanden. Ein Gedankenstrich sagt „hier ist nichts", eine leere Zelle sagt „hier fehlt etwas" - das ist ein Unterschied. */ .pt-leer-strich { color: var(--cab-linie-stark); } /* Formular INNERHALB einer Tabellenzeile: nimmt keinen eigenen Platz und schiebt die Zeile nicht auseinander. */ .pt-zeilenform { display: inline-flex; gap: 8px; align-items: center; margin: 0; } /* ===================================================================== * DAS LAYOUTSYSTEM — 03.08.2026 * * Angehaengt, nicht eingestreut: Diese Regeln stehen bewusst am Ende und * gewinnen dadurch gegen die gewachsenen weiter oben. Wer sie zurueck- * nehmen will, loescht EINEN Block statt dreissig Zeilen zu suchen. * * Sie beheben, was auf jeder Seite gleich aussah: kein Maß, kein * Rhythmus, keine Rangfolge. Kein PHP-Aufruf aendert sich dadurch. * ===================================================================== */ /* --- 1. DAS MASS ------------------------------------------------------ * Ein Arbeitsbereich ist kein Bildschirm. Ohne Obergrenze zerfaellt jede * Seite auf einem breiten Monitor in „Inhalt links, Leere rechts". */ .main-content > * { max-width: 1320px; } .pt-block:has(.pt-feld) { max-width: 940px; } /* --- 2. VERTIKALER RHYTHMUS ------------------------------------------ * Ein Abstand zwischen Karten, nicht drei verschiedene. */ .pt-block { margin-bottom: 20px; } .pt-block__kopf { padding: 16px 20px; } .pt-block__kopf + * { padding-top: 2px; } /* --- 3. DAS FORMULARRASTER ------------------------------------------- * Felder in einer Zeile bekommen eine gemeinsame Grundbreite, damit sie * ueber mehrere Zeilen hinweg fluchten. Vorher richtete sich jede Zeile * nach ihrem Inhalt: Zeile 1 zweispaltig, Zeile 2 dreispaltig, nichts * stand untereinander. */ .pt-feld__eingabe { row-gap: 10px; } .pt-eingabe--voll { flex: 1 1 100%; min-width: 0; } .pt-eingabe--6 { flex: 0 1 320px; min-width: 200px; } .pt-eingabe--4 { flex: 0 0 150px; } .pt-eingabe--2 { flex: 0 0 92px; } /* Der Hilfetext gehoert UNTER das Feld ueber die ganze Zeilenbreite — * nicht in eine schmale Rasterzelle daneben. Dort wurde aus einem Satz * eine 14-zeilige Saeule, die alles Uebrige nach unten schob. */ .pt-feld__hilfe { grid-column: 2 / -1; max-width: 68ch; } /* --- 4. EINE EINGABE-SKALA -------------------------------------------- */ .pt-eingabe, .pt-auswahl { min-height: 38px; border-radius: 8px; } .pt-eingabe:focus-visible, .pt-auswahl:focus-visible { outline: 2px solid var(--cab-akzent); outline-offset: 1px; } /* --- 5. VERBINDUNGSTEXT ZWISCHEN FELDERN ------------------------------ * „10 % unter bis 20 % ueber dem Tarifpreis" ist EIN Satz. Er darf nicht * aussehen wie eine weitere Beschriftung. */ .pt-zwischen { color: var(--cab-sekundaer); font-size: 13.5px; white-space: nowrap; padding: 0 2px; } /* --- 6. RANGFOLGE BEI KNOEPFEN ---------------------------------------- * Loeschen stand gleichrangig neben Bearbeiten. Eine unumkehrbare * Handlung darf nicht gleich laut sein wie eine harmlose. */ .pt-btn--gefahr:not(:hover) { background: transparent; border-color: transparent; color: var(--cab-fehler); } /* --- 7. DIE DATENLISTE ------------------------------------------------ * .pt-daten ist mit 120 Vorkommen der meistbenutzte Baustein ueberhaupt * (Fahrten, Betriebe, Fahrgaeste, Protokoll). Ein einheitlicher Rhythmus * hier wirkt auf mehr Bildschirmflaeche als alles andere. */ .pt-daten { --zeile: 44px; } .pt-daten td, .pt-daten th { padding: 11px 14px; vertical-align: middle; } .pt-daten th { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--cab-sekundaer); text-transform: none; } /* Zahlen gehoeren rechts und in gleiche Ziffernbreite — sonst kann man * Betraege untereinander nicht vergleichen. */ .pt-daten td.pt-zahl, .pt-daten td.pt-rechts { font-variant-numeric: tabular-nums; } /* Der Zweitzeilen-Text unter einem Namen ist Beiwerk, kein zweiter Wert. */ .pt-neben { display: block; margin-top: 2px; font-size: 12px; color: var(--cab-sekundaer); } .pt-name { font-weight: 600; } /* --- 8. KARTEN NEBENEINANDER ------------------------------------------ * Zwei Karten in einer Reihe: Die kuerzere wurde auf die Hoehe der * laengeren gestreckt und stand dann zu 90 % leer. Betrifft jedes * Raster, das Karten nebeneinander stellt. */ .pt-block { align-self: start; } /* --- 9. WIEDERHOLZEILEN ------------------------------------------------ * Eine Staffel ist eine Zeile aus mehreren Feldern, die es beliebig oft * gibt: "ab km / bis km / Preis" im Stadttarif. Frueher stand dafuer auf * der Tarifseite ein eigenes vierspaltiges Raster mit festen Breiten - * auf dem Telefon quetschte es drei Zahlenfelder auf je 60px. * * Hier stapeln die Zeilen untereinander, und jede Zeile ist eine * .pt-zeilenform, die selbst umbrechen darf. Kein festes Raster, keine * feste Breite - die Felder bringen ihre Breite ueber pt-eingabe--2/--4 * schon mit. */ .pt-staffeln { display: grid; gap: 8px; justify-items: start; } .pt-staffeln .pt-zeilenform { flex-wrap: wrap; } /* --- 10. ENTWEDER-ODER MIT BEGRUENDUNG -------------------------------- * Eine Auswahl, bei der die Optionen erklaert werden muessen: Welches * Abrechnungsmodell gilt, was bei einer Stornierung passiert. Ein * Auswahlfeld waere hier falsch - es zeigt nur den gewaehlten Wert, und * die Frage lautet nicht "welcher Wert", sondern "was folgt daraus". * * Vorher stand dafuer auf jeder Seite ein eigenes mit * style="display:flex;gap:10px" und einem verschachtelten fuer den * Kleintext. Drei Seiten, drei Abstaende. */ .pt-entweder { display: grid; gap: 10px; } .pt-entweder__wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); background: var(--cab-karte-bg); cursor: pointer; } .pt-entweder__wahl:hover { border-color: var(--cab-akzent); } /* Die gewaehlte Option traegt die Farbe - sonst muss man das kleine Puenktchen suchen, um zu wissen, was gerade gilt. */ .pt-entweder__wahl:has(input:checked) { border-color: var(--cab-akzent); box-shadow: inset 0 0 0 1px var(--cab-akzent); } .pt-entweder__wahl input { margin: 3px 0 0; accent-color: var(--cab-akzent); } .pt-entweder__titel { font-size: 14.5px; font-weight: 600; } .pt-entweder__text { grid-column: 2; color: var(--cab-sekundaer); font-size: 13px; line-height: 1.55; } .pt-entweder__wahl input:disabled ~ * { opacity: .5; } /* --- 11. KENNZAHL: DIE ZWEITE SCHREIBWEISE ---------------------------- * .pt-zahl gibt es in zwei Schreibweisen. Die kurze steht in der * Anleitung und in den meisten Seiten: * *

7Offene Fälle

* * Drei Seiten (Bewertungen, Fahrerstufen, Stornierungen) schreiben * stattdessen __wert und __text. Dafuer gab es hier NIE eine Regel - die * Zahlen standen dort in Fliesstextgroesse, waehrend dieselbe Kennzahl * eine Seite weiter 30px gross war. Aufgefallen ist es nie, weil man die * beiden Seiten selten nebeneinander sieht. * * Beide Schreibweisen sehen ab jetzt gleich aus. Neue Seiten nehmen die * kurze - sie ist kuerzer und steht in der Anleitung. */ .pt-zahl__wert { display: block; font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } .pt-zahl__text { font-size: 13px; color: var(--cab-sekundaer); } /* ===================================================================== * 12. EIN MASS FÜR DIE GANZE VERWALTUNG — 03.08.2026 * * DAS PROBLEM: In cably.cab/admin standen zwei Schreibweisen desselben * Dings nebeneinander. Die Überschrift war je nach Seite 24px * (.cab-titel) oder 21px (.pt-seitenkopf__titel), der Satz darunter 15px * oder 13,5px, und ein Eingabefeld war 48px hoch (.cab-feld, Schriftgrad * 16) oder 36px (.pt-eingabe, Schriftgrad 14). Wer von den Gebühren zu * den Festpreisen klickte, sah eine andere Anwendung. * * Genau dieser Sprung war der Grund, die Plattform-Seiten aus dem * Super-Admin herauszuholen — er saß danach immer noch drin, nur eine * Ebene tiefer. * * WARUM HIER UND NICHT IN 24 DATEIEN: Es sind rund 250 Stellen. Jede * einzelne umzuschreiben heißt, 250-mal etwas kaputtmachen zu können, für * ein Ergebnis, das man auch mit zwölf Regeln bekommt. Neue Seiten nehmen * ptSeitenkopf() und ptText() — die stehen in der Anleitung in * cab-admin-bausteine.php. Diese Regeln holen den Bestand ab. * * WARUM AUF .pt-huelle GESCHRAUBT: .cab-feld gehört auch dem Betriebs- * und dem Fahrer-Portal, und dort ist ein 48px hohes Feld mit 16px * Schrift RICHTIG — es wird auf dem Telefon mit dem Daumen bedient, und * unter 16px zoomt iOS beim Fokus hinein. Die Verwaltung dagegen wird am * Schreibtisch mit der Maus bedient. Deshalb gilt das engere Maß nur * innerhalb der Verwaltungshülle. * ================================================================== */ /* --- Überschrift und Einleitungssatz --- */ .pt-huelle .cab-titel { font-size: 21px; letter-spacing: -.015em; margin: 0 0 7px; } .pt-huelle .cab-untertitel { /* Über 75 Zeichen je Zeile verliert man beim Zurückspringen die Zeile — derselbe Grund wie bei .pt-seitenkopf__satz. */ max-width: 78ch; margin: 0 0 22px; font-size: 13.5px; line-height: 1.6; } .pt-huelle .cab-untertitel b { color: var(--cab-vg); font-weight: 600; } /* --- Eingabefelder --- */ .pt-huelle .cab-feld { height: var(--pt-hoehe); padding: 0 11px; border-color: var(--cab-linie-stark); border-radius: var(--pt-radius); font-size: 14px; line-height: normal; } /* Ein mehrzeiliges Feld darf nicht auf 36px zusammenfallen - da soll jemand einen Absatz hineinschreiben. */ .pt-huelle textarea.cab-feld { height: auto; min-height: 88px; padding: 9px 11px; } /* Auswahlfelder tragen ihr eigenes Pfeilchen und brauchen rechts Platz. */ .pt-huelle select.cab-feld { padding-right: 30px; } .pt-huelle .cab-label { margin-bottom: 5px; color: var(--cab-sekundaer); font-size: 13.5px; font-weight: 500; } /* --- Knöpfe --- * .cab-btn ist der Portal-Knopf: hoch, breit, für den Daumen. In der * Verwaltung steht er neben .pt-knopf und war dort einen Kopf größer. */ .pt-huelle .cab-btn { min-height: var(--pt-hoehe); padding: 0 15px; border-radius: var(--pt-radius); font-size: 14px; } /* ===================================================================== * 13. ZWEI FEHLER AUS ABSCHNITT 1 UND 3 — 03.08.2026 * ================================================================== */ /* --- 13a. DIE EINHEIT LAG AUF DEM FELD -------------------------------- * Auf der Tarifseite stand „0 km|bis" ineinander geschoben: Zahl, Einheit * und Verbindungswort überlappten sich. * * URSACHE: Abschnitt 3 gibt .pt-eingabe--2 ein `flex: 0 0 92px`. Steht das * Feld ALLEIN in der Zeile, ist es damit ein Flex-Element von * .pt-feld__eingabe und alles stimmt. Steht es in einem * .pt-mit-einheit-Rahmen, ist das FELD Flex-Element des Rahmens (und hält * seine 92px), der RAHMEN aber Flex-Element der Zeile — und der hatte * keine eigene Breitenangabe. Als Flex-Element schrumpft er per Vorgabe * unter seinen Inhalt. Ergebnis: 92px Feld plus Einheit in einem Rahmen, * der auf 70px zusammengedrückt wurde. * * Die Breitenangabe gehört also an den Rahmen, nicht an das Feld darin. */ .pt-mit-einheit { flex: 0 0 auto; } .pt-mit-einheit .pt-eingabe--2 { flex: 0 0 62px; } .pt-mit-einheit .pt-eingabe--4 { flex: 0 0 88px; } .pt-mit-einheit .pt-eingabe--6 { flex: 0 0 124px; } .pt-mit-einheit .pt-eingabe--voll { flex: 1 1 auto; width: auto; } /* „bis", „je km", „höchstens" sind Text und dürfen nie umbrechen oder * schrumpfen — sie sind der Grund, warum zwei Felder zusammengehören. */ .pt-zwischen { flex: 0 0 auto; } /* --- 13b. DIE SEITE NUTZTE DIE BREITE NICHT --------------------------- * Abschnitt 1 deckelte den Inhalt auf 1320px und Formularblöcke sogar auf * 940px. Auf einem 2000px breiten Bildschirm stand damit ein Drittel der * Fläche schwarz daneben, während achtspaltige Tabellen sich quetschten. * * Der Gedanke dahinter war richtig — eine Textzeile über 1300px liest * niemand mehr. Nur ist die Obergrenze am falschen Ort gesetzt: Sie * gehört an den TEXT, nicht an den Behälter. Die Textbausteine tragen * ihre Grenze längst selbst (.pt-fliess, .pt-seitenkopf__satz, * .pt-feld__hilfe — alle in ch), also darf der Behälter frei sein. * * Tabellen, Listen und Kennzahlen gewinnen dadurch echte Fläche. */ .main-content > * { max-width: none; } .pt-block:has(.pt-feld) { max-width: none; } /* Und weil jetzt Platz da ist, wandert der Hilfetext NEBEN das Feld statt * darunter. Das halbiert die Höhe eines Formulars und stellt Erklärung * und Bedienelement auf eine Blickhöhe — vorher musste man für jede Zeile * nach unten lesen und wieder hoch. */ /* DIE SCHWELLE LAG ZU NIEDRIG (bemerkt 04.08.2026). * * Sie stand bei 1180px Fensterbreite. Davon gehen 320px Seitenleiste und * 2×28px Polsterung ab — bei einem ganz gewöhnlichen 1280er-Laptop blieb * eine Rasterbreite von 915px. Das Raster verteilte sie so: * * 220 Beschriftung + 34 + 460 Eingabe + 34 = 748 → Hilfe: 127px * * 127px sind SIEBZEHN ZEICHEN je Zeile. Der Hilfetext stand dann als * schmales Band aus fünf Zeilen neben einem halbleeren Feld — deutlich * schlechter als der Zustand, den die Regel beheben sollte. * * Ursache war nicht nur die Schwelle, sondern auch minmax(0, 1fr): Die * mittlere Spalte durfte auf ihre vollen 460px wachsen, BEVOR die dritte * überhaupt etwas bekam. Eine Spalte ohne Mindestbreite ist im Raster * die erste, die geopfert wird. * * Jetzt: Schwelle bei 1400px (dort bleiben rund 300px für die Hilfe), * und die Hilfespalte hat eine eigene Mindestbreite — dann schrumpft * zuerst das Eingabefeld, das mit 300px immer noch bequem ist. */ @media (min-width: 1400px) { .pt-feld { grid-template-columns: 220px minmax(300px, 440px) minmax(280px, 1fr); column-gap: 34px; } .pt-feld__hilfe { grid-column: 3; grid-row: 1; max-width: 62ch; margin-top: 9px; } .pt-feld__fehler { grid-column: 2; } /* Breite Zeilen (Tabellen, Staffellisten) behalten die volle Bahn. */ .pt-feld--breit { grid-template-columns: minmax(0, 1fr); } .pt-feld--breit .pt-feld__hilfe { grid-column: 1; grid-row: auto; } } /* --- 14. DER ALARMKASTEN ---------------------------------------------- * Stand als Eigenbau im Stylblock des Leitstands (.ls-sw-box). Seit es * die Notrufseite gibt, brauchen ihn zwei Seiten — und ein Alarm, der auf * zwei Seiten verschieden aussieht, wird auf einer davon übersehen. * * Er blinkt, weil am anderen Ende jemand wartet und nicht weiterkommt. * Ein stiller Hinweis wäre hier falsch. Wer die Bewegung abgestellt hat * (prefers-reduced-motion), bekommt sie nicht — der rote Rahmen bleibt. */ .pt-alarm { border: 2px solid var(--cab-fehler); border-radius: var(--cab-radius-karte); background: var(--cab-karte-bg); padding: 14px 18px; margin-bottom: 22px; } .pt-alarm--still { display: none; } .pt-alarm__titel { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--cab-fehler); animation: ptBlinken 1.2s linear infinite; } @keyframes ptBlinken { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .pt-alarm__titel { animation: none; } } .pt-alarm__zeile { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cab-linie); font-size: 14px; } .pt-alarm__zeile:first-of-type { border-top: none; } .pt-alarm__wer { font-weight: 700; } /* ===================================================================== * 15. EIN KNOPF FÜR DIE GANZE VERWALTUNG — 04.08.2026 * * DAS PROBLEM: In der Verwaltung standen DREI Knopfsysteme nebeneinander, * und man sah es sofort, ohne zu wissen, woran es lag. * * .cab-btn (Portal-Knopf) — Grund SCHWARZ (--cab-vg) * .pt-btn (99 Stellen) — Grund BLAU (--cab-akzent) * .pt-knopf (ptKnopf()) — Grund BLAU, aber eigene Höhe und Radius * * Auf /admin/partner war der Hauptknopf also schwarz, eine Seite weiter * auf /admin/betriebe blau. Beides „der Knopf, den man drückt". * * SCHLIMMER WAR DIE GEFAHRENSTUFE. Sie meinte auf jeder der drei Familien * etwas anderes: * * .pt-btn--gefahr roter Text, kein Grund → leise * .pt-knopf--gefahr VOLLFLÄCHIG ROT → lauter als alles * .cab-btn--gefahr roter Text auf schwarz → kaum lesbar * * „Sperren" schrie auf der einen Seite und flüsterte auf der anderen — * bei derselben Tragweite. Genau das ist gemeint mit „Löschen gleich laut * wie Bearbeiten": Nicht die Farbe fehlte, die RANGFOLGE fehlte. * * DIE REGEL AB HIER — vier Ränge, drei Schreibweisen, ein Aussehen: * * 1. HAUPT voll Akzent — was die Seite von dir will * 2. ZWEIT Fläche + Rand — gleichwertige Nebenwege * 3. STILL nur Text — Abbrechen, Zurück * 4. GEFAHR roter Text — löschen, sperren, stornieren: * LEISER als Haupt, aber unverkennbar markiert * * Warum Gefahr leise und nicht laut: In einer Tabellenzeile steht * „Sperren" neben „Verwalten". Ein vollrotes Feld zieht dort jeden Blick * auf sich — man sucht „Verwalten" und sieht zuerst die Sperre. Laut sein * darf die Gefahr genau an einer Stelle: im Bestätigen-Dialog, wo sie die * Hauptaktion IST. Dafür steht die Regel unten bei .pt-dialog__fuss. * * WARUM WIEDER HIER UND NICHT IN 24 DATEIEN: 110 Knopf-Stellen. Der * gemeinsame Nenner ist eine Regel, nicht 110 Änderungen — und jede * Änderung an einer Seite wäre eine Gelegenheit, ein Formular zu * zerschießen. Neue Seiten nehmen ptKnopf(); .pt-btn bleibt gültig und * sieht ab jetzt genauso aus. * ================================================================== */ /* --- 15a. Rang 1: der Hauptknopf --- */ .pt-huelle .pt-btn, .pt-huelle .pt-knopf, .pt-huelle .cab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; min-height: var(--pt-hoehe); height: auto; padding: 0 14px; border: 1px solid transparent; border-radius: var(--pt-radius); background: var(--cab-akzent); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: none; transition: background .12s, border-color .12s, color .12s, transform .06s; } .pt-huelle .pt-btn:hover, .pt-huelle .pt-knopf:hover, .pt-huelle .cab-btn:hover { background: var(--cab-akzent-hell); opacity: 1; } .pt-huelle .pt-btn:active, .pt-huelle .pt-knopf:active, .pt-huelle .cab-btn:active { transform: translateY(.5px); } /* Tastaturbedienung. .pt-btn und .cab-btn hatten NIE einen sichtbaren Fokus — wer mit Tab durch eine Tabelle geht, sah nicht, wo er steht. */ .pt-huelle .pt-btn:focus-visible, .pt-huelle .pt-knopf:focus-visible, .pt-huelle .cab-btn:focus-visible { outline: none; box-shadow: var(--pt-fokus-ring); } /* --- 15b. Rang 2: gleichwertiger Nebenweg --- */ .pt-huelle .pt-btn--leer, .pt-huelle .pt-knopf--zweit, .pt-huelle .cab-btn--text { background: var(--cab-karte-bg); border-color: var(--cab-linie-stark); color: var(--cab-vg); } .pt-huelle .pt-btn--leer:hover, .pt-huelle .pt-knopf--zweit:hover, .pt-huelle .cab-btn--text:hover { background: var(--cab-flaeche); border-color: var(--cab-sekundaer); } /* --- 15c. Rang 3: still --- */ .pt-huelle .pt-knopf--still { background: none; border-color: transparent; color: var(--cab-sekundaer); } .pt-huelle .pt-knopf--still:hover { background: var(--cab-flaeche); color: var(--cab-vg); } /* --- 15d. Rang 4: Gefahr — markiert, aber leiser als Haupt --- */ .pt-huelle .pt-btn--gefahr, .pt-huelle .pt-knopf--gefahr, .pt-huelle .cab-btn--gefahr { background: none; border-color: transparent; color: var(--cab-fehler); } .pt-huelle .pt-btn--gefahr:hover, .pt-huelle .pt-knopf--gefahr:hover, .pt-huelle .cab-btn--gefahr:hover { background: var(--cab-fehler-tinte); border-color: var(--cab-fehler); color: var(--cab-fehler); filter: none; } /* Im Bestätigen-Dialog IST die Gefahr die Hauptaktion — dort und nur dort trägt sie die volle Fläche. Der Dialog hat den Nutzer bereits gefragt; jetzt soll die Antwort eindeutig sein. */ .pt-huelle .pt-dialog__fuss .pt-btn--gefahr, .pt-huelle .pt-dialog__fuss .pt-knopf--gefahr, .pt-huelle .pt-dialog__fuss .cab-btn--gefahr { background: var(--cab-fehler); border-color: var(--cab-fehler); color: #fff; } .pt-huelle .pt-dialog__fuss .pt-btn--gefahr:hover, .pt-huelle .pt-dialog__fuss .pt-knopf--gefahr:hover, .pt-huelle .pt-dialog__fuss .cab-btn--gefahr:hover { filter: brightness(1.08); } /* --- 15e. Kleine Ausführung (Tabellenzeilen) --- */ .pt-huelle .pt-btn--klein, .pt-huelle .pt-knopf--klein { min-height: var(--pt-hoehe-klein); padding: 0 10px; font-size: 12.5px; } .pt-huelle .pt-knopf--voll, .pt-huelle .cab-btn--voll { width: 100%; } /* --- 15f. Ausgeschaltet --- * * .pt-btn hatte dafür KEINE Regel: Ein deaktivierter Knopf sah aus wie * ein bedienbarer und tat beim Klick nichts. */ .pt-huelle .pt-btn:disabled, .pt-huelle .pt-btn[aria-disabled="true"], .pt-huelle .pt-knopf:disabled, .pt-huelle .pt-knopf[aria-disabled="true"], .pt-huelle .cab-btn:disabled, .pt-huelle .cab-btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; pointer-events: none; } /* --- 15g. Knöpfe in einer Tabellenzeile --- * * (.pt-knopfzeile für Formularfüße steht schon weiter oben.) * In einer Tabellenzelle stehen Knöpfe fast immer in einer Reihe — dann bitte mit Abstand und ohne Umbruch mitten in der Gruppe. */ .pt-huelle .pt-tabelle td .pt-btn + .pt-btn, .pt-huelle .pt-tabelle td .pt-btn + form, .pt-huelle .pt-tabelle td form + .pt-btn, .pt-huelle .pt-tabelle td .pt-knopf + .pt-knopf { margin-left: 6px; } /* ===================================================================== * 16. ZWEI BAUSTEINE, DIE JEDE SEITE SELBST GEBAUT HAT — 04.08.2026 * ================================================================== */ /* --- 16a. DIE REITERZEILE ÜBER EINER LISTE --------------------------- * „Offen (3) · Freigegeben (12) · Abgelehnt (1)" — dieselbe Zeile steht * über den Partner-Anträgen, über den Betrieben, über den Prüflisten. * Gebaut wurde sie jedes Mal neu: einmal als

, einmal mit 7px 12px Polsterung und * `background:var(--cab-vg)` für den aktiven Reiter (schwarz), einmal mit * pt-btn und border-radius:999px per style-Attribut (blau). * * Es ist DIESELBE Bedienung. Sie darf nicht auf jeder Seite anders * aussehen — und schon gar nicht in einer anderen Farbe. * * .pt-reiter (weiter oben) ist etwas anderes: die unterstrichene * Reiterleiste im Betriebs-Portal, die einen Bereich wechselt. Hier geht * es um einen Filter auf DERSELBEN Liste. Zwei Bedeutungen, zwei * Formen — das ist Absicht. */ .pt-filterzeile { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .pt-huelle .pt-btn--pille, .pt-huelle .pt-knopf--pille { border-radius: 999px; } /* --- 16c. DAS PRÜFRASTER: UNTERLAGE LINKS, ANGABEN RECHTS ------------ * Fahrer-Prüfung, Fahrzeug-Prüfung und die Fahrerakte teilen den * Prüfblock in zwei Spalten: links die eingereichte Unterlage, rechts * das Formular. Alle drei schrieben dafür dieselbe Zeile ins * style-Attribut: * * grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) * * auto-fit mit 1fr macht beide Spalten GLEICH BREIT. Ist die Unterlage * ein PDF, steht links nur ein Knopf „PDF öffnen" — und der bekam die * halbe Kartenbreite und die volle Kartenhöhe, mit einer Trennlinie, die * an 400px Nichts entlanglief. Das ist der Befund „die kürzere Karte * steht zu 90 % leer", nur innerhalb einer Karte. * * Die Unterlagenspalte bekommt deshalb eine Obergrenze: 340px sind für * eine Bildvorschau reichlich und für einen Knopf ehrlich schmal. Alles * Übrige gehört dem Formular, das es wirklich braucht. Unter 900px * stapeln beide — dort ist die Unterlage zuerst dran. */ .pt-pruefraster { display: grid; grid-template-columns: minmax(0, 1fr); } .pt-pruefraster__doku, .pt-pruefraster__form { padding: 16px 20px; min-width: 0; } @media (min-width: 900px) { .pt-pruefraster { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); } .pt-pruefraster__doku { border-right: 1px solid var(--cab-linie); } } @media (max-width: 899px) { .pt-pruefraster__doku { border-bottom: 1px solid var(--cab-linie); } } /* --- 16b. DER KASTEN ZUM VORLESEN ------------------------------------ * Für das, was man abschreibt oder am Telefon durchgibt: Zugangsdaten, * ein Abhol-Code, eine Kontonummer. * * Auf /admin/partner standen die Zugangsdaten zum Betriebs-Portal in * einem

— 13px grau, zwischen * „entschieden am" und dem Ablehnungsvermerk, getrennt durch

. * Genau die Angabe, wegen der man die Seite aufruft, war die leiseste * darauf. Ein Kasten kostet zwölf Zeilen CSS und beantwortet die Frage * „wo steht das Passwort" ohne Suchen. */ .pt-kasten { border: 1px solid var(--cab-linie-stark); border-radius: var(--cab-radius-karte); background: var(--cab-flaeche); padding: 14px 16px; } .pt-kasten > strong { display: block; font-size: 14.5px; } .pt-kasten .pt-daten__zeile { padding-left: 0; padding-right: 0; } .pt-kasten .pt-daten__zeile:last-child { border-bottom: 0; } /* Was abgeschrieben wird, muss ziffernsicher sein: 0/O und 1/l dürfen sich nicht gleichen. */ .pt-kasten code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; user-select: all; } /* ===================================================================== * la-Schicht: oeffentliche Landing-Seiten (Stadtseiten, /so-funktionierts, * /app, /taxibetrieb). Dritte Schicht neben cab-* (App-nahe Kundenseiten) * und pt-* (Portal). Nutzt AUSSCHLIESSLICH die vorhandenen Tokens - * hell und dunkel kommen automatisch mit. * * Seiten dieser Schicht tragen : Dort ist der * Haupt-Knopf Akzent statt Schwarz (dasselbe Muster wie .auth). * ===================================================================== */ .la-body { background: var(--cab-bg); } .la-body .cab-btn { background: var(--cab-akzent); color: #fff; } .la-body .cab-btn:hover { background: var(--cab-akzent-hell); opacity: 1; } /* Zweitrang: transparente Flaeche mit Rahmen (Rang 2 der Knopffamilie) */ .cab-btn--rahmen, .la-body .cab-btn--rahmen { background: transparent; border: 1px solid var(--cab-linie-stark); color: var(--cab-vg); } .cab-btn--rahmen:hover, .la-body .cab-btn--rahmen:hover { background: var(--cab-flaeche); opacity: 1; } .la-body .cab-btn--text { background: none; color: var(--cab-vg); } .la-body .cab-btn--text:hover { background: var(--cab-flaeche); } /* Knoepfe stehen auf Landing-Seiten im Fliess-Layout, nicht als Block */ .cab-btn--inline { display: inline-flex; width: auto; } /* Haupt-CTA der Landing-Seiten: eine Nummer groesser */ .la-cta { padding: 14px 24px; font-size: 1.0625rem; min-height: 48px; } /* --- Huelle und Abschnitte (8-px-Raster) ----------------------------- */ .la-huelle { max-width: var(--la-bahn); margin-inline: auto; padding-inline: var(--la-luft); } /* Fliesstextseiten (Recht, Fehlerseite): die Seite IST eine Spalte. */ .la-huelle--eng { max-width: var(--la-bahn-eng); } @media (max-width: 480px) { :root { --la-luft: 20px; } } /* NUR padding-block: Abschnitt und Huelle sitzen oft auf DEMSELBEN Element - ein padding-Kurzschreib wuerde den Seitenrand der Huelle auf 0 ueberschreiben (spaetere Regel gewinnt). VERTIKALER RHYTHMUS statt gleichfoermiger Abstaende: Ein Abschnitt atmet (48-96 px), ein Nachsatz zum vorigen Abschnitt nicht (--knapp), und ein Abschluss-Band traegt mehr Luft (--weit). Wenn jeder Abstand gleich ist, sieht die Seite aus wie eine Liste von Absaetzen - das war der Befund. */ .la-abschnitt { padding-block: clamp(48px, 6.5vw, 96px); } .la-abschnitt--knapp { padding-block: clamp(28px, 3.5vw, 48px); } .la-abschnitt--weit { padding-block: clamp(56px, 8vw, 120px); } .la-abschnitt p { max-width: var(--la-mass); line-height: 1.65; } /* ABWECHSELNDE BAENDER. Der Abschnitt geht ueber die volle Breite, die Huelle liegt DARIN - nur so reicht die Flaeche bis an den Rand und die Blockgrenze wird sichtbar, ohne dass eine Linie sie behaupten muss. Deshalb tragen Baender

mit

innen. */ .la-band { background: var(--cab-karte-bg); border-block: 1px solid var(--cab-linie); } .la-band + .la-band { border-top: 0; } /* Eingelassenes Band - ruhiger als die Karte, fuer Zwischenstuecke. */ .la-band--tief { background: var(--cab-flaeche); } /* Akzentband: EINMAL je Seite, fuer den Abschluss-Aufruf. */ .la-band--akzent { background: var(--cab-akzent-tinte); border-block-color: transparent; } /* AUF DER TINTE IST SEKUNDAERGRAU ZU LEISE. Gemessen im hellen Thema: --cab-sekundaer auf --cab-akzent-tinte ergibt 4,05:1 - unter AA (4,5:1 fuer Text bis 24 px). Der Lead im Abschlussband ist genau der Satz, der noch gelesen werden soll; er bekommt dort die volle Textfarbe. Die Groesse traegt die Rangfolge, nicht das Grau. */ .la-band--akzent .la-lead, .la-band--akzent .la-klein { color: var(--cab-vg); } /* Inhalt auf Kartengrund (Tarif, Stadtabfrage, Formulare) */ .la-kasten { background: var(--cab-karte-bg); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); box-shadow: var(--cab-schatten); padding: 24px 20px; } @media (min-width: 640px) { .la-kasten { padding: clamp(24px, 3vw, 36px); } } /* Auf einem hellen Band waere Karte auf Karte unsichtbar - dort dreht sich die Schichtung um. */ .la-band .la-kasten { background: var(--cab-bg); box-shadow: none; } /* --- Typo-Hierarchie ------------------------------------------------- Fuenf Stufen mit echtem Abstand zueinander (Hero, Abschnitt, Block, Lead, Kleintext). Vorher lagen H1 40 px und H2 22 px so weit auseinander, dass alles unter der H1 gleich aussah. */ /* DEUTSCHE KOMPOSITA BRECHEN NICHT VON ALLEIN. "Datenschutzerklärung" ist bei 34 px 352 px breit und ragte auf einem 375er Telefon aus der Spalte heraus - ohne waagerechten Rollbalken (der Text lief nur ueber den Rand). Deshalb dreierlei: eine Stufe kleiner am unteren Ende der Skala, Silbentrennung (das lang="de" am liefert die Trennregeln) und als letzte Sicherung der harte Umbruch. */ .la-h1 { font-size: clamp(1.875rem, 5.2vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; margin: 0 0 16px; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; } .la-h2 { font-size: clamp(1.4375rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.022em; margin: 0 0 14px; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; } .la-h3, .la-lead, .la-abschnitt p, .la-recht p, .la-recht li { overflow-wrap: break-word; } .la-h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 8px; } .la-lead { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.55; color: var(--cab-sekundaer); margin: 0 0 24px; max-width: var(--la-mass); } .la-quelle { font-size: .8125rem; color: var(--cab-sekundaer); margin-top: 12px; } .la-klein { font-size: .875rem; color: var(--cab-sekundaer); } /* Die Zeile ueber einer Ueberschrift: sagt, WORUM es im Abschnitt geht, bevor die Ueberschrift es benennt. Traegt den Akzent - die einzige Farbe, die auf diesen Seiten Text sein darf. */ .la-augenbraue { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--cab-akzent-text); margin: 0 0 12px; } .la-augenbraue::before { content: ""; width: 18px; height: 2px; border-radius: 1px; background: currentColor; flex: 0 0 auto; } /* Der Kopf eines Abschnitts: Augenbraue, Ueberschrift, Einleitung - als EIN Block mit eigenem Abstand nach unten. */ .la-kopfzeile { max-width: var(--la-mass); margin-bottom: clamp(24px, 3.2vw, 44px); } .la-kopfzeile--breit { max-width: 50rem; } .la-kopfzeile > :last-child { margin-bottom: 0; } /* --- Kopfzeile ------------------------------------------------------- Marke links, Wege in der Mitte, EIN sichtbarer Haupt-Aufruf rechts - auf jeder Breite. Die Leiste klebt jetzt ueberall oben, nicht nur mobil: Der Bestell-Knopf ist der Zweck der Seite und darf nie weggescrollt sein. */ .la-kopf { position: sticky; top: 0; z-index: 40; background: var(--cab-bg); border-bottom: 1px solid var(--cab-linie); } .la-kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; min-height: 68px; } /* Das Logo ist ein Link zur Startseite und braucht deshalb ein Tippziel, nicht nur eine Bildhoehe: 28 px hoch ist es sichtbar, aber auf dem Telefon kaum zu treffen. */ .la-kopf .cab-wortmarke { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 44px; padding-right: 4px; } .la-kopf .cab-wortmarke img { height: 28px; width: auto; } .la-navi { display: flex; align-items: center; gap: 12px; } .la-navi__punkte { display: flex; align-items: center; gap: 2px; } .la-navi a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--cab-vg); text-decoration: none; font-size: .9375rem; font-weight: 600; white-space: nowrap; } .la-navi a:hover { background: var(--cab-flaeche); } /* Der aktive Punkt braucht mehr als eine Farbe - Farbe allein ist kein Unterscheidungsmerkmal (WCAG 1.4.1). Deshalb zusaetzlich der Strich. */ .la-navi a[aria-current="page"] { color: var(--cab-akzent-text); position: relative; } .la-navi a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 1px; background: currentColor; } .la-kopf__cta { min-height: 44px; font-size: .9375rem; padding: 8px 18px; width: auto; flex: 0 0 auto; } /* Der Haupt-Aufruf ist ein Knopf, kein Navigationspunkt: Auf der Bestellseite selbst wuerde ihm sonst ein weisser Strich quer durch die Flaeche gezogen. */ .la-navi .la-kopf__cta[aria-current="page"]::after { display: none; } /* Mobiles Menue: ein Klappblatt statt einer abgeschnittenen Rollzeile. Die alte Loesung liess die Navi horizontal scrollen - was rechts herausragte, hat nie jemand gefunden.

braucht kein JavaScript, schliesst mit Esc und ist von Haus aus bedienbar. */ .la-menue { display: none; position: relative; flex: 0 0 auto; } .la-menue > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--cab-linie-stark); color: var(--cab-vg); cursor: pointer; } .la-menue > summary::-webkit-details-marker { display: none; } .la-menue > summary:hover { background: var(--cab-flaeche); } .la-menue__blatt { position: absolute; right: 0; top: calc(100% + 10px); min-width: 15rem; z-index: 50; display: grid; gap: 2px; padding: 8px; background: var(--cab-karte-bg); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); box-shadow: var(--cab-schatten); } .la-menue__blatt a { justify-content: flex-start; } @media (max-width: 899px) { .la-navi__punkte { display: none; } .la-menue { display: block; } } @media (max-width: 380px) { .la-kopf .cab-wortmarke img { height: 24px; } .la-kopf__cta { padding: 8px 13px; font-size: .875rem; } } /* --- Brotkrumen ------------------------------------------------------ */ .la-brotkrumen { font-size: .8125rem; color: var(--cab-sekundaer); padding-block: 14px 0; } .la-brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; } .la-brotkrumen li + li::before { content: "\203A"; margin-right: 4px; } .la-brotkrumen a { color: var(--cab-sekundaer); text-decoration: none; } .la-brotkrumen a:hover { color: var(--cab-akzent-text); } /* ===================================================================== * DAS SPALTENSYSTEM * * Der Befund lautete: "Der Inhalt klebt in einer schmalen Spalte links, * rechts zwei Drittel leer." Die Ursache war nicht die Huelle, sondern * dass es KEINE Moeglichkeit gab, zwei Dinge nebeneinander zu stellen - * jede Seite bestand aus Ueberschrift, Absatz, Ueberschrift, Absatz. * Diese drei Muster decken alles ab, was die Seiten brauchen: * * .la-raster gleichrangige Kacheln nebeneinander (2/3/4) * .la-teilung Ueberschriftenspalte links, Inhalt rechts * .la-hero Text und Bestellfeld links, ruhige Flaeche rechts * * Alle drei sind einspaltig geboren und werden erst breiter, wenn Platz * da ist. minmax(min(100%, …)) statt fester Bruchteile: eine Kachel darf * nie breiter werden muessen als ihr Behaelter, sonst schiebt die Seite * auf dem Telefon quer. * ===================================================================== */ /* Feste Spaltenzahlen mit Schwellen, NICHT auto-fit: Bei vier Kacheln in --2 ergab auto-fit drei Spalten und eine Waise in der zweiten Zeile. Der Name eines Rasters muss halten, was er sagt - sonst entscheidet der Zufall der Kachelbreite ueber den Aufbau der Seite. */ .la-raster { display: grid; gap: clamp(16px, 2.2vw, 28px); grid-template-columns: 1fr; } @media (min-width: 700px) { .la-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .la-raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .la-raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 940px) { .la-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .la-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .la-raster > * { min-width: 0; } .la-teilung { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; } @media (min-width: 960px) { .la-teilung { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); } /* Die Ueberschrift laeuft mit, solange rechts noch Inhalt kommt - bei langen Listen (FAQ, Rechtstexte) sonst verliert man, wozu man gerade liest. */ .la-teilung__kopf { position: sticky; top: 88px; } } .la-teilung > * { min-width: 0; } /* --- Hero ------------------------------------------------------------ Auf breiten Schirmen zweispaltig: links Text und Bestellfeld, rechts eine ruhige Flaeche mit Fakten. Leerraum rechts WAR der Fehler. */ .la-hero { display: grid; gap: clamp(28px, 4vw, 44px); align-items: start; } .la-hero > * { min-width: 0; } @media (min-width: 1000px) { .la-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(44px, 5vw, 72px); align-items: center; } } .la-hero__haupt .la-lead { max-width: 34rem; } /* Die ruhige Flaeche rechts: keine Dekoration, sondern Fakten, die vor der Bestellung wirklich jemand wissen will. */ .la-hero__neben { background: var(--cab-karte-bg); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); box-shadow: var(--cab-schatten); padding: clamp(22px, 2.6vw, 32px); } .la-hero__neben > :last-child { margin-bottom: 0; } /* --- Hero-Formular: Feld + Knopf ------------------------------------- Das Bestellfeld ist das Element, um das es geht - es steht deshalb auf eigenem Grund, nicht als Formular im Fliesstext. */ .la-hero-form { margin-top: clamp(20px, 2.6vw, 28px); max-width: 36rem; } .la-hero-form--karte { max-width: 38rem; background: var(--cab-karte-bg); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); box-shadow: var(--cab-schatten); padding: clamp(18px, 2.4vw, 26px); } .la-band .la-hero-form--karte { background: var(--cab-bg); box-shadow: none; } .la-hero-form__zeile { display: flex; flex-direction: column; gap: 10px; } /* 16 px im Feld sind Pflicht: darunter zoomt iOS beim Fokus hinein und der Fahrgast landet in einer verschobenen Seite. */ .la-hero-form .cab-feld { min-height: 54px; padding: 14px 16px; font-size: 16px; } .la-hero-form .cab-btn { min-height: 54px; } @media (min-width: 480px) { .la-hero-form__zeile { flex-direction: row; } .la-hero-form__zeile .cab-feld { flex: 1; } .la-hero-form__zeile .cab-btn { flex-shrink: 0; width: auto; } } .la-hero-form .cab-hinweis { margin-bottom: 0; } .la-hero-form .cab-hinweis--fehler { margin-top: 10px; } .la-hero-form > .cab-label { margin-bottom: 9px; font-size: .875rem; } /* Vertrauensmerkmale unter dem Hero: kurz, belegbar, mit Zeichen. */ .la-vertrauen { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0; } .la-vertrauen li { display: flex; align-items: center; gap: 9px; font-size: .9375rem; color: var(--cab-sekundaer); } .la-vertrauen svg { flex: 0 0 auto; color: var(--cab-akzent-text); } /* --- Live-Zeile (nur wenn Zahl > 0) ---------------------------------- */ .la-live { display: flex; align-items: center; gap: 8px; font-size: .9375rem; margin: 14px 0 0; } .la-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cab-erfolg); flex-shrink: 0; } /* "Alle angemeldeten Taxis sind gerade besetzt" ist keine Erfolgsmeldung. Gruen dafuer waere dieselbe Vortaeuschung wie die alte Zaehlung, die besetzte Taxis als "fuer dich unterwegs" ausgab. */ .la-live--besetzt::before { background: var(--cab-warnung); } /* ===================================================================== * VISUELLE ANKER OHNE BILDDATEIEN * * Es gibt keine Fotos - und erfundene Stockbilder waeren schlimmer als * keine. Struktur entsteht deshalb aus vier Mitteln, die alle aus den * vorhandenen Tokens leben: einfarbige Zeichen, Zahlen-Marken, Kacheln * und Fakten-Felder. Keine Verlaeufe, kein Glas, kein Leuchten. * ===================================================================== */ /* Zeichen in einer Flaeche - die Marke gibt Ton und Radius vor. */ .la-symbol { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: var(--cab-akzent-tinte); color: var(--cab-akzent-text); } .la-symbol svg { width: 22px; height: 22px; } .la-symbol--gross { width: 56px; height: 56px; border-radius: 16px; } .la-symbol--gross svg { width: 28px; height: 28px; } /* Still: fuer Nebenaussagen, die kein Akzent tragen sollen. */ .la-symbol--still { background: var(--cab-flaeche); color: var(--cab-sekundaer); } /* Erfolg: die Bestaetigungsseite nach der Registrierung. */ .la-symbol--erfolg { background: var(--cab-erfolg-tinte); color: var(--cab-erfolg); border-radius: 50%; } /* Auswahlkarte im Anmelde-Assistenten: eine Option, die man antippt, nicht ein Radioknopf mit Text daneben. Die Regeln standen dreimal als style-Attribut im Formular - beim vierten Feld waeren sie auseinandergelaufen. Die GEWAEHLTE Karte traegt die Farbe: sonst muss man den kleinen Punkt suchen, um zu sehen, was gilt. */ .la-wahl { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 10px; border: 1.5px solid var(--cab-linie-stark); border-radius: var(--cab-radius-button); cursor: pointer; line-height: 1.45; } .la-wahl:hover { border-color: var(--cab-sekundaer); } /* Der Radioknopf in Systemgroesse ist 13 px - unter jedem Tippmass. Die Karte ringsum ist zwar anklickbar, aber wer den Knopf selbst trifft, soll ihn auch treffen koennen. */ .la-wahl input { margin-top: 2px; flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--cab-akzent); } .la-wahl b { display: block; } .la-wahl .la-klein { display: block; margin-top: 2px; } .la-wahl:has(input:checked) { border-color: var(--cab-akzent); background: var(--cab-akzent-tinte); } /* :has() fehlt in aelteren Browsern - dort bleibt die Karte neutral, der Radioknopf zeigt die Wahl weiterhin an. Kein Ausfall, nur weniger deutlich. */ .la-wahl:focus-within { border-color: var(--cab-akzent); } /* Kachel: das wiederverwendbare Panel im Raster. */ .la-kachel { display: flex; flex-direction: column; gap: 10px; background: var(--cab-karte-bg); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); padding: clamp(18px, 2.2vw, 26px); } .la-band .la-kachel { background: var(--cab-bg); } .la-kachel > .la-symbol { margin-bottom: 2px; } .la-kachel .la-h3 { margin: 0; } .la-kachel p { margin: 0; max-width: none; line-height: 1.6; } .la-kachel > :last-child { margin-bottom: 0; } /* Anklickbare Kachel (Wege auf der Fehlerseite, Stadtliste). */ a.la-kachel { text-decoration: none; color: inherit; transition: border-color .12s, background-color .12s; } a.la-kachel:hover { border-color: var(--cab-linie-stark); background: var(--cab-flaeche); } .la-kachel__pfeil { color: var(--cab-akzent-text); font-weight: 600; font-size: .9375rem; margin-top: auto; } /* Fakten-Feld: Zahlen als eigene Auszeichnung, durch Haarlinien getrennt. Der 1-px-Abstand auf Linienfarbe ist die Trennung - eine Linie, die nichts umschliesst, was sie nicht trennt. */ .la-fakten { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); background: var(--cab-linie); border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); overflow: hidden; } .la-fakt { background: var(--cab-karte-bg); padding: 18px 20px; } .la-band .la-fakt, .la-hero__neben .la-fakt { background: var(--cab-bg); } .la-fakt__wert { display: block; font-size: clamp(1.5rem, 3vw, 1.875rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; } .la-fakt__text { display: block; font-size: .875rem; color: var(--cab-sekundaer); margin-top: 5px; line-height: 1.45; } /* Zahlen und Preise als eigene Auszeichnung - Ziffern gleicher Breite, damit untereinander stehende Betraege eine Spalte ergeben. */ .la-zahl { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.01em; } .la-preis { display: block; font-variant-numeric: tabular-nums; font-size: clamp(1.625rem, 3.2vw, 2.125rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; } /* Hinweis-/Merkblock: der eine Satz, der haengen bleiben soll. */ .la-merk { max-width: var(--la-mass); margin: clamp(18px, 2.4vw, 26px) 0; padding: 16px 20px; border-left: 3px solid var(--cab-akzent); border-radius: 0 var(--cab-radius-button) var(--cab-radius-button) 0; background: var(--cab-akzent-tinte); line-height: 1.6; } .la-merk--still { border-left-color: var(--cab-linie-stark); background: var(--cab-flaeche); } .la-merk > :first-child { margin-top: 0; } .la-merk > :last-child { margin-bottom: 0; } /* Ortsnamen als Marken statt als Komma-Kette: "Altstadt, Neustadt, Striesen, Pieschen, …" in einem Satz liest niemand zu Ende - wer seinen Stadtteil sucht, findet ihn hier beim Ueberfliegen. */ .la-marken { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .la-marken li { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--cab-linie); background: var(--cab-karte-bg); font-size: .875rem; line-height: 1.3; } .la-band .la-marken li { background: var(--cab-bg); } .la-marken--still li { background: transparent; color: var(--cab-sekundaer); } /* Aufzaehlung mit Haken statt Punkten - fuer Leistungen und Zusagen. */ .la-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .la-punkte li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; max-width: calc(var(--la-mass) + 32px); /* Zeichen + Zeichenspalte */ } .la-punkte svg { flex: 0 0 auto; margin-top: 3px; color: var(--cab-akzent-text); } .la-punkte b { display: block; } /* --- Nummerierte Schritte (keine Icon-Cards) ------------------------- */ .la-schritte { list-style: none; margin: 0; padding: 0; counter-reset: la-schritt; max-width: var(--la-mass); } .la-schritte li { counter-increment: la-schritt; position: relative; padding: 0 0 24px 56px; } .la-schritte li:last-child { padding-bottom: 0; } .la-schritte li::before { content: counter(la-schritt); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--cab-akzent-tinte); color: var(--cab-akzent-text); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; } /* Der Faden zwischen den Marken: macht aus fuenf Kreisen einen Ablauf. */ .la-schritte li::after { content: ""; position: absolute; left: 18px; top: 42px; bottom: 8px; width: 2px; background: var(--cab-linie); } .la-schritte li:last-child::after { display: none; } .la-schritte b, .la-schritte strong { display: block; margin-bottom: 3px; } /* Das Mass gilt auch dort, wo die LISTE breit sein darf. In der Teilung steht die Liste ueber 700 px - gemessen 79 Zeichen je Zeile. Wer am Zeilenende ist, findet den Anfang der naechsten nicht mehr sicher wieder; deshalb bleibt der Text bei ~65 Zeichen, auch wenn der Abschnitt breiter ist. */ .la-schritte span, .la-schritte li { max-width: var(--la-mass); } .la-schritte span { color: var(--cab-sekundaer); line-height: 1.6; display: block; } .la-schritte--reihe li { max-width: none; } /* Waagerechte Fassung: drei bis vier Schritte nebeneinander statt untereinander - dieselbe Liste, andere Richtung. */ .la-schritte--reihe { max-width: none; display: grid; gap: clamp(20px, 2.6vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .la-schritte--reihe li { padding: 0; } .la-schritte--reihe li::before { position: static; margin-bottom: 14px; } .la-schritte--reihe li::after { display: none; } /* --- Tarif-Tabelle --------------------------------------------------- Preise gehoeren rechts und in gleiche Ziffernbreite - sonst kann man zwei Betraege untereinander nicht vergleichen, und genau dafuer steht die Tabelle da. */ .la-tabelle-rollen { overflow-x: auto; border: 1px solid var(--cab-linie); border-radius: var(--cab-radius-karte); background: var(--cab-karte-bg); } .la-band .la-tabelle-rollen, .la-kasten .la-tabelle-rollen { background: var(--cab-bg); } .la-tarif-tabelle { border-collapse: collapse; width: 100%; font-size: .9375rem; } .la-tarif-tabelle th, .la-tarif-tabelle td { text-align: left; padding: 13px 16px; border-top: 1px solid var(--cab-linie); } .la-tarif-tabelle thead th { border-top: 0; font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cab-sekundaer); white-space: nowrap; } .la-tarif-tabelle tbody tr:hover td { background: var(--cab-flaeche); } .la-tarif-tabelle td:last-child, .la-tarif-tabelle th:last-child { white-space: nowrap; } .la-tarif-tabelle .zahl, .la-tarif-tabelle th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; } /* --- FAQ (details/summary, Inhalt im HTML = indexierbar) ------------- */ .la-faq { max-width: none; border-top: 1px solid var(--cab-linie); } .la-faq details { border-bottom: 1px solid var(--cab-linie); } .la-faq summary { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; padding: 18px 40px 18px 0; cursor: pointer; list-style: none; position: relative; min-height: 44px; } .la-faq summary::-webkit-details-marker { display: none; } /* Plus/Minus statt Pfeil: das Zeichen sagt "hier kommt mehr", nicht "hier geht es weiter". */ .la-faq summary::before, .la-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; background: var(--cab-sekundaer); border-radius: 1px; transition: transform .15s, opacity .15s; } .la-faq summary::before { width: 13px; height: 2px; transform: translateY(-50%); } .la-faq summary::after { width: 2px; height: 13px; transform: translate(5.5px, -50%); } .la-faq details[open] summary::after { opacity: 0; transform: translate(5.5px, -50%) rotate(90deg); } .la-faq details[open] summary { color: var(--cab-akzent-text); } .la-faq details p { margin: 0 0 18px; max-width: var(--la-mass); line-height: 1.65; } @media (prefers-reduced-motion: reduce) { .la-faq summary::before, .la-faq summary::after { transition: none; } } /* --- Stadtabfrage (Unternehmerseite): Fall A/B ----------------------- */ .la-fall { border-radius: var(--cab-radius-button); padding: 14px 16px; margin-top: 14px; font-size: .9375rem; line-height: 1.55; } .la-fall--aktiv { background: var(--cab-erfolg-tinte); color: var(--cab-vg); } /* Fall B ist eine Einladung, kein Fehler - deshalb Akzentton, kein Rot */ .la-fall--neu { background: var(--cab-akzent-tinte); color: var(--cab-vg); } /* --- Fusszeile ------------------------------------------------------- */ .la-fuss { border-top: 1px solid var(--cab-linie); background: var(--cab-karte-bg); padding: clamp(40px, 5vw, 64px) 0 28px; font-size: .875rem; color: var(--cab-sekundaer); } .la-fuss__spalten { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 640px) { .la-fuss__spalten { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .la-fuss__spalten { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } } .la-fuss h2 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--cab-vg); margin: 0 0 12px; } .la-fuss ul { list-style: none; margin: 0; padding: 0; } .la-fuss li { margin-bottom: 2px; } /* 44 px Zeilenhoehe: Fusszeilen-Links werden auf dem Telefon getippt, nicht nur gelesen. Platz nach unten ist in einer Fusszeile das billigste, was es gibt. */ .la-fuss a { color: var(--cab-sekundaer); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0; line-height: 1.4; } .la-fuss__marke .cab-wortmarke { min-height: 44px; } .la-fuss a:hover { color: var(--cab-akzent-text); } .la-fuss__marke p { margin: 12px 0 0; max-width: 26rem; line-height: 1.6; } .la-fuss__marke .cab-wortmarke img { height: 26px; width: auto; } /* Die Schlusszeile: Rechtszeile links, Themenwahl rechts. Die Seite hat zwei Modi - ohne Schalter kann man den zweiten nicht waehlen. */ .la-fuss__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--cab-linie); font-size: .8125rem; } .la-thema { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--cab-linie-stark); border-radius: 12px; background: transparent; color: var(--cab-vg); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; } .la-thema:hover { background: var(--cab-flaeche); } .la-thema svg { width: 17px; height: 17px; } /* ── APP-STREIFEN ───────────────────────────────────────────────────── Steht auf JEDER oeffentlichen Seite ueber der Fusszeile (Wunsch Steven, 07.08.): App-Symbol links, Nutzen und Knoepfe rechts. Auf dem Handy untereinander, damit das Symbol nicht die halbe Zeile frisst. Keine Karte mit Schatten - der Streifen ist Teil der Seite, keine Werbeflaeche, die man wegklickt. */ .la-app { border-top: 1px solid var(--cab-linie); } /* Nur die Landing-Fassung traegt eine eigene Flaeche - in der Buchung liegt der Streifen in fremdem Layout (siehe cabAppStreifen). */ .la-app--band { background: var(--cab-flaeche); } /* DERSELBE FALL WIE BEIM AKZENTBAND, NUR EINE FLAECHE WEITER. Gemessen im hellen Thema: --cab-sekundaer #667085 auf --cab-flaeche #eef0f3 ergibt 4,36:1 - unter AA (4,5:1 fuer Text bis 24 px). Betroffen war der gesamte Fliesstext des Streifens, und der steht auf jeder Seite. Im dunklen Thema passt es (#99a0ac auf #1d2026 = 6,20:1); die Regel setzt deshalb die volle Textfarbe, die in beiden Themen stimmt. */ .la-app--band .la-lead, .la-app--band .la-app-wege { color: var(--cab-vg); } .la-app-inhalt { display: flex; gap: clamp(20px, 3vw, 36px); align-items: center; flex-wrap: wrap; } .la-app-icon { width: 88px; height: 88px; border-radius: 20px; flex: 0 0 auto; box-shadow: 0 2px 10px rgb(0 0 0 / 12%); } .la-app-text { flex: 1 1 320px; min-width: 0; } .la-app-text .la-h2 { margin-top: 0; } .la-app-text .la-lead { margin-bottom: 0; } /* Abstand ausdruecklich, nicht geerbt: In der Buchungshuelle setzt buchung.css h1,h2,h3,p,ul,ol auf margin:0 - der Absatz klebte dort an Ueberschrift und Knoepfen. */ .la-app-wege { font-size: .9375rem; line-height: 1.65; color: var(--cab-sekundaer); max-width: var(--la-mass); margin: 14px 0 0; } /* Die Knoepfe standen ueber die ganze Spalte - .cab-btn ist von Haus aus ein Blockknopf der App-Schicht. Im Fliess-Layout einer Landing- Seite gehoert ein Knopf so breit zu sein wie seine Beschriftung. */ .la-app-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .la-app-knoepfe .cab-btn { width: auto; } /* Auf /app ist das Symbol kein Beiwerk, sondern das einzige Bild, das die Seite ehrlich zeigen kann - dort ist es gross und steht allein. Die Klasse gab es im Markup schon, im Stylesheet nie: sie tat nichts. */ .la-app-icon--gross { width: 120px; height: 120px; border-radius: 27px; } @media (max-width: 480px) { .la-app-icon { width: 64px; height: 64px; border-radius: 15px; } .la-app-icon--gross { width: 96px; height: 96px; border-radius: 22px; } } /* ===================================================================== * RECHTSTEXTE (AGB, Impressum, Datenschutz) * * Sie duerfen schlicht sein, aber nicht lieblos: Bis 07.08. trug jede * der drei Seiten ihren eigenen