/* ==========================================================================
   Steibl Fleisch & Wurst — Stylesheet
   Farben aus dem Original übernommen:
     --grau  #565752  Flächen der dunklen Abschnitte + Buttons im Original
     --text  #191919  Fließtext
     --soft  #F2F2F2  leichte Trennfläche
     --rot   #B8171C  Rot aus dem Logo (Balken „Vom Ferkel bis zum Speck“)
   Das Grün des Originals (#5DC183) stammte ausschließlich aus dem
   one.com-Cookie-Banner und ist damit entfallen.
   ========================================================================== */

:root {
  --grau: #565752;
  --grau-dunkel: #45463f;
  --grau-hell: #81837b;
  --text: #191919;
  --soft: #f7f5f2;   /* leicht warmes Grau statt neutralem — passt zum Holz in den Fotos */
  --weiss: #ffffff;
  --rot: #b8171c;
  --rot-dunkel: #961216;
  --akzent: #e8b93a;   /* warmer Ton für zeitlich begrenzte Hinweise (Urlaub) */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --wrap: 1200px;

  /* Etwas weichere Rundungen und gestufte Schatten statt eines einzigen
     harten Werts — das ist der Unterschied zwischen „zusammengeklickt“ und
     „gebaut“, ohne die Seite bunter zu machen. */
  --radius: 4px;          /* kleine Elemente: Buttons, Notizen */
  --radius-gross: 10px;   /* Karten und Bilder */
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .08);
  --shadow-hoch: 0 2px 4px rgba(0, 0, 0, .07), 0 12px 32px rgba(0, 0, 0, .14);
  --gap: clamp(1.5rem, 4vw, 3rem);
}

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* verhindert, dass die sticky Kopfzeile Anker-Ziele verdeckt */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  /* clip statt hidden: sonst bricht position:sticky in der Kopfzeile */
  overflow-x: clip;
}

img, picture { max-width: 100%; height: auto; display: block; }

/* Überschriften etwas größer und enger gesetzt als die Vorgabe des Browsers.
   Der negative Buchstabenabstand wirkt bei großen Graden ruhiger; bei kleinen
   Graden wäre er schädlich, deshalb nur bei h1/h2. */
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5.5vw, 3.25rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.625rem, 3.5vw, 2.25rem); letter-spacing: -.01em; }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1rem; }

a { color: inherit; }

/* nur für Screenreader sichtbar */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--weiss); color: var(--text);
  padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

:where(a, button, iframe):focus-visible {
  outline: 3px solid var(--rot);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.section--dark :where(a, button):focus-visible { outline-color: var(--weiss); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.wrap--narrow { max-width: 780px; }

/* --- Abschnitte ---------------------------------------------------------- */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--soft { background: var(--soft); }
.section--dark { background: var(--grau); color: var(--weiss); }

/* Feiner roter Strich unter den Abschnittsüberschriften — greift den Balken
   im Logo auf und gibt den Abschnitten einen erkennbaren Anfang. */
.section__title {
  text-align: center;
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
.section__title::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: var(--rot);
}
.section--dark .section__title::after { background: rgba(255, 255, 255, .55); }

/* --- Kopfbereich --------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--weiss);
  box-shadow: var(--shadow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Flex-Wrap: verhindert horizontales Scrollen auf schmalen Geräten */
  flex-wrap: wrap;
  padding-block: .75rem;
}

.logo { display: block; flex: 0 0 auto; }
.logo img { width: clamp(140px, 22vw, 190px); height: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0; padding: 0;
}

.site-nav a {
  color: var(--grau);
  font-size: .875rem;
  text-decoration: none;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--rot); border-bottom-color: var(--rot); }

/* Menü-Umschalter — nur auf schmalen Geräten sichtbar */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--grau-hell);
  border-radius: var(--radius);
  color: var(--grau);
  font: inherit;
  font-size: .875rem;
  padding: .5rem .8rem;
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 18px; height: 2px;
  background: currentColor; content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -6px; }
