.elementor-kit-7{--e-global-color-primary:#333333;--e-global-color-secondary:#54595F;--e-global-color-text:#666666;--e-global-color-accent:#F5F5F5;--e-global-color-f49370a:#3B5B8C;--e-global-color-a527a99:#6F8A9B;--e-global-color-963435d:#A6B7A4;--e-global-color-c31967e:#CAA344;--e-global-color-cbdb5d3:#F8E2AF;--e-global-color-8819b10:#F4F6F4;--e-global-color-c10841e:#0C494F;--e-global-color-90672c5:#003145;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================
   0) Farben / Variablen
   ========================= */
html{
  --color-1:#f8e2af; /* hellgelb */
  --color-2:#caa444; /* gold */
  --color-3:#a6b7a4; /* salbei */
  --color-4:#6f8a9b; /* outline-blau */
  --color-5:#3b5b8c; /* primärblau */
  --ink: #0f172a;    /* sehr dunkles Blau (Text) */
  --ink-2:#1f2937;   /* Sek.-Text */
  --card-radius:22px;
  --chip-radius:999px;
  --btn-radius:14px;
  --shadow-soft:0 8px 24px rgba(0,0,0,.08);
  --shadow-mid: 0 10px 28px rgba(0,0,0,.10);
}

/* Basistypo (optional, greift nur wenn nichts global gesetzt ist) */
body{ color:var(--ink); line-height:1.6; }

/* Links */
a{ color:var(--color-5); }
a:hover{ text-decoration:none; }

/* Fokus sichtbar & barrierearm */
:where(a,button,[role="button"],.elementor-button,.chip) :focus{ outline: none; }
:where(a,button,[role="button"],.elementor-button,.chip):focus-visible{
  outline: 3px solid var(--color-4);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Bilder in Karten füllen */
.elementor-widget-image img{ width:100%; height:auto; display:block; }

/* =========================
   1) Glassmorphism Panel
   (Hero: Container-Klasse "glass-panel")
   ========================= */
.glass-panel{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(166,183,164,.6);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Chips (falls nicht inline gestylt) */
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:8px 12px; border:1px solid var(--color-3);
  background:#fff; border-radius:var(--chip-radius); font-weight:600;
}

/* =========================
   2) Karten-Grundstil
   (Container-Klassen: "card-soft", "offer-card", "news-card")
   ========================= */
.elementor .offer-card{
  background:#fff;
  border:1px solid var(--color-3);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

/* --- Angebots-Kacheln (Unsere Angebote) --- */
.offer-card:hover{
  transform: translateY(-2px) scale(1.01);
  background: var(--color-1);
  box-shadow: var(--shadow-mid);
  border-color: var(--color-4);
}
.offer-card:focus-within{
  background: var(--color-1);
  border-color: var(--color-4);
}

/* Button in Angebots-Kacheln: Standard #f8e2af → Hover Weiß */
.offer-card .elementor-button{
  background: var(--color-1);
  color: var(--color-5);
  border:1px solid var(--color-4);
  border-radius: var(--btn-radius);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.elementor .offer-card:hover{
  transform: translateY(-2px) scale(1.01);
  background: var(--color-1);
  box-shadow: var(--shadow-mid);
  border-color: var(--color-4);
}

/* --- News-Kacheln (Neues aus unserem Ratgeber) --- */
.news-card:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--shadow-mid);
  border-color: var(--color-4);
}
.news-card:focus-within{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  border-color: var(--color-4);
}

/* Button in News-Kacheln: Standard Weiß/Outline → Hover Blau/Weiß */
.news-card .elementor-button{
  background:#fff; color:var(--color-5);
  border:1px solid var(--color-4);
  border-radius: var(--btn-radius);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.news-card:hover .elementor-button,
.news-card:focus-within .elementor-button{
  background: var(--color-5);
  color:#fff;
  border-color: var(--color-5);
}

/* „Anzeige“-Badge (falls du statt Inline die Klasse verwenden willst) */
.ad-badge{
  position:absolute; right:12px; top:12px;
  background:#607aa3; color:#fff; font-weight:700; font-size:14px;
  padding:6px 10px; border-radius:999px; line-height:1;
}

/* Kartenbilder etwas stärker runden (oben) */
.offer-card .elementor-widget-image img{ border-top-left-radius:18px; border-top-right-radius:18px; }
.news-card  .elementor-widget-image img{ border-top-left-radius:18px; border-top-right-radius:18px; }

/* =========================
   3) Regionale Angebote (Split-Banner)
   ========================= */
.section-regional,
#regional-banner{ /* falls die Sektion eine ID/Klasse hat */
  background:#607aa3;
  color:#fff;
  border-radius:26px;
}
#regional-banner .elementor-heading-title{ color:#fff; }
#regional-banner .elementor-widget-text-editor{ color:#eef2ff; }
#regional-banner .elementor-button{
  background:#fff; color:#0f172a; border:0; border-radius:var(--btn-radius);
}
#regional-banner .elementor-button:hover{ transform:translateY(-1px); }

/* =========================
   4) Footer (blau)
   ========================= */
.footer-blue, #footer-blue{
  background:#607aa3 !important; color:#fff;
}
#footer-blue a{ color:#fff; }
#footer-blue .elementor-divider__element{ border-color: rgba(255,255,255,.35); }

/* =========================
   5) Formulare / Suche / Newsletter
   ========================= */
input[type="search"], input[type="email"], input[type="text"]{
  font-size:18px;
  border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px;
}
button, .elementor-button{
  cursor:pointer; border-radius: var(--btn-radius);
}
button:active, .elementor-button:active{ transform: translateY(1px); }

/* =========================
   6) Responsive Feinschliff
   ========================= */
@media (max-width: 1024px){
  .glass-panel{ padding:16px; }
  .card-soft{ padding:14px; }
}
@media (max-width: 767px){
  .glass-panel{ border-radius:18px; }
  .offer-card .elementor-widget-image img,
  .news-card  .elementor-widget-image img{ border-radius:14px 14px 0 0; }
  .chip{ font-size:15px; padding:7px 10px; }
}

/* =========================
   7) Utility (optional)
   ========================= */
.u-hide-text{ text-indent:100%; white-space:nowrap; overflow:hidden; }
.u-visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}/* End custom CSS */