/* ==========================================================================
   Tidox Website
   Layout und Effekte. Farben, Schriften und Abstände kommen aus
   brand/tokens.css. Hier steht nichts, was dort hingehört.
   ========================================================================== */

/* ---- Schriften ----------------------------------------------------------
   Montserrat liegt selbst auf dem Server unter assets/fonts/. Frueher kam
   sie von fonts.googleapis.com; damit ging bei jedem Seitenaufruf die
   IP-Adresse der Besucher an Google, ohne dass jemand zugestimmt haette.
   Die Dateien stammen aus dem Google-Fonts-Projekt und stehen unter der
   SIL Open Font License 1.1.

   Nur die Schnitte, die das Layout wirklich benutzt: 400 Fliesstext,
   500 Auszeichnungen, 600 Ueberschriften, 700 aktiver Navigationspunkt.
   Je Schnitt ein Satz latin und einer latin-ext; der Browser laedt anhand
   der unicode-range nur, was die Seite an Zeichen braucht.
   -------------------------------------------------------------------- */

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ankersprünge auf der Startseite gleiten, statt zu springen.
   Verweise von Unterseiten laden neu und springen wie gewohnt. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Auf Telefonen und Tablets kein weiches Nachlaufen beim Scrollen. Das
   Betriebssystem bringt dort sein eigenes Schwungverhalten mit; zwei
   Verzoegerungen uebereinander fuehlen sich zaeh an. Am Zeigergeraet bleibt
   der Effekt. */
@media (pointer: coarse) { html { scroll-behavior: auto; } }

.wrap {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
.wrap--narrow { max-width: 820px; }

/* Sektionsrhythmus. Großzügig, wie in der Referenz. */
.sec { padding: clamp(64px, 9vw, 128px) 0; position: relative; overflow-x: clip; }
.sec--tight { padding: clamp(48px, 6vw, 80px) 0; }
.sec--sand { background: var(--sand); }

.sec-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 64px); }
.sec-head .t-kicker { display: block; margin-bottom: var(--space-2); }
.sec-head p { color: var(--text-muted); margin: var(--space-3) 0 0; }

.lead { font-size: var(--text-lg); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); color: var(--text-muted); }

.sec > .wrap { position: relative; z-index: 1; }

/* ---- Kopfzeile -------------------------------------------------------- */
/* Ueber dem Hero liegt sie transparent mit weisser Schrift und spannt die
   volle Breite. Sobald der Hero durchgescrollt ist, wird sie zur hellen
   Leiste mit dunkler Schrift, sonst waere Weiss auf Cream unlesbar. */

