/* ==========================================================================
   CAMPO BERATUNG, PROTOTYP V3 "REDUZIERT"
   Richtung: stille Eleganz im Stil hochwertiger Hospitality-Marken
   (Inspiration: ballenacabo.com, hba.com, nilsamsee.at, lasalaplaza).
   Warme Creme-Buehne, Serifen-Display mit kursiven Akzenten, Hairlines,
   sehr viel Raum, langsame und weiche Bewegung.
   Signature: der magentafarbene Schlusspunkt in den Headlines.
   Mobile first. Alle Designwerte als Custom Properties in :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* ---- Markenakzente (FEST) ---- */
  --brand-magenta: #B41E6B;
  --brand-navy:    #2A3A6B;

  /* ---- Buehne (frei gewaehlt, warm und hell) ---- */
  --paper:      #F8F6F1;   /* Grundflaeche, warmes Elfenbein */
  --paper-2:    #EFECE3;   /* zweite Flaeche fuer Wechselsektionen */
  --stone:      #E7E3D8;   /* Bild-Platzhalterflaeche */
  --ink:        #232A40;   /* Text, dunkles Navy-Anthrazit */
  --muted:      #70747F;   /* Sekundaertext */
  --hairline:   rgba(35, 42, 64, 0.16);
  --hairline-strong: rgba(35, 42, 64, 0.35);

  /* ---- Typografie ----
     Display: Cormorant (feine Serife mit schoener Kursive), Hotel-Klasse.
     Grundschrift und Labels: Jost (geometrisch, ruhig, Futura-Charakter).
     Die Kombination entspricht der Sprache gehobener Gastronomie. */
  --font-display: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Jost", "Century Gothic", "Segoe UI", Arial, sans-serif;

  /* Typo-Skala (fluid) */
  --fs-hero:  clamp(2.7rem, 1.6rem + 6.5vw, 6.5rem);
  --fs-h1:    clamp(2.4rem, 1.5rem + 4.5vw, 5rem);
  --fs-h2:    clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem);
  --fs-h3:    clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-quote: clamp(1.6rem, 1.2rem + 2.2vw, 2.9rem);
  --fs-stat:  clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);
  --fs-lead:  clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fs-base:  1.0313rem;
  --fs-s:     0.9375rem;
  --fs-label: 0.75rem;

  --ls-label: 0.26em;      /* Sperrung der Kapitaelchen-Labels */

  /* Raum: bewusst grosszuegig */
  --space-s:  1rem;
  --space-m:  1.9rem;
  --space-l:  clamp(3rem, 2.2rem + 4vw, 6rem);
  --space-xl: clamp(5rem, 3.5rem + 9vw, 11rem);
  --gutter:   clamp(1.4rem, 5vw, 4rem);
  --container: 78rem;
  --container-narrow: 46rem;

  /* Kanten: bewusst hart (keine Radien, editorialer Charakter) */
  --radius: 0px;

  /* Bewegung: langsam und weich */
  --dur-fast:   0.25s;
  --dur-med:    0.6s;
  --dur-reveal: 1s;
  --dur-image:  1.8s;
  --dur-count:  1600ms;    /* Count-up, wird von script.js gelesen */
  --ease:       cubic-bezier(0.25, 0.46, 0.2, 1);
  --reveal-shift: 16px;
}

/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0 0 var(--space-s); }
a { color: var(--brand-magenta); }

::selection { background: var(--brand-magenta); color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand-magenta);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--brand-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 300;
}
.skip-link:focus { left: 0; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { padding-block: var(--space-xl); }
.section--tone { background: var(--paper-2); }

/* --------------------------------------------------------------------------
   3. TYPO-BAUSTEINE
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 500;
  color: inherit;
}

h1.display { font-size: var(--fs-h1); }
h2.display { font-size: var(--fs-h2); }
h3.display { font-size: var(--fs-h3); }

/* Signature: der magentafarbene Schlusspunkt */
.dot { color: var(--brand-magenta); }

/* Kapitaelchen-Label (Eyebrow) */
.label {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-m);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--ink);
  max-width: 52ch;
}
.lead--muted { color: var(--muted); }

