/* ============================================================ SARTU — Gestaltungswerte Quelle: design/startseite.html (Grundton „Papier", entschieden 02.08.2026) und design/portalkonzept.html (Anwendungsbereich, entschieden 03.08.2026). Bis 09.08.2026 stand hier die warme Reihe vom 30.07.2026 (--cream #f4efe5, --paper #fbf8f2, --line #ddd4c4, --sand #e8dfcd). Sie ist abgeloest. Beide Entwuerfe fuehren seit Anfang August die kuehlen Neutralen; diese Datei war die letzte Stelle mit den alten Werten und widersprach damit den Vorlagen, aus denen gebaut wird. Vermerk: OFFENE_ENTSCHEIDUNGEN.md, Zeile „Farbwerte des Anwendungsbereichs" — dort ausdruecklich als erste Aenderung beim Uebertragen benannt. Die Lime-Reihe und --ink sind unveraendert; sie sind in SARTU_ENTSCHEIDUNGEN_OFFEN.md (Rang 1) gebunden, die Neutralen dort ausdruecklich nicht. Diese Datei ist die einzige Stelle, an der ein Farbwert, ein Radius oder eine Abstandsstufe steht. Wer im Bauteil eine Zahl schreibt statt eine Variable, bricht das System. Nicht uebernommen aus dem Artefakt: - der TWEAKS-Block samt versteckter Radios - die Vorschau-Regeln am Dateiende Beides ist dort ausdruecklich als „nicht ins PHP-Projekt" gekennzeichnet. ============================================================ */ :root{ /* ---- Farben -------------------------------------------- */ /* Der Name bleibt --cream, der Wert ist nicht mehr cremefarben. Umbenannt wird nicht: portalkonzept.html nennt dieselbe Flaeche --papier und --weiss, startseite.html --cream und --paper. Zwei Namen fuer denselben Wert sind ertraeglich, zwei Werte hinter demselben Namen nicht. */ --cream:#f6f6f4; /* Seitengrund (portalkonzept: --papier) */ --paper:#ffffff; /* erhoehte Flaechen: Karten, Chips, Zeilen (portalkonzept: --weiss) */ --ink:#0c100e; /* Schrift und dunkle Abschnitte */ --ink-soft:#222322; /* Flaechen innerhalb dunkler Abschnitte */ --ink-2:#1e201e; /* Leiste des internen Bereichs */ --ink-3:#2a2c2a; /* aktiver Eintrag in dieser Leiste */ --text:#1f2120; /* Fliesstext auf hellem Grund */ --muted:#4a4d4b; /* zweite Textebene */ --line:#dfdfda; /* Kante auf hellem Grund */ --line-dark:#2e302e; /* Kante auf dunklem Grund */ --sand:#eaeae6; /* ruhige Fuellflaeche */ --band-a:#e0e0db; /* Abschnittsband, dunklere Stufe */ --band-b:#ebebe6; /* Abschnittsband, hellere Stufe */ /* Akzent. Die einzige Farbe im System. Lime ist Flaechenfarbe. Auf hellem Grund NIE Schriftfarbe: gemessen 1,39:1 gegen den Seitengrund #f6f6f4 — unlesbar. (Gegen den abgeloesten Grund #f4efe5 waren es 1,32:1. Die Zahl aendert sich mit dem Grund, das Verbot nicht.) Auf Lime steht immer --ink: 12,47:1. Auf dunklen Abschnitten darf Lime Schriftfarbe sein. Jede Lime-Flaeche auf hellem Grund braucht 1px --line als Kante. */ --lime:#a3e635; --lime-hover:#8dc92a; --lime-press:#7ab023; --lime-soft:#e4f5b8; /* Auszeichnungen. Neutral, nie anklickbar. */ --label:#5a5d5b; --label-dark:#9ca09d; --rail-text:#cfd0ce; /* Schrift auf der dunklen Leiste */ --rail-label:#757875; /* Gruppenwort in der Leiste */ --rail-zahl:#8d908d; /* Zaehler und zweite Ebene in der Leiste */ --rail-ik:#9ca09d; /* Zeichen in Ruhe */ /* ---- Aufmacher: Geraet und Baender ---------------------- Quelle: design/startseite.html, Abschnitt „AUFMACHER". Die Werte standen dort als Zahl im Bauteil; hier stehen sie einmal, damit sie sich an einer Stelle aendern lassen. Am 13.08.2026 waren sie kurzzeitig entfernt, weil der Geraeterahmen geloescht war. Beides ist am selben Tag wiederhergestellt: §4b (Rang 1) haelt das Geraet fest, bis das gerenderte Mockup vorliegt. */ --geraet-rahmen:#2a2419; /* Sockel des Laptops, oben */ --geraet-sockel:#1a1610; /* Sockel des Laptops, unten */ --geraet-kerbe:#0d0b08; /* die Kerbe an der Vorderkante */ /* Tastenfeld und Trackpad — `design/geraet.html` nennt sie als Teil des groessten Einzeleffekts: „Fehlt die Basis, sieht das Geraet aus wie ein Bildschirm auf einem Stiel." **Die Taste ist HELLER als die Fuge dazwischen, nicht dunkler.** Der Entwurf setzt `repeating-linear-gradient(90deg, #23261f 0 2.9%, #080908 2.9% 3.55%)` — die Tastenflaeche #23261f, der Spalt #080908. Der erste Bau hatte es umgekehrt, und das Tastenfeld verschwand im Sockel. */ --geraet-taste:#2b2e26; --geraet-trackpad:#24271f; /* ---- Radien -------------------------------------------- */ /* --rk skaliert die gesamte Formsprache auf einmal. Der entschiedene Wert ist 1. Wer ihn aendert, aendert jede Ecke der Seite gleichzeitig — nie einzelne Radien. */ --rk:1; --r-xs:calc(8px * var(--rk)); --r-s:calc(14px * var(--rk)); --r-m:calc(22px * var(--rk)); --r-l:calc(34px * var(--rk)); --r-xl:calc(52px * var(--rk)); --r-pill:999px; /* Es gibt bewusst KEINE achte Form neben dieser Skala. Bis 01.08.2026 stand hier --r-leaf, eine asymmetrische Lozenge als wiederkehrendes Zeichen. Sie las sich als Blatt und ist gestrichen. Begruendung und Vergleich: design/motiv-recherche.html Material Design 3 macht es genauso — eine Radienskala, kein Motiv. */ /* ---- Abstaende ----------------------------------------- */ --s-1:6px; --s-2:12px; --s-3:20px; --s-4:32px; --s-5:48px; --s-6:72px; --s-7:104px; --s-8:140px; /* ---- Masse --------------------------------------------- */ /* Fliessend, nicht fest — `07_MARKE_UND_GESTALTUNG.md`, Abschnitt „Satzspiegel". Der Wert stand bis zum 13.08.2026 auf `1180px`; das war beim Uebertragen aus dem Entwurf haengengeblieben und ist genau der Wert, gegen den die Vorgabe argumentiert: „Die Seite lief auf --wrap: 1180 — abzueglich der Raender blieben 1068 px Inhalt und damit unter dem ueblichen Band." Drei gemessene Folgen hatte der feste Deckel: der Kopf hatte bei 1920 px **weniger** Platz als bei 1280 (--gut waechst, die Bahn nicht) · die vierte Preisstufe passte nicht in die Zeile, obwohl `10_WEBSITE_SARTU.md` §4 alle vier nebeneinander verlangt · jenseits von 1180 px gewann die Seite nur noch Rand. `.bahn` traegt `width:100%` daneben — bei 1024 px steht `--wrap` auf seinem Mindestwert 1380 px und waere sonst breiter als das Fenster. */ --wrap:clamp(1380px,90vw,1800px); --gut:clamp(20px,4vw,56px); /* Die Hoehe der klebenden Kopfzeile — gemessen 93 px bei jeder Desktopbreite, 84 px mobil (Marke 34 px, Innenabstand 2x --s-3, Trennlinie). Sie steht hier und nicht als Zahl im Bauteil, weil zwei Stellen sie brauchen: das Sprungziel unter der Kopfzeile und der Sprungmarken-Link. */ --kopfhoehe:93px; /* Sprungziel plus Luft. Ohne diesen Wert schiebt jeder Sprung aus der Hauptnavigation die Ueberschrift hinter die Kopfzeile — gemessen am 13.08.2026 an allen sechs Zielen: `scroll-margin-top` stand ueberall auf 0. */ --sprungabstand:calc(var(--kopfhoehe) + var(--s-4)); /* ---- Schrift ------------------------------------------- */ /* Systemschriften. Keine externe Schriftdatei, kein CDN. Eigene Schrift spaeter so einhaengen: @font-face{font-family:"SARTU Sans";src:url("/fonts/sartu-sans.woff2") format("woff2"); font-weight:400 700;font-display:swap} Danach in --font-sans an erster Stelle eintragen. */ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Helvetica,sans-serif; --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; --fs-body:17px; --lh-body:1.6; --fs-lede:22px; --lh-lede:1.25; --fs-copy:17px; --lh-copy:1.6; --fs-small:15px; --fs-mono:13px; --ls-mono:.1em; /* Die Spannen stehen in `07_MARKE_UND_GESTALTUNG.md`, „Schriftgrade der Ueberschriften". Beide Formeln waren bis zum 13.08.2026 auf den festen Satzspiegel von 1180 px eingestellt und deckelten daher zu frueh: H1 bei 80 statt 104 px, H2 bei 50 statt 54 px. Mit dem fliessenden Satzspiegel greift die Vorgabe wieder. --fs-h1 ist der einspaltige Fall. Im Aufmacher gilt die cqw-Formel in `website.css`: die H1 steht in der 55-%-Spalte und misst sich an ihr. */ --fs-h1:clamp(38px,10cqw,58px); --ls-h1:-.035em; --fs-h2:clamp(27px,calc(3vw - 6px),54px); --fs-h3:22px; --fs-price:38px; --fs-pledge:clamp(31px,4.6vw,56px); --lh-head:1.04; --ls-head:-.025em; --fw-head:650; /* ---- Schatten ------------------------------------------ */ --shadow-soft:0 24px 60px -30px rgba(20,17,13,.28); --shadow-lift:0 34px 80px -34px rgba(20,17,13,.4); /* ---- Bewegung ------------------------------------------ */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:.2s; --t-base:.25s; --t-slow:1.1s; --shift:26px; /* Weg der Einblendung beim Scrollen */ } /* ---- Haltepunkte ---------------------------------------------- Als Kommentar, weil CSS keine Variablen in Medienabfragen kennt. Im Artefakt tatsaechlich verwendet — mehr werden nicht erfunden: 620px Knopf im Kopf entfaellt 720px Monatspauschale einspaltig 760px Sonderprojekt und Ablaufzeilen einspaltig 800px Abschlussband einspaltig 820px „Wer hier arbeitet" einspaltig 860px Loesungskarten und SEO-Band einspaltig · ab hier laeuft der Zeitstrahl zweispaltig 880px Musterprojekte einspaltig 900px Aufmacher einspaltig 1180px Navigation entfaellt — `startseite.html` Zeile 166. Hier stand bis zum 13.08.2026 940px; der Wert war beim Uebertragen geraten und liess die Kopfzeile von 941 bis 1183px waagerecht ueberlaufen ---------------------------------------------------------------- */ /* ---- Bewegung abschaltbar ------------------------------------- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }