/* ==========================================================================
   Ladenburger Shop — Basis-Stylesheet
   Stand: Gestaltungsentwurf (Klickdummy). Beispielpreise, kein Produktivcode.

   Wofür diese Datei da ist
   Sie legt den Gestaltungsrahmen des Shops fest: Farben, Schrift, Abstände
   und die Bausteine, die auf allen Seiten gleich aussehen. Seitenbezogene
   Ergänzungen liegen in startseite.css und produktseite.css und werden nach
   dieser Datei geladen.

   Grundregeln
   1. Alle Farben, Schriftgrößen und Abstände stehen als Gestaltungswerte
      (CSS-Variablen) in Abschnitt 2. Im restlichen Code wird nur auf diese
      Werte verwiesen, damit eine Änderung an einer Stelle überall greift.
   2. Der Rahmen (Kopf, Schrittleiste, Formulare, Preisbox, Fuß) ist neutral
      in Markenfarben gehalten.
   3. Farbe bringt das Sortiment mit: Das Attribut data-sortiment am <body>
      setzt --sortiment. Heute gibt es nur „energie" (NaPur-Grün). Ein neues
      Sortiment ist ein neuer Block in Abschnitt 3, der Rahmen bleibt unberührt.
   4. Produktkarten tragen die Farbe ihrer Marke (data-marke), unabhängig von
      der Seite, auf der sie stehen.
   5. Bedienzustände (Hover, Fokus) laufen über --zustand und sind bewusst
      neutral, weil jedes Sortiment eine eigene Farbe mitbringen kann.

   Herkunft der Werte
   Marke, Grautöne und Raster stammen aus dem Website-Entwurf (Relaunch
   ladenburger.de), damit Shop und Website als eine Marke auftreten.
   Abweichungen davon sind an der jeweiligen Stelle kommentiert.

   Übersicht der Farben in Klartext: gestaltung.html

   Inhalt
     1. Schriften
     2. Gestaltungswerte
     3. Sortimente und Produktmarken
     4. Grundlagen
     5. Seitenrahmen: Kopf, Brotkrumen, Fuß
     6. Schrittleiste
     7. Produktkopf
     8. Konfigurator und Formularbausteine
     9. Preisbox und Knöpfe
    10. Produktkarten
    11. Anpassungen für Tablet und Handy
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Schriften
   Lato (SIL Open Font License), lokal eingebunden — keine Anfrage an Google.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Lato";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/lato-regular-400.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/lato-bold-700.woff2") format("woff2");
}

@font-face {
  font-family: "Lato";
  font-weight: 900;
  font-display: swap;
  src: url("fonts/lato-black-900.woff2") format("woff2");
}


/* --------------------------------------------------------------------------
   2. Gestaltungswerte
   -------------------------------------------------------------------------- */

