/* ==========================================================================
   LIAMELLO – Grundstyles
   ========================================================================== */

/* Headline-Schrift: für Deutsch reparierte Fassung (Umlautpunkte ergänzt,
   ß als doppeltes s). Original liegt unverändert im LOGO/Fonts-Ordner. */
@font-face {
  font-family: "Sweet Creamy";
  src: url("../assets/fonts/SweetCreamy-DE.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Markenfarben, abgeleitet aus dem LIAMELLO-Logo */
  --peach: #ffd9a8;
  --peach-soft: #ffe9cc;
  --pink: #f6afd1;
  /* Abgedunkeltes Marken-Rosa nur fuer kleine Texte – das Pastell-Rosa
     erreicht auf hellem Grund nur 1,7:1 und ist damit kaum lesbar. */
  --pink-text: #a8447a;
  --pink-soft: #fbd9e8;
  --blue: #bfe7f5;
  --blue-soft: #e3f5fb;
  --cream: #fffaf3;
  --white: #ffffff;
  --ink: #3a2c22;
  --ink-soft: #7a6a5c;

  /* Salzzone – eigene, ruhigere Variante der Palette */
  --salt-blue: #cfe9f2;
  --salt-blue-deep: #2f7f9e;
  --salt-bg: #f1f8fb;

  /* Easing-Kurven nach Emil Kowalskis Design-Engineering-Prinzipien.
     Die eingebauten CSS-Easings (ease, ease-out) wirken im Vergleich kraftlos.
     ease-in wird bewusst nirgends verwendet – es startet langsam und lässt
     Oberflächen träge wirken. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 12px 30px rgba(58, 44, 34, 0.08);
  --max-width: 1180px;

  --font-display: "Sweet Creamy", "Quicksand", -apple-system, sans-serif;
  --font-body: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Sichtbarer Fokusrahmen fuer Tastatur-Navigation. Fehlte bisher komplett –
   wer sich mit der Tabulatortaste durch die Seite bewegt, sah nicht, wo er ist.
   :focus-visible statt :focus, damit Mausklicks keinen Rahmen hinterlassen. */
:focus-visible {
  outline: 3px solid var(--pink-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.site-footer :focus-visible { outline-color: var(--peach); }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.6rem); }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--pink-text);
  margin-bottom: 0.6em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  /* Nur transform animieren – läuft auf der GPU, ohne Layout/Paint */
  transition: transform 160ms var(--ease-out);
}

/* Hover nur auf Geräten mit echtem Zeiger. Auf Touchscreens löst ein Tipp
   sonst den Hover-Zustand aus und der Button bleibt "hängen". */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* Druckfeedback: Jedes drückbare Element soll sofort reagieren. */
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--pink);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-whatsapp {
  background: #25d366;
  color: #10301c;
}
.btn-salt {
  background: var(--salt-blue-deep);
  color: white;
}

/* ---------- Header / Nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid rgba(58, 44, 34, 0.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
}
/* Kopfzeile. Der frühere Schriftzug bleibt bei 50 px; das Kirschen-Icon ist
   fast quadratisch und braucht weniger Höhe. Die Regel greift über den
   Dateinamen, damit beide Varianten nebeneinander richtig aussehen, solange
   noch nicht alle Seiten umgestellt sind. */
.logo-link img { height: 50px; width: auto; display: block; }
.logo-link img[src$="kirschen-kopf.png"] { height: 40px; }

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
nav.main-nav a {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
/* :not(.btn), damit der "Tisch reservieren"-Button im Menü seine eigene
   transform-Transition behält – sonst überschreibt diese Regel sie. */
nav.main-nav a:not(.btn) { transition: border-color 150ms ease; }
nav.main-nav a.active { border-color: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  nav.main-nav a:not(.btn):hover { border-color: var(--pink); }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 860px) {
  nav.main-nav {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 18px;
    transform: translateX(100%);
    transition: transform 300ms var(--ease-drawer);
    overflow-y: auto;
  }
  nav.main-nav.open { transform: translateX(0); }
  .nav-toggle { display: block; }
  .logo-link img { height: 46px; }
  .logo-link img[src$="kirschen-kopf.png"] { height: 34px; }
}

/* ---------- Hero (schlicht, Logo im Mittelpunkt) ---------- */
.hero {
  background: var(--white);
  text-align: center;
  padding: 90px 24px 80px;
}
.hero-content {
  max-width: 720px;
  margin: 0 auto;
}
.hero-logo {
  width: min(420px, 78vw);
  margin: 0 auto 28px;
}
.hero-content h1 {
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  margin-bottom: 0.35em;
}
.hero-content p.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2em;
}
@media (max-width: 700px) {
  .hero { padding: 60px 24px 56px; }
}

