/* =========================================================
   Riedl&Gruber – Rohrreinigung & Leckortung
   Shared stylesheet – "Klar. Schnell. Sauber gelöst." design system
   ========================================================= */

:root{
  --navy-deep:#04162B;
  --navy:#0A2C50;
  --navy-700:#123A66;
  --blue:#0E87CE;
  --blue-600:#0B6FAC;
  --cyan:#3FC1E9;
  --cyan-soft:#E6F6FC;
  --ink:#152232;
  --muted:#5B6B80;
  --muted-soft:#8B98A8;
  --bg:#FFFFFF;
  --bg-soft:#F3F8FC;
  --bg-soft-2:#EAF3FA;
  --border:#E1E8F0;
  --border-soft:#EEF3F8;
  --amber:#F59E0B;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(10,32,60,0.06), 0 1px 1px rgba(10,32,60,0.04);
  --shadow-md:0 8px 24px rgba(10,32,60,0.09), 0 2px 6px rgba(10,32,60,0.06);
  --shadow-lg:0 20px 60px rgba(10,32,60,0.14), 0 6px 16px rgba(10,32,60,0.08);
  --container:1180px;
  --font-head:'Manrope', Arial, Helvetica, sans-serif;
  --font-body:'Inter', Arial, Helvetica, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:110px;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:var(--font-head); color:var(--navy); margin:0 0 .5em; line-height:1.18; font-weight:800;}
p{margin:0 0 1em;}
.container{max-width:var(--container); margin:0 auto; padding:0 24px;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

/* ---------- Utility bar ---------- */
.utility-bar{
  background:var(--navy-deep); color:#C7D6E6; font-size:13px;
  padding:7px 0;
}
.utility-bar .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px;}
.utility-bar a{color:#EAF3FA; font-weight:600;}
.utility-bar .dot{color:var(--cyan); margin:0 8px;}
.utility-bar .badge-live{
  display:inline-flex; align-items:center; gap:6px; color:#8FE3B8; font-weight:600;
}
.utility-bar .badge-live::before{
  content:''; width:7px; height:7px; border-radius:50%; background:#3ED07C;
  box-shadow:0 0 0 3px rgba(62,208,124,.25);
}

/* ---------- Header / Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:20px;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:46px; width:auto;}
.brand .brand-text{line-height:1.2;}
.brand .brand-text .name{font-family:var(--font-head); font-weight:800; font-size:18px; color:var(--navy);}
.brand .brand-text .tag{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--blue);}

nav.main-nav{display:flex; align-items:center; gap:24px;}
nav.main-nav a{
  font-size:14.5px; font-weight:600; color:var(--ink); position:relative; padding:6px 0;
  white-space:nowrap; flex-shrink:0;
}
nav.main-nav a:hover{color:var(--blue);}
nav.main-nav a.current{color:var(--blue);}

/* ---------- Leistungen Dropdown ---------- */
nav.main-nav .has-dropdown{position:relative;}
nav.main-nav .dropdown-toggle{
  display:inline-flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--ink); padding:6px 0;
}
nav.main-nav .dropdown-toggle:hover{color:var(--blue);}
nav.main-nav .dropdown-toggle svg{width:13px; height:13px; flex-shrink:0; transition:transform .2s ease;}
nav.main-nav .has-dropdown.open .dropdown-toggle svg,
nav.main-nav .has-dropdown:hover .dropdown-toggle svg{transform:rotate(180deg);}
nav.main-nav .has-dropdown.open .dropdown-toggle,
nav.main-nav .has-dropdown:hover .dropdown-toggle{color:var(--blue);}

