/* ═══════════════════════════════════════════════════════════════════
   HOME – Unsere Stadtvilla · v0.3.0
   Verfeinerte Typografie & Rhythmus für ein historisches Gästehaus.
═══════════════════════════════════════════════════════════════════ */

/* ══ 1 · HERO ══════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #A83024 0%, #93291F 55%, #7E241D 100%);
}
.home-hero--img .home-hero__bg {
  position: absolute; inset: -12px;
  background-size: cover; background-position: center 32%;
  filter: blur(4px) saturate(.85);
  transform: scale(1.045);
  animation: hero-zoom 14s var(--ease) forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }


/* Die Überlagerung wurde halbiert, damit die Villa sichtbar ist. Damit die
   weiße Schrift auf der hellen Fassade lesbar bleibt, liegt hinter dem
   Textblock ein sehr weicher Scrim – er wirkt nur in der Mitte und lässt
   die Bildränder frei. */
.home-hero--img::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 56%,
    rgba(92,25,19,.34) 0%,
    rgba(92,25,19,.20) 45%,
    rgba(92,25,19,0) 78%);
}
@media (prefers-reduced-motion: reduce) {
  .home-hero--img .home-hero__bg { animation: none; transform: none; }
}

.home-hero__inner {
  position: relative; z-index: 2;
  /* Der Hero-Block ist jetzt voll breit, damit das Logo Platz hat.
     Die Textzeilen behalten ihre 760px (Regel direkt darunter). */
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(48px, 6vw, 80px) clamp(48px, 5vw, 72px);
}
/* ── Gebogene Überschrift über dem Logo ──────────────────────────────
   Frank: „Man kann nicht schnell genug erkennen, dass es ein Gästehaus
   ist." Die Schrift läuft auf einem Bogen und sitzt dicht über dem Logo,
   die negative Unterkante schiebt sie in die Logo-Oberkante hinein. */
.home-hero__arc {
  display: block;
  width: min(620px, 86%);
  height: auto;
  /* Die viewBox ist unten abgeschnitten (620 × 70, der Pfad endet bei
     y = 100): Ein kurzes Wort wie „Gästehaus" sitzt am Scheitel und füllt
     die Box, ein langes wie „Casa de huéspedes" ragt an den Enden sichtbar
     darunter hinaus – dort steht nur der leere Innenabstand der Logo-Box.
     Der Negativabstand nutzt dieselbe clamp()-Formel wie das obere Padding
     der Box, damit auf jeder Breite rund 30 px zum Logo bleiben. */
  overflow: visible;
  margin: 0 auto calc(-1 * clamp(38px, 6.5vw, 125px) + 25px);
  /* Das Haus im Logo sitzt 3,33 % der Bildbreite rechts der Bildmitte
     (gemessen: Dach 126–306 px von 405 px). Bogen und Sterne rücken um
     denselben Anteil der gerenderten Bildbreite nach rechts, damit sie
     zum Haus und nicht zum Schriftzug zentriert sind. Bildbreite =
     Box-Breite minus seitliches Padding, dieselbe Formel wie .home-hero__logo. */
  left: calc(0.0333 * (min(1240px, 100%) - 2 * clamp(55px, 10vw, 190px)));
  /* Der Bogen ragt in die Logo-Box hinein, die danach im Dokument folgt und
     mit ihrem weißen Schimmer darüber malt. Eigene Ebene, damit die Schrift
     vorne bleibt. */
  position: relative;
  z-index: 2;
}
.home-hero__arc text {
  fill: var(--gold-l);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 10px;   /* knapper, damit auch "Casa per ospiti" auf den Bogen passt */
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(70,18,12,.30);     /* feiner Saum, damit die Schrift auf dem
                                     Foto nicht ausfranst */
  stroke-width: 2px;
}
@media (max-width: 680px) {
  .home-hero__arc { width: 94%; margin-bottom: -14px; }
  .home-hero__arc text { font-size: 42px; letter-spacing: 8px; }
}

