/* ========================================================================== Enhancements – „Hochstyling"-Schicht (additiv, bricht nichts) - Reveal-Animationen (flash-frei via .gle-anim auf ) - Micro-Interactions: Buttons, Cards, Nav, Slider - Hero-USPs + Scroll-Cue, Eyebrows, Section-Akzente - Respektiert prefers-reduced-motion ========================================================================== */ /* ---- Globale Politur ---------------------------------------------------- */ html{ scroll-behavior:smooth; } body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{ background:color-mix(in srgb, var(--ci-primary) 28%, transparent); color:var(--ci-dark); } /* Einheitlicher, sichtbarer Fokus (Tastatur) */ a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:3px solid color-mix(in srgb, var(--ci-primary) 55%, transparent); outline-offset:2px; border-radius:8px; } /* ---- Section-Akzente & Eyebrows ---------------------------------------- */ .section__eyebrow{ display:inline-flex; align-items:center; gap:.5rem; margin:0 0 .7rem; color:var(--ci-primary-700); font-family:var(--font-accent); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; } .section--green .section__eyebrow{ color:#eafbe1; } /* Dezenter Akzentstrich – überall dort, wo ein Eyebrow vor dem Titel steht */ .section__title{ position:relative; } .section__eyebrow + .section__title::after{ content:""; display:block; width:56px; height:4px; margin-top:.7rem; border-radius:999px; background:linear-gradient(90deg, var(--ci-primary) 0%, var(--ci-primary-700) 100%); } .section--green .section__eyebrow + .section__title::after{ background:linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,.5) 100%); } .section__header{ max-width:760px; } /* ---- Buttons: Lift + Glanz -------------------------------------------- */ .btn{ transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; will-change:transform; position:relative; overflow:hidden; } .btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(22,147,56,.30); filter:brightness(1.04); } .btn--primary:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(22,147,56,.24); } .btn--outline:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.12); } /* sanfter Glanz-Sweep beim Hover */ .btn--primary::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform:skewX(-18deg); transition:left .6s ease; pointer-events:none; } .btn--primary:hover::after{ left:140%; } /* ---- Navigation: animierter Unterstrich -------------------------------- */ .menu a{ position:relative; padding-bottom:4px; transition:color .15s ease; } .menu a::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:linear-gradient(90deg, var(--ci-primary), var(--ci-primary-700)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .menu a:hover{ opacity:1; color:var(--ci-primary-700); } .menu a:hover::after, .menu a.is-active::after{ transform:scaleX(1); } /* ---- Header: kompakter + stärkerer Schatten beim Scrollen -------------- */ .site-header{ transition:box-shadow .25s ease, padding .25s ease, background .25s ease; } body.scrolled .site-header{ box-shadow:0 10px 30px rgba(0,0,0,.10); padding-top:calc(var(--header-pad) - 6px); padding-bottom:calc(var(--header-pad) - 6px); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.1) blur(8px); } /* ---- Cards (Leistungen): Lift, Icon-Kachel, Akzentkante ---------------- */ .card{ transition:transform .22s ease, box-shadow .22s ease; position:relative; overflow:hidden; } .card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--ci-primary), var(--ci-primary-700)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); } .card:hover::before{ transform:scaleX(1); } .card__icon{ display:inline-grid; place-items:center; width:3rem; height:3rem; border-radius:14px; background:color-mix(in srgb, var(--ci-primary) 14%, #fff); color:var(--ci-primary-700); font-size:1.4rem; transition:transform .22s ease, background .22s ease; } .card:hover .card__icon{ transform:scale(1.06) rotate(-3deg); background:color-mix(in srgb, var(--ci-primary) 22%, #fff); } /* ---- Feature-Liste (Warum GLE): Hover + Icon-Kachel -------------------- */ .feature-list li{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .feature-list li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--ci-primary) 35%, transparent); } .feature-icon{ width:2.4rem; height:2.4rem; border-radius:12px; background:color-mix(in srgb, var(--ci-primary) 12%, #fff); } /* ---- FAQ: weicher Hover ------------------------------------------------- */ .faq-item{ transition:box-shadow .2s ease, border-color .2s ease; } .faq-item:hover{ box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--ci-primary) 28%, transparent); } /* ---- Galerie-Header (über dem Full-Bleed-Slider) ---------------------- */ .section--gallery .gallery-head{ text-align:center; padding:clamp(2.5rem,6vw,4rem) var(--page-gutter) clamp(1.4rem,4vw,2.4rem); } .section--gallery .gallery-head .section__eyebrow{ justify-content:center; } .section--gallery .gallery-head .section__title{ margin:0 0 .6rem; } .section--gallery .gallery-head .section__title::after{ content:""; display:block; width:56px; height:4px; margin:.7rem auto 0; border-radius:999px; background:linear-gradient(90deg, var(--ci-primary), var(--ci-primary-700)); } .section--gallery .gallery-head .section__intro{ margin:0 auto; max-width:60ch; color:color-mix(in srgb, var(--ci-dark) 80%, transparent); } /* ---- Slider: Pfeile/Dots aufwerten + Bild-Zoom ------------------------- */ .nav-btn{ transition:transform .18s ease, background .18s ease, box-shadow .18s ease; } .nav-btn:hover{ transform:translateY(-50%) scale(1.08); background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.22); } /* dezenter Verlauf unten für Dot-Lesbarkeit */ .fullslider-lite::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:90px; z-index:1; background:linear-gradient(180deg, transparent, rgba(0,0,0,.28)); pointer-events:none; } /* ---- Sticky-Contact: Hover -------------------------------------------- */ .sc-btn{ transition:transform .16s ease, box-shadow .16s ease; } .sc-btn:hover{ transform:translateX(-3px); box-shadow:var(--shadow-md); } .scm-item{ transition:background .16s ease; } /* ---- Footer-Socials -------------------------------------------------- */ .footer-social a{ transition:transform .16s ease, background .16s ease, color .16s ease; } .footer-social a:hover{ transform:translateY(-2px); background:var(--ci-primary); color:#fff; } /* ========================================================================== HERO – USP-Strip + Scroll-Cue ========================================================================== */ .hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem .8rem; } .hero__usps{ list-style:none; margin:1.6rem auto 0; padding:0; max-width:760px; display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem .7rem; } .hero__usps li{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:.5rem .85rem; border-radius:999px; } .hero__usps i{ color:#d9f6c6; font-size:.95rem; } .hero__scroll{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2; width:28px; height:46px; border:2px solid rgba(255,255,255,.7); border-radius:16px; display:flex; justify-content:center; } .hero__scroll::after{ content:""; width:5px; height:9px; border-radius:3px; background:#fff; margin-top:8px; animation:heroScrollDot 1.7s ease-in-out infinite; } @keyframes heroScrollDot{ 0%{ opacity:0; transform:translateY(0); } 30%{ opacity:1; } 60%{ opacity:1; transform:translateY(12px); } 100%{ opacity:0; transform:translateY(14px); } } @media (max-width:640px){ .hero__scroll{ display:none; } } /* ========================================================================== REVEAL – nur aktiv, wenn gesetzt ist (das Flag wird per Inline-Script früh gesetzt → kein Flackern; bei prefers-reduced-motion wird es NICHT gesetzt → alles sofort sichtbar) ========================================================================== */ .gle-anim .rv{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .gle-anim .rv.in{ opacity:1; transform:none; } /* Container mit gestaffelten Kindern */ .gle-anim .rv-stagger > *{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .gle-anim .rv-stagger.in > *{ opacity:1; transform:none; } .gle-anim .rv-stagger.in > *:nth-child(1){ transition-delay:.04s; } .gle-anim .rv-stagger.in > *:nth-child(2){ transition-delay:.12s; } .gle-anim .rv-stagger.in > *:nth-child(3){ transition-delay:.20s; } .gle-anim .rv-stagger.in > *:nth-child(4){ transition-delay:.28s; } .gle-anim .rv-stagger.in > *:nth-child(5){ transition-delay:.36s; } .gle-anim .rv-stagger.in > *:nth-child(6){ transition-delay:.44s; } /* ========================================================================== Reduced Motion – alles Beruhigen ========================================================================== */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .hero__scroll::after{ animation:none; } .hero::before{ animation:none; } .btn, .card, .feature-list li, .nav-btn, .sc-btn, .footer-social a, .card__icon, .menu a::after, .card::before{ transition:none !important; } .btn--primary::after{ display:none; } }