/* ============================================================ NGenAro Web — Site / Sektionen (Skelett Phase 1) Изисква tokens.css + base.css + components.css. ============================================================ */ /* ---- Sektions-Rhythmus ---- Kein Flächenwechsel mehr zwischen den Sektionen: eine harte Kante von --bg auf --bg-2 las sich am Übergang wie ein Balken. Der Rhythmus kommt jetzt allein über die ein- und ausblendenden Hintergrundbilder. */ .section--alt{ background:transparent; } /* ---- 3D-Sektionshintergruende (fal.ai -> Blender-Relief, self-hosted) ---- Kein Bildkasten pro Sektion mehr: die Bilder liefen an Ober- und Unterkante ins Dunkle, wodurch an jedem Sektionsübergang ein schwarzer Balken entstand. Jetzt blendet jedes Bild zu den Rändern hin komplett aus (mask). Dazwischen steht die durchgehende Seitenfläche — die Übergänge sind unsichtbar. */ /* Das Bild steht nur als Wert auf der Sektion, gezeichnet wird es allein von ::before (background-image:inherit). background-size:0 unterdrückt das Zeichnen auf der Sektion selbst, ohne den Wert zum Vererben zu verlieren. */ #problem,#leistungen,#loesung,#branchen,#pakete,#referenzen,#ablauf,#warum,#faq,#termin, .section--upsell,#kontakt{ position:relative; background-color:transparent; background-size:0 0; background-repeat:no-repeat; } #problem::before,#leistungen::before,#loesung::before,#branchen::before,#pakete::before,#referenzen::before,#ablauf::before,#warum::before,#faq::before,#termin::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.34; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } #problem > .container,#leistungen > .container,#loesung > .container,#branchen > .container,#pakete > .container,#referenzen > .container,#ablauf > .container,#warum > .container,#faq > .container,#termin > .container{ position:relative; z-index:1; } #problem{ background-image:image-set(url(/assets/img/bg/sec-problem.avif) type("image/avif"), url(/assets/img/bg/sec-problem.webp) type("image/webp")); } #leistungen{ background-image:image-set(url(/assets/img/bg/sec-leistungen.avif) type("image/avif"), url(/assets/img/bg/sec-leistungen.webp) type("image/webp")); } #loesung{ background-image:image-set(url(/assets/img/bg/sec-loesung.avif) type("image/avif"), url(/assets/img/bg/sec-loesung.webp) type("image/webp")); } #branchen{ background-image:image-set(url(/assets/img/bg/sec-branchen.avif) type("image/avif"), url(/assets/img/bg/sec-branchen.webp) type("image/webp")); } #pakete{ background-image:image-set(url(/assets/img/bg/sec-pakete.avif) type("image/avif"), url(/assets/img/bg/sec-pakete.webp) type("image/webp")); } #referenzen{ background-image:image-set(url(/assets/img/bg/sec-referenzen.avif) type("image/avif"), url(/assets/img/bg/sec-referenzen.webp) type("image/webp")); } #ablauf{ background-image:image-set(url(/assets/img/bg/sec-ablauf.avif) type("image/avif"), url(/assets/img/bg/sec-ablauf.webp) type("image/webp")); } #warum{ background-image:image-set(url(/assets/img/bg/sec-warum.avif) type("image/avif"), url(/assets/img/bg/sec-warum.webp) type("image/webp")); } #faq{ background-image:image-set(url(/assets/img/bg/sec-faq.avif) type("image/avif"), url(/assets/img/bg/sec-faq.webp) type("image/webp")); } #termin{ background-image:image-set(url(/assets/img/bg/sec-termin.avif) type("image/avif"), url(/assets/img/bg/sec-termin.webp) type("image/webp")); } /* ---- Nicht-Standard-Layout: Asymmetrie & Rhythmus (nur Desktop, transform-only = 0 CLS) ---- */ @media (min-width:1001px){ /* abwechselnd rechtsbuendige Sektionskoepfe. „Das Problem" steht rechts, „Die Lösung" direkt darunter wieder links — der Blick springt von einer Seite zur anderen, statt eine Spalte herunterzulaufen. */ #problem .section-head, #referenzen .section-head, #faq .section-head{ margin-left:auto; text-align:right; } #problem .section-head p, #referenzen .section-head p, #faq .section-head p{ margin-left:auto; } /* alle Karten-Raster bleiben symmetrisch — kein Versatz, gleiche Höhen */ } .grid-2{ display:grid; gap:1.2rem; grid-template-columns:repeat(2,1fr); } .grid-3{ display:grid; gap:1.2rem; grid-template-columns:repeat(3,1fr); } /* .bento wird weiter unten zusammen mit den anderen Karten-Rastern definiert */ @media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .grid-2,.grid-3{ grid-template-columns:1fr; } } /* ---- Problem / Lösung / Branchen: SYMMETRISCHES Raster, ASYMMETRISCHE 3D-Form ---- Gleiche Größe, gleiche Höhe, gleicher Rhythmus — aber die Silhouette ist ein geschnittenes 3D-Prisma statt eines Rechtecks. */ /* Spaltenzahl richtet sich nach der verfügbaren Breite: eine Karte braucht mindestens ~250 px, sonst bricht im Deutschen jede Zeile nach zwei Wörtern. auto-fit + minmax macht das von selbst — ohne feste Umbruchpunkte. */ .problem-grid,.loesung-grid,.bento{ display:grid; gap:1.4rem; align-items:stretch; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); } .branchen-grid{ display:grid; gap:1.3rem; align-items:stretch; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); } .problem-grid > *,.loesung-grid > *,.branchen-grid > *,.bento > *{ --cut:28px; min-height:14rem; } .problem-grid p,.loesung-grid p,.branchen-grid p,.bento p{ font-size:var(--step--1); line-height:1.62; } .problem-grid h3,.loesung-grid h3,.branchen-grid h3,.bento h3{ font-size:var(--step-1); line-height:1.28; text-wrap:balance; } @media (max-width:560px){ .problem-grid,.loesung-grid,.branchen-grid,.bento{ grid-template-columns:1fr; } .problem-grid > *,.loesung-grid > *,.branchen-grid > *,.bento > *{ min-height:0; } } .prob-card{ display:flex; flex-direction:column; justify-content:flex-start; } .prob-num{ /* kleiner als zuvor: die riesige Ziffer sprengte in schmalen Spalten die Karte und schob die Seite seitlich heraus */ font-family:var(--font-display); font-weight:800; font-size:var(--step-3); line-height:.95; display:block; margin-bottom:.5rem; background:linear-gradient(150deg, color-mix(in oklab, var(--accent) 90%, transparent), color-mix(in oklab, var(--lime) 55%, transparent)); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.55; transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .prob-card:hover .prob-num{ opacity:1; transform:translateX(4px) scale(1.06); } /* Interaktive Karte: Lichtstreifen wandert bei Hover über das Panel */ .card > *{ position:relative; z-index:1; } .card .card-sheen{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.13) 50%, transparent 65%); transform:translateX(-60%); transition:opacity .35s var(--ease), transform .75s var(--ease-out); } .card:hover .card-sheen{ opacity:1; transform:translateX(60%); } /* Icon reagiert lebendig */ .feature-card:hover .feature-icon{ transform:translateZ(34px) rotate(-7deg) scale(1.09); } .feature-icon{ transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease); } .feature-card{ display:flex; flex-direction:column; } /* 3D-anmutende Icon-Kachel: Verlauf + Bevel (Innenlicht oben, Schatten unten) + Tiefe */ .feature-icon{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:var(--r-md); margin-bottom:1.1rem; color:var(--accent); background:linear-gradient(145deg, color-mix(in oklab, var(--accent) 24%, var(--bg-2)), color-mix(in oklab, var(--bg) 92%, var(--accent))); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px color-mix(in oklab, var(--accent) 22%, transparent), 0 8px 18px -10px rgba(255,107,53,.45); } .feature-icon svg{ width:27px; height:27px; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); } .feature-icon img{ width:38px; height:38px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); } .feature-card:hover .feature-icon{ box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent), 0 12px 24px -10px rgba(255,107,53,.6); } /* 3D-Tiefe: beim Tilt heben sich Icon & Text auf verschiedenen Ebenen (echte Parallaxe) */ @media (pointer:fine) and (prefers-reduced-motion:no-preference){ .feature-card{ transform-style:preserve-3d; } .feature-card .feature-icon{ transform:translateZ(34px); } .feature-card h3{ transform:translateZ(20px); } .feature-card p{ transform:translateZ(10px); } } /* ---- Hero ---- Aufbau wie bei allen anderen Sektionen: das Bild liegt auf ::before und blendet zur Unterkante hin komplett aus, die Abdunklung liegt darüber auf ::after. Vorher hing das Bild direkt auf der Sektion und endete deshalb mit einer harten Kante genau auf der Grenze zur nächsten Sektion. */ .hero{ position:relative; overflow:hidden; padding-block:clamp(3rem,8vw,5.5rem); background-color:var(--bg); background-image:url(/assets/img/bg/hero-bg.webp); background-image:image-set(url(/assets/img/bg/hero-bg.avif) type("image/avif"), url(/assets/img/bg/hero-bg.webp) type("image/webp")); background-size:0 0; background-repeat:no-repeat; } .hero::before{ /* das Bild selbst — nach unten hin aufgelöst */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); } .hero::after{ /* dark overlay (Lesbarkeit, LCP=Text) + brand-glow */ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(42% 55% at 78% 20%, rgba(255,107,53,.12), transparent 70%), radial-gradient(38% 50% at 12% 85%, rgba(192,216,144,.10), transparent 70%), linear-gradient(180deg, rgba(11,13,18,.55), rgba(11,13,18,.78)); /* Auch diese Ebene muss unten verschwinden. Die zweite Lichtblende sitzt bei 85 % Höhe und war an der Sektionsgrenze noch deutlich zu sehen — dort riss sie ab und ergab genau den Strich, den das ausgeblendete Bild allein nicht erklärte. Jetzt lösen sich beide Ebenen gemeinsam auf. */ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); } .hero__in{ position:relative; z-index:2; } .hero__title{ margin-top:.6rem; max-width:16ch; } .hero__sub{ margin-top:1.2rem; color:var(--ink-muted); font-size:var(--step-1); } .hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; } /* Zusagen-Laufband: zwei identische Listen nebeneinander, die Spur wandert um genau die Hälfte ihrer Breite — danach steht die Kopie an der Stelle des Originals und der Sprung zurück ist unsichtbar. Endlos, ohne Anfang und ohne Ende. Nur transform, also keine Layout-Arbeit pro Bild. */ .trust-marquee{ position:relative; z-index:2; margin-top:calc(2.2rem + 40px); overflow:hidden; } /* Die weichen Kanten kommen als zwei Verläufe darüber statt als mask-image. Eine Maske zwingt den ganzen Streifen in eine eigene Ebene; die Schrift wird dann einmal gerastert und beim Verschieben um Bruchteile eines Pixels mitgezogen — genau das ergab das Flimmern und die unscharfen Buchstaben. */ .trust-marquee::before, .trust-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:clamp(28px,5vw,90px); z-index:1; pointer-events:none; } .trust-marquee::before{ left:0; background:linear-gradient(90deg, var(--bg), transparent); } .trust-marquee::after{ right:0; background:linear-gradient(270deg, var(--bg), transparent); } /* Zweidimensionale Verschiebung und kein will-change: so rechnet der Browser die Schrift in jedem Bild neu und sie bleibt gestochen scharf. Langsamer läuft sie auch — 72 px in der Sekunde liest sich ruhig mit. */ .trust-marquee__track{ display:flex; width:max-content; animation:trustLauf 96s linear infinite; } .trust-marquee:hover .trust-marquee__track, .trust-marquee:focus-within .trust-marquee__track{ animation-play-state:paused; } @keyframes trustLauf{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .trust-bar{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:nowrap; gap:0; } .trust-bar li{ display:flex; align-items:center; gap:.5rem; padding-inline:1.15rem; font-size:var(--step--1); color:var(--ink-muted); white-space:nowrap; } .trust-bar li::before{ content:"✓"; color:var(--success); font-weight:700; } @media (prefers-reduced-motion:reduce){ .trust-marquee{ overflow-x:auto; } .trust-marquee::before, .trust-marquee::after{ display:none; } .trust-marquee__track{ animation:none; } .trust-marquee__track > .trust-bar[aria-hidden]{ display:none; } } /* ---- Cards уточнения ---- */ .card--featured{ border-color:color-mix(in oklab, var(--accent) 40%, var(--border)); } .card h3{ font-size:var(--step-1); margin-bottom:.5rem; } .card p{ color:var(--ink-muted); font-size:var(--step-0); } .card .preis__amount{ color:var(--ink); } .card .preis__badge{ color:var(--on-accent); } .pakete__sub{ font-family:var(--font-display); font-size:var(--step-2); margin:2.5rem 0 1.2rem; } .pakete__sub:first-of-type{ margin-top:0; } /* ---- Preis-Karten ---- */ .preise{ align-items:stretch; } .preis{ display:flex; flex-direction:column; } .preis--featured{ border-color:var(--accent); box-shadow:var(--shadow-2); position:relative; } /* Badge liegt INNERHALB der Karte (die clip-path-Silhouette würde alles kappen, was oben herausragt). Alle Preiskarten reservieren dieselbe Badge-Zeile, damit Preise und Listen exakt auf einer Linie bleiben. */ .preis{ padding-top:3.6rem; } .preis__badge{ position:absolute; top:1.15rem; left:clamp(1.5rem,2.6vw,2.15rem); background:var(--accent); color:var(--on-accent); font-size:var(--step--1); font-weight:700; letter-spacing:.02em; padding:.32rem .9rem; border-radius:var(--r-pill); white-space:nowrap; } .preis__amount{ font-family:var(--font-display); font-weight:700; font-size:var(--step-4); line-height:1; margin:.4rem 0 .1rem; } .preis__amount span{ font-family:var(--font-body); font-weight:500; font-size:var(--step-0); color:var(--ink-muted); letter-spacing:0; margin-left:.15em; } /* „ab" klein und zurückhaltend vor dem Betrag */ .preis__amount .preis__ab{ font-family:var(--font-body); font-weight:600; font-size:var(--step--1); color:var(--ink-dim); letter-spacing:.02em; margin:0 .1em 0 0; vertical-align:.28em; } .preis__note{ color:var(--ink-dim); font-size:var(--step--1); margin-bottom:1.2rem; } .preis__list{ list-style:none; padding:0; margin:0 0 1.5rem; display:flex; flex-direction:column; gap:.55rem; flex:1; } .preis__list li{ padding-left:1.6rem; position:relative; font-size:var(--step-0); color:var(--ink-muted); } .preis__list li strong{ color:var(--ink); } .preis__list li::before{ content:"✓"; position:absolute; left:0; top:.05em; color:var(--success); font-weight:700; } .btn--wide{ width:100%; } /* Auf sehr breiten Bildschirmen sonst eine über 2 m lange Textzeile. */ .preise__hint{ margin-top:1.6rem; font-size:var(--step-0); color:var(--ink); padding:1rem 1.2rem; background:var(--accent-tint); border-radius:var(--r-md); border:1px solid color-mix(in oklab, var(--accent) 25%, var(--border)); max-width:none; } /* Erklärender Kleintext läuft über die volle Breite — nicht auf Lesespalte gestutzt, sonst steht rechts daneben eine leere Fläche. */ .preise__legal{ margin-top:1rem; font-size:var(--step--1); color:var(--ink-dim); max-width:none; } /* Laufzeit-Hinweis auf jeder Preiskarte: bewusst neutral gehalten (kein Fett, kein Orange). Er muss rechtlich sichtbar direkt beim Preis stehen — ihn hervorzuheben würde den Blick genau auf die Bindung lenken. */ .preis__laufzeit{ margin-top:.9rem; font-size:calc(var(--step--1) * .94); line-height:1.5; color:var(--ink-dim); text-align:center; } /* ---- Referenzen (horizontaler Auto-Scroll-Karussell) ---- */ .ref-scroller{ overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; cursor:grab; /* Fade-Masken an den Rändern für Premium-Look */ /* schmale Kanten in px statt % — vorher fraß der Verlauf die Beschriftung der ersten/letzten Karte an (5 % sind auf breiten Screens ~80 px). */ -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%); } .ref-scroller::-webkit-scrollbar{ display:none; } .ref-scroller.is-grabbing{ cursor:grabbing; } .ref-scroller:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r-lg); } .ref-track{ display:flex; gap:1.2rem; width:max-content; padding:.5rem .25rem 1rem; } .ref-card{ flex:0 0 clamp(280px, 30vw, 360px); display:flex; flex-direction:column; padding:0; overflow:hidden; user-select:none; } .ref-card__img{ display:block; aspect-ratio:2/1; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--border-soft); } .ref-card__img img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform var(--dur) var(--ease); pointer-events:none; } .ref-card:hover .ref-card__img img{ transform:scale(1.05); } .ref-card__body{ display:flex; flex-direction:column; align-items:flex-start; gap:.5rem; padding:clamp(1rem,2.5vw,1.3rem); } .ref-card__body h3{ font-size:var(--step-1); margin:0; } .ref-card__cat{ font-size:var(--step--1); color:var(--ink-dim); margin:0; } .ref-hint{ margin-top:1.2rem; font-size:var(--step--1); color:var(--ink-dim); text-align:center; letter-spacing:.02em; } /* ---- Konversions-Akzent im Fliesstext ---- Ein Pinselstrich, der beim Hereinscrollen von links nach rechts gezogen wird. Bewusst kein Fettdruck: bei vier fetten Wendungen in einem Absatz hebt sich am Ende gar nichts mehr ab. Nur transform, also kein Umbruch und keine Layout-Verschiebung. */ /* Der Strich liegt als Hintergrund auf dem Text, nicht als absolut gesetztes ::after. Nur so stimmt er auch dann, wenn die Wendung über zwei oder drei Zeilen umbricht — box-decoration-break gibt jedem Zeilenstück seinen eigenen Strich. Ein absolut gesetzter Balken hätte bei Umbruch die volle Absatzbreite eingenommen. Innenabstand an einem Inline-Element vergrössert die Zeilenhöhe nicht, also kein Layoutsprung. */ .hl{ color:var(--ink); font-weight:600; padding-bottom:.16em; background-image:linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 32%, transparent)); background-repeat:no-repeat; background-position:0 100%; background-size:0 .15em; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .85s var(--ease-out) .15s; } .hl.is-hl{ background-size:100% .15em; } .hl--lime{ background-image:linear-gradient(90deg, var(--lime), color-mix(in oklab, var(--lime) 32%, transparent)); } @media (prefers-reduced-motion:reduce){ .hl{ background-size:100% .15em; transition:none; } } /* ---- Handlungsaufruf zwischen den Sektionen ---- Zwei Stellen im Seitenverlauf, an denen der Besucher gerade genug weiss, um sich zu melden: nachdem er seine Branche gefunden hat und nachdem der Ablauf klar ist. */ .cta-band{ position:relative; padding-block:clamp(2.6rem,6vw,4rem); } .cta-band__in{ display:grid; grid-template-columns:1.35fr auto; gap:clamp(1.4rem,4vw,3rem); align-items:center; padding:clamp(1.6rem,4vw,2.6rem) clamp(1.4rem,4vw,2.6rem); background:linear-gradient(115deg, color-mix(in oklab, var(--accent) 13%, var(--bg-2)), var(--bg-2) 62%); border:1px solid color-mix(in oklab, var(--accent) 26%, var(--border)); border-radius:var(--r-lg); box-shadow:var(--shadow-2); } @media (max-width:860px){ .cta-band__in{ grid-template-columns:1fr; } } .cta-band__kicker{ font-size:var(--step--1); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--lime); margin-bottom:.5rem; } .cta-band__title{ font-size:var(--step-2); line-height:1.18; margin-bottom:.6rem; text-wrap:balance; } .cta-band__sub{ color:var(--ink-muted); margin:0; max-width:56ch; } .cta-band__actions{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; } @media (max-width:860px){ .cta-band__actions .btn{ flex:1 1 14rem; } } .cta-band__zusatz{ flex-basis:100%; margin:0; font-size:var(--step--1); color:var(--ink-dim); } /* ---- Schnellzugriff in der Daumenzone (nur Handy) ---- Auf dem Desktop gibt es die Schaltfläche dauerhaft im klebenden Kopf; mit der Maus ist oben rechts kein Problem. Einhändig am Telefon dagegen ist das obere Fünftel des Bildschirms die unbequemste Stelle überhaupt, während das untere Drittel ohne Griffwechsel erreichbar ist. Deshalb wandert der Hauptaufruf dort nach unten. */ .quick-cta{ display:none; } @media (max-width:860px){ .quick-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:90; padding:.6rem clamp(.8rem,3vw,1.1rem); padding-bottom:max(.6rem, env(safe-area-inset-bottom)); background:color-mix(in oklab, var(--bg-2) 94%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--border); box-shadow:0 -12px 34px -18px rgba(0,0,0,.9); transform:translateY(115%); visibility:hidden; transition:transform .34s var(--ease-out), visibility 0s linear .34s; } .quick-cta.is-da{ transform:none; visibility:visible; transition:transform .34s var(--ease-out), visibility 0s; } .quick-cta__in{ display:flex; gap:.6rem; align-items:stretch; } /* 52 px — über dem Mindestmass für Tippziele (WCAG 2.2 SC 2.5.8) und bequem mit dem Daumen zu treffen. */ .quick-cta__main{ flex:1 1 auto; min-height:52px; font-size:var(--step-0); } .quick-cta__tel{ flex:0 0 52px; width:52px; min-height:52px; padding:0; background:transparent; border:1px solid var(--border); color:var(--ink); } .quick-cta__tel:hover{ border-color:var(--lime); color:var(--lime); } /* Fussbereich freihalten, damit die Leiste die letzten Zeilen nicht deckt */ .site-footer{ padding-bottom:calc(5rem + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion:reduce){ .quick-cta{ transition:none; } } /* ---- Suchwandel: SEO / AEO / GEO in einfachen Worten ---- Definitionsliste statt Karten: kein Kasten, keine Rahmen — nur eine ruhige Spalte je Begriff. Antwortmaschinen lesen dt/dd sauber als Begriff und Erklärung aus, und der Abschnitt bleibt optisch leicht neben den Karten darüber. */ .suchwandel{ margin-top:clamp(2.4rem,6vw,4rem); } .suchwandel h3{ font-size:var(--step-2); margin-bottom:.7rem; text-wrap:balance; max-width:24ch; } .suchwandel > p{ color:var(--ink-muted); max-width:var(--measure); } .suchwandel__liste{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); margin:clamp(1.6rem,3vw,2.4rem) 0 0; } @media (max-width:860px){ .suchwandel__liste{ grid-template-columns:1fr; gap:1.5rem; } } .suchwandel__liste dt{ font-family:var(--font-display); font-weight:700; font-size:var(--step-1); color:var(--accent); margin-bottom:.45rem; } .suchwandel__liste dt span{ display:block; font-family:inherit; font-weight:600; font-size:var(--step--1); color:var(--ink-muted); letter-spacing:.01em; } .suchwandel__liste dd{ margin:0; color:var(--ink-muted); font-size:var(--step--1); line-height:1.62; } .suchwandel__liste dd a{ color:var(--lime); } /* ---- Ablauf (Zeitleiste: Kreise + verbindende Linie) ---- */ .ablauf{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; list-style:none; padding:0; margin:0; } .ablauf__step{ position:relative; text-align:center; padding:0 .5rem; } .ablauf__dot{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; border:2px solid var(--accent); background:var(--bg-2); color:var(--accent); font-family:var(--font-display); font-weight:700; font-size:var(--step-2); margin-bottom:1.2rem; } /* verbindende Linie zwischen den Kreisen (nur Desktop) */ .ablauf__step:not(:last-child)::after{ content:""; position:absolute; top:30px; z-index:0; left:calc(50% + 34px); width:calc(100% - 68px); height:2px; background:linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 25%, transparent)); } .ablauf__step h3{ font-size:var(--step-1); margin-bottom:.4rem; } .ablauf__step p{ color:var(--ink-muted); font-size:var(--step-0); } .ablauf__note{ margin-top:clamp(1.6rem,3vw,2.4rem); font-size:var(--step--1); color:var(--ink-dim); max-width:none; } @media (max-width:720px){ .ablauf{ grid-template-columns:1fr; gap:0; max-width:32rem; } .ablauf__step{ text-align:left; padding:0 0 2rem 84px; min-height:60px; } .ablauf__dot{ position:absolute; left:0; top:0; margin:0; } .ablauf__step:not(:last-child)::after{ top:60px; left:29px; width:2px; height:calc(100% - 60px); background:linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 25%, transparent)); } .ablauf__step h3{ margin-top:.5rem; } } /* ---- Upsell (наблегната) ---- */ .section--upsell{ position:relative; background-color:transparent; background-image:url(/assets/img/bg/accent-bg.webp); background-image:image-set(url(/assets/img/bg/accent-bg.avif) type("image/avif"), url(/assets/img/bg/accent-bg.webp) type("image/webp")); } .section--upsell::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.34; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } .section--upsell > .container{ position:relative; z-index:1; } .card--upsell{ border-color:color-mix(in oklab, var(--accent) 28%, var(--border)); background:var(--bg); } .upsell-feature{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; margin-top:clamp(2rem,5vw,3.5rem); } @media (min-width:821px){ .upsell-feature--reverse .upsell-feature__media{ order:-1; } } @media (max-width:820px){ .upsell-feature{ grid-template-columns:1fr; } } .upsell-feature__text h3{ font-size:var(--step-2); margin:.3rem 0 .8rem; } .upsell-feature__price{ margin-top:1.2rem; font-size:var(--step-0); color:var(--ink); } .upsell-feature__media img{ display:block; width:100%; height:auto; border-radius:var(--r-md); border:1px solid var(--border); box-shadow:var(--shadow-2); } .upsell-feature__media > picture:first-child img{ margin-bottom:.8rem; } /* Vier Belege in zwei Reihen: erst die beiden Schritte der Buchungsseite, darunter die beiden E-Mails. Die Mail-Aufnahmen sind hochkant — mit gleicher Rasterhöhe und object-fit bleibt die Reihe trotzdem ruhig. */ .upsell-thumbs{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } /* ---- Bildstrecke der Buchungs-Sektion ---- Drei quadratische Kacheln nebeneinander unter dem Textblock. Die Beschriftung liegt IM Bild: darunter gesetzt zog sie die Reihe in die Länge und die drei Kacheln standen unterschiedlich hoch, weil die Texte verschieden lang sind. */ .upsell-galerie{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.4rem); margin-top:clamp(1.6rem,3.5vw,2.6rem); } @media (max-width:820px){ .upsell-galerie{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ .upsell-galerie{ grid-template-columns:1fr; } } .upsell-bild{ margin:0; } .upsell-kachel{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-md); border:1px solid var(--border); } .upsell-kachel img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border:0; border-radius:0; } .upsell-kachel figcaption{ position:absolute; inset:auto 0 0 0; margin:0; padding:clamp(2.2rem,6vw,3rem) clamp(.9rem,2vw,1.15rem) clamp(.9rem,2vw,1.1rem); /* Der Verlauf trägt den Text. Er war zu spät kräftig: die Überschrift begann bei rund einem Drittel der Höhe, dort lag die Deckung erst bei 0,7 — und darunter leuchtete die helle Leistungsliste durch. Jetzt sitzt die Kante höher, sodass ab der Überschrift 0,94 anliegen. Selbst über rein weissem Bild bleibt der Grund damit bei rgb(26,28,33). */ background:linear-gradient(180deg, rgba(11,13,18,0) 0%, rgba(11,13,18,.70) 16%, rgba(11,13,18,.94) 32%, rgba(11,13,18,.985) 100%); font-size:var(--step--1); line-height:1.5; color:var(--ink-2, #C9CCDA); } .upsell-kachel figcaption strong{ display:block; margin-bottom:.25rem; color:#FFFFFF; font-weight:700; font-size:var(--step-0); text-shadow:0 1px 3px rgba(0,0,0,.55); } .upsell-feature__media--portrait{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; align-items:start; } /* ---- Metriken (PageSpeed-USP) ---- */ .metrics{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-top:2.5rem; } @media (max-width:900px){ .metrics{ grid-template-columns:repeat(3,1fr); } } @media (max-width:520px){ .metrics{ grid-template-columns:repeat(2,1fr); } } .metric{ text-align:center; padding:1.3rem .5rem; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-md); } .metric__num{ display:block; font-family:var(--font-display); font-weight:800; font-size:var(--step-3); color:var(--lime); line-height:1; } .metric__lbl{ display:block; margin-top:.45rem; font-size:var(--step--1); color:var(--ink-muted); } .metrics__caption{ margin-top:2.5rem; margin-bottom:.8rem; font-size:var(--step--1); letter-spacing:.02em; color:var(--ink-muted); font-weight:600; } .metrics__caption + .metrics{ margin-top:0; } .metrics__note{ margin-top:1rem; font-size:var(--step--1); color:var(--ink-dim); max-width:none; } /* ---- Termin (vor Ort beim Kunden) ---- Buchungsfeld wird auf die Höhe der linken Spalte gestreckt: oben auf Höhe des Einleitungstexts, unten auf Höhe von Schritt 5 — nicht mehr nach eigenem Ermessen hoch/niedrig hängend. */ .termin-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:stretch; } @media (max-width:900px){ .termin-grid{ grid-template-columns:1fr; } } /* Auf dem Handy nutzt der Buchungsrahmen die volle Bildschirmbreite. Innerhalb des Innenabstands blieben nur rund 333 px übrig — Kalender und Uhrzeiten standen dann direkt am Rand. */ @media (max-width:640px){ .termin-embed{ margin-inline:calc(var(--pad-x, 1.25rem) * -1); border-inline:0; border-radius:0; } } /* Der Text steht mittig zum Buchungsfenster daneben, statt oben zu beginnen und unten eine leere Fläche zu lassen. */ .termin-info{ display:flex; flex-direction:column; justify-content:center; } /* Überschrift sitzt in der linken Spalte, damit das Buchungsfenster rechts schon ganz oben beginnt — auf Höhe der Rubrik, nicht erst unter der Überschrift. */ .termin-info > .section-head{ margin-bottom:1.1rem; } .termin-info > .measure{ margin-bottom:40px; } .termin-info > .termin-ablauf:last-child{ margin-bottom:0; } .termin-list{ list-style:none; padding:0; margin:0 0 1.4rem; display:flex; flex-direction:column; gap:.85rem; } .termin-list li{ padding-left:1.9rem; position:relative; color:var(--ink-muted); font-size:var(--step-0); } .termin-list li::before{ content:""; position:absolute; left:0; top:.45em; width:11px; height:11px; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px color-mix(in oklab, var(--success) 18%, transparent); } /* Ablauf der Terminbuchung — nummerierte Schritte mit verbindender Linie */ .termin-ablauf{ list-style:none; counter-reset:tstep; padding:0; margin:0 0 1.6rem; } .termin-ablauf li{ counter-increment:tstep; position:relative; padding:0 0 1.5rem 3.2rem; color:var(--ink-muted); font-size:var(--step-0); } .termin-ablauf li:last-child{ padding-bottom:0; } .termin-ablauf li::before{ content:counter(tstep); position:absolute; left:0; top:-.1em; width:2.1rem; height:2.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--accent); background:var(--bg-2); color:var(--accent); font-family:var(--font-display); font-weight:700; font-size:var(--step--1); } /* Linie zum nächsten Schritt */ .termin-ablauf li:not(:last-child)::after{ content:""; position:absolute; left:calc(1.05rem - 1px); top:2.1rem; bottom:.35rem; width:2px; background:linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 22%, transparent)); } .termin-ablauf strong{ display:block; color:var(--ink); font-size:var(--step-0); margin-bottom:.2rem; } .termin-list li strong{ color:var(--ink); } .termin-note{ margin-top:1.6rem; font-size:var(--step--1); color:var(--ink-dim); max-width:none; } .termin-embed{ background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-2); } /* Kein Scrollen: der Rahmen bekommt per JS exakt die Höhe seines Inhalts, jeder Schritt passt vollständig hinein. */ .termin-embed{ position:relative; align-self:start; } .termin-embed__inner{ display:flex; flex-direction:column; } .termin-embed iframe{ display:block; width:100%; height:640px; border:0; background:#fff; } .termin-embed__fallback{ display:flex; flex-direction:column; justify-content:center; } .termin-hint{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin:0; padding:.7rem 1rem; background:color-mix(in oklab, var(--accent) 12%, var(--bg-2)); border-bottom:1px solid color-mix(in oklab, var(--accent) 25%, var(--border)); color:var(--ink); font-size:var(--step--1); font-weight:600; letter-spacing:.01em; transition:opacity .3s var(--ease), height .3s var(--ease), padding .3s var(--ease); } .termin-hint svg{ flex:0 0 auto; color:var(--accent); animation:hintNudge 2.2s var(--ease-out) infinite; } @keyframes hintNudge{ 0%,60%,100%{ transform:translateY(0); } 72%{ transform:translateY(3px); } 84%{ transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .termin-hint svg{ animation:none; } } .termin-embed__hint{ font-size:var(--step--1); color:var(--ink-dim); } .termin-embed__fallback{ padding:clamp(2rem,5vw,3.5rem); text-align:center; } .termin-embed__fallback strong{ font-size:var(--step-1); } .termin-embed__fallback p{ margin-bottom:.8rem; } .termin-embed__cta{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:1.6rem; } /* ---- Kontakt (Formular + direkte Kanäle) ---- */ #kontakt{ position:relative; background-color:transparent; background-image:url(/assets/img/bg/waves-bg.webp); background-image:image-set(url(/assets/img/bg/waves-bg.avif) type("image/avif"), url(/assets/img/bg/waves-bg.webp) type("image/webp")); } #kontakt::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.34; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, #000 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, #000 100%); } #kontakt > .container{ position:relative; z-index:1; } .kontakt-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; } .kontakt-grid > *{ min-width:0; } @media (max-width:820px){ .kontakt-grid{ grid-template-columns:1fr; } } .kontakt-form{ display:flex; flex-direction:column; gap:1rem; min-width:0; } .field{ display:flex; flex-direction:column; gap:.4rem; } .field label{ font-size:var(--step--1); font-weight:500; color:var(--ink-muted); } .field__opt{ color:var(--ink-dim); font-weight:400; } .field input,.field textarea{ width:100%; max-width:100%; min-width:0; background:var(--bg); color:var(--ink); border:1px solid var(--border); border-radius:var(--r-md); padding:.85rem 1rem; font-size:var(--step-0); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field input::placeholder,.field textarea::placeholder{ color:var(--ink-dim); } .field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); } .field textarea{ resize:vertical; min-height:120px; } .field--consent{ flex-direction:row; align-items:flex-start; gap:.7rem; margin-top:.2rem; } .field--consent input{ width:1.2rem; height:1.2rem; margin-top:.15rem; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; } /* Nur das Kästchen ist klickbar — nicht der ganze Text (das ist eine eigene HTML-Regel: ein