/* ============================================================ bestattungskultur - Digitale Magazinausgabe Landingpage mit zwei Videos ------------------------------------------------------------ Gebaut nach dem Figma-Rahmen 1:68 der Datei "Video-Landingpage". Alle Masse dort gelten bei 1440 px Fensterbreite; hier stehen sie in rem, der px-Wert jeweils als Kommentar daneben. ⚠️ 1 rem = 16 px. `html { font-size }` bleibt unangetastet - 16 px ist die Browser-Voreinstellung und zugleich die Rechnung aus Webflow. Nie auf 62.5 % stellen, sonst stimmt keine Zahl im Code mehr mit dem ueberein, was im Entwurf steht. ============================================================ */ /* --- Schrift --- Montserrat liegt als EINE variable Datei bei und deckt damit alle drei benutzten Staerken ab (400, 600, 700). Selbst ausgeliefert statt von Google geladen: keine fremde Adresse beim Aufruf der Seite, und ein Ladeweg weniger. Lizenz: SIL Open Font License 1.1 - Selbsthosten ausdruecklich erlaubt. */ @font-face { font-family: "Montserrat"; src: url("schriften/montserrat-latin.woff2") format("woff2"); font-weight: 100 900; /* variable Achse, deshalb ein Bereich */ font-style: normal; font-display: swap; } :root { /* --- Farben --- Beide stehen in Figma als Farbstil ("white" und "black"). Kontrast zwischen ihnen: 15,10:1 - in beide Richtungen gleich. Die beiden Variablen darunter sagen, was Grund und was Schrift ist. Um die Seite hell zu machen, werden GENAU DIESE ZWEI ZEILEN getauscht, sonst nichts - alle anderen Regeln greifen ueber `--grund` und `--schriftfarbe` darauf zu, und das Logo folgt ueber `currentColor` mit. ⚠️ DIE SEITE IST HELL, UND DAS IST EINE INHALTLICHE ENTSCHEIDUNG, KEINE GESTALTERISCHE (Stefan, 08.09.2026): "der Verband der Bestatter will gerade nicht schwarz sein". Schwarz ist die Farbe, von der die Branche wegwill - eine schwarze Seite sagt das Gegenteil dessen, was das Projekt zeigen soll. Der dunkle Entwurf ist daran gescheitert, nicht am Aussehen. Vor einem Zurueckdrehen also erst diese Frage klaeren, nicht die Optik vergleichen. */ --off-white: #f8f6f3; --off-black: #202020; /* Die Akzentfarbe von //designwerkstatt, in Figma "dw-rot". Kontrast auf off-white: 5,80:1 - traegt also auch Text, nicht nur Flaechen. Umgekehrt (off-white darauf) derselbe Wert, deshalb ist sie als Knopffuellung ebenso tragfaehig. */ --akzent: #b71373; /* Die Kontur um die Videoflaechen. Kommt aus dem Entwurf; sie muss kraeftig genug sein, weil reines Weiss auf off-white sonst kaum zu sehen waere. */ --kontur: #969696; --grund: var(--off-white); --schriftfarbe: var(--off-black); --schrift: "Montserrat", system-ui, -apple-system, sans-serif; /* --- Seitenrand --- 48 px im Entwurf, ab hier auch die linke Kante von Text und Videorahmen. Einzige Ausnahme ist das Logo, siehe dort. */ --rand: 3rem; /* 48 px */ /* --- Schriftgroessen --- Der erste Wert ist die Untergrenze auf dem Handy, der letzte der Entwurfswert bei 1440 px. */ /* ⚠️ DIE UEBERSCHRIFT SKALIERT NICHT FLUESSIG, sondern springt in Stufen (unten bei den Media Queries). Eine mitwachsende H1 ist bei mittleren Fensterbreiten weder gross noch klein und verliert genau dort ihre Wirkung. Besser: so lange wie moeglich gross bleiben und stattdessen umbrechen. Die Stufen sind nicht gewaehlt, sondern gerechnet. Massgeblich ist "bestattungskultur" - ein Wort von 17 Zeichen, das NICHT umbrechen kann. In Montserrat SemiBold waechst es mit 9,19 px je px Schrift: Schrift Wortbreite noetig ab Stufe hier 84 px 773 px 868 px 900 px 64 px 589 px 636 px 660 px 48 px 442 px 489 px 498 px 40 px 368 px 416 px 430 px 34 px 312 px 360 px 375 px 28 px 257 px 305 px 320 px 26 px 239 px 287 px ab 0 Die Stufe liegt jeweils etwas ueber dem noetigen Wert, damit das Wort nicht randvoll steht - rund 15 px Luft. ⚠️ Die Stufen waren zuvor zu grob (520/340 px) und die Schrift darunter unnoetig klein: Bei 519 px Fenster haetten 48 px gepasst, gesetzt waren 30. Wer die Groessen aendert, rechnet gegen diese Tabelle. */ --gr-titel: 5.25rem; /* 84 px */ /* Anrisszeile und die beiden Video-Beschriftungen. Springt bei 780 px wie die uebrigen Textgroessen. ⚠️ Als clamp erreichte dieser Wert seine 24 px erst bei GENAU 1440 px Fensterbreite - bei 1200 px stand er noch auf 20. Die Entwurfsgroesse galt damit nur an einem einzigen Punkt. */ --gr-mittel: 1.5rem; /* 24 px */ /* ⚠️ Springt bei 780 px, statt fluessig zu skalieren - genau wie der Fliesstext oben, und die beiden behalten dabei ihren Abstand von zwei Stufen (20/18 gegen 18/16). Als clamp war der Abbinder schon ab 1296 px Fenster auf seinem Kleinstwert und damit ueber weite Strecken genauso gross wie die Einleitung darueber. */ --gr-abbinder: 1.25rem; /* 20 px */ --gr-text: 1rem; /* 16 px */ /* --- Senkrechte Abstaende --- Gemessen wurden die sichtbaren Kanten im Figma-Export, nicht die Textrahmen: Textrahmen sind dort von Hand gesetzt und enthalten Luft, die im Browser nicht entsteht. Die Werte hier sind deshalb etwas kleiner als der Abstand, der am Ende zu sehen ist - die Differenz ist der Leerraum, den die Zeilen selbst mitbringen. */ --luft-logo-titel: clamp(2.25rem, 5.208vw, 4.6875rem); /* 36 - 75 px */ /* ⚠️ Nicht an die Fensterbreite gekoppelt, sondern an die Titelgroesse - die springt ja in Stufen, und der Abstand soll mit ihr springen. Der Faktor 0,54 trifft bei 84 px die 45 px des Entwurfs. Die Untergrenze von 32 px greift ab 48 px Titelgroesse: Bei kleiner Schrift braucht die Zaesur absolut weniger Weissraum, aber relativ mehr - ohne die Untergrenze klebte die Anrisszeile auf dem Handy an der Ueberschrift. */ --luft-titel-anriss: max(2rem, calc(var(--gr-titel) * 0.54)); /* ⚠️ Untergrenze 10 px, nicht 6: Auf schmalen Fenstern standen die Anrisszeile und der Absatz darunter nur 6 px auseinander - bei 20 px Anriss und 16 px Text klebten sie aneinander. */ --luft-absatz: max(0.625rem, 0.903vw); /* 10 - 13 px */ --luft-text-video: clamp(2.5rem, 5.833vw, 5.25rem); /* 40 - 84 px */ --luft-video-video: clamp(2.5rem, 6.042vw, 5.4375rem); /* 40 - 87 px */ --luft-titel-buehne: clamp(1rem, 1.597vw, 1.4375rem); /* 16 - 23 px */ --luft-vor-abbinder: clamp(3.5rem, 7.292vw, 6.5625rem); /* 56 - 105 px */ --luft-vor-karte: clamp(1.375rem, 2.847vw, 2.5625rem); /* 22 - 41 px */ --luft-unten: clamp(3.5rem, 9.236vw, 8.3125rem); /* 56 - 133 px */ } /* ============================================================ Grundlagen ============================================================ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--grund); color: var(--schriftfarbe); font-family: var(--schrift); font-size: var(--gr-text); line-height: 1.4; } img, svg, video { display: block; max-width: 100%; } /* Sichtbarer Fokus fuer alles, was mit der Tastatur erreichbar ist. Ohne das ist nicht zu erkennen, wo man gerade steht. */ :focus-visible { outline: 2px solid var(--schriftfarbe); outline-offset: 3px; } /* Die Seite bleibt bei 1440 px stehen und rueckt dann in die Mitte - das ist die Breite, fuer die der Entwurf gemacht ist. */ .seite { max-width: 90rem; /* 1440 px */ margin-inline: auto; padding-inline: var(--rand); padding-bottom: var(--luft-unten); } /* ============================================================ Kopf ============================================================ */ /* ⚠️ Zwei Dinge am Logo weichen vom Raster ab, beide aus dem Entwurf uebernommen: 1. Es beruehrt die Oberkante der Seite. Soll dort Luft stehen, ist das eine Zeile: `padding-top` hier. 2. Es steht 10 px LINKS vom Seitenrand, haengt also aus. Der Ueberhang schrumpft auf schmalen Fenstern mit, sonst stiesse er dort an den Bildschirmrand. */ .kopf__logo { /* ⚠️ RUND 20 % KLEINER ALS IM FIGMA-ENTWURF (Stefan, 08.09.2026, in zwei Schritten: erst 15 %, dann noch einmal 5 %). Dort steht die Marke 190 px breit, hier 153,4. Alles darunter rueckt dadurch um 22 px hoch - das ergibt sich im Fluss von selbst, die Abstaende sind unveraendert. */ width: clamp(6.4375rem, 10.653vw, 9.5875rem); /* 103 - 153,4 px */ height: auto; aspect-ratio: 191.63 / 110.3; /* Inline-SVG braucht das Verhaeltnis */ /* Der Ueberhang nach links schrumpft mit: Er gleicht die runde Form des "d" aus, und dieser Ausgleich haengt an der Schriftgroesse. */ margin-left: clamp(-0.5rem, -0.561vw, 0rem); /* -8 px bei 1440 px */ } /* Das "w" folgt der Schriftfarbe, das "d" traegt die Akzentfarbe - so steht es im Entwurf. */ .kopf__logo-w { fill: currentColor; } .kopf__logo-d { fill: var(--akzent); } .kopf__titel { margin: var(--luft-logo-titel) 0 0; /* Der Textrahmen steht im Entwurf 4 px links vom Seitenrand. Das ist kein Versehen, sondern der uebliche Ausgleich: Bei 84 px Schrift laege die Glyphenkante sonst sichtbar rechts von der Kante des Videorahmens darunter. */ margin-left: -0.25rem; /* -4 px */ font-size: var(--gr-titel); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; } .kopf__titel-name, .kopf__titel-zusatz { display: block; } /* ⚠️ Die Klassen benennen den INHALT, nicht das Gewicht - sie hiessen bis zum 08.09.2026 "stark" und "leicht" und logen, sobald man die Gewichte dreht. Wer sie drehen will, aendert nur diese eine Zeile. Am 08.09.2026 wurde die umgekehrte Verteilung ausprobiert und verworfen: Mit dem Gewicht auf "Digitale Magazinausgabe" wird die Gattung zur Hauptsache und der Name des Hefts zur Vorzeile. Dazu laeuft die kraeftige Zeile dann bis 1111 px statt bis 790 - der Kopf wirkt kopflastig statt fest. */ .kopf__titel-name { font-weight: 600; } /* Am 08.09.2026 ausprobiert und verworfen: Medium (500) statt SemiBold fuer den Heftnamen, und getrennt davon die umgekehrte Verteilung (Name regular, Zusatz semibold). Beides steht hier, damit die Versuche nicht ein zweites Mal gemacht werden. */ /* Die Anrisszeile steht im Entwurf als eigener Absatz ueber dem Fliesstext, nicht als fetter Satzanfang darin. */ .kopf__anriss { margin: var(--luft-titel-anriss) 0 0; font-size: var(--gr-mittel); font-weight: 600; line-height: 1.4; color: var(--akzent); } .kopf__einleitung { margin: var(--luft-absatz) 0 0; /* ⚠️ Breiter als die uebrigen Textbloecke (41 rem), und der Wert ist gemessen, nicht gewaehlt: Bis 46 rem faellt ein einzelnes Wort auf eine fuenfte Zeile, ab 47 rem sind es vier Zeilen mit einer zu 83 % gefuellten letzten. Ab 49 rem franst sie wieder aus. ⚠️ DER WERT HAENGT AM TEXT. Ein einziges Wort mehr verschiebt ihn: Mit "Im ersten ..." statt "Im ersten Video ..." lag das Optimum noch bei 45 rem. Wer den Text aendert, misst die Breite neu - sonst steht ploetzlich wieder ein Wort allein auf der letzten Zeile. Bei 18 px Schrift sind 752 px rund 75 Zeichen je Zeile - die obere Grenze des gut Lesbaren. */ max-width: 47rem; /* 752 px */ /* ⚠️ Zwei Stufen ueber der Grundschrift der Seite, und NUR hier: Der Fusstext und die Knopfbeschriftungen bleiben bei 16 px. Das ist der einzige laengere Fliesstext der Seite, er darf sich absetzen. */ font-size: 1.125rem; /* 18 px */ line-height: 1.6; } /* ============================================================ Die beiden Videos ============================================================ */ .video { margin-top: var(--luft-text-video); } /* Nach einem Videorahmen braucht die naechste Beschriftung etwas mehr Luft als nach einem Textabsatz: Ein Absatz bringt unten schon Leerraum mit, eine Bildkante nicht. */ .video + .video { margin-top: var(--luft-video-video); } .video__titel { margin: 0; font-size: var(--gr-mittel); font-weight: 400; line-height: 1.4; } /* "Video 1:" traegt das kraeftigere Gewicht UND die Akzentfarbe, der Titel dahinter das leichtere Gewicht in der Schriftfarbe. */ .video__zaehler { font-weight: 600; color: var(--akzent); } .video__buehne { position: relative; margin-top: var(--luft-titel-buehne); aspect-ratio: 16 / 9; border-radius: 1rem; /* 16 px */ overflow: hidden; /* Solange kein Video eingelegt ist, ist DAS der Platzhalter: eine weisse Flaeche. Sobald eine Datei unter `videos/` liegt, deckt ihr erstes Bild sie zu. ⚠️ Reines Weiss auf off-white sind nur wenige Helligkeitsstufen - ohne Hilfe waere von der Flaeche kaum etwas zu sehen. Die Kontur darunter uebernimmt das. Das betrifft nur den Zustand OHNE Videos: Ein Standbild setzt sich von selbst ab. Die Kontur darf trotzdem bleiben, ein feiner Rahmen um ein Video stoert nicht. */ background: #ffffff; /* Als `box-shadow inset`, nicht als `border`: So bleibt die Geometrie unangetastet - die Hoehe kommt aus `aspect-ratio`, und ein Rahmen wuerde dort mitrechnen. */ box-shadow: inset 0 0 0 1px var(--kontur); } .video__bild { width: 100%; height: 100%; object-fit: cover; /* Ohne das zeichnen manche Browser einen schwarzen Kasten, wenn noch keine Datei da ist - die weisse Flaeche darunter soll durchscheinen. */ background: transparent; } /* --- Der Startknopf --- Die ganze Flaeche ist klickbar, nicht nur die Pille. Wer auf ein Standbild klickt, erwartet dass es losgeht. ⚠️ Ohne JavaScript bleibt der Knopf verborgen - dann zeigen die Videos ihre eingebaute Bedienleiste und laufen trotzdem. Die Klasse `hat-js` setzt `skript.js` in seiner ersten Zeile. */ .video__start { display: none; position: absolute; inset: 0; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; -webkit-appearance: none; appearance: none; } .hat-js .video__start { display: grid; } .video__pille { display: inline-flex; align-items: center; gap: 0.75rem; /* 12 px */ /* Links 4 px mehr als rechts: Dort steht Schrift, rechts der Pfeil. Ein Pfeil traegt oben und unten Luft in seiner eigenen Box und wirkt dadurch weiter von der Kante entfernt als eine Versalie bei gleichem Abstand. */ padding: 0.9375rem 1.625rem 0.9375rem 1.875rem; /* 15 / 26 / 15 / 30 px */ border-radius: 100px; /* Schwarz in Ruhe, die Akzentfarbe erst beim Zeigen - umgekehrt zum Kontaktknopf im Fuss. Der ist der einzige farbige Fleck dort und darf auffallen; die Pillen liegen mitten auf der Flaeche und bleiben ruhig, bis jemand hinzeigt. */ background: var(--off-black); color: var(--off-white); font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16 - 18 px */ font-weight: 600; line-height: 1; transition: background-color 0.2s ease; } /* ⚠️ Am 08.09.2026 wurden hier zwei Alternativen gebaut und wieder verworfen: erst ein gefuelltes Play-Dreieck ohne Bewegung, dann ein echter Playknopf (weisser Kreis mit Dreieck darin, ringsum 8 px Abstand in der Pille). Der Kreis liess die Pille "wie ein Rohr" wirken - er fuellte sie in der Hoehe fast ganz aus, sodass von der Pillenform nur zwei Halbkreise uebrigblieben. Es bleibt beim Pfeil mit der Bewegung nach rechts. */ .video__pfeil { width: 1.375rem; /* 22 px */ height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; } /* Beim Zeigen wechselt die Fuellung auf die Akzentfarbe. ⚠️ Der Kontrast der hellen Schrift geht dabei nach UNTEN: 15,10:1 in Ruhe, 5,80:1 beim Zeigen. Das bleibt deutlich ueber den geforderten 4,5:1 und ist damit unbedenklich - aber wer die Akzentfarbe je aendert, rechnet sie an DIESER Stelle nach, nicht an der ruhigen. */ .video__start:hover .video__pille, .video__start:focus-visible .video__pille { background: var(--akzent); } /* Der Pfeil rueckt beim Zeigen ein Stueck vor - dieselbe kleine Bewegung, die auch die Knoepfe der Website selbst machen. */ .video__start:hover .video__pfeil, .video__start:focus-visible .video__pfeil { transform: translateX(0.375rem); /* 6 px */ } /* Der Fokusring gehoert an die Pille, nicht an die unsichtbare Flaeche darum - sonst umrandet er das ganze Video. Er ist dunkel, weil die Flaeche darunter weiss ist. */ .video__start:focus-visible { outline: none; } .video__start:focus-visible .video__pille { outline: 2px solid var(--off-black); outline-offset: 4px; } /* Laeuft das Video, verschwindet der Knopf und die eingebauten Bedienelemente uebernehmen. */ .video--laeuft .video__start { display: none; } /* ============================================================ Fuss: Abbinder, Portrait, Kontakt ============================================================ */ .fuss__abbinder { margin: var(--luft-vor-abbinder) 0 0; max-width: 41rem; /* 656 px */ font-size: var(--gr-abbinder); line-height: 1.4; } .fuss__karte { display: flex; align-items: center; gap: 2.875rem; /* 46 px */ margin-top: var(--luft-vor-karte); } .fuss__portrait { flex: none; width: 9.4375rem; /* 151 px */ height: 9.4375rem; border-radius: 50%; object-fit: cover; } .fuss__angaben { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3125rem; /* 21 px */ } .fuss__name { margin: 0; } .fuss__name strong { font-weight: 600; } /* --- Kontaktknopf --- */ .knopf { display: inline-flex; align-items: center; justify-content: center; min-width: 10.0625rem; /* 161 px */ height: 2.25rem; /* 36 px */ padding-inline: 1.5rem; /* 24 px */ /* Der Text sitzt damit 1 px tiefer als die geometrische Mitte: Bei der Hoehe von 36 px bleiben oben 2 px weniger Raum, und der zentrierte Inhalt rueckt um die Haelfte davon nach unten. Versalien wirken sonst zu hoch im Rund. */ padding-top: 0.125rem; /* 2 px -> 1 px Versatz */ border-radius: 100px; background: var(--akzent); color: var(--grund); font-size: var(--gr-text); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; /* Laenger und weicher auslaufend als die uebrigen Uebergaenge der Seite (0,2 s): Der Sprung von der Akzentfarbe auf Schwarz ist ein grosser Farbabstand, und bei 0,2 s wirkt er wie ein Umschalten statt wie ein Wechsel. Die Kurve bremst zum Ende hin ab. */ transition: background-color 0.45s cubic-bezier(0.33, 1, 0.68, 1); } /* Beim Zeigen wechselt die FUELLUNG auf Schwarz - nicht die Deckkraft des ganzen Knopfes, sonst bliche die Schrift mit aus. Kontrast der hellen Schrift: 5,80:1 in Ruhe, 15,10:1 beim Zeigen - also nach OBEN. */ .knopf:hover { background: var(--off-black); } /* ============================================================ Schmalere Fenster ============================================================ */ /* 780 px ist die Stufe, die im Schwesterprojekt fuer Seitenrand und Schriftskala gilt. Damit heisst dieselbe Grenze in beiden Projekten dasselbe. */ /* --- Die Stufen der Ueberschrift --- Jede Stufe endet dort, wo "bestattungskultur" sonst nicht mehr in die Zeile passt. Zwischen den Stufen bleibt die Groesse konstant. */ @media (max-width: 56.1875rem) { /* 899 px */ :root { --gr-titel: 4rem; } /* 64 px */ } @media (max-width: 41.1875rem) { /* 659 px */ :root { --gr-titel: 3rem; } /* 48 px */ } @media (max-width: 31.0625rem) { /* 497 px */ :root { --gr-titel: 2.5rem; } /* 40 px */ } @media (max-width: 26.8125rem) { /* 429 px */ :root { --gr-titel: 2.125rem; } /* 34 px */ } @media (max-width: 23.375rem) { /* 374 px */ :root { --gr-titel: 1.75rem; } /* 28 px */ } /* Letzte Stufe fuer sehr schmale Geraete - das iPhone SE der ersten Generation und aeltere Android-Telefone messen 320 px. */ @media (max-width: 19.9375rem) { /* 319 px */ :root { --gr-titel: 1.625rem; } /* 26 px */ } @media (max-width: 48.75rem) { /* 780 px */ :root { --rand: 1.5rem; } /* 24 px */ /* Auf dem Handy darf der Fliesstext auf die Grundgroesse zurueck - 18 px kosten dort eine Zeile mehr, ohne besser lesbar zu sein. */ .kopf__einleitung { font-size: var(--gr-text); } /* 16 px */ /* Abbinder, Anrisszeile und Video-Beschriftungen gehen dieselbe Stufe mit - siehe oben. */ :root { --gr-abbinder: 1.125rem; /* 18 px */ --gr-mittel: 1.25rem; /* 20 px */ } .video__buehne { border-radius: 0.75rem; } /* 12 px */ } /* Darunter passen Portrait und Angaben nicht mehr nebeneinander: Bei 375 px Fenster blieben fuer den Namen 200 px, er braucht 301. */ /* Auf dem Handy nimmt die Startpille sonst zwei Drittel der Videobreite ein: Bei 390 px Fenster ist die Flaeche 342 px breit, die Pille war 250 davon. Sie soll auf der Flaeche liegen, nicht sie ausfuellen. */ @media (max-width: 32.4375rem) { /* 519 px */ .video__pille { gap: 0.5rem; /* 8 px */ padding: 0.625rem 1.125rem 0.625rem 1.25rem; /* 10 / 18 / 10 / 20 px */ font-size: 0.875rem; /* 14 px */ } .video__pfeil { width: 1.125rem; /* 18 px */ height: 1.125rem; } /* Der Versatz beim Zeigen schrumpft mit - 6 px waeren bei dieser Groesse ein Sprung statt einer Bewegung. Auf Geraeten mit Beruehrung greift er ohnehin selten. */ .video__start:hover .video__pfeil, .video__start:focus-visible .video__pfeil { transform: translateX(0.25rem); /* 4 px */ } } @media (max-width: 37.5rem) { /* 600 px */ .fuss__karte { flex-direction: column; align-items: flex-start; gap: 1.5rem; /* 24 px */ } .fuss__portrait { width: 7rem; /* 112 px */ height: 7rem; } } /* Wer Bewegung abbestellt hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }