/* ==========================================================================
   Villa Restaurant Sömmerda - Pension, Abendstrecke und Seitenfeinschliff
   14.09.2026, Sitzung 160e0796. Neue Datei, von Dirk einzeln freigegeben
   im Feld der Sperre villa-design-cbbfbc04. Nur pension.html bindet sie ein.
   15.09.2026: Grossansicht, Einblendung je Foto, Kopf ohne Absatz, Einleitung
   am Handy, Preise wie Speisekarte, schwebende FAQ, Knoepfe und Filter.

   Sieben Abendfotos auf Anthrazit. Das Zeichen der Strecke ist der feine
   goldene Innenrahmen, wie ein Passepartout, und ein warmer Lichtschein
   hinter dem Laubengang. Alles andere bleibt ruhig.
   Schweben heisst auf dieser Seite immer derselbe Doppelschatten: ein
   enger fuer die Kante, ein weicher, weit versetzter fuer die Hoehe.
   Breakpoints nur 768 und 1040.
   ========================================================================== */

.pa-abend {
  isolation: isolate;
}

/* Lampenlicht: ein warmer Schein oben hinter dem ersten Foto. */
.pa-abend::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 36% at 50% 36%, rgba(212, 176, 112, 0.12), transparent 72%);
}

.pa-abend h2 {
  color: var(--vr-creme);
}

.pa-abend .pa-kopf {
  margin-bottom: var(--vr-space-xl);
}

/* Handschrift wie Eriks Zitate. rotate statt transform, weil die
   Einblendung transform setzt und die Schraege sonst verloren ginge. */
.pa-notiz {
  font-family: var(--vr-font-hand);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--vr-gold-hell);
  margin: var(--vr-space-md) 0 0;
  rotate: -1.5deg;
}

/* === Raster ============================================================== */

.pa-strecke {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--vr-space-lg) var(--vr-space-sm);
}

.pa-bild {
  grid-column: 1 / -1;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pa-bild--hoch {
  grid-column: auto;
}

/* Der Rahmen ist ein Knopf, er oeffnet die Grossansicht. */
.pa-rahmen {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--vr-radius-md);
  overflow: hidden;
  background: var(--vr-anthrazit-soft);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.pa-rahmen:focus-visible {
  outline: 3px solid var(--vr-gold-hell);
  outline-offset: 4px;
}

.pa-bild--hoch .pa-rahmen {
  aspect-ratio: 3 / 4;
}

.pa-rahmen picture,
.pa-rahmen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der goldene Innenrahmen. */
.pa-rahmen::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  border: 1px solid rgba(212, 176, 112, 0.5);
  border-radius: var(--vr-radius-xs);
  pointer-events: none;
}

/* Die Lupe sagt, dass man das Foto gross ansehen kann. Am Desktop erst
   beim Zeigen, am Handy immer, dort gibt es kein Zeigen. */
.pa-lupe {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(212, 176, 112, 0.55);
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.62);
  color: var(--vr-creme);
  opacity: 0;
  scale: 0.9;
  pointer-events: none;
  transition: opacity 0.3s ease, scale 0.3s ease;
}

.pa-lupe svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.pa-rahmen:hover .pa-lupe,
.pa-rahmen:focus-visible .pa-lupe {
  opacity: 1;
  scale: 1;
}

@media (hover: none) {
  .pa-lupe {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    opacity: 0.92;
    scale: 1;
  }
}

.pa-bild--ankommen .pa-rahmen {
  box-shadow:
    0 0 0 1px rgba(212, 176, 112, 0.14),
    0 40px 90px -30px rgba(212, 176, 112, 0.3),
    0 24px 60px rgba(0, 0, 0, 0.55);
}

/* === Bildunterschrift ==================================================== */

.pa-bild figcaption {
  margin-top: var(--vr-space-xs);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  line-height: 1.5;
  color: rgba(248, 242, 228, 0.84);
  text-align: start;
  hyphens: auto;
  overflow-wrap: break-word;
}

.pa-titel {
  display: block;
  margin-bottom: var(--vr-space-4xs);
  font-size: var(--vr-text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-gold-hell);
}

/* === Tablet ============================================================== */

@media (min-width: 768px) {
  .pa-strecke {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--vr-space-xl) var(--vr-space-md);
  }

  .pa-bild--wohnraum,
  .pa-bild--tagesbett,
  .pa-bild--hoch {
    grid-column: span 6;
  }

  .pa-bild--ankommen .pa-rahmen {
    aspect-ratio: 16 / 9;
  }
}

