@charset "utf-8";
/* ===========================================================================
   schemabehaelter.ch — ein Stylesheet, Tokens oben.
   Für eine neue Marke werden nur die Werte in :root getauscht.
   =========================================================================== */

/* --- Schriften ----------------------------------------------------------- */

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-variable.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/open-sans-variable-italic.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  /* Farben. Der Seitengrund ist die Markenfarbe, die Schrift darauf ist
     schwarz: #000 auf #a9c6d8 ergibt 11.8:1. */
  --ground:      #a9c6d8;   /* Seitengrund, Markenfarbe */
  --ground-deep: #1f5c7d;   /* Buttons, aktive Navigation */
  --ground-pale: #dceaf3;
  --nacht:       #0f3b4e;   /* dunkler Akzent, Marke, Häkchen */
  --nacht-tief:  #082630;
  --stahl:       #e6eaec;   /* neutrale Flächen */
  --stahl-hell:  #f4f6f7;
  --weiss:       #ffffff;   /* Karten */
  --tinte:       #000000;   /* Schrift */
  --schiefer:    #3d3d3d;   /* Fliesstext zweiter Ordnung */
  --rot:         #d52b1e;   /* Fehler, Warnung, Schweizerkreuz */
  --gruen:       #0f6b3f;   /* ab Lager, bestätigt */

  --r-s: 12px;  --r-m: 22px;  --r-l: 36px;  --r-pill: 999px;

  --float:      0 1px 2px rgba(15, 59, 78, .08), 0 12px 24px -8px rgba(15, 59, 78, .22),
                0 32px 64px -24px rgba(15, 59, 78, .30);
  --float-high: 0 2px 4px rgba(15, 59, 78, .08), 0 24px 48px -12px rgba(15, 59, 78, .32),
                0 70px 110px -40px rgba(15, 59, 78, .45);
  --float-low:  0 1px 2px rgba(15, 59, 78, .07), 0 6px 14px -6px rgba(15, 59, 78, .18);

  --s20: .5rem;                        --s30: clamp(.75rem, 1.2vw, 1rem);
  --s40: clamp(1rem, 2vw, 1.5rem);     --s50: clamp(1.5rem, 3vw, 2.25rem);
  --s60: clamp(2rem, 5vw, 3.5rem);     --s70: clamp(3rem, 8vw, 6rem);
  --s80: clamp(4rem, 11vw, 9rem);

  --shell-w: 1360px;
  --gut: clamp(1rem, 3.4vw, 3rem);
  --inset: clamp(1.3rem, 2.6vw, 2.25rem);

  --t-small: .9375rem;   --t-medium: 1.0625rem;  --t-large: 1.375rem;
  --t-xl: 2.25rem;       --t-xxl: 3rem;          --t-huge: 5rem;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --fast: .2s ease;   --med: .4s var(--ease);   --slow: .6s var(--ease);

  --hdr-h: 92px;
}

/* --- Grundlagen ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--tinte);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-medium);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Klassen wie .notice oder .stagecard setzen display und schlagen damit die
   Browserregel für [hidden]. Einmal global nachziehen, dann wirkt el.hidden
   überall wie erwartet. */
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.05rem, 1.25rem + 3.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); }
h4 { font-size: var(--t-medium); letter-spacing: -.01em; line-height: 1.25; }

p { margin: 0 0 1em; max-width: 38em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--nacht);
  outline-offset: 2px;
  border-radius: 4px;
}

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: 0 0 .35em; }

hr { border: 0; border-top: 1px solid rgba(15, 59, 78, .16); margin: var(--s50) 0; }

strong, b { font-weight: 700; }
small { font-size: var(--t-small); }
code, kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }

::selection { background: var(--nacht); color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--nacht); color: #fff;
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-s) var(--r-s);
  text-decoration: none; font-weight: 700;
}
.skip:focus { transform: translate(-50%, 0); }

/* --- Raster -------------------------------------------------------------- */

.shell { width: min(100% - var(--gut) * 2, var(--shell-w)); margin-inline: auto; }
.sec { padding-block: var(--s70); }
.sec--tight { padding-block: var(--s60); }
.sec--first { padding-top: var(--s50); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s40); align-items: start; }
.split--wide { grid-template-columns: 1.15fr .85fr; }
.split--narrow { grid-template-columns: .85fr 1.15fr; }

/* Rasterfelder sind von Haus aus min-width:auto und schrumpfen darum nicht
   unter ihren Inhalt. Eine breite Tabelle sprengt sonst die Spalte, statt in
   ihrem .tablewrap zu scrollen. */
.split > *, .pd > *, .hero__grid > *, .mats > *, .facts > *,
.steps > *, .prods > *, .prods--shop > *, .mosaic > *, .ftr__grid > *,
.farbwahl > *, .swatches > * { min-width: 0; }

.stack > * + * { margin-top: var(--s40); }

.kopf { max-width: 46rem; margin-bottom: var(--s60); }
.kopf p { font-size: var(--t-large); line-height: 1.4; color: var(--schiefer); }
.kopf--mitte { margin-inline: auto; text-align: center; }
.kopf--mitte p { margin-inline: auto; }

