/* =========================
   DESIGN-VARS (Palette)
   ========================= */
:root{
  --accent: #0d6efd;      /* Primärblau */
  --surface: #ffffff;     /* Karten-Hintergrund */
  --border: #e5e7eb;      /* zarte Rahmen */
  --muted:  #6b7280;      /* Sekundärtext */
  --shade:  #f3f4f6;      /* Badge/Chips-Hintergrund */
}

/* =========================
   TYPO / BADGES
   ========================= */
.region-hint{
  display:inline-block;background:var(--accent);color:#fff;
  padding:.4rem .7rem;border-radius:999px;font-size:.85rem;letter-spacing:.3px
}
.muted{color:var(--muted)}
.heading-hero{font-size:clamp(2rem,4vw,3.5rem);font-weight:900;line-height:1.1}
.heading-hero .accent{color:var(--accent)}

/* =========================
   LOGO – EINHEITLICH
   ========================= */
.header-bar .site-logo a{
  border:none !important;padding:0 !important;background:transparent !important;
  box-shadow:none !important;display:inline-flex;align-items:center;line-height:0;
  text-transform:none !important;
}
.header-bar .site-logo a img.logo-img{
  height:120px; width:auto; display:block;   /* Desktop */
}
@media (max-width: 991.98px){
  .header-bar .site-logo a img.logo-img{ height:56px; }  /* Mobil */
}

/* =========================
   HERO – iOS Fix & Layout
   ========================= */
/* iOS rendert fixed oft nicht => scroll + zentriert */
.site-section-hero.bg-image,
.bg-image{
  background-attachment: scroll !important;
  background-position: center center;
  background-size: cover;
}

/* sichere Höhe auf Mobil (vermeidet Status/URL-Bar Bugs) */
.site-section-hero{ min-height: 75svh; }

/* Hero-CTAs: gleiche Breite, schön skalierend */
.hero-ctas{
  display:grid; grid-template-columns:1fr; gap:clamp(8px,1.6vw,12px);
  width:min(92vw,420px); margin:0 auto;
}
.hero-ctas .btn.btn-md{
  width:100%; display:block;
  font-size:clamp(12px,1.6vw,15px);
  padding-block:clamp(10px,1.2vw,14px);
  padding-inline:clamp(16px,3vw,22px);
  border-width:2px; border-radius:clamp(10px,1.2vw,12px);
  letter-spacing:.08em;
}
@media (min-width:768px){
  .hero-ctas{
    grid-auto-flow:column; grid-auto-columns:1fr;
    width:min(90vw,520px);
  }
}

/* =========================
   MOBILE NAVBAR – STICKY
   ========================= */
@media (max-width: 991.98px){
  .header-bar{
    position:sticky; top:0; width:100%; height:auto; min-height:64px;
    padding:10px 16px; background:var(--surface); z-index:1000;
    box-shadow:0 2px 12px rgba(17,24,39,.06);
  }
  .main-content{ padding-top:0; }
  .site-section-hero{ margin-top:0 !important; }
  section[id]{ scroll-margin-top:80px; } /* Anker nicht unter Leiste verstecken */
}

/* =========================
   PRICE CARD – POLISH
   ========================= */
.price-card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:2.4rem 2rem;
  box-shadow:0 14px 32px rgba(17,24,39,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:0 24px 48px rgba(17,24,39,.12); }
.price-card h4{ font-weight:700; margin-bottom:.75rem; }
.price-card .badge-featured{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-weight:700; font-size:.8rem;
  padding:.35rem .7rem; border-radius:999px; box-shadow:0 6px 18px rgba(37,99,235,.25);
}
.price-card .price{
  font-size:2.6rem; line-height:1.1; font-weight:800; letter-spacing:.2px;
  margin:.2rem 0 .5rem; font-variant-numeric: lining-nums;
}
.price-card .price .per{
  display:block; font-size:1.05rem; font-weight:600; color:var(--muted); margin-top:.35rem;
}
.price-card ul{ list-style:none; padding-left:0; margin-top:1.1rem; text-align:left; }
.price-card ul li{ position:relative; padding-left:32px; margin:.5rem 0; }
.price-card ul li:before{
  content:"\e5ca"; font-family:"icomoon"; position:absolute; left:0; top:-.1rem;
  font-size:20px; color:var(--accent);
}
.price-card .btn{ border-radius:12px; padding:.9rem 1.1rem; box-shadow:0 10px 20px rgba(37,99,235,.18); }

/* =========================
   EXTRAS – sauberes Grid, runde Preis-Pille
   ========================= */
.extras{
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:1.25rem 1.5rem; box-shadow:0 8px 22px rgba(17,24,39,.06);
}
.extras h5{ font-weight:700; }

/* Container für dynamisch gerenderte Extras */
#extras-list{ --bubble-h: 38px; --bubble-px: 14px; }

/* Jede Extra-Zeile: Text links, Preis rechts */
#extras-list > *{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:12px; padding:12px 0; border-bottom:1px dashed var(--border);
}
#extras-list > *:last-child{ border-bottom:0; }

/* Label/Preis (falls du Klassen nutzt – empfohlen) */
#extras-list .extra-label{ line-height:1.3; }
#extras-list .extra-price,
#extras-list > * > :last-child{            /* greift auch ohne Klassen */
  justify-self:end; display:inline-flex; align-items:center;
  height:var(--bubble-h); padding:0 var(--bubble-px);
  border-radius:9999px; border:1px solid #cbd5e1; background:#f1f5f9;
  font-weight:800; white-space:nowrap; line-height:1;
  position:static !important; float:none !important; margin:0 !important;
}
@media (max-width:480px){
  #extras-list{ --bubble-h:34px; --bubble-px:10px; }
}

/* =========================
   FOOTER-LINKS
   ========================= */
.footer-links a,
.row .col-md-12.text-center a{
  color:#6b7280; text-decoration:none;
}
.row .col-md-12.text-center a:hover{
  color:var(--accent); text-decoration:underline;
}

/* 1) iOS-Safari Fix: Parallax aus, volle Höhe korrekt */
@supports (-webkit-touch-callout: none) {
  .bg-image { 
    background-attachment: scroll !important;  /* fixed deaktivieren */
  }
  .site-section-hero, 
  .site-section-hero .row{
    min-height: 100svh;   /* sichert die Höhe trotz iOS-Toolbar */
    height: auto;
  }
}

/* Parallax global aus – stabil auf iOS */
.bg-image { background-attachment: scroll !important; }

/* iOS-Höhenfix */
@supports (-webkit-touch-callout: none) {
  .site-section-hero, .site-section-hero .row {
    min-height: 100svh;
    height: auto;
  }
}

/* Hero-Picture als echten Background-Ersatz */
.site-section-hero { position: relative; }
.hero-picture{ position:absolute; inset:0; z-index:0; display:block; }
.hero-picture img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* Inhalt über dem Bild halten (Overlay in deiner CSS hat z-index:1) */
.site-section-hero > .row { position: relative; z-index: 2; }

/* iOS fix: KEIN fixed-Background (verhindert Darstellungsfehler) */
.bg-image { background-attachment: scroll !important; }
@supports (-webkit-touch-callout: none) {
  .bg-image { background-attachment: scroll !important; }
}