/*
Theme Name: Architektur und Design
Theme URI: https://www.architektur-und-design.ch/
Author: RuossTech AG
Author URI: https://www.ruosstech.ch
Description: Block-Theme für architektur-und-design.ch, die Blech-Manufaktur der
 RuossTech AG in Siebnen SZ. Übernimmt das Designsystem der statischen Fassung
 eins zu eins: Glas-Kopfleiste, Karten, Raster, Blattgrün. Nur Kernblöcke, jeder
 Abschnitt im Website-Editor einzeln bearbeitbar.
Version: 1.3.3
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: architektur-und-design
Tags: full-site-editing, block-patterns, one-column, wide-blocks, custom-colors, custom-logo
*/

/* ==========================================================================
   architektur-und-design.ch — Design System
   RuossTech AG, Siebnen · Design aus Blech

   Tokens übernommen aus dem Theme raclette-schweiz-2026 1.3.9
   (theme.json + assets/css/theme.css) und in Grüntöne übersetzt:

     Theme                          hier
     kaese        #F7B928     ->    --ground      #9cc96b   Seitengrund
     kaese-dunkel #E09A00     ->    --ground-deep #74a83f   Buttons, aktive Nav
     kaese-hell   #FFE7A3     ->    --ground-pale #dcefc0
     tanne        #0F3B2E     ->    unverändert (im Theme bereits grün)
     tanne-tief   #092720     ->    unverändert
     stahl/stahl-hell/weiss/tinte/schiefer/rot -> unverändert

   Radien, Schatten, Abstandsskala, Schriftgrade, Glas-Kopfleiste und
   Schwebeleiste entsprechen den Theme-Werten.
   ========================================================================== */

/* --- Schrift: selbst gehostet, wie im Theme ----------------------------- */
/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Farben */
  --ground:      #9cc96b;   /* Seitengrund, Blattgrün */
  --ground-deep: #74a83f;   /* Buttons, aktive Navigation */
  --ground-pale: #dcefc0;
  --tanne:       #0f3b2e;
  --tanne-tief:  #092720;
  --stahl:       #e6eaec;
  --stahl-hell:  #f4f6f7;
  --weiss:       #ffffff;
  --tinte:       #000000;
  --schiefer:    #3d3d3d;
  --rot:         #d52b1e;

  --glass:       rgba(255, 255, 255, .74);
  --glass-stuck: rgba(255, 255, 255, .9);
  --hairline:    rgba(15, 59, 46, .12);
  --hover:       rgba(15, 59, 46, .07);

  --grad-ground: linear-gradient(135deg, #b6da8c 0%, #9cc96b 55%, #86b856 100%);
  --grad-stahl:  linear-gradient(180deg, #f4f6f7 0%, #e6eaec 100%);

  /* Schatten (Theme: schwebend / schwebend-hoch) */
  --float:      0 1px 2px rgba(15, 59, 46, .08), 0 12px 24px -8px rgba(15, 59, 46, .22),
                0 32px 64px -24px rgba(15, 59, 46, .30);
  --float-high: 0 2px 4px rgba(15, 59, 46, .08), 0 24px 48px -12px rgba(15, 59, 46, .32),
                0 70px 110px -40px rgba(15, 59, 46, .45);

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

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

  /* Abstandsskala */
  --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;
  --inset: clamp(.5rem, 1.4vw, 1.25rem);
  --gut: clamp(1rem, 3.4vw, 3rem);

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

  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23D52B1E'/%3E%3Cpath fill='%23fff' d='M10 5h4v5h5v4h-5v5h-4v-5H5v-4h5z'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--tinte);
  font-family: var(--font);
  font-size: var(--t-medium);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

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

:focus-visible { outline: 3px solid var(--tanne); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tanne); color: #fff; padding: .85rem 1.35rem;
  border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--tinte);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
h3 { font-size: var(--t-large); line-height: 1.15; letter-spacing: -.015em; }
h4 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -.01em; }

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

a { color: var(--tinte); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration: none; }

.lead { font-size: var(--t-large); line-height: 1.45; max-width: 38em; }
.muted { color: var(--schiefer); }
.small { font-size: var(--t-small); }
.xs { font-size: .8125rem; }
.mono-num { font-variant-numeric: tabular-nums; }

.kick {
  display: inline-block; margin: 0 0 .75rem;
  font-size: var(--t-small); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tanne);
}

/* Auszeichnungs-Pille mit Schweizerkreuz */
.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .6rem 1.2rem .6rem .65rem;
  background: var(--weiss); border-radius: var(--r-pill);
  box-shadow: var(--float);
  font-size: var(--t-small); font-weight: 700; color: var(--tinte);
  text-decoration: none;
}
.pill__mark {
  width: 1.55rem; height: 1.55rem; flex: none;
  background: var(--cross) center / contain no-repeat;
}
.pill--flat { box-shadow: none; background: rgba(255, 255, 255, .55); }

/* Ohne Kapsel: Fahne und Text beginnen am linken Rand der Spalte, gleich wie
   Titel und Fliesstext darunter. Gebraucht dort, wo unter der Auszeichnung noch
   eine zweite kleine Zeile folgt — im Hero der Startseite steht unter ihr die
   Rubrik der Folie. Mit Kapsel rückt der Text um 45 Pixel ein, die Rubrik nicht:
   Zwei kurze Zeilen mit verschiedenem Anfang sehen aus wie ein Versehen. */
.pill--bare { padding: 0; background: none; box-shadow: none; gap: .55rem; }

.quote {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.025em;
  max-width: 26ch; margin: 0;
}

