/*
 * Vendinvest v2 — Design-Foundation des Redesigns.
 *
 * Wird NACH css/style.min.css geladen. Alle neuen Klassen tragen ein `v2-`
 * Präfix oder leben unter einem v2-Wurzelelement, damit die Alt-Styles der
 * noch nicht migrierten Seiten unberührt bleiben. Cookie-Banner, Toasts und
 * Formular-Handling kommen weiterhin aus style.min.css / main.min.js.
 *
 * Bewegungssystem: CSS scroll-driven animations (animation-timeline) nach dem
 * Vorbild des Uprisera-Projekts. Browser ohne Unterstützung und Nutzer mit
 * prefers-reduced-motion bekommen den Ruhezustand — der ist vollständig.
 */

/* ------------------------------------------------------------------ *
 * Schrift — Archivo (latin + latin-ext, slowakische Diakritika geprüft)
 * ------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../res/fonts/v2/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../res/fonts/v2/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../res/fonts/v2/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../res/fonts/v2/archivo-800.woff2') format('woff2');
}

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
:root {
  /* Farbwelt: kühle Stahlgrau-Neutrale (Hue ~215°), EIN Safety-Amber-Akzent.
     Kontraste geprüft: Amber-Button trägt Graphit-Text (6,8:1), nie Weiss. */
  --v2-bg: #f7f8fa;
  --v2-bg-subtle: #edeff2;
  --v2-sheet: #eff1f4;
  --v2-surface: #ffffff;
  --v2-ink: #232b36;
  --v2-ink-strong: #14181d;
  --v2-ink-soft: #5a6472;
  --v2-ink-mid: #414a56; /* Anthrazit: Konturen, die weder schwarz noch weich sein sollen */
  --v2-ink-faint: rgba(35, 43, 54, 0.4);
  --v2-border: #d9dee4;
  --v2-dark: #14181d;
  --v2-dark-2: #1a2028;
  --v2-on-dark: #f4f5f7;
  --v2-on-dark-soft: rgba(244, 245, 247, 0.68);
  --v2-accent: #e68a1e;
  --v2-accent-strong: #cf7a12;
  --v2-accent-on-dark: #efa23f;
  --v2-on-accent: #14181d;
  --v2-accent-tint: rgba(230, 138, 30, 0.14);

  /* Schrift */
  --v2-font: 'Archivo', 'Segoe UI', 'Trebuchet MS', sans-serif;

  /* Kanten & Radien */
  --v2-radius-xs: 6px;
  --v2-radius-sm: 10px;
  --v2-radius-md: 16px;
  --v2-radius-lg: 24px;
  --v2-radius-xl: 32px;
  --v2-radius-pill: 999px;

  /* Bewegung */
  --v2-ease: cubic-bezier(0.42, 0, 0.2, 1);
  --v2-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --v2-parallax-easing: cubic-bezier(0.42, 0, 0, 1);

  /* Seitenkante: eine Grösse für alles, was am Rand ausgerichtet ist. */
  --v2-grid-max: 1680px;
  --v2-page-inset: max(6.5vw, calc((100vw - var(--v2-grid-max)) / 2));

  /* Navigationsleiste */
  --v2-nav-max: 1968px;
  --v2-nav-edge: max(8px, calc((100vw - var(--v2-nav-max)) / 2));
  --v2-nav-sheet-edge: max(0px, min(4vw, calc(var(--v2-nav-edge) - 8px)));
  --v2-nav-height: 80px;

  /* Vertikaler Rhythmus */
  /* Sektionsabstaende: erst um 20 % verdichtet, dann 10 % davon
     zurueckgegeben — netto rund 12 % enger als urspruenglich. */
  --v2-space-lg: clamp(85px, 9.7vw, 141px);
  --v2-space-md: clamp(64px, 7.9vw, 109px);
  --v2-space-sm: clamp(42px, 5.3vw, 70px);
  --v2-space-xs: clamp(29px, 3.5vw, 42px);

  /* Schatten: getönt mit dem Graphit der Marke, nie reines Schwarz. */
  --v2-shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.08);
  --v2-shadow-md: 0 12px 32px -8px rgba(20, 24, 31, 0.16);
  --v2-shadow-lg: 0 32px 64px -16px rgba(20, 24, 31, 0.24);
}

/* Registrierte Properties: nur getypte Werte lassen sich interpolieren. */
@property --v2-slide-w {
  syntax: "<length>";
  inherits: true;
  initial-value: 1188px;
}
@property --v2-slide-gap {
  syntax: "<length>";
  inherits: true;
  initial-value: 12px;
}
/* Numbers-Rahmen: die Sektion animiert ihre eigene Seiteneinrueckung
   (Uprisera-Muster "parallax-scale-down-grid"). Registriert, damit der
   Wert interpoliert statt bei 50 % hart zu kippen. Ruhewert = Rasterkante. */
@property --v2-numbers-inset {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --v2-slide-push {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* ------------------------------------------------------------------ *
 * Basis (nur auf migrierten Seiten wirksam: body trägt .v2)
 * ------------------------------------------------------------------ */
body.v2 {
  font-family: var(--v2-font);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--v2-ink);
  background-color: var(--v2-bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}
/*
 * Neutralisiert die Element-Regeln aus style.min.css (main mit max-width,
 * section mit padding, button mit Akzentfläche). Bewusst mit :where() auf
 * null Spezifität gehalten, damit jede v2-Komponentenklasse gewinnt.
 */
:where(body.v2) main.v2-root {
  max-width: none;
  margin: 0;
  padding: 0;
}
:where(body.v2) section.v2-section {
  padding: 0;
}
:where(body.v2) :where(.v2-header, .v2-main, .v2-hero, .v2-footer) button {
  padding: 0;
  background: none;
  border-radius: 0;
  align-self: auto;
  color: inherit;
}
/* style.min.css stylt button[type=submit] mit (0,1,1) — hier der Konter
   für v2-Buttons, die echte <button>-Elemente sind (Newsletter). */
body.v2 form button.v2-btn {
  display: inline-flex;
  padding: 0 26px;
  border-radius: var(--v2-radius-xs);
  font-weight: 600;
}
body.v2 form button.v2-btn--accent {
  background: var(--v2-accent);
  color: var(--v2-on-accent);
}
body.v2 form button.v2-btn--accent:hover {
  background: var(--v2-accent-strong);
}
body.v2 :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--v2-font);
  font-weight: 800;
  line-height: 1.15;
  color: var(--v2-ink-strong);
  margin: 0;
  text-wrap: balance;
}
body.v2 p {
  margin: 0;
}
body.v2 img,
body.v2 video {
  max-width: 100%;
}
body.v2 :focus-visible {
  outline: 2px solid var(--v2-accent-strong);
  outline-offset: 2px;
}

/* Typo-Skala */
.v2-h1 {
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.v2-h2 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.v2-h3 {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
}
.v2-h4 {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
}
.v2-h5 {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.v2-h6 {
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.v2-body-lg {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.45;
}
.v2-body {
  font-size: 1rem;
  line-height: 1.5;
}
.v2-body-sm {
  font-size: 0.875rem;
  line-height: 1.45;
}
.v2-muted { color: var(--v2-ink-soft); }

/* Eyebrow: schlichtes Amber-Label in Versalien, ohne Marker. */
.v2-eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
}
.v2-on-dark .v2-eyebrow { color: var(--v2-accent-on-dark); }
.v2-on-dark :is(h1, h2, h3, h4, h5, h6),
body.v2 .v2-on-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--v2-on-dark); }

/* Layout-Primitive */
.v2-inset { padding-inline: var(--v2-page-inset); }
.v2-section {
  display: block;
  position: relative;
}
.v2-section-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}
.v2-section-bg > * { position: absolute; inset: 0; }
.v2-section-bg img { object-fit: cover; width: 100%; height: 100%; }

/* Compound-Selektoren (0,2,0), damit sie den section.v2-section-Reset
   (0,1,1) sicher schlagen — sonst kollabiert der Sektionsabstand auf 0. */
.v2-section.v2-spacing-md, .v2-spacing-md { padding-block: var(--v2-space-md); }
.v2-section.v2-spacing-sm, .v2-spacing-sm { padding-block: var(--v2-space-sm); }
.v2-section.v2-spacing-lg, .v2-spacing-lg { padding-block: var(--v2-space-lg); }

.v2-rounded-top {
  border-radius: var(--v2-radius-xl) var(--v2-radius-xl) 0 0;
  overflow: clip;
  z-index: 3;
}
.v2-rounded-bottom {
  border-radius: 0 0 var(--v2-radius-xl) var(--v2-radius-xl);
  overflow: clip;
  z-index: 3;
}

/* Sektionskopf: Eyebrow links, Überschrift darunter, bewusst nicht zentriert. */
.v2-section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 880px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.v2-section-head .v2-lead {
  color: var(--v2-ink-soft);
  max-width: 620px;
}
/* Ausrichtungs-Varianten: die Sektionsköpfe wechseln über die Seite. */
.v2-section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.v2-section-head--right {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}

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

/* ------------------------------------------------------------------ *
 * Buttons — flach und entschieden: 6-px-Kante, Volltonfläche, kein Lift.
 * Der Amber-Primärknopf trägt Graphit-Text (6,8:1). Ein Primärknopf pro
 * Viewport, alles Weitere ist Ghost oder Textlink.
 * ------------------------------------------------------------------ */
.v2-btn {
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 26px;
  border-radius: var(--v2-radius-xs);
  border: 1px solid transparent;
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 150ms var(--v2-ease),
    border-color 150ms var(--v2-ease),
    color 150ms var(--v2-ease);
}
.v2-btn:active { transform: translateY(1px); }
.v2-btn svg { flex: none; }

.v2-btn--accent {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}
.v2-btn--accent:hover {
  background: var(--v2-accent-strong);
  border-color: var(--v2-accent-strong);
}
.v2-btn--fill {
  background: var(--v2-ink-strong);
  border-color: var(--v2-ink-strong);
  color: #fff;
}
.v2-btn--fill:hover { background: #29323e; border-color: #29323e; }
.v2-btn--outline {
  background: transparent;
  border-color: var(--v2-ink-strong);
  color: var(--v2-ink-strong);
}
.v2-btn--outline:hover { background: var(--v2-bg-subtle); }
.v2-on-dark .v2-btn--outline,
.v2-btn--outline.v2-btn--on-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
}
.v2-on-dark .v2-btn--outline:hover,
.v2-btn--outline.v2-btn--on-dark:hover {
  background: #fff;
  color: var(--v2-ink-strong);
  border-color: #fff;
}
/* Amber-Outline: durchsichtig, Rand und Text in Amber (fuer dunkle
   Flaechen die hellere On-Dark-Stufe); Hover fuellt amber. */
.v2-btn--outline-accent {
  background: transparent;
  border-color: var(--v2-accent-on-dark);
  color: var(--v2-accent-on-dark);
}
.v2-btn--outline-accent:hover {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
  color: var(--v2-on-accent);
}
.v2-btn--white {
  background: #fff;
  border-color: #fff;
  color: var(--v2-ink-strong);
}
.v2-btn--white:hover { background: rgba(255, 255, 255, 0.85); border-color: transparent; }
.v2-btn--lg { height: 54px; padding: 0 34px; font-size: 1rem; }

/* Textlink mit Pfeil */
.v2-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--v2-ink-strong);
  text-decoration: none;
}
.v2-arrow-link svg { transition: transform 200ms var(--v2-ease-out); }
.v2-arrow-link:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------------ *
 * Kopfleiste — Megamenü-System (Port des Uprisera-gnav)
 *
 * Zustände über data-Attribute am <header data-v2-header>:
 *   data-scrolled  "true" ab 20 px Scrollweg
 *   data-menu-open "true" bei offenem Megamenü
 * ------------------------------------------------------------------ */
.v2-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: var(--v2-nav-height);
  min-height: var(--v2-nav-height);
  background: transparent;
}
.v2-gnav {
  position: relative;
  margin: 8px;
  display: flex;
  align-items: center;
  height: 64px;
  width: calc(100% - 16px);
  max-width: var(--v2-nav-max);
  border-radius: 16px;
  padding-inline: max(0px, calc(var(--v2-page-inset) - var(--v2-nav-edge)));
  box-shadow: none;
  transition: box-shadow 0.48s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav {
  box-shadow:
    0 24px 14px 0 rgba(20, 24, 31, 0.04),
    0 11px 11px 0 rgba(20, 24, 31, 0.07),
    0 3px 6px 0 rgba(20, 24, 31, 0.08);
}
[data-menu-open="true"] .v2-gnav { box-shadow: none; }

/* Die milchige Pille hinter der Leiste — EIN Element für beide Zustände. */
.v2-gnav-pill {
  position: fixed;
  top: 8px;
  left: var(--v2-nav-edge);
  right: var(--v2-nav-edge);
  height: 64px;
  border-radius: 16px;
  background-color: rgb(255 255 255 / 0);
  pointer-events: none;
  z-index: -1;
  transition:
    top 0.3s var(--v2-ease),
    left 0.3s var(--v2-ease),
    right 0.3s var(--v2-ease),
    height 0.3s var(--v2-ease),
    border-radius 0.3s var(--v2-ease),
    background-color 0.48s var(--v2-ease),
    backdrop-filter 0.48s var(--v2-ease),
    -webkit-backdrop-filter 0.48s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav-pill {
  background-color: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-menu-open="true"] .v2-gnav-pill {
  top: 0;
  left: var(--v2-nav-sheet-edge);
  right: var(--v2-nav-sheet-edge);
  height: var(--v2-gnav-box-height, var(--v2-nav-height));
  border-radius: 0 0 18px 18px;
  background-color: var(--v2-sheet);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition-duration: 0.3s, 0.3s, 0.3s, 0.3s, 0.3s, 0.18s, 0.18s, 0.18s;
}

/* Logo: oben (über Video) weiss ausgefiltert, gescrollt original. */
.v2-gnav-logo {
  display: flex;
  align-items: center;
  margin-right: 28px;
  flex: none;
}
.v2-gnav-logo img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter 0.48s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav-logo img,
[data-menu-open="true"] .v2-gnav-logo img {
  filter: none;
}

.v2-gnav-list {
  display: none;
  align-items: center;
  gap: 4px;
  height: 64px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1;
}
.v2-gnav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 64px;
  padding: 0 12px;
  border: none;
  background: transparent;
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.48s var(--v2-ease), opacity 0.2s var(--v2-ease);
}
.v2-gnav-link:hover { opacity: 0.75; }
[data-scrolled="true"] .v2-gnav-link,
[data-menu-open="true"] .v2-gnav-link {
  color: var(--v2-ink-strong);
}
.v2-gnav-link .v2-chevron {
  transition: transform 0.2s var(--v2-ease);
}
.v2-gnav-link[aria-expanded="true"] .v2-chevron { transform: rotate(180deg); }

.v2-gnav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}
.v2-gnav-lang {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  opacity: 0.85;
  transition: color 0.48s var(--v2-ease);
}
.v2-gnav-lang:hover { opacity: 1; }
[data-scrolled="true"] .v2-gnav-lang,
[data-menu-open="true"] .v2-gnav-lang { color: var(--v2-ink-strong); }

/* CTA: durchsichtig mit Rand — oben weiss umrandet, gescrollt dunkel. */
.v2-gnav-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: transparent;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.48s var(--v2-ease),
    border-color 0.48s var(--v2-ease),
    color 0.48s var(--v2-ease);
}
.v2-gnav-cta:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
[data-scrolled="true"] .v2-gnav-cta,
[data-menu-open="true"] .v2-gnav-cta {
  background: transparent;
  border-color: var(--v2-ink-mid);
  color: var(--v2-ink-strong);
}
[data-scrolled="true"] .v2-gnav-cta:hover,
[data-menu-open="true"] .v2-gnav-cta:hover {
  background: var(--v2-ink-mid);
  border-color: var(--v2-ink-mid);
  color: #fff;
}

/* Burger unterhalb 1200 px */
.v2-gnav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex: none;
  margin-left: auto;
}
.v2-gnav-burger ~ .v2-gnav-actions { margin-left: 0; }
/* Auf schmalen Schirmen trägt die Schublade den CTA — die Leiste wäre zu eng. */
@media (max-width: 599px) {
  .v2-gnav-cta { display: none; }
}
.v2-gnav-burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: #fff;
  transition: background-color 0.48s var(--v2-ease), transform 0.3s var(--v2-ease), opacity 0.3s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav-burger span,
[data-menu-open="true"] .v2-gnav-burger span { background: var(--v2-ink-strong); }
.v2-gnav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v2-gnav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v2-gnav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1200px) {
  .v2-gnav-list { display: flex; }
  .v2-gnav-burger { display: none; }
}

/* Backdrop hinter dem offenen Megamenü */
.v2-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: none;
  background: rgba(10, 13, 18, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background-color 0.3s var(--v2-ease), backdrop-filter 0.3s var(--v2-ease), -webkit-backdrop-filter 0.3s var(--v2-ease);
}
[data-menu-open="true"] .v2-mega-backdrop {
  background: rgba(10, 13, 18, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  pointer-events: auto;
}
@media (min-width: 1200px) {
  .v2-mega-backdrop { display: block; }
}

/* Panels: kein eigener Grund — die Fläche ist die gewachsene Pille. */
.v2-mega-panel {
  position: fixed;
  top: 71px;
  left: 0;
  width: 100%;
  z-index: 1;
  display: none;
  max-height: calc(100svh - var(--v2-nav-height));
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--v2-ease);
}
.v2-mega-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.15s;
}
@media (min-width: 1200px) {
  .v2-mega-panel { display: block; }
}
.v2-mega-frame {
  padding: 16px var(--v2-page-inset) 24px;
  display: grid;
  gap: 8px;
}
.v2-mega-frame--cards {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}
.v2-mega-frame--tabs {
  grid-template-columns: 1fr 3fr;
  align-items: start;
}
.v2-mega-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--v2-surface);
  color: var(--v2-ink);
  padding: 24px;
  min-height: 260px;
}
.v2-mega-card .v2-mega-h {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.008em;
  line-height: 1.15;
  color: var(--v2-ink-strong);
  text-wrap: balance;
}
.v2-mega-card > p {
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--v2-ink-soft);
}
.v2-mega-card ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-mega-card ul a {
  font-size: 0.875rem;
  color: var(--v2-ink);
  text-decoration: none;
}
.v2-mega-card ul a:hover { text-decoration: underline; }
.v2-mega-card .v2-mega-card-cta {
  margin-top: auto;
  padding-top: 24px;
}
.v2-mega-card .v2-mega-card-cta .v2-btn { width: 100%; height: 41px; }

/* Promo-Karte: randlose Bildfläche mit Verlaufsfuss */
.v2-mega-promo {
  position: relative;
  min-height: 300px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
}
.v2-mega-promo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-mega-promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.1) 0%, rgba(10, 13, 18, 0.72) 100%);
}
.v2-mega-promo-content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.v2-mega-promo-content .v2-mega-h {
  margin: 0;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

/* Tab-Layout (Automaty) */
.v2-mega-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.v2-mega-tab {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: 75px;
  background: rgba(20, 24, 31, 0.04);
  font-family: var(--v2-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--v2-ease), color 0.2s var(--v2-ease);
}
.v2-mega-tab:hover { background: rgba(20, 24, 31, 0.09); }
.v2-mega-tab[aria-selected="true"] {
  background: var(--v2-ink-strong);
  color: #fff;
}
.v2-mega-tabs .v2-mega-all {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
  text-decoration: none;
}
.v2-mega-all:hover { text-decoration: underline; }
.v2-mega-tabpanel {
  border-radius: 16px;
  background: var(--v2-surface);
  padding: 24px;
  min-height: 248px;
}
.v2-mega-tabpanel .v2-mega-h {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--v2-ink-strong);
  text-wrap: balance;
}
.v2-mega-tabpanel p {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--v2-ink-soft);
  max-width: 560px;
}
.v2-mega-tabpanel ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 24px;
}
.v2-mega-tabpanel ul a {
  font-size: 0.875rem;
  color: var(--v2-ink);
  text-decoration: none;
}
.v2-mega-tabpanel ul a:hover { text-decoration: underline; }
.v2-mega-tabpanel .v2-arrow-link { margin-top: 20px; }

/* Mobile Schublade */
.v2-drawer {
  position: fixed;
  inset: 72px 8px auto;
  z-index: 20;
  max-height: calc(100svh - 88px);
  overflow-y: auto;
  border-radius: 16px;
  background: #fff;
  color: var(--v2-ink);
  padding: 20px;
  box-shadow: 0 26px 60px rgba(10, 13, 18, 0.42);
  display: none;
}
.v2-drawer.is-open { display: block; }
.v2-drawer-group {
  border-bottom: 1px solid rgba(20, 24, 31, 0.08);
  padding: 8px 0;
}
.v2-drawer-group:last-child { border-bottom: 0; }
.v2-drawer-group > a {
  display: block;
  padding: 10px 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
  text-decoration: none;
}
.v2-drawer-group .v2-drawer-sub {
  display: block;
  padding: 7px 0 7px 14px;
  font-size: 0.875rem;
  color: var(--v2-ink);
  text-decoration: none;
}
@media (min-width: 1200px) {
  .v2-drawer { display: none !important; }
}

/* ------------------------------------------------------------------ *
 * Scroll-Bewegung (Ports aus dem Uprisera-System)
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v2-parallax-up,
    .v2-parallax-fade {
      --v2-p-opacity: 1;
      --v2-p-y: 0px;
      animation-name: v2-enable-parallax;
      animation-timing-function: var(--v2-parallax-easing);
      animation-fill-mode: both;
      animation-timeline: view(block 40% 10%);
      animation-range: entry 0% entry 100%;
      will-change: opacity, transform;
    }
    .v2-parallax-up { --v2-p-y: 100px; }
    .v2-parallax-fade { --v2-p-opacity: 0; --v2-p-y: 48px; }
    @keyframes v2-enable-parallax {
      from {
        opacity: var(--v2-p-opacity);
        transform: translate3d(0, var(--v2-p-y), 0);
      }
    }

    /* Numbers-Rahmen oeffnet sich aus dem Vollformat (Uprisera-Sektion 4,
       "parallax-scale-down-grid"): die Sektion kommt mit 0 px Seitenrand an,
       die Karte liegt randlos im Blatt, und zieht sich auf demselben
       Zeitstrahl wie die Sektionskoepfe auf die Rasterkante zusammen.
       Animiert wird nur die Einrueckung — kein Fade, keine Skalierung. */
    .v2-numbers {
      --v2-numbers-inset: var(--v2-page-inset);
      animation-name: v2-numbers-grid-open;
      animation-timing-function: var(--v2-parallax-easing);
      animation-fill-mode: both;
      animation-timeline: view(block 40% 10%);
      animation-range: entry 0% entry 100%;
      will-change: padding-inline;
      overflow: clip;
    }
    .v2-numbers > .v2-inset { padding-inline: var(--v2-numbers-inset); }
    @keyframes v2-numbers-grid-open {
      from { --v2-numbers-inset: 0px; }
    }

    /* Hero: klebt und wird von der Folgesektion überfahren, dunkelt ab.
       Sobald er vollständig überdeckt ist, blendet ihn v2-hero-vanish aus —
       sonst läge er am Seitenende über dem Sticky-Footer. */
    .v2-hero-sticky {
      position: sticky;
      top: 0;
      will-change: transform;
      animation-name: v2-hero-up, v2-hero-vanish;
      animation-timeline: scroll(root block), scroll(root block);
      animation-range: 0px 80vh, 150vh 170vh;
      animation-timing-function: ease-out, linear;
      animation-fill-mode: both, both;
    }
    @keyframes v2-hero-vanish {
      from { visibility: visible; }
      to { visibility: hidden; }
    }
    .v2-hero-sticky::after {
      content: "";
      position: absolute;
      /* Nur die Videoflaeche dunkelt ab, der helle Rahmen bleibt hell. */
      inset: 8px;
      border-radius: var(--v2-radius-lg);
      background: #0a0d12;
      opacity: 0;
      pointer-events: none;
      z-index: 3;
      animation: v2-hero-dim linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 80vh;
    }
    @keyframes v2-hero-up {
      from { transform: translateY(0); }
      to { transform: translateY(-30vh); }
    }
    @keyframes v2-hero-dim {
      from { opacity: 0; }
      to { opacity: 0.72; }
    }

    /* Statement-Karussell: kommt randlos an und baut sich zusammen. */
    .v2-carousel-open {
      animation-name: v2-carousel-open;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view(block 0% 0%);
      animation-range: entry 0% cover 45%;
    }
    @keyframes v2-carousel-open {
      from {
        --v2-slide-w: 100cqw;
        --v2-slide-gap: 0px;
        --v2-slide-push: max(0px, 40.9cqw - 496px);
      }
    }
    .v2-carousel-track > .v2-carousel-slide:has(~ .is-active) {
      transform: translateX(calc(-1 * var(--v2-slide-push)));
    }
    .v2-carousel-track > .is-active ~ .v2-carousel-slide {
      transform: translateX(var(--v2-slide-push));
    }

    /* Elastisches Karussell: Karten ziehen sich beim Hereinscrollen zusammen. */
    @media (min-width: 768px) {
      .v2-elastic-item {
        animation-name: v2-elastic-in;
        animation-timing-function: var(--v2-parallax-easing);
        animation-fill-mode: both;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
        will-change: margin, opacity;
      }
      .v2-elastic-item:nth-child(1) { --v2-start-gap: 0.5rem; }
      .v2-elastic-item:nth-child(2) { --v2-start-gap: 1rem; }
      .v2-elastic-item:nth-child(3) { --v2-start-gap: 1.75rem; }
      .v2-elastic-item:nth-child(4) { --v2-start-gap: 2.25rem; }
      .v2-elastic-item:nth-child(5) { --v2-start-gap: 2.75rem; }
      @keyframes v2-elastic-in {
        0% { margin-inline: var(--v2-start-gap); opacity: 0; }
        20% { opacity: 1; }
        40% { margin-inline: var(--v2-end-gap); }
        100% { margin-inline: var(--v2-end-gap); opacity: 1; }
      }
    }
  }
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
.v2-hero {
  height: 100svh;
  min-height: 720px;
  /* Heller Rahmen um das Video, passend zum Seitengrund. */
  background: var(--v2-bg);
  /* Über dem Sticky-Footer (z 0), unter dem Inhaltsblatt (z 2). */
  z-index: 1;
  /* Unter die transparente Kopfleiste gezogen: das Video füllt den
     Viewport ab der Oberkante, und hinter der Leiste kann nichts
     durchscheinen (auch nicht der angepinnte Footer). */
  margin-top: calc(-1 * var(--v2-nav-height));
}
.v2-hero-frame {
  position: absolute;
  inset: 8px;
  border-radius: var(--v2-radius-lg);
  overflow: hidden;
}
.v2-hero-frame video,
.v2-hero-frame .v2-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0.12) 60%, rgba(8, 10, 14, 0) 100%),
    linear-gradient(0deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0) 34%);
  z-index: 1;
}
.v2-hero-content {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  padding-top: clamp(112px, 16vh, 168px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  color: #fff;
}
.v2-hero-content h1 {
  color: #fff;
  max-width: 15ch;
}
.v2-hero-content .v2-hero-lead {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.86);
}
.v2-hero-content .v2-eyebrow { color: rgba(255, 255, 255, 0.75); }
.v2-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* Kartenleiste am Hero-Boden: drei grosse Kacheln, an die Videozeit gekoppelt. */
.v2-hero-rail {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding-bottom: clamp(24px, 4vh, 44px);
}
.v2-rail-card {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 24px;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 13, 18, 0.48);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  font-family: var(--v2-font);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s var(--v2-ease), color 0.3s var(--v2-ease);
}
.v2-rail-card:hover { background: rgba(10, 13, 18, 0.64); }
.v2-rail-card.is-active {
  background: rgba(255, 255, 255, 0.45);
  color: var(--v2-ink-strong);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;
}
.v2-rail-card h3 {
  font-size: 1.0625rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: currentColor;
}
body.v2 .v2-rail-card h3 { color: currentColor; }
.v2-rail-card p {
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0.82;
}
.v2-rail-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  overflow: hidden;
  pointer-events: none;
}
.v2-rail-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--v2-accent);
  transform: translateX(-101%);
}
@media (max-width: 767px) {
  .v2-hero { min-height: 640px; }
  .v2-hero-rail {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .v2-hero-rail::-webkit-scrollbar { display: none; }
  .v2-rail-card { min-width: 240px; padding: 14px 14px 20px; }
  .v2-rail-card p { display: none; }
}

/* ------------------------------------------------------------------ *
 * Statement-Karussell (Prečo Vendinvest)
 * ------------------------------------------------------------------ */
.v2-statements { background: var(--v2-bg); }
.v2-carousel {
  position: relative;
  height: clamp(480px, 58vw, 640px);
}
.v2-carousel-wrapper {
  position: relative;
  height: 100%;
  overflow: visible;
  container-type: inline-size;
}
.v2-carousel-track {
  --v2-slide-gap: 12px;
  --v2-slide-w: calc(100cqw - 15px);
  position: relative;
  left: 50%;
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
  transition: transform 600ms var(--v2-parallax-easing);
}
@media (min-width: 1200px) {
  .v2-carousel-track { --v2-slide-w: min(1188px, 86cqw); }
}
.v2-carousel-slide {
  flex: 0 0 auto;
  width: var(--v2-slide-w);
  margin-inline: calc(var(--v2-slide-gap) / 2);
  position: relative;
  height: 100%;
  overflow: clip;
  border-radius: 16px;
  background: var(--v2-dark);
}
.v2-carousel-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-carousel-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(8, 10, 14, 0.84) 0%, rgba(8, 10, 14, 0.5) 52%, rgba(8, 10, 14, 0.12) 100%);
}
.v2-carousel-copy {
  position: absolute;
  top: 50%;
  left: clamp(24px, 5vw, 80px);
  right: 24px;
  transform: translateY(-50%);
  z-index: 1;
  max-width: 560px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.v2-carousel-copy .v2-stat {
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #fff;
}
.v2-carousel-copy .v2-stat small {
  display: block;
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
}
.v2-carousel-copy h3 {
  color: #fff;
  margin-top: 18px;
}
.v2-carousel-copy p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
}
.v2-carousel-copy .v2-btn { margin-top: 28px; }
/* Pfeilknoepfe und Positionspunkte sind am 28.08.2026 entfallen —
   das Karussell wird gezogen, gewischt oder mit den Pfeiltasten
   bedient (v2.js initCarouselKeys). */

