/* shop-retoure.de - eigener Namensraum, kein Inline-CSS, kein !important.
   Bausteine: bahn kopf logo knopf feld held beleg karte zug mock tafel
   krume sockel frage. */

:root {
  --tief: #0e2b26;
  --gruen: #0f6f5c;
  --gruen-hell: #e6f4f0;
  --gruen-rand: #bfe0d7;
  --grau: #5a6b68;
  --grau-hell: #f4f7f6;
  --linie: #dfe7e5;
  --weiss: #fff;
  /* #b25e00 blieb als Marke auf --warn-hell bei 4,3 zu 1 stehen; --warn traegt
     nur in .ref__mark Text, dort jetzt 4,9 zu 1. */
  --warn: #a45600;
  --warn-hell: #fdf4e7;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --verlauf: linear-gradient(180deg, #f2f9f7 0%, #fff 100%);
  --verlauf-tief: linear-gradient(180deg, #0e2b26 0%, #123f36 100%);
}

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

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

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tief);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: var(--gruen); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
b, strong { font-weight: 700; }

.bahn { max-width: 1180px; margin-inline: auto; padding-inline: 20px; }

/* ---- Kopfleiste ---- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopf__reihe { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.kopf__ziele { display: flex; align-items: center; gap: 22px; }
.kopf__ziele a:not(.knopf) { font-size: 14.5px; color: var(--grau); font-weight: 500; }
.kopf__ziele a:not(.knopf):hover { color: var(--tief); text-decoration: none; }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16.5px; color: var(--tief); }
.logo:hover { text-decoration: none; }
.logo__kurz { display: none; }
/* Beide Kurzfassungen stehen VOR den Media Queries. Stand die hier zuletzt,
   gewann sie gegen die gleich spezifische Regel in der Abfrage und der
   Store-Knopf trug unter 560px gar keine Beschriftung mehr. */
.knopf__kurz { display: none; }

/* Ab 1040px ist nur noch Platz fuer Handbuch und Store - der Rest steht in
   der Fusszeile. */
@media (max-width: 1040px) { .kopf__ziele a:not(.knopf):not(.kopf__buch) { display: none; } }
/* Unter 560px waere die Leiste breiter als der Schirm: Schriftzug kuerzen,
   Knopfbeschriftung kuerzen, Abstand enger. Gemessen, nicht geraten. */
@media (max-width: 560px) {
  .logo__lang { display: none; }
  .logo__kurz { display: inline; }
  .logo { font-size: 15px; gap: 8px; }
  .kopf__ziele { gap: 12px; }
  .knopf__lang { display: none; }
  .knopf__kurz { display: inline; }
}
/* Unter 360px reicht auch das nicht: der Handbuch-Link entfaellt, er steht in
   der Fusszeile. Bei 360px passt alles, deshalb genau 359. */
@media (max-width: 359px) { .kopf__buch { display: none; } }

/* ---- Knoepfe ---- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 10px; font-weight: 700; font-size: 15px;
  border: 1px solid transparent; white-space: nowrap; cursor: pointer;
}
.knopf:hover { text-decoration: none; }
.knopf--voll { background: var(--gruen); color: var(--weiss); }
.knopf--voll:hover { background: #0c5a4a; color: var(--weiss); }
.knopf--rand { background: var(--weiss); color: var(--tief); border-color: var(--linie); }
.knopf--rand:hover { border-color: var(--gruen); color: var(--gruen); }
.knopf--klein { padding: 9px 16px; font-size: 14px; }

/* ---- Baender ---- */
.feld { padding: 92px 0; }
@media (max-width: 720px) { .feld { padding: 58px 0; } }
.feld--hell { background: var(--grau-hell); }
.feld--gruen { background: var(--gruen-hell); }
.feld--verlauf { background: var(--verlauf); }
.feld--tief { background: var(--verlauf-tief); color: #cfe3de; }
.feld--tief h2, .feld--tief h3 { color: var(--weiss); }

.marke { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gruen); margin-bottom: 14px; }
.feld--tief .marke { color: #7fd4bf; }
.kopfzeile { max-width: 760px; margin-bottom: 44px; }
.kopfzeile h2 { font-size: clamp(27px, 3.4vw, 38px); margin-bottom: 14px; }
.kopfzeile p { color: var(--grau); font-size: 17px; }
.feld--tief .kopfzeile p { color: #a9c8c1; }

/* ---- Held ---- */
.held { padding: 74px 0 84px; background: var(--verlauf); }
.held__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 940px) { .held__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.held h1 { font-size: clamp(32px, 4.6vw, 50px); margin-bottom: 20px; }
.held__lede { font-size: 18px; color: var(--grau); margin-bottom: 28px; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }

/* ---- Belege aus dem Store ---- */
.beleg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--grau); }
.beleg + .beleg { margin-top: 10px; }
.beleg b { color: var(--tief); }
/* Gold, aber dunkel genug: #e8a317 kam auf dem hellen Grund nur auf 2,0 zu 1.
   Dieser Ton misst 4,8 und besteht damit 4,5. */
