/* ══════════════════════════════════════════════════════════════
   USÉ DESIGN BAUKASTEN
   Alle visuellen Parameter zentral steuerbar.
   Änderungen hier wirken sofort auf alle Seiten.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ── FARBEN ────────────────────────────────────────────────
     Kernpalette                                              */

  --bg:    #ffffff;   /* Seitenhintergrund                    */
  --card:  #A1C2FF;   /* Kartenfläche / Card-Hintergrund      */
  --text:  #ffffff;   /* Text, Buttons, Rahmen, Icons         */
  --green: #4fba6f;   /* Akzentfarbe (Dots, Highlights)       */

  /* ── SEKUNDÄRE FARBEN ─────────────────────────────────────
     Bereichsspezifische Farben, alle global steuerbar        */

  --hero-bg:         #ffffff;  /* Hero: Hintergrund wenn kein Bild     */
  --hero-overlay:    linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.5) 100%);
                               /* Hero: Abdunkelung über dem Foto      */
  --hero-text:       var(--text);  /* Hero: Logo-Farbe + Tagline-Text  */
  --hero-btn-bg:     var(--text);  /* Hero: Button Hintergrund         */
  --hero-btn-text:   var(--card);  /* Hero: Button Schrift             */
  --img-placeholder: #c4bdb4;  /* Bild-Platzhalter (kein Foto)         */
  --card-img-bg:     #fff;     /* Karten-Bild Platzhalter              */
  --drop-border:     #A1C2FF;  /* Rand der Drop-Zeilen                 */
  --green-glow:      rgba(79,186,111,.25); /* Leuchtring am Drop-Dot    */
  --shadow-color:    #A1C2FF;  /* Schattenfarbe (Cards)         */
  --shadow-color-inner: #6c9bf1; /* Schattenfarbe (Card in Card) */

  --font:  "neue-haas-grotesk-display", "Arial Black", Arial, sans-serif;


  /* ── HEADLINE-SCHRIFT (SVG-Text) ───────────────────────────
     Steuert die großen Outline-Headlines auf allen Seiten   */

  --hl-size:         60;         /* Schriftgröße     (Zahl, kein px)  */
  --hl-line-height:  60;         /* Zeilenhöhe       (Zahl, kein px)  */
  --hl-weight:       700;        /* Schriftschnitt   z.B. 400 / 700   */

  --hl-fill:         var(--card);  /* Füllfarbe des Textes               */
  --hl-stroke-color: var(--text);  /* Konturfarbe des Textes             */
  --hl-stroke:       0.3;       /* Konturdicke  (× Schriftgröße = px)*/
  --hl-shadow:       3px;        /* Glow-Radius des Drop-Shadows       */
  --hl-style:        italic;     /* Schriftschnitt: normal / italic    */

  --hl-pad-top:      16px;       /* Abstände um die Headline           */
  --hl-pad-right:    0px;
  --hl-pad-bottom:   16px;
  --hl-pad-left:     16px;


  /* ── LAYOUT ────────────────────────────────────────────────*/

  --r:       20px;    /* Eckenradius aller Cards               */
  --gap:     16px;    /* Abstand zwischen Elementen            */
  --pad:     16px;    /* Innenabstand der Cards                */
  --page-w:  1137px;  /* Max-Breite des Seiteninhalts          */


  /* ── SCHATTEN ──────────────────────────────────────────────
     Format: X  Y  Blur  rgba(R,G,B, Deckkraft)
     X/Y = 0 → gleichmäßiger Glow ohne Richtung             */

  --shadow:        0 0 12px var(--shadow-color);        /* Äußere Cards   */
  --shadow-inner:  0 0 6px var(--shadow-color-inner);  /* Card auf Card  */


  /* ── SCHRIFTGRÖSSEN ────────────────────────────────────────
     Steuern alle Texte außer den SVG-Headlines               */

  --fs-nav:    20px;   /* Nav-Links                            */
  --fs-body:   20px;   /* Fließtext, Buttons, Labels, Steps    */
  --fs-sub:    30px;   /* Subtitel, Karten-Werte, Tagline      */
  --fs-drop:   30px;   /* Drop-Zeilen (Ankauf-Liste)           */
  --fs-footer: 16px;   /* Footer-Links                         */


  /* ── LOGO / NAV-HÖHE ───────────────────────────────────────
     Logo-Card und Nav-Links-Card teilen dieselbe Höhe        */

  --logo-w:     190px;  /* Breite der Logo-Card                */
  --logo-h:      80px;  /* Höhe  der Logo-Card + Nav-Bar       */
  --logo-svg-h:  48px;  /* Höhe des SVG-Icons im Logo          */


  /* ── HERO-LOGO ──────────────────────────────────────────────*/

  --hero-logo-w:   44%;    /* Breite des Hero-Logos (Prozent)   */
  --hero-logo-max: 340px;  /* Max-Breite des Hero-Logos         */


  /* ── TICKER-EFFEKTE ─────────────────────────────────────────
     Outline: Konturdicke des Ticker-Textes                   */
  --fs-ticker: 90px;   /* Ticker-Schrift                       */
  --ticker-stroke: 8;   /* Konturdicke – Zahl ohne px, SVG-Radius */
  --ticker-shadow: 5px;   /* Glow-Radius (drop-shadow blur)       */

}


