/* =========================================================
   HAUS 113 – Projektspezifische Stile
   Alles, was theme.json nicht abdecken kann.
   Farben, Abstände und Schriften kommen als CSS-Variablen
   aus theme.json — hier werden keine Werte doppelt gepflegt.
   ========================================================= */

/* ---------------------------------------------------------
   1) Bedienbarkeit mit der Tastatur
   WCAG 2.2 AA: jeder fokussierbare Bereich braucht einen
   deutlich sichtbaren Fokus, der auf hellem UND dunklem
   Grund funktioniert.
   --------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Kein Fokusring bei reiner Mausbedienung, aber niemals ganz entfernen */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------
   2) Sprunglink
   Erste fokussierbare Stelle der Seite, sichtbar sobald
   angesprungen.
   --------------------------------------------------------- */
.skip-link,
.haus113-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 0.85rem 1.4rem;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}

.skip-link:focus,
.haus113-skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------
   3) Touchflächen
   WCAG 2.2 AA verlangt mindestens 24 x 24 px; 44 px ist die
   Größe, die sich auf dem Smartphone tatsächlich gut trifft.
   --------------------------------------------------------- */
.wp-block-navigation a,
.wp-block-button__link,
.wp-block-social-link a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------
   4) Bilder
   Verhindert Layoutsprünge und horizontales Scrollen.
   --------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

/* Bilder ohne Größenangabe im Markup nicht aus dem Raster schieben */
.wp-block-image img {
  display: block;
}

/* ---------------------------------------------------------
   5) Kein horizontales Scrollen
   Auf 320 px ist das der häufigste Fehler.
   --------------------------------------------------------- */
html,
body {
  overflow-x: clip;
}

/* Breite Inhalte scrollen in ihrem eigenen Container */
.haus113-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Scrollbalkenbreite von Anfang an reservieren — verhindert,
   dass die Seite beim Laden seitlich springt. */
html {
  scrollbar-gutter: stable;
}

/* ---------------------------------------------------------
   6) Sanfte Übergänge
   Bewusst zurückhaltend: nichts, was das Buchen verzögert.
   --------------------------------------------------------- */
.wp-block-button__link,
.wp-block-navigation a,
.haus113-card {
  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease, transform 160ms ease,
              box-shadow 160ms ease;
}

.haus113-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wp--preset--shadow--lifted);
}

/* ---------------------------------------------------------
   7) Reduzierte Bewegung respektieren
   Punkt 37 des Auftrags. Gilt ausnahmslos für alles.
   --------------------------------------------------------- */
@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;
  }

  .haus113-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------
   8) Nur für Screenreader
   --------------------------------------------------------- */
.haus113-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   9) Karten
   Grundform für Apartment-, Erlebnis- und Umgebungskarten.
   --------------------------------------------------------- */
.haus113-card {
  background: var(--wp--preset--color--white);
  border: 1px solid rgba(47, 42, 38, 0.09);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--soft);
  height: 100%;
}

/* ---------------------------------------------------------
   10) Eyebrow – die kleine Zeile über einer Überschrift
   --------------------------------------------------------- */
.haus113-eyebrow {
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
  margin-bottom: 0.6rem;
}

/* ---------------------------------------------------------
   11) Horizontaler Scroller für Mobilgeräte
   Für den Erlebnisse-Teaser und die Apartmentkarten.
   Auf dem Desktop wird daraus ein normales Raster.
   --------------------------------------------------------- */
.haus113-hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 78vw);
  gap: var(--wp--preset--spacing--30);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  padding-bottom: 0.75rem;
  -webkit-overflow-scrolling: touch;
}

.haus113-hscroll > * {
  scroll-snap-align: start;
}

@media (min-width: 782px) {
  .haus113-hscroll {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* ---------------------------------------------------------
   12) Flächen für externe Einbindungen
   Höhe wird reserviert, bevor Smoobu oder die Karte lädt —
   damit entsteht kein Layoutsprung (CLS).
   Der alte CLS-Workaround hing an IONOS-Selektoren; hier
   wird die Ursache gelöst statt das Symptom überklebt.
   --------------------------------------------------------- */
.haus113-embed {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--wp--preset--color--light-beige);
}

.haus113-embed--booking {
  min-height: 780px;
}

.haus113-embed--map {
  min-height: 420px;
  aspect-ratio: 16 / 10;
}

@media (min-width: 782px) {
  .haus113-embed--booking {
    min-height: 640px;
  }

  .haus113-embed--map {
    aspect-ratio: 21 / 9;
  }
}

.haus113-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Lade- und Fehlerzustand innerhalb einer Einbindungsfläche */
.haus113-embed__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: var(--wp--preset--spacing--40);
  text-align: center;
  color: var(--wp--preset--color--muted);
}

.haus113-embed__state[hidden] {
  display: none;
}

/* ---------------------------------------------------------
   13) Bildunterschriften und Bildnachweise
   Fotos von Tourismusorganisationen behalten ihren Credit.
   --------------------------------------------------------- */
.haus113-credit {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------
   14) Druck
   --------------------------------------------------------- */
