@import url("fonts.css");

/* =========================================================
   Design-Tokens
   Uebernommen 1:1 aus der bisherigen WordPress-Seite.
   Farben hier aendern = Farben auf der ganzen Seite aendern.
   ========================================================= */

:root {
  /* Flaechen */
  --c-bg: #554838;              /* Seitenhintergrund (braun) */
  --c-surface: #ffffff;         /* Akkordeon-Inhalt */
  --c-text: #ffffff;            /* Flie\00DFtext auf braunem Grund */
  --c-text-dark: #554838;       /* Text auf goldenem Grund */
  --c-text-muted: #7a7a7a;      /* Text im Akkordeon-Inhalt */

  /* Gold */
  --c-gold-from: #ffdd9c;
  --c-gold-to: #8d6439;
  --c-gold-glow: 255, 221, 156;

  /* Markenfarben der Messenger - bewusst so, wie die Portale sie nutzen */
  --c-whatsapp: #25d366;
  --c-telegram: #0088cc;

  --grad-gold: linear-gradient(to right, var(--c-gold-from), var(--c-gold-to));
  --grad-gold-text: linear-gradient(to top, #ffe7b9 0%, #e2af4f 85%);
  --grad-gold-radial: radial-gradient(circle at left top, #ffd39c, #8d6439);

  /* Typografie */
  --f-head: "Jost", "Raleway", sans-serif;
  --f-body: "Jost", "Raleway", sans-serif;
  --f-panel: "Roboto", sans-serif;

  --fs-h1: 30px;
  --fs-h2: 30px;
  --fs-h3: 25px;
  --fs-h4: 20px;
  --fs-body: 15px;
  --fs-body-lg: 16px;
  --lh-body: 26px;

  /* Layout */
  --w-container: 1140px;
  --pad-container: 10px;
  --radius: 5px;

  --ease: 0.3s ease;
}

/* =========================================================
   Reset / Grundlagen
   ========================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }

a { color: inherit; }

/* Sichtbarer Fokus fuer Tastatur-Navigation */
:focus-visible {
  outline: 2px solid var(--c-gold-from);
  outline-offset: 3px;
}

/* Markierungen und Tipp-Hervorhebung in der eigenen Farbe -
   sonst blitzt beim Antippen die Standardfarbe des Browsers auf. */
::selection {
  background: rgba(var(--c-gold-glow), 0.35);
  color: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: rgba(var(--c-gold-glow), 0.25);
}

/* Beim Klick auf einen Aufklapp-Titel soll kein Text markiert werden */
.accordion__trigger { user-select: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Layout
   ========================================================= */

.l-container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--pad-container);
}

.l-main { padding-block: 10px 30px; }

/* Bloecke stehen ohne Eigenabstand untereinander - der Abstand
   kommt ausschliesslich aus den Abstand-Bloecken. Genau wie bisher. */
.l-container > * { margin-block: 0; }

/* Abstandhalter-Block */
.b-spacer { width: 100%; height: var(--h, 20px); }

@media (max-width: 767px) {
  .b-spacer { height: var(--hm, var(--h, 20px)); }
}

/* Video - laedt erst nach dem Klick */
.b-video { margin: 0; }
.video__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: #1c1a17;
  cursor: pointer;
}
.video__frame img { width: 100%; }
.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.video__play svg {
  width: 68px; height: 68px;
  padding: 18px;
  border-radius: 50%;
  background: rgba(85, 72, 56, 0.85);
  fill: var(--c-gold-from);
}
.b-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 3px;
}
.b-video figcaption {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  opacity: 0.75;
}

/* Reine Textseiten (z. B. Datenschutz) */
.b-text--page { max-width: 70ch; }
.b-text--page h2,
.b-text--page h3 {
  margin: 1.6em 0 0.5em;
  font-family: var(--f-head);
  font-weight: 600;
  color: var(--c-gold-from);
}
.b-text--page h2 { font-size: 20px; }
.b-text--page h3 { font-size: 17px; }

