/* =============================================================================
   Ferienwohnung Oberrainbauernhof — Seitenstile
   -----------------------------------------------------------------------------
   Umsetzung von "Ferienwohnung Oberrainbauernhof.dc.html".
   Farben, Typografie, Abstände und Motion kommen aus dem Design System
   (_ds/.../styles.css). Diese Datei enthält nur die Seiten- und
   Komponentenschicht darüber — keine eigenen Farbwerte, keine eigenen Schriften.
   ========================================================================== */


/* ============================ 1. Tokens je Breite ========================= */

@media (min-width: 1600px) {
  :root { --page-pad-desktop: 48px; --section-y-desktop: 160px; --h2: 64px; }
}
@media (max-width: 1599px) {
  :root { --page-pad-desktop: 32px; --section-y-desktop: 128px; --h2: 56px; }
}
@media (max-width: 1279px) {
  :root { --page-pad-desktop: 28px; --section-y-desktop: 104px; --h2: 52px; --gutter: 24px; }
}
@media (max-width: 991px) {
  :root {
    --page-pad-desktop: 24px; --section-y-desktop: 88px; --gutter: 20px; --nav-height: 72px;
    --h2: 34px; --h3: 22px; --body: 16px; --body-l: 20px;
    --space-5: 32px; --space-6: 40px; --space-8: 40px;
    --stack-headline-body: 20px; --stack-body-cta: 32px;
    --eyebrow: 11px; --eyebrow-s: 11px;
  }
}
@media (max-width: 767px) {
  :root {
    --page-pad-desktop: 20px; --section-y-desktop: 72px; --gutter: 16px;
    --h2: 30px; --h3: 21px; --body-l: 19px;
    --space-5: 24px; --space-6: 32px; --space-7: 32px; --space-8: 32px;
    --stack-headline-body: 16px; --stack-body-cta: 24px;
    --dur-reveal: 560ms; --measure-ruhezone: 100%;
  }
}
@media (max-width: 479px) {
  :root { --body-l: 18px; }
}


/* ============================ 2. Grundgerüst ============================== */

html { scroll-behavior: smooth; }
body { margin: 0; max-width: 100%; }

.orb-seite {
  background: var(--surface-hell);
  color: var(--text-body);
  overflow-x: hidden;

  /* Korrektur am Token `--measure`: Das Design System schreibt 62–72 Zeichen
     Zeilenlänge vor, definiert dafür aber 64ch. Die Ziffer „0" ist in
     Instrument Sans deutlich breiter als der Durchschnittsbuchstabe, deshalb
     ergeben 64ch rund 85 Zeichen. 49ch trifft die vorgeschriebenen ~66. */
  --measure: 49ch;
  --measure-eng: 40ch;
}

/* Raster-Elemente dürfen unter ihre Inhaltsbreite schrumpfen. Ohne das
   erzwingen Formularfelder mit fester Eigenbreite (date-Inputs) eine zu
   breite Spalte, die `overflow-x: hidden` dann unsichtbar abschneidet. */
.orb-duo > *,
.orb-kontakt > *,
.orb-kontakt__links > *,
.orb-feldpaar > *,
.orb-formular > * { min-width: 0; }

.orb-seite img,
.orb-seite iframe { max-width: 100%; }

/* Ein Container, links wie rechts derselbe Rand. */
.orb-container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--page-pad-desktop);
  padding-right: var(--page-pad-desktop);
}

/* Gemeinsamer Bewegungsvertrag für alles Klickbare: nur Farbe und ein
   Zwei-Pixel-Anheben, kein Skalieren (Brand-Regel "kein Bounce"). */
.orb-seite a,
.orb-seite button {
  transition:
    transform 240ms var(--ease-transform),
    color var(--dur-hover-farbe) var(--ease-transform),
    background-color var(--dur-hover-farbe) var(--ease-transform),
    border-color var(--dur-hover-farbe) var(--ease-transform),
    opacity var(--dur-hover-farbe) var(--ease-transform);
}
.orb-seite a:hover,
.orb-seite button:hover { transform: translateY(-2px); }
.orb-seite a:active,
.orb-seite button:active { transform: translateY(0); }

/* Das Design System schreibt den Fokusring auf dunklem Grund in Glut vor —
   Bollenrot Tief wäre auf Tannennacht praktisch unsichtbar. `base.css`
   definiert nur die helle Variante, die dunkle kommt hier dazu. */
.orb-nav :focus-visible,
.orb-hero :focus-visible,
.orb-footer :focus-visible,
.orb-menu :focus-visible { outline-color: var(--focus-ring-dunkel); }

.orb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--tannennacht);
  color: var(--morgennebel);
  font-family: var(--font-sans);
  font-size: 15px;
  border: 0;
}
.orb-skip:focus { left: 0; }


/* ============================ 3. Buttons ================================== */

