/* ---------- Farb- und Typo-Variablen (THEMING) ---------- */

/* =======================================================
   FINANZKREDIT24 — Light Theme (Blau / Hellblau / Grün)
   Alles in einer Datei, variablenbasiert & responsiv
   ======================================================= */

/* ---------- Farb- und Typo-Variablen ---------- */


/* Basistokens (werden vom Theme überschrieben) */
:root{
  --color-primary:       #527EDC;
  --color-primary-dark:  #244A99;
  --color-accent:        #2AA952;

  --color-bg:            #ffffff;
  --color-bg-soft:       #E7F0FF;
  --color-text:          #333333;
  --color-muted:         #667085;

  /* Oberflächen & Ränder (Semantik) */
  --surface:             rgba(0,0,0,0.04);
  --surface-strong:      rgba(0,0,0,0.06);
  --surface-border:      rgba(0,0,0,0.12);
  --surface-border-soft: rgba(36,74,153,.18);

  /* Links / Navigation */
  --link:                #527EDC;
  --link-active:         #5da9ff;
  --nav-text:            #2b2f36;
  --nav-text-active:     #244A99;

  --shadow-soft:         0 4px 16px rgba(0,0,0,.06);
  --radius:              10px;
  --font-ui:             system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-body:           Verdana, Geneva, Tahoma, sans-serif;
  
  --heading-color: #1F2937;
  --startbox-text: var(--color-text); 
   --nav-bg: #244A99;
    --bs-dark-rgb: 36, 74, 153; /* dein Blau (#244A99) als RGB */
    
      --ad-bg: #f3f5f7;  /* helles Grau (#ccc wäre zu dunkel für light) */
  --ad-text: #121826;
    --ad-border: rgba(0,0,0,0.06);
    
      --btn-bg:            #FF5C8D;   /* gleiches Rosa, wirkt kräftig auf Weiß */
  --btn-bg-hover:      #E44C7E;   /* leicht dunkler für Hover-Kontrast */
  --btn-text:          #FFFFFF;   /* weiß bleibt gut lesbar */
  --btn-shadow:        rgba(255, 92, 141, 0.3);
}



/* Light Theme (Default) */
:root,
:root[data-theme="light"]{
  --color-bg:            #ffffff;
  --color-bg-soft:       #F5F7FB;
  --color-text:          #1F2937;
  --color-muted:         #667085;

  --surface:             rgba(0,0,0,0.04);
  --surface-strong:      rgba(0,0,0,0.06);
  --surface-border:      rgba(0,0,0,0.12);
  --surface-border-soft: rgba(36,74,153,.18);

  --link:                var(--color-primary);
  --link-active:         #3D8BFF;
  --nav-text:            #1f2937;
  --nav-text-active:     #244A99;
  
  --heading-color: #1F2937;
  --startbox-text: var(--color-text)
  
    --nav-bg:           #244A99;   /* Markenblau */
  --nav-text:         #f5f7fa;   /* heller Text */
  --nav-text-active:  #5da9ff;   /* Hover / Active-Link */
    --bs-dark-rgb: 36, 74, 153; /* dein Blau (#244A99) als RGB */
    
      --ad-bg: #f3f5f7;  /* helles Grau (#ccc wäre zu dunkel für light) */
  --ad-text: #121826;
    --ad-border: rgba(0,0,0,0.06);
       /* Markenfarben für Buttons */
      --btn-bg:            #FF5C8D;   /* gleiches Rosa, wirkt kräftig auf Weiß */
  --btn-bg-hover:      #E44C7E;   /* leicht dunkler für Hover-Kontrast */
  --btn-text:          #FFFFFF;   /* weiß bleibt gut lesbar */
  --btn-shadow:        rgba(255, 92, 141, 0.3);
}

