/*
  Der Konfigurator im Design der Website.

  Der Konfigurator ist eine eigenständige Seite mit eigenem Stylesheet, das die
  Mechanik des Werkzeugs trägt. Diese Datei liegt danach und stimmt nur das
  Aussehen auf die Website ab: helle Fläche statt dunkler, dieselbe Kopf- und
  Fußzeile, dieselben Farben, Radien und Schriftgrößen. Die Mechanik bleibt
  unangetastet, damit am Werkzeug selbst nichts kaputtgeht.
*/

/* Dieselben Schriftschnitte wie die Website, im schlanken Format. */
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter-SemiBold.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

/* Die Palette der Website, gleiche Werte wie in der Anwendung. */
:root {
  --ink: #f6f8fb;
  --ink-soft: #ffffff;
  --ink-card: #ffffff;
  --cobalt: #2348db;
  --electric: #4d7cff;
  --electric-soft: #e7ecff;
  --paper: #f6f8fb;
  --text: #0b1120;
  --muted: #4c566a;
  --line: #e1e6ef;
  --line-dark: #e1e6ef;
  --shadow: 0 18px 48px rgb(20 32 55 / 9%);

  --stovari-edge: #e1e6ef;
  --stovari-surface: #ffffff;
  --stovari-sunken: #f6f8fb;
  --stovari-ink: #0b1120;
  --stovari-ink-soft: #353d4d;
  --stovari-ink-quiet: #4c566a;
}

body {
  background: var(--paper);
  color: var(--stovari-ink);
}

/* ── Seitenkopf wie auf den anderen Seiten ───────────────────────────── */
.config-section {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--paper);
  color: var(--stovari-ink);
}

.config-shell {
  border: 1px solid var(--stovari-edge);
  border-radius: 32px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.config-intro {
  display: grid;
  justify-items: center;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem);
  background: #ffffff;
  color: var(--stovari-ink);
  text-align: center;
}

.config-intro::after {
  content: none;
}

/*
  Der Seitentitel, Wert für Wert wie components/marketing/seiten-kopf.module.css.

  Hier standen zwei Regeln für dieselbe Überschrift in derselben Datei: eine mit
  clamp(1.9rem, 4.4vw, 3.1rem) und weiter unten eine mit clamp(2.4rem, 6.4vw,
  4.6rem). Die zweite gewann, weil sie später kam, und damit stand über dem
  Konfigurator die Größe des Startseiten-Heros statt der einer Unterseite: 73,6
  statt 56 Pixel. Es gibt jetzt nur noch diese eine Regel.

  Keine Höchstbreite: der Umbruch steht im Markup und soll nicht zusätzlich von
  einer Breite abhängen. Genauso macht es der Kopf der übrigen Unterseiten.
*/
.config-intro h1 {
  max-width: none;
  font-size: clamp(2.35rem, 4.6vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
}

/* Die zweite Zeile eine Stufe leichter. Clash Display gibt es nur in 500 und
   600; ein Schnitt, den es nicht gibt, ließe den Browser auf eine Systemschrift
   ausweichen. */
.config-intro h1 .zeile {
  display: block;
}

.config-intro h1 .leicht {
  font-weight: 500;
}

/* Die Zeile unter der Überschrift. #566076 ist der Blei-Ton, den die übrigen
   Unterseiten unter ihrem Titel benutzen; der eigene Ton des Konfigurators ist
   eine Spur dunkler und fiele im Vergleich auf. */
.config-intro > span {
  max-width: 44ch;
  margin-top: 0.75rem;
  color: #566076;
  font-size: 1rem;
  line-height: 1.6;
}

/* ── Schritt eins: Automat wählen ────────────────────────────────────── */
.machine-step {
  padding: 0 clamp(1rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--stovari-edge);
  background: var(--stovari-sunken);
}

.step-heading {
  color: var(--stovari-ink);
}

.step-heading > span {
  background: var(--cobalt);
  color: #ffffff;
  box-shadow: none;
}

.step-heading small {
  color: var(--stovari-ink-quiet);
}

.machine-picker {
  padding: 0;
  background: transparent;
}

.machine-choice {
  border: 1px solid var(--stovari-edge);
  border-radius: 22px;
  background: #ffffff;
  color: var(--stovari-ink);
}

.machine-choice:hover {
  border-color: color-mix(in srgb, var(--electric) 45%, transparent);
  background: #ffffff;
}

.machine-choice.is-selected {
  border-color: var(--cobalt);
  background: var(--electric-soft);
  box-shadow: none;
}

.machine-choice small {
  color: var(--cobalt);
  font-size: 0.62rem;
}

.machine-choice strong {
  font-size: 1rem;
}

.machine-choice em {
  color: var(--stovari-ink-quiet);
  font-size: 0.72rem;
}

.choice-check {
  border-color: var(--stovari-edge);
}

.machine-choice.is-selected .choice-check {
  border-color: var(--cobalt);
  background: var(--cobalt);
}

/* ── Werkbank ────────────────────────────────────────────────────────── */
.machine-stage {
  border-right-color: var(--stovari-edge);
  background: var(--stovari-sunken);
}

.config-toolbar {
  border-bottom-color: var(--stovari-edge);
  background: var(--stovari-sunken);
}

.selection-bar {
  border-bottom-color: var(--stovari-edge);
}

.stage-heading p,
.catalog-head p {
  color: var(--stovari-ink-quiet);
  font-size: 0.62rem;
}

.stage-heading h3,
.catalog-head h3,
.catalog-head h2 {
  color: var(--stovari-ink);
  font-size: 1.15rem;
}

.icon-button,
.print-button,
.meta-chip,
.layout-field select {
  border-color: var(--stovari-edge);
  border-radius: 12px;
  color: var(--stovari-ink-soft);
  font-size: 0.75rem;
}

.icon-button:hover,
.print-button:hover {
  border-color: var(--cobalt);
  background: var(--electric-soft);
  color: var(--stovari-ink);
}

.meta-chip {
  border-radius: 999px;
}

/* ── Produktübersicht ────────────────────────────────────────────────── */
.catalog-head > span {
  background: var(--stovari-sunken);
  color: var(--stovari-ink-quiet);
  font-size: 0.68rem;
}

.search-field {
  height: 2.75rem;
  border-color: var(--stovari-edge);
  border-radius: 12px;
  background: var(--stovari-sunken);
}

.search-field:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--electric) 18%, transparent);
}

