:root{ --bg:#ffffff; /* page background (white) */ --panel:#ffffff; /* default section bg */ --panel-alt:#fafafb; /* light zebra sections */ --text:#0f172a; /* primary text */ --muted:#6b7280; /* secondary text */ --accent:#0ea5a6; /* CTA accent (teal) */ --border:#e6e8eb; /* subtle light border */ --line: var(--border); --radius:12px; --gap:clamp(16px, 2.5vw, 28px); --container:1100px; --ring: 0px; /* default for JS-driven inner ring */ --outer: 0px; /* default for JS-driven outer glow */ /* global für Hero-Waves (zuvor nur in .card--trust gesetzt) */ --tt-violet: #A78BFA; /* Lavender */ --tt-blue: #93C5FD; /* Ice Blue */ --spiral-size: 1.5; /* 1.00 = Standard | 1.20 = größer | 0.85 = kleiner */ } :root{ color-scheme: dark light; } html{ background:#0B1220; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; background:transparent; /* <— wichtig */ color:var(--text); font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; line-height:1.5; } /* Utilities */ .container{max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px, 4vw, 28px)} .section{ padding:clamp(48px, 8vw, 96px) 0; background:var(--panel); } .section--alt{background:var(--panel-alt)} .section--highlight{background:linear-gradient(180deg, #ffffff, #f6f7fb)} .h1{font-size:clamp(28px, 4.2vw, 48px); line-height:1.2; margin:0 0 12px} .h2{font-size:clamp(22px, 3vw, 32px); line-height:1.25; margin:0 0 12px} .lead{font-size:clamp(16px, 2.2vw, 20px); color:var(--muted); margin:0 0 16px} .muted{color:var(--muted)} .center{text-align:center} /* Topbar */ .topbar{position:sticky; top:0; z-index:50; background:#ffffff; border-bottom:1px solid var(--border)} .topbar__inner{display:flex; gap:12px; align-items:center; justify-content:space-between; padding-block:10px} .topbar__link{color:var(--text); text-decoration:none} .dot{opacity:.5; margin-inline:8px; color:var(--muted)} /* Header */ .site-header{ backdrop-filter: saturate(180%) blur(6px); background: rgba(255,255,255,.75); border-bottom: 1px solid var(--border); } /* 3-Spalten Layout: Logo | Nav (mittig) | CTA */ .header__inner{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } /* Logo */ .logo{ font-weight: 700; letter-spacing: .02em; text-decoration: none; color: var(--text); } /* Nav */ .nav{ margin-left: auto; position: relative; /* neu: Dropdown hängt jetzt an der Nav */ } .nav__toggle{ display: none; /* bleibt Desktop-verborgen */ background: #ffffff; border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; /* klare Touch-Fläche */ line-height: 1; /* Desktop aus */ align-items: center; justify-content: center; color: var(--text); padding: 0; /* kein Innenpadding nötig */ } .nav__list{ display: flex; align-items: center; gap: 22px; /* gleichmäßiger Abstand */ list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; /* keine hässlichen Zeilenumbrüche */ } .nav__list li{ display: block; } .nav__list a{ display: block; padding: 10px 8px; /* größere Klickfläche */ white-space: nowrap; /* „Website Design“ bleibt auf einer Zeile */ color: var(--text); text-decoration: none; opacity: .9; border-radius: 8px; } .nav__list a:hover{ opacity: 1; background: rgba(14,165,166,.08); /* dezentes Hover */ } /* CTA rechts etwas kompakter */ .btn--soft{ padding: 10px 14px; } /* Breakpoint: bevor Mobile-Menü greift, etwas enger setzen */ @media (max-width: 1200px){ .nav__list{ gap: 14px; } .btn--soft{ padding: 8px 12px; } } /* Mobile-Menü: wie gehabt */ @media (max-width: 960px){ /* Header Layout: Zeile 1 = Logo | Burger, Zeile 2 = CTA full-width */ .header__inner{ display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo nav" "cta cta"; align-items: center; gap: 12px; } .logo{ grid-area: logo; } .nav{ grid-area: nav; justify-self: end; } .header__inner > .btn{ grid-area: cta; justify-self: stretch; width: 100%; text-align: center; padding: 12px 14px; border-radius: 12px; } /* Burger sichtbar */ .nav__toggle{ display: flex; } /* Dropdown: an die Nav „angedockt“, schön breit & mit Schatten */ .nav__list{ display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; flex-direction: column; width: min(92vw, 320px); gap: 6px; box-shadow: 0 12px 26px rgba(2,6,23,.12); z-index: 60; } .nav__list.open{ display: flex; } .nav__list a{ padding: 12px; } /* Grids wie gehabt einkolumnig */ .hero__grid, .about__grid, .gallery{ grid-template-columns: 1fr; } .cards--3{ grid-template-columns: 1fr; } .cards--4{ grid-template-columns: 1fr 1fr; } .site-header{ top: 36px; } /* unter der Topbar */ } /* Buttons */ .btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--accent); color:var(--text); text-decoration:none; background:#ffffff} .btn--soft{border-color:var(--border); background:#ffffff} .btn--ghost{border-color:var(--border); background:#ffffff} /* Hero */ .hero{padding-top:clamp(28px, 6vw, 48px)} .hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:center} .hero__media .ph{min-height:260px} /* Hero: große Schlagzeilen-Liste */ .h1-list{ /* wie eine H1, nur als Liste */ font-size: clamp(28px, 4.4vw, 40px); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 14px 0; /* Abstand zur Lead */ padding-left: 1.15em; /* Platz für die Bullet-Dots */ list-style: disc; color: var(--text); } .h1-list li{ margin: 0 0 6px 0; } /* damit "Buchungen statt Leerlauf" nicht umbrechen kann */ .nowrap{ white-space: nowrap; } /* Badges bewusst kleiner halten als die Schlagzeilen */ .badges{ margin: 14px 0 0; color: var(--muted); font-size: 0.95rem; /* kleiner als Standard-Text */ } .badges li{ margin: 0 0 6px; } /* Cards */ .cards{display:grid; gap:var(--gap); overflow: visible;} .cards--3{grid-template-columns:repeat(3,1fr)} .cards--4{grid-template-columns:repeat(4,1fr)} .card{background:#ffffff; border:1px dashed var(--border); border-radius:var(--radius); padding:18px} .card h3{margin:0 0 8px} /* Steps */ .steps{display:grid; gap:10px; padding:0; margin:0 0 12px} .steps li{list-style:none; background:#ffffff; border:1px dashed var(--border); border-radius:var(--radius); padding:14px 16px} /* Gallery */ .gallery{display:grid; grid-template-columns:1fr 1fr; gap:var(--gap)} /* About */ .about__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--gap); align-items:center} /* Footer */ .site-footer{background:#f7f8fa; border-top:1px solid var(--border)} .footer__grid{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); padding-block:22px} .footer__title{margin:0 0 6px} .footer__links{list-style:none; display:grid; gap:6px; padding:0; margin:0} .footer__links a{color:var(--text); text-decoration:none; opacity:.85} .footer__links a:hover{opacity:1} /* Platzhalter (visuelle Boxen statt Bilder) */ .ph{display:grid; place-items:center; min-height:180px; border:1px dashed var(--border); border-radius:var(--radius); color:#98a2b3; font-size:14px; background:#ffffff} .ph--collage{min-height:320px} /* FAQ */ .faq{background:#ffffff; border:1px dashed var(--border); border-radius:var(--radius); padding:12px 14px; margin:10px 0} .faq>summary{cursor:pointer} /* Responsive */ @media (max-width:960px){ .nav__toggle{display:inline-block} .nav__list{display:none; position:absolute; right:16px; top:100%; background:#ffffff; border:1px solid var(--border); border-radius:10px; padding:10px; flex-direction:column; width:min(90vw, 320px)} .nav__list.open{display:flex} .hero__grid, .about__grid, .gallery{grid-template-columns:1fr} .cards--3{grid-template-columns:1fr} .cards--4{grid-template-columns:1fr 1fr} .site-header{top:36px} } /* Motion respect & Focus */ @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} } .nav__toggle:focus-visible, .nav__list a:focus-visible, .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; } /* === DENSITY TUNING: mehr Inhalt sichtbar, weniger Weißraum === */ /* 1) Mehr Inhaltbreite + weniger Seiten-Padding */ :root{ --container: 1280px; } /* vorher 1100px */ .container{ padding-inline: clamp(10px, 1.8vw, 18px); } /* 2) Sections generell dichter – Hero bleibt großzügig */ .section{ padding-block: clamp(32px, 5vw, 56px); } /* vorher 48–96 */ .hero.section{ padding-block: clamp(48px, 7vw, 90px); } /* Hero „groß“ */ /* 3) Überschriften/Intro etwas kompakter */ .h2{ margin: 0 0 6px; } .muted{ margin: 0 0 12px; } /* <— wichtig: kein Zeichen nach dem ; */ /* 4) Karten & Grids dichter */ .cards{ gap: clamp(10px, 1.6vw, 18px); } .card{ padding: 12px 14px; } /* vorher 18px */ /* 5) Steps etwas knapper */ .steps{ gap: 8px; } .steps li{ padding: 10px 14px; } /* 6) Galerie/Platzhalter leicht straffen */ .gallery{ gap: clamp(12px, 2vw, 20px); } .ph{ min-height: 160px; } /* Hero linksbündig beibehalten (falls gewünscht) */ .hero .container{ margin-inline: auto; } @media (min-width: 961px){ .hero__grid{ grid-template-columns: minmax(520px, 700px) 1fr; } } .card--with-lottie{ position: relative; --lottie-size: 60px; /* dezenter Desktop-Sticker */ padding-right: calc(var(--lottie-size) + 18px); /* Platz für Icon -> kein Overlay */ } /* reserviert rechts nur im oberen Bereich Platz (bei Icon-Höhe) */ .card__lottie{ position: absolute; top: 12px; right: 12px; width: var(--lottie-size); height: var(--lottie-size); pointer-events: none; opacity: .9; } @media (max-width: 960px){ .card--with-lottie{ --lottie-size: 60px; } /* vorher 36/80/96 Konflikt */ } /* ===== Global: VIOLET × ICE-BLUE Border (animated) for all .card--trust ===== */ .card--trust{ /* Palette + Animationswinkel (JS dreht nur --tt-angle) */ --tt-violet: #A78BFA; /* Lavender */ --tt-blue: #93C5FD; /* Ice Blue */ --tt-angle: 0deg; /* animierter Gradient-Rand ohne Masking – IMMER sichtbar */ position: relative; border-radius: 16px; border: 2px solid transparent; background: /* Innenfläche */ linear-gradient(#FFFFFF, #FFFFFF) padding-box, /* äußerer Ring (rotierend via --tt-angle) */ conic-gradient(from var(--tt-angle), var(--tt-violet), var(--tt-blue), var(--tt-violet)) border-box; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 0 0 var(--outer, 0px) color-mix(in srgb, var(--tt-violet) 12%, var(--tt-blue) 10%); transform-origin: center; will-change: transform, box-shadow; } /* Innerer Ring – JS blendet ihn ein/aus (Pop-Animation) */ .card--trust::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 0 0 var(--ring, 0px) color-mix(in srgb, var(--tt-violet) 55%, var(--tt-blue) 25%); transition: box-shadow .65s cubic-bezier(0.22,1,0.36,1); } /* Typo */ .card--trust h3{ margin:0 0 .4rem; font-weight:800; } .card--trust p{ margin:0; } /* hovered card floats above neighbors */ .card--trust{ z-index: 0; position: relative; } .card--trust:is(:hover, :focus-within), .card--trust:has(:focus-visible){ z-index: 10; } /* Reduced motion Fallback */ @media (prefers-reduced-motion: reduce){ .card--trust{ transition: transform .55s cubic-bezier(0.22,1,0.36,1), box-shadow .55s ease; } .card--trust:hover{ transform: scale(1.06); box-shadow: 0 12px 24px rgba(15,23,42,.12), 0 0 0 10px color-mix(in srgb, var(--tt-violet) 12%, var(--tt-blue) 10%); } .card--trust:hover::after{ box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--tt-violet) 55%, var(--tt-blue) 25%); } } /* === HERO LOTTIE (rechts neben der Copy) === */ .hero__media{ display: flex; align-items: center; justify-content: center; } .hero__lottie{ width: clamp(280px, 42vw, 520px); aspect-ratio: 16/10; /* hält Form, SVG füllt */ max-height: 380px; border-radius: 16px; background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0.05)); box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.08); overflow: hidden; } .hero__lottie > svg{ display: block; width: 100%; height: 100%; } @media (max-width: 960px){ .hero__lottie{ margin-top: 16px; width: min(92vw, 560px); max-height: none; } } /* Right-align heading in #why-visible */ #why-visible .h2{ text-align:center; } #why-visible .muted{ text-align:center; } @media (max-width:960px){ #why-visible .h2, #why-visible .muted{ text-align:left; } } /* Right-align heading in #what-we-do */ #what-we-do .h2{ text-align: center; } #what-we-do .muted{ text-align:center; } @media (max-width:960px){ #what-we-do .h2, #what-we-do .muted{ text-align:left; } } /* === Two-column sections with vertical-stacked cards (centered text) === */ /* 1) "Why visible" – text left (vertically centered), 3 cards stacked on the right */ #why-visible .container{ display: grid; grid-template-columns: 1.1fr minmax(300px, 440px); grid-template-rows: 1fr auto auto 1fr; /* center the two text lines as a group */ align-items: center; gap: clamp(16px, 3vw, 28px); } #why-visible .h2{ grid-column: 1; grid-row: 2; } #why-visible .muted{ grid-column: 1; grid-row: 3; } #why-visible .cards{ grid-column: 2; grid-row: 1 / -1; /* span full height next to text */ display: grid; grid-template-columns: 1fr; /* vertical stack */ gap: clamp(10px, 1.6vw, 16px); } /* ===== WHAT WE DO – Titel oben, darunter Bild, darunter Subline; links 2×2 Karten ===== */ /* Grid-Areas zuweisen */ #what-we-do .cards{ grid-area: cards; } #what-we-do .h2{ grid-area: title; } #what-we-do .process-gallery{ grid-area: image; } #what-we-do .muted{ grid-area: subline; } /* Linke Seite: 2×2 Quadrate */ #what-we-do .cards{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.6vw, 16px); } #what-we-do .cards .card{ aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center; /* Text vertikal zentriert */ align-items: flex-start; /* Text linksbündig */ } /* Bildleiste: 3× Portrait (9:16) – ersetzt den alten .process-hero-Frame */ .process-gallery{ margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 16px); align-items: end; } .process-item{ display: flex; flex-direction: column; gap: 6px; } .process-item img, .process-item .ph{ display: block; width: 100%; aspect-ratio: 9 / 16; /* Hochformat 9:16 */ object-fit: cover; border-radius: 18px; box-shadow: 0 10px 26px rgba(15,23,42,.06); } .process-gallery img.alpha-hack{ mix-blend-mode: multiply; } .process-gallery img.is-alpha{ object-fit: contain; /* zeigt die volle Illustration */ background: transparent; } .process-caption{ text-align: center; font-weight: 600; font-size: .95rem; } /* Optionaler Helfer für echte Platzhalterboxen (falls du kein nutzen willst) */ .ph--portrait{ aspect-ratio: 9 / 16; } /* Mobile: zurück auf Einspalter im Fluss */ @media (max-width: 960px){ #what-we-do .container{ display: block; } /* === #what-we-do: 2×2-Karten links vertikal mittig zur rechten Spalte === */ #what-we-do .cards{ place-self: center stretch; /* = align-self:center + justify-self:stretch */ margin-block: 0; /* keine zusätzlichen Außenabstände */ } @media (max-width: 560px){ #what-we-do .cards{ grid-template-columns: 1fr; } /* sehr schmal: 1 Spalte */ #what-we-do .cards .card{ aspect-ratio: auto; } } } #what-we-do .container{ display: grid; grid-template-columns: minmax(300px, 460px) 1.1fr; grid-template-areas: "cards title" "cards subline" "cards image"; align-items: start; /* kompaktere Abstände: getrennte Spalten-/Zeilen-Gaps */ column-gap: clamp(14px, 2.5vw, 24px); row-gap: clamp(6px, 1.2vw, 12px); } #what-we-do .h2{ grid-area: title; margin: 0; /* kein Extra-Abstand */ } #what-we-do .muted{ grid-area: subline; margin: 2px 0 0; /* minimaler Abstand unter dem Titel */ } #what-we-do .process-gallery{ grid-area: image; margin: 8px 0 0; } /* ===== Hero CTA im .card--trust Look ===== */ .hero__copy .card--cta{ /* Layout & Größe */ display: inline-flex; align-items: center; justify-content: center; margin-top: 8px; padding: 14px 18px; min-height: 56px; min-width: clamp(220px, 42vw, 320px); /* Typo & Interaktion */ font-weight: 700; text-decoration: none; color: var(--text); cursor: pointer; /* Die Border/Glow/Pop kommen von .card--trust (bereits vorhanden) */ } /* A11y-Focus klar sichtbar (zusätzlich zum JS-Ring) */ .hero__copy .card--cta:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 16px; } /* Hover: keine Unterstreichung */ .hero__copy .card--cta:hover{ text-decoration: none; } /* ===== CTA im Karten-Look – universell nutzbar ===== */ .card--cta{ display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; min-height: 56px; min-width: clamp(220px, 40vw, 360px); font-weight: 700; text-decoration: none; color: var(--text); cursor: pointer; /* Hover-/Glow/Pop kommt von .card--trust */ } .card--cta:hover{ text-decoration: none; } .card--cta:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 16px; } /* Platzierung im Audit-Block */ #audit .audit__cta{ margin-top: 8px; } /* Mobile: wie dein alter Button – volle Breite in Zeile 2 */ @media (max-width: 960px){ .header__inner > .header__cta{ grid-area: cta; justify-self: stretch; width: 100%; text-align: center; padding: 12px 14px; border-radius: 12px; } } /* === CTAs kompakter: weniger Padding/Min-Höhe === */ /* überall, wo .card--cta benutzt wird (Hero, Audit, etc.) */ .card--cta{ padding: 10px 14px; /* vorher 14px 18px */ min-height: 44px; /* vorher 56px */ min-width: clamp(180px, 28vw, 260px); /* schlanker */ font-size: 0.95rem; } /* Hero-spezifisch: noch etwas näher an der Copy */ .hero__copy .card--cta{ margin-top: 6px; /* vorher 8px */ } /* Header-CTA („Kurz-Check“) extra kompakt */ .header__cta{ padding: 8px 12px; /* vorher 10px 14px */ min-height: 36px; /* vorher 42px */ font-size: 0.95rem; border-radius: 12px; /* etwas straffer */ } /* === CTA kompakter + Anti-Clip für Header-Glow === */ /* Header über der Topbar layern, damit der Glow nicht „abgeschnitten“ wirkt */ .site-header{ z-index: 60; /* Topbar hat 50 – so darf der Glow drüber zeichnen */ overflow: visible; /* sicherheitshalber */ } .header__inner{ overflow: visible; } /* Globale CTA-Grundwerte schlanker */ .card--cta{ padding: 8px 12px; /* vorher 10–14+ */ min-height: 38px; /* vorher 44–56 */ min-width: clamp(160px, 24vw, 220px); font-size: 0.93rem; } /* Hero-CTA noch dichter an der Copy */ .hero__copy .card--cta{ margin-top: 4px; } /* Wenn der Glow über Nachbarn „liegen“ soll */ .card--trust:is(:hover, :focus-within), .card--trust:has(:focus-visible){ z-index: 100; /* stärker als 10, bleibt über allem im Header */ } /* ===== Mini-Landingpage: Audit ===== */ .auditlp{ max-width: 860px; } .auditlp__head{ margin-bottom: 12px; } .card--form{ padding: clamp(16px, 2.2vw, 22px); } .form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 16px); } .form-grid .full{ grid-column: 1 / -1; } .field{ display: flex; flex-direction: column; gap: 6px; } .field label{ font-weight: 600; } .input{ border-radius: 14px; border: 1px solid var(--line, #e6e8ef); background: #fff; padding: 12px 14px; font: inherit; color: inherit; } /* Submit-Zeile */ .auditlp__submit{ display: flex; align-items: center; gap: 12px; margin-top: 10px; } .tiny{ font-size: .85rem; } .small{ font-size: .95rem; } @media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } } /* ==== Audit-LP: Hover/Pop auf der großen Karte komplett deaktivieren ==== */ /* Nur der Submit-Button (.card--cta) soll Effekte haben */ .card--form, .card--form:hover, .card--form:focus, .card--form:focus-within{ transform: none !important; /* kill WAAPI-Scale */ box-shadow: none !important; /* kein zusätzlicher Glow */ --ring: 0 !important; /* Variablen für Glow neutralisieren */ --outer: 0 !important; cursor: default; } /* Sicherheit: auch direkte Kinder der Form-Karte nicht „anfassen“ */ .card--form > *{ transform: none !important; box-shadow: none !important; } /* Der Button behält seine Effekte (nichts ändern) */ .card--form .card--cta{ cursor: pointer; } /* Inputs & Textareas im gleichen Look */ .input, .textarea{ border-radius: 14px; border: 1px solid var(--line, #e6e8ef); background: #fff; padding: 12px 14px; font: inherit; color: inherit; } .textarea{ resize: vertical; min-height: 120px; } /* Kleines Label unter dem Telefonfeld enger setzen */ .input--numeric + .tiny{ margin-top: 4px; display: inline-block; } /* === MOBILE: Quote in den Header verlegen & Topbar-Kontakte ordnen (<=960px) === */ /* Desktop-Sicherheit: standardmäßig unsichtbar */ .header__quote{ display: none; } @media (max-width: 960px){ /* Topbar: nur Kontakte, mittig, ggf. Umbruch */ .topbar__right{ display: none; } /* Hinweis wandert in Header */ .topbar__inner{ justify-content: center; } .topbar__left{ display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; /* 2. Zeile erlaubt */ } .topbar .dot{ margin-inline: 6px; } /* Header: Zeile 1 = logo | note | nav / Zeile 2 = CTA */ .site-header .header__inner{ grid-template-columns: auto 1fr auto; grid-template-areas: "logo note nav" "cta cta cta"; align-items: center; gap: 10px; } .logo{ grid-area: logo; } .nav{ grid-area: nav; justify-self: end; } .header__quote{ grid-area: note; display: block; /* nur mobil sichtbar */ font-size: .9rem; color: var(--muted); text-align: center; white-space: nowrap; /* bleibt einzeilig */ } } /* MOBILE: Topbar "Mail"-Label fix + kompaktere Abstände, schönes Popup (<=960px) */ @media (max-width: 960px){ /* --- Topbar: eine Zeile, kompakte Punkte, "Mail" ohne Restbreite --- */ .topbar__inner{ justify-content: center; } .topbar__left{ display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; } .topbar .dot{ margin-inline: 4px; } /* Kollabiere jeden mailto-Link visuell auf "Mail" (SR behält vollen Text) */ .topbar__left a[href^="mailto:"]{ position: relative; color: transparent; font-size: 0; /* nimmt Breite raus */ } .topbar__left a[href^="mailto:"]::after{ content: "Mail"; font-size: 1rem; line-height: 1; color: var(--text); position: relative; } /* --- Mobile-Nav: runder, typografisch kräftiger, sanftes Pop-In --- */ .nav__list{ border-radius: 16px; padding: 12px; width: min(92vw, 340px); gap: 8px; box-shadow: 0 14px 38px rgba(2,6,23,.16); background: #fff; -webkit-font-smoothing: antialiased; } .nav__list a{ padding: 14px 16px; border-radius: 12px; font-weight: 600; /* bessere Lesbarkeit */ letter-spacing: .005em; } .nav__list a:active{ background: rgba(2,6,23,.04); transform: scale(.995); } /* Pop-In Animation beim Öffnen */ .nav__list.open{ animation: nav-pop .18s cubic-bezier(.2,.7,.3,1); } @keyframes nav-pop{ from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Scrim ohne Markup via :has(); klickbar (per JS outside-click) */ .nav:has(.nav__list.open)::before{ content:""; position: fixed; inset: 0; background: color-mix(in srgb, #000 22%, transparent); backdrop-filter: blur(1.5px); z-index: 55; /* unter dem Dropdown (z-index:60) */ animation: scrim-fade .12s ease; } @keyframes scrim-fade{ from{opacity:0} to{opacity:1} } /* Motion-Respekt */ @media (prefers-reduced-motion: reduce){ .nav__list.open{ animation: none; } .nav:has(.nav__list.open)::before{ animation: none; } } } /* === MOBILE: full-page scrim + proper stacking + header auto-hide (<=960px) === */ @media (max-width: 960px){ /* — A) Kontakte kompakt + "Mail" ohne Restbreite — */ .topbar__inner{ justify-content: center; } .topbar__left{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; } .topbar .dot{ margin-inline:4px; } .topbar__left a[href^="mailto:"]{ position:relative; color:transparent; font-size:0; } .topbar__left a[href^="mailto:"]::after{ content:"Mail"; font-size:1rem; line-height:1; color:var(--text); } /* — B) Alte pseudo-Scrims sicher deaktivieren — */ .nav:has(.nav__list.open)::before, body.menu-open::before{ content:none !important; } /* — C) Full-page Scrim als eigenes Element (#scrim) — */ body.menu-open{ overflow:hidden; } #scrim{ position:fixed; inset:0; background: color-mix(in srgb, #000 22%, transparent); backdrop-filter: blur(1.5px); z-index: 900; /* unter dem Menü */ opacity:1; transition:opacity .12s ease; } #scrim.hidden{ opacity:0; pointer-events:none; } /* — D) Menü über Scrim: Header temporär nach oben layern — */ body.menu-open .site-header{ z-index: 1200; } /* über #scrim (900) */ .nav{ position:relative; z-index: 1300; } /* nur mobil erhöhen */ .nav__list{ position:absolute; z-index: 1310; } /* Popup oberste Ebene */ .nav__list.open{ border-radius:16px; padding:12px; gap:8px; box-shadow:0 14px 38px rgba(2,6,23,.16); animation: nav-pop .18s cubic-bezier(.2,.7,.3,1); } @keyframes nav-pop{ from{opacity:0; transform:translateY(-4px) scale(.98)} to{opacity:1; transform:translateY(0) scale(1)} } /* Sichtbar, sobald minimal nach oben gescrollt wird */ body.scroll-up .topbar, body.scroll-up .site-header{ transform: translateY(0); } @media (prefers-reduced-motion: reduce){ .topbar, .site-header{ transition:none; } } } /* MOBILE: #why-visible als Einspalter – Text oben, Karten darunter (<=960px) */ @media (max-width: 960px){ #why-visible .container{ display: block; /* 2-Spalten-Grid deaktivieren */ } #why-visible .cards{ grid-template-columns: 1fr !important; /* sicher 1 Spalte */ grid-row: auto; /* evtl. Desktop-Span aufheben */ grid-column: auto; margin-top: clamp(10px, 2vw, 16px); /* knapper Abstand unter dem Intro */ } } /* === MOBILE: #what-we-do Reihenfolge fix (<= 960px) title -> subline -> image -> cards; Karten als 2×2 Einfügen: am Dateiende, nach den bestehenden Regeln */ @media (max-width: 960px){ #what-we-do .container{ display: grid; /* überschreibt evtl. 'display:block' */ grid-template-columns: 1fr; /* Einspalter */ grid-template-areas: "title" "subline" "image" "cards"; row-gap: 10px; } /* Abstände minimal, aber klar */ #what-we-do .h2{ margin: 0; } /* kein Extra-Abstand */ #what-we-do .muted{ margin: 2px 0 0; } /* dicht unter dem Titel */ #what-we-do .process-gallery{ grid-area: image; margin: 8px 0 0; } /* Karten mobil als 2×2 behalten */ #what-we-do .cards{ grid-template-columns: 1fr 1fr; /* 2 Spalten = 2×2 */ } } /* Sehr schmale Geräte: Karten dürfen einspaltig werden */ @media (max-width: 380px){ #what-we-do .cards{ grid-template-columns: 1fr; } #what-we-do .cards .card{ aspect-ratio: auto; } /* Text nicht gequetscht */ } /* ---------- THEME: GLACIER (Cool Blue) ------------------------------------ Farbcodes: Base Top #F7FBFF Base Bottom #EEF8FF Spot Cyan #E6F7FF Spot Peri #E5EDFF ---------------------------------------------------------------------------- */ body.theme-glacier{ background: linear-gradient(180deg, #F7FBFF 0%, #EEF8FF 100%) !important; } body.theme-glacier::before, body.theme-glacier::after{ content:""; position: fixed; pointer-events:none; z-index:-1; filter: blur(6px); } body.theme-glacier::before{ width: clamp(820px, 72vw, 1250px); height: clamp(720px, 62vw, 1020px); right: -18vw; top: -16vh; background: radial-gradient(60% 60% at 50% 50%, rgba(229,237,255,0.90) 0%, rgba(229,237,255,0.00) 72%); } body.theme-glacier::after{ width: clamp(900px, 75vw, 1300px); height: clamp(720px, 62vw, 1020px); left: -22vw; bottom: -18vh; background: radial-gradient(58% 58% at 42% 60%, rgba(230,247,255,0.85) 0%, rgba(230,247,255,0.00) 72%), radial-gradient(40% 40% at 78% 22%, rgba(229,237,255,0.55) 0%, rgba(229,237,255,0.00) 76%); } /* Optional: Footer leicht abheben, ohne Bruch */ .site-footer{ background: color-mix(in srgb, #FFFFFF 80%, transparent); } /* ======================================================================= THEMED HEADER + TOPBAR (für theme-aurora / theme-dawn / theme-glacier) – stickt an -Klasse, keine HTML-Änderungen nötig ======================================================================= */ /* Gemeinsame Regeln für alle Themes: leichter Frost/Blur + zarte Kante */ body[class*="theme-"] .topbar, body[class*="theme-"] .site-header{ background: var(--header-bg, rgba(255,255,255,.75)); border-bottom: 1px solid var(--header-border, var(--border)); backdrop-filter: saturate(180%) blur(8px); } /* zarter „Schimmer“ unter dem Header statt harter Schnittkante (optional) */ body[class*="theme-"] .site-header{ position: sticky; overflow: visible; } body[class*="theme-"] .site-header::after{ content:""; position:absolute; left:0; right:0; bottom:-14px; height:14px; pointer-events:none; background: linear-gradient(to bottom, color-mix(in srgb, var(--header-bg, #fff) 92%, transparent) 0%, transparent 100%); } /* Nav-Hover an Theme anlehnen (Fallback = bisheriges Teal) */ body[class*="theme-"] .nav__list a:hover{ background: var(--nav-hover-bg, rgba(14,165,166,.08)); } /* ================= THEME VARIANTS ================= */ /* AURORA (Blue → Violet) Codes: Base(#FAFBFF→#EEF2FF) Spot Violet #ECE6FF • Spot Ice #E6F0FF */ body.theme-aurora{ --header-bg: color-mix(in srgb, #FFFFFF 78%, #ECE6FF 22%); --header-border: #E7E9F6; --nav-hover-bg: color-mix(in srgb, #ECE6FF 28%, transparent); } /* DAWN (Lilac → Rose) Codes: Base(#FFF9FF→#F3F7FF) Spot Lilac #F3E8FF • Spot Rose #FFEFFA */ body.theme-dawn{ --header-bg: color-mix(in srgb, #FFFFFF 78%, #FFEFFA 20%); --header-border: #F3E8F3; --nav-hover-bg: color-mix(in srgb, #FFEFFA 28%, transparent); } /* GLACIER (Cool Blue) Codes: Base(#F7FBFF→#EEF8FF) Spot Cyan #E6F7FF • Spot Peri #E5EDFF */ body.theme-glacier{ --header-bg: color-mix(in srgb, #FFFFFF 78%, #E6F7FF 22%); --header-border: #E5EEF8; --nav-hover-bg: color-mix(in srgb, #E6F7FF 28%, transparent); } /* ==================== THEME: NOCTURNE (Dark Slate) ========================= Codes: Base Top: #0B0F14 Base Bottom: #151B24 Spot Indigo: #1A2540 Spot Teal: #0E2330 Header Border:rgba(255,255,255,.08) ============================================================================= */ /* Canvas */ body.theme-nocturne{ /* sanfter vertical fade rechts + tiefer Grundverlauf */ /* Canvas-Farben für Feather-Fade */ --canvas-top: #0B0F14; /* obere Verlauffarbe des Body-Canvas */ --canvas-bottom: #151B24; /* untere Verlauffarbe des Body-Canvas */ --edge-fade: 42px; /* Höhe des Fades (Desktop) */ @media (max-width: 960px){ body.theme-nocturne{ --edge-fade: 28px; } } /* dunkle Typo fürs Canvas */ --text: #E8EEF8; /* Primärtext auf dunklem Grund */ --muted: #A3AEC2; /* Sekundärtext */ /* Header-Variablen (ziehen in deinem Header/Topbar) */ --header-bg: rgba(13,17,23,.60); --header-border: rgba(255,255,255,.08); --nav-hover-bg: rgba(255,255,255,.06); } /* große, weiche Spots (kaum sichtbar, nur Tiefe) */ body.theme-nocturne::before, body.theme-nocturne::after{ content:""; position: fixed; inset:auto; pointer-events:none; z-index:-1; filter: blur(8px); } body.theme-nocturne::before{ right: -18vw; top: -12vh; width: clamp(720px, 66vw, 1200px); height: clamp(640px, 56vw, 980px); background: radial-gradient(52% 64% at 50% 50%, rgba(26,37,64,.38) 0%, rgba(26,37,64,0) 70%); } body.theme-nocturne::after{ left: -22vw; bottom: -18vh; width: clamp(760px, 70vw, 1280px); height: clamp(680px, 60vw, 1040px); background: radial-gradient(50% 60% at 42% 58%, rgba(14,35,48,.30) 0%, rgba(14,35,48,0) 72%); } /* Sections: Feather-Fade oben & unten – verhindert harte Cuts */ body.theme-nocturne .section, body.theme-nocturne .section--alt, body.theme-nocturne .section--highlight{ /* nur Overlay-Fades, eigentlicher Hintergrund bleibt transparent */ background: /* Top-Fade (läuft nach unten aus) */ linear-gradient( to bottom, color-mix(in srgb, var(--canvas-top) 85%, transparent), transparent var(--edge-fade) ), /* Bottom-Fade (läuft nach oben aus) */ linear-gradient( to top, color-mix(in srgb, var(--canvas-bottom) 80%, transparent), transparent var(--edge-fade) ); } /* Header + Topbar folgen Theme-Variablen (kompatibel zu deinen Regeln) */ body.theme-nocturne .topbar, body.theme-nocturne .site-header{ background: var(--header-bg); border-bottom: 1px solid var(--header-border); } /* [oai_citation:1‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ /* Desktop-Navigation: zarter Hover auf dunklem Header */ body.theme-nocturne .nav__list a:hover{ background: var(--nav-hover-bg); } /* [oai_citation:2‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ /* Weiße Komponenten (Cards, FAQ, Buttons) sollen dunklen Text behalten */ body.theme-nocturne .card, body.theme-nocturne .faq, body.theme-nocturne .steps li, body.theme-nocturne .btn, body.theme-nocturne .btn--soft, body.theme-nocturne .btn--ghost{ color:#0F172A; } /* [oai_citation:3‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ /* Mobile-Dropdown hat weißen Hintergrund → Links dunkel einfärben */ @media (max-width:960px){ body.theme-nocturne .nav__list a{ color:#0F172A; } } /* [oai_citation:4‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ /* Footer dezent dunkel statt hellgrau */ body.theme-nocturne .site-footer{ background: rgba(255,255,255,.03); border-top-color: rgba(255,255,255,.08); color: var(--text); } /* [oai_citation:5‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ .ph{ border:0; padding:0; } .ph img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:var(--radius); } /* ===== Vorher/Nachher – kompakt, gleich hoch, symmetrische Abstände ===== */ /* Container-Padding hier AUS, sonst stört es die Symmetrie */ #before-after .container{ padding-inline: 0; } /* überschreibt globales .container-Padding */ /* [oai_citation:0‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ #before-after .gallery{ /* EIN Wert für ALLE Abstände: links, zwischen, rechts */ --g: clamp(18px, 2.6vw, 28px); display: grid; grid-template-columns: repeat(2, minmax(240px, 360px)); /* gleiche Breite */ justify-content: center; /* Grid in der Seitenmitte */ gap: var(--g); /* Abstand ZWISCHEN den Kacheln */ padding-inline: var(--g); /* Außenabstand LINKS/RECHTS = gap */ /* falls die Galerie global 2 Spalten erzwingt, ist okay; mobil 1 Spalte s.u. */ } /* [oai_citation:1‡style.css](sediment://file_00000000bb3061f481ee5953362d7097) */ /* === BEFORE/AFTER: ganze Bilder sichtbar (kein Crop), gleiche Größe === */ #before-after .gallery{ --g: clamp(18px, 2.6vw, 28px); display: grid; grid-template-columns: repeat(2, minmax(240px, 360px)); justify-content: center; gap: var(--g); padding-inline: var(--g); } /* Kachel bleibt gleich groß (Ratio), Bild wird vollständig eingepasst */ #before-after .ph{ aspect-ratio: 16 / 9; /* Höhe fix, beide Kacheln identisch */ border-radius: var(--radius, 12px); overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(2,6,23,.14); } /* Wichtig: contain statt cover + nicht absolut positionieren */ #before-after .ph img{ position: static; /* überschreibt früheres absolute */ display: block; width: 100%; height: 100%; object-fit: contain; /* >>> ganzes Bild sichtbar <<< */ object-position: center; border-radius: inherit; /* saubere Rundung */ background: #fff; /* „Letterbox“-Ränder in Weiß */ } /* Mobil einspaltig wie gehabt */ @media (max-width: 960px){ #before-after .gallery{ grid-template-columns: 1fr; padding-inline: 0; } } /* === BEFORE/AFTER • Intrinsic Mode: ganzes Bild, volle Breite, keine Crops === */ #before-after .gallery{ --g: clamp(18px, 2.6vw, 28px); display: grid; grid-template-columns: repeat(2, minmax(240px, 380px)); justify-content: center; gap: var(--g); padding-inline: var(--g); /* Außen = Innenabstand */ align-items: start; /* Zeilenhöhe richtet sich nach dem höheren Bild */ } #before-after .ph{ display: block !important; /* alte grid/center-Styles neutralisieren */ padding: 0 !important; border: 0 !important; min-height: 0 !important; aspect-ratio: auto !important; /* feste Ratio aus */ height: auto !important; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 24px rgba(2,6,23,.14); } #before-after .ph img{ display: block; width: 100%; height: auto !important; /* behält natürliches Seitenverhältnis */ object-fit: unset !important; /* keine Cover/Contain-Logik */ object-position: initial !important; border-radius: inherit; } /* === BEFORE/AFTER – Variante B: rechte = linke Höhe, kein Crop = contain === */ #before-after .gallery{ /* beide Karten gleich breit, Zeile orientiert sich an der höheren Kachel */ grid-template-columns: repeat(2, minmax(240px, 380px)); justify-content: center; gap: clamp(18px, 2.6vw, 28px); padding-inline: clamp(18px, 2.6vw, 28px); align-items: stretch; /* Grid-Items füllen die Zeilenhöhe */ } #before-after .ph{ /* alte Ratio-/Auto-Höhen-Regeln neutralisieren */ aspect-ratio: auto !important; height: 100% !important; /* >>> auf Zeilenhöhe stretchen <<< */ min-height: 0 !important; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 24px rgba(2,6,23,.14); } #before-after .ph img{ width: 100%; height: 100%; /* füllt die gestretchte Kachel */ object-fit: contain; /* ganzes Bild sichtbar, kein Crop */ object-position: center; display: block; border-radius: inherit; } @media (max-width: 960px){ #before-after .gallery{ grid-template-columns: 1fr; padding-inline: 0; } } /* === 2) Topbar: "Mail Mail" auf genau ein "Mail" kürzen ================== */ /* Text der Mail-Links ausblenden und einheitlich "Mail" anzeigen */ .topbar__left a[href^="mailto:"]{ position: relative; color: transparent; /* Originaltext unsichtbar machen */ font-size: 0; /* verhindert doppelte Breite */ white-space: nowrap; } .topbar__left a[href^="mailto:"]::after{ content: "Mail"; font-size: 1rem; /* echte sichtbare Größe */ line-height: 1; color: var(--text); } /* Wenn mehrere mailto-Links vorhanden sind: nur den ersten zeigen */ .topbar__left a[href^="mailto:"]:not(:first-of-type){ display: none; } /* === Topbar: "Mail" wieder anzeigen & Duplikate ausblenden =============== */ /* 1) Frühere Regeln neutralisieren */ .topbar .topbar__left a[href^="mailto:"]{ color: var(--text) !important; font-size: 1rem !important; position: static !important; } .topbar .topbar__left a[href^="mailto:"]::after{ content: none !important; } /* 2) Nur zusätzliche Mail-Links ausblenden (alles nach dem ersten) */ .topbar .topbar__left a[href^="mailto:"] ~ a[href^="mailto:"]{ display: none !important; } /* — Topbar: "Mail" immer sichtbar, keine :after-Ersatztexte — */ .topbar__link--email { font-weight: 600; color: var(--text); } @media (max-width: 960px){ .topbar__left a.topbar__link--email[href^="mailto:"]{ position: static; color: var(--text) !important; font-size: 1rem !important; } .topbar__left a.topbar__link--email[href^="mailto:"]::after{ content: none !important; } } /* Mail hard-fix: zeigt genau EINEN Mail-Link mit echtem Text */ .topbar__left #tbMail, .topbar__left a#tbMail[href^="mailto:"]{ all: revert; /* killt frühere font-size:0/color:transparent usw. */ display: inline !important; font: inherit !important; color: var(--text) !important; text-decoration: none; position: static !important; white-space: nowrap; } .topbar__left #tbMail::after{ content: none !important; } /* Duplikate (weitere mailto-Links) ausblenden */ .topbar__left a[href^="mailto:"]:not(#tbMail){ display: none !important; } /* Mobile: JSON/Lottie vor dem CTA-Button im Hero */ @media (max-width: 960px){ .hero__grid{ display: grid; grid-template-columns: 1fr; grid-template-areas: "copy" "media" "cta"; /* Button NACH dem JSON */ row-gap: clamp(10px, 2.2vw, 16px); } /* Kinder von .hero__copy als eigene Grid-Items behandeln */ .hero__copy{ display: contents; } /* Alles in der Copy (außer CTA) bleibt zusammen im Bereich "copy" */ .hero__copy > *:not(.card--cta){ grid-area: copy; } /* JSON/Lottie */ .hero__media{ grid-area: media; } /* CTA separat unter das JSON */ .hero__copy .card--cta{ grid-area: cta; width: 100%; /* mobil vollbreit wie ein Button */ justify-self: stretch; } } /* HERO (Mobile): normal stack, kein display:contents, keine Grid-Areas */ @media (max-width: 960px){ .hero__grid{ display:block; } .hero__copy{ display:block; } .hero__copy > *{ grid-area:auto !important; } /* alte Zuweisungen neutralisieren */ /* Abstände im Stack */ .hero__media{ margin-top: clamp(10px, 3vw, 16px); } .hero .card--cta{ display:inline-flex; justify-content:center; margin-top: clamp(10px, 3vw, 16px); } } /* NAV – Grundlayout */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(8,12,18,.72); backdrop-filter: blur(8px); } .navbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; } .nav-list { display: flex; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; } .nav-link { display: inline-flex; align-items: center; height: 40px; padding: 0 .75rem; border-radius: 999px; font-weight: 600; } .nav-link:focus-visible { outline: 2px solid #9ad7ff; outline-offset: 2px; } /* Dropdown */ .nav-has-dropdown { position: relative; } .nav-toggle { cursor: pointer; background: transparent; border: 0; color: inherit; } .nav-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: .5rem; background: var(--header-bg) padding-box; border: 1px solid var(--header-border); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .dropdown-item { display: block; padding: .7rem .9rem; border-radius: 12px; font-weight: 600; background: transparent; border: 1px solid transparent; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } /* Hover/Fokus zeigen */ .nav-has-dropdown:hover .nav-dropdown, .nav-has-dropdown:focus-within .nav-dropdown, .nav-has-dropdown.open .nav-dropdown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* TEAM-ABSCHNITT: zweispaltig + Kartencontainer */ .section--team-region { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start; } .map-card { border-radius: 20px; overflow: hidden; background: radial-gradient(140% 140% at 100% 0%, #0f1622, #0b1018 60%, #0a0f16 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.35); aspect-ratio: 4 / 3; } .map-card iframe { width: 100%; height: 100%; border: 0; display: block; } /* Responsive */ @media (max-width: 980px) { .section--team-region { grid-template-columns: 1fr; } .map-card { order: 2; aspect-ratio: 16 / 9; } } /* ===== Header / Nav ===== */ .site-header{ position: sticky; top: 0; z-index: 70; background: rgba(8,12,18,.72); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.06); } .site-header .navbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.75rem 1rem; } .site-header .primary-nav .nav-list{ display:flex; align-items:center; gap:.25rem; margin:0; padding:0; list-style:none; } /* Links nie blau/unterstrichen */ .site-header a, .site-header .nav-toggle{ color:#e8eef7; text-decoration:none; } .site-header .primary-nav .nav-list a, .site-header .nav-toggle{ display:inline-flex; align-items:center; height:40px; padding:0 .75rem; border-radius:999px; font-weight:600; background:transparent; border:0; cursor:pointer; } .site-header .primary-nav .nav-list a:hover, .site-header .nav-toggle:hover{ background: rgba(255,255,255,.06); } /* Dropdown */ .has-dropdown{ position:relative; } .nav-dropdown{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; padding:.5rem; background: radial-gradient(120% 120% at 100% 0%, #101722 0%, #0b1018 60%, #080c12 100%); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:80; } .nav-dropdown .dropdown-item{ display:block; padding:.7rem .9rem; border-radius:12px; font-weight:600; text-decoration:none; color:inherit; border:1px solid transparent; } .nav-dropdown .dropdown-item:hover, .nav-dropdown .dropdown-item:focus{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); } .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown, .has-dropdown.open .nav-dropdown{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; } /* Logo */ .logo{ font-weight:800; letter-spacing:.2px; } /* ===== Team-Abschnitt mit Karte ===== */ .section--team-region{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start; } .map-card{ border-radius:20px; overflow:hidden; background: radial-gradient(140% 140% at 100% 0%, #0f1622, #0b1018 60%, #0a0f16 100%); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(0,0,0,.35); aspect-ratio:4/3; } .map-card iframe{ width:100%; height:100%; border:0; display:block; } @media (max-width:980px){ .section--team-region{ grid-template-columns:1fr; } .map-card{ order:2; aspect-ratio:16/9; } } /* Kontakt soll wie die anderen Links aussehen */ .site-header .nav-toggle{ appearance: none; -webkit-appearance: none; border: 0; box-shadow: none; background: transparent; font: inherit; color: inherit; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 .75rem; border-radius: 999px; font-weight: 600; cursor: pointer; line-height: 1; } /* gleicher Hover wie bei Links */ .site-header .nav-toggle:hover{ background: rgba(255,255,255,.06); } /* Dropdown SENKRECHT und leicht erreichbar */ .has-dropdown{ position: relative; } /* kleine "Hover-Bridge", damit kein Spalt zwischen Button und Menü ist */ .has-dropdown::after{ content:""; position:absolute; left:-6px; right:-6px; top:100%; height:12px; /* kein Hintergrund – nur Hover-Zone */ } /* Menü direkt unter dem Button, vertikal */ .nav-dropdown{ position: absolute; right: 0; top: 100%; margin-top: 6px; /* Spalt weg */ display: flex; flex-direction: column; gap: 8px; min-width: 220px; padding: .5rem; background: radial-gradient(120% 120% at 100% 0%, #101722 0%, #0b1018 60%, #080c12 100%); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 80; } .nav-dropdown .dropdown-item{ width: 100%; display: block; padding: .7rem .9rem; border-radius: 12px; font-weight: 600; text-decoration: none; color: inherit; border: 1px solid transparent; } .nav-dropdown .dropdown-item:hover, .nav-dropdown .dropdown-item:focus{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); } /* Sichtbar wenn geöffnet/hover */ .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown, .has-dropdown.open .nav-dropdown{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* ===== Einheitliches Button-Theme ===== */ :root{ --btn-bg: #ffffff; --btn-text: #0b1018; --btn-border: rgba(12,18,24,.18); --btn-ring: rgba(170,190,255,.55); /* zarter, kühler Ring */ --btn-ring-hover: rgba(170,190,255,.8); } .btn{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:999px; border:1px solid var(--btn-border); font-weight:700; line-height:1; text-decoration:none; transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; will-change: transform; } /* Primärer CTA – wie dein „Kostenlose Kurz-Analyse“-Button */ .btn--primary{ background: var(--btn-bg); color: var(--btn-text); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 10px 22px rgba(0,0,0,.20), 0 0 0 2px var(--btn-ring); } .btn--primary:hover{ background: #f7faff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px rgba(0,0,0,.24), 0 0 0 2px var(--btn-ring-hover); } .btn--primary:active{ transform: translateY(0); box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 2px var(--btn-ring); } .btn--primary:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(154,215,255,.9), 0 0 0 5px rgba(154,215,255,.35); } /* Ghost-Variante (falls du sie nutzt, z.B. „Lernen Sie uns kennen“) */ .btn--ghost{ background: transparent; color: #e8eef7; border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 0 transparent; } .btn--ghost:hover{ background: rgba(255,255,255,.06); } .btn--ghost:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(154,215,255,.35); } /* ---- Squircle & Button-Theme vereinheitlichen ---- */ :root{ --radius-squircle: 18px; /* weniger Corner-Radius (Squircle) */ --btn-bg: #ffffff; --btn-text: #0b1018; --btn-border: rgba(12,18,24,.18); --btn-ring: rgba(170,190,255,.55); --btn-ring-hover: rgba(170,190,255,.8); } /* === Header CTA „Kurz-Check“ — Squircle + konsistenter Effekt === */ .site-header .btn{ height: 40px; padding: 0 1rem; border-radius: 16px; /* gleiche Rundung wie .card--trust */ } /* Effekt exakt wie bei anderen Primary-Buttons (keine Abweichungen) */ .site-header .btn.btn--primary{ background: var(--btn-bg); color: var(--btn-text); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 10px 22px rgba(0,0,0,.20), 0 0 0 2px var(--btn-ring); } .site-header .btn.btn--primary:hover{ background: #f7faff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px rgba(0,0,0,.24), 0 0 0 2px var(--btn-ring-hover); } .site-header .btn.btn--primary:active{ transform: translateY(0); box-shadow: 0 0 0 2px var(--btn-ring); } .site-header .btn.btn--primary:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(154,215,255,.9), 0 0 0 5px rgba(154,215,255,.35); } /* Basis */ .btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:var(--radius-squircle); border:1px solid var(--btn-border); font-weight:700; line-height:1; text-decoration:none; transition:transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } /* Primär – wie dein weißer CTA */ .btn--primary{ background:var(--btn-bg); color:var(--btn-text); box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 10px 22px rgba(0,0,0,.20), 0 0 0 2px var(--btn-ring); } .btn--primary:hover{ background:#f7faff; transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px rgba(0,0,0,.24), 0 0 0 2px var(--btn-ring-hover); } .btn--primary:active{ transform:translateY(0); box-shadow:0 0 0 2px var(--btn-ring); } .btn--primary:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(154,215,255,.9), 0 0 0 5px rgba(154,215,255,.35); } /* Optional: Ghost bleibt im Theme (falls woanders genutzt) */ .btn--ghost{ background:#0f1622; color:#e8eef7; border-color:rgba(255,255,255,.18); box-shadow:0 1px 0 rgba(255,255,255,.12) inset; } .btn--ghost:hover{ background:#131b26; } /* Header-CTA & Dropdown/Karten auch Squircle */ .nav-dropdown, .map-card{ border-radius:var(--radius-squircle); } /* ===== Team: Text links, Google-Map rechts ===== */ .section--team-region{ padding-block: clamp(28px, 5vw, 64px); } .team-grid{ display: grid; grid-template-columns: 1.1fr .9fr; /* links Text, rechts Map */ gap: clamp(16px, 3vw, 32px); align-items: start; } .team-copy h2{ margin: 0 0 6px; } .team-copy p{ margin: 0 0 12px; color: var(--muted); } .team-copy .btn{ margin-top: 8px; } /* Map-Karte optisch konsistent zu Cards */ .map-card{ margin-left: auto; /* drückt die Karte sauber nach rechts */ border-radius: 20px; overflow: hidden; background: radial-gradient(140% 140% at 100% 0%, #0f1622, #0b1018 60%, #0a0f16 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.35); aspect-ratio: 4 / 3; } .map-card iframe{ width: 100%; height: 100%; border: 0; display: block; } /* Mobil: untereinander, Map darunter */ @media (max-width: 980px){ .team-grid{ grid-template-columns: 1fr; } .team-copy{ order: 1; } .map-card{ order: 2; aspect-ratio: 16 / 9; } } /* ===== Team-Bereich kompakt, Map nicht übertrieben hoch ===== */ .section--team-region{ padding-block: clamp(32px, 4vw, 56px); } /* 2 Spalten: links Text eher schmal fix, rechts Map flex */ .team-grid{ display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: clamp(16px, 2vw, 32px); align-items: start; } /* Headline + Copy links */ .team-copy h2{ margin: 0 0 8px; } .team-copy p{ margin: 0 0 16px; color: var(--muted); } .team-copy .btn{ margin-top: 8px; } /* Map-Card rechts */ .map-card{ position: relative; border-radius: 20px; overflow: hidden; background: radial-gradient( 140% 140% at 100% 0%, #0f1622, #0b1018 60%, #0a0f16 100% ); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 40px rgba(0,0,0,.5); /* Größe kompakt: ungefähr gleich Höhe wie Textblock */ max-width: 1020px; min-height: 240px; height: clamp(420px, 28vw, 910px); /* kein absurdes Seitenverhältnis mehr, das nach unten zieht */ } /* iframe muss Fläche komplett ausfüllen */ .map-card iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* Mobile: untereinander stapeln */ @media (max-width: 980px){ .team-grid{ grid-template-columns: 1fr; } .map-card{ max-width: 100%; width: 100%; height: clamp(200px, 50vw, 280px); min-height: 200px; } } /* Team-Section weiter nach rechts rücken */ #team > .container{ padding-inline-start: clamp(32px, 16vw, 140px); /* ← linkes Padding */ padding-inline-end: clamp(16px, 4vw, 28px); /* rechter Rand wie gewohnt */ } /* Mobil wieder normal */ @media (max-width: 980px){ #team > .container{ padding-inline-start: clamp(16px, 4vw, 28px); } } /* Burger standardmäßig unsichtbar (Desktop) */ .nav-burger { display: none; background: transparent; border: 0; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; } /* Mobile: Burger zeigen & Nav als Dropdown klappen */ @media (max-width: 980px){ .nav-burger{ display: inline-flex; align-items: center; justify-content: center; } .primary-nav{ position: relative; } /* Kollabierte Liste (geschlossen) */ .primary-nav .nav-list{ display: none; position: absolute; right: 0; top: calc(100% + 8px); flex-direction: column; gap: 6px; padding: 10px; width: min(90vw, 320px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 26px rgba(2,6,23,.12); z-index: 60; } /* Geöffnet via .open (wird von app.js gesetzt) */ .primary-nav .nav-list.open{ display: flex; } .primary-nav .nav-list a{ padding: 12px; } } /* --- Mobile Dropdown nur für das bestehende .nav-list Markup --- */ @media (max-width: 960px){ .primary-nav{ position: relative; } /* initial zu, an Burger andocken */ .primary-nav .nav-list{ display: none; position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 10px; flex-direction: column; width: min(92vw, 320px); gap: 6px; box-shadow: 0 12px 26px rgba(2,6,23,.12); z-index: 1310; /* über dem Hero */ } .primary-nav .nav-list.open{ display: flex; } .primary-nav .nav-list a{ padding: 12px; } /* Burger am Handy sichtbar */ .nav__toggle{ display: inline-flex; align-items: center; justify-content: center; } } /* --- Mobile-Nav für vorhandenes Markup (.navbar .nav-list) --- */ @media (max-width: 960px){ .navbar{ position: relative; } /* Burger am Handy sichtbar */ .nav__toggle{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } /* Menü standardmäßig ZU */ .navbar .nav-list{ display: none; position: absolute; right: 16px; top: calc(100% + 8px); background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 10px; flex-direction: column; gap: 6px; width: min(92vw, 320px); box-shadow: 0 12px 26px rgba(2,6,23,.12); z-index: 1310; } .navbar .nav-list.open{ display: flex; } .navbar .nav-list a{ padding: 12px; } } /* Burger standardmäßig verstecken (Desktop) */ #navToggle, .nav-burger { display: none; } /* ===================== MOBILE (<=960px) ===================== */ @media (max-width: 960px){ /* Burger zeigen */ #navToggle, .nav-burger{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); } /* Nav-Liste initial zu + als Dropdown rechts unter den Burger */ .navbar{ position: relative; } .navbar .nav-list{ display: none; /* wichtig: initial zu */ position: absolute; right: 12px; /* rechts ausklappen */ top: calc(100% + 10px); flex-direction: column; gap: 6px; width: min(92vw, 320px); padding: 10px; border-radius: 16px; background: radial-gradient(120% 120% at 100% 0%, #101722 0%, #0b1018 60%, #080c12 100%); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 26px rgba(2,6,23,.35); z-index: 1300; } .navbar .nav-list.open{ display: flex; } /* wird von app.js gesetzt */ .navbar .nav-list a{ display: block; padding: 12px; border-radius: 12px; } .navbar .nav-list a:hover{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } } /* ===== MobileNav v2 (nur <=960px) ===== */ .nav-burger{ display:none; } /* Desktop: unsichtbar */ .nav-overlay{ display:none; } /* Desktop: unsichtbar */ @media (max-width: 960px){ .navbar{ position: relative; z-index: 1305; } /* Burger sichtbar & klickbar */ .nav-burger{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); color:#fff; cursor:pointer; } /* Liste standardmäßig ZU, als Dropdown rechts unter dem Burger */ .primary-nav{ position: relative; } .primary-nav .nav-list{ display:none; position:absolute; right:0; top:calc(100% + 10px); flex-direction:column; gap:6px; width:min(92vw, 320px); padding:10px; border-radius:16px; background: rgba(7,12,18,.96); border:1px solid rgba(255,255,255,.08); box-shadow: 0 12px 26px rgba(2,6,23,.35); z-index: 1310; } .primary-nav .nav-list.open{ display:flex; } .primary-nav .nav-list a{ display:block; padding:12px; border-radius:12px; color:#e5ecf5; } .primary-nav .nav-list a:hover{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } /* Dimmer fürs restliche UI bei offenem Menü */ .nav-overlay{ display:none; position:fixed; inset:0; z-index:1200; background: rgba(2,6,23,.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } body.nav-open .nav-overlay{ display:block; } } /* === Canonical Mobile-Nav (<=960px) – erzwingt korrektes Verhalten === */ @media (max-width:960px){ .site-header .navbar{ position:relative; } /* WICHTIG: .primary-nav darf NICHT positioned sein, sonst dockt das Dropdown links unter der Nav statt rechts am Burger an. */ .site-header .primary-nav{ position:static !important; } #navToggle{ display:inline-flex; } .site-header .navbar .nav-list{ display:none !important; position:absolute; right:12px; top:calc(100% + 10px); flex-direction:column; gap:6px; width:min(92vw,320px); padding:10px; border-radius:16px; background: radial-gradient(120% 120% at 100% 0%, #101722 0%, #0b1018 60%, #080c12 100%); border:1px solid rgba(255,255,255,.08); box-shadow:0 12px 26px rgba(2,6,23,.35); z-index:1310; } .site-header .navbar .nav-list.open{ display:flex !important; } .site-header .navbar .nav-list a{ padding:12px; border-radius:12px; } } /* === Mobile-Header: Glassmorphism + Animation (<=960px) === */ @media (max-width:960px){ .site-header .navbar{ position:relative; } .site-header .primary-nav{ position:static !important; } /* wichtig fürs Positioning */ #navToggle{ display:inline-flex; } .site-header .navbar .nav-list{ /* Layout */ position:absolute; right:12px; top:calc(100% + 12px); display:flex; flex-direction:column; gap:8px; width:min(92vw, 340px); padding:14px; border-radius:18px; z-index:1310; /* GLASS */ background: var(--header-bg) padding-box; border: 1px solid var(--header-border); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); /* Animation (statt display:none) */ opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-10px) scale(.98); transition: opacity .18s ease, visibility .18s ease, transform .18s ease; } .site-header .navbar .nav-list.open{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); } /* Items */ .site-header .navbar .nav-list a{ padding:12px 14px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); text-decoration:none; transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; } .site-header .navbar .nav-list a:hover, .site-header .navbar .nav-list a:focus-visible{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); box-shadow: 0 6px 20px rgba(15,23,42,.35); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); outline: none; } } /* Body-Overlay wenn Menü offen (dunkelt Seite leicht ab) */ body::before{ content:""; position:fixed; inset:0; z-index:1200; /* unter dem Nav-Dropdown (1310) */ background: rgba(8,12,18,.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition: opacity .2s ease; } body.nav-open::before{ opacity:1; pointer-events:auto; } /* Scroll-Lock bei offenem Menü */ body.nav-open{ overflow:hidden; } /* Burger-Button: Glas & Micro-Interaction */ #navToggle{ border-radius:14px; padding:10px; line-height:0; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; } #navToggle:hover{ border-color: rgba(255,255,255,.2); box-shadow: 0 6px 18px rgba(15,23,42,.35), inset 0 1px 0 rgba(255,255,255,.08); } #navToggle:active{ transform: scale(.98); } /* kleine „State“-Geste ohne Markup-Änderungen */ #navToggle[aria-expanded="true"]{ transform: rotate(3deg); } /* Burger -> X */ #navToggle{ position:relative; width:42px; height:42px; } #navToggle .bar{ position:absolute; left:10px; right:10px; height:2px; border-radius:2px; background: rgba(255,255,255,.9); transition: transform .2s ease, opacity .2s ease; } #navToggle .bar:nth-child(1){ top:14px; } #navToggle .bar:nth-child(2){ top:20px; } #navToggle .bar:nth-child(3){ top:26px; } #navToggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); } #navToggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; } #navToggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); } /* ===== MOBILE NAV: bigger items + punchy glass animation ===== */ @media (max-width:960px){ .site-header .navbar{ position:relative; } .site-header .primary-nav{ position:static !important; } #navToggle{ display:inline-flex; } /* Panel */ .site-header .navbar .nav-list{ position:absolute; right:12px; top:calc(100% + 12px); display:flex; flex-direction:column; gap:12px; /* bigger container */ width:min(94vw, 380px); padding:18px 16px; border-radius:22px; z-index:1310; /* glass look */ background: var(--header-bg) padding-box; border: 1px solid var(--header-border); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); box-shadow: 0 14px 48px rgba(2,6,23,.50), inset 0 1px 0 rgba(255,255,255,.10); /* animation base */ opacity:0; visibility:hidden; pointer-events:none; transform: translateY(-16px) scale(.92); transform-origin: 95% 0; will-change: transform, opacity; transition: opacity .24s cubic-bezier(.22,1,.36,1), visibility .24s cubic-bezier(.22,1,.36,1), transform .34s cubic-bezier(.22,1,.36,1), /* kräftiger easing */ box-shadow .34s ease; } .site-header .navbar .nav-list.open{ opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0) scale(1); animation: menuPop .34s cubic-bezier(.22,1,.36,1) both; } @keyframes menuPop{ 0% { opacity:0; transform: translateY(-16px) scale(.92); } 65% { opacity:1; transform: translateY(2px) scale(1.03); } /* little overshoot */ 100% { transform: translateY(0) scale(1); } } /* Items – bigger, tappable, pill look */ .site-header .navbar .nav-list li{ list-style:none; } .site-header .navbar .nav-list a{ display:flex; align-items:center; justify-content:center; min-height:48px; /* Tap target */ padding:14px 18px; border-radius:14px; font-size:1.06rem; line-height:1.35; font-weight:600; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.12); text-decoration:none; transition: transform .16s ease, border-color .18s ease, box-shadow .2s ease, background .2s ease; } .site-header .navbar .nav-list a:hover, .site-header .navbar .nav-list a:focus-visible{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); box-shadow: 0 8px 24px rgba(15,23,42,.45); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); outline:none; } /* Staggered item entrance for extra punch */ .site-header .navbar .nav-list.open li{ opacity:0; animation: itemIn .32s cubic-bezier(.22,1,.36,1) both; } .site-header .navbar .nav-list.open li:nth-child(1){ animation-delay: .03s; } .site-header .navbar .nav-list.open li:nth-child(2){ animation-delay: .06s; } .site-header .navbar .nav-list.open li:nth-child(3){ animation-delay: .09s; } .site-header .navbar .nav-list.open li:nth-child(4){ animation-delay: .12s; } .site-header .navbar .nav-list.open li:nth-child(5){ animation-delay: .15s; } .site-header .navbar .nav-list.open li:nth-child(6){ animation-delay: .18s; } @keyframes itemIn{ 0% { opacity:0; transform: translateY(10px) scale(.98); } 100% { opacity:1; transform: translateY(0) scale(1); } } } /* Overlay & Burger bleiben wie zuvor */ body::before{ content:""; position:fixed; inset:0; z-index:1200; background: rgba(8,12,18,.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition: opacity .24s cubic-bezier(.22,1,.36,1); } body.nav-open::before{ opacity:1; pointer-events:auto; } body.nav-open{ overflow:hidden; } #navToggle{ border-radius:14px; padding:10px; line-height:0; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.10); transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease; } #navToggle:hover{ border-color: rgba(255,255,255,.22); box-shadow: 0 8px 20px rgba(15,23,42,.45), inset 0 1px 0 rgba(255,255,255,.10); } #navToggle[aria-expanded="true"]{ transform: rotate(3deg); } @media (max-width:960px){ .site-header .navbar .nav-list.closing{ opacity:0; transform: translateY(-12px) scale(.96); } } /* === FIXED HEADER (immer sichtbar) — FINAL OVERRIDE === */ :root{ --header-h: 64px; } /* Default; echte Höhe kommt per JS */ .site-header{ position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%; z-index: 1500; /* über Content/Overlays */ /* Glas-Hintergrund hast du bereits im Theme; kein Wechsel nötig */ } /* Nur Seiten MIT Header nach unten versetzen (siehe JS-Klasse) */ body.has-fixed-header{ padding-top: var(--header-h); } /* Anker-Offsets korrekt: Sections scrollen unter dem fixen Header ein */ .section{ scroll-margin-top: calc(var(--header-h) + 10px) !important; } /* Jegliche Auto-Hide/Transform-Regeln neutralisieren */ body.scroll-down .site-header, body.scroll-up .site-header{ transform: none !important; } @media (max-width: 960px){ body.scroll-down .site-header, body.scroll-up .site-header{ transform: none !important; } } /* FAQ – Body + "Mehr lesen" */ .faq__body{ padding: 8px 2px 2px; } .faq-more{ margin-top: 6px; } .faq-more > summary{ cursor: pointer; display: inline-block; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-weight: 600; user-select: none; } .faq-more[open] > summary{ background: rgba(2,6,23,.03); } /* Liste der vier Punkte */ .faq-bullets{ margin: 10px 0 0; padding-left: 1.1rem; display: grid; gap: 8px; } .faq-bullets li{ line-height: 1.45; } /* === Full-bleed Spiral Stage (kein Rahmen, volle Breite) === */ .spiral-stage{ position: relative; /* full-bleed über die gesamte Viewportbreite */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* Größe/Seitenverhältnis der Bühne – skaliert über --spiral-size */ min-height: clamp(calc(340px * var(--spiral-size)), calc(58vw * var(--spiral-size)), calc(720px * var(--spiral-size))); aspect-ratio: auto; /* transparenter Hintergrund – „schwebt“ über deinem dunklen Theme */ overflow: hidden; } /* Spiral-Stage folgt dem Nocturne-Canvas, kein sichtbarer Abschnittsbruch */ body.theme-nocturne .spiral-stage{ background: linear-gradient(180deg, #0B0F14 0%, #151B24 100%); } .spiral-stage .spiral-lottie{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* Soft-Crop ohne Linter-Fehler, passt sich --spiral-size an */ clip-path: ellipse(calc(92% / var(--spiral-size)) calc(92% / var(--spiral-size)) at 50% 50%); -webkit-clip-path: ellipse(calc(92% / var(--spiral-size)) calc(92% / var(--spiral-size)) at 50% 50%); } .spiral-lottie { position: relative; width: calc(420px * var(--spiral-size)); aspect-ratio: 1 / 1; margin-inline: auto; overflow: visible; transform: scale(var(--spiral-size)); } .spiral-lottie > svg { width: 100%; height: 100%; display: block; } .spiral-stage .spiral-copy{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 14px; border-radius: 12px; font-weight: 600; text-align: center; color: #fff; background: rgba(0,0,0,.42); /* dezentes Pill auf Dark-Theme */ box-shadow: 0 8px 24px rgba(0,0,0,.25); } /* Size-controlled scaling via --spiral-size */ .spiral-stage .spiral-lottie > svg{ width: 100%; height: 100%; transform: scale(calc(1.8 * var(--spiral-size))); /* Basis 1.8 */ transform-origin: 50% 50%; } @media (max-width: 640px){ .spiral-stage{ min-height: clamp(calc(300px * var(--spiral-size)), calc(70vw * var(--spiral-size)), calc(560px * var(--spiral-size))); } .spiral-stage .spiral-lottie > svg{ transform: scale(calc(1.35 * var(--spiral-size))); /* Mobile-Basis 1.35 */ } } /* =========================== OVERRIDE (append at EOF): Single Feather-Fade per Section (Nocturne) =========================== */ /* 0) Canvas-Variablen (Fallbacks) */ body.theme-nocturne{ --canvas-top: #0B0F14; --canvas-bottom:#151B24; --edge-fade: 42px; /* Desktop */ } @media (max-width: 960px){ body.theme-nocturne{ --edge-fade: 28px; } /* Mobil etwas kürzer */ } /* 1) Alle früheren Fades/Overlays sicher deaktivieren */ body.theme-nocturne :is(.section,.section--alt,.section--highlight)::before, body.theme-nocturne :is(.section,.section--alt,.section--highlight)::after{ content: none !important; background: none !important; box-shadow: none !important; } /* 2) Basis: Sections transparent, aber als Träger für unseren Overlay-Fade */ body.theme-nocturne :is(.section,.section--alt,.section--highlight){ position: relative; background: transparent !important; /* Canvas bleibt sichtbar */ } /* 3) Neuer, EINZIGER Fade je Abschnitt (nur oben) */ body.theme-nocturne :is(.section,.section--alt,.section--highlight):not(:first-of-type)::before{ content:""; position:absolute; left:0; right:0; top:-1px; height: var(--edge-fade); pointer-events:none; z-index:0; /* Farbe unten → nach oben auslaufend (kein Doppelband mehr) */ background: linear-gradient( to top, color-mix(in srgb, var(--canvas-top) 82%, transparent), transparent ); } /* 4) Spiral-Stage ohne harten Cut ins Canvas laufen lassen */ body.theme-nocturne .spiral-stage{ background: linear-gradient(180deg, var(--canvas-top), var(--canvas-bottom)) !important; } /* =========================== OVERRIDE (append at EOF) Softer single fade + subtle highlights (Nocturne) =========================== */ /* 0) Fallback-Variablen + zartere Stärke */ body.theme-nocturne{ --canvas-top: #0B0F14; --canvas-bottom: #151B24; --edge-fade: 60px; /* breiterer Fade (vorher 42px) */ --fade-strength: 60%; /* weniger Deckkraft im Fade (vorher ~80%+) */ } @media (max-width: 960px){ body.theme-nocturne{ --edge-fade: 38px; } } /* 1) Alle alten Fades sicher neutralisieren */ body.theme-nocturne :is(.section,.section--alt,.section--highlight)::before, body.theme-nocturne :is(.section,.section--alt,.section--highlight)::after{ content: none !important; background: none !important; box-shadow: none !important; } /* 2) Basis: Sections transparent als Träger */ body.theme-nocturne :is(.section,.section--alt,.section--highlight){ position: relative; background: transparent !important; } /* 3) Neuer, weicher EINZEL-Fade (nur oben) – deutlich „fadiger“ */ body.theme-nocturne :is(.section,.section--alt,.section--highlight):not(:first-of-type)::before{ content:""; position:absolute; left:0; right:0; top:-1px; height: var(--edge-fade); pointer-events:none; z-index:0; background: linear-gradient( to top, color-mix(in srgb, var(--canvas-top) var(--fade-strength), transparent), transparent ) !important; } /* 4) Sehr dezente Aufhellungen (Glints) pro Section für „lebendigere“ Tiefe */ body.theme-nocturne :is(.section,.section--alt,.section--highlight)::after{ content:""; position:absolute; inset: 0; pointer-events:none; z-index:0; /* ultra-subtile Lichtflecken, kaum sichtbar – keine harten Kanten */ background: radial-gradient(120% 90% at 14% 22%, rgba(255,255,255,.020), transparent 62%), radial-gradient(110% 100% at 86% 68%, rgba(255,255,255,.014), transparent 65%); } /* 5) Spiral-Stage ohne Cut in den Canvas laufen lassen */ body.theme-nocturne .spiral-stage{ background: linear-gradient(180deg, var(--canvas-top), var(--canvas-bottom)) !important; } /* === Öffnungszeiten mittig ausrichten (Hours) — OVERRIDE === */ #hours .hours-card{ display: flex; flex-direction: column; align-items: center; /* horizontal zentriert */ text-align: center; /* Text zentriert */ } #hours .hours-list{ list-style: none; /* Bullet entfernen */ margin: 6px 0 0; padding: 0; } #hours .hours-list li{ display: inline-flex; /* beide nebeneinander */ align-items: center; gap: 10px; /* Abstand zwischen Label und Uhrzeit */ } /* Mobil: falls sehr schmal, umbrechen erlaubt */ @media (max-width: 560px){ #hours .hours-list li{ flex-wrap: wrap; justify-content: center; gap: 6px; } } /* =========================== OVERRIDE: Fade nur für #hours (weicher) =========================== */ /* Safety: keine anderen Overlays bei #hours */ body.theme-nocturne #hours::after{ content:none !important; } /* Eigener, weicher Top-Fade nur für den Öffnungszeiten-Abschnitt */ body.theme-nocturne #hours{ position: relative; /* Träger für ::before */ } body.theme-nocturne #hours::before{ content:""; position:absolute; left:0; right:0; top:-1px; /* schmaler = unauffälliger */ height: clamp(16px, 3.6vw, 30px); pointer-events:none; z-index:0; /* transparenter = „fadiger“ */ background: linear-gradient( to top, color-mix(in srgb, var(--canvas-top, #0B0F14) 46%, transparent), transparent ) !important; } /* =========================== OVERRIDE NUR FÜR #hours – weicher Top-Fade + dezente Aufhellung =========================== */ /* 0) ältere Fades an #hours sicher ausschalten */ body.theme-nocturne #hours::before, body.theme-nocturne #hours::after{ content: none !important; background: none !important; box-shadow: none !important; } /* 1) eigener, sehr weicher Top-Fade */ body.theme-nocturne #hours{ position: relative; /* Träger für ::before/::after */ isolation: isolate; /* sauberes Stacking */ --hours-fade-h: clamp(18px, 3.2vw, 34px); --hours-fade-strength: 46%; /* kleiner = „fadiger“/transparenter */ --hours-top: #0B0F14; /* falls --canvas-top nicht existiert */ } body.theme-nocturne #hours::before{ content: "" !important; /* überschreibt evtl. „content:none !important“ */ position: absolute; left: 0; right: 0; top: -1px; height: var(--hours-fade-h); pointer-events: none; z-index: 0; background: linear-gradient( to top, color-mix(in srgb, var(--canvas-top, var(--hours-top)) var(--hours-fade-strength), transparent), transparent ) !important; } /* 2) ultra-subtile Aufhellung innerhalb der Section (kein Band) */ body.theme-nocturne #hours::after{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(115% 85% at 50% 22%, rgba(255,255,255,.015), transparent 60%); mix-blend-mode: screen; /* minimaler „Glint“-Effekt */ opacity: .9; } /* Perf-Hints für die Spiral-Bühne */ .spiral-stage{ contain: layout paint; /* isoliert Layout/Paint, spart Reflows */ } .spiral-stage .spiral-lottie{ will-change: transform; /* Renderer bekommt frühzeitig einen Layer */ } /* Dropdown-Item Hover an Header-Theme angleichen */ body.theme-nocturne .nav-dropdown .dropdown-item:hover, body.theme-nocturne .nav-dropdown .dropdown-item:focus{ background: var(--nav-hover-bg) !important; } /* ===== Fair Offer Section (Glass + Stepper + Chips + Mini-FAQ) ===== */ /* Glass-Variante auf Basis card--trust */ .card--trust.glass{ background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.10)) padding-box, conic-gradient(from var(--tt-angle), var(--tt-violet), var(--tt-blue), var(--tt-violet)) border-box; backdrop-filter: blur(8px); } /* Section Layout */ #fair-offer .section-head{ margin-bottom: clamp(12px, 2.5vw, 18px); } #fair-offer .cta-block{ margin-top: clamp(12px, 2.5vw, 18px); } /* Stepper: 3 Spalten Desktop, mobil stacken */ #fair-offer .stepper{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 16px); } @media (max-width: 960px){ #fair-offer .stepper{ grid-template-columns: 1fr; } } /* Step Cards: Icon-Ring + sanfte Pulse */ #fair-offer .step{ display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 14px; } #fair-offer .step h4{ margin: 0 0 4px; } #fair-offer .step p{ margin: 0; } #fair-offer .step__icon{ --s: 36px; width: var(--s); height: var(--s); border-radius: 999px; border: 2px solid var(--accent); position: relative; } #fair-offer .step__icon::after{ content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--accent) 55%, white 0%); opacity: .55; animation: pulse-ring 2.6s ease-in-out infinite; } @keyframes pulse-ring{ 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.07); opacity: .20; } } /* PATCH: Vor-Ort-Check – Chips zentrieren + Lilac/Blue + Bottom-Layout */ #vor-ort-check .voc__chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center !important; align-items:center; margin: clamp(10px, 2vw, 16px) 0; padding:0; list-style:none; } #vor-ort-check .voc__chips li{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--tt-blue) 52%, var(--tt-violet) 48%) !important; background: transparent !important; color: var(--text) !important; white-space: nowrap; } #vor-ort-check .chip__icon{ width:14px; height:14px; flex:0 0 14px; color: color-mix(in srgb, var(--tt-blue) 60%, var(--tt-violet) 40%) !important; } /* Beweis-Card & CTA-Rail mittig + Layout */ #vor-ort-check .voc__proof{ max-width: 980px; margin-left: auto; margin-right: auto; } #vor-ort-check .voc__cta-rail{ max-width: 980px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 6px; margin-bottom: 10px; } /* Sicherstellen, dass in dieser Section kein Teal erzwungen wird */ #vor-ort-check .card--trust{ --tt-violet: var(--tt-violet) !important; --tt-blue: var(--tt-blue) !important; } /* Kurz-Erklärung Box */ #fair-offer .why-nopricelist{ margin-top: 8px; padding: 14px; } /* Mini-FAQ kompakter */ #fair-offer .mini-faq{ margin-top: 10px; } #fair-offer .mini-faq .faq{ margin: 8px 0; } #fair-offer .mini-faq .faq > summary{ font-weight: 700; } /* Mehr Abstand vor dem FAQ in der Fair-Offer-Section */ #fair-offer .cta-block { margin-bottom: clamp(24px, 5vw, 56px); } #fair-offer .mini-faq{ margin-top: clamp(28px, 6vw, 72px); /* vorher 10px */ } /* Step-Icon: oben rechts + Häkchen */ #fair-offer .step{ position: relative; grid-template-columns: 1fr; /* Text über volle Breite */ padding-right: clamp(40px, 5vw, 60px); /* Platz fürs Icon */ } #fair-offer .step__icon{ --s: 32px; position: absolute; top: 12px; right: 12px; width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: 999px; border: 2px solid var(--accent); } #fair-offer .step__icon::before{ content: "✓"; font-weight: 900; font-size: 16px; line-height: 1; color: var(--accent); } #fair-offer .step__icon::after{ content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--accent) 55%, white 0%); opacity: .55; animation: pulse-ring 2.6s ease-in-out infinite; } /* Titel/Copy rechtsbündig, aber luftiger */ #fair-offer .step h4, #fair-offer .step p{ text-align: right; } #fair-offer .step h4{ margin: 0 0 6px 0; max-width: none; /* keine künstliche Verengung */ } /* Mehr Abstand zwischen CTA-Button und Subline */ #fair-offer .cta-block .tiny{ margin-top: clamp(10px, 3vw, 10px); } /* FORM + Sticky Fix — Inputs kontrastreich, klare Ränder; Sticky-Bar Desktop aus */ :root{ --field-bg: #ffffff; --field-text: #0f172a; --field-border: color-mix(in srgb, var(--border) 85%, #000 0%); --field-border-focus: color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%); --field-placeholder: color-mix(in srgb, var(--muted) 82%, #000 0%); } /* globale, aber sichere Selektoren: nur echte Formfelder */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], textarea, select, .input, .textarea{ background: var(--field-bg); color: var(--field-text); border: 1px solid var(--field-border); border-radius: 14px; padding: 12px 14px; font: inherit; line-height: 1.4; -webkit-font-smoothing: antialiased; } /* Placeholder gut lesbar */ input::placeholder, textarea::placeholder{ color: var(--field-placeholder); opacity: 1; } /* Fokus klar, ohne „starken Hover-Effekt“ */ input:focus, textarea:focus, select:focus, .input:focus, .textarea:focus{ outline: none; border-color: var(--field-border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-blue) 35%, var(--tt-violet) 20%, transparent); } /* Dark-Theme Sicherheit: weiße Felder mit dunkler Typo beibehalten */ body.theme-nocturne input[type], body.theme-nocturne textarea, body.theme-nocturne select, body.theme-nocturne .input, body.theme-nocturne .textarea{ background: #fff; color: #0f172a; border-color: var(--field-border); } /* Labels leicht kräftiger */ .field label{ color: var(--text); font-weight: 600; } /* PATCH: Vor-Ort-Check — Chips/CTA mit Rahmen + weiße Typo (Lilac/Blue) */ #vor-ort-check .voc__chips{ justify-content: center !important; } #vor-ort-check .voc__chips li{ border: 1px solid color-mix(in srgb, var(--tt-blue) 60%, var(--tt-violet) 40%) !important; color: #fff !important; background: transparent !important; } #vor-ort-check .chip__icon{ color: color-mix(in srgb, var(--tt-blue) 70%, var(--tt-violet) 30%) !important; } /* CTA-Rail wie Ghost-Buttons: klarer Rahmen, weiße Schrift, sanftes Hover */ #vor-ort-check .voc__cta-rail .card--cta{ background: transparent !important; color: #fff !important; border: 1px solid color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%) !important; box-shadow: none !important; border-radius: 14px; min-height: 44px; transition: transform .18s ease-out, background-color .18s ease-out, box-shadow .18s ease-out; } #vor-ort-check .voc__cta-rail .card--cta:hover{ transform: scale(1.01); background: color-mix(in srgb, #ffffff 8%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tt-blue) 35%, var(--tt-violet) 25%); } #vor-ort-check .voc__cta-rail .card--cta:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-blue) 45%, var(--tt-violet) 30%); } /* PATCH: Vor-Ort-Check — Steps sichtbar im Button-Theme */ #vor-ort-check{ position: relative; isolation: isolate; } #vor-ort-check .voc__steps{ position: relative; z-index: 1; } #vor-ort-check .voc__steps .step.card--trust{ position: relative; z-index: 1; background: var(--btn-bg) !important; color: var(--btn-text) !important; border: 1px solid var(--btn-border) !important; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 10px 22px rgba(0,0,0,.20), 0 0 0 2px var(--btn-ring); transition: transform .18s ease-out, box-shadow .18s ease-out; } #vor-ort-Check .voc__steps .step.card--trust:hover, #vor-ort-check .voc__steps .step.card--trust:hover{ transform: scale(1.01); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 26px rgba(0,0,0,.24), 0 0 0 2px var(--btn-ring-hover); } /* Typo in den Step-Karten bewusst dunkel (wie Buttons) */ #vor-ort-check .voc__steps .step :is(h3,h4,p){ color: var(--btn-text) !important; } /* kleine, saubere Nummern-Badge */ #vor-ort-check .step__num{ width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: #fff; color: var(--btn-text); border: 1px solid color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%); } /* Häkchen-Ring klein + ohne Puls nur hier */ #vor-ort-check .step__icon{ --s: 22px; position: absolute; top: 12px; right: 12px; width: var(--s); height: var(--s); display: grid; place-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%) !important; background: transparent; box-shadow: none !important; } #vor-ort-check .step__icon::before{ content: "✓"; font-weight: 800; font-size: 12px; line-height: 1; color: color-mix(in srgb, var(--tt-blue) 70%, var(--tt-violet) 30%); } #vor-ort-check .step__icon::after{ display: none !important; } /* Puls aus */ /* PATCH: Fair-Offer — CTA-Rail zentriert + kleiner Theme-Glow */ #fair-offer .cta-block{ display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: clamp(8px, 1.6vw, 14px); align-items: center; justify-content: center; max-width: 980px; margin-left: auto; margin-right: auto; } #fair-offer .cta-block .card--cta{ background: transparent !important; color: #fff !important; border: 1px solid color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%) !important; border-radius: 14px; min-height: 44px; text-align: center; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tt-blue) 24%, var(--tt-violet) 18%); transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out; } #fair-offer .cta-block .card--cta:hover{ transform: scale(1.01); background: color-mix(in srgb, #ffffff 8%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tt-blue) 38%, var(--tt-violet) 28%), 0 10px 22px rgba(0,0,0,.20); } #fair-offer .cta-block .card--cta:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-blue) 45%, var(--tt-violet) 30%), 0 0 0 5px color-mix(in srgb, var(--tt-blue) 18%, var(--tt-violet) 12%); } /* Mobile: untereinander stapeln */ @media (max-width: 960px){ #fair-offer .cta-block{ grid-template-columns: 1fr; } } /* === PATCH: Fair-Offer — Chips & CTA-Rail zentriert + kleiner Glow (Lilac/Blue) === */ /* Chips mittig */ #fair-offer .trust-chips{ justify-content: center; } /* Checkmark vor die Chips (visuell wie im Screenshot) */ #fair-offer .trust-chips .chip{ background: transparent !important; border: 1px solid color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%) !important; color: #fff !important; } #fair-offer .trust-chips .chip::before{ content: "✓"; margin-right: 8px; font-weight: 900; color: color-mix(in srgb, var(--tt-blue) 70%, var(--tt-violet) 30%); } /* CTA-Leiste: responsive Grid, mittig, kleiner Ring-Glow */ #fair-offer .cta-block{ display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: clamp(8px, 1.6vw, 14px); max-width: 980px; margin-inline: auto; align-items: center; justify-items: center; text-align: center; } @media (max-width: 960px){ #fair-offer .cta-block{ grid-template-columns: 1fr; } } /* Ghost/Outline im Lila/Blau-Theme + dezenter Glow */ #fair-offer .cta-block .card--cta{ background: transparent !important; color: #fff !important; border: 1px solid color-mix(in srgb, var(--tt-blue) 55%, var(--tt-violet) 45%) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tt-blue) 24%, var(--tt-violet) 18%); border-radius: 14px; min-height: 44px; transform: translateZ(0); transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out; } #fair-offer .cta-block .card--cta:hover{ transform: scale(1.01); background: color-mix(in srgb, #ffffff 8%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tt-blue) 38%, var(--tt-violet) 28%), 0 10px 22px rgba(0,0,0,.20); } #fair-offer .cta-block .card--cta:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-blue) 45%, var(--tt-violet) 30%), 0 0 0 5px color-mix(in srgb, var(--tt-blue) 18%, var(--tt-violet) 12%); } /* Sub-Zeilen unter der CTA-Leiste über volle Breite */ #fair-offer .cta-block .tiny{ grid-column: 1 / -1; color: color-mix(in srgb, #fff 86%, var(--muted) 14%); } @media (min-width: 768px){ .cta-sticky{ display: none !important; visibility: hidden !important; opacity: 0 !important; } main{ padding-bottom: 0 !important; } } /* === Vor-Ort-Check: Text-CTAs mit leichtem Glow (Lilac/Blue) === */ #vor-ort-check .voc__cta-rail{ display:flex; gap: 16px; justify-content:center; align-items:center; } #vor-ort-check .voc__cta-rail a{ display:inline-block; font-weight: 700; color: #fff; /* auf dem dunklen BG */ text-decoration: none; /* sehr dezenter Glow in deinem Button-Theme */ text-shadow: 0 0 .5px rgba(255,255,255,.30), 0 0 8px color-mix(in srgb, var(--tt-blue) 22%, var(--tt-violet) 18%), 0 0 16px color-mix(in srgb, var(--tt-blue) 12%, var(--tt-violet) 8%); transition: text-shadow .18s ease, transform .18s ease; cursor: pointer; } #vor-ort-check .voc__cta-rail a:hover{ transform: translateY(-1px); text-shadow: 0 0 1px rgba(255,255,255,.35), 0 0 10px color-mix(in srgb, var(--tt-blue) 30%, var(--tt-violet) 24%), 0 0 18px color-mix(in srgb, var(--tt-blue) 18%, var(--tt-violet) 12%); } #vor-ort-check .voc__cta-rail a:focus-visible{ outline: none; text-shadow: 0 0 1px rgba(255,255,255,.45), 0 0 12px color-mix(in srgb, var(--tt-blue) 35%, var(--tt-violet) 28%), 0 0 22px color-mix(in srgb, var(--tt-blue) 22%, var(--tt-violet) 16%); } /* === VOR-ORT-CHECK: 3 CTA-Wörter mit leichtem Glow + Abstand vorm FAQ kleiner === */ /* Wörter zentriert in einer Reihe halten */ #vor-ort-check .cta-block{ display:flex; gap: clamp(12px, 2.2vw, 22px); justify-content:center; align-items:center; } /* Aus Button-Optik raus, nur Text mit dezentem Glow */ #vor-ort-check .cta-block .card--cta{ display:inline; padding:0; min-width:0; min-height:0; background: transparent !important; border:0 !important; box-shadow:none !important; /* Card-Glow aus */ color:#fff !important; font-weight:700; text-decoration:none; text-shadow: 0 0 8px color-mix(in srgb, var(--tt-blue) 30%, var(--tt-violet) 20%), 0 0 1px rgba(255,255,255,.35); transition: text-shadow .18s ease-out; } #vor-ort-check .cta-block .card--cta:hover{ text-shadow: 0 0 12px color-mix(in srgb, var(--tt-blue) 45%, var(--tt-violet) 30%), 0 0 1px rgba(255,255,255,.55); } #vor-ort-check .cta-block .card--cta:focus-visible{ outline:none; text-decoration: underline; text-underline-offset:3px; text-shadow: 0 0 14px color-mix(in srgb, var(--tt-blue) 50%, var(--tt-violet) 35%); } /* Abstand zwischen Subline „Kostenlos …“ und dem FAQ reduzieren */ #vor-ort-check.section{ padding-bottom: clamp(10px, 2.5vw, 18px) !important; } #faq.section{ padding-top: clamp(10px, 2.5vw, 18px) !important; } /* --- Vor-Ort-Check: CTA-Lead + feiner Glow + engerer Abstand --- */ #vor-ort-check .cta-lead{ margin: 8px 0 6px; font-weight: 700; font-size: clamp(16px, 1.6vw, 20px); color: #E8EEF8; text-shadow: 0 0 14px color-mix(in srgb, var(--tt-blue) 18%, transparent), 0 0 14px color-mix(in srgb, var(--tt-violet) 12%, transparent); } #vor-ort-check .cta-block{ /* etwas dichter an die FAQ rücken */ margin-top: 6px; margin-bottom: clamp(6px, 1.6vw, 12px); } #vor-ort-check .cta-block .card--cta{ /* sehr dezenter Text-Glow, damit es als CTA „lesbar“ wirkt */ text-shadow: 0 0 10px color-mix(in srgb, var(--tt-blue) 12%, transparent), 0 0 10px color-mix(in srgb, var(--tt-violet) 8%, transparent); } /* Section unten etwas kompakter, damit der Abstand zur FAQ kleiner ist */ #vor-ort-check.section{ padding-bottom: clamp(18px, 3vw, 28px); } /* Mini-Subline im CTA-Block etwas enger an die Buttons */ #vor-ort-check .cta-block .tiny{ margin-top: 6px; } /* === Vor-Ort-Check: schwebende Lilac/Blue-Wellen NUR in den 3 Step-Cards === */ #vor-ort-check .voc__steps .step{ position: relative; overflow: hidden; /* Wellen innerhalb der Karte halten */ } /* Canvas liegt über dem Card-Background, aber unter dem Inhalt */ #vor-ort-check .voc__steps .step .step-waves{ position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .42; /* sehr subtil */ } /* Sicherstellen, dass Text & Nummern über den Wellen liegen */ #vor-ort-check .voc__steps .step > *:not(.step-waves){ position: relative; z-index: 1; } /* --- Reach-Block: Überschrift größer, CTAs enger --- */ /* Container mit WhatsApp / Tel / Mail automatisch erkennen */ @supports (selector(h4:has(+ :is(div,nav,ul):has(> a[href^="tel:"])))) { /* Überschrift direkt vor den CTAs */ h3:has(+ :is(div,nav,ul):has(> a[href^="tel:"], > a[href^="mailto:"], > a[href^="https://wa.me/"])), h4:has(+ :is(div,nav,ul):has(> a[href^="tel:"], > a[href^="mailto:"], > a[href^="https://wa.me/"])) { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.2; font-weight: 700; margin-bottom: .6rem; } /* Die CTA-Reihe enger zusammenrücken */ :is(div,nav,ul):has(> a[href^="https://wa.me/"], > a[href^="tel:"], > a[href^="mailto:"]) { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.2vw, 14px); /* enger */ flex-wrap: wrap; } /* Einzel-CTA: keine Extramargins einschleppen */ :is(div,nav,ul):has(> a[href^="https://wa.me/"], > a[href^="tel:"], > a[href^="mailto:"]) > * { margin: 0; white-space: nowrap; font-size: clamp(14px, 1.4vw, 16px); } @media (max-width: 520px){ :is(div,nav,ul):has(> a[href^="https://wa.me/"], > a[href^="tel:"], > a[href^="mailto:"]) { gap: 8px; } } } /* Fallback nur für die Vor-Ort-Check-CTA-Rail */ #vor-ort-check .voc__cta-rail a[href^="https://wa.me/"], #vor-ort-check .voc__cta-rail a[href^="tel:"], #vor-ort-check .voc__cta-rail a[href^="mailto:"]{ display:inline-flex; margin:0 8px; } /* PATCH: Reach-Block – Headline größer + "Anrufen" exakt zentriert */ #vor-ort-check .cta-lead{ font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2; margin: 12px 0 8px; } /* 3 CTAs als 3-Spalten-Grid: 1fr | auto | 1fr → Mitte bleibt exakt mittig */ #vor-ort-check .voc__cta-rail{ display: grid !important; grid-template-columns: 1fr auto 1fr; justify-items: center; align-items: center; } /* Explizit in die Spalten setzen */ #vor-ort-check .voc__cta-rail > a{ grid-row: 1; } #vor-ort-check .voc__cta-rail > a:nth-child(1){ grid-column: 1; } #vor-ort-check .voc__cta-rail > a:nth-child(2){ grid-column: 2; } /* "Anrufen" mittig */ #vor-ort-check .voc__cta-rail > a:nth-child(3){ grid-column: 3; } /* CTA-Reihe enger zusammenrücken */ #vor-ort-check .voc__cta-rail{ column-gap: clamp(1px, 0.25vw, 4px); /* vorher größer → jetzt enger */ padding-inline: clamp(0px, 0.6vw, 8px); /* weniger Luft links/rechts */ padding-block: 4px; } /* Sicherheit: keine zufälligen Außenabstände & kein Zeilenumbruch */ #vor-ort-check .voc__cta-rail > a{ margin: 0; white-space: nowrap; } /* === FINAL OVERRIDE: Vor-Ort-Check – CTAs enger zusammen === */ #vor-ort-check .voc__cta-rail{ display: grid !important; grid-auto-flow: column; /* nebeneinander */ grid-auto-columns: max-content; /* Breite = Inhalt */ grid-template-columns: unset !important;/* 1fr|auto|1fr deaktivieren */ justify-content: center; align-items: center; gap: clamp(2px, 0.5vw, 4px) !important;/* überstimmt frühere gap:16px */ padding-inline: 0; } #vor-ort-check .voc__cta-rail > a{ margin: 0 !important; /* überstimmt globales margin:0 8px */ white-space: nowrap; } /* WHAT-WE-DO: 3 Portrait-Bilder enger zusammen (nur horizontal) */ :root{ /* Bildbreite (nur wenn du Größe anpassen willst) */ --wwd-img-w: clamp(160px, 17.5vw, 220px); } #what-we-do .process-gallery{ grid-template-columns: repeat(3, var(--wwd-img-w)) !important; /* nicht mehr 1fr */ justify-content: left; /* Reihe zentriert */ column-gap: clamp(8px, 2vw, 50px) !important; /* enger zusammen */ } #what-we-do .process-item{ width: var(--wwd-img-w); } #what-we-do .process-item img{ width: 100%; } /* Größe bleibt stabil */ /* === MOBILE-ONLY: Einheitliches Padding für Buttons & Textfelder (≤960px) === Ziel: saubere Thumb-Ziele (min-height ~44px), enger aber lesbar. Desktop bleibt unverändert. */ @media (max-width: 960px){ /* zentrale Mobile-Token — hier stellst du das Feeling ein */ :root{ --tap-y: 12px; /* vertikales Innenpadding */ --tap-x: 14px; /* horizontales Innenpadding */ --tap-min: 44px; /* empfohlene Mindesthöhe für Touch */ --tap-font: 0.95rem;/* mobile Fontgröße für CTAs */ } /* CTAs im Kartenlook (Hero, Audit etc.) */ .card--cta{ padding: var(--tap-y) var(--tap-x) !important; min-height: var(--tap-min) !important; font-size: var(--tap-font) !important; width: 100%; /* vollbreit auf Handy */ min-width: 0; /* alte Min-Widths neutralisieren */ } /* generische Buttons (inkl. Header "Kurz-Check") */ .btn, .header__cta{ padding: calc(var(--tap-y) - 2px) var(--tap-x) !important; min-height: var(--tap-min) !important; font-size: var(--tap-font); border-radius: 12px; /* bleibt im Stil, nur kompakt */ } /* Form-Felder auf audit.html (Inputs/Textareas) */ .input, .textarea, select{ padding: calc(var(--tap-y) - 2px) var(--tap-x) !important; min-height: var(--tap-min) !important; font: inherit; } /* Label–Abstand leicht straffen, aber klar lesbar */ .field{ gap: 4px; } /* Der kleine Hinweistext unter dem numerischen Feld bleibt eng */ .input--numeric + .tiny{ margin-top: 4px; } /* Falls ein CTA innerhalb einer Karte direkt unter Text sitzt: minimaler Abstand */ .hero__copy .card--cta{ margin-top: 6px !important; } } /* === PATCH (Mobile-only): CTAs schmaler in der Breite, mehr vertikale Luft === */ @media (max-width: 960px){ /* Hero + Audit CTA (beide .card--cta) */ .card--cta{ /* weniger Weißraum links/rechts, aber mehr oben/unten */ padding-inline: 8px !important; /* vorher effektiv 12–18px */ padding-block: 12px !important; /* vorher ~8–10px */ min-height: 44px !important; /* bleibt thumb-freundlich */ font-size: inherit; /* Schriftgröße unverändert */ } } /* === MOBILE: CTAs nicht mehr volle Breite, sondern inhalts-breit === */ @media (max-width: 960px){ /* Hero-CTA + Audit-CTA */ .hero__copy .card--cta, .audit__cta .card--cta{ /* Breite */ width: fit-content !important; /* statt width:100% */ max-width: calc(100% - 32px); /* Sicherheitsrand links/rechts */ min-width: 0 !important; /* alte clamp-Minwidth neutralisieren */ margin-left: auto !important; /* zentrieren */ margin-right: auto !important; /* Innenabstände – Textgröße bleibt */ padding-inline: 8px !important; /* weniger Weißraum horizontal */ padding-block: 12px !important; /* angenehme Höhe für Thumb */ } } /* === MOBILE: Kompakte CTAs nur für die markierten Buttons ================== */ @media (max-width: 960px){ .card--cta.cta--compact{ /* Breite: nicht mehr Vollbreit, sondern inhaltsbreit und zentriert */ display: inline-flex !important; width: max-content !important; /* auto/max-content = nur so breit wie nötig */ min-width: 0 !important; /* min-width-Clamps neutralisieren */ margin-left: auto !important; margin-right: auto !important; justify-self: center !important; /* Innenabstände: Textgröße bleibt, weniger Weißraum links/rechts */ padding-inline: 8px !important; padding-block: 12px !important; } /* Falls im Hero Grid "stretch" erzwungen wurde: explizit überstimmen */ #hero .hero__copy .card--cta.cta--compact{ justify-self: center !important; /* statt stretch */ } } /* === MOBILE: Home-CTAs zentrieren + Audit-Submit größer & Subline darunter === */ @media (max-width: 960px){ /* Startseite: beide weißen CTAs mittig (Hero + "Jetzt Analyse anfragen") */ .hero__copy .card--cta, .audit__cta .card--cta{ display: inline-flex !important; width: max-content !important; /* hebt width:100% auf */ min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; justify-self: center !important; text-align: center; } /* audit.html: Button größer & mittig, Hinweis als Subline darunter */ .auditlp__submit{ display: flex !important; flex-direction: column !important; /* Text unter den Button */ align-items: center !important; gap: 6px !important; text-align: center !important; } .auditlp__submit .card--cta{ display: inline-flex !important; width: max-content !important; /* statt voller Breite */ min-width: clamp(200px, 60vw, 340px) !important; /* größer wirken */ padding: 12px 16px !important; /* etwas mehr Fläche */ margin: 0 auto !important; /* zentrieren */ } .auditlp__submit .tiny, .auditlp__submit .muted{ margin: 2px 0 0 !important; /* Subline knapp unter dem Button */ } } /* === MOBILE: Startseiten-CTAs zentrieren (Hero + "Jetzt Analyse anfragen") === */ @media (max-width: 960px){ /* 1) Hero-CTA: nicht mehr vollbreit + zentriert im Grid */ #hero .hero__copy .card--cta{ width: max-content !important; /* statt width:100% */ min-width: 0 !important; /* etwaige clamp-MinWidth neutralisieren */ justify-self: center !important; /* Grid: mittig statt stretch */ margin-left: auto !important; /* Fallback */ margin-right: auto !important; display: inline-flex !important; } /* 2) CTA im Audit-Teaser auf der Startseite: zentriert */ #audit .audit__cta{ text-align: center !important; /* Parent mittig */ } #audit .audit__cta .card--cta{ width: max-content !important; /* nur so breit wie Inhalt */ min-width: 0 !important; display: inline-flex !important; margin-left: auto !important; /* zentrieren */ margin-right: auto !important; } } /* === MOBILE: Hero-CTA sauber zentrieren ================================ */ @media (max-width: 960px){ #hero .hero__copy .card--cta{ display: block !important; /* statt inline-flex */ width: max-content !important; /* nur so breit wie der Text */ min-width: 0 !important; /* ggf. frühere clamp-MinWidth neutralisieren */ margin: 6px auto 0 !important; /* zentriert (auto links/rechts) */ text-align: center !important; /* falls Zeilenumbruch -> mittig */ } } @media (max-width: 960px){ #hero .hero__copy{ display:block !important; } #hero .hero__copy .card--cta{ justify-self: center !important; } } /* === FIX: Home-CTAs zentrieren (nur Mobile) ============================ */ @media (max-width: 960px){ /* Hero-CTA mittig, nicht vollbreit */ #hero .hero__copy > a.card--cta{ display: block !important; width: fit-content !important; /* überschreibt width:100% */ max-width: 92vw !important; /* Sicherheitslimit */ margin: clamp(10px,3vw,16px) auto 0 !important; text-align: center; /* falls 2-zeilig */ } /* Soft-CTA im Abschnitt "Kostenlose Kurz-Analyse" ebenfalls mittig */ #audit .audit__cta{ display: flex !important; justify-content: center !important; } #audit .audit__cta .card--cta{ width: fit-content !important; max-width: 92vw !important; margin-inline: auto !important; } } /* === FINAL: Hero-CTA zentriert (nur Mobile) – überschreibt alte Regeln === */ @media (max-width: 960px){ #hero .hero__grid{ display: block !important; } /* Grid-Aufteilung neutralisieren */ #hero .hero__copy{ display: block !important; } /* kein display:contents */ #hero .hero__copy > a.card--cta{ display: inline-flex !important; width: auto !important; /* weg von width:100% */ margin: clamp(10px,3vw,16px) auto 0 !important; /* mittig */ justify-content: center !important; text-align: center; /* falls zwei Zeilen */ } } /* === HERO-CTA: KANONISCHES CENTERING (MOBILE) === */ @media (max-width: 960px){ /* Grid-/Stretch-Altlogik neutralisieren */ #hero .hero__grid{ display:block !important; } #hero .hero__copy{ display:block !important; } #hero .hero__copy .card--cta{ justify-self:auto !important; width:auto !important; } /* Zentrieren: Block + fit-content + auto-Margins */ #hero .hero__copy > a.card--cta{ display:block !important; /* nicht inline-flex */ width:fit-content !important; max-width:calc(100% - 32px); /* Sicherheitsrand */ margin: clamp(8px,3vw,16px) auto 0 !important; text-align:center; /* falls 2-zeilig */ } /* Speziell: .cta--compact darf NICHT inline-flex erzwingen */ #hero .hero__copy > a.card--cta.cta--compact{ display:block !important; } } /* === HERO-CTA HARD FIX (<=960px): zentriert, egal was davor steht === */ @media (max-width:960px){ #hero .hero__grid{ display:block !important; } /* Grid-Sonderfall aus */ #hero .hero__copy{ display:block !important; } /* explizit den ersten CTA im Hero erzwingen */ #hero .hero__copy > a.card--cta{ position: static !important; float: none !important; grid-area: auto !important; place-self: center !important; align-self: center !important; justify-self: center !important; display: block !important; /* NICHT inline-flex */ width: max-content !important; /* nur so breit wie Text */ min-width: 0 !important; /* alte clamp-Minwidth killen */ max-width: calc(100% - 32px) !important; margin: 12px auto 0 !important; /* mittig */ text-align: center !important; } /* falls .cta--compact irgendwo inline-flex !important setzt */ #hero .hero__copy > a.card--cta.cta--compact{ display: block !important; } } /* === HERO-CTA: single source of truth (<=960px) === */ @media (max-width:960px){ #hero .hero__grid, #hero .hero__copy{ display:block !important; /* kein Grid, kein contents */ } /* alle alten Layout-Setzungen neutralisieren und mittig erzwingen */ #hero .hero__copy > a.card--cta{ position: static !important; float: none !important; grid-area: auto !important; align-self: center !important; justify-self: center !important; display: block !important; /* WICHTIG: block, nicht inline-flex */ width: max-content !important; min-width: 0 !important; margin: 12px auto 0 !important; /* zentriert */ text-align: center !important; /* falls Zeilenumbruch */ } /* falls .cta--compact irgendwo inline-flex !important setzt: overriden */ #hero .hero__copy > a.card--cta.cta--compact{ display: block !important; } } @media (max-width:960px){ #hero-cta{ display: block !important; /* nötigt margin:auto zum Zentrieren */ width: max-content !important; /* nur so breit wie der Text */ max-width: calc(100% - 32px) !important; /* Safety-Rand */ margin: 12px auto 0 !important; /* horizontal zentriert */ text-align: center !important; /* falls Zeilenumbruch */ } /* wenn der CTA direkt Kind des Grids ist (durch JS-Reparenting) */ .hero__grid > #hero-cta{ place-self: center !important; } } /* Nur für Bilder mit Alphakanal */ .process-gallery img.is-alpha{ object-fit: contain; background: transparent; } /* Nur für Bilder mit Alphakanal – volle Illustration, kein Crop */ #what-we-do .process-gallery img.is-alpha{ object-fit: contain !important; background: transparent !important; } /* NAV DROPDOWN – kanonisch (final override) */ .site-header .nav-dropdown{ position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: .5rem; background: var(--header-bg) padding-box; border: 1px solid var(--header-border); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border-radius: 16px; box-shadow: 0 14px 38px rgba(2,6,23,.50); opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: opacity .18s cubic-bezier(.22,1,.36,1), transform .24s cubic-bezier(.22,1,.36,1); z-index: 1310; } .site-header .has-dropdown:hover .nav-dropdown, .site-header .has-dropdown:focus-within .nav-dropdown, .site-header .has-dropdown.open .nav-dropdown{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .site-header .nav-dropdown .dropdown-item{ display:block; padding:.7rem .9rem; border-radius:12px; font-weight:600; text-decoration:none; color:inherit; border:1px solid transparent; } .site-header .nav-dropdown .dropdown-item:hover, .site-header .nav-dropdown .dropdown-item:focus{ background: var(--nav-hover-bg); border-color: rgba(255,255,255,.12); } /* Kontakt-Pill exakt wie die Links */ .site-header .nav-toggle{ display:inline-flex; align-items:center; height:40px; padding:0 .75rem; border-radius:999px; font-weight:600; background:transparent; border:0; cursor:pointer; } .site-header .nav-toggle:hover{ background: var(--nav-hover-bg); } /* ans CSS-EOF hängen */ body.theme-nocturne #what-we-do .process-gallery .is-alpha{ mix-blend-mode: multiply; /* Weiß verschwindet, Farben bleiben */ opacity: .98; /* optional: kleine Dämpfung */ } /* =========================== Nocturne: Hero + Spiral BG =========================== */ :root, .theme--nocturne { --night-0: #0a0f1a; /* Basis */ --night-1: #0d1624; /* Verlauf oben */ --night-2: #0f1d33; /* Verlauf unten */ /* Fallbacks, falls nicht vorhanden */ --tt-violet: var(--tt-violet, #A78BFA); --tt-blue: var(--tt-blue, #93C5FD); } /* gleiche Optik wie die guten Sections */ .section--hero, .section--spiral, .hero, .spiral { position: relative; background-color: var(--night-0); background-image: radial-gradient(80rem 40rem at 12% 0%, rgba(167,139,250,0.20), transparent 60%), radial-gradient(70rem 35rem at 88% 18%, rgba(147,197,253,0.18), transparent 62%), radial-gradient(55rem 30rem at 50% 115%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 100%); background-blend-mode: screen, screen, normal, normal; overflow: hidden; } /* Soft fade nach unten – liegt HINTER Content, verschiebt nichts */ .section--hero::after, .section--spiral::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 140px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.25)); z-index: 0; } /* Lottie/Canvas darf den Hintergrund NICHT übermalen */ #lottie-spiral, .hero__canvas, .spiral__canvas, .spiral canvas, .spiral svg { background: transparent !important; } /* Falls irgendein Wrapper später "background: var(--panel)" drübersetzt */ .section--hero > .bg, .section--spiral > .bg { background: transparent !important; } /* === Nocturne: Canvas als Overlay über html background (Safari UI) === */ html{ background:#0B1220; } /* färbt nur die Browser-UI */ body.theme-nocturne{ position: relative; } body.theme-nocturne .page-canvas{ position: fixed; inset: 0; z-index: -1; /* hinter allem Content, aber über html */ pointer-events: none; background: radial-gradient(28% 220% at 102% 50%, rgba(26,37,64,.55) 0%, rgba(26,37,64,0) 70%), linear-gradient(180deg, #0B0F14 0%, #151B24 100%); } /* falls irgendwo noch Panel-Hintergründe greifen: im Theme transparent erzwingen */ body.theme-nocturne :is(.section,.section--alt,.section--highlight){ background: transparent !important; } /* === Nocturne: subtile Tönung Richtung #0B1220 (Safari-UI bleibt via html-bg) === */ body.theme-nocturne{ /* Stellschrauben */ --nocturne-tint: #0B1220; --nocturne-tint-amount: 30%; /* 10–20% = dezent; höher = stärker */ /* Getönte Canvas-Farben (oben/unten) */ --canvas-top-tinted: color-mix(in srgb, #0B0F14 calc(100% - var(--nocturne-tint-amount)), var(--nocturne-tint) var(--nocturne-tint-amount)); --canvas-bottom-tinted: color-mix(in srgb, #151B24 calc(100% - var(--nocturne-tint-amount)), var(--nocturne-tint) var(--nocturne-tint-amount)); /* Getönte Spot-Farben für die Säule/Spots */ --spot-indigo-tinted: color-mix(in srgb, #1A2540 85%, var(--nocturne-tint) 15%); --spot-teal-tinted: color-mix(in srgb, #0E2330 85%, var(--nocturne-tint) 15%); /* Fades nutzen diese Vars oft – wir setzen sie hier auf die getönten Werte */ --canvas-top: var(--canvas-top-tinted); --canvas-bottom: var(--canvas-bottom-tinted); /* Body selbst bleibt transparent, damit html{background:#0B1220} nur die Browser-UI färbt */ background: transparent !important; } /* Canvas-Overlay neu einfärben (über html, unter Content) */ body.theme-nocturne .page-canvas{ background: radial-gradient(28% 220% at 102% 50%, /* ~0.55 Deckkraft des Indigo-Spots */ color-mix(in srgb, var(--spot-indigo-tinted) 55%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--canvas-top-tinted) 0%, var(--canvas-bottom-tinted) 100%); } /* === PATCH: Waves-Overlay auch in #what-we-do Karten sichtbar machen === */ #what-we-do .cards .card--trust{ position: relative; overflow: hidden; /* hält die Wellen in der Karte */ } #what-we-do .cards .card--trust .step-waves{ position: absolute; inset: 0; z-index: 0; /* unter dem Content */ pointer-events: none; opacity: .42; /* gleiche Subtilität wie Steps */ } /* Inhalt sicher darüber rendern */ #what-we-do .cards .card--trust > *:not(.step-waves){ position: relative; z-index: 1; } /* === Mobile-Nav (Nocturne) — white text + stronger glass blur === */ @media (max-width: 960px){ /* Deckt beide Varianten ab: .navbar .nav-list UND .nav__list */ body.theme-nocturne :is(.navbar .nav-list, .nav__list){ /* Glasiger Panel-Look wie der Header, aber mit stärkerem Blur */ background: var(--header-bg) padding-box; /* rgba(13,17,23,.60) aus Theme */ border: 1px solid var(--header-border); /* rgba(255,255,255,.08) */ -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); /* Typo */ color: #E8EEF8; /* Weiß auf dunkel */ box-shadow: 0 18px 42px rgba(2,6,23,.45); } /* Links im mobilen Menü auf Weiß stellen + dezenter Hover */ body.theme-nocturne :is(.navbar .nav-list, .nav__list) a{ color: #E8EEF8; background: transparent; border: 1px solid transparent; } body.theme-nocturne :is(.navbar .nav-list, .nav__list) a:hover{ background: var(--nav-hover-bg); /* rgba(255,255,255,.06) */ border-color: rgba(255,255,255,.10); } } /* Kontakt-Dropdown (innerhalb des Menüs) visuell angleichen */ body.theme-nocturne .site-header .nav-dropdown{ background: var(--header-bg) padding-box; border: 1px solid var(--header-border); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); color: #E8EEF8; } body.theme-nocturne .site-header .nav-dropdown .dropdown-item:hover{ background: var(--nav-hover-bg); } /* === Nocturne Mobile-Dropdown: starker Frosted-Glass + weiße Typo === */ body.theme-nocturne{ /* Stellschrauben – wenn du noch "mehr" willst, nur diese 3 ändern */ --glass-blur: 20px; /* 18–24px = kräftiger Blur */ --glass-bg: rgba(13,17,23,.58); /* dunkles, leicht transparentes Panel */ --glass-border: rgba(255,255,255,.10); --glass-hover: rgba(255,255,255,.08); --glass-text: #E8EEF8; } @media (max-width:960px){ /* Panel des Burger-Dropdowns (deckt .nav-list UND .nav__list ab) */ body.theme-nocturne .site-header .navbar :is(.nav-list,.nav__list){ background: var(--glass-bg) padding-box !important; border: 1px solid var(--glass-border) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur)) !important; backdrop-filter: saturate(180%) blur(var(--glass-blur)) !important; box-shadow: 0 20px 50px rgba(2,6,23,.50); color: var(--glass-text); } /* Linkfarbe sicher auf Weiß ziehen */ body.theme-nocturne .site-header .navbar :is(.nav-list,.nav__list) a{ color: var(--glass-text) !important; border: 1px solid transparent; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); } body.theme-nocturne .site-header .navbar :is(.nav-list,.nav__list) a:hover{ background: var(--glass-hover); border-color: rgba(255,255,255,.12); } /* „Kontakt“-Sub-Dropdown an denselben Glass-Look anbinden */ body.theme-nocturne .site-header .nav-dropdown{ background: var(--glass-bg) padding-box !important; border: 1px solid var(--glass-border) !important; -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur)) !important; backdrop-filter: saturate(180%) blur(var(--glass-blur)) !important; color: var(--glass-text); box-shadow: 0 18px 42px rgba(2,6,23,.45); } body.theme-nocturne .site-header .nav-dropdown .dropdown-item:hover{ background: var(--glass-hover); border-color: rgba(255,255,255,.12); } } /* === MOBILE: #what-we-do – Captions ausblenden + Bilder edge-to-edge, 9:16 === */ @media (max-width: 960px){ /* Bildleiste vollbreit, quasi kein horizontaler Abstand */ #what-we-do .process-gallery{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px; /* fast kein Zwischenraum (0px möglich) */ margin-inline: calc(50% - 50vw); /* full-bleed über Container hinaus */ padding-inline: 2px; /* winzige seitliche “Gutter” */ } /* Bild + Platzhalter streng 9:16, groß, ohne Zusatzrahmen/Schlagschatten */ #what-we-do .process-item{ gap: 0; } #what-we-do .process-item img, #what-we-do .process-item .ph{ aspect-ratio: 9 / 16; width: 100%; height: auto; object-fit: cover; border-radius: 12px; box-shadow: none; } /* Untertitel unter den Bildern mobil ausblenden */ #what-we-do .process-caption{ display: none; } } /* === MOBILE HARD OVERRIDE: #what-we-do – Bilder edge-to-edge, Captions aus === */ @media (max-width: 560px){ /* Captions aus */ #what-we-do .process-caption{ display:none !important; } /* Grid full-bleed & praktisch ohne Spalt */ #what-we-do .process-gallery{ grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; /* 0px möglich; 1px vermeidet AA-Kanten */ padding-inline: 0 !important; margin-inline: calc(50% - 50vw) !important; /* über Container bis zum Rand */ justify-content: stretch !important; } /* Tiles maximal groß, keine Zusatzabstände */ #what-we-do .process-item{ width: auto !important; gap: 0 !important; } #what-we-do .process-item img, #what-we-do .process-item .ph{ width: 100% !important; aspect-ratio: 9 / 16 !important; height: auto !important; object-fit: cover; /* füllt das 9:16-Tile voll aus */ border-radius: 12px; /* ggf. kleiner Radius für mehr Fläche */ box-shadow: none; /* maximale Bildfläche */ } /* Alpha-Illustrationen dürfen trotzdem unbeschnitten bleiben */ #what-we-do .process-gallery img.is-alpha{ object-fit: contain !important; background: transparent !important; } } /* === FINAL MOBILE OVERRIDE: What-we-do – Bilder bündig, maximal groß === */ @media (max-width: 560px){ /* Untertitel sicher aus */ #what-we-do .process-caption{ display:none !important; } /* Grid: 3 Spalten, KEIN Abstand */ #what-we-do .process-gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important; column-gap: 0 !important; /* überstimmt frühere 8px */ row-gap: 0 !important; padding-inline: 0 !important; } /* Figure & Bild ohne Zusatzabstände */ #what-we-do .process-item{ gap: 0 !important; } #what-we-do .process-item img, #what-we-do .process-item .ph{ aspect-ratio: 9 / 16 !important; width: 100% !important; height: auto !important; object-fit: cover !important; /* Alpha-Illustrationen füllen stärker */ border-radius: 12px !important; /* etwas kleinerer Radius = mehr Fläche */ box-shadow: none !important; } #what-we-do .process-gallery{ margin-inline: calc(50% - 50vw) !important; /* full-bleed bis zum Viewportrand */ } } /* === MOBILE FINAL: 3 Portraits bündig & maximal groß (<=560px) === */ @media (max-width: 560px){ body.theme-nocturne #what-we-do .process-caption{ display:none !important; } body.theme-nocturne #what-we-do .process-gallery{ /* full-bleed + volle Breite */ margin-inline: calc(50% - 50vw) !important; width: 100vw !important; /* 3 gleich breite Spalten, KEIN Abstand */ grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; justify-content: stretch !important; } body.theme-nocturne #what-we-do .process-item{ width: auto !important; gap: 0 !important; } body.theme-nocturne #what-we-do .process-item img, body.theme-nocturne #what-we-do .process-item .ph{ display:block !important; width:100% !important; height:auto !important; aspect-ratio: 9 / 16 !important; object-fit: cover !important; /* auch für Alpha-Assets */ border-radius: 12px !important; box-shadow: none !important; } /* Alpha-Bilder: ebenfalls füllen (vorher contain) */ body.theme-nocturne #what-we-do .process-gallery img.is-alpha{ object-fit: cover !important; background: transparent !important; } } /* === Spiral Words (MailerLite-Style) ===================================== */ .spiral-words{ position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); display: inline-block; padding: 0 .1em; font-size: clamp(28px, 5.4vw, 64px); /* Headline-Größe */ line-height: 1.05; font-weight: 800; letter-spacing: -0.01em; text-align: center; background: transparent; box-shadow: none; isolation: isolate; } .spiral-words .sw-word{ position: relative; z-index: 2; background: linear-gradient(90deg, var(--tt-violet), var(--tt-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; transition: opacity .28s ease, transform .28s ease; } .spiral-words .sw-measure{ position: absolute; left: -9999px; top: -9999px; visibility: hidden; white-space: nowrap; font: inherit; font-weight: 800; } /* Ein-/Ausblend-Motion */ .spiral-words.is-in .sw-word{ opacity: 1; transform: translateY(0); } .spiral-words.is-out .sw-word{ opacity: 0; transform: translateY(-4px); } /* Motion-Respekt */ @media (prefers-reduced-motion: reduce){ .spiral-words .sw-ink{ transition: none; } .spiral-words .sw-word{ transition: none; } } /* === Spiral center: rotating word (MailerLite-like) === */ .spiral-words{ position:absolute; z-index: 10; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; text-align:center; font-weight:900; letter-spacing:-.02em; font-size: clamp(32px, 7vw, 82px); /* groß wie ein Titel */ } .spiral-words .sw-word{ display:inline-block; background: linear-gradient(90deg, var(--tt-violet), var(--tt-blue)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:saturate(110%); opacity:0; transform: translateY(.18em); transition: opacity .30s ease, transform .30s cubic-bezier(.22,.7,.3,1); } .spiral-words .sw-word.in{ opacity:1; transform: translateY(0); } /* „Wisch“-Highlight unter dem Wort */ .spiral-words .sw-ink{ position:absolute; z-index:-1; /* hinter dem Text */ left:50%; transform: translateX(-50%) scaleX(0); transform-origin:left center; bottom:.08em; height:.68em; width:0; border-radius:8px; background: linear-gradient(90deg, color-mix(in srgb, var(--tt-violet) 22%, transparent), color-mix(in srgb, var(--tt-blue) 22%, transparent)); transition: transform .36s cubic-bezier(.22,.7,.3,1); } .spiral-words .sw-ink.on{ transform: translateX(-50%) scaleX(1); } /* === Spiral center: rotating word (MailerLite-like) === */ .spiral-words{ position:absolute; z-index:30; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap; text-align:center; pointer-events:none; font-weight:900; letter-spacing:-.02em; font-size: clamp(32px, 7vw, 84px); } .spiral-words .sw-word{ display:inline-block; background: linear-gradient(90deg, var(--tt-violet), var(--tt-blue)); -webkit-background-clip:text; background-clip:text; color:transparent; filter:saturate(110%); opacity:0; transform: translateY(.18em); transition: opacity .30s ease, transform .30s cubic-bezier(.22,.7,.3,1); } .spiral-words .sw-word.in{ opacity:1; transform: translateY(0); } /* „Wisch“-Highlight unter dem Wort */ .spiral-words .sw-ink{ position:absolute; z-index:-1; left:50%; bottom:.08em; height:.68em; width:0; /* width setzt JS dynamisch */ transform: translateX(-50%) scaleX(0); transform-origin:left center; border-radius:8px; background: linear-gradient(90deg, color-mix(in srgb, var(--tt-violet) 22%, transparent), color-mix(in srgb, var(--tt-blue) 22%, transparent)); transition: transform .36s cubic-bezier(.22,.7,.3,1); } .spiral-words .sw-ink.on{ transform: translateX(-50%) scaleX(1); } @media (prefers-reduced-motion:reduce){ .spiral-words .sw-word, .spiral-words .sw-ink{ transition:none; } } /* === MOBILE HARD OVERRIDE: What-we-do Portraits — edge-to-edge, 9:16, no captions === */ @media (max-width: 960px){ /* Container-Padding entfernen, damit full-bleed klappt */ #what-we-do > .container{ padding-inline: 0 !important; } /* Grid voll bis an den Viewportrand, Null-Spalt */ #what-we-do .process-gallery{ margin-inline: calc(50% - 50vw) !important; width: 100vw !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; justify-content: stretch !important; padding-inline: 0 !important; } /* eventuelle Figure-Defaultmargins/Gaps killen */ #what-we-do .process-item, #what-we-do .process-gallery figure{ margin: 0 !important; gap: 0 !important; } /* Bilder/PH streng 9:16 & maximal groß */ #what-we-do .process-item img, #what-we-do .process-item .ph{ display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; object-fit: cover !important; border-radius: 12px !important; box-shadow: none !important; } /* Captions mobil ausblenden */ #what-we-do .process-caption{ display: none !important; } } /* irgendwo global, z.B. bei .spiral-words oder :root */ .spiral-words { --sw-w: 0px; } /* am Dateiende hinzufügen */ #spiral-words .sw-ink { width: var(--sw-w, 0px) !important; } /* FIX: Chrome darkening on alpha images in Nocturne */ body.theme-nocturne #what-we-do .process-gallery img.is-alpha{ mix-blend-mode: normal !important; opacity: 1 !important; background: transparent !important; /* safety */ } /* === Spiral Words — FINAL OVERRIDE === */ #spiral-words{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index: 200 !important; /* sicher über Lottie */ pointer-events: none; } #spiral-words .sw-word{ background: linear-gradient(90deg, var(--tt-violet), var(--tt-blue)); -webkit-background-clip: text; background-clip: text; /* Fallback: zeigt Text notfalls in Weiß, wenn BG-Clip nicht greift */ color: #fff; -webkit-text-fill-color: transparent; } #spiral-words .sw-ink{ width: var(--sw-w, 0px) !important; /* Breite kommt aus JS */ } /* === Tighten gap: Spiral (#cases) -> "Schnell. Klar. Ohne Risiko." (#process) === */ #cases { padding-bottom: 0 !important; } /* Abstand UNTER der Spirale weg */ #process { padding-top: 0 !important; } /* Abstand ÜBER der Headline weg */ #process .h2 { margin-top: 0 !important; } /* Sicherheitsnetz, falls H2 oben Abstand hat */ /* Wenn der weiche Top-Fade der nächsten Section wie "Padding" wirkt, ausblenden: */ body.theme-nocturne #process::before { content: none !important; } /* === MOBILE: sanftes Horizontal-Padding nur für die gezeigten Abschnitte === */ @media (max-width: 960px){ :is(#what-we-do, #before-after) > .container{ padding-inline: clamp(16px, 5vw, 22px); /* leicht mehr Luft links/rechts */ } } /* === MOBILE: Extra Padding nur für Titel + Subline in #what-we-do === */ @media (max-width: 960px){ #what-we-do .h2, #what-we-do .muted{ padding-inline: clamp(8px, 4vw, 20px); } } /* page: impressum spacing */ .page-impressum .section{padding-top:24px;padding-bottom:72px} .page-impressum header.center{margin-bottom:12px} .page-impressum .backlink{margin-top:28px} /* ===== Layout-Preview Karten auf der Startseite ===== */ #layout-previews .layout-cards{ margin-top: clamp(16px, 3vw, 24px); } .layout-card{ display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; } .layout-card__link{ margin-top: 4px; font-weight: 600; font-size: .95rem; } .layout-card:hover, .layout-card:focus-visible{ text-decoration: none; } /* ===== Layout-Preview Seiten (Gerüste) ===== */ body.layout-preview main.section{ padding-block: clamp(40px, 6vw, 72px); } .layout-hero{ text-align: left; margin-bottom: clamp(18px, 3vw, 24px); } .layout-hero .tiny{ margin-bottom: 6px; } .layout-frame{ max-width: 980px; margin: 0 auto; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(15,23,42,.90)); border: 1px solid rgba(148,163,184,.55); box-shadow: 0 20px 40px rgba(15,23,42,.65); } /* 12-Spalten-Grid aus Platzhalter-Blöcken */ .layout-row{ display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; } .layout-block{ border-radius: 10px; background: rgba(15,23,42,1); border: 1px dashed rgba(148,163,184,.85); min-height: 38px; } .layout-block--hero{ min-height: 120px; } .layout-block--tall{ min-height: 80px; } .layout-block--small{ min-height: 28px; } .layout-span-12{ grid-column: span 12; } .layout-span-10{ grid-column: span 10; } .layout-span-8{ grid-column: span 8; } .layout-span-7{ grid-column: span 7; } .layout-span-6{ grid-column: span 6; } .layout-span-5{ grid-column: span 5; } .layout-span-4{ grid-column: span 4; } .layout-span-3{ grid-column: span 3; } @media (max-width: 720px){ .layout-row{ grid-template-columns: 1fr; } .layout-span-12, .layout-span-10, .layout-span-8, .layout-span-7, .layout-span-6, .layout-span-5, .layout-span-4, .layout-span-3{ grid-column: auto; } } /* ===== Layout-Previews: Karten mit vollflächigem Bild-Hintergrund ===== */ .layout-card{ position: relative; overflow: hidden; color: #F9FAFB; /* Text auf dunklerem Bild gut lesbar */ } /* Text/Content immer über dem Bild */ .layout-card > *{ position: relative; z-index: 1; } /* Bild-Hintergrund, nutzt komplette Karte, wird bei Bedarf gecroppt */ .layout-card::before{ content: ""; position: absolute; inset: 2px; /* lässt den animierten Gradient-Rand sichtbar */ border-radius: inherit; background-image: linear-gradient( to bottom, rgba(15,23,42,0.10), rgba(15,23,42,0.65) ), var(--layout-bg); background-size: cover; /* füllt das gesamte „Board“, schneidet ggf. ab */ background-position: center; background-repeat: no-repeat; z-index: 0; } /* Layout-Previews: Text in den Bild-Karten weiß */ #layout-previews .layout-card, #layout-previews .layout-card h3, #layout-previews .layout-card p, #layout-previews .layout-card .layout-card__link{ color: #F9FAFB; }