/* Dark Theme */
:root[data-theme="dark"]{
  --color-bg:            #ffffff;
  --color-bg-soft:       #F5F7FB;
  --color-text:          #1F2937;
  --color-muted:         #667085;

  --surface:             rgba(0,0,0,0.04);
  --surface-strong:      rgba(0,0,0,0.06);
  --surface-border:      rgba(0,0,0,0.12);
  --surface-border-soft: rgba(36,74,153,.18);

  --link:                var(--color-primary);
  --link-active:         #3D8BFF;
  --nav-text:            #1f2937;
  --nav-text-active:     #244A99;
  
  --heading-color: #1F2937;
  --startbox-text: var(--color-text)
  
    --nav-bg:           #244A99;   /* Markenblau */
  --nav-text:         #f5f7fa;   /* heller Text */
  --nav-text-active:  #5da9ff;   /* Hover / Active-Link */
    --bs-dark-rgb: 36, 74, 153; /* dein Blau (#244A99) als RGB */
    
      --ad-bg: #f3f5f7;  /* helles Grau (#ccc wäre zu dunkel für light) */
  --ad-text: #121826;
    --ad-border: rgba(0,0,0,0.06);
       /* Markenfarben für Buttons */
      --btn-bg:            #FFAEC9;   /* helleres Rosa für bessere Lesbarkeit */
  --btn-bg-hover:      #FF5C8D;   /* kräftiger Hover-Ton */
  --btn-text:          #1F1F1F;   /* dunkler Text für hellen Button */
  --btn-shadow:        rgba(255, 174, 201, 0.35);
}




/* rosa Theme Reiseportal */
:root[data-theme="rosa"]{
  /* Grundfarben */
  --color-bg:            #ffffff;   /* Weiß */
  --color-bg-soft:       #F5F7FB;   /* Sehr helles Grau-Blau */
  --color-text:          #1F2937;   /* Dunkles Grau-Blau */
  --color-muted:         #667085;   /* Gedämpftes Mittelgrau */

  /* Oberflächen & Rahmen */
  --surface:             #0000000A; /* Schwarz mit 4% Deckkraft */
  --surface-strong:      #0000000F; /* Schwarz mit 6% Deckkraft */
  --surface-border:      #0000001F; /* Schwarz mit 12% Deckkraft */
  --surface-border-soft: #244A992E; /* Weiches Markenblau mit 18% Deckkraft */


  /* Text & Links */
  --link:                var(--color-primary);
  --link-active:         #3D8BFF;   /* Mittelblau */
  --heading-color:       #1F2937;   /* Dunkles Grau-Blau */
  --startbox-text:       var(--color-text);

  /* Navigation */
  --nav-bg:              #FF3572;   /* Markenrosa */
  --nav-text:            #F5F7FA;   /* Sehr helles Grau (fast Weiß) */
  --nav-text-active:     #FFAEC9;   /* Hellrosa Hover-Farbe */
  --bs-dark-rgb:         #FF4A81; /* Markenrosa (#FF5C8D) als RGB */

  /* Anzeigen / Karten */
  --ad-bg:               #F3F5F7;   /* Helles Grau-Blau */
  --ad-text:             #121826;   /* Sehr dunkles Blau-Grau */
  --ad-border:           #0000000F; /* Schwarz mit 6% Deckkraft */
  
    /* Markenfarben für Buttons */
  --btn-bg:            #FF5C8D;   /* Primärrosa */
  --btn-bg-hover:      #FFAEC9;   /* Hellrosa Hover */
  --btn-text:          #FFFFFF;   /* Weißer Text */
  --btn-shadow:        rgba(255, 92, 141, 0.35); /* dezenter Schlagschatten */
}

/* Für helle Hintergründe: etwas stärkere Farbe bei Hover */
[data-theme="rosa"] .navbar {
  background-color: var(--nav-bg); /* #FF5C8D */
}
/* Nur für die Seite 'pauschalreise' – Hintergrund anpassen */
.page-pauschalreise {
  --surface-strong: #ffffff; /* weißer Hintergrund für diese Seite */
  background-color: var(--surface-strong);
}







/* Headings nur über Variable färben */
h1, h2, h3 {
  font-weight: 600;
  color: var(--heading-color);
}

/* ---------- CSS anpassbar (nur Farben auf Variablen umgestellt) ---------- */

/* Reset für Haupt-Wrapper: kein helles BG */
main, .main, .content, .content-wrapper, .with-right-rail,
.container, .container-fluid, .row, section, article {
  background: transparent !important;
}

/* Seite (nur Farben) */
html, body {
  background: var(--color-bg) !important;
  color: var(--color-text);
}

