/* GSE Leitstand - Oberflaeche. Alle Farben, Schriften, Radien und Schatten kommen aus Variablen (Design-Tokens). Ein Theme setzt nur diese Tokens neu - siehe Block "Designs" weiter unten. Umschaltung: (Auswahl oben rechts in der Kopfzeile). */ /* ============================================================ Tokens: Leitstand HUD (Standard) */ :root { /* Flaechen */ --bg: #0b1220; --body-bg: radial-gradient(1200px 600px at 20% -10%, #0e2a3d 0%, #0b1220 60%); --bg2: #101a2e; /* erhoehte Flaeche: Knoepfe, Code, Kacheln */ --panel: #0f172a; --panel-bg: #0f172acc; /* Panel-Hintergrund inkl. Transparenz */ --col-bg: #0c1526; /* Kanban-Spalte */ --input-bg: #0a1322; --header-bg: #0b1220e6; --hover: #12253d; --scrim: #00000099; /* Linien */ --line: #1e3a5f; --line-soft: #1a2c47; --line2: #22d3ee44; /* Fokusring */ /* Text */ --text: #dbe7f3; --strong: #ffffff; --muted: #7c93ab; /* Akzente */ --accent: #22d3ee; --accent2: #38bdf8; --acc-bg: #0e3a4a; /* primaerer Knopf */ --acc-fg: #e0fbff; --warn: #fbbf24; --warn-bg: #2a200c33; --bad: #f87171; --bad-bg: #3a1010; --good: #34d399; --good-bg: #0d3a2a; --good-glow: #34d39988; --violet: #a78bfa; --orange: #fb923c; /* Schrift */ --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: -apple-system, "Segoe UI", Inter, Roboto, sans-serif; --head: var(--mono); /* Ueberschriften, Navigation, Tabellenkoepfe */ --head-tr: uppercase; --head-sp: .1em; --head-w: 600; --logo-w: 700; /* Form */ --r: 6px; --rl: 10px; --shadow: inset 0 0 0 1px #ffffff05, 0 8px 24px #00000040; --shadow-modal: 0 0 40px #22d3ee33; } /* ============================================================ Designs */ /* --- Tageslicht: sehr hell, ruhig, hoher Kontrast, alles serifenlos --- */ [data-theme="hell"] { --bg: #ffffff; --body-bg: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%) fixed; --bg2: #f1f5f9; --panel: #ffffff; --panel-bg: #ffffff; --col-bg: #f4f7fb; --input-bg: #ffffff; --header-bg: #ffffffee; --hover: #eef4ff; --scrim: #0f172a55; --line: #d7dee8; --line-soft: #e7ecf3; --line2: #2563eb33; --text: #16202f; --strong: #0b1220; --muted: #667a90; --accent: #1d4ed8; --accent2: #0369a1; --acc-bg: #1d4ed8; --acc-fg: #ffffff; --warn: #b45309; --warn-bg: #fff7e6; --bad: #be123c; --bad-bg: #fff1f2; --good: #047857; --good-bg: #ecfdf5; --good-glow: #04785766; --violet: #6d28d9; --orange: #c2410c; --head: var(--sans); --head-tr: none; --head-sp: .01em; --head-w: 700; --r: 8px; --rl: 12px; --shadow: 0 1px 2px #0f172a0f, 0 8px 20px #0f172a0d; --shadow-modal: 0 24px 60px #0f172a33; } /* --- GSE: Hausfarbe Gold auf warmem Anthrazit, Serifen-Ueberschriften --- */ [data-theme="gse"] { --bg: #16130f; --body-bg: radial-gradient(900px 500px at 85% -15%, #34291a 0%, #16130f 60%); --bg2: #221c15; --panel: #1d1813; --panel-bg: #1d1813e6; --col-bg: #191410; --input-bg: #120f0b; --header-bg: #16130ff2; --hover: #2b2318; --scrim: #000000aa; --line: #3b3125; --line-soft: #2b2419; --line2: #e2a33c55; --text: #f0e7d8; --strong: #fffaf0; --muted: #a2947c; --accent: #e2a33c; --accent2: #f0c274; --acc-bg: #e2a33c; --acc-fg: #241b0d; --warn: #f0b429; --warn-bg: #3a2c0d33; --bad: #e26d5c; --bad-bg: #3a1a14; --good: #8fbf5f; --good-bg: #263218; --good-glow: #8fbf5f88; --violet: #c2a3e0; --orange: #e2853c; --head: "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif; --head-tr: none; --head-sp: .02em; --head-w: 600; --r: 3px; --rl: 4px; --shadow: 0 1px 0 #ffffff08 inset, 0 10px 30px #00000059; --shadow-modal: 0 0 50px #e2a33c26; } /* --- Terminal: schwarz, Phosphorgruen, alles Monospace, keine Rundungen --- */ [data-theme="terminal"] { --bg: #000000; --body-bg: #000000; --bg2: #071008; --panel: #030803; --panel-bg: #030803; --col-bg: #050d06; --input-bg: #000000; --header-bg: #000000f2; --hover: #0c1f10; --scrim: #000000cc; --line: #1d4d2b; --line-soft: #143520; --line2: #33ff6644; --text: #b9ffcc; --strong: #eaffef; --muted: #4f8f63; --accent: #33ff66; --accent2: #7cff9e; --acc-bg: #0d2b16; --acc-fg: #b9ffcc; --warn: #ffd93d; --warn-bg: #2a2405; --bad: #ff5f56; --bad-bg: #2a0a08; --good: #33ff66; --good-bg: #0d2b16; --good-glow: #33ff6688; --violet: #b98cff; --orange: #ffab4c; --sans: var(--mono); --head: var(--mono); --head-tr: uppercase; --head-sp: .16em; --head-w: 700; --logo-w: 700; --r: 0px; --rl: 0px; --shadow: none; --shadow-modal: 0 0 0 1px #33ff66, 0 0 40px #33ff6633; } [data-theme="terminal"] body { background-image: repeating-linear-gradient(0deg, #33ff6610 0 1px, transparent 1px 3px); } [data-theme="terminal"] .panel, [data-theme="terminal"] .kpi, [data-theme="terminal"] .column, [data-theme="terminal"] .card { border-style: solid; } [data-theme="terminal"] header .logo::before { content: "> "; } [data-theme="terminal"] .panel h2::before, [data-theme="terminal"] .panel h3::before { content: "// "; opacity: .6; } /* --- Papier: warmes Druckbild, Serifen, Linien statt Kaesten, keine Schatten --- */ [data-theme="papier"] { --bg: #f7f3ea; --body-bg: #f2ede1; --bg2: #ece5d6; --panel: #fbf8f1; --panel-bg: #fbf8f1; --col-bg: #f2ede1; --input-bg: #fffdf8; --header-bg: #f7f3eaf2; --hover: #ece5d6; --scrim: #2b262066; --line: #cdc2ab; --line-soft: #e0d8c6; --line2: #2d4a2b33; --text: #2b2620; --strong: #14110d; --muted: #7d7462; --accent: #2d4a2b; --accent2: #6a6a2f; --acc-bg: #2d4a2b; --acc-fg: #faf9f6; --warn: #8a5a12; --warn-bg: #f6ecd8; --bad: #9b2c2c; --bad-bg: #f6e3e0; --good: #3f6b39; --good-bg: #e6efdf; --good-glow: #3f6b3966; --violet: #5b4a7a; --orange: #a4551f; --sans: "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif; --head: "Iowan Old Style", Palatino, "Book Antiqua", Georgia, serif; --head-tr: none; --head-sp: .01em; --head-w: 700; --r: 2px; --rl: 2px; --shadow: none; --shadow-modal: 0 20px 50px #2b262033; } [data-theme="papier"] .panel { border-width: 0 0 0 3px; border-left-color: var(--accent); border-bottom: 1px solid var(--line); } [data-theme="papier"] .kpi { border-width: 0 0 2px 0; border-radius: 0; } [data-theme="papier"] .panel h2, [data-theme="papier"] .panel h3 { font-size: 17px; } /* --- Neon: kosmisches Violett mit Magenta-Leuchten, weiche runde Flaechen --- */ [data-theme="neon"] { --bg: #140e26; --body-bg: radial-gradient(800px 500px at 10% -10%, #3a1d5c 0%, #140e26 55%), radial-gradient(700px 400px at 95% 110%, #2a1b52 0%, #140e26 60%); --bg2: #221541; --panel: #1c1236; --panel-bg: #1c1236e6; --col-bg: #180f2e; --input-bg: #120c22; --header-bg: #140e26e6; --hover: #2d1c53; --scrim: #0a0616cc; --line: #3d2a6b; --line-soft: #2b1d4d; --line2: #ff3ea555; --text: #e6e6fa; --strong: #ffffff; --muted: #9d8fc4; --accent: #ff3ea5; --accent2: #a490c2; --acc-bg: #5a1f52; --acc-fg: #ffe6f4; --warn: #ffc857; --warn-bg: #3a2c0d55; --bad: #ff5c8a; --bad-bg: #3d1029; --good: #4ade80; --good-bg: #163a2a; --good-glow: #ff3ea588; --violet: #c084fc; --orange: #fb923c; --head: var(--sans); --head-tr: uppercase; --head-sp: .14em; --head-w: 700; --r: 10px; --rl: 16px; --shadow: inset 0 1px 0 #ffffff12, 0 10px 34px #00000066, 0 0 0 1px #ff3ea51a; --shadow-modal: 0 0 60px #ff3ea540; } [data-theme="neon"] header .logo { text-shadow: 0 0 14px #ff3ea577; } [data-theme="neon"] .kpi .n { text-shadow: 0 0 16px #ff3ea555; } /* ============================================================ Grundlagen */ * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--sans); } body { background: var(--body-bg); background-attachment: fixed; min-height: 100vh; } a { color: var(--accent2); text-decoration: none; } a:hover { text-decoration: underline; } button, .btn { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px; cursor: pointer; } button:hover, .btn:hover { border-color: var(--accent); color: var(--strong); } button.primary { background: var(--acc-bg); border-color: var(--accent); color: var(--acc-fg); } button.primary:hover { color: var(--acc-fg); } button.danger { border-color: var(--bad); color: var(--bad); } button:disabled { opacity: .5; cursor: default; } button.small { padding: 2px 8px; font-size: 12px; } input, select, textarea { font: inherit; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 8px; width: 100%; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--line2); } textarea { min-height: 70px; resize: vertical; } label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .04em; } .field { margin-bottom: 10px; } .mono { font-family: var(--mono); } .muted { color: var(--muted); } .right { text-align: right; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .grow { flex: 1; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; } .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; } hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; } /* Kopf */ header.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 8px 18px; background: var(--header-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); } header nav { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; } header .logo { font-family: var(--head); font-weight: var(--logo-w); letter-spacing: .12em; color: var(--accent); } header .logo small { color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: 8px; } header nav a { padding: 6px 10px; border-radius: var(--r); color: var(--text); font-family: var(--head); font-size: 13px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); } header nav a.active, header nav a:hover { background: var(--hover); color: var(--accent); text-decoration: none; } header .user { margin-left: auto; color: var(--muted); font-size: 13px; } header .user b { color: var(--text); } main { padding: 18px; max-width: 1500px; margin: 0 auto; } /* Designwahl in der Kopfzeile */ .designwahl { display: flex; align-items: center; gap: 6px; } .designwahl label { margin: 0; font-family: var(--head); letter-spacing: var(--head-sp); color: var(--muted); } .designwahl select { width: auto; min-width: 118px; padding: 4px 8px; font-size: 12px; font-family: var(--head); letter-spacing: var(--head-sp); } /* Panels */ .panel { background: var(--panel-bg); border: 1px solid var(--line); border-radius: var(--rl); padding: 14px 16px; box-shadow: var(--shadow); } .panel h2, .panel h3 { margin: 0 0 10px; font-family: var(--head); font-weight: var(--head-w); font-size: 13px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); color: var(--accent); } .panel h2 .count { color: var(--muted); margin-left: 6px; } .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rl); padding: 10px 12px; } .kpi .n { font: 700 26px/1 var(--head); color: var(--strong); } .kpi .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; } .kpi.warn .n { color: var(--warn); } .kpi.bad .n { color: var(--bad); } .kpi.good .n { color: var(--good); } /* Tabellen */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } th { font-family: var(--head); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; } tr.link { cursor: pointer; } tr.link:hover td { background: var(--hover); } td.num, th.num { text-align: right; font-family: var(--mono); } /* Badges */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-family: var(--head); font-size: 11px; font-weight: 600; line-height: 1.6; text-transform: uppercase; letter-spacing: .06em; border: 1px solid; } .s-neu { color: var(--accent2); border-color: var(--accent2); } .s-kontaktiert { color: var(--accent); border-color: var(--accent); } .s-termin { color: var(--violet); border-color: var(--violet); } .s-angebot { color: var(--orange); border-color: var(--orange); } .s-gewonnen { color: var(--good); border-color: var(--good); } .s-verloren { color: var(--bad); border-color: var(--bad); } .s-auftrag { color: var(--accent2); border-color: var(--accent2); } .s-netzanmeldung { color: var(--violet); border-color: var(--violet); } .s-material { color: var(--orange); border-color: var(--orange); } .s-montage { color: var(--warn); border-color: var(--warn); } .s-inbetriebnahme { color: var(--accent); border-color: var(--accent); } .s-fertigmeldung { color: var(--good); border-color: var(--good); } .s-abgeschlossen { color: var(--good); border-color: var(--good); } .s-pausiert { color: var(--muted); border-color: var(--muted); } .s-offen { color: var(--warn); border-color: var(--warn); } .s-bezahlt, .s-zusage { color: var(--good); border-color: var(--good); } .s-abgelehnt { color: var(--bad); border-color: var(--bad); } .art { font-family: var(--mono); color: var(--accent); } .overdue { color: var(--bad); font-weight: 600; } .today { color: var(--warn); font-weight: 600; } /* Kanban */ .kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; } .column { background: var(--col-bg); border: 1px solid var(--line); border-radius: var(--rl); padding: 10px; min-height: 300px; } .column h3 { margin: 0 0 8px; font-family: var(--head); font-weight: var(--head-w); font-size: 12px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); display: flex; justify-content: space-between; } .column.drop { border-color: var(--accent); background: var(--hover); } .card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 8px 10px; margin-bottom: 8px; cursor: grab; } .card:hover { border-color: var(--accent); } .card .nr { font: 600 12px var(--mono); color: var(--accent); } .card .nm { font-weight: 600; margin: 2px 0; } .card .sub { font-size: 12px; color: var(--muted); } .card.dragging { opacity: .4; } /* Leitstand-Aufbauten ------------------------------------------------------- Sechs Anordnungen derselben Daten. Alles nur Raster und Abstaende, keine eigenen Farben: die kommen weiterhin aus den Design-Tokens oben. */ h3.gruppe { margin: 14px 0 6px; font-family: var(--head); font-weight: var(--head-w); font-size: 12px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); color: var(--muted); } h3.gruppe:first-child { margin-top: 0; } h3.gruppe.bad { color: var(--bad); } h3.gruppe.warn { color: var(--warn); } /* "Prioritaet": breite Arbeitsspalte links, Kontext rechts (F-Muster) */ .dash-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; } .dash-2 > div { display: grid; gap: 14px; align-content: start; } /* "Leitwarte": dichte Statuswand, Auffaelliges am Farbbalken erkennbar */ .wand { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; } .wand-kachel { display: block; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: var(--rl); padding: 10px 12px; color: var(--text); } .wand-kachel:hover { border-color: var(--accent); border-left-color: var(--accent); text-decoration: none; } .wand-kachel .n { font: 700 30px/1 var(--head); color: var(--strong); } .wand-kachel .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 5px; } .wand-kachel .s { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 3px; } .wand-kachel.rot { border-left-color: var(--bad); } .wand-kachel.rot .n { color: var(--bad); } .wand-kachel.gelb { border-left-color: var(--warn); } .wand-kachel.gelb .n { color: var(--warn); } .wand-kachel.gruen { border-left-color: var(--good); } .wand-kachel.gruen .n { color: var(--good); } h2.wand-titel { font-family: var(--head); font-weight: var(--head-w); font-size: 13px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); color: var(--accent); margin: 0 0 10px; } /* "Fokus": eine Zahl gross, daneben genau die Liste dazu */ .fokus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; align-items: start; margin-bottom: 14px; } .fokus .zahl { font: 700 72px/1 var(--head); color: var(--strong); } .fokus .zahl.rot { color: var(--bad); } .fokus .zahl.gelb { color: var(--warn); } .fokus .zahl.gruen { color: var(--good); } .fokus .fokus-zahl .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; } .fokus .satz { color: var(--muted); margin-top: 10px; font-size: 13px; } .fokus .auf { margin-top: 14px; } .fokus .auf div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); } /* "Zeitstrahl": Tagesagenda ueber alle datierten Vorgaenge */ .zeitstrahl { display: grid; } .zs-tag { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); } .zs-datum { font-family: var(--head); font-weight: var(--head-w); font-size: 13px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); color: var(--accent); position: sticky; top: 62px; align-self: start; } .zs-datum small { display: block; margin-top: 3px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); } .zs-tag.ueberfaellig .zs-datum { color: var(--bad); } .zs-tag.heute .zs-datum { color: var(--warn); } .zs-items { display: grid; gap: 6px; } .zs-item { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 7px 10px; cursor: pointer; } .zs-item:hover { border-color: var(--accent); } .zs-item.ueberfaellig { border-left-color: var(--bad); } .zs-item.heute { border-left-color: var(--warn); } .zs-item .art { font-family: var(--head); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .zs-item .sub { color: var(--muted); font-size: 12px; } @media (max-width: 980px) { .dash-2, .fokus { grid-template-columns: 1fr; } } /* Tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; } .tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-family: var(--head); font-size: 12px; text-transform: var(--head-tr); letter-spacing: var(--head-sp); color: var(--muted); } .tabs button.active { color: var(--accent); border-bottom-color: var(--accent); } /* Meilensteine */ .ms { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line-soft); } .ms input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); } .ms.done .t { color: var(--muted); text-decoration: line-through; } .progress { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; } .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); } /* Stoppuhr */ .stoppuhr.laeuft { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset, var(--shadow); } .stoppuhr .uhr { font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--good); font-family: var(--head); } button.gross { font-size: 18px; padding: 14px 18px; min-height: 52px; } button.danger-outline { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); } /* Gefundene Planung: leuchtender Hinweis */ .planung-treffer { border: 1px solid var(--good); border-radius: var(--r); padding: 10px 12px; background: var(--good-bg); } .leuchte { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 0 var(--good-glow); animation: puls 1.8s infinite; } @keyframes puls { 0% { box-shadow: 0 0 0 0 var(--good-glow); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } button.leuchtet { background: var(--good-bg); border-color: var(--good); color: var(--good); animation: leuchten 2.2s infinite; } button.leuchtet:hover { border-color: var(--good); color: var(--strong); } @keyframes leuchten { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 12px 2px var(--good-glow); } } @media (prefers-reduced-motion: reduce) { .leuchte, button.leuchtet { animation: none; } } /* Kalkulationsregel */ .panel.regel-ok { border-color: var(--good); } .panel.regel-warn { border-color: var(--warn); background: var(--warn-bg); } /* Fotos */ .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; } .galerie figure { margin: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .galerie img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg2); } .galerie figcaption { font-size: 11px; padding: 6px 8px; display: grid; gap: 2px; word-break: break-word; } .galerie figcaption .muted { font-size: 10px; } .galerie figcaption button { justify-self: end; } /* Aktivitaeten */ .akt { border-left: 2px solid var(--line); padding-left: 10px; margin: 6px 0; } .akt .meta { font-size: 11px; color: var(--muted); font-family: var(--mono); } /* Modal, Toast, Login */ .modal-bg { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 16px; } .modal { background: var(--bg2); border: 1px solid var(--accent); border-radius: var(--rl); padding: 18px; width: min(640px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow-modal); } .modal h2 { margin-top: 0; font-family: var(--head); font-weight: var(--head-w); font-size: 14px; letter-spacing: var(--head-sp); text-transform: var(--head-tr); color: var(--accent); } .toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--hover); border: 1px solid var(--accent); color: var(--strong); padding: 10px 16px; border-radius: var(--r); z-index: 30; } .toast.error { border-color: var(--bad); } .login { max-width: 380px; margin: 12vh auto; } .login .logo { font: 700 22px var(--head); letter-spacing: .2em; color: var(--accent); text-align: center; margin-bottom: 4px; } .login .sub { text-align: center; color: var(--muted); margin-bottom: 20px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } .login .designwahl { justify-content: center; margin-top: 16px; } .error { color: var(--bad); font-size: 13px; } .empty { color: var(--muted); padding: 12px 0; font-style: italic; } /* Portale und Zugaenge: Kachel je Netzbetreiber mit Links und Zugangsdaten */ .portale { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; } .portal-karte { background: var(--panel); border: 1px solid var(--line); border-radius: var(--rl); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .portal-karte .pk-kopf { display: flex; align-items: baseline; gap: 8px; } .portal-karte .pk-kopf b { font-size: 14px; } .portal-karte .pk-links { display: flex; flex-wrap: wrap; gap: 6px; } .portal-karte .pk-links .btn { font-size: 12px; padding: 4px 10px; text-decoration: none; } .portal-karte .pk-zugang { display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .portal-karte .pk-zugang .row { align-items: center; gap: 6px; } .portal-karte .pk-zugang .muted { min-width: 62px; } .portal-karte code { font-family: var(--mono); background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; word-break: break-all; } .portal-karte .pk-fuss { display: flex; align-items: center; gap: 6px; font-size: 11px; border-top: 1px solid var(--line); padding-top: 6px; } .tag { font: 11px/1.6 var(--mono); color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; } label.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); } /* Mobil (Montage unterwegs): Navigation scrollt, Tabellen scrollen im Panel, Kanban-Spalten seitenweise, grosse Tippflaechen */ @media (max-width: 700px) { header.top { position: static; flex-wrap: wrap; gap: 8px; padding: 8px 10px; } header .logo small { display: none; } header nav { order: 3; flex-basis: 100%; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } header nav::-webkit-scrollbar { display: none; } header nav a { white-space: nowrap; padding: 8px 10px; } header .user { font-size: 12px; } .designwahl label { display: none; } .designwahl select { min-width: 0; } main { padding: 10px; } .panel { padding: 10px 12px; overflow-x: auto; } .panels { grid-template-columns: 1fr !important; gap: 10px; } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .row input[style*="max-width"], .row select[style*="max-width"] { max-width: none !important; } .kpi .n { font-size: 22px; } .portale { grid-template-columns: 1fr; } .kanban { grid-auto-columns: 84vw; scroll-snap-type: x mandatory; } .column { scroll-snap-align: start; min-height: 200px; } .zs-tag { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; } .zs-datum { position: static; } .zs-item { grid-template-columns: 1fr; gap: 2px; } .wand { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wand-kachel .n { font-size: 24px; } .fokus .zahl { font-size: 54px; } .tabs { gap: 2px; } .tabs button { white-space: nowrap; padding: 8px 8px; } .modal-bg { padding: 0; align-items: stretch; } .modal { width: 100%; max-height: 100vh; border-radius: 0; border-left: 0; border-right: 0; } input, select, textarea { font-size: 16px; } button, .btn { min-height: 38px; } button.small { min-height: 30px; } .ms input[type=checkbox] { width: 24px; height: 24px; } h1 { font-size: 16px !important; } table { min-width: 520px; } .ms, .akt { word-break: break-word; } } /* Aufgaben */ .aufgabe-titel { font-weight: 600; } tr.muted td { opacity: .6; } .btn.small { padding: 3px 8px; font-size: 11px; } h2 .btn.small { font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: -2px; }