/* =========================================================
   Ueberschriften
   ========================================================= */

.b-heading {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1;   /* wie bisher: Zeilenhoehe = Schriftgroesse */
  /* Gold-Verlauf im Text */
  background-image: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.b-heading--h1 { font-size: var(--fs-h1); }
.b-heading--h2 { font-size: var(--fs-h2); }
.b-heading--h3 { font-size: var(--fs-h3); }
.b-heading--h4 { font-size: var(--fs-h4); }

.b-heading--left   { text-align: left; }
.b-heading--center { text-align: center; }
.b-heading--right  { text-align: right; }

/* =========================================================
   Textblock
   ========================================================= */

.b-text {
  display: flow-root;   /* haelt die Absatz-Abstaende im Block */
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}

.b-text--lg { font-size: var(--fs-body-lg); font-weight: 500; }

/* Abstaende exakt wie bisher: Absatz 10px, Liste 15px */
.b-text p { margin: 10px 0; }
.b-text ul,
.b-text ol { margin: 15px 0; padding-left: 1.2em; }
.b-text li { margin: 0; }
.b-text strong { font-weight: 600; }
.b-text a { text-decoration: underline; text-underline-offset: 2px; }

.b-text--left   { text-align: left; }
.b-text--center { text-align: center; }

/* =========================================================
   Buttons
   Gold-Balken mit dunkelbraunem Text.
   Die ganze Flaeche ist klickbar (auf der alten Seite war es
   nur der Text - auf dem Handy schwer zu treffen).
   ========================================================= */

.b-button { margin: 0; }
.b-button--left   { text-align: left; }
.b-button--center { text-align: center; }
.b-button--right  { text-align: right; }

.btn {
  display: block;
  width: 100%;
  padding: 2px;
  border: 0;
  border-radius: var(--radius);
  background-color: transparent;   /* <button> saehe sonst grau aus */
  background-image: var(--grad-gold);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--ease), transform var(--ease);
  font: inherit;
}

.btn:hover,
.btn:focus-visible {
  box-shadow: 0 0 20px 0 rgba(var(--c-gold-glow), 0.5);
}

.btn:active { transform: translateY(1px); }

.btn__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 3px;
  color: var(--c-text-dark);
  font-family: var(--f-body);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 16px;   /* wie bisher: Zeilenhoehe = 16px */
  text-align: center;
}

.btn__label { display: block; }

/* Zweite Zeile stand bisher durch eine Leerzeile 16px tiefer */
.btn__sub {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
}

/* Schrift je Button.
   Die bisherige Seite hatte das pro Button eingestellt: die
   Checklisten in Jost, die uebrigen Buttons in Roboto. Deshalb
   ist es hier waehlbar statt fest. Vorgabe ist Jost 16 wie beim
   ersten Checklisten-Button. */
.btn--font-jost15 .btn__inner {
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
}
.btn--font-roboto .btn__inner {
  font-family: var(--f-panel);
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
}
.btn--font-jost15 .btn__sub,
.btn--font-roboto .btn__sub { font-size: 15px; line-height: 15px; font-weight: inherit; }

/* Button mit Icon (WhatsApp / Telegram) - eine Zeile.
   5px zwischen Symbol und Text wie im Original — dort hat
   .elementor-button-icon ein margin-right von 5px.
   Schrift dort: Roboto 500. */
.btn--icon .btn__inner {
  flex-direction: row;
  gap: 5px;
  font-family: var(--f-panel);
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
}
/* Ein Button mit Symbol UND eigener Schrift: die eigene gewinnt.
   Im Original ist «ПЕРЕЙТИ В КАНАЛ» Roboto 600, waehrend
   WhatsApp und Telegram Roboto 500 sind. */
.btn--icon.btn--font-roboto .btn__inner { font-weight: 600; }