/* Panels/Boxen */
.card,
.startbox,
.startbox-hero {
  background: var(--surface-strong) !important;
  border: 1px solid var(--surface-border);
}

/* =====================================================
   Buttons im Rosa-Theme
   ===================================================== */



/* Hauptbutton */
.btn-primary {
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 600;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px var(--btn-shadow);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-text);
  box-shadow: 0 4px 10px var(--btn-shadow);
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Outline-Variante */
.btn-outline-primary {
  background-color: transparent;
  border: 2px solid var(--btn-bg);
  color: var(--btn-bg);
  font-weight: 600;
  transition: all 0.25s ease;
}
.btn-outline-primary:hover {
  background-color: var(--btn-bg);
  border-color: var(--btn-bg);
  color: var(--btn-text);
}


/* Ad Placeholder */
.ad-placeholder {
  width: 180px;
  background: var(--ad-bg);
  border: 1px solid var(--ad-border);
  border-radius: 6px;
  color: var(--ad-text);
  font-size: 13px;
  font-weight: 600;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  font-family: Verdana, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* Hero-Text nicht zu blass */
.startbox-hero .box_text p,
.startbox-hero .box_lists li {
  color: var(--color-text);
}

/* =========================================================
   🔷 NAVBAR – FINANZKREDIT24
   ========================================================= */

/* === Navbar Text & Links === */
/* =====================================================
   NAVBAR – Rosa Theme mit Underline-Hover-Effekt
   ===================================================== */

.navbar .nav-link {
  position: relative;
  color: var(--nav-text);
  transition: color 0.25s ease-in-out;
  padding-bottom: 4px; /* etwas Platz für die Linie */
}

/* Linie (unsichtbar im Normalzustand) */
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--btn-bg-hover); /* dein kräftiges Rosa (#FF5C8D) */
  transition: width 0.25s ease-in-out;
  border-radius: 2px;
}

/* Hover- & Active-Zustand: Farbe + animierte Linie */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--btn-bg-hover); /* Rosa Textfarbe */
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after,
.navbar .nav-link.active::after {
  width: 100%;
}



/* === Logo === */
.navbar .brand-logo {
  display: block;
  height: 40px; /* passt gut neben Text */
}

/* === Brandbereich modernisiert === */
.navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  text-decoration: none;
}