/* ---------- Page Hero (Unterseiten) ---------- */
.page-hero {
  padding: 120px 0 60px;
  text-align: center;
  background: linear-gradient(180deg, var(--peach-soft), var(--cream));
}
.page-hero.salt { background: linear-gradient(180deg, var(--salt-blue), var(--salt-bg)); }
.page-hero p.lead { max-width: 620px; margin: 0 auto; color: var(--ink-soft); font-size: 1.1rem; }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-alt { background: var(--white); }
.section-tight { padding: 50px 0; }
.section-center { text-align: center; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 28px; }
}

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}
.card .icon { font-size: 2.2rem; margin-bottom: 0.4em; display: block; }

.round-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.video-band img,
.video-band video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .video-band img,
  .video-band video { aspect-ratio: 4/3; }
}

/* Marquee-Leiste im brunchit-Stil */
.marquee {
  background: var(--peach-soft);
  color: var(--ink);
  border-top: 1px solid rgba(58, 44, 34, 0.06);
  border-bottom: 1px solid rgba(58, 44, 34, 0.06);
  overflow: hidden;
  white-space: nowrap;
  padding: 13px 0;
}
.marquee-track {
  display: inline-block;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.marquee-track span { margin: 0 20px; color: var(--ink); }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- Menu / Fotogrid ---------- */
.menu-category { margin-bottom: 56px; }
.menu-category h3 { text-align: center; margin-bottom: 1.2em; }
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.menu-grid img {
  border-radius: var(--radius-md);
  aspect-ratio: 4/5;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 700px) {
  .menu-grid { grid-template-columns: 1fr; }
}
.menu-note {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 40px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Preistabelle Salzzone ---------- */
.price-table {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
}
.price-row {
  display: flex;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--salt-blue);
}
.price-row:last-child { border-bottom: none; }
.price-row .label { font-weight: 600; }
.price-row .value { font-weight: 700; color: var(--salt-blue-deep); }
.price-group-title {
  background: var(--salt-bg);
  padding: 10px 28px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--salt-blue-deep);
}
.price-hint {
  text-align: center;
  max-width: 640px;
  margin: 20px auto 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- Regeln-Liste Salzzone ---------- */
.rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.rules-list li {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-soft);
}
@media (max-width: 700px) { .rules-list { grid-template-columns: 1fr; } }

/* Drei-Schritte-Variante (Gutschein-Bestellung): drei gleich breite Spalten
   statt zwei, damit keine halbleere Zeile entsteht. */
.rules-list.schritte { grid-template-columns: repeat(3, 1fr); }
.rules-list.schritte li { padding: 24px 24px 26px; }
.rules-list.schritte strong { color: var(--pink-text); font-size: 1.05rem; }
@media (max-width: 900px) { .rules-list.schritte { grid-template-columns: 1fr; } }

/* ---------- Map / Standort ---------- */
.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: none;
  width: 100%;
  height: 420px;
}
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 10px 0; border-bottom: 1px solid var(--peach-soft); }
.hours-table td:last-child { text-align: right; font-weight: 700; }

/* ---------- Kontaktformular ---------- */
.contact-form { display: grid; gap: 16px; max-width: 560px; }
.contact-form label { font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--peach-soft);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--white);
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--pink); border-color: transparent; }

/* Spam-Falle: für Sehende unsichtbar, aber vorhanden – bewusst nicht
   display:none, weil manche Bots ausgeblendete Felder erkennen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-hint {
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0;
}

.form-note {
  max-width: 560px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 0.95rem;
}
.form-note-error {
  background: var(--pink-soft);
  border-left: 4px solid var(--pink-text);
  color: var(--ink);
}

/* ---------- Produktkarten (Gutscheine & Merch) ---------- */
.produkt-karte { display: flex; flex-direction: column; }
.produkt-karte img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.produkt-karte h3 { margin-bottom: 6px; }
.produkt-karte p { margin-bottom: 10px; }
.produkt-preis {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--pink-text);
  /* schiebt den Button aller Karten auf dieselbe Höhe, auch bei
     unterschiedlich langen Beschreibungen */
  margin-top: auto;
}
.produkt-karte .btn { align-self: flex-start; margin-top: 14px; }