/* ── DEHOGA-Sterne unter dem Logo ───────────────────────────────────── */
/* Das Logo-PNG hat unten eigenen Weißraum, deshalb der kräftige
   Negativabstand – sonst stehen die Sterne wie verloren darunter. */
.home-hero__stars {
  display: flex;
  justify-content: center;
  gap: 11px;
  /* Gleiches Prinzip nach unten: an das untere Padding der Logo-Box
     gekoppelt, die Sterne stehen damit rund 18 px unter dem Schriftzug. */
  margin: calc(-1 * clamp(42px, 7vw, 135px) - 26px) 0 26px;
  position: relative;
  z-index: 2;
  left: calc(0.0333 * (min(1240px, 100%) - 2 * clamp(55px, 10vw, 190px)));
}
.home-hero__stars svg {
  width: 23px; height: 23px;
  fill: var(--gold-l);
  filter: drop-shadow(0 1px 2px rgba(70,18,12,.45));
}
@media (max-width: 680px) {
  .home-hero__stars { gap: 9px; margin: -70px 0 22px; }
  .home-hero__stars svg { width: 19px; height: 19px; }
}

.home-hero__logo {
  display: block;
  /* WICHTIG: base.css setzt global  img { max-width: 100% }.  Dadurch war die
     Logo-Box immer auf die Breite des Elterncontainers gedeckelt – jede
     Breitenerhöhung lief ins Leere, während die Polsterung mitwuchs und den
     Schriftzug kleiner machte. Deshalb hier ausdrücklich aufheben. */
  max-width: none;
  /* 100% = verfügbare Breite im Container (Viewport minus Seitenrand).
     Damit kann das Logo nie über den Rand laufen – kein horizontales Scrollen. */
  width: min(1240px, 100%);
  height: auto;
  /* Der Hero-Block ist voll breit, das Logo passt hinein – deshalb reicht
     margin:auto zum Zentrieren. Keine left/transform-Tricks mehr. */
  margin: 0 auto 48px;
  box-sizing: border-box;
  padding: clamp(38px, 6.5vw, 125px) clamp(55px, 10vw, 190px) clamp(42px, 7vw, 135px);
  /* Schimmer läuft garantiert INNERHALB der Box aus: 48% × 0.99 < 50 · 44% × 0.99 < 48 */
  background: radial-gradient(ellipse 48% 44% at 50% 52%,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.72) 48%,
    rgba(255,255,255,.42) 76%,
    transparent 99%);
}

.home-hero__eyebrow,
.home-hero__title,
.home-hero__sub,
.home-hero__actions { max-width: 760px; margin-inline: auto; }

.home-hero__eyebrow {
  text-shadow: 0 1px 16px rgba(62,17,13,.55);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold-l);
  margin-bottom: 26px;
}
.home-hero__eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold); }

.home-hero__title {
  text-shadow: 0 1px 16px rgba(62,17,13,.55);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6.2vw, 5.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.08;
  letter-spacing: .005em;
  margin-bottom: 26px;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.home-hero__title em { font-style: italic; color: var(--gold-l); font-weight: 400; }

.home-hero__sub {
  text-shadow: 0 1px 16px rgba(62,17,13,.55);
  font-size: clamp(15px, 1.55vw, 17.5px);
  font-weight: 300;
  color: rgba(255,255,255,.84);
  max-width: 52ch;
  margin-inline: auto;
  line-height: 1.75;
  margin-bottom: 42px;
  text-wrap: balance;
}
.home-hero__actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.home-hero__link {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,.80); text-transform: uppercase;
  transition: color .2s; display: inline-flex; align-items: center; gap: 7px;
}
.home-hero__link:hover { color: var(--gold-l); }
.home-hero__link::after { content: '→'; transition: transform .2s; display: inline-block; }
.home-hero__link:hover::after { transform: translateX(3px); }

