/* ==========================================================================
   antega Group GmbH
   Weiß. Schwarz. Orange. Ruhig, flächig, wenig Linien.
   ========================================================================== */

/* --- Schrift, selbst gehostet (DSGVO) -------------------------------------
   Eine Familie. Hierarchie entsteht über Gewicht und Laufweite, nicht über
   eine zweite Schrift. Archivo ist eine amerikanische Grotesk mit geraden
   Abschlüssen und quadratischem Bau, keine gerundeten Formen.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  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;
}

/* --- Tokens --------------------------------------------------------------
   Drei Farben. Kontrast gegen Weiß in Klammern.
   ------------------------------------------------------------------------ */

:root {
  /* Leinwand und Panel sind getrennt. Der Seitengrund ist leicht grau, die
     Inhaltsflächen liegen heller darauf. Das erzeugt Tiefe ohne Schatten und
     ist der Unterschied zwischen Bildschirm und bedrucktem Blatt: Auf Papier
     ist der Bogen immer das Hellste. Neutrale, leicht kühle Grauwerte, damit
     das Orange die einzige warme Farbe bleibt. */
  --bg: #f2f4f5;                        /* Leinwand                    */
  --paper: #fcfefe;                     /* Panel, liegt darauf         */
  --ink: #0d1013;                       /* auf Leinwand      17,3:1    */
  --ink-2: #52565a;                     /* Sekundärtext       6,7:1    */
  --ink-3: #606468;                     /* Meta, Labels       5,4:1    */

  /* Direkt aus dem Logo entnommen: die Flamme läuft von #ef341e nach #f56516,
     die Wortmarke ist reines Schwarz. */
  --orange: #f56516;                    /* Marke, Fläche  Schwarz darauf 6,2:1 */
  --orange-ink: #c04010;                /* Textgröße         4,8:1 auf Leinwand */
  --orange-soft: #f8834a;               /* auf Schwarz               7,6:1     */
  --flame: #ef341e;                     /* zweiter Logoton, sehr sparsam       */

  --line: #dde2e4;                      /* Hairline           */
  --line-2: #c0c6ca;                    /* betont             */

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --step-xl: clamp(2.9rem, 6.6vw, 6rem);
  --step-l: clamp(2.1rem, 4.4vw, 3.7rem);
  --step-m: clamp(1.6rem, 3vw, 2.4rem);
  --step-s: clamp(1.15rem, 1.7vw, 1.5rem);
  --step-body: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --step-sm: 0.9375rem;
  --step-label: 0.6875rem;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 84rem;
  --section-y: clamp(3.75rem, 8vw, 7.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rule: 2px solid var(--ink);

  --nav-h: 4.75rem;
}

/* --- Reset --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
}
::selection {
  background: var(--orange);
  color: var(--ink);
}

/* --- Typografie ----------------------------------------------------------
   Display: schwer und leicht schmallaufend. Das gibt Wucht und trägt die
   langen deutschen Komposita, ohne zu brechen.
   ------------------------------------------------------------------------ */

h1,
h2,
h3,
h4 {
  font-weight: 800;
  font-stretch: 88%;
  /* Archivo braucht rund 1.11em von Oberlänge bis Unterlänge. Alles darunter
     lässt das g der oberen Zeile in die Versalien der unteren fallen. 1.0 ist
     die untere Grenze, bei der es in mehrzeiligen deutschen Überschriften noch
     sauber steht. */
  line-height: 1;
  letter-spacing: -0.021em;
  text-wrap: balance;
}
h1 {
  font-size: var(--step-xl);
  letter-spacing: -0.028em;
}
h2 {
  font-size: var(--step-l);
  letter-spacing: -0.026em;
}
h3 {
  font-size: var(--step-s);
  font-stretch: 92%;
  line-height: 1.1;
  letter-spacing: -0.014em;
}
p {
  text-wrap: pretty;
}
.lede {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.45rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 38ch;
  letter-spacing: -0.008em;
}
.prose {
  max-width: 62ch;
  color: var(--ink-2);
}
.prose p + p {
  margin-top: 1.05em;
}
.prose strong {
  color: var(--ink);
  font-weight: 700;
}
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Layout -------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}
/* Abschnitte wechseln sich zwischen Leinwand und heller Fläche ab. Das ist
   die Trennung, die vorher ein durchgehender Strich gemacht hat. */
.section--panel {
  background: var(--paper);
}

/* --- Materialebenen -------------------------------------------------------
   Inhaltsblöcke sind Flächen, die auf der Leinwand liegen, keine gedruckten
   Kästen. Der Tonwertunterschied ist bewusst klein: Er soll Tiefe andeuten,
   nicht Karten stapeln.
   ------------------------------------------------------------------------ */

.sheet,
.steps,
.faq,
.frame {
  background: var(--paper);
}
/* Auf schwarzem Grund gilt das nicht, dort ist die Fläche selbst das Material */
.invert .deliver,
.invert .stats,
.invert .quotes,
.invert .steps,
.invert .faq {
  background: transparent;
}

/* Sektionsmarke: nur ein kurzer Strich und ein Wort. Keine Nummer, keine
   Linie über die ganze Breite. Die Trennung der Abschnitte übernimmt der
   Flächenwechsel, nicht ein Strich. */