/* Der Sektionskopf braucht Luft zum Blatt darunter. Der Abstand haengt
   am FOLGENDEN Element, nicht am Kopf: Karussell und Portfolio-Schiene
   laufen randlos und stehen deshalb ausserhalb des `.v2-inset`, womit
   der Kopf dessen letztes Kind ist — und
   `.v2-main .v2-inset > :last-child { margin-bottom: 0 }` jede Regel
   am Kopf schlaegt. */
.v2-statements .v2-carousel,
.v2-portfolio .v2-elastic { margin-top: clamp(40px, 4.5vw, 72px); }


/* ================================================================== *
 * ZYKLUS als aufklappende Bildtafeln
 *
 * Die offene Tafel nimmt die Breite, die uebrigen stehen als schmale
 * Lamellen daneben und tragen ihre Nummer hochkant. Wer eine Lamelle
 * anfaehrt, klappt sie auf; der Text darunter wechselt mit.
 *
 * Das Bild liegt in fester Groesse mittig hinter der Tafel, nicht auf
 * deren Breite: sonst wuerde es beim Aufklappen neu skaliert und in
 * jedem Frame neu abgetastet. So aendert sich nur der Ausschnitt.
 * ================================================================== */
.v2-squeeze {
  margin-top: clamp(32px, 4vw, 56px);
}
.v2-sq-strip {
  display: flex;
  gap: 10px;
  /* Dieselbe Hoehe wie der Bento-Block der Sektion darueber: dort sind
     es zwei Reihen a min(362px, 34vh) plus 10px Fuge. Ueber dieselbe
     Formel bleiben beide Sektionen gleich hoch — auch auf flachen
     Fenstern, wo der Deckel von 734px nicht erreicht wird. */
  height: min(734px, calc(68vh + 10px));
}
.v2-sq-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--v2-radius-md, 16px);
  overflow: hidden;
  background: var(--v2-bg-subtle);
  /* Kein Zeigefinger beim Ueberfahren — die Tafeln oeffnen sich, sie
     fuehren aber nirgendwo hin. Der Zeiger bleibt der Zeiger. */
  cursor: default;
  isolation: isolate;
  transition: flex-grow 520ms var(--v2-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.v2-sq-panel:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 3px;
}
.v2-sq-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ruhende Tafeln treten zurueck, die offene steht im Licht. */
  filter: grayscale(0.35) brightness(0.72);
  transition: filter 520ms var(--v2-ease, ease), transform 720ms var(--v2-ease, ease);
}
/* Der Verlauf traegt jetzt einen ganzen Absatz, nicht nur eine Zeile —
   er reicht deshalb hoeher und deckt unten dichter. */
.v2-sq-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 24, 31, 0.9) 0%, rgba(20, 24, 31, 0.62) 26%, rgba(20, 24, 31, 0.1) 62%, transparent 82%);
}
.v2-sq-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  text-align: left;
}
/* Der Beschreibungstext steht im Bild und gehoert der offenen Tafel.
   In der Lamelle waere dafuer kein Platz. */
.v2-sq-note {
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
  margin-top: 2px;
}
.v2-sq-num {
  font-family: var(--v2-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--v2-accent-on-dark);
  font-variant-numeric: tabular-nums;
}
.v2-sq-name {
  font-family: var(--v2-font);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}

/* Die offene Tafel. */
.v2-sq-panel.is-open { flex-grow: 4.6; }
.v2-sq-panel.is-open img { filter: none; }
.v2-sq-panel.is-open .v2-sq-name { font-size: clamp(1.25rem, 1.8vw, 1.75rem); }

/* Ab dem Tablet laeuft die Reihe ueber die volle Fensterbreite. */
@media (min-width: 900px) {
  .v2-cycle .v2-squeeze {
    margin-inline: calc(-1 * var(--v2-page-inset, 24px));
  }
  .v2-sq-strip { padding-inline: 0; }
  .v2-sq-panel:first-child { border-radius: 0 var(--v2-radius-md, 16px) var(--v2-radius-md, 16px) 0; }
  .v2-sq-panel:last-child { border-radius: var(--v2-radius-md, 16px) 0 0 var(--v2-radius-md, 16px); }
  /* Die ruhende Tafel wird zur Lamelle; der Name steht dann hochkant,
     der Beschreibungstext hat dort keinen Platz. */
  .v2-sq-panel:not(.is-open) .v2-sq-tag {
    padding: 16px 12px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-items: center;
    flex-direction: column-reverse;
    gap: 12px;
  }
  .v2-sq-panel:not(.is-open) .v2-sq-name { font-size: 0.9375rem; }
  .v2-sq-panel:not(.is-open) .v2-sq-note { display: none; }
  /* Der Absatz blendet mit dem Aufklappen ein. */
  .v2-sq-panel.is-open .v2-sq-note {
    animation: v2-sq-note-in 420ms var(--v2-ease, ease) both;
  }
  @keyframes v2-sq-note-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-sq-panel.is-open .v2-sq-note { animation: none; }
}

/* Auf dem Telefon steht die Reihe als Schiene: vier Tafeln nebeneinander
   waeren dort Lamellen ohne Inhalt. */
@media (max-width: 899px) {
  .v2-sq-strip {
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--v2-frame-gutter, 20px);
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--v2-frame-gutter, 20px));
    padding-inline: var(--v2-frame-gutter, 20px);
    gap: 12px;
  }
  .v2-sq-strip::-webkit-scrollbar { display: none; }
  .v2-sq-panel {
    flex: 0 0 auto;
    width: min(76vw, 300px);
    height: 320px;
    scroll-snap-align: start;
  }
  .v2-sq-panel img { filter: none; }
  .v2-sq-panel .v2-sq-name { font-size: 1.0625rem; }
  /* Auf der Schiene ist jede Tafel offen und traegt ihren eigenen
     Text — es gibt keine Lamellen, in denen er fehlen koennte. */
  .v2-sq-tag { padding: 18px; }
  .v2-sq-note { font-size: 0.875rem; }
}


/* ================================================================== *
 * APLIKACIE als endloses Band (ab 900px)
 *
 * Aus dem Bento wird ein Band ueber die volle Fensterbreite, das sich
 * mit der Maus in beide Richtungen ziehen laesst — ohne Anfang und
 * ohne Ende. Es laeuft NICHT von selbst: im Ruhezustand steht es,
 * bewegt wird es nur vom Nutzer. v2.js dupliziert die Karten so oft,
 * dass die Schleife nahtlos bleibt.
 *
 * Der Groessenwechsel des Bentos bleibt erhalten: die Fuehrungskarte
 * ist breit, die vier anderen schmal — im Band wird aus dem Wechsel
 * von Hoehe ein Wechsel von Breite.
 *
 * Unter 900px bleibt das Bento unveraendert: dort traegt die grosse
 * Karte mit dem 2x2 darunter, und ein gezogenes Element wuerde mit
 * dem Seiten-Scroll kaempfen.
 * ================================================================== */
@media (min-width: 900px) {
  /* Aus dem Inset heraus auf die volle Fensterbreite. */
  .v2-apps .v2-bento-band {
    margin-inline: calc(-1 * var(--v2-page-inset, 24px));
    overflow: hidden;
    margin-top: clamp(40px, 4.5vw, 72px);
  }
  /* Der Track reiht ganze Bento-Bloecke aneinander. */
  .v2-apps .v2-bento {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    width: max-content;
    will-change: transform;
    touch-action: pan-y;
  }
  /* Der Zeiger bleibt im ganzen Band der normale Pfeil. Nur die
     Schaltflaeche "Zistiť viac" ist ein Link und zeigt die Hand. */
  .v2-apps .v2-bento,
  .v2-apps .v2-bento-card,
  .v2-apps .v2-bento-media,
  .v2-apps .v2-bento-media img,
  .v2-apps .v2-bento-body { cursor: default; }

  /* Ohne das faengt der Browser beim Ziehen sein eigenes Bild- und
     Linkziehen an und die Geste bricht ab, bevor das Band folgt. */
  .v2-apps .v2-bento,
  .v2-apps .v2-bento img,
  .v2-apps .v2-bento a {
    -webkit-user-drag: none;
    user-select: none;
  }

  /* EIN Block ist das unveraenderte Bento-Muster: drei Spalten, zwei
     Zeilen, die Fuehrungskarte links ueber beide Zeilen. Genau so
     stand die Sektion vorher da — sie wandert jetzt nur horizontal. */
  .v2-bento-set {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 25 % groesser als das ruhende Bento (290px), aber an die
       Fensterhoehe gekoppelt: zwei Reihen a 362px plus Sektionskopf
       passen auf einem 900px hohen Fenster nicht mehr ins Bild, und
       die untere Reihe wuerde angeschnitten. Auf hohen Schirmen also
       die vollen 362px, auf flachen entsprechend weniger. */
    grid-auto-rows: min(362px, 34vh);
    gap: 10px;
    /* In der Breite bleiben die vollen 25 %. Der Block ist damit
       breiter als das Fenster — beim Band ist das richtig, es zeigt,
       dass rechts weitergeht. */
    width: clamp(980px, 102vw, 1475px);
  }
  .v2-bento-set > :first-child { grid-column: 1; grid-row: 1 / 3; }
  .v2-apps .v2-bento-card { min-height: 0; }

  /* Beim Ziehen darf kein Link mitgehen. */
  .v2-apps .v2-bento.is-dragging a,
  .v2-apps .v2-bento.is-dragging img { pointer-events: none; }
}


/* ================================================================== *
 * Der Zyklus lief bis 28.08.2026 als Stationsreihe an einer
 * gezeichneten Linie. Er ist durch die aufklappenden Bildtafeln
 * (.v2-squeeze) ersetzt; die Regeln dazu stehen weiter unten.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * Elastisches Karussell (Portfólio)
 * ------------------------------------------------------------------ */
.v2-portfolio { background: var(--v2-bg); }
.v2-elastic {
  position: relative;
  overflow: clip;
  padding-block: 2px;
}
.v2-elastic-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  width: 100%;
}
/* Das elastische Nebeneinander braucht 1510px Container-Breite und wird
   deshalb erst ab dem Desktop-Breakpoint aktiv. Darunter lief es zentriert
   in `overflow: clip` und wurde links und rechts angeschnitten (D2). */
@media (min-width: 1200px) {
  .v2-elastic { height: 584px; }
  .v2-elastic-container {
    --v2-item-max: 294px;
    --v2-end-gap: 0.25rem;
    position: absolute;
    inset: 2px 0 9px;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding-inline: 0;
    /* Die Wunschbreite betraegt 1510px. Ohne die Deckelung auf 100%
       lief der zentrierte Container in `overflow: clip` und wurde auf
       JEDEM Viewport darunter beidseitig angeschnitten — auch auf
       1440px (D2). Die Karten sind `flex: 1 1 0` und verteilen sich
       auf den vorhandenen Platz. */
    /* seit 30.08.2026 sechs Karten (Váhové výdajné) */
    width: min(
      calc((6 * var(--v2-item-max)) + (6 * (var(--v2-end-gap) * 2))),
      100%
    );
    margin-inline: auto;
  }
}
.v2-elastic-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  flex: none;
  border-radius: 16px;
  background: var(--v2-bg-subtle);
  color: var(--v2-ink-strong);
  text-decoration: none;
  overflow: hidden;
  transition:
    flex-grow 400ms var(--v2-ease),
    background-color 400ms var(--v2-ease),
    color 400ms var(--v2-ease);
}
@media (min-width: 1200px) {
  .v2-elastic-item {
    margin-inline: var(--v2-end-gap, 0.25rem);
    height: 573px;
    max-width: none;
    flex: 1 1 0;
  }
  .v2-elastic-item:hover,
  .v2-elastic-item:focus-visible { flex-grow: 2.04; }
}
.v2-elastic-item:hover,
.v2-elastic-item:focus-visible {
  background: var(--v2-dark);
  color: #fff;
}
.v2-elastic-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 68px;
  padding: 0 22px;
  flex: none;
}
.v2-elastic-head .v2-mark { display: none; }
.v2-elastic-head p {
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-elastic-media {
  position: relative;
  height: 340px;
  margin: 0 10px;
  border-radius: 12px;
  background: var(--v2-surface);
  overflow: hidden;
  flex: none;
}
@media (min-width: 768px) { .v2-elastic-media { height: 384px; } }
.v2-elastic-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.v2-elastic-media img.is-active { opacity: 1; }
.v2-elastic-foot {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 24px;
  max-width: 300px;
}
.v2-elastic-foot h3 {
  font-size: 1.0625rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v2 .v2-elastic-foot h3 { color: currentColor; }
.v2-elastic-foot p {
  margin-top: 5px;
  font-size: 0.9375rem;
  line-height: 1.4;
  opacity: 0.64;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-elastic-cta {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--v2-ink-strong);
  opacity: 0;
  transition: opacity 400ms var(--v2-ease);
}
.v2-elastic-item:hover .v2-elastic-cta,
.v2-elastic-item:focus-visible .v2-elastic-cta { opacity: 1; }

/* ------------------------------------------------------------------ *
 * Kalkulacka — Eingaben links, Donut-Ergebnis rechts
 * ------------------------------------------------------------------ */
.v2-calc { background: var(--v2-bg); }
.v2-calc-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  overflow: hidden;
}
@media (min-width: 960px) {
  .v2-calc-card { grid-template-columns: 1.1fr 1fr; }
}
.v2-calc-inputs {
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.v2-calc-field { display: flex; flex-direction: column; gap: 14px; }
.v2-calc-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.v2-calc-field-head label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--v2-ink);
}
.v2-calc-field-head output {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v2-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--v2-ink-faint);
  font-variant-numeric: tabular-nums;
}
.v2-calc-note {
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
  max-width: 44ch;
}
.v2-calc-inputs .v2-btn { align-self: flex-start; }

/* Range-Inputs: Graphit-Spur, Amber-Fortschritt, kantiger Griff */
.v2-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
  --v2-range-fill: 50%;
}
.v2-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--v2-accent) var(--v2-range-fill), var(--v2-bg-subtle) var(--v2-range-fill));
}
.v2-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--v2-bg-subtle);
}
.v2-range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--v2-accent);
}
.v2-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 6px;
  border: 2px solid var(--v2-surface);
  background: var(--v2-ink-strong);
  box-shadow: var(--v2-shadow-sm);
  transition: transform 150ms var(--v2-ease);
}
.v2-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--v2-surface);
  background: var(--v2-ink-strong);
  box-shadow: var(--v2-shadow-sm);
}
.v2-range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* Ergebnisseite: Donut auf Graphit */
.v2-calc-result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: clamp(32px, 4vw, 56px);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  text-align: center;
}
.v2-donut { position: relative; width: min(280px, 62vw); }
.v2-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.v2-donut-track { stroke: rgba(244, 245, 247, 0.12); }
.v2-donut-value {
  stroke: var(--v2-accent-on-dark);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--v2-ease-out);
}
.v2-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.v2-donut-center strong {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.v2-donut-center span {
  font-size: 0.8125rem;
  color: var(--v2-on-dark-soft);
}
.v2-calc-result-line {
  font-size: 1rem;
  color: var(--v2-on-dark-soft);
  max-width: 40ch;
}
.v2-calc-result-line strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Financovanie — Kupa vs. Prenajom, umschaltbar statt Tabelle
 * ------------------------------------------------------------------ */
.v2-fin { background: var(--v2-bg); }
.v2-fin-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--v2-radius-sm);
  background: var(--v2-bg-subtle);
  gap: 4px;
}
.v2-fin-switch button {
  height: 42px;
  padding: 0 22px;
  border: none;
  border-radius: var(--v2-radius-xs);
  background: transparent;
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: background-color 200ms var(--v2-ease), color 200ms var(--v2-ease), box-shadow 200ms var(--v2-ease);
}
.v2-fin-switch button[aria-pressed="true"] {
  background: var(--v2-surface);
  color: var(--v2-ink-strong);
  box-shadow: var(--v2-shadow-sm);
}
.v2-fin-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 3.5vw, 44px);
  align-items: stretch;
}
@media (min-width: 960px) {
  .v2-fin-body { grid-template-columns: 1fr 1.15fr; }
}
.v2-fin-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}
.v2-fin-panel.is-active { display: flex; animation: v2-fin-in 320ms var(--v2-ease-out); }
@keyframes v2-fin-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.v2-fin-panel h3 { max-width: 18ch; }
.v2-fin-panel > p { color: var(--v2-ink-soft); max-width: 52ch; }
.v2-fin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2-fin-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.v2-fin-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  background: var(--v2-accent);
  border-radius: 50%;
  flex: none;
}
.v2-fin-panel .v2-btn { align-self: flex-start; margin-top: 8px; }

/* Kostenverlauf: sechs Jahresbalken, rein illustrativ */
.v2-fin-chart[hidden] { display: none; }
.v2-fin-chart {
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.v2-fin-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.v2-fin-chart-head h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}
.v2-fin-chart-head span {
  font-size: 0.75rem;
  color: var(--v2-ink-faint);
}
.v2-fin-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  align-items: end;
  height: 220px;
}
.v2-fin-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}
.v2-fin-bar i {
  display: block;
  height: calc(var(--v2-bar) * 1%);
  min-height: 6px;
  border-radius: 6px 6px 3px 3px;
  background: var(--v2-bg-subtle);
  border: 1px solid var(--v2-border);
  transition: height 600ms var(--v2-ease-out), background-color 300ms var(--v2-ease);
}
.v2-fin-bar.is-accent i {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
}
.v2-fin-bar span {
  font-size: 0.75rem;
  text-align: center;
  color: var(--v2-ink-soft);
  font-variant-numeric: tabular-nums;
}
.v2-fin-chart-foot {
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}

/* ------------------------------------------------------------------ *
 * Aplikacie — Bento-Raster, 1 grosse + 4 Karten
 * ------------------------------------------------------------------ */
.v2-apps { background: var(--v2-bg); }
.v2-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .v2-bento {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 290px;
  }
  .v2-bento > :first-child { grid-column: 1; grid-row: 1 / 3; }
}
.v2-bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  border-radius: var(--v2-radius-md);
  overflow: hidden;
  background: var(--v2-dark-2);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.v2-bento-media {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.v2-bento-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--v2-ease-out);
}
.v2-bento-card:hover .v2-bento-media img { transform: scale(1.05); }
.v2-bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.02) 30%, rgba(10, 13, 18, 0.78) 100%);
}
.v2-bento-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(0);
  transition: transform 300ms var(--v2-ease);
}
.v2-bento-body h3 {
  color: #fff;
  font-size: 1.1875rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.v2 .v2-bento-body h3 { color: #fff; }
.v2-bento-body p {
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  max-width: 40ch;
}
.v2-bento-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Die Karte ist die Ziehflaeche, der Link ist nur diese Zeile. Ohne
     die Begrenzung waere die ganze Kartenbreite anklickbar. */
  align-self: flex-start;
  width: fit-content;
  text-decoration: none;
  padding: 0 22px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-accent-on-dark);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 300ms var(--v2-ease), transform 300ms var(--v2-ease);
}
@media (hover: hover) {
  .v2-bento-card:hover .v2-bento-body { transform: translateY(-6px); }
  /* focus-within, weil der Link jetzt in der Karte sitzt und nicht mehr
     die Karte selbst ist. Sonst springt die Tastatur auf eine
     unsichtbare Schaltflaeche. */
  .v2-bento-card:hover .v2-bento-cta,
  .v2-bento-card:focus-within .v2-bento-cta { opacity: 1; transform: translateY(0); }
}
@media (hover: none) {
  .v2-bento-cta { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * Referenzen — endlos nach oben laufende Karten-Wand
 * ------------------------------------------------------------------ */
.v2-quotes { background: var(--v2-bg); }
.v2-loop {
  position: relative;
  min-height: clamp(440px, 60vh, 560px);
  overflow: hidden;
  border-radius: var(--v2-radius-lg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.v2-loop-track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.v2-loop-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.v2-loop-col > * { margin: 0 0 12px; flex: none; }
/* Erst wenn v2.js die Kartensets dupliziert hat, laeuft die Schleife. */
@media (prefers-reduced-motion: no-preference) {
  .v2-loop-col[data-cloned] {
    animation: v2-loop-up var(--v2-loop-dur, 46s) linear infinite;
  }
  .v2-loop-col--alt[data-cloned] { --v2-loop-dur: 60s; }
  .v2-loop:hover .v2-loop-col { animation-play-state: paused; }
}
@keyframes v2-loop-up {
  to { transform: translateY(-50%); }
}
.v2-loop-card {
  border-radius: 16px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  box-shadow: 0 1px 2px rgba(20, 24, 31, 0.05);
}
.v2-loop-card--quote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}
.v2-loop-card--quote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--v2-ink);
}
.v2-loop-card--quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v2-loop-card--quote figcaption img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex: none;
}
.v2-loop-card--quote figcaption span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--v2-ink-soft);
}
.v2-loop-card--quote figcaption strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
}
/* Google-Rezension: Kopf zuerst (Initialen-Avatar, Name, G-Marke), darunter Sternezeile.
   Die G-Marke ist Quellen-Attribution, kein Deko-Icon. */
.v2-loop-card--quote .v2-rev-head > span:not(.v2-rev-avatar) { flex: 1 1 auto; min-width: 0; }
.v2-loop-card--quote .v2-rev-avatar {
  flex: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--v2-bg-subtle);
  border: 1px solid var(--v2-border);
  color: var(--v2-ink);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.v2-rev-g { flex: none; }
.v2-rev-stars {
  display: inline-flex;
  gap: 3px;
  margin-top: -6px;
  color: var(--v2-accent);
}
.v2-rev-stars svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.v2-loop-card--photo {
  overflow: hidden;
  padding: 0;
  border: none;
}
.v2-loop-card--photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.v2-loop-card--stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  background: var(--v2-dark);
  border-color: var(--v2-dark);
  color: var(--v2-on-dark);
}
.v2-loop-card--stat strong {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--v2-accent-on-dark);
}
.v2-loop-card--stat span {
  font-size: 0.875rem;
  color: var(--v2-on-dark-soft);
}
@media (max-width: 599px) {
  .v2-loop-col--alt { display: none; }
}

/* ------------------------------------------------------------------ *
 * Keine Amber-Glut in dunklen Flaechen
 *
 * Sechs Panels trugen einen radialen Amber-Verlauf in der oberen
 * rechten Ecke: Publikationskarte, Zahlen-Rahmen, CTA-Band,
 * Graphit-Hero, Lead-Band und die dunkle Modellkarte. Ein Lichtfleck
 * in der Ecke einer flachen Flaeche liest sich als seitlich
 * einfallendes Sonnenlicht, das es dort nicht geben kann — das
 * haeufigste Reflexmuster, um eine dunkle Flaeche „nicht so leer"
 * wirken zu lassen, und genau daran erkennbar. Wirkt eine dunkle
 * Flaeche leer, fehlt ihr Inhalt oder Struktur, nicht Licht.
 * Siehe design.md, Kapitel „Anti-KI-Muster".
 *
 * Die helle Produktkachel (`.v2-product-media`) behaelt ihre Glut —
 * sie ist kein dunkler Rahmen, sondern eine Lichtsetzung hinter einem
 * freigestellten Produkt.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * Publikacia — dunkle Karte mit gekipptem Cover
 * ------------------------------------------------------------------ */
.v2-brochure { background: var(--v2-bg); }
.v2-brochure-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  padding: clamp(32px, 5vw, 72px);
  overflow: hidden;
}
@media (min-width: 960px) {
  .v2-brochure-card { grid-template-columns: 1.15fr 1fr; align-items: center; }
}
.v2-brochure-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.v2-brochure-copy p { color: var(--v2-on-dark-soft); max-width: 52ch; }
.v2-brochure-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.8125rem;
  color: var(--v2-on-dark-soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding: 0;
}
.v2-brochure-meta li { list-style: none; display: flex; align-items: center; gap: 8px; }
.v2-brochure-meta li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--v2-accent-on-dark);
  border-radius: 50%;
}
.v2-brochure-copy .v2-btn { margin-top: 10px; }
.v2-brochure-media {
  position: relative;
  display: flex;
  justify-content: center;
}
.v2-brochure-media img {
  width: min(420px, 80%);
  height: auto;
  border-radius: 10px;
  transform: rotate(3deg);
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.4);
  transition: transform 500ms var(--v2-ease-out);
}
.v2-brochure-card:hover .v2-brochure-media img { transform: rotate(1deg) translateY(-6px); }

/* ------------------------------------------------------------------ *
 * Cyklus — vier Stationen an einer gezeichneten Linie
 * ------------------------------------------------------------------ */
.v2-cycle { background: var(--v2-bg); }
/* Stationsreihe, Linie, Knoten und Nummern sind mit dem Umbau auf die
   aufklappenden Bildtafeln entfallen (.v2-squeeze, weiter unten). */
.v2-cycle-foot {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.v2-cycle-foot p { font-size: 0.9375rem; color: var(--v2-ink-soft); max-width: 52ch; }

/* ------------------------------------------------------------------ *
 * Footer — steht fest am Boden, die Seite hebt sich beim Scrollen ab
 * ------------------------------------------------------------------ */
.v2-main {
  position: relative;
  z-index: 2;
  background: var(--v2-bg);
  border-radius: var(--v2-radius-xl);
  overflow: clip;
}
.v2-footer {
  background: var(--v2-dark);
  color: var(--v2-on-dark);
}
/* Der Reveal-Effekt braucht einen Footer, der kleiner als der Viewport ist —
   sonst bleibt sein oberer Teil für immer abgeschnitten. Deshalb nur dort,
   wo Platz ist; überall sonst ist er ein normaler Footer. */
@media (min-width: 900px) and (min-height: 760px) {
  .v2-footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
  }
}
.v2-footer-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vw, 56px);
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: 28px;
}
.v2-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.v2-footer-brand img {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
}
/* Spezifischer als body.v2 p { margin: 0 }, sonst klebt der Claim am Logo. */
.v2-footer .v2-footer-brand p {
  margin-top: 26px;
  font-size: 0.9375rem;
  color: var(--v2-on-dark-soft);
  max-width: 34ch;
}
.v2-footer-news { max-width: 420px; }
.v2-footer-news h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--v2-on-dark);
}
.v2-footer-news p {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--v2-on-dark-soft);
}
.v2-footer-news form {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.v2-footer-news input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: var(--v2-radius-xs);
  border: 1px solid rgba(244, 245, 247, 0.22);
  background: rgba(244, 245, 247, 0.06);
  color: #fff;
  font-family: var(--v2-font);
  font-size: 0.9375rem;
}
.v2-footer-news input[type="email"]::placeholder { color: rgba(244, 245, 247, 0.45); }
.v2-footer-news input[type="email"]:focus {
  outline: 2px solid var(--v2-accent-on-dark);
  outline-offset: 1px;
  border-color: transparent;
}
.v2-footer-news .newsletter-form__message { margin-top: 10px; font-size: 0.875rem; }
.v2-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding-top: 8px;
}
@media (min-width: 900px) {
  .v2-footer-cols { grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: start; column-gap: clamp(48px, 7vw, 120px); }
}
.v2-footer-col h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-on-dark-soft);
}
.v2-footer-col ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v2-footer-col a {
  font-size: 0.9375rem;
  color: var(--v2-on-dark);
  text-decoration: none;
  opacity: 0.88;
}
.v2-footer-col a:hover { opacity: 1; text-decoration: underline; }
.v2-footer-col li { font-size: 0.9375rem; color: var(--v2-on-dark-soft); }
.v2-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(244, 245, 247, 0.14);
  padding-top: 24px;
}
.v2-footer-bottom p { font-size: 0.8125rem; color: var(--v2-on-dark-soft); }
.v2-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-footer-legal a {
  font-size: 0.8125rem;
  color: var(--v2-on-dark-soft);
  text-decoration: none;
}
.v2-footer-legal a:hover { color: #fff; text-decoration: underline; }
.v2-footer-socials { display: flex; gap: 10px; }
.v2-footer-socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--v2-radius-xs);
  border: 1px solid rgba(244, 245, 247, 0.18);
  color: var(--v2-on-dark);
  transition: background-color 200ms var(--v2-ease), color 200ms var(--v2-ease);
}
.v2-footer-socials a:hover { background: #fff; color: var(--v2-ink-strong); }
.v2-footer-socials svg { width: 17px; height: 17px; fill: currentColor; }

/* ------------------------------------------------------------------ *
 * Reskin-Layer: Subpages mit Legacy-Markup (body.v2 v2-light-top)
 *
 * Die Alt-Komponenten sind token-getrieben; die Ueberschreibung der
 * --color-*-Variablen faerbt sie in einem Schritt auf das v2-System um.
 * Layout-Regeln aus style.min.css bleiben unangetastet.
 * ------------------------------------------------------------------ */
body.v2 {
  --font-primary: var(--v2-font);
  --color-primary: #29323e;
  --color-primary-dark: var(--v2-ink-strong);
  --color-primary-light: var(--v2-ink-soft);
  --color-accent: var(--v2-accent);
  --color-warning: var(--v2-accent);
  --color-success: #4c7a3d;
  --color-error: #c0432e;
  --color-bg: var(--v2-bg);
  --color-bg-secondary: var(--v2-bg-subtle);
  --color-surface: var(--v2-surface);
  --color-border: var(--v2-border);
  --color-text: var(--v2-ink);
  --color-text-muted: var(--v2-ink-soft);
  --color-brand-grey: #8b95a1;
  --radius-md: 6px;
  --radius-lg: 16px;
  --shadow-sm: var(--v2-shadow-sm);
  --shadow-md: var(--v2-shadow-md);
  --shadow-lg: var(--v2-shadow-lg);
}

/* Subpages: heller Seitengrund, Leiste startet dunkel-auf-hell,
   kein Footer-Reveal (der schmale Legacy-Container wuerde ihn zeigen). */
body.v2.v2-light-top { background-color: var(--v2-bg); }
body.v2.v2-light-top .v2-footer { position: static; }

/* Legacy-Buttons auf v2-Linie bringen */
body.v2 .btn {
  font-family: var(--v2-font);
  font-weight: 600;
  border-radius: var(--v2-radius-xs);
  transition: background-color 150ms var(--v2-ease), color 150ms var(--v2-ease), border-color 150ms var(--v2-ease);
}
body.v2 .btn--cta { background: var(--v2-accent); color: var(--v2-on-accent); }
body.v2 .btn--cta:hover { background: var(--v2-accent-strong); color: var(--v2-on-accent); }

/* Keine rotierenden Pastell-Tints mehr: alle Karten neutral + Amber */
body.v2 :is(.homepage__why-grid, .homepage__applications-grid, .aplikacie__grid) article:nth-child(n) {
  --card-accent: var(--v2-accent);
  --card-tint: var(--v2-bg-subtle);
}

/* Legacy-Seitenhero: grosse ruhige Typo, heller Grund */
body.v2 main [class*="__hero"] h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
body.v2 .breadcrumbs {
  color: var(--v2-ink-soft);
  font-size: 0.8125rem;
}
body.v2 .breadcrumbs a { color: var(--v2-ink-soft); }
body.v2 .breadcrumbs a:hover { color: var(--v2-ink-strong); }

/* Dunkle Bild-Heroes der Alt-Seiten: Ueberschriften bleiben weiss. */
body.v2 :is(.katalog__hero, .automaty-index__hero) :is(h1, h2, h3) {
  color: #fff;
}

/* ------------------------------------------------------------------ *
 * Feedback-Runde 1
 * ------------------------------------------------------------------ */

/* Financovanie: Diagramm links, Text rechts (Desktop). */
@media (min-width: 960px) {
  .v2-fin-body > .v2-fin-panels { order: 2; }
  .v2-fin-body > .v2-fin-charts { order: 1; }
}

/* Kalkulacka: Geister-Logo und Fakten-Zeile im Ergebnis-Panel. */
.v2-calc-result { overflow: hidden; }
.v2-calc-ghost {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 150px;
  opacity: 0.09;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.v2-calc-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(244, 245, 247, 0.14);
  width: 100%;
}
.v2-calc-facts div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-calc-facts strong {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.v2-calc-facts span {
  font-size: 0.75rem;
  color: var(--v2-on-dark-soft);
}

/* Statement-Karussell: ziehbar, aber ohne Greifhand — der Zeiger bleibt Zeiger. */
.v2-carousel-track { touch-action: pan-y; }
.v2-carousel-track.is-dragging { transition: none; }
.v2-carousel-slide img { -webkit-user-drag: none; user-select: none; }
.v2-carousel-slide a { -webkit-user-drag: none; }

/* Laeuft GSAP, uebernimmt es die Reveals — die CSS-Scroll-Animation
   der Sektionskoepfe wird dann abgeschaltet, sonst doppelt es. */
[data-v2-gsap] .v2-parallax-fade {
  animation-name: none !important;
}

/* ================================================================== *
 * Feedback-Runde 2 — Selecta-artiger Kopf, Rahmenbreite, Fusionen
 * ================================================================== */

/* Eine Rahmenbreite fuer alles: Video und Sektionen teilen die Kante. */
:root {
  --v2-frame-gutter: clamp(20px, 3vw, 44px);
  --v2-page-inset: max(var(--v2-frame-gutter), calc((100vw - var(--v2-grid-max)) / 2));
  --v2-navbar-h: 56px;
}

/* --- Kopf: EINE Zeile ueber dem Video — Logo, Menue, EN + CTA inline.
       Im Ladezustand komplett durchsichtig, weiss erst beim Scrollen
       oder bei offenem Megamenue. --- */
.v2-header {
  position: relative;
  display: block;
  height: 0;
  min-height: 0;
  background: transparent;
  z-index: auto;
}
.v2-numbers-col > .v2-btn { margin-top: 24px; }

/* Die Leiste schwebt an der Inhaltskante eingerueckt. Im Ladezustand
   ist sie REIN durchsichtig (kein Glas, kein Rand) — nur Logo, Links
   und der weisse CTA liegen auf dem Video. Der weisse Rahmen mit
   Radius erscheint erst beim Scrollen oder bei offenem Megamenue. */
.v2-navwrap {
  position: fixed;
  top: 12px;
  inset-inline: var(--v2-page-inset);
  z-index: 9;
  height: var(--v2-navbar-h);
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.v2-gnav {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: none;
  height: var(--v2-navbar-h);
  padding-inline: clamp(14px, 1.6vw, 26px);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0);
  box-shadow: none;
  pointer-events: auto;
  transition:
    background-color 0.4s var(--v2-ease),
    box-shadow 0.3s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav {
  box-shadow:
    0 24px 14px 0 rgba(20, 24, 31, 0.04),
    0 11px 11px 0 rgba(20, 24, 31, 0.07),
    0 3px 6px 0 rgba(20, 24, 31, 0.08);
}
[data-menu-open="true"] .v2-gnav { box-shadow: none; }

/* Die milchige Pille (Uprisera-Muster): traegt die Flaeche hinter der
   Leiste. Oben unsichtbar; gescrollt milchweiss mit Blur; bei offenem
   Megamenue waechst sie zum Blatt, das Leiste und Panel verbindet
   (v2.js misst die Hoehe in --v2-gnav-box-height). */
.v2-gnav .v2-gnav-pill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
  border-radius: 16px;
  background-color: rgb(255 255 255 / 0);
  pointer-events: none;
  transition:
    height 0.3s var(--v2-ease),
    border-radius 0.3s var(--v2-ease),
    background-color 0.48s var(--v2-ease),
    backdrop-filter 0.48s var(--v2-ease),
    -webkit-backdrop-filter 0.48s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav .v2-gnav-pill {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  border-radius: 16px;
  background-color: rgb(255 255 255 / 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-menu-open="true"] .v2-gnav .v2-gnav-pill {
  top: 0;
  left: 0;
  right: 0;
  height: var(--v2-gnav-box-height, 100%);
  border-radius: 16px;
  background-color: var(--v2-sheet);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition-duration: 0.3s, 0.3s, 0.18s, 0.18s, 0.18s;
}
.v2-gnav-list {
  align-items: center;
  gap: 2px;
  height: var(--v2-navbar-h);
  flex: none;
  min-width: 0;
  margin-inline: auto;
}
.v2-gnav-link {
  height: var(--v2-navbar-h);
  padding: 0 16px;
  color: #fff;
  text-shadow: 0 1px 12px rgba(10, 13, 18, 0.55);
  transition: color 0.4s var(--v2-ease), opacity 0.2s var(--v2-ease);
}
[data-scrolled="true"] .v2-gnav-link,
[data-menu-open="true"] .v2-gnav-link {
  color: var(--v2-ink-strong);
  text-shadow: none;
}
/* Menue mittig: die Aktionen rechts geben ihren Auto-Rand ab, solange
   die Liste sichtbar ist; darunter schiebt er sie wieder nach rechts. */
@media (min-width: 1200px) {
  .v2-gnav .v2-gnav-actions { margin-left: 0; }
}
.v2-gnav-actions .v2-gnav-burger { margin-left: 0; }

/* Megamenue: klappt als Blatt unter der Leiste auf, in Video-Breite. */
.v2-mega-backdrop {
  z-index: 8;
}
.v2-mega-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: auto;
  z-index: 9;
  pointer-events: none;
  border-radius: 18px;
  background: var(--v2-sheet);
  box-shadow: 0 40px 80px -24px rgba(10, 13, 18, 0.45);
  max-height: calc(100svh - var(--v2-navbar-h) - 32px);
  transform: translateY(-8px);
  transition: opacity 0.2s var(--v2-ease), transform 0.25s var(--v2-ease);
}
.v2-mega-panel.is-open { transform: translateY(0); }
.v2-mega-frame {
  padding: 20px;
}

/* --- Hero: Video randlos unter dem Topbar, Nav haengt in der Kante.
       Das Inhaltsblatt (Radius 32) faehrt ueber das dunkle Video —
       so gibt es keinen Radius-Konflikt zwischen Hero und Folgesektion. --- */
.v2-hero {
  margin-top: 0;
  height: 100svh;
  min-height: 660px;
}
/* Subpages: Inhalt unter die schwebende Leiste schieben (12 px Offset
   + Leistenhoehe + Luft). */
body.v2.v2-light-top { padding-top: calc(var(--v2-navbar-h) + 28px); }
.v2-hero-frame {
  inset: 0;
  border-radius: 0;
}
.v2-hero-sticky::after {
  inset: 0;
  border-radius: 0;
}
.v2-hero-content {
  padding-inline: var(--v2-page-inset);
  padding-top: clamp(150px, 22vh, 240px);
}
.v2-hero-rail {
  padding-inline: var(--v2-page-inset);
  padding-bottom: clamp(24px, 3.5vh, 44px);
}

/* --- Portfolio: zentriert und naeher an der Vorsektion --- */
.v2-section.v2-portfolio { padding-top: var(--v2-space-sm); }

/* ------------------------------------------------------------------ *
 * Fusion A: Kalkulacka + Financovanie in EINEM Graphit-Rahmen
 * ------------------------------------------------------------------ */
.v2-numbers { background: var(--v2-bg); }
.v2-numbers-frame {
  position: relative;
  border-radius: var(--v2-radius-xl);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  padding: clamp(28px, 4.5vw, 72px);
  overflow: hidden;
}
.v2-numbers-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}
@media (min-width: 960px) {
  .v2-numbers-head { grid-template-columns: 1.2fr 1fr; }
}
.v2-numbers-head h2 { margin-top: 14px; }
.v2-numbers-lead {
  color: var(--v2-on-dark-soft);
  max-width: 44ch;
}
@media (min-width: 960px) {
  .v2-numbers-lead { justify-self: end; text-align: right; }
}
.v2-numbers-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
  padding-block: clamp(28px, 3.5vw, 48px);
}
@media (min-width: 960px) {
  .v2-numbers-row--calc { grid-template-columns: 1.05fr 1fr; }
  .v2-numbers-row--fin { grid-template-columns: 1fr 1.05fr; }
}
.v2-numbers-divider {
  height: 1px;
  background: rgba(244, 245, 247, 0.12);
}
.v2-numbers-col > h3 { max-width: 20ch; }
.v2-numbers-col > h3 + * { margin-top: 24px; }

/* Slider-Feld auf Graphit */
.v2-numbers .v2-calc-field-head label { color: var(--v2-on-dark); }
.v2-numbers .v2-calc-field-head output { color: #fff; }
.v2-numbers .v2-calc-scale { color: rgba(244, 245, 247, 0.4); }
.v2-numbers .v2-calc-note { color: var(--v2-on-dark-soft); margin-top: 18px; }
.v2-numbers .v2-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--v2-accent) var(--v2-range-fill), rgba(244, 245, 247, 0.14) var(--v2-range-fill));
}
.v2-numbers .v2-range::-moz-range-track { background: rgba(244, 245, 247, 0.14); }
.v2-numbers .v2-range::-webkit-slider-thumb {
  background: #fff;
  border-color: var(--v2-dark);
}
.v2-numbers .v2-range::-moz-range-thumb {
  background: #fff;
  border-color: var(--v2-dark);
}
.v2-numbers-donut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.v2-numbers .v2-calc-facts {
  border-top-color: rgba(244, 245, 247, 0.12);
}

/* Financovanie auf Graphit */
.v2-numbers .v2-fin-switch { background: rgba(244, 245, 247, 0.08); }
.v2-numbers .v2-fin-switch button { color: var(--v2-on-dark-soft); }
.v2-numbers .v2-fin-switch button[aria-pressed="true"] {
  background: #fff;
  color: var(--v2-ink-strong);
  box-shadow: none;
}
.v2-numbers .v2-fin-panel { margin-top: 20px; }
.v2-numbers .v2-fin-panel > p { color: var(--v2-on-dark-soft); }
.v2-numbers .v2-fin-list li { color: var(--v2-on-dark); }
.v2-numbers .v2-fin-chart {
  background: rgba(244, 245, 247, 0.04);
  border-color: rgba(244, 245, 247, 0.12);
}
.v2-numbers .v2-fin-chart-head h4 { color: var(--v2-on-dark); }
.v2-numbers .v2-fin-chart-head span { color: rgba(244, 245, 247, 0.4); }
.v2-numbers .v2-fin-bar i {
  background: rgba(244, 245, 247, 0.08);
  border-color: rgba(244, 245, 247, 0.16);
}
.v2-numbers .v2-fin-bar.is-accent i {
  background: var(--v2-accent);
  border-color: var(--v2-accent);
}
.v2-numbers .v2-fin-bar span { color: var(--v2-on-dark-soft); }
.v2-numbers .v2-fin-chart-foot { color: var(--v2-on-dark-soft); }

/* ------------------------------------------------------------------ *
 * Fusion B: Referencie + Publikacia als Split-Kapitel
 * ------------------------------------------------------------------ */
.v2-proof { background: var(--v2-bg); }
.v2-proof-grid {
  display: grid;
  /* `minmax(0, 1fr)` statt `1fr`: unter 900px wird die Referenz-Wand
     zur Snap-Schiene, und deren min-content-Breite ist die Summe aller
     Karten. `1fr` ist `minmax(auto, 1fr)` — die Spalte wuchs damit auf
     1254px, die Schiene war so breit wie ihr Inhalt (also nicht
     scrollbar) und das Publikations-Panel schob sein Titelbild weit
     aus dem Bild nach rechts. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 1080px) {
  .v2-proof-grid { grid-template-columns: 1.35fr 1fr; }
}
/* In der Split-Ansicht bestimmt das Publikations-Panel die Zeilenhoehe,
   die Wand streckt sich mit (Spalten liegen absolut im Rahmen). */
.v2-proof-grid .v2-loop { min-height: clamp(480px, 62vh, 640px); }
.v2-proof-brochure {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: var(--v2-radius-lg);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  padding: clamp(28px, 3vw, 48px) clamp(28px, 3vw, 48px) 0;
  overflow: hidden;
}
/* Die radiale Amber-Glut in der oberen Ecke ist raus — dunkle Rahmen
   bleiben flach (siehe design.md, „Anti-KI-Muster"). Die Hero-Variante
   hatte sie schon abgeschaltet; jetzt gibt es sie gar nicht mehr. */
.v2-proof-brochure p { color: var(--v2-on-dark-soft); max-width: 44ch; }
.v2-proof-brochure .v2-brochure-meta { margin-top: 4px; }
.v2-proof-brochure .v2-btn { align-self: flex-start; margin-top: 8px; }
.v2-proof-cover {
  margin-top: auto;
  align-self: flex-end;
  width: min(360px, 82%);
  padding-top: 24px;
}
.v2-proof-cover img {
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  transform: rotate(3deg) translateY(14px);
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.4);
  transition: transform 500ms var(--v2-ease-out);
}
.v2-proof-brochure:hover .v2-proof-cover img {
  transform: rotate(1.5deg) translateY(6px);
}

/* ------------------------------------------------------------------ *
 * Runde 3: Hero-Titel wechseln synchron zu den Rail-Kacheln
 * ------------------------------------------------------------------ */
.v2-hero-titles {
  display: grid;
  max-width: 640px;
}
.v2-hero-content .v2-hero-title {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 22ch;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 3.3rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--v2-ease), transform 0.5s var(--v2-ease);
  pointer-events: none;
}
.v2-hero-content .v2-hero-title.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero-content .v2-hero-title { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Megamenue: Produktfotos neben den Maschinennamen
 * ------------------------------------------------------------------ */
.v2-mega-tabpanel ul.v2-mega-machines {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px 14px;
  margin-top: 18px;
}
.v2-mega-tabpanel .v2-mega-machines a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
  transition: background-color 0.15s var(--v2-ease);
}
.v2-mega-tabpanel .v2-mega-machines a:hover {
  background: var(--v2-bg-subtle);
  text-decoration: none;
}
.v2-mega-thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 12px;
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
.v2-mega-thumb img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  /* Produktfotos haben weissen Fond — multiply blendet ihn in die Kachel. */
  mix-blend-mode: multiply;
}

/* ================================================================== *
 * Subpage-Komponenten — heller Seitenkopf, Karten, Tabellen, Formulare
 * Referenz: design.md, Kapitel "Subpage-Muster".
 * ================================================================== */

/* Breadcrumbs */
.v2-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 18px 0;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}
.v2-crumbs a {
  color: var(--v2-ink-soft);
  text-decoration: none;
}
.v2-crumbs a:hover { color: var(--v2-ink-strong); }
.v2-crumbs li { display: flex; align-items: center; gap: 8px; }
.v2-crumbs li + li::before {
  content: "/";
  color: var(--v2-ink-faint, #aab2bd);
}
.v2-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-crumbs [aria-current] { color: var(--v2-ink-strong); font-weight: 500; }

/* Heller Seiten-Hero */
.v2-page-hero {
  padding-top: 18px;
}
.v2-page-hero .v2-eyebrow { margin-top: clamp(28px, 5vh, 56px); }
.v2-page-hero h1 {
  margin-top: 14px;
  max-width: 24ch;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--v2-ink-strong);
}
.v2-page-hero .v2-page-lead {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--v2-ink-soft);
}
.v2-page-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.v2-page-highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--v2-ink);
}
.v2-page-highlights li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}
.v2-page-hero .v2-btn { margin-top: 26px; }

/* Faktenband auf hellem Grund */
.v2-facts-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(36px, 6vh, 64px);
  border-block: 1px solid var(--v2-border);
}
@media (min-width: 700px) {
  .v2-facts-band { grid-template-columns: repeat(var(--v2-facts-cols, 4), 1fr); }
}
.v2-facts-band > div {
  padding: 22px 24px 22px 0;
}
@media (min-width: 700px) {
  .v2-facts-band > div + div {
    border-left: 1px solid var(--v2-border);
    padding-left: 24px;
  }
}
@media (max-width: 699px) {
  .v2-facts-band > div + div { border-top: 1px solid var(--v2-border); }
}
.v2-facts-band strong {
  display: block;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-strong);
}
.v2-facts-band span {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--v2-ink-soft);
}

/* Kategorie-Karten (Automaty-Uebersicht) */
.v2-cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .v2-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .v2-cat-grid { grid-template-columns: repeat(3, 1fr); } }
.v2-cat-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 22px;
  border-radius: var(--v2-radius-md, 16px);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  text-decoration: none;
  color: var(--v2-ink);
  transition: border-color 0.2s var(--v2-ease), box-shadow 0.2s var(--v2-ease);
}
.v2-cat-card:hover {
  border-color: var(--v2-ink-soft);
  box-shadow: 0 8px 24px -12px rgba(20, 24, 31, 0.18);
}
.v2-cat-photos {
  position: relative;
  height: 220px;
  border-radius: 12px;
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
.v2-cat-photos img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.6s var(--v2-ease);
}
.v2-cat-photos img.is-active { opacity: 1; }
.v2-cat-card h2, .v2-cat-card h3 {
  font-size: 1.1875rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-cat-card p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}
