/* ================================================================== BUBBL - Designsystem Haltung: ruhige, grosse Flaechen. Wenige Elemente, die dafuer Platz bekommen. Sehr grosse, eng gesetzte Ueberschriften, viel Luft dazwischen, Bilder randlos. Farbe wird sparsam eingesetzt - sie markiert, was man anfassen kann, und sonst nichts. Das ist kein Selbstzweck. Der Feed ist in dieser Stunde ein Messinstrument: Was an der Oberflaeche flimmert, lenkt von dem ab, was gemessen wird. Ein ruhiges Layout laesst die Beitraege wirken - und am Beamer laesst es die eine Zahl wirken, um die es gerade geht. Zwei Themes: dunkel (Standard) und hell. Umgeschaltet wird über data-theme="hell" bzw. data-theme="dunkel" am -Element. Alle Flächen, Kanten und Akzente laufen über Tokens - eine Farbe steht nirgends doppelt, damit der Themewechsel überall greift. Das helle Theme ist für nicht abgedunkelte Räume gedacht: Ein Beamer bei Tageslicht stellt Dunkelflächen kaum dar, helle dagegen schon. Inhaltlich sind beide identisch. ================================================================== */ :root { /* --- Grundflächen ---------------------------------------------- */ --bg-0: #08080c; --bg-1: #0d0d13; --bg-2: #15151c; /* --- Schrift ---------------------------------------------------- */ --ink: #f5f5f7; --ink-2: #c7c7cf; --ink-3: #8e8e97; /* --- Linien und Flächen ----------------------------------------- */ --line: rgba(255, 255, 255, 0.10); --line-2: rgba(255, 255, 255, 0.20); --flaeche: rgba(255, 255, 255, 0.035); --flaeche-2: rgba(255, 255, 255, 0.07); --spur: rgba(255, 255, 255, 0.07); --kante: rgba(255, 255, 255, 0.14); --glas: rgba(23, 23, 29, 0.72); --glas-2: rgba(32, 32, 40, 0.86); --glas-hi: rgba(255, 255, 255, 0.06); --leiste: rgba(12, 12, 16, 0.72); --leiste-fest: rgba(10, 10, 14, 0.86); --feld: rgba(10, 10, 24, 0.6); --backdrop: rgba(4, 4, 10, 0.72); /* --- Akzente ----------------------------------------------------- */ --akzent: #a855f7; --akzent-hell: #b975f9; --akzent-2: #22d3ee; --pink: #f472b6; --amber: #fbbf24; --lime: #a3e635; --rot: #fb7185; --blau: #60a5fa; --gruen: #34d399; --ok: #34d399; --warn: #fbbf24; --bad: #fb7185; /* --- Chips -------------------------------------------------------- */ --chip-bg: rgba(168, 85, 247, 0.14); --chip-line: rgba(168, 85, 247, 0.3); --chip-ink: #e6d6ff; --chip-ok-bg: rgba(52, 211, 153, 0.14); --chip-ok-line: rgba(52, 211, 153, 0.34); --chip-ok-ink: #b8f5df; --chip-warn-bg: rgba(251, 191, 36, 0.14); --chip-warn-line: rgba(251, 191, 36, 0.34); --chip-warn-ink: #ffe6a8; --chip-bad-bg: rgba(251, 113, 133, 0.14); --chip-bad-line: rgba(251, 113, 133, 0.34); --chip-bad-ink: #ffd0d8; /* --- Hervorhebung (aktive Station, aktiver Knopf) ------------------ */ --aktiv-1: rgba(168, 85, 247, 0.34); --aktiv-2: rgba(34, 211, 238, 0.22); --aktiv-stark-1: rgba(168, 85, 247, 0.5); --aktiv-stark-2: rgba(34, 211, 238, 0.32); --aktiv-rand: transparent; --akzent-glow: rgba(168, 85, 247, 0.6); /* --- Haltungsachse ------------------------------------------------- */ --achse-links: rgba(251, 113, 133, 0.22); --achse-mitte: rgba(255, 255, 255, 0.05); --achse-rechts: rgba(52, 211, 153, 0.22); /* --- Hinweisflächen ---------------------------------------------- */ --warn-flaeche: rgba(251, 191, 36, 0.09); --warn-linie: rgba(251, 191, 36, 0.28); --warn-ink: #ffe6a8; --info-flaeche: rgba(34, 211, 238, 0.07); --info-linie: rgba(34, 211, 238, 0.24); --info-ink: #22d3ee; /* --- Schatten ----------------------------------------------------- */ --schatten: 0 32px 80px rgba(0, 0, 0, 0.5); --schatten-s: 0 2px 10px rgba(0, 0, 0, 0.3); --glow: 0 0 60px rgba(168, 85, 247, 0.18); /* --- Hintergrund (Aurora) ----------------------------------------- */ --au-1: rgba(168, 85, 247, 0.10); --au-2: rgba(34, 211, 238, 0.08); --au-3: rgba(244, 114, 182, 0.07); --au-blob-1: rgba(168, 85, 247, 0.12); --au-blob-2: rgba(34, 211, 238, 0.09); --au-blob-3: rgba(244, 114, 182, 0.08); --raster: rgba(255, 255, 255, 0.018); --grund-tief: #050508; /* Platzhalterflächen der Beiträge */ --bild-s: 66%; --bild-l: 40%; --bild-s2: 56%; --bild-l2: 29%; /* Übergang zwischen Bild und Karte - oben und unten ein Hauch Grund */ --bild-oben: rgba(10, 10, 22, 0.32); --bild-unten: rgba(10, 10, 22, 0.28); /* Abdeckung über dem Anzeigenmotiv, damit der Claim lesbar bleibt */ --anz-deck: rgba(14, 13, 28, 0.82); --anz-deck-2: rgba(14, 13, 28, 0.5); --anz-schatten: rgba(0, 0, 0, 0.55); /* --- Maße ---------------------------------------------------------- */ --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; /* --- Raster -------------------------------------------------------- Eine Textspalte, eine breite Spalte, ein Randabstand. Mehr braucht es nicht, und weniger waere zu wenig. */ --spalte: 720px; --spalte-breit: 1120px; --rand: clamp(20px, 5vw, 40px); --luft: clamp(48px, 9vh, 104px); --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", monospace; color-scheme: dark; } /* ================================================================== Helles Theme ================================================================== */ :root[data-theme="hell"] { --bg-0: #f4f4fb; --bg-1: #fbfbff; --bg-2: #ffffff; --ink: #17142a; --ink-2: #4a4368; --ink-3: #6f6892; --line: rgba(60, 40, 140, 0.2); --line-2: rgba(60, 40, 140, 0.36); --flaeche: rgba(60, 40, 140, 0.045); --flaeche-2: rgba(60, 40, 140, 0.09); --spur: rgba(60, 40, 140, 0.12); --kante: rgba(255, 255, 255, 0.9); --glas: rgba(255, 255, 255, 0.84); --glas-2: rgba(255, 255, 255, 0.9); --glas-hi: rgba(255, 255, 255, 0.95); --leiste: rgba(255, 255, 255, 0.82); --leiste-fest: rgba(255, 255, 255, 0.92); --feld: rgba(255, 255, 255, 0.9); --backdrop: rgba(40, 30, 80, 0.38); /* Auf hellem Grund brauchen die Akzente mehr Tiefe, sonst reicht der Kontrast für Text und dünne Linien nicht. */ --akzent: #7c3aed; --akzent-hell: #6d28d9; --akzent-2: #0e7490; --pink: #db2777; --amber: #b45309; --lime: #4d7c0f; --rot: #e11d48; --blau: #2563eb; --gruen: #059669; --ok: #059669; --warn: #b45309; --bad: #e11d48; --chip-bg: rgba(124, 58, 237, 0.12); --chip-line: rgba(124, 58, 237, 0.34); --chip-ink: #5b21b6; --chip-ok-bg: rgba(5, 150, 105, 0.12); --chip-ok-line: rgba(5, 150, 105, 0.34); --chip-ok-ink: #065f46; --chip-warn-bg: rgba(180, 83, 9, 0.12); --chip-warn-line: rgba(180, 83, 9, 0.32); --chip-warn-ink: #92400e; --chip-bad-bg: rgba(225, 29, 72, 0.1); --chip-bad-line: rgba(225, 29, 72, 0.3); --chip-bad-ink: #9f1239; --aktiv-1: rgba(124, 58, 237, 0.16); --aktiv-2: rgba(14, 116, 144, 0.12); --aktiv-stark-1: rgba(124, 58, 237, 0.3); --aktiv-stark-2: rgba(14, 116, 144, 0.22); --aktiv-rand: rgba(124, 58, 237, 0.45); --akzent-glow: rgba(124, 58, 237, 0.45); --achse-links: rgba(225, 29, 72, 0.3); --achse-mitte: rgba(60, 40, 140, 0.06); --achse-rechts: rgba(5, 150, 105, 0.3); --warn-flaeche: rgba(251, 191, 36, 0.16); --warn-linie: rgba(180, 83, 9, 0.3); --warn-ink: #7c2d12; --info-flaeche: rgba(14, 116, 144, 0.08); --info-linie: rgba(14, 116, 144, 0.26); --info-ink: #0e7490; --schatten: 0 28px 70px rgba(60, 40, 140, 0.13); --schatten-s: 0 1px 6px rgba(40, 30, 90, 0.1); --glow: 0 0 60px rgba(124, 58, 237, 0.12); --au-1: rgba(167, 139, 250, 0.1); --au-2: rgba(103, 232, 249, 0.08); --au-3: rgba(249, 168, 212, 0.08); --au-blob-1: rgba(167, 139, 250, 0.11); --au-blob-2: rgba(103, 232, 249, 0.09); --au-blob-3: rgba(251, 207, 232, 0.1); --raster: rgba(60, 40, 140, 0.028); --grund-tief: #f1f2f7; --bild-s: 74%; --bild-l: 70%; --bild-s2: 66%; --bild-l2: 60%; /* Im hellen Design darf das Bild oben und unten heller auslaufen. */ --bild-oben: rgba(255, 255, 255, 0.22); --bild-unten: rgba(255, 255, 255, 0.3); /* Die Motive sind durchweg kräftig - deshalb bleibt die Abdeckung hell und der Claim dunkel, sonst steht dunkler Text auf dunklem Bild. */ --anz-deck: rgba(252, 251, 255, 0.93); --anz-deck-2: rgba(252, 251, 255, 0.7); --anz-schatten: rgba(255, 255, 255, 0.8); color-scheme: light; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg-0); -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); transition: background 0.4s ease, color 0.4s ease; } img { max-width: 100%; } /* ------------------------------------------------------------------ Bewegter Hintergrund ------------------------------------------------------------------ */ .bg { position: fixed; inset: 0; z-index: -3; background: radial-gradient(1100px 760px at 14% 10%, var(--au-1), transparent 62%), radial-gradient(980px 700px at 86% 16%, var(--au-2), transparent 62%), radial-gradient(900px 860px at 72% 90%, var(--au-3), transparent 60%), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 58%, var(--grund-tief) 100%); } .bg::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(520px 520px at 30% 30%, var(--au-blob-1), transparent 60%), radial-gradient(460px 460px at 70% 60%, var(--au-blob-2), transparent 60%), radial-gradient(400px 400px at 50% 85%, var(--au-blob-3), transparent 60%); filter: blur(120px); animation: driften 48s ease-in-out infinite alternate; } .bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(1200px 900px at 50% 0%, #000 10%, transparent 70%); opacity: 0.6; } @keyframes driften { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-3%, 3%, 0) scale(1.04); } } /* ------------------------------------------------------------------ Typografie ------------------------------------------------------------------ */ /* Gross, eng, ruhig. Eine Ueberschrift darf den halben Bildschirm einnehmen - dann liest man sie auch. */ h1, h2, h3 { margin: 0 0 0.35em; line-height: 1.07; letter-spacing: -0.035em; } h1 { font-size: clamp(2.2rem, 6.2vw, 4.2rem); font-weight: 700; } h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; } h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 650; letter-spacing: -0.02em; } p { line-height: 1.55; margin: 0 0 1em; font-size: 1.02rem; } a { color: var(--akzent-2); text-decoration: none; } a:hover { text-decoration: underline; } /* Der Vorspann unter einer Ueberschrift: gross genug, um gelesen zu werden, ruhig genug, um nicht mit ihr zu konkurrieren. */ .vorspann { font-size: clamp(1.05rem, 1.9vw, 1.35rem); line-height: 1.45; color: var(--ink-2); letter-spacing: -0.012em; max-width: 34em; } /* Kleine Ueberzeile ueber einer Ueberschrift. */ .ueberzeile { font-size: 0.8rem; font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; } /* ------------------------------------------------------------------ Raster ------------------------------------------------------------------ */ .buehne { width: 100%; max-width: var(--spalte); margin: 0 auto; padding-inline: var(--rand); } .buehne-breit { width: 100%; max-width: var(--spalte-breit); margin: 0 auto; padding-inline: var(--rand); } .abschnitt { padding-block: var(--luft); } .stapel > * + * { margin-top: 16px; } .verlauf { background: linear-gradient(100deg, var(--akzent) 0%, var(--pink) 45%, var(--akzent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .klein { font-size: 0.85rem; color: var(--ink-3); line-height: 1.5; } .mittel { font-size: 0.97rem; color: var(--ink-2); line-height: 1.55; } .mono { font-family: var(--mono); } .zentriert { text-align: center; } .stumm { color: var(--ink-3); } /* ------------------------------------------------------------------ Flächen ------------------------------------------------------------------ */ .karte { position: relative; background: var(--glas); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--schatten-s); padding: clamp(20px, 3vw, 30px); } .karte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glas-hi) 22%, var(--glas-hi) 78%, transparent); border-radius: var(--r-l) var(--r-l) 0 0; } .karte.leuchtet { box-shadow: var(--schatten-s), var(--glow); } /* Eine Karte, die sich wie eine Flaeche verhaelt: randlos, ohne Kante. Fuer Abschnitte, die den ganzen Blick bekommen sollen. */ .flaeche-gross { border-radius: var(--r-xl); padding: clamp(28px, 5vw, 60px); } .leiste { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--leiste); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); } /* ------------------------------------------------------------------ Bedienelemente ------------------------------------------------------------------ */ button, .knopf { font: inherit; font-weight: 620; color: var(--ink); background: var(--glas-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 22px; cursor: pointer; transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; -webkit-tap-highlight-color: transparent; } button:hover, .knopf:hover { border-color: var(--line-2); background: var(--flaeche-2); } button:active, .knopf:active { transform: scale(0.98); } button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* Ein gesperrter Hauptknopf soll nicht aussehen wie ein bereiter. */ button.knopf-haupt:disabled { background: var(--flaeche-2); border-color: var(--line); color: var(--ink-3); opacity: 1; } button:focus-visible, .knopf:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--akzent-2); outline-offset: 2px; } /* Eine Farbe, keine Verlaeufe. Ein Knopf muss nicht leuchten, er muss erkennbar sein - und der einzige gefuellte auf der Seite bleiben. */ .knopf-haupt { background: var(--akzent); border: 1px solid var(--akzent); color: #fff; font-weight: 650; box-shadow: none; } .knopf-haupt:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); } .knopf-still { background: transparent; border-color: var(--line); color: var(--ink-2); } .knopf-warn { border-color: var(--chip-bad-line); color: var(--bad); } .knopf-warn:hover { border-color: var(--bad); background: var(--chip-bad-bg); } .knopf-klein { padding: 8px 16px; font-size: 0.88rem; } input[type="text"], input[type="password"], textarea, select { font: inherit; color: var(--ink); background: var(--feld); border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 12px 15px; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; } input:focus, textarea:focus { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--chip-bg); } textarea { resize: vertical; min-height: 84px; line-height: 1.6; } ::placeholder { color: var(--ink-3); } /* ------------------------------------------------------------------ Chips, Kennzahlen, Balken ------------------------------------------------------------------ */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 650; background: var(--chip-bg); border: 1px solid var(--chip-line); color: var(--chip-ink); white-space: nowrap; } .chip-ok { background: var(--chip-ok-bg); border-color: var(--chip-ok-line); color: var(--chip-ok-ink); } .chip-warn { background: var(--chip-warn-bg); border-color: var(--chip-warn-line); color: var(--chip-warn-ink); } .chip-bad { background: var(--chip-bad-bg); border-color: var(--chip-bad-line); color: var(--chip-bad-ink); } .chip-still { background: var(--flaeche); border-color: var(--line); color: var(--ink-3); } .kennzahl { display: flex; flex-direction: column; gap: 2px; } .kennzahl .wert { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; } .kennzahl .label { font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0; text-transform: none; } .balken { height: 8px; border-radius: 999px; background: var(--spur); overflow: hidden; } .balken > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--akzent), var(--akzent-2)); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------------ Einblendungen ------------------------------------------------------------------ */ .rein { animation: rein 0.44s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .puls { animation: puls 1.6s ease-in-out infinite; } @keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 12px var(--ok); display: inline-block; } .punkt.aus { background: var(--ink-3); box-shadow: none; } /* ------------------------------------------------------------------ Meldung ------------------------------------------------------------------ */ .meldung { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(20px); background: var(--glas-2); backdrop-filter: blur(18px); border: 1px solid var(--line-2); border-radius: 999px; padding: 12px 22px; font-weight: 650; box-shadow: var(--schatten); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 200; max-width: min(92vw, 520px); text-align: center; } .meldung.an { opacity: 1; transform: translateX(-50%) translateY(0); } /* ------------------------------------------------------------------ Designumschalter ------------------------------------------------------------------ */ .design-knopf { background: var(--flaeche); border: 1px solid var(--line); color: var(--ink-3); padding: 6px 10px; font-size: 0.9rem; line-height: 1; } .design-knopf:hover { color: var(--ink); } /* ------------------------------------------------------------------ Layout ------------------------------------------------------------------ */ .huelle { width: 100%; max-width: 680px; margin: 0 auto; padding-inline: var(--rand); } .reihe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .reihe.dicht { gap: 6px; } .zwischen { justify-content: space-between; } .raster { display: grid; gap: 14px; } .stapel { display: flex; flex-direction: column; gap: 14px; } @media (prefers-reduced-motion: reduce) { .bg::before { animation: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }