/* ==========================================================================
   Advent in Leoben - Designsystem
   Ergaenzung zum Elementor-Kit. In das Child-Theme einbinden
   (hello-theme-child-master), nach der theme-eigenen style.css.

   Das Kit liefert Farben, Schriftfamilien und Basisgroessen.
   Diese Datei liefert alles, was Elementor im Panel nicht abbilden kann:
   fluide Typografie, Spacing-Skala, Fokus-Sichtbarkeit, Reduced Motion.

   Hinweis: Der Kit-Selektor haengt bewusst an keiner festen Kit-ID,
   siehe Abschnitt 2 - jeder Kit-Import legt ein neues Kit-Post an.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Farben - Spiegelung der Kit-Werte fuer Regeln ausserhalb von Elementor */
  --al-nacht-900: #0E1218;
  --al-nacht-800: #171C25;
  --al-nacht-700: #243040;
  --al-gold-500: #E4B168;
  --al-gold-300: #F2D2A0;
  --al-creme: #F4EFE6;
  --al-nebel: #A6AEBC;

  /* Hausfarben: -line fuer Text und duenne Linien auf dunklem Grund,
     -fill fuer gefuellte Flaechen mit Cremeschrift darauf */
  --al-kongress-line: #2E9E6A;
  --al-kongress-fill: #01703D;
  --al-kindler-line: #3D9BE0;
  --al-kindler-fill: #0068B4;

  /* Spacing - 8er-Raster */
  --al-space-3xs: 0.25rem;
  --al-space-2xs: 0.5rem;
  --al-space-xs: 1rem;
  --al-space-sm: 1.5rem;
  --al-space-md: 2rem;
  --al-space-lg: 3rem;
  --al-space-xl: 4rem;
  --al-space-2xl: 6rem;
  --al-space-3xl: 8rem;

  /* Sektionsabstand, fluid */
  --al-section-y: clamp(4rem, 8vw, 8rem);

  /* Zeilenlaenge */
  --al-measure: 65ch;

  /* Bewegung */
  --al-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --al-dur: 150ms;
}

/* --------------------------------------------------------------------------
   2. Fluide Typografie

   Ueberschreibt die vom Kit erzeugten Custom Properties. Elementor nimmt im
   Font-Size-Feld kein clamp() an, referenziert die Werte aber ueber diese
   Variablen - deshalb greift die Ueberschreibung in allen Widgets, ohne dass
   im Editor etwas anders aussieht als erwartet.
   -------------------------------------------------------------------------- */

/* Der Selektor darf nicht an einer konkreten Kit-ID haengen: Jeder Kit-Import
   legt ein neues Kit-Post an, die Nummer aendert sich dabei. */
body[class*="elementor-kit-"] {
  --e-global-typography-primary-font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
  --e-global-typography-secondary-font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  --e-global-typography-text-font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --e-global-typography-0fc329b-font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
}

/* Ueberschriften in Creme statt im Akzentgold. Elementor setzt im
   Heading-Widget per Default die Primaerfarbe. Dessen CSS wird erst geladen,
   wenn ein Heading-Widget vorkommt, also nach dieser Datei — bei gleicher
   Spezifitaet gewinnt es deshalb. Das vorangestellte body genuegt, um das
   umzudrehen, ohne !important zu benoetigen.
   Widget-eigene Farben gewinnen weiterhin, weil Elementor sie ueber die
   Element-ID ausgibt. */
body .elementor-widget-heading .elementor-heading-title {
  color: var(--e-global-color-text);
}

/* Hinweis: OMGF zerlegt Fraunces in statische Schnitte, eine
   Variationsachse steht im Frontend nicht zur Verfuegung.
   font-variation-settings waere hier wirkungslos und entfaellt deshalb. */

/* Lesbarkeit heller Schrift auf dunklem Grund */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Zeilenlaenge und Ausrichtung im Fliesstext */
.elementor-widget-text-editor p,
.elementor-widget-theme-post-content p,
.al-prose {
  max-width: var(--al-measure);
  text-align: left;
}

/* Deutsche Silbentrennung fuer lange Woerter wie Christkindlmarkt */
.elementor-widget-text-editor p,
.al-prose {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* --------------------------------------------------------------------------
   3. Sektionen und Flaechen
   -------------------------------------------------------------------------- */

.al-section {
  padding-block: var(--al-section-y);
}

.al-surface {
  background-color: var(--al-nacht-800);
  border: 1px solid var(--al-nacht-700);
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   4. Hausmarker

   Schmaler Einsatz der Markenfarben: Akzentkante und Badge. Die Grundflaeche
   bleibt in beiden Faellen Nachtblau, damit kein Haus optisch dominiert.
   -------------------------------------------------------------------------- */

.al-haus {
  border-top: 3px solid var(--al-nacht-700);
  border-radius: 0;
}

.al-haus--kongress {
  border-top-color: var(--al-kongress-line);
}

.al-haus--kindler {
  border-top-color: var(--al-kindler-line);
}

.al-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--al-creme);
}

.al-badge--kongress {
  background-color: var(--al-kongress-fill);
}

.al-badge--kindler {
  background-color: var(--al-kindler-fill);
}

/* Buchungs-Button je Haus: Grundzustand Gold, Hover in der Hausfarbe */
.al-cta--kongress .elementor-button:hover,
.al-cta--kongress .elementor-button:focus-visible {
  background-color: var(--al-kongress-line);
  color: var(--al-nacht-900);
}

.al-cta--kindler .elementor-button:hover,
.al-cta--kindler .elementor-button:focus-visible {
  background-color: var(--al-kindler-line);
  color: var(--al-nacht-900);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.elementor-button {
  transition:
    background-color var(--al-dur) var(--al-ease),
    color var(--al-dur) var(--al-ease),
    transform var(--al-dur) var(--al-ease);
}

.elementor-button:hover {
  transform: translateY(-1px);
}

.elementor-button:active {
  transform: translateY(0);
}

/* Sekundaerer Button: Outline statt Flaeche.
   Das vorangestellte body ist noetig: widget-button.min.css laedt erst,
   wenn ein Button auf der Seite vorkommt - also nach dieser Datei. Bei
   gleicher Spezifitaet gewinnt sonst Elementors Goldflaeche. Gleiches
   Muster wie bei den Ueberschriften in Abschnitt 2. */
body .al-button-outline .elementor-button {
  background-color: transparent;
  color: var(--al-creme);
  border: 1px solid #4A5666;
}

body .al-button-outline .elementor-button:hover,
body .al-button-outline .elementor-button:focus-visible {
  background-color: rgba(244, 239, 230, 0.08);
  border-color: var(--al-creme);
  color: var(--al-creme);
}

/* --------------------------------------------------------------------------
   6. Fokus

   Sichtbar auf dunklem Grund, ohne Rueckgriff auf den Browser-Default.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--al-gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-Link sichtbar machen, sobald er Fokus bekommt */
.skip-link:focus-visible {
  position: fixed;
  top: var(--al-space-xs);
  left: var(--al-space-xs);
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background-color: var(--al-gold-500);
  color: var(--al-nacht-900);
  clip: auto;
  width: auto;
  height: auto;
}

/* --------------------------------------------------------------------------
   8. Bewegung reduzieren
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .elementor-button:hover {
    transform: none;
  }

  /* Elementor-Einblendanimationen neutralisieren */
  .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   9. Aufraeumen der Altlasten

   Greift waehrend der Migration, solange noch Legacy-Sections vorhanden sind.
   Nach dem vollstaendigen Umbau kann dieser Block entfallen.
   -------------------------------------------------------------------------- */

.elementor-animation-pulse-shrink:hover,
.elementor-animation-pulse-shrink:focus {
  animation: none;
}

.elementor-widget-divider {
  --divider-pattern-url: none;
}

/* ==========================================================================
   10. Hoteldarstellung
   Ergaenzt Abschnitt 4 (Hausmarker). Nutzt dieselben Custom Properties
   und dasselbe -line/-fill-Muster wie dort.
   ========================================================================== */

/* --- Intro ------------------------------------------------------------ */
body .al-hotels__intro {
  text-align: left;
  max-width: 60ch;
}

body .al-hotels__title {
  margin-top: 0.25em;
}

/* --- Kartenraster ------------------------------------------------------ */
body .al-hotels__grid {
  align-items: stretch;
}

body .al-hotelcard {
  background: var(--al-nacht-800);
  border-radius: 12px;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 280px;
  border-top: 3px solid var(--al-nacht-700);
}

/* Identitaetsmarker der Haeuser, wie .al-haus--kongress/--kindler in Abschnitt 4 */
body .al-hotelcard--kongress {
  border-top-color: var(--al-kongress-line);
}

body .al-hotelcard--kindler {
  border-top-color: var(--al-kindler-line);
}

body .al-hotelcard__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

body .al-hotelcard__body {
  padding: clamp(1.25rem, 2vw, 2rem);
  gap: 0.75rem;
}

body .al-hotelcard__name {
  margin: 0;
}

/* Hotelname in der jeweiligen Hausfarbe statt Creme - zieht die
   Farbcodierung aus der "Auf einen Blick"-Kopfzeile in die Karten weiter.
   Muss nach der allgemeinen Heading-Regel in Abschnitt 2 stehen (gleiche
   Spezifitaet, Reihenfolge entscheidet). */
body .al-hotelcard--kongress .al-hotelcard__name {
  color: var(--al-kongress-line);
}

body .al-hotelcard--kindler .al-hotelcard__name {
  color: var(--al-kindler-line);
}

body .al-hotelcard__tagline p {
  color: var(--al-nebel);
  margin: 0;
}

body .al-hotelcard__features ul {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

body .al-hotelcard__features li {
  color: var(--al-nebel);
  font-size: 0.9375rem;
  padding-left: 1.25em;
  position: relative;
}

body .al-hotelcard__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--al-gold-500);
}

body .al-hotelcard__price {
  margin-top: 0.25rem;
}

body .al-hotelcard__price-amount {
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--al-gold-500);
}

body .al-hotelcard__price-note {
  color: var(--al-nebel);
  font-size: 0.875rem;
}

body .al-hotelcard__actions {
  margin-top: 0.5rem;
}

/* --- Auf einen Blick ---------------------------------------------------
   Als EIN Text-Widget mit rohem HTML umgesetzt (nicht als verschachtelte
   Container), weil Container-Kind-Elemente beim Template-Import teils
   verloren gehen (siehe Projektdokumentation, Abschnitt "Container-Settings
   gehen beim Template-Import verloren"). Das Text-Widget selbst traegt die
   Klasse al-compare__rows.
   ------------------------------------------------------------------------- */
body .al-compare {
  background: var(--al-nacht-800);
  border-radius: 12px;
  padding: clamp(1.25rem, 2vw, 2rem);
}

body .al-compare__title {
  color: var(--al-creme);
  margin: 0 0 1rem;
}

body .al-compare__rows {
  display: flex;
  flex-direction: column;
}

body .al-compare__rows .al-compare__row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 1.4fr 1.4fr;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--al-nacht-700);
  align-items: baseline;
}

body .al-compare__rows .al-compare__row:last-child {
  border-bottom: none;
}

body .al-compare__rows .al-compare__row--head {
  border-bottom: 1px solid var(--al-nacht-700);
  font-weight: 600;
}

body .al-compare__rows .al-compare__row--head .al-compare__value--kongress {
  color: var(--al-kongress-line);
}

body .al-compare__rows .al-compare__row--head .al-compare__value--kindler {
  color: var(--al-kindler-line);
}

body .al-compare__label {
  color: var(--al-nebel);
  font-size: 0.875rem;
  margin: 0;
}

body .al-compare__value {
  color: var(--al-creme);
  font-size: 0.9375rem;
  margin: 0;
}

/* --- Buchungszeile am Ende des Vergleichs ------------------------------
   Schliesst die Entscheidungsbewegung ab: Vergleich lesen, Haus waehlen,
   buchen. Die Buttons tragen Elementors eigene Button-Klasse und damit
   das Aussehen aller anderen Buttons der Seite; die Hausfarbe beim
   Ueberfahren kommt ueber .al-cta--kongress/--kindler aus Abschnitt 4.
   ------------------------------------------------------------------------- */
body .al-compare__rows .al-compare__row--actions {
  align-items: stretch;
  padding-top: 1.25rem;
  border-bottom: none;
}

body .al-compare__action {
  display: flex;
}

/* Der erste Button gehoert unter die Kongress-Spalte, nicht unter die
   Label-Spalte. Fest gesetzt, weil WordPress den leeren Platzhalter-
   Absatz in der Label-Spalte entfernt und die Buttons sonst eine Spalte
   nach links rutschen. */
body .al-compare__rows .al-compare__row--actions .al-compare__action:first-of-type {
  grid-column: 2;
}

body .al-compare__action .elementor-button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* --- Mobil: Karten stapeln, Vergleich bleibt dreispaltig --------------- */
@media (max-width: 767px) {
  body .al-hotels__grid {
    flex-direction: column;
  }

  body .al-compare__rows .al-compare__row {
    grid-template-columns: minmax(60px, 0.8fr) 1fr 1fr;
    gap: 0.5rem;
  }

  body .al-compare__label,
  body .al-compare__value {
    font-size: 0.8125rem;
  }

  /* Buchungszeile: die leere Label-Spalte entfaellt, die Buttons teilen
     sich die Breite. Flex statt Raster, damit die Buttons buendig zum
     Rest der Tabelle stehen — mit grid-template-columns rutschten sie
     ueber den linken Rand hinaus. */
  body .al-compare__rows .al-compare__row--actions {
    display: flex;
    gap: 0.5rem;
  }

  body .al-compare__row--actions .al-compare__action {
    flex: 1 1 0;
    min-width: 0;
  }

  body .al-compare__row--actions .al-compare__label {
    display: none;
  }

  body .al-compare__action .elementor-button {
    padding: 10px 12px;
    font-size: 0.8125rem;
  }
}

/* --------------------------------------------------------------------------
   12. Buchungsleiste  (ersetzt den frueheren Abschnitt 7)

   position: sticky statt fixed: der Fokusfluss bleibt in der Dokument-
   reihenfolge, und die Seite behaelt ihre echte Scrollhoehe. Preis dafuer:
   sticky kann nicht von sich aus "erst nach dem Hero" einblenden, das
   uebernimmt der Beobachter im HTML-Widget ueber die Klasse is-hidden.
   -------------------------------------------------------------------------- */

body .al-booking-bar {
  position: sticky;
  bottom: 0;
  z-index: 100;
  background-color: rgba(14, 18, 24, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--al-nacht-700);
  padding: var(--al-space-2xs) var(--al-space-xs);
  transition:
    transform var(--al-dur) var(--al-ease),
    opacity var(--al-dur) var(--al-ease);
}

/* Ohne backdrop-filter deckend, sonst liest sich Text auf Text */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  body .al-booking-bar {
    background-color: var(--al-nacht-900);
  }
}

/* Ausgangszustand: unten weggeschoben. Kein display:none — das wuerde die
   Buttons aus dem Tab-Fluss nehmen und wieder hineinspringen lassen. */
body .al-booking-bar.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Solange die Leiste versteckt ist, darf sie keinen Tabstopp erzeugen */
body .al-booking-bar.is-hidden a,
body .al-booking-bar.is-hidden button {
  visibility: hidden;
}

body .al-booking-bar__inner,
body .al-booking-bar__inner > .e-con-inner {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--al-space-md);
}

/* Kinder nur so breit wie ihr Inhalt. Elementor gibt Widgets in einem
   Container per Default die volle Breite - dann fuellt der Textblock die
   Zeile und justify-content hat nichts mehr zu verteilen, egal was im
   Layout-Tab eingestellt ist. */
body .al-booking-bar__text,
body .al-booking-bar__actions {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

/* Text bleibt linksbuendig, auch wenn die Gruppe mittig steht -
   zentrierter Fliesstext war einer der Alt-Indikatoren der alten Seite. */
body .al-booking-bar__text {
  text-align: left;
}

body .al-booking-bar__text p {
  margin: 0;
  max-width: none;
}

.al-booking-bar__titel {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--al-creme);
}

.al-booking-bar__meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--al-nebel);
  white-space: nowrap;
}

.al-booking-bar__actions {
  flex-shrink: 0;
}

/* Buttons in der Leiste kompakter als im Seiteninhalt */
body .al-booking-bar .elementor-button {
  padding: 10px 18px;
  font-size: 0.875rem;
}

/* Mobil: Text ueber die Buttons, Buttons teilen sich die Breite.
   Der Meta-Text entfaellt — auf 360 px konkurriert er mit den Buttons
   um Platz, den beide brauchen. */
@media (max-width: 600px) {
  body .al-booking-bar {
    padding: var(--al-space-2xs) var(--al-space-2xs);
  }

  /* Termin bleibt sichtbar - Abnahmekriterium "Termin am Handy ohne
     Scrollen sichtbar". Darf hier umbrechen, Platz ist da, weil die
     Leiste auf Mobil ohnehin stapelt. */
  body .al-booking-bar__meta {
    white-space: normal;
  }

  body .al-booking-bar__text {
    text-align: center;
  }

  body .al-booking-bar__inner,
  body .al-booking-bar__inner > .e-con-inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--al-space-3xs);
  }

  body .al-booking-bar__text,
  body .al-booking-bar__actions {
    flex: 1 1 auto;
    width: 100%;
  }

  .al-booking-bar__actions {
    display: flex;
  }

  body .al-booking-bar__actions > * {
    flex: 1 1 0;
  }

  body .al-booking-bar .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

/* Bewegung reduzieren: kein Hineinfahren, nur da oder nicht da.
   Abschnitt 8 neutralisiert die Dauer bereits global, das hier nimmt
   zusaetzlich die Verschiebung heraus. */
@media (prefers-reduced-motion: reduce) {
  body .al-booking-bar.is-hidden {
    transform: none;
  }
}
/* --------------------------------------------------------------------------
   13. Footer

   Vier Spalten, die am Handy untereinander rutschen. Die beiden Hotelspalten
   tragen dieselbe Farbmarkierung wie die Hotelkarten, damit die Zuordnung
   ueber die ganze Seite gleich bleibt.
   -------------------------------------------------------------------------- */

.al-footer {
  background-color: var(--al-nacht-800);
  border-top: 1px solid var(--al-nacht-700);
}

/* Spaltenbreite: waechst mit, bricht unter 220 px in die naechste Zeile.
   Das vorangestellte body ueberstimmt die Breitenangabe, die Elementor
   jedem Container mitgibt. */
body .al-footer__col {
  flex: 1 1 220px;
  width: auto;
}

/* Alle vier Spalten bekommen dieselbe Kante, bei zweien ist sie unsichtbar.
   Dadurch beginnen alle Titel auf einer Linie. */
.al-footer__col {
  border-top: 3px solid transparent;
  padding-top: var(--al-space-xs);
}

/* Farbkante der Hotelspalten, gleiche Logik wie bei den Hotelkarten */
.al-footer__col--kongress {
  border-top-color: var(--al-kongress-line);
}

.al-footer__col--kindler {
  border-top-color: var(--al-kindler-line);
}

/* Spaltentitel. Die Hotelnamen in der Hausfarbe, die beiden anderen in Creme.
   Diese Regel steht nach der allgemeinen Ueberschriftenregel aus Abschnitt 2
   und gewinnt deshalb bei gleicher Staerke. */
body .al-footer__col--kongress .elementor-heading-title {
  color: var(--al-kongress-line);
}

body .al-footer__col--kindler .elementor-heading-title {
  color: var(--al-kindler-line);
}

/* Fliesstext im Footer: kurze Zeilen, kein Blocksatz-Effekt durch die
   allgemeine Zeilenlaenge von 65 Zeichen */
.al-footer__text p {
  max-width: none;
  margin-block: 0 var(--al-space-2xs);
}

.al-footer__text p:last-child {
  margin-bottom: 0;
}