.band {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}
.band::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--orange);
  flex: none;
}
.band__n {
  display: none;
}
.band__t {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Kicker: nur noch dort, wo kein Band steht */
.kicker {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.kicker::before {
  content: '';
  width: 1.5rem;
  height: 2px;
  background: var(--orange);
  flex: none;
}

/* --- Schwarze Sektion ----------------------------------------------------- */

.invert {
  background: var(--ink);
  color: var(--paper);
}
.invert h1,
.invert h2,
.invert h3 {
  color: var(--paper);
}
.invert .prose,
.invert p {
  color: oklch(0.82 0.006 60);
}
.invert .prose strong {
  color: var(--paper);
}
.invert .band {
  border-top-color: var(--paper);
}
.invert .band__t {
  color: var(--paper);
}
.invert .band__n {
  color: var(--orange-soft);
}
.invert .band::after {
  background: oklch(1 0 0 / 0.3);
}
.invert .kicker {
  color: oklch(0.78 0.006 60);
}
.invert .kicker::before {
  background: var(--orange);
}

/* --- Orange Sektion, sparsam ---------------------------------------------- */

.punch {
  background: var(--orange);
  color: var(--ink);
}
.punch .band {
  border-top-color: var(--ink);
}
.punch .band__n,
.punch .band__t {
  color: var(--ink);
}
.punch .band::after {
  background: oklch(0 0 0 / 0.3);
}
.punch p {
  color: oklch(0.24 0.02 55);
}

/* --- Zweispalter ---------------------------------------------------------- */

/* Einspaltig. Überschrift über dem Text, nicht daneben. Zwei Spalten haben
   den Aufbau kompliziert wirken lassen, ohne etwas zu gewinnen. */
.split {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  max-width: 62rem;
}
.split > * {
  min-width: 0;
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), height 0.35s var(--ease);
}
.nav::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--ink);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.5s var(--ease);
}
.nav.is-stuck {
  background: var(--paper);
  height: 4rem;
  box-shadow: 0 1px 0 0 var(--line), 0 8px 24px -18px oklch(0 0 0 / 0.55);
}
.nav.is-stuck::after {
  scale: 1 1;
}
.nav__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Bildmarke des Kunden. Nicht nachgebaut, sondern die Originaldatei. */
.brand {
  display: block;
  flex: none;
  line-height: 0;
  text-decoration: none;
}
.brand img {
  width: auto;
  height: 3.25rem;
  transition: height 0.35s var(--ease);
}
.nav.is-stuck .brand img {
  height: 2.75rem;
}
@media (max-width: 30rem) {
  .brand img {
    height: 2.75rem;
  }
}
.foot .brand img {
  height: 3.25rem;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 0.2rem;
  margin-inline-start: auto;
}
@media (min-width: 76rem) {
  .nav__links {
    display: flex;
  }
}
.nav__link {
  text-decoration: none;
  font-size: var(--step-sm);
  font-weight: 600;
  padding: 0.55rem 0.8rem;
  position: relative;
  color: var(--ink-2);
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.28rem;
  height: 2px;
  background: var(--orange);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.4s var(--ease);
}
.nav__link:hover {
  color: var(--ink);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  scale: 1 1;
}
.nav__link[aria-current='page'] {
  color: var(--ink);
  font-weight: 700;
}

.nav__has-sub {
  position: relative;
}
.nav__sub {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 21rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity 0.28s var(--ease), translate 0.28s var(--ease),
    visibility 0.28s;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.nav__sub a {
  display: block;
  text-decoration: none;
  padding: 0.7rem 0.8rem;
  font-size: var(--step-sm);
  font-weight: 700;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__sub a span {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--ink-3);
  margin-top: 0.1rem;
}
.nav__sub a:hover {
  background: var(--ink);
  color: var(--paper);
}
.nav__sub a:hover span {
  color: oklch(0.78 0.006 60);
}

.nav__cta {
  display: none;
  margin-inline-start: 0.5rem;
  white-space: nowrap;
  min-width: 10.5rem;
}
@media (min-width: 76rem) {
  .nav__cta {
    display: inline-flex;
  }
}
.nav__tel {
  display: none;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--step-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
  padding: 0.55rem 0.5rem;
}
@media (min-width: 86rem) {
  .nav__tel {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
}
.nav__tel svg {
  color: var(--orange);
}

.burger {
  margin-inline-start: auto;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 2px solid var(--ink);
  cursor: pointer;
}
@media (min-width: 76rem) {
  .burger {
    display: none;
  }
}
.burger span {
  display: block;
  width: 1.05rem;
  height: 2px;
  background: var(--ink);
  transition: translate 0.35s var(--ease), rotate 0.35s var(--ease),
    opacity 0.2s var(--ease);
}
.burger span + span {
  margin-top: 4px;
}
body.menu-open .burger span:nth-child(1) {
  translate: 0 6px;
  rotate: 45deg;
}
body.menu-open .burger span:nth-child(2) {
  opacity: 0;
}
body.menu-open .burger span:nth-child(3) {
  translate: 0 -6px;
  rotate: -45deg;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--paper);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 2rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.55s var(--ease), visibility 0.55s;
}
body.menu-open .drawer {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}
.drawer a {
  text-decoration: none;
  font-size: clamp(1.6rem, 6.5vw, 2.25rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.025em;
  padding: 0.55rem 0;
  border-bottom: 2px solid var(--ink);
  opacity: 0;
  translate: 0 1rem;
  transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
  transition-delay: calc(var(--i, 0) * 40ms);
}
body.menu-open .drawer a {
  opacity: 1;
  translate: 0 0;
}
.drawer__foot {
  margin-top: auto;
  padding-top: 1.75rem;
  display: grid;
  gap: 0.6rem;
}
/* Die großen Menüzeilen zurücksetzen, aber NICHT das Innenpolster der
   Buttons. Ein padding:0 hier hat die Knöpfe vorher plattgedrückt. */
.drawer__foot a {
  font-size: 0.9375rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.005em;
  border-bottom: 0;
}
.drawer__foot .btn {
  padding: 0.95rem 1.35rem;
}

/* --- Vertrauensblock im Menü --------------------------------------------- */

.gtrust {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.05rem;
  margin-top: 1.75rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
  transition: background 0.3s var(--ease);
}
.gtrust:hover {
  background: var(--bg);
}
.gtrust__g {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
}
.gtrust__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.gtrust__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gtrust__n {
  font-size: 1.15rem;
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gtrust__l {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* Teilgefüllte Sterne: der graue Satz liegt unten, der orange darüber und
   wird auf den echten Wert beschnitten. 4,8 von 5 sind 96 %. */
.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: none;
}
.stars__row {
  display: flex;
  gap: 1px;
  white-space: nowrap;
}
.stars__bg {
  color: var(--line-2);
}
.stars__fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: var(--fill, 100%);
  color: var(--orange);
}

/* Kurze Displays: Menü verdichten, damit CTA und Vertrauensblock ohne
   Scrollen erreichbar bleiben. Muss nach den Basisregeln stehen. */
@media (max-height: 46rem) {
  .drawer {
    padding-top: calc(var(--nav-h) + 0.6rem);
    padding-bottom: 1.25rem;
  }
  .drawer a {
    font-size: clamp(1.15rem, 4.8vw, 1.45rem);
    padding: 0.3rem 0;
  }
  .drawer__foot {
    padding-top: 0.8rem;
    gap: 0.45rem;
  }
  .drawer__foot .btn {
    padding: 0.78rem 1.2rem;
  }
  .gtrust {
    margin-top: 0.8rem;
    padding: 0.65rem 0.85rem;
    gap: 0.7rem;
  }
  .gtrust__g {
    width: 1.6rem;
    height: 1.6rem;
  }
}

/* --- Buttons: rechteckig, hart -------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.05rem;
  border: 2px solid var(--ink);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.875rem;
  font-weight: 700;
  /* Nicht die 1,6 des Fließtexts erben, das bläht die Höhe auf */
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  z-index: -1;
  translate: 0 101%;
  transition: translate 0.45s var(--ease);
}
.btn:hover::before {
  translate: 0 0;
}
.btn:hover {
  color: var(--ink);
}
.btn svg {
  flex: none;
  transition: translate 0.4s var(--ease);
}
.btn:hover svg {
  translate: 0.25rem 0;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
}
.btn--orange {
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
  border-color: var(--orange);
}
.btn--orange::before {
  background: var(--ink);
}
.btn--orange:hover {
  color: var(--paper);
  border-color: var(--ink);
}
.btn--onink {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  border-color: var(--paper);
}
.btn--onink::before {
  background: var(--orange);
}
.btn--onink:hover {
  color: var(--ink);
  border-color: var(--orange);
}
.btn--ghostink {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border-color: oklch(1 0 0 / 0.45);
}
.btn--ghostink:hover {
  color: var(--ink);
  border-color: var(--orange);
}

.btn--lg {
  padding: 0.78rem 1.3rem;
  font-size: 0.9375rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-weight: 700;
  color: var(--orange-ink);
  position: relative;
  padding-bottom: 2px;
}
.tlink::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale 0.45s var(--ease);
}
.tlink:hover::after {
  scale: 1 1;
  transform-origin: left;
}
.tlink svg {
  transition: translate 0.4s var(--ease);
}
.tlink:hover svg {
  translate: 0.25rem 0;
}
.invert .tlink {
  color: var(--orange-soft);
}