.orb-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  text-decoration: none;
  cursor: pointer;
}
.orb-btn--s { padding: 11px 18px; font-size: 14px; }
.orb-btn--m { padding: 15px 26px; font-size: 15px; }
.orb-btn--l { padding: 18px 32px; font-size: 16px; }

.orb-btn--primaer { background: var(--bollenrot); color: #FFFFFF; }
.orb-btn--primaer:hover { background: var(--bollenrot-tief); color: #FFFFFF; }

.orb-btn--sekundaer { background: transparent; color: var(--granit); border-color: var(--nebellinie); }
.orb-btn--sekundaer:hover { color: var(--granit); border-color: var(--granit); }

.orb-btn--sekundaer-dunkel { background: transparent; color: var(--morgennebel); border-color: rgba(233, 235, 230, 0.42); }
.orb-btn--sekundaer-dunkel:hover { color: var(--morgennebel); border-color: var(--morgennebel); }

/* Textlink: Zeile mit Unterstrich, Pfeil steht im Text. */
.orb-btn--link {
  padding: 4px 0 8px;
  background: transparent;
  color: var(--bollenrot-tief);
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.orb-btn--link:hover { color: var(--bollenrot); }

@media (max-width: 991px) {
  .orb-btn--link { box-sizing: border-box; min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
}

/* Trefferflächen von mindestens 44 px auf jedem Touchgerät — nicht nur bis
   991 px. Ein iPad im Querformat ist 1024 bis 1366 px breit und wird trotzdem
   mit dem Finger bedient. */
@media (pointer: coarse) {
  .orb-btn--link { box-sizing: border-box; min-height: 44px; padding-top: 13px; padding-bottom: 13px; }
  .orb-adresse__link { min-height: 44px; }
  .orb-footer__links a,
  .orb-footer__folgt { min-height: 44px; display: inline-flex; align-items: center; }
}


/* ============================ 4. Navigation =============================== */

.orb-kopfbereich { position: relative; }

.orb-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
}
.orb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.orb-nav__marke {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: var(--tracking-display);
  color: var(--morgennebel);
  text-decoration: none;
  border: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.orb-nav__marke:hover { color: var(--morgennebel); }
.orb-nav__rechts {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.orb-nav__link {
  box-sizing: border-box;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-medium);
  color: var(--morgennebel);
  opacity: 0.72;
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.orb-nav__link:hover { color: var(--morgennebel); opacity: 1; }
.orb-nav__cta {
  box-sizing: border-box;
  min-height: 40px;
  margin-left: var(--space-1);
  padding: 9px 16px;
  font-size: 14px;
}
@media (pointer: coarse) {
  .orb-nav__cta { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
}

.orb-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--morgennebel);
}
.orb-burger__zeichen {
  display: block;
  position: relative;
  width: 22px;
  height: 16px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.orb-burger__zeichen > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 1.5px solid currentColor;
  transform: translateY(-50%);
}

@media (max-width: 991px) {
  .orb-nav__link,
  .orb-nav__cta { display: none; }
  .orb-burger { display: inline-flex; }
}


/* ============================ 5. Hero ===================================== */

.orb-hero {
  position: relative;
  min-height: 86dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--tannennacht);
}
.orb-hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--bild-grade-dunkel);
  animation: orb-kenburns var(--dur-hero-ken-burns) linear forwards;
}
/* Textschutz: oben für die Navigation, unten für Headline und Buttons. */
.orb-hero__scrim {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(19, 26, 21, 0.70) 0%, rgba(19, 26, 21, 0.28) 34%, rgba(19, 26, 21, 0) 52%),
    linear-gradient(to top, rgba(19, 26, 21, 0.86) 0%, rgba(19, 26, 21, 0.28) 45%, rgba(19, 26, 21, 0.10) 100%);
}
.orb-hero__inhalt {
  position: relative;
  /* Die Navigation liegt ohne eigene Fläche über dem Hero. Der Textblock ist
     unten ausgerichtet, hält aber oben die Navigationshöhe frei — sonst
     schiebt er sich bei niedrigen Fenstern (Querformat) unter die Navigation. */
  padding-top: calc(var(--nav-height) + var(--space-2));
  padding-bottom: var(--space-9);
  text-align: left;
}
/* Flache Fenster: der Hero soll nicht ins Endlose wachsen. */
@media (max-height: 620px) {
  .orb-hero__inhalt { padding-bottom: var(--space-6); }
}
.orb-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-invers);
  margin-bottom: var(--space-3);
}
.orb-hero__titel {
  margin: 0;
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  /* Eine durchgehende Kurve von 992 px bis zum Deckel bei rund 1700 px —
     vorher sprang die Headline an zwei Stellen (1280 und 1600 px) um bis zu
     23 px, sichtbar beim Aufziehen des Fensters. */
  font-size: clamp(74px, 8.7vw, 148px);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--morgennebel);
  text-wrap: balance;
}
.orb-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@keyframes orb-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes orb-kenburns-schmal { from { transform: scale(1); } to { transform: scale(1.03); } }