/* ── MOBILE  (≤ 850 px) ────────────────────────────────────────
   Schriftgrößen und Abstände für kleine Bildschirme            */

@media (max-width: 850px) {
  :root {
    --hl-size:        46;    /* SVG-Headline (Zahl, kein px)      */
    --hl-line-height: 46;    /* SVG-Zeilenhöhe (Zahl, kein px)    */
    --gap:            10px;  /* Abstand zwischen Elementen        */
    --pad:            12px;  /* Innenabstand der Cards            */

    --fs-nav:    18px;
    --fs-body:   18px;
    --fs-sub:    18px;
    --fs-drop:   14px;
    --fs-ticker: 70px;
    --ticker-stroke: 10;

    --logo-w:     120px;
    --logo-h:      65px;
    --logo-svg-h:  40px;

    --hero-logo-w:   55%;
    --hero-logo-max: 300px;

    --shadow:        0 0 4px var(--shadow-color);

  }
}

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

.content-wrap {
  position: relative;
}

body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

/* ── NAV ── */
nav { position: fixed; top: 0; left: 0px; right: 0px; z-index: 100; }

.nav-inner {
  max-width: var(--page-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gap);
}

.nav-logo {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-inner);
  width: var(--logo-w);
  height: var(--logo-h);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-logo .logo-svg { height: var(--logo-svg-h); width: auto; display: block; }
.nav-logo .logo-svg path { fill: var(--text); }

.nav-links-card {
  flex: 1;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow-inner);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--pad);
  height: var(--logo-h);
}

