/* ============================================================================ app.css – kiobet Nüchternes, klares Verwaltungs-Design. Handgeschrieben, kein Build-Step. Design-Tokens in :root, dunkles Schema per prefers-color-scheme. ========================================================================== */ :root { /* Farben (hell) */ --bg: #eef1f4; /* Seitenhintergrund */ --flaeche: #ffffff; /* Karten/Tabellen */ --flaeche-2: #f5f7f9; /* zarte Abhebung */ --text: #1c2430; /* Haupttext */ --text-leise:#5c6775; /* Sekundärtext */ --rahmen: #d4dbe2; /* Linien/Rahmen */ --akzent: #0f6b6b; /* Petrol – sachlicher Akzent */ --akzent-tf: #0a4f4f; /* dunkler bei Hover */ --akzent-bg: #e3f0ef; /* heller Akzenthintergrund */ --ok: #1e7a46; --ok-bg: #e3f3ea; --warn: #8a5a00; --warn-bg: #f7eed8; --gefahr: #b3261e; --gefahr-bg: #f7e3e1; --info-bg: #e6eef6; --info-tf: #234b73; /* Maße */ --radius: 8px; --radius-s: 5px; --abstand: 16px; --max-breite:1080px; --schrift: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --schatten: 0 1px 2px rgba(20, 30, 45, .05), 0 1px 3px rgba(20, 30, 45, .05); --schatten-l:0 6px 20px rgba(20, 30, 45, .10), 0 2px 6px rgba(20, 30, 45, .06); /* Abgeleiteter Abstands-Rhythmus (skaliert mit --abstand) */ --abstand-s: calc(var(--abstand) * .5); --abstand-l: calc(var(--abstand) * 1.5); } /* Dunkel: automatisch per Betriebssystem – ausser der Nutzer hat fest "Hell" gewählt – ODER fest auf "Dunkel" gestellt (data-theme am ). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --bg: #131820; --flaeche: #1b232e; --flaeche-2: #222c39; --text: #e7edf3; --text-leise:#9aa7b5; --rahmen: #313d4c; --akzent: #45c0bb; --akzent-tf: #6fd3cf; --akzent-bg: #173433; --ok: #5cc98a; --ok-bg: #15301f; --warn: #d8a13a; --warn-bg: #332912; --gefahr: #ef6a62; --gefahr-bg: #371a18; --info-bg: #16273a; --info-tf: #9cc2e8; --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten-l:0 8px 24px rgba(0,0,0,.5); } } :root[data-theme="dunkel"] { --bg: #131820; --flaeche: #1b232e; --flaeche-2: #222c39; --text: #e7edf3; --text-leise:#9aa7b5; --rahmen: #313d4c; --akzent: #45c0bb; --akzent-tf: #6fd3cf; --akzent-bg: #173433; --ok: #5cc98a; --ok-bg: #15301f; --warn: #d8a13a; --warn-bg: #332912; --gefahr: #ef6a62; --gefahr-bg: #371a18; --info-bg: #16273a; --info-tf: #9cc2e8; --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten-l:0 8px 24px rgba(0,0,0,.5); } /* --- Grundlagen --------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--schrift); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; /* kein horizontales Seiten-Scrollen */ overflow-wrap: break-word; /* lange Wörter/URLs brechen statt zu überlaufen */ } /* Medien nie breiter als ihr Container */ img { max-width: 100%; height: auto; } svg, canvas, video, iframe { max-width: 100%; } h1 { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .3rem; } h2 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.005em; margin: 0 0 .5rem; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } code { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 4px; padding: .05em .35em; font-size: .9em; } /* Sichtbarer Tastatur-Fokus (Barrierearmut). */ :focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; } /* --- Kopfzeile / Navigation -------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 20; background: var(--flaeche); border-bottom: 1px solid var(--rahmen); box-shadow: var(--schatten); } /* Modern: leicht durchscheinender Kopf, wo unterstützt (Progressive Enhancement). */ @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .kopf { background: color-mix(in srgb, var(--flaeche) 82%, transparent); -webkit-backdrop-filter: saturate(1.1) blur(10px); backdrop-filter: saturate(1.1) blur(10px); } } .kopf-inner { max-width: var(--max-breite); margin: 0 auto; padding: 0 var(--abstand); min-height: 58px; display: flex; align-items: center; gap: var(--abstand); flex-wrap: wrap; } .marke { font-weight: 700; letter-spacing: .02em; color: var(--text); font-size: 1.1rem; } .marke:hover { text-decoration: none; color: var(--akzent); } .haupt-nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; } .haupt-nav a { color: var(--text-leise); padding: .45rem .7rem; border-radius: var(--radius-s); font-size: .95rem; transition: background .12s, color .12s; } .haupt-nav a:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; } .haupt-nav a[aria-current] { color: var(--akzent); background: var(--akzent-bg); font-weight: 600; } .kopf-rechts { display: flex; align-items: center; gap: .6rem; } /* Hamburger-Schalter ist eine versteckte Checkbox (reiner CSS-Mechanismus). */ .nav-check { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-toggle { display: none; } /* Label nur auf dem Handy sichtbar */ /* Desktop (≥769px): Navigation immer sichtbar, kein Hamburger. */ @media (min-width: 769px) { .kopf-panel { display: contents; } /* nav + rechts werden direkte Flex-Kinder */ } .benutzer-chip { display: flex; flex-direction: column; line-height: 1.15; text-align: right; font-size: .9rem; } .benutzer-chip small { color: var(--text-leise); font-size: .78rem; } /* --- Inhalt ------------------------------------------------------------- */ .inhalt { flex: 1; width: 100%; max-width: var(--max-breite); margin: 0 auto; padding: calc(var(--abstand) * 1.5) var(--abstand); } .seiten-kopf { margin-bottom: var(--abstand); } .seiten-kopf.mit-aktion { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand); flex-wrap: wrap; } .lead { color: var(--text-leise); margin: 0; } /* =========================================================================== Zurück-Link --------------------------------------------------------------------------- Es gibt KEINE eigene Gestaltung mehr. Im Markup steht überall class="btn btn-still" – dieselbe Klasse wie bei jedem anderen ruhigen Knopf. Damit kann das Aussehen gar nicht auseinanderlaufen. .zurueck bleibt nur als Zusatz für den Pfeil. =========================================================================== */ .zurueck::before { content: '\2190'; line-height: 1; margin-right: .35rem; } .zurueck.hat-pfeil::before { content: none; } /* --- Karten / Boxen ----------------------------------------------------- */ .karte, .info-box { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten); } .info-box { padding: var(--abstand); margin-top: var(--abstand); } .info-box p { margin: .4rem 0; } .notiz { color: var(--text-leise); font-size: .92rem; } /* --- Kacheln ------------------------------------------------------------ */ .kachel-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--abstand); } .kachel { background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 4px solid var(--akzent); border-radius: var(--radius); padding: var(--abstand); box-shadow: var(--schatten); display: flex; flex-direction: column; gap: .2rem; } .kachel { transition: transform .12s, box-shadow .12s, border-color .12s; } .kachel:hover { box-shadow: var(--schatten-l); transform: translateY(-2px); } .kachel-zahl { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; } .kachel-label { color: var(--text-leise); font-size: .9rem; } .dash-block { margin-top: var(--abstand); } .dash-titel { font-size: 1.05rem; margin: 0 0 .6rem; color: var(--text-leise); font-weight: 600; } .kachel-link { text-decoration: none; color: var(--text); } .kachel-link:hover { text-decoration: none; color: var(--text); border-left-color: var(--akzent-tf); } .kachel-titel { font-weight: 600; font-size: 1.05rem; } .kachel-text { color: var(--text-leise); font-size: .9rem; } .kachel-aktion { border-left-color: var(--akzent); background: var(--akzent-bg); } .kachel-aktion .kachel-titel::before { content: "+ "; color: var(--akzent); font-weight: 700; } /* --- Tabellen ----------------------------------------------------------- */ .tabelle-huelle { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten); overflow-x: auto; } .tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; } .tabelle th, .tabelle td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--rahmen); white-space: nowrap; } .tabelle thead th { background: var(--flaeche-2); color: var(--text-leise); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; } .tabelle tbody tr { transition: background .1s; } .tabelle tbody tr:hover td { background: var(--flaeche-2); } .tabelle tbody tr:last-child td { border-bottom: 0; } .tabelle .rechts { text-align: right; } .aktionen { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; } /* --- Abzeichen ---------------------------------------------------------- */ .badge { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-aus { background: var(--gefahr-bg); color: var(--gefahr); } /* --- Formulare & Eingaben (app-weit, EINZIGE Quelle) ------------------- */ .formular { display: flex; flex-direction: column; gap: var(--abstand); } .formular.karte { padding: var(--abstand); max-width: 560px; } /* Karten-Innenabstand & Abstand zwischen Karten einheitlich */ .karte:not(.tabelle-huelle) { padding: var(--abstand); } .karte + .karte { margin-top: var(--abstand); } .karte > h2:first-child, .karte > h3:first-child { margin-top: 0; } /* Ein Feld = Label + Eingabe + optionaler Hinweis/Fehler */ .feld { display: flex; flex-direction: column; gap: .35rem; } .feld-label { font-weight: 600; font-size: .9rem; } .feld-label .req, .req { color: var(--gefahr); margin-left: .15rem; font-weight: 700; } /* Gleichmässiger Abstand zwischen Feldern innerhalb eines Formulars/einer Karte */ form.karte > .feld, form.karte > .feld-check, form.karte > .feld-row, form.karte > .feld-grid, form.karte > fieldset, .formular > .feld, .formular > .feld-check, .formular > .feld-row, .formular > .feld-grid { margin-bottom: 1rem; } form.karte > .feld:last-of-type, form.karte > .feld-check:last-of-type { margin-bottom: .25rem; } /* ----------------------------------------------------------------------- * * EINHEITLICHE EINGABE-BOX – EINE zentrale Stelle für ALLE Eingaben. * Global per Element-Selektor: jedes Text-/Zahl-/Datum-/Zeit-/Auswahl-/ * Textfeld bekommt app-weit dieselbe Höhe, dasselbe Padding, denselben * Rahmen, Fokus, Pfeil und Disabled/Readonly – OHNE dass neue Modulklassen * je nachgetragen werden müssen. Checkboxen/Radios separat (siehe unten). * Breite/Spalten regeln nur noch die Layout-Klassen (.feld, .feld-row …). * ----------------------------------------------------------------------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]), select, textarea { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .5rem .65rem; min-height: 2.5rem; line-height: 1.3; max-width: 100%; transition: border-color .12s, box-shadow .12s; } .feld input, .feld select, .feld textarea { width: 100%; } textarea { min-height: 5rem; resize: vertical; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):hover, select:hover, textarea:hover { border-color: var(--text-leise); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-bg); } /* read-only / disabled app-weit gleich erkennbar */ input:disabled, select:disabled, textarea:disabled, input[readonly], textarea[readonly], .kfg-locked { background: var(--flaeche-2); color: var(--text-leise); cursor: not-allowed; } input[readonly]:focus, textarea[readonly]:focus { box-shadow: none; border-color: var(--rahmen); } /* Eigener Select-Pfeil – für ALLE Selects identisch */ select { -webkit-appearance: none; appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23808a96' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; } /* Checkboxen / Radios: saubere, ausgerichtete Zeile statt inline */ .feld-check { display: flex; align-items: center; gap: .5rem; font-size: .92rem; cursor: pointer; } .feld-check input[type=checkbox], .feld-check input[type=radio], .feld > input[type=checkbox], .feld > input[type=radio] { width: 1.05rem; height: 1.05rem; min-height: 0; flex: 0 0 auto; accent-color: var(--akzent); margin: 0; } .feld.feld-check-zeile { flex-direction: row; align-items: center; gap: .5rem; } /* Hinweise & Fehler */ .hilfe, .feld-hint { color: var(--text-leise); font-size: .82rem; } .feld-fehler { color: var(--gefahr); font-size: .82rem; font-weight: 600; } /* Mehrspaltige Feld-Layouts */ .feld-row { display: flex; flex-wrap: wrap; gap: .9rem; } .feld-row > .feld { flex: 1 1 12rem; margin-bottom: 0; } .feld-row > .feld.eng { flex: 0 0 auto; } .feld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; } .feld-grid > .feld { margin-bottom: 0; } /* Abschnitt im Formular (Fieldset oder Trenner) */ fieldset.feld-fieldset { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .8rem 1rem; margin: 0; } fieldset.feld-fieldset legend { padding: 0 .4rem; font-weight: 600; font-size: .92rem; } .feld-abschnitt { margin: 1.2rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--rahmen); font-weight: 600; font-size: .95rem; } .feld-abschnitt:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* Schmale Eingaben (statt Inline-Breiten) */ .feld input.w6, .w6 { max-width: 6rem; } .feld input.w7, .w7 { max-width: 7rem; } .feld input.w8, .w8 { max-width: 8rem; } .feld input.w12, .w12 { max-width: 12rem; } /* Aktionsreihe */ .formular-aktion { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; } .formular-aktion .btn-voll { width: auto; min-width: 9rem; } /* Allgemeine Button-Reihe */ .btn-reihe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .karte > .btn-reihe { margin-top: .8rem; } .seiten-kopf.mit-aktion > span { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } /* Per JS umgeschaltete Bereiche */ .versteckt { display: none !important; } /* Kleine generische Helfer */ .unter { font-weight: 400; color: var(--text-leise); font-size: .9rem; } .spacer { flex: 1 1 auto; } .titel-sek { font-size: 1.1rem; margin: .2rem 0 .6rem; } .titel-sek.abstand { margin-top: 1.6rem; } /* Abstands-Utilities (ersetzen Inline-Styles in den Views) */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: 1rem; } .mt-s { margin-top: .8rem; } .my-1 { margin: 1rem 0; } .pt-0 { padding-top: 0 !important; } .eingerueckt { padding: 0 1rem 1rem; } .hinweis { color: var(--text-leise); font-size: .92rem; } /* --- Schaltflächen ------------------------------------------------------ */ .btn { display: inline-block; font: inherit; font-weight: 600; color: #fff; background: var(--akzent); border: 1px solid var(--akzent); border-radius: var(--radius-s); padding: .55rem 1rem; cursor: pointer; text-decoration: none; line-height: 1.2; box-shadow: var(--schatten); transition: background .12s, border-color .12s, box-shadow .12s, transform .05s; } .btn:hover { background: var(--akzent-tf); border-color: var(--akzent-tf); text-decoration: none; box-shadow: var(--schatten-l); } .btn:active { transform: translateY(1px); box-shadow: var(--schatten); } .btn-still, .btn-gefahr { box-shadow: none; } .btn-still:hover, .btn-gefahr:hover { box-shadow: var(--schatten); } .btn-voll { width: 100%; text-align: center; } .btn-klein { padding: .35rem .6rem; font-size: .85rem; } .btn-still { background: var(--flaeche); color: var(--text); border-color: var(--rahmen); } .btn-still:hover { background: var(--flaeche-2); } .btn-gefahr { background: var(--flaeche); color: var(--gefahr); border-color: var(--rahmen); } .btn-gefahr:hover { background: var(--gefahr-bg); border-color: var(--gefahr); } form.inline { display: inline; margin: 0; } /* --- Flash-Meldungen ---------------------------------------------------- */ .flash-bereich { display: flex; flex-direction: column; gap: .5rem; margin-bottom: var(--abstand); } .flash { padding: .7rem .9rem; border-radius: var(--radius-s); border: 1px solid transparent; font-size: .95rem; } .flash-erfolg { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); } .flash-fehler { background: var(--gefahr-bg); color: var(--gefahr); border-color: var(--gefahr); } .flash-info { background: var(--info-bg); color: var(--info-tf);border-color: var(--info-tf); } /* --- Anmeldeseite ------------------------------------------------------- */ .auth-huelle { display: flex; justify-content: center; padding-top: 4vh; } .auth-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten); padding: calc(var(--abstand) * 1.5); width: 100%; max-width: 380px; } .auth-titel { text-align: center; margin-bottom: .1rem; } .auth-unter { text-align: center; color: var(--text-leise); margin: 0 0 var(--abstand); } .auth-karte .formular { margin-top: var(--abstand); } /* --- Leerzustand / Fehlerseite ----------------------------------------- */ .leer { background: var(--flaeche); border: 1px dashed var(--rahmen); border-radius: var(--radius); padding: calc(var(--abstand) * 2); text-align: center; color: var(--text-leise); display: flex; flex-direction: column; gap: var(--abstand); align-items: center; } .fehler-seite { text-align: center; padding: calc(var(--abstand) * 2) 0; } .fehler-code { font-size: 3rem; font-weight: 800; color: var(--text-leise); margin: 0; } /* --- Fusszeile ---------------------------------------------------------- */ .fuss { border-top: 1px solid var(--rahmen); background: var(--flaeche); color: var(--text-leise); font-size: .85rem; } .fuss-inner { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-breite); margin: 0 auto; padding: .8rem var(--abstand); } .sprachwahl a { color: var(--text-leise); padding: 0 .35rem; } .sprachwahl a[aria-current="true"] { color: var(--akzent); font-weight: 700; } .theme-wahl { display: inline-flex; gap: .15rem; align-items: center; } .theme-wahl a { color: var(--text-leise); padding: .1rem .4rem; border-radius: var(--radius-s); line-height: 1.4; } .theme-wahl a:hover { background: var(--flaeche-2); text-decoration: none; } .theme-wahl a[aria-current="true"] { color: var(--akzent); font-weight: 700; background: var(--akzent-bg); } .fuss-inner .theme-wahl { margin-left: auto; } /* --- Bewegung reduzieren ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* --- Handy / Tablet: eigene Darstellung -------------------------------- */ @media (max-width: 768px) { .kopf-inner { min-height: 0; padding: .55rem var(--abstand); gap: .5rem; flex-wrap: wrap; } .marke { flex: 1; } /* Hamburger (Label) sichtbar; schaltet die versteckte Checkbox. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; flex: none; width: 2.6rem; height: 2.6rem; background: var(--flaeche); color: var(--text); border: 1px solid var(--rahmen); border-radius: var(--radius-s); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background .12s, border-color .12s; } .nav-toggle::before { content: "\2630"; } /* ☰ */ .nav-check:checked ~ .nav-toggle::before { content: "\2715"; } /* ✕ */ .nav-toggle:hover { background: var(--flaeche-2); } .nav-check:focus-visible ~ .nav-toggle { outline: 3px solid var(--akzent); outline-offset: 2px; } /* Panel: eigene Zeile unter dem Kopf, standardmässig zu; Checkbox klappt auf. */ .kopf-panel { order: 5; flex-basis: 100%; display: none; flex-direction: column; gap: .5rem; } .nav-check:checked ~ .kopf-panel { display: flex; } .haupt-nav { flex-direction: column; gap: .1rem; flex: none; padding-top: .4rem; border-top: 1px solid var(--rahmen); } .haupt-nav a { padding: .7rem .55rem; font-size: 1rem; } .kopf-rechts { flex-wrap: wrap; gap: .6rem; padding-top: .6rem; border-top: 1px solid var(--rahmen); } .benutzer-chip { text-align: left; } .inhalt { padding: var(--abstand); } h1 { font-size: 1.4rem; } .fuss-inner { flex-wrap: wrap; gap: .5rem; } /* Aktionen/Buttons greifen auf schmalen Schirmen die volle Breite */ .formular-aktion .btn, .btn-reihe > .btn { flex: 1 1 auto; text-align: center; } } @media (max-width: 480px) { .kachel-gitter { grid-template-columns: 1fr 1fr; } .kachel-zahl { font-size: 1.7rem; } .seiten-kopf.mit-aktion { align-items: stretch; } } /* --- Daten-Engine: Suche, Blättern ------------------------------------- */ .suchleiste { display: flex; gap: .5rem; margin-bottom: var(--abstand); max-width: 520px; } .suchleiste input { flex: 1; } .leer-zelle { color: var(--text-leise); } .blaettern { display: flex; justify-content: space-between; align-items: center; margin-top: var(--abstand); flex-wrap: wrap; gap: .5rem; color: var(--text-leise); font-size: .9rem; } .blaettern-seiten { display: flex; gap: .3rem; } .blaettern-seiten a, .blaettern-seiten .seite-akt { padding: .25rem .55rem; border-radius: var(--radius-s); border: 1px solid var(--rahmen); } .blaettern-seiten a { color: var(--akzent); } .blaettern-seiten .seite-akt { background: var(--akzent); color: #fff; border-color: var(--akzent); } .blaettern-seiten .auslassung { padding: .25rem .2rem; color: var(--text-leise); } /* --- Testleiste (Impersonation, nur Entwicklungsphase) ----------------- */ .testleiste { background: #2d2a26; color: #f3efe8; border-bottom: 2px solid #c9a227; font-size: .86rem; } .testleiste-aktiv { background: #7a3b12; border-bottom-color: #f0a04b; } .testleiste-inner { max-width: var(--breite-max, 1100px); margin: 0 auto; padding: .4rem var(--abstand, 1rem); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .testleiste-status { opacity: .92; white-space: nowrap; } .testleiste-status strong { color: #f0c14b; } .testleiste-aktiv .testleiste-status strong { color: #ffd9a8; } .testleiste-wechsel { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1; } .testleiste .btn-klein { background: rgba(255,255,255,.10); color: #f3efe8; border: 1px solid rgba(255,255,255,.22); padding: .15rem .5rem; } .testleiste .btn-klein:hover { background: rgba(255,255,255,.20); } .testleiste .testleiste-btn.ist-aktiv { background: #f0c14b; color: #2d2a26; border-color: #f0c14b; font-weight: 700; } .testleiste-zurueck .btn-klein { background: #f0a04b; color: #2d2a26; border-color: #f0a04b; font-weight: 700; } /* ======================================================================= * * ZENTRALISIERTE MODUL-KOMPONENTEN * Diese Bausteine waren früher wortgleich in mehreren _*_ui.php-Partials. * Jetzt EINMAL hier – die Partials enthalten nur noch Modul-Spezifisches. * ======================================================================= */ /* --- Sekundärer Abschnittskopf ---------------------------------------- */ .abschnitt-kopf { margin-top: calc(var(--abstand) * 1.4); } .abschnitt-kopf h2 { margin: 0; font-size: 1.1rem; } .kat-titel { font-size: 1rem; margin: 1.3rem 0 .5rem; color: var(--text-leise); } .kat-titel:first-of-type { margin-top: .4rem; } /* --- Inline-Anlegen (neuer Typ / Kategorie / Eintrag) ----------------- */ .neu-form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; } .neu-form label { display: flex; flex-direction: column; font-size: .82rem; gap: .25rem; color: var(--text-leise); } .neu-form input, .neu-form select { width: auto; min-width: 12rem; } /* --- Reiter / Filter (Pillen) ----------------------------------------- */ .lab-tabs, .typ-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; } .lab-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--rahmen); border-radius: 999px; background: var(--flaeche); color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1; } .lab-tab:hover { background: var(--flaeche-2); text-decoration: none; } .lab-tab.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; } .lab-tab .cnt { font-variant-numeric: tabular-nums; font-size: .8rem; padding: .05rem .4rem; border-radius: 999px; background: var(--flaeche-2); color: var(--text-leise); } .lab-tab.aktiv .cnt { background: rgba(255,255,255,.22); color: #fff; } /* --- Metazeile (Detail-Kopf) ------------------------------------------ */ .lab-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem; } .lab-meta.lab-meta--trenner { border-top: 1px solid var(--rahmen); padding-top: .8rem; } .lab-meta div span { display: block; font-size: .8rem; color: var(--text-leise); } /* --- Listen-Karten (Becken / Grössen / Massnahmen / Kopffelder / Kat.) - */ .stamm-bad { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; background: var(--flaeche); } .stamm-bad-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; } .stamm-bad-kopf h3 { margin: 0; font-size: 1.05rem; display: inline-flex; align-items: center; gap: .45rem; } .stamm-bad-kopf .bez { color: var(--text-leise); font-size: .9rem; } .stamm-g { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--rahmen); } .stamm-g:first-child { border-top: 0; } .stamm-g .gname { font-weight: 600; } .stamm-g .gmeta, .stamm-g .gsoll { font-size: .85rem; color: var(--text-leise); } .stamm-akt { display: flex; gap: .4rem; flex-wrap: wrap; } .stamm-leer { color: var(--text-leise); font-size: .9rem; padding: .4rem 0; } .badge.aus { background: var(--flaeche-2); color: var(--text-leise); } /* --- Ampel-Badges (Kalibrierung / Bestand / Verfall) ------------------ */ .kal-status { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .kal-ok { background: var(--ok-bg); color: var(--ok); } .kal-bald { background: var(--warn-bg); color: var(--warn); } .kal-ueber { background: var(--gefahr-bg); color: var(--gefahr); } .kal-keine { background: var(--flaeche); color: var(--text-leise); border-color: var(--rahmen); } /* --- GHS-Chips --------------------------------------------------------- */ .chem-ghs { display: flex; flex-wrap: wrap; gap: .15rem .5rem; margin: .25rem 0; } .ghs-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text-leise); } .ghs-raute { width: 1.45rem; height: 1.45rem; flex: none; } /* --- Icons ------------------------------------------------------------- */ .ico { width: 1.05em; height: 1.05em; vertical-align: -.15em; flex: none; } .btn .ico { margin-right: .35em; } .dok-typ-ico { width: 1.35rem; height: 1.35rem; color: var(--text-leise); flex: none; } .dok-zeile-haupt { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; min-width: 0; } /* --- Datei-Vorschau (Dateimanager + Labor) ---------------------------- */ .dok-vorschau { margin: 0 0 1rem; } .dok-bild { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--rahmen); } .dok-pdf { width: 100%; height: 78vh; border: 1px solid var(--rahmen); border-radius: 6px; background: var(--flaeche); } .dok-text { max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 6px; padding: .8rem; margin: 0; } .dok-meta { color: var(--text-leise); font-size: .9rem; margin: 0 0 1rem; } .dok-import { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; } .dok-import .feld { margin: 0; } .dok-import-pfad { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .1rem .4rem; } /* --- Modul-Übersichtskacheln (Labor / Typen / Lager / Tool) ----------- */ .tool-grid, .labor-grid, .lager-grid, .typ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--abstand); margin-top: 1rem; } .typ-grid { margin-bottom: .6rem; } .tool-kachel, .labor-kachel, .lager-kachel, .typ-kachel { display: block; border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--flaeche); text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; } .tool-kachel:hover, .labor-kachel.aktiv:hover, .lager-kachel.aktiv:hover, .typ-kachel:hover { box-shadow: var(--schatten); border-color: var(--akzent); text-decoration: none; } .labor-kachel.inaktiv, .lager-kachel.inaktiv { opacity: .6; cursor: default; } .tool-kachel h2, .labor-kachel h2, .lager-kachel h2 { margin: 0 0 .3rem; font-size: 1.05rem; } .tool-kachel h2 { color: var(--akzent); } .typ-kachel h3 { margin: 0; font-size: 1.05rem; } .tool-kachel p, .labor-kachel p, .lager-kachel p { margin: 0; font-size: .88rem; color: var(--text-leise); } .labor-kachel .bald, .lager-kachel .bald { display: inline-block; margin-top: .5rem; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--flaeche-2); color: var(--text-leise); } /* --- Mobil (zentralisierte Komponenten) ------------------------------- */ @media (max-width: 640px) { .tool-grid, .labor-grid, .lager-grid, .typ-grid { grid-template-columns: 1fr; } .stamm-g { flex-wrap: wrap; } .dok-pdf { height: 60vh; } } /* ============================================================ KI-Assistent === */ #ki-assistent { position: fixed; right: 18px; bottom: 18px; z-index: 900; } .ki-fab { display: inline-flex; align-items: center; gap: .5em; background: var(--akzent); color: #fff; border: 0; cursor: pointer; padding: .7em 1.05em; border-radius: 999px; font: inherit; font-weight: 600; box-shadow: var(--schatten-l); } .ki-fab:hover { background: var(--akzent-tf); } .ki-fab span[aria-hidden] { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: rgba(255,255,255,.22); font-weight: 700; } .ki-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(360px, calc(100vw - 36px)); height: min(520px, calc(100vh - 120px)); display: flex; flex-direction: column; overflow: hidden; background: var(--flaeche); color: var(--text); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten-l); } .ki-panel[hidden] { display: none; } .ki-kopf { display: flex; align-items: center; justify-content: space-between; padding: .6em .8em; border-bottom: 1px solid var(--rahmen); background: var(--akzent-bg); } .ki-zu { border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-leise); } .ki-zu:hover { color: var(--text); } .ki-verlauf { flex: 1 1 auto; overflow-y: auto; padding: .8em; display: flex; flex-direction: column; gap: .55em; } .ki-msg { max-width: 85%; padding: .55em .75em; border-radius: var(--radius-s); white-space: pre-wrap; word-wrap: break-word; line-height: 1.4; font-size: .94rem; } .ki-bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--rahmen); } .ki-user { align-self: flex-end; background: var(--akzent); color: #fff; } .ki-warte { opacity: .65; font-style: italic; } .ki-fehler { background: var(--gefahr-bg); border-color: transparent; } .ki-datenschutz { font-size: .76rem; color: var(--text-leise); margin: .2em 0 0; } .ki-eingabe { display: flex; gap: .5em; padding: .6em; border-top: 1px solid var(--rahmen); } .ki-eingabe textarea { flex: 1 1 auto; resize: none; font: inherit; padding: .5em .6em; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--bg); color: var(--text); } .ki-eingabe .btn { align-self: stretch; } @media (max-width: 480px) { .ki-fab-text { display: none; } } .ki-tools-leiste { padding: .4em .8em; border-bottom: 1px solid var(--rahmen); background: var(--bg); } .ki-tools { display: inline-flex; align-items: center; gap: .45em; font-size: .82rem; color: var(--text-leise); cursor: pointer; } .ki-tools input { accent-color: var(--akzent); } /* ============================================================ Mobile: breite Tabellen * Tabellen mit eigenen Klassen (Statistik, Verbrauch, Sprach-Editor, Tool- * Ergebnisse, Begleitschein) haben keine eigene Scroll-Hülle. Auf schmalen * Schirmen werden sie horizontal scrollbar, statt abgeschnitten zu werden. * Bereits umhüllte Tabellen (.tabelle in .tabelle-huelle, .rechte-tab in * .rechte-tab-wrap) sind ausgenommen. */ @media (max-width: 768px) { table { max-width: 100%; } table:not(.tabelle):not(.rechte-tab) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Druck-Etikett bleibt unverändert kompakt */ .etikett-tab { display: table; overflow: visible; } } /* Fußzeile: Kontakt + Links */ .fuss-kontakt { color: var(--text-leise); } .fuss-links { display: inline-flex; gap: .8rem; } .fuss-links a { color: var(--akzent); } .impressum-text { white-space: pre-wrap; } /* Menü-Editor */ .me-list { list-style: none; margin: 0; padding: 0; } .me-list .me-list { margin: .3rem 0 .3rem 1.4rem; padding-left: .6rem; border-left: 2px solid var(--rahmen, #ccd6dc); } .me-row { margin: .3rem 0; } .me-row.dragging { opacity: .45; } .me-head { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border: 1px solid var(--rahmen, #ccd6dc); border-radius: .4rem; background: var(--flaeche, #fff); } .me-grip::before { content: "\2630"; color: var(--text-leise, #888); cursor: grab; } .me-label { flex: 0 1 auto; } .me-row.me-hidden > .me-head .me-label { opacity: .5; text-decoration: line-through; } .me-badge { font-size: .72rem; padding: .05rem .4rem; border-radius: .4rem; background: var(--akzent-bg, #e3f0ef); color: var(--akzent, #0f6b6b); } .me-spacer { flex: 1; } .me-ib { background: none; border: none; cursor: pointer; padding: .2rem .35rem; color: var(--text-leise, #666); font-size: .9rem; line-height: 1; } .me-ib:hover { color: var(--text, #111); } .me-eye::before { content: "\25CF"; } .me-row.me-hidden > .me-head .me-eye::before { content: "\25CB"; } .me-h2 { font-size: 1rem; margin: 0 0 .6rem; } /* ===== Seitenleisten-Layout (Topbar + Sidebar + Inhalt) ===== */ .topbar { display: flex; align-items: center; gap: .6rem; padding: .5rem var(--abstand); background: var(--flaeche); border-bottom: 1px solid var(--rahmen); position: sticky; top: 0; z-index: 30; } .topbar .marke { font-weight: 700; color: var(--text); text-decoration: none; font-size: 1.05rem; } .topbar .marke:hover { color: var(--akzent); } .topbar-spacer { flex: 1; } .menu-pos-btn { background: none; border: 1px solid var(--rahmen); border-radius: var(--radius-s); cursor: pointer; padding: .3rem .55rem; color: var(--text-leise); font-size: 1rem; line-height: 1; } .menu-pos-btn:hover { color: var(--text); background: var(--flaeche-2); } .shell { display: flex; align-items: stretch; } .seitenleiste { flex: 0 0 var(--sb-breite, 232px); width: var(--sb-breite, 232px); background: var(--sb-bg, var(--flaeche-2)); border-right: 1px solid var(--sb-rand, var(--rahmen)); padding: .6rem; overflow: auto; } .shell-main { flex: 1; min-width: 0; } [data-menu="rechts"] .shell { flex-direction: row-reverse; } [data-menu="rechts"] .seitenleiste { border-right: none; border-left: 1px solid var(--rahmen); } .sb-nav { display: flex; flex-direction: column; gap: .12rem; } .sb-link { display: block; padding: .45rem .6rem; border-radius: var(--radius-s); color: var(--text-leise); text-decoration: none; border-left: 3px solid transparent; } .sb-link:hover { background: var(--flaeche); color: var(--text); text-decoration: none; } .sb-link[aria-current] { color: var(--akzent); background: var(--akzent-bg); border-left-color: var(--akzent); font-weight: 600; } .sb-grp { margin: .04rem 0; } .sb-sum { list-style: none; cursor: pointer; padding: .45rem .6rem; border-radius: var(--radius-s); font-weight: 600; color: var(--text); display: flex; align-items: center; } .sb-sum::-webkit-details-marker { display: none; } .sb-sum::before { content: "\25B8"; margin-right: .45rem; color: var(--text-leise); font-size: .8em; transition: transform .12s; } .sb-grp[open] > .sb-sum::before { transform: rotate(90deg); } .sb-sum:hover { background: var(--flaeche); } .sb-sub { margin: .1rem 0 .3rem .55rem; padding-left: .5rem; border-left: 1px solid var(--rahmen); display: flex; flex-direction: column; gap: .12rem; } .inhalt-zentriert { max-width: var(--max-breite); margin: 0 auto; } @media (max-width: 768px) { .shell, [data-menu="rechts"] .shell { flex-direction: column; } .seitenleiste { display: none; flex-basis: auto; width: auto; border-right: none; border-left: none; border-bottom: 1px solid var(--rahmen); } .nav-check:checked ~ .shell .seitenleiste { display: block; } } /* ===== Dashboard ===== */ .dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: var(--abstand); } .dash-kpi { background: var(--flaeche-2); border-radius: var(--radius); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .15rem; } .dash-kpi-label { font-size: .82rem; color: var(--text-leise); } .dash-kpi-wert { font-size: 1.7rem; font-weight: 700; color: var(--text); } .dash-h2 { font-size: 1.05rem; margin: 1.2rem 0 .6rem; } /* Schnellzugriff: gleichmässige Kacheln, kein versetzter Abstand im Gitter, lange Titel brechen um statt aus der Box zu laufen. */ .kachel-gitter > .karte { margin-top: 0; height: 100%; } .kachel-gitter > .karte + .karte { margin-top: 0; } .dash-modul { justify-content: center; min-height: 3.1rem; } .dash-lager-kopf { flex-wrap: wrap; } .dash-lager-kopf strong { min-width: 0; overflow-wrap: anywhere; } .dash-boxen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; } .dash-box { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; border-radius: var(--radius); text-decoration: none; border: 1px solid transparent; } .dash-box:hover { text-decoration: none; filter: brightness(.985); } .dash-box-label { font-size: .85rem; } .dash-box-wert { font-size: 1.5rem; font-weight: 700; } .dash-box-wert small { font-size: .8rem; font-weight: 400; } .dash-box.dash-gefahr { background: var(--gefahr-bg); color: var(--gefahr); border-color: var(--gefahr); } .dash-box.dash-warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); } .dash-box.dash-info { background: var(--info-bg); color: var(--info-tf); border-color: var(--info-tf); } .dash-lager { display: flex; flex-direction: column; gap: .5rem; } .dash-lager-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .dash-lager-n { font-size: .8rem; color: var(--text-leise); white-space: nowrap; } .dash-lager-akt { display: flex; gap: .4rem; flex-wrap: wrap; } .dash-modul { display: flex; align-items: center; text-decoration: none; color: var(--text); } .dash-modul:hover { text-decoration: none; border-color: var(--akzent); } /* Menü-Badge (z. B. offene Meldungen) */ .sb-link { display: flex; align-items: center; gap: .4rem; } .sb-badge { margin-left: auto; background: var(--gefahr); color: #fff; border-radius: 999px; font-size: .72rem; line-height: 1; padding: .14rem .44rem; font-weight: 700; } /* ===== App-Rahmen (Desktop): Bildschirm-Fenster, Inhalt scrollt INNEN ===== Der Trick: body.app wird exakt bildschirmhoch gesperrt (100vh, kein Fenster-Scroll). Topbar oben + Fusszeile unten bleiben fix; der Bereich dazwischen (.shell) füllt den Rest. Seitenleiste und Inhalt bekommen je einen EIGENEN Scrollbalken – die Leiste bewegt sich dadurch NIE mit dem Inhalt, sie scrollt höchstens für sich selbst, wenn das Menü zu lang ist. 100vh ist überall unterstützt; 100dvh nur als Zusatz (Handy-Adressleiste). */ @media (min-width: 769px) { body.app { height: 100vh; height: 100dvh; overflow: hidden; /* kein Scrollen auf Fenster-/Body-Ebene */ } body.app > .topbar, body.app > .testleiste { flex: none; } /* feste Höhe, wird nicht gestaucht */ body.app > .shell { flex: 1 1 auto; /* füllt den Platz zwischen Topbar und Fuss */ min-height: 0; /* erlaubt Schrumpfen -> innere Scroller wirken */ align-items: stretch; /* Leiste + Inhalt gleich hoch wie .shell */ } body.app .seitenleiste { overflow-y: auto; } /* scrollt nur bei Bedarf, bleibt sonst stehen */ body.app .shell-main { overflow-y: auto; min-height: 0; } /* hier scrollt der Inhalt */ body.app > .fuss { flex: none; border-top: 1px solid var(--rahmen); background: var(--flaeche); } } /* Gruppen-Kopf als Navigationslink (klick = Übersicht der Gruppe) */ .sb-sum-link { flex: 1; color: inherit; text-decoration: none; } .sb-sum-link:hover { color: var(--akzent); text-decoration: none; } .sb-sum-link[aria-current] { color: var(--akzent); } /* ===== Menü-Editor + Rechte-Liste ===== */ .menue-add { margin-bottom: var(--abstand); } .menue-h2 { font-size: 1rem; margin: 0 0 .6rem; } .menue-add-grid { display: grid; grid-template-columns: 1.3fr 1.6fr 1.2fr auto; gap: .8rem; align-items: end; } .menue-add-btn { display: flex; align-items: flex-end; } @media (max-width: 760px) { .menue-add-grid { grid-template-columns: 1fr; } } .menue-tabelle-wrap { overflow-x: auto; } .menue-tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; } .menue-tabelle th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); padding: .4rem .5rem; border-bottom: 2px solid var(--rahmen); } .menue-tabelle th.num, .menue-tabelle th.mit { text-align: center; } .menue-tabelle td { padding: .35rem .5rem; border-bottom: 1px solid var(--rahmen); vertical-align: middle; } .menue-tabelle td.num, .menue-tabelle td.mit { text-align: center; } /* Editor-Tabellen (Menü-/Seiten-Editor): kompakte, einheitliche Eingaben */ .menue-tabelle input[type="text"], .menue-tabelle input[type="number"], .menue-tabelle select, .menue-tabelle textarea { width: 100%; min-height: 2.2rem; padding: .4rem .55rem; } .menue-tabelle select { padding-right: 1.8rem; background-position: right .55rem center; } .menue-tabelle .w-num { width: 5rem; min-width: 4rem; } .menue-tabelle textarea { min-height: 2.6rem; resize: vertical; } .menue-tabelle tr.ist-system { background: var(--flaeche-2); } .menue-tag { display: inline-block; margin-left: .4rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); border: 1px solid var(--rahmen); border-radius: 999px; padding: .05rem .4rem; } .feld-recht .feld-label { display: flex; flex-direction: column; } .recht-pfad { color: var(--text-leise); font-size: .76rem; font-weight: 400; } /* ===== Inhalts-Seiten (Boxen) ===== */ .inhalt-boxen { margin-top: var(--abstand); } .inhalt-box { display: flex; flex-direction: column; gap: .35rem; text-align: left; } .inhalt-box .kachel-titel { font-weight: 600; } .inhalt-box .kachel-text { color: var(--text-leise); font-size: .92rem; line-height: 1.5; } a.inhalt-box.ist-link { text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; } a.inhalt-box.ist-link:hover { border-color: var(--akzent); transform: translateY(-2px); } .feld-mit-check { align-self: end; } .zeile-rechts { display: flex; align-items: center; gap: .6rem; margin: 0 0 var(--abstand); flex-wrap: wrap; } .menue-zeile-akt { display: flex; gap: .35rem; justify-content: flex-end; } /* ===== Freitext-Block (Box ohne Link) ===== */ .inhalt-text { margin: var(--abstand) 0; } .inhalt-text-titel { font-size: 1.15rem; margin: 0 0 .4rem; } .inhalt-text-body { color: var(--text); line-height: 1.65; max-width: 70ch; } /* ======================================================================= * MODUL: Labor (zentralisiert aus modules/labor/views/_labor_ui.php) * ===================================================================== */ /* ===================================================================== * * Labor – NUR modulspezifische Layouts. * Eingabe-Box, Reiter, Listen-Karten, Meta, Badges, GHS, Icons, Kacheln, * Datei-Vorschau, Inline-Anlegen liegen jetzt zentral in app.css. * ===================================================================== */ /* --- Fremdanalyse: Positionen als ausgerichtete Spalten --------------- */ .fa-pos { display: grid; gap: .15rem; } .fa-pos-zeile { display: grid; grid-template-columns: minmax(7rem, 1.5fr) minmax(7rem, 1fr) 5rem 5rem minmax(8rem, 2fr); gap: .55rem .8rem; align-items: end; padding: .6rem 0; border-top: 1px solid var(--rahmen); } .fa-pos-zeile:first-child { border-top: 0; padding-top: .2rem; } .fa-pos .feld { margin-bottom: 0; } .fa-pos .feld input, .fa-pos .feld select { width: 100%; } .fa-pos-name { padding-bottom: .4rem; } @media (max-width: 680px) { .fa-pos-zeile { grid-template-columns: 1fr; gap: .55rem; padding: .8rem 0; } .fa-pos-name { padding-bottom: 0; } .fa-pos-leer { display: none; } } /* --- Status-Ampel für Messwerte --------------------------------------- */ .g-ok { background: var(--ok-bg); border-color: var(--ok); } .g-unter, .g-ueber, .g-bad { background: var(--gefahr-bg); border-color: var(--gefahr); color: var(--gefahr); } /* --- Toolbar ----------------------------------------------------------- */ .lab-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; } .lab-toolbar .lab-tb-label { font-size: .8rem; color: var(--text-leise); margin-right: .1rem; } /* --- Protokoll-Liste (nach Tag gruppiert) ----------------------------- */ .prot-tag-kopf { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); margin: 1rem 0 .2rem; padding-top: .6rem; border-top: 1px solid var(--rahmen); } .prot-liste > .prot-tag-kopf:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prot-zeile { display: flex; align-items: center; justify-content: space-between; gap: .6rem .9rem; flex-wrap: wrap; padding: .55rem 0; border-top: 1px solid var(--rahmen); } .prot-tag-kopf + .prot-zeile { border-top: 0; } .prot-haupt { display: flex; align-items: center; gap: .55rem; flex: 1 1 16rem; min-width: 0; flex-wrap: wrap; } .prot-typ { font-weight: 600; } .prot-zeit { color: var(--text-leise); font-variant-numeric: tabular-nums; } .prot-ma { color: var(--text-leise); font-size: .9rem; } .prot-akt { display: flex; gap: .4rem; flex-wrap: wrap; } .prot-filter { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; } .prot-filter .feld { margin-bottom: 0; } .prot-tagnav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 1rem; } .prot-tagnav-d { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: center; } /* --- Protokoll-Formular: Vorbehandlung (Becken-Karten) ---------------- */ .lab-kopf { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .lab-kopf label { display: flex; flex-direction: column; font-size: .9rem; gap: .25rem; } .lab-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--abstand); } .lab-karte { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .8rem 1rem; background: var(--flaeche); } .lab-karte h3 { margin: 0; font-size: 1.02rem; } .lab-karte .bez { display: block; font-size: .85rem; color: var(--text-leise); margin-bottom: .3rem; } .lab-item { padding: .5rem 0; border-top: 1px solid var(--rahmen); } .lab-item:first-of-type { border-top: 0; } .lab-item-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; } .lab-mname { font-weight: 600; } .lab-einheit { color: var(--text-leise); font-weight: 400; } .lab-msoll { font-size: .8rem; color: var(--text-leise); } .lab-ist { width: 6rem; text-align: right; } .lab-zusatz { display: flex; gap: .4rem; margin-top: .35rem; flex-wrap: wrap; } .lab-mass, .lab-bem { flex: 1 1 12rem; } .lab-fx { display: inline-block; margin-left: .25rem; font-style: italic; font-weight: 700; color: var(--akzent); cursor: help; } .lab-berechnet { background: var(--flaeche-2); } /* --- Protokoll-Formular: generische Typen ----------------------------- */ .lab-titems { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem; } .lab-titem { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .7rem .9rem; background: var(--flaeche); } .lab-titem-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; flex-wrap: wrap; } .lab-fototag { font-size: .72rem; padding: .05rem .4rem; border-radius: var(--radius-s); background: var(--info-bg); color: var(--info-tf); } .lab-eingabe { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .t-ist, .t-avg { width: 6.5rem; text-align: right; } .t-mw { width: 4.5rem; text-align: right; } .t-mwwrap { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; } .lab-beleg-hint { font-size: .85rem; color: var(--text-leise); } /* --- Protokoll-Anzeige ------------------------------------------------- */ .lab-zk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem; } .lab-z { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; padding: .45rem 0; border-top: 1px solid var(--rahmen); } .lab-zk-grid .lab-z { padding: .7rem .9rem; border: 1px solid var(--rahmen); border-radius: var(--radius); align-content: start; } .lab-z .mname { font-weight: 600; } .lab-z .einheit { color: var(--text-leise); font-weight: 400; } .lab-z .msoll { font-size: .8rem; color: var(--text-leise); } .lab-z .mist { text-align: right; font-variant-numeric: tabular-nums; padding: .1rem .45rem; border-radius: var(--radius-s); align-self: center; font-weight: 600; } .lab-z .mist.g-ok { background: var(--ok-bg); color: var(--ok); } .lab-z .mist.g-bad, .lab-z .mist.g-unter, .lab-z .mist.g-ueber { background: var(--gefahr-bg); color: var(--gefahr); } .lab-z .mwerte { grid-column: 1 / -1; font-size: .8rem; color: var(--text-leise); } .lab-z .mbem { grid-column: 1 / -1; font-size: .85rem; color: var(--text-leise); } .lab-z .mmass { grid-column: 1 / -1; font-size: .85rem; color: var(--warn); } .lab-z .mfoto { grid-column: 1 / -1; } .lab-z .mfx { display: inline-block; margin-left: .25rem; font-style: italic; font-weight: 700; color: var(--akzent); cursor: help; } /* --- Foto-Galerien ----------------------------------------------------- */ .lab-fotos { margin-top: 1.6rem; } .lab-foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; } .lab-foto { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); } .lab-foto a.bild { display: block; background: var(--flaeche-2); line-height: 0; } .lab-foto a.bild img { display: block; width: 100%; height: 9rem; object-fit: cover; } .lab-foto .akt { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; align-items: center; } .lab-foto .akt form { display: inline; } .lab-foto .akt .btn-klein { padding: .2rem .45rem; font-size: .8rem; } .lab-foto .masse { width: 100%; font-size: .72rem; color: var(--text-leise); padding: 0 .4rem .4rem; } .lab-foto select { font-size: .8rem; padding: .15rem .3rem; min-height: 0; } .lab-foto-pdf a.datei { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; height: 9rem; background: var(--flaeche-2); text-decoration: none; padding: .6rem; text-align: center; } .lab-foto-pdf .pdf-icon { font-weight: 800; font-size: .8rem; letter-spacing: .05em; color: #fff; background: var(--gefahr, #b3261e); border-radius: var(--radius-s); padding: .35rem .55rem; } .lab-foto-pdf .pdf-name { font-size: .78rem; color: var(--text); word-break: break-word; line-height: 1.25; max-height: 3.2em; overflow: hidden; } .lab-upload { border: 1px dashed var(--rahmen); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem; } .lab-upload input[type=file] { display: block; margin: .4rem 0 .6rem; } .lab-zfoto { margin-top: .5rem; } .lab-zfoto .titel { font-size: .8rem; color: var(--text-leise); margin-bottom: .3rem; } .lab-zfoto-grid { display: flex; flex-wrap: wrap; gap: .4rem; } .lab-zfoto-grid .ff { border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden; width: 7rem; background: var(--flaeche); } .lab-zfoto-grid .ff a.bild { display: block; background: var(--flaeche-2); line-height: 0; } .lab-zfoto-grid .ff img { display: block; width: 100%; height: 5rem; object-fit: cover; } .lab-zfoto-grid .ff .akt { display: flex; gap: .2rem; padding: .25rem; } .lab-zfoto-grid .ff .akt form { display: inline; } .lab-zfoto-grid .ff .akt .btn-klein { padding: .1rem .35rem; font-size: .75rem; } .lab-zfoto-up { display: flex; gap: .4rem; align-items: center; margin-top: .35rem; flex-wrap: wrap; } .lab-zfoto-up input[type=file] { font-size: .8rem; max-width: 14rem; } /* --- Statistik --------------------------------------------------------- */ .stat-filter { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-bottom: 1.2rem; } .stat-filter .feld { gap: .2rem; margin-bottom: 0; } .stat-filter .feld-label { font-size: .8rem; color: var(--text-leise); } .stat-karten { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; } .stat-kpi { border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .6rem .9rem; min-width: 7rem; background: var(--flaeche); } .stat-kpi .wert { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-kpi .lab { font-size: .75rem; color: var(--text-leise); } .stat-kpi.warn .wert { color: var(--gefahr); } .lab-chart { width: 100%; height: auto; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); } .stat-tab { width: 100%; border-collapse: collapse; margin-top: .6rem; } .stat-tab th, .stat-tab td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--rahmen); font-size: .9rem; } .stat-tab td.num, .stat-tab th.num { text-align: right; font-variant-numeric: tabular-nums; } .stat-tab tr.warn td { background: var(--gefahr-bg); } /* --- QR-Verwaltung ----------------------------------------------------- */ .qr-flex { display: flex; flex-wrap: wrap; gap: var(--abstand); align-items: flex-start; } .qr-box { flex: 0 0 auto; text-align: center; } .qr-box svg { width: 220px; height: 220px; background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 8px; } .qr-box .qr-datum { font-size: .8rem; color: var(--text-leise); margin-top: 6px; } .qr-info { flex: 1 1 320px; min-width: 0; } .qr-link { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; background: var(--flaeche-2); } .qr-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .qr-row.ende { align-items: flex-end; } .qr-toggles label { display: flex; gap: 8px; align-items: center; padding: 5px 0; } /* DRUCKEN – NUR AUF QR-SEITEN ALLES AUSBLENDEN. * * Diese Regel blendete beim Drucken den GESAMTEN Seiteninhalt aus und liess * nur .qr-print stehen. Gedacht war sie für die QR-Etikettseite; sie galt aber * auf JEDER Seite. Wer im Wochenplan oder Einsatzplan auf "Drucken" klickte, * bekam ein leeres Blatt. * * Jetzt greift sie nur, wenn ein .qr-print-Element vorhanden ist – mit :has() * am body. Browser ohne :has() drucken die ganze Seite, was der harmlosere * Fall ist. */ @media print { body:has(.qr-print) * { visibility: hidden; } body:has(.qr-print) .qr-print, body:has(.qr-print) .qr-print * { visibility: visible; } .qr-print { position: absolute; left: 0; top: 0; width: 100%; text-align: center; } .qr-print svg { width: 320px; height: 320px; border: none; } /* Was auf Papier nichts verloren hat. Die ausführlichen Regeln für den Wochenplan stehen weiter unten – hier nur das Allgemeine. */ .no-print { display: none !important; } /* Farben erhalten – sonst werden Ampeln und Farbtöne zu Grau. */ * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* --- Mobil ------------------------------------------------------------- */ @media (max-width: 768px) { .lab-aktion { position: sticky; bottom: 0; z-index: 10; margin: .6rem calc(var(--abstand) * -1) calc(var(--abstand) * -1); padding: .7rem var(--abstand); border-top: 1px solid var(--rahmen); background: var(--flaeche); box-shadow: 0 -2px 10px rgba(20, 30, 45, .08); } .lab-kopf input, .lab-kopf select, .lab-ist, .lab-mass, .lab-bem { min-height: 2.75rem; } .lab-item { padding: .65rem 0; } .prot-akt .btn-klein { padding: .5rem .75rem; font-size: .9rem; } .prot-zeile { padding: .7rem 0; } .prot-tagnav-d { flex: 1; } } @media (max-width: 640px) { .lab-karten, .lab-titems, .lab-zk-grid { grid-template-columns: 1fr; } .lab-ist, .t-ist, .t-avg { width: 5.5rem; } } /* ======================================================================= * MODUL: Lagerverwaltung (zentralisiert aus modules/lagerverwaltung/views/_lager_ui.php) * ===================================================================== */ * genau einmal pro Seitenaufruf aus. .etikett { display: flex; gap: 1.2rem; align-items: flex-start; border: 2px solid var(--rahmen); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 520px; background: #fff; } .etikett-qr { flex: none; width: 150px; } .etikett-qr svg { width: 150px; height: 150px; display: block; } .etikett-text { min-width: 0; } .etikett-name { font-size: 1.25rem; font-weight: 800; line-height: 1.2; } .etikett-lief { color: var(--text-leise); margin-bottom: .4rem; } .etikett-tab { border-collapse: collapse; margin: .2rem 0; } .etikett-tab td { padding: .15rem .5rem .15rem 0; vertical-align: top; } .etikett-tab td:first-child { color: var(--text-leise); } .etikett-ghs { margin: .4rem 0; } .etikett-code { margin-top: .4rem; font-size: .9rem; } .etikett-code span { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; } .etikett-url { font-size: .72rem; color: var(--text-leise); word-break: break-all; margin-top: .15rem; } .etikett-hinweis { max-width: 520px; } /* --- Scan-Entnahme (mobil) -------------------------------------------- */ .scan-karte { max-width: 480px; } .scan-chem { font-size: 1.3rem; font-weight: 800; } .scan-meta { color: var(--text-leise); margin: .2rem 0 .5rem; } .scan-bestand { display: flex; align-items: baseline; justify-content: space-between; margin: .8rem 0; padding: .6rem .8rem; background: var(--flaeche-2); border-radius: var(--radius-s); } .scan-bestand-label { color: var(--text-leise); } .scan-bestand-wert { font-size: 1.4rem; font-weight: 800; } .scan-leer { color: var(--gefahr); } .scan-form { display: flex; flex-direction: column; gap: .8rem; } .scan-form input[type="text"] { font-size: 1.05rem; } .scan-voll { display: flex; align-items: center; gap: .5rem; cursor: pointer; } .btn-gross { font-size: 1.1rem; padding: .8rem 1rem; width: 100%; } /* --- Verbraucher / Verbrauch ------------------------------------------ */ .vb-textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; } .vb-filter { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; } .vb-filter .feld { flex: 1 1 12rem; } .vb-filter .formular-aktion { flex: 0 0 auto; margin: 0; } .vb-gruppe h3 { margin: 0 0 .5rem; } .vb-ohne { color: var(--text-leise); font-style: italic; font-weight: 600; } .vb-tabelle { width: 100%; border-collapse: collapse; } .vb-tabelle td { padding: .35rem 0; border-top: 1px solid var(--rahmen); } .vb-tabelle tr:first-child td { border-top: 0; } .vb-menge { text-align: right; font-weight: 700; white-space: nowrap; } /* --- Wareneingang: Aufteilung ----------------------------------------- */ .we-pool { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; cursor: pointer; } .we-summe { margin: .2rem 0 0; min-height: 1.1em; } .feld.eng { flex: 0 0 8rem; } /* --- Druck (Etikett) --------------------------------------------------- */ @media print { .no-print { display: none !important; } body * { visibility: hidden; } .etikett-print, .etikett-print * { visibility: visible; } .etikett-print { position: absolute; left: 0; top: 0; } .etikett { border-color: #000; } } /* ======================================================================= * MODUL: Tool / Rechner / Konfigurator (zentralisiert aus modules/tool/views/_tool_ui.php) * ===================================================================== */ genau einmal pro Seite aus. /* --- Rechner-Layout (Eingabe links, Ergebnisse rechts) ----------------- */ .tool-rechner { margin-top: 1rem; } .tr-spalten { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 900px) { .tr-spalten { grid-template-columns: 3fr 2fr; align-items: start; } } .tr-block { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; background: var(--flaeche); } .tr-block-kopf { background: var(--flaeche-2); padding: .65rem 1rem; font-weight: 700; color: var(--akzent); border-bottom: 1px solid var(--rahmen); font-size: .95rem; } /* Eingabe-Zeile */ .tr-zeile { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; border-bottom: 1px solid var(--rahmen); } .tr-zeile:last-child { border-bottom: none; } .tr-label { flex: 1; font-size: .95rem; } .tr-einheit { width: 90px; text-align: right; color: var(--text-leise); font-size: .85rem; } .tr-input { width: 150px; } .tr-input input, .tr-input select { width: 100%; } /* Ergebnis-Zeile */ .tr-erg { display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; border-bottom: 1px solid var(--rahmen); } .tr-erg:last-child { border-bottom: none; } .tr-erg.highlight { background: var(--akzent-bg); border-left: 4px solid var(--akzent); padding-left: calc(1rem - 4px); } .tr-erg-label { flex: 1; font-size: .95rem; font-weight: 600; } .tr-erg-einheit { width: 90px; text-align: right; color: var(--text-leise); font-size: .85rem; } .tr-erg-wert { width: 130px; text-align: right; font-size: 1.25rem; font-weight: 800; color: var(--akzent); white-space: nowrap; } /* Charge-Energie-Balken */ .tr-bars { padding: .75rem 1rem; } .tr-bar { display: flex; height: 26px; border-radius: var(--radius-s); overflow: hidden; border: 1px solid var(--rahmen); } .tr-bar-seg { width: var(--bar, 0); display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; font-weight: 700; transition: width .2s ease; min-width: 0; overflow: hidden; } .tr-bar-seg.ofen { background: var(--akzent); } .tr-bar-seg.charge { background: #2e9e5b; } .tr-bar-legende { display: flex; gap: 1.2rem; margin-top: .5rem; font-size: .82rem; color: var(--text-leise); } .tr-bar-legende span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: .35rem; vertical-align: baseline; } .tr-bar-legende .lg-ofen::before { background: var(--akzent); } .tr-bar-legende .lg-charge::before { background: #2e9e5b; } /* Belegungs-Canvas */ .tr-canvas-wrap { padding: 1rem; } .tr-canvas-wrap canvas { width: 100%; height: auto; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--bg); } /* Speichern-Leiste + gespeicherte Liste */ .tr-save { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; padding: 1rem; } .tr-save .feld { margin: 0; } .tr-save .feld.titel { flex: 1; min-width: 180px; } .tr-save .feld.notiz { flex: 2; min-width: 200px; } .tool-liste-leer { color: var(--text-leise); font-style: italic; padding: .5rem 0; } .tr-aktiv-zeile { background: var(--akzent-bg); } .tabelle .num, .tabelle th.num { text-align: right; } /* --- Vorbehandlung: Einsparungsbanner + Vergleich ---------------------- */ .vb-banner { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1rem 0; } @media (min-width: 760px) { .vb-banner { grid-template-columns: 220px 1fr; align-items: stretch; } } .vb-banner-haupt { border: 1px solid var(--akzent); border-radius: var(--radius); background: var(--akzent-bg); padding: 1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; text-align: center; } .vb-banner-lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); } .vb-banner-val { font-size: 1.9rem; font-weight: 800; color: var(--akzent); line-height: 1.15; margin-top: .2rem; } .vb-banner-pct { font-size: 1.1rem; font-weight: 700; color: var(--text-leise); } .vb-banner-tab { margin: 0; } .vb-vg-einheit { color: var(--text-leise); font-size: .82rem; } .vb-vg-gesamt td { font-weight: 800; border-top: 2px solid var(--rahmen); } /* --- Vorbehandlung: Szenario-Umschalter + Becken-Tabs ------------------ */ .vb-scen-bar { display: flex; gap: .5rem; margin: 1rem 0 .75rem; } .vb-scen-btn { flex: 1; padding: .7rem; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--flaeche); color: var(--text-leise); font: inherit; font-weight: 700; cursor: pointer; } .vb-scen-btn.active { background: var(--akzent); border-color: var(--akzent); color: #fff; } .vb-tabbar { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; } .vb-tab { padding: .5rem .9rem; border: 1px solid var(--rahmen); border-radius: var(--radius-s); background: var(--flaeche-2); color: var(--text-leise); font: inherit; font-size: .9rem; cursor: pointer; } .vb-tab.active { background: var(--flaeche); color: var(--akzent); border-color: var(--akzent); font-weight: 700; } /* --- Konfigurator (Baukasten) ----------------------------------------- */ .kfg-viewtabs { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0; border-bottom: 2px solid var(--rahmen); } .kfg-vtab { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-bottom: none; color: var(--text-leise); font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: var(--radius-s) var(--radius-s) 0 0; cursor: pointer; margin-bottom: -2px; } .kfg-vtab.active { background: var(--flaeche); color: var(--akzent); border-bottom: 2px solid var(--flaeche); } .kfg-kammer { border: 1px solid var(--rahmen); border-radius: var(--radius); margin: 0 1rem 1rem; background: var(--flaeche-2); overflow: hidden; } .kfg-kammer-head { display: flex; align-items: center; justify-content: space-between; background: var(--akzent-bg); padding: .5rem .9rem; } .kfg-kammer-titel { font-weight: 700; color: var(--akzent); } .kfg-schritt { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .9rem; border-top: 1px solid var(--rahmen); background: var(--flaeche); } .kfg-nr { width: 22px; height: 22px; border-radius: 50%; background: var(--akzent); color: #fff; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; } .kfg-badge { font-size: .8rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; } .kfg-badge.akt { background: var(--akzent); color: #fff; } .kfg-badge.spu { background: var(--flaeche-2); color: var(--akzent); border: 1px solid var(--akzent); } .kfg-badge.spk { background: #e3f0d6; color: #3d6b1f; } .kfg-opt { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; color: var(--text-leise); } .kfg-temp, .kfg-stufen { width: 64px; text-align: right; } .kfg-chk { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer; } .kfg-schritt-btns { margin-left: auto; display: flex; gap: .25rem; } .kfg-mv, .kfg-x { border: 1px solid var(--rahmen); background: var(--flaeche); cursor: pointer; border-radius: var(--radius-s); color: var(--text-leise); width: 28px; height: 28px; line-height: 1; } .kfg-mv:hover, .kfg-x:hover { border-color: var(--akzent); color: var(--akzent); } .kfg-add-row { display: flex; gap: .5rem; flex-wrap: wrap; padding: .7rem .9rem; border-top: 1px solid var(--rahmen); background: var(--flaeche); } .kfg-add-row button { border: 1px dashed var(--akzent); background: var(--flaeche); color: var(--akzent); font: inherit; font-weight: 600; padding: .4rem .8rem; border-radius: var(--radius-s); cursor: pointer; } .kfg-add-kammer { width: 100%; justify-content: center; } .kfg-leer { padding: .9rem; text-align: center; color: var(--text-leise); font-style: italic; } .kfg-ein-becken { border: 1px solid var(--rahmen); border-radius: var(--radius); margin: .5rem 1rem; overflow: hidden; } .kfg-ein-bhead { display: flex; align-items: center; gap: .4rem; background: var(--flaeche-2); padding: .5rem .9rem; border-bottom: 1px solid var(--rahmen); font-weight: 600; } .kfg-ein-sub { font-size: .8rem; font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .04em; padding: .5rem .9rem .2rem; border-top: 1px solid var(--rahmen); } .kfg-tag-nr { font-size: .75rem; font-weight: 700; background: #e8a317; color: #fff; padding: .1rem .4rem; border-radius: 3px; } .kfg-locked { background: var(--flaeche-2) !important; color: var(--text-leise) !important; cursor: not-allowed; } .kfg-din { width: 100%; } .kfg-erg-block { border: 1px solid var(--rahmen); border-radius: var(--radius); margin: 0 1rem 1rem; overflow: hidden; } .kfg-erg-head { background: var(--akzent-bg); color: var(--akzent); font-weight: 700; padding: .5rem .9rem; } .kfg-erg-tab { width: 100%; border-collapse: collapse; } .kfg-erg-tab td { padding: .4rem .9rem; border-bottom: 1px solid var(--rahmen); } .kfg-erg-tab tr:last-child td { border-bottom: none; } .kfg-erg-wert { text-align: right; font-weight: 700; white-space: nowrap; } .kfg-erg-einheit { color: var(--text-leise); width: 60px; font-size: .85rem; } .kfg-erg-trenn td { background: var(--flaeche-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); font-size: .8rem; } .kfg-erg-summe td { background: var(--akzent-bg); font-weight: 800; color: var(--akzent); } .kfg-erg-gesamt { border-color: var(--akzent); border-width: 2px; } .kfg-erg-gesamt .kfg-erg-head { background: var(--akzent); color: #fff; } .kfg-massn-body { padding: .3rem .9rem .9rem; } .kfg-massn { padding: .6rem 0; border-bottom: 1px dashed var(--rahmen); } .kfg-massn:last-child { border-bottom: none; } .kfg-massn-off { opacity: .6; } .kfg-massn-det { margin: .35rem 0 0 1.6rem; font-size: .9rem; color: var(--text-leise); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .kfg-massn-det .kfg-temp { width: 70px; } .kfg-erg-kopf td { background: var(--flaeche-2); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); text-align: right; } .kfg-erg-kopf td:first-child { text-align: left; } .kfg-erg-ersp { color: var(--ok); font-weight: 800; } .kfg-hinweis { margin: 0 1rem 1rem; padding: .6rem .9rem; background: var(--akzent-bg); color: var(--akzent); border-radius: var(--radius-s); font-size: .9rem; } /* ======================================================================= * MODUL: Dateimanager (zentralisiert aus modules/dateimanager/views/_dm_ui.php) * ===================================================================== */ genau einmal pro Seitenaufruf aus. /* Alle früheren Regeln (Abschnittskopf, neu-form, Listen-Karten, Icons, Datei-Vorschau/Import, Kategorie-Titel) sind jetzt zentral in app.css. Der Dateimanager hat aktuell kein eigenes, nur hier benötigtes Styling. */ /* ======================================================================= * Utilities, die frühere Inline-Styles in den Views ersetzen * ===================================================================== */ /* Einzug nach Baumtiefe (Menü-/Rechte-/Seiten-Editor) – statt Inline-Padding */ .tief-1 { padding-left: 16px; } .tief-2 { padding-left: 32px; } .tief-3 { padding-left: 48px; } .tief-4 { padding-left: 64px; } .tief-5 { padding-left: 80px; } .tief-6 { padding-left: 96px; } .tief-7 { padding-left: 112px; } .tief-8 { padding-left: 128px; } /* schmale Zahl-Eingabe (z. B. Sortier-Spalte in Editor-Tabellen) */ .w-num { width: 5rem; min-width: 4rem; } /* datengetriebene Werte: View liefert nur die Zahl/Farbe per CSS-Variable */ .bar-fuell { width: var(--bar, 0); } .farbe-bg { background: var(--c); } .farbe-fg { color: var(--c); } /* ------------------------------------------------------------------ * * Modul-Unternavigation (Reiter je Modul, lib/unternav.php) * ------------------------------------------------------------------ */ .modul-unternav { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.1rem; padding: 0 0 .6rem; border-bottom: 1px solid var(--rahmen); } .modul-unternav .un-tab { display: inline-flex; align-items: center; padding: .38rem .85rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text-leise); text-decoration: none; font-size: .9rem; line-height: 1; white-space: nowrap; transition: background .12s, color .12s; } .modul-unternav .un-tab:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; } .modul-unternav .un-tab.un-aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; } /* Mobile: horizontal scrollbar statt Umbruch, damit die Leiste kompakt bleibt. */ @media (max-width: 640px) { .modul-unternav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .3rem; scrollbar-width: thin; } .modul-unternav .un-tab { flex: 0 0 auto; } } /* ------------------------------------------------------------------ * * Brotkrumen (Breadcrumbs, lib/unternav.php) * ------------------------------------------------------------------ */ .brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .7rem; font-size: .82rem; color: var(--text-leise); } .brotkrumen .bk-glied { color: var(--text-leise); text-decoration: none; } .brotkrumen .bk-glied:hover { color: var(--akzent); text-decoration: underline; } .brotkrumen .bk-sep { color: var(--text-leise); opacity: .6; } .brotkrumen .bk-akt { color: var(--text); font-weight: 600; } /* ================================================================== * * Fokus-Modus – nacktes, touch-freundliches Layout für mobile * Arbeitstätigkeiten (Scannen, Buchen/Abbuchen, QR). lib/fokus.php * ================================================================== */ body.fokus { background: var(--bg); /* Kein Chrome: keine Sidebar/Topbar/Footer/Tabbar im Fokus-Modus. */ } .fokus-inhalt { max-width: 34rem; margin: 0 auto; padding: 1.1rem 1rem 3rem; min-height: 100vh; box-sizing: border-box; } /* Grosse, gut lesbare Überschrift der Aufgabe. */ .fokus-inhalt h1, .fokus-inhalt .seiten-kopf h1 { font-size: 1.4rem; margin: .2rem 0 1rem; } /* Touch-Ziele grosszügig: Knöpfe und Eingaben mindestens ~3.2rem hoch. */ .fokus-inhalt .btn { min-height: 3.2rem; padding: .9rem 1.2rem; font-size: 1.05rem; border-radius: var(--radius); } .fokus-inhalt .btn-voll { width: 100%; } .fokus-inhalt input[type="text"], .fokus-inhalt input[type="number"], .fokus-inhalt input[type="search"], .fokus-inhalt input[type="date"], .fokus-inhalt select, .fokus-inhalt textarea { min-height: 3.2rem; font-size: 1.05rem; padding: .7rem .85rem; } /* Etwas mehr Luft zwischen Formularfeldern für dicke Finger. */ .fokus-inhalt .feld { margin-bottom: 1rem; } .fokus-inhalt .karte { padding: 1.1rem; } /* Schliessen-Knopf oben rechts – zurück in den normalen Bereich. */ .fokus-exit { position: fixed; top: .6rem; right: .6rem; z-index: 50; width: 2.6rem; height: 2.6rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; text-decoration: none; background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--rahmen); box-shadow: var(--schatten); } .fokus-exit:hover { background: var(--flaeche-2); color: var(--text); text-decoration: none; } /* Auf sehr kleinen Geräten randlos und noch grösser. */ @media (max-width: 480px) { .fokus-inhalt { padding: .9rem .8rem 3rem; } .fokus-inhalt .karte { padding: .9rem; border-radius: var(--radius); } } /* ------------------------------------------------------------------ * * Firmenlogo (Branding, lib/branding.php) * ------------------------------------------------------------------ */ /* Login-Seite: Logo statt Titel */ .auth-logo { text-align: center; margin: 0 0 1rem; } .auth-logo img { max-width: 100%; max-height: 96px; height: auto; object-fit: contain; } /* Menü-Topbar: Logo in der Marke */ .marke-logo { max-height: 34px; width: auto; display: block; object-fit: contain; } /* Einstellungen: Vorschau des aktuellen Logos */ .branding-vorschau { display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1rem; margin: .3rem 0 .8rem; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); } .branding-vorschau img { max-height: 72px; max-width: 260px; width: auto; object-fit: contain; } /* ------------------------------------------------------------------ * * Produktionsplanung – Belegungstafel * ------------------------------------------------------------------ */ .pp-wochenwahl { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .pp-woche { font-weight: 600; padding: 0 .3rem; white-space: nowrap; } .pp-tafel { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow-x: auto; background: var(--flaeche); } .pp-kopfzeile, .pp-zeile { display: grid; grid-template-columns: 8.5rem repeat(5, minmax(8rem, 1fr)); } .pp-kopfzeile { background: var(--flaeche-2); border-bottom: 1px solid var(--rahmen); position: sticky; top: 0; z-index: 1; } .pp-ecke, .pp-tagkopf, .pp-anlage { padding: .45rem .55rem; font-size: .85rem; } .pp-tagkopf { font-weight: 600; color: var(--text-leise); border-left: 1px solid var(--rahmen); } .pp-tagkopf.pp-heute { color: var(--akzent); background: var(--akzent-bg); } .pp-zeile { border-bottom: 1px solid var(--rahmen); } .pp-zeile:last-child { border-bottom: 0; } .pp-anlage { display: flex; align-items: center; font-weight: 600; background: var(--flaeche-2); } .pp-zelle { min-height: 4.2rem; padding: .3rem; border-left: 1px solid var(--rahmen); display: flex; flex-direction: column; gap: .3rem; } .pp-zelle.pp-heute-sp { background: var(--akzent-bg); } .pp-zelle.pp-ziel { outline: 2px dashed var(--akzent); outline-offset: -3px; } .pp-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 3px solid var(--akzent); border-radius: var(--radius-s); padding: .3rem .4rem; font-size: .82rem; cursor: grab; } .pp-karte:active { cursor: grabbing; } .pp-karte.pp-zieht { opacity: .45; } .pp-karte.pp-prio { border-left-color: var(--warn); } .pp-karte.pp-ueber { border-left-color: var(--gefahr); } .pp-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .3rem; } .pp-karte-kopf a { text-decoration: none; } .pp-prio-zeichen { color: var(--warn); } .pp-karte-kunde { color: var(--text-leise); } .pp-karte-bez, .pp-karte-status, .pp-karte-fuss { font-size: .76rem; color: var(--text-leise); } .pp-karte-status { display: inline-block; background: var(--flaeche-2); border-radius: 3px; padding: 0 .25rem; margin-top: .15rem; } .pp-ueber-tf { color: var(--gefahr); } .pp-vorrat { display: flex; flex-direction: row; flex-wrap: wrap; gap: .4rem; border: 1px dashed var(--rahmen); border-radius: var(--radius); padding: .5rem; min-height: 4rem; background: var(--flaeche); } .pp-vorrat .pp-karte { flex: 0 0 12rem; } .pp-anzahl { font-size: .78rem; color: var(--text-leise); font-weight: 400; } .pp-neu { margin-top: 1rem; } /* Handy: Tafel seitlich scrollbar, Zeilen etwas enger */ @media (max-width: 700px) { .pp-kopfzeile, .pp-zeile { grid-template-columns: 6.5rem repeat(5, minmax(7rem, 1fr)); min-width: 42rem; } .pp-vorrat .pp-karte { flex: 1 1 100%; } } /* ------------------------------------------------------------------ * * Menü-Editor als Baum * ------------------------------------------------------------------ */ .mn-werkzeug { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; } .mn-suchfeld { flex: 1; min-width: 14rem; margin: 0; } .mn-zaehler { white-space: nowrap; } .mn-baum { border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); } .mn-zeile { border-bottom: 1px solid var(--rahmen); } .mn-zeile:last-child { border-bottom: 0; } .mn-zeile[hidden] { display: none; } .mn-haupt { display: flex; align-items: center; gap: .4rem; padding: .35rem .5rem; min-height: 2.4rem; flex-wrap: wrap; } .mn-zeile:hover > .mn-haupt { background: var(--flaeche-2); } .mn-klapp, .mn-klapp-leer { width: 1.6rem; height: 1.6rem; flex: 0 0 auto; } .mn-klapp { border: 0; background: none; cursor: pointer; color: var(--text-leise); font-size: .9rem; border-radius: var(--radius-s); line-height: 1; } .mn-klapp:hover { background: var(--akzent-bg); color: var(--akzent); } .mn-titel { font-weight: 600; } .mn-kinder { font-size: .72rem; color: var(--text-leise); background: var(--flaeche-2); border-radius: 999px; padding: 0 .4rem; } .mn-pfad { color: var(--text-leise); font-size: .8rem; font-family: monospace; margin-left: auto; } .mn-aus-tag { font-size: .72rem; color: var(--warn); background: var(--warn-bg); border-radius: 3px; padding: 0 .3rem; } .mn-zeile.mn-aus .mn-titel { color: var(--text-leise); font-weight: 400; } .mn-aktionen { display: flex; gap: .1rem; flex: 0 0 auto; } .mn-akt { border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-leise); min-width: 2rem; min-height: 2rem; border-radius: var(--radius-s); font-size: .95rem; line-height: 1; } .mn-akt:hover { background: var(--akzent-bg); color: var(--akzent); border-color: var(--rahmen); } .mn-stift-auf { background: var(--akzent-bg); color: var(--akzent); } .mn-form { padding: .6rem .8rem 1rem 2.2rem; background: var(--flaeche-2); border-top: 1px dashed var(--rahmen); } .mn-schalter { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; } .mn-check { display: flex; align-items: center; gap: .35rem; font-size: .9rem; } .mn-loeschen { margin-top: .6rem; } .mn-frisch { animation: mn-blitz 1.4s ease-out 1; } @keyframes mn-blitz { from { background: var(--akzent-bg); } to { background: transparent; } } .mn-neu { margin-top: 1rem; } @media (max-width: 700px) { .mn-pfad { margin-left: 0; flex: 1 1 100%; order: 9; } .mn-aktionen { order: 8; margin-left: auto; } } /* ------------------------------------------------------------------ * * Bereichsleiste (Navigationsart "bereiche") * ------------------------------------------------------------------ */ .bereichsleiste { display: flex; gap: .1rem; align-items: center; margin-left: .7rem; overflow-x: auto; } .bl-punkt { display: inline-block; white-space: nowrap; text-decoration: none; padding: .35rem .7rem; border-radius: var(--radius-s); font-size: .92rem; color: var(--text-leise); } .bl-punkt:hover { background: var(--akzent-bg); color: var(--akzent); text-decoration: none; } .bl-aktiv { background: var(--akzent-bg); color: var(--akzent); font-weight: 600; } .sb-bereich-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sb-leise, var(--text-leise)); padding: .2rem .6rem .5rem; } .nav-stil { margin-bottom: 1rem; } .nav-stil-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .5rem; } .nav-stil-form .feld { flex: 1; min-width: 16rem; margin: 0; } @media (max-width: 900px) { .bereichsleiste { display: none; } } /* Bereichsname in der Seitenleiste führt zur Übersicht des Bereichs */ .sb-bereich-link { display: block; text-decoration: none; border-radius: var(--radius-s); } .sb-bereich-link:hover { color: var(--sb-aktiv-tf, var(--akzent)); background: var(--sb-hover, var(--flaeche)); text-decoration: none; } .sb-bereich-auf { color: var(--sb-aktiv-tf, var(--akzent)); } /* ------------------------------------------------------------------ * * Rechte Kontextspalte (Navigationsart "bereiche") * Links: wohin man gehen kann. Rechts: was zum offenen Punkt gehört. * ------------------------------------------------------------------ */ .kontextleiste { flex: 0 0 13rem; width: 13rem; padding: .7rem .6rem; overflow: auto; background: var(--flaeche-2); border-left: 1px solid var(--rahmen); } [data-menu="rechts"] .kontextleiste { border-left: none; border-right: 1px solid var(--rahmen); } .kx-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise); padding: .1rem .5rem .5rem; } .kx-link { display: block; padding: .4rem .55rem; border-radius: var(--radius-s); color: var(--text-leise); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; } .kx-link:hover { background: var(--flaeche); color: var(--text); text-decoration: none; } .kx-auf { color: var(--akzent); background: var(--akzent-bg); border-left-color: var(--akzent); font-weight: 600; } .kx-gruppe { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); padding: .8rem .5rem .3rem; margin-top: .3rem; border-top: 1px solid var(--rahmen); } /* Schmale Schirme: rechte Spalte wandert unter den Inhalt */ @media (max-width: 1100px) { .kontextleiste { flex: 1 1 100%; width: auto; border-left: 0; border-top: 1px solid var(--rahmen); display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; } .kx-titel, .kx-gruppe { flex: 1 1 100%; border-top: 0; padding-bottom: .2rem; } .kx-link { border-left: 0; border: 1px solid var(--rahmen); } } /* Freie Punkte (Kontakt, Problem melden) unten in der Seitenleiste */ .sb-frei-block { margin-top: .8rem; padding-top: .5rem; border-top: 1px solid var(--sb-rand, var(--rahmen)); } .sb-frei { display: block; padding: .35rem .6rem; font-size: .85rem; text-decoration: none; color: var(--sb-leise, var(--text-leise)); border-radius: var(--radius-s); } .sb-frei:hover { background: var(--sb-hover, var(--flaeche)); color: var(--sb-text, var(--text)); text-decoration: none; } .sb-frei-auf { color: var(--sb-aktiv-tf, var(--akzent)); } /* ------------------------------------------------------------------ * * Geräte-Tätigkeiten (Scannen, Buchen per Scan, QR) * -------------------------------------------------------------------- * Dieselbe Seite, zwei Darstellungen – entschieden nach Bildschirmbreite, * nicht nach Adresse: * Handy/schmales Tablet: Vollbild ohne Menü (wie bisher der Fokus-Modus) * Desktop: normales Layout mit Menü, Arbeitsbereich gross * So gibt es nur EINE Seite zu pflegen statt zwei Fassungen. * ------------------------------------------------------------------ */ /* --- Desktop: Arbeitsbereich hervorheben, aber Navigation behalten --- */ @media (min-width: 901px) { .fokus-seite .inhalt { max-width: 46rem; } .fokus-seite .scan-form, .fokus-seite .scan-karte, .fokus-seite form.karte { font-size: 1.05rem; } /* Eingabefelder gross genug für Scanner-Eingabe und Mausbedienung */ .fokus-seite .inhalt input[type="text"], .fokus-seite .inhalt input[type="search"], .fokus-seite .inhalt input[type="number"] { min-height: 2.9rem; font-size: 1.05rem; } .fokus-seite .inhalt .btn { min-height: 2.9rem; } .fokus-seite .btn-voll { font-size: 1.05rem; } } /* --- Handy und schmales Tablet: Vollbild, kein Chrome --- */ @media (max-width: 900px) { body.fokus-seite .topbar, body.fokus-seite .seitenleiste, body.fokus-seite .kontextleiste, body.fokus-seite .modul-unternav, body.fokus-seite .brotkrumen, body.fokus-seite .kio-tabbar, body.fokus-seite .fuss, body.fokus-seite .testleiste { display: none; } body.fokus-seite .shell { display: block; } body.fokus-seite .shell-main { display: block; } body.fokus-seite .inhalt { max-width: none; padding: .8rem .7rem calc(.8rem + env(safe-area-inset-bottom)); } /* Grosse Ziele für die Bedienung mit Handschuhen */ body.fokus-seite .inhalt input, body.fokus-seite .inhalt select, body.fokus-seite .inhalt .btn { min-height: 3rem; font-size: 1.05rem; } body.fokus-seite .inhalt .btn-voll { width: 100%; } } /* Ausklappbare Gruppen in langen Formularen */ .fg-details { border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: 0; margin: .8rem 0; } .fg-details[open] { padding-bottom: .7rem; } .fg-titel { cursor: pointer; padding: .6rem .8rem; font-weight: 600; font-size: .95rem; list-style: none; } .fg-titel::-webkit-details-marker { display: none; } .fg-titel::before { content: "\25B8"; margin-right: .45rem; color: var(--text-leise); font-size: .8em; display: inline-block; } .fg-details[open] > .fg-titel::before { transform: rotate(90deg); } .fg-titel:hover { background: var(--flaeche-2); } .fg-details > *:not(.fg-titel) { padding-left: .8rem; padding-right: .8rem; } /* --- Weitere Aktionen hinter "···" ---------------------------------------- */ .akt-mehr { position: relative; display: inline-block; } .akt-mehr-knopf { min-width: 2.4rem; font-size: 1.1rem; line-height: 1; } /* WICHTIG: hidden muss gewinnen. Ohne diese Zeile hebelt das display unten das hidden-Attribut aus und das Menue steht dauerhaft offen. */ .akt-panel[hidden] { display: none !important; } .akt-panel { position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30; min-width: 12rem; padding: .35rem; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0,0,0,.14); display: flex; flex-direction: column; gap: .15rem; } .akt-panel > .btn, .akt-panel form > .btn { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .5rem .6rem; min-height: 2.4rem; border-radius: var(--radius-s); } .akt-panel > .btn:hover, .akt-panel form > .btn:hover { background: var(--flaeche-2); } .akt-panel form { display: block; width: 100%; margin: 0; } /* Löschen abgesetzt am Ende, damit es nicht neben Speichern liegt */ .akt-panel .btn-gefahr { color: var(--gefahr); margin-top: .2rem; border-top: 1px solid var(--rahmen); } [data-menu="rechts"] .akt-panel { right: auto; left: 0; } /* Absicherung: Elemente mit dem hidden-Attribut bleiben verborgen, auch wenn sie sonst ein eigenes display haben. Ohne diese Regel steht z.B. ein Aufklappmenue dauerhaft offen. */ .akt-panel[hidden], .rt-blatt[hidden], .mn-form[hidden], .mn-zeile[hidden] { display: none !important; } /* ------------------------------------------------------------------ * * Startseite – ruhigere Darstellung * ------------------------------------------------------------------ */ /* Kennzahlen: weniger fett, mehr Luft */ .dash-kpi { background: var(--flaeche); border: 1px solid var(--rahmen); } .dash-kpi-wert { font-weight: 600; font-size: 1.55rem; letter-spacing: -.01em; } /* Handlungsbedarf: dezent statt flächig farbig – nur ein Streifen links */ .dash-box { background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 4px solid var(--rahmen); color: var(--text); } .dash-box:hover { background: var(--flaeche-2); text-decoration: none; } .dash-box.dash-gefahr { background: var(--flaeche); border-color: var(--rahmen); border-left-color: var(--gefahr); color: var(--text); } .dash-box.dash-warn { background: var(--flaeche); border-color: var(--rahmen); border-left-color: var(--warn); color: var(--text); } .dash-box.dash-info { background: var(--flaeche); border-color: var(--rahmen); border-left-color: var(--akzent); color: var(--text); } .dash-box-label { color: var(--text-leise); font-size: .85rem; } .dash-box-wert { font-size: 1.35rem; font-weight: 600; } .dash-box.dash-gefahr .dash-box-wert { color: var(--gefahr); } .dash-box.dash-warn .dash-box-wert { color: var(--warn); } /* Bereiche als grosse Einstiege */ .dash-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: .4rem 0 1.4rem; } .dash-bereich { display: flex; flex-direction: column; gap: .2rem; justify-content: center; min-height: 4.6rem; padding: .9rem 1rem; text-decoration: none; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); color: var(--text); transition: border-color .12s, background .12s; } .dash-bereich:hover { border-color: var(--akzent); background: var(--akzent-bg); text-decoration: none; } .dash-bereich-titel { font-weight: 600; font-size: 1rem; } .dash-bereich-n { font-size: .78rem; color: var(--text-leise); } .dash-h2 { font-size: 1rem; font-weight: 600; color: var(--text-leise); margin: 1.4rem 0 .5rem; } /* ------------------------------------------------------------------ * * Tabellen mit Eingabefeldern (z. B. Auftragsstatus verwalten) * -------------------------------------------------------------------- * KORREKTUR: Mein erster Versuch machte die Tabelle zu einem Block * (display:block) – dabei rechnen Kopfzeile und Inhalt als ZWEI getrennte * Tabellen, die Spalten passen nicht mehr zusammen und Felder scheinen * Inhalt zu verdecken. Die Tabelle bleibt jetzt eine Tabelle. * * Stattdessen: Zellen mit Eingabefeldern dürfen umbrechen, die Felder * füllen ihre Spalte und laufen nicht darüber hinaus. * ------------------------------------------------------------------ */ /* Zellen, die ein Eingabefeld enthalten, brauchen kein nowrap – sonst zwingen sie die Spalte unnötig breit. */ .tabelle td:has(input), .tabelle td:has(select), .tabelle td:has(textarea) { white-space: normal; } /* Felder füllen ihre Spalte, ragen aber nie darüber hinaus. */ .tabelle td input[type="text"], .tabelle td input[type="search"], .tabelle td select, .tabelle td textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .tabelle td input[type="number"] { width: 100%; max-width: 6rem; min-width: 0; } /* Kopfzellen dürfen umbrechen, sonst zwingen lange Titel die Spalten breit. */ .tabelle thead th { white-space: normal; line-height: 1.25; } /* Reicht die Breite trotzdem nicht, scrollt die Karte seitlich – die Tabelle selbst bleibt dabei intakt. */ .karte:has(> table.tabelle) { overflow-x: auto; } /* --- Produktionsplanung: Haken "erledigt" + Druckansicht ------------------ */ .pp-haken { display: inline; margin: 0; float: right; } .pp-haken button { border: 0; background: none; cursor: pointer; padding: 0 .1rem; font-size: 1rem; line-height: 1; color: var(--text-leise); } .pp-haken button:hover { color: var(--ok); } .pp-karte.pp-fertig { opacity: .55; border-left-color: var(--ok); } .pp-karte.pp-fertig .pp-karte-kopf strong { text-decoration: line-through; } /* Wochenplan drucken: nur die Tafel, ohne Menü und Farben. In der Halle hängt kein Bildschirm – der Ausdruck ist das Arbeitsmittel. */ @media print { .topbar, .bereichsleiste, .seitenleiste, .kontextleiste, .modul-unternav, .brotkrumen, .fuss, .kio-tabbar, .testleiste, .flash-bereich, .pp-drucken, .pp-wochenwahl .btn, .pp-haken, .pp-neu, .pp-vorrat, .seiten-kopf.mit-aktion > span { display: none !important; } body, .shell, .shell-main, .inhalt { display: block !important; overflow: visible !important; height: auto !important; } .inhalt { max-width: none; padding: 0; } .pp-tafel { border-color: #000; overflow: visible; } .pp-kopfzeile, .pp-zeile { grid-template-columns: 7rem repeat(5, 1fr); } .pp-zelle, .pp-anlage, .pp-tagkopf { border-color: #000 !important; } .pp-tagkopf.pp-heute, .pp-zelle.pp-heute-sp { background: none !important; } .pp-karte { border: 1px solid #000 !important; break-inside: avoid; page-break-inside: avoid; } .pp-karte.pp-fertig { opacity: 1; } .pp-karte-status { border: 1px solid #999; } @page { size: landscape; margin: 10mm; } } /* Produktionsplanung: Menge auf der Karte + Auslastung der Zelle */ .pp-karte-menge { font-size: .74rem; color: var(--text-leise); } .pp-last { margin-top: auto; padding-top: .2rem; font-size: .72rem; color: var(--text-leise); border-top: 1px dashed var(--rahmen); display: flex; gap: .3rem; justify-content: space-between; } .pp-last-p { font-weight: 600; } .pp-last-voll { color: var(--gefahr); border-top-color: var(--gefahr); } .pp-zelle.pp-voll { background: var(--gefahr-bg); } @media print { .pp-last { border-top-color: #000; color: #000; } .pp-zelle.pp-voll { background: none; } } /* Produktionsplanung: gesperrte Tage */ .pp-zelle.pp-gesperrt { background: repeating-linear-gradient(45deg, var(--flaeche-2) 0 6px, var(--rahmen) 6px 7px); } .pp-sperr-text { font-size: .72rem; color: var(--text-leise); font-weight: 600; text-align: center; padding: .3rem 0; } .pp-sperr-zeile { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--rahmen); font-size: .9rem; } @media print { .pp-zelle.pp-gesperrt { background: none; } .pp-sperr-text { color: #000; } } /* Produktionsplanung: Material und Bestand auf der Karte */ .pp-mat { font-size: .72rem; color: var(--text-leise); } .pp-mat-knapp { color: var(--warn); font-weight: 600; } .pp-mat-leer, .pp-mat-fehlt { color: var(--gefahr); font-weight: 600; } /* ------------------------------------------------------------------ * * Personal & Zeit * ------------------------------------------------------------------ */ .pz-wochenwahl { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .pz-woche { font-weight: 600; white-space: nowrap; padding: 0 .3rem; } .pz-uhr { margin-bottom: 1rem; } .pz-uhr-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; } .pz-uhr-form .feld { flex: 1; min-width: 10rem; margin: 0; } .pz-uhr-laeuft { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pz-uhr-punkt { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); animation: pz-blink 2s infinite; } @keyframes pz-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .pz-uhr-akt { margin-left: auto; display: flex; gap: .4rem; align-items: center; } .pz-tage { display: flex; flex-direction: column; gap: .5rem; } .pz-tag { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); padding: .5rem .7rem; } .pz-tag.pz-heute { border-color: var(--akzent); } .pz-tag.pz-we { background: var(--flaeche-2); } .pz-tag-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .pz-tag-summe { margin-left: auto; display: flex; gap: .4rem; align-items: baseline; } .pz-ft { font-size: .78rem; color: var(--akzent); background: var(--akzent-bg); border-radius: 3px; padding: 0 .35rem; } .pz-diff { font-weight: 600; font-size: .85rem; } .pz-plus { color: var(--ok); } .pz-minus { color: var(--gefahr); } .pz-buchung { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-top: 1px solid var(--rahmen); font-size: .9rem; flex-wrap: wrap; } .pz-b-art { font-weight: 600; min-width: 7rem; } .pz-b-notiz { color: var(--text-leise); } .pz-b-uhr { color: var(--text-leise); } .pz-b-weg { margin-left: auto; } .pz-b-weg button { border: 0; background: none; cursor: pointer; color: var(--text-leise); font-size: 1.1rem; padding: 0 .3rem; } .pz-b-weg button:hover { color: var(--gefahr); } .pz-neu { margin-top: .4rem; } .pz-neu > summary { cursor: pointer; font-size: .85rem; color: var(--text-leise); } .pz-summe { display: flex; gap: .8rem; align-items: baseline; margin-top: 1rem; font-size: 1.05rem; } .pz-summe .pz-diff { margin-left: auto; } .pz-jahr { display: flex; gap: .4rem; margin: 0 0 .8rem; } /* Personal: Mitarbeiter-Übersicht */ .pz-neu-ma { background: var(--warn-bg); } .pz-saldo { white-space: nowrap; text-align: right; } .pz-b-auftrag { font-size: .8rem; background: var(--akzent-bg); color: var(--akzent); border-radius: 3px; padding: 0 .35rem; text-decoration: none; } .pz-export { margin: .8rem 0; align-items: center; } /* Rechte: Klartext und Vorschau */ .rechte-erklaerung { display: flex; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--rahmen); font-size: .92rem; } .rechte-erklaerung:last-child { border-bottom: 0; } .rechte-erklaerung strong { flex: 0 0 11rem; } .rechte-erklaerung span { color: var(--text-leise); } .rechte-vorschau { padding: .4rem 0; border-bottom: 1px solid var(--rahmen); } .rechte-vorschau:last-child { border-bottom: 0; } .rechte-vorschau > summary { cursor: pointer; } @media (max-width: 700px) { .rechte-erklaerung { flex-direction: column; gap: .15rem; } } /* Rechtevergabe als Baum */ .rz-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; } .rz-filter { display: flex; align-items: center; gap: .35rem; font-size: .85rem; white-space: nowrap; } .rz-baum { border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden; } .rz-bereich { border-bottom: 1px solid var(--rahmen); } .rz-bereich:last-child { border-bottom: 0; } .rz-bereich[hidden], .rz-zeile[hidden] { display: none !important; } .rz-zeile { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; flex-wrap: wrap; } .rz-haupt { background: var(--flaeche-2); } .rz-kind { border-top: 1px solid var(--rahmen); font-size: .9rem; } .rz-kind.rz-ist-abw { background: var(--warn-bg); } .rz-klapp, .rz-klapp-leer { width: 1.5rem; flex: 0 0 auto; } .rz-klapp { border: 0; background: none; cursor: pointer; color: var(--text-leise); font-size: .85rem; line-height: 1; } .rz-klapp:hover { color: var(--akzent); } .rz-titel { font-weight: 600; } .rz-kind .rz-titel { font-weight: 400; } .rz-abw { font-size: .72rem; background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 0 .45rem; } .rz-wahl { margin-left: auto; max-width: 11rem; min-height: 2.1rem; padding: .25rem .5rem; } .rz-summe { margin-top: .5rem; } .rz-vorlagen { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .5rem .6rem; margin-bottom: .6rem; background: var(--akzent-bg); border-radius: var(--radius-s); } .rz-vorlage-akt { display: flex; gap: .4rem; flex-wrap: wrap; } .rv-wahl { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .pk-abgelaufen { background: var(--gefahr-bg); } .pk-warn { color: var(--gefahr); font-weight: 600; } /* Produktionsplanung: eingeteilte Personen auf der Karte */ .pp-leute { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .25rem; } .pp-person, .pp-person-neu { display: inline; margin: 0; } .pp-person button { border: 0; background: var(--akzent-bg); color: var(--akzent); cursor: pointer; border-radius: 999px; padding: 0 .4rem; font-size: .7rem; line-height: 1.5; } .pp-person button:hover { background: var(--gefahr-bg); color: var(--gefahr); } .pp-person-neu select { font-size: .7rem; min-height: 0; padding: 0 1.2rem 0 .3rem; height: 1.5rem; background-position: right .3rem center; border-style: dashed; } @media print { .pp-person-neu { display: none; } .pp-person button { background: none; border: 1px solid #000; } } /* Produktionsplanung: Bilanzzeile Bedarf gegen eingeteilte Leute */ .pp-bilanz { border-top: 2px solid var(--rahmen); background: var(--flaeche-2); } .pp-bilanz .pp-anlage { font-size: .78rem; color: var(--text-leise); font-weight: 600; } .pp-bilanz-z { min-height: 2.2rem; justify-content: center; } .pp-bilanz-txt { font-size: .78rem; text-align: center; color: var(--text-leise); } .pp-bilanz-txt small { display: block; font-size: .68rem; } .pp-bilanz-trenn { opacity: .5; } .pp-zelle.pp-eng { background: var(--warn-bg); } .pp-zelle.pp-eng .pp-bilanz-txt { color: var(--warn); font-weight: 600; } @media print { .pp-zelle.pp-eng { background: none; } } /* Einsatzplan aus Personensicht */ .ep-zeile { grid-template-columns: 8.5rem repeat(5, minmax(8rem, 1fr)) 4rem; } .ep-summe-kopf, .ep-summe { text-align: center; justify-content: center; font-weight: 600; } .ep-einsatz { font-size: .78rem; border-left: 3px solid var(--akzent); padding-left: .3rem; margin-bottom: .2rem; } .ep-einsatz .gmeta { display: block; font-size: .7rem; } .pp-zelle.ep-abwesend { background: var(--flaeche-2); } .ep-ab { font-size: .74rem; color: var(--text-leise); font-style: italic; } .ep-konflikt { font-size: .72rem; color: var(--gefahr); font-weight: 600; } .ep-frei { display: flex; flex-wrap: wrap; gap: .35rem; } .ep-frei-person { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 999px; padding: .15rem .6rem; font-size: .85rem; } @media (max-width: 700px) { .ep-zeile { grid-template-columns: 6.5rem repeat(5, minmax(7rem, 1fr)) 3rem; min-width: 44rem; } } /* Team der ganzen Karte gegenüber Leuten nur für diesen Tag */ .pp-leute-team { border-bottom: 1px dotted var(--rahmen); padding-bottom: .2rem; margin-bottom: .2rem; } .pp-team-marke { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); align-self: center; } .pp-leute-team .pp-person button { background: var(--ok-bg); color: var(--ok); } .ep-team { border-left-color: var(--ok); } .ep-team-marke { font-size: .62rem; text-transform: uppercase; color: var(--text-leise); margin-left: .2rem; } /* Modulverwaltung */ .mod-zeile { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .6rem .2rem; border-bottom: 1px solid var(--rahmen); } .mod-zeile:last-of-type { border-bottom: 0; } .mod-zeile.mod-warn { background: var(--warn-bg); } .mod-schalter { display: flex; align-items: center; gap: .5rem; min-width: 15rem; cursor: pointer; } .mod-name { font-weight: 600; } .mod-meta { font-size: .8rem; color: var(--text-leise); } .mod-fehlt { font-size: .8rem; color: var(--gefahr); font-weight: 600; margin-left: auto; } /* ------------------------------------------------------------------ * * Startseite fürs Handy (/los) * Grosse Tippflächen, eine Spalte, nichts drumherum. Die Kacheln * werden grösser, je weniger es sind – der Platz wird verteilt. * ------------------------------------------------------------------ */ .los-seite { max-width: 30rem; margin: 0 auto; padding: .5rem 0 2rem; } .los-titel { font-size: 1.3rem; margin: .2rem 0 1.1rem; } .los-kacheln { display: grid; gap: .7rem; } .los-kachel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.4rem 1rem; min-height: 6.5rem; background: var(--akzent-bg); color: var(--akzent); border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; -webkit-tap-highlight-color: transparent; } .los-kachel:active { border-color: var(--akzent); } .los-icon { width: 2rem; height: 2rem; } .los-kachel-titel { font-size: 1.1rem; font-weight: 600; } .los-kachel-text { font-size: .85rem; opacity: .85; line-height: 1.35; } .los-fuss { margin-top: 1.6rem; text-align: center; font-size: .9rem; } /* Weniger Kacheln = mehr Platz für jede einzelne. */ .los-n2 .los-kachel { min-height: 8.5rem; padding: 2rem 1rem; } .los-n2 .los-icon { width: 2.4rem; height: 2.4rem; } /* Ab Tablet nebeneinander – dort ist Breite vorhanden. */ @media (min-width: 640px) { .los-seite { max-width: 42rem; } .los-kacheln { grid-template-columns: 1fr 1fr; } .los-n2 .los-kachel { min-height: 7rem; } } /* ------------------------------------------------------------------ * * Zeiterfassung fürs Handy (/personal/heute) * Grosse Tippflächen, 16px-Felder gegen das iOS-Zoomen, eine Spalte. * ------------------------------------------------------------------ */ .ht-seite { max-width: 30rem; margin: 0 auto; padding: .3rem 0 2rem; } .ht-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .ht-pfeil { font-size: 1.5rem; text-decoration: none; padding: .4rem .8rem; color: var(--text-leise); } .ht-datum { text-align: center; line-height: 1.25; } .ht-datum strong { display: block; font-size: 1.15rem; } .ht-datum span { font-size: .9rem; color: var(--text-leise); } .ht-feiertag { text-align: center; color: var(--akzent); background: var(--akzent-bg); border-radius: var(--radius-s); padding: .4rem; margin: 0 0 1rem; } .ht-uhr-laeuft { background: var(--ok-bg); border-radius: var(--radius); padding: 1.1rem; text-align: center; margin-bottom: .7rem; } .ht-uhr-seit { display: block; font-size: .85rem; color: var(--ok); } .ht-uhr-zeit { display: block; font-size: 2.4rem; font-weight: 600; color: var(--ok); line-height: 1.15; } .ht-uhr-notiz { display: block; font-size: .85rem; color: var(--ok); opacity: .8; } .ht-knopf { display: block; width: 100%; min-height: 3.1rem; font-size: 1.05rem; border-radius: var(--radius); border: 1px solid var(--rahmen); background: var(--flaeche); color: var(--text); cursor: pointer; margin-bottom: .6rem; padding: .8rem 1rem; text-align: center; -webkit-tap-highlight-color: transparent; } .ht-knopf-start { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; } .ht-knopf-stop { background: var(--gefahr); border-color: var(--gefahr); color: #fff; font-weight: 600; } .ht-knopf-still { color: var(--text-leise); } .ht-start .feld, .ht-nachtragen .feld { margin-bottom: .6rem; } /* Kein iOS-Zoom beim Antippen: 16px ist die Schwelle. */ .ht-feld { font-size: 16px !important; min-height: 3rem; width: 100%; } .ht-vonbis { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .ht-nachtragen { margin-bottom: .8rem; } .ht-nachtragen > summary { list-style: none; } .ht-nachtragen > summary::-webkit-details-marker { display: none; } .ht-summe { display: flex; align-items: baseline; gap: .5rem; padding: .8rem 0; border-top: 1px solid var(--rahmen); font-size: 1rem; } .ht-summe strong { margin-left: auto; font-size: 1.1rem; } .ht-buchung { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem 0; border-top: 1px solid var(--rahmen); font-size: .95rem; } .ht-b-art { font-weight: 600; } .ht-b-dauer { font-weight: 600; } .ht-b-zeit, .ht-b-notiz { color: var(--text-leise); font-size: .85rem; } .ht-b-weg { margin-left: auto; } .ht-b-weg button { border: 0; background: none; color: var(--text-leise); font-size: 1.4rem; padding: .2rem .7rem; cursor: pointer; } .ht-fuss { margin-top: 1.4rem; text-align: center; } /* ------------------------------------------------------------------ * * Handy-Modus * Kein Menü, keine Seitenleiste – die untere Leiste ist die gesamte * Navigation. Alles auf Daumenbedienung ausgelegt. * ------------------------------------------------------------------ */ .hy-seite { max-width: 30rem; margin: 0 auto; padding: .4rem 0 2rem; } .hy-titel { font-size: 1.3rem; margin: .2rem 0 1.1rem; } .hy-h2 { font-size: 1rem; margin: 1.6rem 0 .6rem; color: var(--text-leise); } .hy-kacheln { display: grid; gap: .7rem; } .hy-kachel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem; padding: 1.4rem 1rem; min-height: 6.5rem; background: var(--akzent-bg); color: var(--akzent); border: 1px solid transparent; border-radius: var(--radius); text-decoration: none; -webkit-tap-highlight-color: transparent; } .hy-kachel:active { border-color: var(--akzent); } .hy-icon { width: 2rem; height: 2rem; } .hy-kachel-titel { font-size: 1.1rem; font-weight: 600; } .hy-kachel-text { font-size: .85rem; opacity: .85; line-height: 1.35; } .hy-n2 .hy-kachel { min-height: 8.5rem; padding: 2rem 1rem; } .hy-fuss { margin-top: 1.6rem; text-align: center; font-size: .9rem; } .hy-knopf, .hy-knopf-gross { display: block; width: 100%; min-height: 3.2rem; padding: 1rem; margin-bottom: .6rem; text-align: center; text-decoration: none; border-radius: var(--radius); font-size: 1.05rem; background: var(--akzent); color: #fff; font-weight: 600; } .hy-knopf-gross { background: var(--akzent-bg); color: var(--akzent); } .hy-zeile { display: flex; justify-content: space-between; align-items: center; padding: .9rem .2rem; border-bottom: 1px solid var(--rahmen); text-decoration: none; color: var(--text); font-size: 1rem; } .hy-zeile-datum { color: var(--text-leise); font-size: .9rem; } .hy-gesperrt { text-align: center; padding-top: 2.5rem; } .hy-gesperrt-icon { width: 3.5rem; height: 3.5rem; color: var(--text-leise); margin-bottom: 1rem; } .hy-gesperrt h1 { font-size: 1.25rem; } .hy-ziel { font-size: .8rem; color: var(--text-leise); margin: .8rem 0 1.4rem; } /* Untere Leiste im Handy-Modus: gleichmässig verteilt, ohne Symbole. */ .hy-tabbar a { font-size: .8rem; padding: .7rem .2rem; } .hy-tabbar a span { display: block; } /* Im Handy-Modus ist die Leiste auch auf breiten Bildschirmen sichtbar – man kann den Modus am Computer prüfen. */ @media (min-width: 901px) { body:has(.hy-tabbar) .kio-tabbar { display: flex; } } /* ------------------------------------------------------------------ * * Handy-Modus * Feste Kopfzeile mit Rückweg, Inhalt dazwischen, Leiste unten. * Alles auf Daumenbedienung: 3 rem Tippflächen, 16px Schrift in Feldern. * ------------------------------------------------------------------ */ .hy-app { max-width: 30rem; margin: 0 auto; } /* Kopfzeile: links zurück, Mitte Titel, rechts Konto. */ .hy-kopf { display: grid; grid-template-columns: 3rem 1fr 3rem; align-items: center; margin: -.6rem -.9rem 1rem; padding: .55rem .4rem; background: var(--flaeche-2); border-bottom: 1px solid var(--rahmen); } .hy-kopf-titel { text-align: center; font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hy-kopf-zurueck, .hy-kopf-konto { display: flex; align-items: center; justify-content: center; min-height: 2.6rem; color: var(--text-leise); text-decoration: none; } .hy-kopf-zurueck:active, .hy-kopf-konto:active { color: var(--akzent); } .hy-svg { width: 1.5rem; height: 1.5rem; } .hy-inhalt { padding-bottom: 1.5rem; } /* Startseite: erste Aufgabe hervorgehoben, Rest ruhig. */ .hy-eintrag { display: flex; align-items: center; gap: .9rem; padding: 1.1rem .9rem; margin-bottom: .6rem; border-radius: var(--radius); text-decoration: none; background: var(--flaeche-2); border: 1px solid var(--rahmen); color: var(--text); -webkit-tap-highlight-color: transparent; } .hy-eintrag-haupt { background: var(--akzent-bg); border-color: transparent; color: var(--akzent); } .hy-eintrag:active { border-color: var(--akzent); } .hy-eintrag-svg { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; } .hy-eintrag-text strong { display: block; font-size: 1.05rem; } .hy-eintrag-text small { display: block; font-size: .82rem; opacity: .8; line-height: 1.3; } /* Knöpfe: volle Breite, 3,2 rem hoch. */ .hy-knopf { display: block; width: 100%; min-height: 3.2rem; padding: 1rem; margin-bottom: .6rem; text-align: center; text-decoration: none; border: 1px solid var(--rahmen); border-radius: var(--radius); font-size: 1.05rem; background: var(--flaeche); color: var(--text); cursor: pointer; } .hy-knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; } .hy-knopf-gefahr { background: var(--gefahr); border-color: var(--gefahr); color: #fff; font-weight: 600; } .hy-knopf-ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; } .hy-knopf-still { color: var(--text-leise); } .hy-knopf-paar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .hy-knopf-paar .hy-knopf { margin-bottom: 0; } /* Eingaben: 16px verhindert das Hineinzoomen auf iOS. */ .hy-feld { font-size: 16px !important; min-height: 3rem; width: 100%; } .hy-gross-feld { font-size: 1.6rem !important; min-height: 3.6rem; text-align: center; } .hy-label { display: block; font-size: .82rem; color: var(--text-leise); margin: 0 0 .25rem; } /* Bestätigung. */ .hy-erfolg { background: var(--ok-bg); border-radius: var(--radius); padding: 1.6rem 1rem; text-align: center; margin-bottom: 1rem; color: var(--ok); } .hy-erfolg-svg { width: 2.6rem; height: 2.6rem; stroke-width: 2.5; } .hy-erfolg strong { display: block; font-size: 1.15rem; margin-top: .4rem; } .hy-erfolg span { display: block; font-size: .9rem; opacity: .85; } .hy-mitte { text-align: center; padding-top: 2rem; } .hy-gross-svg { width: 3rem; height: 3rem; color: var(--text-leise); } .hy-mitte-text { margin: 1rem 0; } .hy-ziel { font-size: .8rem; color: var(--text-leise); margin-bottom: 1.4rem; } /* Karte mit Angaben zum gescannten Gegenstand. */ .hy-karte { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .8rem; margin-bottom: .8rem; } .hy-karte-klein { font-size: .78rem; color: var(--text-leise); } .hy-karte-gross { font-size: 1.1rem; font-weight: 600; } /* Untere Leiste. */ .hy-tabbar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .72rem; padding: .55rem .2rem; } .hy-tab-svg { width: 1.4rem; height: 1.4rem; } /* Im Handy-Modus bleibt die Leiste auch auf breiten Bildschirmen sichtbar, damit man den Modus am Computer prüfen kann. */ @media (min-width: 901px) { body:has(.hy-tabbar) .kio-tabbar { display: flex; } body:has(.hy-tabbar) .inhalt { padding-bottom: 5rem; } } /* Auftragssuche im Handy-Modus */ .hy-suche { margin-bottom: 1rem; } .hy-suche .hy-feld { margin-bottom: .6rem; } .hy-treffer { display: block; padding: .9rem; margin-bottom: .5rem; text-decoration: none; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); color: var(--text); } .hy-treffer-nr { display: block; font-weight: 600; font-size: 1.05rem; } .hy-treffer-kunde { display: block; font-size: .9rem; } .hy-treffer-bez, .hy-treffer-status { display: inline-block; font-size: .8rem; color: var(--text-leise); margin-right: .5rem; } /* Foto-Seite im Handy-Modus */ .hy-zaehler { font-size: .9rem; color: var(--text-leise); margin: .2rem 0 .8rem; } .hy-treffer-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .hy-treffer-status { font-size: .78rem; color: var(--akzent); background: var(--akzent-bg); padding: .1rem .45rem; border-radius: 999px; white-space: nowrap; } /* Reklamationsfotos im Handy-Modus */ .rf-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; } .rf-bild { position: relative; } .rf-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rahmen); display: block; } .rf-bild form { position: absolute; top: .25rem; right: .25rem; } .rf-bild form button { border: 0; border-radius: 50%; width: 1.9rem; height: 1.9rem; background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; cursor: pointer; } /* Startseite: Ausstiege unten, sichtbar statt versteckt hinter einem Symbol */ .hy-fuss-aktionen { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rahmen); } .hy-fuss-aktionen form { margin: 0; } .hy-fuss-aktionen .hy-knopf { margin-bottom: .5rem; } /* Reklamation: Hinweis auf bereits Erfasstes */ .rk-warn { display: inline-block; margin-top: .25rem; font-size: .78rem; font-weight: 600; color: var(--warn); background: var(--warn-bg); padding: .1rem .45rem; border-radius: 999px; } .rk-bestehend { background: var(--warn-bg); border-radius: var(--radius); padding: .8rem; margin-bottom: 1rem; } .rk-bestehend strong { display: block; margin-bottom: .5rem; color: var(--warn); } .rk-bestehend small { display: block; margin-top: .5rem; font-size: .8rem; color: var(--text-leise); } .rk-b-zeile { display: block; padding: .5rem 0; border-top: 1px solid rgba(0,0,0,.08); text-decoration: none; color: var(--text); } .rk-b-meta { display: block; font-size: .8rem; color: var(--text-leise); } /* Reklamationsfotos am Computer */ .rk-fotos-karte { margin-top: 1.2rem; } .rk-upload { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; } .rk-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-top: 1rem; } .rk-g-bild { margin: 0; } .rk-g-bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--rahmen); display: block; } .rk-g-bild figcaption { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-top: .3rem; font-size: .8rem; color: var(--text-leise); } .rk-g-bild figcaption form { margin: 0; } /* Hallenzugang */ .ha-seite { padding-top: 1rem; } .ha-titel { font-size: 1.3rem; margin: .5rem 0 1.2rem; } .ha-hinweis { font-size: .85rem; color: var(--text-leise); margin-top: 1rem; } .ha-kachel { display: flex; align-items: center; gap: .5rem; padding: .45rem 0; } .ha-warn { color: var(--warn); font-size: .8rem; } /* Protokoll */ .au-filter { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; } .au-filter .feld { margin: 0; } .au-filter-aktion { display: flex; gap: .5rem; } .au-tabelle { font-size: .9rem; } .au-zeit { white-space: nowrap; color: var(--text-leise); } .au-art { font-family: monospace; font-size: .82rem; background: var(--flaeche-2); padding: .1rem .4rem; border-radius: var(--radius-s); } .au-detail { color: var(--text-leise); } .au-putz { margin-top: 1.5rem; display: flex; gap: 1rem; align-items: flex-end; } /* Passwort-Seiten */ .pw-seite { max-width: 26rem; margin: 2rem auto; } .pw-fuss { margin-top: 1rem; text-align: center; font-size: .9rem; } /* Kontoseite */ .ko-karte { max-width: 34rem; margin-bottom: 1.2rem; } .ko-karte h2 { font-size: 1.05rem; margin: 0 0 .8rem; } a.benutzer-chip { text-decoration: none; } /* Systemübersicht */ .sy-gruppe { font-size: 1rem; color: var(--text-leise); margin: 1.6rem 0 .7rem; } .sy-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; } .sy-kachel { display: block; padding: .9rem; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche-2); text-decoration: none; color: var(--text); } .sy-kachel:hover { border-color: var(--akzent); } .sy-kachel strong { display: block; } .sy-kachel small { display: block; font-size: .82rem; color: var(--text-leise); margin: .2rem 0 .4rem; } .sy-kachel code { font-size: .74rem; color: var(--text-leise); } .sy-demo { max-width: 40rem; } .sy-demo-an { border-left: 4px solid var(--warn); } .sy-demo-liste { margin: .5rem 0 1rem 1.2rem; font-size: .9rem; } /* Mitarbeiterliste: Fähigkeiten unter dem Namen, damit die Tabelle nicht seitlich scrollen muss. */ .pm-namenszelle { min-width: 13rem; } .pm-namenszelle input { width: 100%; } .pm-kann { margin-top: .25rem; line-height: 1.7; } .pm-kann-marke { display: inline-block; font-size: .72rem; padding: .05rem .4rem; margin: 0 .2rem .15rem 0; background: var(--akzent-bg); color: var(--akzent); border-radius: 999px; text-decoration: none; } .pm-kann-ab { background: var(--gefahr-bg, #fde8e8); color: var(--gefahr); font-weight: 600; } .pm-kann-plus { font-size: .8rem; text-decoration: none; padding: 0 .25rem; } /* Die Tabelle bleibt bei Bedarf scrollbar, aber sie ist jetzt schmaler. */ .tabelle-scroll { overflow-x: auto; } /* Handbuch */ .hi-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; } .hi-kachel { display: block; padding: 1rem; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche-2); text-decoration: none; color: var(--text); } .hi-kachel:hover { border-color: var(--akzent); } .hi-kachel strong { display: block; margin-bottom: .3rem; } .hi-kachel small { color: var(--text-leise); } .hi-text { max-width: 52rem; line-height: 1.6; } .hi-text h2 { margin-top: 2rem; font-size: 1.15rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rahmen); } .hi-text ul { margin-left: 1.2rem; } .hi-text li { margin-bottom: .4rem; } .hi-bild { margin: 1rem 0; padding: .8rem; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); overflow-x: auto; } .hi-bild img { display: block; max-width: 100%; height: auto; } .ok-tf { color: var(--ok); font-weight: 600; } .warn-tf { color: var(--warn); font-weight: 600; } /* =========================================================================== Seitenleiste: Bereiche oben, Unterpunkte darunter Grund: Acht Bereiche in der Kopfzeile passten auf Laptop-Bildschirmen nicht und erzwangen seitliches Scrollen. =========================================================================== */ .sb-bereiche { display: flex; flex-direction: column; padding: .5rem 0; border-bottom: 1px solid var(--sb-rand); margin-bottom: .5rem; } .sb-bereiche .bl-punkt { display: block; padding: .5rem .9rem; color: var(--sb-leise); text-decoration: none; font-size: .88rem; border-radius: var(--radius-s); } .sb-bereiche .bl-punkt:hover { background: var(--sb-hover); color: var(--sb-text); } .sb-bereiche .bl-aktiv { background: var(--sb-aktiv-bg); color: var(--sb-aktiv-tf); font-weight: 600; } /* Kopfzeile entlastet: Suche darf nun den freien Platz nutzen. */ .topbar-suche { flex: 1 1 auto; max-width: 32rem; } /* Konto: Darstellungseinstellungen */ .ko-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--rahmen); } .ko-zeile:first-of-type { border-top: 0; } .sy-werkzeug { max-width: 40rem; margin-bottom: 1.2rem; } /* =========================================================================== Seitenleiste als aufklappbare Bereichsgruppen Nur der aktuelle Bereich ist geöffnet – die Leiste bleibt gleich lang, unabhängig davon, wie viele Module aktiv sind. =========================================================================== */ .sb-gruppen { padding: .4rem 0; } .sb-gruppe { border-bottom: 1px solid var(--sb-rand); } .sb-gruppe-titel { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; cursor: pointer; list-style: none; color: var(--sb-text); font-size: .9rem; font-weight: 500; user-select: none; } .sb-gruppe-titel::-webkit-details-marker { display: none; } .sb-gruppe-titel::after { content: '›'; transform: rotate(90deg); font-size: 1rem; color: var(--sb-leise); transition: transform .15s; } .sb-gruppe[open] > .sb-gruppe-titel::after { transform: rotate(-90deg); } .sb-gruppe-titel:hover { background: var(--sb-hover); } .sb-gruppe-auf > .sb-gruppe-titel { color: var(--sb-aktiv-tf); font-weight: 600; } .sb-gruppe-inhalt { padding-bottom: .4rem; } .sb-gruppe-inhalt .sb-link { padding-left: 1.6rem; font-size: .86rem; } .sb-link-start { color: var(--sb-leise); font-style: italic; } /* =========================================================================== Gestaltung: Symbole, Kacheln, Karten, Tabellen Masse nach Hausstandard: 8px Radius, 16px Abstand, dezenter Schatten. Farben kommen aus den Design-Tokens – hier stehen keine festen Werte. =========================================================================== */ /* --- Symbole in der Seitenleiste --------------------------------------- */ .sb-ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; } .sb-gruppe-titel { gap: .6rem; } .sb-gruppe-name { flex: 1 1 auto; } .sb-gruppe-auf > .sb-gruppe-titel .sb-ico { opacity: 1; } /* --- Kacheln auf Übersichtsseiten -------------------------------------- */ .sy-kachel, .hi-kachel { display: flex; flex-direction: column; gap: .25rem; padding: var(--abstand, 16px); border: 1px solid var(--rahmen); border-radius: var(--radius, 8px); background: var(--flaeche); box-shadow: var(--schatten, 0 1px 2px rgba(20,30,45,.05)); transition: border-color .12s, box-shadow .12s, transform .12s; } .sy-kachel:hover, .hi-kachel:hover { border-color: var(--akzent); box-shadow: var(--schatten-l, 0 6px 20px rgba(20,30,45,.10)); transform: translateY(-1px); } .sy-kachel strong, .hi-kachel strong { font-size: .98rem; letter-spacing: -.01em; } .sy-kachel code { margin-top: .35rem; opacity: .6; font-size: .72rem; } /* --- Karten ------------------------------------------------------------- */ .karte { border-radius: var(--radius, 8px); border: 1px solid var(--rahmen); background: var(--flaeche); box-shadow: var(--schatten, 0 1px 2px rgba(20,30,45,.05)); padding: var(--abstand, 16px); } .karte h2 { margin-top: 0; font-size: 1.02rem; letter-spacing: -.01em; } /* --- Tabellen ruhiger ---------------------------------------------------- */ .tabelle { border-radius: var(--radius, 8px); overflow: hidden; border: 1px solid var(--rahmen); border-collapse: separate; border-spacing: 0; } .tabelle thead th { background: var(--flaeche-2); font-weight: 600; font-size: .82rem; letter-spacing: .01em; text-transform: none; border-bottom: 1px solid var(--rahmen); } .tabelle tbody tr + tr td { border-top: 1px solid var(--rahmen); } .tabelle tbody tr:hover td { background: var(--flaeche-2); } .tabelle td, .tabelle th { padding: .55rem .7rem; } /* --- Seitenkopf --------------------------------------------------------- */ .seiten-kopf h1 { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: .2rem; } .seiten-kopf .lead { color: var(--text-leise); font-size: .92rem; margin-top: 0; } /* --- Knöpfe ------------------------------------------------------------- */ .btn { border-radius: var(--radius-s, 5px); } /* Untergruppen in der Seitenleiste (dritte Ebene) */ .sb-untertitel { display: block; padding: .5rem .9rem .15rem 1.6rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sb-leise); opacity: .75; } .sb-link-tief { padding-left: 2.2rem; } /* Hauptrubriken als Symbole in der Kopfzeile */ .bereichs-symbole { display: flex; align-items: center; gap: 2px; } .bl-sym { position: relative; width: 36px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-s, 5px); color: var(--text-leise); text-decoration: none; } .bl-sym:hover { background: var(--flaeche-2); color: var(--text); } .bl-sym-ist { background: var(--akzent-bg); color: var(--akzent); } .bl-ico { width: 19px; height: 19px; } .bl-ico-text { font-size: .95rem; font-weight: 600; } .bl-sym::after { content: attr(data-name); position: absolute; top: 40px; left: 50%; transform: translateX(-50%); background: var(--flaeche); color: var(--text); border: 1px solid var(--rahmen); border-radius: var(--radius-s, 5px); padding: .25rem .55rem; font-size: .78rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 60; box-shadow: var(--schatten-l, 0 6px 20px rgba(20,30,45,.10)); } .bl-sym:hover::after, .bl-sym:focus-visible::after { opacity: 1; } @media (max-width: 900px) { .bereichs-symbole { display: none; } } /* Rubriktitel in der Seitenleiste ist ein Link (führt zur Übersicht) */ a.sb-gruppe-name { color: inherit; text-decoration: none; flex: 1 1 auto; } a.sb-gruppe-name:hover { text-decoration: underline; } /* Menüfarben folgen dem Design-Editor */ :root { --sb-bg: var(--flaeche); --sb-text: var(--text); --sb-leise: var(--text-leise); --sb-rand: var(--rahmen); --sb-hover: var(--flaeche-2); --sb-aktiv-bg: var(--akzent-bg); --sb-aktiv-tf: var(--akzent); } /* Punkt, dessen Unterpunkte rechts stehen */ .sb-link-mehr::after { content: ' ›'; color: var(--sb-leise); font-size: .95rem; } /* Untergruppen ohne eigenen Pfad: zuklappbar */ .sb-unter > .sb-untertitel { cursor: pointer; list-style: none; } .sb-unter > .sb-untertitel::-webkit-details-marker { display: none; } .sb-unter > .sb-untertitel::after { content: ' ›'; opacity: .6; } .sb-unter[open] > .sb-untertitel::after { content: ' ⌄'; } .sb-unter > .sb-untertitel:hover { background: var(--sb-hover); } /* Modulteile im Personalbereich */ .pz-teile { display: grid; gap: .6rem; margin-bottom: 1.2rem; } .pz-teil { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem; border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche-2); } .pz-teil strong { display: block; font-size: .92rem; } .pz-teil small { display: block; color: var(--text-leise); font-size: .82rem; margin-top: .15rem; } /* Abwesenheiten */ .ab-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; } .ab-feld-breit { grid-column: 1 / -1; } .ab-filter { display: flex; gap: .8rem; align-items: flex-end; margin: 1.2rem 0; } .ab-marke { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; } .ab-warn { background: var(--warn-bg); color: var(--warn); } .ab-gefahr { background: var(--gefahr-bg); color: var(--gefahr); } .ab-info { background: var(--info-bg); color: var(--info-tf); } /* =========================================================================== Handy: Bedienbarkeit mit Handschuhen Hausregel: mindestens 1rem Schrift (darunter zoomt iOS beim Antippen hinein) und mindestens 56 Pixel Höhe. VORSICHT bei der Reichweite: Eine Regel mit width:100% auf ALLE Felder sprengt Formulare, in denen Felder nebeneinander oder in Tabellen stehen. Deshalb hier nur Schriftgrösse und Höhe – die Breite bleibt, wie das jeweilige Formular sie vorsieht. =========================================================================== */ .hy-app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .hy-app select, .hy-app textarea { font-size: 16px !important; /* darunter zoomt iOS hinein */ min-height: 56px; } .hy-app textarea { min-height: 5rem; } /* Ankreuzfelder bleiben klein, brauchen aber eine grosse Trefferfläche. */ .hy-app input[type="checkbox"], .hy-app input[type="radio"] { min-width: 26px; min-height: 26px; } /* Knöpfe: ein 40-Pixel-Knopf trifft man mit Handschuh nicht. */ .hy-knopf, .hy-app button[type="submit"] { min-height: 56px; font-size: 1rem; } /* Nur Felder, die für sich allein auf einer Zeile stehen, werden breit. */ .hy-feld { width: 100%; box-sizing: border-box; padding: .7rem .8rem; } /* Messwerte gross und mittig – man liest sie im Vorbeigehen. */ .hy-messwert { font-size: 1.4rem !important; min-height: 60px; text-align: center; font-variant-numeric: tabular-nums; } /* Messprotokoll am Handy: Kopfdaten weggeklappt */ .lab-kopf-handy { border: 1px solid var(--rahmen); border-radius: var(--radius); margin-bottom: 1rem; background: var(--flaeche-2); } .lab-kopf-handy > summary { padding: .9rem; cursor: pointer; font-size: .95rem; list-style: none; min-height: 56px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; } .lab-kopf-handy > summary::-webkit-details-marker { display: none; } .lab-kopf-handy > summary::after { content: '›'; color: var(--text-leise); font-size: 1.2rem; } .lab-kopf-handy[open] > summary::after { content: '⌄'; } .lab-kopf-handy .lab-kopf { padding: 0 .9rem .9rem; } /* =========================================================================== Kacheln auf den Übersichtsseiten Symbol oben, Titel, Beschreibung, Kennzahl unten. Die Reihenfolge folgt dem Blick: erst wo bin ich, dann was ist hier, dann wie viel. =========================================================================== */ .kachel { display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.2rem; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten, 0 1px 2px rgba(20,30,45,.05)); text-decoration: none; color: var(--text); transition: border-color .12s, box-shadow .12s, transform .12s; } .kachel.ist-link:hover { border-color: var(--akzent); box-shadow: var(--schatten-l, 0 6px 20px rgba(20,30,45,.10)); transform: translateY(-1px); } .kachel-ico { width: 22px; height: 22px; color: var(--text-leise); margin-bottom: .45rem; } .kachel.ist-link:hover .kachel-ico { color: var(--akzent); } .kachel-titel { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; } .kachel-text { font-size: .85rem; color: var(--text-leise); line-height: 1.5; } .kachel-zahl { font-size: 1.8rem; font-weight: 600; line-height: 1.15; margin-top: .6rem; font-variant-numeric: tabular-nums; } .kachel-einheit { font-size: .78rem; color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em; } /* =========================================================================== Schlüssel-Wert-Tabelle (.kv-tabelle) --------------------------------------------------------------------------- 30 Verwendungen in Auftrag, Lager und weiteren Modulen – bisher nur in drei Ansichten inline gestaltet, überall sonst ungestaltet. Die drei Fassungen waren fast gleich; hier die zusammengeführte. Unterschiede, die dort bewusst waren, bleiben als Zusatzklasse: .kv-breit Beschriftungsspalte 11rem statt 9rem .kv-mono Werte in Festbreitenschrift (Nummern, Codes) =========================================================================== */ .kv-tabelle { width: 100%; border-collapse: collapse; } .kv-tabelle th { text-align: left; width: 9rem; vertical-align: top; color: var(--text-leise); font-weight: 600; padding: .3rem .6rem .3rem 0; } .kv-tabelle td { padding: .3rem 0; vertical-align: top; } .kv-tabelle tr + tr th, .kv-tabelle tr + tr td { border-top: 1px solid var(--rahmen); } .kv-breit th { width: 11rem; } .kv-mono td { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; } /* =========================================================================== Knopf, der nur ein Symbol trägt (.btn-ico) --------------------------------------------------------------------------- Neunmal verwendet in Lager, Dateimanager und Auftragsverwaltung – definiert war er nur in einer Ansicht. In den übrigen sah derselbe Knopf anders aus. Er ist schmaler als ein Textknopf, weil kein Text darin steht. Die Trefferfläche bleibt trotzdem gross genug für die Maus; im Handy-Modus greifen ohnehin die 56 Pixel. =========================================================================== */ .btn-ico { padding: .35rem .45rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; } .btn-ico .ico, .btn-ico svg { margin: 0; } /* =========================================================================== Kleiner Nebentext (.mini) --------------------------------------------------------------------------- 36 Verwendungen, war in vier Ansichten leicht unterschiedlich definiert (.78rem und .8rem). Hier zusammengeführt. WICHTIG: Die Inline-Fassungen nutzten var(--leise) – dieses Token gibt es nicht. Es heisst --text-leise. An diesen Stellen kam deshalb gar keine Farbe aus dem Design-Editor an. Hier steht der richtige Name. =========================================================================== */ .mini { font-size: .79rem; color: var(--text-leise); } /* =========================================================================== Altnamen von Design-Tokens --------------------------------------------------------------------------- In 34 Ansichten stehen Kurznamen, die es nie gab: var(--leise) 37x richtig: --text-leise var(--akz) 14x richtig: --akzent var(--akztf) 6x richtig: --akzent-tf var(--fl) 7x richtig: --flaeche An diesen Stellen kam bisher KEINE Farbe aus dem Design-Editor an – der Browser nahm den Notwert oder erbte die Elternfarbe. Diese Zeilen machen die Altnamen zu Verweisen auf die echten Tokens. Damit folgen alle 64 Stellen sofort dem Design-Editor, ohne dass 34 Ansichten angefasst werden müssen. Sie können entfallen, sobald die Ansichten die richtigen Namen verwenden. =========================================================================== */ :root { --leise: var(--text-leise); --akz: var(--akzent); --akztf: var(--akzent-tf); --fl: var(--flaeche); --fl2: var(--flaeche-2); --akzbg: var(--akzent-bg); } /* =========================================================================== Überschreibfeld (.ovin) --------------------------------------------------------------------------- In den Kalkulationswerkzeugen: Ein Feld, in dem man einen berechneten Vorschlag von Hand überschreiben kann. Der gestrichelte Rahmen zeigt, dass hier ein Wert eingetragen werden DARF, aber nicht muss. 30 Verwendungen, vorher in vier Ansichten mit zwei Breiten definiert (92px und 120px). Die schmalere ist die Vorgabe; .ovin-breit für die andere. =========================================================================== */ .ovin { width: 92px; padding: 4px 6px; border: 1px dashed var(--akzent); border-radius: var(--radius-s, 6px); background: transparent; color: var(--text); font-size: .85rem; text-align: right; } .ovin:focus { border-style: solid; outline: none; } .ovin::placeholder { color: var(--text-leise); opacity: .7; } .ovin-breit { width: 120px; } /* =========================================================================== Ergebniszeile (.erg) --------------------------------------------------------------------------- In den Kalkulationswerkzeugen: Beschriftung links, Wert rechts. .erg.gross hebt das Hauptergebnis hervor – farbiger Hintergrund und ein Balken an der linken Kante. 22 Verwendungen, vorher in vier Ansichten definiert. Zwei davon nutzten die Altnamen --akzbg und --akz; hier stehen die richtigen. =========================================================================== */ .erg { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; margin-top: 8px; border: 1px solid var(--rahmen); border-radius: var(--radius, 8px); background: var(--flaeche-2); } .erg .c2 { font-size: .78rem; color: var(--text-leise); font-weight: 400; margin-left: 6px; } .erg.gross { background: var(--akzent-bg); border-left: 4px solid var(--akzent); } .erg.gross strong { color: var(--akzent); font-size: 1.3rem; } /* =========================================================================== Kleinere wiederkehrende Muster --------------------------------------------------------------------------- Alle bisher nur in ein bis zwei Ansichten definiert, anderswo ungestaltet. =========================================================================== */ /* Feldraster: passt sich der Breite an, mindestens 220px je Spalte. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px 16px; } /* Kurze Erläuterung über oder unter einem Abschnitt. */ .flow { font-size: .82rem; color: var(--text-leise); margin: .2rem 0 .6rem; } /* Kennzahlenreihe: schmalere Spalten als .grid, weil nur Zahlen darin stehen. Es gab 120px und 150px – 140px als Mitte, damit weder Zahlen umbrechen noch Lücken entstehen. */ .kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; } /* Linksbündige Tabellenzelle, ohne Umbruch – für Beschriftungsspalten. */ .links { text-align: left; white-space: nowrap; } /* Reiterinhalt: nur der aktive Bereich ist sichtbar. ACHTUNG: Ohne diese Regel sind ALLE Reiter gleichzeitig sichtbar – in den Kalkulationswerkzeugen sah man dann vier Abschnitte übereinander. */ .panel { display: none; } .panel.akt { display: block; } /* =========================================================================== Kennzahl-Box (.box) --------------------------------------------------------------------------- In den Kalkulationswerkzeugen: eine kleine Fläche in Akzentfarbe, in der eine Beschriftung () über einem Wert () steht. 86 der 87 Verwendungen sind diese Art – alle in den vier Kalkulationsdateien. Die 87. war eine Karte mit Rahmen in tag_pin.php; sie heisst jetzt .box-karte, damit zwei verschiedene Dinge nicht denselben Namen tragen. =========================================================================== */ .box { background: var(--akzent-bg); border-radius: var(--radius, 8px); padding: 8px 11px; } .box small { display: block; color: var(--akzent); font-size: .72rem; } .box b { font-size: 1.05rem; } /* Karte mit Rahmen – die frühere zweite Bedeutung von .box. */ .box-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius, 8px); padding: 1rem; } /* =========================================================================== Sortierbare Spaltenköpfe --------------------------------------------------------------------------- Jede Tabelle mit .tabelle wird von app.js sortierbar gemacht. Der Pfeil erscheint erst beim Überfahren, damit die Kopfzeile ruhig bleibt – und bleibt sichtbar, sobald nach dieser Spalte sortiert ist. =========================================================================== */ th.sortierbar { cursor: pointer; user-select: none; position: relative; padding-right: 1.3rem; } th.sortierbar:hover { background: var(--flaeche-2); color: var(--text); } th.sortierbar::after { content: '\2195'; /* Doppelpfeil */ position: absolute; right: .45rem; opacity: 0; font-size: .85em; transition: opacity .12s; } th.sortierbar:hover::after { opacity: .45; } th[aria-sort]::after { opacity: 1; } th[aria-sort="ascending"]::after { content: '\2191'; } th[aria-sort="descending"]::after { content: '\2193'; } th[aria-sort] { color: var(--akzent); } /* Hinweis in einer leeren Tabelle – ruhig, aber deutlich genug, dass klar ist: hier fehlt nichts, es gibt einfach keine Daten. */ .tabelle-leer { text-align: center; color: var(--text-leise); font-size: .9rem; padding: 1.6rem 1rem !important; font-style: italic; } /* Knopf, während gespeichert wird: gedämpft, mit kleinem Drehkreis davor. Der Drehkreis fällt weg, wenn der Benutzer Bewegungen abgestellt hat. */ .btn-wartet { opacity: .75; cursor: progress; position: relative; padding-left: 2.1rem !important; } .btn-wartet::before { content: ''; position: absolute; left: .9rem; top: 50%; width: 13px; height: 13px; margin-top: -7px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-dreht .7s linear infinite; } @keyframes btn-dreht { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn-wartet::before { animation: none; border-right-color: currentColor; opacity: .5; } } /* =========================================================================== Kachelraster einheitlich --------------------------------------------------------------------------- Die Übersichtsseiten hatten unterschiedlich breite Kacheln, weil das Raster je Seite anders gesetzt war. Jetzt gilt überall dieselbe Mindestbreite – die von der Lagerverwaltung, die dir am besten gefiel. Gleiche Höhe je Reihe: Kacheln mit kurzem Text bleiben so hoch wie die mit langem. Ohne das wirkt eine Reihe unruhig. =========================================================================== */ .inhalt-boxen, .tool-grid, .labor-grid, .lager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--abstand); margin-top: 1rem; align-items: stretch; } .inhalt-boxen > .kachel { height: 100%; } /* =========================================================================== Produktionshallen =========================================================================== */ .ph-tafel { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-top: 1rem; align-items: start; } .ph-halle { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .6rem; min-height: 12rem; transition: background .12s, border-color .12s; } .ph-halle.ph-ueber { background: var(--akzent-bg); border-color: var(--akzent); } .ph-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: .1rem .3rem .55rem; } .ph-kopf strong { font-size: .92rem; } .ph-summe { font-size: .78rem; color: var(--text-leise); } .ph-liste { display: grid; gap: .4rem; min-height: 6rem; } .ph-leer { text-align: center; color: var(--text-leise); font-size: .82rem; padding: 1.4rem .5rem; margin: 0; font-style: italic; } /* KEIN linker Farbbalken mehr: Oben steht der RAL-Ton, links stand die Ampel – zwei Farbmarkierungen an einer Kachel sehen aus wie zweimal dieselbe Angabe. Die Ampel ist jetzt ein Punkt vor dem Titel. */ .ph-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .5rem .65rem; cursor: grab; user-select: none; } .ph-karte:active { cursor: grabbing; } .ph-karte.ph-zieht { opacity: .45; } .ph-karte.ph-fehler { border-color: var(--gefahr); background: var(--gefahr-bg); } /* Ampel als PUNKT vor dem Titel: wie dringend ist es? rot = spätester Start vorbei · gelb = diese Woche · grün = Luft Der Punkt ist rund, die Veredelungsmarken sind eckig und die Mitarbeiterkürzel oval – drei Sorten Zeichen auf einer Kachel müssen sich auf einen Blick unterscheiden lassen. */ .ph-ampel { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; flex: none; vertical-align: baseline; background: var(--rahmen); } .ph-a-rot .ph-ampel { background: var(--gefahr); } .ph-a-gelb .ph-ampel { background: var(--warn); } .ph-a-gruen .ph-ampel { background: var(--ok); } .ph-a-ohne .ph-ampel { background: var(--rahmen); } .ph-a-fertig .ph-ampel { background: var(--text-leise); } /* Ohne Termin gar kein Punkt – ein grauer Kreis, der nichts bedeutet, ist nur Rauschen. */ .ph-a-ohne .ph-ampel { display: none; } .ph-liefer { font-size: .76rem; margin-top: .3rem; } .ph-liefer strong { font-variant-numeric: tabular-nums; } .ph-start { display: block; color: var(--text-leise); } .ph-a-rot .ph-start { color: var(--gefahr); font-weight: 600; } .ph-a-gelb .ph-start { color: var(--warn); } .ph-titel { font-size: .85rem; font-weight: 600; } .ph-kunde { font-size: .78rem; color: var(--text-leise); } .ph-zeile { font-size: .76rem; color: var(--text-leise); margin-top: .15rem; } .ph-zeit { font-size: .76rem; color: var(--akzent); margin-top: .25rem; } .ph-ist { color: var(--warn); } @media (max-width: 1000px) { .ph-tafel { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .ph-tafel { grid-template-columns: 1fr; } } /* Auslastung je Anlage */ .ph-auslastung { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; margin: 1rem 0; } .ph-anlage { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: .6rem .75rem; } .ph-anlage-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: .84rem; margin-bottom: .4rem; } .ph-anlage-kopf span { color: var(--text-leise); font-size: .78rem; } .ph-balken { height: 5px; background: var(--flaeche-2); border-radius: 3px; overflow: hidden; } .ph-balken-fuell { height: 100%; background: var(--ok); transition: width .2s; } .ph-eng .ph-balken-fuell { background: var(--warn); } .ph-voll .ph-balken-fuell { background: var(--gefahr); } .ph-anlage-fuss { display: flex; justify-content: space-between; font-size: .76rem; margin-top: .35rem; color: var(--text-leise); } .ph-frei { color: var(--ok); } .ph-ueberbucht { color: var(--gefahr); font-weight: 600; } /* Vorausschau */ .ph-vorschau { margin: 1rem 0; } .ph-vorschau > summary { cursor: pointer; font-size: .88rem; padding: .5rem 0; color: var(--text-leise); } .ph-vorschau > summary:hover { color: var(--text); } .ph-zelle { text-align: center; font-variant-numeric: tabular-nums; font-size: .82rem; } .ph-z-frei { color: var(--ok); } .ph-z-eng { color: var(--warn); font-weight: 600; } .ph-z-voll { color: var(--gefahr); font-weight: 600; } .ph-z-null { color: var(--text-leise); } /* Anlegen-Fenster über der Tafel */ .ph-neu { margin: 1rem 0; } .ph-neu > summary { cursor: pointer; font-size: .9rem; padding: .55rem 0; color: var(--akzent); } .ph-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; margin-bottom: .8rem; } .ph-f-breit { grid-column: 1 / -1; } .ph-loeschen { margin-top: .6rem; } a.ph-titel { display: block; color: inherit; text-decoration: none; } a.ph-titel:hover { text-decoration: underline; } .ph-werkzeuge { display: flex; gap: .5rem; margin: .8rem 0 0; } .ph-neue-halle { margin-top: 1.2rem; } /* Karte ohne Bezeichnung: erkennbar, aber nicht auffällig */ .ph-titel-leer { color: var(--text-leise); font-style: italic; font-weight: 400; } .ph-ohne-std { font-size: .72rem; color: var(--warn); margin-top: .2rem; } /* Teilschalter innerhalb eines Moduls */ .mod-teile { margin: .5rem 0 0 1.6rem; padding-left: .8rem; border-left: 2px solid var(--rahmen); } .mod-teil { display: flex; gap: .6rem; align-items: flex-start; } .mod-teil strong { display: block; font-size: .88rem; } .mod-teil small { display: block; color: var(--text-leise); font-size: .8rem; margin-top: .15rem; } /* ---------------------------------------------------- Übersichtskarte Gestaltung nach dem angenommenen Entwurf: Rahmen RINGSUM in der Modulfarbe, grosszügige Schrift, luftige Zeilen. Bewusst NICHT auf Platzersparnis getrimmt – die Ruhe ist der Zweck der Seite. */ .sm-karte { position: relative; margin-bottom: .8rem; } .sm-linien { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .sm-linie { fill: none; } .sm-linie-weg { stroke: var(--akzent); stroke-width: 2; } .sm-linie-zu { stroke: var(--text-leise); stroke-width: 1.2; stroke-dasharray: 4 3; } .sm-pfeil-kopf { fill: var(--akzent); } .sm-reihe-weg { border-radius: 10px; padding: 1.1rem; margin-bottom: 2.4rem; background: var(--akzbg); } .sm-reihe-titel { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--akztf); margin-bottom: .85rem; } .sm-raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); } /* Rahmen ringsum, 2 Pixel, in der Modulfarbe. */ .sm-block { background: var(--flaeche); border: 2px solid var(--rahmen); border-radius: 8px; padding: .9rem 1rem; position: relative; z-index: 1; } .sm-f-akzent { border-color: var(--akzent); } .sm-f-ok { border-color: var(--ok); } .sm-f-warn { border-color: var(--warn); } .sm-f-gefahr { border-color: var(--gefahr); } .sm-f-leise { border-color: var(--rahmen); } .sm-aus { opacity: .45; border-style: dashed; } .sm-aus-hinweis { font-weight: 400; font-size: .7rem; color: var(--text-leise); } /* Titel gross und fett, wie im Entwurf. */ .sm-kopf { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .8rem; } .sm-kopf a, .sm-kopf > span:first-child { font-size: .95rem; font-weight: 700; color: var(--text); text-decoration: none; } .sm-kopf a:hover { color: var(--akzent); } /* Einträge: grössere Schrift, deutlich mehr Luft zwischen den Zeilen. */ .sm-punkte { list-style: none; margin: 0; padding: 0; } .sm-punkte li { margin: 0 0 .55rem; } .sm-punkte li:last-child { margin-bottom: 0; } .sm-punkte a, .sm-punkte span { font-size: .82rem; line-height: 1.3; color: var(--text-leise); text-decoration: none; display: block; } .sm-punkte a:hover { color: var(--akzent); text-decoration: underline; } /* Der Ablauf-Verweis steht UNTEN und ausserhalb der Aufzählung – im Kopf verdrängte er den Modulnamen. */ .sm-info { display: inline-block; margin-top: .8rem; padding: 0; background: none; border: 0; cursor: pointer; font-size: .76rem; color: var(--akzent); } .sm-info:hover { text-decoration: underline; } .sm-legende { font-size: .78rem; color: var(--text-leise); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; } .sm-leg-weg, .sm-leg-zu, .sm-leg-aus { display: inline-block; width: 1.7rem; height: 0; vertical-align: middle; margin-right: .15rem; } .sm-leg-weg { border-top: 2px solid var(--akzent); } .sm-leg-zu { border-top: 2px dashed var(--text-leise); } .sm-leg-aus { border-top: 2px dashed var(--rahmen); opacity: .5; } @media (max-width: 640px) { .sm-linien { display: none; } .sm-reihe-weg { margin-bottom: 1rem; padding: .8rem; } .sm-raster { gap: .8rem; } } /* Fenster mit dem Diagramm */ .sm-fenster { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 90; } .sm-fenster[hidden] { display: none; } .sm-fenster-innen { background: var(--flaeche); border-radius: var(--radius); max-width: 46rem; width: 100%; padding: 1rem; overflow-y: auto; min-height: 0; } .sm-fenster-innen > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rahmen); } .sm-fenster-innen > header button { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--text-leise); } #sm-fenster-bild img { max-width: 100%; height: auto; display: block; } .sm-fenster-fuss { margin: .8rem 0 0; font-size: .8rem; } .topbar-uebersicht { margin-left: .3rem; } /* ---------------------------------------------------- Spracheditor */ .spr-fehlt { display: flex; align-items: center; gap: .4rem; } .spr-fortschritt { margin: .8rem 0 1rem; } .spr-fort-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; margin-bottom: .35rem; } .spr-fort-kopf span { color: var(--text-leise); font-size: .78rem; } .spr-fort-balken { height: .45rem; background: var(--flaeche-2); border-radius: .25rem; overflow: hidden; } .spr-fort-fuell { height: 100%; background: var(--ok); transition: width .3s; } .spr-fort-gruppen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; } .spr-fort-g { font-size: .74rem; padding: .2rem .45rem; border-radius: var(--radius-s); background: var(--flaeche-2); color: var(--text-leise); text-decoration: none; } .spr-fort-g small { opacity: .7; margin-left: .2rem; } .spr-fort-g:hover { background: var(--akzbg); color: var(--akzent); } .spr-fort-g.akt { background: var(--akzent); color: #fff; } .spr-fort-g.fertig { color: var(--ok); } .spr-fort-g.akt.fertig { color: #fff; } .spr-ki-zelle { width: 2.4rem; text-align: center; } .spr-ki[disabled] { opacity: .5; } .spr-frisch { background: var(--ok-bg); } /* --- Spracheditor: Stapel-Übersetzung, Sichern/Zurückholen (Delta 087) --- */ .spr-stapel { border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .7rem .8rem; margin: 0 0 1rem; } .spr-stapel-kopf { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin-bottom: .5rem; } .spr-stapel-hinweis { color: var(--text-leise); font-size: .78rem; } .spr-stapel-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .spr-stapel-stand { color: var(--text-leise); font-size: .82rem; } .spr-stapel-balken { margin-top: .6rem; } .spr-datei { margin: 0 0 1rem; } .spr-datei > summary { cursor: pointer; font-size: .85rem; color: var(--text-leise); } .spr-datei-inhalt { padding: .6rem 0 0; } .spr-datei-zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; } .spr-marke { color: var(--text-leise); font-weight: 700; cursor: help; } .spr-st-fehlt .spr-key { color: var(--warn, var(--text-leise)); } /* Lagerwechsel auf der Scan-Seite – gross genug für den Daumen. */ .lager-wechsel { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 1rem; } .lager-wechsel-btn { flex: 1 1 6rem; text-align: center; padding: .7rem .5rem; min-height: 2.8rem; display: flex; align-items: center; justify-content: center; font-size: .85rem; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: var(--radius); color: var(--text-leise); text-decoration: none; } .lager-wechsel-btn.akt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; } /* --- Fachchat: Umschalter Bedienung / Fachwissen (Delta 101) --- */ .ki-modus { display: flex; gap: 4px; padding: 6px 10px 0; } .ki-modus-btn { flex: 1; border: 1px solid var(--rahmen); background: var(--flaeche-2); color: var(--text-leise); padding: 5px 8px; border-radius: var(--radius-s); font-size: .82rem; cursor: pointer; } .ki-modus-btn.ist { background: var(--akzent); border-color: var(--akzent); color: #fff; } .ki-quellen { font-size: .78rem; opacity: .85; } .ki-quellen a { color: inherit; } /* --------------------------------------------------------------------------- * Farbkopf auf der Hallenkachel (Delta 110) * * Zeigt den Farbton, der auf dieser Kachel läuft. Ein farbiger Streifen mit * Beschriftung ganz oben; der Rest der Karte bleibt ruhig. Damit bleibt die * Ampel (ph-a-*) für den Termindruck weiter sichtbar – zwei Farbsysteme auf * derselben Fläche würden sich gegenseitig aufheben. * ------------------------------------------------------------------------- */ .ph-karte.ph-hat-farbe { overflow: hidden; padding-top: 0; } .ph-farbkopf { position: relative; display: block; margin: 0 -0.6rem 0.45rem; /* bündig bis an den Kartenrand */ padding: 0.2rem 0.6rem; min-height: 1.35rem; line-height: 1.35rem; } /* Die Streifen liegen als Fläche darunter. Bei mehreren Farbtönen teilen sie sich den Platz zu gleichen Teilen – so sieht man auf einen Blick, dass der Auftrag nicht einfarbig ist. */ .ph-farbstreifen { position: absolute; inset: 0; display: flex; } .ph-farbstreifen > span { flex: 1 1 0; min-width: 0; } .ph-farbtext { position: relative; /* über den Streifen */ font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; /* Ganz helle Töne (RAL 9010) brauchen eine Kante, sonst schwebt die Beschriftung im Nichts. */ text-shadow: 0 0 2px rgba(255,255,255,.35); } /* --- Volle Breite für die Produktionsseiten ------------------------------- * Plantafel und Hallenübersicht sind Tabellen mit vielen Spalten. Auf einem * grossen Monitor ist die sonst sinnvolle Lesebreite hier hinderlich: Man * scrollt waagrecht, obwohl rechts und links Platz frei bleibt. * Gilt NUR für diese Seiten – Formulare bleiben schmal und lesbar. */ body.seite-breit .inhalt-zentriert { max-width: none; } body.seite-breit .inhalt { max-width: none; } /* Farbton, der aus dem Auftrag stammt: Anzeige statt Eingabefeld. */ .ph-farbe-fest { display: flex; align-items: center; gap: .4rem; padding: .35rem 0; min-height: 2.1rem; } .ph-farbe-punkt { width: 1rem; height: 1rem; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.25); } /* Hinweis statt Anlege-Formular, wenn Aufträge im Auftragsmodul entstehen. */ .ph-neu-hinweis { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .7rem .9rem; margin: .6rem 0 1rem; background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 8px; } /* Felder, die aus dem Auftrag kommen: lesbar, aber erkennbar nicht änderbar. */ .ph-aus-auftrag { padding: .5rem .7rem; background: var(--flaeche-2); border-left: 3px solid var(--akzent); border-radius: 0; } /* --------------------------------------------------------------------------- * Tagesplan: Anlagen als Spalten, Stunden als senkrechte Achse (Delta 114) * ------------------------------------------------------------------------- */ .tp-kopf { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .6rem 0 1rem; } .tp-kopf .tp-rechts { margin-left: auto; } .tp-tafel { display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; padding-bottom: .5rem; } .tp-achse { flex: 0 0 3.4rem; } .tp-spalte { flex: 1 1 0; min-width: 8.5rem; } .tp-kopfzelle { height: 2.6rem; display: flex; flex-direction: column; justify-content: center; font-size: .8rem; line-height: 1.15; } .tp-kopfzelle small { font-size: .72rem; } .tp-voll { color: var(--gefahr); font-weight: 600; } /* Die Stundenmarken sitzen genau auf der Rasterhöhe – sonst laufen Achse und Karten auseinander, sobald jemand die Schriftgrösse ändert. */ .tp-stunde { height: var(--tp-h); font-size: .7rem; color: var(--text-leise); text-align: right; padding-right: .35rem; border-top: 1px solid var(--rahmen); box-sizing: border-box; } .tp-bahn { position: relative; border: 1px solid var(--rahmen); border-radius: 6px; background: repeating-linear-gradient( to bottom, transparent 0, transparent calc(var(--tp-h) - 1px), var(--rahmen) calc(var(--tp-h) - 1px), var(--rahmen) var(--tp-h)); overflow: hidden; } .tp-karte { position: relative; background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 4px solid var(--akzent); border-radius: 0; padding: .3rem .45rem; overflow: hidden; box-sizing: border-box; min-height: 1.6rem; } .tp-karte-ueber { border-left-color: var(--gefahr); background: var(--flaeche-2); } .tp-karte-schaetz { border-style: dashed; } .tp-karte-zieht { opacity: .85; outline: 2px solid var(--akzent); } .tp-titel { display: block; font-size: .78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-zeile { font-size: .7rem; color: var(--text-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tp-schaetz-hinweis { color: var(--warn); } /* Anfasser: unten über die volle Breite, damit man ihn auch auf dem Handy trifft. Ohne touch-action wird beim Ziehen die Seite gescrollt. */ .tp-griff { position: absolute; left: 0; right: 0; bottom: 0; height: .55rem; cursor: ns-resize; touch-action: none; } .tp-griff::after { content: ''; position: absolute; left: 50%; bottom: .12rem; width: 1.6rem; height: 2px; margin-left: -.8rem; background: var(--rahmen); border-radius: 2px; } .tp-karte:hover .tp-griff::after { background: var(--akzent); } .tp-frei { display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--text-leise); } @media (max-width: 40rem) { .tp-spalte { min-width: 7.5rem; } .tp-achse { flex-basis: 2.8rem; } } /* Losnummer auf der Kachel: klein, aber nicht zu übersehen – wer sie überliest, hält eine Teilmenge für den ganzen Auftrag. */ .ph-los { display: inline-block; margin-left: .3rem; padding: 0 .3rem; font-size: .68rem; font-weight: 700; vertical-align: .05rem; background: var(--akzent); color: #fff; border-radius: 3px; } .ph-los-form { margin-top: .8rem; } /* --------------------------------------------------------------------------- * Wochentafel im Anlagen-Raster (Delta 116) * * Vorher: 5 feste Spalten für die Wochentage. Jetzt richtet sich die * Spaltenzahl nach den ANLAGEN – und die sind je Betrieb verschieden. * Deshalb kommt die Zahl aus einer Variablen, die die Ansicht setzt. * ------------------------------------------------------------------------- */ .pp-tafel-anlagen .pp-kopfzeile, .pp-tafel-anlagen .pp-zeile { grid-template-columns: 6rem repeat(var(--pp-spalten, 5), minmax(8rem, 1fr)) var(--pp-bilanz, 0px); } /* Der Tag steht jetzt links – mit Sprung in den Tagesplan. */ .pp-tafel-anlagen .pp-anlage { position: relative; line-height: 1.25; } .pp-tafel-anlagen .pp-anlage small { color: var(--text-leise); } .pp-zum-tag { position: absolute; right: .35rem; bottom: .25rem; font-size: .95rem; text-decoration: none; opacity: .55; } .pp-zum-tag:hover { opacity: 1; } .pp-zeile-heute { background: var(--flaeche-2); } /* Personalbilanz am Zeilenende: Sie gehört zum Tag, nicht zur Anlage. */ .pp-bilanz-tag { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: .72rem; line-height: 1.2; border-left: 1px solid var(--rahmen); padding: .2rem; } .pp-bilanz-tag.pp-eng { color: var(--gefahr); font-weight: 600; } @media (max-width: 60rem) { .pp-tafel-anlagen .pp-kopfzeile, .pp-tafel-anlagen .pp-zeile { min-width: 42rem; } } /* Scherensymbol auf der Tageskarte: klein, erst beim Überfahren deutlich. */ .tp-teilen { position: absolute; top: .15rem; right: .3rem; font-size: .85rem; text-decoration: none; opacity: .45; line-height: 1; } .tp-teilen:hover { opacity: 1; } .tp-teilen-form { margin-top: 1rem; } /* Vorrat unter dem Tagesraster: Karten nebeneinander, jede mit Anlagenwahl. */ .tp-vorrat { display: grid; gap: .6rem; margin-top: .5rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .tp-vorrat-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 6px; padding: .5rem .6rem; } .tp-vorrat-titel { font-size: .82rem; font-weight: 600; line-height: 1.25; } .tp-vorrat-aktion { display: flex; gap: .35rem; margin-top: .45rem; } .tp-vorrat-aktion select { flex: 1 1 auto; min-width: 0; } /* Veredelungsarten im Auftragsformular: ankreuzen, bei Bedarf Pulver dazu. */ .ver-wahl { display: grid; gap: .4rem; margin: .4rem 0 .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .ver-zeile { border: 1px solid var(--rahmen); border-radius: 6px; padding: .45rem .6rem; background: var(--flaeche); } .ver-zeile.ver-an { border-color: var(--akzent); } .ver-kopf { display: flex; align-items: center; gap: .45rem; cursor: pointer; } .ver-punkt { width: .85rem; height: .85rem; border-radius: 3px; flex: none; border: 1px solid rgba(0,0,0,.25); } .ver-name { flex: 1 1 auto; font-size: .88rem; } .ver-kuerzel { font-size: .7rem; font-weight: 700; color: var(--text-leise); } .ver-pulver { margin-top: .4rem; } .ver-neu input { opacity: .85; } /* Ein Materialfeld je Farbton – der RAL-Punkt macht sofort klar, wofür. */ .ver-fuer-ral { display: inline-flex; align-items: center; gap: .25rem; margin-left: .3rem; font-weight: 600; color: var(--text-leise); } .ver-fuer-ral .ver-punkt { width: .7rem; height: .7rem; } .ver-pulver .feld + .feld { margin-top: .35rem; } /* Schrittkette auf der Kachel: erledigt ausgefüllt, aktuell umrandet, kommend blass. Man soll sehen, was NOCH FEHLT, nicht nur was läuft. */ .ph-schritte { display: flex; align-items: center; gap: .18rem; flex-wrap: wrap; margin: .25rem 0; } .ph-schritt { display: inline-block; padding: 0 .28rem; border-radius: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .02em; background: var(--flaeche-2); color: var(--text-leise); border: 1px solid var(--rahmen); } .ph-schritt-ok { color: #fff; border-color: transparent; } .ph-schritt-jetzt{ color: #fff; border-color: var(--text); box-shadow: 0 0 0 1px var(--text); } .ph-schritt-zahl { font-size: .62rem; color: var(--text-leise); margin-left: .15rem; } .ph-schritte-gross .ph-schritt { font-size: .75rem; padding: .1rem .4rem; } .ph-schritt-form { margin-top: .8rem; } .ph-schritt-form .inline { display: inline-block; margin-right: .4rem; } /* Mitarbeiter-Kürzel auf der Kachel: klein und rund, damit sie sich von den eckigen Schrittmarken unterscheiden – zwei Sorten Abzeichen auf derselben Karte müssen auf einen Blick auseinanderzuhalten sein. */ .ph-leute { display: flex; gap: .2rem; flex-wrap: wrap; margin-top: .2rem; } .ph-kuerzel { display: inline-block; min-width: 1.35rem; text-align: center; padding: 0 .25rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .02em; background: var(--akzent-bg); color: var(--akzent-tf); border: 1px solid var(--rahmen); } .ph-kuerzel-mehr { background: var(--flaeche-2); color: var(--text-leise); } /* Kartenfenster im Tagesplan: ein Bereich im normalen Fluss, kein Overlay – in der WebView wären vh/dvh oft 0 und ein schwebendes Fenster hätte dort keine Höhe. */ .tp-fenster { display: grid; gap: .7rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .tp-titel-offen { text-decoration: underline; } .tk-leute { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; } .tk-person { border: 1px solid var(--rahmen); background: var(--flaeche-2); color: var(--text); border-radius: 999px; padding: .12rem .55rem; font-size: .8rem; cursor: pointer; } .tk-person:hover { border-color: var(--gefahr); color: var(--gefahr); } /* Woche: 7 Spalten statt 5, und der Sprung in den Tagesplan. */ .pp-tafel-anlagen .pp-karte { cursor: default; } .pp-zum-tagesplan { float: right; text-decoration: none; opacity: .5; font-size: .8rem; } .pp-zum-tagesplan:hover { opacity: 1; } .pp-nur-ansicht { margin: .8rem 0; padding: .55rem .8rem; background: var(--flaeche-2); border-left: 3px solid var(--akzent); border-radius: 0; } /* --------------------------------------------------------------------------- * Tagesplan: Raster links, Wartende rechts (Delta 133) * ------------------------------------------------------------------------- */ .tp-arbeitsflaeche { display: flex; gap: .9rem; align-items: flex-start; } .tp-arbeitsflaeche > .tp-tafel { flex: 1 1 auto; min-width: 0; } .tp-wartend { flex: 0 0 15rem; } .tp-wartend-kopf { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .5rem; } .tp-wartend-fuss { margin-top: .5rem; font-size: .72rem; } /* Drei Spalten – bei 15rem Leiste bleiben rund 70 Pixel je Kachel. Genug für Nummer, Kürzelpunkte, Zeit und Termin, mehr nicht. */ .tp-wartend-gitter { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; } .tp-w-karte { display: block; position: relative; padding: .3rem .3rem .25rem; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 4px; text-decoration: none; color: var(--text); cursor: grab; overflow: hidden; } .tp-w-karte:hover { border-color: var(--akzent); } .tp-w-zieht { opacity: .45; } /* Der Farbstreifen liegt OBEN über die volle Breite: Auf 70 Pixel wäre ein linker Balken kaum zu sehen. */ .tp-w-farbe { display: block; height: 3px; margin: -.3rem -.3rem .25rem; } .tp-w-nr { display: block; font-size: .68rem; font-weight: 700; line-height: 1.15; } .tp-w-zeit { display: block; font-size: .62rem; color: var(--text-leise); } .tp-w-termin{ display: block; font-size: .62rem; color: var(--text-leise); } .tp-w-spaet .tp-w-termin { color: var(--gefahr); font-weight: 700; } /* Veredelung als Farbpunkte – für Kürzel ist kein Platz, die Farbe genügt zum Einordnen. Der Name steht im Tooltip. */ .tp-w-ver { display: flex; gap: 1px; margin: .12rem 0; } .tp-w-ver i { width: 100%; height: 3px; border-radius: 1px; } /* Zielmarkierung beim Ziehen: man soll VOR dem Loslassen sehen, wo es landet. */ .tp-bahn.tp-ziel { outline: 2px dashed var(--akzent); outline-offset: -2px; } @media (max-width: 60rem) { .tp-arbeitsflaeche { flex-direction: column; } .tp-wartend { flex: 1 1 auto; width: 100%; } .tp-wartend-gitter { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); } } /* Schrittmarke mit Füllgrad: der Balken zeigt, wie viel durch ist. Der Text muss auf beiden Untergründen lesbar bleiben, deshalb Kontur statt Farbe. */ .ph-schritt { text-shadow: 0 0 2px var(--flaeche), 0 0 2px var(--flaeche); } .ps-melden { display: flex; align-items: flex-end; gap: .4rem; flex-wrap: wrap; } /* Auftragsdaten im Kartenfenster – steht zuerst, weil man zum Entscheiden erst schaut und dann handelt. */ .tk-auftrag { grid-column: 1 / -1; } .tk-nr { font-weight: 600; margin-bottom: .2rem; } .tk-kunde { font-weight: 400; color: var(--text-leise); margin-left: .5rem; } .tk-termin { font-size: .82rem; color: var(--text-leise); margin-bottom: .5rem; } .tk-spaet { color: var(--gefahr); font-weight: 600; } .tk-pos { margin: .4rem 0; font-size: .82rem; } .tk-pos td { padding: .18rem .4rem; } .tk-pos .num { text-align: right; } .tk-pos .leise { color: var(--text-leise); } .tk-material { display: grid; gap: .2rem; margin-top: .4rem; } .tk-mat-zeile { display: flex; align-items: center; gap: .35rem; font-size: .82rem; } .tk-mat-ral { color: var(--text-leise); font-size: .75rem; } .tk-notiz { margin-top: .5rem; } /* Was zum Arbeiten fehlt – auffällig, aber nicht alarmierend: Es ist ein Hinweis, kein Fehler. */ .ph-fehlt { font-size: .68rem; color: var(--warn-tf); background: var(--warn-bg); border-radius: 3px; padding: .1rem .3rem; margin: .2rem 0; display: inline-block; } .feld-schalter { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .7rem; } .feld-schalter small { display: block; font-weight: 400; } .awp-warnung { margin: 1rem 0; padding: .6rem .8rem; background: var(--flaeche-2); border-left: 3px solid var(--warn-tf); } /* Konfliktmeldungen über dem Raster: sichtbar, aber nicht schreiend – es sind Hinweise für den Planer, keine Systemfehler. */ .tp-konflikte { display: grid; gap: .25rem; margin: .6rem 0 .8rem; } .tp-k-zeile { font-size: .82rem; padding: .35rem .6rem; border-radius: 4px; background: var(--warn-bg); color: var(--warn-tf); border-left: 3px solid currentColor; } .tp-k-marke { color: var(--warn-tf); font-size: .8rem; margin-right: .2rem; cursor: help; } /* Rückgängig: unauffällig, aber immer an derselben Stelle – man sucht es nicht, man weiss wo es ist. */ .pr-undo { margin: .4rem 0 .6rem; } /* Kästchen auf der Wartekachel: klein oben rechts, damit es die Angaben nicht verdeckt. Es liegt ÜBER der Karte, weil die Karte selbst ein Link ist. */ .tp-w-huelle { position: relative; } .tp-w-haken { position: absolute; z-index: 2; top: .18rem; right: .18rem; } .tp-w-haken input { width: .85rem; height: .85rem; cursor: pointer; } .tp-sammel { margin-top: .5rem; } .tp-sammel-zeile { display: flex; gap: .3rem; } .tp-sammel-zeile select { flex: 1 1 auto; min-width: 0; } /* Eingeplante Karten ziehen sich wie die wartenden. */ .tp-karte { cursor: grab; } .tp-karte:active { cursor: grabbing; } .tp-karte.tp-w-zieht { opacity: .45; } /* Farbton auf der Planungskachel: schmaler Streifen unter dem Titel – die Karte ist hier nur so hoch wie ihre Dauer, mehr Platz gibt es nicht. */ .tp-farbstreifen { display: flex; gap: 1px; height: 4px; margin: .18rem 0; } .tp-farbstreifen span { flex: 1; border-radius: 1px; } /* --------------------------------------------------------------------------- * EINE Kartenvorlage für Halle, Woche und Tagesplan (Delta 145) * * Statt sieben Zeilen untereinander: zwei Zeilen, der Rest nebeneinander. * In eine Halle passen damit gut doppelt so viele Karten auf den Bildschirm – * bei zwanzig Aufträgen der Unterschied zwischen Scrollen und Überblick. * ------------------------------------------------------------------------- */ .pk-karte { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden; cursor: grab; user-select: none; } .pk-karte:active { cursor: grabbing; } .pk-karte.tp-w-zieht, .pk-karte.ph-zieht { opacity: .45; } /* Farbstreifen oben über die volle Breite, schmal: Er soll die Farbe zeigen, nicht die Kachel beherrschen. */ .pk-farbe { display: flex; height: 5px; } .pk-farbe span { flex: 1; } .pk-inhalt { padding: .35rem .5rem; } .pk-kopf { display: flex; align-items: baseline; gap: .3rem; } .pk-ampel { width: .45rem; height: .45rem; border-radius: 50%; flex: none; background: var(--rahmen); } .ph-a-rot .pk-ampel { background: var(--gefahr); } .ph-a-gelb .pk-ampel { background: var(--warn); } .ph-a-gruen .pk-ampel { background: var(--ok); } .ph-a-fertig .pk-ampel { background: var(--text-leise); } .pk-nr { font-size: .82rem; font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-nr:hover { text-decoration: underline; } .pk-los { font-size: .62rem; color: var(--text-leise); } .pk-termin { margin-left: auto; font-size: .7rem; color: var(--text-leise); flex: none; } .pk-spaet { color: var(--gefahr); font-weight: 700; } /* Zweite Zeile: alles nebeneinander statt untereinander. */ .pk-zeile { display: flex; align-items: center; gap: .35rem; margin-top: .15rem; font-size: .68rem; color: var(--text-leise); } .pk-kunde { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-mass { flex: none; } .pk-ver { display: flex; gap: 1.5px; flex: none; } .pk-ver i { width: .7rem; height: 4px; border-radius: 1px; } .pk-kuerzel { flex: none; font-size: .6rem; font-weight: 700; padding: 0 .25rem; border-radius: 999px; border: 1px solid var(--rahmen); background: var(--flaeche-2); } .pk-fehlt { font-size: .64rem; color: var(--warn-tf); background: var(--warn-bg); border-radius: 3px; padding: 0 .25rem; margin-top: .18rem; display: inline-block; } /* Knappe Stufe (Tagesplan): Die Karte ist nur so hoch wie ihre Dauer. */ .pk-knapp .pk-inhalt { padding: .25rem .4rem; } .pk-knapp .pk-nr { font-size: .74rem; } /* Kleine Stufe (Woche, Wartezone): Fingernagelgrösse. */ .pk-klein .pk-farbe { height: 3px; } .pk-klein .pk-inhalt { padding: .2rem .3rem; } .pk-klein .pk-nr { font-size: .68rem; } .pk-klein .pk-termin { font-size: .6rem; } /* Hallenwahl über dem Tagesraster: eine Reihe Knöpfe, der aktive gefüllt. */ .tp-hallenwahl { display: flex; gap: .3rem; flex-wrap: wrap; margin: .5rem 0 .7rem; } /* --------------------------------------------------------------------------- * Auftragsfortschritt statt Kanban-Spalten (Delta 151) * Eine Zeile je Auftrag mit SEINER Schrittfolge – kein Querscrollen mehr. * ------------------------------------------------------------------------- */ .as-sicht { display: flex; gap: .3rem; margin: .5rem 0 .8rem; } .as-liste { border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden; } .as-zeile { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-bottom: 1px solid var(--rahmen); } .as-zeile:last-child { border-bottom: none; } .as-ampel { width: .45rem; height: .45rem; border-radius: 50%; flex: none; background: var(--rahmen); } .as-ampel-rot { background: var(--gefahr); } .as-ampel-ok { background: var(--ok); } .as-ampel-ohne{ background: var(--rahmen); } .as-kopf { flex: 0 0 9rem; min-width: 0; } .as-nr { font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text); } .as-kunde { display: block; font-size: .72rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-fortschritt { flex: 1 1 auto; min-width: 0; } .as-balken { display: flex; gap: 2px; margin-bottom: .18rem; } .as-balken span { flex: 1; height: 7px; border-radius: 2px; } .as-text { font-size: .72rem; color: var(--text-leise); } .as-termin { flex: 0 0 3.2rem; text-align: right; font-size: .72rem; color: var(--text-leise); } .as-spaet { color: var(--gefahr); font-weight: 700; } @media (max-width: 40rem) { .as-zeile { flex-wrap: wrap; } .as-kopf { flex: 1 1 60%; } .as-fortschritt { flex: 1 1 100%; order: 3; } } /* Zurückgeholt aus der alten Kachel (Delta 153): Schere, Anlage/Tag, Griff. */ .pk-karte { position: relative; } .pk-schere { position: absolute; right: .3rem; bottom: .2rem; font-size: .8rem; text-decoration: none; color: var(--text-leise); opacity: .55; } .pk-schere:hover { opacity: 1; color: var(--akzent); } .pk-wo { flex: none; font-size: .66rem; color: var(--text-leise); padding-left: .3rem; border-left: 1px solid var(--rahmen); } /* Geschaetzte Dauer: kleine Tilde neben der Zeit. */ .pk-schaetz { flex:none; font-size:.7rem; color:var(--warn-tf); cursor:help; } /* Konfliktmarke am Titel (Delta 138). */ .pk-k-marke { flex:none; font-size:.72rem; color:var(--warn-tf); cursor:help; } /* --------------------------------------------------------------------------- * Statustafel: eine Reihe je Auftrag (Delta 161) * Jeder Auftrag zeigt SEINE Schritte – nicht alle Spalten des Betriebs. * ------------------------------------------------------------------------- */ .aw-reihen { display: grid; gap: .5rem; } .aw-reihe { border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .5rem .6rem; background: var(--flaeche); } .aw-reihe-kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem; } .aw-reihe-nr { font-weight: 600; text-decoration: none; color: var(--text); font-size: .88rem; } .aw-reihe-kunde { flex: 1 1 auto; min-width: 0; font-size: .75rem; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aw-reihe-termin { font-size: .75rem; color: var(--text-leise); flex: none; } /* Die Bahn scrollt seitlich, wenn ein Auftrag viele Schritte hat – lieber scrollen als Felder unlesbar quetschen. */ .aw-reihe-bahn { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px; } .aw-feld { flex: 1 1 0; min-width: 5.5rem; border-radius: 4px; padding: .3rem .4rem; font-size: .7rem; border: 1px solid var(--rahmen); background: var(--flaeche-2); display: flex; align-items: center; gap: .25rem; } .aw-feld-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aw-f-erledigt { background: var(--ok-bg); border-color: var(--ok); color: var(--ok-tf); } .aw-feld-ok { flex: none; color: var(--ok); font-weight: 700; } .aw-f-aktuell { background: var(--akzent-bg); border-color: var(--akzent); font-weight: 600; } .aw-feld-jetzt { flex: none; font-size: .62rem; color: var(--akzent); text-transform: uppercase; } .aw-f-offen { color: var(--text-leise); } /* Arbeitsgänge je Anlage: mehrere Kästchen in einer Zelle, umbrechend. */ .pp-schritte { min-width: 12rem; } .pp-schritt-wahl { display: block; font-size: .78rem; white-space: nowrap; } .pp-schritt-wahl input { margin-right: .25rem; } /* --------------------------------------------------------------------------- * Anlagenverwaltung als Karten (Delta 166) * Vorher neun Tabellenspalten mit sechs Kaestchen in einer davon – auf dem * Handy unbedienbar, am Bildschirm unuebersichtlich. * ------------------------------------------------------------------------- */ .pp-anlagen { display: grid; gap: .7rem; margin: .8rem 0; } .pp-anlage { border: 1px solid var(--rahmen); border-radius: var(--radius-s); padding: .7rem .8rem; background: var(--flaeche); } .pp-anlage-aus { opacity: .6; } .pp-anlage-neu { border-style: dashed; } .pp-a-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; } .pp-a-name { flex: 1 1 auto; min-width: 0; font-size: 1rem; font-weight: 600; border: none; border-bottom: 1px solid var(--rahmen); background: transparent; padding: .2rem 0; } .pp-a-name:focus { border-bottom-color: var(--akzent); outline: none; } .pp-a-aktiv { flex: none; font-size: .78rem; color: var(--text-leise); white-space: nowrap; } /* Die Arbeitsgaenge stehen oben: Sie entscheiden, ob sich der Auftragsstatus bewegt, wenn eine Karte auf diese Anlage gezogen wird. */ .pp-a-schritte { background: var(--flaeche-2); border-radius: 4px; padding: .45rem .55rem; margin-bottom: .6rem; } .pp-a-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); margin-bottom: .3rem; } .pp-a-haken { display: flex; flex-wrap: wrap; gap: .3rem .9rem; } .pp-schritt-wahl { font-size: .8rem; white-space: nowrap; } .pp-schritt-wahl input { margin-right: .25rem; } .pp-a-felder { display: flex; flex-wrap: wrap; gap: .5rem .8rem; } .pp-a-feld { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 8rem; } .pp-a-feld > span { font-size: .68rem; color: var(--text-leise); } .pp-a-feld input, .pp-a-feld select { width: 100%; } .pp-a-schmal { flex: 0 1 6rem; } .pp-a-hinweis { margin: .5rem 0 0; font-size: .74rem; } .pp-quellen { margin-top: -.4rem; } .pp-quellen a { margin: 0 .1rem; } @media (max-width: 40rem) { .pp-a-feld { flex: 1 1 45%; } .pp-a-haken { gap: .35rem .6rem; } } /* --------------------------------------------------------------------------- * Scanseite: der Weg des Auftrags (Delta 168) * Wer den Laufzettel scannt, steht am Werkstueck – gross genug fuer Handschuhe * und ohne Scrollen erfassbar. * ------------------------------------------------------------------------- */ .scan-weg { list-style: none; margin: 1rem 0; padding: 0; text-align: left; } .scan-punkt { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 4px; font-size: .9rem; } .scan-marke { flex: none; width: 1.1rem; text-align: center; font-weight: 700; } .scan-name { flex: 1 1 auto; } .scan-erledigt { color: var(--ok); } .scan-erledigt .scan-marke { color: var(--ok); } .scan-aktuell { background: var(--akzent-bg); font-weight: 600; } .scan-aktuell .scan-marke::before { content: "▸"; color: var(--akzent); } .scan-offen { color: var(--text-leise); } /* Sperren-Karte: sichtbare Ueberschrift statt Aufklapper. */ .pp-neu-titel { font-size: .95rem; margin: 0 0 .4rem; } /* --------------------------------------------------------------------------- * Kopfzeile der Wochenansichten (Delta 172) * * Die Pfeile bilden mit dem Zeitraum EINE Einheit – vorher waren es drei * einzelne Knoepfe zwischen anderen, und man sah nicht, dass sie * zusammengehoeren. * ------------------------------------------------------------------------- */ .pp-blaettern { display: inline-flex; align-items: stretch; flex: 0 1 auto; border: 1px solid var(--rahmen); border-radius: var(--radius-s); overflow: hidden; background: var(--flaeche); } .pp-pfeil { display: flex; align-items: center; padding: .3rem .7rem; text-decoration: none; color: var(--text); font-size: .9rem; } .pp-pfeil:hover { background: var(--flaeche-2); } .pp-blaettern .pp-woche { display: flex; align-items: center; padding: .3rem .7rem; font-weight: 600; font-size: .85rem; white-space: nowrap; border-left: 1px solid var(--rahmen); border-right: 1px solid var(--rahmen); } /* Drucken nur am Bildschirm – auf dem Handy druckt niemand. */ @media (max-width: 48rem) { .pp-nur-desktop { display: none !important; } .pp-blaettern { flex: 1 1 auto; } .pp-blaettern .pp-woche { flex: 1 1 auto; justify-content: center; } } /* Sitemap: Untergruppen wie "Einstellungen" als Zwischenzeile, ihre Punkte eingerueckt – so sieht man, dass sie eine Ebene tiefer liegen. */ .sm-gruppe { list-style: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-leise); margin: .5rem 0 .15rem; } .sm-tiefer { padding-left: .7rem; }