/* unoesim Website V2 — gebündelt aus fonts.css + tokens.css + components.css + page.css
   (Etappe 9, 14.07.2026 — Lighthouse zeigte 4 serielle render-blocking Stylesheets als
   Hauptbremse fürs Erstrender; alle nur hier in website-v2 genutzt, sicher zu bündeln.
   Kein Build-Schritt (bewusst, Masterbrief) — das hier ist die einzige Quelle, nicht generiert. */

/* ========== fonts.css ========== */
/* unoesim fonts — self-hosted. Generated from Google Fonts (Onest variable 400-800, Nunito italic variable 500-900). */

/* onest cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(design/fonts/onest-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* onest cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(design/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

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

/* nunito-italic cyrillic-ext */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 500 900;
  font-display: swap;
  src: url(design/fonts/nunito-italic-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* nunito-italic cyrillic */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 500 900;
  font-display: swap;
  src: url(design/fonts/nunito-italic-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

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

/* ========== tokens.css ========== */
/* unoesim design tokens v2.0.0 — GENERATED from tokens.json (2026-07-02).
   Do not edit by hand. Edit tokens.json, then: node design-system/tokens/build.mjs */

:root {
  /* --- Farben: Primitive (Namen aus docs/brand/farbentscheidung-final.md) --- */
  --uno-ultramarin: #0D2FBF;
  --uno-tief: #081F85;
  --uno-schleier: #DDE4FB;
  --uno-tinte: #10131E;
  --uno-nebel: #F2F4FA;
  --uno-papier: #FFFFFF;
  --uno-erfolg: #157F3D;
  --uno-warnung: #B3412C;

  /* --- Farben: abgeleitet (Mischungen, berechnet) --- */
  --uno-text-muted: #66686F;
  --uno-text-faint: #7E8086;
  --uno-border: #E2E3E4;
  --uno-border-strong: #C6C6C9;
  --uno-erfolg-flaeche: #ECF5EF;
  --uno-warnung-flaeche: #F9F0EE;
  --uno-schleier-tief: #C5CDF0;
  --uno-papier-auf-tinte-muted: #AEAFB3;

  /* --- Farben: semantisch (in Komponenten NUR diese verwenden) --- */
  --color-bg: var(--uno-papier);
  --color-bg-dark: var(--uno-tinte);
  --color-surface: var(--uno-nebel);
  --color-text: var(--uno-tinte);
  --color-brand: var(--uno-ultramarin);
  --color-brand-pressed: var(--uno-tief);
  --color-veil: var(--uno-schleier);
  --color-success: var(--uno-erfolg);
  --color-warning: var(--uno-warnung);
  --color-text-on-brand: var(--uno-papier);
  --color-text-on-dark: var(--uno-papier);
  --color-text-muted: var(--uno-text-muted);
  --color-text-faint: var(--uno-text-faint);
  --color-border: var(--uno-border);
  --color-border-strong: var(--uno-border-strong);
  --color-erfolg-flaeche: var(--uno-erfolg-flaeche);
  --color-warnung-flaeche: var(--uno-warnung-flaeche);
  --color-schleier-tief: var(--uno-schleier-tief);
  --color-papier-auf-tinte-muted: var(--uno-papier-auf-tinte-muted);

  /* --- Schrift --- */
  --font-ui: 'Onest', -apple-system, 'Segoe UI', sans-serif;
  --font-logo-echo: 'Nunito', var(--font-ui);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* --- Typo-Skala --- */
  --text-display-size: 3.5rem;
  --text-display-line: 1.05;
  --text-display-weight: 800;
  --text-display-tracking: -0.02em;
  --text-h1-size: 2.5rem;
  --text-h1-line: 1.1;
  --text-h1-weight: 800;
  --text-h1-tracking: -0.015em;
  --text-h2-size: 1.875rem;
  --text-h2-line: 1.15;
  --text-h2-weight: 700;
  --text-h2-tracking: -0.01em;
  --text-h3-size: 1.375rem;
  --text-h3-line: 1.25;
  --text-h3-weight: 700;
  --text-h3-tracking: 0;
  --text-lead-size: 1.1875rem;
  --text-lead-line: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: 0;
  --text-body-size: 1rem;
  --text-body-line: 1.55;
  --text-body-weight: 400;
  --text-body-tracking: 0;
  --text-small-size: 0.875rem;
  --text-small-line: 1.45;
  --text-small-weight: 400;
  --text-small-tracking: 0;
  --text-caption-size: 0.78125rem;
  --text-caption-line: 1.4;
  --text-caption-weight: 500;
  --text-caption-tracking: 0.01em;
  --text-price-size: 1.625rem;
  --text-price-line: 1.1;
  --text-price-weight: 800;
  --text-price-tracking: -0.01em;

  /* --- Abstände (4px-Basis) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* --- Radien --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* --- Schatten (Tinte-getönt, weich) --- */
  --shadow-sm: 0 1px 2px rgba(16,19,30,0.06);
  --shadow-md: 0 2px 8px rgba(16,19,30,0.07), 0 8px 24px rgba(16,19,30,0.06);
  --shadow-lg: 0 4px 12px rgba(16,19,30,0.08), 0 16px 48px rgba(16,19,30,0.10);

  /* --- Motion --- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* Breakpoints (Referenz — in Media Queries direkt verwenden):
   sm = 480px
   md = 768px
   lg = 1024px
   xl = 1280px */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ========== components.css ========== */
/* unoesim Komponenten-Referenz v2 — baut ausschließlich auf tokens.css auf.
   Import-Reihenfolge: fonts.css → tokens.css → components.css */

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); }

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

:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.u-container { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-5); }
.u-muted { color: var(--color-text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 48px;
  padding-inline: var(--space-6);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--color-brand); color: var(--color-text-on-brand); }
.btn--primary:hover { background: var(--color-brand-pressed); box-shadow: var(--shadow-sm); }
.btn--primary:active { background: var(--color-brand-pressed); box-shadow: none; }

.btn--secondary { background: var(--color-veil); color: var(--color-brand); }
.btn--secondary:hover { background: var(--color-schleier-tief); }

.btn--quiet { background: transparent; color: var(--color-brand); }
.btn--quiet:hover { background: var(--color-veil); }

.btn--on-dark { background: var(--color-bg); color: var(--color-brand); }
.btn--on-dark:hover { background: var(--color-surface); }

.btn--quiet-on-dark { background: transparent; color: var(--color-text-on-dark); }
.btn--quiet-on-dark:hover { background: rgba(255, 255, 255, 0.14); }

.btn--lg { height: 56px; padding-inline: var(--space-7); font-size: var(--text-lead-size); }
.btn--sm { height: 38px; padding-inline: var(--space-4); font-size: var(--text-small-size); }