.v2-cat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
}
.v2-cat-foot .v2-count {
  font-weight: 500;
  color: var(--v2-ink-soft);
}
.v2-cat-foot svg { transition: transform 0.2s var(--v2-ease); }
.v2-cat-card:hover .v2-cat-foot svg { transform: translateX(3px); }

/* Maschinen-Karten (Kategorieseiten) */
.v2-machine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 680px) { .v2-machine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .v2-machine-grid { grid-template-columns: repeat(var(--v2-machine-cols, 4), 1fr); } }
.v2-machine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 20px;
  border-radius: var(--v2-radius-md, 16px);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  text-decoration: none;
  color: var(--v2-ink);
  transition: border-color 0.2s var(--v2-ease), box-shadow 0.2s var(--v2-ease);
}
.v2-machine-card:hover {
  border-color: var(--v2-ink-soft);
  box-shadow: 0 8px 24px -12px rgba(20, 24, 31, 0.18);
}
.v2-machine-photo {
  position: relative;
  height: 240px;
  border-radius: 12px;
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
.v2-machine-photo img {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  object-fit: contain;
  mix-blend-mode: multiply;
}
.v2-machine-card h2, .v2-machine-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-machine-card > p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}
.v2-machine-tag {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--v2-border);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--v2-ink);
}
.v2-machine-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}

/* Entscheidungshilfe (Ktory automat?) */
.v2-choose {
  display: grid;
  gap: 0;
  border-block: 1px solid var(--v2-border);
}
.v2-choose a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  text-decoration: none;
  color: var(--v2-ink);
  transition: background-color 0.15s var(--v2-ease);
}
.v2-choose a + a { border-top: 1px solid var(--v2-border); }
.v2-choose a:hover { background: var(--v2-bg-subtle); }
.v2-choose strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-choose span {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--v2-ink-soft);
}
.v2-choose svg { color: var(--v2-ink-strong); transition: transform 0.2s var(--v2-ease); }
.v2-choose a:hover svg { transform: translateX(3px); }

/* CTA-Band (dunkles Abschluss-Panel) */
.v2-cta-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  overflow: hidden;
}
.v2-cta-band h2, .v2-cta-band h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
  color: var(--v2-on-dark);
}
.v2-cta-band p {
  margin-top: 8px;
  max-width: 52ch;
  color: var(--v2-on-dark-soft);
}
.v2-cta-band .v2-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
}

/* Produktseiten-Hero: Foto-Kachel + Inhalt */
.v2-product-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-top: 18px;
}
@media (min-width: 900px) {
  .v2-product-hero { grid-template-columns: 0.9fr 1.1fr; }
}
.v2-product-media {
  position: relative;
  min-height: clamp(320px, 44vw, 520px);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
.v2-product-media img {
  position: absolute;
  inset: clamp(24px, 4vw, 48px);
  width: calc(100% - 2 * clamp(24px, 4vw, 48px));
  height: calc(100% - 2 * clamp(24px, 4vw, 48px));
  object-fit: contain;
  mix-blend-mode: multiply;
}
.v2-product-content h1 {
  max-width: 20ch;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--v2-ink-strong);
}
.v2-product-content .v2-page-lead {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--v2-ink-soft);
}
.v2-product-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.v2-cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  background: var(--v2-surface);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-ink);
  cursor: pointer;
  transition: border-color 0.2s var(--v2-ease), background-color 0.2s var(--v2-ease);
}
.v2-cert-chip:hover { border-color: var(--v2-ink-soft); background: var(--v2-bg-subtle); }
.v2-cert-chip img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

/* Produktbeschreibung + Vorteile */
.v2-product-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
}
@media (min-width: 960px) {
  .v2-product-body { grid-template-columns: 1.1fr 0.9fr; }
}
.v2-product-body > div > p {
  max-width: 58ch;
  color: var(--v2-ink);
}
.v2-adv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.v2-adv-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  background: var(--v2-surface);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}
.v2-adv-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}

/* Spezifikationstabelle */
.v2-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.v2-spec-table caption {
  text-align: left;
  padding-bottom: 14px;
}
.v2-spec-table th,
.v2-spec-table td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--v2-border);
  text-align: left;
  vertical-align: top;
}
.v2-spec-table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-ink-soft);
}
.v2-spec-table tbody td:first-child {
  color: var(--v2-ink-soft);
  width: 44%;
}
.v2-spec-table tbody td:last-child {
  color: var(--v2-ink-strong);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.v2-spec-table .v2-spec-pending td:last-child {
  color: var(--v2-ink-soft);
  font-weight: 400;
  font-style: italic;
}

/* Formulare (Quote/Lead) */
.v2-form {
  display: grid;
  gap: 16px;
  max-width: 560px;
}
.v2-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
}
.v2-form input[type="text"],
.v2-form input[type="email"],
.v2-form input[type="tel"],
.v2-form textarea,
.v2-form select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--v2-border);
  border-radius: 10px;
  background: var(--v2-surface);
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  color: var(--v2-ink);
  transition: border-color 0.15s var(--v2-ease), box-shadow 0.15s var(--v2-ease);
}
.v2-form input:focus-visible,
.v2-form textarea:focus-visible,
.v2-form select:focus-visible {
  outline: none;
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px rgba(230, 138, 30, 0.22);
}
.v2-form .v2-btn { justify-self: start; }
/* Schrittanzeige im Mehrschritt-Formular. Steht in der `legend`, damit
   sie mit dem Feldsatz erscheint und verschwindet — das Ein- und
   Ausblenden macht die Alt-Schicht (`initMultiStepForm`) ueber
   `style.display` am Feldsatz. */
.v2-form-stepno {
  display: block;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
}
.v2-form-panel {
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
}
.v2-form-panel h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-form-panel > p { margin-top: 8px; max-width: 52ch; color: var(--v2-ink-soft); }
.v2-form-panel form { margin-top: 24px; }
/* Produktseiten: Formular links, Produktfoto in der sonst leeren rechten Haelfte */
.v2-form-panel--product .v2-form-panel-body > p { margin-top: 8px; max-width: 52ch; color: var(--v2-ink-soft); }
.v2-form-panel-media { display: none; }
@media (min-width: 900px) {
  .v2-form-panel--product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
  }
  .v2-form-panel-media {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .v2-form-panel-media img {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
  }
}

/* Verwandte Maschinen */
.v2-related {
  border-top: 1px solid var(--v2-border);
  padding-top: clamp(28px, 4vh, 44px);
}
.v2-related h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
  margin-bottom: 20px;
}

/* Kleiner Abstands-Helfer fuer Subpage-Sektionen */
.v2-sub-section { margin-top: clamp(48px, 8vh, 96px); }
.v2-sub-section--tight { margin-top: clamp(32px, 5vh, 56px); }
.v2-page-end { padding-bottom: clamp(56px, 8vh, 96px); }

/* Subpage: Text/Media-Split, Feature-Raster, Software-Karten */
.v2-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 960px) {
  .v2-split { grid-template-columns: 1.05fr 0.95fr; }
  .v2-split--media-left { grid-template-columns: 0.95fr 1.05fr; }
  .v2-split--media-left > .v2-media-tile { order: -1; }
}
.v2-split h2 { max-width: 24ch; }
.v2-split > div > p { margin-top: 18px; max-width: 58ch; color: var(--v2-ink); }
.v2-media-tile {
  border-radius: var(--v2-radius-lg);
  overflow: hidden;
  background: var(--v2-bg-subtle);
}
.v2-media-tile img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}
.v2-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 32px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
@media (min-width: 640px) { .v2-feature-grid { grid-template-columns: repeat(2, 1fr); } }
.v2-feature-grid li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}
.v2-feature-grid li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}
.v2-soft-cards {
  display: grid;
  gap: 14px;
}
.v2-soft-cards figure {
  margin: 0;
  border-radius: var(--v2-radius-md, 16px);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  overflow: hidden;
}
.v2-soft-cards img { display: block; width: 100%; height: auto; }
.v2-soft-cards figcaption {
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
}
/* Vergleichstabelle mit drei Spalten */
.v2-spec-table--compare tbody td:first-child { width: 30%; }
.v2-spec-table--compare tbody td:last-child { font-variant-numeric: normal; }
.v2-spec-table--compare tbody td:nth-child(n+2) {
  color: var(--v2-ink);
  font-weight: 400;
  padding-right: 24px;
}

/* Nummerierte Schritt-Liste */
.v2-step-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: v2step;
}
.v2-step-list li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
  counter-increment: v2step;
}
.v2-step-list li::before {
  content: counter(v2step, decimal-leading-zero);
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v2-accent);
  font-variant-numeric: tabular-nums;
}
.v2-step-list strong { color: var(--v2-ink-strong); }

/* Anwendungs-Karten (Aplikacie) */
.v2-app-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 680px) { .v2-app-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .v2-app-grid { grid-template-columns: repeat(4, 1fr); } }
.v2-app-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 20px 12px;
  border-radius: var(--v2-radius-md, 16px);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
}
.v2-app-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}
.v2-app-card h2, .v2-app-card h3 {
  padding-inline: 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-app-card p {
  padding-inline: 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}

/* Zitat-Karten (Platzhalter-Referenzen) */
.v2-quote-card {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--v2-border);
  border-radius: 16px;
  background: var(--v2-surface);
}
.v2-quote-card p {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--v2-ink);
}
.v2-quote-card footer {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}

/* FAQ */
.v2-faq { display: grid; gap: 10px; }
.v2-faq details {
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  background: var(--v2-surface);
  overflow: hidden;
}
.v2-faq summary {
  padding: 16px 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after {
  content: "+";
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--v2-ink-soft);
  transition: transform 0.2s var(--v2-ease);
}
.v2-faq details[open] summary::after { transform: rotate(45deg); }
.v2-faq details > p {
  padding: 0 18px 16px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--v2-ink);
}
.v2-faq a { color: var(--v2-ink-strong); }

/* Kontakt-Raster */
.v2-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
@media (min-width: 960px) { .v2-contact-grid { grid-template-columns: 1.05fr 0.95fr; } }
.v2-contact-card {
  padding: clamp(20px, 2.5vw, 32px);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  background: var(--v2-surface);
  display: grid;
  gap: 14px;
}
.v2-contact-card h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-contact-card a { color: var(--v2-ink-strong); text-decoration: none; }
.v2-contact-card a:hover { text-decoration: underline; }
.v2-contact-map {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}
.v2-contact-map iframe { width: 100%; height: 100%; border: 0; }
.v2-contact-person {
  border-top: 1px solid var(--v2-border);
  padding-top: 14px;
  display: grid;
  gap: 4px;
  font-size: 0.9375rem;
}
.v2-contact-person h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-ink-soft);
}
.v2-contact-person img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  margin-block: 6px;
}
.v2-copy-address {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  color: var(--v2-ink);
  text-align: left;
  cursor: copy;
}
.v2-copy-address:hover { color: var(--v2-ink-strong); }

/* Katalog-Hubkopf */
.v2-hub-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.v2-hub-head h2 {
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-machine-cert {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--v2-border);
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}
.v2-machine-cert img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}

/* ================================================================== *
 * Subpage-Kinohero: dunkler, filmischer Kopf unter der transparenten
 * Leiste — das Inhaltsblatt faehrt wie auf der Landing darueber.
 * ================================================================== */
.v2-subhero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 74svh, 780px);
  background: var(--v2-dark);
  color: #fff;
  overflow: hidden;
}
.v2-subhero-media {
  position: absolute;
  inset: 0;
  background-image: var(--v2-subhero-img);
  background-size: cover;
  background-position: center;
}
.v2-subhero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(108deg, rgba(8, 10, 14, 0.72) 0%, rgba(8, 10, 14, 0.28) 60%, rgba(8, 10, 14, 0.12) 100%),
    linear-gradient(0deg, rgba(8, 10, 14, 0.66) 0%, rgba(8, 10, 14, 0) 46%);
}
/* Variante ohne Foto: Graphit mit Amber-Glut und feiner Vignette. */
.v2-subhero--plain { background: var(--v2-dark-2, #1a2028); }
.v2-subhero--plain::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 10, 14, 0.5) 0%, rgba(8, 10, 14, 0) 40%);
}
.v2-subhero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--v2-navbar-h) + 64px);
  padding-bottom: clamp(36px, 6vh, 72px);
}
.v2-subhero .v2-crumbs { color: rgba(255, 255, 255, 0.62); padding-block: 0 6px; }
.v2-subhero .v2-crumbs a { color: rgba(255, 255, 255, 0.62); }
.v2-subhero .v2-crumbs a:hover { color: #fff; }
.v2-subhero .v2-crumbs li + li::before { color: rgba(255, 255, 255, 0.35); }
.v2-subhero .v2-crumbs [aria-current] { color: rgba(255, 255, 255, 0.92); }
.v2-subhero .v2-eyebrow { margin-top: 26px; color: var(--v2-accent-on-dark); }
.v2-subhero h1 {
  margin-top: 14px;
  max-width: 22ch;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
}
.v2-subhero .v2-page-lead {
  margin-top: 18px;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.85);
}
.v2-subhero .v2-page-highlights li { color: rgba(255, 255, 255, 0.92); }
.v2-subhero .v2-btn { margin-top: 26px; }

/* Glas-Faktenkacheln am Hero-Boden (Echo der Landing-Rail) */
.v2-subrail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: clamp(28px, 5vh, 52px);
}
@media (min-width: 720px) { .v2-subrail { grid-template-columns: repeat(var(--v2-subrail-cols, 3), 1fr); } }
.v2-subrail > div {
  padding: 18px 20px 20px;
  border-radius: 14px;
  background: rgba(10, 13, 18, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v2-subrail strong {
  display: block;
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.v2-subrail span {
  display: block;
  margin-top: 6px;
  font-size: 0.8438rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* Blatt-Anschluss: erste Sektion im Blatt braucht Luft nach oben. */
.v2-main .v2-inset > .v2-sub-section:first-child,
.v2-main .v2-inset > section:first-child { margin-top: 0; padding-top: clamp(56px, 9vh, 112px); }
.v2-main .v2-inset > :last-child { margin-bottom: 0; }

/* Produktseiten: warme Glut hinter dem Produktfoto */
.v2-product-media::before {
  content: "";
  position: absolute;
  inset: 12% 8%;
  background: radial-gradient(closest-side, rgba(230, 138, 30, 0.16), transparent 72%);
  pointer-events: none;
}

/* Sticky-Verhalten des Kinoheros: muss die relative Basis schlagen. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .v2-subhero.v2-hero-sticky {
      position: sticky;
      top: 0;
    }
  }
}

/* Heller Split-Hero (Kategorieseiten): Text links, Bild-Kachel rechts. */
.v2-page-hero--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
}
@media (min-width: 960px) {
  .v2-page-hero--split { grid-template-columns: 1.05fr 0.95fr; }
}
.v2-page-hero-media {
  min-height: clamp(300px, 38vw, 480px);
  margin-top: clamp(28px, 5vh, 56px);
}
/* Produktvariante der Bildkachel: die Kategorieseiten zeigen im Hero
   ihre eigenen Maschinen als freigestellte Renders. `cover` wuerde sie
   anschneiden — hier steht das ganze Geraet in der Flaeche, zentriert,
   mit Luft zum Rand. */
.v2-media-tile--product {
  display: grid;
  place-items: center;
  padding: clamp(20px, 2.6vw, 40px);
  background: var(--v2-bg-subtle);
}
.v2-media-tile--product img {
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
}
.v2-page-hero-media img { min-height: inherit; }

/* Automaty-Uebersicht: Filter-Chips, Kategorie-Chip, USP-Karten */
.v2-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.v2-filter-chip {
  padding: 9px 16px;
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  background: var(--v2-surface);
  font-family: var(--v2-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink);
  cursor: pointer;
  transition: background-color 0.15s var(--v2-ease), border-color 0.15s var(--v2-ease), color 0.15s var(--v2-ease);
}
.v2-filter-chip:hover { border-color: var(--v2-ink-soft); }
.v2-filter-chip[aria-pressed="true"] {
  background: var(--v2-ink-strong);
  border-color: var(--v2-ink-strong);
  color: #fff;
}
.v2-filter-count {
  margin-top: 18px;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}
.v2-chip {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--v2-bg-subtle);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--v2-ink-soft);
}
.v2-machine-card .v2-chip { margin-top: auto; }
.v2-machine-card[hidden] { display: none; }

.v2-usp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 680px) { .v2-usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .v2-usp-grid { grid-template-columns: repeat(4, 1fr); } }
.v2-usp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--v2-radius-md, 16px);
  background: var(--v2-bg-subtle);
}
.v2-usp-card::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v2-accent);
}
.v2-usp-card h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-usp-card p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}

/* ================================================================== *
 * Automaty-Uebersicht, Runde 2: Ordner-Tabs, USP-Editorial,
 * Kategorie-Akkordeon, FAQ-Split, Lead-Band
 * ================================================================== */

/* Ordner-Tabs: aktiver Tab fliesst in das Panel darunter. */
.v2-folder-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-inline: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}
.v2-folder-tabs::-webkit-scrollbar { display: none; }
.v2-folder-tab {
  position: relative;
  flex: none;
  padding: 14px 20px 15px;
  border: none;
  border-radius: 14px 14px 0 0;
  background: transparent;
  font-family: var(--v2-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: color 0.15s var(--v2-ease);
}
.v2-folder-tab:hover { color: var(--v2-ink-strong); }
.v2-folder-tab[aria-pressed="true"] {
  background: var(--v2-bg-subtle);
  color: var(--v2-ink-strong);
}
.v2-folder-tab[aria-pressed="true"]::before,
.v2-folder-tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.v2-folder-tab[aria-pressed="true"]::before {
  left: -14px;
  background: radial-gradient(circle at 0 0, transparent 13.5px, var(--v2-bg-subtle) 14px);
}
.v2-folder-tab[aria-pressed="true"]::after {
  right: -14px;
  background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--v2-bg-subtle) 14px);
}
.v2-folder-panel {
  border-radius: 24px;
  background: var(--v2-bg-subtle);
  padding: clamp(18px, 2.6vw, 36px);
}
.v2-folder-panel .v2-filter-count { margin-top: 0; margin-bottom: 14px; }
.v2-folder-panel .v2-machine-card { border-color: transparent; }
.v2-folder-panel .v2-machine-photo { background: var(--v2-bg); }

/* USP-Editorial: Kopf links haftet, Zeilen mit Linien statt Karten. */
.v2-usp-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (min-width: 960px) {
  .v2-usp-editorial { grid-template-columns: 0.85fr 1.15fr; }
  .v2-usp-intro { position: sticky; top: calc(var(--v2-navbar-h) + 40px); }
}
.v2-usp-intro h2 { max-width: 16ch; }
.v2-usp-intro p {
  margin-top: 16px;
  max-width: 44ch;
  color: var(--v2-ink-soft);
}
.v2-usp-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-usp-rows li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--v2-border);
}
.v2-usp-rows li:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-usp-num {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v2-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.v2-usp-rows h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-usp-rows p {
  margin-top: 8px;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--v2-ink-soft);
}

/* Kategorie-Akkordeon (Rychla orientacia) */
.v2-acc { display: grid; gap: 10px; }
.v2-acc details {
  border: 1px solid var(--v2-border);
  border-radius: 16px;
  background: var(--v2-surface);
  overflow: hidden;
  transition: border-color 0.2s var(--v2-ease);
}
.v2-acc details[open] { border-color: var(--v2-ink-soft); }
.v2-acc summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}
.v2-acc summary::-webkit-details-marker { display: none; }
.v2-acc summary strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-acc summary > span > span {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--v2-ink-soft);
}
.v2-acc summary svg {
  color: var(--v2-ink-strong);
  transition: transform 0.25s var(--v2-ease);
}
.v2-acc details[open] summary svg { transform: rotate(180deg); }
/* Sanftes Auf-/Zuklappen der Akkordeons (Chrome 131+; aeltere Browser oeffnen wie bisher sofort) */
.v2-acc { interpolate-size: allow-keywords; }
.v2-acc details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.38s var(--v2-ease), content-visibility 0.38s allow-discrete;
}
.v2-acc details[open]::details-content { block-size: auto; }
.v2-acc-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 0 22px 22px;
}
@media (min-width: 720px) {
  .v2-acc-body { grid-template-columns: 260px 1fr; align-items: center; }
}
.v2-acc-media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--v2-bg-subtle);
}
.v2-acc-media img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}
.v2-acc-cat {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-accent);
}
.v2-acc-body p + p {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--v2-ink);
}
.v2-acc-body .v2-btn { margin-top: 16px; }

/* FAQ-Split: Kopf links, gestapelte Antwortkarten rechts. */
.v2-faq-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (min-width: 960px) {
  .v2-faq-split { grid-template-columns: 0.8fr 1.2fr; }
  .v2-faq-split > .v2-faq-head { position: sticky; top: calc(var(--v2-navbar-h) + 40px); }
}
.v2-faq-head p {
  margin-top: 16px;
  max-width: 40ch;
  color: var(--v2-ink-soft);
}
.v2-faq-head .v2-arrow-link { margin-top: 18px; }
.v2-faq-cards { display: grid; gap: 14px; }
/* Drei Info-Karten nebeneinander (Sluzby-Ekosystem), Kartenmix wie im FAQ */
.v2-card-trio { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .v2-card-trio { grid-template-columns: repeat(3, 1fr); } }
/* Pfeillink im dunklen Formular (Kalkulator-Abschlussband) muss hell sein */
.v2-form--dark .v2-arrow-link { color: var(--v2-on-dark); }

/* Sanfte Seitenwechsel (Cross-Document View Transitions, Chrome/Edge 126+).
   Alte Seite blendet kurz aus, die neue landet weich mit minimalem Anheben.
   Andere Browser navigieren unveraendert. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: v2-page-out 0.22s ease-out both; }
::view-transition-new(root) { animation: v2-page-in 0.34s var(--v2-ease, ease-out) both; }
@keyframes v2-page-out { to { opacity: 0; } }
@keyframes v2-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.v2-faq-card {
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--v2-radius-md, 16px);
}
.v2-faq-card h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-faq-card p {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--v2-ink);
}
.v2-faq-card p + p { margin-top: 8px; }
.v2-faq-card--subtle { background: var(--v2-bg-subtle); }
.v2-faq-card--line { background: var(--v2-surface); border: 1px solid var(--v2-border); }
.v2-faq-card--dark { background: var(--v2-dark); }
.v2-faq-card--dark h3 { color: var(--v2-on-dark); }
.v2-faq-card--dark p { color: var(--v2-on-dark-soft); }

/* Lead-Band: dunkles Split-Formular als Abschluss. */
.v2-lead-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--v2-radius-xl);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  overflow: hidden;
}
@media (min-width: 960px) {
  .v2-lead-band { grid-template-columns: 1fr 1fr; align-items: center; }
}
.v2-lead-copy { position: relative; }
.v2-lead-copy h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 14ch;
  text-wrap: balance;
  color: var(--v2-on-dark);
  margin-top: 14px;
}
.v2-lead-copy > p {
  margin-top: 16px;
  max-width: 44ch;
  color: var(--v2-on-dark-soft);
}
.v2-lead-facts {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* Produktbild im CTA: die freigestellten Maschinen stehen direkt auf
   dem Graphit, ohne Kasten und ohne Rand. Sie sagen in einem Blick,
   worueber das Formular daneben spricht — und ersetzen damit die
   Lichtspielerei, die vorher in der Ecke sass. */
.v2-lead-media {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-top: clamp(24px, 3vw, 36px);
}
.v2-lead-facts li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--v2-on-dark);
}
.v2-lead-facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--v2-accent-on-dark);
  flex: none;
}
.v2-form--dark { position: relative; max-width: none; }
.v2-form--dark label { color: var(--v2-on-dark); }
.v2-form--dark input[type="text"],
.v2-form--dark input[type="email"],
.v2-form--dark input[type="tel"],
.v2-form--dark textarea {
  background: rgba(244, 245, 247, 0.06);
  border-color: rgba(244, 245, 247, 0.18);
  color: var(--v2-on-dark);
}
.v2-form--dark input::placeholder,
.v2-form--dark textarea::placeholder { color: rgba(244, 245, 247, 0.4); }
.v2-form--dark input[type="text"]:focus-visible,
.v2-form--dark input[type="email"]:focus-visible,
.v2-form--dark input[type="tel"]:focus-visible,
.v2-form--dark textarea:focus-visible {
  border-color: var(--v2-accent-on-dark);
  box-shadow: 0 0 0 3px rgba(239, 162, 63, 0.25);
}
.v2-lead-micro {
  font-size: 0.8125rem;
  color: var(--v2-on-dark-soft);
}

/* Sprievodca vyberom: EIN Kapitel — asymmetrischer Kopf + Akkordeon. */
.v2-guide-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 64px;
  align-items: end;
  margin-bottom: 28px;
}
@media (min-width: 960px) {
  .v2-guide-head { grid-template-columns: 1.05fr 0.95fr; }
}
.v2-guide-head h2 { max-width: 18ch; margin-top: 14px; }
.v2-guide-side p {
  color: var(--v2-ink-soft);
  max-width: 52ch;
}
.v2-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 18px;
}
.v2-acc summary { grid-template-columns: auto 1fr auto; }
.v2-acc-num {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v2-accent);
  font-variant-numeric: tabular-nums;
}

/* Split-Hero-Variante: Bild links (Wechselseitigkeit der Kategorieseiten) */
@media (min-width: 960px) {
  .v2-page-hero--media-left { grid-template-columns: 0.95fr 1.05fr; }
  .v2-page-hero--media-left > .v2-page-hero-media { order: -1; }
}

/* ================================================================== *
 * Riesenia: Sluzby (Prozess-Kinohero, Software-Duo) und
 * Financovanie (Entscheidungs-Hero, Ablauf-Flow)
 * ================================================================== */

/* Schritt-Glasrail im Kinohero (Sluzby): 5 nummerierte Stationen */
.v2-subrail--steps { --v2-subrail-cols: 5; }
.v2-subrail--steps .v2-usp-num {
  display: block;
  padding-top: 0;
  margin-bottom: 8px;
  color: var(--v2-accent-on-dark);
}
.v2-subrail--steps strong { font-size: 1.0625rem; letter-spacing: -0.01em; }

