/* QM-Plattform Praxiszentrum Dr. Stracke und Kollegen * Zwei Themes über [data-theme] auf : * - cyberwhite: Designsprache der Praxiswebseite (praxiszentrum-theme tokens.css: * snow/chalk/ink-Palette, Rot #C8161D als Akzent, SF-Pro-Stack, 4pt-Grid) * - cyberpunk: dunkles Neon-Theme (Cyan/Magenta, Glow) */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; --radius: 12px; --radius-s: 8px; } html[data-theme="cyberwhite"] { --bg: #FBFBFD; --bg-panel: #FFFFFF; --bg-soft: #F5F5F7; --line: #D2D2D7; --text: #1D1D1F; --text-soft: #86868B; --akzent: #C8161D; --akzent-2: #8B0F14; --akzent-kontrast: #FFFFFF; --ok: #1F7A33; --warn: #B25E00; --mark-bg: #FFF3B0; --schatten: 0 1px 3px rgba(29, 29, 31, .08), 0 8px 24px rgba(29, 29, 31, .06); --glow: none; } html[data-theme="cyberpunk"] { --bg: #0A0E1A; --bg-panel: #101627; --bg-soft: #171F35; --line: #26314F; --text: #E6F1FF; --text-soft: #7C8DB5; --akzent: #00F0FF; --akzent-2: #FF2E88; --akzent-kontrast: #04121C; --ok: #3DF29B; --warn: #FFC24B; --mark-bg: #3D3A00; --schatten: 0 0 0 1px var(--line), 0 8px 32px rgba(0, 0, 0, .55); --glow: 0 0 12px rgba(0, 240, 255, .45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--akzent); text-decoration: none; } a:hover { text-decoration: underline; } h1 { font-size: 1.9rem; letter-spacing: -.02em; margin: 0 0 var(--space-3); } h2 { font-size: 1.35rem; letter-spacing: -.01em; margin-top: var(--space-7); } h3 { font-size: 1.1rem; } kbd { font-family: var(--font-mono); font-size: .8em; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-soft); } /* ------------------------------------------------------------------ Topbar */ .topbar { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-6); background: var(--bg-panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } html[data-theme="cyberpunk"] .topbar { box-shadow: 0 1px 0 var(--akzent), var(--glow); } .brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); } .brand:hover { text-decoration: none; } .brand-mark { font-family: var(--font-mono); font-weight: 700; background: var(--akzent); color: var(--akzent-kontrast); padding: 2px 8px; border-radius: 6px; box-shadow: var(--glow); } .brand-text { font-size: .95rem; color: var(--text-soft); } .brand-text strong { color: var(--text); } .suchbox { position: relative; flex: 1; max-width: 420px; } .suchbox input { width: 100%; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); font-size: .95rem; outline: none; } .suchbox input:focus { border-color: var(--akzent); box-shadow: var(--glow); } .vorschlaege { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--schatten); overflow: hidden; z-index: 60; } .vorschlaege a { display: block; padding: 8px 14px; color: var(--text); font-size: .9rem; border-bottom: 1px solid var(--line); } .vorschlaege a:last-child { border-bottom: none; } .vorschlaege a:hover, .vorschlaege a.aktiv { background: var(--bg-soft); text-decoration: none; } .vorschlaege .v-titel { color: var(--akzent); font-weight: 600; } .vorschlaege mark { background: var(--mark-bg); color: inherit; } .hauptnav { display: flex; gap: var(--space-4); } .hauptnav a { color: var(--text); font-size: .95rem; white-space: nowrap; } .badge { background: var(--akzent-2); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px; vertical-align: 2px; } html[data-theme="cyberpunk"] .badge { box-shadow: 0 0 8px var(--akzent-2); } .topbar-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .theme-toggle { border: 1px solid var(--line); background: var(--bg-soft); color: var(--text); border-radius: 999px; width: 34px; height: 34px; cursor: pointer; font-size: 1rem; } .theme-toggle:hover { border-color: var(--akzent); box-shadow: var(--glow); } .nutzer-chip { background: var(--bg-soft); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; font-size: .85rem; } .logout { font-size: .85rem; color: var(--text-soft); } /* ------------------------------------------------------------------ Layout */ .layout { display: flex; flex: 1; min-height: 0; } .seitenleiste { width: 280px; flex-shrink: 0; padding: var(--space-6) var(--space-4); border-right: 1px solid var(--line); background: var(--bg-panel); overflow-y: auto; max-height: calc(100vh - 61px); position: sticky; top: 61px; } .nav-gruppe { margin-bottom: var(--space-5); } .nav-gruppe-titel { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); margin-bottom: var(--space-2); font-weight: 600; } html[data-theme="cyberpunk"] .nav-gruppe-titel { color: var(--akzent); text-shadow: var(--glow); } .nav-eintrag { display: block; padding: 6px 10px; border-radius: var(--radius-s); color: var(--text); font-size: .9rem; margin-bottom: 2px; } .nav-eintrag:hover { background: var(--bg-soft); text-decoration: none; } .nav-eintrag.aktiv { background: var(--bg-soft); border-left: 3px solid var(--akzent); padding-left: 7px; font-weight: 600; } .inhalt { flex: 1; padding: var(--space-7) var(--space-8); max-width: 980px; } .fusszeile { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); color: var(--text-soft); font-size: .82rem; text-align: center; } .einleitung { color: var(--text-soft); max-width: 70ch; } /* --------------------------------------------------------------- Dashboard */ .kachel-zeile { display: flex; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0; } .statuskachel { flex: 1; min-width: 200px; display: flex; align-items: center; gap: var(--space-4); background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); color: var(--text); box-shadow: var(--schatten); } .statuskachel:hover { text-decoration: none; border-color: var(--akzent); } .statuszahl { font-size: 1.8rem; font-weight: 700; color: var(--akzent); font-family: var(--font-mono); text-shadow: var(--glow); } .kategorie-block h2 { border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); } .modul-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); } .modul-kachel { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); color: var(--text); box-shadow: var(--schatten); display: flex; flex-direction: column; } .modul-kachel:hover { text-decoration: none; border-color: var(--akzent); transform: translateY(-1px); } .modul-kachel-titel { font-weight: 600; margin-bottom: var(--space-2); } .modul-kachel p { font-size: .88rem; color: var(--text-soft); flex: 1; margin: 0 0 var(--space-3); } .modul-kachel-meta { font-size: .75rem; color: var(--text-soft); font-family: var(--font-mono); } /* ------------------------------------------------------------------- Modul */ .brotkrumen { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); } .modul-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; color: var(--text-soft); font-size: .85rem; margin-bottom: var(--space-5); } .inhaltsverzeichnis { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); font-size: .88rem; margin-bottom: var(--space-5); } .inhaltsverzeichnis a { display: inline-block; margin: 2px 10px 2px 0; } .modul-inhalt h2 { border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); position: relative; scroll-margin-top: 80px; } .modul-inhalt h3 { scroll-margin-top: 80px; } .anker-knopf { position: absolute; right: 0; bottom: var(--space-2); border: 1px solid var(--line); background: var(--bg-soft); color: var(--text-soft); border-radius: 6px; cursor: pointer; font-size: .8rem; padding: 2px 8px; } .anker-knopf:hover { color: var(--akzent); border-color: var(--akzent); } .modul-inhalt table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; font-size: .92rem; } .modul-inhalt th, .modul-inhalt td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; } .modul-inhalt th { background: var(--bg-soft); } .modul-inhalt blockquote { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--akzent); background: var(--bg-panel); border-radius: 0 var(--radius-s) var(--radius-s) 0; box-shadow: var(--schatten); } .modul-inhalt code { font-family: var(--font-mono); background: var(--bg-soft); padding: 1px 5px; border-radius: 4px; } .quellen { margin-top: var(--space-6); font-size: .8rem; color: var(--text-soft); } .glossar-begriff { border-bottom: 1px dotted var(--akzent); cursor: help; } .glossar-tooltip { position: absolute; z-index: 100; max-width: 340px; background: var(--bg-panel); border: 1px solid var(--akzent); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); font-size: .85rem; box-shadow: var(--schatten), var(--glow); } .glossar-tooltip strong { color: var(--akzent); } /* ------------------------------------------------------------------- Tags */ .tag { display: inline-block; font-size: .7rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; vertical-align: 2px; } .tag-entwurf { border-color: var(--warn); color: var(--warn); } .tag-frei, .tag-freigegeben, .tag-behoben, .tag-eingearbeitet { border-color: var(--ok); color: var(--ok); } .tag-offen { border-color: var(--warn); color: var(--warn); } .tag-abgelehnt { border-color: var(--akzent-2); color: var(--akzent-2); } .tag-in-arbeit { border-color: var(--akzent); color: var(--akzent); } .prio { font-weight: 700; font-size: .8rem; text-transform: uppercase; } .prio-hoch { color: var(--akzent-2); } .prio-mittel { color: var(--warn); } .prio-niedrig { color: var(--text-soft); } /* ------------------------------------------------------------- Anmerkungen */ .anmerkung-bereich { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 2px solid var(--line); } .anmerkung-hinweis { color: var(--text-soft); font-size: .9rem; } .anmerkung-bezug { background: var(--bg-soft); border: 1px dashed var(--akzent); border-radius: var(--radius-s); padding: var(--space-2) var(--space-3); font-size: .85rem; margin-bottom: var(--space-2); } #anmerkung-form textarea, .entscheid-form textarea, .glossar-filter { width: 100%; padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-panel); color: var(--text); font-family: var(--font-body); font-size: .95rem; margin-bottom: var(--space-3); } .knopf { display: inline-block; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-soft); color: var(--text); padding: 8px 20px; font-size: .9rem; cursor: pointer; font-family: var(--font-body); } .knopf:hover { border-color: var(--akzent); text-decoration: none; } .knopf-primaer { background: var(--akzent); color: var(--akzent-kontrast); border-color: var(--akzent); font-weight: 600; box-shadow: var(--glow); } .knopf-gefahr { border-color: var(--akzent-2); color: var(--akzent-2); } .anmerkung-status { margin-left: var(--space-3); font-size: .88rem; color: var(--ok); } .anmerkung-liste { list-style: none; padding: 0; } .anmerkung { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); box-shadow: var(--schatten); } .anmerkung.status-offen { border-left: 4px solid var(--warn); } .anmerkung.status-eingearbeitet, .anmerkung.status-freigegeben { border-left: 4px solid var(--ok); } .anmerkung.status-abgelehnt { border-left: 4px solid var(--akzent-2); opacity: .75; } .anmerkung-kopf { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-size: .9rem; } .anmerkung-zeit { color: var(--text-soft); font-family: var(--font-mono); font-size: .78rem; margin-left: auto; } .antwort { background: var(--bg-soft); border-radius: var(--radius-s); padding: var(--space-2) var(--space-3); font-size: .9rem; } .entscheid-knoepfe { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ------------------------------------------------------- Suche / Glossar */ .treffer-liste { list-style: none; padding: 0; } .treffer a { display: block; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-3); color: var(--text); box-shadow: var(--schatten); } .treffer a:hover { text-decoration: none; border-color: var(--akzent); } .treffer-kategorie { font-size: .72rem; text-transform: uppercase; color: var(--text-soft); display: block; } .treffer p { color: var(--text-soft); font-size: .9rem; margin: var(--space-2) 0 0; } .treffer mark { background: var(--mark-bg); color: inherit; padding: 0 2px; border-radius: 3px; } .treffer-leer { color: var(--text-soft); padding: var(--space-5); } .glossar-liste dt { font-weight: 700; color: var(--akzent); margin-top: var(--space-4); } .glossar-liste dd { margin: var(--space-1) 0 0; } .glossar-eintrag { border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); } /* -------------------------------------------------------------- Login etc. */ .login-karte { max-width: 420px; margin: 8vh auto; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-7); box-shadow: var(--schatten); } .login-untertitel { color: var(--text-soft); font-size: .9rem; } .login-karte label { display: block; font-size: .85rem; margin: var(--space-4) 0 var(--space-1); } .login-karte input { width: 100%; padding: 10px 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 1rem; margin-bottom: var(--space-2); } .login-karte .knopf { width: 100%; margin-top: var(--space-4); } .hinweis-fehler { background: var(--bg-soft); border: 1px solid var(--akzent-2); color: var(--akzent-2); border-radius: var(--radius-s); padding: var(--space-3); font-size: .9rem; } .gaps-tabelle { border-collapse: collapse; width: 100%; font-size: .9rem; } .gaps-tabelle th, .gaps-tabelle td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .gaps-tabelle th { background: var(--bg-soft); } .gap-behoben { opacity: .6; } .gap-link { font-weight: 600; } .gap-modul-hinweis { display: block; font-size: .8rem; color: var(--text-soft); margin-top: 2px; } @media (max-width: 900px) { .seitenleiste { display: none; } .inhalt { padding: var(--space-5); } .topbar { flex-wrap: wrap; } .suchbox { order: 3; max-width: none; flex-basis: 100%; } }