/* ========================================================================= HOBBYVIKING ON TOUR — "NORDWINTER" Landingpage-Designsystem Alles ist unter .hvot gescoped, damit nichts mit dem Horizon-Theme kollidiert. ========================================================================= */ .hvot { /* --- Farben ---------------------------------------------------------- */ --natt: #070C10; /* Nacht — Seitengrund */ --djup: #0D171E; /* Tiefe — Karten, Flächen */ --stein: #16232B; /* Stein — Kanten, Linien */ --is: #9CC0D4; /* Eis — Atmosphäre, Links, Rahmen */ --sno: #EFF4F6; /* Schnee — Überschriften */ --dis: #7A8D98; /* Dis (Nebel) — Fließtext */ --brass: #C89A4E; /* Messing — der einzige warme Ton. Nur für Klickbares. */ --is-05: rgba(156, 192, 212, 0.05); --is-10: rgba(156, 192, 212, 0.10); --is-18: rgba(156, 192, 212, 0.18); --is-40: rgba(156, 192, 212, 0.40); /* --- Typografie ------------------------------------------------------ */ --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --fs-xl: clamp(2.6rem, 1.1rem + 5.4vw, 5.75rem); --fs-l: clamp(2.05rem, 1.1rem + 3.9vw, 4.15rem); --fs-m: clamp(1.55rem, 1.1rem + 1.9vw, 2.45rem); --fs-s: clamp(1.15rem, 0.95rem + 0.8vw, 1.5rem); --fs-body: 1.0625rem; --fs-small: 0.9rem; --fs-label: 0.6875rem; /* --- Raster ---------------------------------------------------------- */ --gutter: clamp(1.25rem, 4vw, 4.5rem); --maxw: 1360px; --sect-y: clamp(4.5rem, 9vw, 9.5rem); --radius: 3px; /* fast eckig — geschnitten, nicht geblasen */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Für die feinen Details: startet zügig, kommt sehr langsam zur Ruhe. Genau dieses Nachlaufen unterscheidet eine teure Bewegung von einer schnellen. Wird nur für Haarlinien und Textversätze benutzt. */ --ease-fine: cubic-bezier(0.16, 1, 0.3, 1); /* Durchsichtig, damit die Runen-Ebene dahinter durchscheint. Der Seitengrund wird stattdessen einmal ganz unten gemalt (siehe unten). Abschnitte mit eigener Fläche — Vertrauensleiste, Ticker, Fußzeile — malen ihre eigene und verdecken die Runen dort bewusst. */ background: transparent; position: relative; z-index: 1; color: var(--dis); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Jede Shopify-Sektion ist ein eigener Container, deshalb trägt jede die Tokens selbst. Der Seitengrund kommt zusätzlich auf , damit zwischen den Sektionen nichts vom Theme durchscheint. */ /* Der Seitengrund wird genau einmal gemalt, ganz unten. Drei voneinander unabhängige Wege, damit er niemals fehlt — die Abschnitte selbst sind ja durchsichtig, ohne Grund stünde helle Schrift auf hellem Theme-Grund: 1. :has() greift ohne JavaScript in allen aktuellen Browsern, 2. .hvot-body setzt das Script zusätzlich, 3. die Runen-Ebene bringt ihren eigenen Grund mit (siehe .hvot-ambient). */ html:has(.hvot), body:has(.hvot) { background: #070C10; } .hvot-body { background: #070C10; } /* Beschnitt liegt auf der Sektion, nicht auf .hvot — sonst würde der fest positionierte Kompass-Pfad mit abgeschnitten. */ .hvot-section, .hvot-trust, .hvot-footer { overflow-x: clip; } .hvot *, .hvot *::before, .hvot *::after { box-sizing: border-box; } .hvot img { max-width: 100%; height: auto; display: block; } /* Fraunces-Achsen: WONK an, SOFT aus -> wirkt geschnitzt statt gesetzt. */ .hvot h1, .hvot h2, .hvot h3, .hvot .u-display { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144; font-weight: 800; color: var(--sno); line-height: 0.98; letter-spacing: -0.028em; margin: 0; text-wrap: balance; } .hvot p { margin: 0 0 1.1em; } .hvot p:last-child { margin-bottom: 0; } .hvot a { color: var(--is); text-decoration: none; } .hvot a:hover { color: var(--sno); } .hvot :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; } /* ========================================================================= Bausteine ========================================================================= */ .hvot-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .hvot-section { padding-block: var(--sect-y); position: relative; } /* Der Etappen-Kopf: Koordinate + Ort. Kein 01/02/03 — die Reihenfolge dieser Seite IST eine Route, also trägt sie echte Wegmarken. */ .hvot-eyebrow { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.19em; text-transform: uppercase; color: var(--is); display: flex; align-items: center; gap: 0.85rem; margin: 0 0 1.6rem; } .hvot-eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--brass); flex: none; } .hvot-eyebrow span { color: var(--dis); } .hvot-lede { font-size: var(--fs-s); line-height: 1.55; color: var(--dis); max-width: 46ch; } /* --- Buttons ------------------------------------------------------------ */ .hvot-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 1.05rem 2rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); text-align: center; line-height: 1; } .hvot-btn--primary { background: var(--brass); color: var(--natt); font-weight: 700; /* Kein hover-transform hier: die Buttons bewegen sich per JS zum Cursor hin (Magnet-Effekt). Ein zweites, konkurrierendes CSS-transform würde das überschreiben statt sich damit zu addieren. */ } .hvot-btn--primary:hover { background: #DBAE60; color: var(--natt); filter: brightness(1.05); } /* Lichtstreif, der beim Hover über den Button läuft. */ .hvot-btn--primary { position: relative; overflow: hidden; } .hvot-btn--primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent); transform: skewX(-18deg); transition: left 0.65s var(--ease); pointer-events: none; } .hvot-btn--primary:hover::after { left: 130%; } /* Magnetischer Zug zur Maus. Ohne Maus (Touch) oder bei reduzierter Bewegung bleibt der Button komplett unbewegt — hier wird nichts erzwungen. */ @media (hover: hover) and (pointer: fine) { .hvot-btn { will-change: transform; } } .hvot-btn--ghost { background: transparent; color: var(--sno); border-color: var(--is-18); } .hvot-btn--ghost:hover { border-color: var(--is-40); color: var(--sno); background: var(--is-05); } .hvot-btn--block { width: 100%; } /* Textlink mit Pfeil */ .hvot-arrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); display: inline-flex; align-items: center; gap: 0.5rem; } .hvot-arrow svg { transition: transform 0.3s var(--ease); } .hvot-arrow:hover { color: var(--brass); } .hvot-arrow:hover svg { transform: translateX(4px); } /* ========================================================================= Ankündigungsleiste ========================================================================= */ .hvot-announce { background: var(--djup); border-bottom: 1px solid var(--stein); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--is); text-align: center; padding: 0.7rem var(--gutter); } .hvot-announce b { color: var(--brass); font-weight: 500; } /* ========================================================================= Kopfzeile ========================================================================= */ .hvot-header { position: sticky; top: 0; z-index: 60; background: rgba(7, 12, 16, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease); } .hvot-header.is-stuck { border-bottom-color: var(--stein); background: rgba(7, 12, 16, 0.94); } .hvot-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 68px; } .hvot-logo { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40; font-weight: 800; font-size: 1.02rem; letter-spacing: -0.01em; color: var(--sno); line-height: 1.1; display: flex; align-items: center; gap: 0.6rem; } .hvot-logo small { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--is); opacity: 0.6; display: block; font-weight: 500; } .hvot-nav { display: none; gap: 2rem; } .hvot-nav a { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--dis); padding-block: 0.4rem; position: relative; } .hvot-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .hvot-nav a:hover { color: var(--sno); } .hvot-nav a:hover::after { transform: scaleX(1); } .hvot-header__actions { display: flex; align-items: center; gap: 1rem; } .hvot-header .hvot-btn { padding: 0.75rem 1.35rem; } @media (min-width: 900px) { .hvot-nav { display: flex; } } /* ========================================================================= SIGNATUR: Der Kompass-Pfad Eine feste Leiste am linken Rand. Jede Etappe der Seite ist eine Wegmarke. ========================================================================= */ .hvot-rail { position: fixed; left: 1.6rem; top: 50%; transform: translateY(-50%); z-index: 50; display: none; pointer-events: none; } .hvot-rail__inner { position: relative; } /* Die Fahrtroute: eine Linie, die sich mit dem Fortschritt der Seite füllt. "on Tour" wird damit wörtlich sichtbar — man sieht seine eigene Position auf der Reise, nicht nur eine Liste von Abschnitten. */ .hvot-rail__spine { position: absolute; left: 6px; top: 15px; bottom: 15px; width: 1px; background: var(--is-18); } .hvot-rail__spine-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: var(--brass); box-shadow: 0 0 8px rgba(200, 154, 78, 0.55); } .hvot-rail__marker { position: absolute; left: 50%; top: 0%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px rgba(200, 154, 78, 0.18), 0 0 12px rgba(200, 154, 78, 0.65); } @media (prefers-reduced-motion: no-preference) { .hvot-rail__spine-fill, .hvot-rail__marker { transition: none; } .hvot-rail.is-animating .hvot-rail__spine-fill, .hvot-rail.is-animating .hvot-rail__marker { transition: none; } } .hvot-rail__legs { position: relative; display: flex; flex-direction: column; gap: 0; } .hvot-rail__leg { display: flex; align-items: center; gap: 0.75rem; height: 30px; pointer-events: auto; } .hvot-rail__tick { width: 14px; height: 1px; background: var(--is-18); flex: none; transition: width 0.4s var(--ease), background-color 0.4s var(--ease); } .hvot-rail__label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dis); white-space: nowrap; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } /* Der Ortsname erscheint nur beim Zeigen. Dauerhaft eingeblendet lief er in die Überschrift hinein — und die Koordinate steht ohnehin in jedem Abschnittskopf. Die aktive Etappe erkennt man am längeren Messingstrich. */ .hvot-rail__leg:hover .hvot-rail__label { opacity: 1; transform: none; color: var(--sno); } .hvot-rail__leg.is-active .hvot-rail__tick { width: 30px; background: var(--brass); } /* Damit der Name beim Zeigen auf jedem Hintergrund lesbar bleibt. */ .hvot-rail__label { background: rgba(7, 12, 16, 0.9); padding: 0.3rem 0.55rem; border-radius: 2px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } @media (min-width: 1280px) { .hvot-rail { display: flex; } } /* ========================================================================= Hero ========================================================================= */ .hvot-hero { position: relative; min-height: min(94svh, 940px); display: flex; /* Der Text sitzt in der oberen Hälfte, damit das untere Drittel dem Langschiff gehört. Unten ausgerichtet lag die Schrift genau darüber. */ align-items: center; overflow: hidden; isolation: isolate; } .hvot-hero__media { position: absolute; inset: 0; z-index: -2; } .hvot-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; /* Etwas größer als der Rahmen aufgezogen, damit beim Scrollen Spielraum für die Parallaxe besteht, ohne dass am Rand eine Lücke entsteht. Die eigentliche Bewegung setzt das Script als transform pro Frame. */ transform: scale(1.08); will-change: transform; } /* Weicher Lichtschein, der der Maus über dem Hero folgt — wie Nebel, der kurz auseinanderweicht. Rein dekorativ, blockiert keine Klicks. */ .hvot-hero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(360px circle at var(--gx, 65%) var(--gy, 45%), rgba(156, 192, 212, 0.16), transparent 68%); opacity: 0; transition: opacity 0.7s var(--ease); } .hvot-hero:hover .hvot-hero__glow { opacity: 1; } /* Der Fjord muss lesbar bleiben, nicht nur angedeutet. Deshalb wird die Abdunklung dort stark, wo Text steht (unten links), und läuft nach oben rechts fast auf null aus — dort liegen Langschiff und Bergkette. */ .hvot-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--natt) 0%, rgba(7,12,16,0.34) 16%, rgba(7,12,16,0.06) 42%, rgba(7,12,16,0) 70%), linear-gradient(100deg, rgba(7,12,16,0.74) 0%, rgba(7,12,16,0.38) 38%, rgba(7,12,16,0.04) 70%, rgba(7,12,16,0) 100%); } /* Eine Spur kühler und kontrastreicher, damit das Foto zur Palette passt. */ .hvot-hero__media img { filter: saturate(0.82) contrast(1.06); } .hvot-hero__inner { position: relative; width: 100%; padding-block: clamp(3.5rem, 9vw, 7rem); } .hvot-hero h1 { font-size: var(--fs-xl); max-width: 20ch; margin-bottom: 1.75rem; /* Sehr weicher Schatten — nicht als Effekt, sondern damit die Schrift auch über den hellen Nebelpartien des Fotos sicher lesbar bleibt. */ text-shadow: 0 2px 28px rgba(7, 12, 16, 0.55); } .hvot-hero h1 em { font-style: normal; color: var(--is); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144; } .hvot-hero__lede { max-width: 44ch; margin-bottom: 2.4rem; font-size: var(--fs-s); line-height: 1.55; } .hvot-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.6rem; } .hvot-hero__cta .hvot-btn { flex: 1 1 auto; min-width: 200px; } .hvot-hero__marks { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dis); } .hvot-hero__marks li { display: flex; align-items: center; gap: 0.5rem; list-style: none; } .hvot-hero__marks svg { color: var(--brass); flex: none; } /* Aufblende beim Laden — eine einzige inszenierte Sequenz, nicht viele Effekte. */ @media (prefers-reduced-motion: no-preference) { .hvot-hero .hvot-eyebrow, .hvot-hero__lede, .hvot-hero__cta, .hvot-hero__marks { animation: hvot-rise 1s var(--ease) both; } .hvot-hero__lede { animation-delay: 0.22s; } .hvot-hero__cta { animation-delay: 0.32s; } .hvot-hero__marks { animation-delay: 0.42s; } /* Die Überschrift hebt sich wie ein Vorhang, statt nur einzublenden — der einzige Moment der Seite, der sich das leistet. */ .hvot-hero h1 { animation: hvot-curtain 1.05s cubic-bezier(0.65, 0, 0.14, 1) both; animation-delay: 0.1s; } } @keyframes hvot-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes hvot-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } } /* ========================================================================= Vertrauensleiste ========================================================================= */ .hvot-trust { border-block: 1px solid var(--stein); background: var(--djup); } .hvot-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--stein); } .hvot-trust__item { background: var(--djup); padding: 1.9rem clamp(1rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.45rem; } .hvot-trust__item svg { color: var(--brass); margin-bottom: 0.45rem; } .hvot-trust__item strong { color: var(--sno); font-size: 0.95rem; font-weight: 700; line-height: 1.3; } .hvot-trust__item span { font-size: 0.83rem; line-height: 1.5; color: var(--dis); } @media (min-width: 860px) { .hvot-trust__grid { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================= Abschnittskopf ========================================================================= */ .hvot-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .hvot-head h2 { font-size: var(--fs-l); max-width: 18ch; } .hvot-head__aside { align-self: end; } @media (min-width: 960px) { .hvot-head { grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: end; } .hvot-head__aside { text-align: right; } .hvot-head__aside .hvot-lede { margin-left: auto; } } /* ========================================================================= Produktkarte — bewusst als Ausrüstungs-Etikett gestaltet ========================================================================= */ .hvot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); } .hvot-card { position: relative; display: flex; flex-direction: column; background: var(--djup); border: 1px solid var(--stein); border-radius: var(--radius); overflow: hidden; /* --tiltX/--tiltY werden per Maus gesetzt (nur Geräte mit echter Maus, siehe JS), --lift hebt die Karte beim Hover unabhängig davon an. Eine einzige transform-Eigenschaft, die beide Bewegungen zusammenführt — sonst würde die zweite die erste überschreiben statt sie zu ergänzen. */ --tiltX: 0deg; --tiltY: 0deg; --lift: 0px; --reveal-y: 0px; transform: translateY(calc(var(--lift) + var(--reveal-y))) perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition: border-color 0.4s var(--ease), transform 0.5s var(--ease); } .hvot-card:hover { border-color: var(--is-18); --lift: -3px; } /* Während des Neigens setzt das JS transition:none direkt inline (schlägt jede Klassen-Spezifität) — so bleibt die Karte beim Zeigen sofort reaktionsschnell, unabhängig davon, ob gerade auch die Scroll-Einblendung oder der Hover-Zustand aktiv ist. */ /* Sanftes Streiflicht, das der Maus über die Karte folgt. */ .hvot-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 40%), rgba(156, 192, 212, 0.16), transparent 62%); opacity: 0; transition: opacity 0.4s var(--ease); } .hvot-card:hover::after { opacity: 1; } .hvot-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0A1218; } .hvot-card__media img { width: 100%; height: 100%; object-fit: cover; /* Ruht leicht entsättigt, kommt beim Zeigen zur vollen Farbe — Ware wirkt dadurch beim Stöbern ruhiger, beim genauen Hinsehen lebendiger. */ filter: saturate(0.88) contrast(1.02); transition: transform 0.7s var(--ease), opacity 0.4s var(--ease), filter 0.5s var(--ease); } .hvot-card:hover .hvot-card__media img { transform: scale(1.045); filter: saturate(1.08) contrast(1.03); } /* Zweitbild beim Hover, falls vorhanden */ .hvot-card__media img + img { position: absolute; inset: 0; opacity: 0; } .hvot-card:hover .hvot-card__media img + img { opacity: 1; } .hvot-card__flag { position: absolute; top: 0.7rem; left: 0.7rem; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.35rem 0.6rem; border-radius: 2px; background: var(--brass); color: var(--natt); } .hvot-card__flag--out { background: var(--stein); color: var(--dis); } .hvot-card__body { padding: 1.1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .hvot-card__cat { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--is); opacity: 0.7; } .hvot-card__title { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--sno); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hvot-card__title a::after { content: ""; position: absolute; inset: 0; } /* Die Etikett-Zeile unten: Preis + Größen, wie auf einem Ausrüstungsanhänger */ .hvot-card__tag { margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--stein); display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; } .hvot-card__price { color: var(--brass); font-weight: 500; font-size: 0.85rem; } .hvot-card__price s { color: var(--dis); opacity: 0.6; margin-right: 0.4rem; font-size: 0.72rem; } .hvot-card__sizes { color: var(--dis); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem; } /* Waagerechte Schiene für Mobil / Bestseller */ .hvot-rail-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 78vw); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 0.5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--stein) transparent; } .hvot-rail-scroll > * { scroll-snap-align: start; } @media (min-width: 700px) { .hvot-rail-scroll { grid-auto-columns: minmax(250px, 1fr); grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } } /* ========================================================================= Kollektionskacheln ========================================================================= */ .hvot-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); } .hvot-tile { position: relative; display: flex; align-items: flex-end; min-height: 300px; padding: 1.5rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stein); isolation: isolate; background: var(--djup); --tiltX: 0deg; --tiltY: 0deg; --lift: 0px; --reveal-y: 0px; transform: translateY(calc(var(--lift) + var(--reveal-y))) perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition: transform 0.5s var(--ease); } .hvot-tile:hover { --lift: -3px; } .hvot-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 40%), rgba(200, 154, 78, 0.14), transparent 62%); opacity: 0; transition: opacity 0.4s var(--ease); } .hvot-tile:hover::after { opacity: 1; } .hvot-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.85) contrast(1.03); transition: transform 0.8s var(--ease), filter 0.5s var(--ease); } .hvot-tile:hover img { filter: saturate(1.1) contrast(1.04); } .hvot-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(7,12,16,0.95) 8%, rgba(7,12,16,0.35) 60%, rgba(7,12,16,0.15) 100%); transition: background 0.5s var(--ease); } .hvot-tile:hover img { transform: scale(1.05); } .hvot-tile:hover::before { background: linear-gradient(to top, rgba(7,12,16,0.97) 8%, rgba(7,12,16,0.5) 70%, rgba(7,12,16,0.25) 100%); } .hvot-tile__body { display: flex; flex-direction: column; gap: 0.4rem; } .hvot-tile h3 { font-size: 1.4rem; line-height: 1.1; } .hvot-tile__count { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--is); opacity: 0.75; } .hvot-tile a::after { content: ""; position: absolute; inset: 0; } .hvot-tile--wide { grid-column: span 1; } @media (min-width: 900px) { .hvot-tile--wide { grid-column: span 2; min-height: 340px; } } /* ========================================================================= Erzählabschnitte (Story / Handwerk) ========================================================================= */ .hvot-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (min-width: 960px) { .hvot-split { grid-template-columns: 1fr 1fr; } .hvot-split--reverse .hvot-split__media { order: 2; } } .hvot-split__media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stein); } .hvot-split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .hvot-split__media figcaption { position: absolute; left: 1rem; bottom: 1rem; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sno); background: rgba(7,12,16,0.72); backdrop-filter: blur(6px); padding: 0.4rem 0.65rem; border-radius: 2px; } .hvot-split h2 { font-size: var(--fs-l); margin-bottom: 1.5rem; } .hvot-split__text p { max-width: 52ch; } .hvot-split__text > .hvot-btn, .hvot-split__text > .hvot-arrow { margin-top: 1.75rem; } /* Kennzahlen-Reihe */ .hvot-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--stein); } .hvot-figures dt { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60; font-weight: 800; font-size: 2.1rem; color: var(--sno); line-height: 1; letter-spacing: -0.03em; } .hvot-figures dd { margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dis); line-height: 1.5; } /* Spezifikationsliste — Handwerk Beim Zeigen zieht eine Messing-Haarlinie über die untere Kante der Zeile, von links nach rechts. Die Zeile bekommt dadurch einen Anfang und ein Ende, statt nur die Farbe zu wechseln. */ .hvot-specs { list-style: none; margin: 0; padding: 0; } .hvot-specs li { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--stein); } .hvot-specs li:first-child { border-top: 1px solid var(--stein); } .hvot-specs li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.62s var(--ease-fine); } .hvot-specs li:hover::after { transform: scaleX(1); } .hvot-specs li strong, .hvot-specs li dt { transition: transform 0.62s var(--ease-fine), color 0.4s var(--ease); } .hvot-specs li:hover strong, .hvot-specs li:hover dt { transform: translateX(4px); color: var(--brass); } .hvot-specs dt, .hvot-specs strong { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--is); font-weight: 500; } .hvot-specs span { color: var(--dis); font-size: 0.95rem; line-height: 1.6; } @media (min-width: 620px) { .hvot-specs li { grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: baseline; } } /* ========================================================================= Kundenstimmen ========================================================================= */ .hvot-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--stein); border: 1px solid var(--stein); border-radius: var(--radius); overflow: hidden; } .hvot-quote { background: var(--djup); padding: clamp(1.6rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.1rem; } /* Die Sterne leuchten nacheinander auf, sobald die Karte ins Bild kommt — einer nach dem anderen, 80 ms versetzt. Alle gleichzeitig einzublenden wäre eine Zustandsänderung; nacheinander wird daraus eine Geste. */ .hvot-quote__stars { display: flex; gap: 3px; color: var(--brass); } .hvot-js .hvot-quote__stars svg { opacity: 0.14; transform: scale(0.86); transition: opacity 0.55s var(--ease-fine), transform 0.55s var(--ease-fine); } .hvot-js .hvot-quote.is-in .hvot-quote__stars svg { opacity: 1; transform: none; } .hvot-js .hvot-quote.is-in .hvot-quote__stars svg:nth-child(1) { transition-delay: 0.30s; } .hvot-js .hvot-quote.is-in .hvot-quote__stars svg:nth-child(2) { transition-delay: 0.38s; } .hvot-js .hvot-quote.is-in .hvot-quote__stars svg:nth-child(3) { transition-delay: 0.46s; } .hvot-js .hvot-quote.is-in .hvot-quote__stars svg:nth-child(4) { transition-delay: 0.54s; } .hvot-js .hvot-quote.is-in .hvot-quote__stars svg:nth-child(5) { transition-delay: 0.62s; } /* Nicht vergebene Sterne bleiben zurückgenommen. Bewusst über eine Klasse und nicht über einen Inline-Stil: Ein style-Attribut am Element schlägt jede Regel aus dem Stylesheet, die Reihenfolge oben käme dann nie an. */ .hvot-js .hvot-quote.is-in .hvot-quote__stars svg.is-dim { opacity: 0.22; } .hvot-quote blockquote { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40; font-weight: 500; font-size: 1.15rem; line-height: 1.45; color: var(--sno); letter-spacing: -0.01em; } .hvot-quote figcaption { margin-top: auto; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dis); } .hvot-quote figcaption b { color: var(--is); font-weight: 500; display: block; margin-bottom: 0.25rem; } /* ========================================================================= FAQ ========================================================================= */ .hvot-faq { max-width: 860px; } .hvot-faq details { border-bottom: 1px solid var(--stein); } .hvot-faq details:first-of-type { border-top: 1px solid var(--stein); } .hvot-faq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.4rem 0; font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; color: var(--sno); line-height: 1.45; transition: color 0.3s var(--ease); } .hvot-faq summary::-webkit-details-marker { display: none; } .hvot-faq summary:hover { color: var(--is); } /* Der Marker dreht sich nicht, er zieht sich zusammen: Der senkrechte Strich fährt auf null ein, der waagerechte bleibt stehen. Aus dem Plus wird ein Minus, ohne dass sich etwas dreht — ruhiger und präziser als eine Rotation, und es sagt genauer, was passiert. */ .hvot-faq summary::after { content: ""; flex: none; width: 13px; height: 13px; margin-top: 0.35rem; background: linear-gradient(var(--brass), var(--brass)) center/13px 1px no-repeat, linear-gradient(var(--brass), var(--brass)) center/1px 13px no-repeat; transition: background-size 0.5s var(--ease-fine); } .hvot-faq details[open] summary::after { background-size: 13px 1px, 1px 0px; } /* Haarlinie, die beim Zeigen unter der Frage aufzieht. */ .hvot-faq summary { position: relative; } .hvot-faq summary::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-fine); } .hvot-faq summary:hover::before, .hvot-faq details[open] summary::before { transform: scaleX(1); } .hvot-faq__answer { padding: 0 0 1.6rem; max-width: 62ch; } .hvot-faq__answer p { font-size: 0.98rem; } @media (prefers-reduced-motion: no-preference) { .hvot-faq details[open] .hvot-faq__answer { animation: hvot-open 0.4s var(--ease) both; } } @keyframes hvot-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ========================================================================= Newsletter ========================================================================= */ .hvot-news { position: relative; isolation: isolate; overflow: hidden; border-block: 1px solid var(--stein); } .hvot-news__media { position: absolute; inset: 0; z-index: -2; } .hvot-news__media img { width: 100%; height: 100%; object-fit: cover; } .hvot-news__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(7,12,16,0.96) 20%, rgba(7,12,16,0.72) 100%); } .hvot-news__inner { max-width: 560px; padding-block: var(--sect-y); } .hvot-news h2 { font-size: var(--fs-m); margin-bottom: 1.1rem; } .hvot-news p { font-size: 0.98rem; } .hvot-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; } .hvot-form input[type="email"] { flex: 1 1 240px; min-width: 0; background: rgba(7,12,16,0.7); border: 1px solid var(--is-18); border-radius: var(--radius); padding: 1.05rem 1.15rem; color: var(--sno); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.3s var(--ease); } .hvot-form input[type="email"]::placeholder { color: var(--dis); opacity: 0.75; } .hvot-form input[type="email"]:focus { border-color: var(--brass); outline: none; } /* Beim Hineinklicken wächst eine Messinglinie aus der Mitte des Feldes nach beiden Seiten. Umgesetzt als Hintergrundbild des Feldes selbst — Eingabefelder können keine Pseudo-Elemente tragen, und ein zusätzliches Element würde die Flex-Anordnung des Formulars stören. */ .hvot-form input[type="email"] { background-image: linear-gradient(var(--brass), var(--brass)); background-repeat: no-repeat; background-position: 50% calc(100% - 1px); background-size: 0% 1px; transition: border-color 0.3s var(--ease), background-size 0.7s var(--ease-fine); } .hvot-form input[type="email"]:focus { background-size: 88% 1px; } .hvot-form .hvot-btn { flex: 0 0 auto; } .hvot-form__note { flex: 1 0 100%; font-size: 0.76rem; line-height: 1.5; color: var(--dis); opacity: 0.85; margin: 0.35rem 0 0; } .hvot-form__ok, .hvot-form__err { flex: 1 0 100%; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0.5rem 0 0; } .hvot-form__ok { color: var(--brass); } .hvot-form__err { color: #E07A5F; } /* ========================================================================= Social ========================================================================= */ .hvot-social__row { display: grid; grid-auto-flow: column; grid-auto-columns: 46vw; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .hvot-social__row::-webkit-scrollbar { display: none; } .hvot-social__row > * { scroll-snap-align: start; } @media (min-width: 760px) { .hvot-social__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; } } .hvot-social__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--stein); background: var(--djup); } .hvot-social__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), opacity 0.4s var(--ease); } .hvot-social__item:hover img { transform: scale(1.06); opacity: 0.75; } /* ========================================================================= Fußzeile ========================================================================= */ .hvot-footer { border-top: 1px solid var(--stein); background: var(--djup); padding-block: clamp(3rem, 6vw, 5rem) 2rem; } .hvot-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .hvot-footer__brand { grid-column: 1 / -1; max-width: 34ch; } @media (min-width: 960px) { .hvot-footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } .hvot-footer__brand { grid-column: auto; } } .hvot-footer h3 { font-family: var(--font-mono); font-variation-settings: normal; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--is); margin-bottom: 1.1rem; letter-spacing: 0.17em; } /* Die Unterstreichung zieht beim Zeigen von links auf — und beim Verlassen nach rechts wieder ab, statt am selben Punkt zurückzulaufen. Die Bewegung behält so ihre Richtung bei; sie wirkt wie ein Strich, der durchgezogen wird, nicht wie ein Schalter. */ .hvot-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; } .hvot-footer ul a { position: relative; color: var(--dis); font-size: 0.9rem; display: inline-block; } .hvot-footer ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-fine); } .hvot-footer ul a:hover { color: var(--sno); } .hvot-footer ul a:hover::after { transform: scaleX(1); transform-origin: left; } .hvot-footer__bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--stein); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dis); } .hvot-footer__legalnote { flex: 1 0 100%; font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0; text-transform: none; line-height: 1.6; opacity: 0.8; margin: 0; } .hvot-footer__pay { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .hvot-footer__pay span { border: 1px solid var(--stein); border-radius: 2px; padding: 0.3rem 0.55rem; font-size: 0.55rem; letter-spacing: 0.1em; } .hvot-social-links { display: flex; gap: 0.75rem; } .hvot-social-links a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--stein); border-radius: var(--radius); color: var(--dis); transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .hvot-social-links a:hover { border-color: var(--brass); color: var(--brass); } /* ========================================================================= Runen — Ältere Futhark Sparsam eingesetzt: als Wegmarke pro Etappe und als Rahmenzeichen an Bildern. Eine Rune steht nie zur Zierde da, sondern trägt die Bedeutung des Abschnitts (Raidho = Reise, Kenaz = Feuer, Mannaz = Mensch …). Deshalb auch aria-hidden im Markup: Für Screenreader wäre es Rauschen, die Bedeutung steht ja als Text daneben. ========================================================================= */ .hvot-rune { flex: none; display: block; } .hvot-eyebrow .hvot-rune { color: var(--brass); } /* Runenrahmen: An den Ecken der Bilder sitzen kurze Winkel mit je einer Rune — wie eine Fassung, nicht wie ein Aufkleber. */ .hvot-frame { position: relative; } .hvot-frame::before, .hvot-frame::after { content: ""; position: absolute; width: 26px; height: 26px; border-color: var(--is-40); border-style: solid; pointer-events: none; z-index: 3; transition: border-color 0.5s var(--ease); } .hvot-frame::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; } .hvot-frame::after { right: 10px; bottom: 10px; border-width: 0 1px 1px 0; } .hvot-frame:hover::before, .hvot-frame:hover::after { border-color: var(--brass); } /* Die Rune in der Ecke des Rahmens */ .hvot-frame__rune { position: absolute; top: 14px; right: 14px; z-index: 3; color: var(--is); opacity: 0.55; pointer-events: none; transition: opacity 0.5s var(--ease), color 0.5s var(--ease); } .hvot-frame:hover .hvot-frame__rune { opacity: 1; color: var(--brass); } /* Runenband: dünne Trennlinie mit Runen darauf, zwischen Abschnitten. */ .hvot-runeband { display: flex; align-items: center; gap: 1.25rem; color: var(--is); opacity: 0.4; margin: 0; } .hvot-runeband::before, .hvot-runeband::after { content: ""; flex: 1; height: 1px; background: var(--stein); } /* ========================================================================= Ambiente-Runen — Zeichen, die über der ganzen Seite aufglimmen Liegt als feste Ebene über allem, nimmt aber keine Klicks entgegen. mix-blend-mode: screen sorgt dafür, dass die Runen nur auf den dunklen Flächen aufleuchten und über hellem Text praktisch verschwinden — sie stören also nie die Lesbarkeit. Sehr niedrige Deckkraft und lange Laufzeiten: Es soll wie Glut im Nachthimmel wirken, nicht wie ein Bildschirmschoner. ========================================================================= */ .hvot-ambient { position: fixed; inset: 0; /* Hinter dem Inhalt, nicht darüber: Die Abschnitte liegen auf Ebene 1 und sind durchsichtig, die Runen glimmen also hinter Text und Bildern durch — statt vor ihnen zu schweben. */ z-index: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; /* Dritte Absicherung des Seitengrunds: Diese Ebene liegt unter allen Abschnitten und bringt die Fläche selbst mit. */ background: #070C10; /* Diese Ebene hängt direkt am und damit AUSSERHALB der .hvot-Container, in denen die Farbtokens definiert sind. Ohne diese Wiederholung liefe var(--is) ins Leere und die Runen würden schwarz auf schwarzem Grund gezeichnet — unsichtbar. */ --is: #9CC0D4; --brass: #C89A4E; } .hvot-ambient__rune { position: absolute; color: var(--is); opacity: 0; will-change: opacity, transform; } .hvot-ambient__rune--warm { color: var(--brass); } @media (prefers-reduced-motion: no-preference) { .hvot-ambient__rune { animation: hvot-rune-glimmer var(--dur, 8s) ease-in-out forwards; } } @keyframes hvot-rune-glimmer { 0% { opacity: 0; transform: translateY(10px) scale(0.82) rotate(var(--rot, 0deg)); } 22% { opacity: var(--peak, 0.2); } 62% { opacity: var(--peak, 0.2); } 100% { opacity: 0; transform: translateY(-18px) scale(1.08) rotate(var(--rot, 0deg)); } } /* Ohne Bewegungswunsch bleibt die Ebene leer — das Script legt dann gar keine Runen an (siehe hvot-nordwinter.js). */ @media (prefers-reduced-motion: reduce) { .hvot-ambient { display: none; } } /* ========================================================================= Glut — für das Schmiedebild Ein Foto kann nicht wirklich brennen. Was hier pulsiert, ist ein Lichtschein DARÜBER: zwei warme Kreise, die langsam heller und dunkler werden und dabei leicht wandern. Bewusst langsam (7 s und 11 s Zyklus, gegenläufig): Schnelles Flackern unter etwa 3 Hz gilt als Auslöser für fotosensitive Anfälle (WCAG 2.3.1). Diese Bewegung liegt weit darunter und bleibt ein Glimmen statt eines Blitzens. Bei „Bewegung reduzieren" ist sie ganz aus. ========================================================================= */ .hvot-ember { position: relative; isolation: isolate; } .hvot-ember__glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(38% 30% at 78% 62%, rgba(255, 170, 60, 0.34), transparent 70%), radial-gradient(28% 22% at 62% 78%, rgba(255, 110, 30, 0.26), transparent 72%); } @media (prefers-reduced-motion: no-preference) { .hvot-ember__glow { animation: hvot-ember-pulse 7s ease-in-out infinite; } .hvot-ember__glow::after { content: ""; position: absolute; inset: 0; background: radial-gradient(30% 26% at 84% 52%, rgba(255, 200, 90, 0.30), transparent 72%); animation: hvot-ember-drift 11s ease-in-out infinite alternate; } } @keyframes hvot-ember-pulse { 0%, 100% { opacity: 0.55; } 35% { opacity: 1; } 70% { opacity: 0.72; } } @keyframes hvot-ember-drift { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; } to { transform: translate3d(-3%, -2%, 0) scale(1.12); opacity: 0.95; } } /* ========================================================================= Geschichte — Erics eigene Fotos, als Reisealbum gesetzt Bewusst anders als der Rest: Statt strenger Raster liegen die Bilder leicht versetzt und unterschiedlich hoch nebeneinander, wie auf einem Tisch ausgebreitet. Beim Scrollen driften sie unterschiedlich schnell (--drift, per Script gesetzt) — das erzeugt Tiefe, ohne zu wackeln. ========================================================================= */ .hvot-album { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 62vw); gap: clamp(0.85rem, 1.8vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0.5rem var(--gutter) 1.5rem; scrollbar-width: thin; scrollbar-color: var(--stein) transparent; } .hvot-album > * { scroll-snap-align: center; } @media (min-width: 860px) { .hvot-album { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; align-items: start; } } .hvot-photo { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stein); background: var(--djup); --drift: 0px; transform: translate3d(0, var(--drift), 0); will-change: transform; } .hvot-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; filter: saturate(0.9) contrast(1.02); transition: transform 0.8s var(--ease), filter 0.5s var(--ease); } .hvot-photo:hover img { transform: scale(1.05); filter: saturate(1.1) contrast(1.03); } /* Bildunterschrift liegt auf dem Foto und kommt beim Zeigen hervor. */ .hvot-photo figcaption { position: absolute; inset: auto 0 0 0; padding: 2.5rem 1rem 1rem; font-size: 0.82rem; line-height: 1.45; color: var(--sno); background: linear-gradient(to top, rgba(7,12,16,0.94) 25%, rgba(7,12,16,0)); opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .hvot-photo:hover figcaption, .hvot-photo:focus-within figcaption { opacity: 1; transform: none; } /* Auf Touch-Geräten gibt es kein Zeigen — dort steht die Unterschrift fest. */ @media (hover: none), (pointer: coarse) { .hvot-photo figcaption { opacity: 1; transform: none; } } /* Unterschiedliche Höhen und Spannweiten: ein Album, kein Katalograster. */ @media (min-width: 860px) { .hvot-photo:nth-child(1) { grid-column: span 2; } .hvot-photo:nth-child(2) { grid-column: span 2; margin-top: 2.5rem; } .hvot-photo:nth-child(3) { grid-column: span 2; } .hvot-photo:nth-child(4) { grid-column: span 3; margin-top: 1rem; } .hvot-photo:nth-child(5) { grid-column: span 3; margin-top: 3.5rem; } .hvot-photo:nth-child(1) img { aspect-ratio: 3 / 4; } .hvot-photo:nth-child(2) img { aspect-ratio: 4 / 5; } .hvot-photo:nth-child(3) img { aspect-ratio: 3 / 4; } .hvot-photo:nth-child(4) img { aspect-ratio: 16 / 10; } .hvot-photo:nth-child(5) img { aspect-ratio: 16 / 10; } } /* Das große Zitat — Erics eigene Worte, als Aussage gesetzt. */ .hvot-quote-big { margin: clamp(3rem, 6vw, 5rem) 0 0; max-width: 20ch; font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144; font-weight: 700; font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--sno); } .hvot-quote-big cite { display: block; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.65rem; font-style: normal; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); } /* ========================================================================= Cursor-Etikett — folgt der Maus über anklickbaren Bildern und benennt, was der Klick tut ("Kollektion ansehen", "Zum Produkt"). Eine einzige, gemeinsam genutzte Blase statt vieler Tooltips pro Element. ========================================================================= */ .hvot-cursor-label { position: fixed; top: 0; left: 0; z-index: 200; transform: translate3d(-999px, -999px, 0); background: var(--brass); color: var(--natt); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 1rem; border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.25s var(--ease), transform 0.12s linear; will-change: transform; } .hvot-cursor-label.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) { .hvot-cursor-label { display: none; } } /* ========================================================================= Ticker — ein durchlaufendes Textband. Reine Atmosphäre, kein Inhalt, der nirgendwo sonst auch stünde (deshalb aria-hidden im Markup). ========================================================================= */ .hvot-ticker { border-block: 1px solid var(--stein); background: var(--djup); overflow: hidden; padding-block: 1.1rem; } .hvot-ticker__track { display: flex; width: max-content; gap: 0; } @media (prefers-reduced-motion: no-preference) { .hvot-ticker__track { animation: hvot-scroll-left 38s linear infinite; } .hvot-ticker:hover .hvot-ticker__track { animation-play-state: paused; } } @keyframes hvot-scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hvot-ticker__item { display: flex; align-items: center; gap: 1.75rem; padding-inline: 1.75rem; font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60; font-weight: 700; font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); color: var(--sno); white-space: nowrap; flex: none; } .hvot-ticker__item span:last-child { color: var(--brass); } .hvot-ticker__item svg { color: var(--is); opacity: 0.6; flex: none; } /* ========================================================================= Foto-Kennzahlen — Zahlen bekommen einen Ort statt einer leeren Fläche. ========================================================================= */ .hvot-stat-tile { align-items: flex-start !important; } .hvot-stat-tile .hvot-tile__body { display: flex; flex-direction: column; gap: 0.35rem; } .hvot-stat-tile__value { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144; font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 0.95; color: var(--sno); letter-spacing: -0.02em; margin: 0; } .hvot-stat-tile__label { margin: 0; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--is); } /* ========================================================================= Einblenden beim Scrollen .hvot-card und .hvot-tile bekommen den Versatz NICHT über die direkte transform-Eigenschaft (das würde die eigene 3D-Neigung dieser Elemente überschreiben — beide konkurrierten sonst um dieselbe Eigenschaft, und die spätere Regel hätte stillschweigend gewonnen). Sie bekommen den Versatz stattdessen über --reveal-y, das ihre eigene transform-Formel ohnehin schon mitrechnet. ALLES HIER HÄNGT AN .hvot-js — einer Klasse, die das Script als Erstes auf setzt. Ohne dieses Vorzeichen bliebe die gesamte Seite auf opacity:0 stehen, sobald das Script einmal nicht lädt (Blocker, Netzfehler, Script-Fehler). Für einen Verkaufsshop hieße das: leere Seite, keine Bestellung. So ist der Grundzustand immer sichtbar und die Einblendung nur eine Zugabe. ========================================================================= */ @media (prefers-reduced-motion: no-preference) { .hvot-js .hvot-reveal:not(.hvot-card):not(.hvot-tile):not(.hvot-reveal--img) { opacity: 0; transform: translateY(24px); } .hvot-js .hvot-reveal.is-in:not(.hvot-card):not(.hvot-tile):not(.hvot-reveal--img) { opacity: 1; transform: none; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); } .hvot-js .hvot-card.hvot-reveal, .hvot-js .hvot-tile.hvot-reveal { opacity: 0; --reveal-y: 24px; } .hvot-js .hvot-card.hvot-reveal.is-in, .hvot-js .hvot-tile.hvot-reveal.is-in { opacity: 1; --reveal-y: 0px; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease), border-color 0.4s var(--ease); } .hvot-reveal.is-in[data-delay="1"] { transition-delay: 0.09s; } .hvot-reveal.is-in[data-delay="2"] { transition-delay: 0.18s; } .hvot-reveal.is-in[data-delay="3"] { transition-delay: 0.27s; } /* Bildvorhang: für freistehende Fotos (Split-Sektionen, Banner) statt der üblichen Verschiebung — das Bild hebt sich wie ein Vorhang, dasselbe Motiv wie bei der Hero-Überschrift, hier auf Scroll bezogen. WICHTIG: Der clip-path liegt auf dem BILD, nicht auf dem

. Das

ist das Element, das der IntersectionObserver beobachtet — läge der Vorhang darauf, wäre es vollständig weggeclippt, der Observer meldete intersectionRatio 0, die Klasse .is-in käme nie an, und der Vorhang ginge nie auf. Ein Deadlock, der das Bild dauerhaft verbirgt. */ /* Der Rahmen schiebt sich seitlich ins Bild — aus der Richtung, in der er steht. Bei umgekehrter Anordnung kommt er entsprechend von rechts. */ .hvot-js .hvot-reveal--img { opacity: 0; transform: translateX(var(--fly-from, -34px)); } .hvot-split--reverse .hvot-reveal--img { --fly-from: 34px; } .hvot-js .hvot-reveal--img.is-in { opacity: 1; transform: translateX(0); transition: opacity 0.9s var(--ease), transform 1.15s cubic-bezier(0.22, 1, 0.36, 1); } .hvot-js .hvot-reveal--img > img { clip-path: inset(0 0 100% 0); --img-scale: 1.16; } .hvot-js .hvot-reveal--img > figcaption { opacity: 0; } .hvot-js .hvot-reveal--img.is-in > img { clip-path: inset(0 0 0% 0); --img-scale: 1.08; transition: clip-path 1.05s cubic-bezier(0.65, 0, 0.14, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); } .hvot-reveal--img.is-in > figcaption { opacity: 1; transition: opacity 0.5s var(--ease) 0.55s; } } /* Das Bild bleibt auch nach dem Erscheinen in Bewegung: --img-shift setzt das Script beim Scrollen, --img-scale kommt aus dem Reveal oben. Beide laufen in EINER transform-Eigenschaft zusammen — zwei getrennte Regeln würden einander überschreiben statt sich zu ergänzen. Der Endwert von --img-scale bleibt bewusst über 1: Nur so hat das Bild im Rahmen überhaupt Spielraum, sich zu verschieben, ohne eine Lücke am Rand freizugeben. */ .hvot-reveal--img > img { --img-shift: 0px; --img-scale: 1; transform: translate3d(0, var(--img-shift), 0) scale(var(--img-scale)); will-change: transform; } /* ========================================================================= Bewegung reduzieren — komplett ruhig stellen ========================================================================= */ @media (prefers-reduced-motion: reduce) { .hvot *, .hvot *::before, .hvot *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .hvot-reveal { opacity: 1; transform: none; } } /* Hilfsklassen */ .hvot-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hvot-skip { position: absolute; top: -100px; left: 1rem; z-index: 100; background: var(--brass); color: var(--natt); padding: 0.75rem 1.25rem; border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; transition: top 0.25s var(--ease); } .hvot-skip:focus { top: 1rem; color: var(--natt); }