.beleg__sterne { color: #96631d; letter-spacing: 1px; }
.beleg__punkt { width: 4px; height: 4px; border-radius: 50%; background: var(--linie); display: inline-block; }
.beleg--marken { gap: 8px; }
.beleg__marke { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--weiss); border: 1px solid var(--linie); font-size: 12.5px; font-weight: 700; color: var(--tief); }

/* ---- Karten und Raster ---- */
.raster { display: grid; gap: 22px; }
.raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 940px) { .raster--3, .raster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .raster--2, .raster--3, .raster--4 { grid-template-columns: minmax(0, 1fr); } }

.karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px;
  padding: 26px; display: flex; flex-direction: column;
}
.karte h3 { font-size: 18px; margin-bottom: 10px; }
.karte p { color: var(--grau); font-size: 15px; }
.karte > * + * { margin-top: 12px; }
.karte__nr { font-family: var(--fest); font-size: 12.5px; color: var(--gruen); font-weight: 700; }
.karte--tat { border-color: var(--gruen-rand); background: var(--gruen-hell); }

/* Kachel-Raster mit gleich hohen Zeilen. Subgrid haelt Ueberschrift und Text
   auf einer Linie, auch wenn eine Ueberschrift umbricht. */
@supports (grid-template-rows: subgrid) {
  .raster--reihen .karte { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .raster--reihen .karte > * + * { margin-top: 0; }
}

/* ---- Zug: nummerierte Schritte ---- */
.zug { display: grid; gap: 0; counter-reset: schritt; }
.zug__stufe { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 20px; padding: 0 0 30px; position: relative; }
.zug__stufe::before {
  counter-increment: schritt; content: counter(schritt);
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--gruen); color: var(--weiss);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px;
}
.zug__stufe::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 2px; background: var(--linie); }
.zug__stufe:last-child { padding-bottom: 0; }
.zug__stufe:last-child::after { display: none; }
.zug__stufe h3 { font-size: 17px; margin-bottom: 6px; }
.zug__stufe p { color: var(--grau); font-size: 15px; }

/* ---- Hinweisblock ---- */
.hinweis { border-left: 3px solid var(--gruen); background: var(--gruen-hell); padding: 18px 22px; border-radius: 0 10px 10px 0; font-size: 15px; }
.hinweis--warn { border-left-color: var(--warn); background: var(--warn-hell); }
.hinweis b { display: block; margin-bottom: 4px; }

/* ---- Fragen ---- */
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--gruen); font-weight: 800; }
.frage[open] summary::after { content: "–"; }
.frage__text { padding-bottom: 20px; color: var(--grau); font-size: 15.5px; }
.frage__text > * + * { margin-top: 10px; }

/* ---- Tafel: Tabellen ---- */
.tafel__lauf { overflow-x: auto; }
.tafel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tafel th { text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grau); font-weight: 800; padding: 0 14px 10px 0; border-bottom: 1px solid var(--linie); }
.tafel td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; color: var(--grau); }
.tafel td:first-child { color: var(--tief); font-weight: 600; }
.tafel tr:last-child td { border-bottom: 0; }
/* Vierte Spalte: die Zeilenbeschriftung darf breiter sein als die Werte. */
.tafel--vier th:first-child, .tafel--vier td:first-child { width: 34%; }
.tafel--vier th, .tafel--vier td { padding-right: 18px; }
/* Gruppenzeile: trennt die Tafel in benannte Abschnitte, damit aus einer
   Liste von zwanzig Zeilen sechs lesbare Bloecke werden. */
.tafel__gruppe th { padding: 26px 14px 8px 0; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gruen); font-weight: 800; border-bottom: 2px solid var(--gruen-rand); }
.tafel__gruppe:first-child th { padding-top: 6px; }