.nav-toggle__bars::after  { position: absolute; top:  6px; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    flex-basis: 100%;
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: .5rem;
  }
  .site-nav li + li { border-top: 1px solid var(--soft); }
  .site-nav a { display: block; padding: .8rem .25rem; font-size: 1rem; }
}

/* --- Öffnungsstatus ------------------------------------------------------ */
/* Grün steht hier für „offen“ — bewusst nicht das Logo-Rot, das auf dieser
   Seite die Handlungs-Buttons kennzeichnet. Geschlossen ist neutral grau
   statt rot: „geschlossen“ ist kein Fehler, sondern der Normalfall. */

.status {
  background: var(--soft);
  border-bottom: 1px solid #e3e3e3;
  padding-block: .75rem;
}

.status__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.25rem;
  text-align: center;
}

.status__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}
.status__badge::before {
  content: "";
  width: .7rem; height: .7rem;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}
.status__badge--offen { color: #1c7a3e; }
.status__badge--zu    { color: var(--grau); }

.status__hinweis {
  margin: 0;
  font-size: .9375rem;
  color: var(--text);
  background: #fff6d6;
  border: 1px solid #e8d48a;
  border-radius: var(--radius);
  padding: .4rem .9rem;
}
.status__hinweis a { color: var(--rot); }
.status__badge[hidden], .status__hinweis[hidden] { display: none; }

/* Markt, der heute stattfindet */
.market--heute {
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .16);
}
/* Absolut gesetzt, damit die Karte mit dem Schild nicht höher wird als die
   anderen und die Reihe sauber auf einer Linie bleibt. */
.market__heute {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: inline-block;
  padding: .1rem .6rem;
  border-radius: 999px;
  background: var(--weiss);
  color: var(--grau);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Auftakt ------------------------------------------------------------- */
/* Das Foto füllt die Fläche, darüber ein Verlauf von links. Der Verlauf ist
   nicht Deko: Ohne ihn stünde weiße Schrift stellenweise auf hellem Holz und
   wäre nicht mehr lesbar. Links dunkel, rechts offen — dort stehen Doris und
   Fritz im Bild, die sollen frei bleiben. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(24rem, 62vh, 38rem);
  background: var(--grau-dunkel);
  color: var(--weiss);
  overflow: hidden;
}

/* Auf breiten Bildschirmen wird der Auftakt mitgezogen. Sonst ist das Feld
   sehr breit und flach, vom Foto bleibt nur ein schmaler Querstreifen übrig —
   und darin wären die Köpfe angeschnitten. Zusätzlich nach der Fensterhöhe
   gedeckelt, damit auf einem flachen Bildschirm nicht der ganze erste
   Eindruck vom Auftakt aufgefressen wird. */
@media (min-width: 1200px) {
  .hero { min-height: min(44vw, 42rem, 76vh); }
}

.hero__bild {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Waagrecht: Doris und Fritz stehen rechts neben dem Text, nicht dahinter.
     Senkrecht bewusst weit oben (6 %): Bei „cover“ wird das Foto auf die
     Feldbreite gerechnet; ist das Feld breiter als hoch, ragt es oben und
     unten hinaus, und der sichtbare Streifen wandert mit diesem Wert. Bei
     30 % lag er auf breiten Bildschirmen so tief, dass Fritz der Kopf
     abgeschnitten wurde. 6 % hält die Köpfe in jedem Format im Bild. */
  object-position: 42% 6%;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(20, 20, 18, .88) 0%, rgba(20, 20, 18, .62) 42%, rgba(20, 20, 18, .12) 78%),
    linear-gradient(to top, rgba(20, 20, 18, .55), transparent 45%);
}

.hero__inhalt {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  max-width: 46rem;
}

.hero__auge {
  margin: 0 0 .9rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}

