/* smartline Starter — Seitengerüst: Header, Navigation, Inhaltsbreite, Footer */

/* ---------- Gerüst: Footer bleibt bei wenig Inhalt unten ---------- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.site-main {
  flex: 1 0 auto;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-s) var(--gutter);
}

.site-brand {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-text);
  text-decoration: none;
}

/* Logo kommt als Bild-Element aus dem Slot „logo" — Wrapper neutralisieren */
.site-brand > *,
.site-brand figure {
  margin: 0;
}

/* Feste Höhe statt max-height: sonst bestimmt die Originalbreite des Bildes die Breite
   des Header-Elements und drückt die Navigation in eine neue Zeile.
   Pro Kunde in project.css anpassbar: --logo-height */
.site-brand img {
  width: auto;
  max-width: 100%;
  height: var(--logo-height, 3.5rem);
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 47.999rem) {
  .site-brand img {
    height: var(--logo-height-mobile, 2.75rem);
  }
}

.site-brand__text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

/* ---------- Navigation (Contao-Navigationsmodul) ---------- */
.site-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li {
  margin: 0;
}

.site-nav a,
.site-nav strong {
  display: block;
  padding: 0.6rem 0;
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-primary);
}

/* aktive Seite / Pfad */
.site-nav strong,
.site-nav .trail > a {
  color: var(--color-primary);
}

/* Mobil-Umschalter — erscheint nur mit JavaScript */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text);
}

.nav-toggle[hidden] {
  display: none;
}

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  content: "";
}

.nav-toggle__icon {
  position: relative;
}

.nav-toggle__icon::before { position: absolute; top: -6px; }
.nav-toggle__icon::after  { position: absolute; top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after  { top: 0; transform: rotate(-45deg); }

/* Mobil: Menü klappt unter dem Header auf (nur wenn JS aktiv ist — ohne JS bleibt es sichtbar) */
@media (max-width: 59.999rem) {
  .site-nav {
    flex-basis: 100%;
  }

  .js .site-nav:not(.is-open) {
    display: none;
  }

  .site-nav ul ul {
    padding-left: var(--space-s);
  }

  .site-nav li + li {
    border-top: 1px solid var(--color-border);
  }
}

/* Desktop: horizontale Navigation, Untermenüs als Dropdown */
@media (min-width: 60rem) {
  .nav-toggle {
    display: none !important;
  }

  .site-nav .level_1 {
    display: flex;
    gap: var(--space-m);
  }

  .site-nav .level_1 > li {
    position: relative;
  }

  .site-nav .level_2 {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--space-s));
    min-width: 15rem;
    padding: var(--space-xs) var(--space-s);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-background);
    box-shadow: var(--shadow-card);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s;
  }

  .site-nav li:hover > .level_2,
  .site-nav li:focus-within > .level_2 {
    visibility: visible;
    opacity: 1;
  }

  .site-nav .level_3 {
    display: none;
  }
}

/* ---------- Hauptbereich ---------- */
.site-main:focus {
  outline: none;
}

/* Artikel = Abschnitt; Inhalte auf Inhaltsbreite begrenzt */
.site-main .mod_article {
  padding-block: var(--space-section);
}

.site-main .mod_article + .mod_article {
  padding-top: 0;
}

/* Gemeinsame linke Kante für alles: Rand = Gutter oder (Breite − Inhaltsbreite) / 2.
   Kein padding-inline, damit Kästen mit eigenem Hintergrund (Kontakt, CTA) bündig sitzen. */
.site-main .mod_article {
  --edge: max(var(--gutter), calc((100% - var(--content-width)) / 2));
}

.site-main .mod_article > * {
  margin-inline: var(--edge);
}

/* Fließtext auf Lesebreite — links bündig mit den breiten Elementen, rechts frei */
.site-main .mod_article > .content-text:not(.text--hero, .text--cta, .text--card, .media),
.site-main .mod_article > .content-headline,
.site-main .mod_article > .content-list,
.site-main .mod_article > .content-description-list,
.site-main .mod_article > .content-accordion {
  max-width: var(--text-width);
}

@media (min-width: 48rem) {
  .site-main .mod_article > .content-text:not(.text--hero, .text--cta, .text--card, .media),
  .site-main .mod_article > .content-headline,
  .site-main .mod_article > .content-list,
  .site-main .mod_article > .content-description-list,
  .site-main .mod_article > .content-accordion {
    margin-right: auto;
  }
}

/* Artikel mit hellem Hintergrund: CSS-Klasse „section--surface" am Artikel (Experteneinstellungen) */
.site-main .mod_article.section--surface {
  background: var(--color-surface);
  padding-top: var(--space-section);
}

/* Abstand zwischen Elementen */
.site-main .mod_article > * + * {
  margin-top: var(--space-l);
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--space-section);
  background: var(--color-text);
  color: #fff;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-l);
  max-width: calc(var(--content-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-l) var(--gutter);
}

.site-footer a {
  color: #fff;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: 0;
}

.site-footer :focus-visible {
  outline-color: #fff;
}