/* ═══════════════════════════════════════════════════════════
   STACK° — Nothing-inspired design system / LIGHT MODE
   Gedrucktes technisches Handbuch: Off-White-Papier, schwarze Tinte.
   Mobile first — Basis = Handy, danach min-width-Queries.
   Seiten: index · konfigurator · produkt
   ═══════════════════════════════════════════════════════════ */

/* ── Schriften, selbst gehostet ─────────────────────────────
   Variable Fonts, ein File je Subset deckt alle Schnitte ab.
   Von den eigenen Servern statt von Google: seit LG München I,
   3 O 17493/20, ist der Abruf von fonts.gstatic.com ohne
   Einwilligung ein DSGVO-Verstoss — und ein Request weniger
   ist es obendrein. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/inter-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/montserrat-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/montserrat-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Sichtbar nur für Vorleser: Struktur, die das Layout nicht zeigt. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:root {
  --page:            #F5F5F5;
  --surface:         #FFFFFF;
  --surface-raised:  #F0F0F0;
  --border:          #E8E8E8;
  --border-visible:  #CCCCCC;
  --text-disabled:   #999999;
  --text-secondary:  #666666;
  --text-primary:    #1A1A1A;
  --text-display:    #000000;
  /* Rot bleibt der Warnfarbe vorbehalten: Loeschen, Fehler, Pflichtfeld. */
  --accent:          #D71921;
  /* Blau traegt alles Aktive: Aktion, Auswahl, Status, Fortschritt. */
  --brand:           #1B3FA0;
  --brand-strong:    #142F7A;
  --brand-soft:      #ECEFF9;
  --brand-line:      #C7CFEC;
  --empty:           #E0E0E0;

  /* Klassisch und lesbar statt technisch: Montserrat für Überschriften,
     Inter für alles andere. --f-mono heißt weiter so, trägt aber Inter —
     die Labels waren in echter Mono-Schrift kaum zu lesen. */
  --f-display: "Montserrat", system-ui, sans-serif;
  --f-ui:      "Inter", system-ui, sans-serif;
  --f-mono:    "Inter", system-ui, sans-serif;

  --label-size: 11px;
  --label-ls:   0.08em;

  --s-sm:  8px;
  --s-md:  16px;
  --s-lg:  24px;
  --s-xl:  32px;
  --s-2xl: 48px;
  --s-3xl: 64px;
  --s-4xl: 96px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur:  200ms;

  --gutter: 20px;
  --maxw:   1360px;
  --nav-h:  57px;
}

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

/* Sprungziele halten Abstand zur Leiste: sie steht fest ueber dem
   Inhalt und haette sonst die erste Zeile jedes Ankers verdeckt. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  /* Kein Gummiband. Auf dem Telefon liess sich die Seite über die Kante
     ziehen — nach unten, nach oben und seitwärts, obwohl seitwärts gar
     nichts zu scrollen ist: gemessen ist scrollWidth auf jeder Seite
     genau so breit wie der Bildschirm. Das war nicht der Inhalt, das
     war der Browser. Beim Zurückfedern verrutscht dabei alles, was fest
     steht — Kopfzeile, Leiste — und darunter blitzt die Seite durch. */
  overscroll-behavior: none;
}
/* Der dunkle Grund stammt aus der Zeit, als sich die Seite über die
   Kante ziehen liess: dahinter sollte Schwarz stehen und kein weisser
   Streifen. Gezogen wird jetzt nicht mehr (siehe overscroll-behavior
   oben), aber der Ton bleibt — die Bühne der Startseite ist schwarz,
   und beim Sprung zu einem Anker darf am Rand nichts Helles aufblitzen.
   Auf iOS nimmt Safari dafuer den Grund des body und nicht den des
   Wurzelelements, deshalb stehen hier beide. */