.btn__icon { flex: none; width: 15px; height: 15px; fill: currentColor; }

/* Messenger-Buttons in den Farben der jeweiligen Portale */
.btn--whatsapp,
.btn--telegram { padding: 0; background-image: none; }
.btn--whatsapp { background-color: var(--c-whatsapp); }
.btn--telegram { background-color: var(--c-telegram); }
.btn--whatsapp:hover { box-shadow: 0 0 20px 0 rgba(37, 211, 102, 0.5); }
.btn--telegram:hover { box-shadow: 0 0 20px 0 rgba(0, 136, 204, 0.5); }

/* Schmale Variante: Button nur so breit wie noetig */
.btn--auto { display: inline-block; width: auto; }

/* Der Knopf im Slider steht im Original in Jost 500, 15px.
   Und er leuchtet dort beim Ueberfahren NICHT auf: die Glow-Regel
   der alten Seite haengt an der Klasse .btn-glow-1, die dieser
   Knopf nicht traegt. */
.btn--slide .btn__inner { font-size: 15px; line-height: 15px; }
.btn--slide:hover { box-shadow: none; }
.btn--slide:active { transform: none; }

/* Dunkler Button mit Gold-Rand (auf Bildern / im Slider) */
.btn--outline {
  padding: 0;
  border: 2px double transparent;
  border-radius: 3px;
  background-image: linear-gradient(var(--c-bg), var(--c-bg)), var(--grad-gold-radial);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.btn--outline .btn__inner { color: var(--c-text); }

/* =========================================================
   Bild-Block
   ========================================================= */

.b-image { margin: 0; }
.b-image img { width: 100%; }
.b-image figcaption {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  color: var(--c-text);
  opacity: 0.75;
}

/* =========================================================
   Programm-Karten (Bild + Button darunter)
   ========================================================= */

.b-cards { display: grid; gap: 20px; }
.b-card { display: grid; gap: 10px; }
.b-card__media { display: block; }
.b-card__media img { width: 100%; }

/* Ab Tablet optional nebeneinander */
.b-cards--cols-2,
.b-cards--cols-3 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .b-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .b-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Slider (freie Lektionen)
   ========================================================= */

.b-slider { position: relative; }

.slider__viewport {
  overflow: hidden;
  border-radius: 3px;
}

.slider__track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.slider__slide {
  position: relative;
  flex: 0 0 100%;
  height: 400px;   /* Original: feste Hoehe, kein min-height */
  display: grid;
  background-color: #1c1a17;
  background-size: cover;
  background-position: center;
}

.slider__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 66%;          /* wie bisher: Text nutzt nicht die volle Breite */
  margin-inline: auto;
  padding: 30px 0;   /* Original: .swiper-slide-inner hat 30px */
  text-align: center;
  text-decoration: none;
  color: var(--c-text);
}

/* Der Textschatten liegt im Original nur auf dem ERSTEN Slide -
   fuer den zweiten fehlt die Regel. Deshalb hier ebenso. */
