/* =========================================================
   Startseite (scoped): Tokens, Karten, Module
   ========================================================= */

/* Tokens nur für die Startseite */
body.startseite-alias{
  --pastel-blue:#E6F0FF;
  --pastel-green:#E7F3EA;
  --pastel-beige:#F6F1E7;
  --border-muted:#e0e7ef;
  --card-radius:12px;
  --hero-safe:14px;
}

/* Grundkarte */
.startseite-alias .card-clean{
  background:#fff;
  border:1px solid var(--border-muted);
  border-radius:var(--card-radius);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  overflow:hidden;
}

/* Einheitliche Container-Breite in den Startseiten-Modulen */
.startseite-alias .intro-module .container,
.startseite-alias .offers-module .container,
.startseite-alias .impulses-module .container,
.startseite-alias .seo-module .container{ max-width:1140px; }
@media (max-width:768px){
  .startseite-alias .intro-module .container,
  .startseite-alias .offers-module .container,
  .startseite-alias .impulses-module .container,
  .startseite-alias .seo-module .container{ padding:0 12px; }
}

/* ---------------------------------
   Intro
---------------------------------- */

.startseite-alias .intro-module{ margin-top:60px; }
.startseite-alias .intro-module .intro-card{
  border:1px solid var(--border-muted)!important;
  border-radius:var(--card-radius)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.05)!important;
}
.startseite-alias .intro-module .intro-card .card-body{ padding:28px 24px 24px!important; }
@media (max-width:768px){
  .startseite-alias .intro-module .intro-card .card-body{ padding:24px 32px 20px!important; }
}
.startseite-alias .intro-module h2,
.startseite-alias .intro-module h3{ text-transform:none!important; }
.startseite-alias .intro-module p{ color:#5a6a74; }
.startseite-alias .intro-module .btn{ border-radius:10px; padding:.6rem 1rem; }

/* ---------------------------------
   Offers
---------------------------------- */
.startseite-alias .offers-module{ margin-top:35px !important; }
.startseite-alias .offers-module h2{ text-transform:none!important; margin-bottom:35px !important; }
.startseite-alias .offers-module .offer-card{
  border:1px solid #cfe0f5; border-radius:var(--card-radius);
  box-shadow:0 4px 14px rgba(0,0,0,.04); height:100%;
}
.startseite-alias .offers-module .offer-card .card-body{ padding:32px 24px 24px!important; display:flex; flex-direction:column; }
.startseite-alias .offers-module .offer-card .icon-badge{
  width:64px; height:64px; border:1px solid #cfe0f5; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#fff; margin:12px 0 20px;
}
.startseite-alias .offers-module .offer-icon{ width:48px; height:48px; display:block; }
.startseite-alias .offers-module .offer-card h3{ text-transform:none!important; margin-bottom:.5rem; }
.startseite-alias .offers-module .offer-card p{ color:#5a6a74; flex-grow:1; }
.startseite-alias .offers-module .offer-card .btn{ margin-top:auto; }
@media (max-width:768px){
  .startseite-alias .offers-module .offer-card .card-body{ padding:28px 32px 24px!important; }
}

/* ---------------------------------
   Impulses
---------------------------------- */
.startseite-alias .impulses-module{ margin-top:60px; }
.startseite-alias .impulses-module .row > [class*="col-"]:nth-child(3n+1) .card{ border-top:4px solid #cfe8cf!important; }
.startseite-alias .impulses-module .row > [class*="col-"]:nth-child(3n+2) .card{ border-top:4px solid #f0e7cf!important; }
.startseite-alias .impulses-module .row > [class*="col-"]:nth-child(3n)   .card{ border-top:4px solid #cfe0f5!important; }
.startseite-alias .impulses-module .row > [class*="col-"]:nth-child(3n+1) .icon-badge{ background:#cfe8cf; border:none; }
.startseite-alias .impulses-module .row > [class*="col-"]:nth-child(3n+2) .icon-badge{ background:#fff; border:1px solid #e0e0e0; }
.startseite-alias .impulses-module .row > [class*="col-"]:nth-child(3n)   .icon-badge{ background:#cfe0f5; border:none; }

.startseite-alias .impulses-module .card .card-body{
  padding:28px 24px 24px!important; display:flex; flex-direction:column; align-items:center; text-align:center;
}
@media (max-width:768px){
  .startseite-alias .impulses-module .card .card-body{ padding:24px 32px 20px!important; }
}
.startseite-alias .impulses-module .icon-badge{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.08); margin:12px 0 18px;
}
.startseite-alias .impulses-module .impulse-icon{ width:36px; height:36px; display:block; }
.startseite-alias .impulses-module h2,
.startseite-alias .impulses-module h3,
.startseite-alias .impulses-module .h5{ text-transform:none!important; }
.startseite-alias .impulses-module p{ color:#5a6a74; margin-bottom:0; }

/* ---------------------------------
   SEO-/Landing-Block inkl. Accordion
---------------------------------- */
.startseite-alias .seo-module{ margin-top:60px; }
.startseite-alias .seo-module .seo-card{
  border:1px solid var(--border-muted)!important; border-radius:var(--card-radius)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.05)!important; border-top:4px solid #cfe0f5!important;
}
.startseite-alias .seo-module .seo-card .card-body{ padding:28px 24px 24px!important; }
.startseite-alias .seo-module h2,
.startseite-alias .seo-module h3,
.startseite-alias .seo-module .h5{ text-transform:none!important; }
.startseite-alias .seo-module p,
.startseite-alias .seo-module li{ color:#5a6a74; }

/* JS-freies Akkordeon */
.startseite-alias .seo-module .seo-details details{
  border:1px solid var(--border-muted); border-radius:10px; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04); margin-bottom:12px; overflow:hidden;
}
.startseite-alias .seo-module .seo-details summary{
  list-style:none; cursor:pointer; user-select:none; padding:14px 16px;
  font-weight:600; color:#2f3a40; display:flex; align-items:center; justify-content:space-between;
  background:#fff; transition:background-color .18s ease; border-radius:10px;
}
.startseite-alias .seo-module .seo-details summary::-webkit-details-marker{ display:none; }
.startseite-alias .seo-module .seo-details details[open] > summary{
  background:rgba(207,224,245,.35); border-bottom:1px solid var(--border-muted); border-radius:10px 10px 0 0;
}
.startseite-alias .seo-module .seo-details .chevron{ transition:transform .2s ease; }
.startseite-alias .seo-module .seo-details details[open] .chevron{ transform:rotate(180deg); }
.startseite-alias .seo-module .seo-details .details-body{ padding:12px 16px 14px; color:#5a6a74; line-height:1.65; }
.startseite-alias .seo-module .btn{ border-radius:10px; padding:.6rem 1rem; }

/* kleiner Abstands-Tweak (UL → Details) */
.startseite-alias .seo-module .col-lg-6 ul.mb-4{ margin-bottom:0!important; }
.startseite-alias .seo-module ul.mb-4 + .seo-details{ margin-top:1rem!important; }

/* ---------------------------------
   Karten-Headlines & Pastell-Akzente (nur Startseite)
---------------------------------- */
.startseite-alias .card h1{ font-size:clamp(1.4rem, 2.2vw, 1.7rem); line-height:1.25; }
.startseite-alias .card h2{ font-size:clamp(1.15rem, 1.8vw, 1.3rem); line-height:1.35; }
.startseite-alias .card h3{ font-size:clamp(1.05rem, 1.6vw, 1.18rem); line-height:1.4; }

.startseite-alias .card.accent-blue{  border-top:4px solid #cfe0f5!important; }
.startseite-alias .card.accent-green{ border-top:4px solid #cfe8cf!important; }
.startseite-alias .card.accent-beige{  border-top:4px solid #f0e7cf!important; }
.startseite-alias .card.frame-blue{   border-color:#cfe0f5!important; }
.startseite-alias .card.frame-green{  border-color:#cfe8cf!important; }
.startseite-alias .card.frame-beige{  border-color:#f0e7cf!important; }

/* ---------------------------------
   Portrait-Foto (Intro)
---------------------------------- */
@media (min-width: 992px){
  #intro-photo{ width:230px !important; }
}
#intro-photo{ margin-left:auto; margin-right:auto; }
#intro-photo{
  position:relative;
  aspect-ratio:3 / 4;
  overflow:hidden;
  border-radius:50% / 42%;
}
#intro-photo::after{
  content:"";
  position:absolute; inset:0;
  border:3px solid var(--pastel-beige,#F6F1E7);
  border-radius:50% / 42%;
  pointer-events:none;
}
#intro-photo img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 0%;
}

/* ---------------------------------
   HERO – Konsolidiert (Startseite)
---------------------------------- */

/* Variablen: nur hier feinjustieren */
.startseite-alias{
  --hero-fx: 50%;
  --hero-fy: 100%;   /* Bild unten anlegen */
  --hero-base: 36vh; /* Basis-Höhe Desktop */
  --hero-extra: 6px; /* dein Feintuning */
}

/* Abschnitt auf Linie mit Unterseiten (-14px) */
@media (min-width: 992px){
  .startseite-alias #hero{
	  margin-top:0 !important;
	  padding-top: 16px !important;
  }
}

/* Mobile: echte Vollbreite, wenn Hero in schmaler Spalte steht */
@media (max-width:992px){
  .startseite-alias .astroid-row > [class*="col"]:has(.hero-module),
  .startseite-alias .astroid-row > .astroid-column:has(.hero-module),
  .startseite-alias [class*="col-"]:has(.hero-module){
    flex:0 0 100%!important; max-width:100%!important; padding-left:0!important; padding-right:0!important;
  }
  .startseite-alias .hero-module{
    width:100vw!important; max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important; margin-right:calc(50% - 50vw)!important;
  }
  .startseite-alias .hero-module .container{
    max-width:1140px; padding-left:12px; padding-right:12px; margin-left:auto; margin-right:auto;
  }
}

/* DOM-Sicherung: innere .hero-card neutralisieren, falls doppelt gerendert */
.startseite-alias .hero-module .hero-card .hero-card{
  background:transparent!important; border:0!important; box-shadow:none!important;
  border-radius:inherit!important; overflow:visible!important;
}
.startseite-alias .hero-module .hero-card .hero-card::before,
.startseite-alias .hero-module .hero-card .hero-card::after{ content:none!important; }

/* Grundaufbau der Hero-Karte */
.startseite-alias .hero-module .hero-card{
  position:relative;
  overflow:hidden;
  border:none!important;
  border-radius:var(--card-radius)!important;
}

/* Bild-Layer (respect border-radius) */
.startseite-alias .hero-module .hero-card::before{
  content:""; position:absolute; inset:0;
  background-position: var(--hero-fx) var(--hero-fy) !important;
  background-size: cover;
  background-repeat: no-repeat;
  z-index:0;
  transform:scale(1.01); /* feine Kanten vermeiden */
}

/* Dezentes, helles Overlay (einheitlich) 
.startseite-alias .hero-module .hero-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.20) 100%);
  z-index:0;
}*/

/* Inhaltsebene über dem Bild */
.startseite-alias .hero-module .hero-card > *{ position:relative; z-index:2; }
.startseite-alias .hero-module .hero-card > .card-body{
  position:relative; z-index:2;
  min-height:260px; /* mobile floor für Inhalt */
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  text-align:center; padding:var(--hero-safe)!important;
  padding-block:1.25rem !important; /* Desktop etwas schlanker */
}

/* Farben/Typo im Hero */
.startseite-alias .hero-module .hero-card h1,
.startseite-alias .hero-module .hero-card p,
.startseite-alias .hero-module .hero-card .lead,
.startseite-alias .hero-module .hero-card .subtitle,
.startseite-alias .hero-module .hero-card li{ color:#fff!important; }
.startseite-alias .hero-module .hero-card h1{ text-transform:none!important; }

/* Höhe NUR hier steuern (Desktop) */
@media (min-width: 992px){
  .startseite-alias .hero-module .hero-card{
    min-height: calc(var(--hero-base) + var(--hero-extra)) !important;
  }
}

/* Bildquellen: Fallback + moderne Formate */
.startseite-alias .hero-module .hero-card::before{
  background-image: url("/images/joomlaplates/hero-home-1920.jpg"); /* Fallback JPG */
}
@supports (background-image: image-set(url("x.avif") type("image/avif") 1x)){
  .startseite-alias .hero-module .hero-card::before{
    background-image: image-set(
      url("/images/joomlaplates/hero-home-1920.avif") type("image/avif") 1x,
      url("/images/joomlaplates/hero-home-1920.webp") type("image/webp") 1x,
      url("/images/joomlaplates/hero-home-1920.jpg")  type("image/jpeg") 1x
    );
  }
  @media (max-width: 991.98px){
    .startseite-alias .hero-module .hero-card::before{
      background-image: image-set(
        url("/images/joomlaplates/hero-home-960.avif") type("image/avif") 1x,
        url("/images/joomlaplates/hero-home-960.webp") type("image/webp") 1x,
        url("/images/joomlaplates/hero-home-960.jpg")  type("image/jpeg") 1x
      );
    }
  }
}

/* Abstand Hero → Intro kompakter */
.startseite-alias #hero .intro-module{ margin-top:35px !important; }

/* ==== Abstand Impulse-Button → SEO-Modul ==== */
.startseite-alias .impulses-module .mt-5{ margin-top:35px !important; }
.startseite-alias .seo-module{ margin-top:35px !important; }

/* === HERO – Fix für 1920×1080 / 16:9-Desktops ===================== */
/* Zielhöhe für 16:9-Desktops (angleichen an Unterseiten) */
.startseite-alias{ --hero-16x9-target: 540px; } /* ggf. 520–560px testen */

/* greift auf großen Screens mit 16:9 (u. a. 1920×1080) */
@media (min-width: 1200px) and (aspect-ratio: 16/9){
  .startseite-alias .hero-module .hero-card{
    /* nimm das Größere aus (36vh + 6px) und der Zielhöhe */
    min-height: max(calc(var(--hero-base) + var(--hero-extra)), var(--hero-16x9-target)) !important;
  }
}

/* Optional: enger nur für gängige FHD-Breite (1920±) */
@media (min-width: 1600px) and (max-width: 2048px) and (aspect-ratio: 16/9){
  .startseite-alias .hero-module .hero-card{
    min-height: var(--hero-16x9-target) !important;
  }
}

/* FHD/16:9 Desktops (~1920×1080): präziser Zielwert */
@media (min-width: 1600px) and (max-width: 2048px) and (min-height: 900px) and (max-height: 1140px){
  .startseite-alias #hero .hero-module .hero-card,
  .startseite-alias .hero-module .hero-card{
    min-height: 460px !important; /* Feintuning: 500–540 px */
  }
}

/* Scrollbar-Breite immer reservieren → kein Springen */
html { scrollbar-gutter: stable both-edges; }

/* Fallback für Browser ohne scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }  /* erzwingt immer eine (ggf. inaktive) Scrollbar */
}

@media (max-width: 768px){
  body.startseite-alias #astroid-header-spacer,
  body.startseite-alias .astroid-header-spacer {
    display: none !important;
    height: 0 !important;
  }
}

@media (max-width: 768px){
  body.startseite-alias #astroid-sticky-header + * {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px){
  body.startseite-alias #hero,
  body.startseite-alias #hero > .container,
  body.startseite-alias #hero .astroid-row,
  body.startseite-alias #hero .astroid-column,
  body.startseite-alias #hero .astroid-module-position,
  body.startseite-alias #hero .top-a-1-position.moduletable.hero-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 768px){
  body.startseite-alias #hero .top-a-2-position,
  body.startseite-alias #hero .top-a-2-position.moduletable {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  body.startseite-alias #hero .top-a-2-position .intro-module {
    margin-top: -6px !important;
  }
}