/* Kettenrad-Konfigurator — schlankes Stylesheet in Anlehnung an mottek.de
   (Akzent Gelb, dunkle Schrift, klare Karten, responsive). */

:root {
  /* Markenfarben wie Shop-Theme mottek.de (NOVA/my-nova) */
  --gelb: #ffc119;          /* Mottek-Gelb (Shop-Header-Hintergrund) */
  --gelb-dunkel: #f2b100;   /* Hover */
  --tinte: #212121;         /* Textfarbe des Shops */
  --grau: #5f5f5f;
  --linie: #e4e2dd;
  --papier: #f5f5f5;        /* Body-Hintergrund wie Shop */
  --karte: #ffffff;
}

/* Poppins wie der Shop-Header — lokale Kopie aus dem Shop-Theme
   (templates/NOVA/themes/base/fonts/poppins), kein Hotlinking. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: local("Poppins-Regular"),
       url("/static/fonts/Poppins-Regular.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--papier);
  color: var(--tinte);
  line-height: 1.5;
}

/* Kopf — reduzierter Shop-Header (Werte aus mottek.de/NOVA übernommen:
   Hintergrund #ffc119, Text #000, Poppins, dezenter Schatten,
   Logo 2rem mobil / 3.0625rem Desktop). */
.kopf {
  background: var(--gelb);
  color: #000;
  font-family: "Poppins", system-ui, sans-serif;
  box-shadow: 0 1rem 0.5625rem -0.75rem rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
}
/* Bühne wie der Shop-Header (nachgemessen): .container-fluid mit
   padding-x 1rem, margin auto; Deckel header .container-fluid-xl
   { max-width: 78.125rem } (NOVAChild-Override, gilt bei JEDER
   Breite — fluid darunter, ab 1250 px zentriert). */
