/* HIT Regel-Server - Admin-Oberflaeche * * Dieselbe Gestaltung wie die Kundenplattform: Papier und Tinte. Ein warmer, * heller Grund, dunkle Schrift, ein einziger Akzent in Terrakotta fuer Links * und Hervorhebungen. Flaechen werden durch Haarlinien getrennt, nicht durch * Schatten. Seitentitel stehen in einer Serifenschrift, Daten wie Schluessel, * Versionen und Pfade in Monospace - drei Stimmen, die sich nicht ins Gehege * kommen. * * Es werden ausschliesslich Systemschriften benutzt. Keine externen Fonts, * kein Nachladen von fremden Servern, kein Warten. * * Farbschema: Standard ist die Systemeinstellung. Ein Umschalter im Kopf * setzt data-theme="light" bzw. "dark" am ; der Wert wird im Browser * gespeichert (assets/app.js). Deshalb gibt es jede Farbe dreimal: hell, * dunkel per Systemeinstellung, dunkel per Umschalter. * * Die Klassen der Vorlagen sind dieselben wie im Update-Server (.state, .table, * .form-grid, .code ...) - die Kundenplattform-Namen (.badge, .daten) gibt * es daneben, damit sich Vorlagen zwischen beiden Anwendungen austauschen * lassen. */ /* Farben und Masse -------------------------------------------------- */ :root { color-scheme: light; --papier: #f4f1ea; --papier-glanz: rgba(168, 72, 31, .07); --flaeche: #fdfcf9; --flaeche-glas: rgba(253, 252, 249, .84); --flaeche-2: #efebe3; --flaeche-3: #e7e2d8; --eingabe: #ffffff; --tinte: #1c1b19; --tinte-2: #46443f; --gedaempft: #6e6b63; --linie: #e3ded4; --linie-stark: #cdc7ba; --akzent: #a8481f; --akzent-hover: #8a3814; --akzent-flaeche: #f6e6dd; --akzent-linie: rgba(168, 72, 31, .35); --fokus-ring: rgba(168, 72, 31, .22); --knopf: #1c1b19; --knopf-hover: #34322d; --knopf-text: #f7f4ed; --ok: #2f6b3d; --ok-flaeche: #e6f0e6; --ok-linie: #bcd6c0; --warnung: #8a5a00; --warnung-flaeche: #f8efd9; --warnung-linie: #e6d3a3; --fehler: #9e2a22; --fehler-flaeche: #f9e6e3; --fehler-linie: #ebbcb6; --info: #2c4f78; --info-flaeche: #e6edf6; --info-linie: #bccbe0; --log-grund: #1c1b19; --log-text: #e9e5dc; --schatten-scroll: rgba(28, 27, 25, .16); --schatten-schwebend: 0 1px 2px rgba(28, 27, 25, .05), 0 12px 32px -16px rgba(28, 27, 25, .25); --zeige-sonne: block; --zeige-mond: none; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2346443f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); --schrift: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Georgia, serif; --schrift-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; --radius: 12px; --radius-klein: 8px; --kopf-hoehe: 60px; --breite: 1180px; --breite-schmal: 680px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --papier: #141312; --papier-glanz: rgba(226, 130, 90, .10); --flaeche: #1c1b19; --flaeche-glas: rgba(20, 19, 18, .82); --flaeche-2: #242220; --flaeche-3: #2d2b27; --eingabe: #191816; --tinte: #ece8df; --tinte-2: #c9c4b8; --gedaempft: #8f8a7e; --linie: #2e2c28; --linie-stark: #403d37; --akzent: #e2825a; --akzent-hover: #f09a74; --akzent-flaeche: #3a261d; --akzent-linie: rgba(226, 130, 90, .4); --fokus-ring: rgba(226, 130, 90, .28); --knopf: #ece8df; --knopf-hover: #ffffff; --knopf-text: #161513; --ok: #7fc48f; --ok-flaeche: #1c2b1f; --ok-linie: #2f4a34; --warnung: #e2b25a; --warnung-flaeche: #2e2614; --warnung-linie: #4d3f1c; --fehler: #ef8a80; --fehler-flaeche: #331c1a; --fehler-linie: #5a2c28; --info: #8fb3e0; --info-flaeche: #1b2533; --info-linie: #2e3f57; --log-grund: #0e0e0d; --log-text: #d9d4c9; --schatten-scroll: rgba(0, 0, 0, .55); --schatten-schwebend: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .7); --zeige-sonne: none; --zeige-mond: block; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c9c4b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { color-scheme: dark; --papier: #141312; --papier-glanz: rgba(226, 130, 90, .10); --flaeche: #1c1b19; --flaeche-glas: rgba(20, 19, 18, .82); --flaeche-2: #242220; --flaeche-3: #2d2b27; --eingabe: #191816; --tinte: #ece8df; --tinte-2: #c9c4b8; --gedaempft: #8f8a7e; --linie: #2e2c28; --linie-stark: #403d37; --akzent: #e2825a; --akzent-hover: #f09a74; --akzent-flaeche: #3a261d; --akzent-linie: rgba(226, 130, 90, .4); --fokus-ring: rgba(226, 130, 90, .28); --knopf: #ece8df; --knopf-hover: #ffffff; --knopf-text: #161513; --ok: #7fc48f; --ok-flaeche: #1c2b1f; --ok-linie: #2f4a34; --warnung: #e2b25a; --warnung-flaeche: #2e2614; --warnung-linie: #4d3f1c; --fehler: #ef8a80; --fehler-flaeche: #331c1a; --fehler-linie: #5a2c28; --info: #8fb3e0; --info-flaeche: #1b2533; --info-linie: #2e3f57; --log-grund: #0e0e0d; --log-text: #d9d4c9; --schatten-scroll: rgba(0, 0, 0, .55); --schatten-schwebend: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -16px rgba(0, 0, 0, .7); --zeige-sonne: none; --zeige-mond: block; --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23c9c4b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); } /* Grundlagen --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 16px); } body { margin: 0; min-height: 100vh; min-height: 100dvh; background-color: var(--papier); /* Ein Hauch Akzent oben - gibt der Seite Tiefe, ohne dass es ein Bild braucht. */ background-image: radial-gradient(1100px 380px at 50% -120px, var(--papier-glanz), transparent 70%); background-repeat: no-repeat; color: var(--tinte); font-family: var(--schrift); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; display: flex; flex-direction: column; } main { flex: 1 0 auto; width: 100%; } .wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: var(--breite-schmal); } main.wrap { padding-top: 36px; padding-bottom: 48px; } a { color: var(--akzent); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--akzent-linie); text-underline-offset: 3px; } a:hover { color: var(--akzent-hover); text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } ::selection { background: var(--akzent-flaeche); color: var(--tinte); } @media (prefers-reduced-motion: no-preference) { a, .button, button, input, select, textarea, .theme-toggle, .mainnav a, summary { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease; } } /* Schrift ------------------------------------------------------------ */ h1, h2, h3, h4 { color: var(--tinte); } h1 { font-family: var(--schrift-serif); font-weight: 400; font-size: 2rem; line-height: 1.15; letter-spacing: -.012em; margin: 0 0 6px; } /* Abschnittstitel in Flaechen: kleines, gesperrtes Etikett mit Haarlinie. */ h2 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gedaempft); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); } /* Mehrere Abschnitte in einer Flaeche: die weiteren bekommen Luft nach oben. */ .card > * + h2, .block + .block > h2 { margin-top: 28px; } /* Unterabschnitte innerhalb einer Flaeche: eine Haarlinie trennt sie vom Vorhergehenden - ausser sie stehen ganz oben. */ h3 { font-size: 14px; font-weight: 600; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid var(--linie); } h2 + h3, h3:first-child, .notice + h3, .page-head + h3 { margin-top: 0; padding-top: 0; border-top: 0; } h4 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; } p { margin: 0 0 12px; } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } ul, ol { margin: 0 0 12px; padding-left: 22px; } li { margin-bottom: 4px; } code { font-family: var(--schrift-mono); font-size: .9em; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 5px; padding: 1px 5px; overflow-wrap: anywhere; } pre code { background: none; border: 0; padding: 0; font-size: inherit; } .muted { color: var(--gedaempft); } .small { font-size: 13px; } .nowrap { white-space: nowrap; } .right { text-align: right; } .mono { font-family: var(--schrift-mono); font-size: .93em; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); margin: 0 0 10px; } /* Sprunglink fuer Tastatur und Vorleseprogramme - erscheint erst beim Fokus. */ .skip { position: absolute; top: -100px; left: 16px; z-index: 60; padding: 9px 16px; border-radius: 999px; background: var(--tinte); color: var(--papier); font-size: 14px; font-weight: 500; text-decoration: none; } .skip:focus { top: 12px; outline-color: var(--akzent); } /* Kopfzeile ---------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--linie); } /* Der Glaseffekt liegt auf einem eigenen Element hinter dem Inhalt. */ .topbar::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: var(--flaeche-glas); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); } .topbar-inner { display: flex; align-items: center; gap: 28px; min-height: var(--kopf-hoehe); } .brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--tinte); font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; } .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand:hover { color: var(--tinte); } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--tinte); color: var(--papier); font-family: var(--schrift-serif); font-size: 17px; font-weight: 400; line-height: 1; flex-shrink: 0; } .brand-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); border: 1px solid var(--akzent-linie); border-radius: 999px; padding: 2px 8px; margin-left: 2px; } .mainnav { display: flex; align-items: stretch; gap: 22px; min-height: var(--kopf-hoehe); } .mainnav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--tinte-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; } .mainnav a:hover { color: var(--tinte); } .mainnav a.is-active { color: var(--tinte); } /* Die aktive Seite bekommt einen Strich, der auf der Haarlinie des Kopfes sitzt. */ .mainnav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--akzent); border-radius: 2px 2px 0 0; } .topbar-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--gedaempft); flex-shrink: 0; } .topbar-tools .user-name { color: var(--tinte-2); text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-tools .user-name:hover { color: var(--akzent); } .topbar-tools .user-name em { font-style: normal; color: var(--gedaempft); } /* Der Admin-Bereich: Akzentstreifen oben und die Navigation als eigene Zeile, die auf schmalen Bildschirmen seitlich scrollt. */ .topbar.is-admin { border-top: 2px solid var(--akzent); } .topbar.is-admin .topbar-inner { flex-wrap: wrap; gap: 0 28px; } .topbar.is-admin .mainnav { order: 3; flex-basis: 100%; min-height: 44px; gap: 0; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--linie); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); } .topbar.is-admin .mainnav::-webkit-scrollbar { display: none; } .topbar.is-admin .mainnav a { padding: 0 11px; font-size: 13.5px; } .topbar.is-admin .mainnav a:first-child { padding-left: 0; } .topbar.is-admin .mainnav a:last-child { padding-right: 32px; } .topbar.is-admin .mainnav a.is-active::after { left: 11px; right: 11px; } .topbar.is-admin .mainnav a:first-child.is-active::after { left: 0; } /* Umschalter Hell/Dunkel */ .theme-toggle { display: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--linie-stark); border-radius: 999px; background: transparent; color: var(--tinte-2); cursor: pointer; flex-shrink: 0; } /* Ohne JavaScript gibt es nichts umzuschalten - dann bleibt der Knopf weg. */ .js .theme-toggle { display: inline-grid; } .theme-toggle:hover { background: var(--flaeche-2); color: var(--tinte); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: var(--zeige-sonne); } .theme-toggle .icon-moon { display: var(--zeige-mond); } .theme-toggle-floating { position: fixed; top: 16px; right: 16px; z-index: 40; background: var(--flaeche-glas); } /* Flaechen ----------------------------------------------------------- */ .card { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 22px; } .card > :last-child { margin-bottom: 0; } .card .card { background: transparent; } .card > p + form, .card > .notice + form, .card > .daten + form, .card > table + form { margin-top: 22px; } .card-narrow { width: 100%; max-width: 440px; } .card-wide { width: 100%; max-width: 640px; } /* Ein Abschnitt in einer Flaeche (z. B. auf der Kontoseite). */ .block + .block { margin-top: 28px; padding-top: 4px; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; align-items: start; margin-bottom: 22px; } .grid > * { min-width: 0; } .grid > .card { margin-bottom: 0; } .grid > div > .card:last-child { margin-bottom: 0; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 26px; flex-wrap: wrap; } .page-head > div:first-child { min-width: 0; } .page-head p { margin: 0; } .page-head .muted { font-size: 15px; } .page-head h1 { overflow-wrap: anywhere; } .page-head form { margin: 0; } .head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* Kennzahlen: ein zusammenhaengender Streifen mit Haarlinien dazwischen, keine einzelnen Kaestchen. */ .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; } .kpi { background: var(--flaeche); padding: 20px 22px 18px; min-width: 0; } .kpi .zahl { font-family: var(--schrift-serif); font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi .titel { margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gedaempft); } .kpi .titel a { color: inherit; text-decoration: none; } .kpi .titel a:hover { color: var(--akzent); } /* Tabellen ----------------------------------------------------------- */ table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; } th:first-child, td:first-child { padding-left: 4px; } th:last-child, td:last-child { padding-right: 4px; } thead th { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); white-space: nowrap; } /* Zeilenkoepfe in Schluessel-Wert-Tabellen (Diagnose, Paketdaten): ein ruhiges Etikett links, der Wert rechts. */ tbody th { width: 1%; padding-right: 24px; font-weight: 500; color: var(--gedaempft); white-space: nowrap; } tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; } tbody tr:hover td { background: var(--flaeche-2); } td .state, td .badge { vertical-align: middle; } td form { margin: 0; } td p:last-child { margin-bottom: 0; } /* Die grosse Liste: eine eigene Flaeche mit Kopfzeile. Der Rahmen ist ein
um die Tabelle - so kann sie auf schmalen Bildschirmen seitlich scrollen, statt die Seite zu sprengen. */ .table-wide { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 22px; } .table-wide table { width: 100%; min-width: 100%; margin: 0; } .table-wide thead th { background: var(--flaeche-2); } .table-wide th:first-child, .table-wide td:first-child { padding-left: 20px; } .table-wide th:last-child, .table-wide td:last-child { padding-right: 20px; } .table-wide tbody tr:hover td { background: var(--flaeche-2); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; } .table-scroll table { min-width: 100%; } /* Formulare ---------------------------------------------------------- */ label { display: block; margin-bottom: 18px; font-size: 13.5px; font-weight: 500; color: var(--tinte); } /* Hinweis unter einem Feld - wie in den Vorlagen, span.hint wie in der Kundenplattform. */ label > small, label > span.hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 400; color: var(--gedaempft); line-height: 1.45; } label .state, label .badge { margin-left: 6px; vertical-align: middle; } input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="search"], select, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 13px; border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--eingabe); color: var(--tinte); font: inherit; font-size: 15px; font-weight: 400; line-height: 1.4; appearance: none; -webkit-appearance: none; } input::placeholder, textarea::placeholder { color: var(--gedaempft); opacity: .8; } input:hover, select:hover, textarea:hover { border-color: var(--gedaempft); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--fokus-ring); } input:disabled, select:disabled, textarea:disabled { background: var(--flaeche-2); color: var(--gedaempft); cursor: not-allowed; } select { padding-right: 38px; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } select[multiple] { padding-right: 13px; background-image: none; } textarea { min-height: 110px; resize: vertical; font-family: var(--schrift-mono); font-size: 14px; } input.mono, textarea.mono { font-family: var(--schrift-mono); font-size: 14px; } input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; margin: 0; accent-color: var(--akzent); flex-shrink: 0; } label.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; } label.check input { margin-top: 2px; width: 17px; } label.check span { flex: 1; } label.check span small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--gedaempft); line-height: 1.45; } /* Felder nebeneinander. */ .form-grid, .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 18px; } .form-grid > *, .field-row > * { min-width: 0; } .form-grid > .wide, .field-row > .wide { grid-column: 1 / -1; } /* Formularabschnitte: kein Kasten, sondern ein Titel mit Haarlinie. */ fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; } legend { display: block; width: 100%; padding: 0 0 10px; margin: 0 0 18px; font-family: var(--schrift-serif); font-size: 19px; font-weight: 400; color: var(--tinte); border-bottom: 1px solid var(--linie); } legend .muted { font-family: var(--schrift); font-size: 13px; } /* Auf- und zuklappbare Abschnitte. */ details { margin: 0 0 18px; } details:last-child { margin-bottom: 0; } summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tinte-2); padding: 8px 0; list-style: none; } summary::-webkit-details-marker { display: none; } summary::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); } details[open] > summary::before { transform: rotate(45deg); margin-bottom: 4px; } summary:hover { color: var(--tinte); } details > :not(summary) { margin-top: 10px; } /* Schaltflaechen ----------------------------------------------------- */ .button, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 7px 17px; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche); color: var(--tinte); font: inherit; font-family: var(--schrift); font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .button:hover, button:hover { background: var(--flaeche-2); border-color: var(--gedaempft); color: var(--tinte); } .button:active, button:active { transform: translateY(1px); } .button-primary, button.button-primary { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); } .button-primary:hover, button.button-primary:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); color: var(--knopf-text); } .button-danger, button.button-danger { border-color: var(--fehler-linie); color: var(--fehler); } .button-danger:hover, button.button-danger:hover { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--fehler); } .button-small, button.button-small { min-height: 31px; padding: 4px 13px; font-size: 13px; } .button[disabled], button[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .button svg, button svg { width: 15px; height: 15px; flex-shrink: 0; } /* Ein Knopf, der direkt einem Formular folgt: etwas Luft. */ .form-grid + .button, .form-grid + button, label + .button, label + button, p + form .button:only-child { margin-top: 4px; } .actions { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; } .actions > a:not(.button) { font-size: 14px; } /* In einer Tabellenzelle bleiben die Knoepfe in der Zeile. */ td.actions { display: table-cell; white-space: nowrap; } td.actions > form, td.actions > .button { display: inline-flex; vertical-align: middle; margin-right: 6px; } td.actions > :last-child { margin-right: 0; } form.inline { display: inline; } /* Einzelne Handgriffe nebeneinander - jeder ein kleines Formular. */ .action-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; } .action-row form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-2); } /* Ein Formular, das nur aus einem Knopf besteht, braucht keinen Kasten - den bekommen nur Formulare mit sichtbaren Eingabefeldern. */ .action-row form { padding: 0; border: 0; background: transparent; } .action-row form:has(input:not([type="hidden"]), select, textarea) { padding: 10px 12px; border: 1px solid var(--linie); background: var(--flaeche-2); } .action-row input, .action-row select { margin-top: 0; width: auto; min-width: 120px; } .action-row label { margin-bottom: 0; } /* Kopieren-Knopf neben Schluesseln - nur sichtbar, wenn JavaScript laeuft. */ .copy { display: none; } .js .copy { display: inline-flex; min-height: 30px; padding: 3px 11px; font-size: 12.5px; color: var(--tinte-2); background: transparent; } .js .copy.is-done { color: var(--ok); border-color: var(--ok-linie); background: var(--ok-flaeche); } /* Meldungen ---------------------------------------------------------- */ .notice { position: relative; padding: 13px 16px 13px 20px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche); margin-bottom: 22px; font-size: 14px; line-height: 1.5; overflow: hidden; } .notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gedaempft); } .notice-success { background: var(--ok-flaeche); border-color: var(--ok-linie); } .notice-success::before { background: var(--ok); } .notice-error { background: var(--fehler-flaeche); border-color: var(--fehler-linie); } .notice-error::before { background: var(--fehler); } .notice-warning { background: var(--warnung-flaeche); border-color: var(--warnung-linie); } .notice-warning::before { background: var(--warnung); } .notice-info { background: var(--info-flaeche); border-color: var(--info-linie); } .notice-info::before { background: var(--info); } .notice ul { margin: 6px 0 0; padding-left: 20px; } .notice p:last-child { margin-bottom: 0; } .notice code { background: rgba(127, 127, 127, .12); border-color: transparent; } .notice form { margin-top: 10px; } /* Kennzeichnungen ---------------------------------------------------- */ .state, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; background: var(--flaeche-2); color: var(--tinte-2); border: 1px solid var(--linie); white-space: nowrap; vertical-align: middle; } .state::before, .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; flex-shrink: 0; } .state-muted { color: var(--gedaempft); } .state-ok, .badge-ok { background: var(--ok-flaeche); color: var(--ok); border-color: var(--ok-linie); } .state-warn, .badge-warn { background: var(--warnung-flaeche); color: var(--warnung); border-color: var(--warnung-linie); } .state-error, .badge-error { background: var(--fehler-flaeche); color: var(--fehler); border-color: var(--fehler-linie); } .state-info, .badge-info { background: var(--info-flaeche); color: var(--info); border-color: var(--info-linie); } /* Kleine Marke ohne Punkt - fuer Rollen, Quellen und Kuerzel. */ .tag { display: inline-block; padding: 0 7px; border: 1px solid var(--linie-stark); border-radius: 5px; font-family: var(--schrift-mono); font-size: 11.5px; line-height: 1.7; color: var(--tinte-2); vertical-align: middle; } a.tag { text-decoration: none; } a.tag:hover { border-color: var(--akzent); color: var(--akzent); } /* Die gepackte Fassung, eine Fassung im Rueckstand, eine stille Website. */ .tag-aktuell { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-flaeche); } .tag-warn { border-color: var(--warnung-linie); color: var(--warnung); background: var(--warnung-flaeche); } .tag-still { opacity: .55; } /* Verteilung: Marken nebeneinander, umbrechend. */ .verteilung { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; } td .verteilung { margin-top: 0; } /* Anteil einer Fassung als schmaler Balken neben der Zahl. */ .balken-zelle { min-width: 140px; } .balken { display: inline-block; width: 90px; height: 8px; margin-right: 8px; border: 1px solid var(--linie-stark); border-radius: 4px; background: var(--flaeche-2); vertical-align: middle; overflow: hidden; } .balken-fuellung { height: 100%; background: var(--akzent); } .zeit { white-space: nowrap; } tr.ist-still td { color: var(--gedaempft); } tr.ist-gewaehlt td { background: var(--akzent-flaeche); } /* Bibliothek: die Karte, wie die Suite sie zeigt - Symbol, Name, Kurzbeschreibung, Voraussetzungen, Knoepfe. Nur zur Ansicht. */ .bib-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; } .bib-karte { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-2); min-width: 0; } .card .bib-karte { background: var(--flaeche-2); } .bib-karte-inaktiv { opacity: .6; border-style: dashed; } .bib-kopf { display: flex; align-items: center; gap: 14px; min-width: 0; } .bib-titel { min-width: 0; } .bib-titel h4 { margin: 0 0 2px; font-size: 15px; overflow-wrap: anywhere; } .bib-titel h4 a { color: inherit; text-decoration: none; } .bib-titel h4 a:hover { color: var(--akzent); } .bib-symbol { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; object-fit: cover; background: var(--flaeche); border: 1px solid var(--linie); } .bib-platzhalter { display: flex; align-items: center; justify-content: center; font-family: var(--schrift-serif); font-size: 26px; color: var(--akzent); background: var(--akzent-flaeche); border-color: var(--akzent-linie); } .bib-text { margin: 0; font-size: 14px; line-height: 1.5; } .bib-voraussetzungen { overflow-wrap: anywhere; } .bib-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; } .bib-knoepfe .button { cursor: default; } .bib-knoepfe a.button { cursor: pointer; } /* Definitionslisten -------------------------------------------------- */ .daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 26px; margin: 0; font-size: 14px; } .daten dt { color: var(--gedaempft); } .daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } .daten.small { font-size: 13px; gap: 6px 18px; } /* Schluessel --------------------------------------------------------- */ .lizenzschluessel { display: inline-block; font-family: var(--schrift-mono); font-size: 15px; letter-spacing: .08em; color: var(--tinte); background: var(--flaeche-2); border: 1px dashed var(--linie-stark); border-radius: var(--radius-klein); padding: 7px 12px; user-select: all; -webkit-user-select: all; max-width: 100%; overflow-wrap: anywhere; } /* Code und Protokoll ------------------------------------------------- */ pre, .code { display: block; margin: 0; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 12px 14px; overflow-x: auto; font-family: var(--schrift-mono); font-size: 12.5px; line-height: 1.55; color: var(--tinte); white-space: pre; tab-size: 4; } .code-scroll { max-height: 420px; overflow-y: auto; } /* Das Protokoll: dunkel wie ein Terminal, in beiden Farbschemata. */ .log, pre.log { background: var(--log-grund); color: var(--log-text); border-color: transparent; white-space: pre-wrap; word-break: break-word; } p + .code, .notice + .code { margin-top: 12px; } .code + p { margin-top: 12px; } /* Blaettern ---------------------------------------------------------- */ .pager, .pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 18px 0 22px; font-size: 14px; } .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 4px 11px; border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--flaeche); color: var(--tinte); text-decoration: none; font-size: 13px; } .pagination a:hover { background: var(--flaeche-2); border-color: var(--gedaempft); } .pagination a.is-active { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); } /* Filterleiste ------------------------------------------------------- */ .filter { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; } .card > .filter { padding-bottom: 20px; border-bottom: 1px solid var(--linie); } .filter label { flex: 1 1 180px; margin-bottom: 0; min-width: 0; } .filter > input, .filter > select { flex: 1 1 180px; width: auto; min-width: 0; margin-top: 0; } .filter .button, .filter button { flex-shrink: 0; } /* Fusszeile ---------------------------------------------------------- */ .footer { flex-shrink: 0; color: var(--gedaempft); font-size: 12.5px; padding: 24px 24px 36px; border-top: 1px solid var(--linie); } .footer a { color: var(--gedaempft); text-decoration-color: var(--linie-stark); } .footer a:hover { color: var(--akzent); } /* Schlankes Layout (Anmeldung, Ersteinrichtung, Startseite, Fehler) ---- */ body.centered { align-items: center; justify-content: center; padding: 32px 20px; } .plain-wrap { width: 100%; max-width: 440px; margin: 0 auto; } .plain-wrap.plain-wrap-wide { max-width: 640px; } .plain-wrap .brand { justify-content: center; width: 100%; margin-bottom: 22px; font-size: 15px; } .plain-wrap main.card { margin-bottom: 0; padding: 28px 30px; } .plain-wrap h1 { font-size: 1.7rem; margin-bottom: 8px; } .plain-wrap .abstand { margin-top: 16px; } .plain-wrap .card .card { border: 0; padding: 0; margin: 0; } /* Abstaende ---------------------------------------------------------- */ .stack > * + * { margin-top: 22px; } .abstand { margin-top: 16px; } .abstand-oben-klein { margin-top: 8px; } /* Schmale Bildschirme ----------------------------------------------- */ @media (max-width: 900px) { .wrap { padding: 0 20px; } main.wrap { padding-top: 28px; padding-bottom: 40px; } } @media (max-width: 720px) { :root { --kopf-hoehe: 56px; } h1 { font-size: 1.65rem; } .card { padding: 20px 18px; } .kpi { padding: 16px 16px 14px; } .kpi .zahl { font-size: 2.1rem; } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); } .page-head { align-items: flex-start; flex-direction: column; margin-bottom: 22px; } .head-actions { width: 100%; } .daten { grid-template-columns: 1fr; gap: 2px 0; } .daten dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .daten dd { margin-bottom: 10px; } .daten dd:last-child { margin-bottom: 0; } tbody th { white-space: normal; } .filter label, .filter > input, .filter > select { flex-basis: 100%; } .filter .button, .filter button { flex: 1 1 auto; } .action-row form { flex: 1 1 100%; } /* iOS zoomt in Eingabefelder unter 16px hinein. */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], input[type="date"], input[type="search"], select, textarea { font-size: 16px; } .topbar-inner { gap: 14px; } .topbar-tools { gap: 8px; } .topbar-tools .user-name { max-width: 120px; } .topbar.is-admin .topbar-inner { gap: 0 16px; } .topbar.is-admin .mainnav a { font-size: 13px; } } @media (max-width: 480px) { .wrap { padding: 0 16px; } .card { padding: 18px 16px; border-radius: 10px; } .plain-wrap main.card { padding: 24px 20px; } .grid-3 { grid-template-columns: 1fr 1fr; } .grid-3 > :last-child:nth-child(odd) { grid-column: span 2; } th, td { padding: 9px 8px; } .table-wide th:first-child, .table-wide td:first-child { padding-left: 14px; } .table-wide th:last-child, .table-wide td:last-child { padding-right: 14px; } /* Schaltflaechen in Formularen nehmen die volle Breite; blosse Links bleiben Links. */ form .actions > .button, form .actions > button { flex: 1 1 auto; } .head-actions .button { flex: 1 1 auto; } .topbar .brand-name { max-width: 150px; } .topbar .brand-tag { display: none; } /* Auf dem Telefon reicht der Abmelden-Knopf; der Name steht unter Konto. */ .topbar-tools .user-name { display: none; } .footer { padding: 20px 16px 32px; } } /* Grobe Zeiger (Touch): Ziele etwas groesser. */ @media (pointer: coarse) { .button, button { min-height: 42px; } .button-small, button.button-small { min-height: 36px; } .theme-toggle { width: 40px; height: 40px; } } /* Druck --------------------------------------------------------------- */ @media print { body { background: #fff; color: #000; display: block; } .topbar, .footer, .theme-toggle, .head-actions, .actions, .copy, .filter, .pager, .pagination { display: none !important; } main.wrap { padding: 0; max-width: none; } .card, .table-wide, .grid-3 { border-color: #bbb; break-inside: avoid; box-shadow: none; } a { color: inherit; text-decoration: none; } } /* Regel-Server: Ergaenzungen --------------------------------------- */ /* Kaestchen fuer Ziele, Modifikatoren, Kanaele - mehrere nebeneinander. */ .check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px 16px; margin: 6px 0 18px; } .check-grid label.check { margin: 0; font-size: 13.5px; } .check-grid label.check code { font-size: .88em; } /* Ein Muster in der Regelliste: eine Zeile, der Rest wird abgeschnitten. */ .muster { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--schrift-mono); font-size: 12.5px; color: var(--tinte-2); } td.position { color: var(--gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; } tr.ist-aus td { color: var(--gedaempft); } tr.ist-aus td .muster { opacity: .6; } /* Pfeile zum Verschieben: kleine, ruhige Knoepfe in einer Reihe. */ .reihenfolge { display: inline-flex; gap: 4px; } .reihenfolge form { margin: 0; } .reihenfolge button { min-height: 26px; min-width: 26px; padding: 0 6px; font-size: 12px; line-height: 1; } /* Eine Ausnahme im Regel-Editor: ein Kasten mit den Feldern einer Bedingung. */ .ausnahme { border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-2); padding: 14px 16px 4px; margin-bottom: 14px; } .ausnahme-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--tinte-2); } .ausnahme textarea { min-height: 60px; } /* Ergebnis des Muster-Testers. */ .treffer { border-left: 4px solid var(--ok); } .kein-treffer { border-left: 4px solid var(--gedaempft); } .test-wert { font-family: var(--schrift-mono); font-size: 12.5px; white-space: pre-wrap; word-break: break-all; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px; margin: 6px 0 10px; } /* Liste der Beanstandungen. */ .beanstandungen { margin: 8px 0 0; padding-left: 20px; font-size: 14px; } .beanstandungen li { margin-bottom: 4px; } /* Schluessel: langer Base64-Text, umbrechend. */ .schluessel { display: block; font-family: var(--schrift-mono); font-size: 12.5px; overflow-wrap: anywhere; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 8px 10px; } /* Kanal-Zeiger auf der Uebersicht. */ .zeiger { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } /* Zwei Spalten fuer Formular und Erklaerung. */ .zwei-spalten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; } /* Kinder duerfen schmaler werden als ihr Inhalt - sonst sprengt eine lange JSON-Zeile die Spalte statt im 
 zu scrollen. */
.zwei-spalten > * { min-width: 0; }
@media (max-width: 900px) {
    .zwei-spalten { grid-template-columns: minmax(0, 1fr); }
}

.hinweis-liste { font-size: 13.5px; }
.hinweis-liste dt { font-family: var(--schrift-mono); font-size: 12.5px; color: var(--tinte); margin-top: 8px; }
.hinweis-liste dd { margin: 0 0 4px; color: var(--gedaempft); }

/* Fortschritts-/Kennzahlenzeile in Listen. */
.zusammenfassung { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--gedaempft); margin-bottom: 14px; }

/* JSON-Vorschau im Editor und Vorlagen auf der Format-Seite --------- */

.json-vorschau { max-height: 520px; white-space: pre; }

/* Knoepfe, die nur ohne JavaScript gebraucht werden (Vorschau auffrischen). */
.js .nur-ohne-js { display: none; }

/* Format-Seite: Beispiel und Erklaerung nebeneinander. */
.format-beispiel { margin-bottom: 22px; }
.format-beispiel pre { max-height: 560px; overflow: auto; }
.format-beispiel .actions { margin-top: 10px; }

/* Feldtabellen: der Feldname in Monospace, Pflichtfelder markiert. */
td.feld { font-family: var(--schrift-mono); font-size: 12.5px; white-space: nowrap; }
td.feld .pflicht { color: var(--akzent); }