/* --- Raster ------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell-w); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--s70); position: relative; }
.section--tight { padding-block: var(--s60); }
.section--top { padding-top: clamp(7rem, 12vw, 10rem); }

.grid { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }

.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-l { grid-template-columns: 1.15fr 1fr; }
  .split--wide-r { grid-template-columns: 1fr 1.15fr; }
  .split--rev > :first-child { order: 2; }
  .split--top { align-items: start; }
  .split > *, .hero__grid > *, .pd > * { min-width: 0; }
}

.head { max-width: 48rem; margin-bottom: var(--s50); }
.head p { margin-top: 1rem; }
.head--row {
  max-width: none; display: flex; flex-wrap: wrap; gap: var(--s40) var(--s60);
  align-items: flex-end; justify-content: space-between;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --bg: var(--ground-deep);
  --fg: var(--tinte);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82em 1.6em;
  background: var(--bg); color: var(--fg);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font); font-size: var(--t-medium); font-weight: 700;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  box-shadow: var(--float);
  transition: transform var(--med), box-shadow var(--med), background-color var(--fast);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--float-high); text-decoration: none; }
.btn:active { transform: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.btn--light { --bg: var(--weiss); }
.btn--dark  { --bg: var(--tanne); --fg: #fff; }
.btn--ghost {
  --bg: transparent; box-shadow: none;
  border: 2px solid rgba(15, 59, 46, .28);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .5); box-shadow: var(--float); }

.btn--block { width: 100%; }
.btn--lg { padding: .95em 1.9em; }
.btn--sm { padding: .6em 1.1em; font-size: var(--t-small); }

.link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: var(--t-small); color: var(--tinte);
  text-decoration: underline; text-underline-offset: 4px;
}
.link:hover { text-decoration: none; gap: .7rem; }
.link::after { content: "→"; text-decoration: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--s40); }

/* --- Kopfleiste: Glas-Pille --------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: var(--inset) var(--gut);
  pointer-events: none;
}
.hdr__in {
  position: relative; isolation: isolate; pointer-events: auto;
  display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.5rem);
  max-width: var(--shell-w); margin-inline: auto;
  min-height: 64px; padding: 8px 8px 8px 20px;
  border-radius: var(--r-pill);
}
.hdr__in::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: var(--float);
  transition: box-shadow var(--med), background-color var(--med);
}
.hdr.is-stuck .hdr__in::before { background: var(--glass-stuck); box-shadow: var(--float-high); }

.brand { display: flex; align-items: center; gap: .6rem; flex: none; text-decoration: none; }
.brand__mark {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  background: var(--tanne); border-radius: 6px; color: #fff;
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__txt b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.025em; white-space: nowrap; }
/* Die Unterzeile ist so weit gesperrt, dass «DESIGN AUS BLECH» genau unter
   «architektur und design» endet — beide Zeilen stehen links und rechts bündig.
   Der Wert ist für Open Sans in dieser Grösse ausgemessen, nicht geschätzt.
   Der negative rechte Rand nimmt den Sperrabstand hinter dem letzten Buchstaben
   wieder weg; sonst würde der Schriftzug fünf Pixel zu breit messen und die
   Navigation unnötig wegschieben. */
.brand__txt span {
  font-size: .6rem; font-weight: 600; letter-spacing: .613em; margin-right: -.613em;
  text-transform: uppercase; color: var(--schiefer);
}

/* Die Leiste trägt Wortmarke, sieben Menüpunkte und drei Knöpfe. Ausgezählt
   braucht das 1295 px; darunter stand die Leiste früher über den Rand hinaus
   und der Anfrage-Knopf lag ausserhalb des Fensters. Zwei Massnahmen:
   umgeschaltet wird erst ab 1440 px, und selbst wenn es dann noch klemmt —
   andere Schriften, längere Menütitel —, gibt die Navigation nach und rollt
   in sich, statt die Knöpfe hinauszuschieben. */
.nav {
  display: none; margin-inline: auto; align-items: center; gap: .15rem;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.brand, .hdr__act { flex: none; }
@media (min-width: 1440px) { .nav { display: flex; } }
.nav a {
  padding: .6em .72em; border-radius: var(--r-pill);
  font-size: var(--t-small); font-weight: 600; text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--fast), color var(--fast);
}
.nav a:hover { background: var(--hover); }
.nav a[aria-current="page"] { background: var(--ground-deep); color: var(--tinte); font-weight: 700; }

.hdr__act { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
@media (min-width: 1440px) { .hdr__act { margin-left: 0; } }

.icon-btn {
  position: relative; flex: none;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--weiss); color: var(--tinte);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--float);
  transition: transform var(--med), box-shadow var(--med);
  text-decoration: none;
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: var(--float-high); }

.cart-btn__n {
  position: absolute; top: -.15rem; right: -.15rem;
  min-width: 1.35rem; height: 1.35rem; padding-inline: .3rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--tanne); color: #fff;
  font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 2px solid var(--weiss);
}
.cart-btn__n[data-empty="1"] { background: var(--schiefer); }

.hdr .btn { box-shadow: none; }
.hdr .btn:hover { box-shadow: var(--float); }
.hdr__cta { display: none; }
@media (min-width: 620px) { .hdr__cta { display: inline-flex; } }

.burger { display: grid; }
@media (min-width: 1440px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.burger span + span { margin-top: 4px; }

/* Mobile Navigation */
.mnav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ground);
  padding: 6.5rem var(--gut) 2.5rem;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--med), transform var(--med), visibility var(--med);
}
.mnav.is-open { opacity: 1; visibility: visible; transform: none; }
.mnav a {
  font-size: clamp(1.5rem, 5.5vw, 2.1rem); font-weight: 700; letter-spacing: -.025em;
  padding: .5rem 0; border-bottom: 2px solid var(--hairline); text-decoration: none;
}
.mnav a:last-of-type { border-bottom: 0; }
.mnav__foot { margin-top: auto; padding-top: 2.5rem; font-size: var(--t-small); }

/* --- Hintergrundbild der Startseite --------------------------------------
   Das Foto der aktuellen Hero-Folie steht hinter der ganzen Seite, gedaempft
   durch einen gruenen Schleier. --bg-durchlass sagt, wie viel vom Foto
   durchkommt: .15 = 15 Prozent Foto, 85 Prozent Gruen.
   Die Ebenen legt pages.js an, sobald der Folienwechsel laeuft.
   ------------------------------------------------------------------------ */
:root { --bg-durchlass: .15; }
html { background: var(--ground); }
body.has-bgshow { background: transparent; }

.bgshow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bgshow__layer {
  position: absolute; inset: 0;
  background: center / cover no-repeat;
  opacity: 0; transition: opacity .9s var(--ease);
}
.bgshow__layer.is-on { opacity: 1; }
/* Der Schleier liegt ueber den Fotos, aber immer noch hinter dem Inhalt. */
.bgshow::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ground); opacity: calc(1 - var(--bg-durchlass));
}
@media (prefers-reduced-motion: reduce) { .bgshow__layer { transition: none; } }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: clamp(7rem, 12vw, 10rem); padding-bottom: var(--s50); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }

/* Die Auszeichnung braucht Abstand zur Rubrik darunter; ohne ihn kleben die
   beiden kleinen Zeilen aneinander. */
