/* ==========================================================================
   Customifa Garage - rust.css
   Das komplette Gestaltungssystem. Alle Farben, Abstaende und Groessen
   stehen hier als CSS-Variablen. Kein Bauteil bringt eigene Farbwerte mit.
   Keine externe Verbindung, keine Schriftdateien, kein CDN.
   ========================================================================== */

:root {
  /* --- Farben (Vorgabe aus DESIGN.md, nicht veraendern) --- */
  --stahl-900: #14120f;   /* Grundflaeche, fast schwarz mit Braunstich */
  --stahl-800: #1c1916;
  --stahl-700: #26221d;   /* Karten, abgesetzte Flaechen */
  --stahl-600: #35302a;   /* Raender */
  --stahl-400: #a39a8e;   /* ruhiger Text - angehoben auf >=4.5:1 (war #6b6259 = 2.65:1) */
  --stahl-200: #a89e92;
  --stahl-100: #ddd5c8;   /* Fliesstext */
  --papier:    #f2ece1;   /* Ueberschriften */
  --rost:      #b5451b;   /* Leitfarbe: Rost/Oxid */
  --rost-hell: #e0763f;
  --messing:   #c08a2e;   /* Akzent, sparsam */
  --gruen:     #4a6741;   /* NVA-Oliv, sehr sparsam */
  --warnung:   #a8321f;
  --gruen-hell:   #8fbf7f;  /* helle Varianten, nur fuer Text auf dunklem Grund */
  --warnung-hell: #e08a72;

  /* --- Schrift --- */
  --schrift-titel: "Oswald", "Fjalla One", "Arial Narrow", "Haettenschweiler",
                   "Liberation Sans Narrow", "DIN Condensed", sans-serif;
  --schrift-text: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial,
                  "Liberation Sans", sans-serif;
  --schrift-fest: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;

  --text-groesse: 17px;
  --text-hoehe: 1.65;
  --sperrung: 0.08em;

  /* --- Abstaende --- */
  --luft-1: 4px;
  --luft-2: 8px;
  --luft-3: 14px;
  --luft-4: 22px;
  --luft-5: 34px;
  --luft-6: 54px;
  --luft-7: 82px;

  /* --- Raster und Kanten --- */
  --breite: 1200px;
  --breite-text: 68ch;
  --kante: 1px solid var(--stahl-600);
  --kante-stark: 2px solid var(--stahl-600);
  --ecke: 0px;
  --ecke-weich: 2px;

  /* --- Texturen: reines CSS, kein Bild vom Server --- */
  --rauschen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='0.42'/%3E%3C/svg%3E");
  --blech:
    linear-gradient(180deg, rgba(255, 240, 214, 0.045) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(94deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.014) 0px, rgba(255, 255, 255, 0.014) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 7px);
  --patina:
    radial-gradient(120% 90% at 12% -10%, rgba(181, 69, 27, 0.16) 0%, rgba(181, 69, 27, 0) 58%),
    radial-gradient(100% 80% at 96% 8%, rgba(192, 138, 46, 0.10) 0%, rgba(192, 138, 46, 0) 62%),
    radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 60%);
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--stahl-900);
  background-image: var(--rauschen), var(--patina), var(--blech);
  background-attachment: fixed, fixed, fixed;
  background-size: 180px 180px, cover, cover;
  color: var(--stahl-100);
  font-family: var(--schrift-text);
  font-size: var(--text-groesse);
  line-height: var(--text-hoehe);
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-titel);
  color: var(--papier);
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 var(--luft-3);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.08rem; color: var(--stahl-100); }
h5, h6 { font-size: 0.98rem; color: var(--stahl-200); }

p, ul, ol, dl, table, figure, pre, blockquote {
  margin: 0 0 var(--luft-4);
}

a {
  color: var(--rost-hell);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus {
  color: var(--papier);
  background-color: rgba(181, 69, 27, 0.22);
}

small, .klein { font-size: 0.86rem; }
strong, b { color: var(--papier); font-weight: 700; }

code, pre, kbd, samp {
  font-family: var(--schrift-fest);
  font-size: 0.88em;
}

pre {
  padding: var(--luft-3);
  border: var(--kante);
  background: var(--stahl-800);
  overflow-x: auto;
  white-space: pre-wrap;
}

hr,
.trenner {
  border: 0;
  height: 1px;
  margin: var(--luft-5) 0;
  background:
    linear-gradient(90deg, var(--rost) 0, var(--rost) 58px, var(--stahl-600) 58px, var(--stahl-600) 100%);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Bilder in Graustufen mit Warmstich, volle Farbe bei Hover. */
.bild-patina {
  filter: grayscale(0.82) sepia(0.22) contrast(1.06) brightness(0.94);
  transition: filter 240ms ease;
  background-color: var(--stahl-800);
}

a:hover .bild-patina,
a:focus .bild-patina,
.bild-patina:hover {
  filter: grayscale(0) sepia(0) contrast(1.02) brightness(1);
}

/* Sichtbarer Fokusrahmen - Pflicht, wird nirgends entfernt. */
:focus {
  outline: 2px solid var(--messing);
  outline-offset: 2px;
}

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

::selection {
  background: var(--rost);
  color: var(--papier);
}

/* ==========================================================================
   Hilfsklassen
   ========================================================================== */

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--luft-4);
}

.nur-vorleser {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.springen {
  position: absolute;
  left: var(--luft-3);
  top: -60px;
  z-index: 50;
  padding: var(--luft-2) var(--luft-4);
  background: var(--rost);
  color: var(--papier);
  border: var(--kante-stark);
  text-decoration: none;
  transition: top 140ms ease;
}

.springen:focus {
  top: var(--luft-3);
}

.textbreite { max-width: var(--breite-text); }
.mittig { text-align: center; }
.ruhig { color: var(--stahl-200); }
.gedaempft { color: var(--stahl-200); }
.rost { color: var(--rost-hell); }
.oben-luft { margin-top: var(--luft-5); }
.unten-luft { margin-bottom: var(--luft-5); }
.ohne-luft { margin: 0; }

.reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-3);
  align-items: center;
}