:root {
  /* Markenfarben */
  --farbe-marke-hell: #d4c3a8;       /* Sandbeige: Regler, helle Knöpfe, Akzentlinien */
  --farbe-marke-mittel: #97886f;     /* Mittelton: Kanten und Hover auf Sandbeige */
  --farbe-marke-dunkel: #7f725a;     /* Erdbraun: Hauptknopf, neutrale Sortimentsfarbe */

  /* Grundtöne */
  --farbe-dunkel: #2d2d2d;           /* Anthrazit: Überschriften, aktive Elemente */
  --farbe-text: #505050;             /* Fließtext */
  --farbe-text-schwach: #6b6a63;     /* Hinweise, Nebenangaben */
  --farbe-rand: #e2ddd3;             /* Linien und Rahmen */
  --farbe-flaeche: #ffffff;          /* Karten, Formulargruppen, Kopf */
  --farbe-body-bg: #f4f3ef;          /* Seitengrund */
  --farbe-aussen: #dedede;           /* Grund neben der Seite auf breiten Bildschirmen */
  --farbe-weiss: #ffffff;            /* Schrift auf dunklen Flächen und Fotos */
  --farbe-bild-grund: #efe8dc;       /* Hinter freigestellten Produktfotos statt Weiß */
  --farbe-platzhalter: linear-gradient(135deg, #d8cdb8, #b9ac8f);   /* solange ein Foto fehlt */

  /* Signalfarben */
  --farbe-fehler: #b3261e;           /* Fehler und Hinweis „Beispielpreise" */

  /* Produktmarken — Werte in Abschnitt 3 zugeordnet */
  --farbe-napur: #94c11f;            /* NaPur-Grün, abgenommen von der Sackverpackung */
  --farbe-napur-hell: #eef5dc;       /* NaPur-Grün aufgehellt, für Hinterlegungen */
  --farbe-labu: #d7a471;             /* LABU-Holzton, von labu24.de abgenommen — vor Livegang mit Markenvorgabe abgleichen */

  /* Bedienzustand — neutral, siehe Grundregel 5 */
  --zustand: var(--farbe-dunkel);

  /* Sortiment — neutraler Standard, Sortimente überschreiben in Abschnitt 3 */
  --sortiment: var(--farbe-marke-dunkel);
  --sortiment-text: var(--farbe-weiss);
  --sortiment-hell: #f1ece3;

  /* Schatten und Schleier */
  --schatten-regler: 0 1px 3px rgba(0, 0, 0, 0.15);
  --schatten-karte: 0 8px 24px rgba(0, 0, 0, 0.1);
  --schatten-einstieg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --schatten-dialog: 0 16px 48px rgba(0, 0, 0, 0.2);
  --schleier-rgb: 20, 18, 12;        /* dunkles Braunschwarz, mit wechselnder Deckkraft über Fotos */

  /* Schrift */
  --schrift: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-h1: 44px;
  --schrift-h1-produkt: 34px;        /* Produktname in der Kaufbox */
  --schrift-h2: 28px;
  --schrift-h3: 21px;
  --schrift-zahl: 34px;              /* Gesamtpreis, Schrittnummern */
  --schrift-lead: 18px;              /* Einleitungstexte */
  --schrift-kicker: 16px;
  --schrift-body: 16px;
  --schrift-mittel: 15px;            /* Tabellen, Kartentexte */
  --schrift-klein: 13px;
  --schrift-mini: 12px;              /* Kleingedrucktes, Markenetiketten */

  /* Raster. Abweichung vom Website-Entwurf: Seitenkörper 1600 statt 1400 px,
     weil auf Laptops sonst zu viel Rand bleibt. Die Bühne wächst mit, damit
     Formular und Preisbox nebeneinander Platz haben. */
  --breite-seitenkoerper: 1600px;
  --breite-buehne: 1280px;
  --rand-seite: 2rem;

  /* Abstände und Formen */
  --abstand-sektion: 3.5rem;
  --abstand-raster: 1.5rem;
  --radius: 4px;
}


/* --------------------------------------------------------------------------
   3. Sortimente und Produktmarken
   -------------------------------------------------------------------------- */

/* Sortiment Energie — setzt die Farbe für Kicker, gewählte Kacheln und Preisbox */
[data-sortiment="energie"] {
  --sortiment: var(--farbe-napur);
  --sortiment-text: var(--farbe-dunkel);
  --sortiment-hell: var(--farbe-napur-hell);
}

/* Produktmarken — Farbe je Marke, nicht je Seite (Etikett und Unterkante der Karte) */
[data-marke="napur"] {
  --marke: var(--farbe-napur);
  --marke-text: var(--farbe-dunkel);
}

[data-marke="labu"] {
  --marke: var(--farbe-labu);
  --marke-text: var(--farbe-dunkel);
}

[data-marke="zubehoer"] {
  --marke: var(--farbe-marke-hell);
  --marke-text: var(--farbe-dunkel);
}


/* --------------------------------------------------------------------------
   4. Grundlagen
   -------------------------------------------------------------------------- */

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

/* hidden muss immer gewinnen, sonst überschreibt display:flex/grid eines Bausteins das Attribut */
[hidden] {
  display: none !important;
}

html {
  background: var(--farbe-aussen);
}

body {
  max-width: var(--breite-seitenkoerper);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--farbe-body-bg);
  color: var(--farbe-text);
  font: 400 var(--schrift-body) / 1.6 var(--schrift);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--farbe-dunkel);
  font-weight: 700;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--zustand);
  outline-offset: 2px;
}

/* Bühne: Inhaltsbreite innerhalb des Seitenkörpers */
.buehne {
  max-width: var(--breite-buehne);
  margin: 0 auto;
  padding: 0 var(--rand-seite);
}


/* --------------------------------------------------------------------------
   5. Seitenrahmen: Kopf, Brotkrumen, Fuß
   Neutral und gleich für alle Sortimente.
   -------------------------------------------------------------------------- */