nav.main-nav .dropdown-menu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  width:308px; background:var(--glass-bg);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-glow); padding:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:120;
}
nav.main-nav .has-dropdown:hover .dropdown-menu,
nav.main-nav .has-dropdown.open .dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
nav.main-nav .dropdown-menu a{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--navy);
}
nav.main-nav .dropdown-menu a:hover, nav.main-nav .dropdown-menu a.current{
  background:var(--cyan-soft); color:var(--blue-600);
}
nav.main-nav .dropdown-menu a .ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
}
nav.main-nav .dropdown-menu a .ic svg{width:17px; height:17px; stroke:#fff; fill:none;}
nav.main-nav .dropdown-menu a small{display:block; font-weight:500; color:var(--muted); font-size:11.5px; margin-top:2px;}

/* ---------- Angebot-Karte (ersetzt öffentliche Preisliste) ---------- */
.quote-card{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  background:var(--glass-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--glass-border); border-radius:var(--radius-lg);
  padding:32px 36px; box-shadow:var(--shadow-glow);
}
.quote-card .quote-text{display:flex; gap:20px; align-items:flex-start; flex:1; min-width:260px;}
.quote-card .q-icon{
  width:54px; height:54px; border-radius:16px; flex-shrink:0;
  background:var(--holo-gradient); background-size:200% 100%; animation:holoShift 9s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center;
}
.quote-card .q-icon svg{width:26px; height:26px; stroke:#fff; fill:none;}
.quote-card h3{font-size:19px; margin-bottom:6px;}
.quote-card p{margin:0; color:var(--muted); font-size:14.5px; max-width:480px;}
.quote-card .btn{flex-shrink:0;}
@media (prefers-reduced-motion: reduce){
  .quote-card .q-icon{animation:none !important;}
}

a.mini-service{transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;}
a.mini-service:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#CCEBF7;}

.header-cta{display:flex; align-items:center; gap:10px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:14.5px;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:linear-gradient(100deg, var(--blue), var(--blue-600)); color:#fff; box-shadow:var(--shadow-md);}
.btn-primary:hover{box-shadow:0 12px 28px rgba(14,135,206,.35);}
.btn-outline{background:#fff; color:var(--navy); border-color:var(--border); box-shadow:var(--shadow-sm);}
.btn-outline:hover{border-color:var(--blue); color:var(--blue);}
.btn-ghost-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35);}
.btn-ghost-light:hover{background:rgba(255,255,255,.2);}
.btn-lg{padding:16px 30px; font-size:16px;}
.btn-block{width:100%;}
.btn svg{width:18px; height:18px; flex-shrink:0;}

.burger{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.burger svg{width:26px; height:26px; color:var(--navy);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(680px 420px at 88% -10%, var(--bg-soft-2), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg-soft) 100%);
  padding:64px 0 76px;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--blue-600);
  background:var(--cyan-soft); border:1px solid #CCEBF7;
  border-radius:999px; padding:7px 16px; margin-bottom:18px;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:#3ED07C; box-shadow:0 0 0 3px rgba(62,208,124,.22);}
.hero h1{font-size:44px; letter-spacing:-.01em;}
.hero h1 .accent{color:var(--blue);}
.hero p.lead{font-size:17.5px; color:var(--muted); max-width:520px;}
.hero-ctas{display:flex; gap:14px; margin:26px 0 30px; flex-wrap:wrap;}
.trust-chips{display:flex; flex-wrap:wrap; gap:10px 22px;}
.trust-chips li{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--navy);}
.trust-chips svg{width:18px; height:18px; color:var(--blue); flex-shrink:0;}

.hero-visual{position:relative;}
.hero-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:28px; position:relative; z-index:2;
}
.hero-card .diagram{width:100%; height:auto;}
.floating-pill{
  position:absolute; z-index:3; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:14px 18px;
  display:flex; align-items:center; gap:12px; font-size:13.5px; font-weight:700; color:var(--navy);
}
.floating-pill svg{width:22px; height:22px; color:var(--blue);}
.floating-pill.p1{ top:-18px; left:-24px;}
.floating-pill.p2{ bottom:-16px; right:-18px;}
.hero-visual::before{
  content:''; position:absolute; inset:-40px -20px auto auto; width:320px; height:320px;
  background:radial-gradient(circle, rgba(14,135,206,.14), transparent 70%);
  z-index:1;
}