.hero__texts > .pill { margin-bottom: 1.1rem; }

.hero__ttl {
  margin: .4em 0 0;
  font-size: clamp(1.9rem, 4.9vw - .5rem, 4.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -.025em;
  color: var(--tinte); max-width: 20ch; text-wrap: balance;
}
.hero__sub { margin-top: 1.2rem; }

/* Wechselnde Folien: alle liegen in derselben Rasterzelle, damit die Höhe
   der höchsten Folie entspricht und beim Wechsel nichts springt. */
.hero__slides, .hero__stage {
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.hero__slide, .hero__shot {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              visibility .55s step-end;
}
.hero__slide.is-on, .hero__shot.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              visibility 0s;
}
.hero__shot { position: relative; }
.hero__shot .stagecard__img { height: 100%; }

/* Navigation */
.hero__nav { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem;
             margin-top: var(--s40); }
.no-js .hero__nav { display: none; }

.hero__arrow {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--weiss); color: var(--tinte);
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--float);
  transition: transform var(--med), box-shadow var(--med);
}
.hero__arrow:hover { transform: translateY(-2px); box-shadow: var(--float-high); }
.hero__hold { margin-left: .2rem; }
.hero__hold .i-play { display: none; }
.hero__hold[aria-pressed="true"] .i-pause { display: none; }
.hero__hold[aria-pressed="true"] .i-play { display: block; }

.hero__dots { display: flex; align-items: center; gap: .4rem; }
.hero__dot {
  width: 1.6rem; height: 1.6rem; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; border-radius: var(--r-pill);
}
.hero__dot > span {
  display: block; position: relative; overflow: hidden;
  width: .55rem; height: .55rem; border-radius: var(--r-pill);
  background: rgba(15, 59, 46, .3);
  transition: width var(--med), background-color var(--med);
}
.hero__dot:hover > span { background: rgba(15, 59, 46, .55); }
.hero__dot[aria-current="true"] > span { width: 2.2rem; background: rgba(15, 59, 46, .28); }

/* Fortschritt in der aktiven Marke — zeigt die 6 Sekunden an */
.hero__dot[aria-current="true"] > span::after {
  content: ""; position: absolute; inset: 0; transform-origin: left;
  background: var(--tanne); border-radius: inherit;
  animation: hero-fill 6s linear forwards;
}
.hero.is-paused .hero__dot[aria-current="true"] > span::after { animation-play-state: paused; }
.hero.is-stopped .hero__dot[aria-current="true"] > span::after { animation: none; background: var(--tanne); }

@keyframes hero-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__shot { transition: none; }
  .hero__dot[aria-current="true"] > span::after { animation: none; background: var(--tanne); }
}

.hero__checks { display: grid; gap: .65rem 1.75rem; margin: var(--s40) 0 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .hero__checks { grid-template-columns: 1fr 1fr; } }
.hero__checks li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--t-small); font-weight: 600; }

.tick {
  width: 1.3rem; height: 1.3rem; flex: none; margin-top: .12rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--tanne); color: #fff;
}
.tick svg { width: .72rem; height: .72rem; }

/* Produktbühne */
.stagecard { position: relative; }
.stagecard__img {
  background: var(--weiss); border-radius: var(--r-l);
  padding: var(--inset); box-shadow: var(--float-high);
  overflow: clip;
}
.stagecard__img img { width: 100%; border-radius: var(--r-m); }
.stagecard__tag, .stagecard__price {
  position: absolute; padding: .6rem 1.2rem;
  border-radius: var(--r-pill); box-shadow: var(--float-high);
  font-size: var(--t-small); font-weight: 700; white-space: nowrap;
}
/* Laengere Auszeichnungen duerfen auf schmalen Bildschirmen umbrechen,
   statt aus der Bildkarte herauszuragen. */
.stagecard__tag { top: -.9rem; left: clamp(.5rem, 2vw, 1.5rem); background: var(--weiss);
                  max-width: calc(100% - 2 * clamp(.5rem, 2vw, 1.5rem));
                  white-space: normal; text-wrap: balance; }
.stagecard__price { bottom: -.9rem; right: clamp(.5rem, 2vw, 1.5rem); background: var(--ground-deep); }

/* --- Karten ------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: .7rem;
  padding: var(--inset);
  background: var(--weiss); border-radius: var(--r-l);
  box-shadow: var(--float);
  text-decoration: none;
  transition: transform var(--med), box-shadow var(--med);
}
a.card:hover, .card--hover:hover { transform: translateY(-3px); box-shadow: var(--float-high); text-decoration: none; }
.card__body { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem 1rem; }
.card p { font-size: var(--t-small); color: var(--schiefer); line-height: 1.55; }
.card h3, .card h2 { color: var(--tinte); }
.card--pad { padding: clamp(1.25rem, 3vw, 2.25rem); }
.card--pad .card__body { padding: 0; }

.fig { position: relative; overflow: clip; border-radius: var(--r-m); background: var(--stahl-hell); }
.fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.fig--tall { aspect-ratio: 3 / 4; }
.fig--sq   { aspect-ratio: 1; }
.fig--wide { aspect-ratio: 16 / 10; }
.fig--43   { aspect-ratio: 4 / 3; }
a.card:hover .fig img, .card--hover:hover .fig img { transform: scale(1.04); }

/* Bento-Raster wie im Theme: 4 Spalten, 2 Reihen */
.mosaic { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .mosaic {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(250px, 23vw));
  }
  .mosaic > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .mosaic > :nth-child(4) { grid-column: 3 / 5; }
}

.tile {
  position: relative; overflow: clip; display: flex;
  border-radius: var(--r-l); min-height: 250px;
  box-shadow: var(--float); text-decoration: none;
  transition: transform var(--med), box-shadow var(--med);
}
a.tile:hover { transform: translateY(-3px); box-shadow: var(--float-high); text-decoration: none; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 39, 32, .9) 0%, rgba(9, 39, 32, .42) 45%, rgba(9, 39, 32, .04) 78%);
}
.tile__t {
  position: relative; z-index: 1; align-self: flex-end;
  padding: clamp(1.1rem, 2.2vw, 2rem); color: #fff;
}
.tile__t h3 { color: #fff; }
.tile__t p { color: rgba(255, 255, 255, .88); font-size: var(--t-small); margin: .35rem 0 0; max-width: 34ch; }
.mosaic > :nth-child(1) .tile__t h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); }