.btn:disabled, .btn[aria-disabled='true'] {
  background: var(--color-surface);
  color: var(--color-text-faint);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- Karten ---------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card--flat { background: var(--color-surface); border: none; box-shadow: none; }
.card--lift {
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.card--lift:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---------- Preiszeilen ---------- */
.price-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.price-row:hover { border-color: var(--color-brand); }
.price-row--selected {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  background: var(--color-surface);
}

.price-row__flag {
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.price-row__body { flex: 1; min-width: 0; }
.price-row__title { font-weight: var(--weight-semibold); }
.price-row__meta { font-size: var(--text-small-size); color: var(--color-text-muted); }
.price-row__price {
  font-size: var(--text-price-size);
  font-weight: var(--text-price-weight);
  letter-spacing: var(--text-price-tracking);
  color: var(--color-brand);
  white-space: nowrap;
}
.price-row__per { font-size: var(--text-caption-size); color: var(--color-text-muted); text-align: right; }

/* ---------- Formulare ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-small-size); font-weight: var(--weight-medium); }
.field__hint { font-size: var(--text-caption-size); color: var(--color-text-muted); }
.field__error { font-size: var(--text-caption-size); color: var(--color-warning); font-weight: var(--weight-medium); }

.input, .select {
  height: 48px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-veil);
}
.input--error { border-color: var(--color-warning); }
.input--error:focus { box-shadow: 0 0 0 3px var(--color-warnung-flaeche); }

/* ---------- Chips / Badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--text-caption-tracking);
}
.chip--success { background: var(--color-erfolg-flaeche); color: var(--color-success); }
.chip--warning { background: var(--color-warnung-flaeche); color: var(--color-warning); }

/* ---------- Hinweise ---------- */
.notice {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}
.notice[hidden] { display: none; } /* .notice's eigenes display:flex überschreibt sonst [hidden] */
.notice--success { background: var(--color-erfolg-flaeche); color: var(--color-success); }
.notice--warning { background: var(--color-warnung-flaeche); color: var(--color-warning); }
.notice--info { background: var(--color-veil); color: var(--color-brand); }
.notice strong { font-weight: var(--weight-bold); }

/* ---------- Verbrauchsbalken (80 % / 100 %-Hinweise) ---------- */
.usage {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.usage__track {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  overflow: hidden;
}
.usage__fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  transition: width var(--duration-slow) var(--ease-standard);
}
.usage--warn .usage__fill { background: var(--color-warning); }
.usage__label {
  display: flex; justify-content: space-between;
  font-size: var(--text-caption-size); color: var(--color-text-muted);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  height: 64px;
}
.site-header__logo { height: 26px; display: block; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-6); }
.site-header__link {
  color: var(--color-text);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
}
.site-header__link:hover { color: var(--color-brand); text-decoration: none; }

/* ---------- Sprachwahl (Flagge oben in der Leiste) ---------- */
.lang-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 38px; padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.lang-btn:hover { border-color: var(--color-brand); }
.lang-btn__flag { font-size: 18px; line-height: 1; }

.lang-overlay {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  max-width: 420px;
}
.lang-overlay__title { font-size: var(--text-h3-size); font-weight: var(--weight-bold); margin-bottom: var(--space-4); }
.lang-overlay__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.lang-option {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.lang-option:hover { background: var(--color-surface); }
.lang-option--active {
  background: var(--color-veil);
  border-color: var(--color-brand);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
}

/* ---------- Footer (dunkle Sektion) ---------- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-9);
}
.site-footer :focus-visible { outline-color: var(--color-text-on-dark); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-8);
}
.site-footer__brand img { height: 28px; }
.site-footer__col h3 { font-size: var(--text-small-size); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.site-footer__col a {
  display: block;
  color: var(--color-papier-auf-tinte-muted);
  font-size: var(--text-small-size);
  padding-block: var(--space-1);
}
.site-footer__col a:hover { color: var(--color-text-on-dark); }
.site-footer__legal {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-caption-size);
  color: var(--color-papier-auf-tinte-muted);
}

@media (max-width: 768px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .lang-overlay__grid { grid-template-columns: 1fr; }
}

/* ========== page.css (Seiten-eigene Styles) ========== */
/* unoesim Website V2 — Startseite (Konzept-Stand). Baut auf tokens.css + components.css. */

:root {
  --glass-tint: rgba(255, 255, 255, 0.13);
  --glass-border: rgba(255, 255, 255, 0.28);
  --glass-rim-hi: rgba(255, 255, 255, 0.55);
  --glass-rim-lo: rgba(255, 255, 255, 0.35);
  --hero-text-soft: rgba(255, 255, 255, 0.78);
  --on-dark-hairline: rgba(255, 255, 255, 0.14);
  --z-header: 50;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
/* Statusleisten-Bereich am iPhone (Bujar 28./30.07., nach Geraete-Recherche + Tests):
   Safari 26 wertet <meta name="theme-color"> NICHT mehr aus, sondern leitet die Farbe
   aus dem CSS ab — bevorzugt aus dem obersten FIXEN Element mit background-color,
   ersatzweise aus <body>.
   ENTSCHEIDUNG NACH statusfarbe-test2.html: <body> ist die einzige Quelle. Aenderungen
   daran uebernimmt Safari zuverlaessig (Test 2: body wechselt per JS alle 2 s, die
   Statusleiste geht mit — ohne Scrollen). Ein fixes Element oben ist dagegen eine Falle:
   Safari macht es zur Quelle und faellt spaeter NICHT auf body zurueck, wenn es
   transparent oder verdeckt wird — die Leiste bleibt dann auf dem letzten Wert stehen.
   ⚠️ Deshalb darf oben NICHTS ausser <body> eine background-color tragen.
   Und: Die Farbe wechselt NUR in Scroll-Ruhe (page.js, commitTopColor) — ein Wechsel
   waehrend der Bewegung konnte Safaris eigene Ueberblendung auf halbem Weg einfrieren
   (der stehen bleibende Graublau-Ton). Darum haengt hier bewusst KEINE Farb-Regel mehr
   an .header-solid: die Klasse springt mitten im Scrollen um. Einzige Regel ist die
   Grundfarbe vor dem ersten JS-Lauf; alles Weitere setzt page.js als Inline-Stil. */
body.hero-sky { background-color: #0F3F85; }
/* Die kurze Ueberblendung ist PFLICHT — sie ist der Unterschied zwischen der
   funktionierenden Testseite (statusfarbe-test2.html, 120ms linear, Statusleiste folgt
   zuverlaessig) und der echten Seite (harter Sprung, Safari fror auf halbem Weg ein).
   Safari fuehrt seine eigene Statusleisten-Ueberblendung nur weiter, solange die Seite
   neu zeichnet: 120ms Transition = 120ms fortlaufende Frames = Safaris Blend kommt an.
   Ein harter Sprung ist EIN Frame — Safari blieb im Mischton stehen ("ekliges Blau").
   120ms sind kurz genug, dass in Scroll-Ruhe (nur dann wird gewechselt, page.js)
   nichts dazwischenfunken kann. */
body { transition: background-color 120ms linear; }

/* Der 4px-Streifen ist die EINZIGE deterministische Farbquelle fuer die Statusleiste —
   und er liegt bewusst UEBER dem Header (z-index ueber --z-header).
   Der finale Befund (Bujar 30.07. nachts, "schnell = weiss / langsam = graublau"):
   Safari sampelt die oberste unverdeckte fixe Flaeche SO WIE SIE GERENDERT ist. Die
   weich einblendende Glasleiste ist beim langsamen Scrollen sekundenlang halb-
   transparent — halbweiss ueber blauem Himmel ergibt exakt den eingefrorenen
   Graublau-Ton. Verschwindet die gesampelte Flaeche wieder (oben angekommen), faellt
   Safari NICht auf body zurueck, sondern behaelt den letzten Wert.
   Der Streifen loest das: immer 100% deckend, kennt nur Blau ODER Weiss, liegt ueber
   dem Glas und ist damit immer das, was Safari sieht.
   Sichtbarkeit: oben faerbt .sky-bg::before den Himmel exakt auf diesen Ton (von Bujar
   bestaetigt: keine Kante); gescrollt liegt Weiss auf weisser Leiste. Waehrend der
   Einblendphase liegt der blaue Streifen direkt unter der noch blauen Statusleiste —
   er wirkt als deren Unterkante. */
#uiTint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 60;               /* UEBER --z-header (50): nichts darf ihn verdecken */
  pointer-events: none;
  background-color: #0F3F85;
}
body.header-solid #uiTint { background-color: var(--color-bg); }
body.cap-mode #uiTint { display: none; }  /* Screenshot-Modus blendet den Header aus */
/* Frame-Pumpe (Bujar 30.07. nachts, letzter Baustein): Beim GANZ langsamen Scrollen
   entstehen kaum Neuzeichnungen — Safaris eigene Statusleisten-Ueberblendung bekommt
   nach dem Umschalten zu wenige Frames und friert als Graublau ein. Diese Animation
   pendelt nach jedem Wechsel ~0,9s zwischen zwei Toenen im Abstand 1/255 (unsichtbar)
   und erzwingt so kontinuierliche Frames, bis Safaris Blend angekommen ist.
   animation-name haengt an der Klasse -> startet bei jedem Umschalten automatisch neu.
   Endet exakt auf dem Zielwert. */
@keyframes tintPumpBlue {
  0%   { background-color: #0F3F86; }
  20%  { background-color: #0F3F85; }
  40%  { background-color: #0F3F86; }
  60%  { background-color: #0F3F85; }
  80%  { background-color: #0F3F86; }
  100% { background-color: #0F3F85; }
}
@keyframes tintPumpWhite {
  0%   { background-color: #FEFEFE; }
  20%  { background-color: #FFFFFF; }
  40%  { background-color: #FEFEFE; }
  60%  { background-color: #FFFFFF; }
  80%  { background-color: #FEFEFE; }
  100% { background-color: #FFFFFF; }
}
body:not(.header-solid) #uiTint { animation: tintPumpBlue 0.9s linear; }
body.header-solid #uiTint { animation: tintPumpWhite 0.9s linear; }
#page-home { position: relative; } /* Anker für den durchgehenden Himmel (.sky-bg) — gezielt
  auf die Startseite gescoped (Review-Fund): seit dem Router-Landmark-Fix gibt es 4 weitere
  <main>, ein bloßer Tag-Selektor würde denen unbeabsichtigt denselben Containing-Block geben */
/* Anker-Sprünge (Menü/Nav/Footer) landen UNTER dem fixen Header, nicht dahinter —
   sonst schob sich z. B. die Suchleiste über die Kategorie-Tabs (Bujar 19.07.) */
main section[id] { scroll-margin-top: 84px; }

.flag-svg svg, [data-flag] svg { width: 100%; height: 100%; display: block; }

/* ---------- Header ---------- */
.site-top {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  /* Wirkt nur als Homescreen-Webapp; im normalen Safari-Tab ist der Wert korrekt 0,
     weil der Viewport dort erst unterhalb der Statusleiste beginnt. NICHT durch feste
     Pixel ersetzen — sonst waere der Header im Browser zu hoch. */
  padding-top: env(safe-area-inset-top, 0px);
  /* ⚠️ NIEMALS eine background-color auf dem Header selbst (Bujar 30.07., mehrfach
     belegt): Er ist fix und ganz oben — mit Hintergrundfarbe macht Safari IHN zur
     Quelle fuer die Statusleiste und behaelt Weiss, sobald er wieder transparent wird.
     Das Weiss liefert .site-top::after (deckend, schiebt herein). */
  background: none;
}
/* VERWORFEN (Bujar 30.07. nachts): Die weisse Flaeche als deckendes Element von oben
   hereinschieben zu lassen (translateY) waere fuer Safari ideal — nie ein Mischton.
   Optisch aber unbrauchbar: eine harte weisse Kante wandert quer durch den Header und
   schneidet Logo und Navigation an. Nicht erneut versuchen. */
/* Weisse Kopfleiste + Milchglas. Die Deckkraft kommt 1:1 aus der Scroll-Position
   (--head-p, gesetzt in page.js) statt aus einer Schwelle mit 200ms-Ueberblendung.
   Zwei Gruende (Bujar 30.07. abends):
   1. Es fuehlt sich fluessig an — die Leiste folgt dem Scrollen, statt zu springen
      (Apple-Prinzip: Feedback laeuft WAEHREND der Geste, nicht erst am Ende).
   2. Eine Ueberblendung mit fester Dauer lief dem Scrollen hinterher. Beim schnellen
      Hochscrollen stand oben deshalb noch Weiss, wenn Safari die Statusleisten-Farbe
      las — daher "schnell = weiss, langsam = blau". Scroll-gekoppelt gibt es keinen
      Nachlauf: ganz oben ist die Flaeche im selben Moment weg.
   ⚠️ ENTSCHEIDUNG Bujar 30.07. nachts ("Farbe muss stimmen"): KEINE halbtransparente
   Phase mehr. Das war die Wurzel des Graublaus — waehrend eines weichen Aufblendens ist
   der obere Bereich sekundenlang "halbweiss ueber blauem Himmel", und genau diesen
   Mischton friert Safari ein (beim ganz langsamen Scrollen zuverlaessig, weil die Phase
   dann lange genug dauert). Ein deckender Streifen darueber half nicht: Safari mittelt
   offenbar einen groesseren Bereich, nicht nur das oberste Element.
   Deshalb: Die Flaeche ist ENTWEDER ganz weg ODER voll deckend weiss — nie dazwischen.
   Weich bleibt nur, was keine Farbe beimischt: Unschaerfe und Trennlinie (siehe unten).
   ⚠️ Das Weiss ist ein VERLAUF statt background-color, und visibility schaltet im
   Ruhezustand hart ab — beides zusaetzliche Absicherung, damit diese Flaeche Safari
   nie als Farbquelle dient (wie damals bei .search-veil). */
.site-top__glass {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
  pointer-events: none;
  background-image: linear-gradient(var(--color-bg), var(--color-bg));
  /* Unschaerfe + Trennlinie folgen weich dem Scrollen — sie mischen kein Weiss bei und
     sind fuer Safaris Farbermittlung unbedenklich. */
  backdrop-filter: blur(calc(var(--head-p, 0) * 14px));
  -webkit-backdrop-filter: blur(calc(var(--head-p, 0) * 14px));
  box-shadow: inset 0 -1px 0 rgba(15, 23, 42, calc(var(--head-p, 0) * 0.1));
}
/* Voll deckend, sobald umgeschaltet wird — kein Zwischenwert (head-full statt head-on). */
.site-top.head-full .site-top__glass { visibility: visible; }
.site-top__inner {
  position: relative;  /* ueber .site-top__glass, das absolut darunter liegt */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 68px;
}
.site-top__brand { display: inline-flex; align-items: center; }
/* 19.07. (Bujar, wiederholt gewünscht): Logo größer — 24px wirkte verloren */
.site-top__brand img { height: 30px; width: auto; aspect-ratio: 1599 / 509; display: block; }
.site-top .logo-light { display: none; }
.site-top__nav { display: flex; gap: var(--space-6); }
.site-top__nav a {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.site-top__nav a:hover { color: var(--color-text); text-decoration: none; }
.site-top__actions { display: flex; align-items: center; gap: var(--space-3); }

.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 38px;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72); /* Fallback für Safari < 16.2 */
  background: color-mix(in srgb, #fff 72%, transparent);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.lang-pill__icon { flex-shrink: 0; }
.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.72); /* Fallback für Safari < 16.2 */
  background: color-mix(in srgb, #fff 72%, transparent);
  color: var(--color-text);
}
.wa-btn:hover { text-decoration: none; background: #fff; }

/* Varianten B (dunkel) + C (Himmel) — Header hell auf Blau */
.hero-dark .site-top:not(.scrolled) .logo-dark,
.hero-sky .site-top:not(.scrolled) .logo-dark { display: none; }
.hero-dark .site-top:not(.scrolled) .logo-light,
.hero-sky .site-top:not(.scrolled) .logo-light { display: block; }
.hero-dark .site-top:not(.scrolled) .site-top__nav a,
.hero-sky .site-top:not(.scrolled) .site-top__nav a { color: var(--hero-text-soft); }
.hero-dark .site-top:not(.scrolled) .site-top__nav a:hover,
.hero-sky .site-top:not(.scrolled) .site-top__nav a:hover { color: #fff; }
.hero-dark .site-top:not(.scrolled) .lang-pill,
.hero-dark .site-top:not(.scrolled) .wa-btn,
.hero-dark .site-top:not(.scrolled) .menu-btn,
.hero-sky .site-top:not(.scrolled) .lang-pill,
.hero-sky .site-top:not(.scrolled) .wa-btn,
.hero-sky .site-top:not(.scrolled) .menu-btn {
  border-color: var(--glass-border);
  background: var(--glass-tint);
  color: #fff;
}
.hero-dark .site-top:not(.scrolled) .wa-btn:hover,
.hero-dark .site-top:not(.scrolled) .menu-btn:hover,
.hero-sky .site-top:not(.scrolled) .wa-btn:hover,
.hero-sky .site-top:not(.scrolled) .menu-btn:hover { background: rgba(255, 255, 255, 0.26); }

.site-top.scrolled .logo-dark { display: block; }
.site-top.scrolled .logo-light { display: none; }
.site-top.scrolled .site-top__nav a { color: var(--color-text); }
.site-top.scrolled .site-top__nav a:hover { color: var(--color-brand); }
.site-top.scrolled .lang-pill,
.site-top.scrolled .wa-btn,
.site-top.scrolled .menu-btn {
  color: var(--color-text);
  background: var(--color-bg);
  border-color: var(--color-border);
}

/* Unterseiten (#checkout etc., body.route-sub via Router): weißer Grund statt
   Himmel — Header sofort im Voll-Zustand, sonst weißes Logo auf Weiß. */
.hero-sky.route-sub .site-top:not(.scrolled) .logo-dark { display: block; }
.hero-sky.route-sub .site-top:not(.scrolled) .logo-light { display: none; }
.hero-sky.route-sub .site-top:not(.scrolled) .site-top__nav a { color: var(--color-text); }
.hero-sky.route-sub .site-top:not(.scrolled) .site-top__nav a:hover { color: var(--color-brand); }
.hero-sky.route-sub .site-top:not(.scrolled) .lang-pill,
.hero-sky.route-sub .site-top:not(.scrolled) .wa-btn,
.hero-sky.route-sub .site-top:not(.scrolled) .menu-btn {
  color: var(--color-text);
  background: var(--color-bg);
  border-color: var(--color-border);
}

/* ---------- Hero (Standard: hell — „Farbe ist Ereignis") ---------- */
.hero {
  position: relative;
  /* hell, aber nicht weiß: Papier oben, unten vertieft sich der Schleier zur Glas-Bühne */
  background:
    radial-gradient(110% 60% at 50% -12%, #FFFFFF 30%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #FDFDFF 0%, #F3F5FC 40%, #E9EEFB 74%, #E1E8FA 100%);
  color: var(--color-text);
  padding-top: calc(148px + env(safe-area-inset-top, 0px));
  padding-bottom: 120px;
  overflow: hidden;
  overflow: clip; /* verhindert Fokus-Scroll-Sprung; hidden = Safari-15-Fallback */
}
.wing {
  position: absolute;
  top: 50%;
  height: 82%;
  color: var(--uno-schleier-tief);
  opacity: 0.7;
  pointer-events: none;
}
.wing svg { height: 100%; width: auto; display: block; overflow: visible; }
.wing--right {
  right: 0;
  transform: translate(30%, -50%);
}
.wing--left {
  left: 0;
  transform: translate(-30%, -50%) scaleX(-1);
}
.hero-glow {
  display: none;
  position: absolute;
  left: 50%;
  top: 56%;
  width: 940px;
  height: 600px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(93, 124, 255, 0.42), rgba(93, 124, 255, 0.14) 46%, transparent 72%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-headline {
  font-size: clamp(46px, 7.4vw, 92px);
  line-height: 1.02;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 14ch;
}
.hero-sub {
  margin-top: var(--space-4);
  font-size: clamp(16px, 1.5vw, var(--text-lead-size));
  color: var(--color-text-muted);
  max-width: 46ch;
}
/* Desktop: Headline einzeilig (der Umbruch wird nur auf Mobil aktiv, s.u.) */
.hero-br { display: none; }

/* Variante B (dunkel) — nur zum Live-Vergleich, fliegt nach der Entscheidung raus */
.hero-dark .hero {
  background: linear-gradient(178deg, var(--uno-ultramarin) 4%, #0A28A8 58%, var(--uno-tief) 100%);
  color: #fff;
}
.hero-dark .wing { color: rgba(255, 255, 255, 0.16); }
.hero-dark .hero-glow { display: block; }
.hero-dark .hero-sub { color: var(--uno-schleier); }

/* Variante C (Himmel) — 1:1 nach Apple-Weather-Vorbild (klarer Tag):
   Azur-Himmel läuft DURCHGEHEND hinter Hero + Suche + Länderliste (per .sky-bg),
   Sonne mit Überstrahlung, Cirrus-Federwolken oben, Quellwolken seitlich.
   Alles gemalt, 0 KB Bilder. */
.hero-sky .hero {
  background: transparent; /* Farbe kommt vom durchgehenden .sky-bg */
  color: #fff;
}
/* Etappe D: zusätzlich zum weichen Glow eine nahe, knackige Schattenkante — der weiche
   Glow allein verschwand über den hellsten Stellen (Glasband, Wolken). Mobil gab es
   diese Doppelung schon (unten @media), Desktop zieht jetzt nach. */
.hero-sky .hero-headline { text-shadow: 0 1px 2px rgba(9, 24, 68, 0.35), 0 2px 30px rgba(18, 58, 138, 0.34); }
.hero-sky .hero-sub { color: #fff; text-shadow: 0 1px 2px rgba(9, 24, 68, 0.35), 0 1px 16px rgba(18, 58, 138, 0.34); }
/* Nav-Links im transparenten Hero-Zustand: gleiche Kante, sonst säuft z. B.
   „Geräte-Check" auf einer hellen Wolke ab. */
.hero-sky .site-top:not(.scrolled) .site-top__nav a { text-shadow: 0 1px 2px rgba(9, 24, 68, 0.30), 0 1px 12px rgba(18, 58, 138, 0.28); }
.hero-sky .wing { color: rgba(255, 255, 255, 0.14); opacity: 1; }
.hero-sky .crsl-aurora { display: none; }

/* Durchgehender Himmel: ECHTES Foto (sauberer Ausschnitt aus dem Live-Asset,
   ohne Astronaut/KI-Falter, mit eingebackenem Weiß-Auslauf) — läuft hinter Hero + Suche +
   Listenanfang, endet weich in Weiß. Zusätzlicher CSS-Weiß-Verlauf sichert den Übergang
   auf jeder Bildschirmgröße (Desktop-Crop bekommt sonst harte Kante). */
.sky-bg {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(clamp(820px, 125vw, 1250px) + env(safe-area-inset-top, 0px));
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Bewusst KEINE weisse background-color mehr (Bujar 30.07. abends): Dieses Element
     reicht bis ganz nach oben und waere damit eine zweite, weisse Farbquelle fuer
     Safaris Statusleiste. Oben darf nur <body> eine background-color haben.
     Solange das Foto laedt, scheint jetzt das Blau von body durch — passt ohnehin
     besser als Weiss. Unten sorgt der Verlauf im background-image fuer den weissen
     Uebergang zum Seiteninhalt. */
  background-color: transparent;
  /* Handy lädt das kleine, scharfe Bild (schnell); Desktop bekommt weiter unten das
     hochauflösende sky-lg.webp (Retina-scharf). Beide aus dem 3072px-Original gerechnet. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.55) 88%, #FFFFFF 100%),
    url('assets/brand/sky.webp');
  background-size: cover, cover;
  /* Flügel-Kante aus der Headline halten. Breite Screens: Bild füllt die Breite,
     also vertikal nach oben schieben (36%) → die harte Glaskante liegt ÜBER dem Text,
     hinter der Headline nur ruhige Glasfläche. (Phones: Sonderregel unten.) */
  background-position: center top, center 36%;
  background-repeat: no-repeat;
}
/* Schmale Phones: Bild füllt die Höhe (vertikal kein Spiel), also links ausrichten
   → der Flügel wandert nach rechts aus dem Wort „verbunden". Umschlagpunkt ~458px,
   ab wo das Bild von höhen- auf breiten-gefüllt wechselt. */
@media (max-width: 458px) {
  .sky-bg { background-position: center top, left top; }
}
/* Ab Tablet/Desktop das hochauflösende Bild (2560px) — scharf auf großen/Retina-Screens,
   ohne Handys mit dem großen Download zu belasten. */
@media (min-width: 760px) {
  .sky-bg {
    /* 20.07. (Bujar): auf Desktop wirkte der Himmel zu nah rangezoomt — die Quelle
       ist ein hohes Hochformat-Foto (2560×4587), "cover" auf dem breiten, aber per
       Klammer gedeckelten Container zeigt dadurch nur einen schmalen Ausschnitt reiner
       Himmelsfläche (kein Wolken-Unterschied sichtbar — erster Versuch mit 1600px war
       rechnerisch zu klein, um überhaupt neuen Bildinhalt freizulegen). Deckel deutlich
       angehoben (1250→2200px), damit unten wirklich die kleinen Wolken ins Bild kommen —
       Positionierung der Elemente darüber bleibt unberührt (.sky-bg ist absolut
       positioniert, Content-Fluss läuft unabhängig davon). */
    height: calc(clamp(820px, 125vw, 2200px) + env(safe-area-inset-top, 0px));
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.55) 88%, #FFFFFF 100%),
      url('assets/brand/sky-lg.webp');
  }
}
/* Faerbt die oberste Zone des Himmels auf exakt die Farbe, die auch <body> im
   ungescrollten Zustand hat (#0F3F85). So geht die Statusleiste oben nahtlos in den
   Himmel ueber — das Himmelsfoto selbst hat dort einen Verlauf quer ueber die Breite
   (links #04347C bis rechts #1D4C91) und wuerde sonst eine sichtbare Kante zeigen. */
.sky-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(180deg, #0F3F85 0, rgba(15, 63, 133, 0) 100%);
}
.hero-sky .sky-bg { display: block; }
.hero-sky .wing { display: none; }

/* Suche/Tabs/Karten stehen auf dem Himmel: Panel wird durchsichtig, Elemente glasig/weiß */
.hero-sky .panel-inner { background: transparent; box-shadow: none; }
.hero-sky .panel .search-bar {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 26px rgba(30, 80, 170, 0.14);
}
.hero-sky .pill-tabs--paper {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
.hero-sky .featured {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.9);
}
.hero-sky .country-list .price-row {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(30, 80, 170, 0.12);
}
.hero-sky .panel-more .btn--secondary { background: rgba(255, 255, 255, 0.78); }

/* Cirrus-Federwolken: zwei Schichten, driften in Zeitlupe gegeneinander */

/* ---------- Liquid Glass ---------- */
.glass {
  position: relative;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 32px rgba(8, 15, 60, 0.28), 0 2px 8px rgba(8, 15, 60, 0.18);
  isolation: isolate;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  backdrop-filter: blur(4px) saturate(1.15);
  -webkit-backdrop-filter: blur(4px) saturate(1.15);
  filter: url(#glass-distortion);
}
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  background: var(--glass-tint);
  box-shadow:
    inset 1.5px 1.5px 1px 0 var(--glass-rim-hi),
    inset -1px -1px 1px 1px var(--glass-rim-lo);
  pointer-events: none;
}
.glass > * { position: relative; z-index: 2; }

/* ---------- Suchleiste ---------- */
.search-wrap {
  margin-top: var(--space-8);
  width: min(560px, 100%);
}
.search-bar {
  height: 62px;
  width: 100%;
  cursor: text;
}
.search-bar svg.shimmer-ring {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  border-radius: inherit;
}
.search-bar input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 0 72px;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  caret-color: #fff;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: var(--weight-medium);
  z-index: 2;
}
.search-bar__icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.9);
  z-index: 2;
  pointer-events: none;
  display: inline-flex;
}
.search-bar__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: 17px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.26s var(--ease-standard);
}
.search-bar__go {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 0;
  background: #fff;
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  opacity: 0.45;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.search-bar__go:not(:disabled) { opacity: 1; }
.search-bar__go:not(:disabled):hover { transform: translateY(-50%) scale(1.05); }

/* ---------- Pill-Tabs ---------- */
.pill-tabs {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: var(--radius-pill);
}
.pill-tabs--paper {
  background: var(--color-surface);
  display: flex;
  width: max-content;
  margin: 0 auto var(--space-5);
}
.pill-tabs--paper .pill-tab { color: var(--color-text-muted); }
.pill-tabs--paper .pill-tab.active { color: var(--color-brand); }
.pill-tabs--paper .pill-tabs__indicator {
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
}
.pill-tabs__indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 4px 14px rgba(8, 15, 60, 0.24);
  transition: left 0.28s var(--ease-standard), width 0.28s var(--ease-standard);
  z-index: 1;
}
.pill-tab {
  position: relative;
  z-index: 2;
  min-width: 108px;
  height: 44px;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-ui);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: color 0.28s var(--ease-standard);
}
.pill-tab.active { color: var(--color-brand); }

/* ---------- Hero-Carousel: Rotating Countries ---------- */
.crsl {
  --crsl-h: 58px;
  --crsl-gap: 12px;
  --crsl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  margin-top: var(--space-9);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Aurora — das Farb-Ereignis: weiches Schleier/Ultramarin-Lichtfeld hinter den Reihen */
.crsl-aurora {
  position: absolute;
  inset: -90px -4vw -70px;
  pointer-events: none;
  background:
    radial-gradient(56% 115% at 50% 44%, rgba(178, 195, 246, 0.5), rgba(178, 195, 246, 0) 70%),
    radial-gradient(30% 75% at 70% 62%, rgba(13, 47, 191, 0.09), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
@keyframes aurora-drift { to { transform: translate3d(-36px, 20px, 0); } }
.hero-dark .crsl-aurora { display: none; }

.crsl-row {
  position: relative;
  overflow: clip;
  padding: 12px 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
.crsl-row img { -webkit-user-drag: none; }
.crsl-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

/* Länder-Pillen */
.crsl .pill {
  flex: 0 0 auto;
  margin-right: var(--crsl-gap);
  border: 0;
  font-family: var(--font-ui);
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
  height: var(--crsl-h);
  display: inline-flex;
  align-items: center;
  padding: 0 19px;
  border-radius: var(--radius-pill);
  gap: 10px;
}
.crsl .label { font-weight: 550; font-size: 15.5px; line-height: 1; letter-spacing: -0.004em; white-space: nowrap; }
.crsl .price { font-weight: var(--weight-bold); font-size: 14.5px; color: var(--color-brand); white-space: nowrap; }

/* Oberfläche: weiß-solid — die Länder-Pillen (Produktregal). Ruhig: Haarlinie + EIN weicher Schatten */
.crsl .is-solid {
  background: #fff;
  color: var(--uno-tinte);
  box-shadow:
    0 1px 2px rgba(16, 19, 30, 0.04),
    0 10px 24px rgba(13, 47, 191, 0.07),
    inset 0 0 0 1px rgba(16, 19, 30, 0.06);
}
/* Länder-Pillen sind echte Knöpfe */
.crsl button.pill { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .crsl button.pill:hover {
    transform: translateY(-2px);
    box-shadow:
      0 2px 4px rgba(16, 19, 30, 0.05),
      0 14px 30px rgba(13, 47, 191, 0.11),
      inset 0 0 0 1px rgba(16, 19, 30, 0.07);
  }
}
.crsl button.pill:active { transform: translateY(-1px) scale(0.97); transition-duration: 0.12s; }
.crsl .pill:focus-visible, .crsl-toggle:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 3px;
}

.crsl .flag {
  width: 33px; height: 25px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 auto;
  margin-left: -2px;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08), 0 1px 2px rgba(16, 19, 30, 0.10);
  background: var(--uno-schleier);
}
.crsl .flag svg { width: 100%; height: 100%; display: block; }
.crsl-country__txt {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
/* Pause/Play — echtes dunkles Liquid Glass wie in der Apple-Referenz */
.crsl-toggle {
  position: absolute;
  right: 22px;
  bottom: -14px;
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  isolation: isolate;
  transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow:
    0 2px 6px rgba(16, 19, 30, 0.16),
    0 10px 26px rgba(13, 47, 191, 0.22);
}
.crsl-toggle:active { transform: scale(0.94); }
.crsl-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.8);
  backdrop-filter: blur(16px) saturate(1.8);
  filter: url(#glass-distortion);
}
.crsl-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 55%),
    rgba(16, 19, 30, 0.38);
  box-shadow:
    inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.7),
    inset -1px -1px 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}
.crsl-toggle svg { position: relative; z-index: 2; }
.crsl-toggle .crsl-toggle__play { display: none; }
.crsl-toggle[aria-pressed="true"] .crsl-toggle__pause { display: none; }
.crsl-toggle[aria-pressed="true"] .crsl-toggle__play { display: block; }

/* Variante B (dunkel): Rezepte der dunklen Bühne */
.hero-dark .crsl .is-solid {
  box-shadow:
    0 1px 2px rgba(8, 20, 80, 0.16),
    0 6px 16px rgba(6, 14, 60, 0.20),
    0 16px 36px rgba(6, 14, 60, 0.16),
    inset 0 0 0 1px rgba(16, 19, 30, 0.045);
}
/* A/B-Schalter (nur Vorschau — fliegt nach der Entscheidung raus) */
.ab-switch {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(16, 19, 30, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(16, 19, 30, 0.3);
}
.ab-switch__tag {
  padding: 0 8px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.ab-switch__btn {
  border: 0;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.ab-switch__btn.active { background: #fff; color: var(--uno-tinte); }
/* solange der A/B-Schalter schwebt, bekommt der Footer unten Luft */
.site-footer-v2 { padding-bottom: calc(var(--space-7) + 64px); }

/* ---------- Papier-Panel mit Suche + Länderliste ---------- */
.panel {
  position: relative;
  margin-top: -108px;
  padding-bottom: var(--space-8);
}
.panel-inner {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6) var(--space-7);
}
/* Suchleiste + Tabs als ruhige Kopfzeile im weißen Panel — klebt beim Scrollen unterm Header */
.panel-head {
  position: sticky;
  top: 70px;
  z-index: 20;
  margin-inline: calc(-1 * var(--space-6));
  padding: var(--space-3) var(--space-6) var(--space-1);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* 19.07. (Bujar): Suche geht auf der GANZEN Seite mit — nach dem Panel-Ende
   übernimmt die fixe Variante nahtlos (gleiches top wie sticky, page.js schaltet) */
.panel-head.float {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  margin-inline: 0;
  z-index: 60; /* über Inhalt/Footer, unter den Overlays (120) */
}
/* Kein matter Streifen mehr hinter der klebenden Suche — die Glas-Pille schwebt
   allein über der Liste, Zeilen laufen sichtbar unter ihr durch (Apple-Look). */
.panel .search-wrap {
  position: relative;
  margin: 0 auto var(--space-4);
  width: min(560px, 100%);
}
/* Echtes Liquid Glass (Apple-Referenzvideo): die Suchleiste IST das Glas-Objekt.
   Das Glas selbst machen ::before (Blur + Verzerrung) und ::after (Lichtkante)
   der .glass-Basis — hier nur fürs helle Panel nachgeschärft. */
.panel .search-bar {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 30px rgba(13, 47, 191, 0.12),
    0 2px 8px rgba(8, 15, 60, 0.06);
  height: 56px;
}
.panel .search-bar::before {
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
}
.panel .search-bar::after {
  /* weniger Milchweiß, mehr echtes Glas: hauchdünne Tönung + klare Lichtkante
     oben-links, dunkle Mikro-Kante unten (Apple-Materiallogik) */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.10));
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255, 255, 255, 0.95),
    inset -1px -1.5px 1px 0 rgba(13, 47, 191, 0.10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .panel .search-bar { background: rgba(255, 255, 255, 0.93); }
}
.panel .search-bar:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-veil), 0 10px 30px rgba(13, 47, 191, 0.12);
}
/* Während der Inline-Suche verschwinden die Kategorie-Pillen — mehr Treffer über der Tastatur */
.panel.searching .pill-tabs--paper { display: none; }
/* Glas-Dropdown unter der schwebenden Suchleiste (Apple-Referenz): dehnt sich
   wassertropfen-artig aus der Leiste heraus, Treffer scrollen im Glas */
.search-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(560px, calc(100% - 2 * var(--space-6)));
  z-index: 21;
  padding: 6px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  box-shadow:
    0 24px 60px rgba(8, 15, 60, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateX(-50%) translateY(-6px) scale(0.97);
  transform-origin: top center;
  opacity: 0;
  filter: blur(4px);
  transition: transform 0.18s var(--ease-exit), opacity 0.14s var(--ease-exit), filter 0.14s var(--ease-exit);
}
.search-drop.open {
  transform: translateX(-50%);
  opacity: 1;
  filter: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s var(--ease-enter), filter 0.2s var(--ease-enter);
}
.search-drop[hidden] { display: none; }
.search-drop__list {
  max-height: min(46vh, 340px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-drop__hint {
  padding: 14px 12px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}
.sdrop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
/* Haarlinie zwischen den Treffern — klar getrennt, wie eine iOS-Liste */
.sdrop-row + .sdrop-row { border-top: 1px solid rgba(16, 19, 30, 0.07); border-radius: 0 0 14px 14px; }
@media (hover: hover) {
  .sdrop-row:hover { background: rgba(255, 255, 255, 0.72); }
}
.sdrop-row:active { transform: scale(0.985); background: rgba(255, 255, 255, 0.72); }
.sdrop-row__flag {
  width: 34px; height: 25px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08);
}
.sdrop-row__flag svg { width: 100%; height: 100%; display: block; }
.sdrop-row__name {
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.sdrop-row__price {
  font-size: 15.5px;
  font-weight: var(--weight-extrabold);
  color: var(--color-brand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  /* Handy: panel-head polstert mit space-4 — Dropdown exakt so breit wie die Suchleiste */
  .search-drop { width: calc(100% - 2 * var(--space-4)); }
}
/* Unschärfe-Schleier hinter der offenen Such-Ebene (iOS-Spotlight-Prinzip):
   die Länderliste dahinter verschwimmt, nichts konkurriert mit den Treffern */
.search-veil {
  position: fixed;
  inset: 0;
  z-index: -1; /* im panel-head-Kontext: über der Liste, unter Leiste+Dropdown */
  background: rgba(248, 250, 255, 0.42);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-standard);
  /* visibility statt nur opacity (Bujar 30.07.): Safari 26 leitet die Statusleisten-Farbe
     aus fixen Elementen an der Viewport-Kante ab und zaehlt dabei auch rein transparente
     mit — nur unsichtbare NICHT. Dieser Schleier ist hell und liegt ueber dem ganzen
     Bildschirm; ohne das hier hat er dem Balken oben Weiss aufgezwungen, obwohl Blau
     dran war. visibility ist animierbar, display waere es nicht. */
  visibility: hidden;
}
.panel-head.drop-open .search-veil {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
/* Leiste + Treffer = EIN Feld (Bujar 13.07.): die Pille öffnet sich unten auf,
   die Treffer laufen nahtlos im selben Glas weiter — kein getrenntes Kästchen.
   Bar-Radius 999px auf 56px Höhe = 28px optisch → oben ändert sich nichts. */
.panel .search-bar { transition: border-radius 0.22s var(--ease-standard); }
.panel-head.drop-open .search-bar {
  border-radius: 28px 28px 0 0;
  border-bottom-color: transparent;
}
/* Kein blauer Fokus-Ring, solange das Feld als Einheit offen ist —
   ein Ring nur um die obere Hälfte sähe zerbrochen aus */
.panel-head.drop-open .search-bar:focus-within {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 30px rgba(13, 47, 191, 0.12), 0 2px 8px rgba(8, 15, 60, 0.06);
}
.search-drop {
  top: calc(100% - 20px); /* exakt Unterkante der Leiste (16px wrap-Rand + 4px head-Polster) */
  border-radius: 0 0 28px 28px;
  border-top: 1px solid rgba(16, 19, 30, 0.06); /* Haarlinie zwischen Eingabe und Treffern */
  /* gleiches Material wie die Leiste: ihr Verlauf endet bei 0.10 — hier geht er weiter */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.20));
  -webkit-backdrop-filter: blur(20px) saturate(1.55);
  backdrop-filter: blur(20px) saturate(1.55);
  transform: translateX(-50%) scaleY(0.96);
  padding: 8px;
}
.search-drop.open { transform: translateX(-50%); }
.panel .search-bar input { color: var(--color-text); caret-color: var(--color-brand); }
.panel .search-bar__icon { color: var(--color-text-muted); }
.panel .search-bar__placeholder { color: var(--color-text-muted); }
.panel .search-bar svg.shimmer-ring { display: none; }
/* ---------- Featured-Reiseziel-Bühne ---------- */
.featured {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  max-width: 640px;
  margin: var(--space-2) auto var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  position: relative;
}
.featured__flag {
  width: 56px;
  height: 42px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08), 0 1px 3px rgba(16, 19, 30, 0.10);
}
.featured__flag svg { width: 100%; height: 100%; }
.featured__body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.featured__kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.featured__kicker::before {
  content: "★";
  font-size: 11px;
}
.featured__name {
  font-size: var(--text-h3-size);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.featured__meta { font-size: var(--text-small-size); color: var(--color-text-muted); }
.featured__buy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  flex-shrink: 0;
}
.featured__price { font-size: var(--text-price-size); font-weight: var(--weight-extrabold); letter-spacing: -0.01em; color: var(--color-brand); }

.country-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
  /* Cross-Fade beim Tab-Wechsel (Etappe 9 Motion-Audit) — gleiches Rezept wie
     .pkg-list.swap (page.css ~2970) für Konsistenz. */
  transition: opacity 0.16s var(--ease-standard);
}
.country-list.list-fade { opacity: 0; }
/* Desktop: Länder als 2-Spalten-Raster (dichter, weniger leerer Platz auf breiten
   Bildschirmen). Handy bleibt einspaltig — volle-Breite-Zeilen. */
@media (min-width: 760px) {
  .country-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    max-width: 760px;
  }
  /* Suchleiste auf dieselbe Breite wie das Raster → alles sauber ausgerichtet */
  .panel .search-wrap { width: min(760px, 100%); }
  /* Etappe E: einheitliche Kartenhöhen — im 2-Spalten-Raster brechen lange Namen
     (Bosnien & Herzegowina, Dominikanische Republik …) auf 2 Zeilen um und machten
     einzelne Reihen 20px höher. Mindesthöhe = gemessene 2-Zeilen-Variante (93px). */
  .country-list .price-row { min-height: 93px; }
}
/* CLS-Wächter: Zielhöhe der Beliebt-Liste (11 Zeilen mobil / 6 Grid-Reihen Desktop)
   während des Katalog-Ladens reservieren — Klasse setzt/entfernt page.js. */
.country-list.is-loading { min-height: 835px; }
@media (min-width: 760px) { .country-list.is-loading { min-height: 615px; } }
.country-list .price-row { cursor: pointer; }
.price-row__title, .price-row__meta { display: block; }
.country-list .price-row__flag {
  overflow: hidden;
  width: 40px; height: 30px;
  border-radius: 7px;
  align-self: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08);
}
.country-list .price-row__flag svg { width: 100%; height: 100%; }
.region-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-extrabold);
  flex-shrink: 0;
}
/* Regionen-Zeilen: Linien-Icon (Kontinent-Umriss) in getönter Pille, wie Live-Seite */
.region-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  flex-shrink: 0;
}
.region-ico svg { width: 26px; height: 26px; display: block; }
.hero-sky .region-ico { background: rgba(255, 255, 255, 0.72); }
.offer-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-bold);
  margin-left: var(--space-2);
}
/* Etappe E: mehr Luft nach unten — der Knopf ist der bewusste Abschluss des Panels,
   die nächste Section soll erst nach echtem Weiterscrollen kommen (vorher 72px). */
.panel-more { margin-top: var(--space-6); margin-bottom: var(--space-9); text-align: center; }

/* Länder-Tab (20.07.): Top-15-Liste schließt mit diesem Knopf ab, der den vollen
   Katalog einblendet — bewusst KEIN price-row (keine Flagge/Preis), damit er sich
   klar als Aktion statt als 143. Land liest. */
.laender-show-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-veil);
  color: var(--color-brand);
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.laender-show-all:hover { background: var(--color-schleier-tief); }
.hero-sky .laender-show-all { border-color: rgba(255, 255, 255, 0.9); }
/* Desktop-Raster ist 2-spaltig (siehe .country-list) — der Knopf soll beide
   Spalten überspannen, nicht als halbe Kachel neben der letzten Zeile hängen. */
@media (min-width: 760px) {
  .laender-show-all { grid-column: 1 / -1; }
}

/* ---------- Sections allgemein ---------- */
.sec-title {
  font-size: clamp(30px, 3.6vw, var(--text-h1-size));
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sec-lead {
  margin-top: var(--space-2);
  font-size: var(--text-lead-size);
  max-width: 60ch;
}
.eyebrow {
  display: inline-block;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ---------- So funktioniert's ---------- */
/* ---------- Netzpartner-Laufband (Masterbrief 3.5): ruhig, grau, vertrauensbildend ---------- */
.netze {
  padding: var(--space-7) 0 var(--space-9); /* eng an „Alle Länder ansehen" (Bujar 12.07.) */
  background: var(--color-bg);
  text-align: center;
}
.netze__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.netze__lead {
  max-width: 520px;
  margin: var(--space-2) auto 0;
  font-size: var(--text-small-size);
  line-height: 1.55;
  text-wrap: balance;
}
.netze__band {
  margin-top: var(--space-6);
  overflow: hidden;
  /* Namen laufen links/rechts angeschnitten in einen weichen Auslauf */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.netze__track {
  display: flex;
  width: max-content;
  animation: netze-drift 46s linear infinite; /* Dauerbewegung = linear (nie easen) */
}
.netze__set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* gap statt Padding pro Kind: garantiert exakt gleiche Lücke zwischen JEDEM Paar
     (Text und Logos gemischt) — Padding könnte bei Logos mit eigenem inneren
     Leerraum ungleichmäßig wirken (Bujar-Fund 21.07.). */
  gap: clamp(18px, 3vw, 34px);
}
.netze__set span {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: var(--weight-bold);
  letter-spacing: -0.005em;
  white-space: nowrap;
  /* Bewusst leise (Yesim-Referenz), aber barrierefrei: volles Muted-Grau statt
     zusätzlicher opacity — 0.62 drückte den Kontrast auf 2.6:1 (WCAG-Fund 18.07.). */
  color: var(--color-text-muted);
}
/* Echte Netzbetreiber-Logos (Bujar 21.07., Daten aus unseren echten YESIM/esimaccess-
   Paketen, nicht erfunden — siehe scripts/import-networks.py-Familie). Jedes Logo ist ein
   leeres <span> ohne eigene Farbe, das per CSS-Maske in genau dasselbe Muted-Grau wie der
   Fließtext gefärbt wird (--logo-src kommt inline pro Marke) — Original-Markenfarben bleiben
   unsichtbar, nur die Form zählt. aspect-ratio kommt inline pro Logo (echtes Seitenverhältnis
   der Datei), Höhe hier zentral gepflegt. */
.netze__logo {
  display: inline-block;
  height: clamp(20px, 2.3vw, 26px);
  background-color: currentColor;
  -webkit-mask-image: var(--logo-src);
  mask-image: var(--logo-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
@keyframes netze-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .netze__track { animation: none; }
  .netze__band { mask-image: none; -webkit-mask-image: none; }
  .netze__set:last-child { display: none; } /* Duplikat weg, Rest steht ruhig */
  .netze__track { width: auto; justify-content: center; }
  .netze__set { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}

.journey-sec {
  position: relative;
  background: var(--color-surface);
  padding: var(--space-11) 0 var(--space-10);
  overflow: hidden;
}
.journey-sec .u-container { position: relative; z-index: 2; }
.journey {
  position: relative;
  margin-top: var(--space-9);
  padding-left: 72px;
}
.journey__rail {
  position: absolute;
  left: 23px;
  top: 8px;
  bottom: 48px;
  width: 2px;
  background: var(--uno-schleier-tief);
  border-radius: var(--radius-pill);
}
.journey__rail-fill {
  position: absolute;
  left: -0.75px;
  top: 0;
  width: 3.5px;
  height: 0%;
  background: var(--color-brand);
  border-radius: inherit;
  box-shadow: 0 0 8px rgba(13, 47, 191, 0.35);
}
.journey__fly {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 46px;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  color: var(--color-brand);
  filter: drop-shadow(0 4px 10px rgba(13, 47, 191, 0.35));
  will-change: top, transform;
  transition: opacity 0.45s var(--ease-exit), scale 0.45s var(--ease-exit);
}
.journey__fly svg {
  width: 100%;
  height: auto;
  display: block;
  animation: flutter var(--flap, 0.9s) ease-in-out infinite;
  animation-play-state: paused;
}
.journey__fly.flying svg { animation-play-state: running; }
.journey__fly.landed { opacity: 0; scale: 0.4; }
@keyframes flutter {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.5); }
}
.station {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-7) 0;
}
.station__dot {
  position: absolute;
  left: -72px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--uno-schleier);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-h3-size);
  color: var(--uno-text-faint);
  transition: border-color var(--duration-slow) var(--ease-standard),
              color var(--duration-slow) var(--ease-standard);
}
.station.passed .station__dot {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.station__text h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.station__text p { margin-top: var(--space-2); max-width: 40ch; }
.station__artifact { display: flex; justify-content: flex-start; }

/* Echte Hand-Fotos statt CSS-Handy-Attrappe (Bujar-Wunsch 24.07.) — der Screenshot ist
   bereits pixelgenau aufs Foto montiert (siehe design-system/marketing/so-gehts-hand-fotos/),
   hier nur Größe/Lesbarkeit im Layout. */
.station__photo {
  width: min(340px, 100%);
  height: auto;
  display: block;
}

.phone {
  position: relative;
  width: min(290px, 100%);
  aspect-ratio: 9 / 18.6;
  border-radius: 54px;
  background: #060607;
  padding: 9px;
  box-shadow:
    inset 0 0 0 1.5px #45454c,
    inset 0 0 0 3px #101014,
    0 24px 60px -18px rgba(10, 13, 40, 0.45),
    0 6px 18px rgba(10, 13, 40, 0.22);
}
.phone--tilt-l { transform: rotate(-2.5deg); }
.phone--tilt-r { transform: rotate(2.5deg); }
.phone::before {
  content: "";
  position: absolute;
  left: -2.5px;
  top: 116px;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: #3c3c42;
  box-shadow: 0 42px 0 #3c3c42, 0 -34px 0 0 #3c3c42;
}
.phone::after {
  content: "";
  position: absolute;
  right: -2.5px;
  top: 152px;
  width: 3px;
  height: 58px;
  border-radius: 2px;
  background: #3c3c42;
}
.phone__island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #060607;
  z-index: 3;
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 45px;
  background: var(--color-bg);
  padding: 54px 14px 26px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}
.phone__screen::after {
  content: "";
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--uno-tinte) 28%, transparent);
}
.phone__status {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  color: var(--color-text);
  z-index: 2;
}
/* Echter Screenshot füllt den Screen randlos (Panel-Blatt über der Himmel-Startseite,
   genau wie live). Statusleiste weiß, weil der obere Rand der blaue Himmel ist. */
.phone__screen.artifact--shot { padding: 0; }
.phone__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 45px;
  z-index: 0;
}
.phone__screen.artifact--shot .phone__status { color: #fff; z-index: 3; }
.phone__time {
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
}

/* Screens: gemeinsame Bausteine */
.screen-label {
  font-size: 15px;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
}
.screen-cta {
  margin-top: auto;
  width: 100%;
  height: 44px;
  font-size: var(--text-small-size);
}
.tier-toggle {
  display: flex;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.tier-toggle__opt {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.tier-toggle__opt--active {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}
.radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  flex-shrink: 0;
}
.radio--on {
  border-color: var(--color-brand);
  background: radial-gradient(circle, var(--color-brand) 0 44%, transparent 48%);
}

/* Station 1: Paket wählen */
.pick-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
}
.pick-head__flag {
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--color-border);
  flex-shrink: 0;
}
.pick-head__flag svg { width: 36px; height: 26px; margin-left: -5px; }
.pick-head__name { font-weight: var(--weight-bold); flex: 1; }
.pick-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
}
.pick-option__body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pick-option__body small {
  font-size: 11.5px;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
.pick-option__price { font-weight: var(--weight-extrabold); color: var(--color-brand); font-size: 15px; }
.pick-option--selected {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  background: var(--color-surface);
}

/* Station 2: Kasse */
.kasse-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
}
.kasse-summary__flag {
  width: 24px; height: 24px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.kasse-summary__flag svg { width: 33px; height: 24px; margin-left: -4.5px; }
.kasse-summary__body { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.kasse-summary__body small {
  font-size: 11.5px;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
.kasse-summary__price { font-weight: var(--weight-extrabold); color: var(--color-brand); }
.pay-methods--small .pay-logo { height: 32px; }
.pay-methods--small .pay-logo img { height: 15px; width: auto; }
/* Seitenverhältnisse pro Logo (Etappe 9: aspect-ratio statt Bildladung abwarten, CLS-Fix) */
.pay-logo img[src*="visa"] { aspect-ratio: 1000 / 325; }
.pay-logo img[src*="mastercard"] { aspect-ratio: 1000 / 618; }

/* Station 2: Kauf + Zahlarten */
.mini-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.mini-field {
  height: 40px;
  display: flex;
  align-items: center;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  color: var(--color-text);
  background: var(--color-bg);
}
.mini-field--wide { grid-column: 1 / -1; }
.pay-methods {
  display: flex;
  gap: var(--space-2);
}
.pay-logo {
  flex: 1;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.pay-logo img { height: 20px; width: auto; max-width: 80%; display: block; }
.pay-btn { pointer-events: none; margin-top: var(--space-1); }
.secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.secure-line svg { color: var(--color-success); flex-shrink: 0; }

/* Station 3: Erfolgsseite */
.success-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}
.success-check {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-erfolg-flaeche);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-1);
}
.success-title {
  font-weight: var(--weight-extrabold);
  font-size: 16px;
  letter-spacing: -0.01em;
}
.success-sub { font-size: var(--text-caption-size); color: var(--color-text-muted); }
.qr-panel {
  align-self: center;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-sm);
  margin-block: var(--space-2);
}
.qr {
  width: 104px;
  height: 104px;
  display: block;
  color: var(--color-text);
}
.success-mail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

/* Ankunft: aufsteigende Balken */
.arrival-card {
  position: relative;
  width: min(340px, 100%);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
/* Schmetterling landet auf der Ankunftskarte */
.arrival-perch {
  position: absolute;
  top: -26px;
  right: 26px;
  width: 44px;
  color: var(--color-brand);
  opacity: 0;
  transform: translateY(-14px) scale(0.7);
  filter: drop-shadow(0 6px 12px rgba(13, 47, 191, 0.3));
}
.arrival-perch svg { width: 100%; height: auto; display: block; }
.station--arrival.passed .arrival-perch {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.5s var(--ease-enter) 0.15s, transform 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) 0.15s;
}
.arrival-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-small-size);
  font-weight: var(--weight-bold);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.arrival-card__head > span:nth-child(2) { flex: 1; }