html.start, body.start { background: #000000; }

body {
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* hidden macht den body zum Scrollbehälter — dann lässt sich quer
     doch wieder ein Stück ziehen. clip schneidet nur ab und macht
     keinen Behälter daraus. Die Zeile davor bleibt für ältere Browser
     stehen, die clip noch nicht kennen. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* .btn setzt display:inline-flex und würde [hidden] überstimmen */
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
input, select { font: inherit; }

::selection { background: var(--text-display); color: var(--page); }

/* ═══════════════ PRIMITIVE ═══════════════ */

.label {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: var(--label-size);
  line-height: 1.25;
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Doto — nur 36px+, nie für Fließtext */
.doto {
  font-family: var(--f-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  word-spacing: -0.42em;
  color: var(--text-display);
}

.h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 6.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--text-display);
}

.grid-rules { display: none; }

/* ═══════════════ BUTTONS ═══════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  min-height: 44px;
  padding: 12px 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn--primary { background: var(--brand); color: var(--surface); }
.btn--primary:hover { background: var(--brand-strong); }
.btn--secondary { border-color: var(--border-visible); color: var(--text-primary); }
.btn--secondary:hover { border-color: var(--brand); color: var(--brand); }

.btn--danger { border-color: var(--accent); color: var(--accent); }
.btn--danger:hover { background: var(--accent); color: var(--page); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--brand); }

/* ═══════════════ NAV ═══════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-md) var(--gutter);
  background: var(--page);
  border-bottom: 1px solid var(--border);
}
.wordmark {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--text-display);
}
.wordmark sup { font-size: 0.7em; vertical-align: super; }

.nav__back { font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: var(--label-ls); color: var(--text-secondary); }
.nav__back:hover { color: var(--brand); }

.nav__right { display: flex; align-items: center; gap: var(--s-md); }
/* Kein negativer Rand mehr: der zog die Tastflaeche an die Kante,
   und daneben war kein Platz zum Danebengreifen. */

/* ═══════════════ LAYOUT ═══════════════ */

main { position: relative; z-index: 1; }

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-3xl) var(--gutter);
}
/* Unter der festen Leiste kommt nichts mehr — dort braucht der
   Abschnitt keinen vollen Fussabstand. */
#konfigurator, #hatAbo { padding-bottom: var(--s-xl); }

/* Schliesst direkt an den Kopf an — dazwischen soll keine Lücke stehen. */
.section.section--eng { padding-top: var(--s-md); }
.section__head { margin-bottom: var(--s-xl); }
.section__head .label { margin-bottom: var(--s-md); }

.split { display: grid; gap: var(--s-lg); }

/* ═══════════════ GALERIE ═══════════════ */

.gal { position: relative; }
.gal__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: 8px;
  background: var(--surface-raised);
  overscroll-behavior-x: contain;
}
.gal__track::-webkit-scrollbar { display: none; }
.gal__slide { flex: 0 0 100%; scroll-snap-align: start; }
.gal__slide img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* ── Leerzustände ── */
.empty { padding: var(--s-3xl) 0; }
.empty .pane__q { margin-top: var(--s-md); }
.empty__btns { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-lg); }

/* ── Abo-Status ── */
.status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-md);
  margin-bottom: var(--s-2xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--border-visible);
}
.status dd {
  margin-top: 5px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--text-display);
}

/* ── Vorher / Nachher ── */
.diff {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-md);
  align-items: center;
  margin: var(--s-xl) 0 var(--s-md);
  padding: var(--s-md);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color var(--dur) var(--ease);
}
.diff.is-changed { border-color: var(--brand); }
.diff__val {
  margin-top: 5px;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--text-disabled);
}
.diff__side--new .diff__val { color: var(--text-display); }
.diff__arrow { font-family: var(--f-mono); color: var(--text-disabled); }
.diff.is-changed .diff__arrow { color: var(--brand); }

/* ═══════════════ BOXEN ═══════════════

   Zwei Karten pro Zeile, auch auf dem Handy — so sieht man auf einen
   Blick, dass es eine Auswahl ist und keine Liste. Die eigene Box ist
   dieselbe Karte, nur farbig und zuerst. */

.setlist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg) var(--s-md); }
/* Rasterfelder haben min-width:auto — bei Bildern ist das deren
   Eigenbreite, und die Karte sprengt ihre Spalte. */
.setlist > * { min-width: 0; }

/* Das Bild laeuft bis an die Kanten, der Text bekommt Rand. Bild in
   einem Rahmen im Rahmen — zwei verschachtelte Radien mit Spalt
   dazwischen — sah nach Baukasten aus. */
.setcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.setcard:hover {
  border-color: var(--border-visible);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.30);
  transform: translateY(-2px);
}