.tafel__z { display: inline-flex; align-items: flex-start; gap: 7px; line-height: 1.45; }
.tafel__i { flex: 0 0 auto; margin-top: 2px; }
.tafel__z--y { color: var(--gruen); font-weight: 700; }
.tafel__z--p { color: var(--warn); font-weight: 700; }
.tafel__z--n { color: var(--grau); }
.tafel__z--i { color: var(--grau); }
.tafel__eigen { background: var(--gruen-hell); }
.tafel__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tafel__quelle { margin-top: 22px; font-size: 13.5px; line-height: 1.6; color: var(--grau); max-width: 900px; }
/* Ein "nein" ist eine Antwort und muss lesbar sein: #b0bcba kam auf 1,8 zu 1,
   --grau erreicht 5,6 auf Weiss und 5,2 auf dem hellen Band. Gilt auch fuer
   den abgeschalteten Knopf und das leere Kaestchen weiter unten. */

/* Zwei Tabellen in einem Abschnitt brauchen Luft dazwischen. */
.tafel__lauf + .kopfzeile { margin-top: 56px; }

/* Ablaufzeile: Ziffer, Titel, Aktion rechts - gleiche Hoehe je Zeile. */
.mock__az { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.mock__az:last-child { border-bottom: 0; }
.mock__aztitel { font-size: 13px; font-weight: 600; color: var(--tief); }
.mock__az .mock__knopf { font-size: 11.5px; padding: 6px 11px; white-space: nowrap; }

/* Auswahllisten als Marken statt als aufgeklapptes Menue. */
.mock__markenblock { display: flex; flex-direction: column; gap: 6px; }
.mock__markenreihe { display: flex; flex-wrap: wrap; gap: 5px; }
.mock__marke { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); font-size: 11.5px; color: var(--grau); }
.mock__marke--an { background: var(--gruen-hell); border-color: var(--gruen-rand); color: var(--tief); font-weight: 700; }

/* Kontoseite: Menue links, Inhalt rechts. */
/* Das Menue ist Beiwerk und bekommt eine feste, schmale Spalte. Als Anteil
   nahm es dem Inhalt so viel Platz, dass die Tafel daneben rollen musste. */
.mock__konto { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
.mock__konto .mock__menue { font-size: 12px; }
.mock__konto .mock__mpunkt { padding: 7px 9px; font-size: 11.5px; }
.mock__kseite { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Neben dem Menue bleibt weniger Platz: die Tafeln dort tragen kurze Werte und
   brauchen die volle Mindestbreite nicht. */
.mock__konto .mock__tafel--3 .mock__tkopf, .mock__konto .mock__tafel--3 .mock__treihe { min-width: 340px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.mock__konto .mock__tafel--4 .mock__tkopf, .mock__konto .mock__tafel--4 .mock__treihe { min-width: 320px; }

/* Nummerierter Kartentitel. */
.mock__ktitel--nr { display: flex; align-items: center; gap: 9px; }
.mock__ktitel--nr .mock__ziffer { width: 20px; height: 20px; font-size: 11px; }

/* ---- Der Weg auf der Startseite ---- */
/* Nummer, Text und Ansicht nebeneinander. Die Ziffer traegt die Reihenfolge,
   deshalb eine ol - der Nachbau daneben ist die Belegstelle dazu. */
.weg { list-style: none; display: flex; flex-direction: column; gap: 34px; }
.weg__schritt { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; padding-bottom: 34px; border-bottom: 1px solid var(--linie); }
.weg__schritt:last-child { padding-bottom: 0; border-bottom: 0; }
.weg__nr { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: var(--gruen); color: var(--weiss); display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 800; flex-shrink: 0; }
.weg__text h3 { font-size: 18px; margin-bottom: 9px; }
.weg__text p { color: var(--grau); font-size: 15px; }
.weg__mehr { margin-top: 48px; }
/* Zwei Schritte nebeneinander: Ziffer und Titel in einer Zeile, Text und
   Ansicht darunter. */
.weg__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--linie); }
/* align-items MUSS hier stehen: .weg__schritt setzt start, und in einem
   Flex-Kasten heisst start so viel wie fit-content - der Nachbau waere so
   breit wie sein Inhalt und risse die Bahn auf. */
.weg__schritt--halb { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 0; border-bottom: 0; min-width: 0; }
/* Die Spalte mit dem Nachbau muss schrumpfen duerfen - als Rasterkind haette
   sie min-width auto und wuerde die Bahn aufreissen. */
.weg__bild, .weg__text { min-width: 0; }
.weg__kopf { display: flex; align-items: center; gap: 12px; }
.weg__kopf h3 { font-size: 17px; }
.weg__schritt--halb p { color: var(--grau); font-size: 14.5px; }
/* Zwei Teile in einem Abschnitt: die Zwischenueberschrift trennt Storefront
   von Administration, ohne dass daraus zwei Abschnitte werden. */
.weg__teil { margin-bottom: 34px; padding-bottom: 18px; border-bottom: 2px solid var(--gruen); }
.weg__teil--zwei { margin-top: 56px; }
.weg__ueber { font-size: 22px; letter-spacing: -0.01em; }
.weg__ueber-p { color: var(--grau); font-size: 15px; margin-top: 6px; }
.weg__nr--admin { background: var(--tief); }

/* ---- Preis ---- */
/* Eine Karte statt zweier schwebender: links der Preis, rechts was drin ist,
   unten der Weg in den Store. Zwei halbleere Kaesten nebeneinander sagen
   weniger als eine gefuellte Flaeche. */
.preis {
  display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.68fr);
  gap: 0 48px;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px;
  padding: 34px 36px; box-shadow: 0 14px 40px rgba(14,43,38,0.07);
}
.preis__wert { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.preis__zeit { font-size: 16px; font-weight: 500; color: var(--grau); letter-spacing: 0; }
.preis__jahr { margin-top: 14px; font-size: 15px; color: var(--grau); line-height: 1.6; }
.preis__jahr b { color: var(--tief); }
.preis__spar { display: inline-block; margin-left: 10px; padding: 2px 9px; border-radius: 999px; background: var(--gruen-hell); color: var(--tief); font-size: 13px; font-weight: 700; white-space: nowrap; }
.preis__klein { margin-top: 14px; font-size: 13px; color: var(--grau); }

.preis__dtitel { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grau); }
/* Zwei Spalten, damit die Aufzaehlung die Breite fuellt statt sie leer zu lassen. */
.preis__liste { list-style: none; margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.preis__liste li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; }
.preis__liste li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gruen); color: var(--weiss);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.preis__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--linie); }
.preis__frei { font-size: 14.5px; color: var(--grau); }