/* Ruhiger Textlink mit feiner Linie */
.link-more {
  display: inline-block;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.9em 0 0.4em;
  border-bottom: 1px solid var(--hairline-strong);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  min-height: 44px;                /* Touch-Ziel */
}
.link-more:hover { color: var(--brand-magenta); border-color: var(--brand-magenta); }

/* Feine Trennlinie */
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS (bewusst still: Rahmen, Kapitaelchen, keine Radien)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;                /* Touch-Ziel */
  padding: 1em 2.4em;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font: 500 var(--fs-label) var(--font-body);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn--accent { border-color: var(--brand-magenta); color: var(--brand-magenta); }
.btn--accent:hover { background: var(--brand-magenta); color: #fff; }

/* --------------------------------------------------------------------------
   5. HEADER + NAVIGATION
   Desktop: ruhige Inline-Navigation. Mobil: Burger mit Vollbild-Overlay.
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: transparent;
  transition: background var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--hairline);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 5rem;
}

/* Wortmarke: gesperrte Kapitaelchen, spaeter durch finale Logo-Datei ersetzbar */
.brand {
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.7em;
}
.brand-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.brand-name .dot { letter-spacing: 0; }
.brand-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
}

/* Desktop-Navigation */
.nav-desktop { display: none; }
@media (min-width: 60em) {
  .nav-desktop { display: flex; gap: clamp(1.2rem, 2.5vw, 2.6rem); align-items: center; }
  .nav-desktop a {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
    padding: 0.8em 0;
    border-bottom: 1px solid transparent;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  .nav-desktop a:hover { color: var(--brand-magenta); }
  .nav-desktop a[aria-current="page"] {
    color: var(--brand-magenta);
    border-bottom-color: var(--brand-magenta);
  }
  .nav-toggle { display: none; }
}

/* Burger (mobil) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  padding: 15px 13px;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 260;
  position: relative;
}
.nav-toggle .bar {
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition: transform var(--dur-med) var(--ease), opacity var(--dur-fast) var(--ease);
}
body.nav-open .nav-toggle .bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Vollbild-Overlay (mobil) */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--paper);
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med);
}
body.nav-open .nav-overlay { visibility: visible; opacity: 1; }
body.nav-open { overflow: hidden; }
@media (min-width: 60em) { .nav-overlay { display: none; } }

.nav-overlay-inner { width: 100%; }
.nav-main { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em; }
.nav-main a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  padding: 0.1em 0;
  transition: color var(--dur-fast) var(--ease);
}
.nav-main a:hover,
.nav-main a[aria-current="page"] { color: var(--brand-magenta); font-style: italic; }

@media (prefers-reduced-motion: no-preference) {
  .nav-main li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  }
  body.nav-open .nav-main li { opacity: 1; transform: none; }
  body.nav-open .nav-main li:nth-child(1) { transition-delay: 0.06s; }
  body.nav-open .nav-main li:nth-child(2) { transition-delay: 0.12s; }
  body.nav-open .nav-main li:nth-child(3) { transition-delay: 0.18s; }
  body.nav-open .nav-main li:nth-child(4) { transition-delay: 0.24s; }
}

.nav-meta {
  margin-top: var(--space-l);
  display: grid;
  gap: 0.4em;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.nav-meta a { color: var(--muted); text-decoration: none; padding: 0.4em 0; }
.nav-meta a:hover { color: var(--ink); }

/* Ohne JavaScript: Navigation als einfache, sichtbare Liste */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav-overlay {
  position: static;
  visibility: visible;
  opacity: 1;
  display: block;
}
html:not(.js) .nav-main { display: flex; flex-wrap: wrap; gap: var(--space-s); }
html:not(.js) .nav-main a { font-size: 1rem; font-family: var(--font-body); }
html:not(.js) .nav-meta { display: none; }
html:not(.js) .site-header { position: static; background: var(--paper); }

/* --------------------------------------------------------------------------
   6. HERO (zentriert, viel Luft, Bild darunter in voller Breite)
   -------------------------------------------------------------------------- */
.hero {
  padding-top: clamp(9rem, 22vh, 15rem);
  text-align: center;
}
.hero .label { margin-bottom: var(--space-m); }
.hero-title {
  font-size: var(--fs-hero);
  max-width: 16ch;
  margin-inline: auto;
}
.hero .lead {
  margin: var(--space-m) auto 0;
  color: var(--muted);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-l);
}