.bar {
  position: static; z-index: 50;
  height: 80px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* Volle Breite statt zentriertem Behaelter, wie in der Referenz. */
.bar-inner {
  width: 100%; padding: 0 clamp(20px, 3.5vw, 52px);
  display: flex; align-items: center; gap: var(--space-4);
}

/* Liegt ueber dem Hero, bleibt aber im Fluss: sie scrollt weg,
   waehrend der Hero darunter stehen bleibt. */
.bar--overlay {
  position: relative; z-index: 4; margin-bottom: -80px;
  background: transparent; backdrop-filter: none;
  border-bottom-color: transparent;
  color: #fff;
}

.bar-nav { display: flex; align-items: center; gap: var(--space-4); flex: 1; }
.bar-nav a {
  color: inherit; text-decoration: none;
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  position: relative; padding: 4px 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* Die sichtbare Sektion wird fett ausgezeichnet, nicht unterstrichen
   und nicht eingefaerbt. Damit der Wechsel keine Breite verschiebt,
   reserviert ein unsichtbarer Zwilling die fette Laufweite. */
.bar-nav a::before {
  content: attr(data-label);
  display: block; height: 0; overflow: hidden; visibility: hidden;
  font-weight: 700; pointer-events: none;
}
.bar-nav a.is-active { font-weight: 700; }

.bar-logo { height: 32px; width: auto; display: block; }
.bar-brand { display: flex; align-items: center; }
/* Weisse Wortmarke ueber dem Bild. */
.bar--overlay .bar-logo { content: url("../brand_assets/tidox-logo-light.png"); }

.bar-right { display: flex; align-items: center; gap: var(--space-3); flex: 1; justify-content: flex-end; }
.bar .bar-tel {
  font-size: var(--text-sm); font-weight: 600; color: inherit;
  text-decoration: none; white-space: nowrap;
}
.bar .bar-tel:hover { opacity: 0.75; color: inherit; }
.bar-shop { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.bar--overlay .bar-shop { color: rgba(255,255,255,0.82); }
.ext { font-size: 0.85em; opacity: 0.7; }

/* Schaltflaeche in der Kopfzeile.
   Grundzustand ist die Markenfarbe, damit sie auf Unterseiten ohne Hero
   lesbar bleibt. Nur ueber dem Hero-Bild wird sie durchsichtig mit
   weisser Schrift und weissem Rand. */
.t-btn--nav {
  background: var(--accent); color: var(--text-on-accent);
  border: 1px solid transparent; box-shadow: var(--shadow-accent);
}
.t-btn--nav:hover  { background: var(--accent-hover); color: var(--text-on-accent); transform: translateY(-1px); }
.t-btn--nav:active { transform: translateY(1px) scale(0.985); }

.bar--overlay .t-btn--nav {
  background: transparent; color: #fff;
  border-color: rgba(255, 255, 255, 0.75); box-shadow: none;
}
.bar--overlay .t-btn--nav:hover { background: rgba(255,255,255,0.14); color: #fff; }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; margin: 4px 0; }

/* Seiten ohne Hero: Platz unter der festen Leiste freihalten. */

/* Ankersprünge nicht unter die Leiste laufen lassen. */
section[id] { scroll-margin-top: 24px; }

/* ---- Hero, ganzflaechiges Bild ---------------------------------------- */

/* Der Hero bleibt oben stehen, alles Folgende schiebt sich langsam
   darueber. Deshalb tragen die Folgesektionen einen eigenen Grund. */
.hero {
  position: sticky; top: 0; z-index: 0;
  min-height: 100vh;            /* Rueckfall fuer alte Browser */
  min-height: 100svh;           /* feste kleine Viewporthoehe, siehe unten */
  display: flex; align-items: flex-end;
  padding: 0 0 clamp(36px, 5vw, 60px);
  overflow: clip;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Abdunkelnde Ebene. Oben fuer die Kopfzeile, unten fuer die Schlagzeile. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(18,16,12,0.58) 0%, rgba(18,16,12,0.18) 24%, rgba(18,16,12,0.30) 52%, rgba(18,16,12,0.88) 100%),
    linear-gradient(to right, rgba(18,16,12,0.30) 0%, rgba(18,16,12,0.05) 45%, rgba(18,16,12,0.35) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; padding: 0 clamp(20px, 3.5vw, 52px);
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr;
  gap: clamp(24px, 5vw, 72px); align-items: end;
  color: #fff;
}
.hero-card {
  background: rgba(24, 30, 24, 0.78);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-card);
  padding: var(--space-5); align-self: end;
}
.hero-card p { margin: 0; max-width: none; }
.hero-card-kicker { font-size: var(--text-xs); color: rgba(255,255,255,0.72); line-height: 1.5; }
.hero-card-name { font-weight: 600; letter-spacing: -0.02em; font-size: var(--text-xl);
  margin: var(--space-2) 0 var(--space-3) !important; }
.hero-card-meta { font-size: var(--text-sm); color: rgba(255,255,255,0.82); line-height: 1.6; }

.hero-text { justify-self: end; max-width: 46ch; text-align: left; }
.hero-text h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.28);
  font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
.hero-text p {
  margin: var(--space-3) 0 var(--space-4); max-width: 40ch;
  color: rgba(255,255,255,0.90); font-size: var(--text-lg);
}
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Schaltflaechen auf dem Bild. */
.t-btn--onimage {
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.75);
}
.t-btn--onimage:hover  { background: rgba(255,255,255,0.14); color: #fff; transform: translateY(-1px); }
.t-btn--onimage:active { transform: translateY(1px) scale(0.985); }
.t-btn--onimage-solid {
  background: #fff; color: var(--ink); border: 1px solid #fff;
}
.t-btn--onimage-solid:hover  { background: rgba(255,255,255,0.88); color: var(--ink); transform: translateY(-1px); }
.t-btn--onimage-solid:active { transform: translateY(1px) scale(0.985); }

.frame { overflow: hidden; border-radius: var(--radius-media); background: var(--sand); display: block; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--ease-out); }
.frame:hover img, a:hover > .frame img { transform: scale(1.04); }

/* Jede Sektion nach dem Hero deckt ihn beim Scrollen zu. */
main > section:not(.hero), .foot { position: relative; z-index: 1; background: var(--cream); }
main > section.sec--sand { background: var(--sand); }
main > section.sec--white { background: var(--surface-elevated); }
.foot { background: var(--sand); }

/* ---- Leistungsleiste, Spalten auf Haarlinien -------------------------- */

.sec--flush { padding: clamp(8px, 1vw, 16px) 0 clamp(48px, 6vw, 88px); }
/* Gehoert optisch zu Über Tidox, deshalb derselbe weisse Grund.
   Selektor mit main > section, damit er die allgemeine Cream-Regel schlaegt. */
main > section.sec--flush { background: #FFFFFF; }
/* Spannt von Kante zu Kante, Inhalt in jeder Spalte mittig. */
.pillars {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.pillar {
  padding: clamp(32px, 4vw, 56px) clamp(16px, 2.5vw, 40px);
  border-right: 1px solid var(--border);
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
.pillar:last-child { border-right: 0; }
.pillar h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.pillar p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: 32ch; }

#ueber { background: #FFFFFF; position: relative; }

/* ---- Über Tidox -------------------------------------------------------- */

.about { display: grid; grid-template-columns: 180px 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.about-label { padding-top: 10px; }
.about-head {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; max-width: 22ch;
}
.about-body { margin: var(--space-4) 0 var(--space-5); max-width: 62ch; color: var(--text-muted); }
.about-cta { margin-bottom: clamp(40px, 5vw, 72px); }

/* ---- Sortiment, gepinnte Kollektionsstrecke ---------------------------
   Die Sektion ist so hoch wie sechs Bildschirme. Darin bleibt die Buehne
   stehen, waehrend unsichtbare Marken beim Durchscrollen die aktive
   Kollektion umschalten. Vor und zurueck, ohne scroll-Listener. */

.cols { background: #FFFCF6; padding-top: clamp(56px, 7vw, 96px); padding-bottom: 0; }
.col-head { margin-bottom: clamp(24px, 3vw, 40px); }
.col-head .t-kicker { display: block; margin-bottom: var(--space-2); }

/* Nur in diesem Behaelter klebt die Buehne. Seine Hoehe ist eine
   Bildschirmhoehe je Kollektion, dadurch endet das Kleben genau vor
   dem Abschluss und ueberlagert ihn nicht. */
/* Die Hoehen dieser Strecke duerfen sich beim Scrollen nicht aendern.
   Sie bestimmen die Scrollhoehe der ganzen Seite; jede Aenderung verschiebt
   den Inhalt unter dem Finger, und weil die Verschiebung in mobilen Browsern
   wiederum die Adressleiste umschaltet, schaukelt sich das auf: die Seite
   zittert. Viewporteinheiten taugen dafuer nicht, auch svh nicht zuverlaessig.
   Deshalb misst site.js die Bildschirmhoehe einmal und legt sie als feste
   Pixelzahl in --pin-h ab, neu berechnet nur bei Breiten- oder Lagewechsel.
   Die Angaben hier sind der Rueckfall, solange kein JavaScript gelaufen ist. */
.cols-pin { position: relative; height: calc(var(--n, 6) * var(--pin-h, 100vh)); }
@supports (height: 100svh) { .cols-pin { --pin-fallback: 100svh; } }

.col-stage {
  position: sticky; top: 0; height: var(--pin-h, 100vh);
  display: flex; align-items: center;
  overflow: hidden;
}
.col-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: center; width: 100%;
}

/* Alle Tafeln liegen uebereinander, nur die aktive ist sichtbar. */
.col-texts { position: relative; min-height: 340px; }
/* Senkrechte Linie, die sich mit dem Fortschritt fuellt. */
.col-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--border-strong);
}
.col-rail span {
  position: absolute; inset: 0; background: var(--accent);
  transform: scaleY(var(--p, 0)); transform-origin: top;
  transition: transform 520ms var(--ease-out);
}
.col-panel {
  position: absolute; inset: 0; padding-left: var(--space-5);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.col-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }

.col-index { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
  color: var(--text-muted); margin: 0 0 var(--space-3); }
.col-index i { font-style: normal; opacity: 0.5; margin: 0 6px; }
.col-title {
  font-weight: 600; font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.02em; line-height: 1.15;
}
.col-text { margin: var(--space-3) 0 var(--space-4); color: var(--text-muted); max-width: 40ch; }
.col-sub { font-size: var(--text-sm); color: var(--text-muted); opacity: 0.8; max-width: 44ch; margin: 0; }
.col-count { font-size: var(--text-xs); color: var(--text-muted); margin: var(--space-3) 0 0; }

.col-media { position: relative; aspect-ratio: 1 / 1; }
.col-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transform: scale(0.97);
  transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
}
.col-img.is-active { opacity: 1; transform: none; }

/* Marken liegen ausserhalb des Flusses und verteilen sich auf die
   Strecke, auf der die Buehne tatsaechlich klebt. */
.col-track { position: absolute; top: 0; left: 0; width: 1px; }
.col-step { display: block; height: calc(var(--pin-h, 100vh) * (var(--n, 6) - 1) / var(--n, 6)); }

.cols .shop-note { position: relative; z-index: 2;
  margin-top: clamp(24px, 3vw, 40px); padding-top: var(--space-5);
  padding-bottom: clamp(32px, 4vw, 56px); }

/* Ohne JavaScript untereinander lesbar, nichts bleibt verborgen. */
.no-js .col-stage { position: static; height: auto; }
.no-js .cols-pin { height: auto; }
.no-js .col-track { display: none; }
.no-js .col-texts { min-height: 0; }
.no-js .col-panel { position: static; opacity: 1; transform: none; margin-bottom: var(--space-6); }
.no-js .col-img { position: static; opacity: 1; transform: none; margin-bottom: var(--space-4); }
.no-js .col-grid { grid-template-columns: 1fr; }

/* ---- Sortiment, Aufklapp-Raster --------------------------------------- */

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

.cat-btn {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden;
  padding: 0; font-family: inherit; color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cat-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.cat-btn[aria-expanded="true"] { border-color: var(--accent); }
.cat-thumb { aspect-ratio: 4 / 3; overflow: hidden; display: block; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms var(--ease-out); }
.cat-btn:hover .cat-thumb img { transform: scale(1.04); }
.cat-body { padding: var(--space-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.cat-body h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.cat-body .small { margin-top: 2px; }
.cat-sign {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.cat-sign::before, .cat-sign::after {
  content: ""; position: absolute; background: currentColor;
}
.cat-sign span { position: relative; width: 11px; height: 11px; display: block; }
.cat-sign span::before, .cat-sign span::after {
  content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1.5px;
  background: currentColor; transition: transform var(--dur-base) var(--ease-out);
}
.cat-sign span::after { transform: rotate(90deg); }
.cat-btn[aria-expanded="true"] .cat-sign { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-btn[aria-expanded="true"] .cat-sign span::after { transform: rotate(0deg); }

/* Aufklapp-Bereiche liegen unter dem Raster, einer je Kategorie. */
.cat-panels { margin-top: var(--space-2); }
.cat-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms var(--ease-out);
}
.panel-title {
  font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.cat-panel.is-open { grid-template-rows: 1fr; }
.cat-panel > div { overflow: hidden; }
.cat-panel-inner { padding: var(--space-5) 0 var(--space-6); }

.blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.block { }
.block .frame { aspect-ratio: 1 / 1; border: 1px solid var(--border); }
.block h4 { font-size: var(--text-base); font-weight: 600; margin: var(--space-3) 0 4px; }
.block p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.block .count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 6px; }

.shop-note { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* ---- Warum, nummerierte Liste plus Bild ------------------------------- */

/* ---- Ablauf, drei Schritte -------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.step { padding-top: var(--space-4); border-top: 2px solid var(--ink); }
.step .num { font-size: var(--text-xs); font-weight: 600; color: var(--accent); }
.step h3 { font-size: var(--text-xl); font-weight: 600; margin: var(--space-2) 0 var(--space-2); letter-spacing: -0.01em; }
.step p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }

/* ---- Leistungen, Raster aus Symbol, Titel, Text ----------------------- */

.services {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 72px);
}
.service-icon { width: 52px; height: 52px; display: block; margin-bottom: var(--space-4); }
.service h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--space-2); }
.service p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: 38ch; }

/* ---- Bedruckte Verpackung ---------------------------------------------
   Der Text bleibt stehen, die Aufnahmen wandern daran vorbei und
   ueberlagern sich dabei. */

.print { padding-bottom: 0; }
.print-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.print-text {
  position: sticky; top: clamp(80px, 14vh, 140px);
  padding-bottom: clamp(48px, 6vw, 88px);
}
.print-text .t-kicker { display: block; margin-bottom: var(--space-2); }
.print-text > p { margin: var(--space-3) 0 var(--space-4); color: var(--text-muted); }
.print-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.print-list li {
  font-size: var(--text-sm); color: var(--text-muted);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border); position: relative;
}
.print-list li:first-child { border-top: 1px solid var(--border); }
.print-list li::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  transform: translateY(-50%);
}