/* ---------- Sections generic ---------- */
section{padding:76px 0;}
section.tight{padding:52px 0;}
.section-head{max-width:680px; margin:0 0 44px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:32px; letter-spacing:-.01em;}
.section-head p{color:var(--muted); font-size:16px;}
.bg-soft{background:var(--bg-soft);}
.bg-navy{background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color:#EAF1F8;}
.bg-navy h2, .bg-navy h3{color:#fff;}
.bg-navy .section-head p{color:#AFC2D6;}

/* ---------- Clog types grid ---------- */
.clog-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;}
.clog-card{
  min-width:0; overflow-wrap:break-word;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px 20px; transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.clog-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#CCEBF7;}
.clog-card .icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
}
.clog-card .icon svg{width:22px; height:22px; stroke:#fff; fill:none;}
.clog-card h3{font-size:15.5px; margin-bottom:6px;}
.clog-card p{font-size:13.5px; color:var(--muted); margin-bottom:0;}
.clog-card a.more{font-size:13px; font-weight:700; color:var(--blue); display:inline-block; margin-top:10px;}

/* ---------- Service split (Rohrreinigung focus / Leckortung secondary) ---------- */
.service-hero{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:40px; box-shadow:var(--shadow-md);
}
.service-hero.reverse{grid-template-columns:1fr 1fr;}
.service-kicker{font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);}
.service-hero h3{font-size:26px; margin-top:6px;}
.method-list{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
.method-list li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink);}
.method-list svg{width:20px; height:20px; color:#3ED07C; flex-shrink:0; margin-top:2px;}
.service-figure{
  background:var(--bg-soft); border-radius:var(--radius-md); padding:24px;
  display:flex; align-items:center; justify-content:center;
  min-height:220px;
}
.service-figure svg{width:100%; height:auto; aspect-ratio:300/220; display:block;}

/* secondary services strip */
.mini-services{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:16px;}
.mini-service{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start; background:#fff;
}
.mini-service .icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--bg-soft-2); display:flex; align-items:center; justify-content:center;
}
.mini-service .icon svg{width:20px; height:20px; color:var(--blue); fill:none; stroke:currentColor;}
.mini-service h4{font-size:15px; margin-bottom:4px; color:var(--navy); font-family:var(--font-head); font-weight:700;}
.mini-service p{font-size:13px; color:var(--muted); margin:0;}

/* ---------- Process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;}
.step{position:relative; padding-top:8px;}
.step .num{
  font-family:var(--font-head); font-weight:800; font-size:15px; color:#fff;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--cyan), var(--blue)); margin-bottom:16px;
}
.step h4{font-size:16px; margin-bottom:6px;}
.step p{font-size:13.5px; color:var(--muted); margin:0;}
.step:not(:last-child)::after{
  content:''; position:absolute; top:19px; left:56px; right:-20px; height:2px;
  background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
}

/* ---------- Pricing / coverage ---------- */
.price-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start;}
table.price-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
table.price-table th{
  background:var(--navy); color:#fff; text-align:left; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:14px 18px; font-family:var(--font-head);
}
table.price-table td{padding:15px 18px; font-size:14.5px; border-top:1px solid var(--border-soft);}
table.price-table td.val{text-align:right; font-weight:700; color:var(--navy); white-space:nowrap;}
table.price-table tr:nth-child(even) td{background:var(--bg-soft);}
.price-note{font-size:12.5px; color:var(--muted-soft); margin-top:12px;}