.arrival-card__flag {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  flex-shrink: 0;
}
.arrival-card__flag svg { width: 33px; height: 24px; margin-left: -4.5px; }
.arrival-card__time {
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}
.station__dot--arrival {
  border-color: var(--color-brand);
  background: var(--color-veil);
}
.arrival-core {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-brand);
  transform: scale(0.4);
  transition: transform 0.5s var(--ease-enter);
}
.station--arrival.passed .arrival-core { transform: scale(1); }
.signal-stage {
  position: relative;
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-5);
}
.signal-glow {
  position: absolute;
  left: 50%; top: 40%;
  width: 340px; height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--uno-schleier), transparent 72%);
  opacity: 0;
  transition: opacity 0.9s var(--ease-enter) 0.3s;
  pointer-events: none;
}
.station--arrival.passed .signal-glow { opacity: 1; }
.signal-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 128px;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--uno-schleier-tief);
}
.sbar {
  width: 30px;
  height: var(--h);
  border-radius: 7px 7px 3px 3px;
  background: var(--color-brand);
  transform: scaleY(0);
  transform-origin: bottom;
}
@keyframes bar-spring {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1.14); }
  74% { transform: scaleY(0.93); }
  88% { transform: scaleY(1.03); }
  100% { transform: scaleY(1); }
}
.station--arrival.passed .sbar {
  animation: bar-spring 0.9s cubic-bezier(0.3, 0.1, 0.3, 1) forwards;
}
.station--arrival.passed .sbar:nth-child(1) { animation-delay: 0.08s; }
.station--arrival.passed .sbar:nth-child(2) { animation-delay: 0.2s; }
.station--arrival.passed .sbar:nth-child(3) { animation-delay: 0.32s; }
.station--arrival.passed .sbar:nth-child(4) { animation-delay: 0.44s; }
.signal-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  font-size: var(--text-small-size);
  font-weight: var(--weight-bold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s var(--ease-enter) 0.75s, transform 0.5s var(--ease-enter) 0.75s;
}
.station--arrival.passed .signal-pill { opacity: 1; transform: none; }

