/* ==========================================================================
   Schulzes Hof – Stylesheet
   Designkonzept "Blaue Stunde": tiefes Nachtblau (Himmel), warmes Kerzenlicht
   (Flutlicht auf der Deele), Oxblut (Schriftzug) und Leinen als Lesefläche.
   Signature: Fachwerk-Band als Trenner + Lichtschein unter dunklen Sektionen.
   --------------------------------------------------------------------------
   Inhalt
   01 Tokens
   02 Reset & Basis
   03 Typografie
   04 Layout
   05 Buttons & Links
   06 Header / Navigation
   07 Hero
   08 Faktenband
   09 Karten & Raster
   10 Leistungen / Listen
   11 Gastgeber
   12 Galerie & Lightbox
   13 Zeitleiste (Geschichte)
   14 Formular
   15 Modal (Impressum / Datenschutz)
   16 Footer
   17 Hilfsklassen, Animation, Print
   ========================================================================== */

/* 01 Tokens ---------------------------------------------------------------- */
:root {
  /* Farben – Corporate Design Schulzes Hof */
  --rotbraun:   #7a1e00;   /* CD: Logo */
  --rot:        #7f0000;   /* CD: Website */
  --rot-hell:   #9c1414;
  --hellgrau:   #999999;   /* CD: Website */
  --hellgrau-2: #c8c4c1;
  --dunkel:     #2b0e05;   /* aus dem Rotbraun abgeleitet */
  --dunkel-2:   #3f1508;
  --dunkel-3:   #5a1d0a;
  --papier:     #f7f5f2;
  --papier-2:   #ece7e2;
  --linie:      #d8d2cc;
  --tinte:      #221c1a;
  --tinte-70:   #635a55;   /* lesbares Grau, dunkler als CD-Hellgrau */
  --weiss:      #ffffff;

  /* Schrift */
  --f-display: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman",
               "Tinos", Georgia, serif;
  --f-text:    var(--f-display);
  --f-util:    var(--f-display);

  /* Typoskala */
  --t-xxl: clamp(2.6rem, 7vw, 5.4rem);
  --t-xl:  clamp(2rem, 4.4vw, 3.4rem);
  --t-l:   clamp(1.5rem, 2.6vw, 2.1rem);
  --t-m:   clamp(1.15rem, 1.6vw, 1.35rem);
  --t-s:   1.125rem;
  --t-xs:  0.875rem;
  --t-label: 0.75rem;

  /* Feines Rauschen gegen Streifenbildung auf dunklen Flächen */
  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.5'/%3E%3C/svg%3E");

  /* Maße */
  --wrap:      78rem;
  --wrap-eng:  46rem;
  --gap:       clamp(1.25rem, 3vw, 2.5rem);
  --pad-sec:   clamp(4rem, 9vw, 8rem);
  --radius:    3px;
  --radius-l:  6px;
  --radius-btn: 999px;
  --kopf-zeile: 76px;       /* Höhe der Menüzeile */
  --header-h:  76px;        /* Menüzeile plus Aktionsleiste, siehe .hat-aktion */

  /* Schatten & Übergänge */
  --schatten:   0 18px 50px -24px rgba(43, 14, 5, .45);
  --schatten-l: 0 30px 80px -30px rgba(43, 14, 5, .6);
  --ease:       cubic-bezier(.22, .61, .36, 1);

  /* Fachwerk-Band (Signature) */
  --fachwerk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18' viewBox='0 0 72 18'%3E%3Cg fill='none' stroke='%237a1e00' stroke-width='1.6'%3E%3Cpath d='M0 1h72M0 17h72'/%3E%3Cpath d='M0 17 18 1M18 17 0 1M36 17 54 1M54 17 36 1'/%3E%3Cpath d='M18 17V1M54 17V1'/%3E%3C/g%3E%3C/svg%3E");
  --fachwerk-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='18' viewBox='0 0 72 18'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M0 1h72M0 17h72'/%3E%3Cpath d='M0 17 18 1M18 17 0 1M36 17 54 1M54 17 36 1'/%3E%3Cpath d='M18 17V1M54 17V1'/%3E%3C/g%3E%3C/svg%3E");
}

/* 02 Reset & Basis --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: var(--t-s);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.ist-fixiert { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--hellgrau);
  outline-offset: 3px;
  border-radius: var(--radius);
}
::selection { background: var(--rot); color: var(--weiss); }

/* 03 Typografie ------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p, ul, ol { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rot-hell); }
strong { font-weight: 700; }

.eyebrow {
  font-family: var(--f-util);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rot);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.eyebrow--zentriert { justify-content: center; }
.lead {
  font-size: var(--t-m);
  line-height: 1.62;
  color: var(--tinte-70);
  max-width: 46ch;
}
.klein { font-family: var(--f-util); font-size: var(--t-xs); line-height: 1.6; }

/* 04 Layout ---------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--eng { width: min(100% - 2.5rem, var(--wrap-eng)); }
.section { padding-block: var(--pad-sec); position: relative; }
.section--knapp { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dunkel {
  background: var(--dunkel); color: var(--papier);
  overflow: hidden; position: relative; isolation: isolate;
}
/* Rauschteppich: liegt über der Fläche, nicht über dem Inhalt */
.section--dunkel::before,
.faktenband::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--rauschen); background-size: 140px 140px;
  opacity: .035; pointer-events: none;
}
.section--dunkel > *, .faktenband > *, .fuss > * { position: relative; z-index: 1; }
/* Kante nach oben: eine feine warme Linie statt weicher Übergang */
.section--dunkel + .section--dunkel { border-top: 1px solid rgba(255, 240, 232, .07); }
.section--dunkel h2, .section--dunkel h3 { color: var(--weiss); }
.section--dunkel .eyebrow { color: var(--hellgrau); }
.section--dunkel .lead { color: rgba(246, 243, 240, .74); }
.section--dunkel a:not(.btn):not(.social-btn) { color: var(--hellgrau-2); }
.section--papier-2 { background: var(--papier-2); }
.section-kopf { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-kopf--zentriert { margin-inline: auto; text-align: center; }
.section-kopf--zentriert .lead { margin-inline: auto; }

/* Signature: Lichtschein unter dunklen Flächen */
.lichtschein::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(132%, 1500px);
  height: clamp(170px, 24vw, 330px);
  transform: translateX(-50%);
  /* Der Radius bleibt unter der halben Kastenbreite, sonst bricht der Verlauf
     an der Kante ab und man sieht ein Rechteck. */
  background: radial-gradient(ellipse 50% 104% at 50% 100%,
              rgba(255, 236, 220, .125) 0%,
              rgba(255, 236, 220, .085) 22%,
              rgba(255, 236, 220, .048) 42%,
              rgba(255, 236, 220, .020) 60%,
              rgba(255, 236, 220, .006) 74%,
              rgba(255, 236, 220, 0) 86%);
  /* Unten ausblenden, damit an der Abschnittsgrenze keine Naht entsteht */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 100%);
          mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
.lichtschein > * { position: relative; z-index: 1; }
/* Stoßen zwei dunkle Abschnitte aneinander, entfällt der Schein am oberen –
   sonst entsteht mittendrin eine helle Naht, die wie ein Fehler aussieht. */
.lichtschein:has(+ .section--dunkel)::after { display: none; }

/* Signature: Fachwerk-Band */
.fachwerk-band {
  height: 18px;
  background-image: var(--fachwerk);
  background-size: 72px 18px;
  background-repeat: repeat-x;
  opacity: .45;
}

/* 05 Buttons & Links ------------------------------------------------------- */
.btn {
  --btn-bg: var(--rot);
  --btn-fg: var(--weiss);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-btn);
  font-family: var(--f-util);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--rot-hell); border-color: var(--rot-hell); color: var(--weiss); transform: translateY(-2px); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--tinte); border-color: currentColor; }
.btn--outline:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
.btn--outline-hell { --btn-bg: transparent; --btn-fg: var(--papier); border-color: rgba(246, 243, 240, .5); }
.btn--outline-hell:hover { background: var(--papier); border-color: var(--papier); color: var(--dunkel); }
.btn-reihe { display: flex; flex-wrap: wrap; gap: .85rem; }
/* Handy: keine Umbrüche in Knöpfen; Knöpfe füllen die Zeile, untereinander gleich breit (Kundenwunsch 31.10.2026) */
@media (max-width: 600px) {
  .btn { white-space: nowrap; justify-content: center; text-align: center; letter-spacing: .07em; padding-inline: 1rem;
         font-size: clamp(.7rem, 3.4vw, var(--t-xs)); max-width: 100%; }
  .btn-reihe > .btn { flex: 1 1 auto; }
  /* Dunkle Bänder: Knöpfe gleich breit, zwei nebeneinander, sonst untereinander (Kundenwunsch 31.10.2026) */
  .section--dunkel .btn-reihe { display: grid; grid-template-columns: 1fr; gap: .6rem; }
  .section--dunkel .btn-reihe:has(.nur-breit) { grid-template-columns: 1fr 1fr; }
  .section--dunkel .btn-reihe:has(.nur-breit) > .btn { padding-inline: .5rem; letter-spacing: .04em; }
  .nur-breit { display: none; }
  .hero h1 { overflow-wrap: anywhere; hyphens: auto; }
  .zeitstrahl .btn-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
  .zeitstrahl .btn-reihe > .btn { padding-inline: .5rem; letter-spacing: .03em; }
  p > .btn:only-child, .bewertungen-fuss .btn, .aktuell-text .btn { display: flex; width: 100%; }
}

.text-link {
  font-family: var(--f-util);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.text-link::after { content: "→"; transition: transform .25s var(--ease); }
.text-link:hover::after { transform: translateX(4px); }

/* 06 Header / Navigation --------------------------------------------------- */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--rot); color: var(--weiss);
  padding: .7rem 1.1rem; border-radius: var(--radius);
  font-family: var(--f-util); font-size: var(--t-xs); text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--weiss); }

.kopf {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
}
/* Aktionsleiste unter der Menüleiste. Sie gehört zum festen Kopf, deshalb steckt ihre Höhe in
   --header-h: alles, was unter dem Kopf beginnt (Hero, Mobilmenü, Ankersprünge), rückt mit. */