/* ---------- Galerie ---------- */
.gallery-grid {
  columns: 3 220px;
  column-gap: 18px;
}
.gallery-grid img {
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  break-inside: avoid;
}
@media (max-width: 700px) { .gallery-grid { columns: 2 160px; } }

/* ---------- Feature-Raster (bewusst asymmetrisch) ----------
   Drei exakt gleich grosse Karten nebeneinander sind das Erkennungszeichen
   generischer Seiten. Die Salzzone bekommt Vorrang: Sie ist das Angebot,
   das kein anderes Cafe in der Umgebung hat. */
.feature-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.feature-stack {
  display: grid;
  gap: 28px;
}
a.card {
  display: block;
  color: inherit;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(58,44,34,0.12); }
}
a.card:active { transform: scale(0.99); }
.card-feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(160deg, var(--salt-bg), var(--white));
  padding: 44px 40px;
}
.card-feature { position: relative; overflow: hidden; }
.card-feature h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
/* Salzzone-Logo als ruhiges Bildzeichen – fuellt den Raum, ohne zu schreien */
.card-feature-mark {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 190px;
  opacity: 0.5;
  pointer-events: none;
}
@media (max-width: 860px) {
  .card-feature-mark { width: 130px; opacity: 0.35; }
}
.card-feature .icon { font-size: 2.8rem; }
.card-link {
  display: inline-block;
  margin-top: 0.6em;
  font-weight: 700;
  color: var(--pink-text);
}
.card-feature .card-link { color: var(--salt-blue-deep); }
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: 1fr; }
  .card-feature { padding: 32px 28px; }
}

/* ---------- Bewertungs-Karte ---------- */
.rating-card {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 40px 28px;
}
.rating-stars {
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  color: #f2a900;
  margin-bottom: 0.3em;
}
.rating-value { font-size: 1.25rem; margin-bottom: 0.2em; }
.rating-meta { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.4em; }

/* ---------- Instagram Teaser ---------- */
.insta-teaser {
  text-align: center;
  background: linear-gradient(135deg, var(--pink-soft), var(--peach-soft));
  border-radius: var(--radius-lg);
  padding: 56px 24px;
}
.insta-feed { margin: 28px auto 24px; max-width: 760px; }
.insta-gate {
  background: rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.insta-gate-text {
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 1.2em;
}

/* ---------- Legal pages ---------- */
.legal h2 { margin-top: 1.6em; }
.legal { max-width: 780px; margin: 0 auto; }

/* ---------- Footer ---------- */
footer.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
footer.site-footer a { opacity: 0.85; }
footer.site-footer a:hover { opacity: 1; text-decoration: underline; }
footer.site-footer h4 { color: var(--peach); font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
/* Team-Login: bewusst zurückhaltend – für Gäste irrelevant, fürs Team auffindbar */
.team-login { opacity: 0.6; }
.team-login:hover { opacity: 1; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  opacity: 0.75;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp Float Button ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: #25d366;
  color: white;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  z-index: 90;
  transition: transform 160ms var(--ease-out);
}
.whatsapp-float:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .whatsapp-float:hover { transform: scale(1.06); }
}


/* ==========================================================================
   Sanftes Einblenden beim Scrollen
   Bewusst zurückhaltend: 8px Versatz, kein Zoom, keine Bewegung von scale(0).
   Der Versatz wird gestaffelt (40ms pro Element), damit Gruppen nacheinander
   erscheinen statt gleichzeitig – wirkt natürlicher, ohne zu bremsen.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Reduzierte Bewegung respektieren
   Wer im Betriebssystem "Bewegung reduzieren" aktiviert hat, bekommt keine
   Bewegung – Farb- und Deckkraftwechsel bleiben, weil sie beim Verstehen helfen.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .marquee-track {
    animation: none;
    transform: none;
  }
  .btn:hover,
  .whatsapp-float:hover { transform: none; }
  .btn:active { transform: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Salzzone – Logo-Kreis im Seitenkopf
   -------------------------------------------------------------------------- */
.salt-badge {
  background: var(--white);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: var(--shadow-soft);
}
.salt-badge img { height: 120px; width: auto; }

@media (max-width: 600px) {
  .salt-badge { width: 140px; height: 140px; }
  .salt-badge img { height: 92px; }
}

/* --------------------------------------------------------------------------
   Häufige Fragen – aufklappbare Liste, ganz ohne JavaScript
   -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 14px; }

.faq-list details {
  background: var(--white);
  border: 1px solid var(--peach-soft);
  border-radius: var(--radius-md);
  padding: 4px 24px;
  box-shadow: var(--shadow-soft);
}

.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 20px 34px 20px 0;
  position: relative;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--salt-blue-deep);
  transition: transform 0.25s var(--ease-out);
}
.faq-list details[open] summary::after { content: "–"; }

.faq-list details p {
  margin: 0 0 22px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Salzzone – Sitzungszeiten
   -------------------------------------------------------------------------- */
.zeit-karte { display: flex; flex-direction: column; }
.zeit-karte p { margin-bottom: 18px; }

.zeit-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.zeit-slots span {
  background: var(--salt-bg);
  border: 1px solid var(--salt-blue);
  color: var(--salt-blue-deep);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}

/* Beide Zeit-Karten gleich hoch, unabhängig von der Textlänge */
#zeiten .grid-2 { align-items: stretch; }

/* --------------------------------------------------------------------------
   EVENTS (ab 29.09.2026)
   Große Karten für die Veranstaltungen. Ein neues Event entsteht durch
   Kopieren eines <article class="event-card">-Blocks in events.html –
   hier in der Gestaltungsdatei muss dafür nichts geändert werden.
   -------------------------------------------------------------------------- */
.event-list { display: grid; gap: 40px; }

.event-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Bild als breites Band über der Karte. Bewusst flach (21:9), damit vom
   Motiv möglichst viel sichtbar bleibt und die Karte nicht zu hoch wird. */
.event-media { position: relative; background: var(--peach-soft); }
.event-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 21/9;
  object-fit: cover;
}