/* ---------- Warum unoesim (Ledger) ---------- */
.ledger-sec {
  position: relative;
  padding: var(--space-11) 0;
  background: var(--color-bg);
  overflow: hidden;
}
.ledger-wing {
  position: absolute;
  right: 0;
  top: 50%;
  height: 68%;
  color: var(--uno-schleier);
  transform: translate(38%, -50%);
  pointer-events: none;
}
.ledger-wing svg { height: 100%; width: auto; display: block; }
.ledger-sec .u-container { position: relative; }
.ledger {
  margin-top: var(--space-8);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.ledger__row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7) var(--space-7);
}
.ledger__row + .ledger__row { border-top: 1px solid var(--color-border); }
.ledger__figure {
  font-size: clamp(44px, 5.6vw, 76px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--color-text);
}
.ledger__figure--event { color: var(--color-brand); }
.ledger__copy p {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line);
  max-width: 52ch;
}
.ledger__copy strong { font-weight: var(--weight-bold); }

.chat-proof {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
}
.chat-bubble {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-small-size);
  line-height: var(--text-small-line);
}
.chat-bubble--in {
  background: var(--color-surface);
  border-bottom-left-radius: var(--radius-sm);
  align-self: flex-start;
}
.chat-bubble--out {
  background: var(--color-veil);
  border-bottom-right-radius: var(--radius-sm);
  align-self: flex-end;
}
.chat-time {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--color-text-muted);
  text-align: right;
}
.ledger-binder {
  margin-top: var(--space-8);
  text-align: center;
  font-family: var(--font-logo-echo, Nunito, var(--font-ui));
  font-style: italic;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--color-text);
}

/* ---------- Roaming-Rechner ---------- */
.rechner-sec {
  padding: var(--space-12) 0;
  background: var(--color-surface);
}
/* ── Roaming-Rechner, Apple-clean (Bujar 17.07.: „wie von Jony Ive designed") ──
   Ruhige Karte, Ersparnis als Held-Zahl, taktiler Slider, klare Hierarchie.
   JS-IDs unveraendert (updateRechner/renderOps laufen weiter). */
.calc {
  max-width: 33rem;
  margin: var(--space-9) auto 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6) var(--space-6);
}

/* Reise-Kontext oben */
.calc__trip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.calc__flag {
  width: 26px; height: 19px;
  border-radius: 5px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.1);
}
.calc__flag svg { width: 100%; height: 100%; display: block; }
.calc__trip-txt { font-size: var(--text-body-size); color: var(--color-text-muted); }
.calc__trip-txt strong { color: var(--color-text); font-weight: var(--weight-bold); }