@media print {
  .wp-block-navigation,
  .haus113-embed,
  .wp-block-button {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ---------------------------------------------------------
   15) Kopfbereich
   --------------------------------------------------------- */
.haus113-wordmark p { margin: 0; }

.haus113-wordmark a {
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

.haus113-wordmark a:hover,
.haus113-wordmark a:focus-visible {
  color: var(--wp--preset--color--primary);
}

.haus113-header-cta .wp-block-button__link {
  padding: 0.62rem 1.15rem;
}

/* Auf schmalen Displays bleibt der Buchungs-CTA sichtbar, aber kompakt.
   Die Unterzeile der Wortmarke weicht, damit nichts umbricht. */
@media (max-width: 600px) {
  .haus113-wordmark p:last-child { display: none; }
  .haus113-header-cta .wp-block-button__link {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
  }
}

/* ---------------------------------------------------------
   16) Fussbereich
   --------------------------------------------------------- */
.haus113-footer h3 { margin-bottom: 0.45rem; }

.haus113-footer a { text-decoration: none; }

.haus113-footer a:hover,
.haus113-footer a:focus-visible { text-decoration: underline; }

/* Fokusring muss auch auf dem braunen Grund sichtbar bleiben */
.haus113-footer :focus-visible {
  outline-color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------
   17) Kopfbereich: Umbruchfehler
   Gemessen bei 320, 390 und 768 px.
   --------------------------------------------------------- */

/* 320 px: "Haus 113" darf nicht in zwei Zeilen zerfallen. */
.haus113-wordmark p:first-child { white-space: nowrap; }

/* 768 px: die volle Navigation passt nicht in eine Zeile und
   brach in zwei Reihen um. WordPress schaltet das Klappmenue
   standardmaessig schon ab 600 px auf die Desktop-Ansicht;
   fuer diese Navigation ist das zu frueh. Wir behalten den
   Menue-Knopf bis 1023 px. */
@media (max-width: 1023px) {
  .haus113-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .haus113-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Der Buchungs-CTA bleibt auf jeder Breite in einer Zeile. */
.haus113-header-cta .wp-block-button__link {
  white-space: nowrap;
}

@media (max-width: 400px) {
  .haus113-header-cta .wp-block-button__link {
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
  }

  .haus113-wordmark p:first-child { font-size: 1.25rem; }
}

/* ---------------------------------------------------------
   18) Ueberschriften: kein Umbruch mitten im Wort
   Gemessen bei 390 px: "Ferienwohnungen" wurde zu
   "Ferienwohnunge / n" zerrissen.
   --------------------------------------------------------- */
h1, h2, h3, h4, .wp-block-heading {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

/* ---------------------------------------------------------
   19) Smoobu: Hoehe passgenau reservieren
   Am 08.09.2026 im echten Rendering gemessen:
   390 px -> 349 px hoch, 768 px -> 266 px, 1200 px -> 145 px.
   Reserviert wird jeweils knapp darueber. So entsteht kein
   Layoutsprung und trotzdem keine leere Flaeche.
   --------------------------------------------------------- */
.haus113-embed--booking {
  min-height: 370px;
  background: transparent;
  border-radius: 0;
}

@media (min-width: 601px) {
  .haus113-embed--booking { min-height: 290px; }
}

@media (min-width: 982px) {
  .haus113-embed--booking { min-height: 170px; }
}

/* Lade- und Fehlerzustand brauchen den ruhigen Untergrund,
   das Buchungstool bringt seine eigene weisse Karte mit. */
.haus113-embed--booking .haus113-embed__state {
  background: var(--wp--preset--color--light-beige);
  border-radius: 14px;
}

/* ---------------------------------------------------------
   20) Fehlerzustand darf nicht abgeschnitten werden
   Der Ladezustand liegt bewusst als Overlay ueber der
   reservierten Flaeche. Der Fehlerzustand dagegen muss die
   Flaeche aufziehen - sonst wird die Kontaktmoeglichkeit
   abgeschnitten, und genau die braucht der Gast dann.
   --------------------------------------------------------- */
.haus113-embed { overflow: visible; }

.haus113-embed__state:not([hidden]) ~ * { position: relative; }

.haus113-embed--booking #h113-smoobu-error:not([hidden]) {
  position: relative;
  inset: auto;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  color: var(--wp--preset--color--contrast);
}

/* Traegt der Fehlerzustand den Inhalt, entfaellt die
   reservierte Mindesthoehe. */
.haus113-embed--booking:has(#h113-smoobu-error:not([hidden])) {
  min-height: 0;
}

.haus113-embed--booking #h113-smoobu-error p {
  margin: 0 0 0.6rem;
}

.haus113-embed--booking #h113-smoobu-error p:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   21) Hinweiszeile unter Einbindungen
   Erklärt vor dem Klick, was beim Klick passiert.
   --------------------------------------------------------- */
.haus113-hinweis {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------
   22) Veranstaltungen
   Der Knopf steht im Fließtext; das Popup entsteht erst beim
   ersten Klick und hängt danach direkt am body.
   --------------------------------------------------------- */
.haus113-events {
  margin-block: var(--wp--preset--spacing--40);
}

.h113-events-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.h113-events-button:hover {
  background: var(--wp--preset--color--primary-dark);
  transform: translateY(-1px);
}

.h113-events-dialog {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 4vw, 2rem);
}

.h113-events-dialog[hidden] {
  display: none;
}

.h113-events-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(47, 42, 38, 0.6);
  animation: h113-einblenden 180ms ease both;
}

.h113-events-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  background: var(--wp--preset--color--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(47, 42, 38, 0.28);
  animation: h113-aufsteigen 220ms ease both;
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt keine. */
.h113-events-dialog.ohne-bewegung .h113-events-backdrop,
.h113-events-dialog.ohne-bewegung .h113-events-panel {
  animation: none;
}

.h113-events-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(47, 42, 38, 0.1);
}