/* --- Kleinteile ---------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--weiss); color: var(--nacht);
  border-radius: var(--r-pill); padding: .45rem 1.05rem;
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  box-shadow: var(--float-low); margin-bottom: .9rem;
}
.pill--bare { background: none; box-shadow: none; padding: 0; margin-bottom: .5rem; }
.pill--dunkel { background: var(--nacht); color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--stahl); color: var(--nacht);
  border-radius: var(--r-pill); padding: .3rem .8rem;
  font-size: var(--t-small); font-weight: 600;
}
.chip--lager { background: #dff0e6; color: var(--gruen); }
.chip--anfrage { background: #fdf0d9; color: #7a4b00; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.5rem;
  border: 2px solid transparent; border-radius: var(--r-pill);
  background: var(--ground-deep); color: #fff;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: var(--float-low);
  transition: transform var(--fast), box-shadow var(--fast), background var(--fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--float); background: var(--nacht); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn--dunkel { background: var(--nacht); }
.btn--dunkel:hover { background: var(--nacht-tief); }
.btn--geist {
  background: transparent; color: var(--nacht);
  border-color: currentColor; box-shadow: none;
}
.btn--geist:hover { background: var(--nacht); color: #fff; border-color: var(--nacht); }
.btn--klein { min-height: 40px; padding: .4rem 1rem; font-size: var(--t-small); }
.btn--breit { width: 100%; }

.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

.link {
  color: var(--nacht); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em;
}
.link:hover { text-decoration-color: var(--ground-deep); }

.tick {
  flex: none; width: 1.15em; height: 1.15em; margin-top: .18em;
  color: var(--nacht);
}

.liste { list-style: none; padding: 0; margin: 0 0 1em; }
.liste li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .5rem; }

.notice {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--stahl-hell); border-left: 4px solid var(--ground-deep);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: var(--s30) var(--s40); font-size: var(--t-small);
  color: var(--schiefer);
}
.notice strong { color: var(--tinte); }
.notice--warnung { border-left-color: var(--rot); background: #fdf0ef; }
.notice--offen { border-left-color: #b58100; background: #fdf6e6; }

.mwst { font-size: var(--t-small); color: var(--schiefer); font-weight: 400; }

/* --- Karten -------------------------------------------------------------- */

.card {
  background: var(--weiss);
  border-radius: var(--r-l);
  box-shadow: var(--float);
  overflow: hidden;
  position: relative;
}
.card--pad { padding: var(--inset); }
/* Kartentitel eine Nummer kleiner. Der Abstand darunter steht bewusst in rem:
   `margin: 0 0 .5em` der Überschriften schrumpft mit dem Schriftgrad und
   ergäbe hier 8.5 px — so viel wie zwischen zwei Listeneinträgen darunter.
   Der Titel läse sich dann als erster Eintrag. */
.kartentitel { font-size: var(--t-medium); margin-bottom: var(--s40); }
.card--pad-l { padding: clamp(1.5rem, 3.2vw, 2.75rem); }
.card--flach { box-shadow: var(--float-low); }
.card--stahl { background: var(--stahl-hell); }

.fig { margin: 0; background: var(--stahl-hell); }
.fig img { width: 100%; }
.fig figcaption {
  padding: .75rem var(--inset) 1rem;
  font-size: var(--t-small); color: var(--schiefer);
}

/* --- Kopfleiste ---------------------------------------------------------- */

.hdr {
  /* über dem Vollbild-Menü: sonst verdeckt das Menü seinen eigenen Schliessknopf */
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: .7rem var(--gut) 0;
  pointer-events: none;
}
.hdr__in {
  width: min(100%, var(--shell-w)); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.25rem);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: var(--r-pill);
  padding: .55rem .7rem .55rem clamp(1rem, 2vw, 1.5rem);
  box-shadow: var(--float);
  pointer-events: auto;
}

.marke {
  flex: none; display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--nacht);
  min-width: 0;
}
.marke__zeichen { flex: none; width: 34px; height: 34px; }
/* min-width:0, sonst gibt die Spalte den Schriftzug nicht frei und er ragt
   auf schmalen Geräten unter die Knöpfe. */
.marke__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.marke__name {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap;
}
.marke__unterzeile {
  font-size: .625rem; font-weight: 600; text-transform: uppercase;
  color: var(--schiefer);
  /* Sperrung ausgemessen, nicht geschätzt: Tintenbreite von «RUOSSTECH AG»
     (74.23 px) auf die Tintenbreite von «schemabehälter.ch» (160.46 px)
     gebracht — 86.23 px auf 11 Lücken sind 7.84 px, bei 10 px Schriftgrad
     also .784em. Der Abstand hinter dem letzten Buchstaben wird mit dem
     gleich grossen negativen Rand wieder weggenommen.
     Gilt für genau diese Schrift, diese Grösse und diesen Text. */
  letter-spacing: .784em; margin-right: -.784em;
  margin-top: .3rem;
}

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  text-decoration: none; font-size: var(--t-small); font-weight: 600;
  color: var(--nacht); white-space: nowrap;
  transition: background var(--fast), color var(--fast);
}
.nav a:hover { background: var(--ground-pale); }
.nav a[aria-current="page"] { background: var(--ground-deep); color: #fff; }

.hdr__tools { display: flex; align-items: center; gap: .35rem; margin-left: .25rem; }

.iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 50%;
  background: var(--stahl); color: var(--nacht);
  cursor: pointer;
  transition: background var(--fast), transform var(--fast);
}
.iconbtn:hover { background: var(--ground-pale); transform: translateY(-2px); }
.iconbtn svg { width: 21px; height: 21px; }
.iconbtn--haupt { background: var(--nacht); color: #fff; }
.iconbtn--haupt:hover { background: var(--nacht-tief); }

.korb-zahl {
  position: absolute; top: -2px; right: -2px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--rot); color: #fff;
  border-radius: var(--r-pill); border: 2px solid var(--weiss);
  font-size: .7rem; font-weight: 800; line-height: 1;
}
.korb-zahl[hidden] { display: none; }

.hburger { display: none; }

.no-js .such-knopf { display: none; }

/* Das Abzeichen von reCAPTCHA setzt sich unten rechts fest — genau dort, wo
   schon die beiden Schnellknöpfe sitzen. Google erlaubt das Ausblenden, wenn
   der Hinweis sichtbar beim Formular steht; das tut .recaptcha-hinweis. */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-hinweis {
  margin: var(--s30) 0 0; font-size: var(--t-small); color: var(--schiefer);
}
.linkknopf { border: 0; background: none; font: inherit; cursor: pointer; padding: 0; }

/* --- Einwilligungsleiste ------------------------------------------------- */
/* Steht nur auf den beiden Formularseiten und nur, solange nicht entschieden
   ist. z-index 90: unter der Kopfleiste (100), über den Schnellknöpfen (80),
   die solange ohnehin weichen — sonst lägen sie auf den Knöpfen hier. */
.cbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: var(--weiss); border-top: 1px solid rgba(15, 59, 78, .14);
  box-shadow: 0 -2px 4px rgba(15, 59, 78, .06), 0 -24px 48px -16px rgba(15, 59, 78, .38);
  padding-block: var(--s40);
}
.cbar__in {
  width: min(100% - var(--gut) * 2, var(--shell-w)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--s30) var(--s50); align-items: center;
}
.cbar__titel { font-weight: 800; letter-spacing: -.02em; margin-bottom: .25rem; }
.cbar__text { font-size: var(--t-small); color: var(--schiefer); margin: 0; }
.cbar__tun { display: grid; gap: var(--s30); justify-items: end; }
.cbar__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.cbar__weg { font-size: .8125rem; color: var(--schiefer); margin: 0; text-align: right; }
.cbar__weg a { white-space: nowrap; }
.mit-cbar .fab { display: none; }

/* --- Vollbild-Menü ------------------------------------------------------- */

.mnav {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ground);
  padding: calc(var(--hdr-h) + 1rem) var(--gut) var(--s50);
  overflow-y: auto;
  display: none;
}
.mnav[data-offen="ja"] { display: block; }
.mnav__liste { list-style: none; margin: 0; padding: 0; max-width: var(--shell-w); margin-inline: auto; }
.mnav__liste li { margin: 0; border-bottom: 1px solid rgba(15, 59, 78, .18); }
.mnav__liste a {
  display: block; padding: 1rem .25rem;
  font-size: clamp(1.35rem, 5vw, 1.9rem); font-weight: 700;
  letter-spacing: -.02em; text-decoration: none; color: var(--nacht);
}
.mnav__liste a[aria-current="page"] { color: var(--ground-deep); }
.mnav__fuss { max-width: var(--shell-w); margin: var(--s50) auto 0; }

/* --- Brotkrumen ---------------------------------------------------------- */

.crumbs { padding-top: calc(var(--hdr-h) + .5rem); }
.crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0; padding: 0; font-size: var(--t-small); color: var(--schiefer);
}
.crumbs li { margin: 0; display: flex; gap: .4rem; align-items: center; }
.crumbs li + li::before { content: "›"; opacity: .6; }
.crumbs a { color: var(--nacht); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { font-weight: 600; color: var(--tinte); }

main { padding-top: 0; }
main.ohne-krumen { padding-top: calc(var(--hdr-h) + var(--s30)); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: var(--s60) var(--s70); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center;
}
.hero .pill { margin-bottom: 1.4rem; }
.hero h1 { margin-bottom: .5em; }
.hero__lead { font-size: var(--t-large); line-height: 1.5; max-width: 30em; }

/* Der Aussagesatz endet, die Handlung beginnt: dazwischen gehört eine Zäsur.
   Ohne sie klebt die Knopfreihe am Absatz — `p:last-child` gibt seinen
   Aussenabstand ab, und .btnrow bringt keinen mit. */
.hero__slides { margin-bottom: var(--s50); }

.hero__slides { position: relative; }
/* Über [data-aktiv] verstecken, nicht über .hero__slide allein: die Folie im
   Bühnenteil ist zugleich eine .stagecard mit display:grid, und die stünde bei
   gleicher Spezifität später im Stylesheet. */
.hero__slide[data-aktiv="nein"] { display: none; }
.hero__slide[data-aktiv="ja"] { animation: einblenden .5s var(--ease); }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero__steuer { display: flex; align-items: center; gap: .75rem; margin-top: var(--s50); }
.hero__punkte { display: flex; gap: .4rem; }
.hero__punkt {
  width: 34px; height: 6px; padding: 0; border: 0; border-radius: var(--r-pill);
  background: rgba(15, 59, 78, .28); cursor: pointer;
}
.hero__punkt[aria-current="true"] { background: var(--nacht); }
.hero__halt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .7); color: var(--nacht); cursor: pointer;
}
.hero__halt svg { width: 14px; height: 14px; }

.hero__stage { position: relative; }

/* Produktbühne: weisses Passepartout, Etikett oben, Preis unten */
.stagecard {
  background: var(--weiss); border-radius: var(--r-l);
  box-shadow: var(--float-high); padding: var(--inset);
  display: grid; gap: var(--s30);
}
.stagecard__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.stagecard__etikett {
  font-size: var(--t-small); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ground-deep);
}
.stagecard__bild { background: var(--weiss); border-radius: var(--r-m); overflow: hidden; }
.stagecard__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.stagecard__fuss {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  flex-wrap: wrap;
}
.stagecard__preis { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; }

/* --- Bento-Raster -------------------------------------------------------- */

.mosaic {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto); gap: var(--s30);
}
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 240px; border-radius: var(--r-l); overflow: hidden;
  background: var(--nacht); color: #fff; text-decoration: none;
  box-shadow: var(--float);
  transition: transform var(--fast), box-shadow var(--fast);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--float-high); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__verlauf {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 38, 48, .92) 0%, rgba(8, 38, 48, .55) 42%, rgba(8, 38, 48, .05) 100%);
}
.tile__text { position: relative; padding: var(--inset); }
.tile__text h3 { margin-bottom: .25em; color: #fff; }
.tile__text p { font-size: var(--t-small); color: rgba(255, 255, 255, .88); margin: 0; }
.tile--gross { grid-column: span 2; grid-row: span 2; min-height: 420px; }
.tile--breit { grid-column: span 2; }

/* --- Materialkarten ------------------------------------------------------ */

.mats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); }
.mats .card { padding: var(--inset); display: flex; flex-direction: column; gap: .7rem; }
.mats h3 { margin: 0; }
.mats p { font-size: var(--t-small); color: var(--schiefer); margin: 0; }

/* --- Zahlenband ---------------------------------------------------------- */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s30); }
.facts__it {
  background: var(--weiss); border-radius: var(--r-m); padding: var(--s40);
  box-shadow: var(--float-low);
}
.facts__zahl {
  display: block; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--nacht);
}
.facts__text { font-size: var(--t-small); color: var(--schiefer); margin-top: .6rem; display: block; }