@media (max-width: 991px) {
  /* Auf dem Tablet steht der Hero im Hochformat: 86dvh wären dort über
     1000 px, von denen mehr als die Hälfte nur Himmel zeigt. Der flachere
     Ausschnitt holt Hof und Tal ins Bild. */
  .orb-hero { min-height: min(58dvh, 620px); }
  .orb-hero__bild { object-position: 50% 66%; }
  .orb-hero__titel { font-size: clamp(62px, 8.6vw, 84px); line-height: 1.05; }
  .orb-hero__eyebrow { opacity: 0.8; font-weight: var(--weight-regular); }
  .orb-hero__aktionen { gap: 12px; justify-content: flex-start; }
  .orb-hero .orb-btn {
    height: 48px;
    min-height: 48px;
    width: auto;
    padding: 0 24px;
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .orb-hero { min-height: 80dvh; }
  .orb-hero__bild { object-position: 52% 42%; animation-name: orb-kenburns-schmal; }
  .orb-hero__scrim {
    background-image:
      linear-gradient(to bottom, rgba(19, 26, 21, 0.72) 0%, rgba(19, 26, 21, 0.34) 30%, rgba(19, 26, 21, 0.12) 50%),
      linear-gradient(to top, rgba(19, 26, 21, 0.92) 0%, rgba(19, 26, 21, 0.48) 45%, rgba(19, 26, 21, 0.20) 100%);
  }
  .orb-hero__inhalt { padding-bottom: var(--space-7); }
  .orb-hero__titel { font-size: 40px; line-height: 1.05; }
  .orb-hero__aktionen { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .orb-hero .orb-btn {
    display: flex;
    width: 100%;
    /* Volle Breite ja — aber kein 700 px breiter Balken auf Kleintablets. */
    max-width: 440px;
    height: 52px;
    min-height: 52px;
    padding: 0 20px;
    justify-content: center;
    font-size: 16px;
  }
}


/* ============================ 6. Sektionen ================================ */

.orb-sektion {
  background: var(--surface-hell);
  color: var(--text-body);
  padding-top: var(--section-y-desktop);
  padding-bottom: var(--section-y-desktop);
}
.orb-sektion--kompakt {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Die Navigation liegt über dem Hero und scrollt mit — Sprungziele brauchen
   deshalb nur eine Handbreit Luft, keinen Header-Ausgleich. */
.orb-sektion[id] { scroll-margin-top: 16px; }

/* Duo: 7 zu 4, das Bild trägt die linke Spalte. */
.orb-duo {
  display: grid;
  grid-template-columns: var(--duo-links) var(--duo-rechts);
  gap: var(--space-8);
  align-items: start;
}
.orb-duo__bild { align-self: stretch; }

/* Ruhezone: reiner Text, höchstens 60 % Breite. */
.orb-ruhezone { max-width: var(--measure-ruhezone); }

/* Stimmen sind ein zweiteiliger Block: Kopf und Zitate rücken zusammen. */
#stimmen-kopf { padding-bottom: var(--space-4); }
#stimmen { padding-top: var(--space-3); }

@media (max-width: 991px) {
  /* Auf Tablet und Phone trägt jede Sektion denselben Rhythmus. */
  .orb-sektion,
  .orb-sektion--kompakt { padding-top: 88px; padding-bottom: 88px; }
  #stimmen-kopf { padding-bottom: 20px; }
  #stimmen { padding-top: 0; }

  /* Das Duo stapelt schon auf dem Tablet. Bei 7:4 bliebe der Textspalte sonst
     ab hier nur noch rund 260 px — zu schmal für Fließtext und Icon-Liste. */
  .orb-duo { grid-template-columns: 1fr; gap: 40px; }
  .orb-duo__bild { align-self: auto; }
}
@media (max-width: 767px) {
  /* Auf dem Telefon rücken Bild und Textblock enger zusammen. */
  .orb-duo { gap: 24px; }
}
@media (max-width: 767px) {
  .orb-sektion,
  .orb-sektion--kompakt { padding-top: 36px; padding-bottom: 36px; }
  #stimmen-kopf { padding-bottom: 16px; }
  #stimmen { padding-top: 0; }

  /* Zwei Fugen brauchen mehr Luft als der Grundrhythmus von 36 + 36 px:
     vor den Gästestimmen und vor dem Preis-/Anfrageblock beginnt jeweils
     ein neuer Gedanke. */
  #stimmen-kopf { padding-top: 60px; }
  #anfrage { padding-top: 56px; }
}


/* ============================ 7. Überschriften und Text =================== */

.orb-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-bottom: var(--stack-eyebrow-headline);
}
.orb-kopf__titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--h2);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-headline);
  color: var(--text-headline);
}
.orb-kopf__titel--s { font-size: var(--h3); }

