/*
 * Responsive Stufen der Layout-Token (Sprint-08-Nachtrag N1, 15.08.2026).
 *
 * Der Seitenkopf-Abstand kommt aus EINER Variable: --space-seite-oben,
 * definiert in den Breakdance-Variablen (Basiswert var(--space-6)). Alle
 * ersten Container beziehen sie (ahrk-haus, ahrk-einheit, ahrk-buchen,
 * erste ahrk-sektion nach dem Header). Diese Datei traegt nur die mobile
 * Stufe, weil der Breakdance-Import :root-Variablen in Media-Blöcken
 * verwirft (Warnung "responsive variable overrides are not supported",
 * gemessen am 15.08.2026). Wer den Abstand aendert, aendert die Variable,
 * nicht die Container.
 */
@media (max-width: 767px) {
  /* :root:root schlaegt die spaeter geladene Breakdance-Basisdefinition
   * bei gleicher Ebene (Spezifitaet 0,2,0 gegen 0,1,0), gemessen 15.08.2026. */
  :root:root {
    --space-seite-oben: var(--space-5);
  }
}

/*
 * Header-Hoehe und z-Ordnung (Sprint-08-Nachtrag N7/N8, 15.08.2026).
 * Der Header selbst traegt z-index 50 (Breakdance-Selektor ahrk-header).
 * Alles Klebende ordnet sich hier ein, an EINER Stelle:
 *   50  Header
 *   40  mitlaufende Buchungsleiste (ahrk-buchenleiste)
 *   30  IBE-Suchleiste auf der Buchungsseite
 */

/*
 * Fliessende Ueberschriftengroessen (Sprint-09-Nachtrag N5, 15.08.2026).
 * Die Builder-Variablen fs-h1 und fs-h2 sind feste rem-Werte vom Typ unit,
 * clamp() passt dort nicht hinein, und :root-Variablen in Media-Bloecken
 * verwirft der Import. Deshalb ueberschreiben diese beiden Werte hier die
 * Builder-Definition (Spezifitaet 0,2,0 gegen 0,1,0), wie oben bei
 * --space-seite-oben etabliert.
 * Desktop bleibt unveraendert: fs-h1 erreicht seine 2,75rem ab 1000px
 * Fensterbreite, fs-h2 seine 2,25rem ab 1067px (nachgerechnet 15.08.2026,
 * vierte Sichtrunde; die frueheren Angaben 906 und 872 waren falsch).
 * Darunter skalieren beide stufenlos. Die Media-Stufe der Titel-Selektoren (mobil auf fs-h2)
 * bleibt bestehen, sie hebt nichts auf, sondern staffelt jetzt auf die
 * fliessende H2-Groesse.
 */
:root:root {
  --fs-h1: clamp(1.6rem, 1rem + 2.8vw, 2.75rem);
  --fs-h2: clamp(1.3rem, 0.85rem + 2.1vw, 2.25rem);
  --fs-h3: clamp(1.35rem, 1rem + 1.5vw, 1.75rem);
}

:root:root {
  --header-hoehe: 77px;
  --z-buchenleiste: 40;
  --z-ibe-suchleiste: 30;
}
@media (max-width: 767px) {
  :root:root {
    --header-hoehe: 65px;
  }
}

/*
 * ACHTUNG, DS-Klasse: .ibeng-searchbar-header stammt aus der IBE von
 * DS Destination Solutions (next.ibe.ds-srv.net) und kann sich bei einem
 * Anbieter-Update aendern. Gemessen am 15.08.2026 an der Standalone-IBE:
 * position sticky, top 0, z-index 10, Hoehe 121px. top 0 laesst sie unter
 * unseren klebenden Header laufen und ueber die Trefferliste. Hier auf die
 * Header-Unterkante gesetzt und in die z-Ordnung eingereiht. Bei einem
 * IBE-Update diese Regel pruefen (N7, Sprint-08-Nachtrag).
 */
.ahrk-ibe .ibeng-searchbar-header {
  top: var(--header-hoehe);
  z-index: var(--z-ibe-suchleiste);
}

/*
 * DS-IBE am Handy (Sprint 09 Phase 7, 15.08.2026). Drei Befunde von
 * Fjodors Sichtrunde, alle am Geraet nachgemessen:
 *
 * 1. Die IBE nutzt Container-Queries und braucht fuer ihren Kalender
 *    mindestens 320px plus Innenabstaende. Unsere Container-Polsterung
 *    drueckte die Kalenderspalte auf 247px, der Monat ragte links raus
 *    und der Monats-Schieber sass um rund 76px daneben. Deshalb bekommt
 *    die IBE-Buehne unterhalb von 768px die volle Fensterbreite.
 * 2. .ibeng-PropertyPage-Travellers (Erwachsene und Kinder) traegt ein
 *    hartes min-width von 28rem (448px) und stand damit auf jedem Handy
 *    links und rechts ueber. Gemessen 15.08.2026.
 * 3. .ibeng-PropertyPage-Calendar traegt p-4; bei 375px Fensterbreite
 *    fehlten damit 9px fuer den 320px-Monat. Seitlich auf 0.5rem gekappt.
 *
 * ACHTUNG, DS-Klassen: ibeng-PropertyPage-Travellers und
 * ibeng-PropertyPage-Calendar stammen aus der IBE von DS Destination
 * Solutions und koennen sich bei einem Anbieter-Update aendern. Bei
 * einem IBE-Update diese Regeln pruefen, wie oben bei der Suchleiste.
 * Die Klassen stehen doppelt, weil die DS-CSS erst nach der
 * Einwilligung ins Dokument kommt und bei gleicher Spezifitaet
 * als spaeter geladene Regel gewinnt (gemessen 15.08.2026).
 * Unterhalb von etwa 370px Fensterbreite bleibt der Kalender bauartbedingt
 * knapp (7 Spalten mal 40px Mindestkachel), das ist eine Grenze der IBE.
 */
