/* ============================================================
   Layout-Varianten (umschaltbar über das Design-Panel)
   <html> trägt die Klassen:
     Hero:       (keine) = Überlagert | hero-ralf | hero-fade | hero-panorama | hero-portal
     Navigation: (keine) = Flach      | nav-drop  | nav-gruppe | nav-sitemap
   Die var(--k-...)-Fallbacks sorgen dafür, dass Dropdowns &
   Fade-Verläufe automatisch zur aktiven Farbwelt passen.
   ============================================================ */

/* ---------- Hero-Umschaltung (Startseite) ---------- */
.na-hero-ralf, .na-hero-ralfpan, .na-hero-ralfkopf, .na-hero-panorama, .na-hero-portal, .na-wellen-quote { display: none; }

html.hero-ralf .na-hero-overlay,
html.hero-ralfpan .na-hero-overlay,
html.hero-ralfkopf .na-hero-overlay,
html.hero-panorama .na-hero-overlay,
html.hero-portal .na-hero-overlay { display: none !important; }

html.hero-ralf .na-hero-ralf { display: block !important; }
html.hero-ralfpan .na-hero-ralfpan { display: block !important; }
html.hero-ralfkopf .na-hero-ralfkopf { display: block !important; }
html.hero-panorama .na-hero-panorama { display: block !important; }
html.hero-portal .na-hero-portal { display: block !important; }

/* Ralf im Hero + Zitat-Welle: Hero ohne Welle (nur Verlauf), dafür wandert
   die Welle als Zitat-Balken unters Intro und ersetzt das schlichte Zitat. */
html.hero-zitatwelle .na-hero-ralfkopf[style][style] {
  background:
    linear-gradient(155deg,
      var(--fade-c1, rgba(30, 54, 50, 0.97)) 0%,
      var(--fade-c2, rgba(42, 75, 71, 0.94)) 55%,
      var(--fade-c3, rgba(59, 89, 82, 0.90)) 100%) !important;
}
html.hero-zitatwelle .na-wellen-quote { display: block !important; }
html.hero-zitatwelle .na-zitat-plain { display: none !important; }

/* ---------- Ralf-Hero: Foto weich ins Creme auslaufen lassen ----------
   Maske liegt auf dem Rahmen (nicht auf dem <img>), damit der
   Duotone-Verlauf im ::after mit ausgeblendet wird. Anzeige max. 600px
   breit — das 646px-Foto wird nie hochskaliert. */
.na-ralf-frame {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 13%), linear-gradient(to top, transparent 0, #000 15%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 13%), linear-gradient(to top, transparent 0, #000 15%);
  mask-composite: intersect;
}
.na-ralf-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(35, 66, 63, 0.14), transparent 45%);
  pointer-events: none;
}
.na-ralf-img {
  display: block;
  width: 100%;
  filter: saturate(0.92) contrast(1.02);
}

/* Fade: Welle als Vollbild, Verlauf nur hinter dem Text links.
   Gilt auf der Startseite und auf den Unterseiten. */
/* [style] doppelt angehängt = höhere Spezifität als die
   --k-hero-bg-Regel in theme-kunde.css (die später geladen wird) */
html.hero-fade section[style*="wellen.jpg"][style] {
  background:
    linear-gradient(100deg,
      var(--fade-c1, rgba(26, 48, 44, 0.94)) 0%,
      var(--fade-c2, rgba(28, 52, 48, 0.86)) 34%,
      var(--fade-c3, rgba(35, 66, 63, 0.30)) 58%,
      rgba(0, 0, 0, 0) 78%),
    url('/img/wellen.jpg') center 65% / cover no-repeat !important;
}

/* ---------- Unterseiten-Heros folgen der gewählten Hero-Variante ----------
   Ralf / Panorama / Portal: heller Hero (Creme, dunkle Schrift)
   statt dunklem Overlay — die Startseiten-Designsprache läuft durch. */