/* Die eigene Box ist die Hauptsache und muss das auch aussehen. */
.setcard--eigene {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 10px 30px -14px rgba(27, 63, 160, 0.6);
}
.setcard--eigene:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  box-shadow: 0 16px 34px -14px rgba(27, 63, 160, 0.7);
}
.setcard--eigene .setcard__name { color: #FFFFFF; }
.setcard--eigene .setcard__inhalt { color: rgba(255, 255, 255, 0.66); }
.setcard--eigene .setcard__preis b { color: #FFFFFF; }
.setcard--eigene .setcard__bild { opacity: 0.92; }

/* height:auto ist Pflicht, sonst gewinnt das HTML-Attribut height
   gegen aspect-ratio und die Kachel wird 1400px hoch. */
/* Auf der Karte steckt jetzt keine Aufnahme mehr, sondern dieselbe
   zusammengesetzte Kiste wie im Konfigurator — mit genau den Gläsern
   dieses Satzes. Deshalb ein Behälter und kein img: das Bild darin
   bringt sein Seitenverhältnis selbst mit. */
.setcard__bild {
  display: block;
  width: 100%;
  background: var(--surface-raised);
}
.setcard__bild .kiste { border-radius: 0; }

/* Luft: der Text sitzt nicht mehr an der Kante, und zwischen den
   Zeilen liegt ein Raster statt zufaelliger 2 und 5 Pixel. */
.setcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--s-md) var(--s-md) var(--s-lg);
}
.setcard__name {
  display: block;
  margin-top: var(--s-sm);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-display);
  /* Der Vorrat fuer eine zweite Zeile sass frueher hier. Er steht jetzt
     im Satz darunter, der ohnehin zwei Zeilen hoch ist — zweimal
     Reserve uebereinander waere nur Loch. */
}
/* Der Inhalt ist auf der Kachel die Hauptsache — also lesbar und
   nicht als Kleingedrucktes am Rand. Fünf Zeilen: ein Satz aus fünf
   Positionen passt damit vollständig hinein, auch «Beta-Alanin» und
   «Elektrolyte» in einer Zeile; erst «Komplett» mit zehn bricht ab.
   Eine feste Mindesthöhe braucht es nicht: die Kacheln einer Reihe
   sind ohnehin gleich hoch, und der Preis hängt unten fest. */
.setcard__inhalt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5;
  margin-top: var(--s-sm);
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
/* Der Preis sitzt unten, damit er in einer Zeile auf einer Linie steht. */
.setcard__preis {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: var(--s-md);
}
.setcard__preis b {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--brand);
}
.setcard__preis s { font-family: var(--f-mono); font-size: 12px; color: var(--text-disabled); }

.setlist__fuss { margin-top: var(--s-md); color: var(--text-disabled); }

/* ═══════════════ PRODUKTSEITE ═══════════════ */

.detail { max-width: var(--maxw); margin: 0 auto; padding: var(--s-lg) var(--gutter) var(--s-3xl); }
.detail__back { margin-bottom: var(--s-md); }
.detail__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(30px, 8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--text-display);
}
.detail__spec { margin-top: var(--s-sm); }
.detail__teaser { margin-top: var(--s-md); font-size: 17px; font-weight: 300; color: var(--text-primary); }
.detail__price { display: flex; align-items: baseline; gap: 6px; margin: var(--s-lg) 0 var(--s-md); }
.detail__price b { font-family: var(--f-mono); font-weight: 600; font-size: 22px; color: var(--text-display); }
.detail__text { margin-top: var(--s-xl); }
.detail__text p { margin-top: var(--s-md); font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--text-primary); max-width: 68ch; }

/* ═══════════════ SPEC-TABELLE ═══════════════ */

