/* ========================================================= meditationgongs.de · Startseite, filmischer Aufbau Baut auf design.css auf. Nur die Startseite lädt diese Datei. ========================================================= */ :root{ --fs-hero:clamp(3rem,5.8vw,6rem); --fs-manifest:clamp(2.4rem,5vw,5.4rem); --fs-kapitel:clamp(2.6rem,4.6vw,4.8rem); --fs-index:clamp(2.2rem,4vw,4.2rem); } body{background:var(--dunkel)} main{background:var(--creme)} /* Filmkorn auf dunklen Flächen, sehr leise */ .korn{position:relative;isolation:isolate} .korn::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.07;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml;utf8,"); } /* ---------- Kopf über dem Hero, wird beim Scrollen fest ---------- */ .kopf{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:transparent;transition:background .45s var(--ease),border-color .45s,transform .45s var(--ease)} .kopf .logo img{transition:opacity .3s} .kopf .logo .logo--weiss{display:block} .kopf .logo .logo--wein{display:none} .kopf .nav a,.kopf .ikon-knopf{color:var(--creme)} .kopf .nav a::after{background:var(--creme)} .kopf .suche{background:rgba(243,238,217,.10);border-color:rgba(243,238,217,.28);color:var(--creme)} .kopf .suche input{color:var(--creme)} .kopf .suche input::placeholder{color:rgba(243,238,217,.75)} .kopf .ikon-knopf:hover{background:rgba(243,238,217,.12);border-color:rgba(243,238,217,.3)} .kopf .zahl{background:var(--creme);color:var(--wein)} .kopf--fest{background:rgba(48,48,48,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:rgba(243,238,217,.14)} /* ---------- Hero: Bildband oben, Zeile darunter ---------- 10.09.2026, Lea, zweite Runde. Vorher lag die Textspalte über dem Bild. Dadurch verdeckte die Überschrift den linken Gong vollständig, und bei 1024 px lief die Zeile über den fast weißen Sonnenschliff des zweiten Gongs. Bild und Text teilen sich die Fläche jetzt, statt übereinander zu liegen: alle vier Gongs bleiben auf jeder Breite sichtbar, und der Text steht auf ruhigem, dunklem Grund. Die Bandhöhe ist so gewählt, dass der Beschnitt oben und unten die Gongreihe nie anschneidet. */ /* Die feine Kante unten schliesst den Kopf ab. Ohne sie laufen die Textzeile des Kopfes und die folgende Sektion in derselben Flaeche #303030 ohne jeden Uebergang zusammen, gemessen 300 Pixel gleicher Grund bei 1440. Befund Checker Jody 10.09.2026, Punkt S-A, und genau der Fehlertyp, den Alexander regelmaessig zuerst findet. */ /* Anmerkung 3 vom 12.09.2026: "mach den weissen strich zuwischen den sektoren weg". Hier stand eine Haarlinie in creme mit 12 Prozent Deckkraft am unteren Rand des Kopfes. Sie ist entfernt. Der Uebergang zum Auftakt traegt sich selbst: dort beginnt sofort das Schimmerbild, die beiden Abschnitte sind also auch ohne Linie unterscheidbar. */ .film{position:relative;background:var(--dunkel);color:var(--creme);overflow:hidden} .film{--kopfband:84px} /* Das Kopfbild traegt seit dem 11.09.2026 das Seitenverhaeltnis der Szene selbst, 1672 zu 941. Vorher stand hier 8 zu 5 und das Bild wurde beschnitten. Die vier Gongs liegen als eigene Bilder darauf, ihre Prozentwerte gelten nur ohne Beschnitt. */ /* Anmerkungen 1 und 2 vom 12.09.2026: "die gongs sind zu weit oben. zu wenig space zur navitagion" und "zu viel anschnitt. zeig die mallets noch." Beides hatte dieselbe Ursache: der Deckel von 640 Pixel schnitt die Szene mittig, oben und unten gleich viel. Gemessen bei 1440 waren das 85 Pixel je Seite, bei 1920 schon 221 Pixel, dort standen die Gongs 10 Pixel unter der Kopfzeile und von den Mallets war nur noch die obere Haelfte der Baelle zu sehen. Das Bildband traegt jetzt das Verhaeltnis 1672 zu 895 statt 1672 zu 941. Das ist die Szene ohne Deckel, nur die untersten 4,9 Prozent fehlen, und dort liegt nichts als Boden. Die Mallet-Stiele enden bei rund 92 Prozent der Bildhoehe und stehen damit vollstaendig. Der Himmel bleibt ungeschnitten, die Gongs bekommen ihre Luft aus dem Bild selbst: gemessen 150 Pixel bei 1440, 230 Pixel bei 1920. */ .film__bild{position:relative;width:100%;aspect-ratio:1672/895;min-height:300px;max-height:none;overflow:hidden} .film__bild > img{ width:100%;height:100%;object-fit:cover;object-position:50% 52%; transform:scale(1.045);animation:hero-ein 2.6s var(--ease) forwards; } @keyframes hero-ein{to{transform:scale(1)}} /* --------------------------------------------------------------------------- Die Buehne: leere Szene, darauf die vier Gongs, die einzeln aufblenden. Alexanders Ansage vom 11.09.2026: "die 4 gongs erscheinen", dazu "noch langsamer" und "sie muessen auch nicht nacheinander kommen. wenn 1 halb da ist, kann 2 starten usw", zuletzt "noch etwas gleichzeitiger". Zwei Werte steuern alles: --dauer ist die Zeit, die ein Gong zum Aufblenden braucht, --abstand der Versatz zum naechsten. Abstand rund ein Drittel der Dauer, damit sie sich ueberlappen. Alle vier stehen nach dauer + 3 mal abstand, hier also nach 6,4 Sekunden. --------------------------------------------------------------------------- */ /* Die Buehne muss sich verhalten wie ein Bild mit object-fit cover: sie fuellt den Kopfbereich und laeuft zur Seite oder nach oben und unten hinaus, statt beschnitten zu werden. Nur dann sitzen die Gongs an derselben Stelle der Szene wie im Ausgangsbild, denn ihre Prozentwerte gelten fuer die Szene und nicht fuer den Ausschnitt. Ohne Container Queries greift der Wert davor, dann fuellt die Buehne die Breite und der Kopfbereich richtet sich nach ihrer Hoehe. */ .film__bild{container-type:size} .buehne{ /* Oben buendig statt mittig: was fehlt, fehlt unten am Boden, nie am Himmel ueber den Gongs. */ position:absolute;top:0;left:50%;transform:translateX(-50%); width:100%;aspect-ratio:1672/941; width:max(100cqw, calc(100cqh * 1672 / 941)); --dauer:3.4s;--abstand:1s; } .buehne__szene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .buehne__gong{position:absolute;display:block;opacity:0; animation:gong-ein var(--dauer) ease forwards;will-change:opacity} @keyframes gong-ein{from{opacity:0}to{opacity:1}} .buehne .g1{animation-delay:calc(var(--abstand) * 0)} .buehne .g2{animation-delay:calc(var(--abstand) * 1)} .buehne .g3{animation-delay:calc(var(--abstand) * 2)} .buehne .g4{animation-delay:calc(var(--abstand) * 3)} /* Die Szene selbst bekommt den sanften Zoom, den vorher das Kopfbild hatte. */ .buehne__szene{transform:scale(1.045);animation:hero-ein 2.6s var(--ease) forwards} .film__schatten{position:absolute;inset:0;pointer-events:none; /* Oben ein eigener Grund fuer die feste Kopfzeile: gemessen lag die Navigation ueber hellen Bildstellen bei 1,5:1, also unter AA. Die Werte sind aus der hellsten Bildstelle unter den Glyphen zurueckgerechnet. */ background: linear-gradient(180deg,rgba(48,48,48,.80) 0,rgba(48,48,48,.78) 74px,rgba(48,48,48,.44) 132px,rgba(48,48,48,0) 220px), /* Der untere Verlauf lief bis 12.09.2026 ab 68 Prozent an und war bei 100 Prozent volles Dunkel. Genau in dieser Zone liegen die Mallets, sie wurden also zusaetzlich zum Beschnitt noch weggeblendet. Jetzt setzt er erst bei 86 Prozent an und bleibt bei 35 Prozent Deckkraft, er beruhigt die Bildkante, ohne den Vordergrund zu schlucken. */ linear-gradient(180deg,rgba(48,48,48,0) 86%,rgba(48,48,48,.35) 100%); } /* Anmerkung 1 vom 11.09.2026: "viel mehr space als uebergang. weite. luxus." Der Uebergang vom Bildband zur Textzeile lag bei 39,6 Pixel. Er traegt jetzt gut das Dreifache und folgt derselben Skala wie die Stelle, die Alexander in Anmerkung 11 ausdruecklich gelobt hat. */ .film__inhalt{position:relative;z-index:2;padding-top:clamp(64px,8.6vw,150px);padding-bottom:clamp(80px,9.4vw,164px)} .film__zeile{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--gap);align-items:start} .film__kicker{display:flex;gap:18px;align-items:center;font-size:var(--fs-kicker);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,217,.85);margin-bottom:22px} .film__kicker::before{content:"";width:56px;height:1px;background:rgba(243,238,217,.6);flex:none} .film h1{font-size:var(--fs-hero);line-height:.98;letter-spacing:-.018em;color:var(--creme);max-width:22ch;margin-bottom:0} .film h1 em{font-style:italic;color:var(--creme);opacity:.92} .film .lede{color:rgba(243,238,217,.92);max-width:44ch;margin-bottom:clamp(34px,3.6vw,56px)} .film__aktionen{display:flex;gap:16px;flex-wrap:wrap;align-items:center} .film__shop{list-style:none;margin:clamp(34px,3.6vw,56px) 0 0;padding:0; display:flex;flex-wrap:wrap;gap:10px clamp(26px,2.6vw,44px);max-width:34ch} .film__shop li{display:flex;align-items:flex-start;gap:12px; font-size:var(--fs-small);font-weight:600;letter-spacing:.04em; color:rgba(243,238,217,.9)} .film__shop li::before{content:"";width:26px;height:1px;margin-top:.78em;background:rgba(243,238,217,.55);flex:none} .film .btn--secondary{color:var(--creme);border-color:rgba(243,238,217,.7)} .film .btn--secondary:hover{background:var(--creme);color:var(--wein)} .film__legende{ margin-top:clamp(34px,3.6vw,56px);display:flex;align-items:center;gap:16px; font-size:var(--fs-small);color:rgba(243,238,217,.82);font-weight:500; } .film__legende::before{content:"";width:48px;height:1px;background:rgba(243,238,217,.55);flex:none} /* Wörter steigen nacheinander auf */ .wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em} .wort > span{display:inline-block;transform:translateY(110%);animation:wort-auf 1.1s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms + 200ms)} @keyframes wort-auf{to{transform:translateY(0)}} .ein{opacity:0;transform:translateY(18px);animation:ein 1s var(--ease) forwards;animation-delay:calc(var(--i) * 90ms + 200ms)} @keyframes ein{to{opacity:1;transform:none}} /* ---------- Manifest: eine Aussage, sehr groß ---------- */ .manifest{padding:clamp(112px,15vw,232px) 0 clamp(88px,10vw,152px);background:var(--creme)} .manifest__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);gap:var(--gap)} .manifest__label{font-size:var(--fs-kicker);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--wein);padding-top:.9em} .manifest__label span{display:block;margin-top:14px;width:56px;height:1px;background:var(--wein)} .manifest__satz{font-family:var(--f-display);font-size:var(--fs-manifest);line-height:1.04;letter-spacing:-.012em;color:var(--wein);max-width:22ch} .manifest__satz em{font-style:italic;color:var(--akzent)} .manifest__text{margin-top:clamp(44px,5vw,80px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap);align-items:start} .manifest__text .lede{max-width:52ch} .fakten{list-style:none;margin:0;padding:0;border-top:1px solid var(--wein-20)} .fakten li{display:flex;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--wein-20);font-size:var(--fs-body);color:var(--dunkel)} .fakten li b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--wein);white-space:nowrap} /* ---------- Bühne: Bild bleibt stehen, Kapitel ziehen vorbei ---------- */ .szene{background:var(--dunkel);color:var(--creme);position:relative} .szene__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0} .szene__bild{position:sticky;top:0;height:min(100svh,980px);overflow:hidden} .szene__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;opacity:0;transition:opacity 1.1s var(--ease),transform 1.6s var(--ease);transform:scale(1.04)} .szene__bild img.aktiv{opacity:1;transform:scale(1)} /* Kapitel 2, der Auris: ohne diese Verschiebung wird der Gong rechts angeschnitten. */ .szene__bild img[data-kapitel="2"]{object-position:83% 50%} /* Kapitel 3, die Blume des Lebens sitzt in der Bildmitte. */ .szene__bild img[data-kapitel="3"]{object-position:85% 50%} .szene__bild::after{content:"";position:absolute;inset:0;background: linear-gradient(90deg,rgba(48,48,48,0) 52%,rgba(48,48,48,.6) 86%,#303030 100%), linear-gradient(180deg,#303030 0%,rgba(48,48,48,0) 16%,rgba(48,48,48,0) 84%,#303030 100%)} .szene__zaehler{position:absolute;left:var(--gutter);bottom:40px;z-index:2;font-size:var(--fs-small);font-weight:600;letter-spacing:.14em;color:rgba(243,238,217,.85)} .szene__zaehler b{font-family:var(--f-display);font-weight:400;font-size:2rem;letter-spacing:0;margin-right:6px} .kapitel{min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:center;padding:clamp(88px,12vh,150px) clamp(32px,5.6vw,110px)} .kapitel__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-bottom:1px solid rgba(243,238,217,.22);padding-bottom:24px;margin-bottom:46px} .kapitel__marke{font-size:var(--fs-kicker);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,238,217,.85)} .kapitel__nr{font-family:var(--f-display);font-size:1.5rem;color:rgba(243,238,217,.7)} .kapitel h2{font-size:var(--fs-kapitel);line-height:1;letter-spacing:-.012em;color:var(--creme);margin-bottom:34px;max-width:14ch} .kapitel p{color:rgba(243,238,217,.9);max-width:40ch;margin-bottom:46px;font-size:clamp(1.15rem,1.4vw,1.35rem);line-height:1.5} .kapitel__preis{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:14px} .kapitel__preis .preis{font-family:var(--f-display);font-weight:400;font-size:clamp(2.2rem,3.4vw,3.4rem);color:var(--creme);letter-spacing:-.01em} .kapitel__preis .preis small{font-family:var(--f-text);font-size:1rem;color:rgba(243,238,217,.8)} .kapitel__preis .brutto{color:rgba(243,238,217,.75);font-size:var(--fs-body)} .kapitel .liefer{color:var(--creme);margin-bottom:50px;font-size:var(--fs-body)} .kapitel .liefer .ring{color:var(--creme)} .kapitel__aktion{display:flex;gap:26px;align-items:center;flex-wrap:wrap} .kapitel .btn--hell{background:var(--creme);color:var(--wein)} .kapitel .btn--hell:hover{background:var(--weiss)} .kapitel .nebenlink{color:rgba(243,238,217,.8);text-decoration-color:rgba(243,238,217,.35)} .kapitel .nebenlink:hover{color:var(--creme)} .kapitel__bild{display:none} /* ---------- Helles Bild in voller Breite, die eine Ausnahme ---------- */ .band{position:relative;min-height:min(88svh,820px);display:grid;align-items:end;overflow:hidden;background:var(--creme)} .band__bild{position:absolute;inset:0} .band__bild img{width:100%;height:100%;object-fit:cover;object-position:68% 50%} .band__schatten{position:absolute;inset:0;background:linear-gradient(180deg,rgba(48,48,48,0) 40%,rgba(48,48,48,.78) 100%),linear-gradient(90deg,rgba(48,48,48,.45) 0%,rgba(48,48,48,0) 55%)} .band__inhalt{position:relative;z-index:2;padding:clamp(84px,11vh,150px) 0;color:var(--creme);max-width:min(100%,780px)} .band__inhalt .kicker{color:rgba(243,238,217,.9)} .band__inhalt h2{color:var(--creme);margin-bottom:22px;max-width:16ch} .band__inhalt .lede{color:rgba(243,238,217,.92);max-width:46ch;margin-bottom:34px} /* ---------- Hersteller als Register ---------- */ .register{padding:var(--sec) 0} .register__kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--gap);align-items:end;margin-bottom:clamp(48px,6vw,88px)} .register__kopf .lede{max-width:48ch} .zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--wein-20)} .zeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:clamp(24px,3.4vw,60px);padding:clamp(24px,3vw,42px) 0;border-bottom:1px solid var(--wein-20);color:var(--dunkel);text-decoration:none;transition:padding-left .4s var(--ease)} .zeile:hover{text-decoration:none;padding-left:14px} .zeile__nr{font-size:var(--fs-small);font-weight:600;color:var(--text);letter-spacing:.1em;min-width:2.4em} .zeile__name{font-family:var(--f-display);font-size:var(--fs-index);line-height:1;color:var(--wein);letter-spacing:-.01em} .zeile__was{font-size:var(--fs-body);color:var(--text);text-align:right;max-width:26ch} .zeile__zahl{font-size:var(--fs-small);font-weight:600;color:var(--dunkel);white-space:nowrap;display:inline-flex;align-items:center;gap:12px} .zeile__zahl svg{width:22px;height:22px;transition:transform .4s var(--ease)} .zeile:hover .zeile__zahl svg{transform:translateX(6px)} /* ---------- So kaufst du ---------- */ .ablauf{padding:0 0 var(--sec);background:var(--creme)} .ablauf__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--gap);padding-top:var(--sec);border-top:1px solid var(--wein-20)} .ablauf__grid h2{max-width:14ch} .schritte{list-style:none;margin:0;padding:0;display:grid;gap:0} .schritt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3.4vw,52px);padding:34px 0;border-bottom:1px solid var(--wein-20)} .schritt:first-child{padding-top:0} .schritt__nr{font-family:var(--f-display);font-size:2.4rem;line-height:1;color:var(--akzent);min-width:2.2ch} .schritt h4{color:var(--wein);margin-bottom:8px;font-size:1.5rem} .schritt p{color:var(--text)} /* ---------- Aufsteigen beim Scrollen ---------- */ .auf{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .auf.in{opacity:1;transform:none} .auf[data-v="1"]{transition-delay:.12s}.auf[data-v="2"]{transition-delay:.24s}.auf[data-v="3"]{transition-delay:.36s} /* ---------- Responsiv ---------- */ @media (max-width:1100px){ .manifest__grid{grid-template-columns:1fr} .manifest__label{padding-top:0;margin-bottom:26px} .manifest__text{grid-template-columns:1fr} .register__kopf,.ablauf__grid{grid-template-columns:1fr} .zeile{grid-template-columns:auto minmax(0,1fr) auto} .zeile__was{display:none} } @media (max-width:900px){ .film__zeile{grid-template-columns:1fr;align-items:start} .film h1{margin-bottom:28px} /* Schmale Breiten: die Szene auf Fensterbreite ist so flach, dass die Gongs gemessen 12 Pixel hinter der festen Kopfzeile lagen. Mehr Luft laesst sich hier nicht aus dem Bild holen, ein groesserer Ausschnitt wuerde die aeusseren Gongs seitlich abschneiden. Das Bildband ruecken wir deshalb unter die Kopfzeile: 84 Pixel, das ist die gemessene Kopfhoehe von 77 Pixeln plus etwas Luft. */ .film__bild{aspect-ratio:1672/895;max-height:none;min-height:0;margin-top:var(--kopfband)} .film__bild > img{object-position:50% 50%} .film__kicker::before{display:none} .film__kicker{margin-bottom:18px} .film h1{max-width:none;margin-bottom:24px} .szene__grid{grid-template-columns:1fr} .szene__bild{display:none} .kapitel{min-height:0;padding:64px var(--gutter) 24px} .kapitel__bild{display:block;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;margin-bottom:30px;outline:1px solid var(--creme-12)} .kapitel__bild img{width:100%;height:100%;object-fit:cover} #k2 .kapitel__bild img{object-position:83% 50%} /* Kapitel 3: der Gong steht im Szenenbild rechts der Mitte, gemessen liegt seine Mitte bei 69 Prozent der Bildbreite. Im hochformatigen Rahmen mit cover bleibt bei mittigem Ausschnitt nur knapp die Haelfte der Breite sichtbar, und das goldene Symbol wird durchgeschnitten. 85 Prozent ruecken den Gong in die Mitte des sichtbaren Ausschnitts. */ #k3 .kapitel__bild img{object-position:85% 50%} .kapitel:last-child{padding-bottom:72px} .band{min-height:70svh} } @media (max-width:560px){ .film__aktionen .btn,.band .btn{width:100%} .zeile{grid-template-columns:auto minmax(0,1fr)} .zeile__zahl{display:none} .fakten li{flex-direction:column;gap:4px} } @media (prefers-reduced-motion:reduce){ .film__bild > img,.wort > span,.ein{animation:none;transform:none;opacity:1} .buehne__szene,.buehne__gong{animation:none;transform:none;opacity:1} .auf{opacity:1;transform:none} .szene__bild img{transition:none} } /* Standbild-Modus für Screenshots und Prüfungen: alle Bewegungen im Endzustand */ .still .wort > span,.still .ein,.still .film__bild > img{animation:none!important;transform:none!important;opacity:1!important} .still .auf{opacity:1!important;transform:none!important} .still .szene__bild img{transition:none!important} .still .kopf{transition:none!important}