*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#08121E;--navy2:#0C1C30;--navy3:#112240; --aqua:#00C5D4;--aqua2:#00A8B5;--aqua-pale:#E0F7FA;--aqua-mid:#80DEEA; --fog:#7A96B5;--mist:#B0C8E0;--white:#FFFFFF; --ease:cubic-bezier(0.22,1,0.36,1); } html{scroll-behavior:smooth} body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--navy);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6} /* ─── NAV ─── */ #nav{position:fixed;top:0;left:0;right:0;z-index:300;display:flex;align-items:center;justify-content:space-between;padding:1rem 5vw;transition:background 0.4s,box-shadow 0.4s;animation:navIn 0.8s var(--ease) both} @keyframes navIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}} #nav.scrolled{background:rgba(8,18,30,0.95);backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,197,212,0.1)} .nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0} .logo-spin{width:36px;height:36px;border-radius:50%;border:2px solid var(--aqua);display:flex;align-items:center;justify-content:center;animation:spin 14s linear infinite;flex-shrink:0} @keyframes spin{to{transform:rotate(360deg)}} .logo-r{font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;color:var(--aqua)} .logo-txt{font-family:'Playfair Display',serif;font-weight:700;font-size:1.1rem;color:var(--white)} .logo-txt span{color:var(--aqua)} .nav-links{display:flex;align-items:center;gap:1.8rem;list-style:none} .nav-links a{font-size:0.84rem;font-weight:400;color:var(--mist);text-decoration:none;transition:color 0.2s} .nav-links a:hover{color:var(--white)} .nav-cta{background:var(--aqua);color:var(--navy)!important;font-weight:600!important;padding:0.48rem 1.2rem;border-radius:50px;transition:all 0.25s!important} .nav-cta:hover{background:var(--aqua2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,197,212,0.4)} /* Mobile hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px} .hamburger span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;transition:all 0.3s} .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} .mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(8,18,30,0.98);backdrop-filter:blur(20px);padding:1.5rem 5vw 2rem;flex-direction:column;gap:1rem;border-bottom:1px solid rgba(0,197,212,0.15);z-index:299} .mobile-menu.open{display:flex} .mobile-menu a{font-size:1rem;color:var(--mist);text-decoration:none;padding:0.5rem 0;border-bottom:1px solid rgba(255,255,255,0.05)} .mobile-menu a:last-child{background:var(--aqua);color:var(--navy);text-align:center;padding:0.7rem;border-radius:50px;border:none;font-weight:600;margin-top:0.5rem} /* ─── HERO ─── */ .hero{min-height:100svh;display:grid;grid-template-columns:1.1fr 0.9fr;align-items:center;gap:1.5rem;padding:7rem 5vw 5rem;position:relative;overflow:hidden;box-sizing:border-box} .hero-visual{display:flex;justify-content:center;align-items:center} .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden} .ripple-c{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:min(600px,90vw);height:min(600px,90vw);pointer-events:none} .rpl{position:absolute;border-radius:50%;border:1px solid rgba(0,197,212,0.12);top:50%;left:50%;transform:translate(-50%,-50%);animation:rplOut var(--d,6s) var(--dl,0s) ease-out infinite} @keyframes rplOut{0%{width:0;height:0;opacity:.5}100%{width:100%;height:100%;opacity:0}} .hero-text{position:relative;z-index:2;max-width:560px} .hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.25);border-radius:50px;padding:0.35rem 0.9rem;font-size:0.72rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--aqua);margin-bottom:1.5rem;opacity:0;animation:up 0.8s 0.2s var(--ease) forwards} .bpulse{width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:blink 2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:1}50%{opacity:.3}} @keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}} .hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.6rem,6vw,5.5rem);font-weight:900;line-height:1.0;letter-spacing:-0.02em;margin-bottom:1.3rem;opacity:0;animation:up 0.9s 0.4s var(--ease) forwards} .hero h1 em{font-style:italic;color:var(--aqua);display:block} .hero-lead{font-size:clamp(0.9rem,1.5vw,1.05rem);color:var(--mist);font-weight:300;line-height:1.75;max-width:440px;margin-bottom:2rem;opacity:0;animation:up 0.9s 0.6s var(--ease) forwards} .hero-btns{display:flex;gap:0.8rem;flex-wrap:wrap;margin-bottom:2.5rem;opacity:0;animation:up 0.9s 0.8s var(--ease) forwards} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:0.88rem;padding:0.78rem 1.6rem;border:none;cursor:pointer;text-decoration:none;transition:all 0.3s var(--ease);border-radius:50px;white-space:nowrap;position:relative;overflow:hidden} .btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.12);transform:translateX(-110%) skewX(-10deg);transition:transform 0.5s var(--ease)} .btn:hover::before{transform:translateX(110%) skewX(-10deg)} .btn-aqua{background:var(--aqua);color:var(--navy)} .btn-aqua:hover{background:var(--aqua2);transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,197,212,0.35)} .btn-outline{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,0.2)} .btn-outline:hover{border-color:var(--aqua);color:var(--aqua)} .btn-primary{background:linear-gradient(135deg,#0a7fa8,#00C5D4);color:var(--white);border:1.5px solid transparent} .btn-primary:hover{background:linear-gradient(135deg,#0990bb,#00d8e8);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,197,212,0.3)} /* Hero visual – dashboard */ .dash{background:rgba(255,255,255,0.04);border:1px solid rgba(0,197,212,0.15);border-radius:20px;padding:1.6rem;backdrop-filter:blur(10px);width:100%} .dash-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem} .dash-title{font-family:'Playfair Display',serif;font-size:0.95rem;font-weight:700} .dash-st{display:flex;align-items:center;gap:5px;font-size:0.7rem;color:var(--aqua)} .ddot{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 8px var(--aqua);animation:blink 1.8s ease-in-out infinite} .dash-brush{width:52px;height:52px;background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.4rem;animation:brushRock 5s ease-in-out infinite} @keyframes brushRock{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}} .dash-bars{display:flex;flex-direction:column;gap:0.9rem;margin-bottom:1.4rem} .db{display:flex;flex-direction:column;gap:4px} .db-top{display:flex;justify-content:space-between;font-size:0.74rem} .db-name{color:var(--mist)} .db-pct{color:var(--aqua);font-weight:600} .db-track{height:4px;background:rgba(255,255,255,0.07);border-radius:50px;overflow:hidden} .db-fill{height:100%;background:linear-gradient(90deg,var(--aqua2),var(--aqua));border-radius:50px;transform:scaleX(0);transform-origin:left;animation:barFill var(--bd,2s) var(--bdel,.5s) var(--ease) both} @keyframes barFill{to{transform:scaleX(1)}} .dash-chips{display:flex;flex-wrap:wrap;gap:5px} .chip{background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.2);border-radius:50px;padding:0.22rem 0.7rem;font-size:0.68rem;color:var(--aqua-mid);font-weight:500} /* Floating badges */ .fb{position:absolute;background:rgba(8,18,30,0.92);border:1px solid rgba(0,197,212,0.25);backdrop-filter:blur(12px);border-radius:12px;padding:0.6rem 0.9rem;display:flex;align-items:center;gap:7px;font-size:0.74rem;font-weight:500;z-index:3;white-space:nowrap} .fb-1{top:-14px;right:-10px;animation:fbFloat 5s ease-in-out infinite alternate} .fb-2{bottom:-14px;left:-10px;animation:fbFloat 6s 1s ease-in-out infinite alternate} @keyframes fbFloat{from{transform:translateY(0)}to{transform:translateY(-8px)}} .fb-teal{color:var(--aqua);font-weight:700} /* ─── WIPE DIVIDER ─── */ .wipe-div{width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--aqua),transparent);position:relative;overflow:hidden} .wipe-div::after{content:'';position:absolute;top:-2px;left:-60%;width:60%;height:6px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);animation:shine 3s linear infinite} @keyframes shine{from{left:-60%}to{left:120%}} /* ─── SHARED ─── */ .si{max-width:1180px;margin:0 auto;padding:0 5vw} section{padding:5.5rem 0} .stag{display:inline-flex;align-items:center;gap:8px;font-size:0.7rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--aqua);margin-bottom:0.8rem} .stag::before{content:'';width:18px;height:1px;background:var(--aqua)} h2{font-family:'Playfair Display',serif;font-size:clamp(1.9rem,4vw,3.4rem);font-weight:700;letter-spacing:-0.02em;line-height:1.08;margin-bottom:0.8rem} h2 em{font-style:italic;color:var(--aqua)} .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.visible{opacity:1;transform:none} .rd1{transition-delay:.1s}.rd2{transition-delay:.2s}.rd3{transition-delay:.3s}.rd4{transition-delay:.4s} /* ─── SERVE ─── */ .serve-sec{background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 100%)} .serve-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem} .sc{background:rgba(255,255,255,0.03);border:1px solid rgba(0,197,212,0.1);border-radius:20px;padding:2rem;transition:all 0.4s var(--ease);opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .4s,border-color .4s} .sc.visible{opacity:1;transform:none} .sc:nth-child(2){transition-delay:.12s} .sc:hover{border-color:rgba(0,197,212,0.3);transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,0.3)} .sc-icon{width:50px;height:50px;border-radius:14px;background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.2);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;transition:transform 0.4s var(--ease)} .sc:hover .sc-icon{transform:rotate(-6deg) scale(1.1)} .sc h3{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;margin-bottom:0.6rem} .sc p{font-size:0.84rem;color:var(--fog);line-height:1.7;margin-bottom:1.2rem} .sc-list{display:flex;flex-direction:column;gap:0.45rem} .sc-li{display:flex;align-items:center;gap:7px;font-size:0.8rem;color:var(--mist)} .ck{width:15px;height:15px;border-radius:50%;background:rgba(0,197,212,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0} /* ─── LEISTUNGEN GRID C ─── */ .lst-sec{background:var(--navy2)} .lst-grid-c{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:3rem} .lc-c{background:rgba(12,28,48,.82);border:1px solid rgba(0,197,212,.13);border-radius:18px;padding:1.6rem;transition:border-color .3s,transform .3s} .lc-c:hover{border-color:rgba(0,197,212,.3);transform:translateY(-2px)} .lc-c-wide{grid-column:span 2} .lcc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.9rem} .lcc-num{font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:700;color:rgba(0,197,212,.18);line-height:1} .lcc-badge{font-size:.62rem;font-weight:600;letter-spacing:.05em;border-radius:20px;padding:.25rem .75rem;flex-shrink:0;margin-top:.3rem} .lcc-badge.privat{background:rgba(0,197,212,.1);border:1px solid rgba(0,197,212,.2);color:#00C5D4} .lcc-badge.gewerbe{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--fog)} .lcc-badge.neu{background:rgba(0,197,212,.12);border:1px solid rgba(0,197,212,.25);color:#00C5D4} .lcc-line{height:2px;background:linear-gradient(90deg,#00C5D4,transparent);margin-bottom:.9rem;border-radius:2px} .lcc-title{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:.5rem} .lcc-desc{font-size:.82rem;color:var(--fog);line-height:1.75;margin-bottom:.8rem} .lcc-tags{display:flex;flex-wrap:wrap;gap:.35rem} .lt{background:rgba(0,197,212,0.08);border:1px solid rgba(0,197,212,0.15);border-radius:50px;padding:0.2rem 0.6rem;font-size:0.66rem;color:var(--aqua-mid);font-weight:500} @media(max-width:700px){.lst-grid-c{grid-template-columns:1fr}.lc-c-wide{grid-column:span 1}} /* ─── PROZESS ─── */ .prz-sec{background:linear-gradient(180deg,var(--navy2) 0%,var(--navy) 100%);position:relative;overflow:hidden} #auroraCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .prz-sec .si{position:relative;z-index:1} .prz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3.5rem;position:relative} .prz-grid::before{content:'';position:absolute;top:28px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,var(--aqua),rgba(0,197,212,0.1));transform:scaleX(0);transform-origin:left;transition:transform 1.5s .5s var(--ease)} .prz-grid.visible::before{transform:scaleX(1)} .ps{text-align:center;padding:0 1rem;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .ps.visible{opacity:1;transform:none} .ps:nth-child(2){transition-delay:.1s}.ps:nth-child(3){transition-delay:.2s}.ps:nth-child(4){transition-delay:.3s} .ps-ring{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(0,197,212,0.3);background:var(--navy2);margin:0 auto 1.2rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;transition:all 0.4s var(--ease)} .ps:hover .ps-ring{border-color:var(--aqua);background:rgba(0,197,212,0.1);transform:scale(1.08);box-shadow:0 0 0 8px rgba(0,197,212,0.07)} .ps-n{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--aqua)} .ps-t{font-family:'Playfair Display',serif;font-size:0.95rem;font-weight:700;margin-bottom:0.4rem} .ps-d{font-size:0.78rem;color:var(--fog);line-height:1.55} /* ─── BOOKING ─── */ .book-sec{background:var(--navy3);padding:5.5rem 0} .book-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start} .book-left{} .book-left p{font-size:0.88rem;color:var(--fog);line-height:1.75;font-weight:300;margin-top:0.8rem} /* Calendar */ .cal-wrap{margin-top:2rem} .cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .cal-month{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700} .cal-nav{background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.2);border-radius:8px;padding:0.3rem 0.6rem;cursor:pointer;color:var(--aqua);font-size:0.85rem;transition:all 0.2s;font-family:inherit} .cal-nav:hover{background:rgba(0,197,212,0.2)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .cal-day-name{text-align:center;font-size:0.65rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--fog);padding:0.4rem 0;margin-bottom:4px} .cal-day{text-align:center;font-size:0.8rem;padding:0.5rem 0.2rem;border-radius:8px;cursor:pointer;transition:all 0.2s;color:var(--mist);line-height:1;min-width:0} .cal-day:empty{cursor:default} .cal-day.today{color:var(--aqua);font-weight:700;background:rgba(0,197,212,0.1)} .cal-day.available:hover{background:rgba(0,197,212,0.15);color:var(--white)} .cal-day.selected{background:var(--aqua);color:var(--navy);font-weight:700} .cal-day.disabled{color:rgba(255,255,255,0.15);cursor:not-allowed} .cal-day.has-slots::after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--aqua);margin:2px auto 0;opacity:0.6} /* Timeslots */ .slots-wrap{margin-top:1.5rem} .slots-label{font-size:0.75rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--fog);margin-bottom:0.8rem} .slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .slot{background:rgba(255,255,255,0.04);border:1px solid rgba(0,197,212,0.15);border-radius:8px;padding:0.45rem;text-align:center;font-size:0.78rem;cursor:pointer;transition:all 0.2s;color:var(--mist)} .slot:hover{border-color:var(--aqua);color:var(--aqua);background:rgba(0,197,212,0.08)} .slot.sel{background:var(--aqua);color:var(--navy);border-color:var(--aqua);font-weight:600} .slot.full{opacity:.3;cursor:not-allowed;pointer-events:none;text-decoration:line-through} /* Book form */ .book-form{background:rgba(255,255,255,0.03);border:1px solid rgba(0,197,212,0.12);border-radius:20px;padding:2rem;margin-top:2rem} .booking-summary{background:rgba(0,197,212,0.08);border:1px solid rgba(0,197,212,0.2);border-radius:10px;padding:0.8rem 1rem;margin-bottom:1.2rem;font-size:0.8rem;color:var(--aqua-mid);display:none} .booking-summary.show{display:block} .fl{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:0.2rem} .fp{font-size:0.8rem;color:var(--fog);margin-bottom:1.5rem} .fr{margin-bottom:0.8rem} .fr2{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;margin-bottom:0.8rem} .flbl{display:block;font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--fog);margin-bottom:0.4rem} .fi,.fta,.fsel{width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:0.72rem 0.9rem;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.86rem;color:var(--white);outline:none;transition:border-color 0.2s,background 0.2s;appearance:none} .fi:focus,.fta:focus,.fsel:focus{border-color:var(--aqua);background:rgba(0,197,212,0.04)} .fi::placeholder,.fta::placeholder{color:rgba(255,255,255,0.2)} .fta{min-height:90px;resize:vertical} .fsel option{background:var(--navy)} .fsub{width:100%;background:var(--aqua);color:var(--navy);font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.92rem;padding:0.9rem;border:none;border-radius:50px;cursor:pointer;transition:all 0.3s var(--ease);margin-top:0.4rem;position:relative;overflow:hidden} .fsub:hover{background:var(--aqua2);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,197,212,0.4)} /* ─── FAQ ─── */ .faq-sec{background:var(--navy)} .faq-layout{display:grid;grid-template-columns:1fr 1.6fr;gap:4rem;align-items:start;margin-top:3rem} .faq-list{display:flex;flex-direction:column;gap:1px} .faq-item{border-bottom:1px solid rgba(255,255,255,0.06)} .faq-q{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0;cursor:pointer;font-size:0.9rem;font-weight:500;transition:color 0.2s;gap:1rem;user-select:none} .faq-q:hover{color:var(--aqua)} .faq-arr{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.3s var(--ease)} .faq-item.open .faq-arr{background:var(--aqua);border-color:var(--aqua);transform:rotate(45deg)} .faq-a{font-size:0.82rem;color:var(--fog);line-height:1.7;font-weight:300;max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease),padding 0.3s} .faq-item.open .faq-a{max-height:200px;padding:0 0 1rem} /* ─── KONTAKT ─── */ .kont-sec{background:var(--navy2)} .kont-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:4rem;align-items:start} .k-info{display:flex;flex-direction:column;gap:1rem;margin-top:1.8rem} .ki{display:flex;align-items:center;gap:12px;padding:1rem 1.3rem;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;text-decoration:none;color:var(--white);transition:all 0.3s var(--ease)} .ki:hover{border-color:rgba(0,197,212,0.3);background:rgba(0,197,212,0.05);transform:translateX(5px)} .ki-icon{width:38px;height:38px;border-radius:9px;background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.3s var(--ease)} .ki:hover .ki-icon{transform:scale(1.1) rotate(-5deg)} .ki-lbl{font-size:0.67rem;color:var(--fog);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px} .ki-val{font-size:0.9rem;font-weight:500} .kform{background:rgba(255,255,255,0.03);border:1px solid rgba(0,197,212,0.12);border-radius:20px;padding:2.2rem} .kfh h3{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:700} .kfh p{font-size:0.8rem;color:var(--fog);margin-top:0.3rem;margin-bottom:1.5rem} /* ─── FOOTER ─── */ footer{background:#060d18;border-top:1px solid rgba(0,197,212,0.08);padding:3.5rem 5vw 2rem} .ft-inner{max-width:1180px;margin:0 auto} .ft-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,0.06)} .ft-name{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;margin-bottom:0.7rem} .ft-name span{color:var(--aqua)} .ft-desc{font-size:0.82rem;color:var(--fog);line-height:1.65;max-width:240px;margin-bottom:1.2rem} .ft-soc a{display:inline-flex;align-items:center;gap:5px;font-size:0.78rem;color:var(--fog);text-decoration:none;transition:color 0.2s} .ft-soc a:hover{color:var(--aqua)} .ft-col h4{font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:1rem} .ft-col ul{list-style:none;display:flex;flex-direction:column;gap:0.55rem} .ft-col a{font-size:0.83rem;color:var(--fog);text-decoration:none;transition:color 0.2s} .ft-col a:hover{color:var(--aqua)} .ft-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} .ft-copy{font-size:0.74rem;color:rgba(255,255,255,0.2)} .ft-leg{display:flex;gap:1.2rem} .ft-leg a{font-size:0.74rem;color:rgba(255,255,255,0.2);text-decoration:none;transition:color 0.2s} .ft-leg a:hover{color:var(--aqua)} @media(max-width:700px){ .rc-stats{gap:.4rem}.rc-stat-n{font-size:1rem}.rc-stat-l{font-size:.55rem} .seo-grid{grid-template-columns:1fr!important} } /* ─── PARTICLE CANVAS GADGET ─── */ #particleCanvas{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:0.4} /* ─── SCROLL TO TOP ─── */ .stt{position:fixed;bottom:90px;right:82px;width:42px;height:42px;border-radius:50%;background:rgba(0,197,212,0.15);border:1px solid rgba(0,197,212,0.3);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:400;transition:all 0.3s;color:var(--aqua)} .stt.show{display:flex} .stt:hover{background:rgba(0,197,212,0.25);transform:translateY(-2px)} /* WhatsApp Button */ .wa-btn{position:fixed;bottom:22px;right:16px;z-index:401;display:flex;align-items:center;gap:8px;background:#25D366;color:#fff;border-radius:50px;padding:0.65rem 1.1rem 0.65rem 0.85rem;text-decoration:none;font-size:0.82rem;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;box-shadow:0 4px 20px rgba(37,211,102,0.35);transition:all 0.3s var(--ease);white-space:nowrap} .wa-btn:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,0.45)} .wa-label{letter-spacing:0.01em} /* ─── GEBIET ─── */ .gebiet-wrap{} .gebiet-grid{display:flex;flex-wrap:wrap;gap:0.6rem} .gebiet-item{display:flex;align-items:center;gap:6px;background:rgba(0,197,212,0.08);border:1px solid rgba(0,197,212,0.2);border-radius:50px;padding:0.35rem 1rem;font-size:0.78rem;font-weight:500;color:var(--aqua-mid);transition:all 0.2s} .gebiet-item:hover{background:rgba(0,197,212,0.15);transform:translateY(-2px)} @keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.2)}} /* ─── ABLAUF STEP CARDS ─── */ .prz-header{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:end;margin-bottom:3rem} .prz-sub{color:var(--fog);font-size:0.88rem;font-weight:300;line-height:1.75;align-self:end;margin-top:0} .prz-cards{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .prz-card{background:var(--navy3);border:1px solid rgba(255,255,255,0.07);border-radius:20px;overflow:hidden;transition:transform 0.35s var(--ease),box-shadow 0.35s,border-color 0.35s} .prz-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,0.35);border-color:rgba(0,197,212,0.2)} .prz-card-final{} .prz-card-top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.6rem 0} .prz-badge{font-family:'Playfair Display',serif;font-size:2.8rem;font-weight:700;color:rgba(0,197,212,0.12);letter-spacing:-0.04em;line-height:1;transition:color 0.3s} .prz-card:hover .prz-badge{color:rgba(0,197,212,0.25)} .prz-badge-final{} .prz-icon{width:48px;height:48px;border-radius:14px;background:rgba(0,197,212,0.1);border:1px solid rgba(0,197,212,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.4s var(--ease),background 0.3s} .prz-card:hover .prz-icon{transform:rotate(-8deg) scale(1.1);background:rgba(0,197,212,0.18)} .prz-icon-final{background:rgba(0,197,212,0.1)!important;border-color:rgba(0,197,212,0.2)!important} .prz-card-body{padding:1rem 1.6rem 1.6rem} .prz-card-body h3{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;margin-bottom:0.5rem;letter-spacing:-0.01em} .prz-card-body p{font-size:0.82rem;color:var(--fog);line-height:1.68;margin-bottom:0.9rem;font-weight:300} .prz-chips{display:flex;flex-wrap:wrap;gap:5px} .prz-chip{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:50px;padding:0.2rem 0.7rem;font-size:0.68rem;color:var(--mist)} .prz-chip-green{background:rgba(0,197,212,0.08);border-color:rgba(0,197,212,0.2);color:var(--aqua-mid)} @keyframes phoneTilt{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-6deg)}} @keyframes scanPulse{0%,100%{opacity:0.4}50%{opacity:1}} @keyframes docLine{0%,100%{stroke-dashoffset:8;opacity:.4}50%{stroke-dashoffset:0;opacity:1}} @media(max-width:900px){ .prz-header{grid-template-columns:1fr;gap:0.8rem;margin-bottom:2rem} .prz-cards{grid-template-columns:1fr 1fr;gap:1rem} } @media(max-width:600px){ .prz-cards{grid-template-columns:1fr;gap:0.9rem} .prz-badge{font-size:2.2rem} .prz-card-body h3{font-size:1rem} .prz-card-top{padding:1.2rem 1.3rem 0} .prz-card-body{padding:0.8rem 1.3rem 1.3rem} } /* ─── MOBILE RESPONSIVE ─── */ @media(max-width:900px){ #nav{padding:0.85rem 4vw} .nav-links{display:none} .hamburger{display:flex} .hero{grid-template-columns:1fr;gap:2rem;padding:5.5rem 4vw 3rem;min-height:auto} .hero-visual>div{max-width:100%!important} .rating-card{max-width:100%!important;width:100%!important} .hero-bg{background-image:none!important;background:linear-gradient(160deg,#0c1c30 0%,#08121E 50%,#0a1828 100%);overflow:visible!important} #dropCanvas{opacity:1!important;z-index:1} .dash{width:100%} .ripple-c{display:none} .hero-bg::after{display:none} .fb{display:none} .hero h1{font-size:clamp(2.2rem,8vw,3.5rem)} .hero-lead{font-size:0.92rem;max-width:100%} .hero-btns{flex-direction:row;flex-wrap:wrap} section{padding:3.5rem 0} .si{padding:0 4vw} h2{font-size:clamp(1.6rem,5.5vw,2.4rem)} .serve-grid{grid-template-columns:1fr;gap:1.2rem} .usp{padding:1rem 4vw} .usp-in{grid-template-columns:1fr 1fr;gap:0} .ui{padding:0.6rem 0.8rem;border-right:none;border-bottom:1px solid rgba(8,18,30,0.15)} .ui:nth-child(3),.ui:nth-child(4){border-bottom:none} .seo-grid{grid-template-columns:1fr!important} .tl-wrap{padding:0} .book-layout{grid-template-columns:1fr;gap:2rem} .slots-grid{grid-template-columns:repeat(4,1fr)} .slot{font-size:0.72rem;padding:0.4rem 0.2rem} .book-form{padding:1.5rem} .faq-layout{grid-template-columns:1fr;gap:2rem} .faq-sec{background-image:url('faq-bg.jpg')!important;background-size:cover!important;background-position:center!important;position:relative} .faq-sec::before{content:"";position:absolute;inset:0;background:rgba(8,18,30,.85);z-index:0;pointer-events:none} .faq-sec .si{position:relative;z-index:1} .faq-sec h2,.faq-sec .stag{color:#fff} .faq-sec p{color:rgba(255,255,255,.55)} .kont-layout{grid-template-columns:1fr;gap:2rem} .kform{padding:1.5rem} .ft-top{grid-template-columns:1fr;gap:2rem} .ft-top>div:not(:first-child){display:none} .ft-bot{flex-direction:column;align-items:flex-start;gap:0.5rem} .stt{bottom:76px;right:16px} } @media(max-width:600px){ #nav{padding:0.8rem 4vw} .hero{padding:5rem 4vw 2.5rem} .hero h1{font-size:2.1rem;line-height:1.05} .hero-badge{font-size:0.65rem;padding:0.3rem 0.75rem} .hero-btns{flex-direction:column;align-items:stretch} .hero-btns .btn{justify-content:center} .dash{padding:1.2rem} .dash-bars{gap:0.7rem} .chip{font-size:0.63rem;padding:0.18rem 0.55rem} .sc{padding:1.5rem} .sc h3{font-size:1.1rem} .usp-in{grid-template-columns:1fr} .ui{border-bottom:1px solid rgba(8,18,30,0.12)} .ui:last-child{border-bottom:none} .lc-img{height:110px} .lc-ico{width:56px!important;height:56px!important} .lc-body{padding:1.2rem} .lc-title{font-size:1rem} .lc-desc{font-size:0.78rem} .tl-icon-col{display:none} .tl-content{padding:0 0 1.8rem 1.2rem;border-left:2px solid rgba(0,197,212,0.25)} .tl-title{font-size:1.05rem} .tl-desc{font-size:0.8rem} .cal-day{padding:0.4rem 0.1rem;font-size:0.73rem;border-radius:5px} .slots-grid{grid-template-columns:repeat(3,1fr)} .fr2{grid-template-columns:1fr} .fi,.fta,.fsel{font-size:0.84rem;padding:0.7rem 0.85rem} .fsub,.form-submit{font-size:0.88rem} .fl{font-size:1.1rem} .book-form,.kform{padding:1.2rem} .gebiet-item{font-size:0.72rem;padding:0.28rem 0.75rem} .faq-q{font-size:0.85rem} .faq-a{font-size:0.8rem} .ki{padding:0.9rem 1rem} .ki-val{font-size:0.84rem} .msg{font-size:0.78rem} } . /* ── ICON ANIMATIONS ───────────────────────── */ /* Grundreinigung – brush scrubs left-right */ @keyframes scrub { 0%,100% { transform: translateX(0) rotate(-3deg); } 25% { transform: translateX(-6px) rotate(-6deg); } 75% { transform: translateX(6px) rotate(3deg); } } /* Schaum-Bubbles rise */ @keyframes bubbleRise { 0% { transform: translateY(0) scale(1); opacity:.8; } 100% { transform: translateY(-18px) scale(1.3); opacity:0; } } /* Sonderreinigung – spray mist pulse */ @keyframes sprayPulse { 0%,100% { opacity:.25; transform: scale(.85); } 50% { opacity:.9; transform: scale(1.1); } } @keyframes nozzleShake { 0%,100% { transform: rotate(0deg); } 30% { transform: rotate(-8deg); } 60% { transform: rotate(5deg); } } /* Unterhaltsreinigung – mop swings */ @keyframes mopSwing { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } } /* shine streaks */ @keyframes shineMove { 0% { transform: translateX(-20px); opacity:0; } 30% { opacity:.7; } 100% { transform: translateX(20px); opacity:0; } } /* Glasreinigung – squeegee slides down */ @keyframes squeegee { 0%,100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } } /* water drip falls */ @keyframes drip { 0% { transform: translateY(0); opacity:1; } 80% { transform: translateY(14px); opacity:.4; } 100% { transform: translateY(16px); opacity:0; } } /* Hausmeisterservice – wrench rotates */ @keyframes wrenchRotate { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } } /* gear spins */ @keyframes gearSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Sparkle pulse (shared) */ @keyframes sparkle { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.3; transform:scale(.6); } } /* Bristle wave (kept for compat) */ @keyframes bristle { 0%,100% { transform:scaleY(1); } 50% { transform:scaleY(.7); } } /* ─── USP TICKER ─── */ .usp-ticker{background:var(--navy2);border-top:1px solid rgba(0,197,212,.12);border-bottom:1px solid rgba(0,197,212,.12);padding:.65rem 0;overflow:hidden;position:relative} .usp-ticker::before,.usp-ticker::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .usp-ticker::before{left:0;background:linear-gradient(to right,var(--navy2),transparent)} .usp-ticker::after{right:0;background:linear-gradient(to left,var(--navy2),transparent)} .usp-track{display:flex;gap:0;width:max-content;animation:usp-scroll 28s linear infinite} .usp-track:hover{animation-play-state:paused} @keyframes usp-scroll{to{transform:translateX(-50%)}} .usp-item{display:inline-flex;align-items:center;gap:.55rem;padding:0 2.2rem;white-space:nowrap;font-family:"Space Grotesk",sans-serif;font-size:.78rem;font-weight:500;color:var(--mist);letter-spacing:.04em} .usp-item svg{flex-shrink:0;stroke:var(--aqua);fill:none;stroke-width:1.8;stroke-linecap:round} .usp-sep{color:rgba(0,197,212,.3);font-size:.6rem;padding:0 .2rem} /* ─── RATING CARD ─── */ .rating-card{background:rgba(12,28,48,.82);backdrop-filter:blur(24px);border:1px solid rgba(0,197,212,.18);border-radius:24px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.45);max-width:400px;width:100%} .rc-score-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(255,255,255,.06)} .rc-score{font-family:'Playfair Display',serif;font-size:4rem;font-weight:700;color:var(--white);line-height:1;flex-shrink:0} .rc-score-right{} .rc-stars{color:var(--aqua);font-size:1rem;letter-spacing:2px;margin-bottom:.25rem} .rc-label{font-size:.68rem;color:var(--fog);line-height:1.4} .rc-stats{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.4rem} .rc-stat{background:rgba(0,197,212,.05);border:1px solid rgba(0,197,212,.1);border-radius:10px;padding:.9rem;text-align:center} .rc-stat-n{font-size:1.3rem;font-weight:700;color:var(--aqua)} .rc-stat-l{font-size:.6rem;color:var(--fog);margin-top:.15rem;line-height:1.3} .rc-quote{display:flex;gap:.75rem;align-items:flex-start} .rc-avatar{width:36px;height:36px;border-radius:50%;background:rgba(0,197,212,.12);border:1px solid rgba(0,197,212,.22);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;color:var(--aqua);flex-shrink:0} .rc-q-text{font-size:.76rem;color:var(--mist);line-height:1.55;font-style:italic;margin-bottom:.3rem} .rc-q-author{font-size:.67rem;color:var(--fog)} .rev-card:hover{transform:translateY(-4px)!important;border-color:rgba(0,197,212,.25)!important} @media(max-width:700px){.rev-grid{grid-template-columns:1fr!important}.rev-card[style*="translateY(-12px)"]{transform:none!important}} @keyframes bristle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.08)}} @keyframes sparkle{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}} @keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}} @keyframes swayR{0%,100%{transform:rotate(0)}50%{transform:rotate(12deg)}} @keyframes wipe{0%,100%{transform:rotate(-25deg)}50%{transform:rotate(25deg)}} @keyframes wrenchTurn{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}} @keyframes docLine{0%,100%{stroke-dashoffset:8;opacity:.4}50%{stroke-dashoffset:0;opacity:1}} /* ══════════════════════════════════════════════════════════ REINEXO – Erweiterungen für die Mehrseiten-Struktur ══════════════════════════════════════════════════════════ */ /* ─── A11y: Skip-Link ─── */ .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--aqua);color:var(--navy);padding:.7rem 1.2rem;border-radius:0 0 10px 0;font-weight:600;font-size:.85rem} .skip-link:focus{left:0} :focus-visible{outline:2px solid var(--aqua);outline-offset:3px;border-radius:4px} /* ─── NAV: Dropdowns ─── */ .nav-links li.has-sub{position:relative} .nav-links .sub-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.84rem;color:var(--mist);background:none;border:none;cursor:pointer;font-family:inherit;padding:0;transition:color .2s} .nav-links .sub-toggle:hover,.nav-links li.has-sub:hover .sub-toggle{color:var(--white)} .nav-links .sub-toggle svg{transition:transform .25s var(--ease)} .nav-links li.has-sub:hover .sub-toggle svg{transform:rotate(180deg)} .subnav{position:absolute;top:100%;left:-1rem;padding-top:.9rem;min-width:260px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .22s var(--ease);list-style:none} .nav-links li.has-sub:hover .subnav,.nav-links li.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)} .subnav-inner{background:rgba(12,28,48,.98);backdrop-filter:blur(20px);border:1px solid rgba(0,197,212,.16);border-radius:14px;padding:.6rem;box-shadow:0 20px 50px rgba(0,0,0,.5)} .subnav a{display:block;padding:.55rem .8rem;border-radius:9px;font-size:.83rem;color:var(--mist);transition:background .18s,color .18s} .subnav a:hover{background:rgba(0,197,212,.09);color:var(--white)} .subnav a small{display:block;font-size:.68rem;color:var(--fog);margin-top:1px} .nav-links a.current{color:var(--aqua)} /* ─── Mobile-Menü: Akkordeon ─── */ .mobile-menu{max-height:calc(100vh - 60px);overflow-y:auto;-webkit-overflow-scrolling:touch} .mm-group{border-bottom:1px solid rgba(255,255,255,.05)} .mm-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;color:var(--mist);font-family:inherit;font-size:1rem;padding:.75rem 0;cursor:pointer;text-align:left} .mm-head svg{transition:transform .25s var(--ease);flex-shrink:0} .mm-group.open .mm-head{color:var(--aqua)} .mm-group.open .mm-head svg{transform:rotate(180deg)} .mm-sub{display:none;padding:0 0 .6rem .9rem;border-left:1px solid rgba(0,197,212,.2);margin-left:.2rem} .mm-group.open .mm-sub{display:block} .mm-sub a{display:block;font-size:.88rem;color:var(--fog);padding:.5rem 0;border:none} .mobile-menu>a{min-height:44px;display:flex;align-items:center} /* ─── BREADCRUMB (sitzt im Seitenkopf, nicht darüber) ─── */ .ph-bc{max-width:1200px;margin:0 auto 1.4rem;position:relative;z-index:2} .bc{padding:0} .bc ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;font-size:.72rem;color:var(--fog)} .bc a{color:var(--fog);text-decoration:none;transition:color .2s} .bc a:hover{color:var(--aqua)} .bc li+li::before{content:"›";margin-right:.4rem;color:rgba(122,150,181,.5)} .bc [aria-current]{color:var(--mist)} /* ─── PAGE-HERO (Unterseiten) ─── */ .ph{position:relative;padding:2.2rem 5vw 3.2rem;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05)} .ph::before{content:"";position:absolute;top:-40%;right:-10%;width:min(620px,80vw);height:min(620px,80vw);background:radial-gradient(circle,rgba(0,197,212,.10),transparent 68%);pointer-events:none} .ph-in{max-width:1200px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:start} .ph h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,4.6vw,3.4rem);font-weight:900;line-height:1.05;letter-spacing:-.02em;margin:.7rem 0 1rem} .ph h1 em{font-style:italic;color:var(--aqua)} .ph-lead{font-size:clamp(.9rem,1.4vw,1.02rem);color:var(--mist);font-weight:300;line-height:1.8;max-width:620px} .ph-btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem} /* Fakten-Karte im Page-Hero */ .facts{background:rgba(12,28,48,.7);border:1px solid rgba(0,197,212,.16);border-radius:18px;padding:1.4rem 1.5rem;backdrop-filter:blur(14px)} .facts h2{font-family:'Plus Jakarta Sans',sans-serif;font-size:.68rem!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:1rem} .facts dl{display:grid;gap:.75rem} .facts .fx{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:baseline;padding-bottom:.75rem;border-bottom:1px solid rgba(255,255,255,.06)} .facts .fx:last-child{border-bottom:none;padding-bottom:0} .facts dt{font-size:.76rem;color:var(--fog)} .facts dd{font-size:.8rem;color:var(--white);font-weight:500;text-align:right} /* ─── ANTWORT-BOX (für KI-Suche & Featured Snippets) ─── */ .answer{background:linear-gradient(135deg,rgba(0,197,212,.08),rgba(0,197,212,.02));border:1px solid rgba(0,197,212,.2);border-left:3px solid var(--aqua);border-radius:0 16px 16px 0;padding:1.5rem 1.7rem} .answer .a-lbl{display:flex;align-items:center;gap:.55rem;font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:.7rem} .answer p{font-size:.92rem;color:var(--mist);line-height:1.85;margin:0} .answer p+p{margin-top:.7rem} .answer strong{color:var(--white);font-weight:600} /* ─── CONTENT-SEKTIONEN ─── */ .cs{padding:4rem 5vw} .cs-alt{background:var(--navy2)} .cs-in{max-width:1200px;margin:0 auto} .cs-narrow{max-width:860px} .cs h2{font-family:'Playfair Display',serif;font-size:clamp(1.5rem,3.2vw,2.2rem);font-weight:700;line-height:1.18;letter-spacing:-.01em;margin-bottom:1rem} .cs h2 em{font-style:italic;color:var(--aqua)} .cs h3{font-family:'Playfair Display',serif;font-size:1.12rem;font-weight:700;color:var(--white);margin-bottom:.6rem} .cs p{font-size:.88rem;color:var(--fog);line-height:1.9;max-width:74ch} .cs p+p{margin-top:.9rem} .cs p strong{color:var(--mist);font-weight:600} .cs a.inl{color:var(--aqua);text-decoration:none;border-bottom:1px solid rgba(0,197,212,.3);transition:border-color .2s} .cs a.inl:hover{border-color:var(--aqua)} .cs-2col{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem} /* ─── CHECK-GRID ─── */ .chk{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.55rem;margin-top:1.4rem} .chk-i{display:flex;align-items:flex-start;gap:.65rem;font-size:.83rem;color:var(--mist);line-height:1.55;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:10px;padding:.7rem .9rem} .chk-i svg{flex-shrink:0;margin-top:3px} /* ─── LEISTUNGS-KARTEN (verlinkt) ─── */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;margin-top:2rem} .svc{display:block;background:var(--navy3);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:1.6rem;text-decoration:none;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s;position:relative;overflow:hidden} .svc::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--aqua),transparent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)} .svc:hover{transform:translateY(-5px);border-color:rgba(0,197,212,.28);box-shadow:0 20px 45px rgba(0,0,0,.35)} .svc:hover::after{transform:scaleX(1)} .svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem} .svc-ico{width:44px;height:44px;border-radius:13px;background:rgba(0,197,212,.1);border:1px solid rgba(0,197,212,.2);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease)} .svc:hover .svc-ico{transform:rotate(-8deg) scale(1.08)} .svc-num{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;color:rgba(0,197,212,.14);line-height:1} .svc h3{font-family:'Playfair Display',serif;font-size:1.16rem;font-weight:700;color:var(--white);margin-bottom:.5rem} .svc p{font-size:.81rem;color:var(--fog);line-height:1.7;margin-bottom:1rem} .svc-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:1rem} .svc-tags span{font-size:.67rem;background:rgba(0,197,212,.07);border:1px solid rgba(0,197,212,.14);color:var(--aqua-mid);padding:.16rem .6rem;border-radius:5px} .svc-more{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:600;color:var(--aqua)} .svc-more svg{transition:transform .25s} .svc:hover .svc-more svg{transform:translateX(4px)} /* ─── TABELLE (Preisfaktoren / Leistungsumfang) ─── */ .tbl-wrap{overflow-x:auto;margin-top:1.5rem;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid rgba(255,255,255,.07)} table.rx{width:100%;border-collapse:collapse;min-width:520px;font-size:.83rem} table.rx caption{text-align:left;font-size:.72rem;color:var(--fog);padding:.9rem 1.1rem;background:rgba(255,255,255,.02)} table.rx th{text-align:left;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua);padding:.85rem 1.1rem;background:rgba(0,197,212,.06);border-bottom:1px solid rgba(0,197,212,.14)} table.rx td{padding:.85rem 1.1rem;color:var(--mist);border-bottom:1px solid rgba(255,255,255,.05);line-height:1.6;vertical-align:top} table.rx tr:last-child td{border-bottom:none} table.rx tbody tr:hover td{background:rgba(0,197,212,.03)} table.rx td:first-child{color:var(--white);font-weight:500;white-space:nowrap} /* ─── STADTTEIL-CHIPS ─── */ .dist{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem} .dist span{display:inline-flex;align-items:center;gap:6px;background:rgba(0,197,212,.07);border:1px solid rgba(0,197,212,.16);border-radius:50px;padding:.34rem .95rem;font-size:.77rem;color:var(--aqua-mid)} .dist span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--aqua);flex-shrink:0} /* ─── STADT-KARTEN ─── */ .city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-top:1.8rem} .city{display:block;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:1.4rem;text-decoration:none;transition:all .3s var(--ease)} .city:hover{border-color:rgba(0,197,212,.28);background:rgba(0,197,212,.04);transform:translateY(-3px)} .city-n{font-family:'Playfair Display',serif;font-size:1.12rem;font-weight:700;color:var(--white);margin-bottom:.35rem;display:flex;align-items:center;gap:.5rem} .city-d{font-size:.78rem;color:var(--fog);line-height:1.65} /* ─── CTA-BAND ─── */ .ctab{padding:3.6rem 5vw;background:linear-gradient(135deg,var(--navy3),var(--navy2));border-top:1px solid rgba(0,197,212,.12);border-bottom:1px solid rgba(0,197,212,.12);position:relative;overflow:hidden} .ctab::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(0,197,212,.07),transparent 62%);pointer-events:none} .ctab-in{max-width:1000px;margin:0 auto;position:relative;z-index:2;display:grid;grid-template-columns:1.3fr auto;gap:2.4rem;align-items:center} .ctab h2{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.2;margin-bottom:.6rem} .ctab h2 em{font-style:italic;color:var(--aqua)} .ctab p{font-size:.86rem;color:var(--fog);line-height:1.8;max-width:52ch} .ctab-btns{display:flex;flex-direction:column;gap:.65rem;min-width:230px} .ctab-btns .btn{justify-content:center} /* ─── WEITERE SEITEN / INTERNE LINKS ─── */ .rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem;margin-top:1.5rem} .rel a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:.85rem 1.1rem;font-size:.83rem;color:var(--mist);text-decoration:none;transition:all .25s} .rel a:hover{border-color:rgba(0,197,212,.28);color:var(--white);background:rgba(0,197,212,.04)} .rel a svg{flex-shrink:0;opacity:.6;transition:transform .25s,opacity .25s} .rel a:hover svg{transform:translateX(3px);opacity:1} /* ─── FAQ als Buttons (A11y) ─── */ .faq-q{width:100%;background:none;border:none;font-family:inherit;text-align:left;color:inherit;cursor:pointer} .faq-list-plain .faq-item{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.07);border-radius:14px;margin-bottom:.6rem;overflow:hidden} /* ─── MOBILE ACTION BAR ─── */ .mab{display:none;position:fixed;bottom:0;left:0;right:0;z-index:402;background:rgba(8,18,30,.97);backdrop-filter:blur(18px);border-top:1px solid rgba(0,197,212,.18);padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr 1.2fr;gap:.45rem} .mab a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border-radius:12px;font-size:.7rem;font-weight:600;text-decoration:none;letter-spacing:.01em} .mab .m-call{background:rgba(0,197,212,.1);border:1px solid rgba(0,197,212,.25);color:var(--aqua)} .mab .m-wa{background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3);color:#4ade80} .mab .m-cta{background:var(--aqua);color:var(--navy)} .mab svg{display:block} /* ─── Footer: Kontrast korrigiert + erweiterte Spalten ─── */ .ft-copy{color:var(--fog)!important} .ft-leg a{color:var(--fog)!important} .ft-leg a:hover{color:var(--aqua)!important} .ft-top{gap:2rem} .ft-nap{font-size:.76rem;color:var(--fog);line-height:1.85;margin-top:1rem} .ft-nap a{color:var(--mist);text-decoration:none} .ft-nap a:hover{color:var(--aqua)} .ft-cities{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.05)} .ft-cities a,.ft-cities span{font-size:.7rem;color:var(--fog);text-decoration:none;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:.18rem .6rem;border-radius:5px} .ft-cities a:hover{color:var(--aqua);border-color:rgba(0,197,212,.25)} /* ─── Bilder immer fluid ─── */ img{max-width:100%;height:auto} /* ══════════════ RESPONSIVE ══════════════ */ @media(max-width:980px){ .ph-in{grid-template-columns:1fr;gap:2rem} .cs-2col{grid-template-columns:1fr;gap:1.6rem} .ctab-in{grid-template-columns:1fr;gap:1.6rem} .ctab-btns{min-width:0} } @media(max-width:900px){ .bc{padding:4.8rem 4vw 0} .ph{padding:1.6rem 4vw 2.6rem} .cs{padding:3rem 4vw} .ctab{padding:2.8rem 4vw} /* Mobile Action Bar an, Floating-Buttons aus */ .mab{display:grid} .wa-btn{display:none} body{padding-bottom:64px} } @media(max-width:600px){ .ph h1{font-size:clamp(1.75rem,7.5vw,2.4rem)} .ph-lead{font-size:.9rem} .ph-btns{flex-direction:column;align-items:stretch} .ph-btns .btn{justify-content:center;min-height:46px} .answer{padding:1.2rem 1.1rem;border-radius:0 12px 12px 0} .answer p{font-size:.87rem} .cs h2{font-size:clamp(1.35rem,6vw,1.8rem)} .chk{grid-template-columns:1fr} .svc-grid{grid-template-columns:1fr} .city-grid{grid-template-columns:1fr} .rel{grid-template-columns:1fr} .facts{padding:1.2rem} .bc ol{font-size:.68rem} table.rx{font-size:.78rem;min-width:440px} table.rx th,table.rx td{padding:.7rem .8rem} } /* Reduzierte Bewegung respektieren */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ══════════════ KORREKTUREN ══════════════ */ /* FAQ-Karten: Innenabstand + genug Platz für lange Antworten */ .faq-list-plain .faq-q{padding:1.05rem 1.2rem;font-size:.9rem;min-height:54px;width:100%} .faq-list-plain .faq-a{padding:0 1.2rem;max-width:none} .faq-list-plain .faq-item.open .faq-a{max-height:900px;padding:0 1.2rem 1.15rem} .faq-list-plain .faq-item.open{border-color:rgba(0,197,212,.25);background:rgba(0,197,212,.03)} .faq-list .faq-item.open .faq-a{max-height:900px} /* Hero-Bild: sichtbar ab Tablet-Breite, darunter Farbverlauf + große Blasen */ .hero-scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(to right,rgba(8,18,30,.95) 0%,rgba(8,18,30,.78) 55%,rgba(8,18,30,.58) 100%)} @media(max-width:900px){ /* einspaltiges Layout: Abdunklung von oben nach unten statt seitlich, sonst steht der Text auf dem hellen Teil des Fotos */ .hero-scrim{background:linear-gradient(to bottom,rgba(8,18,30,.82) 0%,rgba(8,18,30,.90) 45%,rgba(8,18,30,.95) 100%)} .hero-bg{background:transparent!important} #dropCanvas{opacity:0!important} } @media(max-width:699px){ /* unter 700 px: kein Foto, stattdessen Farbverlauf und große Blasen */ .hero-bg picture,.hero-bg img{display:none!important} .hero-bg{background:linear-gradient(160deg,#0c1c30 0%,#08121E 50%,#0a1828 100%)!important} .hero-scrim{background:none} #dropCanvas{opacity:1!important} } /* iOS zoomt bei Feldern unter 16px – das verhindern wir */ @media(max-width:820px){ .fi,.fta,.fsel{font-size:16px!important;padding:.8rem .9rem!important} .fsub{min-height:50px;font-size:.95rem} .btn{min-height:46px} .ki{min-height:52px} .nav-logo img{height:32px!important} } /* Tabellen bekommen auf Mobil einen Scroll-Hinweis */ @media(max-width:700px){ .tbl-wrap{position:relative} .tbl-wrap::after{content:"→ seitlich scrollbar";display:block;font-size:.66rem;color:var(--fog);padding:.5rem 1.1rem;background:rgba(255,255,255,.02);text-align:right} } /* Kontaktseite: zweispaltiges Layout auch außerhalb der alten Sektion */ .cs .kont-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:start;margin-top:2rem} @media(max-width:980px){.cs .kont-layout{grid-template-columns:1fr;gap:2rem}} /* Textblöcke im Content nicht künstlich beschneiden */ .cs .answer p,.cs .chk-i span{max-width:none} /* Dropdown auch per Klick/Tastatur (Touch-Geräte ohne Hover) */ .nav-links li.has-sub.open .subnav{opacity:1;visibility:visible;transform:translateY(0)} .nav-links li.has-sub.open .sub-toggle{color:var(--white)} .nav-links li.has-sub.open .sub-toggle svg{transform:rotate(180deg)} /* Feste Kopfleiste: auf Unterseiten immer mit Hintergrund, damit Brotkrumen und Inhalt nicht durchscheinend darunter durchlaufen */ #nav.solid{background:rgba(8,18,30,.94)} #nav.scrolled{box-shadow:0 1px 0 rgba(0,197,212,.14),0 8px 28px rgba(0,0,0,.35)} /* Kopfleiste: auf Unterseiten vollständig deckend, damit beim Scrollen kein Inhalt durchschimmert */ #nav.solid{background:#0a1524;backdrop-filter:none} #nav.solid.scrolled{background:#0a1524} /* Seitenkopf hält Abstand zur festen Leiste */ .ph{padding-top:6.4rem} @media(max-width:900px){.ph{padding-top:5.6rem}} /* Aktiver Menüpunkt */ .nav-links a.current,.nav-links .sub-toggle.current{color:var(--aqua)} .nav-links a.current:not(.nav-cta){position:relative} .nav-links a.current:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--aqua);border-radius:2px} .subnav a.current{background:rgba(0,197,212,.1);color:var(--white)} /* Anruf-Chip im Ablauf-Schritt */ .prz-chip-call{display:inline-flex;align-items:center;gap:5px;background:rgba(0,197,212,.1)!important; border-color:rgba(0,197,212,.28)!important;color:var(--aqua)!important;text-decoration:none; font-weight:600;letter-spacing:.01em;transition:background .2s,border-color .2s} .prz-chip-call:hover{background:rgba(0,197,212,.18)!important;border-color:var(--aqua)!important} @media(max-width:900px){.prz-chip-call{min-height:34px;padding:.35rem .9rem;font-size:.76rem}} /* Links in der Fakten-Karte */ .facts dd a{color:var(--aqua);text-decoration:none;border-bottom:1px solid rgba(0,197,212,.3)} .facts dd a:hover{border-color:var(--aqua)} /* Sicherheitsnetz: falls iOS trotzdem etwas selbst verlinkt, erbt es unsere Farben statt Safari-Blau */ a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important; font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important; line-height:inherit!important} /* ─── COOKIE-BANNER ─── */ .ck-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:9999; background:rgba(8,18,30,.98);backdrop-filter:blur(20px); border-top:1px solid rgba(0,197,212,.2);box-shadow:0 -8px 32px rgba(0,0,0,.45); padding:1.4rem 5vw calc(1.4rem + env(safe-area-inset-bottom))} .ck-in{max-width:1100px;margin:0 auto;display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap} .ck-txt{flex:1;min-width:260px} .ck-h{font-size:.84rem;font-weight:600;color:var(--white);margin-bottom:.4rem} .ck-p{font-size:.78rem;color:var(--mist);line-height:1.6;margin:0} .ck-p a{color:var(--aqua);text-decoration:none;margin-left:.25rem} .ck-btns{display:flex;gap:.6rem;flex-shrink:0;flex-wrap:wrap;align-items:center} .ck-b{padding:.6rem 1rem;min-height:42px;font-size:.76rem;font-weight:600;border-radius:50px; cursor:pointer;white-space:nowrap;font-family:inherit;background:transparent;transition:all .2s} .ck-ghost{border:1px solid rgba(255,255,255,.2);color:var(--mist)} .ck-ghost:hover{border-color:rgba(255,255,255,.35);color:var(--white)} .ck-line{border:1px solid rgba(255,255,255,.3);color:var(--white)} .ck-line:hover{border-color:var(--aqua)} .ck-solid{border:none;background:linear-gradient(135deg,#0a7fa8,var(--aqua));color:#fff;padding:.6rem 1.2rem} .ck-solid:hover{filter:brightness(1.1)} /* Solange der Banner offen ist, bleibt die Schnellkontakt-Leiste weg – sie läge sonst unsichtbar darunter */ body.ck-open .mab{display:none!important} @media(max-width:900px){ .ck-banner{padding:1.2rem 4vw calc(1.2rem + env(safe-area-inset-bottom))} .ck-btns{width:100%} .ck-b{flex:1;min-width:104px;text-align:center} .stt{bottom:calc(72px + env(safe-area-inset-bottom));right:12px} } /* ─── VERTRAUENS-BAND: Qualifikation & Mitgliedschaften ─── */ .trust{padding:3.6rem 5vw;background:var(--navy2);border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05)} .trust-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center} .trust-txt h2{font-family:'Playfair Display',serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;line-height:1.2;margin-bottom:.8rem} .trust-txt h2 em{font-style:italic;color:var(--aqua)} .trust-txt p{font-size:.86rem;color:var(--fog);line-height:1.85;max-width:60ch} .trust-txt p strong{color:var(--mist);font-weight:600} .trust-logos{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .trust-logo{background:#fff;border-radius:14px;padding:1.3rem 1.4rem;display:flex;align-items:center;justify-content:center;min-height:104px;box-shadow:0 10px 30px rgba(0,0,0,.28);transition:transform .3s var(--ease)} .trust-logo:hover{transform:translateY(-3px)} .trust-logo img{width:100%;height:auto;max-height:58px;object-fit:contain;display:block} @media(max-width:980px){ .trust-in{grid-template-columns:1fr;gap:2rem} .trust{padding:2.8rem 4vw} } @media(max-width:560px){ .trust-logos{grid-template-columns:1fr;gap:.8rem} .trust-logo{min-height:88px;padding:1.1rem 1.2rem} .trust-logo img{max-height:48px} } /* Vertrauens-Band direkt unter dem Header: kompakter */ .trust-top{padding-top:2.6rem;padding-bottom:2.6rem;background:var(--navy3)} .trust-top .trust-txt p{font-size:.84rem} @media(max-width:980px){.trust-top{padding-top:2.2rem;padding-bottom:2.2rem}} /* ─── QUALIFIKATIONS-PLAKETTE ─── */ .qual{display:flex;align-items:center;gap:1rem;margin:1.4rem 0 1.3rem;padding:1.05rem 1.3rem; background:linear-gradient(135deg,rgba(0,197,212,.14),rgba(0,197,212,.04)); border:1px solid rgba(0,197,212,.34);border-radius:16px; box-shadow:0 0 0 1px rgba(0,197,212,.06),0 12px 34px rgba(0,197,212,.10); max-width:min(100%,540px)} .qual-ic{flex-shrink:0;width:46px;height:46px;border-radius:50%; background:var(--aqua);color:var(--navy);display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 5px rgba(0,197,212,.13)} .qual-body{display:flex;flex-direction:column;gap:3px;min-width:0} .qual-t{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.04rem;font-weight:600; color:var(--white);letter-spacing:-.01em;line-height:1.25} .qual-s{font-size:.76rem;color:var(--aqua-mid);line-height:1.45} @media(max-width:560px){ .qual{gap:.8rem;padding:.95rem 1rem;border-radius:14px} .qual-ic{width:40px;height:40px;box-shadow:0 0 0 4px rgba(0,197,212,.13)} .qual-ic svg{width:22px;height:22px} .qual-t{font-size:.95rem} .qual-s{font-size:.72rem} } /* ─── FOOTER: aufgeräumte Fußzeile ─── */ .ft-area{font-size:.74rem;color:var(--fog);line-height:1.7;margin-top:1rem;max-width:46ch} .ft-bot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-top:0;margin-top:0;border-top:none} .ft-leg{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap} .ft-leg a,.ft-ck{font-size:.76rem;color:var(--fog);text-decoration:none;background:none; border:none;padding:0;font-family:inherit;cursor:pointer;transition:color .2s} .ft-leg a:hover,.ft-ck:hover{color:var(--aqua)} .ft-copy{font-size:.76rem} @media(max-width:700px){ .ft-bot{flex-direction:column;align-items:flex-start;gap:.9rem} .ft-leg{gap:1.1rem} } /* Schwebende Schaltflächen weichen dem Footer */ body.footer-visible .wa-btn, body.footer-visible .stt{opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none} .wa-btn,.stt{transition:opacity .3s var(--ease),visibility .3s,transform .3s var(--ease)} /* Die Schnellkontakt-Leiste auf Mobil bleibt – sie überdeckt nichts, weil der Body unten Platz lässt */ @media(max-width:900px){ footer{padding-bottom:1.5rem} } /* Nur die Hauptnavigation ist fixiert. Brotkrumen und Fußzeilen-Navigation sind gewöhnliche