.spec { border-top: 1px solid var(--border-visible); }
.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-sm);
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--border);
}
.spec__row dt {
  font-family: var(--f-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.spec__row dd { font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--text-primary); max-width: 62ch; }

/* kompakte Variante für Produktfakten — mobil gestapelt, sonst zweispaltig
   rechtsbündig. Werte wie «Sardelle, Sardine · Friend of the Sea» brechen
   rechtsbündig auf schmalem Schirm unschön um. */
.spec--tight .spec__row { gap: 4px; padding: 10px 0; align-items: baseline; }
.spec--tight .spec__row dd { font-family: var(--f-mono); font-size: 11px; color: var(--text-display); }

/* ═══════════════ KONFIGURATOR ═══════════════ */

.konf { display: block; }

/* Bisher lief die Schachtel auf dem Handy mit weg: man scrollte ins
   Regal und wusste nicht mehr, was eigentlich drin liegt. Jetzt bleibt
   sie stehen. Die Aufnahme ist breit und flach — das kostet weniger
   Schirm als das alte hochkant gestellte Raster, deshalb geht das
   Kleben hier auf und vorher nicht. */
.konf__box { max-width: 460px; margin-bottom: var(--s-lg); }

/* ── Die Kiste ──────────────────────────────────────────────
   Zwei Ebenen: unten die Aufnahme der leeren Schachtel, darüber die
   Gläser. Beide liegen im selben Rahmen, die Gläser sind in Prozent
   davon gesetzt — dadurch stimmt die Anordnung in jeder Grösse, vom
   Kartenbild auf der Startseite bis zur grossen Kiste daneben.

   Das Knüllpapier hat keine Fächer. Eine leere Kiste sieht deshalb
   nicht nach fehlenden Plätzen aus, sondern nach einer Schachtel, die
   noch gepackt wird. */
.kiste {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
}
.kiste__foto { position: relative; display: block; }
.kiste__foto > img { display: block; width: 100%; height: auto; }
.kiste__inhalt {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Nur die Gläser fangen Klicks — nicht die durchsichtige Fläche
   darüber, sonst käme man an die Schachtel darunter nie heran. */
.kiste__inhalt > * { pointer-events: auto; }

/* Ein Glas in der Kiste. Es hängt an seiner Standlinie: `bottom` ist
   gesetzt, nicht `top` — beim Wachsen schiebt es sich nach oben aus
   dem Papier heraus und sinkt nicht hinein. Die Breite überlässt es
   dem Bild, damit eine Stickschachtel breiter stehen darf als eine
   Dose. */
.imKasten {
  position: absolute;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  /* Kommt ein Glas dazu, rücken die anderen zusammen und werden
     kleiner. Weil box.js dieselben Elemente behält und nur diese drei
     Eigenschaften neu setzt, fährt jedes Glas an seinen Platz, statt
     zu verschwinden und woanders wieder aufzutauchen. */
  transition: left 420ms var(--ease),
              bottom 420ms var(--ease),
              width 420ms var(--ease),
              height 420ms var(--ease);
}
.imKasten > img {
  /* Breite und Höhe stehen beide am Element (box.js rechnet sie aus
     dem Seitenverhältnis der Aufnahme). Das Bild füllt sie einfach —
     so kann es nicht in die Breite gequetscht werden. */
  width: 100%;
  height: 100%;
  display: block;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* In der Kiste im Konfigurator lässt sich jedes Glas anfassen. Auf
   einer Boxkarte ist es ein reines Bild — dort steht `span`, und die
   Regeln hier greifen nicht. */
button.imKasten { cursor: pointer; }
button.imKasten:hover > img { transform: translateY(-4px); }

.imKasten__raus {
  position: absolute;
  top: -6px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--text-display);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.imKasten__raus::before, .imKasten__raus::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: 50%;
  height: 1px;
  background: var(--surface);
}
.imKasten__raus::before { transform: rotate(45deg); }
.imKasten__raus::after { transform: rotate(-45deg); }
button.imKasten:hover .imKasten__raus, button.imKasten:focus-visible .imKasten__raus { opacity: 1; transform: none; }

/* Landung: der Platz bleibt leer, bis das fliegende Glas angekommen
   ist — sonst stünde es schon da, während das Doppel noch unterwegs
   ist. Ein Übergang, kein Keyframe: der liefe bei jedem Neuzeichnen
   für jedes Glas noch einmal. */
.imKasten.is-landet > img { opacity: 0; transform: translateY(-14px) scale(0.9); }

/* Herausnehmen: das Glas hebt aus der Kiste, dann zeichnet die Seite
   ohne es neu. */
.imKasten.is-raus { pointer-events: none; }
.imKasten.is-raus > img { opacity: 0; transform: translateY(-18px) scale(0.86); }

/* Das fliegende Doppel. Liegt über allem, auch über der Kopfzeile —
   es ist ja nur für einen halben Augenblick da. */
.flug {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.35));
  will-change: transform, opacity;
}

.kiste__cap { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-md); margin-top: var(--s-sm); }
#boxCount { color: var(--text-display); }

/* Der Inhalt im Klartext. Auf dem Etikett steht der Name so klein wie
   auf einem echten — hier steht er lesbar, und weil die Kiste klebt,
   steht er immer im Blick. */
.kiste__liste {
  margin-top: 5px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--text-display);
}
.kiste__mehr {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-ls);
  color: var(--accent);
}

/* Segmentierter Fortschritt */
.progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; }
.progress i { height: 4px; background: var(--empty); transition: background var(--dur) var(--ease); }
.progress i.is-done { background: var(--brand); }
.progress__cap { margin-top: var(--s-sm); }