/* Vergleich: zwei Zeilen, Preis rechts gross */
.calc__compare { display: grid; gap: var(--space-3); }
.calc__line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.calc__line--uno {
  background: var(--color-veil);
  box-shadow: inset 0 0 0 1px var(--color-schleier-tief);
}
.calc__line-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc__line-label {
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.calc__line--uno .calc__line-label { color: var(--color-brand); }
/* Detailzeile in der blauen Uno-Zeile: Muted-Grau auf Veil = 4.38:1 (knapp drunter) —
   dunkles Marken-Blau passt farblich UND besteht (WCAG-Fund 18.07.). */
.calc__line--uno .calc__line-detail { color: var(--color-brand-pressed); }
.calc__line-detail {
  font-size: var(--text-caption-size);
  color: var(--color-text-muted); /* war text-faint — 3.9:1, WCAG-Fund 18.07. */
  line-height: 1.35;
}
.calc__line-detail:empty { display: none; }
.calc__line-val {
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__line--uno .calc__line-val { color: var(--color-brand); }
.calc__line-fx {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 2px;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}
.calc__line-fx[hidden] { display: none; }

/* Ersparnis: die Held-Zahl */
.calc__save { text-align: center; margin: var(--space-8) 0 var(--space-7); }
.calc__save-lbl {
  display: block;
  font-size: var(--text-caption-size);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.calc__save-val {
  display: block;
  font-size: clamp(2.75rem, 13vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}

/* Slider: taktil, grosser weicher Knopf (Apple: direkte Manipulation) */
.calc__slider { margin-bottom: var(--space-6); }
.calc__slider-lbl {
  display: block;
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
}
/* Kein eigener outline:none mehr (WCAG-Fund 20.07.: hatte den globalen
   :focus-visible-Ring komplett stillgelegt, Tastatur-Nutzer sahen keinen Fokus). */
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 1px 3px rgba(16, 19, 30, 0.14), 0 6px 16px rgba(16, 19, 30, 0.12);
  cursor: grab;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.calc input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.92); cursor: grabbing; }
.calc input[type="range"]::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 1px 3px rgba(16, 19, 30, 0.14), 0 6px 16px rgba(16, 19, 30, 0.12);
  cursor: grab;
}

/* Anbieter-Chips: leise, sekundaer */
.calc__ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
}
.calc__ops-lbl { font-size: var(--text-caption-size); color: var(--color-text-muted); /* war text-faint — WCAG */ }
.calc__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rechner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--text-caption-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.rechner-chip__land {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  color: var(--color-text-muted); /* war text-faint — 3.9:1, WCAG */
}
.rechner-chip:hover { border-color: var(--color-brand); }
.rechner-chip--active {
  background: var(--color-veil);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.rechner-chip--active .rechner-chip__land { color: var(--color-brand); /* opacity 0.7 drückte den Kontrast unter 4.5:1 — WCAG-Fund 18.07. */ }

.calc__note {
  margin: 0;
  text-align: center;
  font-size: var(--text-caption-size);
  line-height: 1.5;
  color: var(--color-text-muted); /* war text-faint — WCAG */
}
.calc__note a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.calc__note a:hover { color: var(--color-brand); }

/* ---------- Geräte-Check ---------- */
.device-sec { padding: var(--space-11) 0; }
.device-inner { max-width: 720px; text-align: center; }
.device-inner .sec-lead { margin-inline: auto; }
.device-box { margin-top: var(--space-7); }

/* P2: Erkennungs-Badge — gut sichtbarer, freundlicher Punkt ÜBER der Suche.
   Grün = gute Nachricht über DEIN Gerät; die Suche darunter bleibt für alle offen. */
.device-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap; /* Detail („Erkannt: …") rutscht auf schmalen Screens als GANZE Zeile um */
  justify-content: center;
  gap: 2px var(--space-2);
  margin-bottom: var(--space-5);
  padding: 8px 18px 8px 10px;
  background: var(--color-erfolg-flaeche);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.device-badge[hidden] { display: none; }
.device-badge__check {
  width: 26px; height: 26px; border-radius: var(--radius-pill); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-success); color: #fff;
}
.device-badge__detail { color: var(--color-text-muted); font-weight: var(--weight-medium); font-size: var(--text-small-size); }
.device-badge__detail[hidden] { display: none; }

/* Leiser Absprung zur Geräte-Unterseite (G2) unter dem Check-Kasten */
.device-all-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-small-size); font-weight: var(--weight-medium);
  color: var(--color-brand);
}
.device-all-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- G2: Geräte-Check-Unterseite (geraete-check.html) ----------
   AMA-Referenz nur als Struktur (Kicker -> 3 Schritte -> Marken-Raster ->
   Ergebnis -> FAQ -> Kauf-Absprung), Farben/Radien aus unserem System. */
.dc-head { padding-block: calc(68px + var(--space-9) + env(safe-area-inset-top, 0px)) var(--space-7); }
.dc-head__inner { max-width: 680px; margin-inline: auto; text-align: center; }
.dc-title { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-tracking); margin-bottom: var(--space-3); }
.dc-sub { font-size: var(--text-lead-size); line-height: var(--text-lead-line); text-wrap: balance; }

.dc-steps {
  display: flex; justify-content: center; gap: var(--space-6);
  margin: var(--space-7) 0 0; padding: 0; list-style: none;
}
.dc-step {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-small-size); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); /* war text-faint — 3.9:1, WCAG-Fund 20.07. */
}
.dc-step__n {
  width: 24px; height: 24px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); font-size: var(--text-caption-size);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.dc-step.active { color: var(--color-text); }
.dc-step.active .dc-step__n { background: var(--color-brand); color: var(--color-text-on-brand); }
.dc-step.done { color: var(--color-text-muted); }
.dc-step.done .dc-step__n { background: var(--color-veil); color: var(--color-brand); }

.dc-stage { padding-block: 0 var(--space-11); }
.dc-stage__inner { max-width: 680px; margin-inline: auto; }
.dc-stage__title {
  font-size: var(--text-lead-size); font-weight: var(--weight-bold);
  letter-spacing: -0.005em; margin-bottom: var(--space-5); text-align: center;
}

.dc-brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 560px) { .dc-brands { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .dc-brands { grid-template-columns: repeat(4, 1fr); } }
.dc-brand {
  height: 64px; padding-inline: var(--space-4);
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-weight: var(--weight-semibold); color: inherit; cursor: pointer;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.dc-brand:hover { border-color: var(--color-brand); }
.dc-brand:active { transform: scale(0.98); }
.dc-brand--other { color: var(--color-text-muted); }

.dc-models { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 560px) { .dc-models { grid-template-columns: repeat(2, 1fr); } }
.dc-model {
  min-height: 52px; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.dc-model:hover { border-color: var(--color-brand); }

.dc-back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-6); border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-small-size); font-weight: var(--weight-medium);
  color: var(--color-brand);
}
.dc-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.dc-hint { margin: var(--space-4) 0 0; font-size: var(--text-small-size); }

.dc-result {
  text-align: center; padding: var(--space-8) var(--space-6);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.dc-result__icon {
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  margin: 0 auto var(--space-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-text-muted);
}
.dc-result--yes .dc-result__icon { background: var(--color-erfolg-flaeche); color: var(--color-success); }
.dc-result--no .dc-result__icon { background: var(--color-warnung-flaeche); color: var(--color-warning); }
.dc-result--unknown .dc-result__icon { background: var(--color-veil); color: var(--color-brand); }
.dc-result__title { font-size: var(--text-h3-size); letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.dc-result__sub { max-width: 46ch; margin-inline: auto; text-wrap: balance; }
.dc-result__actions { margin-top: var(--space-6); }
.dc-result__actions:empty { display: none; }

.dc-faq { padding-top: 0; }

/* P2-Redesign: schwebende Pille statt flacher Kasten — gleiche Formensprache wie
   die Hero-Suche (Pille, Icon links, runde Aktion rechts), nur auf Papier statt Glas. */
.device-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 8px 8px 22px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.device-search:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-veil), var(--shadow-md);
}
.device-search > svg { color: var(--color-text-muted); flex-shrink: 0; }
.device-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  height: 48px;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  color: var(--color-text);
}
.device-search input::placeholder { color: var(--color-text-muted); }
.device-search .btn { height: 48px; padding-inline: 22px; }
.device-chips {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.device-chip { border: 0; cursor: pointer; font-family: var(--font-ui); }
.device-chip:hover { background: var(--uno-schleier-tief); }
.device-results {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
}
.device-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  font-weight: var(--weight-medium);
}
.device-result .u-muted { font-weight: var(--weight-regular); }

/* ---------- Bewertungen (4 echte Kundenstimmen, 24./25.07.) ----------
   Ehrlichkeitsregel (Masterbrief §4.9/§9): jede Karte ist ein echter, nur
   sprachlich lokalisierter Kunde — nie erfundene Reviews. 2x2-Raster (nicht 3er),
   weil wir genau 4 echte Stimmen haben statt der ursprünglich geplanten 3. */
.reviews-sec { padding: var(--space-11) 0; background: var(--color-surface); }
.reviews-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
/* Tweet-artige Karte (Bujar-Wunsch 26.07.): kein Handy-Rahmen, kompakte Kopfzeile
   (Avatar + Name + Verifiziert), Zitat darunter als normaler Fließtext — bewusst
   zurückhaltender als die erste Fassung mit großem Anführungszeichen-Dekor. */
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.review-card__head { display: flex; align-items: center; gap: var(--space-3); }
.review-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-weight: var(--weight-extrabold);
  font-size: var(--text-small-size);
  flex-shrink: 0;
}
.review-card__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review-card__name { font-weight: var(--weight-bold); font-size: var(--text-small-size); line-height: 1.2; }
.review-card__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-muted);
  font-size: var(--text-tiny-size, 12px);
  line-height: 1.2;
}
.review-card__verified svg { flex-shrink: 0; color: var(--color-brand); }
.review-card__quote {
  margin: 0;
  font-size: var(--text-body-size);
  line-height: 1.55;
  color: var(--color-text);
}

/* Textmarker-Effekt: farbiges Band SITZT hinter dem Text (kein Kasten drumherum,
   unregelmäßige Ecken wie ein echter Stift), fährt beim Reveal von links nach
   rechts ein — reine transform-Animation (Apple-Guidance: nur transform/opacity
   animieren), daher butterweich. Ohne JS-Bewegung (.js-anim fehlt: reduced-motion
   oder alter Browser) ist der Marker sofort komplett sichtbar, nie unsichtbar. */
.review-card__quote mark {
  display: inline-block;
  position: relative;
  z-index: 0;
  background: none;
  color: inherit;
  font-weight: var(--weight-semibold);
}
.review-card__quote mark::before {
  content: '';
  position: absolute;
  /* Bleed bewusst asymmetrisch: links großzügig (davor sitzt ein Leerzeichen,
     viel Luft), rechts minimal (davor steht oft direkt ein Komma/Punkt — bei
     zu viel Bleed deckt die Box das Satzzeichen zu). */
  inset: 0.06em -0.06em 0.02em -0.2em;
  background: var(--color-veil);
  border-radius: 3px 9px 5px 10px / 8px 4px 9px 5px;
  z-index: -1;
}
.js-anim .review-card__quote mark::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-anim .review-card.in .review-card__quote mark::before { transform: scaleX(1); }
.js-anim .review-card.in .review-card__quote mark:nth-of-type(2)::before { transition-delay: 0.18s; }
.js-anim .review-card.in .review-card__quote mark:nth-of-type(3)::before { transition-delay: 0.36s; }

/* ---------- Über-uns-Teaser (P5-Neubau 18.07.) ----------
   Ruhige Karte mit Flügel-Linie als Marken-Textur (rechts angeschnitten, wie im
   Footer, nur hell). Text links, Werte-Zeile leise, ein klarer Button. */
.about-teaser { padding: var(--space-10) 0; }
.about-teaser__card {
  position: relative;
  overflow: hidden;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--space-8) var(--space-8) var(--space-8);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-sm);
}
.about-teaser__wing {
  position: absolute;
  right: 0;
  top: 50%;
  height: 150%;
  color: var(--color-veil);
  transform: translate(32%, -50%);
  pointer-events: none;
}
.about-teaser__wing svg { height: 100%; width: auto; display: block; overflow: visible; }
.about-teaser__content { position: relative; max-width: 560px; }
/* Hierarchie durch Typografie statt Farbe (Bujar-Feedback 26.07.: Textmarker
   passte nicht zur eigenen Markengeschichte, nur zu Kundenzitaten). Der
   stärkste Satz (die "Warum"-Geschichte) steht groß/fett voran, der
   Kontext-Satz (wer/woher) folgt klein und leise darunter. */
.about-teaser__hook {
  margin-top: var(--space-3);
  font-size: clamp(var(--text-lead-size), 2vw, var(--text-h3-size));
  font-weight: var(--weight-extrabold);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: pretty;
}
.about-teaser__context {
  margin-top: var(--space-2);
  font-size: var(--text-small-size);
}
.about-teaser__values {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.about-teaser__values li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.about-teaser__vicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  flex-shrink: 0;
}
.about-teaser__btn {
  margin-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.about-teaser__btn svg { transition: transform var(--duration-fast) var(--ease-standard); }
.about-teaser__btn:hover svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .about-teaser__card { padding: var(--space-6) var(--space-5); }
  .about-teaser__wing { opacity: 0.6; } /* Flügel bleibt Textur, drängt sich mobil nicht vor den Text */
  .about-teaser__values { flex-direction: column; align-items: flex-start; }
}

/* ---------- FAQ ----------
   Akkordeon-Rezept 1:1 von .pkg-countries übernommen (grid-template-rows-Trick,
   Innen-Abstand liegt auf .faq-item__a, nicht auf .faq-item__clip — sonst bleibt
   im geschlossenen Zustand ein Padding-Streifen sichtbar). */
.faq-sec { padding: var(--space-11) 0; background: var(--color-surface); }
.faq-inner { max-width: 760px; }
.faq-list { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  cursor: pointer;
}
.faq-item__q svg { flex-shrink: 0; color: var(--color-text-muted); transition: transform 0.24s var(--ease-standard); }
.faq-item.open .faq-item__q svg { transform: rotate(180deg); }
.faq-item__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-standard);
}
.faq-item.open .faq-item__wrap { grid-template-rows: 1fr; }
.faq-item__clip { min-height: 0; overflow: hidden; }
.faq-item__a {
  padding: 2px var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: 1.55;
}
.faq-more-btn {
  margin-top: var(--space-6);
  display: flex;
  margin-inline: auto;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  cursor: pointer;
}
.faq-more-btn:hover { color: var(--color-brand-pressed); }

/* ---------- Über-uns-Seite (ueber-uns.html) ---------- */
/* 19.07. (Bujar): Kicker klebte am fixen Header — Header-Höhe einrechnen wie .dc-head */
.about-hero-sec { padding: calc(68px + var(--space-9) + env(safe-area-inset-top, 0px)) 0 var(--space-9); text-align: center; }
.about-hero-sec__inner { max-width: 720px; margin-inline: auto; }
.about-hero-sec__title {
  margin-top: var(--space-3);
  font-size: clamp(30px, 4.2vw, var(--text-display-size));
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.about-hero-sec__lead {
  margin-top: var(--space-4);
  font-size: var(--text-lead-size);
  color: var(--color-text-muted);
  line-height: 1.5;
  text-wrap: balance;
}
.about-block { padding: var(--space-9) 0; }
.about-block__inner { max-width: 640px; }
.about-block .sec-title { margin-top: var(--space-2); }
.about-block__body {
  margin-top: var(--space-4);
  font-size: var(--text-body-size);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.about-quote {
  margin: var(--space-6) 0 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--color-brand);
  background: var(--color-veil);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-body-size);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.55;
}
.value-grid {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
.value-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}
.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-veil);
  color: var(--color-brand);
}
.value-card h3 { margin-top: var(--space-4); font-size: var(--text-h3-size); font-weight: var(--weight-bold); }
.value-card p { margin-top: var(--space-2); font-size: var(--text-small-size); color: var(--color-text-muted); line-height: 1.55; }
.about-cta { padding: var(--space-11) 0 var(--space-12); text-align: center; background: var(--color-surface); }
.about-cta__inner { max-width: 560px; margin-inline: auto; }
.about-cta .sec-title, .about-cta .sec-lead { margin-inline: auto; }
.about-cta__actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */
.site-footer-v2 {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: var(--space-11) 0 var(--space-7);
  overflow: hidden;
}
.footer-wing {
  position: absolute;
  right: 0;
  top: 50%;
  height: 78%;
  color: rgba(255, 255, 255, 0.08);
  transform: translate(30%, -50%);
  pointer-events: none;
}
.footer-wing svg { height: 100%; width: auto; display: block; overflow: visible; }
.site-footer-v2 .u-container { position: relative; }
.footer-moment {
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.025em;
  line-height: 1;
}
.footer-grid {
  margin-top: var(--space-9);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
}
.footer-brand p {
  margin-top: var(--space-4);
  font-size: var(--text-small-size);
  color: var(--uno-papier-auf-tinte-muted);
  line-height: 1.55;
}
.footer-col h3 {
  font-size: var(--text-small-size);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
}
.footer-col a {
  display: block;
  color: var(--uno-papier-auf-tinte-muted);
  font-size: var(--text-small-size);
  padding-block: var(--space-1);
}
.footer-col a:hover { color: var(--color-text-on-dark); text-decoration: none; }
.footer-bottom {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--on-dark-hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: var(--text-caption-size);
  color: var(--uno-papier-auf-tinte-muted);
}
.footer-pay { display: inline-flex; gap: var(--space-2); align-items: center; }
.footer-pay span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding-inline: 10px;
  background: #fff;
  border-radius: 6px;
}
.footer-pay img { display: block; height: 16px; width: auto; }
.footer-pay img[src*="visa"] { aspect-ratio: 1000 / 325; }
.footer-pay img[src*="mastercard"] { aspect-ratio: 1000 / 618; }
.site-footer-v2 :focus-visible { outline-color: var(--color-text-on-dark); }