/* Telefon und E-Mail sollen wie Text aussehen, nicht wie Buttons */
.al-footer__text a {
  color: var(--al-creme);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 230, 0.3);
}

.al-footer__text a:hover {
  color: var(--al-gold-300);
  border-bottom-color: var(--al-gold-300);
}

/* Rechtstexte als schlichte Liste ohne Aufzaehlungspunkte */
.al-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2xs);
}

/* Betreiberzeile: kleiner und zurueckhaltender als der Rest */
.al-footer__betreiber p {
  max-width: none;
  margin: 0;
  font-size: 0.8125rem;
}
/* --------------------------------------------------------------------------
   14. Rechtstexte

   Impressum, Datenschutz und Barrierefreiheit sind einfache WordPress-Seiten
   ohne Elementor. Dort greifen die Kit-Werte fuer Seitenueberschriften, die
   fuer lange Lesetexte deutlich zu gross sind. Dieser Abschnitt setzt sie auf
   Lesegroesse zurueck.

   Das vorangestellte body sorgt dafuer, dass diese Werte die des Kits
   ueberstimmen. Alles haengt an .al-rechtstext, damit sonst nichts betroffen
   ist.
   -------------------------------------------------------------------------- */

.al-rechtstext {
  max-width: 70ch;
  margin-inline: auto;
  padding: var(--al-space-xl) var(--al-space-xs) var(--al-space-2xl);
  color: var(--al-creme);
  background-color: var(--al-nacht-900);
  box-shadow: 0 0 0 100vmax var(--al-nacht-900);
  clip-path: inset(0 -100vmax);
}
body .al-rechtstext h1 {
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  line-height: 1.15;
  margin-block: 0 var(--al-space-sm);
}

body .al-rechtstext h2 {
  font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  line-height: 1.3;
  margin-block: var(--al-space-md) var(--al-space-2xs);
}

body .al-rechtstext p,
body .al-rechtstext li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--al-creme);
  max-width: none;
}

.al-rechtstext p {
  margin-block: 0 var(--al-space-xs);
}

.al-rechtstext a {
  color: var(--al-gold-500);
}

.al-rechtstext a:hover {
  color: var(--al-gold-300);
}
/* --------------------------------------------------------------------------
   /* ==========================================================================
   15. Ein Wintertag in Leoben

   Sechs Karten als EIN Text-Widget mit rohem Markup (Klasse
   al-wintertag__cards am Widget, alles Weitere im HTML). Grund ist nicht
   mehr die Import-Unsicherheit — die ist mit css_classes geklaert — sondern
   die Pflege: sechs Container mit je drei Widgets waeren achtzehn Bausteine
   fuer eine Textaenderung.

   Das vorangestellte body ueberstimmt die Kit-Werte, gleiches Muster wie
   in den Abschnitten 10, 13 und 14.
   ========================================================================== */

/* --- Kopf ------------------------------------------------------------ */

body .al-wintertag__intro p {
  max-width: 60ch;
  color: var(--al-nebel);
}

/* --- Raster -------------------------------------------------------------
   auto-fit statt fester Spaltenzahl: drei Spalten am Desktop, zwei auf
   dem Tablet, eine am Handy — ohne eigene Umbruchpunkte.
   ------------------------------------------------------------------------ */

/* Feste Spaltenzahl statt auto-fit: bei 1200 px Containerbreite passen
   vier 260-px-Spalten hinein, gewuenscht sind aber drei (zwei Reihen zu
   dritt). Deshalb Stufen statt Automatik. */
body .al-wintertag__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--al-space-xs);
  margin-top: var(--al-space-2xs);
}