.print-media { display: grid; gap: clamp(24px, 3vw, 40px); padding-bottom: clamp(48px, 6vw, 96px); }
.print-shot {
  margin: 0; border-radius: var(--radius-media); overflow: hidden;
  box-shadow: var(--shadow-raised);
  position: sticky; top: clamp(80px, 14vh, 140px);
}
/* Gestaffelter Halt: jede Aufnahme bleibt etwas tiefer stehen,
   dadurch schieben sie sich sichtbar uebereinander. */
.print-shot:nth-child(1) { top: calc(clamp(80px, 14vh, 140px) + 0px); }
.print-shot:nth-child(2) { top: calc(clamp(80px, 14vh, 140px) + 14px); }
.print-shot:nth-child(3) { top: calc(clamp(80px, 14vh, 140px) + 28px); }
.print-shot:nth-child(4) { top: calc(clamp(80px, 14vh, 140px) + 42px); }
.print-shot:nth-child(5) { top: calc(clamp(80px, 14vh, 140px) + 56px); }
.print-shot:nth-child(6) { top: calc(clamp(80px, 14vh, 140px) + 70px); }
.print-shot:nth-child(7) { top: calc(clamp(80px, 14vh, 140px) + 84px); }
.print-shot:nth-child(8) { top: calc(clamp(80px, 14vh, 140px) + 98px); }
.print-shot img { width: 100%; height: auto; display: block; }

