/* Ablaufführung — die Schicht, die erklärt, wo man gerade steht. Ergänzt base.css; kein bestehender Selektor wird überschrieben. Grundregel: Farbe hat genau eine Bedeutung. Grün, Bernstein und Rot bleiben Zustandsaussagen (die Ampel). Der ABLAUF wird über Tinte, Akzent und Form unterschieden — gefüllt, Ring, leer, gestrichelt. Jede Farbaussage ist doppelt kodiert (Wort plus Form), sonst bricht sie bei Rot-Grün-Sehschwäche und am Beamer. */ :root { --t-mikro: 11.5px; /* Spaltenköpfe, Etappenmarken */ --t-klein: 12.5px; /* Erklärzeilen */ --t-fuehr: 15px; /* Standortsatz — bewusst über Fliesstext */ --t-titel: 22px; --t-zahl: 30px; --mass-text: 68ch; /* Zeilenlänge für jeden Erklärtext */ --stufe-fertig: var(--ink-2); --stufe-jetzt: var(--accent); --stufe-jetzt-bg: var(--accent-2); --stufe-offen: var(--line); --stufe-offen-ink: var(--ink-3); --stufe-abzweig: var(--bad); --line-strong: #c3ccd6; --fokus: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); --punkt: 20px; --streifen: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127,127,127,.16) 6px 12px); } @media (prefers-color-scheme: dark) { :root { --line-strong: #3c4653; --streifen: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.07) 6px 12px); } } /* Vorführdichte: ein Attribut auf , für Beamer und Werkbank. */ :root[data-dichte="vorfuehrung"] { --t-mikro: 12.5px; --t-klein: 13.5px; --t-fuehr: 17px; --t-titel: 26px; --t-zahl: 36px; --punkt: 24px; } :root[data-dichte="vorfuehrung"] body { font-size: 15.5px; } :root[data-dichte="vorfuehrung"] table { font-size: 14px; } /* Tastaturbedienung: an der Werkbank wird getabbt, nicht geklickt. base.css hatte keinen Fokusstil; der Browserstandard verschwindet auf den hellen Panelflächen praktisch vollständig. */ :where(a, button, .btn, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- Seitenkopf --- */ .fuehrung { display: grid; gap: 12px; margin-bottom: 18px; } .fuehrung .kopfzeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .fuehrung h1 { font-size: var(--t-titel); line-height: 1.2; margin: 0; letter-spacing: -.3px; } .fuehrung .standort { font-size: var(--t-fuehr); line-height: 1.55; color: var(--ink-2); max-width: var(--mass-text); margin: 0; flex-basis: 100%; } .fuehrung .standort b { color: var(--ink); font-weight: 650; } .fuehrung .marken { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; } /* ---------------------------------------------------------- Etappenband -- */ .kette { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); list-style: none; margin: 0; padding: 2px 0 0; overflow-x: auto; } .kette > li { position: relative; min-width: 0; } /* Die Bahn zum nächsten Punkt gehört dem Glied links davon: ist die Etappe erledigt, ist auch der Weg dorthin gegangen. */ .kette > li::before { content: ""; position: absolute; top: calc(var(--punkt) / 2 - 1px); left: var(--punkt); right: 8px; height: 2px; background: var(--stufe-offen); } .kette > li:last-child::before { display: none; } .kette > li.fertig::before { background: var(--stufe-fertig); } .kette .glied { display: grid; grid-template-rows: var(--punkt) auto; gap: 7px; align-content: start; padding-right: 14px; color: inherit; text-decoration: none; } .kette .glied:hover .name { color: var(--ink); text-decoration: underline; } .kette .punkt { position: relative; z-index: 1; width: var(--punkt); height: var(--punkt); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-mikro); font-weight: 700; font-variant-numeric: tabular-nums; border: 2px solid var(--stufe-offen); background: var(--panel); color: var(--stufe-offen-ink); } .kette .name { font-size: var(--t-klein); line-height: 1.3; color: var(--ink-3); overflow-wrap: anywhere; } .kette .wartet { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 9px; background: var(--warn-bg); color: var(--warn); font-weight: 700; font-size: var(--t-mikro); } .kette li.fertig .punkt { background: var(--stufe-fertig); border-color: var(--stufe-fertig); color: var(--panel); } .kette li.fertig .name { color: var(--ink-2); } .kette li.jetzt .punkt { border-color: var(--stufe-jetzt); background: var(--stufe-jetzt-bg); color: var(--accent); box-shadow: 0 0 0 3px var(--stufe-jetzt-bg); } .kette li.jetzt .name { color: var(--ink); font-weight: 650; } .kette li.gesperrt .punkt { background: var(--streifen), var(--panel); } .kette li.abzweig .punkt { border-color: var(--stufe-abzweig); color: var(--bad); border-style: dashed; } /* --------------------------------------------------------- Ablaufkarte --- */ .ablaufkarte { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .ablaufkarte > div { background: var(--panel); padding: 10px 12px; } .ablaufkarte .hier { background: var(--stufe-jetzt-bg); } .ablaufkarte .k { font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 3px; } .ablaufkarte .v { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .ablaufkarte .hier .v { color: var(--ink); font-weight: 600; } @media (max-width: 820px) { .ablaufkarte { grid-template-columns: 1fr; } } /* ------------------------------------------------------- Zustandskette --- */ .zustandskette { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .zustandskette .zust { font-size: var(--t-klein); padding: 2px 8px; border-radius: 11px; border: 1px solid var(--line); color: var(--ink-3); background: var(--panel); white-space: nowrap; } .zustandskette .zust.fertig { color: var(--ink-2); border-color: var(--line-strong); } .zustandskette .zust.jetzt { color: var(--accent); border-color: var(--accent); background: var(--accent-2); font-weight: 650; } .zustandskette .zust.abzweig { color: var(--bad); border-color: var(--bad); border-style: dashed; } .zustandskette .pfeil { color: var(--ink-3); font-size: 11px; } .zustandskette.kompakt .zust { padding: 1px 6px; font-size: var(--t-mikro); } .zustandssatz { font-size: var(--t-klein); color: var(--ink-3); margin-top: 4px; max-width: var(--mass-text); } /* ------------------------------------------------------ nächster Schritt - */ .naechst { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--accent); border-left-width: 4px; background: var(--accent-2); border-radius: var(--radius); padding: 10px 14px; } .naechst .satz { font-size: 14px; color: var(--ink); font-weight: 600; } .naechst .wer { font-size: var(--t-klein); color: var(--ink-2); } .naechst .spacer { flex: 1; } .naechst.gesperrt { border-color: var(--line-strong); background: var(--panel-2); } .naechst.gesperrt .satz { color: var(--ink-2); font-weight: 500; } .naechst.fertig { border-color: var(--ok); background: var(--ok-bg); } .naechst.fertig .satz { color: var(--ok); } .naechst.klein { padding: 4px 0; border: 0; background: none; } .naechst.klein .satz { font-size: 13px; font-weight: 500; } /* --------------------------------------------------------------- Grenze -- */ .grenze { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 12px 14px; display: grid; gap: 8px; } .grenze > .warum { font-size: 13px; color: var(--ink-2); max-width: var(--mass-text); } .grenze ul { margin: 0; padding-left: 2px; list-style: none; display: grid; gap: 5px; } .grenze li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; } .grenze li .zeichen { font-weight: 700; width: 1.1em; } .grenze li.erfuellt .zeichen { color: var(--ok); } .grenze li.offen .zeichen { color: var(--warn); } .grenze li .wer { color: var(--ink-3); font-size: var(--t-klein); } /* --------------------------------------------------------------- Marken -- */ .marke { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel); font-size: var(--t-klein); color: var(--ink-2); white-space: nowrap; } .marke b { color: var(--ink); font-weight: 650; } .marke.warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); } .marke.bad { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); } .marke.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); } /* ------------------------------------------------------------ Messwerte -- */ .messwerte { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; } .messwerte .mw { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; align-content: start; text-decoration: none; color: inherit; } .messwerte .mw .k { font-size: var(--t-mikro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); } .messwerte .mw .v { font-size: var(--t-zahl); line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; } .messwerte .mw .s { font-size: var(--t-klein); color: var(--ink-3); } .messwerte .mw.klein .v { font-size: 20px; } .messwerte .mw.handlung { border-left: 4px solid var(--accent); } .messwerte .mw.ton-bad { border-left: 4px solid var(--bad); } .messwerte .mw.ton-bad .v { color: var(--bad); } .messwerte .mw.ton-warn { border-left: 4px solid var(--warn); } .messwerte .mw.ton-warn .v { color: var(--warn); } .messwerte .mw.ton-ok .v { color: var(--ok); } a.mw:hover { border-color: var(--accent); } /* ----------------------------------------------------------- Erklärung --- */ .erklaerung { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); } .erklaerung > summary { cursor: pointer; padding: 9px 13px; font-size: 13px; font-weight: 600; color: var(--ink-2); list-style: none; } .erklaerung > summary::-webkit-details-marker { display: none; } .erklaerung > summary::before { content: "\25B8 "; color: var(--ink-3); } .erklaerung[open] > summary::before { content: "\25BE "; } .erklaerung .inhalt { padding: 0 13px 12px; display: grid; gap: 8px; } .erklaerung p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: var(--mass-text); } .erklaerung .quelle { font-size: var(--t-klein); color: var(--ink-3); } /* -------------------------------------------------------- Leerzustand ---- */ .leer { display: grid; gap: 8px; padding: 20px; text-align: center; justify-items: center; } .leer .warum { color: var(--ink-2); font-size: 14px; max-width: 52ch; } .leer .naechstes { color: var(--ink-3); font-size: var(--t-klein); max-width: 52ch; } /* ----------------------------------------------------------- Flussbild --- */ .flussbild { width: 100%; height: auto; display: block; } .flussbild text { font-family: inherit; } .flussbild .fb-titel { font-size: 12.5px; font-weight: 650; fill: var(--ink); } .flussbild .fb-text { font-size: 11px; fill: var(--ink-2); } .flussbild .fb-klein { font-size: 9.5px; fill: var(--ink-3); } .flussbild .fb-kasten { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.2; } .flussbild .fb-kasten.jetzt { fill: var(--accent-2); stroke: var(--accent); stroke-width: 2; } .flussbild .fb-kasten.fertig { fill: var(--panel-2); stroke: var(--ink-3); } .flussbild .fb-kasten.abzweig { fill: var(--bad-bg); stroke: var(--bad); stroke-dasharray: 4 3; } .flussbild .fb-kasten.tor { fill: var(--ok-bg); stroke: var(--ok); } .flussbild .fb-pfeil { stroke: var(--ink-3); stroke-width: 1.4; fill: none; } .flussbild .fb-pfeil.abzweig { stroke: var(--bad); stroke-dasharray: 4 3; } .flussbild .fb-nr { font-size: 10px; font-weight: 700; fill: var(--panel); } .flussbild .fb-nrkreis { fill: var(--ink-2); } .flussbild .fb-nrkreis.jetzt { fill: var(--accent); } /* -------------------------------------------------------- Nachweiskette -- */ .nachweiskette { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: var(--t-klein); } .nachweiskette .ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ok); display: inline-block; } .nachweiskette.bad .ring { border-color: var(--bad); } .nachweiskette code { font-family: var(--mono); font-size: 11px; color: var(--ink-2); } /* ------------------------------------------------------------- Abzweig --- */ .abzweig-block { border: 1px dashed var(--bad); border-radius: var(--radius); background: var(--bad-bg); padding: 12px 14px; display: grid; gap: 6px; } .abzweig-block .was { font-weight: 650; color: var(--bad); font-size: 14px; } .abzweig-block .zeile { font-size: 13px; color: var(--ink-2); max-width: var(--mass-text); } /* -------------------------------------------------------------- Ringe ---- */ .ring-quote { display: inline-grid; place-items: center; } .ring-quote svg { display: block; } .ring-quote .rq-bahn { fill: none; stroke: var(--line); } .ring-quote .rq-wert { fill: none; stroke: var(--accent); stroke-linecap: round; } .ring-quote.ok .rq-wert { stroke: var(--ok); } .ring-quote.warn .rq-wert { stroke: var(--warn); } .ring-quote.bad .rq-wert { stroke: var(--bad); } .ring-quote .rq-text { font-size: 13px; font-weight: 650; fill: var(--ink); } .ring-quote .rq-unter { font-size: 9px; fill: var(--ink-3); } /* ---------------------------------------------------------- Verlauf ------ */ .verlauf { display: block; width: 100%; height: 34px; } .verlauf .vl-linie { fill: none; stroke: var(--accent); stroke-width: 1.6; } .verlauf .vl-flaeche { fill: var(--accent-2); stroke: none; } .verlauf .vl-punkt { fill: var(--accent); } /* =========================================================== Anzeigebausteine Gehört an das Ende von shared/ablauf.css — dort liegen bereits .ring-quote und .verlauf, und beide Oberflächen laden die Datei ohnehin. Kein bestehender Selektor wird überschrieben; ergänzt werden nur .ring-quote (zwei Zustände) und .verlauf (feste Bildmasse). Alle Farben kommen aus den Marken in base.css, damit der Dunkelmodus mitläuft, ohne dass irgendwo eine zweite Palette entsteht. */ /* Die vier Töne, einmal für alle Bausteine. Hintergrund ist bewusst getönt und nicht gesättigt: die Fläche soll den Blick führen, nicht schreien. */ .ton-ok { --tf: var(--ok); --tb: var(--ok-bg); } .ton-warn { --tf: var(--warn); --tb: var(--warn-bg); } .ton-bad { --tf: var(--bad); --tb: var(--bad-bg); } .ton-leer { --tf: var(--idle); --tb: var(--idle-bg); } /* ------------------------------------------------------------- Kennzahl -- */ .kennzahl { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: var(--radius); padding: 13px 15px 14px; box-shadow: var(--shadow); color: inherit; text-decoration: none; min-width: 0; } a.kennzahl:hover { text-decoration: none; border-color: var(--line-strong); } a.kennzahl:hover .v { color: var(--accent); } .kennzahl.ton-ok { border-top-color: var(--ok); } .kennzahl.ton-warn { border-top-color: var(--warn); } .kennzahl.ton-bad { border-top-color: var(--bad); } .kennzahl .k { font-size: var(--t-mikro, 11.5px); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; } .kennzahl .zeile { display: flex; align-items: flex-end; gap: 10px; justify-content: space-between; } .kennzahl .v { font-size: var(--t-zahl, 30px); font-weight: 650; line-height: 1.05; letter-spacing: -.8px; font-variant-numeric: tabular-nums; } .kennzahl.gross .v { font-size: calc(var(--t-zahl, 30px) * 1.3); } .kennzahl .v .einheit { font-size: .45em; font-weight: 600; color: var(--ink-3); margin-left: 3px; } .kennzahl.ton-ok .v { color: var(--ok); } .kennzahl.ton-warn .v { color: var(--warn); } .kennzahl.ton-bad .v { color: var(--bad); } /* Ohne Messwert bleibt der Strich in Tinte, nicht in einer Zustandsfarbe — und er schlaegt die Tonregeln darueber, damit ein grauer Kasten grau bleibt. */ .kennzahl .v.ungemessen { color: var(--ink-3); } .kennzahl .s { font-size: var(--t-klein, 12.5px); color: var(--ink-2); line-height: 1.4; } .kennzahl .s.leise { color: var(--ink-3); } /* Trendzeile — grau, solange niemand gesagt hat, welche Richtung gut ist. */ .trend { font-size: var(--t-klein, 12.5px); color: var(--ink-3); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 3px; } .trend .pfeil { font-size: 1.05em; line-height: 1; } .trend .seit { color: var(--ink-3); font-weight: 400; } .trend.gut { color: var(--ok); } .trend.schlecht { color: var(--bad); } /* ---------------------------------------------------------------- Ampel -- */ .ampel { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 20px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--tb, var(--idle-bg)); color: var(--tf, var(--idle)); } .ampel .punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 0 3px var(--tb, var(--idle-bg)); margin: 0 2px; } .ampel.gross { font-size: 13px; padding: 4px 12px 4px 10px; } .ampel.gross .punkt { width: 9px; height: 9px; } /* Nur der Punkt: für Spalten, in denen das Wort schon nebenan steht. */ .ampel.nurpunkt { background: none; padding: 0 4px; } .ampel.nurpunkt .punkt { margin: 0; } /* ----------------------------------------------------------- Fortschritt -- */ .fortschritt { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .fortschritt .kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--t-klein, 12.5px); } .fortschritt .kopf .b { color: var(--ink-2); font-weight: 600; } .fortschritt .kopf .z { color: var(--ink-3); font-variant-numeric: tabular-nums; } /* .bahn steht auch allein (kompakte Fassung in Tabellenzellen). */ .bahn { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; display: flex; min-width: 60px; } .bahn .stueck { display: block; height: 100%; background: var(--accent); } .bahn .stueck.ton-ok { background: var(--ok); } .bahn .stueck.ton-warn { background: var(--warn); } .bahn .stueck.ton-bad { background: var(--bad); } /* Nicht gemessen ist gestreift, nicht leer: eine leere Bahn liest sich als "null Prozent", und das ist eine Behauptung über einen unbekannten Wert. */ .bahn.ungemessen { background: var(--streifen, var(--line-2)), var(--line-2); } .fortschritt .legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--t-mikro, 11.5px); color: var(--ink-3); } .fortschritt .legende .posten { display: inline-flex; align-items: center; gap: 5px; } .fortschritt .legende .punkt { width: 7px; height: 7px; border-radius: 2px; background: var(--idle); flex: none; } .fortschritt .legende .posten.ton-ok .punkt { background: var(--ok); } .fortschritt .legende .posten.ton-warn .punkt { background: var(--warn); } .fortschritt .legende .posten.ton-bad .punkt { background: var(--bad); } /* ------------------------------------------------------- Ring (Ergänzung) -- */ /* .ring-quote, .rq-bahn, .rq-wert, .rq-text, .rq-unter stehen bereits weiter oben in dieser Datei. Hier kommen nur die beiden neuen Fälle dazu. */ .ring-quote.akzent .rq-wert { stroke: var(--accent); } .ring-quote .rq-text { font-variant-numeric: tabular-nums; } .ring-quote.klein .rq-text { font-weight: 600; } /* "nicht gemessen": gestrichelte Bahn, kein Wertbogen, Strich statt Zahl. */ .ring-quote:not(.ok):not(.warn):not(.bad):not(.akzent):not(.eigen) .rq-text { fill: var(--ink-3); } /* --------------------------------------------------- Verlauf (Ergänzung) -- */ /* Feste Bildmasse statt gedehnter viewBox: sonst wird aus dem Endpunkt eine Ellipse und aus der Steigung eine Aussage über die Fensterbreite. */ .verlaufbild { display: block; overflow: visible; } .verlaufbild.dehnbar { width: 100%; height: 34px; } .verlaufbild .vl-linie { fill: none; stroke: var(--accent); stroke-width: 1.6; } .verlaufbild .vl-flaeche { fill: var(--accent-2); stroke: none; } .verlaufbild .vl-punkt { fill: var(--accent); } .verlaufbild .vl-erst { fill: var(--panel); stroke: var(--accent); stroke-width: 1; } .verlaufbild.ton-ok .vl-linie, .verlaufbild.ton-ok .vl-punkt { stroke: var(--ok); fill: none; } .verlaufbild.ton-warn .vl-linie, .verlaufbild.ton-warn .vl-punkt { stroke: var(--warn); fill: none; } .verlaufbild.ton-bad .vl-linie, .verlaufbild.ton-bad .vl-punkt { stroke: var(--bad); fill: none; } .verlaufbild.ton-ok .vl-punkt { fill: var(--ok); } .verlaufbild.ton-warn .vl-punkt { fill: var(--warn); } .verlaufbild.ton-bad .vl-punkt { fill: var(--bad); } .verlaufbild.ton-ok .vl-flaeche { fill: var(--ok-bg); } .verlaufbild.ton-warn .vl-flaeche { fill: var(--warn-bg); } .verlaufbild.ton-bad .vl-flaeche { fill: var(--bad-bg); } .verlaufblock { display: inline-flex; flex-direction: column; gap: 2px; } .verlaufblock .kopf { display: flex; align-items: baseline; gap: 8px; } .verlaufblock .kopf .wert { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } .verlaufleer { color: var(--ink-3); } /* ----------------------------------------------------------- Balkengruppe -- */ .balkengruppe { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .balkengruppe .balken { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr auto; align-items: center; gap: 10px; padding: 3px 4px; border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-size: 13px; } a.balken:hover { background: var(--line-2); text-decoration: none; } a.balken:hover .name { color: var(--accent); } .balkengruppe .name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .balkengruppe .bahn { height: 12px; border-radius: 3px; min-width: 40px; } .balkengruppe .wert { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); min-width: 3.5ch; text-align: right; } .balkengruppe .restzeile { font-size: var(--t-klein, 12.5px); color: var(--ink-3); padding: 4px 4px 0; border-top: 1px solid var(--line-2); margin-top: 3px; } /* --------------------------------------------------------------- Massnahme -- */ .massnahme { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--idle); border-radius: var(--radius); padding: 10px 13px; box-shadow: var(--shadow); } .massnahme + .massnahme { margin-top: 8px; } .massnahme.ton-warn { border-left-color: var(--warn); } .massnahme.ton-bad { border-left-color: var(--bad); } .massnahme.still { background: var(--panel-2); border-left-color: var(--line-strong); } .massnahme.still .titel { color: var(--ink-2); font-weight: 600; } /* Der Klappgriff darf nicht wie ein Erklärtext aussehen — base.css macht jedes summary klein und grau, und das ist hier die Überschrift. Das Standarddreieck fällt weg, weil display:flex es in Chrome ohnehin verschluckt; an seiner Stelle steht ein Winkel rechts in der Titelzeile, der sich beim Öffnen dreht. */ .massnahme > summary, .massnahme > .kopf { display: flex; flex-direction: column; gap: 5px; font-size: inherit; color: inherit; padding: 0; } .massnahme > summary { cursor: pointer; list-style: none; } .massnahme > summary::-webkit-details-marker { display: none; } .massnahme > summary .titelzeile::after { content: "›"; margin-left: auto; color: var(--ink-3); font-size: 17px; line-height: 1; display: inline-block; transition: transform .12s ease; } .massnahme[open] > summary .titelzeile::after { transform: rotate(90deg); } .massnahme .titelzeile { display: flex; align-items: baseline; gap: 8px; } .massnahme .titel { font-size: 14px; font-weight: 650; color: var(--ink); } a.titel:hover { text-decoration: underline; } .massnahme .marken { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .massnahme .marken .tag.erledigt { color: var(--ok); border-color: var(--ok); } .massnahme .satz { font-size: 13px; color: var(--ink-2); max-width: var(--mass-text, 68ch); } .massnahme .tiefer { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 9px; } .massnahme .tiefer .k { font-size: var(--t-mikro, 11.5px); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 3px; } .massnahme .warum p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: var(--mass-text, 68ch); } .massnahme .schritte ol { margin: 0; padding-left: 20px; } .massnahme .schritte li { font-size: 13px; line-height: 1.5; color: var(--ink-2); padding: 1px 0; max-width: var(--mass-text, 68ch); } .massnahme .quelle { font-size: var(--t-mikro, 11.5px); color: var(--ink-3); } .massnahme .fuss { display: flex; gap: 8px; flex-wrap: wrap; } /* Enge Fenster: die Kennzahlen brechen um, die Balkennamen werden schmaler. */ @media (max-width: 760px) { .balkengruppe .balken { grid-template-columns: minmax(4.5rem, 8rem) 1fr auto; } .kennzahl .v { font-size: calc(var(--t-zahl, 30px) * .8); } } /* ------------------------------------------------------ Fernwartungsrahmen */ /* Der Kasten um das eingebettete Fenster: ziehbar am Griff unten rechts, und im Vollbild ohne Rand, damit der Desktop den ganzen Schirm bekommt. */ .mesh-kasten { position: relative; } .mesh-kasten::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; pointer-events: none; background: linear-gradient(135deg, transparent 45%, var(--ink-3) 45%, var(--ink-3) 55%, transparent 55%), linear-gradient(135deg, transparent 70%, var(--ink-3) 70%, var(--ink-3) 80%, transparent 80%); opacity: .7; } .mesh-kasten:fullscreen { height: 100vh !important; border: 0; border-radius: 0; } .mesh-kasten:fullscreen::after { display: none; } /* ------------------------------------------------------------ Dialoge ----- */ /* Der Grundstil begrenzt jeden Dialog auf 560 Pixel. Für eine Bestätigung ist das richtig, für einen Editor mit Tabelle nicht: dort entstand ein waagerechter Scrollbalken, und der Text lief links aus dem Bild. Ein Dialog mit der Klasse 'breit' darf mehr Platz nehmen und scrollt senkrecht statt waagerecht. */ dialog.breit { max-width: min(1080px, 94vw); } dialog.breit .body { max-height: min(72vh, 900px); overflow-y: auto; overflow-x: hidden; } /* Was trotzdem breiter ist als der Dialog — eine Tabelle mit langen Pfaden — scrollt in seinem eigenen Kasten, nicht im ganzen Fenster. */ dialog.breit .body table { width: 100%; } dialog .tabellenkasten { overflow-x: auto; } /* Der Richtlinieneditor: eine Zeile je Einstellung, kein Tabellenraster. Lange Registrierungspfade brechen um, statt die Spaltenbreite zu sprengen. */ .einstellungsliste { display: grid; gap: 10px; } .einstellungszeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(180px, .9fr); gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 12px 14px; } .einstellungszeile .name { font-weight: 650; } .einstellungszeile .pfad { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; margin-top: 4px; } .einstellungszeile .feld { display: grid; gap: 6px; } .einstellungszeile .feld input, .einstellungszeile .feld select { width: 100%; } .einstellungszeile .merkmale { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } @media (max-width: 720px) { .einstellungszeile { grid-template-columns: 1fr; } }