/* ------------------------------------------------------------------
   webseitefix.at — heller Auftritt
   Hausfarbe: Logo-Blau #1E4FD8. Kein Verlauf, kein Violett, keine Emojis.
   Schrift: System-Stack (keine Google-Fonts-Einbindung -> keine IP-Übertragung).
   ------------------------------------------------------------------ */

:root {
  --blau:        #1E4FD8;
  --blau-dunkel: #1740B0;
  --blau-blass:  #EDF1FD;
  --tinte:       #15181D;
  --grau:        #5A616B;
  --linie:       #E3E5E9;
  --papier:      #FFFFFF;
  --papier-2:    #F6F7F9;
  --sand:        #FBFAF7;
  --nacht:       #17284A;   /* elegantes Nachtblau statt Schwarz */
  --nacht-2:     #1E3360;
  --nacht-rand:  #2C447A;
  --nacht-text:  #C3CFE4;
  --max:         1140px;
  --radius:      10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blau); }

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

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 650; }
p  { margin: 0 0 1em; }

.vorzeile {
  font-size: .78rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--blau); margin: 0 0 .9em;
}
.lead  { font-size: 1.14rem; color: var(--grau); max-width: 60ch; }
.klein { font-size: .9rem; color: var(--grau); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block; padding: 14px 26px; border-radius: var(--radius);
  background: var(--blau); color: #fff; text-decoration: none;
  font-weight: 650; font-size: 1rem; border: 1px solid var(--blau);
  transition: background .15s ease;
}
.knopf:hover { background: var(--blau-dunkel); }
.knopf--rand {
  background: transparent; color: var(--tinte); border-color: var(--linie);
}
.knopf--rand:hover { background: var(--papier-2); }
.knopf--hell {
  background: #fff; color: var(--tinte); border-color: #fff;
}
.knopf--hell:hover { background: #EEF1F6; }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94); border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(160%) blur(6px);
}
.kopf__innen {
  max-width: var(--max); margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 26px;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.12rem; color: var(--tinte); text-decoration: none;
  letter-spacing: -0.02em; white-space: nowrap;
}
.logo__zeichen {
  width: 28px; height: 28px; border-radius: 7px; background: var(--blau);
  color: #fff; font-size: .95rem; font-weight: 700;
  display: grid; place-items: center;
}
.logo__at { color: var(--blau); }
.nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.nav a { color: var(--grau); text-decoration: none; font-size: .95rem; font-weight: 550; }
.nav a:hover { color: var(--tinte); }
.nav .knopf { padding: 9px 17px; font-size: .93rem; color: #fff; }
@media (max-width: 900px) { .nav a:not(.knopf) { display: none; } }

/* ---------- Hero mit Mosaikwand ---------- */
.hero { position: relative; overflow: hidden; background: #0E1013; }
.hero__wand {
  position: absolute; inset: -14% -8%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
  transform: rotate(-7deg) scale(1.16);
  opacity: .9;
}
@media (max-width: 760px) {
  .hero__wand { grid-template-columns: repeat(4, 1fr); gap: 11px; transform: rotate(-7deg) scale(1.3); }
  .hero__schleier { background:
    radial-gradient(95% 62% at 50% 44%,
      rgba(14,16,19,.93) 0%, rgba(14,16,19,.86) 45%,
      rgba(14,16,19,.58) 78%, rgba(14,16,19,.38) 100%); }
  .hero__text { padding: 76px 22px 70px; }
}
.hero__spalte { display: grid; gap: 16px; align-content: start; }
.hero__spalte--tief { margin-top: 70px; }
.hero__schleier {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 72% at 50% 46%,
      rgba(14,16,19,.88) 0%,
      rgba(14,16,19,.80) 42%,
      rgba(14,16,19,.52) 74%,
      rgba(14,16,19,.34) 100%);
}
.hero__text {
  position: relative; z-index: 2;
  max-width: var(--max); margin: 0 auto; padding: 108px 22px 96px;
  text-align: center; color: #fff;
}
.hero__text h1 { color: #fff; max-width: 17ch; margin: 0 auto .55rem; }
.hero__unter {
  color: #D7DBE2; font-size: 1.12rem; max-width: 46ch; margin: 0 auto 1.9rem;
}
.hero__knoepfe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero__fuss {
  margin-top: 2.3rem; color: #9AA2AE; font-size: .86rem;
  display: flex; gap: 10px 22px; justify-content: center; flex-wrap: wrap;
}

/* Die Kacheln sind gerenderte Website-Entwürfe (kacheln/*.webp) */
.hero__spalte img {
  width: 100%; height: auto; display: block;
  border-radius: 9px; background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
}
/* Echte Bildschirmfotos sind quer - auf Hochformat zuschneiden,
   damit die Wand ruhig bleibt */
.hero__spalte img.kachel--echt {
  aspect-ratio: 440 / 500; object-fit: cover; object-position: top center;
}

/* ---------- Abschnitte ---------- */
.block { padding: 78px 0; }
.block--grau { background: var(--papier-2); }
.block--sand { background: var(--sand); }
.block--schmal { padding: 54px 0; }
.kopfzeile { max-width: 62ch; margin-bottom: 42px; }

/* Zahlenband */
.zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 720px) { .zahlen { grid-template-columns: repeat(2, 1fr); } }
.zahlen div { background: #fff; padding: 26px 20px; }
.zahlen b { display: block; font-size: 1.85rem; font-weight: 700; letter-spacing: -0.03em; }
.zahlen span { font-size: .9rem; color: var(--grau); }

/* Ablauf: bewusst ungleich gewichtet */
.ablauf { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .ablauf { grid-template-columns: 1fr; } }
.schritt {
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 26px 24px; background: #fff;
}
.schritt--gross { background: var(--blau); color: #fff; border-color: var(--blau); }
.schritt--gross h3, .schritt--gross .nr { color: #fff; }
.schritt.schritt--gross p { color: #DCE4FB; }
.nr {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: var(--blau); display: block; margin-bottom: 10px;
}
.schritt p { margin: 0; color: var(--grau); font-size: .98rem; }

/* Branchenzeile */
.marken { display: flex; flex-wrap: wrap; gap: 9px; }
.marke {
  border: 1px solid var(--linie); background: #fff; border-radius: 100px;
  padding: 8px 16px; font-size: .93rem; font-weight: 550;
}

/* Gastro-Block */
.nacht { background: var(--nacht); color: #fff; }
.nacht h2, .nacht h3 { color: #fff; }
.nacht .vorzeile { color: #8FB0FF; }
.nacht p { color: var(--nacht-text); }
.nacht .knopf { background: #fff; color: var(--nacht); border-color: #fff; }
.nacht .knopf:hover { background: #E6ECF8; }
.gastro__gitter { display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: start; }
@media (max-width: 900px) { .gastro__gitter { grid-template-columns: 1fr; gap: 34px; } }
.gastro__liste { list-style: none; padding: 0; margin: 0 0 28px; }
.gastro__liste li {
  padding: 13px 0; border-top: 1px solid var(--nacht-rand);
  color: #E8EDF6; font-size: .99rem;
}
.gastro__liste li b { color: #fff; font-weight: 650; }
.gastro__preise { display: grid; gap: 14px; }
.gastro__bild {
  width: 100%; height: auto; border-radius: 10px; display: block;
  border: 1px solid var(--nacht-rand); margin-bottom: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,.30);
}
.gastro__preis {
  border: 1px solid var(--nacht-rand); border-radius: var(--radius);
  padding: 22px 24px; background: var(--nacht-2);
}
.gastro__preis b { display: block; font-size: 1.5rem; font-weight: 700; }
.gastro__preis span { color: #A7B8D6; font-size: .93rem; }

/* Preise */
.pakete { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
@media (max-width: 880px) { .pakete { grid-template-columns: 1fr; } }
.paket {
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 28px 26px; background: #fff;
}
.paket--mitte { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau); }
.paket__preis { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.paket ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: .96rem; color: var(--grau); }
.paket li { padding: 7px 0; border-top: 1px solid var(--linie); }

/* Referenzen */
.refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 880px) { .refs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .refs { grid-template-columns: 1fr; } }
.ref {
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
  background: #fff; text-decoration: none; color: inherit; display: block;
  transition: border-color .15s ease, transform .15s ease;
}
.ref:hover { border-color: var(--blau); transform: translateY(-2px); }
.ref img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  display: block; background: var(--papier-2); border-bottom: 1px solid var(--linie);
}
.ref__text { padding: 16px 18px 18px; }
.ref b { display: block; margin-bottom: 4px; }
.ref span { font-size: .92rem; color: var(--grau); }

/* Formular */
.formular {
  background: #fff; border: 1px solid var(--linie); border-radius: 14px;
  padding: 34px; max-width: 640px;
}
.feld { margin-bottom: 16px; }
.feld label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: 6px; }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--tinte);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}
.feld--paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .feld--paar { grid-template-columns: 1fr; } }
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
@media (max-width: 560px) { .wahl { grid-template-columns: 1fr; } }
.wahl button {
  padding: 20px 18px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: #fff; font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.wahl button:hover { border-color: var(--blau); background: var(--blau-blass); }
.zustimmung {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: .89rem; color: var(--grau); margin: 18px 0 22px; line-height: 1.5;
}
.zustimmung input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--blau); }
.stufe[hidden] { display: none; }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--linie); padding: 17px 0;
}
.faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--blau); font-weight: 700; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 12px 0 0; color: var(--grau); font-size: .98rem; }