/* ---- Verpackungsrecht, zwei Karten ------------------------------------- */

.law { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: start; }
.law-card { border-radius: var(--radius-card); padding: var(--space-5); border: 1px solid var(--border);
  background: var(--surface-elevated); }
.law-card--you { background: var(--accent-soft); border-color: transparent; }
.law-card h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.law-card p { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3); }
.law-card ul { margin: 0; padding-left: 1.1em; font-size: var(--text-sm); color: var(--text-muted); }
.law-card li { margin-bottom: 6px; }
.law-card li:last-child { margin-bottom: 0; }
/* Angebot, die Pflichten als Lieferant zu uebernehmen. Steht abgesetzt
   unter der Liste, damit es nicht als sechster Punkt gelesen wird. */
.law-card .law-note { font-size: var(--text-sm); color: var(--text); font-weight: 500;
  margin: var(--space-5) 0 0; padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- Standort ---------------------------------------------------------- */

.place { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.place dl { margin: var(--space-5) 0 var(--space-5); display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); }
.place dt { color: var(--text-muted); }
.place dd { margin: 0; font-weight: 500; }
.map { aspect-ratio: 4 / 3; border-radius: var(--radius-media); overflow: hidden; border: 1px solid var(--border); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Zustand vor dem Laden: Hinweis plus Schaltflaeche, keine Fremdanfrage. */
.map[data-map] { display: grid; place-content: center; gap: var(--space-3);
  justify-items: center; text-align: center; padding: var(--space-5);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--border) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--border) 39px 40px),
    var(--surface-elevated); }
