/* ══════════════════════════════════════════════════════════════════════════ INHALTS-ERGÄNZUNGEN zur Drohnenseite · 23.07.2026 ────────────────────────────────────────────────────────────────────────── GRUNDREGEL: Das Design stammt aus `_entwurf_drohnen_apple.css` und ist von Dominik mit 9/10 abgenommen. Diese Datei ändert davon NICHTS. Sie ergänzt ausschließlich Bausteine, die es im Entwurf noch nicht gab, und übernimmt dafür dessen Formensprache (20 px Radius, weiche weiße Fläche, kein Kasten). Frühere Fassungen dieser Datei enthielten eigene Rasterentwürfe und einen randlosen Filmblock — beides war nicht abgenommen und ist entfernt. ══════════════════════════════════════════════════════════════════════════ */ /* ── HERO: Ortsbezug und Preis ohne Fließtext ─────────────────────────────── Beides stand vorher in einem Absatz und hat den Hero ausgebremst. Der Ort gehört in die H1 (Google gewichtet sie stark, und der Leser beantwortet sich damit sofort „kommt der zu mir?"), der Preis steht als Marke daneben. */ .lp-h1 .h1-ort{display:block;margin-top:clamp(12px,1.4vw,20px); font-size:clamp(14px,1.25vw,19px);font-weight:400;letter-spacing:-.005em; line-height:1.35;color:rgba(247,247,242,.72);max-width:52ch} .preis-marke{display:inline-flex;align-items:center;gap:6px; padding:11px 18px;border-radius:999px; border:1px solid rgba(232,255,0,.42);background:rgba(232,255,0,.10); font-size:14px;color:rgba(247,247,242,.9);white-space:nowrap} .preis-marke b{color:var(--acc);font-weight:700} /* ── ERGEBNIS-FILM ────────────────────────────────────────────────────────── Im normalen Inhaltsbereich, mit demselben weichen Rahmen wie die Karten des Entwurfs. Format 1920×824 wie der Film selbst, damit nichts beschnitten wird. Lädt erst beim Klick — sonst kämen 9 MB ungefragt zum Hero-Film dazu. */ .beweis{position:relative;margin-top:clamp(18px,2.4vw,30px); border-radius:20px;overflow:hidden;background:#0b0908; aspect-ratio:1920/824; border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 44px rgba(0,0,0,.10)} .beweis img,.beweis video{width:100%;height:100%;object-fit:cover;display:block} .beweis video{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)} .beweis.laeuft video{opacity:1} .beweis.laeuft .beweis-start{opacity:0;pointer-events:none} .beweis-start{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;cursor:pointer;border:0; width:100%;background:none;color:#fff;font:inherit; transition:opacity .45s var(--ease)} .beweis-knopf{width:74px;height:74px;border-radius:50%;display:grid;place-items:center; background:var(--acc);color:#0b0908;font-size:24px;line-height:1;padding-left:5px; box-shadow:0 0 0 1px rgba(232,255,0,.5),0 0 28px rgba(232,255,0,.45); transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .beweis-start:hover .beweis-knopf{transform:scale(1.07); box-shadow:0 0 0 1px rgba(232,255,0,.7),0 0 44px rgba(232,255,0,.7)} /* Eigene ruhige Fläche statt Schlagschatten: die Beschriftung landet je nach Motiv auf einer hellen Stelle und wäre sonst unlesbar. */ .beweis-start > span:last-child{font-family:var(--fft);font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#fff; padding:7px 14px;border-radius:999px;background:rgba(0,0,0,.45); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} /* ── ABSCHLUSS mit ruhigem Film dahinter (Wunsch Dominik) ─────────────────── */ .lp-cta-band{position:relative;overflow:hidden} .cta-film{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .cta-film video{width:100%;height:100%;object-fit:cover;display:block; opacity:.18;filter:saturate(.85)} /* Nach oben und unten ausmaskieren, damit im Seitenverlauf keine Kante entsteht */ .cta-film::after{content:'';position:absolute;inset:0; background:linear-gradient(to bottom,#f6f5f0 0%,rgba(246,245,240,.30) 24%,rgba(246,245,240,.30) 76%,#f6f5f0 100%)} .lp-cta-band .wrap{position:relative;z-index:1} .zusage{display:inline-flex;align-items:center;gap:10px;margin-top:18px; padding:11px 18px;border-radius:999px; background:rgba(232,255,0,.14);border:1px solid rgba(140,155,0,.35); font-size:14px;color:#3f3c34} .zusage b{color:#15140e} /* ── „GUT ZU WISSEN": alles Erklärende, eingeklappt ───────────────────────── Ablauf, Lieferumfang, Person und Nachweise stehen vollständig im Quelltext (Google und KI-Assistenten lesen sie), kosten den Besucher aber keine Aufmerksamkeit. Formensprache bewusst wie die Karten des Entwurfs. */ .gzw{margin-top:clamp(20px,2.4vw,32px)} .gzw details{border-radius:16px;background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.055);margin-bottom:10px;overflow:hidden} .gzw summary{cursor:pointer;list-style:none;padding:17px 22px; font-size:16px;font-weight:600;color:#15140e; display:flex;align-items:center;justify-content:space-between;gap:14px} .gzw summary::-webkit-details-marker{display:none} .gzw summary::after{content:'+';font-size:20px;font-weight:400;color:#8a9200; transition:transform .3s var(--ease)} .gzw details[open] summary::after{transform:rotate(45deg)} .gzw .gzw-inhalt{padding:0 22px 20px;max-width:78ch} .gzw .gzw-inhalt p{font-size:15px;line-height:1.6;color:#57544a;margin-bottom:12px} .gzw .gzw-inhalt p:last-child{margin-bottom:0} .gzw .gzw-inhalt h4{font-size:15.5px;color:#15140e;margin:16px 0 6px} .gzw .gzw-inhalt h4:first-child{margin-top:0} .pn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px; border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.075); font-size:12.5px;color:#4f4c42;margin:0 7px 7px 0} .pn::before{content:'✓';color:#5c6a00;font-weight:700} body.flussB .pn{color:#4f4c42} /* ══════════════════════════════════════════════════════════════════════════ NUR NOCH VON DER ENGLISCHEN SEITE GENUTZT (en/index.html) Die deutsche Fassung ist schlank; die englische steht noch auf der ausführlichen Struktur. Wird sie später ebenfalls verschlankt, kann dieser Block ersatzlos weg. ══════════════════════════════════════════════════════════════════════════ */ .liefer{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px); margin-top:clamp(18px,2.2vw,28px)} .lf{padding:24px 24px 26px;border-radius:20px; background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(255,255,255,.5)); border:1px solid rgba(0,0,0,.055);box-shadow:0 18px 44px rgba(0,0,0,.07); transition:transform .45s var(--ease),box-shadow .45s var(--ease), border-color .45s var(--ease),background .45s var(--ease)} .lf:hover{transform:translateY(-5px);border-color:rgba(140,155,0,.34); background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(255,255,255,.68)); box-shadow:0 24px 54px rgba(0,0,0,.11)} .lf-fmt{display:block;font-family:var(--fft);font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#8a9200;margin-bottom:10px} .lf h4{font-size:17.5px;letter-spacing:-.015em;margin-bottom:7px;color:#15140e} .lf p{font-size:14.5px;line-height:1.55;color:#57544a} body.flussB .lf h4{color:#15140e} body.flussB .lf p{color:#57544a} @media(max-width:860px){.liefer{grid-template-columns:1fr}} .pilot{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,44px); align-items:start;margin-top:clamp(18px,2.2vw,28px);max-width:76ch} .pilot-text p{font-size:clamp(15.5px,1.15vw,17px);line-height:1.65;margin-bottom:15px} .pilot-text p:last-of-type{margin-bottom:0} .pilot-nachweise{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px} /* ══════════════════════════════════════════════════════════════════════════ KARUSSELL-KACHELN — größer, Bild größer, Bild in Bewegung (Ansagen Dominik 23.07.: „Die Kacheln müssen definitiv größer sein … das Bild muss größer sein und zur ganzen Kachel passen. Das muss ein optischer Eyecatcher sein.") Der Aufbau des Entwurfs bleibt: Text oben, Bild darunter, Pfeile unten rechts. Geändert sind nur die Maße und dass das Bild jetzt läuft. ══════════════════════════════════════════════════════════════════════════ */ body.flussB .hl-kachel{ /* vorher clamp(320px,33vw,800px) — jetzt spürbar breiter und flacher, damit das Bild mehr Fläche bekommt statt der Text */ flex:0 0 clamp(340px,44vw,980px); aspect-ratio:1.42/1} /* Text kompakter halten: jede Zeile, die der Text weniger braucht, bekommt das Bild dazu. */ body.flussB .hl-kachel .hl-inhalt{padding:18px 24px 10px} body.flussB .hl-kachel h3{font-size:clamp(19px,1.7vw,26px);margin-bottom:4px} body.flussB .hl-kachel p{font-size:clamp(13px,1.02vw,15px);margin-bottom:0} body.flussB .hl-kachel .more{margin-top:7px} /* Das alte Hintergrundbild des Entwurfs abschalten — es ist durch einen echten Bildbereich ersetzt, der Standbild UND Videoschleife trägt. */ body.flussB .hl-kachel::after{display:none !important} .hl-bild{position:relative;display:block;flex:1 1 auto;min-height:0; margin:0 10px 10px;border-radius:13px;overflow:hidden;background:#0b0908} .hl-bild img,.hl-bild video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .hl-bild img{transition:transform 1.2s var(--ease)} .hl-kachel:hover .hl-bild img{transform:scale(1.05)} /* Der Film liegt über dem Standbild und blendet beim Darüberfahren auf. Quelle hängt in data-src und wird erst dann gesetzt — sonst lädt der Browser sechs Filme, die niemand angefordert hat. */ .hl-bild video{opacity:0;transition:opacity .55s var(--ease)} .hl-kachel:hover .hl-bild video{opacity:1} @media(max-width:680px){ body.flussB .hl-kachel{flex:0 0 86%;aspect-ratio:1.25/1} } /* Preise: „ab" als kleine Vorsilbe, damit die Zahl die Hauptrolle behält. */ .preis-wert .ab{font-size:.42em;font-weight:500;color:#7b7768; margin-right:.35em;vertical-align:.28em;letter-spacing:0} .preis:hover .preis-wert .ab,.preis.neon-demo .preis-wert .ab{color:rgba(232,255,0,.75)} /* ══════════════════════════════════════════════════════════════════════════ TYPO-SKALA NACH APPLE-MASS · 23.07.2026 ────────────────────────────────────────────────────────────────────────── Gemessen statt geraten. Apple (macbook-air und iphone, 1440 px Fenster): Schlagzeile 80 px · Fließtext 17 px · Verhältnis 4,7 : 1 · 14 Textfarben Luftraumwerk vorher: Schlagzeile 46 px · Fließtext 15 px · Verhältnis 3,1 : 1 · 21 Textfarben Der Unterschied ist keine Geschmacksfrage: Apples Wirkung entsteht aus EXTREMEM Größenkontrast bei WENIG Farben. Genau das stellen diese Regeln her. Beleg dafür, dass das messbar auf die Wirkung schlägt: Reinecke, Yeh, Miratrix, Mardiko, Zhao, Liu & Gajos, „Predicting Users' First Impressions of Website Aesthetics…", CHI 2013 (Harvard) — 548 Testpersonen, 450 Seiten: Wahrgenommene visuelle KOMPLEXITÄT und FARBIGKEIT erklären zusammen rund die Hälfte der Streuung im Schönheitsurteil, gefällt nach 500 Millisekunden Betrachtung. Weniger Komplexität und weniger Farbe = besseres Urteil. ══════════════════════════════════════════════════════════════════════════ */ /* 1 · Schlagzeile deutlich größer — der stärkste Einzelhebel */ body.flussB .lp-h1{font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.035em} /* 2 · Sektionsüberschriften klar UNTER der Schlagzeile, aber weiter groß */ body.flussB .lp-sec .sec-h{font-size:clamp(30px,3.5vw,50px);line-height:1.06;letter-spacing:-.03em} /* 3 · Fließtext auf Apple-Maß: 17 px statt 15 px, ruhige Zeilenlänge */ body.flussB .lp-sec p,body.flussB .lp-sec .lead{font-size:17px;line-height:1.55;max-width:62ch} body.flussB .lp-hero .lp-sub{font-size:18px} /* 4 · Farbigkeit senken: eine Textfarbe für Fließtext, eine für Überschriften. Vorher liefen mehrere Grautöne nebeneinander — genau die Art Unruhe, die in der CHI-Studie das Urteil drückt. */ body.flussB .lp-sec p,body.flussB .lp-sec .lead, body.flussB .gzw .gzw-inhalt p,body.flussB .preis-was{color:#55524a} body.flussB .lp-sec h2,body.flussB .lp-sec h3,body.flussB .lp-sec h4, body.flussB .gzw summary,body.flussB .preis-wert{color:#15140e} /* 5 · Mehr Luft zwischen den Blöcken — Apple lässt der Aussage Platz. */ body.flussB .lp-sec{padding-top:clamp(70px,9vw,150px);padding-bottom:clamp(70px,9vw,150px)} /* 6 · Der Personen-Abschnitt trägt nur EINE Aussage. Deshalb bekommt er die Anmutung eines Zitats statt eines Textblocks: viel Luft, große Schrift, kein Kasten. */ body.flussB .prose .lead{font-size:clamp(19px,1.5vw,23px);line-height:1.5;color:#3f3c34} /* ══════════════════════════════════════════════════════════════════════════ BEWEGUNG BEIM SCROLLEN — Apple-Mechanik, Schritt 2 · 23.07.2026 ────────────────────────────────────────────────────────────────────────── Beobachtet auf apple.com: Inhalte steigen beim Erscheinen deutlich weiter und langsamer auf als üblich, und MEDIEN kommen leicht überskaliert herein und setzen sich auf 1.0. Das erzeugt den Eindruck, dass die Seite „atmet", ohne dass irgendetwas blinkt oder springt. Die Basis-Reveal der Website (22 px / 0,8 s) ist dafür zu knapp; hier wird sie NUR auf dieser Seite verstärkt — andere Seiten bleiben unberührt. Kurve: cubic-bezier(.32,.72,0,1) — schneller Antritt, langes weiches Auslaufen. Genau das unterscheidet teure von billiger Bewegung. ══════════════════════════════════════════════════════════════════════════ */ body.flussB .rv{ opacity:0;transform:translateY(48px); transition:opacity 1.05s cubic-bezier(.32,.72,0,1),transform 1.05s cubic-bezier(.32,.72,0,1)} body.flussB .rv.on{opacity:1;transform:none} body.flussB .rv.d1{transition-delay:.10s} body.flussB .rv.d2{transition-delay:.20s} body.flussB .rv.d3{transition-delay:.30s} /* Medien kommen leicht überskaliert herein und setzen sich — der Film und jedes Kachelbild. */ body.flussB .beweis img, body.flussB .hl-bild img{transform:scale(1.08); transition:transform 1.4s cubic-bezier(.32,.72,0,1)} body.flussB .beweis.on img, body.flussB .rv.on .hl-bild img{transform:scale(1)} /* Beim Darüberfahren zoomt das Kachelbild weiter — das bleibt erhalten. */ body.flussB .hl-kachel:hover .hl-bild img{transform:scale(1.05)} /* Der Film bekommt mehr Fläche: breiter als der Textbereich, aber nicht randlos — randlos hat sich am Hero-Überlauf gestoßen. */ .film-breit{width:min(92vw,1600px);margin-left:calc(50% - min(46vw,800px))} .film-huelle{overflow:visible} /* Sanfte Parallaxe: der Film schiebt sich beim Scrollen minimal gegen die Seite. Maximal 40 px, sonst wirkt es wie ein Effekt statt wie Tiefe. */ .beweis{will-change:transform} @media (prefers-reduced-motion: reduce){ body.flussB .rv{transition-duration:.01s;transform:none} body.flussB .beweis img,body.flussB .hl-bild img{transform:none;transition:none} .beweis{transform:none !important} } /* ══════════════════════════════════════════════════════════════════════════ FARBE — wie Apple TV und Netflix es machen · 23.07.2026 ────────────────────────────────────────────────────────────────────────── Wichtige Beobachtung: Apple und Netflix färben NICHT die Oberfläche. Die bleibt ruhig. Die Farbe kommt aus dem INHALT — jede Kachel trägt den Ton ihres eigenen Motivs, und der leuchtet erst beim Zugreifen auf. Das ist genau der Weg, den die CHI-2013-Studie (Reinecke/Gajos, Harvard) nahelegt: Farbe ja, visuelle Unruhe nein. Sechs bunte Flächen nebeneinander wären das Gegenteil und würden das Urteil nach 500 ms verschlechtern. Die Töne stammen aus den Motiven selbst: je Bild wurde der kräftigste, mittelhelle Farbton ermittelt und auf eine gemeinsame Helligkeit normiert, damit die Reihe zusammenklingt statt zu schreien. ══════════════════════════════════════════════════════════════════════════ */ /* Die Ziffer trägt den Ton — kleinster möglicher Farbeinsatz, größte Wirkung. */ body.flussB .hl-kachel .num{color:var(--ton,#8a9200); transition:color .4s var(--ease)} /* Ein hauchdünner farbiger Saum am oberen Bildrand: verbindet Text und Motiv, ohne eine Fläche einzufärben. */ .hl-bild::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--ton,#8a9200),transparent 78%); opacity:.85;transition:opacity .45s var(--ease)} /* Beim Zugreifen leuchtet der Ton auf — Rand, Schein und Schriftakzent. Das ist der Netflix-Moment: die Kachel hebt sich farbig aus der Reihe. */ body.flussB .hl-kachel{transition:transform .5s var(--ease),box-shadow .5s var(--ease), border-color .5s var(--ease)} body.flussB .hl-kachel:hover{ transform:translateY(-8px); border-color:color-mix(in srgb,var(--ton) 55%,transparent); box-shadow: 0 0 0 1px color-mix(in srgb,var(--ton) 45%,transparent), 0 18px 40px color-mix(in srgb,var(--ton) 26%,transparent), 0 34px 70px rgba(0,0,0,.16)} body.flussB .hl-kachel:hover .more{color:color-mix(in srgb,var(--ton) 80%,#15140e)} body.flussB .hl-kachel:hover .hl-bild::before{opacity:1} /* ── „WER FLIEGT" als Kachel, nicht als Textblock ─────────────────────────── Ansage Dominik: „Mach daraus auch eine Kachel." Gleiche Formensprache wie die Einsatzbereiche, eigener Ton (Markenlime), damit sie als Absender erkennbar bleibt und nicht wie eine siebte Branche wirkt. */ .pilot-kachel{--ton:#c8dc2c; position:relative;display:block;margin-top:clamp(18px,2.4vw,30px); border-radius:22px;overflow:hidden;background:#0e0d0a; aspect-ratio:2.6/1;border:1px solid rgba(255,255,255,.10); box-shadow:0 22px 54px rgba(0,0,0,.20)} .pilot-kachel img,.pilot-kachel video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:.42;transition:transform 1.4s var(--ease),opacity .6s var(--ease)} .pilot-kachel:hover img{transform:scale(1.05)} .pilot-kachel::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(100deg,rgba(8,8,6,.94) 0%,rgba(8,8,6,.72) 46%,rgba(8,8,6,.18) 100%)} .pilot-inhalt{position:relative;z-index:2;height:100%;display:flex;flex-direction:column; justify-content:center;padding:clamp(26px,3.4vw,56px);max-width:60ch} .pilot-inhalt .eyebrow-lime{display:inline-block;font-family:var(--fft);font-size:10.5px; font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ton);margin-bottom:12px} .pilot-inhalt h3{font-size:clamp(24px,2.9vw,42px);line-height:1.08;letter-spacing:-.03em; color:#fff;margin-bottom:12px} .pilot-inhalt p{font-size:clamp(15px,1.2vw,18px);line-height:1.5; color:rgba(255,255,255,.78);margin:0;max-width:52ch} body.flussB .pilot-inhalt h3{color:#fff} body.flussB .pilot-inhalt p{color:rgba(255,255,255,.78)} @media(max-width:760px){.pilot-kachel{aspect-ratio:1.3/1}} /* ══════════════════════════════════════════════════════════════════════════ AUS DEN REFERENZBILDERN ÜBERNOMMEN (Google Store · Apple Store) · 23.07. ────────────────────────────────────────────────────────────────────────── Drei Muster, die auf allen vier Vorlagen gleich funktionieren: 1 · ZWEIFARBIGE ÜBERSCHRIFT „Gerade erst vorgestellt. Sieh dir jetzt an, was es Neues gibt." Fette Aussage, dann eine GRAUE Fortsetzung in derselben Zeile. Das schafft Hierarchie ohne zweite Schriftgröße und ohne zweite Farbe. 2 · GETÖNTE KARTEN STATT WEISS MIT SCHATTEN Google Store: jede Karte hat einen zarten eigenen Farbton als Fläche — hellgrau, blassblau, lavendel, mint. KEIN Schlagschatten. Genau der Schatten unter weißen Karten ist das, was nach Baukasten aussieht. Der Ton kommt hier aus dem Motiv der Kachel (--ton), also aus dem Inhalt — wie bei Google, wo er aus der Produktfarbe kommt. 3 · PILLEN-KNOPF IN DER KARTE „Mehr erfahren" als umrandete Pille, nicht als Textlink mit Pfeil. ══════════════════════════════════════════════════════════════════════════ */ /* 1 · Graue Fortsetzung der Überschrift */ .h2-grau{color:#a8a49a;font-weight:inherit} body.flussB .lp-sec .sec-h .h2-grau{color:#a29e94} body.flussB section:nth-of-type(-n+2) .sec-h .h2-grau{color:rgba(247,247,242,.45)} /* 2 · Getönte Kachel statt weiß mit Schatten */ body.flussB .hl-kachel{ background:color-mix(in srgb,var(--ton,#8a9200) 9%,#ffffff); border:1px solid color-mix(in srgb,var(--ton,#8a9200) 16%,transparent); box-shadow:none} body.flussB .hl-kachel:hover{ background:color-mix(in srgb,var(--ton,#8a9200) 15%,#ffffff); border-color:color-mix(in srgb,var(--ton) 42%,transparent); box-shadow:0 20px 46px color-mix(in srgb,var(--ton) 22%,transparent)} /* Der farbige Saum am Bildrand entfällt — die Fläche trägt die Farbe jetzt selbst, beides zusammen wäre zu viel. */ .hl-bild::before{display:none} /* 3 · Pillen-Knopf wie im Google Store */ .hl-kachel .pille{display:inline-flex;align-items:center;justify-content:center; margin-top:12px;padding:9px 18px;border-radius:999px; border:1px solid color-mix(in srgb,var(--ton,#15140e) 45%,#15140e); background:transparent;color:#15140e; font-family:var(--fft);font-size:10.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase; transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)} .hl-kachel:hover .pille{background:#15140e;border-color:#15140e;color:#fff} body.flussB .hl-kachel .pille{color:#15140e} /* Preiskacheln nach demselben Prinzip: Fläche statt Schatten. */ body.flussB .preis{box-shadow:none; background:linear-gradient(165deg,rgba(255,255,255,.92),rgba(255,255,255,.66)); border:1px solid rgba(0,0,0,.06)} /* Der Neon-Umschlag beim Zugreifen bleibt — der gefällt und ist abgenommen. */ /* Fehler behoben: Die Grundregel `body.flussB .hl-kachel .pille{color:#15140e}` hat den hellen Text im Zugriffszustand überschrieben — schwarz auf schwarz. Deshalb hier mit derselben Gewichtung nachziehen. */ body.flussB .hl-kachel:hover .pille{background:#15140e;border-color:#15140e;color:#fff} /* ══════════════════════════════════════════════════════════════════════════ GRUND AUF WEISS STATT CREME · 23.07.2026 ────────────────────────────────────────────────────────────────────────── Auf allen vier Referenzseiten (Google Store, Apple Store) ist der Grund NEUTRAL WEISS. Der Entwurf lief unten in einen warmen Sandton aus. Solange die Karten selbst ungefärbt waren, hat das getragen — sobald sie einen eigenen Farbton bekommen, kippt Creme das Ganze ins Verspielte, weil zwei Wärmen gegeneinander laufen. Der Verlauf selbst bleibt exakt erhalten (Schwarz oben → hell unten, gleiche Helligkeitsstufen, gleiche Prozentpunkte) — nur die Wärme ist herausgenommen. Damit bleibt der Übergang, den Dominik ausdrücklich gut findet, unangetastet. ══════════════════════════════════════════════════════════════════════════ */ body.flussB{ background-color:#ffffff; background-image:linear-gradient(to bottom, #000000 0%, #040404 4%, #101010 8%, #262523 12%, #4e4d4a 16%, #868581 20%, #b4b3b0 24%, #d2d1cf 29%, #e7e7e6 36%, #f1f1f1 46%, #f7f7f7 60%, #fbfbfb 78%, #fefefe 90%, #ffffff 100%)} /* Die Ausmaskierung hinter dem Abschluss muss denselben Grund treffen, sonst entsteht dort eine sichtbare warme Kante. */ .cta-film::after{ background:linear-gradient(to bottom,#fbfbfb 0%,rgba(251,251,251,.30) 24%,rgba(251,251,251,.30) 76%,#fbfbfb 100%)} /* Flächen, die noch warm waren, auf neutral ziehen — Karten, Preisboxen, Aufklapper. Weiß auf Weiß braucht eine Haarlinie statt eines Schattens. */ body.flussB .preis, body.flussB .price-box{ background:#ffffff;border:1px solid rgba(0,0,0,.08);box-shadow:none} body.flussB .gzw details{ background:#ffffff;border:1px solid rgba(0,0,0,.08)} body.flussB .pn{background:#ffffff;border-color:rgba(0,0,0,.10)} /* Kacheln: Ton auf WEISS gemischt statt auf Creme — dadurch wirken die Pastelltöne wie bei Google und nicht wie eingefärbtes Papier. */ body.flussB .hl-kachel{background:color-mix(in srgb,var(--ton,#8a9200) 8%,#ffffff)} body.flussB .hl-kachel:hover{background:color-mix(in srgb,var(--ton,#8a9200) 14%,#ffffff)} /* ══════════════════════════════════════════════════════════════════════════ MENÜ-WELTEN — Kopfleiste nach Google-Store-Prinzip · 23.07.2026 ────────────────────────────────────────────────────────────────────────── Aus Dominiks Bildschirmaufnahme abgelesen: Beim Draufgehen klappt eine weiße Fläche unter der Leiste aus, und die GANZE Seite dahinter dunkelt ab. Das ist der Unterschied zwischen einer Wortliste und einer Welt: Der Vorhang nimmt der Seite die Aufmerksamkeit, das Panel bekommt sie. ══════════════════════════════════════════════════════════════════════════ */ /* Der Vorhang liegt über allem — außer über der Leiste und dem Panel. */ .menue-vorhang{position:fixed;inset:0;z-index:60;background:rgba(8,8,6,.55); opacity:0;transition:opacity .28s var(--ease); backdrop-filter:saturate(.85) blur(1px);-webkit-backdrop-filter:saturate(.85) blur(1px)} .menue-vorhang.auf{opacity:1} .menue-welt{position:fixed;left:0;right:0;top:0;z-index:70; padding-top:var(--kopfhoehe,72px); opacity:0;transform:translateY(-10px); transition:opacity .26s var(--ease),transform .26s var(--ease); pointer-events:none} .menue-welt.auf{opacity:1;transform:none;pointer-events:auto} .welt-innen{max-width:1240px;margin:0 auto;background:#fff; border-radius:0 0 22px 22px;padding:clamp(22px,2.4vw,34px); display:grid;grid-template-columns:1fr auto auto;gap:clamp(20px,3vw,56px); box-shadow:0 26px 60px rgba(0,0,0,.22)} .welt-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .welt-kacheln a{display:block;text-decoration:none;color:#15140e; font-size:13.5px;font-weight:600} .wk-bild{display:block;aspect-ratio:4/3;border-radius:14px;margin-bottom:8px; background-image:var(--b);background-size:cover;background-position:center; transition:transform .4s var(--ease)} .welt-kacheln a:hover .wk-bild{transform:scale(1.04)} .welt-spalte{min-width:170px} .welt-titel{font-family:var(--fft);font-size:10.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:#8a9200;margin-bottom:12px} .welt-spalte a{display:block;padding:9px 0;text-decoration:none; font-size:15px;color:#3f3c34;border-bottom:1px solid rgba(0,0,0,.06); transition:color .25s} .welt-spalte a:last-child{border-bottom:0} .welt-spalte a:hover{color:#15140e} @media(max-width:860px){ .menue-welt{display:none} /* auf dem Handy übernimmt das Burger-Menü */ }