/* ============================================================ 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 */ /* Die beiden Fliesstexte der Seite - die Einleitung oben und der Abbinder unten - tragen DIESELBE Groesse. Sie standen bis zum 08.09.2026 zwei Stufen auseinander (18/20): Der laengere, inhaltlich tragende Text wirkte dadurch dem Schlusssatz untergeordnet. ⚠️ Springt bei 780 px, statt fluessig zu skalieren. Als clamp war der Abbinder schon ab 1296 px Fenster auf seinem Kleinstwert. */ --gr-fliess: 1.125rem; /* 18 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. Am 08.09.2026 fuer den neuen Text neu ausgemessen (358 Zeichen), Fuellung der letzten Zeile: 44 rem 5 Zeilen, letzte zu 47 %, 72 Zeichen <- gewaehlt 47 rem 5 Zeilen, letzte zu 32 % <- alter Wert, franst aus 49,5 rem 4 Zeilen, letzte zu 100 % <- randvoll, wie abgeschnitten 51 rem 4 Zeilen, letzte zu 77 %, 90 Zeichen 53 rem 4 Zeilen, letzte zu 63 % ⚠️ Ab 49,5 rem wird der Absatz vierzeilig, und innerhalb dieser vier Zeilen aendert sich nur die Fuellung der letzten - "etwas schmaler" ist dort kaum sichtbar. Deshalb steht der Wert bei 44 rem: fuenf Zeilen, dafuer 72 statt 90 Zeichen je Zeile und damit innerhalb der ueblichen Lesbarkeitsgrenze von 75. ⚠️ DER WERT HAENGT AM TEXT, und das hat sich hier bereits zweimal bestaetigt: Beim alten Text lag das Optimum bei 47 rem, davor bei 45. Wer den Text aendert, misst die Breite neu - sonst franst die letzte Zeile aus oder ein Wort steht allein. Bei 18 px Schrift sind 704 px rund 72 Zeichen je Zeile - knapp unter der ueblichen Obergrenze von 75. */ max-width: 44rem; /* 704 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: var(--gr-fliess); 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; } /* --- Die Kontur --- ⚠️ Sie MUSS ueber dem Video liegen, nicht an der Buehne selbst. Vorher stand hier `box-shadow: inset` direkt an `.video__buehne` - das Video deckt die Buehne aber vollstaendig ab und verdeckt den Schatten damit. Sichtbar war er nur, solange die Flaeche leer war. Als eigene Ebene statt als `border`: So bleibt die Geometrie unangetastet - die Hoehe kommt aus `aspect-ratio`, und ein Rahmen wuerde dort mitrechnen. */ .video__buehne::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--kontur); /* Sonst faengt die Ebene die Klicks ab, die dem Startknopf gelten. */ pointer-events: none; } /* --- Die Buehne im Vollbild --- Sie traegt sonst `aspect-ratio: 16/9` und einen Radius; im Vollbild soll sie den Bildschirm fuellen. Das Video darin `contain`, damit nichts beschnitten wird - der Bildschirm ist selten 16:9. ⚠️ Getrennte Regeln fuer :fullscreen und :-webkit-full-screen. Ein Browser, der eine der Pseudoklassen nicht kennt, verwirft sonst die ganze Regel. */ .video__buehne:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; } .video__buehne:-webkit-full-screen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; background: #000; } /* Die graue Kontur gehoert in den Rahmen, nicht auf den Bildschirm. */ .video__buehne:fullscreen::after { content: none; } .video__buehne:-webkit-full-screen::after { content: none; } .video__buehne:fullscreen .video__bild { object-fit: contain; background: #000; } .video__buehne:-webkit-full-screen .video__bild { object-fit: contain; background: #000; } .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; } /* ⚠️ Im Vollbild MUSS es `contain` sein. Das `cover` oben fuellt die 16:9-Buehne randlos - ein Bildschirm ist im Vollbild aber selten 16:9 (MacBook Pro 16": 1,55; Studio Display: genau 1,78). Mit `cover` zieht der Browser das Video dort formatfuellend auf und schneidet den Ueberstand ab, statt Balken zu zeigen: auf einem hoeheren Bildschirm links und rechts, auf einem breiteren oben und unten. `contain` zeigt immer das ganze Bild. Der schwarze Grund muss mit: Das `transparent` oben wuerde sonst auch fuer die Balken gelten, und die waeren dann off-white. ⚠️ Zwei getrennte Regeln, NICHT per Komma zusammengefasst - ein Browser, der eine der beiden Pseudoklassen nicht kennt, verwirft sonst die ganze Regel. */ .video__bild:fullscreen { object-fit: contain; background: #000; } .video__bild:-webkit-full-screen { object-fit: contain; background: #000; } /* --- 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; /* ⚠️ Deutlich schmaler als die Einleitung (47 rem), obwohl beide gleich gross gesetzt sind - die Satzbreite folgt hier dem TEXT, nicht der Schriftgroesse. Bei 1440 px gemessen, wie voll die letzte Zeile laeuft: 28 rem 3 Zeilen 84 % ← hier 30 rem 3 Zeilen 49 % 34 rem 3 Zeilen 33 % 38 rem 3 Zeilen 20 % 40 rem 2 Zeilen 90 % 41 rem 2 Zeilen 82 % Brauchbar sind nur 28 und 40 rem; dazwischen franst die letzte Zeile aus. 28 rem waren zu schmal - es sind die 40. 640 px entsprechen bei 1440 px Fenster 44 % der Breite, bei 1200 px 53 %, bei 1024 px 63 %. Der Anteil waechst also, je enger das Fenster wird - das ist richtig so: Wo weniger Platz ist, darf der Text relativ mehr davon nehmen. ⚠️ Diese Begrenzung gilt NUR ab 781 px. Darunter laeuft der Abbinder ueber die volle Breite wie die Einleitung - siehe unten bei den Media Queries. */ max-width: 40rem; /* 640 px */ font-size: var(--gr-fliess); line-height: 1.6; /* wie die Einleitung */ } .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. */ /* Beide Fliesstexte und die Zwischenzeilen gehen eine Stufe zurueck. */ :root { --gr-fliess: 1rem; /* 16 px */ --gr-mittel: 1.25rem; /* 20 px */ } /* Unter 780 px laeuft der Abbinder ueber die volle Breite - genauso wie die Einleitung oben, deren 47 rem hier ohnehin nie greifen. Die 40 rem von oben wuerden auf einem Handy eine schmale Saeule mitten auf der Seite ergeben. */ .fuss__abbinder { max-width: 47rem; } /* wie die Einleitung */ .video__buehne { border-radius: 0.5rem; } /* 8 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; } }