/* --- Planrahmen ----------------------------------------------------------- */

.frame {
  position: relative;
  overflow: hidden;
  background: oklch(0.94 0.003 60);
  border: 2px solid var(--ink);
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.js .frame img {
  clip-path: inset(0 0 100% 0);
  scale: 1.05;
  transition: clip-path 1s var(--ease) 0.2s, scale 1.4s var(--ease) 0.2s;
}
.js .frame.is-in img {
  clip-path: inset(0 0 0 0);
  scale: 1;
}
/* --- Hero ----------------------------------------------------------------- */

/* --- Hero als Zeichnungsblatt --------------------------------------------
   Kein Text-links-Bild-rechts-Kasten. Die Headline läuft über die volle
   Breite, darunter das Schriftfeld einer Bauzeichnung als harte Datenzeile,
   darunter eine randlose Bildbahn.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(1.25rem, 3vw, 2.5rem));
  padding-bottom: 0;
  overflow: clip;
}
/* Deutlich kleiner und nicht mehr über die volle Breite. Die alte Fassung
   hat den Besucher beim Ankommen erschlagen. */
.hero__title {
  font-size: clamp(2.35rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin-top: clamp(0.8rem, 1.6vw, 1.2rem);
  max-width: 17ch;
}
.hero__row {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  align-items: end;
}
@media (min-width: 62rem) {
  .hero__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.hero__lede {
  max-width: 46ch;
  margin: 0;
}

/* Schriftfeld: kein gedruckter Zeichnungskopf, sondern ein schwarzer
   Datenstreifen. Gleiche Information, anderes Material. */
.sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--ink);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 52rem) {
  .sheet {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sheet__cell {
  padding: 0.85rem 1.1rem 0.95rem;
  border-right: 1px solid oklch(1 0 0 / 0.14);
}
.sheet__cell:last-child {
  border-right: 0;
}
@media (max-width: 52rem) {
  .sheet__cell:nth-child(2n) {
    border-right: 0;
  }
  .sheet__cell:nth-child(-n + 2) {
    border-bottom: 1px solid oklch(1 0 0 / 0.14);
  }
}
.sheet__l {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9aa1a6;
  line-height: 1.3;
}
.sheet__v {
  display: block;
  margin-top: 0.3rem;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -0.022em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.sheet__v em {
  font-style: normal;
  color: var(--orange);
}

/* Nicht mehr randlos, sondern im Satzspiegel. Das nimmt der Startseite die
   Wucht, die als Bombardement empfunden wurde. */
.hero__band {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero__band .frame {
  aspect-ratio: 4 / 3;
}
@media (min-width: 46rem) {
  .hero__band .frame {
    aspect-ratio: 21 / 9;
  }
}
.hero__band .frame img {
  object-position: center center;
}

.mask-line > span {
  display: block;
}
.js .mask-line > span {
  /* 125 % statt 105 %, weil die Maske unten um 0.2em erweitert ist.
     Sonst bliebe vor dem Einlaufen ein Streifen der Schrift sichtbar. */
  translate: 0 125%;
  transition: translate 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + 0.08s);
}
.js.is-ready .mask-line > span,
.js .reveal.is-in .mask-line > span {
  translate: 0 0;
}
/* Die Zeilenhöhe der Displaygrößen ist kleiner als die Schrift hoch ist. Ohne
   diesen Ausgleich schneidet die Maske die Unterlängen von g, j, p, q, y und ß
   ab. Padding schafft Luft, das negative Margin nimmt sie dem Layout wieder,
   die Zeilen stehen also unverändert. */
.mask-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

/* --- Leistungs-Triptychon ------------------------------------------------- */

.trip {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  grid-template-columns: 1fr;
}
@media (min-width: 54rem) {
  .trip {
    grid-template-columns: repeat(3, 1fr);
  }
}
.svc {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  background: var(--ink);
  border: 2px solid var(--ink);
  isolation: isolate;
}
.svc__media {
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
}
@media (min-width: 54rem) {
  .svc__media {
    aspect-ratio: 3 / 4.2;
  }
}
.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease);
}
.svc:hover .svc__media img {
  scale: 1.05;
}
.svc__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    oklch(0.14 0.006 60 / 0.95) 0%,
    oklch(0.14 0.006 60 / 0.8) 22%,
    oklch(0.14 0.006 60 / 0.32) 44%,
    oklch(0.14 0.006 60 / 0.04) 64%,
    transparent 78%
  );
  pointer-events: none;
}
.svc__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--paper);
}
.svc__n {
  display: inline-block;
  background: var(--orange);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.7rem;
}
.svc__t {
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 800;
  font-stretch: 88%;
  letter-spacing: -0.024em;
  line-height: 1.08;
}
.svc__d {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: oklch(0.86 0.005 60);
  max-width: 30ch;
}
.svc__go {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--paper);
}
.svc__go svg {
  transition: translate 0.4s var(--ease);
}
.svc:hover .svc__go svg {
  translate: 0.3rem 0;
}
.svc__line {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--orange);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.55s var(--ease);
}
.svc:hover .svc__line {
  scale: 1 1;
}

/* --- Schritte: echte Tabellenzeilen --------------------------------------- */

