/* ── Eindruck Print & Stick — Editorial Design System ── */

html { scroll-behavior: smooth; }
::selection { background: #8A1C24; color: #fff; }
/* Sprungziele (/#sortiment, /#preise … aus dem Menü) nicht unter der klebenden
   Navigation (4rem) verstecken */
main > section[id] { scroll-margin-top: 4rem; }

/* ── Sprunglink: erst sichtbar, wenn er per Tastatur fokussiert wird ── */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  background: #1c1e24;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; outline: 2px solid #fff; outline-offset: 2px; }

/* ── Sichtbarer Tastaturfokus auf allen eigenen Bedienelementen ── */
.category-tab:focus-visible,
.preis-modus-btn:focus-visible,
.faq-item summary:focus-visible,
.post-row:focus-visible { outline: 2px solid #8A1C24; outline-offset: 3px; }

.font-900 { font-weight: 900; }
.font-800 { font-weight: 800; }

/* ── Typo-Effekte ── */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #1c1e24;
}
@media (min-width: 1024px) {
  .text-outline { -webkit-text-stroke: 2px #1c1e24; }
}

/* ── Sektions-Header (editorial, nummeriert) ── */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.section-index {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  color: #8A1C24;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #6b7078;
  flex-shrink: 0;
}
.section-head::after {
  content: '';
  height: 1px;
  background: rgba(28, 30, 36, 0.12);
  flex: 1;
  transform: translateY(-0.35rem);
}
.section-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #1c1e24;
}

/* ── Marquee ── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  animation: marquee 28s linear infinite;
}
/* Bewegung anhalten, sobald der Mauszeiger darüber liegt (WCAG 2.2.2) */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  padding-right: 1.75rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
}
.marquee-item i { font-size: 0.5rem; color: #8A1C24; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Rotierendes Badge ── */
.spin-badge { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scroll-Reveal ──
   Nur ausblenden, wenn JavaScript läuft (html.js wird vom Einzeiler im <head>
   gesetzt, src/layout.ts) — ohne JS bleibt jede Sektion sichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── Bento Grid (Leistungen) ── */
.bento-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.35s ease;
}
.bento-card:hover { transform: translateY(-4px); }

/* ── Kategorie-Tabs ── */
.category-tab {
  padding: 0.7rem 1.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(28, 30, 36, 0.12);
  font-family: 'Archivo', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #6b7078;
  background: transparent;
  transition: all 0.25s ease;
  cursor: pointer;
}
.category-tab:hover { border-color: #1c1e24; color: #1c1e24; }
.category-tab.is-active {
  background: #1c1e24;
  color: #fff;
  border-color: #1c1e24;
}
/* auf den Sortimentsseiten sind die Tabs Links */
a.category-tab { display: inline-block; text-decoration: none; }

/* ── Sortimentsseiten: Seitennavigation ── */
.seiten-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(28, 30, 36, 0.1);
  font-size: 0.875rem;
  color: #6b7078;
}
.seiten-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #1c1e24;
}
.seiten-nav a:hover { color: #8A1C24; }
.seiten-nav a[rel="next"] { justify-self: end; }
.seiten-nav span:not(.is-leer) { justify-self: center; }

/* ── Stats-Band ── */
.stat-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ── Blog: editoriale Zeilen ── */
.post-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0.25rem;
  border-bottom: 1px solid rgba(28, 30, 36, 0.1);
  transition: all 0.25s ease;
}
.post-row:first-child { border-top: 1px solid rgba(28, 30, 36, 0.1); }
@media (min-width: 768px) {
  .post-row { grid-template-columns: 5rem 1fr auto auto; gap: 2rem; }
}
.post-row-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(28, 30, 36, 0.25);
  transition: all 0.3s ease;
}
.post-row:hover .post-row-num { color: #8A1C24; -webkit-text-stroke: 0; }
.post-row-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: -0.01em;
  color: #1c1e24;
  transition: color 0.25s ease;
}
.post-row:hover .post-row-title { color: #8A1C24; }
.post-row-arrow {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(28, 30, 36, 0.15);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  color: #1c1e24;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.post-row:hover .post-row-arrow {
  background: #8A1C24;
  border-color: #8A1C24;
  color: #fff;
  transform: rotate(-45deg);
}

/* ── Preis-Schritte ── */
.price-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.4rem 0.25rem;
  border-bottom: 1px solid rgba(28, 30, 36, 0.1);
}
.price-step:first-child { border-top: 1px solid rgba(28, 30, 36, 0.1); }
.price-step-num {
  flex-shrink: 0;
  min-width: 5.5rem;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  color: #8A1C24;
  font-size: 1.15rem;
  padding-top: 0.05rem;
}

/* ── Kontakt / Formular ── */
.contact-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.9rem;
  background: rgba(138, 28, 36, 0.07);
  color: #8A1C24;
}
.form-input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(28, 30, 36, 0.12);
  border-radius: 0.7rem;
  font-size: 0.875rem;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: #8A1C24;
  box-shadow: 0 0 0 3px rgba(138, 28, 36, 0.1);
}

/* ── Logo-/Motiv-Upload im Anfrageformular ──
   Der native Dateidialog bleibt erhalten; gestylt wird nur der Button-Teil
   über ::file-selector-button. Ein nachgebautes Feld wäre mit Tastatur und
   Screenreader schlechter bedienbar. */