/* Software-Duo: zwei Produktkarten + gemeinsamer Feature-Sockel */
.v2-soft-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 860px) { .v2-soft-duo { grid-template-columns: 1fr 1fr; } }
.v2-soft-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--v2-radius-md, 16px);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  overflow: hidden;
  transition: border-color 0.2s var(--v2-ease), box-shadow 0.2s var(--v2-ease);
}
.v2-soft-card:hover {
  border-color: var(--v2-ink-soft);
  box-shadow: 0 8px 24px -12px rgba(20, 24, 31, 0.18);
}
.v2-soft-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  background: var(--v2-bg-subtle);
}
.v2-soft-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 24px;
  border-top: 1px solid var(--v2-border);
}
.v2-soft-card-body .v2-eyebrow { font-size: 0.75rem; }
.v2-soft-card-body h3 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-soft-card-body p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}

/* Entscheidungs-Hero (Financovanie): zwei Modell-Karten rechts */
.v2-model-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: clamp(28px, 5vh, 56px);
}
@media (min-width: 860px) { .v2-model-cards { grid-template-columns: 1fr 1fr; } }
.v2-model-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--v2-radius-lg);
}
.v2-model-card--light {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
}
.v2-model-card--dark {
  position: relative;
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  overflow: hidden;
}
.v2-model-card .v2-eyebrow { font-size: 0.75rem; }
.v2-model-card--dark .v2-eyebrow { color: var(--v2-accent-on-dark); }
.v2-model-card h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-model-card--dark h2 { color: var(--v2-on-dark); }
.v2-model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.v2-model-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}
.v2-model-card--dark .v2-model-list li { color: var(--v2-on-dark); }
.v2-model-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}
.v2-model-card--dark .v2-model-list li::before { background: var(--v2-accent-on-dark); }
.v2-model-card .v2-btn {
  align-self: flex-start;
  margin-top: auto;
  position: relative;
}

/* Ablauf-Flow: vier Stationen an einer Amber-Linie */
.v2-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 28px;
}
@media (min-width: 860px) { .v2-flow { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.v2-flow > div {
  position: relative;
  padding-top: 22px;
}
.v2-flow > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--v2-border);
}
.v2-flow > div::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--v2-accent);
}
.v2-flow .v2-usp-num { display: block; padding-top: 0; margin-bottom: 8px; }
.v2-flow h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-flow p {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}

/* Sluzby-Hero: heller Split mit Schritte-Panel statt Bild */
.v2-hero-steps-panel {
  display: grid;
  gap: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--v2-radius-lg);
  border: 1px solid var(--v2-border);
  background: var(--v2-surface);
  margin-top: clamp(28px, 5vh, 56px);
}
/* Jeder Schritt bekommt ein Bild aus der eigenen Prevadzka — die
   Ordnungszahl allein sagt nur, dass es fuenf sind, das Bild sagt,
   was passiert. Es steht zwischen Zahl und Text und spannt ueber
   beide Zeilen, damit die Zeile ihre Hoehe behaelt. */
.v2-hero-steps-panel > div {
  display: grid;
  grid-template-columns: 30px 64px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  padding-block: 14px;
}
.v2-step-thumb {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--v2-bg-subtle);
}
.v2-hero-steps-panel strong,
.v2-hero-steps-panel span:not(.v2-usp-num) { grid-column: 3; }
.v2-hero-steps-panel strong { align-self: end; }
.v2-hero-steps-panel span:not(.v2-usp-num) { align-self: start; }
.v2-hero-steps-panel > div + div { border-top: 1px solid var(--v2-border); }
.v2-hero-steps-panel .v2-usp-num { padding-top: 3px; }
.v2-hero-steps-panel strong {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-hero-steps-panel span:not(.v2-usp-num) {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}

/* Financovanie-Hero: breites Bildband unter dem Text */
.v2-hero-banner {
  margin-top: clamp(28px, 5vh, 56px);
  border-radius: var(--v2-radius-lg);
  overflow: hidden;
  background: var(--v2-bg-subtle);
}
.v2-hero-banner img {
  display: block;
  width: 100%;
  height: clamp(280px, 36vw, 440px);
  object-fit: cover;
}

/* Modell-Karten IM dunklen Rahmen: klickbare Wähler für den Umschalter */
.v2-numbers .v2-model-cards { margin: 0 0 clamp(24px, 3vw, 40px); }
.v2-numbers button.v2-model-card {
  text-align: left;
  font-family: var(--v2-font);
  cursor: pointer;
  transition: border-color 0.2s var(--v2-ease), box-shadow 0.2s var(--v2-ease);
}
.v2-numbers .v2-model-card--dark {
  background: rgba(244, 245, 247, 0.04);
  border: 1px solid rgba(244, 245, 247, 0.14);
}
.v2-numbers .v2-model-card--dark::before { display: none; }
.v2-numbers .v2-model-card[aria-pressed="true"] {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 1px var(--v2-accent);
}
.v2-numbers .v2-model-card .v2-model-hint {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-ink-soft);
}
.v2-numbers .v2-model-card--dark .v2-model-hint { color: var(--v2-on-dark-soft); }
.v2-numbers .v2-model-card[aria-pressed="true"] .v2-model-hint { color: var(--v2-accent); }
/* Weisse Modell-Karte im dunklen Rahmen: Ueberschrift bleibt Graphit. */
body.v2 .v2-on-dark .v2-model-card--light h2,
body.v2 .v2-numbers .v2-model-card--light h2 { color: var(--v2-ink-strong); }

/* Keine "Sonnenlicht"-Glut im Zahlen-Rahmen (Anti-KI-Muster). */
.v2-numbers-frame::before { display: none; }

/* Financovanie-Instrument: kompakter Waehler links, Ausgabe rechts. */
.v2-fin-instrument { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 960px) { .v2-fin-instrument { grid-template-columns: 0.72fr 1.28fr; } }
.v2-fin-select { display: flex; flex-direction: column; }
.v2-fin-select > .v2-eyebrow { margin-bottom: 14px; }
.v2-fin-option {
  display: grid;
  gap: 6px;
  text-align: left;
  padding: 20px 18px 22px 20px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(244, 245, 247, 0.12);
  border-left: 2px solid transparent;
  color: var(--v2-on-dark);
  font-family: var(--v2-font);
  cursor: pointer;
  transition: background-color 0.2s var(--v2-ease), border-color 0.2s var(--v2-ease);
}
.v2-fin-option:last-of-type { border-bottom: 1px solid rgba(244, 245, 247, 0.12); }
.v2-fin-option:hover { background: rgba(244, 245, 247, 0.04); }
.v2-fin-option small {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v2-on-dark-soft);
}
.v2-fin-option strong {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-on-dark);
}
.v2-fin-option > span {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-on-dark-soft);
}
.v2-fin-option[aria-pressed="true"] {
  border-left-color: var(--v2-accent);
  background: rgba(244, 245, 247, 0.05);
}
.v2-fin-option[aria-pressed="true"] small { color: var(--v2-accent-on-dark); }
.v2-fin-note {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--v2-on-dark-soft);
}
.v2-fin-output { display: grid; gap: 20px; min-width: 0; }
.v2-fin-output .v2-fin-panel { margin-top: 0; }

/* ================================================================== *
 * Runde 4: Aplikacie, Katalog, O nas, Kontakt — eigene Sektionsbausteine.
 * Gemeinsame Regeln: flache dunkle Flaechen (keine Glut), Zeilen mit
 * 1-px-Linien statt Kartenreihen, Amber nur als Punkt, Nummer oder CTA.
 * Absaetze brauchen "p." im Selektor, sonst gewinnt body.v2 p { margin: 0 }.
 * ================================================================== */

/* Gemeinsame Kleinteile */
.v2-dot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.v2-dot-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}
.v2-dot-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}
.v2-arrow-link--on-dark { color: var(--v2-on-dark); }
.v2-arrow-link--on-dark:hover { color: #fff; }
.v2-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 26px;
}
.v2-page-hero .v2-hero-actions .v2-btn { margin-top: 0; }

/* Seitenindex in der haftenden Spalte (Aplikacie-Odvetvia, Katalog-Register) */
.v2-side-index {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--v2-border);
}
.v2-side-index li { border-bottom: 1px solid var(--v2-border); }
.v2-side-index a {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--v2-ink-soft);
  text-decoration: none;
  transition: color 0.2s var(--v2-ease);
}
.v2-side-index a > span:first-child {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v2-accent);
  font-variant-numeric: tabular-nums;
}
.v2-side-index em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--v2-ink-faint);
  font-variant-numeric: tabular-nums;
}
.v2-side-index a:hover { color: var(--v2-ink-strong); }
.v2-side-index a.is-current {
  color: var(--v2-ink-strong);
  font-weight: 600;
}
.v2-side-index a.is-current em { color: var(--v2-ink-soft); }

/* ---------------------------------------------------------------- *
 * Aplikacie: heller Hero mit Bildstreifen-Akkordeon
 * ---------------------------------------------------------------- */
.v2-page-hero--apps h1 { max-width: 20ch; }
.v2-strips {
  display: flex;
  gap: 8px;
  height: clamp(340px, 44vw, 520px);
  margin-top: clamp(32px, 5vh, 60px);
}
.v2-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--v2-dark) var(--v2-strip-img) center / cover no-repeat;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: flex 620ms var(--v2-ease-out);
}
.v2-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(8, 10, 14, 0.8) 0%, rgba(8, 10, 14, 0.22) 52%, rgba(8, 10, 14, 0.06) 100%);
}
.v2-strip.is-open { flex: 3.4 1 0; }
.v2-strip:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 3px; }
.v2-strip-vert {
  position: absolute;
  left: 18px;
  bottom: 18px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 300ms var(--v2-ease);
}
.v2-strip-copy {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--v2-ease) 120ms, transform 420ms var(--v2-ease-out) 120ms;
}
.v2-strip-copy strong {
  display: block;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.v2-strip-copy span {
  display: block;
  margin-top: 8px;
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
.v2-strip.is-open .v2-strip-vert { opacity: 0; }
.v2-strip.is-open .v2-strip-copy { opacity: 1; transform: none; }
@media (max-width: 759px) {
  .v2-strips { flex-direction: column; height: auto; }
  .v2-strip, .v2-strip.is-open { flex: none; height: 150px; }
  .v2-strip-vert { display: none; }
  .v2-strip-copy { opacity: 1; transform: none; }
  .v2-strip-copy span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-strip, .v2-strip-copy, .v2-strip-vert { transition: none; }
}

/* Odvetvia: haftender Kopf links, Kapitel rechts */
.v2-sectors {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (min-width: 960px) {
  .v2-sectors { grid-template-columns: 0.72fr 1.28fr; }
  .v2-sectors-side { position: sticky; top: calc(var(--v2-navbar-h) + 40px); }
}
.v2-sectors-side h2 { max-width: 14ch; margin-top: 14px; }
.v2-sectors-side > p {
  margin-top: 16px;
  max-width: 40ch;
  color: var(--v2-ink-soft);
}
.v2-sector {
  display: grid;
  gap: 22px;
  padding-block: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--v2-border);
  scroll-margin-top: calc(var(--v2-navbar-h) + 24px);
}
.v2-sector:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-sector-media {
  border-radius: 20px;
  overflow: hidden;
  background: var(--v2-bg-subtle);
}
.v2-sector-media img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  transition: transform 700ms var(--v2-ease-out);
}
.v2-sector:hover .v2-sector-media img { transform: scale(1.03); }
.v2-sector h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-sector-body > p {
  margin-top: 10px;
  max-width: 60ch;
  color: var(--v2-ink);
}
.v2-sector-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 40px;
  margin-top: 22px;
}
@media (min-width: 680px) { .v2-sector-cols { grid-template-columns: 1fr 1fr; } }
.v2-sector-cols h4 {
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-ink-soft);
}
.v2-mini-machines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.v2-mini-machines a {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 12px;
  padding: 5px 10px 5px 5px;
  border-radius: 12px;
  color: var(--v2-ink-strong);
  text-decoration: none;
  transition: background-color 0.15s var(--v2-ease);
}
.v2-mini-machines a:hover { background: var(--v2-bg-subtle); }
.v2-mini-thumb {
  width: 52px;
  height: 52px;
  padding: 4px;
  border-radius: 10px;
  background: var(--v2-bg-subtle);
}
.v2-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.v2-mini-machines strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.v2-mini-machines small {
  display: block;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}

/* Foto-Band: echtes Foto links, Aussage rechts, flaches Graphit */
.v2-photo-band {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--v2-radius-xl);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  overflow: hidden;
}
@media (min-width: 960px) { .v2-photo-band { grid-template-columns: 1fr 1fr; } }
.v2-photo-band-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
.v2-photo-band-copy { padding: clamp(28px, 4.5vw, 64px); }
.v2-photo-band-copy h2 {
  margin-top: 14px;
  max-width: 16ch;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--v2-on-dark);
}
.v2-photo-band-copy > p {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--v2-on-dark-soft);
}
.v2-photo-band-copy .v2-arrow-link { margin-top: 26px; }

/* ---------------------------------------------------------------- *
 * Katalog: Publikations-Panel im Hero, Register mit Zeilen
 * ---------------------------------------------------------------- */
.v2-proof-brochure--hero {
  margin-top: clamp(28px, 5vh, 56px);
  min-height: clamp(380px, 40vw, 520px);
}
.v2-proof-brochure--hero .v2-proof-cover { width: min(440px, 88%); }
.v2-proof-brochure--hero h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-on-dark);
}
.v2-register {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: start;
}
@media (min-width: 960px) {
  .v2-register { grid-template-columns: 0.62fr 1.38fr; }
  .v2-register-side { position: sticky; top: calc(var(--v2-navbar-h) + 40px); }
}
.v2-register-side h2 { max-width: 14ch; margin-top: 14px; }
.v2-register-side > p {
  margin-top: 16px;
  max-width: 38ch;
  color: var(--v2-ink-soft);
}
.v2-register-group { scroll-margin-top: calc(var(--v2-navbar-h) + 24px); }
.v2-register-group + .v2-register-group { margin-top: clamp(40px, 5vw, 72px); }
.v2-register-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}
.v2-register-head h3 {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-register-rows { border-top: 1px solid var(--v2-border); }
.v2-register-row {
  display: grid;
  grid-template-columns: 72px 1fr 1.45fr auto 20px;
  grid-template-areas: "thumb name desc cert arrow";
  align-items: center;
  gap: 18px;
  padding: 14px 12px;
  margin-inline: -12px;
  border-radius: 14px;
  color: var(--v2-ink);
  text-decoration: none;
  transition: background-color 0.15s var(--v2-ease);
}
.v2-register-row + .v2-register-row { position: relative; }
.v2-register-row + .v2-register-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--v2-border);
}
.v2-register-rows::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--v2-border);
}
.v2-register-row:hover { background: var(--v2-bg-subtle); }
.v2-register-thumb {
  grid-area: thumb;
  width: 72px;
  height: 72px;
  padding: 6px;
  border-radius: 12px;
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
.v2-register-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 500ms var(--v2-ease-out);
}
.v2-register-row:hover .v2-register-thumb img { transform: scale(1.06); }
.v2-register-name { grid-area: name; }
.v2-register-name strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-register-name span {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}
.v2-register-desc {
  grid-area: desc;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}
.v2-register-cert {
  grid-area: cert;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
  white-space: nowrap;
}
.v2-register-cert img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  object-fit: cover;
  flex: none;
}
.v2-register-arrow {
  grid-area: arrow;
  display: flex;
  color: var(--v2-ink-strong);
  transition: transform 200ms var(--v2-ease-out);
}
.v2-register-row:hover .v2-register-arrow { transform: translateX(4px); }
@media (max-width: 899px) {
  /* Runde 6: die Pfeilspalte lief ueber alle drei Zeilen und nahm dem
     Beschreibungstext 34px — auf 218px Restbreite brach er in
     Dreiwortzeilen. Der Pfeil steht jetzt neben dem Modellnamen,
     Beschreibung und Zertifikat laufen unter ihm durch. */
  .v2-register-row {
    grid-template-columns: 60px minmax(0, 1fr) 20px;
    grid-template-areas:
      "thumb name arrow"
      "thumb desc desc"
      "thumb cert cert";
    gap: 6px 14px;
    align-items: start;
  }
  .v2-register-thumb { width: 60px; height: 60px; }
  .v2-register-arrow { align-self: start; padding-top: 3px; }
}

/* Entscheidungszeilen (Katalog, Kontakt): Bedarf links, Ziel rechts */
.v2-routes {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--v2-border);
}
.v2-routes li { border-bottom: 1px solid var(--v2-border); }
.v2-routes a {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 6px 18px;
  align-items: center;
  margin-inline: -12px;
  padding: 18px 12px;
  border-radius: 14px;
  color: var(--v2-ink);
  text-decoration: none;
  transition: background-color 0.15s var(--v2-ease);
}
@media (min-width: 760px) { .v2-routes a { grid-template-columns: 1.05fr 1fr 20px; } }
.v2-routes a:hover { background: var(--v2-bg-subtle); }
.v2-routes strong {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-routes span:not(.v2-routes-arrow) {
  font-size: 0.9375rem;
  color: var(--v2-ink-soft);
}
.v2-routes-arrow {
  display: flex;
  color: var(--v2-ink-strong);
  transition: transform 200ms var(--v2-ease-out);
}
@media (max-width: 759px) { .v2-routes-arrow { grid-row: 1 / span 2; grid-column: 2; } }
.v2-routes a:hover .v2-routes-arrow { transform: translateX(4px); }


/* ================================================================== *
 * KALKULACKA USPOR
 *
 * Heller Kopf mit den Eckdaten der Firma, direkt darunter das
 * Instrument — der Rechner ist der Grund, warum jemand hier ist, und
 * steht deshalb ueber der Falz. Die Zahlen standen vorher IM dunklen
 * Rahmen und machten ihn voll; oben tragen sie das Vertrauen, unten
 * kann der Rechner atmen.
 * ================================================================== */
.v2-calc-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: end;
  padding-top: clamp(28px, 5vh, 56px);
}
@media (min-width: 960px) {
  .v2-calc-open { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.v2-calc-open h1 {
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--v2-ink-strong);
}
.v2-calc-open .v2-page-lead { margin-top: 20px; max-width: 48ch; }

.v2-calc-facts-open {
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-calc-facts-open li {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding-block: 16px;
  border-top: 1px solid var(--v2-border);
}
.v2-calc-facts-open li:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-calc-facts-open strong {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
  font-variant-numeric: tabular-nums;
}
.v2-calc-facts-open span {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}
@media (max-width: 599px) {
  .v2-calc-facts-open li { grid-template-columns: minmax(0, 1fr); }
}

/* --- Was die Rechnung voraussetzt --------------------------------
   Eine Definitionsliste, kein Kartenraster: es sind Bedingungen zu
   einer Zahl, keine Verkaufsargumente. */
.v2-assume {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}
@media (min-width: 960px) {
  .v2-assume { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.v2-assume-copy p {
  margin-top: 14px;
  max-width: 40ch;
  color: var(--v2-ink-soft);
}
.v2-assume-copy .v2-arrow-link { margin-top: 20px; }
.v2-assume-list { margin: 0; }
.v2-assume-list > div {
  padding-block: 18px;
  border-top: 1px solid var(--v2-border);
}
.v2-assume-list > div:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-assume-list dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
}
.v2-assume-list dd {
  margin: 8px 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--v2-ink);
  max-width: 60ch;
}

/* ================================================================== *
 * ZIADOST O PONUKU
 *
 * Die Seite IST das Formular — also faengt sie damit an, statt es
 * hinter einer Textspalte zu verstecken. Links steht, was der Nutzer
 * dafuer bekommt (24h / 48h / zdarma), rechts beginnt Schritt 1.
 * Kein Kinohero: der ist laut design.md fuer `o-nas` reserviert.
 * ================================================================== */
.v2-quote-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  padding-top: clamp(28px, 5vh, 56px);
}
@media (min-width: 960px) {
  .v2-quote-open { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.v2-quote-open h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--v2-ink-strong);
}
.v2-quote-open .v2-page-lead { margin-top: 20px; max-width: 46ch; }

/* Das Versprechen: drei Zeilen, durch Haarlinien getrennt. Keine
   Kacheln — sie wuerden mit dem Formularfeld daneben konkurrieren. */
.v2-quote-promise {
  list-style: none;
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding: 0;
}
.v2-quote-promise li {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding-block: 16px;
  border-top: 1px solid var(--v2-border);
}
.v2-quote-promise li:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-quote-promise strong {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
  font-variant-numeric: tabular-nums;
}
.v2-quote-promise span {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}
@media (max-width: 599px) {
  .v2-quote-promise li { grid-template-columns: minmax(0, 1fr); }
}

.v2-quote-form { margin-top: clamp(8px, 2vh, 20px); }

/* --- Breites Bildband (auch auf kalkulator-uspor) ----------------- */
.v2-wide-band {
  position: relative;
  margin: clamp(40px, 6vh, 72px) calc(-1 * var(--v2-page-inset, 20px)) 0;
  overflow: hidden;
}
.v2-wide-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 7;
  object-fit: cover;
}
@media (max-width: 759px) {
  .v2-wide-band img { aspect-ratio: 3 / 2; }
}
.v2-wide-band figcaption {
  position: absolute;
  left: var(--v2-page-inset, 20px);
  right: var(--v2-page-inset, 20px);
  bottom: 0;
  padding: 48px 0 18px;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.72), transparent);
}

/* --- Gegenueberstellung: was rein geht, was raus kommt ------------ */
.v2-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  margin-top: clamp(28px, 3.5vw, 44px);
}
@media (min-width: 860px) {
  .v2-exchange { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Die Ausgabe-Spalte steht auf einer eigenen Flaeche — sie ist das,
   was der Nutzer bekommt, und darf sich abheben. */
.v2-exchange-col--out {
  padding: clamp(22px, 2.6vw, 34px);
  margin: calc(-1 * clamp(22px, 2.6vw, 34px));
  border-radius: var(--v2-radius-lg, 24px);
  background: var(--v2-bg-subtle);
}
.v2-exchange-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.v2-exchange-list li {
  padding-block: 16px;
  border-top: 1px solid var(--v2-border);
}
.v2-exchange-list li:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-exchange-list strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-exchange-list span {
  display: block;
  margin-top: 5px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}

/* --- Zwei Referenzkarten nebeneinander ---------------------------- */
.v2-quote-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
}
@media (min-width: 760px) {
  .v2-quote-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================== *
 * KONTAKT
 *
 * Die Seite hatte vier Kanaele mit gleichem Gewicht, kein Bild und
 * kein Wort darueber, was nach dem Absenden passiert. Der erste
 * Umbau ersetzte das durch Kacheln mit Amber-Kante — auch das war
 * ein Reflexmuster: ein farbiger Streifen an der Kartenkante ist
 * Dekoration, keine Information.
 *
 * Jetzt fuehrt der Inhalt. Die Telefonnummer IST das
 * Gestaltungselement: sie steht in Anzeigengroesse, getrennt nur
 * durch Haarlinien. Kein Kasten, kein Rand, kein Akzentstreifen.
 * Das Fassadenfoto stand doppelt auf der Seite — es bekommt jetzt
 * die volle Breite direkt unter der Ueberschrift, unten bleibt die
 * Karte.
 * ================================================================== */
.v2-contact-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: end;
  padding-top: clamp(28px, 5vh, 56px);
}
@media (min-width: 960px) {
  .v2-contact-open { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
/* Breit genug, damit die Zeile nicht in vier Fragmente bricht. */
.v2-contact-open h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  /* Breit genug fuer zwei Zeilen. Bei 15ch brach die Zeile dreimal —
     eine Ueberschrift, die in Fragmenten steht, liest sich als Liste. */
  max-width: 22ch;
  text-wrap: balance;
  color: var(--v2-ink-strong);
}
.v2-contact-open .v2-page-lead {
  margin-top: 20px;
  max-width: 46ch;
}

/* --- Die zwei Kanaele als Zeilen, nicht als Karten ---------------- */
.v2-contact-lines { display: grid; }
.v2-contact-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 20px;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--v2-border);
  color: var(--v2-ink);
  text-decoration: none;
}
.v2-contact-lines .v2-contact-line:last-child { border-bottom: 1px solid var(--v2-border); }
.v2-contact-line-label {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}
.v2-contact-line-value {
  grid-column: 1;
  margin-top: 6px;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-strong);
  overflow-wrap: anywhere;
}
.v2-contact-line-note {
  grid-column: 1;
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}
.v2-contact-line-arrow {
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--v2-ink-faint, #aab2bd);
  transition: transform 220ms var(--v2-ease-out), color 220ms var(--v2-ease);
}
/* Die einzige Bewegung: der Pfeil geht mit und faerbt sich amber. */
.v2-contact-line:hover .v2-contact-line-arrow,
.v2-contact-line:focus-visible .v2-contact-line-arrow {
  transform: translateX(5px);
  color: var(--v2-accent-strong);
}
.v2-contact-line:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 4px; }

/* --- Fassade als randloses Band ---------------------------------- */
.v2-contact-band {
  position: relative;
  margin: clamp(40px, 6vh, 72px) calc(-1 * var(--v2-page-inset, 20px)) 0;
  overflow: hidden;
}
.v2-contact-band img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 7;
  object-fit: cover;
  object-position: 50% 78%;
}
@media (max-width: 759px) {
  .v2-contact-band img { aspect-ratio: 3 / 2; }
}
.v2-contact-band figcaption {
  position: absolute;
  left: var(--v2-page-inset, 20px);
  right: var(--v2-page-inset, 20px);
  bottom: 0;
  padding: 48px 0 18px;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.72), transparent);
}

/* --- Formular und was danach passiert ---------------------------- */
.v2-contact-write {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 960px) {
  .v2-contact-write { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.v2-field-opt {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}
h3.v2-contact-next-head {
  font-size: clamp(1.15rem, 1.8vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--v2-ink-strong);
}
.v2-contact-next ol {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.v2-contact-next li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 14px;
  padding-block: 18px;
  border-top: 1px solid var(--v2-border);
}
.v2-contact-next li:last-of-type { border-bottom: 1px solid var(--v2-border); }
.v2-contact-next strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
}
.v2-contact-next li > div > span {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}
p.v2-contact-note {
  margin-top: 18px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--v2-ink-soft);
}

/* --- Karte allein, das Foto steht oben im Band -------------------- */
.v2-place--map { grid-template-columns: minmax(0, 1fr); }