/* --- Ablauf -------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s30); counter-reset: schritt; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps__it {
  background: var(--weiss); border-radius: var(--r-m); padding: var(--s40);
  box-shadow: var(--float-low); counter-increment: schritt;
}
.steps__it::before {
  content: counter(schritt, decimal-leading-zero);
  display: block; font-size: var(--t-large); font-weight: 800;
  color: var(--ground-deep); letter-spacing: -.02em; margin-bottom: .4rem;
}
.steps__it h3 { font-size: var(--t-medium); margin-bottom: .55em; }
.steps__it p { font-size: var(--t-small); color: var(--schiefer); margin: 0; }

/* --- Produktraster ------------------------------------------------------- */

.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s30); }
.prod {
  display: flex; flex-direction: column;
  background: var(--weiss); border-radius: var(--r-l); box-shadow: var(--float);
  overflow: hidden;
  transition: transform var(--fast), box-shadow var(--fast);
}
.prod:hover { transform: translateY(-3px); box-shadow: var(--float-high); }
/* Passepartout wie bei der Produktbühne: das Blech stösst nicht an die
   Kartenkante, sondern steht frei auf Weiss. */
.prod__bild { background: var(--weiss); padding: var(--s30) var(--s30) 0; }
.prod__bild img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.prod__in { padding: var(--inset); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.prod__name { margin: 0; font-size: var(--t-large); }
.prod__name a { text-decoration: none; }
.prod__name a::after { content: ""; position: absolute; inset: 0; }
.prod { position: relative; }
.prod__mass { font-size: var(--t-small); color: var(--schiefer); margin: 0; }
.prod__faecher { font-size: var(--t-small); margin: 0; }
.prod__preis { margin-top: auto; padding-top: 1rem; }
.prod__chf { font-size: var(--t-large); font-weight: 800; letter-spacing: -.02em; }
.prod__tun { position: relative; z-index: 1; margin-top: 1rem; }

/* --- Shop: Bestellkarte mit Farbe und Menge ------------------------------ */

.prods--shop { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
.prod--shop { position: relative; }
.prod--shop form { display: flex; flex-direction: column; height: 100%; }
.prod--shop .prod__in { gap: .35rem; }
.prod--shop .prod__name a::after { content: none; }   /* Karte bleibt bedienbar */
.prod--shop .feld { margin-bottom: .35rem; }
/* In der schmalen Shopkarte passt der ganze Farbname nur eine Nummer kleiner. */
.prod--shop .feld select { font-size: var(--t-small); }
.prod--shop .feld > span, .prod--shop .feld > .feld__label { margin-bottom: .2rem; }
.prod--shop .menge input[type="number"] { flex: 1 1 auto; }
.prod--shop .prod__preis { margin-top: auto; padding-top: .75rem; }
.prod--shop .prod__preis .mwst { display: block; }
.prod--shop .prod__tun { margin-top: .75rem; }

/* Zusicherungen über dem Raster */
.shopband {
  display: flex; flex-wrap: wrap; gap: .6rem var(--s40);
  background: var(--weiss); border-radius: var(--r-m);
  padding: var(--s30) var(--s40); margin-bottom: var(--s40);
  box-shadow: var(--float-low); font-size: var(--t-small); font-weight: 600;
}
.shopband span { display: inline-flex; align-items: flex-start; gap: .45rem; }

/* --- Produktdetail ------------------------------------------------------- */

.pd { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s50); align-items: start; }
.pd__kauf { position: sticky; top: calc(var(--hdr-h) + 1rem); }
.pd__preis {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .35rem;
}
.pd__chf { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.pd__brutto { font-size: var(--t-small); color: var(--schiefer); }

.feld { display: block; margin-bottom: var(--s30); }
.feld > span, .feld > .feld__label {
  display: block; font-size: var(--t-small); font-weight: 700; margin-bottom: .35rem;
}
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld input[type="number"], .feld input[type="url"], .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: .6rem .85rem;
  border: 2px solid rgba(15, 59, 78, .22); border-radius: var(--r-s);
  background: var(--weiss); color: var(--tinte);
  font: inherit; font-size: var(--t-medium);
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld select {
  appearance: none; background-image: none; cursor: pointer;
  /* Ein zu langer Wert soll sauber mit Auslassungspunkten enden statt mitten
     im Wort abzubrechen. */
  text-overflow: ellipsis;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--nacht); }
.feld__hilfe { display: block; font-size: var(--t-small); color: var(--schiefer); margin-top: .35rem; }
.feld--pflicht > span::after { content: " *"; color: var(--rot); }

/* Zustimmungszeile mit Häkchen. Das Kästchen bekommt seine Masse hier:
   input[type="checkbox"] fällt in keine der Feldregeln oben und behielte sonst
   die Browser-Vorgabe von rund 13 px — auf dem Telefon kaum zu treffen. */
.feld--haken {
  display: flex; gap: .7rem; align-items: flex-start; cursor: pointer;
  margin-top: var(--s30);
}
.feld--haken input[type="checkbox"] {
  flex: none; width: 26px; height: 26px; margin: 0;
  accent-color: var(--ground-deep);
}
.feld--haken > span { font-weight: 400; font-size: var(--t-small); }

/* Auswahlzeile: Knopf links, Beschriftung daneben — nicht darunter. */
.feld--wahl {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .6rem .75rem; border-radius: var(--r-s); cursor: pointer;
  transition: background var(--fast);
}
.feld--wahl:hover { background: var(--stahl-hell); }
.feld--wahl input[type="radio"] { flex: none; width: 20px; height: 20px; margin-top: .25rem; accent-color: var(--ground-deep); }
.feld--wahl .feld__wahl { display: block; }
.feld--wahl .feld__wahl strong { display: block; }
.feld--wahl .feld__hilfe { margin-top: .15rem; }
.feld--wahl:has(input:checked) { background: var(--ground-pale); }

/* Mengenwähler. Das Zahlenfeld wird auch ausserhalb eines .feld benutzt —
   im Warenkorb steht es blank in der Zeile — darum bekommt es seine Gestalt
   hier und nicht über .feld, sonst bleibt es dort ein nacktes Browserfeld. */
.menge { display: flex; align-items: center; gap: .5rem; max-width: 100%; }
.menge input[type="number"] {
  /* Darf schrumpfen: in der Warenkorbzeile ist die Spalte auf 320 px nur
     rund 165 px breit, und ein starres Feld sprengte sie. */
  flex: 0 1 5.5rem; min-width: 3rem;
  min-height: 52px; padding: .5rem .4rem;
  border: 2px solid rgba(15, 59, 78, .22); border-radius: var(--r-s);
  background: var(--weiss); color: var(--tinte);
  font: inherit; font-size: var(--t-large); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; text-align: center;
}
.menge input[type="number"]:focus { border-color: var(--nacht); }
.menge button {
  width: 52px; height: 52px; flex: none; border-radius: var(--r-s);
  border: 2px solid rgba(15, 59, 78, .22); background: var(--weiss);
  font: inherit; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer;
  color: var(--nacht);
  transition: background var(--fast), border-color var(--fast);
}
.menge button:hover { background: var(--ground-pale); border-color: var(--ground-deep); }

/* Farbwahl am Produktbild: dieselbe Auswahl wie das Feld im Kaufblock, nur
   direkt unter dem Bild. Die Knöpfe messen 44 px — die Untergrenze für
   Bedienelemente auf dem Handy. Ohne JavaScript stellen sie nichts um, darum
   sind sie dort nicht da. */
.farbtupfer { padding: var(--s30) var(--inset) var(--inset); }
.no-js .farbtupfer { display: none; }
.farbtupfer__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: var(--s30); }
.farbtupfer__titel {
  font-size: var(--t-small); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ground-deep);
}
.farbtupfer__name { font-weight: 700; }
/* Eigene Zeile: der Preis ist der Grund, warum hier jemand tippt. */
.farbtupfer__preis { flex: 1 0 100%; font-weight: 700; }
.farbtupfer__liste { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.farbtupfer__liste li { margin: 0; }
.farbtupfer__fuss { margin: var(--s30) 0 0; font-size: var(--t-small); color: var(--schiefer); }
.tupf {
  display: inline-flex; width: 44px; height: 44px; padding: 3px;
  border: 2px solid rgba(15, 59, 78, .22); border-radius: 50%;
  background: var(--weiss); cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.tupf__ton { flex: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 59, 78, .18); }
.tupf:hover { border-color: var(--ground-deep); transform: translateY(-1px); }
.tupf[aria-pressed="true"] { border-color: var(--nacht); box-shadow: var(--float-low); }

.pd__daten { margin: var(--s40) 0 0; }

/* --- Definitionstabelle -------------------------------------------------- */

.dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .1rem 1.25rem; }
.dl dt { font-weight: 700; font-size: var(--t-small); padding: .45rem 0; }
.dl dd {
  margin: 0; padding: .45rem 0; font-size: var(--t-small); color: var(--schiefer);
  border-bottom: 1px solid rgba(15, 59, 78, .1);
}
.dl dt { border-bottom: 1px solid rgba(15, 59, 78, .1); }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }

/* --- Datentabelle -------------------------------------------------------- */

.tablewrap { overflow-x: auto; border-radius: var(--r-m); background: var(--weiss); box-shadow: var(--float-low); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 640px; }
.dtable caption { text-align: left; padding: var(--s30) var(--s40) 0; font-weight: 700; }
.dtable th, .dtable td { padding: .7rem var(--s30); text-align: left; vertical-align: top; }
.dtable th:first-child, .dtable td:first-child { padding-left: var(--s40); }
.dtable th:last-child, .dtable td:last-child { padding-right: var(--s40); }
.dtable thead th {
  background: var(--nacht); color: #fff; font-weight: 700;
  position: sticky; top: 0;
}
.dtable tbody tr + tr td { border-top: 1px solid rgba(15, 59, 78, .12); }
.dtable tbody tr:hover td { background: var(--stahl-hell); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable td a { font-weight: 700; }

/* Die Versandtabelle hat nur drei Spalten und braucht die 640 px nicht. Sie
   darf auf die Breite ihres Inhalts schrumpfen; unter 560 px wird sie zum
   Block (weiter unten). Der Spaltenname in der Zelle ist nur dort sichtbar. */
.dtable--eng { min-width: 0; }

/* Die Bestellübersicht in der Kasse sitzt in der schmalen Spalte von
   .split--wide (.85fr). Dort ist sie auf üblichen Desktop-Breiten schmaler
   als 640 px — die feste Mindestbreite hätte sie zum seitlichen Scrollen
   gezwungen. Ihre drei Spalten vertragen das Schrumpfen problemlos, die
   Artikelspalte bricht dabei einfach um. */
#kasse-uebersicht .dtable { min-width: 0; }
.spaltenname { display: none; }

/* --- Farbauswahl --------------------------------------------------------- */

.farbwahl { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--s40); align-items: start; }
.farbwahl__buehne { position: sticky; top: calc(var(--hdr-h) + 1rem); margin: 0; padding: var(--inset); }
.farbwahl__bild { background: var(--weiss); border-radius: var(--r-m); overflow: hidden; }
.farbwahl__bild img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.farbwahl__buehne figcaption { padding: var(--s30) 0 0; font-size: var(--t-small); color: var(--schiefer); }
.farbwahl__buehne figcaption strong { font-size: var(--t-large); color: var(--tinte); letter-spacing: -.02em; }