.reihe-ende { justify-content: flex-end; }
.reihe-verteilt { justify-content: space-between; }

.liste-blank {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Kopf und Navigation
   ========================================================================== */

.kopf {
  border-bottom: var(--kante-stark);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15)),
    var(--rauschen);
  background-size: cover, 180px 180px;
  position: relative;
}

.kopf::after {
  content: "";
  display: block;
  height: 3px;
  background:
    linear-gradient(90deg, var(--rost) 0%, var(--rost-hell) 18%, rgba(181, 69, 27, 0.15) 42%, rgba(0, 0, 0, 0) 70%),
    var(--stahl-800);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
}

.kopf-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-3);
  padding-block: var(--luft-4);
}

.marke {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.marke:hover,
.marke:focus {
  background: none;
}

.marke-name {
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.05rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--papier);
  line-height: 1;
  border-left: 4px solid var(--rost);
  padding-left: var(--luft-3);
}

.marke:hover .marke-name,
.marke:focus .marke-name {
  color: var(--rost-hell);
}

.marke-klaim {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stahl-200);
  padding-left: calc(var(--luft-3) + 4px);
}

.kopf-werkzeuge {
  display: flex;
  align-items: center;
  gap: var(--luft-3);
  flex-wrap: wrap;
}

.korb-knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
  padding: var(--luft-2) var(--luft-3);
  border: var(--kante-stark);
  text-decoration: none;
  color: var(--stahl-100);
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  background: var(--stahl-800);
}

.korb-knopf:hover,
.korb-knopf:focus {
  background: var(--rost);
  color: var(--papier);
  border-color: var(--rost);
}

.korb-zahl {
  min-width: 1.7em;
  padding: 0 var(--luft-1);
  text-align: center;
  background: var(--rost);
  color: var(--papier);
  border: 1px solid var(--rost-hell);
  font-size: 0.85rem;
}

.korb-knopf:hover .korb-zahl,
.korb-knopf:focus .korb-zahl {
  background: var(--stahl-900);
  border-color: var(--stahl-900);
}

.korb-zahl[data-leer="ja"] {
  background: var(--stahl-700);
  border-color: var(--stahl-600);
  color: var(--stahl-200);
}

/* Klappnavigation: funktioniert ohne JavaScript (details/summary). */
.navi-klapp {
  width: 100%;
  border-top: var(--kante);
  padding-top: var(--luft-2);
}

.navi-klapp > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
  cursor: pointer;
  list-style: none;
  padding: var(--luft-2) var(--luft-3);
  margin-bottom: var(--luft-2);
  border: var(--kante-stark);
  background: var(--stahl-800);
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.navi-klapp > summary::-webkit-details-marker {
  display: none;
}

.navi-klapp > summary::after {
  content: "\25BC";
  font-size: 0.7em;
  color: var(--rost-hell);
}

.navi-klapp[open] > summary::after {
  content: "\25B2";
}

.navi-klapp > summary:hover {
  border-color: var(--rost);
  color: var(--rost-hell);
}

.navi {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--luft-2);
  padding: 0;
}

.navi a {
  display: block;
  padding: var(--luft-2) var(--luft-3);
  text-decoration: none;
  color: var(--stahl-100);
  font-family: var(--schrift-titel);
  font-size: 0.98rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  border-bottom: var(--kante);
  border-left: 3px solid transparent;
}

.navi a:hover,
.navi a:focus {
  background: var(--stahl-800);
  color: var(--rost-hell);
  border-left-color: var(--rost);
}

.navi a[aria-current="page"] {
  color: var(--papier);
  border-left-color: var(--rost);
  background: rgba(181, 69, 27, 0.14);
}

.navi .navi-admin a {
  color: var(--messing);
}

@media (min-width: 900px) {
  .navi-klapp > summary {
    display: none;
  }

  .navi-klapp::details-content {
    content-visibility: visible;
  }

  .navi {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--luft-1) 0;
    margin-bottom: 0;
  }

  .navi a {
    border-bottom: 0;
    border-left: 0;
    border-top: 3px solid transparent;
    padding: var(--luft-2) var(--luft-3);
  }

  .navi a:hover,
  .navi a:focus {
    border-left-color: transparent;
    border-top-color: var(--rost);
  }

  .navi a[aria-current="page"] {
    border-left-color: transparent;
    border-top-color: var(--rost);
  }
}

/* ==========================================================================
   Inhalt, Kopfzeilen von Seiten
   ========================================================================== */

.inhalt {
  flex: 1 0 auto;
  padding-block: var(--luft-6) var(--luft-7);
}

.seiten-kopf {
  margin-bottom: var(--luft-5);
  padding-bottom: var(--luft-3);
  border-bottom: var(--kante);
}

.seiten-kopf p {
  margin: 0;
  color: var(--stahl-200);
  max-width: var(--breite-text);
}

.brotkrumen {
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stahl-200);
  margin-bottom: var(--luft-2);
}

.brotkrumen a { color: var(--stahl-200); }

.bereiche,
.neueste,
.werkstatt-text,
.verwandt {
  margin-bottom: var(--luft-6);
}