/* --- Adresse und Firmendaten unter der Karte --------------------- */
.v2-place-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: clamp(24px, 3vw, 36px) 0 0;
}
@media (min-width: 760px) {
  .v2-place-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
}
.v2-place-facts > div {
  padding-block: 18px;
  border-top: 1px solid var(--v2-border);
}
@media (max-width: 759px) {
  .v2-place-facts > div:last-child { border-bottom: 1px solid var(--v2-border); }
}
.v2-place-facts dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
}
.v2-place-facts dd {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}
.v2-place-facts dd small {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
}
.v2-place-facts .v2-copy-address { font-size: 0.9375rem; }

/* ---------------------------------------------------------------- *
 * O nas: Manifest, Zeitlinie, Zázemie, Person, Publikation
 * ---------------------------------------------------------------- */
/* Manifest mit Bild: der Satz steht links, daneben eine Aufnahme aus
   der eigenen Prevadzka. Untereinander auf dem Telefon, das Bild
   zuerst waere falsch — der Satz fuehrt. */
.v2-manifest--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 960px) {
  .v2-manifest--media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.v2-manifest-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  border-radius: var(--v2-radius-lg, 24px);
}
@media (max-width: 959px) {
  .v2-manifest-media img { aspect-ratio: 3 / 2; }
}

p.v2-manifest-text {
  margin-top: 18px;
  max-width: 34ch;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--v2-ink-strong);
  text-wrap: pretty;
}
p.v2-manifest-sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 0.9375rem;
  color: var(--v2-ink-soft);
}
p.v2-manifest-sign::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--v2-accent);
}
.v2-flow--years .v2-usp-num {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.v2-def-list {
  margin: 24px 0 0;
  border-top: 1px solid var(--v2-border);
}
.v2-def-list > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--v2-border);
}
@media (min-width: 560px) { .v2-def-list > div { grid-template-columns: 150px 1fr; } }
.v2-def-list dt {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-ink-soft);
  padding-top: 3px;
}
.v2-def-list dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--v2-ink);
}

.v2-person-band {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--v2-radius-xl);
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
@media (min-width: 860px) { .v2-person-band { grid-template-columns: 0.72fr 1.28fr; } }
.v2-person-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: 50% 28%;
}
.v2-person-copy { padding: clamp(28px, 4vw, 56px); }
.v2-person-copy h2 {
  margin-top: 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--v2-ink-strong);
}
p.v2-person-role {
  margin-top: 6px;
  font-size: 0.9375rem;
  color: var(--v2-ink-soft);
}
p.v2-person-text {
  margin-top: 16px;
  max-width: 50ch;
  color: var(--v2-ink);
}
.v2-person-contacts {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--v2-border);
}
.v2-person-contacts li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--v2-border);
}
@media (min-width: 560px) { .v2-person-contacts li { grid-template-columns: 110px 1fr; align-items: baseline; } }
.v2-person-contacts li > span {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-ink-soft);
}
.v2-person-contacts a {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--v2-ink-strong);
  text-decoration: none;
}
.v2-person-contacts a:hover { color: var(--v2-accent-strong); }

.v2-pub-band {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--v2-radius-xl);
  background: var(--v2-dark);
  color: var(--v2-on-dark);
  overflow: hidden;
}
@media (min-width: 900px) { .v2-pub-band { grid-template-columns: 0.9fr 1.1fr; } }
.v2-pub-cover {
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  padding: clamp(28px, 4vw, 56px) 0 0 clamp(28px, 4vw, 56px);
  overflow: hidden;
}
.v2-pub-cover img {
  display: block;
  width: min(440px, 90%);
  height: auto;
  border-radius: 10px 10px 0 0;
  transform: rotate(-3deg) translateY(18px);
  box-shadow:
    0 40px 80px -24px rgba(0, 0, 0, 0.55),
    0 12px 24px -8px rgba(0, 0, 0, 0.4);
  transition: transform 500ms var(--v2-ease-out);
}
.v2-pub-band:hover .v2-pub-cover img { transform: rotate(-1.5deg) translateY(8px); }
.v2-pub-copy { padding: clamp(28px, 4vw, 56px); }
.v2-pub-copy h2 {
  margin-top: 14px;
  max-width: 16ch;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--v2-on-dark);
}
.v2-pub-copy > p {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--v2-on-dark-soft);
}
.v2-pub-copy .v2-dot-list { margin-top: 18px; }
.v2-pub-copy .v2-dot-list li { color: var(--v2-on-dark); }
.v2-pub-copy .v2-dot-list li::before { background: var(--v2-accent-on-dark); }
.v2-pub-copy .v2-brochure-meta { margin-top: 20px; }
.v2-pub-copy .v2-btn { margin-top: 22px; }

/* ---------------------------------------------------------------- *
 * Kontakt: Kanaele links, Formular rechts, Ort mit Foto und Karte
 * ---------------------------------------------------------------- */
.v2-page-hero--contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 960px) { .v2-page-hero--contact { grid-template-columns: 1fr 0.95fr; } }
.v2-page-hero--contact h1 { max-width: 18ch; }
.v2-page-hero--contact .v2-form-panel { margin-top: clamp(28px, 5vh, 56px); }
.v2-page-hero--contact .v2-form { max-width: none; }
.v2-channels {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  border-top: 1px solid var(--v2-border);
}
.v2-channels li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--v2-border);
}
@media (min-width: 560px) { .v2-channels li { grid-template-columns: 150px 1fr; } }
.v2-channel-label {
  padding-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-ink-soft);
}
.v2-channel-value a,
.v2-channel-value .v2-copy-address {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--v2-ink-strong);
  text-decoration: none;
  transition: color 0.15s var(--v2-ease);
}
.v2-channel-value a:hover,
.v2-channel-value .v2-copy-address:hover { color: var(--v2-accent-strong); }
.v2-channel-plain {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--v2-ink-strong);
}
.v2-channel-value small {
  display: block;
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--v2-ink-soft);
}
.v2-place {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px) { .v2-place { grid-template-columns: 1fr 1fr; } }
.v2-place > div {
  position: relative;
  min-height: 340px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--v2-bg-subtle);
}
.v2-place img, .v2-place iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  border: 0;
}
.v2-place-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(20, 24, 31, 0.78);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ================================================================== *
 * MOBILE-FUNDAMENT — Phase 0 des Mobile-Plans (MOBILE-PLAN.md)
 *
 * Dieser Block steht bewusst am Dateiende: bei gleicher Spezifitaet
 * gewinnt die spaetere Regel. Er aendert nichts am Desktop-Layout —
 * alle layoutwirksamen Regeln haengen an (max-width: 899px) oder
 * (pointer: coarse).
 *
 * Breakpoint-System fuer alle neue Arbeit (Kapitel 3.1):
 *     < 600px   Phone            Referenzbreite 390, Untergrenze 360
 *   600–899px   Phone quer / kleines Tablet
 *   900–1199px  Tablet
 *    >= 1200px  Desktop          Menueleiste erscheint
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * 1 — Farbschema festnageln (Kapitel 3.5)
 *
 * Die Palette ist fix, es gibt keine Dark-Variante. Ohne diese
 * Deklaration darf Androids „Auto Dark Theme" die Seite eigenmaechtig
 * invertieren und zerstoert Stahlgrau und Amber.
 * ------------------------------------------------------------------ */
:root { color-scheme: only light; }

/* ------------------------------------------------------------------ *
 * 2 — Safe-Area als Token
 *
 * Fuer Docker, Drawer-Fuss, Sheets und jedes fixierte Panel. Faellt
 * auf 0px zurueck, wo env() nicht existiert.
 * ------------------------------------------------------------------ */
:root {
  --v2-safe-top: env(safe-area-inset-top, 0px);
  --v2-safe-bottom: env(safe-area-inset-bottom, 0px);
  --v2-safe-left: env(safe-area-inset-left, 0px);
  --v2-safe-right: env(safe-area-inset-right, 0px);
}

/* ------------------------------------------------------------------ *
 * 3 — Horizontaler Ueberlauf (D1)
 *
 * Zweiter Riegel neben der matchMedia-Umstellung in v2-motion.js:
 * GSAP-Starttransformationen duerfen die Dokumentbreite nicht mehr
 * aufziehen. `clip` statt `hidden`, damit position: sticky im Blatt
 * weiter funktioniert.
 * ------------------------------------------------------------------ */
html { overflow-x: clip; }
body.v2 { overflow-x: clip; }
.v2-main { overflow-x: clip; }

/* ------------------------------------------------------------------ *
 * 4 — Scroll-Chaining (Kapitel 3.5)
 *
 * Am Ende einer horizontalen Schiene loest Chrome auf Android sonst
 * die Zurueck-Navigation aus; ein offenes Sheet scrollt die Seite
 * dahinter mit.
 * ------------------------------------------------------------------ */
.v2-drawer,
.v2-carousel-wrapper,
.v2-folder-tabs { overscroll-behavior: contain; }

/* Basis fuer die Snap-Schienen aus Phase 2. Der Anschnitt bleibt
   erhalten — die Karten rasten per scroll-padding an der
   Inhaltskante ein, statt per Innenabstand eingerueckt zu werden. */
.v2-rail {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--v2-page-inset, var(--v2-frame-gutter, 20px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v2-rail::-webkit-scrollbar { display: none; }
.v2-rail > * { scroll-snap-align: start; flex: none; }
.v2-rail:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 4px; }

/* ------------------------------------------------------------------ *
 * 5 — Ankerziele unter der fixierten Leiste (Kapitel 3.4)
 * ------------------------------------------------------------------ */
[id]:target { scroll-margin-top: calc(var(--v2-nav-height, 80px) + 24px); }

/* Kein globales `scroll-behavior: smooth` — es kollidiert mit
   ScrollTrigger (gescrubte Timelines springen). Weiches Scrollen
   passiert dort, wo v2.js es gezielt ausloest. */

/* ------------------------------------------------------------------ *
 * 6 — Tap-Targets (D8, WCAG 2.2 SC 2.5.5 / 2.5.8)
 *
 * Gemessen auf 390px ueber sechs Seiten. Nur die tatsaechlich zu
 * kleinen UI-Ziele werden vergroessert. Ausgenommen bleiben bewusst:
 * `.v2-visually-hidden` (Skip-Links, 1x1 ist korrekt) und
 * Inline-Textlinks im Fliesstext (SC 2.5.8 nimmt sie aus).
 * ------------------------------------------------------------------ */

/* Layoutneutral: Trefferflaeche per Pseudo-Element, die Box bleibt klein.
   Gilt ueberall, weil sie nichts verschiebt. */
.v2-gnav-lang {
  position: relative;
}
.v2-gnav-lang::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Layoutwirksam: nur auf Touch und schmalen Fenstern. */
@media (max-width: 899px), (pointer: coarse) {
  /* Runde 6: `min-width` war offen. Kurze Beschriftungen („O nás",
     „Domov") blieben mit 39 bis 42px unter dem Ziel, obwohl die Hoehe
     stimmte. Der Kasten waechst nach rechts, der Text bleibt links. */
  .v2-footer-col a,
  .v2-footer-legal a,
  .v2-person-contacts a,
  .v2-channel-value a,
  .v2-channel-value button {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  .v2-crumbs a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }
  .v2-crumbs li + li { margin-left: 4px; }

  .v2-arrow-link {
    min-height: 44px;
    align-items: center;
  }

  .v2-footer-socials a,
  .v2-gnav-burger {
    min-width: 44px;
    min-height: 44px;
  }

  /* `height: 42px` steht weiter oben an derselben Stelle der Kaskade —
     ohne `height: auto` bliebe der Knopf bei 42. */
  body.v2 .v2-fin-switch button {
    height: auto;
    min-width: 44px;
    min-height: 44px;
  }

  .v2-gnav-logo { min-height: 44px; display: inline-flex; align-items: center; }

  /* Runde 6: zwischen 600 und 899px traegt die Leiste den CTA selbst
     (darunter uebernimmt ihn die Schublade) — mit 36px Hoehe aus der
     Desktop-Form. `height` steht weiter oben an derselben Stelle der
     Kaskade, deshalb wird sie hier ueberschrieben, nicht ergaenzt. */
  .v2-gnav-cta { height: 44px; }

  /* Runde 6: Telefonnummer, E-Mail und der Adress-Kopierknopf waren
     nur ueber `:hover` als Aktion erkennbar — auf dem Telefon also
     gar nicht, obwohl „anrufen" dort die wichtigste Handlung der
     Seite ist. Sie bekommen einen sichtbaren Ruhezustand. */
  .v2-channel-value a,
  .v2-channel-value .v2-copy-address,
  .v2-person-contacts a {
    text-decoration: underline;
    text-decoration-color: var(--v2-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }

  /* Der Slider braucht einen greifbaren Regler. */
  .v2-range { height: 44px; }
  .v2-range::-webkit-slider-thumb { width: 26px; height: 26px; }
  .v2-range::-moz-range-thumb { width: 26px; height: 26px; }
}

/* ------------------------------------------------------------------ *
 * 7 — Formularfelder (Kapitel 3.4)
 *
 * Unter 16px zoomt iOS Safari beim Fokus in die Seite hinein und
 * verschiebt das Layout. Gilt fuer alle Feldtypen.
 * ------------------------------------------------------------------ */
@media (max-width: 899px) {
  /* Die Basisregeln adressieren die Felder ueber Attribut-Selektoren
     (`input[type="text"]` usw.). Ohne dieselbe Form verliert die Regel
     hier den Spezifitaetsvergleich und die 15px bleiben stehen. */
  .v2-form input[type="text"],
  .v2-form input[type="email"],
  .v2-form input[type="tel"],
  .v2-form input[type="number"],
  .v2-form input[type="search"],
  .v2-form textarea,
  .v2-form select,
  .v2-form-panel input[type="text"],
  .v2-form-panel input[type="email"],
  .v2-form-panel input[type="tel"],
  .v2-form-panel textarea,
  .v2-form-panel select {
    font-size: 16px;
  }
  /* Newsletter-Feld im Fuss stammt aus dem Legacy-Layer. */
  .v2-footer-news .newsletter-form input,
  .v2-footer-news input[type="email"] {
    font-size: 16px;
  }
}

/* ------------------------------------------------------------------ *
 * 8 — Touch-Ruhezustaende (D9)
 *
 * Ohne Zeiger gibt es kein Hover. Was nur bei Hover erscheint, muss
 * auf Touch sichtbar sein.
 * ------------------------------------------------------------------ */
@media (hover: none) {
  /* Die Referenz-Wand pausiert auf Hover — auf Touch nie. Sie laeuft
     endlos und kostet dauerhaft Akku. Angehalten, siehe Entscheidung 2. */
  .v2-loop-col { animation-play-state: paused; }

  /* Der Portfolio-CTA erscheint sonst nur bei Hover. */
  .v2-elastic-cta { opacity: 1; }
}


/* ================================================================== *
 * MOBILE-GESTALTUNG — Phase 1 + 2 des Mobile-Plans
 *
 * Alles unter (max-width: 899px). Der Desktop bleibt unberuehrt.
 * Kein HTML wurde geaendert — die Sektionen werden ueber das
 * vorhandene Markup umgebaut, damit die Aenderung sofort auf allen
 * 31 Seiten wirkt.
 *
 * Leitidee A: gleichrangige Geschwister werden zu Snap-Schienen mit
 * angeschnittener Folgekarte. Sequenzen (Zyklus, Ablauf, Zeitlinie)
 * bleiben vertikal — dort IST die Abwaertsbewegung die Bedeutung.
 * ================================================================== */

@media (max-width: 899px) {

/* ------------------------------------------------------------------ *
 * Schienen-Grundmuster
 *
 * Der Anschnitt ist die Affordance: die naechste Karte ragt ins Bild
 * und sagt ohne Pfeil, dass es weitergeht. Die Karten rasten an der
 * Inhaltskante ein, die Schiene laeuft randlos durch.
 * ------------------------------------------------------------------ */
.v2-hero-rail,
.v2-elastic-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--v2-frame-gutter, 20px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v2-hero-rail::-webkit-scrollbar,
.v2-elastic-container::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ *
 * 1 — HERO
 *
 * Der Inhalt muss in EINEN Screen: Eyebrow, Titel (hoechstens zwei
 * Zeilen), Lead, zwei CTAs, darunter die Schiene. Die Rail lag vorher
 * bei x=270 bis 760 — also vollstaendig ausserhalb (D3).
 * ------------------------------------------------------------------ */
.v2-hero { min-height: 100svh; }
/* Der Inhalt sitzt mittig zwischen Kopfleiste und Schiene, statt oben
   zu kleben und eine tote Flaeche darunter zu lassen. */
.v2-hero-content {
  top: 0;
  bottom: 168px;
  justify-content: center;
  padding-top: calc(var(--v2-nav-height, 80px) + 8px);
  gap: 16px;
}
.v2-hero-title { font-size: clamp(2rem, 8.5vw, 2.6rem); max-width: 15ch; }
.v2-hero-lead {
  font-size: 1rem;
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Beide CTAs nebeneinander in der Daumenzone, gleich breit. */
.v2-hero-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}
.v2-hero-ctas .v2-btn {
  width: 100%;
  justify-content: center;
  padding-inline: 8px;
  font-size: 0.9375rem;
}

/* Die drei Gruende als Schiene ueber der Bildschirmkante. */
.v2-hero-rail {
  gap: 10px;
  padding-bottom: calc(20px + var(--v2-safe-bottom, 0px));
  align-items: stretch;
}
.v2-hero-rail .v2-rail-card {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 16px;
  border-radius: 16px;
  text-align: left;
}
/* Die Kachel ist ein Wegweiser, kein Absatz. */
.v2-hero-rail .v2-rail-card p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.v2-hero-rail .v2-rail-card h3 { font-size: 1rem; }
.v2-hero-rail .v2-rail-progress { margin-top: auto; }

/* ------------------------------------------------------------------ *
 * 2 — STATEMENTS
 *
 * Vorher lag der Text auf dem Foto und war unlesbar (D4), die
 * Pfeilknoepfe ueberlagerten die Zeilen. Das Overlay wird aufgeloest:
 * Bild oben, Text auf heller Flaeche darunter. Die Kennzahl wird zum
 * Ankerelement — sie ist die Aussage, nicht der Absatz.
 * ------------------------------------------------------------------ */

/* Die Desktop-Fassung stapelt Bild, Verlauf und Text uebereinander und
   arbeitet mit fester Hoehe. Auf dem Telefon wird daraus eine Karte
   mit zwei Zeilen: Bild oben, Text darunter. Die Hoehen muessen
   ausdruecklich freigegeben und das mittige Verschieben der
   Textspalte zurueckgenommen werden. */
.v2-carousel,
.v2-carousel-wrapper,
.v2-carousel-track { height: auto; }
.v2-carousel-slide {
  display: grid;
  grid-template-rows: auto auto;
  height: auto;
  background: var(--v2-surface);
  border-radius: 20px;
  overflow: hidden;
}
.v2-carousel-slide img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: none;
}
.v2-carousel-slide::before,
.v2-carousel-slide::after { display: none; }
.v2-carousel-copy {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;          /* sonst zieht translateY(-50%) den Text ins Bild */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 24px;
  max-width: none;
  color: var(--v2-ink);
}
.v2-carousel-copy .v2-stat {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--v2-ink-strong);
}
.v2-carousel-copy .v2-stat small {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--v2-accent-strong);
}
.v2-carousel-copy p { font-size: 0.9375rem; color: var(--v2-ink-soft); }
/* Auf hellem Grund traegt der Ghost-Button keinen weissen Rand mehr. */
.v2-carousel-copy .v2-btn--on-dark {
  border-color: var(--v2-ink-mid);
  color: var(--v2-ink-strong);
  align-self: flex-start;
}

/* ------------------------------------------------------------------ *
 * 3 — PORTFOLIO
 *
 * 2 935px fuer fuenf Kacheln waren dreieinhalb Bildschirme.
 * ------------------------------------------------------------------ */
.v2-elastic { height: auto; overflow: visible; }
.v2-elastic-container {
  position: static;
  gap: 12px;
  padding-inline: var(--v2-frame-gutter, 20px);
  align-items: stretch;
}
.v2-elastic-item {
  flex: 0 0 auto;
  width: min(76vw, 300px);
  max-width: none;
  scroll-snap-align: start;
  border-radius: 20px;
}
.v2-elastic-media { height: 240px; }
.v2-elastic-head { height: 52px; padding: 0 16px; }
.v2-elastic-foot { padding: 0 16px 18px; }
.v2-elastic-foot h3 { font-size: 1.0625rem; }
.v2-elastic-foot p { font-size: 0.875rem; }

/* ------------------------------------------------------------------ *
 * 4 — NUMBERS als eigener Screen
 *
 * Der Graphit-Rahmen wirkte auf dem Telefon eingezwaengt: Radius,
 * Innenabstand und zwei Instrumente auf 350px Breite. Auf dem Telefon
 * wird daraus stattdessen ein randloser dunkler Abschnitt — eine
 * eigene Flaeche im Seitenfluss, wie ein eigener Screen in einer App.
 * Innerhalb trennt eine durchgehende Linie die beiden Instrumente:
 * oben die Ersparnis, unten das Beschaffungsmodell.
 * ------------------------------------------------------------------ */
.v2-numbers .v2-inset { padding-inline: 0; }
.v2-numbers-frame {
  border-radius: 0;
  padding: 36px var(--v2-frame-gutter, 20px) 40px;
}
.v2-numbers-head { gap: 14px; }
.v2-numbers-lead { font-size: 0.9375rem; }
.v2-numbers-divider {
  margin-inline: calc(-1 * var(--v2-frame-gutter, 20px));
  margin-block: 32px;
}
.v2-numbers-row--calc { display: flex; flex-direction: column; gap: 0; }
/* Das Ergebnis fuehrt, die Eingabe folgt. */
.v2-numbers-row--calc > .v2-numbers-col:nth-child(2) { order: -1; }

/* Der Donut steht gross und allein — er ist das Ergebnis, nicht eine
   Randnotiz neben einem Regler. */
.v2-numbers-donut { display: block; margin-bottom: 32px; }
.v2-numbers-donut .v2-donut {
  width: 190px;
  height: 190px;
  margin: 0 auto;
}
.v2-donut-center strong { font-size: 1.75rem; letter-spacing: -0.03em; }
.v2-donut-center span { font-size: 0.75rem; }
p.v2-calc-result-line {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.9375rem;
}
/* Die Belege stehen als Zeilen mit 1px-Linien unter dem Ergebnis —
   keine Kaesten, wie im Designsystem vorgesehen. */
.v2-calc-facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid var(--v2-dark-line, rgba(255,255,255,0.13));
}
.v2-numbers .v2-calc-facts > div {
  display: flex;
  flex-direction: row;      /* die Basisregel stellt die Zeile hochkant */
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--v2-dark-line, rgba(255,255,255,0.13));
}
.v2-calc-facts strong { font-size: 1.0625rem; }
.v2-calc-facts span { font-size: 0.8125rem; text-align: right; }

/* Der Regler wird das zweite grosse Element: Wert gross ueber der
   Spur, damit die Eingabe genauso viel Gewicht hat wie das Ergebnis. */
.v2-calc-field-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.v2-calc-field-head output {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.v2-numbers-col > .v2-btn { width: 100%; justify-content: center; }

/* Ein Segmented Control ueber die volle Breite, wie auf dem Telefon
   erwartet. */
.v2-fin-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.v2-fin-switch button { width: 100%; }

/* ------------------------------------------------------------------ *
 * 5 — BENTO
 *
 * Fuenf gleich hohe Bildkarten untereinander waren 1 525px ohne
 * Hierarchie. Die erste Karte fuehrt, vier bilden ein ruhiges 2x2.
 * ------------------------------------------------------------------ */
.v2-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v2-bento-card { border-radius: 16px; min-height: 168px; }
.v2-bento-card:first-child { grid-column: 1 / -1; min-height: 260px; }
.v2-bento-body { padding: 14px; }
.v2-bento-card h3 { font-size: 0.9375rem; line-height: 1.25; }
.v2-bento-card:first-child h3 { font-size: 1.25rem; }
/* In den kleinen Kacheln traegt der Titel allein — ein Absatz auf
   halber Breite ergaebe Zeilensalat. */
.v2-bento-card:not(:first-child) .v2-bento-body p { display: none; }
/* Der Weg bleibt trotzdem offen: statt die Zeile „Zistiť viac"
   auszublenden — womit die Kachel gar kein Ziel mehr hatte und nur die
   Fuehrungskarte anzutippen war — legt sich der Link unsichtbar ueber
   die ganze Kachel. Ohne Maus gibt es keine Zeile zum Zeigen; die
   Kachel selbst ist die Flaeche. */
.v2-bento-card:not(:first-child) .v2-bento-cta {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Die Grundregel setzt „align-self: flex-start" und
     „width: fit-content", damit auf dem Schreibtisch nur die Zeile
     klickbar ist. Beides muss hier zurueckgenommen werden, sonst
     bleibt die Flaeche so gross wie der Text. */
  width: auto;
  height: auto;
  align-self: stretch;
  padding: 0;
  opacity: 0;
}
/* Die Fuehrungskarte behaelt ihre sichtbare Zeile und wird zusaetzlich
   auf ganzer Flaeche antippbar: das Pseudoelement spannt den Link ueber
   die Karte, ohne die Zeile aus dem Satz zu nehmen. */
.v2-bento-card:first-child .v2-bento-cta { opacity: 1; transform: none; }
.v2-bento-card:first-child .v2-bento-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ------------------------------------------------------------------ *
 * 6 — PROOF
 *
 * Zwei endlos nach oben laufende Kartenspalten sind auf dem Telefon
 * kein Beweis, sondern Unruhe: die Karten ziehen unter dem Daumen
 * weg, waehrend man liest. Aus der Wand wird dieselbe Snap-Schiene,
 * die Hero und Portfolio benutzen — eine Karte nach der anderen,
 * vom Nutzer gesteuert.
 *
 * Die Laufanimation haengt an `.v2-loop-col[data-cloned]` und braucht
 * dieselbe Spezifitaet, sonst laeuft sie weiter.
 * ------------------------------------------------------------------ */
/* Der Rahmen gibt die Hoehe frei; die erste Spalte selbst wird zur
   Schiene. Ein `display: contents` auf der Spalte funktionierte hier
   NICHT: die Spalten liegen `position: absolute` im Rahmen, und ohne
   eigene Box fielen die Karten aus dem Fluss — der Rahmen blieb 0px
   hoch und die Referenzen waren unsichtbar. */
.v2-loop {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
}
.v2-proof-grid .v2-loop { min-height: 0; height: auto; }
.v2-proof-grid { gap: 20px; }
/* Der Track liegt `position: absolute; inset: 0` im Rahmen — fuer die
   Endlosschleife richtig, hier der Grund, warum der Rahmen ohne Hoehe
   blieb und die Referenzen unsichtbar waren. */
.v2-loop-track {
  position: static;
  inset: auto;
  display: block;
}

.v2-loop-col[data-cloned],
.v2-loop-col {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: auto;
  animation: none;
  transform: none;
  will-change: auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Randlos ueber negative Margen in Seitenkanten-Breite — der
     Anschnitt der Folgekarte ist die Ansage, dass es weitergeht. */
  scroll-padding-inline: var(--v2-page-inset, 20px);
  margin-inline: calc(-1 * var(--v2-page-inset, 20px));
  padding-inline: var(--v2-page-inset, 20px);
}
.v2-loop-col::-webkit-scrollbar { display: none; }
/* Die zweite Spalte ist der Gegenlauf der Desktop-Wand. */
.v2-loop-col + .v2-loop-col { display: none; }
/* v2.js dupliziert die Kartensaetze fuer die Endlosschleife — in der
   Schiene stuende sonst jede Referenz zweimal. */
.v2-loop-col > *:nth-child(n + 5) { display: none; }
.v2-loop-col > .v2-loop-card {
  flex: 0 0 auto;
  width: min(78vw, 320px);
  scroll-snap-align: start;
  margin: 0;
  overflow: hidden;
}
.v2-loop-card--photo img { height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ *
 * 7 — ABLAUF UND ZEITLINIE als horizontale Schienen
 *
 * Vier Stationen untereinander sind auf dem Telefon vier Bildschirme
 * und man verliert den Zusammenhang. Nebeneinander bleibt die Abfolge
 * ablesbar: eine Station im Bild, die naechste angeschnitten.
 * (Der Zyklus der Landing laeuft seit dem Umbau ueber .v2-squeeze.)
 * ------------------------------------------------------------------ */
.v2-flow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--v2-frame-gutter, 20px);
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--v2-frame-gutter, 20px));
  padding-inline: var(--v2-frame-gutter, 20px);
}
.v2-flow::-webkit-scrollbar { display: none; }
.v2-flow > div {
  flex: 0 0 auto;
  width: min(74vw, 290px);
  scroll-snap-align: start;
  padding: 20px;
  border: 1px solid var(--v2-border);
  border-radius: 16px;
  background: var(--v2-surface);
  gap: 10px;
}


