/* ===== genesis-hero.css ===== */ /* ============================================================ HERO · GENESIS — mystische Scroll-Sequenz I Graft → II Haarlinie → III volles Haar → IV Patient ============================================================ */ .hero-scroller.genesis { height: 640vh; background: #070b0e; } .gx-pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: #070b0e url("/assets/genesis/poster-start.jpg") center / cover no-repeat; --gold: #E8C77A; --gold-soft: rgba(232,199,122,.55); } .gx-film, .gx-motes { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .gx-film { z-index: 0; } .gx-motes { z-index: 2; pointer-events: none; mix-blend-mode: screen; } /* Laterne: Maus bringt Licht in die Dunkelheit (nur Kapitel I–II) */ .gx-lantern { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--lantern, 0); background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(7,11,14,0) 0, rgba(7,11,14,0) 9vw, rgba(7,11,14,.62) 30vw, rgba(7,11,14,.86) 60vw); } .gx-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(9,15,19,calc(.88 * var(--shade, 0))) 0%, rgba(9,15,19,calc(.6 * var(--shade, 0))) 42%, rgba(9,15,19,0) 64%), radial-gradient(125% 95% at 50% 50%, rgba(0,0,0,0) 52%, rgba(5,8,10,.6) 100%); } .gx-grain { position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .1; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: gx-grain 1.1s steps(6) infinite; } @keyframes gx-grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } } .gx-bar { position: absolute; left: 0; right: 0; height: calc(var(--bar, 1) * 10vh); background: #05080a; z-index: 5; pointer-events: none; } .gx-bar.top { top: 0; } .gx-bar.bottom { bottom: 0; } /* ---- Haar-Fortschritt (ein Haar wächst mit dem Scroll) ---- */ .gx-root { position: absolute; z-index: 7; left: clamp(14px, 2.4vw, 40px); top: 50%; transform: translateY(-50%); height: min(52vh, 440px); width: 180px; pointer-events: auto; opacity: var(--rootvis, 1); transition: opacity .4s ease; } .gx-root svg { position: absolute; left: 0; top: 0; width: 60px; height: 100%; overflow: visible; } .gx-root path { fill: none; stroke-linecap: round; } .gx-root-bg { stroke: rgba(255,255,255,.12); stroke-width: 1; } .gx-root-line { stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--rp, 0)); filter: drop-shadow(0 0 6px var(--gold-soft)); } .gx-root ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .gx-root li { position: absolute; left: 0; } .gx-root li[data-ch="1"] { top: 0%; } .gx-root li[data-ch="2"] { top: 33%; } .gx-root li[data-ch="3"] { top: 65%; } .gx-root li[data-ch="4"] { top: 100%; } .gx-root button { display: flex; align-items: center; gap: 14px; transform: translate(18px, -50%); background: none; border: 0; padding: 4px 0; cursor: pointer; color: rgba(255,255,255,.38); font: inherit; transition: color .5s ease; } .gx-root button i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-family: "Instrument Serif", Georgia, serif; font-style: normal; font-size: 13px; background: #070b0e; border: 1px solid rgba(255,255,255,.18); transition: all .5s ease; } .gx-root button span { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; opacity: 0; transform: translateX(-6px); transition: all .5s ease; } .gx-root button:hover span, .gx-root li.is-on button span { opacity: 1; transform: none; } .gx-root li.is-past button { color: rgba(232,199,122,.7); } .gx-root li.is-past button i { border-color: rgba(232,199,122,.5); } .gx-root li.is-on button { color: #fff; } .gx-root li.is-on button i { border-color: var(--gold); color: #070b0e; background: var(--gold); box-shadow: 0 0 0 5px rgba(232,199,122,.14), 0 0 22px rgba(232,199,122,.55); } /* ---- Texte ---- */ .gx-copy { position: absolute; inset: 0; z-index: 6; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) 0 clamp(150px, 16vw, 230px); display: grid; align-items: center; color: #fff; pointer-events: none; } .gx-copy > * { grid-area: 1 / 1; } .gx-beat { visibility: hidden; } .gx-beat:not(.gx-final) { justify-self: start; text-align: left; max-width: min(36vw, 540px); } .gx-eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 14px rgba(0,0,0,.6); } .gx-line { margin-top: 22px; font-size: clamp(30px, 3.5vw, 56px); line-height: 1.06; font-weight: 400; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 44px rgba(0,0,0,.45); } .gx-line em, .gx-title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--gold); text-shadow: 0 0 34px rgba(232,199,122,.45); } .gx-beat[data-beat="2"] { justify-self: center; align-self: end; text-align: center; max-width: 760px; margin-bottom: calc(10vh + 5vh); } .gx-beat[data-beat="2"] .gx-line { font-size: clamp(28px, 3.3vw, 52px); margin-top: 14px; } .gx-beat[data-beat="2"] .gx-note { margin: 14px auto 0; max-width: 560px; } .gx-note { margin: 20px 0 0; max-width: 440px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(255,255,255,.72); text-shadow: 0 1px 18px rgba(0,0,0,.6); } /* Wort-für-Wort Enthüllung (Unschärfe → Schärfe) */ .gx-w { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(.18em); will-change: opacity, filter, transform; } .gx-final { justify-self: start; max-width: 600px; } .gx-final.is-live { pointer-events: auto; } .gx-title { margin: 18px 0 18px; font-size: clamp(34px, 4.1vw, 62px); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; text-wrap: balance; } .gx-title .thin { display: block; color: rgba(255,255,255,.7); font-size: .6em; font-weight: 400; letter-spacing: -.01em; margin-bottom: 8px; } .gx-sub { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: rgba(255,255,255,.82); max-width: 500px; } .gx-diffs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 30px; padding: 0; list-style: none; } .gx-diffs li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); } .gx-diffs li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); } .gx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; } .gx-rating { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.85); } .gx-rating .stars { color: var(--gold); letter-spacing: 2px; } .gx-rating strong { color: #fff; font-weight: 600; } .gx-final > * { opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1s ease; } .gx-final.is-live > * { opacity: 1; transform: none; filter: none; } .gx-final.is-live > :nth-child(2) { transition-delay: .12s; } .gx-final.is-live > :nth-child(3) { transition-delay: .26s; } .gx-final.is-live > :nth-child(4) { transition-delay: .38s; } .gx-final.is-live > :nth-child(5) { transition-delay: .5s; } /* Hinweis + Klang */ .gx-cue { position: absolute; left: 50%; bottom: calc(10vh + 22px); z-index: 7; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6); pointer-events: none; } .gx-cue span { width: 1px; height: 48px; background: linear-gradient(rgba(232,199,122,0), var(--gold)); animation: gx-cue 2.2s ease-in-out infinite; transform-origin: top; } @keyframes gx-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } .gx-sound { position: absolute; right: clamp(16px, 2.4vw, 40px); bottom: calc(10vh * var(--bar, 1) + 20px); z-index: 8; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 999px; background: rgba(7,11,14,.35); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.75); font: 500 11px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .3s, color .3s; } .gx-sound:hover, .gx-sound[aria-pressed="true"] { border-color: var(--gold-soft); color: #fff; } .gx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .gx-eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; } .gx-sound[aria-pressed="true"] .gx-eq i { background: var(--gold); animation: gx-eq 1.1s ease-in-out infinite; } .gx-sound[aria-pressed="true"] .gx-eq i:nth-child(2) { animation-delay: .2s; } .gx-sound[aria-pressed="true"] .gx-eq i:nth-child(3) { animation-delay: .45s; } .gx-sound[aria-pressed="true"] .gx-eq i:nth-child(4) { animation-delay: .1s; } @keyframes gx-eq { 0%,100% { height: 3px; } 50% { height: 12px; } } /* Vorhang */ .gx-veil { position: absolute; inset: 0; z-index: 20; background: #05080a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; transition: opacity 1.4s ease, visibility 1.4s; } .gx-veil.gone { opacity: 0; visibility: hidden; } /* Ohne JS-Abhängigkeit: Vorhang geht nach 1,2 s von selbst, erster Satz ist serverseitig sichtbar (schnelles LCP auf langsamen Geräten) */ .gx-veil { animation: gx-veil-off .8s ease 1.2s forwards; } @keyframes gx-veil-off { to { opacity: 0; visibility: hidden; } } .gx-beat[data-beat="1"] { visibility: visible; } @media (prefers-reduced-motion: reduce) { .gx-veil { animation-delay: 0s; animation-duration: .01s; } } .gx-seed { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px 4px rgba(232,199,122,.6), 0 0 60px 18px rgba(232,199,122,.18); animation: gx-pulse 2.4s ease-in-out infinite; } @keyframes gx-pulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.5); opacity: 1; } } .gx-veil-word { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 22px; letter-spacing: .08em; color: rgba(255,255,255,.8); } .gx-veil-count { font-size: 11px; letter-spacing: .3em; color: rgba(232,199,122,.7); font-variant-numeric: tabular-nums; } .cine-page .site-header:not(.scrolled) { background: transparent; } /* ---- Mobile ---- */ @media (max-width: 940px) { .hero-scroller.genesis { height: 520vh; } .gx-copy { padding: 0 20px calc(10vh * var(--bar, 1) + 30px); align-items: end; } .gx-beat:not(.gx-final) { align-self: end; max-width: none; } .gx-beat[data-beat="2"] { max-width: none; justify-self: start; text-align: left; margin-bottom: 0; } .gx-beat[data-beat="2"] .gx-note { margin: 14px 0 0; } .gx-beat[data-beat="2"] .gx-line { font-size: clamp(28px, 8vw, 40px); } .gx-line { font-size: clamp(28px, 8vw, 40px); } .gx-final { max-width: none; } .gx-root { left: auto; right: 12px; top: 50%; height: 40vh; width: 30px; } .gx-root button span { display: none; } .gx-root button { transform: translate(18px, -50%); } .gx-lantern { display: none; } .gx-shade { background: linear-gradient(0deg, rgba(9,15,19,calc(.94 * var(--shade, 0))) 0%, rgba(9,15,19,calc(.6 * var(--shade, 0))) 48%, rgba(9,15,19,0) 76%), radial-gradient(125% 95% at 50% 50%, rgba(0,0,0,0) 52%, rgba(5,8,10,.55) 100%); } .gx-eyebrow { font-size: 10px; letter-spacing: .24em; } .gx-diffs { margin: 16px 0 22px; gap: 8px 16px; } .gx-diffs li { font-size: 13px; } .gx-sound { bottom: auto; top: 96px; right: 14px; padding: 8px 10px; } .gx-cue { display: none; } .gx-sound-label { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-scroller.genesis { height: 100vh; } .gx-grain, .gx-cue span, .gx-seed { animation: none; } .gx-root, .gx-cue { display: none; } } /* ===== manufaktur.css ===== */ /* ============================================================ HAIR GENESIS · "Die Manufaktur des Haares" (Prototyp) Nacht-Petrol drench · Champagner als Licht · Pergament als Atem Display: Bodoni Moda · Text: Inter Tight ============================================================ */ :root { /* Hair-Genesis-Markenfarben (kein Gold) */ --night: #1D2C35; /* Petrol dunkel, Fläche */ --night-2: #223441; /* erhöhte Szenen */ --night-3: #2B4150; /* Formularfläche, Karten */ --petrol: #304A59; /* Marken-Petrol */ --accent: #A7CFB6; /* Salbei: Akzent auf Dunkel */ --accent-2: #DCFFE9; /* Mint: Lichtpunkte */ --cta: #EDDFC5; /* Creme: Primär-Button */ --accent-ink: #304A59; /* Akzent auf Papier */ --accent-ink-2: #3F6B57; /* Salbei dunkel, kleine Schrift auf Papier (AA) */ --cream: #EDDFC5; --paper: #F6F1E7; --paper-2: #EDE4D3; --text: #F1EEE7; --muted: #A9B8C0; --ink: #1D2C35; --ink-muted: #4C5E68; --line-dark: rgba(241, 238, 231, 0.13); --line-light: rgba(29, 44, 53, 0.14); --alert: #E58A6E; --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif; --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --maxw: 1240px; --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-base: 1.0625rem; --t-lg: 1.3125rem; --t-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); --t-2xl: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); --t-3xl: clamp(2.8rem, 1.6rem + 5vw, 6.4rem); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px; --scene: clamp(96px, 12vw, 176px); --gutter: clamp(16px, 4vw, 56px); --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-q: cubic-bezier(0.25, 1, 0.5, 1); --z-header: 50; --z-sticky: 60; --z-chat: 9998; --z-dialog: 9999; } body:where(:not(:has(.hg-tailwind-route))) *, body:where(:not(:has(.hg-tailwind-route))) *::before, body:where(:not(:has(.hg-tailwind-route))) *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } body:where(:not(:has(.hg-tailwind-route))) { background: var(--night); color: var(--text); font: 400 var(--t-base)/1.7 var(--font); letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; font-kerning: normal; } body:where(:not(:has(.hg-tailwind-route))) img, body:where(:not(:has(.hg-tailwind-route))) svg, body:where(:not(:has(.hg-tailwind-route))) video { display: block; max-width: 100%; } body:where(:not(:has(.hg-tailwind-route))) a { color: inherit; } body:where(:not(:has(.hg-tailwind-route))) button, body:where(:not(:has(.hg-tailwind-route))) input, body:where(:not(:has(.hg-tailwind-route))) select, body:where(:not(:has(.hg-tailwind-route))) textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; } /* ---------- Typo-Bausteine ---------- */ .d { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.04; } .d em { font-style: italic; color: var(--accent); } .on-paper .d em { color: var(--accent-ink); } .chap { display: inline-flex; align-items: center; gap: var(--s-3); font: 500 var(--t-sm)/1.2 var(--font); letter-spacing: 0.02em; color: var(--accent); } .chap::before { content: ""; width: 28px; height: 1px; background: currentColor; } .on-paper .chap { color: var(--accent-ink-2); } .lead { font-size: var(--t-lg); line-height: 1.6; max-width: 58ch; } .muted { color: var(--muted); } .on-paper { background: var(--paper); color: var(--ink); } .on-paper .muted { color: var(--ink-muted); } /* Reveal (IntersectionObserver setzt .in) */ .rv { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .rv.in { opacity: 1; transform: none; filter: none; } .no-js .rv { opacity: 1; transform: none; filter: none; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-6); border-radius: 999px; border: 0; cursor: pointer; font: 600 var(--t-sm)/1 var(--font); letter-spacing: 0.01em; text-decoration: none; transition: transform .2s var(--ease-q), background-color .2s, color .2s, box-shadow .3s; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-gold { background: var(--cta); color: var(--ink); } .btn-gold:hover { transform: translateY(-2px); background: #F5E9CE; } .btn-line { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgba(241, 238, 231, 0.32); } .btn-line:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); } .on-paper .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-light); } .btn-ink { background: var(--ink); color: var(--paper); } .btn-ink:hover { transform: translateY(-2px); background: var(--night-3); } .btn:active { transform: translateY(0) scale(.98); } .link { color: var(--accent); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease); padding-bottom: 2px; } .link:hover { background-size: 100% 1px; } .on-paper .link { color: var(--accent-ink); } /* ============================================================ HEADER ============================================================ */ .mh { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: 84px; display: flex; align-items: center; transition: background-color .4s, backdrop-filter .4s, border-color .4s; border-bottom: 1px solid transparent; } .mh::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(23, 36, 44, 0.6), rgba(23, 36, 44, 0)); transition: opacity .4s; } .mh.solid::before { opacity: 0; } .mh.solid { background: rgba(23, 36, 44, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--line-dark); } .mh-in { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; align-items: center; gap: var(--s-6); } .mh-logo { margin-right: auto; display: block; line-height: 0; } .mh-logo img { height: 64px; width: auto; } .mh-brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; margin-right: auto; } .mh-brand span:first-child { font-family: var(--display); font-size: 1.45rem; letter-spacing: 0.01em; } .mh-brand span:first-child i { color: var(--accent); } .mh-brand span:last-child { margin-top: 5px; font-size: 0.6875rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); } .mh nav ul { display: flex; gap: var(--s-6); list-style: none; } .mh nav a { font-size: var(--t-sm); text-decoration: none; color: var(--text); opacity: .86; transition: opacity .2s, color .2s; } .mh nav a:hover { opacity: 1; color: var(--accent); } .mh-cta { display: flex; align-items: center; gap: var(--s-4); } .mh-tel { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); text-decoration: none; opacity: .9; } .mh-tel svg { width: 16px; height: 16px; } .mh .btn { min-height: 42px; padding: 0 var(--s-5); } .mh-burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; } .mh-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease), opacity .2s; } .mh-burger span:nth-child(1) { top: 16px; } .mh-burger span:nth-child(2) { top: 22px; } .mh-burger span:nth-child(3) { top: 28px; } .mh.open .mh-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mh.open .mh-burger span:nth-child(2) { opacity: 0; } .mh.open .mh-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1080px) { .mh nav, .mh-tel span { display: none; } .mh-burger { display: block; } .mh.open { background: var(--night); } .mh.open nav { display: block; position: fixed; inset: 84px 0 0 0; background: var(--night); padding: var(--s-7) var(--gutter); } .mh.open nav ul { flex-direction: column; gap: var(--s-5); } .mh.open nav a { font-family: var(--display); font-size: var(--t-2xl); opacity: 1; } } @media (max-width: 560px) { .mh .btn-gold { display: none; } .mh-cta { gap: var(--s-2); } } /* ============================================================ HERO-Anpassungen (Genesis-Hero im Manufaktur-Stil) ============================================================ */ .gx-line, .gx-title { font-family: var(--display); font-weight: 400; } .gx-line em, .gx-title em, .gx-veil-word { font-family: var(--display); } .gx-title { font-size: clamp(38px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -0.015em; } .gx-subtitle { font-family: var(--font); font-size: .34em; letter-spacing: 0; } .gx-root button i { font-family: var(--display); } .gx-eyebrow { letter-spacing: .3em; } /* Hero in Markenfarben (Salbei/Mint statt Gold) */ .gx-pin { --gold: #A7CFB6; --gold-soft: rgba(167, 207, 182, .5); } .gx-root li.is-past button { color: rgba(167, 207, 182, .75); } .gx-root li.is-past button i { border-color: rgba(167, 207, 182, .5); } .gx-root li.is-on button i { background: var(--accent); border-color: var(--accent); color: var(--night); } .gx-voice { border-color: rgba(167, 207, 182, .35); } .gx-voice:hover { border-color: rgba(167, 207, 182, .7); } .gx-voice__orb { background: radial-gradient(circle at 35% 30%, rgba(167, 207, 182, .28), rgba(29, 44, 53, .9) 70%); } .gx-voice__orb i { background: var(--accent); } .gx-voice__number { color: var(--accent-2); } .gx-seed { background: var(--accent-2); box-shadow: 0 0 0 6px rgba(220, 255, 233, .08); } .gx-veil-count { color: rgba(167, 207, 182, .85); } .gx-trust strong { color: var(--accent); } .gx-cue span { background: linear-gradient(rgba(167, 207, 182, 0), var(--accent)); } .gx-sound[aria-pressed="true"] .gx-eq i { background: var(--accent); } .gx-sound:hover, .gx-sound[aria-pressed="true"] { border-color: rgba(167, 207, 182, .6); } .hg-cta--247__badge { background: rgba(220, 255, 233, .1); color: var(--accent-2); } .hg-cta--247__badge::before { background: var(--accent-2); } /* Kein Glow */ .gx-line em, .gx-title em { text-shadow: none; } .gx-root-line { filter: none; } .gx-root li.is-on button i { box-shadow: none; } .gx-voice__orb { box-shadow: 0 0 0 1px rgba(167, 207, 182, .4); } .hg-cta--primary { animation: none; box-shadow: none; } .hg-cta--primary:hover { box-shadow: none; } /* ============================================================ SZENE 2 · DAS VERSPRECHEN ============================================================ */ .promise { padding-block: var(--scene); overflow: hidden; } .promise-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); align-items: end; } .promise h2 { font-size: clamp(3.2rem, 1.2rem + 8.5vw, 9.5rem); line-height: .94; letter-spacing: -0.03em; } .promise h2 span { display: block; } .seal { width: clamp(150px, 16vw, 210px); aspect-ratio: 1; position: relative; text-decoration: none; color: var(--ink); flex: none; margin-bottom: var(--s-4); } .seal svg { width: 100%; height: 100%; animation: seal-turn 40s linear infinite; } .seal text { font: 500 10.4px var(--font); letter-spacing: 0.34em; fill: var(--ink-muted); text-transform: uppercase; } .seal-core { position: absolute; inset: 22%; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-content: center; text-align: center; transition: transform .5s var(--ease); } .seal:hover .seal-core { transform: scale(1.05); } .seal-core strong { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; } .seal-core span { font-size: .72rem; color: var(--accent); letter-spacing: .2em; margin-top: 4px; } @keyframes seal-turn { to { transform: rotate(360deg); } } .promise-sub { margin-top: var(--s-8); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } .promise-sub .lead { color: var(--ink); } .diffs { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } .diffs li { padding-top: var(--s-4); border-top: 1px solid var(--ink); } .diffs h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); line-height: 1.1; margin-bottom: var(--s-3); } .diffs h3 em { color: var(--accent-ink); } .diffs p { color: var(--ink-muted); font-size: var(--t-sm); line-height: 1.65; } @media (max-width: 900px) { .promise-grid { grid-template-columns: 1fr; } .seal { order: -1; margin-bottom: var(--s-6); } .promise-sub { grid-template-columns: 1fr; gap: var(--s-7); } .diffs { grid-template-columns: 1fr; gap: var(--s-5); } } /* ============================================================ SZENE 3 · EIN TAG (Zifferblatt) ============================================================ */ .day { background: var(--night); } .day-scroller { height: 420vh; position: relative; } .day-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--s-8); width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; } .day-copy h2 { font-size: var(--t-2xl); margin: var(--s-4) 0 var(--s-6); } .day-ev { min-height: 12.5em; border-top: 1px solid var(--line-dark); padding-top: var(--s-5); } .day-ev time { display: block; font-family: var(--display); font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); line-height: 1; color: var(--accent); font-variant-numeric: lining-nums tabular-nums; } .day-ev h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); margin: var(--s-3) 0 var(--s-2); } .day-ev p { color: var(--muted); max-width: 40ch; } .day-ev > * { transition: opacity .35s var(--ease-q), transform .5s var(--ease); } .day-ev.swap > * { opacity: 0; transform: translateY(8px); } .day-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--muted); } .day-foot span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: var(--s-2); vertical-align: middle; } .dial { width: min(78vh, 100%); justify-self: center; } .dial .face { fill: #223441; } .dial .bezel { fill: none; stroke: rgba(167, 207, 182, 0.4); stroke-width: 1; } .dial .tick { stroke: rgba(241, 238, 231, 0.3); stroke-width: 1.2; } .dial .tick.h { stroke: var(--accent); stroke-width: 2.4; } .dial .num { font-family: var(--display); font-size: 21px; fill: var(--cream); text-anchor: middle; dominant-baseline: central; } .dial .arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; } .dial .evdot { fill: var(--night); stroke: var(--accent); stroke-width: 1.6; transition: fill .4s; } .dial .evdot.on { fill: var(--accent); } .dial .win-ring { fill: none; stroke: rgba(167, 207, 182, 0.55); stroke-width: 1.2; } .dial .shade { fill: url(#dialShade); } .dial .hand-h { stroke: var(--cream); stroke-width: 5.5; stroke-linecap: round; filter: drop-shadow(0 2px 4px rgba(15, 24, 30, .6)); } .dial .hand-m { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(15, 24, 30, .6)); } .dial .brand { font-family: var(--display); font-style: italic; font-size: 14px; fill: var(--accent); text-anchor: middle; } .dial .sub { font: 500 7.5px var(--font); letter-spacing: .32em; fill: var(--cream); text-anchor: middle; } .dial image { transition: opacity .6s var(--ease-q); } @media (max-width: 900px) { .day-scroller { height: 380vh; } .day-pin { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: var(--s-4); } .dial { width: min(80vw, 44svh); order: -1; } .day-copy h2 { font-size: var(--t-xl); margin: var(--s-2) 0 var(--s-3); } .day-ev { min-height: 10.5em; padding-top: var(--s-3); } .day-foot { display: none; } } /* ============================================================ SZENE 4 · DAS KALIBER (Methode + Behandlungen) ============================================================ */ .caliber { padding-block: var(--scene); background: radial-gradient(90% 70% at 20% 30%, var(--night-3), var(--night) 65%); } .cal-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; } .cal-fig { position: relative; aspect-ratio: 16 / 11; } .cal-fig img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 55%; border-radius: 2px; } .cal-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .cal-fig .lead-line { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease); } .cal-fig .pin { fill: var(--accent); opacity: 0; transition: opacity .5s var(--ease) .9s; } .cal-fig.in .lead-line { stroke-dashoffset: 0; } .cal-fig.in .pin { opacity: 1; } .cal-note { position: absolute; max-width: 16em; font-size: var(--t-xs); line-height: 1.5; color: var(--cream); opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease) 1.1s, transform .9s var(--ease) 1.1s; } .cal-note b { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--t-base); color: var(--accent); } .cal-fig.in .cal-note { opacity: 1; transform: none; } .cal-copy h2 { font-size: var(--t-2xl); margin: var(--s-4) 0 var(--s-5); } .methods { margin-top: var(--s-6); } .methods [role="tablist"] { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-dark); } .methods [role="tab"] { min-height: 40px; padding: 0 var(--s-5); border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: var(--t-sm); color: var(--muted); transition: background-color .25s, color .25s; } .methods [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--ink); } .methods [role="tabpanel"] { padding-top: var(--s-5); min-height: 11em; } .methods [role="tabpanel"] h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); margin-bottom: var(--s-2); } .methods [role="tabpanel"] p { color: var(--muted); } .methods [role="tabpanel"][hidden] { display: none; } @media (max-width: 900px) { .cal-grid { grid-template-columns: 1fr; } .cal-fig { aspect-ratio: 4 / 3; } .cal-note { font-size: .72rem; max-width: 12em; } } .index { margin-top: var(--s-10); } .index h3.d { font-size: var(--t-xl); margin-bottom: var(--s-5); } .index ol { list-style: none; border-top: 1px solid var(--line-dark); } .index li a { display: grid; grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr) auto; gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; transition: color .3s, padding .5s var(--ease); } .index li a:hover { color: var(--accent); padding-left: var(--s-3); } .index .n { font-family: var(--display); font-style: italic; color: var(--accent); } .index .t { font-family: var(--display); font-size: var(--t-xl); line-height: 1.15; } .index .x { color: var(--muted); font-size: var(--t-sm); } .index .arr { width: 20px; height: 20px; transition: transform .4s var(--ease); } .index li a:hover .arr { transform: translateX(6px); } @media (max-width: 760px) { .index li a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; } .index .x { grid-column: 2 / 3; } .index .arr { grid-row: 1; grid-column: 3; align-self: center; } .index li a { row-gap: var(--s-2); } } /* ============================================================ SZENE 5 · GANGRESERVE + FESTPREIS ============================================================ */ .reserve { background: var(--paper); color: var(--ink); } .res-scroller { height: 300vh; position: relative; } .res-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; } .res-head h2 { font-size: var(--t-2xl); margin: var(--s-4) 0 var(--s-4); } .gauge { width: 100%; max-width: 620px; } .gauge .track { fill: none; stroke: rgba(29, 44, 53, 0.1); stroke-width: 16; stroke-linecap: round; } .gauge .fill { fill: none; stroke: var(--accent-ink); stroke-width: 16; stroke-linecap: round; } .gauge .cp { fill: var(--paper); stroke: rgba(29, 44, 53, 0.35); stroke-width: 2; transition: fill .4s, stroke .4s; } .gauge .cp.on { fill: var(--accent-ink); stroke: var(--accent-ink); } .gauge .lbl { font: 400 13px var(--font); fill: var(--ink-muted); text-anchor: middle; } .gauge .mo { font-family: var(--display); font-size: 84px; fill: var(--ink); text-anchor: middle; font-variant-numeric: lining-nums; } .gauge .mo-s { font: 500 11px var(--font); letter-spacing: .26em; fill: var(--ink-muted); text-anchor: middle; } .steps { list-style: none; } .steps li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line-light); opacity: .32; transition: opacity .5s var(--ease-q); } .steps li.on { opacity: 1; } .steps time { font-family: var(--display); font-style: italic; color: var(--accent-ink); font-size: var(--t-lg); line-height: 1.3; } .steps b { display: block; font-weight: 600; } .steps span { color: var(--ink-muted); font-size: var(--t-sm); } @media (max-width: 900px) { .res-scroller { height: auto; } .res-pin { position: relative; height: auto; grid-template-columns: 1fr; gap: var(--s-6); padding-block: var(--scene); } .steps li { opacity: 1; grid-template-columns: 6.6rem minmax(0, 1fr); } .steps time { white-space: nowrap; font-size: var(--t-base); } } .price { padding-block: 0 var(--scene); background: var(--paper); color: var(--ink); } .price-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); padding: var(--s-8) 0 0; border-top: 1px solid var(--ink); } .price-card h2 { font-size: var(--t-2xl); } .price-rows { display: grid; gap: 0; } .price-row { display: flex; align-items: baseline; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--line-light); } .price-row .m { font-family: var(--display); font-size: var(--t-xl); } .price-row .m small { font-family: var(--font); font-size: var(--t-xs); color: var(--ink-muted); letter-spacing: .04em; margin-left: .4em; } .price-row .dots { flex: 1; border-bottom: 1px dotted rgba(29, 44, 53, 0.35); transform: translateY(-6px); } .price-row .p { font-family: var(--display); font-size: var(--t-xl); font-variant-numeric: lining-nums tabular-nums; } .price-incl { margin-top: var(--s-5); color: var(--ink-muted); } .price-incl b { color: var(--ink); font-weight: 600; } @media (max-width: 900px) { .price-card { grid-template-columns: 1fr; gap: var(--s-6); } } /* ============================================================ SZENE 6 · DIE HÄNDE (Arzt, Team, Stimmen) ============================================================ */ .hands { padding-block: var(--scene); background: var(--night-2); } .doc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; } .graded { position: relative; overflow: hidden; background: var(--night); } .graded img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08) brightness(.86) sepia(.14); } .graded::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 36, 44, 0) 45%, rgba(23, 36, 44, .55)), rgba(48, 74, 89, .18); mix-blend-mode: multiply; pointer-events: none; } .doc .graded { aspect-ratio: 4 / 5; } .doc .graded img { object-position: 52% 30%; } .doc-copy h2 { font-size: var(--t-3xl); line-height: .98; margin: var(--s-4) 0 var(--s-2); } .doc-role { font-family: var(--display); font-style: italic; font-size: var(--t-lg); color: var(--accent); } .doc-copy p { margin-top: var(--s-5); max-width: 44ch; } .doc-facts { list-style: none; margin-top: var(--s-6); display: grid; gap: 0; } .doc-facts li { padding: var(--s-3) 0; border-top: 1px solid var(--line-dark); color: var(--muted); font-size: var(--t-sm); } .doc-facts li b { color: var(--text); font-weight: 500; } @media (max-width: 900px) { .doc { grid-template-columns: 1fr; } .doc .graded { aspect-ratio: 4 / 4.4; } } .atelier { margin-top: var(--s-10); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; } .atelier .graded.wide { aspect-ratio: 16 / 10; } .atelier .graded.tall { aspect-ratio: 4 / 5; margin-top: var(--s-9); } .atelier figcaption { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); } .story { margin-top: var(--s-9); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; } .story h3 { font-size: var(--t-2xl); margin-top: var(--s-4); } .story-copy p { color: var(--muted); max-width: 62ch; } .story-copy p + p { margin-top: var(--s-4); } @media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: var(--s-5); } } .team-names { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); list-style: none; } .team-names li { border-top: 1px solid var(--line-dark); padding-top: var(--s-3); } .team-names b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-lg); } .team-names span { font-size: var(--t-xs); color: var(--muted); } @media (max-width: 900px) { .atelier { grid-template-columns: 1fr; margin-top: var(--s-9); } .atelier .graded.tall { margin-top: 0; aspect-ratio: 16 / 12; } .team-names { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .team-names { grid-template-columns: 1fr; gap: var(--s-3); } } .voices { margin-top: var(--s-10); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } .quote-stage { position: relative; min-height: 15em; } .quote { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); pointer-events: none; } .quote.on { opacity: 1; transform: none; filter: none; pointer-events: auto; position: relative; } .quote blockquote { font-family: var(--display); font-size: clamp(1.7rem, 1rem + 2.4vw, 3rem); line-height: 1.16; letter-spacing: -0.01em; } .quote blockquote::before { content: "„"; color: var(--accent); } .quote blockquote::after { content: "“"; color: var(--accent); } .quote figcaption { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--muted); } .quote figcaption b { color: var(--text); font-weight: 500; } .q-nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); } .q-nav button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; box-shadow: inset 0 0 0 1px rgba(241, 238, 231, 0.28); cursor: pointer; display: grid; place-items: center; transition: box-shadow .2s, color .2s; } .q-nav button:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); } .q-nav button svg { width: 18px; height: 18px; } .q-count { font-family: var(--display); font-style: italic; color: var(--muted); font-variant-numeric: tabular-nums; } .films { list-style: none; display: grid; gap: 0; } .films li { border-top: 1px solid var(--line-dark); } .films a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-4) 0; text-decoration: none; } .films .play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); transition: background-color .3s, color .3s; } .films a:hover .play { background: var(--accent); color: var(--ink); } .films .play svg { width: 14px; height: 14px; margin-left: 2px; } .films q { font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; quotes: "„" "“"; } .films .films-t { font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; } .films small { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--muted); } @media (max-width: 900px) { .voices { grid-template-columns: 1fr; } .quote-stage { min-height: 13em; } } /* ============================================================ SZENE 7 · DER ERSTE SCHRITT (Formular inline + Kontakt) ============================================================ */ .first { padding-block: var(--scene); background: var(--night); } .first-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; } .first h2 { font-size: var(--t-3xl); line-height: .98; margin: var(--s-4) 0 var(--s-5); } .path { list-style: none; margin-top: var(--s-7); counter-reset: p; } .path li { counter-increment: p; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line-dark); color: var(--muted); font-size: var(--t-sm); } .path li::before { content: counter(p, upper-roman) "."; font-family: var(--display); font-style: italic; color: var(--accent); font-size: var(--t-base); } .path li b { color: var(--text); font-weight: 500; } .form { background: var(--night-2); border-radius: 4px; padding: clamp(var(--s-5), 4vw, var(--s-8)); box-shadow: inset 0 0 0 1px var(--line-dark); } .f-progress { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); list-style: none; } .f-progress li { flex: 1; font-size: var(--t-xs); color: var(--muted); padding-top: var(--s-2); border-top: 2px solid var(--line-dark); transition: color .3s, border-color .3s; } .f-progress li.on { color: var(--text); border-color: var(--accent); } .f-progress li.done { border-color: var(--accent-ink); } .f-step[hidden] { display: none; } .f-step h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); margin-bottom: var(--s-5); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); border: 0; } .tiles legend { font-size: var(--t-sm); margin-bottom: var(--s-3); color: var(--muted); } .tile { position: relative; } .tile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .tile span { display: flex; align-items: center; min-height: 56px; padding: var(--s-3) var(--s-4); border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-dark); font-size: var(--t-sm); transition: box-shadow .2s, background-color .2s, color .2s; } .tile input:hover + span { box-shadow: inset 0 0 0 1px rgba(241, 238, 231, 0.35); } .tile input:checked + span { box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(167, 207, 182, 0.08); color: var(--accent); } .tile input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-5); } .field { display: grid; gap: var(--s-2); } .field label { font-size: var(--t-sm); color: var(--muted); } .field label i { font-style: normal; color: var(--muted); opacity: .7; } .field input, .field select, .field textarea { min-height: 52px; padding: 0 var(--s-4); border-radius: 3px; border: 0; background: var(--night); box-shadow: inset 0 0 0 1px var(--line-dark); transition: box-shadow .2s; width: 100%; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A7CFB6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; } .field input:focus, .field select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); } .field.err input, .field.err select, .tiles.err .tile span { box-shadow: inset 0 0 0 1.5px var(--alert); } .f-err { font-size: var(--t-xs); color: #E58A6E; min-height: 1.2em; } .drop { display: grid; place-items: center; gap: var(--s-2); min-height: 150px; border-radius: 3px; border: 1px dashed rgba(241, 238, 231, 0.28); text-align: center; padding: var(--s-5); cursor: pointer; transition: border-color .2s, background-color .2s; position: relative; } .drop:hover, .drop.over { border-color: var(--accent); background: rgba(167, 207, 182, 0.05); } .drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .drop b { font-weight: 500; } .drop small { color: var(--muted); font-size: var(--t-xs); } .thumbs { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; } .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; } .check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-5); font-size: var(--t-xs); color: var(--muted); line-height: 1.55; align-items: start; } .check input { width: 20px; height: 20px; accent-color: #A7CFB6; margin-top: 2px; } .check a { color: var(--text); } .f-nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); } .f-nav .back { background: none; border: 0; color: var(--muted); cursor: pointer; min-height: 44px; padding: 0 var(--s-2); } .f-nav .back:hover { color: var(--text); } .f-nav .hint { margin-left: auto; font-size: var(--t-xs); color: var(--muted); } .f-done { text-align: left; } .f-done h3 { font-size: var(--t-2xl); margin-bottom: var(--s-4); } .f-done .muted { max-width: 44ch; } .hp { position: absolute; left: -9999px; } @media (max-width: 900px) { .first-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .f-row { grid-template-columns: 1fr; } .f-nav .hint { display: none; } } .reach { margin-top: var(--s-9); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); border-top: 1px solid var(--line-dark); padding-top: var(--s-6); } .reach h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); margin-bottom: var(--s-3); } .reach p, .reach address { font-style: normal; color: var(--muted); font-size: var(--t-sm); } .reach a { text-decoration: none; } .reach .coords { display: block; margin-top: var(--s-3); font-family: var(--display); font-style: italic; color: var(--accent); letter-spacing: .02em; } .voice-line { display: flex; gap: var(--s-4); align-items: center; text-decoration: none; } .orb { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; box-shadow: inset 0 0 0 1px rgba(167, 207, 182, 0.5); } .orb i { width: 3px; height: 18px; border-radius: 2px; background: var(--accent); transform: scaleY(.34); animation: orb 1.3s ease-in-out infinite; } .orb i:nth-child(2) { animation-delay: .15s; } .orb i:nth-child(3) { animation-delay: .3s; } .orb i:nth-child(4) { animation-delay: .45s; } @keyframes orb { 0%, 100% { transform: scaleY(.34); opacity: .6; } 50% { transform: scaleY(1); opacity: 1; } } .voice-line strong { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-xl); color: var(--accent); line-height: 1.1; } .voice-note { margin-top: var(--s-3); font-size: .75rem; line-height: 1.55; color: var(--muted); } .voice-note a { color: var(--text); } @media (max-width: 900px) { .reach { grid-template-columns: 1fr; gap: var(--s-6); } } .map-consent { margin-top: var(--s-7); position: relative; aspect-ratio: 21 / 8; border-radius: 10px; overflow: hidden; background-color: var(--night-2); background-image: linear-gradient(28deg, transparent 49.6%, rgba(167, 207, 182, .16) 49.6% 50.4%, transparent 50.4%), linear-gradient(-62deg, transparent 49.7%, rgba(167, 207, 182, .1) 49.7% 50.3%, transparent 50.3%), linear-gradient(rgba(241, 238, 231, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 238, 231, .05) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 56px 56px, 56px 56px; } .map-consent::before { content: ""; position: absolute; right: 22%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 10px rgba(167, 207, 182, .18), 0 0 0 26px rgba(167, 207, 182, .07); } .map-consent.on::before { display: none; } .map-ask { position: relative; z-index: 1; height: 100%; display: grid; align-content: center; justify-items: start; gap: var(--s-3); padding: var(--s-6); max-width: 40rem; } .map-t { font-family: var(--display); font-size: var(--t-xl); } .map-t b { font-weight: 400; font-style: italic; color: var(--accent); } .map-n { font-size: var(--t-sm); color: var(--muted); } .map-n a { color: var(--text); } .map-rem { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--muted); cursor: pointer; } .map-rem input { width: 18px; height: 18px; accent-color: var(--accent); } .map-consent iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); } @media (max-width: 760px) { .map-consent::before { right: 16%; top: auto; bottom: 16%; } .map-consent { aspect-ratio: auto; min-height: 360px; } .map-consent.on { aspect-ratio: 4 / 5; min-height: 0; } } /* FAQ */ .faq { padding-block: 0 var(--scene); background: var(--night); } .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); border-top: 1px solid var(--line-dark); padding-top: var(--s-8); } .faq h2 { font-size: var(--t-2xl); } .faq details { border-bottom: 1px solid var(--line-dark); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 8px; background: linear-gradient(var(--accent), var(--accent)) center / 100% 1.5px no-repeat, linear-gradient(var(--accent), var(--accent)) center / 1.5px 100% no-repeat; transition: transform .4s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .faq details[open] .ans { grid-template-rows: 1fr; } .faq .ans > div { overflow: hidden; } .faq .ans p { padding-bottom: var(--s-5); color: var(--muted); max-width: 64ch; } @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: var(--s-5); } } /* Footer */ .mf { background: var(--night); border-top: 1px solid var(--line-dark); padding: var(--s-8) 0 var(--s-7); font-size: var(--t-sm); color: var(--muted); } .mf-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)); gap: var(--s-6); } .mf .mh-brand span:first-child { color: var(--text); } .mf ul { list-style: none; display: grid; gap: var(--s-2); } .mf a { text-decoration: none; } .mf a:hover { color: var(--accent); } .mf-base { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; font-size: var(--t-xs); } @media (max-width: 760px) { .mf-grid { grid-template-columns: 1fr 1fr; } .mf-grid > :first-child { grid-column: 1 / -1; } } /* Mobile Sticky-CTA */ .msticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-sticky); display: none; gap: var(--s-2); padding: var(--s-2); border-radius: 999px; background: rgba(34, 52, 65, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 36px rgba(15, 24, 30, 0.45), inset 0 0 0 1px var(--line-dark); transition: transform .45s var(--ease), opacity .3s; } .msticky a { flex: 1; min-height: 48px; } .msticky.hide { transform: translateY(140%); opacity: 0; pointer-events: none; } @media (max-width: 760px) { .msticky { display: flex; } body.sticky-on .hg-chat-placeholder { bottom: 84px !important; } body.dialog-open .msticky, body.dialog-open .hg-chat-placeholder { display: none !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv { opacity: 1; transform: none; filter: none; transition: none; } .seal svg, .orb i { animation: none; } .day-scroller, .res-scroller { height: auto; } .day-pin, .res-pin { position: relative; height: auto; padding-block: var(--scene); } } /* ============================================================ STIMMEN · Google + Instagram (direkt nach dem Hero) ============================================================ */ .stimmen { padding-block: var(--scene) calc(var(--scene) * .8); background: var(--night); overflow: hidden; } .st-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; } .st-score { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--s-5); align-items: end; text-decoration: none; color: var(--text); } .st-g { grid-row: 1; grid-column: 1; width: 44px; height: 44px; align-self: start; margin-top: 1.2rem; padding: 9px; border-radius: 50%; background: var(--text); } .st-g svg { width: 100%; height: 100%; } .st-score strong { grid-row: 1; grid-column: 2; font-family: var(--display); font-weight: 400; font-size: clamp(6rem, 3rem + 11vw, 13.5rem); line-height: .82; letter-spacing: -0.04em; } .st-stars { grid-column: 1 / 3; margin-top: var(--s-5); font-size: clamp(1.6rem, 1rem + 2vw, 2.6rem); letter-spacing: .14em; color: var(--accent); line-height: 1; } .st-count { grid-column: 1 / 3; margin-top: var(--s-3); font-size: var(--t-lg); color: var(--muted); transition: color .3s; } .st-score:hover .st-count { color: var(--accent-2); } .st-intro h2 { font-size: var(--t-2xl); margin: var(--s-4) 0 var(--s-4); } .st-intro .muted { max-width: 42ch; margin-bottom: var(--s-6); } .marquee { margin-top: var(--s-9); position: relative; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee:focus-visible { outline-offset: -2px; } .mq-track { display: flex; gap: var(--s-4); width: max-content; list-style: none; padding-block: var(--s-2); animation: mq 80s linear infinite; } .marquee:hover .mq-track, .marquee:focus-within .mq-track, .marquee:focus .mq-track { animation-play-state: paused; } @keyframes mq { to { transform: translateX(-50%); } } .rv-card { width: clamp(300px, 30vw, 420px); flex: none; padding: var(--s-6); border-radius: 6px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-dark); display: flex; flex-direction: column; gap: var(--s-4); } .rc-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; } .rc-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--petrol); color: var(--accent-2); font-size: .8rem; font-weight: 600; letter-spacing: .04em; } .rc-top b { display: block; font-weight: 600; font-size: var(--t-sm); } .rc-top small { color: var(--muted); font-size: var(--t-xs); } .rc-st { color: var(--accent); letter-spacing: .1em; font-size: .9rem; } .rv-card p { font-family: var(--display); font-size: 1.22rem; line-height: 1.45; color: var(--text); } .ig { margin-top: var(--s-10); } .ig-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); } .ig-head h3 { font-size: var(--t-2xl); } .ig-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); } .ig-card { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: var(--night-2); cursor: pointer; transition: transform .5s var(--ease); } .ig-card:hover { transform: translateY(-6px); } .ig-card img, .ig-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ig-card video { opacity: 0; transition: opacity .4s var(--ease-q); } .ig-card.playing video { opacity: 1; } .ig-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 36, 44, 0) 60%, rgba(23, 36, 44, .75)); pointer-events: none; } .ig-v { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--text); } .ig-v svg { width: 14px; height: 14px; } /* YouTube-Erfahrungen: Zwei-Klick-Lösung, Vorschaubilder vom eigenen Server */ .yt { margin-top: var(--s-10); } .yt-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } .yt-card { display: grid; gap: var(--s-4); } .yt-facade, .yt-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: var(--night-3); cursor: pointer; } .yt-facade img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .9s var(--ease), filter .5s; } .yt-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 28, 34, .55), rgba(18, 28, 34, 0) 55%); } .yt-facade:hover img, .yt-facade:focus-visible img { transform: scale(1.04); filter: saturate(1); } .yt-play { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cta); color: var(--ink); transition: transform .4s var(--ease); } .yt-facade:hover .yt-play { transform: scale(1.08); } .yt-play svg { width: 16px; height: 16px; margin-left: 2px; } .yt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .yt-card figcaption q { display: block; font-family: var(--display); font-size: var(--t-lg); line-height: 1.3; quotes: "„" "“"; } .yt-card figcaption small { display: block; margin-top: var(--s-2); font-size: var(--t-xs); color: var(--muted); letter-spacing: .04em; } .yt-note { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--muted); max-width: 70ch; } .yt-note a { color: var(--text); } @media (max-width: 1080px) { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .yt-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-4); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .yt-grid::-webkit-scrollbar { display: none; } .yt-grid > li { flex: 0 0 82%; scroll-snap-align: start; } } .ig-dialog { margin: auto; padding: 0; border: 0; background: transparent; max-width: min(420px, 92vw); overflow: visible; } .ig-dialog::backdrop { background: rgba(15, 24, 30, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ig-dialog video { width: 100%; max-height: 82vh; aspect-ratio: 9 / 16; border-radius: 10px; background: #0F181E; display: block; } .ig-close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--night-2); color: var(--text); cursor: pointer; display: grid; place-items: center; } .ig-close svg { width: 18px; height: 18px; } .ig-more { display: block; margin-top: var(--s-3); text-align: center; color: var(--accent); font-size: var(--t-sm); } @media (max-width: 1080px) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .st-head { grid-template-columns: 1fr; gap: var(--s-7); } .marquee { margin-top: var(--s-8); } .films-row { grid-template-columns: 1fr; gap: var(--s-4); } } @media (max-width: 640px) { .ig-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; } .ig-grid::-webkit-scrollbar { display: none; } .ig-grid li { flex: 0 0 44%; scroll-snap-align: start; } .mh-logo img { height: 52px; } .mh { height: 72px; } .mh.open nav { inset: 72px 0 0 0; } } .mf-logo img { height: 72px; width: auto; } @media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } .marquee { overflow-x: auto; } } /* Methodenbilder der Live-Seite im Kaliber (wechseln mit dem Tab) */ .method-fig { aspect-ratio: 4 / 3; border-radius: 4px; } .method-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease-q); } .method-fig img.on { opacity: 1; } .f-dt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); } .field input[type="date"], .field input[type="time"] { color-scheme: dark; padding-right: var(--s-3); } /* ============================================================ DER HÄUFIGSTE FEHLER (Live-Inhalt, redaktionell) ============================================================ */ .pitfalls { padding-block: var(--scene); background: var(--night-2); } .pit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8) var(--s-9); align-items: start; } .pit-intro h2 { font-size: var(--t-xl); line-height: 1.15; margin-top: var(--s-4); } .pit-intro p { margin-top: var(--s-5); color: var(--muted); max-width: 52ch; } .pit-list { list-style: none; border-top: 1px solid var(--line-dark); } .pit-list li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--line-dark); } .pit-list .n { font-family: var(--display); font-style: italic; color: var(--accent); font-size: var(--t-lg); line-height: 1.2; } .pit-list h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); } .pit-list p { margin-top: var(--s-2); color: var(--muted); max-width: 62ch; } .pit-answer { grid-column: 2; color: var(--text); max-width: 62ch; } .pit-answer .link { color: var(--accent); } .team-lead { margin-top: var(--s-7); color: var(--muted); max-width: 62ch; } .local { margin-top: var(--s-9); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; } .local h2 { font-size: var(--t-xl); line-height: 1.15; } .local p { color: var(--muted); max-width: 64ch; } .local p + p { margin-top: var(--s-4); } .local .link { color: var(--accent); } @media (max-width: 900px) { .pit-grid, .local { grid-template-columns: 1fr; gap: var(--s-6); } .pit-answer { grid-column: auto; } } /* ===== neu.css ===== */ /* ============================================================ HAIR GENESIS · Unterseiten im Manufaktur-Design baut auf manufaktur.css (Tokens, Header, Buttons, FAQ, Index) auf ============================================================ */ /* ---------- Seiten-Hero ---------- */ .ph { position: relative; background: var(--night); padding: calc(84px + clamp(48px, 7vw, 104px)) 0 clamp(64px, 8vw, 120px); overflow: hidden; } .ph-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; } .ph-grid.text-only { grid-template-columns: minmax(0, 1fr); max-width: 900px; } .crumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-6); list-style: none; } .crumbs li + li::before { content: "/"; margin-right: var(--s-2); opacity: .5; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--accent); } .ph h1 { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.8rem); line-height: 1.02; letter-spacing: -0.02em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .ph-grid > *, .tb-grid > *, .art-grid > *, .band-grid > *, .coll-item > *, .feat > *, .posts a > * { min-width: 0; } .ph h1 em { color: var(--accent); } .ph .lead { margin-top: var(--s-5); color: var(--muted); } .ph-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .ph-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); font-size: var(--t-sm); color: var(--muted); } .ph-meta .tag { color: var(--accent); } .ph-fig { aspect-ratio: 4 / 5; } .ph-fig.wide { aspect-ratio: 16 / 10; } .ph-fig img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .ph { padding-top: calc(72px + 40px); } .ph-grid { grid-template-columns: 1fr; gap: var(--s-6); } .ph-fig { aspect-ratio: 16 / 11; order: 2; } } /* ---------- Spezifikationsleiste (wie ein Uhren-Datenblatt) ---------- */ .specs { background: var(--night-2); border-block: 1px solid var(--line-dark); } .specs ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .specs li { padding: var(--s-5) var(--s-4) var(--s-5) 0; } .specs li + li { padding-left: var(--s-5); border-left: 1px solid var(--line-dark); } .specs span { display: block; font-size: var(--t-xs); color: var(--muted); letter-spacing: .02em; } .specs b { display: block; margin-top: var(--s-1); font-family: var(--display); font-weight: 400; font-size: var(--t-lg); line-height: 1.25; } @media (max-width: 760px) { .specs ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .specs li, .specs li + li { padding: var(--s-4) var(--s-3); border-left: 0; border-top: 1px solid var(--line-dark); } } /* ---------- Lesetypografie ---------- */ .prose { font-size: var(--t-base); line-height: 1.78; color: var(--text); max-width: 68ch; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .prose > * + * { margin-top: var(--s-4); } .prose h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); line-height: 1.15; margin-top: var(--s-8); scroll-margin-top: 110px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); line-height: 1.25; margin-top: var(--s-6); scroll-margin-top: 110px; } .prose h4 { font-weight: 600; margin-top: var(--s-5); } .prose p, .prose li { color: rgba(241, 238, 231, .86); } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--accent); text-underline-offset: 3px; } .prose a:hover { color: var(--accent-2); } .prose ul { list-style: none; padding: 0; } .prose ul li { position: relative; padding-left: 26px; } .prose ul li + li { margin-top: var(--s-2); } .prose ul li::before { content: ""; position: absolute; left: 0; top: .82em; width: 14px; height: 1px; background: var(--accent); } .prose ol { padding: 0; list-style: none; counter-reset: o; } .prose ol li { counter-increment: o; position: relative; padding-left: 38px; } .prose ol li + li { margin-top: var(--s-3); } .prose ol li::before { content: counter(o) "."; position: absolute; left: 0; top: 0; font-family: var(--display); font-style: italic; color: var(--accent); } .prose .info-box, .prose blockquote { margin-block: var(--s-6); padding: var(--s-5) var(--s-6); border-radius: 4px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-dark); color: rgba(241, 238, 231, .9); } .prose .info-box strong:first-child { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-lg); color: var(--accent); margin-bottom: var(--s-2); } .prose .info-box h3 { margin-top: 0; } .prose table { width: 100%; border-collapse: collapse; margin-block: var(--s-6); font-size: var(--t-sm); display: block; overflow-x: auto; } .prose th, .prose td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line-dark); vertical-align: top; } .prose th { font-weight: 600; color: var(--accent); border-bottom-color: rgba(167, 207, 182, .45); } .prose td:first-child { color: var(--text); font-weight: 500; } .prose .ticks li::before { width: 10px; height: 10px; top: .55em; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); } .prose img { border-radius: 4px; } /* ---------- Artikel-Layout ---------- */ .art { padding-block: var(--scene); background: var(--night); } .art-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s-9); align-items: start; } .toc { position: sticky; top: 110px; font-size: var(--t-sm); } .toc h2 { font: 500 var(--t-xs)/1.2 var(--font); color: var(--muted); letter-spacing: .02em; margin-bottom: var(--s-4); } .toc ol { list-style: none; border-left: 1px solid var(--line-dark); } .toc a { display: block; padding: var(--s-2) 0 var(--s-2) var(--s-4); margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--muted); line-height: 1.4; transition: color .2s, border-color .2s; } .toc a:hover, .toc a.on { color: var(--text); border-left-color: var(--accent); } .toc details summary { display: none; } .keybox { margin-bottom: var(--s-8); padding: var(--s-6); border-radius: 4px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-dark); max-width: 68ch; } .keybox h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-lg); color: var(--accent); margin-bottom: var(--s-3); } .keybox ul { list-style: none; display: grid; gap: var(--s-2); } .keybox li { position: relative; padding-left: 26px; color: rgba(241, 238, 231, .88); } .keybox li::before { content: ""; position: absolute; left: 0; top: .8em; width: 14px; height: 1px; background: var(--accent); } .art-note { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line-dark); font-size: var(--t-xs); color: var(--muted); max-width: 68ch; } @media (max-width: 1080px) { .art-grid { grid-template-columns: 1fr; gap: var(--s-6); } .toc { position: static; } .toc details { border: 1px solid var(--line-dark); border-radius: 4px; padding: var(--s-3) var(--s-4); } .toc details summary { display: block; cursor: pointer; font-weight: 500; } .toc details[open] summary { margin-bottom: var(--s-3); } .toc > h2 { display: none; } } @media (min-width: 1081px) { .toc details > summary { display: none; } } /* ---------- Behandlung: Körper + Seitenkarte ---------- */ .tb { padding-block: var(--scene); background: var(--night); } .tb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-9); align-items: start; } .aside-card { position: sticky; top: 110px; padding: var(--s-6); border-radius: 4px; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--line-dark); } .aside-card h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); line-height: 1.1; } .aside-card h2 em { color: var(--accent); } .aside-card p { margin-top: var(--s-3); color: var(--muted); font-size: var(--t-sm); } .aside-card .btn { width: 100%; margin-top: var(--s-5); } .aside-card .voice-line { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); } .aside-card .voice-line strong { font-size: var(--t-lg); } .aside-card .rate { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--muted); } .aside-card .rate span { color: var(--accent); letter-spacing: .1em; margin-right: var(--s-2); } @media (max-width: 1080px) { .tb-grid { grid-template-columns: 1fr; } .aside-card { position: static; } } /* Vorteile als nummerierte Zeilen (keine Karten) */ .why { padding-block: var(--scene); background: var(--paper); color: var(--ink); } .why h2 { font-size: var(--t-2xl); max-width: 18ch; } .why ol { list-style: none; counter-reset: w; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); margin-top: var(--s-8); } .why li { counter-increment: w; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--line-light); } .why li::before { content: counter(w, lower-roman) "."; font-family: var(--display); font-style: italic; color: var(--accent-ink-2); font-size: var(--t-lg); } .why b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-lg); } .why p { color: var(--ink-muted); font-size: var(--t-sm); margin-top: var(--s-1); } @media (max-width: 760px) { .why ol { grid-template-columns: 1fr; } } /* Ablauf in drei Schritten */ .flow { padding-block: var(--scene); background: var(--night-2); } .flow h2 { font-size: var(--t-2xl); } .flow ol { list-style: none; counter-reset: f; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); position: relative; } .flow ol::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line-dark); } .flow li { counter-increment: f; position: relative; } .flow li::before { content: counter(f); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--night-2); box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-family: var(--display); font-size: var(--t-lg); position: relative; } .flow b { display: block; margin-top: var(--s-5); font-family: var(--display); font-weight: 400; font-size: var(--t-lg); } .flow p { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-sm); max-width: 34ch; } @media (max-width: 760px) { .flow ol { grid-template-columns: 1fr; } .flow ol::before { display: none; } } /* Abschluss-Band */ .band { padding-block: var(--scene); background: var(--paper); color: var(--ink); } .band-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; } .band h2 { font-size: var(--t-3xl); line-height: .98; } .band h2 em { color: var(--accent-ink); } .band p { color: var(--ink-muted); max-width: 44ch; } .band .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); } .band .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-light); } @media (max-width: 900px) { .band-grid { grid-template-columns: 1fr; gap: var(--s-5); } } .related { padding-block: var(--scene); background: var(--night); } .related .index { margin-top: 0; } /* ---------- Behandlungen-Übersicht: Kollektion ---------- */ .coll { padding-block: var(--scene); background: var(--night); } .coll-list { list-style: none; display: grid; gap: var(--s-9); } .coll-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; } .coll-item:nth-child(even) .graded { order: 2; } .coll-item .graded { aspect-ratio: 4 / 5; max-height: 640px; } .coll-item .n { font-family: var(--display); font-style: italic; color: var(--accent); font-size: var(--t-lg); } .coll-item h2 { font-size: var(--t-2xl); margin: var(--s-3) 0 var(--s-4); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .coll-item p { color: var(--muted); max-width: 48ch; } .coll-item .btn { margin-top: var(--s-6); } @media (max-width: 900px) { .coll-item { grid-template-columns: 1fr; gap: var(--s-5); } .coll-item:nth-child(even) .graded { order: 0; } .coll-item .graded { aspect-ratio: 16 / 11; } } /* ---------- Ratgeber (Journal) ---------- */ .journal { padding-block: var(--scene); background: var(--night); } .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-8); } .chips button { min-height: 40px; padding: 0 var(--s-5); border-radius: 999px; border: 0; background: none; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-dark); cursor: pointer; font-size: var(--t-sm); transition: background-color .2s, color .2s, box-shadow .2s; } .chips button:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(167, 207, 182, .5); } .chips button[aria-pressed="true"] { background: var(--accent); color: var(--night); box-shadow: none; } .feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; text-decoration: none; margin-bottom: var(--s-9); } .feat .graded { aspect-ratio: 16 / 10; } .feat .graded img { transition: transform 1.2s var(--ease); } .feat:hover .graded img { transform: scale(1.03); } .feat .m, .posts .m { font-size: var(--t-xs); color: var(--muted); } .feat .m b, .posts .m b { color: var(--accent); font-weight: 500; } .feat h2 { font-size: var(--t-2xl); margin: var(--s-3) 0 var(--s-4); transition: color .3s; } .feat:hover h2 { color: var(--accent-2); } .feat p { color: var(--muted); } .posts { list-style: none; border-top: 1px solid var(--line-dark); } .posts li[hidden] { display: none; } .posts a { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: var(--s-6); align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--line-dark); text-decoration: none; } .posts h3 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); line-height: 1.15; margin: var(--s-2) 0; transition: color .3s; } .posts a:hover h3 { color: var(--accent-2); } .posts p { color: var(--muted); font-size: var(--t-sm); max-width: 64ch; } .posts .th { aspect-ratio: 3 / 2; border-radius: 3px; } @media (max-width: 760px) { .feat { grid-template-columns: 1fr; gap: var(--s-4); } .posts a { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s-4); } .posts p { display: none; } .posts h3 { font-size: var(--t-lg); } } /* ---------- Rechtstexte ---------- */ .legal-page { padding-block: var(--scene); background: var(--paper); color: var(--ink); } .legal-page .prose { color: var(--ink); max-width: 72ch; } .legal-page .prose p, .legal-page .prose li { color: var(--ink-muted); } .legal-page .prose strong, .legal-page .prose h2, .legal-page .prose h3 { color: var(--ink); } .legal-page .prose a { color: var(--accent-ink); } .legal-page .prose ul li::before { background: var(--accent-ink-2); } .legal-page .prose table th { color: var(--accent-ink); } .legal-page .prose th, .legal-page .prose td { border-bottom-color: var(--line-light); } /* Instagram-Übersicht */ .ig-page { padding-block: var(--scene); background: var(--night); } .ig-page .ig-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--s-5); } @media (max-width: 1080px) { .ig-page .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .ig-page .ig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; } .ig-page .ig-grid li { flex: none; } } /* Methoden-Streifen (Bilder der Live-Seite) */ .mstrip { padding-block: 0 var(--scene); background: var(--night); } .mstrip h2 { font-size: var(--t-2xl); margin-top: var(--s-4); } .mstrip ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); } .mstrip .graded { aspect-ratio: 4 / 3; border-radius: 4px; margin-bottom: var(--s-4); } .mstrip b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t-xl); } .mstrip span { display: block; font-size: var(--t-xs); color: var(--accent); margin-top: 2px; } .mstrip p { margin-top: var(--s-2); color: var(--muted); font-size: var(--t-sm); } @media (max-width: 760px) { .mstrip ul { grid-template-columns: 1fr; } } /* Exosomen: nur auf Anfrage */ .onreq { display: inline-block; margin: var(--s-4) 0 var(--s-3); padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .on-paper .onreq { color: var(--accent-ink-2); box-shadow: inset 0 0 0 1px var(--accent-ink-2); } .onreq-note { margin-bottom: var(--s-6); padding: var(--s-5); border-radius: 8px; background: rgba(167, 207, 182, .1); box-shadow: inset 0 0 0 1px rgba(167, 207, 182, .35); } .onreq-note b { color: var(--accent); } /* Prototyp: offene Punkte in Rechtstexten sichtbar markieren */ mark.todo { background: #E58A6E; color: #1D2C35; padding: 0 6px; border-radius: 3px; font-size: .75em; font-weight: 600; white-space: nowrap; } /* ===== genesis-lena.css ===== */ /* ============================================================ Aus der Live-Seite übernommen (hairgenesis.de, Lovable-Projekt): Lena-Welcome-Popup, Chat-Platzhalter (§ 25 TDDDG), Hero-CTAs, 24/7-KI-Sprachassistentin. Werte 1:1, CSS-Variablen aufgelöst. ============================================================ */ :root { --color-petrol: #304A59; --color-petrol-deep: #1D2C35; --color-cream: #EDDFC5; --font-display: "Inter Tight", system-ui, sans-serif; } /* ---- Lena Welcome ---- */ .lena-welcome-overlay{z-index:9998;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f1e258c;justify-content:center;align-items:center;padding:24px;animation:.35s both lena-overlay-in;display:flex;position:fixed;inset:0} @keyframes lena-overlay-in{0%{opacity:0}to{opacity:1}} .lena-welcome-overlay.is-exiting{pointer-events:none;animation:.32s both lena-overlay-out} @keyframes lena-overlay-out{0%{opacity:1}to{opacity:0}} .lena-welcome{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);width:min(420px,100vw - 48px);color:var(--color-petrol-deep);background:#fffffffa;border:1px solid #d9d2c5f2;border-radius:28px;padding:26px 26px 28px;animation:.55s cubic-bezier(.16,1,.3,1) both lena-welcome-in;position:relative;box-shadow:inset 0 1px #fffc,0 32px 80px -20px #0f1e2573} .lena-welcome.is-exiting{animation:.32s cubic-bezier(.4,0,.2,1) both lena-welcome-out} @keyframes lena-welcome-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes lena-welcome-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.92) translateY(12px)}} .lena-welcome__close{width:30px;height:30px;color:var(--color-petrol-deep);cursor:pointer;opacity:.75;background:#1f364112;border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .2s,opacity .2s;display:flex;position:absolute;top:16px;right:16px} .lena-welcome__close:hover{opacity:1;background:#1f364121} .lena-welcome__head{align-items:center;gap:14px;padding-right:38px;display:flex} .lena-welcome__avatar{background:linear-gradient(140deg,var(--color-petrol) 0%,var(--color-petrol-deep) 100%);width:52px;height:52px;color:var(--color-cream);border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:0 8px 22px -8px #0f1e2599} .lena-welcome__dot{background:#3ec98a;border:2.5px solid #fff;border-radius:50%;width:13px;height:13px;animation:2.4s ease-in-out infinite lena-dot;position:absolute;bottom:-1px;right:-1px} @keyframes lena-dot{0%,to{box-shadow:0 0 #3ec98a8c}50%{box-shadow:0 0 0 8px #3ec98a00}} .lena-welcome__name{font-family:var(--font-display);color:var(--color-petrol-deep);margin:0;font-size:17px;font-weight:600} .lena-welcome__role{color:#1f364199;letter-spacing:.01em;margin:3px 0 0;font-size:13px} .lena-welcome__bubble{background:var(--color-cream);color:#1f3641eb;border-radius:18px 18px 18px 6px;margin:18px 0 0;padding:16px 18px;font-size:15px;line-height:1.65;position:relative} .lena-welcome__actions{align-items:center;gap:10px;margin-top:20px;display:flex} .lena-welcome__cta{background:linear-gradient(135deg,var(--color-petrol) 0%,var(--color-petrol-deep) 100%);color:#fff;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:8px;padding:13px 22px;font:600 15px/1 var(--font-display);transition:transform .2s,box-shadow .2s;display:inline-flex;box-shadow:0 12px 28px -14px #0f1e25d9} .lena-welcome__cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px #0f1e25f2} .lena-welcome__later{cursor:pointer;color:#1f36418c;background:0 0;border:none;margin-left:auto;padding:10px 8px;font:14px var(--font-display);transition:color .2s} .lena-welcome__later:hover{color:var(--color-petrol-deep)} @media (max-width:760px){.lena-welcome-overlay{padding:16px}.lena-welcome{width:100%;padding:22px 20px 24px}.lena-welcome__head{gap:12px}.lena-welcome__avatar{width:48px;height:48px}.lena-welcome__bubble{font-size:14px}} /* ---- Chat-Platzhalter (Stoaix wird erst nach Klick geladen) ---- */ .hg-chat-placeholder{position:fixed;right:20px;bottom:20px;z-index:9998;width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;background:#1F3641;color:#fff;box-shadow:0 10px 28px rgba(31,54,65,.32);transition:transform .2s ease} .hg-chat-placeholder:hover{transform:scale(1.06)} @keyframes stoaix-pulse{0%{box-shadow:0 10px 28px rgba(31,54,65,.32),0 0 0 0 rgba(31,54,65,.45)}70%{box-shadow:0 10px 28px rgba(31,54,65,.32),0 0 0 14px rgba(31,54,65,0)}100%{box-shadow:0 10px 28px rgba(31,54,65,.32),0 0 0 0 rgba(31,54,65,0)}} @media (max-width:760px){.hg-chat-placeholder{bottom:24px}} /* ---- Hero-CTAs (Live) ---- */ .hg-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;font:700 15px/1 var(--font-display);cursor:pointer;border:none;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;text-decoration:none} .hg-cta--primary{position:relative;background:linear-gradient(135deg,#EDDFC5,#F5E9CE);color:#1D2C35;box-shadow:0 10px 24px -8px rgba(237,223,197,.55),inset 0 1px 0 rgba(255,255,255,.6)} /* Glow per Opacity auf einem Pseudo-Element (GPU) statt box-shadow-Animation (Repaint pro Frame) */ .hg-cta--primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 12px 28px -8px rgba(237,223,197,.75),0 0 0 6px rgba(237,223,197,.18);opacity:0;animation:hg-cta-glow 3.2s ease-in-out infinite} .hg-cta--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -8px rgba(237,223,197,.7)} .hg-cta--primary:hover::after{animation-play-state:paused} @keyframes hg-cta-glow{0%,100%{opacity:0}50%{opacity:1}} .hg-cta--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .hg-cta--ghost:hover{background:rgba(255,255,255,.18)} .hg-cta--247__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:rgba(124,227,155,.16);color:#7CE39B;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase} .hg-cta--247__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#7CE39B} .hg-hero__fineprint{font-size:12px;line-height:1.6;color:rgba(255,255,255,.68)} .hg-hero__fineprint a{color:rgba(255,255,255,.9);text-decoration:underline} @media (prefers-reduced-motion:reduce){.hg-cta--primary::after{animation:none}} /* ---- Genesis-Finale: Layout ---- */ .gx-final{max-width:640px} .gx-title{margin:16px 0 14px} .gx-title em{white-space:nowrap} .gx-subtitle{display:block;margin-top:12px;font-family:var(--font-display);font-size:.36em;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.78)} .gx-sub strong{color:#fff} .gx-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 14px} /* 24/7 Sprachassistentin – als "lebendige" Stimme gestaltet */ .gx-voice{display:flex;align-items:center;gap:16px;max-width:460px;padding:14px 18px 14px 14px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(232,199,122,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-decoration:none;transition:background .2s,transform .2s,border-color .2s} .gx-voice:hover{background:rgba(255,255,255,.14);border-color:rgba(232,199,122,.6);transform:translateY(-2px)} .gx-voice__orb{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:3px;background:radial-gradient(circle at 35% 30%,rgba(232,199,122,.35),rgba(29,44,53,.9) 70%);box-shadow:0 0 0 1px rgba(232,199,122,.35),0 0 26px rgba(232,199,122,.28)} .gx-voice__orb i{width:3px;height:20px;border-radius:2px;background:#E8C77A;transform:scaleY(.3);animation:gx-voice 1.3s ease-in-out infinite} .gx-voice__orb i:nth-child(2){animation-delay:.15s}.gx-voice__orb i:nth-child(3){animation-delay:.3s}.gx-voice__orb i:nth-child(4){animation-delay:.45s}.gx-voice__orb i:nth-child(5){animation-delay:.6s} @keyframes gx-voice{0%,100%{transform:scaleY(.3);opacity:.6}50%{transform:scaleY(1);opacity:1}} .gx-voice__text{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0} .gx-voice__label{font-size:14px;font-weight:700;line-height:1.25} .gx-voice__number{font-size:15px;font-weight:600;color:#E8C77A;letter-spacing:.02em} .gx-voice__arrow{margin-left:auto;flex:none;opacity:.7} .gx-fineprint{margin:12px 0 0;max-width:520px;font-size:11.5px} .gx-trust{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;padding:0;margin:20px 0 0} .gx-trust li{font-size:13px;color:rgba(255,255,255,.82)} .gx-trust strong{color:#E8C77A;font-size:15px;margin-right:4px} .gx-final.is-live > :nth-child(6){transition-delay:.62s}.gx-final.is-live > :nth-child(7){transition-delay:.72s}.gx-final.is-live > :nth-child(8){transition-delay:.82s} /* Nur-Mobil / Nur-Desktop Textteile */ .gx-show-m{display:none} /* Klang nach links, damit der Lena-Chat-Button rechts frei bleibt */ .gx-sound{right:auto;left:clamp(16px,2.4vw,40px)} @media (max-width:940px){ .gx-final .gx-sub{display:none} .gx-eyebrow{max-width:92%} .gx-title{margin:10px 0 0} .gx-cta-row{margin:16px 0 10px;gap:8px} .gx-cta-row .hg-cta{flex:1 1 100%;justify-content:center;padding:14px 18px} .gx-voice{padding:10px 14px 10px 10px;gap:12px} .gx-voice__orb{width:42px;height:42px} .gx-fineprint{font-size:10.5px;line-height:1.5;margin-top:8px} .gx-trust{margin-top:10px;gap:4px 16px} .gx-trust li{font-size:12px} .gx-sound{left:auto;right:14px} .gx-hide-m{display:none} .gx-show-m{display:inline} .gx-trust{padding-right:66px} .gx-pin.is-final .gx-root{opacity:0;pointer-events:none} } /* ============================================================ BRÜCKE · bestehende React-Komponenten im neuen Design (Lead-Formular modal + inline, Instagram-Reels, Sticky-CTA, Chat-Platzhalter) Markup bleibt unverändert, nur die Optik folgt dem Design. ============================================================ */ /* Body-Rand zurücksetzen (Basisregeln sind auf Nicht-Admin-Routen begrenzt) */ body:where(:not(:has(.hg-tailwind-route))) { margin: 0; padding: 0; } /* ---------- Anker-Aliase für 301-Ziele (/kontakt, /uber-uns) ---------- */ .anchor-alias { display: block; position: relative; top: -92px; height: 0; visibility: hidden; } /* ---------- Lead-Formular: gemeinsame Bausteine ---------- */ .hg-modal__card { position: relative; background: var(--night-2); color: var(--text); border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-dark); font-family: var(--font); } .hg-modal__head { padding: clamp(var(--s-5), 4vw, var(--s-7)) clamp(var(--s-5), 4vw, var(--s-7)) 0; } .hg-pill { display: inline-flex; align-items: center; gap: var(--s-3); font: 500 var(--t-sm)/1.2 var(--font); letter-spacing: .02em; color: var(--accent); background: none; border: 0; padding: 0; } .hg-pill::before { content: ""; width: 28px; height: 1px; background: currentColor; } .hg-modal__head h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-xl); line-height: 1.12; margin: var(--s-4) 0 var(--s-5); color: var(--text); letter-spacing: -.01em; } .hg-steps { display: flex; gap: var(--s-2); } .hg-step { flex: 1; display: flex; align-items: baseline; gap: var(--s-2); padding-top: var(--s-2); border-top: 2px solid var(--line-dark); font-size: var(--t-xs); color: var(--muted); transition: color .3s, border-color .3s; } .hg-step span { font-variant-numeric: tabular-nums; } .hg-step em { font-style: normal; } .hg-step.is-active { color: var(--text); border-color: var(--accent); } .hg-modal__body { padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-7)) 0; } .hg-form { display: grid; gap: var(--s-3); } .hg-label { display: block; margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); } .hg-label:first-child { margin-top: 0; } .hg-help { font-size: var(--t-xs); color: var(--muted); margin-top: calc(var(--s-2) * -1); } .hg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-2); } .hg-tile { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-3) var(--s-4); border: 0; border-radius: 3px; background: transparent; color: var(--text); text-align: left; font: 400 var(--t-sm)/1.3 var(--font); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-dark); transition: box-shadow .2s, background-color .2s, color .2s; } .hg-tile:hover { box-shadow: inset 0 0 0 1px rgba(241, 238, 231, .35); } .hg-tile.is-active { box-shadow: inset 0 0 0 1.5px var(--accent); background: rgba(167, 207, 182, .08); color: var(--accent); } .hg-tile__icon { width: 26px; height: 26px; object-fit: contain; flex: none; filter: invert(1) brightness(1.6) opacity(.8); } .hg-tile.is-active .hg-tile__icon { filter: invert(83%) sepia(12%) saturate(560%) hue-rotate(86deg); } .hg-input { width: 100%; min-height: 52px; padding: 0 var(--s-4); border: 0; border-radius: 3px; background: var(--night-3); color: var(--text); font: 400 var(--t-base)/1.4 var(--font); box-shadow: inset 0 0 0 1px var(--line-dark); color-scheme: dark; } .hg-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); } .hg-input::placeholder { color: rgba(169, 184, 192, .7); } select.hg-input { appearance: none; padding-right: var(--s-7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A7CFB6' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-4) center; } .hg-dropzone { display: grid; place-items: center; gap: var(--s-2); width: 100%; min-height: 160px; padding: var(--s-5); border: 1px dashed rgba(241, 238, 231, .28); border-radius: 3px; background: transparent; color: var(--text); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; } .hg-dropzone:hover { border-color: var(--accent); background: rgba(167, 207, 182, .05); } .hg-dropzone svg { color: var(--accent); } .hg-dropzone strong { font-weight: 500; } .hg-dropzone span { font-size: var(--t-xs); color: var(--muted); } .hg-thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); } .hg-thumb { position: relative; } .hg-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 3px; } .hg-thumb button { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--night); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-dark); } .hg-checkbox { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-3); font-size: var(--t-xs); line-height: 1.55; color: var(--muted); align-items: start; } .hg-checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: #A7CFB6; } .hg-checkbox a { color: var(--text); text-decoration: underline; } .hg-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; } .hg-error { font-size: var(--t-sm); color: var(--alert); } .hg-error a { color: var(--text); text-decoration: underline; } .hg-modal__foot { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-7)) clamp(var(--s-5), 4vw, var(--s-7)); } .hg-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--s-6); border: 0; border-radius: 999px; font: 600 var(--t-sm)/1 var(--font); letter-spacing: .01em; cursor: pointer; text-decoration: none; transition: transform .2s var(--ease-q), background-color .2s, color .2s, box-shadow .3s, opacity .2s; } .hg-cta--primary { background: var(--cta); color: var(--ink); } .hg-cta--primary:hover:not(:disabled) { transform: translateY(-2px); background: #F5E9CE; } .hg-cta--primary:disabled { opacity: .45; cursor: not-allowed; } .hg-cta--ghost { background: transparent; color: var(--muted); box-shadow: none; padding: 0 var(--s-3); } .hg-cta--ghost:hover { color: var(--text); } .hg-cta--ghost-dark { color: var(--text); box-shadow: inset 0 0 0 1px rgba(241, 238, 231, .32); padding: 0 var(--s-6); } .hg-success { padding: clamp(var(--s-6), 5vw, var(--s-8)); } .hg-success__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(167, 207, 182, .12); color: var(--accent); font-size: 24px; } .hg-success h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-2xl); line-height: 1.05; margin: var(--s-5) 0 var(--s-4); color: var(--text); } .hg-success p { color: var(--muted); max-width: 44ch; } .hg-success p strong { color: var(--text); font-weight: 600; } .hg-success__steps { list-style: none; display: grid; gap: var(--s-2); margin: var(--s-5) 0; color: var(--muted); font-size: var(--t-sm); } .hg-success__steps strong { color: var(--accent); font-weight: 500; margin-right: var(--s-2); } .hg-success__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } .hg-success__close { margin-top: var(--s-5); background: none; border: 0; color: var(--muted); cursor: pointer; font-size: var(--t-sm); text-decoration: underline; } /* ---------- Inline (Startseite, Szene „Kostenlose Sprechstunde“) ---------- */ .form-mount { min-height: 520px; } .hg-inline .hg-modal__card--inline { border-radius: 4px; } /* ---------- Modal (alle CTAs mit data-open-lead) ---------- */ .hg-modal { position: fixed; inset: 0; z-index: var(--z-dialog, 9999); display: grid; place-items: center; padding: var(--s-4); } .hg-modal__backdrop { position: absolute; inset: 0; border: 0; background: rgba(15, 24, 30, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; } .hg-modal .hg-modal__card { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: inset 0 0 0 1px var(--line-dark), 0 40px 90px rgba(0, 0, 0, .45); animation: hg-in .5s var(--ease); } .hg-modal__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; } .hg-modal__close:hover { color: var(--text); } @keyframes hg-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } body.hg-modal-open { overflow: hidden; } /* ---------- Instagram-Reels (React, Startseite) ---------- */ #instagram-mount .ig-section { padding: 0; background: none; } #instagram-mount .container { width: auto; max-width: none; padding: 0; margin: 0; } #instagram-mount .ig-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6); } #instagram-mount .ig-head h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-2xl); line-height: 1.04; letter-spacing: -.012em; margin-top: var(--s-3); } #instagram-mount .pill { display: inline-flex; align-items: center; gap: var(--s-3); font: 500 var(--t-sm)/1.2 var(--font); color: var(--accent); background: none; border: 0; padding: 0; } #instagram-mount .pill::before { content: ""; width: 28px; height: 1px; background: currentColor; } #instagram-mount .ig-follow { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--s-6); border-radius: 999px; font: 600 var(--t-sm)/1 var(--font); color: var(--text); box-shadow: inset 0 0 0 1px rgba(241, 238, 231, .32); transition: box-shadow .2s, color .2s; } #instagram-mount .ig-follow:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); } #instagram-mount .ig-grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); } #instagram-mount .ig-card:nth-child(n + 7) { display: none; } #instagram-mount .ig-card { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--night-2); transition: transform .5s var(--ease); } #instagram-mount .ig-card:hover { transform: translateY(-6px); } #instagram-mount .ig-card-img, #instagram-mount .ig-card-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #instagram-mount .ig-card-video { opacity: 0; transition: opacity .4s var(--ease-q); } #instagram-mount .ig-card.is-playing .ig-card-video { opacity: 1; } #instagram-mount .ig-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 36, 44, 0) 60%, rgba(23, 36, 44, .75)); pointer-events: none; } #instagram-mount .ig-card-plays { position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; color: var(--text); } #instagram-mount .ig-card-plays svg { width: 14px; height: 14px; } @media (max-width: 1080px) { #instagram-mount .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { #instagram-mount .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #instagram-mount .ig-card:nth-child(n + 5) { display: none; } } /* ---------- Sticky-CTA (mobil, React) ---------- */ .sticky-mobile-cta { position: fixed; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); z-index: var(--z-sticky, 60); display: none; gap: var(--s-2); padding: var(--s-2); border-radius: 999px; background: rgba(29, 44, 53, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line-dark), 0 18px 40px rgba(0, 0, 0, .35); transition: transform .4s var(--ease), opacity .3s; } .sticky-mobile-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font: 600 var(--t-sm)/1 var(--font); text-decoration: none; } .sticky-mobile-cta .sm-call { color: var(--text); box-shadow: inset 0 0 0 1px rgba(241, 238, 231, .32); } .sticky-mobile-cta .sm-cta { background: var(--cta); color: var(--ink); } .sticky-mobile-cta.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; } body.hg-modal-open .sticky-mobile-cta { display: none; } @media (max-width: 760px) { .sticky-mobile-cta { display: flex; } } /* ---------- Chat-Platzhalter (StoaixChatLoader) ---------- */ .hg-chat-placeholder { background: var(--night-3) !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--line-dark), 0 12px 30px rgba(0, 0, 0, .35) !important; } @media (max-width: 760px) { .hg-chat-placeholder { bottom: 84px !important; } } /* Formular-Icons: weißer PNG-Hintergrund würde invertiert als dunkles Quadrat erscheinen */ .hg-tile__icon { mix-blend-mode: screen; } /* Seitenkopf ohne JS-Abhängigkeit: sichtbar per CSS-Animation, auch wenn die Laufzeit später startet (LCP) */ @keyframes hg-rv-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } } .ph .rv, .ph-fig.rv { animation: hg-rv-in .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); } @media (prefers-reduced-motion: reduce) { .ph .rv, .ph-fig.rv { animation: none; opacity: 1; transform: none; filter: none; } }