, <meta description> und die beiden <script type="application/ld+json"> Blöcke im <head> enthalten Adresse/Telefon/Öffnungszeiten für Google. Bei Änderungen dort ebenfalls anpassen! robots.txt und sitemap.xml liegen als separate Dateien bei. ========================================================== */ :root{ --bg:#F5F8FB; --bg-mint:#E6F1FB; --bg-panel:#FFFFFF; --ink:#0F1B26; --ink-muted:#64798B; --accent:#2E86C7; --accent-deep:#1F6CAE; --brass:#B9944F; --amber:#D9A441; --whatsapp:#25D366; --line:#E2E8F0; --wipe:#F5F8FB; --r-lg:22px; --r-md:14px; --r-sm:9px; --r-pill:999px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; overflow-x:hidden;} h1,h2,h3,.display{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; color:var(--ink);} a{color:inherit; text-decoration:none;} img{display:block; max-width:100%; width:100%; height:100%; object-fit:cover;} .wrap{max-width:1180px; margin:0 auto; padding:0 32px;} .eyebrow{font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; display:inline-flex; align-items:center; gap:10px;} .eyebrow::before{content:"✳"; color:var(--amber); font-size:13px;} .reveal{position:relative; overflow:hidden;} .reveal .wipe-cover{position:absolute; inset:0; background:var(--wipe); transform-origin:left; transform:scaleX(1); opacity:1; transition:transform 1.05s cubic-bezier(.6,0,.15,1), opacity .25s ease .8s; z-index:2;} .reveal .wipe-cover::after{content:""; position:absolute; top:0; right:-1px; bottom:0; width:3px; background:linear-gradient(180deg, transparent, var(--brass) 45%, transparent); box-shadow:0 0 14px 1px rgba(185,148,79,.55);} .reveal.revealed .wipe-cover{transform:scaleX(0); opacity:0;} .alt .reveal{--wipe:var(--bg-mint);} /* fade-up scroll reveal for cards */ .fade-up{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);} .fade-up.shown{opacity:1; transform:translateY(0);} /* scroll progress bar */ .scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--brass), var(--amber)); z-index:100; transition:width .1s linear;} header{transition:box-shadow .3s ease, padding .3s ease;} header.scrolled{box-shadow:0 10px 30px -20px rgba(15,27,38,.4);} /* floating blobs */ @keyframes floatA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(24px,-18px) scale(1.06);}} @keyframes floatB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-20px,16px) scale(1.08);}} .blob{position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:0;} .img-frame{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--accent-deep); box-shadow:0 18px 40px -20px rgba(15,27,38,.35);} .img-frame img{transition:transform .7s cubic-bezier(.2,.7,.3,1);} .service-card:hover .img-frame img, .about-media .img-frame.main:hover img, .hero-media .img-frame.main:hover img{transform:scale(1.09);} /* marquee ticker */ .marquee{overflow:hidden; background:var(--accent-deep); padding:15px 0; position:relative;} .marquee-track{display:flex; gap:48px; width:max-content; animation:marquee 26s linear infinite;} .marquee-track span{color:#CFE0D2; font-family:'Fraunces',serif; font-style:italic; font-size:15px; white-space:nowrap; display:flex; align-items:center; gap:14px;} .marquee-track span::after{content:"✳"; color:var(--amber); font-style:normal; font-size:12px;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} @keyframes marqueeReverse{from{transform:translateX(-50%);} to{transform:translateX(0);}} .marquee-reviews{background:var(--bg-mint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .marquee-reviews .marquee-track span{color:var(--accent-deep); font-weight:600;} .marquee-reviews .marquee-track span::after{content:"";} .marquee-track.reverse{animation-name:marqueeReverse;} header{position:sticky; top:0; z-index:50; background:rgba(245,248,251,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);} /* ---------- Notfall-Leiste ---------- */ .emergency-bar{background:linear-gradient(90deg, #7A3B2E, #92462F); color:#FBEFE9; position:relative; z-index:52; font-size:13.5px;} .emergency-bar .wrap{display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 32px; flex-wrap:wrap; text-align:center; position:relative;} .emergency-bar strong{font-weight:700;} .emergency-bar a.ebtn{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); padding:5px 14px; border-radius:var(--r-pill); font-weight:700; color:#fff; white-space:nowrap;} .emergency-bar a.ebtn:hover{background:rgba(255,255,255,.28);} .emergency-close{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:#FBEFE9; opacity:.7; cursor:pointer; font-size:16px; padding:4px;} .emergency-close:hover{opacity:1;} .emergency-bar.hidden{display:none;} /* ---------- Saisonaler Aktions-Banner ---------- */ .season-bar{background:linear-gradient(90deg, #8a6a2e, #B9944F); color:#2a2210; position:relative; z-index:51; font-size:13.5px; display:none;} .season-bar.show-season{display:block;} .season-bar .wrap{display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 32px; flex-wrap:wrap; text-align:center; position:relative;} .season-bar strong{font-weight:700;} .season-bar a.sbtn{background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.5); padding:5px 14px; border-radius:var(--r-pill); font-weight:700; color:#2a2210; white-space:nowrap;} .season-bar a.sbtn:hover{background:rgba(255,255,255,.55);} .season-close{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:#2a2210; opacity:.7; cursor:pointer; font-size:16px; padding:4px;} .season-close:hover{opacity:1;} .season-bar.hidden{display:none;} nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto; gap:20px;} .logo{font-family:'Fraunces',serif; font-size:19px; font-weight:600; letter-spacing:0.01em; line-height:1.15; display:flex; align-items:center; gap:10px;} .logo-img{height:46px; width:auto; display:block;} .nav-links{display:flex; gap:30px; font-size:14.5px; font-weight:500;} .nav-links a{position:relative; padding:4px 0; color:var(--ink);} .nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--amber); transition:width .3s ease;} .nav-links a:hover::after{width:100%;} .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-size:14px; font-weight:700; border-radius:var(--r-pill); border:1px solid var(--accent-deep); background:var(--accent-deep); color:#fff; transition:all .25s ease; letter-spacing:0.01em;} .btn:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px);} .btn.ghost{background:transparent; color:var(--accent-deep);} .btn.ghost:hover{background:var(--accent-deep); color:#fff;} .btn.amber{background:var(--amber); border-color:var(--amber); color:#20180a;} .btn.amber:hover{background:#c8933a; border-color:#c8933a;} .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;} .menu-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px;} .nav-phone{font-size:14px; font-weight:700; color:var(--accent-deep); white-space:nowrap;} .nav-phone:hover{color:var(--accent);} @media (max-width:860px){ .nav-phone{display:none;} } .mid-contact{background:var(--accent-deep); color:#fff; padding:44px 0;} .mid-contact-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;} .mid-contact h2{color:#fff; margin:6px 0 6px; font-size:26px;} .mid-contact p{color:#DCEBF7; margin:0;} .mid-contact .eyebrow{color:#DCEBF7;} .mid-contact-actions{display:flex; gap:14px; flex-wrap:wrap;} .footer-oeffnungszeiten{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:14px;} .hero{padding:64px 0 100px; position:relative; overflow:hidden;} .hero::before{content:""; position:absolute; top:-180px; right:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(185,148,79,.16), transparent 70%); z-index:0; animation:floatA 14s ease-in-out infinite;} .hero::after{content:""; position:absolute; left:var(--mx,20%); top:var(--my,40%); width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(217,164,65,.13), transparent 70%); transform:translate(-50%,-50%); pointer-events:none; z-index:0; transition:left .3s ease, top .3s ease;} .hero .blob-2{position:absolute; bottom:-60px; left:-40px; width:220px; height:220px; background:radial-gradient(circle, rgba(47,111,98,.15), transparent 70%); animation:floatB 11s ease-in-out infinite;} .hero .wrap{display:grid; grid-template-columns:1fr .85fr; gap:60px; align-items:center; position:relative; z-index:1;} .hero h1{font-size:clamp(38px,4.9vw,62px); line-height:1.06; margin:20px 0 24px;} .hero h1 em{font-style:italic; color:var(--accent); font-weight:500;} .hero p{font-size:17px; color:var(--ink-muted); max-width:46ch; margin-bottom:30px;} .hero-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:34px;} .hero-stats{display:flex; gap:30px; flex-wrap:wrap;} .hero-stats .num{font-family:'Fraunces',serif; font-size:30px; color:var(--accent-deep); font-weight:600; display:block;} .hero-stats .num::after{content:attr(data-suffix);} .hero-stats .label{font-size:12.5px; color:var(--ink-muted);} .hero-media{position:relative; aspect-ratio:1/1;} .hero-media .img-frame.main{position:absolute; top:0; right:0; width:82%; height:82%;} .hero-media .img-frame.accent{position:absolute; bottom:0; left:0; width:46%; height:46%; border:5px solid var(--bg); z-index:2;} .hero-badge{position:absolute; top:14px; left:-18px; background:var(--bg-panel); border:1px solid var(--line); padding:14px 18px; border-radius:var(--r-md); box-shadow:0 14px 34px -14px rgba(15,27,38,.3); z-index:3; display:flex; align-items:center; gap:10px;} .hero-badge .stars{color:var(--amber); font-size:13px; letter-spacing:2px;} .hero-badge .txt{font-size:12px; color:var(--ink-muted); font-weight:600;} section{padding:96px 0;} section.alt{background:var(--bg-mint);} .section-head{max-width:640px; margin-bottom:52px;} .section-head h2, .section-head h1{font-size:clamp(28px,3.4vw,42px); margin-top:16px; font-weight:500;} .section-head p{color:var(--ink-muted); margin-top:16px; font-size:16px;} .section-head.center{margin-left:auto; margin-right:auto; text-align:center;} .section-head.center .eyebrow{justify-content:center;} .process{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} .process-step{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; position:relative;} .process-step .n{font-family:'Fraunces',serif; font-size:44px; color:var(--bg-mint); -webkit-text-stroke:1.5px var(--brass); position:absolute; top:14px; right:22px;} .process-step h3{font-size:18px; margin-bottom:10px; padding-right:40px;} .process-step p{font-size:14.5px; color:var(--ink-muted);} .about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:center;} .about-media{position:relative;} .about-media .img-frame.main{aspect-ratio:4/5;} .about-media .img-frame.float{position:absolute; bottom:-30px; right:-30px; width:44%; aspect-ratio:1/1; border:5px solid var(--bg-mint); transform:rotate(4deg); z-index:2;} .about-values{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px;} .value{background:var(--bg-panel); border-radius:var(--r-md); padding:20px; border:1px solid var(--line);} .value h3{font-size:16.5px; font-weight:700; font-family:'Inter',sans-serif; margin-bottom:6px;} .value p{font-size:14px; color:var(--ink-muted);} .value .mark{color:var(--brass); font-size:12.5px; letter-spacing:.1em; font-weight:700; margin-bottom:8px; display:block;} .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; perspective:1400px;} .service-card{background:var(--bg-panel); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); transition:transform .12s ease-out, box-shadow .3s ease; transform-style:preserve-3d; will-change:transform;} .service-card:hover{box-shadow:0 24px 46px -22px rgba(15,27,38,.35);} .service-card .img-frame{aspect-ratio:16/11; border-radius:0;} .service-card .body{padding:24px 24px 28px; position:relative; transform:translateZ(24px);} .service-card h3{font-size:18px; font-family:'Fraunces',serif; font-weight:600; margin-bottom:8px;} .service-card p{font-size:14px; color:var(--ink-muted);} .service-card .tag{position:absolute; top:-18px; left:22px; background:var(--amber); color:#20180a; font-size:12px; font-weight:700; padding:6px 14px; border-radius:var(--r-pill); box-shadow:0 8px 18px -8px rgba(217,164,65,.6);} @media (hover:none){ .service-card:not(.card-3d-einflug){ transform:none !important; } } .card-3d-einflug{ animation: card3dEinflug .7s cubic-bezier(.2,.7,.3,1) both; } @keyframes card3dEinflug{ from{ opacity:0; transform:perspective(1000px) rotateX(14deg) rotateY(-10deg) translateY(24px) scale(.94); } to{ opacity:1; transform:perspective(1000px) rotateX(0) rotateY(0) translateY(0) scale(1); } } .quote-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} .google-badge{display:inline-flex; align-items:center; gap:14px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-pill); padding:12px 22px 12px 16px; margin-bottom:34px; transition:all .25s ease; box-shadow:0 10px 24px -16px rgba(15,27,38,.25);} .google-badge:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(15,27,38,.35);} .google-badge-text{display:flex; flex-direction:column; gap:2px;} .google-badge-text strong{font-family:'Fraunces',serif; font-size:16px; color:var(--ink); display:flex; align-items:center; gap:8px;} .google-badge-text .stars-inline{color:var(--amber); font-size:13px; letter-spacing:1px;} .google-badge-text small{font-size:12px; color:var(--ink-muted);} .quote-card{background:var(--bg-panel); border:1.5px dashed var(--line); padding:30px; border-radius:var(--r-lg); position:relative;} .quote-card .stars{color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:14px;} .quote-card p.quote-text{font-size:15px; color:var(--ink-muted); margin-bottom:18px; font-style:italic;} .quote-meta{font-size:12.5px; color:var(--brass); border-top:1px solid var(--line); padding-top:14px; letter-spacing:.03em; font-weight:600;} .quote-note{text-align:center; margin-top:26px; font-size:13px; color:var(--ink-muted);} .ratgeber-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; perspective:1400px;} .ratgeber-card{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; gap:10px; transition:transform .12s ease-out, box-shadow .3s ease; will-change:transform;} @media (hover:none){ .ratgeber-card:not(.card-3d-einflug){ transform:none !important; } } .ratgeber-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px -24px rgba(15,27,38,.35);} .ratgeber-card .tag{align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); background:var(--bg-mint); padding:5px 12px; border-radius:var(--r-pill);} .ratgeber-card h3{font-family:'Fraunces',serif; font-size:18px; font-weight:600; margin-top:6px;} .ratgeber-card p{font-size:14px; color:var(--ink-muted); flex:1;} .ratgeber-card .read-more{font-size:13px; font-weight:700; color:var(--brass);} .faq-list{display:flex; flex-direction:column; gap:14px; max-width:760px;} .faq-item{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 24px;} .faq-item summary{font-family:'Fraunces',serif; font-size:17px; font-weight:500; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+"; font-size:22px; color:var(--brass); font-family:'Inter',sans-serif; flex-shrink:0; transition:transform .25s ease;} .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item p{margin-top:12px; font-size:14.5px; color:var(--ink-muted); line-height:1.65;} /* ---------- Vorher/Nachher Slider ---------- */ .ba-wrap{max-width:900px; margin:0 auto;} .ba-slider{position:relative; aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 50px -24px rgba(15,27,38,.4); user-select:none; touch-action:pan-y;} .ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;} .ba-after{clip-path:inset(0 0 0 50%);} .ba-handle{position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%);} .ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.35); transform:translateX(-50%);} .ba-grip{position:absolute; top:50%; left:0; width:52px; height:52px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(0,0,0,.4); cursor:ew-resize;} .ba-grip svg{width:22px; height:22px; stroke:var(--accent-deep);} .ba-tag{position:absolute; top:16px; padding:6px 14px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.04em; z-index:2;} .ba-tag.before{left:16px; background:rgba(0,0,0,.45); color:#fff;} .ba-tag.after{right:16px; background:var(--amber); color:#20180a;} .ba-range{width:100%; margin-top:18px; accent-color:var(--accent-deep); cursor:pointer;} /* ---------- Preisrechner ---------- */ .calc-card{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:36px; box-shadow:0 24px 50px -30px rgba(15,27,38,.3);} .calc-field{margin-bottom:20px;} .calc-field label{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;} .calc-field label span.val{color:var(--brass); font-family:'Fraunces',serif; font-size:15px; text-transform:none; letter-spacing:0;} .calc-field input[type="range"]{width:100%; accent-color:var(--accent-deep); cursor:pointer;} .calc-chip-row{display:flex; gap:8px; flex-wrap:wrap;} .calc-hint{font-size:12px; color:var(--ink-muted); margin-top:8px; line-height:1.5;} .calc-chip{border:1px solid var(--line); background:var(--bg); padding:9px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-muted); transition:all .2s ease;} .calc-chip.active{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;} .calc-result{background:var(--bg-mint); border-radius:var(--r-md); padding:26px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:8px;} .calc-result .price{font-family:'Fraunces',serif; font-size:40px; color:var(--accent-deep); font-weight:600;} .calc-result .sub{font-size:13px; color:var(--ink-muted);} .calc-result .btn{margin-top:14px;} .calc-note{font-size:12px; color:var(--ink-muted); margin-top:14px; text-align:center;} .contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;} .contact-info .item{padding:18px 20px; border-radius:var(--r-md); background:var(--bg-panel); border:1px solid var(--line); margin-bottom:14px; display:flex; align-items:center; gap:14px;} .contact-info .item .ic{width:40px; height:40px; border-radius:50%; background:var(--bg-mint); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .contact-info .item .ic svg{width:18px; height:18px; stroke:var(--accent-deep);} .contact-info .item .k{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:3px;} .contact-info .item .v{font-size:15.5px;} .quick-actions{display:flex; gap:12px; margin-top:20px;} .quick-actions a{flex:1; text-align:center; justify-content:center;} .social-row{display:flex; gap:12px; margin-top:20px;} .social-row a{width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s ease; background:var(--bg-panel);} .social-row a:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;} .social-row svg{width:18px; height:18px; stroke:currentColor;} .map-frame{margin-top:20px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 14px 30px -20px rgba(15,27,38,.3); position:relative; background:var(--bg-mint);} .map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.02);} .map-load-btn{position:absolute; inset:0; width:100%; height:100%; border:none; background:var(--bg-mint); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; padding:24px; text-align:center;} .map-load-btn:hover{background:#E3EBE3;} .map-pin{font-size:26px;} .map-load-btn span:nth-child(2){font-family:'Fraunces',serif; font-size:16px; color:var(--accent-deep); font-weight:600;} .map-load-btn small{font-size:12px; color:var(--ink-muted); max-width:220px;} form{background:var(--bg-panel); border:1px solid var(--line); padding:34px; border-radius:var(--r-lg);} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;} .form-row.full{grid-template-columns:1fr;} label{display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px; font-weight:600;} input,textarea,select{width:100%; border:1px solid var(--line); background:var(--bg); padding:12px 14px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); border-radius:var(--r-sm);} input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);} textarea{resize:vertical; min-height:110px;} form .btn{width:100%; margin-top:6px; cursor:pointer; border:1px solid var(--accent-deep); justify-content:center;} footer{background:var(--accent-deep); color:#DCE9F5; padding:56px 0 28px;} .footer-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;} footer h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#9FC0DE; margin-bottom:16px; font-weight:600;} footer .flogo{font-family:'Fraunces',serif; font-size:21px; color:#fff; margin-bottom:12px;} .footer-logo-img{height:38px; width:auto; margin-bottom:14px; display:block;} footer p{font-size:14px; color:#B9D3EA; max-width:34ch;} footer ul{list-style:none;} footer li{margin-bottom:10px; font-size:14px;} footer a:hover{color:#fff;} .footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; color:#8AA9C4; flex-wrap:wrap; gap:10px;} .fab-stack{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:14px; z-index:80; align-items:flex-end;} .fab{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px -10px rgba(15,27,38,.45); color:#fff; position:relative; cursor:pointer; border:none;} .fab svg{width:26px; height:26px;} .fab.call{background:var(--accent-deep);} .fab.whatsapp{background:var(--whatsapp);} .fab.chat{background:var(--amber); color:#20180a;} .fab.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:.55; animation:pulse 2.2s ease-out infinite;} @keyframes pulse{0%{transform:scale(1); opacity:.5;} 100%{transform:scale(1.5); opacity:0;}} .fab-label{position:absolute; right:70px; top:50%; transform:translateY(-50%); background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease;} .fab:hover .fab-label{opacity:1;} .chat-panel{position:fixed; right:22px; bottom:96px; width:340px; max-width:calc(100vw - 44px); background:var(--bg-panel); border-radius:var(--r-lg); box-shadow:0 26px 60px -20px rgba(15,27,38,.5); z-index:90; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); transform:translateY(16px) scale(.97); opacity:0; pointer-events:none; transition:all .25s ease; max-height:min(520px, 70vh);} .chat-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;} .chat-head{background:var(--accent-deep); color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;} .chat-head .who{display:flex; align-items:center; gap:10px;} .chat-head .avatar{width:34px; height:34px; border-radius:50%; background:var(--amber); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; color:#20180a;} .chat-head .name{font-size:14px; font-weight:700;} .chat-head .status{font-size:11.5px; color:#B9E0C9; display:flex; align-items:center; gap:5px;} .chat-head .status::before{content:""; width:7px; height:7px; border-radius:50%; background:#7CE8A6;} .chat-close{background:none; border:none; color:#fff; font-size:20px; cursor:pointer; line-height:1; opacity:.8;} .chat-close:hover{opacity:1;} .chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg-mint);} .msg{max-width:82%; padding:10px 14px; border-radius:var(--r-md); font-size:13.5px; line-height:1.5;} .msg.bot{background:var(--bg-panel); align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 2px 8px -4px rgba(0,0,0,.15);} .msg.user{background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;} .chip-row{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 12px; background:var(--bg-mint);} .chip{background:var(--bg-panel); border:1px solid var(--line); font-size:12px; padding:7px 12px; border-radius:var(--r-pill); cursor:pointer; font-weight:600; color:var(--accent-deep);} .chip:hover{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep);} .chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--bg-panel);} .chat-input-row input{flex:1; border:1px solid var(--line); border-radius:var(--r-pill); padding:10px 16px; font-size:13.5px; font-family:'Inter',sans-serif;} .chat-input-row input:focus{outline:2px solid var(--accent); outline-offset:1px;} .chat-send{width:38px; height:38px; border-radius:50%; background:var(--accent-deep); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;} .chat-send svg{width:16px; height:16px;} /* ---------- Cookie-Consent-Banner ---------- */ .cookie-banner{position:fixed; left:20px; bottom:20px; z-index:95; max-width:400px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:0 26px 60px -20px rgba(15,27,38,.45); transform:translateY(140%); transition:transform .4s cubic-bezier(.2,.8,.3,1);} .cookie-banner.show{transform:translateY(0);} .cookie-banner h4{font-family:'Fraunces',serif; font-size:16px; margin-bottom:8px;} .cookie-banner p{font-size:13px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px;} .cookie-banner p a{color:var(--accent-deep); font-weight:600;} .cookie-actions{display:flex; gap:10px; flex-wrap:wrap;} .cookie-actions .btn{padding:10px 18px; font-size:13px;} .cookie-actions .btn.text{background:none; border:none; color:var(--ink-muted); font-weight:600; padding:10px 6px;} @media(max-width:860px){ .cookie-banner{left:12px; right:12px; max-width:none; bottom:auto; top:12px; transform:translateY(-160%);} .cookie-banner.show{transform:translateY(0);} } @media(max-width:860px){ .nav-links{position:fixed; top:69px; left:0; right:0; background:var(--bg); flex-direction:column; padding:24px 32px; gap:20px; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .35s ease; z-index:40;} .nav-links.open{transform:translateY(0);} .menu-toggle{display:flex;} .hero .wrap{grid-template-columns:1fr;} .hero-media{order:-1; max-width:420px; margin:0 auto 20px;} .process{grid-template-columns:1fr;} .about-grid{grid-template-columns:1fr;} .about-media{max-width:420px; margin:0 auto;} .about-values{grid-template-columns:1fr 1fr;} .service-grid{grid-template-columns:1fr 1fr;} .quote-row{grid-template-columns:1fr;} .ratgeber-grid{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .chat-panel{right:12px; bottom:88px;} .fab-stack{right:14px; bottom:14px;} } @media(max-width:560px){ .service-grid{grid-template-columns:1fr;} .about-values{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .hero-badge{display:none;} .quick-actions{flex-direction:column;} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal .wipe-cover{transition:none; transform:scaleX(0); opacity:0;} .fab.pulse::after{animation:none; display:none;} .hero::before,.hero .blob-2,.marquee-track{animation:none;} .fade-up{opacity:1; transform:none; transition:none;} .img-frame img{transition:none;} } /* Aktiver Menüpunkt hervorheben */ .nav-links a.active-nav{color:var(--accent-deep);} .nav-links a.active-nav::after{width:100%; background:var(--accent-deep);} /* ---------- Barrierefreiheits-Regler ---------- */ html.a11y-groß{font-size:112.5%;} html.a11y-sehr-gross{font-size:125%;} html.a11y-kontrast{--bg:#FFFFFF; --bg-panel:#FFFFFF; --bg-mint:#F0F0F0; --ink:#000000; --ink-muted:#1a1a1a; --line:#000000; --accent:#00524a; --accent-deep:#003a33; --brass:#6b5410;} html.a11y-kontrast a{text-decoration:underline;} html.a11y-kontrast .btn{border-width:2px;} html.a11y-kontrast .img-frame, html.a11y-kontrast .value, html.a11y-kontrast .service-card, html.a11y-kontrast .ratgeber-card{border:2px solid #000 !important;} .a11y-fab{position:fixed; left:16px; top:84px; width:46px; height:46px; border-radius:50%; background:var(--accent-deep); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 14px 28px -10px rgba(15,27,38,.45); z-index:70;} .a11y-panel{position:fixed; left:16px; top:136px; width:260px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:0 26px 60px -20px rgba(15,27,38,.5); z-index:90; transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .2s ease;} .a11y-panel.open{transform:translateY(0); opacity:1; pointer-events:auto;} .a11y-panel h4{font-family:'Fraunces',serif; font-size:15px; margin-bottom:12px;} .a11y-row{display:flex; gap:8px; margin-bottom:12px;} .a11y-row button{flex:1; border:1px solid var(--line); background:var(--bg); border-radius:var(--r-sm); padding:8px 4px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink);} .a11y-row button.active{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep);} .a11y-panel .a11y-reset{width:100%; background:none; border:none; color:var(--ink-muted); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px 0;} @media(max-width:860px){ .a11y-fab{left:10px; top:74px; width:40px; height:40px;} .a11y-panel{left:10px; top:120px; width:calc(100vw - 20px); max-width:260px;} } /* ---------- Newsletter (Footer) ---------- */ .newsletter-box{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:20px; margin-top:18px;} .newsletter-box h4{color:#fff; margin-bottom:8px;} .newsletter-box p{font-size:13px; color:#B9C7BB; margin-bottom:12px;} .newsletter-row{display:flex; flex-direction:column; gap:8px;} .newsletter-row input[type="email"]{width:100%;} .newsletter-row button{width:100%;} .newsletter-row input[type="email"]{flex:1 1 auto; width:auto; min-width:160px; border:1px solid rgba(255,255,255,.25); background:#fff; color:#16241F; padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px;} .newsletter-row input[type="email"]::placeholder{color:#7a8a82;} .newsletter-row input[type="email"]:-webkit-autofill, .newsletter-row input[type="email"]:-webkit-autofill:hover, .newsletter-row input[type="email"]:-webkit-autofill:focus{ -webkit-text-fill-color:#16241F; -webkit-box-shadow:0 0 0px 1000px #fff inset; caret-color:#16241F; transition:background-color 999999s ease-in-out 0s; } .newsletter-row button{width:auto; flex:0 0 auto;} .newsletter-row button{white-space:nowrap; padding:10px 18px; font-size:13px;} .newsletter-consent{font-size:11.5px; color:#9FB3A2; margin-top:8px; display:flex; gap:6px; align-items:flex-start;} .newsletter-consent input{margin-top:2px; width:16px; height:16px; flex-shrink:0; -webkit-appearance:auto; appearance:auto;} .newsletter-consent span{flex:1 1 auto; min-width:0; word-wrap:break-word; overflow-wrap:break-word;} #newsletterStatus{display:none; font-size:12.5px; color:#7CE8A6; margin-top:8px;} /* ---------- Willkommens-Effekt: beschlagenes Glas wird "abgezogen" ---------- */ .intro-wipe{position:fixed; inset:0; z-index:9999; cursor:pointer;} .intro-wipe .wipe-band{position:absolute; left:0; right:0; overflow:hidden;} .intro-wipe .wipe-band.reverse{transform:scaleX(-1);} .intro-wipe .fog-layer{ position:absolute; inset:0; overflow:hidden; -webkit-backdrop-filter:blur(5px) saturate(102%); backdrop-filter:blur(5px) saturate(102%); background:rgba(240,242,236,.66); animation: introWipeReveal 1.35s cubic-bezier(.45,0,.3,1) forwards; animation-delay:.6s; } .intro-wipe .foam-bubble{ position:absolute; border-radius:50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,.35) 45%, rgba(255,255,255,.12) 70%, transparent 85%); box-shadow: inset -3px -3px 5px rgba(15,27,38,.1), inset 2px 2px 3px rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.3); } .intro-wipe .squeegee{ position:absolute; top:8%; height:84%; width:9px; left:-3%; transform-origin:50% 8%; /* Drehpunkt oben, wie ein echter Handgriff, nicht die Mitte */ animation: introSqueegeeScrub 1.35s cubic-bezier(.45,0,.3,1) forwards; animation-delay:.6s; animation-fill-mode:both; } /* Holzgriff (wie im Referenzfoto: helles Holz, rund) */ .intro-wipe .squeegee::before{ content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:7px; height:42px; border-radius:4px; background:linear-gradient(90deg, #8a6533, #C89A5E 30%, #E0B87A 50%, #C89A5E 70%, #8a6533); box-shadow:0 2px 6px rgba(0,0,0,.3); } /* Schwarzer Gummi-Verbindungskopf zwischen Griff und Klinge (wie im Referenzfoto) */ .intro-wipe .squeegee::after{ content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:15px; height:20px; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg, #2b2b2b, #161616); box-shadow:0 3px 8px rgba(0,0,0,.35); } /* Aluminium-Schiene mit schwarzer Gummikante, die tatsächlich "abzieht" */ .intro-wipe .squeegee .blade-holder{ position:absolute; inset:0; border-radius:2px; background:linear-gradient(90deg, #8b8f8d, #dfe2e0 30%, #dfe2e0 70%, #8b8f8d); box-shadow:0 0 22px 5px rgba(15,27,38,.35); } .intro-wipe .squeegee .blade-rubber{ position:absolute; top:0; bottom:0; left:50%; width:5px; transform:translateX(-50%); background:linear-gradient(90deg, #1c1c1c, #3a3a3a 50%, #1c1c1c); border-radius:2px; overflow:hidden; } /* Nasser Glanzstreifen auf der Gummikante — wirkt wie Licht, das sich auf feuchtem Gummi bricht */ .intro-wipe .squeegee .blade-rubber::after{ content:''; position:absolute; top:0; bottom:0; left:1px; width:1.5px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.55) 40%, rgba(255,255,255,.2) 60%, transparent); } /* Frisch abgezogene Kante: ein schmaler, klarer Streifen direkt an der Gummikante, der den Übergang von "beschlagen" zu "klar" schärfer und echter wirken lässt */ .intro-wipe .squeegee .clean-edge{ position:absolute; top:0; height:100%; width:20px; left:10px; background:linear-gradient(90deg, rgba(255,255,255,.35), transparent); filter:blur(2px); } @keyframes introWipeReveal{ 0% { clip-path:inset(0 0 0 0); } 14% { clip-path:inset(0 0 0 10%); } 27% { clip-path:inset(0 0 0 22%); } 40% { clip-path:inset(0 0 0 36%); } 52% { clip-path:inset(0 0 0 48%); } 65% { clip-path:inset(0 0 0 62%); } 77% { clip-path:inset(0 0 0 76%); } 90% { clip-path:inset(0 0 0 90%); } 100%{ clip-path:inset(0 0 0 100%); } } /* Unregelmäßige, aber physikalisch nachvollziehbare Wisch-Bewegung: die Neigung folgt grob der Zugrichtung (wie ein echter Fensterputzer, der den Griff beim Ziehen kippt), exakt dieselben Zeitpunkte wie bei introWipeReveal oben — Blatt und freie Fläche bleiben so immer an derselben Stelle synchron. */ @keyframes introSqueegeeScrub{ 0% { left:-3%; transform:translateY(0) rotate(-3deg); } 14% { left:10%; transform:translateY(-24px) rotate(9deg); } 27% { left:22%; transform:translateY(16px) rotate(-11deg); } 40% { left:36%; transform:translateY(-20px) rotate(8deg); } 52% { left:48%; transform:translateY(12px) rotate(-9deg); } 65% { left:62%; transform:translateY(-22px) rotate(10deg); } 77% { left:76%; transform:translateY(14px) rotate(-8deg); } 90% { left:90%; transform:translateY(-10px) rotate(6deg); } 100%{ left:103%; transform:translateY(0) rotate(0deg); } } @media (prefers-reduced-motion: reduce){ .intro-wipe{ display:none; } } @media (max-width:640px){ .intro-wipe .foam-bubble{ transform:scale(.8); } } /* ---------- Leistungsspezifische Bild-Effekte auf den Detailseiten ---------- */ /* Büroreinigung: Politur-Lichtstreifen zieht einmal übers Bild (frisch poliert) */ .effect-shine{position:relative;} .effect-shine::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); transform:translateX(-120%); } .effect-shine.play::after{ animation:shineSweep 1.4s ease-out forwards; } @keyframes shineSweep{ to{ transform:translateX(120%); } } /* Praxisreinigung: sanftes Hygiene-Leuchten pulsiert am Rand (steril/sauber) */ .effect-hygiene-pulse{position:relative;} .effect-hygiene-pulse::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:0 0 0 0 rgba(120,200,190,.55); } .effect-hygiene-pulse.play::after{ animation:hygienePulse 2.2s ease-out 2; } @keyframes hygienePulse{ 0%{ box-shadow:0 0 0 0 rgba(120,200,190,.5); } 70%{ box-shadow:0 0 0 22px rgba(120,200,190,0); } 100%{ box-shadow:0 0 0 0 rgba(120,200,190,0); } } /* Fensterreinigung: Mini-Abzieher wischt einmal übers Bild */ .effect-mini-squeegee{position:relative; overflow:hidden;} .effect-mini-squeegee .mini-fog{ position:absolute; inset:0; pointer-events:none; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); background:rgba(255,255,255,.28); clip-path:inset(0 0 0 0); } .effect-mini-squeegee.play .mini-fog{ animation:miniFogWipe 1.9s cubic-bezier(.6,0,.2,1) forwards; animation-delay:.25s; } .effect-mini-squeegee .mini-blade{ position:absolute; top:-6%; height:112%; width:7px; left:-2%; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0), var(--accent-deep) 30%, var(--accent-deep) 70%, rgba(255,255,255,0)); box-shadow:0 0 16px 3px rgba(15,27,38,.4); } .effect-mini-squeegee.play .mini-blade{ animation:miniBladeMove 1.9s cubic-bezier(.6,0,.2,1) forwards; animation-delay:.25s; } @keyframes miniFogWipe{ to{ clip-path:inset(0 0 0 100%); } } @keyframes miniBladeMove{ to{ left:102%; } } /* Teppich-/Polsterreinigung: leichtes Auffrischen-Ripple beim Hover (Fasern) */ .effect-fiber-ripple img{ transition:transform .5s cubic-bezier(.3,1.4,.5,1), filter .5s ease; } .effect-fiber-ripple:hover img{ transform:scale(1.035); filter:saturate(1.12) brightness(1.03); } /* Sonderreinigung: Staubpartikel lösen sich auf und schweben weg */ .effect-dust-dissolve{position:relative; overflow:hidden;} .effect-dust-dissolve .dust-mote{ position:absolute; bottom:6%; border-radius:50%; background:rgba(230,225,210,.85); pointer-events:none; filter:blur(.4px); } .effect-dust-dissolve.play .dust-mote{ animation:dustFloatAway 2.3s ease-out forwards; } @keyframes dustFloatAway{ 0%{ opacity:.85; transform:translateY(0) scale(1); } 100%{ opacity:0; transform:translateY(-70px) scale(.3); } } @media (prefers-reduced-motion: reduce){ .effect-shine::after, .effect-hygiene-pulse::after, .effect-mini-squeegee .mini-fog, .effect-mini-squeegee .mini-blade, .effect-dust-dissolve .dust-mote{ animation:none !important; display:none !important; } .effect-fiber-ripple:hover img{ transform:none; filter:none; } }

/* ========================================================== BAUKASTEN-HINWEIS - Bilder austauschen: Dateien im Ordner "bilder/" mit exakt gleichem Dateinamen ersetzen (z.B. bilder/hero.jpg). - Texte austauschen: direkt im HTML, jeder Abschnitt ist mit markiert. - Telefonnummer/WhatsApp zentral anpassen: Suche nach "4982120978619" (mehrfach) und ersetzen. - Chatbot-Antworten anpassen: siehe const BOT_ANTWORTEN im Script-Bereich am Seitenende. - SEO: , <meta description> und die beiden <script type="application/ld+json"> Blöcke im <head> enthalten Adresse/Telefon/Öffnungszeiten für Google. Bei Änderungen dort ebenfalls anpassen! robots.txt und sitemap.xml liegen als separate Dateien bei. ========================================================== */ :root{ --bg:#F5F8FB; --bg-mint:#E6F1FB; --bg-panel:#FFFFFF; --ink:#0F1B26; --ink-muted:#64798B; --accent:#2E86C7; --accent-deep:#1F6CAE; --brass:#B9944F; --amber:#D9A441; --whatsapp:#25D366; --line:#E2E8F0; --wipe:#F5F8FB; --r-lg:22px; --r-md:14px; --r-sm:9px; --r-pill:999px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6; overflow-x:hidden;} h1,h2,h3,.display{font-family:'Fraunces',serif; font-weight:500; letter-spacing:-0.01em; color:var(--ink);} a{color:inherit; text-decoration:none;} img{display:block; max-width:100%; width:100%; height:100%; object-fit:cover;} .wrap{max-width:1180px; margin:0 auto; padding:0 32px;} .eyebrow{font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; display:inline-flex; align-items:center; gap:10px;} .eyebrow::before{content:"✳"; color:var(--amber); font-size:13px;} .reveal{position:relative; overflow:hidden;} .reveal .wipe-cover{position:absolute; inset:0; background:var(--wipe); transform-origin:left; transform:scaleX(1); opacity:1; transition:transform 1.05s cubic-bezier(.6,0,.15,1), opacity .25s ease .8s; z-index:2;} .reveal .wipe-cover::after{content:""; position:absolute; top:0; right:-1px; bottom:0; width:3px; background:linear-gradient(180deg, transparent, var(--brass) 45%, transparent); box-shadow:0 0 14px 1px rgba(185,148,79,.55);} .reveal.revealed .wipe-cover{transform:scaleX(0); opacity:0;} .alt .reveal{--wipe:var(--bg-mint);} /* fade-up scroll reveal for cards */ .fade-up{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);} .fade-up.shown{opacity:1; transform:translateY(0);} /* scroll progress bar */ .scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--brass), var(--amber)); z-index:100; transition:width .1s linear;} header{transition:box-shadow .3s ease, padding .3s ease;} header.scrolled{box-shadow:0 10px 30px -20px rgba(15,27,38,.4);} /* floating blobs */ @keyframes floatA{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(24px,-18px) scale(1.06);}} @keyframes floatB{0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-20px,16px) scale(1.08);}} .blob{position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; z-index:0;} .img-frame{position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--accent-deep); box-shadow:0 18px 40px -20px rgba(15,27,38,.35);} .img-frame img{transition:transform .7s cubic-bezier(.2,.7,.3,1);} .service-card:hover .img-frame img, .about-media .img-frame.main:hover img, .hero-media .img-frame.main:hover img{transform:scale(1.09);} /* marquee ticker */ .marquee{overflow:hidden; background:var(--accent-deep); padding:15px 0; position:relative;} .marquee-track{display:flex; gap:48px; width:max-content; animation:marquee 26s linear infinite;} .marquee-track span{color:#CFE0D2; font-family:'Fraunces',serif; font-style:italic; font-size:15px; white-space:nowrap; display:flex; align-items:center; gap:14px;} .marquee-track span::after{content:"✳"; color:var(--amber); font-style:normal; font-size:12px;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} @keyframes marqueeReverse{from{transform:translateX(-50%);} to{transform:translateX(0);}} .marquee-reviews{background:var(--bg-mint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .marquee-reviews .marquee-track span{color:var(--accent-deep); font-weight:600;} .marquee-reviews .marquee-track span::after{content:"";} .marquee-track.reverse{animation-name:marqueeReverse;} header{position:sticky; top:0; z-index:50; background:rgba(245,248,251,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);} /* ---------- Notfall-Leiste ---------- */ .emergency-bar{background:linear-gradient(90deg, #7A3B2E, #92462F); color:#FBEFE9; position:relative; z-index:52; font-size:13.5px;} .emergency-bar .wrap{display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 32px; flex-wrap:wrap; text-align:center; position:relative;} .emergency-bar strong{font-weight:700;} .emergency-bar a.ebtn{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); padding:5px 14px; border-radius:var(--r-pill); font-weight:700; color:#fff; white-space:nowrap;} .emergency-bar a.ebtn:hover{background:rgba(255,255,255,.28);} .emergency-close{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:#FBEFE9; opacity:.7; cursor:pointer; font-size:16px; padding:4px;} .emergency-close:hover{opacity:1;} .emergency-bar.hidden{display:none;} /* ---------- Saisonaler Aktions-Banner ---------- */ .season-bar{background:linear-gradient(90deg, #8a6a2e, #B9944F); color:#2a2210; position:relative; z-index:51; font-size:13.5px; display:none;} .season-bar.show-season{display:block;} .season-bar .wrap{display:flex; align-items:center; justify-content:center; gap:14px; padding:9px 32px; flex-wrap:wrap; text-align:center; position:relative;} .season-bar strong{font-weight:700;} .season-bar a.sbtn{background:rgba(255,255,255,.35); border:1px solid rgba(255,255,255,.5); padding:5px 14px; border-radius:var(--r-pill); font-weight:700; color:#2a2210; white-space:nowrap;} .season-bar a.sbtn:hover{background:rgba(255,255,255,.55);} .season-close{position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:#2a2210; opacity:.7; cursor:pointer; font-size:16px; padding:4px;} .season-close:hover{opacity:1;} .season-bar.hidden{display:none;} nav{display:flex; align-items:center; justify-content:space-between; padding:16px 32px; max-width:1180px; margin:0 auto; gap:20px;} .logo{font-family:'Fraunces',serif; font-size:19px; font-weight:600; letter-spacing:0.01em; line-height:1.15; display:flex; align-items:center; gap:10px;} .logo-img{height:46px; width:auto; display:block;} .nav-links{display:flex; gap:30px; font-size:14.5px; font-weight:500;} .nav-links a{position:relative; padding:4px 0; color:var(--ink);} .nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px; background:var(--amber); transition:width .3s ease;} .nav-links a:hover::after{width:100%;} .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-size:14px; font-weight:700; border-radius:var(--r-pill); border:1px solid var(--accent-deep); background:var(--accent-deep); color:#fff; transition:all .25s ease; letter-spacing:0.01em;} .btn:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px);} .btn.ghost{background:transparent; color:var(--accent-deep);} .btn.ghost:hover{background:var(--accent-deep); color:#fff;} .btn.amber{background:var(--amber); border-color:var(--amber); color:#20180a;} .btn.amber:hover{background:#c8933a; border-color:#c8933a;} .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;} .menu-toggle span{width:24px; height:2px; background:var(--ink); border-radius:2px;} .nav-phone{font-size:14px; font-weight:700; color:var(--accent-deep); white-space:nowrap;} .nav-phone:hover{color:var(--accent);} @media (max-width:860px){ .nav-phone{display:none;} } .mid-contact{background:var(--accent-deep); color:#fff; padding:44px 0;} .mid-contact-inner{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;} .mid-contact h2{color:#fff; margin:6px 0 6px; font-size:26px;} .mid-contact p{color:#DCEBF7; margin:0;} .mid-contact .eyebrow{color:#DCEBF7;} .mid-contact-actions{display:flex; gap:14px; flex-wrap:wrap;} .footer-oeffnungszeiten{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:14px;} .hero{padding:64px 0 100px; position:relative; overflow:hidden;} .hero::before{content:""; position:absolute; top:-180px; right:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(185,148,79,.16), transparent 70%); z-index:0; animation:floatA 14s ease-in-out infinite;} .hero::after{content:""; position:absolute; left:var(--mx,20%); top:var(--my,40%); width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(217,164,65,.13), transparent 70%); transform:translate(-50%,-50%); pointer-events:none; z-index:0; transition:left .3s ease, top .3s ease;} .hero .blob-2{position:absolute; bottom:-60px; left:-40px; width:220px; height:220px; background:radial-gradient(circle, rgba(47,111,98,.15), transparent 70%); animation:floatB 11s ease-in-out infinite;} .hero .wrap{display:grid; grid-template-columns:1fr .85fr; gap:60px; align-items:center; position:relative; z-index:1;} .hero h1{font-size:clamp(38px,4.9vw,62px); line-height:1.06; margin:20px 0 24px;} .hero h1 em{font-style:italic; color:var(--accent); font-weight:500;} .hero p{font-size:17px; color:var(--ink-muted); max-width:46ch; margin-bottom:30px;} .hero-actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:34px;} .hero-stats{display:flex; gap:30px; flex-wrap:wrap;} .hero-stats .num{font-family:'Fraunces',serif; font-size:30px; color:var(--accent-deep); font-weight:600; display:block;} .hero-stats .num::after{content:attr(data-suffix);} .hero-stats .label{font-size:12.5px; color:var(--ink-muted);} .hero-media{position:relative; aspect-ratio:1/1;} .hero-media .img-frame.main{position:absolute; top:0; right:0; width:82%; height:82%;} .hero-media .img-frame.accent{position:absolute; bottom:0; left:0; width:46%; height:46%; border:5px solid var(--bg); z-index:2;} .hero-badge{position:absolute; top:14px; left:-18px; background:var(--bg-panel); border:1px solid var(--line); padding:14px 18px; border-radius:var(--r-md); box-shadow:0 14px 34px -14px rgba(15,27,38,.3); z-index:3; display:flex; align-items:center; gap:10px;} .hero-badge .stars{color:var(--amber); font-size:13px; letter-spacing:2px;} .hero-badge .txt{font-size:12px; color:var(--ink-muted); font-weight:600;} section{padding:96px 0;} section.alt{background:var(--bg-mint);} .section-head{max-width:640px; margin-bottom:52px;} .section-head h2, .section-head h1{font-size:clamp(28px,3.4vw,42px); margin-top:16px; font-weight:500;} .section-head p{color:var(--ink-muted); margin-top:16px; font-size:16px;} .section-head.center{margin-left:auto; margin-right:auto; text-align:center;} .section-head.center .eyebrow{justify-content:center;} .process{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;} .process-step{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 28px; position:relative;} .process-step .n{font-family:'Fraunces',serif; font-size:44px; color:var(--bg-mint); -webkit-text-stroke:1.5px var(--brass); position:absolute; top:14px; right:22px;} .process-step h3{font-size:18px; margin-bottom:10px; padding-right:40px;} .process-step p{font-size:14.5px; color:var(--ink-muted);} .about-grid{display:grid; grid-template-columns:.95fr 1.05fr; gap:64px; align-items:center;} .about-media{position:relative;} .about-media .img-frame.main{aspect-ratio:4/5;} .about-media .img-frame.float{position:absolute; bottom:-30px; right:-30px; width:44%; aspect-ratio:1/1; border:5px solid var(--bg-mint); transform:rotate(4deg); z-index:2;} .about-values{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px;} .value{background:var(--bg-panel); border-radius:var(--r-md); padding:20px; border:1px solid var(--line);} .value h3{font-size:16.5px; font-weight:700; font-family:'Inter',sans-serif; margin-bottom:6px;} .value p{font-size:14px; color:var(--ink-muted);} .value .mark{color:var(--brass); font-size:12.5px; letter-spacing:.1em; font-weight:700; margin-bottom:8px; display:block;} .service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; perspective:1400px;} .service-card{background:var(--bg-panel); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); transition:transform .12s ease-out, box-shadow .3s ease; transform-style:preserve-3d; will-change:transform;} .service-card:hover{box-shadow:0 24px 46px -22px rgba(15,27,38,.35);} .service-card .img-frame{aspect-ratio:16/11; border-radius:0;} .service-card .body{padding:24px 24px 28px; position:relative; transform:translateZ(24px);} .service-card h3{font-size:18px; font-family:'Fraunces',serif; font-weight:600; margin-bottom:8px;} .service-card p{font-size:14px; color:var(--ink-muted);} .service-card .tag{position:absolute; top:-18px; left:22px; background:var(--amber); color:#20180a; font-size:12px; font-weight:700; padding:6px 14px; border-radius:var(--r-pill); box-shadow:0 8px 18px -8px rgba(217,164,65,.6);} @media (hover:none){ .service-card:not(.card-3d-einflug){ transform:none !important; } } .card-3d-einflug{ animation: card3dEinflug .7s cubic-bezier(.2,.7,.3,1) both; } @keyframes card3dEinflug{ from{ opacity:0; transform:perspective(1000px) rotateX(14deg) rotateY(-10deg) translateY(24px) scale(.94); } to{ opacity:1; transform:perspective(1000px) rotateX(0) rotateY(0) translateY(0) scale(1); } } .quote-row{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;} .google-badge{display:inline-flex; align-items:center; gap:14px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-pill); padding:12px 22px 12px 16px; margin-bottom:34px; transition:all .25s ease; box-shadow:0 10px 24px -16px rgba(15,27,38,.25);} .google-badge:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(15,27,38,.35);} .google-badge-text{display:flex; flex-direction:column; gap:2px;} .google-badge-text strong{font-family:'Fraunces',serif; font-size:16px; color:var(--ink); display:flex; align-items:center; gap:8px;} .google-badge-text .stars-inline{color:var(--amber); font-size:13px; letter-spacing:1px;} .google-badge-text small{font-size:12px; color:var(--ink-muted);} .quote-card{background:var(--bg-panel); border:1.5px dashed var(--line); padding:30px; border-radius:var(--r-lg); position:relative;} .quote-card .stars{color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:14px;} .quote-card p.quote-text{font-size:15px; color:var(--ink-muted); margin-bottom:18px; font-style:italic;} .quote-meta{font-size:12.5px; color:var(--brass); border-top:1px solid var(--line); padding-top:14px; letter-spacing:.03em; font-weight:600;} .quote-note{text-align:center; margin-top:26px; font-size:13px; color:var(--ink-muted);} .ratgeber-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; perspective:1400px;} .ratgeber-card{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:flex; flex-direction:column; gap:10px; transition:transform .12s ease-out, box-shadow .3s ease; will-change:transform;} @media (hover:none){ .ratgeber-card:not(.card-3d-einflug){ transform:none !important; } } .ratgeber-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px -24px rgba(15,27,38,.35);} .ratgeber-card .tag{align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-deep); background:var(--bg-mint); padding:5px 12px; border-radius:var(--r-pill);} .ratgeber-card h3{font-family:'Fraunces',serif; font-size:18px; font-weight:600; margin-top:6px;} .ratgeber-card p{font-size:14px; color:var(--ink-muted); flex:1;} .ratgeber-card .read-more{font-size:13px; font-weight:700; color:var(--brass);} .faq-list{display:flex; flex-direction:column; gap:14px; max-width:760px;} .faq-item{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 24px;} .faq-item summary{font-family:'Fraunces',serif; font-size:17px; font-weight:500; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;} .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::after{content:"+"; font-size:22px; color:var(--brass); font-family:'Inter',sans-serif; flex-shrink:0; transition:transform .25s ease;} .faq-item[open] summary::after{transform:rotate(45deg);} .faq-item p{margin-top:12px; font-size:14.5px; color:var(--ink-muted); line-height:1.65;} /* ---------- Vorher/Nachher Slider ---------- */ .ba-wrap{max-width:900px; margin:0 auto;} .ba-slider{position:relative; aspect-ratio:3/2; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 24px 50px -24px rgba(15,27,38,.4); user-select:none; touch-action:pan-y;} .ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;} .ba-after{clip-path:inset(0 0 0 50%);} .ba-handle{position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%);} .ba-handle::before{content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.35); transform:translateX(-50%);} .ba-grip{position:absolute; top:50%; left:0; width:52px; height:52px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(0,0,0,.4); cursor:ew-resize;} .ba-grip svg{width:22px; height:22px; stroke:var(--accent-deep);} .ba-tag{position:absolute; top:16px; padding:6px 14px; border-radius:var(--r-pill); font-size:12px; font-weight:700; letter-spacing:.04em; z-index:2;} .ba-tag.before{left:16px; background:rgba(0,0,0,.45); color:#fff;} .ba-tag.after{right:16px; background:var(--amber); color:#20180a;} .ba-range{width:100%; margin-top:18px; accent-color:var(--accent-deep); cursor:pointer;} /* ---------- Preisrechner ---------- */ .calc-card{background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:36px; box-shadow:0 24px 50px -30px rgba(15,27,38,.3);} .calc-field{margin-bottom:20px;} .calc-field label{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--accent-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;} .calc-field label span.val{color:var(--brass); font-family:'Fraunces',serif; font-size:15px; text-transform:none; letter-spacing:0;} .calc-field input[type="range"]{width:100%; accent-color:var(--accent-deep); cursor:pointer;} .calc-chip-row{display:flex; gap:8px; flex-wrap:wrap;} .calc-hint{font-size:12px; color:var(--ink-muted); margin-top:8px; line-height:1.5;} .calc-chip{border:1px solid var(--line); background:var(--bg); padding:9px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-muted); transition:all .2s ease;} .calc-chip.active{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;} .calc-result{background:var(--bg-mint); border-radius:var(--r-md); padding:26px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:8px;} .calc-result .price{font-family:'Fraunces',serif; font-size:40px; color:var(--accent-deep); font-weight:600;} .calc-result .sub{font-size:13px; color:var(--ink-muted);} .calc-result .btn{margin-top:14px;} .calc-note{font-size:12px; color:var(--ink-muted); margin-top:14px; text-align:center;} .contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px;} .contact-info .item{padding:18px 20px; border-radius:var(--r-md); background:var(--bg-panel); border:1px solid var(--line); margin-bottom:14px; display:flex; align-items:center; gap:14px;} .contact-info .item .ic{width:40px; height:40px; border-radius:50%; background:var(--bg-mint); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .contact-info .item .ic svg{width:18px; height:18px; stroke:var(--accent-deep);} .contact-info .item .k{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); font-weight:700; margin-bottom:3px;} .contact-info .item .v{font-size:15.5px;} .quick-actions{display:flex; gap:12px; margin-top:20px;} .quick-actions a{flex:1; text-align:center; justify-content:center;} .social-row{display:flex; gap:12px; margin-top:20px;} .social-row a{width:42px; height:42px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .25s ease; background:var(--bg-panel);} .social-row a:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:#fff;} .social-row svg{width:18px; height:18px; stroke:currentColor;} .map-frame{margin-top:20px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; box-shadow:0 14px 30px -20px rgba(15,27,38,.3); position:relative; background:var(--bg-mint);} .map-frame iframe{width:100%; height:100%; border:0; filter:grayscale(.15) contrast(1.02);} .map-load-btn{position:absolute; inset:0; width:100%; height:100%; border:none; background:var(--bg-mint); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; padding:24px; text-align:center;} .map-load-btn:hover{background:#E3EBE3;} .map-pin{font-size:26px;} .map-load-btn span:nth-child(2){font-family:'Fraunces',serif; font-size:16px; color:var(--accent-deep); font-weight:600;} .map-load-btn small{font-size:12px; color:var(--ink-muted); max-width:220px;} form{background:var(--bg-panel); border:1px solid var(--line); padding:34px; border-radius:var(--r-lg);} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;} .form-row.full{grid-template-columns:1fr;} label{display:block; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px; font-weight:600;} input,textarea,select{width:100%; border:1px solid var(--line); background:var(--bg); padding:12px 14px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); border-radius:var(--r-sm);} input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);} textarea{resize:vertical; min-height:110px;} form .btn{width:100%; margin-top:6px; cursor:pointer; border:1px solid var(--accent-deep); justify-content:center;} footer{background:var(--accent-deep); color:#DCE9F5; padding:56px 0 28px;} .footer-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px;} footer h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#9FC0DE; margin-bottom:16px; font-weight:600;} footer .flogo{font-family:'Fraunces',serif; font-size:21px; color:#fff; margin-bottom:12px;} .footer-logo-img{height:38px; width:auto; margin-bottom:14px; display:block;} footer p{font-size:14px; color:#B9D3EA; max-width:34ch;} footer ul{list-style:none;} footer li{margin-bottom:10px; font-size:14px;} footer a:hover{color:#fff;} .footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; color:#8AA9C4; flex-wrap:wrap; gap:10px;} .fab-stack{position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:14px; z-index:80; align-items:flex-end;} .fab{width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px -10px rgba(15,27,38,.45); color:#fff; position:relative; cursor:pointer; border:none;} .fab svg{width:26px; height:26px;} .fab.call{background:var(--accent-deep);} .fab.whatsapp{background:var(--whatsapp);} .fab.chat{background:var(--amber); color:#20180a;} .fab.pulse::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid currentColor; opacity:.55; animation:pulse 2.2s ease-out infinite;} @keyframes pulse{0%{transform:scale(1); opacity:.5;} 100%{transform:scale(1.5); opacity:0;}} .fab-label{position:absolute; right:70px; top:50%; transform:translateY(-50%); background:var(--ink); color:#fff; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease;} .fab:hover .fab-label{opacity:1;} .chat-panel{position:fixed; right:22px; bottom:96px; width:340px; max-width:calc(100vw - 44px); background:var(--bg-panel); border-radius:var(--r-lg); box-shadow:0 26px 60px -20px rgba(15,27,38,.5); z-index:90; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); transform:translateY(16px) scale(.97); opacity:0; pointer-events:none; transition:all .25s ease; max-height:min(520px, 70vh);} .chat-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;} .chat-head{background:var(--accent-deep); color:#fff; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px;} .chat-head .who{display:flex; align-items:center; gap:10px;} .chat-head .avatar{width:34px; height:34px; border-radius:50%; background:var(--amber); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; color:#20180a;} .chat-head .name{font-size:14px; font-weight:700;} .chat-head .status{font-size:11.5px; color:#B9E0C9; display:flex; align-items:center; gap:5px;} .chat-head .status::before{content:""; width:7px; height:7px; border-radius:50%; background:#7CE8A6;} .chat-close{background:none; border:none; color:#fff; font-size:20px; cursor:pointer; line-height:1; opacity:.8;} .chat-close:hover{opacity:1;} .chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--bg-mint);} .msg{max-width:82%; padding:10px 14px; border-radius:var(--r-md); font-size:13.5px; line-height:1.5;} .msg.bot{background:var(--bg-panel); align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 2px 8px -4px rgba(0,0,0,.15);} .msg.user{background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px;} .chip-row{display:flex; gap:8px; flex-wrap:wrap; padding:0 16px 12px; background:var(--bg-mint);} .chip{background:var(--bg-panel); border:1px solid var(--line); font-size:12px; padding:7px 12px; border-radius:var(--r-pill); cursor:pointer; font-weight:600; color:var(--accent-deep);} .chip:hover{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep);} .chat-input-row{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:var(--bg-panel);} .chat-input-row input{flex:1; border:1px solid var(--line); border-radius:var(--r-pill); padding:10px 16px; font-size:13.5px; font-family:'Inter',sans-serif;} .chat-input-row input:focus{outline:2px solid var(--accent); outline-offset:1px;} .chat-send{width:38px; height:38px; border-radius:50%; background:var(--accent-deep); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;} .chat-send svg{width:16px; height:16px;} /* ---------- Cookie-Consent-Banner ---------- */ .cookie-banner{position:fixed; left:20px; bottom:20px; z-index:95; max-width:400px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:0 26px 60px -20px rgba(15,27,38,.45); transform:translateY(140%); transition:transform .4s cubic-bezier(.2,.8,.3,1);} .cookie-banner.show{transform:translateY(0);} .cookie-banner h4{font-family:'Fraunces',serif; font-size:16px; margin-bottom:8px;} .cookie-banner p{font-size:13px; color:var(--ink-muted); line-height:1.55; margin-bottom:16px;} .cookie-banner p a{color:var(--accent-deep); font-weight:600;} .cookie-actions{display:flex; gap:10px; flex-wrap:wrap;} .cookie-actions .btn{padding:10px 18px; font-size:13px;} .cookie-actions .btn.text{background:none; border:none; color:var(--ink-muted); font-weight:600; padding:10px 6px;} @media(max-width:860px){ .cookie-banner{left:12px; right:12px; max-width:none; bottom:auto; top:12px; transform:translateY(-160%);} .cookie-banner.show{transform:translateY(0);} } @media(max-width:860px){ .nav-links{position:fixed; top:69px; left:0; right:0; background:var(--bg); flex-direction:column; padding:24px 32px; gap:20px; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .35s ease; z-index:40;} .nav-links.open{transform:translateY(0);} .menu-toggle{display:flex;} .hero .wrap{grid-template-columns:1fr;} .hero-media{order:-1; max-width:420px; margin:0 auto 20px;} .process{grid-template-columns:1fr;} .about-grid{grid-template-columns:1fr;} .about-media{max-width:420px; margin:0 auto;} .about-values{grid-template-columns:1fr 1fr;} .service-grid{grid-template-columns:1fr 1fr;} .quote-row{grid-template-columns:1fr;} .ratgeber-grid{grid-template-columns:1fr;} .contact-grid{grid-template-columns:1fr;} .form-row{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr 1fr;} .chat-panel{right:12px; bottom:88px;} .fab-stack{right:14px; bottom:14px;} } @media(max-width:560px){ .service-grid{grid-template-columns:1fr;} .about-values{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .hero-badge{display:none;} .quick-actions{flex-direction:column;} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .reveal .wipe-cover{transition:none; transform:scaleX(0); opacity:0;} .fab.pulse::after{animation:none; display:none;} .hero::before,.hero .blob-2,.marquee-track{animation:none;} .fade-up{opacity:1; transform:none; transition:none;} .img-frame img{transition:none;} } /* Aktiver Menüpunkt hervorheben */ .nav-links a.active-nav{color:var(--accent-deep);} .nav-links a.active-nav::after{width:100%; background:var(--accent-deep);} /* ---------- Barrierefreiheits-Regler ---------- */ html.a11y-groß{font-size:112.5%;} html.a11y-sehr-gross{font-size:125%;} html.a11y-kontrast{--bg:#FFFFFF; --bg-panel:#FFFFFF; --bg-mint:#F0F0F0; --ink:#000000; --ink-muted:#1a1a1a; --line:#000000; --accent:#00524a; --accent-deep:#003a33; --brass:#6b5410;} html.a11y-kontrast a{text-decoration:underline;} html.a11y-kontrast .btn{border-width:2px;} html.a11y-kontrast .img-frame, html.a11y-kontrast .value, html.a11y-kontrast .service-card, html.a11y-kontrast .ratgeber-card{border:2px solid #000 !important;} .a11y-fab{position:fixed; left:16px; top:84px; width:46px; height:46px; border-radius:50%; background:var(--accent-deep); color:#fff; border:none; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 14px 28px -10px rgba(15,27,38,.45); z-index:70;} .a11y-panel{position:fixed; left:16px; top:136px; width:260px; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:0 26px 60px -20px rgba(15,27,38,.5); z-index:90; transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .2s ease;} .a11y-panel.open{transform:translateY(0); opacity:1; pointer-events:auto;} .a11y-panel h4{font-family:'Fraunces',serif; font-size:15px; margin-bottom:12px;} .a11y-row{display:flex; gap:8px; margin-bottom:12px;} .a11y-row button{flex:1; border:1px solid var(--line); background:var(--bg); border-radius:var(--r-sm); padding:8px 4px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink);} .a11y-row button.active{background:var(--accent-deep); color:#fff; border-color:var(--accent-deep);} .a11y-panel .a11y-reset{width:100%; background:none; border:none; color:var(--ink-muted); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px 0;} @media(max-width:860px){ .a11y-fab{left:10px; top:74px; width:40px; height:40px;} .a11y-panel{left:10px; top:120px; width:calc(100vw - 20px); max-width:260px;} } /* ---------- Newsletter (Footer) ---------- */ .newsletter-box{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:20px; margin-top:18px;} .newsletter-box h4{color:#fff; margin-bottom:8px;} .newsletter-box p{font-size:13px; color:#B9C7BB; margin-bottom:12px;} .newsletter-row{display:flex; flex-direction:column; gap:8px;} .newsletter-row input[type="email"]{width:100%;} .newsletter-row button{width:100%;} .newsletter-row input[type="email"]{flex:1 1 auto; width:auto; min-width:160px; border:1px solid rgba(255,255,255,.25); background:#fff; color:#16241F; padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px;} .newsletter-row input[type="email"]::placeholder{color:#7a8a82;} .newsletter-row input[type="email"]:-webkit-autofill, .newsletter-row input[type="email"]:-webkit-autofill:hover, .newsletter-row input[type="email"]:-webkit-autofill:focus{ -webkit-text-fill-color:#16241F; -webkit-box-shadow:0 0 0px 1000px #fff inset; caret-color:#16241F; transition:background-color 999999s ease-in-out 0s; } .newsletter-row button{width:auto; flex:0 0 auto;} .newsletter-row button{white-space:nowrap; padding:10px 18px; font-size:13px;} .newsletter-consent{font-size:11.5px; color:#9FB3A2; margin-top:8px; display:flex; gap:6px; align-items:flex-start;} .newsletter-consent input{margin-top:2px; width:16px; height:16px; flex-shrink:0; -webkit-appearance:auto; appearance:auto;} .newsletter-consent span{flex:1 1 auto; min-width:0; word-wrap:break-word; overflow-wrap:break-word;} #newsletterStatus{display:none; font-size:12.5px; color:#7CE8A6; margin-top:8px;} /* ---------- Willkommens-Effekt: beschlagenes Glas wird "abgezogen" ---------- */ .intro-wipe{position:fixed; inset:0; z-index:9999; cursor:pointer;} .intro-wipe .wipe-band{position:absolute; left:0; right:0; overflow:hidden;} .intro-wipe .wipe-band.reverse{transform:scaleX(-1);} .intro-wipe .fog-layer{ position:absolute; inset:0; overflow:hidden; -webkit-backdrop-filter:blur(5px) saturate(102%); backdrop-filter:blur(5px) saturate(102%); background:rgba(240,242,236,.66); animation: introWipeReveal 1.35s cubic-bezier(.45,0,.3,1) forwards; animation-delay:.6s; } .intro-wipe .foam-bubble{ position:absolute; border-radius:50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), rgba(255,255,255,.35) 45%, rgba(255,255,255,.12) 70%, transparent 85%); box-shadow: inset -3px -3px 5px rgba(15,27,38,.1), inset 2px 2px 3px rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.3); } .intro-wipe .squeegee{ position:absolute; top:8%; height:84%; width:9px; left:-3%; transform-origin:50% 8%; /* Drehpunkt oben, wie ein echter Handgriff, nicht die Mitte */ animation: introSqueegeeScrub 1.35s cubic-bezier(.45,0,.3,1) forwards; animation-delay:.6s; animation-fill-mode:both; } /* Holzgriff (wie im Referenzfoto: helles Holz, rund) */ .intro-wipe .squeegee::before{ content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:7px; height:42px; border-radius:4px; background:linear-gradient(90deg, #8a6533, #C89A5E 30%, #E0B87A 50%, #C89A5E 70%, #8a6533); box-shadow:0 2px 6px rgba(0,0,0,.3); } /* Schwarzer Gummi-Verbindungskopf zwischen Griff und Klinge (wie im Referenzfoto) */ .intro-wipe .squeegee::after{ content:''; position:absolute; top:-6px; left:50%; transform:translateX(-50%); width:15px; height:20px; border-radius:5px 5px 3px 3px; background:linear-gradient(180deg, #2b2b2b, #161616); box-shadow:0 3px 8px rgba(0,0,0,.35); } /* Aluminium-Schiene mit schwarzer Gummikante, die tatsächlich "abzieht" */ .intro-wipe .squeegee .blade-holder{ position:absolute; inset:0; border-radius:2px; background:linear-gradient(90deg, #8b8f8d, #dfe2e0 30%, #dfe2e0 70%, #8b8f8d); box-shadow:0 0 22px 5px rgba(15,27,38,.35); } .intro-wipe .squeegee .blade-rubber{ position:absolute; top:0; bottom:0; left:50%; width:5px; transform:translateX(-50%); background:linear-gradient(90deg, #1c1c1c, #3a3a3a 50%, #1c1c1c); border-radius:2px; overflow:hidden; } /* Nasser Glanzstreifen auf der Gummikante — wirkt wie Licht, das sich auf feuchtem Gummi bricht */ .intro-wipe .squeegee .blade-rubber::after{ content:''; position:absolute; top:0; bottom:0; left:1px; width:1.5px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.55) 40%, rgba(255,255,255,.2) 60%, transparent); } /* Frisch abgezogene Kante: ein schmaler, klarer Streifen direkt an der Gummikante, der den Übergang von "beschlagen" zu "klar" schärfer und echter wirken lässt */ .intro-wipe .squeegee .clean-edge{ position:absolute; top:0; height:100%; width:20px; left:10px; background:linear-gradient(90deg, rgba(255,255,255,.35), transparent); filter:blur(2px); } @keyframes introWipeReveal{ 0% { clip-path:inset(0 0 0 0); } 14% { clip-path:inset(0 0 0 10%); } 27% { clip-path:inset(0 0 0 22%); } 40% { clip-path:inset(0 0 0 36%); } 52% { clip-path:inset(0 0 0 48%); } 65% { clip-path:inset(0 0 0 62%); } 77% { clip-path:inset(0 0 0 76%); } 90% { clip-path:inset(0 0 0 90%); } 100%{ clip-path:inset(0 0 0 100%); } } /* Unregelmäßige, aber physikalisch nachvollziehbare Wisch-Bewegung: die Neigung folgt grob der Zugrichtung (wie ein echter Fensterputzer, der den Griff beim Ziehen kippt), exakt dieselben Zeitpunkte wie bei introWipeReveal oben — Blatt und freie Fläche bleiben so immer an derselben Stelle synchron. */ @keyframes introSqueegeeScrub{ 0% { left:-3%; transform:translateY(0) rotate(-3deg); } 14% { left:10%; transform:translateY(-24px) rotate(9deg); } 27% { left:22%; transform:translateY(16px) rotate(-11deg); } 40% { left:36%; transform:translateY(-20px) rotate(8deg); } 52% { left:48%; transform:translateY(12px) rotate(-9deg); } 65% { left:62%; transform:translateY(-22px) rotate(10deg); } 77% { left:76%; transform:translateY(14px) rotate(-8deg); } 90% { left:90%; transform:translateY(-10px) rotate(6deg); } 100%{ left:103%; transform:translateY(0) rotate(0deg); } } @media (prefers-reduced-motion: reduce){ .intro-wipe{ display:none; } } @media (max-width:640px){ .intro-wipe .foam-bubble{ transform:scale(.8); } } /* ---------- Leistungsspezifische Bild-Effekte auf den Detailseiten ---------- */ /* Büroreinigung: Politur-Lichtstreifen zieht einmal übers Bild (frisch poliert) */ .effect-shine{position:relative;} .effect-shine::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); transform:translateX(-120%); } .effect-shine.play::after{ animation:shineSweep 1.4s ease-out forwards; } @keyframes shineSweep{ to{ transform:translateX(120%); } } /* Praxisreinigung: sanftes Hygiene-Leuchten pulsiert am Rand (steril/sauber) */ .effect-hygiene-pulse{position:relative;} .effect-hygiene-pulse::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow:0 0 0 0 rgba(120,200,190,.55); } .effect-hygiene-pulse.play::after{ animation:hygienePulse 2.2s ease-out 2; } @keyframes hygienePulse{ 0%{ box-shadow:0 0 0 0 rgba(120,200,190,.5); } 70%{ box-shadow:0 0 0 22px rgba(120,200,190,0); } 100%{ box-shadow:0 0 0 0 rgba(120,200,190,0); } } /* Fensterreinigung: Mini-Abzieher wischt einmal übers Bild */ .effect-mini-squeegee{position:relative; overflow:hidden;} .effect-mini-squeegee .mini-fog{ position:absolute; inset:0; pointer-events:none; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); background:rgba(255,255,255,.28); clip-path:inset(0 0 0 0); } .effect-mini-squeegee.play .mini-fog{ animation:miniFogWipe 1.9s cubic-bezier(.6,0,.2,1) forwards; animation-delay:.25s; } .effect-mini-squeegee .mini-blade{ position:absolute; top:-6%; height:112%; width:7px; left:-2%; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,0), var(--accent-deep) 30%, var(--accent-deep) 70%, rgba(255,255,255,0)); box-shadow:0 0 16px 3px rgba(15,27,38,.4); } .effect-mini-squeegee.play .mini-blade{ animation:miniBladeMove 1.9s cubic-bezier(.6,0,.2,1) forwards; animation-delay:.25s; } @keyframes miniFogWipe{ to{ clip-path:inset(0 0 0 100%); } } @keyframes miniBladeMove{ to{ left:102%; } } /* Teppich-/Polsterreinigung: leichtes Auffrischen-Ripple beim Hover (Fasern) */ .effect-fiber-ripple img{ transition:transform .5s cubic-bezier(.3,1.4,.5,1), filter .5s ease; } .effect-fiber-ripple:hover img{ transform:scale(1.035); filter:saturate(1.12) brightness(1.03); } /* Sonderreinigung: Staubpartikel lösen sich auf und schweben weg */ .effect-dust-dissolve{position:relative; overflow:hidden;} .effect-dust-dissolve .dust-mote{ position:absolute; bottom:6%; border-radius:50%; background:rgba(230,225,210,.85); pointer-events:none; filter:blur(.4px); } .effect-dust-dissolve.play .dust-mote{ animation:dustFloatAway 2.3s ease-out forwards; } @keyframes dustFloatAway{ 0%{ opacity:.85; transform:translateY(0) scale(1); } 100%{ opacity:0; transform:translateY(-70px) scale(.3); } } @media (prefers-reduced-motion: reduce){ .effect-shine::after, .effect-hygiene-pulse::after, .effect-mini-squeegee .mini-fog, .effect-mini-squeegee .mini-blade, .effect-dust-dissolve .dust-mote{ animation:none !important; display:none !important; } .effect-fiber-ripple:hover img{ transform:none; filter:none; } }