/* ========================================================================== SMOOTHIE VIBES — NACHT Eigenständiges Stylesheet für den dunklen Auftritt. ┌────────────────────────────────────────────────────────────────────┐ │ WARUM EINE ZWEITE DATEI STATT ÄNDERUNGEN AN stil.css │ │ │ │ An stil.css hängen 23 fertige und geprüfte Seiten. Der dunkle │ │ Auftritt dreht die Grundannahmen um: heller Grund wird dunkel, │ │ Bilder liegen nicht mehr auf Weiss, mix-blend-mode: multiply │ │ funktioniert nicht mehr. Das ist kein Überschreiben, das ist ein │ │ anderes System. Zwei getrennte Dateien lassen beide Stände │ │ nebeneinander bestehen, solange die Richtung nicht abgenommen ist.│ │ │ │ Ist der Muster-Entwurf abgenommen, wandert nacht.css an die │ │ Stelle von stil.css und die alte Datei fliegt raus. │ └────────────────────────────────────────────────────────────────────┘ AUFBAU 0 Schriften 1 Stellschrauben 2 Grundlagen 3 Typografie 4 Bahn und Abschnitt 5 Sternenfeld 6 Kopfzeile und Klappmenü 7 Schaltflächen 8 Bühne 9 Laufband 10 Manifest 11 Sortenliste 12 Rezeptstrecke 13 Zahlenband 14 Ablauf als feste Szene 15 Abschluss 16 Fusszeile 17 Bewegung 18 Schmale Bildschirme ========================================================================== */ /* -------------------------------------------------------------------------- 0. SCHRIFTEN Unverändert aus stil.css übernommen: lokal eingebunden, nie von Google geladen — sonst wandert die IP jedes Besuchers in die USA (LG München, Az. 3 O 17493/20). Sechs Dateien, zusammen 178 KB. -------------------------------------------------------------------------- */ @font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap; src:url('../fonts/gabarito-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap; src:url('../fonts/gabarito-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/onest-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap; src:url('../fonts/onest-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Sriracha';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/sriracha-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Sriracha';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/sriracha-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ========================================================================== 1. STELLSCHRAUBEN ========================================================================== */ :root{ /* ---- Grundflächen ------------------------------------------------------ Nicht reines Schwarz. Ein Blaustich hält die Fläche mit dem Galaxy-Band zusammen und lässt Fruchtfarben wärmer wirken — auf 000000 kippt jedes Pink ins Grelle. */ --nacht: #06050E; /* Seitengrund */ --nacht-2: #0B0918; /* abgesetzte Abschnitte */ --nacht-3: #120E26; /* Karten, angehobene Flächen */ --flor: rgba(255,255,255,.045); /* Glasfläche über dem Grund */ --kante: rgba(255,255,255,.10); --kante-2: rgba(255,255,255,.20); --licht: #F7F4FF; /* Überschriften */ --licht-2: #B4ADCE; /* Fliesstext */ /* Nebensächliches — Vorzeilen, Zahlenbeschriftungen, Laufband. Nicht dunkler machen: bei #6E678C lag der Kontrast auf dem Grund bei 4,3:1 und damit unter den 4,5:1, die die WCAG für Fliesstext verlangt. Am Bildschirm sah es gut aus, gemessen war es zu wenig — mit #857DA6 sind es 5,3:1 auf --nacht und 5,1:1 auf --nacht-2. */ --licht-3: #857DA6; /* ---- Akzente ----------------------------------------------------------- ┌──────────────────────────────────────────────────────────────────┐ │ DIESELBEN FARBTÖNE WIE AM TAG, ABER HELLER. │ │ Petrol #0E7C8C und Grün #5F9B22 sind auf Creme genau richtig │ │ und auf Schwarz tot — beide liegen unter 30 % Helligkeit und │ │ verschwinden im Grund. Angehoben wird nur die Helligkeit, der │ │ Farbton bleibt: aus Petrol wird Türkis, aus Laubgrün Limette. │ │ Die Marke bleibt erkennbar, die Fläche wird lesbar. │ └──────────────────────────────────────────────────────────────────┘ */ --akzent: #2FD4E8; /* Petrol, hochgezogen — Leitfarbe */ --glanz: #B98CFF; /* Galaxy-Violett, für Leuchten und Verläufe*/ --pink: #FF4E7E; --gruen: #8AE24B; --gelb: #FFC53D; --lila: #B98CFF; --orange: #FF8A45; /* ---- Schriften --------------------------------------------------------- */ --anzeige: 'Gabarito', 'Trebuchet MS', 'Segoe UI', sans-serif; --lese: 'Onest', 'Helvetica Neue', Arial, sans-serif; --hand: 'Sriracha', 'Segoe Script', cursive; --grundgroesse: 17px; --zeilenhoehe: 1.66; /* ---- Form -------------------------------------------------------------- */ --rundung: 14px; --rundung-gross: 26px; /* ---- Masse ------------------------------------------------------------- */ --breite: 1360px; --rand: clamp(20px, 5vw, 72px); --luft: clamp(84px, 11vw, 168px); /* ---- Bewegung ---------------------------------------------------------- */ --weich: cubic-bezier(.2,.8,.2,1); --zeit: 340ms; } /* ========================================================================== 2. GRUNDLAGEN ========================================================================== */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; } body{ background:var(--nacht); color:var(--licht-2); font-family:var(--lese); font-size:var(--grundgroesse); line-height:var(--zeilenhoehe); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button,input,textarea,select{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} ::selection{background:var(--akzent);color:var(--nacht)} :focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:3px} /* Sprungmarke für die Tastatur. Liegt ausserhalb des Bildes und kommt erst hervor, wenn sie den Fokus bekommt. */ .zumInhalt{ position:absolute;left:-9999px;top:0;z-index:200; padding:12px 20px;border-radius:0 0 var(--rundung) 0; background:var(--akzent);color:var(--nacht);font-weight:700; } .zumInhalt:focus{left:0} /* ========================================================================== 3. TYPOGRAFIE ========================================================================== */ h1,h2,h3,h4{ font-family:var(--anzeige); font-weight:800; line-height:1.02; letter-spacing:-.03em; color:var(--licht); text-wrap:balance; } h1{font-size:clamp(2.6rem,6.4vw,5.2rem)} h2{font-size:clamp(2rem,4.6vw,3.6rem)} h3{font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.02em} h4{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--licht-3)} p{text-wrap:pretty} /* Die Riesenzeile der Bühne und der Abschlüsse. Deutlich grösser als h1, optisch bis an den Rand gezogen: das negative Sperren holt die Luft heraus, die Gabarito bei diesen Graden zwischen den Buchstaben lässt. */ .riesig{ font-family:var(--anzeige); font-weight:900; font-size:clamp(3.2rem,11vw,10rem); line-height:.9; letter-spacing:-.045em; color:var(--licht); text-transform:uppercase; } /* Handschrift. Wie am Tag streng auf .hand begrenzt, nie Fliesstext. Auf Dunkel bekommt sie den Neonschein aus dem Galaxy-Band. */ .hand{ font-family:var(--hand); font-weight:400; text-transform:none; letter-spacing:0; line-height:1.1; color:var(--glanz); text-shadow:0 0 22px rgba(185,140,255,.7),0 0 60px rgba(140,90,255,.35); } .hand--tuerkis{color:var(--akzent);text-shadow:0 0 22px rgba(47,212,232,.6),0 0 60px rgba(47,212,232,.28)} .hand--pink{color:var(--pink);text-shadow:0 0 22px rgba(255,78,126,.6),0 0 60px rgba(255,78,126,.28)} /* Kleine Vorzeile über einer Überschrift */ .auge{ display:inline-flex;align-items:center;gap:11px; font-size:.75rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase; color:var(--licht-3); } .auge::before{ content:'';width:34px;height:1px;background:var(--kante-2); } .fuehrung{font-size:clamp(1.05rem,1.55vw,1.25rem);line-height:1.6;color:var(--licht-2)} /* ========================================================================== 4. BAHN UND ABSCHNITT ========================================================================== */ .bahn{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:var(--rand)} .bahn--eng{max-width:820px} .abschnitt{padding-block:var(--luft)} .abschnitt--knapp{padding-block:clamp(56px,7vw,96px)} .abschnitt--abgesetzt{background:var(--nacht-2)} /* Feine Trennkante zwischen zwei Abschnitten gleicher Farbe. Läuft nach aussen aus, damit sie nicht wie ein Kasten wirkt. */ .kante{ height:1px;border:0; background:linear-gradient(90deg,transparent,var(--kante),transparent); } /* ========================================================================== 5. STERNENFELD Das Wiedererkennungszeichen der Marke, reines CSS. Am Tag lag es nur unter dem Galaxy-Band, jetzt trägt es die ganze Seite. Zwei Ebenen: .nachthimmel legt die farbigen Nebel, ::before streut den Staub darüber. Beide fest am Element, nicht am Viewport — sonst wandert das Feld beim Scrollen mit und wirkt wie eine Tapete. ========================================================================== */ .nachthimmel{position:relative;overflow:hidden;isolation:isolate} .nachthimmel > *{position:relative;z-index:2} .nachthimmel::after{ content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 58% 62% at 18% 12%, rgba(126,58,232,.30), transparent 64%), radial-gradient(ellipse 52% 58% at 86% 76%, rgba(30,110,220,.26), transparent 62%), radial-gradient(ellipse 40% 44% at 62% 34%, rgba(47,212,232,.10), transparent 66%); } .nachthimmel::before{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.85), transparent), radial-gradient(1.1px 1.1px at 32% 68%, rgba(255,255,255,.55), transparent), radial-gradient(1.7px 1.7px at 58% 14%, rgba(255,255,255,.75), transparent), radial-gradient(1.1px 1.1px at 74% 52%, rgba(255,255,255,.50), transparent), radial-gradient(1.6px 1.6px at 88% 28%, rgba(255,255,255,.70), transparent), radial-gradient(1.2px 1.2px at 46% 88%, rgba(255,255,255,.48), transparent), radial-gradient(1.4px 1.4px at 8% 76%, rgba(255,255,255,.58), transparent), radial-gradient(1.1px 1.1px at 66% 82%, rgba(255,255,255,.42), transparent), radial-gradient(1.3px 1.3px at 24% 46%, rgba(255,255,255,.50), transparent), radial-gradient(1.2px 1.2px at 94% 58%, rgba(255,255,255,.45), transparent); opacity:.9; } /* ========================================================================== 6. KOPFZEILE UND KLAPPMENÜ ========================================================================== */ .kopf{ position:sticky;top:0;z-index:60; padding-block:16px; background:transparent; transition:background var(--zeit),border-color var(--zeit),padding var(--zeit); border-bottom:1px solid transparent; } /* Sobald gescrollt wird, setzt sich der Balken vom Bild ab. Die Klasse setzt js/nacht.js. */ .kopf.hatGescrollt{ padding-block:11px; background:rgba(6,5,14,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--kante); } .kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:24px} .wortmarke{display:inline-flex;flex-direction:column;line-height:1} .wortmarke__wort{ font-family:var(--hand);font-size:1.5rem;color:var(--licht); text-shadow:0 0 18px rgba(185,140,255,.45); } .wortmarke__zusatz{ margin-top:3px; font-family:var(--anzeige);font-weight:700; font-size:.6rem;letter-spacing:.44em;text-transform:uppercase; color:var(--akzent); } .navi{display:flex;gap:clamp(18px,2.2vw,34px)} .navi a{ position:relative; font-size:.8125rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase; color:var(--licht-2); padding-block:6px; transition:color var(--zeit); } .navi a::after{ content:'';position:absolute;left:0;bottom:0; width:100%;height:1px;background:var(--akzent); transform:scaleX(0);transform-origin:right; transition:transform var(--zeit) var(--weich); } .navi a:hover{color:var(--licht)} .navi a:hover::after{transform:scaleX(1);transform-origin:left} .navi a.hier{color:var(--licht)} .navi a.hier::after{transform:scaleX(1)} .kopf__rechts{display:flex;align-items:center;gap:14px} .burger{ display:none;width:44px;height:44px; border:1px solid var(--kante);border-radius:50%; place-items:center; } .burger span,.burger span::before,.burger span::after{ content:'';display:block;width:17px;height:1.5px; background:var(--licht);border-radius:2px; transition:transform var(--zeit) var(--weich),opacity 160ms; } .burger span::before{position:absolute;transform:translateY(-6px)} .burger span::after{position:absolute;transform:translateY(6px)} .burger[aria-expanded="true"] span{background:transparent} .burger[aria-expanded="true"] span::before{transform:rotate(45deg)} .burger[aria-expanded="true"] span::after{transform:rotate(-45deg)} .klappmenue{ position:fixed;inset:0;z-index:55; display:flex;flex-direction:column;justify-content:center;gap:6px; padding:var(--rand); background:rgba(6,5,14,.97); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transform:translateY(-100%); transition:transform 460ms var(--weich); visibility:hidden; } .klappmenue.offen{transform:translateY(0);visibility:visible} .klappmenue a{ font-family:var(--anzeige);font-weight:800; font-size:clamp(2rem,9vw,3.4rem);line-height:1.14; letter-spacing:-.03em;color:var(--licht); text-transform:uppercase; } .klappmenue a:hover{color:var(--akzent)} /* Im geschlossenen Zustand darf die Tastatur nicht hineinlaufen. */ .klappmenue:not(.offen) a{visibility:hidden} /* ========================================================================== 7. SCHALTFLÄCHEN ========================================================================== */ .knopf{ position:relative;overflow:hidden; display:inline-flex;align-items:center;gap:11px; padding:15px 28px;border-radius:999px; background:var(--akzent);color:#04222A; font-family:var(--anzeige);font-weight:800; font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase; border:1px solid transparent; transition:transform var(--zeit) var(--weich),box-shadow var(--zeit),color var(--zeit); box-shadow:0 0 0 rgba(47,212,232,0); } .knopf span{position:relative;z-index:2} .knopf svg{position:relative;z-index:2;width:16px;height:16px;transition:transform var(--zeit) var(--weich)} .knopf:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(47,212,232,.34)} .knopf:hover svg{transform:translateX(4px)} .knopf--klein{padding:11px 20px;font-size:.6875rem} .knopf--leer{ background:transparent;color:var(--licht); border-color:var(--kante-2); } .knopf--leer:hover{border-color:var(--akzent);color:var(--akzent);box-shadow:none} .knopf--glanz{background:var(--glanz);color:#1A0B34} .knopf--glanz:hover{box-shadow:0 12px 34px rgba(185,140,255,.4)} .knopfreihe{display:flex;flex-wrap:wrap;gap:14px} /* Textverweis mit Pfeil */ .pfeil{ display:inline-flex;align-items:center;gap:10px; font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--licht);padding-bottom:5px; border-bottom:1px solid var(--kante); transition:border-color var(--zeit),color var(--zeit); } .pfeil svg{width:15px;height:15px;transition:transform var(--zeit) var(--weich)} .pfeil:hover{color:var(--akzent);border-color:var(--akzent)} .pfeil:hover svg{transform:translateX(4px)} /* ========================================================================== 8. BÜHNE Volle Bildschirmhöhe. Das Glas ist der Held und steht mittig-rechts, die Riesenzeile läuft darüber und dahinter — die Überlappung ist der Punkt, an dem die Seite aufhört, ein Raster zu sein. ========================================================================== */ .buehne{ position:relative; min-height:100svh; display:grid; grid-template-rows:1fr auto; padding-top:clamp(40px,7vw,80px); overflow:hidden; } .buehne__innen{ width:100%;max-width:var(--breite); margin-inline:auto;padding-inline:var(--rand); align-self:center; display:grid; grid-template-columns:repeat(12,1fr); align-items:center; gap:0; } .buehne__innen > *{min-width:0} /* Text und Bild liegen in derselben Rasterzeile und überlappen bewusst: der Text reicht bis Spalte 8, das Bild beginnt schon bei Spalte 6. */ .buehne__text{grid-column:1 / span 7;grid-row:1;position:relative;z-index:3} .buehne__bild{grid-column:6 / span 7;grid-row:1;position:relative;z-index:2} .buehne__zeile{display:block} /* Die zweite Zeile rückt ein — dadurch entsteht die Treppe, die eine zentrierte Überschrift nie hinbekommt. */ .buehne__zeile--eingerueckt{margin-left:.14em} .buehne__satz{ margin-top:26px;max-width:40ch; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--licht-2); } /* Der Lichtkegel hinter dem Glas. Ohne ihn steht das Bild als dunkles Rechteck im dunklen Grund; mit ihm sieht es aus, als stünde das Glas in einem Spot. */ .buehne__bild::before{ content:'';position:absolute;z-index:-1; left:50%;top:48%;transform:translate(-50%,-50%); width:min(78vw,760px);aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(185,140,255,.34) 0%,rgba(126,58,232,.16) 42%,transparent 68%); filter:blur(14px); } .buehne__bild img{ width:100%;max-width:620px;margin-inline:auto; /* Siehe .randweich weiter unten — die Kanten laufen aus, damit der mitgelieferte Sternenhintergrund in die Seitenfläche übergeht. */ } /* ┌────────────────────────────────────────────────────────────────────┐ │ 🔴 WARUM HIER KEINE ELLIPSE STEHT │ │ │ │ Erster Versuch: │ │ mask-image: radial-gradient(ellipse 72% 74% at 50% 50%, │ │ #000 58%, transparent 100%) │ │ │ │ Das sah im Code nach „weiche Kanten“ aus und hat nichts getan. │ │ 72 % und 74 % sind die RADIEN, nicht die Durchmesser — die │ │ Ellipse ist damit fast anderthalbmal so breit wie das Bild. Am │ │ linken Bildrand liegt man erst bei 69 % der Strecke und damit │ │ noch bei rund 74 % Deckkraft. Ergebnis: ein sichtbares Rechteck │ │ mitten in der Fläche. │ │ │ │ Eine passend verkleinerte Ellipse hilft nicht. Damit die Ränder │ │ wirklich auf null gehen, darf der Radius höchstens 50 % betragen │ │ — dann liegt aber der obere und untere Rand des hohen Glases bei │ │ 90 % der Strecke und wird selbst durchsichtig. Ein Glas im │ │ Hochformat und eine Ellipse vertragen sich nicht. │ │ │ │ Was funktioniert: nur die Ränder ausblenden, die Mitte unangetas- │ │ tet lassen. Zwei lineare Verläufe, einer je Achse, mit │ │ mask-composite:intersect verschnitten. Wo ein Browser das nicht │ │ kann, addieren sich die Ebenen — dann ist das Bild vollständig │ │ sichtbar, also genau der Stand von vorher. Kein Bruch. │ └────────────────────────────────────────────────────────────────────┘ Gilt für jedes Bild, das mit object-fit:contain in einer Fläche steht: dort bleibt der mitgelieferte Grund als Rechteck sichtbar. Bilder mit object-fit:cover füllen ihre Kachel randlos und brauchen es nicht. */ .randweich, .rezeptkopf__bild img, .portraet__bild img, .tagesrezept__bild img{ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 5%, #000 96%, transparent 100%); -webkit-mask-composite:source-in; mask-composite:intersect; } /* Das runde Siegel, wie am Tag — nur leuchtend statt grün gefüllt. */ .siegel{ position:absolute;right:4%;top:6%;z-index:4; width:clamp(92px,10vw,128px);aspect-ratio:1; display:grid;place-items:center;text-align:center; border-radius:50%; border:1px solid rgba(47,212,232,.5); background:rgba(6,5,14,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-family:var(--anzeige);font-weight:800; font-size:.6rem;letter-spacing:.15em;text-transform:uppercase; line-height:1.6;color:var(--akzent); box-shadow:0 0 40px rgba(47,212,232,.24); animation:kreiseln 26s linear infinite; } @keyframes kreiseln{to{transform:rotate(360deg)}} /* Hinweis zum Weiterscrollen, unten links */ .scrollwink{ display:inline-flex;align-items:center;gap:12px; font-size:.6875rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase; color:var(--licht-3); } .scrollwink__strich{ display:block;width:52px;height:1px; background:linear-gradient(90deg,var(--akzent),transparent); position:relative;overflow:hidden; } .scrollwink__strich::after{ content:'';position:absolute;inset:0; background:var(--akzent); animation:wandern 2.2s var(--weich) infinite; } @keyframes wandern{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} } /* ========================================================================== 9. LAUFBAND Endlose Zutatenzeile. Der Inhalt steht im HTML zweimal; die Animation schiebt genau um die halbe Breite, dadurch ist der Übergang nahtlos. Die zweite Hälfte ist aria-hidden, sonst liest der Screenreader alles doppelt vor. ========================================================================== */ .laufband{ position:relative; padding-block:22px; border-block:1px solid var(--kante); overflow:hidden; /* An beiden Enden ausblenden statt hart abschneiden. */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .laufband__spur{ display:flex;width:max-content; animation:laufen 38s linear infinite; } .laufband:hover .laufband__spur{animation-play-state:paused} .laufband__satz{ display:flex;align-items:center;gap:clamp(24px,3vw,48px); padding-right:clamp(24px,3vw,48px); } .laufband__satz span{ font-family:var(--anzeige);font-weight:800; font-size:clamp(1.1rem,2.1vw,1.7rem); letter-spacing:-.02em;text-transform:uppercase; color:var(--licht-3); white-space:nowrap; } /* Jedes vierte Wort leuchtet — das gibt der Zeile Takt. */ .laufband__satz span:nth-child(4n+1){color:var(--akzent)} .laufband__satz b{ font-weight:400;color:var(--glanz); font-size:1.1em;line-height:0; } @keyframes laufen{to{transform:translateX(-50%)}} /* ========================================================================== 10. MANIFEST Ein einziger grosser Satz. Die Wörter erscheinen beim Scrollen nach- einander — das ist der Bruch im Rhythmus, den die Tagfassung nicht hat. ========================================================================== */ .manifest{ font-family:var(--anzeige);font-weight:800; font-size:clamp(1.8rem,5vw,4rem); line-height:1.12;letter-spacing:-.035em; color:var(--licht); max-width:22ch; } .manifest .wort{ display:inline-block; opacity:.14; transition:opacity 520ms var(--weich),transform 520ms var(--weich); transform:translateY(.12em); } .manifest .wort.an{opacity:1;transform:none} .manifest .leucht{color:var(--akzent)} .manifest .hand{font-size:1.06em} /* ========================================================================== 11. SORTENLISTE Ersetzt die sechs Pastellkacheln. Sechs Zeilen in Versalien; beim Überfahren färbt sich die Zeile in ihre Kategoriefarbe und das Bild folgt dem Zeiger. Kein Raster, keine gleich grossen Kästchen. ========================================================================== */ .sorten{border-top:1px solid var(--kante)} .sorte{ position:relative;display:block; border-bottom:1px solid var(--kante); padding-block:clamp(18px,2.6vw,30px); transition:padding-left var(--zeit) var(--weich); } .sorte__innen{ display:flex;align-items:baseline;gap:clamp(14px,2vw,28px); position:relative;z-index:2; } .sorte__nr{ font-family:var(--anzeige);font-weight:700; font-size:.75rem;letter-spacing:.14em; color:var(--licht-3); min-width:2.4em; transition:color var(--zeit); } .sorte__name{ font-family:var(--anzeige);font-weight:800; font-size:clamp(1.6rem,4.4vw,3.2rem); line-height:1;letter-spacing:-.035em; text-transform:uppercase; color:var(--licht); transition:color var(--zeit),transform var(--zeit) var(--weich); } .sorte__satz{ margin-left:auto; font-size:.8125rem;letter-spacing:.06em; color:var(--licht-3); white-space:nowrap; transition:color var(--zeit); } /* Die Farbe kommt aus einer Variablen, die im HTML je Zeile gesetzt wird. So braucht es nicht sechs fast gleiche Regelblöcke. */ .sorte:hover{padding-left:clamp(10px,1.6vw,22px)} .sorte:hover .sorte__name{color:var(--ton,var(--akzent))} .sorte:hover .sorte__nr{color:var(--ton,var(--akzent))} .sorte:hover .sorte__satz{color:var(--licht-2)} /* Der Farbschleier, der von links einläuft */ .sorte::before{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,color-mix(in srgb,var(--ton,var(--akzent)) 13%,transparent),transparent 58%); opacity:0;transition:opacity var(--zeit); } .sorte:hover::before{opacity:1} /* Das Bild, das dem Zeiger folgt. Position setzt js/nacht.js. Auf Geräten ohne Zeiger wird es gar nicht erst eingeblendet. */ .sortenbild{ position:fixed;top:0;left:0;z-index:40; width:210px;aspect-ratio:3/4; border-radius:var(--rundung-gross); overflow:hidden;pointer-events:none; opacity:0;transform:translate(-50%,-50%) scale(.86); /* Die Nachlaufzeit auf dem transform ist Absicht: das Bild hängt dem Zeiger eine Spur hinterher, statt an ihm zu kleben. js/nacht.js setzt den transform inline, diese Regel bestimmt nur, wie schnell er folgt. */ transition:opacity 260ms var(--weich),transform 260ms var(--weich); box-shadow:0 26px 70px rgba(0,0,0,.6); border:1px solid var(--kante-2); } .sortenbild.an{opacity:1;transform:translate(-50%,-50%) scale(1)} .sortenbild img{width:100%;height:100%;object-fit:cover} @media (hover:none),(pointer:coarse){ .sortenbild{display:none} } /* ========================================================================== 12. REZEPTSTRECKE Waagerecht statt 4×2-Raster. Wischbar mit Fangpunkten, darunter ein Fortschrittsbalken. Am Rand läuft die Strecke bewusst aus dem Bild — das signalisiert „hier geht es weiter“ besser als jeder Pfeil. ========================================================================== */ .streckenkopf{ display:flex;flex-wrap:wrap;gap:22px; align-items:end;justify-content:space-between; margin-bottom:clamp(28px,3.6vw,46px); } .strecke{ display:flex;gap:clamp(14px,1.6vw,24px); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; /* Nach aussen ziehen, damit die Karten am Bildrand anschneiden. */ margin-inline:calc(var(--rand) * -1); padding-inline:var(--rand); padding-bottom:6px; } .strecke::-webkit-scrollbar{display:none} .rezept{ flex:0 0 clamp(240px,25vw,320px); scroll-snap-align:start; display:flex;flex-direction:column; border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-3); overflow:hidden; transition:transform var(--zeit) var(--weich),border-color var(--zeit),box-shadow var(--zeit); } .rezept:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--ton,var(--glanz)) 55%,transparent); box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb,var(--ton,var(--glanz)) 22%,transparent); } .rezept__bild{ position:relative;aspect-ratio:4/5;overflow:hidden; background:radial-gradient(ellipse at 50% 62%,color-mix(in srgb,var(--ton,var(--glanz)) 20%,transparent),transparent 68%); } .rezept__bild img{ width:100%;height:100%;object-fit:cover; transition:transform 620ms var(--weich); } .rezept:hover .rezept__bild img{transform:scale(1.05)} .rezept__text{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .rezept__name{ font-family:var(--anzeige);font-weight:800; font-size:1.22rem;letter-spacing:-.02em;color:var(--licht); } .rezept__zutaten{ display:flex;flex-wrap:wrap;gap:6px; font-size:.75rem;color:var(--licht-3); } .rezept__zutaten li{ padding:4px 10px;border-radius:999px; border:1px solid var(--kante); } .rezept__marke{ margin-top:auto;padding-top:6px; font-size:.6875rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--ton,var(--glanz)); } /* Fortschrittsbalken unter der Strecke. Breite setzt js/nacht.js. */ .streckenbalken{ position:relative;height:2px;margin-top:26px; background:var(--kante);border-radius:2px;overflow:hidden; } /* Breite und Verschiebung setzt js/nacht.js. Bewusst ohne transition: der Balken hängt am Scrollweg, jede Nachlaufzeit fühlt sich hier nach Verzögerung an statt nach Weichheit. */ .streckenbalken__fuellung{ position:absolute;inset-block:0;left:0;width:18%; background:linear-gradient(90deg,var(--akzent),var(--glanz)); border-radius:2px; will-change:transform; } /* ========================================================================== 13. ZAHLENBAND ========================================================================== */ .zahlenband{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); } .zahlenband > *{min-width:0} .zahl b{ display:block; font-family:var(--anzeige);font-weight:900; font-size:clamp(3rem,7.5vw,6.5rem); line-height:.86;letter-spacing:-.055em; color:var(--licht); font-variant-numeric:tabular-nums lining-nums; background:linear-gradient(170deg,var(--licht) 30%,var(--glanz)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .zahl span{ display:block;margin-top:14px; padding-top:14px;border-top:1px solid var(--kante); font-size:.8125rem;line-height:1.5;color:var(--licht-3); } /* ========================================================================== 14. ABLAUF ALS FESTE SZENE Links bleibt die Riesenzahl stehen, rechts laufen die vier Schritte durch. position:sticky, kein JavaScript nötig. ========================================================================== */ .szene{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(30px,5vw,90px); align-items:start; } .szene > *{min-width:0} .szene__fest{position:sticky;top:clamp(96px,16vh,180px)} .szene__schritte{display:grid;gap:clamp(60px,12vh,150px);padding-block:clamp(30px,8vh,90px)} .schritt{ display:grid;grid-template-columns:auto 1fr; gap:clamp(16px,2vw,28px);align-items:start; } /* Die Zahl ist im Ruhezustand nur ein Umriss und färbt sich, sobald der Schritt in den Bildschirm läuft. 🔴 Der Umriss stand zuerst auf --kante-2, also Weiss bei 20 %. Gemessen sind das 1,7:1 gegen den Grund — für grosse Schrift verlangt die WCAG 3:1. Am Bildschirm sah es „dezent“ aus, lesbar war es nicht. Entscheidend ist der Ruhezustand, nicht der gefärbte: ohne JavaScript wird `.an` nie gesetzt, dann bleibt die Zahl dauerhaft ein Umriss. 45 % Weiss ergibt nachgemessen 4,46:1 und ist vom gefärbten Zustand immer noch klar zu unterscheiden. */ .schritt__zahl{ font-family:var(--anzeige);font-weight:900; font-size:clamp(2.4rem,5vw,4.2rem);line-height:.9; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.45); transition:color var(--zeit),-webkit-text-stroke-color var(--zeit); } .schritt.an .schritt__zahl{ color:var(--ton,var(--akzent)); -webkit-text-stroke-color:transparent; } .schritt h3{margin-bottom:12px;font-size:clamp(1.25rem,2.4vw,1.85rem)} .schritt p{max-width:44ch;color:var(--licht-2)} /* ========================================================================== 15. ABSCHLUSS ========================================================================== */ .abschluss{text-align:center} .abschluss .riesig{ background:linear-gradient(100deg,var(--akzent),var(--glanz) 48%,var(--pink)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* ========================================================================== 16. FUSSZEILE ========================================================================== */ .fuss{ border-top:1px solid var(--kante); padding-top:clamp(56px,7vw,88px); padding-bottom:34px; } .fuss__raster{ display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:clamp(44px,5vw,64px); } .fuss__raster > *{min-width:0} .fuss__spalte{display:grid;gap:11px;margin-top:18px} .fuss__spalte a{ font-size:.9375rem;color:var(--licht-2); transition:color var(--zeit),padding-left var(--zeit) var(--weich); } .fuss__spalte a:hover{color:var(--akzent);padding-left:5px} /* Die Zeichenreihe fuer soziale Netzwerke stand hier bis zum 06.09. und ist mit dem Markup raus — die drei Verweise gingen ins Leere, und ein toter Verweis im Fuss faellt auf jeder Seite auf. Kommen echte Profile dazu, gehoert die Reihe wieder in die Fusszeile und in die linke Tafel auf kontakt.html. */ /* Die Riesenwortmarke am Fuss — läuft von Rand zu Rand. */ .fussmarke{ font-family:var(--anzeige);font-weight:900; font-size:clamp(3rem,15vw,13rem); line-height:.82;letter-spacing:-.055em; text-transform:uppercase;text-align:center; color:transparent; -webkit-text-stroke:1px var(--kante-2); padding-block:clamp(20px,3vw,40px); user-select:none; } .fuss__unten{ display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; padding-top:26px;border-top:1px solid var(--kante); font-size:.8125rem;color:var(--licht-3); } /* ========================================================================== 17. BEWEGUNG ========================================================================== */ /* Klassenname .da wie in stil.css und js/haupt.js — nicht abweichen, sonst gilt für zwei Stände dieselbe Sache unter zwei Namen. */ [data-zeigen]{ opacity:0;transform:translateY(26px); transition:opacity 700ms var(--weich),transform 700ms var(--weich); } [data-zeigen].da{opacity:1;transform:none} /* ┌──────────────────────────────────────────────────────────────────────┐ │ DIESER BLOCK IST AUCH DER PFAD FÜR DIE VORSCHAUBILDER. │ │ │ │ vorschau.py rendert mit reduced_motion="reduce". Ohne die Regeln │ │ hier kämen im Ganzseiten-Screenshot ganze Abschnitte leer heraus: │ │ der Beobachter löst bei einer Aufnahme nie aus, das Manifest bliebe │ │ bei 14 % Deckkraft und die Schrittzahlen blieben Umrisse. │ └──────────────────────────────────────────────────────────────────────┘ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important; } [data-zeigen]{opacity:1;transform:none} .manifest .wort{opacity:1;transform:none} .schritt__zahl{color:var(--ton,var(--akzent));-webkit-text-stroke-color:transparent} .klappmenue{transition:visibility 0s linear 0s} } /* ========================================================================== 18. FLIESSTEXT — Impressum, Datenschutz Auf Dunkel ist die Zeilenlänge wichtiger als am Tag: heller Text auf dunklem Grund blendet, lange Zeilen ermüden schneller. Deshalb 66ch statt der 70ch aus der Tagfassung. ========================================================================== */ .lesetext h2{ font-size:clamp(1.2rem,2.3vw,1.55rem); margin:46px 0 15px; } .lesetext h2:first-child{margin-top:0} .lesetext p{margin-bottom:15px;max-width:66ch} .lesetext ul{margin:0 0 18px 20px;list-style:disc} .lesetext li{margin-bottom:7px;max-width:64ch;color:var(--licht-2)} .lesetext li::marker{color:var(--akzent)} .lesetext a{color:var(--akzent);border-bottom:1px solid rgba(47,212,232,.32)} .lesetext a:hover{border-color:var(--akzent)} .lesetext strong{color:var(--licht);font-weight:700} .lesetext address{font-style:normal;margin-bottom:15px;line-height:1.7} /* Lücke, die nur Michael füllen kann — Anschrift, Steuerstatus, Hoster. Auf Dunkel taugt das Gelb der Tagfassung nicht: eine helle Fläche im Fliesstext schlägt ein Loch in die Seite. Stattdessen ein getönter Kasten mit gelber Kante — auffällig genug, ohne zu blenden. */ .luecke{ background:rgba(255,197,61,.14); color:#FFD97A; padding:1px 8px; border-radius:4px; border:1px solid rgba(255,197,61,.34); font-style:normal; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .entwurfsnotiz{ margin-bottom:clamp(28px,3.6vw,40px); padding:clamp(20px,2.6vw,28px); border-radius:var(--rundung-gross); background:rgba(255,197,61,.07); border:1px solid rgba(255,197,61,.28); } .entwurfsnotiz p{font-size:.9375rem;line-height:1.6;color:var(--licht-2);max-width:66ch} .entwurfsnotiz strong{color:#FFD97A} /* Rückweg über der Überschrift. display:flex statt inline-flex mit width:max-content — sonst fliesst die darunter stehende Vorzeile („Rechtliches") in dieselbe Zeile, weil beide inline sind. Der margin-bottom wirkt dann auch. */ .krumen{ display:flex;width:max-content;align-items:center;gap:9px; font-size:.6875rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase; color:var(--licht-3);margin-bottom:20px; transition:color var(--zeit); } .krumen:hover{color:var(--akzent)} .krumen svg{width:14px;height:14px;transform:rotate(180deg)} /* ========================================================================== 19. SEITENKOPF für Unterseiten Nicht 100svh wie die Startseite — eine Unterseite, die den ganzen Bildschirm für ihre Überschrift beansprucht, ärgert nur. ========================================================================== */ .seitenkopf{padding-top:clamp(46px,7vw,96px);padding-bottom:clamp(30px,4vw,52px)} .seitenkopf h1{margin-top:16px;max-width:16ch} .seitenkopf .fuehrung{margin-top:22px;max-width:56ch} /* Kopf mit Bild daneben */ .seitenkopf__raster{ display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,72px);align-items:center; } .seitenkopf__raster > *{min-width:0} .seitenkopf__bild{position:relative} .seitenkopf__bild::before{ content:'';position:absolute;z-index:-1; left:50%;top:50%;transform:translate(-50%,-50%); width:min(70vw,560px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(185,140,255,.30) 0%,transparent 66%); filter:blur(14px); } /* Dieselbe Randbehandlung wie an der Bühne — siehe .randweich. */ .seitenkopf__bild img{ width:100%;max-width:460px;margin-inline:auto; } /* Echtes Szenenfoto statt freigestelltem Glas. Die weiche Maske oben taugt nur für Motive mit eigenem dunklem Grund — ein Foto mit Tisch, Fenster und Händen franst damit an den Rändern aus und sieht nach Fehler aus. Ein Foto braucht eine Kante: Radius, feiner Rahmen, fester Beschnitt. */ .seitenkopf__bild--foto{filter:none} .seitenkopf__bild--foto::before{display:none} .seitenkopf__bild--foto img{ max-width:none; aspect-ratio:1;object-fit:cover;object-position:56% 50%; border-radius:var(--rundung-gross); border:1px solid var(--kante); box-shadow:0 30px 70px rgba(0,0,0,.55); } /* Falls jemand .randweich versehentlich mit dem Fotokopf kombiniert: ein Foto mit Tisch und Fenster darf nicht ausfransen. */ .seitenkopf__bild--foto img.randweich{ -webkit-mask-image:none;mask-image:none; } /* ========================================================================== 20. SORTENPORTRÄT — smoothies.html Sechs Blöcke, abwechselnd gespiegelt. Der Farbton kommt je Block über --ton; er färbt die Bildfläche und die Zutatenmarken ein. Das ist der Ersatz für die Wiedererkennung, die am Tag die Pastellkacheln lieferten. 🔴 Beim Spiegeln müssen die Spaltenbreiten mitwandern. In der Tagfassung war genau das der Fehler: Bild und Text tauschten die Spalte, die Breiten 5fr/7fr blieben stehen — das Bild bekam die breite Spalte, der Text die schmale. Deshalb dreht :nth-of-type(even) beides um. ========================================================================== */ .portraet{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4.5vw,72px); align-items:center; padding-block:clamp(40px,5.5vw,80px); border-bottom:1px solid var(--kante); scroll-margin-top:110px; } .portraet > *{min-width:0} .portraet:last-child{border-bottom:0} .portraet:nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)} .portraet:nth-of-type(even) .portraet__bild{order:2} .portraet:nth-of-type(even) .portraet__text{order:1} .portraet__bild{ position:relative; border-radius:var(--rundung-gross); overflow:hidden; aspect-ratio:4/3; display:grid;place-items:center; border:1px solid var(--kante); background: radial-gradient(ellipse 70% 80% at 50% 60%,color-mix(in srgb,var(--ton,var(--glanz)) 26%,transparent),transparent 70%), var(--nacht-3); } .portraet__bild img{ width:auto;height:88%;object-fit:contain; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); } .portraet__name{ font-size:clamp(1.5rem,3.2vw,2.3rem); margin-bottom:16px; color:var(--licht); } .portraet__text p{max-width:52ch} /* Zutatenmarken unter dem Text */ .marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .marken span{ padding:6px 13px;border-radius:999px; border:1px solid color-mix(in srgb,var(--ton,var(--glanz)) 34%,transparent); background:color-mix(in srgb,var(--ton,var(--glanz)) 8%,transparent); font-size:.75rem;color:var(--licht-2); } /* ========================================================================== 21. ANLASSKARTEN — „Welcher passt zu dir?“ ========================================================================== */ .anlaesse{ display:grid;grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.5vw,20px); } .anlaesse > *{min-width:0} .anlass{ position:relative;overflow:hidden; display:flex;flex-direction:column; min-height:230px;padding:22px 20px; border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-3); transition:transform var(--zeit) var(--weich),border-color var(--zeit),box-shadow var(--zeit); } .anlass:hover{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--ton,var(--glanz)) 55%,transparent); box-shadow:0 20px 50px rgba(0,0,0,.5); } .anlass__zeichen{ width:42px;height:42px;display:grid;place-items:center; border-radius:50%;margin-bottom:16px; border:1px solid color-mix(in srgb,var(--ton,var(--glanz)) 46%,transparent); background:color-mix(in srgb,var(--ton,var(--glanz)) 12%,transparent); color:var(--ton,var(--glanz)); } .anlass__zeichen svg{width:19px;height:19px;stroke-width:1.7;fill:none;stroke:currentColor} .anlass__name{ font-family:var(--anzeige);font-weight:800; font-size:1.05rem;letter-spacing:-.02em;color:var(--licht); } .anlass__satz{ margin-top:8px;font-size:.8125rem;line-height:1.5; color:var(--licht-2);max-width:24ch; } /* Das Glas sitzt angeschnitten in der unteren rechten Ecke. */ .anlass img{ position:absolute;right:-14%;bottom:-8%; width:62%;height:auto; opacity:.5;pointer-events:none; -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 45%,transparent 92%); mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 45%,transparent 92%); transition:transform 620ms var(--weich),opacity var(--zeit); } .anlass:hover img{transform:scale(1.08) translateY(-4px);opacity:.75} /* ========================================================================== 22. BAUFORMEL — „Bau dir deinen eigenen“ ========================================================================== */ .formel{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px); } .formel > *{min-width:0} .formelteil{ padding:clamp(22px,2.6vw,30px); border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-3); position:relative;overflow:hidden; } /* Der Farbstreifen oben ist das einzige Farbsignal — vier volle Farbflächen nebeneinander wären auf Dunkel zu laut. */ .formelteil::before{ content:'';position:absolute;inset:0 0 auto 0;height:3px; background:var(--ton,var(--akzent)); } .formelteil__zahl{ display:block; font-family:var(--anzeige);font-weight:900; font-size:2.4rem;line-height:1;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--ton,var(--akzent)) 60%,transparent); margin-bottom:14px; } .formelteil__titel{ display:block; font-family:var(--anzeige);font-weight:800; font-size:1.05rem;letter-spacing:-.02em;color:var(--licht); margin-bottom:9px; } .formelteil__satz{font-size:.875rem;line-height:1.55;color:var(--licht-2)} .formelteil__bsp{ display:block;margin-top:16px;padding-top:14px; border-top:1px solid var(--kante); font-size:.75rem;line-height:1.5;color:var(--ton,var(--akzent)); } /* ========================================================================== 23. REZEPTRASTER — rezepte.html Dieselbe .rezept-Karte wie in der Strecke auf der Startseite, nur im Raster statt in der Reihe. Deshalb muss flex-basis zurückgesetzt werden. ========================================================================== */ .rezepte{ display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px); } .rezepte > *{min-width:0} .rezepte .rezept{flex:initial;scroll-snap-align:none} /* Dreispaltige Fassung fuer „Das koennte auch passen" am Fuss der Rezeptseiten. 🔴 Das stand vorher als style="grid-template-columns:repeat(3,1fr)" direkt im Markup — und ein Inline-Stil schlaegt jede Media Query. Auf dem Handy blieben deshalb drei Spalten zu je 110 px stehen, in denen „Tropical Sunshine" und „5 Min · Gruener Smoothie" aus ihrem Kasten liefen. Genau derselbe Fehler wie seinerzeit auf leistungen.html von webdesign-pfisterer.de. Als Klasse laesst er sich ueberschreiben — deshalb steht .rezepte--3 unten in jeder Stufe mit drin. */ .rezepte--3{grid-template-columns:repeat(3,1fr)} /* ========================================================================== 24. REZEPT DES TAGES ========================================================================== */ .tagesrezept{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4fr); gap:clamp(24px,3.4vw,48px); align-items:start; padding:clamp(24px,3vw,40px); border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-3); } .tagesrezept > *{min-width:0} .tagesrezept__bild{ border-radius:var(--rundung);overflow:hidden; aspect-ratio:4/5;display:grid;place-items:center; background:radial-gradient(ellipse 70% 80% at 50% 60%,rgba(185,140,255,.24),transparent 70%); } .tagesrezept__bild img{width:auto;height:92%;object-fit:contain} .tagesrezept__name{ font-family:var(--anzeige);font-weight:800; font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:-.03em; color:var(--licht); } .tagesrezept__satz{margin-top:12px;font-size:.9375rem;color:var(--licht-2);max-width:40ch} .zutatenpaar{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px} .zutatenpaar > *{min-width:0} .zutatenpaar h4,.zubereitung h4{margin-bottom:12px} .zutatenpaar li{ padding:8px 0;border-bottom:1px solid var(--kante); font-size:.875rem;color:var(--licht-2); } .zutatenpaar li:last-child{border-bottom:0} .zubereitung ol{counter-reset:schritt;display:grid;gap:14px} .zubereitung li{ counter-increment:schritt; display:grid;grid-template-columns:26px 1fr;gap:13px; font-size:.875rem;line-height:1.55;color:var(--licht-2); } .zubereitung li::before{ content:counter(schritt); width:26px;height:26px;display:grid;place-items:center; border-radius:50%; border:1px solid rgba(47,212,232,.4); font-family:var(--anzeige);font-weight:800;font-size:.75rem; color:var(--akzent); } /* ========================================================================== 25. REZEPT-EINZELSEITE ========================================================================== */ .rezeptkopf{ display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4.5vw,68px);align-items:center; } .rezeptkopf > *{min-width:0} .rezeptkopf__bild{ position:relative; border-radius:var(--rundung-gross);overflow:hidden; aspect-ratio:4/5;display:grid;place-items:center; border:1px solid var(--kante); background: radial-gradient(ellipse 70% 80% at 50% 58%,color-mix(in srgb,var(--ton,var(--glanz)) 30%,transparent),transparent 72%), var(--nacht-3); } .rezeptkopf__bild img{ width:auto;height:92%;object-fit:contain; filter:drop-shadow(0 20px 46px rgba(0,0,0,.6)); } .eckdaten{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .eckdaten span{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:999px; border:1px solid var(--kante); background:var(--flor); font-size:.8125rem;color:var(--licht-2); } .eckdaten svg{width:16px;height:16px;stroke-width:1.8;color:var(--akzent);fill:none;stroke:currentColor} .machart{ display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(26px,4vw,60px);align-items:start; } .machart > *{min-width:0} .machart h2{font-size:clamp(1.25rem,2.2vw,1.65rem);margin-bottom:20px} .zutatenliste li{ display:flex;align-items:flex-start;gap:12px; padding:12px 0;border-bottom:1px solid var(--kante); font-size:.9375rem;line-height:1.5;color:var(--licht-2); } .zutatenliste li:last-child{border-bottom:0} .zutatenliste li::before{ content:'';flex-shrink:0;width:7px;height:7px;margin-top:.52em; border-radius:50%;background:var(--akzent); box-shadow:0 0 8px rgba(47,212,232,.8); } .tippkasten{ margin-top:clamp(30px,4vw,44px); padding:clamp(22px,2.8vw,32px); border-radius:var(--rundung-gross); background:rgba(255,197,61,.07); border:1px solid rgba(255,197,61,.24); } .tippkasten__titel{ font-family:var(--hand);font-size:1.3rem;line-height:1.2; color:#FFD97A;margin-bottom:10px; text-shadow:0 0 18px rgba(255,197,61,.35); } .tippkasten p{font-size:.9375rem;line-height:1.6;color:var(--licht-2);max-width:62ch} /* ========================================================================== 26. KARTEN — Werte, Gründe, alles Dreispaltige ========================================================================== */ .karten{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)} .karten--3{grid-template-columns:repeat(3,1fr)} .karten > *{min-width:0} .karte{ padding:clamp(24px,2.8vw,32px); border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-3); transition:transform var(--zeit) var(--weich),border-color var(--zeit); } .karte:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ton,var(--glanz)) 50%,transparent)} .karte__zeichen{ width:44px;height:44px;display:grid;place-items:center; border-radius:50%;margin-bottom:18px; border:1px solid color-mix(in srgb,var(--ton,var(--akzent)) 46%,transparent); background:color-mix(in srgb,var(--ton,var(--akzent)) 12%,transparent); color:var(--ton,var(--akzent)); } .karte__zeichen svg{width:20px;height:20px;stroke-width:1.7;fill:none;stroke:currentColor} .karte h3{margin-bottom:11px;font-size:1.05rem} .karte p{font-size:.875rem;line-height:1.6;color:var(--licht-2)} /* ========================================================================== 27. ÜBER UNS — das persönliche Wort ========================================================================== */ .eigenwort{ padding:clamp(26px,3.4vw,44px); border-radius:var(--rundung-gross); border:1px solid var(--kante); border-left:3px solid var(--akzent); background:var(--nacht-3); } .eigenwort p + p{margin-top:15px} /* Szenenbild über dem persönlichen Block: der Mixer am Morgen. Es steht bewusst NICHT randlos in der Fläche, sondern in einem Rahmen — das Motiv bringt einen hellen Lichtschacht mit, der ohne Kante in den Seitengrund ausfransen würde. Mit Radius und feiner Kante liest er sich als Teil des Bildes. */ .eigenwortbild{ width:100%;aspect-ratio:3/2;object-fit:cover; border-radius:var(--rundung-gross); border:1px solid var(--kante); margin-bottom:clamp(18px,2.4vw,28px); box-shadow:0 24px 60px rgba(0,0,0,.5); } /* Unterschrift mit Portraet. Das Bild ist eine helle Scheibe — es wurde seinerzeit gegen Weiss freigestellt und bekommt seinen hellen Grund zurueck, statt ihn muehsam zu entfernen (siehe _werkzeug/portraet.py). Auf der dunklen Karte liest sich das wie ein aufgeklebtes Bild. */ .eigenwort__signatur{ display:flex;align-items:center;gap:16px; margin-top:28px; } .eigenwort__bild{ width:88px;height:88px;flex:none; border-radius:50%; box-shadow:0 10px 28px rgba(0,0,0,.5); } .eigenwort__unterschrift{ font-family:var(--hand);font-size:1.4rem;line-height:1.2; color:var(--akzent); text-shadow:0 0 20px rgba(47,212,232,.4); } @media (max-width:560px){ .eigenwort__bild{width:72px;height:72px} } /* ========================================================================== 28. KONTAKTSEITE ========================================================================== */ .kontaktdreier{ display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px);align-items:start; } .kontaktdreier > *{min-width:0} .tafel{ padding:clamp(24px,2.8vw,34px); border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-3); } /* Die mittlere Tafel trägt das Formular und ist die Hauptsache — sie bekommt als einzige eine leuchtende Kante. */ .tafel--wichtig{ border-color:rgba(47,212,232,.34); box-shadow:0 0 0 1px rgba(47,212,232,.10),0 24px 60px rgba(0,0,0,.5); } .tafel__titel{ font-family:var(--anzeige);font-weight:800; font-size:1.15rem;letter-spacing:-.02em;color:var(--licht); margin-bottom:22px; } .weg,.grund{display:grid;grid-template-columns:auto 1fr;gap:15px;margin-bottom:26px} .weg:last-child,.grund:last-child{margin-bottom:0} .weg__zeichen,.grund__zeichen{ width:40px;height:40px;display:grid;place-items:center; border-radius:50%; border:1px solid color-mix(in srgb,var(--ton,var(--akzent)) 46%,transparent); background:color-mix(in srgb,var(--ton,var(--akzent)) 12%,transparent); color:var(--ton,var(--akzent)); } .weg__zeichen svg,.grund__zeichen svg{width:18px;height:18px;stroke-width:1.7;fill:none;stroke:currentColor} .weg__titel,.grund__titel{ display:block; font-family:var(--anzeige);font-weight:800; font-size:.9375rem;color:var(--licht); } .weg__text,.grund__text{margin-top:6px;font-size:.875rem;line-height:1.55;color:var(--licht-2)} .weg__text a{color:var(--akzent)} /* ---- Formularfelder ---------------------------------------------------- */ .feld{margin-bottom:16px} .feld__label-weg{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap; } .feld input,.feld select,.feld textarea{ width:100%;padding:14px 16px; border-radius:var(--rundung); border:1px solid var(--kante); background:rgba(255,255,255,.03); color:var(--licht); font-size:.9375rem; transition:border-color var(--zeit),background var(--zeit),box-shadow var(--zeit); } .feld textarea{min-height:130px;resize:vertical} .feld input::placeholder,.feld textarea::placeholder{color:var(--licht-3)} .feld input:focus,.feld select:focus,.feld textarea:focus{ outline:none; border-color:var(--akzent); background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(47,212,232,.14); } /* Aufklappliste: die Einträge zeichnet das Betriebssystem, nicht die Seite. Ohne eigene Farbe stünde auf hellem Grund heller Text. */ .feld select{appearance:none;-webkit-appearance:none;cursor:pointer} .feld select option{background:var(--nacht-3);color:var(--licht)} .feld__meldung{ display:none;margin-top:7px; font-size:.8125rem;color:#FF7A93; } .feld.fehler input,.feld.fehler select,.feld.fehler textarea{border-color:#FF4E7E} .feld.fehler .feld__meldung{display:block} .einwilligung{ display:grid;grid-template-columns:auto 1fr;gap:12px; margin:20px 0 24px; font-size:.8125rem;line-height:1.55;color:var(--licht-2); cursor:pointer; } .einwilligung input{position:absolute;opacity:0;width:0;height:0} .einwilligung__kasten{ width:20px;height:20px;margin-top:2px; border-radius:6px;border:1px solid var(--kante-2); background:rgba(255,255,255,.03); display:grid;place-items:center; transition:background var(--zeit),border-color var(--zeit); } .einwilligung__kasten::after{ content:'';width:10px;height:6px; border-left:2px solid var(--nacht);border-bottom:2px solid var(--nacht); transform:rotate(-45deg) scale(0);transform-origin:center; transition:transform 180ms var(--weich); } .einwilligung input:checked + .einwilligung__kasten{background:var(--akzent);border-color:var(--akzent)} .einwilligung input:checked + .einwilligung__kasten::after{transform:rotate(-45deg) scale(1)} .einwilligung input:focus-visible + .einwilligung__kasten{outline:2px solid var(--akzent);outline-offset:3px} .einwilligung a{color:var(--akzent);border-bottom:1px solid rgba(47,212,232,.32)} .einwilligung.fehler .einwilligung__kasten{border-color:#FF4E7E} .formularmeldung{ display:none;margin-top:20px;padding:16px 18px; border-radius:var(--rundung); border-left:3px solid var(--gruen); background:rgba(138,226,75,.08); font-size:.875rem;color:var(--licht-2); } .formularmeldung.sichtbar{display:block} /* Verbindungsband am Seitenende */ .verbindung{ display:flex;flex-wrap:wrap;gap:28px; align-items:center;justify-content:space-between; padding:clamp(28px,3.4vw,44px); border-radius:var(--rundung-gross); border:1px solid var(--kante); background:var(--nacht-2); } .verbindung__titel{ font-family:var(--hand);font-size:clamp(1.4rem,3vw,2rem); color:var(--glanz);text-shadow:0 0 22px rgba(185,140,255,.5); } .verbindung__satz{margin-top:10px;max-width:44ch;font-size:.9375rem} /* ========================================================================== 29. FEHLERSEITE ========================================================================== */ .mitte{text-align:center;max-width:600px;margin-inline:auto} .fehlerzahl{ font-family:var(--anzeige);font-weight:900; font-size:clamp(6rem,22vw,15rem);line-height:.84;letter-spacing:-.06em; background:linear-gradient(150deg,var(--akzent),var(--glanz) 55%,var(--pink)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /* ========================================================================== 30. SCHMALE BILDSCHIRME ========================================================================== */ @media (max-width:1100px){ .fuss__raster{grid-template-columns:1fr 1fr} .rezepte,.rezepte--3{grid-template-columns:repeat(3,1fr)} .anlaesse{grid-template-columns:repeat(3,1fr)} .formel{grid-template-columns:repeat(2,1fr)} .karten{grid-template-columns:repeat(2,1fr)} .tagesrezept{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .tagesrezept .zubereitung{grid-column:1 / -1} } @media (max-width:900px){ .navi{display:none} .kopf__rechts .knopf{display:none} .burger{display:grid} /* Bühne: Bild über den Text, keine Überlappung mehr — bei dieser Breite würde die Riesenzeile sonst quer über dem Glas liegen. */ .buehne{min-height:auto;padding-bottom:clamp(40px,8vw,70px)} .buehne__innen{display:block;padding-top:clamp(20px,5vw,40px)} .buehne__bild{margin-bottom:-8%} .buehne__bild img{max-width:420px} .buehne__text{margin-top:0} .buehne__zeile--eingerueckt{margin-left:0} .szene{grid-template-columns:1fr;gap:34px} .szene__fest{position:static} .szene__schritte{gap:38px;padding-block:0} .zahlenband{grid-template-columns:1fr 1fr;gap:30px} .sorte__satz{display:none} .seitenkopf__raster{grid-template-columns:1fr;gap:30px} .seitenkopf__bild{order:-1} .seitenkopf__bild img{max-width:340px} /* Porträts: Bild über Text. Die Spiegelung entfällt — bei einer Spalte gibt es nichts zu spiegeln, und der order-Tausch würde bei jedem zweiten Block den Text vor das Bild schieben. */ .portraet, .portraet:nth-of-type(even){grid-template-columns:1fr;gap:24px} .portraet:nth-of-type(even) .portraet__bild{order:0} .portraet:nth-of-type(even) .portraet__text{order:0} .kontaktdreier{grid-template-columns:1fr} /* Das Formular ist der Grund, weshalb jemand hier ist — auf dem Handy rutscht es deshalb vor die beiden Beitafeln. */ .tafel--wichtig{order:-1} .machart{grid-template-columns:1fr;gap:32px} .rezeptkopf{grid-template-columns:1fr;gap:28px} .tagesrezept{grid-template-columns:1fr;gap:26px} .tagesrezept .zubereitung{grid-column:auto} .karten,.karten--3{grid-template-columns:1fr 1fr} } @media (max-width:700px){ .rezepte,.rezepte--3{grid-template-columns:repeat(2,1fr)} .zutatenpaar{grid-template-columns:1fr} .verbindung{flex-direction:column;align-items:flex-start;gap:22px} /* Anlasskarten werden zur Wischreihe — fünf Karten nebeneinander ergäben auf dem Handy 60 px pro Stück. */ .anlaesse{ display:flex;gap:12px;overflow-x:auto; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none; margin-inline:calc(var(--rand) * -1); padding-inline:var(--rand);padding-bottom:4px; } .anlaesse::-webkit-scrollbar{display:none} .anlass{flex:0 0 68%;scroll-snap-align:start} .anlass:hover{transform:none} } @media (max-width:560px){ :root{--grundgroesse:16px} .fuss__raster{grid-template-columns:1fr;gap:32px} .fuss__unten{flex-direction:column;gap:8px} .rezept{flex:0 0 78%} .rezepte,.rezepte--3{grid-template-columns:1fr} .rezepte .rezept{flex:initial} .formel{grid-template-columns:1fr} .karten,.karten--3{grid-template-columns:1fr} .siegel{width:82px;font-size:.5rem} .lesetext h2{margin-top:36px} } /* ========================================================================== 31. DRUCKEN Für eine Rezeptsammlung ist das kein Beiwerk. Wer nachmixt, steht in der Küche und hat den Zettel neben dem Brett liegen — nicht das Telefon mit nassen Fingern. Ungefiltert gedruckt wäre die Nachtfassung das denkbar schlechteste Ergebnis: die Flächenfarbe wird von den meisten Browsern gar nicht erst gedruckt, die helle Schrift aber schon. Weiss auf Weiss, eine leere Seite. Deshalb hier ein eigener, vollständig heller Satz. Grundsatz: gedruckt wird, was man zum Nachmixen braucht — Name, Menge, Zutaten, Reihenfolge, Tipp. Alles zum Weiterklicken fliegt raus, es funktioniert auf Papier ohnehin nicht. ========================================================================== */ @media print{ /* Farben zurück auf Papier. Die Tokens werden umdefiniert statt jede Regel einzeln überschrieben — dieselbe Stelle, an der die Nacht definiert ist, ergibt so den Tag. */ :root{ --nacht:#FFFFFF; --nacht-2:#FFFFFF; --nacht-3:#FFFFFF; --licht:#111111; --licht-2:#333333; --licht-3:#555555; --kante:#CCCCCC; --kante-2:#999999; --akzent:#0A6473; --glanz:#5B3E9E; --flor:transparent; } html,body{background:#FFFFFF !important;color:#222222} body{font-size:11pt;line-height:1.45} @page{margin:16mm 14mm} /* ┌────────────────────────────────────────────────────────────────────┐ │ 🔴 DER FEHLER, DER DEN GANZEN DRUCK WERTLOS MACHT │ │ │ │ [data-zeigen] startet auf opacity:0 und wird erst sichtbar, wenn │ │ der Abschnitt in den Bildschirm läuft. Gedruckt wird aber der │ │ Zustand von jetzt: wer eine Rezeptseite öffnet und sofort Strg+P │ │ drückt, bekommt die Zutaten und ein leeres Blatt daneben — die │ │ Zubereitung stand noch auf null. │ │ │ │ Beim ersten Testdruck war genau das zu sehen. Ohne die zwei │ │ Zeilen hier ist die ganze Druckfassung umsonst. │ └────────────────────────────────────────────────────────────────────┘ */ [data-zeigen]{opacity:1 !important;transform:none !important} .manifest .wort{opacity:1 !important;transform:none !important} /* Schrift mit Farbverlauf ist im Druck unsichtbar: sie besteht aus einer Fläche, die durch die Buchstaben scheint, und die Füllfarbe steht auf transparent. Beides zurücksetzen. */ .zahl b,.fehlerzahl,.abschluss .riesig{ background:none !important; -webkit-text-fill-color:#111111 !important; color:#111111 !important; } /* Umrisszahlen ebenso — ein Haarlinienumriss druckt sich nicht ab. */ .schritt__zahl,.formelteil__zahl{ color:#111111 !important; -webkit-text-stroke-color:transparent !important; } /* Das Neonleuchten der Handschrift ist auf Papier nur ein grauer Schleier. */ .hand,.tippkasten__titel,.verbindung__titel,.wortmarke__wort{text-shadow:none !important} /* Bildflächen mitsamt ihrem Kasten entfernen, nicht nur das Bild — sonst bleiben leere Rechtecke mit fester Höhe stehen. */ .rezeptkopf__bild,.portraet__bild,.tagesrezept__bild, .seitenkopf__bild,.buehne__bild,.rezept__bild{display:none !important} /* Alles, was auf Papier nichts verloren hat. */ .kopf,.klappmenue,.zumInhalt,.fuss,.fussmarke, .laufband,.scrollwink,.siegel,.sortenbild, .knopf,.knopfreihe,.pfeil,.krumen, .abschluss,.verbindung,.anlaesse,.sorten, .streckenbalken,.strecke,.entwurfsnotiz{display:none !important} /* Ganze Abschnitte weg, nicht nur ihr Inhalt — sonst bleibt die Überschrift allein auf dem Blatt stehen und fragt „Welches passt heute?", während darunter nichts mehr kommt. Betrifft: die Anlasskarten, die typografische Sortenliste und den Abschnitt „Das könnte auch passen" am Ende einer Rezeptseite. Alle drei sind Wege zum Weiterklicken, und Papier klickt nicht. */ section:has(> .bahn > .anlaesse), section:has(.anlaesse), section:has(.sorten), .abschnitt--abgesetzt:has(.rezepte){display:none !important} /* Nächte, Nebel und Sternenstaub gibt es auf Papier nicht. */ .nachthimmel::before,.nachthimmel::after, .buehne__bild::before,.seitenkopf__bild::before{display:none !important} main,section,.abschnitt,.abschnitt--knapp,.seitenkopf{ padding:0 !important;margin:0 !important;background:none !important; } .bahn,.bahn--eng{max-width:none;padding:0} /* Bilder weg. Ein dunkles Foto auf Papier ist ein grauer Klotz, der eine Patrone kostet und nichts erklärt. */ img{display:none !important} /* ---- Rezeptseite ---- */ .rezeptkopf{display:block} .rezeptkopf__bild{display:none} h1{font-size:22pt;margin-bottom:4mm;color:#111} .fuehrung{font-size:11pt;color:#333;max-width:none} .auge{font-size:8pt;letter-spacing:.12em;color:#666} .auge::before{display:none} .eckdaten{gap:4mm;margin-top:3mm} .eckdaten span{border:0;padding:0;background:none;font-size:9.5pt;color:#444} .eckdaten span::after{content:'·';margin-left:4mm;color:#999} .eckdaten span:last-child::after{content:''} .eckdaten svg{display:none} /* Zutaten und Zubereitung nebeneinander — auf A4 ist dafür Platz, und beim Mixen schaut man zwischen beiden hin und her. */ .machart{display:grid;grid-template-columns:38% 1fr;gap:8mm;margin-top:7mm} .machart h2{font-size:12pt;margin-bottom:3mm;color:#111} .zutatenliste li{padding:1.6mm 0;border-bottom:1px solid #DDD;font-size:10.5pt;color:#222} .zutatenliste li::before{background:#555;box-shadow:none;width:5px;height:5px} .zubereitung li{font-size:10.5pt;color:#222;margin-bottom:2mm} .zubereitung li::before{border-color:#888;color:#333} .tippkasten{ margin-top:6mm;padding:4mm; background:none;border:1px solid #BBB;border-radius:0; } .tippkasten__titel{color:#111;text-shadow:none;font-size:11pt} .tippkasten p{color:#333} /* Zusammenhängendes nicht über zwei Blätter reissen. */ .zutatenliste,.zubereitung,.tippkasten,.zutatenpaar, .portraet,.formelteil,.karte{break-inside:avoid;page-break-inside:avoid} h1,h2,h3{break-after:avoid;page-break-after:avoid} /* ---- Rechtsseiten ---- */ .lesetext a{color:#222;border:0;text-decoration:underline} .lesetext h2{font-size:12pt;margin:6mm 0 2mm} .luecke{background:none;border:1px solid #999;color:#000} /* Papier hat keinen Rückweg. Deshalb steht die Adresse mit drauf — sonst weiss in zwei Wochen niemand mehr, woher der Zettel kam. */ main::after{ content:'smoothievibes.de'; display:block;margin-top:8mm;padding-top:3mm; border-top:1px solid #DDD; font-size:8.5pt;letter-spacing:.08em;color:#777; } } /* ========================================================================== 32. SEITENÜBERGÄNGE Die Seite hat 24 Dokumente und man klickt viel: von der Karte aufs Rezept, vom Rezept zurück, von der Sorte zur Sammlung. Bisher war das jedes Mal ein hartes Umschalten mit kurzem Aufblitzen. Cross-Document View Transitions machen daraus eine Überblendung — und zwar ohne eine Zeile JavaScript und ohne Einzelseitenanwendung. Zwei Regeln genügen, der Browser macht den Rest. ┌────────────────────────────────────────────────────────────────────┐ │ DER EIGENTLICHE KNIFF IST DER BILDMORPH. │ │ │ │ Bekommt ein Element auf der alten und auf der neuen Seite │ │ denselben view-transition-name, blendet der Browser es nicht aus │ │ und wieder ein — er bewegt es von der einen Position zur anderen. │ │ Das Glas auf der Rezeptkarte wandert also an seinen Platz im │ │ Rezeptkopf und wächst dabei auf. │ │ │ │ Der Name muss je Seite eindeutig sein. Auf rezepte.html liegen │ │ aber sechzehn Karten. Deshalb vergibt js/nacht.js den Namen erst │ │ beim Klick und nur an die eine angeklickte Karte. │ └────────────────────────────────────────────────────────────────────┘ Browser ohne Unterstützung ignorieren die Regeln und navigieren wie bisher. Es gibt nichts zu prüfen und nichts zurückzubauen. ========================================================================== */ @media (prefers-reduced-motion: no-preference){ @view-transition{ navigation:auto } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:340ms; animation-timing-function:cubic-bezier(.2,.8,.2,1); } /* Das Bild im Rezeptkopf ist immer der Zielpunkt des Morphs. */ .rezeptkopf__bild img{ view-transition-name:rezeptbild } /* Den Weg selbst etwas ruhiger als die Grundüberblendung. */ ::view-transition-group(rezeptbild){ animation-duration:460ms; animation-timing-function:cubic-bezier(.2,.8,.2,1); } } /* ========================================================================== 33. AUFTRITT DER BÜHNE Bisher stand die Startseite beim Laden einfach da. Der gestaffelte Auftritt gibt der Riesenzeile den Moment, den sie verdient. Bewusst reines CSS mit `both` als Füllung — kein JavaScript, keine Klasse, die gesetzt werden muss. Bleibt das Skript aus, läuft die Animation trotzdem; wird Bewegung abgelehnt, setzt die Regel weiter unten die Dauer auf null und alles steht sofort am Zielpunkt. In keinem Fall bleibt etwas unsichtbar hängen — das ist der Unterschied zu einem Auftritt, der an einem Beobachter hängt. ========================================================================== */ @keyframes auftritt{ from{ opacity:0; transform:translateY(20px) } to { opacity:1; transform:none } } .buehne__text > *{ animation:auftritt 720ms var(--weich) both } .buehne__text > *:nth-child(1){ animation-delay: 40ms } .buehne__text > *:nth-child(2){ animation-delay:140ms } .buehne__text > *:nth-child(3){ animation-delay:240ms } .buehne__text > *:nth-child(4){ animation-delay:340ms } /* Das Bild kommt zuletzt und eine Spur langsamer — dadurch liest man erst die Zeile und sieht dann das Glas, statt beides gleichzeitig. */ .buehne__bild{ animation:auftritt 900ms var(--weich) both; animation-delay:220ms } /* Der Scrollhinweis ganz am Schluss, sonst fordert er zum Weiterscrollen auf, bevor überhaupt etwas zu sehen war. */ .scrollwink{ animation:auftritt 600ms var(--weich) both; animation-delay:900ms } /* ========================================================================== 34. LESEFORTSCHRITT Dünner Balken am oberen Rand. Auf einer Rezeptseite ist das kein Zierrat: wer beim Mixen nebenher liest, sieht auf einen Blick, wie viel noch kommt. Das Element steht in keiner HTML-Datei — js/nacht.js legt es an, und nur auf Seiten, die lang genug sind, dass ein Fortschritt überhaupt etwas aussagt. So muss nichts in 24 Dateien nachgetragen werden. ========================================================================== */ .lesebalken{ position:fixed;inset:0 auto auto 0;z-index:70; height:2px;width:100%; transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--akzent),var(--glanz)); pointer-events:none; } /* ========================================================================== 35. MITWANDERN — Parallaxe an den Kopfbildern Das Glas bewegt sich beim Scrollen langsamer als der Text daneben. Das ist der billigste Tiefeneindruck, den es gibt, und auf der Bühne verstärkt er die Überlappung von Zeile und Bild. ┌────────────────────────────────────────────────────────────────────┐ │ 🔴 AUFTRITT UND MITWANDERN AUF GETRENNTEN ELEMENTEN. │ │ │ │ Beide arbeiten mit transform, und ein Element hat davon nur eins. │ │ Läge beides auf .buehne__bild, würde das Mitwandern den Auftritt │ │ überschreiben, sobald der erste Scrollschritt kommt. │ │ │ │ Deshalb: der Auftritt sitzt auf .buehne__bild, das Mitwandern auf │ │ dem darin. Derselbe Fehler ist auf webdesign-pfisterer.de │ │ schon einmal passiert. │ └────────────────────────────────────────────────────────────────────┘ Umgesetzt als scroll-gebundene Animation: keine Scroll-Zuhörer, keine Rechenarbeit im Haupt-Thread, der Browser bindet den Ablauf direkt an die Scrollposition. Wo `animation-timeline` fehlt (derzeit Firefox), springt eine kleine Fassung in js/nacht.js ein. ========================================================================== */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: scroll()){ @keyframes mitwandern{ to{ transform:translateY(64px) } } @keyframes mitwandern-klein{ to{ transform:translateY(34px) } } /* Bühne: über die erste Bildschirmhöhe verteilt. */ .buehne__bild img{ animation:mitwandern linear both; animation-timeline:scroll(root block); animation-range:0 100vh; will-change:transform; } /* Seitenköpfe der Unterseiten sind flacher, also weniger Weg. */ .seitenkopf__bild img{ animation:mitwandern-klein linear both; animation-timeline:scroll(root block); animation-range:0 80vh; will-change:transform; } } }