/* === Desktop: gross links, Paar rechts; darunter gespiegelt ============== */

@media (min-width: 1040px) {
  .pa-strecke {
    row-gap: var(--vr-space-lg);
  }

  .pa-bild--ankommen   { grid-column: 1 / -1;     grid-row: 1; }
  .pa-bild--schlaf     { grid-column: 1 / span 8; grid-row: 2 / span 2; }
  .pa-bild--wohnraum   { grid-column: 9 / span 4; grid-row: 2; }
  .pa-bild--tagesbett  { grid-column: 9 / span 4; grid-row: 3; }
  .pa-bild--waschtisch { grid-column: 1 / span 3; grid-row: 4; }
  .pa-bild--dusche     { grid-column: 4 / span 3; grid-row: 4; }
  .pa-bild--zumbad     { grid-column: 7 / span 6; grid-row: 4; }

  .pa-bild--wohnraum .pa-rahmen,
  .pa-bild--tagesbett .pa-rahmen {
    aspect-ratio: 16 / 10;
  }

  /* Das grosse Foto und die beiden Hochformate fuellen die Zeilenhoehe,
     die ihre Nachbarn vorgeben. */
  .pa-bild--schlaf .pa-rahmen,
  .pa-bild--hoch .pa-rahmen {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Untere Reihe: die schmalen Hochformate brechen ihre Unterschrift auf
     zwei Zeilen um, "Zum Bad" nicht. Gemessen am 14.09.2026 endeten die
     Rahmen deshalb 24 Pixel versetzt. Gleiche Mindesthoehe fuer alle drei:
     Titel 21 + 2 Pixel plus zwei Textzeilen zu 24 Pixel. */
  .pa-bild--zumbad figcaption,
  .pa-bild--hoch figcaption {
    min-height: 4.5em;
  }
}

/* === Einblendung je Foto =================================================
   Dirk 15.09.2026: jedes Foto erst, wenn es zur Haelfte sichtbar ist, und
   beim Hochscrollen in umgekehrter Reihenfolge. Die Klassen setzt
   pension-abend.js. Verborgen wird NUR unter .pa-bereit, das allein das
   Skript setzt. Laeuft es nicht, bleibt jedes Foto sichtbar.
   Die Staffel kommt als feste Zahl in --pa-verzug. Die Variable wird nicht
   animiert, nur gelesen (Erinnerung safari-animierte-variablen-scroll). */

.pa-strecke.pa-bereit .pa-bild {
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--pa-verzug, 0ms),
    transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms);
}

.pa-strecke.pa-bereit .pa-bild:not(.ist-da) {
  opacity: 0;
  transform: translateY(48px) scale(0.965);
}

.pa-strecke.pa-bereit .pa-rahmen picture {
  transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms);
}

.pa-strecke.pa-bereit .pa-bild:not(.ist-da) .pa-rahmen picture {
  transform: scale(1.12);
}

/* Der Goldrahmen zieht nach dem Foto ein. */
.pa-strecke.pa-bereit .pa-rahmen::after {
  transition:
    opacity 0.8s ease calc(var(--pa-verzug, 0ms) + 520ms),
    inset 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--pa-verzug, 0ms) + 520ms);
}

.pa-strecke.pa-bereit .pa-bild:not(.ist-da) .pa-rahmen::after {
  opacity: 0;
  inset: 24px;
}

.pa-strecke.pa-bereit .pa-bild figcaption {
  transition:
    opacity 0.7s ease calc(var(--pa-verzug, 0ms) + 380ms),
    translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--pa-verzug, 0ms) + 380ms);
}

.pa-strecke.pa-bereit .pa-bild:not(.ist-da) figcaption {
  opacity: 0;
  translate: 0 12px;
}