/* ================================================================== *
 * SUBPAGES
 * ================================================================== */

/* --- Split-Heroes: Bild zuerst, dann Text -------------------------
   Runde 6: der Kasten war 300px hoch (Desktop-`min-height`), das Bild
   darin auf 200px festgesetzt — hundert Pixel graue Flaeche unter
   jedem Kategoriebild. Und `display: flex` erbte `align-items: center`
   aus der Rasterform, wodurch der Kasten nur 268 statt 335px breit
   wurde. Das Raster bleibt jetzt ein Raster; das Bild bekommt ein
   Seitenverhaeltnis statt zweier Hoehenangaben. */
.v2-page-hero--split { align-items: stretch; gap: 20px; }
.v2-page-hero--split > .v2-page-hero-media,
.v2-page-hero--split > .v2-media-tile {
  order: -1;
  min-height: 0;
  margin-top: clamp(20px, 3vh, 32px);
}
.v2-page-hero--split .v2-media-tile img {
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}
/* Freigestellte Maschinen behalten ihr eigenes Format, sonst stehen
   sie in einem Feld, das nicht zu ihnen passt. Der Selektor braucht
   dieselbe Tiefe wie die 3:2-Regel darueber, sonst verliert er. */
.v2-page-hero--split .v2-media-tile--product img { aspect-ratio: auto; }
.v2-media-tile--product { min-height: 0; padding: 18px; }

/* --- Brotkrumen: der letzte Krumen tritt aus dem Bild -------------
   Er nennt die Seite, deren H1 zwei Zeilen darunter steht. Auf 390px
   sind das bis zu drei Zeilen fuer eine Wiederholung. Im Markup
   bleibt er stehen — die Struktur fuer Suchmaschinen ist unberuehrt. */
/* Erst ab drei Krumen — bei „Domov / Aplikácie" bliebe sonst ein
   einzelnes „Domov" ohne Pfad stehen. */
.v2-crumbs li:last-child:nth-child(n+3) { display: none; }

/* --- Kategorie-Tabs als Schiene (D5) ------------------------------
   Die Leiste war bereits scrollbar, aber nichts zeigte es an. Snap
   und ein Anschnitt am rechten Rand machen es sichtbar. */
.v2-folder-tabs {
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
  overscroll-behavior-x: contain;
  padding-inline: 16px;
  gap: 6px;
}
.v2-folder-tab { scroll-snap-align: start; }
.v2-folder-panel { border-radius: 20px; }

/* --- Maschinenkarten: zwei Modi statt einem Kompromiss ------------
   Runde 6. Die Karte hatte mobil eine Form fuer zwei verschiedene
   Aufgaben. Auf `automaty/` stehen 13 Modelle nebeneinander — dort
   wird gescannt: Bild, Kategorie, Name, zwei Zeilen. Auf den
   Kategorie- und Produktseiten stehen zwei bis vier Modelle DERSELBEN
   Familie — dort wird verglichen, und der Unterscheidungssatz
   (`.v2-machine-tag`) ist der Grund, warum man ueberhaupt liest. Auf
   150px Spaltenbreite zerfaellt er in Dreiwortfragmente, also wird
   die Karte dort eine volle Zeile mit dem Bild links. */

/* Vergleichsmodus — Kategorie- und Produktseiten. */
.v2-machine-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.v2-machine-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-items: start;
  padding: 14px;
  border-radius: 16px;
}
.v2-machine-card > .v2-machine-photo {
  grid-column: 1;
  grid-row: 1 / span 2;
  /* Mitwachsend statt fest: bei einem fuenfzeiligen Beschreibungstext
     stand sonst weisse Flaeche unter dem Bild. */
  align-self: stretch;
  height: auto;
  min-height: 116px;
  border-radius: 10px;
}
.v2-machine-card > h2,
.v2-machine-card > h3 { grid-column: 2; grid-row: 1; font-size: 1.0625rem; }
.v2-machine-card > p {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.875rem;
  line-height: 1.45;
}
.v2-machine-card > .v2-machine-tag,
.v2-machine-card > .v2-chip { grid-column: 1 / -1; grid-row: 3; }
.v2-machine-tag { margin-top: 12px; padding-top: 12px; }
/* Der Innenabstand von 14px war fuer ein 240px-Feld gerechnet. */
.v2-machine-photo img {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
}

/* Scanmodus — das Portfolio-Raster im Ordner auf `automaty/`. */
/* `minmax(0, 1fr)` statt `1fr`: die Kategorie-Rubrik laeuft mit
   `nowrap`, und ihre min-content-Breite haette sonst die Spalte
   aufgezogen — `1fr` ist `minmax(auto, 1fr)`. */
.v2-folder-panel .v2-machine-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v2-folder-panel .v2-machine-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 12px 12px 14px;
}
/* Feste 240px auf einer 156px breiten Karte waren ein Hochformat mit
   Luft an drei Seiten. Das Seitenverhaeltnis folgt jetzt der Spalte. */
.v2-folder-panel .v2-machine-card > .v2-machine-photo {
  height: auto;
  aspect-ratio: 4 / 5;
  order: 0;
}
/* Die Kategorie fuehrt als Amber-Rubrik ueber dem Namen statt als
   graue Pille am Fuss — die Pille kostete dort zwei Zeilen und stand
   unter dem Namen, obwohl sie ihn einordnet. */
.v2-folder-panel .v2-machine-card > .v2-chip {
  order: 1;
  /* Kein `-webkit-box` mit `overflow: hidden` — der alte Flexkasten
     beschneidet die erste Glyphe (aus „Špirálové" wird „pirálové").
     Die Rubrik darf schlicht umbrechen; laenger als zwei Zeilen wird
     keiner der fuenf Kategorienamen. */
  display: block;
  align-self: stretch;
  margin-top: 4px;
  padding: 0;
  background: none;
  font-size: 0.5938rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
}
.v2-folder-panel .v2-machine-card > h2,
.v2-folder-panel .v2-machine-card > h3 { order: 2; font-size: 0.9375rem; }
.v2-folder-panel .v2-machine-card > p {
  order: 3;
  font-size: 0.8125rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-cat-grid { gap: 12px; }

/* --- Tabellen werden Karten ---------------------------------------
   Eine Tabelle mit drei Spalten ist auf 390px nicht lesbar. Jede
   Zeile wird zu einem Block; die Spaltenueberschrift wandert als
   Label an den Wert. Die Labels setzt v2.js aus dem vorhandenen
   thead — ohne Aenderung am Markup. */
.v2-spec-table { display: block; }
/* Ohne display:block schrumpft die Beschriftung im Blockkontext auf Wortbreite. */
.v2-spec-table caption { display: block; width: 100%; }
.v2-spec-table thead { display: none; }
.v2-spec-table tbody { display: flex; flex-direction: column; gap: 10px; }
.v2-spec-table tr {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  background: var(--v2-surface);
}
.v2-spec-table td { display: block; padding: 0; border: 0; }
/* Die 30-%-Spaltenbreite der Vergleichstabelle gilt nur fuer echte
   Spalten. Im Blockkontext wuerde sie die Zeilenbezeichnung auf ein
   Drittel der Kartenbreite quetschen. */
.v2-spec-table--compare tbody td:first-child { width: auto; }
/* Erste Zelle ist die Zeilenbezeichnung, nicht ein Wert. */
.v2-spec-table td:first-child {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--v2-ink-strong);
  margin-bottom: 8px;
}
.v2-spec-table td:not(:first-child) {
  font-size: 0.9375rem;
  color: var(--v2-ink-soft);
  padding-top: 8px;
  border-top: 1px solid var(--v2-border-soft, rgba(20,24,31,0.07));
}
.v2-spec-table td:not(:first-child)::before {
  content: attr(data-label);
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
  margin-bottom: 2px;
}
/* Die zweispaltige Parametertabelle braucht keine Trennlinie — dort
   ist die zweite Zelle schlicht der Wert. */
.v2-spec-table:not(.v2-spec-table--compare) td:not(:first-child) {
  border-top: 0;
  padding-top: 0;
}
.v2-spec-table:not(.v2-spec-table--compare) td:not(:first-child)::before { display: none; }

/* --- Haftende Seitenindizes werden zu normalen Listen -------------
   Ein Index, der neben dem Inhalt klebt, hat auf einer Spalte keinen
   Bezugspunkt mehr. */
.v2-side-index { position: static; margin-top: 16px; }
.v2-register-index { position: static; }
.v2-usp-editorial > div:first-child,
.v2-faq-split > div:first-child,
.v2-sectors > div:first-child { position: static; }

/* --- Ablauf-Flow und Zeitlinie bleiben vertikal ------------------- */
.v2-flow { gap: 20px; }

/* --- Lead-Band: Formular unter dem Anspruch ----------------------- */
.v2-lead-band { border-radius: 24px; padding: 24px 20px 28px; }
/* Einspaltig: zwei Spalten zerhacken die Zeilen auf 390px in
   Dreiwortfragmente. */
.v2-lead-facts { grid-template-columns: 1fr; }

/* --- Produkt-Hero: Foto oben -------------------------------------
   Runde 6, Fehler: `display: flex` erbte `align-items: center` aus der
   Rasterform. In der Spaltenrichtung heisst das Querachse = Breite,
   der Bildkasten schrumpfte auf 0 — und das Produktfoto war auf allen
   13 Produktseiten mobil unsichtbar, an seiner Stelle stand eine
   320px hohe Luecke. Das Raster bleibt jetzt ein Raster. */
.v2-product-hero { align-items: stretch; gap: 20px; }
.v2-product-media {
  order: -1;
  min-height: 0;
  aspect-ratio: 4 / 3;
}
.v2-product-media img { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }

/* --- Register (Katalog): Zeilen kompakter ------------------------- */
.v2-register-row { padding-block: 14px; }


/* ================================================================== *
 * RUNDE 6 — Mobilpass der Subseiten
 *
 * Alles hier folgt derselben Beobachtung: die Sektionen waren nicht
 * kaputt, aber sie trugen ihre Desktop-Bauform weiter. Eine schmale
 * Spalte fuer eine Ordnungszahl, ein Innenabstand fuer eine Karte,
 * die dreimal so breit war — auf 390px kostet jede dieser Spalten
 * Textbreite, und Textbreite kostet Zeilenumbrueche.
 * ================================================================== */

/* --- Hero-Fakten als Feld statt als Kolonne -----------------------
   Vier Glaskacheln untereinander waren 350px Hero-Hoehe fuer vier
   Zahlen — der Hero endete erst nach eineinhalb Bildschirmen. Zwei
   Spalten halbieren das UND machen die Zahlen vergleichbar: sie
   stehen nebeneinander, nicht in einer Reihe hintereinander. */
.v2-subrail {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: clamp(20px, 3vh, 28px);
}
.v2-subrail > div { padding: 13px 14px 14px; border-radius: 12px; }
.v2-subrail strong { font-size: 1.375rem; letter-spacing: -0.035em; }
.v2-subrail span { margin-top: 3px; font-size: 0.75rem; line-height: 1.35; }
/* Eine ungerade letzte Kachel laesst kein Loch, sie nimmt die Zeile. */
.v2-subrail > div:last-child:nth-child(odd) { grid-column: span 2; }

/* --- Ordner-Panel: der Rahmen gibt Kartenbreite ab ----------------
   Der Innenabstand des Panels ist auf dem Telefon zweimal Kartenrand
   uebereinander. 14px reichen, damit das Blatt noch als Blatt liest,
   und geben jeder Karte 8px zurueck. */
.v2-folder-panel { padding: 14px 14px 16px; }
.v2-folder-panel .v2-filter-count { margin-bottom: 10px; }

/* --- USP-Zeilen: die Nummer nimmt keine Spalte mehr weg -----------
   56px Nummernspalte plus 18px Rinne sind ein Fuenftel der Zeile. Die
   Ordnungszahl setzt sich als Rubrik ueber die Ueberschrift — sie
   zaehlt weiter, kostet aber nichts mehr. */
.v2-usp-rows li { grid-template-columns: 1fr; gap: 2px; padding-block: 20px; }
.v2-usp-num { padding-top: 0; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.06em; }
.v2-usp-rows h3 { font-size: 1.125rem; }
.v2-usp-rows p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; }

/* --- Akkordeon: Nummer ueber den Titel, Chevron aussen ------------
   Dieselbe Rechnung wie bei den USP-Zeilen, dazu der Chevron auf der
   anderen Seite: dem Titel blieben 215px. Jetzt liegt die Nummer in
   der ersten Zeile derselben Spalte, der Chevron spannt ueber beide. */
.v2-acc summary {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 16px 16px 18px;
}
.v2-acc-num { grid-column: 1; grid-row: 1; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.06em; }
.v2-acc summary > span:not(.v2-acc-num) { grid-column: 1; grid-row: 2; }
.v2-acc summary > svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.v2-acc summary strong { font-size: 1rem; }
.v2-acc-body { padding: 0 16px 18px; }
.v2-acc-media img { height: 150px; }

/* --- Kopf-Links werden Zeilen mit Trefferflaeche ------------------
   Zwei Pfeil-Links standen als 20px hohe Textzeilen mit 24px Abstand
   im Raum: zu klein zum Treffen und ohne erkennbare Kante. Als
   getrennte Zeilen sind sie ueber die volle Breite anzutippen. */
.v2-guide-links { flex-direction: column; gap: 0; margin-top: 16px; }
.v2-guide-links > .v2-arrow-link {
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding-block: 6px;
  border-top: 1px solid var(--v2-border);
}
.v2-guide-links > .v2-arrow-link:last-child { border-bottom: 1px solid var(--v2-border); }

/* --- Branchenstreifen werden eine Schiene -------------------------
   Fuenf gestapelte 150px-Tafeln waren 780px Hero-Hoehe fuer eine
   Uebersicht, die unter der Ueberschrift nur einordnen soll — und
   danach folgt derselbe Stoff noch zweimal (Index und Kapitel). Als
   Schiene sagt der Anschnitt, dass es fuenf sind, und der erklaerende
   Satz, der im Stapel ausgeblendet werden musste, passt auf 288px
   Kartenbreite wieder hinein. */
.v2-strips {
  flex-direction: row;
  height: auto;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 40px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--v2-page-inset, 20px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Randlos ueber negative Margen in Gutter-Breite — ein Innenabstand
     wuerde den Anschnitt zerstoeren, der die Schiene ansagt. */
  margin-inline: calc(-1 * var(--v2-page-inset, 20px));
  padding-inline: var(--v2-page-inset, 20px);
}
.v2-strips::-webkit-scrollbar { display: none; }
.v2-strip,
.v2-strip.is-open {
  flex: 0 0 auto;
  width: min(74vw, 288px);
  height: 208px;
  scroll-snap-align: start;
}
.v2-strip-vert { display: none; }
.v2-strip-copy {
  opacity: 1;
  transform: none;
  left: 16px;
  right: 16px;
  bottom: 16px;
}
.v2-strip-copy strong { font-size: 1.0625rem; }
.v2-strip-copy span { display: block; margin-top: 6px; font-size: 0.8125rem; }

/* --- Der dunkle Abschluss reicht bis an die Bildschirmkante -------
   Neben dem Formular und seinem Absendeknopf stand links und rechts
   ein heller Streifen Seitenhintergrund — die Sektion wirkte dadurch
   schmaler als der Bildschirm, und der CTA sah eingerueckt aus,
   obwohl er die volle Formularbreite hat.

   Randlos wie jede Schiene: negative Margen in Seitenkanten-Breite,
   und derselbe Betrag als Innenabstand zurueck. Damit steht der Inhalt
   weiter auf der Fluchtlinie der uebrigen Seite — nur der dunkle Grund
   laeuft durch. */
.v2-close-lead,
.v2-lead-band {
  margin-inline: calc(-1 * var(--v2-page-inset, 20px));
  padding-inline: var(--v2-page-inset, 20px);
  border-radius: 0;
}

/* --- CTAs nehmen die Breite ---------------------------------------
   Ein 212px breiter Knopf, linksbuendig unter einem Absatz voller
   Breite, ist auf dem Telefon eine Restflaeche. Steht ein CTA allein
   in einem Block, spannt er ueber den Block — das ist gleichzeitig die
   groesstmoegliche Trefferflaeche.

   Zwei Ausnahmen, beides ZEILEN und keine Bloecke: der Daumen-Docker
   (drei Aktionen nebeneinander) und der Newsletter im Fuss (Feld und
   Knopf in einer Zeile). Die beiden Hero-CTAs stehen bewusst als
   gleich breites Paar in der Daumenzone (`.v2-hero-ctas`, Runde 5) und
   sind darueber schon auf 100 % ihrer Rasterspalte. */
.v2-btn { width: 100%; justify-content: center; }
.v2-dock .v2-btn,
.newsletter-form .v2-btn { width: auto; }
/* Volle Breite und `nowrap` vertragen sich auf 360px nicht bei jeder
   Beschriftung — der Text liefe aus dem Knopf. Er darf umbrechen, der
   Knopf waechst mit. */
.v2-btn {
  white-space: normal;
  height: auto;
  min-height: 46px;
  padding-block: 11px;
  text-align: center;
}
.v2-dock .v2-btn,
.newsletter-form .v2-btn { white-space: nowrap; }

/* --- Formulare: der Knopf nimmt die Breite ------------------------
   Ein 239px breiter Knopf links unter drei Feldern voller Breite ist
   auf dem Telefon kein Abschluss. Er spannt jetzt ueber das Formular
   und liegt damit auch dort, wo der Daumen ist.

   Dazu die Geometrie der Felder: 6px Radius und 46px Hoehe stammen aus
   der Zeile, in der ein Knopf neben anderen steht. Als letztes Glied
   einer Spalte aus 50px hohen Feldern mit 10px Radius liest sich das
   als Rest, nicht als Abschluss — der Knopf uebernimmt darum beide
   Werte. Ausserhalb von Formularen bleiben Knoepfe flach bei 6px.

   `body.v2 .v2-form` statt `.v2-form`: der Konter gegen style.min.css
   weiter oben (`body.v2 form button.v2-btn`, 0-2-2) setzt den Radius
   zurueck und schlaegt eine Regel mit nur zwei Klassen. Der Newsletter
   im Fuss traegt `.newsletter-form`, nicht `.v2-form` — die Zeile aus
   Feld und Knopf dort bleibt, wie sie ist. */
body.v2 .v2-form .v2-btn {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  border-radius: 10px;
}

/* --- Personen-Band: das Portraet bekommt ein Format ---------------
   `min-height: 360px` stammt aus der Nebeneinander-Form, wo das Bild
   die Hoehe des Textes halten muss. Untereinander wird daraus eine
   415px hohe Tafel — eine halbe Bildschirmhoehe fuer ein Portraet,
   das auch in 4:3 erkennbar bleibt. */
.v2-person-media img {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

/* --- Software-Duo: flacheres Bild --------------------------------
   16:10 ergibt auf voller Telefonbreite 209px Monitorfoto ueber vier
   Zeilen Text. Das Bild zeigt eine Oberflaeche, die in dieser Groesse
   ohnehin niemand liest — es soll einordnen, nicht fuehren. */
.v2-soft-card img { aspect-ratio: 16 / 8; }
.v2-soft-card-body { padding: 18px 18px 20px; }

/* --- FAQ-Karten: enger, aber offen --------------------------------
   Die Antworten bleiben sichtbar. Sie hinter ein zweites Akkordeon zu
   legen — eines steht auf denselben Seiten schon darueber — waere ein
   Antippen mehr fuer genau den Inhalt, wegen dem die Sektion da ist. */
.v2-faq-cards { gap: 10px; }
.v2-faq-card { padding: 18px 18px 20px; border-radius: 14px; }
.v2-faq-card h3 { font-size: 1rem; }
.v2-faq-card p { margin-top: 8px; line-height: 1.55; }

} /* Ende (max-width: 899px) */


/* ================================================================== *
 * DRAWER — Vollhoehen-Sheet statt weisser Liste (D6)
 *
 * Die Produktbilder klont v2.js aus dem vorhandenen Megamenue;
 * hier steht nur die Gestaltung.
 * ================================================================== */
@media (max-width: 1199px) {
.v2-drawer {
  position: fixed;
  inset: calc(var(--v2-nav-height, 80px) + 8px) var(--v2-nav-edge, 12px) 0;
  flex-direction: column;
  padding: 0;
  border-radius: 20px 20px 0 0;
  background: var(--v2-surface);
  box-shadow: 0 -2px 40px rgba(20, 24, 31, 0.16);
  overflow: hidden;
  overscroll-behavior: contain;
}
.v2-drawer.is-open { display: flex; }
.v2-drawer-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 20px calc(16px + var(--v2-safe-bottom, 0px));
  /* Die Liste scrollt, aber ohne sichtbare Leiste — auf dem Telefon
     ist der Balken ohnehin nur ein Strich im Weg. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.v2-drawer-scroll::-webkit-scrollbar { width: 0; height: 0; }
.v2-drawer-group { border-bottom: 1px solid var(--v2-border); padding: 4px 0; }
/* Der Gruppentitel tritt als Rubrik zurueck, damit die Eintraege
   darunter fuehren. Die beiden Ausnahmen sind noetig, weil auch die
   Untereintraege und die Anrufzeile direkte Kinder der Gruppe sind. */
.v2-drawer-group > a:not(.v2-drawer-sub):not(.v2-drawer-call) {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
}
/* Die Kategoriezeilen tragen jetzt das Produktfoto — dasselbe Muster
   wie das Desktop-Megamenue, damit man sieht, wovon die Rede ist,
   statt fuenf Woerter zu lesen. */
/* Die Basisregel steht als `.v2-drawer-group .v2-drawer-sub` in der
   Datei und gewinnt sonst den Spezifitaetsvergleich. */
.v2-drawer-group .v2-drawer-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 6px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--v2-ink);
}
/* Nur Zeilen mit echtem Produktfoto bekommen die Bildspalte. Riesenia
   und Aplikacie sind keine Maschinenkategorien und blieben sonst mit
   einem leeren grauen Kaestchen stehen. */
.v2-drawer-group .v2-drawer-sub.has-thumb { padding-left: 0; }
/* Name und Erklaerung untereinander — die Erklaerung kommt aus dem
   Megamenue, damit sie nur an einer Stelle gepflegt wird. */
.v2-drawer-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-drawer-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--v2-ink-strong);
}
.v2-drawer-note {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--v2-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-drawer-thumb {
  flex: none;              /* sonst schrumpft die Kachel im Flex */
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--v2-bg-subtle);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.v2-drawer-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  mix-blend-mode: multiply;
}

/* Kein fester Fuss mehr: Angebot und Katalog stehen im Daumen-Docker.
   Die Nummer aber steht unter Kontakt in der Liste — in derselben Form
   wie eine Kategoriezeile: Kachel links, Name und Erklaerung rechts.
   Die Kachel traegt Amber, damit die Zeile als Handlung lesbar ist und
   nicht als weiterer Wegweiser. */
.v2-drawer-callgroup { border-bottom: 0; }
.v2-drawer-group .v2-drawer-call {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 6px 0;
  text-decoration: none;
}
.v2-drawer-callicon {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--v2-accent-tint);
  color: var(--v2-accent-strong);
}
.v2-drawer-call .v2-drawer-name { color: var(--v2-accent-strong); }
.v2-drawer-call:active .v2-drawer-callicon { background: var(--v2-bg-subtle); }
}


/* ================================================================== *
 * DAUMEN-DOCKER — die wichtigste Aktion in der Daumenzone
 *
 * Erscheint nach dem Hero, taucht beim Abwaertsscrollen weg und kommt
 * beim Aufwaertsscrollen zurueck. Liegt fixiert ausserhalb des
 * Flusses und bewegt sich nur per transform — erzeugt also kein CLS.
 * Von v2.js erzeugt; hier steht nur die Gestaltung.
 * ================================================================== */
