/* =========================
   BBC Fürth – Design System
   ========================= */

/* 1) Brand Tokens */
:root{
  --brand-blue:#0B6AAE;
  --brand-navy:#0B1B2B;
  --brand-gold:#D4A017;

  --brand-bg:#F7F7F8;
  --brand-surface:#FFFFFF;
  --brand-text:#111827;
  --brand-muted:#667085;
  --brand-border:#E6E8EC;

  --radius-ui:12px;
  --radius-card:16px;

  --shadow-soft:0 10px 30px rgba(17,24,39,.08);
}

/* 2) Bootstrap/Helix mapping (Helix basiert i.d.R. auf Bootstrap) */
:root{
  --bs-primary: var(--brand-blue);
  --bs-secondary: var(--brand-navy);
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);
  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: #084C7A;
}

/* 3) Base Typography */
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--brand-text);
}

h1,h2,h3,h4,h5,h6{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: -0.01em;
  color: var(--brand-text);
}

h1{ font-size: clamp(34px, 3.2vw, 52px); line-height: 1.08; }
h2{ font-size: clamp(28px, 2.4vw, 40px); line-height: 1.15; }
h3{ font-size: clamp(22px, 1.8vw, 28px); line-height: 1.25; }

/* 4) Links */
/* Links im Content: Unterstreichung als Standard (barriereärmer als "nur blau") */
a:not(.btn):not(.menu-cta){
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:not(.btn):not(.menu-cta):hover{
  text-decoration-thickness: 2px;
}


/* 5) Header / Navigation */
#sp-header{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(230,232,236,.9);
}

#sp-header.header-sticky{
  box-shadow: var(--shadow-soft);
}
:root{ --header-offset: calc(var(--header_height, 90px) + 16px); }
html{ scroll-padding-top: var(--header-offset); }
[id]{ scroll-margin-top: var(--header-offset); }


/* Menu links */
.sp-megamenu-parent > li > a{
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li.active > a{
  background: rgba(11,106,174,.08);
  color: var(--brand-blue);
}

/* CTA Menu Item:
   In Joomla im Menüpunkt "Probetraining" -> Link CSS-Klasse: menu-cta */
.sp-megamenu-parent > li.menu-cta > a{
  background: var(--brand-blue);
  color: #fff !important;
  padding: 12px 16px;
}

.sp-megamenu-parent > li.menu-cta > a:hover{
  background: #084C7A;
}

/* 6) Buttons */
.btn{
  border-radius: var(--radius-ui);
  padding: 12px 18px;
  font-weight: 600;
}

.btn-primary{
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

.btn-primary:hover{
  background: #084C7A;
  border-color: #084C7A;
}

.btn-outline-primary{
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}

.btn-outline-primary:hover{
  background: rgba(11,106,174,.08);
}

/* 7) Cards / Surfaces */
.card{
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* 8) Section spacing helper (optional):
   In SP Page Builder Section -> CSS Class: section-pad */
.section-pad{
  padding: 72px 0;
}
@media (max-width: 991px){
  .section-pad{ padding: 52px 0; }
}
@media (max-width: 575px){
  .section-pad{ padding: 36px 0; }
}

/* 9) Accessibility: Focus */
:where(a, button, input, textarea, select, .btn):focus-visible{
  outline: 3px solid rgba(212,160,23,.55);
  outline-offset: 2px;
  border-radius: 10px;
}

/* =========================
   CTA-Link im Menü (Klasse liegt auf <a>)
   ========================= */

/* Desktop: CTA als Pill-Button */
.sp-megamenu-parent > li > a.menu-cta{
  background: var(--brand-blue);
  color: #fff !important;
  border: 1px solid var(--brand-blue);
  border-radius: 999px;
  padding: 10px 16px !important;
  line-height: 1.1;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(11,106,174,.18);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Hover */
.sp-megamenu-parent > li > a.menu-cta:hover{
  background: #084C7A;
  border-color: #084C7A;
  box-shadow: 0 12px 26px rgba(8,76,122,.22);
  transform: translateY(-1px);
}

/* Fokus (Accessibility) */
.sp-megamenu-parent > li > a.menu-cta:focus-visible{
  outline: 3px solid rgba(212,160,23,.60);
  outline-offset: 2px;
}

/* Active (falls Helix/Bootstrap active auf a setzt) */
.sp-megamenu-parent > li.active > a.menu-cta,
.sp-megamenu-parent > li > a.menu-cta.active{
  background: #084C7A;
  border-color: #084C7A;
}

/* Mobile/Off-canvas: Button über die volle Breite */
#sp-offcanvas .sp-megamenu-parent > li > a.menu-cta,
#offcanvas-menu .sp-megamenu-parent > li > a.menu-cta,
.offcanvas-menu .sp-megamenu-parent > li > a.menu-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px 0 14px;
  padding: 12px 14px !important;
  border-radius: 12px;
  background: var(--brand-blue);
  color: #fff !important;
  border: 1px solid var(--brand-blue);
}

/* =========================
   Helix Menü Hover/Active fix
   ========================= */

/* 1) Entfernt Helix-Underline/Line-Animationen (die oft "komisch" wirken) */
#sp-header .sp-megamenu-parent > li > a:not(.menu-cta)::before,
#sp-header .sp-megamenu-parent > li > a:not(.menu-cta)::after{
  content: none !important;
  display: none !important;
}

/* 2) Einheitliche, moderne Menü-Links (ohne Layout-Sprung) */
#sp-header .sp-megamenu-parent > li > a:not(.menu-cta){
  padding: 12px 14px;          /* gleichmäßig */
  border-radius: 10px;         /* modern */
  line-height: 1.2;            /* verhindert "wackeln" */
  transition: background .15s ease, color .15s ease;
}

/* 3) Hover (nicht nur Farbwechsel, sondern Fläche) */
#sp-header .sp-megamenu-parent > li > a:not(.menu-cta):hover{
  background: rgba(11,106,174,.10);
  color: var(--brand-blue);
}

/* 4) Active (sichtbar und stabil) */
#sp-header .sp-megamenu-parent > li.active > a:not(.menu-cta){
  background: rgba(11,106,174,.14);
  color: var(--brand-blue);
}

/* 5) Accessibility: Tastatur-Fokus wie Hover, plus klarer Ring */
#sp-header .sp-megamenu-parent > li > a:not(.menu-cta):focus-visible{
  background: rgba(11,106,174,.10);
  outline: 3px solid rgba(212,160,23,.60);
  outline-offset: 2px;
}
/* Dropdown Container */
#sp-header .sp-dropdown{
  border-radius: 14px;
  border: 1px solid rgba(230,232,236,.95);
  box-shadow: 0 18px 50px rgba(17,24,39,.12);
  overflow: hidden; /* damit Radius sauber ist */
}

/* Dropdown Links */
#sp-header .sp-dropdown li a{
  padding: 10px 14px;
  transition: background .15s ease, color .15s ease;
}

/* Dropdown Hover/Active */
#sp-header .sp-dropdown li a:hover{
  background: rgba(11,106,174,.10);
  color: var(--brand-blue);
}

#sp-header .sp-dropdown li.active > a{
  background: rgba(11,106,174,.14);
  color: var(--brand-blue);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

input, select, textarea{
  border-radius: var(--radius-ui);
  border: 1px solid var(--brand-border);
}
input:focus, select:focus, textarea:focus{
  outline: 3px solid rgba(212,160,23,.45);
  outline-offset: 2px;
  border-color: rgba(11,106,174,.55);
}

/* Startseiten-Feinschliff */
.hero-split{
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 28px;
}

@media (max-width: 991px){
  .hero-split{ padding: 18px; }
}

/* =========================
   Cards: Padding + Rhythmus
   ========================= */

.card.card-soft,
.card-soft{
  padding: 24px;                 /* Innenabstand */
  display: flex;
  flex-direction: column;
  gap: 10px;                     /* Abstand zwischen Elementen in der Card */
}

/* Überschriften und Text in Cards: keine "komischen" Standard-Margins */
.card.card-soft h3,
.card-soft h3{
  margin: 0 0 6px 0;
}

.card.card-soft p,
.card-soft p{
  margin: 0;
  color: var(--brand-muted);
}

/* Buttons in Cards etwas Abstand nach oben */
.card.card-soft .btn,
.card-soft .btn{
  margin-top: 8px;
}

/* =========================
   Standort-Karten
   ========================= */

.loc-card{
  padding: 24px;                 /* Luft */
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;             /* sorgt für ruhige Proportionen */
}

.loc-card h3{
  margin: 0;
}

.loc-card p{
  margin: 0;
  color: var(--brand-muted);
}

/* Badge */
.loc-badge{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid rgba(230,232,236,.95);
  background: rgba(11,106,174,.10);
  color: var(--brand-blue);
}