.search-field input {
  color: var(--stovari-ink);
  font-size: 0.9rem;
}

.category-filters button {
  padding: 0.4rem 0.7rem;
  border-color: var(--stovari-edge);
  color: var(--stovari-ink-soft);
  font-size: 0.72rem;
}

.category-filters button:hover,
.category-filters button.is-active {
  border-color: var(--cobalt);
  background: var(--cobalt);
  color: #ffffff;
}

/* Auswahl in der Marke, genau wie auf der Website. */
::selection {
  background: var(--cobalt);
  color: #ffffff;
}

/* ── Automatenbilder in der Auswahl ──────────────────────────────────── */
/*
  Die Bilder waren unten abgeschnitten.

  Der Rahmen ist 60 mal 82 Pixel und verbirgt, was darüber hinausragt. Das Bild
  bekam aber nur seine Breite gesetzt und wuchs in der Höhe nach dem eigenen
  Seitenverhältnis: bei 706 zu 1200 sind das 102 Pixel, bei 582 zu 1200 sogar
  124. Beides ragte unten heraus und wurde abgeschnitten. Jetzt begrenzt das
  Bild beide Seiten und bleibt vollständig sichtbar.
*/
.machine-choice__icon--official {
  overflow: visible;
}

/*
  Absolut im Rahmen statt als Rasterkind.

  Der Rahmen ist ein Raster mit zentrierten Kindern. Ein zentriertes Rasterkind
  bekommt keine feste Bezugshöhe, deshalb blieb „Höhe 100 Prozent" wirkungslos
  und das Bild wuchs nach seinem eigenen Seitenverhältnis. Absolut gesetzt
  bezieht sich die Höhe eindeutig auf den Rahmen, und das Bild passt sich
  vollständig hinein.
*/
.machine-choice__icon--official img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

/* ── Marke und Modell in der Auswahl ─────────────────────────────────── */
/*
  Die Marke steht als eigene Zeile mit einem kurzen Strich davor, wie eine
  Rubrik im Satz. Das Modell steht darunter und bricht nicht mehr um: ein
  Automatenname über zwei Zeilen liest sich wie zwei Geräte.
*/
.machine-choice small {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--cobalt);
  font-family: Inter, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.machine-choice small::before {
  width: 0.9rem;
  height: 1px;
  flex: none;
  background: currentcolor;
  content: '';
}

.machine-choice strong {
  overflow: hidden;
  font-size: clamp(0.86rem, 2.1vw, 1rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── Ausgabe der Belegung ────────────────────────────────────────────── */
.stage-actions {
  gap: 0.5rem;
}

/* Der alte Druckknopf weicht den beiden Ausgaben. */
.stage-actions #print-plan {
  display: none !important;
}

/* ── Gleiche Inhaltsbreite wie die Kopfzeile ─────────────────────────── */
/*
  Der Inhalt lief auf 1480 Pixel, die Kopfzeile auf 1200. Dadurch fluchtete die
  Karte nicht mit dem Logo darüber.

  Diese Regel stand bis zum 14.08.2026 am Ende der Datei und damit hinter der
  Medienabfrage darunter. Eine Medienabfrage erhöht die Gewichtung nicht: die
  Breite von Rand zu Rand am Handy war deshalb wirkungslos, und der Automat
  bekam auf einem 390 Pixel breiten Bildschirm nur 358 davon.
*/
.config-section .page-wrap {
  width: min(75rem, calc(100% - clamp(2rem, 8vw, 4rem)));
}

@media (max-width: 42.5rem) {
  /*
    Am Handy zählt die Fläche zum Belegen.

    Der Automat lief gegen eine feste Höchstbreite von 350 Pixeln und stand
    dazu in drei Kästen mit Innenabstand und Seitenrand. Zusammen kostete das
    rund ein Achtel der Bildschirmbreite. Auf schmalen Flächen läuft der
    Kasten deshalb von Rand zu Rand, und der Automat nimmt sich den Platz.
  */
  .config-section .page-wrap {
    width: 100%;
  }

  .config-shell {
    border-inline: 0;
    border-radius: 0;
  }

  .config-intro {
    padding-inline: 1.25rem;
  }

  .machine-step {
    padding-inline: 0.75rem;
  }

  .workbench--simple .machine-stage {
    padding-inline: 0;
  }

  .workbench--simple .machine-area {
    padding-inline: 0;
  }

  .catalog {
    padding-inline: 0.75rem;
  }

  .vending-machine {
    width: 100%;
    max-width: none;
  }

  /* Beide Ausgaben bleiben auch am Handy erreichbar. */
  .stage-actions .print-button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 2.75rem;
  }
}

