/* DTF.center — Shop-Styles
   Markenfarben aus dem Logo: Rot #C12031, Anthrazit #5B5B5B, Grau #9D9E9E.
   Keine externen Ressourcen (Fonts/CDN) — der Shop lädt nur aus eigenem Haus. */

:root {
  --rot:        #C12031;
  --rot-dunkel: #9C1927;
  --anthrazit:  #2F3336;
  --grau:       #5B5B5B;
  --grau-hell:  #9D9E9E;
  --linie:      #E3E5E8;
  --flaeche:    #FFFFFF;
  --seite:      #F4F5F7;
  --gruen:      #1A8F4C;
  --radius:     10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--seite);
  color: var(--anthrazit);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--rot); }

/* ---------- Kopf ---------- */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 20; }
.kopf-inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.marke { display: flex; align-items: center; flex: none; }
/* Feste Logohöhe in CSS — NICHT nur über das height-Attribut im <img>:
   die Regel `img { height: auto }` weiter oben schlägt das Attribut (nur
   Präsentations-Hinweis) und das Logo würde sonst auf seine Grundbreite von
   gut 2000 px aufgehen und die halbe Seite füllen. */
.marke img { display: block; height: 52px; width: auto; max-width: 220px; }
.nav { display: flex; gap: 22px; flex: 1; }
.nav a { color: var(--anthrazit); text-decoration: none; font-weight: 600; padding: 6px 0; }
.nav a:hover, .nav a.ist-aktiv { color: var(--rot); box-shadow: inset 0 -2px 0 var(--rot); }
.kopf-rechts { display: flex; align-items: center; gap: 16px; }
.kopf-rechts a { text-decoration: none; font-weight: 600; color: var(--anthrazit); }
.kopf-rechts a:hover { color: var(--rot); }
.korb { position: relative; }
.korb-zahl {
  display: inline-block; min-width: 21px; margin-left: 6px; padding: 1px 6px;
  background: var(--rot); color: #fff; border-radius: 11px; font-size: 13px; text-align: center;
}
@media (max-width: 700px) {
  .kopf-inner { gap: 14px; padding: 10px 16px; }
  .marke img { height: 38px; }
  .nav { gap: 16px; order: 3; flex-basis: 100%; }
}

/* ---------- Grundraster ---------- */
.inhalt { max-width: 1180px; margin: 0 auto; padding: 24px 20px 56px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px; margin-bottom: 20px;
}
h1 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: 21px; margin: 0 0 10px; }
h3 { font-size: 17px; margin: 18px 0 6px; }
p  { margin: 0 0 12px; }
.leise { color: var(--grau); }
.klein { font-size: 14px; }
.mini  { font-size: 13px; color: var(--grau); }

/* ---------- Umzugs-Banner (Startseite) ----------
   Bestandskunden des alten Shopify-Shops abholen: E-Mail bleibt Login,
   Passwort wird einmalig neu gesetzt — Details auf umzug.php. */
