/* ============================================================================ VSO 2026 – main.css (extrahiert aus index.html) Version: 2.3.0 (2026-05-02) Autor: Andreas Grundke – Grundke IT-Service CI: CI 2026.01 · Grün (Cloud-Design v3) · Cormorant Garamond + Inter Hinweis: Variable --gold/--gold-lt umbenannt zu --accent/--accent-mid (semantisch korrekt, war nur historisch "gold" benannt) ============================================================================ */ /* ============================================================================ VSO 2026 v2.0 – Anlehnung an Kanzlei Gmeinwieser Hell · ruhig · klassisch · viel Weißraum · große Serif-Headlines · Grün ============================================================================ */ :root{ --ink: #14202a; --ink-md: #3a4854; --ink-lt: #6c7884; --line: #e7ebef; --line-md: #d3dae0; --bg: #ffffff; --bg-soft: #f6f4ef; --bg-cool: #f1f4f7; --accent: #4a7a55; --accent-dk: #2f5638; --accent-lt: #b6cdb8; --accent-mid:#8db092; --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --container: 1240px; --shadow-sm: 0 2px 12px rgba(20,32,42,.05); --shadow-md: 0 14px 40px rgba(20,32,42,.10); --shadow-lg: 0 22px 60px rgba(20,32,42,.16); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* Lenis übernimmt Mausrad-Scrolling. Wenn Lenis aktiv ist, hat die Klasse "lenis lenis-smooth" – CSS scroll-behavior wird dann ignoriert. */ html.lenis-smooth{ scroll-behavior:auto !important; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } body{ margin:0; font-family:var(--sans); font-size:15px; line-height:1.75; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; height:auto; } a{ color:inherit; text-decoration:none; } a:focus-visible, button:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:3px; } h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.12; letter-spacing:-.005em; margin:0 0 .5em; color:var(--ink); } h1{ font-size:clamp(2.8rem, 6vw, 5rem); font-weight:400; } h2{ font-size:clamp(2.1rem, 3.8vw, 3rem); font-weight:400; } h3{ font-size:1.35rem; font-weight:500; } .italic{ font-style:italic; font-weight:300; } /* ---------- Skip-Link (a11y) ---------- */ .skip-link{ position:absolute; left:-9999px; top:0; background:var(--accent-dk); color:#fff; padding:12px 22px; font-weight:600; z-index:9999; border-radius:0 0 6px 0; } .skip-link:focus{ left:0; } .wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 32px; } section{ padding:120px 0; position:relative; } section[id]{ scroll-margin-top:100px; } /* sticky-Header (~92px) + bisschen Luft */ .eyebrow-c{ font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; display:inline-flex; align-items:center; gap:14px; } .eyebrow-c::before{ content:""; width:36px; height:1px; background:var(--accent); } /* ---------- Topbar ---------- */ .topbar{ background:var(--bg-soft); color:var(--ink-md); font-size:12.5px; border-bottom:1px solid var(--line); } .topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:24px; } .topbar .meta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .topbar .meta a{ display:inline-flex; align-items:center; gap:7px; transition:color .2s; } .topbar .meta a:hover{ color:var(--accent); } .topbar .meta i{ width:13px; height:13px; } .topbar .meta .sep{ opacity:.4; } .lang-wrap{ display:flex; align-items:center; gap:10px; } .lang-wrap .lang-label{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } .lang-wrap .lang-label i{ width:14px; height:14px; } .lang-sw{ display:flex; gap:4px; align-items:center; background:#fff; padding:4px; border:1px solid var(--line-md); border-radius:3px; box-shadow:var(--shadow-sm); } .lang-sw a{ padding:6px 12px; font-weight:600; font-size:12px; letter-spacing:.1em; border-radius:2px; color:var(--ink-md); transition:all .2s; position:relative; } .lang-sw a:hover{ color:var(--accent-dk); background:var(--bg-soft); } .lang-sw a.act{ color:#fff; background:var(--accent-dk); } @keyframes lang-pulse { 0%, 100% { box-shadow:0 0 0 0 rgba(74,122,85,.45); } 50% { box-shadow:0 0 0 8px rgba(74,122,85,0); } } .lang-sw.pulse{ animation:lang-pulse 2s ease-out 3; } /* ---------- Header ---------- */ header.site{ position:sticky; top:0; background:rgba(255,255,255,.97); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); z-index:80; } header.site .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:92px; gap:24px; } .logo{ display:flex; align-items:center; gap:14px; } .logo .name{ font-family:var(--serif); font-size:23px; font-weight:500; color:var(--ink); letter-spacing:-.005em; line-height:1.1; } .logo .tagline{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-lt); margin-top:3px; } nav.main{ display:flex; align-items:center; gap:36px; } nav.main a:not(.btn){ font-size:14px; font-weight:500; color:var(--ink-md); position:relative; transition:color .2s; } nav.main a:not(.btn):hover{ color:var(--accent); } nav.main a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s; } nav.main a:not(.btn):hover::after{ transform:scaleX(1); } .btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-family:var(--sans); font-size:13.5px; font-weight:500; letter-spacing:.04em; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; white-space:nowrap; text-decoration:none; } .btn i{ width:15px; height:15px; } .btn-primary{ background:var(--accent-dk); color:#fff !important; border-color:var(--accent-dk); } .btn-primary:hover{ background:var(--accent); color:#fff !important; border-color:var(--accent); transform:translateY(-1px); box-shadow:0 8px 20px rgba(74,122,85,.32); } .btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-md); } .btn-outline:hover{ border-color:var(--accent); color:var(--accent); } .btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); } .btn-outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; } .btn-gold{ background:var(--accent-dk); color:#fff; border-color:var(--accent-dk); } .btn-gold:hover{ background:#fff; color:var(--accent-dk); border-color:#fff; transform:translateY(-1px); } .menu-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink); } .menu-toggle i{ width:24px; height:24px; } /* ============ HERO – Slider + Sticky CTA ============ */ .hero{ position:relative; background:#0f1922; overflow:hidden; padding:0 !important; } .hero-grid{ display:grid; grid-template-columns:1fr 360px; min-height:clamp(560px, calc(100vh - 134px), 720px); } .hero-slider{ position:relative; overflow:hidden; background:#0f1922; } .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; pointer-events:none; } .hero-slide.act{ opacity:1; pointer-events:auto; } .hero-slide .bg-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.05); transition:transform 7s ease; z-index:0; } .hero-slide.act .bg-img{ transform:scale(1.12); } .hero-slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,25,34,.30) 0%, rgba(15,25,34,.45) 60%, rgba(15,25,34,.78) 100%); z-index:1; } .hero-slide .copy{ position:absolute; left:0; right:0; bottom:0; padding:0 64px 88px; z-index:2; max-width:780px; } .hero-slide .eyebrow-c{ color:var(--accent-mid); margin-bottom:22px; } .hero-slide .eyebrow-c::before{ background:var(--accent-mid); } .hero-slide h1, .hero-slide h2.hero-h{ color:#fff; font-family:var(--serif); font-size:clamp(2.6rem, 5vw, 4.4rem); font-weight:400; line-height:1.12; margin:0 0 24px; letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.45); } .hero-slide h1 .italic, .hero-slide h2.hero-h .italic{ display:block; font-style:italic; font-weight:300; color:#e9d8a6; } .hero-slide p.sub{ font-size:17px; line-height:1.7; color:#dde6ec; max-width:54ch; margin:0 0 32px; text-shadow:0 1px 20px rgba(0,0,0,.3); } .hero-slide .cta-row{ display:flex; flex-wrap:wrap; gap:12px; } .hello-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; } .hello-chip{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:18px; letter-spacing:.005em; color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .hello-chip:nth-child(2){ color:#f4e8cd; } .hello-chip:nth-child(3){ color:#e6d4a3; } .hello-chip:nth-child(4){ color:#d8b975; } .lang-hint{ display:inline-flex; align-items:center; gap:8px; margin:0 0 26px; padding:8px 14px; background:rgba(216,185,117,.16); border:1px dashed rgba(216,185,117,.55); border-radius:999px; font-size:13px; font-weight:500; letter-spacing:.04em; color:#f4e8cd; } .lang-hint i{ width:15px; height:15px; color:var(--accent-mid); } .hero-dots{ position:absolute; left:64px; bottom:38px; display:flex; gap:10px; z-index:5; } .hero-dots button{ width:36px; height:3px; border:0; padding:0; background:rgba(255,255,255,.28); cursor:pointer; transition:background .25s; } .hero-dots button.act{ background:var(--accent-mid); } .hero-arrows{ position:absolute; right:32px; bottom:36px; display:flex; gap:8px; z-index:5; } .hero-arrows button{ width:44px; height:44px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; cursor:pointer; transition:all .25s; } .hero-arrows button:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.5); } .hero-arrows i{ width:18px; height:18px; } .hero-cta{ background:var(--bg-soft); padding:56px 40px; display:flex; flex-direction:column; border-left:1px solid var(--line); } .hero-cta .cta-eyebrow{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .hero-cta .cta-h{ font-family:var(--serif); font-size:2rem; font-weight:400; line-height:1.15; color:var(--ink); margin:0 0 14px; letter-spacing:-.005em; } .hero-cta .cta-h .italic{ display:block; font-style:italic; font-weight:300; color:var(--accent); } .hero-cta .cta-sub{ font-size:14px; color:var(--ink-md); line-height:1.65; margin:0 0 32px; } .cta-block{ display:block; padding:22px 0; border-top:1px solid var(--line); transition:padding-left .25s; text-decoration:none; } .cta-block:last-of-type{ border-bottom:1px solid var(--line); } .cta-block:hover{ padding-left:6px; } .cta-block .cta-row-i{ display:flex; align-items:center; gap:14px; margin-bottom:6px; } .cta-block .cta-ico{ width:34px; height:34px; border-radius:50%; background:#fff; color:var(--accent-dk); display:grid; place-items:center; flex-shrink:0; border:1px solid var(--line); } .cta-block .cta-ico i{ width:16px; height:16px; } .cta-block .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-lt); font-weight:600; } .cta-block .val{ font-family:var(--serif); font-size:24px; font-weight:500; color:var(--ink); line-height:1.1; letter-spacing:-.005em; font-variant-numeric:tabular-nums; } .cta-block .hint{ font-size:12px; color:var(--ink-lt); margin-top:4px; margin-left:48px; } .hero-cta .hours{ margin-top:28px; display:flex; align-items:flex-start; gap:12px; font-size:13px; color:var(--ink-md); text-decoration:none; transition:color .2s; } .hero-cta a.hours:hover{ color:var(--accent-dk); } .hero-cta .hours i{ width:16px; height:16px; color:var(--accent); flex-shrink:0; margin-top:3px; } .map-link-hint{ display:inline-block; margin-top:6px; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--accent); text-transform:none; } /* ============ Trust Bar ============ */ .trust{ background:#fff; padding:34px 0; border-bottom:1px solid var(--line); } .trust .wrap{ display:flex; flex-wrap:wrap; gap:18px 48px; align-items:center; justify-content:center; } .trust-item{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-md); font-weight:500; } .trust-item i{ width:16px; height:16px; color:var(--accent); } .trust-item .sep{ color:var(--line-md); font-size:18px; } /* ============ USP ============ */ .usp-row{ background:#fff; padding:120px 0; } .usp-row .head{ text-align:center; max-width:680px; margin:0 auto 80px; } .usp-row .head h2{ margin:0; } .usp-row .head h2 .italic{ display:block; color:var(--accent); } .usp-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:48px; text-align:center; } .usp-cell .ico-circle{ width:96px; height:96px; margin:0 auto 24px; border-radius:50%; background:var(--bg-soft); color:var(--accent-dk); display:grid; place-items:center; border:1px solid var(--line); transition:all .35s; } .usp-cell .ico-circle i{ width:36px; height:36px; stroke-width:1.4; } .usp-cell:hover .ico-circle{ background:var(--accent-dk); color:var(--bg-soft); border-color:var(--accent-dk); transform:translateY(-4px); } .usp-cell h3{ font-family:var(--serif); font-size:1.45rem; font-weight:500; margin-bottom:10px; color:var(--ink); } .usp-cell p{ font-size:14px; color:var(--ink-md); line-height:1.65; margin:0 auto; max-width:26ch; } /* ============ ABOUT ============ */ .about{ background:var(--bg-soft); } .about-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:96px; align-items:center; } .about-photos{ position:relative; aspect-ratio:5/6; } .about-photos .main-photo{ position:absolute; inset:0 30% 18% 0; background-size:cover; background-position:center 30%; background-color:#dde6ec; box-shadow:var(--shadow-md); } .about-photos .small-photo{ position:absolute; width:55%; aspect-ratio:1/1; right:0; bottom:0; background-size:cover; background-position:center; background-color:#cbd6dd; border:8px solid var(--bg-soft); box-shadow:var(--shadow-md); } .about-photos .frame{ position:absolute; top:24px; left:-24px; width:80%; height:80%; border:1px solid var(--accent); z-index:-1; } .about-text h2{ margin-bottom:32px; } .about-text h2 .italic{ display:block; color:var(--accent); } .about-text p{ font-size:15.5px; color:var(--ink-md); line-height:1.85; margin:0 0 20px; } .about-text p:first-of-type::first-letter{ font-family:var(--serif); font-size:3em; font-weight:400; float:left; line-height:.9; margin:.05em .12em 0 0; color:var(--accent-dk); } @media (max-width:600px){ /* Drop-Cap auf Mobile deaktivieren – frisst zu viel Platz, bricht oft */ .about-text p:first-of-type::first-letter{ font-size:inherit; float:none; margin:0; line-height:inherit; } } .about-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin-top:36px; padding-top:32px; border-top:1px solid var(--line); } .about-features .f{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-md); } .about-features .f i{ width:16px; height:16px; color:var(--accent); flex-shrink:0; } /* ============ SERVICES ============ */ .services{ background:#fff; } .sec-head{ text-align:center; max-width:760px; margin:0 auto 80px; } .sec-head h2{ margin-bottom:22px; } .sec-head h2 .italic{ display:block; color:var(--accent); } .sec-head p{ font-size:16px; color:var(--ink-md); line-height:1.7; margin:0; } .svc-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .svc{ background:#fff; padding:48px 38px; display:flex; flex-direction:column; transition:background .25s; } .svc:hover{ background:#fcfaf6; } .svc .ico-line{ color:var(--accent-dk); margin-bottom:26px; } .svc .ico-line i{ width:36px; height:36px; stroke-width:1.4; } .svc h3{ font-family:var(--serif); font-size:1.55rem; font-weight:500; color:var(--ink); margin-bottom:14px; } .svc p{ font-size:14.5px; color:var(--ink-md); line-height:1.7; margin:0 0 18px; flex-grow:1; } .svc ul{ list-style:none; padding:18px 0 0; margin:0; border-top:1px solid var(--line); } .svc ul li{ font-size:13.5px; color:var(--ink-md); padding:5px 0 5px 18px; position:relative; } .svc ul li::before{ content:""; position:absolute; left:0; top:14px; width:8px; height:1px; background:var(--accent); } /* ============ Quote Band ============ */ .quote-band{ position:relative; padding:0; min-height:560px; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .quote-band .bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-color:#2a3540; } .quote-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,25,34,.55) 0%, rgba(15,25,34,.7) 100%); } .quote-inner{ position:relative; z-index:1; max-width:780px; padding:120px 32px; color:#fff; } .quote-inner .mark{ font-family:var(--serif); font-size:120px; line-height:1; font-style:italic; color:var(--accent-mid); opacity:.6; margin-bottom:-30px; } .quote-inner blockquote{ font-family:var(--serif); font-size:clamp(1.7rem, 3vw, 2.3rem); font-weight:300; font-style:italic; line-height:1.35; color:#fff; margin:0 0 28px; letter-spacing:-.005em; } .quote-inner cite{ font-family:var(--sans); font-style:normal; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-mid); font-weight:600; } /* ============ Process ============ */ .process{ background:var(--bg-soft); } .process-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; margin-top:60px; } .step{ position:relative; padding:0 28px; border-left:1px solid var(--line-md); } .step:first-child{ border-left:0; padding-left:0; } .step .num{ font-family:var(--serif); font-size:48px; font-weight:400; font-style:italic; color:var(--accent); line-height:1; margin-bottom:18px; } .step h3{ font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--ink); margin-bottom:10px; } .step p{ font-size:13.5px; color:var(--ink-md); line-height:1.65; margin:0; } /* ============ FAQ (für GEO/AI-Suche) ============ */ .faq{ background:#fff; } .faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } .faq details{ background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; transition:box-shadow .25s, border-color .25s; } .faq details[open]{ box-shadow:var(--shadow-md); border-color:var(--accent); } .faq summary{ list-style:none; cursor:pointer; padding:22px 28px; font-family:var(--serif); font-size:1.18rem; font-weight:500; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:18px; position:relative; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:""; width:14px; height:14px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .25s; flex-shrink:0; } .faq details[open] summary::after{ transform:rotate(-135deg); } .faq .answer{ padding:0 28px 24px; font-size:15px; color:var(--ink-md); line-height:1.75; } /* ============ Contact ============ */ .contact{ background:#fff; } .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; } .contact h2{ margin-bottom:24px; } .contact h2 .italic{ display:block; color:var(--accent); } .contact .lead{ font-size:16px; color:var(--ink-md); line-height:1.7; margin:0 0 36px; max-width:46ch; } .contact-info{ display:flex; flex-direction:column; } .contact-row{ display:flex; align-items:flex-start; gap:18px; padding:22px 0; border-bottom:1px solid var(--line); transition:padding-left .2s, background-color .2s; } a.contact-row:hover{ padding-left:6px; } .contact-row .ico{ width:40px; height:40px; color:var(--accent-dk); display:grid; place-items:center; flex-shrink:0; background:var(--bg-soft); border-radius:50%; } .contact-row .ico i{ width:18px; height:18px; } .contact-row .lbl{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-lt); font-weight:600; margin-bottom:3px; } .contact-row .val{ font-size:16px; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; } .contact-cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; } .map-wrap{ border:1px solid var(--line); height:100%; min-height:480px; position:relative; overflow:hidden; } .map-wrap iframe{ display:block; width:100%; height:100%; min-height:480px; border:0; } .map-overlay-cta{ position:absolute; right:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:11px 18px; background:var(--accent-dk); color:#fff; font-size:13px; font-weight:500; letter-spacing:.04em; border-radius:2px; box-shadow:var(--shadow-md); transition:all .25s; z-index:2; text-decoration:none; } .map-overlay-cta:hover{ background:var(--accent); transform:translateY(-1px); } .map-overlay-cta i{ width:15px; height:15px; } /* ============ Footer ============ */ footer.site{ background:#0f1922; color:#9aaab6; padding:72px 0 28px; } .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px; padding-bottom:42px; border-bottom:1px solid rgba(255,255,255,.08); } .foot-brand .name{ font-family:var(--serif); font-size:24px; font-weight:500; color:#fff; margin-bottom:8px; } .foot-brand .tag{ font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:var(--accent-mid); margin-bottom:18px; } .foot-brand p{ font-size:13.5px; line-height:1.75; margin:0; max-width:34ch; } .foot-col h4{ font-family:var(--sans); font-size:11px; text-transform:uppercase; letter-spacing:.2em; color:#fff; font-weight:600; margin:0 0 18px; } .foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .foot-col a{ font-size:13.5px; color:#9aaab6; transition:color .2s; } .foot-col a:hover{ color:var(--accent-mid); } .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:24px; font-size:12px; color:#5e7a8a; } .foot-bottom .legal{ display:flex; gap:22px; flex-wrap:wrap; } .foot-bottom a:hover{ color:var(--accent-mid); } .foot-bottom .ci-note{ font-size:11px; letter-spacing:.06em; opacity:.55; } /* ============ Floating CTA – Sticky Tel + Mail rechts unten ============ */ .floating-cta{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:12px; z-index:90; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; } .floating-cta.show{ opacity:1; pointer-events:auto; transform:none; } .float-btn{ width:54px; height:54px; border-radius:50%; background:var(--accent-dk); color:#fff; display:grid; place-items:center; text-decoration:none; box-shadow:0 8px 24px rgba(20,32,42,.25), 0 2px 6px rgba(20,32,42,.15); transition:all .25s; position:relative; } .float-btn:hover, .float-btn:focus-visible{ background:var(--accent); transform:translateY(-2px); box-shadow:0 12px 28px rgba(74,122,85,.42); color:#fff; } /* Scroll-to-Top: optisch leicht anders (heller, kein primary-Action) */ .float-top{ background:#fff; color:var(--accent-dk); border:1px solid var(--accent); cursor:pointer; font:inherit; padding:0; } .float-top:hover, .float-top:focus-visible{ background:var(--accent-dk); color:#fff; border-color:var(--accent-dk); } .float-btn i{ width:22px; height:22px; } .float-btn .tooltip{ position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); background:var(--ink); color:#fff; padding:7px 12px; border-radius:6px; font-size:12px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; box-shadow:0 4px 14px rgba(0,0,0,.18); } .float-btn .tooltip::after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:5px solid transparent; border-left-color:var(--ink); } .float-btn:hover .tooltip, .float-btn:focus-visible .tooltip{ opacity:1; } /* ============ Map-Consent (DSGVO Zwei-Klick) ============ */ .map-consent{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:var(--bg-soft); text-align:center; padding:40px 28px; } .map-consent .map-icon{ width:48px; height:48px; color:var(--accent-dk); margin-bottom:6px; } .map-consent h3{ font-family:var(--serif); font-size:1.4rem; font-weight:500; color:var(--ink); margin:0 0 6px; } .map-consent p{ font-size:13.5px; color:var(--ink-md); line-height:1.65; max-width:48ch; margin:0; } .map-consent p a{ color:var(--accent-dk); text-decoration:underline; } .map-consent .btn{ margin-top:8px; } .map-consent-hint{ font-size:12px !important; margin-top:14px !important; } .map-consent-hint a{ color:var(--accent-dk); } .map-wrap iframe{ display:block; width:100%; height:100%; min-height:480px; border:0; } /* ---------- Responsive ---------- */ @media (max-width: 1100px){ .hero-grid{ grid-template-columns:1fr 320px; } } @media (max-width: 980px){ section{ padding:80px 0; } .hero-grid{ grid-template-columns:1fr; min-height:0; } .hero-slider{ min-height:520px; } .hero-slide .copy{ padding:0 32px 100px; } .hero-cta{ border-left:0; border-top:1px solid var(--line); padding:48px 32px; } .hero-dots{ left:32px; } .hero-arrows{ right:16px; } .usp-grid{ grid-template-columns:repeat(2,1fr); gap:40px 24px; } .svc-grid{ grid-template-columns:repeat(2,1fr); } .about-grid{ grid-template-columns:1fr; gap:60px; } .about-photos{ max-width:460px; margin:0 auto; } .process-grid{ grid-template-columns:repeat(2,1fr); gap:48px 24px; } .step{ border-left:0; padding-left:0; } .contact-grid{ grid-template-columns:1fr; gap:48px; } .foot-grid{ grid-template-columns:repeat(2,1fr); gap:36px; } nav.main{ position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; padding:14px 28px 22px; gap:6px; box-shadow:var(--shadow-md); display:none; } nav.main.open{ display:flex; } nav.main a{ padding:12px 4px; border-bottom:1px solid var(--line); } nav.main a.btn{ margin-top:10px; border-bottom:0; justify-content:center; } .menu-toggle{ display:inline-flex; } } @media (max-width:600px){ .topbar .meta .hide-sm{ display:none; } .svc-grid{ grid-template-columns:1fr; } .usp-grid{ grid-template-columns:1fr; gap:36px; } .foot-grid{ grid-template-columns:1fr; } .about-features{ grid-template-columns:1fr; } .hero-slide .copy{ padding:0 22px 100px; } .hero-slide h1{ font-size:clamp(1.9rem, 6.5vw, 2.4rem); } .hero-slide p.sub{ font-size:14.5px; line-height:1.6; } .hero-slide .cta-row{ gap:10px; } .hello-chip{ font-size:13.5px; padding:5px 12px; } .lang-hint{ font-size:12px; padding:7px 12px; } .hero-dots{ left:22px; bottom:30px; } .hero-arrows{ right:14px; bottom:28px; } .hero-arrows button{ width:40px; height:40px; } .hero-cta{ padding:36px 22px; } .cta-block .val{ font-size:20px; } .map-consent{ padding:32px 20px; } .map-consent h3{ font-size:1.2rem; } .map-consent p{ font-size:13px; } .quote-inner blockquote{ font-size:1.4rem; } .faq summary{ font-size:1.05rem; padding:18px 22px; } .faq .answer{ padding:0 22px 20px; font-size:14.5px; } .topbar .wrap{ flex-wrap:wrap; min-height:0; padding:8px 16px; } .lang-wrap{ width:100%; justify-content:flex-end; padding-top:6px; } header.site .wrap{ padding:0 18px; min-height:72px; } .logo .name{ font-size:20px; } } /* ============ Touch + Smooth Scroll Optimierungen (Mobile-First) ============ */ html, body{ -webkit-overflow-scrolling: touch; } @supports (overscroll-behavior:contain){ html{ overscroll-behavior-y: contain; } } /* Touch-Targets min 44 px (WCAG 2.5.5 / Apple HIG) */ .btn{ min-height:44px; } .lang-sw a{ min-height:32px; display:inline-flex; align-items:center; } @media (max-width:980px){ .floating-cta{ right:14px; bottom:14px; gap:10px; } .float-btn{ width:50px; height:50px; } .float-btn i{ width:20px; height:20px; } .float-btn .tooltip{ display:none; } .topbar .meta a{ min-height:34px; padding:4px 0; } .menu-toggle{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; } } /* ============ Service-Card "Mehr erfahren" Link (verlinkt auf /leistungen/*) ============ */ .svc-more{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--accent-dk); text-decoration:none; transition:color .2s, transform .2s; } .svc-more:hover{ color:var(--accent); transform:translateX(2px); text-decoration:none; } /* ============================================================ Mobile Sticky Kontakt-Leiste (Restaurant-Stil) – nur <=640px Ziel: QR-Scanner/Handy-Besucher koennen sofort Kontakt aufnehmen. v2.5.0 (2026-06-14) – Grundke IT-Service ============================================================ */ .mobile-bar{ display:none; } @media (max-width:640px){ .mobile-bar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1200; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--border, #d0daea); box-shadow:0 -6px 22px rgba(20,32,42,.12); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); gap:5px; } .mbar-btn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:54px; padding:7px 4px; border-radius:12px; text-decoration:none; color:var(--ink, #14202a); font-size:11.5px; font-weight:600; letter-spacing:.02em; line-height:1; transition:background .15s ease; } .mbar-btn i{ width:22px; height:22px; } .mbar-btn:active{ background:rgba(74,122,85,.10); } .mbar-call{ color:#fff; background:var(--accent-dk, #2f5638); } .mbar-call i{ color:#fff; } .mbar-call:active{ background:var(--accent, #4a7a55); } /* Eck-FABs auf Mobil ausblenden – die Leiste ersetzt sie */ .floating-cta{ display:none !important; } /* Platz schaffen, damit die Leiste den Footer nicht verdeckt */ body{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); } }