.pane { display: none; padding-top: var(--s-xl); }
.pane.is-active { display: block; animation: fadeIn 260ms var(--ease); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pane__q {
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: clamp(24px, 5.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-display);
}
.pane__hint { margin-top: var(--s-sm); font-size: 14px; color: var(--text-secondary); }

/* ── Das Regal ──────────────────────────────────────────────
   Eine Liste, keine Kacheln. Zehn grosse Kacheln zwingen zum Scrollen
   und zeigen dabei kaum mehr als das Bild; eine Zeile trägt Bild,
   Name, Menge, Preis und Schalter auf einmal und ist halb so hoch.
   So steht das Sortiment auf einem Schirm und die Wahl geht schnell. */

.regal__kopf { display: block; margin-top: var(--s-xl); color: var(--text-disabled); }

.regal {
  display: block;
  margin-top: var(--s-sm);
  border-top: 1px solid var(--border);
}

.glas {
  position: relative;
  display: grid;
  /* minmax(0,…) statt 1fr: sonst schrumpft die Namensspalte nicht unter
     ihre Min-Content-Breite und die Zeile läuft auf schmalem Schirm über. */
  grid-template-columns: 50px minmax(0, 1fr) auto 24px;
  gap: var(--s-md);
  align-items: center;
  width: 100%;
  padding: 9px var(--s-sm);
  text-align: left;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) var(--ease);
}
.glas:hover { background: var(--surface-raised); }

/* Der Balken links zeigt ohne Farbe im Text an, was schon in der
   Kiste steht — ablesbar auch im Vorbeiscrollen. */
.glas::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: -1px;
  width: 2px;
  background: var(--brand);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

/* Kein Beschnitt und kein Rahmen: die Aufnahmen bringen ihren weichen
   Kontaktschatten selbst mit, und ein quadratischer Ausschnitt hat ihn
   vorher glatt abgeschnitten — die harte Kante darunter war genau das. */
.glas__bild {
  display: block;
  width: 50px;
  height: 56px;
}
.glas__bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 320ms var(--ease);
}
.glas:hover .glas__bild img { transform: scale(1.06); }