@keyframes hero-bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }

/* ══ 2 · USP-LEISTE ════════════════════════════════════════════════ */
.home-usps {
  background: var(--rot-d);
  padding: 30px 0 34px;
  border-bottom: 0;
}
.home-usps__list {
  display: grid; grid-template-columns: repeat(3, max-content);
  justify-content: center; align-items: center;
  column-gap: clamp(32px, 4.5vw, 72px); row-gap: 16px;
  list-style: none;
}
@media (max-width: 900px) {
  .home-usps__list { grid-template-columns: repeat(2, max-content); column-gap: 28px; }
}
@media (max-width: 560px) {
  .home-usps__list { grid-template-columns: 1fr; justify-items: start; row-gap: 12px; }
}
.home-usp {
  display: flex; align-items: center; gap: 10px;
  color: rgba(250,246,239,.90); font-size: 13.5px;
  font-weight: 400; letter-spacing: .05em; white-space: nowrap;
}
.home-usp svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.7; flex: 0 0 16px; }

/* ══ ORNAMENT-TRENNER (zwischen Sektionen) ══════════════════════════ */

/* ══ 3 · ÜBER UNS ══════════════════════════════════════════════════ */
.home-about { padding: var(--sec-lg) 0; background: var(--bg); }
.home-about__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(44px, 6.5vw, 110px); align-items: center;
}
.home-about__img { position: relative; }
.home-about__img img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r);
}
.home-about__img::before {
  content: '';
  position: absolute; inset: -16px -16px 16px 16px;
  border: 1px solid var(--gold);
  opacity: .4; border-radius: var(--r);
  pointer-events: none;
}
.home-about__badge {
  position: absolute; bottom: -22px; right: -22px;
  background: var(--rot); color: #fff;
  width: 116px; height: 116px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display);
  text-align: center;
  box-shadow: 0 10px 30px rgba(176,51,39,.38);
  border: 3px solid var(--bg);
}
.home-about__badge-year { font-size: 24px; font-weight: 700; line-height: 1; }
.home-about__badge-label { font-family: var(--font); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: 4px; }

.home-about__text h2 { margin-bottom: 22px; text-wrap: balance; }
.home-about__text > p {
  color: var(--text); margin-bottom: 17px;
  font-size: 15.5px; font-weight: 300; line-height: 1.85;
  max-width: 58ch; text-wrap: pretty;
}
.home-about__facts {
  margin: 30px 0 34px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 13px 26px;
}
.home-about__fact {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; color: var(--text); line-height: 1.5;
}
.home-about__fact svg { width: 15px; height: 15px; stroke: var(--rot); fill: none; stroke-width: 2; flex: 0 0 15px; margin-top: 3px; }

@media (max-width: 860px) {
  .home-about__inner { grid-template-columns: 1fr; }
  .home-about__img { max-width: 460px; margin: 0 auto; }
  .home-about__badge { right: 8px; bottom: -12px; width: 100px; height: 100px; }
  .home-about__facts { grid-template-columns: 1fr; gap: 10px; }
}

/* ══ 4 · AWARDS ════════════════════════════════════════════════════ */
.home-awards {
  padding: var(--sec-sm) 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.home-awards__inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(36px, 5.5vw, 90px); flex-wrap: wrap;
}
.home-awards__item {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; text-align: center;
}
.home-awards__item img { height: 64px; width: auto; object-fit: contain; }
.home-awards__item span {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}