.hat-aktion { --aktion-h: 2.5rem; --header-h: calc(var(--kopf-zeile) + 2.5rem); }
@media (max-width: 36rem) { .hat-aktion { --aktion-h: 3.25rem; --header-h: calc(var(--kopf-zeile) + 3.25rem); } }
.aktionsleiste { background: var(--dunkel); color: var(--papier); height: var(--aktion-h); display: flex; align-items: center; }
.aktionsleiste .wrap { width: 100%; text-align: center; }
.aktionsleiste a {
  display: inline-block; color: var(--papier); text-decoration: none;
  font-family: var(--f-util); font-size: .9375rem; line-height: 1.25; letter-spacing: .015em;
}
.aktionsleiste strong { font-weight: 700; border-bottom: 1px solid rgba(247, 245, 242, .5); transition: border-color .25s var(--ease); }
.aktionsleiste a:hover strong { border-bottom-color: var(--weiss); }
@media (max-width: 36rem) { .aktionsleiste a { font-size: .8125rem; } }
/* Beim Scrollen nur ein feiner Schatten – die Farbe bleibt, damit das Logo
   nie den Grund wechselt. */
.kopf.ist-fest { box-shadow: 0 2px 14px rgba(43, 14, 5, .09); border-color: transparent; }
.kopf-inner {
  min-height: var(--kopf-zeile);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.marke { flex: none; display: block; padding: .5rem 0; }
.marke img { width: clamp(150px, 20vw, 214px); transition: opacity .3s var(--ease); }
.marke:hover img { opacity: .78; }

.haupt-nav { margin-left: auto; }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.3rem); }
.nav-liste > li { position: relative; }
.nav-eltern { display: flex; align-items: center; }
.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .25rem;
  font-family: var(--f-util); font-size: 1.0625rem; font-weight: 400;
  letter-spacing: .01em; color: var(--tinte); text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  transition: color .25s var(--ease);
}
.nav-link::after {
  content: ""; position: absolute; left: .25rem; right: .25rem; bottom: .25rem;
  height: 1px; background: var(--rot); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-link:hover, .nav-eltern:hover > .nav-link, .nav-link.ist-aktiv { color: var(--rot); }
.nav-link:hover::after, .nav-eltern:hover > .nav-link::after, .nav-link.ist-aktiv::after { transform: scaleX(1); }
/* Der Oberpunkt ist ein Link zum ersten Unterpunkt; der Pfeil daneben klappt das Untermenü auf */
.nav-pfeil {
  display: inline-flex; align-items: center; padding: .55rem .35rem .55rem .1rem;
  background: none; border: 0; cursor: pointer; color: var(--tinte);
  transition: color .25s var(--ease);
}
.nav-pfeil:hover, .nav-pfeil[aria-expanded="true"], .nav-eltern:hover > .nav-pfeil { color: var(--rot); }
.nav-pfeil .pfeil { width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.nav-pfeil[aria-expanded="true"] .pfeil { transform: rotate(225deg) translateY(-2px); }

.unter-nav {
  list-style: none; margin: 0; padding: .5rem;
  position: absolute; top: calc(100% + .2rem); left: -.75rem; min-width: 15rem;
  background: var(--weiss); border: 1px solid var(--linie);
  border-top: 2px solid var(--rot);
  box-shadow: var(--schatten-l);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-eltern:hover .unter-nav,
.nav-eltern:focus-within .unter-nav,
.unter-nav.ist-offen { opacity: 1; visibility: visible; transform: translateY(0); }
.unter-nav a {
  display: block; padding: .6rem .85rem;
  font-family: var(--f-util); font-size: 1rem; letter-spacing: .01em;
  color: var(--tinte); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.unter-nav a:hover { background: var(--papier-2); border-left-color: var(--rot); color: var(--rot); }
/* Die Seite, auf der man ist, bleibt rot: im Untermenü und am Pfeil des Oberpunkts */
.unter-nav a.ist-aktiv { border-left-color: var(--rot); color: var(--rot); }
.nav-link.ist-aktiv + .nav-pfeil { color: var(--rot); }

.kopf-cta { flex: none; display: flex; align-items: center; gap: .8rem; }
.kopf-social { display: flex; align-items: center; gap: .3rem; }
.kopf-social a {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--rotbraun); border-radius: 50%; text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.kopf-social a:hover { color: var(--rot); background: var(--papier-2); transform: translateY(-1px); }
.kopf-social svg { width: 18px; height: 18px; fill: currentColor; }
.nav-mobil-cta { display: none; }
.nav-schalter {
  display: none; flex: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--linie); border-radius: var(--radius);
  cursor: pointer;
}
.nav-schalter:hover { border-color: var(--rot); }
.nav-schalter span, .nav-schalter span::before, .nav-schalter span::after {
  display: block; width: 20px; height: 1.5px; background: var(--rot);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-schalter span { margin: 0 auto; position: relative; }
.nav-schalter span::before, .nav-schalter span::after { content: ""; position: absolute; left: 0; }
.nav-schalter span::before { top: -6px; }
.nav-schalter span::after  { top: 6px; }
.nav-schalter[aria-expanded="true"] span { transform: rotate(45deg); }
.nav-schalter[aria-expanded="true"] span::before { opacity: 0; }
.nav-schalter[aria-expanded="true"] span::after { transform: rotate(-90deg) translateX(6px); }

/* Ab 1160 px passt die Menüzeile mit „Kontakt & Anfahrt“ und dem Knopf daneben, darunter das Handymenü */
@media (max-width: 1160px) {
  .nav-schalter { display: block; }
  .kopf-cta { display: none; }
  .haupt-nav {
    position: fixed; inset: var(--header-h) 0 0; margin: 0;
    background: var(--weiss); padding: 1.5rem 1.5rem 4rem;
    overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .haupt-nav.ist-offen { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-liste > li { border-bottom: 1px solid var(--linie); }
  .nav-eltern { flex-wrap: wrap; }
  .nav-link { width: 100%; justify-content: space-between; padding: 1.05rem .25rem; font-size: 1rem; }
  .nav-eltern > .nav-link { width: auto; flex: 1; justify-content: flex-start; }
  /* Strich zwischen Link und Pfeil, damit klar ist: der Pfeil klappt nur auf (Kundendokument 4) */
  .nav-pfeil { padding: 1.05rem .9rem; align-self: stretch; }
  /* Roter Balken links beim aktuellen Hauptpunkt, auch wenn man auf einer Unterseite ist (Kundenwunsch 31.10.2026) */
  .nav-liste > li > .nav-link.ist-aktiv, .nav-eltern > .nav-link.ist-aktiv { box-shadow: inset 3px 0 0 var(--rot); padding-left: .85rem; }
  .nav-link::after { display: none; }
  .unter-nav {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; min-width: 0;
    display: none; padding: 0 0 .75rem .25rem;
  }
  .unter-nav { flex-basis: 100%; }
  .unter-nav.ist-offen { display: block; }
  .nav-eltern:hover .unter-nav:not(.ist-offen) { display: none; }
  .nav-mobil-cta { display: block; margin-top: 1.75rem; }
  .nav-mobil-cta .kopf-social { margin-bottom: 1rem; }
  .nav-mobil-cta .kopf-social a { width: 40px; height: 40px; border: 1px solid var(--linie); }
}

/* 07 Hero ------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: min(92svh, 860px);
  display: grid;
  align-items: end;
  padding-block: calc(var(--header-h) + 4rem) clamp(3.5rem, 9vw, 7rem);
  background: var(--dunkel);
  color: var(--papier);
  overflow: hidden;
  isolation: isolate;
}
.hero--klein { min-height: min(62svh, 560px); }
.hero-bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(64% 54% at 50% 106%, rgba(255, 238, 224, .16), rgba(255, 238, 224, 0) 66%),
    linear-gradient(180deg,
      rgba(24, 16, 12, .76) 0%, rgba(24, 16, 12, .66) 14%, rgba(24, 16, 12, .50) 28%,
      rgba(24, 16, 12, .32) 40%, rgba(24, 16, 12, .40) 58%, rgba(24, 16, 12, .64) 78%,
      rgba(24, 16, 12, .86) 100%);
}
/* Rauschen über dem Hero-Verlauf, sonst sind auf großen Flächen Stufen zu sehen */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--rauschen); background-size: 140px 140px;
  opacity: .04; pointer-events: none;
}
/* Tagesaufnahmen: Schleier zur Textseite gezogen, damit vom Foto etwas übrig
   bleibt. Auf der Abendaufnahme der Deele wäre das zu wenig Kontrast. */
.hero--tag::before {
  background:
    linear-gradient(102deg,
      rgba(24, 16, 12, .84) 0%, rgba(24, 16, 12, .72) 18%, rgba(24, 16, 12, .58) 38%,
      rgba(24, 16, 12, .38) 56%, rgba(24, 16, 12, .20) 72%, rgba(24, 16, 12, .10) 86%,
      rgba(24, 16, 12, .05) 100%),
    linear-gradient(180deg, rgba(24, 16, 12, .34) 0%, rgba(24, 16, 12, .12) 22%,
                    rgba(24, 16, 12, .06) 38%, rgba(24, 16, 12, .24) 70%,
                    rgba(24, 16, 12, .48) 100%);
}
@media (max-width: 52rem) {
  /* Auf schmalen Bildschirmen liegt der Text über dem Motiv. Der stärkere
     Schleier hält auch helle Giebelflächen hinter kleinen Zeilen lesbar. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(24, 16, 12, .58) 0%, rgba(24, 16, 12, .62) 38%,
      rgba(24, 16, 12, .78) 68%, rgba(24, 16, 12, .9) 100%);
  }
  .hero--tag::before {
    background: linear-gradient(180deg, rgba(24, 16, 12, .5) 0%, rgba(24, 16, 12, .35) 30%,
                                rgba(24, 16, 12, .8) 100%);
  }
}

.hero h1 { color: var(--weiss); max-width: 22ch; text-shadow: 0 2px 30px rgba(43, 14, 5, .5); }
/* Eyebrow im Hero: reinweiß. Eine spätere Regel hat sie früher auf --hellgrau
   (#999) zurückgesetzt, daher die schlechte Lesbarkeit über hellen Bildstellen. */
.hero .eyebrow { color: var(--weiss); font-size: .8125rem; text-shadow: 0 1px 3px rgba(20, 10, 6, .75), 0 2px 18px rgba(20, 10, 6, .9); }
.hero-zeile { display: block; }
.nobr { white-space: nowrap; }
.hero .lead { color: rgba(255, 255, 255, .82); max-width: 44ch; margin-bottom: 2rem; }
.hero-inhalt { max-width: 44rem; }

/* Startseiten-Hero auf dem Handy: das Foto wird ungeschnitten gezeigt (Seitenverhältnis
   des Originals, 3:2), der Text steht darunter auf der dunklen Fläche. Auf dem Desktop
   bleibt alles wie vorher. Ein Zuschnitt auf 16:9 ginge über --hero-mobil-ratio. */
@media (max-width: 52rem) {
  :is(.hero--ganz, .hero--klein) {
    --hero-mobil-ratio: 3 / 2;
    min-height: 0; display: block;
    padding-block: var(--header-h) 0;
  }
  :is(.hero--ganz, .hero--klein)::before, :is(.hero--ganz, .hero--klein)::after { display: none; }
  :is(.hero--ganz, .hero--klein) .hero-bild {
    position: static; display: block; z-index: auto;
    width: 100%; height: auto; aspect-ratio: var(--hero-mobil-ratio);
    transform: none; animation: none;
  }
  :is(.hero--ganz, .hero--klein) .hero-inhalt { padding-block: 2rem clamp(2.5rem, 9vw, 3.5rem); }
  :is(.hero--ganz, .hero--klein) .hero-runter { display: none; }
  /* Eyebrow in zwei Zeilen statt drei: engere Laufweite, ohne Zierstrich */
  :is(.hero--ganz, .hero--klein) .eyebrow { font-size: .75rem; letter-spacing: .14em; }
  :is(.hero--ganz, .hero--klein) .eyebrow::before { display: none; }
  /* Der Textbereich unter dem Foto steht auf hellem Grund (Kundenwunsch 19.10.2026) */
  :is(.hero--ganz, .hero--klein) { background: var(--papier); color: var(--tinte); }
  :is(.hero--ganz, .hero--klein) h1 { color: var(--tinte); text-shadow: none; }
  :is(.hero--ganz, .hero--klein) .eyebrow { color: var(--rot); text-shadow: none; }
  :is(.hero--ganz, .hero--klein) .lead { color: var(--tinte-70); }
  :is(.hero--ganz, .hero--klein) .btn--outline-hell { --btn-fg: var(--tinte); border-color: var(--tinte-70); }
  :is(.hero--ganz, .hero--klein) .btn--outline-hell:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }
}

.hero-runter {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .5rem;
  font-family: var(--f-util); font-size: .625rem; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6); text-decoration: none;
}
.hero-runter span { display: block; width: 1px; height: 2.2rem; background: linear-gradient(var(--hellgrau), transparent); }

/* 08 Faktenband ------------------------------------------------------------ */
.faktenband {
  background: var(--dunkel-2); color: var(--papier);
  position: relative; overflow: hidden; isolation: isolate;
}
.faktenband-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1px;
  background: rgba(246, 243, 240, .14);
}
.faktenband-liste li {
  padding: clamp(1.4rem, 3vw, 2.25rem) 1rem;
  background: var(--dunkel-2);
  text-align: center;
}
.fakt-zahl {
  display: block;
  font-family: var(--f-display); font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1; color: var(--weiss); margin-bottom: .45rem;
}
.fakt-text {
  display: block; font-family: var(--f-util); font-size: var(--t-label);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(246, 243, 240, .7);
}
@media (max-width: 40rem) {
  .faktenband-liste { grid-template-columns: repeat(2, 1fr); }
  .faktenband-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* 09 Karten & Raster ------------------------------------------------------- */
.raster { display: grid; gap: var(--gap); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.karte {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
a.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--papier-2); color: inherit; }
.karte-bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dunkel-2); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.karte:hover .karte-bild img { transform: scale(1.05); }
.karte-text { padding: clamp(1.25rem, 2.4vw, 1.9rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.karte-text h3 { margin: 0; }
.karte-text h3.karte-titel-klein { font-size: var(--t-m); }
/* Anlässe (Location): Überschrift immer in einer Zeile, Schrift passt sich der Kartenbreite an (Kundenwunsch 31.10.2026) */
.karte-text:has(.karte-titel-zeile) { container-type: inline-size; }
.karte-text h3.karte-titel-zeile { white-space: nowrap; font-size: clamp(1rem, 7.2cqi, 1.6rem); }
.karte-text p { margin: 0; color: var(--tinte-70); }
.karte-meta {
  font-family: var(--f-util); font-size: var(--t-label); letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot);
}
.karte-text .karte-fuss { margin-top: auto; padding-top: .4rem; }
/* „Mehr erfahren“ als Knopf (die ganze Karte ist der Link): reagiert beim Überfahren der Karte */
.karte-fuss .btn { padding: .8rem 1.4rem; }
a.karte:hover .karte-fuss .btn { background: var(--rot-hell); border-color: var(--rot-hell); color: var(--weiss); }

/* Wechselseitige Bild/Text-Blöcke */
.duo { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 62rem) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--gedreht .duo-bild { order: 2; }
  /* Für Bilder aus alten Beständen: die Spalte bleibt so schmal wie die
     Vorlage, damit nichts hochgerechnet und dadurch unscharf wird. */
  .duo--schmalbild { grid-template-columns: minmax(0, 26rem) 1fr; }
  .duo--schmalbild.duo--gedreht { grid-template-columns: 1fr minmax(0, 26rem); }
}
.duo-bild { position: relative; margin: 0; }
.duo-bild img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
.duo-bild figcaption {
  font-family: var(--f-util); font-size: var(--t-xs); color: var(--tinte-70);
  margin-top: .7rem;
}
.duo + .duo { margin-top: clamp(3rem, 7vw, 6rem); }
/* Abschnitt ohne Bild (Livegang, solange ein Foto fehlt): schmale Textspalte, gleicher Abstand wie bei .duo */
.duo-text { max-width: 44rem; margin-inline: auto; }
.duo + .duo-text, .duo-text + .duo, .duo-text + .duo-text { margin-top: clamp(3rem, 7vw, 6rem); }

/* 10 Leistungen / Listen --------------------------------------------------- */
.haken-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.haken-liste li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: baseline; }
.haken-liste li::before {
  content: ""; width: .7rem; height: .38rem; margin-top: .5rem;
  border-left: 1.6px solid var(--rot); border-bottom: 1.6px solid var(--rot);
  transform: rotate(-45deg);
}
.section--dunkel .haken-liste li::before { border-color: var(--hellgrau); }

.leistungs-box {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.leistungs-box h2, .leistungs-box h3 { margin-bottom: 1rem; }
.leistungs-box h2 { font-size: var(--t-l); }
.leistungs-box--optional { background: transparent; border-style: dashed; }

/* 11 Gastgeber ------------------------------------------------------------- */
.gastgeber { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 54rem) { .gastgeber { grid-template-columns: minmax(0, 20rem) 1fr; } .gastgeber--breit { grid-template-columns: minmax(0, 27rem) 1fr; } }
.gastgeber-bild { border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten-l); }
.gastgeber-bild img { width: 100%; }
.gastgeber-bild--namen { margin: 0; overflow: visible; box-shadow: none; border-radius: 0; }
.gastgeber-bild--namen img { border-radius: var(--radius); box-shadow: var(--schatten-l); }
.gastgeber-bild--namen figcaption { margin-top: .7rem; font-size: var(--t-xs); letter-spacing: .04em; color: var(--tinte-70); }
.section--dunkel .gastgeber-bild--namen figcaption { color: rgba(246, 243, 240, .72); }
.zitat { font-size: var(--t-l); line-height: 1.42; font-style: italic; margin: 0 0 1.25rem; }
.zitat-quelle {
  font-family: var(--f-util); font-size: var(--t-label); letter-spacing: .18em;
  text-transform: uppercase; color: var(--hellgrau); margin: 0;
}

/* 12 Galerie & Lightbox ---------------------------------------------------- */
/* Kacheln unterschiedlicher Größe lückenlos setzen: feste Zeilenhöhe, jedes
   Bild belegt eine bestimmte Zahl davon. Mit aspect-ratio je Kachel entstanden
   dagegen Löcher, weil breite und hohe Bilder die Zeile aufgezogen haben. */
.galerie {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-auto-rows: 8rem;
  grid-auto-flow: dense;
}
.galerie-item {
  position: relative; margin: 0; padding: 0; border: 0; background: var(--dunkel-2);
  grid-row: span 2;
  overflow: hidden; cursor: zoom-in; border-radius: var(--radius);
}
/* Vier gleich große Kacheln, z. B. auf der Startseite */
.galerie--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
@media (min-width: 52rem) { .galerie--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie--vier .galerie-item { grid-row: auto; aspect-ratio: 4 / 3; }
.galerie-item.bild-platzhalter { min-height: 0; padding: .5rem; cursor: default; }
.galerie-item.bild-platzhalter small { overflow-wrap: anywhere; }
.galerie-item--hoch { grid-row: span 3; }
.galerie-item--breit { grid-column: span 2; grid-row: span 2; }
@media (max-width: 34rem) {
  .galerie-item--breit { grid-column: span 1; }
  .galerie { grid-auto-rows: 7rem; }
}
.galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s var(--ease); }
.galerie-item:hover img { transform: scale(1.06); opacity: .82; }
.galerie-item figcaption {
  position: absolute; inset: auto 0 0; padding: 2.5rem .9rem .8rem;
  background: linear-gradient(180deg, rgba(43, 14, 5, 0) 0%, rgba(43, 14, 5, .12) 32%,
              rgba(43, 14, 5, .38) 58%, rgba(43, 14, 5, .66) 80%, rgba(43, 14, 5, .86) 100%);
  color: var(--papier); font-family: var(--f-util); font-size: var(--t-xs);
  text-align: left; opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.galerie-item:hover figcaption, .galerie-item:focus-visible figcaption { opacity: 1; transform: translateY(0); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 8, 3, .95);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.ist-offen { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 78svh; box-shadow: var(--schatten-l); border-radius: var(--radius); }
.lightbox-bu {
  color: rgba(246, 243, 240, .8); font-family: var(--f-util); font-size: var(--t-xs);
  text-align: center; margin-top: 1rem;
}
.lightbox-zu, .lightbox-vor, .lightbox-zurueck {
  position: absolute; background: none; border: 1px solid rgba(246, 243, 240, .3);
  color: var(--papier); width: 46px; height: 46px; border-radius: 50%;
  cursor: pointer; display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.lightbox-zu:hover, .lightbox-vor:hover, .lightbox-zurueck:hover { background: rgba(255, 240, 232, .2); border-color: var(--hellgrau); }
.lightbox-zu { top: 1.25rem; right: 1.25rem; }
.lightbox-zurueck { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-vor { right: 1.25rem; top: 50%; transform: translateY(-50%); }

/* 13 Tageslauf, Register, Historienzitat ---------------------------------- */
.tageslauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tageslauf > li {
  display: grid; gap: .3rem 1.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linie);
}
.tageslauf > li:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 42rem) { .tageslauf > li { grid-template-columns: 8.5rem 1fr; } }
.tageslauf-zeit {
  font-family: var(--f-display); font-size: var(--t-m); color: var(--rot);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.tageslauf-text { margin: 0; }
.section--dunkel .tageslauf > li { border-color: rgba(246, 243, 240, .16); }
.section--dunkel .tageslauf-zeit { color: var(--hellgrau); }

/* Abgabenregister mit Punktlinie, wie im alten Kataster */
.register { list-style: none; margin: 0; padding: 0; font-family: var(--f-util); font-size: var(--t-xs); }
.register li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px dotted var(--linie);
}
.register li::after {
  content: ""; flex: 1; order: 1;
  border-bottom: 1px dotted var(--linie);
  transform: translateY(-.25em);
}
.register .register-wert { order: 2; flex: none; color: var(--rot); font-weight: 600; }
.section--dunkel .register li { border-color: rgba(246, 243, 240, .2); }
.section--dunkel .register li::after { border-color: rgba(246, 243, 240, .2); }
.section--dunkel .register .register-wert { color: var(--hellgrau); }

.historien-zitat {
  margin: 0; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  border-left: 3px solid var(--rot);
  background: var(--weiss);
  font-family: var(--f-display); font-size: var(--t-m); line-height: 1.55; font-style: italic;
}
.historien-zitat cite {
  display: block; margin-top: .9rem;
  font-family: var(--f-util); font-size: var(--t-label); font-style: normal;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-70);
}
.section--dunkel .historien-zitat {
  background: rgba(246, 243, 240, .06); border-left-color: var(--hellgrau); color: var(--papier);
}
.section--dunkel .historien-zitat cite { color: rgba(246, 243, 240, .6); }

/* Sprungmarken innerhalb einer langen Seite */
.sprungleiste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sprungleiste a {
  display: inline-block; padding: .5rem 1rem;
  border: 1px solid var(--linie); border-radius: 100px;
  font-family: var(--f-util); font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--tinte); text-decoration: none;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.sprungleiste a:hover { background: var(--rot); border-color: var(--rot); color: var(--weiss); }

/* Bildpaar nebeneinander */
.bildpaar { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.bildpaar figure { margin: 0; }
.bildpaar img { width: 100%; border-radius: var(--radius); box-shadow: var(--schatten); }
.bildpaar figcaption {
  font-family: var(--f-util); font-size: var(--t-xs); color: var(--tinte-70); margin-top: .6rem;
}
.section--dunkel .bildpaar figcaption { color: rgba(246, 243, 240, .7); }

/* Anker sauber unter dem festen Kopf anspringen */
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* 14 Formular --------------------------------------------------------------
   Eng gesetzt: ein Formular soll überschaubar wirken, nicht endlos. Verwandte
   Felder stehen deshalb nebeneinander, und die Fehlerzeile belegt erst dann
   Platz, wenn wirklich ein Fehler da ist.
   -------------------------------------------------------------------------- */
.formular { display: grid; gap: .85rem; max-width: 38rem; }
.feld-reihe { display: grid; gap: .85rem; }
@media (min-width: 34rem) {
  .feld-reihe--2 { grid-template-columns: 1fr 1fr; gap: .85rem 1rem; }
  .feld-reihe--schmal { grid-template-columns: 2fr 1fr; gap: .85rem 1rem; }
}
.feld { display: grid; gap: .28rem; align-content: start; }
.feld label, .feld legend {
  font-family: var(--f-util); font-size: var(--t-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-70);
}
.feld input, .feld select, .feld textarea {
  font-family: var(--f-text); font-size: 1rem; color: var(--tinte);
  padding: .62rem .8rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  width: 100%;
}
.feld textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  border-color: var(--rot); box-shadow: 0 0 0 3px rgba(127, 0, 0, .1); outline: none;
}
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] { border-color: var(--rot-hell); background: #fff6f4; }
.feld.hat-fehler > label { color: var(--rot); }
.feld-hinweis {
  font-family: var(--f-util); font-size: .8125rem; line-height: 1.5;
  color: var(--tinte-70); margin: .1rem 0 0;
}
.feld-fehler { font-family: var(--f-util); font-size: .8125rem; color: var(--rot-hell); margin: .1rem 0 0; }
/* Leere Fehlerzeilen belegen keinen Platz – sonst summieren sich über acht
   Felder rund 160 Pixel Leerraum, die das Formular auseinanderziehen. */
.feld-fehler:empty { display: none; }
.feld--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.feld--check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--rot); }
.feld--check label { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 400; line-height: 1.5; }
.formular-datenschutz { font-family: var(--f-util); font-size: .9375rem; line-height: 1.5; color: var(--tinte-70); margin: 0; }
.pflicht-hinweis { font-family: var(--f-util); font-size: .8125rem; color: var(--tinte-70); margin: .2rem 0 0; }
.formular .btn { justify-self: start; margin-top: .35rem; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-family: var(--f-util); font-size: var(--t-xs); padding: .9rem 1.1rem; border-radius: var(--radius); display: none; }
.form-status.ist-sichtbar { display: block; }
.form-status--ok { background: #edf6ee; border: 1px solid #b8d8bd; color: #1f5128; }
.form-status--fehler { background: #fdf0ee; border: 1px solid #e6bdb6; color: #7f2318; }
.form-status--laeuft {
  display: flex; align-items: center; gap: .6rem;
  background: var(--papier-2); border: 1px solid var(--linie); color: var(--tinte-70);
}
.form-status--laeuft::before {
  content: ""; width: .95em; height: .95em; flex: none;
  border: 2px solid rgba(127, 0, 0, .22); border-top-color: var(--rot); border-radius: 50%;
  animation: versandDreht .7s linear infinite;
}
@keyframes versandDreht { to { transform: rotate(360deg); } }
.btn.ist-beschaeftigt { opacity: .65; cursor: progress; }

/* Bestätigung nach dem Versand – bewusst gebaut wie der Kopf der
   Bestätigungsmail, damit Seite und Postfach zusammengehören. */
.versand-erfolg {
  margin-top: 1.5rem; padding: 2.4rem 2rem 2rem;
  background: var(--weiss);
  border: 1px solid var(--linie); border-top: 3px solid var(--rot);
  border-radius: var(--radius);
  text-align: center; outline: none;
}
.versand-erfolg:focus-visible { box-shadow: 0 0 0 3px rgba(127, 0, 0, .25); }
.versand-erfolg__titel { margin: 1.1rem 0 .5rem; font-size: var(--t-l); color: var(--rotbraun); }
.versand-erfolg__text { max-width: 46ch; margin: 0 auto; color: var(--tinte-70); }
.versand-erfolg__fuss { margin: 1.75rem 0 0; }

.versand-haken {
  width: 68px; height: 68px; display: block; margin: 0 auto;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.versand-haken__kreis {
  stroke: var(--rot); stroke-width: 1.5; opacity: .35;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: versandKreis .55s ease-out forwards;
}
.versand-haken__strich {
  stroke: var(--rot); stroke-width: 3;
  stroke-dasharray: 44; stroke-dashoffset: 44;
  animation: versandStrich .38s .42s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes versandKreis  { to { stroke-dashoffset: 0; } }
@keyframes versandStrich { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .versand-haken__kreis, .versand-haken__strich { animation: none; stroke-dashoffset: 0; }
  .form-status--laeuft::before { animation-duration: 2s; }
}
@media (max-width: 40rem) {
  .versand-erfolg { padding: 2rem 1.25rem 1.5rem; }
}

.kontakt-daten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.kontakt-daten a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 240, 232, .5); }
.kontakt-daten a:hover { color: var(--hellgrau-2); }

/* 15 Modal ----------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 8, 3, .8);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.modal.ist-offen { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--papier); width: min(100%, 52rem); max-height: 86svh;
  overflow-y: auto; border-radius: var(--radius-l);
  box-shadow: var(--schatten-l); position: relative;
  padding: clamp(1.75rem, 4vw, 3rem);
  transform: translateY(10px); transition: transform .3s var(--ease);
}
.modal.ist-offen .modal-box { transform: translateY(0); }
.modal-box h2, .modal-box h3 { font-size: var(--t-m); margin-top: 1.6rem; }
#rechtstext h2 { font-size: var(--t-l); }
.modal-zu {
  position: sticky; top: 0; float: right;
  background: var(--papier); border: 1px solid var(--linie); color: var(--tinte);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1;
}
.modal-zu:hover { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.modal-laedt { font-family: var(--f-util); font-size: var(--t-xs); color: var(--tinte-70); }

/* 16 Footer ---------------------------------------------------------------- */
/* Heller Footer: Rot (--rot) hat auf --papier-2 etwa 8,9:1 Kontrast, auf dem
   früheren Grau (#4b4947) nur etwa 1,3:1 und wäre unlesbar. */
.fuss { background: var(--papier-2); color: var(--tinte); border-top: 1px solid var(--linie); padding-block: clamp(3rem, 6vw, 5rem) 2rem; position: relative; isolation: isolate; }
/* Handy: Adresse über die volle Breite, darunter Events und Hof & Fleisch nebeneinander */
.fuss-oben { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 3.5rem) 1.25rem; }
.fuss-oben > :first-child { grid-column: 1 / -1; }
/* Handy: Feiern links, Rindfleisch und Über uns rechts untereinander (Kundenwunsch 31.10.2026) */
.fuss-oben > :nth-child(2) { grid-row: span 2; }
@media (min-width: 60rem) {
  .fuss-oben { grid-template-columns: 1.3fr 1fr 1fr 1fr; column-gap: clamp(2rem, 4vw, 3rem); }
  .fuss-oben > :first-child { grid-column: auto; }
  .fuss-oben > :nth-child(2) { grid-row: auto; }
}
.fuss h2, .fuss h3 { color: var(--rotbraun); }
.fuss .fuss-titel, .fuss h3 { font-family: var(--f-util); font-size: var(--t-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-70); margin-bottom: 1rem; }
.fuss-marke img { width: 210px; margin-bottom: 1.1rem; }
.fuss address { font-style: normal; line-height: 1.8; }
.fuss a:not(.social-btn) { color: var(--tinte); text-decoration: none; }
.fuss a:not(.social-btn):hover { color: var(--rot); }
/* Telefon und E-Mail in Rot, wie vom Kunden gewünscht */
.fuss address a:not(.social-btn) { color: var(--rot); text-decoration: underline; text-decoration-color: rgba(127, 0, 0, .35); text-underline-offset: .2em; }
.fuss address a:not(.social-btn):hover { color: var(--rot-hell); text-decoration-color: currentColor; }
.fuss-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-family: var(--f-util); font-size: var(--t-xs); }
.social-reihe { display: flex; gap: .75rem; margin-top: 1.25rem; }
.social-btn {
  width: 44px; height: 44px; border: 1px solid rgba(127, 0, 0, .4); border-radius: 50%;
  display: grid; place-items: center; color: var(--rot);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.social-btn:hover { background: var(--rot); border-color: var(--rot); color: var(--weiss); transform: translateY(-2px); }
.social-btn svg { width: 20px; height: 20px; fill: currentColor; }
.fuss-unten {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
  font-family: var(--f-util); font-size: var(--t-xs); color: var(--tinte-70);
}
.fuss-unten p { margin: 0; }
.fuss-credit a { color: var(--tinte-70); text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss-credit a:hover { color: var(--rot); border-color: var(--rot); }
.fuss-rechtlich { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss-rechtlich a, .fuss-rechtlich button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-util); font-size: var(--t-xs); color: var(--tinte); text-decoration: none;
}
.fuss-rechtlich a:hover, .fuss-rechtlich button:hover { color: var(--rot); }

/* 17 Hilfsklassen, Animation, Print ---------------------------------------- */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.zentriert { text-align: center; }
.mt-l { margin-top: clamp(2rem, 4vw, 3rem); }

/* Abschnitte werden beim Scrollen eingeblendet. */
.zeig { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.zeig.ist-sichtbar { opacity: 1; transform: none; }

/* Kacheln einer Reihe laufen nacheinander ein. Der Verzug kommt aus main.js,
   damit die Reihenfolge auch bei wechselnder Anzahl stimmt. */
.zeig-kind {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--verzug, 0ms);
}
.ist-sichtbar .zeig-kind,
.ist-sichtbar.zeig-kind { opacity: 1; transform: none; }
/* Zahlen beim Hochzählen: feste Ziffernbreite, sonst zappelt die Kachel */
.fakt-zahl { font-variant-numeric: tabular-nums; }

/* Karten heben sich beim Überfahren leicht – nur wo ein Ziel dahintersteckt */
a.karte:hover .karte-bild img,
a.saeule:hover img { transform: scale(1.045); }
a.karte .karte-bild img,
a.saeule img { transition: transform .6s var(--ease); }

/* Buttons: der Schein wandert einmal durch, wenn man draufzeigt */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .zeig, .zeig-kind { opacity: 1; transform: none; transition: none; }
  .btn::before { display: none; }
  a.karte:hover .karte-bild img, a.saeule:hover img { transform: none; }
  .hero-bild { animation: none; transform: none; }
}

