/* =====================================================================
   BERTELS MALERFACHBETRIEB — Custom Design Layer (over Bootstrap 5)
   Bootstrap liefert nur Grid, Breakpoints und ausgewählte Utilities.
   Alle sichtbaren Komponenten (Buttons, Cards, Navbar, Formulare, ...)
   werden hier vollständig individuell gestaltet.
===================================================================== */

/* =====================================================================
   SCHRIFTARTEN — lokal eingebunden (kein Google-Fonts-CDN mehr nötig)
   Dateien liegen in fonts/, exakt dieselben Schriftschnitte wie zuvor
   über Google Fonts geladen (Poppins 500/600/700/800, Inter 400/500/
   600/700), daher bleibt die Optik unverändert. "latin"-Subset deckt
   auch deutsche Sonderzeichen (äöüß) vollständig ab (U+0000–00FF).
   font-display:swap verhindert unsichtbaren Text während des Ladens.
===================================================================== */
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/poppins-latin-800-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root{
  --green-900:#045c39;
  --green-800:#06794c;
  --green-700:#0e9760;
  --green-100:#e1f4ea;
  --red:#b8342b;
  --red-dark:#8f271f;
  --cream:#f6f6f3;
  --cream-2:#f1f0ea;
  --white:#ffffff;
  --ink:#1c1c19;
  --ink-soft:#3a3a35;
  --muted:#6c6d66;
  --line:#e4e3dc;
  --dark:#1a1a1a;
  --radius-s:20px;
  --radius-m:20px;
  --shadow-card:0 1px 2px rgba(20,20,15,0.04), 0 10px 24px -18px rgba(20,20,15,0.35);
  --font-head:'Poppins', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
}

html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.18;letter-spacing:-0.01em;color:var(--ink);}
.wrap{max-width:1180px;}
.icon-fixed{width:1em;text-align:center;flex-shrink:0;}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;}

/* =====================================================================
   SCROLL PROGRESS BAR
===================================================================== */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--green-800);z-index:1100;
  transition:width .08s linear;
}

/* =====================================================================
   COOKIE-BANNER — erscheint einmalig beim ersten Seitenaufruf
===================================================================== */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 34px -18px rgba(0,0,0,.28);
  animation:cookie-banner-in .35s ease;
}
@keyframes cookie-banner-in{
  from{transform:translateY(100%);}
  to{transform:translateY(0);}
}
.cookie-banner-inner{
  max-width:1180px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie-banner p{
  display:flex;align-items:flex-start;gap:10px;
  margin:0;font-size:13.5px;color:var(--muted);max-width:640px;line-height:1.5;
}
.cookie-banner p i{color:var(--green-800);font-size:17px;flex-shrink:0;margin-top:1px;}
.cookie-banner-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cookie-banner .footer-cookie-link{color:var(--muted);}
.cookie-banner .footer-cookie-link:hover{color:var(--green-800);}
@media (max-width:575.98px){
  .cookie-banner-inner{flex-direction:column;align-items:stretch;}
  .cookie-banner p{text-align:left;}
  .cookie-banner-actions{justify-content:space-between;flex-wrap:wrap;}
  .cookie-banner-actions .btn{flex:1;}
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner{animation:none;}
}

/* =====================================================================
   SCHWEBENDER "BEWERTEN"-KREIS (Google Rezensionen)
   Fest positioniert unten rechts, auf jeder Seite sichtbar. Ausgangs-
   zustand: reiner Kreis mit gruenem G. Beim Hover/Fokus wird daraus ein
   Oval, das zusaetzlich den Text zeigt -- die Breite ergibt sich allein
   aus dem Inhalt (kein fester width-Wert), das ist es, was die Form vom
   Kreis zum Oval veraendert, waehrend border-radius konstant auf der
   halben Hoehe bleibt.
===================================================================== */
.review-fab{
  position:fixed;right:24px;bottom:24px;z-index:1150;
  display:inline-flex;align-items:center;
  height:56px;border-radius:28px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 30px -10px rgba(20,20,15,.35),0 2px 10px rgba(20,20,15,.1);
  overflow:hidden;
  /* Hebt den Kreis über das Cookie-Banner, solange dieses eingeblendet
     ist -- js/script.js setzt die Variable auf dessen tatsächliche Höhe. */
  transform:translateY(calc(-1 * var(--cookie-banner-height, 0px)));
  transition:transform .25s ease,box-shadow .2s ease,border-color .2s ease;
}
/* .is-expanded ist das Touch-Gegenstück zu :hover — js/script.js setzt
   diese Klasse beim ersten Antippen auf Geräten ohne echten Mauszeiger
   (siehe dort), damit auch ohne Hover ein erster Tipp nur die Vorschau
   zeigt und erst ein zweiter Tipp den Link öffnet. */
.review-fab:hover,
.review-fab:focus-visible,
.review-fab.is-expanded{
  box-shadow:0 14px 34px -10px rgba(20,20,15,.4),0 4px 14px rgba(20,20,15,.14);
  border-color:var(--green-700);
}
.review-fab-icon{
  flex:0 0 56px;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--green-700);
}
/* Kollabiert per max-width:0 statt display:none, damit die Breiten-
   Änderung animiert werden kann und der Text für Screenreader trotzdem
   im Baum steht. */