.map[data-map] .small { max-width: 32ch; margin: 0; }
/* Nach dem Klick faellt das Raster weg, sonst saesse das iframe
   mittig in der Box statt sie auszufuellen. */
.map.is-loaded { display: block; padding: 0; background: var(--surface-elevated); }
.map.is-loaded iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ---- Shop --------------------------------------------------------------- */

.shop { text-align: center; }
.shop p { margin: var(--space-4) auto var(--space-5); max-width: 52ch; }

/* ---- Kontakt ------------------------------------------------------------ */

.contact { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.field label { font-size: var(--text-sm); font-weight: 500; }
.field textarea { min-height: 120px; resize: vertical; }
.field .err { font-size: var(--text-sm); color: #B4341F; display: none; }
.field.is-invalid .err { display: block; }
.field.is-invalid .t-input { border-color: #B4341F; }
.form-status { margin-top: var(--space-3); font-size: var(--text-sm); }
.channels { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.channels li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.channels li:first-child { border-top: 1px solid var(--border); }
.channels a { color: var(--text); text-decoration: none; font-weight: 600; }
.channels a:hover { color: var(--accent); }
.channels .small { font-weight: 400; display: block; }

/* ---- Fuss ---------------------------------------------------------------- */

.foot { background: var(--sand); padding: clamp(48px, 6vw, 88px) 0 var(--space-5); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.foot h4 { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 8px; }
.foot a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); }
.foot a:hover { color: var(--accent); }
.foot-logo { height: 34px; width: auto; display: block; margin-bottom: var(--space-3); }
.foot address { font-style: normal; font-size: var(--text-sm); color: var(--text-muted); }
.foot-base { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-strong);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); }
.foot-base ul { display: flex; gap: var(--space-4); }

/* Wortweise Einblendung. Der erste Teil der Überschrift steht sofort,
   der Rest hellt beim Scrollen nacheinander auf. */
.words .w {
  opacity: 0.16;
  transition: opacity 320ms var(--ease-out);
}
/* Rueckfall ohne scrollgebundene Animationen: gestaffelt einblenden. */
.no-js .words .w { opacity: 1; }

/* Scrollgebunden ueber unsichtbare Marken: Wort i leuchtet auf, sobald
   seine Marke die Bildschirmmitte kreuzt. Beim Hochscrollen erlischt es
   wieder, dadurch verschwindet der Satz rueckwaerts ab dem letzten Wort. */
.words .w.is-lit { opacity: 1; }

.word-track { position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; visibility: hidden; }
.word-step { display: block; height: 260vh; position: absolute; left: 0; width: 1px; }

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

.reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* Nach dem Einblenden faellt die Ebene weg. Sonst haelt der Browser fuer
   jedes Element dauerhaft eine eigene Compositing-Schicht vor. */
.reveal.is-done { will-change: auto; transition: none; }
/* Ohne JavaScript bleibt nichts unsichtbar. */
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .words .w { opacity: 1; } }