.h113-events-kopf h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
}

.h113-events-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--light-beige);
  color: var(--wp--preset--color--primary-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.h113-events-close:hover {
  background: var(--wp--preset--color--sand);
}

.h113-events-inhalt {
  flex: 1 1 auto;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.h113-events-inhalt iframe {
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  border: 0;
}

.h113-events-status {
  margin: 0;
  padding: 1rem 1.25rem 0;
  color: var(--wp--preset--color--muted);
}

.h113-events-status strong {
  color: var(--wp--preset--color--contrast);
}

.h113-events-fuss {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(47, 42, 38, 0.1);
  font-size: 0.9rem;
}

@keyframes h113-einblenden {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes h113-aufsteigen {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   23) Karte – Platzhalter vor dem Klick
   Die Höhe steht schon (Abschnitt 12), der Platzhalter füllt
   sie mit etwas Nützlichem: der Adresse.
   --------------------------------------------------------- */
.h113-karte-platzhalter {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.85rem;
  padding: var(--wp--preset--spacing--40);
  text-align: center;
  background: var(--wp--preset--color--light-beige);
}

.h113-karte-adresse {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast);
}

.haus113-karte-route {
  margin-top: 0.75rem;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------
   24) Bewertungen
   Lade- und Fehlerzustand halten die Fläche besetzt, bis das
   Widget da ist. Keine springende Seite.
   --------------------------------------------------------- */
.haus113-bewertungen {
  min-height: 220px;
}

.h113-bewertungen-laden,
.h113-bewertungen-fehler {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  min-height: 220px;
  padding: var(--wp--preset--spacing--40);
  text-align: center;
  color: var(--wp--preset--color--muted);
  background: var(--wp--preset--color--light-beige);
  border-radius: 14px;
}

.h113-bewertungen-laden[hidden],
.h113-bewertungen-fehler[hidden] {
  display: none;
}

.h113-bewertungen-fehler strong {
  color: var(--wp--preset--color--contrast);
}

/* ---------------------------------------------------------
   25) Hero-Bildwechsler
   Die Fläche steht vom ersten Pixel an. Alle Bilder liegen
   übereinander; sichtbar ist immer genau eines.
   --------------------------------------------------------- */
.haus113-hero {
  position: relative;
  aspect-ratio: var(--haus113-hero-verhaeltnis, 4 / 3);
  border-radius: 16px;
  overflow: hidden;
  background: var(--wp--preset--color--light-beige);
  box-shadow: var(--wp--preset--shadow--lifted, 0 18px 40px rgba(47, 42, 38, 0.14));
}

.haus113-hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.haus113-hero__bild.ist-sichtbar {
  opacity: 1;
}

/* Ohne JavaScript bleibt das erste Bild stehen — nie eine
   leere Fläche. */
.haus113-hero__bild:first-of-type {
  opacity: 1;
}

.haus113-hero__bild:first-of-type:not(.ist-sichtbar) {
  opacity: 0;
}

/* Leichter Verlauf unten, damit die Beschriftung auf jedem
   Bild lesbar bleibt — auch auf hellen. */
.haus113-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(47, 42, 38, 0.62), rgba(47, 42, 38, 0));
}

.haus113-hero__label {
  position: absolute;
  left: 1rem;
  right: 4.5rem;
  bottom: 0.9rem;
  z-index: 2;
  margin: 0;
  color: #fff;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.haus113-hero__pause {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--wp--preset--color--primary-dark);
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.haus113-hero__pause:hover {
  background: #fff;
  transform: scale(1.05);
}

.haus113-hero__pause[hidden] {
  display: none;
}

/* Pausenzeichen: zwei Balken. Im angehaltenen Zustand wird
   daraus ein Dreieck (Wiedergabe). Reines CSS, kein Icon-Font,
   keine zusätzliche Anfrage. */
.haus113-hero__ikon {
  display: block;
  width: 14px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.haus113-hero.ist-angehalten .haus113-hero__ikon {
  width: 0;
  height: 0;
  border-left: 13px solid currentColor;
  border-right: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  margin-left: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .haus113-hero__bild {
    transition: none;
  }
}


/* ---------------------------------------------------------
   26) Galerien als ruhiges Raster

   WordPress verteilt Galeriebilder von Haus aus nach ihrem
   natürlichen Seitenverhältnis (flex-grow). Bei gemischten
   Hoch- und Querformaten entsteht daraus eine ausgefranste
   Wand mit Lücken. Hier wird daraus ein gleichmäßiges Raster:
   jede Kachel gleich groß, Ausschnitt mittig.

   Das Beschneiden geschieht nur in der Übersicht. Ein Klick
   öffnet das Bild ungeschnitten in der WordPress-eigenen
   Großansicht.
   --------------------------------------------------------- */
.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--30, 1rem);
}