.review-fab-label{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--ink);
  transition:max-width .3s ease,opacity .2s ease,margin .3s ease;
}
.review-fab:hover .review-fab-label,
.review-fab:focus-visible .review-fab-label,
.review-fab.is-expanded .review-fab-label{
  max-width:260px;opacity:1;margin-right:22px;
}
@media (max-width:575.98px){
  .review-fab{right:16px;bottom:16px;height:50px;border-radius:25px;}
  .review-fab-icon{flex-basis:50px;width:50px;height:50px;font-size:20px;}
  .review-fab-label{font-size:13px;}
  .review-fab:hover .review-fab-label,
  .review-fab:focus-visible .review-fab-label,
  .review-fab.is-expanded .review-fab-label{max-width:220px;margin-right:18px;}
}
@media (prefers-reduced-motion: reduce){
  .review-fab,.review-fab-label{transition:none;}
}

/* =====================================================================
   COOKIE-EINSTELLUNGEN-MODAL
===================================================================== */
.consent-modal{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;padding:20px;}
.consent-modal-backdrop{position:absolute;inset:0;background:rgba(20,20,15,.55);}
.consent-modal-panel{
  position:relative;background:#fff;border-radius:var(--radius-m);
  width:100%;max-width:560px;max-height:min(640px,88vh);overflow-y:auto;
  padding:30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
  animation:consent-modal-in .25s ease;
}
@keyframes consent-modal-in{
  from{opacity:0;transform:translateY(12px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.consent-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px;}
.consent-modal-head h3{font-size:20px;margin:0;}
.consent-modal-close{
  background:var(--cream-2);border:none;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:14px;
  cursor:pointer;flex-shrink:0;transition:background .15s ease;
}
.consent-modal-close:hover{background:var(--line);}
.consent-modal-intro{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 22px;}
.consent-modal-list{display:flex;flex-direction:column;gap:14px;margin-bottom:24px;}
.consent-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px;border:1px solid var(--line);border-radius:var(--radius-s, 12px);background:var(--cream-2);
}
.consent-row--locked{background:var(--cream);}
.consent-row-info{min-width:0;}
.consent-row-name{font-family:var(--font-head);font-weight:700;font-size:14.5px;margin:0 0 4px;color:var(--ink);}
.consent-row-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 6px;}
.consent-row-status{
  display:inline-block;flex-shrink:0;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:20px;background:var(--line);color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;align-self:flex-start;
}
.consent-row-status--on{background:var(--green-100);color:var(--green-800);}
.consent-row-status--session{background:#fbeae8;color:var(--red);}
.consent-row-control{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex-shrink:0;}

.consent-toggle{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;cursor:pointer;}
.consent-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.consent-toggle-slider{
  position:absolute;inset:0;background:#d3d1c6;border-radius:20px;transition:background .18s ease;
  pointer-events:none;
}
.consent-toggle-slider::before{
  content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.consent-toggle input:checked + .consent-toggle-slider{background:var(--green-800);}
.consent-toggle input:checked + .consent-toggle-slider::before{transform:translateX(18px);}
.consent-toggle input:focus-visible + .consent-toggle-slider{outline:2.5px solid var(--red);outline-offset:2px;}

.consent-modal-actions{display:flex;flex-wrap:wrap;gap:10px;}
.consent-modal-actions .btn{flex:1;min-width:140px;}
@media (max-width:575.98px){
  .consent-modal-panel{padding:22px;}
  .consent-row{flex-direction:column;}
}

/* =====================================================================
   BUTTONS — override Bootstrap's default look entirely
===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 24px;border-radius:6px;
  font-family:var(--font-head);font-weight:600;font-size:15px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--green-800);border-color:var(--green-800);color:#fff;}
.btn-primary:hover,.btn-primary:focus{background:var(--green-800);border-color:var(--green-800);color:#fff;transform:translateY(-3px);}
.btn-outline-custom{background:transparent;color:var(--ink);border:1.5px solid var(--green-800);}
.btn-outline-custom:hover{background:var(--green-800);border-color:var(--green-800);color:#fff;}
.btn-sm{padding:11px 18px;font-size:14px;}
.btn:active{transform:translateY(1px);}

/* =====================================================================
   PHOTO FRAMES
===================================================================== */
.ph-photo{
  position:relative;border-radius:var(--radius-m);overflow:hidden;width:100%;
  display:flex;align-items:center;justify-content:center;
  background:#cdc3ab;
}
.ph-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.ph-hero{aspect-ratio:4/5;}
.ph-craftsman{aspect-ratio:4/5;}
.ph-frame-accent{position:absolute;left:-14px;top:-14px;width:80px;height:80px;border-left:4px solid var(--red);border-top:4px solid var(--red);border-radius:var(--radius-m) 0 0 0;z-index:0;pointer-events:none;}
.about-accent{position:absolute;right:-14px;bottom:-14px;width:80px;height:80px;border-right:4px solid var(--green-800);border-bottom:4px solid var(--green-800);border-radius:0 0 var(--radius-m) 0;z-index:0;pointer-events:none;}

/* =====================================================================
   EYEBROW / SECTION HEAD
===================================================================== */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-head);font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green-800);
  margin-bottom:16px;
}
.eyebrow-dash::before{content:"";display:inline-block;width:26px;height:2px;background:var(--red);}
.eyebrow-center{justify-content:center;}
.eyebrow-red{color:var(--red);}
.eyebrow-on-dark{color:#7ed9ab;}
.section-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.section-head .eyebrow{justify-content:center;}
.section-sub{color:var(--muted);font-size:16.5px;}
h2{font-size:clamp(26px,3vw,34px);}
.on-dark{color:#fff;}

/* =====================================================================
   HEADER / NAVBAR — Bootstrap navbar + collapse, fully restyled
===================================================================== */
.site-header{
  z-index:1020;background:rgba(246,246,243,.98);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  @media (min-width:992px){
    .site-header{background:rgba(246,246,243,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  }
}
.site-header.is-scrolled{border-color:var(--line);box-shadow:0 4px 18px -14px rgba(0,0,0,.3);}
.navbar{padding:18px 0;transition:padding .25s ease;}
.site-header.is-scrolled .navbar{padding:10px 0;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:70px;width:auto;display:block;transition:height .25s ease;}
.site-header.is-scrolled .brand-logo{height:50px;}
@media (max-width:991.98px){
  .brand-logo{height:48px;}
  .site-header.is-scrolled .brand-logo{height:40px;}
}
@media (min-width:992px) and (max-width:1300px){
  .brand-logo{height:56px;}
}

.navbar-nav .nav-link{
  color:var(--ink-soft);font-weight:500;font-size:14.5px;
  padding:10px 14px;transition:color .15s ease;
  position:relative;
}
.navbar-nav .nav-link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--green-800);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.navbar-nav .nav-link:hover{color:var(--green-800);}
.navbar-nav .nav-link.active{color:var(--green-800);font-weight:600;}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after{transform:scaleX(1);}
.navbar-toggler{border:none;padding:6px;font-size:22px;color:var(--ink);box-shadow:none !important;}
.header-phone{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;color:var(--green-800);white-space:nowrap;}
.header-phone i{color:var(--green-800);}

@media (min-width:992px) and (max-width:1230px){
  .header-phone .phone-text{display:none;}
}

@media (max-width:991.98px){
  .navbar-collapse{
    background:var(--cream);border-top:1px solid var(--line);margin-top:14px;padding-top:8px;
  }
  .navbar-nav .nav-link{padding:13px 4px;border-bottom:1px solid var(--line);font-size:16px;}
  .navbar-nav .nav-link::after{left:4px;right:4px;bottom:9px;}
  .header-actions{flex-direction:column;align-items:stretch !important;gap:12px;margin-top:14px;}
  .header-phone{justify-content:center;padding:10px 0;}
}

/* =====================================================================
   HERO
===================================================================== */
.hero{padding:64px 0 88px;background:var(--cream);}
.hero-copy h1{font-size:clamp(34px,4.4vw,46px);margin-bottom:20px;}
.hero-text{color:var(--muted);font-size:17px;max-width:460px;margin-bottom:28px;}
.hero-location{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:14.5px;margin:0;}
.hero-location i{color:var(--green-800);}
.hero-media-inner{position:relative;}
@media (min-width:992px){
  .hero-media-inner{width:auto;}
  .ph-hero{width:566px;height:644px;aspect-ratio:auto;margin-left:auto;}
}
.hero-media .ph-photo{box-shadow:0 30px 60px -30px rgba(30,30,15,.4);}
.hero-actions .btn{white-space:normal;flex:0 1 auto;min-width:0;text-align:center;padding-left:18px;padding-right:18px;}

@media (max-width:991.98px){
  .hero-media{order:-1;max-width:480px;margin:0 auto;}
  .hero-media-inner .ph-hero{width:calc(100% - 28px);margin-left:14px;}
  .hero-media-inner .ph-frame-accent{left:0;}
  .hero-media-inner .about-accent{right:0;}
}

/* =====================================================================
   TRUST BAR
===================================================================== */
.trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:26px 0;}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink-soft);}
.trust-item i{color:var(--green-800);font-size:18px;}