/* Datumsfahne auf dem Bild – auf einen Blick erkennbar, wann es losgeht. */
.event-datum {
  position: absolute;
  top: 22px;
  left: 22px;
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 10px 18px 12px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  line-height: 1.15;
}
.event-datum .tag { display: block; font-size: 1.9rem; font-family: var(--font-display); }
.event-datum .monat { display: block; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-text); }

.event-body { padding: 34px 38px 40px; }
/* Fließtext auf angenehme Zeilenlänge begrenzen; Hinweiskasten und
   Zeitfenster dürfen dagegen die volle Kartenbreite nutzen. */
.event-body > p, .event-body > h3, .event-body > .event-wann { max-width: 820px; }
.event-body h3 { margin-bottom: 0.35em; }
.event-wann {
  font-weight: 700;
  color: var(--pink-text);
  margin-bottom: 0.9em;
}

/* Programmpunkte als kleine Pastell-Plaketten. */
.event-programm {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-programm li {
  background: var(--blue-soft);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.92rem;
  font-weight: 600;
}

/* Hinweiskasten: steht bewusst ÜBER den Reservieren-Knöpfen, damit Preis,
   Ablauf und Stornobedingungen gelesen werden, bevor jemand bucht. */
.event-hinweis {
  background: var(--peach-soft);
  border-radius: var(--radius-md);
  padding: 20px 22px 8px;
  margin-bottom: 26px;
}
.event-hinweis ul { margin: 0 0 12px; padding-left: 20px; }
.event-hinweis li { margin-bottom: 8px; }
.event-hinweis strong { font-weight: 700; }

.event-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.event-slot {
  border: 2px solid var(--peach);
  border-radius: var(--radius-md);
  padding: 18px 18px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.event-slot .uhrzeit {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: 2px;
}
.event-slot .dauer { display: block; font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 14px; }
.event-slot .btn { width: 100%; justify-content: center; padding: 12px 18px; margin-top: auto; }
.event-kalender {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--pink-text);
  border-bottom: 2px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
  .event-kalender:hover { border-color: var(--pink); }
}

@media (max-width: 860px) {
  .event-media img { aspect-ratio: 16/10; }
  .event-body { padding: 26px 22px 30px; }
  .event-slots { grid-template-columns: 1fr; }
}

/* Vierspaltige Variante der Schritt-Liste (Reservierungsablauf). */
.rules-list.schritte-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .rules-list.schritte-4 { grid-template-columns: 1fr; } }