/* Druckausgabe --------------------------------------------------------------
   Wer eine Seite ausdruckt, will sie weitergeben – an Eltern, Caterer, DJ.
   Deshalb: Bedienelemente weg, dunkle Flächen auf Weiß (Toner), Adresse und
   Telefonnummer sichtbar, und Blöcke nicht mitten durchgeschnitten.
   -------------------------------------------------------------------------- */
@media print {
  .kopf, .hero-runter, .nav-schalter, .lightbox, .modal, .social-reihe,
  .hero-bild, .kopf-cta, .btn, .zurueck-oben, .form-status, .aktionsleiste { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .section--dunkel, .fuss, .faktenband, .hero {
    background: #fff !important; color: #000 !important;
  }
  .section--dunkel *, .fuss *, .faktenband *, .hero * { color: #000 !important; }
  .section--dunkel::before, .section--dunkel::after,
  .hero::before, .hero::after, .lichtschein::after { display: none !important; }

  /* Alles einblenden, was sonst erst beim Scrollen erscheint */
  .zeig, .zeig-kind { opacity: 1 !important; transform: none !important; }

  /* Abstände zusammenziehen, sonst braucht eine Seite fünf Blatt */
  .section { padding-block: 1.2rem !important; }
  .hero, .hero--klein {
    min-height: 0 !important; height: auto !important;
    padding-block: 0 1rem !important; display: block !important;
  }
  .hero-inhalt { max-width: none !important; }
  h1 { font-size: 20pt } h2 { font-size: 15pt } h3 { font-size: 12pt }

  /* Nicht mitten durchschneiden */
  .karte, .partner-karte, .bild-kachel, .duo, .faq-eintrag,
  .bewertung, .termine li, figure, table { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }

  /* Bilder klein halten – Toner ist teuer und niemand braucht Vollformat */
  img { max-height: 6cm; width: auto !important; }

  /* Adresse eines Links mitgeben, sonst ist ein Ausdruck eine Sackgasse */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  a[href^="#"]::after, a[href^="mailto"]::after, a[href^="tel"]::after { content: ""; }

  /* Kopfzeile nur im Ausdruck: wer den Zettel weitergibt, hat die Quelle dabei */
  main::before {
    content: "Schulzes Hof · Beckendorfstraße 114 · 33739 Bielefeld-Jöllenbeck · "
             "Telefon 05206 6946 · www.schulzes-hof.de";
    display: block; padding-bottom: .6rem; margin-bottom: 1rem;
    border-bottom: 1px solid #999;
    font-size: 9pt; letter-spacing: .02em;
  }

  @page { margin: 16mm 14mm; }
}

.einwilligung-ausweich {
  margin: .75rem 0 0; text-align: center;
}
.einwilligung-ausweich .btn { display: inline-block; }

/* 18 Bildkacheln und Partnerkacheln --------------------------------------
   Für Bilderreihen außerhalb der Lightbox-Galerie. Die Unterschrift steht
   unter dem Bild statt darüber – hier soll gelesen und nicht geklickt werden.
   -------------------------------------------------------------------------- */

.bild-kachel { margin: 0; }
.bild-kachel img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--linie);
}
.bild-kachel figcaption {
  margin-top: .55rem;
  font-family: var(--f-util); font-size: var(--t-xs);
  letter-spacing: .04em; color: var(--tinte-70);
}
.section--dunkel .bild-kachel figcaption { color: rgba(246, 243, 240, .72); }
/* Bildkarte ohne Foto im Livegang: ruhige Fläche mit Symbol statt einer Lücke */
.bild-kachel-ikon { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--papier-2);
  border: 1px solid var(--linie); border-radius: var(--radius); color: var(--rotbraun); }