/* Zwei Spalten lohnen sich erst, wenn die Bahn ihre volle Breite hat. Darunter
   wuerde jeder Eintrag umbrechen - dann lieber untereinander. */
@media (max-width: 1180px) {
  .preis__liste { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .preis { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 26px 22px; }
  .preis__fuss { margin-top: 4px; }
}

/* ---- Krume ---- */
.krume { padding: 18px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; color: var(--grau); }
.krume a { color: var(--grau); }
/* Der Trenner stand auf --linie und war mit 1,3 zu 1 kaum zu sehen. Er ist zwar
   aria-hidden, aber ein unsichtbarer Trenner laesst die Krume zusammenlaufen. */
.krume__teil { margin: 0 8px; color: var(--grau); }
.krume__hier { color: var(--tief); font-weight: 600; }

/* ---- Fusszeile ---- */
.sockel { background: var(--tief); color: #a9c8c1; padding: 62px 0 34px; }
.sockel__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .sockel__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; } }
@media (max-width: 560px) { .sockel__raster { grid-template-columns: minmax(0, 1fr); } }
.sockel .logo { color: var(--weiss); }
.sockel__wort { font-size: 14px; margin-top: 14px; }
/* Herstellerlogo unten links, wie auf den Schwesterseiten. Dort ist die
   Fusszeile weiss, hier dunkel - die dunkelblaue Wortmarke braucht deshalb
   eine helle Flaeche, sonst verschwindet sie. */