/* ── Querformatige Produkte stehen hochkant ──────────────────────────── */
/*
  Das Fach wird zum Bezug für die Maße. Das gedrehte Bild bekommt dadurch die
  Höhe des Fachs als Breite und umgekehrt, steht also aufrecht und füllt das
  Fach genauso aus wie ein Produkt, das schon hochkant fotografiert wurde.
*/
.vm-slot {
  container-type: size;
}

.vm-slot .product-sprite.ist-quer {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 94cqh;
  height: 90cqw;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* ── Rahmen der Website ──────────────────────────────────────────────── */
/*
  Kopfzeile, Fußzeile, Wortmarke und der Hinweis zur Speicherung stehen
  jetzt in stovari-shell.css. Sie tragen dort eigene Namen mit dem Kürzel
  sv-, damit keine Regel des großen styles.css hineinredet.
*/

/* ── Knöpfe wie auf der Website ──────────────────────────────────────── */
/*
  Das alte Stylesheet setzt eckige 35er- und 40er-Knöpfe mit 700er Schrift.
  Die Website hat Pillen mit 44 Pixel Höhe und halbfetter Schrift. Die
  höhere Auszeichnung hier schlägt auch die spätere Regel in styles.css.
*/
.stage-actions .print-button,
.icon-button,
.print-button {
  min-height: 2.75rem;
  height: auto;
  border: 1px solid var(--stovari-edge);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  gap: 0.5rem;
  background: #ffffff;
  color: var(--stovari-ink);
  font-family: Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.stage-actions .print-button:hover,
.icon-button:hover,
.print-button:hover {
  border-color: var(--cobalt);
  background: var(--electric-soft);
  color: var(--stovari-ink);
}

.icon-button svg,
.print-button svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* ── Überschriften im Werkzeug ───────────────────────────────────────── */
/*
  Das Markup nutzt h2, nicht h3. Die vorherige Regel zielte ins Leere, wodurch
  zwei benachbarte Überschriften derselben Ebene in verschiedenen Graden
  standen. Beide liegen jetzt auf der Kartentitel-Stufe der Website.
*/
.stage-heading h2,
.stage-heading h3,
.catalog-head h2,
.catalog-head h3 {
  color: var(--stovari-ink);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.stage-heading p,
.catalog-head p {
  color: var(--stovari-ink-quiet);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Der Seitentitel steht weiter oben, an einer Stelle, in einer Regel. */

/* ── Fokusring wie in den Eingabefeldern der Website ─────────────────── */
.search-field:focus-within {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgb(77 124 255 / 35%);
}

/* Auch die Kategorieknöpfe sind Tippziele und halten das Mindestmaß. */
.category-filters button {
  min-height: 2.75rem;
}

/*
  Auf sehr schmalen Geräten passen Überschrift und die drei Knöpfe nicht mehr
  nebeneinander. Sie standen bisher in einer Zeile und schoben die Seite um
  17 Pixel nach rechts hinaus.
*/
@media (max-width: 26rem) {
  .stage-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .stage-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .stage-actions .print-button {
    flex: 1 1 auto;
    justify-content: center;
    padding-inline: 0.75rem;
  }
}

/*
  Die Zählmarke neben der Überschrift der Produktübersicht steht auf einer
  Zeile ohne Umbruch. Auf sehr schmalen Geräten schob sie die Seite nach
  rechts hinaus.
*/
@media (max-width: 30rem) {
  .catalog-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .catalog-head > span {
    max-width: 100%;
    white-space: normal;
  }
}

/*
  Wer Bewegung abgeschaltet hat, bekommt keine.

  styles.css hat das in Zeile 504 schon vor, setzt die Hebung der Produktkarte
  danach aber in Zeile 754 erneut. Gleiche Gewichtung, spätere Zeile, also
  gewann die Bewegung auf jedem Gerät. Hier steht sie zuletzt und in der
  richtigen Reihenfolge.
*/
@media (prefers-reduced-motion: reduce) {
  .product-card:hover {
    transform: none;
  }
}