.bild-kachel-ikon svg { width: 4.5rem; height: 4.5rem; opacity: .75; }
.bild-kachel.bild-platzhalter figcaption { margin-top: .4rem; }

/* Breites Band für Panoramabilder */
.breitband { margin: 0; }
.breitband img {
  width: 100%; aspect-ratio: 3.1 / 1; object-fit: cover; display: block;
  border-radius: var(--radius);
}

/* Partner als Visitenkarten: Logo, Name, Telefon, E-Mail, Website */
.visitenkarten { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.visitenkarte {
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius-l);
  padding: 1.25rem 1.35rem 1.35rem; box-shadow: 0 10px 30px -22px rgba(43, 14, 5, .45);
}
.vk-logo { height: 5.5rem; display: flex; align-items: center; justify-content: center; padding-bottom: 1rem; border-bottom: 1px solid var(--linie); }
.vk-logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.vk-logo--leer span {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--papier-2); color: var(--rotbraun); font-family: var(--f-display); font-weight: 700; font-size: 1.2rem;
}
.vk-text h3 { margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.3; color: var(--rotbraun); }
.vk-kontakt { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .95rem; }
.vk-kontakt li { display: grid; grid-template-columns: 4.2rem 1fr; gap: .5rem; align-items: baseline; }
.vk-art { font-family: var(--f-util); font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-70); }
.vk-kontakt a { color: var(--rot); text-decoration: none; border-bottom: 1px solid rgba(127, 0, 0, .3); overflow-wrap: anywhere; justify-self: start; }
.vk-kontakt a:hover { border-bottom-color: var(--rot); }
.partner-abschnitt .lead { max-width: 46rem; }