/* ══ 5 · ZIMMER ════════════════════════════════════════════════════ */
.home-rooms { padding: var(--sec-lg) 0; background: var(--bg-soft); }
.home-rooms .sec-head h2 { text-wrap: balance; }
.home-rooms .sec-head p { max-width: 56ch; text-wrap: pretty; }
.home-rooms__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; margin-top: 52px;
}
.room-card {
  position: relative; overflow: hidden; aspect-ratio: 3/4; cursor: pointer;
  border-radius: 12px;
}
.room-card__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.room-card:hover .room-card__img { transform: scale(1.055); }
@media (prefers-reduced-motion: reduce) { .room-card:hover .room-card__img { transform: none; } }
.room-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(28,14,10,.88) 0%, rgba(28,14,10,.12) 55%, transparent 100%);
  transition: opacity .4s;
}
.room-card__info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 30px 26px; color: #fff;
  transform: translateY(8px); transition: transform .45s var(--ease);
}
.room-card:hover .room-card__info { transform: none; }
.room-card__cat {
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-l); font-weight: 700; margin-bottom: 8px;
}
.room-card__title {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
  line-height: 1.18; margin-bottom: 7px; text-wrap: balance;
}
.room-card__meta { font-size: 13.5px; color: rgba(255,255,255,.80); letter-spacing: .02em; }
.room-card__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-l);
  margin-top: 14px; opacity: 0; transition: opacity .3s .08s;
}
.room-card:hover .room-card__cta { opacity: 1; }
.room-card__cta::after { content: '→'; }

.home-rooms__more { text-align: center; margin-top: 44px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }

@media (max-width: 800px) {
  .home-rooms__grid { grid-template-columns: 1fr; gap: 3px; }
  .room-card { aspect-ratio: 16/10; }
}

/* ══ 6 · BUCHUNGS-CTA ══════════════════════════════════════════════ */
.home-booking {
  padding: var(--sec-sm) 0;
  background: var(--rot);
  position: relative; overflow: hidden;
}
.home-booking::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.045'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.home-booking__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.home-booking__text h2 { color: #fff; font-size: clamp(1.45rem, 3vw, 2.25rem); margin-bottom: 9px; text-wrap: balance; }
.home-booking__text p { color: rgba(255,255,255,.80); font-size: 15px; font-weight: 300; }
@media (max-width: 700px) {
  .home-booking__inner { flex-direction: column; text-align: center; }
}

/* ══ 7 · FRÜHSTÜCK ═════════════════════════════════════════════════ */
.home-breakfast { padding: var(--sec-lg) 0; background: var(--bg); }
.home-breakfast__inner {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(44px, 6.5vw, 100px); align-items: center;
}
.home-breakfast__badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gold-d); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; padding: 6px 16px; margin-bottom: 20px;
  border-radius: 2px;
}
.home-breakfast__badge svg { width: 13px; height: 13px; fill: currentColor; }
.home-breakfast__text h2 { margin-bottom: 18px; text-wrap: balance; }
.home-breakfast__text p {
  color: var(--text); font-size: 15.5px; font-weight: 300;
  line-height: 1.85; margin-bottom: 15px; max-width: 54ch; text-wrap: pretty;
}
.home-breakfast__img img {
  width: 100%; border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(44,26,20,.14);
}
@media (max-width: 800px) { .home-breakfast__inner { grid-template-columns: 1fr; } }

/* ══ 8 · UMGEBUNG ══════════════════════════════════════════════════ */
.home-umgebung { padding: var(--sec-lg) 0; background: var(--bg-soft); }
.home-umgebung .sec-head p { max-width: 54ch; }
.home-umgebung__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; margin-top: 52px;
}
.umgebung-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--white); padding: 34px 30px 30px;
  border: 1px solid var(--line); border-bottom: 3px solid transparent;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
  border-radius: 12px;
}
.umgebung-card:hover {
  border-bottom-color: var(--rot);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(44,26,20,.11);
}
@media (prefers-reduced-motion: reduce) { .umgebung-card:hover { transform: none; } }
/* Bildplatz ohne Foto: gleiches 16:10-Feld wie die Bildkarten, mit zentriertem
   Icon. So bleiben die Karten einer Reihe gleich aufgebaut, auch wenn für ein
   Motiv noch kein Foto vorliegt. Sobald die Datei da ist, greift wieder kds_img. */