.kopf {
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
}

.kopf-innen {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem var(--rand-seite) 1rem 0;   /* Logo bündig am linken Rand */
}

.kopf .logo img {
  display: block;
  width: auto;
  height: 76px;
}

/* „Shop" als Absender neben dem Logo, verlinkt wie das Logo auf die Startseite */
.kopf .shop-titel {
  margin-left: -1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--farbe-rand);
  color: var(--farbe-text-schwach);
  font-size: 1.1rem;
  text-decoration: none;
}

.kopf .shop-titel:hover {
  color: var(--farbe-dunkel);
}

/* Sortimente links, Service-Links rechts außen */
.kopf nav {
  margin-right: auto;
}

.sortimente {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sortimente a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--farbe-dunkel);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.sortimente a:hover {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.sortimente a[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: var(--schrift-klein);
}

.kopf-aktionen a {
  color: var(--farbe-text-schwach);
  text-decoration: none;
  white-space: nowrap;   /* Links nie umbrechen, lieber blendet Abschnitt 11 sie aus */
}

.kopf-aktionen a:hover,
.kopf-aktionen a[aria-current] {
  color: var(--zustand);
}

.kopf-aktionen .warenkorb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--farbe-dunkel);
  font-weight: 700;
}

.warenkorb svg {
  width: 20px;
  height: 20px;
}

/* Brotkrumen */
.brotkrumen {
  padding: 1rem 0;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
}

.brotkrumen a {
  color: inherit;
}

.brotkrumen a:hover {
  color: var(--zustand);
}

/* Fuß */
.fuss {
  padding: 1.5rem 0;
  border-top: 1px solid var(--farbe-rand);
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
}


/* --------------------------------------------------------------------------
   6. Schrittleiste
   Zeigt, wo der Kunde im Bestellablauf steht. Nummern per CSS-Zähler.
   -------------------------------------------------------------------------- */

.schritte {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--farbe-rand);
  list-style: none;
  counter-reset: schritt;
}

.schritte li {
  flex: 1;
  margin-bottom: -1px;
  padding: 0.9rem 0;
  border-bottom: 3px solid transparent;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
  counter-increment: schritt;
}

.schritte li::before {
  content: counter(schritt);
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 50%;
  background: var(--farbe-flaeche);
  font-weight: 700;
}

.schritte li[aria-current] {
  border-bottom-color: var(--farbe-dunkel);
  color: var(--farbe-dunkel);
  font-weight: 700;
}

.schritte li[aria-current]::before {
  border-color: var(--farbe-dunkel);
  background: var(--farbe-dunkel);
  color: var(--farbe-weiss);
}


/* --------------------------------------------------------------------------
   7. Produktkopf
   Hier zeigt sich die Sortimentsfarbe zuerst (Kicker über der Überschrift).
   -------------------------------------------------------------------------- */

.produktkopf {
  padding: var(--abstand-sektion) 0 2rem;
}

.kicker {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  background: var(--sortiment);
  color: var(--sortiment-text);
  font-size: var(--schrift-kicker);
  font-weight: 700;
}

.produktkopf h1 {
  font-size: var(--schrift-h1);
  line-height: 1.2;
}

.produktkopf p {
  max-width: 46rem;
  margin: 0.75rem 0 0;
  font-size: var(--schrift-lead);
}

/* Lieferort nur als Bestätigung, nicht änderbar — geändert wird auf der Startseite */
.lieferort-bestaetigung {
  margin: 1rem 0 0;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-mittel);
}

.lieferort-bestaetigung strong {
  color: var(--farbe-dunkel);
}

/* Knopf, der wie ein Textlink aussieht */
.textknopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--farbe-text-schwach);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.textknopf:hover {
  color: var(--zustand);
}


/* --------------------------------------------------------------------------
   8. Konfigurator und Formularbausteine
   Formular links, Preisbox rechts. Die Bausteine (.gruppe, .feld, .wahl,
   .eingabe) werden auch in der Kaufbox der Produktseiten verwendet.
   -------------------------------------------------------------------------- */

.konfigurator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2.5rem;
  align-items: start;
  padding-bottom: var(--abstand-sektion);
}

