, <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:#F7F5EF; --bg-mint:#EBF1EB; --bg-panel:#FFFFFF; --ink:#16241F; --ink-muted:#5B6B62; --accent:#2F6F62; --accent-deep:#1D4A40; --brass:#B9944F; --amber:#D9A441; --whatsapp:#25D366; --line:#E2E1D6; --wipe:#F7F5EF; --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(22,36,31,.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(22,36,31,.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(247,245,239,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;} .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(22,36,31,.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;} .service-card{background:var(--bg-panel); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease;} .service-card:hover{transform:translateY(-6px); box-shadow:0 24px 46px -22px rgba(22,36,31,.35);} .service-card .img-frame{aspect-ratio:16/11; border-radius:0;} .service-card .body{padding:24px 24px 28px; position:relative;} .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);} .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(22,36,31,.25);} .google-badge:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(22,36,31,.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;} .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 .3s ease, box-shadow .3s ease;} .ratgeber-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px -24px rgba(22,36,31,.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(22,36,31,.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(22,36,31,.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(22,36,31,.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:#DCE4DC; padding:56px 0 28px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;} footer h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#9FB3A2; 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:#B9C7BB; 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:#8AA090; 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(22,36,31,.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(22,36,31,.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(22,36,31,.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(22,36,31,.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(22,36,31,.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:rgba(255,255,255,.08); color:#fff; padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px;} .newsletter-row input[type="email"]::placeholder{color:#9FB3A2;} .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:#fff; -webkit-box-shadow:0 0 0px 1000px rgba(30,58,50,.9) inset; caret-color:#fff; 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;} #newsletterStatus{display:none; font-size:12.5px; color:#7CE8A6; margin-top:8px;}

/* ========================================================== 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:#F7F5EF; --bg-mint:#EBF1EB; --bg-panel:#FFFFFF; --ink:#16241F; --ink-muted:#5B6B62; --accent:#2F6F62; --accent-deep:#1D4A40; --brass:#B9944F; --amber:#D9A441; --whatsapp:#25D366; --line:#E2E1D6; --wipe:#F7F5EF; --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(22,36,31,.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(22,36,31,.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(247,245,239,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;} .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(22,36,31,.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;} .service-card{background:var(--bg-panel); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease;} .service-card:hover{transform:translateY(-6px); box-shadow:0 24px 46px -22px rgba(22,36,31,.35);} .service-card .img-frame{aspect-ratio:16/11; border-radius:0;} .service-card .body{padding:24px 24px 28px; position:relative;} .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);} .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(22,36,31,.25);} .google-badge:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(22,36,31,.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;} .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 .3s ease, box-shadow .3s ease;} .ratgeber-card:hover{transform:translateY(-6px); box-shadow:0 22px 44px -24px rgba(22,36,31,.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(22,36,31,.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(22,36,31,.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(22,36,31,.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:#DCE4DC; padding:56px 0 28px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px;} footer h4{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#9FB3A2; 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:#B9C7BB; 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:#8AA090; 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(22,36,31,.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(22,36,31,.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(22,36,31,.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(22,36,31,.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(22,36,31,.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:rgba(255,255,255,.08); color:#fff; padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px;} .newsletter-row input[type="email"]::placeholder{color:#9FB3A2;} .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:#fff; -webkit-box-shadow:0 0 0px 1000px rgba(30,58,50,.9) inset; caret-color:#fff; 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;} #newsletterStatus{display:none; font-size:12.5px; color:#7CE8A6; margin-top:8px;}