/* Hero-Bild: volle Breite, ruhiger Auftritt */
.hero-media {
  margin-top: var(--space-xl);
  overflow: hidden;
}

/* Sanfter Auftritt beim Laden */
@media (prefers-reduced-motion: no-preference) {
  @keyframes soft-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  .hero > .container > * { animation: soft-rise var(--dur-reveal) var(--ease) both; }
  .hero > .container > *:nth-child(2) { animation-delay: 0.12s; }
  .hero > .container > *:nth-child(3) { animation-delay: 0.24s; }
  .hero > .container > *:nth-child(4) { animation-delay: 0.36s; }
  @keyframes media-in {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: none; }
  }
  .hero-media { animation: media-in var(--dur-image) var(--ease) 0.3s both; }
}

/* --------------------------------------------------------------------------
   7. MEDIEN-PLATZHALTER (Fotos folgen, Flaechen in Steinton)
   -------------------------------------------------------------------------- */
.media-ph {
  position: relative;
  display: grid;
  place-content: center;
  gap: 0.35rem;
  text-align: center;
  background: var(--stone);
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: var(--space-m);
  min-height: 240px;
}
.media-ph::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.media-ph strong { font-weight: 500; color: var(--ink); }
.media-ph span { letter-spacing: 0.08em; text-transform: none; }
.media-ph--hero { aspect-ratio: 16 / 7; min-height: 320px; }
.media-ph--portrait { aspect-ratio: 4 / 5; }
.media-ph--land { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   8. EDITORIAL-RASTER (Label links, Inhalt rechts) und Split
   -------------------------------------------------------------------------- */
.edit-grid {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 60em) {
  .edit-grid { grid-template-columns: 1fr 2.6fr; gap: var(--space-l); }
}
.edit-grid .label { margin: 0.4em 0 0; }

.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 60em) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 7rem); }
  .split--media-right .split-media { order: 2; }
}
.split-body .display { margin-bottom: var(--space-m); }
.split-body .link-more { margin-top: var(--space-s); }

/* --------------------------------------------------------------------------
   9. INTERLUDE (zentrierte Zeile bzw. Zitat)
   -------------------------------------------------------------------------- */
.interlude {
  text-align: center;
  padding-block: var(--space-xl);
  border-block: 1px solid var(--hairline);
}
.interlude p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-quote);
  line-height: 1.3;
  max-width: 26ch;
  margin: 0 auto;
}
.interlude cite {
  display: block;
  margin-top: var(--space-m);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   10. ANGEBOTS-REIHEN (still, mit Hairlines)
   -------------------------------------------------------------------------- */
.offer-rows { margin-top: var(--space-l); border-top: 1px solid var(--hairline); }
.offer-row {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 60em) {
  .offer-row {
    grid-template-columns: 4rem 1.2fr 2fr auto;
    align-items: baseline;
    gap: var(--space-m);
  }
}
.offer-row .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease);
}
.offer-row h3 { transition: color var(--dur-fast) var(--ease); }
.offer-row p { margin: 0; color: var(--muted); font-weight: 300; max-width: 44ch; }
.offer-row .offer-tag {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.offer-row:hover h3 { color: var(--brand-magenta); font-style: italic; }
.offer-row:hover .num,
.offer-row:hover .offer-tag { color: var(--brand-magenta); }

/* --------------------------------------------------------------------------
   11. PAKET-DETAILS (Angebotsseite)
   -------------------------------------------------------------------------- */
.pack {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 7rem;
}
@media (min-width: 60em) {
  .pack { grid-template-columns: 1fr 1.6fr 1fr; gap: var(--space-l); align-items: start; }
}
.pack-head .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.5em;
}
.pack-head .offer-tag {
  display: inline-block;
  margin-top: var(--space-s);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-magenta);
  border: 1px solid currentColor;
  padding: 0.5em 1.1em;
}
.pack-list { list-style: none; margin: 0; padding: 0; }
.pack-list li {
  padding: 0.8em 0;
  border-bottom: 1px solid var(--hairline);
  font-weight: 300;
}
.pack-list li:first-child { border-top: 1px solid var(--hairline); }
.pack-aside .pack-result {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 var(--space-m);
}
.pack-aside .pack-result strong {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6em;
}