/* === Bewegung ============================================================ */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pa-rahmen img {
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .pa-rahmen:hover img {
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-notiz {
    rotate: none;
  }

  .pa-strecke.pa-bereit .pa-bild,
  .pa-strecke.pa-bereit .pa-bild:not(.ist-da),
  .pa-strecke.pa-bereit .pa-bild:not(.ist-da) .pa-rahmen picture,
  .pa-strecke.pa-bereit .pa-bild:not(.ist-da) figcaption {
    opacity: 1;
    transform: none;
    translate: none;
    transition: none;
  }

  .pa-strecke.pa-bereit .pa-bild:not(.ist-da) .pa-rahmen::after {
    opacity: 1;
    inset: 10px;
    transition: none;
  }
}

/* === Grossansicht ========================================================
   Haengt direkt an body (pension-abend.js). Ueber allem, auch ueber dem
   Urlaubshinweis (9000) und dem Kalender (99999). */

.pa-gross {
  position: fixed;
  inset: 0;
  z-index: 100200;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 10px;
  padding:
    max(18px, env(safe-area-inset-top, 0px))
    max(18px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(18px, env(safe-area-inset-left, 0px));
  background: rgba(14, 10, 8, 0.95);
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.pa-gross[hidden] {
  display: none;
}

.pa-gross.ist-offen {
  opacity: 1;
}

.pa-gross__buehne {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1448px;
  margin: 0;
}

.pa-gross__bild {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 200px);
  max-height: calc(100svh - 200px);
  object-fit: contain;
  border-radius: var(--vr-radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 1;
  scale: 1;
  transition: opacity 0.26s ease, scale 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pa-gross:not(.ist-offen) .pa-gross__bild,
.pa-gross.wechselt .pa-gross__bild {
  opacity: 0;
  scale: 0.97;
}

.pa-gross__text {
  max-width: 60ch;
  margin: 0;
  text-align: center;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  line-height: 1.5;
  color: rgba(248, 242, 228, 0.86);
}

.pa-gross__titel {
  display: block;
  font-size: var(--vr-text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vr-gold-hell);
}

.pa-gross__zaehler {
  display: grid;
  place-items: center;
  min-height: 52px;
  margin: 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  letter-spacing: 0.12em;
  color: rgba(248, 242, 228, 0.72);
}

.pa-gross__knopf {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(212, 176, 112, 0.55);
  border-radius: 50%;
  background: rgba(26, 20, 16, 0.72);
  color: var(--vr-creme);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pa-gross__knopf:hover {
  background: rgba(110, 26, 36, 0.92);
  border-color: var(--vr-gold-hell);
}

.pa-gross__knopf:focus-visible {
  outline: 3px solid var(--vr-gold-hell);
  outline-offset: 3px;
}

.pa-gross__knopf svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pa-gross__zu {
  top: max(18px, env(safe-area-inset-top, 0px));
  right: max(18px, env(safe-area-inset-right, 0px));
}

.pa-gross__zurueck,
.pa-gross__weiter {
  top: 50%;
  translate: 0 -50%;
}

.pa-gross__zurueck { left: max(18px, env(safe-area-inset-left, 0px)); }
.pa-gross__weiter  { right: max(18px, env(safe-area-inset-right, 0px)); }

@media (min-width: 768px) {
  .pa-gross__buehne {
    max-width: min(1448px, calc(100vw - 190px));
  }
}

/* Am Handy liegen Zurueck und Weiter unten neben dem Zaehler, dort, wo der
   Daumen ist. Das Foto bekommt dafuer die ganze Breite. */
@media (max-width: 767px) {
  .pa-gross__zurueck,
  .pa-gross__weiter {
    top: auto;
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    translate: none;
  }

  .pa-gross__bild {
    max-height: calc(100vh - 250px);
    max-height: calc(100svh - 250px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-gross,
  .pa-gross__bild {
    transition: none;
  }
}

/* === Kopf der Pensionsseite ==============================================
   Dirk 14.09.2026: die Ueberschrift verdeckte das Foto mit vier Zeilen.
   Die Worte "Pension in Sömmerda" bleiben fuer Google in der H1, stehen
   aber als kleine Zeile darueber. Gross bleibt nur der eigentliche Satz.
   Am Handy setzt hero-video.css die H1 mit !important, die kleine Zeile
   traegt deshalb ihre eigene Groesse in rem.
   Dirk 15.09.2026: der Absatz darunter ist weg, die Ueberschrift sitzt
   tiefer, nicht mehr mitten auf dem Haus. Sie bleibt ueber dem hellen
   Auslauf des Kopfbilds, der bei 72 Prozent der Hoehe beginnt. */

/* seiten-hero.css begrenzt auf 20ch. Bei 1024 Pixel ergab das drei Zeilen,
   mit 23ch passen dort zwei. Am Handy gilt weiter die !important-Regel. */
.hero.hero--page .hero__headline {
  text-wrap: balance;
  max-width: 23ch;
}

.hero.hero--page.pa-kopf-unten {
  align-items: flex-end;
}

.hero.hero--page.pa-kopf-unten .hero__inner--center {
  margin-bottom: clamp(56px, 15vh, 150px);
}

.hero__headline .pa-ort {
  display: block;
  margin-bottom: var(--vr-space-sm);
  font-family: var(--vr-font-body);
  font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* === Einleitung am Handy =================================================
   Dirk 15.09.2026: das Zitat mit langem Leerraum und die vier Pillen einzeln
   untereinander sahen nicht gut aus. Das Zitat wird eine ruhige Zeile
   zwischen zwei Goldlinien, die Kennzahlen ein Raster aus vier schwebenden
   Kacheln. Am Desktop bleibt alles, wie es war. */

@media (max-width: 767px) {
  .pension-intro-grid {
    gap: var(--vr-space-lg);
  }

  .pension-quote {
    max-width: 22rem;
    margin: 0 auto;
    padding: var(--vr-space-md) var(--vr-space-sm);
    border-left: 0;
    border-top: 1px solid rgba(184, 146, 74, 0.55);
    border-bottom: 1px solid rgba(184, 146, 74, 0.55);
    text-align: center;
  }

  .pension-caveat {
    transform-origin: center;
  }

  /* Ohne Rand oben: sonst stehen die untere Zitatlinie und diese Linie
     kurz untereinander, gemessen am 15.09.2026 bei 440 Pixel. */
  .pension-facts {
    margin-top: var(--vr-space-md);
    padding-top: 0;
    border-top: 0;
  }

  .pension-facts__pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .pension-fact {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 16px 8px 14px;
    border: 1px solid rgba(184, 146, 74, 0.3);
    border-radius: var(--vr-radius-md);
    background: linear-gradient(180deg, #FFFDF8 0%, var(--vr-papier) 100%);
    box-shadow: 0 1px 2px rgba(26, 20, 16, 0.06), 0 12px 24px -12px rgba(26, 20, 16, 0.28);
    text-align: center;
  }

  .pension-fact__num {
    font-size: 2rem;
  }

  .pension-fact__label {
    font-size: var(--vr-text-sm);
    line-height: 1.3;
  }

  .pension-facts__amenities {
    margin-inline: auto;
    text-align: center;
  }
}

/* === Preise wie auf der Speisekarte ======================================
   Dirk 15.09.2026: am Handy wirkte alles verschoben, die Speisekarte gefiel
   ihm besser. Das Markup ist jetzt das der Speisekarte (menu-item), damit
   gelten ihre Regeln aus components.css und speisekarte.css und ihre
   Einblendung menu-slide aus reveal.css. Hier steht nur, was die Pension
   anders braucht. */

.pa-preise {
  margin-bottom: 0;
}

.pa-preise .menu-item__desc {
  margin: 4px 0 0;
}

.pa-preise .menu-item__price.pa-anfrage {
  font-family: var(--vr-font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--vr-text-muted);
}

/* === FAQ schwebend ======================================================= */

.pension-faq {
  gap: var(--vr-space-md);
}

/* Drei Klassen, damit die Regel gegen die Einblendung faq-item aus
   pension.css gewinnt. Deren Uebergaenge fuer opacity und transform stehen
   deshalb hier mit drin. Gehoben wird ueber translate, nicht ueber
   transform, sonst hebt die Einblendung das Heben wieder auf. */
.pension-faq .pension-faq__item[data-reveal-effect] {
  border: 1px solid rgba(184, 146, 74, 0.28);
  background: linear-gradient(180deg, #FFFDF8 0%, var(--vr-papier) 100%);
  box-shadow: 0 1px 2px rgba(26, 20, 16, 0.06), 0 14px 32px -14px rgba(26, 20, 16, 0.3);
  transition:
    opacity 0.6s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.pension-faq .pension-faq__item[data-reveal-effect]:hover,
.pension-faq .pension-faq__item[data-reveal-effect][open] {
  border-color: rgba(184, 146, 74, 0.5);
  box-shadow: 0 2px 4px rgba(26, 20, 16, 0.08), 0 22px 44px -16px rgba(26, 20, 16, 0.36);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pension-faq .pension-faq__item[data-reveal-effect]:hover {
    translate: 0 -2px;
  }
}

/* === Drei gleiche Knoepfe im burgunden Abschnitt =========================
   Dirk 15.09.2026: die Knoepfe waren unterschiedlich gross, die E-Mail hatte
   gar keinen Rand. Jetzt gleiche Groesse, gleiche Form, gleicher Schatten,
   jeder mit Zeichen. Gold bleibt der Zimmerknopf, denn Gold heisst auf der
   Villa Zimmer (Farbordnung vom 04.09.2026). Nebeneinander erst ab 1040,
   darunter passt "Zimmer reservieren" in einem Drittel nicht. */

.pa-knoepfe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 380px;
  margin: var(--vr-space-xl) auto 0;
}

@media (min-width: 1040px) {
  .pa-knoepfe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    max-width: 900px;
  }
}

.pa-knoepfe .pa-knopf {
  width: 100%;
  min-height: 60px;
  gap: 12px;
  padding: 0 22px;
  border-width: 1.5px;
  border-radius: var(--vr-radius-md);
  font-size: var(--vr-text-md);
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 16px 34px -12px rgba(0, 0, 0, 0.55);
  transition:
    translate 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.pa-knoepfe .pa-knopf--hell,
.pa-knoepfe .pa-knopf--hell:visited {
  background: rgba(248, 242, 228, 0.06);
  color: var(--vr-creme);
  border-color: rgba(248, 242, 228, 0.8);
}

.pa-knoepfe .pa-knopf--hell:hover,
.pa-knoepfe .pa-knopf--hell:focus-visible {
  background: var(--vr-creme);
  color: var(--vr-burgund);
  border-color: var(--vr-creme);
}

.pa-knoepfe .pa-knopf:focus-visible {
  outline: 3px solid var(--vr-gold-hell);
  outline-offset: 3px;
}

.pa-knopf svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pa-knoepfe .pa-knopf:hover {
    translate: 0 -2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22), 0 22px 40px -12px rgba(0, 0, 0, 0.6);
  }
}

/* === Bewertungen: schwebende Filterknoepfe ===============================
   Dirk 15.09.2026: Anordnung bleibt, die Knoepfe schweben. bewertung.css
   gehoert der Design-Sperre, deshalb nur hier und nur fuer /pension. */

#stimmen .dgr-fchip {
  box-shadow: 0 1px 2px rgba(26, 20, 16, 0.08), 0 8px 18px -8px rgba(26, 20, 16, 0.32);
  transition:
    translate 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.22s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

#stimmen .dgr-fchip.is-on {
  box-shadow: 0 2px 4px rgba(128, 96, 34, 0.28), 0 10px 22px -8px rgba(128, 96, 34, 0.6);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #stimmen .dgr-fchip:hover {
    translate: 0 -2px;
    box-shadow: 0 2px 4px rgba(26, 20, 16, 0.1), 0 14px 26px -10px rgba(26, 20, 16, 0.38);
  }
}

/* === Kopf am Handy =======================================================
   Dirk 15.09.2026: am Handy war nur ein Eingang zu sehen, und die Schrift lag
   genau darauf. Gemessen: der Kopf war fensterhoch (755 Pixel bei 375), das
   Querfoto 2,16 zu 1 wurde nach der Hoehe auf 1628 Pixel aufgezogen, sichtbar
   waren 22 Prozent seiner Breite.
   Jetzt hoechstens 132vw hoch: sichtbar 34 Prozent, der Ausschnitt liegt auf
   dem Schild "Pension", dem Hauseck und dem Laubengang. Der Kopf fuellt weiter
   rund zwei Drittel des Fensters (Dirks Regel vom 10.09.2026, kein leerer
   Streifen unter dem Foto). Die Schrift steht unten auf dem Pflaster, dafuer
   ist der Grund dort dunkler und der Auslauf in Creme erst ganz am Ende.
   Das Foto laedt am Handy die 1842er Fassung (sizes 285vw in pension.html). */
@media (max-width: 767px) and (orientation: portrait) {
  .hero.hero--page.pa-kopf-unten {
    min-height: min(calc(100vh - 57px), 132vw);
    min-height: min(calc(100svh - 57px), 132vw);
    padding-bottom: 0;
  }

  .hero.hero--page.pa-kopf-unten .hero__media img {
    object-position: 16% 72%;
  }

  .hero.hero--page.pa-kopf-unten .hero__inner--center {
    margin-bottom: clamp(26px, 8vw, 40px);
  }

  .hero.hero--page.pa-kopf-unten .hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(26, 20, 16, 0.30) 0%,
      rgba(26, 20, 16, 0.06) 26%,
      rgba(26, 20, 16, 0.06) 38%,
      rgba(26, 20, 16, 0.46) 56%,
      rgba(26, 20, 16, 0.62) 90%,
      rgba(239, 230, 210, 0.75) 97%,
      rgba(239, 230, 210, 1) 100%
    );
  }
}


/* === Auftritt je Element =================================================
   15.09.2026, Sitzung 160e0796. Die Klassen setzt pension-abend.js. Verborgen
   wird NUR unter html.pa-auftritt-an, das allein das Skript setzt. Laeuft es
   nicht, bleibt alles sichtbar.
   Bewegt wird ueber translate, scale und rotate, nie ueber transform: die
   Karten heben sich beim Zeigen ueber transform (components.css), und das
   darf die Einblendung nicht aufheben.
   Die Preise ziehen wie auf der Speisekarte abwechselnd von links und rechts
   ein, dieselben Wege und dieselbe Kurve wie menu-slide in reveal.css. */

.pa-auftritt-an [data-pa-art] {
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--pa-verzug, 0ms),
    translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms),
    scale 0.9s cubic-bezier(0.22, 1.12, 0.36, 1) var(--pa-verzug, 0ms),
    rotate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms);
}

.pa-auftritt-an [data-pa-art]:not(.pa-da) {
  opacity: 0;
}

.pa-auftritt-an [data-pa-art="kopf"]:not(.pa-da) {
  translate: 0 26px;
}

/* Wie menu-slide: 3,5 mal 24 Pixel am Desktop, 24 am Handy. */
.pa-auftritt-an [data-pa-art="zeile"] {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--pa-verzug, 0ms),
    translate 1.1s cubic-bezier(0.22, 1.08, 0.36, 1) var(--pa-verzug, 0ms);
}