/* „Oberrainbauernhof" ist ein einziges Wort: In der schmalen 4fr-Spalte des
   Duos wird es bei voller --h2-Größe breiter als seine Spalte und läuft über
   die Kante. Die Headline richtet sich dort deshalb nach der Spaltenbreite
   und bleibt nur so groß, wie das längste Wort hineinpasst. In allen breiten
   Spalten greift weiterhin --h2, weil min() dann den Token wählt. */
.orb-kopf { container-type: inline-size; }
.orb-duo .orb-kopf__titel { font-size: min(var(--h2), 46px); }
@supports (container-type: inline-size) {
  .orb-duo .orb-kopf__titel { font-size: min(var(--h2), 15cqi); }
}
.orb-kopf__text {
  margin-top: var(--stack-headline-body);
  max-width: var(--measure);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--text-body);
}
.orb-kopf__cta { margin-top: var(--stack-body-cta); }
.orb-kopf--abstand { margin-bottom: var(--space-7); }
.orb-kopf--abstand-klein { margin-bottom: var(--space-6); }

.orb-unterkopf {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--h3);
  letter-spacing: var(--tracking-headline);
  color: var(--text-headline);
}
.orb-unterkopf--eng { margin-bottom: 0; }

.orb-fliess {
  margin-top: var(--space-3);
  max-width: var(--measure);
}
.orb-fliess--erste { margin-top: var(--stack-headline-body); }
.orb-fliess--sekundaer { color: var(--schiefer); }
.orb-fliess--betont { font-weight: var(--weight-semibold); color: var(--granit); }

/* Gastgeberzitat: Serif, groß, eng gesetzt. */
.orb-zitat-gross {
  margin-top: var(--stack-headline-body);
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.45;
  color: var(--granit);
}
/* Die Unterschrift ist der Beleg für das Versprechen — handschriftlich. */
.orb-signatur {
  margin-top: var(--space-4);
  /* Nie auf das nackte `cursive` zurückfallen: das ist unter Windows
     Comic Sans. Vor dem letzten Ausweg stehen echte Schreibschriften, die
     auf Windows (Segoe Script) und macOS (Bradley Hand) mitgeliefert sind. */
  font-family: Caveat, "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  white-space: nowrap;
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  color: var(--granit);
}

@media (max-width: 991px) {
  .orb-eyebrow { font-weight: var(--weight-regular); }
  .orb-seite h2,
  .orb-seite h3 { text-wrap: balance; }
  .orb-seite h2 { line-height: 1.15; }
  .orb-seite p { line-height: 1.6; }
}
@media (max-width: 767px) {
  /* Caveat mit Zeilenhöhe 1 lässt optisch mehr Luft, als die Kastenmaße
     hergeben — auf dem Telefon fällt das auf. Beide Abstände enger. */
  .orb-signatur { margin-top: 20px; }
  .orb-kopf__cta { margin-top: 16px; }
}


/* ============================ 8. Bilder =================================== */

.orb-bild { margin: 0; }
.orb-bild__rahmen {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2);
  background: var(--waldnebel);
}
.orb-bild__rahmen--4-3 { aspect-ratio: 4 / 3; }
.orb-bild__rahmen > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--bild-grade);
  transform: scale(1.10);
  transition: transform var(--dur-bild-reveal) var(--ease-transform);
}
.orb-bild[data-sichtbar] .orb-bild__rahmen > img { transform: scale(1); }
/* Terrassenbilder im Hochformat: Das Motiv ist der Ausblick, nicht das
   Pflaster im Vordergrund. Der Querformat-Rahmen setzt deshalb höher an. */
.orb-bild__rahmen > img.orb-bild--ausblick { object-position: 50% 30%; }
.orb-bild[data-sichtbar] .orb-bild__rahmen:hover > img {
  transform: scale(1.03);
  transition-duration: var(--dur-hover-bild);
}

@media (max-width: 991px) {
  .orb-bild__rahmen { max-height: 60dvh; }
  .orb-duo__bild .orb-bild__rahmen { aspect-ratio: 4 / 3; height: auto; }
  .orb-duo__bild img { object-position: 50% 42%; }
}
@media (max-width: 767px) {
  .orb-bild__rahmen { max-height: 60svh; }
  .orb-duo__bild .orb-bild__rahmen { aspect-ratio: 4 / 3; }
}


/* ============================ 9. Annehmlichkeiten ========================= */

.orb-annehmlichkeiten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-6);
}
.orb-annehmlichkeit {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: var(--border-hairline);
}
.orb-annehmlichkeit__titel {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--granit);
}
.orb-annehmlichkeit__text {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--schiefer);
}