.slider__slide:first-child .slider__link {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.slider__heading {
  margin: 0;
  font-family: var(--f-head);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.1;
  background-image: var(--grad-gold-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.slider__desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  color: var(--c-text);
  max-width: 42em;
}

/* Pfeile */
/* Wie im Original: 25 × 25, weiß, ohne Hintergrundkreis,
   10px vom Rand, senkrecht mittig. */
.slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: opacity var(--ease);
}
.slider__nav:hover { opacity: 0.7; }
.slider__nav--prev { left: 10px; }
.slider__nav--next { right: 10px; }
.slider__nav svg { width: 25px; height: 25px; fill: currentColor; }

/* Punkte */
/* Wie im Original: 6 × 6, weiß, aktiv #DFC800, 12px Abstand,
   5px über dem unteren Rand. */
.slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.slider__dot {
  width: 6px; height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: background var(--ease);
}
.slider__dot[aria-current="true"] { background: #dfc800; }

/* Ein einzelner Slide braucht keine Navigation */
.b-slider[data-count="1"] .slider__nav,
.b-slider[data-count="1"] .slider__dots { display: none; }

/* =========================================================
   Akkordeon (Toggle)
   ========================================================= */

.b-accordion { display: grid; gap: 3px; }   /* wie bisher: 3px */

.accordion__item { border-radius: 4px; overflow: hidden; }

.accordion__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 15px;
  border: 0;
  border-radius: 4px 4px 0 0;
  background-image: var(--grad-gold);
  color: var(--c-text-dark);
  font-family: var(--f-panel);   /* wie bisher: Roboto */
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 15px;             /* Titelhoehe damit 45px wie bisher */
  text-align: left;
  cursor: pointer;
}

.accordion__item:not(.is-open) .accordion__trigger { border-radius: 4px; }

.accordion__icon {
  flex: none;
  width: 15px; height: 15px;
  fill: currentColor;
  transition: transform var(--ease);
}
.accordion__item.is-open .accordion__icon { transform: rotate(90deg); }

/* Aufklappen gleitet weich auf - wie bisher.
   Die Hoehe wird per JavaScript gesetzt, damit die Animation
   auch bei unbekannter Inhaltshoehe sauber laeuft. */
.accordion__panel {
  height: 0;
  overflow: hidden;
  background: var(--c-surface);
  color: var(--c-text-muted);
  font-family: var(--f-panel);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  border-radius: 0 0 4px 4px;
  transition: height 0.3s ease;
}

.accordion__inner { padding: 15px; }

/* Die Hoehe im offenen Zustand setzt das Skript - so laesst sie
   sich animieren. Ohne Skript greift die Regel weiter unten. */

.accordion__inner p { margin: 0 0 1em; }
.accordion__inner p:last-child { margin-bottom: 0; }
.accordion__inner ul,
.accordion__inner ol { margin: 0 0 1em; padding-left: 1.3em; }
.accordion__inner strong { color: #554838; font-weight: 700; }

/* Ohne JavaScript bleibt alles lesbar */
.no-js .accordion__panel { height: auto; }

/* =========================================================
   Modal / Popup
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 20px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.7);
}
.modal.is-open {
  display: grid;
  place-items: start center;
  animation: modal-fade 0.35s ease;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin-block: 5vh 40px;
  padding: 30px 24px;
  border-radius: 6px;
  background: var(--c-bg);
  border: 2px solid transparent;
  background-image: linear-gradient(var(--c-bg), var(--c-bg)), var(--grad-gold-radial);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.modal__close {
  position: absolute;
  top: 8px; right: 8px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-gold-from);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { background: rgba(255, 255, 255, 0.08); }

.modal__body > * + * { margin-top: 20px; }

body.has-modal { overflow: hidden; }

/* =========================================================
   Formular
   ========================================================= */

.b-form { display: grid; gap: 16px; }

.form__field { display: grid; gap: 6px; }

.form__label {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
}
.form__required { color: var(--c-gold-from); }

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 16px; /* verhindert Auto-Zoom auf iOS */
  line-height: 1.4;
}
.form__textarea { min-height: 120px; resize: vertical; }

.form__input::placeholder,
.form__textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--c-gold-from);
  box-shadow: 0 0 0 3px rgba(var(--c-gold-glow), 0.2);
}

.form__intro { margin-bottom: 8px; }

.form__hint {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.65);
}

/* Gruppe aus mehreren Auswahlmöglichkeiten */
.form__group {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  margin: 0;
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
/* Bewusst kein <fieldset>/<legend>: eine zweizeilige Frage
   rutscht dort in den Rahmen hinein. Ein Gruppen-Container mit
   aria-labelledby ist ebenso zugaenglich und frei gestaltbar. */
.form__group > .form__label { margin-bottom: 2px; }
.form__group.is-invalid { border-color: #ffb4a2; }

.form__check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
}
.form__check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-gold-to); }
.form__check a { text-decoration: underline; }