@media (max-width: 767px) {
  /* Vollbleed ueber den Polster-Ausgleich, nicht ueber vw: 100vw enthaelt
     den vertikalen Rollbalken und erzeugt sonst in Umgebungen mit
     klassischen Rollbalken einen Querlauf (Nachtrag, 15.08.2026). */
  .ahrk-ibe .ahrk-ibe__buehne {
    margin-left: calc(-1 * var(--container-padding-x, 32px));
    margin-right: calc(-1 * var(--container-padding-x, 32px));
  }
  .ahrk-ibe .ibeng-PropertyPage-Travellers.ibeng-PropertyPage-Travellers {
    min-width: 0;
    width: 100%;
  }
  .ahrk-ibe .ibeng-PropertyPage-Calendar.ibeng-PropertyPage-Calendar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/*
 * E16, die Buchungsstrecke in unseren Token (dritte Sichtrunde M11,
 * 15.08.2026). Farben, Schrift, Knopfform, NICHT die Struktur.
 *
 * ACHTUNG, DS-Klassen: Die IBE nutzt Tailwind mit dem Praefix twng- und
 * semantischen Farbklassen (twng-bg-primary ist das DS-Blau #3A508A,
 * twng-text-on-primary weiss). Die Schrift haengt an der SPA-Wurzel
 * .ibeng-spa (ui-sans-serif-Stapel), alles darunter erbt sie. Alle
 * Klassennamen stammen aus der IBE von DS Destination Solutions und
 * koennen sich bei einem Anbieter-Update aendern; bei einem IBE-Update
 * diese Regeln pruefen, wie oben bei der Suchleiste. Die Klassen stehen
 * doppelt, weil die DS-CSS nach unserer laedt und bei gleicher
 * Spezifitaet gewinnt. Kein !important.
 *
 * R1 gilt: --action-primary traegt weissen Text mit mindestens 4,5:1,
 * deshalb ersetzt genau diese Variable das DS-Blau unter weissem Text
 * (Filter, Buchen, Bewertungsplakette).
 */
/* M7 (15.08.2026): Der DS-Spacer ibeng-stickyspace-start reserviert 110px
 * Leerraum vor der Suchleiste (gemessen am 15.08.2026). Auf unserer
 * Buchungsseite traegt der eigene Seitenkopf den Abstand, deshalb faellt
 * der Spacer auf 0. Das Sticky-Verhalten der Suchleiste bleibt, sticky
 * behaelt seinen Platz im Fluss. */
.ahrk-ibe .ibeng-stickyspace-start.ibeng-stickyspace-start {
  height: 0;
}
.ahrk-ibe .ibeng-spa.ibeng-spa {
  font-family: var(--font-body);
}
.ahrk-ibe .twng-bg-primary.twng-bg-primary {
  background-color: var(--action-primary);
  border-radius: var(--radius-md);
}
.ahrk-ibe .hover\:twng-bg-primary-hover.hover\:twng-bg-primary-hover:hover {
  background-color: var(--action-primary-hover);
}
/* M11-Nebenbefund: abgeschnittene Objekttitel in der Trefferliste
 * ("Residenz Strandkro..."). twng-truncate erzwingt eine Zeile mit
 * Ellipse; hier stattdessen zwei Zeilen, dann erst kappen. Nur die
 * Titel-H2, nicht jede truncate-Zelle. */
.ahrk-ibe h2.twng-truncate.twng-truncate {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ==========================================================================
 * Bewegung, Sprint 11 Block G (16.08.2026)
 *
 * Warum hier und nicht ueber insert-stylesheet:
 * Breakdance importiert nur @media-Bloecke, deren Query exakt einem
 * registrierten Breakpoint entspricht. Ein Block mit prefers-reduced-motion
 * wird still verworfen. Genau diese Abschaltbarkeit ist aber Pflicht
 * (Anhaltebedingung 3 des Auftrags), also steht die Bewegung hier.
 *
 * Leitgedanke: Die Zielgruppe ist 50 plus. Bewegung darf das Auge fuehren
 * oder eine Reaktion bestaetigen, sonst nichts. Kein Selbstlauf, kein
 * Parallax am Handy, keine springenden Zahlen.
 *
 * Sicherheitsprinzip fuer das Einblenden:
 * Die Startstufe opacity 0 steht AUSSCHLIESSLICH innerhalb von
 * @supports (animation-timeline: view()). Ein Browser ohne
 * scrollgetriebene Animationen bekommt sie nie zu sehen und zeigt den
 * Inhalt normal an. Ohne diese Klammer waere ein nicht laufender
 * Animationslauf gleichbedeutend mit unsichtbarem Inhalt.
 * ========================================================================== */

@keyframes ahrk-einblenden {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ahrk-welle-atmen {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ahrk-sektion,
    .ahrk-ratgeber__block,
    .ahrk-startkarte,
    .ahrk-themenlink {
      animation: ahrk-einblenden 380ms linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }

    /* Die Buehne ist beim Laden schon sichtbar, sie blendet nicht ein. */
    .ahrk-buehne { animation: none; }
  }

  /* Karten heben sich beim Ueberfahren an, das Bild zoomt hoechstens 3 Prozent. */
  .ahrk-objektkarte,
  .ahrk-startkarte,
  .ahrk-themenlink {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }
  .ahrk-objektkarte__bild,
  .ahrk-startkarte__bild,
  .ahrk-themenlink__bild {
    transition: transform var(--transition-base);
  }
  .ahrk-objektkarte:hover,
  .ahrk-startkarte:hover,
  .ahrk-themenlink:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .ahrk-objektkarte:hover .ahrk-objektkarte__bild,
  .ahrk-startkarte:hover .ahrk-startkarte__bild,
  .ahrk-themenlink:hover .ahrk-themenlink__bild {
    transform: scale(1.03);
  }

  /* Die Welle schwingt, sie wandert nicht. 9 Sekunden, kaum wahrnehmbar. */
  .ahrk-akzentwelle svg {
    animation: ahrk-welle-atmen 9s ease-in-out infinite;
  }
}

/* Der Zoom braucht einen Rahmen, sonst laeuft das Bild ueber die Kartenkante. */
.ahrk-objektkarte,
.ahrk-startkarte,
.ahrk-themenlink {
  overflow: hidden;
}

/* Zahlen bewegen sich nie, weder Ab-Preis noch Eckdaten. */
.ahrk-abpreis,
.ahrk-abpreis__wert,
.ahrk-objektkarte__daten {
  transition: none;
  animation: none;
}

/*
 * Vollstaendiger Stillstand, wenn der Besucher weniger Bewegung wuenscht.
 * Diese Regel ist die Zusicherung aus Anhaltebedingung 3 und darf nicht
 * entfernt werden, auch nicht versehentlich beim Aufraeumen.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ahrk-sektion,
  .ahrk-ratgeber__block,
  .ahrk-startkarte,
  .ahrk-themenlink,
  .ahrk-objektkarte {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ahrk-objektkarte:hover,
  .ahrk-startkarte:hover,
  .ahrk-themenlink:hover,
  .ahrk-objektkarte:hover .ahrk-objektkarte__bild,
  .ahrk-startkarte:hover .ahrk-startkarte__bild,
  .ahrk-themenlink:hover .ahrk-themenlink__bild {
    transform: none !important;
  }
  .ahrk-akzentwelle svg { animation: none !important; }
}

/*
 * Druck. Die scrollgetriebenen Einblendungen kennen beim Drucken keinen
 * Scrollvorgang, Abschnitte unterhalb des Sichtfensters blieben sonst weiss.
 * Gefunden am 16.08.2026 beim Ansehen des ersten Bildschirmfotos: unterhalb
 * der Buehne war die Seite leer, weil noch nichts eingeblendet war.
 */
@media print {
  .ahrk-sektion,
  .ahrk-ratgeber__block,
  .ahrk-startkarte,
  .ahrk-themenlink,
  .ahrk-objektkarte {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ahrk-akzentwelle svg { animation: none !important; }
}