.umzug-band {
  background: var(--rot); color: #fff; border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between;
}
.umzug-band p { margin: 0; max-width: 780px; }
.umzug-band a { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--anthrazit), #4A4F53);
  color: #fff; border-radius: var(--radius); padding: 40px 32px; margin-bottom: 24px;
}
.hero h1 { color: #fff; max-width: 620px; }
.hero p { color: #DCDEE1; max-width: 620px; }
.hero .merkmale { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; font-weight: 600; }
.hero .merkmale span::before { content: "✓ "; color: #FF6A78; }

/* ---------- Seitenliste mehrseitiger Druckdaten ---------- */
/* Die Mengenfelder stehen SOFORT da; die Vorschaubilder rutschen nach, sobald
   sie geladen sind. Deshalb hat die Bildfläche ein festes Seitenverhältnis —
   sonst springt die Liste beim Nachladen. */
.seitenblock { margin-top: 16px; }
.seiten-kopf { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.seiten-werkzeug { margin: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.knopf.klein { padding: 5px 12px; font-size: 13px; }
/* Die Folie selbst: Unbedruckte Stellen der PDF sind durchsichtig (pngalpha),
   darunter liegt dieses Muster — so sieht man auf einen Blick, wo Farbe ist und
   wo nur Folie. Weiße Druckfarbe hebt sich dadurch von leerer Folie ab. */
.folie {
  background-color: #E9ECEF;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.6) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.6) 75%),
    linear-gradient(45deg, rgba(255,255,255,.6) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.6) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Untergrund umschalten: Auf einem schwarzen Shirt wirkt dasselbe Motiv anders
   als auf dem hellen Karo — weiße Druckfarbe ist dort das Auffälligste, helle
   Kanten und ein vergessener weißer Rand fallen sofort auf. Der Schalter über
   der Vorschau legt das Motiv auf Schwarz; er gilt für jedes Produkt, für Bögen
   wie für Bahnware, und für alle Vorschauflächen inklusive Lupe.
   Zwei getrennte Regelblöcke, KEINE Kommaliste: `:has()` kennen ältere Browser
   nicht, und ein unbekannter Selektor in der Liste wirft die ganze Regel weg —
   damit wäre auch der Weg über die Klasse tot. Die Klasse setzt produkt.php,
   `:has()` ist der Weg ohne JavaScript. */
body.auf-schwarz .folie { background-color: #121212; background-image: none; }
body:has(#aufschwarz:checked) .folie { background-color: #121212; background-image: none; }
/* Rahmen und Innenkante sind auf Hell gezeichnet und verschwinden sonst im
   Schwarz — die Lupe behält ihren weißen Ring und ihren Schlagschatten. */
body.auf-schwarz .folie:not(.glas) {
  border-color: #2B2B2B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
body:has(#aufschwarz:checked) .folie:not(.glas) {
  border-color: #2B2B2B; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
/* Die Schalterzeile selbst: Häkchen und Beschriftung nebeneinander, der
   erklärende Satz darunter über die volle Breite. */
.untergrund {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 14px 0 0; font-size: 13.5px;
}
.untergrund input { flex: none; margin: 0; }
.untergrund label { cursor: pointer; }
.untergrund .mini { flex-basis: 100%; margin: 0; }

.seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.seite {
  border: 1px solid var(--linie); border-radius: 8px; padding: 10px; background: #fff;
  position: relative;                     /* Anker für die Lupe */
}
.seite .bild {
  aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.seite .bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.seite .bild .platzhalter { font-size: 26px; font-weight: 700; color: var(--grau-hell); }
.seite .bild.laedt {
  background: linear-gradient(90deg, var(--seite) 25%, #E9EBEF 37%, var(--seite) 63%);
  background-size: 400% 100%; animation: seitenschimmer 1.4s infinite linear;
}

/* Lupe: Beim Überfahren zeigt ein rundes Glas neben dem Zeiger den AUSSCHNITT
   unter dem Zeiger vergrößert (assets/lupe.js). Vorher erschien die ganze Seite
   groß am Bildschirmrand — bei 100 × 55 cm sieht man darin keine Details.
   Es erscheint nur, wenn der Zeiger wirklich über dem Motiv steht, nicht schon
   über der Kachel: Das rechnet lupe.js aus der echten Bildfläche.
   Das Karomuster (.folie) liegt darunter, damit durchsichtige Stellen auch in
   der Vergrößerung als Folie zu erkennen sind. */
.glas {
  position: fixed; z-index: 70; pointer-events: none; overflow: hidden;
  width: 240px; height: 240px; border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.12) inset;
}
.glas .glas-bild {
  position: absolute; inset: 0; border-radius: 50%;
  background-repeat: no-repeat;
}
/* Breite Tabellen scrollen in ihrem eigenen Rahmen, statt die Seite querzuschieben. */
.tabelle-scroll { overflow-x: auto; }
@media (max-width: 720px) {
  .seitenzeile .minibild { width: 28px; height: 36px; }
  .seitenzeile input { width: 62px; }
  .korbbild { width: 42px; height: 56px; }
}
@keyframes seitenschimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* Nummer und Maß untereinander — nebeneinander bricht „Seite 1" auf zwei Zeilen,
   sobald das Maß zweistellig wird. */
.seite .zeile { display: block; }
.seite .nr { display: block; font-size: 13px; font-weight: 700; }
.seite .mass { display: block; font-size: 11.5px; color: var(--grau); }
.seite label { display: block; margin: 6px 0 2px; }
.seite input[type=number] { width: 100%; text-align: center; }
.seite.gesperrt { opacity: .6; border-style: dashed; }
.fehlerton { color: var(--rot); }
.seitensumme {
  margin: 12px 0 0; padding: 10px 12px; background: var(--seite);
  border-radius: 8px; font-size: 14px; font-weight: 600;
}
/* Einseitige Datei: eine Vorschau statt einer Liste — man will trotzdem sehen,
   was man hochgeladen hat. */
.einzelvorschau { margin: 14px 0 0; position: relative; }
.einzelvorschau .bild, .einzelvorschau img {
  display: block; width: 100%; max-width: 340px;
  object-fit: contain; border: 1px solid var(--linie); border-radius: 8px;
}
.einzelvorschau .bild { aspect-ratio: 3 / 4; }
.einzelvorschau figcaption { margin-top: 6px; font-size: 12.5px; color: var(--grau); }
/* Mülleimer unter der Ablage */
.datei-weg { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.datei-weg .symbol-knopf { flex: none; }
/* Warenkorb: Seiten stecken im Aufklapper, damit die Tabelle ruhig bleibt. */
.aufklapp.mengen { border: 0; margin: 6px 0 0; padding: 0; }
.aufklapp.mengen > summary { font-size: 13px; font-weight: 600; }
.seitenzeile {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; margin-top: 6px;
}
.seitenzeile > span { flex: 1; white-space: nowrap; }   /* „Seite 1" nie umbrechen */
.seitenzeile input { width: 74px; flex: none; text-align: center; }
.seitenzeile.gesperrt { opacity: .55; }
/* Miniaturen im Warenkorb. overflow bleibt sichtbar — sonst schneidet der
   Rahmen die Lupe ab; die Rundung sitzt deshalb am Bild selbst. */
.seitenzeile .minibild {
  position: relative; display: block; flex: none;
  width: 36px; height: 46px; border-radius: 3px;
}
.seitenzeile .minibild > img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 3px; }
/* Warenkorb: kleine Vorschau neben dem Motivnamen — der Dateiname allein sagt
   nicht, ob die richtige Datei im Korb liegt. */
.korbzeile { display: flex; gap: 10px; align-items: flex-start; text-align: left; }
.korbbild {
  position: relative; flex: none; width: 52px; height: 68px;
  border-radius: 4px; display: block;
}
.korbbild > img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 4px; }

/* ---------- Liefergebiet-Hinweis im Kopf ---------- */
/* Kleiner Anker mit Flagge: Wer im Ausland sitzt, soll das VOR dem Bestellen sehen,
   ohne dass der Hinweis den Kopf dominiert. */
.liefergebiet {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--seite); border: 1px solid var(--linie); border-radius: 999px;
  padding: 5px 12px 5px 8px; color: var(--grau); text-decoration: none;
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.liefergebiet:hover { border-color: var(--rot); color: var(--rot); }
.flagge {
  width: 20px; height: 12px; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}
.flagge.gross { width: 34px; height: 21px; border-radius: 3px; }
@media (max-width: 720px) {
  .liefergebiet span { display: none; }        /* auf dem Handy bleibt die Flagge */
  .liefergebiet { padding: 5px 8px; }
}
.liefer-marke {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-weight: 700; color: var(--anthrazit);
}

/* ---------- Produktionsfilm ---------- */
/* Helle Karte, dunkle Bühne: Der Hero darüber ist bereits dunkel — zwei dunkle
   Blöcke übereinander erschlagen die Seite, und der Film wirkt heller gerahmt mehr. */
.film {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: center;
  background: #fff; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px; margin-bottom: 24px;
}
@media (max-width: 860px) { .film { grid-template-columns: 1fr; } }
.film-buehne {
  position: relative; border-radius: 8px; overflow: hidden; background: #000;
  aspect-ratio: 16 / 9;
}
.film-buehne video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #000;
}
/* Solange die stumme Schleife läuft, liegt der vollständige Film unsichtbar darunter. */
.film-bereit .film-voll { opacity: 0; pointer-events: none; }
.film-laeuft .film-voll { opacity: 1; }
.film-loop { z-index: 1; }
.film-start {
  position: absolute; inset: auto auto 14px 14px; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.94); color: var(--anthrazit);
  border: 0; border-radius: 999px; padding: 9px 18px 9px 10px; cursor: pointer;
  font: inherit; font-weight: 700; text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .15s ease, background .15s ease;
}
.film-start:hover { transform: translateY(-1px); background: #fff; }
.film-start:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }
.film-play {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--rot); color: #fff;
}
.film-play svg { width: 20px; height: 20px; }
.film-start-text small { display: block; font-weight: 400; font-size: 12.5px; color: var(--grau); }
.film-text h2 { margin-top: 0; }
.film-text p { color: var(--grau); }
.film-text .checkliste { color: var(--grau); }
.film-text .checkliste strong { color: var(--anthrazit); }
/* Kompaktfassung auf der Produktseite: nur die Bühne, volle Breite der Karte. */
.film-kompakt { grid-template-columns: 1fr; padding: 0; background: none; border: 0; margin: 0; }

/* ---------- Aufklappbereich (details/summary) ---------- */
.aufklapp { border-top: 1px solid var(--linie); margin-top: 18px; padding-top: 14px; }
.aufklapp > summary {
  cursor: pointer; list-style: none; font-size: 17px; font-weight: 700;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before {
  content: "›"; display: inline-block; color: var(--rot); font-size: 20px; line-height: 1;
  transform: rotate(0deg); transition: transform .15s ease;
}
.aufklapp[open] > summary::before { transform: rotate(90deg); }
.aufklapp > summary:hover { color: var(--rot); }
.aufklapp > summary:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.aufklapp > summary .mini { font-weight: 400; color: var(--grau); }
.aufklapp > *:not(summary) { margin-top: 12px; }

/* ---------- Produktkacheln ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.kachel {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column;
}
.kachel .bogen {
  background: var(--seite); border: 1px dashed var(--grau-hell); border-radius: 8px;
  height: 150px; display: flex; align-items: center; justify-content: center;
  color: var(--grau); font-weight: 700; letter-spacing: .5px; margin-bottom: 16px;
}
/* Produktfoto in der Kachel: feste Höhe, damit alle Kacheln gleich hoch starten;
   das Format liegt als Chip auf dem Bild — es gehört zur Ware, nicht in die Zeile
   darunter (die trägt schon Name und Untertitel). */
.kachel .bild {
  position: relative; display: block; height: 170px; margin-bottom: 16px;
  border-radius: 8px; overflow: hidden; background: var(--seite);
}
.kachel .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kachel .bild .format {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(255,255,255,.92); color: var(--anthrazit);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .2px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.kachel .bild:hover img { transform: scale(1.03); }
.kachel .bild img { transition: transform .25s ease; }
.kachel h2 { font-size: 19px; }
.preis { font-size: 26px; font-weight: 700; color: var(--anthrazit); }
.preis small { font-size: 14px; font-weight: 400; color: var(--grau); }
.kachel .fuellen { flex: 1; }

/* ---------- Produktseite ---------- */
.produkt { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .produkt { grid-template-columns: 1fr; } }
.produktbild { margin: 0 0 18px; }
.produktbild img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 8px; background: var(--seite);
}
.produktbild figcaption {
  margin-top: 8px; font-size: 13px; color: var(--grau); font-weight: 600; letter-spacing: .2px;
}
.checkliste { padding-left: 20px; margin: 0 0 12px; }
.checkliste li { margin-bottom: 4px; }

/* ---------- Formulare ---------- */
label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], select, textarea {
  width: 100%; border: 1px solid var(--linie); border-radius: 8px;
  padding: 10px 12px; font-size: 16px; font-family: inherit; background: #fff; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--rot); outline-offset: 1px; }
textarea { min-height: 90px; resize: vertical; }
.feldpaar { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.feldpaar-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .feldpaar, .feldpaar-2 { grid-template-columns: 1fr; } }

.knopf {
  display: inline-block; border: none; border-radius: 8px; cursor: pointer;
  background: var(--rot); color: #fff; font: inherit; font-weight: 700;
  padding: 13px 22px; text-decoration: none; text-align: center;
}
.knopf:hover { background: var(--rot-dunkel); }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.knopf.voll { width: 100%; }
.knopf.zweit { background: #fff; color: var(--anthrazit); border: 1px solid var(--linie); }
.knopf.zweit:hover { border-color: var(--grau); background: #fff; }

.wahl { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 15px; font-weight: 400; }
.wahl input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.wahl label { margin: 0; font-weight: 400; }
.wahlkarte {
  border: 1px solid var(--linie); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
}
.wahlkarte.gewaehlt { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot) inset; }
.wahlkarte.gesperrt { opacity: .55; }
.wahlkarte.gesperrt .wahl, .wahlkarte.gesperrt label { cursor: not-allowed; }

/* Symbol-Knopf in Listen (z. B. Position im Warenkorb entfernen) */
.symbol-knopf {
  background: none; border: 1px solid transparent; border-radius: 8px;
  color: var(--grau); cursor: pointer; padding: 6px; line-height: 0;
}
.symbol-knopf:hover { color: var(--rot); border-color: var(--linie); background: #fff; }
.symbol-knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 1px; }
.symbol-knopf svg { display: block; width: 18px; height: 18px; }

/* ---------- Upload ---------- */
.ablage {
  border: 2px dashed var(--grau-hell); border-radius: 10px; padding: 22px; text-align: center;
  background: var(--seite); cursor: pointer;
}
.ablage.drueber { border-color: var(--rot); background: #FFF3F4; }
.ablage input[type=file] { display: none; }
.ablage .gross { font-weight: 700; display: block; margin-bottom: 4px; }
.fortschritt { height: 8px; background: var(--linie); border-radius: 4px; overflow: hidden; margin-top: 12px; display: none; }
.fortschritt > i { display: block; height: 100%; width: 0; background: var(--rot); transition: width .2s; }
.datei-ok {
  display: none; margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: #EAF7EF; border: 1px solid #BCE3CC; color: #14663A; font-size: 14px;
}
.datei-ok b { display: block; }

/* ---------- Meldungen ---------- */
.meldung { border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; font-size: 15px; }
.meldung.fehler  { background: #FDECEE; border: 1px solid #F3BFC5; color: #8E1622; }
.meldung.hinweis { background: #FFF7E6; border: 1px solid #F0DDB0; color: #7A5A12; }
.meldung.ok      { background: #EAF7EF; border: 1px solid #BCE3CC; color: #14663A; }
.meldung ul { margin: 0; padding-left: 20px; }

/* ---------- Tabellen / Warenkorb ---------- */
.zeilen { width: 100%; border-collapse: collapse; }
.zeilen th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
             color: var(--grau); border-bottom: 1px solid var(--linie); padding: 0 10px 8px 0; }
.zeilen td { border-bottom: 1px solid var(--linie); padding: 14px 10px 14px 0; vertical-align: top; }
.zeilen td.rechts, .zeilen th.rechts { text-align: right; padding-right: 0; }
.zeilen .menge { width: 84px; }
.summe { margin-left: auto; max-width: 380px; }
.summe div { display: flex; justify-content: space-between; padding: 6px 0; }
.summe .gesamt { border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 12px;
                 font-size: 20px; font-weight: 700; }

.spalten { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; } }

.merkmal-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }

/* ---------- Statusfarben ---------- */
.pill { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 13px; font-weight: 600; }
.pill.offen   { background: #FFF7E6; color: #7A5A12; }
.pill.bezahlt { background: #EAF7EF; color: #14663A; }
.pill.grau    { background: #EFF0F2; color: var(--grau); }

/* ---------- Fuß ---------- */
.fuss { background: var(--anthrazit); color: #C9CCCF; margin-top: 40px; }
.fuss-inner { max-width: 1180px; margin: 0 auto; padding: 26px 20px;
              display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.fuss a { color: #C9CCCF; text-decoration: none; margin-left: 18px; }
.fuss a:hover { color: #fff; }
.fuss-nav { display: flex; flex-wrap: wrap; }
@media (max-width: 620px) { .fuss a { margin: 0 18px 0 0; } }

/* Vorschau, die noch bei mother im Ofen ist (schwere Datei, s. assets/vorschau.js).
   Sanduhr + Restdauer statt bloßem Text: Man sieht, dass etwas läuft, und weiß,
   wie lange es noch dauern soll. */
.vorschau-wartet {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: fit-content; margin: .3rem auto 0; padding: 3px 8px;
  border-radius: 999px; background: rgba(255,255,255,.92);
  font-size: .72rem; line-height: 1.15; color: var(--grau);
}
.vorschau-wartet .wartet-text { text-align: left; }
.vorschau-wartet .rest { display: block; font-weight: 700; color: var(--anthrazit); }
.vorschau-wartet .sanduhr { flex: none; width: 18px; height: 24px; }
.vorschau-wartet .uhrglas {
  fill: none; stroke: var(--grau-hell); stroke-width: 1.4; stroke-linecap: round;
}
.vorschau-wartet .sand { fill: var(--rot); }
.vorschau-wartet .rieseln {
  stroke: var(--rot); stroke-width: 1.2; stroke-linecap: round;
  animation: rieseln 1s infinite ease-in-out;
}
/* Abgelaufene Schätzung: Der Sand steht, die Anfrage läuft trotzdem weiter. */
.vorschau-wartet.ueberfaellig .rieseln { animation: none; opacity: .35; }
.vorschau-wartet.ueberfaellig .sand { fill: var(--grau-hell); }
@keyframes rieseln { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
/* In den kleinen Miniaturen des Warenkorbs ist kein Platz für den Text. */
.korbbild .vorschau-wartet .wartet-text,
.minibild .vorschau-wartet .wartet-text { display: none; }

/* Der Satz gegen die Ungeduld — einmal je Seite, nicht an jeder Kachel. */
.wartet-hinweis {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--seite); border-left: 3px solid var(--rot);
  font-size: 13px; color: var(--grau);
}
@media (prefers-reduced-motion: reduce) {
  .vorschau-wartet .rieseln { animation: none; }
}

/* Kantenwächter: Motiv reicht bis an die Dateikante. Bewusst ein Hinweis und
   keine Fehlermeldung — randlos angelegt ist erlaubt, nur nachsehen soll er. */
.rand-hinweis {
  display: block;            /* steht mal als <p>, im Warenkorb als <span> */
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: #FFF6E6; border-left: 3px solid #E0A100;
  font-size: 13px; color: #6B5200;
}

/* ---------- Druckgröße selbst einstellen (PNG) ----------
   Zwei Maßfelder mit einem Schloss dazwischen: zu = Seitenverhältnis bleibt,
   auf = beide Werte gelten. Das Schloss steht bewusst ZWISCHEN den Feldern —
   so ist ohne Text klar, was es verbindet. */
.skalierung {
  margin-top: 16px; border: 1px solid var(--linie); border-radius: 8px;
  padding: 12px 14px; background: var(--seite);
}
.skalierung[hidden] { display: none; }
.skal-kopf { margin: 0 0 10px; line-height: 1.45; }
.skal-kopf .mini { display: block; }
/* Zwei kurze Maßfelder untereinander, rechts daneben die Kette auf halber Höhe —
   die Klammer-Anordnung aus den Grafikprogrammen. Kurze Felder, weil da nie mehr
   als „100,0" drinsteht. */
.skal-felder {
  display: grid; grid-template-columns: max-content 1fr;
  column-gap: 14px; row-gap: 8px; align-items: end;
}
.skal-felder .feld { display: flex; flex-direction: column; }
.skal-felder .feld label { margin-bottom: 2px; }
.skal-felder input { width: 92px; margin: 0; text-align: right; }
.skal-frei { margin: 10px 0 0; }
.skal-frei label { display: inline; font-weight: 400; }
.skal-knoepfe { margin: 12px 0 8px; display: flex; gap: 8px; flex-wrap: wrap; }
/* Kette statt Schloss: geschlossen = Breite und Höhe hängen zusammen, offen =
   jede Kante für sich. Symbol UND Text — ein Icon allein muss man raten. */
/* Zweite Spalte, über beide Zeilen, auf halber Höhe: Die Kette gehört sichtbar
   zu BEIDEN Maßen, nicht zu einem. Die geschweifte Klammer links davon macht das
   ohne ein Wort klar. */
.skal-kette {
  grid-column: 2; grid-row: 1 / span 2; align-self: stretch;
  margin: 0; position: relative; padding-left: 13px;
  display: flex; align-items: center;          /* Knopf auf halber Höhe beider Zeilen */
}
/* Die Klammer muss ÜBER BEIDE Zeilen laufen — dafür streckt sich der Block (stretch)
   und der Knopf wird innen zentriert. Bei align-self:center wäre der Kasten nur so
   hoch wie der Knopf und die Klammer ein wirkungsloser Strich. */
.skal-kette::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 5px; width: 8px;
  border: 1px solid var(--grau-hell); border-right: 0; border-radius: 5px 0 0 5px;
}
.kette {
  display: inline-flex; align-items: center; gap: 7px; text-align: left;
  background: none; border: 0; padding: 2px 0;
  color: var(--grau); cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.25;
}
.kette svg { display: block; width: 17px; height: 17px; flex: none; }
.kette.zu { color: var(--rot); }
.kette.offen { color: var(--grau-hell); }
.kette:hover { color: var(--rot); }
.kette:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; border-radius: 4px; }

/* ---------- Der Bogen als Maßstab ----------
   Das Karomuster zeigt nicht mehr nur die Fläche hinter dem Motiv, sondern den
   ganzen Bogen: bei „100 × 55 cm" also 55 cm breit und 100 cm lang, so wie er
   aus der Maschine kommt. Das Motiv sitzt darin in seiner echten relativen
   Größe — 3 cm und 30 cm sehen sonst auf dem Schirm gleich aus.
   Bemaßt wird oben (Breite) und rechts (Länge), damit auch der Maßstab selbst
   ablesbar ist und nicht geraten werden muss (Lars, 21.08.2026).
   Eigener Name: .bogen gehört schon dem Formatfeld der Startseitenkachel. */
.bogenansicht {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* Blatt | Maß rechts */
  grid-template-rows: auto minmax(0, 1fr);      /* Maß oben / Blatt   */
  gap: 3px 5px;
  max-width: 340px;
}
/* Zwei Klassen im Selektor, weil `.einzelvorschau .bild` sonst gewinnt und mit
   display:block die Zentrierung aushebelt — ein kleines Motiv klebte dann in der
   linken oberen Ecke, statt mittig auf dem Bogen zu liegen. */
.bogenansicht .bogen-blatt {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;                       /* was nicht auf den Bogen passt, ist ab */
  border: 1px solid var(--linie); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
/* Das Motiv bekommt seine Größe in Prozent der Bogenkanten (inline gesetzt).
   flex: none, sonst staucht der Flexkasten ein Motiv, das größer ist als der
   Bogen — und genau das soll man ja sehen. */
.bogen-blatt .bogen-motiv {
  flex: none; display: block;
  border: 0; border-radius: 0; max-width: none;
}
/* Motiv breiter als die Bahn? Dann liegt es quer — so kommt es auch aus der
   Maschine. Gedreht wird um den eigenen Mittelpunkt, und der liegt durch die
   Flex-Zentrierung genau in der Bogenmitte. */
.bogen-blatt .bogen-motiv.gedreht { transform: rotate(90deg); }

/* Bemaßung: dünne Linie, Text in der Mitte — oben waagerecht, rechts senkrecht. */
.bogen-mass {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1.2; color: var(--grau);
}
.bogen-mass i { flex: 1; background: var(--linie); }
.bogen-mass b { font-weight: 400; white-space: nowrap; }
.bogen-mass-oben   { grid-column: 1; grid-row: 1; }
.bogen-mass-oben i { height: 1px; min-width: 8px; }
.bogen-mass-rechts {
  grid-column: 2; grid-row: 2;
  flex-direction: column; align-self: stretch; justify-self: center;
}
.bogen-mass-rechts i { width: 1px; min-height: 8px; }
.bogen-mass-rechts b { writing-mode: vertical-rl; padding: 3px 0; }
/* In der Kachelliste ist weniger Platz — die Maße bleiben, nur kleiner. */
.seite .bogenansicht { max-width: none; gap: 2px 4px; margin-bottom: 8px; }
.seite .bogen-mass { font-size: 10.5px; }