/* Teaser-Band auf der Startseite. */
/* --------------------------------------------------------------------------
   EVENT-TEASER
   Schmales Band unter dem Kopfbild. Die Eventzeilen laufen von rechts nach
   links; js/main.js wiederholt die Reihe und setzt dann die Klasse "laeuft".
   Ohne JavaScript bleibt die Reihe stehen und ist trotzdem lesbar.
   -------------------------------------------------------------------------- */
.event-teaser { background: var(--pink-soft); padding: 16px 0 18px; }
.event-teaser .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}
.event-teaser p { margin: 0; font-weight: 600; }

.event-lauf {
  overflow: hidden;
  white-space: nowrap;
  margin: 10px 0 12px;
  /* Die Zeilen sollen an den Rändern weich auslaufen statt hart abzureißen. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.event-lauf-spur { display: inline-block; }
.event-lauf-spur.laeuft { animation: event-lauf 30s linear infinite; }
.event-lauf:hover .event-lauf-spur.laeuft,
.event-lauf:focus-within .event-lauf-spur.laeuft { animation-play-state: paused; }
.event-lauf-spur a {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  margin: 0 26px;
}
.event-lauf-spur a:hover { color: var(--pink-text); }
@keyframes event-lauf {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .event-lauf-spur a { font-size: 1.1rem; margin: 0 18px; }
}
/* Wer Bewegung im Betriebssystem abgeschaltet hat, bekommt die Zeilen
   untereinander und ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .event-lauf { white-space: normal; -webkit-mask-image: none; mask-image: none; }
  .event-lauf-spur.laeuft { animation: none; }
  .event-lauf-spur { display: block; text-align: center; }
  .event-lauf-spur a { display: block; margin: 4px 0; }
  .event-lauf-spur a[aria-hidden="true"] { display: none; }
}
.event-teaser .label {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--pink-text);
}
.event-teaser .btn { padding: 10px 22px; }

/* Mit dem sechsten Menüpunkt ("Events") wird die Kopfzeile zwischen 861 und
   1040 Pixeln knapp. Hier rücken die Punkte etwas zusammen, damit der
   Reservieren-Knopf nicht an den Rand stößt. */
@media (min-width: 861px) and (max-width: 1040px) {
  nav.main-nav { gap: 16px; }
  nav.main-nav a { font-size: 0.9rem; }
  nav.main-nav a.btn { padding: 11px 18px; }
}

/* Ein Event mit nur einem Zeitfenster: der Kasten soll dann nicht die halbe
   Karte breit sein, sondern nur so breit wie nötig. */
.event-slots.einzeln { grid-template-columns: 1fr; max-width: 360px; }

/* Teaser-Band mit mehreren Events untereinander bzw. nebeneinander. */
.event-teaser .teaser-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
}
.event-teaser .teaser-liste li { font-weight: 600; }

/* ==========================================================================
   SPEISEKARTE ZUM BLÄTTERN
   --------------------------------------------------------------------------
   Die gedruckte Winterkarte liegt als 12 Einzelseiten in assets/karte/
   (00-titel, 01 … 10, 11-rueckseite – jeweils als .webp und .jpg).
   Am Desktop zeigt das Buch zwei Seiten nebeneinander wie im echten Heft,
   am Handy eine. Gesteuert wird alles in js/karte.js.
   Neue Karte im Frühjahr: Bilder austauschen, Kapitelnamen in js/karte.js
   anpassen, Textfassung weiter unten in speisekarte.html aktualisieren.
   ========================================================================== */

.karte-buehne-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Die Bühne hält das Seitenverhältnis der gedruckten Seite (A5 hoch).
   --seiten: 1 am Handy, 2 am Desktop – daraus ergibt sich die Breite. */
.karte-buehne {
  --seiten: 2;
  /* Breite begrenzt durch Fenster UND Fensterhöhe – das Heft soll immer
     ganz zu sehen sein, ohne dass man scrollen muss. */
  --seitenbreite: min(520px, (min(100vw, 1180px) - 230px) / var(--seiten), (100vh - 290px) * 0.699);
  position: relative;
  display: flex;
  flex: 0 0 auto;
  width: calc(var(--seitenbreite) * var(--seiten));
  aspect-ratio: calc(0.699 * var(--seiten)) / 1;
  perspective: 2200px;
  cursor: zoom-in;
  touch-action: pan-y;
  /* Titel- und Rückseite liegen allein; dann rückt das Heft in die Mitte,
     als würde man es aufschlagen. */
  transition: transform 460ms var(--ease-in-out);
}
.karte-buehne[data-lage="rechts"] { transform: translateX(-25%); }
.karte-buehne[data-lage="links"]  { transform: translateX(25%); }