/* Gruppe: weiße Karte für zusammengehörige Felder */
.gruppe {
  margin-bottom: var(--abstand-raster);
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.gruppe h2 {
  margin-bottom: 1.25rem;
  font-size: var(--schrift-h3);
}

.feld + .feld {
  margin-top: 1.5rem;
}

.feld > .etikett {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--farbe-dunkel);
  font-weight: 700;
}

.hinweis {
  margin: 0.4rem 0 0;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
}

/* Menge: Regler und Zahlfeld nebeneinander */
.menge {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Regler Ton in Ton: gefüllter Teil und Griff in Sandbeige, Griff mit Mittelton-Kante.
   --fuellung (Anteil in %) setzt preise.js, weil Chrome/Safari den gefüllten Teil
   sonst nicht einfärben können. Firefox nutzt dafür ::-moz-range-progress. */
.menge input[type=range] {
  flex: 1;
  height: 28px;
  margin: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.menge input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid var(--farbe-rand);
  border-radius: 4px;
  background: linear-gradient(to right, var(--farbe-marke-hell) var(--fuellung, 0%), var(--farbe-body-bg) var(--fuellung, 0%));
}

.menge input[type=range]::-moz-range-track {
  height: 8px;
  border: 1px solid var(--farbe-rand);
  border-radius: 4px;
  background: var(--farbe-body-bg);
}

.menge input[type=range]::-moz-range-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--farbe-marke-hell);
}

.menge input[type=range]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid var(--farbe-marke-mittel);
  border-radius: 50%;
  background: var(--farbe-marke-hell);
  box-shadow: var(--schatten-regler);
  -webkit-appearance: none;
}

.menge input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid var(--farbe-marke-mittel);
  border-radius: 50%;
  background: var(--farbe-marke-hell);
  box-shadow: var(--schatten-regler);
}

.menge input[type=range]:hover::-webkit-slider-thumb {
  border-color: var(--farbe-marke-dunkel);
}

.menge input[type=range]:hover::-moz-range-thumb {
  border-color: var(--farbe-marke-dunkel);
}

.zahl {
  display: flex;
  align-items: center;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.zahl input {
  width: 6.5rem;
  padding: 0.55rem 0.6rem;
  border: 0;
  background: none;
  text-align: right;
}

.zahl span {
  padding-right: 0.7rem;
  color: var(--farbe-text-schwach);
}

/* Auswahl als Kacheln (Radio-Buttons) — ruhiger als Aufklapplisten, alle Optionen sichtbar */
.wahl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
}

.wahl label {
  position: relative;
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  cursor: pointer;
}

.wahl label:hover {
  border-color: var(--farbe-text-schwach);
}

/* Radio-Button unsichtbar, bleibt aber per Tastatur bedienbar */
.wahl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Gewählt: Rahmen in Sortimentsfarbe, Fläche bleibt weiß */
.wahl label:has(input:checked) {
  border-color: var(--sortiment);
  box-shadow: inset 0 0 0 1px var(--sortiment);
}

.wahl label:has(input:focus-visible) {
  outline: 2px solid var(--zustand);
  outline-offset: 2px;
}

.wahl b {
  display: block;
  color: var(--farbe-dunkel);
}

.wahl small {
  display: block;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
}

/* Einzeiliges Eingabefeld */
.eingabe {
  width: 100%;
  max-width: 20rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}


/* --------------------------------------------------------------------------
   9. Preisbox und Knöpfe
   Die Preisbox bleibt beim Scrollen sichtbar. Oberkante in Sortimentsfarbe.
   -------------------------------------------------------------------------- */

.preisbox {
  position: sticky;
  top: 1.5rem;
  overflow: hidden;
  border-top: 6px solid var(--sortiment);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.preisbox-innen {
  padding: 1.5rem 1.75rem 1.75rem;
}

.preisbox h2 {
  font-size: var(--schrift-h3);
}

.preisbox .produktzeile {
  margin: 0.25rem 0 1.25rem;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
}

/* Postenliste: Bezeichnung links, Betrag rechts */
.posten {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-mittel);
}

.posten td {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--farbe-rand);
  vertical-align: top;
}

.posten td:last-child {
  padding-left: 1rem;
  text-align: right;
  white-space: nowrap;
}

.posten small {
  display: block;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-mini);
}

.gesamt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1.1rem;
}

.gesamt span {
  color: var(--farbe-dunkel);
  font-weight: 700;
}

