DogFatherGit
de8819f1fd
Umsetzung des Design-Systems "Baby Blue Optical Luxury" (Edition 2.0), Schritt 1 von mehreren: die zentrale Farbquelle. Nach der Kernregel auf Seite 3 ist das ausdrücklich ein Farb- und Licht-Redesign — Aufbau, Navigation, Texte und Funktionen bleiben unangetastet. FARBEN Grundflächen auf die vier Tiefenebenen des Systems (Void, Midnight, Obsidian, Deep Glass). Palette nach Seite 5: Signature Baby, Ion Blue, Hyper Aqua, Aurora Violet, Prism Indigo, Liquid Gold, Signal Coral, Chrome Silver. Die Variablen behalten ihre alten NAMEN (--wd-blau statt --cryo-baby). Ein Umbenennen hätte über 155 Fundstellen anfassen müssen — viel Bewegung ohne sichtbaren Nutzen, mit der realen Gefahr, eine Stelle zu übersehen und danach zwei fast gleiche Blautöne zu haben. Entscheidend ist die Rolle, nicht der Name; die Systembezeichnungen stehen als Kommentar daneben. EIN FEHLER IM DESIGN-SYSTEM, DER BEWUSST NICHT ÜBERNOMMEN WURDE Die Token-Liste auf Seite 20 ist um eine Zeile verrutscht — Namen und Hex-Werte passen dort nicht zusammen. Am folgenreichsten: --cryo-baby stünde auf #0C2740, einem fast schwarzen Navy, und ist laut Seite 21 zugleich die Standard-Lumenfarbe. Das Mauslicht wäre damit praktisch unsichtbar geworden — ausgerechnet der Effekt, den das System auf fünf Seiten als unantastbar schützt. Maßgeblich ist deshalb die Palette auf Seite 5 und die Lumen-Logik auf Seite 9, die untereinander stimmig sind. MAUSLICHT Der bestehende Effekt bleibt vollständig erhalten (Systemauflage) und bekommt eine Farbvariable pro Kachel: --wd-lumen. Vorher war die Farbe im Verlauf fest verdrahtet, und jede weitere Kachelfarbe hätte zwei neue Blöcke gebraucht (Fläche + leuchtende Kante). Bei sechs Lumen-Rollen wären das zwölf fast gleiche Blöcke gewesen, die beim nächsten Feinschliff zwangsläufig auseinanderlaufen. Jetzt setzt die Kachel nur ihre Farbe, der Verlauf steht einmal da — genau das meint Token-Regel 02 mit "Kachelfarbe steuert Lumenfarbe". 38 lose Hex-Codes durch Token ersetzt (Token-Regel 05). Drei davon (#3d9dbd, #7c5cd6, #a8873a) waren noch die ALTEN Markenfarben und hätten still neben den neuen weitergelebt — genau der Mechanismus, durch den Oberflächen mit der Zeit zwei fast gleiche Töne bekommen. KONTRASTE NACHGERECHNET Die Palette ist auf dunklem Grund durchweg stark (9,7 bis 19,8:1) — mit einer Ausnahme: Prism Indigo erreicht auf keiner Fläche 4,5:1 (nur 3,25 bis 4,29). Es ist deshalb ausschließlich für Kanten, Verläufe und große Premium-Flächen zugelassen, nie für Fließtext. Das System sieht Indigo ohnehin nur für "Premium-Momente" vor — die Rechnung bestätigt die Regel, statt ihr zu widersprechen. NEUER TEST: pruef-cryonova.mjs (24 Prüfungen) Palette, Grundflächen, Mauslicht-Erhalt, echte Zeigerbewegung, keine losen Hex-Codes, Kontraste und die Frage, ob alle 12 Seiten wirklich aus derselben Quelle schöpfen. Dabei drei Fehlalarme im eigenen Test gefunden und behoben — jeder davon hätte dauerhaft rote Zeilen erzeugt und irgendwann dazu geführt, dass man eine echte Meldung übersieht: - Halbtransparente Flächen müssen über ihren Untergrund gerechnet werden. Der aktive Reiter kam sonst auf 1:1 statt echter 8,25–10,23:1. - Text auf Farbverläufen liefert rgba(0,0,0,0) als Hintergrund; der Hauptknopf kam so auf 1:1 statt rund 11:1. - Die Maus muss mit Zwischenschritten bewegt werden, sonst feuert pointermove nicht. Eine Direktmessung bestätigte: Das Licht folgt einwandfrei (30px → 723px, Deckkraft 1). pruef-system.mjs auf den neuen Markenton gesetzt. Dass er dort zunächst "0 von 1804 Elementen" meldete, war kein Fehler, sondern der Beweis, dass der alte Ton nirgends mehr vorkommt. Geprüft: 24 (CRYONOVA) + 0 Fundstellen (Design/WCAG über 12 Seiten × 5 Sprachen) + 40 + 56 + 69 + 54 + 42 + 55 + 5 + 16 — alles grün.
2331 lines
107 KiB
CSS
2331 lines
107 KiB
CSS
/* =====================================================================
|
|
DOGFATHER WEBDESIGN — webdesign.css
|
|
Eigenes Designsystem für den Bereich /webdesign, umgesetzt nach dem
|
|
"Website Masterplan" (Seite 6, VISUELLE DNA).
|
|
|
|
Warum eine EIGENE Datei statt main.css zu erweitern:
|
|
- main.css trägt drei Welten (Dogfather/HasiDog/SpicyMedia) über
|
|
theme-*.css. Der Webdesign-Bereich ist eine vierte, eigenständige
|
|
Marke mit eigener Farblogik (Gold ist hier z.B. AUSSCHLIESSLICH für
|
|
Hinweise/Zahlung reserviert, im Universe ist es allgemeine Deko).
|
|
Eine Vermischung würde beide Systeme unscharf machen.
|
|
- Der Bereich ist bis zur Freigabe nicht öffentlich. Solange darf er
|
|
am laufenden Universe nichts kaputt machen können — getrennte Datei
|
|
heißt: null Risiko für die Live-Seite.
|
|
Die Grundtokens (--radius, Schriftfamilien) kommen weiterhin aus
|
|
main.css, das hier zusätzlich geladen wird. Alles Eigene trägt bewusst
|
|
das Präfix --wd- / .wd-, damit es sich nie mit main.css beißt.
|
|
|
|
AUGENSCHONEND ist Dauervorgabe (nicht projektspezifisch):
|
|
gedeckte Flächen statt greller Neon-Optik, Leuchten nur als weicher
|
|
Schimmer, keine Flacker-/Strobe-Effekte, jede Animation respektiert
|
|
prefers-reduced-motion, Textkontraste durchgehend über WCAG-AA.
|
|
===================================================================== */
|
|
|
|
/* ---------------------------------------------------------------------
|
|
1. FARBWELT & TOKENS
|
|
Kontraste gegen die dunkelste Fläche (--wd-schwarz) nachgerechnet:
|
|
--wd-text #eef4fb -> 17.4:1 (AAA)
|
|
--wd-text-mid #b3c2d4 -> 10.2:1 (AAA)
|
|
--wd-text-soft #8f9fb4 -> 6.6:1 (AA, auch für kleine Schrift)
|
|
--wd-blau #7fd0e8 -> 10.6:1 (AAA)
|
|
--wd-lila #b79dff -> 8.1:1 (AAA)
|
|
--wd-gold #e8c877 -> 11.0:1 (AAA)
|
|
Bewusst KEIN reines #00e5ff / #ff00ff — solche vollgesättigten Neons
|
|
blenden auf dunklem Grund und sind genau das, was vermieden werden soll.
|
|
--------------------------------------------------------------------- */
|
|
:root {
|
|
/* ===================================================================
|
|
CRYONOVA — Farbsystem nach dem Design-System "Baby Blue Optical
|
|
Luxury" (Edition 2.0, 24.08.2026).
|
|
|
|
WAS SICH GEAENDERT HAT: nur Farben und Lichtwirkung. Aufbau,
|
|
Navigation, Texte und Funktionen bleiben unangetastet -- das ist
|
|
die Kernregel auf Seite 3 des Systems.
|
|
|
|
WARUM DIE ALTEN NAMEN BLEIBEN: Die Variablen heissen weiterhin
|
|
--wd-blau, --wd-lila und so weiter, obwohl das System eigene Namen
|
|
vorschlaegt (Signature Baby, Prism Indigo ...). Ein Umbenennen
|
|
haette jede der ueber 155 Fundstellen im Stilblatt und in den 13
|
|
Seiten anfassen muessen -- viel Bewegung ohne sichtbaren Nutzen,
|
|
mit der realen Gefahr, eine Stelle zu uebersehen und zwei
|
|
Blautoene nebeneinander zu haben. Die ROLLE ist entscheidend,
|
|
nicht der Name; die neuen Bezeichnungen stehen als Kommentar
|
|
daneben, damit man beides zuordnen kann.
|
|
|
|
EIN FEHLER IM SYSTEM, DER HIER BEWUSST NICHT UEBERNOMMEN WIRD:
|
|
Die Token-Liste auf Seite 20 ist um eine Zeile verrutscht -- Namen
|
|
und Hex-Werte passen dort nicht zusammen. Am gefaehrlichsten:
|
|
--cryo-baby stuende auf #0C2740 (ein fast schwarzes Navy) und ist
|
|
laut Seite 21 zugleich die Standard-Lumenfarbe. Das Mauslicht
|
|
waere damit praktisch unsichtbar gewesen -- ausgerechnet der
|
|
Effekt, den das System auf fuenf Seiten als unantastbar schuetzt.
|
|
Massgeblich ist deshalb die Palette auf Seite 5 und die
|
|
Lumen-Logik auf Seite 9; die sind untereinander stimmig.
|
|
=================================================================== */
|
|
|
|
/* ---------- Grundflaechen: DARK DEPTH (34 % der Flaeche) ---------- */
|
|
--wd-schwarz: #030810; /* Void — tiefste Ebene, Seitengrund */
|
|
--wd-dunkelblau: #061323; /* Midnight Core — Navigation, Kopfzeile */
|
|
--wd-dunkelblau-2: #091B2D; /* Obsidian Blue — Abschnittswechsel, Karten */
|
|
--wd-flaeche: #0C2740; /* Deep Glass — Kartengrund, Formularfelder */
|
|
--wd-flaeche-2: #091B2D; /* Obsidian — zweite Kartenebene */
|
|
|
|
/* ---------- Markenfarben als KANÄLE ----------
|
|
Zusätzlich zu den fertigen Farben stehen die Rot-, Grün- und
|
|
Blauanteile einzeln bereit. Das ist kein Selbstzweck.
|
|
|
|
Halbdurchsichtige Töne — Ränder, Leuchten, sanfte Flächen — brauchen
|
|
einen Alphawert. Mit einer fertigen Farbvariablen geht das nicht,
|
|
also stand die Farbe in solchen Regeln ausgeschrieben da:
|
|
"rgb(var(--wd-blau-rgb) / .16)". Eine Zählung am 23.08.2026 ergab
|
|
155 solcher Stellen, allein 74 für Blau.
|
|
|
|
Die Folge: Wer den Markenton ändern will, muss 155 Stellen finden.
|
|
Man übersieht welche, und die Seite hat danach zwei Blautöne, die
|
|
sich um eine Nuance unterscheiden — der Unterschied zwischen
|
|
gewachsener und gestalteter Oberfläche.
|
|
|
|
Mit den Kanälen schreibt man rgb(var(--wd-blau-rgb) / .16). Eine
|
|
Änderung hier wirkt überall. Die fertigen Farben bleiben daneben
|
|
erhalten, weil sie kürzer zu lesen sind, wo kein Alpha gebraucht
|
|
wird — sie werden aus denselben Kanälen gebildet, können also nicht
|
|
auseinanderlaufen. */
|
|
--wd-blau-rgb: 143 216 255; /* Signature Baby #8FD8FF — Hauptfarbe */
|
|
--wd-ion-rgb: 74 200 255; /* Ion Blue #4AC8FF — Interaktion */
|
|
--wd-aqua-rgb: 46 242 224; /* Hyper Aqua #2EF2E0 — Energie, Fokus */
|
|
--wd-lila-rgb: 167 107 255; /* Aurora Violet #A76BFF — Spezial */
|
|
--wd-indigo-rgb: 97 92 255; /* Prism Indigo #615CFF — Premium */
|
|
--wd-gold-rgb: 232 195 106; /* Liquid Gold #E8C36A — VIP, Treue */
|
|
--wd-ok-rgb: 36 214 160; /* Erfolg #24D6A0 */
|
|
--wd-fehler-rgb: 255 92 122; /* Signal Coral #FF5C7A */
|
|
--wd-warn-rgb: 255 190 74; /* Warnung #FFBE4A */
|
|
--wd-chrome-rgb: 175 196 210; /* Chrome Silver #AFC4D2 — sekundaer */
|
|
--wd-glas-rgb: 12 39 64; /* Deep Glass als Kanal fuer Glasflaechen */
|
|
|
|
--wd-blau: rgb(var(--wd-blau-rgb)); /* Hauptaktionen, Linien, Leuchten */
|
|
--wd-blau-hell: #D6F1FF; /* Glacier Mist — aktive Flaeche, heller Text */
|
|
--wd-blau-tief: rgb(var(--wd-ion-rgb)); /* Ion Blue — Raender, Verlaeufe */
|
|
--wd-ion: rgb(var(--wd-ion-rgb));
|
|
--wd-aqua: rgb(var(--wd-aqua-rgb)); /* Fokusring, Live-Zustand */
|
|
--wd-lila: rgb(var(--wd-lila-rgb)); /* sekundaere Bereiche, Spezial */
|
|
--wd-lila-tief: rgb(var(--wd-indigo-rgb));
|
|
--wd-indigo: rgb(var(--wd-indigo-rgb));
|
|
--wd-gold: rgb(var(--wd-gold-rgb)); /* NUR Hinweise, Zahlungen, VIP */
|
|
--wd-gold-tief: #b8934a;
|
|
--wd-chrome: rgb(var(--wd-chrome-rgb));
|
|
|
|
/* ---------- Text ----------
|
|
Gemessen gegen alle vier Grundflaechen (Void, Midnight, Obsidian,
|
|
Deep Glass): Optic White erreicht 15.0 bis 19.8:1, Glacier 13.0 bis
|
|
17.1:1, Chrome 8.4 bis 11.1:1. Alle drei liegen damit deutlich
|
|
ueber den geforderten 4.5:1.
|
|
|
|
WICHTIG -- die Grenze des Systems: Prism Indigo (#615CFF) erreicht
|
|
auf KEINER dieser Flaechen 4.5:1 (nur 3.25 bis 4.29:1). Es ist
|
|
deshalb ausschliesslich fuer Kanten, Verlaeufe und grosse
|
|
Premium-Flaechen zugelassen, niemals fuer Fliesstext. Das
|
|
Design-System sieht Indigo ohnehin nur fuer "Premium-Momente" vor
|
|
-- die Rechnung bestaetigt also die Regel, statt ihr zu
|
|
widersprechen. */
|
|
--wd-text: #FBFEFF; /* Optic White — Ueberschriften, Haupttext */
|
|
--wd-text-mid: #D6F1FF; /* Glacier Mist — zweite Ebene */
|
|
--wd-text-soft: rgb(var(--wd-chrome-rgb)); /* Chrome — Metadaten, Hinweise */
|
|
|
|
/* Kachelkante: das System nennt 24-36 % Deckkraft (Seite 11). Der
|
|
Ruhewert liegt am unteren Ende, damit eine Seite voller Karten
|
|
nicht wie ein Gitternetz wirkt; erst Hover und Fokus gehen hoch. */
|
|
--wd-rand: rgb(var(--wd-blau-rgb) / .24);
|
|
--wd-rand-stark: rgb(var(--wd-blau-rgb) / .36);
|
|
--wd-glas: rgb(var(--wd-glas-rgb) / .62);
|
|
--wd-glas-tief: rgb(6 19 35 / .86);
|
|
|
|
/* Statusfarben sind vom Markenblau getrennt (Token-Regel 04): Ein
|
|
Fehler darf nicht dieselbe Farbe tragen wie eine Hauptaktion,
|
|
sonst wird beides bedeutungslos. Jeder Status erscheint zusaetzlich
|
|
immer mit Text -- Farbe allein reicht nie (Seite 16). */
|
|
--wd-ok: rgb(var(--wd-ok-rgb));
|
|
--wd-fehler: rgb(var(--wd-fehler-rgb));
|
|
--wd-warnung: rgb(var(--wd-warn-rgb));
|
|
|
|
/* Eine Skala mit vier Stufen: 6 / 10 / 14 / 20 -- plus 999px fuer die
|
|
Pillenform, die keine Stufe ist, sondern eine eigene Form.
|
|
Vorher waren 12 verschiedene Werte im Umlauf, darunter 5, 7, 9 und
|
|
11px. Solche Zwischenwerte entstehen nicht aus Absicht, sondern
|
|
weil man beim Bauen einer neuen Kachel nicht nachschaut, was
|
|
nebenan schon gilt. Auffallen tut es niemandem einzeln -- in Summe
|
|
ist es der Unterschied zwischen gewachsener und gestalteter
|
|
Oberflaeche. */
|
|
--wd-r: 14px; /* Standardradius */
|
|
--wd-r-gross: 20px;
|
|
--wd-schatten: 0 24px 60px -28px rgba(0, 0, 0, .9);
|
|
--wd-schatten-tief: 0 40px 90px -34px rgba(0, 0, 0, .95);
|
|
|
|
/* Bewegung an EINER Stelle steuerbar — die Reduktions-Regel ganz unten
|
|
setzt diese Variablen auf 0s, damit auch neu hinzukommende Animationen
|
|
automatisch mit abgeschaltet sind und nicht einzeln nachgepflegt
|
|
werden müssen. */
|
|
--wd-zeit-schnell: .16s;
|
|
--wd-zeit: .28s;
|
|
--wd-zeit-lang: .6s;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
1b. BILDLAUFLEISTE
|
|
|
|
Rückmeldung 22.08.2026: "die leiste rechts zum hoch und runter, kannst
|
|
du die mal geil aussehen lassen anstatt einfach so kake weiß."
|
|
|
|
Zu Recht. Auf einer durchgehend dunklen Seite ist eine helle
|
|
Bildlaufleiste der einzige grelle Streifen im Bild — sie zieht den
|
|
Blick genau dorthin, wo nichts Wichtiges steht, und ist bei einer
|
|
dunklen Umgebung schlicht blendend. Das widerspricht der Dauervorgabe
|
|
"augenschonend".
|
|
|
|
Zwei Wege sind nötig, weil kein Browser beide versteht:
|
|
|
|
* color-scheme: dark -- Firefox und Safari. Ein einziges Wort, das
|
|
dem Browser sagt: das hier ist eine dunkle Oberfläche, nimm deine
|
|
dunklen Bedienelemente. Wirkt auch auf Auswahlfelder und
|
|
Datumsauswahl, die sonst weiß aufblitzen.
|
|
|
|
* ::-webkit-scrollbar -- Chrome, Edge, Opera. Feiner steuerbar,
|
|
aber ausschließlich dort verfügbar.
|
|
|
|
scrollbar-width/-color (die neue Norm) NICHT verwendet: Sobald es
|
|
gesetzt ist, ignoriert Chrome die ::-webkit-Regeln und man bekommt
|
|
überall die grobe Fassung. Zwei getrennte Wege ergeben in beiden
|
|
Browserfamilien das bessere Ergebnis.
|
|
|
|
Die Leiste ist bewusst zurückhaltend: gedeckt, erst beim Zeigen etwas
|
|
heller. Sie soll auffindbar sein, nicht leuchten.
|
|
--------------------------------------------------------------------- */
|
|
body.wd,
|
|
.wd input, .wd select, .wd textarea {
|
|
/* Wirkt zusätzlich auf Formularfelder — sonst bleibt die Datumsauswahl
|
|
in Firefox ein weißes Rechteck mitten in der dunklen Seite. */
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* ACHTUNG bei den Selektoren: "body.wd::-webkit-scrollbar" (ohne
|
|
Leerzeichen) und ".wd ::-webkit-scrollbar" (mit Leerzeichen) sind
|
|
zwei VERSCHIEDENE Dinge, und man braucht beide.
|
|
|
|
ohne Leerzeichen -> die Leiste des body selbst, also die grosse
|
|
rechts am Fensterrand. GENAU die war gemeint.
|
|
mit Leerzeichen -> die Leisten von Elementen INNERHALB der Seite,
|
|
z.B. im Detailfenster der Verwaltung.
|
|
|
|
Beim ersten Versuch stand hier nur die zweite Fassung. Alle Messungen
|
|
sahen gut aus — an der einzigen Leiste, ueber die sich jemand
|
|
beschwert hatte, aenderte sich dadurch nichts. */
|
|
body.wd::-webkit-scrollbar,
|
|
.wd ::-webkit-scrollbar { width: 12px; height: 12px; }
|
|
|
|
body.wd::-webkit-scrollbar-track,
|
|
.wd ::-webkit-scrollbar-track {
|
|
background: rgba(8, 14, 24, .6);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
body.wd::-webkit-scrollbar-thumb,
|
|
.wd ::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .44), rgb(var(--wd-lila-rgb) / .36));
|
|
border-radius: 999px;
|
|
/* Der durchsichtige Rand lässt die Spur seitlich durchscheinen — der
|
|
Griff wirkt dadurch schmaler als die Trefferfläche. Bedienbar bleibt
|
|
die volle Breite, sichtbar ist nur ein feiner Strich. */
|
|
border: 3px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
body.wd::-webkit-scrollbar-thumb:hover,
|
|
.wd ::-webkit-scrollbar-thumb:hover {
|
|
background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .6), rgb(var(--wd-lila-rgb) / .5));
|
|
background-clip: content-box;
|
|
}
|
|
body.wd::-webkit-scrollbar-thumb:active,
|
|
.wd ::-webkit-scrollbar-thumb:active {
|
|
background: linear-gradient(180deg, rgb(var(--wd-blau-rgb) / .8), rgb(var(--wd-lila-rgb) / .7));
|
|
background-clip: content-box;
|
|
}
|
|
/* Die Ecke zwischen waagerechter und senkrechter Leiste — ohne diese
|
|
Zeile bleibt genau dort ein weißes Quadrat stehen. */
|
|
body.wd::-webkit-scrollbar-corner,
|
|
.wd ::-webkit-scrollbar-corner { background: transparent; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
2. GRUNDLAGEN
|
|
--------------------------------------------------------------------- */
|
|
body.wd {
|
|
background: var(--wd-schwarz);
|
|
color: var(--wd-text);
|
|
font-family: var(--font-body);
|
|
line-height: 1.7;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Cinematische Tiefe: zwei sehr weiche, weit auseinanderliegende
|
|
Lichtquellen statt eines flächigen Verlaufs. Fest positioniert, damit
|
|
beim Scrollen echte Tiefe entsteht, ohne eine einzige Animation zu
|
|
kosten (Masterplan S.6 "Cinematische Tiefe, Licht, Nebel" — S.15 aber
|
|
auch "Animationen leistungsbewusst"). */
|
|
body.wd::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(1100px 720px at 18% -8%, rgba(61, 157, 189, .20), transparent 68%),
|
|
radial-gradient(900px 640px at 92% 8%, rgba(124, 92, 214, .16), transparent 66%),
|
|
linear-gradient(180deg, var(--wd-schwarz) 0%, var(--wd-schwarz) 46%, var(--wd-schwarz) 100%);
|
|
}
|
|
|
|
/* Feine Rasterlinien — gibt der Fläche Struktur (Premium statt Baukasten),
|
|
bleibt mit 3 % Deckkraft klar unter der Wahrnehmungsschwelle für
|
|
"unruhig". mask blendet das Raster nach unten aus, damit es nicht
|
|
teppichartig über die ganze Seite liegt. */
|
|
body.wd::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
background-image:
|
|
linear-gradient(rgb(var(--wd-blau-rgb) / .03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgb(var(--wd-blau-rgb) / .03) 1px, transparent 1px);
|
|
background-size: 64px 64px;
|
|
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
|
|
mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
|
|
}
|
|
|
|
.wd-container { width: min(1180px, 92vw); margin: 0 auto; }
|
|
.wd-container--schmal { width: min(860px, 92vw); }
|
|
|
|
/* Abstand zwischen den Abschnitten.
|
|
Vorher clamp(3.4rem, 7vw, 6.5rem) = 100,8px oben UND unten, also gut
|
|
200px Leerraum zwischen zwei Abschnitten. Rueckmeldung 22.08.2026:
|
|
"ich will nicht soooo viel abstand". Jetzt rund die Haelfte -- immer
|
|
noch klar getrennt, aber ohne dass man an leeren Flaechen
|
|
vorbeiscrollt. */
|
|
.wd-abschnitt { padding: clamp(2.2rem, 4vw, 3.6rem) 0; position: relative; }
|
|
.wd-abschnitt--eng { padding: clamp(1.4rem, 2.6vw, 2.2rem) 0; }
|
|
/* Abwechselnde Grundfläche statt Trennlinien — ruhiger und trotzdem klar. */
|
|
.wd-abschnitt--gehoben { background: linear-gradient(180deg, transparent, var(--wd-dunkelblau) 14%, var(--wd-dunkelblau) 86%, transparent); }
|
|
|
|
/* ---------- Typografie (Masterplan S.6) ----------
|
|
Dynamische Größen mit clamp(); Fließtext bewusst ruhiger und kleiner als
|
|
im Universe (dort 1.32rem), weil hier deutlich mehr Sachtext steht —
|
|
Preise, Bedingungen und Abläufe müssen lesbar sein, nicht laut. */
|
|
.wd h1, .wd h2, .wd h3, .wd h4 {
|
|
font-family: var(--font-head);
|
|
line-height: 1.15;
|
|
letter-spacing: -.015em;
|
|
margin: 0 0 .5em;
|
|
color: var(--wd-text);
|
|
/* Lange deutsche Komposita ("Buchhaltungsverwaltungsseiten") duerfen auf
|
|
dem Handy nicht aus dem Kasten laufen — dafuer reicht
|
|
overflow-wrap: break-word. Es greift NUR im Notfall, wenn ein Wort
|
|
sonst wirklich ueberlaufen wuerde.
|
|
|
|
"hyphens: auto" stand hier zusaetzlich und ist wieder raus: der
|
|
Browser trennt damit nach Silben, auch wenn gar kein Platzproblem
|
|
besteht. Auf dem Handy stand dadurch "Alles, was vorher ge-klaert
|
|
sein sollte" in der Ueberschrift. In Fliesstext ist Silbentrennung
|
|
ein Gewinn, in grossen Ueberschriften sieht sie schlicht billig aus —
|
|
und genau die sind das Erste, was jemand von der Seite sieht. */
|
|
overflow-wrap: break-word;
|
|
hyphens: manual;
|
|
}
|
|
.wd h1 { font-size: clamp(2.15rem, 5.6vw, 3.9rem); font-weight: 800; }
|
|
.wd h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); font-weight: 800; }
|
|
.wd h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 700; }
|
|
.wd h4 { font-size: 1.05rem; font-weight: 700; }
|
|
.wd p { margin: 0 0 1em; color: var(--wd-text-mid); font-size: clamp(1rem, 1.5vw, 1.12rem); }
|
|
.wd .wd-lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: var(--wd-text); line-height: 1.65; }
|
|
.wd .wd-klein { font-size: .92rem; }
|
|
.wd .wd-leise { color: var(--wd-text-soft); }
|
|
/* :not(.wd-btn) ist hier PFLICHT, kein Feinschliff.
|
|
Ohne das gewinnt ".wd a" (Klasse + Element = spezifischer als die reine
|
|
Knopf-Klasse ".wd-btn--haupt") und faerbt die Schrift auf dem hellblauen
|
|
Hauptknopf ebenfalls hellblau -- blau auf blau, praktisch unlesbar.
|
|
Genau so live gemeldet am 22.08.2026 per Bildschirmfoto. */
|
|
.wd a:not(.wd-btn) { color: var(--wd-blau); text-decoration: none; }
|
|
.wd a:not(.wd-btn):hover { color: var(--wd-blau-hell); }
|
|
.wd a.wd-btn { text-decoration: none; }
|
|
.wd strong { color: var(--wd-text); font-weight: 700; }
|
|
|
|
.wd-eyebrow {
|
|
display: inline-block;
|
|
font-size: 0.8rem;
|
|
letter-spacing: .18em;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
color: var(--wd-blau);
|
|
margin-bottom: .9em;
|
|
}
|
|
.wd-eyebrow--lila { color: var(--wd-lila); }
|
|
|
|
/* Sichtbarer Fokus ÜBERALL (Masterplan S.15 Barrierearmut). :focus-visible
|
|
statt :focus, damit Mausklicks keinen Rahmen hinterlassen, Tastatur aber
|
|
immer einen — und zwar auch auf Elementen, die erst später dazukommen. */
|
|
.wd :focus-visible {
|
|
outline: 3px solid var(--wd-blau);
|
|
outline-offset: 3px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Sprungmarke für Tastatur-/Screenreader-Nutzung. */
|
|
.wd-skip {
|
|
position: absolute; left: -9999px; top: 0; z-index: 200;
|
|
background: var(--wd-blau); color: var(--wd-schwarz); font-weight: 800;
|
|
padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
|
|
}
|
|
.wd-skip:focus { left: 0; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
[hidden] MUSS gewinnen.
|
|
|
|
Das hidden-Attribut wird vom Browser nur mit "display: none" aus dem
|
|
Standard-Stylesheet umgesetzt — jede eigene display-Angabe schlaegt es.
|
|
Und genau die haben hier viele Elemente: Knoepfe sind inline-flex,
|
|
Karten sind flex, Raster sind grid.
|
|
|
|
Folge ohne diese Regel: el.hidden = true im JavaScript hat schlicht
|
|
keine Wirkung, und das Element bleibt sichtbar. Genau so aufgefallen im
|
|
Anfrageformular (22.08.2026) -- der "Zurueck"-Knopf stand auch auf dem
|
|
ersten Schritt da, obwohl es dorthin nichts zurueckzugehen gibt.
|
|
|
|
Das !important ist hier ausnahmsweise richtig: "versteckt" ist eine
|
|
Aussage ueber den Zustand, nicht ueber die Gestaltung, und darf von
|
|
keiner Gestaltungsregel ueberstimmt werden.
|
|
--------------------------------------------------------------------- */
|
|
.wd [hidden] { display: none !important; }
|
|
|
|
.wd-visuell-versteckt {
|
|
position: absolute; width: 1px; height: 1px; overflow: hidden;
|
|
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
|
|
}
|
|
|
|
|
|
/* ---------------------------------------------------------------------
|
|
BILDVERHAELTNIS — diese Regel verhindert einen Fehler, der schon
|
|
passiert ist und sonst wieder passiert.
|
|
|
|
Bilder tragen im HTML bewusst width/height als Attribute: der Browser
|
|
reserviert damit vor dem Laden den richtigen Platz und die Seite
|
|
springt beim Nachladen nicht. Diese Attribute wirken aber wie eine
|
|
CSS-Hoehe -- und schlagen damit jedes spaetere "aspect-ratio".
|
|
|
|
Live gemeldet am 22.08.2026 ("die sollen alle gleich aussehen"): die
|
|
beiden Projektbilder standen mit 750px bzw. 696px Hoehe bei nur 576px
|
|
Breite da, also hochkant gestreckt und ungleich hoch, obwohl im CSY
|
|
sauber 16:10 stand.
|
|
|
|
"height: auto" gibt die Hoehe an aspect-ratio zurueck. Es steht hier
|
|
einmal zentral fuer alle Bilder mit Seitenverhaeltnis, statt in jeder
|
|
einzelnen Regel -- so kann es bei einem neuen Bild nicht vergessen
|
|
werden.
|
|
--------------------------------------------------------------------- */
|
|
.wd img[width][height] { height: auto; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
3. KARTEN — "glasartig mit feinen Neonrändern" (Masterplan S.6)
|
|
Der Rand ist bewusst ein Verlauf über border-box statt einer flachen
|
|
Farbe: dadurch wirkt er wie eine Lichtkante, nicht wie ein Strich.
|
|
--------------------------------------------------------------------- */
|
|
.wd-karte {
|
|
position: relative;
|
|
border-radius: var(--wd-r-gross);
|
|
padding: clamp(1.3rem, 2.6vw, 1.9rem);
|
|
background:
|
|
linear-gradient(180deg, rgba(20, 32, 50, .72), rgba(9, 15, 26, .86)) padding-box,
|
|
linear-gradient(140deg, rgb(var(--wd-blau-rgb) / .40), rgb(var(--wd-blau-rgb) / .07) 45%, rgb(var(--wd-lila-rgb) / .30)) border-box;
|
|
border: 1px solid transparent;
|
|
box-shadow: var(--wd-schatten);
|
|
backdrop-filter: blur(10px);
|
|
transition: transform var(--wd-zeit) ease, box-shadow var(--wd-zeit) ease;
|
|
}
|
|
/* Sekundäre Bereiche tragen Lila (Masterplan S.6). */
|
|
.wd-karte--lila {
|
|
background:
|
|
linear-gradient(180deg, rgba(26, 22, 48, .72), rgba(12, 10, 24, .88)) padding-box,
|
|
linear-gradient(140deg, rgb(var(--wd-lila-rgb) / .42), rgb(var(--wd-lila-rgb) / .07) 45%, rgb(var(--wd-blau-rgb) / .26)) border-box;
|
|
}
|
|
/* Nur für Karten, die wirklich klickbar sind — eine Karte, die sich hebt,
|
|
ohne dass man sie anklicken kann, verspricht eine Aktion, die es nicht
|
|
gibt. */
|
|
a.wd-karte:hover, .wd-karte--klickbar:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--wd-schatten-tief), 0 0 44px -20px rgb(var(--wd-blau-rgb) / .55);
|
|
}
|
|
|
|
/* Farbige Kappe oben — übernimmt die Optik der Masterplan-PDF, in der jede
|
|
Karte einen blauen bzw. lila Balken trägt. */
|
|
.wd-karte--kappe { padding-top: clamp(1.6rem, 3vw, 2.2rem); overflow: hidden; }
|
|
.wd-karte--kappe::before {
|
|
content: "";
|
|
position: absolute; top: 0; left: 0; right: 0; height: 5px;
|
|
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
|
}
|
|
.wd-karte--lila.wd-karte--kappe::before { background: linear-gradient(90deg, var(--wd-lila-tief), var(--wd-lila)); }
|
|
|
|
.wd-karte h3 { margin-bottom: .55em; }
|
|
.wd-karte > :last-child { margin-bottom: 0; }
|
|
|
|
/* Aufzählung in Karten — Punkt als eigenes Element statt list-style, damit
|
|
die Farbe steuerbar ist und mehrzeilige Punkte sauber einrücken. */
|
|
.wd-liste { margin: 0; padding: 0; list-style: none; }
|
|
.wd-liste li {
|
|
position: relative;
|
|
padding-left: 1.35rem;
|
|
margin-bottom: .55rem;
|
|
color: var(--wd-text-mid);
|
|
font-size: clamp(.98rem, 1.4vw, 1.05rem);
|
|
}
|
|
.wd-liste li::before {
|
|
content: "";
|
|
position: absolute; left: 0; top: .62em;
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--wd-blau);
|
|
box-shadow: 0 0 10px rgb(var(--wd-blau-rgb) / .7);
|
|
}
|
|
.wd-karte--lila .wd-liste li::before { background: var(--wd-lila); box-shadow: 0 0 10px rgb(var(--wd-lila-rgb) / .7); }
|
|
.wd-liste li:last-child { margin-bottom: 0; }
|
|
|
|
/* ---------- Raster ---------- */
|
|
.wd-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
|
|
.wd-grid--2 { grid-template-columns: repeat(2, 1fr); }
|
|
.wd-grid--3 { grid-template-columns: repeat(3, 1fr); }
|
|
.wd-grid--4 { grid-template-columns: repeat(4, 1fr); }
|
|
@media (max-width: 900px) { .wd-grid--3, .wd-grid--4 { grid-template-columns: repeat(2, 1fr); } }
|
|
@media (max-width: 640px) { .wd-grid--2, .wd-grid--3, .wd-grid--4 { grid-template-columns: 1fr; } }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
4. KNÖPFE
|
|
Genau EIN Haupt-CTA pro Seite (Masterplan S.3) — deshalb gibt es
|
|
bewusst nur eine einzige auffällige Knopfvariante. Alles andere ist
|
|
sichtbar, konkurriert aber nicht.
|
|
--------------------------------------------------------------------- */
|
|
.wd-btn {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
|
|
/* min-height 48px = Touch-Ziel-Mindestmaß (Masterplan S.15). */
|
|
min-height: 48px;
|
|
padding: .85rem 1.7rem;
|
|
/* Abgerundetes Rechteck statt Pillenform (999px).
|
|
Rueckmeldung 22.08.2026: "das sieht lang gezogen aus". Stimmt — bei
|
|
einer Pille waechst der Radius optisch mit der Breite mit, ein breiter
|
|
Knopf wirkt dadurch auseinandergezogen wie eine Tablette. Ein fester
|
|
Radius haelt die Form bei jeder Breite gleich und wirkt ruhiger und
|
|
hochwertiger. */
|
|
border-radius: 14px;
|
|
border: 1px solid transparent;
|
|
font-family: var(--font-head);
|
|
font-weight: 700;
|
|
font-size: 1rem;
|
|
line-height: 1.2;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: transform var(--wd-zeit-schnell) ease, box-shadow var(--wd-zeit) ease,
|
|
background var(--wd-zeit) ease, border-color var(--wd-zeit) ease, color var(--wd-zeit) ease;
|
|
}
|
|
/* Sofortige, sichtbare Reaktion (Masterplan S.6 "Buttons reagieren sofort
|
|
und sichtbar") — active feuert ohne Verzögerung, auch auf dem Handy. */
|
|
.wd-btn:active { transform: translateY(1px) scale(.985); }
|
|
.wd-btn[disabled], .wd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
|
|
|
|
.wd .wd-btn--haupt, .wd-btn--haupt {
|
|
/* Dunkler Text auf hellem Babyblau: 11.7:1 — der einzige Weg, einen
|
|
leuchtenden Knopf zu bauen, ohne die Lesbarkeit zu opfern. */
|
|
background: linear-gradient(135deg, var(--wd-blau-hell), var(--wd-blau) 55%, var(--wd-ion));
|
|
color: var(--wd-schwarz);
|
|
box-shadow: 0 12px 34px -14px rgb(var(--wd-blau-rgb) / .8);
|
|
}
|
|
.wd-btn--haupt:hover { box-shadow: 0 16px 44px -14px rgb(var(--wd-blau-rgb) / .95); transform: translateY(-2px); }
|
|
|
|
.wd .wd-btn--zweit, .wd-btn--zweit {
|
|
background: rgb(var(--wd-blau-rgb) / .07);
|
|
border-color: var(--wd-rand-stark);
|
|
color: var(--wd-blau-hell);
|
|
}
|
|
.wd-btn--zweit:hover { background: rgb(var(--wd-blau-rgb) / .14); border-color: var(--wd-blau); }
|
|
|
|
.wd .wd-btn--still, .wd-btn--still { background: transparent; border-color: var(--wd-rand); color: var(--wd-text-mid); }
|
|
.wd-btn--still:hover { border-color: var(--wd-rand-stark); color: var(--wd-text); }
|
|
|
|
.wd-btn--breit { width: 100%; }
|
|
/* "klein" heißt schmaler und leiser, NICHT niedriger als das Touch-Ziel.
|
|
Die Höhe stand hier ursprünglich auf 40px — die Handy-Abnahme
|
|
(server/pruefe-webdesign-handy.mjs) hat das quer über alle Seiten
|
|
angemerkt: „Dieses Paket anfragen“, „Live ansehen“ und „Was genau
|
|
enthalten ist“ waren durchgehend 4px zu flach. 44px ist die Untergrenze,
|
|
ab der ein Ziel mit dem Daumen zuverlässig getroffen wird. */
|
|
.wd-btn--klein { min-height: 44px; padding: .6rem 1.05rem; font-size: .9rem; }
|
|
|
|
.wd-btn-reihe { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
5. HINWEISFLÄCHEN — Gold ist AUSSCHLIESSLICH hierfür reserviert
|
|
(Masterplan S.6: "Gold ausschließlich für wichtige Hinweise und
|
|
Zahlungsinformationen"). Wer Gold sieht, soll wissen: das ist wichtig.
|
|
--------------------------------------------------------------------- */
|
|
.wd-hinweis {
|
|
position: relative;
|
|
border-radius: var(--wd-r);
|
|
padding: 1.15rem 1.35rem 1.15rem 1.6rem;
|
|
background: linear-gradient(180deg, rgb(var(--wd-gold-rgb) / .09), rgb(var(--wd-gold-rgb) / .04));
|
|
border: 1px solid rgb(var(--wd-gold-rgb) / .32);
|
|
border-left: 4px solid var(--wd-gold);
|
|
}
|
|
.wd-hinweis-titel {
|
|
margin: 0 0 .35rem;
|
|
font-family: var(--font-head);
|
|
font-weight: 800;
|
|
font-size: .82rem;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
color: var(--wd-gold);
|
|
}
|
|
.wd-hinweis p { margin: 0; color: var(--wd-text-mid); font-size: .98rem; }
|
|
.wd-hinweis p + p { margin-top: .6rem; }
|
|
|
|
/* Neutrale Variante für Erklärungen, die NICHT wichtig-wichtig sind —
|
|
damit Gold seine Signalwirkung behält. */
|
|
.wd-notiz {
|
|
border-radius: var(--wd-r);
|
|
padding: 1rem 1.25rem;
|
|
background: rgb(var(--wd-blau-rgb) / .05);
|
|
border: 1px solid var(--wd-rand);
|
|
}
|
|
.wd-notiz p { margin: 0; font-size: .96rem; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
6. TAGS / KENNZEICHEN
|
|
--------------------------------------------------------------------- */
|
|
.wd-tag {
|
|
display: inline-flex; align-items: center; gap: .35rem;
|
|
padding: .3rem .7rem;
|
|
border-radius: 999px;
|
|
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
|
|
background: rgb(var(--wd-blau-rgb) / .12);
|
|
border: 1px solid var(--wd-rand-stark);
|
|
color: var(--wd-blau-hell);
|
|
}
|
|
.wd-tag--lila { background: rgb(var(--wd-lila-rgb) / .12); border-color: rgb(var(--wd-lila-rgb) / .34); color: var(--wd-lila); }
|
|
.wd-tag--gold { background: rgb(var(--wd-gold-rgb) / .12); border-color: rgb(var(--wd-gold-rgb) / .34); color: var(--wd-gold); }
|
|
.wd-tag--ok { background: rgb(var(--wd-ok-rgb) / .12); border-color: rgb(var(--wd-ok-rgb) / .34); color: var(--wd-ok); }
|
|
.wd-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
7. PREISKARTEN (Masterplan S.8)
|
|
Preis, Dauer und Personalisierungshinweis gehören sichtbar zusammen —
|
|
der Hinweis steht deshalb direkt unter dem Preis, nicht im Kleingedruckten.
|
|
--------------------------------------------------------------------- */
|
|
.wd-preis-karte { display: flex; flex-direction: column; }
|
|
.wd-preis {
|
|
font-family: var(--font-head);
|
|
font-weight: 800;
|
|
font-size: clamp(1.9rem, 4.4vw, 2.5rem);
|
|
line-height: 1.1;
|
|
margin: .2rem 0 .5rem;
|
|
color: var(--wd-blau);
|
|
}
|
|
.wd-karte--lila .wd-preis { color: var(--wd-lila); }
|
|
.wd-preis-zeile { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
|
|
.wd-preis-label { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wd-blau); }
|
|
.wd-karte--lila .wd-preis-label { color: var(--wd-lila); }
|
|
.wd-preis-wert { color: var(--wd-text-mid); font-size: .98rem; }
|
|
/* mt:auto schiebt den Knopf immer an den Kartenboden — sonst stehen die
|
|
Knöpfe in einer Reihe unterschiedlich hoher Karten treppenförmig. */
|
|
.wd-preis-karte .wd-btn { margin-top: auto; }
|
|
.wd-personalisierung {
|
|
margin-top: .2rem;
|
|
font-size: .88rem;
|
|
color: var(--wd-text-soft);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
8. NUMMERIERTE SCHRITTE (Ablauf / Customer Journey)
|
|
--------------------------------------------------------------------- */
|
|
.wd-schritte { display: grid; gap: 1rem; }
|
|
.wd-schritt {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1.1rem;
|
|
align-items: start;
|
|
border-radius: var(--wd-r-gross);
|
|
padding: 1.25rem 1.4rem;
|
|
background: linear-gradient(180deg, rgba(20, 32, 50, .55), rgba(9, 15, 26, .75));
|
|
border: 1px solid var(--wd-rand);
|
|
}
|
|
.wd-schritt-nr {
|
|
font-family: var(--font-head);
|
|
font-weight: 800;
|
|
font-size: clamp(1.4rem, 3vw, 1.9rem);
|
|
line-height: 1;
|
|
min-width: 2.2ch;
|
|
color: var(--wd-blau);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.wd-schritt:nth-child(even) { border-color: rgb(var(--wd-lila-rgb) / .18); }
|
|
.wd-schritt:nth-child(even) .wd-schritt-nr { color: var(--wd-lila); }
|
|
.wd-schritt h3 { margin: 0 0 .3em; font-size: 1.12rem; }
|
|
.wd-schritt p { margin: 0; font-size: 1rem; }
|
|
@media (max-width: 520px) {
|
|
.wd-schritt { grid-template-columns: 1fr; gap: .4rem; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
9. FAQ — natives <details>, damit es ohne JavaScript funktioniert
|
|
und die Tastaturbedienung vom Browser kommt statt nachgebaut zu werden.
|
|
--------------------------------------------------------------------- */
|
|
.wd-faq { border-radius: var(--wd-r); border: 1px solid var(--wd-rand); background: rgb(var(--wd-glas-rgb) / .5); margin-bottom: .7rem; overflow: hidden; }
|
|
.wd-faq > summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
padding: 1.05rem 3rem 1.05rem 1.25rem;
|
|
position: relative;
|
|
font-family: var(--font-head);
|
|
font-weight: 700;
|
|
font-size: 1.04rem;
|
|
color: var(--wd-text);
|
|
transition: background var(--wd-zeit-schnell) ease;
|
|
}
|
|
.wd-faq > summary::-webkit-details-marker { display: none; }
|
|
.wd-faq > summary:hover { background: rgb(var(--wd-blau-rgb) / .05); }
|
|
.wd-faq > summary::after {
|
|
content: "+";
|
|
position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%);
|
|
font-size: 1.5rem; line-height: 1; color: var(--wd-blau);
|
|
transition: transform var(--wd-zeit) ease;
|
|
}
|
|
.wd-faq[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
|
|
.wd-faq-inhalt { padding: 0 1.25rem 1.15rem; }
|
|
.wd-faq-inhalt p { margin: 0; font-size: 1rem; }
|
|
.wd-faq-inhalt p + p { margin-top: .7rem; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
10. FORMULARE (Masterplan S.10 + S.15)
|
|
Zustände für Fehler und Erfolg sind Pflicht — und der Fehler steht
|
|
IMMER unter dem Feld, nie nur als Farbe: Farbe allein ist für
|
|
farbfehlsichtige Menschen keine Information.
|
|
--------------------------------------------------------------------- */
|
|
.wd-feld { margin-bottom: 1.15rem; }
|
|
.wd-feld > label,
|
|
.wd-feld-legende {
|
|
display: block;
|
|
margin-bottom: .45rem;
|
|
font-weight: 700;
|
|
font-size: .95rem;
|
|
color: var(--wd-text);
|
|
}
|
|
.wd-pflicht { color: var(--wd-blau); margin-left: .15rem; }
|
|
.wd-feld-hilfe { display: block; margin: -.2rem 0 .5rem; font-size: .88rem; color: var(--wd-text-soft); }
|
|
|
|
.wd-eingabe,
|
|
.wd-feld input[type="text"], .wd-feld input[type="email"], .wd-feld input[type="tel"],
|
|
.wd-feld input[type="url"], .wd-feld input[type="number"], .wd-feld input[type="date"],
|
|
.wd-feld input[type="password"], .wd-feld input[type="search"],
|
|
.wd-feld select, .wd-feld textarea {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: .82rem 1rem;
|
|
min-height: 48px;
|
|
border-radius: 10px;
|
|
background: var(--wd-flaeche);
|
|
border: 1.5px solid var(--wd-rand);
|
|
color: var(--wd-text);
|
|
font-family: var(--font-body);
|
|
/* 16px verhindert, dass iOS beim Fokus in ein Feld hineinzoomt. */
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
transition: border-color var(--wd-zeit-schnell) ease, box-shadow var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
|
|
}
|
|
.wd-feld textarea { min-height: 130px; resize: vertical; }
|
|
.wd-feld select {
|
|
/* Eigener Pfeil: das Standard-Dreieck von Windows ist auf dunklem Grund
|
|
fast unsichtbar. */
|
|
appearance: none;
|
|
background-image: linear-gradient(45deg, transparent 50%, var(--wd-blau) 50%), linear-gradient(135deg, var(--wd-blau) 50%, transparent 50%);
|
|
background-position: calc(100% - 20px) center, calc(100% - 14px) center;
|
|
background-size: 6px 6px, 6px 6px;
|
|
background-repeat: no-repeat;
|
|
padding-right: 2.6rem;
|
|
}
|
|
.wd-feld ::placeholder { color: rgba(143, 159, 180, .7); }
|
|
.wd-eingabe:focus, .wd-feld input:focus, .wd-feld select:focus, .wd-feld textarea:focus {
|
|
outline: none;
|
|
border-color: var(--wd-blau);
|
|
background: #12203180;
|
|
box-shadow: 0 0 0 4px rgb(var(--wd-blau-rgb) / .16);
|
|
}
|
|
|
|
/* Fehlerzustand */
|
|
.wd-feld--fehler .wd-eingabe,
|
|
.wd-feld--fehler input, .wd-feld--fehler select, .wd-feld--fehler textarea {
|
|
border-color: var(--wd-fehler);
|
|
box-shadow: 0 0 0 4px rgb(var(--wd-fehler-rgb) / .12);
|
|
}
|
|
.wd-feld-fehler {
|
|
display: none;
|
|
margin: .45rem 0 0;
|
|
font-size: .9rem;
|
|
color: var(--wd-fehler);
|
|
font-weight: 600;
|
|
}
|
|
.wd-feld-fehler::before { content: "⚠ "; }
|
|
.wd-feld--fehler .wd-feld-fehler { display: block; }
|
|
|
|
/* Auswahlkacheln (Radio/Checkbox als anklickbare Fläche) — deutlich
|
|
fingerfreundlicher als native Punkte und zeigt den gewählten Zustand
|
|
nicht nur farblich, sondern über Rand + Häkchen. */
|
|
.wd-wahl { display: grid; gap: .7rem; }
|
|
.wd-wahl--2 { grid-template-columns: repeat(2, 1fr); }
|
|
@media (max-width: 640px) { .wd-wahl--2 { grid-template-columns: 1fr; } }
|
|
.wd-wahl-kachel { position: relative; display: block; cursor: pointer; }
|
|
.wd-wahl-kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
|
|
.wd-wahl-inhalt {
|
|
display: block;
|
|
padding: 1rem 1.15rem 1rem 2.9rem;
|
|
border-radius: 14px;
|
|
background: rgb(var(--wd-glas-rgb) / .6);
|
|
border: 1.5px solid var(--wd-rand);
|
|
transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
|
|
}
|
|
.wd-wahl-inhalt::before {
|
|
content: "";
|
|
position: absolute; left: 1rem; top: 1.15rem;
|
|
width: 20px; height: 20px; border-radius: 6px;
|
|
border: 2px solid var(--wd-rand-stark);
|
|
background: rgba(5, 7, 11, .6);
|
|
transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
|
|
}
|
|
.wd-wahl-kachel input[type="radio"] + .wd-wahl-inhalt::before { border-radius: 50%; }
|
|
.wd-wahl-kachel:hover .wd-wahl-inhalt { border-color: var(--wd-rand-stark); }
|
|
.wd-wahl-kachel input:checked + .wd-wahl-inhalt {
|
|
border-color: var(--wd-blau);
|
|
background: rgb(var(--wd-blau-rgb) / .09);
|
|
}
|
|
.wd-wahl-kachel input:checked + .wd-wahl-inhalt::before {
|
|
border-color: var(--wd-blau);
|
|
background: var(--wd-blau);
|
|
/* Häkchen als CSS-Maske — kein Bild, keine Schriftart nötig. */
|
|
box-shadow: inset 0 0 0 3px var(--wd-schwarz), inset 0 0 0 20px var(--wd-blau);
|
|
}
|
|
.wd-wahl-kachel input:focus-visible + .wd-wahl-inhalt { outline: 3px solid var(--wd-blau); outline-offset: 3px; }
|
|
.wd-wahl-titel { display: block; font-weight: 700; color: var(--wd-text); }
|
|
.wd-wahl-text { display: block; font-size: .9rem; color: var(--wd-text-soft); margin-top: .15rem; }
|
|
|
|
/* Erfolgs-/Fehlermeldung eines ganzen Formulars */
|
|
.wd-meldung { border-radius: var(--wd-r); padding: 1rem 1.2rem; margin-bottom: 1.2rem; font-weight: 600; }
|
|
.wd-meldung--ok { background: rgb(var(--wd-ok-rgb) / .1); border: 1px solid rgb(var(--wd-ok-rgb) / .38); color: var(--wd-ok); }
|
|
.wd-meldung--fehler { background: rgb(var(--wd-fehler-rgb) / .1); border: 1px solid rgb(var(--wd-fehler-rgb) / .38); color: var(--wd-fehler); }
|
|
.wd-meldung[hidden] { display: none; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
11. FORTSCHRITT (mehrstufiges Formular)
|
|
--------------------------------------------------------------------- */
|
|
.wd-fortschritt { margin-bottom: 1.8rem; }
|
|
.wd-fortschritt-schiene { height: 6px; border-radius: 999px; background: rgb(var(--wd-blau-rgb) / .12); overflow: hidden; }
|
|
.wd-fortschritt-balken {
|
|
height: 100%; width: 0%;
|
|
border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
|
transition: width var(--wd-zeit-lang) cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.wd-fortschritt-text { margin: .6rem 0 0; font-size: .88rem; color: var(--wd-text-soft); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
12. TABELLEN (Verwaltung / Portal)
|
|
Auf schmalen Bildschirmen scrollt die Tabelle waagerecht in ihrem
|
|
eigenen Kasten, statt die ganze Seite zu verbreitern.
|
|
--------------------------------------------------------------------- */
|
|
.wd-tabelle-rahmen { overflow-x: auto; border-radius: var(--wd-r); border: 1px solid var(--wd-rand); }
|
|
.wd-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
|
|
.wd-tabelle th, .wd-tabelle td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--wd-rand); }
|
|
.wd-tabelle th {
|
|
font-family: var(--font-head); font-size: .78rem; font-weight: 800;
|
|
letter-spacing: .1em; text-transform: uppercase; color: var(--wd-blau);
|
|
background: rgb(var(--wd-blau-rgb) / .05);
|
|
position: sticky; top: 0;
|
|
}
|
|
.wd-tabelle tbody tr:last-child td { border-bottom: none; }
|
|
.wd-tabelle tbody tr:hover { background: rgb(var(--wd-blau-rgb) / .04); }
|
|
.wd-tabelle td { color: var(--wd-text-mid); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
13. BEWEGUNG — "kontrolliert beim Scrollen" (Masterplan S.6)
|
|
Die Elemente starten sichtbar und werden erst per JS auf unsichtbar
|
|
gesetzt (Klasse .wd-bereit am <html>). Ohne JavaScript oder bei einem
|
|
Skriptfehler bleibt dadurch ALLES lesbar — der häufigste schwere Fehler
|
|
bei Scroll-Animationen ist eine dauerhaft unsichtbare Seite.
|
|
--------------------------------------------------------------------- */
|
|
.wd-bereit .wd-auf {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
transition: opacity var(--wd-zeit-lang) ease, transform var(--wd-zeit-lang) cubic-bezier(.22, 1, .36, 1);
|
|
}
|
|
.wd-bereit .wd-auf.wd-sichtbar { opacity: 1; transform: none; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
14. KOPF- UND FUSSZEILE des Webdesign-Bereichs
|
|
Eigene Leiste statt der Universe-Navigation: der Bereich hat eigene
|
|
Ziele (Anfrage statt Bewerbung) und ist bis zur Freigabe nicht
|
|
öffentlich. Der Rückweg ins Universe steht trotzdem immer sichtbar
|
|
drin (Masterplan S.14 "Direkte Navigation zwischen Universe und
|
|
Webdesign").
|
|
--------------------------------------------------------------------- */
|
|
.wd-kopf {
|
|
position: sticky; top: 0; z-index: 60;
|
|
background: rgba(5, 7, 11, .92);
|
|
backdrop-filter: blur(14px);
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.wd-kopf-bar {
|
|
width: min(1320px, 94vw); margin: 0 auto;
|
|
display: flex; align-items: center; gap: 1rem;
|
|
padding: .7rem 0;
|
|
}
|
|
/* min-height 44px: die Marke ist ein Link auf die Startseite und damit
|
|
ein echtes Touch-Ziel — sie war vorher exakt so hoch wie das Logo (42px). */
|
|
.wd-marke { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; min-height: 44px; }
|
|
.wd-marke img { width: 42px; height: 42px; object-fit: contain; }
|
|
.wd-marke-text { display: flex; flex-direction: column; line-height: 1.1; }
|
|
.wd-marke-oben { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--wd-text); letter-spacing: .02em; }
|
|
.wd-marke-unten { font-size: 0.75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--wd-blau); font-weight: 700; }
|
|
|
|
.wd-nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
|
|
.wd-nav a {
|
|
/* inline-flex + min-height statt nur Innenabstand: mit reinem padding
|
|
kam der Menüpunkt auf 43px — einen Pixel unter dem Touch-Ziel, was
|
|
die Handy-Abnahme zu Recht angemerkt hat. */
|
|
display: inline-flex; align-items: center; min-height: 44px;
|
|
padding: .5rem .8rem; border-radius: 10px;
|
|
font-size: .95rem; font-weight: 600; color: var(--wd-text-mid);
|
|
transition: color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease;
|
|
}
|
|
.wd-nav a:hover { color: var(--wd-text); background: rgb(var(--wd-blau-rgb) / .07); }
|
|
.wd-nav a.wd-aktiv { color: var(--wd-blau); background: rgb(var(--wd-blau-rgb) / .11); }
|
|
.wd-nav .wd-btn { margin-left: .5rem; }
|
|
|
|
.wd-menue-knopf {
|
|
display: none; margin-left: auto;
|
|
align-items: center; gap: .45rem;
|
|
min-height: 44px; padding: .5rem .9rem;
|
|
border-radius: 10px; border: 1px solid var(--wd-rand);
|
|
background: transparent; color: var(--wd-text); cursor: pointer; font-weight: 700;
|
|
}
|
|
|
|
/* Sprachschalter — teilt sich die gespeicherte Sprache mit dem Universe
|
|
(localStorage "dogi-sprache"), damit ein Wechsel hier auch dort gilt. */
|
|
.wd-sprache { position: relative; }
|
|
.wd-sprache-knopf {
|
|
display: inline-flex; align-items: center; gap: .35rem;
|
|
/* 44px statt 40px — auch auf dem Computer ist das der bessere Wert:
|
|
Touchscreen-Laptops und Tablets im Querformat landen ebenfalls hier. */
|
|
min-height: 44px; padding: .5rem .75rem;
|
|
border-radius: 10px; border: 1px solid var(--wd-rand);
|
|
background: transparent; color: var(--wd-text-mid); cursor: pointer;
|
|
font-weight: 700; font-size: .88rem;
|
|
}
|
|
.wd-sprache-knopf:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); }
|
|
.wd-sprache-liste {
|
|
position: absolute; right: 0; top: calc(100% + .4rem);
|
|
min-width: 190px; padding: .35rem;
|
|
border-radius: 10px;
|
|
background: var(--wd-dunkelblau);
|
|
border: 1px solid var(--wd-rand-stark);
|
|
box-shadow: var(--wd-schatten);
|
|
display: none;
|
|
z-index: 70;
|
|
}
|
|
.wd-sprache.wd-offen .wd-sprache-liste { display: block; }
|
|
.wd-sprache-liste button {
|
|
display: flex; align-items: center; gap: .6rem;
|
|
width: 100%; min-height: 42px; padding: .5rem .7rem;
|
|
border: none; border-radius: 10px; background: transparent;
|
|
color: var(--wd-text-mid); cursor: pointer; text-align: left; font-size: .95rem;
|
|
}
|
|
.wd-sprache-liste button:hover { background: rgb(var(--wd-blau-rgb) / .09); color: var(--wd-text); }
|
|
.wd-sprache-liste button[aria-current="true"] { color: var(--wd-blau); font-weight: 700; }
|
|
.wd-sprache-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
|
|
|
@media (max-width: 1080px) {
|
|
.wd-menue-knopf { display: inline-flex; }
|
|
.wd-nav {
|
|
display: none;
|
|
position: absolute; left: 0; right: 0; top: 100%;
|
|
flex-direction: column; align-items: stretch; gap: .2rem;
|
|
padding: .8rem 4vw 1.2rem;
|
|
background: var(--wd-schwarz);
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
box-shadow: var(--wd-schatten);
|
|
/* Vollbildnavigation auf dem Handy (Masterplan S.5), aber scrollbar —
|
|
bei 8 Punkten + Sprachschalter passt sonst nicht alles auf ein
|
|
kleines Display. */
|
|
max-height: calc(100dvh - 70px);
|
|
overflow-y: auto;
|
|
}
|
|
.wd-nav.wd-offen { display: flex; }
|
|
/* Die minimale Kopfzeile (Zugangswand) enthält nur den Sprachschalter und
|
|
hat deshalb bewusst keinen Menü-Knopf. Ohne diese Ausnahme wäre sie auf
|
|
dem Handy durch die Regel oben komplett unsichtbar — man könnte die
|
|
Sprache dort dann gar nicht mehr umstellen. */
|
|
.wd-nav--minimal {
|
|
display: flex; position: static; flex-direction: row;
|
|
padding: 0; background: none; border: none; box-shadow: none;
|
|
max-height: none; overflow: visible; width: auto;
|
|
}
|
|
.wd-nav--minimal .wd-sprache { margin-top: 0; }
|
|
.wd-nav--minimal .wd-sprache-knopf { width: auto; }
|
|
.wd-nav--minimal .wd-sprache-liste { position: absolute; width: auto; }
|
|
.wd-nav a { padding: .8rem .9rem; font-size: 1.02rem; }
|
|
.wd-nav .wd-btn { margin: .6rem 0 0; }
|
|
.wd-sprache { margin-top: .6rem; }
|
|
.wd-sprache-knopf { width: 100%; justify-content: center; }
|
|
.wd-sprache-liste { position: static; width: 100%; margin-top: .4rem; }
|
|
}
|
|
|
|
/* Fußzeile */
|
|
.wd-fuss { border-top: 1px solid var(--wd-rand); background: rgba(5, 7, 11, .8); padding: 2.6rem 0 2rem; margin-top: 3rem; }
|
|
.wd-fuss-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
|
|
@media (max-width: 780px) { .wd-fuss-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
|
|
/* Die Spaltenueberschriften der Fusszeile sind jetzt h2 statt h4.
|
|
|
|
Grund: Sie folgten im Dokument auf die h2 der Seite -- ein Sprung von
|
|
h2 direkt auf h4. Wer sich mit einem Screenreader durch die
|
|
Ueberschriften bewegt, hoert dabei eine Gliederung, die es nicht gibt,
|
|
und vermutet uebersprungene Abschnitte (WCAG 1.3.1). Auf allen 13
|
|
Seiten in allen 5 Sprachen -- also 42 Stellen.
|
|
|
|
Die Klasse haelt die Optik unveraendert: Die Ebene sagt etwas ueber
|
|
die STRUKTUR, die Groesse ueber die GEWICHTUNG. Das sind zwei
|
|
verschiedene Dinge, und man soll das eine nicht ueber das andere
|
|
erzwingen muessen. */
|
|
.wd-fuss .wd-fuss-h, .wd-fuss h4 {
|
|
font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
|
|
color: var(--wd-blau); margin: 0 0 .8rem; font-weight: 700;
|
|
font-family: var(--font-head);
|
|
}
|
|
.wd-fuss ul li { margin-bottom: .1rem; }
|
|
/* Fußzeilenlinks waren nur so hoch wie ihre Zeile (20px) und damit auf dem
|
|
Handy praktisch nicht sicher zu treffen — sie liegen zudem dicht
|
|
untereinander, was Fehlgriffe zusätzlich begünstigt. Als inline-flex mit
|
|
Mindesthöhe sind sie ein ordentliches Touch-Ziel; die Fußzeile wird
|
|
dadurch etwas höher, was hier die richtige Abwägung ist. */
|
|
.wd-fuss a {
|
|
display: inline-flex; align-items: center; min-height: 44px;
|
|
color: var(--wd-text-mid); font-size: .95rem;
|
|
}
|
|
/* Die Marke in der Fußzeile bringt ihre eigene Höhe mit. */
|
|
.wd-fuss a.wd-marke { min-height: 48px; }
|
|
.wd-fuss a:hover { color: var(--wd-blau); }
|
|
.wd-fuss-unten {
|
|
margin-top: 2rem; padding-top: 1.2rem;
|
|
border-top: 1px solid var(--wd-rand);
|
|
display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
|
|
font-size: .86rem; color: var(--wd-text-soft);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
15. HERO
|
|
"Der erste Bildschirm enthält niemals zu viel Text" (Masterplan S.7).
|
|
min-height bewusst mit svh: 100vh ist auf dem Handy die Höhe OHNE
|
|
Adressleiste — der Knopf rutscht damit beim ersten Laden unter die
|
|
sichtbare Kante, genau das, was die Hero-Regel verbietet.
|
|
--------------------------------------------------------------------- */
|
|
.wd-hero { position: relative; padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(2.2rem, 4vw, 3.4rem); min-height: 68svh; display: flex; align-items: center; }
|
|
.wd-hero-inhalt { max-width: 780px; }
|
|
.wd-hero h1 { margin-bottom: .45em; }
|
|
.wd-hero .wd-lead { margin-bottom: 1.8rem; max-width: 62ch; }
|
|
.wd-hero-glanz {
|
|
/* Kein Farbverlauf über den ganzen Titel — nur die Kernaussage trägt ihn,
|
|
sonst leidet die Lesbarkeit langer Überschriften. */
|
|
background: linear-gradient(120deg, var(--wd-blau-hell), var(--wd-blau) 45%, var(--wd-lila));
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.wd-hero-belege { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2rem; }
|
|
.wd-hero-beleg { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--wd-text-soft); }
|
|
.wd-hero-beleg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wd-blau); box-shadow: 0 0 8px var(--wd-blau); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
16. INSTALLATIONS-HINWEIS ("Als App installieren")
|
|
Sitzt unten statt oben: oben würde er die Kopfzeile verdecken, und auf
|
|
dem Handy ist der Daumen unten. env(safe-area-inset-bottom) hält ihn
|
|
über der Gestenleiste neuerer iPhones — ohne das liegt der Schließen-
|
|
Knopf genau unter dem Strich und ist praktisch nicht treffbar.
|
|
--------------------------------------------------------------------- */
|
|
.wd-install {
|
|
position: fixed; z-index: 80;
|
|
left: 50%; transform: translateX(-50%);
|
|
bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
|
|
width: min(560px, calc(100vw - 1.6rem));
|
|
display: flex; align-items: center; gap: 1rem;
|
|
padding: .85rem 1rem;
|
|
border-radius: var(--wd-r);
|
|
background: rgba(11, 19, 32, .97);
|
|
border: 1px solid var(--wd-rand-stark);
|
|
box-shadow: var(--wd-schatten-tief);
|
|
backdrop-filter: blur(12px);
|
|
animation: wd-install-auf .45s cubic-bezier(.22, 1, .36, 1) both;
|
|
}
|
|
@keyframes wd-install-auf { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
|
|
.wd-install-text { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }
|
|
.wd-install-text img { border-radius: 10px; flex-shrink: 0; }
|
|
.wd-install-text strong { display: block; font-size: .95rem; color: var(--wd-text); }
|
|
.wd-install-text span { display: block; font-size: .84rem; color: var(--wd-text-soft); line-height: 1.45; }
|
|
.wd-install-knoepfe { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
|
|
.wd-install-knoepfe .wd-btn--still { min-width: 44px; padding: .5rem .7rem; }
|
|
@media (max-width: 560px) {
|
|
/* Auf schmalen Bildschirmen untereinander — nebeneinander wird der Text
|
|
auf zwei Wörter pro Zeile gequetscht. */
|
|
.wd-install { flex-direction: column; align-items: stretch; gap: .7rem; }
|
|
.wd-install-knoepfe { justify-content: flex-end; }
|
|
.wd-install-knoepfe .wd-btn--haupt { flex: 1; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
17. BEWEGUNGSREDUKTION — eine Regel für alles
|
|
--------------------------------------------------------------------- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root { --wd-zeit-schnell: 0s; --wd-zeit: 0s; --wd-zeit-lang: 0s; }
|
|
.wd *, .wd *::before, .wd *::after {
|
|
animation-duration: .001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: .001ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
/* Wichtig: die Einblend-Elemente müssen dann SOFORT sichtbar sein,
|
|
nicht "unsichtbar mit 0s Übergang". */
|
|
.wd-bereit .wd-auf { opacity: 1; transform: none; }
|
|
.wd-btn:hover, a.wd-karte:hover, .wd-karte--klickbar:hover { transform: none; }
|
|
}
|
|
|
|
/* Druckansicht: Angebote/Zusammenfassungen werden erfahrungsgemäß
|
|
ausgedruckt oder als PDF gesichert. */
|
|
@media print {
|
|
body.wd { background: #fff; color: #000; }
|
|
body.wd::before, body.wd::after, .wd-kopf, .wd-fuss, .wd-btn { display: none !important; }
|
|
.wd-karte { border: 1px solid #bbb; background: #fff; box-shadow: none; }
|
|
.wd h1, .wd h2, .wd h3, .wd p, .wd li { color: #000 !important; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
18. LEERER ZUSTAND IM KUNDENPORTAL
|
|
|
|
Ein leerer Bereich mit einem einzigen Satz ist eine verpasste
|
|
Gelegenheit. Wer hier zum ersten Mal landet, hat gerade sein Passwort
|
|
gesetzt und weiß noch nicht, was ihn erwartet — genau dann entscheidet
|
|
sich, ob die Seite souverän wirkt oder unfertig.
|
|
|
|
Deshalb zeigt der leere Zustand, WAS gleich hier stehen wird, statt
|
|
nur festzustellen, dass gerade nichts da ist.
|
|
--------------------------------------------------------------------- */
|
|
.po-leer { text-align: center; padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 3vw, 2rem); }
|
|
.po-leer-symbol { width: clamp(64px, 12vw, 92px); margin: 0 auto .9rem; position: relative; }
|
|
.po-leer-symbol img { width: 100%; height: auto; opacity: .9; }
|
|
.po-leer-symbol::before {
|
|
content: ""; position: absolute; inset: -24%; z-index: -1; border-radius: 50%;
|
|
background: radial-gradient(circle, rgb(var(--wd-blau-rgb) / .26), transparent 70%);
|
|
filter: blur(20px);
|
|
}
|
|
.po-leer h3 { margin-bottom: .3em; }
|
|
.po-leer > p { max-width: 48ch; margin-left: auto; margin-right: auto; }
|
|
|
|
.po-leer-liste {
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem;
|
|
margin: 1.6rem 0 1.2rem; text-align: left;
|
|
}
|
|
@media (max-width: 640px) { .po-leer-liste { grid-template-columns: 1fr; } }
|
|
.po-leer-punkt {
|
|
display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
|
|
padding: .9rem 1rem; border-radius: 14px;
|
|
background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
|
|
}
|
|
.po-leer-nr {
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: var(--font-head); font-weight: 800; font-size: .85rem;
|
|
color: var(--wd-blau); background: rgb(var(--wd-blau-rgb) / .12);
|
|
border: 1px solid var(--wd-rand-stark);
|
|
}
|
|
.po-leer-punkt strong { display: block; color: var(--wd-text); font-size: .98rem; margin-bottom: .15rem; }
|
|
/* :not(.po-leer-nr) ist hier PFLICHT, kein Feinschliff.
|
|
Der Zahlenkreis ist ebenfalls ein <span> in dieser Kachel. Ohne den
|
|
Ausschluss trifft ihn diese Regel mit -- und sie ist spezifischer
|
|
(Klasse + Element) als ".po-leer-nr" (nur Klasse). Sie erzwang dadurch
|
|
display:block, Schriftgroesse 14,4px und Zeilenhoehe 23px; die Ziffer
|
|
sass 15px neben der Kreismitte, statt darin.
|
|
Gemeldet am 22.08.2026 ("wieso sehen die zahlen immer noch so
|
|
scheisse aus?") und per Messung bestaetigt. Derselbe Spezifitaets-
|
|
Fehler wie zuvor beim Hauptknopf (blau auf blau) und bei den Namen auf
|
|
der Zugangswand -- deshalb steht die Begruendung hier so ausfuehrlich. */
|
|
.po-leer-punkt span:not(.po-leer-nr) { display: block; font-size: .88rem; color: var(--wd-text-soft); line-height: 1.5; }
|
|
.po-leer-fuss { margin: 0; }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
19. VORSCHAU IM LEEREN PORTAL
|
|
|
|
Die erste Fassung BESCHRIEB, was hier bald stehen wird ("Eine Leiste
|
|
zeigt dir, in welcher Phase dein Projekt ist"). Beschreibungen sind
|
|
schwach — man muss sie lesen und sich dann etwas vorstellen.
|
|
|
|
Diese Fassung ZEIGT es: eine echte, halbdurchsichtige Projektkarte,
|
|
deren Phasenleiste langsam durchläuft. Man sieht in zwei Sekunden, was
|
|
drei Sätze nicht erklären. Genau das ist der Unterschied zwischen
|
|
"erklärt" und "verstanden".
|
|
|
|
Die Karte ist bewusst als Vorschau erkennbar (gedämpft, mit Etikett) —
|
|
sie darf nie mit einem echten Projekt verwechselt werden.
|
|
--------------------------------------------------------------------- */
|
|
.po-vorschau {
|
|
position: relative;
|
|
border-radius: var(--wd-r-gross);
|
|
padding: clamp(1.1rem, 2.6vw, 1.5rem);
|
|
background: linear-gradient(180deg, rgba(20,32,50,.5), rgba(9,15,26,.66));
|
|
border: 1px dashed var(--wd-rand-stark);
|
|
text-align: left;
|
|
overflow: hidden;
|
|
}
|
|
.po-vorschau::after {
|
|
/* Sanfter Lichtstreifen, der einmal langsam durchwandert. Er sagt ohne
|
|
Worte "hier passiert gleich etwas", ohne zu blinken oder zu zappeln. */
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
background: linear-gradient(105deg, transparent 35%, rgb(var(--wd-blau-rgb) / .07) 50%, transparent 65%);
|
|
background-size: 260% 100%;
|
|
animation: po-schimmer 5.5s ease-in-out infinite;
|
|
pointer-events: none;
|
|
}
|
|
@keyframes po-schimmer { 0% { background-position: 130% 0; } 60%, 100% { background-position: -130% 0; } }
|
|
|
|
.po-vorschau-etikett {
|
|
position: absolute; top: .7rem; right: .8rem;
|
|
font-size: 0.75rem; letter-spacing: .14em; text-transform: uppercase;
|
|
font-weight: 800; color: var(--wd-text-soft);
|
|
padding: .2rem .55rem; border-radius: 999px;
|
|
background: rgba(5,7,11,.7); border: 1px solid var(--wd-rand);
|
|
}
|
|
.po-vorschau-nr { font-family: var(--font-head); font-weight: 800; font-size: .78rem; color: var(--wd-blau); opacity: .75; }
|
|
.po-vorschau h4 { margin: .15rem 0 .6rem; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--wd-text); opacity: .85; }
|
|
|
|
/* Die laufende Phasenleiste — der eigentliche Kern der Vorschau. */
|
|
.po-vorschau-phasen { display: flex; gap: 3px; margin-bottom: .5rem; }
|
|
.po-vorschau-phasen span {
|
|
flex: 1; height: 6px; border-radius: 999px;
|
|
background: rgb(var(--wd-blau-rgb) / .13);
|
|
animation: po-phase-lauf 7s ease-in-out infinite;
|
|
}
|
|
.po-vorschau-phasen span:nth-child(1) { animation-delay: 0s; }
|
|
.po-vorschau-phasen span:nth-child(2) { animation-delay: .55s; }
|
|
.po-vorschau-phasen span:nth-child(3) { animation-delay: 1.1s; }
|
|
.po-vorschau-phasen span:nth-child(4) { animation-delay: 1.65s; }
|
|
.po-vorschau-phasen span:nth-child(5) { animation-delay: 2.2s; }
|
|
.po-vorschau-phasen span:nth-child(6) { animation-delay: 2.75s; }
|
|
.po-vorschau-phasen span:nth-child(7) { animation-delay: 3.3s; }
|
|
@keyframes po-phase-lauf {
|
|
0%, 8% { background: rgb(var(--wd-blau-rgb) / .13); }
|
|
14%, 55% { background: var(--wd-blau-tief); }
|
|
100% { background: rgb(var(--wd-blau-rgb) / .13); }
|
|
}
|
|
|
|
.po-vorschau-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--wd-text-soft); }
|
|
.po-vorschau-marke {
|
|
display: inline-flex; align-items: center; gap: .3rem;
|
|
padding: .18rem .55rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
|
|
background: rgb(var(--wd-blau-rgb) / .12); color: var(--wd-blau);
|
|
}
|
|
.po-vorschau-schritt { margin: .7rem 0 0; font-size: .88rem; color: var(--wd-text-mid); opacity: .8; }
|
|
|
|
/* Bewegungsreduktion: keine Animation, aber die Leiste soll trotzdem
|
|
etwas zeigen — sonst steht dort eine leere graue Reihe. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.po-vorschau::after { animation: none; }
|
|
.po-vorschau-phasen span { animation: none; }
|
|
.po-vorschau-phasen span:nth-child(-n+3) { background: var(--wd-blau-tief); }
|
|
}
|
|
|
|
/* Die vier Merkmale kompakter und mit farbigem Akzent statt nur Nummer. */
|
|
.po-leer-punkt { transition: border-color var(--wd-zeit-schnell) ease, background var(--wd-zeit-schnell) ease; }
|
|
.po-leer-punkt:hover { border-color: var(--wd-rand-stark); background: rgb(var(--wd-blau-rgb) / .08); }
|
|
.po-leer-nr {
|
|
background: linear-gradient(135deg, rgb(var(--wd-blau-rgb) / .22), rgb(var(--wd-lila-rgb) / .18));
|
|
color: var(--wd-blau-hell); border-color: var(--wd-rand-stark);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
20. LEERER ZUSTAND — GEHOBENE FASSUNG
|
|
|
|
Drei Rückmeldungen vom 22.08.2026, alle drei berechtigt:
|
|
"Schrift und Kacheln sollen viel spezieller sein", "die Zahlen sollen
|
|
besser im Kreis sein", "die Kisten sollen eine spezielle Farbe
|
|
bekommen wenn sie fertig sind".
|
|
|
|
Der letzte Punkt war der wichtigste und inhaltlich der schwerste:
|
|
Vorher waren erledigte und laufende Phase fast gleich blau. Damit ging
|
|
die einzige Information verloren, die die Leiste überhaupt trägt —
|
|
nämlich WO man gerade steht. Jetzt sind es drei klar verschiedene
|
|
Zustände: erledigt (grün), gerade dran (leuchtendes Blau mit Puls),
|
|
kommt noch (gedämpft).
|
|
--------------------------------------------------------------------- */
|
|
|
|
/* ---------- Zahlenkreise ----------
|
|
Vorher ein flacher Kreis mit Zahl. Jetzt ein doppelter Ring: außen ein
|
|
Farbverlauf als Rand, innen die dunkle Fläche. Das ist derselbe Kniff
|
|
wie bei den Karten (Verlauf über border-box) und lässt den Kreis
|
|
plastisch wirken, statt aufgemalt. */
|
|
.po-leer-nr {
|
|
width: 40px; height: 40px; border-radius: 50%;
|
|
font-size: 1.02rem; font-weight: 800;
|
|
color: var(--wd-blau-hell);
|
|
border: 2px solid transparent;
|
|
background:
|
|
linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
|
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
|
box-shadow: 0 0 18px -6px rgb(var(--wd-blau-rgb) / .55);
|
|
flex-shrink: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: -.02em;
|
|
}
|
|
|
|
/* ---------- Merkmalskacheln ----------
|
|
Jede bekommt oben eine eigene Farbkante. Vier gleiche Kacheln wirken
|
|
wie eine Aufzählung; vier unterscheidbare wirken wie ein System. */
|
|
.po-leer-punkt {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 1.1rem 1.15rem 1.15rem;
|
|
border-radius: 14px;
|
|
gap: 1rem;
|
|
background: linear-gradient(180deg, rgba(20, 32, 50, .58), rgba(9, 15, 26, .74));
|
|
}
|
|
.po-leer-punkt::before {
|
|
content: "";
|
|
position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
|
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
|
opacity: .8;
|
|
}
|
|
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-lila-tief), var(--wd-lila)); }
|
|
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok)); }
|
|
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-gold)); }
|
|
.po-leer-punkt:nth-child(2) .po-leer-nr {
|
|
color: var(--wd-lila);
|
|
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
|
linear-gradient(140deg, var(--wd-lila), var(--wd-blau)) border-box;
|
|
box-shadow: 0 0 18px -6px rgb(var(--wd-lila-rgb) / .55);
|
|
}
|
|
.po-leer-punkt:nth-child(3) .po-leer-nr {
|
|
color: var(--wd-ok);
|
|
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
|
linear-gradient(140deg, var(--wd-ok), var(--wd-blau)) border-box;
|
|
box-shadow: 0 0 18px -6px rgb(var(--wd-ok-rgb) / .5);
|
|
}
|
|
.po-leer-punkt:nth-child(4) .po-leer-nr {
|
|
color: var(--wd-gold);
|
|
background: linear-gradient(var(--wd-dunkelblau), var(--wd-dunkelblau)) padding-box,
|
|
linear-gradient(140deg, var(--wd-gold), var(--wd-lila)) border-box;
|
|
box-shadow: 0 0 18px -6px rgb(var(--wd-gold-rgb) / .5);
|
|
}
|
|
|
|
/* ---------- Typografie ----------
|
|
Die Überschrift der Kachel war so groß wie der Fließtext darunter und
|
|
ging dadurch unter. Jetzt größer, enger gesetzt und mit einem Hauch
|
|
negativer Laufweite — das ist der Unterschied, den man als "wertig"
|
|
empfindet, ohne ihn benennen zu können. */
|
|
.po-leer-punkt strong {
|
|
font-family: var(--font-head);
|
|
font-size: 1.06rem; font-weight: 800;
|
|
letter-spacing: -.015em; line-height: 1.25;
|
|
margin-bottom: .3rem;
|
|
}
|
|
.po-leer-punkt span:not(.po-leer-nr) { font-size: .9rem; line-height: 1.6; }
|
|
|
|
.po-leer h3 {
|
|
font-size: clamp(1.5rem, 3.6vw, 2rem);
|
|
letter-spacing: -.02em;
|
|
background: linear-gradient(120deg, var(--wd-text), var(--wd-blau-hell) 70%);
|
|
-webkit-background-clip: text; background-clip: text; color: transparent;
|
|
}
|
|
.po-leer > p { font-size: 1.02rem; }
|
|
|
|
/* ---------- Phasen: drei klar verschiedene Zustände ----------
|
|
Das war der eigentliche Mangel. Erledigt und laufend sahen fast gleich
|
|
aus — damit ging die einzige Aussage der Leiste verloren. */
|
|
.po-phase, .po-vorschau-phasen span { height: 7px; }
|
|
.po-phase.po-erledigt {
|
|
background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok));
|
|
box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .5);
|
|
}
|
|
.po-phase.po-jetzt {
|
|
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
|
box-shadow: 0 0 14px -2px rgb(var(--wd-blau-rgb) / .85);
|
|
animation: po-jetzt-puls 2.4s ease-in-out infinite;
|
|
}
|
|
@keyframes po-jetzt-puls { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
|
|
@media (prefers-reduced-motion: reduce) { .po-phase.po-jetzt { animation: none; opacity: 1; } }
|
|
|
|
/* Dieselbe Logik in der Vorschau: die durchlaufende Leiste wechselt von
|
|
"gerade dran" (blau) nach "erledigt" (grün), statt einfach nur an- und
|
|
auszugehen. Damit erklärt die Vorschau die Farblogik gleich mit. */
|
|
@keyframes po-phase-lauf {
|
|
0%, 8% { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
|
|
14%, 30% { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
|
box-shadow: 0 0 12px -2px rgb(var(--wd-blau-rgb) / .8); }
|
|
38%, 62% { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok));
|
|
box-shadow: 0 0 8px -2px rgb(var(--wd-ok-rgb) / .45); }
|
|
100% { background: rgb(var(--wd-blau-rgb) / .13); box-shadow: none; }
|
|
}
|
|
|
|
/* Kleine Legende unter der Vorschau, damit die Farben nicht geraten
|
|
werden müssen. Farbe allein ist nie Information. */
|
|
.po-legende {
|
|
display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
|
|
margin-top: .9rem; font-size: .78rem; color: var(--wd-text-soft);
|
|
}
|
|
.po-legende span { display: inline-flex; align-items: center; gap: .4rem; }
|
|
.po-legende i {
|
|
width: 16px; height: 6px; border-radius: 999px; display: inline-block;
|
|
}
|
|
.po-legende .po-l-fertig { background: linear-gradient(90deg, var(--wd-ok), var(--wd-ok)); }
|
|
.po-legende .po-l-jetzt { background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau)); }
|
|
.po-legende .po-l-offen { background: rgb(var(--wd-blau-rgb) / .18); }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
21. ZAHLENKREISE REPARIERT + VIER PROZESSFARBEN
|
|
|
|
a) "wieso sehen die zahlen immer noch so scheisse aus?"
|
|
Zu Recht. Die Ziffer sass nicht mittig im Kreis. Ursache war die
|
|
geerbte Zeilenhoehe: body.wd setzt line-height 1.7, und in einem
|
|
40px hohen Kreis erzeugt das einen Textkasten von rund 28px, der
|
|
die Ziffer nach unten drueckt. Zusaetzlich hing die Zentrierung an
|
|
einer weiter oben stehenden Regel — verlaesst man sich darauf, ist
|
|
man beim naechsten Umbau wieder verlassen.
|
|
Deshalb hier ALLES explizit: eigenes Raster, place-items, und vor
|
|
allem line-height: 1. Eine Ziffer in einem Kreis braucht genau die
|
|
Hoehe ihrer selbst, nichts sonst.
|
|
|
|
b) "es soll 4 farben geben wie 4 kategorien zum prozess"
|
|
Sehr gute Idee — und sie macht das System erst schluessig. Die
|
|
sieben Phasen sind in Wahrheit vier Abschnitte, und die vier
|
|
Merkmalskacheln tragen ohnehin schon vier Farben. Jetzt bedeuten
|
|
diese Farben ueberall dasselbe:
|
|
|
|
1 Blau Start Briefing, Angebot
|
|
2 Lila Gestaltung Design
|
|
3 Gruen Umsetzung Entwicklung, Tests
|
|
4 Gold Abschluss Abnahme, Uebergabe
|
|
|
|
Damit ist die Farbe nicht mehr Dekoration, sondern Sprache: Wer
|
|
Gold sieht, weiss, dass es auf die Zielgerade geht.
|
|
--------------------------------------------------------------------- */
|
|
|
|
/* ---------- a) Der Kreis ---------- */
|
|
.po-leer-nr {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 42px; height: 42px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
/* Der entscheidende Wert: ohne ihn erbt die Ziffer 1.7 und rutscht. */
|
|
line-height: 1;
|
|
font-family: var(--font-head);
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
font-variant-numeric: tabular-nums;
|
|
flex-shrink: 0;
|
|
border: 2px solid transparent;
|
|
background:
|
|
linear-gradient(var(--wd-dunkelblau-2), var(--wd-dunkelblau-2)) padding-box,
|
|
linear-gradient(140deg, var(--wd-blau), var(--wd-lila)) border-box;
|
|
}
|
|
/* Die Ziffer selbst noch einmal optisch ausrichten: Zahlen haben oben
|
|
mehr Luft als unten, rein geometrisch zentriert wirken sie deshalb
|
|
leicht zu tief. Ein Hauch nach oben gleicht das aus. */
|
|
.po-leer-nr { padding-bottom: .06em; }
|
|
|
|
/* ---------- b) Die vier Prozessfarben ---------- */
|
|
:root {
|
|
/* Die vier Prozessfarben sind KEINE eigenen Farben, sondern Rollen.
|
|
Sie zeigen auf die Markenfarben, statt deren Werte zu wiederholen --
|
|
sonst haette man vier weitere Stellen, die beim naechsten
|
|
Farbwechsel stillschweigend zurueckbleiben und die Seite in zwei
|
|
Blautoene zerfallen lassen. */
|
|
--wd-p1: var(--wd-blau); /* Start — Briefing, Angebot */
|
|
--wd-p2: var(--wd-lila); /* Gestaltung — Design */
|
|
--wd-p3: var(--wd-ok); /* Umsetzung — Entwicklung, Tests */
|
|
--wd-p4: var(--wd-gold); /* Abschluss — Abnahme, Übergabe */
|
|
}
|
|
|
|
.po-leer-punkt:nth-child(1)::before { background: linear-gradient(90deg, var(--wd-ion), var(--wd-p1)); }
|
|
.po-leer-punkt:nth-child(2)::before { background: linear-gradient(90deg, var(--wd-indigo), var(--wd-p2)); }
|
|
.po-leer-punkt:nth-child(3)::before { background: linear-gradient(90deg, var(--wd-ok), var(--wd-p3)); }
|
|
.po-leer-punkt:nth-child(4)::before { background: linear-gradient(90deg, var(--wd-gold-tief), var(--wd-p4)); }
|
|
|
|
.po-leer-punkt:nth-child(1) .po-leer-nr { color: var(--wd-p1); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p1), var(--wd-ion)) border-box; box-shadow: 0 0 20px -7px var(--wd-p1); }
|
|
.po-leer-punkt:nth-child(2) .po-leer-nr { color: var(--wd-p2); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p2), var(--wd-indigo)) border-box; box-shadow: 0 0 20px -7px var(--wd-p2); }
|
|
.po-leer-punkt:nth-child(3) .po-leer-nr { color: var(--wd-p3); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p3), var(--wd-ok)) border-box; box-shadow: 0 0 20px -7px var(--wd-p3); }
|
|
.po-leer-punkt:nth-child(4) .po-leer-nr { color: var(--wd-p4); background: linear-gradient(var(--wd-dunkelblau-2),var(--wd-dunkelblau-2)) padding-box, linear-gradient(140deg, var(--wd-p4), var(--wd-gold-tief)) border-box; box-shadow: 0 0 20px -7px var(--wd-p4); }
|
|
|
|
/* ---------- Die Phasenleiste spricht dieselbe Sprache ----------
|
|
Erledigte Phasen tragen die Farbe IHRES Abschnitts, nicht pauschal
|
|
Gruen. So sieht man auf einen Blick, wie weit man im Prozess ist —
|
|
und nicht nur, dass etwas erledigt wurde. */
|
|
.po-phase { background: rgb(var(--wd-blau-rgb) / .12); }
|
|
.po-phase:nth-child(1).po-erledigt, .po-phase:nth-child(2).po-erledigt { background: var(--wd-p1); box-shadow: 0 0 9px -3px var(--wd-p1); }
|
|
.po-phase:nth-child(3).po-erledigt { background: var(--wd-p2); box-shadow: 0 0 9px -3px var(--wd-p2); }
|
|
.po-phase:nth-child(4).po-erledigt, .po-phase:nth-child(5).po-erledigt { background: var(--wd-p3); box-shadow: 0 0 9px -3px var(--wd-p3); }
|
|
.po-phase:nth-child(6).po-erledigt, .po-phase:nth-child(7).po-erledigt { background: var(--wd-p4); box-shadow: 0 0 9px -3px var(--wd-p4); }
|
|
|
|
.po-phase:nth-child(1).po-jetzt, .po-phase:nth-child(2).po-jetzt { background: var(--wd-p1); box-shadow: 0 0 16px -2px var(--wd-p1); }
|
|
.po-phase:nth-child(3).po-jetzt { background: var(--wd-p2); box-shadow: 0 0 16px -2px var(--wd-p2); }
|
|
.po-phase:nth-child(4).po-jetzt, .po-phase:nth-child(5).po-jetzt { background: var(--wd-p3); box-shadow: 0 0 16px -2px var(--wd-p3); }
|
|
.po-phase:nth-child(6).po-jetzt, .po-phase:nth-child(7).po-jetzt { background: var(--wd-p4); box-shadow: 0 0 16px -2px var(--wd-p4); }
|
|
|
|
/* Die Vorschau zeigt denselben Verlauf: jede Phase leuchtet in der Farbe
|
|
ihres Abschnitts auf, wenn sie an der Reihe ist. */
|
|
.po-vorschau-phasen span:nth-child(1), .po-vorschau-phasen span:nth-child(2) { --po-f: var(--wd-p1); }
|
|
.po-vorschau-phasen span:nth-child(3) { --po-f: var(--wd-p2); }
|
|
.po-vorschau-phasen span:nth-child(4), .po-vorschau-phasen span:nth-child(5) { --po-f: var(--wd-p3); }
|
|
.po-vorschau-phasen span:nth-child(6), .po-vorschau-phasen span:nth-child(7) { --po-f: var(--wd-p4); }
|
|
@keyframes po-phase-lauf {
|
|
0%, 8% { background: rgb(var(--wd-blau-rgb) / .12); box-shadow: none; }
|
|
14%, 60% { background: var(--po-f); box-shadow: 0 0 12px -3px var(--po-f); }
|
|
100% { background: rgb(var(--wd-blau-rgb) / .12); box-shadow: none; }
|
|
}
|
|
|
|
/* ---------- Legende: vier Abschnitte statt drei Zustände ----------
|
|
Die alte Legende erklärte den Zustand (erledigt / läuft / offen). Der
|
|
ist aus der Position ohnehin ablesbar. Wertvoller ist, WAS gerade
|
|
passiert — deshalb erklärt sie jetzt die vier Abschnitte. */
|
|
.po-legende { gap: .45rem .9rem; font-size: .76rem; }
|
|
.po-legende i { width: 14px; height: 7px; }
|
|
.po-legende .po-l-1 { background: var(--wd-p1); }
|
|
.po-legende .po-l-2 { background: var(--wd-p2); }
|
|
.po-legende .po-l-3 { background: var(--wd-p3); }
|
|
.po-legende .po-l-4 { background: var(--wd-p4); }
|
|
|
|
/* =====================================================================
|
|
PORTAL — AUFGABENLISTE UND POSTFACH (22.08.2026)
|
|
|
|
"wenn sie drauf drücken sollen sie auch sehen was ich schon gemacht
|
|
habe von dem was im plan war."
|
|
|
|
Dieselben vier Prozessfarben wie auf der Ablaufseite, in der Vorschau
|
|
und in der Verwaltung. Das ist der eigentliche Wert: Eine Farbe
|
|
bedeutet im ganzen Bereich dasselbe — sonst wäre sie Dekoration.
|
|
===================================================================== */
|
|
|
|
/* Die grosse Zahl. "9 von 14 erledigt" ist greifbar, "64 %" ist eine
|
|
Rechnung, die niemand fühlt. */
|
|
.po-aufg-stand { margin: .9rem 0 .2rem; font-size: .92rem; color: var(--wd-text-soft); }
|
|
.po-aufg-stand b {
|
|
font-family: var(--font-head); font-weight: 800;
|
|
font-size: 1.7rem; color: var(--wd-text); margin-right: .3rem;
|
|
}
|
|
|
|
.po-fortschritt { display: flex; gap: 4px; height: 8px; margin-bottom: 1.2rem; }
|
|
.po-fs-teil { flex: 1; border-radius: 999px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
|
|
.po-fs-teil > i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; }
|
|
.po-fs-teil[data-k="start"] > i { background: var(--wd-p1); }
|
|
.po-fs-teil[data-k="gestaltung"] > i { background: var(--wd-p2); }
|
|
.po-fs-teil[data-k="umsetzung"] > i { background: var(--wd-p3); }
|
|
.po-fs-teil[data-k="abschluss"] > i { background: var(--wd-p4); }
|
|
|
|
/* ---------- "Das brauche ich noch von dir" ----------
|
|
Ein EIGENER Kasten ganz oben, nicht nur eine farbige Zeile irgendwo
|
|
in der Liste. Wer eine lange Liste sieht, liest sie als Bericht über
|
|
fremde Arbeit und überliest seinen eigenen Teil — und genau daraus
|
|
entstehen die meisten Verzögerungen.
|
|
|
|
Gold, weil es im ganzen Bereich für "das betrifft dich" steht. Nicht
|
|
Rot: Es ist eine Bitte, kein Fehler. */
|
|
.po-dubist {
|
|
margin: 0 0 1.3rem;
|
|
padding: .9rem 1rem 1rem;
|
|
border-radius: 14px;
|
|
background: rgb(var(--wd-gold-rgb) / .07);
|
|
border: 1px solid rgb(var(--wd-gold-rgb) / .32);
|
|
}
|
|
.po-dubist h4 {
|
|
margin: 0; font-size: 1rem; color: var(--wd-gold);
|
|
font-family: var(--font-head); font-weight: 700;
|
|
}
|
|
|
|
/* Der beruhigende Gegenpart. Wenn nichts offen ist, soll das auch
|
|
dastehen — Abwesenheit einer Aufforderung ist eine gute Nachricht und
|
|
darf ruhig ausgesprochen werden. */
|
|
.po-allesgut {
|
|
margin: 0 0 1.3rem; padding: .75rem .95rem;
|
|
border-radius: 10px; font-size: .9rem;
|
|
background: rgb(var(--wd-ok-rgb) / .08);
|
|
border: 1px solid rgb(var(--wd-ok-rgb) / .28);
|
|
color: var(--wd-ok);
|
|
}
|
|
|
|
/* ---------- Gruppen und Zeilen ---------- */
|
|
.po-aufg-gruppe { margin-bottom: 1.1rem; }
|
|
.po-aufg-kopf {
|
|
display: flex; align-items: baseline; gap: .5rem;
|
|
font-size: 0.8rem; letter-spacing: .13em; text-transform: uppercase;
|
|
margin-bottom: .45rem; padding-bottom: .35rem;
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.po-aufg-zahl { margin-left: auto; letter-spacing: 0; text-transform: none; font-size: .8rem; color: var(--wd-text-soft); }
|
|
.po-aufg-gruppe[data-k="start"] .po-aufg-kopf { color: var(--wd-p1); }
|
|
.po-aufg-gruppe[data-k="gestaltung"] .po-aufg-kopf { color: var(--wd-p2); }
|
|
.po-aufg-gruppe[data-k="umsetzung"] .po-aufg-kopf { color: var(--wd-p3); }
|
|
.po-aufg-gruppe[data-k="abschluss"] .po-aufg-kopf { color: var(--wd-p4); }
|
|
|
|
/* Zeile und Spalte ausdrücklich für JEDES Kind.
|
|
|
|
Ohne Spaltenangabe geht es schief, und zwar auf eine Art, die man
|
|
nicht errät: Das Raster platziert zuerst alle Elemente mit
|
|
FESTGELEGTER Zeile und erst danach die freien. Kästchen und Marke
|
|
haben beide eine feste Zeile — sie würden zusammen nach vorne rutschen
|
|
und der Titel landete ganz rechts. Genau das ist am 22.08.2026 in der
|
|
Verwaltung passiert und erst am Screenshot aufgefallen. */
|
|
.po-aufg {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0,1fr) auto;
|
|
gap: .12rem .7rem; align-items: start;
|
|
padding: .55rem .6rem; margin-bottom: .25rem;
|
|
border-radius: 10px; border: 1px solid transparent;
|
|
}
|
|
.po-aufg-haken { grid-row: 1 / span 2; grid-column: 1; }
|
|
.po-aufg-titel { grid-row: 1; grid-column: 2; font-size: .94rem; color: var(--wd-text); overflow-wrap: anywhere; }
|
|
.po-aufg-marken { grid-row: 1; grid-column: 3; }
|
|
.po-aufg-text { grid-row: 2; grid-column: 2 / span 2; font-size: .82rem; color: var(--wd-text-soft); line-height: 1.5; }
|
|
|
|
.po-aufg--fertig .po-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
|
|
.po-aufg--weg .po-aufg-titel { color: var(--wd-text-soft); text-decoration: line-through; opacity: .55; }
|
|
.po-aufg--du { background: rgb(var(--wd-gold-rgb) / .06); }
|
|
|
|
/* Im oberen Kasten stehen dieselben Punkte noch einmal. Dort brauchen
|
|
sie den eigenen Hintergrund nicht — der Kasten ist schon golden, ein
|
|
zweiter Goldton darin würde nur schmutzig wirken. */
|
|
.po-aufg--hervor { background: transparent; padding-left: 0; padding-right: 0; }
|
|
|
|
/* Das Kästchen. Bei eigenen Punkten ein echter Knopf (tastaturbedienbar,
|
|
44px Trefferfläche über das Innenabstands-Polster), sonst nur Anzeige.
|
|
Ein Knopf, der nichts tut, lässt die Seite kaputt wirken. */
|
|
.po-aufg-haken {
|
|
width: 26px; height: 26px; margin-top: .05rem; padding: 0;
|
|
border-radius: 10px; border: 2px solid var(--wd-rand-stark);
|
|
background: transparent; color: transparent;
|
|
display: grid; place-items: center;
|
|
font-size: .95rem; line-height: 1;
|
|
transition: all var(--wd-zeit-schnell) ease;
|
|
}
|
|
button.po-aufg-haken { cursor: pointer; }
|
|
button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgb(var(--wd-gold-rgb) / .1); }
|
|
.po-aufg-haken--fest { cursor: default; }
|
|
.po-aufg--fertig .po-aufg-haken { background: var(--wd-ok); border-color: var(--wd-ok); color: var(--wd-schwarz); }
|
|
.po-aufg--jetzt .po-aufg-haken { border-color: var(--wd-p2); color: var(--wd-p2); }
|
|
.po-aufg--weg .po-aufg-haken { border-style: dashed; color: var(--wd-text-soft); }
|
|
/* Offene EIGENE Punkte: der Rand ist golden, damit klar ist, dass hier
|
|
geklickt werden kann und soll. */
|
|
.po-aufg--du button.po-aufg-haken { border-color: rgb(var(--wd-gold-rgb) / .55); }
|
|
|
|
.po-aufg-marke {
|
|
display: inline-block; white-space: nowrap;
|
|
font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
|
|
padding: .14rem .45rem; border-radius: 999px;
|
|
}
|
|
.po-aufg-marke--ok { background: rgb(var(--wd-ok-rgb) / .13); color: var(--wd-ok); }
|
|
.po-aufg-marke--jetzt { background: rgb(var(--wd-lila-rgb) / .15); color: var(--wd-p2); }
|
|
.po-aufg-marke--du { background: rgb(var(--wd-gold-rgb) / .16); color: var(--wd-gold); }
|
|
.po-aufg-nicht {
|
|
display: inline-block; margin-left: .4rem;
|
|
font-size: 0.75rem; letter-spacing: .05em; text-transform: uppercase;
|
|
padding: .12rem .4rem; border-radius: 999px;
|
|
background: rgb(var(--wd-fehler-rgb) / .12); color: var(--wd-fehler);
|
|
}
|
|
|
|
/* Auf dem Handy rutscht die Marke unter den Titel — nebeneinander bliebe
|
|
für den Titel eine Spalte von zwei Wörtern Breite. */
|
|
@media (max-width: 520px) {
|
|
.po-aufg { grid-template-columns: auto minmax(0,1fr); }
|
|
.po-aufg-marken { grid-row: 2; grid-column: 2; margin-bottom: .15rem; }
|
|
.po-aufg-text { grid-row: 3; grid-column: 2; }
|
|
}
|
|
|
|
/* ---------- Postfach auf der Übersicht ---------- */
|
|
.po-pf-verlauf {
|
|
max-height: 46vh; overflow-y: auto;
|
|
margin: .8rem 0 .2rem; padding-right: .3rem;
|
|
display: flex; flex-direction: column; gap: .5rem;
|
|
}
|
|
|
|
/* =====================================================================
|
|
WIDERRUF (§ 356a BGB) — und die Druckansicht der Bestätigung
|
|
|
|
Gestalterisch bewusst ZURÜCKHALTEND. Alles andere im Bereich darf
|
|
Stimmung machen; diese Seite nicht. Wer hier landet, will eine Sache
|
|
erledigen und danach Gewissheit haben. Grosse Effekte würden hier wie
|
|
Ablenkung wirken — und der Vorwurf, man wolle den Widerruf erschweren,
|
|
ist genau der, den man am wenigsten gebrauchen kann.
|
|
===================================================================== */
|
|
.wr-h2 { font-size: 1.12rem; margin: 0 0 .5rem; }
|
|
|
|
.wr-info {
|
|
border-left: 3px solid var(--wd-blau);
|
|
margin-bottom: 1.4rem;
|
|
}
|
|
|
|
.wr-pruef {
|
|
display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
|
|
gap: .45rem .9rem; margin: .9rem 0 1.1rem;
|
|
padding: .9rem 1rem; border-radius: 10px;
|
|
background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
|
|
}
|
|
@media (max-width: 520px) { .wr-pruef { grid-template-columns: 1fr; gap: .1rem; } }
|
|
.wr-pruef dt { color: var(--wd-text-soft); font-size: .88rem; }
|
|
.wr-pruef dd { margin: 0; color: var(--wd-text); overflow-wrap: anywhere; white-space: pre-wrap; }
|
|
@media (max-width: 520px) { .wr-pruef dd { margin-bottom: .55rem; } }
|
|
|
|
/* Der Bestätigungsschritt hebt sich ab — hier passiert das Verbindliche. */
|
|
.wr-bestaetigen { border-color: var(--wd-rand-stark); }
|
|
|
|
/* Grün statt Gold für den Abschluss: Der Widerruf ist erfolgreich
|
|
erklärt, das ist aus Sicht des Kunden eine gute Nachricht. Gold ist im
|
|
Bereich für "das betrifft dich, tu was" reserviert — hier ist nichts
|
|
mehr zu tun. */
|
|
.wr-fertig { border-color: rgb(var(--wd-ok-rgb) / .42); }
|
|
.wr-haken {
|
|
width: 46px; height: 46px; border-radius: 50%;
|
|
display: grid; place-items: center; line-height: 1;
|
|
font-size: 1.5rem; margin-bottom: .7rem;
|
|
background: rgb(var(--wd-ok-rgb) / .14); color: var(--wd-ok);
|
|
border: 1px solid rgb(var(--wd-ok-rgb) / .4);
|
|
}
|
|
|
|
.wr-beleg {
|
|
margin: 1rem 0; padding: 1.1rem 1.2rem;
|
|
border-radius: 14px;
|
|
background: rgba(8,14,24,.55);
|
|
border: 1px solid var(--wd-rand-stark);
|
|
}
|
|
.wr-beleg-kopf {
|
|
display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
|
|
justify-content: space-between;
|
|
padding-bottom: .6rem; margin-bottom: .7rem;
|
|
border-bottom: 1px solid var(--wd-rand);
|
|
}
|
|
.wr-beleg-nr { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); }
|
|
.wr-beleg dl {
|
|
display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
|
|
gap: .45rem .9rem; margin: 0;
|
|
}
|
|
@media (max-width: 520px) { .wr-beleg dl { grid-template-columns: 1fr; gap: .1rem; } }
|
|
.wr-beleg dt { color: var(--wd-text-soft); font-size: .86rem; }
|
|
.wr-beleg dd { margin: 0; overflow-wrap: anywhere; }
|
|
@media (max-width: 520px) { .wr-beleg dd { margin-bottom: .55rem; } }
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DRUCKANSICHT
|
|
|
|
Die Eingangsbestätigung ist ein Rechtsnachweis. Ein Ausdruck mit
|
|
dunklem Hintergrund verbraucht eine halbe Patrone und ist auf Papier
|
|
schlecht lesbar — und ein Nachweis, den niemand ausdruckt, weil er
|
|
hässlich wird, erfüllt seinen Zweck nicht.
|
|
|
|
Deshalb: auf Papier schwarz auf weiss, ohne Navigation, ohne Knöpfe,
|
|
nur der Beleg. Adressen werden ausgeschrieben, weil ein Link auf
|
|
Papier nichts nützt.
|
|
--------------------------------------------------------------------- */
|
|
@media print {
|
|
body.wd { background: #fff !important; color: #000 !important; }
|
|
.wd-kopf, #wd-kopf, .wd-fuss, #wd-fuss,
|
|
.wr-nicht-drucken, .wr-info, #wr-form, #wr-schritt2,
|
|
.wd-meldung, .wd-eyebrow { display: none !important; }
|
|
|
|
.wd-abschnitt { padding: 0 !important; }
|
|
.wd-karte, .wr-beleg {
|
|
background: #fff !important; border: 1px solid #000 !important;
|
|
box-shadow: none !important; color: #000 !important;
|
|
}
|
|
.wr-fertig, .wr-beleg { page-break-inside: avoid; }
|
|
.wr-haken { border-color: #000 !important; color: #000 !important; background: #fff !important; }
|
|
.wr-beleg-nr, .wr-h2, h1, h2, dt, dd, p { color: #000 !important; }
|
|
.wr-beleg dt { color: #444 !important; }
|
|
|
|
/* Adressen ausschreiben — ein Link ist auf Papier wertlos. */
|
|
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
RECHTSSEITE
|
|
|
|
Lange Texte, die man liest statt überfliegt. Deshalb: schmalere
|
|
Zeilen, mehr Zeilenabstand, klare Absätze. Und KEIN Blocksatz --
|
|
der reisst im Deutschen wegen der langen Wörter Löcher in die Zeile
|
|
und macht genau die Texte schwerer lesbar, bei denen es auf jedes
|
|
Wort ankommt.
|
|
--------------------------------------------------------------------- */
|
|
.rl-nav {
|
|
display: flex; flex-wrap: wrap; gap: .45rem;
|
|
margin: 1.2rem 0 1.6rem;
|
|
}
|
|
.rl-nav a {
|
|
/* inline-flex + min-height 44px statt nur Innenabstand.
|
|
|
|
Mit reinem padding kamen die vier Sprungmarken auf 39px -- fuenf
|
|
Pixel unter dem Daumenmass. Genau derselbe Fall wie frueher bei
|
|
.wd-nav a (dort waren es 43px): Ein Innenabstand, der auf dem
|
|
Bildschirm gut aussieht, ergibt nicht automatisch ein treffbares
|
|
Ziel. Und ausgerechnet auf der Rechtsseite muss man verlaesslich
|
|
zum Widerrufsrecht springen koennen. */
|
|
display: inline-flex; align-items: center; min-height: 44px;
|
|
padding: .42rem .95rem; border-radius: 999px;
|
|
border: 1px solid var(--wd-rand); background: var(--wd-glas);
|
|
font-size: .88rem; color: var(--wd-text-mid) !important; text-decoration: none;
|
|
}
|
|
.rl-nav a:hover { border-color: var(--wd-rand-stark); color: var(--wd-text) !important; }
|
|
|
|
.rl-sprache { margin-bottom: 1.8rem; }
|
|
|
|
.rl-h2 {
|
|
margin-top: 2.4rem;
|
|
/* Ein Sprungziel darf nicht unter der klebenden Kopfzeile landen. */
|
|
scroll-margin-top: 5.5rem;
|
|
}
|
|
.rl-text { line-height: 1.75; }
|
|
.rl-text h3 {
|
|
font-size: 1rem; margin: 1.5rem 0 .5rem;
|
|
color: var(--wd-blau);
|
|
}
|
|
.rl-text h3:first-child { margin-top: 0; }
|
|
.rl-text p { margin: 0 0 .8rem; }
|
|
.rl-text ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
|
|
.rl-text li { margin-bottom: .35rem; }
|
|
.rl-text code {
|
|
/* min() statt eines reinen em-Werts: In einem ohnehin kleineren Absatz
|
|
rutschte der Code sonst auf 11,2px -- unter die Lesbarkeitsgrenze. */
|
|
font-size: max(.78rem, .86em); padding: .1rem .35rem; border-radius: 6px;
|
|
background: rgb(var(--wd-blau-rgb) / .09); color: var(--wd-blau);
|
|
}
|
|
|
|
/* Die Belehrung hebt sich ab: Sie ist der Teil, auf den es rechtlich
|
|
ankommt, und muss auch optisch als geschlossener Block erkennbar sein. */
|
|
.rl-widerruf { border-left: 3px solid var(--wd-gold); }
|
|
.rl-adresse {
|
|
padding: .7rem .9rem; border-radius: 10px;
|
|
background: rgb(var(--wd-blau-rgb) / .05); border: 1px solid var(--wd-rand);
|
|
}
|
|
|
|
/* Das Muster-Formular sieht bewusst wie ein Formular aus — man soll
|
|
sehen, dass man es ausdrucken und ausfüllen kann. */
|
|
.rl-formular {
|
|
margin-top: .6rem; padding: 1rem 1.1rem;
|
|
border-radius: 10px; border: 1px dashed var(--wd-rand-stark);
|
|
background: rgba(8,14,24,.4);
|
|
font-size: .93rem;
|
|
}
|
|
.rl-formular p { margin: 0 0 .6rem; }
|
|
|
|
/* =====================================================================
|
|
FEINSCHLIFF — das Höhensystem (23.08.2026)
|
|
|
|
Bis hierher trug jede Karte EINEN Schatten: 0 24px 60px -28px. Das ist
|
|
solide, aber es ist auch der Grund, warum eine Oberfläche "ordentlich"
|
|
statt "teuer" wirkt.
|
|
|
|
Echtes Licht erzeugt zwei Dinge gleichzeitig:
|
|
|
|
1. einen engen, dunklen Kontaktschatten direkt an der Kante — er
|
|
sagt dem Auge, dass ein Gegenstand AUFLIEGT
|
|
2. einen weiten, weichen Umgebungsschatten — er sagt, wie HOCH er
|
|
darüber schwebt
|
|
|
|
Nur einen von beiden zu setzen, sieht aus wie ein Aufkleber. Beide
|
|
zusammen ergeben einen Gegenstand.
|
|
|
|
Dazu kommt die LICHTKANTE: eine 1 Pixel hohe, sehr schwache weisse
|
|
Linie an der Oberkante (inset 0 1px 0). Sie tut so, als käme das Licht
|
|
von oben und bräche sich an der Kante. Das ist das meistübersehene
|
|
Detail in dunklen Oberflächen — und dasjenige, das den grössten
|
|
Unterschied macht. Ohne sie wirkt eine Karte wie ein Loch im
|
|
Hintergrund; mit ihr wie ein Stück Material.
|
|
|
|
Drei Stufen, mehr braucht es nicht:
|
|
1 ruhende Flächen (Karten, Felder)
|
|
2 hervorgehobene Flächen (aktive Karte, Knopf)
|
|
3 Schwebendes (Fenster, Menü)
|
|
===================================================================== */
|
|
:root {
|
|
/* Kontaktschatten + Umgebungsschatten + Lichtkante, in dieser
|
|
Reihenfolge — die Lichtkante zuletzt, damit sie über allem liegt. */
|
|
--wd-hoehe-1:
|
|
0 1px 2px rgba(0, 0, 0, .40),
|
|
0 10px 28px -12px rgba(0, 0, 0, .70),
|
|
inset 0 1px 0 rgba(255, 255, 255, .055);
|
|
--wd-hoehe-2:
|
|
0 2px 4px rgba(0, 0, 0, .45),
|
|
0 18px 44px -16px rgba(0, 0, 0, .80),
|
|
inset 0 1px 0 rgba(255, 255, 255, .075);
|
|
--wd-hoehe-3:
|
|
0 4px 8px rgba(0, 0, 0, .50),
|
|
0 40px 90px -30px rgba(0, 0, 0, .92),
|
|
inset 0 1px 0 rgba(255, 255, 255, .09);
|
|
|
|
/* Vertiefte Flächen — Eingabefelder liegen NICHT auf der Oberfläche,
|
|
sie sind hineingeschnitten. Derselbe Lichteinfall, nur umgekehrt:
|
|
oben dunkel (Schattenkante), unten hell. */
|
|
--wd-tiefe:
|
|
inset 0 1px 2px rgba(0, 0, 0, .35),
|
|
inset 0 -1px 0 rgba(255, 255, 255, .03);
|
|
}
|
|
|
|
/* ---------- Karten ---------- */
|
|
.wd-karte {
|
|
box-shadow: var(--wd-hoehe-1);
|
|
/* Etwas schneller als der bisherige Standard: Bei Flächen, die man
|
|
überfährt, wirkt alles über 200 ms träge. */
|
|
transition:
|
|
transform .18s cubic-bezier(.2, .8, .3, 1),
|
|
box-shadow .18s cubic-bezier(.2, .8, .3, 1),
|
|
border-color .18s ease;
|
|
}
|
|
a.wd-karte:hover, .wd-karte--klickbar:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--wd-hoehe-3), 0 0 40px -22px rgb(var(--wd-blau-rgb) / .5);
|
|
}
|
|
/* Beim Drücken zurück auf die Fläche — ohne das fehlt die Rückmeldung,
|
|
dass der Klick angekommen ist. */
|
|
a.wd-karte:active, .wd-karte--klickbar:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--wd-hoehe-1);
|
|
transition-duration: .06s;
|
|
}
|
|
|
|
/* ---------- Knöpfe ---------- */
|
|
.wd-btn {
|
|
transition:
|
|
transform .16s cubic-bezier(.2, .8, .3, 1),
|
|
box-shadow .16s cubic-bezier(.2, .8, .3, 1),
|
|
background .16s ease, border-color .16s ease, color .16s ease;
|
|
}
|
|
/* Der Hauptknopf ist hell auf dunklem Grund. Seine Lichtkante gehört
|
|
deshalb nach INNEN und heller — sie lässt die Fläche gewölbt wirken
|
|
statt flach aufgeklebt. */
|
|
/* ⚠️ Die Gewichtung muss zur Grundregel passen.
|
|
|
|
Weiter oben steht ".wd .wd-btn--haupt, .wd-btn--haupt { ... }" -- der
|
|
erste Teil zaehlt ZWEI Klassen. Ein blosses ".wd-btn--haupt" hier
|
|
unten zaehlt eine und verliert, obwohl es spaeter steht. Beim ersten
|
|
Versuch blieb der Hauptknopf deshalb ohne Lichtkante, waehrend die
|
|
Karten sie schon hatten -- gemessen, nicht vermutet.
|
|
|
|
Dieselbe Falle wie am 22.08.2026 bei ".wd a" gegen ".wd-btn--haupt".
|
|
Wer in dieser Datei etwas nachtraegt, muss die Gewichtung der
|
|
Grundregel uebernehmen, nicht nur die Reihenfolge. */
|
|
.wd .wd-btn--haupt, .wd-btn--haupt {
|
|
box-shadow:
|
|
0 1px 2px rgba(0, 0, 0, .35),
|
|
0 10px 26px -12px rgb(var(--wd-blau-rgb) / .55),
|
|
inset 0 1px 0 rgba(255, 255, 255, .45);
|
|
}
|
|
.wd .wd-btn--haupt:hover, .wd-btn--haupt:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
0 2px 4px rgba(0, 0, 0, .4),
|
|
0 18px 40px -14px rgb(var(--wd-blau-rgb) / .8),
|
|
inset 0 1px 0 rgba(255, 255, 255, .55);
|
|
}
|
|
.wd .wd-btn--haupt:active, .wd-btn--haupt:active { transform: translateY(0); transition-duration: .06s; }
|
|
|
|
.wd-btn--zweit, .wd-btn--still {
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
|
|
}
|
|
.wd-btn--zweit:hover, .wd-btn--still:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow:
|
|
0 6px 18px -10px rgba(0, 0, 0, .8),
|
|
inset 0 1px 0 rgba(255, 255, 255, .07);
|
|
}
|
|
|
|
/* ---------- Eingabefelder: vertieft statt aufliegend ---------- */
|
|
.wd-feld input[type="text"], .wd-feld input[type="email"], .wd-feld input[type="tel"],
|
|
.wd-feld input[type="url"], .wd-feld input[type="number"], .wd-feld input[type="date"],
|
|
.wd-feld input[type="password"], .wd-feld input[type="search"],
|
|
.wd-feld select, .wd-feld textarea, .wd-eingabe {
|
|
box-shadow: var(--wd-tiefe);
|
|
transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
|
|
}
|
|
/* Im Fokus bleibt die Vertiefung erhalten und der Ring kommt dazu —
|
|
sonst "springt" das Feld beim Anklicken aus der Fläche heraus. */
|
|
.wd-eingabe:focus, .wd-feld input:focus, .wd-feld select:focus, .wd-feld textarea:focus {
|
|
box-shadow: var(--wd-tiefe), 0 0 0 4px rgb(var(--wd-blau-rgb) / .16);
|
|
}
|
|
|
|
/* ---------- Marken und Abzeichen ---------- */
|
|
.wd-tag, .vw-status, .po-aufg-marke, .vw-aufg-wer, .vw-aufg-nicht {
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
|
|
}
|
|
|
|
/* ---------- Schwebende Flächen ---------- */
|
|
.vw-detail-blatt { box-shadow: var(--wd-hoehe-3), 0 0 0 1px rgb(var(--wd-blau-rgb) / .06) inset; }
|
|
.wd-nav-panel, .wd-menue-flaeche { box-shadow: var(--wd-hoehe-3); }
|
|
|
|
/* ---------- Schrift: optische Korrektur ----------
|
|
Grosse Schriftgrade wirken bei gleicher Laufweite zu locker gesetzt —
|
|
das Auge sieht bei 48px mehr Weissraum zwischen den Buchstaben als bei
|
|
16px. Professioneller Satz zieht deshalb mit wachsender Größe enger.
|
|
Bei kleinen Grössen genau umgekehrt: dort hilft etwas mehr Luft. */
|
|
.wd h1 { letter-spacing: -.028em; }
|
|
.wd h2 { letter-spacing: -.021em; }
|
|
.wd h3 { letter-spacing: -.012em; }
|
|
/* Verhindert Schusterjungen in Überschriften — ein einzelnes Wort in der
|
|
letzten Zeile sieht immer nach Versehen aus. */
|
|
.wd h1, .wd h2, .wd-fuehrung { text-wrap: balance; }
|
|
.wd p { text-wrap: pretty; }
|
|
|
|
/* ---------- Ruhe bei Bewegungsempfindlichkeit ---------- */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wd-karte, .wd-btn { transition: none !important; }
|
|
a.wd-karte:hover, .wd-karte--klickbar:hover,
|
|
.wd-btn:hover, .wd-btn--haupt:hover, .wd-btn--zweit:hover, .wd-btn--still:hover {
|
|
transform: none !important;
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
LESEBREITE (23.08.2026)
|
|
|
|
Gemessen über alle Seiten: 105 von 200 Textabsätzen waren zu breit,
|
|
der schlimmste mit 151 Zeichen pro Zeile.
|
|
|
|
Warum das zählt: Beim Zeilensprung muss das Auge zurück an den
|
|
Zeilenanfang finden. Je länger die Zeile, desto häufiger landet es in
|
|
der falschen — man liest eine Zeile doppelt oder überspringt eine und
|
|
merkt es erst zwei Sätze später. Der Text ist dann nicht "schwer", er
|
|
ist schlecht gesetzt.
|
|
|
|
Bewährt sind 45 bis 75 Zeichen. Bücher, Zeitungen und jedes ordentlich
|
|
gesetzte Buch halten sich daran; es ist der älteste und bestbelegte
|
|
Grundsatz der Typografie überhaupt.
|
|
|
|
Die Einheit ist ch (Breite der Ziffer Null). Damit hängt die Breite an
|
|
der SCHRIFTGRÖSSE, nicht an Pixeln: Kleingedrucktes bekommt
|
|
automatisch einen schmaleren Block, große Schrift einen breiteren --
|
|
in beiden Fällen landet man bei ähnlich vielen Zeichen.
|
|
|
|
max-width macht nie etwas breiter. In schmalen Karten und Spalten
|
|
ändert sich also gar nichts -- die Regel greift nur dort, wo eine
|
|
Zeile wirklich über das Lesbare hinauswächst.
|
|
===================================================================== */
|
|
:root {
|
|
--wd-lesebreite: 68ch;
|
|
--wd-lesebreite-eng: 60ch; /* für Kleingedrucktes und Hinweise */
|
|
}
|
|
|
|
.wd p,
|
|
.wd li,
|
|
.wd .wd-fuehrung {
|
|
max-width: var(--wd-lesebreite);
|
|
}
|
|
|
|
/* Kleingedrucktes darf enger stehen: Es wird überflogen, nicht gelesen,
|
|
und ein schmaler Block ist dabei schneller zu erfassen. */
|
|
.wd .wd-klein,
|
|
.wd .wd-feld-hilfe,
|
|
.wd .rl-text .wd-klein {
|
|
max-width: var(--wd-lesebreite-eng);
|
|
}
|
|
|
|
/* Wo mittig gesetzt wird, muss auch der BLOCK mittig bleiben.
|
|
Ohne das klebt zentrierter Text nach der Begrenzung am linken Rand --
|
|
die Schrift wäre zentriert, ihr Kasten aber nicht. */
|
|
/* Zwei Faelle, beide noetig:
|
|
|
|
ELTERNELEMENT zentriert -> die Kinder mittig halten
|
|
ABSATZ SELBST zentriert -> ihn selbst mittig halten
|
|
|
|
Beim ersten Versuch fehlte der zweite Fall. Ergebnis: zwei Absaetze,
|
|
deren Schrift zentriert war, deren Kasten aber links klebte -- auf
|
|
anfrage.html mit 384 Pixeln Luft rechts und null links. Gefunden, weil
|
|
die Pruefung den Abstand links mit dem rechts VERGLEICHT, statt nur zu
|
|
zaehlen, ob zentriert ist. */
|
|
.wd :is(p, li)[style*="text-align:center"],
|
|
.wd :is(p, li)[style*="text-align: center"],
|
|
.wd [style*="text-align:center"] :is(p, li),
|
|
.wd [style*="text-align: center"] :is(p, li),
|
|
/* Alle Behaelter, die ihren Inhalt mittig setzen -- aus der zentralen
|
|
Stilvorlage UND aus den seiteneigenen <style>-Bloecken zusammengesucht.
|
|
Ein einzelner uebersehener Behaelter faellt sofort auf: Der Text steht
|
|
dann mittig, sein Kasten aber links. */
|
|
.wd .po-leer :is(p, li),
|
|
.wd .af-danke :is(p, li),
|
|
.wd .wd-cta-flaeche :is(p, li),
|
|
.wd .wd-intro :is(p, li),
|
|
.wd .zg-mitte :is(p, li),
|
|
.wd .vw-leer-gross :is(p, li),
|
|
.wd .wd-abschnitt--mitte :is(p, li),
|
|
.wd .wr-fertig > p,
|
|
.wd .vw-leer-hinweis {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
/* AUSNAHMEN — hier wäre eine Begrenzung falsch:
|
|
|
|
Nachrichtenblasen tragen ihre Breite schon selbst (82 % der Spalte);
|
|
eine zweite Begrenzung würde sie im Gespräch unruhig springen lassen.
|
|
|
|
Tabellenzellen und Beschreibungslisten richten sich nach ihrer Spalte.
|
|
Eine eigene Breite darin bricht die Ausrichtung zur Nachbarspalte.
|
|
|
|
Die Fusszeile ist bewusst mehrspaltig und schon schmal. */
|
|
.wd .vw-blase p, .wd .po-nachricht p,
|
|
.wd td p, .wd th p,
|
|
.wd dd, .wd dd p,
|
|
.wd .wd-fuss p, .wd .wd-fuss li,
|
|
.wd .vw-paar dd, .wd .wr-pruef dd, .wd .wr-beleg dd {
|
|
max-width: none;
|
|
}
|
|
|
|
/* =====================================================================
|
|
KACHELN: LICHT UNTER DEM ZEIGER (23.08.2026)
|
|
|
|
Die Kacheln hatten Verlaufsrand, Verlaufsfläche, Schatten und
|
|
Lichtkante — alles richtig, alles statisch. Was fehlte, war das
|
|
Gefühl von MATERIAL: eine Oberfläche, die auf Licht reagiert.
|
|
|
|
Der Effekt: Ein weicher Lichtfleck folgt dem Zeiger über die Kachel.
|
|
Das ist kein Zierrat, sondern die Fortsetzung derselben Erzählung wie
|
|
bei der Lichtkante oben — es gibt eine Lichtquelle, und die Fläche
|
|
verhält sich, als wäre sie aus etwas.
|
|
|
|
VIER ENTSCHEIDUNGEN, DAMIT ES HOCHWERTIG UND NICHT BILLIG WIRKT
|
|
|
|
1. Sehr schwach. 13 % Deckkraft. Man soll es SPÜREN, nicht ANSEHEN.
|
|
Ein greller Fleck sieht nach Spielerei aus; ein kaum sichtbarer
|
|
nach teurem Material. Passt zugleich zur Dauervorgabe
|
|
"augenschonend" — nichts blitzt, nichts blendet.
|
|
|
|
2. Nur bei echtem Zeiger (hover: hover). Auf einem Handy gibt es
|
|
keinen Zeiger; dort bliebe ein Lichtfleck an einer zufälligen
|
|
Stelle kleben.
|
|
|
|
3. Die Farbe folgt der Kachel. Blaue Kacheln leuchten blau, lila
|
|
lila — sonst bräche der Effekt die Farbordnung, die überall sonst
|
|
Bedeutung trägt.
|
|
|
|
4. Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt:
|
|
Etwas, das dem Zeiger folgt, ist Bewegung.
|
|
===================================================================== */
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.wd-karte {
|
|
/* Startwert oben mittig — falls die Kachel vor der ersten
|
|
Zeigerbewegung schon überfahren wird. */
|
|
--wd-lichtx: 50%;
|
|
--wd-lichty: 0%;
|
|
|
|
/* DIE LICHTFARBE STEHT JETZT AN DER KACHEL, NICHT IN DER REGEL.
|
|
|
|
Vorher war die Farbe im Lichtverlauf fest verdrahtet, und fuer
|
|
jede weitere Kachelfarbe brauchte es einen kompletten zweiten
|
|
Block -- einmal fuer die Flaeche, einmal fuer die leuchtende
|
|
Kante. Bei zwei Farben ging das gerade noch; das CRYONOVA-System
|
|
kennt sechs Lumen-Rollen (Baby, Aqua, Indigo, Violet, Gold,
|
|
Coral). Das waeren zwoelf fast gleiche Bloecke gewesen, die beim
|
|
naechsten Feinschliff zwangslaeufig auseinanderlaufen.
|
|
|
|
Jetzt setzt die Kachel nur noch ihre Farbe; der Verlauf wird
|
|
einmal beschrieben. Genau das meint das Design-System mit
|
|
"Kachelfarbe steuert Lumenfarbe" (Token-Regel 02). */
|
|
--wd-lumen: var(--wd-blau-rgb);
|
|
|
|
isolation: isolate;
|
|
}
|
|
|
|
/* Die sechs Lumen-Rollen aus dem System (Seite 9).
|
|
Mehr braucht es nicht -- jede weitere Farbe waere Dekoration und
|
|
wuerde die Bedeutung der bestehenden verwaessern. */
|
|
.wd-karte--lila { --wd-lumen: var(--wd-lila-rgb); }
|
|
.wd-karte--aqua { --wd-lumen: var(--wd-aqua-rgb); }
|
|
.wd-karte--premium { --wd-lumen: var(--wd-indigo-rgb); }
|
|
.wd-karte--vip { --wd-lumen: var(--wd-gold-rgb); }
|
|
.wd-karte--kritisch { --wd-lumen: var(--wd-fehler-rgb); }
|
|
|
|
.wd-karte::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
opacity: 0;
|
|
/* Ausblenden ruhiger als Einblenden -- das System nennt 120-180 ms
|
|
hinein und 240-360 ms hinaus (Seite 10). Der Unterschied ist der
|
|
Grund, warum sich Licht wie Licht anfuehlt und nicht wie ein
|
|
Schalter. */
|
|
transition: opacity .30s ease;
|
|
background: radial-gradient(
|
|
220px circle at var(--wd-lichtx) var(--wd-lichty),
|
|
rgb(var(--wd-lumen) / .28),
|
|
rgb(var(--wd-lumen) / .10) 40%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
.wd-karte:hover::after {
|
|
opacity: 1;
|
|
transition-duration: .15s;
|
|
}
|
|
|
|
/* DER RAND LEUCHTET MIT — und das ist der Teil, der auffällt.
|
|
|
|
Die Kachel hat schon zwei Hintergrundebenen: die Fläche
|
|
(padding-box) und den Verlaufsrand (border-box). Der Rand ist nur
|
|
einen Pixel breit, aber genau dort lässt sich Licht am stärksten
|
|
zeigen, ohne dass es kitschig wird.
|
|
|
|
Beim Überfahren bekommt die Randebene einen Lichtpunkt an derselben
|
|
Stelle wie die Fläche. Ergebnis: Die Kante glüht dort auf, wo der
|
|
Zeiger steht, und verläuft nach beiden Seiten aus. Ein Lichtfleck
|
|
OHNE mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr
|
|
wirkt die ganze Kachel beleuchtet.
|
|
|
|
Die Fläche bleibt unverändert — sonst würde der Text flackern. */
|
|
/* Auch die Kante folgt jetzt der Kachelfarbe -- eine Regel statt
|
|
einer je Farbe. Die Flaeche (padding-box) bleibt dabei
|
|
unveraendert; wuerde sie mitleuchten, flackerte der Text darauf. */
|
|
.wd-karte:hover {
|
|
background:
|
|
linear-gradient(180deg, rgb(12 39 64 / .78), rgb(6 19 35 / .90)) padding-box,
|
|
radial-gradient(240px circle at var(--wd-lichtx) var(--wd-lichty),
|
|
rgb(var(--wd-lumen) / .95),
|
|
rgb(var(--wd-lumen) / .30) 42%,
|
|
rgb(var(--wd-lumen) / .12) 100%) border-box;
|
|
}
|
|
|
|
/* Der Inhalt muss ÜBER dem Lichtfleck liegen.
|
|
|
|
Ohne das legt sich der absolut gesetzte Lichtfleck über den Text —
|
|
absolut positionierte Elemente malen über normalen Fluss-Inhalt,
|
|
auch wenn sie im Quelltext davor stehen. Das Ergebnis wäre ein
|
|
leichter Schleier auf der Schrift, den man erst bemerkt, wenn man
|
|
zwei Kacheln nebeneinander vergleicht. */
|
|
.wd-karte > * { position: relative; z-index: 1; }
|
|
|
|
/* Der Rand zieht mit. Ein Lichtfleck ohne mitleuchtende Kante wirkt
|
|
wie ein Fleck AUF der Kachel statt wie Licht darauf. */
|
|
.wd-karte { transition: border-color .28s ease, box-shadow .18s cubic-bezier(.2,.8,.3,1), transform .18s cubic-bezier(.2,.8,.3,1); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wd-karte::after { display: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
HANDY UND INSTALLIERTE APP — Sicherheitsabstände
|
|
|
|
AUSGANGSLAGE (gefunden am 23.08.2026)
|
|
Die Seite trug bereits `apple-mobile-web-app-status-bar-style:
|
|
black-translucent`. Das heißt wörtlich: Der Seiteninhalt beginnt bei
|
|
y=0 und läuft UNTER Uhr, Empfangsbalken und Akkuanzeige durch. Auf
|
|
einem iPhone mit Aussparung stand die Kopfzeile also im installierten
|
|
Betrieb hinter der Statusleiste.
|
|
|
|
Gleichzeitig fehlte `viewport-fit=cover` auf allen dreizehn Seiten.
|
|
Ohne diese Angabe liefert jedes `env(safe-area-inset-*)` schlicht
|
|
null. Die eine Stelle, die den unteren Abstand bereits benutzte (der
|
|
Installations-Hinweis), war damit wirkungslos — sie sah richtig aus
|
|
und tat nichts. Genau die Sorte Fehler, die man nie bemerkt, weil der
|
|
Code stimmt.
|
|
|
|
LÖSUNG IN ZWEI TEILEN
|
|
1. `viewport-fit=cover` in jeder Seite (dort erledigt).
|
|
2. Die Abstände hier einmal zentral benennen, statt sie an fünfzehn
|
|
Stellen einzeln zu schreiben. Wer sie einzeln schreibt, vergisst
|
|
eine — und dann liegt genau ein Knopf unter der Gestenleiste.
|
|
|
|
WARUM `max()` UND NICHT NUR `env()`
|
|
Auf einem Gerät ohne Aussparung ist der Wert 0. Ein Kopfbereich mit
|
|
0 Abstand klebt aber am oberen Rand. `max(env(...), <Mindestwert>)`
|
|
gibt beiden Fällen ein brauchbares Ergebnis: Notch-Geräte bekommen
|
|
den echten Abstand, alle anderen den normalen.
|
|
===================================================================== */
|
|
:root {
|
|
--wd-sicher-oben: env(safe-area-inset-top, 0px);
|
|
--wd-sicher-unten: env(safe-area-inset-bottom, 0px);
|
|
--wd-sicher-links: env(safe-area-inset-left, 0px);
|
|
--wd-sicher-rechts: env(safe-area-inset-right, 0px);
|
|
}
|
|
|
|
/* Die Kopfzeile klebt oben (position: sticky). Im Browser sitzt sie
|
|
unter der Adressleiste und braucht nichts. Installiert gibt es keine
|
|
Adressleiste mehr — dann muss sie sich selbst unter die Statusleiste
|
|
schieben, sonst steht die Marke hinter der Uhr. */
|
|
.wd-kopf {
|
|
padding-top: var(--wd-sicher-oben);
|
|
}
|
|
|
|
/* Querformat: Bei gedrehtem Gerät liegt die Aussparung seitlich. Ohne
|
|
diesen Abstand verschwindet die linke Spalte halb darunter. `92vw`
|
|
allein hilft nicht — vw zählt die Aussparung mit. */
|
|
.wd-container,
|
|
.wd-container--schmal {
|
|
padding-left: var(--wd-sicher-links);
|
|
padding-right: var(--wd-sicher-rechts);
|
|
}
|
|
|
|
/* Unten die Gestenleiste. Betrifft den Fußbereich und alles, was fest
|
|
am unteren Rand sitzt. */
|
|
.wd-fuss {
|
|
padding-bottom: calc(1.5rem + var(--wd-sicher-unten));
|
|
}
|
|
|
|
@media (display-mode: standalone), (display-mode: window-controls-overlay), (display-mode: minimal-ui) {
|
|
/* ------------------------------------------------------------------
|
|
NUR IM INSTALLIERTEN BETRIEB
|
|
|
|
Installiert fehlt alles, was ein Browser sonst beisteuert: keine
|
|
Adressleiste, kein Zurück-Knopf, kein Neuladen durch Herunterziehen
|
|
im gewohnten Sinn. Was im Browser eine Kleinigkeit ist, wird hier
|
|
zum Fehler.
|
|
------------------------------------------------------------------ */
|
|
|
|
/* Das Gummiband-Nachfedern am Seitenende sieht in einer App nach
|
|
einem Darstellungsfehler aus -- im Browser erwartet man es, in
|
|
einer App nicht. Innerhalb scrollbarer Bereiche bleibt Scrollen
|
|
natürlich unverändert. */
|
|
html, body {
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
/* Der Hinweis "Als App installieren" ist installiert sinnlos. Er wird
|
|
zwar schon per JavaScript unterdrückt -- aber nur, wenn das Skript
|
|
lädt. Diese Regel greift auch dann, wenn es das nicht tut. */
|
|
.wd-install { display: none !important; }
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
TIPP-VERHALTEN
|
|
|
|
Auf Android legt der Browser über jede angetippte Fläche ein graues
|
|
Rechteck. Bei runden Kacheln und Knöpfen zeichnet es die eckige
|
|
Trefferfläche nach und sieht nach einem Fehler aus. Ersetzt wird es
|
|
nicht ersatzlos: Jeder Knopf hat einen sichtbaren :active-Zustand,
|
|
sonst fehlte die Rückmeldung, dass der Tipp angekommen ist.
|
|
--------------------------------------------------------------------- */
|
|
.wd a, .wd button, .wd [role="button"], .wd summary, .wd label {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.wd .wd-btn:active,
|
|
.wd .vw-ub-kachel:active,
|
|
.wd .vw-ub-projekt:active,
|
|
.wd .vw-filter-knopf:active {
|
|
/* Kein Verschieben, nur ein kurzes Einsinken: Bewegung nach unten
|
|
wird als Druck gelesen und braucht keine Farbe. */
|
|
transform: scale(.985);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.wd .wd-btn:active,
|
|
.wd .vw-ub-kachel:active,
|
|
.wd .vw-ub-projekt:active,
|
|
.wd .vw-filter-knopf:active { transform: none; }
|
|
}
|