@media (min-width: 782px) {
  .wp-block-gallery.has-nested-images.columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* Der Vergrößern-Knopf sitzt sonst auf dem unbeschnittenen Bild */
.wp-block-gallery.has-nested-images figure.wp-block-image .lightbox-trigger {
  inset: 0;
}

/* ---------------------------------------------------------
   27) Wohnungskarten: gleiche Bildhöhe

   Die drei Karten standen bisher unterschiedlich hoch, weil
   die Fotos unterschiedliche Seitenverhältnisse hatten. Ein
   festes Verhältnis bringt die Reihe in eine Linie.
   --------------------------------------------------------- */
.haus113-card .wp-block-image {
  margin: 0;
}

.haus113-card .wp-block-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


/* ---------------------------------------------------------
   28) Bildnachweise in der Galerie

   WordPress legt die Beschriftung standardmäßig als weiße
   Schrift direkt aufs Bild. Auf hellen Motiven — Schnee,
   Himmel, helle Fassaden — ist sie damit kaum zu lesen.
   Ein Verlauf darunter stellt den Kontrast in jedem Fall her,
   ohne das Bild zuzudecken.

   Der Nachweis steht bewusst am Bild und nicht gesammelt
   unter der Galerie: so wandert er mit, wenn ein Motiv
   später woanders verwendet wird.
   --------------------------------------------------------- */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 1.6rem 0.6rem 0.45rem;
  box-sizing: border-box;
  font-size: 0.7rem;
  line-height: 1.35;
  text-align: right;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(to top, rgba(28, 24, 21, 0.72), rgba(28, 24, 21, 0));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border-radius: 0 0 12px 12px;
  pointer-events: none;
}

/* Einzelbilder im Fließtext: Nachweis ruhig unter das Bild,
   dort ist Platz dafür. */
.wp-block-image:not(.wp-block-gallery .wp-block-image) > figcaption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
  text-align: left;
}

/* ---------------------------------------------------------
   29) Abschnittsbilder im Fließtext

   Ein hochformatiges Handyfoto füllt sonst den ganzen
   Bildschirm und zerreißt den Lesefluss. Ein festes,
   liegendes Format hält den Rhythmus der Seite ruhig.
   Das ungeschnittene Bild bleibt über die Großansicht
   erreichbar.
   --------------------------------------------------------- */
.haus113-abschnittsbild {
  margin-block: var(--wp--preset--spacing--40);
}

.haus113-abschnittsbild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
}

@media (max-width: 600px) {
  .haus113-abschnittsbild img {
    aspect-ratio: 4 / 3;
  }
}

/* ---------------------------------------------------------
   30) Aufklappbare Fragen

   Das native details-Element bringt Tastaturbedienung und
   Vorlesbarkeit von Haus aus mit — es braucht kein Skript.
   Nur Aussehen fehlt: Standard ist ein kleines Dreieck und
   eine Zeile, die schwächer wirkt als der Fließtext.
   --------------------------------------------------------- */
.wp-block-details {
  border-bottom: 1px solid rgba(47, 42, 38, 0.12);
  margin: 0;
}

.wp-block-details:first-of-type {
  border-top: 1px solid rgba(47, 42, 38, 0.12);
}

.wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 1rem 0.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--wp--preset--font-family--manrope);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast);
  transition: color 160ms ease;
}

.wp-block-details > summary::-webkit-details-marker,
.wp-block-details > summary::marker {
  display: none;
  content: "";
}

.wp-block-details > summary:hover {
  color: var(--wp--preset--color--primary);
}

/* Winkel rechts, dreht sich beim Öffnen */
.wp-block-details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-right: 2px solid var(--wp--preset--color--primary);
  border-bottom: 2px solid var(--wp--preset--color--primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms ease;
}

.wp-block-details[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.wp-block-details > *:not(summary) {
  margin-block: 0 1rem;
  padding-right: 2rem;
  color: var(--wp--preset--color--muted);
}

.wp-block-details > summary + * {
  margin-top: -0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-details > summary::after {
    transition: none;
  }
}

/* ---------------------------------------------------------
   31) Vertrauenszeile unter den Hauptknoepfen

   Bewusst echter Text und kein Fremd-Widget: die Startseite
   kontaktiert damit weiterhin keinen einzigen externen Host,
   die Zahl steht sofort im Quelltext und ist auch ohne
   JavaScript da. Die vollstaendigen Bewertungen stehen eine
   Seite weiter.
   --------------------------------------------------------- */
.haus113-vertrauen {
  margin-top: 1.1rem;
  max-width: 46ch;
  line-height: 1.6;
  text-wrap: pretty;
}

.haus113-vertrauen a {
  white-space: nowrap;
}


/* ---------------------------------------------------------
   32) Buehne – der Kopf der Startseite

   Ein grossformatiges Bild ueber die volle Breite, der Text
   liegt darauf. Die volle Breite kommt aus dem umgebenden
   Block (alignfull), nicht aus einem 100vw-Trick: der wuerde
   auf Windows die Breite der Bildlaufleiste mitrechnen und
   die Seite waagerecht verschiebbar machen.
   --------------------------------------------------------- */

.h113-buehne {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(30rem, 78svh, 47rem);
  overflow: hidden;
  color: #fff;
  /* Faellt ein Bild aus, bleibt eine warme Flaeche statt
     weisser Schrift auf Weiss. */
  background-color: #3A2B1E;
}

/* --- Die Bilder ------------------------------------------ */

.h113-buehne__bilder {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.h113-buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  opacity: 0;
  /* Langsam genug, dass es nicht blinkt, kurz genug, dass es
     nicht als Fehler wahrgenommen wird. */
  transition: opacity 1400ms ease-in-out;
}

.h113-buehne__bild.ist-an {
  opacity: 1;
}

/* --- Der Schleier ----------------------------------------
   Ohne ihn ist heller Text auf hellen Bildstellen nicht
   lesbar. Von unten kraeftig, nach oben auslaufend, damit
   vom Bild so viel wie moeglich sichtbar bleibt.
   --------------------------------------------------------- */

.h113-buehne__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(28, 21, 15, 0.88) 0%,
      rgba(28, 21, 15, 0.72) 26%,
      rgba(28, 21, 15, 0.38) 58%,
      rgba(28, 21, 15, 0.10) 100%
    );
}