/* --------------------------------------------------------------------------
   12. LISTEN (Warum, Mehrwert, Zielgruppen) und WERDEGANG
   -------------------------------------------------------------------------- */
.fine-list {
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.fine-list li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--space-s);
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.35;
}
.fine-list li::before {
  content: counter(fine, decimal-leading-zero);
  counter-increment: fine;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--muted);
}
.fine-list { counter-reset: fine; }
.fine-list li small {
  display: block;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-s);
  color: var(--muted);
  margin-top: 0.25em;
}
@media (min-width: 60em) {
  .fine-list--cols {
    columns: 2;
    column-gap: var(--space-l);
    border-top: 0;
  }
  .fine-list--cols li { break-inside: avoid; }
  .fine-list--cols li:nth-child(1),
  .fine-list--cols li:nth-child(4) { border-top: 1px solid var(--hairline); }
}

/* Zielgruppen als ruhige Inline-Zeile */
.audience {
  margin: var(--space-l) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.6;
}
.audience li { white-space: normal; }
.audience li:not(:last-child)::after {
  content: "\00B7";
  color: var(--brand-magenta);
  margin: 0 0.55em;
}

/* Werdegang */
.ledger { list-style: none; margin: var(--space-l) 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.ledger li {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-s) var(--space-m);
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 48em) {
  .ledger li { grid-template-columns: 10rem 1fr; padding: 1.35rem 0; }
}
.ledger-year {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.ledger-body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
}
.ledger-body p { margin: 0.15em 0 0; color: var(--muted); font-weight: 300; font-size: var(--fs-s); }
.ledger li.is-highlight .ledger-year,
.ledger li.is-highlight h3 { color: var(--brand-magenta); }
.ledger li.is-highlight h3 { font-style: italic; }

/* --------------------------------------------------------------------------
   13. KENNZAHLEN (ruhige Reihe, Count-up)
   -------------------------------------------------------------------------- */
.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l) var(--space-m);
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--hairline);
  text-align: center;
}
@media (min-width: 60em) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-stat);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-num .suffix { color: var(--brand-magenta); }
.stat-label {
  display: block;
  margin-top: 0.9em;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   14. CTA-BLOCK (zentriert, still)
   -------------------------------------------------------------------------- */
.cta-block {
  text-align: center;
  padding-block: var(--space-xl);
  border-top: 1px solid var(--hairline);
}
.cta-block h2 { max-width: 16ch; margin-inline: auto; }
.cta-block .lead { margin: var(--space-m) auto var(--space-l); color: var(--muted); }

/* --------------------------------------------------------------------------
   15. KONTAKT (Formular rein visuell)
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-l);
}
@media (min-width: 60em) { .contact-grid { grid-template-columns: 3fr 2fr; gap: var(--space-l); } }

.form-field { margin-bottom: var(--space-m); }
.form-field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6em;
}
.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 52px;                /* Touch-Ziel */
  padding: 0.7em 0.1em;
  font: 300 var(--fs-base) var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease);
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--brand-magenta);
}
.form-note { font-size: var(--fs-s); font-weight: 300; color: var(--muted); }
.form-note strong { font-weight: 500; color: var(--ink); }
.form-status {
  margin-top: var(--space-s);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-magenta);
  min-height: 1.5em;
}

