/* AENDRING Header — eigener Header (ersetzt Elementor-Header 27192). */

/* Fallback, falls der Location-Filter nicht greift: alten Elementor-Header verstecken. */
header.elementor-location-header { display: none !important; }

/* ============================ Basis / Sticky / Pille ============================ */
.aend-hdr { position: sticky; top: 0; z-index: 1000; padding: 10px 20px 0; }
/* Eingeloggt: unter der WP-Admin-Bar einrasten (sonst ueberlappt der fixe WP-Balken). */
body.admin-bar .aend-hdr { top: 32px; }
@media (max-width: 782px) { body.admin-bar .aend-hdr { top: 46px; } }
@media (max-width: 1023px) { body.admin-bar .aend-hdr-flyout { top: 128px; } }
@media (max-width: 782px) { body.admin-bar .aend-hdr-flyout { top: 142px; } }
.aend-hdr-pill {
  display: flex; align-items: center; gap: 24px;
  max-width: 1430px; margin: 0 auto; padding: 12px 20px;
  background: #fffdf9; border: 0; border-radius: 999px;
  box-shadow: 0 6px 24px rgba(25,33,47,.06);
}
.aend-hdr-logo { display: inline-flex; flex-shrink: 0; }
.aend-hdr-logo img { display: block; width: 150px; height: auto; }
.aend-hdr-nav { margin-left: auto; }
.aend-hdr-actions { display: flex; align-items: center; gap: 12px; margin-left: 16px; }
.aend-hdr-menu { list-style: none; margin: 0; padding: 0; }
/* Der CTA ist als Menue-Item (anf-menu-cta) in "logged-out" enthalten — wir rendern
   einen eigenen CTA-Button, daher das Menue-Item ueberall ausblenden. */
.aend-hdr-menu .anf-menu-cta { display: none !important; }