.glas__name {
  display: block;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-display);
}
.glas__spec {
  display: block;
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-disabled);
}
.glas__preis {
  font-family: var(--f-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Der Schalter: aus dem Plus wird ein Haken. */
.glas__akt {
  position: relative;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border-visible);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.glas__akt::before, .glas__akt::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--text-display);
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.glas__akt::before { width: 9px; height: 1px; margin: -1px 0 0 -4.5px; }
.glas__akt::after { width: 1px; height: 9px; margin: -4.5px 0 0 0; }

/* Die Zeile eines festen Satzes: dieselbe Zeile, andere Absicht. Sie
   schaltet nichts, sie führt weiter — deshalb statt Plus ein Pfeil und
   kein Balken links, der «drin» bedeutet. Drin ist hier ohnehin alles. */
.glas--fest { cursor: pointer; }
.glas__akt--mehr { box-shadow: none; background: none; }
.glas__akt--mehr::before {
  width: 8px; height: 8px;
  margin: -4px 0 0 -5px;
  background: none;
  border-top: 1px solid var(--text-disabled);
  border-right: 1px solid var(--text-disabled);
  transform: rotate(45deg);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.glas__akt--mehr::after { display: none; }
.glas--fest:hover .glas__akt--mehr::before {
  border-color: var(--brand);
  transform: rotate(45deg) translate(1px, -1px);
}

/* Der Hinweis unter der Liste: hier geht es zum Baukasten, wenn der
   Satz nicht passt. Klein, aber nicht versteckt. */
.pane__fuss {
  margin-top: var(--s-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.pane__fuss a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.glas.is-drin { background: var(--brand-soft); border-bottom-color: var(--brand-line); }
.glas.is-drin:hover { background: #E3E8F6; }
.glas.is-drin::before { opacity: 1; }
.glas.is-drin .glas__preis { color: var(--brand); }
.glas.is-drin .glas__akt { background: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.glas.is-drin .glas__akt::before { opacity: 0; }
.glas.is-drin .glas__akt::after {
  width: 9px; height: 5px;
  margin: -4px 0 0 -4.5px;
  background: none;
  border-left: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
  transform: rotate(-45deg);
}

/* ── Formular ── */
.formblock { margin-top: var(--s-lg); }
.formblock > .label { padding-bottom: var(--s-sm); border-bottom: 1px solid var(--border-visible); }

.field { margin-top: var(--s-md); }
.field > .label { margin-bottom: 5px; }
.field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  transition: border-color var(--dur) var(--ease);
}
.field input::placeholder { color: var(--text-disabled); }
.field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.field input:invalid:not(:placeholder-shown) { border-color: var(--accent); }
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.fieldrow--plz { grid-template-columns: 100px 1fr; }

.mocknote {
  margin-top: var(--s-md);
  padding: var(--s-md);
  border: 1px solid var(--border-visible);
  border-radius: 8px;
  font-family: var(--f-mono);
  font-size: var(--label-size);
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

/* ── Zusammenfassung ── */
.recap { margin-top: var(--s-lg); border-top: 1px solid var(--border); }
.recap__row { display: flex; justify-content: space-between; gap: var(--s-md); padding: 9px 0; border-bottom: 1px solid var(--border); }
.recap__row span:first-child { font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.recap__row span:last-child { font-family: var(--f-mono); font-size: var(--label-size); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.recap__row--head span { color: var(--text-display) !important; }

.panel__rows { padding: var(--s-md) 0; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.row .val { font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-primary); }

.panel__total { padding: var(--s-md) 0 var(--s-lg); border-top: 1px solid var(--border-visible); }
.panel__figure { display: flex; align-items: baseline; gap: 6px; margin: var(--s-sm) 0; }
.panel__figure .doto { font-size: 52px; line-height: 1; }
.panel__figure i { font-family: var(--f-mono); font-style: normal; font-size: 14px; color: var(--text-display); }
.panel__vat { color: var(--text-disabled); }

.signal { font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: 0.1em; color: var(--brand); }
.panel__fine { margin-top: var(--s-md); font-size: 12px; line-height: 1.45; color: var(--text-disabled); }

/* ── Untere Leiste: mobil zwei Zeilen ── */
/* Die Leiste am unteren Rand: Betrag und Weiter, immer im Blick.

   Sie klebte früher mit position:sticky am Fuss des Textflusses. Das
   sieht am Rechner richtig aus und geht auf dem Telefon schief: dort
   fährt die Adressleiste beim Scrollen ein und aus, die Höhe des
   Sichtfensters springt bei jeder Bewegung, und in dem Moment steht
   die Leiste kurz zu hoch — darunter blitzt der Inhalt durch, der
   eigentlich verdeckt sein sollte. Dazu reichte ihr Hintergrund nur
   über die Textspalte, links und rechts blieben die Aussenränder des
   Abschnitts frei, und die Kanten der Regalkarten liefen sichtbar
   daran vorbei.

   Fest am Sichtfenster und über die volle Breite gibt es beides nicht
   mehr: kein Spalt darunter, keine offenen Seiten. env(safe-area) ist
   für das iPhone — sonst sitzt der Knopf unter dem Balken der
   Gestensteuerung. */
.konf__nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-sm);
  padding: var(--s-sm) var(--gutter)
           calc(var(--s-md) + env(safe-area-inset-bottom, 0px));
  background: var(--page);
  border-top: 1px solid var(--border-visible);
}

/* Der Hintergrund läuft unter der Leiste noch ein Stück weiter. Im
   Normalfall sieht das niemand — das Stück liegt unterhalb des
   Bildschirms. Es greift, wenn der Bildschirm während des Scrollens
   kurz anders hoch ist, als das Telefon der Seite gesagt hat: die
   Werkzeugleiste fährt ein, die Höhe springt um ein paar Pixel, und
   genau dann klaffte unter der Leiste ein Streifen, durch den das
   Regal zu sehen war. Fehlt die Höhe, füllt dieses Stück sie. */
.konf__nav::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--page);
}

/* Die Leiste liegt jetzt über dem Fluss statt darin. Ohne diesen
   Freiraum stünde das Kleingedruckte im Fuss unter ihr, denn die Leiste
   bleibt auch am Seitenende stehen. Der Auslauf gehört an das Ende der
   Seite, nicht zwischen Regal und Fuss — dort wäre er nur ein Loch.
   Deshalb trägt der Konfigurator die Klasse mit-leiste. */
.mit-leiste #konfigurator, .mit-leiste .footer__bottom { padding-bottom: 132px; }
.konf__navsum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md); }
.konf__navfig { font-family: var(--f-mono); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text-display); white-space: nowrap; }
.konf__navbtns { display: flex; gap: var(--s-sm); }
.konf__navbtns .btn { padding: 12px 16px; }
.konf__navbtns .btn--primary { flex: 1; }

/* ═══════════════ FOOTER ═══════════════ */

.footer { max-width: var(--maxw); margin: 0 auto; padding: var(--s-2xl) var(--gutter); border-top: 1px solid var(--border-visible); }
.footer__top { display: flex; flex-direction: column; gap: var(--s-2xl); }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-lg); }
.footer__cols .label { margin-bottom: var(--s-md); }
.footer__cols a { display: block; padding: 3px 0; font-size: 14px; color: var(--text-secondary); transition: color var(--dur) var(--ease); }
.footer__cols a:hover { color: var(--brand); }
.footer__bottom { display: flex; flex-direction: column; gap: var(--s-sm); margin-top: var(--s-2xl); padding-top: var(--s-md); border-top: 1px solid var(--border); }
/* Auf Konfigurator und «Mein Abo» besteht der Fuss nur aus dieser einen
   Zeile. Abstand und Trennlinie darüber trennen sie dann von nichts —
   sie hängen bloss als Leerraum unter der Seite. Der Fuss hat seine
   eigene Linie oben, die genügt. */