.contact-aside h3 { margin-bottom: var(--space-s); }
.contact-aside address {
  font-style: normal;
  font-weight: 300;
  line-height: 2.1;
}
.contact-aside a { color: var(--ink); }
.contact-aside a:hover { color: var(--brand-magenta); }

/* --------------------------------------------------------------------------
   16. FOOTER (hell, Hairline, Kapitaelchen)
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-l) var(--space-m);
  background: var(--paper-2);
}
.footer-brandline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1.2rem + 3vw, 3.2rem);
  margin: 0 0 var(--space-l);
}
.footer-cols {
  display: grid;
  gap: var(--space-m);
  padding-bottom: var(--space-l);
}
@media (min-width: 48em) { .footer-cols { grid-template-columns: 2fr 1fr 1fr; } }
.footer-cols h4 {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1em;
}
.footer-cols address { font-style: normal; font-weight: 300; line-height: 2; }
.footer-cols ul { list-style: none; margin: 0; padding: 0; }
.footer-cols li { margin-bottom: 0.5em; }
.footer-cols a {
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  padding: 0.2em 0;
}
.footer-cols a:hover { color: var(--brand-magenta); }
.footer-legalline {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-s);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   17. RECHTSSEITEN (ruhig, keine Effekte)
   -------------------------------------------------------------------------- */
.legal-zone { padding-block: var(--space-l) var(--space-xl); }
.legal-zone h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-s);
}
.legal-zone h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.2rem;
  margin: var(--space-l) 0 var(--space-s);
}
.legal-zone address { font-style: normal; line-height: 1.9; font-weight: 300; }
.legal-zone p, .legal-zone li { font-weight: 300; }
.legal-zone .placeholder {
  background: color-mix(in srgb, var(--brand-navy) 10%, white);
  font-size: 0.9em;
  padding: 0.1em 0.4em;
}

.draft-note {
  background: color-mix(in srgb, var(--brand-magenta) 6%, white);
  border: 1px solid var(--brand-magenta);
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-l);
}
.draft-note strong {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-magenta);
  margin-bottom: 0.4em;
}
.draft-note p { margin: 0; font-size: var(--fs-s); }