html.hero-ralf section[style*="wellen.jpg"][style]:not(.na-hero-overlay),
html.hero-ralfpan section[style*="wellen.jpg"][style]:not(.na-hero-overlay),
html.hero-panorama section[style*="wellen.jpg"][style]:not(.na-hero-overlay),
html.hero-portal section[style*="wellen.jpg"][style]:not(.na-hero-overlay) {
  background: var(--k-page, #FAF7F1) !important;
}

/* Textfarben im hellen Hero drehen (Kicker / Headline / Fließtext / Hinweisbox) */
html.hero-ralf section[style*="wellen.jpg"] [style*="color: rgb(200, 185, 143)"],
html.hero-ralfpan section[style*="wellen.jpg"] [style*="color: rgb(200, 185, 143)"],
html.hero-panorama section[style*="wellen.jpg"] [style*="color: rgb(200, 185, 143)"],
html.hero-portal section[style*="wellen.jpg"] [style*="color: rgb(200, 185, 143)"] { color: var(--k-accent, #B0703C) !important; }

html.hero-ralf section[style*="wellen.jpg"] [style*="color: rgb(246, 242, 232)"],
html.hero-ralfpan section[style*="wellen.jpg"] [style*="color: rgb(246, 242, 232)"],
html.hero-panorama section[style*="wellen.jpg"] [style*="color: rgb(246, 242, 232)"],
html.hero-portal section[style*="wellen.jpg"] [style*="color: rgb(246, 242, 232)"] { color: var(--k-primary, #23423F) !important; }

html.hero-ralf section[style*="wellen.jpg"] [style*="color: rgb(220, 228, 221)"],
html.hero-ralfpan section[style*="wellen.jpg"] [style*="color: rgb(220, 228, 221)"],
html.hero-panorama section[style*="wellen.jpg"] [style*="color: rgb(220, 228, 221)"],
html.hero-portal section[style*="wellen.jpg"] [style*="color: rgb(220, 228, 221)"] { color: var(--k-body, #4C463D) !important; }

html.hero-ralf section[style*="wellen.jpg"] [style*="color: rgb(228, 217, 184)"],
html.hero-ralfpan section[style*="wellen.jpg"] [style*="color: rgb(228, 217, 184)"],
html.hero-panorama section[style*="wellen.jpg"] [style*="color: rgb(228, 217, 184)"],
html.hero-portal section[style*="wellen.jpg"] [style*="color: rgb(228, 217, 184)"] { color: #8A5A22 !important; }

/* Ralf / Ralf Panorama / Panorama: auslaufendes Wellen-Band unter dem Unterseiten-Hero */
html.hero-ralf section[style*="wellen.jpg"][style]:not(.na-hero-overlay)::after,
html.hero-ralfpan section[style*="wellen.jpg"][style]:not(.na-hero-overlay)::after,
html.hero-panorama section[style*="wellen.jpg"][style]:not(.na-hero-overlay)::after {
  content: "";
  display: block;
  height: 190px;
  background: url('/img/wellen.jpg') center 32% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
}

/* Portal: kleiner Wellen-Bogen als Akzent rechts im Unterseiten-Hero */
html.hero-portal section[style*="wellen.jpg"][style]:not(.na-hero-overlay) {
  position: relative;
  overflow: hidden;
}
html.hero-portal section[style*="wellen.jpg"][style]:not(.na-hero-overlay)::after {
  content: "";
  position: absolute;
  right: clamp(24px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: 205px;
  background: url('/img/wellen.jpg') 70% 30% / cover no-repeat;
  border-radius: 999px 999px 8px 8px;
  box-shadow: 0 0 0 10px var(--k-page, #FAF7F1), 0 0 0 11px #C8B98F;
}
@media (max-width: 1100px) {
  html.hero-portal section[style*="wellen.jpg"][style]:not(.na-hero-overlay)::after { display: none; }
}
/* Hat der Unterseiten-Hero rechts ein Bild/einen Platzhalter, wird DER zum
   Portal-Bogen — der Deko-Bogen entfällt dort (Kollisionsvermeidung). */
html.hero-portal section[style*="wellen.jpg"][style]:not(.na-hero-overlay):has([style*="aspect-ratio"])::after { display: none; }
html.hero-portal section[style*="wellen.jpg"] [style*="aspect-ratio"] {
  border-radius: 999px 999px 10px 10px !important;
}

/* ---------- Qualifikationen: dicht gepackte Spalten statt Grid-Löcher ---------- */
.na-qualis { columns: 2; column-gap: 30px; }
.na-qualis > span { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 900px) {
  .na-qualis { columns: 1; }
}

/* ---------- FAQ: einheitliche Marker mit hängendem Einzug ----------
   Behebt den ausgerückten ersten Punkt (list-style-Mix) und verhindert,
   dass umbrechender Text unter den Pfeil rutscht. */
details > summary { list-style: none !important; position: relative; padding-left: 32px !important; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸";
  position: absolute;
  left: 8px;
  top: 19px;
  font-size: 16px;
  line-height: 1.3;
  color: var(--k-accent, #B0703C);
  transition: transform 0.18s ease;
  transform-origin: 45% 50%;
}
details[open] > summary::before { transform: rotate(90deg); }

/* Mobile-Umbrüche der neuen Hero-Layouts */
@media (max-width: 760px) {
  html.hero-ralf .na-ralf-grid { grid-template-columns: 1fr !important; padding: 56px 20px 64px !important; gap: 40px !important; }
  .na-ralf-figure { justify-self: center !important; max-width: 652px !important; }
  /* Mobil nur nach unten auslaufen — seitlich bleibt das Foto voll */
  .na-ralf-frame {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 15%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to top, transparent 0, #000 15%);
    mask-composite: add;
  }

  .na-route { grid-template-columns: 1fr 1fr !important; }
  .na-route-line { display: none; }
  .na-route a { padding-top: 0 !important; }
  .na-route a > span:first-child { display: none; }

  html.hero-portal .na-portal-grid { grid-template-columns: 1fr !important; padding: 48px 20px 56px !important; gap: 40px !important; }
  html.hero-portal .na-portal-grid > div:last-child { max-width: 320px; }

  html.hero-ralfkopf .na-hero-ralfkopf figure { justify-self: center !important; max-width: 340px !important; }
}

/* ---------- Navigations-Umschaltung ---------- */
html.nav-drop .na-nav-flat { display: none !important; }
html.nav-drop .na-nav-drop { display: flex !important; }

html.nav-gruppe .na-nav-flat { display: none !important; }
html.nav-gruppe .na-nav-gruppe { display: flex !important; }

html.nav-sitemap .na-nav-flat { display: none !important; }
html.nav-sitemap .na-nav-sitemap { display: flex !important; }
.na-nav-sitemap { display: none; }

/* ---------- Umfang: Step 1 ohne Wissenswertes ----------
   Blendet den Menüpunkt in allen Nav-Varianten, im Footer und auf der
   Sitemap-Seite aus. Fließtext-Verweise (z. B. im Startseiten-FAQ)
   bleiben bewusst stehen — die müssten redaktionell angepasst werden. */
html.step1 nav a[href*="/wissenswertes"],
html.step1 footer a[href*="/wissenswertes"],
html.step1 [data-screen-label="Sitemap"] a[href*="/wissenswertes"] { display: none !important; }

/* ---------- Dropdown-Menü ---------- */
.na-dd { position: relative; display: inline-flex; }

.na-dd-menu {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 800;
  display: none;
  flex-direction: column;
  gap: 1px;
  min-width: 235px;
  background: #FFFFFF;
  border: 1px solid var(--k-border, #E5DECF);
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(20, 40, 36, 0.18);
  padding: 8px;
  margin-top: 6px;
}

/* unsichtbare Brücke, damit das Menü beim Überfahren nicht zuklappt */
.na-dd-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.na-dd:hover .na-dd-menu,
.na-dd:focus-within .na-dd-menu { display: flex; }

.na-dd-menu a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--k-primary, #23423F);
  padding: 9px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.na-dd-menu a:hover {
  background: var(--k-surface, #F1EBDF);
  color: var(--k-accent, #B0703C);
}

.na-caret { font-size: 11px; opacity: 0.7; }

/* ---------- Seitenhelfer (site.js) ----------
   Sticky-Menüleiste: der Kopf mit Logo + Navigation bleibt beim Scrollen
   stehen, die Info-Leiste darüber scrollt weg. Schatten erst, wenn gescrollt. */
/* Sticky muss am Import-Host haengen: position:sticky klebt nur innerhalb des
   Eltern-Kastens, und der Kopf-Wrapper ist selbst nur so hoch wie der Kopf. */
.sc-host[data-sc-name="SiteHeader"] { position: sticky; top: 0; z-index: 900; }
.na-sticky { transition: box-shadow 0.2s ease; }
html.is-scrolled .na-sticky { box-shadow: 0 6px 24px rgba(20, 40, 36, 0.12); }
/* Beim Scrollen weicht die Info-Leiste, damit nur Logo + Menue kleben (spart Hoehe) */
/* (entfernt) Früher: .m-topbar per display:none ausblenden, sobald gescrollt ist. Das änderte die
   Kopfhöhe → Scrollposition sprang unter die Schwelle → Zeile kam zurück → Flackern in Dauerschleife.
   Jetzt: negativer top-Versatz in Höhe der Info-Zeile (--na-topbar-h, gesetzt in Seite.astro).
   Die Zeile scrollt normal weg, nichts wird umgeschaltet, nichts springt. */
.sc-host[data-sc-name="SiteHeader"] { top: calc(-1 * var(--na-topbar-h, 0px)); }
/* Anker-Ziele nicht unter der klebenden Leiste verschwinden lassen */
[id] { scroll-margin-top: 120px; }

/* „Nach oben“-Button — unten links, damit er dem Design-Panel rechts nicht in die Quere kommt */
#na-top {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 950;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--k-dark-bg, #23423F);
  color: var(--k-ondark-1, #F6F2E8);
  box-shadow: 0 8px 24px rgba(15, 32, 28, 0.28);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
#na-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
#na-top:hover { background: var(--k-accent, #B0703C); }
@media (max-width: 900px) {
  /* Mobil bricht das Menue mehrzeilig um und wuerde klebend den halben
     Bildschirm belegen — dort uebernimmt der „Nach oben“-Button. */
  .sc-host[data-sc-name="SiteHeader"] { position: static; }
  #na-top { left: 12px; bottom: 12px; width: 42px; height: 42px; }
  [id] { scroll-margin-top: 16px; }
}

/* Video-Sektion Startseite */
.na-video { position: relative; border-radius: 8px; overflow: hidden; background: #1C332F; box-shadow: 0 20px 50px rgba(15, 32, 28, 0.28); }
.na-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Lagekarte Kontakt (Inline-SVG) */
.na-map { width: 100%; height: auto; display: block; }
.na-map text { font-family: 'Alegreya Sans', sans-serif; }

/* ---------- Karte & Datenschutz (Design-Panel) ----------
   (keine Klasse)  = gezeichnete Lagekarte, keine Datenübertragung
   karte-maps      = Google Maps, lädt erst nach Klick „Karte laden“ (Zwei-Klick, kein Banner) */
html.karte-maps .na-map-skizze { display: none !important; }
html.karte-maps .na-map-google { display: flex !important; }