.steps {
  border-top: 0;
}
.step {
  position: relative;
  display: grid;
  gap: 0.35rem 1.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(1.4rem, 3vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line-2);
}
.invert .steps {
  border-top-color: var(--paper);
}
.invert .step {
  border-bottom-color: oklch(1 0 0 / 0.22);
}
.step__n {
  font-size: clamp(1.75rem, 3.6vw, 2.9rem);
  font-weight: 800;
  font-stretch: 82%;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
  min-width: 2.2ch;
}
.js .step__n {
  color: var(--line-2);
  transition: color 0.5s var(--ease);
}
.js .step.is-in .step__n {
  color: var(--orange);
}
.step__t {
  font-size: var(--step-s);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.015em;
  align-self: center;
  line-height: 1.1;
}
.step__d {
  color: var(--ink-2);
  max-width: 58ch;
  font-size: var(--step-sm);
}
.invert .step__d {
  color: oklch(0.8 0.006 60);
}
@media (max-width: 40rem) {
  .step {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .step__n {
    grid-row: auto;
    font-size: 1.4rem;
  }
}

/* --- Zahlen: Rasterzellen ------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: transparent;
}
@media (min-width: 52rem) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat {
  background: var(--paper);
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
}
.stat__n {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__l {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.4;
  max-width: 22ch;
}
.invert .stats {
  border-top-color: var(--paper);
  border-left-color: oklch(1 0 0 / 0.2);
}
.invert .stat {
  border-right-color: oklch(1 0 0 / 0.2);
  border-bottom-color: oklch(1 0 0 / 0.2);
}
.invert .stat__n {
  color: var(--orange-soft);
}
.invert .stat__l {
  color: oklch(0.78 0.006 60);
}

/* --- Stimmen -------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  background: transparent;
}
@media (min-width: 52rem) {
  .quotes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.quote {
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.quote__stars {
  display: flex;
  gap: 2px;
  color: var(--orange);
}
.quote p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 600;
  font-stretch: 94%;
  line-height: 1.28;
  letter-spacing: -0.015em;
}
.quote cite {
  font-style: normal;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-3);
  margin-top: auto;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- CTA-Fläche ----------------------------------------------------------- */

.drench__grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 60rem) {
  .drench__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.drench__grid h2 {
  max-width: 15ch;
}

.ctile {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.05rem 0;
  border-top: 1px solid oklch(1 0 0 / 0.22);
  text-decoration: none;
  transition: padding-inline-start 0.4s var(--ease);
}
.ctile:hover {
  padding-inline-start: 0.55rem;
}
.ctile__i {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--orange);
  color: var(--orange);
}
.ctile__l {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.75 0.006 60);
  font-weight: 700;
  line-height: 1.3;
}
.ctile__v {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -0.022em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  margin-top: 0.2rem;
}
/* Auf hellem Grund */
.ctile--light {
  border-top-color: var(--line-2);
  color: inherit;
}
.ctile--light .ctile__i {
  border-color: var(--ink);
  color: var(--orange-ink);
}
.ctile--light .ctile__l {
  color: var(--ink-3);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq {
  border-top: 0;
}
.faq__item {
  border-bottom: 1px solid var(--line-2);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.014em;
  line-height: 1.2;
  transition: color 0.25s var(--ease);
}
.faq__q:hover {
  color: var(--orange-ink);
}
.faq__ic {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}
.faq__ic::before,
.faq__ic::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: var(--orange);
  transition: rotate 0.45s var(--ease), opacity 0.35s var(--ease);
}
.faq__ic::after {
  rotate: 90deg;
}
.faq__item[data-open] .faq__ic::after {
  rotate: 0deg;
  opacity: 0;
}
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq__item[data-open] .faq__a {
  grid-template-rows: 1fr;
}
.faq__a > div {
  overflow: hidden;
}
.faq__a p {
  padding-bottom: 1.4rem;
  color: var(--ink-2);
  max-width: 62ch;
  font-size: var(--step-sm);
}

/* --- Partner-Laufband -----------------------------------------------------
   Zwei identische Gruppen laufen nebeneinander, die Spur wandert um exakt
   50 %. Dadurch schließt der Lauf nahtlos. Animiert wird nur transform.
   ------------------------------------------------------------------------ */

.marquee {
  overflow: hidden;
  border-block: var(--rule);
  background: var(--paper);
  position: relative;
}
/* Ränder weich auslaufen lassen, damit die Logos nicht hart abgeschnitten
   an der Kante hängen */
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 7vw, 7rem);
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--paper), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--paper), transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-lauf 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
@keyframes marquee-lauf {
  to {
    transform: translateX(-50%);
  }
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.25rem, 3vw, 2.5rem);
  flex: none;
  margin: 0;
}
.marquee__group li {
  flex: none;
  display: grid;
  place-items: center;
}
.marquee__group img {
  height: clamp(1.5rem, 2.6vw, 2.1rem);
  width: auto;
  /* Einheitlich entsättigt, damit die Fremdfarben das Dreiklang-System nicht
     brechen. Beim Überfahren zeigt sich die Originalfarbe. */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 0.35s var(--ease), opacity 0.35s var(--ease);
}
.marquee__group li:hover img {
  filter: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }
  .marquee__track {
    animation: none;
  }
  .marquee__group + .marquee__group {
    display: none;
  }
}

/* --- Kontaktseite ---------------------------------------------------------
   Das Formular ist der Zweck der Seite, also steht es oben rechts und beginnt
   auf derselben Höhe wie die Überschrift. Auf schmalen Geräten folgt es direkt
   auf einen kurzen Kopf, damit es ohne Scrollen sichtbar bleibt.
   ------------------------------------------------------------------------ */