.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s30); list-style: none; padding: 0; margin: 0; }
.swatch { margin: 0; }
.swatch__knopf {
  display: block; width: 100%; padding: 0; border: 2px solid transparent;
  background: var(--weiss); border-radius: var(--r-m); overflow: hidden;
  box-shadow: var(--float-low); cursor: pointer; font: inherit; color: inherit;
  text-align: left;
  transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast);
}
.swatch__knopf:hover { transform: translateY(-2px); box-shadow: var(--float); }
.swatch__knopf[aria-pressed="true"] { border-color: var(--nacht); box-shadow: var(--float); }
.swatch__bild { display: block; background: var(--weiss); }
.swatch__bild img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.swatch__text { display: block; padding: var(--s30); border-top: 1px solid rgba(15, 59, 78, .1); }
.swatch__ton {
  display: block; height: 10px; border-radius: var(--r-pill);
  margin-bottom: .5rem; box-shadow: inset 0 0 0 1px rgba(15, 59, 78, .12);
}
.swatch__ral { font-weight: 800; display: block; }
.swatch__name { font-size: var(--t-small); color: var(--schiefer); display: block; }
.swatch__preis { font-size: var(--t-small); margin-top: .4rem; display: block; }

/* Honigtopf gegen Bots: im Fluss, aber für Menschen unerreichbar. */
.honigtopf {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

/* --- Galerie und Lightbox ------------------------------------------------ */

.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s30); margin: 0; padding: 0; list-style: none; }
.gal__it { margin: 0; }
.gal__it a {
  display: block; border-radius: var(--r-m); overflow: hidden;
  background: var(--weiss); box-shadow: var(--float-low);
  transition: transform var(--fast), box-shadow var(--fast);
}
.gal__it a:hover { transform: translateY(-2px); box-shadow: var(--float); }
.gal__it img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.gal--cap figcaption { font-size: var(--t-small); color: var(--schiefer); padding-top: .5rem; }

.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; width: 100%; height: 100%; }
.lb::backdrop { background: rgba(8, 38, 48, .9); }
.lb__in { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: var(--s30); gap: .5rem; }
.lb__bild { display: grid; place-items: center; min-height: 0; }
.lb__bild img { max-height: 100%; width: auto; max-width: 100%; border-radius: var(--r-s); background: #fff; }
.lb__leiste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #fff; }
.lb__zaehler { font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.lb__cap { color: #fff; text-align: center; font-size: var(--t-small); min-height: 1.5em; }
.lb__btn {
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
  display: inline-grid; place-items: center;
}
.lb__btn:hover { background: rgba(255, 255, 255, .3); }
.lb__nav { display: flex; gap: .5rem; }

/* --- Frage und Antwort --------------------------------------------------- */

.qa-list { display: grid; gap: var(--s30); }
/* Gruppentitel in der Fragenliste. Die .qa-list darüber hat keinen
   Aussenabstand und h2 kein `margin-top` — ohne diese Regel klebt der Titel
   auf der letzten Karte der Gruppe davor. Oben rund doppelt so viel wie
   unten: so gehört er sichtbar zur Gruppe, die er ankündigt. */
.faq-gruppe { margin-top: var(--s60); margin-bottom: var(--s40); }
.faq-gruppe:first-child { margin-top: 0; }
.qa { background: var(--weiss); border-radius: var(--r-m); box-shadow: var(--float-low); padding: var(--s40); }
.qa h3 { font-size: var(--t-large); margin-bottom: .4em; }
.qa p { color: var(--schiefer); }
.qa p:first-of-type { color: var(--tinte); }

/* --- Bestellübersicht ---------------------------------------------------- */

.korbliste { display: grid; gap: var(--s30); margin: 0 0 var(--s40); padding: 0; list-style: none; }
.korbzeile {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s30);
  align-items: start; background: var(--weiss);
  border-radius: var(--r-m); box-shadow: var(--float-low); padding: var(--s30);
  margin: 0;
}
/* Auch hier: ohne min-width:0 wächst die Spalte auf den Mengenwähler und
   lange Komposita statt umgekehrt. */
.korbzeile > * { min-width: 0; }
.korbzeile__name, .korbzeile__meta { overflow-wrap: break-word; }
.korbzeile img { width: 96px; height: 96px; object-fit: contain; background: var(--weiss); border-radius: var(--r-s); }
.korbzeile__bild {
  display: block; border-radius: var(--r-s); overflow: hidden;
  transition: transform var(--fast), box-shadow var(--fast);
}
.korbzeile__bild:hover { transform: translateY(-2px); box-shadow: var(--float-low); }
.korbzeile__name { font-weight: 700; margin: 0 0 .2rem; }
.korbzeile__name a {
  text-decoration: underline; text-decoration-color: rgba(15, 59, 78, .3);
  text-decoration-thickness: 2px; text-underline-offset: .2em;
}
.korbzeile__name a:hover { text-decoration-color: var(--ground-deep); }
.korbzeile__meta { font-size: var(--t-small); color: var(--schiefer); margin: 0; }
.korbzeile__rechts { text-align: right; display: grid; gap: .5rem; justify-items: end; }
.korbzeile__chf { font-weight: 800; white-space: nowrap; }
.entfernen {
  border: 0; background: none; color: var(--rot); font: inherit;
  font-size: var(--t-small); font-weight: 700; cursor: pointer; padding: .35rem;
  text-decoration: underline;
}

.sumbox { background: var(--weiss); border-radius: var(--r-l); box-shadow: var(--float); padding: var(--inset); }
.srow { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: var(--t-small); }
.srow + .srow { border-top: 1px solid rgba(15, 59, 78, .1); }
.srow--total {
  border-top: 2px solid var(--nacht); margin-top: .5rem; padding-top: .75rem;
  font-size: var(--t-large); font-weight: 800; letter-spacing: -.02em;
}
.srow__wert { font-variant-numeric: tabular-nums; white-space: nowrap; }

.vatbox { margin-top: var(--s40); }
.vatbox .dtable { min-width: 0; }

.leer { text-align: center; padding: var(--s60) var(--s40); }

/* --- Schwebeleiste ------------------------------------------------------- */

.fab {
  position: fixed; right: var(--gut); bottom: var(--gut); z-index: 80;
  display: flex; flex-direction: column; gap: .5rem;
}
.fab a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.15rem;
  border-radius: var(--r-pill); background: var(--nacht); color: #fff;
  text-decoration: none; font-weight: 700; font-size: var(--t-small);
  box-shadow: var(--float);
  transition: transform var(--fast), background var(--fast);
}
.fab a:hover { transform: translateY(-2px); background: var(--nacht-tief); }
.fab svg { width: 18px; height: 18px; flex: none; }

/* Beim Bestellen hat die Seite ihre eigene Hauptaktion — die Schwebeleiste
   würde dort nur die Karten der rechten Spalte verdecken. */
body[data-page="shop"] .fab,
body[data-page="warenkorb"] .fab,
body[data-page="kasse"] .fab { display: none; }

/* --- Fusszeile ----------------------------------------------------------- */

.ftr { background: var(--nacht); color: #fff; margin-top: var(--s70); }
.ftr a { color: #fff; }
.ftr__wort {
  font-size: clamp(2.2rem, 9vw, var(--t-huge)); font-weight: 800;
  letter-spacing: -.04em; line-height: .95; margin: 0;
  padding-block: var(--s50) var(--s40);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  overflow-wrap: break-word;
}
.ftr__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s40);
  padding-block: var(--s50);
}
.ftr h2 {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255, 255, 255, .65); margin-bottom: .9em;
}
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: .45rem; font-size: var(--t-small); }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr address { font-style: normal; font-size: var(--t-small); line-height: 1.7; }
.ftr__unten {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-block: var(--s40);
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--t-small); color: rgba(255, 255, 255, .72);
}
.ftr__unten a { color: rgba(255, 255, 255, .9); }