.kontakt-direkt {
  border: var(--kante);
  background: var(--stahl-700);
  background-image: var(--rauschen);
  background-size: 180px 180px;
  padding: var(--luft-4);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.knopf,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--luft-2);
  padding: var(--luft-2) var(--luft-4);
  min-height: 44px;
  border: 2px solid var(--stahl-200);
  border-radius: var(--ecke);
  background: transparent;
  color: var(--papier);
  font-family: var(--schrift-titel);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.knopf:hover,
.knopf:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  background: var(--rost);
  border-color: var(--rost);
  color: var(--papier);
}

.knopf-haupt {
  border-color: var(--rost);
  background: var(--rost);
}

.knopf-haupt:hover,
.knopf-haupt:focus {
  background: var(--rost-hell);
  border-color: var(--rost-hell);
  color: var(--stahl-900);
}

.knopf-still {
  border-color: var(--stahl-600);
  color: var(--stahl-100);
}

.knopf-warnung {
  border-color: var(--warnung);
  color: var(--papier);
}

.knopf-warnung:hover,
.knopf-warnung:focus {
  background: var(--warnung);
  border-color: var(--warnung);
}

.knopf-klein {
  min-height: 34px;
  padding: var(--luft-1) var(--luft-3);
  font-size: 0.85rem;
}

.knopf[aria-disabled="true"],
.knopf:disabled,
button:disabled,
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.knopf:disabled:hover,
button:disabled:hover {
  background: transparent;
  border-color: var(--stahl-600);
  color: var(--stahl-200);
}

/* ==========================================================================
   Formulare
   ========================================================================== */

.kontakt-formular {
  max-width: 640px;
}

.formular-breit { max-width: none; }

.feld {
  margin-bottom: var(--luft-4);
}

.feld > label,
.feld-titel {
  display: block;
  margin-bottom: var(--luft-1);
  font-family: var(--schrift-titel);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.feld-meldung {
  display: block;
  margin-top: var(--luft-1);
  font-size: 0.84rem;
  color: var(--stahl-200);
}

.feld-fehler {
  display: block;
  margin-top: var(--luft-1);
  font-size: 0.86rem;
  color: var(--rost-hell);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: var(--luft-2) var(--luft-3);
  min-height: 44px;
  background: var(--stahl-900);
  color: var(--papier);
  border: 2px solid var(--stahl-600);
  border-radius: var(--ecke);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

textarea {
  min-height: 9rem;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--stahl-200);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--stahl-200);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--rost);
  outline: 3px solid var(--messing);
  outline-offset: 1px;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--warnung);
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  accent-color: var(--rost);
  margin-right: var(--luft-2);
}

.feld-haken {
  display: flex;
  align-items: flex-start;
  gap: var(--luft-2);
  margin-bottom: var(--luft-3);
}

.feld-haken label {
  text-transform: none;
  font-family: var(--schrift-text);
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--stahl-100);
  margin: 0;
}

.kontakt-spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-3);
}

@media (min-width: 900px) {
  .kontakt-spalten {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--luft-5);
  }
}

fieldset {
  border: var(--kante);
  padding: var(--luft-4);
  margin: 0 0 var(--luft-4);
}

legend {
  padding: 0 var(--luft-2);
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.kaufform__feld {
  width: 5.5rem;
  text-align: center;
}

/* ==========================================================================
   Meldungen
   ========================================================================== */

.meldung {
  border: var(--kante-stark);
  border-left-width: 6px;
  background: var(--stahl-700);
  padding: var(--luft-3) var(--luft-4);
  margin-bottom: var(--luft-4);
}

.meldung p:last-child { margin-bottom: 0; }

.meldung-titel {
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
  margin-bottom: var(--luft-1);
}

.meldung-gut { border-color: var(--gruen); }
.meldung-gut .meldung-titel { color: var(--gruen-hell); }

.meldung-fehler { border-color: var(--warnung); }
.meldung-fehler .meldung-titel { color: var(--warnung-hell); }

.meldung-hinweis { border-color: var(--messing); }
.meldung-hinweis .meldung-titel { color: var(--messing); }

/* ==========================================================================
   Kategoriekacheln
   ========================================================================== */

.kachel-raster,
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--luft-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.kachel__link,
a.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 148px;
  padding: var(--luft-4);
  border: var(--kante-stark);
  background-color: var(--stahl-700);
  background-image:
    linear-gradient(160deg, rgba(181, 69, 27, 0.16), rgba(0, 0, 0, 0.35)),
    var(--rauschen);
  background-size: cover, 180px 180px;
  text-decoration: none;
  color: var(--stahl-100);
  transition: border-color 140ms ease, transform 140ms ease;
}

.kachel__link:hover,
.kachel__link:focus,
a.kachel:hover,
a.kachel:focus {
  border-color: var(--rost);
  background-color: var(--stahl-600);
  transform: translateY(-2px);
}

.kachel__name,
.kachel-name {
  font-family: var(--schrift-titel);
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.kachel__zeile,
.kachel-zeile {
  font-size: 0.9rem;
  color: var(--stahl-200);
}

.kachel__zahl {
  position: absolute;
  top: var(--luft-2);
  right: var(--luft-3);
  font-family: var(--schrift-titel);
  font-size: 0.8rem;
  color: var(--stahl-200);
}

/* ==========================================================================
   Artikelkarten
   ========================================================================== */

.stueck-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--luft-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.stueck-karte {
  display: flex;
  flex-direction: column;
  border: var(--kante-stark);
  background: var(--stahl-700);
  position: relative;
  transition: border-color 140ms ease;
}

.stueck-karte:hover,
.stueck-karte:focus-within {
  border-color: var(--rost);
}

.stueck-karte__bild {
  display: block;
  border-bottom: var(--kante);
}

.stueck-karte__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Platzhalter fuer ein fehlendes Bild im Warenkorb. Einziger Ort, an dem
   .wk-leer vorkommt: ein leeres <span> in der Bildspalte der Warenkorbtafel.
   Masse darum gleich .wk-bild, sonst springt die Zeilenhoehe. */
.wk-leer {
  display: block;
  width: 76px;
  height: 76px;
  border: 1px dashed var(--stahl-600);
  background:
    repeating-linear-gradient(45deg, var(--stahl-800) 0 12px, var(--stahl-700) 12px 24px);
}

.stueck-karte__text {
  padding: var(--luft-3) var(--luft-4) var(--luft-4);
  display: flex;
  flex-direction: column;
  gap: var(--luft-2);
  flex: 1;
}

.stueck-karte__titel {
  font-size: 1.15rem;
  margin: 0;
}

.stueck-karte__titel a {
  text-decoration: none;
  color: var(--papier);
}

.stueck-karte__titel a:hover,
.stueck-karte__titel a:focus {
  color: var(--rost-hell);
  background: none;
}

.stueck-karte__bereich {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stahl-200);
}