@media (min-width: 600px) {
  body .al-wintertag__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  body .al-wintertag__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Kein padding mehr direkt auf der Karte: Bild-Platzhalter/Bild sitzen
   randlos ganz oben, der Text bekommt sein padding erst ueber
   .al-wintertag__body (siehe Abschnitt "Karteninhalt" unten). overflow:
   hidden sorgt dafuer, dass Platzhalter bzw. spaeteres Bild die 12px
   Eckrundung der Karte mittragen, statt eckig ueberzustehen. */
body .al-wintertag__card {
  background: var(--al-nacht-800);
  border-radius: 12px;
  border-top: 3px solid var(--al-nacht-700);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- Bild-Platzhalter -----------------------------------------------------
   Leere Flaeche mit Hinweistext, bis echte Bilder eingebaut werden.
   Seitenverhaeltnis 4:3 reserviert den Platz schon jetzt, damit sich beim
   spaeteren Austausch gegen ein <img class="al-wintertag__image"> nichts
   im Layout verschiebt.
   ------------------------------------------------------------------------ */
body .al-wintertag__image-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--al-nacht-900);
  border: 1px dashed var(--al-nebel);
  color: var(--al-nebel);
  font-size: 0.8125rem;
}

/* Zielregel fuer das spaetere echte Bild — ersetzt dann das div.
   Gleiches Seitenverhaeltnis wie der Platzhalter, damit der Tausch ohne
   Nachjustieren funktioniert. */
body .al-wintertag__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- Karteninhalt -------------------------------------------------------
   Die h3 stehen im Markup eines Text-Widgets, nicht in einem
   Heading-Widget. Die allgemeine Ueberschriftenregel aus Abschnitt 2
   greift dort nicht, deshalb hier eigene Werte.

   Das padding der Karte sitzt jetzt auf .al-wintertag__body statt direkt
   auf .al-wintertag__card — dadurch kann der Bild-Platzhalter/das Bild
   randlos ueber dem Text sitzen.
   ------------------------------------------------------------------------ */
body .al-wintertag__body {
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1; 
}

body .al-wintertag__name {
  margin: 0;
  color: var(--al-creme);
  font-size: 1.125rem;
  line-height: 1.3;
}

/* Falls ein Kartentitel spaeter verlinkt wird: soll wie Text aussehen,
   nicht wie ein Link — die Karte selbst ist schon Signal genug. */
body .al-wintertag__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 230, 0.25);
}

body .al-wintertag__name a:hover {
  color: var(--al-gold-300);
  border-bottom-color: var(--al-gold-300);
}

body .al-wintertag__text {
  margin: 0;
  max-width: none;
  color: var(--al-nebel);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Wegangabe: letzte Zeile der Karte, unten buendig, damit die Karten
   trotz unterschiedlich langer Texte gleich enden. */
body .al-wintertag__weg {
  margin: auto 0 0;
  max-width: none;
  color: var(--al-gold-500);
  font-size: 0.8125rem;
  font-weight: 500;
  padding-top: 0.25rem;
}

/* --- Handy -------------------------------------------------------------- */

@media (max-width: 600px) {
  body .al-wintertag__grid {
    gap: var(--al-space-2xs);
  }

  /* Das padding wandert mit auf .al-wintertag__body — siehe Hinweis
     oben bei der Desktop-Regel. */
  body .al-wintertag__body {
    padding: 1.1rem;
  }
}

/* ==========================================================================
   16. FAQ

   Natives Elementor-Accordion-Widget, umgestylt auf das Designsystem.
   Muss nach dem Accordion-Widget-CSS geladen werden (widget-accordion.min.css
   laedt erst, wenn das Widget auf der Seite vorkommt) - deshalb body-Praefix,
   gleiches Muster wie bei Ueberschriften (Abschnitt 2) und Buttons (Abschnitt 5).
   ========================================================================== */

body .al-faq {
  max-width: 900px;
  margin-inline: auto;
}

/* Eyebrow: bisher nirgends definiert, deshalb griff die Kit-Standardgroesse
   fuer Heading-Widgets (Primary-Typografie, bis zu 4.5rem). Gleiche Klasse
   wird auch in kuenftigen Sections mit Eyebrow gebraucht - deshalb hier
   allgemein und nicht auf .al-faq beschraenkt. */
body .al-eyebrow,
body .al-eyebrow .elementor-heading-title {
  display: block;
  color: var(--al-gold-500);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--al-space-2xs);
}

body .al-faq__title {
  margin-top: 0.25em;
  margin-bottom: var(--al-space-sm);
}