.partner-gruppe { margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; font-size: var(--t-m); color: var(--rotbraun); }
.partner-gruppe + .visitenkarten { margin-top: 1rem; }
.partner-label {
  display: inline-block; margin: 0 0 1rem; padding: .3rem .8rem;
  border: 1px solid var(--rot); border-radius: var(--radius-btn); color: var(--rot);
  font-family: var(--f-util); font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* Partnerkacheln --------------------------------------------------------
   Die Partnerfotos stammen von der alten Website und sind nur 410 px breit.
   Deshalb bleiben die Kacheln bewusst schmal: eine Spalte wird nie breiter
   als das Bild, sonst wird es hochgerechnet und sieht matschig aus.
   -------------------------------------------------------------------------- */

.partner-raster {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.partner-karte {
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease);
}
.partner-karte:hover {
  border-color: var(--rot); box-shadow: var(--schatten); transform: translateY(-3px);
}
.partner-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--papier-2); }
.partner-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Ohne Foto: kein grauer Kasten, sondern das Fachwerkmuster in gedeckt */
.partner-bild--leer {
  aspect-ratio: 5 / 1;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(90deg, var(--linie) 0 1px, transparent 1px 3.5rem),
    var(--papier-2);
  border-bottom: 1px solid var(--linie);
}
/* Beschriftet, damit die Fläche nicht wie ein kaputtes Bild wirkt */
.partner-bild--leer::after { content: none; }

.partner-text { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.partner-text h3 { font-size: 1.25rem; line-height: 1.3; margin: 0; color: var(--rotbraun); }
.partner-ort {
  font-family: var(--f-util); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-70);
  margin: .3rem 0 0;
}
.partner-text > p:not(.partner-ort) { margin: .7rem 0 0; font-size: .95rem; line-height: 1.7; }
.partner-link { margin-top: auto; padding-top: 1rem; }

/* Musikkacheln: die Bandfotos sind nur 270–307 px breit. Ein engeres Raster
   hält die Anzeigebreite darunter, statt sie hochzurechnen. */
.partner-raster--eng { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
/* 4:3 statt 3:2 – bei den fast quadratischen Porträts wird sonst der Kopf
   angeschnitten. */
.partner-raster--eng .partner-bild { aspect-ratio: 4 / 3; }

.partner-tel { margin: .55rem 0 0; font-family: var(--f-util); font-size: .875rem; }
.partner-tel a { color: var(--rot); text-decoration: none; border-bottom: 1px solid rgba(127,0,0,.3); }
.partner-tel a:hover { border-bottom-color: var(--rot); }

@media (max-width: 40rem) {
  .partner-raster { grid-template-columns: 1fr; }
  .partner-raster--eng { grid-template-columns: 1fr 1fr; }
}


/* 19 Nachträge -------------------------------------------------------------
   Gewachsen, nicht geplant. Die Regeln hier gehören thematisch in die
   Abschnitte 04 bis 12, stehen aber am Ende, weil sie später dazukamen und
   die Kaskade sie dort braucht. Beim Verschieben ändert sich die Wirkung.
   -------------------------------------------------------------------------- */
.pflicht { color: var(--rot); }
.section--dunkel .pflicht { color: var(--hellgrau-2); }

/* Zwei-Säulen-Block auf der Startseite */
.saeule {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 26rem; padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius-l); overflow: hidden; isolation: isolate;
  color: var(--weiss); text-decoration: none;
}
.saeule img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.saeule::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(43, 14, 5, .22) 0%, rgba(43, 14, 5, .40) 30%,
              rgba(43, 14, 5, .62) 52%, rgba(43, 14, 5, .80) 70%, rgba(43, 14, 5, .90) 88%,
              rgba(43, 14, 5, .94) 100%);
}
.saeule:hover img { transform: scale(1.05); }
.saeule:hover { color: var(--weiss); }
.saeule h3 { color: var(--weiss); margin-bottom: .5rem; }
.saeule p { color: rgba(255, 255, 255, .84); margin-bottom: 1.25rem; }
.saeule-nummer {
  font-family: var(--f-display); font-size: var(--t-xs); letter-spacing: .24em;
  text-transform: uppercase; color: var(--hellgrau-2); margin-bottom: auto;
}