.sockel__haus { display: inline-block; margin-top: 20px; background: var(--weiss); border-radius: 10px; padding: 9px 13px; }
.sockel__haus img { display: block; width: 173px; height: 44px; }
.sockel__t { color: var(--weiss); font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 14px; }
.sockel__liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.sockel__liste a { color: #a9c8c1; }
.sockel__liste a:hover { color: var(--weiss); }
.sockel__schluss { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.sockel__schluss a { color: #a9c8c1; }

/* ---- Rechtstexte ---- */
.recht { max-width: 760px; }
.recht h1 { font-size: clamp(28px, 3.6vw, 38px); margin-bottom: 18px; }
.recht h2 { font-size: 20px; margin: 32px 0 10px; }
/* "Verbraucherstreitbeilegung/Universalschlichtungsstelle" ist ein einziges
   Wort von 544px und schoebe das Impressum sonst ueber den Rand. */
.recht h1, .recht h2, .recht h3 { overflow-wrap: break-word; hyphens: auto; }
.recht p { color: var(--grau); margin-bottom: 12px; font-size: 15px; }
.recht a { word-break: break-word; }

/* ---- Hilfsklassen ---- */
.lauf > * + * { margin-top: 22px; }
.lauf-eng > * + * { margin-top: 12px; }
.mitte { text-align: center; }
.wort { color: var(--grau); font-size: 15.5px; }
.fest { font-family: var(--fest); font-size: 13px; background: var(--grau-hell); border: 1px solid var(--linie); border-radius: 5px; padding: 2px 6px; overflow-wrap: anywhere; }

/* ---- Nachbauten der Oberflaeche ---- */
.mock { background: var(--weiss); border: 1px solid var(--linie); border-radius: 13px; overflow: hidden; box-shadow: 0 14px 40px rgba(14,43,38,0.08); }
.mock__leiste { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--grau-hell); border-bottom: 1px solid var(--linie); }
.mock__punkt { width: 8px; height: 8px; border-radius: 50%; background: #d3dedb; display: block; }
.mock__adresse { margin-left: 10px; font-family: var(--fest); font-size: 11.5px; color: var(--grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock__flaeche { padding: 15px; display: flex; flex-direction: column; gap: 10px; }
/* Hier stand einmal .mock__flaeche span { display: inline-block }. Der Selektor
   ist spezifischer als jede .mock__klasse und hat neun Bausteinen ihr flex
   genommen - Name und Artikelnummer liefen dadurch ineinander. Jeder Baustein
   bringt sein display selbst mit. */

.mock__strich { color: var(--grau); flex-shrink: 0; }

.mock__zeile { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.mock__zeile:last-child { border-bottom: 0; }
.mock__zeile--aus { opacity: 0.45; }
.mock__ware { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--linie); border-radius: 8px; background: var(--grau-hell); }
.mock__name { display: flex; flex-direction: column; font-size: 13.5px; }
.mock__name b { font-weight: 700; }
.mock__nr { font-family: var(--fest); font-size: 11px; color: var(--grau); }
/* Varianteneigenschaften stehen im Shop unter Name und Nummer, gedaempft -
   damit man sieht, dass es keine zweite Zeile des Namens ist. */
.mock__vari { font-size: 11.5px; color: var(--grau); margin-top: 2px; }
.mock__tvari { display: block; font-size: 11.5px; color: var(--grau); font-weight: 400; margin-top: 2px; }
/* Als Raster statt als Flexreihe: sonst ist jedes Auswahlfeld so breit wie
   sein laengster Wert und die Zeilen fluchten nicht. */
.mock__felder { display: grid; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-top: 8px; grid-column: 2; }
.mock__felder .mock__wahl { justify-content: space-between; }
.mock__wahl { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: break-word; min-width: 0; padding: 6px 10px; border: 1px solid var(--linie); border-radius: 7px; font-size: 12.5px; color: var(--tief); background: var(--weiss); }
.mock__pfeil { color: var(--grau); font-size: 10px; }

.mock__status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; padding: 10px 12px; border-radius: 8px; background: var(--gruen-hell); color: var(--tief); }
.mock__ampel { width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); flex-shrink: 0; }
.mock__status--warten { background: var(--warn-hell); }
.mock__status--warten .mock__ampel { background: var(--warn); }
.mock__status--fertig .mock__ampel { background: #1f9d76; }

.mock__notiz { font-size: 12.5px; line-height: 1.55; padding: 11px 13px; border-radius: 8px; background: var(--gruen-hell); color: var(--tief); border-left: 3px solid var(--gruen); }
.mock__notiz--warn { background: var(--warn-hell); border-left-color: var(--warn); }
.mock__notiz--grau { background: var(--grau-hell); border-left-color: var(--linie); color: var(--grau); }

.mock__knopf { display: inline-block; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; }
.mock__knopf--voll { background: var(--gruen); color: var(--weiss); }
.mock__knopf--rand { border: 1px solid var(--linie); color: var(--tief); background: var(--weiss); }
.mock__knopf--aus { border: 1px solid var(--linie); color: var(--grau); background: var(--grau-hell); }

.mock__eingabe { display: flex; flex-direction: column; gap: 3px; }
.mock__lab { font-size: 11.5px; color: var(--grau); font-weight: 600; }
.mock__kasten { border: 1px solid var(--linie); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; background: var(--weiss); }
.mock__kasten--leer { color: var(--grau); }

.mock__haken { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; }
.mock__box { width: 17px; height: 17px; border-radius: 4px; border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 2px; }
.mock__box--an { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }

.mock__schritt { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.mock__ziffer { width: 24px; height: 24px; border-radius: 50%; background: var(--gruen); color: var(--weiss); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.mock__inhalt { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.mock__inhalt b { font-weight: 700; }
.mock__satz { color: var(--grau); font-size: 12.5px; line-height: 1.55; }
.mock__inhalt .mock__knopf { align-self: flex-start; }

/* Auf schmalen Schirmen passen die Spalten nicht mehr nebeneinander. Die
   Tafel bekommt eine Mindestbreite und darf in ihrer Karte waagerecht rollen -
   sonst schneidet .mock die Spalten einfach ab, und keine Ueberlaufmessung am
   Dokument sieht es. */
/* min-width: 0 ist hier nicht schmueckend: als Flex-Kind haette die Tafel
   min-width auto, ihre Mindestbreite wuerde die ganze Karte aufblasen statt
   waagerecht zu rollen. */
.mock__tafel { font-size: 12.5px; overflow-x: auto; min-width: 0; }
.mock__tafel--3 .mock__tkopf, .mock__tafel--3 .mock__treihe { min-width: 430px; }
.mock__tafel--4 .mock__tkopf, .mock__tafel--4 .mock__treihe { min-width: 450px; }
.mock__tafel--w5 .mock__tkopf, .mock__tafel--w5 .mock__treihe { min-width: 470px; }
/* Fuenf und sechs Spalten fehlten hier ganz: ohne grid-template-columns faellt
   die Tafel auf eine Spalte zurueck und jede Zelle steht auf einer eigenen
   Zeile. Sichtbar erst im Bild, nicht in einer Messung. */
.mock__tafel--5 .mock__tkopf, .mock__tafel--5 .mock__treihe { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr); min-width: 480px; }
.mock__tafel--6 .mock__tkopf, .mock__tafel--6 .mock__treihe { grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 0.8fr); min-width: 620px; }
.mock__tafel--w6 .mock__tkopf, .mock__tafel--w6 .mock__treihe { min-width: 600px; }
.mock__tkopf, .mock__treihe { display: grid; gap: 10px; align-items: center; }
.mock__tafel--3 .mock__tkopf, .mock__tafel--3 .mock__treihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
/* Gleichmaessiger als vorher: mit 0,7fr fuer die erste Spalte brach ein
   Produktname wie "1x Leinenhemd, Größe M" auf drei Zeilen um, waehrend
   daneben Platz frei blieb. */
/* Erste Spalte etwas breiter: dort steht die Nummernbezeichnung, und
   "Rücksendung-Nr." umbrochen sieht kaputt aus. */
.mock__tafel--4 .mock__tkopf, .mock__tafel--4 .mock__treihe { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1fr); }
/* Rasterkinder haben min-width: auto und schrumpfen sonst nicht unter ihren
   Inhalt - ein Knopf in der letzten Spalte lief dadurch aus der Karte. */
/* Datenzellen duerfen im Wort brechen, sonst laufen sie auf schmalen Schirmen
   aus ihrer Zelle. Spaltenueberschriften nicht - dort ist ein Wortbruch
   haesslicher als eine Tafel, die rollt; die bekommen genug Mindestbreite. */
.mock__tkopf > *, .mock__treihe > * { min-width: 0; overflow-wrap: break-word; }
/* Ein Knopf in einer Tabellenzelle ist enger dran als einer im Fliesstext:
   kleinere Polsterung, und der Text darf umbrechen statt aus dem Rahmen zu
   laufen. */
.mock__treihe .mock__knopf { max-width: 100%; padding: 7px 10px; font-size: 11.5px; white-space: normal; overflow-wrap: normal; hyphens: none; }
/* Enger gesperrt und eine Spur kleiner: Ueberschriften wie "In Bestand
   gebucht" brachen sonst auf zwei Zeilen, ohne dass die Spalte breiter werden
   koennte, ohne die Tafel zum Rollen zu bringen. */
.mock__tkopf { font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--grau); font-weight: 800; padding-bottom: 9px; border-bottom: 1px solid var(--linie); }
.mock__treihe { padding: 11px 0; border-bottom: 1px solid var(--linie); color: var(--grau); }
.mock__treihe:last-child { border-bottom: 0; }
/* Die erste Zelle ist die Ueberschrift der Zeile - ausser in Tafeln mit
   Ankreuzspalte, dort steht dort das Kaestchen. Ohne das :not() gewinnt dieser
   Selektor (Klasse + Typ + Pseudoklasse) gegen .mock__tbox und faerbt den
   Haken dunkel auf gruen: 2,5 zu 1. */
.mock__treihe > span:first-child:not(.mock__tbox) { color: var(--tief); font-weight: 600; }

/* Tafel mit Ankreuzspalte: die Spalte ist schmal und fest, damit die Haken
   untereinander stehen. */
.mock__tafel--w5 .mock__tkopf, .mock__tafel--w5 .mock__treihe { grid-template-columns: 18px minmax(0, 0.62fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.35fr); }
.mock__tafel--w6 .mock__tkopf, .mock__tafel--w6 .mock__treihe { grid-template-columns: 18px minmax(0, 0.5fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr); }
.mock__tafel--w5 .mock__treihe span:nth-child(2), .mock__tafel--w6 .mock__treihe span:nth-child(2) { color: var(--tief); font-weight: 600; }
.mock__tbox { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--linie); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--weiss); }
.mock__tbox--an { background: var(--gruen); border-color: var(--gruen); }
.mock__tkopf .mock__tbox { border-color: transparent; }

/* Karte im Admin. */
.mock__karte { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 9px; background: var(--weiss); overflow: hidden; }
.mock__ktitel { font-size: 12px; font-weight: 800; color: var(--tief); padding: 9px 12px; border-bottom: 1px solid var(--linie); background: var(--grau-hell); }
.mock__kinhalt { display: flex; flex-direction: column; gap: 9px; padding: 12px; }

/* Reiterleiste. */
.mock__reiterleiste { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--linie); }
.mock__reiter { display: inline-block; padding: 9px 14px; font-size: 12.5px; color: var(--grau); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mock__reiter--an { color: var(--gruen); border-bottom-color: var(--gruen); font-weight: 700; }

/* Senkrechtes Menue. */
.mock__menue { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 9px; overflow: hidden; }
.mock__mpunkt { padding: 10px 13px; font-size: 12.5px; color: var(--grau); overflow-wrap: break-word; border-bottom: 1px solid var(--linie); background: var(--weiss); }
.mock__mpunkt:last-child { border-bottom: 0; }
.mock__mpunkt--an { background: var(--gruen-hell); color: var(--tief); font-weight: 700; }

/* Aufgeklapptes Kontextmenue. */
.mock__kontext { display: inline-flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss); box-shadow: 0 8px 24px rgba(14,43,38,0.12); overflow: hidden; align-self: flex-start; }
.mock__kpunkt { padding: 9px 15px; font-size: 12.5px; color: var(--grau); white-space: nowrap; }
.mock__kpunkt--an { background: var(--gruen-hell); color: var(--tief); font-weight: 700; }