.coverage-card{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px;}
.coverage-tier{margin-bottom:20px;}
.coverage-tier:last-child{margin-bottom:0;}
.coverage-tier .tier-label{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.coverage-tier .tier-label b{font-family:var(--font-head); font-size:14.5px; color:var(--navy);}
.coverage-tier .tier-label span{font-size:13px; font-weight:700; color:var(--blue);}
.place-chips{display:flex; flex-wrap:wrap; gap:7px;}
.place-chips span{
  font-size:12.5px; font-weight:600; color:var(--navy); background:#fff; border:1px solid var(--border);
  border-radius:999px; padding:5px 12px;
}
.jump-chip{
  font-size:13px; font-weight:700; color:var(--blue-600); background:var(--cyan-soft); border:1px solid #CCEBF7;
  border-radius:999px; padding:8px 16px; transition:background .15s ease, color .15s ease;
}
.jump-chip:hover{background:var(--blue); color:#fff; border-color:var(--blue);}

/* ---------- Trust / seriousness ---------- */
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.trust-item{text-align:left;}
.trust-item .icon{
  width:50px; height:50px; border-radius:14px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.trust-item .icon svg{width:24px; height:24px; color:var(--cyan);}
.trust-item h4{font-family:var(--font-head); font-weight:700; font-size:16px; color:#fff; margin-bottom:6px;}
.trust-item p{font-size:13.5px; color:#AFC2D6; margin:0;}

/* ---------- FAQ ---------- */
.faq-list{display:flex; flex-direction:column; gap:12px; max-width:820px;}
details.faq-item{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:4px 22px;
}
details.faq-item summary{
  cursor:pointer; padding:16px 0; font-family:var(--font-head); font-weight:700; font-size:15.5px; color:var(--navy);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{
  content:'+'; font-size:22px; color:var(--blue); flex-shrink:0; transition:transform .15s ease; font-weight:400;
}
details.faq-item[open] summary::after{transform:rotate(45deg);}
details.faq-item p{font-size:14.5px; color:var(--muted); padding-bottom:18px; margin:0;}

/* ---------- Coverage map chips (Einsatzgebiet homepage) ---------- */
.area-chips{display:flex; flex-wrap:wrap; gap:9px;}
.area-chips span{
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--border); color:var(--navy);
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(110deg, var(--navy) 0%, var(--blue-600) 120%);
  border-radius:var(--radius-lg); padding:48px 52px; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-banner h3{color:#fff; font-size:26px; margin-bottom:8px;}
.cta-banner p{color:#DCEBF7; margin:0; font-size:15px;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--navy-deep); color:#B9C9DA; padding:56px 0 24px; font-size:13.5px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.footer-brand img{height:34px;}
.footer-brand span{font-family:var(--font-head); font-weight:800; color:#fff; font-size:16px;}
footer.site-footer h5{color:#fff; font-family:var(--font-head); font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;}
footer.site-footer ul li{margin-bottom:10px;}
footer.site-footer a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:20px; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#7E92A8;}
.footer-bottom a{color:#9FB2C6;}
.footer-bottom a:hover{color:#fff;}

/* ---------- Sticky mobile call bar ---------- */
.mobile-call-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:#fff; border-top:1px solid var(--border); box-shadow:0 -8px 24px rgba(10,32,60,.12);
  padding:10px 16px; gap:10px;
}

/* ---------- Page header (subpages) ---------- */
.page-hero{
  background:linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  padding:44px 0 20px;
}
.breadcrumb{font-size:13px; color:var(--muted-soft); margin-bottom:14px;}
.breadcrumb a{color:var(--blue); font-weight:600;}
.page-hero h1{font-size:36px; max-width:760px;}
.page-hero p.lead{color:var(--muted); font-size:16.5px; max-width:680px;}

/* Anchor offset target styling */
.anchor-target{scroll-margin-top:110px;}

/* Clog detail blocks (rohrreinigung.html) */
.detail-block{
  display:grid; grid-template-columns:64px 1fr; gap:20px; padding:30px 0; border-bottom:1px solid var(--border-soft);
}
.detail-block:last-child{border-bottom:none;}
.detail-block .icon{
  width:56px; height:56px; border-radius:16px; background:linear-gradient(135deg, var(--cyan), var(--blue));
  display:flex; align-items:center; justify-content:center;
}
.detail-block .icon svg{width:28px; height:28px; stroke:#fff; fill:none;}
.detail-block h3{font-size:19px; margin-bottom:8px;}
.detail-block p{color:var(--muted); font-size:14.5px; margin-bottom:8px;}
.detail-block .signs{font-size:13.5px; color:var(--navy); background:var(--bg-soft); border-radius:10px; padding:10px 14px; display:inline-block;}
.detail-block .signs b{color:var(--blue-600);}

/* legal pages */
.legal-content{max-width:820px; padding:50px 0 90px; font-size:15px; color:var(--ink);}
.legal-content h1{font-size:30px; margin-bottom:8px;}
.legal-content h2{font-size:19px; margin-top:34px;}
.legal-content p, .legal-content li{color:var(--muted); font-size:14.5px;}
.legal-content ul{padding-left:20px; list-style:disc;}
.legal-content a{color:var(--blue); font-weight:600;}
.legal-content .updated{color:var(--muted-soft); font-size:13px; margin-bottom:30px;}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; max-width:420px; margin:0 auto 20px;}
  .clog-grid{grid-template-columns:repeat(2,1fr);}
  .service-hero, .service-hero.reverse{grid-template-columns:1fr; padding:28px;}
  .price-wrap{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); row-gap:32px;}
  .step:not(:last-child)::after{display:none;}
  .footer-grid{grid-template-columns:1fr 1fr; row-gap:30px;}
  .mini-services{grid-template-columns:1fr 1fr;}
}
@media (max-width: 720px){
  nav.main-nav{display:none;}
  .burger{display:block;}
  .header-cta{display:none;}
  .hero h1{font-size:32px;}
  .clog-grid{grid-template-columns:1fr 1fr;}
  .trust-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cta-banner{flex-direction:column; text-align:center; padding:36px 26px;}
  .mobile-call-bar{display:flex;}
  body{padding-bottom:88px;}
  .mini-services{grid-template-columns:1fr;}
  .utility-bar .container{justify-content:center; text-align:center;}

  nav.main-nav .has-dropdown{width:100%;}
  nav.main-nav .dropdown-toggle{width:100%; justify-content:space-between; padding:10px 0;}
  nav.main-nav .dropdown-menu{
    position:static; transform:none; width:auto; max-width:none;
    opacity:1; visibility:hidden; pointer-events:none; max-height:0; overflow:hidden;
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
    border:none; box-shadow:none; padding:0;
    transition:max-height .25s ease;
  }
  nav.main-nav .has-dropdown.open .dropdown-menu{
    visibility:visible; pointer-events:auto; max-height:480px; padding:2px 0 10px 6px; transform:none;
  }
  .quote-card{flex-direction:column; text-align:center; padding:28px 24px;}
  .quote-card .quote-text{flex-direction:column; align-items:center; text-align:center;}
}

/* =========================================================
   Verstopfungs-Assistent (Chat-Widget)
   ========================================================= */
.assistant-fab{
  position:fixed; right:24px; bottom:24px; z-index:250;
  height:56px; padding:0 20px 0 16px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--cyan), var(--blue)); color:#fff;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-head); font-weight:700; font-size:14px; white-space:nowrap;
  box-shadow:var(--shadow-lg); transition:transform .15s ease, box-shadow .15s ease;
}
.assistant-fab:hover{transform:translateY(-2px); box-shadow:0 24px 48px rgba(10,32,60,.22);}
.assistant-fab svg{width:22px; height:22px; flex-shrink:0;}
.assistant-fab[hidden]{display:none;}

.assistant-panel{
  position:fixed; right:24px; bottom:24px; z-index:250;
  width:380px; max-width:calc(100vw - 32px); height:min(600px, 76vh);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;
}
.assistant-panel[hidden]{display:none;}

.assistant-header{
  background:linear-gradient(110deg, var(--navy) 0%, var(--blue-600) 120%); color:#fff;
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0;
}
.assistant-header .title{font-family:var(--font-head); font-weight:800; font-size:15px;}
.assistant-header .subtitle{font-size:11.5px; color:#CFE4F4; margin-top:2px; font-weight:600;}
.assistant-close{
  background:rgba(255,255,255,.15); border:none; color:#fff; width:30px; height:30px; border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.assistant-close svg{width:15px; height:15px;}

.assistant-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--bg-soft);}
.assistant-msg{max-width:88%; padding:11px 15px; border-radius:14px; font-size:13.5px; line-height:1.5;}
.assistant-msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--border); color:var(--ink); border-bottom-left-radius:4px;}
.assistant-msg.user{align-self:flex-end; background:var(--blue); color:#fff; font-weight:600; border-bottom-right-radius:4px;}

.assistant-choices{display:flex; flex-wrap:wrap; gap:8px; padding:2px 2px 4px;}
.assistant-choice{
  font-family:var(--font-body); font-size:13px; font-weight:700; color:var(--blue-600);
  background:var(--cyan-soft); border:1px solid #CCEBF7; border-radius:999px; padding:9px 15px;
  cursor:pointer; transition:background .15s ease, color .15s ease, opacity .15s ease;
  text-decoration:none; display:inline-block;
}
.assistant-choice:hover{background:var(--blue); color:#fff; border-color:var(--blue);}
.assistant-choice.cta-call{background:var(--blue); color:#fff; border-color:var(--blue);}
.assistant-choice.cta-call:hover{background:var(--blue-600);}
.assistant-choice[disabled], .assistant-choice.is-disabled{pointer-events:none; opacity:.5;}

.assistant-typing{align-self:flex-start; display:flex; gap:4px; padding:12px 15px; background:#fff; border:1px solid var(--border); border-radius:14px; border-bottom-left-radius:4px;}
.assistant-typing span{width:6px; height:6px; border-radius:50%; background:var(--muted-soft); animation:assistantTyping 1.1s infinite ease-in-out;}
.assistant-typing span:nth-child(2){animation-delay:.15s;}
.assistant-typing span:nth-child(3){animation-delay:.3s;}
@keyframes assistantTyping{0%,60%,100%{opacity:.3; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}

.assistant-disclaimer{font-size:11px; color:var(--muted-soft); padding:8px 18px; border-top:1px solid var(--border); flex-shrink:0; background:#fff;}

@media (max-width: 720px){
  .assistant-fab{right:16px; bottom:100px; height:52px; padding:0 16px;}
  .assistant-fab .fab-label{display:none;}
  .assistant-panel{right:12px; left:12px; bottom:100px; width:auto; max-width:none; height:min(64vh, 520px);}
}

/* =========================================================
   "Tech-Glow" Premium-Akzente
   Dezente holografische Farbverläufe & Glas-Effekte für
   einen hochwertigen, seriösen Konzern-Look
   ========================================================= */
:root{
  --holo-1:#0E87CE;
  --holo-2:#6C5CE7;
  --holo-3:#3FC1E9;
  --holo-4:#22C7A9;
  --holo-gradient:linear-gradient(115deg, var(--holo-1) 0%, var(--holo-2) 33%, var(--holo-3) 66%, var(--holo-4) 100%);
  --glass-bg:rgba(255,255,255,.66);
  --glass-border:rgba(255,255,255,.6);
  --shadow-glow:0 0 0 1px rgba(14,135,206,.07), 0 20px 50px rgba(76,97,214,.16), 0 6px 18px rgba(63,193,233,.10);
}

@keyframes holoShift{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes liveDotPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(62,208,124,.25);}
  50%{box-shadow:0 0 0 7px rgba(62,208,124,.10);}
}

/* Animierte holografische Linie am oberen Seitenrand – auf jeder Seite */
header.site-header{position:relative;}
header.site-header::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--holo-gradient); background-size:200% 100%;
  animation:holoShift 9s ease-in-out infinite;
}

/* "Live"-Punkt: sanftes Pulsieren statt starrem Ring */
.utility-bar .badge-live::before{
  animation:liveDotPulse 2.6s ease-in-out infinite;
}

/* Hero-Akzentwort: holografischer Farbverlauf im Text, mit Fallback-Farbe */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hero h1 .accent{
    background:var(--holo-gradient); background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:holoShift 9s ease-in-out infinite;
  }
}

/* Hero-Visual: reichhaltigerer Glow + Glaskarte */
.hero-visual::before{
  background:radial-gradient(circle, rgba(108,92,231,.17), rgba(14,135,206,.15) 45%, transparent 72%);
}
.hero-visual::after{
  content:''; position:absolute; inset:auto -10px -34px auto; width:220px; height:220px;
  background:radial-gradient(circle, rgba(34,199,169,.16), transparent 70%);
  z-index:1;
}
.hero-card{
  background:var(--glass-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-glow);
}

/* Primär-Buttons: Lichtschimmer beim Hover */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::after{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  transition:left .6s ease;
  pointer-events:none;
}
.btn-primary:hover::after{left:135%;}

/* Trust-Sektion: dezenter Aurora-Mesh-Glow auf dunklem Hintergrund */
.bg-navy{position:relative; overflow:hidden;}
.bg-navy::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(560px 380px at 12% 15%, rgba(14,135,206,.20), transparent 60%),
    radial-gradient(480px 360px at 88% 82%, rgba(108,92,231,.17), transparent 60%),
    radial-gradient(420px 320px at 92% 8%, rgba(34,199,169,.13), transparent 60%);
}
.bg-navy .container{position:relative; z-index:1;}

/* Preis-/Einsatzgebiet-Karte: holografische Akzentkante oben */
.coverage-card{position:relative; overflow:hidden;}
.coverage-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:var(--holo-gradient); background-size:200% 100%;
  animation:holoShift 9s ease-in-out infinite;
}

/* FAQ: hochwertiges rundes Toggle-Icon */
details.faq-item{transition:box-shadow .2s ease, border-color .2s ease;}
details.faq-item[open]{border-color:transparent; box-shadow:var(--shadow-glow);}
details.faq-item summary::after{
  content:'+'; font-size:17px; font-weight:700; color:var(--blue-600); flex-shrink:0;
  width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%;
  background:var(--cyan-soft);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
details.faq-item[open] summary::after{
  transform:rotate(45deg);
  background:var(--holo-gradient); color:#fff;
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  header.site-header::before,
  .hero h1 .accent,
  .coverage-card::before,
  .utility-bar .badge-live::before{
    animation:none !important;
  }
  .btn-primary::after{transition:none;}
}