/* Honeypot - fuer Menschen unsichtbar, Bots fuellen ihn aus */
.form__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__error {
  font-size: 13px;
  color: #ffb4a2;
}

.form__note {
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
}
.form__note--success {
  background: rgba(255, 221, 156, 0.14);
  border: 1px solid var(--c-gold-from);
  color: var(--c-text);
}
.form__note--error {
  background: rgba(255, 120, 100, 0.12);
  border: 1px solid #ffb4a2;
  color: #ffd8d0;
}

/* =========================================================
   Footer
   ========================================================= */

/* Ohne oberen Innenabstand: den Abstand nach oben liefert
   bereits .l-main. Zusammen mit dem letzten Abstand-Baustein
   ergibt das die 80px, die auch das Original bis zum Seiten-
   ende hat. */
.site-footer {
  padding: 0 0 30px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}
.site-footer a { text-decoration: underline; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 10px;
}

/* =========================================================
   Zwei Buttons nebeneinander (WhatsApp / Telegram)
   ========================================================= */

/* Auch auf dem Handy nebeneinander - im Original stehen die
   beiden Knoepfe dort in zwei Spalten zu je 191px. Sie unter-
   einander zu stellen war meine Zutat und falsch. */
.b-buttonrow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 19px;   /* Spaltenabstand wie bisher */
}

/* =========================================================
   Responsive
   Die alte Seite hatte keine eigenen Mobil-Regeln - sie ist
   auf dem Handy nur zusammengeschoben. Hier wird sie sauber
   angepasst, ohne das Aussehen zu veraendern.
   ========================================================= */

@media (max-width: 767px) {
  /* Das Original hat fuer Schriftgroessen und Innenabstaende KEINE
     eigenen Mobil-Regeln: Ueberschriften bleiben 30/25/20px, Buttons
     behalten 12px 24px, der Slide bleibt 400px hoch. Hier steht nur,
     was das Original tatsaechlich anders macht - und der Rand des
     Inhaltsbereichs, damit auf schmalen Geraeten nichts klebt. */

  :root { --pad-container: 10px; }

  /* Elementor verkleinert allein den Beschreibungstext im Slider */
  .slider__desc { font-size: 13px; }

  .modal__dialog { padding: 24px 18px; margin-block: 2vh 24px; }
}


@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Ladezustand von Bildern — Goldschimmer
   Der Schimmer liegt als Hintergrund im Bild selbst. Dadurch
   braucht es kein zusaetzliches Element und am Aufbau der
   Seite aendert sich nichts. Sobald das Bild geladen ist,
   setzt das Skript .is-loaded und der Schimmer verschwindet.
   ========================================================= */

img:not(.is-loaded) {
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(
    105deg,
    rgba(226, 175, 79, 0) 35%,
    rgba(226, 175, 79, 0.28) 50%,
    rgba(226, 175, 79, 0) 65%
  );
  background-repeat: no-repeat;
  background-size: 220% 100%;
  animation: lana-shimmer 1.6s ease-in-out infinite;
}

img.is-loaded {
  background-image: none;
  background-color: transparent;
  animation: none;
}

/* Flaechen, deren Bild aus dem CSS kommt und die deshalb kein
   Ladeereignis kennen - hier meldet das Skript den Ladezustand. */
.slider__slide:not(.is-loaded) {
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(
    105deg,
    rgba(226, 175, 79, 0) 35%,
    rgba(226, 175, 79, 0.28) 50%,
    rgba(226, 175, 79, 0) 65%
  );
  background-size: 220% 100%;
  animation: lana-shimmer 1.6s ease-in-out infinite;
}

@keyframes lana-shimmer {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}

@media (prefers-reduced-motion: reduce) {
  img:not(.is-loaded),
  .slider__slide:not(.is-loaded) {
    animation: none;
    background-image: none;
  }
}