.pa-auftritt-an [data-pa-art="zeile"]:nth-child(odd):not(.pa-da) {
  translate: -84px 0;
}

.pa-auftritt-an [data-pa-art="zeile"]:nth-child(even):not(.pa-da) {
  translate: 84px 0;
}

@media (max-width: 767px) {
  .pa-auftritt-an [data-pa-art="zeile"]:nth-child(odd):not(.pa-da) {
    translate: -24px 0;
  }

  .pa-auftritt-an [data-pa-art="zeile"]:nth-child(even):not(.pa-da) {
    translate: 24px 0;
  }
}

/* Karten richten sich aus der Tiefe auf. Die Perspektive liegt am Raster,
   damit alle Karten einer Reihe aus demselben Blickpunkt kommen. */
.pa-auftritt-an .apartment-grid,
.pa-auftritt-an .pension-facts__pills,
.pa-auftritt-an .pa-preise + .preis-fruehstueck,
.pa-auftritt-an .pension-preise .container {
  perspective: 1200px;
}

.pa-auftritt-an [data-pa-art="karte"] {
  transform-origin: 50% 100%;
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--pa-verzug, 0ms),
    translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms),
    scale 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms),
    rotate 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms),
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.pa-auftritt-an [data-pa-art="karte"]:not(.pa-da) {
  translate: 0 56px;
  scale: 0.96;
  rotate: x 9deg;
}