/* Person */
.person { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; } }
.person__bild {
  width: 220px; height: 270px; border-radius: 12px; object-fit: cover;
  object-position: center top; border: 1px solid var(--linie); background: var(--papier-2);
}
@media (max-width: 700px) { .person__bild { width: 180px; height: 220px; } }

/* Fußzeile */
.fuss { background: var(--nacht); color: #A7B8D6; padding: 54px 0 36px; font-size: .93rem; }
.fuss strong { color: #fff; display: block; margin-bottom: 8px; font-weight: 650; }
.fuss a { color: #CBD7EA; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss__gitter { display: flex; flex-wrap: wrap; gap: 26px 48px; margin-bottom: 30px; }
.fuss__schluss { border-top: 1px solid var(--nacht-rand); padding-top: 22px; font-size: .86rem; }

/* Sticky-Leiste Handy */
.handyleiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 70; display: none;
  background: #fff; border-top: 1px solid var(--linie); padding: 10px 14px;
  gap: 10px;
}
.handyleiste a { flex: 1; text-align: center; padding: 13px 10px; font-size: .95rem; }
@media (max-width: 760px) {
  .handyleiste { display: flex; }
  body { padding-bottom: 72px; }
}

/* Zweiter Hero-Knopf: sichtbar, aber zurückhaltend */
.knopf--geist {
  background: rgba(14,16,19,.52); color: #fff; border-color: rgba(255,255,255,.42);
  backdrop-filter: blur(3px);
}
.knopf--geist:hover { background: rgba(14,16,19,.74); border-color: #fff; }

/* ---------- Vorher/Nachher-Schieberegler ---------- */
/* Heller Rahmen rundherum, wie beim Vorbild */
.vergleich {
  background: var(--sand); border: 1px solid var(--linie);
  border-radius: 16px; padding: 14px 14px 10px;
}
.vergleich__unterschrift {
  margin: 12px 4px 4px; font-size: .86rem; color: var(--grau); text-align: center;
}
.schieber {
  position: relative; width: 100%; aspect-ratio: 1200 / 820;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--linie);
  background: var(--papier-2); cursor: ew-resize; touch-action: none;
  user-select: none; -webkit-user-select: none;
  box-shadow: 0 10px 28px rgba(16,24,44,.14);
}
.schieber__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block;
}
.schieber__bild--neu {
  clip-path: inset(0 0 0 var(--pos));
}
.schieber__griff {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: #fff; z-index: 4; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(16,24,44,.18);
}
.schieber__griff span {
  position: absolute; top: 50%; left: 50%; width: 38px; height: 38px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #fff; box-shadow: 0 3px 14px rgba(16,24,44,.34);
}
.schieber__griff span::before,
.schieber__griff span::after {
  content: ""; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  transform: translateY(-50%);
}
.schieber__griff span::before {
  left: 9px; border-right: 7px solid var(--tinte);
}
.schieber__griff span::after {
  right: 9px; border-left: 7px solid var(--tinte);
}
/* Zwei gleiche weisse Pillen, wie im Vorbild */
.schieber__marke {
  position: absolute; top: 14px; z-index: 5; pointer-events: none;
  background: rgba(255,255,255,.94); color: var(--tinte);
  font-size: .78rem; font-weight: 650; letter-spacing: .01em;
  padding: 7px 15px; border-radius: 100px;
  box-shadow: 0 2px 10px rgba(16,24,44,.18);
}
.schieber__marke--links  { left: 14px; }
.schieber__marke--rechts { right: 14px; }
/* Der Regler liegt unsichtbar über dem Bild – für Tastatur und Vorlesehilfen */
.schieber__regler {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; z-index: 6;
  margin: 0; opacity: 0; height: 100%; cursor: ew-resize;
}
.schieber__regler:focus-visible { opacity: .001; outline: 3px solid var(--blau); }

/* Befundspalten unter dem Regler */
.befund { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
@media (max-width: 760px) { .befund { grid-template-columns: 1fr; } }
.befund > div {
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 24px;
  background: #fff;
}
.befund > div:first-child { background: var(--papier-2); }
.befund h3 { margin-bottom: 10px; }
.befund ul { margin: 0; padding-left: 18px; }
.befund li { font-size: .96rem; color: var(--grau); padding: 4px 0; }

/* Stichwortzeile im SEO-Abschnitt */
.stichworte {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px;
  padding-top: 24px; border-top: 1px solid var(--linie);
}
.stichworte span {
  font-size: .84rem; color: var(--grau); background: var(--papier-2);
  border: 1px solid var(--linie); border-radius: 100px; padding: 6px 13px;
}

/* ---------- Zustimmungsbanner (Consent Mode v2) ---------- */
.cc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; justify-content: center;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  opacity: 0; transform: translateY(14px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.cc--da { opacity: 1; transform: none; }
.cc__karte {
  pointer-events: auto;
  width: 100%; max-width: 660px; background: #fff;
  border: 1px solid var(--linie); border-radius: 14px;
  padding: 26px 28px 22px;
  box-shadow: 0 20px 56px rgba(16,24,44,.26), 0 2px 6px rgba(16,24,44,.08);
}
.cc__titel { font-size: 1.22rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.02em; }
.cc__text  { font-size: .93rem; color: var(--grau); margin: 0 0 18px; line-height: 1.55; }

/* Drei gleichwertige Knöpfe nebeneinander */
.cc__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 620px) { .cc__knoepfe { grid-template-columns: 1fr; } }
.cc__knopf {
  font: inherit; font-size: .95rem; font-weight: 650; cursor: pointer;
  padding: 13px 16px; border-radius: 100px; border: 1px solid var(--linie);
  background: #fff; color: var(--tinte); text-align: center;
  transition: background .14s ease, border-color .14s ease;
}
.cc__knopf:hover { background: var(--papier-2); border-color: #C9CDD4; }
/* Zustimmen und Ablehnen müssen GLEICH aussehen — gleiche Farbe, gleiche Größe,
   gleiches Gewicht. Ein hervorgehobenes "Akzeptieren" neben einem blassen
   "Ablehnen" gilt der Datenschutzbehörde als unzulässige Beeinflussung. */
.cc__knopf--ja,
.cc__knopf--nein {
  background: var(--blau); border-color: var(--blau); color: #fff;
}
.cc__knopf--ja:hover,
.cc__knopf--nein:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
/* Die dritte Schaltfläche ist keine Entscheidung, sondern ein Umweg —
   deshalb darf sie zurückhaltender sein. */
.cc__knopf--mehr { background: #fff; color: var(--tinte); border-color: var(--linie); }
.cc__knopf--mehr:hover { background: var(--papier-2); border-color: #C9CDD4; }
.cc__knopf:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.cc__kats {
  display: grid; gap: 2px; margin: 0 0 18px;
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
  background: var(--linie);
}
.cc__kat {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 15px 17px; background: #fff; cursor: pointer;
}
.cc__kat--fest { cursor: default; background: var(--papier-2); }
.cc__kat input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--blau); }
.cc__kat-text b { display: block; font-size: .95rem; font-weight: 650; margin-bottom: 2px; }
.cc__kat-text b i {
  font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grau); margin-left: 6px;
}
.cc__kat-text > span { font-size: .87rem; color: var(--grau); line-height: 1.5; }

.cc__fuss { margin: 16px 0 0; font-size: .82rem; color: var(--grau); text-align: center; }
.cc__fuss a { color: var(--grau); }

/* Die Handyleiste darf den Banner nicht verdecken */
@media (max-width: 760px) { .cc { bottom: 66px; } }

/* Das hidden-Attribut muss stärker sein als display:grid */
.cc__kats[hidden] { display: none; }
/* Am Handy darf der Kasten nicht über den Bildschirm hinauswachsen */
.cc__karte { max-height: calc(100vh - 110px); overflow-y: auto; }
@media (max-width: 760px) {
  .cc__karte { max-height: calc(100vh - 150px); padding: 22px 20px 18px; }
  .cc__titel { font-size: 1.12rem; }
  .cc__text  { font-size: .89rem; }
}

/* ---------- Bewegung der Mosaikwand ---------- */
.hero__spalte { overflow: hidden; }
.hero__band {
  display: grid; gap: 14px; align-content: start;
  will-change: transform;
  animation: wandHoch 56s linear infinite;
}
.hero__band--runter { animation-name: wandRunter; }
/* Jedes Band enthält seine Kacheln zweimal — nach genau der Hälfte
   springt es zurück, und niemand sieht den Schnitt. */
@keyframes wandHoch   { from { transform: translateY(0);     } to { transform: translateY(-50%); } }
@keyframes wandRunter { from { transform: translateY(-50%);  } to { transform: translateY(0);    } }

/* Beim Überfahren anhalten, damit man eine Kachel in Ruhe ansehen kann */
.hero:hover .hero__band { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero__band { animation: none !important; }
}

/* ---------- Verwaltungs-Symbol links unten ---------- */
.schloss {
  position: fixed; left: 16px; bottom: 16px; z-index: 80;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.72); border: 1px solid var(--linie);
  color: #9AA1AB; text-decoration: none;
  opacity: .34; transition: opacity .18s ease, color .18s ease, background .18s ease;
  backdrop-filter: blur(5px);
}
.schloss:hover, .schloss:focus-visible {
  opacity: 1; color: var(--blau); background: #fff;
}
.schloss svg { width: 15px; height: 15px; display: block; }
@media (max-width: 760px) { .schloss { bottom: 80px; left: 12px; } }

/* ---------- Branchen mit Bild ---------- */
.branchen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
@media (max-width: 980px) { .branchen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .branchen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .branchen { grid-template-columns: 1fr; } }
.branche {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--linie); border-radius: 11px; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.branche:hover { border-color: var(--blau); transform: translateY(-2px); }
.branche img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  display: block; background: var(--papier-2); border-bottom: 1px solid var(--linie);
}
.branche__text { padding: 13px 15px 15px; }
.branche__text b { display: block; font-size: .99rem; font-weight: 650; margin-bottom: 3px; }
.branche__text span { font-size: .87rem; color: var(--grau); line-height: 1.45; }