/* FAQ als Aufklapper */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative; font-size: var(--t-m); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.6rem;
  width: .7rem; height: .7rem;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }
.faq summary:hover { color: var(--rot); }
.faq-antwort { padding: 0 0 1.4rem; color: var(--tinte-70); }
.section--dunkel .faq, .section--dunkel .faq details { border-color: rgba(246, 243, 240, .2); }
.section--dunkel .faq summary::after { border-color: var(--hellgrau-2); }
.section--dunkel .faq-antwort { color: rgba(246, 243, 240, .78); }

/* Paketkarten für den Fleischverkauf */
.paket {
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
}
.paket-groesse {
  font-family: var(--f-display); font-size: var(--t-l); color: var(--rot); line-height: 1;
}
.paket h3 { margin: 0; font-size: var(--t-m); }
.paket p { margin: 0; color: var(--tinte-70); }
.paket ul { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--tinte-70); font-size: var(--t-xs); }

.feld--fieldset { border: 0; padding: 0; margin: 0; }
.check-liste { display: grid; gap: .55rem; margin-top: .7rem; }
.check-liste .feld--check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.check-liste .feld--check label {
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--t-xs); line-height: 1.5; color: var(--tinte);
}
.check-liste input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--rot); }

/* 20 Rundgang, Verkaufstermine, Bewertungen, Ausstattung ------------------ */

/* Einwilligung vor dem Laden externer Inhalte */
.einwilligung {
  position: relative; display: grid; place-items: center;
  min-height: 22rem; padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--dunkel); color: var(--weiss);
  border-radius: var(--radius-l); overflow: hidden; text-align: center;
}
.einwilligung::before {
  content: ""; position: absolute; inset: 0;
  background: var(--fachwerk-hell); background-size: 72px 18px; opacity: .1;
}
.einwilligung-inhalt { position: relative; max-width: 34rem; }
.einwilligung h2 { color: var(--weiss); }
.einwilligung p { color: rgba(246, 243, 240, .8); }
.einwilligung a { color: var(--hellgrau-2); }
.einwilligung .btn-reihe { justify-content: center; }
.einwilligung iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: var(--radius); }
.einwilligung.ist-geladen { min-height: 0; padding: 0; background: none; }
.einwilligung.ist-geladen::before { display: none; }