/* In der Zimmerkarte folgt die Schrift der Karte: erst die Karte, dann
   Abzeichen, Titel und Text nacheinander. So ist sie nicht vor der Karte da. */
.pa-auftritt-an .apartment-card[data-pa-art] .card__body > * {
  transition:
    opacity 0.6s ease calc(var(--pa-verzug, 0ms) + 300ms),
    translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--pa-verzug, 0ms) + 300ms);
}

.pa-auftritt-an .apartment-card[data-pa-art] .card__body > :nth-child(2) {
  transition-delay: calc(var(--pa-verzug, 0ms) + 400ms);
}

.pa-auftritt-an .apartment-card[data-pa-art] .card__body > :nth-child(3) {
  transition-delay: calc(var(--pa-verzug, 0ms) + 500ms);
}

.pa-auftritt-an .apartment-card[data-pa-art]:not(.pa-da) .card__body > * {
  opacity: 0;
  translate: 0 14px;
}

/* Ausstattung: jede Zeile zieht von links ein, der Punkt davor springt auf. */
.pa-auftritt-an [data-pa-art="liste"]:not(.pa-da) {
  translate: -32px 0;
}

.pa-auftritt-an .amenities-list > li[data-pa-art]::before {
  transition: scale 0.5s cubic-bezier(0.22, 1.4, 0.36, 1) calc(var(--pa-verzug, 0ms) + 220ms);
}