.hero__titel {
  margin: 0 0 1rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.hero__text {
  margin: 0 0 1.75rem;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: rgba(255, 255, 255, .92);
}

.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* --- Auftakt auf breiten Bildschirmen: zweigeteilt ------------------------
   Ab hier ist Platz, um Text und Foto NEBENEINANDER zu stellen statt
   übereinander. Damit steht die Schrift nie mehr über Doris und Fritz — die
   beiden sind der Grund, warum jemand dem Betrieb vertraut, die sollen frei
   stehen. Der Übergang zwischen dunkler Textfläche und Foto ist ein weicher
   Verlauf, damit es nicht wie zwei zusammengeklebte Hälften wirkt.

   --teiler ist die Stelle, an der das Foto beginnt: nie weiter links als
   48 %, auf sehr breiten Schirmen so gesetzt, dass immer Abstand zur
   Textspalte bleibt (die mit dem 1200er Raster mitwandert). Wird der Wert
   kleiner gewählt, stößt die Schrift am unteren Ende ans Foto.

   Unter 900 px bleibt es bei Schrift über Foto — dort ist für zwei Spalten
   kein Platz, und am Handy stehen die Köpfe ohnehin über dem Text.

   Muss NACH den Grundregeln von .hero__bild stehen — sonst gewinnt dort das
   inset: 0 und das Foto bleibt über die ganze Breite liegen. */
@media (min-width: 900px) {
  .hero {
    --teiler: max(48%, calc(50% - 3rem));
    align-items: center;
  }

  .hero__bild {
    left: var(--teiler);
    /* width:auto statt der 100 % von oben — sonst startet das Foto zwar
       weiter rechts, ragt aber um denselben Betrag über den rechten Rand
       hinaus. So spannen left und right die Breite auf. */
    width: auto;
    right: 0;
    object-position: 50% 15%;
  }

  .hero::after {
    background: linear-gradient(to right,
      var(--grau-dunkel) 0,
      var(--grau-dunkel) calc(var(--teiler) - 4rem),
      rgba(69, 70, 63, .5) var(--teiler),
      transparent calc(var(--teiler) + 7rem));
  }

  /* Der Kasten selbst bleibt im 1200er Raster, also bündig mit Logo und
     Menü darüber. Nur der Textinhalt wird schmaler — eine max-width auf dem
     Kasten würde ihn wegen margin-inline:auto mittig schieben. */
  .hero__inhalt { max-width: var(--wrap); }
  /* 42vw als zweite Schranke: Knapp über 1100 px ist die Textspalte sonst
     fast so breit wie ihre Hälfte und stößt ans Foto. */
  .hero__inhalt > * { max-width: min(30rem, 42vw); }
  .hero__titel { text-shadow: none; }
}

@media (max-width: 700px) {
  /* Auf schmalen Geräten deckt ein Verlauf von links die Schrift nicht mehr
     zuverlässig — dort von unten abdunkeln. */
  .hero::after {
    background: linear-gradient(to top, rgba(20, 20, 18, .92) 12%, rgba(20, 20, 18, .55) 55%, rgba(20, 20, 18, .25));
  }
  .hero__bild { object-position: 62% 26%; }
  .hero__text { max-width: none; }
}

/* --- Begrüßung ----------------------------------------------------------- */

.intro { text-align: center; }
.intro__text { max-width: 62ch; margin-inline: auto; }
.intro__signature { margin-top: 1.5rem; font-weight: 600; }

/* --- Produktsortiment ---------------------------------------------------- */

.products {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.product {
  background: var(--weiss);
  border: 1px solid #ececec;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover: hover) {
  .product:hover { transform: translateY(-3px); box-shadow: var(--shadow-hoch); }
}
.product img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.product__titel {
  margin: 0;
  padding: 1.15rem 1.35rem .35rem;
  font-size: 1.0625rem;
  letter-spacing: .01em;
}
.product__titel::after {
  content: "";
  display: block;
  width: 2.25rem;
  height: 3px;
  margin-top: .55rem;
  border-radius: 2px;
  background: var(--rot);
}
.product p {
  margin: 0;
  padding: .75rem 1.35rem 1.5rem;
  font-size: .95rem;
  color: #4a4a46;
}

/* --- Video --------------------------------------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--shadow-hoch);
  background: #000;
}
.video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- Wochenmärkte -------------------------------------------------------- */

.markets {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.market {
  position: relative;   /* Anker für das „Heute“-Schild */
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-gross);
  padding: 1.75rem 1.35rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: background-color .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .market:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .34); }
}
.market__name { margin: 0 0 .35rem; font-size: 1.0625rem; }
.market__address { margin: 0; font-size: .9rem; opacity: .85; }
.market__time { margin: .35rem 0 1.1rem; font-size: .95rem; }
.market .btn { margin-top: auto; align-self: center; }

