/* Schaltflächen */
.fw-knopf {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  min-height:50px;
  padding:0.75rem 1.6rem;
  border:1px solid var(--color-oxblood);
  border-radius:var(--radius-button);
  background:var(--color-oxblood);
  color:var(--color-white);
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color 0.2s ease, border-color 0.2s ease;
}
.fw-knopf:hover {
  background:var(--color-oxblood-deep);
  border-color:var(--color-oxblood-deep);
  color:var(--color-white);
}
.fw-knopf[disabled] {
  cursor:wait;
  background:var(--color-rule);
  border-color:var(--color-rule);
}
.fw-knopf-zweit {
  background:transparent;
  border-color:var(--color-mist);
  color:var(--color-light);
}
.fw-knopf-zweit:hover {
  background:var(--color-surface-raised);
  border-color:var(--color-light);
}
.fw-knopf-voll {
  flex:1 1 auto;
}
.fw-chip {
  min-height:44px;
  padding:0.45rem 1.1rem;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-chip);
  background:transparent;
  color:var(--color-light);
  font-size:0.95rem;
  cursor:pointer;
}
.fw-chip:hover {
  border-color:var(--color-steel);
}
.fw-chip.on {
  background:var(--color-steel);
  border-color:var(--color-steel);
  color:var(--color-night);
}
.fw-augenbraue {
  margin-bottom:var(--space-s);
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--color-steel);
}
.fw-augenbraue a {
  display:inline-block;
  padding:0.5rem 0;
  color:inherit;
  text-decoration:none;
}
.fw-lead {
  font-size:1.15rem;
  color:var(--color-mist);
}
.fw-umriss {
  display:block;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(3rem, 2rem + 6vw, 8rem);
  font-weight:500;
  line-height:0.9;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px var(--color-umriss);
  user-select:none;
  white-space:nowrap;
  overflow:hidden;
}
/* Szenenfoto mit Korn und Vignette */
.fw-szene {
  position:relative;
  overflow:hidden;
}
.fw-szene::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(5, 7, 10, 0) 55%, rgba(5, 7, 10, 0.5) 100%), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
.fw-szene img {
  width:100%;
}
/* Auftakt */
.fw-auftakt {
  display:grid;
  min-height:min(86vh, 780px);
  border-bottom:1px solid var(--color-rule);
}
.fw-auftakt-text {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:var(--space-xl) var(--space-gutter) var(--space-l);
  background:var(--color-surface);
  text-align:center;
}
.fw-auftakt-text h1 {
  max-width:15ch;
  margin-bottom:var(--space-m);
}
.fw-auftakt-text .fw-lead {
  max-width:32rem;
  margin-bottom:var(--space-l);
}
.fw-auftakt-fakten {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.5rem 1.4rem;
  margin:var(--space-l) 0 0;
  padding:0;
  list-style:none;
  font-size:0.9rem;
  color:var(--color-mist);
}
.fw-auftakt-fakten li::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:0.5rem;
  vertical-align:middle;
  background:var(--color-oxblood);
}
.fw-collage {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-l) var(--space-gutter);
}
.fw-collage-rahmen {
  position:relative;
  width:min(100%, 86vh, 760px);
  aspect-ratio:6 / 5;
}
.fw-lage {
  position:absolute;
  box-shadow:var(--shadow-soft);
  --space-versatz:0px;
  translate:0 var(--space-versatz);
  transition:translate 0.15s linear;
}
.fw-lage-eins {
  left:0;
  top:9%;
  width:78%;
}
.fw-lage-zwei {
  right:0;
  top:0;
  width:40%;
  border:6px solid var(--color-night);
}
.fw-lage-drei {
  right:12%;
  bottom:0;
  width:44%;
  border:6px solid var(--color-night);
}
@media (min-width: 960px) {
  .fw-auftakt {
    --space-hero-rand:max(0px, (100% - 1680px) / 2);
    grid-template-columns:minmax(0, calc(var(--space-hero-rand) + min(100%, 1680px) * 5 / 11)) minmax(0, 1fr);
  }
  .fw-auftakt-text {
    padding-left:calc(var(--space-gutter) + max(0px, (100vw - 1680px) / 2));
    border-right:1px solid var(--color-rule);
  }
  .fw-collage {
    padding-right:calc(var(--space-gutter) + max(0px, (100vw - 1680px) / 2));
  }
}
/* Abschnitte der Startseite */
.fw-abschnitt {
  border-bottom:1px solid var(--color-rule);
}
.fw-abschnitt-kopf {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-m);
  margin-bottom:var(--space-l);
}
.fw-abschnitt-kopf p {
  max-width:36rem;
  margin:0;
  color:var(--color-mist);
}
.fw-rhythmus-a {
  padding-top:4.5rem;
  padding-bottom:2.25rem;
}
.fw-rhythmus-b {
  padding-top:3rem;
  padding-bottom:5.5rem;
}
.fw-rhythmus-c {
  padding-top:6.5rem;
  padding-bottom:3.25rem;
}
.fw-rhythmus-d {
  padding-top:2.5rem;
  padding-bottom:4.75rem;
}
.fw-rhythmus-e {
  padding-top:5rem;
  padding-bottom:2.75rem;
}
/* Kategorien-Schiene */
.fw-schiene-knoepfe {
  display:flex;
  gap:0.5rem;
}
.fw-schiene-knoepfe button {
  width:48px;
  height:48px;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-button);
  background:var(--color-surface);
  color:var(--color-light);
  font-size:1.2rem;
  cursor:pointer;
}
.fw-schiene-knoepfe button:hover {
  border-color:var(--color-steel);
}
.fw-schiene {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px, 78%);
  gap:var(--space-m);
  margin:0;
  padding:0 0 var(--space-m);
  list-style:none;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--color-oxblood) transparent;
}
.fw-schiene-tafel {
  scroll-snap-align:start;
}
.fw-schiene-link {
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--color-rule);
  background:var(--color-surface);
  color:var(--color-light);
  text-decoration:none;
}
.fw-schiene-link img {
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}
.fw-schiene-name {
  padding:var(--space-m) var(--space-m) 0.3rem;
  font-family:var(--font-display);
  font-size:1.45rem;
}
.fw-schiene-satz {
  padding:0 var(--space-m);
  font-size:0.95rem;
  color:var(--color-mist);
}
.fw-schiene-ab {
  margin-top:auto;
  padding:var(--space-s) var(--space-m) var(--space-m);
  color:var(--color-steel);
  font-weight:600;
}
.fw-schiene-link:hover .fw-schiene-name {
  color:var(--color-steel);
}
@media (min-width: 700px) {
  .fw-schiene {
    grid-auto-columns:minmax(260px, 31%);
  }
}
/* Produktkarten mit versetztem Rahmen */
.fw-karte {
  display:flex;
  flex-direction:column;
  background:var(--color-surface);
  box-shadow:var(--space-offset) var(--space-offset) 0 -1px var(--color-night), var(--space-offset) var(--space-offset) 0 0 var(--color-rule), var(--shadow-soft);
}
.fw-karte-bild {
  display:block;
}
.fw-karte-bild img {
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.fw-karte-text {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:var(--space-m);
}
.fw-karte-art {
  margin-bottom:0.3rem;
  font-size:0.75rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-mist);
}
.fw-karte-name {
  margin-bottom:0.35rem;
  font-size:1.2rem;
}
.fw-karte-name a {
  color:var(--color-light);
  text-decoration:none;
}
.fw-karte-name a:hover {
  color:var(--color-steel);
}
.fw-karte-kurz {
  font-size:0.95rem;
  color:var(--color-mist);
}
.fw-preis {
  margin:auto 0 0;
  padding-top:var(--space-xs);
}
.fw-preis-wert {
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fw-preis-hinweis {
  display:inline-block;
  font-size:0.8rem;
  color:var(--color-mist);
}
.fw-flaeche-dunkel .fw-karte {
  box-shadow:var(--space-offset) var(--space-offset) 0 -1px var(--color-surface), var(--space-offset) var(--space-offset) 0 0 var(--color-rule), var(--shadow-soft);
}
.fw-flaeche-dunkel {
  background:var(--color-surface);
}
/* Materialvergleich */
.fw-vergleich-wahl {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-bottom:var(--space-m);
}
.fw-vergleich {
  overflow-x:auto;
  margin-bottom:var(--space-reach);
  border:1px solid var(--color-rule);
  background:var(--color-surface);
  box-shadow:var(--shadow-soft);
  scrollbar-width:thin;
  scrollbar-color:var(--color-oxblood) transparent;
}
.fw-vergleich table {
  width:100%;
  min-width:720px;
  margin:0;
  border-collapse:collapse;
  font-size:0.97rem;
}
.fw-vergleich caption {
  padding:var(--space-s) var(--space-m);
  text-align:left;
  color:var(--color-mist);
  font-size:0.9rem;
  border-bottom:1px solid var(--color-rule);
}
.fw-vergleich th, .fw-vergleich td {
  padding:0.9rem var(--space-m);
  border-bottom:1px solid var(--color-rule);
  text-align:left;
  vertical-align:top;
}
.fw-vergleich thead th {
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.05rem;
}
.fw-vergleich tbody th {
  width:16%;
  color:var(--color-mist);
  font-weight:500;
}
.fw-vergleich .on {
  background:var(--color-steel-soft);
}
.fw-vergleich thead .on {
  color:var(--color-steel);
}
/* Material und Pflege mit klebendem Inhaltsverzeichnis */
.fw-pflegeband {
  display:grid;
  gap:var(--space-l);
}
.fw-verzeichnis {
  align-self:start;
  padding:var(--space-m);
  border:1px solid var(--color-rule);
  background:var(--color-surface);
}
.fw-verzeichnis p {
  margin-bottom:var(--space-xs);
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-mist);
}
.fw-verzeichnis ol {
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:fwv;
}
.fw-verzeichnis li {
  counter-increment:fwv;
}
.fw-verzeichnis a {
  display:flex;
  gap:0.7rem;
  padding:0.55rem 0 0.55rem 0.8rem;
  border-left:2px solid var(--color-rule);
  color:var(--color-mist);
  text-decoration:none;
}
.fw-verzeichnis a::before {
  content:counter(fwv, decimal-leading-zero);
  font-variant-numeric:tabular-nums;
  color:var(--color-steel);
}
.fw-verzeichnis a.on {
  border-left-color:var(--color-oxblood);
  color:var(--color-light);
}
.fw-pflegetext section {
  padding:2rem 0;
  border-top:1px solid var(--color-rule);
}
.fw-pflegetext section:first-child {
  padding-top:0;
  border-top:0;
}
.fw-pflegetext h3 {
  font-size:1.45rem;
}
.fw-pflegetext .fw-szene {
  margin:var(--space-m) 0;
  max-width:640px;
}
.fw-merkliste {
  margin:var(--space-m) 0 0;
  padding:var(--space-m) var(--space-m) var(--space-m) 2.4rem;
  border-left:3px solid var(--color-oxblood);
  background:var(--color-surface);
}
@media (min-width: 960px) {
  .fw-pflegeband {
    grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
    gap:clamp(2.5rem, 5vw, 5rem);
  }
  .fw-verzeichnis {
    position:sticky;
    top:calc(var(--space-kopf) + 24px);
  }
}
/* Stimmen */
.fw-stimmen {
  display:grid;
  gap:calc(var(--space-l) + var(--space-offset));
  margin-bottom:var(--space-reach);
}
.fw-stimme {
  position:relative;
  margin:0;
  padding:var(--space-l) var(--space-m) var(--space-m);
  border:1px solid var(--color-rule);
  background:var(--color-surface);
  box-shadow:var(--space-offset) var(--space-offset) 0 -1px var(--color-night), var(--space-offset) var(--space-offset) 0 0 var(--color-oxblood);
}
.fw-stimme::before {
  content:"„";
  position:absolute;
  top:0.2rem;
  left:var(--space-m);
  font-family:var(--font-display);
  font-size:3.4rem;
  line-height:1;
  color:var(--color-oxblood);
}
.fw-stimme p {
  margin:0;
  font-family:var(--font-display);
  font-size:1.12rem;
  line-height:1.5;
}
.fw-stimme-kurz p {
  font-size:1.3rem;
}
@media (min-width: 900px) {
  .fw-stimmen {
    grid-template-columns:1.25fr 0.9fr 1.1fr;
    align-items:start;
  }
  .fw-stimme:nth-child(2) {
    margin-top:var(--space-xl);
  }
}
/* Bedingungen */
.fw-bedingungen {
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--color-rule);
}
.fw-bedingungen li {
  padding:var(--space-m) 0;
  border-bottom:1px solid var(--color-rule);
}
.fw-bedingungen strong {
  display:block;
  margin-bottom:0.3rem;
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:500;
}
.fw-bedingungen span {
  color:var(--color-mist);
}
@media (min-width: 800px) {
  .fw-bedingungen {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    border-bottom:1px solid var(--color-rule);
  }
  .fw-bedingungen li {
    padding:var(--space-m) var(--space-m) var(--space-m) 0;
    border-bottom:0;
  }
  .fw-bedingungen li + li {
    padding-left:var(--space-m);
    border-left:1px solid var(--color-rule);
  }
}
/* Tafel der Innenseiten */
.fw-tafel h1 {
  margin-bottom:var(--space-m);
}
.fw-tafel-liste {
  margin:var(--space-l) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--color-rule);
}
.fw-tafel-liste li {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:0.2rem 1rem;
  padding:0.7rem 0;
  border-bottom:1px solid var(--color-rule);
  font-size:0.95rem;
}
.fw-tafel-liste span {
  color:var(--color-mist);
}
.fw-tafel .fw-umriss {
  margin-top:var(--space-l);
  font-size:clamp(2.6rem, 1.5rem + 3vw, 5rem);
}
.fw-filter {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:var(--space-l);
}
/* Blöcke der Innenseiten */
.fw-block {
  margin-bottom:var(--space-xl);
}
.fw-block:last-child {
  margin-bottom:0;
}
.fw-block > h2 {
  padding-bottom:var(--space-s);
  border-bottom:1px solid var(--color-rule);
  margin-bottom:var(--space-m);
}
.fw-akzent {
  margin-bottom:var(--space-m);
  padding:var(--space-m) var(--space-m) var(--space-s);
  border-left:3px solid var(--color-oxblood);
  background:var(--color-surface);
}
.fw-akzent h3 {
  font-size:1.15rem;
}
.fw-module {
  display:grid;
  gap:var(--space-m);
  margin:0 0 var(--space-m);
  padding:0;
  list-style:none;
  counter-reset:fwm;
}
.fw-module li {
  position:relative;
  padding:var(--space-m) var(--space-m) var(--space-s) 4.2rem;
  border:1px solid var(--color-rule);
  background:var(--color-surface);
  counter-increment:fwm;
}
.fw-module li::before {
  content:counter(fwm);
  position:absolute;
  left:var(--space-m);
  top:0.9rem;
  font-family:var(--font-display);
  font-size:2rem;
  line-height:1;
  color:var(--color-oxblood);
}
@media (min-width: 700px) {
  .fw-module-zwei {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
.fw-tabelle-rahmen {
  overflow-x:auto;
  margin-bottom:var(--space-reach);
  border:1px solid var(--color-rule);
  background:var(--color-surface);
  box-shadow:var(--shadow-soft);
  scrollbar-width:thin;
  scrollbar-color:var(--color-oxblood) transparent;
}
.fw-tabelle {
  width:100%;
  margin:0;
  border-collapse:collapse;
  font-size:0.97rem;
}
.fw-tabelle caption {
  padding:var(--space-s) var(--space-m);
  text-align:left;
  font-size:0.9rem;
  color:var(--color-mist);
  border-bottom:1px solid var(--color-rule);
}
.fw-tabelle th, .fw-tabelle td {
  padding:0.8rem var(--space-m);
  border-bottom:1px solid var(--color-rule);
  text-align:left;
  vertical-align:top;
}
.fw-tabelle tr:last-child th, .fw-tabelle tr:last-child td {
  border-bottom:0;
}
.fw-tabelle thead th {
  font-weight:600;
  color:var(--color-mist);
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.fw-tabelle tbody th {
  font-weight:500;
  color:var(--color-mist);
  width:38%;
}
.fw-stufen {
  margin:0 0 var(--space-m);
  padding:0;
  list-style:none;
  counter-reset:fws;
}
.fw-stufen li {
  display:grid;
  grid-template-columns:3.2rem minmax(0, 1fr);
  gap:var(--space-s);
  padding:var(--space-m) 0;
  border-top:1px solid var(--color-rule);
  counter-increment:fws;
}
.fw-stufen li::before {
  content:counter(fws, decimal-leading-zero);
  font-family:var(--font-display);
  font-size:1.9rem;
  line-height:1;
  color:var(--color-steel);
}
.fw-stufen li p {
  margin:0;
}
.fw-ausruf {
  position:relative;
  margin:var(--space-l) 0 calc(var(--space-reach) + var(--space-offset));
  padding:var(--space-l) var(--space-m) var(--space-m);
  background:var(--color-surface-raised);
  box-shadow:var(--space-offset) var(--space-offset) 0 -1px var(--color-night), var(--space-offset) var(--space-offset) 0 0 var(--color-steel);
}
.fw-ausruf p {
  margin:0;
  font-family:var(--font-display);
  font-size:1.25rem;
  line-height:1.45;
}
.fw-ausruf p + p {
  margin-top:var(--space-s);
}
.fw-chips {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin:0 0 var(--space-m);
  padding:0;
  list-style:none;
}
.fw-chips li {
  padding:0.35rem 0.9rem;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-chip);
  font-size:0.9rem;
  color:var(--color-mist);
}
.fw-band-bild {
  margin:0 0 var(--space-l);
}
.fw-band-bild img {
  width:100%;
  max-height:clamp(240px, 42vh, 460px);
  object-fit:cover;
}
.fw-gruppe {
  margin-bottom:var(--space-xl);
}
.fw-gruppe-kopf {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0.3rem 1rem;
  margin-bottom:var(--space-m);
  padding-bottom:var(--space-s);
  border-bottom:1px solid var(--color-rule);
}
.fw-gruppe-kopf h2 {
  margin:0;
}
.fw-gruppe-kopf p {
  flex:1 1 16rem;
  margin:0;
  color:var(--color-mist);
}
.fw-gruppe-zahl {
  font-size:0.85rem;
  color:var(--color-steel);
}
.fw-recht h2 {
  margin-top:var(--space-l);
}
.fw-recht h3 {
  margin-top:var(--space-m);
  font-size:1.1rem;
}
.fw-recht > section {
  margin-bottom:var(--space-m);
  padding:var(--space-m) var(--space-m) var(--space-s);
  border:1px solid var(--color-rule);
  background:var(--color-surface);
}
.fw-recht > section > h2:first-child {
  margin-top:0;
}
.fw-muster {
  margin:var(--space-m) 0;
  padding:var(--space-m);
  border:1px dashed var(--color-mist);
  background:var(--color-night);
}
/* Produktseite */
.fw-ware {
  display:grid;
  gap:var(--space-l);
  padding-top:var(--space-l);
  padding-bottom:var(--space-l);
}
.fw-ware h1 {
  margin-bottom:var(--space-s);
}
.fw-ware [data-preis] {
  margin-bottom:var(--space-xs);
  font-size:1.4rem;
}
.fw-ware [data-preis] .fw-preis-hinweis {
  margin-left:0.4rem;
  font-size:0.85rem;
}
.fw-ware .fw-lead strong {
  color:var(--color-light);
  font-weight:500;
}
.fw-laengen {
  margin:0 0 var(--space-m);
  padding:0;
  border:0;
}
.fw-laengen legend {
  margin-bottom:var(--space-xs);
  font-weight:600;
}
.fw-laengen > div {
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
}
.fw-laengen p a {
  display:inline-block;
  padding:0.6rem 0;
  font-size:0.95rem;
}
.fw-laenge {
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:50px;
  padding:0.3rem 0.7rem;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-button);
  background:var(--color-surface);
  cursor:pointer;
}
.fw-laenge input {
  position:absolute;
  inset:0;
  margin:0;
  border:0;
  background:transparent;
  appearance:none;
  cursor:pointer;
}
.fw-laenge input:disabled {
  cursor:not-allowed;
}
.fw-laenge:has(input:checked) {
  border-color:var(--color-steel);
  background:var(--color-steel-soft);
}
.fw-laenge:has(input:focus-visible) {
  outline:2px solid var(--color-steel);
  outline-offset:2px;
}
.fw-laenge small {
  font-size:0.7rem;
}
.fw-laenge-aus {
  cursor:not-allowed;
  color:var(--color-mist);
}
.fw-laenge-aus span {
  text-decoration:line-through;
}
.fw-ware [data-reihe] {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--space-s);
}
.fw-ware [data-reihe] .fw-feld {
  font-size:0.9rem;
  color:var(--color-mist);
}
.fw-ware [data-hinweis] {
  margin-top:var(--space-s);
}
.fw-ware [data-hinweis="drin"] {
  border-left-color:var(--color-steel);
}
.fw-ware .fw-kasten {
  margin-top:var(--space-l);
  font-size:0.95rem;
  color:var(--color-mist);
}
.fw-ware .fw-kasten li {
  display:list-item;
  margin-left:1.1rem;
  list-style:square;
}
.fw-ware [data-bereich="foto"] {
  min-width:0;
}
.fw-ware [data-bereich="foto"] > div {
  width:min(100%, 60vh, 620px);
  margin:0 auto var(--space-reach);
  box-shadow:var(--space-offset) var(--space-offset) 0 -1px var(--color-night), var(--space-offset) var(--space-offset) 0 0 var(--color-rule), var(--shadow-soft);
}
.fw-ware [data-bereich="foto"] img {
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
}
.fw-ware .fw-block {
  margin-bottom:var(--space-l);
}
.fw-ware .fw-block > h2 {
  font-size:1.15rem;
}
@media (min-width: 960px) {
  .fw-ware {
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:"foto kauf" "foto info";
    column-gap:clamp(2.5rem, 5vw, 5rem);
    row-gap:var(--space-l);
    padding-top:var(--space-xl);
  }
  .fw-ware [data-bereich="kauf"] {
    grid-area:kauf;
  }
  .fw-ware [data-bereich="info"] {
    grid-area:info;
  }
  .fw-ware [data-bereich="foto"] {
    grid-area:foto;
  }
  .fw-ware [data-bereich="foto"] > div {
    position:sticky;
    top:calc(var(--space-kopf) + 24px);
    margin:0 0 var(--space-reach);
  }
}
/* Warenkorb */
.fw-korb-liste {
  margin:0 0 var(--space-l);
  padding:0;
  list-style:none;
  border-top:1px solid var(--color-rule);
}
.fw-zeile {
  display:grid;
  grid-template-columns:84px minmax(0, 1fr);
  gap:var(--space-s) var(--space-m);
  padding:var(--space-m) 0;
  border-bottom:1px solid var(--color-rule);
}
.fw-zeile img {
  width:84px;
  height:84px;
  object-fit:cover;
}
.fw-zeile-name {
  margin:0;
  font-family:var(--font-display);
  font-size:1.15rem;
}
.fw-zeile-name a {
  color:var(--color-light);
  text-decoration:none;
}
.fw-zeile-meta {
  margin:0.2rem 0 0;
  font-size:0.9rem;
  color:var(--color-mist);
}
.fw-zeile-steuer {
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-s);
}
.fw-zeile-menge {
  display:flex;
  align-items:center;
  gap:0.5rem;
  font-size:0.9rem;
  color:var(--color-mist);
}
.fw-zeile-weg {
  min-height:48px;
  padding:0 0.9rem;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-button);
  background:transparent;
  color:var(--color-light);
  cursor:pointer;
}
.fw-zeile-weg:hover {
  border-color:var(--color-alarm);
}
.fw-zeile-summe {
  margin-left:auto;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
@media (min-width: 700px) {
  .fw-zeile {
    grid-template-columns:96px minmax(0, 1fr) auto;
    align-items:center;
  }
  .fw-zeile img {
    width:96px;
    height:96px;
  }
  .fw-zeile-steuer {
    grid-column:auto;
  }
}
.fw-summe {
  margin:0 0 calc(var(--space-reach) + var(--space-offset));
  padding:var(--space-m);
  background:var(--color-surface);
  box-shadow:var(--space-offset) var(--space-offset) 0 -1px var(--color-night), var(--space-offset) var(--space-offset) 0 0 var(--color-rule), var(--shadow-soft);
}
.fw-summe dl {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:0.5rem var(--space-m);
  margin:0;
}
.fw-summe dt {
  color:var(--color-mist);
}
.fw-summe dd {
  margin:0;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.fw-summe .fw-summe-gesamt {
  padding-top:0.6rem;
  border-top:1px solid var(--color-rule);
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--color-light);
}
.fw-summe-notiz {
  margin:var(--space-s) 0 0;
  font-size:0.88rem;
  color:var(--color-mist);
}
.fw-summe-posten {
  margin:0 0 var(--space-s);
  padding:0 0 var(--space-s);
  list-style:none;
  border-bottom:1px solid var(--color-rule);
}
.fw-summe-posten li {
  display:flex;
  justify-content:space-between;
  gap:var(--space-m);
  padding:0.25rem 0;
  font-size:0.95rem;
}
.fw-leer {
  padding:var(--space-l) var(--space-m);
  border:1px dashed var(--color-rule);
  text-align:center;
}
/* Formulare */
.fw-form {
  display:grid;
  gap:var(--space-m);
}
.fw-form-paar {
  display:grid;
  gap:var(--space-m);
}
@media (min-width: 640px) {
  .fw-form-paar {
    grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
  }
  .fw-form-paar-gleich {
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  }
}
.fw-feld {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.fw-feld label {
  font-weight:600;
  font-size:0.95rem;
}
.fw-feld small {
  font-size:0.85rem;
  color:var(--color-mist);
}
.fw-feld input:not([type="checkbox"]):not([type="radio"]), .fw-feld textarea, .fw-feld select, .fw-zeile-menge select {
  min-height:50px;
  padding:0.6rem 0.8rem;
  border:1px solid var(--color-rule);
  border-radius:var(--radius-field);
  background:var(--color-night);
  color:var(--color-light);
}
.fw-zeile-menge select {
  min-width:72px;
}
.fw-feld input:focus, .fw-feld textarea:focus {
  border-color:var(--color-steel);
}
.fw-feld textarea {
  min-height:140px;
  resize:vertical;
}
.fw-feld .fw-falsch {
  border-color:var(--color-alarm);
}
.fw-fehler {
  margin:0;
  font-size:0.9rem;
  color:var(--color-alarm);
}
.fw-haken {
  display:grid;
  grid-template-columns:24px minmax(0, 1fr);
  gap:0.7rem;
  align-items:start;
  font-size:0.95rem;
}
.fw-haken input {
  width:22px;
  height:22px;
  margin:2px 0 0;
  accent-color:var(--color-oxblood);
}
.fw-falle {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.fw-kasten {
  margin-bottom:var(--space-m);
  padding:var(--space-m);
  border:1px solid var(--color-rule);
  background:var(--color-surface);
}
.fw-kasten h2 {
  font-size:1.1rem;
}
.fw-kasten > :last-child {
  margin-bottom:0;
}
.fw-zahlart {
  display:grid;
  grid-template-columns:24px minmax(0, 1fr);
  gap:0.7rem;
  padding:var(--space-s);
  border:1px solid var(--color-steel);
  border-radius:var(--radius-field);
  background:var(--color-steel-soft);
}
.fw-zahlart input {
  width:20px;
  height:20px;
  margin:3px 0 0;
  accent-color:var(--color-steel);
}
.fw-zahlart-text {
  display:block;
  margin:0.2rem 0 0;
  font-size:0.92rem;
  color:var(--color-mist);
}
.fw-meldung {
  padding:var(--space-s) var(--space-m);
  border-left:3px solid var(--color-alarm);
  background:var(--color-surface-raised);
}
.fw-ergebnis {
  margin-top:var(--space-l);
}
.fw-statusleiste {
  display:grid;
  gap:0.5rem;
  margin:var(--space-m) 0;
  padding:0;
  list-style:none;
}
.fw-statusleiste li {
  padding:0.6rem 0.9rem;
  border:1px solid var(--color-rule);
  color:var(--color-mist);
}
.fw-statusleiste li.on {
  border-color:var(--color-oxblood);
  background:var(--color-surface-raised);
  color:var(--color-light);
}
@media (min-width: 700px) {
  .fw-statusleiste {
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }
}
/* Hinweis zur Speicherung */
.pill-fw {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
  padding:var(--space-m) var(--space-gutter);
  background:var(--color-surface-raised);
  border-top:1px solid var(--color-rule);
  box-shadow:0 -10px 30px -12px rgba(5, 7, 10, 0.8);
  font-size:0.95rem;
}
.pill-fw p {
  margin:0;
}
.fw-pill-knoepfe {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.5rem;
}
.fw-pill-knopf {
  min-height:48px;
  padding:0.5rem 0.9rem;
  border:1px solid var(--color-mist);
  border-radius:var(--radius-button);
  background:var(--color-night);
  color:var(--color-light);
  font-weight:600;
  cursor:pointer;
  transition:border-color 0.2s ease;
}
.fw-pill-knopf:hover {
  border-color:var(--color-steel);
}
@media (min-width: 720px) {
  .pill-fw {
    left:24px;
    right:auto;
    bottom:24px;
    width:min(390px, calc(100% - 48px));
    padding:var(--space-m);
    border:1px solid var(--color-rule);
    border-radius:12px;
  }
}
/* Rückmeldung */
.fw-toast {
  position:fixed;
  top:calc(var(--space-kopf) + 12px);
  right:var(--space-gutter);
  z-index:45;
  max-width:min(360px, calc(100% - 2 * var(--space-gutter)));
  padding:var(--space-s) var(--space-m);
  border-left:3px solid var(--color-steel);
  background:var(--color-surface-raised);
  box-shadow:var(--shadow-soft);
  visibility:hidden;
}
.fw-toast:empty {
  padding:0;
  border:0;
}
.fw-toast.entered {
  visibility:visible;
}
/* Fehlerseite und Bestätigung */
.fw-grosszahl {
  font-family:var(--font-display);
  font-size:clamp(4rem, 3rem + 6vw, 9rem);
  line-height:0.9;
  color:transparent;
  -webkit-text-stroke:1px var(--color-oxblood);
}
.fw-auftragsnummer {
  display:inline-block;
  padding:0.4rem 0.9rem;
  border:1px solid var(--color-steel);
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:0.04em;
}