.karte-buehne .buch-seite {
  position: relative;
  flex: 1 1 50%;
  overflow: hidden;
  background: var(--peach-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 44px rgba(58, 44, 34, 0.16);
}
/* Leere Hälfte (Titel- und Rückseite liegen allein) – unsichtbar, damit das
   einzelne Blatt wie ein geschlossenes Heft wirkt. */
.karte-buehne .buch-seite.leer { background: transparent; box-shadow: none; }
.karte-buehne .buch-seite img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.karte-buehne .buch-seite.leer img { visibility: hidden; }

/* Der Bund in der Mitte: ein zarter Schatten, damit es nach Heft aussieht. */
.karte-buehne[data-doppel="ja"]::after {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 14px) 0 calc(50% - 14px);
  background: linear-gradient(90deg,
    rgba(58,44,34,0) 0%, rgba(58,44,34,0.13) 48%,
    rgba(58,44,34,0.13) 52%, rgba(58,44,34,0) 100%);
  pointer-events: none;
}

/* Das umblätternde Blatt liegt über der Bühne und dreht sich um seine Kante. */
.buch-blatt {
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--seitenbreite);
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease-in-out);
  z-index: 3;
  pointer-events: none;
}
.buch-blatt[hidden] { display: none; }
.buch-blatt .flaeche {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  background: var(--cream);
}
.buch-blatt .flaeche img { width: 100%; height: 100%; object-fit: cover; display: block; }
.buch-blatt .rueckseite { transform: rotateY(180deg); }

/* Vorwärts: rechte Seite klappt nach links. */
.buch-blatt.vor { left: auto; right: 0; transform-origin: left center; }
.buch-blatt.vor.laeuft { transform: rotateY(-180deg); }
/* Rückwärts: linke Seite klappt nach rechts. */
.buch-blatt.zurueck { left: 0; transform-origin: right center; transform: rotateY(180deg); }
.buch-blatt.zurueck.laeuft { transform: rotateY(0deg); }

/* Am Handy klappt die Seite nur bis zur Kante – sonst ragt sie aus dem Bild. */
.karte-buehne[data-seiten="1"] .buch-blatt.vor.laeuft { transform: rotateY(-92deg); }
.karte-buehne[data-seiten="1"] .buch-blatt.zurueck { transform-origin: left center; transform: rotateY(-92deg); }
.karte-buehne[data-seiten="1"] .buch-blatt.zurueck.laeuft { transform: rotateY(0deg); }
.karte-buehne[data-seiten="1"] .buch-blatt { transition-duration: 380ms; }

/* Blätter-Knöpfe links und rechts vom Buch */
.blatt-pfeil {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: none;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 160ms linear;
}
@media (hover: hover) and (pointer: fine) {
  .blatt-pfeil:hover { transform: scale(1.08); }
}
.blatt-pfeil:active { transform: scale(0.94); }
.blatt-pfeil[disabled] { opacity: 0.3; cursor: default; }

/* Hinweis beim ersten Besuch – verschwindet nach der ersten Berührung. */
.blatt-hinweis {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 400ms linear;
}
.blatt-hinweis .wisch { animation: wischen 1.9s var(--ease-in-out) infinite; }
@keyframes wischen {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  50%      { transform: translateX(-7px); opacity: 1; }
}
.blatt-hinweis[hidden] { display: none; }
.blatt-hinweis.weg { opacity: 0; }

/* Eselsohr oben rechts: zeigt, dass man die Ecke umschlagen kann. */
.eselsohr {
  position: absolute;
  top: 0;
  right: 0;
  width: 54px;
  height: 54px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(225deg, rgba(255,255,255,0.95) 46%, rgba(58,44,34,0.14) 52%, transparent 54%);
  border-top-right-radius: var(--radius-sm);
  transition: width 200ms var(--ease-out), height 200ms var(--ease-out);
}
.karte-buehne:hover .eselsohr { width: 72px; height: 72px; }
.karte-buehne[data-rechts="leer"] .eselsohr { display: none; }