.orb-icon {
  display: inline-flex;
  flex: none;
  margin-top: 2px;
  color: var(--schiefer);
}
.orb-icon--akzent { color: var(--bollenrot-tief); }


/* ============================ 10. Galerie ================================= */

.orb-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  max-width: 100%;
}

/* Ab Tablet wird die Galerie zur Wischstrecke mit eigener Fortschrittsleiste. */
@media (max-width: 991px) {
  .orb-galerie {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .orb-galerie::-webkit-scrollbar { display: none; }
  .orb-galerie > * { flex: 0 0 52%; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .orb-galerie > * { flex: 0 0 85%; }
  .orb-galerie .orb-bild__rahmen { aspect-ratio: 4 / 5; }
}

.orb-galerie__leiste {
  display: none;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}
.orb-galerie__leiste[data-aktiv] { display: flex; }
.orb-galerie__spur {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: var(--nebellinie);
}
.orb-galerie__balken {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  background: var(--granit);
}
.orb-galerie__zaehler {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--schiefer);
  font-variant-numeric: tabular-nums;
}


/* ============================ 11. Ausflugsziele =========================== */

.orb-ziele {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7) var(--space-6);
}
.orb-ziel {
  padding-top: var(--space-4);
  border-top: 2px solid var(--nebellinie);
  transition: border-top-color var(--dur-hover-farbe) var(--ease-transform);
}
.orb-ziel:hover { border-top-color: var(--bollenrot); }
.orb-ziel__zahl {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-s);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--schiefer);
}
.orb-ziel__titel {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: var(--tracking-headline);
  color: var(--granit);
  text-wrap: pretty;
}
.orb-ziel__text {
  margin-top: 14px;
  font-size: var(--body-s);
  line-height: var(--lh-body);
  color: var(--schiefer);
  text-wrap: pretty;
}

@media (max-width: 991px) {
  .orb-ziele { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); }
}
@media (max-width: 767px) {
  /* Ab hier steht --h2 auf 30px. Der Zieltitel muss mitgehen, sonst sind
     Sektions-Headline und Zieltitel gleich groß und die Hierarchie kippt. */
  .orb-ziel__titel { font-size: 26px; }
}
@media (max-width: 599px) {
  .orb-ziele { grid-template-columns: 1fr; gap: var(--space-5); }
}


/* ============================ 12. Gästestimmen ============================ */

.orb-stimmen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.orb-stimme {
  margin: 0;
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
}
.orb-stimme p {
  margin: 0;
  /* Im einspaltigen Telefonlayout liefe das Zitat sonst über die volle
     Breite — bei 760 px sind das 110 Zeichen pro Zeile. 24em halten es bei
     rund 70. In den mehrspaltigen Layouts ist die Spalte ohnehin schmaler. */
  max-width: 24em;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--granit);
}
.orb-sterne {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-3);
  color: var(--bollenrot-tief);
}
.orb-sterne svg { display: block; }

@media (max-width: 991px) {
  .orb-stimmen { grid-template-columns: 1fr 1fr; }
  .orb-stimme { padding-top: 28px; padding-bottom: 28px; }
}
@media (max-width: 767px) {
  .orb-stimmen { grid-template-columns: 1fr; gap: var(--space-5); }
  .orb-stimme { padding-top: 20px; padding-bottom: 20px; }
}


/* ============================ 13. Häufige Fragen ========================== */

.orb-faq { border-bottom: var(--border-hairline); }
.orb-faq__eintrag { border-top: var(--border-hairline); }
.orb-faq__knopf {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.orb-faq__frage {
  font-family: var(--font-display);
  font-size: var(--h4);
  letter-spacing: -0.01em;
  color: var(--granit);
}
.orb-faq__pfeil {
  display: inline-flex;
  flex: none;
  color: var(--schiefer);
  transition: transform 240ms var(--ease-transform);
}
.orb-faq__knopf[aria-expanded="true"] .orb-faq__pfeil { transform: rotate(180deg); }
.orb-faq__huelle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease-transform);
}
.orb-faq__knopf[aria-expanded="true"] + .orb-faq__huelle { grid-template-rows: 1fr; }
.orb-faq__huelle > div { overflow: hidden; }
.orb-faq__antwort {
  max-width: var(--measure);
  font-size: var(--body);
  line-height: var(--lh-body);
  color: var(--schiefer);
  padding-bottom: var(--space-4);
}

@media (max-width: 991px) {
  .orb-faq__knopf { padding-top: 20px; padding-bottom: 20px; }
}
@media (max-width: 767px) {
  /* Pfeil auf feste Fluchtlinie, Frage darf mehrzeilig laufen. */
  .orb-faq__knopf { align-items: flex-start; gap: 16px; min-height: 44px; }
  .orb-faq__frage { flex: 1 1 auto; min-width: 0; }
  .orb-faq__pfeil { flex: 0 0 18px; margin-top: 4px; margin-left: auto; }
}