/* --- Buttons ------------------------------------------------------------- */
/* Im Original waren die Kontakt-Buttons #565752 auf #565752 — praktisch
   unsichtbar. Sie verwenden jetzt das Rot aus dem Logo. */

.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 46px;
  padding: .6rem 1.85rem;
  border-radius: 6px;
  background: var(--rot);
  color: var(--weiss);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease,
              transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
  background: var(--rot-dunkel);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(184, 23, 28, .3);
}
.btn:active { transform: none; }
.btn__label { display: block; }
.btn__sub { display: block; font-weight: 400; font-size: .8125rem; opacity: .92; }

/* helle Variante für die zweite Handlung im Auftakt */
.btn--hell {
  background: rgba(255, 255, 255, .95);
  color: var(--text);
}
.btn--hell:hover {
  background: var(--weiss);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}

/* dezente Variante auf den dunklen Flächen (Wochenmärkte) */
.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--grau);
  box-shadow: none;
}

/* --- Widgets (Elfsight + Rückfallebene) ---------------------------------- */

.widget { min-height: 60px; }

.widget__fallback {
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
  background: var(--weiss);
  border: 1px solid #e3e3e3;
  border-radius: var(--radius);
}
.section--soft .widget__fallback { background: var(--weiss); }
.widget__fallback p { margin-bottom: 1.25rem; }
.widget__fallback[hidden] { display: none; }

/* --- Kontakt ------------------------------------------------------------- */

.contact { text-align: center; }

.contact__logo {
  width: min(320px, 70vw);
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-gross);
}

.contact__card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-gross);
  padding: 1.75rem 1.35rem;
}

.contact__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  align-items: start;
  text-align: center;
}

.contact__card h3 {
  font-size: 1rem;
  text-transform: none;
  margin-bottom: .75rem;
}
.contact__lines { margin-bottom: 1.25rem; }

.contact__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.contact__closing {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 55ch;
  font-size: 1.0625rem;
}

/* --- Fußbereich ---------------------------------------------------------- */

.site-footer {
  background: var(--weiss);
  border-top: 1px solid #e3e3e3;
  padding-block: 1.5rem;
  font-size: .875rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
}
.footer-inner ul {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  list-style: none; margin: 0; padding: 0;
}
.footer-inner a { color: var(--grau); text-decoration: none; }
.footer-inner a:hover { color: var(--rot); text-decoration: underline; }
.copyright { margin: 0; color: var(--grau-hell); }

/* --- Urlaubsbanner ------------------------------------------------------- */
/* Ruhiges dunkles Band unter der Kopfzeile, eine Zeile, mit einem warmen
   Akzent als einzigem Farbtupfer. Bewusst nicht knallgelb und nicht in
   Logo-Rot: Rot heißt auf dieser Seite „hier klicken“, und eine Schließzeit
   ist keine Warnung. Der Banner bleibt stehen — er lässt sich nicht
   wegklicken, sonst wäre er beim zweiten Besuch wirkungslos.

   Den ausführlichen Text zeigt das Popup; hier steht nur das Nötigste.
   Deshalb steht beim Urlaub im Öffnungszeiten-Block auch kein "hinweis"
   mehr — sonst stünde zweimal dasselbe untereinander. */