/* ---- Textseiten ---------------------------------------------------------- */

.prose h2 { font-weight: 600; font-size: var(--text-2xl); letter-spacing: -0.02em;
  margin: var(--space-6) 0 var(--space-3); }
.prose h3 { font-size: var(--text-lg); font-weight: 600; margin: var(--space-5) 0 var(--space-2); }
.prose p, .prose li { color: var(--text-muted); }
.prose p { margin: 0 0 var(--space-3); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--space-4); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: 0 0 var(--space-4); }
.prose th { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-strong); }
.prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); color: var(--text-muted); }
.disclaimer { margin-top: var(--space-6); padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--accent); background: var(--surface-elevated);
  border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.disclaimer p { margin: 0; }

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { padding: var(--space-4) 0; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details > p { padding: 0 0 var(--space-4); margin: 0; max-width: 68ch; }

.crumb { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.crumb a { color: var(--text-muted); }

/* ---- Mobil ---------------------------------------------------------------- */

@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .blocks { grid-template-columns: repeat(3, 1fr); }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* Aufgeklapptes Menue liegt auf Cream, deshalb dunkle Schrift,
     auch wenn die Leiste darueber weiss auf dem Hero steht. */
  .bar-nav { display: none; position: absolute; top: 80px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--border);
    padding: var(--space-3) var(--space-4); color: var(--text); }
  .bar-nav.is-open { display: flex; }
  .bar--overlay .bar-nav a { color: var(--text); }
  .bar--overlay .bar-nav a.is-active { color: var(--accent); }
  .bar-nav a { padding: var(--space-3) 0; width: 100%; }
  .burger { display: block; order: -1; }
  .bar-brand { flex: 1; }
  .bar-tel { display: none; }
  .bar .wrap { gap: var(--space-2); }
  .bar-right { gap: var(--space-2); }
  .bar-right .t-btn { padding: 12px 18px; }

  .place, .contact, .law { grid-template-columns: 1fr; }
  /* Einspaltig muss alles in eine Bildschirmhoehe passen:
     Bild oben, Text darunter, Unterkategorien gekuerzt. */
  .col-grid { grid-template-columns: 1fr; gap: var(--space-4); align-content: start; }
  /* Auch die Innenmasse der Buehne haengen an der gemessenen Pinhoehe,
     nicht am Viewport. Sonst wandern Bild und Text um mehrere Dutzend
     Pixel, sobald sich die Adressleiste bewegt. */
  .col-media { order: -1; aspect-ratio: auto; height: calc(0.26 * var(--pin-h, 100vh)); }
  .col-img { object-position: center; }
  .col-texts { min-height: calc(0.44 * var(--pin-h, 100vh)); }
  .col-panel { padding-left: var(--space-4); }
  .col-title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .col-text { margin: var(--space-2) 0 var(--space-3); }
  .col-sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .col-stage { align-items: flex-start; padding-top: calc(0.11 * var(--pin-h, 100vh)); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero-text { justify-self: start; }
  .hero-card { order: 2; }
  /* Einspaltig stehen Schlagzeile, Text, zwei Schaltflaechen und Karte
     untereinander. Der Hero bleibt eine Bildschirmhoehe hoch und klebt oben,
     damit die folgende Sektion beim Scrollen darueberlaeuft. Oben bleibt der
     Platz der Kopfzeile frei, sonst schoebe sich die Schlagzeile unter das
     Logo. Ein hoeherer Hero ginge nicht: er klebt am oberen Rand, alles
     unterhalb der Bildschirmkante waere nie zu sehen. */
  .hero {
    height: 100vh; height: 100svh;
    min-height: 0;
    padding-top: calc(80px + var(--space-4));
  }
  .hero-inner { align-items: end; }
  .cats { grid-template-columns: 1fr; }
  .blocks { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .services { grid-template-columns: 1fr; }
  .print-grid { grid-template-columns: 1fr; }
  .print-text { position: static; padding-bottom: var(--space-5); }
  /* Die Aufnahmen bleiben auch einspaltig gestaffelt stehen und schieben
     sich uebereinander, statt untereinander zu stapeln. Der gestaffelte
     Halt steht weiter oben bei .print-shot:nth-child und gilt hier mit. */
  .print-shot { position: sticky; }
  .about { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillar:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .pillar:nth-child(even) { border-right: 0; }
  .form-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .blocks { grid-template-columns: 1fr; }
  /* Einspaltig trennen Haarlinien nach unten, nicht zur Seite. */
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: 0; border-bottom: 1px solid var(--border); }
  .pillar:last-child { border-bottom: 0; }
}

/* Niedrige Telefone: der Hero-Inhalt braucht in voller Groesse mehr als eine
   Bildschirmhoehe und liefe oben unter die Kopfzeile. Hier faellt er eine
   Stufe kompakter aus. Gemessen an einem 390 x 640 grossen Bildschirm. */
@media (max-width: 900px) and (max-height: 780px) {
  .hero { padding-bottom: 20px; }
  .hero-inner { gap: 18px; }
  .hero-text h1 { font-size: clamp(1.75rem, 8vw, 2.15rem); }
  .hero-text p {
    font-size: var(--text-base); line-height: 1.5;
    margin: var(--space-2) 0 var(--space-3);
  }
  .hero-card { padding: var(--space-4); }
  .hero-card-name { font-size: var(--text-lg); margin: 6px 0 8px !important; }
  .hero-card-meta { line-height: 1.5; }
}

/* Auf Telefonen und Tablets blenden die Kollektionen schneller um. Eine
   Kollektion dauert dort eine Bildschirmhoehe; bei einem Wisch mit Schwung
   bliebe bei knapp einer halben Sekunde Einblendzeit von den mittleren
   kaum etwas zu sehen. */
@media (pointer: coarse) {
  .col-panel { transition-duration: 240ms; }
  .col-img { transition-duration: 260ms, 300ms; }
  .col-rail span { transition-duration: 280ms; }
}

/* ---- WhatsApp-Blase ------------------------------------------------------
   Fest unten rechts. Rund, im Markengruen, mit Beschriftung, die erst beim
   Zeigen aufklappt. Liegt ueber dem Inhalt, aber unter der Kopfzeile. */

a.wa-bubble {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-float), 0 8px 24px color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.wa-bubble-icon { width: 26px; height: 26px; flex: 0 0 auto; }
/* Die Beschriftung startet auf Breite null und schiebt sich beim Zeigen auf. */
.wa-bubble-label {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  line-height: 1; white-space: nowrap; overflow: hidden;
  max-width: 0; opacity: 0;
  transition: max-width var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
a.wa-bubble:hover, a.wa-bubble:focus-visible { background: var(--accent-hover); color: #fff; transform: translateY(-2px); }
.wa-bubble:hover .wa-bubble-label,
.wa-bubble:focus-visible .wa-bubble-label { max-width: 140px; opacity: 1; padding-left: 10px; }
.wa-bubble:active { transform: translateY(0) scale(0.97); }
.wa-bubble:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 520px) {
  .wa-bubble { right: 14px; bottom: 14px; height: 52px; padding: 0 14px; }
  .wa-bubble-icon { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-bubble, .wa-bubble-label { transition: none; }
}

/* Platzhalter in Rechtstexten. Muss vor dem Livegang ersetzt und die Klasse entfernt werden. */
.ph { background: #FFF1C2; color: #4A3600; padding: .06em .38em; border-radius: 3px;
      box-decoration-break: clone; -webkit-box-decoration-break: clone; }
p.ph { display: block; padding: var(--space-3); border-left: 3px solid #E0A800; }

/* Honigtopf. Nicht display:none, sonst fuellen manche Bots ihn trotzdem
   nicht aus. Aus dem Sichtfeld geschoben und fuer Screenreader versteckt. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-hint { margin: var(--space-3) 0 0; color: var(--text-muted); }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--accent-hover); font-weight: 500; }
.form-status.is-error { color: #B3261E; font-weight: 500; }