/* ═══════════════════════════════════════════════════════════════════════════ Rinsol Solutions GmbH — Design-System „Technisches Datenblatt" Single Source of Truth für alle Design-Werte (BAUAUFTRAG Block 2). Aufbau: 1 Tokens · 2 Basis · 3 Raster · 4 Typo · 5 Bausteine · 6 Motion · 7 Seiten ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */ :root{ /* Farben — 6 + Weiß */ --nacht: #0A1B2A; --tiefblau: #113C63; --linie: #2F5D82; --sandgold: #C9A227; --papier: #F5F2EC; --grau: #55636F; --weiss: #FFFFFF; /* Konstante Tinten für dunkle Bänder (bleiben in Dark Mode gleich) */ --auf-nacht: #EFEBE3; --auf-nacht-still:#9FB2C2; --linie-nacht: rgba(47,93,130,.55); /* Bedienelemente (im Dark-Modus umgedreht, damit Kontrast stimmt) */ --knopf-flaeche: #113C63; --knopf-tinte: #FFFFFF; /* Radien — technisch, aber nicht mehr scharfkantig (Modernisierung 08/2026): die Präzision kommt jetzt aus Raster und Linie, nicht aus der harten Ecke. */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 30px; --radius-pille: 999px; /* Schatten — weich und tief statt hart; Karten tragen zusätzlich ihre 1px-Linie */ --schatten: 0 1px 2px rgba(10,27,42,.05), 0 10px 26px -18px rgba(10,27,42,.35); --linie-karte: 1px solid rgba(17,60,99,.14); --schatten-lg: 0 18px 40px -24px rgba(10,27,42,.45); --schatten-hoch: 0 2px 4px rgba(10,27,42,.06), 0 22px 48px -26px rgba(10,27,42,.5); /* Kontakt-Sektion — eigene Farbwelt, damit sie NICHT in die Fußzeile läuft */ --kontakt-grund: #E9E4DA; --kontakt-karte: #113C63; --nacht-tief: #06121D; /* Fußzeile: eine Stufe tiefer als --nacht */ /* Typo */ --text-h4: clamp(1.05rem,1.3vw,1.2rem); --text-h3: clamp(1.2rem,2.1vw,1.5rem); --text-h2: clamp(1.5rem,3.2vw,2.1rem); --text-h1: clamp(1.9rem,4.6vw,3.1rem); /* Motion */ --dauer-s:.28s; --dauer-m:.6s; --dauer-l:1.1s; --ease:cubic-bezier(.22,.61,.36,1); /* Raster */ --breite: 1240px; --rinne: clamp(1.25rem,4vw,2.5rem); --sek-pad: clamp(4.5rem,8vw,7.5rem); --kopf-h: 4.5rem; --focus: var(--sandgold); color-scheme: light dark; } /* Dunkelmodus — zwei Wege, gleiche Werte: 1) Systemwunsch, solange der Besucher nicht ausdrücklich „hell" gewählt hat 2) ausdrückliche Wahl über den Schalter in der Kopfzeile (data-theme am ) Die Werteliste steht bewusst zweimal — CSS kennt keine Mixins, und ein auseinanderlaufendes Duplikat fällt sofort auf (gleiche Zeilen, gleiche Reihenfolge). */ @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]){ --papier:#0E2033; --weiss:#0A1B2A; --grau:#B9C4CE; --tiefblau:#8FB6D6; /* nur als Textfarbe */ --linie-karte:1px solid rgba(143,182,214,.20); --knopf-flaeche:#8FB6D6; --knopf-tinte:#0A1B2A; --kontakt-grund:#132B42; --kontakt-karte:#0A1B2A; --nacht-tief:#050F19; --schatten:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8); --schatten-hoch:0 2px 4px rgba(0,0,0,.35), 0 22px 48px -26px rgba(0,0,0,.9); color-scheme:dark; } } :root[data-theme="dunkel"]{ --papier:#0E2033; --weiss:#0A1B2A; --grau:#B9C4CE; --tiefblau:#8FB6D6; /* nur als Textfarbe */ --linie-karte:1px solid rgba(143,182,214,.20); --knopf-flaeche:#8FB6D6; --knopf-tinte:#0A1B2A; --kontakt-grund:#132B42; --kontakt-karte:#0A1B2A; --nacht-tief:#050F19; --schatten:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8); --schatten-hoch:0 2px 4px rgba(0,0,0,.35), 0 22px 48px -26px rgba(0,0,0,.9); color-scheme:dark; } :root[data-theme="hell"]{ color-scheme:light; } /* ── 2 · BASIS ──────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } html body{ margin:0; background:var(--papier); color:var(--grau); font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ display:block; max-width:100%; } a{ color:inherit; } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:1px; } .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } [id]{ scroll-margin-top:calc(var(--kopf-h) + 1rem); } /* ── 3 · RASTER ─────────────────────────────────────────────────────────── */ .hu{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rinne); } .sek{ position:relative; padding-block:var(--sek-pad); z-index:1; } .sek--eng{ padding-block:calc(var(--sek-pad) * .62); } .sek--nacht{ background:var(--nacht); color:var(--auf-nacht-still); } .sek--nacht .t-h2,.sek--nacht .t-h3,.sek--nacht .t-h4{ color:var(--auf-nacht); } .sek--nacht .fliess{ color:var(--auf-nacht-still); } .sek--weiss{ background:var(--weiss); } .split{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center; } @media (min-width:900px){ .split--75{ grid-template-columns:7fr 5fr; } .split--57{ grid-template-columns:5fr 7fr; } .split--57 > .split-a{ order:2; } .split--57 > .split-b{ order:1; } } .gitter{ display:grid; gap:1.25rem; align-items:stretch; } @media (min-width:760px){ .gitter--2{ grid-template-columns:repeat(2,1fr); } } @media (min-width:760px){ .gitter--4{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1060px){ .gitter--4{ grid-template-columns:repeat(4,1fr); } } /* ── 4 · TYPOGRAFIE ─────────────────────────────────────────────────────── */ .t-h1,.t-h2,.t-h3,.t-h4{ font-family:'Libre Franklin',system-ui,sans-serif; font-weight:700; letter-spacing:-.01em; color:var(--tiefblau); margin:0; text-wrap:balance; } .t-h1{ font-size:var(--text-h1); line-height:1.06; } .t-h2{ font-size:var(--text-h2); line-height:1.14; } .t-h3{ font-size:var(--text-h3); line-height:1.2; font-weight:600; } .t-h4{ font-size:var(--text-h4); line-height:1.3; font-weight:600; } .augenbraue{ display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem; font-family:'Libre Franklin',system-ui,sans-serif; font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sandgold); } .sek--nacht .augenbraue{ color:var(--sandgold); } .augenbraue::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sandgold); flex:none; } .fliess{ color:var(--grau); max-width:68ch; margin:0 0 1.1rem; } .fliess:last-child{ margin-bottom:0; } .fliess a{ color:var(--tiefblau); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(201,162,39,.7); } .fliess a:hover{ text-decoration-color:var(--sandgold); } .sek--nacht .fliess a{ color:var(--auf-nacht); } .lead{ font-size:clamp(1.02rem,1.4vw,1.16rem); color:var(--grau); max-width:60ch; margin:0 0 1.6rem; } .sek--nacht .lead{ color:var(--auf-nacht-still); } .zahl{ font-variant-numeric:tabular-nums; font-weight:600; } .klein{ font-size:.82rem; } /* ── 5 · BAUSTEINE ──────────────────────────────────────────────────────── */ /* 5.1 Wortmarke */ .marke{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:inherit; } .marke i{ width:7px; height:7px; border-radius:50%; background:var(--sandgold); flex:none; display:none; } /* ersetzt durch das Signet (.marke-signet) */ .marke b{ font-family:'Libre Franklin',sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:.06em; line-height:1; display:block; } .marke s{ display:block; text-decoration:none; font-size:.56rem; letter-spacing:.18em; line-height:1.6; opacity:.72; font-family:'Libre Franklin',sans-serif; font-weight:600; } /* 5.2 Kopfzeile */ .kopf{ position:fixed; inset:0 0 auto 0; z-index:60; color:var(--auf-nacht); background:transparent; transition:background var(--dauer-s) var(--ease), color var(--dauer-s) var(--ease), box-shadow var(--dauer-s) var(--ease); } .kopf.scrolled{ background:color-mix(in srgb, var(--papier) 88%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); color:var(--tiefblau); box-shadow:var(--schatten); } .kopf-in{ max-width:var(--breite); margin-inline:auto; padding:.85rem var(--rinne); display:flex; align-items:center; gap:1.5rem; min-height:var(--kopf-h); } .kopf nav{ display:none; margin-left:auto; align-items:center; gap:.2rem; } .kopf nav a,.kopf .nav-knopf{ position:relative; color:inherit; text-decoration:none; background:none; border:0; font:inherit; font-size:.92rem; padding:.55rem .7rem; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; } .kopf nav a::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:.25rem; height:1px; background:var(--sandgold); transform:scaleX(0); transform-origin:left; transition:transform var(--dauer-s) var(--ease); } .kopf nav a:hover::after,.kopf nav a:focus-visible::after,.kopf nav a[aria-current]::after{ transform:scaleX(1); } .kopf .cta{ display:none; margin-left:.2rem; padding:.6rem 1.15rem; border-radius:var(--radius-pille); background:var(--knopf-flaeche); color:var(--knopf-tinte); text-decoration:none; white-space:nowrap; font-size:.9rem; font-weight:600; } .kopf.scrolled .cta{ background:var(--knopf-flaeche); color:var(--knopf-tinte); } .burger{ margin-left:auto; background:none; border:0; color:inherit; padding:.6rem; cursor:pointer; min-width:44px; min-height:44px; display:grid; place-items:center; } /* Ausklapper Leistungen */ .aus{ position:relative; } .aus-liste{ position:absolute; top:calc(100% + .35rem); left:0; min-width:17rem; background:var(--weiss); border:var(--linie-karte); border-top:2px solid var(--sandgold); box-shadow:var(--schatten-hoch); border-radius:var(--radius-lg); padding:.45rem; display:none; overflow:hidden; } .aus[data-offen="true"] .aus-liste{ display:block; } .kopf .aus-liste a{ display:block; padding:.6rem .75rem; font-size:.9rem; color:var(--tiefblau); white-space:nowrap; border-radius:var(--radius-sm); } .aus-liste a::after{ display:none; } .kopf .aus-liste a:hover,.kopf .aus-liste a:focus-visible{ background:var(--papier); color:var(--tiefblau); } .aus-pfeil{ transition:transform var(--dauer-s) var(--ease); } .aus[data-offen="true"] .aus-pfeil{ transform:rotate(180deg); } /* 1120 statt 1000: die Leiste traegt jetzt Signet, Ratgeber und den Darstellungs-Schalter. */ @media (min-width:1120px){ .kopf nav{ display:flex; } .kopf .cta{ display:inline-block; } .kopf > .kopf-in > .thema{ display:grid; } .burger{ display:none; } } @media (max-width:1119px){ .kopf > .kopf-in > .thema{ display:none; } } /* Der Rechner ist keine Leistung — er haengt als Werkzeug unter der Liste. */ .kopf .aus-liste .aus-extra{ margin-top:.35rem; padding-top:.7rem; border-top:var(--linie-karte); color:var(--grau); font-size:.86rem; border-radius:0; } .kopf .aus-liste .aus-extra:hover{ color:var(--tiefblau); } /* Mobil-Overlay — deckend */ .menue{ position:fixed; inset:0; z-index:70; background:var(--nacht); color:var(--auf-nacht); display:flex; flex-direction:column; padding:5.5rem var(--rinne) 2rem; overflow-y:auto; } .menue[hidden]{ display:none; } .menue a{ text-decoration:none; font-family:'Libre Franklin',sans-serif; font-weight:600; font-size:1.25rem; padding:.75rem 0; border-bottom:1px solid var(--linie-nacht); } .menue .unter{ font-size:1rem; font-weight:400; padding-left:1.1rem; opacity:.85; font-family:'Inter',sans-serif; position:relative; } .menue .unter::before{ content:""; position:absolute; left:0; top:1.15rem; width:6px; height:6px; border-radius:50%; background:var(--sandgold); } .menue .zu{ position:absolute; top:1rem; right:var(--rinne); background:none; border:0; color:inherit; min-width:44px; min-height:44px; cursor:pointer; display:grid; place-items:center; } /* 5.3 Knöpfe */ .knopf{ display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.35rem; background:var(--knopf-flaeche); color:var(--knopf-tinte); text-decoration:none; border:0; border-radius:var(--radius-pille); font-family:'Libre Franklin',sans-serif; font-weight:600; font-size:.94rem; cursor:pointer; box-shadow:var(--schatten); transition:background var(--dauer-s) var(--ease), transform var(--dauer-s) var(--ease), box-shadow var(--dauer-s) var(--ease); } .knopf:hover{ transform:translateY(-2px); box-shadow:var(--schatten-hoch); } .knopf::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sandgold); flex:none; transition:transform var(--dauer-s) var(--ease); } .knopf:hover::before{ transform:translateX(3px); } .knopf:hover{ background:var(--nacht); } /* Auf --nacht braucht der Knopf mehr Helligkeit, sonst verschwindet er in der Fläche. */ .hero .knopf, .sek--nacht .knopf{ background:#1A5182; color:#fff; } .hero .knopf:hover, .sek--nacht .knopf:hover{ background:#24689F; } .knopf--geist{ background:transparent; color:var(--tiefblau); border:1px solid rgba(17,60,99,.3); box-shadow:none; } .knopf--geist:hover{ background:transparent; border-color:var(--sandgold); } .sek--nacht .knopf--geist{ color:var(--auf-nacht); border-color:var(--linie-nacht); } .textlink{ display:inline-flex; align-items:center; gap:.5rem; color:var(--tiefblau); font-family:'Libre Franklin',sans-serif; font-weight:600; font-size:.94rem; text-decoration:none; } .textlink::after{ content:""; width:1.4rem; height:1px; background:var(--sandgold); transition:width var(--dauer-s) var(--ease); } .textlink:hover::after{ width:2.2rem; } .sek--nacht .textlink,.hero .textlink,.scrolly .textlink{ color:var(--auf-nacht); } /* 5.4 Bilder — angefaste Blechkante oben rechts */ .bild{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--nacht); box-shadow:var(--schatten); } .bild-in{ clip-path:inset(0% round 0px); height:100%; } .bild img{ width:100%; height:100%; object-fit:cover; } .bild--43{ aspect-ratio:4/3; } .bild--169{ aspect-ratio:16/9; } .bild--32{ aspect-ratio:3/2; } /* 5.5 Karten */ .karte{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--weiss); border:var(--linie-karte); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--schatten); transition:transform var(--dauer-s) var(--ease), box-shadow var(--dauer-s) var(--ease); } /* Die Spur (ausführen = durchgezogen, vermittelt = gestrichelt) bleibt — sie ist Inhalt, nicht Dekoration. Sie sitzt jetzt als eigener Streifen INNEN, damit die Ecke rund bleibt. */ .karte::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tiefblau); border-radius:var(--radius-lg) 0 0 var(--radius-lg); } .karte:hover{ transform:translateY(-3px); box-shadow:var(--schatten-hoch); } .karte--vermittelt::before{ background:repeating-linear-gradient(180deg, var(--linie) 0 7px, transparent 7px 14px); } .karte-koerper{ padding:1.35rem 1.4rem 1.5rem 1.55rem; display:flex; flex-direction:column; flex:1; gap:.6rem; } .karte-koerper .textlink{ margin-top:auto; padding-top:.9rem; } .karte .bild{ border-radius:0; box-shadow:none; } /* 5.6 Zeilenliste — das „Datenblatt" (immer 1 Spalte, fluchtet immer) */ .zeilen{ display:grid; grid-template-columns:1fr; border-top:var(--linie-karte); } .zeile{ display:grid; grid-template-columns:2.6rem 1fr; gap:.4rem 1rem; padding:1.05rem .2rem; border-bottom:var(--linie-karte); align-items:baseline; } @media (min-width:820px){ .zeile{ grid-template-columns:2.6rem 15rem 1fr; } } .zeile-nr{ font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--sandgold); font-family:'Libre Franklin',sans-serif; letter-spacing:.08em; } .zeile-titel{ font-family:'Libre Franklin',sans-serif; font-weight:600; color:var(--tiefblau); font-size:1rem; grid-column:2; } .zeile-text{ color:var(--grau); font-size:.94rem; grid-column:2; } @media (min-width:820px){ .zeile-text{ grid-column:3; } } .sek--nacht .zeile{ border-color:var(--linie-nacht); } .sek--nacht .zeilen{ border-color:var(--linie-nacht); } .sek--nacht .zeile-titel{ color:var(--auf-nacht); } .sek--nacht .zeile-text{ color:var(--auf-nacht-still); } /* 5.7 Klemmpunkt-Listen */ .punkte{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; } .punkte li{ position:relative; padding-left:1.25rem; color:var(--grau); } .punkte li::before{ content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--sandgold); } .sek--nacht .punkte li{ color:var(--auf-nacht-still); } /* 5.8 Doppel-Linie: ausführen vs. vermitteln */ .spur{ padding-left:1.4rem; border-left:2px solid var(--tiefblau); } .spur--vermittelt{ border-left-style:dashed; border-left-color:var(--linie); } .spur-kopf{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; } /* 5.9 Ablauf */ .ablauf{ display:grid; gap:1.25rem; counter-reset:s; } @media (min-width:900px){ .ablauf--4{ grid-template-columns:repeat(4,1fr); } .ablauf--5{ grid-template-columns:repeat(5,1fr); } } .schritt{ position:relative; padding-top:1.6rem; } .schritt::before{ content:""; position:absolute; left:0; top:.42rem; width:9px; height:9px; border-radius:50%; background:var(--sandgold); box-shadow:0 0 0 4px rgba(201,162,39,.16); z-index:2; } .schritt::after{ content:""; position:absolute; left:7px; right:0; top:calc(.42rem + 3px); height:1px; background:var(--linie); opacity:.45; } .schritt:last-child::after{ display:none; } .schritt--vermittelt::after{ background:none; border-top:1px dashed var(--linie); opacity:.8; } .schritt-nr{ font-family:'Libre Franklin',sans-serif; font-size:.7rem; letter-spacing:.14em; color:var(--sandgold); font-weight:600; display:block; margin-bottom:.35rem; } .schritt h3{ margin:0 0 .35rem; } .schritt p{ margin:0; font-size:.92rem; color:var(--grau); } .sek--nacht .schritt p{ color:var(--auf-nacht-still); } @media (max-width:899px){ .schritt{ padding-left:1.4rem; padding-top:0; padding-bottom:1.4rem; } .schritt::before{ top:.42rem; } .schritt::after{ left:3px; top:1rem; bottom:0; right:auto; width:1px; height:auto; } .schritt--vermittelt::after{ border-top:0; border-left:1px dashed var(--linie); } } /* 5.10 FAQ */ .faq{ border-top:var(--linie-karte); } .faq-eintrag{ border-bottom:var(--linie-karte); padding:1.4rem 0; display:grid; gap:.5rem; } @media (min-width:900px){ .faq-eintrag{ grid-template-columns:22rem 1fr; gap:2rem; } } .faq-frage{ font-family:'Libre Franklin',sans-serif; font-weight:600; color:var(--tiefblau); font-size:1.02rem; margin:0; } .faq-antwort{ margin:0; color:var(--grau); font-size:.96rem; } /* 5.11 Platzhalter (offene Kundendaten) */ .platzhalter{ display:inline-flex; align-items:center; gap:.5rem; padding:.24rem .6rem; border:1px dashed rgba(85,99,111,.55); border-radius:var(--radius-sm); color:var(--grau); font-size:.86rem; white-space:nowrap; } .platzhalter::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sandgold); flex:none; } .sek--nacht .platzhalter,.fuss .platzhalter{ color:var(--auf-nacht-still); border-color:var(--linie-nacht); } /* 5.12 Kennzahlenband */ .kennband{ position:relative; z-index:2; max-width:var(--breite); margin:0 auto; width:calc(100% - 2 * var(--rinne)); transform:translateY(-2.2rem); background:var(--weiss); border:var(--linie-karte); border-radius:var(--radius-xl); box-shadow:var(--schatten-hoch); overflow:hidden; } .kennband-in{ display:grid; grid-template-columns:repeat(2,1fr); } @media (min-width:820px){ .kennband-in{ grid-template-columns:repeat(4,1fr); } } .kennfeld{ padding:1.5rem clamp(1.1rem,2.4vw,1.9rem); border-right:1px solid rgba(17,60,99,.12); border-bottom:1px solid rgba(17,60,99,.12); } @media (min-width:820px){ .kennfeld{ border-bottom:0; } } .kennfeld:last-child{ border-right:0; } @media (max-width:819px){ .kennfeld:nth-child(2n){ border-right:0; } .kennfeld:nth-last-child(-n+2){ border-bottom:0; } } .kennwert{ font-family:'Inter',sans-serif; font-weight:600; font-variant-numeric:tabular-nums; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.1; color:var(--tiefblau); letter-spacing:-.01em; } .kennlabel{ display:flex; align-items:flex-start; gap:.5rem; margin-top:.5rem; font-size:.78rem; line-height:1.45; color:var(--grau); } .kennlabel::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--sandgold); flex:none; margin-top:.35em; } /* 5.13 Klemmleiste (Sektionsnummern am linken Rand) */ .leiste{ position:fixed; left:1.5rem; top:0; bottom:0; width:1px; background:var(--linie); opacity:.28; z-index:2; pointer-events:none; display:none; } .sek-nr{ position:absolute; left:.55rem; width:2rem; text-align:center; top:calc(var(--sek-pad) * .55); font-family:'Libre Franklin',sans-serif; font-size:.7rem; letter-spacing:.1em; font-weight:600; color:var(--sandgold); z-index:3; display:none; } .sek-nr::before{ content:""; display:block; width:8px; height:8px; border-radius:50%; margin:0 auto .5rem; border:1px solid var(--sandgold); background:transparent; transition:background var(--dauer-m) var(--ease); } .sek-nr.aktiv::before{ background:var(--sandgold); } @media (min-width:1200px){ .leiste,.sek-nr{ display:block; } } /* 5.14 Hintergrund-Loop „Einliniendiagramm" */ .netz{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .netz svg{ width:100%; height:100%; } .netz .netz-linie{ stroke:rgba(17,60,99,.07); } .netz .netz-knoten{ fill:rgba(201,162,39,.16); } .netz-atem{ animation:netz-atem 18s ease-in-out infinite; } @keyframes netz-atem{ 0%,100%{ opacity:.05 } 50%{ opacity:.09 } } /* Impuls = Stromfluss. Feste Keyframe-Werte (kein var() in @keyframes — das wird nicht zuverlässig interpoliert und der Hintergrund stünde still). */ /* Bewusst leise: der Impuls darf nie wie ein Unterstrich unter Fließtext wirken. */ .netz-puls{ stroke:rgba(201,162,39,.14); stroke-width:1.5; fill:none; stroke-dasharray:90 3000; animation:netz-puls 7s linear infinite; } @keyframes netz-puls{ from{ stroke-dashoffset:3090 } to{ stroke-dashoffset:0 } } .netz-puls--b{ animation-duration:9s; animation-delay:-3.5s; } /* EINE Leitung führt dauerhaft Strom — damit der Hintergrund nie stillsteht. */ .netz-puls--dauer{ stroke:rgba(201,162,39,.12); stroke-dasharray:56 300; animation-name:netz-dauer; animation-duration:9s; } @keyframes netz-dauer{ from{ stroke-dashoffset:356 } to{ stroke-dashoffset:0 } } .netz--nacht{ position:absolute; } /* Im Kontaktband liegt das Netz auf heller Flaeche — Position wie --nacht, Tinte wie hell. */ .netz--kontakt{ position:absolute; } .netz--nacht .netz-linie{ stroke:rgba(47,93,130,.22); } .netz--nacht .netz-knoten{ fill:rgba(201,162,39,.22); } .netz--nacht .netz-puls{ stroke:rgba(201,162,39,.14); } .netz--nacht .netz-puls--dauer{ stroke:rgba(201,162,39,.16); } .netz--nacht .netz-atem{ animation-name:netz-atem-nacht; } @keyframes netz-atem-nacht{ 0%,100%{ opacity:.45 } 50%{ opacity:.8 } } @media (prefers-reduced-motion:reduce){ /* dämpfen, NICHT abschalten: Impuls läuft langsam weiter, das Atmen ruht */ .netz-atem{ animation:none; opacity:.07 } .netz--nacht .netz-atem{ animation:none; opacity:.75 } .netz-puls{ animation-duration:20s; } .netz-puls--b{ animation-duration:24s; } .netz-puls--dauer{ animation-duration:26s; } } /* 5.15 Fortschritt + Seitenübergang + Preloader */ .fortschritt{ background:var(--sandgold); } .wechsel{ position:fixed; inset:0; z-index:200; background:var(--nacht); opacity:0; pointer-events:none; transition:opacity .2s linear; } .wechsel.an{ opacity:1; } .vorlader{ position:fixed; inset:0; z-index:300; background:var(--nacht-tief); color:#EFEBE3; display:grid; place-items:center; transition:opacity .25s var(--ease); } .vorlader.weg{ opacity:0; pointer-events:none; } .vorlader-bar{ width:min(240px,52vw); height:1px; background:rgba(239,235,227,.3); position:relative; margin-top:1.1rem; } .vorlader-bar span{ position:absolute; inset:0 auto 0 0; width:0; background:var(--sandgold); animation:vorlader .7s linear forwards; } @keyframes vorlader{ to{ width:100% } } /* ── 6 · HERO ───────────────────────────────────────────────────────────── */ .hero{ position:relative; background:var(--nacht); color:var(--auf-nacht); } .hero-raster{ display:grid; } @media (min-width:960px){ .hero-raster{ grid-template-columns:45fr 55fr; min-height:82svh; } } .hero-text{ position:relative; z-index:2; padding:calc(var(--kopf-h) + 3.2rem) var(--rinne) 3.2rem; display:flex; flex-direction:column; justify-content:center; } @media (min-width:960px){ .hero-text{ padding-left:max(var(--rinne), calc((100vw - var(--breite))/2 + var(--rinne))); padding-right:clamp(2rem,4vw,3.5rem); padding-block:4rem; } } .hero .t-h1{ color:var(--auf-nacht); } .hero .lead{ color:var(--auf-nacht-still); margin-top:1.2rem; } .hero-knoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; } .hero-bild{ position:relative; min-height:46vw; } @media (min-width:960px){ .hero-bild{ min-height:100%; } } .hero-bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-bild::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,27,42,.92) 0%, rgba(10,27,42,.35) 34%, rgba(10,27,42,.12) 100%); } /* Schleier unter der Kopfzeile — sonst steht weiße Navigation auf hellem Foto. */ .hero-bild::before{ content:""; position:absolute; inset:0 0 auto 0; height:11rem; z-index:1; background:linear-gradient(180deg, rgba(10,27,42,.8) 0%, rgba(10,27,42,.45) 45%, rgba(10,27,42,0) 100%); } @media (max-width:959px){ .hero-bild::after{ background:linear-gradient(180deg, rgba(10,27,42,.85) 0%, rgba(10,27,42,.2) 60%); } } /* Hero der Unterseiten */ .hero--unter .hero-raster{ min-height:auto; } @media (min-width:960px){ .hero--unter .hero-raster{ min-height:60svh; } } /* ── 7 · SCROLLYTELLING / SET-PIECES ────────────────────────────────────── */ .scrolly{ background:var(--nacht); color:var(--auf-nacht-still); position:relative; } section.scrolly .scrolly-buehne.buehne{ flex-direction:column; align-items:stretch; justify-content:center; gap:clamp(.8rem,2vh,1.6rem); padding:calc(var(--kopf-h) + .8rem) var(--rinne) 1.4rem; } .buehne-in{ width:100%; max-width:var(--breite); margin-inline:auto; display:grid; gap:1rem; align-items:center; } @media (min-width:900px){ .buehne-in{ grid-template-columns:1fr 19rem; gap:2.2rem; } } .buehne-bild{ position:relative; min-width:0; } .buehne-bild svg{ width:100%; height:auto; max-height:52svh; display:block; overflow:hidden; } @media (min-width:900px){ .buehne-bild svg{ max-height:64svh; } } .scrolly-seite{ display:flex; flex-direction:column; gap:1rem; min-width:0; } .scrolly-text{ display:grid; gap:.5rem; align-content:center; } .scrolly-text p{ margin:0; padding-left:1.1rem; position:relative; font-size:.82rem; line-height:1.45; color:var(--auf-nacht-still); } .scrolly-text p::before{ content:""; position:absolute; left:0; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--sandgold); } @media (max-width:899px){ .scrolly-text p{ font-size:.74rem; line-height:1.4; } } .scrolly-wert{ border-bottom:1px solid var(--linie-nacht); padding-bottom:.7rem; } @media (min-width:900px){ .scrolly-wert{ text-align:right; } .scrolly-wert small{ margin-left:auto; } } .scrolly-wert b{ display:block; font-family:'Inter',sans-serif; font-weight:600; font-variant-numeric:tabular-nums; font-size:clamp(1.7rem,3.4vw,3rem); color:var(--sandgold); line-height:1; letter-spacing:-.02em; } .scrolly-wert small{ display:block; font-size:.68rem; color:var(--auf-nacht-still); margin-top:.4rem; max-width:13rem; line-height:1.35; } .buehne-kopf{ max-width:var(--breite); margin-inline:auto; width:100%; } .buehne-kopf .t-h2{ color:var(--auf-nacht); } /* Zeichnungs-Grundwerte */ .zeichnung{ stroke:var(--linie); stroke-width:1.5; fill:none; stroke-linecap:square; stroke-linejoin:miter; } .zeichnung .gold{ stroke:var(--sandgold); } .zeichnung .gold-f{ fill:var(--sandgold); stroke:none; } .zeichnung .strich{ stroke-dasharray:6 5; } .zeichnung .beschriftung{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; fill:var(--sandgold); stroke:none; } .zeichnung .beschriftung-still{ fill:var(--auf-nacht-still); } .zeichnung .flaeche{ fill:var(--nacht); } /* Mobil wird das Schnittbild stark verkleinert: Striche kräftiger, Dash-Muster größer, die 13-px-Beschriftungen am Objekt aus (bei dieser Skalierung nur noch Rauschen — die Beat-Texte unter der Bühne tragen den Inhalt). */ @media (max-width:899px){ .zeichnung{ stroke-width:3.5; } .zeichnung .strich,.zeichnung [stroke-dasharray]{ stroke-dasharray:14 10; } .zeichnung .beschriftung{ display:none; } } /* ── 8 · FUSSZEILE ──────────────────────────────────────────────────────── */ .fuss{ position:relative; background:var(--nacht-tief); color:var(--auf-nacht-still); z-index:1; margin-top:2.6rem; border-radius:var(--radius-xl) var(--radius-xl) 0 0; overflow:hidden; box-shadow:0 -1px 0 rgba(201,162,39,.35); } /* Der Streifen Seitengrund über der Fußzeile ist die sichtbare Naht — ohne ihn liefe eine dunkle Sektion direkt in die dunkle Fußzeile (genau der gemeldete Fehler). */ .fuss::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(201,162,39,.55) 22%, rgba(201,162,39,.55) 78%, transparent); } .fuss-oben{ display:grid; gap:2.5rem; padding-block:clamp(3rem,6vw,4.5rem); } @media (min-width:820px){ .fuss-oben{ grid-template-columns:1.3fr 1fr 1.1fr; gap:3rem; } } .fuss h2{ font-family:'Libre Franklin',sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sandgold); margin:0 0 1rem; font-weight:600; } .fuss a{ color:var(--auf-nacht-still); text-decoration:none; } .fuss a:hover{ color:var(--auf-nacht); } .fuss-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.92rem; } .fuss .marke{ color:var(--auf-nacht); } .fuss-schluss{ border-top:1px solid var(--linie-nacht); padding:1.25rem 0 1.6rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; } .fuss-schluss nav{ display:flex; flex-wrap:wrap; gap:1.2rem; font-size:.85rem; } .fuss-demo{ font-size:.76rem; color:var(--auf-nacht-still); opacity:.75; max-width:60ch; padding-bottom:1.4rem; } /* ── 9 · KONTAKTFORMULAR (Farben aus Vorlage, Struktur unverändert) ─────── */ .k-wrap{ max-width:100%; margin:0; padding:0; } .k-card{ background:var(--k-card); border:1px solid var(--k-border); border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--schatten); } .k-card h2{ font-family:'Libre Franklin',sans-serif; font-size:1.25rem; margin:0 0 .35rem; color:var(--tiefblau); } .k-sub{ color:var(--k-muted); margin:0 0 1.25rem; font-size:.94rem; } .k-card label{ display:block; font-size:.82rem; font-weight:600; margin:.75rem 0 .3rem; color:var(--tiefblau); font-family:'Libre Franklin',sans-serif; letter-spacing:.02em; } .k-card input,.k-card textarea,.k-card select{ width:100%; padding:.7rem .8rem; border:1px solid var(--k-border); border-radius:var(--radius); background:var(--weiss); color:var(--k-text); font:inherit; font-size:.95rem; } .k-card input:focus,.k-card textarea:focus{ outline:2px solid var(--k-accent); border-color:var(--k-accent); } .k-row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; } @media(max-width:560px){ .k-row{ grid-template-columns:1fr; } } .k-btn{ appearance:none; border:0; cursor:pointer; font-family:'Libre Franklin',sans-serif; font-weight:600; padding:.8rem 1.5rem; border-radius:var(--radius-pille); background:var(--k-accent); color:var(--k-accent-ink); font-size:.94rem; box-shadow:var(--schatten); } .k-btn[disabled]{ opacity:.55; cursor:not-allowed; } .k-consent{ display:flex; gap:.5rem; align-items:flex-start; font-size:.84rem; color:var(--k-muted); margin:.9rem 0; } .k-consent input{ width:auto; margin-top:.25rem; } .k-consent label{ font-weight:400; margin:0; color:var(--k-muted); font-family:'Inter',sans-serif; letter-spacing:0; } .k-note{ font-size:.9rem; padding:.7rem .9rem; border-radius:var(--radius); margin-top:.9rem; display:none; } .k-note.ok{ display:block; background:rgba(47,93,130,.1); color:var(--tiefblau); } .k-note.err{ display:block; background:rgba(165,37,31,.1); color:#a5251f; } .hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; } /* Anfrage-Assistent */ .assi{ background:var(--weiss); border:var(--linie-karte); border-left:2px solid var(--sandgold); padding:1.5rem 1.4rem; margin-bottom:1.25rem; border-radius:var(--radius-lg); box-shadow:var(--schatten); } .assi-zeile{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 1.1rem; } .assi-zeile:last-of-type{ margin-bottom:.4rem; } .assi-titel{ font-family:'Libre Franklin',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--grau); font-weight:600; } .chip{ background:transparent; border:1px solid rgba(17,60,99,.25); border-radius:var(--radius-pille); padding:.5rem .85rem; font:inherit; font-size:.88rem; color:var(--tiefblau); cursor:pointer; min-height:44px; display:inline-flex; align-items:center; gap:.5rem; transition:border-color var(--dauer-s) var(--ease), background var(--dauer-s) var(--ease); } .chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:transparent; border:1px solid var(--sandgold); flex:none; } .chip[aria-pressed="true"]{ border-color:var(--sandgold); background:rgba(201,162,39,.1); } .chip[aria-pressed="true"]::before{ background:var(--sandgold); } /* ── 10 · RECHTSTEXTE / SCHLANKE SEITEN ─────────────────────────────────── */ .text-seite{ padding-block:calc(var(--kopf-h) + 3.5rem) var(--sek-pad); } .text-seite .inhalt{ max-width:760px; } .text-seite h2{ font-family:'Libre Franklin',sans-serif; font-size:1.15rem; color:var(--tiefblau); margin:2.5rem 0 .6rem; font-weight:600; } .text-seite h3{ font-family:'Libre Franklin',sans-serif; font-size:1rem; color:var(--tiefblau); margin:1.5rem 0 .4rem; font-weight:600; } .text-seite p,.text-seite li{ margin:0 0 .85rem; color:var(--grau); } .text-seite ul{ padding-left:1.2rem; } .text-seite address{ font-style:normal; color:var(--grau); } .text-seite a{ color:var(--tiefblau); } .muted{ opacity:.72; font-size:.9rem; } /* ── 11 · REDUCED MOTION (dämpfen statt einfrieren) ─────────────────────── */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } .vorlader-bar span{ animation-duration:.3s; } } /* ═══════════════════════════════════════════════════════════════════════════ 12 · MODERNISIERUNG 08/2026 — Signet, Dunkelmodus-Schalter, Kontaktband, Raum/Faux-3D im Hero, Stillstandsrechner, Ratgeber. (coreskill v2: REF-K Premium · REF-P plastisch · REF-R Raum Stufe 1) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 12.1 Signet in der Navigation ──────────────────────────────────────── */ .marke-signet{ width:auto; height:2.05rem; flex:none; display:block; } .marke-signet .sig-schiene{ stroke:currentColor; } .marke-signet .sig-klemme{ fill:currentColor; } .marke-signet .sig-knoten{ fill:var(--sandgold); } .fuss .marke-signet{ height:2.3rem; } .menue .marke-signet{ height:2.3rem; } @media (max-width:400px){ .marke-signet{ height:1.8rem; } } /* Firmenlogo (Wort-Bild-Marke des Kunden). Als Maske eingesetzt, damit es die Textfarbe annimmt — hell auf der Nachtfassung, dunkel auf der Papierfassung. */ .marke-logo{ display:block; height:3rem; aspect-ratio:1953/1363; flex:none; background:currentColor; -webkit-mask:url(../identity/logo-2.svg) center/contain no-repeat; mask:url(../identity/logo-2.svg) center/contain no-repeat; } .fuss .marke-logo{ height:4rem; } .vorlader .marke-logo{ height:4.2rem; } @media (max-width:400px){ .marke-logo{ height:2.2rem; } } /* ── 12.2 Dunkelmodus-Schalter ──────────────────────────────────────────── */ .thema{ margin-left:.35rem; width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:var(--radius-pille); border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; opacity:.75; transition:opacity var(--dauer-s) var(--ease), background var(--dauer-s) var(--ease); } .thema:hover{ opacity:1; background:rgba(201,162,39,.16); } .thema svg{ width:1.05rem; height:1.05rem; display:block; } /* Genau EIN Zeichen ist sichtbar: hell → Mond (das, was man einschalten kann). */ .thema .th-mond{ display:block; } .thema .th-sonne{ display:none; } :root[data-theme="dunkel"] .thema .th-mond{ display:none; } :root[data-theme="dunkel"] .thema .th-sonne{ display:block; } @media (prefers-color-scheme: dark){ :root:not([data-theme="hell"]) .thema .th-mond{ display:none; } :root:not([data-theme="hell"]) .thema .th-sonne{ display:block; } } .menue .thema{ margin:1.4rem 0 0; width:auto; padding:.7rem 1.1rem; gap:.6rem; grid-auto-flow:column; justify-content:flex-start; font:inherit; font-size:.95rem; } .menue .thema::after{ content:"Darstellung wechseln"; font-family:'Libre Franklin',sans-serif; font-weight:600; } /* ── 12.3 Kontaktband — eigene Farbwelt, damit es NICHT in die Fußzeile läuft (gemeldet 05.08.2026: Kontakt und Fußzeile waren beide --nacht) ─────── */ .sek--kontakt{ background:var(--kontakt-grund); color:var(--grau); } .kontakt-karte{ position:relative; overflow:hidden; border-radius:var(--radius-xl); background:var(--kontakt-karte); color:var(--auf-nacht-still); box-shadow:var(--schatten-hoch); padding:clamp(1.8rem,4vw,3.2rem); display:grid; gap:2rem; } @media (min-width:900px){ .kontakt-karte{ grid-template-columns:1.15fr .85fr; gap:3.2rem; align-items:center; } } .kontakt-karte .t-h2,.kontakt-karte .t-h3{ color:var(--auf-nacht); } .kontakt-karte .fliess,.kontakt-karte .lead{ color:var(--auf-nacht-still); } .kontakt-karte .zeile{ border-color:var(--linie-nacht); } .kontakt-karte .zeile-titel{ color:var(--auf-nacht); } .kontakt-karte .zeile-text{ color:var(--auf-nacht-still); } .kontakt-karte .platzhalter{ color:var(--auf-nacht-still); border-color:var(--linie-nacht); } .kontakt-karte .knopf{ background:var(--sandgold); color:#20180A; } .kontakt-karte .knopf::before{ background:#20180A; } /* goldener Punkt auf Gold wäre unsichtbar */ .kontakt-karte .knopf:hover{ background:#E0B93A; } .kontakt-karte .textlink{ color:var(--auf-nacht); } /* Lichtkante oben links — dieselbe Lichtquelle (315°) wie die Set-Pieces (REF-P §2) */ .kontakt-karte::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.10), transparent 58%); } .kontakt-karte > *{ position:relative; z-index:1; } /* ── 12.4 Weiche Sektions-Naht (ersetzt die harte Farbkante) ─────────────── */ .naht{ display:block; width:100%; height:clamp(2.4rem,5vw,4.4rem); } .naht path{ fill:var(--papier); } .naht--weiss path{ fill:var(--weiss); } .naht--kontakt path{ fill:var(--kontakt-grund); } /* ── 12.5 HERO-RAUM — Faux-3D (REF-R Stufe 1: Ebenen-Tiefe, kein WebGL) ──── */ .hero--raum{ overflow:clip; } .hero-buehne{ position:relative; min-height:56vw; } /* Mit Objekt braucht die Bühne mobil mehr Luft, sonst schneidet das Kennband die Adern ab. */ .hero--raum .hero-buehne{ min-height:74vw; } @media (max-width:959px){ .hero--raum .hero-objekt{ padding-bottom:3.2rem; } } @media (min-width:960px){ .hero-buehne{ min-height:100%; } } /* Das Foto bleibt (REF-C: Hero immer mit echtem Foto) — es ist die hinterste Ebene. */ .hero-buehne .hero-foto{ position:absolute; inset:0; } .hero-buehne .hero-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero-buehne .hero-foto::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,27,42,.94) 0%, rgba(10,27,42,.5) 36%, rgba(10,27,42,.14) 100%); } /* NUR auf der Bühne mit Objekt: das Foto tritt zurück — im Raum-Typ „Bühne" steht EIN Objekt im Licht, alles andere ist Kontext (REF-R §5). Zwei Hauptdarsteller wären keiner. */ .hero--raum .hero-buehne .hero-foto::after{ background: radial-gradient(66% 58% at 60% 44%, rgba(10,27,42,0) 8%, rgba(8,21,33,.42) 76%), linear-gradient(100deg, rgba(10,27,42,.95) 0%, rgba(10,27,42,.46) 38%, rgba(10,27,42,.08) 100%); } /* Schleier unter der Kopfzeile — sonst steht helle Navigation auf hellem Foto. */ .hero-buehne .hero-foto::before{ content:""; position:absolute; inset:0 0 auto 0; height:11rem; z-index:1; background:linear-gradient(180deg, rgba(10,27,42,.8) 0%, rgba(10,27,42,.45) 45%, rgba(10,27,42,0) 100%); } @media (max-width:959px){ .hero-buehne .hero-foto::after{ background:linear-gradient(180deg, rgba(10,27,42,.85) 0%, rgba(10,27,42,.2) 60%); } } .hero-objekt{ position:absolute; inset:0; display:grid; place-items:center; padding:clamp(1rem,3vw,2.5rem); } .hero-objekt svg{ width:min(100%,880px); height:auto; max-height:88%; display:block; filter:drop-shadow(0 30px 30px rgba(0,0,0,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); } @media (max-width:959px){ .hero-objekt svg{ max-height:88%; } } /* Streiflicht, das langsam über das Objekt wandert — die Szene lebt ohne Scrollen (REF-R §4) */ .hero-glanz{ animation:hero-glanz 13s ease-in-out infinite; transform-origin:50% 50%; } @keyframes hero-glanz{ 0%,100%{ opacity:.10 } 45%{ opacity:.30 } } .hero-drift{ animation:hero-drift 17s ease-in-out infinite; } @keyframes hero-drift{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } } .strom{ stroke-dasharray:26 190; animation:strom 5.5s linear infinite; } @keyframes strom{ from{ stroke-dashoffset:216 } to{ stroke-dashoffset:0 } } .strom--b{ animation-duration:7.5s; animation-delay:-2.2s; } .funke{ animation:funke 4.4s ease-in-out infinite; } @keyframes funke{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } } @media (prefers-reduced-motion:reduce){ /* dämpfen, nicht abschalten */ .hero-glanz{ animation-duration:34s; } .hero-drift{ animation:none; } .strom{ animation-duration:20s; } .strom--b{ animation-duration:26s; } .funke{ animation-duration:14s; } } /* Das plastische Schaustück der Startseite darf höher stehen als ein Linien-Objekt — es lebt von der Fläche, nicht von der Kontur. */ .scrolly--plastik .buehne-bild svg{ max-height:60svh; } @media (min-width:900px){ .scrolly--plastik .buehne-bild svg{ max-height:72svh; } } /* ── 12.6 Plastische Set-Pieces (REF-P) ─────────────────────────────────── */ .plastik{ overflow:visible; } .plastik .kante{ stroke:rgba(255,255,255,.42); stroke-width:1; fill:none; } .plastik .schatten{ mix-blend-mode:multiply; } .plastik .glanz{ mix-blend-mode:overlay; } .plastik .reflex{ mix-blend-mode:hard-light; } .plastik .marke-ton{ fill:var(--sandgold); } .plastik text{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; fill:#9FB2C2; } .plastik .label-gold{ fill:var(--sandgold); } @media (max-width:899px){ .plastik text{ display:none; } } /* ── 12.7 Stillstandsrechner ────────────────────────────────────────────── */ .rechner{ display:grid; gap:1.25rem; } @media (min-width:940px){ .rechner{ grid-template-columns:1.35fr 1fr; gap:2rem; align-items:start; } } .rechner-feld{ background:var(--weiss); border:var(--linie-karte); border-radius:var(--radius-lg); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--schatten); display:grid; gap:1.5rem; } .rf{ display:grid; gap:.55rem; } .rf > label,.rf > .rf-titel{ font-family:'Libre Franklin',sans-serif; font-weight:600; font-size:.88rem; color:var(--tiefblau); } .rf-hinweis{ font-size:.8rem; color:var(--grau); opacity:.85; margin:0; } .rf-zeile{ display:flex; align-items:center; gap:1rem; } .rf-zeile input[type=range]{ flex:1; accent-color:var(--sandgold); min-width:0; height:1.6rem; } .rf-wert{ min-width:6.5rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--tiefblau); font-size:1.02rem; } .rf-schalter{ display:flex; flex-wrap:wrap; gap:.5rem; } .rechner-ergebnis{ position:relative; overflow:hidden; border-radius:var(--radius-lg); background:var(--nacht); color:var(--auf-nacht-still); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--schatten-hoch); display:grid; gap:.35rem; align-content:start; } .rechner-ergebnis::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(110% 80% at 10% 0%, rgba(201,162,39,.16), transparent 60%); } .rechner-ergebnis > *{ position:relative; z-index:1; } .re-label{ font-family:'Libre Franklin',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--sandgold); margin:0; font-weight:600; } .re-zahl{ font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2rem,5vw,3.1rem); color:var(--auf-nacht); } .re-zeile{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--linie-nacht); font-size:.9rem; } .re-zeile b{ color:var(--auf-nacht); font-variant-numeric:tabular-nums; font-weight:600; } .re-fuss{ font-size:.78rem; line-height:1.5; opacity:.85; margin:.4rem 0 0; } /* ── 12.8 Ratgeber ──────────────────────────────────────────────────────── */ .rat-gitter{ display:grid; gap:1.25rem; } @media (min-width:720px){ .rat-gitter{ grid-template-columns:repeat(2,1fr); } } @media (min-width:1080px){ .rat-gitter{ grid-template-columns:repeat(3,1fr); } } .rat-karte{ position:relative; display:flex; flex-direction:column; gap:.6rem; height:100%; background:var(--weiss); border:var(--linie-karte); border-radius:var(--radius-lg); padding:1.4rem 1.4rem 1.5rem; box-shadow:var(--schatten); text-decoration:none; transition:transform var(--dauer-s) var(--ease), box-shadow var(--dauer-s) var(--ease); } .rat-karte:hover{ transform:translateY(-3px); box-shadow:var(--schatten-hoch); } .rat-karte .t-h3{ text-wrap:balance; } .rat-karte p{ margin:0; color:var(--grau); font-size:.94rem; } .rat-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; font-family:'Libre Franklin',sans-serif; font-weight:600; color:var(--sandgold); } .rat-karte .textlink{ margin-top:auto; padding-top:.9rem; } .artikel{ max-width:74ch; } .artikel h2{ font-family:'Libre Franklin',sans-serif; font-size:var(--text-h3); color:var(--tiefblau); margin:2.6rem 0 .7rem; font-weight:700; } .artikel h3{ font-family:'Libre Franklin',sans-serif; font-size:1.05rem; color:var(--tiefblau); margin:1.8rem 0 .5rem; font-weight:600; } .artikel p{ margin:0 0 1.05rem; color:var(--grau); } .artikel ul,.artikel ol{ margin:0 0 1.2rem; padding-left:1.3rem; color:var(--grau); display:grid; gap:.5rem; } .artikel li::marker{ color:var(--sandgold); } .artikel strong{ color:var(--tiefblau); } .artikel-vor{ border-left:3px solid var(--sandgold); padding:.2rem 0 .2rem 1.1rem; margin:0 0 2rem; font-size:1.05rem; color:var(--grau); } /* Mitmach-Modul im Ratgeber (BAU.md §10 B) — gehört IN den Artikel, EINE Box */ .mitmach{ background:var(--weiss); border:var(--linie-karte); border-top:3px solid var(--sandgold); border-radius:var(--radius-lg); padding:clamp(1.2rem,3vw,1.8rem); margin:2.2rem 0; box-shadow:var(--schatten); display:grid; gap:1rem; max-width:74ch; } .mitmach-kopf{ display:grid; gap:.3rem; } .mitmach-kopf .t-h4{ margin:0; } .mitmach-kopf p{ margin:0; font-size:.88rem; color:var(--grau); } .mm-liste{ display:grid; gap:.6rem; } .mm-frage{ display:flex; align-items:flex-start; gap:.75rem; padding:.75rem .9rem; border:1px solid rgba(17,60,99,.16); border-radius:var(--radius); background:transparent; color:var(--grau); font:inherit; font-size:.94rem; text-align:left; cursor:pointer; width:100%; transition:border-color var(--dauer-s) var(--ease), background var(--dauer-s) var(--ease); } .mm-frage::before{ content:""; width:16px; height:16px; border-radius:50%; flex:none; margin-top:.25em; border:1px solid var(--sandgold); background:transparent; transition:background var(--dauer-s) var(--ease), box-shadow var(--dauer-s) var(--ease); } .mm-frage[aria-pressed="true"]{ border-color:var(--sandgold); background:rgba(201,162,39,.09); } .mm-frage[aria-pressed="true"]::before{ background:var(--sandgold); box-shadow:inset 0 0 0 3px var(--weiss); } .mm-ergebnis{ border-top:var(--linie-karte); padding-top:1rem; display:grid; gap:.5rem; } .mm-ampel{ display:inline-flex; align-items:center; gap:.6rem; font-family:'Libre Franklin',sans-serif; font-weight:600; font-size:.95rem; color:var(--tiefblau); } .mm-ampel::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--linie); flex:none; } .mm-ergebnis[data-stufe="gruen"] .mm-ampel::before{ background:#2E7D5B; } .mm-ergebnis[data-stufe="gelb"] .mm-ampel::before{ background:var(--sandgold); } .mm-ergebnis[data-stufe="rot"] .mm-ampel::before{ background:#A5251F; } .mm-ergebnis p{ margin:0; font-size:.94rem; color:var(--grau); } .mm-balken{ height:8px; border-radius:var(--radius-pille); background:rgba(17,60,99,.12); overflow:hidden; } .mm-balken span{ display:block; height:100%; width:0; border-radius:var(--radius-pille); background:var(--sandgold); transition:width var(--dauer-m) var(--ease); } /* Schieberegler-Modul (Vergleich) im Ratgeber */ .mm-schieber{ display:grid; gap:.5rem; } .mm-schieber input[type=range]{ width:100%; accent-color:var(--sandgold); height:1.6rem; } .mm-schieber output{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--tiefblau); } /* ── 12.9 Sprungmarken-Band (Artikel-Inhaltsverzeichnis) ────────────────── */ .sprungband{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; } .sprungband a{ padding:.4rem .9rem; border-radius:var(--radius-pille); border:1px solid rgba(17,60,99,.2); font-size:.84rem; text-decoration:none; color:var(--tiefblau); } .sprungband a:hover{ border-color:var(--sandgold); background:rgba(201,162,39,.1); } /* ── 12.10 AXONOMETRISCHER RISS ───────────────────────────────────────────── Die Strichgrafik, die Marcus gelobt hat — nur in echter Axonometrie (30°). Linienhierarchie ist hier ALLES: gleich dicke Linien lesen sich als Clipart, abgestufte lesen sich als Zeichnung. */ .riss{ overflow:visible; } .riss path{ fill:none; vector-effect:non-scaling-stroke; } .riss-koerper{ stroke:#B8D0E4; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; } .riss-innen{ stroke:#6E93B4; stroke-width:1.2; stroke-linejoin:round; stroke-linecap:round; } .riss-verdeckt path{ stroke:#41627F; stroke-width:1; stroke-dasharray:7 5; } .riss-hilf path,.riss-hilf{ stroke:#33526E; stroke-width:.7; } .riss-schraffur path{ stroke:#4E7191; stroke-width:.7; } .riss-mass path{ stroke:var(--sandgold); stroke-width:.8; opacity:.85; } .riss-mass .pfeil{ fill:var(--sandgold); stroke:none; opacity:.85; } .riss-gold{ stroke:var(--sandgold); stroke-width:1.4; } .riss-gold-f{ fill:var(--sandgold); stroke:none; } .riss-strom{ stroke:var(--sandgold); stroke-width:2.2; stroke-linecap:round; opacity:.9; } .riss-ader{ stroke:#5B7E9C; stroke-width:2.4; stroke-linecap:round; } .riss-fahne{ stroke:var(--sandgold); stroke-width:.8; opacity:.7; } .riss-zahl,.riss-label{ font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; fill:#9FB2C2; stroke:none; } .riss-zahl{ fill:var(--sandgold); font-size:13px; letter-spacing:.1em; } @media (max-width:899px){ .riss-zahl,.riss-label{ display:none; } .riss-hilf{ display:none; } } /* ═══════════════════════════════════════════════════════════════════════════ 13 · „DAS BLATT" — Design-Neuausrichtung 05.08.2026 ─────────────────────────────────────────────────────────────────────────── Entscheidung: Look D. Der axonometrische Riss ist nicht nur das Hero-Objekt, er ist die Sprache der ganzen Seite. Die Website IST das Zeichnungsblatt, auf dem der Riss liegt: Raster, Linienhierarchie, Bemaßung, Schriftfeld, Positionsnummern. Alles andere ordnet sich unter. Nacht = Bildschirmfassung (helle Linien auf dunklem Blatt) — Standard. Hell = Druckfassung (dunkle Linien auf Papier) — eigenständig, nicht invertiert. Diese Ebene steht bewusst am Dateiende: sie belegt die Variablen der Kapitel 1–12 neu, statt sie zu duplizieren. Alle bestehenden Regeln laufen dadurch mit. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* Schriften */ --display: 'Anybody','Libre Franklin',system-ui,sans-serif; --mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace; /* Typo-Skala — der Hauptgrund, warum die Seite vorher „brav" wirkte: der Deckel lag bei 3,1 rem. Kramer fährt bis 7,2 rem. */ --text-h1: clamp(2.6rem, 6.4vw, 6.2rem); --text-h2: clamp(1.9rem, 4.2vw, 3.4rem); --text-h3: clamp(1.15rem, 1.9vw, 1.5rem); --text-h4: clamp(1rem, 1.3vw, 1.15rem); /* Blatt Nacht */ --papier: #0A1826; /* Blattgrund */ --weiss: #0E2233; /* Blattfläche */ --nacht: #061119; /* tiefes Feld */ --nacht-tief:#040C13; --grau: #8FA6B8; /* Fließtext */ --tiefblau:#E9F2F9; /* Überschrift */ --linie: #4E7191; --linie-karte: 1px solid rgba(143,182,214,.20); --auf-nacht: #E9F2F9; --auf-nacht-still: #8FA6B8; --linie-nacht: rgba(143,182,214,.22); --knopf-flaeche:#E9F2F9; --knopf-tinte:#08131D; --kontakt-grund:#081420; --kontakt-karte:#0E2233; --raster: rgba(143,182,214,.055); --raster-gross: rgba(143,182,214,.10); --schatten: none; --schatten-hoch: 0 24px 60px -34px rgba(0,0,0,.85); color-scheme: dark; } /* Druckfassung — eigenständig gestaltet: echtes Zeichenpapier, dunkle Linien. */ :root[data-theme="hell"]{ --papier:#EFEBE1; --weiss:#F8F6F1; --nacht:#E4DFD3; --nacht-tief:#0C1C29; --grau:#4A5C6B; --tiefblau:#0D2434; --linie:#7A93A6; --linie-karte:1px solid rgba(13,36,52,.18); --auf-nacht:#F3F1EC; --auf-nacht-still:#B9C6D0; --linie-nacht:rgba(243,241,236,.28); --knopf-flaeche:#0D2434; --knopf-tinte:#F8F6F1; --kontakt-grund:#E4DFD3; --kontakt-karte:#0D2434; --raster: rgba(13,36,52,.06); --raster-gross: rgba(13,36,52,.11); --schatten-hoch: 0 24px 60px -38px rgba(13,36,52,.45); color-scheme: light; } /* Papier ist die WAHL, nicht der Standard — ohne Schalter gilt die Nachtfassung. (Die drei prefers-color-scheme:light-Zweige sind am 05.08. bewusst entfallen.) */ /* ── 13.1 Der Blattgrund ────────────────────────────────────────────────── */ html body{ background-color:var(--papier); background-image: linear-gradient(var(--raster-gross) 1px, transparent 1px), linear-gradient(90deg, var(--raster-gross) 1px, transparent 1px), linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px); background-size:190px 190px, 190px 190px, 38px 38px, 38px 38px; background-position:0 0; } /* Das Netz-Einliniendiagramm hat auf dem Raster nichts mehr zu suchen. */ .netz{ display:none; } /* ── 13.2 Schrift: Display · Technik · Text ─────────────────────────────── */ .t-h1,.t-h2{ font-family:var(--display); font-weight:800; font-stretch:112%; line-height:.94; letter-spacing:-.022em; } .t-h1{ line-height:.9; } .t-h3,.t-h4{ font-family:var(--display); font-weight:700; font-stretch:106%; letter-spacing:-.01em; } .kennwert,.re-zahl,.scrolly-wert b,.mm-schieber output,.rf-wert{ font-family:var(--display); font-weight:900; font-stretch:118%; letter-spacing:-.03em; } .kennwert{ font-size:clamp(2.6rem,5.4vw,4.6rem); line-height:.84; } /* Technische Beschriftung: alles, was Meta ist, wird Mono */ .augenbraue,.zeile-nr,.schritt-nr,.rat-meta,.re-label,.sek-nr,.fuss h2, .assi-titel,.mm-liste .mm-frage::after{ font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; } .augenbraue{ font-size:.68rem; gap:.85rem; } .augenbraue::before{ width:2.6rem; height:1px; border-radius:0; } .fuss h2{ font-size:.66rem; letter-spacing:.22em; } .zeile-nr,.schritt-nr{ font-size:.66rem; } .rat-meta{ font-size:.64rem; letter-spacing:.18em; } /* ── 13.3 Sektion = Blattfeld mit Positionsnummer ───────────────────────── */ .sek{ position:relative; } .sek--weiss{ background:color-mix(in srgb, var(--weiss) 92%, transparent); border-block:1px solid var(--linie-karte, rgba(143,182,214,.2)); border-color:rgba(143,182,214,.16); } :root[data-theme="hell"] .sek--weiss{ border-color:rgba(13,36,52,.14); } .sek-nr{ font-size:.66rem; letter-spacing:.18em; color:var(--linie); } .sek-nr::before{ width:9px; height:9px; border-radius:0; transform:rotate(45deg); border-color:var(--sandgold); } /* ── 13.4 Bemaßungs-Trennlinie statt Kartenrahmen ───────────────────────── */ .mass-linie{ position:relative; height:1px; background:var(--linie); opacity:.4; margin:0; } .mass-linie::before,.mass-linie::after{ content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--linie); } .mass-linie::before{ left:0; } .mass-linie::after{ right:0; } /* ── 13.5 Karten wie Positionen auf dem Blatt (Eckwinkel statt Schatten) ── */ .karte,.rat-karte,.rechner-feld,.mitmach,.k-card,.assi{ background:color-mix(in srgb, var(--weiss) 76%, transparent); border:1px solid rgba(143,182,214,.2); box-shadow:none; border-radius:var(--radius); } :root[data-theme="hell"] .karte,:root[data-theme="hell"] .rat-karte, :root[data-theme="hell"] .rechner-feld,:root[data-theme="hell"] .mitmach, :root[data-theme="hell"] .k-card,:root[data-theme="hell"] .assi{ border-color:rgba(13,36,52,.16); } .karte::before{ display:none; } .karte{ overflow:visible; } .karte::after{ content:""; position:absolute; left:-1px; top:-1px; width:14px; height:14px; border-left:2px solid var(--sandgold); border-top:2px solid var(--sandgold); } .karte:hover,.rat-karte:hover{ transform:none; box-shadow:none; border-color:color-mix(in srgb, var(--sandgold) 55%, transparent); } .karte-koerper{ padding:1.5rem 1.5rem 1.6rem; } /* ── 13.6 Bilder wie aufgelegte Fotos auf dem Blatt ─────────────────────── */ .bild{ border-radius:var(--radius-sm); box-shadow:none; outline:1px solid rgba(143,182,214,.22); outline-offset:6px; } .bild img{ filter:saturate(.72) contrast(1.06); } /* ── 13.7 Kennband = Maßtabelle ─────────────────────────────────────────── */ .kennband{ background:transparent; border:1px solid rgba(143,182,214,.2); border-radius:var(--radius); box-shadow:none; transform:none; margin-top:-1px; } .kennfeld{ border-right:1px solid rgba(143,182,214,.16); border-bottom:1px solid rgba(143,182,214,.16); } .kennlabel{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; line-height:1.7; } .kennlabel::before{ display:none; } /* ── 13.8 Fußzeile = Schriftfeld der Zeichnung ──────────────────────────── */ .fuss{ background:var(--nacht-tief); border-radius:0; margin-top:4rem; border-top:2px solid var(--sandgold); box-shadow:none; } .fuss::before{ display:none; } .fuss-oben{ border-bottom:1px solid var(--linie-nacht); } .fuss-schluss{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; } .fuss-demo{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; line-height:1.9; } /* ── 13.9 Hero-Blatt (statt Foto) ───────────────────────────────────────── */ .hero{ background:transparent; } .hero--raum{ background:transparent; } .hero-blatt{ position:absolute; inset:0; background:radial-gradient(56% 52% at 62% 46%, color-mix(in srgb, var(--linie) 22%, transparent), transparent 72%); } .hero-buehne{ min-height:52vw; } .hero--raum .hero-buehne{ min-height:64vw; } @media (min-width:960px){ .hero-buehne,.hero--raum .hero-buehne{ min-height:100%; } } .hero-objekt--riss svg{ width:auto; max-width:100%; max-height:78vh; filter:none; } .hero .t-h1{ color:var(--tiefblau); } .hero .lead,.hero-text .lead{ color:var(--grau); } .kopf{ color:var(--tiefblau); } .kopf.scrolled{ background:color-mix(in srgb, var(--papier) 90%, transparent); } /* Schriftfeld unter dem Hero — Blatt, Maßstab, Gewerk, Stand */ .stempel{ display:flex; flex-wrap:wrap; gap:2.2rem; padding:1.1rem 0 0; font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--linie); } .stempel b{ color:var(--grau); font-weight:500; } /* ── 13.10 Knöpfe: technisch, nicht weich ───────────────────────────────── */ .knopf{ border-radius:var(--radius-sm); font-family:var(--mono); font-weight:500; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; padding:.95rem 1.5rem; box-shadow:none; } .knopf:hover{ transform:none; box-shadow:none; } .knopf::before{ width:6px; height:6px; border-radius:0; transform:rotate(45deg); } .knopf:hover::before{ transform:rotate(45deg) translate(2px,-2px); } .textlink{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; } .kopf .cta{ border-radius:var(--radius-sm); font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; } .chip,.sprungband a,.thema{ border-radius:var(--radius-sm); } .kopf nav a,.kopf .nav-knopf{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; } /* ── 13.11 Set-Piece-Bühnen auf dem Blatt ───────────────────────────────── */ .scrolly{ background:transparent; } .scrolly .buehne-kopf .t-h2{ color:var(--tiefblau); } .scrolly-text p{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; line-height:1.8; text-transform:none; color:var(--grau); } .scrolly-text p::before{ border-radius:0; transform:rotate(45deg); } .scrolly-wert small{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; } .zeichnung{ stroke:var(--linie); } .zeichnung .beschriftung{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; } /* ── 13.12 Nachjustierung nach dem ersten Blick ─────────────────────────── */ :root{ --text-h1: clamp(2.4rem, 5vw, 4.9rem); } /* Der Riss braucht die volle Spaltenbreite, sonst verkümmert er zur Vignette. */ .hero-objekt{ padding:clamp(1rem,2vw,2rem); } .hero-objekt--riss svg{ width:100%; height:auto; max-width:none; max-height:74vh; } @media (max-width:959px){ .hero-objekt--riss svg{ max-height:56vh; } } /* Auf dem hellen Blatt darf nichts mehr die „auf dunkel"-Tinte erben. */ .hero .textlink,.scrolly .textlink{ color:var(--tiefblau); } .hero .knopf,.sek--nacht .knopf{ background:var(--knopf-flaeche); color:var(--knopf-tinte); } .hero .knopf:hover,.sek--nacht .knopf:hover{ background:var(--linie); color:var(--weiss); } .sek--nacht{ background:var(--nacht); color:var(--grau); } .sek--nacht .t-h2,.sek--nacht .t-h3,.sek--nacht .t-h4{ color:var(--tiefblau); } .sek--nacht .fliess,.sek--nacht .lead,.sek--nacht .zeile-text,.sek--nacht .punkte li, .sek--nacht .schritt p{ color:var(--grau); } .sek--nacht .zeile-titel{ color:var(--tiefblau); } .sek--nacht .zeile,.sek--nacht .zeilen{ border-color:var(--linie-karte); } /* Kennband: Zahlen dürfen nicht aus ihrem Feld laufen. */ .kennwert{ font-size:clamp(1.9rem,3.2vw,3rem); overflow-wrap:anywhere; } .kennfeld{ padding:1.4rem clamp(1rem,2vw,1.6rem); } /* Fließtext bleibt Inter — nur Meta ist Mono, sonst wird es unlesbar. */ .fliess,.lead,.faq-antwort,.artikel p,.artikel li{ font-family:'Inter',system-ui,sans-serif; } /* ── 13.13 Der Riss folgt dem Blatt ───────────────────────────────────────── Auf dem dunklen Blatt sind die Linien hell, auf dem Papier sind sie Tinte. Ohne das verschwindet die Zeichnung in der Druckfassung. */ :root{ --riss-1:#C6DCEC; --riss-2:#7FA3C1; --riss-3:#496B88; --riss-4:#33526E; --riss-5:#5A809E; } :root[data-theme="hell"]{ --riss-1:#13324A; --riss-2:#3C6382; --riss-3:#7D9AB0; --riss-4:#A9BDCB; --riss-5:#7891A4; } .riss-koerper{ stroke:var(--riss-1); } .riss-innen{ stroke:var(--riss-2); } .riss-verdeckt path{ stroke:var(--riss-3); } .riss-hilf path,.riss-hilf{ stroke:var(--riss-4); } .riss-schraffur path{ stroke:var(--riss-5); } .riss-ader{ stroke:var(--riss-2); } .riss-zahl,.riss-label{ fill:var(--riss-2); } .riss-zahl{ fill:var(--sandgold); } :root[data-theme="hell"] .riss-zahl{ fill:#9A7A12; } :root[data-theme="hell"] .riss-mass path{ stroke:#9A7A12; } :root[data-theme="hell"] .riss-mass .pfeil{ fill:#9A7A12; } /* Registerdaten dürfen nicht umbrechen — sie sind eine Kennung, kein Satz. */ .kennwert{ font-size:clamp(1.6rem,2.6vw,2.5rem); overflow-wrap:normal; white-space:nowrap; max-width:100%; } @media (max-width:520px){ .kennwert{ font-size:1.5rem; } } /* ═══════════════════════════════════════════════════════════════════════════ 14 · NACHBESSERUNG 05.08.2026 (Marcus, drei Punkte am Bild) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 14.1 Kopfzeile: Schrift lief über die Kante Blatt|Foto ───────────────── Die Leiste war unscrolled durchsichtig. Auf Unterseiten beginnt rechts das dunkle Hero-Foto — genau dort standen „Handel" und „Ratgeber" dunkel auf dunkel und verschwanden. Die Leiste bekommt deshalb IMMER ihren eigenen Blattgrund, nicht erst beim Scrollen. */ .kopf{ background:color-mix(in srgb, var(--papier) 90%, transparent); -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px); color:var(--tiefblau); border-bottom:1px solid color-mix(in srgb, var(--linie) 30%, transparent); } .kopf.scrolled{ background:color-mix(in srgb, var(--papier) 96%, transparent); border-bottom-color:color-mix(in srgb, var(--linie) 45%, transparent); } /* Damit die Leiste nicht auf dem Hero klebt, beginnt der Hero-Inhalt darunter. */ .hero-text{ padding-top:calc(var(--kopf-h) + 2.4rem); } @media (min-width:960px){ .hero-text{ padding-block:calc(var(--kopf-h) + 2rem) 3.5rem; } } .hero-buehne .hero-foto::before{ display:none; } /* Schleier unnötig, Leiste deckt selbst */ /* ── 14.2 Signalfarbe für alles, was sich bewegt ──────────────────────────── Gold sitzt auf dem beigen Blatt zu nah am Grund — bewegte Elemente gingen darin unter. Bewegung bekommt deshalb eine eigene Farbe, die sich abhebt: Gold bleibt die ruhende Markierung, --puls ist die laufende. */ :root{ --puls:#3FE0FF; --puls-still:rgba(63,224,255,.22); } :root[data-theme="hell"]{ --puls:#0090B8; --puls-still:rgba(0,144,184,.18); } /* Stromwege und Funken im Riss und in den Set-Pieces */ .riss-strom,.strom{ stroke:var(--puls); } .riss-gold-f.funke,.funke{ fill:var(--puls); } .zeichnung .gold{ stroke:var(--puls); } .zeichnung .gold-f{ fill:var(--puls); } /* Zahlen, die hochlaufen */ .kennwert[data-zaehl],.scrolly-wert b,[data-zahl]{ color:var(--puls); } /* Balken und Fortschritt */ .mm-balken span{ background:var(--puls); } .fortschritt{ background:var(--puls); } .vorlader-bar span{ background:var(--puls); } /* Die Positionsmarke am linken Rand füllt sich beim Vorbeiscrollen */ .sek-nr::before{ border-color:var(--puls); } .sek-nr.aktiv::before{ background:var(--puls); box-shadow:0 0 0 4px var(--puls-still); } /* Der Punkt im Knopf wandert beim Hover — also Signalfarbe */ .knopf::before{ background:var(--puls); } .kontakt-karte .knopf::before{ background:#08131D; } /* ── 14.3 „Leistungen" war nicht anständig anklickbar ──────────────────────── Zweiter Teil des Fehlers: zwischen Knopf und Liste lagen .35rem Luft. Die gehören zu KEINEM der beiden — der Zeiger verlässt auf dem Weg nach unten `.aus`, mouseleave feuert, die Liste ist weg, bevor man den Link erreicht. Die Lücke wird deshalb überbrückt (unsichtbar, gehört zur Liste). */ .kopf .aus{ position:relative; } .kopf .aus-liste::before{ content:""; position:absolute; left:0; right:0; top:-.55rem; height:.55rem; background:transparent; } /* Der Knopf selbst bekommt eine ehrliche Trefferfläche (44 px, auch mobil). */ .kopf .nav-knopf{ min-height:44px; } .kopf .aus-liste a{ min-height:44px; display:flex; align-items:center; } /* Sichtbar machen, dass der Ausklapper offen ist. */ .kopf .aus[data-offen="true"] .nav-knopf{ color:var(--puls); } /* ── 14.4 Tippflächen nach WCAG 2.5.5 (verify: tap-ziel) ──────────────────── Gemessen mit dem v2-verify: Textlinks waren 19 px hoch, die Wortmarke 33 px. */ .textlink{ min-height:44px; } .marke{ min-height:44px; } .fuss-liste a,.fuss-schluss nav a{ display:inline-flex; align-items:center; min-height:44px; } /* ── 14.5 Schrift im Schaustück und in den Beat-Texten ────────────────────── Mono ist die Sprache der Beschriftung, nicht die des Fließtexts (BAU §3.5: Eyebrow → H2 → Lead → Text). Beat-Erklärungen sind Text, keine Marken. */ .riss text{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; fill:var(--riss-2); stroke:none; } .riss .label-gold{ fill:var(--sandgold); } .scrolly-text p{ font-family:'Inter',system-ui,sans-serif; font-size:.9rem; letter-spacing:0; line-height:1.65; } .scrolly-wert small{ color:var(--grau); opacity:1; } .scrolly-wert{ border-color:var(--linie-karte); } @media (max-width:899px){ .riss text{ display:none; } } /* ── 14.6 Bilder als aufgezogene Abzüge (BAU §3.4 „Bilder kreativ rahmen") ── Auf einem Zeichnungsblatt wäre ein weicher Bogen fremd. Das Äquivalent sind Passermarken: das Foto liegt mit Rähmchen und vier Eckwinkeln auf dem Blatt. */ .bild{ position:relative; } .bild::before,.bild::after{ content:""; position:absolute; width:15px; height:15px; pointer-events:none; z-index:2; } .bild::before{ left:-7px; top:-7px; border-left:2px solid var(--sandgold); border-top:2px solid var(--sandgold); } .bild::after{ right:-7px; bottom:-7px; border-right:2px solid var(--sandgold); border-bottom:2px solid var(--sandgold); } .karte .bild::before,.karte .bild::after{ display:none; } /* in Karten wäre es Unruhe */ /* ── 14.7 Vor-Footer-Kante (BAU §7.1) ─────────────────────────────────────── Der Standard verlangt: kein harter Farbbruch an der Footer-Kante. Marcus verlangt aber, dass sich Kontakt NICHT in der Fußzeile auflöst — seine Vorgabe gilt. Kompromiss: beide bleiben unterscheidbar, die Kante wird überführt statt gestoßen — ein Verlauf vom Kontaktgrund in die Fußzeilenfarbe. */ .sek--kontakt{ position:relative; } .sek--kontakt::after{ content:""; position:absolute; left:0; right:0; bottom:-4rem; height:4rem; background:linear-gradient(180deg, var(--kontakt-grund), var(--nacht-tief)); pointer-events:none; } .fuss{ margin-top:4rem; } /* ── 14.8 Unterseiten-Schaustücke auf dieselbe Tinte wie der Riss ─────────── `.zeichnung` hing an --linie und war auf dem Papier zu blass — die Set-Pieces der Unterseiten sprechen jetzt dieselbe Linienhierarchie wie der Hero-Riss. */ .zeichnung{ stroke:var(--riss-2); stroke-width:1.6; } .zeichnung .gold{ stroke:var(--puls); } .zeichnung .flaeche{ fill:var(--papier); } .zeichnung .beschriftung{ fill:var(--riss-2); } .zeichnung .beschriftung-still{ fill:var(--riss-3); } .zeichnung [stroke-width="2"],.zeichnung [stroke-width="2.5"]{ stroke:var(--riss-1); } @media (max-width:899px){ .zeichnung{ stroke-width:3; } } /* ── 15 · Nachtfassung als Standard, Foto zurück in den Hero ──────────────── Der beige Blattgrund war als Grundeindruck zu flach und ohne Fotografie. Die Seite steht jetzt auf der Nachtfassung; Papier bleibt über den Schalter. Das Hero-Foto kommt als Atmosphäre zurück — leise hinter dem Riss, damit das Objekt weiter allein im Licht steht (REF-R §5), aber der Raum wieder da ist. */ .hero-foto--leise{ position:absolute; inset:0; overflow:clip; z-index:0; } .hero-foto--leise img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.45) contrast(1.1) brightness(.62); } .hero-foto--leise::after{ content:""; position:absolute; inset:0; background: radial-gradient(62% 58% at 66% 48%, rgba(10,24,38,.1) 4%, rgba(6,17,25,.88) 74%), linear-gradient(100deg, var(--papier) 0%, rgba(10,24,38,.86) 34%, rgba(10,24,38,.5) 100%); } .hero--raum .hero-blatt{ z-index:1; } .hero-objekt{ z-index:2; } .hero-text{ position:relative; z-index:3; } /* Auf dem Papier tritt das Foto fast ganz zurück — sonst kippt die Druckfassung. */ :root[data-theme="hell"] .hero-foto--leise img{ filter:grayscale(1) contrast(1.2) brightness(1.06); opacity:.3; } :root[data-theme="hell"] .hero-foto--leise::after{ background:linear-gradient(100deg, var(--papier) 0%, rgba(239,235,225,.86) 40%, rgba(239,235,225,.6) 100%); } /* ── 16 · Hero: das Bild aus dem ERSTEN Entwurf zurück, Riss darüber ──────── Marcus: „das alte bild oben war besser von dem ersten entwurf, da nur die neue hero animation rein mit diesem svg". Also exakt die Foto-Behandlung des Erstbaus (Foto rechts klar sichtbar, Verlauf 100° nach links in die Textspalte) — und der Riss liegt jetzt darüber statt eines zweiten Bildmotivs. */ .hero--raum .hero-blatt{ display:none; } /* Raster-Schleier raus */ .hero-foto--leise img{ filter:none; } .hero-foto--leise::after{ background:linear-gradient(100deg, rgba(10,27,42,.92) 0%, rgba(10,27,42,.35) 34%, rgba(10,27,42,.12) 100%); } /* Schleier unter der Kopfzeile — sonst steht helle Navigation auf hellem Foto. */ .hero-foto--leise::before{ content:""; position:absolute; inset:0 0 auto 0; height:11rem; z-index:1; background:linear-gradient(180deg, rgba(10,27,42,.8) 0%, rgba(10,27,42,.45) 45%, rgba(10,27,42,0) 100%); } @media (max-width:959px){ .hero-foto--leise::after{ background:linear-gradient(180deg, rgba(10,27,42,.85) 0%, rgba(10,27,42,.2) 60%); } } /* Der Riss steht jetzt auf einem Foto, nicht auf einem Blatt: helle Tinte statt dunkler, dazu ein weicher Lichtsee, damit die Linien nicht im Bildrauschen verschwinden. Gilt NUR im Hero — die Set-Pieces bleiben Zeichnung auf Blatt. */ .hero--raum .hero-objekt{ --riss-1:#F2F8FC; --riss-2:#BBD5E8; --riss-3:#7C9DB6; --riss-4:#5A7C96; --riss-5:#8FB0C8; } .hero--raum .hero-objekt::before{ content:""; position:absolute; inset:6% 2% 6% 6%; background:radial-gradient(closest-side, rgba(6,17,25,.72), rgba(6,17,25,.42) 58%, transparent 78%); pointer-events:none; } .hero--raum .hero-objekt svg{ position:relative; } .hero--raum .riss-zahl{ fill:#FFDD6B; } .hero--raum .riss-mass path{ stroke:#FFDD6B; opacity:.9; } .hero--raum .riss-mass .pfeil{ fill:#FFDD6B; } .hero--raum .riss-label{ fill:#CFE2EF; } .hero--raum .riss-strom{ stroke:var(--puls); } /* Auf der Druckfassung bleibt das Foto zurückhaltend, sonst frisst es die Tinte. */ :root[data-theme="hell"] .hero-foto--leise img{ filter:grayscale(1) contrast(1.15); opacity:.34; } :root[data-theme="hell"] .hero-foto--leise::after{ background:linear-gradient(100deg, var(--papier) 0%, rgba(239,235,225,.8) 40%, rgba(239,235,225,.42) 100%); } :root[data-theme="hell"] .hero--raum .hero-objekt{ --riss-1:#13324A; --riss-2:#3C6382; --riss-3:#7D9AB0; --riss-4:#A9BDCB; --riss-5:#7891A4; } :root[data-theme="hell"] .hero--raum .hero-objekt::before{ display:none; } :root[data-theme="hell"] .hero--raum .riss-zahl{ fill:#9A7A12; } :root[data-theme="hell"] .hero--raum .riss-label{ fill:#3C6382; } /* ═══════════════════════════════════════════════════════════════════════════ 17 · NACHBESSERUNG 06.08.2026 (Marcus, sieben Punkte) 1 Hero-Fotos „fliegen rum" 2 Animationsflächen brauchen eigenen Grund 3 mehr Farbe: Blau im Hellmodus, Sand im Dunkelmodus 4 Schaustück Startseite 5 Leistungen-Ausklapper unerreichbar 6 Gewerke-Schaustücke in 3D 7 Fußzeile ═══════════════════════════════════════════════════════════════════════════ */ /* ── 17.1 Hero-Raster: die Fotospalte wurde vom Wort erdrückt ─────────────── `45fr 55fr` heißt in CSS `minmax(auto,45fr)`. Ein Wort wie „Elektroinstallation" hat bei 6,4 vw eine Mindestbreite von ~800 px — die Textspalte riss sich damit 1030 von 1440 px, das Foto blieb als 410-px-Streifen mit angeschnittenem Motiv übrig (genau das „fliegt irgendwo rum"). Zwei Sperren: harte 0-Untergrenze im Raster UND eine Hero-Überschrift, die in ihre Spalte passt. */ .hero-raster{ grid-template-columns:minmax(0,1fr); } @media (min-width:960px){ .hero-raster{ grid-template-columns:minmax(0,50fr) minmax(0,50fr); } .hero--unter .hero-raster{ grid-template-columns:minmax(0,53fr) minmax(0,47fr); } .hero-text{ padding-right:clamp(1.6rem,3vw,2.6rem); } } /* Die Überschrift muss in ihre Spalte passen, sonst zerlegt der Silbentrenner „Elektroinstallation" in drei Zeilen. Trennung bleibt als Netz darunter. */ .hero .t-h1{ font-size:clamp(2.2rem,3.5vw,3.5rem); overflow-wrap:break-word; hyphens:auto; } .hero--unter .t-h1{ font-size:clamp(1.95rem,3.1vw,3rem); } .hero-text,.hero-bild,.hero-buehne{ min-width:0; } /* Das Motiv sitzt jetzt in der oberen Bildhälfte — dort steht bei allen acht Fotos das Geschehen, nicht in der Mitte. */ .hero-bild img{ object-position:50% 38%; } /* ── 17.2 + 17.3 „Werkbank": eigener Grund für alles, was sich bewegt ─────── Marcus: Animationsflächen sollen sich absetzen UND die Seite ist zu eintönig. Beides fällt zusammen — die Schaustück-Bänder bekommen eine eigene Farbwelt: Nachtfassung = warmes Sand/Graphit (das „Beige im Darkmode"), Druckfassung = tiefes Blau (das „Blau im hellen Modus"). Dadurch hat jede Seite drei klar getrennte Gründe: Blatt · Werkbank · Kontakt. */ :root{ --werk-grund:#161208; --werk-flaeche:#1E1810; --werk-tinte:#F4EAD3; --werk-still:#C3B08A; --werk-linie:rgba(201,162,39,.32); --werk-akzent:#E8C766; } :root[data-theme="hell"]{ --werk-grund:#0E3350; --werk-flaeche:#154261; --werk-tinte:#EDF5FB; --werk-still:#A8C7DE; --werk-linie:rgba(126,183,222,.34); --werk-akzent:#7EC8F2; } .scrolly{ background:var(--werk-grund); color:var(--werk-still); position:relative; isolation:isolate; } /* Sichtbare Naht oben und unten — der Wechsel soll gewollt aussehen, nicht zufällig. */ .scrolly::before,.scrolly::after{ content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--werk-linie) 18%, var(--werk-linie) 82%, transparent); z-index:2; pointer-events:none; } .scrolly::before{ top:0; } .scrolly::after{ bottom:0; } /* Eigenes, gröberes Raster: die Werkbank ist nicht dasselbe Blatt. */ .scrolly .scrolly-buehne::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image: linear-gradient(var(--werk-linie) 1px, transparent 1px), linear-gradient(90deg, var(--werk-linie) 1px, transparent 1px); background-size:76px 76px; opacity:.22; } .scrolly .buehne-kopf .t-h2{ color:var(--werk-tinte); } .scrolly .buehne-kopf .fliess,.scrolly .scrolly-text p{ color:var(--werk-still); } .scrolly .augenbraue{ color:var(--werk-akzent); } .scrolly .scrolly-text p::before{ background:var(--werk-akzent); } .scrolly .scrolly-wert{ border-bottom-color:var(--werk-linie); } .scrolly .scrolly-wert b{ color:var(--werk-akzent); } .scrolly .scrolly-wert small{ color:var(--werk-still); } .scrolly .textlink{ color:var(--werk-tinte); } /* Die Zeichnung steht auf der Werkbank, nicht auf dem Blatt — eigene Tinte. */ .scrolly{ --riss-1:#F6EEDC; --riss-2:#CDB68C; --riss-3:#8E7C57; --riss-4:#6B5C3F; --riss-5:#A08A5E; } :root[data-theme="hell"] .scrolly{ --riss-1:#F2F8FD; --riss-2:#BDD9EE; --riss-3:#7BA3C2; --riss-4:#5A83A4; --riss-5:#8FB4CE; } .scrolly .zeichnung .flaeche{ fill:var(--werk-grund); } .scrolly .zeichnung .gold,.scrolly .riss-mass path{ stroke:var(--werk-akzent); } .scrolly .zeichnung .gold-f,.scrolly .riss-mass .pfeil,.scrolly .riss-gold-f{ fill:var(--werk-akzent); } .scrolly .riss-zahl{ fill:var(--werk-akzent); } .scrolly .riss-label,.scrolly .zeichnung .beschriftung{ fill:var(--riss-2); } .scrolly .zeichnung .beschriftung-still{ fill:var(--riss-3); } .scrolly .riss-strom,.scrolly .strom{ stroke:var(--puls); } /* Der Rechner und die Mitmach-Kästen rechnen live — also auch Werkbank. */ .rechner-buehne,.mitmach{ position:relative; } /* ── 17.4 Farbwechsel auch außerhalb der Werkbank ─────────────────────────── Damit nicht nur die Schaustücke bunt sind: das Kontaktband nimmt in der Nachtfassung den Sandton auf, in der Druckfassung das Blau. */ :root{ --kontakt-grund:#131009; --kontakt-karte:#1C1710; } :root[data-theme="hell"]{ --kontakt-grund:#DCE7F1; --kontakt-karte:#0E3350; } .sek--kontakt .t-h2{ color:var(--werk-tinte); } :root[data-theme="hell"] .sek--kontakt .t-h2{ color:var(--tiefblau); } .sek--kontakt .augenbraue{ color:var(--werk-akzent); } .sek--kontakt::after{ background:linear-gradient(180deg, var(--kontakt-grund), var(--nacht-tief)); } /* Die weiße Sektionsfläche bekommt in der Druckfassung einen Blaustich, in der Nachtfassung bleibt sie das kühle Blattfeld — der Kontrast zur warmen Werkbank ist genau die gewünschte Abwechslung. */ :root[data-theme="hell"]{ --weiss:#EAF1F7; } /* ── 17.5 Ausklapper „Leistungen": die Brücke lag unter overflow:hidden ───── Der Steg zwischen Knopf und Liste war als `.aus-liste::before` gebaut — und `.aus-liste` hat `overflow:hidden`. Der Steg wurde also weggeschnitten, die Lücke blieb, mouseleave feuerte weiter. Der Steg gehört an `.aus` selbst, dazu eine kurze Schließverzögerung im JS. */ .kopf .aus::after{ content:""; position:absolute; left:0; right:-1rem; top:100%; height:.8rem; display:none; } .kopf .aus[data-offen="true"]::after{ display:block; } /* nur offen — sonst öffnet der Steg selbst */ .kopf .aus-liste::before{ display:none; } .kopf .aus-liste{ overflow:visible; } /* ── 17.6 Fußzeile: einheitliche Abstände statt Chaos ─────────────────────── Die 44-px-Tippflächen aus 14.4 lagen zusätzlich zu `gap:.5rem` — zehn Links ergaben 520 px Fußzeile. Am Desktop ist die Maus präzise: dort zählt Ruhe, am Handy bleibt die Tippfläche und die Liste läuft zweispaltig. */ .fuss{ margin-top:0; } .fuss-oben{ padding-block:clamp(2.4rem,4vw,3.2rem); gap:2rem; } @media (min-width:820px){ /* align-items bleibt `stretch`: verify prüft die Spalten auf gleiche Höhe („treppen"), und ein Treppenmuster in der Fußzeile ist genau das Chaos, das Marcus gemeldet hat. */ .fuss-oben{ gap:2.4rem; grid-template-columns:1.15fr 1.25fr 1fr; } /* Zehn Seiten in EINER Spalte machten die Fußzeile doppelt so hoch wie die beiden Nachbarspalten — zweispaltig fluchten alle drei Blöcke. */ .fuss-liste{ grid-template-columns:1fr 1fr; gap:0 1.4rem; } .fuss-liste a{ min-height:0; padding-block:.3rem; } } @media (max-width:819px){ .fuss-liste{ grid-template-columns:1fr 1fr; gap:.1rem 1rem; } } .fuss h2{ margin-bottom:.7rem; } .fuss-oben > div > .fliess{ margin-top:.8rem !important; } .fuss-schluss{ padding:1rem 0; gap:.8rem 1.4rem; } .fuss-schluss nav a{ min-height:36px; } .fuss-demo{ margin:0; padding:0 0 1.2rem; } .fuss address{ line-height:1.6 !important; } /* Vor der Fußzeile: die Kontaktsektion hatte unten dieselbe große Sektions- luft wie oben — zusammen mit dem 4-rem-Überführungsverlauf wurde daraus ein leeres Feld. Der Verlauf ersetzt die Luft, statt sie zu verdoppeln. */ .sek--kontakt{ padding-bottom:clamp(2.2rem,4vw,3.4rem); } /* ── 17.7 Startseiten-Schaustück: die Infografik war rechts abgeschnitten ─── Die viewBox endete bei x = 970, gezeichnet wurde bis x = 1077 — der Abnahme-Haken und die „vermittelt"-Linien lagen also ausserhalb. Dazu klebten alle Beschriftungen ohne Hinweisstrich direkt auf dem Objekt. Beides ist im Markup korrigiert; hier stehen nur die Striche dazu. */ .plastik .fahne{ stroke:rgba(201,162,39,.6); stroke-width:1; fill:none; } .plastik .punkt{ fill:var(--werk-akzent); stroke:none; } .plastik text{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; fill:var(--riss-2); } .plastik .label-gold{ fill:var(--werk-akzent); } /* Die Kennzahl rechts stand rechtsbündig und flatterte über drei Zeilen. */ @media (min-width:900px){ .scrolly-wert{ text-align:left; } .scrolly-wert small{ margin-left:0; max-width:16rem; } } /* ── 17.8 Werkbank auch dort, wo GERECHNET statt animiert wird ────────────── „nicht alle bereiche mit animationen haben einen anderen hintergrund": Bewegung ist nicht nur Scrollytelling. Der Stillstandsrechner, die Mitmach- Kästen im Ratgeber und das Kennzahlenband reagieren live — die bekommen denselben eigenen Grund wie die Schaustücke. */ .sek--werk{ background:var(--werk-grund); color:var(--werk-still); position:relative; } .sek--werk::before,.sek--werk::after{ content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--werk-linie) 18%, var(--werk-linie) 82%, transparent); } .sek--werk::before{ top:0; } .sek--werk::after{ bottom:0; } .sek--werk .t-h2,.sek--werk .t-h3,.sek--werk .t-h4,.sek--werk .rf-titel, .sek--werk .rf > label,.sek--werk .rf-wert{ color:var(--werk-tinte); } .sek--werk .augenbraue,.sek--werk .re-label{ color:var(--werk-akzent); } .sek--werk .fliess,.sek--werk .lead,.sek--werk .rf-hinweis{ color:var(--werk-still); } .sek--werk .rechner-feld{ background:var(--werk-flaeche); border:1px solid var(--werk-linie); } .sek--werk .rf-zeile input[type=range]{ accent-color:var(--werk-akzent); } .sek--werk .chip{ border-color:var(--werk-linie); color:var(--werk-still); } .sek--werk .chip[aria-pressed="true"]{ background:var(--werk-akzent); color:#161208; border-color:var(--werk-akzent); } .sek--werk .rechner-ergebnis{ background:#0B0803; } .sek--werk .rechner-ergebnis::before{ background:radial-gradient(110% 80% at 10% 0%, rgba(232,199,102,.18), transparent 60%); } .sek--werk .re-zahl{ color:var(--werk-tinte); } .sek--werk .re-zeile{ border-bottom-color:var(--werk-linie); } .sek--werk .re-zeile b{ color:var(--werk-tinte); } .sek--werk .knopf{ background:var(--werk-akzent); color:#161208; } .sek--werk .knopf:hover{ background:var(--werk-tinte); } .sek--werk .textlink{ color:var(--werk-tinte); } /* Mitmach-Kasten im Ratgeber: eigene Fläche statt Blattfarbe */ .mitmach{ background:var(--werk-flaeche); border:1px solid var(--werk-linie); border-top:3px solid var(--werk-akzent); } .mitmach .t-h4{ color:var(--werk-tinte); } .mitmach-kopf p,.mm-ergebnis p,.mm-frage{ color:var(--werk-still); } .mm-frage{ border-color:var(--werk-linie); } .mm-frage::before{ border-color:var(--werk-akzent); } .mm-frage[aria-pressed="true"]{ border-color:var(--werk-akzent); background:rgba(232,199,102,.12); } .mm-frage[aria-pressed="true"]::before{ background:var(--werk-akzent); box-shadow:inset 0 0 0 3px var(--werk-flaeche); } .mm-ampel{ color:var(--werk-tinte); } .mm-balken{ background:var(--werk-linie); } .mm-ergebnis{ border-top:1px solid var(--werk-linie); } .mm-schieber input[type=range]{ accent-color:var(--werk-akzent); } .mm-schieber output{ color:var(--werk-tinte); } /* Kennzahlenband: die Zahlen laufen hoch — also gehört es zur Werkbank */ .kennband{ background:var(--werk-flaeche); border:1px solid var(--werk-linie); } .kennfeld{ border-right-color:var(--werk-linie); border-bottom-color:var(--werk-linie); } .kennwert{ color:var(--werk-tinte); } .kennlabel{ color:var(--werk-still); } .kennlabel::before{ background:var(--werk-akzent); } /* ── 17.9 Bemaßung auf der Werkbank: gemessen, nicht geraten ──────────────── In der Druckfassung setzte 13.13 die Maßzahlen auf #9A7A12 — richtig auf Papier, aber auf dem tiefblauen Werkbank-Grund fast unlesbar (Kontrast 2,1:1). Die Bemaßung behält deshalb IN den Werkbank-Bändern ihr helles Gold; das ist zugleich die zweite Farbe, die beide Fassungen zusammenhält. */ :root{ --werk-mass:#E8C766; } :root[data-theme="hell"] .scrolly .riss-zahl, :root[data-theme="hell"] .sek--werk .riss-zahl, .scrolly .riss-zahl,.sek--werk .riss-zahl{ fill:var(--werk-mass); } :root[data-theme="hell"] .scrolly .riss-mass path, :root[data-theme="hell"] .sek--werk .riss-mass path, .scrolly .riss-mass path,.sek--werk .riss-mass path{ stroke:var(--werk-mass); opacity:.95; } :root[data-theme="hell"] .scrolly .riss-mass .pfeil, .scrolly .riss-mass .pfeil{ fill:var(--werk-mass); opacity:.95; } .scrolly .riss-fahne,.sek--werk .riss-fahne,.plastik .fahne{ stroke:rgba(232,199,102,.75); } .scrolly .riss-gold-f,.sek--werk .riss-gold-f{ fill:var(--werk-mass); } /* ═══════════════════════════════════════════════════════════════════════════ 18 · Kein Hellblau (Marcus, 06.08.) „das hellblau gefällt mir nicht … das dunkelblau ist top, die bereiche wo es ist, die hellblauen einfach 40% transparenz weiß, nur hintergrund." Also: das tiefe Blau der Werkbank bleibt unangetastet. Die hellblau eingefärbten FLÄCHEN der Druckfassung werden schlicht Weiß mit 40 % — nur der Hintergrund, sonst nichts. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="hell"]{ --weiss:#F8F6F1; /* zurück auf Papierweiß, kein Blaustich */ --kontakt-grund:rgba(255,255,255,.4); } :root[data-theme="hell"] .sek--weiss{ background:rgba(255,255,255,.4); } :root[data-theme="hell"] .sek--kontakt{ background:rgba(255,255,255,.4); } :root[data-theme="hell"] .sek--kontakt::after{ background:linear-gradient(180deg, rgba(255,255,255,.4), var(--nacht-tief)); } /* Auf dem dunkelblauen Band war der Akzent hellblau — er wird Gold. Damit sprechen beide Fassungen dieselbe Akzentfarbe: Gold auf Sand, Gold auf Blau. */ :root[data-theme="hell"]{ --werk-akzent:#E8C766; } :root[data-theme="hell"] .scrolly, :root[data-theme="hell"] .sek--werk, :root[data-theme="hell"] .kennband, :root[data-theme="hell"] .mitmach{ --puls:#E8C766; --puls-still:rgba(232,199,102,.22); } :root[data-theme="hell"] .scrolly{ --riss-1:#F4F8FB; --riss-2:#D3DFE8; --riss-3:#9FB2C0; --riss-4:#7C90A0; --riss-5:#AEBECA; } /* Zwei Nachzieher zur Werkbank: der Punkt im Knopf lag als Gold auf Gold (unsichtbar), und das Ergebnisfeld des Rechners war in der Druckfassung warm-schwarz auf blauem Band. */ .sek--werk .knopf::before,.scrolly .knopf::before{ background:#161208; } :root[data-theme="hell"] .sek--werk .rechner-ergebnis{ background:#082439; } :root[data-theme="hell"] .sek--werk .knopf::before{ background:#0E3350; } /* ═══════════════════════════════════════════════════════════════════════════ 19 · Kontaktformular: schwarze Schrift auf Dunkelblau (Marcus, 06.08.) Die Formular-Tokens standen als feste Hellmodus-Werte im von kontakt.html (`--k-text:#1c2732`, `--k-card:#FFFFFF`). Das Eingabefeld nimmt aber `background:var(--weiss)` aus dem Design-System — in der Nachtfassung also #0E2233. Getippter Text stand damit bei 1,2:1 Kontrast auf Dunkelblau. Die Tokens folgen jetzt dem Thema. `:root:root` schlägt das `:root` aus dem Seiten-, ohne die Vorlage anzufassen. ═══════════════════════════════════════════════════════════════════════════ */ :root:root{ --k-text: var(--tiefblau); /* Nacht: #E9F2F9 · Papier: #0D2434 */ --k-muted: var(--grau); --k-border:color-mix(in srgb, var(--linie) 45%, transparent); --k-card: color-mix(in srgb, var(--weiss) 86%, transparent); --k-accent:var(--knopf-flaeche); --k-accent-ink:var(--knopf-tinte); } .k-card input::placeholder,.k-card textarea::placeholder{ color:var(--grau); opacity:.7; } .k-card h2{ color:var(--tiefblau); } .k-note.ok{ background:color-mix(in srgb, var(--linie) 18%, transparent); color:var(--tiefblau); } .k-note.err{ background:rgba(196,77,68,.16); color:#F0A9A3; } :root[data-theme="hell"] .k-note.err{ background:rgba(165,37,31,.1); color:#a5251f; } /* Die Chips des Anfrage-Assistenten hatten dieselbe feste Hellmodus-Linie. */ .chip{ border-color:color-mix(in srgb, var(--linie) 45%, transparent); } .chip[aria-pressed="true"]{ border-color:var(--sandgold); background:color-mix(in srgb, var(--sandgold) 14%, transparent); } /* ═══════════════════════════════════════════════════════════════════════════ 20 · Zwei Nachbesserungen (Marcus, 06.08.) ═══════════════════════════════════════════════════════════════════════════ */ /* 20.1 Kontakt-Kasten: dunkle Überschrift auf dunkelblauem Grund. Die Regel aus 17.4 stammt aus der Zeit, als das Kontaktband in der Druckfassung selbst hellblau war. Seit 18 ist der Grund weiß mit 40 %, die KARTE darin aber tiefblau (`--kontakt-karte`) — die Überschrift stand damit bei 1,2:1 auf Dunkelblau. Sie liegt in beiden Fassungen auf dunklem Grund und ist deshalb immer hell. */ .sek--kontakt .kontakt-karte .t-h2, :root[data-theme="hell"] .sek--kontakt .kontakt-karte .t-h2{ color:var(--werk-tinte); } .sek--kontakt .kontakt-karte .augenbraue, :root[data-theme="hell"] .sek--kontakt .kontakt-karte .augenbraue{ color:var(--werk-mass); } /* 20.2 „Ersatzteil · beschafft" saß so weit außen, dass es nicht mehr zum Schaustück gehörte. Jetzt näher am Wälzlager UND farblich markiert — dieselbe Goldmarke wie „Elektro · geprüft" und „Abnahme protokolliert". */ .plastik .fahne--stark{ stroke:var(--werk-mass); stroke-width:1.2; opacity:.9; } /* ═══════════════════════════════════════════════════════════════════════════ 21 · Ratgeber-Kästen, mobiles Menü, Kopfzeile auf Tablet/Handy (Marcus, 06.08.) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 21.1 Ratgeber: die Fragen waren dunkel auf dunkel ────────────────────── Die Antwort-Knöpfe hatten `background:transparent` und eine Linie in Grundfarbe — auf dem warmen Werkbank-Grund verschwand der Kasten fast vollständig, der Fragetext lag in der gedämpften Fließtextfarbe. Jede Frage ist jetzt eine eigene, hellere Fläche mit sichtbarer Kante und voller Textfarbe; die gewählte Antwort trägt zusätzlich die Akzentfarbe. */ .mitmach{ background:color-mix(in srgb, var(--werk-tinte) 6%, var(--werk-flaeche)); } .mm-frage{ background:color-mix(in srgb, var(--werk-tinte) 8%, transparent); border:1px solid color-mix(in srgb, var(--werk-tinte) 26%, transparent); color:var(--werk-tinte); } .mm-frage:hover,.mm-frage:focus-visible{ background:color-mix(in srgb, var(--werk-tinte) 14%, transparent); border-color:var(--werk-akzent); } .mm-frage::before{ border:2px solid var(--werk-akzent); } .mm-frage[aria-pressed="true"]{ background:color-mix(in srgb, var(--werk-akzent) 20%, transparent); border-color:var(--werk-akzent); color:var(--werk-tinte); } .mm-frage[aria-pressed="true"]::before{ background:var(--werk-akzent); box-shadow:inset 0 0 0 3px var(--werk-flaeche); } .mitmach-kopf p,.mm-ergebnis p{ color:color-mix(in srgb, var(--werk-tinte) 82%, transparent); } .mm-schieber label,.mitmach label{ color:var(--werk-tinte); font-weight:600; } .mm-schieber .rf-hinweis{ color:color-mix(in srgb, var(--werk-tinte) 70%, transparent); } /* ── 21.2 Mobiles Menü: weiße Schrift auf hellem Grund ────────────────────── `.menue` stand auf `--nacht` mit `--auf-nacht` als Tinte. In der Druckfassung ist `--nacht` aber ein helles Beige (#E4DFD3) und `--auf-nacht` fast weiß — Schrift auf Schrift. Das Menü bekommt jetzt je Fassung einen eigenen, ehrlichen Grund. */ .menue{ background:var(--nacht-tief); color:#F3F1EC; } .menue a{ color:inherit; border-bottom-color:rgba(243,241,236,.22); } :root[data-theme="hell"] .menue{ background:var(--papier); color:var(--tiefblau); } :root[data-theme="hell"] .menue a{ border-bottom-color:rgba(13,36,52,.18); } /* ── 21.3 Kopfzeile auf Tablet und Handy ──────────────────────────────────── Der Darstellungs-Schalter lag erst ab 1120px in der Leiste — auf Tablet und Handy war er nur über das Menü erreichbar. Er steht jetzt immer oben. Auf dem Tablet stehen zusätzlich „Leistungen" (mit Ausklapper) und „Kontakt" direkt in der Leiste; das Burger-Menü bleibt für den Rest. */ @media (max-width:1119px){ .kopf > .kopf-in > .thema{ display:grid; margin-left:auto; } .burger{ margin-left:.2rem; } } @media (min-width:680px) and (max-width:1119px){ .kopf nav{ display:flex; margin-left:auto; gap:.1rem; } .kopf nav > a{ display:none; } .kopf nav > a[href="kontakt.html"]{ display:inline-flex; } .kopf > .kopf-in > .thema{ margin-left:.4rem; } } @media (max-width:679px){ /* Auf dem Handy bleibt es beim Burger — nur der Schalter kommt dazu. */ .kopf nav{ display:none; } } /* ── 21.4 Schaustück auf dem Handy: der Titel lief unter die Leiste ───────── Die Bühne zentriert ihren Inhalt über 100svh. Sobald die Überschrift mobil auf zwei bis drei Zeilen wächst, schiebt die Zentrierung sie nach oben aus dem Bild — die erste Zeile stand hinter der Kopfleiste. Mobil beginnt der Inhalt deshalb oben und die Überschrift ist eine Stufe kleiner. */ @media (max-width:719px){ section.scrolly .scrolly-buehne.buehne{ justify-content:flex-start; padding-top:calc(var(--kopf-h) + 1.1rem); } .scrolly .buehne-kopf .t-h2{ font-size:clamp(1.35rem,6vw,1.9rem); } .scrolly .buehne-kopf .fliess{ font-size:.82rem; } .buehne-bild svg{ max-height:38svh; } .scrolly--plastik .buehne-bild svg{ max-height:36svh; } } /* Auf dem blauen Kasten der Druckfassung würde Gold-Füllung olivgrün werden — dort markiert ein Goldring die Wahl, die Fläche bleibt Blau. */ :root[data-theme="hell"] .mm-frage[aria-pressed="true"]{ background:color-mix(in srgb, var(--werk-tinte) 20%, transparent); box-shadow:inset 0 0 0 1px var(--werk-akzent); }