.form-datei {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed rgba(28, 30, 36, 0.22);
  border-radius: 0.7rem;
  font-size: 0.8125rem;
  background: #fff;
  color: rgba(28, 30, 36, 0.72);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-datei::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: 9999px;
  background: rgba(138, 28, 36, 0.09);
  color: #8A1C24;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.form-datei:hover { border-color: rgba(138, 28, 36, 0.45); }
.form-datei:hover::file-selector-button { background: rgba(138, 28, 36, 0.14); }
.form-datei:focus-visible {
  outline: none;
  border-color: #8A1C24;
  border-style: solid;
  box-shadow: 0 0 0 3px rgba(138, 28, 36, 0.1);
}

/* Gewählte Dateien; abgewiesene stehen mit Grund in derselben Liste, damit
   niemand glaubt, eine Datei sei übernommen worden */
.datei-liste {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgba(28, 30, 36, 0.72);
}
.datei-liste li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  /* lange Dateinamen brechen um, statt die Spalte zu sprengen */
  overflow-wrap: anywhere;
}
.datei-liste li i { color: rgba(28, 30, 36, 0.45); flex-shrink: 0; }
.datei-liste li.is-abgewiesen { color: #b45309; }
.datei-liste li.is-abgewiesen i { color: #b45309; }

/* ── Einwilligung (Pflichtfeld vor dem Absenden) ──
   Das Kästchen behält seine native Größe und Bedienung; nur Abstand, Farbe
   und der Fehlerzustand sind gesetzt. Kein nachgebautes Kästchen: ein echtes
   input[type=checkbox] ist mit Tastatur und Screenreader bedienbar, ohne dass
   der Shop das nachbilden muss. */
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
  color: rgba(28, 30, 36, 0.72);
  cursor: pointer;
}
.einwilligung input[type='checkbox'] {
  flex-shrink: 0;
  /* optisch auf die erste Textzeile ausgerichtet */
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
  accent-color: #8A1C24;
  cursor: pointer;
}
.einwilligung input[type='checkbox']:focus-visible {
  outline: 2px solid #8A1C24;
  outline-offset: 2px;
}
.einwilligung a {
  color: #8A1C24;
  font-weight: 600;
}
/* Fehlerzustand: app.js setzt aria-invalid auf dem Feld selbst (markiereFeld).
   Daran hängt auch die Optik — so gibt es keine zweite Wahrheit in Form einer
   Klasse, die auseinanderlaufen kann. */
[aria-invalid='true'] {
  border-color: #b91c1c;
}
.einwilligung:has(input[aria-invalid='true']) {
  color: #b91c1c;
}
.einwilligung input[type='checkbox'][aria-invalid='true'] {
  outline: 2px solid #b91c1c;
  outline-offset: 2px;
}

/* ── Nav-Links mit Underline-Animation ── */
.nav-link {
  position: relative;
  padding-bottom: 0.2rem;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #8A1C24;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* Hier standen Regeln für Kundenstimmen-Karten. Die Sektion ist entfernt:
   Der Shop zeigt keine Zitate, die niemand gesagt hat. Sobald echte,
   freigegebene Referenzen vorliegen, kommen Markup und Stil zurück. */

/* ── FAQ (native details/summary, ohne JS zugänglich) ── */
.faq-item { border-bottom: 1px solid rgba(28, 30, 36, 0.1); }
.faq-item:first-child { border-top: 1px solid rgba(28, 30, 36, 0.1); }
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.35rem 0.25rem;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #1c1e24;
  transition: color 0.25s ease;
}
.faq-item summary:hover .faq-q { color: #8A1C24; }
.faq-chevron {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 9999px;
  border: 1px solid rgba(28, 30, 36, 0.15);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: #1c1e24;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] .faq-chevron {
  background: #8A1C24;
  border-color: #8A1C24;
  color: #fff;
  transform: rotate(45deg);
}
.faq-a { padding: 0 3.5rem 1.5rem 0.25rem; font-size: 0.925rem; line-height: 1.7; color: #6b7078; }

/* ── Honeypot-Feld (unsichtbar für Menschen) ── */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* neutrale Produktkarte ohne Linien-Tag */
.line-none {
  background: #fff;
  border: 1px solid rgba(28, 30, 36, 0.08);
}
.line-none:hover { box-shadow: 0 24px 48px -24px rgba(28, 30, 36, 0.18); }

/* ── Netto/Brutto-Umschalter (R7/R11) ── */
.preis-umschalter {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid rgba(28, 30, 36, 0.12);
  border-radius: 9999px;
  background: #fff;
}
.preis-modus-btn {
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b7078;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.preis-modus-btn:hover { color: #1c1e24; }
.preis-modus-btn.is-active { background: #1c1e24; color: #fff; }

/* ── Produktseite: Staffelpreis-Tabelle (R21) ── */
.staffel-tabelle { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
.staffel-tabelle th,
.staffel-tabelle td { text-align: left; padding: 0.55rem 0.25rem; border-bottom: 1px solid rgba(28, 30, 36, 0.08); }
.staffel-tabelle th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: #6b7078; }
.staffel-tabelle th:last-child,
.staffel-tabelle td:last-child { text-align: right; font-weight: 600; }

/* ── Systemeinstellung „Bewegung reduzieren" respektieren ──
   Steht bewusst am Dateiende (Kaskade) und greift pauschal: keine Animationen,
   keine spürbaren Übergänge, Reveal-Elemente sofort sichtbar. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .bento-card:hover, .kachel:hover { transform: none; }
}

/* ── Linien-Empfehlung (Startseite): Packshots auf weißem Grund, app.js
      blendet die Karten der Reihe nach über ── */
.linien-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94) translateY(6px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.linien-bild.ist-sichtbar { opacity: 1; transform: none; }
/* Empfehlung nach Warengruppe (src/index.tsx, app.js) */
.linien-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.linien-filter-knopf { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.12); background: #fff; color: #1c1e24; font-size: 0.875rem; font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.linien-filter-knopf span { font-weight: 400; color: #6b7078; }
.linien-filter-knopf:hover { border-color: #8A1C24; color: #8A1C24; }
.linien-filter-knopf.is-aktiv { background: #1c1e24; border-color: #1c1e24; color: #fff; }
.linien-filter-knopf.is-aktiv span { color: rgba(255, 255, 255, 0.65); }
.linien-filter-knopf:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
@media (max-width: 767px) {
  /* auf dem Handy eine Zeile zum Wischen statt drei Zeilen Knöpfe */
  .linien-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
  .linien-filter::-webkit-scrollbar { display: none; }
  .linien-filter-knopf { flex: 0 0 auto; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .linien-bild { transition: none; transform: none; }
}

/* ── Veredelungstechniken: Reiter + Detailfeld (src/index.tsx, app.js) ── */
.tech-tab {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(28, 30, 36, 0.1);
  border-radius: 1.25rem;
  padding: 1.35rem 1.5rem 1.5rem;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.tech-tab:hover { border-color: #8A1C24; transform: translateY(-2px); }
.tech-tab:focus-visible { outline: 2px solid #8A1C24; outline-offset: 3px; }
.tech-tab-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 1rem; color: #8A1C24; }
.tech-tab-icon { color: #8A1C24; font-size: 1.15rem; }
.tech-tab-titel { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.2; margin-top: 0.9rem; color: #1c1e24; }
.tech-tab-claim { font-size: 0.8rem; line-height: 1.4; color: #6b7078; }
/* Telefon: zwei schmale Reiter je Zeile — lange Namen („Sublimationsdruck")
   trennen statt überlaufen; der Leitsatz steht ohnehin im geöffneten Feld */
@media (max-width: 639px) {
  .tech-tab-titel { font-size: 1rem; hyphens: auto; overflow-wrap: anywhere; }
  .tech-tab-claim { display: none; }
}
.tech-tab.is-active { background: #1c1e24; border-color: #1c1e24; }
.tech-tab.is-active .tech-tab-titel { color: #fff; }
.tech-tab.is-active .tech-tab-claim { color: rgba(255, 255, 255, 0.7); }
.tech-tab.is-active .tech-tab-num,
.tech-tab.is-active .tech-tab-icon { color: #d9737c; }
.js .tech-tabpanel:not(.is-active) { display: none; }
.no-js .tech-tabpanel + .tech-tabpanel { margin-top: 1rem; }
.tech-tabpanel:focus-visible { outline: 2px solid #8A1C24; outline-offset: 4px; border-radius: 1.5rem; }

/* ── Alle Artikel: Filterspalte + Treffer (src/routes/sortiment.ts, sortiment.js) ── */
.sortiment-layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) {
  .sortiment-layout { grid-template-columns: 272px minmax(0, 1fr); align-items: start; }
}
.filter-spalte { background: #fff; }
@media (min-width: 1024px) {
  .filter-spalte {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(28, 30, 36, 0.1);
    border-radius: 1.25rem;
    overflow: hidden;
  }
  .filter-inhalt { overflow-y: auto; overscroll-behavior: contain; }
  .filter-spalte .filter-schliessen, .filter-spalte .filter-fuss { display: none; }
}
@media (max-width: 1023px) {
  /* Telefon/Tablet: Schublade über der Seite, Kopf mit ×, Fußknopf mit Trefferzahl */
  .filter-spalte {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
  }
  .filter-spalte.is-offen { transform: none; visibility: visible; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
  .filter-inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
  body.filter-offen { overflow: hidden; }
}
/* ohne JavaScript filtert nichts: Spalte, Suche und Sortierung entfallen,
   Raster und Blätterlinks bleiben */
.no-js .filter-spalte,
.no-js .filter-oeffnen,
.no-js .sortiment-suche,
.no-js .sortiment-sortierung { display: none; }
.filter-kopf { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(28, 30, 36, 0.08); }
.filter-titel { display: flex; align-items: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem; flex: 1; }
.filter-titel-zahl,
.filter-oeffnen-zahl,
.filter-gruppe-aktiv {
  display: inline-grid;
  place-items: center;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 9999px;
  background: #8A1C24;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 0.35rem;
}
.filter-titel-zahl[hidden], .filter-oeffnen-zahl[hidden], .filter-gruppe-aktiv[hidden] { display: none; }
.filter-zuruecksetzen { font-size: 0.8rem; font-weight: 600; color: #8A1C24; text-decoration: underline; text-underline-offset: 3px; }
.filter-zuruecksetzen[hidden] { display: none; }
.filter-schliessen { width: 2.4rem; height: 2.4rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.15); display: grid; place-items: center; }
.filter-gruppe { border-bottom: 1px solid rgba(28, 30, 36, 0.08); }
.filter-gruppe:last-child { border-bottom: 0; }
.filter-gruppe > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.9rem 1.25rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.filter-gruppe > summary::-webkit-details-marker { display: none; }
.filter-gruppe > summary::after {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.filter-gruppe[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.filter-gruppe > summary:hover { color: #8A1C24; }
.filter-gruppe > summary:focus-visible { outline: 2px solid #8A1C24; outline-offset: -2px; }
.filter-werte { padding: 0 1.25rem 1.1rem; }
.filter-werte-liste { display: flex; flex-direction: column; }
.filter-wert { display: flex; align-items: center; gap: 0.6rem; padding: 0.32rem 0; font-size: 0.875rem; cursor: pointer; }
.filter-wert[hidden], .filter-farbe[hidden], .filter-knopf[hidden] { display: none; }
.filter-wert input { width: 1.05rem; height: 1.05rem; accent-color: #8A1C24; flex-shrink: 0; }
.filter-wert:hover .filter-label { color: #8A1C24; }
.filter-label { flex: 1; min-width: 0; }
.filter-zahl { font-size: 0.75rem; color: #6b7078; font-variant-numeric: tabular-nums; }
.filter-werte .is-leer { opacity: 0.38; cursor: default; }
.filter-werte .is-leer:hover .filter-label { color: inherit; }
.filter-werte-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filter-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid rgba(28, 30, 36, 0.15);
  border-radius: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.filter-knopf .filter-label { flex: none; }
.filter-knopf .filter-zahl { font-weight: 400; font-size: 0.7rem; }
.filter-knopf:hover { border-color: #1c1e24; }
.filter-knopf input,
.filter-farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filter-knopf:has(input:checked) { background: #1c1e24; border-color: #1c1e24; color: #fff; }
.filter-knopf:has(input:checked) .filter-zahl { color: rgba(255, 255, 255, 0.7); }
.filter-knopf:has(input:focus-visible),
.filter-farbe:has(input:focus-visible) { outline: 2px solid #8A1C24; outline-offset: 2px; }
.filter-werte-farben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem 0.25rem; }
.filter-farbe { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; cursor: pointer; font-size: 0.7rem; text-align: center; }
.filter-farbe .filter-label { flex: none; line-height: 1.2; }
.filter-farbe .filter-zahl { font-size: 0.68rem; }
.filter-punkt {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: 1px solid rgba(28, 30, 36, 0.2);
  box-shadow: inset 0 0 0 2px #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.filter-farbe:hover .filter-punkt { transform: scale(1.08); }
.filter-farbe:has(input:checked) .filter-punkt { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px #8A1C24; }
.filter-farbe:has(input:checked) .filter-label { font-weight: 700; }
.filter-mehr { margin-top: 0.1rem; padding: 0.5rem 0; font-size: 0.8rem; font-weight: 600; color: #8A1C24; text-align: left; }
.filter-mehr[hidden] { display: none; }
.filter-wertsuche { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.6rem; font-size: 0.85rem; margin-bottom: 0.4rem; }
.filter-notiz { width: 100%; font-size: 0.72rem; color: #6b7078; margin-top: 0.4rem; }
.filter-gruppen { display: flex; flex-direction: column; padding: 0.9rem 1rem 1rem; border-bottom: 1px solid rgba(28, 30, 36, 0.08); }
.filter-gruppen-titel { font-weight: 700; font-size: 0.9rem; margin: 0 0.25rem 0.4rem; }
.filter-gruppen a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: 0.55rem; font-size: 0.875rem; color: #1c1e24; }
.filter-gruppen a span { color: #6b7078; font-size: 0.75rem; }
.filter-gruppen a:hover { background: #f7f7f6; }
.filter-gruppen a.is-active { background: #1c1e24; color: #fff; font-weight: 600; }
.filter-gruppen a.is-active span { color: rgba(255, 255, 255, 0.7); }
.filter-fuss { padding: 0.9rem 1.25rem; border-top: 1px solid rgba(28, 30, 36, 0.08); }
/* Wunschartikel (Eindruck, 21.10.2026): am Rechner unten in der Filterspalte,
   auf dem Handy unter der Liste — online steht nur ein Teil des Sortiments */
.filter-wunsch { padding: 0.95rem 1.25rem 1.05rem; border-top: 1px solid rgba(28, 30, 36, 0.08); background: rgba(138, 28, 36, 0.03); }
.sortiment-wunsch { margin-top: 2.5rem; padding: 1.1rem 1.25rem; border-radius: 1.1rem; border: 1px dashed rgba(138, 28, 36, 0.35); background: rgba(138, 28, 36, 0.03); }
.filter-wunsch-titel { font-weight: 700; font-size: 0.88rem; color: #1c1e24; }
.filter-wunsch-text { font-size: 0.78rem; line-height: 1.45; color: #6b7078; margin-top: 0.25rem; }
.filter-wunsch-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700; color: #8A1C24; }
.filter-wunsch-link i { font-size: 0.7rem; }
@media (max-width: 1023px) { .filter-wunsch { display: none; } }
@media (min-width: 1024px) { .sortiment-wunsch { display: none; } }
.filter-anzeigen { width: 100%; background: #8A1C24; color: #fff; font-weight: 600; padding: 0.85rem 1rem; border-radius: 9999px; }
.filter-hinweis { margin: 0.75rem 1.25rem; font-size: 0.8rem; color: #8A1C24; }

.sortiment-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.filter-oeffnen { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.15rem; border-radius: 9999px; background: #1c1e24; color: #fff; font-size: 0.875rem; font-weight: 600; }
@media (min-width: 1024px) { .filter-oeffnen { display: none; } }
.sortiment-suche { flex: 1 1 240px; display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 9999px; background: #fff; }
.sortiment-suche:focus-within { border-color: #1c1e24; box-shadow: 0 0 0 3px rgba(28, 30, 36, 0.08); }
.sortiment-suche i { color: #6b7078; font-size: 0.85rem; }
.sortiment-suche input { flex: 1; min-width: 0; padding: 0.72rem 0; font-size: 0.9rem; background: transparent; outline: none; }
.sortiment-anzahl { font-size: 0.875rem; color: #6b7078; }
.sortiment-anzahl strong { color: #1c1e24; }
.sortiment-sortierung { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: #6b7078; margin-left: auto; }
/* „Anzeigen" (Artikel je Seite) und „Sortierung" als Gruppe rechts — sie
   brechen nur gemeinsam um, keine bleibt allein in einer Zeile */
.sortiment-wahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-left: auto; }
.sortiment-wahlen .sortiment-sortierung { margin-left: 0; }
/* Handy: Filter und Trefferzahl in einer Zeile, darunter die Suche, darunter
   „Anzeigen" und „Sortierung" gleich breit nebeneinander (die Beschriftung
   bleibt für Screenreader) */
@media (max-width: 639px) {
  .sortiment-leiste .filter-oeffnen { order: -2; }
  .sortiment-leiste .sortiment-anzahl { order: -1; margin-left: auto; }
  .sortiment-leiste .sortiment-suche { flex-basis: 100%; }
  .sortiment-wahlen { flex: 1 1 100%; flex-wrap: nowrap; gap: 0.6rem; margin-left: 0; }
  .sortiment-wahlen .sortiment-sortierung { flex: 1 1 0; min-width: 0; }
  .sortiment-wahlen .sortiment-sortierung > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sortiment-wahlen select { width: 100%; }
}
.sortiment-sortierung select { padding: 0.55rem 0.9rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 9999px; font-size: 0.85rem; color: #1c1e24; background: #fff; }
.sortiment-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 1rem; }
.sortiment-chips[hidden] { display: none; }
.sortiment-chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.75rem; border-radius: 9999px; background: #f7f7f6; border: 1px solid rgba(28, 30, 36, 0.1); font-size: 0.8rem; font-weight: 600; }
.sortiment-chip:hover { border-color: #8A1C24; color: #8A1C24; }
.sortiment-chip i { font-size: 0.7rem; opacity: 0.6; }
.sortiment-chip-alle { font-size: 0.8rem; font-weight: 600; color: #8A1C24; text-decoration: underline; text-underline-offset: 3px; padding: 0.4rem 0.5rem; }
/* höchstens drei Artikel je Reihe (Wunsch von Eindruck, 21.10.2026) */
.sortiment-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .sortiment-raster { gap: 1rem; } }
@media (min-width: 768px) { .sortiment-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.sortiment-raster[aria-busy='true'] { opacity: 0.55; transition: opacity 0.2s ease; }
.sortiment-leer { padding: 2.5rem 1.5rem; text-align: center; background: #f7f7f6; border-radius: 1.25rem; }
.sortiment-leer[hidden] { display: none; }
.sortiment-mehr { display: flex; justify-content: center; margin-top: 1.75rem; }
.sortiment-mehr-knopf { padding: 0.85rem 1.5rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.15); font-weight: 600; font-size: 0.9rem; background: #fff; }
.sortiment-mehr-knopf:hover { border-color: #8A1C24; color: #8A1C24; }
.sortiment-mehr-knopf[hidden] { display: none; }
.seiten-nav[hidden] { display: none; }

/* Kachel: Bild, Name, Farben und Preis — ein Klick führt auf die Produktseite */
.kachel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(28, 30, 36, 0.08);
  border-radius: 1.1rem;
  padding: 0.75rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.kachel:hover { box-shadow: 0 18px 40px -22px rgba(28, 30, 36, 0.35); transform: translateY(-2px); border-color: rgba(28, 30, 36, 0.14); }
.kachel-link { display: flex; flex-direction: column; color: inherit; }
.kachel-link:focus-visible { outline: 2px solid #8A1C24; outline-offset: 4px; border-radius: 0.8rem; }
.kachel-bild { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 0.8rem; background: #fff; overflow: hidden; color: #6b7078; font-size: 1.75rem; }
.kachel-bild img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }
.kachel:hover .kachel-bild img { transform: scale(1.04); }
.kachel-linie { position: absolute; left: 0.5rem; top: 0.5rem; background: #1c1e24; color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 0.55rem; border-radius: 9999px; }
.kachel-gruppe { margin-top: 0.75rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8A1C24; }
.kachel-name { margin-top: 0.25rem; font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: #1c1e24; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kachel-link:hover .kachel-name { color: #8A1C24; }
.kachel-marke { margin-top: 0.2rem; font-size: 0.75rem; color: #6b7078; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kachel-farben { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.6rem; min-height: 1rem; }
.kachel-punkt { width: 0.9rem; height: 0.9rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.22); flex-shrink: 0; }
.kachel-mehr { font-size: 0.7rem; color: #6b7078; margin-left: 0.15rem; }
.kachel-fuss { margin-top: auto; padding-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.kachel-preis { display: flex; flex-direction: column; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem; color: #1c1e24; line-height: 1.15; }
.kachel-preiswort { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.7rem; color: #6b7078; margin-top: 0.15rem; }

/* fehlendes Produktbild (LAIMS liefert vereinzelt 404): Platzhalter statt Alt-Text (app.js) */
.bild-fehlt { display: grid; place-content: center; justify-items: center; gap: 0.35rem; width: 100%; height: 100%; min-height: 6rem; color: #a3a6ac; font-size: 0.7rem; text-align: center; }
.bild-fehlt i { font-size: 1.75rem; }

/* ── Preisrechner (/preisrechner: src/routes/preisrechner.ts, app.js) ── */
.rechner-raster { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .rechner-raster { grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem; align-items: start; }
}
.rechner-schritte { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.rechner-schritt { background: #fff; border: 1px solid rgba(28, 30, 36, 0.1); border-radius: 1.5rem; padding: 1.4rem; }
@media (min-width: 640px) { .rechner-schritt { padding: 2rem; } }
.rechner-schritt[hidden] { display: none; }
.rechner-schritt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.rechner-nr {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #1c1e24;
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.rechner-schritt-titel { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; }
.rechner-wechsel {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8A1C24;
  padding: 0.5rem 0.95rem;
  border-radius: 9999px;
  border: 1px solid rgba(138, 28, 36, 0.25);
  transition: background 0.2s ease;
}
.rechner-wechsel:hover { background: rgba(138, 28, 36, 0.06); }
.rechner-textil { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(28, 30, 36, 0.08); }
@media (min-width: 640px) { .rechner-textil { grid-template-columns: 170px minmax(0, 1fr); gap: 1.75rem; } }
.rechner-textil-bild { aspect-ratio: 4 / 5; border-radius: 1rem; background: #fff; border: 1px solid rgba(28, 30, 36, 0.08); display: grid; place-items: center; overflow: hidden; color: #a3a6ac; font-size: 2rem; }
.rechner-textil-bild img { width: 100%; height: 100%; object-fit: contain; }
.rechner-textil-name { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.2rem; line-height: 1.25; margin-top: 0.25rem; }
.rechner-textil-preis { margin: 0.6rem 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; }
.rechner-textil-preis > span:last-child { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.75rem; color: #6b7078; }
.rechner-feld { padding-top: 1.4rem; }
.rechner-feld + .rechner-feld { border-top: 1px solid rgba(28, 30, 36, 0.08); margin-top: 1.4rem; }
.rechner-feld-titel { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.7rem; }
.rechner-wahl { font-weight: 600; color: #8A1C24; }
.rechner-hilfe { font-size: 0.85rem; color: #6b7078; line-height: 1.5; }
.rechner-hilfe[hidden] { display: none; }
.rechner-farben { display: flex; flex-wrap: wrap; gap: 0.45rem; max-height: 16rem; overflow-y: auto; padding: 0.2rem; }
.rechner-farbe {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 9999px;
  padding: 3px;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.rechner-farbe:hover { transform: scale(1.07); }
.rechner-farbe[aria-checked='true'] { border-color: #8A1C24; }
.rechner-farbe:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
.rechner-farbe-kreis { display: block; width: 100%; height: 100%; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.22); }
.rechner-farbe-name { width: auto; height: auto; padding: 0.45rem 0.8rem; border: 1px solid rgba(28, 30, 36, 0.15); font-size: 0.8rem; font-weight: 600; }
.rechner-farbe-name:hover { transform: none; border-color: #1c1e24; }
.rechner-farbe-name[aria-checked='true'] { background: #1c1e24; color: #fff; border-color: #1c1e24; }
.rechner-groessen { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.5rem; margin-top: 0.9rem; }
.rechner-groesse { display: flex; flex-direction: column; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.8rem; overflow: hidden; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.rechner-groesse span { font-size: 0.75rem; font-weight: 700; text-align: center; padding: 0.35rem 0.25rem; background: #f7f7f6; border-bottom: 1px solid rgba(28, 30, 36, 0.08); transition: background 0.2s ease, color 0.2s ease; }
.rechner-groesse input { width: 100%; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.1rem; padding: 0.55rem 0.25rem; outline: none; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.rechner-groesse input::-webkit-outer-spin-button,
.rechner-groesse input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner-groesse:focus-within { border-color: #1c1e24; box-shadow: 0 0 0 3px rgba(28, 30, 36, 0.08); }
.rechner-groesse.is-belegt { border-color: #8A1C24; }
.rechner-groesse.is-belegt span { background: #8A1C24; color: #fff; }
.rechner-menge { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; padding: 0.9rem 1rem; background: #f7f7f6; border-radius: 1rem; }
.rechner-menge-label { font-weight: 700; font-size: 0.9rem; }
.rechner-stepper { display: inline-flex; align-items: center; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 9999px; background: #fff; overflow: hidden; }
.rechner-stepper button { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: #1c1e24; transition: background 0.2s ease, color 0.2s ease; }
.rechner-stepper button:hover:not(:disabled) { background: #8A1C24; color: #fff; }
.rechner-stepper button:disabled { opacity: 0.3; cursor: not-allowed; }
.rechner-stepper button:focus-visible { outline: 2px solid #8A1C24; outline-offset: -2px; }
.rechner-stepper input { width: 4.75rem; text-align: center; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem; outline: none; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.rechner-stepper input::-webkit-outer-spin-button,
.rechner-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner-menge.ist-summe .rechner-stepper input { color: #8A1C24; }
.rechner-techniken { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.rechner-technik {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(28, 30, 36, 0.12);
  border-radius: 1rem;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.rechner-technik:hover { border-color: #1c1e24; }
.rechner-technik[aria-checked='true'] { border-color: #8A1C24; box-shadow: inset 0 0 0 1px #8A1C24; background: rgba(138, 28, 36, 0.04); }
.rechner-technik:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
.rechner-technik-icon { color: #8A1C24; font-size: 1.1rem; margin-bottom: 0.35rem; }
.rechner-technik-titel { font-weight: 700; font-size: 0.95rem; }
.rechner-technik-info { font-size: 0.75rem; color: #6b7078; line-height: 1.4; }
.rechner-technik-marke { margin-top: 0.45rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A1C24; background: rgba(138, 28, 36, 0.08); padding: 0.2rem 0.55rem; border-radius: 9999px; }
.rechner-motive { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.rechner-motiv { border: 1px solid rgba(28, 30, 36, 0.12); border-radius: 1rem; padding: 1rem 1.1rem 1.1rem; background: #fcfcfb; }
.rechner-motiv-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.rechner-motiv-titel { font-weight: 700; font-size: 0.9rem; }
.rechner-motiv-weg { width: 2rem; height: 2rem; border-radius: 9999px; display: grid; place-items: center; color: #6b7078; }
.rechner-motiv-weg:hover { color: #8A1C24; background: rgba(138, 28, 36, 0.08); }
.rechner-motiv-felder { display: grid; gap: 0.9rem; }
@media (min-width: 640px) { .rechner-motiv-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.rechner-motiv-feld { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: #1c1e24; }
.rechner-auswahl,
.rechner-eingabe { width: 100%; padding: 0.65rem 0.85rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.7rem; background: #fff; font-size: 0.9rem; font-weight: 400; color: #1c1e24; }
.rechner-auswahl:focus,
.rechner-eingabe:focus { outline: none; border-color: #1c1e24; box-shadow: 0 0 0 3px rgba(28, 30, 36, 0.08); }
.rechner-eingabe-schmal { max-width: 8rem; }
.rechner-eingabe[hidden] { display: none; }
.rechner-klassen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rechner-klasse { display: flex; flex-direction: column; align-items: center; min-width: 4.8rem; padding: 0.45rem 0.7rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.7rem; background: #fff; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; }
.rechner-klasse:hover { border-color: #1c1e24; }
.rechner-klasse[aria-checked='true'] { background: #1c1e24; color: #fff; border-color: #1c1e24; }
.rechner-klasse:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
.rechner-klasse-key { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 0.95rem; }
.rechner-klasse-preis { font-size: 0.68rem; font-weight: 500; opacity: 0.75; margin-top: 0.1rem; white-space: nowrap; }
/* was „S", „M" … bedeuten — aus LAIMS (FB-2026-0035), sobald gepflegt */
.rechner-klasse-masse { font-size: 0.66rem; font-weight: 600; line-height: 1.2; text-align: center; margin-top: 0.1rem; }
/* Logo oder Motiv je Motiv (app.js, dateiFeld) */
.rechner-motiv-datei { margin-top: 0.9rem; }
.rechner-datei-knopf { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border-radius: 9999px; border: 1px dashed rgba(28, 30, 36, 0.3); background: #fff; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.rechner-datei-knopf:hover { border-color: #8A1C24; color: #8A1C24; }
.rechner-datei-knopf:focus-within { outline: 2px solid #8A1C24; outline-offset: 2px; }
.rechner-datei-knopf i { color: #8A1C24; }
.rechner-datei-status { font-size: 0.75rem; font-weight: 400; color: #6b7078; line-height: 1.4; overflow-wrap: anywhere; }
.rechner-datei-status.ist-fehler { color: #b91c1c; font-weight: 600; }
.rechner-datei-weg { align-self: flex-start; font-size: 0.75rem; font-weight: 600; color: #8A1C24; text-decoration: underline; text-underline-offset: 2px; padding: 0.35rem 0; }
.rechner-datei-weg[hidden] { display: none; }
.rechner-motiv-dazu { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 9999px; border: 1px dashed rgba(28, 30, 36, 0.3); font-size: 0.85rem; font-weight: 600; }
.rechner-motiv-dazu:hover { border-color: #8A1C24; color: #8A1C24; }
.rechner-motiv-dazu[hidden] { display: none; }

/* Kalkulation rechts */
.rechner-kasten { min-width: 0; }
@media (min-width: 1024px) { .rechner-kasten { position: sticky; top: 88px; } }
.rechner-kasten-innen { background: #1c1e24; color: #fff; border-radius: 1.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .rechner-kasten-innen { padding: 1.75rem; } }
.rechner-kasten-titel { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.25rem; margin-bottom: 1rem; }
.rechner-zeilen { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; }
.rechner-zeilen[hidden] { display: none; }
.rechner-zeilen > div { display: flex; justify-content: space-between; gap: 1rem; }
.rechner-zeilen > div[hidden] { display: none; }
.rechner-zeilen dt { color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.rechner-zeilen dd { text-align: right; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.rechner-preise { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rechner-offen { color: #f2b8be; font-weight: 500; }
.rechner-ergebnis { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.25rem 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rechner-ergebnis[hidden] { display: none; }
.rechner-ergebnis-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); }
.rechner-ergebnis-wert { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1.1; }
.rechner-ergebnis-gesamt { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.2; }
.rechner-ergebnis-wort { grid-column: 1 / -1; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); margin-top: 0.15rem; }
.ist-veraltet { opacity: 0.45; transition: opacity 0.2s ease; }
.rechner-status { margin-top: 1rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); line-height: 1.5; }
.rechner-status[hidden],
.rechner-fehler[hidden],
.rechner-hinweis[hidden],
.rechner-tipp[hidden],
.rechner-staffel[hidden] { display: none; }
.rechner-fehler { font-size: 0.875rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 0.8rem; padding: 0.75rem 0.9rem; }
.rechner-kasten .rechner-fehler { margin-top: 1rem; color: #fecaca; background: rgba(239, 68, 68, 0.12); border-color: rgba(248, 113, 113, 0.25); }
.rechner-hinweis { margin-top: 0.75rem; font-size: 0.78rem; color: #fde68a; line-height: 1.5; }
.rechner-tipp { margin-top: 0.75rem; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); border-radius: 0.8rem; padding: 0.7rem 0.85rem; line-height: 1.5; }
.rechner-tipp-knopf { display: inline-block; margin-top: 0.35rem; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.rechner-staffel { margin-top: 0.75rem; font-size: 0.8rem; }
.rechner-staffel summary { cursor: pointer; color: rgba(255, 255, 255, 0.75); font-weight: 600; }
.rechner-staffel summary:hover { color: #fff; }
.rechner-staffel table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; }
.rechner-staffel th,
.rechner-staffel td { text-align: left; padding: 0.35rem 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rechner-staffel th { color: rgba(255, 255, 255, 0.5); font-weight: 600; }
.rechner-staffel td:last-child,
.rechner-staffel th:last-child { text-align: right; }
.rechner-staffel tr.ist-aktuell td { color: #fff; font-weight: 700; }
.rechner-staffel td { color: rgba(255, 255, 255, 0.7); }
.rechner-notiz { margin-top: 1rem; font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); line-height: 1.5; }
.rechner-anfragen {
  width: 100%;
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #8A1C24;
  color: #fff;
  font-weight: 700;
  padding: 1rem 1.25rem;
  border-radius: 9999px;
  transition: background 0.2s ease;
}
.rechner-anfragen:hover:not(:disabled) { background: #a83540; }
.rechner-anfragen:disabled { opacity: 0.5; cursor: not-allowed; }
.rechner-anfragen:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rechner-anfragen + .rechner-notiz,
.rechner-anfragen + .rechner-notiz[hidden] + .rechner-notiz { margin-top: 0.6rem; }

/* Einstieg ohne gewählten Artikel */
.rechner-start { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .rechner-start { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rechner-start li { display: flex; gap: 1rem; padding: 1.25rem; border: 1px solid rgba(28, 30, 36, 0.1); border-radius: 1.25rem; background: #fff; }
/* Textil gleich im Rechner wählen (src/routes/preisrechner.ts, textilWaehlen) */
.rechner-wahl { margin-top: 2.5rem; padding: 1.4rem; border-radius: 1.5rem; background: #f7f7f6; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1024px) { .rechner-wahl { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; padding: 1.75rem 2rem; } .rechner-wahl-reiterleiste { grid-column: 1 / -1; } }
.rechner-wahl-frage { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.rechner-wahl-suche { display: flex; gap: 0.5rem; }
.rechner-wahl-suche label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0 0.95rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.15); background: #fff; color: #6b7078; }
.rechner-wahl-suche label:focus-within { border-color: #1c1e24; box-shadow: 0 0 0 3px rgba(28, 30, 36, 0.08); }
.rechner-wahl-suche input { flex: 1; min-width: 0; width: 100%; padding: 0.75rem 0; border: 0; background: transparent; font-size: 1rem; color: #1c1e24; outline: none; }
.rechner-wahl-suche button { padding: 0.75rem 1.2rem; border-radius: 9999px; background: #1c1e24; color: #fff; font-weight: 600; font-size: 0.9rem; transition: background 0.2s ease; }
.rechner-wahl-suche button:hover { background: #8A1C24; }
.rechner-wahl-reiterleiste { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rechner-wahl-reiter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.05rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.12); background: #fff; font-size: 0.875rem; font-weight: 600; color: #1c1e24; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.rechner-wahl-reiter span { font-weight: 400; color: #6b7078; }
.rechner-wahl-reiter:hover { border-color: #8A1C24; color: #8A1C24; }
.rechner-wahl-reiter.is-aktiv { background: #1c1e24; border-color: #1c1e24; color: #fff; }
.rechner-wahl-reiter.is-aktiv span { color: rgba(255, 255, 255, 0.65); }
.rechner-wahl-reiter:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
@media (max-width: 767px) {
  .rechner-wahl-reiterleiste { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.4rem; padding-inline: 1.4rem; scrollbar-width: none; }
  .rechner-wahl-reiterleiste::-webkit-scrollbar { display: none; }
  .rechner-wahl-reiter { flex: 0 0 auto; white-space: nowrap; }
}
.rechner-wahl-titel { margin: 2rem 0 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6b7078; }
.rechner-wahl-mehr { margin-top: 1.75rem; display: grid; gap: 0.5rem; font-size: 0.9rem; color: #6b7078; }
.rechner-wahl-mehr strong { color: #1c1e24; }
.rechner-start li.is-aktiv { border-color: #8A1C24; box-shadow: inset 0 0 0 1px #8A1C24; }
.rechner-start li.is-aktiv .rechner-nr { background: #8A1C24; }
.rechner-start-titel { font-weight: 700; margin-bottom: 0.2rem; }

/* Telefon-Leiste des Preisrechners */
.rechner-leiste { display: none; }
@media (max-width: 1023px) {
  .rechner-leiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: #1c1e24;
    color: #fff;
    box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, 0.45);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }
  .rechner-leiste.ist-sichtbar { transform: none; }
  .rechner-leiste[hidden] { display: none; }
}
.rechner-leiste-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); }
.rechner-leiste-preis { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.rechner-leiste-stueck { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.rechner-leiste-knopf { background: #8A1C24; color: #fff; font-weight: 700; font-size: 0.85rem; padding: 0.65rem 1.1rem; border-radius: 9999px; white-space: nowrap; }

/* ── Kategorien: Karten auf „Alle Artikel", Kopf der Warengruppe, Unterkategorien ── */
.kategorie-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .kategorie-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kategorie-karte { display: flex; flex-direction: column; background: #f7f7f6; border-radius: 1.5rem; padding: 1.1rem 1.25rem 1.15rem 1.1rem; transition: background 0.25s ease; }
.kategorie-karte:hover { background: #f1efec; }
.kategorie-karte-link { display: flex; align-items: center; gap: 1.1rem; color: inherit; }
.kategorie-karte-link:focus-visible { outline: 2px solid #8A1C24; outline-offset: 4px; border-radius: 1rem; }
.kategorie-karte-bild { width: 5.5rem; height: 5.5rem; flex-shrink: 0; border-radius: 9999px; background: #fff; display: grid; place-items: center; overflow: hidden; color: #8A1C24; font-size: 1.5rem; }
.kategorie-karte-bild img { width: 82%; height: 82%; object-fit: contain; transition: transform 0.5s ease; }
.kategorie-karte:hover .kategorie-karte-bild img { transform: scale(1.08) rotate(-3deg); }
.kategorie-karte-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kategorie-karte-titel { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; color: #1c1e24; }
.kategorie-karte-zahl { font-size: 0.8rem; color: #6b7078; margin-top: 0.1rem; }
.kategorie-karte-pfeil { width: 2.4rem; height: 2.4rem; border-radius: 9999px; background: #1c1e24; color: #fff; display: grid; place-items: center; font-size: 0.8rem; flex-shrink: 0; transition: background 0.2s ease, transform 0.25s ease; }
.kategorie-karte:hover .kategorie-karte-pfeil { background: #8A1C24; transform: translateX(3px); }
.kategorie-karte-unter { display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin: 0.6rem 0 0 6.6rem; font-size: 0.8rem; }
/* Innenabstand: auf dem Handy eine Tippfläche statt nur der Textzeile */
.kategorie-karte-unter a { color: #6b7078; font-weight: 500; padding: 0.3rem 0; }
@media (max-width: 380px) {
  .kategorie-karte-link { gap: 0.8rem; }
  .kategorie-karte-bild { width: 4.25rem; height: 4.25rem; }
  .kategorie-karte-titel { font-size: 1.15rem; }
  .kategorie-karte-unter { margin-left: 5.05rem; }
}
.kategorie-karte-unter a:hover { color: #8A1C24; text-decoration: underline; text-underline-offset: 3px; }

.kategorie-kopf { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .kategorie-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.kategorie-collage { position: relative; display: none; height: 17rem; }
@media (min-width: 1024px) { .kategorie-collage { display: block; } }
.kategorie-collage::before { content: ''; position: absolute; inset: 6% 10%; border-radius: 9999px; background: #f7f7f6; }
.kategorie-collage-bild { position: absolute; width: 36%; aspect-ratio: 4 / 5; background: #fff; border-radius: 1.25rem; box-shadow: 0 22px 40px -24px rgba(28, 30, 36, 0.35); display: grid; place-items: center; overflow: hidden; }
.kategorie-collage-bild img { width: 88%; height: 88%; object-fit: contain; }
.kategorie-collage-bild:nth-child(1) { left: 4%; top: 18%; transform: rotate(-6deg); }
.kategorie-collage-bild:nth-child(2) { left: 32%; top: 2%; z-index: 2; }
.kategorie-collage-bild:nth-child(3) { right: 4%; top: 20%; transform: rotate(6deg); }

.unterkategorien { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.unterkategorie { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 9999px; background: #fff; border: 1px solid rgba(28, 30, 36, 0.12); font-size: 0.85rem; font-weight: 600; color: #1c1e24; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.unterkategorie span { font-weight: 400; font-size: 0.75rem; color: #6b7078; }
.unterkategorie:hover { border-color: #8A1C24; color: #8A1C24; }
.unterkategorie.is-active { background: #8A1C24; border-color: #8A1C24; color: #fff; }
.unterkategorie.is-active span { color: rgba(255, 255, 255, 0.75); }

/* ── Mega-Menü „Textilien" (src/navigation.ts) ── */
.nav-mega { display: flex; align-items: center; gap: 0.1rem; align-self: stretch; }
.mega-pfeil { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 9999px; font-size: 0.6rem; color: #6b7078; transition: transform 0.25s ease, color 0.2s ease; }
.mega-pfeil:hover { color: #8A1C24; }
.mega-pfeil:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
.nav-mega:hover .mega-pfeil,
.nav-mega.is-offen .mega-pfeil { transform: rotate(180deg); color: #8A1C24; }
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: #fff;
  border-top: 1px solid rgba(28, 30, 36, 0.06);
  box-shadow: 0 30px 60px -30px rgba(28, 30, 36, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.nav-mega:hover .mega,
.nav-mega.is-offen .mega,
.mega:focus-within { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; }
/* die Menüleiste ist whitespace-nowrap — im Panel sollen Texte umbrechen */
.mega { white-space: normal; }
.mega-innen { max-width: 80rem; margin: 0 auto; padding: 2rem 1rem 2.25rem; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2.5rem; max-height: calc(100vh - 6.5rem); max-height: calc(100svh - 6.5rem); overflow-y: auto; overscroll-behavior: contain; }
.mega-links { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.mega-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.mega-gruppe-kopf { display: flex; align-items: center; gap: 0.85rem; color: #1c1e24; }
.mega-gruppe-bild { width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #f7f7f6; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; color: #8A1C24; }
.mega-gruppe-bild img { width: 80%; height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.mega-gruppe-titel { display: block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem; }
.mega-gruppe-zahl { display: block; font-size: 0.72rem; color: #6b7078; font-weight: 400; }
.mega-gruppe-kopf:hover .mega-gruppe-titel { color: #8A1C24; }
.mega-unter { margin-top: 0.7rem; padding-left: 4.35rem; display: flex; flex-direction: column; gap: 0.1rem; }
.mega-unter a { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; font-weight: 400; color: #1c1e24; padding: 0.2rem 0; }
.mega-unter a span { color: #a3a6ac; font-size: 0.72rem; }
.mega-unter a:hover { color: #8A1C24; }
.mega-seite { display: flex; flex-direction: column; gap: 0.6rem; border-left: 1px solid rgba(28, 30, 36, 0.08); padding-left: 2rem; }
.mega-alle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #1c1e24; color: #fff; border-radius: 1.1rem; padding: 1rem 1.15rem; font-weight: 700; transition: background 0.2s ease; }
.mega-alle:hover { background: #8A1C24; }
.mega-alle small,
.mega-rechner small { display: block; font-weight: 400; font-size: 0.72rem; opacity: 0.7; margin-top: 0.1rem; }
.mega-rechner { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.15rem; border-radius: 1.1rem; background: #f7f7f6; color: #1c1e24; font-weight: 700; transition: background 0.2s ease; }
.mega-rechner i { color: #8A1C24; }
.mega-rechner:hover { background: #f1efec; }
.mega-titel { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #6b7078; }
/* Hersteller quer unter den Warengruppen: Logo, bis es vorliegt der Name als Schriftzug */
.mega-hersteller { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 1.3rem; border-top: 1px solid rgba(28, 30, 36, 0.08); }
.mega-marken { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mega-marke { display: inline-flex; align-items: center; justify-content: center; height: 2.6rem; min-width: 6rem; padding: 0 0.9rem; border-radius: 0.8rem; background: #f7f7f6; border: 1px solid transparent; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; color: rgba(28, 30, 36, 0.72); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
/* multiply: Der weiße Grund der Logo-Dateien verschwindet auf dem grauen Feld (27.10.2026) */
.mega-marke img { max-height: 1.6rem; max-width: 6.5rem; object-fit: contain; filter: grayscale(1); opacity: 0.8; mix-blend-mode: multiply; transition: filter 0.2s ease, opacity 0.2s ease; }
.mega-marke:hover { border-color: #8A1C24; color: #8A1C24; background: #fff; }
.mega-marke:hover img { filter: none; opacity: 1; }
.mega-marke:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
/* Wunschartikel: online steht nur ein Teil des Sortiments */
.mega-wunsch { margin-top: 0.4rem; padding: 1rem 1.15rem; border-radius: 1.1rem; border: 1px dashed rgba(138, 28, 36, 0.35); background: rgba(138, 28, 36, 0.03); }
.mega-wunsch-titel { font-weight: 700; font-size: 0.9rem; color: #1c1e24; }
.mega-wunsch-text { font-size: 0.78rem; line-height: 1.45; color: #6b7078; margin-top: 0.3rem; }
.mega-wunsch-link { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem; font-size: 0.82rem; font-weight: 700; color: #8A1C24; }
.mega-wunsch-link i { font-size: 0.7rem; transition: transform 0.2s ease; }
.mega-wunsch-link:hover i { transform: translateX(3px); }
.mobil-textilien summary { list-style: none; cursor: pointer; }
.mobil-textilien summary::-webkit-details-marker { display: none; }
.mobil-textilien summary i { transition: transform 0.2s ease; }
.mobil-textilien[open] summary i { transform: rotate(180deg); }
.mobil-textilien-liste { padding: 0.35rem 0 0.9rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; border-bottom: 1px solid rgba(28, 30, 36, 0.05); }
.mobil-textilien-liste > li > a { display: block; padding: 0.55rem 0; }
.mobil-textilien-liste a span { color: #6b7078; font-weight: 400; font-size: 0.75rem; margin-left: 0.25rem; }
.mobil-textilien-unter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.1rem 0 0.35rem; font-size: 0.8rem; }
.mobil-textilien-unter a { color: #1c1e24; font-weight: 500; padding: 0.45rem 0.8rem; border: 1px solid rgba(28, 30, 36, 0.12); border-radius: 9999px; }
.mobil-textilien-liste > li.mobil-textilien-wunsch > a { margin-top: 0.4rem; padding: 0.7rem 0.85rem; border-radius: 0.9rem; border: 1px dashed rgba(138, 28, 36, 0.35); font-size: 0.82rem; font-weight: 400; line-height: 1.45; color: #6b7078; }
.mobil-textilien-liste .mobil-textilien-wunsch a span { display: block; margin: 0 0 0.15rem; color: #8A1C24; font-size: 0.85rem; }
.mobil-textilien-unter a:hover { border-color: #8A1C24; color: #8A1C24; }

/* ── Produktseite (src/routes/produkt.ts, produkt.js) ── */
.artikel-kopf { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .artikel-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } }
.artikel-buehne { position: relative; aspect-ratio: 1 / 1; border-radius: 2rem; background: #f7f7f6; overflow: hidden; display: grid; place-items: center; }
.artikel-buehne-kreis { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 9999px; background: #fff; }
.artikel-buehne img { position: relative; width: 80%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: opacity 0.2s ease; }
.artikel-buehne-leer { position: relative; color: #a3a6ac; font-size: 2.5rem; }
.artikel-linie { position: absolute; left: 1.1rem; top: 1.1rem; display: inline-flex; align-items: center; gap: 0.45rem; background: #1c1e24; color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45rem 0.8rem; border-radius: 9999px; }
.artikel-linie i { color: #d9737c; }
.artikel-linie:hover { background: #8A1C24; }
.artikel-linie:hover i { color: #fff; }
.artikel-bilder { display: flex; gap: 0.6rem; margin-top: 0.8rem; }
.artikel-bild-knopf { width: 4.5rem; height: 4.5rem; border-radius: 1rem; background: #f7f7f6; overflow: hidden; border: 1px solid transparent; transition: border-color 0.2s ease; }
.artikel-bild-knopf:hover,
.artikel-bild-knopf:focus-visible { border-color: #8A1C24; outline: none; }
.artikel-bild-knopf img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.artikel-kauf { min-width: 0; }
@media (min-width: 1024px) { .artikel-kauf { position: sticky; top: 90px; } }
.artikel-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #8A1C24; }
.artikel-titel { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(1.9rem, 3.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.02em; margin-top: 0.6rem; }
.artikel-marke { margin-top: 0.6rem; font-size: 0.9rem; color: #6b7078; }
.artikel-marke a { color: #1c1e24; font-weight: 600; }
.artikel-marke a:hover { color: #8A1C24; }
.artikel-geschwister { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-top: 1rem; font-size: 0.875rem; color: #1c1e24; background: rgba(138, 28, 36, 0.06); border-radius: 0.9rem; padding: 0.65rem 0.9rem; }
.artikel-geschwister i { color: #8A1C24; }
.artikel-geschwister a { font-weight: 700; color: #8A1C24; text-decoration: underline; text-underline-offset: 3px; }
.artikel-preis { margin-top: 1.5rem; padding: 1.25rem 1.35rem; border-radius: 1.4rem; background: #f7f7f6; }
.artikel-preis-wert { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2.2rem; line-height: 1; }
/* „ab" vor dem Artikelpreis (src/preise.ts, abVorPreis): kleiner als der
   Betrag, in Produktkopf, Leiste, Kachel und Rechner gleich */
.preis-ab { font-size: 0.7em; font-weight: 700; }
.artikel-preis-wort { font-size: 0.75rem; color: #6b7078; }
.artikel-preis-staffel { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.875rem; font-weight: 600; color: #1c1e24; }
.artikel-preis-staffel i { color: #8A1C24; }
.artikel-uvp { margin-top: 0.5rem; font-size: 0.8rem; color: #6b7078; }
.artikel-hinweis { margin-top: 0.6rem; font-size: 0.75rem; color: #6b7078; line-height: 1.5; }
.artikel-feld { margin-top: 1.5rem; }
.artikel-feld-titel { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.65rem; }
.artikel-farben { display: flex; flex-wrap: wrap; gap: 0.4rem; max-height: 14rem; overflow-y: auto; padding: 0.2rem; }
.artikel-farbe { width: 2.4rem; height: 2.4rem; border-radius: 9999px; padding: 3px; border: 2px solid transparent; transition: border-color 0.2s ease, transform 0.2s ease; }
.artikel-farbe:hover { transform: scale(1.07); }
.artikel-farbe[aria-checked='true'] { border-color: #8A1C24; }
.artikel-farbe:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
.artikel-farbe-kreis { display: block; width: 100%; height: 100%; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.22); }
.artikel-farbe-name { width: auto; height: auto; padding: 0.4rem 0.8rem; border: 1px solid rgba(28, 30, 36, 0.15); font-size: 0.8rem; font-weight: 600; }
.artikel-farbe-name:hover { transform: none; border-color: #1c1e24; }
.artikel-farbe-name[aria-checked='true'] { background: #1c1e24; color: #fff; border-color: #1c1e24; }
.artikel-groessen { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.artikel-groesse { min-width: 2.75rem; text-align: center; padding: 0.45rem 0.6rem; border-radius: 0.65rem; border: 1px solid rgba(28, 30, 36, 0.15); font-size: 0.8rem; font-weight: 600; background: #fff; transition: opacity 0.2s ease; }
.artikel-groesse.is-aus { opacity: 0.35; text-decoration: line-through; }
.artikel-aktionen { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.75rem; }
.artikel-cta { display: flex; align-items: center; justify-content: center; gap: 0.7rem; background: #8A1C24; color: #fff; font-weight: 700; padding: 1.05rem 1.5rem; border-radius: 9999px; transition: background 0.2s ease, transform 0.2s ease; }
.artikel-cta:hover { background: #a83540; }
.artikel-cta i:last-child { transition: transform 0.25s ease; }
.artikel-cta:hover i:last-child { transform: translateX(3px); }
.artikel-cta-zweit { display: flex; align-items: center; justify-content: center; padding: 0.9rem 1.5rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.15); font-weight: 600; font-size: 0.9rem; color: #1c1e24; }
.artikel-cta-zweit:hover { border-color: #8A1C24; color: #8A1C24; }
.artikel-vorteile { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 1.1rem; font-size: 0.8rem; color: #6b7078; }
.artikel-vorteile i { color: #8A1C24; margin-right: 0.35rem; }

/* Faktenband: wie das Kennzahlen-Band der Startseite */
.artikel-fakten { background: #1c1e24; color: #fff; }
.artikel-fakten-innen { max-width: 80rem; margin: 0 auto; padding: 2.25rem 1rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; }
@media (min-width: 1024px) { .artikel-fakten-innen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.artikel-fakt-wert { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.1; overflow-wrap: anywhere; }
.artikel-fakt-wert small { font-size: 0.55em; font-weight: 700; color: #d9737c; }
.artikel-fakt-label { margin-top: 0.35rem; font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); }

/* Veredelung mit den Werkstattfotos */
.artikel-verfahren { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .artikel-verfahren { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.artikel-verfahren-karte { display: flex; flex-direction: column; border-radius: 1.5rem; overflow: hidden; background: #fff; border: 1px solid rgba(28, 30, 36, 0.1); }
.artikel-verfahren-bild { aspect-ratio: 16 / 10; overflow: hidden; background: #1c1e24; }
.artikel-verfahren-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.artikel-verfahren-bild.ist-freisteller { background: #f7f7f6; }
.artikel-verfahren-bild.ist-freisteller img { object-fit: contain; padding: 0.75rem; }
.artikel-verfahren-karte:hover .artikel-verfahren-bild img { transform: scale(1.04); }
.artikel-verfahren-text { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.5rem 1.5rem; }
.artikel-verfahren-titel { display: flex; align-items: center; gap: 0.6rem; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.25rem; }
.artikel-verfahren-titel i { color: #8A1C24; font-size: 1rem; }
.artikel-verfahren-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: auto; padding-top: 1.1rem; }
.artikel-verfahren-rechner { display: inline-flex; align-items: center; gap: 0.5rem; background: #1c1e24; color: #fff; font-size: 0.8rem; font-weight: 700; padding: 0.6rem 1rem; border-radius: 9999px; transition: background 0.2s ease; }
.artikel-verfahren-rechner:hover { background: #8A1C24; }
.artikel-verfahren-mehr { font-size: 0.8rem; font-weight: 600; color: #8A1C24; }
.artikel-verfahren-mehr:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Merkmale und Datenblatt */
.artikel-merkmale { display: grid; gap: 0.55rem; }
@media (min-width: 640px) { .artikel-merkmale { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
.artikel-merkmale li { display: flex; gap: 0.6rem; font-size: 0.9rem; line-height: 1.45; color: #1c1e24; }
.artikel-merkmale i { color: #8A1C24; font-size: 0.75rem; margin-top: 0.3rem; }
.artikel-datenblatt { display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem; padding: 0.4rem 1.25rem; }
.artikel-datenblatt div { display: grid; grid-template-columns: minmax(7rem, 2fr) 5fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(28, 30, 36, 0.08); font-size: 0.875rem; }
.artikel-datenblatt div:last-child { border-bottom: 0; }
.artikel-datenblatt dt { color: #6b7078; }
.artikel-datenblatt dd { color: #1c1e24; overflow-wrap: anywhere; }

/* Telefon: Preisleiste */
.artikel-leiste { display: none; }
@media (max-width: 1023px) {
  .artikel-leiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: #1c1e24;
    color: #fff;
    box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, 0.45);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }
  .artikel-leiste.ist-sichtbar { transform: none; }
  .artikel-leiste[hidden] { display: none; }
}
.artikel-leiste-preis { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; }
.artikel-leiste-wort { display: block; font-size: 0.72rem; line-height: 1.3; color: rgba(255, 255, 255, 0.6); }
.artikel-leiste-knopf { display: inline-flex; align-items: center; gap: 0.5rem; background: #8A1C24; color: #fff; font-weight: 700; font-size: 0.85rem; padding: 0.65rem 1.1rem; border-radius: 9999px; white-space: nowrap; }

/* Telefon: unter den festen Preisleisten (Produktseite, Preisrechner) bleibt der Seitenfuß lesbar */
@media (max-width: 1023px) {
  body:has(.artikel-leiste:not([hidden])),
  body:has(.rechner-leiste:not([hidden])) { padding-bottom: 4.75rem; }
}

/* ── Anfrage mit mehreren Textilien (src/anfrage.ts, app.js) ── */
.anfrage-positionen { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.anfrage-position { background: #fff; border-radius: 0.75rem; padding: 0.7rem 0.85rem; }
.anfrage-position-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.anfrage-position-titel { font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: #1c1e24; }
.anfrage-position-weg { font-size: 0.75rem; color: #6b7078; text-decoration: underline; white-space: nowrap; }
.anfrage-position-weg:hover { color: #8A1C24; }
.anfrage-position-text { font-size: 0.75rem; line-height: 1.5; color: #6b7078; margin-top: 0.25rem; white-space: pre-line; }
.anfrage-weiteres {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px dashed rgba(138, 28, 36, 0.45);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8A1C24;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.anfrage-weiteres:hover { background: #fff; border-color: #8A1C24; }
.anfrage-weiteres[hidden] { display: none; }
.anfrage-zaehler {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  margin-left: 0.15rem;
  border-radius: 9999px;
  background: #fff;
  color: #8A1C24;
  font-size: 0.7rem;
  font-weight: 800;
}
.anfrage-zaehler[hidden] { display: none; }
.anfrage-pille {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.2rem;
  border-radius: 9999px;
  background: #8A1C24;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 12px 30px -10px rgba(28, 30, 36, 0.45);
  transition: background 0.2s ease;
}
.anfrage-pille:hover { background: #a3232d; }
.anfrage-pille[hidden] { display: none; }

/* ── DTF-Meterware: Meter-Rechner als Vorschau (src/routes/dtf.ts, public/static/dtf.js) ── */
.dtf-rechner { background: #fff; border-radius: 1.5rem; padding: 1.5rem; }
@media (min-width: 1024px) { .dtf-rechner { padding: 2.25rem; } }
.dtf-ohne-js { font-size: 0.9rem; color: #6b7078; }
.dtf-rechner.ist-bereit .dtf-ohne-js { display: none; }
.dtf-rechner:not(.ist-bereit) .dtf-reiter,
.dtf-rechner:not(.ist-bereit) .dtf-raster { display: none; }
.dtf-reiter { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: #f7f7f6; border-radius: 9999px; margin-bottom: 1.75rem; }
.dtf-reiter-knopf { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.15rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; color: #6b7078; transition: background 0.2s ease, color 0.2s ease; }
.dtf-reiter-knopf:hover { color: #1c1e24; }
.dtf-reiter-knopf.is-aktiv { background: #1c1e24; color: #fff; }
.dtf-reiter-knopf:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
/* Handy: beide Reiter nebeneinander, gleich breit */
@media (max-width: 639px) {
  .dtf-reiter { display: grid; grid-template-columns: 1fr 1fr; border-radius: 1rem; }
  .dtf-reiter-knopf { justify-content: center; text-align: center; padding: 0.7rem 0.5rem; font-size: 0.8rem; border-radius: 0.8rem; }
  .dtf-reiter-knopf i { display: none; }
}
/* minmax(0, 1fr): sonst gibt die Vorschau (Leinwand, anfangs 300 px breit)
   die Spaltenbreite vor, und der Rechner ragt auf dem Handy über den Rand */
.dtf-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
@media (min-width: 1024px) { .dtf-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.75rem; align-items: start; } }
.dtf-ablage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border: 1.5px dashed rgba(138, 28, 36, 0.4);
  border-radius: 1rem;
  font-size: 0.875rem;
  color: #6b7078;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.dtf-ablage:hover, .dtf-ablage:focus-within { border-color: #8A1C24; background: #fbf6f6; }
.dtf-ablage i { font-size: 1.5rem; color: #8A1C24; }
.dtf-ablage strong { color: #1c1e24; }
.dtf-ablage input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.dtf-motive { display: grid; gap: 0.6rem; margin-top: 1rem; }
.dtf-motiv {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem;
  border: 1px solid rgba(28, 30, 36, 0.08);
  border-radius: 0.9rem;
}
.dtf-motiv-bild {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  border-radius: 0.6rem;
  background-color: #fff;
  background-image: conic-gradient(#eceef0 25%, #fff 0 50%, #eceef0 0 75%, #fff 0);
  background-size: 12px 12px;
}
.dtf-motiv-name { font-size: 0.85rem; font-weight: 600; color: #1c1e24; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtf-motiv-mass { font-size: 0.75rem; color: #6b7078; margin-top: 0.1rem; }
.dtf-motiv label, .dtf-masse label { display: grid; gap: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7078; }
.dtf-motiv input, .dtf-masse input { width: 5.75rem; padding: 0.5rem 0.65rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.6rem; font-size: 0.9rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: #1c1e24; }
.dtf-motiv input:focus, .dtf-masse input:focus { outline: 2px solid #8A1C24; outline-offset: 1px; }
.dtf-motiv-weg { width: 2.25rem; height: 2.25rem; border-radius: 9999px; color: #6b7078; transition: color 0.2s ease, background 0.2s ease; }
.dtf-motiv-weg:hover { color: #8A1C24; background: #f7f7f6; }
@media (max-width: 639px) {
  .dtf-motiv { grid-template-columns: 3rem minmax(0, 1fr) auto; }
  .dtf-motiv-bild { width: 3rem; height: 3rem; }
  .dtf-motiv label { grid-row: 2; }
  .dtf-motiv label:first-of-type { grid-column: 1 / 3; }
}
.dtf-masse { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.dtf-hinweis { margin-top: 0.85rem; font-size: 0.8rem; color: #6b7078; }
.dtf-ergebnis { background: #1c1e24; color: #fff; border-radius: 1.25rem; padding: 1.5rem; }
@media (min-width: 1024px) { .dtf-ergebnis { position: sticky; top: 6rem; padding: 1.75rem; } }
.dtf-ergebnis-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.dtf-laenge { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 2.75rem; line-height: 1; margin-top: 0.6rem; }
.dtf-zusammenfassung { margin-top: 0.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); }
.dtf-vorschau-rahmen { margin-top: 1.25rem; max-height: 26rem; overflow-y: auto; padding: 0.5rem; border-radius: 0.75rem; background: #fff; }
.dtf-vorschau { display: block; margin: 0 auto; max-width: 100%; }
.dtf-fehler { margin-top: 0.85rem; font-size: 0.8rem; color: #ffb3b9; }
.dtf-anfragen {
  margin-top: 1.25rem;
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.5rem;
  border-radius: 9999px;
  background: #8A1C24;
  color: #fff;
  font-weight: 600;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.dtf-anfragen:hover:not(:disabled) { background: #a3232d; }
.dtf-anfragen:disabled { opacity: 0.45; cursor: not-allowed; }
.dtf-notiz { margin-top: 0.8rem; font-size: 0.72rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
.dtf-abrechnung { margin-top: 0.35rem; font-size: 0.8rem; color: #d9737c; }

/* ── Suche in der Kopfzeile (src/layout.ts, app.js) ── */
.kopf-suche-knopf {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  border: 1px solid rgba(28, 30, 36, 0.1);
  color: #1c1e24;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.kopf-suche-knopf:hover,
.kopf-suche-knopf[aria-expanded="true"] { border-color: #8A1C24; color: #8A1C24; }
.kopf-suche { border-top: 1px solid rgba(28, 30, 36, 0.06); background: #fff; }
.kopf-suche[hidden] { display: none; }
.kopf-suche-form { position: relative; display: flex; align-items: center; gap: 0.75rem; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.kopf-suche-feld { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.1rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 9999px; }
.kopf-suche-feld:focus-within { border-color: #8A1C24; box-shadow: 0 0 0 3px rgba(138, 28, 36, 0.12); }
.kopf-suche-feld i { color: #6b7078; }
.kopf-suche-feld input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; color: #1c1e24; }
/* das eigene Löschkreuz des Browsers neben unserem Schließen-Knopf wäre doppelt */
.kopf-suche-feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kopf-suche-los { padding: 0.7rem 1.3rem; border-radius: 9999px; background: #1c1e24; color: #fff; font-size: 0.875rem; font-weight: 600; transition: background 0.2s ease; }
.kopf-suche-los:hover { background: #8A1C24; }
.kopf-suche-zu { width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 9999px; color: #6b7078; }
.kopf-suche-zu:hover { color: #8A1C24; background: #f7f7f6; }
@media (max-width: 639px) { .kopf-suche-los { display: none; } }
.kopf-suche-treffer {
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: calc(100% - 0.4rem);
  z-index: 60;
  max-width: 46rem;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid rgba(28, 30, 36, 0.1);
  border-radius: 1rem;
  box-shadow: 0 18px 40px -18px rgba(28, 30, 36, 0.35);
}
.kopf-suche-treffer[hidden] { display: none; }
.kopf-suche-treffer a { display: block; padding: 0.6rem 0.85rem; border-radius: 0.7rem; }
.kopf-suche-treffer li.is-aktiv a,
.kopf-suche-treffer a:hover { background: #f7f7f6; }
.kopf-treffer-name { display: block; font-size: 0.9rem; font-weight: 600; color: #1c1e24; }
.kopf-treffer-zeile { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: #6b7078; }
.kopf-treffer-alle { font-size: 0.85rem; font-weight: 600; color: #8A1C24 !important; }

/* ── Rechner: Damen-, Herren- oder Kindermodell (src/routes/preisrechner.ts, app.js) ── */
.rechner-geschwister { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.6rem; font-size: 0.85rem; color: #6b7078; }
.rechner-geschwister i { color: #8A1C24; margin-right: 0.15rem; }
.rechner-geschwister a { color: #8A1C24; font-weight: 600; padding: 0.3rem 0; }
.rechner-geschwister a:hover { text-decoration: underline; }
.rechner-dazunehmen { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rechner-dazunehmen[hidden] { display: none; }
.rechner-dazunehmen-titel { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.6rem; }
.rechner-dazunehmen-knopf {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rechner-dazunehmen-knopf:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }

/* ── Cookie-Einstellungen (src/einwilligung.ts, app.js) ── */
/* ohne JavaScript lädt kein optionaler Dienst — dann gibt es nichts einzustellen */
.no-js .nur-mit-js { display: none; }
.cookie-dialog {
  width: min(36rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: #fff;
  color: #1c1e24;
  box-shadow: 0 30px 60px -20px rgba(28, 30, 36, 0.45);
}
.cookie-dialog::backdrop { background: rgba(28, 30, 36, 0.45); }
.cookie-innen { padding: 1.5rem; }
@media (min-width: 640px) { .cookie-innen { padding: 2rem; } }
.cookie-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.cookie-kopf h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; }
.cookie-zu { width: 2.5rem; height: 2.5rem; flex-shrink: 0; margin-right: -0.5rem; border-radius: 9999px; color: #6b7078; }
.cookie-zu:hover { color: #8A1C24; background: #f7f7f6; }
.cookie-text { font-size: 0.9rem; line-height: 1.6; color: #6b7078; }
.cookie-gruppe { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1px solid rgba(28, 30, 36, 0.1); border-radius: 0.9rem; }
.cookie-gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cookie-gruppe-kopf h3 { font-size: 0.95rem; font-weight: 600; }
.cookie-immer { font-size: 0.75rem; font-weight: 600; color: #15803d; white-space: nowrap; }
.cookie-gruppe-text { margin-top: 0.35rem; font-size: 0.82rem; line-height: 1.5; color: #6b7078; }
.cookie-gruppe ul { margin-top: 0.65rem; display: grid; gap: 0.5rem; font-size: 0.82rem; line-height: 1.5; color: #6b7078; }
.cookie-gruppe strong { color: #1c1e24; font-weight: 600; }
.cookie-gruppe li a,
.cookie-mehr a { color: #8A1C24; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-mehr { margin-top: 1rem; font-size: 0.82rem; color: #6b7078; }
/* Schalter je Kategorie */
.cookie-schalter {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 2.75rem;
  height: 1.6rem;
  border-radius: 9999px;
  background: rgba(28, 30, 36, 0.18);
  cursor: pointer;
  transition: background 0.2s ease;
}
.cookie-schalter::after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
.cookie-schalter:checked { background: #8A1C24; }
.cookie-schalter:checked::after { transform: translateX(1.15rem); }
.cookie-schalter:focus-visible { outline: 2px solid #8A1C24; outline-offset: 2px; }
/* „Alle akzeptieren" und „Nur notwendige" gleich gewichtet — Ablehnen ist so leicht wie Zustimmen */
.cookie-knoepfe { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie-knopf { flex: 1 1 auto; padding: 0.75rem 1.25rem; border: 1px solid #1c1e24; border-radius: 9999px; background: #1c1e24; color: #fff; font-size: 0.875rem; font-weight: 600; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.cookie-knopf:hover { background: #8A1C24; border-color: #8A1C24; }
.cookie-knopf.ist-zweitrangig { background: transparent; border-color: rgba(28, 30, 36, 0.2); color: #1c1e24; }
.cookie-knopf.ist-zweitrangig:hover { border-color: #8A1C24; color: #8A1C24; }
.cookie-hinweis {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(28, 30, 36, 0.1);
  border-radius: 1.1rem;
  box-shadow: 0 24px 50px -20px rgba(28, 30, 36, 0.45);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #6b7078;
}
.cookie-hinweis[hidden] { display: none; }
.cookie-hinweis strong { color: #1c1e24; }
.cookie-hinweis .cookie-knoepfe { margin-top: 0.9rem; }

/* ── Startseite: Der erste Bildschirm gehört dem Hero (src/index.tsx) ──
   Ab 1024 px füllt der Hero mit dem Laufband die Höhe unter Kopfzeile
   (2rem + 1px) und Navigation (4rem + 1px); „01 Empfehlung" beginnt erst
   darunter. Schmaler ist der Hero ohnehin höher als der Bildschirm. */
@media (min-width: 1024px) {
  .hero-voll {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 6rem - 2px);
    min-height: calc(100svh - 6rem - 2px);
  }
  .hero-buehne { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; }
}
/* Video im Startbild (src/index.tsx, app.js): gerahmt im Format 4:3 */
.hero-video { position: relative; aspect-ratio: 4 / 3; border-radius: 2rem; overflow: hidden; background: #1c1e24; box-shadow: 0 30px 60px -30px rgba(28, 30, 36, 0.55); }
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video-knopf { position: absolute; right: 0.9rem; bottom: 0.9rem; width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: grid; place-items: center; background: rgba(28, 30, 36, 0.55); color: #fff; font-size: 0.85rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.2s ease; }
.hero-video-knopf:hover { background: #8A1C24; }
.hero-video-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #8A1C24; }
.hero-video-knopf[hidden] { display: none; }

/* Sprungziel per Skript fokussiert (Weiter-Pfeil): kein Rahmen um den ganzen Bereich */
.sprungziel:focus { outline: none; }

/* ── Weiter-Pfeil im Hero (src/index.tsx, app.js) ──
   1024–1439 px waagrecht unter den Knöpfen, ab 1440 px senkrecht links außen
   neben dem Inhalt. Im Leerlauf fließt ein Ladebalken in den Pfeil, der dann
   aufleuchtet; beim Scrollen zeigt die Spur den Weg bis „01 Empfehlung"
   (--weiter, 0 bis 1, setzt app.js). Darunter: nicht nötig, dort scrollt
   man ohnehin. */
.weiter { display: none; }
@media (min-width: 1024px) {
  .weiter {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2.75rem;
    color: #6b7078;
    transition: color 0.3s ease;
  }
}
.weiter:hover { color: #1c1e24; }
.weiter:focus-visible { outline: none; }
.weiter-text { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; }
.weiter-spur { position: relative; display: block; width: 4.5rem; height: 2px; border-radius: 2px; background: rgba(28, 30, 36, 0.12); overflow: hidden; }
.weiter-fuellung { position: absolute; inset: 0; background: #8A1C24; transform-origin: left center; transform: scaleX(var(--weiter, 0)); }
.weiter-pfeil {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(28, 30, 36, 0.15);
  border-radius: 9999px;
  color: #1c1e24;
  font-size: 0.8rem;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.weiter:hover .weiter-pfeil,
.weiter.ist-bereit .weiter-pfeil { background: #8A1C24; border-color: #8A1C24; color: #fff; }
.weiter:hover .weiter-fuellung { transform: none; }
.weiter:focus-visible .weiter-pfeil { outline: 2px solid #8A1C24; outline-offset: 3px; }
@media (min-width: 1440px) {
  .weiter {
    position: absolute;
    left: max(0.75rem, calc((100% - 80rem) / 2 - 3.5rem));
    bottom: 2.5rem;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
  }
  .weiter-text { writing-mode: vertical-rl; transform: rotate(180deg); }
  .weiter-spur { width: 2px; height: 5.5rem; }
  .weiter-fuellung { transform-origin: center top; transform: scaleY(var(--weiter, 0)); }
}
/* Leerlauf (bis zum ersten Scrollen): Balken füllt sich und fließt in den
   Pfeil, der Pfeil leuchtet auf. Die Maus darauf hält es an. */
.weiter.ist-leerlauf .weiter-fuellung { transform: none; animation: weiter-fliessen-x 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.weiter.ist-leerlauf .weiter-pfeil { animation: weiter-leuchten 3.6s ease infinite; }
@media (min-width: 1440px) {
  .weiter.ist-leerlauf .weiter-fuellung { animation-name: weiter-fliessen-y; }
}
.weiter.ist-leerlauf:hover .weiter-fuellung,
.weiter.ist-leerlauf:hover .weiter-pfeil,
.weiter.ist-leerlauf:focus-visible .weiter-fuellung,
.weiter.ist-leerlauf:focus-visible .weiter-pfeil { animation: none; }
.weiter.ist-leerlauf:focus-visible .weiter-pfeil { background: #8A1C24; border-color: #8A1C24; color: #fff; }
@keyframes weiter-fliessen-x {
  0% { clip-path: inset(0 100% 0 0); }
  45% { clip-path: inset(0 0 0 0); }
  75%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes weiter-fliessen-y {
  0% { clip-path: inset(0 0 100% 0); }
  45% { clip-path: inset(0 0 0 0); }
  75%, 100% { clip-path: inset(100% 0 0 0); }
}
@keyframes weiter-leuchten {
  0%, 40% { background-color: transparent; border-color: rgba(28, 30, 36, 0.15); color: #1c1e24; box-shadow: 0 0 0 0 rgba(138, 28, 36, 0.45); }
  50% { background-color: #8A1C24; border-color: #8A1C24; color: #fff; box-shadow: 0 0 0 0 rgba(138, 28, 36, 0.45); }
  75% { background-color: #8A1C24; border-color: #8A1C24; color: #fff; box-shadow: 0 0 0 0.8rem rgba(138, 28, 36, 0); }
  90%, 100% { background-color: transparent; border-color: rgba(28, 30, 36, 0.15); color: #1c1e24; box-shadow: 0 0 0 0 rgba(138, 28, 36, 0); }
}
/* „Bewegung reduzieren": kein Leerlauf, die Spur steht voll bis zum Pfeil */
@media (prefers-reduced-motion: reduce) {
  .weiter.ist-leerlauf .weiter-fuellung,
  .weiter.ist-leerlauf .weiter-pfeil { animation: none; }
}

/* ── Handy (Prüfung vom 20.10.2026) ── */
/* Lange Wörter in großen Überschriften („Datenschutzerklärung",
   „Vereinsbekleidung") trennen statt über den Rand zu schieben — nur Wörter
   ab 12 Zeichen, damit kurze Überschriften bleiben, wie sie sind. „anywhere"
   statt „break-word": Nur so gibt die Überschrift in einem Raster nicht die
   Spaltenbreite vor; Trennstellen gehen vor */
@media (max-width: 639px) {
  h1, h2, h3 {
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}
/* iOS zoomt beim Antippen in jedes Feld unter 16 px und bleibt vergrößert */
@media (max-width: 1023px), (pointer: coarse) {
  .form-input,
  .rechner-auswahl,
  .rechner-eingabe,
  .sortiment-suche input,
  .sortiment-sortierung select,
  .filter-wertsuche,
  .dtf-motiv input,
  .dtf-masse input { font-size: 1rem; }
}
/* Fußzeile: Textlinks mit Tippfläche über die Zeilenhöhe hinaus (ändert das
   Layout nicht, Innenabstand an Inline-Elementen) */
#site-footer nav a,
#site-footer .border-t a,
#site-footer .border-t button { padding-block: 0.3rem; }
/* Datei-Feld: Den Status kürzt der Browser auf dem Handy zu „Keine D…gewählt"
   — die Liste darunter nennt die gewählten Dateien (app.js, zeigeDateien) */
@media (max-width: 639px) {
  .form-datei { color: transparent; }
}
/* „inkl. 19 % MwSt." nie mitten durchbrechen */
[data-preiswort] { white-space: nowrap; }
/* Netto/Brutto: auf Touch-Geräten größere Tippflächen */
@media (pointer: coarse) {
  .preis-modus-btn { padding: 0.55rem 1rem; font-size: 0.75rem; }
}

/* ── Wischreihen: Auf dem Handy stehen Kartengruppen nebeneinander zum
   Wischen statt untereinander (Startseite: Branchen, Empfehlung; Teamshops:
   Vorteile, Zielgruppen, Shopmodelle). Die nächste Karte schaut am Rand
   hervor; die Punkte darunter setzt app.js. Ab 768 px bleibt das Raster. ── */
@media (max-width: 767px) {
  .wischreihe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .wischreihe::-webkit-scrollbar { display: none; }
  .wischreihe > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  /* kein Einblenden: die hervorschauende Karte muss sofort zu sehen sein */
  .js .wischreihe > .reveal { opacity: 1; transform: none; }
}
.wisch-punkte { display: none; }
@media (max-width: 767px) {
  .wisch-punkte { display: flex; justify-content: center; margin-top: 0.6rem; }
  .wisch-punkt { width: 1.6rem; height: 1.6rem; display: grid; place-items: center; }
  .wisch-punkt::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 9999px; background: rgba(28, 30, 36, 0.2); transition: width 0.25s ease, background-color 0.25s ease; }
  .wisch-punkt.is-aktiv::before { width: 1.3rem; background: #8A1C24; }
}

/* ── Lieferbarkeit: Bestand beim Lieferanten (src/bestand.ts) ──
   Ein Hinweis, keine Sperre — auch Ausverkauftes lässt sich anfragen. */
.rechner-groesse .rechner-groesse-bestand,
.rechner-groesse.is-belegt .rechner-groesse-bestand { display: block; padding: 0 0.25rem 0.4rem; background: transparent; border: 0; font-size: 0.68rem; font-weight: 600; line-height: 1.2; color: #b45309; text-align: center; }
.rechner-groesse .rechner-groesse-bestand:empty { display: none; }
.rechner-groesse.ist-nicht-da { opacity: 0.5; }
.rechner-groesse.ist-nicht-da .rechner-groesse-bestand { color: #6b7078; }
.rechner-farbe.ist-ausverkauft,
.artikel-farbe.ist-ausverkauft { position: relative; }
.rechner-farbe.ist-ausverkauft .rechner-farbe-kreis,
.artikel-farbe.ist-ausverkauft .artikel-farbe-kreis { opacity: 0.45; }
/* Schrägstrich über dem Farbkreis */
.rechner-farbe.ist-ausverkauft:not(.rechner-farbe-name)::after,
.artikel-farbe.ist-ausverkauft:not(.artikel-farbe-name)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: rgba(28, 30, 36, 0.6);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.rechner-farbe-name.ist-ausverkauft,
.artikel-farbe-name.ist-ausverkauft { text-decoration: line-through; color: #6b7078; }
.artikel-groesse.ist-ausverkauft { border-style: dashed; color: #b45309; }
.bestand-hinweis { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.85rem; font-size: 0.82rem; line-height: 1.45; color: #15803d; }
.bestand-hinweis i { margin-top: 0.2rem; }
.bestand-hinweis span { color: #6b7078; }
.bestand-hinweis.ist-ausverkauft { color: #b45309; }
.rechner-bestand-stand { margin-top: 0.6rem; font-size: 0.75rem; }

/* ── Beispielshop zum Durchklicken (/teamshops, src/shopvorschau.ts, app.js) ──
   Ein Browserfenster mit dem Mustershop der erfundenen Firma „Musterwerk":
   Start, Kollektion, Artikel, Warenkorb, Kasse, Bestätigung. Eigene
   Akzentfarbe (Navy wie die Kollektion), damit er wie ein Kundenshop wirkt,
   nicht wie diese Seite. --sd-flaeche ist der Grund aller Produktfotos. */
.shop-demo { --sd-akzent: #1f2d4d; --sd-flaeche: #f1f0ee; display: flex; flex-direction: column; gap: 1rem; }
.shop-demo-fenster { border-radius: 1.5rem; border: 1px solid rgba(28, 30, 36, 0.1); background: #fff; box-shadow: 0 30px 60px -35px rgba(28, 30, 36, 0.45); overflow: hidden; container: sd-fenster / inline-size; }
.shop-demo-leiste { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; background: #f1efec; border-bottom: 1px solid rgba(28, 30, 36, 0.06); }
.shop-demo-leiste span { width: 0.65rem; height: 0.65rem; border-radius: 9999px; background: rgba(28, 30, 36, 0.18); flex-shrink: 0; }
.shop-demo-leiste p { margin-left: 0.75rem; flex: 1; min-width: 0; text-align: center; font-size: 0.75rem; color: #6b7078; background: #fff; border-radius: 9999px; padding: 0.25rem 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-demo-inhalt { padding: 1.1rem; min-height: 30rem; }
@media (min-width: 640px) { .shop-demo-inhalt { padding: 1.4rem 1.6rem; } }
[data-demo-ansicht][hidden] { display: none; }
.shop-demo button:focus-visible { outline: 2px solid var(--sd-akzent); outline-offset: 2px; }

/* Kopf des Mustershops */
.sd-kopf { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid rgba(28, 30, 36, 0.08); }
@media (min-width: 640px) { .sd-kopf { padding: 0.8rem 1.6rem; } }
.sd-logo { display: inline-flex; align-items: center; gap: 0.55rem; color: #1c1e24; }
.sd-logo svg { width: 1.9rem; height: auto; color: var(--sd-akzent); }
.sd-logo span { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 0.92rem; letter-spacing: 0.08em; line-height: 1; text-align: left; }
.sd-logo small { display: block; margin-top: 0.2rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6b7078; }
/* Abteilungen im Kopf, sobald das Fenster breit genug ist (nicht der Bildschirm) */
.sd-nav { display: none; gap: 1rem; margin-left: 0.5rem; }
@container sd-fenster (min-width: 720px) { .sd-nav { display: flex; } }
.sd-nav button { padding: 0.3rem 0; border-bottom: 2px solid transparent; font-size: 0.78rem; font-weight: 500; color: #1c1e24; }
.sd-nav button:hover { border-bottom-color: var(--sd-akzent); }
/* Budget des angemeldeten Mitarbeiters neben dem Warenkorb */
.sd-budget { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 9999px; background: #eef1f6; color: var(--sd-akzent); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.sd-budget i { font-size: 0.7rem; }
.sd-korb { position: relative; width: 2.2rem; height: 2.2rem; border-radius: 9999px; display: grid; place-items: center; color: #1c1e24; }
.sd-korb:hover { background: #f1efec; }
.sd-korb span { position: absolute; top: -0.15rem; right: -0.15rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 9999px; background: var(--sd-akzent); color: #fff; font-size: 0.65rem; font-weight: 700; display: grid; place-items: center; }
.sd-korb span[hidden] { display: none; }

/* Produktfoto mit Logo auf der Brust (.sd-ware). Die LAIMS-Packshots sind
   freigestellt auf Weiß; multipliziert verschmilzt das Weiß mit dem Grund.
   Die Box hat das Seitenverhältnis des Fotos (app.js setzt es nach dem
   Laden), damit das Logo auf der Brust sitzt, und den Grund als eigenen
   Hintergrund — so bleibt das Weiß auch beim Zoomen unsichtbar. Keine
   z-index-Ebenen: Die würden das Multiplizieren abschneiden (weiße Kästen). */
.sd-ware { position: relative; display: block; aspect-ratio: 7 / 9; max-width: 100%; background: var(--sd-flaeche); }
.sd-ware img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sd-aufdruck { position: absolute; left: 65%; top: 27%; width: 11%; transform: translate(-50%, -50%); color: #fff; opacity: 0.95; filter: drop-shadow(0 0.5px 0.4px rgba(0, 0, 0, 0.5)); pointer-events: none; }
.sd-aufdruck svg { display: block; width: 100%; height: auto; }
.sd-ware[data-sd-ton='hell'] .sd-aufdruck { color: var(--sd-akzent); filter: none; }
.sd-ware[data-sd-art='tshirt'] .sd-aufdruck { left: 64%; top: 26%; }
.sd-ware[data-sd-art='polo'] .sd-aufdruck { left: 66%; top: 28%; }
.sd-ware[data-sd-art='hoodie'] .sd-aufdruck { left: 65%; top: 33%; }
.sd-ware[data-sd-art='softshell'] .sd-aufdruck { left: 67%; top: 28%; }
.sd-ware[data-sd-art='sweat'] .sd-aufdruck { left: 64%; top: 28%; }
.sd-ware[data-sd-art='workwear'] .sd-aufdruck { left: 66%; top: 29%; }
.sd-ware:has(.bild-fehlt) .sd-aufdruck { display: none; }

/* Start: Banner mit einem Produkt und Bestseller */
.sd-hero { display: grid; align-items: center; padding: 1.4rem 1.4rem 0; border-radius: 1rem; background: linear-gradient(135deg, #f6f5f2 0%, #e8e5df 100%); overflow: hidden; }
@media (min-width: 640px) { .sd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0 0 0 2rem; } }
@media (min-width: 640px) { .sd-hero-text { padding: 1.6rem 0; } }
.sd-hero-zeile { margin-bottom: 0.55rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sd-akzent); }
.sd-hero-titel { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1.1; color: #1c1e24; outline: none; }
@media (min-width: 1024px) { .sd-hero-titel { font-size: 1.8rem; } }
.sd-hero-beschreibung { max-width: 18rem; margin: 0.6rem 0 1.1rem; font-size: 0.8rem; line-height: 1.45; color: #4b4f57; }
.sd-hero-buehne { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; height: 15rem; padding: 1rem 0 1.1rem; }
@media (min-width: 640px) { .sd-hero-buehne { height: 19rem; } }
.sd-hero-buehne::before { content: ''; position: absolute; inset: 3% 12% 15%; border-radius: 9999px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); }
/* Produkt mit Luft nach oben und unten, das Etikett darunter statt darauf */
.sd-hero-buehne .sd-ware { flex-shrink: 0; height: calc(100% - 2.4rem); background: none; }
.sd-hero-etikett { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem 0.3rem 0.3rem; border-radius: 9999px; background: #fff; box-shadow: 0 10px 24px -12px rgba(28, 30, 36, 0.4); font-size: 0.7rem; font-weight: 600; color: #1c1e24; white-space: nowrap; }
.sd-hero-etikett b { padding: 0.15rem 0.5rem; border-radius: 9999px; background: var(--sd-akzent); color: #fff; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sd-hero-buehne:hover .sd-hero-etikett { box-shadow: 0 0 0 2px var(--sd-akzent), 0 10px 24px -12px rgba(28, 30, 36, 0.4); }
.sd-zeilenkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 0.75rem; }
.sd-ueberschrift { font-weight: 700; font-size: 0.88rem; color: #1c1e24; }
.sd-textlink { font-size: 0.76rem; font-weight: 600; color: var(--sd-akzent); text-decoration: underline; text-underline-offset: 3px; }
.sd-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: 0.6rem; background: var(--sd-akzent); color: #fff; font-weight: 600; font-size: 0.8rem; transition: filter 0.2s ease; }
.sd-knopf:hover { filter: brightness(1.18); }
.sd-knopf i { font-size: 0.7rem; }
.sd-knopf-dunkel { background: #1c1e24; }
.sd-knopf-breit { width: 100%; margin-top: 0.6rem; }

/* Produktkarten */
.sd-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .sd-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-karte { position: relative; }
.sd-karte[hidden] { display: none; }
.sd-karte-link { display: flex; flex-direction: column; gap: 0.1rem; width: 100%; text-align: left; }
.sd-karte-bild { display: grid; place-items: center; aspect-ratio: 4 / 5; margin-bottom: 0.55rem; border-radius: 0.75rem; background: var(--sd-flaeche); overflow: hidden; }
.sd-karte-bild .sd-ware { height: 88%; transition: transform 0.4s ease; }
.sd-karte-link:hover .sd-karte-bild .sd-ware { transform: scale(1.04); }
.sd-karte-name { font-size: 0.78rem; font-weight: 600; color: #1c1e24; }
.sd-karte-preis { font-size: 0.74rem; color: #4b4f57; }
.sd-karte-farben { display: flex; gap: 0.25rem; margin-top: 0.35rem; }
.sd-karte-farben span { width: 0.6rem; height: 0.6rem; border-radius: 9999px; box-shadow: inset 0 0 0 1px rgba(28, 30, 36, 0.18); }
.sd-merken { position: absolute; top: 0.45rem; right: 0.45rem; width: 1.9rem; height: 1.9rem; border-radius: 9999px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: #1c1e24; font-size: 0.78rem; }
.sd-merken[aria-pressed='true'] { color: #be123c; }

/* Kollektion */
.sd-titel { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.2; color: #1c1e24; outline: none; }
.sd-filter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1rem; }
.sd-filter button { padding: 0.4rem 0.85rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.15); background: #fff; font-size: 0.74rem; font-weight: 600; color: #1c1e24; }
.sd-filter button[aria-pressed='true'] { background: #1c1e24; border-color: #1c1e24; color: #fff; }

/* Artikel */
.sd-pfad { margin-bottom: 0.8rem; font-size: 0.72rem; color: #6b7078; }
.sd-pfad button { color: #6b7078; text-decoration: underline; text-underline-offset: 2px; }
.sd-artikel { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .sd-artikel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.sd-galerie-bild { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 0.9rem; background: var(--sd-flaeche); overflow: hidden; }
.sd-galerie-bild .sd-ware { height: 90%; }
.sd-daumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.5rem; }
.sd-daumen-bild { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 0.55rem; border: 2px solid transparent; background: var(--sd-flaeche); overflow: hidden; }
.sd-daumen-bild .sd-ware { height: 88%; }
.sd-daumen-bild[aria-pressed='true'] { border-color: #1c1e24; }
.sd-marke { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7078; }
.sd-preis { margin-top: 0.35rem; font-size: 1.15rem; font-weight: 700; color: #1c1e24; }
.sd-klein { font-size: 0.7rem; color: #6b7078; }
.sd-label { margin: 0.85rem 0 0.4rem; font-size: 0.72rem; font-weight: 600; color: #1c1e24; }
.sd-label span { font-weight: 400; color: #6b7078; }
.sd-farben,
.sd-groessen { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sd-farbe { width: 1.6rem; height: 1.6rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.2); }
.sd-farbe[aria-pressed='true'] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1c1e24; }
.sd-groessen button { min-width: 2.5rem; padding: 0.4rem 0.55rem; border-radius: 0.5rem; border: 1px solid rgba(28, 30, 36, 0.15); background: #fff; font-size: 0.74rem; font-weight: 600; }
.sd-groessen button[aria-pressed='true'] { background: #1c1e24; border-color: #1c1e24; color: #fff; }
.sd-kaufen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.sd-menge { display: inline-flex; align-items: center; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.6rem; }
.sd-menge button { width: 2.1rem; height: 2.4rem; font-size: 1rem; color: #1c1e24; }
.sd-menge span { min-width: 1.6rem; text-align: center; font-size: 0.82rem; font-weight: 600; }
.sd-menge-klein button { width: 1.7rem; height: 1.8rem; font-size: 0.9rem; }
.sd-details { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.9rem; font-size: 0.72rem; color: #4b4f57; }
.sd-details i { color: var(--sd-akzent); }

/* Warenkorb und Kasse */
.sd-korb-raster { display: grid; gap: 1.25rem; margin-top: 1rem; }
@media (min-width: 640px) { .sd-korb-raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } }
.sd-positionen { display: flex; flex-direction: column; gap: 0.6rem; }
.sd-position { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.7rem; padding: 0.6rem; border-radius: 0.8rem; border: 1px solid rgba(28, 30, 36, 0.08); }
.sd-position-bild { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 0.6rem; background: var(--sd-flaeche); overflow: hidden; }
.sd-position-bild .sd-ware { height: 88%; }
.sd-position-name { font-size: 0.8rem; font-weight: 600; }
.sd-position-text .sd-menge { margin-top: 0.35rem; }
.sd-position-preis { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.sd-position-weg { width: 1.8rem; height: 1.8rem; border-radius: 9999px; display: grid; place-items: center; color: #6b7078; }
.sd-position-weg:hover { background: #f1efec; color: #1c1e24; }
.sd-leer { padding: 1rem 0; font-size: 0.8rem; color: #6b7078; }
.sd-summe { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem; border-radius: 0.9rem; background: #f7f7f6; }
.sd-summe > p { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.78rem; color: #4b4f57; }
.sd-summe > p[hidden] { display: none; }
.sd-summe > p.sd-hinweis { display: block; margin-top: -0.15rem; font-size: 0.68rem; line-height: 1.4; color: #6b7078; }
.sd-summe > p small { font-size: 0.68rem; font-weight: 400; color: #6b7078; }
.sd-summe > p.sd-klein { display: block; text-align: center; }
.sd-summe > p.sd-gesamt { padding-top: 0.5rem; border-top: 1px solid rgba(28, 30, 36, 0.1); font-size: 0.9rem; font-weight: 700; color: #1c1e24; }
.sd-gesamt small { font-size: 0.68rem; font-weight: 400; color: #6b7078; }
.sd-kasse .sd-label:first-child { margin-top: 0; }
.sd-kasten { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.8rem; border-radius: 0.6rem; border: 1px solid rgba(28, 30, 36, 0.12); font-size: 0.78rem; color: #1c1e24; }
.sd-kasten i { color: var(--sd-akzent); }
.sd-zahlung { display: grid; gap: 0.4rem; }
.sd-zahlung button { display: flex; align-items: center; gap: 0.55rem; padding: 0.65rem 0.8rem; border-radius: 0.6rem; border: 1px solid rgba(28, 30, 36, 0.12); background: #fff; font-size: 0.78rem; text-align: left; }
.sd-zahlung button[aria-checked='true'] { border-color: var(--sd-akzent); box-shadow: inset 0 0 0 1px var(--sd-akzent); }
.sd-zahlung i { width: 1rem; color: var(--sd-akzent); }

/* Bestätigung */
.sd-fertig { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 1rem; text-align: center; }
.sd-fertig > p:not(.sd-klein) { max-width: 26rem; font-size: 0.82rem; line-height: 1.5; color: #4b4f57; }
.sd-haken { width: 3.4rem; height: 3.4rem; margin-bottom: 0.5rem; border-radius: 9999px; display: grid; place-items: center; background: var(--sd-akzent); color: #fff; font-size: 1.2rem; }
.sd-fertig .sd-knopf { margin-top: 0.75rem; }

/* Schrittleiste unter dem Fenster */
.shop-demo-schritte { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.shop-demo-schritte button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; border-radius: 9999px; border: 1px solid rgba(28, 30, 36, 0.12); background: #fff; font-size: 0.82rem; font-weight: 600; color: #6b7078; }
.shop-demo-schritte button span { width: 1.6rem; height: 1.6rem; border-radius: 9999px; display: grid; place-items: center; background: #f1efec; color: #1c1e24; font-size: 0.75rem; font-weight: 700; }
.shop-demo-schritte button[aria-current='step'] { border-color: #1c1e24; color: #1c1e24; }
.shop-demo-schritte button[aria-current='step'] span { background: #8A1C24; color: #fff; }
.shop-demo-fuss { font-size: 0.75rem; line-height: 1.45; color: #6b7078; }
.no-js .shop-demo-schritte { display: none; }

/* Mitarbeitershop: Budget im Banner, Freigabe je Abteilung, Kostenstelle
   im Warenkorb, Guthaben an der Kasse */
.sd-budget-karte { max-width: 17rem; margin: 0 0 1.1rem; padding: 0.7rem 0.85rem 0.6rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.85); box-shadow: 0 6px 18px -12px rgba(28, 30, 36, 0.35); }
.sd-budget-karte p { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.72rem; color: #4b4f57; }
.sd-budget-karte strong { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.05rem; color: #1c1e24; }
.sd-budget-karte .sd-budget-von { display: block; font-size: 0.66rem; color: #6b7078; }
.sd-budget-balken { display: block; height: 0.35rem; margin: 0.45rem 0 0.35rem; border-radius: 9999px; background: rgba(28, 30, 36, 0.1); overflow: hidden; }
.sd-budget-balken span { display: block; height: 100%; border-radius: inherit; background: var(--sd-akzent); transition: width 0.4s ease; }
.sd-freigabe { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.72rem; font-weight: 600; color: var(--sd-akzent); }
.sd-feld { display: grid; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: #1c1e24; }
.sd-feld select { width: 100%; padding: 0.5rem 0.6rem; border: 1px solid rgba(28, 30, 36, 0.15); border-radius: 0.55rem; background: #fff; font-size: 0.78rem; font-weight: 500; color: #1c1e24; }
@media (pointer: coarse) { .sd-feld select { font-size: 1rem; } }
.sd-guthaben { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0.8rem; border-radius: 0.6rem; border: 1px solid var(--sd-akzent); box-shadow: inset 0 0 0 1px var(--sd-akzent); font-size: 0.78rem; color: #1c1e24; cursor: pointer; }
.sd-guthaben input { width: 1rem; height: 1rem; margin-top: 0.1rem; flex-shrink: 0; accent-color: var(--sd-akzent); }
.sd-guthaben small { display: block; font-size: 0.7rem; color: #6b7078; }

/* Drei Vorteile unter dem Beispielshop (wie im Instagram-Beispiel) */
.shop-vorteile { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 768px) { .shop-vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.shop-vorteil { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.5rem 1.5rem; text-align: center; }
@media (min-width: 768px) { .shop-vorteil + .shop-vorteil { border-left: 1px solid rgba(28, 30, 36, 0.1); } }
.shop-vorteil-symbol { width: 3.5rem; height: 3.5rem; border-radius: 9999px; display: grid; place-items: center; background: #f1efec; color: #8A1C24; font-size: 1.2rem; }
.shop-vorteil p { font-weight: 600; line-height: 1.35; color: #1c1e24; }

/* Rechenbeispiel „Eure Einnahmen" (/teamshops): Umsatz, Provision, Shopkosten, Gutschrift */
.rechenbeispiel { display: flex; flex-direction: column; }
.rechenbeispiel > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.rechenbeispiel dt { font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.rechenbeispiel dt span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-left: 0.25rem; }
.rechenbeispiel dd { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechenbeispiel > div.rechenbeispiel-ergebnis { border-bottom: 0; padding-top: 1rem; }
.rechenbeispiel-ergebnis dt { font-weight: 700; color: #fff; }
.rechenbeispiel-ergebnis dd { font-size: 2.25rem; font-weight: 900; color: #d9737c; }

/* ── Handy-Feinschliff (Prüfung vom 21.10.2026) ──
   Auf dem Handy rutschten Desktop-Raster untereinander, die Startseite war 20
   Bildschirme lang. Für Endkunden zählt: was wir machen, Preis berechnen,
   anfragen oder anrufen, das Textil finden. Deshalb weniger Luft zwischen
   den Abschnitten, engere Abschnittsköpfe, zweifarbige Überschriften ohne
   dünne Umrissschrift und Nebensächliches (Branchen, Beispiele, Hersteller,
   Schritte) zum Wischen statt als lange Liste. */
@media (max-width: 767px) {
  main section.py-16,
  main section.py-20 { padding-block: 2.75rem; }
  .section-head { margin-bottom: 0.9rem; }
  /* Kopf eines Abschnitts (Überschrift + Einleitung) */
  .grid:has(> .section-title) { gap: 1rem; margin-bottom: 1.75rem; }
  .text-outline { color: #8A1C24; -webkit-text-stroke: 0; }
  /* Unterseiten: weniger Luft über dem ersten Abschnitt und unter der Brotkrumen-Navigation */
  main > section:first-child:not(#hero-section) { padding-top: 1.5rem; }
  main section.pb-16 { padding-bottom: 2.75rem; }
  main nav[aria-label="Breadcrumb"] { margin-bottom: 1.25rem; }
  /* Teamshops: drei Vorteile unter dem Mustershop nebeneinander */
  .shop-vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 2rem; }
  .shop-vorteil { padding: 0.25rem; gap: 0.5rem; }
  .shop-vorteil-symbol { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  .shop-vorteil p { font-size: 0.78rem; }
  /* schmale Wischreihe: zwei Kacheln und ein Stück der dritten */
  .wischreihe-schmal > * { flex-basis: 44%; }
  /* Raster zum Wischen in zwei Zeilen (Hersteller) */
  .wisch-raster { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: 42%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; margin-inline: -1rem; padding-inline: 1rem; overscroll-behavior-x: contain; scrollbar-width: none; }
  .wisch-raster::-webkit-scrollbar { display: none; }
  .wisch-raster > * { scroll-snap-align: start; }
  /* Warengruppen in „Alle Artikel": kompaktes 2er-Raster statt sechs großer Karten */
  .kategorie-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .kategorie-karte { padding: 0.7rem 0.8rem; border-radius: 1.1rem; }
  .kategorie-karte-link { gap: 0.65rem; }
  .kategorie-karte-bild { width: 3.25rem; height: 3.25rem; }
  .kategorie-karte-titel { font-size: 1rem; }
  .kategorie-karte-zahl { font-size: 0.72rem; }
  .kategorie-karte-pfeil,
  .kategorie-karte-unter { display: none; }
  /* Preisrechner ohne Textil: die drei Schritte als kleine Leiste, damit die
     Textilwahl gleich auf dem ersten Bildschirm beginnt */
  .rechner-start { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 1.25rem; }
  .rechner-start li { flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.65rem; border-radius: 0.9rem; }
  .rechner-start .rechner-nr { width: 1.6rem; height: 1.6rem; font-size: 0.7rem; }
  .rechner-start-titel { font-size: 0.78rem; line-height: 1.25; margin-bottom: 0; }
  .rechner-start .rechner-hilfe { display: none; }
}
@media (max-width: 639px) {
  /* Techniken: eine Zeile Knöpfe zum Wischen statt 2 × 2 großer Kacheln */
  .technik-reiter { display: flex; gap: 0.5rem; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
  .technik-reiter::-webkit-scrollbar { display: none; }
  .technik-reiter .tech-tab { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 9999px; }
  .technik-reiter .tech-tab:hover { transform: none; }
  .technik-reiter .tech-tab-num { display: none; }
  .technik-reiter .tech-tab-icon { font-size: 0.85rem; }
  .technik-reiter .tech-tab-titel { margin-top: 0; font-size: 0.9rem; white-space: nowrap; }
  /* Branchen: zwei Zeilen Schlagwörter zum Wischen statt 17 Zeilen Liste */
  ul.branchen-liste { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 0.5rem; columns: auto; overflow-x: auto; margin-inline: -1.5rem; padding-inline: 1.5rem; scrollbar-width: none; }
  ul.branchen-liste::-webkit-scrollbar { display: none; }
  .branchen-liste a,
  .branchen-liste li > span { padding: 0.45rem 0.85rem; border-radius: 9999px; background: #fff; border: 1px solid rgba(28, 30, 36, 0.1); white-space: nowrap; }
  /* Preisfaktoren: kleine Nummer statt eigener breiter Spalte */
  .price-step { gap: 0.9rem; padding: 1rem 0; }
  .price-step-num { min-width: 1.75rem; font-size: 1rem; }
}