/* Zähler und Kapitelchips */
.buch-fuss {
  margin-top: 22px;
  text-align: center;
}
.buch-zaehler {
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.buch-zaehler .kapitel { color: var(--pink-text); }
.buch-zaehler .trenn { font-style: normal; }
.buch-punkte {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 14px 0 22px;
}
.buch-punkte span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(58, 44, 34, 0.18);
  transition: background 200ms linear, transform 200ms var(--ease-out);
}
.buch-punkte span.aktiv { background: var(--pink-text); transform: scale(1.35); }

.buch-kapitel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
  margin: 0 auto;
}
.buch-kapitel button {
  border: 1px solid rgba(58, 44, 34, 0.14);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), background 150ms linear;
}
.buch-kapitel button[aria-current="true"] { background: var(--pink-soft); border-color: var(--pink); }
@media (hover: hover) and (pointer: fine) {
  .buch-kapitel button:hover { transform: translateY(-2px); }
}

/* ---------- Vergrößern ---------- */
.karte-zoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(30, 22, 16, 0.97);
  display: flex;
  flex-direction: column;
}
.karte-zoom[hidden] { display: none; }
.zoom-flaeche {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.zoom-flaeche img {
  display: block;
  max-height: 100%;
  width: auto;
  border-radius: 6px;
  cursor: zoom-in;
}
.zoom-flaeche.gross { align-items: flex-start; }
.zoom-flaeche.gross img {
  max-height: none;
  width: 185%;
  max-width: none;
  cursor: zoom-out;
}
.zoom-leiste {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  color: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
}
.zoom-leiste button {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.zoom-leiste button[disabled] { opacity: 0.3; }
.zoom-schliessen {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
  font-size: 1.3rem;
  cursor: pointer;
  z-index: 2;
}

/* ---------- Textfassung der Karte ---------- */
.karte-text { max-width: 760px; margin: 0 auto; }
.karte-text details {
  border-bottom: 1px solid rgba(58, 44, 34, 0.1);
}
.karte-text summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 2px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--ink);
  list-style: none;
}
.karte-text summary::-webkit-details-marker { display: none; }
.karte-text summary::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pink-text);
  transition: transform 200ms var(--ease-out);
}
.karte-text details[open] summary::after { transform: rotate(45deg); }
.karte-text .gericht {
  padding: 0 2px 20px;
}
.karte-text .gericht h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
.karte-text .gericht h3 .preis { white-space: nowrap; color: var(--pink-text); }
.karte-text .gericht p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.karte-text .gericht p.extras { margin-top: 3px; font-size: 0.88rem; }
.karte-text .gericht p.extras b { color: var(--ink); }
.karte-text .vorwort { color: var(--ink-soft); font-style: italic; padding: 0 2px 14px; }
.karte-text .karte-stand { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin-top: 28px; }

/* Ohne JavaScript: die Seiten einfach untereinander. */
.karte-ohne-js img { width: 100%; max-width: 520px; margin: 0 auto 14px; display: block; border-radius: var(--radius-sm); }

@media (max-width: 860px) {
  .karte-buehne { --seiten: 1; --seitenbreite: min(430px, 100vw - 34px, (100vh - 250px) * 0.699); }
  /* Am Handy stehen die Pfeile unter der Seite, links und rechts neben der
     Seitenzahl – so verdecken sie nichts von der Karte. Gewischt wird
     sowieso lieber. */
  .karte-buehne-wrap { gap: 0; }
  .blatt-pfeil {
    position: absolute;
    top: 100%;
    margin-top: 14px;
    z-index: 5;
    width: 44px;
    height: 44px;
    font-size: 1.35rem;
  }
  .blatt-pfeil.zurueck { left: 0; }
  .blatt-pfeil.vor { right: 0; }
  .buch-fuss { margin-top: 26px; }
  /* Platz für die beiden Pfeile links und rechts der Seitenzahl */
  .buch-zaehler { padding: 0 56px; font-size: 0.95rem; min-height: 44px;
                  display: flex; flex-direction: column; gap: 2px;
                  align-items: center; justify-content: center; }
  .buch-zaehler .trenn { display: none; }
  .karte-text summary { font-size: 1.25rem; }
}