/* --------------------------------------------------------------------------
   18. SCROLL-REVEALS (weich und langsam)
   Grundzustand: alles sichtbar. Moderne Browser: CSS-Scroll-Timeline.
   Ohne Scroll-Timeline: JS-Fallback per IntersectionObserver.
   prefers-reduced-motion: alles aus.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes reveal-soft {
    from { opacity: 0; transform: translateY(var(--reveal-shift)); }
    to   { opacity: 1; transform: none; }
  }
  @supports (animation-timeline: view()) {
    [data-reveal] {
      animation: reveal-soft var(--dur-reveal) var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
  .pre-reveal { opacity: 0; transform: translateY(var(--reveal-shift)); }
  .pre-reveal.in-view {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-reveal) var(--ease),
                transform var(--dur-reveal) var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .pre-reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero > .container > *, .hero-media { animation: none !important; }
}

/* ==========================================================================
   19b. ERWEITERUNGEN V3.1
   Echte Fotos, Team-Bereich, Bildergalerie als Laufband, Journal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FOTO-RAHMEN
   Ersetzt .media-ph, sobald ein echtes Bild vorliegt. Gleiche Seitenformate,
   damit sich Platzhalter und Foto 1:1 austauschen lassen.
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--stone);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo--portrait { aspect-ratio: 4 / 5; }
.photo--land     { aspect-ratio: 3 / 2; }
.photo--wide     { aspect-ratio: 16 / 7; }

/* Bildunterschrift im Editorial-Stil */
.photo-caption {
  margin-top: 0.9em;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Sehr langsames Heranfahren beim Sichtbarwerden (dezent) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes photo-settle {
      from { transform: scale(1.06); }
      to   { transform: scale(1); }
    }
    .photo img {
      animation: photo-settle var(--dur-image) var(--ease) both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

/* --------------------------------------------------------------------------
   TEAM-BEREICH
   -------------------------------------------------------------------------- */
.team { display: grid; gap: var(--space-l); margin-top: var(--space-l); }
@media (min-width: 60em) {
  .team { grid-template-columns: 1.5fr 1fr; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
}
.team-people { display: grid; gap: var(--space-m); }
.team-person { border-top: 1px solid var(--hairline); padding-top: var(--space-s); }
.team-person h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  margin: 0;
}
.team-person .role {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-magenta);
  margin: 0.5em 0 0.6em;
}
.team-person p { margin: 0; color: var(--muted); font-weight: 300; font-size: var(--fs-s); }

/* --------------------------------------------------------------------------
   BILDERGALERIE ALS LAUFBAND
   Endlos laufende Bildstrecke. Die zweite Liste ist die Kopie fuer den
   nahtlosen Loop und fuer Screenreader ausgeblendet. Jede Kachel laesst
   sich 1:1 durch ein <img> ersetzen.
   -------------------------------------------------------------------------- */
.gallery { overflow: hidden; padding-block: var(--space-l); }
.gallery-track {
  display: flex;
  gap: var(--gallery-gap, 1.25rem);
  width: max-content;
}
.gallery-track ul {
  display: flex;
  gap: var(--gallery-gap, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.gallery-track li {
  flex: none;
  width: clamp(200px, 42vw, 380px);
}
.gallery-track .media-ph,
.gallery-track .photo {
  aspect-ratio: 3 / 2;
  min-height: 0;
  height: 100%;
}
.gallery-track li:nth-child(3n+2) .media-ph,
.gallery-track li:nth-child(3n+2) .photo { aspect-ratio: 4 / 5; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes gallery-run {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .gallery-track { animation: gallery-run var(--dur-gallery, 55s) linear infinite; }
  .gallery:hover .gallery-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery { overflow-x: auto; }
  .gallery-track ul[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   JOURNAL (Blog)
   -------------------------------------------------------------------------- */
.journal-list { margin-top: var(--space-l); border-top: 1px solid var(--hairline); }
.journal-item {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 60em) {
  .journal-item { grid-template-columns: 12rem 1fr; gap: var(--space-l); align-items: baseline; }
}
.journal-date {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.journal-item h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  margin: 0 0 0.3em;
}
.journal-item p { margin: 0; color: var(--muted); font-weight: 300; }

/* Hinweiskasten fuer Bereiche, die erst mit dem finalen System leben */
.system-note {
  border: 1px dashed var(--hairline-strong);
  padding: var(--space-m);
  margin-top: var(--space-l);
}
.system-note strong {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-magenta);
  margin-bottom: 0.5em;
}
.system-note p { margin: 0; font-size: var(--fs-s); font-weight: 300; color: var(--muted); }

/* --------------------------------------------------------------------------
   PAKET-ZIELGRUPPE (kleine Zeile im Paketkopf)
   -------------------------------------------------------------------------- */
.pack-for {
  margin: var(--space-s) 0 0;
  font-size: var(--fs-s);
  font-weight: 300;
  color: var(--muted);
  border-left: 2px solid var(--brand-magenta);
  padding-left: 0.9em;
}

/* Zwischenueberschrift innerhalb einer Paketliste */
.pack-phase {
  margin-top: var(--space-s);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-magenta);
}

/* Logo-Bild im Header, greift sobald die Logodatei eingesetzt ist */
.brand-logo { height: 2.2rem; width: auto; }

/* ==========================================================================
   19c. FEINSCHLIFF V3.3
   Logo im Header, Swipe-Galerie auf Touchgeraeten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LOGO
   Ersetzt die typografische Wortmarke. Die Bildmarke traegt den
   Schriftzug CAMPO bereits in sich, daneben steht nur noch der
   Zusatz "Beratung" in Kapitaelchen.
   -------------------------------------------------------------------------- */
.brand { align-items: center; }
.brand-logo {
  height: clamp(2.4rem, 5vw, 3.1rem);
  width: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   GALERIE AUF TOUCHGERAETEN: natives Wischen statt Laufband
   Auf dem Handy erwartet man eine Bildstrecke zum Swipen. Das Laufband
   bleibt Desktop-Verhalten, auf Touchgeraeten wird die Galerie zum
   frei wischbaren Scroller mit sanftem Einrasten.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .gallery {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: var(--gutter, 1.25rem);
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery-track { animation: none; }
  .gallery-track ul[aria-hidden="true"] { display: none; }
  .gallery-track li { scroll-snap-align: center; }
}

/* ==========================================================================
   19d. STARTSEITEN-UMBAU V3.5
   Header-Zusatz im Label-Stil, gestapelte Hero-Buttons, Bild-Trenner,
   Paket-Karten nebeneinander, klarere Zielgruppen, Abstaende.
   ========================================================================== */

/* Header-Zusatz "Gastronomieberatung" im Stil der Kapitaelchen-Labels */
.brand-sub {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.56rem, 1.7vw, 0.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Hero: Headline sitzt hoeher, Buttons gestapelt und gleich breit */
.hero { padding-top: clamp(7rem, 16vh, 11rem); }
.hero .lead + .lead { margin-top: 0.35em; }
.hero-actions {
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}
.hero-actions .btn {
  width: min(21rem, 100%);
  text-align: center;
}

/* Vollbreiter Bild-Trenner zwischen zwei Sektionen */
.photo-band { margin-top: var(--space-xl); }

/* Paket-Karten nebeneinander (mobil untereinander) */
.offer-grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 60em) {
  .offer-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}
.offer-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease);
}
.offer-card .num {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--brand-magenta);
}
.offer-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  margin: 0;
  transition: color var(--dur-fast) var(--ease);
}
.offer-card p {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-s);
  color: var(--muted);
  flex-grow: 1;
}
.offer-card .offer-tag { margin-top: auto; }
.offer-card:hover { border-color: var(--hairline-strong); }
.offer-card:hover h3 { color: var(--brand-magenta); font-style: italic; }