/* =====================================================================
   ABOUT
===================================================================== */
.about{padding:96px 0;background:var(--cream);}
@media (min-width:992px){
  .about-row{--bs-gutter-x:2.75rem;}
}
.about-media{position:relative;width:100%;}
.about-media .ph-photo{aspect-ratio:4/3;position:relative;z-index:1;}
.about-copy p{color:var(--muted);font-size:16px;}
.about-copy h2{margin-bottom:20px;}
@media (max-width:991.98px){
  .about-media .ph-craftsman{width:calc(100% - 28px);margin-left:14px;}
  .about-media .about-accent{right:0;}
  .about-media .ph-frame-accent{left:0;}
}

/* =====================================================================
   SERVICES
===================================================================== */
.services{padding:100px 0;background:#fff;}
.service-card{
  height:100%;border:1px solid var(--line);border-radius:var(--radius-m);padding:32px 28px;
  background:#fff;transition:box-shadow .2s ease, transform .2s ease;
}
.service-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px);}
.service-icon{
  width:46px;height:46px;border-radius:6px;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--green-800);font-size:19px;
}
.service-card h3{font-size:19px;margin-bottom:14px;}
.check-list{list-style:none;margin:0 0 18px;padding:0;}
.check-list li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-soft);padding:4px 0;}
.check-list i{color:var(--green-800);flex-shrink:0;font-size:14px;}
.service-foot{font-size:13.5px;color:var(--muted);margin:0;}