/* Der Docker ist eine schwebende Tafel, keine Leiste am Rand: gleiche
   Rundung und dieselbe durchscheinende Fuellung wie die Pille im Kopf
   (16px, Weiss bei 0.55 mit blur(16px)), damit oben und unten dieselbe
   Sprache sprechen. */
.v2-dock {
  position: fixed;
  left: var(--v2-nav-edge, 12px);
  right: var(--v2-nav-edge, 12px);
  bottom: calc(10px + var(--v2-safe-bottom, 0px));
  z-index: 60;
  display: none;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: rgb(255 255 255 / 0.62);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: 0 16px 40px rgba(10, 13, 18, 0.22);
  transform: translateY(calc(100% + 24px + var(--v2-safe-bottom, 0px)));
  transition: transform 280ms var(--v2-ease, cubic-bezier(0.42, 0, 0.2, 1));
}
@media (max-width: 899px) {
  .v2-dock { display: grid; }
  /* Der Docker schwebt ueber dem Seitenende. Ohne diesen Streifen laege
     er auf den Social-Symbolen im Fussbereich und man kaeme nicht mehr
     an sie heran. */
  .v2-footer-inner { padding-bottom: calc(96px + var(--v2-safe-bottom, 0px)); }
}
.v2-dock.is-visible { transform: translateY(0); }


/* ================================================================== *
 * SCHNELLANFRAGE — das Formular klappt ueber dem Docker auf
 *
 * Kein Seitenwechsel: Kategorie antippen, zwei Zeilen schreiben,
 * abschicken. Dieselbe Rundung und Fuellung wie der Docker darunter,
 * nur etwas dichter, weil hier gelesen und getippt wird.
 * Von v2.js erzeugt; hier steht nur die Gestaltung.
 * ================================================================== */
.v2-quick-veil {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(10, 13, 18, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--v2-ease);
}
.v2-quick-veil.is-open { opacity: 1; pointer-events: auto; }
.v2-quick {
  position: fixed;
  left: var(--v2-nav-edge, 12px);
  right: var(--v2-nav-edge, 12px);
  bottom: calc(84px + var(--v2-safe-bottom, 0px));
  z-index: 61;
  max-height: min(74svh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / 0.6);
  box-shadow: 0 24px 60px rgba(10, 13, 18, 0.3);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity 0.24s var(--v2-ease), transform 0.3s var(--v2-ease);
  scrollbar-width: none;
}
.v2-quick::-webkit-scrollbar { width: 0; height: 0; }
.v2-quick.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* Die Tafel bekommt beim Aufklappen den Fokus (statt eines Textfelds,
   das die Tastatur hochzoege) — ohne sichtbaren Rahmen um alles. */
body.v2 .v2-quick:focus,
body.v2 .v2-quick:focus-visible { outline: none; }
@media (min-width: 900px) {
  .v2-quick,
  .v2-quick-veil { display: none; }
}
/* Der Kopf klebt an der Oberkante der Tafel. Das Formular ist laenger
   als die Tafel hoch ist; ohne sticky schiebt das erste Tippen den Weg
   zurueck aus dem Bild. Die negativen Raender heben die 16px Fuellung
   der Tafel auf, damit die Leiste von Kante zu Kante traegt. */
.v2-quick-head {
  position: sticky;
  /* Die Fuellung der Tafel zaehlt beim Kleben mit; ohne den negativen
     Wert bliebe oben ein 16px breiter Streifen offen, durch den das
     Formular sichtbar durchliefe. */
  top: -16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -16px -16px 14px;
  padding: 16px 16px 10px;
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--v2-border);
  /* Der Kopf ist der Griff: nach unten ziehen schliesst die Tafel. Der
     Browser darf die Geste deshalb nicht als Rollen deuten. */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.v2-quick-head:active { cursor: grabbing; }
/* Der Balken sagt, dass hier gezogen werden kann. */
.v2-quick-head::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 38px;
  height: 4px;
  margin-left: -19px;
  border-radius: 999px;
  background: var(--v2-border);
}
.v2-quick .v2-quick-title {
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--v2-ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Zurueck zum eingeklappten Docker — kein blosses Kreuz, sondern ein
   Wort mit Pfeil. Ohne Rahmen und Fuellung: der Knopf steht neben dem
   Titel und soll ihn nicht ueberstimmen. */
.v2-quick-back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 6px 8px 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--v2-ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}
.v2-quick-back:hover { color: var(--v2-ink-strong); }
.v2-quick-back svg { flex: none; }
.v2-quick-form { gap: 12px; max-width: none; }
.v2-quick-cats { border: 0; padding: 0; margin: 0; min-width: 0; }
.v2-quick-cats legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-accent-strong);
}
/* Kategorien als Kacheln mit Produktfoto — dasselbe Bild wie in der
   Schublade und im Megamenue. Zwei Spalten, damit die langen Namen
   („Skriňové dávkovače a sklady") nicht in eine Pillenwueste zerfallen. */
.v2-quick-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.v2-quick-chip { min-width: 0; }
/* Bleibt in der letzten Reihe eine Kachel allein („Iné"), nimmt sie die
   ganze Breite — sonst steht dort ein Loch. */
.v2-quick-chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
.v2-quick-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.v2-quick-chip-in {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  border-radius: 14px;
  border: 1px solid var(--v2-border);
  background: rgb(255 255 255 / 0.72);
  cursor: pointer;
  transition:
    background-color 0.18s var(--v2-ease),
    border-color 0.18s var(--v2-ease),
    box-shadow 0.18s var(--v2-ease);
}
.v2-quick-chip-img {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--v2-bg-subtle);
  color: var(--v2-ink-soft);
  overflow: hidden;
}
.v2-quick-chip-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
  mix-blend-mode: multiply;
}
.v2-quick-chip-txt {
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--v2-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2-quick-chip input:checked + .v2-quick-chip-in {
  border-color: var(--v2-accent);
  background: rgb(255 255 255 / 0.96);
  box-shadow: inset 0 0 0 1px var(--v2-accent);
}
.v2-quick-chip input:checked + .v2-quick-chip-in .v2-quick-chip-txt {
  font-weight: 600;
  color: var(--v2-ink-strong);
}
.v2-quick-chip input:checked + .v2-quick-chip-in .v2-quick-chip-img {
  color: var(--v2-accent-strong);
}
.v2-quick-chip input:focus-visible + .v2-quick-chip-in {
  outline: 2px solid var(--v2-ink-strong);
  outline-offset: 2px;
}
.v2-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.v2-quick .v2-btn { width: 100%; justify-self: stretch; justify-content: center; }
.v2-quick .v2-quick-note {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}
.v2-quick-done { padding: 8px 0 4px; }
.v2-quick .v2-quick-done-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--v2-ink-strong);
  margin-bottom: 6px;
}
.v2-quick .v2-quick-done p { font-size: 0.875rem; color: var(--v2-ink-soft); }


/* ================================================================== *
 * Statement-Karussell ohne Bedienelemente
 *
 * Pfeile und Punkte sind entfallen; gezogen und gewischt wird direkt
 * am Blatt. Damit die Sektion per Tastatur bedienbar bleibt, ist die
 * Spur fokussierbar und hoert auf die Pfeiltasten (v2.js).
 * ================================================================== */
.v2-carousel-track:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 6px;
  border-radius: 18px;
}


/* ================================================================== *
 * ABSCHLUSS — Kategorie waehlen, Fragen klaeren, Angebot anfordern
 *
 * Die Auswahl oben steuert beides: den Verweis in der Fragenspalte
 * und das versteckte Kategoriefeld im Formular. Damit ist die
 * Sektion kein zweites Kontaktformular, sondern ein Abschluss, der
 * weiss, worueber der Nutzer gerade gelesen hat.
 *
 * Keine Kaesten, wo Linien reichen: die Fragen sind Zeilen mit
 * 1px-Trennern, nicht vier Karten.
 * ================================================================== */
.v2-close { background: var(--v2-bg); }

/* --- Kategorieauswahl im Anfrage-Panel ----------------------------
   Die Auswahl steht dort, wo sie wirkt: direkt ueber dem Formular,
   das sie mitschickt. Textknoepfe statt Bildkarten — das Bild
   darunter zeigt ohnehin, was gewaehlt wurde. */
.v2-pick { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.v2-pick-legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
}
.v2-pick-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 720px) {
  .v2-pick-grid { grid-template-columns: 1fr 1fr; }
}
/* Zwei Klassen, weil `.v2-form label { display: block }` sonst das
   Raster kippt und Bild, Text und Marke untereinander stellt. */
.v2-pick-grid .v2-pick-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 20px;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 400;
  transition: border-color 150ms var(--v2-ease, ease),
              background-color 150ms var(--v2-ease, ease);
}
.v2-pick-card:hover { border-color: rgba(255, 255, 255, 0.4); }
.v2-pick-card:active { transform: translateY(1px); }
/* Das Eingabefeld bleibt unsichtbar, aber bedienbar — der Fokusring
   liegt auf der Karte. */
.v2-pick-grid .v2-pick-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  min-height: 0;
}
.v2-pick-card:has(input:focus-visible) {
  outline: 2px solid var(--v2-accent);
  outline-offset: 2px;
}
.v2-pick-card:has(input:checked) {
  border-color: var(--v2-accent);
  background: rgba(230, 138, 30, 0.1);
}
/* Produktfotos haben einen weissen Fond und brauchen die helle
   Kachel — dasselbe Muster wie Maschinenkarten und Megamenue. */
.v2-pick-media {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--v2-bg-subtle);
  overflow: hidden;
}
.v2-pick-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  mix-blend-mode: multiply;
}
.v2-pick-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.v2-pick-name {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}
.v2-pick-note {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--v2-on-dark-soft, rgba(255,255,255,0.72));
}
.v2-pick-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: border-color 150ms var(--v2-ease, ease),
              border-width 150ms var(--v2-ease, ease);
}
.v2-pick-card:has(input:checked) .v2-pick-mark {
  border-color: var(--v2-accent);
  border-width: 5px;
}

/* --- Split: Fragen links, Anfrage rechts --------------------------
   Die Anfrage traegt die Produktauswahl und bekommt die groessere
   Haelfte: 40 zu 60. */
.v2-close-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 960px) {
  .v2-close-grid { grid-template-columns: 40fr 60fr; gap: 40px; align-items: start; }
}

/* Das freigestellte Portfoliobild fuellt den Raum, der unter den
   Fragen frei bleibt, weil die Anfragespalte laenger ist. Auf dem
   Telefon stehen die Spalten untereinander — dort gibt es keinen
   solchen Rest, also entfaellt das Bild. */
.v2-close-figure { display: none; }
@media (min-width: 960px) {
  .v2-close-figure {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 40px;
  }
}

.v2-close-faq > .v2-h4 { margin-bottom: 8px; }
.v2-close-q {
  border-top: 1px solid var(--v2-border);
}
.v2-close-q:last-of-type { border-bottom: 1px solid var(--v2-border); }
.v2-close-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
  cursor: pointer;
  list-style: none;
}
.v2-close-q summary::-webkit-details-marker { display: none; }
/* Plus, das sich beim Oeffnen zum Minus dreht. */
.v2-close-q summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--v2-accent), var(--v2-accent)) center/14px 2px no-repeat,
    linear-gradient(var(--v2-accent), var(--v2-accent)) center/2px 14px no-repeat;
  transition: transform 200ms var(--v2-ease, ease);
}
/* Offen wird aus dem Plus ein Minus: der senkrechte Strich faellt
   weg, der waagerechte bleibt stehen. */
.v2-close-q[open] summary::after { background-size: 14px 2px, 0 0; }
.v2-close-q > div { padding-bottom: 18px; }
.v2-close-q p { color: var(--v2-ink-soft); }
.v2-close-q p + p { margin-top: 10px; }
.v2-close-faq > .v2-arrow-link { margin-top: 24px; }

/* --- Anfrage: flacher Graphit, keine Glut ------------------------- */
.v2-close-lead {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--v2-radius-lg, 24px);
  background: var(--v2-dark-2);
}
.v2-close-lead h3 {
  margin-top: 10px;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  color: #fff;
}
.v2-close-lead .v2-form { margin-top: 24px; }
/* Die Zusagen stehen jetzt zwischen Feldern und Absendeknopf — dort,
   wo man sie vor dem Klick liest. */
.v2-close-lead .v2-lead-facts {
  margin: 8px 0 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Auf der breiten Spalte stehen die kurzen Felder paarweise, statt
   je eine Zeile mit halb leerer Flaeche zu belegen. */
@media (min-width: 960px) {
  .v2-close-lead .v2-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
    align-items: start;
  }
  .v2-close-lead .v2-form > .v2-pick,
  .v2-close-lead .v2-form > .v2-lead-facts,
  .v2-close-lead .v2-form > .v2-btn,
  .v2-close-lead .v2-form > .v2-lead-micro { grid-column: 1 / -1; }
  .v2-close-lead .v2-form > .v2-btn { justify-self: start; }
  /* Die drei Zusagen nebeneinander — untereinander verschenkten sie
     auf der breiten Spalte zwei Drittel der Zeile. */
  .v2-close-lead .v2-lead-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 24px;
  }
  .v2-close-lead .v2-lead-facts li { align-items: flex-start; }
}

@media (max-width: 899px) {
  .v2-close-lead { border-radius: 20px; padding: 24px 20px 28px; }
  .v2-close-q summary { font-size: 1rem; }
  /* Untereinander, damit Produktbild und Text lesbar bleiben. */
  .v2-pick-grid { grid-template-columns: 1fr; }
  .v2-pick-grid .v2-pick-card {
    grid-template-columns: 48px 1fr 18px;
    gap: 10px;
    padding: 10px 12px;
  }
  .v2-pick-media { width: 48px; height: 48px; }
  .v2-pick-name { font-size: 0.875rem; }
  .v2-pick-note { font-size: 0.75rem; }
}
.v2-dock-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--v2-bg-subtle);
  color: var(--v2-ink-strong);
  text-decoration: none;
}
.v2-dock-icon:active { background: var(--v2-border); }
.v2-dock .v2-btn { width: 100%; justify-content: center; height: 46px; }

/* ==========================================================================
   Sprievodca (Fachartikel)
   Bewusst wenig Eigenes: Index, Kennzahlen, Zeilen und FAQ kommen aus dem
   Bestand (.v2-sectors, .v2-side-index, .v2-facts-band, .v2-usp-rows,
   .v2-faq-split). Hier steht nur, was ein langer Lesetext zusaetzlich
   braucht: Absatzrhythmus, Gesetzeszitat, Quellenverweis.
   Keine farbigen Seitenkanten, keine Schatten, keine Kartenrahmen.
   ========================================================================== */

/* Meta-Zeile unter dem Lead: Hairline und Amber-Punkte, wie im Bestand. */
body.v2 .v2-art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  max-width: 68ch;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--v2-border);
  font-size: 0.875rem;
  color: var(--v2-ink-soft);
}
.v2-art-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.v2-art-meta > span + span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v2-accent);
  flex: none;
}
.v2-art-meta time { font-variant-numeric: tabular-nums; }

/* Lesespalte ------------------------------------------------------------ */
.v2-art-body > section { scroll-margin-top: calc(var(--v2-nav-height) + 24px); }
.v2-art-body > section + section { margin-top: var(--v2-space-sm); }
.v2-art-body h2 {
  max-width: 24ch;
  margin-bottom: 22px;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.v2-art-body h3 {
  margin-top: var(--v2-space-xs);
  margin-bottom: 12px;
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.25;
}
.v2-art-body > section > * + .v2-art-prose { margin-top: 26px; }
.v2-art-body > section > * + .v2-spec-table { margin-top: 26px; }
.v2-art-body > section > * + .v2-facts-band { margin-top: 26px; }

.v2-art-prose { max-width: 68ch; }
/* body.v2 vorangestellt: `body.v2 p { margin: 0 }` schlaegt sonst diese Regel. */
body.v2 .v2-art-prose > * + * { margin-top: 17px; }
body.v2 .v2-art-prose p {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--v2-ink);
}
.v2-art-prose strong { font-weight: 700; color: var(--v2-ink-strong); }
.v2-art-prose a:not(.v2-btn):not(.v2-cite) {
  color: var(--v2-ink-strong);
  text-decoration: underline;
  text-decoration-color: var(--v2-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* Aufzaehlungen: der Amber-Punkt des Systems, kein eigenes Bulletsystem. */
.v2-art-prose ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
/* Der Punkt sitzt absolut, damit <strong> im Text keine zweite Flex-Spalte
   aufmacht und die Zeile auseinanderzieht. */
.v2-art-prose ul li {
  position: relative;
  padding-left: 18px;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--v2-ink);
}
.v2-art-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v2-accent);
}

/* Quellenverweis: hochgestellte Ziffer, kein Chip. */
.v2-cite {
  color: var(--v2-accent-strong);
  font-size: 0.6875rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: super;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.v2-cite::before { content: "["; }
.v2-cite::after { content: "]"; }
.v2-cite:hover { text-decoration: underline; }

/* Gesetzeszitat: Hairlines und Eyebrow, kein Kasten und keine Seitenkante. */
.v2-art-quote {
  max-width: 68ch;
  margin-top: 26px;
  padding-block: 24px;
  border-top: 1px solid var(--v2-border);
  border-bottom: 1px solid var(--v2-border);
}
.v2-art-quote blockquote {
  margin: 14px 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--v2-ink-strong);
}
.v2-art-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--v2-ink-soft);
}

/* Praxishinweis: flache Flaeche, wie .v2-faq-card--subtle. */
.v2-art-note {
  max-width: 68ch;
  margin-top: 26px;
  padding: 24px 26px;
  border-radius: var(--v2-radius-md);
  background: var(--v2-bg-subtle);
}
body.v2 .v2-art-note p {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--v2-ink);
}

/* Bild im Lesefluss: gleiche Kachel wie im Split, auf Lesespaltenbreite. */
.v2-art-figure {
  max-width: 68ch;
  margin-top: 26px;
}
.v2-art-figure .v2-media-tile { aspect-ratio: 16 / 9; }
body.v2 .v2-art-figure figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}

/* Weitere Sprievodcovia als Karten mit Bild und Titel. Die Karte selbst ist
   die Bento-Karte der Startseite, hier nur das Raster dazu. */
.v2-art-guides {
  display: grid;
  gap: 16px;
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.v2-art-guides .v2-bento-card { min-height: 260px; }
/* Noch nicht geschriebene Sprievodcovia sind ehrlich gekennzeichnet und
   treten optisch zurueck, statt eine Verlinkung vorzutaeuschen. */
.v2-art-guide-soon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.v2-art-guide-soon::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v2-accent-on-dark);
}

/* Quellenverzeichnis: dichter als die Kontrollliste, damit die beiden
   nummerierten Listen im Artikel nicht gleich aussehen. Zehn Belege sind
   ein Apparat zum Nachschlagen, keine Leseliste. */
.v2-art-sources {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  counter-reset: v2-src;
  border-top: 1px solid var(--v2-border);
}
.v2-art-sources li {
  counter-increment: v2-src;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding-block: 13px;
  border-bottom: 1px solid var(--v2-border);
  scroll-margin-top: calc(var(--v2-nav-height) + 24px);
}
.v2-art-sources li::before {
  content: counter(v2-src, decimal-leading-zero);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--v2-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.v2-art-sources li:target .v2-art-source-title { color: var(--v2-accent-strong); }
body.v2 .v2-art-source-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--v2-ink-strong);
}
body.v2 .v2-art-source-meta {
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--v2-ink-soft);
  word-break: break-word;
}
.v2-art-source-meta a { color: var(--v2-ink-soft); text-decoration: underline; }
.v2-art-source-meta a:hover { color: var(--v2-ink-strong); }


/* ================================================================== *
 * Cookie-Einwilligung
 *
 * Eine Tafel, die von unten aufsteigt. Nicht modal und ohne
 * Verdunklung: der Seitenkopf bleibt lesbar, waehrend man entscheidet.
 * Blockieren muss sie nichts, weil vor der Entscheidung ohnehin kein
 * Cookie gesetzt wird.
 *
 * Ab 900 px steht sie rechts unten, weil Ueberschrift und Knoepfe im
 * Seitenkopf links sitzen. Darunter nimmt sie die volle Breite.
 *
 * Ablehnen und Annehmen sind DERSELBE Knopf-Typ, gleich breit,
 * nebeneinander. Waere einer der beiden amber, waere die Wahl optisch
 * vorbelegt. Amber bleibt dem Schalter vorbehalten, wo es einen
 * Zustand anzeigt und keine Empfehlung.
 * ================================================================== */
.v2-cc {
  position: fixed;
  z-index: 120;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.v2-cc-panel {
  position: relative;
  pointer-events: auto;
  width: 100%;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 24px 22px 20px;
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-md);
  box-shadow: var(--v2-shadow-lg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 240ms var(--v2-ease), transform 240ms var(--v2-ease);
}
.v2-cc.is-open .v2-cc-panel { opacity: 1; transform: none; }
body.v2 .v2-cc-panel:focus,
body.v2 .v2-cc-panel:focus-visible { outline: none; }

@media (min-width: 900px) {
  .v2-cc { left: 24px; right: 24px; bottom: 24px; }
  .v2-cc-panel {
    width: min(440px, 100%);
    padding: 26px 26px 22px;
    max-height: calc(100dvh - 48px);
  }
}

.v2-cc-panel h2 {
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 5px;
}
body.v2 .v2-cc-lead {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--v2-ink-soft);
}

.v2-cc-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--v2-radius-xs);
  background: transparent;
  color: var(--v2-ink-soft);
  cursor: pointer;
  transition: background 150ms var(--v2-ease), color 150ms var(--v2-ease);
}
.v2-cc-x:hover { background: var(--v2-bg-subtle); color: var(--v2-ink-strong); }

/* Zeilen mit 1-px-Trennern statt Karten im Karton. */
.v2-cc-rows { margin-top: 16px; border-top: 1px solid var(--v2-border); }
.v2-cc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--v2-border);
}
body.v2 .v2-cc-row-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--v2-ink-strong);
}
body.v2 .v2-cc-row-desc {
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--v2-ink-soft);
}
.v2-cc-always {
  align-self: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v2-ink-soft);
  white-space: nowrap;
}

/* Schalter: der einzige Ort in der Tafel, an dem Amber vorkommt, und
   dort zeigt es einen Zustand an, keine Empfehlung. */
.v2-cc-switch {
  align-self: center;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}
.v2-cc-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.v2-cc-track {
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: var(--v2-border);
  transition: background 150ms var(--v2-ease);
}
.v2-cc-track::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 3px;
  border-radius: 50%;
  background: var(--v2-surface);
  transition: transform 150ms var(--v2-ease);
}
.v2-cc-switch input:checked + .v2-cc-track { background: var(--v2-accent); }
.v2-cc-switch input:checked + .v2-cc-track::after { transform: translateX(18px); }
.v2-cc-switch input:focus-visible + .v2-cc-track {
  outline: 2px solid var(--v2-accent-strong);
  outline-offset: 2px;
}

.v2-cc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 18px;
}
.v2-cc-actions .v2-btn { width: 100%; }
.v2-cc-wide { grid-column: 1 / -1; }

.v2-cc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
}
body.v2 .v2-cc-links a {
  font-size: 0.8125rem;
  color: var(--v2-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.v2 .v2-cc-links a:hover { color: var(--v2-ink-strong); }


/* Verkleinerter Zustand: ein Streifen statt der ganzen Tafel. Er
   verschwindet nicht, denn ohne Entscheidung gibt es keinen Nachweis.
   Der naechste Klick auf der Seite holt die Tafel zurueck. */
.v2-cc-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* Dieselben Werte wie die aktive Kachel unter dem Seitenkopf:
     440 px breit, Radius 14 px, milchiges Weiss mit Unschaerfe
     dahinter, dunkler Text, kein Rahmen und kein Schatten. */
  width: min(440px, 100%);
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(20, 24, 29);
  cursor: pointer;
  transition: background 150ms var(--v2-ease);
}
.v2-cc-pill:hover { background: rgba(255, 255, 255, 0.62); }
.v2-cc-pill:active { transform: translateY(1px); }
.v2-cc-pill svg { color: var(--v2-accent-strong); }

@media (max-width: 599px) {
  .v2-cc-actions { grid-template-columns: 1fr; }
  .v2-cc-panel { padding: 20px 18px 16px; }
  .v2-cc-rows { margin-top: 14px; }
  .v2-cc-row { padding: 11px 0; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-cc-panel { transition: none; transform: none; }
}


/* ================================================================== *
 * WEICHES AUFKLAPPEN — alles, was aufgeht, laeuft statt zu springen
 *
 * Das Akkordeon konnte es schon: `interpolate-size` erlaubt den Weg
 * von 0 nach `auto`, `::details-content` ist die Flaeche, die dabei
 * waechst. Dieselbe Technik gilt jetzt fuer die FAQ-Zeilen und die
 * Fragen im Ratgeber. Das Megamenue faehrt bereits herunter (siehe
 * `.v2-mega-panel`), die Schublade bekommt hier dieselbe Bewegung.
 * Browser ohne `::details-content` oeffnen wie bisher sofort — die
 * Klappen bleiben also in jedem Fall bedienbar.
 * ================================================================== */
body.v2 { interpolate-size: allow-keywords; }
/* Alle Klappen der Seite ausser dem Akkordeon, das seine eigene, auf
   die hohen Bildtafeln abgestimmte Dauer behaelt. */
body.v2 details:not(.v2-acc-item)::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size 0.34s var(--v2-ease), content-visibility 0.34s allow-discrete;
}
body.v2 details:not(.v2-acc-item)[open]::details-content { block-size: auto; }

/* Die Schublade wechselt `display`, deshalb `allow-discrete` und ein
   `@starting-style`: ohne Anfangswert gaebe es nichts zu laufen. */
@media (max-width: 1199px) {
  .v2-drawer {
    opacity: 0;
    transform: translateY(-10px);
    transition:
      opacity 0.22s var(--v2-ease),
      transform 0.28s var(--v2-ease),
      display 0.28s allow-discrete;
  }
  .v2-drawer.is-open { opacity: 1; transform: translateY(0); }
  @starting-style {
    .v2-drawer.is-open { opacity: 0; transform: translateY(-10px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v2 details::details-content,
  .v2-drawer,
  .v2-quick,
  .v2-quick-veil,
  .v2-dock { transition-duration: 0.01ms; }
}