.stueck-karte__zeile {
  margin: 0;
  color: var(--stahl-100);
  font-size: 0.95rem;
}

.stueck-karte__preis {
  margin-top: auto;
  padding-top: var(--luft-2);
  border-top: var(--kante);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--luft-2);
  flex-wrap: wrap;
}

.preis {
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--papier);
  white-space: nowrap;
}

.preis--anfrage {
  font-size: 1rem;
  color: var(--messing);
}

.marke--verkauft,
.marke--einzel {
  display: inline-block;
  padding: 2px var(--luft-2);
  border: 1px solid var(--stahl-600);
  font-family: var(--schrift-titel);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--stahl-200);
  background: var(--stahl-800);
}

.marke--verkauft {
  border-color: var(--warnung);
  color: var(--warnung-hell);
}

.marke--einzel {
  border-color: var(--messing);
  color: var(--messing);
}

.marke--neu {
  border-color: var(--gruen);
  color: var(--gruen-hell);
}

/* ==========================================================================
   Artikelgalerie (Detailseite)
   ========================================================================== */

.stueck {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-5);
}

@media (min-width: 900px) {
  .stueck {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--luft-6);
  }
}

.stueck__bilder {
  display: flex;
  flex-direction: column;
  gap: var(--luft-3);
}

.stueck__hauptbild {
  border: var(--kante-stark);
  background: var(--stahl-800);
}

.stueck__hauptbild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--stahl-900);
}

.stueck__weitere {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.stueck__weitere a,
.stueck__weitere button,
.stueck__weiteres {
  display: block;
  padding: 0;
  min-height: 0;
  border: 2px solid var(--stahl-600);
  background: var(--stahl-800);
  width: 84px;
}

.stueck__weitere img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stueck__weitere a:hover,
.stueck__weitere a:focus,
.stueck__weitere button:hover,
.stueck__weitere button:focus {
  border-color: var(--rost);
  background: var(--stahl-800);
}

.stueck__weitere [aria-current="true"] {
  border-color: var(--rost-hell);
}

.daten {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  margin: 0 0 var(--luft-4);
}

.daten dt,
.daten dd {
  margin: 0;
  text-align: left;
  padding: var(--luft-2) 0;
  border-bottom: var(--kante);
  vertical-align: top;
}

.daten dt {
  font-family: var(--schrift-titel);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stahl-200);
}

.stueck__preis {
  font-family: var(--schrift-titel);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  color: var(--papier);
  margin-bottom: var(--luft-2);
}

.kaufform {
  border: var(--kante-stark);
  border-left: 6px solid var(--rost);
  background: var(--stahl-700);
  padding: var(--luft-4);
  margin-bottom: var(--luft-4);
}

/* ==========================================================================
   Tabellen (Warenkorb, Bestellungen, Verwaltung)
   ========================================================================== */

.tabelle-rolle {
  width: 100%;
  overflow-x: auto;
}

.wk-tafel,
.dk-tafel {
  width: 100%;
  border-collapse: collapse;
  border: var(--kante);
  background: var(--stahl-700);
  margin: 1.5rem 0;
}

/* Die Bestellbestaetigung hat nur zwei schmale Spalten - eine Tafel ueber die
   ganze Breite waere hier eine Wueste. */
.dk-tafel {
  max-width: 40rem;
}

.wk-tafel caption,
.dk-tafel caption {
  text-align: left;
  padding: var(--luft-2) 0;
  color: var(--stahl-200);
  font-size: 0.9rem;
}

.wk-tafel th,
.wk-tafel td,
.dk-tafel th,
.dk-tafel td {
  padding: var(--luft-3);
  border-bottom: var(--kante);
  text-align: left;
  vertical-align: middle;
}

.wk-tafel thead th,
.dk-tafel thead th {
  background: var(--stahl-800);
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
  border-bottom: var(--kante-stark);
}

.wk-tafel tbody tr:hover,
.dk-tafel tbody tr:hover {
  background: var(--stahl-600);
}

.wk-tafel tfoot td,
.dk-tafel tfoot td {
  background: var(--stahl-800);
  font-family: var(--schrift-titel);
  letter-spacing: 0.04em;
  color: var(--papier);
  border-bottom: 0;
}

.zahl,
.rechts {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wk-bild {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: var(--kante);
}

/* ==========================================================================
   Warenkorb und Kasse
   ========================================================================== */

.ks-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--luft-5);
  align-items: start;
}

@media (min-width: 900px) {
  .ks-raster {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr);
  }
}

.ks-kasten {
  border: var(--kante-stark);
  background: var(--stahl-700);
  padding: var(--luft-4);
  position: sticky;
  top: var(--luft-4);
}

.ks-liste {
  list-style: none;
  margin: 0 0 var(--luft-3);
  padding: 0;
}