.loc-badge.is-group{
  background: rgba(255,255,255,.7);
  color: var(--brand-text);
}

/* Footer: Link/Button immer unten */
.loc-footer{
  margin-top: auto;
  padding-top: 12px;
}

/* Link-Stil, falls du statt Button lieber "Text-Link" nutzt */
.loc-link{
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-blue);
}
.loc-link:hover{
  color: #084C7A;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.loc-link:focus-visible{
  outline: 3px solid rgba(212,160,23,.60);
  outline-offset: 2px;
  border-radius: 10px;
}
/* Standort-Karte als echtes Card-Element */
.loc-card{
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(17,24,39,.08));
  padding: 24px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
}

/* Text-Rhythmus in der Karte */
.loc-card h3{ margin: 0; }
.loc-card p{ margin: 0; color: var(--brand-muted, #667085); }

/* Badge bleibt dezent */
.loc-badge{
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(230,232,236,.95);
  background: rgba(11,106,174,.10);
  color: var(--brand-blue, #0B6AAE);
}

/* Link/CTA immer unten */
.loc-footer{ margin-top: auto; padding-top: 12px; }

/* Link-Stil */
.loc-link{
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-blue, #0B6AAE);
}
.loc-link:hover{
  color: #084C7A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   FAQ Accordion – modern look
   Addon Class: faq-accordion
   ========================= */

.faq-accordion .sppb-panel,
.faq-accordion .accordion-item{
  background: var(--brand-surface, #fff);
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: var(--radius-card, 16px);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(17,24,39,.08));
  overflow: hidden;
  margin-bottom: 12px;
}

.faq-accordion .sppb-panel-heading,
.faq-accordion .accordion-header{
  padding: 16px 18px;
}

.faq-accordion .sppb-panel-title,
.faq-accordion .accordion-button{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--brand-text, #111827);
}

.faq-accordion .sppb-panel-body,
.faq-accordion .accordion-body{
  padding: 0 18px 18px;
  color: var(--brand-muted, #667085);
}

/* Hover/Focus */
.faq-accordion :where(.sppb-panel-title a, .accordion-button):focus-visible{
  outline: 3px solid rgba(212,160,23,.60);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Entfernt harte Standard-Hintergründe beim Öffnen */
.faq-accordion .accordion-button:not(.collapsed){
  background: rgba(11,106,174,.08);
  box-shadow: none;
}


/* =========================
   Landing Polish Pack
   ========================= */

/* 1) Container etwas "premium": nicht zu breit */
:root{
  --container-max: 1200px;
  --section-y: 80px;
  --section-y-sm: 52px;
}

/* Helix/Bootstrap Container limit (nur wenn ihr sehr breit seid) */
.container,
.sppb-container{
  max-width: var(--container-max);
}

/* 2) Konsistente Section-Abstände (du nutzt schon section-pad – das hier macht es sauber) */
.section-pad{
  padding: var(--section-y) 0;
}
@media (max-width: 991px){
  .section-pad{ padding: var(--section-y-sm) 0; }
}

/* 3) Alternierende Flächen (macht Landingpage sofort strukturierter) */
.section-white{
  background: #fff;
  border-top: 1px solid var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}

.section-muted{
  background: var(--brand-bg);
}

/* 4) Lead-/Intro-Texte: bessere Lesbarkeit */
.content-narrow{
  max-width: 72ch;
}

/* 5) Kartenfelder: echte "Kachelfläche" mit Luft */
.card-grid{
  row-gap: 24px;      /* vertikal */
  column-gap: 24px;   /* horizontal (falls unterstützt) */
}

/* 6) Card-Feinschliff: moderne Typo + Luft (falls noch nicht gesetzt) */
.card-soft{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-soft h3, .card-soft h4{ margin: 0 0 6px 0; }
.card-soft p{ margin: 0; color: var(--brand-muted); }

/* 7) Bilder: einheitlicher Rahmen/Roundness (wirkt sofort "aus einem Guss") */
.img-frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-soft);
}

/* Optional: gleiche Bildhöhe bei Cards (nur wenn ihr Bild-Kacheln habt)
   Dann am Bild-Addon zusätzlich Klasse "img-cover" vergeben */
.img-cover img{
  height: 220px;
  object-fit: cover;
}
@media (max-width: 575px){
  .img-cover img{ height: 180px; }
}

/* 8) Section-Überschriften: etwas mehr "Atem" */
.section-title{ margin-bottom: 10px; }
.section-lead{
  margin-bottom: 24px;
  color: var(--brand-muted);
}

/* Cards auf weißen Sections: leicht getönte Oberfläche */
.section-white .card-soft,
.section-white .loc-card,
.section-white .timeline-steps .sppb-timeline-content,
.section-white .faq-accordion .accordion-item{
  background: #F9FAFB; /* sehr helles Grau statt Weiß */
  border-color: rgba(17,24,39,.10);
}


/* =========================
   Pullquote (Text-Addon)
   Addon Class: pullquote
   ========================= */

.pullquote{
  background: #fff;
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: 16px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(17,24,39,.08));
  padding: 22px 22px;
}

/* Das eigentliche Blockquote-Element */
.pullquote blockquote{
  margin: 0;
  padding-left: 18px;
  border-left: 4px solid rgba(11,106,174,.45);
  color: var(--brand-text, #111827);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  position: relative;
}

/* Dezentes Anführungszeichen */
.pullquote blockquote::before{
  content: "“";
  position: absolute;
  left: -4px;
  top: -10px;
  font-size: 44px;
  line-height: 1;
  color: rgba(11,106,174,.18);
  font-weight: 800;
}

/* Wenn du unter der Quote eine Quelle/Name als <cite> nutzt */
.pullquote cite{
  display: block;
  margin-top: 10px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--brand-muted, #667085);
  font-style: normal;
}

/* Mobile etwas kompakter */
@media (max-width: 575px){
  .pullquote{ padding: 16px; }
  .pullquote blockquote{ font-size: 16px; padding-left: 14px; }
  .pullquote blockquote::before{ font-size: 38px; top: -8px; }
}


/* =========================
   Universal CTA Block
   ========================= */

.cta-block{
  background: #fff;
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: 20px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(17,24,39,.08));
  padding: 28px!important;
}

@media (max-width: 991px){
  .cta-block{ padding: 18px; }
}

.cta-copy h2, .cta-copy h3{
  margin: 0 0 10px 0;
}
.cta-copy p{
  margin: 0 0 14px 0;
  color: var(--brand-muted, #667085);
}

.cta-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Kontaktkarten rechts */
.cta-contacts{
  display: grid;
  gap: 12px;
}

.cta-card{
  background: var(--brand-bg, #F7F7F8);
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: 16px;
  padding: 14px 14px;
}

.cta-card .cta-label{
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand-muted, #667085);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cta-card a{
  font-weight: 700;
  color: var(--brand-blue, #0B6AAE);
  text-decoration: none;
}
.cta-card a:hover{
  color: #084C7A;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-card a:focus-visible{
  outline: 3px solid rgba(212,160,23,.60);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Layout-Helfer: wenn du 2 Spalten nutzt, bleibt rechts kompakt */
.cta-contacts{ align-content: start; }

/* Variante: Dark CTA (z.B. auf section-muted oder vor Footer) */
.cta--dark .cta-block{
  background: var(--brand-navy, #0B1B2B);
  border-color: rgba(230,232,236,.14);
}
.cta--dark .cta-copy h2, 
.cta--dark .cta-copy h3{
  color: #fff;
}
.cta--dark .cta-copy p{
  color: rgba(230,238,245,.85);
}
.cta--dark .cta-card{
  background: rgba(255,255,255,.06);
  border-color: rgba(230,232,236,.14);
}
.cta--dark .cta-card a{
  color: #fff;
}

.info-card{
  padding: 22px;
}

.info-card ul{
  margin: 0;
  padding-left: 18px;
}

.info-card li{
  margin: 6px 0;
}
.section-pad-sm{ padding: 24px 0; }

.jumpnav{
  display:flex; gap:10px; flex-wrap:wrap;
  position: sticky;
  top: var(--header-offset, 100px);
  z-index: 10;
}
.jumpnav .btn{ border-radius: 999px; padding: 10px 14px; }

.anchor-target{ scroll-margin-top: var(--header-offset, 100px); }

.schedule-table{ overflow-x:auto; }
.schedule-table table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--brand-border, #E6E8EC);
  border-radius:16px;
  overflow:hidden;
}
.schedule-table th, .schedule-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--brand-border, #E6E8EC);
  vertical-align:top;
}
.schedule-table th{
  background: rgba(11,106,174,.06);
  text-align:left;
  font-weight:800;
}
.schedule-table tr:last-child td{ border-bottom:0; }

.schedule-block{
  background:#fff;
  border:1px solid var(--brand-border, #E6E8EC);
  border-radius:16px;
  padding:18px;
}
.schedule-block strong{ display:block; margin-top:10px; }
.schedule-block strong:first-child{ margin-top:0; }

.section-pad-sm{ padding: 24px 0; }

.about-nav-card{ min-height: 170px; }

.team-card{
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-photo img{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-soft);
}

/* Schulleitung – Profil Hero */
.profile-hero{ align-items: center; }

.profile-photo img{
  border-radius: 18px;
}

/* Fact Chips */
.fact-row{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}
.fact-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(230,232,236,.95);
  background: rgba(11,106,174,.10);
  color: var(--brand-blue, #0B6AAE);
}

/* Prinzipienliste – ruhiger Look */
.principle-list ul{ margin: 0; padding-left: 18px; }
.principle-list li{ margin: 10px 0; }
.principle-list strong{ color: var(--brand-text); }

/* Trainerteam */
.team-grid{ row-gap: 24px; }

.trainer-card{
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
}

.trainer-card h3{ margin: 0; }
.trainer-meta{
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-muted, #667085);
  margin: 0;
}

.trainer-photo img{
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-soft);
  margin-bottom: 8px;
}

/* optional: kleine Tags */
.trainer-tags{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.trainer-tag{
  display:inline-flex;
  align-items:center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(230,232,236,.95);
  background: rgba(11,106,174,.10);
  color: var(--brand-blue, #0B6AAE);
}

/* =========================
   Aktuelles (Joomla Category Blog) – clean cards + grid
   basiert auf deinem HTML: .blogpage-aktuelles.com-content-category-blog
   ========================= */

#sp-component .blogpage-aktuelles.com-content-category-blog{
  --blog-gap: 24px;
}

/* ========== Leading (oben) ========== */
#sp-component .blogpage-aktuelles.com-content-category-blog
.com-content-category-blog__items{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--blog-gap);
  margin-bottom: var(--blog-gap);
}

/* ========== Intro Grid (unten, cols-2 mit Bootstrap row/col) ========== */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-list.cols-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--blog-gap);
}

/* Bootstrap Wrapper "flach machen", damit unser Grid sauber greift */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-list.cols-2 > .row,
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-list.cols-2 > .row > .col-lg-6{
  display: contents;
}

/* Responsive: 1 Spalte */
@media (max-width: 991px){
  #sp-component .blogpage-aktuelles.com-content-category-blog
  .article-list.cols-2{
    grid-template-columns: 1fr;
  }
}

/* ========== Card Style für alle Artikel-Kacheln ========== */
#sp-component .blogpage-aktuelles.com-content-category-blog
.com-content-category-blog__item,
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-list .article{
  background: #fff;
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: 16px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(17,24,39,.08));
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (hover:hover){
  #sp-component .blogpage-aktuelles.com-content-category-blog
  .com-content-category-blog__item:hover,
  #sp-component .blogpage-aktuelles.com-content-category-blog
  .article-list .article:hover{
    transform: translateY(-2px);
    transition: transform .15s ease;
  }
}

/* ========== Intro-Bild ========== */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-intro-image{
  margin: 0 0 10px 0;
}

#sp-component .blogpage-aktuelles.com-content-category-blog
.article-intro-image img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--brand-border, #E6E8EC);
  display: block;
}

/* ========== Featured Video ========== */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-featured-video{
  margin: 0 0 10px 0;
}

#sp-component .blogpage-aktuelles.com-content-category-blog
.article-featured-video video,
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-featured-video iframe{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--brand-border, #E6E8EC);
  display: block;
}

/* ========== Typography + Meta ========== */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-header h2{
  margin: 0;
}

#sp-component .blogpage-aktuelles.com-content-category-blog
.article-header h2 a{
  text-decoration: none;
}

#sp-component .blogpage-aktuelles.com-content-category-blog
.article-header h2 a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

#sp-component .blogpage-aktuelles.com-content-category-blog
.article-info{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: var(--brand-muted, #667085);
  font-size: 14px;
}

/* Introtext: sauberer Rhythmus */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-introtext p{
  margin: 0 0 10px 0;
  color: var(--brand-muted, #667085);
}
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-introtext p:last-child{
  margin-bottom: 0;
}

/* Link-Stil im Intro (dezent, modern) */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-introtext a{
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Falls die Klasse a_schatten auf der Listing-Seite „komisch“ wirkt: neutralisieren */
#sp-component .blogpage-aktuelles.com-content-category-blog
.article-introtext a.a_schatten{
  box-shadow: none !important;
  background: transparent !important;
}

/* Kontaktkarten rechts im Hero */
.contact-grid{
  display: grid;
  gap: 12px;
}

.contact-card{
  padding: 16px;
}

.contact-link{
  font-weight: 800;
  text-decoration: none;
  color: var(--brand-blue, #0B6AAE);
}
.contact-link:hover{
  color: #084C7A;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Formular-Panel */
.form-card{
  background: #fff;
  border: 1px solid var(--brand-border, #E6E8EC);
  border-radius: 20px;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(17,24,39,.08));
  padding: 22px;
}

/* Anchor Offset */
.anchor-target{
  scroll-margin-top: var(--header-offset, 100px);
}

/* =========================
   Footer Polish (Helix Ultimate)
   ========================= */

/* Grundfläche Footer */
#sp-footer,
#sp-bottom{
  background: var(--brand-navy, #0B1B2B);
  color: rgba(230,238,245,.88);
}

#sp-footer a,
#sp-bottom a{
  color: rgba(230,238,245,.92);
  text-decoration: none;
  text-underline-offset: 3px;
}

#sp-footer a:hover,
#sp-bottom a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Abstände */
#sp-footer{
  padding: 28px 0 22px;
}
#sp-bottom{
  padding: 10px 0;
  border-top: 1px solid rgba(230,232,236,.14);
}

/* Modultitel */
#sp-footer .sp-module-title{
  color: #fff;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

/* Listen im Footer: clean */
#sp-footer ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#sp-footer li{
  margin: 8px 0;
}

/* =========================
   1) Aktuelles-Modul (2 Beiträge)
   Class: footer-news
   ========================= */

#sp-footer .footer-news .mod-articleslatest,
#sp-footer .footer-news .newsflash,
#sp-footer .footer-news .list-striped{
  margin: 0;
}

#sp-footer .footer-news li,
#sp-footer .footer-news .newsflash-item{
  padding: 10px 0;
  border-bottom: 1px solid rgba(230,232,236,.14);
}
#sp-footer .footer-news li:last-child,
#sp-footer .footer-news .newsflash-item:last-child{
  border-bottom: 0;
}

/* Titelzeilen im Aktuelles-Modul */
#sp-footer .footer-news a{
  display: inline-block;
  font-weight: 700;
  line-height: 1.25;
}

/* Datum/Meta (falls vorhanden) dezenter */
#sp-footer .footer-news .mod-articles-category-date,
#sp-footer .footer-news time,
#sp-footer .footer-news .article-info{
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(230,238,245,.65);
}