.kontakt {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .kontakt {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
  }
  .kontakt__intro {
    grid-column: 1;
    grid-row: 1;
  }
  .kontakt__form {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .kontakt__direkt {
    grid-column: 1;
    grid-row: 2;
  }
}
.kontakt h1 {
  font-size: var(--step-l);
}

/* Formularkarte mit schwarzer Kopfleiste */
.formcard {
  background: var(--paper);
  border: 2px solid var(--ink);
}
.formcard__head {
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.formcard__t {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.formcard__n {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange-soft);
  font-variant-numeric: tabular-nums;
}
.formcard__body {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

/* Direktkontakt als kompakte Zeilenliste */
.direkt {
  border-top: var(--rule);
}
.direkt__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding-inline-start 0.35s var(--ease);
}
a.direkt__row:hover {
  padding-inline-start: 0.5rem;
}
.direkt__i {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  color: var(--orange-ink);
}
.direkt__l {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
.direkt__v {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.05rem;
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -0.02em;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* --- Formular ------------------------------------------------------------- */

.form {
  display: grid;
  gap: 1rem;
}
.form__row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) {
  .form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: grid;
  gap: 0.4rem;
}
/* .chip ist ebenfalls ein <label> und darf die Versalien-Sperrung der
   Feldbeschriftungen nicht erben, sonst werden die Chips doppelt so breit. */
.field label:not(.chip),
.field-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 0.95rem;
  background: var(--paper);
  border: 2px solid var(--line-2);
  font-size: var(--step-sm);
  transition: border-color 0.25s var(--ease);
}
.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
}
.field--check {
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
}
.field--check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--orange-ink);
  padding: 0;
}
.field--check label {
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.field--check a {
  color: var(--orange-ink);
  text-underline-offset: 2px;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  position: relative;
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
}
.chip span {
  display: block;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--line-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.chip input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.chip input:focus-visible + span {
  outline: 2px solid var(--orange-ink);
  outline-offset: 2px;
}

.form__note {
  font-size: 0.8125rem;
  color: var(--ink-3);
}
.form__status {
  padding: 0.85rem 1rem;
  font-size: var(--step-sm);
  font-weight: 700;
  background: var(--orange);
  color: var(--ink);
}

/* --- Merkliste ------------------------------------------------------------ */

.ticks {
  display: grid;
  gap: 0.7rem;
}
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  font-size: var(--step-sm);
  color: var(--ink-2);
}
.ticks svg {
  color: var(--orange-ink);
  margin-top: 0.3rem;
  flex: none;
}
.ticks b {
  color: var(--ink);
  font-weight: 700;
}
.invert .ticks li {
  color: oklch(0.8 0.006 60);
}
.invert .ticks b {
  color: var(--paper);
}
.invert .ticks svg {
  color: var(--orange);
}

/* --- Leistungsraster: echte Zellen ---------------------------------------- */

.deliver {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: transparent;
}
@media (min-width: 48rem) {
  .deliver {
    grid-template-columns: 1fr 1fr;
  }
}
.deliver__item {
  background: var(--paper);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}
.deliver__item h3 {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  font-size: 1.05rem;
}
.deliver__item h3 i {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--orange-ink);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.deliver__item p {
  margin-top: 0.45rem;
  color: var(--ink-2);
  font-size: var(--step-sm);
  max-width: 46ch;
}
.invert .deliver {
  border-top-color: var(--paper);
  border-left-color: oklch(1 0 0 / 0.2);
}
.invert .deliver__item {
  border-right-color: oklch(1 0 0 / 0.2);
  border-bottom-color: oklch(1 0 0 / 0.2);
}
.invert .deliver__item p {
  color: oklch(0.78 0.006 60);
}
.invert .deliver__item h3 i {
  color: var(--orange-soft);
}

/* --- Galerie -------------------------------------------------------------- */

.gal {
  display: grid;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.gal .frame {
  aspect-ratio: 4 / 3;
}
.gal .frame:first-child {
  grid-column: span 2;
  aspect-ratio: 8 / 3;
}
@media (max-width: 48rem) {
  .gal .frame:first-child {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

/* --- Seitenkopf ----------------------------------------------------------- */

.phead {
  padding-top: calc(var(--nav-h) + clamp(1.5rem, 3.5vw, 2.75rem));
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
}
/* Folgt eine Bildbahn, schließt sie bündig an. Kein Polster dazwischen. */
.phead:has(.hero__band) {
  padding-bottom: 0;
}
@media (min-width: 62rem) {
  .phead > .shell > .split {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }
}
.phead + .section {
  padding-top: clamp(2.25rem, 4.5vw, 4rem);
}
.crumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.crumb a {
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.crumb a:hover {
  color: var(--orange-ink);
}
.crumb span[aria-current] {
  color: var(--ink);
  font-weight: 800;
}

/* --- Footer --------------------------------------------------------------- */

.foot {
  background: var(--ink);
  color: oklch(0.8 0.006 60);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem;
  border-top: 4px solid var(--orange);
}
.foot__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.foot__grid > :first-child {
  grid-column: 1 / -1;
}
@media (min-width: 60rem) {
  .foot__grid > :first-child {
    grid-column: auto;
  }
}
.foot h2 {
  font-size: 0.6875rem;
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--orange-soft);
  margin-bottom: 1rem;
  line-height: 1.4;
}
.foot a {
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.foot ul {
  display: grid;
  gap: 0.6rem;
  font-size: var(--step-sm);
}
.foot a:hover {
  color: var(--orange-soft);
}
.foot .brand {
  color: var(--paper);
  font-size: 1.5rem;
}
.foot__blurb {
  margin-top: 0.9rem;
  font-size: var(--step-sm);
  max-width: 30ch;
  line-height: 1.55;
}
.foot__bar {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid oklch(1 0 0 / 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: oklch(0.65 0.006 60);
}
.foot__bar nav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* --- Anrufleiste mobil ---------------------------------------------------- */

.callbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border-top: 2px solid var(--ink);
  padding: 0.55rem;
  gap: 0.45rem;
}
.js .callbar {
  translate: 0 100%;
  transition: translate 0.45s var(--ease);
}
.js .callbar.is-in {
  translate: 0 0;
}
@media (min-width: 76rem) {
  .callbar {
    display: none;
  }
}
.callbar .btn {
  padding: 0.72rem 1rem;
  font-size: 0.875rem;
}
body:has(.callbar) .foot {
  padding-bottom: 5.5rem;
}
@media (min-width: 76rem) {
  body:has(.callbar) .foot {
    padding-bottom: 1.75rem;
  }
}

/* --- Reveal ---------------------------------------------------------------
   Hinter .js gesperrt: ohne JavaScript ist jede Zeile sofort sichtbar.
   ------------------------------------------------------------------------ */

.js .reveal {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 0.75s var(--ease), translate 0.75s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.is-in {
  opacity: 1;
  translate: 0 0;
}
.js .reveal--still {
  translate: 0 0;
}
.js [data-stagger] > * {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}
.js [data-stagger].is-in > * {
  opacity: 1;
  translate: 0 0;
}
.js [data-stagger].is-in > *:nth-child(1) {
  transition-delay: 0.02s;
}
.js [data-stagger].is-in > *:nth-child(2) {
  transition-delay: 0.09s;
}
.js [data-stagger].is-in > *:nth-child(3) {
  transition-delay: 0.16s;
}
.js [data-stagger].is-in > *:nth-child(4) {
  transition-delay: 0.23s;
}
.js [data-stagger].is-in > *:nth-child(5) {
  transition-delay: 0.3s;
}
.js [data-stagger].is-in > *:nth-child(6) {
  transition-delay: 0.37s;
}

/* --- Hilfsklassen --------------------------------------------------------- */

.stack-xs > * + * {
  margin-top: 0.7rem;
}
.stack-s > * + * {
  margin-top: 1.15rem;
}
.stack > * + * {
  margin-top: 1.9rem;
}
.mt-head {
  margin-top: 1.15rem;
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  text-decoration: none;
}
.skip:focus {
  left: 0;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Bewegung aus --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal,
  [data-stagger] > * {
    opacity: 1 !important;
    translate: 0 0 !important;
  }
  .mask-line > span {
    translate: 0 0 !important;
  }
  .frame img {
    clip-path: none !important;
    scale: 1 !important;
  }
  .callbar {
    translate: 0 0 !important;
  }
  .step__n {
    color: var(--orange) !important;
  }
}

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

@media print {
  .nav,
  .drawer,
  .callbar,
  .btn,
  .foot {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* --- Referenz-Galerie ----------------------------------------------------
   Echte Kundenfotos auf den Leistungsseiten. Nutzt den vorhandenen
   .frame-Baustein samt Clip-Reveal aus antega.js.
   ------------------------------------------------------------------------ */
.refs {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 54rem) {
  .refs {
    grid-template-columns: repeat(4, 1fr);
  }
}
.refs figure {
  margin: 0;
}
.refs .frame {
  aspect-ratio: 4 / 3;
}
.refs figcaption {
  margin-top: 0.5rem;
  color: var(--ink-3);
  font-size: 0.85rem;
}

/* --- Datenschutz-Hinweis --------------------------------------------------
   Informiert nur, blockiert nichts. Unten links, auf Mobil oberhalb der
   Callbar. Merkt sich die Bestätigung im Local Storage.
   ------------------------------------------------------------------------ */
.cnotice {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--ink);
  color: var(--paper);
  padding: 1.1rem 1.25rem;
  border-top: 3px solid var(--orange);
}
/* display:flex würde das hidden-Attribut sonst überstimmen */
.cnotice[hidden] {
  display: none;
}
.cnotice__t {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(252, 254, 254, 0.82);
}
.cnotice__t a {
  color: var(--paper);
  text-underline-offset: 2px;
}
.cnotice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cnotice__ok {
  padding: 0.6rem 1.2rem;
  font-size: 0.875rem;
}
.cnotice__no {
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  background: transparent;
  color: rgba(252, 254, 254, 0.85);
  border: 1px solid rgba(252, 254, 254, 0.35);
}
.cnotice__no:hover {
  color: var(--paper);
  border-color: rgba(252, 254, 254, 0.7);
}
@media (max-width: 47.9rem) {
  .cnotice {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 4.6rem;
    max-width: none;
  }
}

/* --- Der Unterschied: vier Zusagen an einer Linie -------------------------
   Eine durchgezogene orange Linie verbindet vier Stationen. Die Linie
   zeichnet sich beim Reveal, jede Station erscheint, wenn die Linie sie
   erreicht. Die Linie ist die Aussage: ein Vertrag, keine Lücken.
   ------------------------------------------------------------------------ */
.railx {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.railx__line {
  position: absolute;
  top: 4.5px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}
.js .railx__line {
  transition: transform 1.5s var(--ease) 0.15s;
}
.reveal.is-in .railx__line,
html:not(.js) .railx__line {
  transform: scaleX(1);
}
.railx__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.railx__item {
  position: relative;
  padding-top: 2.1rem;
}
.railx__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--orange);
  scale: 0;
}
.js .railx__node {
  transition: scale 0.35s var(--ease);
  transition-delay: calc(0.15s + var(--i, 0) * 0.36s);
}
.reveal.is-in .railx__node,
html:not(.js) .railx__node {
  scale: 1;
}
.railx__body {
  opacity: 1;
}
.js .railx__body {
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 0.55s var(--ease), translate 0.55s var(--ease);
  transition-delay: calc(0.3s + var(--i, 0) * 0.36s);
}
.reveal.is-in .railx__body {
  opacity: 1;
  translate: 0 0;
}
.railx__ic {
  display: block;
  width: 2rem;
  height: 2rem;
  color: var(--orange-ink);
}
.railx__ic path,
.railx__ic circle,
.railx__ic rect {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .railx__ic path,
.js .railx__ic circle,
.js .railx__ic rect {
  transition: stroke-dashoffset 0.9s var(--ease);
  transition-delay: calc(0.45s + var(--i, 0) * 0.36s);
}
.reveal.is-in .railx__ic path,
.reveal.is-in .railx__ic circle,
.reveal.is-in .railx__ic rect,
html:not(.js) .railx__ic path,
html:not(.js) .railx__ic circle,
html:not(.js) .railx__ic rect {
  stroke-dashoffset: 0;
}
html:not(.js) .railx__ic path,
html:not(.js) .railx__ic circle,
html:not(.js) .railx__ic rect {
  stroke-dasharray: none;
}
.railx__t {
  margin-top: 0.95rem;
  font-size: 1.0625rem;
  font-weight: 800;
  font-stretch: 92%;
  letter-spacing: -0.014em;
  line-height: 1.2;
}
.railx__d {
  margin-top: 0.4rem;
  max-width: 15rem;
  color: var(--ink-2);
  font-size: var(--step-sm);
  line-height: 1.55;
}
@media (max-width: 59.9rem) {
  .railx__line {
    top: 0;
    bottom: 0;
    left: 4.5px;
    right: auto;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top center;
  }
  .reveal.is-in .railx__line,
  html:not(.js) .railx__line {
    transform: scaleY(1);
  }
  .railx__items {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .railx__item {
    padding-top: 0;
    padding-left: 2.4rem;
  }
  .railx__node {
    top: 0.2rem;
  }
}

/* --- Aktion: Klimaanlagen zur Neueröffnung München ------------------------
   Zwei Preis-Kacheln als Buttons: Klick übernimmt die Variante in den
   kurzen Funnel darunter. Flächen und harte Kanten wie im Rest der Seite.
   ------------------------------------------------------------------------ */
.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
/* Bleibt bei ungerader Kartenzahl eine Lücke, füllt die letzte Karte die Reihe. */
.deal:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 33.9rem) {
  .deals {
    grid-template-columns: 1fr;
  }
}
.deal {
  display: block;
  position: relative;
  text-align: left;
  cursor: pointer;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.15rem 1.25rem 1.05rem;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.deal:hover {
  border-color: var(--ink);
}
.deal::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.deal:hover::after,
.deal:focus-visible::after {
  transform: scaleX(1);
}
.deal__b {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-2);
}
.deal__p {
  display: block;
  margin-top: 0.35rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  line-height: 1;
}
.deal__m {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--step-sm);
  color: var(--ink-2);
}
.deal__go {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--orange-ink);
}
.deal__fine {
  margin-top: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 38rem;
}
.klima-funnel {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  scroll-margin-top: 6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.klima-funnel .form {
  margin-top: 1.25rem;
  max-width: 56rem;
}
.form__row--3 {
  display: grid;
  gap: 1rem;
}
@media (min-width: 52rem) {
  .form__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Shop ------------------------------------------------------------------
   Shop-Tab in Markenorange, Produktkarten als ruhige Flächen, Kasse im
   Stil des Klima-Funnels. Direktkauf ohne Warenkorb.
   ------------------------------------------------------------------------ */
/* Shop als oranger Button neben dem Beratungs-CTA: Spiegelbild des
   Standard-Buttons (orange in Ruhe, Tinte beim Hover). */
.nav__cta--shop {
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
  margin-inline-end: 0.1rem;
}
.nav__cta--shop::before {
  background: var(--ink);
}
.nav__cta--shop:hover {
  color: var(--paper);
}
.drawer__shop {
  color: var(--orange-ink) !important;
}
.prods {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
@media (min-width: 60rem) {
  .prods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.prod {
  background: var(--paper);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.prod .frame {
  background: transparent;
}
.prod__body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prod__t {
  font-size: var(--step-s);
}
.prod__d {
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: var(--step-sm);
  line-height: 1.6;
}
.prod__buy {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.prod__price {
  display: block;
  font-size: clamp(1.9rem, 3.5vw, 2.4rem);
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  line-height: 1;
}
.prod__vat {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.shop-summary {
  margin-top: 1.25rem;
  background: var(--bg);
  border-left: 3px solid var(--orange);
  padding: 0.85rem 1.1rem;
  font-size: var(--step-sm);
}
.shop-summary[hidden] {
  display: none;
}
.shop-summary__hint {
  color: var(--ink-2);
}
.shop-summary--empty {
  color: var(--ink-2);
  border-left-color: var(--line);
}

/* Mobiler Shop-Button: sitzt links neben dem Burger, gleiche Rahmensprache.
   Ab Desktop-Breite übernimmt der Shop-Link in der Hauptnavigation. */
.nav__shop-mobile {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  height: 2.75rem;
  padding-inline: 0.9rem;
  border: 2px solid var(--orange-ink);
  color: var(--orange-ink);
  font-size: var(--step-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nav__shop-mobile + .burger {
  margin-inline-start: 0;
}
@media (min-width: 76rem) {
  .nav__shop-mobile {
    display: none;
  }
}

/* Shop-Feinschliff: Badges, Verfügbarkeit, Preisleiste, Kauf-Button in
   voller Breite und die Bestellübersicht in der Kasse. */
.phead--shop .sheet {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.prod__media {
  position: relative;
  background: var(--paper);
}
.prod__media img {
  display: block;
  width: 100%;
  height: auto;
}
.prod__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
  background: var(--orange);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
}
.prod__badge--alt {
  background: var(--ink);
  color: var(--paper);
}
.prod__specs {
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.prod__specs li {
  font-size: var(--step-sm);
  color: var(--ink-2);
  padding-left: 1.1rem;
  position: relative;
}
.prod__specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 2px;
  background: var(--orange);
}
.prod__avail {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink);
}
.prod__dot {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--orange);
  flex: none;
}
.prod__pricebar {
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
}
.prod__vat {
  text-align: right;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.prod__cta {
  margin-top: 1rem;
  width: 100%;
  justify-content: center;
}
.prod__body {
  display: flex;
  flex-direction: column;
}
.prod__body > .prod__specs {
  margin-bottom: 0;
}
.prod .prod__pricebar {
  margin-top: auto;
  padding-top: 1.25rem;
}
.osum {
  margin-top: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  padding: 1rem 1.25rem;
  max-width: 34rem;
}
.osum[hidden] {
  display: none;
}
.osum__row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: var(--step-sm);
  padding: 0.4rem 0;
}
.osum__row--total {
  border-top: 1px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 0.75rem;
  font-weight: 800;
  font-size: 1rem;
}

/* --- Shop-Chrome -----------------------------------------------------------
   Eigenes Erlebnis: schlanker Header mit Logo, Shop-Marke und Rückweg zur
   Website. Kasse als eigene Seite mit Bestellübersicht neben dem Formular.
   ------------------------------------------------------------------------ */
.shoptag {
  background: var(--orange);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  margin-inline-start: -0.9rem;
}
.shopback {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  color: var(--ink-2);
  font-size: var(--step-sm);
  font-weight: 600;
  padding: 0.5rem 0.25rem;
  white-space: nowrap;
}
.shopback:hover {
  color: var(--ink);
}
.shopback svg {
  color: var(--orange-ink);
  flex: none;
}
.shopback__short {
  display: none;
}
@media (max-width: 35.9rem) {
  .shopback__long { display: none; }
  .shopback__short { display: inline; }
}
.nav__tel--shop {
  display: inline-flex;
  margin-inline-start: auto;
}
@media (max-width: 47.9rem) {
  .nav__tel--shop { display: none; }
  .nav--shop .shopback { margin-inline-start: auto; }
}
.prod__brand {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.4rem;
}
.prod__media--white {
  background: #ffffff;
  padding: clamp(1rem, 2.5vw, 2rem);
}
.kasse {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .kasse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  }
  .kasse__summary {
    order: 2;
    position: sticky;
    top: 6rem;
  }
  .kasse__form {
    order: 1;
  }
}
.kasse__summary {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}
.kasse__product {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1.25rem;
}
.kasse__product img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  background: #ffffff;
  border: 1px solid var(--line);
  flex: none;
}
.kasse__name {
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1.3;
}
.kasse__meta {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.kasse__change {
  margin-top: 1.25rem;
  font-size: var(--step-sm);
}

/* --- Shop-Hero: Text links, Bühne mit Produkt-Minikarten rechts ----------- */
.btn--orange {
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
}
.btn--orange::before {
  background: var(--ink);
}
.btn--orange:hover {
  color: var(--paper);
}
.shophero {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .shophero {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
}
.trustrow {
  list-style: none;
  padding: 0;
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.trustrow li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step-sm);
  color: var(--ink-2);
  white-space: nowrap;
}
.trustrow svg {
  color: var(--orange-ink);
  flex: none;
}
.trustrow b {
  color: var(--ink);
  font-weight: 700;
}
.shophero__stage {
  position: relative;
}
.shophero__stage > img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 24rem;
  object-fit: cover;
  object-position: 62% 30%;
}
.shophero__cards {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 48rem) {
  .shophero__cards {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .shophero__cards .minicard {
    padding: 0.7rem 0.75rem;
    gap: 0.6rem;
  }
  .shophero__cards .minicard > img {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 47.9rem) {
  .shophero__cards {
    margin-top: 0.75rem;
    grid-template-columns: 1fr;
  }
}
.minicard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.85rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.minicard:hover {
  border-color: var(--ink);
}
.minicard > img {
  width: 3.6rem;
  height: 3.6rem;
  object-fit: contain;
  background: #ffffff;
  flex: none;
}
.minicard__badge {
  position: absolute;
  top: -0.55rem;
  left: 0.75rem;
  background: var(--orange);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
}
.minicard__body {
  min-width: 0;
}
.minicard__t {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1.25;
}
.minicard__p {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.05rem;
  font-weight: 800;
  font-stretch: 84%;
}
.minicard__s {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-2);
}
.minicard__go {
  margin-inline-start: auto;
  color: var(--orange-ink);
  flex: none;
}
.sheet--icons {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sheet--icons .sheet__ic {
  color: var(--orange);
  margin-bottom: 0.6rem;
}
.sheet--icons .sheet__s {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: rgba(252, 254, 254, 0.55);
}

/* Shop-Ablauf: große Zeilen-Karten mit oranger Nummer, darunter der
   Telefon-Hinweis mit Icon-Kachel. */
.flow {
  list-style: none;
  padding: 0;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: grid;
  gap: 2px;
}
.flow__step {
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: clamp(4rem, 8vw, 7rem) minmax(0, 1fr);
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.flow__n {
  font-size: clamp(2.4rem, 4.5vw, 3.5rem);
  font-weight: 800;
  font-stretch: 84%;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--orange);
}
.flow__t {
  font-size: var(--step-s);
}
.flow__d {
  margin-top: 0.5rem;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 46rem;
}
.flow__hint {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-2);
  font-size: var(--step-sm);
}
.flow__ic {
  width: 3rem;
  height: 3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--orange-ink);
  flex: none;
}

/* --- Technik-Scrollytelling ------------------------------------------------
   Sticky-Bühne: oben die Gerätewahl, in der Mitte das per Scroll gespulte
   Video, unten die Fortschrittsleiste mit Phasenmarken. Beschriftungen als
   Overlay-Chips mit orangem Strich, phasenweise sichtbar. Scrollhinweis am
   Anfang, Bestell-CTA am Ende — beide an derselben Stelle, ihre
   Sichtfenster überschneiden sich nie. */
.scrub {
  position: relative;
  height: 340vh;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.scrub__sticky {
  position: sticky;
  /* Der Header ist fixed und beim Scrollen 4rem hoch (.nav.is-stuck) —
     die Bühne beginnt darunter, sonst verdeckt er die Gerätewahl. */
  top: 4rem;
  height: calc(100vh - 4rem);
  height: calc(100svh - 4rem);
  overflow: hidden;
  background: #ffffff;
  display: grid;
  place-items: center;
  padding: 4.9rem 0 6rem;
}
.scrub__sticky video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Kopfzeile: welches Gerät gerade zerlegt wird */
.scrub__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
}
.scrub__now {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.scrub__now-k {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scrub__now-n {
  font-weight: 800;
  font-stretch: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scrub__devices {
  display: flex;
  gap: 0.5rem;
  flex: none;
}
.scrub__dev {
  appearance: none;
  font: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.scrub__dev b {
  font-weight: 800;
  font-stretch: 92%;
}
.scrub__dev-m {
  font-size: var(--step-sm);
  color: var(--ink-2);
}
.scrub__dev:hover {
  border-color: var(--ink);
}
.scrub__dev.is-active {
  border-color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
  background: #fff6f0;
}
.scrub__dev.is-active .scrub__dev-m {
  color: var(--orange-ink);
}

/* Beschriftungs-Chips */
.scrub__cap {
  position: absolute;
  z-index: 2;
  left: var(--cx, 6%);
  top: var(--cy, 12%);
  max-width: 21rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  padding: 0.9rem 1.1rem;
  opacity: 0;
  translate: 0 0.6rem;
  transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
  pointer-events: none;
}
.scrub__cap.is-on {
  opacity: 1;
  translate: 0 0;
}
.scrub__cap-t {
  display: block;
  font-weight: 800;
  font-stretch: 92%;
  line-height: 1.25;
}
.scrub__cap-s {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--step-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

/* Scrollhinweis (Anfang) und Bestell-CTA (Ende) */
.scrub__hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 7rem;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  font-size: var(--step-sm);
  color: var(--ink-2);
  white-space: nowrap;
  transition: opacity 0.35s var(--ease);
}
.scrub__hint svg {
  color: var(--orange-ink);
  animation: scrub-nudge 1.6s var(--ease) infinite;
}
@keyframes scrub-nudge {
  0%,
  100% {
    translate: 0 -2px;
  }
  50% {
    translate: 0 2px;
  }
}
.scrub__hint.is-gone {
  opacity: 0;
  visibility: hidden;
}
.scrub__go {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6.9rem;
  translate: -50% 0.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), translate 0.4s var(--ease);
}
.scrub__go.is-on {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}

/* Fortschrittsleiste */
.scrub__rail {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.2rem;
  padding: 0.95rem clamp(1rem, 3vw, 2rem) 1.2rem;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
}
.scrub__phases {
  grid-area: 1 / 1;
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  position: relative;
  height: 1rem;
}
.scrub__phase {
  position: absolute;
  top: 0;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.scrub__phase:first-child {
  translate: 0 0;
}
.scrub__phase:last-child {
  left: auto;
  right: 0;
  translate: 0 0;
}
.scrub__phase.is-past {
  color: var(--ink);
}
.scrub__phase.is-now {
  color: var(--orange-ink);
}
.scrub__track {
  grid-area: 2 / 1;
  position: relative;
  height: 3px;
  background: var(--line);
  border-radius: 999px;
}
.scrub__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--flame), var(--orange));
  transform-origin: left center;
  transform: scaleX(0);
}
.scrub__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--line-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.scrub__dot.is-past {
  border-color: var(--orange);
  background: var(--orange);
}
.scrub__pct {
  grid-area: 1 / 2 / 3 / 3;
  align-self: end;
  translate: 0 0.1rem;
  font-size: var(--step-sm);
  font-weight: 800;
  line-height: 1;
  color: var(--ink-2);
  min-width: 3.5ch;
  text-align: right;
}

@media (max-width: 47.9rem) {
  .scrub {
    height: 280vh;
  }
  .scrub__sticky {
    padding: 4.4rem 0 4.9rem;
  }
  .scrub__now {
    display: none;
  }
  .scrub__devices {
    width: 100%;
  }
  .scrub__dev {
    flex: 1;
    justify-content: center;
    padding: 0.5rem 0.25rem;
  }
  .scrub__dev-m {
    display: none;
  }
  .scrub__cap {
    left: 0.75rem !important;
    right: 0.75rem;
    top: auto !important;
    bottom: 5.6rem;
    max-width: none;
  }
  /* Hinweis und CTA rutschen unter die Kopfzeile, unten sitzen die Chips */
  .scrub__hint,
  .scrub__go {
    bottom: auto;
    top: 5.4rem;
  }
  .scrub__go {
    translate: -50% -0.6rem;
  }
  .scrub__phase:not(:first-child):not(:last-child) {
    display: none;
  }
}