/* --- Der Inhalt ------------------------------------------ */

.h113-buehne__inhalt {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  padding-block: clamp(4rem, 12vw, 8rem) clamp(4.5rem, 9vw, 6.5rem);
}

.h113-buehne__spalte {
  max-width: 40rem;
}

.h113-buehne__marke {
  margin: 0 0 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.h113-buehne__titel {
  margin: 0 0 1.4rem;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(20, 14, 9, 0.35);
}

/* Der Hausname als ruhige zweite Stimme unter dem Titel -
   kursiv, leichter, in der warmen Akzentfarbe. */
.h113-buehne__zusatz {
  display: block;
  margin-top: 0.35em;
  font-size: 0.46em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #E4CBA6;
}

.h113-buehne__lauf {
  margin: 0 0 2rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.93);
  text-shadow: 0 1px 16px rgba(20, 14, 9, 0.4);
}

/* --- Die Knoepfe ----------------------------------------- */

.h113-buehne__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.h113-buehne__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

/* Auf dunklem Bild traegt eine helle Flaeche weiter als die
   Hausfarbe Braun - deshalb hier Creme mit braunem Text. */
.h113-buehne__knopf--voll {
  background-color: var(--wp--preset--color--base, #F7F3ED);
  color: var(--wp--preset--color--primary, #6B4A2F);
  border: 1px solid transparent;
}

.h113-buehne__knopf--voll:hover,
.h113-buehne__knopf--voll:focus-visible {
  background-color: #fff;
  color: #55381F;
}

.h113-buehne__knopf--rand {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
}

.h113-buehne__knopf--rand:hover,
.h113-buehne__knopf--rand:focus-visible {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.85);
}

.h113-buehne__knopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --- Bildtext und Pause ---------------------------------- */

.h113-buehne__fuss {
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(1rem, 2.5vw, 1.6rem);
  width: min(100% - 2.5rem, 1200px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}

.h113-buehne__bildtext {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.h113-buehne__pause {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(20, 14, 9, 0.35);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.h113-buehne__pause:hover {
  background: rgba(20, 14, 9, 0.55);
}

/* Zwei Balken = laeuft (anhalten). Ein Dreieck = angehalten
   (fortsetzen). Rein aus CSS, damit keine Datei nachgeladen
   werden muss. */
.h113-buehne__symbol {
  width: 12px;
  height: 13px;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.h113-buehne.ist-angehalten .h113-buehne__symbol {
  width: 0;
  height: 0;
  border-left: 11px solid #fff;
  border-right: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.h113-buehne__verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Kleine Bildschirme ----------------------------------
   Zwei Drittel der Gaeste kommen mit dem Handy. Dort ist die
   Buehne hoeher, weil hochkant weniger Bild in die Breite
   passt, und der Titel etwas kompakter.
   --------------------------------------------------------- */

/* Auf breiten Schirmen zusaetzlich von links abdunkeln: dort
   steht der Text, waehrend rechts das Bild frei bleiben soll. */
@media (min-width: 782px) {

  .h113-buehne__schleier {
    background:
      linear-gradient(
        to right,
        rgba(28, 21, 15, 0.72) 0%,
        rgba(28, 21, 15, 0.45) 34%,
        rgba(28, 21, 15, 0.10) 62%,
        rgba(28, 21, 15, 0.00) 100%
      ),
      linear-gradient(
        to top,
        rgba(28, 21, 15, 0.80) 0%,
        rgba(28, 21, 15, 0.52) 30%,
        rgba(28, 21, 15, 0.18) 62%,
        rgba(28, 21, 15, 0.06) 100%
      );
  }
}

@media (max-width: 781px) {

  .h113-buehne {
    min-height: clamp(31rem, 84svh, 44rem);
  }

  .h113-buehne__inhalt {
    padding-block: clamp(5rem, 22vw, 8rem) clamp(4rem, 14vw, 5.5rem);
  }

  .h113-buehne__knopf {
    flex: 1 1 100%;
  }

  .h113-buehne__bildtext {
    font-size: 0.74rem;
  }
}

/* --- Bewegung reduzieren ---------------------------------
   Das Skript haelt den Wechsel bereits an; hier wird zusaetz-
   lich die Ueberblendung selbst abgeschaltet, damit auch ein
   von Hand ausgeloester Wechsel nicht blendet.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .h113-buehne__bild {
    transition: none;
  }
}


/* ---------------------------------------------------------
   33) Menue auf dem Handy

   Das Aufklappmenue uebernimmt sonst die Rechtsbuendigkeit
   der Kopfzeile: die Eintraege stehen dann treppenfoermig
   am rechten Rand und wirken wie ein Fehler. Hier wird es
   zu einer ruhigen, linksbuendigen Liste in den Hausfarben.
   --------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--base, #F7F3ED);
  color: var(--wp--preset--color--contrast, #2F2A26);
  padding: clamp(1.25rem, 5vw, 2rem);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 3.25rem;
}

/* Die Liste selbst: eine Spalte, linksbuendig, gleichmaessig. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  align-items: stretch;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  /* 52 px hohe Flaeche: bequem mit dem Daumen zu treffen,
     auch in einem fahrenden Zug. */
  padding: 0.95rem 0;
  font-size: 1.15rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  border-bottom: 1px solid rgba(47, 42, 38, 0.12);
}

/* Untereintraege eingerueckt und eine Spur leiser, damit die
   Zugehoerigkeit ohne Erklaerung sichtbar ist. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  width: 100%;
  padding-left: 1.1rem;
  border-left: 2px solid rgba(107, 74, 47, 0.28);
  margin-left: 0.15rem;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(47, 42, 38, 0.82);
}

/* Der Pfeil am Aufklapp-Eintrag soll rechts stehen, nicht
   direkt an der Schrift kleben. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-submenu__toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

/* Schliessen-Knopf gross genug und in der Hausfarbe. */
.wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  color: var(--wp--preset--color--contrast, #2F2A26);
}

/* Der Knopf in der Kopfzeile soll auf dem Handy nicht mit dem
   Menuesymbol um Platz streiten. */
@media (max-width: 600px) {

  .wp-block-navigation__responsive-container-open {
    padding: 0.35rem;
  }

  .haus113-kopf .wp-block-button__link,
  .wp-block-template-part header .wp-block-button__link {
    padding-inline: 0.9rem;
    font-size: 0.9rem;
  }
}


/* ---------------------------------------------------------
   34) Seitenkopf der Unterseiten

   Gleiche Idee wie die Buehne, nur ruhiger: ein Bild, ein
   Titel, kein Bildwechsel. Damit sehen alle Seiten wie eine
   Familie aus, ohne dass jede die Startseite nachaefft.
   --------------------------------------------------------- */

.h113-seitenkopf {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(19rem, 44svh, 27rem);
  overflow: hidden;
  color: #fff;
  background-color: #3A2B1E;
}

/* Panoramabilder sind sehr breit und wenig hoch. Ein hoher
   Kopf wuerde sie beschneiden, bis nichts mehr zu erkennen
   ist - deshalb hier flacher. */
.h113-seitenkopf.ist-flach {
  min-height: clamp(15rem, 34svh, 22rem);
}

/* Ohne Bild bleibt der Kopf hell und flach: die Seite soll
   auch dann anstaendig aussehen. */
.h113-seitenkopf.ohne-bild {
  min-height: 0;
  background-color: transparent;
  color: inherit;
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 3vw, 2rem);
}

.h113-seitenkopf__bild {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.h113-seitenkopf__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--h113-fokus, 50%);
}

.h113-seitenkopf__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      to top,
      rgba(28, 21, 15, 0.86) 0%,
      rgba(28, 21, 15, 0.62) 34%,
      rgba(28, 21, 15, 0.24) 68%,
      rgba(28, 21, 15, 0.08) 100%
    );
}

.h113-seitenkopf__inhalt {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 5rem) clamp(2.25rem, 5vw, 3.25rem);
}