/* ============================ 14. Preise und Adresse ====================== */

.orb-kontakt {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-8);
  align-items: start;
}
.orb-kontakt__links {
  display: grid;
  gap: var(--space-5);
}

.orb-preise {
  margin-top: var(--space-4);
  border: var(--border-hairline);
  padding: var(--space-5);
  background: var(--surface-hell);
}
.orb-preise__zeile { padding: var(--space-3) 0; }
/* Die erste Zeile bekommt oben keinen eigenen Abstand: Den bringt der Kasten
   schon mit. Sonst stand oben doppelt so viel Luft wie unten. */
.orb-preise__zeile:first-child { padding-top: 0; }
.orb-preise__zeile--getrennt { border-top: var(--border-hairline); }
.orb-preise__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
}
/* In der schmalen Preisspalte wird der Abstand zwischen Bezeichnung und Preis
   knapp — der Preis selbst darf nicht umbrechen, also weicht der Abstand.
   Gilt ab Tablet, wo die Spalte auf rund 240 px Innenbreite fällt. */
@media (max-width: 991px) {
  .orb-preise__kopf { gap: var(--space-3); }
}
.orb-preise__label { font-size: 17px; color: var(--granit); }
.orb-preise__zusatz { margin-top: 4px; font-size: 13px; color: var(--schiefer); }
.orb-preise__wert {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--granit);
  white-space: nowrap;
}
.orb-preise__wert span {
  margin-left: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--schiefer);
}

.orb-hinweis {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--schiefer);
}
/* Kein eigener Außenabstand: Die Zeile darüber bringt ihren Innenabstand
   schon mit. Sonst stünden hier 48 px, während über der Linie im Block
   darüber nur 24 px stehen. */
.orb-hinweis--fuss {
  margin-top: 0;
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}
.orb-hinweis__icon { flex: 0 0 17px; margin-top: 3px; display: inline-flex; }

.orb-adresse { border: var(--border-hairline); background: var(--surface-hell); }
.orb-adresse__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  color: var(--granit);
  text-decoration: none;
  border: 0;
}
.orb-adresse__link:hover { color: var(--granit); }

.orb-karte {
  margin-top: var(--space-4);
  border: 1px solid var(--nebellinie);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: var(--surface-hell-erhoben);
}
.orb-karte iframe {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  filter: saturate(0.88) contrast(1.02);
}

@media (max-width: 991px) {
  /* Preise und Formular stehen auch auf dem Tablet nebeneinander. Damit die
     Preisspalte dabei nicht zu eng wird, rücken Spaltenabstand und
     Innenabstand des Preiskastens zusammen. */
  .orb-kontakt { gap: var(--space-5); }
  .orb-preise { padding: var(--space-3); }
  .orb-adresse__link { min-height: 44px; }
}
@media (max-width: 767px) {
  .orb-kontakt { grid-template-columns: 1fr; gap: var(--space-6); }
  .orb-preise { padding: var(--space-5); }
  .orb-karte iframe { height: 220px; }
}


/* ============================ 15. Anfrageformular ========================= */

.orb-formularbox {
  background: var(--surface-hell-erhoben);
  border: var(--border-hairline);
  padding: var(--space-6);
}
.orb-formularbox__text {
  margin-top: 10px;
  font-size: var(--body-s);
  color: var(--schiefer);
}

.orb-bestaetigung {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-hairline);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.orb-bestaetigung[hidden] { display: none; }
.orb-bestaetigung__icon { flex: 0 0 20px; margin-top: 3px; display: inline-flex; color: var(--bollenrot-tief); }
.orb-bestaetigung p { font-size: var(--body); color: var(--granit); }

.orb-fehler {
  margin-top: var(--space-5);
  padding: 13px 14px;
  border: 1px solid var(--bollenrot-tief);
  border-radius: var(--radius-1);
  background: var(--surface-hell);
  font-size: var(--body-s);
  line-height: 1.5;
  color: var(--bollenrot-tief);
}

.orb-formular {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  max-width: 100%;
}
.orb-formular[hidden] { display: none; }

.orb-honigtopf {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.orb-feld { display: block; }
.orb-feld__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--schiefer);
}
/* Datumsfelder nebeneinander, solange beide ihre Eigenbreite (rund 200 px)
   bekommen — sonst automatisch untereinander. Gilt für jede Fensterbreite,
   weil die Formularspalte auch auf dem Desktop schmal werden kann. */
.orb-feldpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.orb-eingabe {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--granit);
  background: var(--surface-hell);
  border: var(--border-feld);
  border-radius: var(--radius-1);
  outline: none;
  transition: border-color var(--dur-hover-farbe) var(--ease-transform);
}
.orb-eingabe:focus { border-color: var(--bollenrot-tief); }
.orb-eingabe--flaeche { resize: vertical; }