/* Mit dem siebten Menüpunkt ("Speisekarte") wird die Kopfzeile früher eng. */
@media (min-width: 861px) and (max-width: 1130px) {
  nav.main-nav { gap: 14px; }
  nav.main-nav a { font-size: 0.86rem; }
  nav.main-nav a.btn { padding: 10px 16px; font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .buch-blatt { transition: none; }
  .blatt-hinweis .wisch { animation: none; }
}

/* ==========================================================================
   SALZZONE-SEITE IM DUNKLEN LOOK
   --------------------------------------------------------------------------
   salzzone.html übernimmt Farben und Salzpartikel von salzzone.de, damit der
   Wechsel auf die eigene Website nicht wie ein Bruch wirkt. Alles ist auf
   body.salzzone-seite eingegrenzt – keine andere Seite ist betroffen.
   Die Farbwerte stammen aus dem Stylesheet von salzzone.de.
   ========================================================================== */

body.salzzone-seite {
  --salz-bg:     #071e30;   /* tiefes Salzblau, Seitenhintergrund */
  --salz-bg-alt: #0c273c;   /* zweiter Flächenton */
  --salz-tief:   #04141f;   /* Fußbereich */
  --salz-glas:   rgba(255, 255, 255, 0.05);
  --salz-linie:  rgba(143, 230, 242, 0.18);
  --salz-glow:   #8fe6f2;   /* Türkis der Salzpartikel */
  --salz-ink:    #eef8fa;
  --salz-ink-soft: #a9c3cc;

  background: var(--salz-bg);
  color: var(--salz-ink);
}

/* Die Partikel liegen hinter allem und bleiben beim Scrollen stehen. */
body.salzzone-seite .salz-partikel {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body.salzzone-seite .site-header {
  background: rgba(7, 30, 48, 0.92);
  border-bottom: 1px solid var(--salz-linie);
  backdrop-filter: blur(6px);
}
body.salzzone-seite nav.main-nav a { color: var(--salz-ink); }
body.salzzone-seite nav.main-nav a.active { border-color: var(--salz-glow); }
body.salzzone-seite .nav-toggle { color: var(--salz-ink); }
@media (hover: hover) and (pointer: fine) {
  body.salzzone-seite nav.main-nav a:not(.btn):hover { border-color: var(--salz-glow); }
}
@media (max-width: 860px) {
  body.salzzone-seite nav.main-nav { background: var(--salz-bg); }
}

/* Hero: der Lichtschein von oben wie auf salzzone.de, keine helle Fläche mehr */
body.salzzone-seite .page-hero.salt {
  background: radial-gradient(120% 90% at 50% 0%, rgba(143, 230, 242, 0.16), transparent 62%);
}
body.salzzone-seite h1,
body.salzzone-seite h2,
body.salzzone-seite h3,
body.salzzone-seite h4 { color: var(--salz-ink); }
body.salzzone-seite h1 { text-shadow: 0 0 36px rgba(143, 230, 242, 0.35); }
body.salzzone-seite p { color: var(--salz-ink); }
body.salzzone-seite .page-hero p.lead { color: var(--salz-ink-soft); }
body.salzzone-seite .eyebrow { color: var(--salz-glow); }

body.salzzone-seite .salt-badge {
  background: var(--salz-glas);
  border: 1px solid var(--salz-linie);
  box-shadow: 0 0 60px rgba(143, 230, 242, 0.18);
}
body.salzzone-seite .salt-badge img {
  filter: brightness(0) invert(1) drop-shadow(0 0 22px rgba(143, 230, 242, 0.45));
}

/* Inhaltsblöcke: Glasflächen statt weißer Karten */
body.salzzone-seite .rules-list li {
  background: var(--salz-glas);
  border: 1px solid var(--salz-linie);
  box-shadow: none;
}
body.salzzone-seite .rules-list.schritte strong { color: var(--salz-glow); }
body.salzzone-seite .form-note {
  background: rgba(255, 255, 255, 0.04);
  border-left: 4px solid var(--salz-glow);
  color: var(--salz-ink-soft);
}

/* Knöpfe: der türkise ist jetzt der Hauptknopf, der Umriss wird hell */
body.salzzone-seite .btn-salt {
  background: var(--salz-glow);
  color: #06283a;
  box-shadow: 0 10px 28px rgba(143, 230, 242, 0.22);
}
body.salzzone-seite .btn-outline {
  border-color: var(--salz-linie);
  color: var(--salz-ink);
}
body.salzzone-seite .btn-primary { background: var(--salz-glow); color: #06283a; }

body.salzzone-seite footer.site-footer {
  background: var(--salz-tief);
  color: var(--salz-ink);
  border-top: 1px solid var(--salz-linie);
}
body.salzzone-seite footer.site-footer h4 { color: var(--salz-glow); }