/* Zielgruppen: ruhige Liste mit Punkt-Markern statt Fliesszeile */
.audience {
  display: grid;
  gap: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  line-height: 1.4;
}
@media (min-width: 48em) {
  .audience { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 6vw, 5rem); }
}
.audience li {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  padding: 0.65em 0 0.65em 1.15em;
}
.audience li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-magenta);
}
.audience li:not(:last-child)::after { content: none; }

/* CTA: mehr Luft zwischen Text und Knopf */
.cta-block .btn { margin-top: var(--space-m); }

/* Overlay-Menue: mehr Abstand zum linken Rand */
.nav-overlay-inner { padding-inline: clamp(1.4rem, 6vw, 4rem); }

/* ==========================================================================
   19e. MAGENTA-AKZENTE V3.6
   Mehr Markenfarbe: kursive Headline-Akzente, Bilanz-Zahlen und der
   Gastronomie-Teil der Footer-Wortmarke laufen in Magenta.
   ========================================================================== */
.mag { color: var(--brand-magenta); }
.display em { color: var(--brand-magenta); }
.stat-num { color: var(--brand-magenta); }
.stat-num .suffix { color: var(--brand-magenta); }

/* ==========================================================================
   19f. BERATUNGSSEITE V3.8
   Ablauf als vier klare Schritte, Anker-Abstand fuer Sektionsspruenge.
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
@media (min-width: 60em) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-m); }
}
.step {
  border-top: 1px solid var(--hairline-strong);
  padding-top: var(--space-s);
}
.step .step-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--brand-magenta);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  margin: 0.35em 0 0.3em;
}
.step p {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-s);
  color: var(--muted);
}

/* Sektions-Anker landen nicht unter dem festen Header */
section[id] { scroll-margin-top: 6rem; }

/* ==========================================================================
   19g. FEINSCHLIFF V3.9
   Header mit Namenszusatz, Praxis-Bilanz-Block, Journal mit Bildern,
   Footer-CTA statt eigener CTA-Sektion, praesentere Paket-Titel.
   ========================================================================== */