/* ============================ Mobil (<=1024) ============================ */
@media (max-width: 1023px) {
  /* Handy: Pille solide, KEIN backdrop-filter (iOS-sicher). Glas/Blur nur Tablet+Desktop. */
  .aend-hdr-pill { background: #fffdf9 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .aend-hdr-nav, .aend-hdr-login span, .aend-hdr-cta { display: none; } /* CTA-Text -> Flyout */
  .aend-hdr-actions { margin-left: auto; }

  /* Login: rahmenloses Outline-Icon im Stil des Burgers (gleiche Farbe + Strichstaerke). */
  .aend-hdr-login { display: inline-flex; align-items: center; justify-content: center; color: #1c2b3e; text-decoration: none; padding: 6px; }
  .aend-hdr-login-ico { width: 26px; height: 26px; display: block; }

  /* Burger -> X. !important neutralisiert die globale Theme-Button-Optik (navy Pille). */
  .aend-hdr-burger { display: inline-flex !important; background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; padding: 6px !important; color: #1c2b3e !important; cursor: pointer; }
  .aend-hdr-burger-box { width: 28px; height: 18px; position: relative; display: block; }
  .aend-hdr-burger-bar, .aend-hdr-burger-bar::before, .aend-hdr-burger-bar::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2.4px; border-radius: 2px; background: currentColor;
    transition: transform .25s ease, opacity .2s ease, background-color .15s ease; }
  .aend-hdr-burger-bar { top: 50%; transform: translateY(-50%); }
  .aend-hdr-burger-bar::before { top: -8px; }
  .aend-hdr-burger-bar::after { top: 8px; }
  .aend-hdr-open .aend-hdr-burger-bar { background: transparent; }
  .aend-hdr-open .aend-hdr-burger-bar::before { transform: translateY(8px) rotate(45deg); }
  .aend-hdr-open .aend-hdr-burger-bar::after { transform: translateY(-8px) rotate(-45deg); }

  /* Flyout-Card (Look wie zuvor). */
  .aend-hdr-flyout {
    position: fixed; top: 96px; right: 20px; left: auto; width: calc(100% - 40px); max-width: 360px; z-index: 9990;
    background: #fffdf9; border: 1px solid #e6ddcd; border-radius: 20px;
    box-shadow: 0 24px 50px rgba(25,33,47,.16); padding: 12px 14px 16px;
    max-height: calc(100vh - 110px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(.98); transform-origin: top right;
    transition: opacity .24s ease, transform .28s cubic-bezier(.2,.7,.2,1), visibility .24s linear;
  }
  .aend-hdr-open .aend-hdr-flyout { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .aend-hdr-flyout .aend-hdr-menu { display: flex; flex-direction: column; gap: 2px; }
  .aend-hdr-flyout .aend-hdr-menu a { display: flex; align-items: center; color: #1c2b3e; font: 500 16px/1.4 "Inter", -apple-system, sans-serif; padding: 12px 16px; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
  .aend-hdr-flyout .aend-hdr-menu a:hover { background: #f7f8fa; }
  .aend-hdr-flyout-cta { display: flex; align-items: center; justify-content: center; margin-top: 18px; background: #23344f; color: #fff; font: 700 16px/1 "Inter", sans-serif; border-radius: 10px; padding: 15px 16px; text-decoration: none; }
  .aend-hdr-flyout-cta:hover { background: #16263c; }

  /* Backdrop: einfacher Dim, KEIN Blur (iOS-sicher). */
  .aend-hdr-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(28,43,62,.6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s ease, visibility .26s linear; }
  body.aend-hdr-menu-open .aend-hdr-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
  /* Keine Scroll-Sperre (kein overflow:hidden / position:fixed) — vermeidet iOS-Ruckler.
     Header bleibt sticky, Flyout/Backdrop fixed; der Hintergrund darf hinter dem
     Backdrop scrollen. */
}
@media (max-width: 600px) {
  .aend-hdr { padding-left: 16px; padding-right: 16px; }
  .aend-hdr-flyout { right: 16px; width: calc(100% - 32px); max-width: none; }
}

/* ============================ Desktop (>=1025) ============================ */
@media (min-width: 1024px) {
  .aend-hdr-burger, .aend-hdr-flyout, .aend-hdr-backdrop, .aend-hdr-login-ico { display: none !important; }

  /* Nav horizontal, Inter, dunkel. */
  .aend-hdr-menu { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .aend-hdr-menu a, .aend-hdr-cta, .aend-hdr-login { white-space: nowrap; }
  .aend-hdr-menu li { position: relative; }
  .aend-hdr-menu a {
    position: relative; display: inline-block;
    font: 500 15px/1 "Inter", -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .005em;
    color: #1c2b3e; text-decoration: none; padding: 10px 12px;
  }
  .aend-hdr-menu a:hover { color: #b1862f; }

  /* Buttons. */
  .aend-hdr-login { font: 500 15px/1 "Inter", sans-serif; color: #1c2b3e; text-decoration: none; padding: 10px 18px; border: 1px solid #cdc2ac; border-radius: 999px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
  .aend-hdr-login:hover { background: #f7f5ef; }
  .aend-hdr-cta { font: 600 15px/1 "Inter", sans-serif; color: #fff; background: #23344f; text-decoration: none; padding: 12px 20px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
  .aend-hdr-cta:hover { background: #16263c; }

  /* Glas-ueber-Hero NUR auf der Startseite, solange nicht gescrollt. */
  .aend-hdr-pill, .aend-hdr-logo img, .aend-hdr-menu a, .aend-hdr-login, .aend-hdr-cta {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, filter .25s ease;
  }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-pill {
    background: rgba(255,255,255,.10);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-logo img { filter: brightness(0) invert(1); }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-menu a { color: #fff; }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-menu a:hover { color: #e8c98a; }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-login { color: #fff; border-color: rgba(255,255,255,.6); }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-login:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.85); }
  body.aend-front:not(.aend-hdr-solid) .aend-hdr-cta { background: #c39a44; color: #1b2740; }
}

/* Startseite mobil: Bereich hinter/ueber dem schwebenden Header dunkel (wie der Hero),
   damit hinter Safaris durchscheinender URL-Leiste der dunkle Hero-Look erscheint statt
   creme. Body-Hintergrund zeigt sich nur im 10px-Spalt ueber dem Header; alle Sektionen
   haben eigene Hintergruende, daher kein Durchscheinen im Content. */
@media (max-width: 1023px) {
  body.home { background-color: #26303f; }
}

/* Startseite, breit + kurze Fensterhoehe (z.B. Querformat): der vertikal zentrierte
   Hero-Inhalt rutscht sonst hinter den Header. Hier oben unter dem Header beginnen.
   Selektor mit html-Prefix (0,3,1), um die startseite.css-Zentrierung (0,3,0) zu schlagen.
   Nur >900px Breite (darunter ist der Inhalt eh unten ausgerichtet) + niedrige Hoehe. */
@media (min-width: 901px) and (max-height: 820px) {
  /* !important noetig: der padding:0 40px-Shorthand aus startseite.css setzt sich sonst
     gegen unser padding-top durch (Shorthand schlaegt Longhand bei gleicher Kaskade). */
  html .aend-fin .fsa-hero .fsa-in {
    align-items: start !important; box-sizing: border-box;
    padding-top: calc(var(--aend-hd-h, 74px) + 20px) !important;
  }
  /* Eingeloggt sitzt der Header 32px unter der Admin-Bar, der Hero aber nicht —
     den Versatz im Abstand ausgleichen, sonst landet der Text hinter dem Header. */
  body.admin-bar .aend-fin .fsa-hero .fsa-in {
    padding-top: calc(var(--aend-hd-h, 74px) + 52px) !important;
  }
}

/* Tablet (1024-1199): gleiches Desktop-Design, nur kompakter, damit die volle Nav
   einzeilig passt (sonst Umbruch). Handy (<=1023) bleibt Burger. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .aend-hdr-pill { gap: 16px; }
  .aend-hdr-logo img { width: 122px; }
  .aend-hdr-menu a { font-size: 14px; padding: 9px 9px; }
  .aend-hdr-actions { gap: 8px; }
  .aend-hdr-login { font-size: 14px; padding: 9px 14px; }
  .aend-hdr-cta { font-size: 14px; padding: 10px 16px; }
}