/* ========================================================================== Portal-Demo — Stylesheet Die Farbwerte stehen NICHT hier, sondern als CSS-Variablen im (aus portal.config.js). Diese Datei benutzt sie nur. Design-Wechsel = Config tauschen, hier nichts anfassen. Haltung: Data-Dense Dashboard. Dichte Raster, ruhige Flaechen, Farbe ausschliesslich fuer Status — und nie ohne Text daneben. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--schrift-grund); font-size: 15px; line-height: 1.55; color: var(--f-text); background: var(--f-seite); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; } h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; } p { margin: 0; } a { color: inherit; } /* Zahlen in Tabellen duerfen nicht springen. */ table, .zahl, time, .kennzahl-wert { font-variant-numeric: tabular-nums; } .icon { width: 20px; height: 20px; flex: none; } .icon-s { width: 16px; height: 16px; } /* Nur fuer Vorlesehilfen sichtbar */ .nur-vorlesehilfe { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Ortsangaben in Erklaertexten. Am Schreibtisch steht der Personenwechsel unten links, am Telefon oben rechts — ein Text mit fester Richtung ist deshalb auf einem der beiden Geraete schlicht falsch. Die Seiten werden am Server gebaut und kennen die Fensterbreite nicht; die richtige Fassung waehlt darum das Stylesheet. (Im Erklaermodus macht das tutorial.js selbst, dort sind die Texte in JavaScript.) */ .wenn-schmal { display: none; } @media (max-width: 860px) { .wenn-breit { display: none; } .wenn-schmal { display: inline; } } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--f-akzent); outline-offset: 2px; border-radius: 3px; } /* --- Grundgeruest --------------------------------------------------------- */ .rahmen { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; min-height: 100dvh; } .seitenleiste { background: var(--f-karte); border-right: 1px solid var(--f-linie); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; } .marke { padding: 18px 20px 14px; border-bottom: 1px solid var(--f-linie); } .marke-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .marke-zusatz { font-size: 11.5px; color: var(--f-text-schwach); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .navi { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; } .navi-titel { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f-text-schwach); padding: 12px 10px 6px; } .navi a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-klein); text-decoration: none; color: var(--f-text-leise); font-size: 14px; font-weight: 500; transition: background-color .15s ease, color .15s ease; } .navi a:hover { background: var(--f-gedaempft); color: var(--f-text); } .navi a[aria-current="page"] { background: var(--f-akzent-hell); color: var(--f-text); font-weight: 600; } .navi a[aria-current="page"] .icon { color: var(--f-akzent); } .navi .zaehler { margin-left: auto; font-size: 11.5px; font-weight: 600; background: var(--f-wartet-flaeche); color: var(--f-wartet-text); border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; } /* Personenwechsel unten in der Leiste */ .wechsler { border-top: 1px solid var(--f-linie); padding: 12px 14px 14px; } .wechsler-titel { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--f-text-schwach); margin-bottom: 8px; } .wechsler select { width: 100%; font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--f-linie); border-radius: var(--r-klein); background: var(--f-karte); color: var(--f-text); cursor: pointer; } .wechsler-rolle { font-size: 12px; color: var(--f-text-schwach); margin-top: 6px; } /* --- Inhaltsspalte -------------------------------------------------------- */ .inhalt { display: flex; flex-direction: column; min-width: 0; } .kopf { background: var(--f-karte); border-bottom: 1px solid var(--f-linie); padding: 16px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .kopf-text { min-width: 0; } .kopf-unter { font-size: 13.5px; color: var(--f-text-leise); margin-top: 3px; } .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; } .demo-fahne { font-size: 12px; color: var(--f-text-leise); background: var(--f-gedaempft); border: 1px solid var(--f-linie); border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; } .demo-fahne .icon { color: var(--f-text-schwach); } /* Wer bin ich gerade — Mitarbeiter neutral, Betriebsleitung in Akzentfarbe, damit ein Rollenwechsel sofort sichtbar ist. */ .rollen-fahne { font-size: 12px; font-weight: 600; color: var(--f-text-leise); background: var(--f-gedaempft); border: 1px solid var(--f-linie); border-radius: 999px; padding: 4px 11px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .rollen-fahne .icon { color: var(--f-text-schwach); } .rollen-fahne-chef { background: var(--f-akzent-hell); border-color: color-mix(in srgb, var(--f-akzent) 35%, transparent); color: var(--f-akzent-dunkel); } .rollen-fahne-chef .icon { color: var(--f-akzent); } main.blatt { padding: 22px 28px 56px; display: flex; flex-direction: column; gap: 18px; max-width: 1400px; width: 100%; } /* --- Systemmeldung -------------------------------------------------------- */ /* Der Beleg, dass das Portal selbst etwas getan hat. Sachlich formuliert, keine Werbung — es ist eine Systemmeldung, kein Verkaufsargument. */ .meldung { display: flex; gap: 11px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r-mittel); border: 1px solid transparent; font-size: 14px; line-height: 1.5; } .meldung .icon { margin-top: 1px; } .meldung-ok { background: var(--f-ok-flaeche); color: var(--f-ok-text); border-color: color-mix(in srgb, var(--f-ok-text) 20%, transparent); } .meldung-info { background: var(--f-info-flaeche); color: var(--f-info-text); border-color: color-mix(in srgb, var(--f-info-text) 20%, transparent); } .meldung-warnung { background: var(--f-wartet-flaeche); color: var(--f-wartet-text); border-color: color-mix(in srgb, var(--f-wartet-text) 20%, transparent); } .meldung-problem { background: var(--f-problem-flaeche); color: var(--f-problem-text); border-color: color-mix(in srgb, var(--f-problem-text) 20%, transparent); } .meldung b { font-weight: 650; } /* --- Karten --------------------------------------------------------------- */ .karte { background: var(--f-karte); border: 1px solid var(--f-linie); border-radius: var(--r-gross); overflow: hidden; } .karte-kopf { padding: 14px 18px; border-bottom: 1px solid var(--f-linie); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .karte-kopf h2 { margin-right: auto; } .karte-koerper { padding: 18px; } .karte-koerper-eng { padding: 0; } .karte-fuss { padding: 12px 18px; border-top: 1px solid var(--f-linie); background: var(--f-gedaempft); font-size: 13px; color: var(--f-text-leise); } .raster { display: grid; gap: 16px; } .raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .raster-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .raster-haupt { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } /* --- Kennzahlen ----------------------------------------------------------- */ .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .kennzahl { padding: 15px 18px; border-right: 1px solid var(--f-linie); } .kennzahl:last-child { border-right: 0; } .kennzahl-titel { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--f-text-schwach); } .kennzahl-wert { font-size: 25px; font-weight: 680; letter-spacing: -0.02em; margin-top: 5px; line-height: 1.1; } .kennzahl-zusatz { font-size: 12.5px; color: var(--f-text-leise); margin-top: 3px; } /* --- Tabellen ------------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; } thead th { text-align: left; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-text-schwach); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--f-linie); white-space: nowrap; } tbody td { padding: 11px 14px; border-bottom: 1px solid var(--f-linie); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--f-gedaempft); } td.rechts, th.rechts { text-align: right; } .tabelle-umbruch { overflow-x: auto; } .leer { padding: 34px 18px; text-align: center; color: var(--f-text-leise); font-size: 14px; } .leer-titel { font-weight: 600; color: var(--f-text); margin-bottom: 4px; } /* --- Status --------------------------------------------------------------- */ /* Immer Text. Farbe ist Zugabe, nie der einzige Traeger der Information. */ .status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .status-ok { background: var(--f-ok-flaeche); color: var(--f-ok-text); } .status-wartet { background: var(--f-wartet-flaeche); color: var(--f-wartet-text); } .status-problem { background: var(--f-problem-flaeche); color: var(--f-problem-text); } .status-info { background: var(--f-info-flaeche); color: var(--f-info-text); } .status-neutral { background: var(--f-gedaempft); color: var(--f-text-leise); } /* --- Schaltflaechen ------------------------------------------------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 10px 16px; min-height: 40px; border-radius: var(--r-klein); border: 1px solid var(--f-linie); background: var(--f-karte); color: var(--f-text); cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .knopf:hover { background: var(--f-gedaempft); border-color: var(--f-linie-stark); } .knopf:active { transform: translateY(0.5px); } .knopf-haupt { background: var(--f-akzent); border-color: var(--f-akzent); color: var(--f-auf-akzent); } .knopf-haupt:hover { background: var(--f-akzent-dunkel); border-color: var(--f-akzent-dunkel); } .knopf-klein { font-size: 13px; padding: 7px 11px; min-height: 34px; } .knopf-still { border-color: transparent; background: transparent; color: var(--f-text-leise); } .knopf-still:hover { background: var(--f-gedaempft); color: var(--f-text); } .knopf-gefahr { color: var(--f-problem-text); border-color: color-mix(in srgb, var(--f-problem-text) 28%, transparent); } .knopf-gefahr:hover { background: var(--f-problem-flaeche); } .knopf[disabled] { opacity: .45; cursor: not-allowed; } .knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* --- Formulare ------------------------------------------------------------ */ .feld { display: flex; flex-direction: column; gap: 5px; } .feld label { font-size: 13px; font-weight: 600; color: var(--f-text); } .feld-hinweis { font-size: 12.5px; color: var(--f-text-leise); } input[type="text"], input[type="date"], input[type="time"], input[type="number"], select, textarea { font: inherit; font-size: 14px; padding: 9px 11px; min-height: 40px; border: 1px solid var(--f-linie-stark); border-radius: var(--r-klein); background: var(--f-karte); color: var(--f-text); width: 100%; } textarea { min-height: 84px; resize: vertical; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--f-akzent); outline-offset: 0; border-color: var(--f-akzent); } fieldset { border: 0; padding: 0; margin: 0; display: contents; } /* --- Person ---------------------------------------------------------------*/ .kuerzel { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; flex: none; background: var(--f-akzent-hell); color: var(--f-akzent-dunkel); font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; } .kuerzel-s { width: 22px; height: 22px; font-size: 10px; } .person-zeile { display: flex; align-items: center; gap: 9px; min-width: 0; } .person-name { font-weight: 550; } .person-funktion { font-size: 12.5px; color: var(--f-text-leise); } /* --- Wochenraster (Dienstplan) -------------------------------------------- */ .woche { display: grid; grid-template-columns: 180px repeat(5, minmax(0, 1fr)); font-size: 13px; } /* Der Zeilen-Wrapper ist auf grossen Bildschirmen DURCHSICHTIG: `contents` loest ihn aus dem Kasten-Baum, seine sechs Kinder liegen direkt im Raster. Ohne das waere jede Person EIN Rasterfeld — die Namen stuenden nebeneinander statt untereinander und der Plan waere unlesbar. Am Telefon wird er zur Karte (siehe unten). */ .woche-zeile { display: contents; } .woche-kopf { padding: 9px 10px; border-bottom: 1px solid var(--f-linie); border-right: 1px solid var(--f-linie); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f-text-schwach); background: var(--f-gedaempft); position: sticky; top: 0; z-index: 1; } .woche-kopf.heute { color: var(--f-akzent-dunkel); background: var(--f-akzent-hell); } .woche-name { padding: 9px 10px; border-bottom: 1px solid var(--f-linie); border-right: 1px solid var(--f-linie); display: flex; align-items: center; gap: 8px; background: var(--f-karte); position: sticky; left: 0; } .woche-zelle { padding: 7px 8px; border-bottom: 1px solid var(--f-linie); border-right: 1px solid var(--f-linie); min-height: 62px; display: flex; flex-direction: column; gap: 3px; } .woche-zelle:last-child { border-right: 0; } .woche-zelle.heute { background: color-mix(in srgb, var(--f-akzent-hell) 55%, transparent); } .schicht-zeit { font-weight: 650; font-size: 12.5px; } .schicht-ort { font-size: 12px; color: var(--f-text-leise); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .zelle-frei { color: var(--f-text-schwach); font-size: 12.5px; } /* --- Kleinteile ----------------------------------------------------------- */ .leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .leiste-ende { margin-left: auto; } .trenner { height: 1px; background: var(--f-linie); border: 0; margin: 0; } .leise { color: var(--f-text-leise); } .schwach { color: var(--f-text-schwach); } .klein { font-size: 12.5px; } .mono { font-family: var(--schrift-mono); font-size: 12.5px; } .stapel { display: flex; flex-direction: column; gap: 14px; } .stapel-eng { display: flex; flex-direction: column; gap: 8px; } .nowrap { white-space: nowrap; } .balken { height: 6px; border-radius: 999px; background: var(--f-gedaempft); overflow: hidden; } .balken > span { display: block; height: 100%; background: var(--f-akzent); border-radius: 999px; } /* Lesestand — Punktreihe statt Prozentzahl, auf einen Blick erfassbar */ .punkte { display: flex; gap: 3px; flex-wrap: wrap; } .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--f-linie-stark); opacity: .35; } .punkt.an { background: var(--f-ok-text); opacity: 1; } details.aufklapp > summary { cursor: pointer; padding: 10px 14px; font-size: 13.5px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; } details.aufklapp > summary::-webkit-details-marker { display: none; } /* Erklärsatz oben in jedem Bereich — ruhig, keine Kachel, kein Kasten. */ .bereich-hinweis { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--f-text-leise); margin: -2px 0 -4px; } .bereich-hinweis .icon { margin-top: 2px; color: var(--f-text-schwach); } .bereich-hinweis b { color: var(--f-text); font-weight: 600; } /* --- Geführte Runde ------------------------------------------------------- */ /* Liegt fest am unteren Rand, nimmt aber keinen Inhalt weg: main bekommt unten genug Luft (siehe .fuehrung ~ Regel). Kein Overlay, keine Sperre — man kann waehrend der Fuehrung ganz normal weiterklicken. */ .fuehrung { position: sticky; bottom: 0; z-index: 40; background: var(--f-karte); border-top: 1px solid var(--f-linie-stark); box-shadow: 0 -10px 30px -18px rgba(26, 31, 46, 0.3); } .fuehrung-innen { max-width: 1400px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: flex-start; gap: 18px; } .fuehrung-zaehler { font-size: 19px; font-weight: 700; color: var(--f-akzent); background: var(--f-akzent-hell); border-radius: var(--r-mittel); padding: 8px 12px; flex: none; line-height: 1.15; font-variant-numeric: tabular-nums; } .fuehrung-zaehler span { font-size: 12px; font-weight: 600; color: var(--f-text-schwach); } .fuehrung-text { min-width: 0; flex: 1; } .fuehrung-titel { font-weight: 650; margin-bottom: 3px; } .fuehrung-text p { color: var(--f-text-leise); } .fuehrung-tun { margin-top: 6px; display: flex; align-items: flex-start; gap: 6px; color: var(--f-akzent-dunkel); font-weight: 550; } .fuehrung-tun .icon { margin-top: 2px; } .fuehrung-knoepfe { display: flex; gap: 7px; align-items: center; flex: none; } /* --- Erklärmodus ---------------------------------------------------------- */ /* Abdunkeln + Ausschnitt. Das Loch entsteht durch einen riesigen Schlagschatten auf dem Ausschnitt-Rechteck — dadurch braucht es keine vier Einzelflächen und keine clip-path-Rechnerei, und der Ausschnitt bleibt exakt. ALLES hier hat pointer-events:none ausser der Sprechblase: die erklärte Schaltfläche muss anklickbar bleiben, sonst kann man nichts ausprobieren. */ .tut { position: fixed; inset: 0; z-index: 900; pointer-events: none; } .tut-dunkel { position: absolute; inset: 0; background: rgba(17, 20, 26, 0.62); } /* Sobald ein Element hervorgehoben ist, uebernimmt das Loch das Abdunkeln. */ .tut-loch:not([hidden]) ~ .tut-dunkel { display: none; } .tut-loch { position: fixed; border-radius: var(--r-mittel); box-shadow: 0 0 0 9999px rgba(17, 20, 26, 0.62), 0 0 0 3px var(--f-akzent); transition: top .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1); } /* Der Puls — ein zweiter Ring, der nach aussen laeuft und verblasst. */ .tut-loch::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 3px solid var(--f-akzent); animation: tut-puls 1.8s ease-out infinite; } @keyframes tut-puls { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(1.06); opacity: 0; } 100% { transform: scale(1.06); opacity: 0; } } .tut-blase { position: fixed; pointer-events: auto; background: var(--f-karte); color: var(--f-text); border-radius: var(--r-gross); box-shadow: 0 24px 60px -18px rgba(17, 20, 26, 0.45); padding: 16px 18px 14px; max-width: calc(100vw - 32px); } .tut-blase.tut-mitte { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); } .tut-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .tut-schritt { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--f-akzent); font-weight: 700; } .tut-zu { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 600; background: none; border: 0; color: var(--f-text-schwach); cursor: pointer; padding: 4px 2px; } .tut-zu:hover { color: var(--f-text); } .tut-titel { font-size: 16px; margin-bottom: 6px; } .tut-text { font-size: 14px; line-height: 1.55; color: var(--f-text-leise); } .tut-text b { color: var(--f-text); font-weight: 650; } .tut-fuss { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .tut-punkte { display: flex; gap: 4px; margin-right: auto; } .tut-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--f-linie-stark); opacity: .3; } .tut-punkt.vorbei { opacity: .55; } .tut-punkt.an { background: var(--f-akzent); opacity: 1; width: 16px; border-radius: 999px; } .tut-fuss button { font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 8px 14px; min-height: 38px; border-radius: var(--r-klein); border: 1px solid var(--f-linie); background: var(--f-karte); color: var(--f-text); } .tut-fuss .tut-weiter { background: var(--f-akzent); border-color: var(--f-akzent); color: var(--f-auf-akzent); } .tut-fuss .tut-weiter:hover { background: var(--f-akzent-dunkel); } .tut-fuss button[hidden] { display: none; } @media (max-width: 860px) { .tut-blase { padding: 14px 15px 12px; } .tut-titel { font-size: 15px; } .tut-text { font-size: 13.5px; } /* Die Sprechblase darf nie mehr als die halbe Höhe nehmen: was sie belegt, fehlt der Markierung. Ein langer Text wird deshalb scrollbar, statt den Platz aufzubrauchen, in dem gezeigt wird, wovon er handelt. */ .tut-blase:not(.tut-mitte) { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; } } @media (prefers-reduced-motion: reduce) { .tut-loch { transition: none; } .tut-loch::after { animation: none; opacity: .8; } } /* --- Schmale Bildschirme -------------------------------------------------- */ @media (max-width: 1080px) { .raster-haupt, .raster-3, .raster-4 { grid-template-columns: minmax(0, 1fr); } .raster-2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 860px) { .rahmen { grid-template-columns: 1fr; } /* Die Kopfzeile war der Grund, warum am Telefon JEDE Seite quer zu schieben war: `.kopf-rechts` sammelt Rollen- und Demo-Fahne, wurde per margin-left:auto nach rechts gedrückt und durfte nicht umbrechen — 511 px Inhalt auf einem 390-px-Schirm, gemessen 30.07.2026 auf allen sechs Seiten. Jetzt rutscht der Block in eine eigene Zeile und darf umbrechen. */ .kopf-rechts { margin-left: 0; flex-basis: 100%; flex-wrap: wrap; gap: 8px; } .rollen-fahne { white-space: normal; } .kopf { gap: 12px; } /* Zwei Zeilen: oben Marke + Personenwechsel, darunter die Bereiche über die volle Breite. In einer einzigen Zeile drängt der Wechsler die Navigation aus dem Bild — sichtbar bleibt dann nur das erste Symbol, und die fünf Bereiche sind am Telefon unerreichbar. */ .seitenleiste { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 8px; border-right: 0; border-bottom: 1px solid var(--f-linie); padding: 0 10px; } .marke { border-bottom: 0; padding: 12px 10px 12px 6px; white-space: nowrap; } .marke-zusatz { display: none; } .navi { flex-direction: row; padding: 6px 0 8px; gap: 4px; flex-basis: 100%; order: 3; overflow-x: auto; border-top: 1px solid var(--f-linie); margin-top: 2px; } .navi-titel { display: none; } .navi a { white-space: nowrap; padding: 9px 11px; min-height: 44px; } /* Auf schmalen Bildschirmen ist neben sechs Icons kein Platz fuer Text. Die Beschriftung wird deshalb NUR VISUELL entfernt — mit display:none waere sie auch aus dem Accessibility-Tree verschwunden und die Leiste bestuende fuer Vorlesehilfen aus sechs namenlosen Links. */ .navi a span.beschriftung { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .navi a[aria-current="page"] span.beschriftung { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } .wechsler { border-top: 0; padding: 8px 4px 8px 10px; margin-left: auto; } .wechsler-titel, .wechsler-rolle { display: none; } .wechsler select { width: auto; max-width: 44vw; } .kopf { padding: 14px 16px; } main.blatt { padding: 16px 16px 48px; } .kennzahl { border-right: 0; border-bottom: 1px solid var(--f-linie); } .woche { grid-template-columns: 132px repeat(5, minmax(112px, 1fr)); min-width: 700px; } /* Auf dem Handy stapeln sich Zähler, Text und Knöpfe untereinander — nebeneinander bliebe für den Text keine lesbare Zeilenbreite. */ .fuehrung-innen { padding: 12px 16px; flex-wrap: wrap; gap: 10px; } .fuehrung-zaehler { font-size: 15px; padding: 5px 9px; } .fuehrung-text { flex-basis: 100%; order: 2; } .fuehrung-knoepfe { order: 3; margin-left: auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Fuß mit den Pflichtangaben */ .seiten-fuss { margin-top: auto; padding-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--f-text-schwach); } .seiten-fuss a { color: var(--f-text-leise); text-decoration: none; } .seiten-fuss a:hover { color: var(--f-text); text-decoration: underline; } /* --- Telefon (bis 700px) -------------------------------------------------- Am 30.07.2026 durchgemessen: die Demo war auf den PC ausgelegt. Jede der sechs Seiten liess sich quer schieben (511 px Kopfzeile auf 390 px Schirm), Tabellen ragten aus dem Bild, und `/einsaetze` wurde 16 Bildschirme lang, weil in zu schmalen Spalten jede Zeile mehrfach umbrach. Grundsatz hier: eine Tabelle ist am Telefon keine Tabelle. Jede Zeile wird zu einer Karte, die Spaltenueberschrift wandert als Beschriftung neben den Wert (`data-titel`). Die Information bleibt vollstaendig — sie wird nur gestapelt statt nebeneinandergestellt. Nichts wird ausgeblendet. */ @media (max-width: 700px) { /* --- Tabellen als Karten --- */ .tabelle-umbruch { overflow-x: visible; } .tabelle-umbruch table, .tabelle-umbruch tbody, .tabelle-umbruch tr, .tabelle-umbruch td { display: block; width: auto; } .tabelle-umbruch thead { display: none; } .tabelle-umbruch tr { border: 1px solid var(--f-linie); border-radius: var(--r-klein); padding: 12px 14px; margin-bottom: 10px; background: var(--f-karte); } .tabelle-umbruch tr:last-child { margin-bottom: 0; } .tabelle-umbruch tbody tr:hover { background: var(--f-karte); } .tabelle-umbruch td { border-bottom: 0; padding: 5px 0; text-align: left; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } /* Die fuehrende Zelle traegt den Namen der Zeile — sie bekommt keine Beschriftung, sondern steht als Ueberschrift der Karte oben. */ .tabelle-umbruch td[data-haupt] { display: block; padding: 0 0 8px; border-bottom: 1px solid var(--f-linie); margin-bottom: 6px; } .tabelle-umbruch td[data-titel]::before { content: attr(data-titel); flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--f-text-schwach); text-transform: none; letter-spacing: 0; } /* Rechtsbuendigkeit ist eine Spalten-Eigenschaft und ergibt gestapelt keinen Sinn — sonst klebt der Wert an der falschen Kante. */ .tabelle-umbruch td.rechts { text-align: left; } /* Die Aktionszelle steht als Knopf unten, ueber die volle Breite. */ .tabelle-umbruch td[data-aktion] { display: block; padding: 8px 0 0; } .tabelle-umbruch td[data-aktion]:empty { display: none; } .tabelle-umbruch td[data-aktion] .knopf { width: 100%; justify-content: center; } /* colspan-Zellen ("Kein Eintrag") sollen nicht wie ein Wertepaar wirken. */ .tabelle-umbruch td[colspan] { display: block; } /* --- Wochenplan: je Person eine Karte, die Tage untereinander --- */ .woche { display: block; min-width: 0; } .woche > .woche-kopf { display: none; } .woche-zeile { display: block; border: 1px solid var(--f-linie); border-radius: var(--r-klein); background: var(--f-karte); padding: 12px 14px; margin-bottom: 10px; } .woche-zeile:last-child { margin-bottom: 0; } .woche-name { border: 0; border-bottom: 1px solid var(--f-linie); padding: 0 0 8px; margin-bottom: 4px; } /* BLOCK, nicht flex: ein Flex-Container blockifiziert seine Kinder, das `display:inline` auf Zeit und Ort wird dann ignoriert und jede Zelle wuchs auf drei Zeilen (109 px x 50 Zellen = elf Bildschirme, am 30.07.2026 nachgemessen). Als Block fliesst alles in einer Zeile. */ .woche-zelle { border: 0; padding: 5px 0; min-height: 0; display: block; } .woche-zelle::before { content: attr(data-tag); display: inline-block; min-width: 5.2em; font-size: 12.5px; font-weight: 600; color: var(--f-text-schwach); } /* Zeit und Ort laufen in EINER Zeile weiter, durch einen Punkt getrennt. */ .woche-zelle .schicht-zeit, .woche-zelle .schicht-ort, .woche-zelle .status, .woche-zelle .zelle-frei { display: inline; } .woche-zelle .schicht-ort::before { content: " · "; color: var(--f-text-schwach); } .woche-zelle .schicht-ort { color: var(--f-text-leise); } /* --- Tippziele und Schriftgroessen --- Unter 44 px trifft man am Telefon nicht zuverlaessig; unter 13 px liest sich Text auf Armlaenge nicht mehr weg. */ .knopf, .knopf-klein, .navi a, .wechsler button, .wechsler select, select, input, textarea, button, /* .feld input setzt 40px und ist spezifischer — hier gleichziehen. */ .feld input, .feld select, .feld textarea { min-height: 44px; } .knopf, .knopf-klein { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; } /* iOS zoomt beim Antippen in jedes Feld unter 16px hinein — und zoomt danach nicht von selbst zurueck. */ select, input, textarea { font-size: 16px; } /* Die Fusszeilen-Links waren 20 px hoch. Sie bleiben im Textfluss, bekommen aber eine antippbare Hoehe. */ .seiten-fuss { gap: 4px 16px; } .seiten-fuss a { display: inline-flex; align-items: center; min-height: 44px; } /* Die Zeilen unter "Wartet auf Sie" sind ganze Aufgaben — jede eine eigene Zeile zum Antippen. */ .karte-koerper a.leiste { min-height: 44px; } /* Fliesstext hoch auf lesbare Groessen. Badges (Kuerzel, Zaehler) bleiben bewusst klein — das sind Marken, kein Text zum Lesen. */ .klein, .seiten-fuss, .kopf-unter, .demo-fahne, .rollen-fahne, .status, .schicht-ort, .zelle-frei, .karte-fuss { font-size: 13px; } .schicht-zeit { font-size: 13.5px; } .kennzahl-titel, .kennzahl-zusatz, .feld-hinweis { font-size: 13px; } table { font-size: 15px; } /* Die beiden Erklaer-Knoepfe wurden auf drei Zeilen gequetscht. */ .knopf-reihe { flex-wrap: wrap; gap: 8px; } } /* --- Aufklappbare Rückmeldung (Einsätze) --------------------------------- Gilt auf jeder Breite: 16 gleichzeitig offene Formulare sind auch am Schreibtisch keine Liste mehr, sondern eine Wand. */ .klapp-rueck { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--f-linie); } .klapp-rueck > summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--f-text-leise); padding: 8px 12px; border: 1px solid var(--f-linie); border-radius: var(--r-klein); background: var(--f-karte); list-style: none; min-height: 40px; width: fit-content; } .klapp-rueck > summary::-webkit-details-marker { display: none; } .klapp-rueck > summary:hover { background: var(--f-gedaempft); color: var(--f-text); } .klapp-rueck[open] > summary { margin-bottom: 2px; color: var(--f-text); } .klapp-rueck > summary .icon { color: var(--f-akzent); }