/* ---------- Paket-Panel (Overlay) ----------
   Klick auf ein Land: Handy = Glas-Blatt gleitet von unten herauf (iOS-Sheet),
   Desktop = mittiges Glas-Panel. Nur transform/opacity animiert. */
.pkg-ovl {
  position: fixed;
  inset: 0;
  z-index: 120; /* über Header (50) und ab-switch (90) */
  display: grid;
  align-items: end;
  justify-items: stretch;
}
.pkg-ovl[hidden] { display: none; }
.pkg-ovl__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 40, 0.36);
  opacity: 0;
  transition: opacity 0.24s var(--ease-exit);
}
.pkg-ovl.open .pkg-ovl__scrim {
  opacity: 1;
  transition: opacity 0.3s var(--ease-enter);
}
.pkg-sheet:focus,
.pkg-sheet:focus-visible { outline: none; } /* Dialog-Rahmen braucht keinen Ring — innere Knöpfe haben eigene */
.pkg-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  border-radius: 26px 26px 0 0;
  padding: 0 18px 16px;
  background: rgba(255, 255, 255, 0.97); /* Fallback für Browser ohne backdrop-filter */
  box-shadow:
    0 -18px 60px rgba(8, 15, 60, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(103%);
  transition: transform 0.3s var(--ease-exit); /* Schließen: zügig raus */
  will-change: transform;
}
.pkg-ovl.open .pkg-sheet {
  transform: none;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1); /* Öffnen: Apple-Sheet-Kurve */
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pkg-sheet {
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    backdrop-filter: blur(26px) saturate(1.6);
  }
}
.pkg-sheet__grab {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  touch-action: none; /* Wisch nach unten schließt (Handy) */
  cursor: grab;
}
.pkg-sheet__grab span {
  width: 38px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(16, 19, 30, 0.18);
}
.pkg-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 19, 30, 0.06);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.pkg-close:hover { background: rgba(16, 19, 30, 0.1); color: var(--color-text); }
.pkg-close:active { transform: scale(0.92); }

.pkg-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1) var(--space-4);
}
.pkg-head__flag {
  width: 44px;
  height: 33px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08), 0 1px 3px rgba(16, 19, 30, 0.10);
  background: var(--uno-schleier);
}
.pkg-head__flag svg { width: 100%; height: 100%; display: block; }
/* Regionen: rundes Icon-Feld statt Flagge (gleiche Optik wie die Listen-Zeile) */
.pkg-head__flag--region {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-veil);
  color: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.pkg-head__flag--region svg { width: 28px; height: 28px; }
.pkg-head__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 34px; /* Platz für den Schließen-Knopf */
}
.pkg-head__name {
  font-size: 20px;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-wrap: balance;
}
.pkg-head__meta { font-size: var(--text-small-size); color: var(--color-text-muted); }

/* Regionen: enthaltene Länder — leise aufklappbare Chip-Liste unter dem Kopf */
.pkg-countries { margin: -4px 0 var(--space-4); }
.pkg-countries__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 4px 2px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  cursor: pointer;
}
.pkg-countries__toggle svg {
  transition: transform 0.24s var(--ease-standard);
}
.pkg-countries.open .pkg-countries__toggle svg { transform: rotate(180deg); }
.pkg-countries__wrap {
  display: grid;
  grid-template-rows: 0fr; /* klappt per Grid-Track auf — weich, ohne JS-Messung */
  transition: grid-template-rows 0.32s var(--ease-standard);
}
.pkg-countries.open .pkg-countries__wrap { grid-template-rows: 1fr; }
.pkg-countries__clip {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 176px; /* Global hat 136 Länder — Liste scrollt statt das Panel zu sprengen */
  overscroll-behavior: contain;
}
/* Innen-Abstand liegt auf der Liste, nicht auf dem Clip-Element — sonst bleibt
   beim Zuklappen (0fr) ein Padding-Streifen mit angeschnittenen Chips sichtbar */
.pkg-countries__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
}
.pkg-cty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: 12.5px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
}
.pkg-cty__flag {
  width: 20px; height: 15px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: -3px;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08);
  background: var(--uno-schleier);
}
.pkg-cty__flag svg { width: 100%; height: 100%; display: block; }

/* Standard/Unlimited: gleitender Umschalter (nur transform) */
.pkg-tier {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(16, 19, 30, 0.05);
  margin-bottom: var(--space-4);
}
.pkg-tier__ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 2px 8px rgba(8, 15, 60, 0.14), inset 0 0 0 1px rgba(16, 19, 30, 0.04);
  transition: transform 0.28s var(--ease-standard);
}
.pkg-tier--unlimited .pkg-tier__ind { transform: translateX(100%); }
.pkg-tier__btn {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--text-small-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: color 0.28s var(--ease-standard);
}
.pkg-tier__btn.active { color: var(--color-brand); }

