.elementor-1730 .elementor-element.elementor-element-aad5a67{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1730 .elementor-element.elementor-element-552fe78{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:2rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;}.elementor-1730 .elementor-element.elementor-element-77eec7e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1730 .elementor-element.elementor-element-fcae47c{width:100%;max-width:100%;}.elementor-1730 .elementor-element.elementor-element-fcae47c.elementor-element{--align-self:center;}.elementor-1730 .elementor-element.elementor-element-b5a0547{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1730 .elementor-element.elementor-element-b5a0547:not(.elementor-motion-effects-element-type-background), .elementor-1730 .elementor-element.elementor-element-b5a0547 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0B1320;}.elementor-1730 .elementor-element.elementor-element-b5a0547.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1730:not(.elementor-motion-effects-element-type-background), .elementor-1730 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-1730 .elementor-element.elementor-element-77eec7e{--width:100%;}.elementor-1730 .elementor-element.elementor-element-b5a0547{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-552fe78 *//* ===========================
   KS Footer – Topbanner (Logo + Reviews)
   =========================== */

.ks-footer__banner{
  width: 100%;
  background: #1E3A8A;                /* Bannerfarbe */
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

/* Linker Teil: Logo + Claim nebeneinander */
.ks-footer__banner-left{
  display: flex;
  align-items: center;                /* Claim mittig zum Logo */
  gap: 16px;
}
.ks-footer__banner-left img{
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.ks-footer__banner-left .ks-footer__tag{
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;                   /* Bold */
  font-family: Inter, sans-serif;
  color: #F9FAFB;                     /* heller Haupttext */
}

/* Rechter Teil: Reviews (Shortcode-Widget) */
.ks-footer__banner-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
  min-width: 220px;
}
.ks-footer__banner-right .ks-fr-stars{
  font-size: 18px;
  letter-spacing: 2px;
  color: #FFB400;
}
.ks-footer__banner-right .ks-fr-text{
  font-size: 14px;
  color: #D1D5DB;
}
.ks-footer__banner-right .ks-fr-text strong{
  color: #F9FAFB;
}

/* Responsive */
@media(max-width: 680px){
  .ks-footer__banner{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
  }
  .ks-footer__banner-left{
    gap: 12px;
  }
  .ks-footer__banner-right{
    justify-content: flex-start;
    flex: unset;
    min-width: auto;
  }
}

/* KS Footer Banner – Responsive/Robust Addons */

/* 0) Nie über Menüs/Overlays legen */
.ks-footer__banner{ position: relative; z-index: 0; }

/* 1) Flüssige Größen & Luft */
.ks-footer__banner{
  padding: clamp(14px, 2.8vw, 20px) clamp(14px, 3.2vw, 24px);
  gap: clamp(12px, 2.4vw, 20px);
}

/* 2) Logo skaliert weich mit */
.ks-footer__banner-left img{
  height: clamp(32px, 6vw, 44px);
}

/* 3) Claim: bessere Umbrüche + weicher Scale */
.ks-footer__banner-left .ks-footer__tag{
  font-size: clamp(14px, 1.4vw, 16px);
  max-width: 62ch;                /* lange Claims umbrechen */
  overflow-wrap: anywhere;
}

/* 4) Review-Text & Sterne skalieren mit */
.ks-footer__banner-right .ks-fr-stars{ font-size: clamp(16px, 2.6vw, 18px); }
.ks-footer__banner-right .ks-fr-text{ font-size: clamp(13px, 1.3vw, 14px); }

/* 5) Tablet: zwei Reihen, linksbündig */
@media (max-width: 900px){
  .ks-footer__banner{ flex-wrap: wrap; }
  .ks-footer__banner-right{ flex: 1 1 100%; justify-content:flex-start; }
}

/* 6) Mobil: sauber stapeln, volle Breite */
@media (max-width: 680px){
  .ks-footer__banner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .ks-footer__banner-right{
    justify-content: flex-start;
    flex: initial;
    min-width: 0;
  }
}

/* 7) Sehr kleine Phones: noch kompakter */
@media (max-width: 360px){
  .ks-footer__banner-left{ gap: 10px; }
  .ks-footer__banner-right .ks-fr-stars{ letter-spacing: 1px; }
}

/* 8) A11y: Fokus sichtbar, ohne harte Farbe */
.ks-footer__banner a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
  border-radius: 8px;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77eec7e *//* ===========================
   KS Footer – Safe / No-Overflow
   (nur .ks-footer-Bereich, ohne Payment-Bar)
   =========================== */

/* Tokens */
:root{
  --ks-bg: #0E1724;
  --ks-bg-soft: #101B2B;
  --ks-border: rgba(255,255,255,.06);
  --ks-text: #E8EEF7;
  --ks-text-soft: #CFE0F6;
  --ks-text-dim: #AFC3F9;
  --ks-accent: #1E3A8A;
  --ks-accent-2: #23449C;
  --ks-orange: #FF7A1A;
}

/* ----- Wrapper: KEIN Out-of-bounds, KEINE Scrollbar ----- */
.ks-footer{
  position: relative;
  box-sizing: border-box;
  background: transparent;
  color: var(--ks-text);
  border: 0;
  box-shadow: none;

  /* Innensektion bleibt “boxed” durch max-width auf dem inneren Container,
     der äußere .ks-footer selbst erzeugt KEIN Overflow */
  padding: 42px 18px 0;
  overflow: clip;          /* modernes Clipping → verhindert Scrollbalken */
  /* Fallback für ältere Browser: */
  overflow-x: hidden;
}

/* Links */
.ks-footer a{ color:#10B981; text-decoration:none; }
.ks-footer a:hover{ color:#10B981; filter:brightness(1.08); }

/* Innenbreite (boxed) */
.ks-footer__inner,
.ks-footer__bottom-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* =====================
   GRID-CARD (eigentliche Footer-Karte)
   ===================== */
.ks-footer__grid{
  position: relative;
  box-sizing: border-box;

  display: grid;
  gap: 22px;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  justify-content: center;     /* Karte mittig halten */
  justify-items: center;       /* Spalteninhalte mittig */
  text-align: center;

  background: var(--ks-bg-soft);
  border: 1px solid var(--ks-border);
  border-radius: 18px;
  padding: 24px;

  /* sanfter Innen-Glow */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    1 10px 24px rgba(0,0,0,.35);

  /* WICHTIG: Alles innerhalb der Karte bleibt im Rahmen, kein Overflow nach außen */
  overflow: hidden;

  /* isoliert Layering, damit ::before nicht “ausläuft” */
  isolation: isolate;
}

/* Weicher, großflächiger Glow – aber innerhalb der Karte gecropped */
.ks-footer__grid::before{
  content:"";
  position:absolute;
  inset: -60px;              /* viel Raum innerhalb der Karte */
  z-index:-1;
  border-radius: 48px;

  /* breiter Verlauf, sieht nicht “hart” aus */
  background:
    radial-gradient(1200px 600px at 50% -20%,
      rgba(30,58,138,.18), rgba(30,58,138,0) 60%),
    radial-gradient(900px 500px at 20% 120%,
      rgba(18,114,204,.14), rgba(18,114,204,0) 65%);
  filter: blur(22px);
  pointer-events: none;
}

/* Spalten */
.ks-footer__head{
  margin:0 0 10px;
  font-weight:800;
  font-size:16px;
  color:var(--ks-text);
}
.ks-footer__list{ list-style:none; margin:0; padding:0; }
.ks-footer__list li{ margin:6px 0; color:var(--ks-text-soft); }

/* Kontakt-Links */
.ks-footer__contact a{ color:#10B981; font-weight:700; }
.ks-footer__contact a:hover{ color:#10B981; filter:brightness(1.08); }

/* CTA Gewerbekunden – Orange, Text immer weiß */
.ks-footer__cta{
  margin-top:12px;
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 16px;
  border-radius:12px;
  background:var(--ks-orange);
  color:#fff !important;
  font-weight:800;
  box-shadow:0 10px 22px rgba(13,59,102,.25);
  transition:transform .18s, box-shadow .22s, background .25s, filter .2s;
}
.ks-footer__cta:hover{
  transform:translateY(-1px);
  filter:saturate(.95) brightness(.98);
  box-shadow:0 14px 26px rgba(13,59,102,.32);
}

/* =====================
   Bottom-Zeile (falls genutzt)
   ===================== */
.ks-footer__bottom{
  padding: 12px 0 28px;
}
.ks-footer__bottom-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 0 0;                   /* keine Seiten-Paddings nötig */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ks-text-dim);
  font-size: 13px;
  border-top: 1px dashed var(--ks-border);
}
.ks-footer__mini{ display: inline-flex; gap: 14px; }
.ks-footer__mini a{ color: #10B981; }
.ks-footer__mini a:hover{ color: #10B981; filter: brightness(1.08); }

/* =====================
   Responsive
   ===================== */
@media (max-width: 1100px){
  .ks-footer__grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width: 640px){
  .ks-footer{ padding: 32px 12px 0; }

  .ks-footer__grid{
    grid-template-columns: minmax(240px, 1fr);
    gap: 18px;
    padding: 18px;
  }

  .ks-footer__bottom-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* === KS Footer – Responsive Add-ons (append last) === */

/* 0) Nie über Menüs/Offcanvas legen */
.ks-footer{ position: relative; z-index: 0; }

/* 1) Padding & Abstände fluid + Safe-Area unten */
.ks-footer{
  padding: clamp(28px,4.5vw,42px) clamp(14px,3.2vw,18px) env(safe-area-inset-bottom, 0);
}
.ks-footer__grid{
  gap: clamp(14px, 2.2vw, 22px);
  padding: clamp(18px, 2.2vw, 24px);
  /* Etwas flexibler bei mittleren Breiten */
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

/* 2) Typo skaliert sanft */
.ks-footer__head{ font-size: clamp(15px, 1.6vw, 16px); }
.ks-footer__list li{ font-size: clamp(13px, 1.4vw, 14px); }
.ks-footer__mini{ gap: clamp(10px, 2vw, 14px); }

/* 3) Lange Linktexte brechen robust */
.ks-footer__list a,
.ks-footer__mini a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) CTA – bessere Touch-Ziele + Mobile vollbreit */
.ks-footer__cta{
  min-height: 42px;
  padding: 0 clamp(14px, 2.6vw, 18px);
}
@media (max-width: 640px){
  .ks-footer__cta{
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
}

/* 5) Grid-Breakpoints feiner staffeln */
@media (max-width: 1100px){
  .ks-footer__grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 780px){
  .ks-footer__grid{ grid-template-columns: repeat(2, minmax(200px, 1fr)); }
}
@media (max-width: 640px){
  .ks-footer__grid{ grid-template-columns: minmax(200px, 1fr); }
}

/* 6) Bottom-Zeile: wrapping & Stack auf klein */
.ks-footer__bottom-inner{
  flex-wrap: wrap;
  row-gap: 10px;
}
@media (max-width: 640px){
  .ks-footer{ padding-left: 12px; padding-right: 12px; }
  .ks-footer__bottom-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* 7) Motion reduzieren auf Touch/Mini (sanftere Hover) */
@media (hover: none), (max-width: 640px){
  .ks-footer__cta:hover{ transform: none; box-shadow: 0 10px 22px rgba(13,59,102,.25); }
}

/* 8) Fokus klar sichtbar (A11y) */
.ks-footer a:focus-visible,
.ks-footer__cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
  border-radius: 10px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d215b47 *//* ===========================
   KS Footer – Payment & Legal Bar (Container-frei)
   =========================== */

.ks-footer__payments-bar {
  width: 100%;                    /* füllt die Elementor-Sektion */
  background: #0B1320;
  color: #D1D5DB;
  font-size: 14px;
}

.ks-footer__payments-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.ks-footer__payments {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: #AFC3F9;
  font-size: 22px;
  line-height: 1;
}

.ks-footer__legal {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ks-footer__legal a {
  color: #10B981;
  text-decoration: none;
}
.ks-footer__legal a:hover {
  color: #10B981;
  filter: brightness(1.08);
}

.ks-footer__copyright {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  font-size: 13px;
  color: #AFC3F9;
  text-align: center;
  border-top: 1px dashed rgba(255,255,255,.06); /* Nur hier gestrichelt */
}

/* Responsive */
@media (max-width: 640px) {
  .ks-footer__payments-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ks-footer__payments {
    font-size: 20px;
  }
  .ks-footer__legal {
    font-size: 13px;
  }
}

/* === KS Footer – Payment & Legal Bar: Responsive Add-ons (append last) === */

/* 0) Nie über Offcanvas/Menüs liegen */
.ks-footer__payments-bar{ position: relative; z-index: 0; }

/* 1) Fluid Paddings + Safe-Area */
.ks-footer__payments-inner{
  padding: clamp(10px, 2.4vw, 16px) clamp(16px, 4vw, 24px);
  gap: clamp(12px, 3vw, 24px);
}

/* 2) Zahlungs-Icons: sauber umbrechen, gleichmäßige Zeilenhöhe */
.ks-footer__payments{
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: clamp(10px, 2.2vw, 16px);
  line-height: 1;                 /* konsistente Icon-Ausrichtung */
}
.ks-footer__payments img,
.ks-footer__payments svg{
  height: clamp(18px, 2.2vw, 22px);
  width: auto;
  max-height: 28px;
  display: block;
}

/* 3) Legal-Links: weicher Umbruch + Klickfläche */
.ks-footer__legal{
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 18px);
}
.ks-footer__legal a{
  padding: 2px 0;                 /* größere Touch-Zone, ohne Layoutsprung */
  overflow-wrap: anywhere;        /* lange Wörter/URLs umbrechen */
}

/* 4) Layout-Breakpoints */
@media (max-width: 860px){
  .ks-footer__payments-inner{
    flex-wrap: wrap;
    justify-content: center;      /* mittig, wenn 2 Zeilen */
  }
  .ks-footer__legal{
    justify-content: center;
  }
}

/* Haupt-Mobile */
@media (max-width: 640px){
  .ks-footer__payments-inner{
    flex-direction: column;
    align-items: stretch;         /* volle Breite für Inhalt */
    gap: 12px;
  }
  .ks-footer__payments{
    justify-content: flex-start;  /* linksbündig wie Legal */
  }
  .ks-footer__legal{
    font-size: 13px;
    justify-content: flex-start;
  }
}

/* Extra-klein */
@media (max-width: 380px){
  .ks-footer__payments{
    column-gap: 10px;
  }
  .ks-footer__payments img,
  .ks-footer__payments svg{
    height: 16px;                 /* Icon leicht kleiner, verhindert Wrap-Chaos */
  }
}

/* 5) Copyright-Zeile: Lesbarkeit + Safe-Area unten */
.ks-footer__copyright{
  padding: clamp(8px, 2.2vw, 12px) clamp(16px, 4vw, 24px) calc(env(safe-area-inset-bottom, 0) + 8px);
  font-size: clamp(12px, 1.4vw, 13px);
  color: #AFC3F9;
  text-align: center;
  word-break: break-word;         /* sehr lange Firmennamen/Disclaimer */
}

/* 6) A11y: Fokus klar sichtbar */
.ks-footer__legal a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(16,185,129,.25);
  border-radius: 6px;
}

/* 7) Motion reduzieren auf Touch */
@media (hover: none){
  .ks-footer__legal a:hover{ filter: none; }
}/* End custom CSS */