/* Frank Schlieker Photovoltaik — Designsystem DIE FARBREGEL, ein Satz: DIE HANDLUNG IST TINTE. DER AKZENT IST ZEICHNUNG, UND ER LEBT AUF DEM DUNKLEN BAND. Das ist gemessen, nicht entschieden. Ein mit dem Akzent gefuellter Knopf mit dunklem Text schafft die Hausschwelle von 7:1 nicht — Bernstein liegt bei 5,79, und die beiden verworfenen Richtungen lagen mit 3,14 und 4,86 noch tiefer (`node tools/kontrast.mjs`). Die Baufi-Marke kann das, weil ihr Gelb #FFD23F sehr hell ist; ein Bernstein, das noch als Bernstein liest, ist es nicht. Statt die Schwelle zu senken, tauschen die Rollen: Der gefuellte Knopf traegt Papier auf Tinte (ueber 10:1), der Akzent zeichnet — Kicker- Punkt, Fortschrittsbalken, Trenner, Fokusring auf dunklem Grund. Nebenwirkung, die keine ist: Damit unterscheidet sich diese Marke im Kern von frank-schlieker.de, wo Gelb die Handlung ist. Zwei Gewerbe, zwei Systeme. DURCHGESETZT WIRD DIE REGEL VON DER KASKADE, NICHT VON DISZIPLIN: --akzent ist im Wurzelkontext Tinte und kippt NUR innerhalb von .band-dunkel und .band-dunkel-tief auf --sonne. Der Untergrund entscheidet, nicht die Fundstelle. DIE RICHTUNG IST ENTSCHIEDEN (2026-08-10): Tannengruen & Bernstein. Zur Wahl standen ausserdem Terrakotta & Schiefer und Nachtpetrol & Kupfer; beide sind hier geloescht, samt dem Umschalter data-richtung am . Kein Vorrat im Auslieferungsstand — wer die Vergleichsbilder sucht, findet sie in review/ und die Werte im Git-Verlauf. Kein Verlauf, kein Schatten, keine dritte Buntfarbe. */ @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* ---------- Tannengruen & Bernstein ---------- */ :root { --papier: #F5F7F2; --flaeche2: #E4EDDC; --tinte: #17402D; --sekundaer: #3A4741; --sonne: #F4A821; --linie: #D3DED0; --tinte-tief: #0F2C1E; --auf-tinte: #F5F7F2; --auf-tinte-leise: #BFD4C6; --fehler: #8A1D1D; } :root { /* DER AKZENT. Im Wurzelkontext Tinte — die Sonne ist auf hellem Grund als Strich oder Schrift unbrauchbar (1,86:1). Die dunklen Baender schalten um. */ --akzent: var(--tinte); /* Raster */ --spalte: 1180px; --rand: 56px; --rand-mobil: 20px; --gutter: max(var(--rand), calc((100% - var(--spalte)) / 2)); /* Typo-Skala */ --t-h1: clamp(38px, 5.2vw, 62px); --t-h2: clamp(30px, 3.2vw, 42px); --t-h3: 24px; --t-lead: 22px; --t-body: 19px; --t-klein: 16px; --radius: 4px; } @media (max-width: 700px) { :root { --rand: var(--rand-mobil); } } * { box-sizing: border-box; } /* KEIN scroll-behavior: smooth auf — dieselbe Messung wie im Bestand: die Regel gilt auch fuer das Scrollen, das der Browser beim Tabben ausloest, und setzt den Fokus dann auf noch unsichtbaren Inhalt. Auf einer Seite, die aus einem Formular besteht, ist die Tastatur mehr wert als ein gleitender Sprung. */ html { font-size: 100%; } body { margin: 0; background: var(--papier); color: var(--tinte); font-family: "Source Sans 3", system-ui, sans-serif; font-size: var(--t-body); line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } h1, h2, h3 { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: 1.06; } h2 { font-size: var(--t-h2); line-height: 1.15; } h3 { font-size: var(--t-h3); line-height: 1.3; } p { margin: 0; } a { color: var(--tinte); } /* DIE EINE UMSCHALTUNG. Innerhalb der dunklen Flaechen kippt der Akzent auf die Sonne — und damit alles, was --akzent benutzt: Striche, Trenner, Ziffern, Fokusringe, Balken. Diese zwei Selektoren sind die gesamte Durchsetzung der Farbregel. */ .band-dunkel, .band-dunkel-tief { --akzent: var(--sonne); } .band-dunkel { background: var(--tinte); color: var(--auf-tinte); } .band-dunkel-tief { background: var(--tinte-tief); color: var(--auf-tinte); } .band-dunkel a, .band-dunkel-tief a { color: var(--auf-tinte); } .band-dunkel .lead, .band-dunkel .klein, .band-dunkel .kicker, .band-dunkel-tief .lead, .band-dunkel-tief .klein, .band-dunkel-tief .kicker { color: var(--auf-tinte-leise); } /* Fokusring folgt dem Akzent: auf Papier Tinte, auf dem Band die Sonne. Ein Sonnenring auf hellem Grund waere 1,86:1 — als Fokusanzeige unbrauchbar (WCAG 1.4.11 will 3:1). */ :focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 2px; } .lead { font-size: var(--t-lead); line-height: 1.55; color: var(--sekundaer); } .klein { font-size: var(--t-klein); line-height: 1.5; color: var(--sekundaer); } .kicker { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sekundaer); display: flex; align-items: center; gap: 12px; } .kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--akzent); } /* Wortmarke */ .lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; } .lockup .signet { display: block; flex: 0 0 auto; } .wortmarke { font-family: "Archivo", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: var(--tinte); line-height: 1; display: block; } .zusatz { font-weight: 600; font-size: 14px; letter-spacing: 0.06em; color: var(--sekundaer); line-height: 1.3; display: block; } /* Knoepfe — DIE HANDLUNG IST TINTE (Begruendung oben, Zahlen in tools/kontrast.mjs). Genau EIN gefuellter Knopf pro Bildschirm. */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: "Source Sans 3", sans-serif; font-weight: 600; text-decoration: none; border-radius: var(--radius); white-space: nowrap; cursor: pointer; min-height: 52px; padding: 0 26px; font-size: 19px; border: 1.5px solid transparent; /* Press-Feedback: 120 ms, damit der Finger eine Antwort bekommt, bevor die Seite reagiert. Bewusst kurz — laenger fuehlt sich nach Verzoegerung an. */ transition: background-color 0.12s ease-out, transform 0.12s ease-out; } .btn-primaer { background: var(--tinte); color: var(--papier); border-color: var(--tinte); } .btn-primaer:hover { background: var(--tinte-tief); border-color: var(--tinte-tief); } .btn-sekundaer { background: transparent; color: var(--tinte); border-color: var(--tinte); } .btn-sekundaer:hover { background: var(--flaeche2); } /* :active ist auf dem Handy das EINZIGE Feedback — hover gibt es dort nicht. Im Bestand fehlt es komplett; hier ist es von Anfang an drin, auf allen druckbaren Flaechen. */ .btn:active { transform: translateY(1px); } .btn-primaer:active { background: var(--tinte-tief); } .btn-sekundaer:active { background: var(--flaeche2); } /* Auf dem dunklen Band kehrt der Knopf um: Papier-Flaeche, Tinte-Text. */ .band-dunkel .btn-primaer, .band-dunkel-tief .btn-primaer { background: var(--papier); color: var(--tinte); border-color: var(--papier); } .band-dunkel .btn-sekundaer, .band-dunkel-tief .btn-sekundaer { color: var(--auf-tinte); border-color: var(--auf-tinte-leise); } .visuell-versteckt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sprungmarke — sichtbar erst bei Tastaturfokus. */ .sprung { position: absolute; left: -9999px; top: 0; background: var(--tinte); color: var(--papier); padding: 10px 16px; z-index: 50; } .sprung:focus { left: 8px; top: 8px; } /* Auf schmalen Geraeten darf die Beschriftung umbrechen — sonst zwingt der laengste Knopf die ganze Seite ueber die Bildschirmbreite hinaus. */ @media (max-width: 560px) { .btn { white-space: normal; text-align: center; line-height: 1.3; padding: 12px 18px; text-wrap: balance; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }