/* ============================================================
   instaclean.de – zentrales Stylesheet
   ============================================================
   Fonts werden LOKAL gehostet (DSGVO!).
   Die .woff2-Dateien müssen in /assets/fonts/ liegen –
   Download-Anleitung siehe TODO.md im Hauptverzeichnis.
   ============================================================ */

@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-500.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-700.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

:root{
  --ink:#171717;
  --steel:#565F66;
  --mist:#F5F7F8;
  --mist-2:#ECEFF0;
  --line:#E1E5E7;
  --blue:#0090B8;
  --blue-deep:#00728F;
  --blue-pale:#E3F4F8;
  --green:#6AC215;
  --green-deep:#559A10;
  --green-pale:#EFF9E5;
  --cta:#F86011;
  --cta-deep:#DC4E04;
  --white:#FFFFFF;
  --shadow: 0 16px 32px -20px rgba(23,23,23,0.18);
  --radius: 10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Plus Jakarta Sans', sans-serif;
  letter-spacing:-0.01em;
  line-height:1.08;
  margin:0;
  color:var(--ink);
  font-weight:700;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue-deep);
  font-weight:500;
}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}   /* height:auto: Attribut-Höhen responsiv überschreiben */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

/* ===== Header ===== */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
header.scrolled{box-shadow:0 2px 16px rgba(23,23,23,0.06);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;max-width:1260px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.logo-img{height:38px;width:auto;display:block;flex-shrink:0;}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;}
.brand{display:flex;align-items:center;}
nav.main-nav{display:flex;gap:34px;align-items:center;flex:1;justify-content:center;margin:0 28px;white-space:nowrap;}
nav.main-nav a{
  font-size:0.92rem;font-weight:500;text-decoration:none;color:var(--ink);
  position:relative;padding:4px 0;
}
nav.main-nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue);
  transition:width .25s ease;
}
nav.main-nav a:hover::after{width:100%;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:8px;
  font-weight:600;font-size:0.92rem;text-decoration:none;border:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{background:var(--cta);color:var(--white);box-shadow:0 6px 16px -6px rgba(248,96,17,0.5);}
.btn-primary:hover{background:var(--cta-deep);box-shadow:0 8px 20px -6px rgba(220,78,4,0.55);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep);}
.btn-light{background:var(--white);color:var(--ink);}
.header-cta{display:flex;gap:12px;align-items:center;}
.header-icons{display:flex;gap:8px;}
.header-icons .hi{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);border:1.5px solid var(--line);background:transparent;
  transition:border-color .2s ease, color .2s ease;
}
.header-icons .hi:hover{border-color:var(--blue);color:var(--blue-deep);}
.burger{display:none;background:none;border:none;padding:8px;}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;background:var(--white);z-index:1000;
  display:flex;flex-direction:column;padding:20px 24px 28px;
  transform:translateX(100%);
  visibility:hidden;pointer-events:none;   /* geschlossen: unsichtbar UND garantiert klick-durchlässig */
  transition:transform .32s ease, visibility 0s linear .32s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;   /* Querformat: Inhalt höher als Viewport -> scrollbar */
}
.mobile-menu.open{
  transform:translateX(0);
  visibility:visible;pointer-events:auto;
  transition:transform .32s ease, visibility 0s;
}
.mobile-menu-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line);}
.mobile-menu-close{background:none;border:none;padding:8px;color:var(--ink);cursor:pointer;}
.mobile-menu-nav{display:flex;flex-direction:column;margin-top:12px;}
.mobile-menu-nav a{
  font-family:'Plus Jakarta Sans';font-weight:600;font-size:1.2rem;color:var(--ink);
  text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line);
}
.mobile-menu-bottom{margin-top:auto;display:flex;flex-direction:column;gap:14px;padding-top:20px;}
.mobile-menu-contact{display:flex;justify-content:center;gap:16px;}
.mobile-menu-contact a{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);border:1.5px solid var(--line);background:transparent;
  transition:border-color .2s ease, color .2s ease;
}
.mobile-menu-contact a:hover{border-color:var(--blue);color:var(--blue-deep);}
.mobile-menu-bottom .btn-primary{justify-content:center;}
body.menu-open{overflow:hidden;}

/* ===== Hero ===== */
.hero{
  background:var(--white);
  padding:60px 0 40px;
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:"";position:absolute;top:-160px;right:-140px;width:560px;height:560px;
  background:radial-gradient(circle, var(--blue-pale) 0%, rgba(227,244,248,0.35) 45%, transparent 72%);
  pointer-events:none;z-index:0;
}
.hero .wrap{position:relative;z-index:1;}
.hero-grid{
  display:grid;grid-template-columns:1.2fr 0.8fr;gap:48px;align-items:center;
}
.hero h1{font-size:clamp(2.5rem, 4.2vw, 3.9rem);margin:14px 0 20px;}
.hero h1 em{font-style:normal;color:var(--blue);}
.hero p.lead{font-size:1.12rem;color:var(--steel);max-width:520px;margin-bottom:30px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}

.trust-strip{display:flex;flex-wrap:wrap;gap:20px;padding-top:26px;border-top:1px solid var(--line);}
.trust-item{display:flex;flex-direction:column;gap:2px;min-width:0;}
.trust-item .num{font-family:'Plus Jakarta Sans';font-size:1.5rem;font-weight:800;color:var(--blue-deep);}
.trust-item .lbl{font-size:0.8rem;color:var(--steel);}
.google-trust .stars{color:#FBBC04;font-size:1.15rem;letter-spacing:2px;line-height:1;margin-bottom:3px;}
.google-trust .lbl{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);}
.google-g{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;font-family:'Plus Jakarta Sans';font-weight:800;font-size:0.7rem;color:var(--white);
  background:conic-gradient(from -45deg,#4285F4 0 25%,#34A853 25% 50%,#FBBC04 50% 75%,#EA4335 75% 100%);
}

/* Hero photo */
.hero-photo-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:var(--mist-2);border:1px solid var(--line);
  box-shadow:0 24px 48px -24px rgba(6,46,57,0.28);
}
.hero-photo-card img{width:100%;height:auto;display:block;}

/* ===== Sections generic ===== */
section{padding:84px 0;}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head.about-head{margin-bottom:24px;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-top:10px;}
.section-head p{color:var(--steel);font-size:1.05rem;margin-top:14px;max-width:580px;}

/* Pun / partial-clean photo section */
.pun-section{background:var(--mist);}
.pun-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.pun-photo{position:relative;}
.pun-photo img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 20px 44px -22px rgba(6,46,57,0.3);}
.pun-tag{
  position:absolute;bottom:-14px;z-index:1;font-weight:800;font-family:'Plus Jakarta Sans';
  font-size:0.8rem;padding:6px 16px;border-radius:100px;color:var(--white);
  box-shadow:0 4px 12px rgba(0,20,26,0.25);border:3px solid var(--mist);
}
.pun-tag-before{left:14px;background:var(--green);}
.pun-tag-after{right:14px;background:var(--blue);}
.pun-section .strike{position:relative;color:var(--steel);opacity:0.55;}
.pun-section .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:50%;height:3px;background:var(--cta);transform:rotate(-2deg);}
.pun-grid p{color:var(--steel);font-size:1.02rem;margin:0 0 28px;max-width:480px;}

/* USP grid */
.usp-section{background:var(--white);}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.usp-card{background:var(--white);padding:30px 24px;transition:background .25s ease;}
.usp-card:hover{background:var(--mist);}
.usp-icon{width:40px;height:40px;margin-bottom:18px;}
.usp-card h3{font-family:'Inter';font-weight:700;font-size:1.02rem;letter-spacing:0;margin-bottom:8px;}
.usp-card p{font-size:0.9rem;color:var(--steel);margin:0;}

/* Process */
.process-section{background:var(--mist);}

.process-track{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px;position:relative;}
.process-step{position:relative;padding-right:0;display:flex;flex-direction:column;height:100%;}
.process-step p{flex:0 0 auto;}
.step-note{margin-top:auto;}
.step-media{position:relative;margin-bottom:34px;}
.step-img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line);}
.step-num{
  width:44px;height:44px;border-radius:50%;background:var(--blue);color:var(--white);
  display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans';
  font-size:1.1rem;font-weight:800;position:absolute;left:18px;bottom:-20px;z-index:1;
  box-shadow:0 4px 12px rgba(0,20,26,0.18);border:3px solid var(--mist);
}
.process-step h3{font-family:'Inter';font-weight:700;font-size:1.1rem;letter-spacing:0;margin-bottom:10px;}
.process-step p{font-size:0.93rem;color:var(--steel);margin:0 0 14px;}
.step-note{
  background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-size:0.92rem;color:var(--steel);
}
.step-note b{color:var(--blue-deep);}

/* Video */
.video-section{background:var(--white);}
.video-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:start;}
.video-grid p{color:var(--steel);font-size:1.02rem;margin:0 0 28px;max-width:460px;}
.video-note{margin-top:16px !important;margin-bottom:0 !important;font-size:0.92rem !important;font-style:italic;}
.video-wrap{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(6,46,57,0.3);border:1px solid var(--line);background:var(--mist);
  /* Seitenverhältnis je Video als style="aspect-ratio:..." am Element;
     wird per JS zusätzlich aus den Video-Metadaten bestätigt */
}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block;}
/* Klickfläche: Bildbereich (inkl. YouTube-Logo) startet/stoppt das Video;
   die unteren 52px bleiben frei, damit die nativen Controls ungestört sind */
.video-tap{position:absolute;left:0;right:0;top:0;bottom:52px;cursor:pointer;z-index:1;}

.gallery-section{background:var(--mist);}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 24px;}
.project-pair{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:8px;box-shadow:0 12px 28px -18px rgba(6,46,57,0.2);}
.pair-media{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.pair-img{position:relative;border-radius:6px;overflow:hidden;}
.pair-img img{width:100%;height:auto;display:block;transition:transform .4s ease;}
.project-pair:hover .pair-img img{transform:scale(1.05);}
.pair-lbl{
  position:absolute;left:8px;bottom:8px;font-weight:700;font-size:0.76rem;
  padding:4px 12px;border-radius:100px;color:var(--white);letter-spacing:0.02em;
  border:2px solid rgba(255,255,255,0.85);
}
.lbl-before{background:var(--green);}
.lbl-after{background:var(--blue);left:auto;right:8px;}
.project-tag{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-14px;z-index:1;
  text-align:center;white-space:normal;max-width:calc(100% - 32px);width:max-content;
  background:var(--white);color:var(--steel);font-weight:800;
  font-family:'Plus Jakarta Sans';font-size:0.85rem;letter-spacing:0.01em;
  padding:6px 16px;border-radius:100px;
  box-shadow:0 4px 12px rgba(0,20,26,0.18);border:1px solid var(--line);
}

/* Reviews */
.reviews-section{background:var(--white);}
.reviews-head{max-width:640px;margin:0 auto 52px;text-align:center;}
.stars-row{color:#FBBC04;font-size:1.4rem;letter-spacing:3px;line-height:1;}

/* Layout: festes Ergebnis-Panel links, Karussell rechts */
.reviews-body{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start;margin-top:8px;}
.reviews-panel{
  background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:44px 26px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:300px;
}
.reviews-panel .score{font-family:'Plus Jakarta Sans';font-weight:800;font-size:3.6rem;line-height:1;color:var(--ink);}
.reviews-panel .stars-row{font-size:1.35rem;}
.reviews-panel small{color:var(--steel);font-size:0.9rem;line-height:1.5;}
.btn-google{
  display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:100px;padding:10px 18px;font-weight:600;font-size:0.88rem;color:var(--ink);text-decoration:none;
  box-shadow:0 4px 12px rgba(0,20,26,0.08);transition:border-color .15s ease;margin-top:8px;
}
.btn-google:hover{border-color:var(--blue);}
.reviews-head h2{font-size:clamp(1.9rem,3vw,2.6rem);margin-top:10px;}
.reviews-head p{color:var(--steel);font-size:1.05rem;margin-top:14px;max-width:580px;margin-left:auto;margin-right:auto;}
/* Bewertungskarte im Google-Stil */
.review-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 10px 26px -14px rgba(6,46,57,0.18);text-align:left;display:flex;flex-direction:column;width:100%;}
.review-card .review-text{flex:1;}
.review-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;}
.review-avatar{width:46px;height:46px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;flex:none;}
.review-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.stars-dim{color:#D9DDDE;}
.review-who{flex:1;min-width:0;}
.review-who strong{display:block;font-family:'Plus Jakarta Sans';font-size:0.95rem;color:var(--ink);}
.review-who span{font-size:0.82rem;color:#8A9296;}
.review-g{flex:none;margin-top:2px;}
.review-stars{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.review-stars .stars-row{font-size:1.15rem;letter-spacing:2px;}
.review-text{color:var(--ink);font-size:0.95rem;line-height:1.6;margin:0;}
.review-text.clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.review-more{background:none;border:none;padding:0;margin-top:10px;color:#8A9296;font-size:0.88rem;font-weight:500;cursor:pointer;font-family:inherit;}
.review-more:hover{color:var(--ink);}

/* Karussell: 3 Karten neben dem Panel (Desktop) */
.reviews-carousel{position:relative;min-width:0;}
.reviews-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 16px;scrollbar-width:none;align-items:flex-start;cursor:grab;}
.reviews-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;scroll-behavior:auto;}
.reviews-track.is-autoscroll{scroll-snap-type:none;}
.reviews-track.is-dragging *{user-select:none;}
.reviews-track::-webkit-scrollbar{display:none;}
.review-slide{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;}
.carousel-btn{
  position:absolute;top:110px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);box-shadow:0 8px 20px rgba(0,20,26,0.14);cursor:pointer;
  display:flex;align-items:center;justify-content:center;z-index:2;transition:border-color .15s ease,opacity .2s ease;
}
.carousel-btn:hover{border-color:var(--blue);}
.carousel-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2.5;fill:none;}
.carousel-prev{left:-14px;}
.carousel-next{right:-14px;}
.carousel-btn[disabled]{opacity:0;pointer-events:none;}
@media(max-width:1120px){.review-slide{flex-basis:calc((100% - 18px)/2);}}
@media(max-width:900px){
  .reviews-body{grid-template-columns:1fr;}
  .reviews-panel{max-width:420px;margin:0 auto;width:100%;}
}
@media(max-width:620px){.review-slide{flex-basis:86%;}.carousel-btn{display:none;}}

/* About / region */
.about-section{background:var(--mist);}
.about-grid{
  display:grid;grid-template-columns:0.95fr 1.05fr;column-gap:64px;row-gap:0;
  grid-template-areas:
    "head    head"
    "text    video"
    "regions regions";
  align-items:start;
}
.about-head{grid-area:head;}
.about-text{grid-area:text;}
.about-photo{grid-area:video;}
.about-regions{grid-area:regions;margin-top:44px;}
.about-text .about-facts{margin-top:24px;}
.about-photo{margin-top:24px;}   /* gleicher Abstand wie die Liste -> Video beginnt auf Höhe des ersten Punkts */
.about-card{
  background:var(--mist);border-radius:var(--radius);padding:36px;border:1px solid var(--line);
}
.about-photo img{width:100%;height:auto;display:block;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 20px 44px -22px rgba(6,46,57,0.25);}
.about-facts{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.about-facts li{display:flex;gap:12px;font-size:0.95rem;align-items:flex-start;}
.about-facts li::before{content:"✓";color:var(--green);font-weight:800;font-size:1rem;line-height:1.3;flex-shrink:0;}
.region-tags{display:flex;flex-wrap:wrap;gap:10px;}
.region-tag{background:var(--white);border:1px solid var(--line);color:var(--blue-deep);border-radius:100px;padding:7px 16px;font-size:0.82rem;font-weight:600;}
.region-tag-highlight{background:var(--blue);border-color:var(--blue);color:var(--white);}

/* FAQ */
.faq-section{background:var(--white);}
.faq-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:start;}
.faq-photo{margin-top:170px;}
.faq-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 20px 44px -22px rgba(6,46,57,0.25);}
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:22px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:1.02rem;font-weight:600;color:var(--ink);
}
.faq-q .plus{
  width:26px;height:26px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--blue-deep);
  transition:transform .25s ease, background .25s ease;
}
.faq-item.open .plus{background:var(--blue);color:var(--white);transform:rotate(45deg);border-color:var(--blue);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 22px;color:var(--steel);font-size:0.94rem;max-width:680px;}
.faq-more{margin-top:32px;}

/* Final CTA */
.cta-section{background:#062E39;color:var(--white);}
.cta-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:start;}
.cta-grid .eyebrow{color:#7FD4E8;}
.cta-grid h2{color:var(--white);font-size:clamp(1.9rem,3vw,2.6rem);margin-top:10px;}
.cta-grid p{color:#AACBD3;font-size:1.05rem;max-width:580px;margin-top:14px;margin-bottom:26px;}
.contact-quick{display:flex;flex-direction:column;gap:14px;margin-top:30px;}
.contact-availability{font-size:0.85rem !important;color:#7FA6B0 !important;margin-top:16px !important;margin-bottom:0 !important;}
.cta-trust{display:flex;align-items:center;gap:14px;margin-top:26px;padding:16px 20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius);max-width:340px;}
.cta-trust .stars-row{color:#FBBC04;font-size:0.95rem;letter-spacing:2px;}
.cta-trust-label{font-size:0.82rem;color:#AACBD3;}
.contact-quick a{display:flex;align-items:flex-start;gap:12px;text-decoration:none;color:var(--white);font-size:0.95rem;font-weight:500;}
.contact-quick .ct{line-height:1.45;padding-top:8px;}   /* zentriert die erste Textzeile zum 38px-Icon */
.contact-quick .ic{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.form-card{background:var(--white);border-radius:var(--radius);padding:36px;color:var(--ink);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.form-field-wide{grid-column:1 / -1;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:0.82rem;font-weight:600;color:var(--steel);}
.form-field input, .form-field textarea{
  padding:12px 14px;border-radius:8px;border:1.5px solid var(--line);
  font-family:inherit;font-size:0.94rem;background:var(--mist);color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{border-color:var(--blue);outline:none;background:var(--white);}
.form-note{font-size:0.78rem;color:var(--steel);margin-top:12px;}
.form-note a{color:var(--blue-deep);}
.form-note-response{font-size:0.85rem;font-weight:600;color:var(--blue-deep);}
.form-submit{width:100%;margin-top:6px;justify-content:center;}

/* Footer */
footer{background:var(--ink);color:#A9AFB3;padding:56px 0 28px;font-size:0.88rem;position:relative;overflow:hidden;}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-col-spacer{visibility:hidden;}
.footer-grid h4{font-family:'Inter';color:var(--white);font-size:0.95rem;margin-bottom:16px;}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
.footer-grid a{text-decoration:none;color:#9AA3A8;}
.footer-grid a:hover{color:#7FD4E8;}
.footer-bottom{display:flex;justify-content:flex-end;padding-top:24px;flex-wrap:wrap;gap:12px;color:#6B7477;}

/* Reveal animation */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.fade-up.in{opacity:1;transform:translateY(0);}

/* Responsive */
@media (min-width:961px){
  .trust-strip{flex-wrap:nowrap;}
}
@media (max-width:960px){
  .hero-grid, .about-grid, .cta-grid, .pun-grid, .faq-grid, .video-grid{grid-template-columns:1fr;}
  .video-grid p, .pun-grid p{max-width:100%;}
  .about-grid{grid-template-areas:"head" "text" "video" "regions";}
  .about-photo{margin-top:32px;}
  .about-regions{margin-top:36px;}
  .faq-photo{position:static;margin-top:0;}
  .usp-grid{grid-template-columns:repeat(2,1fr);}
  .process-track{grid-template-columns:1fr;gap:36px;}
  .process-track::before{display:none;}
  .project-grid{grid-template-columns:1fr;gap:34px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  nav.main-nav{display:none;}
  .burger{display:block;}
}
/* Header-Platz-Kaskade: bei Enge entfallen der Reihe nach
   E-Mail-Icon -> WhatsApp-Icon -> Telefon-Icon -> "Kostenlose".
   Ab 960px (Burger) entfallen die Menüpunkte -> alles kehrt
   zurück und entfällt bei weiterer Enge in gleicher Reihenfolge. */
@media (max-width:1200px){ .header-icons .hi-mail{display:none;} }
@media (max-width:1140px){ .header-icons .hi-wa{display:none;} }
@media (max-width:1080px){ .header-icons .hi-tel{display:none;} }
@media (max-width:1010px){ .header-cta .cta-word{display:none;} }
@media (max-width:960px){
  .header-icons .hi-tel, .header-icons .hi-mail, .header-icons .hi-wa{display:flex;}
  .header-cta .cta-word{display:inline;}
}
@media (max-width:640px){ .header-icons .hi-mail{display:none;} }
@media (max-width:590px){ .header-icons .hi-wa{display:none;} }
@media (max-width:540px){ .header-icons .hi-tel{display:none;} }
@media (max-width:480px){ .header-cta .cta-word{display:none;} }
@media (max-width:600px){
  .logo-img{height:32px;}
  .usp-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .section-head p, .reviews-head p, .cta-grid p{max-width:100%;}
  .header-cta .btn-primary{padding:10px 16px;font-size:0.82rem;}
  .project-grid{grid-template-columns:1fr;}
  .trust-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;}
}

/* Floating contact button */
.fab{position:fixed;right:24px;bottom:24px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  pointer-events:none;   /* Container ist höher als sichtbar (unsichtbarer Menü-Stapel) und darf NIE Klicks fangen */
}
.fab-toggle{pointer-events:auto;}
.fab-quick{
  pointer-events:auto;
  width:46px;height:46px;border-radius:50%;color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,filter .2s ease;
}
.fab-quick:hover{transform:scale(1.08);filter:brightness(1.05);}
.fab-quick-wa{background:var(--green);box-shadow:0 8px 20px -8px rgba(106,194,21,0.6);}
.fab-quick-tel{background:var(--blue);box-shadow:0 8px 20px -8px rgba(0,144,184,0.6);}
.fab-toggle{
  height:46px;border-radius:23px;border:none;background:var(--cta);color:var(--white);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;
  font-family:inherit;font-size:0.92rem;font-weight:700;cursor:pointer;
  box-shadow:0 10px 24px -8px rgba(248,96,17,0.55);transition:transform .2s ease,background .2s ease;
}
.fab-toggle:hover{background:var(--cta-deep);transform:scale(1.04);}
.fab-icon-close{display:none;}
.fab.open .fab-icon-open{display:none;}
.fab.open .fab-icon-close{display:block;}
.fab-menu{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.fab.open .fab-menu{opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0);
  transition:opacity .2s ease,transform .2s ease,visibility 0s;}
.fab-item{
  display:flex;align-items:center;gap:10px;background:var(--white);color:var(--ink);
  padding:11px 18px 11px 14px;border-radius:100px;text-decoration:none;font-size:0.88rem;font-weight:600;
  box-shadow:0 8px 20px -8px rgba(23,23,23,0.3);border:1px solid var(--line);
  transition:background .2s ease,transform .2s ease;
}
.fab-item:hover{background:var(--mist);transform:translateX(-2px);}
.fab-ic{width:30px;height:30px;border-radius:50%;background:var(--blue-pale);color:var(--blue-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fab-item-cta{background:var(--cta);color:var(--white);border-color:var(--cta);}
.fab-item-cta:hover{background:var(--cta-deep);}
.fab-item-cta .fab-ic{background:rgba(255,255,255,0.2);color:var(--white);}
@media (max-width:600px){
  .fab{right:16px;bottom:16px;}
  .fab-item{font-size:0.84rem;padding:10px 16px 10px 12px;}
}

/* ===== Ergänzungen Mehrseiten-Struktur ===== */

/* Honeypot: für Menschen unsichtbar (nicht display:none, das erkennen Bots) */
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden;}

/* Select-Feld im Formular (Woher kennen Sie uns?) */
.form-field select{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  font-family:'Inter';font-size:0.95rem;color:var(--ink);background:var(--white);
}
.form-field select:focus{outline:2px solid var(--blue);border-color:var(--blue);}

/* Navigation: 6 Punkte brauchen etwas engere Abstände */
@media (max-width:1120px){
  nav.main-nav{gap:22px;}
  nav.main-nav a{font-size:0.88rem;}
}

/* ===== Danke-Seite ===== */
.danke-section{background:var(--mist);min-height:60vh;display:flex;align-items:center;}
.danke-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:52px 44px;max-width:620px;margin:0 auto;text-align:center;
  box-shadow:0 24px 48px -28px rgba(6,46,57,0.22);
}
.danke-icon{
  width:64px;height:64px;border-radius:50%;background:var(--green-pale);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.danke-card h1{font-size:clamp(1.6rem,3vw,2.1rem);margin:10px 0 16px;}
.danke-card p{color:var(--steel);font-size:1.02rem;margin:0 0 14px;}
.danke-hinweis{font-size:0.88rem !important;color:#8A9296 !important;}
.danke-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px;}

/* ===== Formular: Gruppenüberschriften + Datenschutz-Checkbox ===== */
.form-group-label{
  font-family:'Plus Jakarta Sans';font-weight:700;font-size:0.95rem;color:var(--ink);
  margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--line);
}
.form-card .form-group-label:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.form-consent{margin:18px 0 6px;}
.form-consent label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;}
.form-consent input[type="checkbox"]{margin-top:3px;width:16px;height:16px;flex-shrink:0;accent-color:var(--blue);}
.form-consent span{font-size:0.8rem;color:var(--steel);line-height:1.55;}
.form-consent a{color:var(--blue-deep);}

/* ===== E-Mail-Tippfehler-Hinweis ===== */
.email-hint{
  display:none;margin-top:6px;font-size:0.82rem;color:var(--cta-deep);
}
.email-hint button{
  background:none;border:none;padding:0;font:inherit;color:var(--blue-deep);
  text-decoration:underline;cursor:pointer;font-weight:600;
}

/* ===== Checkbox-Gruppe (Fassadenmaterial) ===== */
.form-label{display:block;font-size:0.82rem;font-weight:600;color:var(--ink);margin-bottom:8px;}
.checkbox-group{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
.checkbox-item{
  display:flex;align-items:center;gap:8px;font-size:0.9rem;color:var(--ink);
  cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:8px;
  transition:border-color .15s ease,background .15s ease;
}
.checkbox-item:hover{background:var(--mist);}
.checkbox-item:has(input:checked){border-color:var(--blue);background:var(--blue-pale);}
.checkbox-item input[type="checkbox"]{width:15px;height:15px;flex-shrink:0;accent-color:var(--blue);margin:0;}
.checkbox-group-error{font-size:0.82rem;color:var(--cta-deep);margin-top:6px;display:none;}
@media (max-width:480px){.checkbox-group{grid-template-columns:1fr;}}

/* ===== Unterseiten: Seitenkopf ===== */
.page-hero{
  background:var(--mist);padding:72px 0 48px;
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.15;margin:14px 0 18px;}
.page-hero p{color:var(--steel);font-size:1.05rem;max-width:640px;margin:0;}
.page-hero p a{color:var(--blue-deep);font-weight:600;}

/* ===== FAQ-Seite ===== */
.faq-jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.faq-jump a{
  display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:99px;
  background:var(--white);font-size:0.88rem;font-weight:600;color:var(--ink);
  text-decoration:none;transition:border-color .15s ease,color .15s ease;
}
.faq-jump a:hover{border-color:var(--blue);color:var(--blue-deep);}
.faq-page-section{padding:56px 0 72px;}
.faq-category{max-width:820px;margin:0 auto 46px;scroll-margin-top:110px;}
.faq-category:last-child{margin-bottom:0;}
.faq-category h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 18px;}

/* ===== Bildergalerie-Seite ===== */
.gallery-page-section{padding:56px 0 72px;background:var(--white);}
.gallery-page-grid{margin-top:0;align-items:start;}  /* Karten behalten ihre natürliche Höhe – die CTA-Karte darf höher sein, ohne Nachbarn zu strecken */


/* Tag der fiktiven Referenz: in CTA-Farben, verlinkt zum Probefläche-Formular */
a.project-tag-cta,
a.project-tag-cta:visited{
  background:var(--cta);color:var(--white);border-color:var(--cta-deep);
  text-decoration:none;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(248,96,17,0.55);
  transition:background .15s ease,box-shadow .15s ease;
}
a.project-tag-cta:hover{
  background:var(--cta-deep);color:var(--white);text-decoration:none;
  box-shadow:0 8px 20px -6px rgba(220,78,4,0.6);
}

/* ===== Rechtsseiten (Impressum, Datenschutz) ===== */
.legal-section{padding:52px 0 72px;background:var(--white);}
.legal-content{max-width:780px;}
.legal-content h2{font-size:1.35rem;margin:38px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:1.08rem;margin:28px 0 10px;}
.legal-content h4{font-size:0.98rem;margin:22px 0 8px;}
.legal-content p{color:var(--steel);line-height:1.75;margin:0 0 14px;}
.legal-content ul,.legal-content ol{color:var(--steel);line-height:1.75;margin:0 0 14px;padding-left:22px;}
.legal-content li{margin-bottom:6px;}
.legal-content a{color:var(--blue-deep);}

/* Probefläche-Seite: Schritte untereinander, Video daneben */
.probeflaeche-demo{padding-top:56px;}
.steps-video-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.steps-col{display:flex;flex-direction:column;gap:30px;}
.step-row{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:flex-start;text-align:left;}
.step-row .step-num{position:static;}   /* gleiche Kreis-/Schriftgröße wie auf der Startseite */
.step-row h3{margin:8px 0 6px;}
.step-row p{margin:0;color:var(--steel);line-height:1.65;}
@media (max-width:900px){
  .steps-video-grid{grid-template-columns:1fr;gap:40px;}
}

/* Link im dunklen Kontaktbereich */
.cta-section .link-hell{color:var(--white);font-weight:700;text-decoration:none;}

/* Header-CTA auf schmalen Displays: nur "Probefläche" */
@media (max-width:560px){
}

/* Formular: Fehlerbox + Feld-Markierung (Rücksprung aus lead.php) */
.form-errorbox{
  background:#FDECEA;border:1px solid #E5484D;border-radius:10px;
  padding:14px 18px;margin:0 0 20px;color:#8C1D22;font-size:0.92rem;line-height:1.55;
}
.form-errorbox strong{display:block;margin-bottom:6px;}
.form-errorbox ul{margin:0;padding-left:20px;}
.form-errorbox li{margin-bottom:3px;}
.form-card input[aria-invalid="true"],
.form-card select[aria-invalid="true"],
.form-card textarea[aria-invalid="true"]{
  border-color:#E5484D !important;
  box-shadow:0 0 0 3px rgba(229,72,77,0.15);
}

/* Ansprechpartner-Karte (Formulare: dunkler Grund / Über uns: hell) */
.person-card{display:flex;align-items:center;gap:14px;margin:22px 0 6px;}
.person-card img{width:76px;height:76px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,0.45);}
.person-card strong{display:block;font-family:'Plus Jakarta Sans';font-size:1rem;color:#fff;}
.person-card span{font-size:0.85rem;color:#B9CDD4;line-height:1.4;display:block;}
.person-card-light{margin:26px 0 0;padding-left:26px;}
.person-card-light img{border-color:var(--line);}
.person-card-light strong{color:var(--ink);}
.person-card-light span{color:var(--steel);}

/* Sprungziele: Platz für den feststehenden Header lassen */
section[id]{scroll-margin-top:85px;}

/* Consent-Banner (eigener First-Party-Banner, Consent Mode v2) */
.consent-wrap[hidden]{display:none;}   /* hidden-Attribut muss display:flex schlagen */
.consent-wrap{
  position:fixed;inset:0;z-index:9999;background:rgba(6,46,57,0.45);
  display:flex;align-items:flex-end;justify-content:center;padding:16px;
}
.consent-box{
  background:var(--white);border-radius:var(--radius);max-width:640px;width:100%;
  padding:26px 28px;box-shadow:0 24px 64px -16px rgba(6,46,57,0.4);
  max-height:calc(100vh - 24px);overflow-y:auto;-webkit-overflow-scrolling:touch;   /* Querformat: Karte darf nie höher als der Bildschirm sein */
}
.consent-box h2{font-family:'Plus Jakarta Sans';font-size:1.15rem;margin:0 0 10px;color:var(--ink);}
.consent-box p{font-size:0.92rem;color:var(--steel);line-height:1.6;margin:0 0 16px;}
.consent-box a{color:var(--blue-deep);}
.consent-opts{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;}
.consent-opt{display:flex;gap:10px;align-items:flex-start;font-size:0.9rem;color:var(--ink);line-height:1.5;}
.consent-opt input{margin-top:3px;flex-shrink:0;accent-color:var(--blue-deep);}
.consent-btns{display:flex;gap:10px;flex-wrap:wrap;}
.btn-consent{
  font-family:'Plus Jakarta Sans';font-weight:700;font-size:0.9rem;cursor:pointer;
  padding:12px 18px;border-radius:100px;flex:1 1 auto;min-width:140px;
  transition:all 0.2s ease;
}
.btn-consent-primary{background:var(--cta);color:var(--white);border:1.5px solid var(--cta);box-shadow:0 6px 16px -6px rgba(248,96,17,0.5);}
.btn-consent-primary:hover{background:var(--cta-deep);border-color:var(--cta-deep);}
.btn-consent-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);}
.btn-consent-ghost:hover{border-color:var(--blue);color:var(--blue-deep);}
@media (max-width:560px){
  .consent-wrap{padding:0;}
  .consent-box{border-radius:16px 16px 0 0;padding:22px 20px;}
}

/* Live-Hinweis unter dem PLZ-Feld (Luxemburg vs. Tippfehler) */
.plz-hinweis{display:block;margin-top:6px;font-size:0.78rem;color:#F8B011;line-height:1.4;}