/* ==========================================================================
   DER SUPPENTOPF — HERO
   Handgeschrieben, unabhängig vom Tailwind-Build.
   Farbdisziplin nach Vorbild dersuppentopf.de: Dunkelblau + Weiß tragen,
   Gold ist Rarität (genau ein Element in diesem Screen).
   ========================================================================== */

.st-hero {
  --st-navy: #122A44;
  --st-navy-2: #122a44;
  --st-navy-deep: #0a192a;
  --st-gold: #B58A45;
  --st-creme: #f4efe5;

  /* Bildquelle an EINER Stelle — Austausch des Motivs ist eine Zeile. */
  /* Eigenes Foto aus dem Haus-Shooting (AW1_3400): blaue Keramikschale in
     Markenfarbe vor der Trave. Querformat 3:2, 2560 px — kein KI-Eingriff,
     kein eingebrannter Verlauf. Motivwechsel = diese eine Zeile. */
  --st-hero-image: url("./hero-luebeck.jpg?v=4");
  --st-hero-position: 50% 50%;

  --st-header-h: 92px;
}

/* --------------------------------------------------------------------------
   1. SEKTION — randlos, volle Breite, Bild bis an die Oberkante
   -------------------------------------------------------------------------- */
.st-hero {
  position: relative;
  isolation: isolate;
  min-height: 88svh;
  max-height: 760px;
  display: flex;
  flex-direction: column;
  background-color: var(--st-navy);
  overflow: hidden;
}

@media (max-height: 640px) {
  .st-hero { min-height: 620px; }
}

.st-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--st-hero-image);
  background-size: cover;
  background-position: var(--st-hero-position);
  background-repeat: no-repeat;
}

/* Verlauf ausschließlich per CSS — kein eingebrannter Farbschleier im JPG.
   Deckung fällt früh ab (bei 52 % bereits auf Null), damit die Suppe
   in der rechten Bildhälfte unangetastet leuchtet. */
.st-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(10, 25, 42, 0.94) 0%,
      rgba(10, 25, 42, 0.88) 18%,
      rgba(10, 25, 42, 0.74) 38%,
      rgba(10, 25, 42, 0.34) 50%,
      rgba(10, 25, 42, 0) 62%
    ),
    /* schmaler Fuß, damit der Header oben und die Kante unten Halt haben */
    linear-gradient(
      to bottom,
      rgba(10, 25, 42, 0.55) 0%,
      rgba(10, 25, 42, 0) 22%,
      rgba(10, 25, 42, 0) 76%,
      rgba(10, 25, 42, 0.45) 100%
    );
}

/* Schmale Bildschirme: der waagerechte Verlauf funktioniert hier nicht.
   Text sitzt oben, die Schale bleibt unten unangetastet hell. */
@media (max-width: 1024px) {
  .st-hero {
    --st-hero-position: 62% 88%;
  }

  .st-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(10, 25, 42, 0.92) 0%,
      rgba(10, 25, 42, 0.86) 34%,
      rgba(10, 25, 42, 0.55) 52%,
      rgba(10, 25, 42, 0.12) 66%,
      rgba(10, 25, 42, 0) 78%
    );
  }
}

/* --------------------------------------------------------------------------
   2. HEADER — liegt auf dem Bild, wird beim Scrollen zur weißen Leiste
   -------------------------------------------------------------------------- */
.st-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: var(--st-header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-header__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

@media (min-width: 768px) { .st-header__inner { padding: 0 36px; } }

.st-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  transition: color 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-header__logo svg { width: auto; height: 30px; flex: none; }

.st-header__logo span {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.2em;   /* exakt der Wert der Wort-Bildmarke */
  text-transform: uppercase;
}

.st-nav {
  display: none;
  align-items: center;
  gap: 30px;
}

@media (min-width: 1025px) { .st-nav { display: flex; } }

.st-nav a {
  position: relative;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.2s ease;
}

/* Gold: das EINZIGE goldene Element im Header — die Unterstreichung des
   aktiven bzw. angesteuerten Navigationspunkts. */
.st-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--st-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-nav a:hover::after,
.st-nav a:focus-visible::after,
.st-nav a[aria-current="page"]::after { transform: scaleX(1); }

.st-nav a:hover { color: #fff; }

/* --- Dropdown „Catering" ------------------------------------------------- */
.st-nav__group { position: relative; display: flex; align-items: center; }
.st-nav__trigger { display: inline-flex !important; align-items: center; gap: 5px; }
.st-nav__caret { width: 12px; height: 12px; opacity: .7; transition: transform .25s cubic-bezier(0.16,1,0.3,1); }
.st-nav__group:hover .st-nav__caret,
.st-nav__group:focus-within .st-nav__caret { transform: rotate(180deg); }

.st-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  min-width: 226px;
  background: #fff;
  border: 1px solid rgba(18, 31, 62, 0.10);
  border-radius: 14px;
  box-shadow: 0 20px 44px -14px rgba(18,42,68, 0.30);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(0.16,1,0.3,1), visibility .22s;
  z-index: 70;
}
/* unsichtbare Brücke, damit der Hover beim Übergang nicht abreißt */
.st-nav__menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }

.st-nav__group:hover .st-nav__menu,
.st-nav__group:focus-within .st-nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 4px);
}

.st-nav__menu a {
  color: #122A44 !important;
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 0;
  white-space: nowrap;
}
.st-nav__menu a::after { display: none; }
.st-nav__menu a:hover { background: var(--st-creme, #f6f1e7); color: var(--st-navy) !important; }

/* Mobil-Drawer: Catering-Untergruppe */
.st-drawer__label {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 14px 0 4px;
}
.st-drawer a.st-drawer__sub { padding-left: 16px; opacity: .9; }

/* Statt goldenem Button: schlichter Textlink. */
.st-header__link {
  display: none;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  transition: color 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 1025px) { .st-header__link { display: inline-block; } }

.st-header__link:hover { color: #fff; border-bottom-color: #fff; }

/* --- gescrollter Zustand: hell und clean wie auf der bisherigen Website --- */
.st-header.is-scrolled {
  background-color: #fff;
  border-bottom-color: rgba(18, 31, 62, 0.11); /* #121F3E1C der alten Seite */
  height: 74px;
}

.st-header.is-scrolled .st-header__logo { color: var(--st-navy); }
.st-header.is-scrolled .st-nav a,
.st-header.is-scrolled .st-header__link { color: #5f727a; }
.st-header.is-scrolled .st-nav a:hover { color: var(--st-navy); }
.st-header.is-scrolled .st-header__link {
  border-bottom-color: rgba(18, 31, 62, 0.3);
}
.st-header.is-scrolled .st-header__link:hover {
  color: var(--st-navy);
  border-bottom-color: var(--st-navy);
}

.st-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

@media (min-width: 1025px) { .st-burger { display: none; } }

.st-burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  transition: background-color 0.32s ease;
}

.st-header.is-scrolled .st-burger span { background: var(--st-navy); }

/* --------------------------------------------------------------------------
   3. INHALT
   -------------------------------------------------------------------------- */
.st-hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(var(--st-header-h) + 32px) 24px 72px;
}

@media (min-width: 768px) { .st-hero__body { padding-left: 36px; padding-right: 36px; } }

@media (max-width: 1024px) {
  .st-hero__body {
    align-items: flex-start;
    padding-bottom: 0;
  }

}

.st-hero__text { max-width: 700px; }

.st-hero__title {
  color: #fff;
  font-weight: 800;                       /* deutlich kräftiger, wie gewünscht */
  font-size: clamp(1.95rem, 4.15vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.04em;                /* fängt die Laufweite von Exa ab */
  margin: 0 0 22px;
}

/* Jede Teilzeile ist ein eigener Block. Umbruch ist erlaubt: seit der
   einheitlichen 63px-H1 (Kundenvorgabe) dürfen lange Zeilen umbrechen,
   statt am rechten Rand abgeschnitten zu werden. */
.st-hero__title .st-line { display: block; }

.st-hero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: 0;
  max-width: 46ch;
  margin: 0 0 18px;
}

.st-hero__text-body {
  max-width: 58ch;
  margin: 0 0 32px;
}
.st-hero__text-body p {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  font-weight: 300;
  line-height: 1.68;
  margin: 0 0 14px;
}
.st-hero__text-body p:last-child { margin-bottom: 0; }
.st-hero--creme .st-hero__text-body p { color: rgba(18, 42, 68, 0.72); }

/* --------------------------------------------------------------------------
   4. VERTRAUENSARGUMENTE — typografisch, keine Kacheln, keine Kästen
   -------------------------------------------------------------------------- */
/* Untereinander statt nebeneinander: so bleibt der Block vollständig in der
   ruhigen Bildzone und die Suppe muss nicht abgedunkelt werden. */
.st-trust {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 42px;
  max-width: 400px;
}

.st-trust__item { min-width: 0; }

.st-trust__item strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 5px;
}

.st-trust__item span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
}

/* Der einzige Goldeinsatz im Inhaltsbereich: ein Haarstrich. */
.st-trust__rule {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    var(--st-gold) 0%,
    var(--st-gold) 42%,
    rgba(184, 134, 54, 0) 100%
  );
  flex: none;
}

/* --------------------------------------------------------------------------
   5. EIN Bewegungsmoment beim Laden — gestaffelt, exponentiell auslaufend
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .st-rise {
    animation: st-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--st-delay, 0ms);
  }
}

@keyframes st-rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --------------------------------------------------------------------------
   6. Browser-Oberflächen aus der Palette bedienen
   -------------------------------------------------------------------------- */
::selection { background: rgba(184, 134, 54, 0.26); color: var(--st-navy); }

:focus-visible {
  outline: 2px solid var(--st-gold);
  outline-offset: 3px;
}