.footer__bottom:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.footer__bottom .label { color: var(--text-disabled); }

/* ═══════════════ BÜHNE ═══════════════
   Randlos und bis unter die Kopfzeile. Der Text liegt im Bild, damit der
   erste Bildschirm nicht laenger wird als vorher — genau das war die
   Vorgabe: gross, aber nicht mehr Platz nach unten. */

.buehne {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 86svh;
  padding: var(--nav-h) 0 var(--s-2xl);
  background: #101010;
  overflow: hidden;
}

.buehne__bilder { position: absolute; inset: 0; z-index: -2; }
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Verlauf haelt die Schrift lesbar, egal welches Bild gerade steht. */
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Oben laeuft die Abdunklung bis ins volle Schwarz und loest sich
     dann ueber rund ein Achtel der Hoehe ins Bild auf. Zwei Gruende:
     der Untergrund hinter der Seite ist derselbe Ton, dadurch gibt es
     beim Ueberziehen keine sichtbare Kante mehr — und die weisse
     Schrift der Leiste steht nicht mehr auf hellem Glas. */
  background: linear-gradient(180deg,
    rgba(0,0,0,1)    0%,
    rgba(0,0,0,0.88) 4%,
    rgba(0,0,0,0.44) 13%,
    rgba(0,0,0,0.18) 34%,
    rgba(0,0,0,0.62) 76%,
    rgba(0,0,0,0.85) 100%);
}