/* Paket-Zeilen (Radio-Auswahl) */
.pkg-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  min-height: 0;
  padding: 2px; /* Luft für den Auswahl-Rand */
  margin: -2px;
  /* height wird beim Standard/Unlimited-Wechsel einmalig per JS mitgeführt (FLIP),
     damit das Panel nicht springt — bewusste, kurze Ausnahme von „nur transform/opacity" */
  transition: opacity 0.16s var(--ease-standard), height 0.3s var(--ease-standard);
}
.pkg-list.swap { opacity: 0; }
.pkg-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 12px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.pkg-opt:hover { border-color: var(--color-brand); }
.pkg-opt[aria-checked="true"] {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  background: rgba(221, 228, 251, 0.45); /* Fallback */
  background: color-mix(in srgb, var(--color-veil) 45%, #fff);
}
.pkg-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pkg-opt__gb {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.005em;
  color: var(--color-text);
}
.pkg-opt__body small {
  font-size: 12.5px;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}
.pkg-opt__price {
  font-size: 17px;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
  color: var(--color-brand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- Sprachwahl-Overlay (Etappe 8) ----------
   Wiederverwendet .pkg-ovl/.pkg-sheet komplett (Etappe 3/7) — nur die Zeilen-Liste
   ist neu, im selben Rezept wie .pkg-opt (Bordered Row + Brand-Highlight aktiv). */
.lang-sheet { max-width: 360px; }
/* 19.07. (Bujar): auf dem Handy volle Breite — die max-width ließ auf breiteren
   iPhones rechts einen ungleichen Rand (Blatt klebte links). Desktop bleibt schmal. */
@media (max-width: 759px) {
  .lang-sheet, .menu-sheet, .cty-sheet { max-width: none; }
}
.lang-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.lang-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 12px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.lang-opt:hover { border-color: var(--color-brand); }
.lang-opt.active {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  background: rgba(221, 228, 251, 0.45); /* Fallback */
  background: color-mix(in srgb, var(--color-veil) 45%, #fff);
}
.lang-opt__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.lang-opt.active .lang-opt__badge { background: var(--color-brand); color: #fff; }
.lang-opt__name { flex: 1; font-size: var(--text-body-size); font-weight: var(--weight-semibold); color: var(--color-text); }
.lang-opt__check { flex-shrink: 0; color: var(--color-brand); opacity: 0; transform: scale(0.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.lang-opt.active .lang-opt__check { opacity: 1; transform: scale(1); }

/* ---------- eSIM-Status: Link-Suche ohne E-Mail (19.07.) ---------- */
.status-lookup { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); text-align: left; }
.status-lookup__lead { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-small-size); line-height: 1.6; text-align: center; }
.status-lookup .btn { margin-top: var(--space-2); }

/* ---------- Alle-Länder-Sheet (20.07.) ----------
   Eigenes Pop-up im Glas-Rezept: Suche oben fix, Liste scrollt IM Blatt. Feste
   Höhe, damit das Blatt beim Tippen/Filtern nicht springt. */
.cty-sheet {
  max-width: 480px;
  height: calc(100vh - 40px);
  height: calc(100dvh - 40px);
}
.cty-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.cty-search:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-veil);
}
.cty-search svg { flex-shrink: 0; }
.cty-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  height: 44px;
  font-family: var(--font-ui);
  font-size: var(--text-body-size);
  color: var(--color-text);
}
.cty-list {
  flex: 1;
  min-height: 0;
  margin-top: var(--space-3);
  padding: 2px 2px var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Teilt die Zeilen-Optik mit .country-list, bleibt aber IMMER einspaltig
   (das 2-Spalten-Raster der Seite passt nicht in ein 480px-Blatt) */
.cty-list.country-list { display: flex; }
/* flex-shrink 0: sonst quetscht die feste Blatt-Höhe alle 142 Zeilen zusammen */
.cty-list .price-row { min-height: 0; flex-shrink: 0; }
.cty-list .notice { flex-shrink: 0; }
@media (min-width: 760px) {
  .cty-sheet { height: min(680px, calc(100dvh - 48px)); }
}

/* ---------- Mobile-Menü (P1 18.07.) ----------
   Hamburger nur auf Handy — genau ab dem Punkt, wo die Desktop-Nav verschwindet
   (900px). Das Sheet nutzt dasselbe Glas-Rezept wie die Sprachwahl; die Zeilen
   folgen dem .lang-opt-Muster (Bordered Row, Brand-Akzent). */
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.72); /* Fallback für Safari < 16.2 */
  background: color-mix(in srgb, #fff 72%, transparent);
  color: var(--color-text);
  cursor: pointer;
}
.menu-btn:hover { background: #fff; }
.menu-btn:active { transform: scale(0.94); }
.menu-sheet { max-width: 400px; }
.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-bottom: var(--space-2);
  overflow-y: auto;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 10px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-body-size);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.menu-item:hover { border-color: var(--color-brand); text-decoration: none; }
.menu-item:active { transform: scale(0.98); }
.menu-item[aria-current="page"] {
  border-color: var(--color-brand);
  box-shadow: inset 0 0 0 1px var(--color-brand);
  background: rgba(221, 228, 251, 0.45); /* Fallback */
  background: color-mix(in srgb, var(--color-veil) 45%, #fff);
}
.menu-item__icon { display: inline-flex; flex-shrink: 0; color: var(--color-brand); }
.menu-item__label { flex: 1; min-width: 0; }
.menu-item__chev { flex-shrink: 0; color: var(--color-text-muted); }

/* Kauf-Knopf + Vertrauens-Zeile (Nachtrag 10: Vertrauen wirkt am Kauf-Moment) */
.pkg-buy {
  width: 100%;
  height: 54px;
  margin-top: var(--space-4);
  font-size: 16.5px;
  flex-shrink: 0;
}
.pkg-buy__sep { opacity: 0.65; margin-inline: 2px; }
.pkg-buy__price { font-weight: var(--weight-extrabold); font-variant-numeric: tabular-nums; }
.pkg-trust {
  margin-top: var(--space-3);
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  flex-shrink: 0;
  text-wrap: balance; /* bricht ausgewogen statt „Kein Abo" allein in Zeile 2 */
}
.pkg-trust svg {
  display: inline-block;
  vertical-align: -1.5px;
  margin-right: 4px;
  color: var(--color-success);
}
/* Erstkäufer-Anker: Geräte-Check direkt IM Panel — klappt ein kleines Suchfeld auf,
   Ergebnis erscheint sofort, der Kauf geht ohne Unterbrechung weiter */
.pkg-device {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pkg-device-link {
  margin: 6px auto 0;
  border: 0;
  padding: 6px 10px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
}
.pkg-device-link span {
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pkg-device__wrap {
  width: 100%;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease-standard);
}
.pkg-device.open .pkg-device__wrap { grid-template-rows: 1fr; }
.pkg-device__body {
  min-height: 0;
  overflow: hidden;
  padding: 0 2px; /* nur seitlich Luft für den Fokus-Ring — vertikales Padding bliebe beim Zuklappen als Streifen stehen */
}
.pkg-device__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 4px 0;
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.pkg-device__field:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-veil);
}
.pkg-device__field svg { color: var(--color-text-muted); flex-shrink: 0; }
.pkg-device__field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  height: 100%;
  font-family: var(--font-ui);
  font-size: 16px; /* iOS zoomt bei Eingabefeldern <16px automatisch rein — nie kleiner! */
  color: var(--color-text);
}
.pkg-device__field input::placeholder { color: var(--color-text-muted); }
.pkg-device__result { padding: 4px 6px 2px; }
.pkg-device__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.pkg-device__row + .pkg-device__row { border-top: 1px solid var(--color-border); }
.pkg-device__status { font-weight: var(--weight-semibold); white-space: nowrap; }
.pkg-device__status.is-yes { color: var(--color-success); }
.pkg-device__status.is-no { color: var(--color-warning, #B3412C); }
.pkg-device__status.is-unknown { color: var(--color-text-muted); }
.pkg-device__hint {
  padding: 6px 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* Geräte-Check-Fenster: liegt ÜBER dem Paket-Panel. Auf dem Handy ist das Blatt
   bewusst hoch — das Eingabefeld sitzt im oberen Drittel, die Tastatur kann es
   nie verdecken (deshalb braucht dieses Blatt kein Anheben). */
.dev-ovl { z-index: 140; }
.dev-result { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 759.98px) {
  .dev-sheet { height: min(540px, 74dvh); }
}

/* Desktop/Tablet: mittiges Panel statt Blatt von unten */
@media (min-width: 760px) {
  .pkg-ovl { align-items: center; justify-items: center; padding: 24px; }
  .pkg-sheet {
    width: min(460px, 100%);
    max-height: min(720px, calc(100vh - 48px));
    max-height: min(720px, calc(100dvh - 48px));
    border-radius: 24px;
    padding: 0 24px 20px;
    box-shadow:
      0 30px 90px rgba(8, 15, 60, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: transform 0.22s var(--ease-exit), opacity 0.18s var(--ease-exit);
  }
  .pkg-ovl.open .pkg-sheet {
    opacity: 1;
    transform: none;
    /* leichte Überdehnung — wassertropfen-artig (Masterbrief 5) */
    transition: transform 0.34s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.2s var(--ease-enter);
  }
  .pkg-sheet__grab { display: none; }
  .pkg-head { padding-top: var(--space-5); }
}

/* ---- Apple-Feinschliff (Runde 23): Druck-Feedback auf allen Kauf-Flächen ----
   Jede drückbare Fläche antwortet sofort beim Runterdrücken (nicht erst beim
   Loslassen) — kleines scale, schnelle Kurve. */
.btn {
  transition: background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }
.country-list .price-row,
.pkg-opt {
  transition: border-color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.country-list .price-row:active,
.pkg-opt:active { transform: scale(0.985); }
/* Touch-Geräte feuern „hover" beim Tippen und lassen es kleben — dort neutralisieren */
@media (hover: none) {
  .price-row:hover { border-color: var(--color-border); }
  .pkg-opt:hover:not([aria-checked="true"]) { border-color: var(--color-border); }
}
/* Preis im Kauf-Knopf wechselt weich (kurzer Blur statt hartem Sprung) */
.pkg-buy__price {
  display: inline-block;
  transition: opacity var(--duration-fast) var(--ease-standard),
              filter var(--duration-fast) var(--ease-standard);
}
.pkg-buy__price.tick { opacity: 0.35; filter: blur(3px); }
/* Vertrauens-Zeile: Segmente brechen als Ganzes um, der „·" hängt immer am
   Zeilen-ENDE, nie am Zeilenanfang */
.pkg-trust__i { white-space: nowrap; }
.pkg-trust__i:not(:last-child)::after { content: " ·"; color: var(--color-text-muted); }
/* Handy: auch der Panel-Kopf ist Wisch-Fläche zum Schließen (größeres Ziel als nur der Griff) */
@media (max-width: 759.98px) {
  .pkg-head { touch-action: none; }
}
/* Doppel-Tipp-Zoom aus auf allem Drückbaren (iOS) — Pinch-Zoom bleibt erlaubt */
button, a, input, .search-bar { touch-action: manipulation; }
/* Tastatur hebt das Blatt an: eine rAF-Schleife in page.js führt das Overlay weich
   nach — KEINE CSS-Transition auf .pkg-ovl setzen, die würde dagegen kämpfen */
/* Handy: kompakteres Blatt — 5 Pakete + Kauf-Knopf passen ohne Scrollen auf einen Blick */
@media (max-width: 759.98px) {
  .pkg-sheet { max-height: calc(100dvh - 16px); padding: 0 16px 12px; }
  .pkg-sheet__grab { padding: 8px 0 2px; }
  .pkg-head { padding-bottom: var(--space-3); }
  .pkg-tier { margin-bottom: var(--space-3); }
  .pkg-tier__btn { height: 38px; }
  .pkg-opt { padding: 10px 14px; }
  .pkg-list { gap: 6px; }
  .pkg-buy { height: 52px; margin-top: var(--space-3); }
  .pkg-trust { margin-top: var(--space-2); }
  .pkg-device-link { margin-top: 2px; padding: 5px 10px; }
}

/* Capture-Modus (nur mit ?cap=…): Panel formatfüllend ohne Scrim/Griff/Header —
   liefert einen sauberen Vollbild-Screenshot der echten Paketwahl fürs Mockup.
   Wird im Normalbetrieb NIE aktiv (Klasse nur bei ?cap gesetzt). */
/* Abzug zeigt den ECHTEN Screen: das Paket-Blatt, wie es sich über die Seite schiebt.
   Nur der Website-Header wird ausgeblendet (der Mockup-Rahmen liefert die 9:41-Leiste),
   der Schließen-Knopf raus. Sonst nichts verändert — genau wie live. */
body.cap-mode .site-top { display: none; }
body.cap-mode .pkg-close { display: none; }
body.cap-mode .pkg-list { overflow: visible; }

/* Länder-Zeilen sind jetzt echte Knöpfe (Tastatur!) — Button-Reset */
.country-list button.price-row {
  width: 100%;
  font-family: var(--font-ui);
  font-size: inherit;
  text-align: left;
  color: var(--color-text);
}
.country-list button.price-row:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

/* ---------- Reveals ---------- */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-enter), transform 0.5s var(--ease-enter);
}
.js-anim [data-reveal].in {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive ---------- */
/* ---------- Eintritts-Choreografie ---------- */
.js-boot .hero-headline,
.js-boot .hero-sub,
.js-boot .search-wrap,
.js-boot .panel-inner {
  opacity: 0;
  transform: translateY(18px);
}
body.booted .hero-headline,
body.booted .hero-sub,
body.booted .search-wrap,
body.booted .panel-inner {
  opacity: 1;
  transform: none; /* WICHTIG: kein translateY(0) — ein gesetztes transform würde position:sticky im Panel brechen */
  transition: opacity 0.65s var(--ease-enter), transform 0.65s var(--ease-enter);
}
body.booted .hero-headline { transition-delay: 0.32s; }
body.booted .hero-sub { transition-delay: 0.42s; }
body.booted .search-wrap { transition-delay: 0.52s; }
body.booted .panel-inner { transition-delay: 0.66s; }

/* Carousel-Reihen fahren in ihrer Laufrichtung ein (Apple: Richtung = Bedeutung) */
.js-boot .crsl-row--top { opacity: 0; transform: translateX(16px); }
.js-boot .crsl-toggle { opacity: 0; }
body.booted .crsl-row--top {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-enter) 0.16s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s;
}
body.booted .crsl-toggle { opacity: 1; transition: opacity 0.5s var(--ease-enter) 0.4s; }
@media (max-width: 900px) {
  .site-top__nav { display: none; }
  .menu-btn { display: inline-flex; }
  .wing--left { display: none; }
  .station {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: start;
  }
  .station__dot { top: 4px; transform: none; width: 44px; height: 44px; }
  .journey { padding-left: 60px; }
  .station__dot { left: -60px; }
  .journey__rail { left: 21px; }
  .ledger__row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hero { padding-top: calc(104px + env(safe-area-inset-top, 0px)); padding-bottom: 96px; }
  .hero-headline { font-size: clamp(36px, 10vw, 46px); }
  /* Handy: Headline zweizeilig „Überall" / „verbunden" — so steht „verbunden" in der
     ruhigen Blau-Zone links vom Glas und ist klar lesbar (Desktop bleibt einzeilig). */
  .hero-br { display: block; }
  /* Schatten hilft zusätzlich, wo Schrift das Glas streift. */
  .hero-sky .hero-headline {
    text-shadow: 0 1px 2px rgba(9, 24, 68, 0.40), 0 2px 20px rgba(18, 58, 138, 0.34);
  }
  .crsl { --crsl-h: 52px; --crsl-gap: 10px; gap: 16px; margin-top: var(--space-7); }
  .crsl .pill { padding: 0 14px; gap: 9px; }
  .crsl .label { font-size: 13.5px; }
  .crsl .flag { width: 29px; height: 22px; border-radius: 5px; margin-left: -1px; }
  /* Länder-Pille zweizeilig: Name oben, Preis darunter — halb so breit, ~3 Länder im Bild */
  .crsl-country__txt { flex-direction: column; align-items: flex-start; gap: 2.5px; }
  .crsl-country__txt .price { font-size: 12px; }
  .crsl-row {
    padding: 9px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
  }
  .crsl-toggle { right: 14px; bottom: -12px; width: 38px; height: 38px; }
  .pay-methods { flex-wrap: wrap; }
  .pay-logo { min-width: 44%; }
  .signal-bars { height: 104px; }
  /* Handy: iPhone-Mockups kompakter (Airalo-Referenz — sie füllten fast den ganzen
     Schirm). Als GANZES skaliert (transform), damit Notch/Ränder/Schrift proportional
     bleiben; der weggeschrumpfte Platz wird per negativem Rand zurückgeholt.
     margin-bottom = width · 2.0667 (Höhe) · 0.34 (Wegfall bei scale 0.66). */
  .phone {
    width: min(270px, 78vw);
    margin-inline: auto;
    transform: scale(0.66);
    transform-origin: top center;
    margin-bottom: calc(min(270px, 78vw) * -0.703);
  }
  .phone--tilt-l, .phone--tilt-r { transform: scale(0.66); } /* Kippung raus — zentriert wirkt ruhiger */
  .station { gap: var(--space-2); } /* Text sitzt näher am Mockup */
  .station__artifact { justify-content: center; overflow: visible; }
  .panel { margin-top: -86px; }
  .panel-inner { padding-inline: var(--space-4); }
  .panel-head { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .featured {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "flag body" "buy buy";
    align-items: center;
    text-align: left;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-5);
  }
  .featured__flag { grid-area: flag; width: 48px; height: 36px; border-radius: 8px; }
  .featured__body { grid-area: body; }
  .featured__buy {
    grid-area: buy;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
  .calc { padding: var(--space-6) var(--space-5) var(--space-5); }
  .price-row { gap: var(--space-3); padding: var(--space-3) var(--space-4); }
  .price-row__meta { white-space: nowrap; }
  .price-row__price { font-size: 19px; }
  .panel-inner { padding: var(--space-5) var(--space-4) var(--space-6); }
  .country-list .price-row__flag { width: 36px; height: 27px; border-radius: 6px; }
  .pill-tab { min-width: 0; flex: 1; padding-inline: var(--space-3); }
  .pill-tabs { display: flex; width: 100%; }
  /* P2: Pille bleibt auch mobil EINE Zeile (kein gestapelter Kasten) — nur kompakter */
  .device-search { padding-left: 16px; }
  .device-search > svg { display: none; } /* Platz fürs Tippfeld, Lupe wäre doppelt gemoppelt zum Knopf */
  .device-search .btn { padding-inline: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .reviews-grid { grid-template-columns: 1fr; }
  .faq-item__q { padding: var(--space-4); }
  .faq-item__a { padding: 2px var(--space-4) var(--space-4); }
  .value-grid { grid-template-columns: 1fr; }
  /* 68px-Header-Ausgleich hatte hier gefehlt (Bujar-Fund 26.07.) — Header ist
     `position: fixed` mit fester 68px-Höhe auch mobil, ohne Ausgleich klebt
     die Seite direkt am Header. */
  .about-hero-sec { padding: calc(68px + var(--space-7) + env(safe-area-inset-top, 0px)) 0 var(--space-7); }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Carousel wird zur ruhigen, von Hand scrollbaren Liste — keine Eigenbewegung */
  .crsl-track { transform: none !important; }
  .crsl-row {
    overflow-x: auto;
    touch-action: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .crsl-aurora { animation: none; }
  .crsl-toggle { display: none; }
  .js-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js-boot .hero-headline, .js-boot .hero-sub, .js-boot .search-wrap,
  .js-boot .pill-tabs, .js-boot .panel-inner {
    opacity: 1; transform: none;
  }
  .js-boot .crsl-row--top, .js-boot .crsl-toggle { opacity: 1; transform: none; }
  .sbar, .arrival-core { transform: none; transition: none; animation: none; }
  /* Paket-Panel erscheint ohne Gleiten */
  .pkg-ovl__scrim, .pkg-sheet, .pkg-tier__ind, .pkg-list,
  .pkg-countries__wrap, .pkg-countries__toggle svg, .pkg-device__wrap,
  .search-drop { transition: none; }
  .faq-item__wrap, .faq-item__q svg, .about-teaser__btn svg { transition: none; }
  .lang-opt, .lang-opt__check { transition: none; }
  .pkg-sheet { transform: none; opacity: 1; }
  .journey__fly svg { animation: none; }
  .station--arrival.passed .sbar { animation: none; transform: none; }
  .signal-glow, .signal-pill { opacity: 1; transform: none; transition: none; }
}

/* ---------- Checkout + Bestell-Ergebnis (Etappe 3, mobile-first) ----------
   Ruhig, eine Spalte, eine Aktion. Radius-System: Inputs/Kacheln = radius-lg,
   Karten = radius-xl, Buttons = Pill (Markenregel). */
.checkout-wrap { max-width: 480px; padding-block: calc(68px + var(--space-4)) var(--space-10); } /* 68px = fixer Header */
.checkout-back {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: 44px; padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2));
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--text-small-size); font-weight: var(--weight-medium);
  color: var(--color-text-muted); border-radius: var(--radius-pill);
}
.checkout-back:hover { color: var(--color-brand); background: var(--color-veil); }
.checkout-title {
  font-size: var(--text-h2-size); line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking);
  margin: var(--space-2) 0 var(--space-5);
}
.checkout-summary {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl);
  background: var(--color-surface); margin-bottom: var(--space-6);
}
.checkout-summary[hidden], .checkout-form[hidden] { display: none; } /* eigenes display übersteuert sonst [hidden] */
.checkout-summary__flag {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(16, 19, 30, 0.08);
}
.checkout-summary__flag svg { width: 150%; height: 100%; object-fit: cover; flex-shrink: 0; }
.checkout-summary__flag--region { background: var(--color-veil); color: var(--color-brand); }
.checkout-summary__flag--region svg { width: 60%; height: 60%; }
.checkout-summary__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checkout-summary__place { font-weight: var(--weight-bold); }
.checkout-summary__meta { font-size: var(--text-small-size); color: var(--color-text-muted); }
.checkout-summary__note { font-size: var(--text-caption-size); color: var(--color-text-muted); }
/* Fair-Use-/Hotspot-Hinweis unter dem Standard/Unlimited-Umschalter (Paket-Panel + Aufladen) —
   hatte bisher keine eigene Regel, lief unformatiert als nackter Text zwischen Liste und Knopf. */
.pkg-note {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: 1.5;
}
.pkg-note[hidden] { display: none; }
.checkout-summary__price {
  margin-left: auto; font-weight: var(--weight-extrabold);
  font-size: var(--text-h3-size); letter-spacing: -0.01em; white-space: nowrap;
}
.checkout-form { display: flex; flex-direction: column; gap: var(--space-5); }
/* Etappe I: Vor-/Nachname IMMER nebeneinander (auch mobil) — zwei kurze Felder
   stapeln sich sonst unnötig, Apple-Muster. min-width:0 lässt die Inputs schrumpfen. */
.checkout-row { display: flex; flex-direction: row; gap: var(--space-4); }
.checkout-row .checkout-field { flex: 1; min-width: 0; }
.checkout-row .checkout-field input { min-width: 0; width: 100%; }
.checkout-field {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--text-small-size); font-weight: var(--weight-semibold);
}
.checkout-field input {
  height: 52px; padding-inline: var(--space-4); border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border); font: inherit; font-size: var(--text-body-size);
  background: var(--color-bg); color: var(--color-text);
  transition: border-color 120ms ease;
}
.checkout-field input:hover { border-color: var(--color-border-strong); }
.checkout-field input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-veil); }
.checkout-field__hint { font-size: var(--text-caption-size); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.checkout-payblock { border: 0; padding: 0; margin: 0; min-width: 0; }
.checkout-payblock__label {
  padding: 0; margin-bottom: var(--space-2);
  font-size: var(--text-small-size); font-weight: var(--weight-semibold);
}
.checkout-pay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.checkout-pay__tile {
  position: relative; text-align: left; padding: var(--space-4);
  border-radius: var(--radius-lg); border: 1.5px solid var(--color-border);
  background: var(--color-bg); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: var(--space-2);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.checkout-pay__tile:hover { border-color: var(--color-border-strong); }
.checkout-pay__tile.active { border-color: var(--color-brand); background: var(--color-veil); }
.checkout-pay__tile:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.checkout-pay__logos { display: flex; align-items: center; gap: var(--space-2); min-height: 20px; }
.checkout-pay__logos img { display: block; width: auto; }
.checkout-pay__title { font-size: var(--text-small-size); font-weight: var(--weight-semibold); }
.checkout-pay__dot {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong); background: var(--color-bg);
  transition: border-color 120ms ease, background-color 120ms ease;
}
.checkout-pay__tile.active .checkout-pay__dot {
  border-color: var(--color-brand); background: var(--color-brand);
  box-shadow: inset 0 0 0 3.5px var(--color-bg);
}
.checkout-agree {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-small-size); line-height: 1.5; cursor: pointer;
  padding: var(--space-2) 0;
}
.checkout-agree input {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  accent-color: var(--color-brand); cursor: pointer;
}
.checkout-agree a { color: var(--color-brand); font-weight: var(--weight-medium); }
.checkout-submit { width: 100%; height: 56px; font-size: var(--text-lead-size); gap: var(--space-2); }
.checkout-submit__sep { opacity: 0.55; }
.checkout-trust {
  margin: 0; text-align: center; font-size: 11.5px; line-height: 1.5;
  font-weight: var(--weight-medium); color: var(--color-text-muted); text-wrap: balance;
}
.checkout-trust svg { display: inline-block; vertical-align: -1.5px; margin-right: 3px; }
.checkout-trust span + span::before { content: '·'; margin: 0 6px; opacity: 0.6; }
.checkout-trust span:first-of-type::before { content: none; }
.order-result { text-align: center; padding-block: var(--space-9); }
.order-result__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-5);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); color: var(--color-text-muted);
}
.order-result__icon--ok { background: var(--color-erfolg-flaeche); color: var(--color-success); }
.order-result__title { font-size: var(--text-h2-size); letter-spacing: var(--text-h2-tracking); margin-bottom: var(--space-3); }
.order-result__lead { color: var(--color-text-muted); margin-bottom: var(--space-6); text-wrap: balance; }
.order-result__order[hidden] { display: none; } /* display:inline-block unten übersteuert sonst [hidden] */
.order-result__order {
  font-family: ui-monospace, monospace; font-size: var(--text-small-size);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-lg);
  display: inline-block; margin-bottom: var(--space-6);
}
@media (min-width: 760px) {
  .checkout-wrap { padding-block: calc(68px + var(--space-7)) var(--space-11); }
  .checkout-title { font-size: var(--text-h1-size); letter-spacing: var(--text-h1-tracking); }
  .checkout-row { flex-direction: row; gap: var(--space-4); }
  .order-result__title { font-size: var(--text-h1-size); }
}

/* ---------- eSIM-Status + Aufladen (Etappe 4) ----------
   .card--xl: dieselbe .card-Basis, aber radius-xl (wie .checkout-summary) — die
   Status-/Aufladen-Karte soll optisch schwerer wirken als eine normale .card. */
.card--xl { border-radius: var(--radius-xl); }

/* ---------- Aufladen-Seite: ruhige eine Spalte (Etappe #10, Apple-Prinzip "ein Fokus") ----------
   Land + eSIM als dezente Zeile, Pakete als sortierte Liste, Zahlen darunter. Nutzt die
   bestehenden .checkout-wrap/.price-row/.checkout-field/.checkout-submit-Bausteine weiter
   (checkout-wrap bringt schon max-width:480px — schmal & fokussiert). */