.ks-liste li {
  display: flex;
  justify-content: space-between;
  gap: var(--luft-3);
  padding: var(--luft-2) 0;
  border-bottom: var(--kante);
  font-variant-numeric: tabular-nums;
}

.ks-liste li:last-child { border-bottom: 0; }

.ks-gesamt {
  font-family: var(--schrift-titel);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--papier);
  border-top: var(--kante-stark) !important;
  padding-top: var(--luft-3) !important;
}

.arbeiten-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--luft-5);
  font-family: var(--schrift-titel);
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  font-size: 0.85rem;
}

.arbeiten-liste li {
  padding: var(--luft-1) var(--luft-3);
  border: var(--kante);
  color: var(--stahl-200);
}

.arbeiten-liste li[aria-current="step"] {
  border-color: var(--rost);
  color: var(--papier);
  background: rgba(181, 69, 27, 0.16);
}

.kaufform__menge {
  display: inline-flex;
  align-items: center;
  gap: var(--luft-2);
}

.kaufform__menge.laeuft {
  opacity: 0.6;
}

/* ==========================================================================
   Verwaltung - schlicht, funktional
   ========================================================================== */

.verwaltung {
  --kante: 1px solid var(--stahl-600);
}

.listenkopf {
  display: block;
  padding-bottom: var(--luft-3);
  margin-bottom: var(--luft-4);
  border-bottom: var(--kante-stark);
}

.listenkopf__titel {
  margin: 0 0 var(--luft-2);
}

.listenkopf__zeile {
  max-width: var(--breite-text);
  color: var(--stahl-100);
  margin: 0;
}

.recht-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--luft-5);
}

.recht-nav a {
  display: block;
  padding: var(--luft-2) var(--luft-3);
  border: var(--kante);
  text-decoration: none;
  color: var(--stahl-100);
  font-family: var(--schrift-titel);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  background: var(--stahl-800);
}

.recht-nav a:hover,
.recht-nav a:focus,
.recht-nav a[aria-current="page"] {
  border-color: var(--rost);
  color: var(--papier);
  background: rgba(181, 69, 27, 0.16);
}

.werkstatt-text__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--luft-3);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--luft-5);
}

.kennzahl {
  border: var(--kante);
  border-top: 3px solid var(--rost);
  background: var(--stahl-700);
  padding: var(--luft-3);
}

.kennzahl-wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.8rem;
  color: var(--papier);
  line-height: 1.1;
}

.kennzahl-name {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stahl-200);
}

/* Meldungskasten der Bestellbestaetigung. Die Ansicht setzt .dk-status auf ein
   <div> mit ganzen Saetzen (nicht auf ein kurzes Abzeichen), darum die breite
   Kastenform mit linker Kante - gleiche Bauart wie .ks-fehler. */
.dk-status {
  border-left: 3px solid var(--rost);
  background: var(--stahl-800);
  padding: var(--luft-3) var(--luft-4);
  margin: var(--luft-4) 0;
  max-width: 40rem;
}

.status-neu     { border-color: var(--messing); color: var(--messing); }
.status-offen   { border-color: var(--stahl-200); color: var(--stahl-100); }

/* ==========================================================================
   Fuss
   ========================================================================== */

.fuss {
  flex: 0 0 auto;
  margin-top: auto;
  border-top: var(--kante-stark);
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)),
    var(--rauschen);
  background-size: cover, 180px 180px;
  padding-block: var(--luft-6) var(--luft-4);
  font-size: 0.94rem;
}

.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--luft-5);
  margin-bottom: var(--luft-5);
}

.fuss h2 {
  font-size: 0.95rem;
  color: var(--stahl-200);
  margin-bottom: var(--luft-3);
  padding-bottom: var(--luft-2);
  border-bottom: 1px solid var(--stahl-600);
}

.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss li {
  margin-bottom: var(--luft-1);
}

.fuss a {
  color: var(--stahl-100);
  text-decoration: none;
}

.fuss a:hover,
.fuss a:focus {
  color: var(--rost-hell);
  text-decoration: underline;
}

.fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--luft-2);
  padding-top: var(--luft-3);
  border-top: 1px solid var(--stahl-600);
  color: var(--stahl-200);
  font-size: 0.85rem;
}

/* ==========================================================================
   Fehlerseiten
   ========================================================================== */

.fehler-seite {
  max-width: 720px;
  padding-block: var(--luft-6);
}

.fehler-nummer {
  font-family: var(--schrift-titel);
  font-size: clamp(4.5rem, 3rem + 12vw, 11rem);
  line-height: 0.86;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--rost);
  margin: 0 0 var(--luft-3);
}

.fehler-spur {
  max-height: 20rem;
  overflow: auto;
  font-size: 0.8rem;
  color: var(--stahl-200);
}

/* ==========================================================================
   Bewegung nur, wenn erwuenscht
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .kachel__link:hover,
  .kachel__link:focus {
    transform: none;
  }
}

/* ==========================================================================
   Druck - schwarz auf weiss, ohne Zierrat
   ========================================================================== */

