/* Ergaenzungen fuer die ausgelieferte Seite: Zustaende, die im Entwurf die
 * Laufzeit uebernommen hat, und zwei Korrekturen fuer den Betrieb ohne sie. */

[hidden] { display: none !important; }

/* Filterberater: alle Schritte liegen im HTML, sichtbar ist einer. */
[data-quiz-state] { display: none; }
[data-quiz-state].is-active { display: block; }

/* Kein Scrollen hinter Schublade und mobilem Menue. */
body.ws-locked { overflow: hidden; }

/* Die Bild-Kennungen aus dem Entwurf gehoeren nicht auf die Seite. */
.ws-img__brief,
.ws-img__id { display: none !important; }

/* Bildflaechen ohne Motiv sollen nicht als leere Kaesten stehen bleiben. */
.ws-img { background-color: var(--mist); }

/* Sichtbarer Fokus ueberall — die Entwurfsvorlage setzt ihn nicht auf allen
 * Elementen, die hier klickbar sind. */
.ws :focus-visible,
[data-thumb]:focus-visible,
[data-quiz]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Miniaturen in der Produktgalerie sind Bedienelemente. */
[data-thumb] { cursor: pointer; }

/* Lange Produktnamen sprengten auf schmalen Schirmen die Zeilen-Karten:
 * Flex-Kinder duerfen ohne min-width:0 nicht unter ihre Inhaltsbreite. */
.ws-cols > *,
.ws-pgrid > *,
.ws-split > *,
.ws-tstrip > *,
.ws-pcard--row .ws-pcard__info,
.ws-line > div { min-width: 0; }
.ws-pcard__title,
.ws-line__title,
.ws-line__meta { overflow-wrap: break-word; }

/* Navigationsbeschriftungen im Mega-Menue sind keine Ueberschriften mehr;
 * die Fussbereichsspalten liegen jetzt korrekt auf Ebene 2. */
.ws-mega__col .ws-mega__label,
.ws-footer h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.ws-mega__col .ws-mega__label { color: var(--graphite); }
.ws-footer h2 { color: var(--on-deep-muted); }

/* Nur fuer Screenreader. */
.ws-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* .ws-stack staffelt seine Kinder ueber margin-top. Bei Links, die nur eine
 * Textklasse tragen, greift das nicht: sie sind inline und landen in einer
 * Zeile — im Entwurf klebt dadurch "0800 / 70 88 007" an der E-Mail-Adresse. */
.ws-stack > a.ws-h2,
.ws-stack > a.ws-h3,
.ws-stack > a.ws-body-lg,
.ws-stack > a.ws-body,
.ws-stack > a.ws-small {
  display: block;
  width: fit-content;
}

/* Galerie-Miniaturen sind echte Schalter geworden — Browser-Grundstil weg. */
.ws-gallery__thumbs .ws-thumb {
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* --- Korrekturen am Entwurf, die erst im Betrieb sichtbar werden ------ */

/* Zeilen-Produktkarten: Bild, Text und Knopf liegen als Flex-Geschwister
 * nebeneinander. Unter ~900px bleibt fuer den Text zu wenig uebrig und der
 * Titel bricht bis auf einen Buchstaben je Zeile herunter. */
@media (max-width: 900px) {
  .ws-pcard--row { flex-wrap: wrap; }
  .ws-pcard--row .ws-pcard__info { flex: 1 1 150px; }
  .ws-pcard--row > .ws-btn { flex: 1 0 100%; }
}

/* Die Optionsraster tragen im Entwurf feste Spaltenzahlen als Inline-Stil.
 * Auf schmalen Schirmen laeuft die dritte Kachel aus dem Bild. */
@media (max-width: 767px) {
  .ws-options { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}

/* Die feste Kaufleiste auf Produktseiten verdeckt sonst das Seitenende. */
@media (max-width: 767px) {
  .ws-page:has(.ws-buybar-fixed) { padding-bottom: 88px; }
}

/* Dateiauswahl: das Eingabefeld ist unsichtbar, der Fokus muss am Label
 * erkennbar sein. */
.ws-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.ws-upload:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Produkte ohne Galerie (Zubehoer) haben keine Miniaturen — die leere
 * Leiste soll dann auch keinen Platz beanspruchen. */
.ws-gallery__thumbs:not(:has(*)) { display: none; }

/* Das Mega-Menue oeffnet im Entwurf bei Tastaturfokus auf "Shop" und schloss
 * beim naechsten Tab sofort wieder — seine Links stehen in der Reihenfolge
 * hinter allen anderen Navigationspunkten und waren so nie erreichbar. Es
 * bleibt jetzt offen, solange der Fokus irgendwo im Kopfbereich steht; damit
 * laesst es sich durchtabben. Rein per CSS geht das nicht: zwischen zwei
 * Tab-Schritten passt der Fokus kurz auf nichts, das Menue verschwaende und
 * naehme das naechste Ziel mit — deshalb setzt app.js die Klasse. */
.ws-header.is-megaopen .ws-megawrap { display: block; }

/* Beruehrflaechen im mobilen Menue und in der Warenkorb-Schublade. */
@media (max-width: 767px) {
  .ws-msheet__sub a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .ws-qty--sm button { min-width: 44px; min-height: 44px; }
  .ws-line__remove { min-height: 44px; padding-block: 8px; }
  .ws-drawer__foot .ws-link { min-height: 44px; }
  .ws-drawer .ws-btn--sm { min-height: 44px; }
}

/* Sehr schmale Geraete (bis 360px, WCAG 1.4.10 verlangt 320 CSS-Pixel):
 * nichts darf ueber den Rand hinauslaufen. */
@media (max-width: 360px) {
  .ws-img__top { max-width: 100%; }
  .ws-badge { max-width: 100%; white-space: normal; }
  .ws-btn { max-width: 100%; }
  .ws-row .ws-btn { flex: 1 1 100%; }
  /* Die Kennzahlen der Vertrauensleiste stehen im Entwurf auf nowrap. */
  .ws-tstrip__n { white-space: normal !important; }
  .ws-h1, .ws-h2, .ws-h3, .ws-display, .ws-pcard__title {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .ws-gallery, .ws-gallery > *, .ws-buy, .ws-pdp > * { min-width: 0; max-width: 100%; }
  .ws-tstrip p { overflow-wrap: break-word; }
  /* Mengenwaehler und Kaufknopf passen nebeneinander nicht mehr. */
  .ws-buy__cta { flex-wrap: wrap; }
  .ws-buy__cta > .ws-btn { flex: 1 0 100%; }
  /* Lange Werte im Datenblatt duerfen umbrechen. */
  .ws-table { table-layout: fixed; width: 100%; }
  .ws-table th, .ws-table td { overflow-wrap: break-word; }
  /* Die drei Kernmerkmale im Kaufblock stehen im Entwurf zweispaltig. */
  .ws-buy__facts { grid-template-columns: 1fr !important; }
  .ws-buy__facts > li { min-width: 0; }
}