/* ═══════════════════════════════════════════════════════════════════════ ZEYNAH — GEMEINSAME GRUNDLAGE FUER ALLE SEITEN ─────────────────────────────────────────────────────────────────────── Gemessen am 13.08.2026: von 151 deploybaren Seiten lud GENAU EINE (index.html) das Gestaltungssystem aus `schaufenster.css`. Alle anderen 150 hatten weder Schachbrett noch Glas noch Hintergrundfilm. Diese Datei zieht das Prinzip der Startseite heraus, damit es jede Seite laden kann — ohne die Seite selbst umzuschreiben: · Hintergrundfilm ueber die ganze Seite · Baender hell/dunkel im strikten Wechsel · Kacheln UND Knoepfe: Glas, farbig umrandet, schwebend · jede Kachel ist das Gegenteil ihres Bandes (Schachbrett) ── DIE FARBEN SIND ENTSCHIEDEN (13.08.2026) ────────────────────────── Nazannil woertlich: „kein schwarz kein weiss kein braun". Es gibt nur noch EINE Reihe. Die warme Fassung (`#332e28`, `#4e483f`, Champagner- Rand) wurde am 13.08. nebeneinander gezeigt und abgewaehlt — sie ist hier vollstaendig entfernt, damit sie nicht zurueckwandert. Messbar verboten, auf jeder Flaeche: · SCHWARZ — Summe der drei Kanaele unter 90 · WEISS — reines #ffffff als Flaeche · BRAUN — Rot minus Blau groesser gleich 8 ═══════════════════════════════════════════════════════════════════ */ :root { /* Helle Seite — in beiden Reihen gleich, warm und ohne reines Weiss */ --zy-creme: #faf7f2; --zy-creme-2: #f0e9dd; /* Akzent — Apple-Blau, in beiden Reihen gleich */ --zy-blau: #0071e3; --zy-blau-t: #005bb8; /* Knopfflaeche, Blauschrift auf Creme */ --zy-blau-hell: #7fbcff; /* Blau auf dunklem Grund */ /* Zwei der vier Wechselraender sind in beiden Reihen gleich */ --zy-rand-3: rgba(0, 113, 227, .50); /* Apple-Blau — 14.08. war hier Teal rgba(0,196,170) und daneben zwei GRAUE Raender. Nazannil: „graue kaesten … kaesten immer glasig schwebend farbig umrandet". Teal ist verbotene Farbe, Grau ist keine Farbe. Die vier Raender sind jetzt vier Blaustufen: hell / Knopf / Apple / Apple leise. */ --zy-rand-4: rgba(0, 113, 227, .34); /* Blau, bewusst schwach */ /* Glas — unter .88 Deckkraft entsteht Grau und die Schrift wird blass. Gemessen am 04.08.2026 auf der Grosshandel-Seite. */ --zy-glas-blur: blur(16px) saturate(1.2); --zy-deckkraft-dunkel: .88; --zy-deckkraft-hell: .92; } /* ── Die dunkle Seite ───────────────────────────────────────────────── Kein Farbstich ist ABSICHT, kein Fehler: der Dunkelton steht neben warmem Creme, die Waerme kommt aus dem Zusammenspiel. Wer den Dunkelton „waermt", landet unweigerlich bei Braun — dreimal passiert. */ :root { --zy-tief: #404144; /* Grundflaeche R-B -4 */ --zy-tief-2: #4a4b4f; /* Kachel dunkel R-B -5 */ --zy-text-tief: #303134; /* Schrift auf Creme R-B -4 */ --zy-leise: #565759; /* leise auf Creme R-B -3 */ --zy-schwach: #e6e6e8; /* schwach auf Dunkel R-B -2 */ /* Rand 1 und 2 waren GRAU (230/230/232 und 198/200/205) — sichtbar auf jeder zweiten Kachel. Nazannil 14.08.: „kein grau!" Jetzt die beiden uebrigen Toene der Akzentreihe: #7fbcff und #005bb8. Nur diese zwei Zeilen — alle Kacheln beziehen ihre Raender aus den Variablen. */ --zy-rand-1: rgba(127, 188, 255, .50); --zy-rand-2: rgba(0, 91, 184, .46); --zy-schatten: 48, 49, 52; /* dieselben Toene dezimal — Baender brauchen sie mit Alpha */ --zy-tief-rgb: 64, 65, 68; --zy-tief-2-rgb: 74, 75, 79; } /* Hier stand bis zum 13.08.2026 eine zweite, warme Reihe zum Vergleich. Sie ist abgewaehlt und entfernt. Die Werte stehen bewusst OHNE Raute, damit ein Suchlauf ueber Farbwerte diese Erklaerung nicht mitersetzt und niemand sie versehentlich zurueckholt: 33-2e-28 (R−B +11) · 4e-48-3f (+15) · Champagner 212/196/168 (+44). */ /* ═══ HINTERGRUNDFILM ══════════════════════════════════════════════════ Liegt hinter allem, fuellt den Schirm, laeuft leise weiter. Der Schleier darueber haelt die Schrift lesbar, egal wie hell ein Filmbild gerade ist. Eingehaengt von `zeynah-grundlage.js` — die Seite selbst braucht nichts. */ #zy-grundfilm { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; } #zy-grundfilm-schleier { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Ganz leicht. Die Startseite kommt sogar ohne Schleier aus; hier bleibt nur so viel, dass ein helles Filmbild die Schrift im hellen Band nicht ausbleicht. Dicker gemacht, und die hellen Baender wirken schmutzig. */ background: radial-gradient(1100px 560px at 12% -12%, rgba(0, 113, 227, .10), transparent 62%), linear-gradient(168deg, rgba(var(--zy-schatten), .16) 0%, rgba(var(--zy-schatten), .26) 100%); } /* Wer das nicht mag oder Datenvolumen spart, bekommt eine ruhige Flaeche. */ /* reduced-motion-Ausnahme entfernt 14.08. — Logo/Leben IMMER an (Nazannils Gesetz; Bewegungen sind sanft und langsam) */ /* ═══ BAENDER — hell/dunkel im strikten Wechsel ════════════════════════ Die Seite faengt HELL an. Ein erster Bildschirm als dunkle Wand ist ausdruecklich verboten. */ /* ── HELL DECKEND, DUNKEL DURCHSCHEINEND (14.08., endgueltig) ───────── Die Geschichte in einem Absatz, damit niemand den naechsten Fehlanlauf baut: Frueher war es umgekehrt (hell .74, dunkel satt) — und ueber dem dunklen Film wurde Creme .74 zu #c8ccd0: entsaettigt, schmutzig. DAS war das Grau, das Nazannil sah. „Alles deckend" toetete danach das Glas: durch eine deckende Flaeche schimmert nichts. Der Film ist seit dem 14.08. BLAU (#394d64). Ein DUNKLES Band mit .86 darueber bleibt tiefblau-dunkel — Palette, lebendig, kein Grau. Nur CREME ueber dunklem Film ergibt Grau. Deshalb: · helle Baender: DECKEND (Creme bleibt Creme) · dunkle Baender: .86 — der Film schimmert durch, das Glas lebt Wer das aendert: erst den FILM messen, dann die Baender. */ .zy-band { position: relative; padding: 4.5rem 2rem; background: linear-gradient(168deg, rgb(250, 247, 242) 0%, rgb(240, 233, 221) 100%); color: var(--zy-text-tief); } .zy-band.zy-dunkel { background: linear-gradient(168deg, rgba(var(--zy-tief-rgb), .86) 0%, rgba(var(--zy-tief-2-rgb), .86) 100%); color: var(--zy-creme); } .zy-band > .zy-innen { max-width: 1240px; margin: 0 auto; } .zy-band h1, .zy-band h2, .zy-band h3 { color: var(--zy-text-tief); } .zy-band.zy-dunkel h1, .zy-band.zy-dunkel h2, .zy-band.zy-dunkel h3 { color: var(--zy-creme); } .zy-band .zy-leise { color: var(--zy-leise); } .zy-band.zy-dunkel .zy-leise { color: var(--zy-schwach); } /* ═══ KACHELN — Glas, farbig umrandet, schwebend ═══════════════════════ Jede Kachel ist das GEGENTEIL ihres Bandes. Die Kachel nur dunkel zu faerben genuegt nicht: alles darin ist fuer hellen Grund geschrieben. Deshalb werden die Variablen INNERHALB der Kachel neu belegt — dann dreht jedes Element mit, auch auf Seiten, die es noch nicht gibt. */ .zy-kachel { position: relative; border-radius: 20px; padding: 1.6rem; -webkit-backdrop-filter: var(--zy-glas-blur); backdrop-filter: var(--zy-glas-blur); border: 1.5px solid var(--zy-rand-1); box-shadow: 0 20px 46px rgba(var(--zy-schatten), .26), 0 2px 6px rgba(var(--zy-schatten), .12), inset 0 1px 0 rgba(250, 247, 242, .14); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, border-color .3s ease; isolation: isolate; } /* Helles Band → DUNKLE Kachel. Die Flaeche kommt aus `--zy-tief-2-rgb` (dem Kachelton), NICHT aus `--zy-schatten`. Beim ersten Bau stand hier die Schattenfarbe: in der warmen Reihe ist die blaeulich (38,43,51), und die Kachel wurde blaugrau statt braun — der Vergleich haette den falschen Ton gezeigt. */ .zy-band:not(.zy-dunkel) .zy-kachel { background: rgba(var(--zy-tief-2-rgb), var(--zy-deckkraft-dunkel)); color: var(--zy-creme); --zy-text-tief: var(--zy-creme); --zy-leise: var(--zy-schwach); --zy-blau-t: var(--zy-blau-hell); } /* Dunkles Band → CREME-Kachel, echtes helles Milchglas mit dunkler Schrift — nicht heimlich dunkel gemacht. */ .zy-band.zy-dunkel .zy-kachel { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP48PLufwAJOQO23LZ0xgAAAABJRU5ErkJggg==); /* messbare Zweitangabe fuer `flaecheVon()` — das PNG allein ist fuer den Waechter unsichtbar (14.08.). Optisch deckungsgleich. */ background-color: #f0e9dd; color: var(--zy-text-tief); --zy-text-tief: #303134; --zy-leise: #565759; --zy-blau-t: #005bb8; } .zy-band .zy-kachel h1, .zy-band .zy-kachel h2, .zy-band .zy-kachel h3, .zy-band .zy-kachel p { color: inherit; } /* Vier Raender im Wechsel — Blau ist EINER von vieren und der schwaechste. Verteilt `zeynah-grundlage.js`, damit keine Seite es einzeln pflegen muss. */ .zy-kachel.zy-r1 { border-color: var(--zy-rand-1); } .zy-kachel.zy-r2 { border-color: var(--zy-rand-2); } .zy-kachel.zy-r3 { border-color: var(--zy-rand-3); } .zy-kachel.zy-r4 { border-color: var(--zy-rand-4); } /* Schweben — vier Laufzeiten, damit nichts im Gleichschritt wippt */ @keyframes zy-schweben-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } @keyframes zy-schweben-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} } @keyframes zy-schweben-c { 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(-9px)} } .zy-kachel:nth-child(4n+1) { animation: zy-schweben-a 8.5s ease-in-out infinite; } .zy-kachel:nth-child(4n+2) { animation: zy-schweben-b 6.5s ease-in-out infinite -1.2s; } .zy-kachel:nth-child(4n+3) { animation: zy-schweben-c 9.5s ease-in-out infinite -3.4s; } .zy-kachel:nth-child(4n+4) { animation: zy-schweben-b 7.4s ease-in-out infinite -2.1s; } .zy-kachel:hover { box-shadow: 0 36px 74px rgba(var(--zy-schatten), .34), 0 0 0 1px rgba(0, 113, 227, .38), inset 0 1px 0 rgba(250, 247, 242, .2); } /* Auffloppen beim Antippen */ .zy-kachel:active { transform: translateY(-12px) scale(.985); } /* reduced-motion-Ausnahme entfernt 14.08. — Leben IMMER an (Nazannils Gesetz) */ /* ═══ KNOEPFE — genauso wie Kacheln ════════════════════════════════════ „kacheln buttons glasig" — ein Knopf, der flach neben einer Glaskachel steht, faellt aus dem System. */ .zy-knopf { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; background: rgba(0, 91, 184, var(--zy-deckkraft-dunkel)); color: var(--zy-creme); border: 1.5px solid var(--zy-rand-4); -webkit-backdrop-filter: var(--zy-glas-blur); backdrop-filter: var(--zy-glas-blur); box-shadow: 0 12px 28px rgba(var(--zy-schatten), .24), inset 0 1px 0 rgba(250, 247, 242, .18); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, border-color .3s ease; } .zy-knopf:hover { box-shadow: 0 20px 40px rgba(var(--zy-schatten), .3); } .zy-knopf:active { transform: translateY(-6px) scale(.97); } /* Zweitrangiger Knopf — dieselbe Glasoptik, ruhiger */ .zy-knopf.zy-still { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP48PLufwAJOQO23LZ0xgAAAABJRU5ErkJggg==); background-color: #f0e9dd; /* messbar fuer den Waechter, s.o. */ color: #303134; border-color: var(--zy-rand-1); } .zy-band.zy-dunkel .zy-knopf.zy-still { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP48PLufwAJOQO23LZ0xgAAAABJRU5ErkJggg==); background-color: #f0e9dd; } /* ═══ FULLSCREEN ══════════════════════════════════════════════════════ Nie eine schmale zentrierte Spalte auf breitem Schirm. */ html, body { min-height: 100dvh; } body { margin: 0; } /* ── LADEREIHENFOLGE IST PFLICHT ────────────────────────────────────── Diese Datei MUSS nach `_force-style.css` eingebunden werden. Jene setzt `html, body { background:#faf7f2 !important }` und deckt damit den Hintergrundfilm zu. Bei gleicher Gewichtung gewinnt die spaetere Datei — steht die Grundlage davor, bleibt der Film unsichtbar und man sucht den Fehler im Video statt in der Reihenfolge. */ html, body { background: transparent !important; } /* ═══════════════════════════════════════════════════════════════════════ DIE BRANCHENSEITEN — hero · workflow · features · diff · filme · pricing ─────────────────────────────────────────────────────────────────────── Zehn Seiten teilen genau dieselbe Struktur: realestate, hotel, insurance, b2b, healthcare, gastro-landing, main, app/main und zwei weitere. Deshalb steht das Schachbrett EINMAL hier statt zehnmal in den Seiten. Gemessene Baenderfolge vorher: D D H D D H — die Seiten fingen dunkel an und hatten zweimal zwei dunkle Baender hintereinander, also gar kein Schachbrett. Jetzt H d H d H d, beginnend HELL. Der Kunstgriff: nicht jedes Element einzeln faerben, sondern die Variablen INNERHALB des Bandes neu belegen. Dann dreht alles mit, was sie schreibt — auch was spaeter dazukommt. ═══════════════════════════════════════════════════════════════════════ */ /* Hell und dunkel werden GEZAEHLT, nicht je Abschnittsnamen festgelegt — `zy-hell`/`zy-tief` vergibt `zeynah-grundlage.js` beim Laden. Feste Zuordnung stimmt nur, solange jede Seite dieselben Abschnitte hat: auf insurance.html fehlt das Filme-Band, und die Folge endete H d H d d. */ /* Gleiches Schema wie `.zy-band` oben: HELL deckend, DUNKEL .86 — Begruendung dort. Beide Stellen muessen zusammen geaendert werden, sonst zeigen die Seiten zweierlei Baender. */ section.zy-hell{ background:linear-gradient(168deg, rgb(250,247,242) 0%, rgb(240,233,221) 100%) !important; --white:#303134; --muted:#565759; --cyan:#005bb8; --cyan-dark:#00468c; color:#303134; } section.zy-tief{ background:linear-gradient(168deg, rgba(64,65,68,.86) 0%, rgba(74,75,79,.86) 100%) !important; --white:#faf7f2; --muted:#e6e6e8; --cyan:#9ccafe; --cyan-dark:#7fbcff; color:#faf7f2; } section.zy-hell h1, section.zy-hell h2, section.zy-hell h3, section.zy-hell .section-title{color:#303134 !important} section.zy-hell .hero-sub, section.zy-hell .hero-note{color:#565759 !important} section.zy-hell h1 em, section.zy-hell .section-title em, section.zy-hell .section-eyebrow{color:#005bb8 !important} section.zy-tief h1, section.zy-tief h2, section.zy-tief h3, section.zy-tief .section-title{color:#faf7f2 !important} section.zy-tief .hero-sub, section.zy-tief .hero-note{color:#e6e6e8 !important} section.zy-tief h1 em, section.zy-tief .section-title em, section.zy-tief .section-eyebrow{color:#9ccafe !important} /* Kacheln richten sich nach dem gezaehlten Band, nicht nach dem Namen */ /* 14.08. spaeter Abend (Nazannil: „helle kaesten und helle schrift graue kaesten das ist nicht zeynah"). Zwei Fehler in einer Zeile: 1) Die Creme-Kachel war ein 1×1-PNG (`background:url(data:image/png…)`, Pixel #f0e9dd deckend). Der Waechter `flaecheVon()` sucht die Flaeche per /rgba?\([^)]+\)/ — in einem Base64-PNG steht kein rgba(). Er fand nichts, stieg zum dunklen Band hoch, mass „dunkel" und faerbte die Schrift CREME. Creme auf Creme: 1,05:1. Genau das Gemeldete. 2) Voll deckend + `backdrop-filter` = kein Glas. Die Kachel wurde flach. Beides loest ein VERLAUF statt PNG: er ist ebenfalls ein `background-image` (also gleich unkaputtbar gegen Auto-Dunkelmodi, der Grund fuers PNG), enthaelt aber rgba() — der Waechter misst wieder richtig. Das zusaetzliche `background-color` trifft schon die erste Abfrage in `flaecheVon()`, damit die Messung nie mehr am Bild haengt. Zwei Toene im Verlauf + Innenglanz geben das Glas zurueck, ohne dass der Film durchscheint und Grau-Matsch macht. */ section.zy-hell .feat-card:nth-child(odd), section.zy-hell .film-karte:nth-child(odd), section.zy-hell .wf-step:nth-child(odd), section.zy-hell .price-card:nth-child(odd), section.zy-hell .info-card:nth-child(odd), section.zy-hell .diff-list:nth-child(odd){ background-color:#4a4b4f !important; background-image:linear-gradient(160deg,rgba(78,79,84,.94) 0%,rgba(64,65,68,.94) 100%) !important; color:#faf7f2 !important; --white:#faf7f2; --muted:#e6e6e8; --cyan:#9ccafe; } section.zy-hell .feat-card:nth-child(even), section.zy-hell .film-karte:nth-child(even), section.zy-hell .wf-step:nth-child(even), section.zy-hell .price-card:nth-child(even), section.zy-hell .info-card:nth-child(even), section.zy-hell .diff-list:nth-child(even){ background-color:#f0e9dd !important; background-image:linear-gradient(160deg,rgba(250,247,242,.97) 0%,rgba(240,233,221,.97) 100%) !important; color:#303134 !important; --white:#303134; --muted:#565759; --cyan:#005bb8; } section.zy-tief .feat-card:nth-child(odd), section.zy-tief .film-karte:nth-child(odd), section.zy-tief .wf-step:nth-child(odd), section.zy-tief .price-card:nth-child(odd), section.zy-tief .info-card:nth-child(odd), section.zy-tief .diff-list:nth-child(odd){ background-color:#f0e9dd !important; background-image:linear-gradient(160deg,rgba(250,247,242,.97) 0%,rgba(240,233,221,.97) 100%) !important; color:#303134 !important; --white:#303134; --muted:#565759; --cyan:#005bb8; } section.zy-tief .feat-card:nth-child(even), section.zy-tief .film-karte:nth-child(even), section.zy-tief .wf-step:nth-child(even), section.zy-tief .price-card:nth-child(even), section.zy-tief .info-card:nth-child(even), section.zy-tief .diff-list:nth-child(even){ background-color:#4a4b4f !important; background-image:linear-gradient(160deg,rgba(78,79,84,.94) 0%,rgba(64,65,68,.94) 100%) !important; color:#faf7f2 !important; --white:#faf7f2; --muted:#e6e6e8; --cyan:#9ccafe; } /* Schrift folgt der Kachel, nicht dem Band */ .feat-card[style], .feat-card{} section .feat-card .feat-name, section .film-karte .film-titel{color:inherit !important} section .feat-card .feat-desc{color:inherit !important; opacity:.88} section .wf-step *, section .diff-list *{color:inherit !important} /* HIER STAND EIN BLOCK, DER DIE KOPFLEISTE FEST AUF CREME-SCHRIFT SETZTE — ENTFERNT. Er gehoerte zur nav-Notbremse: solange das