/* Die Kopfleiste klebt oben — Sprungziele müssen darunter Platz lassen,
   sonst verdeckt sie die Überschrift. */
section[id], div[id="entwurf"] { scroll-margin-top: 78px; }
@media (max-width: 760px) { section[id] { scroll-margin-top: 66px; } }

/* ======================================================================
   Befundspalten unter dem Schieberegler
   ====================================================================== */
.befund__spalte {
  border: 1px solid var(--linie); border-radius: 12px; padding: 24px 26px;
  background: #fff; border-top: 3px solid var(--linie);
}
.befund__spalte--alt { background: #FDF7F6; border-top-color: #C9564E; }
.befund__spalte--neu { background: #F5FAF7; border-top-color: #2E8B57; }
.befund__spalte h3 { margin-bottom: 14px; font-size: 1.05rem; }
.befund__spalte ul { list-style: none; margin: 0; padding: 0; }
.befund__spalte li {
  position: relative; padding: 8px 0 8px 30px; font-size: .95rem;
  color: #3F454E; line-height: 1.5;
  border-top: 1px solid rgba(16,24,44,.07);
}
.befund__spalte li:first-child { border-top: 0; }
.befund__spalte li::before {
  position: absolute; left: 0; top: 8px; width: 19px; height: 19px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; color: #fff;
}
.befund__spalte--alt li::before { content: "✕"; background: #C9564E; }
.befund__spalte--neu li::before { content: "✓"; background: #2E8B57; }

/* ======================================================================
   Alleinstellungsmerkmal: die mitarbeitende Website
   ====================================================================== */
.block--usp {
  background:
    radial-gradient(90% 70% at 10% 0%, #EDF2FE 0%, rgba(237,242,254,0) 60%),
    var(--papier);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
}
.usp { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .usp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .usp { grid-template-columns: 1fr; } }
.usp__karte {
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 26px 26px 28px;
}
.usp__karte--haupt {
  grid-row: span 2; background: var(--blau); border-color: var(--blau); color: #fff;
  box-shadow: 0 16px 40px rgba(30,79,216,.22);
}
@media (max-width: 980px) { .usp__karte--haupt { grid-row: auto; grid-column: 1 / -1; } }
.usp__karte--haupt h3 { color: #fff; font-size: 1.5rem; }
.usp__karte--haupt p  { color: #DCE4FB; font-size: 1.02rem; }
.usp__karte--haupt .usp__nr { color: #BACBFA; }
.usp__nr {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blau); margin-bottom: 10px;
}
.usp__karte h3 { font-size: 1.1rem; margin-bottom: 8px; }
.usp__karte p { margin: 0; color: var(--grau); font-size: .96rem; line-height: 1.55; }

/* ======================================================================
   GASTRO — eigener, kräftiger Auftritt
   ====================================================================== */
.gastro {
  background:
    radial-gradient(70% 90% at 88% 0%, #22407A 0%, rgba(34,64,122,0) 62%),
    radial-gradient(60% 80% at 0% 100%, #16304F 0%, rgba(22,48,79,0) 58%),
    linear-gradient(168deg, #16233F 0%, #101B31 100%);
  color: #fff; position: relative; overflow: hidden;
}
.gastro h2, .gastro h3 { color: #fff; }
.gastro p { color: #BFCCE4; }

.gastro__kopf { max-width: 760px; margin-bottom: 38px; }
.gastro__marke {
  display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #0B1A33; background: #7FE3C0;
  padding: 7px 14px; border-radius: 100px; margin-bottom: 18px;
}
.gastro__kopf h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 14px; }
.gastro__lead { font-size: 1.1rem; line-height: 1.6; }
.gastro__lead strong { color: #7FE3C0; font-weight: 650; }

.gastro__zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.12); border-radius: 12px; overflow: hidden;
  margin-bottom: 34px;
}
@media (max-width: 820px) { .gastro__zahlen { grid-template-columns: 1fr 1fr; } }
.gastro__zahlen div { background: #152C4D; padding: 22px 20px; }
.gastro__zahlen b {
  display: block; font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em;
  color: #7FE3C0; line-height: 1.05; margin-bottom: 5px;
}
.gastro__zahlen span { font-size: .87rem; color: #A9BBD8; line-height: 1.45; }

.gastro__gitter { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px) { .gastro__gitter { grid-template-columns: 1fr; } }
.gastro__karten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .gastro__karten { grid-template-columns: 1fr; } }
.gkarte {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 22px 23px;
}
.gkarte--gross { grid-column: 1 / -1; background: rgba(127,227,192,.09); border-color: rgba(127,227,192,.3); }
.gkarte h3 { font-size: 1.04rem; margin-bottom: 7px; }
.gkarte p  { margin: 0; font-size: .94rem; line-height: 1.55; }
.gkarte strong { color: #7FE3C0; font-weight: 650; }

.gastro__seite { display: grid; gap: 14px; }
.gastro__bild {
  width: 100%; height: auto; border-radius: 12px; display: block;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}
.gastro__preis {
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: 20px 22px; background: rgba(255,255,255,.05);
}
.gastro__preis--voll { border-color: rgba(127,227,192,.42); background: rgba(127,227,192,.08); }
.gastro__preis-name { font-size: .88rem; color: #A9BBD8; }
.gastro__preis b {
  display: block; font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em;
  margin: 2px 0 6px;
}
.gastro__preis-text { font-size: .88rem; color: #A9BBD8; line-height: 1.5; display: block; }
.gastro__fussnote { font-size: .86rem; color: #94A8C8; margin: 2px 0 6px; }
.knopf--gastro { background: #7FE3C0; border-color: #7FE3C0; color: #0B1A33; text-align: center; }
.knopf--gastro:hover { background: #63D4AE; border-color: #63D4AE; }
.knopf--gastro-rand {
  background: transparent; border-color: rgba(255,255,255,.4); color: #fff; text-align: center;
}
.knopf--gastro-rand:hover { background: rgba(255,255,255,.1); border-color: #fff; }

/* GASTRO in der Navigation hervorheben */
.nav .nav__gastro {
  color: var(--tinte); font-weight: 700;
  background: #D8F7EC; border: 1px solid #9FE4CC;
  padding: 6px 13px; border-radius: 100px;
}
.nav .nav__gastro:hover { background: #BFF0DE; }

/* ======================================================================
   Regionen
   ====================================================================== */
.regionen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .regionen { grid-template-columns: 1fr; } }
.region {
  background: #fff; border: 1px solid var(--linie); border-radius: 12px;
  padding: 24px 26px; border-top: 3px solid var(--blau);
}
.region h3 { font-size: 1.22rem; margin-bottom: 6px; }
.region > p { color: var(--grau); font-size: .95rem; margin-bottom: 12px; }
.region__orte {
  font-size: .87rem; color: #6A717B; line-height: 1.75;
  border-top: 1px solid var(--linie); padding-top: 12px; margin: 0;
}

/* ======================================================================
   Handy: Rubriken oben, waagrecht scrollbar
   ====================================================================== */
.handynav { display: none; }
@media (max-width: 900px) {
  .handynav {
    display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
    padding: 9px 14px 10px; border-top: 1px solid var(--linie);
    background: #fff; -webkit-overflow-scrolling: touch;
  }
  .handynav::-webkit-scrollbar { display: none; }
  .handynav a {
    flex: 0 0 auto; font-size: .86rem; font-weight: 600; color: var(--grau);
    text-decoration: none; padding: 7px 14px; border-radius: 100px;
    border: 1px solid var(--linie); background: var(--papier-2); white-space: nowrap;
  }
  .handynav a:active { background: var(--blau-blass); color: var(--blau); }
  .handynav .handynav__gastro {
    background: #D8F7EC; border-color: #9FE4CC; color: #0B3B2C; font-weight: 700;
  }
  /* Sprungziele brauchen jetzt mehr Luft: zwei Leisten kleben oben */
  section[id] { scroll-margin-top: 112px; }
}

/* Nachtrag: diese Regeln müssen die älteren allgemeinen überstimmen.
   (.befund > div und .usp__karte p stehen weiter oben und waren stärker.) */
.befund .befund__spalte--alt { background: #FDF7F6; border-top-color: #C9564E; }
.befund .befund__spalte--neu { background: #F5FAF7; border-top-color: #2E8B57; }
.usp .usp__karte--haupt p { color: #DCE4FB; }
.usp .usp__karte--haupt h3 { color: #fff; }

/* ======================================================================
   Google-Bewertung: Sterne sichtbar machen
   ====================================================================== */
.sterne { display: inline-flex; gap: 3px; line-height: 1; }
.sterne svg { width: 19px; height: 19px; fill: #F5A623; display: block; }
.sterne--hell svg { width: 15px; height: 15px; fill: #FFC24D; }

.bewertung {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--linie); border-left: 4px solid #F5A623;
  border-radius: 12px; padding: 18px 24px; margin-bottom: 26px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bewertung:hover {
  border-color: #F5A623; box-shadow: 0 6px 20px rgba(245,166,35,.16);
}
.bewertung__note {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em;
  color: var(--tinte); line-height: 1;
}
.bewertung__mitte { display: grid; gap: 6px; }
.bewertung__text { font-size: .94rem; color: var(--grau); }
.bewertung__text strong { color: var(--tinte); font-weight: 700; }
.bewertung__link {
  margin-left: auto; font-size: .92rem; font-weight: 650; color: var(--blau);
  white-space: nowrap;
}
.bewertung__link::after { content: " →"; }
@media (max-width: 560px) {
  .bewertung { gap: 14px; padding: 16px 18px; }
  .bewertung__link { margin-left: 0; }
}

/* Sterne in der Hero-Fußzeile */
.hero__sterne { display: inline-flex; align-items: center; gap: 7px; color: #D7DBE2; }
.hero__sterne b { color: #fff; font-weight: 700; }

/* ======================================================================
   FEHLERBEHEBUNGEN
   ====================================================================== */

/* 1. Kacheln bewegen sich am Handy nicht: Auf Touch-Geräten bleibt :hover
      nach dem ersten Antippen hängen — die Wand stand dadurch still.
      Pause nur noch dort, wo es eine echte Maus gibt. */
.hero:hover .hero__band { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .hero:hover .hero__band { animation-play-state: paused; }
}

/* 2. Seite hängt beim Schieberegler: touch-action:none hat auch das
      senkrechte Scrollen geschluckt. Jetzt bleibt Wischen nach oben und
      unten frei, nur das Ziehen zur Seite greift der Regler ab. */
.schieber { touch-action: pan-y; }

/* ======================================================================
   PREMIUM-FEINSCHLIFF — ruhiger, heller, mehr Luft
   ====================================================================== */
:root {
  --blau:        #1D4ED8;
  --blau-dunkel: #1A41B0;
  --blau-blass:  #EEF3FD;
  --tinte:       #11151C;
  --grau:        #5C6472;
  --linie:       #E7E9ED;
  --papier-2:    #F7F8FA;
  --sand:        #FAFAF8;
  --nacht:       #141E33;
  --nacht-2:     #1C2B49;
  --nacht-rand:  #2A3C60;
}
body { font-size: 16.5px; letter-spacing: -0.003em; }
h1, h2, h3 { letter-spacing: -0.022em; }
h2 { font-weight: 680; }

/* Karten: feinere Kanten, weicherer Schatten statt harter Linie */
.paket, .ref, .region, .usp__karte, .befund__spalte, .schritt, .formular,
.branche, .lauf__karte {
  box-shadow: 0 1px 2px rgba(17,21,28,.04), 0 8px 24px rgba(17,21,28,.045);
}
.zahlen { box-shadow: 0 1px 2px rgba(17,21,28,.04), 0 10px 30px rgba(17,21,28,.05); }
.knopf { box-shadow: 0 1px 2px rgba(17,21,28,.06); }
.knopf:not(.knopf--rand):not(.knopf--hell):not(.knopf--geist) {
  box-shadow: 0 2px 6px rgba(29,78,216,.22), 0 1px 2px rgba(17,21,28,.06);
}

/* ======================================================================
   Laufband „Für wen das passt"
   ====================================================================== */
.laufband {
  position: relative; overflow: hidden;
  margin: 0 calc(-1 * max(22px, (100vw - var(--max)) / 2));
  padding: 4px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.laufband__spur {
  display: flex; gap: 16px; width: max-content;
  animation: laufLinks var(--lauf-tempo, 64s) linear infinite;
  will-change: transform;
}
.laufband[data-richtung="rechts"] .laufband__spur { animation-name: laufRechts; }
@keyframes laufLinks  { from { transform: translateX(0); }        to { transform: translateX(-50%); } }
@keyframes laufRechts { from { transform: translateX(-50%); }     to { transform: translateX(0); } }
@media (hover: hover) and (pointer: fine) {
  .laufband:hover .laufband__spur { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .laufband__spur { animation: none; }
  .laufband { overflow-x: auto; }
}
.lauf__karte {
  flex: 0 0 236px; display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--linie); border-radius: 14px;
  overflow: hidden; transition: border-color .15s ease, transform .15s ease;
}
.lauf__karte:hover { border-color: var(--blau); transform: translateY(-3px); }
.lauf__karte img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  display: block; background: var(--papier-2); border-bottom: 1px solid var(--linie);
}
.lauf__titel {
  display: block; padding: 13px 15px 2px; font-size: .97rem; font-weight: 650;
}
.lauf__text {
  display: block; padding: 0 15px 15px; font-size: .85rem; color: var(--grau);
  line-height: 1.45;
}

/* ======================================================================
   Seestern-Testzugang
   ====================================================================== */
.ref--test {
  grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border-color: #9FE4CC; background: linear-gradient(180deg, #F3FCF8 0%, #fff 100%);
}
@media (max-width: 880px) { .ref--test { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ref--test { grid-column: span 1; } }
.ref--test img { height: 100%; border-bottom: 0; border-right: 1px solid var(--linie); }
@media (max-width: 880px) { .ref--test img { border-right: 0; border-bottom: 1px solid var(--linie); } }
.ref--test .ref__text { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 24px; }
.ref__marke {
  align-self: flex-start; font-size: .7rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #0B3B2C; background: #BFF0DE;
  padding: 5px 11px; border-radius: 100px; margin-bottom: 6px;
}
.ref--test .ref__text > b { font-size: 1.14rem; }
.ref__knoepfe { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.ref__knoepfe .knopf { padding: 11px 18px; font-size: .92rem; }

.gastro__test {
  border: 1px solid rgba(127,227,192,.35); background: rgba(127,227,192,.08);
  border-radius: 12px; padding: 18px 20px; display: grid; gap: 9px;
}
.gastro__test-titel {
  font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #7FE3C0;
}
.gastro__test-hinweis { font-size: .84rem; color: #9FB0CC; }
.knopf--gastro-zweit {
  background: transparent; border-color: #7FE3C0; color: #7FE3C0; text-align: center;
}
.knopf--gastro-zweit:hover { background: rgba(127,227,192,.14); }

/* ======================================================================
   Zustimmungsfenster — schlanker, eleganter, am Handy nicht mehr wuchtig
   ====================================================================== */
.cc { padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.cc__karte {
  max-width: 560px; padding: 20px 22px 18px; border-radius: 16px;
  border-color: rgba(17,21,28,.08);
  box-shadow: 0 24px 64px rgba(17,21,28,.22), 0 2px 8px rgba(17,21,28,.07);
}
.cc__titel { font-size: 1.06rem; margin-bottom: 5px; }
.cc__text  { font-size: .88rem; line-height: 1.5; margin-bottom: 14px; }
.cc__knopf { padding: 11px 14px; font-size: .9rem; }
.cc__fuss  { margin-top: 12px; font-size: .78rem; }

@media (max-width: 760px) {
  /* Am Handy kommt der Kasten von unten, über der Aktionsleiste —
     aber schlank, mit knappem Text und drei Knöpfen untereinander. */
  .cc { bottom: 0; padding: 0 10px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cc__karte {
    max-height: none; padding: 18px 18px 16px; border-radius: 18px;
  }
  .cc__titel { font-size: 1rem; }
  .cc__text  { font-size: .83rem; line-height: 1.45; margin-bottom: 13px; }
  .cc__knoepfe { gap: 8px; }
  .cc__knopf { padding: 12px 12px; font-size: .9rem; }
  .cc__fuss  { margin-top: 10px; font-size: .75rem; }
  /* Solange das Fenster offen ist, die untere Aktionsleiste ausblenden —
     sonst stehen zwei Balken übereinander. */
  body:has(.cc) .handyleiste { transform: translateY(100%); }
  .handyleiste { transition: transform .2s ease; }
}

/* ======================================================================
   Handy: ruhigere Schriftgrößen, weniger Scrollen
   ====================================================================== */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); }
  h2 { font-size: clamp(1.4rem, 5.6vw, 1.75rem); }
  h3 { font-size: 1.03rem; }
  .lead { font-size: 1rem; }
  .block { padding: 48px 0; }
  .block--schmal { padding: 32px 0; }
  .kopfzeile { margin-bottom: 26px; }
  .huelle { padding: 0 18px; }

  .zahlen div { padding: 18px 15px; }
  .zahlen b { font-size: 1.5rem; }
  .zahlen span { font-size: .82rem; }

  .usp__karte, .befund__spalte, .schritt, .region, .paket, .gkarte {
    padding: 19px 18px;
  }
  .usp__karte--haupt h3 { font-size: 1.22rem; }
  .usp__karte--haupt p  { font-size: .95rem; }
  .usp__karte p, .gkarte p, .befund__spalte li { font-size: .9rem; }

  .gastro__kopf h2 { font-size: 1.55rem; }
  .gastro__lead { font-size: .98rem; }
  .gastro__zahlen div { padding: 16px 14px; }
  .gastro__zahlen b { font-size: 1.6rem; }
  .gastro__zahlen span { font-size: .8rem; }
  .gastro__preis b { font-size: 1.5rem; }

  .region__orte { font-size: .83rem; line-height: 1.7; }
  .formular { padding: 22px 18px; }
  .lauf__karte { flex-basis: 198px; }
  .bewertung__note { font-size: 2.1rem; }
  .faq summary { font-size: .97rem; }
}

/* Zustimmungsfenster am Handy: so knapp wie möglich */
@media (max-width: 760px) {
  .cc__karte { max-width: 420px; padding: 16px 16px 14px; }
  .cc__titel { font-size: .97rem; margin-bottom: 4px; }
  .cc__text  { font-size: .81rem; margin-bottom: 11px; }
  .cc__knopf { padding: 11px 12px; font-size: .88rem; }
  .cc__fuss  { margin-top: 9px; font-size: .73rem; }
}

/* Seestern-Testkarte über die volle Breite — das ist der stärkste Beweis */
.refs .ref--test { grid-column: 1 / -1; grid-template-columns: 1.35fr 1fr; }
@media (max-width: 880px) { .refs .ref--test { grid-template-columns: 1fr; } }
.refs .ref--test .ref__marke { white-space: nowrap; }
.refs .ref--test .ref__text { padding: 28px 30px; }
.refs .ref--test .ref__text > b { font-size: 1.3rem; }

/* ======================================================================
   GASTRO neu: warmes Braun, Grau und Weiß statt Marineblau und Mint
   ====================================================================== */
:root {
  --holz:       #6B5745;   /* warmes Braun, die neue Akzentfarbe */
  --holz-dunkel:#564538;
  --holz-blass: #EFE9E1;
  --sand-warm:  #F7F4EF;
  --sand-linie: #E3DCD1;
}

.gastro {
  background: linear-gradient(180deg, #FBF9F6 0%, var(--sand-warm) 100%);
  color: var(--tinte);
  border-top: 1px solid var(--sand-linie);
  border-bottom: 1px solid var(--sand-linie);
}
.gastro h2, .gastro h3 { color: var(--tinte); }
.gastro p { color: #62584E; }

.gastro__marke {
  color: #fff; background: var(--holz); letter-spacing: .13em;
}
.gastro__lead strong { color: var(--holz-dunkel); font-weight: 700; }

.gastro__zahlen {
  background: var(--sand-linie); border: 1px solid var(--sand-linie);
  box-shadow: 0 1px 2px rgba(60,48,38,.05), 0 10px 30px rgba(60,48,38,.06);
}
.gastro__zahlen div { background: #fff; }
.gastro__zahlen b { color: var(--holz); }
.gastro__zahlen span { color: #7C7267; }

.gkarte {
  background: #fff; border: 1px solid var(--sand-linie);
  box-shadow: 0 1px 2px rgba(60,48,38,.04), 0 8px 22px rgba(60,48,38,.05);
}
.gkarte--gross { background: var(--holz-blass); border-color: #DCD1C2; }
.gkarte strong { color: var(--holz-dunkel); font-weight: 700; }

.gastro__bild { border-color: var(--sand-linie); box-shadow: 0 14px 34px rgba(60,48,38,.14); }
.gastro__preis { background: #fff; border-color: var(--sand-linie); }
.gastro__preis--voll { background: var(--holz-blass); border-color: #CFC2B0; }
.gastro__preis-name { color: #7C7267; }
.gastro__preis-text { color: #7C7267; }
.gastro__fussnote  { color: #8A8075; }

.gastro__test {
  background: #fff; border: 1px solid var(--sand-linie); border-left: 3px solid var(--holz);
}
.gastro__test-titel { color: var(--holz); }
.gastro__test-hinweis { color: #8A8075; }

.knopf--gastro {
  background: var(--holz); border-color: var(--holz); color: #fff;
  box-shadow: 0 2px 8px rgba(107,87,69,.26);
}
.knopf--gastro:hover { background: var(--holz-dunkel); border-color: var(--holz-dunkel); }
.knopf--gastro-zweit {
  background: #fff; border-color: #CFC2B0; color: var(--holz-dunkel);
}
.knopf--gastro-zweit:hover { background: var(--holz-blass); border-color: var(--holz); }
.knopf--gastro-rand {
  background: transparent; border-color: #CFC2B0; color: var(--holz-dunkel);
}
.knopf--gastro-rand:hover { background: var(--holz-blass); border-color: var(--holz); }

/* GASTRO in der Navigation: ebenfalls warm statt mint */
.nav .nav__gastro,
.handynav .handynav__gastro {
  background: var(--holz-blass); border-color: #D7C9B8; color: var(--holz-dunkel);
}
.nav .nav__gastro:hover { background: #E6DCCF; }

/* Seestern-Karte bei den Referenzen: ebenfalls warm */
.refs .ref--test {
  border-color: #D7C9B8;
  background: linear-gradient(180deg, #FBF8F4 0%, #fff 100%);
}
.refs .ref--test .ref__marke { background: var(--holz-blass); color: var(--holz-dunkel); }

/* ======================================================================
   Mosaikwand: größere Kacheln, deutlich sichtbare Bewegung
   ====================================================================== */
.hero__wand {
  grid-template-columns: repeat(5, 1fr); gap: 18px;
  transform: rotate(-6deg) scale(1.1);
}
@media (max-width: 1100px) { .hero__wand { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) {
  .hero__wand {
    grid-template-columns: repeat(3, 1fr); gap: 12px;
    transform: rotate(-6deg) scale(1.22);
  }
}
.hero__spalte img { border-radius: 11px; }

/* ======================================================================
   Persönliche Beratung
   ====================================================================== */
.block--person {
  background: linear-gradient(180deg, #fff 0%, var(--papier-2) 100%);
  border-top: 1px solid var(--linie);
}
.person { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; gap: 26px; } }

.person__bildrahmen {
  position: relative; width: 300px; aspect-ratio: 4 / 5; border-radius: 16px;
  overflow: hidden; background: var(--holz-blass);
  border: 1px solid var(--linie);
  box-shadow: 0 2px 4px rgba(17,21,28,.05), 0 18px 44px rgba(17,21,28,.12);
}
@media (max-width: 860px) { .person__bildrahmen { width: 210px; } }
.person__bildrahmen img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
}
/* Fehlt das Foto, erscheint statt eines kaputten Bildes ein ruhiges Monogramm */
.person__ersatz {
  position: absolute; inset: 0; display: none; place-items: center;
  font-size: 3.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--holz);
  background: var(--holz-blass);
}
.person__bildrahmen--leer .person__ersatz { display: grid; }

.person__name {
  font-size: .95rem; font-weight: 600; color: var(--grau);
  letter-spacing: .01em; margin: -6px 0 16px;
}
.person__punkte {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: 12px;
  overflow: hidden; margin: 22px 0;
}
@media (max-width: 700px) { .person__punkte { grid-template-columns: 1fr; } }
.person__punkte div { background: #fff; padding: 16px 18px; }
.person__punkte b { display: block; font-size: .95rem; font-weight: 650; margin-bottom: 2px; }
.person__punkte span { font-size: .85rem; color: var(--grau); }
.person__kontakt { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ======================================================================
   ki-fix: KI für betriebliche Abläufe
   ====================================================================== */
.block--kifix {
  background: var(--nacht); color: #fff;
  background-image:
    radial-gradient(60% 80% at 92% 0%, rgba(45,70,120,.55) 0%, rgba(45,70,120,0) 60%);
}
.block--kifix h2 { color: #fff; }
.block--kifix p  { color: #BDC8DC; }
.block--kifix .vorzeile { color: #8FB0FF; }
.kifix { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .kifix { grid-template-columns: 1fr; } }
.kifix__liste { list-style: none; margin: 20px 0 0; padding: 0; }
.kifix__liste li {
  position: relative; padding: 9px 0 9px 26px; font-size: .97rem; color: #D2DBEA;
  border-top: 1px solid rgba(255,255,255,.1);
}
.kifix__liste li::before {
  content: "→"; position: absolute; left: 0; top: 9px; color: #8FB0FF; font-weight: 700;
}
.kifix__kombi {
  margin-top: 24px; padding: 18px 20px; border-radius: 12px;
  background: rgba(143,176,255,.1); border: 1px solid rgba(143,176,255,.26);
  font-size: .97rem; color: #D7E0F2; line-height: 1.6;
}
.kifix__kombi strong { color: #fff; }
.kifix__kombi em { color: #AFC4EC; font-style: normal; }
.kifix__knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.block--kifix .knopf--rand { border-color: rgba(255,255,255,.34); color: #fff; }
.block--kifix .knopf--rand:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.kifix__kasten {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 24px 26px;
}
.kifix__marke {
  display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .1em;
  color: #0F1A2E; background: #8FB0FF; padding: 6px 13px; border-radius: 100px;
  margin-bottom: 14px;
}
.kifix__notiz { font-size: .88rem; color: #93A3BE; margin-bottom: 0; }

/* Nachtrag: die alten Marineblau-Regeln für die Preiskarten überstimmen */
.gastro .gastro__preis span,
.gastro .gastro__preis-name,
.gastro .gastro__preis-text { color: #7C7267; }
.gastro .gastro__preis b { color: var(--tinte); }
.gastro .gastro__liste li { color: #4A433C; border-top-color: var(--sand-linie); }
.gastro .gastro__liste li b { color: var(--tinte); }

/* Die Wand läuft IMMER durch — auch wenn der Zeiger darüber steht.
   (Hebt die frühere Pause-Regel auf.) */
.hero:hover .hero__band,
.hero .hero__band { animation-play-state: running !important; }

/* ======================================================================
   Fragen-Assistent rechts unten
   ====================================================================== */
.chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 300; }
@media (max-width: 760px) { .chatbot { right: 14px; bottom: 80px; } }

.chatbot__knopf {
  position: relative; display: flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer; font: inherit;
  background: var(--tinte); color: #fff;
  padding: 13px 20px 13px 16px; border-radius: 100px;
  box-shadow: 0 8px 24px rgba(17,21,28,.3), 0 2px 6px rgba(17,21,28,.16);
  transition: transform .15s ease, background .15s ease;
}
.chatbot__knopf:hover { transform: translateY(-2px); background: #000; }
.chatbot__knopf svg { width: 21px; height: 21px; }
.chatbot__knopf .chatbot__auf { display: block; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; }
.chatbot__knopf .chatbot__zu  { display: none; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; }
.chatbot__blase { font-size: .95rem; font-weight: 650; white-space: nowrap; }
.chatbot--offen .chatbot__knopf .chatbot__auf { display: none; }
.chatbot--offen .chatbot__knopf .chatbot__zu  { display: block; }
.chatbot--offen .chatbot__blase { display: none; }
.chatbot--offen .chatbot__knopf { padding: 13px; }

.chatbot__fenster {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: 352px; max-width: calc(100vw - 28px);
  background: #fff; border: 1px solid var(--linie); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(17,21,28,.26), 0 2px 8px rgba(17,21,28,.1);
}
.chatbot__kopf {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px; background: var(--tinte); color: #fff;
}
.chatbot__punkt {
  width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; flex: 0 0 auto;
}
.chatbot__kopf b { font-size: .92rem; font-weight: 650; }
.chatbot__hinweis { font-size: .76rem; color: #A3A9B4; margin-left: auto; }

.chatbot__verlauf {
  padding: 15px 15px 6px; display: grid; gap: 9px;
  max-height: min(430px, 56vh); overflow-y: auto; background: var(--papier-2);
}
.chatbot__blase--bot, .chatbot__blase--ich {
  font-size: .89rem; line-height: 1.5; padding: 11px 13px; border-radius: 13px;
  max-width: 92%;
}
.chatbot__blase--bot {
  background: #fff; border: 1px solid var(--linie); color: var(--tinte);
  border-bottom-left-radius: 4px; justify-self: start;
}
.chatbot__blase--ich {
  background: var(--blau); color: #fff; justify-self: end;
  border-bottom-right-radius: 4px;
}
.chatbot__blase--bot b { font-weight: 700; }

.chatbot__vorschlaege { display: grid; gap: 6px; justify-items: start; margin: 2px 0 6px; }
.chatbot__vorschlaege button {
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  background: #fff; border: 1px solid #C9D6F5; color: var(--blau);
  padding: 8px 13px; border-radius: 100px; text-align: left;
}
.chatbot__vorschlaege button:hover { background: var(--blau-blass); border-color: var(--blau); }
.chatbot__mail {
  font-size: .81rem; color: var(--grau); text-decoration: underline; padding: 3px 2px;
}
.chatbot__tat {
  display: inline-block; background: var(--blau); color: #fff; text-decoration: none;
  font-size: .86rem; font-weight: 650; padding: 10px 17px; border-radius: 100px;
  justify-self: start; margin: 2px 0 4px;
}
.chatbot__tat:hover { background: var(--blau-dunkel); }

.chatbot__eingabe {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #fff; border-top: 1px solid var(--linie);
}
.chatbot__eingabe input {
  flex: 1; font: inherit; font-size: .88rem; border: 0; outline: 0;
  padding: 8px 4px; background: transparent; color: var(--tinte);
}
.chatbot__eingabe button {
  width: 34px; height: 34px; min-width: 34px; border: 0; border-radius: 50%;
  background: var(--tinte); display: grid; place-items: center; cursor: pointer;
}
.chatbot__eingabe button svg { width: 14px; height: 14px; fill: #fff; }
.chatbot__eingabe button:hover { background: #000; }

/* Das Schloss links unten nicht mit dem Assistenten kollidieren lassen */
@media (max-width: 420px) { .chatbot__blase { display: none; } .chatbot__knopf { padding: 13px; } }

/* Das Chatfenster bleibt zu, bis jemand auf den Knopf klickt.
   (display:flex hatte das hidden-Attribut überstimmt.) */
.chatbot__fenster[hidden] { display: none !important; }

/* ======================================================================
   Aufklapper „Mehr Infos" — kurz zeigen, Details auf Wunsch
   ====================================================================== */
.mehr { border-top: 1px solid var(--linie); margin-top: 16px; padding-top: 14px; }
.mehr > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: .9rem; font-weight: 650; color: var(--blau);
  border: 1px solid #C9D6F5; background: var(--blau-blass);
  padding: 9px 16px; border-radius: 100px;
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after { content: "+"; font-weight: 800; font-size: 1.05rem; line-height: 1; }
.mehr[open] > summary::after { content: "–"; }
.mehr > summary:hover { background: #E3EBFC; border-color: var(--blau); }
.mehr__inhalt { padding-top: 16px; }
.nacht .mehr, .block--kifix .mehr { border-top-color: rgba(255,255,255,.14); }
.nacht .mehr > summary, .block--kifix .mehr > summary {
  color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22);
}
.gastro .mehr { border-top-color: var(--sand-linie); }
.gastro .mehr > summary {
  color: var(--holz-dunkel); background: var(--holz-blass); border-color: #D7C9B8;
}
.gastro .mehr > summary:hover { background: #E6DCCF; }

/* ======================================================================
   Die drei kostenlosen Angebote
   ====================================================================== */
.block--angebote {
  background:
    radial-gradient(80% 60% at 50% 0%, #EEF3FD 0%, rgba(238,243,253,0) 62%),
    var(--papier);
  border-bottom: 1px solid var(--linie);
}
.wahl2 {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 30px;
}
.wahl2 button {
  font: inherit; font-size: .97rem; font-weight: 650; cursor: pointer;
  background: #fff; border: 1px solid var(--linie); color: var(--tinte);
  padding: 13px 24px; border-radius: 100px;
}
.wahl2 button[aria-pressed="true"] {
  background: var(--blau); border-color: var(--blau); color: #fff;
  box-shadow: 0 2px 8px rgba(29,78,216,.26);
}
.wahl2 button:hover { border-color: var(--blau); }

.angebote { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.angebote > .angebot { flex: 1 1 300px; max-width: 400px; }
@media (max-width: 920px) { .angebote > .angebot { flex: 1 1 100%; max-width: none; } }
.angebot {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--linie); border-radius: 14px;
  padding: 26px 26px 24px; position: relative;
}
.angebot--haupt { border-color: var(--blau); box-shadow: 0 0 0 1px var(--blau), 0 14px 36px rgba(29,78,216,.14); }
.angebot[hidden] { display: none; }
.angebot__gratis {
  align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #0B3B2C; background: #D8F7EC;
  padding: 5px 12px; border-radius: 100px; margin-bottom: 14px;
}
.angebot--haupt .angebot__gratis { background: var(--blau-blass); color: var(--blau); }
.angebot h3 { font-size: 1.22rem; margin-bottom: 8px; }
.angebot > p { color: var(--grau); font-size: .96rem; margin-bottom: 14px; }
.angebot ul { list-style: none; margin: 0 0 18px; padding: 0; }
.angebot li {
  position: relative; padding: 7px 0 7px 24px; font-size: .92rem; color: #3F454E;
  border-top: 1px solid var(--linie);
}
.angebot li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: #2E8B57; font-weight: 800; font-size: .86rem;
}
.angebot .knopf { margin-top: auto; text-align: center; }
.angebot__notiz { font-size: .82rem; color: var(--grau); margin: 10px 0 0; text-align: center; }


/* ---- GASTRO: alte Gastroseite gegen GASTRO ------------------------ */
.gastro__vergleich {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 34px;
}
@media (max-width: 860px) { .gastro__vergleich { grid-template-columns: 1fr; } }
.gvergleich { border-radius: 14px; padding: 24px 24px 20px; border: 1px solid; }
.gvergleich--alt { background: #F3F1EE; border-color: #DCD5CA; }
.gvergleich--neu { background: #fff; border-color: var(--holz); box-shadow: 0 14px 36px rgba(107,87,69,.12); }
.gvergleich__marke {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 14px;
}
.gvergleich--alt .gvergleich__marke { background: #E2DCD3; color: #6C6457; }
.gvergleich--neu .gvergleich__marke { background: var(--holz); color: #fff; }
.gvergleich ul { list-style: none; margin: 0; padding: 0; }
.gvergleich li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: .95rem; line-height: 1.5; color: #4A4238;
}
.gvergleich li:last-child { margin-bottom: 0; }
.gvergleich li::before {
  position: absolute; left: 0; top: 0; font-weight: 800;
}
.gvergleich--alt li { color: #7A7266; }
.gvergleich--alt li::before { content: "\00d7"; color: #B3A89B; }
.gvergleich--neu li::before { content: "\2713"; color: var(--holz); }

.nav__gratis, .handynav__gratis { color: #0B6B4F !important; font-weight: 800; }
.nav__gratis::before, .handynav__gratis::before { content: "★ "; }

.block--angebote > .huelle > details.mehr { text-align: center; }
.block--angebote > .huelle > details.mehr .mehr__inhalt { text-align: left; }

/* ======================================================================
   Aktionsband — Zahlen kommen aus dem Dashboard
   ====================================================================== */
.aktion {
  background: linear-gradient(90deg, #11306E, var(--blau));
  color: #fff; position: relative; z-index: 60;
}
.aktion[hidden] { display: none !important; }
.aktion__innen {
  max-width: 1180px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  font-size: .92rem;
}
.aktion__marke {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.16); padding: 4px 10px; border-radius: 100px;
}
.aktion__preise { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.aktion__preise b { font-weight: 650; opacity: .82; }
.aktion__preise i { font-style: normal; font-weight: 800; }
.aktion__rest { margin-left: auto; }
.aktion__rest b { font-weight: 800; }
.aktion__knopf {
  color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap;
  border: 1px solid rgba(255,255,255,.45); border-radius: 100px; padding: 6px 15px;
}
.aktion__knopf:hover { background: rgba(255,255,255,.14); }
@media (max-width: 760px) {
  .aktion__innen { padding: 9px 14px; font-size: .84rem; gap: 6px 12px; }
  .aktion__rest { margin-left: 0; }
  .aktion__knopf { display: none; }
}

.hero__preis b { font-weight: 800; }

/* ---- QR-Karte im Angebote-Block ----------------------------------- */
.qr {
  display: flex; align-items: center; gap: 16px; margin: 0 0 16px;
  background: var(--papier-2); border: 1px solid var(--linie);
  border-radius: 12px; padding: 14px;
}
.qr img { width: 92px; height: auto; border-radius: 6px; background: #fff; }
.qr__text b { display: block; font-size: .95rem; margin-bottom: 3px; }
.qr__text span { font-size: .86rem; color: var(--grau); line-height: 1.45; }
.angebot--qr { border-color: #C9D6F5; }

.angebote__fuss {
  text-align: center; margin: 24px 0 0; color: var(--grau); font-size: .95rem;
}
.angebote__fuss a { color: var(--blau); font-weight: 750; }

/* ---- Preisstreifen gleich unter den Angeboten ---------------------- */
.preisstreifen { padding-top: 0; }
.pstreifen {
  border: 1px solid var(--linie); border-radius: 16px; background: #fff;
  padding: 30px 30px 26px;
}
.pstreifen__kopf h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); margin: 4px 0 8px; }
.pstreifen__kopf p { color: var(--grau); max-width: 62ch; margin: 0 0 22px; }
.pstreifen__zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .pstreifen__zahlen { grid-template-columns: repeat(2, 1fr); } }
.pstreifen__zahlen a {
  display: block; text-decoration: none; color: inherit; text-align: center;
  border: 1px solid var(--linie); border-radius: 12px; padding: 18px 10px 15px;
  transition: border-color .15s ease, transform .15s ease;
}
.pstreifen__zahlen a:hover { border-color: var(--blau); transform: translateY(-2px); }
.pstreifen__zahlen b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.pstreifen__zahlen span { display: block; font-size: .85rem; color: var(--grau); margin-top: 3px; }
.pstreifen--aus { border-color: var(--blau) !important; background: #F6F9FF; }
.pstreifen--aus b { color: var(--blau); }
.pstreifen--gastro { border-color: var(--holz) !important; background: var(--sand-warm); }
.pstreifen--gastro b { color: var(--holz); }
.pstreifen--gastro:hover { border-color: var(--holz) !important; }
.pstreifen .klein { margin: 18px 0 0; }

/* ---- Porträt beim Formular ---------------------------------------- */
.besprechung {
  display: flex; gap: 22px; align-items: flex-start;
  max-width: 820px; margin: 28px auto 0; padding: 22px 24px;
  background: var(--papier-2); border: 1px solid var(--linie); border-radius: 16px;
}
.besprechung__bild {
  width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%;
  object-fit: cover; object-position: 50% 40%;
  border: 3px solid #fff; box-shadow: 0 6px 18px rgba(17,21,28,.12);
}
.besprechung--leer .besprechung__bild { display: none; }
.besprechung b { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.besprechung p { color: var(--grau); font-size: .95rem; margin: 0 0 8px; line-height: 1.6; }
.besprechung__kontakt { display: flex; gap: 18px; flex-wrap: wrap; }
.besprechung__kontakt a { color: var(--blau); font-weight: 750; }
@media (max-width: 620px) {
  .besprechung { flex-direction: column; align-items: center; text-align: center; padding: 22px 18px; }
  .besprechung__kontakt { justify-content: center; }
}

.ref--ohnebild img { display: none; }
.ref--ohnebild { background: var(--papier-2); }

.aktion__preise em { font-style: normal; }
@media (max-width: 760px) {
  .aktion__preise { gap: 4px 14px; }
  .aktion__preise em { display: none; }
  .aktion__preise > span { white-space: nowrap; }
}

/* ======================================================================
   Handy-Aufklapper: am Rechner immer offen, am Handy zusammengeklappt
   ====================================================================== */
@media (min-width: 761px) {
  .mehr--handy { border-top: 0; margin-top: 0; padding-top: 0; }
  .mehr--handy > summary { display: none; }
  .mehr--handy > .mehr__inhalt { padding-top: 0; }
}
@media (max-width: 760px) {
  .mehr--handy { margin-top: 20px; }
  .mehr--handy > summary { width: 100%; justify-content: space-between; }
}
/* Absätze, die am Handy nur Platz kosten */
@media (max-width: 760px) { .nurbreit { display: none; } }

/* ---- Referenzen: am Handy erst vier, der Rest auf Knopfdruck -------- */
@media (max-width: 560px) {
  .refs[data-handy-gekuerzt] > .ref:nth-of-type(n+5) { display: none; }
  .refs[data-handy-gekuerzt].refs--alle > .ref { display: block; }
}
.refs__mehr {
  display: none; margin: 18px auto 0; width: 100%; max-width: 420px;
  font: inherit; font-weight: 750; cursor: pointer; color: var(--blau);
  background: #fff; border: 1px solid #C9D6F5; border-radius: 100px;
  padding: 13px 20px;
}
@media (max-width: 560px) { .refs[data-handy-gekuerzt] + .refs__mehr { display: block; } }
.refs__mehr:hover { background: var(--blau-blass); }
@media (max-width: 760px) {
  .mehr--knapp { margin-top: 14px; border-top-color: transparent; padding-top: 0; }
  .mehr--knapp > summary { padding: 9px 14px; font-size: .88rem; }
  .angebot .mehr--knapp, .paket .mehr--knapp { margin-bottom: 14px; }
}

/* ======================================================================
   Preisabschnitt: Empfehlungsfahne und die GASTRO-Reihe
   ====================================================================== */
.paket { position: relative; }
.paket__fahne {
  position: absolute; top: -12px; left: 22px; max-width: calc(100% - 44px);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--blau); color: #fff; padding: 5px 13px; border-radius: 100px;
  box-shadow: 0 4px 12px rgba(29,78,216,.3);
}
.paket--mitte { padding-top: 30px; }
.paket--mitte .paket__preis { color: var(--blau); }

.pakete--gastro { margin-top: 34px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 880px) { .pakete--gastro { grid-template-columns: 1fr; } }
.pakete__trenner { align-self: start; padding: 6px 10px 0 2px; }
.pakete__marke {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; background: var(--holz); color: #fff;
  padding: 5px 13px; border-radius: 100px; margin-bottom: 12px;
}
.pakete__trenner p { color: var(--grau); font-size: .95rem; line-height: 1.6; margin: 0; }
.pakete__trenner a { color: var(--holz); font-weight: 700; }

.paket--gastro { border-color: var(--sand-linie); background: var(--sand-warm); }
.paket--gastro .paket__preis { color: var(--holz-dunkel, #4A3B2D); }
.paket--gastro-voll {
  padding-top: 30px;
  border-color: var(--holz); box-shadow: 0 0 0 1px var(--holz), 0 14px 36px rgba(107,87,69,.14);
  background: #fff;
}
.paket__fahne--gastro { background: var(--holz); box-shadow: 0 4px 12px rgba(107,87,69,.3); }
@media (max-width: 420px) {
  .paket__fahne { left: 16px; right: 16px; text-align: center; font-size: .68rem; }
}

/* Vollversion auch im GASTRO-Abschnitt selbst auszeichnen */
.gastro__preis--voll { position: relative; padding-top: 26px !important; }
.gastro__preis-fahne {
  position: absolute; top: -11px; left: 16px;
  font-size: .68rem !important; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; background: var(--holz); color: #fff !important;
  padding: 4px 11px; border-radius: 100px; white-space: nowrap;
}
@media (max-width: 420px) {
  .gastro__preis-fahne { left: 12px; right: 12px; text-align: center; white-space: normal; }
}
.paket--gastro .mehr > summary {
  color: var(--holz); border-color: var(--sand-linie); background: var(--holz-blass);
}
.paket--gastro .mehr > summary:hover { background: #E6DCCF; border-color: var(--holz); }

/* ======================================================================
   GASTRO: das Vorzeigelokal sanft im Hintergrund
   ----------------------------------------------------------------------
   Zwei Lagen: das Bildschirmfoto ganz blass und leicht weichgezeichnet,
   darüber ein Schleier in der Sandfarbe. Der Text liegt darüber und
   bleibt so kontrastreich wie vorher. Das Bild wird erst gesetzt, wenn
   der Abschnitt in die Nähe kommt — siehe seite.js.
   ====================================================================== */
.gastro { position: relative; overflow: hidden; isolation: isolate; }

.gastro__grund,
.gastro__schleier { position: absolute; inset: 0; pointer-events: none; }

.gastro__grund {
  z-index: -2;
  background-image: var(--gastro-grund, none);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(1.5px) saturate(.9);
  transform: scale(1.04);
  transition: opacity 1s ease;
  /* Das Bild ist nur rechts oben kräftig und läuft nach links und unten
     ins Nichts — dort, wo die Überschrift und die Fließtexte stehen. */
  -webkit-mask-image: radial-gradient(82% 78% at 100% 6%,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 82%);
  mask-image: radial-gradient(82% 78% at 100% 6%,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 62%, rgba(0,0,0,0) 82%);
}
.gastro__grund[data-da] { opacity: .30; }

.gastro__schleier {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(251,249,246,.92) 0%, rgba(251,249,246,.58) 22%,
                    rgba(247,244,239,.62) 60%, var(--sand-warm) 100%),
    linear-gradient(90deg, #FBF9F6 0%, rgba(251,249,246,.80) 34%,
                    rgba(251,249,246,.18) 72%, rgba(251,249,246,0) 100%);
}

/* Am Handy liegt alles untereinander — dort oben ein schmales Band,
   damit die Karten darunter ruhig bleiben */
@media (max-width: 760px) {
  .gastro__grund[data-da] { opacity: .26; }
  .gastro__grund {
    background-position: top center; filter: blur(2.5px) saturate(.85);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%,
        rgba(0,0,0,.6) 26%, rgba(0,0,0,0) 48%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%,
        rgba(0,0,0,.6) 26%, rgba(0,0,0,0) 48%);
  }
  .gastro__schleier {
    background: linear-gradient(180deg, rgba(251,249,246,.86) 0%,
      rgba(251,249,246,.74) 30%, var(--sand-warm) 55%);
  }
}
@media (prefers-reduced-motion: reduce) { .gastro__grund { transition: none; } }