.urlaub {
  background: var(--grau-dunkel);
  color: var(--weiss);
  border-bottom: 2px solid var(--akzent);
}
.urlaub[hidden] { display: none; }

.urlaub__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding-block: .7rem;
}

.urlaub__icon { flex: 0 0 auto; color: var(--akzent); }

.urlaub__text {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .1rem .65rem;
  line-height: 1.4;
}

.urlaub__titel {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.urlaub__detail {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .82);
}

@media (max-width: 700px) {
  .urlaub__inner { align-items: flex-start; }
  .urlaub__icon { margin-top: .15rem; }
  .urlaub__text { justify-content: flex-start; text-align: left; }
}

/* Notizen im Seiteninhalt (beide auf dunklen Flächen) */
.urlaub-notiz {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .9rem;
  border-left: 3px solid var(--akzent);
  background: rgba(255, 255, 255, .1);
  color: var(--weiss);
  font-size: .9375rem;
  font-weight: 600;
  text-align: left;
}
.urlaub-notiz[hidden] { display: none; }

/* über den Marktkacheln */
.urlaub-notiz--mitte {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -0.75rem auto clamp(1.5rem, 4vw, 2.25rem);
}

/* --- Hinweis-Popup (Urlaub) ---------------------------------------------- */
/* <dialog> übernimmt Verdunkelung, Tastaturfalle und Esc von sich aus.
   Ohne JavaScript bleibt der Kasten zu — deshalb steht der Urlaubshinweis
   zusätzlich in der Öffnungsanzeige. */

.popup {
  position: fixed;
  inset: 0;
  margin: auto;                    /* zusammen mit inset:0 = mittig */
  width: min(420px, 88vw);
  max-height: 90dvh;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--weiss);
  color: var(--text);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .4);
  overflow: auto;
  text-align: center;
}
/* Reserve für Browser, die dvh nicht kennen */
@supports not (height: 1dvh) { .popup { max-height: 90vh; } }

.popup::backdrop {
  background: rgba(20, 20, 18, .72);
  backdrop-filter: blur(2px);      /* wo unterstützt; sonst nur die Abdunklung */
}

.popup__bild {
  width: auto;
  max-width: 100%;
  max-height: 55dvh;               /* damit auf dem Handy der Text sichtbar bleibt */
  margin-inline: auto;
  border-radius: 10px 10px 0 0;
}
@supports not (height: 1dvh) { .popup__bild { max-height: 55vh; } }

.popup__close {
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 2;
  width: 2.75rem; height: 2.75rem;   /* 44 px — sichere Tippfläche am Handy */
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
  color: var(--grau);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.popup__close:hover { background: var(--weiss); color: var(--rot); }

.popup__text { padding: 1.1rem 1.25rem 1.5rem; }
.popup__text p { margin: 0 0 .5rem; }
.popup__signatur { font-weight: 600; margin-bottom: 1.25rem !important; }

.popup__ok { padding-inline: 2.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .popup[open] { animation: popup-auf .22s ease-out; }
  @keyframes popup-auf {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

/* Hintergrund nicht mitscrollen, solange der Kasten offen ist */
body.popup-offen { overflow: hidden; }

/* --- Impressum / Rechtstexte --------------------------------------------- */

.legal { max-width: 820px; }
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.0625rem; margin-top: 1.75rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: .5rem; }
.legal a { color: var(--rot); }
.legal__block { margin-bottom: 2rem; }
.legal__lead { font-weight: 600; }
.legal__stand { margin-top: 1.5rem; color: var(--grau-hell); font-size: .875rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}