/* Zahlenband */
.facts { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.facts > div { background: var(--weiss); border-radius: var(--r-l); padding: clamp(1.25rem, 2.4vw, 1.85rem); box-shadow: var(--float); }
.facts b {
  display: block; margin-bottom: .25em;
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.025em; line-height: 1;
  color: var(--tinte);
}
.facts span { display: block; font-size: var(--t-small); color: var(--schiefer); line-height: 1.5; }

/* Ablauf */
.steps { counter-reset: s; display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); margin: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps > li {
  counter-increment: s; list-style: none;
  background: var(--weiss); border-radius: var(--r-l);
  padding: clamp(1.25rem, 2.4vw, 1.85rem); box-shadow: var(--float);
}
.steps > li::before {
  content: counter(s); display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem; margin-bottom: 1rem;
  background: var(--stahl-hell); color: var(--tanne); border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 700;
}
.steps h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.steps p { font-size: var(--t-small); color: var(--schiefer); }

/* Materialkarten */
.mats { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.mats article { background: var(--weiss); border-radius: var(--r-l); padding: var(--inset); box-shadow: var(--float); }
.mats__t { padding: 1rem .8rem .5rem; }
.mats__t h3 { font-size: 1.125rem; margin-bottom: .4rem; }
.mats__t p { font-size: var(--t-small); color: var(--schiefer); }

/* Horizontaler Streifen */
.rail { display: flex; gap: clamp(.75rem, 1.6vw, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory;
        padding: .25rem .25rem 1.5rem; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: rgba(15, 59, 46, .3); border-radius: 4px; }
.rail > * { flex: 0 0 min(80vw, 19rem); scroll-snap-align: start; }

/* --- Rechner und Checkliste --------------------------------------------- */
.calc { background: var(--weiss); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--float-high); }
.calc__label { display: block; margin-bottom: .55rem; font-size: var(--t-small); color: var(--schiefer); }
.calc__row { display: flex; align-items: center; gap: 1rem; }
.calc__row + .calc__row { margin-top: 1.25rem; }

.calc input[type="range"] {
  flex: 1; min-width: 0; height: 8px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--stahl); border-radius: var(--r-pill);
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--ground-deep); border: 3px solid #fff; box-shadow: var(--float); cursor: pointer;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: var(--r-pill);
  background: var(--ground-deep); border: 3px solid #fff; cursor: pointer;
}
.calc input[type="number"] {
  width: 5.5rem; flex: none; padding: .6rem .7rem;
  background: var(--stahl-hell); border: 2px solid transparent; border-radius: var(--r-s);
  font: inherit; font-size: var(--t-small); font-weight: 700; text-align: center;
  color: var(--tinte); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.calc input[type="number"]::-webkit-outer-spin-button,
.calc input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc input[type="number"]:focus { outline: 0; border-color: var(--tanne); background: #fff; }

.calc__out { display: grid; gap: 1rem; margin: 1.75rem 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.calc__out div { padding: 1.1rem 1.25rem; border-radius: var(--r-m); background: var(--stahl-hell); }
.calc__out span { display: block; font-size: var(--t-small); color: var(--schiefer); }
.calc__out b {
  display: block; margin-top: .2em;
  font-size: var(--t-large); font-weight: 700; letter-spacing: -.02em;
  color: var(--tinte); font-variant-numeric: tabular-nums;
}
.calc__note { margin: 1.5rem 0 0; font-size: var(--t-small); color: var(--schiefer); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--t-small); color: var(--schiefer); line-height: 1.5; }

/* --- Listen ------------------------------------------------------------- */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checks li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--t-small); line-height: 1.5; }
.checks li::before {
  content: ""; flex: none; width: .45rem; height: .45rem; margin-top: .5rem;
  background: var(--tanne); border-radius: var(--r-pill);
}
.card .checks li { color: var(--schiefer); }

.deflist { display: grid; margin: 0; }
.deflist > div { display: grid; gap: .2rem 1.5rem; padding: .8rem 0; border-bottom: 2px solid var(--hairline); font-size: var(--t-small); }
.deflist > div:last-child { border-bottom: 0; }
@media (min-width: 640px) { .deflist > div { grid-template-columns: 11rem 1fr; } }
.deflist dt { color: var(--schiefer); }
.deflist dd { margin: 0; font-weight: 600; }

/* --- Shop --------------------------------------------------------------- */
/* Chipreihen brauchen mehr Luft zwischen den Zeilen als zwischen den Chips.
   Bei gleichem Abstand in beide Richtungen verschwimmen umbrochene Reihen zu
   einem Block, und man sieht nicht mehr, was zusammengehört. Der Abstand nach
   oben trennt sie von dem, was darüber steht — sonst berühren sich Knopfreihe
   und Filter. */
.filters {
  display: flex; flex-wrap: wrap;
  gap: .85rem .5rem;
  margin-top: var(--s50);
  margin-bottom: var(--s50);
}
.chip {
  padding: .6em 1.15em; border: 2px solid rgba(15, 59, 46, .2); border-radius: var(--r-pill);
  background: transparent; color: var(--tinte); font: inherit;
  font-size: var(--t-small); font-weight: 700; cursor: pointer;
  transition: background-color var(--fast), border-color var(--fast), color var(--fast);
}
.chip:hover { background: rgba(255, 255, 255, .5); }
.chip[aria-pressed="true"] { background: var(--ground-deep); border-color: var(--ground-deep); }

.prods { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }

.prod {
  display: flex; flex-direction: column;
  background: var(--weiss); border-radius: var(--r-l);
  padding: var(--inset); box-shadow: var(--float);
  transition: transform var(--med), box-shadow var(--med);
}
.prod:hover { transform: translateY(-3px); box-shadow: var(--float-high); }
.prod__fig { position: relative; overflow: clip; border-radius: var(--r-m); background: var(--stahl-hell); aspect-ratio: 16 / 10; display: block; }
.prod__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.prod:hover .prod__fig img { transform: scale(1.04); }
.prod__tag {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94); box-shadow: var(--float);
  font-size: .6875rem; font-weight: 700; color: var(--tinte);
}
.prod__tag--fill { background: var(--ground-deep); }
.prod__b { padding: .9rem .8rem .6rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.prod__cat { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--schiefer); }
.prod__n { font-size: 1.125rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--tinte); text-decoration: none; }
a.prod__n:hover { text-decoration: underline; }
.prod__d { font-size: var(--t-small); color: var(--schiefer); }
.prod__foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .85rem; flex-wrap: wrap; }

/* Preis: netto, mit Zusatz — wie im Theme */
.price { display: flex; flex-direction: column; gap: .05rem; }
.price__now { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.price__vat { font-size: .8125rem; font-weight: 400; color: var(--schiefer); white-space: nowrap; }
.price--lg .price__now { font-size: clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing: -.025em; }

/* Produktdetail */
.pd { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .pd { grid-template-columns: 1.1fr 1fr; align-items: start; } }
@media (min-width: 980px) { .pd__buy { position: sticky; top: 7.5rem; } }
.pd__media { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: minmax(0, 1fr); }
.pd__main { background: var(--weiss); border-radius: var(--r-l); padding: var(--inset); box-shadow: var(--float); }
.pd__main img { width: 100%; border-radius: var(--r-m); }
.pd__thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.pd__thumbs .fig { box-shadow: var(--float); }

.qty { display: inline-flex; align-items: center; background: var(--stahl-hell); border-radius: var(--r-pill); padding: .25rem; }
.qty button {
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-pill);
  color: var(--tinte); font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer;
  transition: background-color var(--fast);
}
.qty button:hover { background: #fff; }
.qty input {
  width: 3rem; height: 2.6rem; border: 0; background: transparent;
  color: var(--tinte); font: inherit; font-size: var(--t-small); font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: 0; }

.vat-note {
  display: flex; gap: .7rem; padding: 1rem 1.2rem; margin-top: 1.1rem;
  background: var(--stahl-hell); border-radius: var(--r-m);
  font-size: var(--t-small); color: var(--schiefer); line-height: 1.5;
}
.vat-note > span:first-child {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .1rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--tanne); color: #fff; font-size: .68rem; font-weight: 700; font-style: italic;
}

/* --- Warenkorb / Kasse -------------------------------------------------- */
.cartlines { background: var(--weiss); border-radius: var(--r-l); padding: var(--inset); box-shadow: var(--float); }
.cartline { display: grid; gap: 1rem; grid-template-columns: 4.75rem 1fr; padding: clamp(.9rem, 1.6vw, 1.25rem); }
.cartline + .cartline { border-top: 2px solid var(--hairline); }
@media (min-width: 760px) { .cartline { grid-template-columns: 6.5rem 1fr auto; align-items: start; } }
.cartline__img { aspect-ratio: 1; background: var(--stahl-hell); border-radius: var(--r-s); overflow: clip; }
.cartline__img img { width: 100%; height: 100%; object-fit: cover; }
.cartline__m { display: flex; flex-direction: column; gap: .2rem; }
.cartline__m h3 { font-size: 1.125rem; }
.cartline__m .small, .cartline__m .xs { color: var(--schiefer); }
.cartline__ctl { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; flex-wrap: wrap; }
.cartline__r { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; grid-column: 2; }
@media (min-width: 760px) { .cartline__r { grid-column: auto; align-items: flex-end; text-align: right; } }
.cartline__sum { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.rm {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--schiefer); font: inherit; font-size: .8125rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.rm:hover { color: var(--tinte); }

.sumbox { background: var(--weiss); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--float); }
@media (min-width: 980px) { .sumbox--sticky { position: sticky; top: 7.5rem; } }
.sumbox h2 { font-size: var(--t-large); margin-bottom: 1.25rem; }

.srow { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding-block: .5rem; font-size: var(--t-small); }
.srow span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.srow--muted { color: var(--schiefer); }
.srow--muted span:last-child { font-weight: 400; }
.srow--rule { border-top: 2px solid var(--hairline); margin-top: .5rem; padding-top: 1rem; }
.srow--total { padding-top: .25rem; }
.srow--total span { font-size: var(--t-large); font-weight: 700; letter-spacing: -.02em; }
.srow--vat span:last-child { font-weight: 700; }

/* MwSt-Ausweis */
.vatbox { margin-top: 1.25rem; background: var(--stahl-hell); border-radius: var(--r-m); overflow: clip; }
.vatbox__h {
  padding: .8rem 1.15rem; background: var(--tanne); color: #fff;
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.vattbl { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.vattbl th, .vattbl td { padding: .6rem 1.15rem; text-align: right; font-variant-numeric: tabular-nums; }
.vattbl th:first-child, .vattbl td:first-child { text-align: left; font-variant-numeric: normal; }
.vattbl thead th { color: var(--schiefer); font-weight: 600; border-bottom: 2px solid var(--hairline); }
.vattbl tbody td { color: var(--schiefer); }
.vattbl tbody tr + tr td { border-top: 1px solid var(--hairline); }
.vattbl tfoot td { border-top: 2px solid rgba(15, 59, 46, .22); font-weight: 700; color: var(--tinte); }

.empty { text-align: center; padding: clamp(2.5rem, 7vw, 5rem) 1rem; background: var(--weiss); border-radius: var(--r-l); box-shadow: var(--float); }
.empty h2 { margin-bottom: .85rem; }
.empty p { margin-inline: auto; color: var(--schiefer); }
.empty .btn-row { justify-content: center; }

/* --- Formulare ---------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.fields { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field > label { font-size: var(--t-small); font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--stahl-hell); color: var(--tinte);
  border: 2px solid transparent; border-radius: var(--r-s);
  font: inherit; font-size: var(--t-small);
  transition: border-color var(--fast), background-color var(--fast);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--stahl); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--tanne); background: #fff; }
.field input:user-invalid, .field select:user-invalid { border-color: var(--rot); }
.field select {
  appearance: none; padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 49%, var(--schiefer) 50%),
                    linear-gradient(-45deg, transparent 49%, var(--schiefer) 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .78rem) 55%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field__hint { font-size: .8125rem; color: var(--schiefer); }

fieldset { border: 0; padding: 0; margin: 0 0 .5rem; }
legend { padding: 0 0 1rem; font-size: var(--t-large); font-weight: 700; letter-spacing: -.015em; }

.radios { display: grid; gap: .6rem; }
.radio {
  display: flex; gap: .85rem; align-items: flex-start; cursor: pointer;
  padding: 1rem 1.15rem; background: var(--stahl-hell);
  border: 2px solid transparent; border-radius: var(--r-s);
  transition: border-color var(--fast), background-color var(--fast);
}
.radio:hover { background: var(--stahl); }
.radio:has(input:checked) { border-color: var(--tanne); background: #fff; }
.radio input { margin: .3rem 0 0; accent-color: var(--tanne); flex: none; }
.radio b { display: block; font-size: var(--t-small); font-weight: 700; }
.radio small { display: block; margin-top: .2rem; font-size: .8125rem; color: var(--schiefer); line-height: 1.5; }
.radio__p { margin-left: auto; font-size: var(--t-small); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.checkbox { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-small); cursor: pointer; }
.checkbox input { margin: .3rem 0 0; accent-color: var(--tanne); flex: none; }

.notice { padding: 1.1rem 1.3rem; border-radius: var(--r-m); font-size: var(--t-small); line-height: 1.55; }
.notice--info { background: var(--weiss); box-shadow: var(--float); }
.notice--ok { background: var(--weiss); box-shadow: var(--float); border-left: 5px solid var(--tanne); }

/* --- Schwebeleiste (Dock) ----------------------------------------------- */
.fab {
  position: fixed; right: var(--inset); bottom: var(--inset); z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.fab a {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-width: 54px; height: 54px; padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--weiss); color: var(--tinte);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  box-shadow: var(--float-high);
  transition: transform var(--med), box-shadow var(--med);
}
.fab a:hover { transform: translateY(-3px); }
.fab__ask { background: var(--ground-deep) !important; }
.fab__ask span { display: none; }
@media (min-width: 480px) { .fab__ask span { display: inline; } }

/* --- Hinweis zur Speicherung im Browser ---------------------------------
   Steht unten links, damit er die Schwebeknoepfe rechts nicht verdeckt. Auf
   schmalen Bildschirmen nimmt er die ganze Breite; die Knoepfe ruecken dann
   um --hinweis-hoch nach oben (ui.js misst den Kasten).
   ------------------------------------------------------------------------ */
.hinweis {
  position: fixed; z-index: 95;
  left: var(--inset); bottom: var(--inset);
  width: min(28rem, calc(100vw - 2 * var(--inset)));
  background: var(--weiss); border-radius: var(--r-l);
  box-shadow: var(--float-high);
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--med), transform var(--med);
}
.hinweis.is-on { opacity: 1; transform: none; }
.hinweis__t { margin: 0; font-size: var(--t-medium); font-weight: 700; letter-spacing: -.01em; }
.hinweis__x { margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--schiefer); }
.hinweis__akt { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: 1.1rem; }
.hinweis__akt .link { font-size: var(--t-small); }

@media (max-width: 899px) {
  .hinweis { right: var(--inset); width: auto; }
  /* Schwebeknoepfe ueber den Hinweis heben, solange er offen ist */
  .fab { bottom: calc(var(--inset) + var(--hinweis-hoch, 0px)); transition: bottom var(--med); }
}
@media (prefers-reduced-motion: reduce) {
  .hinweis { transition: none; }
  .fab { transition: none; }
}

/* --- Mini-Warenkorb ----------------------------------------------------- */
.drawer {
  position: fixed; top: clamp(5.5rem, 9vw, 7rem); right: var(--inset);
  z-index: 120; width: min(24rem, calc(100vw - 2 * var(--inset)));
  background: var(--weiss); border-radius: var(--r-l);
  box-shadow: var(--float-high); padding: 1.1rem; display: flex; gap: .9rem;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--med), transform var(--med), visibility var(--med);
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__img { width: 4rem; aspect-ratio: 1; flex: none; border-radius: var(--r-s); overflow: clip; background: var(--stahl-hell); }
.drawer__img img { width: 100%; height: 100%; object-fit: cover; }
.drawer__b { flex: 1; min-width: 0; }
.drawer__b b { display: block; font-size: var(--t-small); font-weight: 700; }
.drawer__b span { display: block; font-size: .8125rem; color: var(--schiefer); margin-top: .15rem; }
.drawer__act { display: flex; gap: .45rem; margin-top: .8rem; }

/* --- Fusszeile ---------------------------------------------------------- */
.ftr {
  margin-top: var(--s70);
  background: var(--grad-ground);
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding-block: var(--s60) 1.5rem;
}
.ftr .ftr__wm {
  margin: 0 0 var(--s50); max-width: none;
  font-size: clamp(1.8rem, .8rem + 4vw, 4.5rem);
  font-weight: 700; line-height: .95; letter-spacing: -.025em; color: var(--tinte);
}
.ftr__top { display: grid; gap: var(--s50); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .ftr__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ftr__top { grid-template-columns: 1fr 1fr 1fr 1.1fr; } }
.ftr h4 { font-size: var(--t-small); font-weight: 700; margin-bottom: 1rem; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ftr a { font-size: var(--t-small); }
.ftr address { font-style: normal; font-size: var(--t-small); line-height: 1.8; }
.ftr__top p { font-size: var(--t-small); }
.ftr__bot {
  display: flex; flex-wrap: wrap; gap: .85rem 2rem; align-items: center;
  margin-top: var(--s60); padding-top: 1.35rem;
  border-top: 2px solid var(--hairline);
  font-size: .8125rem;
}
.ftr__bot nav { display: flex; flex-wrap: wrap; gap: 1.15rem; margin-left: auto; }
.ftr__bot a { font-size: .8125rem; }

/* --- Prose (Rechtliches) ------------------------------------------------ */
.prose { max-width: 44rem; background: var(--weiss); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--float); }
.prose h2 { font-size: var(--t-large); margin: 2.25rem 0 .75rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.125rem; margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--schiefer); font-size: var(--t-small); line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1em; display: grid; gap: .4rem; }
.prose code { background: var(--stahl-hell); border-radius: 4px; padding: .1rem .35rem; font-size: .875em; }
.prose strong { color: var(--tinte); }