.h113-seitenkopf__spalte {
  max-width: 38rem;
}

.h113-seitenkopf__marke {
  margin: 0 0 0.9rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.h113-seitenkopf.ohne-bild .h113-seitenkopf__marke {
  color: var(--wp--preset--color--primary, #6B4A2F);
}

.h113-seitenkopf__titel {
  margin: 0;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 1px 22px rgba(20, 14, 9, 0.35);
}

.h113-seitenkopf.ohne-bild .h113-seitenkopf__titel {
  color: inherit;
  text-shadow: none;
}

.h113-seitenkopf__lauf {
  margin: 1.15rem 0 0;
  max-width: 33rem;
  font-size: clamp(1rem, 1.5vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.93);
  text-shadow: 0 1px 14px rgba(20, 14, 9, 0.4);
}

.h113-seitenkopf.ohne-bild .h113-seitenkopf__lauf {
  color: inherit;
  text-shadow: none;
}

/* Bildnachweis: klein, aber lesbar - und immer da, wo das
   Bild herkommt, nicht irgendwo im Impressum versteckt. */
.h113-seitenkopf__nachweis {
  position: absolute;
  z-index: 3;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.5rem, 2vw, 0.9rem);
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 8px rgba(20, 14, 9, 0.6);
}

@media (max-width: 781px) {

  .h113-seitenkopf {
    min-height: clamp(17rem, 40svh, 23rem);
  }

  .h113-seitenkopf.ist-flach {
    min-height: clamp(13rem, 30svh, 18rem);
  }
}


/* Nachtrag zu 33: Untermenue unter den Eintrag statt daneben.

   Der Kern gibt dem Untermenue eine feste Breite von 200 px und
   legt es als Flex-Nachbarn neben den Aufklapp-Eintrag. Auf dem
   Handy sieht das aus, als waere die Liste verrutscht. */

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item.has-child {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  position: static;
  width: 100%;
  min-width: 0;
  padding: 0 0 0 1.1rem;
  margin: 0;
  border: 0;
  border-left: 2px solid rgba(107, 74, 47, 0.28);
  background-color: transparent;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  border-bottom-color: rgba(47, 42, 38, 0.08);
}


/* Nachtrag zu 33: Hintergrund und Aufklapp-Pfeil.

   Der Kern faerbt das offene Menue mit
   ".wp-block-navigation:not(.has-background) …" weiss - das ist
   eine Klasse staerker als eine einfache Verschachtelung. Deshalb
   hier dieselbe Form, nur mit unserer Farbe.

   Der Pfeil neben "Ferienwohnungen" entfaellt: im offenen Menue
   steht das Untermenue ohnehin schon ausgeklappt darunter. Ein
   Schalter, der nichts schaltet, verwirrt nur. */

.wp-block-navigation:not(.has-background)
  .wp-block-navigation__responsive-container.is-menu-open {
  /* Die Regel des Kerns traegt ein zusaetzliches :not() und ist
     damit staerker als jede vernuenftige Verschachtelung. Hier
     ist "!important" die ehrlichere Loesung als ein Wettruesten
     mit Hilfsklassen. */
  background-color: var(--wp--preset--color--base, #F7F3ED) !important;
  color: var(--wp--preset--color--contrast, #2F2A26);
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-icon {
  display: none;
}


/* ---------------------------------------------------------
   35) Entfernung als Route

   In den Ausflugslisten fuehrt der Name zur offiziellen Seite
   des Ziels, die Entfernung oeffnet die Route ab Haus 113.
   Damit man das sieht, ohne es lesen zu muessen, steht ein
   kleiner Stecknadelkopf davor - als Hintergrundbild, damit
   keine zusaetzliche Datei geladen werden muss.
   --------------------------------------------------------- */

.haus113-route {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  text-decoration-color: rgba(107, 74, 47, 0.4);
  text-underline-offset: 0.18em;
}

.haus113-route::before {
  content: "";
  flex: 0 0 auto;
  width: 0.82em;
  height: 0.82em;
  background-color: currentColor;
  /* Stecknadel als Maske: faerbt sich mit der Schriftfarbe mit
     und bleibt damit auch im Fokus- und Hover-Zustand richtig. */
  -webkit-mask: var(--h113-nadel) center / contain no-repeat;
  mask: var(--h113-nadel) center / contain no-repeat;
  opacity: 0.75;
}

:root {
  --h113-nadel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-3.9 0-7 3.1-7 7 0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.haus113-route:hover::before,
.haus113-route:focus-visible::before {
  opacity: 1;
}


/* ---------------------------------------------------------
   36) Karten in Spalten sauber ausrichten

   Die Bildkarten (Startseite, Umgebung, Erlebnisse) standen
   nicht auf einer Linie, sobald ein Kartentext eine Zeile
   mehr brauchte als die anderen. Zwei Ursachen, zwei Regeln:

   a) Die Karte füllt jetzt die volle Spaltenhöhe. Damit
      liegen Ober- UND Unterkante aller Karten einer Reihe
      auf derselben Höhe, egal wie lang der Text ist.

   b) Die Bilder bekommen ein festes Seitenverhältnis und
      werden beschnitten statt gestaucht. Die Motive in der
      Mediathek sind teils quer (1024x549), teils hoch
      (769x1024) - ohne feste Ratio ergibt das drei
      verschieden hohe Bilder nebeneinander.
   --------------------------------------------------------- */

.wp-block-columns > .wp-block-column > .haus113-card {
  height: 100%;
}

.haus113-card .wp-block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Auf dem Handy stehen die Karten untereinander - dort ist
   die volle Höhe überflüssig und würde nur Leerraum machen. */
@media (max-width: 781px) {
  .wp-block-columns > .wp-block-column > .haus113-card {
    height: auto;
  }
}


/* ---------------------------------------------------------
   37) Kartenreihe: das versetzte Bild

   .haus113-hscroll ist ein Grid - die Karten stehen also
   nebeneinander. WordPress setzt seinen Standardabstand
   zwischen Blöcken aber als margin-top auf jedes Element
   AUSSER dem ersten. Untereinander ist das richtig,
   nebeneinander nicht: Karte 1 bekam 0, die Karten 2 und 3
   je 36 Pixel - und damit stand die erste Karte um genau
   diesen Betrag höher als die beiden anderen.

   Im Grid regelt gap den Abstand, margin ist dort überflüssig.
   --------------------------------------------------------- */

.haus113-hscroll > * {
  margin-top: 0;
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   38) BUCHUNGSSYSTEM: DER RAHMEN FUELLT DIE FLAECHE

   Seit dem 9. September 2026 binden wir das Smoobu-Buchungs-
   system als schlichtes iFrame ein, ohne deren Einbettungs-
   skript. Das Skript hat die Hoehe selbst gesetzt; jetzt macht
   das dieses Stylesheet.

   Wichtig: height: 100% allein greift hier nicht, weil die
   Flaeche ihre Hoehe nur ueber min-height bekommt. Deshalb
   wird der Rahmen absolut ueber die ganze Flaeche gelegt.
   So hat auch der Kalender genug Platz, um sich zu oeffnen.
   --------------------------------------------------------- */

.haus113-embed--booking {
  min-height: 760px;
  border-radius: 14px;
}

@media (min-width: 601px) {
  .haus113-embed--booking { min-height: 700px; }
}

@media (min-width: 982px) {
  .haus113-embed--booking { min-height: 620px; }
}

.haus113-embed--booking .haus113-embed__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ---------------------------------------------------------
   39) KONTAKTLISTE MIT SYMBOLEN

   Auf "Anreise & Kontakt" steht vor jeder Zeile ein kleines
   Symbol statt des Aufzaehlungspunktes: Hoerer, Sprechblase,
   Umschlag, Kartennadel. Die Symbole sind schlichte Striche
   in der Akzentfarbe und wachsen mit der Schriftgroesse mit.

   Sie sind rein dekorativ (aria-hidden), die Bedeutung steht
   im Text daneben.
   --------------------------------------------------------- */

.haus113-kontaktliste {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.haus113-kontaktliste li {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.haus113-kontaktliste li::marker {
  content: "";
}

.haus113-kontaktliste .haus113-icon {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  align-self: flex-start;
  margin-top: 0.28em;
  color: var(--wp--preset--color--accent, currentColor);
}


/* 40) NUR FUER VORLESEPROGRAMME
 *
 * Ueberschriften, die die Gliederung der Seite vollstaendig
 * machen, aber im Layout keinen Platz brauchen. Sie stehen im
 * Quelltext, werden vorgelesen und von Suchmaschinen gelesen -
 * man sieht sie nur nicht.
 * ------------------------------------------------------------ */
.h113-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------
   42. Zustimmung fuer externe Inhalte
   Leiste am unteren Rand. Sichtbar, solange keine Entscheidung
   vorliegt; danach nur noch auf Wunsch ueber den Fusszeilen-Knopf.
   --------------------------------------------------------------- */

#h113-zustimmung.h113-zustimmung{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  background:var(--wp--preset--color--base,#F7F3ED);
  border-top:1px solid rgba(47,42,38,.14);
  box-shadow:0 -8px 28px rgba(47,42,38,.14);
  color:var(--wp--preset--color--contrast,#2F2A26);
  max-height:88vh; overflow-y:auto;
}
html:not([data-h113-extern]) #h113-zustimmung,
#h113-zustimmung.h113-offen{ display:block; }

.h113-zustimmung__innen{
  max-width:1180px; margin:0 auto; padding:1.05rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
}
.h113-zustimmung__text{ flex:1 1 26rem; font-size:.92rem; line-height:1.55; }
.h113-zustimmung__text p{ margin:0; }
.h113-zustimmung__titel{ margin:0 0 .2rem !important; }
.h113-zustimmung__text a{ color:inherit; }

.h113-zustimmung__knoepfe{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.h113-zustimmung button{ font:inherit; cursor:pointer; border-radius:.45rem; }
.h113-zustimmung__ja,
.h113-zustimmung__nein,
.h113-zustimmung__speichern{
  padding:.72rem 1.35rem;
  border:1px solid var(--wp--preset--color--primary,#6B4A2F);
}
.h113-zustimmung__ja{ background:var(--wp--preset--color--primary,#6B4A2F); color:#fff; }
.h113-zustimmung__ja:hover{ background:var(--wp--preset--color--primary-dark,#4A3426); }
.h113-zustimmung__nein,
.h113-zustimmung__speichern{ background:transparent; color:var(--wp--preset--color--primary,#6B4A2F); }
.h113-zustimmung__nein:hover,
.h113-zustimmung__speichern:hover{ background:var(--wp--preset--color--light-beige,#EDE4D9); }
.h113-zustimmung__mehr{
  background:none; border:0; padding:.72rem .3rem; text-decoration:underline;
  color:var(--wp--preset--color--muted,#6E635A);
}

.h113-zustimmung__wahl{
  flex:1 1 100%; border-top:1px solid rgba(47,42,38,.12); padding-top:.8rem;
}
.h113-zustimmung__zeile{
  display:flex; gap:1.2rem; align-items:flex-start; justify-content:space-between;
  padding:.55rem 0; font-size:.92rem; line-height:1.5;
}
.h113-zustimmung__klein{ color:var(--wp--preset--color--muted,#6E635A); font-size:.86em; }
.h113-zustimmung__immer{ color:var(--wp--preset--color--muted,#6E635A); font-size:.85rem; white-space:nowrap; }
.h113-zustimmung__zeile input[type="checkbox"]{
  width:1.4rem; height:1.4rem; flex:none; margin:.15rem 0 0;
  accent-color:var(--wp--preset--color--primary,#6B4A2F);
}
.h113-zustimmung__speichern-zeile{ margin:.7rem 0 0; }

.h113-zustimmung-wieder{ text-align:center; margin:0; padding:0 1rem 1.4rem; }
.h113-zustimmung-wieder button{
  font:inherit; font-size:.85rem; background:none; border:0; cursor:pointer;
  color:var(--wp--preset--color--muted,#6E635A); text-decoration:underline; padding:.4rem;
}

@media (max-width:781px){
  .h113-zustimmung__innen{ padding:.9rem 1.1rem; gap:.75rem; }
  .h113-zustimmung__text{ flex:1 1 100%; }
  .h113-zustimmung__knoepfe{ width:100%; }
  .h113-zustimmung__ja,
  .h113-zustimmung__nein{ flex:1 1 45%; text-align:center; padding:.75rem .6rem; }
  .h113-zustimmung__mehr{ flex:1 1 100%; text-align:center; }
}

/* Kleiner Datenhinweis unter den Ladeknoepfen. Bewusst leise:
   die Einladung steht oben, die Technik darunter. */
.h113-datenhinweis{
  font-size:.82rem; line-height:1.5;
  color:var(--wp--preset--color--muted,#6E635A);
  max-width:34rem; margin-inline:auto;
}

/* Der Veranstaltungs-Kasten darf die erlaubte Hoehe wirklich nutzen.
   Vorher wuchs er nur mit dem Inhalt und zeigte vom Rundschreiben
   kaum mehr als einen Streifen. */
.h113-events-panel{ height:min(88vh,900px); }
.h113-events-inhalt iframe{ min-height:420px; }
.h113-events-fuss{ display:flex; flex-wrap:wrap; gap:.35rem 1.6rem; align-items:center; }