.gesamt strong {
  color: var(--farbe-dunkel);
  font-size: var(--schrift-zahl);
  font-weight: 900;
  line-height: 1;
}

.steuer {
  margin: 0.35rem 0 0;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-mini);
  text-align: right;
}

/* Preis je Tonne, hinterlegt in aufgehellter Sortimentsfarbe */
.je-tonne {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius);
  background: var(--sortiment-hell);
  color: var(--farbe-dunkel);
  font-size: var(--schrift-klein);
}

/* Hauptknopf (Bestellen, Weiter). Hellere Variante .knopf-hell in startseite.css */
.knopf {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--farbe-marke-dunkel);
  color: var(--farbe-weiss);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.knopf:hover {
  background: var(--farbe-dunkel);
}

/* Hinweis „Beispielpreise" im Entwurf — entfällt im Livebetrieb */
.beispiel {
  margin: 1rem 0 0;
  color: var(--farbe-fehler);
  font-size: var(--schrift-mini);
}


/* --------------------------------------------------------------------------
   10. Produktkarten
   Startseite und „Passt dazu". Farbe kommt aus der Produktmarke (Abschnitt 3).
   -------------------------------------------------------------------------- */

.produkt-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--abstand-raster);
}

.produkt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-bottom: 4px solid var(--marke);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.produkt:hover {
  box-shadow: var(--schatten-karte);
}

.produkt-bild {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.produkt-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Leichter Zoom beim Überfahren, wie auf der Website */
.produkt:hover .produkt-bild img {
  transform: scale(1.06);
}

/* Freigestellte Produktfotos auf hellem Braunton statt Weiß */
.produkt-bild.hell {
  background: var(--farbe-bild-grund);
}

.produkt-bild.platzhalter {
  display: grid;
  place-items: center;
  background: var(--farbe-platzhalter);
  color: var(--farbe-weiss);
  font-size: var(--schrift-klein);
  font-weight: 700;
}

.produkt-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.25rem;
}

/* Markenetikett über dem Produktnamen */
.marke {
  align-self: flex-start;
  margin-bottom: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  background: var(--marke);
  color: var(--marke-text);
  font-size: var(--schrift-mini);
  font-weight: 700;
}

.produkt h3 {
  font-size: var(--schrift-h3);
}

.produkt p {
  margin: 0.3rem 0 1rem;
  color: var(--farbe-text);
  font-size: var(--schrift-mittel);
}

.preis {
  margin-top: auto;
  color: var(--farbe-dunkel);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   11. Anpassungen für Tablet und Handy
   1100 px: Produktkarten zweispaltig, Kopf enger
    960 px: Tablet — Konfigurator einspaltig, Kopf verkürzt
    560 px: Handy — kleinere Schrift, Warenkorb nur als Symbol
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .produkt-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Kopf etwas enger, damit alle Links bis 960 px in eine Zeile passen */
  .kopf-innen {
    gap: 1.25rem;
  }
}

@media (max-width: 960px) {
  .konfigurator {
    grid-template-columns: 1fr;
  }

  .preisbox {
    position: static;
  }

  .sortimente,
  .kopf-aktionen .nebenlink {
    display: none;
  }

  .kopf-innen {
    padding-left: var(--rand-seite);
  }

  .kopf .logo img {
    height: 52px;
  }

  /* Schrittleiste: nur Nummern, Text nur beim aktuellen Schritt */
  .schritte li {
    font-size: 0;
  }

  .schritte li::before,
  .schritte li[aria-current] {
    font-size: var(--schrift-klein);
  }
}

@media (max-width: 560px) {
  :root {
    --rand-seite: 16px;
    --schrift-h1: 32px;
  }

  .produkt-raster {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .produkt-text {
    padding: 0.8rem;
  }

  .produkt h3 {
    font-size: 16px;
  }

  .produkt p {
    margin-bottom: 0.6rem;
    font-size: var(--schrift-klein);
  }

  .preis {
    font-size: 14px;
  }

  .gruppe {
    padding: 1.25rem;
  }

  .menge {
    flex-wrap: wrap;
  }

  /* Kopf passt sonst bei 375 px nicht: Warenkorb nur als Symbol */
  .kopf-innen {
    gap: 1rem;
  }

  .kopf-aktionen .warenkorb {
    font-size: 0;
  }

  .kopf-aktionen {
    margin-left: auto;
  }
}