/* --- Reveal ------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--slow), transform var(--slow); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .07s; }
[data-reveal][data-d="2"] { transition-delay: .14s; }
[data-reveal][data-d="3"] { transition-delay: .21s; }
[data-reveal][data-d="4"] { transition-delay: .28s; }

.no-js [data-reveal] { opacity: 1; transform: none; }

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

/* --- Print -------------------------------------------------------------- */
@media print {
  .hdr, .mnav, .drawer, .fab, .ftr, .btn, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .sumbox, .prose, .vatbox, .cartlines { box-shadow: none; border: 1px solid #999; }
}

/* --- Referenzen, Galerien, Lightbox ------------------------------------- */
.refnav { display: flex; flex-wrap: wrap; gap: .85rem .5rem; }
.chip--link { text-decoration: none; display: inline-flex; align-items: center; font-weight: 600; font-size: .8125rem; }
.refs { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: minmax(0, 1fr); }
.ref { scroll-margin-top: 7rem; }
.ref__head { padding: clamp(.75rem, 1.6vw, 1.5rem) clamp(.75rem, 1.6vw, 1.5rem) .5rem; }
.ref__head h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.ref__txt { margin-top: .85rem; color: var(--schiefer); font-size: var(--t-small); max-width: 62ch; }
.ref__list { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ref__list li { font-size: .8125rem; }
@media (min-width: 900px) {
  .ref { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .ref__head { padding-right: 0; }
}

.gal { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
.gal__it {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: clip;
  border-radius: var(--r-s); background: var(--stahl-hell);
  transition: transform var(--med), box-shadow var(--med);
}
.gal__it img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gal__it:hover { transform: translateY(-2px); box-shadow: var(--float); }
.gal__it:hover img { transform: scale(1.05); }
.gal--cap { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .8rem; }
.gal__cap {
  position: absolute; left: .55rem; bottom: .55rem; padding: .3rem .7rem;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .92);
  font-size: .75rem; font-weight: 700; color: var(--tinte); box-shadow: var(--float);
}
.ref .gal { padding: var(--inset); padding-top: 0; }
@media (min-width: 900px) { .ref .gal { padding-top: var(--inset); } }

.lb {
  position: fixed; inset: 0; z-index: 300; border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: rgba(9, 39, 32, .94); color: #fff;
}
.lb::backdrop { background: transparent; }
.lb__fig { margin: 0; width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb__img { width: 100%; height: 100%; object-fit: contain; padding: clamp(.5rem, 3vw, 2.5rem); }
.lb__cap {
  padding: .75rem clamp(1rem, 4vw, 4rem) 1.25rem; text-align: center;
  font-size: var(--t-small); color: rgba(255, 255, 255, .85);
}
.lb__cap b { color: #fff; font-variant-numeric: tabular-nums; }
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: var(--r-pill);
  cursor: pointer; transition: background-color var(--fast);
}
.lb__btn:hover { background: rgba(255, 255, 255, .3); }
.lb__prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lb__next { right: clamp(.5rem, 2vw, 1.5rem); }
.lb__close { position: absolute; top: clamp(.5rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 1.5rem); transform: none; }
.lb:focus-visible { outline: 0; }
.lb__btn:focus-visible { outline: 3px solid #fff; }

/* --- Ergänzungen: Team, Bilder, Shop-Gruppen ---------------------------- */
.team__role { font-size: var(--t-small); color: var(--schiefer); margin: 0; }
.fig--contain { background: #fff; }
.fig--contain img { object-fit: contain; padding: .75rem; }
.prods__h { grid-column: 1 / -1; font-size: var(--t-large); margin-top: var(--s40); padding-bottom: .25rem; border-bottom: 2px solid var(--hairline); }
.prods__h:first-child { margin-top: 0; }
.prod__fig--render { background: #fff; }
.prod__fig--render img { object-fit: contain; padding: .5rem; }
.pd__main--render img { object-fit: contain; aspect-ratio: 4 / 3; background: #fff; }
.prose--wide { max-width: 60rem; }
.prose ol { padding-left: 1.2rem; margin: 0 0 1em; display: grid; gap: .6rem; }
.prose .fig img { transition: none; }
.field input[type="file"] { padding: .6rem .8rem; }
.field input[type="file"]::file-selector-button {
  margin-right: .8rem; padding: .45em 1em; border: 0; border-radius: var(--r-pill);
  background: var(--ground-deep); color: var(--tinte); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
}

/* --- Schmale Geräte ------------------------------------------------------
   Die Grenze liegt bei 519 px, nicht mehr bei 419: Schriftzug samt Unterzeile,
   drei Knöpfe und die Innenabstände brauchen zusammen rund 431 px. Bei 480 px
   ginge es rechnerisch gerade noch auf — ohne jeden Spielraum, und ein
   Ersatzschriftschnitt beim ersten Laden misst anders. Darunter greift die
   kompakte Kopfleiste. */
@media (max-width: 519px) {
  /* Im Kopf stehen jetzt drei Knöpfe: Suche, Warenkorb, Menü. Damit auf einem
     360-Pixel-Gerät nichts über den Rand ragt, werden die Knöpfe etwas kleiner
     und der Schriftzug darf auf zwei Zeilen umbrechen. Zwei Zeilen bleiben
     niedriger als ein Knopf — der Kopf wird dadurch nicht höher. */
  .hdr__in { padding-left: 12px; padding-right: 12px; gap: .35rem; }
  /* Erst hier darf der Schriftzug schmaler werden — am Desktop nie, sonst
     schneidet die Navigation ihn an. */
  .brand { flex: 0 1 auto; min-width: 0; gap: .45rem; }
  .brand__mark { width: 1.75rem; height: 1.75rem; }
  .brand__txt { min-width: 0; }
  .brand__txt b { font-size: .88rem; white-space: normal; }
  .brand__txt span { display: none; }
  .hdr__act { gap: .25rem; }
  .icon-btn { width: 42px; height: 42px; }
}
.pd__buy h1 { font-size: clamp(1.6rem, 1rem + 3.2vw, 3rem); overflow-wrap: anywhere; hyphens: auto; }

/* --- Mobil: Fotos zuerst -------------------------------------------------
   Auf schmalen Bildschirmen rückt das Bild über den Text — das Objekt fällt
   als Erstes ins Auge, Titel, Buttons und Aufzählungen folgen darunter.
   Ab Tablet-/Desktopbreite gilt wieder die Reihenfolge aus dem Markup.
   ------------------------------------------------------------------------ */
@media (max-width: 979px) {
  /* Hero: Produktbühne über Kicker, Titel und Checkliste */
  .hero__stage,
  .hero__grid > .stagecard { order: -1; }
  /* Der Preisknopf sitzt unten am Bild und braucht darunter etwas Luft */
  .hero__grid > .stagecard, .hero__stage { margin-bottom: .9rem; }

  /* Die Folien-Steuerung gehoert direkt unter das Bild: Pfeile und Punkte
     stehen dort, wo der Blick nach dem Foto hinfaellt, und nicht erst
     hinter Titel, Buttons und Checkliste. */
  .hero__texts { display: flex; flex-direction: column; }
  .hero__texts > .hero__nav { order: -1; margin: 0 0 1.25rem; }
}

@media (max-width: 899px) {
  /* Zweispaltige Abschnitte: Bildkarte über den Fliesstext */
  .split > .card:last-child:has(> .fig:first-child) { order: -1; }

  /* Referenzen: Galerie über Kategorie, Titel und Leistungsliste */
  .ref .gal { order: -1; padding: var(--inset) var(--inset) 0; }
  .ref__head { padding-top: clamp(.4rem, 1.2vw, .9rem); }
}

/* --- Brotkrumen ---------------------------------------------------------- */
.crumbs { padding-top: clamp(6.5rem, 11vw, 9rem); font-size: .8125rem; color: var(--schiefer); }
.crumbs .shell { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.crumbs a { color: var(--schiefer); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--tinte); }
.crumbs span[aria-hidden] { opacity: .5; }
.crumbs + .section--top, .crumbs + .hero { padding-top: var(--s50); }

/* --- Frage und Antwort --------------------------------------------------- */
.qa-list { display: grid; gap: .8rem; }
.qa { background: var(--weiss); border-radius: var(--r-m); padding: clamp(1.1rem, 2.2vw, 1.6rem); box-shadow: var(--float); }
.qa h3 { font-size: 1.0625rem; line-height: 1.3; }
.qa p { margin: .6rem 0 0; font-size: var(--t-small); line-height: 1.6; color: var(--schiefer); max-width: 70ch; }

/* --- Datentabelle -------------------------------------------------------- */
.dtable { width: 100%; border-collapse: collapse; background: var(--weiss); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--float); font-size: var(--t-small); }
.dtable th, .dtable td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.dtable thead th { background: var(--tanne); color: #fff; font-size: .8125rem; font-weight: 700; letter-spacing: .03em; border-bottom: 0; white-space: nowrap; }
.dtable tbody th { font-weight: 700; color: var(--tinte); white-space: nowrap; }
.dtable tbody td { color: var(--schiefer); }
.dtable tbody tr:last-child th, .dtable tbody tr:last-child td { border-bottom: 0; }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinte); font-weight: 700; }
.dtable a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Varianten ----------------------------------------------------------- */
@media (min-width: 880px) { .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.checks--warn li::before { background: var(--rot); }

/* Sprungziele nicht unter die feste Kopfleiste schieben */
[id] { scroll-margin-top: clamp(6rem, 10vw, 7.5rem); }

/* --- Breite Tabellen scrollen in sich, statt die Seite zu sprengen -------- */
.tablewrap { overflow-x: auto; scrollbar-width: thin; }
.tablewrap::-webkit-scrollbar { height: 4px; }
.tablewrap::-webkit-scrollbar-thumb { background: rgba(15, 59, 46, .3); border-radius: 4px; }
/* Karte auf den Rahmen legen, damit der Schatten nicht vom Scrollbereich abgeschnitten wird */
.tablewrap:has(.dtable) { background: var(--weiss); border-radius: var(--r-m); box-shadow: var(--float); }
.tablewrap:has(.dtable) .dtable { box-shadow: none; border-radius: 0; }
/* Materialtabelle darf umbrechen, Massangaben nicht */
.dtable--wrap tbody th { white-space: normal; min-width: 8.5rem; }

/* --- Lange deutsche Komposita brechen lassen ----------------------------- */
/* «Pulverbeschichtete» ist auf einem 390-px-Display breiter als der Schirm.
   Die Seite ist auf de-CH gestellt, damit trennt der Browser korrekt. */
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; }
/* H1 ausserhalb des Heros mitwachsen lassen statt fix bei 3 rem */
h1 { font-size: clamp(2.05rem, 1.25rem + 3.4vw, 3rem); }
.hero__ttl { font-size: clamp(1.9rem, 4.9vw - .5rem, 4.4rem); }

/* Öffnungszeiten in der Fusszeile */
.ftr__zeiten { margin-top: 1.25rem; font-size: var(--t-small); line-height: 1.7; }
.ftr__zeiten b { display: block; }

/* --- Suche mit Sprachknopf ----------------------------------------------- */
.no-js .such-knopf { display: none; }

.such {
  position: fixed; inset: 0; z-index: 300; border: 0; padding: 0; margin: 0;
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: rgba(9, 39, 32, .72); color: var(--tinte);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.such::backdrop { background: transparent; }
.such__box {
  width: min(40rem, calc(100vw - 2 * var(--gut)));
  margin: clamp(4rem, 12vh, 9rem) auto 0;
  background: var(--weiss); border-radius: var(--r-l);
  box-shadow: var(--float-high); overflow: clip;
}
.such__feld { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; }
.such__lupe { flex: none; color: var(--schiefer); margin-left: .35rem; }
.such__feld input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: .7rem .2rem;
  font: inherit; font-size: var(--t-large); font-weight: 600; color: var(--tinte);
}
.such__feld input::placeholder { color: var(--schiefer); font-weight: 400; }
.such__feld input:focus { outline: 0; }
.such__feld input::-webkit-search-cancel-button { -webkit-appearance: none; }

.such__mic, .such__zu {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--stahl-hell); color: var(--tinte); border: 0;
  border-radius: var(--r-pill); cursor: pointer;
  transition: background-color var(--fast), color var(--fast);
}
.such__mic:hover, .such__zu:hover { background: var(--stahl); }
.such__mic.is-on { background: var(--rot); color: #fff; animation: such-puls 1.4s ease-in-out infinite; }
@keyframes such-puls { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .such__mic.is-on { animation: none; } }

.such__hinweis {
  margin: 0; padding: 0 1.35rem .8rem; font-size: .8125rem; color: var(--schiefer);
  border-bottom: 2px solid var(--hairline);
}
.such__erg { list-style: none; margin: 0; padding: .5rem; max-height: min(26rem, 50vh); overflow-y: auto; }
.such__it {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .75rem .9rem; border-radius: var(--r-s); text-decoration: none;
}
.such__it:hover, .such__it:focus-visible { background: var(--stahl-hell); text-decoration: none; }
.such__tt { font-size: var(--t-small); font-weight: 700; color: var(--tinte); }
.such__bb {
  font-size: .8125rem; color: var(--schiefer); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.such__leer { padding: 1.1rem .9rem; }
.such__leer p { margin: 0 0 .5rem; font-size: var(--t-small); }