.st-hero :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   7. Mobile Feinschliff (muss ans Dateiende — überschreibt die Basisregeln)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Mobil tragen die beiden Kernaussagen allein. Die Erläuterungssätze
     würden über die Schale laufen und wären dort schlecht lesbar. */
  .st-trust__item span { display: none; }
  .st-trust { gap: 14px; margin-top: 32px; }
  .st-hero__lead { margin-bottom: 30px; }
}

/* Navigation darf nie umbrechen — Abstände staffeln, statt Zeilen zu riskieren. */
.st-nav a, .st-header__link { white-space: nowrap; }

/* --------------------------------------------------------------------------
   8. MOBILMENÜ
   -------------------------------------------------------------------------- */
.st-drawer {
  position: fixed;
  top: var(--st-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--st-navy);
  padding: 28px 24px 40px;
  overflow-y: auto;
  animation: st-drawer-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.st-drawer[hidden] { display: none; }

@keyframes st-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.st-drawer nav { display: flex; flex-direction: column; }

.st-drawer a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 19px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.2s ease, padding-left 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.st-drawer a:last-child { border-bottom: 0; }
.st-drawer a:hover, .st-drawer a:focus-visible { color: #fff; padding-left: 8px; }

/* Burger wird beim Öffnen zum Kreuz */
.st-burger span { transform-origin: center; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background-color 0.32s ease; }
.st-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger.is-open span:nth-child(2) { opacity: 0; }
.st-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   6. VARIANTE „CREME" — dieselbe Hero-Struktur, helle Palette.
   Für die Catering-Landingpage: gleiche Klassen (.st-hero, .st-hero__media,
   .st-hero__scrim, .st-hero__body, .st-hero__text, .st-hero__title,
   .st-trust …), nur Farben umgekehrt. Echte Wiederverwendung statt Duplikat.
   ========================================================================== */
.st-hero--creme { background-color: var(--st-creme); }

.st-hero--creme .st-hero__scrim {
  background:
    linear-gradient(
      100deg,
      rgba(244, 239, 229, 0.95) 0%,
      rgba(244, 239, 229, 0.90) 18%,
      rgba(244, 239, 229, 0.78) 38%,
      rgba(244, 239, 229, 0.38) 50%,
      rgba(244, 239, 229, 0) 62%
    ),
    linear-gradient(
      to bottom,
      rgba(244, 239, 229, 0.55) 0%,
      rgba(244, 239, 229, 0) 22%,
      rgba(244, 239, 229, 0) 76%,
      rgba(244, 239, 229, 0.55) 100%
    );
}

@media (max-width: 1024px) {
  .st-hero--creme .st-hero__scrim {
    background: linear-gradient(
      to bottom,
      rgba(244, 239, 229, 0.96) 0%,
      rgba(244, 239, 229, 0.92) 40%,
      rgba(244, 239, 229, 0.8) 65%,
      rgba(244, 239, 229, 0.68) 85%,
      rgba(244, 239, 229, 0.55) 100%
    );
  }
}

.st-hero--creme .st-hero__title,
.st-hero--creme .st-trust__item strong { color: var(--st-navy-2); }

.st-hero__claim {
  font-family: 'Lexend Exa', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.st-hero--creme .st-hero__claim { color: var(--st-navy-2); }

.st-hero--creme .st-hero__lead,
.st-hero--creme .st-trust__item span { color: rgba(18, 42, 68, 0.68); }

.st-hero__cta-group { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   7. SCHWEBENDER KENNZAHL-BADGE — liegt über dem Hero-Foto, unten rechts
   (bewusst rechts statt links: die Textspalte inkl. Vertrauensleiste sitzt
   links, das Foto ist rechts am hellsten — hier kollidiert die Karte mit
   nichts). Ring per SVG (kein Chart-Framework), Zahl mittig, Label darunter.
   Heller Karten-Grund mit Rand statt Schatten (CI-Regel: keine box-shadows).
   Die Ring-/Zahl-/Label-Optik selbst steckt in .lp-ring (catering.css), hier
   nur die Positionierung auf dem Hero-Foto.
   -------------------------------------------------------------------------- */
.st-hero__badge {
  position: absolute;
  right: 24px;
  bottom: 28px;
  z-index: 5;
}

@media (min-width: 768px) { .st-hero__badge { right: 36px; bottom: 36px; } }

@media (max-width: 767px) {
  .st-hero__badge { display: none; }
}

/* --------------------------------------------------------------------------
   8. VARIANTE „CREME" — kompakte Höhe statt Vollbild.
   Die Basis-.st-hero-Regel (min-height:100svh) bleibt für die Startseite
   unangetastet; hier nur ein Override für die Catering-Seite, damit
   Fakten/Trust-Badge darunter schneller sichtbar werden.
   -------------------------------------------------------------------------- */
.st-hero--creme {
  min-height: auto;
  max-height: none;
}
.st-hero--creme .st-hero__body {
  padding-top: calc(var(--st-header-h) + 52px);
  padding-bottom: 60px;
}
@media (max-width: 1024px) {
  .st-hero--creme .st-hero__body {
    padding-top: calc(var(--st-header-h) + 28px);
    padding-bottom: 40px;
  }
}