.pa-auftritt-an .amenities-list > li[data-pa-art]:not(.pa-da)::before {
  scale: 0;
}

.pa-auftritt-an [data-pa-art="pop"]:not(.pa-da) {
  translate: 0 18px;
  scale: 0.9;
}

/* Die drei Knoepfe im Burgund behalten ihre eigenen Uebergaenge fuer das
   Zeigen, sonst schnappen Farbe und Schatten um. */
.pa-auftritt-an .pa-knoepfe .pa-knopf[data-pa-art] {
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--pa-verzug, 0ms),
    translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--pa-verzug, 0ms),
    scale 0.9s cubic-bezier(0.22, 1.12, 0.36, 1) var(--pa-verzug, 0ms),
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

/* === FAQ mit Tiefe =======================================================
   Dirk 15.09.2026: die Fragen sollen mit mehr 3D-Wirkung Wertigkeit haben.
   Drei Mittel, alle ruhig: ein Licht an der Oberkante (heller Innenstrich),
   eine dunklere Unterkante innen wie bei einer dicken Karte, und ein
   Schatten in drei Stufen. Das Plus sitzt auf einer kleinen erhabenen Scheibe.
   Offen und beim Zeigen sinkt der Schatten tiefer, die Karte hebt sich. */

.pension-faq .pension-faq__item[data-reveal-effect] {
  border-color: rgba(184, 146, 74, 0.34);
  background: linear-gradient(180deg, #FFFEFA 0%, #FBF6EC 58%, #F4EBDA 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(184, 146, 74, 0.14),
    0 1px 1px rgba(26, 20, 16, 0.06),
    0 6px 12px -6px rgba(26, 20, 16, 0.18),
    0 24px 44px -20px rgba(26, 20, 16, 0.42);
}

.pension-faq .pension-faq__item[data-reveal-effect]:hover,
.pension-faq .pension-faq__item[data-reveal-effect][open] {
  border-color: rgba(184, 146, 74, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 0 rgba(184, 146, 74, 0.24),
    0 2px 3px rgba(26, 20, 16, 0.08),
    0 10px 18px -8px rgba(26, 20, 16, 0.22),
    0 34px 56px -22px rgba(26, 20, 16, 0.48);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pension-faq .pension-faq__item[data-reveal-effect]:hover {
    translate: 0 -3px;
  }
}

.pension-faq .pension-faq__q::after {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #FFFDF7 0%, #EEE1C6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 1px rgba(26, 20, 16, 0.1),
    0 3px 7px -2px rgba(26, 20, 16, 0.3);
  color: var(--vr-gold-tief);
  font-size: 1.25rem;
  line-height: 32px;
  text-align: center;
}

.pension-faq .pension-faq__item[open] .pension-faq__q::after {
  background: linear-gradient(180deg, #F3E6CC 0%, #E4D2AE 100%);
  box-shadow:
    inset 0 2px 3px rgba(26, 20, 16, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .pa-auftritt-an [data-pa-art],
  .pa-auftritt-an [data-pa-art]:not(.pa-da),
  .pa-auftritt-an .apartment-card[data-pa-art]:not(.pa-da) .card__body > * {
    opacity: 1;
    translate: none;
    scale: none;
    rotate: none;
    transition: none;
  }
}


/* ==========================================================================
   PA-R5-160E0796, 15.09.2026 abends, Sitzung 160e0796, Runde 5 Punkte 9 bis 12

   9.  Goldrahmen. Dirk: auf den Hochformaten laeuft er fast aus dem Bild und
       sitzt nicht so gleichmaessig wie auf den Querformaten. Vorher stand er
       ueberall 10 Pixel vom Rand, egal wie gross das Foto ist: auf einem 806
       Pixel breiten Querformat wirkt das wie ein Strich am Rand, auf einem
       schmalen Hochformat fast genauso. Jetzt steht er im Verhaeltnis zur
       kuerzeren Seite des Fotos, 3,6 Prozent, mindestens 8 und hoechstens 28
       Pixel, auf allen vier Seiten gleich. Dafuer ist der Rahmen ein
       Groessen-Container (cqmin). Die Einblendung faehrt aus 8 Prozent herein.
   10. Die Lupe ist weg. Dirk: jeder weiss, dass man tippt, und so wirkt es
       feiner. Das Foto bleibt ein Knopf mit Beschriftung fuer Vorleseprogramme.
   11. Knopf "Anfragen" in Gold, oben im Kopf und im Abschnitt. Dirk: nur ein
       Knopf mit Rahmen, er hebt sich nicht vom Hintergrund ab. Jetzt mit Licht
       oben, dunklerer Unterkante und Schatten, wie die Fragen auf dieser Seite.
   12. Fotos, die noch laden, blenden weich ein. Klassen setzt pension-abend.js.
   Rueckbau: diesen Block und den Block FOTOS WEICH in pension-abend.js
   entfernen.
   ========================================================================== */

/* ------------------------------------------------------------ 9. Goldrahmen */

.pa-rahmen {
  container-type: size;
}

.pa-rahmen::after {
  inset: 10px;
  inset: clamp(8px, 3.6cqmin, 28px);
  border-radius: 3px;
}

.pa-strecke.pa-bereit .pa-bild:not(.ist-da) .pa-rahmen::after {
  inset: 24px;
  inset: clamp(18px, 8cqmin, 56px);
}

@media (prefers-reduced-motion: reduce) {
  .pa-strecke.pa-bereit .pa-bild:not(.ist-da) .pa-rahmen::after {
    inset: 10px;
    inset: clamp(8px, 3.6cqmin, 28px);
  }
}

/* ---------------------------------------------------------------- 10. Lupe */

.pa-lupe {
  display: none;
}

/* ------------------------------------------------------ 11. Knopf in Gold */

/* main .btn.btn--gold (0,2,1): components.css setzt .btn[data-vr-open="room"]
   (0,2,0) mit der Kurzform background und loeschte damit den Verlauf auf
   allen drei Knoepfen im Inhalt, gemessen im ersten Probelauf. */
.vr-kopf .vr-kopf__cta.btn--gold,
.vr-kopf .vr-kopf__cta.btn--gold:visited,
main .btn.btn--gold,
main .btn.btn--gold:visited {
  background: linear-gradient(180deg, #D8B878 0%, #C09C55 52%, #A9853F 100%);
  border-color: #8E6E2E;
  color: var(--vr-anthrazit);
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.72),
    inset 0 -2px 0 rgba(94, 68, 22, 0.3),
    0 1px 2px rgba(26, 20, 16, 0.2),
    0 10px 22px -10px rgba(26, 20, 16, 0.6);
  transition:
    translate 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.vr-kopf .vr-kopf__cta.btn--gold:hover,
.vr-kopf .vr-kopf__cta.btn--gold:focus-visible,
main .btn.btn--gold:hover,
main .btn.btn--gold:focus-visible {
  background: linear-gradient(180deg, #DDBF82 0%, #C6A25B 52%, #AE8A43 100%);
  border-color: #7A5E26;
  color: var(--vr-anthrazit);
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 246, 222, 0.8),
    inset 0 -2px 0 rgba(94, 68, 22, 0.34),
    0 2px 4px rgba(26, 20, 16, 0.22),
    0 16px 30px -12px rgba(26, 20, 16, 0.66);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .vr-kopf .vr-kopf__cta.btn--gold:hover,
  main .btn.btn--gold:hover {
    translate: 0 -2px;
  }
}

/* ------------------------------------------------------ 12. Fotos weich */

/* ⚠️ Spezifitaet: components.css setzt .card__media img { transition:
   transform ... } (0,1,1). Eine Regel nur mit .pa-weich (0,1,0) verlor das
   transition, das Foto sprang trotzdem auf, gemessen im ersten Probelauf.
   Deshalb main img.pa-weich, und der Zoom beim Zeigen bleibt mit drin. */
main img.pa-weich {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform var(--vr-trans-slower);
}

main img.pa-weich.pa-weich-da {
  opacity: 1;
}


/* ==========================================================================
   PA-KARTEN-R5-160E0796, 15.09.2026 spaet, Sitzung 160e0796, Runde 5 Punkt 20
   Dirk mit Bildschirmfoto vom Desktop, "Apartments und Zimmer": ein Foto sieht
   abgeschnitten aus. Gemessen bei 1440: der Bildrahmen ist 566x425, das Hof-
   Foto darin nur 566x262, darunter leere Cremeflaeche. Grund: das picture um
   das img hat keine Hoehe, height 100% am img greift ins Leere. Das Hof-Foto
   ist 2,16 zu 1, das Giebelfoto daneben 1,47 zu 1, deshalb fiel es nur links
   auf. Jetzt fuellen alle vier Fotos einen Rahmen im Verhaeltnis 3 zu 2,
   querformatige Aussenfotos verlieren so am wenigsten. Das Hof-Foto sitzt
   etwas links, damit der Schriftzug Pension im Bild bleibt.
   Rueckbau: diesen Block entfernen.
   ========================================================================== */

main .apartment-card .card__media {
  aspect-ratio: 3 / 2;
}

main .apartment-card .card__media > picture {
  display: block;
  width: 100%;
  height: 100%;
}

main .apartment-card .card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main .apartment-card .card__media img[src*="pension-aussenansicht-hof"] {
  object-position: 30% 50%;
}