/* ========================================================================== Agentur-CMS · Design-Schicht „Cockpit“ -------------------------------------------------------------------------- Liegt über cms.css und gibt dem CMS sein heutiges Gesicht: Navy und Cyan, große weiche Kacheln, eine dunkle Hero-Karte, echte Diagramme. cms.css bleibt das Gerüst (Layout, Abstände, Verhalten); hier stehen Farben, Flächen, Schatten, Schrift, das Dashboard-Raster und die Diagramme. Drei Farbstimmungen stehen am als data-theme: "dunkel" Nacht – tiefes Navy, leuchtendes Cyan "daemmerung" Dämmerung – blaugrauer Grund, helle Kacheln, Navy-Kopf "hell" Tag – fast weiß mit Lavendel-Hauch Ein Skript im Kopf der Seite setzt sie vor dem ersten Zeichnen, der Umschalter in der Kopfzeile wechselt (js/cms.js, Abschnitt Farbschema). Diagrammfarben (dg-s1 … dg-s5) sind je Stimmung mit dataviz/validate_palette.js geprüft: Reihenfolge Cyan, Blau, Orange, Violett, Magenta – benachbarte Farben auch bei Farbschwäche unterscheidbar. Aufbau: 01 Nacht 02 Dämmerung 03 Tag 04 Gemeinsames 05 Grund 06 Kopfzeile, Umschalter 07 Menü 08 Seitenkopf 09 Kacheln und Karten 10 Dashboard 11 Hero-Karte 12 Nächste Schritte 13 Diagramme 14 Tabellen 15 Abzeichen 16 Knöpfe 17 Felder 18 Meldungen, Leere 19 Anmeldung 20 Werkbank 21 Bewegung ========================================================================== */ /* -------------------------------------------------------------------------- 01 Nacht -------------------------------------------------------------------------- */ html[data-theme="dunkel"] { color-scheme: dark; --marke-dunkel: color-mix(in srgb, var(--marke) 80%, #fff); --marke-tiefer: color-mix(in srgb, var(--marke) 68%, #fff); --marke-text: color-mix(in srgb, var(--marke) 50%, #fff); --marke-rand: color-mix(in srgb, var(--marke) 55%, transparent); --marke-rand-fein: color-mix(in srgb, var(--marke) 30%, transparent); --marke-flaeche: color-mix(in srgb, var(--marke) 18%, #0d1d3d); --marke-flaeche-stark: color-mix(in srgb, var(--marke) 30%, #0d1d3d); --marke-schleier: color-mix(in srgb, var(--marke) 26%, transparent); --grund: #061127; --flaeche: #0d1d3d; --flaeche-2: #11264c; --flaeche-3: #183160; --flaeche-schleier: rgb(2 6 16 / 72%); --rand: #1c3462; --rand-fein: #162b52; --rand-stark: #2a4677; --text: #e9f1ff; --text-leise: #a9bbd9; --text-still: #8499bd; --erfolg: #3ee39a; --erfolg-flaeche: #0b2e27; --erfolg-rand: #1b5a48; --warnung: #ffc861; --warnung-flaeche: #2c2414; --warnung-rand: #5f4a1f; --fehler: #ff8f86; --fehler-flaeche: #33151c; --fehler-rand: #6a2a33; --info: #8fb2ff; --info-flaeche: #12234a; --info-rand: #2a4478; --neutral-flaeche: #132650; --neutral-rand: #24406f; --violett: #b69cff; --violett-flaeche: #221a48; --akzent: #2fd3e8; --akzent-flaeche: rgb(47 211 232 / 12%); --dg-1: #0fa6a6; --dg-2: #5a83f2; --dg-3: #c47a0a; --dg-4: #9a7cf2; --dg-5: #e0628f; --dg-x: #4a628f; --dg-gedaempft: #2a4677; --dg-gitter: #1a3060; --kopf-grund: rgb(7 18 40 / 78%); --kopf-text: #e9f1ff; --karte-grund: linear-gradient(180deg, #0f2246, #0c1b39); --karte-rand: rgb(96 150 240 / 16%); --schatten-1: 0 1px 2px rgb(0 0 0 / 45%); --schatten-2: 0 1px 2px rgb(0 0 0 / 40%), 0 14px 34px -16px rgb(0 0 0 / 75%); --schatten-3: 0 2px 6px rgb(0 0 0 / 45%), 0 26px 56px -20px rgb(0 0 0 / 85%); --schatten-4: 0 30px 80px -20px rgb(0 0 0 / 85%); --kante-licht: inset 0 1px 0 rgb(160 200 255 / 7%); --glanz: radial-gradient(1200px 600px at 100% -15%, rgb(47 211 232 / 13%), transparent 60%), radial-gradient(1000px 600px at -10% 110%, rgb(90 131 242 / 16%), transparent 60%), linear-gradient(180deg, #071431, #050d20); } /* -------------------------------------------------------------------------- 02 Dämmerung -------------------------------------------------------------------------- */ html[data-theme="daemmerung"] { color-scheme: light; --marke-dunkel: color-mix(in srgb, var(--marke) 84%, #000); --marke-tiefer: color-mix(in srgb, var(--marke) 72%, #000); --marke-text: color-mix(in srgb, var(--marke) 80%, #000); --marke-rand: color-mix(in srgb, var(--marke) 40%, transparent); --marke-rand-fein: color-mix(in srgb, var(--marke) 20%, transparent); --marke-flaeche: color-mix(in srgb, var(--marke) 10%, #eef2f9); --marke-flaeche-stark: color-mix(in srgb, var(--marke) 18%, #eef2f9); --marke-schleier: color-mix(in srgb, var(--marke) 14%, transparent); --grund: #8796b6; --flaeche: #eef2f9; --flaeche-2: #e2e8f3; --flaeche-3: #d4dcea; --flaeche-schleier: rgb(10 20 44 / 50%); --rand: #cfd8e8; --rand-fein: #dce3ef; --rand-stark: #b3c0d6; --text: #0c1a33; --text-leise: #3f5070; --text-still: #5c6b88; --erfolg: #0b7f50; --erfolg-flaeche: #dff3ea; --erfolg-rand: #a9dcc4; --warnung: #8e5c00; --warnung-flaeche: #fbf0d8; --warnung-rand: #ecd396; --fehler: #b42318; --fehler-flaeche: #fbe5e3; --fehler-rand: #f0bab4; --info: #1f4fcf; --info-flaeche: #e3ebfd; --info-rand: #bccdf7; --neutral-flaeche: #e1e7f1; --neutral-rand: #cbd4e3; --violett: #6d3fd8; --violett-flaeche: #ebe3fd; --akzent: #0e9fbb; --akzent-flaeche: rgb(14 159 187 / 12%); --dg-1: #0e9fbb; --dg-2: #3b5bdb; --dg-3: #e07b00; --dg-4: #8b5cf6; --dg-5: #d6457a; --dg-x: #9aa8c0; --dg-gedaempft: #2b3f6a; --dg-gitter: #d4dcea; --kopf-grund: rgb(18 34 68 / 92%); --kopf-text: #eef3ff; --karte-grund: #eef2f9; --karte-rand: rgb(255 255 255 / 60%); --schatten-1: 0 1px 2px rgb(14 26 52 / 10%); --schatten-2: 0 2px 4px rgb(14 26 52 / 8%), 0 18px 36px -18px rgb(14 26 52 / 45%); --schatten-3: 0 3px 8px rgb(14 26 52 / 10%), 0 26px 50px -20px rgb(14 26 52 / 55%); --schatten-4: 0 30px 70px -20px rgb(14 26 52 / 60%); --kante-licht: inset 0 1px 0 rgb(255 255 255 / 85%); --glanz: radial-gradient(1100px 600px at 100% -10%, rgb(255 255 255 / 22%), transparent 60%), linear-gradient(180deg, #95a3c1, #7f8fb0); } /* -------------------------------------------------------------------------- 03 Tag -------------------------------------------------------------------------- */ html[data-theme="hell"] { color-scheme: light; --marke-dunkel: color-mix(in srgb, var(--marke) 84%, #000); --marke-tiefer: color-mix(in srgb, var(--marke) 72%, #000); --marke-text: color-mix(in srgb, var(--marke) 84%, #000); --marke-rand: color-mix(in srgb, var(--marke) 38%, transparent); --marke-rand-fein: color-mix(in srgb, var(--marke) 18%, transparent); --marke-flaeche: color-mix(in srgb, var(--marke) 8%, #fff); --marke-flaeche-stark: color-mix(in srgb, var(--marke) 15%, #fff); --marke-schleier: color-mix(in srgb, var(--marke) 12%, transparent); --grund: #eceff9; --flaeche: #f9fbff; --flaeche-2: #eff3fa; --flaeche-3: #e3e9f4; --flaeche-schleier: rgb(10 16 32 / 45%); --rand: #e0e6f1; --rand-fein: #ebeff7; --rand-stark: #c7d1e2; --text: #0c1a33; --text-leise: #48597a; --text-still: #687792; --erfolg: #0b7f50; --erfolg-flaeche: #e4f6ee; --erfolg-rand: #b2e2cc; --warnung: #925f00; --warnung-flaeche: #fff5df; --warnung-rand: #f0d99c; --fehler: #b42318; --fehler-flaeche: #fdeceb; --fehler-rand: #f4c3be; --info: #1f4fcf; --info-flaeche: #ebf1ff; --info-rand: #c3d4fb; --neutral-flaeche: #edf1f8; --neutral-rand: #d9e0ec; --violett: #6d3fd8; --violett-flaeche: #f0eafe; --akzent: #0e9fbb; --akzent-flaeche: rgb(14 159 187 / 10%); --dg-1: #0e9fbb; --dg-2: #3b5bdb; --dg-3: #e07b00; --dg-4: #8b5cf6; --dg-5: #d6457a; --dg-x: #a3b0c6; --dg-gedaempft: #33476f; --dg-gitter: #e3e9f4; --kopf-grund: rgb(249 251 255 / 78%); --kopf-text: #0c1a33; --karte-grund: #f9fbff; --karte-rand: #e3e9f4; --schatten-1: 0 1px 2px rgb(30 50 90 / 6%); --schatten-2: 0 2px 4px rgb(30 50 90 / 5%), 0 16px 34px -16px rgb(30 50 90 / 22%); --schatten-3: 0 3px 8px rgb(30 50 90 / 6%), 0 24px 48px -18px rgb(30 50 90 / 30%); --schatten-4: 0 30px 70px -20px rgb(30 50 90 / 35%); --kante-licht: inset 0 1px 0 rgb(255 255 255 / 90%); --glanz: radial-gradient(1000px 520px at 100% -10%, rgb(14 159 187 / 9%), transparent 62%), radial-gradient(900px 520px at -10% 110%, rgb(139 92 246 / 8%), transparent 60%), linear-gradient(180deg, #f1f2fc, #e8ecf7); } /* -------------------------------------------------------------------------- 04 Gemeinsames -------------------------------------------------------------------------- */ html[data-theme] { --navy-1: #1d3b76; --navy-2: #13295a; --navy-3: #0b1a3b; --verlauf: linear-gradient(135deg, color-mix(in srgb, var(--marke) 92%, #fff), color-mix(in srgb, var(--marke) 60%, #0b1a3b)); --hero: linear-gradient(155deg, #23478c 0%, #142d62 45%, #0b1a3b 100%); --schrift: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; --rund-karte: 22px; } html[data-theme] .dg-s1 { --f: var(--dg-1); } html[data-theme] .dg-s2 { --f: var(--dg-2); } html[data-theme] .dg-s3 { --f: var(--dg-3); } html[data-theme] .dg-s4 { --f: var(--dg-4); } html[data-theme] .dg-s5 { --f: var(--dg-5); } html[data-theme] .dg-sx { --f: var(--dg-x); } html[data-theme] .dg-fehler { --f: var(--fehler); } /* Die Medien-Warnung hatte im Dunkeln eine feste Farbe – jetzt folgt sie dem Schema. */ html[data-theme="hell"] .medien-warnung, html[data-theme="hell"] .waehler-warnung, html[data-theme="daemmerung"] .medien-warnung, html[data-theme="daemmerung"] .waehler-warnung { color: var(--warnung); } /* -------------------------------------------------------------------------- 05 Grund -------------------------------------------------------------------------- */ html[data-theme] { background: var(--grund); } html[data-theme] body { min-height: 100vh; background: var(--glanz); background-attachment: fixed; -webkit-font-smoothing: antialiased; } html[data-theme] ::selection { background: color-mix(in srgb, var(--akzent) 30%, transparent); } /* -------------------------------------------------------------------------- 06 Kopfzeile und Umschalter -------------------------------------------------------------------------- */ html[data-theme] .kopfzeile { background: var(--kopf-grund); border-bottom: 1px solid color-mix(in srgb, var(--kopf-text) 10%, transparent); backdrop-filter: saturate(170%) blur(18px); color: var(--kopf-text); } html[data-theme] .kopfzeile .marke, html[data-theme] .kopfzeile .konto-name { color: var(--kopf-text); } html[data-theme] .kopfzeile .konto-abmelden { color: color-mix(in srgb, var(--kopf-text) 65%, transparent); } html[data-theme="daemmerung"] .kopfzeile .knopf--geist { border-color: rgb(255 255 255 / 22%); background: rgb(255 255 255 / 8%); color: #eef3ff; } html[data-theme="daemmerung"] .kopfzeile .website-wahl select { border-color: rgb(255 255 255 / 22%); background-color: rgb(255 255 255 / 8%); color: #eef3ff; } html[data-theme] .marke { gap: 10px; font-weight: 750; letter-spacing: -0.01em; } html[data-theme] .marke-punkt { position: relative; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(140deg, #3fdcf0, #1b7fd0 55%, #23478c); box-shadow: 0 6px 16px -6px rgb(47 211 232 / 70%), inset 0 1px 0 rgb(255 255 255 / 35%); } /* Signet: zwei versetzte Ebenen (Inhalt → Website) */ html[data-theme] .marke-punkt::before, html[data-theme] .marke-punkt::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 3px; } html[data-theme] .marke-punkt::before { left: 6px; top: 6px; border: 2px solid rgb(255 255 255 / 60%); } html[data-theme] .marke-punkt::after { right: 6px; bottom: 6px; background: #fff; } /* Drei Stimmungen wie in der Vorlage: Mond, Wolke mit Sonne, Sonne. */ .thema-wahl { display: inline-flex; gap: 2px; margin-right: 10px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--kopf-text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--kopf-text) 12%, transparent); } .thema-wahl button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: color-mix(in srgb, var(--kopf-text) 60%, transparent); cursor: pointer; transition: color var(--tempo) var(--kurve), background var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve); } .thema-wahl button:hover { color: var(--kopf-text); } .thema-wahl button[aria-pressed="true"] { background: color-mix(in srgb, var(--akzent) 18%, transparent); color: var(--akzent); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--akzent) 55%, transparent); } html[data-theme="daemmerung"] .thema-wahl button[aria-pressed="true"] { color: #6fe6f5; } /* -------------------------------------------------------------------------- 07 Menü -------------------------------------------------------------------------- */ html[data-theme] .seitenleiste { background: transparent; } html[data-theme="daemmerung"] .seitenleiste .menue { padding: 12px 10px; border-radius: var(--rund-karte); background: var(--flaeche); box-shadow: var(--schatten-2); } html[data-theme] .nav-titel { font-size: 10.5px; font-weight: 750; letter-spacing: 0.13em; color: var(--text-still); } html[data-theme] .nav-link { position: relative; gap: 12px; padding: 7px 10px; border-radius: 14px; color: var(--text-leise); transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve); } html[data-theme] .nav-link:hover { background: var(--flaeche-2); color: var(--text); transform: translateX(2px); } html[data-theme] .nav-symbol { width: 34px; height: 34px; border: 1px solid var(--rand-fein); border-radius: 11px; background: var(--flaeche); color: var(--text-still); box-shadow: var(--schatten-1); } html[data-theme] .nav-link:hover .nav-symbol { color: var(--akzent); } html[data-theme] .nav-link.aktiv { background: var(--akzent-flaeche); color: var(--text); font-weight: 700; } html[data-theme] .nav-link.aktiv::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--akzent); box-shadow: 0 0 12px var(--akzent); } html[data-theme] .nav-link.aktiv .nav-symbol { border-color: transparent; background: var(--hero); color: #6fe6f5; box-shadow: 0 8px 18px -8px rgb(11 26 59 / 80%); } /* -------------------------------------------------------------------------- 08 Seitenkopf -------------------------------------------------------------------------- */ html[data-theme] .seitenkopf h1 { font-size: clamp(1.6rem, 1.25rem + 1vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; } html[data-theme] .seitenkopf-text p { font-size: var(--gr-md); color: var(--text-leise); } html[data-theme="daemmerung"] .seitenkopf h1 { color: #0b1730; } html[data-theme="daemmerung"] .seitenkopf-text p { color: #1d2c4a; } /* -------------------------------------------------------------------------- 09 Kacheln und Karten -------------------------------------------------------------------------- */ html[data-theme] .karte, html[data-theme] .statistik { border: 1px solid var(--karte-rand); border-radius: var(--rund-karte); background: var(--karte-grund); box-shadow: var(--schatten-2), var(--kante-licht); } html[data-theme] .karte-kopf { border-bottom-color: var(--rand-fein); } html[data-theme] .karte-kopf h2 { font-size: var(--gr-lg); font-weight: 750; letter-spacing: -0.015em; } html[data-theme] .karte--warnung { border-color: var(--warnung-rand); background: linear-gradient(180deg, var(--warnung-flaeche), var(--flaeche) 70%); } /* Die alten Kacheln (andere Seiten) bekommen Ton und Symbol wie vorher. */ html[data-theme] .statistik { --ton: var(--akzent); --ton-flaeche: var(--akzent-flaeche); position: relative; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 2px 12px; padding: 18px; } html[data-theme] .statistik > * { grid-column: 1; } html[data-theme] .statistik-symbol { grid-column: 2; grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ton-flaeche); color: var(--ton); } html[data-theme] .statistik--ton-blau { --ton: var(--info); --ton-flaeche: var(--info-flaeche); } html[data-theme] .statistik--ton-gruen { --ton: var(--erfolg); --ton-flaeche: var(--erfolg-flaeche); } html[data-theme] .statistik--ton-gelb { --ton: var(--warnung); --ton-flaeche: var(--warnung-flaeche); } html[data-theme] .statistik--ton-rot { --ton: var(--fehler); --ton-flaeche: var(--fehler-flaeche); } html[data-theme] .statistik--ton-violett { --ton: var(--violett); --ton-flaeche: var(--violett-flaeche); } html[data-theme] .statistik--ton-grau { --ton: var(--text-still); --ton-flaeche: var(--neutral-flaeche); } /* -------------------------------------------------------------------------- 10 Dashboard-Raster 12 Spalten wie in der Vorlage; auf schmaleren Schirmen rutschen die Kacheln in zwei Spalten, auf dem Handy untereinander. -------------------------------------------------------------------------- */ .dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; } .dash-karte { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 18px; border: 1px solid var(--karte-rand); border-radius: var(--rund-karte); background: var(--karte-grund); box-shadow: var(--schatten-2), var(--kante-licht); transition: transform var(--tempo-lang) var(--kurve), box-shadow var(--tempo-lang) var(--kurve); } .dash-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-3), var(--kante-licht); } .dash-s3 { grid-column: span 3; } .dash-s4 { grid-column: span 4; } .dash-s5 { grid-column: span 5; } .dash-s7 { grid-column: span 7; } .dash-s8 { grid-column: span 8; } @media (max-width: 1400px) { .dash-s3, .dash-s4, .dash-s5 { grid-column: span 6; } .dash-s7, .dash-s8 { grid-column: span 12; } .dash-hero { grid-column: span 6; } } @media (max-width: 760px) { .dash { gap: 14px; } .dash > * { grid-column: 1 / -1 !important; } } .dash-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .dash-kopf h2 { margin: 0; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.015em; color: var(--text); } .dash-kopf p { margin: 2px 0 0; font-size: var(--gr-klein); color: var(--text-still); } .dash-zahl { display: inline-flex; align-items: center; gap: 6px; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; } .dash-zahl .symbol { width: 16px; height: 16px; color: var(--erfolg); } .dash-kopf .dash-zahl:has(.symbol) { font-size: var(--gr-klein); font-weight: 650; padding: 5px 10px; border-radius: 999px; background: var(--erfolg-flaeche); color: var(--erfolg); } .dash-kopf .dash-zahl--fehler { background: var(--fehler-flaeche) !important; color: var(--fehler) !important; } .dash-kopf .dash-zahl--fehler .symbol { color: var(--fehler); } /* -------------------------------------------------------------------------- 11 Hero-Karte: immer Navy – der Anker jeder Übersicht -------------------------------------------------------------------------- */ .dash-hero { overflow: hidden; border-color: rgb(120 170 255 / 22%); background: radial-gradient(260px 200px at 100% 0%, rgb(63 220 240 / 22%), transparent 70%), var(--hero); color: #eaf2ff; box-shadow: 0 24px 50px -22px rgb(11 26 59 / 85%), inset 0 1px 0 rgb(255 255 255 / 10%); } .hero-kopf { display: flex; align-items: center; justify-content: space-between; } .hero-etikett { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #9fe9f5; } .hero-etikett .symbol { width: 16px; height: 16px; } .hero-zahl { margin-top: 10px; font-size: clamp(3rem, 2.4rem + 2vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: #fff; } .hero-text { margin: 8px 0 12px; font-size: var(--gr-klein); color: #b8c8e8; } .hero-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / 10%); font-size: var(--gr-klein); color: #b8c8e8; } .hero-delta { padding: 3px 10px; border-radius: 999px; background: rgb(63 220 240 / 16%); color: #7ff0ff; font-weight: 750; } .dash-hero .dg-verlauf { height: 64px; margin: 0 -4px 6px; } .dash-hero .dg-verlauf-strich { stroke: #3fdcf0; } .dash-hero .dg-verlauf-flaeche { fill: rgb(63 220 240 / 14%); } .dash-hero .dg-prozent-spur { stroke: rgb(255 255 255 / 14%); } .dash-hero .dg-prozent-wert { stroke: #3fdcf0; filter: drop-shadow(0 0 4px rgb(63 220 240 / 70%)); } .dash-hero .dg-prozent b { color: #fff; } /* -------------------------------------------------------------------------- 12 Nächste Schritte -------------------------------------------------------------------------- */ .aufgaben { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .aufgabe { --ton: var(--akzent); --ton-flaeche: var(--akzent-flaeche); display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rand-fein); border-radius: 14px; background: var(--flaeche-2); color: var(--text); text-decoration: none; transition: transform var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve); } .aufgabe:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--ton) 45%, var(--rand)); background: color-mix(in srgb, var(--ton) 7%, var(--flaeche-2)); } .aufgabe--gelb { --ton: var(--warnung); --ton-flaeche: var(--warnung-flaeche); } .aufgabe--rot { --ton: var(--fehler); --ton-flaeche: var(--fehler-flaeche); } .aufgabe--blau { --ton: var(--info); --ton-flaeche: var(--info-flaeche); } .aufgabe--violett { --ton: var(--violett); --ton-flaeche: var(--violett-flaeche); } .aufgabe--gruen { --ton: var(--erfolg); --ton-flaeche: var(--erfolg-flaeche); } .aufgabe-symbol { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ton-flaeche); color: var(--ton); } .aufgabe-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .aufgabe-text b { font-size: var(--gr-normal); font-weight: 700; } .aufgabe-text small { font-size: var(--gr-sm); color: var(--text-still); } .aufgabe-pfeil { font-size: 22px; color: var(--text-still); } .aufgaben-leer { display: grid; justify-items: center; gap: 6px; margin: auto 0; padding: 18px 0; text-align: center; color: var(--text-still); } .aufgaben-leer .symbol { width: 40px; height: 40px; color: var(--erfolg); } .aufgaben-leer b { color: var(--text); } /* -------------------------------------------------------------------------- 13 Diagramme (lib/diagramme.php) -------------------------------------------------------------------------- */ .dg { position: relative; margin: 0; color: var(--text-leise); font-size: 11.5px; } /* Gitter: Haarlinien, durchgezogen, eine Stufe neben der Fläche */ .dg-plot { position: relative; height: 190px; margin-left: 34px; } .dg-gitter span { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--dg-gitter); } .dg-gitter b { position: absolute; right: calc(100% + 8px); top: -7px; font-weight: 500; color: var(--text-still); font-variant-numeric: tabular-nums; } /* Säulen: höchstens 24 px breit, oben 4 px rund, unten gerade */ .dg-spalten { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; } .dg-spalte { position: relative; display: flex; align-items: flex-end; justify-content: center; flex: 1; height: 100%; outline: none; } .dg-saeule { position: relative; width: min(24px, 60%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--dg-gedaempft); transition: filter var(--tempo) var(--kurve); } .dg-saeule.ist-hervor { background: linear-gradient(180deg, color-mix(in srgb, var(--dg-1) 70%, #fff), var(--dg-1)); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--dg-1) 60%, transparent); } .dg-saeule em { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-style: normal; font-weight: 700; font-size: 12px; color: var(--text); white-space: nowrap; } .dg-spalte:hover .dg-saeule, .dg-spalte:focus-visible .dg-saeule { filter: brightness(1.25); } .dg-achse-x { display: flex; justify-content: space-around; margin: 8px 0 0 34px; color: var(--text-still); } .dg-achse-x span { flex: 1; text-align: center; } .dg-achse-x .ist-hervor { color: var(--text); font-weight: 700; } /* Hover-Hinweis (gilt für Säulen und Linien-Zonen) */ .dg [data-tipp]:hover::after, .dg [data-tipp]:focus-visible::after { content: attr(data-tipp); position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 5; transform: translateX(-50%); padding: 6px 10px; border-radius: 9px; background: #0b1a3b; color: #eaf2ff; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 60%); pointer-events: none; } .dg-balken [data-tipp]:hover::after { bottom: auto; top: -36px; } /* Linie: 2 px, runde Enden, zarte Fläche darunter */ .dg-linie-flaeche { position: absolute; inset: 0; } .dg-linie-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .dg-strich { fill: none; stroke: var(--f); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .dg-flaeche { fill: var(--f); opacity: 0.12; } .dg-endpunkt { position: absolute; width: 10px; height: 10px; margin: 0 0 -5px -5px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 2px var(--flaeche); } .dg-endpunkt em { position: absolute; left: 14px; top: -5px; font-style: normal; font-weight: 700; color: var(--text); } .dg-zonen { position: absolute; inset: 0; display: flex; } .dg-zonen span { position: relative; flex: 1; outline: none; } .dg-zonen span:hover::before, .dg-zonen span:focus-visible::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid color-mix(in srgb, var(--text) 30%, transparent); } .dg-zonen span:hover::after { bottom: auto; top: -8px; transform: translate(-50%, -100%); } .dg-achse-x--linie { position: relative; display: block; height: 16px; } .dg-achse-x--linie span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .dg-linie .dg-plot { margin-right: 34px; } /* Ring: Teile mit 2-px-Lücke, Zahl in der Mitte, Legende mit Werten */ .dg-ring { display: grid; grid-template-columns: minmax(130px, 170px) 1fr; align-items: center; gap: 18px; } .dg-ring-huelle { position: relative; aspect-ratio: 1; } .dg-ring-svg { width: 100%; height: 100%; } .dg-ring-spur { fill: none; stroke: var(--flaeche-2); stroke-width: 14; } .dg-ring-teil { fill: none; stroke: var(--f); stroke-width: 14; transition: stroke-width var(--tempo) var(--kurve); } .dg-ring-teil:hover { stroke-width: 17; } .dg-ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; } .dg-ring-mitte b { font-size: 1.7rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; } .dg-ring-mitte span { font-size: 12px; color: var(--text-still); } .dg-legende { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; } .dg-legende li { display: grid; grid-template-columns: 10px 1fr auto 40px; align-items: center; gap: 8px; color: var(--text-leise); } .dg-legende i { width: 10px; height: 10px; border-radius: 3px; background: var(--f); } .dg-legende b { color: var(--text); font-variant-numeric: tabular-nums; } .dg-legende small { color: var(--text-still); text-align: right; font-variant-numeric: tabular-nums; } .dg-legende--zeile { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; } .dg-legende--zeile li { grid-template-columns: 10px auto auto; } @media (max-width: 520px) { .dg-ring { grid-template-columns: 1fr; justify-items: center; } .dg-ring-huelle { width: 170px; } .dg-legende { width: 100%; } } /* Netz: Haarlinien-Ringe, Fläche in Cyan, Werte an jeder Achse */ .dg-netz { display: flex; justify-content: center; } .dg-netz-svg { width: 100%; max-width: 380px; height: auto; overflow: visible; } .dg-netz-ring { fill: none; stroke: var(--dg-gitter); stroke-width: 1; } .dg-netz-ring:last-of-type { stroke: var(--rand-stark); } .dg-netz-achse { stroke: var(--dg-gitter); stroke-width: 1; } .dg-netz-daten { fill: color-mix(in srgb, var(--dg-1) 22%, transparent); stroke: var(--dg-1); stroke-width: 2; stroke-linejoin: round; } .dg-netz-punkt { fill: var(--dg-1); stroke: var(--flaeche); stroke-width: 2; } .dg-netz-text { fill: var(--text-leise); font-size: 11.5px; font-weight: 600; } .dg-netz-wert { fill: var(--text); font-weight: 800; } /* Mini-Verlauf und Prozent-Ring */ .dg-verlauf { display: block; width: 100%; height: 48px; } .dg-verlauf-strich { fill: none; stroke: var(--dg-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .dg-verlauf-flaeche { fill: color-mix(in srgb, var(--dg-1) 14%, transparent); } .dg-prozent { position: relative; display: inline-grid; place-items: center; width: 54px; height: 54px; } .dg-prozent svg { position: absolute; inset: 0; width: 100%; height: 100%; } .dg-prozent-spur { fill: none; stroke: var(--flaeche-3); stroke-width: 5; } .dg-prozent-wert { fill: none; stroke: var(--dg-1); stroke-width: 5; stroke-linecap: round; } .dg-prozent b { position: relative; font-size: 13px; font-weight: 800; } /* Tabellenansicht: ruhig, aufklappbar, für alle lesbar ohne Farbe */ .dg-tabelle { margin-top: 10px; font-size: var(--gr-sm); color: var(--text-still); } .dg-tabelle summary { width: max-content; cursor: pointer; list-style: none; font-weight: 600; } .dg-tabelle summary::before { content: "▸ "; } .dg-tabelle[open] summary::before { content: "▾ "; } .dg-tabelle summary:hover { color: var(--text); } .dg-tabelle table { width: 100%; margin-top: 8px; border-collapse: collapse; font-variant-numeric: tabular-nums; } .dg-tabelle caption { text-align: left; font-weight: 700; color: var(--text); padding-bottom: 4px; } .dg-tabelle th, .dg-tabelle td { padding: 4px 6px; border-bottom: 1px solid var(--rand-fein); text-align: left; } .dg-tabelle td { text-align: right; color: var(--text); } .dg-leer { color: var(--text-still); } /* -------------------------------------------------------------------------- 14 Tabellen -------------------------------------------------------------------------- */ html[data-theme] .tabelle th { background: var(--flaeche-2); color: var(--text-still); font-size: 11px; font-weight: 750; letter-spacing: 0.08em; } html[data-theme] .tabelle td { border-color: var(--rand-fein); } html[data-theme] .tabelle tbody tr { transition: background var(--tempo) var(--kurve); } html[data-theme] .tabelle tbody tr:hover { background: color-mix(in srgb, var(--akzent) 6%, transparent); } html[data-theme] .tabelle-titel { font-weight: 700; color: var(--text); } html[data-theme] .tabelle-titel:hover { color: var(--akzent); } /* -------------------------------------------------------------------------- 15 Abzeichen: Punkt vorne, damit der Status nie nur Farbe ist -------------------------------------------------------------------------- */ html[data-theme] .abzeichen { gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-weight: 700; } html[data-theme] .abzeichen::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } html[data-theme] .abzeichen--gruen::before { animation: design-puls 2.2s ease-in-out infinite; } @keyframes design-puls { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 6%, transparent); } } /* -------------------------------------------------------------------------- 16 Knöpfe: Pillen wie in der Vorlage -------------------------------------------------------------------------- */ html[data-theme] .knopf { border-radius: 999px; font-weight: 700; transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve), transform var(--tempo) var(--kurve), color var(--tempo) var(--kurve); } html[data-theme] .knopf:active { transform: translateY(1px); } html[data-theme] .knopf--haupt { border-color: transparent; background: var(--verlauf); color: #fff; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--marke) 90%, transparent), inset 0 1px 0 rgb(255 255 255 / 22%); } html[data-theme] .knopf--haupt:hover { background: var(--verlauf); filter: brightness(1.08); } html[data-theme] .knopf--geist { background: var(--flaeche); border-color: var(--rand); } html[data-theme] .knopf--geist:hover { border-color: color-mix(in srgb, var(--akzent) 50%, var(--rand)); color: var(--akzent); } /* -------------------------------------------------------------------------- 17 Felder -------------------------------------------------------------------------- */ html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="password"], html[data-theme] input[type="search"], html[data-theme] input[type="url"], html[data-theme] input[type="number"], html[data-theme] select, html[data-theme] textarea { border-radius: 12px; background-color: var(--flaeche); border-color: var(--rand-stark); } html[data-theme] input:focus-visible, html[data-theme] select:focus-visible, html[data-theme] textarea:focus-visible { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent); outline: none; } /* -------------------------------------------------------------------------- 18 Meldungen, leere Zustände -------------------------------------------------------------------------- */ html[data-theme] .meldung { border-radius: 16px; box-shadow: var(--schatten-1); } html[data-theme] .leer-zustand { border: 1.5px dashed var(--rand-stark); border-radius: var(--rund-karte); background: radial-gradient(240px 120px at 50% 0%, var(--akzent-flaeche), transparent 70%), var(--flaeche); } html[data-theme] .hinweis-box { border-radius: 16px; } /* -------------------------------------------------------------------------- 19 Anmeldung -------------------------------------------------------------------------- */ html[data-theme] .anmeldung { background: var(--glanz); } html[data-theme] .anmelde-bild { background: radial-gradient(60% 50% at 85% 10%, rgb(63 220 240 / 35%), transparent 65%), radial-gradient(80% 70% at 10% 100%, rgb(90 131 242 / 45%), transparent 70%), var(--hero); } /* -------------------------------------------------------------------------- 20 Werkbank -------------------------------------------------------------------------- */ html[data-theme] .werkbank-seiten, html[data-theme] .werkbank-panel { background: var(--flaeche); } html[data-theme] .seitenbaum-link.aktiv { background: var(--akzent-flaeche); color: var(--text); box-shadow: inset 3px 0 0 var(--akzent); } html[data-theme] .baustein-waehlen { border-radius: 14px; transition: transform var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve); } html[data-theme] .baustein-waehlen:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--akzent) 50%, var(--rand)); } /* -------------------------------------------------------------------------- 21 Bewegung -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .dash-karte, .aufgabe, html[data-theme] .nav-link, html[data-theme] .knopf { transition: none; } .dash-karte:hover, .aufgabe:hover { transform: none; } html[data-theme] .abzeichen--gruen::before { animation: none; } } /* -------------------------------------------------------------------------- 22 Befehlspalette (js/palette.js) -------------------------------------------------------------------------- */ .suche-start { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; height: 36px; margin-right: 10px; padding: 0 8px 0 12px; border: 1px solid color-mix(in srgb, var(--kopf-text) 14%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--kopf-text) 6%, transparent); color: color-mix(in srgb, var(--kopf-text) 65%, transparent); font: inherit; font-size: 13px; cursor: pointer; transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve); } .suche-start:hover { border-color: color-mix(in srgb, var(--akzent) 55%, transparent); background: color-mix(in srgb, var(--kopf-text) 9%, transparent); color: var(--kopf-text); } .suche-start span { flex: 1; text-align: left; } .suche-start kbd, .palette kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-bottom-width: 2px; border-radius: 5px; font: 600 10.5px/1 var(--schrift); color: inherit; } @media (max-width: 1100px) { .suche-start { min-width: 0; } .suche-start span, .suche-start kbd { display: none; } } .palette { position: fixed; inset: 0; z-index: 2147482000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; } .palette-hinter { position: absolute; inset: 0; background: rgb(4 10 24 / 55%); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s ease; } .palette-fenster { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); max-height: 70vh; overflow: hidden; border: 1px solid var(--karte-rand); border-radius: 20px; background: var(--flaeche); box-shadow: var(--schatten-4), 0 0 0 1px rgb(255 255 255 / 4%); transform: translateY(-8px) scale(.98); opacity: 0; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; } .palette--offen .palette-hinter { opacity: 1; } .palette--offen .palette-fenster { transform: none; opacity: 1; } .palette-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rand-fein); color: var(--akzent); } .palette-kopf kbd { color: var(--text-still); } .palette-feld { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text); font: 500 17px/1.3 var(--schrift); outline: none; } .palette-liste { flex: 1; margin: 0; padding: 8px; overflow-y: auto; list-style: none; transition: opacity .15s ease; } .palette-liste--laedt { opacity: .55; } .palette-gruppe { padding: 10px 10px 4px; font-size: 10.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--text-still); } .palette-eintrag { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; } .palette-eintrag.ist-gewaehlt { background: var(--akzent-flaeche); box-shadow: inset 3px 0 0 var(--akzent); } .palette-symbol { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--flaeche-2); color: var(--text-leise); } .ist-gewaehlt .palette-symbol { background: var(--hero); color: #6fe6f5; } .palette-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .palette-text b { font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-text small { color: var(--text-still); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-text mark { background: color-mix(in srgb, var(--akzent) 25%, transparent); color: inherit; border-radius: 3px; } .palette-pfeil { color: var(--text-still); opacity: 0; } .ist-gewaehlt .palette-pfeil { opacity: 1; } .palette-leer { padding: 28px 16px; text-align: center; color: var(--text-still); } .palette-fuss { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--rand-fein); font-size: 12px; color: var(--text-still); } .palette-fuss kbd { margin-right: 3px; } @media (prefers-reduced-motion: reduce) { .palette-fenster, .palette-hinter { transition: none; } } /* -------------------------------------------------------------------------- 23 Enterprise-Feinschliff Weicher Grund (Aurora-Licht statt flacher Fläche), Karten aus mattiertem Glas, ein ruhigeres Cyan und ein edles Enterprise-Blau für Hauptknöpfe. Überschreibt nur Werte aus 01–03; Kontraste sind nachgemessen (Fließtext ≥ 4,5:1, Nebentext ≥ 4,5:1 auf der Kartenfläche). -------------------------------------------------------------------------- */ html[data-theme="dunkel"] { --grund: #060b18; --akzent: #38c8e0; --akzent-flaeche: rgb(56 200 224 / 12%); --flaeche: #0e1830; --flaeche-2: rgb(148 180 255 / 7%); --flaeche-3: rgb(148 180 255 / 12%); --rand-fein: rgb(148 180 255 / 10%); --text-leise: #b0bed8; --text-still: #8f9fbe; --kopf-grund: rgb(6 11 24 / 62%); --karte-grund: linear-gradient(180deg, rgb(24 38 74 / 72%), rgb(13 23 48 / 72%)); --karte-rand: rgb(148 180 255 / 13%); --kante-licht: inset 0 1px 0 rgb(200 220 255 / 8%); --glanz: radial-gradient(900px 620px at 12% -8%, rgb(56 120 255 / 20%), transparent 62%), radial-gradient(800px 560px at 92% 4%, rgb(56 200 224 / 12%), transparent 60%), radial-gradient(1000px 700px at 55% 115%, rgb(124 92 255 / 15%), transparent 62%), linear-gradient(180deg, #070e20, #050914); } html[data-theme="daemmerung"] { --grund: #b8c3db; --akzent: #07728c; --akzent-flaeche: rgb(7 114 140 / 11%); --flaeche: #f4f7fd; --flaeche-2: rgb(226 233 246 / 80%); --rand-fein: rgb(190 202 226 / 60%); --text-leise: #3a4a68; --text-still: #55627d; --kopf-grund: rgb(14 26 56 / 86%); --karte-grund: rgb(248 250 255 / 76%); --karte-rand: rgb(255 255 255 / 80%); --kante-licht: inset 0 1px 0 rgb(255 255 255 / 95%); --schatten-2: 0 1px 2px rgb(30 45 85 / 6%), 0 20px 40px -22px rgb(30 45 85 / 38%); --schatten-3: 0 2px 6px rgb(30 45 85 / 8%), 0 28px 56px -24px rgb(30 45 85 / 48%); --dg-gitter: rgb(150 165 200 / 30%); --glanz: radial-gradient(900px 640px at 0% 0%, rgb(125 211 252 / 38%), transparent 62%), radial-gradient(900px 640px at 100% 0%, rgb(196 181 253 / 40%), transparent 62%), radial-gradient(1100px 700px at 50% 110%, rgb(147 197 253 / 34%), transparent 65%), linear-gradient(180deg, #c6cfe4, #aeb9d4); } html[data-theme="hell"] { --grund: #f2f5fb; --akzent: #07728c; --akzent-flaeche: rgb(7 114 140 / 9%); --flaeche-2: rgb(235 240 249 / 85%); --rand-fein: rgb(214 222 238 / 70%); --text-still: #5f6c86; --karte-grund: rgb(255 255 255 / 80%); --karte-rand: rgb(226 232 244 / 90%); --kante-licht: inset 0 1px 0 rgb(255 255 255 / 100%); --glanz: radial-gradient(900px 600px at 0% -5%, rgb(125 211 252 / 18%), transparent 62%), radial-gradient(900px 600px at 100% 0%, rgb(196 181 253 / 20%), transparent 62%), radial-gradient(1000px 640px at 50% 112%, rgb(147 197 253 / 16%), transparent 65%), linear-gradient(180deg, #f6f8fd, #edf1f9); } /* Enterprise-Blau für Hauptknöpfe (die Markenfarbe der Kundenwebsite bleibt im Portal erhalten). */ html[data-theme] .bereich-admin, html[data-theme] body.bereich-admin { --verlauf: linear-gradient(135deg, #3a64e6, #2747c9 70%, #1d3596); } /* Mattiertes Glas: Karten lassen den weichen Grund leicht durchscheinen. */ html[data-theme] .karte, html[data-theme] .statistik, html[data-theme] .dash-karte:not(.dash-hero), html[data-theme="daemmerung"] .seitenleiste .menue { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); } html[data-theme="daemmerung"] .seitenleiste .menue { background: rgb(248 250 255 / 72%); border: 1px solid rgb(255 255 255 / 80%); } /* Hero noch etwas edler: tiefes Blau mit Lichtkante */ .dash-hero { background: radial-gradient(280px 220px at 100% 0%, rgb(56 200 224 / 24%), transparent 70%), radial-gradient(300px 260px at 0% 100%, rgb(99 102 241 / 22%), transparent 70%), linear-gradient(155deg, #26489a 0%, #172f6b 45%, #0c1a3f 100%); } /* Weichere Kanten und ruhigere Tabellenköpfe im Glas */ html[data-theme] .tabelle th { background: color-mix(in srgb, var(--flaeche-2) 70%, transparent); } html[data-theme="daemmerung"] .kopfzeile, html[data-theme="dunkel"] .kopfzeile { box-shadow: 0 10px 30px -18px rgb(5 10 25 / 60%); } /* -------------------------------------------------------------------------- 24 Enterprise-System (letzte Schicht, gilt vor allem darüber) Leitlinie: ruhig, eindeutig, vertrauenswürdig – wie gute Verwaltungs- software (Linear, Stripe Dashboard, Carbon). Bedeutung entsteht durch Symbol und Wort, nicht durch Leuchten. - Ein Akzent: Enterprise-Blau. Cyan und Co. nur noch als Datenfarben. - Keine Glows, kein Pulsieren, kein Glas auf jeder Karte. - Feste Radien: Karten 14 px, Bedienelemente 10 px, Tags 6 px. - Status-Tags tragen ein Symbol (Haken, Ausrufezeichen, Uhr); Kategorien wie „Agentur“ oder „Kunde“ tragen keins. -------------------------------------------------------------------------- */ html[data-theme] { --rund-karte: 14px; --rund-element: 10px; --rund-tag: 6px; } html[data-theme="hell"] { --akzent: #2f54d6; --akzent-flaeche: rgb(47 84 214 / 8%); --flaeche: #ffffff; --flaeche-2: #f4f6fa; --rand: #e2e7f0; --rand-fein: #edf0f5; --karte-grund: #ffffff; --karte-rand: #e3e8f0; --kante-licht: inset 0 0 0 0 transparent; --schatten-2: 0 1px 2px rgb(23 37 84 / 5%), 0 6px 16px -10px rgb(23 37 84 / 14%); --schatten-3: 0 2px 4px rgb(23 37 84 / 6%), 0 14px 28px -14px rgb(23 37 84 / 22%); --glanz: radial-gradient(1200px 500px at 20% -10%, rgb(47 84 214 / 6%), transparent 60%), linear-gradient(180deg, #f6f8fb, #eff2f7); } html[data-theme="daemmerung"] { --akzent: #2f54d6; --akzent-flaeche: rgb(47 84 214 / 10%); --flaeche: #f6f8fc; --flaeche-2: #eaeef6; --rand: #d5dcea; --rand-fein: #e2e7f1; --karte-grund: #f6f8fc; --karte-rand: #d9e0ec; --kante-licht: inset 0 0 0 0 transparent; --schatten-2: 0 1px 2px rgb(23 37 84 / 8%), 0 10px 24px -14px rgb(23 37 84 / 30%); --schatten-3: 0 2px 4px rgb(23 37 84 / 10%), 0 18px 36px -18px rgb(23 37 84 / 38%); --glanz: radial-gradient(1200px 520px at 20% -10%, rgb(255 255 255 / 35%), transparent 60%), linear-gradient(180deg, #ccd4e4, #bcc6d9); } html[data-theme="dunkel"] { --akzent: #86a8ff; --akzent-flaeche: rgb(134 168 255 / 11%); --flaeche: #101a2e; --flaeche-2: #16223a; --flaeche-3: #1d2b47; --rand: #22304d; --rand-fein: #1b2741; --karte-grund: #101a2e; --karte-rand: #1f2c47; --kante-licht: inset 0 1px 0 rgb(255 255 255 / 3%); --schatten-2: 0 1px 2px rgb(0 0 0 / 35%), 0 10px 26px -16px rgb(0 0 0 / 70%); --schatten-3: 0 2px 4px rgb(0 0 0 / 40%), 0 20px 40px -20px rgb(0 0 0 / 80%); --kopf-grund: rgb(9 14 26 / 92%); --glanz: radial-gradient(1200px 520px at 20% -10%, rgb(80 110 200 / 10%), transparent 60%), linear-gradient(180deg, #0b1120, #080c17); } /* Massive Flächen statt Glas */ html[data-theme] .karte, html[data-theme] .statistik, html[data-theme] .dash-karte:not(.dash-hero), html[data-theme="daemmerung"] .seitenleiste .menue { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--karte-grund); border-radius: var(--rund-karte); } .dash-karte:hover { transform: none; box-shadow: var(--schatten-2), var(--kante-licht); } /* Kopfzeile: ein Ton, kein Leuchten */ html[data-theme] .marke-punkt { border-radius: 8px; background: #2f54d6; box-shadow: none; } .thema-wahl button[aria-pressed="true"], html[data-theme="daemmerung"] .thema-wahl button[aria-pressed="true"] { background: color-mix(in srgb, var(--kopf-text) 14%, transparent); color: var(--kopf-text); box-shadow: none; } html[data-theme] .kopfzeile { box-shadow: none; } /* Menü: aktiver Punkt mit klarer Kante, ohne Neon */ html[data-theme] .nav-link { border-radius: var(--rund-element); } html[data-theme] .nav-link:hover { transform: none; } html[data-theme] .nav-link.aktiv { background: var(--akzent-flaeche); } html[data-theme] .nav-link.aktiv::before { background: var(--akzent); box-shadow: none; } html[data-theme] .nav-symbol { border-radius: 8px; box-shadow: none; } html[data-theme] .nav-titel { letter-spacing: .06em; } html[data-theme] .nav-link.aktiv .nav-symbol { background: var(--akzent); color: #fff; box-shadow: none; } html[data-theme="dunkel"] .nav-link.aktiv .nav-symbol { color: #0b1120; } /* Knöpfe: Bedienelement-Radius, ein Blau, ruhiger Schatten */ html[data-theme] .knopf { border-radius: var(--rund-element); } html[data-theme] .knopf--haupt, html[data-theme] body.bereich-admin .knopf--haupt { background: #2f54d6; box-shadow: 0 1px 2px rgb(23 37 84 / 20%); filter: none; } html[data-theme="dunkel"] .knopf--haupt, html[data-theme="dunkel"] body.bereich-admin .knopf--haupt { background: #3a5fe0; } html[data-theme] .knopf--haupt:hover { filter: brightness(1.07); } /* Im Portal bleibt die Markenfarbe der Kundenwebsite der Hauptknopf. */ html[data-theme] body.bereich-portal .knopf--haupt { background: var(--marke); } html[data-theme] input[type="text"], html[data-theme] input[type="email"], html[data-theme] input[type="password"], html[data-theme] input[type="search"], html[data-theme] input[type="url"], html[data-theme] input[type="number"], html[data-theme] select, html[data-theme] textarea { border-radius: var(--rund-element); } html[data-theme] input:focus-visible, html[data-theme] select:focus-visible, html[data-theme] textarea:focus-visible { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); } /* ---- Tags: Status trägt ein Symbol, Kategorie nicht ---- */ html[data-theme] .abzeichen { gap: 5px; padding: 2px 8px; border-radius: var(--rund-tag); font-size: 12px; font-weight: 600; letter-spacing: 0; } html[data-theme] .abzeichen::before { content: none; animation: none; } html[data-theme] .abzeichen--gruen::before, html[data-theme] .abzeichen--rot::before, html[data-theme] .abzeichen--gelb::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 0; background: currentColor; box-shadow: none; -webkit-mask: var(--tag-symbol) center / contain no-repeat; mask: var(--tag-symbol) center / contain no-repeat; } /* Haken: erledigt, in Ordnung */ html[data-theme] .abzeichen--gruen { --tag-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Ausrufezeichen: braucht Aufmerksamkeit */ html[data-theme] .abzeichen--rot { --tag-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.95 3.2h1.9v5.2h-1.9zm0 6.5h1.9v1.9h-1.9z' fill='black'/%3E%3C/svg%3E"); } /* Uhr: in Arbeit, wartet */ html[data-theme] .abzeichen--gelb { --tag-symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M8 4.5V8l2.4 1.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Kategorien (Agentur, Rollen) wirken neutral – keine Statusfarbe. */ html[data-theme] .abzeichen--blau { border-color: var(--rand); background: var(--flaeche-2); color: var(--text); } /* ---- Monogramme für Websites und Benutzer ---- */ .monogramm { --h: 220; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: hsl(var(--h) 55% 92%); color: hsl(var(--h) 45% 30%); font-size: 12px; font-weight: 750; letter-spacing: .02em; } html[data-theme="dunkel"] .monogramm { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 70% 84%); } .mit-monogramm { display: flex; align-items: center; gap: 12px; min-width: 0; } .mit-monogramm-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .mit-monogramm-text small { color: var(--text-still); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Kompakte Website-Liste (Übersicht): drei Spalten, kein Querscrollen ---- */ .website-liste { margin: 0; padding: 4px 8px 8px; list-style: none; } .website-zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 12px 10px; border-radius: var(--rund-element); color: inherit; text-decoration: none; } .website-zeile + .website-zeile { border-top: 1px solid var(--rand-fein); } .website-zeile:hover { background: var(--akzent-flaeche); } .website-zeile b { color: var(--text); font-weight: 650; } .website-zustand { display: flex; flex-wrap: wrap; gap: 6px; } .website-umfang { display: flex; flex-direction: column; font-size: var(--gr-sm); color: var(--text-still); text-align: right; } .website-umfang b { font-size: var(--gr-normal); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .website-zeile { grid-template-columns: 1fr; gap: 8px; } .website-umfang { text-align: left; } } /* ---- Dashboard: Hero ohne Neon, Diagramme ohne Glow ---- */ .dash-hero { background: linear-gradient(160deg, #1f3a7a 0%, #142856 55%, #0e1d40 100%); border-color: rgb(255 255 255 / 8%); box-shadow: 0 12px 30px -18px rgb(14 29 64 / 70%); } .hero-etikett { letter-spacing: 0; text-transform: none; font-size: 13px; font-weight: 600; color: #c9d6f5; } .dash-hero .dg-prozent-wert { filter: none; } .hero-delta { background: rgb(255 255 255 / 10%); color: #fff; } .dg-saeule.ist-hervor { box-shadow: none; background: var(--dg-1); } .dg-netz-daten { fill: color-mix(in srgb, var(--dg-1) 16%, transparent); } .aufgabe { border-radius: var(--rund-element); } .aufgabe:hover { transform: none; } .aufgabe-symbol { border-radius: 8px; } html[data-theme] .statistik--rot { animation: none; } /* Palette und Suche im Akzent */ .palette-fenster { border-radius: var(--rund-karte); } .suche-start { border-radius: var(--rund-element); } .palette-eintrag { border-radius: var(--rund-element); } .palette-eintrag.ist-gewaehlt { box-shadow: inset 2px 0 0 var(--akzent); } .ist-gewaehlt .palette-symbol { background: var(--akzent); color: #fff; } html[data-theme="dunkel"] .ist-gewaehlt .palette-symbol { color: #0b1120; } /* -------------------------------------------------------------------------- 25 Tabellen ohne Querscrollen Unter 720 px Kartenbreite (oder wenn die Tabelle nachgemessen nicht passt, .ist-eng in Abschnitt 27) wird jede Zeile zur kompakten Karte: erste Spalte (Name) oben, Werte mit kleiner Beschriftung im Raster, Aktionen unten. Die Beschriftungen setzt js/cms.js (Abschnitt 14) aus dem Kopf. -------------------------------------------------------------------------- */ html[data-theme] .tabelle-huelle { container-type: inline-size; overflow-x: visible; } @container (max-width: 720px) { .tabelle--anpassbar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tabelle--anpassbar, .tabelle--anpassbar tbody { display: block; width: 100%; } .tabelle--anpassbar tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 18px; padding: 14px 16px; border-bottom: 1px solid var(--rand-fein); } .tabelle--anpassbar tbody tr:last-child { border-bottom: 0; } .tabelle--anpassbar td { display: block; min-width: 0; padding: 0; border: 0; } .tabelle--anpassbar td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 650; color: var(--text-still); } /* Name/Titel über die ganze Breite, ohne Beschriftung */ .tabelle--anpassbar td:first-child { grid-column: 1 / -1; } .tabelle--anpassbar td:first-child::before { display: none; } /* Aktionen unten über die ganze Breite */ .tabelle--anpassbar td:last-child:has(.knopf, .zeilen-aktionen, form) { grid-column: 1 / -1; } .tabelle--anpassbar td:last-child:has(.knopf, .zeilen-aktionen, form)::before { display: none; } .tabelle--anpassbar .zeilen-aktionen { justify-content: flex-start; } } @container (max-width: 720px) { .tabelle--anpassbar .zeilen-aktionen, .tabelle--anpassbar td:last-child { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; } .tabelle--anpassbar td:last-child > * { max-width: 100%; } } /* -------------------------------------------------------------------------- 26 Knöpfe mit Bedeutung (js/cms.js, Abschnitt 15) Farbe sagt, was passiert: Anlegen blau, Speichern grün, Veröffentlichen orange, Hochladen petrol, Löschen rot. Jede Bewegung hat einen Grund: Rückmeldung (drücken, halten, laden) oder Hinweis auf die Handlung (Plus dreht, Haken zeichnet sich, Pfeil hebt ab, Deckel hebt sich). -------------------------------------------------------------------------- */ html[data-theme] .knopf { position: relative; isolation: isolate; overflow: hidden; gap: 9px; transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-position .5s ease, border-color .2s ease, color .2s ease; } html[data-theme] .knopf:active, html[data-theme] .knopf.knopf--gedrueckt { transform: translateY(1px) scale(.98); } /* ---- Farbfamilien der Hauptknöpfe ---- */ html[data-theme] .knopf--haupt[data-art], html[data-theme] .knopf--gefahr[data-art], html[data-theme] body.bereich-admin .knopf--haupt[data-art], html[data-theme] body.bereich-portal .knopf--haupt[data-art] { border-color: transparent; background: linear-gradient(110deg, var(--k1, #2f54d6) 0%, var(--k2, #1d8cf0) 50%, var(--k1, #2f54d6) 100%); background-size: 220% 100%; background-position: 0% 50%; color: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 18%), 0 6px 16px -8px var(--k1, #2f54d6); } html[data-theme] .knopf[data-art]:is(.knopf--haupt, .knopf--gefahr):hover { background-position: 100% 50%; box-shadow: 0 2px 4px rgb(15 23 42 / 18%), 0 10px 22px -10px var(--k1, #2f54d6); filter: none; } /* Drei Familien statt sechs Farben – jede Stelle des Verlaufs hält mit weißer Schrift mindestens 4,5:1 (nachgerechnet, auch am hellen Ende): Hauptknopf ADence-Blau #2F4D9E → dunkles Türkis #1F6F85 7,85 … 5,72 Veröffentlichen dunkles Orange #B4480C → #993A09 5,42 … 7,09 Löschen Rot #B42330 → #A51D2A 6,51 … 7,48 */ html[data-theme] .knopf[data-art] { --k1: #2f4d9e; --k2: #1f6f85; } html[data-theme] .knopf[data-art="veroeffentlichen"] { --k1: #b4480c; --k2: #993a09; } html[data-theme] .knopf[data-art="loeschen"], html[data-theme] .knopf--gefahr[data-art] { --k1: #b42330; --k2: #a51d2a; } /* ---- Symbol-Feld links im Knopf ---- */ .knopf--mit-symbol { padding-left: 6px !important; } .knopf-symbol { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: rgb(255 255 255 / 18%); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .2s ease; } .knopf--geist .knopf-symbol, .knopf:not(.knopf--haupt):not(.knopf--gefahr) .knopf-symbol { background: var(--akzent-flaeche); color: var(--akzent); } .knopf-symbol svg { display: block; } /* Bewegung passend zur Handlung */ .knopf[data-art="neu"]:hover .knopf-symbol { transform: rotate(90deg); } .knopf[data-art="veroeffentlichen"]:hover .knopf-symbol svg { animation: knopf-abheben .6s cubic-bezier(.34, 1.56, .64, 1); } .knopf[data-art="hochladen"]:hover .knopf-symbol svg { animation: knopf-abheben .6s cubic-bezier(.34, 1.56, .64, 1); } .knopf[data-art="herunterladen"]:hover .knopf-symbol svg { animation: knopf-sinken .6s cubic-bezier(.34, 1.56, .64, 1); } .knopf[data-art="oeffnen"]:hover .knopf-symbol { transform: translate(2px, -2px); } .knopf[data-art="zurueck"]:hover .knopf-symbol { transform: translateX(-3px); } .knopf[data-art="bearbeiten"]:hover .knopf-symbol { transform: rotate(-12deg); } .knopf[data-art="speichern"] .zeichnen { stroke-dasharray: 22; stroke-dashoffset: 0; } .knopf[data-art="speichern"]:hover .zeichnen { animation: knopf-zeichnen .5s ease-out; } .knopf[data-art="loeschen"] .deckel { transform-origin: 18px 7px; transition: transform .25s ease; } .knopf[data-art="loeschen"]:hover .deckel { transform: rotate(-14deg) translateY(-1px); } @keyframes knopf-abheben { 0% { transform: translateY(0); } 40% { transform: translateY(-5px); } 100% { transform: translateY(0); } } @keyframes knopf-sinken { 0% { transform: translateY(0); } 40% { transform: translateY(4px); } 100% { transform: translateY(0); } } @keyframes knopf-zeichnen { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } } /* ---- Tastenkürzel im Hauptknopf ---- */ .knopf-taste { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 2px; padding: 0 5px; border-radius: 5px; background: rgb(255 255 255 / 18%); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 18%); font: 700 11px/1 var(--schrift); color: inherit; opacity: .9; } /* ---- Nebenknöpfe: Füllung kommt von der Seite der Maus ---- */ html[data-theme] .knopf:not(.knopf--haupt):not(.knopf--gefahr)::after { content: ""; position: absolute; left: var(--fx, 50%); top: var(--fy, 50%); z-index: -1; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent-flaeche); transform: translate(-50%, -50%) scale(0); transition: transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } html[data-theme] .knopf:not(.knopf--haupt):not(.knopf--gefahr):hover::after { transform: translate(-50%, -50%) scale(60); } /* ---- Gedrückt halten zum Löschen ---- */ .knopf--haelt::before, .knopf[data-art="loeschen"]::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 0%)); transform-origin: left center; transform: scaleX(0); pointer-events: none; } html[data-theme] .knopf.knopf--haelt::before { background: var(--fehler, #c2261b); opacity: .9; transform: scaleX(1); transition: transform var(--haltezeit, 850ms) linear; } .knopf--haelt { color: #fff !important; border-color: var(--fehler) !important; } html[data-theme] .knopf--haupt.knopf--haelt::before, html[data-theme] .knopf--gefahr.knopf--haelt::before, html[data-theme] .knopf[data-art="loeschen"]:is(.knopf--haupt, .knopf--gefahr).knopf--haelt::before { background: rgb(0 0 0 / 22%); } /* Kurzer Hinweis bei einfachem Klick: „gedrückt halten“ */ .knopf--hinweis { animation: knopf-schuetteln .35s ease; } .knopf--hinweis::after { content: "Gedrückt halten" !important; position: absolute !important; inset: auto 50% calc(100% + 8px) auto !important; left: 50% !important; top: auto !important; bottom: calc(100% + 8px) !important; width: auto !important; height: auto !important; padding: 4px 8px; border-radius: 6px !important; background: #0b1a3b !important; color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; transform: translateX(-50%) !important; animation: knopf-hinweis 1.6s ease forwards; } @keyframes knopf-schuetteln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } @keyframes knopf-hinweis { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } html[data-theme] .knopf:has(+ .knopf--hinweis), html[data-theme] .knopf--hinweis { overflow: visible; } /* ---- Ladestreifen beim Absenden ---- */ .knopf--laedt { pointer-events: none; cursor: progress; } .knopf--laedt::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 85%), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: knopf-laden 1s ease-in-out infinite; transform: none; } .knopf--geist.knopf--laedt::before, .knopf--laedt:not(.knopf--haupt):not(.knopf--gefahr)::before { background-image: linear-gradient(90deg, transparent, var(--akzent), transparent); } @keyframes knopf-laden { from { background-position: -40% 0; } to { background-position: 140% 0; } } @media (prefers-reduced-motion: reduce) { html[data-theme] .knopf, .knopf-symbol, .knopf[data-art="loeschen"] .deckel { transition: none; } .knopf:hover .knopf-symbol, .knopf:hover .knopf-symbol svg, .knopf:hover .zeichnen { animation: none !important; transform: none !important; } .knopf--laedt::before { animation-duration: 2.5s; } } /* -------------------------------------------------------------------------- 27 Einzelheiten in der Seitenleiste, Code-Blöcke, Feinschliff -------------------------------------------------------------------------- */ /* Zelle zeigt nur noch einen ruhigen Link „Einzelheiten ›“ */ .einzelheiten--leiste > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; color: var(--akzent); font-weight: 650; cursor: pointer; white-space: nowrap; } .einzelheiten--leiste > summary::-webkit-details-marker { display: none; } .einzelheiten--leiste > summary::marker { content: ""; } .einzelheiten--leiste > summary::after { content: "›"; font-size: 1.2em; transition: transform .2s ease; } .einzelheiten--leiste > summary:hover::after { transform: translateX(3px); } .einzelheiten--leiste > :not(summary) { display: none; } .zeile--klickbar { cursor: pointer; } /* Datum und Zahlen in Tabellen nicht umbrechen */ html[data-theme] .tabelle td:first-child span[title] { white-space: nowrap; font-variant-numeric: tabular-nums; } /* ---- Seitenleiste ---- */ .schublade { position: fixed; inset: 0; z-index: 2147481000; } .schublade-hinter { position: absolute; inset: 0; background: rgb(8 14 30 / 40%); opacity: 0; transition: opacity .2s ease; } .schublade-leiste { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(620px, 100vw); background: var(--flaeche); border-left: 1px solid var(--rand); box-shadow: -24px 0 60px -30px rgb(8 14 30 / 55%); transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); } .schublade--offen .schublade-hinter { opacity: 1; } .schublade--offen .schublade-leiste { transform: none; } .schublade-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--rand-fein); } .schublade-ober { margin: 0 0 4px; font-size: var(--gr-klein); color: var(--text-still); } .schublade-kopf h2 { margin: 0; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.015em; color: var(--text); } .schublade-status { margin-top: 10px; } .schublade-zu { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--rand); border-radius: var(--rund-element, 10px); background: var(--flaeche); color: var(--text-leise); cursor: pointer; } .schublade-zu:hover { color: var(--text); border-color: var(--rand-stark); } .schublade-inhalt { flex: 1; overflow-y: auto; padding: 20px 24px 28px; } /* Kennwerte als ruhiges Raster */ .schublade-inhalt .daten-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; } .schublade-inhalt .daten-liste dt { grid-row: 1; margin: 0; font-size: 11.5px; font-weight: 650; color: var(--text-still); } .schublade-inhalt .daten-liste dd { grid-row: 2; margin: 0; padding: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .schublade-inhalt .bericht-titel { margin: 18px 0 8px; font-size: var(--gr-klein); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text); } /* ---- Code-Blöcke: dunkel, eingefärbt, mit Kopieren ---- */ .code-huelle { position: relative; } html[data-theme] .code-block { max-height: 340px; overflow: auto; margin: 0; padding: 16px 18px; border: 1px solid #1c2740; border-radius: var(--rund-element, 10px); background: #0d1426; color: #c8d3ea; font: 12.5px/1.6 var(--schrift-mono); } html[data-theme] .code-block code { background: none; color: inherit; font: inherit; } .j-schluessel { color: #8fb3ff; } .j-text { color: #9fe3b3; } .j-zahl { color: #ffc27a; } .j-wort { color: #f59ac8; } .code-kopieren { position: absolute; top: 8px; right: 8px; z-index: 1; padding: 4px 10px; border: 1px solid rgb(255 255 255 / 14%); border-radius: 6px; background: rgb(255 255 255 / 8%); color: #dbe5fa; font: 600 11.5px/1.4 var(--schrift); cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease; } .code-huelle:hover .code-kopieren, .code-kopieren:focus-visible, .code-kopieren.ist-kopiert { opacity: 1; } .code-kopieren.ist-kopiert { background: rgb(62 227 154 / 18%); border-color: rgb(62 227 154 / 40%); } /* ---- Datei-Auswahl im Stil des CMS statt grauem Standardknopf ---- */ html[data-theme] input[type="file"] { max-width: 100%; padding: 6px; border: 1.5px dashed var(--rand-stark); border-radius: var(--rund-element, 10px); background: var(--flaeche-2); color: var(--text-leise); font: inherit; font-size: var(--gr-klein); cursor: pointer; } html[data-theme] input[type="file"]:hover { border-color: var(--akzent); } html[data-theme] input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); color: var(--text); font: 650 13px/1.2 var(--schrift); cursor: pointer; transition: border-color .15s ease, color .15s ease; } html[data-theme] input[type="file"]::file-selector-button:hover { border-color: var(--akzent); color: var(--akzent); } @media (prefers-reduced-motion: reduce) { .schublade-leiste, .schublade-hinter { transition: none; } } /* Gemessen statt geraten: js/cms.js setzt .ist-eng, sobald eine Tabelle nicht in ihre Karte passt – dann gilt dieselbe Kartenansicht wie oben. */ .ist-eng .tabelle--anpassbar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ist-eng .tabelle--anpassbar, .ist-eng .tabelle--anpassbar tbody { display: block; width: 100%; } .ist-eng .tabelle--anpassbar tbody tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 18px; padding: 14px 16px; border-bottom: 1px solid var(--rand-fein); } .ist-eng .tabelle--anpassbar tbody tr:last-child { border-bottom: 0; } .ist-eng .tabelle--anpassbar td { display: block; min-width: 0; padding: 0; border: 0; } .ist-eng .tabelle--anpassbar td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 650; color: var(--text-still); } .ist-eng .tabelle--anpassbar td:first-child { grid-column: 1 / -1; } .ist-eng .tabelle--anpassbar td:first-child::before { display: none; } .ist-eng .tabelle--anpassbar td:last-child:has(.knopf, .zeilen-aktionen, form) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; } .ist-eng .tabelle--anpassbar td:last-child:has(.knopf, .zeilen-aktionen, form)::before { display: none; } .ist-eng .tabelle--anpassbar .zeilen-aktionen { justify-content: flex-start; } /* -------------------------------------------------------------------------- 28 Neue Website: Formular links, Vorschau und Weg rechts -------------------------------------------------------------------------- */ .anlegen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); align-items: start; gap: 24px; max-width: 1280px; } @media (max-width: 1100px) { .anlegen { grid-template-columns: 1fr; } } html[data-theme] .anlegen-form { margin: 0; padding: 26px 28px 22px; } .anlegen-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rand-fein); } .anlegen-kopf h2 { margin: 0; font-size: 1.15rem; font-weight: 750; } .anlegen-kopf p { margin: 2px 0 0; color: var(--text-still); font-size: var(--gr-klein); } .anlegen-symbol { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: linear-gradient(140deg, #2f54d6, #1d8cf0); color: #fff; box-shadow: 0 8px 18px -10px #2f54d6; } .anlegen-symbol .symbol { width: 22px; height: 22px; } /* ---- Eingabe mit Zusatz vorne/hinten ---- */ .eingabe-gruppe { display: flex; align-items: center; border: 1px solid var(--rand-stark); border-radius: var(--rund-element, 10px); background: var(--flaeche); transition: border-color .15s ease, box-shadow .15s ease; } .eingabe-gruppe:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); } html[data-theme] .eingabe-gruppe input { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none !important; } .eingabe-vorne { display: inline-grid; place-items: center; flex: none; padding-left: 12px; color: var(--text-still); } .eingabe-vorne--text { font: 600 15px/1 var(--schrift-mono); } .eingabe-gruppe--gross input { font-size: 17px; font-weight: 600; min-height: 52px; } .eingabe-gruppe--gross .eingabe-vorne { padding-left: 10px; } .eingabe-gruppe--gross .monogramm { width: 34px; height: 34px; } .eingabe-hinten { flex: none; padding-right: 12px; font-size: 12px; font-weight: 650; white-space: nowrap; } .eingabe-hinten.ist-gut { color: var(--erfolg); } .eingabe-hinten.ist-falsch { color: var(--fehler); } .eingabe-gruppe:has(.ist-falsch) { border-color: var(--fehler-rand); } /* ---- Rechte Spalte ---- */ .anlegen-seite { display: grid; gap: 18px; } html[data-theme] .anlegen-seite .karte { margin: 0; padding: 20px 22px; } .anlegen-seite h3 { margin: 0 0 14px; font-size: var(--gr-klein); font-weight: 700; color: var(--text-still); } .anlegen-zeile { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; border: 1px solid var(--rand-fein); background: var(--flaeche-2); } .anlegen-zeile:hover { background: var(--flaeche-2); } .anlegen-zeile .monogramm, .eingabe-vorne .monogramm { transition: background .3s ease, color .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1); } .monogramm.ist-neu { transform: scale(1.12); } /* ---- Zeitleiste „So geht es weiter“ ---- */ .weg { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .weg-schritt { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 8px 0 14px; } .weg-schritt:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 44px; bottom: -4px; width: 2px; border-radius: 2px; background: var(--rand); } .weg-punkt { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--rand-stark); background: var(--flaeche); color: var(--text-still); } .weg-punkt .symbol { width: 17px; height: 17px; } .weg-schritt b { display: block; color: var(--text); font-weight: 700; } .weg-schritt span:not(.weg-punkt) { display: block; margin-top: 2px; font-size: var(--gr-klein); color: var(--text-still); line-height: 1.45; } .weg-schritt.ist-jetzt .weg-punkt { border-color: transparent; background: linear-gradient(140deg, #2f54d6, #1d8cf0); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, #2f54d6 18%, transparent); } .weg-schritt.ist-jetzt b { color: var(--akzent); } /* -------------------------------------------------------------------------- 29 Marke ADence, Firmenlogos, farbige Menüpunkte -------------------------------------------------------------------------- */ .marke-logo { display: inline-flex; flex: none; filter: drop-shadow(0 4px 10px rgb(27 58 176 / 35%)); } .marke-logo svg { display: block; } .marke-wort { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; color: var(--kopf-text, var(--text)); } .marke-wort b { font-weight: 850; } .anmelde-marke { display: flex; align-items: center; gap: 10px; } .anmelde-marke .marke-wort { color: var(--text); font-size: 20px; } /* Firmenlogo mit Monogramm darunter */ .website-logo { position: relative; display: inline-grid; flex: none; width: 32px; height: 32px; } .website-logo > * { grid-area: 1 / 1; } .website-logo img { width: 100%; height: 100%; border-radius: 8px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px rgb(15 23 42 / 8%); } .kopfzeile .website-logo { width: 30px; height: 30px; } .kopfzeile .website-logo .monogramm { width: 30px; height: 30px; } .nav-symbol--logo { padding: 0 !important; border: 0 !important; background: none !important; overflow: hidden; } .nav-symbol--logo .website-logo, .nav-symbol--logo .monogramm { width: 100%; height: 100%; font-size: 11px; } /* Jede Rubrik hat ihre Farbe: getöntes Feld, gefüllt wenn aktiv */ .nav-ton-blau { --ton: #2f54d6; } .nav-ton-petrol { --ton: #0b7f9c; } .nav-ton-violett { --ton: #7c4dde; } .nav-ton-orange { --ton: #df6a12; } .nav-ton-schiefer { --ton: #475569; } .nav-ton-grau { --ton: #5b6578; } .nav-ton-pink { --ton: #d0307a; } .nav-ton-gruen { --ton: #15803d; } .nav-ton-rot { --ton: #cf2b2b; } .nav-ton-himmel { --ton: #0277bd; } .nav-ton-bernstein { --ton: #c26a05; } html[data-theme] [class*="nav-ton-"] .nav-symbol:not(.nav-symbol--logo) { border-color: transparent; background: color-mix(in srgb, var(--ton) 12%, var(--flaeche)); color: var(--ton); } html[data-theme="dunkel"] [class*="nav-ton-"] .nav-symbol:not(.nav-symbol--logo) { background: color-mix(in srgb, var(--ton) 26%, var(--flaeche)); color: color-mix(in srgb, var(--ton) 55%, #fff); } html[data-theme] [class*="nav-ton-"].aktiv .nav-symbol:not(.nav-symbol--logo) { background: var(--ton); color: #fff; box-shadow: 0 6px 14px -8px var(--ton); } html[data-theme] [class*="nav-ton-"].aktiv::before { background: var(--ton); } html[data-theme] [class*="nav-ton-"].aktiv { background: color-mix(in srgb, var(--ton) 9%, transparent); } html[data-theme] [class*="nav-ton-"]:hover .nav-symbol:not(.nav-symbol--logo) { background: color-mix(in srgb, var(--ton) 20%, var(--flaeche)); color: var(--ton); } html[data-theme="dunkel"] [class*="nav-ton-"]:hover .nav-symbol:not(.nav-symbol--logo) { color: color-mix(in srgb, var(--ton) 45%, #fff); } html[data-theme] .nav-link.aktiv .nav-symbol--logo { box-shadow: 0 0 0 2px var(--akzent); border-radius: 8px; } /* -------------------------------------------------------------------------- 30 Passwörter bequem (js/cms.js, Abschnitt 18) -------------------------------------------------------------------------- */ .passwort-feld { position: relative; display: block; } html[data-theme] .passwort-feld input { width: 100%; padding-right: 44px; } .passwort-auge { position: absolute; top: 50%; right: 6px; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text-still); cursor: pointer; transform: translateY(-50%); } .passwort-auge:hover { color: var(--akzent); background: var(--akzent-flaeche); } .passwort-auge .auge-zu { display: none; } .ist-sichtbar .passwort-auge .auge-offen { display: none; } .ist-sichtbar .passwort-auge .auge-zu { display: inline; } .passwort-helfer { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--rand-fein); border-radius: var(--rund-element, 10px); background: var(--flaeche-2); } .passwort-staerke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .passwort-staerke i { height: 5px; border-radius: 3px; background: var(--rand); transition: background .25s ease; } .passwort-helfer[data-stufe="0"] .passwort-staerke i:nth-child(-n+1), .passwort-helfer[data-stufe="1"] .passwort-staerke i:nth-child(-n+1) { background: var(--fehler); } .passwort-helfer[data-stufe="2"] .passwort-staerke i:nth-child(-n+2) { background: var(--warnung); } .passwort-helfer[data-stufe="3"] .passwort-staerke i:nth-child(-n+3) { background: var(--erfolg); } .passwort-helfer[data-stufe="4"] .passwort-staerke i { background: var(--erfolg); } .passwort-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: var(--gr-klein); } .passwort-stufe { color: var(--text-leise); font-weight: 600; } .passwort-vorschlag { padding: 4px 10px; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); color: var(--akzent); font: 650 12.5px/1.4 var(--schrift); cursor: pointer; } .passwort-vorschlag:hover { border-color: var(--akzent); } .passwort-regeln { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--text-still); } .passwort-regeln li { display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; } .passwort-regeln li::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--rand-stark); border-radius: 50%; transition: background .2s ease, border-color .2s ease; } .passwort-regeln li.ist-erfuellt { color: var(--erfolg); } .passwort-regeln li.ist-erfuellt::before { border-color: var(--erfolg); background: var(--erfolg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; } /* -------------------------------------------------------------------------- 31 ADence-Auftritt Farben, Schrift und Logo aus dem Markenauftritt von adence.de: Blau #2F4D9E, Türkis #2FA3BA, Verlauf Blau → Türkis (115°), Dunkel #0A1322, Schrift Archivo (variabel) und Plex Mono. Die Schriftdateien liegen in css/schrift/, das Signet in css/marke/ – nichts kommt aus dem Netz. -------------------------------------------------------------------------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("schrift/archivo-normal-100-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("schrift/archivo-normal-100-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; } @font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("schrift/plexmono-normal-400-latin.woff2") format("woff2"); } @font-face { font-family: "Plex Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("schrift/plexmono-normal-600-latin.woff2") format("woff2"); } html[data-theme] { --ad-blau: #2f4d9e; --ad-blau-tief: #223a7c; --ad-tuerkis: #2fa3ba; --ad-tuerkis-text: #1e7b90; --ad-tuerkis-tief: #1f6f85; /* Endet im dunklen Türkis: weiße Schrift hält überall ≥ 5,7:1. */ --ad-verlauf: linear-gradient(115deg, var(--ad-blau) 10%, var(--ad-tuerkis-tief) 90%); --schrift: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --schrift-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } html[data-theme="hell"] { --akzent: #2f4d9e; --akzent-flaeche: rgb(47 77 158 / 8%); --erfolg: #0a7249; --grund: #f5f7fb; --text: #0c1626; --text-leise: #46536b; --rand: #dde4ef; --karte-rand: #dde4ef; --dg-1: #2fa3ba; --dg-2: #2f4d9e; --glanz: radial-gradient(1100px 520px at 15% -10%, rgb(47 163 186 / 8%), transparent 60%), radial-gradient(900px 500px at 95% 0%, rgb(47 77 158 / 7%), transparent 60%), linear-gradient(180deg, #f7f9fc, #f1f4f9); } html[data-theme="daemmerung"] { --akzent: #2f4d9e; --akzent-flaeche: rgb(47 77 158 / 10%); --erfolg: #0a7249; --text: #0c1626; --dg-1: #2fa3ba; --dg-2: #2f4d9e; --kopf-grund: rgb(10 19 34 / 92%); } html[data-theme="dunkel"] { --akzent: #4cc3d9; --akzent-flaeche: rgb(76 195 217 / 11%); --grund: #0a1322; --flaeche: #0e1a30; --flaeche-2: #13213b; --karte-grund: #0e1a30; --karte-rand: rgb(255 255 255 / 9%); --rand: rgb(255 255 255 / 10%); --rand-fein: rgb(255 255 255 / 7%); --text-leise: #b9c4d8; --kopf-grund: rgb(10 19 34 / 92%); --dg-1: #2fa3ba; --glanz: radial-gradient(1100px 520px at 15% -10%, rgb(47 163 186 / 12%), transparent 60%), radial-gradient(900px 500px at 95% 0%, rgb(47 77 158 / 18%), transparent 60%), linear-gradient(180deg, #0b1526, #08101d); } html[data-theme] body, html[data-theme] button, html[data-theme] input, html[data-theme] select, html[data-theme] textarea { font-family: var(--schrift); } /* Überschriften wie auf adence.de: etwas breiter, kräftig, eng gesetzt */ html[data-theme] .seitenkopf h1, html[data-theme] .dash-kopf h2, html[data-theme] .karte-kopf h2, html[data-theme] .hero-zahl, html[data-theme] .statistik-zahl, html[data-theme] .dg-ring-mitte b, html[data-theme] .schublade-kopf h2 { font-stretch: 105%; letter-spacing: -0.02em; } /* ---- Logo: farbig auf hellem Kopf, weiß auf dunklem ---- */ html[data-theme] .marke { gap: 3px; } .marke-logo { display: inline-grid; flex: none; filter: none; } .marke-logo > * { grid-area: 1 / 1; } .marke-bild { display: block; width: 34px; height: 34px; } .marke-wort { font-family: var(--schrift); font-size: 1.42rem; font-weight: 750; font-stretch: 105%; letter-spacing: -0.015em; line-height: 1; margin-top: 0.1em; } .marke-wort b { font-weight: inherit; } .marke-punkt-ende { color: var(--ad-tuerkis); } html[data-theme="hell"] .kopfzeile .marke-bild--hell, html[data-theme="daemmerung"] .kopfzeile .marke-bild--farbe, html[data-theme="dunkel"] .kopfzeile .marke-bild--farbe { display: none; } html[data-theme="daemmerung"] .kopfzeile .marke-bild--hell, html[data-theme="dunkel"] .kopfzeile .marke-bild--hell { display: block; } html[data-theme="hell"] .kopfzeile .marke-bild--farbe { display: block; } /* Anmeldeseite: helle Spalte mit farbigem Logo */ .anmelde-marke .marke-bild--hell { display: none; } html[data-theme="dunkel"] .anmelde-marke .marke-bild--hell { display: block; } html[data-theme="dunkel"] .anmelde-marke .marke-bild--farbe { display: none; } .anmelde-marke { gap: 3px; } /* ---- Markenverlauf: Hero-Karte, Anmeldebild, Hauptknopf „neu“ ---- */ .dash-hero { background: radial-gradient(320px 240px at 100% 0%, rgb(76 195 217 / 22%), transparent 70%), linear-gradient(115deg, #24407f 0%, #1c3a72 45%, #165f74 100%); } html[data-theme] .anmelde-bild { background: radial-gradient(60% 50% at 85% 10%, rgb(76 195 217 / 30%), transparent 65%), linear-gradient(115deg, #24407f 10%, #165f74 90%); } /* Ein Hauptknopf überall – auch im Portal. Die Kundenfarbe kann zu hell für weiße Schrift sein; sie bleibt dort Akzent (Logo, Fokus), nicht Knopffläche. */ html[data-theme] .knopf--haupt:not([data-art]), html[data-theme] body.bereich-admin .knopf--haupt:not([data-art]), html[data-theme] body.bereich-portal .knopf--haupt:not([data-art]) { background: var(--ad-verlauf); color: #fff; } html[data-theme] .knopf--haupt:not([data-art]):hover { background: linear-gradient(115deg, var(--ad-blau-tief) 10%, #1a5f72 90%); filter: none; } /* Aktiver Menüpunkt und Fokus in Markenblau bzw. Türkis */ html[data-theme] .weg-schritt.ist-jetzt .weg-punkt, html[data-theme] .anlegen-symbol { background: var(--ad-verlauf); box-shadow: 0 8px 18px -10px var(--ad-blau); } /* Missions-Knopf in Markenfarben statt Neon */ html[data-theme] .tour-start { border-color: rgb(76 195 217 / 35%); background: linear-gradient(115deg, #1d3570, #145566); } /* -------------------------------------------------------------------------- 32 ADence-Kacheln für Symbole Abgeschrägte Ecken im Winkel des AD-Signets, Verlauf je Bedeutung, weißes Duotone-Symbol und ein diagonaler Lichtstreif wie der Schrägstrich im Logo. -------------------------------------------------------------------------- */ .symbol .duo { fill: currentColor; fill-opacity: .3; stroke: none; } .aufgabe { --a1: #2f4d9e; --a2: #1e7b90; } .aufgabe--gelb { --a1: #f5a524; --a2: #e0620d; } .aufgabe--rot { --a1: #f04452; --a2: #b4123c; } .aufgabe--blau { --a1: #2f4d9e; --a2: #1e7b90; } .aufgabe--violett { --a1: #8f5cf6; --a2: #5b2bc4; } .aufgabe--gruen { --a1: #1fb985; --a2: #0b7a52; } html[data-theme] .aufgabe-symbol { position: relative; overflow: hidden; width: 42px; height: 42px; border-radius: 0; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; clip-path: polygon(26% 0, 100% 0, 100% 74%, 74% 100%, 0 100%, 0 26%); box-shadow: none; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } /* Lichtstreif im Winkel des AD-Schrägstrichs */ html[data-theme] .aufgabe-symbol::after { content: ""; position: absolute; top: -30%; left: 18%; width: 22%; height: 160%; background: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 26%), rgb(255 255 255 / 0%)); transform: rotate(32deg); transition: left .5s ease; pointer-events: none; } html[data-theme] .aufgabe-symbol .symbol { position: relative; z-index: 1; width: 22px; height: 22px; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 18%)); } html[data-theme] .aufgabe-symbol .duo { fill-opacity: .38; } .aufgabe:hover .aufgabe-symbol { transform: rotate(-6deg) scale(1.06); } .aufgabe:hover .aufgabe-symbol::after { left: 70%; } /* Ruhiger Rahmen mit Akzentkante in der Kachelfarbe */ html[data-theme] .aufgabe { grid-template-columns: 42px 1fr auto; border-color: var(--rand-fein); background: var(--flaeche-2); } html[data-theme] .aufgabe:hover { border-color: color-mix(in srgb, var(--a1) 40%, var(--rand)); background: color-mix(in srgb, var(--a1) 6%, var(--flaeche-2)); } html[data-theme] .aufgabe-pfeil { color: color-mix(in srgb, var(--a1) 70%, var(--text-still)); transition: transform .2s ease; } .aufgabe:hover .aufgabe-pfeil { transform: translateX(3px); } /* „Alles erledigt“ ebenfalls als ADence-Kachel */ html[data-theme] .aufgaben-leer .symbol { width: 54px; height: 54px; padding: 12px; background: linear-gradient(135deg, #1fb985, #0b7a52); color: #fff; clip-path: polygon(26% 0, 100% 0, 100% 74%, 74% 100%, 0 100%, 0 26%); } @media (prefers-reduced-motion: reduce) { .aufgabe:hover .aufgabe-symbol { transform: none; } html[data-theme] .aufgabe-symbol::after { transition: none; } } html[data-theme] .aufgabe, html[data-theme] .aufgabe:hover, html[data-theme] .aufgabe:focus-visible { text-decoration: none; } .aufgabe:hover .aufgabe-symbol { transform: translateY(-2px) scale(1.05); } /* -------------------------------------------------------------------------- 33 Hilfe-Seite Oben die zwei Wege zur Hilfe (Tour und Mensch), darunter der Ablauf als verbundener Weg und die Fragen nach Thema gebündelt, mit Sofortsuche. -------------------------------------------------------------------------- */ .hilfe-start { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; margin-bottom: 34px; } .hilfe-tour, .hilfe-kontakt { border-radius: 16px; padding: 24px 26px; } .hilfe-tour { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; color: #fff; background: radial-gradient(320px 220px at 100% 0%, rgb(76 195 217 / 24%), transparent 70%), linear-gradient(115deg, #24407f 0%, #1c3a72 45%, #165f74 100%); box-shadow: 0 18px 40px -26px rgb(34 58 124 / 70%); } html[data-theme] .hilfe-tour h2 { margin: 0 0 4px; font-size: 1.22rem; font-weight: 750; font-stretch: 105%; letter-spacing: -0.01em; color: #fff; } .hilfe-tour p { margin: 0; color: rgb(255 255 255 / 86%); line-height: 1.5; } .hilfe-tour-symbol, .hilfe-kontakt-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; } .hilfe-tour-symbol { background: rgb(255 255 255 / 14%); color: #fff; } .hilfe-tour-symbol svg { width: 26px; height: 26px; } .hilfe-tour-los { padding: 12px 22px; border: 0; border-radius: 10px; background: #fff; color: #1c3a72; font: 700 .98rem/1.2 var(--schrift); white-space: nowrap; cursor: pointer; box-shadow: 0 8px 20px -12px rgb(0 0 0 / 50%); transition: transform .15s ease, background .15s ease; } .hilfe-tour-los:hover { background: #e8f6f9; transform: translateY(-1px); } .hilfe-tour-los:active { transform: translateY(1px); } .hilfe-tour-los:focus-visible { outline: 3px solid #9be3f0; outline-offset: 3px; } .hilfe-kontakt { border: 1px solid var(--karte-rand); background: var(--karte-grund, var(--flaeche)); } .hilfe-kontakt-symbol { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 11px; background: var(--akzent-flaeche); color: var(--akzent); } .hilfe-kontakt-symbol svg { width: 21px; height: 21px; } html[data-theme] .hilfe-kontakt h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--text); } .hilfe-kontakt p { margin: 0 0 10px; color: var(--text-leise); line-height: 1.5; font-size: var(--gr-klein, .92rem); } .hilfe-kontakt-link { font-weight: 650; color: var(--akzent); overflow-wrap: anywhere; } /* Der Weg: vier Stationen, verbunden durch eine Linie im Markenverlauf */ .hilfe-weg { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 38px; padding: 0; list-style: none; } .hilfe-weg::before { content: ""; position: absolute; top: 21px; left: 22px; right: calc(25% - 4px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ad-blau), var(--ad-tuerkis)); opacity: .5; } .hilfe-weg-schritt { position: relative; } .hilfe-weg-nummer { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--ad-verlauf); color: #fff; font: 600 1.05rem/1 var(--schrift-mono); box-shadow: 0 0 0 6px var(--grund), 0 8px 18px -10px var(--ad-blau); } .hilfe-weg-schritt b { display: block; margin-bottom: 4px; font-size: 1.02rem; font-weight: 700; color: var(--text); } .hilfe-weg-schritt > span:last-child { display: block; max-width: 34ch; color: var(--text-leise); line-height: 1.55; font-size: var(--gr-klein, .92rem); } /* Fragen */ .hilfe-fragen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; } html[data-theme] .hilfe-fragen-kopf .abschnitt-titel { margin: 0; } .hilfe-suche { position: relative; display: block; width: min(340px, 100%); } .hilfe-suche svg { position: absolute; top: 50%; left: 12px; width: 17px; height: 17px; transform: translateY(-50%); color: var(--text-leise); pointer-events: none; } html[data-theme] .hilfe-suche input { width: 100%; padding-left: 38px; } .hilfe-gruppen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .hilfe-spalte { display: grid; gap: 18px; } .hilfe-gruppe[hidden] { display: none; } .hilfe-gruppe { padding: 8px 6px 6px; border: 1px solid var(--karte-rand); border-radius: 16px; background: var(--karte-grund, var(--flaeche)); } html[data-theme] .hilfe-gruppe h3 { display: flex; align-items: center; gap: 10px; margin: 6px 12px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-leise); } .hilfe-gruppe h3 span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--akzent-flaeche); color: var(--akzent); } .hilfe-gruppe h3 svg { width: 16px; height: 16px; } html[data-theme] .hilfe-gruppe .faq-eintrag { margin: 0; border: 0; border-top: 1px solid var(--rand-fein, var(--rand)); border-radius: 0; background: transparent; box-shadow: none; } html[data-theme] .hilfe-gruppe .faq-frage { padding: 13px 40px 13px 12px; border-radius: 10px; font-weight: 600; color: var(--text); } html[data-theme] .hilfe-gruppe .faq-frage:hover { background: var(--akzent-flaeche); color: var(--akzent); } html[data-theme] .hilfe-gruppe .faq-eintrag[open] .faq-frage { color: var(--akzent); } html[data-theme] .hilfe-gruppe .faq-antwort { margin: 0; padding: 0 16px 16px 12px; color: var(--text-leise); line-height: 1.6; } .hilfe-leer { margin-top: 14px; padding: 18px; border: 1px dashed var(--rand); border-radius: 16px; text-align: center; color: var(--text-leise); } @media (max-width: 980px) { .hilfe-start { grid-template-columns: 1fr; } .hilfe-weg { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } .hilfe-weg::before { display: none; } .hilfe-gruppen { grid-template-columns: 1fr; } } @media (max-width: 560px) { .hilfe-tour { grid-template-columns: 1fr; padding: 20px; } .hilfe-weg { grid-template-columns: 1fr; row-gap: 18px; } .hilfe-weg-schritt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; } .hilfe-weg-nummer { grid-row: span 2; width: 40px; height: 40px; margin: 0; } .hilfe-suche { width: 100%; } } /* Handy: rechte Kopfleiste darf umbrechen statt seitlich zu scrollen */ @media (max-width: 640px) { html[data-theme] .kopf-rechts { flex-wrap: wrap; row-gap: 8px; min-width: 0; max-width: 100%; } html[data-theme] .kopfzeile { flex-wrap: wrap; } html[data-theme] .kopf-rechts .konto { margin-left: auto; } } /* ---- Barrierefreiheit und Feinschliff (Design-Prüfung, WCAG 2.2 AA) ---- Gehört zu Abschnitt 33: letzte Schicht der Abschnitte 1–33. Kontraste sind mit der WCAG-Formel nachgerechnet (Fließtext ≥ 4,5:1, Bedienelemente ≥ 3:1). */ /* Leisere Texte: auch auf dem blaugrauen Grund der Dämmerung und auf getönten Chips (Zähler, Dateisymbol) mindestens 4,5:1. */ html[data-theme="hell"] { --text-still: #56627a; } html[data-theme="daemmerung"] { --text-still: #434e64; } /* Fokusring: Markenfarbe der Website, aber immer kräftig genug (≥ 3:1) – hell abgedunkelt, im Dunkeln aufgehellt. Gilt auch für Kundenfarben im Portal. */ html[data-theme="hell"], html[data-theme="daemmerung"] { --fokus: color-mix(in srgb, var(--marke) 70%, #000); } html[data-theme="dunkel"], html[data-theme="daemmerung"] .kopfzeile, html[data-theme] .dash-hero, html[data-theme] .hilfe-tour { --fokus: color-mix(in srgb, var(--marke) 40%, #fff); } html[data-theme] :focus-visible, html[data-theme] :is(a, button, summary, [contenteditable], [tabindex]):focus-visible { outline-color: var(--fokus); } /* Sprunglink „Zum Inhalt“: erster Tabstopp, sichtbar nur mit Fokus */ .sprung-link { position: fixed; top: 10px; left: 16px; z-index: 2147483000; padding: 10px 16px; border-radius: 10px; background: #0c1626; color: #fff; font-weight: 700; text-decoration: none; transform: translateY(-160%); } .sprung-link:focus, .sprung-link:focus-visible { transform: none; outline: 3px solid #7fd3e3; outline-offset: 2px; } #inhalt { scroll-margin-top: calc(var(--kopf-hoehe) + 12px); } /* Kopfzeile: Zielgrößen ≥ 24 px für „Zur Verwaltung“, Name und „Abmelden“ */ html[data-theme] .konto { gap: 0; } html[data-theme] .konto-name, html[data-theme] .konto-abmelden { display: inline-flex; align-items: center; min-height: 24px; } html[data-theme] .konto-abmelden { font-size: var(--gr-klein); } html[data-theme] .kopfzeile .knopf--klein { min-height: 36px; } /* Portal mit Websitewahl: Der Name steht in der Auswahl – die Marke zeigt nur das Logo. */ .marke--nur-logo .marke-text { display: none; } /* Missionen-Zähler im Kopf lesbar (4,9:1 auf dem Türkis-Knopf) */ html[data-theme] .tour-start-zahl { color: #bdeefa; background: rgb(255 255 255 / 12%); } /* Menü-Gruppentitel: nicht kleiner als 12 px */ html[data-theme] .nav-titel { font-size: 12px; letter-spacing: .05em; } /* Hero: dunkleres Türkis am Ende, damit der Nebentext überall ≥ 4,5:1 hat */ html[data-theme] .dash-hero { background: radial-gradient(320px 240px at 100% 0%, rgb(76 195 217 / 16%), transparent 70%), linear-gradient(115deg, #24407f 0%, #1c3a72 45%, #134f60 100%); } /* „+ … hinzufügen“: Text in der dunkleren bzw. helleren Markenstufe statt der reinen Kundenfarbe (Nacht: vorher 2,5:1). Hover ohne weiße Schrift. */ html[data-theme] .wiederholer-neu { border-color: var(--marke-rand); background: var(--marke-flaeche); color: var(--marke-text); } html[data-theme] .wiederholer-neu:hover { border-color: var(--marke-text); background: var(--marke-flaeche-stark); color: var(--marke-text); } /* Native Kästchen wie im übrigen CMS: 18 px, Akzentfarbe */ html[data-theme] input[type="checkbox"]:not(.schalter input), html[data-theme] input[type="radio"]:not(.schalter input) { width: 18px; height: 18px; margin: 0; vertical-align: middle; accent-color: var(--akzent); cursor: pointer; } /* Diagrammsäulen: sichtbarer Tastaturfokus */ .dg-spalte:focus-visible { outline: 2px solid var(--fokus, var(--akzent)); outline-offset: 2px; border-radius: 6px; } /* Ring-Legende: Werte bleiben bei ihren Bezeichnungen (nicht 600 px daneben) */ .dg-ring .dg-legende { width: 100%; max-width: 340px; } /* Kartenköpfe: Beschreibung unter dem Titel, nicht 1600 px daneben */ html[data-theme] .karte-kopf:has(> .karte-text, > p) { row-gap: 2px; } html[data-theme] .karte-kopf > .karte-text, html[data-theme] .karte-kopf > p { flex: 0 0 100%; max-width: none; margin: 0; padding-right: max(0px, calc(100% - 78ch)); } /* Zugeklappte Karte „Benutzer anlegen“: der Knopf im Seitenkopf öffnet sie – eine leere Kopfzeile darunter wäre doppelt. */ details.karte#neu:not([open]) { display: none; } /* Seitenbreite: höchstens 1680 px Inhalt, auf sehr breiten Schirmen mittig (Menü und Kopfzeile wandern mit). Formulare bleiben bei 1200 px. */ html[data-theme] .huelle--breit .inhalt { max-width: 1680px; } @media (min-width: 900px) { html[data-theme] .huelle:not(.huelle--werkbank):not(.huelle--einbett) { max-width: calc(var(--leiste-breite) + var(--abstand-7) + 1680px + 2 * var(--abstand-6)); margin-inline: auto; } html[data-theme] body:not(.werkbank) > .kopfzeile { padding-inline: max(var(--abstand-6), calc((100% - var(--leiste-breite) - var(--abstand-7) - 1680px) / 2)); } } /* Knöpfe einer Tabellenzeile dürfen umbrechen – sonst wäre jede Tabelle mit drei Aktionen schon bei 1280 px zu breit und fiele in die Kartenansicht. */ html[data-theme] .tabelle .zeilen-aktionen { flex-wrap: wrap; } html[data-theme] .ist-eng .tabelle--anpassbar .zeilen-aktionen { max-width: none; margin-left: 0; } html[data-theme] .tabelle-huelle:not(.ist-eng) td:has(> .zeilen-aktionen) { min-width: 290px; } html[data-theme] .tabelle-huelle:not(.ist-eng) .tabelle .zeilen-aktionen { max-width: 360px; } /* Etwas engere Spalten: 10 px statt 16 px Innenabstand, außen bleibt es luftig. */ html[data-theme] .tabelle-huelle:not(.ist-eng) .tabelle :is(th, td) { padding-inline: 10px; } html[data-theme] .tabelle-huelle:not(.ist-eng) .tabelle :is(th, td):first-child { padding-left: 16px; } html[data-theme] .tabelle-huelle:not(.ist-eng) .tabelle :is(th, td):last-child { padding-right: 16px; } html[data-theme] .tabelle th { letter-spacing: .04em; } /* Seitenkopf: Aktionen rechtsbündig, auch wenn sie umbrechen – der Hauptknopf steht dann rechts unter den Nebenknöpfen statt links darunter. */ @media (min-width: 760px) { html[data-theme] .seitenkopf-aktionen { justify-content: flex-end; max-width: 60%; margin-left: auto; } } /* Eintrag-Editor: Werkzeuge neben der Beschriftung (Textfarbe, Hervorheben, Ausrichtung) dürfen in eine eigene Zeile rutschen statt sich zu quetschen; Werkzeugknöpfe 32 × 32 px (Zielgröße ≥ 24 px). */ html[data-theme] .feld-kopf { flex-wrap: wrap; row-gap: 8px; } html[data-theme] .feld-werkzeuge { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; row-gap: 6px; } html[data-theme] .feld-textfarbe { margin-right: 0; padding: 3px 4px 3px 10px; } html[data-theme] .feld-textfarbe .farbe-optional { flex-wrap: nowrap; gap: 6px; } html[data-theme] .feld-textfarbe .farbe-optional input[type="color"] { width: 32px; height: 30px; } html[data-theme] .feld-textfarbe .farbe-hex { box-sizing: border-box; width: calc(7ch + 22px); min-width: 0; height: 30px; padding: 2px 8px; font: 500 13px/1 var(--schrift-mono); } html[data-theme] .feld-textfarbe .farbe-optional .knopf { min-height: 30px; padding: 2px 10px; white-space: nowrap; } html[data-theme] .ausrichtung-knopf, html[data-theme] .hervor-knopf { width: 32px; height: 30px; border-radius: 6px; } html[data-theme] .feld-ausrichtung, html[data-theme] .feld-hervor { border-color: var(--rand); border-radius: 8px; } /* Dateiwähler: breit genug für „Keine ausgewählt“ bzw. den Dateinamen */ html[data-theme] input[type="file"] { width: min(100%, 480px); } /* Werkbank: „↶ Rückgängig“ / „Wiederholen“ ohne Verlauf bleiben lesbar (leiser Text ≥ 4,5:1 statt 55 % Deckkraft); „gesperrt“ zeigt der gestrichelte Rand. */ html[data-theme] .werkbank-leiste .knopf[disabled] { opacity: 1; border-style: dashed; background: transparent; color: var(--text-still); } /* Handy: Speichern und Veröffentlichen als ruhige, volle Zeile statt versetzt */ @media (max-width: 560px) { html[data-theme] .editor-kopf-aktionen { justify-content: stretch; } html[data-theme] .editor-kopf-aktionen > :is(.knopf, button, form) { flex: 1 1 auto; justify-content: center; } } /* Portal mit Websitewahl: Unter 900 px ist die Auswahl eingeklappt – dann steht der Name wieder neben dem Logo. */ @media (max-width: 899px) { .marke--nur-logo .marke-text { display: inline; } } /* Tastenhinweis „N“ im Hauptknopf: dunkler Grund statt weißem Schleier – die weiße Ziffer hält so überall ≥ 4,5:1 (vorher 3,95:1). */ html[data-theme] .knopf--haupt .knopf-taste { background: rgb(0 0 0 / 22%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%); } /* ========================================================================== 34 Editor-Korrekturen Pflichtfelder, Zeichenzähler, schmale Bildschirme, Werkbank-Leiste. ========================================================================== */ /* Ein leeres Pflichtfeld, das das Veröffentlichen aufgehalten hat */ html .editor-form .feld--fehlt { border-radius: var(--radius-2, 8px); box-shadow: 0 0 0 2px var(--fehler-rand, #dc2626), 0 0 0 6px var(--fehler-flaeche, #fee2e2); } html .editor-form .feld--fehlt :is(input, textarea, select) { border-color: var(--fehler, #dc2626); } /* Zeichenzähler unter Textfeldern mit Höchstlänge */ .feld-zaehler { display: none; margin-top: 4px; color: var(--text-leise); font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: right; } .feld-zaehler.sichtbar { display: block; } .feld-zaehler--knapp { color: var(--warnung, #b45309); font-weight: 600; } /* Handy (390 px): Farbe, Hervorhebung und Ausrichtung neben der Beschriftung umbrechen statt die Seite quer scrollen zu lassen */ @media (max-width: 640px) { html .feld-kopf { flex-wrap: wrap; min-width: 0; } html .feld-werkzeuge { flex-wrap: wrap; min-width: 0; max-width: 100%; } } /* Werkbank mit offenem Editor: Die Knöpfe der Leiste brechen um, statt abgeschnitten zu werden („Ne…“) */ html .werkbank-leiste { flex-wrap: wrap; row-gap: 6px; padding-block: 6px; } html .werkbank-leiste-rechts { flex-wrap: wrap; flex-shrink: 1; justify-content: flex-end; row-gap: 6px; min-width: 0; } /* ========================================================================== 35 Verwaltung-Korrekturen Benutzerliste: lange Namen und Adressen brechen um, statt die Karte zu sprengen; Fehlermeldungen direkt am Feld (Benutzer, Website). ========================================================================== */ html[data-theme] .tabelle .mit-monogramm { min-width: 0; } html[data-theme] .tabelle .mit-monogramm-text { min-width: 0; } html[data-theme] .tabelle .mit-monogramm-text .tabelle-titel, html[data-theme] .tabelle .mit-monogramm-text .still { overflow-wrap: anywhere; word-break: normal; } html[data-theme] .tabelle .zeilen-aktionen { min-width: 0; max-width: 100%; } html[data-theme] .tabelle .zeilen-aktionen > * { max-width: 100%; } /* Meldung am Feld: etwas Luft zum Eingabefeld, gut lesbar auch in Nacht. */ html[data-theme] .feld-fehler { margin-top: 6px; line-height: 1.45; } html[data-theme] .feld--fehlerhaft :is(input, select, textarea) { border-color: var(--fehler); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fehler) 18%, transparent); } /* ========================================================================== 36 Einrichtung und Prüfung Die Seite „Einrichtung“ (seiten/einrichtung.php) benutzt das Gerüst der Anmeldung. Dazu nur der Hinweis für den eigenen Rechner und etwas Luft für die Code-Erklärung. pruefung.php bringt ihr eigenes CSS mit. ========================================================================== */ .einrichtung .einrichtung-hinweis { margin: 0; padding: 10px 14px; border: 1px solid var(--info-rand); border-radius: 10px; background: var(--info-flaeche); color: var(--text); font-size: var(--gr-klein); line-height: 1.5; } .einrichtung .feld-hinweis code { white-space: nowrap; } /* ========================================================================== 38 Passwort vergessen „Passwort vergessen?“ an der Anmeldung, die Seiten passwort-vergessen und passwort-neu (Gerüst der Anmeldung, nur ergänzt) und der Bereich „E-Mail-Versand“ in den Einstellungen. ========================================================================== */ /* Der Link unter dem Passwortfeld, rechtsbündig. */ .anmelde-form .pv-link { display: table; margin: 8px 0 0 auto; color: var(--marke); font-size: var(--gr-klein); font-weight: 600; text-decoration: none; } .anmelde-form .pv-link:hover { text-decoration: underline; } .anmelde-form .pv-link:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; border-radius: 4px; } html[data-theme="dunkel"] .anmelde-form .pv-link { color: var(--text); } /* Kleines Zeichen über der Überschrift: Briefumschlag oder Warnung. */ .pv-karte .pv-zeichen { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--abstand-5, 20px); border-radius: 14px; background: color-mix(in srgb, var(--marke) 12%, transparent); color: var(--marke); } .pv-karte .pv-zeichen--warnung { background: var(--warnung-flaeche); color: var(--warnung); } html[data-theme="dunkel"] .pv-karte .pv-zeichen { color: var(--text); } .pv-karte .pv-tipps { margin: 0 0 var(--abstand-6, 24px); padding-left: 1.1em; color: var(--text-leise); font-size: var(--gr-klein); line-height: 1.55; } .pv-karte .pv-tipps li + li { margin-top: 6px; } .pv-karte .pv-adresse { overflow-wrap: anywhere; color: var(--text); } .pv-karte > .knopf { min-height: 46px; } .pv-karte .meldung { margin-bottom: var(--abstand-4, 16px); } /* Einstellungen: Versandart und SMTP-Angaben. */ .pv-versand { margin-top: var(--abstand-6, 24px); padding-top: var(--abstand-5, 20px); border-top: 1px solid var(--rand); } .pv-versand__titel { margin: 0 0 6px; font-size: var(--gr-md); } .pv-versand__wahl { margin: var(--abstand-4, 16px) 0; padding: 0; border: 0; min-width: 0; } .pv-versand .pv-option { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; line-height: 1.45; cursor: pointer; } .pv-versand .pv-option input { flex: none; margin-top: 3px; } .pv-versand .pv-option--klein { font-size: var(--gr-klein); color: var(--text-leise); } /* Die SMTP-Angaben nur, wenn SMTP gewählt ist (ohne :has() bleiben sie sichtbar). */ .pv-versand:has(#post_versand_mail:checked) .pv-smtp { display: none; } /* Das ist das Passwort eines Postfachs, kein eigenes: kein Vorschlag, keine Stärke. */ .pv-versand .passwort-helfer { display: none; } .pv-versand > .knopf { margin-top: 14px; } /* Das Feld für Passwortmanager bleibt unsichtbar, auch gegen input-Regeln mit display. */ .pv-karte input[hidden] { display: none !important; } /* ================================================================ 37 Webspace-Sicherheit Warnhinweise zu unverschlüsseltem FTP und unlesbaren Zugangsdaten, dazu der gemerkte Fingerabdruck des Servers (SFTP/FTPS). */ .webspace-warnung { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--warnung-rand, var(--warnung)); border-left-width: 4px; border-radius: 10px; background: var(--warnung-flaeche); color: var(--text); line-height: 1.5; } .feld-hinweis.webspace-warnung { font-size: inherit; } .webspace-abdruck { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); } .webspace-abdruck p { margin: 0 0 8px; } .webspace-abdruck code { font-size: .85em; overflow-wrap: anywhere; word-break: break-all; } .webspace-abdruck .aktion-form { display: inline-block; } [data-nur-ftp][hidden], [data-nur-tls][hidden], [data-nur-klartext][hidden] { display: none; } /* Direkt in der Karte (unter dem Formular): so weit eingerückt wie das Formular. */ .karte > .webspace-abdruck, .karte > .webspace-warnung { margin: 12px 16px; } /* -------------------------------------------------------------------------- 39 Kleine Geräte und Touch (Gerätetest iPhone SE / Pixel / iPad) -------------------------------------------------------------------------- */ /* Bausteinkopf: Der Name darf schrumpfen, damit Klappen und Entfernen auch bei 320 px Breite im Bild bleiben. */ .baustein-kopf { min-width: 0; } .baustein-kopf .baustein-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 360px) { .baustein-kopf { gap: 4px; } .baustein-kopf .griff, .baustein-kopf .baustein-klappen, .baustein-kopf .zeile-weg { width: 34px; min-width: 34px; } /* Ein Rest von gut 10 px ragte sonst aus dem Bausteininhalt. „clip“ statt „hidden“: kein eigener Scrollbereich, Fokusringe bleiben sichtbar. */ .baustein-inhalt { overflow-x: clip; overflow-clip-margin: 4px; } } /* Mit dem Finger bedient: alle kleinen Text-Schalter auf mindestens 32 px Tipphöhe bringen (WCAG 2.5.8 verlangt 24 px). */ @media (pointer: coarse) { .dg-tabelle > summary, .link-aussehen > summary, .brotkrumen a, .werkbank-zurueck, .hilfe-kontakt-link { display: inline-flex; align-items: center; min-height: 32px; } } /* -------------------------------------------------------------------------- 40 Demo-Video (Hilfe-Seite und Anmeldeseite) -------------------------------------------------------------------------- */ .demo-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #0a1322; } .hilfe-video { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: center; gap: 28px; margin: 0 0 38px; padding: 22px; border: 1px solid var(--karte-rand); border-radius: 16px; background: var(--karte-grund, var(--flaeche)); } .hilfe-video-marke { font: 600 .78rem/1 var(--schrift-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--akzent); } html[data-theme] .hilfe-video h2 { margin: 10px 0 6px; font-size: 1.35rem; font-weight: 750; color: var(--text); } .hilfe-video p { margin: 0; color: var(--text-leise); line-height: 1.55; } @media (max-width: 980px) { .hilfe-video { grid-template-columns: 1fr; } } .anmelde-video-knopf { display: inline-flex; align-items: center; gap: 14px; margin: 6px 0 26px; padding: 10px 18px 10px 10px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; background: rgb(255 255 255 / 12%); color: #fff; text-align: left; cursor: pointer; transition: background .15s ease, transform .15s ease; } .anmelde-video-knopf:hover { background: rgb(255 255 255 / 20%); transform: translateY(-1px); } .anmelde-video-knopf:focus-visible { outline: 3px solid #9be3f0; outline-offset: 3px; } .anmelde-video-knopf b { display: block; font-size: 1rem; font-weight: 700; } .anmelde-video-knopf small { display: block; margin-top: 2px; font-size: .82rem; color: rgb(255 255 255 / 78%); } .anmelde-video-play { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; } .anmelde-video-play::after { content: ""; position: absolute; left: 16px; top: 13px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #1c3a72; } .video-dialog { width: min(1100px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: #0e1a30; color: #fff; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 60%); } .video-dialog::backdrop { background: rgb(8 16 32 / 72%); backdrop-filter: blur(3px); } .video-dialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 20px; } .video-dialog-zu { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgb(255 255 255 / 10%); color: #fff; font-size: 1rem; cursor: pointer; } .video-dialog-zu:hover { background: rgb(255 255 255 / 20%); } .video-dialog .demo-video { border-radius: 0 0 16px 16px; }