.service-card--accent{background:var(--green-800);border-color:var(--green-800);color:#fff;}
.service-card--accent h3{color:#fff;}
.service-card--accent .service-icon{background:rgba(255,255,255,.14);color:#fff;}
.service-card--accent .check-list li{color:rgba(255,255,255,.92);}
.service-card--accent .check-list i{color:#cdf2df;}
.service-card--accent .service-foot{color:rgba(255,255,255,.72);}
.service-card--accent:hover{transform:translateY(-2px);box-shadow:0 20px 34px -20px rgba(20,40,15,.5);}

.service-card--cta{
  border:1.5px dashed #c7c6bc;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:16px;background:var(--cream);
}
.service-card--cta p{font-weight:600;font-size:16px;margin:0;color:var(--ink-soft);}
.service-card--cta:hover{transform:none;box-shadow:none;}

/* =====================================================================
   WAND BANNER
===================================================================== */
.wand-banner{
  position:relative;overflow:hidden;padding:120px 0;text-align:left;
  background:#cfc9ba;
}
.wand-bg{
  position:absolute;top:-18%;left:0;right:0;bottom:-18%;
  background:url("../img/charakter.webp") center 30%/cover no-repeat;
  will-change:transform;
}
.wand-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(20,20,15,0) 55%, rgba(20,20,15,.14) 100%),
    rgba(246,246,243,.72);
}
.wand-watermark{
  position:absolute;left:0;right:0;bottom:-6%;width:100%;text-align:center;
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(56px,16.5vw,550px);color:rgba(20,20,15,.08);letter-spacing:-.01em;
  white-space:nowrap;pointer-events:none;user-select:none;line-height:1;
  will-change:transform;
}
.wand-banner .wand-inner{position:relative;z-index:1;max-width:640px;}
.wand-banner h2{margin-bottom:18px;}
.wand-text{color:rgba(20,20,15,.72);font-size:16px;max-width:480px;}
@media (max-width:767.98px){
  .wand-banner{padding:72px 0;}
  .wand-watermark{display:none;}
  .wand-bg{transform:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .wand-bg,.wand-watermark{transform:none !important;}
}

/* =====================================================================
   GALLERY
===================================================================== */
.gallery{padding:100px 0;background:#fff;}
.gallery-item{aspect-ratio:4/3;}
.gallery-item .ph-photo{width:100%;height:100%;cursor:pointer;}
.gallery-item .ph-photo img{transition:transform .5s ease;}
.gallery-item:hover .ph-photo img{transform:scale(1.08);}
.gallery-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(20,20,15,0) 35%, rgba(18,18,14,.78) 100%);
  opacity:0;transition:opacity .35s ease;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;
}
.gallery-item:hover .gallery-overlay{opacity:1;}
.gallery-cat{
  font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#8fe0b7;margin-bottom:6px;
}
.gallery-title{font-family:var(--font-head);font-weight:700;font-size:16px;color:#fff;line-height:1.3;}

/* =====================================================================
   PROCESS
===================================================================== */
.process{padding:96px 0;background:var(--cream);}
.process-num{
  display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  border:1.5px solid var(--green-800);color:var(--green-800);font-family:var(--font-head);font-weight:700;
  font-size:17px;background:var(--cream);margin-bottom:22px;
}
.process-step h3{font-size:17px;margin-bottom:8px;}
.process-step p{color:var(--muted);font-size:14.5px;margin:0;max-width:250px;}
@media (max-width:575.98px){
  .process-step{text-align:center;}
  .process-num{margin-left:auto;margin-right:auto;}
  .process-step p{margin-left:auto;margin-right:auto;}
}

/* =====================================================================
   WHY (DARK)
===================================================================== */
.why{background:var(--dark);padding:96px 0;}
.why-item{text-align:center;}
.why-icon{
  width:52px;height:52px;border-radius:var(--radius-s);background:#123c2c;color:#8fe0b7;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:20px;
}
.why-item h3{color:#fff;font-size:16.5px;margin-bottom:8px;}
.why-item p{color:#9a9a94;font-size:14px;margin:0;}

/* =====================================================================
   CONTACT
===================================================================== */
.contact{padding:96px 0 120px;background:var(--cream);}
.contact-card{background:var(--green-800);color:#fff;border-radius:var(--radius-m);padding:30px 28px;}
.contact-card-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#b9cdae;font-weight:600;margin-bottom:6px;}
.contact-card-name{font-family:var(--font-head);font-weight:700;font-size:20px;margin-bottom:4px;}
.contact-card-sub{font-size:13.5px;color:#c7d6bd;margin-bottom:22px;}
.contact-line{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:14.5px;}
.contact-line:last-child{margin-bottom:0;}
.contact-ico{width:32px;height:32px;border-radius:20px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-line small{color:#bcd0b2;font-size:11.5px;}
.contact-line a{font-weight:600;}
.map-embed{
  flex:1;min-height:220px;
}
.consent-embed{
  border-radius:var(--radius-m);overflow:hidden;position:relative;
  border:1px solid var(--line);
}
.consent-embed iframe{display:block;}
.consent-embed.is-consent-loaded .consent-prompt{display:none;}
.map-embed iframe{filter:grayscale(.15) contrast(1.02);}
.consent-prompt{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:10px;padding:24px;background:var(--cream-2);
}
.consent-prompt i{font-size:26px;color:var(--green-800);margin-bottom:4px;}
.consent-prompt p{font-size:13px;color:var(--muted);max-width:320px;margin:0 0 6px;line-height:1.5;}
.consent-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}

.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-m);padding:34px;height:100%;display:flex;flex-direction:column;}
.contact-form .btn[type="submit"]{margin-top:auto;}
.form-field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px;color:var(--ink-soft);}
.form-field .form-control,.form-field .form-select{
  border:1px solid var(--line);border-radius:6px;padding:12px 14px;
  font-size:14.5px;background:#fbfbf9;box-shadow:none;
}
.form-field .form-control:focus,.form-field .form-select:focus{border-color:var(--green-800);background:#fff;box-shadow:none;}
.checkbox-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);cursor:pointer;}
.checkbox-row input{margin-top:3px;accent-color:var(--green-800);}
.checkbox-row a{color:var(--green-800);text-decoration:underline;text-underline-offset:2px;}
.checkbox-row a:hover{color:var(--green-900);}
.form-success{color:var(--green-800);font-weight:600;font-size:14px;text-align:center;margin:14px 0 0;}
.form-error{color:var(--red);font-weight:600;font-size:14px;text-align:center;margin:14px 0 0;}

/* Honeypot-Feld: für echte Besucher unsichtbar und unerreichbar, aber
   weiterhin im DOM vorhanden – einfache Spam-Bots füllen blind alle
   Formularfelder aus und tappen so in die Falle. */
.hp-field{
  position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

/* =====================================================================
   FOOTER
===================================================================== */
.site-footer{background:var(--dark);color:#c9c9c3;padding-top:72px;}
.footer-brand p{font-size:13.5px;color:#93938c;margin:14px 0 0;line-height:1.6;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social-ico{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#c9c9c3;font-size:15px;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.footer-social-ico:hover{background:var(--green-800);color:#fff;transform:translateY(-2px);}
.footer-logo{height:78px;width:auto;}
.footer-heading{font-family:var(--font-head);color:#fff;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;}
.footer-col{display:flex;flex-direction:column;gap:12px;font-size:14px;}
.footer-col a{display:flex;align-items:center;gap:9px;color:#c9c9c3;transition:color .15s ease;}
.footer-col a:hover{color:#fff;}

/* ---------------------------------------------------------------------
   Footer: Google-Rezensionen
   Der Block wird von js/script.js eingeblendet, sobald Rezensionen
   geladen sind (Attribut "hidden" am Container im HTML).
--------------------------------------------------------------------- */
.footer-reviews{display:flex;flex-direction:column;}

/* Bootstrap setzt an den Karussell-Bedienelementen display:flex, was das
   hidden-Attribut überstimmen würde. Innerhalb des Rezensionsblocks gilt
   hidden deshalb ausdrücklich. */
.footer-reviews [hidden]{display:none !important;}

/* --- Freischalt-Overlay (Consent) ---------------------------------- */
/* Die Grundregeln für .consent-embed / .consent-prompt stammen vom
   Karten-Overlay im Kontaktbereich und sind auf hellen Grund ausgelegt.
   Hier im dunklen Footer werden Rahmen, Flächen und Schriftfarben
   überschrieben. Das Ausblenden nach Zustimmung übernimmt weiterhin die
   gemeinsame Regel .consent-embed.is-consent-loaded .consent-prompt. */
.reviews-consent{border:none;border-radius:0;overflow:visible;}

/* Anders als bei der Karte liegt das Overlay hier nicht über einem Inhalt
   mit fester Höhe, sondern bestimmt seine Höhe selbst — deshalb steht es
   im normalen Textfluss statt absolut positioniert. */
.reviews-consent-prompt{
  position:static;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:24px 20px;
  gap:8px;
}
.reviews-consent-prompt i{color:var(--green-700);font-size:22px;margin-bottom:2px;}
.reviews-consent-prompt p{color:#a9a9a2;font-size:13px;max-width:none;}

/* .btn-outline-custom trägt dunkle Schrift für helle Flächen und wäre hier
   auf schwarzem Grund unlesbar. */
.reviews-consent-prompt .btn-outline-custom{
  color:#e6e6e0;border-color:rgba(255,255,255,.3);
}
.reviews-consent-prompt .btn-outline-custom:hover{
  background:var(--green-800);border-color:var(--green-800);color:#fff;
}

/* Die Rezensionen selbst erscheinen erst nach der Zustimmung. */
.reviews-body{display:none;}
.reviews-consent.is-consent-loaded .reviews-body{display:block;}

.reviews-summary{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.reviews-score{font-family:var(--font-head);font-size:17px;font-weight:700;color:#fff;line-height:1;}
.reviews-stars{color:#f5b301;font-size:12px;letter-spacing:.5px;line-height:1;}
.reviews-count{font-size:12.5px;color:#8b8b85;}

.reviews-carousel{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:18px 44px 34px;
  position:relative;
}
/* Die Rezensionen sind unterschiedlich lang. Ohne Gegenmaßnahme würde der
   Footer bei jedem Folienwechsel in der Höhe springen. js/script.js misst
   deshalb die höchste Folie und setzt sie hier als Mindesthöhe ein.
   Der Wert unten greift nur, falls das JavaScript nicht läuft. */
.reviews-carousel .carousel-inner{min-height:132px;}

/* Nur während des Messens: Die Folie wird unsichtbar aus dem Textfluss
   gehoben, damit ihre Höhe ermittelt werden kann, ohne dass sie den
   Container mit aufspannt oder kurz aufblitzt. */
.reviews-carousel .carousel-item.is-measuring{
  display:block !important;
  position:absolute;top:0;left:0;width:100%;
  visibility:hidden;
}

.review-stars{color:#f5b301;font-size:13px;letter-spacing:1px;margin-bottom:9px;}
.review-text{
  font-size:13.5px;line-height:1.65;color:#c9c9c3;margin:0 0 14px;
  /* Lange Rezensionen werden nach fünf Zeilen abgeschnitten, damit alle
     Folien etwa gleich hoch sind. */
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;
}
.review-author{display:flex;align-items:center;gap:10px;}
.review-avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 32px;
  background:var(--green-800);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
.review-name{font-size:13.5px;color:#fff;font-weight:600;line-height:1.3;}
.review-time{font-size:12px;color:#8b8b85;line-height:1.3;}

/* Pfeile: Bootstrap positioniert die Standardknöpfe über die volle Höhe
   und blendet sie halbtransparent ein — hier stattdessen zwei kompakte
   Schaltflächen am unteren Rand. */
.reviews-carousel .reviews-nav{
  width:30px;height:30px;top:auto;bottom:8px;opacity:1;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;background:rgba(255,255,255,.08);
  color:#c9c9c3;font-size:14px;
  transition:background .18s ease,color .18s ease;
}
.reviews-carousel .reviews-nav:hover{background:var(--green-800);color:#fff;}
.reviews-carousel .carousel-control-prev{left:12px;}
.reviews-carousel .carousel-control-next{left:48px;right:auto;}

.reviews-carousel .reviews-dots{
  position:absolute;right:14px;bottom:16px;left:auto;margin:0;justify-content:flex-end;
}
.reviews-carousel .reviews-dots [data-bs-target]{
  width:7px;height:7px;border-radius:50%;border:none;margin:0 0 0 6px;
  background:rgba(255,255,255,.22);opacity:1;
  transition:background .18s ease,transform .18s ease;
}
.reviews-carousel .reviews-dots .active{background:var(--green-700);transform:scale(1.25);}

/* Der Link sitzt in derselben Zeile wie Note und Anzahl und wird durch
   margin-left:auto an den rechten Rand geschoben. */
.reviews-link{
  display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-size:13px;color:#8b8b85;transition:color .15s ease;white-space:nowrap;
}
.reviews-link:hover{color:#fff;}

@media (max-width:991.98px){
  /* Unterhalb von 992px stapelt sich der Footer in drei Bänder:
     Marke — Navigation+Kontakt — Rezensionen. Der vertikale Zeilenabstand
     wird von 24px (gy-4) auf 40px erhöht, damit die drei Bereiche klar
     voneinander abgesetzt sind.

     Der Weg über --bs-gutter-y ist hier der richtige: Bootstrap setzt
     daraus den oberen Außenabstand jeder Spalte. Navigation und Kontakt
     stehen nebeneinander im selben Band und rücken deshalb nicht
     auseinander — nur die Bänder untereinander. */
  .site-footer .row{--bs-gutter-y:2.5rem;}
}

/* Ab 768px stehen je zwei Blöcke nebeneinander: Marke + Navigation in der
   ersten Reihe, Kontakt + Rezensionen in der zweiten. Das Logo muss dort
   in eine halbe Spalte passen — bei fester Höhe von 78px wäre es rund
   269px breit und würde überlaufen. */
@media (min-width:768px) and (max-width:991.98px){
  .footer-logo{height:auto;width:auto;max-width:100%;max-height:78px;}
}

/* Unterhalb von 768px läuft der Markenblock über die volle Breite und
   wird dort mittig gesetzt — Logo, Text und die Social-Icons. Ab 768px
   steht er neben der Navigation und bleibt deshalb linksbündig, sonst
   liefe die Ausrichtung der beiden Spalten auseinander. */
@media (max-width:767.98px){
  .footer-brand{text-align:center;}
  .footer-brand .footer-social{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .reviews-carousel .carousel-item{transition:none;}
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;
  align-items:center;font-size:13px;color:#8b8b85;flex-wrap:wrap;gap:10px;
}
.footer-bottom p{margin:0;display:flex;align-items:center;gap:7px;}
.footer-legal-links{display:flex;align-items:center;gap:18px;}
.footer-legal-link{
  position:relative;background:none;border:none;padding:0;color:#8b8b85;font-size:13px;
  cursor:pointer;transition:color .15s ease;
}
.footer-legal-link:hover{color:#fff;}
.footer-legal-link + .footer-legal-link::before{
  content:"";position:absolute;left:-9px;top:1px;bottom:1px;width:1px;background:rgba(255,255,255,.2);
}
.footer-cookie-link{
  background:none;border:none;padding:0;color:#8b8b85;font-size:13px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;transition:color .15s ease;
}
.footer-cookie-link:hover{color:#fff;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}

/* =====================================================================
   RECHTSTEXT-SEITEN (Impressum, Datenschutz)
   Vereinfachter Header ohne Navigationspunkte – nur Logo und ein
   "Zurück zur Startseite"-Button. Nutzt dieselbe .site-header-Basis,
   daher optisch konsistent mit der Startseite.
===================================================================== */
.legal-header .navbar{padding:18px 0;}
.legal-header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.legal-header .btn i{font-size:13px;}

.legal-page{padding:64px 0 100px;background:var(--cream);}
.legal-page-head{max-width:720px;margin:0 auto 48px;}
.legal-page-head .eyebrow{margin-bottom:14px;}
.legal-page-head h1{font-size:clamp(30px,4vw,40px);margin-bottom:10px;}
.legal-page-head p{color:var(--muted);font-size:15px;margin:0;}

.legal-content{
  max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-m);padding:44px clamp(24px,5vw,56px);
}
.legal-content h2{font-size:20px;margin:36px 0 14px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{font-size:16px;margin:22px 0 10px;}
.legal-content p{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0 0 14px;}
.legal-content ul{color:var(--ink-soft);font-size:15px;line-height:1.7;margin:0 0 14px;padding-left:20px;}
.legal-content li{margin-bottom:6px;}
.legal-content a{color:var(--green-800);text-decoration:underline;text-underline-offset:2px;}
.legal-content a:hover{color:var(--green-900);}
.legal-content strong{color:var(--ink);}
.legal-content hr{border:none;border-top:1px solid var(--line);margin:36px 0;}
.legal-content .legal-note{
  background:var(--cream-2);border-left:3px solid var(--green-800);border-radius:0 10px 10px 0;
  padding:14px 18px;font-size:13.5px;color:var(--muted);margin:0 0 28px;line-height:1.6;
}
@media (max-width:575.98px){
  .legal-content{padding:30px 20px;}
}