/* ============================================================= Bausatz — der Aufbau der Demo-Seite. Hier stehen KEINE Farben und keine Schriftnamen, nur Variablen. Die Farbwelt kommt aus marken.css, der Knopfstil aus knoepfe.css. Genau deshalb kann der Konfigurator beides zur Laufzeit wechseln, ohne dass eine Zeile HTML neu gebaut werden muss. Die Vorlagen (s1 s2 s3 p1 p2 p3 c1 c2 c3) hängen als data-vorlage am und verschieben nur Anordnung und Größen. ============================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--papier); color:var(--tinte); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } h1,h2,h3,h4{ margin:0 0 .5em; line-height:1.1; font-weight:400; letter-spacing:-.015em; } h1{ font-family:var(--display); font-size:clamp(2.4rem,6vw,4.4rem); } h2{ font-family:var(--display); font-size:clamp(1.7rem,3.4vw,2.7rem); } h3{ font-size:1.18rem; font-weight:600; font-family:var(--sans); letter-spacing:-.01em; } p{ margin:0 0 1em; } .mitte{ width:min(100% - 2.5rem, 74rem); margin-inline:auto; } .schmal{ width:min(100% - 2.5rem, 48rem); margin-inline:auto; } .augen{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grau); margin:0 0 1rem; } .lead{ font-size:1.16rem; color:var(--tinte-weich); max-width:44ch; } .klein{ font-size:.86rem; color:var(--grau); } .band{ padding:clamp(3.5rem,8vw,6.5rem) 0; border-top:1px solid var(--linie); } .band--stiller{ background:var(--papier2); } .reihe{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; } /* ---- Kennzeichnung: jede Demo sagt, dass sie eine ist --------- */ .vorschau-band{ position:sticky; top:0; z-index:60; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; padding:.55rem 1rem; font-size:.82rem; line-height:1.35; background:var(--akzent); color:var(--akzent-text); } .vorschau-band b{ font-weight:600; } /* ---- Kopf ------------------------------------------------------ */ .kopf{ position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--papier) 86%, transparent); border-bottom:1px solid var(--linie); } .vorschau-band + .kopf{ top:2.4rem; } .kopf-innen{ display:flex; align-items:center; gap:1.5rem; padding:.85rem 0; } .marke{ font-family:var(--display); font-size:1.2rem; text-decoration:none; white-space:nowrap; } [data-marke="schiefer"] .marke,[data-marke="stahl"] .marke,[data-marke="nacht-strom"] .marke{ font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:1rem; } .menue{ display:flex; gap:1.4rem; margin-left:auto; flex-wrap:wrap; } .menue a{ text-decoration:none; color:var(--tinte-weich); font-size:.95rem; } .menue a:hover,.menue a[aria-current="page"]{ color:var(--akzent); } .kopf .knopf{ padding:.6em 1.1em; font-size:.9rem; } @media (max-width:860px){ .kopf-innen{ flex-wrap:wrap; gap:.7rem; } .menue{ order:3; width:100%; margin-left:0; gap:1rem; font-size:.9rem; } .kopf .knopf{ margin-left:auto; } } /* ---- Hero: fünf Bauarten -------------------------------------- */ .hero{ position:relative; overflow:hidden; } .hero-inhalt{ position:relative; z-index:2; } .hero-bild{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--papier2); border:1px solid var(--linie); aspect-ratio:4/3; min-height:240px; } .hero-bild__marke{ position:absolute; inset:auto 0 0 0; padding:.7rem .9rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grau); background:linear-gradient(to top, var(--papier2), transparent); } .hero-bild svg{ width:100%; height:100%; display:block; } /* geteilt */ .hero--geteilt .mitte{ display:grid; gap:clamp(1.5rem,4vw,3.5rem); grid-template-columns:1.05fr .95fr; align-items:center; padding-block:clamp(3rem,8vw,6rem); } @media (max-width:860px){ .hero--geteilt .mitte{ grid-template-columns:1fr; } } /* mitte */ .hero--mitte .mitte{ text-align:center; padding-block:clamp(4rem,11vw,8rem); } .hero--mitte .lead{ margin-inline:auto; } .hero--mitte .reihe{ justify-content:center; } /* breit */ .hero--breit .mitte{ padding-block:clamp(3.5rem,9vw,7rem); } .hero--breit h1{ font-size:clamp(2.8rem,8.5vw,6rem); max-width:16ch; } .hero--breit .hero-bild{ margin-top:2.5rem; aspect-ratio:21/9; } /* voll — Bewegung füllt den Kopf */ .hero--voll{ min-height:min(86vh,760px); display:flex; align-items:flex-end; } .hero--voll .mitte{ padding-block:clamp(3rem,7vw,5rem); } .hero--voll .lead{ max-width:38ch; } /* film / filmruhe */ .hero--film{ min-height:min(92vh,820px); display:flex; align-items:flex-end; } .hero--film .mitte{ padding-block:clamp(3rem,7vw,5rem); position:relative; z-index:4; } .hero--filmruhe{ min-height:min(80vh,700px); display:flex; align-items:center; text-align:center; } .hero--filmruhe .lead{ margin-inline:auto; } .hero--filmruhe .reihe{ justify-content:center; } /* Bewegungsfläche hinter dem Kopf. Sie nimmt Zeiger an — siehe "Zeiger bis zur Bewegung durchlassen" weiter unten. */ .bewegung{ position:absolute; inset:0; z-index:0; border:0; width:100%; height:100%; } .bewegung--feld{ position:relative; z-index:0; aspect-ratio:4/3; min-height:240px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--linie); } .bewegung--feld iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .hero--voll .hero-inhalt,.hero--film .hero-inhalt,.hero--filmruhe .hero-inhalt{ text-shadow:0 2px 20px rgba(0,0,0,.55); } /* Der Schleier muss zwei Dinge zugleich: den Text lesbar halten und die Bewegung sehen lassen. Er war nach oben hin fast durchsichtig (12 % bei 62 % Höhe, oben ganz weg). Über einem hellen Effekt — Flüssigmetall, Strom, Nebel — stand die Überschrift damit auf fast weißem Grund und war kaum zu lesen. Jetzt deckt er nie weniger als 34 %, und hinter dem Textblock selbst liegt zusätzlich ein runder Schleier (unten). */ .schleier{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, color-mix(in srgb, var(--papier) 95%, transparent) 0%, color-mix(in srgb, var(--papier) 80%, transparent) 32%, color-mix(in srgb, var(--papier) 56%, transparent) 64%, color-mix(in srgb, var(--papier) 34%, transparent) 100%); } .hero--filmruhe .schleier{ background:color-mix(in srgb, var(--papier) 72%, transparent); } /* Der Textblock bringt seinen eigenen Schleier mit — ein runder, weicher, kein Kasten mit Kante. Erst damit ist die Schrift auch dann sicher lesbar, wenn im Effekt genau dahinter eine helle Stelle steht. */ .hero .hero-inhalt{ isolation:isolate; } .hero .hero-inhalt::before{ content:""; position:absolute; inset:-14% -8%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 70% 62% at 38% 50%, color-mix(in srgb, var(--papier) 82%, transparent) 0%, color-mix(in srgb, var(--papier) 58%, transparent) 48%, transparent 78%); } .hero--mitte .hero-inhalt::before, .hero--filmruhe .hero-inhalt::before{ background:radial-gradient(ellipse 70% 62% at 50% 50%, color-mix(in srgb, var(--papier) 82%, transparent) 0%, color-mix(in srgb, var(--papier) 58%, transparent) 48%, transparent 78%); } /* Ein Textschatten in JEDER Kopfbauart, nicht nur über Film und Vollfläche — hinter "geteilt" und "mitte" liegt genauso ein Effekt. */ .hero .hero-inhalt h1, .hero .hero-inhalt .lead, .hero .hero-inhalt .augen{ text-shadow:0 1px 2px color-mix(in srgb, var(--papier) 88%, transparent), 0 3px 16px color-mix(in srgb, var(--papier) 72%, transparent); } /* Stille Knöpfe sind nur Umriss — über einem Effekt verschwinden sie. Sie bekommen eine eigene Fläche, ohne den Stil aufzugeben. */ .hero .reihe .knopf--still, .band--bewegt .reihe .knopf--still{ background:color-mix(in srgb, var(--papier) 78%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } /* ---- Zeiger bis zur Bewegung durchlassen ---------------------- Die Effekte reagieren auf die Maus. Über ihnen liegen aber der Schleier (z-index 1) und der Textkasten (2) — und der Kasten ist groß, auch wo nichts steht. Deshalb kam der Zeiger nur am äußersten Rand beim Effekt an. Lösung: die Kästen sind durchlässig, die Dinge darin, die man wirklich anfassen muss, nicht. Das gilt für file:// genauso wie über einen Server — anders als beim Weiterreichen per JavaScript, das Chrome bei file:// sperrt. Preis: im Kopf und in bewegten Abschnitten kann man Text nicht mehr markieren. In einer Vorschau ist das der günstigere Tausch. */ .hero .hero-inhalt, .band--bewegt > .mitte{ pointer-events:none; } .hero .hero-inhalt a, .hero .hero-inhalt button, .hero .hero-inhalt input, .hero .hero-inhalt textarea, .hero .hero-inhalt label, .hero .hero-inhalt summary, .band--bewegt > .mitte a, .band--bewegt > .mitte button, .band--bewegt > .mitte input, .band--bewegt > .mitte textarea, .band--bewegt > .mitte label, .band--bewegt > .mitte summary, .band--bewegt > .mitte details{ pointer-events:auto; } /* Die Textbänder und Kapitelmarken über dem Film liegen ebenfalls nur im Weg — sie sind reine Beschriftung. */ .filmbaender, .kapitel, .filmmarke{ pointer-events:none; } /* Filmbühne mit echtem Film ------------------------------------ Die Bahn ist der Scrollweg, die Bühne klebt darin fest. Genau so arbeitet die echte Cinematic-Seite: der Weg durch die Bahn treibt die Zeit im Film. 200vh geben dem Besucher rund einen Bildschirm Scrollweg — genug, um zu sehen, dass der Film mitläuft, wenig genug, dass die Vorschau nicht endlos wird. */ .filmbahn{ position:relative; height:200vh; } .filmbahn > .hero{ position:sticky; top:0; height:100vh; min-height:0; overflow:hidden; } /* Ohne Film kein Scrollweg: die Bühne steht wieder für sich. Wichtig ist das "and (pointer:coarse)": die Breite hier ist im Konfigurator die Breite des VORSCHAU-RAHMENS, nicht die des Bildschirms. Ohne den Zusatz fiel die Vorschau am Rechner auf die Handy-Fassung zurück und der Film wurde nie geladen. */ @media (max-width:720px) and (pointer: coarse){ .filmbahn{ height:auto; } .filmbahn > .hero{ position:static; height:auto; min-height:min(84vh,720px); } } @media (prefers-reduced-motion: reduce){ .filmbahn{ height:auto; } .filmbahn > .hero{ position:static; height:auto; min-height:min(84vh,720px); } } .filmfilm{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; will-change:transform; transform:translateZ(0); } .filmfilm.da{ opacity:1; } .filmmarke{ position:absolute; z-index:4; left:50%; bottom:.7rem; transform:translateX(-50%); margin:0; width:min(92%,44rem); text-align:center; font-size:.78rem; line-height:1.4; color:var(--tinte-weich); background:color-mix(in srgb, var(--papier) 62%, transparent); border:1px solid var(--linie); border-radius:999px; padding:.35em 1em; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } @media (max-width:640px){ .filmmarke{ font-size:.7rem; padding:.3em .7em; } } /* Filmbühne: Grund unter dem Film */ .filmplatte{ position:absolute; inset:0; z-index:0; background: radial-gradient(120% 80% at 50% 10%, color-mix(in srgb,var(--akzent) 22%, transparent), transparent 60%), linear-gradient(160deg, var(--panel), var(--papier2)); } .filmplatte::after{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(115deg, transparent 0 38px, color-mix(in srgb,var(--tinte) 4%, transparent) 38px 76px); animation:filmzug 18s linear infinite; } @keyframes filmzug{ to{ transform:translate3d(-76px,0,0); } } @media (prefers-reduced-motion: reduce){ .filmplatte::after{ animation:none; } } .filmhinweis{ position:absolute; z-index:3; left:50%; top:8%; transform:translateX(-50%); text-align:center; width:min(90%,34rem); } .hero--filmruhe .filmhinweis{ top:auto; bottom:1.6rem; } .filmhinweis b{ display:block; font-family:var(--display); font-size:clamp(1.3rem,3vw,2rem); } .filmhinweis span{ display:block; margin-top:.4rem; font-size:.92rem; color:var(--tinte-weich); } .filmbaender{ position:absolute; inset:0; z-index:2; pointer-events:none; } /* Über echtem Filmbild braucht jedes Band seinen eigenen Schleier und einen Schatten — sonst verschwindet der Text an hellen Stellen. */ .filmband{ position:absolute; max-width:26ch; font-size:.95rem; color:var(--tinte-weich); isolation:isolate; text-shadow:0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8); } .filmband::before{ content:""; position:absolute; inset:-32% -20%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 72% 64% at 50% 50%, rgba(5,5,10,.66) 0%, rgba(5,5,10,.44) 46%, rgba(5,5,10,0) 76%); } .filmband b{ display:block; font-family:var(--display); font-size:1.5rem; color:var(--tinte); } .filmband--1{ left:5%; top:21%; } .filmband--2{ right:6%; top:21%; text-align:right; } .filmband--3{ left:5%; top:32%; } .filmband--4{ right:6%; top:32%; text-align:right; } @media (max-width:1100px){ .filmbaender{ display:none; } } /* Kapitelmarken (Vorlage c3) */ .kapitel{ position:absolute; z-index:3; right:1.4rem; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.85rem; align-items:flex-end; } .kapitel span{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grau); text-shadow:0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78); } .kapitel span:first-child{ color:var(--akzent); } @media (max-width:860px){ .kapitel{ display:none; } } /* ---- Kennzahlen ------------------------------------------------ */ .zahlen{ display:grid; gap:1.5rem; grid-template-columns:repeat(4,1fr); padding-block:clamp(2rem,4vw,3rem); } .zahlen div b{ display:block; font-family:var(--display); font-size:clamp(1.8rem,3.6vw,2.8rem); line-height:1; color:var(--akzent); } .zahlen div span{ font-size:.88rem; color:var(--grau); } @media (max-width:700px){ .zahlen{ grid-template-columns:repeat(2,1fr); } } /* ---- Leistungen: vier Raster ----------------------------------- */ .raster{ display:grid; gap:1.4rem; } .raster--drei{ grid-template-columns:repeat(3,1fr); } .raster--zwei{ grid-template-columns:repeat(2,1fr); } .raster--karten{ grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .raster--drei,.raster--karten{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .raster{ grid-template-columns:1fr !important; } } .stueck{ padding:1.5rem 0 0; border-top:1px solid var(--linie); } .raster--karten .stueck{ padding:1.5rem; border:1px solid var(--linie); border-radius:var(--radius); background:var(--panel); box-shadow:var(--schatten); } .stueck p{ margin:0; color:var(--tinte-weich); font-size:.98rem; } .stueck .nr{ display:block; font-family:var(--display); font-size:1.1rem; color:var(--akzent); margin-bottom:.4rem; } .liste{ list-style:none; margin:0; padding:0; } .liste li{ display:grid; grid-template-columns:3.2rem 1fr; gap:1.2rem; padding:1.4rem 0; border-top:1px solid var(--linie); } .liste li b{ font-family:var(--display); font-size:1.6rem; color:var(--akzent); line-height:1; } .liste li p{ margin:.3rem 0 0; color:var(--tinte-weich); font-size:.98rem; } /* ---- Ablauf ---------------------------------------------------- */ .ablauf{ display:grid; gap:1.4rem; grid-template-columns:repeat(4,1fr); counter-reset:schritt; } .ablauf div{ counter-increment:schritt; padding-top:2.4rem; position:relative; border-top:2px solid var(--linie-stark); } .ablauf div::before{ content:counter(schritt); position:absolute; top:.7rem; left:0; font-family:var(--display); font-size:1.4rem; color:var(--akzent); } @media (max-width:820px){ .ablauf{ grid-template-columns:repeat(2,1fr); } } /* ---- Preise ----------------------------------------------------- */ .preise{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .preise{ grid-template-columns:1fr; } } .preis{ border:1px solid var(--linie); border-radius:var(--radius); padding:1.6rem; background:var(--panel); display:flex; flex-direction:column; } .preis__zahl{ font-family:var(--display); font-size:2rem; color:var(--akzent); line-height:1; margin:.3rem 0 1rem; } .preis ul{ list-style:none; margin:0 0 1rem; padding:0; } .preis li{ padding:.35rem 0 .35rem 1.4rem; position:relative; font-size:.96rem; color:var(--tinte-weich); } .preis li::before{ content:"—"; position:absolute; left:0; color:var(--akzent); } .preis .nicht{ margin-top:auto; padding-top:1rem; border-top:1px solid var(--linie); font-size:.86rem; color:var(--grau); } /* ---- Rechner ---------------------------------------------------- */ .rechner{ border:1px solid var(--linie); border-radius:var(--radius); padding:1.6rem; background:var(--panel); box-shadow:var(--schatten); } .rechner label{ display:block; font-size:.9rem; color:var(--grau); margin-bottom:.4rem; } .rechner input[type=range]{ width:100%; accent-color:var(--akzent); } .rechner .wahl{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1rem 0; } .rechner .wahl button{ font:inherit; font-size:.9rem; cursor:pointer; padding:.5em .9em; border:1px solid var(--linie-stark); border-radius:var(--radius); background:transparent; color:var(--tinte-weich); } .rechner .wahl button[aria-pressed="true"]{ border-color:var(--akzent); color:var(--akzent); } .rechner output{ display:block; font-family:var(--display); font-size:2.2rem; color:var(--akzent); } /* ---- Referenzen -------------------------------------------------- */ .faelle{ display:grid; gap:1.4rem; grid-template-columns:repeat(3,1fr); } @media (max-width:900px){ .faelle{ grid-template-columns:1fr; } } .fall{ border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; background:var(--panel); } .fall__bild{ aspect-ratio:16/10; background:var(--papier2); border-bottom:1px solid var(--linie); } .fall__text{ padding:1.3rem; } .fall__text p{ font-size:.96rem; color:var(--tinte-weich); } .fall__text p:last-child{ margin:0; color:var(--tinte); } /* ---- Fragen ------------------------------------------------------ */ .fragen{ border-top:1px solid var(--linie); } .frage{ border-bottom:1px solid var(--linie); padding:1.2rem 0; } .frage summary{ cursor:pointer; font-weight:500; list-style:none; } .frage summary::-webkit-details-marker{ display:none; } .frage summary::after{ content:"+"; float:right; color:var(--akzent); } .frage[open] summary::after{ content:"–"; } .frage p{ margin:.8rem 0 0; color:var(--tinte-weich); } /* ---- Gebiet -------------------------------------------------------- */ .orte{ display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; padding:0; margin:0; } .orte li{ border:1px solid var(--linie-stark); border-radius:999px; padding:.4em .95em; font-size:.92rem; color:var(--tinte-weich); } /* ---- Kontakt ------------------------------------------------------- */ .kontakt-gitter{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr 1fr; } @media (max-width:860px){ .kontakt-gitter{ grid-template-columns:1fr; } } .feld{ display:block; margin-bottom:1rem; } .feld span{ display:block; font-size:.88rem; color:var(--grau); margin-bottom:.35rem; } .feld input,.feld textarea{ width:100%; font:inherit; padding:.75em .9em; color:var(--tinte); background:var(--papier2); border:1px solid var(--linie-stark); border-radius:var(--radius); } .feld textarea{ min-height:8rem; resize:vertical; } .feld input:focus,.feld textarea:focus{ outline:2px solid var(--akzent); outline-offset:1px; } /* ---- Fuß ------------------------------------------------------------ */ .fuss{ border-top:1px solid var(--linie); padding:2.5rem 0 3.5rem; color:var(--grau); font-size:.92rem; } .fuss a{ color:var(--tinte-weich); } .fuss-gitter{ display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; justify-content:space-between; } /* ---- Anrufleiste auf dem Telefon --------------------------------------- */ .anrufleiste{ display:none; } @media (max-width:640px){ .anrufleiste{ display:flex; position:fixed; inset:auto 0 0 0; z-index:55; gap:1px; background:var(--linie-stark); } .anrufleiste a{ flex:1; text-align:center; padding:.9rem; text-decoration:none; background:var(--panel); color:var(--tinte); font-size:.92rem; } .anrufleiste a:first-child{ background:var(--akzent); color:var(--akzent-text); } body{ padding-bottom:3.6rem; } } /* ---- Einblenden beim Hereinscrollen ------------------------------------- */ .auf{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; } .auf.da{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .auf{ opacity:1; transform:none; transition:none; } } /* ---- Seitenumschaltung ---------------------------------------------------- */ .seite[hidden]{ display:none !important; } /* ---- Bewegung hinter einem Abschnitt --------------------------------- Cinematic darf drei Bewegungen haben. Die erste liegt im Kopf, die zweite und dritte hinter je einem Abschnitt weiter unten. Der Schleier ist kräftiger als im Kopf, weil hier Fließtext steht. */ .band--bewegt{ position:relative; overflow:hidden; } .band--bewegt > .bandschleier{ position:absolute; inset:0; z-index:1; pointer-events:none; /* Hier steht Fließtext, nicht nur eine Überschrift — der Schleier darf kräftiger sein als im Kopf. */ background:color-mix(in srgb, var(--papier) 88%, transparent); } .band--bewegt > .mitte{ position:relative; z-index:2; } /* ---- Gesamtansicht --------------------------------------------------- Alle Seiten untereinander, das Ganze verkleinert eingepasst. Alles, was in vh rechnet oder klebt, muss hier still stehen — sonst rechnet es gegen das Fenster und nicht gegen die Seite. */ [data-gesamt="ja"]{ background:var(--papier); } [data-gesamt="ja"] .vorschau-band, [data-gesamt="ja"] .kopf{ position:static; } [data-gesamt="ja"] .filmbahn{ height:auto; } [data-gesamt="ja"] .filmbahn > .hero{ position:static; height:auto; min-height:620px; } [data-gesamt="ja"] .hero--voll, [data-gesamt="ja"] .hero--film{ min-height:620px; } [data-gesamt="ja"] .hero--filmruhe{ min-height:560px; } [data-gesamt="ja"] .anrufleiste{ display:none; } /* Eingeblendet wird beim Scrollen — hier wird nicht gescrollt. */ [data-gesamt="ja"] .auf{ opacity:1; transform:none; transition:none; } /* Kontaktbogen: jede Seite eine Spalte, ganz aufgeklappt, einzeln eingepasst. Die Breite der Spalte setzt demo.js — transform aendert den Platzbedarf nicht. */ .gesamt-wand{ display:flex; align-items:flex-start; gap:.9rem; padding:.9rem; } .gesamt-spalte{ flex:0 0 auto; } .gesamt-halter{ overflow:hidden; border:1px solid var(--linie-stark); } .gesamt-buehne{ transform-origin:top left; } .gesamt-marke{ margin:0 0 .35rem; padding:.35rem .7rem; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--akzent-text); background:var(--akzent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } [data-gesamt="ja"] .seite{ display:block !important; } /* ================================================================ NACHTRAG 12.09.2026 — der Film steht vorn ================================================================ Befund von Scott: "die videos sind sehr dunkel, die muessen absolut im vordergrund stehen." Ursache war nicht das Video, sondern der Schleier darueber: er deckte unten 95 % und selbst ganz oben noch 34 % Markenfarbe — bei einer dunklen Farbwelt ein schwarzer Vorhang ueber dem ganzen Bild. Jetzt deckt er nur noch unten, wo der Text sitzt, und laeuft nach oben vollstaendig aus. Der Kopftext bringt seinen eigenen runden Schleier und einen dreilagigen Schatten mit — der bleibt lesbar, auch wenn im Film dahinter eine helle Stelle steht. */ .hero--film .schleier{ background:linear-gradient(to top, color-mix(in srgb, var(--papier) 88%, transparent) 0%, color-mix(in srgb, var(--papier) 58%, transparent) 24%, color-mix(in srgb, var(--papier) 20%, transparent) 50%, transparent 72%); } /* Filmruhe: der Text steht mittig, also muss der Schleier flaechig sein — aber deutlich duenner als die 72 % von vorher. */ .hero--filmruhe .schleier{ background:color-mix(in srgb, var(--papier) 40%, transparent); } /* Ein kleiner Lichtgewinn auf dem Film selbst. Die Musterfilme sind Naturaufnahmen und von Haus aus flau; das hier hebt sie an, ohne sie auszubleichen. */ .filmfilm{ filter:brightness(1.08) contrast(1.05) saturate(1.06); } /* ---- Die Textbaender kommen nacheinander ---------------------- */ /* Ohne JavaScript und in der Standbild-Rueckfallebene stehen alle vier da wie bisher. Erst wenn demo.js sie steuert, setzt es data-an. */ .filmband{ opacity:1; transform:none; transition:opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); } .filmband[data-an="nein"]{ opacity:0; transform:translateY(16px); } /* Weiter auseinander als vorher (alle vier lagen auf 21 und 32 % Hoehe, zwei Paare nebeneinander). Weil immer nur eines steht, darf jedes dorthin, wo es am besten sitzt. */ .filmband--1{ left:5%; top:15%; right:auto; bottom:auto; } .filmband--2{ right:6%; top:27%; left:auto; bottom:auto; text-align:right; } .filmband--3{ left:8%; top:41%; right:auto; bottom:auto; } .filmband--4{ right:7%; top:20%; left:auto; bottom:auto; text-align:right; } /* Die Baender waren unter 1100 px ganz ausgeblendet. Der Vorschaurahmen im Konfigurator ist fast immer schmaler als das — also sah man sie am Rechner nie. Jetzt erst ab 700 px weg, wo wirklich kein Platz mehr ist. */ @media (max-width:1100px){ .filmbaender{ display:block; } } @media (max-width:700px){ .filmbaender{ display:none; } } @media (prefers-reduced-motion: reduce){ .filmband{ transition:none; } .filmband[data-an="nein"]{ opacity:1; transform:none; } }