/* Header: Gastronomieberatung, Trennstrich, Thomas Wirkus */
.brand-sep {
  width: 1px;
  height: 1.05em;
  background: var(--hairline-strong);
  flex: none;
}
@media (max-width: 30em) {
  .brand-sep, .brand-sub--name { display: none; }
}

/* Foto dockt ohne Zwischenraum an den folgenden Block an */
.photo-band--dock { margin-bottom: 0; }
.photo-band--dock + .praxis-bilanz { border-top: 0; }

/* Praxis-Claim und Bilanz als ein zentrierter Block */
.praxis-bilanz { text-align: center; padding-top: var(--space-l); }
.praxis-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-quote);
  line-height: 1.3;
  margin: 0;
}
.praxis-sub {
  margin: 1em 0 0;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* Journal: Bild links, Inhalt rechts, mobil gestapelt */
.journal-item { grid-template-columns: 1fr; }
@media (min-width: 60em) {
  .journal-item {
    grid-template-columns: minmax(11rem, 15rem) 1fr;
    gap: var(--space-l);
    align-items: start;
  }
}
.journal-media .media-ph,
.journal-media .photo { aspect-ratio: 4 / 5; min-height: 0; }
.journal-body .journal-date { display: block; margin-bottom: 0.7em; }
.journal-body .link-more { margin-top: 1em; }

/* Paket-Titel praesenter und kraeftiger */
.pack .pack-head h3 {
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 600;
}

/* Footer-CTA unter der Wortmarke */
.footer-cta { margin: var(--space-l) 0 var(--space-xl); }
.footer-claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  line-height: 1.25;
  margin: 0 0 0.8em;
  max-width: 22ch;
}
.footer-claim em { color: var(--brand-magenta); }

/* ==========================================================================
   19h. FOOTER-KOPF V3.10
   Klare Hierarchie: Wortmarke als Headline, die Frage als kursive
   Subheadline, darunter der Call-to-Action. Zentriert, mit Hairline
   zum restlichen Footer abgeschlossen.
   ========================================================================== */
.footer-head {
  padding-bottom: var(--space-l);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-l);
}
.footer-head .footer-brandline {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.15;
  margin: 0;
}
.footer-head .footer-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.3rem);
  line-height: 1.4;
  color: var(--muted);
  max-width: 30ch;
  margin: 0.5em 0 1.1em;
}
.footer-head .footer-claim em { color: var(--brand-magenta); }

/* ==========================================================================
   19i. FOERDER-TICKER UND INDIVIDUELL-CTA V3.12
   ========================================================================== */

/* Laufband unter der Navigation, Teil des festen Headers */
.ticker {
  overflow: hidden;
  background: var(--brand-magenta);
  color: #F8F6F1;
}
.ticker-track {
  display: flex;
  width: max-content;
}
.ticker-track ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}
.ticker-track li {
  flex: none;
  padding: 0.55em 0;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker-track li::after {
  content: "\2022";
  padding-inline: 1.6em;
  opacity: 0.7;
}
.ticker-ph { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ticker-run {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .ticker-track { animation: ticker-run 60s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { width: 100%; }
  .ticker-track ul { width: 100%; justify-content: center; }
  .ticker-track li { white-space: normal; text-align: center; }
  .ticker-track li:not(:first-child), .ticker-track li::after,
  .ticker-track ul[aria-hidden="true"] { display: none; }
}

/* Heros bekommen etwas mehr Luft, weil der feste Header hoeher wurde */
.hero { padding-top: clamp(8.5rem, 18vh, 12rem); }

/* Hinweiszeile unter den Paketlisten */
.offer-note {
  margin-top: var(--space-m);
  font-size: var(--fs-s);
  font-weight: 300;
  color: var(--muted);
}
.offer-note a { color: var(--brand-magenta); }

/* Zwischenruf mit Button */
.interlude--cta .btn { margin-top: var(--space-m); }
.interlude--cta em { color: var(--brand-magenta); }