.kopf-inhalt {
  max-width: 78.125rem; margin: 0 auto; padding: 0.4rem 1rem;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 0.75rem 1rem; flex-wrap: wrap; min-height: 3.125rem;
  /* wrap statt nowrap (UI_BERICHT_08): erlaubt dem Suchfeld auf Mobil
     die zweite Zeile — Logo-Zeile/-Position bleiben unverändert. */
}
.marke { display: inline-flex; align-items: center; flex: 0 0 auto; }
.marken-logo { height: 2rem; width: auto; display: block; }
@media (min-width: 992px) {
  .kopf-inhalt { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .marken-logo { height: 3.0625rem; }
}

/* Header-Suche (UI_BERICHT_08): weißes Feld mit dezentem Rand auf dem
   Gelb, Lupen-Button integriert; Fokus wie die Konfigurator-Felder.
   Mobil: volle Breite in zweiter Zeile; ab 576px neben dem Logo,
   mittig im Restraum. */
.kopf-suche {
  display: flex; align-items: stretch; flex: 1 1 100%;
  background: #fff; border: 1px solid rgba(33, 33, 33, 0.25);
  border-radius: 8px; overflow: hidden;
}
@media (min-width: 576px) {
  .kopf-suche { flex: 1 1 auto; max-width: 30rem; margin: 0 auto; }
}
.kopf-suche input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  padding: 0.5rem 0.2rem 0.5rem 0.8rem; font-size: 0.95rem;
  color: var(--tinte); font-family: inherit;
}
.kopf-suche input:focus { outline: none; }
.kopf-suche:focus-within {
  border-color: var(--gelb-dunkel);
  box-shadow: 0 0 0 3px rgba(255, 193, 25, 0.35);
}
.kopf-suche button {
  border: none; background: transparent; color: var(--tinte);
  padding: 0 0.75rem; cursor: pointer; display: flex; align-items: center;
}
.kopf-suche button:hover { color: #000; background: #f5f5f5; }

/* Inhalt / Karten */
/* Inhalt: Muster der Shop-ARTIKELDETAILSEITE (Hybrid) — dort liegt der
   Seiteninhalt (#product-offer) im .container. Nachgemessene Theme-
   Stufen (weichen vom Bootstrap-Standard ab): Basis width 100% +
   padding-x 1rem, dann max-width 97vw @576 / 720px @768 / 960px @992 /
   1250px @1300. Die Karten bleiben INNERHALB auf 46rem begrenzt und
   zentriert, damit das Formular nicht fensterbreit wird. */
.inhalt { width: 100%; margin: 0 auto; padding: 1rem 1rem 2rem; }
@media (min-width: 576px)  { .inhalt { max-width: 97vw; } }
@media (min-width: 768px)  { .inhalt { max-width: 720px; } }
@media (min-width: 992px)  { .inhalt { max-width: 960px; } }
@media (min-width: 1300px) { .inhalt { max-width: 1250px; } }
.karte {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1.25rem 1.4rem;
  max-width: 46rem; margin: 1rem auto 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
h1 { font-size: 1.35rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
h3 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; }

.hinweis-text { color: var(--grau); font-size: 0.88rem; }
.verborgen { display: none; }
.wichtig { font-weight: 600; }

/* Artikelkarte */
.artikel-bezeichnung { margin: 0 0 0.9rem; font-weight: 600; }
.artikel-daten {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 0.3rem 1.2rem; font-size: 0.95rem;
}
.artikel-daten dt { color: var(--grau); }
.artikel-daten dd { margin: 0; }

/* Formulare */
.zeile { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; }
.feld { display: block; margin: 0.9rem 0; }
.feld > span { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.25rem; }
.feld.wachsend { flex: 1 1 12rem; margin: 0; }
.feld input[type="text"],
.feld input[type="number"] {
  width: 100%; max-width: 16rem; padding: 0.55rem 0.7rem;
  font-size: 1rem; border: 1px solid var(--linie); border-radius: 8px;
  background: #fff; color: var(--tinte);
}
.feld input:focus { outline: 2px solid var(--gelb); border-color: var(--gelb-dunkel); }
.feld-checkbox { display: flex; align-items: center; gap: 0.55rem; }
.feld-checkbox span { margin: 0; }
.feld-checkbox input { width: 1.15rem; height: 1.15rem; accent-color: var(--gelb-dunkel); }

/* Knöpfe */
.knopf {
  display: inline-block; border: 2px solid var(--tinte); border-radius: 8px;
  background: var(--gelb); color: var(--tinte);
  font-size: 1rem; font-weight: 700; padding: 0.6rem 1.3rem;
  cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--gelb-dunkel); }
.knopf.sekundaer { background: #fff; }
.knopf.sekundaer:hover { background: var(--papier); }

/* Ergebnis / Preiskarte */
.ergebnis { border-left: 6px solid var(--gelb); }
.preistabelle {
  margin: 0.5rem 0 1rem; border: 1px solid var(--linie);
  border-radius: 10px; overflow: hidden;
}
.preiszeile {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.9rem; align-items: baseline;
}
.preiszeile + .preiszeile { border-top: 1px solid var(--linie); }
.preiszeile.trenner {
  border-top: 3px solid var(--gelb);
  background: #fffbe8;             /* zartes Gelb, Mottek-Akzent */
  font-weight: 700;
}
.preislabel { min-width: 0; }
.preiswert { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.warenkorb { margin-top: 1rem; }
.gewaehr { margin-top: 0.9rem; }
.preis-gross { font-size: 2rem; font-weight: 800; margin: 0.25rem 0 0; }
.preis-zusatz { font-size: 0.95rem; font-weight: 400; color: var(--grau); }
.preis-mittel { margin: 0.75rem 0 0; }
.preis-klein { color: var(--grau); font-size: 0.9rem; margin: 0.15rem 0 0; }
.arbeiten { margin: 0.25rem 0 0.5rem; padding-left: 1.2rem; }

/* Anfrage-/Fehlerkarten */
.anfrage { border-left: 6px solid var(--tinte); }
.anfrage .knopf { margin-top: 0.5rem; }

/* Fuß */
/* Fuß: gleiche Bühne wie der Kopf (.container-fluid-xl-Verhalten). */
.fuss {
  max-width: 78.125rem; margin: 0 auto; padding: 0 1rem 2rem;
  color: var(--grau); font-size: 0.85rem;
}
.fuss a { color: var(--grau); }

/* Handy */
@media (max-width: 480px) {
  .karte { padding: 1rem; }
  .preis-gross { font-size: 1.6rem; }
  .feld input[type="text"], .feld input[type="number"] { max-width: 100%; }
}

/* =========================================================================
   Variante "Gelbe Kappe" — Zweispalten-Konfigurator (unterhalb der
   unangetasteten Bühne aus UI_BERICHT_03–05).
   ========================================================================= */

.zurueck-wahl { margin: 0.75rem 0 0; font-size: 0.9rem; }
.zurueck-wahl a { color: var(--grau); text-decoration: none; }
.zurueck-wahl a:hover { color: var(--tinte); text-decoration: underline; }

.konfigurator { display: block; }
@media (min-width: 992px) {
  .konfigurator {
    display: grid; grid-template-columns: 3fr 2fr;   /* ~60 / 40 */
    gap: 1.25rem; align-items: start;
  }
  .preisbox { position: sticky; top: 20px; }
}

/* Linke Spalte: EIN zusammenhängender Block */
.konfig-block {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; padding: 1.4rem 1.5rem; margin-top: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.konfig-block h1 { font-size: 1.25rem; margin: 0 0 0.6rem; line-height: 1.35; }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.chip {
  background: #f5f5f5; color: var(--tinte);
  border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.82rem;
  white-space: nowrap;
}

/* Eingabe-Zeilen mit Trennlinien (keine Einzelkarten) */
.eingabe-zeile {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--linie);
}
.eingabe-zeile:first-of-type { border-top: none; }
.eingabe-text { min-width: 0; }
.eingabe-label { display: block; font-weight: 600; }
.eingabe-steuerung { flex: 0 0 auto; }
.feld-fehler {
  color: #a4271c; font-size: 0.88rem; margin: 0.35rem 0 0;
}
.feld-fehler a { color: #a4271c; }

/* mm-Feld: Einheit rechts im Feld, Wert rechtsbündig, gelber Fokus */
.mm-feld {
  display: inline-flex; align-items: center;
  border: 1px solid var(--linie); border-radius: 8px; background: #fff;
  padding-right: 0.6rem;
}
.mm-feld input {
  width: 6.5rem; border: none; background: transparent;
  padding: 0.55rem 0.3rem 0.55rem 0.7rem; font-size: 1rem;
  text-align: right; color: var(--tinte);
}
.mm-feld input:focus { outline: none; }
.mm-feld:focus-within {
  border-color: var(--gelb);
  box-shadow: 0 0 0 3px rgba(255, 193, 25, 0.35);   /* weicher gelber Schein */
}
.mm-feld .einheit { color: var(--grau); font-size: 0.9rem; }

/* Kippschalter (AN = Gelb) */
.schalter { position: relative; display: inline-block; }
.schalter input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; }
.schalter-bahn {
  display: block; width: 3rem; height: 1.65rem; border-radius: 999px;
  background: #d9d6d0; transition: background 0.15s ease; position: relative;
}
.schalter-bahn::after {
  content: ""; position: absolute; top: 0.18rem; left: 0.2rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.schalter input:checked + .schalter-bahn { background: var(--gelb); }
.schalter input:checked + .schalter-bahn::after { transform: translateX(1.28rem); }
.schalter input:focus-visible + .schalter-bahn {
  box-shadow: 0 0 0 3px rgba(255, 193, 25, 0.35);
}
.schalter input:disabled + .schalter-bahn { opacity: 0.45; }

/* Stepper (Minus / Feld / Plus) */
.stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--linie); border-radius: 8px; overflow: hidden;
  background: #fff;
}
.stepper-knopf {
  width: 2.4rem; border: none; background: #f5f5f5; color: var(--tinte);
  font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.stepper-knopf:hover { background: var(--gelb); }
.stepper input {
  width: 3.4rem; border: none; text-align: center; font-size: 1rem;
  color: var(--tinte); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid var(--gelb); outline-offset: -2px; }

.knopf.berechnen { width: 100%; margin-top: 1.1rem; }

/* Preisbox mit Gelber Kappe */
.preisbox {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 12px; margin-top: 1rem; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.kappe { background: var(--gelb); padding: 1rem 1.25rem 0.9rem; }
.kappe-label {
  display: block; color: #5c4a00; font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
}
.kappe-preis {
  display: block; color: var(--tinte); font-size: 1.875rem;  /* ~30px */
  font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.kappe-unter { display: block; color: #5c4a00; font-size: 0.82rem; }

.preis-detail { padding: 1rem 1.25rem 1.15rem; }
.positionszeile, .gesamtzeile {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; align-items: baseline;
}
.positions-text { min-width: 0; }
.positions-preis {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gesamtzeile {
  border-top: 1px dashed var(--linie); margin-top: 0.4rem; padding-top: 0.75rem;
}
.lieferzeit { margin: 0.6rem 0 0.9rem; font-size: 0.92rem; }
.punkt {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: #2e8b40; margin-right: 0.35rem;
}
.warenkorb-knopf { width: 100%; }
.warenkorb-knopf:disabled {
  opacity: 0.55; cursor: not-allowed; background: var(--gelb);
}
.fussnote { margin-top: 0.6rem; }
.produktbild { border-top: 1px solid var(--linie); background: #fff; }
.produktbild img { display: block; width: 100%; height: auto; }

/* Einstiegsseite: Suchtreffer */
.suchtreffer { list-style: none; margin: 1rem 0 0; padding: 0; }
.suchtreffer-zeile {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: 0.65rem 0; border-top: 1px solid var(--linie);
}
.suchtreffer-text { min-width: 0; }

@media (max-width: 480px) {
  .konfig-block, .preis-detail { padding: 1rem; }
  .eingabe-zeile { flex-wrap: wrap; }
}