/* === Text neben Logo === */
/* Sichtbar auf allen Geräten, nur kleiner auf Handy */
.navbar .brand-text {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 1.1rem;
  white-space: nowrap;
  color: var(--nav-text, #fff);
}



.handschrift {
  font-family: 'Arial', cursive;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
}



/* Tablet (z. B. iPad) */
@media (max-width: 1024px) {
  .navbar .brand-text {
    font-size: 0.9rem;
  }
}

/* Smartphones */
@media (max-width: 600px) {
  .navbar .brand-text {
    font-size: 0.75rem;  /* kleiner, aber sichtbar */
    letter-spacing: 0.2px;
  }
}




/* === Mobile Darstellung === */
@media (max-width: 768px) {
  .navbar .brand-logo {
    height: 50px;
  }

  .navbar .brand-text {
    font-size: 0.95rem; /* etwas kleiner */
  }
}

@media (max-width: 480px) {
  .navbar .brand-logo {
    height: 42px;
  }

  .navbar .brand-text {
    font-size: 0.85rem; /* noch etwas kleiner für Handy */
    letter-spacing: 0.2px;
  }
}


/* NAVBAR wirklich bis zum Rand: Container darf nicht begrenzen */
html[data-theme="rosa"] nav.navbar > .container,
html[data-theme="rosa"] nav.navbar > .container-fluid{
  max-width: none !important;
  width: 100% !important;
  padding-left: 12px !important;   /* Abstand zum Rand: hier einstellen */
  padding-right: 12px !important;
}

/* Falls irgendwo ein Wrapper die Navbar zentriert: raus damit */
html[data-theme="rosa"] nav.navbar{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Cards / Inputs */
.card { background: var(--surface-strong); border: 1px solid var(--surface-border); }
.form-control, .form-select {
  background: var(--surface-strong);
  border: 1px solid var(--surface-border);
  color: var(--nav-text);
}
.form-control:focus { background: var(--surface); color: #f5f7fa; }

/* Cookie Banner */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: -200px;
  background: rgba(0,0,0,0.85);
  color: #f5f7fa;
  transition: bottom .35s ease; z-index: 1080;
}
.cookie-banner.show { bottom: 0; }

/* Layout mit rechter Sidebar (sichtbar ab LG) */
@media (min-width: 992px) {
  .with-right-rail { display: grid; grid-template-columns: 1fr 220px; gap: 1.5rem; }
}

/* Sidebar-Container */
.sidebar-ads {
  padding: 10px;
  margin-top: -20px;
  margin-bottom: 10px;
}

/* Ads */
.ad-item { margin-bottom: 10px; }
.ad-item img, .ad-item iframe { max-width: 100%; height: auto; display: block; }

/* === Boxen allgemein === */
/* Anwendung */
.startbox {
  position: relative;
  background: var(--surface-strong);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 8px 9px 10px;
  color: var(--startbox-text);
}

.startbox .box_title {
  position: relative;
  padding-right: 80px;
  margin-bottom: 10px;
}

.startbox .box_title h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.box_title .title-icon { height: 30px; }

.startbox .infoCircle {
  position: absolute;
  top: 0; right: 0;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-primary);
  color: #f5f7fa;
  font-size: 12px; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4px; white-space: normal;
}
.startbox .infoCircle b { font-size: 14px; line-height: 1.1; }

.startbox .box_text { margin-bottom: 10px; }
.startbox .box_text2 { margin-bottom: 1px; }
.startbox .box_bulletpoints span {
  display: inline-block;
  margin-bottom: 6px;
  color: #cfe2ff;
}

.startbox a.btn { font-weight: 600; }

/* Mobile */
@media (max-width: 575.98px) {
  .startbox .infoCircle { width: 64px; height: 64px; font-size: 11px; }
  .startbox .box_title { padding-right: 68px; }
}

/* === Startbox: Bild links, Liste rechts (Bootstrap bleibt) === */

/* Basis: mobile-first (untereinander) */
.startbox-hero .box_lists {
  row-gap: 20px; /* zusätzlicher vertikaler Abstand für mobile */
}

/* Linke Spalte NICHT als Flex-Container erzwingen */
.startbox-hero .box_lists .text-center {
  display: block !important;
  text-align: center;
}

/* Bild: volle Spaltenbreite */
.startbox-hero .box_lists img {
  display: block;
  width: 100% !important;
  max-width: none !important;  /* keine künstliche Kappe */
  height: auto !important;
  margin: 0 auto;
}

/* Liste: saubere Typo */
.startbox-hero .box_lists ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  line-height: 1.7;
  font-size: 1rem;
}
.startbox-hero .box_lists li {
  margin: 2px 0; /* mobiler Grundabstand */
  /* optional: Farbe im Hero */
  /* color: #cfe2ff; */
}

/* Desktop/Tablet: 50/50-Spalten + vertikal mittig rechts */
@media (min-width: 768px) {
  .startbox-hero .box_lists {
    flex-wrap: nowrap;          /* zwei Spalten nebeneinander */
    column-gap: 40px;
    align-items: stretch;
  }
  .startbox-hero .box_lists > .col-12.col-md-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .startbox-hero .box_lists > .col-12.col-md-6:last-child {
    display: flex;
    align-items: center;        /* Liste vertikal mittig neben dem Bild */
    text-align: left;
    padding-right: 5%;
    margin-left: 20px;          /* Abstand zum Bild */
  }
  .startbox-hero .box_lists li {
    margin-bottom: 6px;         /* größerer Abstand nur auf Desktop */
  }
}

/* Kleines Handy: Badge/Title-Abstände (falls vorhanden) */
@media (max-width: 575.98px) {
  .startbox-hero .box_title { padding-right: 68px; }
}

/* =====================================================
   3 BOXEN DARUNTER (Neubau / Modernisierung / Gebraucht)
   Nur auf die 3-Boxen-Row anwenden – NICHT auf den Hero!
   ===================================================== */