/* --- Suche --------------------------------------------------------------- */

.such { border: 0; padding: 0; background: transparent; width: min(100% - 2rem, 680px); border-radius: var(--r-l); }
.such::backdrop { background: rgba(8, 38, 48, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.such__in { background: var(--weiss); border-radius: var(--r-l); box-shadow: var(--float-high); overflow: hidden; }
.such__zeile { display: flex; align-items: center; gap: .5rem; padding: .6rem .6rem .6rem 1.1rem; border-bottom: 1px solid rgba(15, 59, 78, .12); }
.such__feld {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  font-size: var(--t-large); padding: .6rem 0; color: var(--tinte);
}
.such__feld:focus { outline: none; }
.such__mic, .such__zu {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--stahl); color: var(--nacht); cursor: pointer;
  display: inline-grid; place-items: center;
}
.such__mic:hover, .such__zu:hover { background: var(--ground-pale); }
.such__mic[aria-pressed="true"] { background: var(--rot); color: #fff; animation: puls 1.4s infinite; }
@keyframes puls { 50% { opacity: .68; } }
.such__mic svg, .such__zu svg { width: 19px; height: 19px; }
.such__status { padding: .5rem 1.1rem; font-size: var(--t-small); color: var(--schiefer); min-height: 1.5em; }
.such__treffer { list-style: none; margin: 0; padding: 0 0 .6rem; max-height: min(52vh, 420px); overflow-y: auto; }
.such__treffer li { margin: 0; }
.such__treffer a { display: block; padding: .7rem 1.1rem; text-decoration: none; }
.such__treffer a:hover, .such__treffer a:focus-visible { background: var(--ground-pale); outline-offset: -3px; }
.such__t { font-weight: 700; display: block; }
.such__b { font-size: var(--t-small); color: var(--schiefer); display: block; }
.such__leer { padding: 1rem 1.1rem 1.4rem; font-size: var(--t-small); color: var(--schiefer); }

/* --- Scroll-Reveal ------------------------------------------------------- */

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].sichtbar {
  opacity: 1; transform: none;
  transition: opacity var(--slow), transform var(--slow);
}
.js [data-reveal][data-d="1"].sichtbar { transition-delay: .08s; }
.js [data-reveal][data-d="2"].sichtbar { transition-delay: .16s; }
.js [data-reveal][data-d="3"].sichtbar { transition-delay: .24s; }
.js [data-reveal][data-d="4"].sichtbar { transition-delay: .32s; }

/* ===========================================================================
   Verhalten auf dem Handy. Regel: Das Foto steht zuoberst — umgesetzt über
   `order`, nicht über verändertes Markup, damit die Vorlesereihenfolge
   inhaltlich richtig bleibt.
   =========================================================================== */

@media (max-width: 1250px) {
  .nav a { padding: .35rem .6rem; }
}

@media (max-width: 1139px) {
  .nav { display: none; }
  .hburger { display: inline-flex; }
  .hdr__tools { margin-left: auto; }
  .iconbtn { width: 42px; height: 42px; }
  .iconbtn svg { width: 19px; height: 19px; }
  :root { --hdr-h: 80px; }
}

@media (max-width: 1023px) {
  .farbwahl { grid-template-columns: 1fr; }
  .farbwahl__buehne { position: static; }
  .swatches { grid-template-columns: repeat(3, 1fr); }
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .tile--gross { grid-column: span 2; grid-row: span 1; min-height: 300px; }
  .prods, .prods--shop { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .steps, .steps--3 { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 979px) {
  /* Einspaltig steht der Behälter zwischen Titel und Fliesstext: Zeile eins
     sagt, worum es geht, Zeile zwei zeigt es — beides ohne zu scrollen.
     Damit die Bühne zwischen h1 und Text rutschen kann, gibt .hero__text seine
     Box ab: mit display:contents werden ihre Kinder selbst zu Rasterfeldern und
     lassen sich einzeln über `order` einsortieren. Die Zeilenlücke fällt dabei
     weg, die Abstände bringen die Elemente wie vorher selbst mit. */
  .hero__grid { grid-template-columns: 1fr; row-gap: 0; }
  .hero__text { display: contents; }
  /* Der Lagerhinweis fällt einspaltig weg: die Karte direkt darunter trägt ihn
     als Zeichen «ab Lager», der Ort steht im Fuss. Zwei Zeilen weniger über dem
     Behälter. */
  .hero .pill { display: none; }
  .hero h1 { order: 2; }
  .hero__stage, .hero__grid > .stagecard { order: 3; margin-bottom: var(--s30); }

  /* Alle vier Typen nebeneinander, seitlich zu wischen, einer je Anschlag.
     Die angeschnittene nächste Karte sagt, dass es weitergeht.
     Der Schlagschatten braucht Platz im Rollbereich: `overflow-x: auto` macht
     auch senkrecht einen Rollbereich daraus, ohne Innenabstand wäre der
     Schatten abgeschnitten. Der untere Aussenabstand nimmt ihn wieder zurück. */
  .hero__stage {
    display: flex; gap: var(--s30);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block: .6rem 2.1rem;
    margin-bottom: calc(var(--s30) - 1.6rem);
    scrollbar-width: none;
  }
  .hero__stage::-webkit-scrollbar { display: none; }
  /* Auch die gerade nicht gezeigten: in der Reihe stehen alle. Das JavaScript
     nimmt ihnen dazu `inert` und `aria-hidden` ab. */
  .hero__stage > .stagecard { flex: 0 0 86%; scroll-snap-align: start; display: grid; }
  .hero__slides { order: 4; }
  .hero .btnrow { order: 5; }
  .hero__steuer { order: 6; }
  .pd { grid-template-columns: 1fr; }
  .pd__kauf { position: static; }
  .mats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  .cbar__in { grid-template-columns: 1fr; }
  .cbar__tun { justify-items: stretch; }
  .cbar__weg { text-align: left; }
  .cbar__knoepfe .btn { flex: 1 1 10rem; }
  .split, .split--wide, .split--narrow { grid-template-columns: 1fr; }
  .split > .card:last-child:has(> .fig:first-child) { order: -1; }
  .split--formular > .card:last-child:has(> .fig:first-child) { order: 0; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 639px) {
  .korbzeile { grid-template-columns: 72px 1fr; }
  .korbzeile img { width: 72px; height: 72px; }
  .korbzeile__rechts { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* Drei Spalten gehen auf dem Telefon nicht auf: die Versandtabelle misst
   459 px Mindestbreite, auf einem 390-px-Display stehen 343 px zur Verfügung —
   sie müsste geschoben werden. Stattdessen wird je Zeile ein Block gesetzt:
   die Gewichtsstufe als Überschrift, darunter Versandart und Betrag als Paar.
   Der Tabellenkopf entfällt, seine Aufgabe übernimmt .spaltenname. */
@media (max-width: 559px) {
  .dtable--eng thead { display: none; }
  .dtable--eng, .dtable--eng caption, .dtable--eng tbody, .dtable--eng tr,
  .dtable--eng tbody th, .dtable--eng tbody td { display: block; }
  .dtable--eng tbody tr { padding-block: .6rem; }
  .dtable--eng tbody tr + tr { border-top: 1px solid rgba(15, 59, 78, .12); }
  .dtable--eng tbody tr + tr td { border-top: 0; }
  .dtable--eng tbody th:first-child,
  .dtable--eng tbody td:first-child,
  .dtable--eng tbody td:last-child,
  .dtable--eng tbody td { padding: .12rem var(--s40); }
  .dtable--eng tbody th[scope="row"] { font-weight: 700; padding-bottom: .2rem; }
  /* Der Betrag steht rechts, auch in der Zeile «Abholung» ohne Spaltenname —
     darum drückt der Name selbst nach links, statt die Zeile zu verteilen. */
  .dtable--eng tbody td {
    display: flex; gap: var(--s30); justify-content: flex-end; align-items: baseline;
  }
  .dtable--eng .spaltenname {
    display: inline; margin-right: auto; font-weight: 400; color: var(--schiefer);
  }

  .liste li { align-items: flex-start; }
  .mats, .facts, .steps, .steps--3, .prods, .prods--shop, .mosaic,
  .swatches { grid-template-columns: 1fr; }
  .tile--gross, .tile--breit { grid-column: span 1; }
  .ftr__grid { grid-template-columns: 1fr; }
  .fab a span { display: none; }
  .fab a { padding: .8rem; }
  .fab svg { width: 20px; height: 20px; }
}

/* Ab hier wird die Kopfleiste eng. Ausgemessen bei 320 px: von 273 px
   Innenbreite gehen 126 px an die drei Knöpfe, 34 px an das Zeichen und rund
   24 px an Abstände — für den Schriftzug bleiben etwa 79 px. Bei .95rem misst
   «schemabehälter.ch» aber 145 px in einer Zeile.
   Deshalb hier, und nur hier, darf er schrumpfen und umbrechen: kleinerer Grad,
   zwei Zeilen mit Silbentrennung (greift über lang="de-CH"). Zwei Zeilen
   bleiben niedriger als ein Knopf, die Leiste wird dadurch nicht höher. */
@media (max-width: 419px) {
  .marke { flex: 0 1 auto; min-width: 0; }
  .marke__unterzeile { display: none; }
  .marke__name {
    white-space: normal; font-size: .8rem; line-height: 1.05;
    overflow-wrap: break-word; hyphens: auto;
  }
  .hdr__in { padding-left: .8rem; gap: .35rem; }
  .iconbtn { width: 40px; height: 40px; }
  .hdr__tools { gap: .2rem; flex: none; }
  .menge button { width: 48px; height: 48px; font-size: 1.35rem; }
  /* Schmale Basis, sonst trägt das Feld seine Wunschbreite in die
     min-content-Rechnung der Warenkorbspalte und sprengt sie. */
  .menge input[type="number"] { flex: 1 1 3rem; min-width: 2.75rem; font-size: var(--t-medium); }
}

/* --- Weniger Bewegung ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .hdr, .mnav, .fab, .ftr, .such, .lb, .crumbs, .btnrow, .prod__tun { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding-top: 0 !important; }
  .card, .sumbox, .tablewrap, .facts__it, .steps__it, .qa, .prod, .stagecard {
    box-shadow: none !important; border: 1px solid #999;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .sec { padding-block: 1rem; }
}