.umgebung-card__imgicon {
  aspect-ratio: 16/10;
  border-radius: var(--r);
  background: var(--tint);
  display: grid; place-items: center;
}
.umgebung-card__imgicon svg {
  width: 56px; height: 56px;
  stroke: var(--rot); fill: none; stroke-width: 1.2;
  opacity: .55;
}

.umgebung-card__icon {
  width: 46px; height: 46px; background: var(--tint); border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 20px;
}
.umgebung-card__icon svg { width: 22px; height: 22px; stroke: var(--rot); fill: none; stroke-width: 1.5; }
.umgebung-card h3 {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--ink); margin-bottom: 11px; font-style: normal;
}
.umgebung-card p, .umgebung-card li { font-size: 15px; font-weight: 400; color: var(--text); line-height: 1.75; }
.umgebung-card__dist {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--gold-d);
  letter-spacing: .08em; text-transform: uppercase;
  margin-top: auto; padding-top: 20px;
}
@media (max-width: 800px) { .home-umgebung__grid { grid-template-columns: 1fr; } }

/* ══ 9 · BEWERTUNGEN (Teaser) ══════════════════════════════════════ */
.home-reviews { padding: var(--sec-lg) 0; background: var(--bg); }
.home-reviews__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 52px;
}
.review-card {
  background: var(--white); padding: 36px 32px;
  border-radius: 12px;
  box-shadow: 0 3px 16px rgba(44,26,20,.07);
  position: relative;
}
.review-card__text {
  font-size: 16px; font-weight: 400;
  color: var(--ink); line-height: 1.8;
  margin: 14px 0 22px; text-wrap: pretty;
}
.review-card__author {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-d);
}
.review-card__author::before { content: ''; width: 22px; height: 1px; background: var(--gold); }
.review-card__stars { color: var(--gold-d); font-size: 15px; letter-spacing: 3px; margin-bottom: 6px; }
@media (max-width: 800px) { .home-reviews__grid { grid-template-columns: 1fr; } }

/* ══ 10 · FAQ ══════════════════════════════════════════════════════ */
.home-faq { padding: var(--sec-lg) 0; background: var(--bg-soft); }
.home-faq__list { max-width: 700px; margin: 48px auto 0; }
.home-faq__item { border-bottom: 1px solid var(--line); }
.home-faq__item:first-child { border-top: 1px solid var(--line); }
.home-faq__q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 6px; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 700;
  color: var(--ink); list-style: none; gap: 18px;
  transition: color .2s;
}
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__q::after {
  content: '+'; font-family: var(--font-display); font-size: 22px; font-weight: 400;
  color: var(--rot); flex: 0 0 auto; transition: transform .25s;
}
details[open] .home-faq__q::after { content: '−'; }
details[open] .home-faq__q { color: var(--rot); }
.home-faq__a { padding: 2px 6px 24px; }
.home-faq__a p { font-size: 15px; font-weight: 300; color: var(--muted); line-height: 1.8; max-width: 62ch; }

/* ══ 11 · KONTAKT-CTA ══════════════════════════════════════════════ */
.home-cta {
  padding: var(--sec) 0 var(--sec-sm);
  background: var(--foot);
  position: relative; overflow: hidden;
}
.home-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 28% 50%, rgba(176,51,39,.16) 0%, transparent 65%),
              radial-gradient(ellipse at 74% 50%, rgba(184,172,99,.09) 0%, transparent 65%);
  pointer-events: none;
}
.home-cta__inner { position: relative; z-index: 1; text-align: center; }
.home-cta__inner h2 { color: #fff; margin-bottom: 16px; text-wrap: balance; }
.home-cta__inner > p {
  color: rgba(255,255,255,.68); font-size: 15.5px; font-weight: 300;
  margin: 0 auto 36px; max-width: 44ch; text-wrap: pretty;
}
.home-cta__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }


/* ══ BOOKING-BAR – Schnellauswahl unterm Hero (übergibt an Dirs21) ══ */
.booking-bar {
  background: var(--bg);
  padding: clamp(40px, 5vw, 64px) 0 12px;
  position: relative; z-index: 5;
}
.booking-bar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0;
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(43,27,20,.14);
  overflow: hidden;
}
.booking-bar__field {
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px 26px;
  border-right: 1px solid var(--line);
}
.booking-bar__field label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-d);
}
.booking-bar__field input, .booking-bar__field select {
  border: 0; background: transparent;
  font-family: var(--font); font-size: 15.5px; font-weight: 600;
  color: var(--ink); padding: 0; cursor: pointer;
}
/* Buchungsleiste: Fokus muss sichtbar bleiben (WCAG 2.4.7) – der frühere
   outline:none hat ihn ersatzlos entfernt. */
.booking-bar__field input:focus-visible, .booking-bar__field select:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
  border-radius: 4px;
}
.booking-bar__submit {
  display: flex; align-items: center;
}
.booking-bar__submit .btn {
  height: 100%; border-radius: 0; padding: 0 40px;
  font-size: 13px;
}
@media (max-width: 860px) {
  .booking-bar__inner { grid-template-columns: 1fr 1fr; border-radius: var(--r); }
  .booking-bar__field:nth-child(2) { border-right: 0; }
  .booking-bar__submit { grid-column: 1 / -1; }
  .booking-bar__submit .btn { width: 100%; padding: 18px; }
}

/* ══ BILD-PLATZHALTER mit Motiv-Beschreibung ══ */
.img-ph {
  width: 100%;
  border: 1.5px dashed var(--gold);
  border-radius: var(--r);
  background: repeating-linear-gradient(-45deg, rgba(184,172,99,.05) 0 12px, transparent 12px 24px), var(--bg-soft);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 24px; text-align: center;
}
.img-ph svg { width: 34px; height: 34px; color: var(--gold-d); opacity: .8; }
.img-ph__label {
  font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-d);
}
.img-ph__motiv {
  font-family: var(--font-display); font-style: italic;
  font-size: 15.5px; color: var(--text); max-width: 34ch; line-height: 1.5;
}
.img-ph__file { font-size: 11px; color: var(--muted); font-family: monospace; }

.booking-bar__hint {
  text-align: center;
  font-size: 12.5px; color: var(--muted);
  margin: 14px auto 0; letter-spacing: .03em;
}

/* ══ MOBIL: Startseite durchgängig zentriert + größeres Hero-Logo ══ */
@media (max-width: 860px) {
  /* Logo deutlich größer: Schimmer-Padding schrumpft, Logo nutzt die Breite */
  .home-hero__logo {
    width: min(520px, 100%);
    padding: 30px 20px 44px;
  }
  /* Versatz zum Haus auf die schmale Logo-Box umgerechnet (siehe oben). */
  .home-hero__arc,
  .home-hero__stars { left: calc(0.0333 * (min(520px, 100%) - 40px)); }
  /* Alle Textsektionen der Startseite zentriert */
  .home-about__text,
  .home-breakfast__text,
  .home-booking__text,
  .home-usps,
  .home-awards,
  .home-cta { text-align: center; }
  /* Checklisten & USP-Zeilen: Icon + Text als zentrierte Einheit */
  .home-about__text ul li,
  .home-usps li,
  .home-usp li {
    justify-content: center;
    text-align: left;           /* Textzeile selbst bleibt lesbar am Icon */
    width: fit-content;
    margin-inline: auto;
  }
  /* Buttons unter zentrierten Texten mittig */
  .home-about__text .btn,
  .home-breakfast__text .btn,
  .home-booking__text .btn { margin-inline: auto; }
  .home-about__text > div[style*="flex"],
  .home-booking__text > div[style*="flex"] { justify-content: center; }
}