.nav-links { display: flex; gap: var(--gap); list-style: none; }
.nav-links a {
  border: 3px solid var(--text);
  border-radius: 999px;
  padding: 8px 30px;
  font-size: var(--fs-nav);
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { background: var(--text); color: var(--card); }
.nav-links a.active { background: var(--text); color: var(--card); }

/* ── PAGE ── */
.page {
  max-width: var(--page-w);
  margin: 0 auto;
  padding: var(--nav-h, 110px) var(--gap) 20px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ── BUTTON ── */
.btn {
  border: 3px solid var(--text);
  background: var(--text);
  color: var(--card);
  font-family: var(--font);
  font-weight: 600;
  font-size: var(--fs-body);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: 999px;
  padding: 8px 30px;
  box-shadow: 0 0 0 0px #ffffff;
  transition: box-shadow 0.5s;
}
.btn:hover { box-shadow: 0 0 0 5px #ffffff; }
.card .btn { margin-left: var(--pad); margin-bottom: 32px; }

/* ── CARD ── */
.card {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.card .card { box-shadow: var(--shadow-inner); }

/* ── HEADLINE ── */
.hl { padding: var(--hl-pad-top) var(--hl-pad-right) var(--hl-pad-bottom) var(--hl-pad-left); margin: 0; filter: drop-shadow(0 0 var(--hl-shadow) var(--hl-stroke-color)); }

/* ── BODY TEXT ── */
.body-text {
  font-size: var(--fs-body);
  line-height: 1.2;
  margin-bottom: 32px;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ── GRID LAYOUTS ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.grid-2 > *, .grid-3 > * { min-width: 0; }

/* ── IMAGE BLOCKS ──
   .img-block hat keine eigene Bildhöhe – die Höhe ergibt sich aus dem
   Content der Nachbarspalte (Grid-Row), das Bild wird per position:absolute
   passend zugeschnitten. So entsteht keine Luft bei kurzen Texten.        */
.img-block {
  position: relative;
  border-radius: 12px;
  background: var(--img-placeholder);
  min-height: 340px;
  overflow: hidden;
}
.card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--card-img-bg);
  background-size: cover;
  background-position: center top;
  overflow: hidden;
}
.img-block img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── INNER CARD CONTENT ── */
.card-info  { padding: 16px 8px 8px 8px ; }
.card-label { font-size: var(--fs-body); line-height: 1.2; }
.card-value { font-size: var(--fs-sub); font-weight: 700; }

/* ── FOOTER ── */
footer {
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}
footer a { font-size: var(--fs-footer); color: var(--text); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ── BURGER ── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── HERO ── */
.hero {
  position: relative;
  border-radius: var(--r);
  box-shadow: 0 0 4px 2px var(--hero-glow, var(--shadow-color));
  overflow: hidden;
  height: 70vh;
  background: var(--hero-bg);
  background-size: cover;
  background-position: center top;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px;
}
.hero-logo {
  width: var(--hero-logo-w);
  max-width: var(--hero-logo-max);
  margin-bottom: 24px;
}
.hero-logo .logo-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 18px rgba(255,255,255,1)); }
.hero-logo .logo-svg path { fill: var(--hero-text); }

.hero-tagline {
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 24px;
  width: 100%;
  padding: 0 30px;
  color: var(--hero-text);
  text-shadow: 0 0 8px rgba(255,255,255,1);
}

.hero .btn {
  border-color: var(--text);
  background: var(--text);
  color: #000;
  mix-blend-mode: screen;
  box-shadow: 0 0 18px rgba(255,255,255,1), 0 0 0 0px #ffffff;
  transition: box-shadow 0.5s;
}
.hero .btn:hover {
  box-shadow: 0 0 18px rgba(255,255,255,1), 0 0 0 5px #ffffff;
  mix-blend-mode: normal;
}

/* ── TICKER ── */
.ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 18px 0;
  user-select: none;
  background: var(--card);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ticker-track { display: inline-flex; animation: scroll 28s linear infinite; }
.ticker-item {
  font-size: var(--fs-ticker);
  font-weight: 700;
  font-style: italic;
  font-family: var(--font);
  color: var(--card);
  filter: url(#ticker-outline) drop-shadow(0 0 var(--ticker-shadow) var(--text));
  letter-spacing: -0.025em;
  padding-right: 5rem;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(var(--ticker-translate, -50%)); } }

/* ── DROP ROWS ── */
.drop-row {
  display: flex;
  align-items: center;
  gap: var(--pad);
  background: var(--text);
  border: none;
  color: var(--card);
  border-radius: 999px;
  padding: 10px 24px;
  margin-bottom: var(--gap);
  font-size: var(--fs-drop);
  font-weight: 700;
}
.drop-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--green-glow);
}
a.drop-row { text-decoration: none; box-shadow: 0 0 0 0px #ffffff; transition: box-shadow 0.5s; }
a.drop-row:hover { box-shadow: 0 0 0 5px #ffffff; }
.drop-date { font-weight: 700; min-width: 150px; }
.drop-cat  { flex: 1; }
.drop-loc  { font-weight: 600; }

/* ── CAROUSEL DOTS ── */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 0 4px;
}
.carousel-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--text);
  opacity: 0.25;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.carousel-dots button.active { opacity: 1; transform: scale(1.3); }

/* ── STEPS ── */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: 0 var(--pad) var(--pad);
}

.step-item {
  display: flex;
  align-items: center;
  gap: var(--pad);
}

.step-num {
  flex-shrink: 0;
}

.step-text { flex: 1; min-width: 0; }

.step-title {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 4px;
  overflow-wrap: break-word;
}

.step-desc {
  font-size: var(--fs-body);
  line-height: 1.2;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* ── SHOPS LIST ── */
.shops-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.shop-item {
  display: flex;
  align-items: stretch;
  gap: var(--pad);
  border: 2px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 12px;
  padding: var(--pad);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--text);
}
.shop-item:hover { border-color: var(--text); }
.shop-item.active { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }

.shop-info { flex: 1; }

.shop-name {
  font-size: var(--fs-body);
  font-weight: 700;
  margin-bottom: 6px;
}

.shop-desc {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 8px;
}

.shop-addr {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
}

.shop-hours {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 8px;
}

.shop-thumb {
  width: 110px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.shop-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── LEGAL PAGES ── */
.legal-content {
  padding: 0 var(--pad) var(--pad);
}
.legal-content h2 {
  font-size: var(--fs-sub);
  font-weight: 700;
  margin: 28px 0 8px;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content address {
  font-size: var(--fs-body);
  font-style: normal;
  line-height: 1.2;
  margin-bottom: 12px;
}
.legal-content a { color: var(--text); }
.legal-content ul {
  font-size: var(--fs-body);
  line-height: 1.2;
  margin-bottom: 12px;
  padding-left: 1.4em;
}
.legal-content li { margin-bottom: 4px; }

/* ── MAP ── */
.map-wrap {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.map-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: none;
  display: block;
}

/* ── RESPONSIVE ── */
@media (max-width: 850px) {
  body { margin: 0; }

  /* Nav sticky — gleiche Breite wie Content */
  nav { position: sticky; top: 0; left: auto; right: auto; }
  .nav-inner { max-width: 100%; padding: 12px 12px; gap: 12px; }
  .nav-burger { display: flex; }
  .nav-links-card { justify-content: flex-end; align-items: center; }
  .nav-links-card { height: var(--logo-h); }

  /* Dropdown: absolut unter der Nav */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    left: 12px;
    right: 12px;
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow-inner);
    flex-direction: column;
    align-items: flex-end;
    padding: 24px 16px 24px 0px;
    gap: 12px;
    z-index: 200;
  }
  nav.nav-open .nav-links { display: flex; gap: 24px; }
  .nav-links a { text-align: right; font-size: var(--fs-nav); padding: 6px 20px; }

  /* Kein extra padding-top nötig — Nav ist im Flow */
  .page { padding-top: 0; padding-left: 12px; padding-right: 12px; }

  /* Grids → 1 Spalte */
  .grid-2,
  .grid-3 { grid-template-columns: 1fr; }

  .img-block { min-height: unset; aspect-ratio: 4 / 3; }

  /* Karten-Inhalte */
  .body-text  { margin-bottom: 16px; }

  /* Buttons */
  .btn { padding: 6px 16px; }
  .card .btn { margin-bottom: 16px; }

  /* Ticker — mehr Padding damit der SVG-Filter nicht abgeschnitten wird */
  .ticker { padding: 28px 0; }

  /* Hero */
  .hero { height: 65vh; }
  .hero-logo { margin-bottom: 12px; }
  .hero-tagline { padding: 0 8px; margin-bottom: 12px; }
  .hero-content { padding: 16px; }

  /* Drop Rows */
  .drop-row {
    padding: 8px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .drop-date { min-width: 60px; flex-shrink: 0; }
  .drop-cat  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drop-loc  { flex-shrink: 0; }

  .card-img { aspect-ratio: 3 / 2; }

  /* Swipeable inner cards */
  .card .grid-3 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px 12px;
    margin: -10px -12px;
    scroll-padding-left: 12px;
    gap: 8px;
  }
  .card .grid-3::-webkit-scrollbar { display: none; }
  .card .grid-3 > .card {
    flex-shrink: 0;
    width: 82vw;
    scroll-snap-align: start;
  }

  /* Shops */
  .shop-thumb { width: 80px; }
  .map-wrap iframe { min-height: 300px; }
  .map-wrap { order: -1; }
  .shops-list { order: 1; }
}