@media print {
  :root {
    --stahl-100: #000;
    --stahl-200: #333;
    --stahl-400: #444;
    --papier: #000;
  }

  body {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
    line-height: 1.4;
  }

  .kopf,
  .fuss,
  .navi-klapp,
  .springen,
  .knopf,
  button,
  form,
  .stueck__weitere,
  .recht-nav,
  .arbeiten-liste {
    display: none !important;
  }

  .inhalt {
    padding: 0;
  }

  .huelle {
    max-width: none;
    padding: 0;
  }

  h1, h2, h3 {
    color: #000;
    page-break-after: avoid;
  }

  .stueck-karte,
  .kontakt-direkt,
  .ks-kasten,
  .kaufform,
  .wk-tafel,
  .wk-tafel thead th,
  .wk-tafel tfoot td,
.dk-tafel,
  .dk-tafel thead th,
  .dk-tafel tfoot td {
    background: #fff !important;
    color: #000;
    border-color: #999 !important;
  }

  .bild-patina {
    filter: none;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .inhalt a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  table, figure, .stueck-karte {
    page-break-inside: avoid;
  }
}

/* =========================================================================
   Seitengeruest, Textstrecken, Rechtstexte
   ========================================================================= */

.seite {
  display: block;
}

.seite-kontakt,
.seite-recht,
.seite-werkstatt {
  max-width: var(--breite-text);
}

.lead {
  font-family: var(--schrift-titel);
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--stahl-100);
  margin: 0 0 var(--luft-4);
}

.fliesstext {
  max-width: var(--breite-text);
  margin-bottom: var(--luft-5);
}

.fliesstext p {
  margin: 0 0 var(--luft-3);
}

.rechtstext {
  max-width: var(--breite-text);
}

.rechtstext h2 {
  margin-top: var(--luft-5);
}

.rechtstext dl {
  margin: 0 0 var(--luft-4);
}

/* Platzhalter, die der Haendler noch fuellen muss - sichtbar markiert */
.luecke {
  display: inline-block;
  padding: 1px var(--luft-1);
  border: 1px dashed var(--warnung);
  background: var(--stahl-800);
  color: var(--warnung-hell);
  font-family: var(--schrift-fest);
  font-size: 0.9em;
}

.rechtsgeruest,
.kasten-geruest {
  border: 1px dashed var(--warnung);
  background: var(--stahl-800);
  padding: var(--luft-3) var(--luft-4);
  margin-bottom: var(--luft-4);
}

.rechtsgeruest > :last-child,
.kasten-geruest > :last-child {
  margin-bottom: 0;
}

.empfaenger-liste,
.formular-zeilen {
  list-style: none;
  margin: 0 0 var(--luft-4);
  padding: 0;
}

.empfaenger-liste li,
.formular-zeilen li {
  padding: var(--luft-1) 0;
  border-bottom: var(--kante);
  color: var(--stahl-100);
}

.widerruf-formular {
  border: var(--kante-stark);
  background: var(--stahl-700);
  padding: var(--luft-4);
  margin-bottom: var(--luft-5);
}

.widerruf-formular > :last-child {
  margin-bottom: 0;
}

/* =========================================================================
   Wiederkehrende Kleinteile
   ========================================================================= */

.hinweis {
  font-size: 0.9rem;
  color: var(--stahl-200);
  margin: 0 0 var(--luft-3);
}

.hinweis--verkauft {
  color: var(--warnung-hell);
}

.mehr {
  margin: var(--luft-4) 0 0;
}

.aktionen,
.feld-aktionen,
.stueck__wege,
.leer__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  margin: var(--luft-3) 0 0;
}

.etikett {
  display: inline-block;
  font-family: var(--schrift-titel);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--stahl-200);
}

.feld-zusatz {
  font-family: var(--schrift-text);
  text-transform: none;
  letter-spacing: 0;
  color: var(--stahl-200);
}

.trefferzahl {
  font-family: var(--schrift-titel);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--stahl-200);
  margin: 0 0 var(--luft-3);
}

/* =========================================================================
   Meldungen - benutzte Modifikatoren
   ========================================================================= */

.meldung--ok,
.meldung--gut {
  border-color: var(--gruen);
}

.meldung--ok .meldung-titel,
.meldung--gut .meldung-titel {
  color: var(--gruen-hell);
}

.meldung--fehler,
.meldung--warnung,
.meldung-warnung {
  border-color: var(--warnung);
}

.meldung--fehler .meldung-titel,
.meldung--warnung .meldung-titel,
.meldung-warnung .meldung-titel {
  color: var(--warnung-hell);
}

.meldung--hinweis {
  border-color: var(--messing);
}

.meldung--hinweis .meldung-titel {
  color: var(--messing);
}

/* =========================================================================
   Meldungsarten - vollstaendige Deckung

   Die Arten sind: ok, gut, fehler, warnung, hinweis. Sie kommen in drei
   Schreibweisen an: als Modifikator (.meldung--ok), in der aelteren Form mit
   einem Strich (.meldung-ok) und als blanke Art am Element (<li class="ok">
   im Warenkorb und an der Kasse). Hier ist jede Art in jeder Schreibweise
   gedeckt, damit keine Meldung ungestylt durchfaellt, egal welche Form das
   Flash-System am Ende ausgibt.
   ========================================================================= */

.meldung-ok,
.meldung.ok,
.meldung.gut {
  border-color: var(--gruen);
  /* Der Fliesstext im Kasten bleibt Fliesstext; Farbe traegt nur der Rand
     und der Titel - genau wie bei den Modifikatorformen. */
  color: inherit;
}

.meldung-ok .meldung-titel,
.meldung.ok .meldung-titel,
.meldung.gut .meldung-titel {
  color: var(--gruen-hell);
}

.meldung.fehler,
.meldung.warnung {
  border-color: var(--warnung);
  color: inherit;
}

.meldung.fehler .meldung-titel,
.meldung.warnung .meldung-titel {
  color: var(--warnung-hell);
}

.meldung.hinweis {
  border-color: var(--messing);
  /* .hinweis ist sonst kleiner grauer Text - im Meldungskasten nicht. */
  font-size: inherit;
  color: inherit;
  margin: 0 0 var(--luft-4);
}

.meldung.hinweis .meldung-titel {
  color: var(--messing);
}