.buehne__inhalt {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.buehne__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(30px, 8vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
.buehne__titel em { font-style: normal; color: #FFFFFF; opacity: 0.62; }
.buehne__sub {
  margin-top: var(--s-md);
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.buehne__cta {
  width: 100%;
  min-height: 60px;
  margin-top: var(--s-lg);
  padding: 18px 24px;
  font-size: 13px;
  letter-spacing: 0.09em;
}
/* ── Kopfzeile ueber dem Bild ──
   Nur auf der Startseite: die Leiste schwebt ueber der Buehne und wird
   erst fest, wenn die Buehne durchgescrollt ist. */
/* Der Papierton liegt auf den Abschnitten, damit der dunkle Untergrund
   nur dort zu sehen ist, wo ueber die Kante gezogen wird. */
body.start #boxen, body.start .footer { background: var(--page); }

/* Die Leiste haengt oben an der Seite, nicht am Bildschirm: sie liegt
   ueber der Buehne und scrollt mit dem Bild weg. Damit entfaellt die
   ganze Umschalterei — sie steht immer auf dunklem Grund und bleibt
   weiss, egal wie weit man liest. */
body.start .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: var(--s-lg);
  padding-bottom: var(--s-lg);
  background: transparent;
  border-bottom-color: transparent;
}
/* Ueber der Buehne steht die Leiste im dunklen Bild — also weiss. */
body.start .nav .wordmark { color: #FFFFFF; transition: color var(--dur) var(--ease); }

/* Ist die Buehne durch, klappt die Leiste fest und wird zur gewoehnlichen
   hellen Leiste — mitsamt dem Knopf, der vorher unten im Bild stand. Sie
   liegt ueber dem Inhalt und schiebt beim Umspringen nichts weg. */
body.start .nav.is-fest {
  position: fixed;
  padding-top: var(--s-md);
  padding-bottom: var(--s-md);
  background: var(--page);
  border-bottom-color: var(--border);
  animation: navRein 240ms var(--ease);
}
body.start .nav.is-fest .wordmark { color: var(--text-display); }
@keyframes navRein { from { transform: translateY(-100%); } to { transform: none; } }

/* Kein Burger, keine Schublade: bei drei Zielen lohnt sich das Ausklappen
   nicht, und genau daran hing der Fehler — die Schublade sass 20px zu
   hoch und schien durch die durchsichtige Leiste. Stattdessen stehen die
   beiden Ziele als Schaltflaechen da, auf jeder Breite. */
body.start .nav__knapp {
  transition: color var(--dur) var(--ease);
  font-family: var(--f-mono);
  font-size: var(--label-size);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  white-space: nowrap;
  color: #FFFFFF;
}
body.start .nav__knapp:hover { color: rgba(255, 255, 255, 0.75); }
body.start .nav.is-fest .nav__knapp { color: var(--text-secondary); }
body.start .nav.is-fest .nav__knapp:hover { color: var(--brand); }

/* Ueber der Buehne steht der Knopf gross im Bild — oben waere er derselbe
   Weg zweimal. Er kommt erst, wenn der andere aus dem Blick ist. Die
   Regel steht hoeher als die Breitenregel weiter unten und gilt deshalb
   auf jedem Bildschirm. */
body.start .nav__right { gap: var(--s-md); }

/* ═══════════════ REVEAL ═══════════════ */

.reveal { opacity: 0; transition: opacity 400ms var(--ease); }
.reveal.is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .reveal { opacity: 1; }
  .gal__track { scroll-behavior: auto; }
}

/* ═══════════════ ═══ TABLET ═══ ═══════════════ */

@media (min-width: 720px) {
  :root { --gutter: 40px; }

  .setlist { grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }
  .setcard__body { padding: var(--s-lg) var(--s-lg) var(--s-xl); }
  .setcard__name { font-size: 19px; }

  .status { grid-template-columns: repeat(4, 1fr); }
  .spec__row { grid-template-columns: 220px 1fr; gap: var(--s-xl); }
  .spec--tight .spec__row { grid-template-columns: 1fr auto; gap: var(--s-md); }
  .spec--tight .spec__row dd { text-align: right; }
  .footer__cols { grid-template-columns: repeat(3, auto); gap: var(--s-2xl); }
  .footer__bottom { flex-direction: row; justify-content: space-between; }

  /* Einzeilig ist die Leiste flacher — der Freiraum darunter schrumpft mit. */
  .konf__nav { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-md); }
  .mit-leiste #konfigurator, .mit-leiste .footer__bottom { padding-bottom: 96px; }
  .konf__navsum { display: block; }
  .konf__navfig { margin-top: 2px; }
  .konf__navbtns .btn { padding: 12px 20px; }
  .konf__navbtns .btn--primary { flex: none; }
}

/* ═══════════════ ═══ DESKTOP ═══ ═══════════════ */

@media (min-width: 1024px) {
  :root { --gutter: clamp(40px, 5vw, 64px); }

  /* Fuenf pro Zeile: die zehn Boxen gehen glatt in zwei Reihen auf,
     ohne einzelne Karte am Ende. */
  /* Vier statt fünf: die Kacheln sind Ziele, nicht Regalmeter — sieben
     Karten in Fünferspalten liessen drei Löcher in der zweiten Reihe.
     Breiter ist ohnehin besser, seit unter dem Namen ein Satz steht. */
  .setlist { grid-template-columns: repeat(4, 1fr); gap: var(--s-xl) var(--s-md); }
  .setcard__body { padding: var(--s-md) var(--s-md) var(--s-lg); }
  .setcard__name { font-size: 17px; }

  .grid-rules {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .grid-rules i { border-left: 1px solid var(--border); }
  .grid-rules i:first-child { border-left: none; }

  .section { padding: var(--s-4xl) var(--gutter); }
  .section__head { margin-bottom: var(--s-3xl); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: start; }

  .detail { padding: var(--s-2xl) var(--gutter) var(--s-4xl); }
  .detail__media { position: sticky; top: var(--s-4xl); }

  .spec__row { grid-template-columns: 280px 1fr; }
  .spec--tight .spec__row { grid-template-columns: 1fr auto; }
  .spec__row dd { font-size: 17px; }

  /* Hier hat die Kiste eine eigene Spalte und nimmt niemandem Platz
     weg — deshalb darf sie breiter stehen als auf dem Handy. Man
     sieht jedes Glas einfliegen, ohne den Blick vom Regal zu nehmen. */
  .konf { display: grid; grid-template-columns: 460px 1fr; gap: var(--s-2xl); align-items: start; }
  .konf__box { max-width: none; margin: 0; }
  .kiste { border-radius: 10px; }
  .kiste__cap { padding: 0 2px; }

  /* Am Rechner steht die Leiste wieder in ihrer Spalte: hier gibt es
     keine wandernde Adressleiste, und neben der Spalte steht die
     Schachtel, die nicht verdeckt werden darf. */
  .konf__nav {
    position: sticky;
    left: auto;
    right: auto;
    margin-top: var(--s-xl);
    padding: var(--s-md) 0;
  }
  /* Hier steht die Leiste im Fluss und nicht am Bildschirmrand — das
     Stück Hintergrund darunter würde den Fuss überdecken. */
  .konf__nav::after { display: none; }
  .mit-leiste #konfigurator { padding-bottom: var(--s-xl); }
  .mit-leiste .footer__bottom { padding-bottom: 0; }

  .footer__top { flex-direction: row; justify-content: space-between; }
}