/* =========================
   2) Quicklinks-Menü
   Class: footer-links
   ========================= */

#sp-footer .footer-links li a{
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  font-weight: 650;
}

/* kleiner Pfeil für Modern-Look */
#sp-footer .footer-links li a::before{
  content: "›";
  color: rgba(212,160,23,.85);
  font-weight: 900;
}

/* Active state */
#sp-footer .footer-links li.active > a{
  color: #fff;
  text-decoration: underline;
}

/* =========================
   3) Social Media (SPPB Feature Boxes)
   Class: footer-social
   ========================= */

/* Container als Grid */
#sp-footer .footer-social{
  display: grid;
  gap: 10px;
}

/* Featurebox-Karten im Footer dezent "glassy" */
#sp-footer .footer-social .sppb-addon,
#sp-footer .footer-social .sppb-feature-box{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(230,232,236,.14);
  border-radius: 14px;
  padding: 12px 14px;
}

/* Titel/Text in Feature Box */
#sp-footer .footer-social .sppb-feature-box-title{
  color: #fff;
  margin: 0 0 4px 0;
  font-weight: 800;
  font-size: 14px;
}

#sp-footer .footer-social .sppb-addon-content,
#sp-footer .footer-social .sppb-feature-box p{
  color: rgba(230,238,245,.78);
  margin: 0;
  font-size: 14px;
}

/* Hover nur auf Geräten mit Maus */
@media (hover:hover){
  #sp-footer .footer-social .sppb-addon:hover,
  #sp-footer .footer-social .sppb-feature-box:hover{
    background: rgba(255,255,255,.09);
    border-color: rgba(230,232,236,.22);
    transform: translateY(-1px);
    transition: transform .15s ease;
  }
}

/* =========================
   Responsive: Footer-Spalten luftiger
   ========================= */
@media (max-width: 991px){
  #sp-footer{ padding: 22px 0 18px; }
  #sp-footer .sp-module{ margin-bottom: 18px; }
}