body .al-faq__intro {
  color: var(--al-nebel);
  margin-bottom: var(--al-space-lg);
}

/* --- Accordion-Grundgeruest ---------------------------------------------
   Elementor haengt jedem Item eine eigene .elementor-accordion-item-Box an;
   wir bauen daraus Karten im al-surface-Look aus Abschnitt 3. */
body .al-faq__accordion.elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--al-space-2xs);
}

body .al-faq__accordion .elementor-accordion-item {
  background-color: var(--al-nacht-800);
  border: 1px solid var(--al-nacht-700);
  border-radius: 12px;
  overflow: hidden;
}

/* --- Frage (Tab-Titel) --------------------------------------------------- */
body .al-faq__accordion .elementor-tab-title {
  padding: var(--al-space-sm) var(--al-space-md);
  display: flex;
  align-items: center;
  gap: var(--al-space-sm);
  cursor: pointer;
  border: none;
  transition: color var(--al-dur) var(--al-ease);
}

/* Der sichtbare Frage-Text steckt in einem eigenen inneren Element
   (.elementor-accordion-title), nicht direkt in .elementor-tab-title -
   deshalb muss Farbe/Schrift hier gesetzt werden, sonst greift die
   Kit-Standardgroesse/-farbe fuer Ueberschriften ungebremst durch.
   flex: 1 + text-align: left sorgt dafuer, dass die Frage auf derselben
   Kante wie die Antwort darunter beginnt statt durch space-between an
   den rechten Rand gedrueckt zu werden. */
body .al-faq__accordion .elementor-tab-title .elementor-accordion-title {
  flex: 1 1 auto;
  text-align: left;
  color: var(--al-creme);
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.3;
}

body .al-faq__accordion .elementor-tab-title:hover .elementor-accordion-title,
body .al-faq__accordion .elementor-tab-title:focus-visible .elementor-accordion-title {
  color: var(--al-gold-300);
}

body .al-faq__accordion .elementor-tab-title.elementor-active .elementor-accordion-title {
  color: var(--al-gold-300);
}

/* Elementors eigenes Icon-Feld bleibt leer/unbenutzt (Editor-Panel dafuer
   liess sich auf dieser Elementor-Version nicht zuverlaessig oeffnen) -
   Plus/Minus stattdessen rein per CSS als ::after auf der Tab-Title-Box.
   Der leere .elementor-accordion-icon-Container wird ausgeblendet, damit
   kein leerer Platzhalter uebrig bleibt. */
body .al-faq__accordion .elementor-tab-title .elementor-accordion-icon {
  display: none;
}

body .al-faq__accordion .elementor-tab-title::after {
  content: "+";
  flex-shrink: 0;
  color: var(--al-gold-500);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
}

body .al-faq__accordion .elementor-tab-title.elementor-active::after {
  content: "\2212"; /* Minuszeichen, kein Bindestrich */
}

body .al-faq__accordion .elementor-tab-title.elementor-active {
  color: var(--al-gold-300);
  border-bottom: 1px solid var(--al-nacht-700);
}

/* --- Antwort (Tab-Content) ------------------------------------------------ */
body .al-faq__accordion .elementor-tab-content {
  padding: 0 var(--al-space-md) var(--al-space-sm);
  color: var(--al-nebel);
  font-size: 0.9375rem;
  line-height: 1.7;
  max-width: none;
}

body .al-faq__accordion .elementor-tab-content a {
  color: var(--al-gold-500);
  text-decoration: none;
  border-bottom: 1px solid rgba(228, 177, 104, 0.4);
}

body .al-faq__accordion .elementor-tab-content a:hover,
body .al-faq__accordion .elementor-tab-content a:focus-visible {
  color: var(--al-gold-300);
  border-bottom-color: var(--al-gold-300);
}

/* --- Mobil: etwas knapperes Padding -------------------------------------- */
@media (max-width: 600px) {
  body .al-faq__accordion .elementor-tab-title,
  body .al-faq__accordion .elementor-tab-content {
    padding-left: var(--al-space-sm);
    padding-right: var(--al-space-sm);
  }
}