/* Datumsfelder: eigener Platzhalter, weil leere date-Inputs je Browser
   unterschiedlich (und auf Phone gar nicht) beschriftet sind. */
.orb-datum { position: relative; display: block; }
.orb-datum__platzhalter,
.orb-datum__icon { display: none; }
.orb-datum__platzhalter {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--schiefer);
}
.orb-datum__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: var(--schiefer);
}

@media (max-width: 767px) {
  .orb-datum input[type="date"] { padding-right: 46px; }
  .orb-datum input[type="date"][data-leer="1"] { color: transparent; }
  .orb-datum input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
  .orb-datum__icon { display: flex; }
  .orb-datum input[type="date"][data-leer="1"] + .orb-datum__platzhalter { display: flex; }
}

.orb-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--schiefer);
  cursor: pointer;
}
.orb-zustimmung input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  max-width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--bollenrot);
  cursor: pointer;
}
.orb-zustimmung a { color: var(--bollenrot-tief); }

.orb-absenden {
  margin-top: var(--space-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 18px 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  line-height: 1;
  color: #FFFFFF;
  background: var(--bollenrot);
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  cursor: pointer;
}
.orb-absenden:hover { background: var(--bollenrot-tief); }

/* Absendezeile: Turnstile-Platz, Hinweiszeile und Button. Der Button steht
   damit nicht mehr direkt im Formularraster, seine Breite wird hier gesetzt:
   Desktop volle Breite, Tablet nach Inhalt, Telefon volle Breite. */
.orb-absenden-zeile .orb-absenden { width: 100%; }

/* Das Widget ist unsichtbar, solange Cloudflare keine Bestätigung braucht —
   dann nimmt der Platz keine Höhe ein. Erscheint es, rückt der Button ab. */
.orb-turnstile { max-width: 100%; }
.orb-turnstile[data-sichtbar] { margin-bottom: var(--space-3); }

.orb-formularhinweis {
  margin: var(--space-1) 0 var(--space-2);
  padding: 13px 14px;
  border: var(--border-hairline);
  border-radius: var(--radius-1);
  background: var(--surface-hell);
  font-size: var(--body-s);
  line-height: 1.5;
  color: var(--granit);
}
.orb-formularhinweis[hidden] { display: none; }

.orb-direktkontakt {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
/* Telefonnummer und E-Mail-Adresse stehen bewusst als Text, nicht als tel:-
   bzw. mailto:-Link — so lassen sie sich nicht automatisiert abgreifen und
   nicht versehentlich anwählen. Der Hover-Effekt bleibt erhalten, damit die
   Zeilen sich weiter wie im Entwurf anfühlen. Markieren und Kopieren geht. */
.orb-direktkontakt__eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--granit);
  cursor: default;
  transition: transform 240ms var(--ease-transform);
}
.orb-direktkontakt__eintrag:hover { transform: translateY(-2px); }
/* Nummer und Adresse brechen nie in sich um — die Adresse wird abgetippt
   oder kopiert, "…@t-" und "online.de" auf zwei Zeilen führt in die falsche
   Richtung. Ein geschützter Bindestrich (U+2011) wäre beim Kopieren falsch. */
.orb-direktkontakt__wert { white-space: nowrap; }
@media (max-width: 991px) {
  /* Stehen beide Angaben untereinander, rücken sie enger zusammen. */
  .orb-direktkontakt { row-gap: 12px; }
}
@media (max-width: 359px) {
  .orb-direktkontakt__eintrag { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-direktkontakt__eintrag:hover { transform: none; }
}

@media (max-width: 991px) {
  .orb-formularbox { padding: 28px; }
  .orb-absenden-zeile .orb-absenden,
  .orb-absenden {
    width: auto;
    height: 48px;
    min-height: 48px;
    padding: 0 24px;
  }
}
@media (max-width: 767px) {
  .orb-formularbox { padding: 20px; }
  .orb-absenden-zeile .orb-absenden,
  .orb-absenden {
    width: 100%;
    max-width: 440px;
    height: 52px;
    min-height: 52px;
    padding: 0 20px;
  }
}


/* ============================ 15b. Rechtstexte ============================ */
/* Impressum und Datenschutz — Fließtextseiten ohne Bild, gleiche Tokens. */

.orb-rechtsseite .orb-nav {
  position: static;
  background: var(--surface-dunkel);
}
.orb-rechtstext { max-width: var(--measure); }
.orb-rechtstext h2 {
  margin: var(--space-7) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--h3);
  letter-spacing: var(--tracking-headline);
  color: var(--text-headline);
}
.orb-rechtstext h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  color: var(--granit);
}
.orb-rechtstext p { margin-top: var(--space-2); }
.orb-rechtstext ul {
  margin: var(--space-2) 0 0;
  padding-left: 1.15em;
  color: var(--schiefer);
}
.orb-rechtstext li { margin-top: 6px; }
.orb-rechtstext dl {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--space-4);
}
.orb-rechtstext dt { color: var(--schiefer); }
.orb-rechtstext dd { margin: 0; color: var(--granit); }
@media (max-width: 479px) {
  .orb-rechtstext dl { grid-template-columns: 1fr; gap: 2px; }
  .orb-rechtstext dd { margin-bottom: 10px; }
}