/* Listenmeldungen in Warenkorb und Kasse tragen die blanke Art. */
.wk-hinweise li.ok,
.wk-hinweise li.gut,
.ks-hinweise li.ok,
.ks-hinweise li.gut {
  border-left-color: var(--gruen);
  color: inherit;
}

.wk-hinweise li.fehler,
.wk-hinweise li.warnung,
.ks-hinweise li.fehler,
.ks-hinweise li.warnung {
  border-left-color: var(--warnung);
  color: inherit;
}

.wk-hinweise li.hinweis,
.ks-hinweise li.hinweis {
  border-left-color: var(--messing);
  font-size: inherit;
  color: inherit;
  margin: 0 0 var(--luft-1);
}

/* Letzte Rueckfalllinie: eine Art allein an einem beliebigen Element bleibt
   wenigstens erkennbar. Farbe genuegt, kein Kasten - sonst wuerde die Regel
   den Meldungsformen oben ins Handwerk pfuschen. */
.ok,
.gut {
  color: var(--gruen-hell);
}

.fehler,
.warnung {
  color: var(--warnung-hell);
}

/* =========================================================================
   Buttons - benutzte Modifikatoren
   ========================================================================= */

.knopf--haupt {
  border-color: var(--rost);
  background: var(--rost);
  color: var(--papier);
}

.knopf--haupt:hover,
.knopf--haupt:focus {
  background: var(--rost-hell);
  border-color: var(--rost-hell);
  color: var(--stahl-900);
}

.knopf--leise {
  border-color: var(--stahl-600);
  color: var(--stahl-100);
}

.knopf--leise:hover,
.knopf--leise:focus {
  border-color: var(--rost);
  background: var(--rost);
  color: var(--papier);
}

/* =========================================================================
   Startseite - Aufmacher, Suche, Abschnitte
   ========================================================================= */

.aufmacher {
  display: grid;
  gap: var(--luft-4);
  margin-bottom: var(--luft-6);
}

@media (min-width: 900px) {
  .aufmacher {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--luft-5);
  }
}

.aufmacher__marke {
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stahl-200);
  margin: 0 0 var(--luft-1);
}

.aufmacher__titel {
  margin: 0 0 var(--luft-3);
}

.aufmacher__anspruch {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  color: var(--rost-hell);
  margin: 0 0 var(--luft-3);
}

.aufmacher__satz {
  max-width: var(--breite-text);
  margin: 0 0 var(--luft-4);
}

.aufmacher__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
}

/* Das Aufmacherbild ist 2000x900 (20:9). Das Seitenverhaeltnis wird gehalten,
   damit die Werkstattszene nicht beschnitten wird; die Hoehendeckelung haelt
   den Kopf auf schmalen und flachen Geraeten kurz. */
.aufmacher__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 20 / 9;
  max-height: 42vh;
  object-fit: cover;
  object-position: center;
  border: var(--kante-stark);
  background: var(--stahl-800);
}

.aufmacher__text {
  min-width: 0;
}

.suchleiste {
  margin-bottom: var(--luft-6);
}

.suchform {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  max-width: 40rem;
}

.suchform__feld {
  flex: 1 1 16rem;
  min-width: 0;
}

.suchform__label {
  display: block;
  margin-bottom: var(--luft-1);
  font-family: var(--schrift-titel);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.abschnitt__titel {
  margin: 0 0 var(--luft-2);
}

.abschnitt__vorspann {
  max-width: var(--breite-text);
  color: var(--stahl-100);
  margin: 0 0 var(--luft-4);
}

.bereiche,
.neueste,
.werkstatt-text,
.verwandt {
  margin-bottom: var(--luft-6);
}

.kachel {
  min-width: 0;
}

.kachel__bild {
  display: block;
  order: -1;
  margin: calc(-1 * var(--luft-4)) calc(-1 * var(--luft-4)) var(--luft-3);
  border-bottom: var(--kante);
}

.kachel__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kachel__text {
  display: flex;
  flex-direction: column;
  gap: var(--luft-1);
}

/* Leerzustaende */
.leer {
  border: 1px dashed var(--stahl-600);
  background: var(--stahl-800);
  padding: var(--luft-4);
  margin-bottom: var(--luft-5);
}

.leer__titel {
  margin: 0 0 var(--luft-2);
  font-size: 1.15rem;
}

.leer__satz {
  max-width: var(--breite-text);
  color: var(--stahl-100);
  margin: 0 0 var(--luft-2);
}

.leer__hinweis {
  color: var(--stahl-200);
  margin: 0;
}

/* Werkstatttext */
.werkstatt-arbeiten {
  margin-bottom: var(--luft-5);
}

.werkstatt-abschluss {
  border-top: var(--kante-stark);
  padding-top: var(--luft-4);
}

/* =========================================================================
   Kategorieseite - Filterleiste
   ========================================================================= */

.filter {
  display: grid;
  gap: var(--luft-3);
  border: var(--kante);
  background: var(--stahl-800);
  padding: var(--luft-3) var(--luft-4);
  margin-bottom: var(--luft-5);
}

@media (min-width: 900px) {
  .filter {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
  }
}

.filter__feld {
  min-width: 0;
}

.filter__label {
  display: block;
  margin-bottom: var(--luft-1);
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.filter__eingabe,
.filter__auswahl {
  width: 100%;
}

.filter__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-2);
}

/* =========================================================================
   Artikeldetail - Angaben, Kaufkasten
   ========================================================================= */

.stueck__angaben {
  min-width: 0;
}

.stueck__bereich {
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--stahl-200);
  margin: 0 0 var(--luft-2);
}

.stueck__titel {
  margin: 0 0 var(--luft-2);
}

.stueck__zeile {
  font-size: 1.05rem;
  color: var(--stahl-100);
  margin: 0 0 var(--luft-3);
}