@media (min-width: 992px){
  .home-boxes .row.g-3:not(.box_lists) {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content:center;
    margin-inline:auto;
    max-width:1320px;
  }

  .home-boxes .row.g-3:not(.box_lists) > [class*="col-"] {
    width: calc((100% - 2 * 16px) / 3) !important;
    flex: 0 0 calc((100% - 2 * 16px) / 3) !important;
    max-width: calc((100% - 2 * 16px) / 3) !important;
    padding: 0 !important;
    min-width: 0;
    box-sizing: border-box;
  }
}

@media (max-width: 991.98px){
  .home-boxes .row.g-3:not(.box_lists) > [class*="col-"]{
    width:      calc((100% - 16px) / 2) !important;
    flex-basis: calc((100% - 16px) / 2) !important;
    max-width:  calc((100% - 16px) / 2) !important;
  }
}

@media (max-width: 575.98px){
  .home-boxes .row.g-3:not(.box_lists) > [class*="col-"]{
    width: 100% !important;
    flex-basis: 100% !important;
    max-width:  100% !important;
  }
}

/* Struktur und Verhalten der Boxen */
.home-boxes .startbox {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-boxes .startbox .box_text,
.home-boxes .startbox .box_text2,
.home-boxes .startbox .box_bulletpoints {
  flex-grow: 1;
}

/* =====================================================
   HERO-BEREICH: ENDE
   ===================================================== */



.ad-header {
  width: 100%;
  background-color: #2a4eff;
  color: #f5f7fa;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Inhalt */
.hotline-text {
  padding: 12px 14px; /* etwas mehr Luft */
  font-size: 0.9em;
  text-align: center;
  color: #222;
  line-height: 1.5; /* etwas besser lesbar */
}

.hotline-text strong {
  color: #000;
}

.hotline-company {
  font-size: 0.82em;
  display: block;
  color: #333;
  font-weight: 700;
  margin-top: 10px; /* etwas mehr Abstand nach oben */
  margin-bottom: 4px;
}

.hotline-company + .hotline-company {
  font-weight: 500;
  color: #555;
  margin-top: 0; /* kein doppelter Abstand zwischen den beiden */
}

/* Telefonnummer */
.hotline-number {
  font-size: 1.25em;
  color: #00a85a; /* kräftiges Grün */
  font-weight: 700;
  text-decoration: none;
}

.hotline-number:hover {
  text-decoration: underline; /* bessere Usability */
}

/* Öffnungszeiten */
.hotline-hours {
  font-size: 0.8em;
  color: #555;
  display: block;
  margin-top: 6px;
  letter-spacing: 0.2px;
}

/* Telefon-Icon leicht justieren */
#phone_image {
  position: relative;
  top: -2px;
  margin-right: 4px;
}


/* Bilder nebeneinander und mittig */
.image-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;        /* Abstand zwischen den Bildern */
  flex-wrap: wrap;  /* falls zu schmal, umbrechen */
}