/* Modales Fenster. */
.mock__modal { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: 10px; background: var(--weiss); box-shadow: 0 16px 44px rgba(14,43,38,0.16); overflow: hidden; }
.mock__mtitel { font-size: 13px; font-weight: 800; color: var(--tief); padding: 13px 16px; border-bottom: 1px solid var(--linie); }
.mock__minhalt { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.mock__reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---- Fallseiten ---- */
.fall__block { align-items: start; gap: 40px; }
.fall__block + .fall__block { margin-top: 46px; padding-top: 46px; border-top: 1px solid var(--linie); }
/* Breite Tabellen bekommen die ganze Bahn: Text darueber, Ansicht darunter.
   In einer halben Spalte wuerden sechs Spalten am Kartenrand abgeschnitten.
   Muss NACH .fall__block stehen: dessen align-items: start laesst den Nachbau
   sonst auf Inhaltsbreite schrumpfen statt die Bahn zu fuellen. */
.fall__block--breit { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.fall__block--breit .lauf-eng { max-width: 720px; }
.fall__grenze { margin-top: 34px; }
.fall__weiter:hover { border-color: var(--gruen); text-decoration: none; }
.fall__weiter h3 { color: var(--tief); }

/* ---- Referenz und Handbuch ---- */
.ref + .ref { margin-top: 46px; }
.ref__titel { font-size: 21px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--gruen); }
.ref__liste { margin: 0; display: grid; gap: 0; }
.ref__zeile { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
@media (max-width: 720px) { .ref__zeile { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.ref__zeile:last-child { border-bottom: 0; }
.ref__zeile dt { font-weight: 700; font-size: 15.5px; overflow-wrap: break-word; hyphens: auto; }
.ref__zeile dd { margin: 0; }
.ref__meta { font-size: 12.5px; color: var(--grau); }
.ref__hilfe { font-size: 15px; color: var(--grau); }
.ref__meta + .ref__hilfe, .ref__hilfe + .ref__meta { margin-top: 6px; }
.karte__h { font-size: 18px; margin-bottom: 10px; }

/* ---- Startseite ---- */
.held__akzent { color: var(--gruen); }
.zug__h { font-size: 17px; margin-bottom: 22px; }
/* Ein Satz auf dem dunklen Band statt vier Kennzahlen: die Zahlen, die ich
   hatte, waren Entwicklerkram und haben keinem Shopbetreiber etwas gesagt. */
.spruch { max-width: 880px; }
.spruch__satz { font-size: 30px; line-height: 1.35; font-weight: 700; color: var(--weiss); letter-spacing: -0.015em; margin-top: 14px; }
.spruch__wort { font-size: 16px; line-height: 1.6; margin-top: 18px; }
/* Die Quelle gehoert sichtbar darunter, sonst ist die Zahl eine Behauptung. */
.spruch__quelle { font-size: 12.5px; line-height: 1.5; margin-top: 20px; color: #8fb3ab; }

@media (max-width: 700px) {
  .spruch__satz { font-size: 23px; }
}
.start__mehr { margin-top: 34px; }
.start__schluss { margin-inline: auto; }
.start__schlussknoepfe { justify-content: center; margin-bottom: 0; }
.fragen { max-width: 860px; }
.vgl__h { font-size: 21px; margin-bottom: 12px; }
.karte--knapp { gap: 6px; }
.karte--knapp h3 { font-size: 16.5px; }
.ref__mark { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn); background: var(--warn-hell); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.ref__werte { font-size: 13px; color: var(--grau); margin-top: 6px; }
.ref__wert { display: inline-block; background: var(--grau-hell); border: 1px solid var(--linie); border-radius: 5px; padding: 1px 7px; font-size: 12.5px; color: var(--tief); }

/* ---- Schmale Schirme ----
   Diese Abfragen stehen bewusst ganz am Ende. Eine Media Query erhoeht die
   Spezifitaet nicht: steht sie vor der Grundregel derselben Klasse, gewinnt
   die Grundregel bei jeder Breite und die Abfrage tut gar nichts. */

@media (max-width: 900px) {
  /* Die Ansicht rutscht unter den Text, die Ziffer bleibt oben links. */
  .weg__schritt { grid-template-columns: 34px minmax(0, 1fr); }
  .weg__bild { grid-column: 2; }
  /* Zwei Schritte nebeneinander gehen hier nicht mehr auf. */
  .weg__paar { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}

@media (max-width: 560px) {
  /* Neben der Ziffer bliebe fuer den Nachbau zu wenig Platz - sie ruecken
     untereinander, damit die Ansicht die ganze Breite bekommt. */
  .weg__schritt { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
  .weg__nr { width: 28px; height: 28px; font-size: 13px; }
  .weg__bild { grid-column: 1; }

  /* Die Aktion einer Ablaufzeile passt nicht mehr daneben - sie rueckt unter
     den Titel, sonst laeuft die Zeile aus ihrer Karte. */
  .mock__az { grid-template-columns: 24px minmax(0, 1fr); row-gap: 8px; }
  .mock__az .mock__knopf { grid-column: 2; justify-self: start; }

  /* Drei Auswahlfelder nebeneinander und Menue neben Inhalt gehen hier nicht
     mehr auf - beides rueckt untereinander. */
  .mock__felder { grid-template-columns: minmax(0, 1fr); }
  .mock__konto { grid-template-columns: minmax(0, 1fr); }

  /* Fuer das Produktbild neben Name und Auswahl ist kein Platz mehr: die Zeile
     lief aus ihrer Karte. Das Bild ist Beiwerk, der Rest nicht. */
  .mock__zeile { grid-template-columns: minmax(0, 1fr); }
  .mock__ware { display: none; }
  .mock__felder { grid-column: 1; }
}