/* Unübersehbarer Entwurfshinweis. Verschwindet, sobald die Seite fertig ist —
   dann diesen Block und das Banner im HTML entfernen. */
.orb-entwurf {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  border: 2px solid var(--bollenrot);
  background: var(--surface-hell-erhoben);
}
.orb-entwurf__titel {
  font-family: var(--font-sans);
  font-size: var(--eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bollenrot-tief);
}
.orb-entwurf p {
  margin-top: 10px;
  font-size: var(--body-s);
  line-height: 1.55;
  color: var(--granit);
}
/* Auszufüllende Stelle — im Text sofort erkennbar. */
.orb-luecke {
  padding: 1px 6px;
  background: rgba(192, 54, 44, 0.12);
  border-bottom: 1px solid var(--bollenrot);
  color: var(--bollenrot-tief);
  font-size: 0.95em;
}


/* ============================ 16. Fußbereich ============================== */

.orb-footer {
  background: var(--tannennacht);
  color: var(--morgennebel);
  border-top: 1px solid var(--linie-dunkel);
}
.orb-footer__inner {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
  display: grid;
  grid-template-columns: 1fr auto auto;
  justify-items: start;
  gap: var(--space-6);
}
.orb-footer__marke { margin-right: auto; }
.orb-footer__recht { margin-right: var(--space-8); }
.orb-footer__name {
  font-family: var(--font-display);
  font-size: 27px;
  letter-spacing: var(--tracking-display);
}
.orb-footer__copyright {
  margin-top: var(--space-3);
  font-size: 14px;
  color: var(--text-invers-sekundaer);
}
.orb-footer__titel {
  margin-bottom: var(--space-3);
  font-size: var(--eyebrow-s);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-invers-sekundaer);
}
.orb-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orb-footer__links a,
.orb-footer__folgt {
  font-size: 15px;
  color: var(--morgennebel);
  opacity: 0.78;
  text-decoration: none;
  border: 0;
}
.orb-footer__links a:hover { color: var(--morgennebel); opacity: 1; }
/* Impressum und Datenschutz existieren noch nicht — sichtbar, aber nicht klickbar. */
.orb-footer__folgt { cursor: default; }

@media (max-width: 991px) {
  .orb-footer__inner { gap: var(--space-6); }
  .orb-footer__links a,
  .orb-footer__folgt { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 767px) {
  .orb-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .orb-footer__marke {
    order: 3;
    grid-column: 1 / -1;
    /* Das Raster richtet Einträge links nach Inhaltsbreite aus — ohne
       stretch endete die Trennlinie nach dem Copyright-Satz. */
    justify-self: stretch;
    padding-top: var(--space-3);
    border-top: 1px solid var(--linie-dunkel);
  }
}


/* ============================ 17. Mobiles Menü ============================ */

.orb-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  padding: 16px 20px 32px;
  background: var(--tannennacht);
  color: var(--morgennebel);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 320ms var(--ease-transform),
    transform 320ms var(--ease-transform),
    visibility 320ms;
}
@media (max-width: 991px) { .orb-menu { display: flex; } }
.orb-menu[data-offen] { opacity: 1; visibility: visible; transform: translateY(0); }

.orb-menu__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}
.orb-menu__marke {
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: var(--tracking-display);
}
.orb-menu__schliessen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--morgennebel);
}
.orb-menu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-7);
}
.orb-menu__links a {
  display: flex;
  align-items: center;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: var(--tracking-display);
  color: var(--morgennebel);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid var(--linie-dunkel);
}
.orb-menu__links a:hover { color: var(--morgennebel); }
.orb-menu__links a.orb-menu__cta {
  justify-content: center;
  min-height: 52px;
  margin-top: var(--space-6);
  background: var(--bollenrot);
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  border-radius: var(--radius-1);
  border-bottom: 0;
}
.orb-menu__links a.orb-menu__cta:hover { background: var(--bollenrot-tief); color: #FFFFFF; }


/* ============================ 18. Reveal und Parallax ===================== */

/* Nur mit JavaScript verstecken — ohne JS steht der Inhalt sofort da. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
.js [data-reveal][data-aufgedeckt] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .orb-seite a:hover,
  .orb-seite button:hover { transform: none; }
  .orb-hero__bild { animation: none !important; }
  .orb-seite [data-parallax] { transform: none !important; }
  .orb-bild__rahmen > img { transform: none !important; }
}