.image-row img {
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.image-row img:hover {
  transform: scale(1.05);
}


/* Bannerbereich (Bild mittig und responsiv) */
.image-banner {

  justify-content: center;
  align-items: center;
  padding:10px;
   text-align: center;
}

.image-banner img {
  border-radius: 8px;
  border: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-banner img:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* E-Book Linkbereich */
.ebook-link {
  text-decoration: none;
  color: #111;
  display: inline-block;
  transition: transform 0.2s ease;
}

.ebook-link:hover {
  transform: scale(1.03);
}

/* E-Book-Bild */
.ebook-link img {
  border-radius: 6px;
  border: none;
  margin-bottom: 8px;
}

/* Titel unter dem Bild */
.ebook-title {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  color: #111;
}

/* Untertext */
.ebook-subtext {
  font-size: 0.8rem;
  color: #00a85a;
  font-weight: 600;
}


section, .ad-placeholder, .card {
  margin-bottom: 25px;
}

p {
  line-height: 1.7;
}

.card {
  padding: 20px;
  border-radius: 10px;
}







/* Auf kleineren Geräten (z. B. Smartphones) */
@media (max-width: 767.98px) {
  .hero-img {
    margin-bottom: 10px;
  }
}


.startbox-hero .hero-img {
  display: block;
  margin: 0 auto; /* <-- zentriert horizontal */
  max-width: 70%;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}


/* Weniger Abstand zwischen Button und Box-Rand */
.startbox-hero .mt-3 {
  margin-top: 15px !important;
}



/* Falls die Box zu hoch wirkt: */
.startbox-hero p.small {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  opacity: 0.8;
  font-size: 0.8rem;
}


/* Basisfarbe für die Box selbst (bei hartnäckigen Utilities mit !important) */
.startbox { color: var(--startbox-text) !important; }

/* Vererbung erzwingen für typischen Fließtext */
.startbox :where(p, li, span, small, div, dd, dt) { color: inherit !important; }





.rotated {
  transform: rotate(-90deg);
  transform-origin: center;
  display: inline-block;
}

.text-center {
  text-align: center;
}

.powered-by-header {
  background: linear-gradient(90deg, #1e2230, #2b3044);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px 3px 0 0;
  color: #e9edf3;
  padding: 2px;               /* ✅ Schreibfehler korrigiert */
  margin: 0 auto;
  max-width: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-size: 12px;                 /* Standardgröße */
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

@media (max-width: 600px) {
  .powered-by-header {
    font-size: 10px;               /* ✅ Kleiner auf mobilen Geräten */
    padding: 1px;          /* optional: etwas kompakter */
  }
}

  
  
.branding {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: sans-serif;
}

.branding img {
  height: 20px;
}

.branding .powered {
  font-size: 0.8em;
  color: #666;
}


.verivox-logo {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}

.verivox-name {
  font-weight: 400;
  color: #f49c1a;
}


/* --- Scoped Styles nur für diesen Block --- */
.fk24-email-embed { 
  font-family: Arial, sans-serif; 
  color: #102A43; 
  background-color: #F0F4F8;  /* hellgrau außen */
  padding: 0;
  width: 100%;
    position: relative;
  overflow: hidden; /* schneidet alles außerhalb ab */
}

.fk24-email-embed .wrap {

  width: 100%;
  margin: 0 auto;
  background-color: #fff;      /* Weißer Hintergrund sichtbar */
  border-radius: 0px;
  overflow: hidden;            /* Rundungen wirken richtig */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.fk24-email-embed .card {
  padding: 10px 15px;
}

/* Kein Scrollen + ausreichend Höhe */
.fk24-email-embed iframe {
  width: 100%;
  height: 6000px;          /* <— Höhe erhöhen! 2000–2500px meist ausreichend */
}




/* Bilder sauber responsiv */
.fk24-email-embed img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border: 0;
  box-sizing: border-box;
  background-color: #fff;      /* Falls Bild transparent ist */
}

.fk24-email-embed .centered-img img {
  width: 50% !important;   /* halb so breit */
  max-width: 300px;        /* optional: obere Begrenzung */
  height: auto !important;
  margin: 0 auto;
}


/* Button */
.fk24-email-embed .btn {
  display: inline-block;
  padding: 10px 20px;
  background: #9EB71D;
  color: #FFFFFF;
  border: 1px solid #9EB71D;
  border-radius: 4px;
  text-decoration: none;
  line-height: 22px;
  font-size: 15px;
}

.fk24-email-embed .sp-10 { height: 10px; }
.fk24-email-embed .sp-15 { height: 15px; }
.fk24-email-embed .sp-20 { height: 20px; }
.fk24-email-embed .sp-40 { height: 40px; }

.fk24-email-embed .small {
  font-size: 10px;
  line-height: 12px;
  color: #555;
}

@media (max-width: 600px) {
  .fk24-email-embed { padding: 0px; }
  .fk24-email-embed .card { padding: 3px; }
  .startbox-hero { padding: 3px; }
}


/* Baufinanzierung steps */
/* --- Baufinanzierung Steps --- */
.bf-steps {
  --card-bg: #f6f8fb;
  --card-border: #e5ebf3;
  --card-radius: 14px;
  --title: #0a2a44;       /* an euer Farbschema anpassen */
  --text: #16324a;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  margin-block: 2rem;
}

/* Überschrift */
.bf-steps__title {
  font-size: clamp(1.125rem, 1.2rem + 0.6vw, 1.5rem);
  color: var(--title);
  margin: 0 0 1rem 0;
  text-align: left;
}

/* --- Grid Layout --- */
.bf-steps__grid {
  list-style: none;
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  grid-template-columns: 1fr; /* Mobil: eine Spalte */
}

/* Tablet: 2 Spalten */
@media (min-width: 600px) {
  .bf-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mittelgroße Bildschirme: 3 Spalten */
@media (min-width: 900px) {
  .bf-steps__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop: exakt 5 gleich breite Spalten */
@media (min-width: 1200px) {
  .bf-steps__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* --- Step-Karten --- */
/* --- Baufinanzierung Steps --- */
.bf-steps {
  --card-bg: #f6f8fb;
  --card-border: #e5ebf3;
  --card-radius: 14px;
  --title: #0a2a44;
  --text: #16324a;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  margin-block: 2rem;
}

/* Reset/Safety for equal sizing */
.bf-steps, .bf-steps * { box-sizing: border-box; }
.bf-steps img { max-width: 100%; height: auto; }
.bf-steps p { overflow-wrap: anywhere; word-break: break-word; }

/* Überschrift */
.bf-steps__title {
  font-size: clamp(1.125rem, 1.2rem + 0.6vw, 1.5rem);
  color: var(--title);
  margin: 0 0 1rem 0;
  text-align: left;
}

/* --- Grid Layout (mit minmax(0,1fr) für exakt gleiche Breiten) --- */
.bf-steps__grid {
  list-style: none;
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* Mobil */
}

/* Tablet: 2 Spalten */
@media (min-width: 600px) {
  .bf-steps__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mittelgroß: 3 Spalten */
@media (min-width: 900px) {
  .bf-steps__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop: exakt 5 gleich breite Spalten */
@media (min-width: 1200px) {
  .bf-steps__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* --- Step-Karten --- */
/* --- Baufinanzierung Steps --- */
.bf-steps {
  --card-bg: #f6f8fb;
  --card-border: #e5ebf3;
  --card-radius: 14px;
  --title: #0a2a44;
  --text: #16324a;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 18px rgba(16,24,40,.05);
  margin-block: 1.5rem; /* etwas kompakter */
}

.bf-steps, .bf-steps * {
  box-sizing: border-box;
}
.bf-steps img {
  max-width: 100%;
  height: auto;
}
.bf-steps p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Überschrift */
.bf-steps__title {
  font-size: clamp(1.125rem, 1.2rem + 0.6vw, 1.5rem);
  color: var(--title);
  margin: 0 0 0.75rem 0;
  text-align: left;
}

/* --- Grid Layout --- */
.bf-steps__grid {
  list-style: none;
  display: grid;
  gap: 0.75rem; /* engeres Grid */
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
  .bf-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .bf-steps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .bf-steps__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- Step-Karten --- */
.bf-step {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: clamp(0.875rem, 0.9rem + 0.4vw, 1.1rem);
  box-shadow: var(--shadow);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out; /* sanfter Hover */
}

.bf-step:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(16,24,40,.08), 0 6px 16px rgba(16,24,40,.09);
}

/* Inhalte */
.bf-step__badge {
  width: 56px;
  margin-bottom: 0.25rem;
}
.bf-step__heading {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
  color: var(--title);
  line-height: 1.2;
}
.bf-step__image {
  width: 110px;
  object-fit: contain;
  margin: 0.4rem 0;
}
.bf-step__text {
  margin-top: auto;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.bf-steps__source {
  display: block;
  margin-top: 0.5rem;
  color: #667085;
  text-align: left;
  font-size: 0.875rem;
}

/* --- Baufinanzierung Steps Ende --- */

/* ===== Cookie Consent: Overlay + Banner + Modal ===== */
.cookie-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 9998 !important;
  display: none;
}

.cookie-banner2{
  position: fixed !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  width: min(980px, calc(100% - 32px)) !important;
  background: #0b62b8 !important;
  color: #fff !important;
  border-radius: 10px !important;
  z-index: 9999 !important;
  display: none;
  box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
  overflow: hidden !important;
}

.cookie-banner2__head{ padding: 14px 18px !important; background:#0a56a0 !important; }
.cookie-banner2__title{ font-weight:700 !important; font-size:20px !important; }
.cookie-banner2__body{ padding: 16px 18px 8px 18px !important; font-size:15px !important; line-height:1.45 !important; }
.cookie-banner2 a{ color:#fff !important; text-decoration: underline !important; }

.cookie-banner2__actions{
  display:flex !important;
  gap:10px !important;
  justify-content:flex-end !important;
  padding: 10px 18px 6px 18px !important;
}

.cookie-banner2__links{
  display:flex !important;
  gap:18px !important;
  justify-content:center !important;
  padding: 6px 18px 14px 18px !important;
  font-size:13px !important;
  opacity:.9 !important;
}

/* Modal layer */
.cookie-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none; /* wird per JS auf block gesetzt */
}

.cookie-modal__card{
  width: min(720px, calc(100% - 32px)) !important;
  margin: 10vh auto 0 !important;
  background: #fff !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.4) !important;
}

.cookie-modal__head{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding: 14px 16px !important;
  background:#f3f5f7 !important;
}

.cookie-modal__close{
  border:0 !important;
  background:transparent !important;
  font-size:26px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.cookie-modal__body{ padding: 14px 16px !important; color:#222 !important; }
.cookie-modal__actions{
  display:flex !important;
  gap:10px !important;
  justify-content:flex-end !important;
  padding: 12px 16px 16px !important;
}

.cookie-toggle{ display:flex !important; gap:10px !important; align-items:center !important; padding: 8px 0 !important; }



/* =========================================================
   IFRAME LAYOUT – EINHEITLICH & STABIL
   - Keine 100vh pro Block (verursacht Abschneiden/Chaos)
   - Nutze bevorzugt: .iframe-block + --lg/--md/--sm
   - .iframe-wrapper bleibt als Legacy-Klasse kompatibel
   ========================================================= */

/* ===== Legacy Wrapper (kompatibel, KEIN 100vh mehr) ===== */
.iframe-wrapper{
  width: 100%;
  overflow: hidden;     /* keine äußeren Scrollbars */
  border-radius: 12px;  /* optional */
  /* KEINE feste Höhe hier! -> nutze .iframe-block--lg/md/sm */
}

/* iFrame füllt den Wrapper */
.iframe-embed{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;       /* verhindert kleine Lücken */
}

/* ===== IFRAME BLOCKS (empfohlen) ===== */
.iframe-block{
  width: 100%;
  overflow: hidden;
  border-radius: 12px;  /* optional */
}

/* Standardhöhen für Embeds (stabil, ohne abgeschnittene Höhen) */
.iframe-block--lg{ height: clamp(650px, 80vh, 980px); }
.iframe-block--md{ height: clamp(520px, 65vh, 820px); }
.iframe-block--sm{ height: clamp(420px, 55vh, 680px); }

/* iFrame/Embed füllt den Block */
.iframe-block iframe,
.iframe-block .iframe-embed{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Mobile etwas kompakter */
@media (max-width: 576px){
  .iframe-block--lg{ height: clamp(520px, 75vh, 820px); }
  .iframe-block--md{ height: clamp(460px, 65vh, 720px); }
  .iframe-block--sm{ height: clamp(380px, 55vh, 620px); }
}


/* Check24 Package-Widget: kleinere Höhe, kein Leerraum */
.iframe-block--c24{
  height: auto;          /* Höhe ergibt sich aus dem Widget */
  min-height: 460px;     /* Sicherheits-Fallback */
  background: transparent;
}

/* Wenn Check24 das iframe inline auf 428px setzt -> Wrapper passt sich an */
.iframe-block--c24 #c24pp-package-iframe{
  width: 100%;
}

/* Optional: etwas Luft nach unten weg */
.iframe-block--c24 iframe{
  display: block;
  max-width: 100%;
}


/* Travialinks: kompakter als LG */
/* FORCE: Travialinks Blockhöhe wirklich anwenden */
.iframe-block.iframe-block--travialinks{
  height: 420px !important;   /* testweise fix, danach feinjustieren */
  overflow: hidden !important;
}
@media (max-width: 576px){
  .iframe-block--travialinks{
    height: clamp(420px, 65vh, 640px);
  }
}