/* Verkaufstermine */
.termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.termine li {
  display: grid; gap: .3rem 1.5rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--linie);
}
@media (min-width: 44rem) { .termine li { grid-template-columns: 12rem 1fr auto; } }
.termin-datum { font-size: var(--t-m); color: var(--rot); }
.termin-text { color: var(--tinte-70); }
.status {
  justify-self: start; padding: .3rem .9rem; border-radius: var(--radius-btn);
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.status--frei { background: #e7f1e8; color: #245c2d; border: 1px solid #b9d7bd; }
.status--knapp { background: #fdf3e3; color: #7a5310; border: 1px solid #e3cfa4; }
.status--ausgebucht { background: var(--papier-2); color: var(--tinte-70); border: 1px solid var(--linie); }

/* Faktenband auch auf hellem Grund verwendbar */
.faktenband-liste--hell { background: var(--linie); border: 1px solid var(--linie); }
.faktenband-liste--hell li { background: var(--weiss); }
.faktenband-liste--hell .fakt-zahl { color: var(--rot); }
.faktenband-liste--hell .fakt-text { color: var(--tinte-70); }

/* Bewertungen */
.bewertungen-intro {
  display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: end;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.bewertungen-intro .section-kopf { margin-bottom: 0; }
@media (min-width: 52rem) {
  .bewertungen-intro { grid-template-columns: minmax(0, 1fr) auto; }
}
.bewertung-summe {
  min-width: 15rem; padding: 1rem 0 1rem clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--rot); display: grid; justify-items: start; gap: .25rem;
}
.bewertung-zahl {
  font-size: clamp(3.5rem, 7vw, 5.75rem); line-height: .85;
  color: var(--rotbraun); font-variant-numeric: tabular-nums;
}
.bewertung-summe .sterne { font-size: 1.25rem; }
.bewertung-anzahl { color: var(--tinte-70); font-size: var(--t-xs); }
.bewertungen-raster {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .bewertungen-raster { grid-template-columns: repeat(2, 1fr); }
  .bewertung--hervorgehoben { grid-column: 1 / -1; }
}
.bewertung {
  margin: 0; /* <figure> bringt sonst 40 px Rand links und rechts mit */
  display: flex; flex-direction: column; gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
}
.sterne { color: var(--rot); letter-spacing: .18em; font-size: 1.1rem; line-height: 1; }
.bewertungen-google .sterne { color: #f4b400; } /* Wiedererkennungsfarbe der Google-Sterne */
.bewertung blockquote { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; }
.bewertung figcaption { display: grid; gap: .2rem; margin-top: auto; font-size: var(--t-xs); }
.bewertung figcaption strong { color: var(--rotbraun); }
.bewertung figcaption strong a { color: inherit; text-decoration: none; }
.bewertung figcaption strong a:hover { text-decoration: underline; }
.bewertung figcaption .bewertung-link {
  margin-top: .35rem; width: fit-content; color: var(--rot);
  text-decoration: underline; text-decoration-color: rgba(127, 0, 0, .35); text-underline-offset: .2em;
}
.bewertung figcaption .bewertung-link:hover { text-decoration-color: currentColor; }
.bewertung figcaption span { color: var(--tinte-70); }
@media (min-width: 64rem) {
  .bewertungen-raster { grid-template-columns: repeat(3, 1fr); }
  .bewertung--hervorgehoben {
    grid-column: span 2; justify-content: center;
    background: var(--dunkel); color: var(--papier); border-color: var(--dunkel);
  }
  .bewertung--hervorgehoben blockquote { font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.5; }
  .bewertung--hervorgehoben figcaption strong { color: var(--weiss); }
  .bewertung--hervorgehoben figcaption span { color: rgba(246, 243, 240, .7); }
  .bewertung--hervorgehoben figcaption .bewertung-link { color: var(--papier); text-decoration-color: rgba(246, 243, 240, .45); }
}
.bewertungen-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; margin-top: 1.5rem;
}

.bewertungen-aktionen { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; }
.bewertungen-knoepfe { display: grid; gap: .75rem; }
.bewertungen-knoepfe .btn { text-align: center; justify-content: center; }
/* QR-Code: Kachel auf Weiß, damit die Ruhezone erhalten bleibt und der Code zuverlässig scannt */
.qr-kachel {
  display: grid; justify-items: center; gap: .4rem; padding: .75rem .75rem .6rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--tinte-70); text-decoration: none; text-align: center;
  font-family: var(--f-util); font-size: var(--t-xs);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.qr-kachel img { display: block; width: 7.5rem; height: auto; }
.qr-kachel:hover { border-color: var(--rot); color: var(--rot); }
/* Handy: kein QR-Code, nur drei Bewertungen (Kundenwunsch 31.10.2026). Steht hier, weil die Grundregel oben sonst gewinnt */
@media (max-width: 600px) {
  .qr-kachel { display: none; }
  .bewertungen-raster > .bewertung:nth-child(n+4) { display: none; }
}

/* Sichtbare Redaktionsplatzhalter: bewusst ruhig, aber eindeutig. */
.platzhalter-inline {
  display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: baseline;
  margin-top: .8rem; padding: .65rem .8rem;
  border-left: 3px solid #b88a3b; background: rgba(184, 138, 59, .1);
  color: var(--tinte-70); font-family: var(--f-util); font-size: var(--t-xs); line-height: 1.5;
}
.platzhalter-inline strong {
  color: #76531b; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}
.section--dunkel .platzhalter-inline {
  background: rgba(255, 224, 168, .09); border-left-color: #d4aa62; color: rgba(246, 243, 240, .8);
}
.section--dunkel .platzhalter-inline strong { color: #efd39d; }

.bild-platzhalter {
  display: grid; place-items: center; align-content: center; gap: .45rem; padding: 1.25rem;
  min-height: 11rem; text-align: center;
  background:
    linear-gradient(135deg, rgba(122, 30, 0, .08), rgba(75, 73, 71, .04)),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(122, 30, 0, .045) 12px 13px),
    var(--papier-2);
  color: var(--rotbraun);
}
.bild-platzhalter > span {
  font-family: var(--f-util); font-size: var(--t-label); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.bild-platzhalter > small { max-width: 30rem; color: var(--tinte-70); line-height: 1.5; }
.bild-platzhalter--breit {
  min-height: clamp(12rem, 28vw, 21rem); margin-bottom: clamp(2rem, 4vw, 3rem);
  border: 1px dashed var(--linie); border-radius: var(--radius);
}
.bild-platzhalter--gruppe { min-height: 17rem; border-radius: var(--radius); }
.karte-bild.bild-platzhalter { aspect-ratio: 4 / 3; }
.partner-bild.bild-platzhalter { min-height: 6rem; }

/* Instagram-Kacheln unter der Galerie: Bild und Link, ohne Skript und ohne Verbindung zu Meta */
.galerie-unterzeile { margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem; font-size: var(--t-m); }
.instagram-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 52rem) { .instagram-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.instagram-kachel {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius);
  color: var(--weiss); text-decoration: none; background: var(--dunkel-2);
}
.instagram-kachel img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), opacity .3s var(--ease);
}
/* Hochformat wie bei Reels: Der Beitrag soll ganz zu sehen sein. Fotos im Quadrat oder Querformat stehen ganz im Bild,
   den Rest der Kachel füllt eine unscharfe Kopie desselben Bildes. */
.instagram-kachel .instagram-ganz { object-fit: contain; }
.instagram-kachel .instagram-unscharf { filter: blur(14px) brightness(.75); transform: scale(1.2); }
.instagram-kachel:hover img:not(.instagram-unscharf) { transform: scale(1.05); opacity: .85; }
.instagram-kachel.bild-platzhalter { min-height: 0; color: var(--rotbraun); }
.instagram-kachel.bild-platzhalter span { font-size: .66rem; letter-spacing: .06em; overflow-wrap: anywhere; }

/* Instagram als Beitragskarte (Kundendokument 28.10.2026): Kopf mit Konto und Datum, Bild, Zahlen, Text, Link */
.ig-karte { display: flex; flex-direction: column; min-width: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.ig-kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; }
.ig-avatar { flex: none; width: 36px; height: 36px; padding: 3px; border: 1px solid var(--linie); border-radius: 50%; background: var(--papier); }
.ig-wer { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ig-wer strong { font-family: var(--f-util); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-wer time { font-family: var(--f-util); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-70); }
.ig-symbol { flex: none; width: 20px; height: 20px; margin-left: auto; fill: var(--rotbraun); }
.ig-karte .instagram-kachel { border-radius: 0; }
.ig-fuss { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: .75rem .85rem 1rem; }
.ig-zahlen { display: flex; gap: 1rem; margin: 0; font-family: var(--f-util); font-size: .9rem; color: var(--tinte); }
.ig-zahlen span { display: inline-flex; align-items: center; gap: .3rem; }
.ig-zahlen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ig-text { margin: 0; font-size: .95rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.ig-mehr { margin-top: auto; font-family: var(--f-util); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rot); text-decoration: none; }
.ig-mehr:hover { text-decoration: underline; }
@media (max-width: 34rem) {
  .ig-kopf { gap: .45rem; padding: .55rem .6rem; }
  .ig-avatar { width: 28px; height: 28px; padding: 2px; }
  .ig-symbol { display: none; }
  .ig-fuss { padding: .6rem .65rem .8rem; }
  .ig-text { font-size: .875rem; -webkit-line-clamp: 3; }
  .ig-mehr { font-size: .8125rem; letter-spacing: .01em; text-transform: none; }
}

/* Aktuelles: Kachel mit Bild, Marke, Inhalt, Preis und Knopf */
.aktuell-karte {
  display: grid; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
}
/* Das Bild wird nie beschnitten (Kundenwunsch: alle Fleischstücke sichtbar). Die Bildspalte ist breiter, damit das
   breite Foto etwa so hoch wird wie der Text; ist der Text höher, steht das Bild mittig auf hellem Grund. */
@media (min-width: 52rem) { .aktuell-karte { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.aktuell-bild { position: relative; overflow: hidden; display: flex; align-items: center; background: var(--dunkel-2); }
.aktuell-bild img { position: relative; width: 100%; height: auto; }
/* Unscharfe Kopie füllt die Fläche über und unter dem ganzen Bild (wie bei den Instagram-Kacheln) */
.aktuell-bild .aktuell-bild-hinten {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  filter: blur(16px) brightness(.85); transform: scale(1.2);
}
.aktuell-text { padding: clamp(1.5rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; }
.aktuell-text h3 { margin: 0; font-size: var(--t-l); }
.aktuell-text p { margin: 0; }
.aktuell-marken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.aktuell-marken li {
  border: 1px solid var(--rot); color: var(--rot); border-radius: 999px; padding: .2rem .85rem;
  font-family: var(--f-util); font-size: var(--t-xs); letter-spacing: .04em;
}
.aktuell-inhalt { color: var(--tinte-70); }
.aktuell-preis { font-family: var(--f-display); font-size: clamp(2.1rem, 4.2vw, 3rem); line-height: 1; color: var(--rot); }
.verkaufstermine { margin-top: 1.5rem; }
.verkaufstermine h3 { font-size: var(--t-m); margin: 0 0 .8rem; color: var(--rot); }
.verkaufstermine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.verkaufstermine li { background: var(--weiss); border: 1px solid var(--rot); border-radius: var(--radius-btn);
  padding: .55rem .8rem; text-align: center; font-weight: 700; font-size: 1.05rem; color: var(--tinte); white-space: nowrap; }
.verkaufstermine li span { color: var(--rot); font-weight: 400; }
.aktuell-termine { font-size: var(--t-xs); color: var(--tinte-70); line-height: 1.7; }
.aktuell-preis span { font-family: var(--f-util); font-size: .42em; color: var(--tinte-70); letter-spacing: .02em; }

/* Die Portion auf der Rindfleisch-Seite: gleiche Bausteine wie die Aktuelles-Kachel */
.portion-info { display: flex; flex-direction: column; gap: .9rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.portion-info h3 { margin: 0; font-size: var(--t-l); }
.portion-info p { margin: 0; }

/* Hochzeit: Zeitstrahl, Programmpunkte abwechselnd links und rechts (am Handy untereinander, Linie links) */
.zeitstrahl { --versatz: 15rem; list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; position: relative; }
.zeitstrahl::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.1rem; width: 2px; background: var(--linie); }
.zeitstrahl > li { position: relative; padding-left: 3.4rem; }
.zeitstrahl > li + li { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.zeitstrahl-nr {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--rot); color: var(--weiss);
  display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 5px var(--papier);
}
.zeitstrahl-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.zeitstrahl-bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--papier-2); }
.zeitstrahl-bild img { width: 100%; height: 100%; object-fit: cover; }
.zeitstrahl-text { padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.zeitstrahl-text h3 { margin: 0; font-size: var(--t-l); }
.zeitstrahl-unterzeile { margin: .35rem 0 .9rem; font-style: italic; color: var(--rot); }
.zeitstrahl-text > p { margin-top: 0; }
.zeitstrahl-text .btn-reihe { margin-top: 1.1rem; }
@media (min-width: 56rem) {
  .zeitstrahl::before { left: 50%; transform: translateX(-1px); }
  .zeitstrahl > li { width: 50%; padding: 0 3rem 0 0; }
  .zeitstrahl > li:nth-child(even) { margin-left: 50%; padding: 0 0 0 3rem; }
  /* Versetzt statt untereinander: Jede Karte beginnt, bevor die vorige auf der anderen Seite endet */
  .zeitstrahl > li + li { margin-top: calc(-1 * var(--versatz)); }
  .zeitstrahl-nr { left: auto; right: -1.125rem; top: 1.25rem; }
  .zeitstrahl > li:nth-child(even) .zeitstrahl-nr { right: auto; left: -1.125rem; }
}

/* Kontakt: rechte Spalte kompakt (Direkt erreichen, Kalender, Karte, Route), Anfahrt unter dem Formular */
.kontakt-spalte { display: grid; gap: 1.25rem; align-content: start; }
.kontakt-spalte > * { margin: 0 !important; }
.kontakt-kompakt { padding: 1.25rem 1.5rem; }
.kontakt-kompakt h3 { margin-bottom: .5rem; }
.kontakt-kompakt p { margin: 0; }
.kontakt-wege { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: .6rem !important; }
.kontakt-wege a { color: var(--rot); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(127, 0, 0, .35); }
.kontakt-route { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.kontakt-route .klein { color: var(--tinte-70); }
.karte-statisch { margin: 0; }
.karte-statisch a { display: block; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.karte-statisch img { width: 100%; height: auto; transition: opacity .3s var(--ease); }
.karte-statisch a:hover img { opacity: .9; }
.karte-statisch figcaption { margin-top: .4rem; font-size: .75rem; color: var(--tinte-70); }
.karte-statisch figcaption a { display: inline; border: 0; color: inherit; text-decoration: underline; }
.anfahrt-kompakt { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.5rem); border-top: 1px solid var(--linie);
  scroll-margin-top: calc(var(--header-h) + 1rem); }
.anfahrt-kompakt h2 { font-size: var(--t-l); margin: 0 0 .5rem; }
.anfahrt-wege { display: grid; gap: 1rem 1.5rem; margin-top: 1.25rem; }
@media (min-width: 40rem) { .anfahrt-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.anfahrt-wege h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.anfahrt-wege p { margin: 0; }
/* Anfahrt und Karte nebeneinander, darunter „Fleisch statt Feier?“ über die volle Breite */
#anfahrt { scroll-margin-top: calc(var(--header-h) + 1rem); }
.anfahrt-duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 60rem) { .anfahrt-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.anfahrt-duo h2 { font-size: var(--t-l); margin: 0 0 .5rem; }
.anfahrt-duo .anfahrt-wege { grid-template-columns: 1fr; }
.anfahrt-duo .kontakt-route { margin-top: 1rem; }
.fleisch-breit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem); }
.fleisch-breit h3 { margin-bottom: .4rem; }
/* Fleisch statt Feier im dunklen Rot (Kundenwunsch 31.10.2026) */
.fleisch-breit--dunkel { background: var(--dunkel); border-color: var(--dunkel); color: rgba(246, 243, 240, .85); }
.fleisch-breit--dunkel h3 { color: var(--weiss); }
.fleisch-breit--dunkel .eyebrow { color: var(--hellgrau); margin-bottom: .5rem; }
/* Satellitenkarte nach Klick */
.karte-laden { position: relative; }
.karte-laden img { display: block; width: 100%; height: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
.karte-laden-hinweis { position: absolute; inset: 0 0 1.6rem; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .6rem; padding: 1rem; text-align: center; background: rgba(246, 243, 240, .55); border-radius: var(--radius); }
.karte-laden-hinweis .klein { margin: 0; max-width: 30ch; background: rgba(255, 255, 255, .9); padding: .3rem .6rem; border-radius: 4px; }
.karte-laden iframe { display: block; width: 100%; aspect-ratio: 3 / 2; border: 1px solid var(--linie); border-radius: var(--radius); }
.fleisch-breit p { margin: 0; }
/* Besichtigungstermin: Datum und Uhrzeit unter einer gemeinsamen Beschriftung */
.feld-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.feld-gruppe legend { margin-bottom: .45rem; padding: 0; }
/* Abholtermine nebeneinander zum Anklicken */
.termin-wahl { border: 0; margin: 0; padding: 0; min-width: 0; }
.termin-wahl legend { margin-bottom: .55rem; padding: 0; }
.termin-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.termin-chip { position: relative; }
.feld .termin-chip { font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinte); }
.termin-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.termin-chip span { display: inline-block; padding: .55rem .9rem; border: 1px solid var(--linie); border-radius: var(--radius-btn);
  background: var(--weiss); font-family: var(--f-util); font-size: 1rem; color: var(--tinte); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.termin-chip:hover span { border-color: var(--rot); }
.termin-chip input:checked + span { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.termin-chip input:focus-visible + span { outline: 2px solid var(--rot); outline-offset: 2px; }
.termin-chip small { display: block; margin-top: .1rem; font-size: .8125rem; color: var(--tinte-70); }
.termin-chip input:checked + span small { color: rgba(255, 255, 255, .85); }
/* Ausgebucht: bleibt stehen, grau, Datum durchgestrichen, „ausgebucht“ in Rot (Knappheit sichtbar machen) */
.termin-chip--voll span { background: var(--papier-2); border-style: dashed; color: var(--tinte-70); }
.termin-chip--voll s { text-decoration-thickness: 1.5px; text-decoration-color: var(--tinte-70); }
.termin-chip--voll small { color: var(--rot); font-weight: 700; letter-spacing: .02em; }
/* Wenige Portionen: „nur noch X frei“ in Rot (ausgewählt bleibt es weiß auf Rot) */
.termin-chip small.knapp { color: var(--rot); font-weight: 700; letter-spacing: .02em; }
.termin-chip input:disabled { cursor: not-allowed; }
.termin-chip--voll:hover span { border-color: var(--linie); }

/* Belegungskalender (Kontakt): freie Tage weiß, gebuchte rot */
.belegkalender { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.belegkalender h3 { margin: 0 0 .75rem; }
.bk-kopf { display: grid; grid-template-columns: 2.25rem 1fr 2.25rem; align-items: center; text-align: center; margin-bottom: .6rem; }
.bk-kopf strong { font-family: var(--f-display); font-size: 1.1rem; }
.bk-kopf button { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss);
  color: var(--tinte); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.bk-kopf button:hover:not(:disabled) { border-color: var(--rot); color: var(--rot); }
.bk-kopf button:disabled { opacity: .35; cursor: default; }
.bk-tabelle { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.bk-tabelle th { font-family: var(--f-util); font-size: var(--t-label); letter-spacing: .06em; color: var(--tinte-70); font-weight: 400; padding: .2rem 0; }
.bk-tabelle td { text-align: center; padding: 0; height: 2.1rem; font-size: .9rem; border-radius: 3px; border: 1px solid var(--linie); background: var(--weiss); }
.bk-tabelle td.leer { border-color: transparent; background: transparent; }
.bk-tabelle td.vorbei { color: var(--hellgrau-2); border-color: var(--papier-2); }
.bk-tabelle td.belegt { background: var(--rot); border-color: var(--rot); color: var(--weiss); font-weight: 700; }
.belegkalender-legende { display: flex; gap: 1.25rem; margin: .75rem 0 0; font-size: var(--t-xs); color: var(--tinte-70); }
.belegkalender-legende span::before { content: ""; display: inline-block; width: .9rem; height: .9rem; margin-right: .4rem;
  vertical-align: -.1rem; border-radius: 2px; border: 1px solid var(--linie); background: var(--weiss); }
.belegkalender-legende .belegt::before { background: var(--rot); border-color: var(--rot); }
.belegkalender .platzhalter-inline { margin-top: .75rem; }

/* Location: Große Deele, Kleine Deele und Außenbereich nebeneinander */
.raum-raster { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 60rem) { .raum-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.raum-karte {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.raum-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papier-2); }
.raum-bild img { width: 100%; height: 100%; object-fit: cover; }
.raum-text { padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.raum-text h2, .raum-text h3 { margin: 0; font-size: var(--t-l); }
.raum-text h3 + p { margin-top: 1rem; }
.raum-label {
  display: inline-block; margin: 0 0 .75rem; padding: .25rem .75rem; border: 1px solid var(--rot); border-radius: var(--radius-btn);
  color: var(--rot); font-family: var(--f-util); font-size: var(--t-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.text-paar h2 { font-size: var(--t-l); margin: 0 0 .75rem; }
/* Knöpfe beider Spalten auf einer Höhe, auch wenn ein Text länger ist (Kundenwunsch 29.10.2026) */
.text-paar > div { display: flex; flex-direction: column; }
.text-paar > div > .btn-reihe { margin-top: auto; padding-top: clamp(2rem, 4vw, 3rem); }
/* Gleiche Schrift wie die Einleitungen der übrigen Abschnitte (Kundendokument 4: „gleiche Schriftart“) */
.text-paar p { margin: 0; font-size: var(--t-m); line-height: 1.6; color: var(--tinte-70); }
.raum-unterzeile {
  margin: .4rem 0 1rem; font-family: var(--f-util); font-size: var(--t-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--rot);
}
.raum-text > p:not(.raum-unterzeile) { margin: 0 0 1.25rem; color: var(--tinte-70); }
.raum-liste { list-style: none; margin: 0; padding: 0; }
.raum-liste li { position: relative; padding: .6rem 0 .6rem 1.4rem; border-top: 1px solid var(--linie); }
.raum-liste li::before {
  content: ""; position: absolute; left: .15rem; top: 1.1rem;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--rot);
}
.schritte a { color: var(--rot); }

/* Grundrisse (Location) und Checklisten zum Herunterladen (Anlass-Seiten) */
.grundriss-raster { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
#grundrisse .grundriss-raster { margin-top: 0; }
/* Lead in einer Zeile (Startseite, Galerie) */
.section-kopf--breit .lead { max-width: none; }
/* Warum Schulzes Hof und Ihre Gastgeber nebeneinander */
.warum-persoenlich { gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.warum-persoenlich h2 { font-size: var(--t-l); }
@media (min-width: 52rem) { .grundriss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grundriss-raster figure { margin: 0; }
/* Kennzeichnung von KI-Bildern direkt unter dem Bild */
.ki-hinweis { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; font-family: var(--f-util); font-size: var(--t-xs); color: var(--tinte-70); }
.ki-marke { display: inline-block; padding: .05rem .4rem; border: 1px solid currentColor; border-radius: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; }
.section--dunkel .ki-hinweis { color: rgba(246, 243, 240, .72); }
.grundriss-raster a { display: block; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  background: var(--weiss); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.grundriss-raster a:hover { border-color: var(--rot); box-shadow: var(--schatten); }
.grundriss-raster img { width: 100%; height: auto; }
.download-box {
  display: flex; gap: clamp(1rem, 3vw, 1.5rem); align-items: flex-start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.download-box h3 { margin: 0 0 .4rem; font-size: var(--t-l); }
.download-box p { margin: 0; }
.download-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: 1.1rem !important; }
.download-info { font-size: var(--t-xs); color: var(--tinte-70); }
@media (max-width: 40rem) { .download-box { flex-direction: column; } }

/* Seitenkopf ohne Foto (Kontakt, Team) */
.seitenkopf { padding-top: calc(var(--header-h) + 4rem); padding-bottom: 0; }
.seitenkopf h1 { max-width: 22ch; }
.seitenkopf--zentriert .wrap { text-align: center; }
.seitenkopf--zentriert h1, .seitenkopf--zentriert .lead { margin-inline: auto; }
/* Partner: Überschrift und „Gut zu wissen“ nebeneinander, damit der Einstieg kurz bleibt */
.seitenkopf--kompakt { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.seitenkopf-duo { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: end; }
@media (min-width: 60rem) { .seitenkopf-duo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.seitenkopf-duo .lead { margin-bottom: 0; }
.jahr-offen { background: #ffe9a8; color: var(--tinte); padding: 0 .3em; border-radius: 2px; }

/* Rindfleisch: drei Schritte, Zusatzzeile im Zahlenband, Kontaktzeile der FAQ */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 46rem) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .schritte--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .schritte--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schritte li {
  position: relative; display: grid; gap: .9rem; justify-items: start; align-content: start;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
}
.schritte p { margin: 0; font-size: var(--t-m); line-height: 1.5; }
.schritt-nr {
  position: absolute; top: 1.1rem; right: 1.3rem;
  font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--linie);
}
.fakt-zusatz { display: block; margin-top: .25rem; font-size: .8em; }
.faq-kontakt { padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.faq-kontakt p { margin: 0 0 1rem; }

/* Popup nach dem Absenden der Rindfleisch-Reservierung */
.popup {
  width: min(32rem, calc(100% - 2rem)); padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 0; border-radius: var(--radius-l); background: var(--weiss); color: var(--tinte);
  box-shadow: var(--schatten-l);
}
.popup::backdrop { background: rgba(24, 16, 12, .6); }
.popup h3 { margin: 0 0 .75rem; font-size: var(--t-l); color: var(--rotbraun); }
.popup h4 { margin: 1.25rem 0 .5rem; font-family: var(--f-util); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--rot); }
.popup p { margin: 0; }
.popup-liste { margin: 0 0 1.5rem; display: grid; gap: .35rem; }
.popup-liste div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.popup-liste dt { color: var(--tinte-70); }
.popup-liste dd { margin: 0; font-weight: 700; }

/* Ausstattung: Was bieten wir an */
.ausstattung { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie);
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 40rem) { .ausstattung { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .ausstattung { grid-template-columns: repeat(3, 1fr); } }
.ausstattung > li { background: var(--weiss); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.ausstattung h3 { font-size: var(--t-m); margin-bottom: .5rem; }
.ausstattung p { margin: 0; color: var(--tinte-70); font-size: var(--t-xs); line-height: 1.6; }
.section--dunkel .ausstattung { background: rgba(246,243,240,.2); border-color: rgba(246,243,240,.2); }
.section--dunkel .ausstattung > li { background: var(--dunkel); }
.section--dunkel .ausstattung p { color: rgba(246, 243, 240, .74); }

/* Sozialer Streifen */
.social-streifen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }

/* Lange Adressen in den Rechtstexten dürfen umbrechen, sonst läuft die Seite auf dem Handy über */
#rechtstext { overflow-wrap: anywhere; }

/* Unser Angebot (Location): Leistungen mit Foto statt reiner Textliste ------------- */
.angebot-inklusive { list-style: none; margin: 0 0 clamp(1.75rem, 4vw, 3rem); padding: 0; display: grid; gap: 1rem; }
@media (min-width: 44rem) { .angebot-inklusive { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hinweis-preis { color: var(--tinte-70); font-size: .92em; }
.angebot-inklusive li {
  display: flex; align-items: center; gap: 1rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.angebot-icon {
  flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--rot); color: var(--weiss); display: grid; place-items: center;
}
.angebot-icon svg { width: 1.55rem; height: 1.55rem; }
.angebot-inklusive strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-m); line-height: 1.2; }
.angebot-inklusive small { display: block; margin-top: .15rem; color: var(--tinte-70); font-size: var(--t-xs); }
.angebot-inklusive .karte-meta { display: block; margin-bottom: .2rem; }

.angebot-raster { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 40rem) { .angebot-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.angebot-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.angebot-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dunkel-2); }
.angebot-bild img { width: 100%; height: 100%; object-fit: cover; }
.angebot-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 10, 4, .82) 0%, rgba(26, 10, 4, .3) 42%, rgba(26, 10, 4, 0) 70%);
}
.angebot-bild h3 {
  position: absolute; z-index: 1; left: clamp(1.1rem, 2.4vw, 1.6rem); right: 1rem; bottom: clamp(.9rem, 2vw, 1.25rem);
  margin: 0; color: var(--weiss); font-size: var(--t-l); text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.angebot-karte .haken-liste { padding: clamp(1.25rem, 2.6vw, 1.75rem); }
.angebot-titel { margin: 0; padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 2.6vw, 1.75rem) 0; font-size: var(--t-l); color: var(--rotbraun); }
.angebot-titel + .haken-liste { padding-top: 1rem; }