.stueck__text {
  max-width: var(--breite-text);
  margin-bottom: var(--luft-4);
}

.stueck__untertitel {
  margin: var(--luft-5) 0 var(--luft-3);
  font-size: 1.08rem;
}

.stueck__verfuegbar,
.stueck__versand {
  font-size: 0.9rem;
  color: var(--stahl-200);
  margin: 0 0 var(--luft-2);
}

.preis__zusatz {
  display: block;
  font-family: var(--schrift-text);
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--stahl-200);
}

.kaufform__label {
  display: block;
  margin-bottom: var(--luft-1);
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

/* =========================================================================
   Warenkorb
   ========================================================================= */

.wk-zahl {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wk-klein {
  display: block;
  font-size: 0.85rem;
  color: var(--stahl-200);
}

.wk-menge {
  display: flex;
  align-items: center;
  gap: var(--luft-2);
}

.wk-menge input {
  width: 4.5rem;
}

.wk-inline {
  display: inline;
}

/* Achtung Aufbau: .wk-summe ist der aeussere <div>, das Raster sitzt auf der
   <dl> darin. Faellt das Raster auf den <div>, ist die <dl> ein einziges
   Rasterfeld und Posten und Betrag stehen nicht mehr nebeneinander. */
.wk-summe {
  margin: var(--luft-4) 0 0 auto;
  max-width: 24rem;
}

.wk-summe dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--luft-1) var(--luft-3);
  margin: 0;
}

.wk-summe dt {
  margin: 0;
  color: var(--stahl-100);
}

.wk-summe dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wk-gesamt {
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  color: var(--papier);
  border-top: var(--kante-stark);
  padding-top: var(--luft-1);
}

.wk-hinweise {
  list-style: none;
  margin: var(--luft-3) 0;
  padding: 0;
}

.wk-hinweise li {
  border-left: 3px solid var(--rost);
  background: var(--stahl-800);
  padding: var(--luft-1) var(--luft-3);
  margin-bottom: var(--luft-1);
}

.wk-hinweise li.gut {
  border-left-color: var(--gruen);
}

.wk-hinweise li.fehler {
  border-left-color: var(--warnung);
}

.wk-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-3);
  margin-top: var(--luft-4);
}

/* =========================================================================
   Kasse
   ========================================================================= */

.ks-feld {
  display: block;
  margin-bottom: var(--luft-3);
}

.ks-feld label {
  display: block;
  margin-bottom: var(--luft-1);
  font-family: var(--schrift-titel);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: var(--sperrung);
  color: var(--papier);
}

.ks-feld input,
.ks-feld textarea,
.ks-feld select {
  width: 100%;
}

.ks-zeile {
  display: grid;
  gap: var(--luft-3);
}

@media (min-width: 640px) {
  .ks-zeile {
    grid-template-columns: 1fr 1fr;
  }
}

.ks-klein {
  display: block;
  font-size: 0.85rem;
  color: var(--stahl-200);
}

.ks-summe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--luft-1) var(--luft-3);
  margin: 0 0 var(--luft-3);
}

.ks-summe dt {
  margin: 0;
  color: var(--stahl-100);
}

.ks-summe dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ks-fehler {
  border-left: 3px solid var(--warnung);
  background: var(--stahl-800);
  padding: var(--luft-3) var(--luft-4);
  margin-bottom: var(--luft-4);
}

.ks-fehler ul {
  margin: var(--luft-1) 0 0;
  padding-left: var(--luft-4);
}

.ks-hinweise {
  list-style: none;
  margin: 0 0 var(--luft-4);
  padding: 0;
}

.ks-hinweise li {
  border-left: 3px solid var(--rost);
  background: var(--stahl-800);
  padding: var(--luft-1) var(--luft-3);
  margin-bottom: var(--luft-1);
}

.ks-zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--luft-2);
  margin: var(--luft-3) 0;
}

.ks-knopf {
  margin-top: var(--luft-2);
  font-weight: 700;
}

/* =========================================================================
   Bestellbestaetigung
   ========================================================================= */

.dk-nummer {
  display: inline-block;
  font-family: var(--schrift-fest);
  font-size: 1.3rem;
  border: var(--kante-stark);
  background: var(--stahl-700);
  padding: var(--luft-1) var(--luft-3);
  margin-bottom: var(--luft-4);
}

.dk-zahl {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dk-adresse {
  white-space: pre-line;
  border: var(--kante);
  background: var(--stahl-800);
  padding: var(--luft-3);
  max-width: 24rem;
}

.dk-klein {
  font-size: 0.85rem;
  color: var(--stahl-200);
}

.dk-status.bezahlt {
  border-left-color: var(--gruen);
}

/* =========================================================================
   Verwaltung - Ergaenzungen
   ========================================================================= */

.bezahlt {
  color: var(--gruen-hell);
}

.storniert {
  color: var(--warnung-hell);
}

.abgeschlossen {
  color: var(--stahl-100);
}

/* Kleines Vorschaubild in den Listen des Werkstattbueros. Feste Masse, damit
   die Zeilen gleich hoch bleiben, egal was hochgeladen wurde. */
.tafelbild {
  width: 90px;
  height: 70px;
  object-fit: cover;
  display: block;
}

/* Ein Formular, das nur einen Knopf traegt, soll in der Zeile stehen bleiben
   und nicht als eigener Block umbrechen. */
.knopfform {
  display: inline;
}

/* Vom Besucher getippter Text: Zeilenumbrueche bleiben stehen. */
.umbruch {
  white-space: pre-wrap;
}

/* Honigtopf: ein Feld, das kein Mensch sieht und nur Werberoboter ausfuellen.
   Nicht display:none - das fuellt kein Roboter aus. */
.honigtopf {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}