.topup-title { margin-bottom: var(--space-4); }

/* Dezente eSIM-Zeile: nur Land + letzte Ziffern, keine große ID-Box. */
.topup-esim {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-7);
  font-size: var(--text-small-size); color: var(--color-text-muted);
}
.topup-esim__flag {
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  flex-shrink: 0; border: 1px solid var(--color-border); background: var(--color-bg);
}
.topup-esim__flag svg { width: 150%; height: 100%; object-fit: cover; }
.topup-esim strong { color: var(--color-text); font-weight: var(--weight-semibold); }

/* Paket-Liste — eine ruhige Spalte, sortiert (Reihenfolge macht sortPackages in topup.js). */
.topup-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-7); }
.topup-list .price-row { width: 100%; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.topup-list .price-row__title, .topup-list .price-row__meta { display: block; }

.topup-pay { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; }
.topup-error { margin: 0; }

.topup-message { max-width: 460px; margin-inline: auto; text-align: center; }
.topup-message__text { color: var(--color-text-muted); margin: 0 0 var(--space-5); }
.topup-message .btn { display: inline-flex; }

.status-card__head {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-bottom: var(--space-6); text-align: center;
}
.status-card__head h1 {
  font-size: var(--text-h3-size); font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em; margin: 0;
}

/* Ring-Anzeiger statt Balken (Design-Entscheidung nach Bujars Feedback zum
   alten Live-Vorbild) — reines Inline-SVG, keine Bibliothek. r=70 im
   172x172-viewBox, Kreisumfang wird in esim-status.js berechnet. */
.gauge-wrap { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.gauge { position: relative; width: 172px; height: 172px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge__track, .gauge__value { fill: none; stroke-linecap: round; stroke-width: 14; }
.gauge__track { stroke: var(--color-surface); }
.gauge__value {
  stroke: var(--color-brand);
  transition: stroke-dashoffset var(--duration-slow) var(--ease-standard);
}
/* Warnfarbe erst ab 80% Verbrauch — an die bestehende 80/100%-Push-Grenze
   angelehnt (siehe CLAUDE.md), keine frei erfundene Ampel-Logik. */
.gauge--warn .gauge__value { stroke: var(--color-warning); }
.gauge__center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gauge__num { font-size: var(--text-h2-size); font-weight: var(--weight-extrabold); letter-spacing: -0.01em; line-height: 1; }
.gauge__label { font-size: var(--text-small-size); font-weight: var(--weight-medium); color: var(--color-text-muted); margin-top: var(--space-1); }
.gauge__sub { text-align: center; font-size: var(--text-small-size); color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* Aktivierungs-Block (eSIM noch nicht aktiv): QR + "ODER" + Direkt-Installations-
   Knopf — Aufbau und Wortlaut gespiegelt aus der Bestell-E-Mail (email.ts). */
.activate { text-align: center; margin-bottom: var(--space-6); }
.activate-qr {
  display: inline-block; padding: var(--space-3); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.activate-qr__img { display: block; width: 200px; height: 200px; border-radius: var(--radius-sm); }
.activate-instr {
  max-width: 380px; margin: var(--space-4) auto;
  font-size: var(--text-small-size); color: var(--color-text-muted); line-height: 1.5;
}
.activate-or {
  display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0;
  font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 1.5px;
  color: var(--color-text-muted);
}
.activate-or::before, .activate-or::after { content: ''; flex: 1; border-top: 1px solid var(--color-border); }
.activate-btn { display: inline-flex; }
.activate-ios { margin: var(--space-3) 0 0; font-size: var(--text-tiny-size, 12px); color: var(--color-text-muted); }
.activate-manual {
  margin-top: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-md); text-align: left;
}
.activate-manual__label {
  display: block; margin-bottom: var(--space-1);
  font-size: 11px; font-weight: var(--weight-bold); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--color-text-muted);
}
.activate-manual__code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; word-break: break-all; line-height: 1.5;
}

.status-rows { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-bottom: var(--space-6); }
.status-row { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--text-small-size); }
.status-row span:first-child { color: var(--color-text-muted); }
.status-row span:last-child { font-weight: var(--weight-bold); }

/* Skeleton-Ladezustand statt nacktem "Lädt…"-Text — pulsierende Platzhalter
   in der Silhouette der fertigen Karte, fühlt sich schneller an. */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-border) 50%, var(--color-surface) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--color-surface); } }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton--ring { width: 172px; height: 172px; border-radius: 50%; margin: 0 auto var(--space-5); }
.skeleton--line { height: 12px; margin: 0 auto var(--space-3); }
.skeleton--pill { height: 40px; border-radius: var(--radius-pill); margin-top: var(--space-6); }
.skeleton--row { height: 52px; border-radius: var(--radius-md); margin-bottom: var(--space-3); }

/* ============================================================
   Warum unoesim — der EINE blaue Moment (Bujar 17.07.)
   Nutzt die bestehende .crsl-Marquee-Engine mit weißen Pillen auf Blau.
   ============================================================ */
.why {
  position: relative;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  padding: var(--space-12) 0 var(--space-11);
  overflow: hidden;
}
/* Tiefe: Licht von oben, satter Grund unten (Apple-Material: eine Lichtquelle) */
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(78% 52% at 50% -6%, rgba(255, 255, 255, 0.20), transparent 62%),
    radial-gradient(130% 90% at 50% 118%, rgba(8, 31, 133, 0.95), transparent 68%),
    linear-gradient(180deg, var(--color-brand) 0%, var(--uno-tief) 100%);
}
.why > .u-container,
.why > .why-crsl { position: relative; z-index: 1; }
/* Grosser, sehr blasser Flügel als Marken-Textur — eigenes SVG (#uno-butterfly),
   keine KI-Generierung. Zentriert HINTER dem Karten-Raster (Bujar 17.07.). */
.why__reasons { position: relative; }
.why__wing {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: min(560px, 108%);
  transform: translate(-50%, -50%);
  color: #fff;
  opacity: 0.06;
}
.why__wing svg { width: 100%; height: auto; display: block; }
.why__reasons > .why-card { position: relative; z-index: 1; }

.why__head { max-width: 42rem; }
/* Bujar 27.07.: "Warum unoesim" gross UEBER dem Pillen-Carousel */
.why__head--top .why__title { margin-bottom: 0; }
.why__title.why__title--sub {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.eyebrow--on-blue { color: rgba(255, 255, 255, 0.75); }
.eyebrow--on-blue::before { background: rgba(255, 255, 255, 0.6); }
.why__title {
  font-size: clamp(2.4rem, 6.4vw, 4.25rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;   /* negative Laufweite bei grossem Display-Text (Apple) */
  margin: var(--space-4) 0 var(--space-5);
  max-width: 16ch;
  text-wrap: balance;
}
.why__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch;
}

.why__reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}
@media (min-width: 760px) {
  .why__reasons { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
/* Verfeinerte Kachel mit Licht-Kante oben (Apple-Material), kein schweres Glas.
   Kein backdrop-filter — Mobile-Compositing. */
.why-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.why-card__ic {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  margin-bottom: var(--space-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.why-card__ic svg { width: 1.35rem; height: 1.35rem; }
.why-card__t {
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
}
.why-card__b { font-size: var(--text-small-size); line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

/* Marquee auf Blau: sitzt oben in der Section als Trust-Band über der Headline,
   aber mit etwas Luft darüber (Bujar 17.07.: „kann ruhig ein bisschen nach unten"). */
.why-crsl { margin-top: var(--space-8); margin-bottom: var(--space-10); }
.why-crsl .pill.is-solid {
  box-shadow:
    0 2px 6px rgba(8, 31, 133, 0.25),
    0 16px 34px rgba(8, 31, 133, 0.30),
    inset 0 0 0 1px rgba(16, 19, 30, 0.04);
}
.crsl-word { padding-inline: 22px; }
.crsl-word .label { color: var(--uno-tinte); font-weight: var(--weight-semibold); }
.crsl-word .ic { width: 15px; height: 15px; margin-right: 8px; color: var(--color-brand); flex: 0 0 auto; }
.crsl-logo { padding-inline: 22px; }
.crsl-pay { height: 20px; width: auto; display: block; }
.crsl-bfly { padding-inline: 20px; }
.crsl-bfly svg { width: 30px; height: 23px; color: var(--color-brand); display: block; }


/* ---------- Aktivierungs-Carousel (Bujar 27.07.) ----------
   Apple-Gefühl über NATIVES Scrollen: scroll-snap + Touch-Momentum vom Browser,
   kein JS-Physik-Nachbau. JS ergänzt nur Maus-Drag (Desktop), Pfeile, Punkte.
   Spec: docs/plans/2026-07-27-aktivierungs-carousel-design.md */
.activ-sec {
  background: var(--color-bg);
  padding: var(--space-11) 0 var(--space-10);
  overflow: hidden;
}
/* aktivierung.html: dort steht der Abschnitt ganz oben und braucht Luft unter dem
   festen Kopfbereich (68px) — wie .about-hero-sec auf ueber-uns.html. */
.activ-page .activ-sec { padding-top: calc(68px + var(--space-9) + env(safe-area-inset-top, 0px)); }
.activ-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-7);
  flex-wrap: wrap;
}
.activ-head__text { min-width: min(100%, 34ch); }
.activ-toggle {
  display: inline-flex;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 3px;
  flex-shrink: 0;
}
.activ-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.activ-toggle__opt:active { transform: scale(0.97); }
.activ-toggle__opt.active {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}
.activ-crsl { margin-top: var(--space-7); }
.activ-track {
  position: relative;
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Erste Karte auf der Container-Linkskante, Rest läuft aus dem Bild („Peek") */
  --activ-inset: max(var(--space-5), calc((100vw - 1120px) / 2 + var(--space-5)));
  padding: 6px var(--activ-inset) var(--space-4);
  scroll-padding-inline: var(--activ-inset);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.activ-track::-webkit-scrollbar { display: none; }
.activ-track:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: -2px;
  border-radius: var(--radius-lg);
}
@media (hover: hover) { .activ-track { cursor: grab; } }
.activ-track.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.activ-track.swap { opacity: 0; }
body.booted .activ-track { transition: opacity var(--duration-base) var(--ease-standard); }
.activ-card {
  flex: 0 0 auto;
  /* Bujar 31.07.: Karte in echter Handy-Form (600x1300).
     Ziel aus Nutzersicht: EIN Schritt komplett sichtbar — Bild, Nummer, Satz, ohne
     Scrollen. Der Screenshot muss nicht lesbar sein, nur wiedererkennbar; die Worte
     stehen im Satz darunter. Deshalb auch an die Bildschirmhoehe gekoppelt, sonst
     wird die Karte auf kurzen Geraeten (iPhone SE) wieder zu hoch.
     Rechner 300px · Handy 58vw · kurze Geraete 30svh. */
  width: min(300px, 58vw, 30vh);
  width: min(300px, 58vw, 30svh);
  margin: 0;
  scroll-snap-align: start;
}
@media (max-width: 640px) { .activ-card { --arrow-w: 30px; } }
.activ-sec[data-os="ios"] .activ-card--android { display: none; }
.activ-sec[data-os="android"] .activ-card--ios { display: none; }
/* Saily-Look (Bujar 28.07.): das Handy steht als eigenes Geraet auf einer hellen
   Buehne statt randlos die Karte zu fuellen. Der Rand ringsum ist der Platz, in den
   der Marker-Pfeil zeigen darf — deshalb hier KEIN overflow:hidden. */
.activ-shot {
  position: relative;
  /* Bujar 28.07.: kein Rand mehr — der Screenshot fuellt die ganze Karte.
     Verhaeltnis = Bildverhaeltnis, damit nichts beschnitten wird. */
  aspect-ratio: 600 / 1300;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 18px 44px -20px rgba(10, 13, 40, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Screen-Flaeche. Exakt die Bildflaeche, damit die Marker-Koordinaten
   (--tx/--ty in % des Screenshots) unveraendert gueltig bleiben.
   Bujar 28.07.: KEIN dunkles Geraete-Gehaeuse — nur der Screenshot mit weicher Kante. */
.activ-phone {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 600 / 1300;
  border-radius: inherit;
}
.activ-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  -webkit-user-drag: none;
}
/* Orange Tipp-Markierung (Bujar 27.07.: Blau war fast unsichtbar — jetzt kräftiges
   Tutorial-Orange mit Rahmen, pulsierendem Ring UND Pfeil, der auf die Stelle zeigt).
   Liegt ÜBER dem Screenshot (nicht eingebrannt) — Position pro Karte via --tx/--ty,
   Pfeil-Richtung/-Ort via --ax/--ay/--arot. Der markierte Bereich bleibt lesbar. */
.activ-tap {
  --activ-mark: #FF6A00;
  position: absolute;
  left: var(--tx, 50%);
  top: var(--ty, 50%);
  width: var(--tw, 44px);
  height: var(--th, 44px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: var(--tr, 12px);
  border: 3px solid var(--activ-mark);
  background: rgba(255, 106, 0, 0.14);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 6px 18px rgba(255, 106, 0, 0.32);
}
/* Pulsierender Ring */
.activ-tap::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 3px solid var(--activ-mark);
  animation: activTapPulse 2.1s cubic-bezier(0.2, 0, 0.4, 1) infinite;
}
/* Oranger Pfeil, der auf die Stelle zeigt — Standard: rechts oben, zeigt nach unten-links.
   Pro Karte via --ax (Mitte X), --ay (Mitte Y), --arot (Drehung) verschieben. Zeigt
   im Grundzustand nach rechts (→); mit --arot in die passende Richtung drehen.
   --arrow-display:none blendet den Pfeil aus (z. B. wenn der Rahmen fast die ganze
   Karte einnimmt). */
.activ-tap::after {
  content: "";
  position: absolute;
  left: var(--ax, 76%);
  top: var(--ay, -110%);
  width: var(--arrow-w, 42px);
  height: calc(var(--arrow-w, 42px) * 24 / 42);
  display: var(--arrow-display, block);
  transform: translate(-50%, -50%) rotate(var(--arot, 90deg));
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M3 12H33M26 5L40 12 26 19' fill='none' stroke='%23FF6A00' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}
@keyframes activTapPulse {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(1.13); opacity: 0; }
}
.activ-cap {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-inline: var(--space-1);
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text);
}
.activ-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--uno-schleier);
  color: var(--color-brand);
  font-size: 13px;
  font-weight: var(--weight-extrabold);
  margin-top: 1px;
}
/* Abschluss-Karte im Marken-Look (kein Screenshot) */
.activ-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: linear-gradient(168deg, #1D43E6 0%, var(--color-brand) 46%, #081E7E 100%);
  border: none;
  color: var(--color-text-on-brand);
}
.activ-done__fly { width: 74px; color: rgba(255, 255, 255, 0.95); }
.activ-done__fly svg { width: 100%; height: auto; display: block; }
.activ-done__t {
  font-size: 26px;
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.01em;
}
.activ-done__b {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-width: 20ch;
}
.activ-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-2);
}
.activ-dots { display: flex; gap: 7px; }
.activ-dots button {
  width: 7px;
  height: 7px;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-pill);
  background: var(--uno-schleier-tief);
  transition: width var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard);
}
.activ-dots button.active { width: 22px; background: var(--color-brand); }
.activ-arrows { display: flex; gap: var(--space-2); }
.activ-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.activ-arrow:hover { background: var(--uno-schleier); color: var(--color-brand); }
.activ-arrow:active { transform: scale(0.94); }
.activ-arrow[aria-disabled="true"] { opacity: 0.35; }
@media (hover: none) { .activ-arrows { display: none; } }
@media (max-width: 720px) {
  .activ-head { align-items: flex-start; }
  .activ-toggle { width: 100%; }
  .activ-toggle__opt { flex: 1; justify-content: center; }
  .activ-cap { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .activ-tap::before { animation: none; transform: scale(1); opacity: 0.9; }
  .activ-track { scroll-behavior: auto; }
  .activ-track.swap { opacity: 1; }
}

/* Überleitung von „So funktioniert's" zum Aktivierungs-Carousel (Bujar 27.07.:
   die Ankunft gehoert ans ENDE der Aktivierung, nicht ans Ende des Kaufs). */
.journey-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--uno-schleier);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.journey-next:hover {
  text-decoration: none;
  border-color: var(--color-brand);
  transform: translateY(-2px);
}
.journey-next:active { transform: translateY(0); }
.journey-next__text { display: flex; flex-direction: column; gap: 2px; }
.journey-next__t { font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.journey-next__b { font-size: 14.5px; }
.journey-next__ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-brand);
  color: var(--color-text-on-brand);
}
@media (max-width: 720px) {
  .journey-next { padding: var(--space-4) var(--space-5); gap: var(--space-4); }
  .journey-next__t { font-size: 16px; }
}