/* ============================================================
   XINON Design System — xinon.css
   Canonical component stylesheet. One system for:
     • the four websites   (new.xinon.at / xinon.eu / xinon.systems / portal.xinon.at)
     • the shop            (online-order.xinon.at)
     • print/marketing     (flyers — brand layer only)
   Source of truth: portal.xinon.at (finest work) on top of the shop
   style.css, reconciled with new.xinon.at/css/base.css and the flyer
   GUIDELINES. No build step, no CDN. Plain CSS custom properties.

   Token naming is the SHOP naming (--primary, --yellow, …) extended
   with marketing aliases (--on-surface, --secondary-container, …) so
   both existing markups keep working.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin.woff") format("woff");
}

/* ---------- Tokens ---------- */
:root {
  /* Brand — canonical names. --blue is sampled from the logo; --navy is a darker
     shade of it for headings, text and deep surfaces (it is not a logo colour). */
  --blue: #005284;                 /* XINON blue — buttons, bands, links */
  --navy: #003b60;                 /* headings, structure, footer */
  /* Material-style names the shop and base.css markup use. Aliases only. */
  --primary: var(--navy);
  --primary-container: var(--blue);
  --primary-fixed: #cee5ff;        /* tonal blue — subtle fills */
  --primary-fixed-dim: #97cbff;
  --ui-blue: #44bef1;              /* interactive accent, input focus halo */
  --focus: var(--blue); /* focus ring on light surfaces (8.2:1 on white) */
  --yellow: #fbc51d;               /* XINON yellow, sampled from the logo — primary action only */
  --yellow-dim: #f4bf13;
  --yellow-soft: #fff6d6;
  --yellow-fixed: #ffdf95;
  --on-yellow: #4a3800;

  /* Surfaces */
  --surface: #f1fbff;              /* app background (cool tint) */
  --surface-low: #e9f6fb;
  --surface-variant: #d8e5e9;
  --card: #ffffff;

  /* Text */
  --text: #121d21;
  --muted: #41474f;

  /* Lines */
  --outline: #717880;              /* strong line / input border */
  --border: #c1c7d0;               /* default line */

  /* Error */
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  /* ---- Marketing aliases (so base.css markup keeps working) ---- */
  --on-surface: var(--text);
  --on-surface-variant: var(--muted);
  --on-background: var(--text);
  --on-primary: #ffffff;
  --on-primary-container: #8dc7fe;
  --secondary-container: var(--yellow);
  --on-secondary-container: var(--on-yellow);
  --secondary-fixed: var(--yellow-fixed);
  --secondary-fixed-dim: var(--yellow-dim);
  --surface-container-lowest: var(--card);
  --surface-container-low: var(--surface-low);
  --outline-variant: var(--border);
  --xinon-blue: var(--blue);
  --xinon-yellow: var(--yellow);
  --xinon-ui-blue: var(--ui-blue);

  /* Type */
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Spacing (8px base) */
  --sp-xs: 4px;
  --sp-base: 8px;
  --sp-sm: 12px;
  --sp-md: 24px;
  --sp-lg: 48px;
  --sp-xl: 80px;
  --gutter: 24px;

  /* Radius — soft, never pill */
  --r-sm: 0.125rem;
  --r: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;

  /* Elevation — used on hover only */
  --shadow-card: 0 10px 30px rgba(0, 59, 96, .14);
  --shadow-nav: 0 1px 0 var(--border);

  /* Motion — short, decelerating, only in answer to an action.
     Curves are Material 3 (standard / emphasized decelerate / accelerate). */
  --dur-fast: 120ms;               /* colour, press */
  --dur-base: 200ms;               /* hover, small state change */
  --dur-slow: 320ms;               /* expand, yellow bar sweep, dropdown */
  --dur-hero: 1800ms;              /* page-load moment: hero fiber pulse */
  --dur-count: 2200ms;             /* figures roll in once when they come into view (digits + line light) */
  --dur-stagger: 150ms;            /* offset between neighbouring figures */
  --dur-zoom: 7000ms;              /* very slow zoom of a hero photo, once */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1); /* fast start, long slow landing: figures roll */

  /* Layout */
  --wrap: 760px;                   /* app / form column */
  --container-max: 1200px;         /* marketing container */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Marketing pages end in the navy footer: navy canvas, so Safari's rubber-band overscroll and toolbar area show navy
   instead of white (body keeps the light surface). */
html:has(> body > .site-footer) { background: var(--navy); }
/* iOS Safari 26 tints its bottom toolbar from a fixed element at the bottom edge (else from body's light background);
   theme-color is ignored. A navy strip, pushed 8px below the screen so it stays invisible, makes the bar navy like the
   footer. iOS only (-webkit-touch-callout). */
@supports (-webkit-touch-callout: none) {
  body:has(> .site-footer)::after { content: ""; position: fixed; left: 0; right: 0; bottom: -8px; height: 10px; background: var(--navy); pointer-events: none; z-index: 100; }
}
body {
  font: 16px/1.6 var(--font-sans);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; } /* keeps the aspect ratio when max-width shrinks an <img> with width/height attributes */
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); }
/* Links in running copy keep an underline (WCAG 1.4.1). Zero specificity, so
   any component rule (nav, footer, cards, buttons) overrides it. */
:where(p, li, dd, td, label) a:where(:not([class])) { text-decoration: underline; text-underline-offset: 3px; }
strong { font-weight: 700; }
h1, h2, h3, h4 { line-height: 1.15; color: var(--navy); font-weight: 800; letter-spacing: -0.01em; }
address { font-style: normal; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.shop { padding-top: var(--sp-md); padding-bottom: 40px; }
.section { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
.section-sm { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; margin-bottom: 16px; }
.grid .wide { grid-column: span 2; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
/* Photo row: three small own photos above a page's text (Wholesale pages, as on the old site); stays three across on phones. */
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm); margin-bottom: var(--sp-md); }
.photo-row img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
/* Section surfaces for rhythm on long pages: white and tonal blue next to the default --surface. */
:is(.section, .section-sm).is-white { background: var(--card); }
:is(.section, .section-sm).is-tonal { background: var(--primary-fixed); }
/* Navy: at most one band per page, for a network or statement topic. Running text turns white; white cards
   (.feature) stay as they are and stand out on it. */
:is(.section, .section-sm).is-navy { background: var(--navy); color: rgba(255, 255, 255, .85); }
:is(.section, .section-sm).is-navy :is(.prose, .h2) :is(h2, h3, strong), :is(.section, .section-sm).is-navy .h2 { color: var(--on-primary); }
:is(.section, .section-sm).is-navy .prose a:not(.btn) { color: var(--on-primary); text-decoration: underline; }
body.is-embedded { background: var(--card); }
.is-embedded .shop { padding-bottom: 24px; }
/* Sticky footer: short pages keep .footer (app) and .site-footer (marketing) at the bottom.
   width: 100% keeps a centered .wrap main at full column width inside the flex column. */
body:has(> .site-footer), body:has(> .footer) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:has(> .site-footer) > main, body:has(> .footer) > main { flex: 1 0 auto; width: 100%; }
/* Form-only app pages (login, password, short forms): centered 460px column instead of 760px */
.wrap.is-narrow { max-width: calc(460px + 32px); }
/* Marketing subpage: content column plus a 320px side column (contact box, downloads).
   The aside stays in view under the sticky nav; below 1024px it follows the content. */
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-lg); align-items: start; }
.with-aside > .aside { position: sticky; top: calc(64px + var(--sp-md)); display: grid; gap: var(--sp-md); }

/* ---------- Typography helpers ---------- */
.page-head { margin: 0 0 24px; }
.page-head h1 { font-size: clamp(1.625rem, 4.2vw, 2.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); }
.page-lead { margin: 10px 0 0; max-width: 38rem; font-size: 1.0625rem; color: var(--muted); }
.section-title { margin: 32px 0 12px; font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--navy); }
.section-title:first-child { margin-top: 0; }
.eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); display: inline-block; margin-bottom: var(--sp-sm); }
/* Light surfaces get blue (yellow-dim on #f1fbff is 1.6:1); yellow stays on dark surfaces. */
:is(.band, .stat-band, .footer, .site-footer) .eyebrow { color: var(--yellow-dim); }
.label-caps { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.h-display { font-size: clamp(30px, 5vw, 48px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; }
.h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; line-height: 1.15; }
.h3 { font-size: 24px; font-weight: 700; }
.lead { font-size: 18px; color: var(--muted); }
.body-md { font-size: 16px; }
.body-sm { font-size: 14px; }
.text-muted { color: var(--muted); }
.text-primary { color: var(--navy); }
.text-yellow { color: var(--yellow-dim); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.num { font-family: var(--font-mono); }
.speed { font-family: var(--font-mono); font-size: .875rem; font-weight: 700; color: var(--blue); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Small grey notes next to a value: "netto", "brutto", "erfüllt".
   .amount-note stays inline, .fact-note sits on its own line under a fact. */
.amount-note { font-size: .8125rem; font-weight: 400; color: var(--muted); }
.fact-note { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); }

/* Running text (marketing copy): paragraphs, sub-headings and bullet lists with a small
   blue square marker. Line length stays readable; components inside keep their own spacing. */
.prose { max-width: 72ch; }
/* Blocksatz for running text (2026-10-21): .prose paragraphs are justified with German hyphenation wherever a line holds
   about 70+ characters, i.e. from 768px up. Phones and the two-up half columns (.grid-2 from 1024px) stay left-aligned,
   as do lists, cards, features, heroes, bands and forms (none of them are .prose p). Lines before a <br> stay left. */
@media (min-width: 768px) {
  /* 8 4 3: only words of 8+ letters, 4 before / 3 after the break (Chrome/Edge; Safari hyphenates sparingly anyway).
     Measured over all pages: 32 instead of 57 hyphenated breaks, none on two lines in a row. No text-wrap: pretty,
     it made justified lines looser. */
  .prose p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 4 3; }
}
@media (min-width: 1024px) {
  .grid-2 > .prose p { text-align: start; -webkit-hyphens: manual; hyphens: manual; }
}
.prose > * + * { margin-top: calc(var(--sp-base) * 2); }
.prose > h2 { margin-top: var(--sp-lg); font-size: clamp(22px, 2.4vw, 28px); }
.prose > h3 { margin-top: var(--sp-md); font-size: 1.25rem; }
.prose > :is(h2, h3) + * { margin-top: var(--sp-sm); }
.prose > :first-child { margin-top: 0; }
.prose ul { display: grid; gap: var(--sp-xs); }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li::before { content: ""; position: absolute; top: calc(.8em - 3px); left: 4px; width: 6px; height: 6px; border-radius: var(--r-sm); background: var(--blue); }
.prose ol { display: grid; gap: var(--sp-xs); padding-left: 22px; }
.prose li > :is(ul, ol) { margin-top: var(--sp-xs); }
.prose strong { color: var(--navy); }

/* ---------- Icons ----------
   XINON line icons (24 grid, 2px stroke, round), same style as XFon.
   <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#fiber"/></svg>
   Source: tools/icons.py → assets/icons/*.svg + assets/icons.svg (sprite). */
.icon { display: inline-block; flex: none; width: 24px; height: 24px; max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon.is-sm { width: 20px; height: 20px; }
.icon.is-lg { width: 32px; height: 32px; }
/* Platform marks (Windows, Apple) on download buttons only: filled, in the text colour; not part of the line set */
.icon.is-brand { fill: currentColor; stroke: none; }

/* ---------- Buttons ----------
   .btn = primary (yellow). Variants via is-* classes.
   Aliases .btn-primary/.btn-secondary/.btn-ghost/.btn-light keep the
   marketing (base.css) markup working. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: var(--r);
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: scale(.98); } /* press feedback */
.btn:hover { background: var(--yellow-dim); color: var(--on-yellow); }
.btn:disabled { opacity: .7; cursor: progress; }
.btn.is-quiet, .btn-ghost { background: var(--card); border-color: var(--blue); color: var(--blue); }
.btn.is-quiet:hover, .btn-ghost:hover { background: var(--primary-fixed); color: var(--navy); }
.btn.is-quiet:disabled { opacity: .55; cursor: not-allowed; }
.btn.is-quiet:disabled:hover { background: var(--card); color: var(--blue); }
.btn.is-dark, .btn-primary { background: var(--blue); color: #fff; }
.btn.is-dark:hover, .btn-primary:hover { background: var(--navy); color: #fff; }
.btn.is-soft { background: var(--primary-fixed); color: var(--navy); }
.btn.is-soft:hover { background: var(--primary-fixed-dim); color: var(--navy); }
.btn.is-light, .btn-light { background: #fff; color: var(--blue); }
.btn.is-light:hover, .btn-light:hover { background: var(--primary-fixed); color: var(--navy); }
.btn.is-small { min-height: 40px; padding: 8px 16px; }
.btn-secondary { background: var(--yellow); color: var(--on-yellow); }
.btn-secondary:hover { background: var(--yellow-dim); }
.btn:focus-visible, .link:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.site-top, .band, .hero, .stat-band, .footer, .site-footer, .video-consent) :focus-visible { outline-color: var(--on-primary); }
.link { font: inherit; padding: 0; border: 0; background: none; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--navy); }
.inline { margin-top: 16px; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.order-step .actions { margin-top: 24px; } /* same 24px as .not-found above it; collapses with margins already there */

/* ---------- Top bar (app) ---------- */
.topbar { position: relative; overflow: hidden; background: var(--card); border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.logo { position: relative; z-index: 1; display: block; }
.logo img { display: block; height: 32px; width: auto; }
.topbar-contact { position: relative; z-index: 1; font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--navy); text-decoration: none; }
.topbar-contact:hover { color: var(--blue); }
.topbar-deco { position: absolute; top: 0; right: -48px; width: 256px; height: 100%; background: var(--yellow); opacity: .2; transform: skewX(-30deg); }
.account { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; font-size: .875rem; }
.account-name { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.account-name strong { color: var(--navy); }
.account-name span { font-family: var(--font-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); }

/* ---------- Site nav (marketing) ---------- */
/* Contact line above the nav (address, phone, mail). It scrolls away; the nav stays sticky. */
.site-top { background: var(--navy); color: var(--on-primary); }
.site-top .site-top-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-xs) var(--sp-md); min-height: 36px; padding-top: var(--sp-xs); padding-bottom: var(--sp-xs); }
.site-top-item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
a.site-top-item:hover { color: var(--on-primary); }
.site-top-item .icon { width: 16px; height: 16px; color: var(--on-primary-container); }
.site-nav { position: sticky; top: 0; z-index: 50; background: var(--card); border-bottom: 1px solid var(--border); }
/* No overflow clip here: dropdowns and the mobile panel hang below the bar (Safari clips both axes
   even for overflow-x: clip). The deco clips its own slanted shape instead. */
.site-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; }
.nav-logo img { height: 32px; width: auto; }
.nav-right { display: flex; align-items: center; gap: var(--sp-md); position: relative; z-index: 1; }
.nav-deco { position: absolute; top: 0; right: 0; width: 256px; height: 100%; overflow: hidden; z-index: 0; pointer-events: none; }
.nav-deco::before { content: ""; position: absolute; inset: 0; background: var(--yellow); opacity: .2; transform: skewX(-30deg) translateX(48px); }
/* Spacing shrinks from 24px to 12px on narrow desktops so ten items still fit at 1024px; labels never wrap. */
.nav-links { display: flex; align-items: center; gap: clamp(var(--sp-sm), 1.6vw, var(--sp-md)); }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text); padding: 6px 2px; border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active, .nav-links a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--ui-blue); }
/* Dropdown groups: <li class="nav-group"><button class="nav-toggle" aria-expanded> + <ul class="nav-menu">.
   assets/nav.js toggles aria-expanded; mouse users also get hover. */
.nav-group { position: relative; }
/* Links and toggles share one box (flex items, same padding and line-height), so labels and
   underlines line up; buttons would otherwise get line-height: normal from the browser. */
.nav-links > li { display: flex; align-items: center; }
.nav-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text); font-size: 14px; font-weight: 500; line-height: inherit; white-space: nowrap; }
.nav-toggle .icon { width: 16px; height: 16px; color: var(--blue); transition: transform var(--dur-base) var(--ease-standard); }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"], .nav-group:has([aria-current="page"]) > .nav-toggle { color: var(--navy); border-bottom-color: var(--ui-blue); }
.nav-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: calc(100% + 14px); left: -14px; z-index: 60; min-width: 260px; padding: 6px; border: 2px solid var(--blue); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-card); animation: drop var(--dur-base) var(--ease-enter); }
.nav-menu::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px; } /* hover bridge */
.nav-toggle[aria-expanded="true"] + .nav-menu { display: block; }
.nav-links .nav-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r); color: var(--text); font-size: 15px; white-space: nowrap; }
.nav-links .nav-menu a:hover { background: var(--primary-fixed); color: var(--navy); }
.nav-links .nav-menu a[aria-current="page"] { background: var(--surface-low); box-shadow: inset 4px 0 0 var(--yellow); color: var(--navy); font-weight: 700; }
@media (hover: hover) and (min-width: 1024px) {
  .nav-group:hover > .nav-menu { display: block; }
  .nav-group:hover > .nav-toggle { color: var(--navy); border-bottom-color: var(--ui-blue); }
}
.lang-toggle { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; user-select: none; }
.lang-toggle button { background: none; border: none; padding: 2px 4px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.lang-toggle button.active, .lang-toggle button:hover { color: var(--yellow-dim); }
.lang-toggle .sep { color: var(--border); }
.nav-burger { display: none; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: none; color: var(--navy); font-size: 24px; }
.nav-burger .icon { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.nav-burger .icon + .icon { opacity: 0; transform: rotate(-90deg); }
.nav-burger[aria-expanded="true"] .icon:first-child { opacity: 0; transform: rotate(90deg); }
.nav-burger[aria-expanded="true"] .icon + .icon { opacity: 1; transform: none; }

/* ---------- Blue band / hero ---------- */
.band { position: relative; overflow: hidden; padding: 16px 0 26px; background: var(--blue); color: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%); }
.band-deco { position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: var(--yellow); opacity: .1; transform: skewX(-20deg) translateX(25%); }
.band-inner { position: relative; z-index: 1; }
/* Hero: one deep blue field, sentence-case headline, yellow only for the offer.
   The single orchestrated motion: a light pulse runs once along a fiber line. */
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--blue) 0%, var(--navy) 100%); color: var(--on-primary); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%); }
.hero .hero-deco { position: absolute; top: 0; right: 0; width: 38%; height: 100%; background: var(--on-primary); opacity: .045; transform: skewX(-20deg) translateX(30%); z-index: 0; }
.hero .fiber-pattern { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero .fiber-pattern path { stroke: var(--on-primary); stroke-opacity: .1; stroke-width: 1.2; }
.hero .fiber-pattern path:nth-child(2) { stroke: var(--yellow); stroke-opacity: .9; stroke-dasharray: 90 1400; stroke-dashoffset: -1300; animation: fiber-pulse var(--dur-hero) var(--ease-standard) 400ms 1 both; }
@keyframes fiber-pulse { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -1300; } }
.hero .hero-inner { position: relative; z-index: 1; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(64px, 9vw, 120px); }
.hero .eyebrow { color: var(--yellow); }
.hero h1 { max-width: 15em; margin-bottom: var(--sp-sm); color: var(--on-primary); font-size: clamp(36px, 5.6vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; text-transform: none; }
.hero .h1-sub { max-width: 32em; margin-bottom: var(--sp-md); color: var(--yellow); font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; }
.hero .hero-box { max-width: 40rem; display: flex; flex-direction: column; gap: var(--sp-sm); }
.hero .hero-box p { color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.6; }
.hero .hero-box .hero-cta-line { font-weight: 700; color: var(--on-primary); }
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }
/* One short reassurance line right under an action group ("Kostenlos und unverbindlich …"); muted, never a link */
.cta-note { margin-top: var(--sp-xs); color: var(--muted); font-size: 14px; line-height: 1.4; }
.hero .cta-note, .hero-offer .cta-note { color: rgba(255, 255, 255, .74); }
.hero-offer .cta-note { margin-top: 0; text-align: right; }
.hero .btn.is-quiet, .hero .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--on-primary); }
.hero .btn.is-quiet:hover, .hero .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--on-primary); color: var(--on-primary); }
/* Subpage hero: eyebrow (menu group), title, subtitle on the left, the page's main action on the right.
   About 180px instead of ~300px, so content starts in the upper third of a laptop screen. */
.hero.is-compact .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-md) var(--sp-lg); padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(48px, 5vw, 64px); }
.hero.is-compact .eyebrow { margin-bottom: var(--sp-xs); }
.hero.is-compact h1 { margin-bottom: 0; font-size: clamp(30px, 4.2vw, 48px); }
.hero.is-compact .h1-sub { margin: var(--sp-sm) 0 0; font-size: clamp(17px, 1.8vw, 22px); }
.hero.is-compact .hero-actions { margin-top: 0; }
/* Slim compact hero (xinon.eu portal): less padding and a narrower text column on the right, so the headline keeps
   two lines and the entry cards below fit on a 1280x720 laptop screen. */
.hero.is-compact.is-slim .hero-inner { padding-top: clamp(20px, 2.5vw, 32px); padding-bottom: clamp(44px, 4.5vw, 56px); }
.hero.is-compact.is-slim .hero-box { max-width: 26rem; }
.hero.is-compact.is-slim :is(h1, .h1-sub) { text-wrap: balance; }
:is(.hero.is-compact, .hero.has-media) + main > .section:first-child { padding-top: var(--sp-lg); }
/* Hero with a real photo on the right (company pages: the team in front of the building; never stock).
   Text column: eyebrow, h1, .hero-box, .hero-callout, .stats; media column: figure.hero-media > img. */
.hero.has-media .hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: var(--sp-lg); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(72px, 8vw, 112px); }
.hero.has-media h1 { font-size: clamp(34px, 4.6vw, 56px); }
.hero-media { overflow: hidden; border-radius: var(--r); }
.hero-media img { width: 100%; border-radius: var(--r); transform-origin: 50% 0; animation: media-zoom var(--dur-zoom) var(--ease-standard) both; } /* zoom grows from the top edge, so a logo near the top stays whole */
@keyframes media-zoom { from { transform: scale(1); } to { transform: scale(1.03); } }
/* Optional .is-faded: the lower part of the photo fades into the hero (busy foreground recedes, photo blends into
   the band). Mask values are alpha only, not colours. Subtle: only the bottom quarter softens. */
.hero-media.is-faded img { -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0) 75%, rgb(0 0 0 / 0) 100%); mask-image: linear-gradient(to bottom, rgb(0 0 0) 75%, rgb(0 0 0 / 0) 100%); }
/* The sentence that must not be missed, on the dark hero: yellow line and icon, white text */
.hero-callout { display: flex; align-items: flex-start; gap: var(--sp-sm); margin-top: var(--sp-md); padding: var(--sp-sm) var(--sp-md); border-left: 4px solid var(--yellow); border-radius: var(--r); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.5; }
.hero-callout .icon { flex: none; margin-top: 3px; color: var(--yellow); }
.hero-callout strong { display: block; color: var(--on-primary); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.3; }
.hero .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-md); margin-top: var(--sp-lg); }
/* Product hero (.hero.is-compact on a product page): the offer column on the right (price from above the main actions)
   and the Eckdaten as a .facts row across the full width under the title. */
.hero-offer { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-sm); }
.hero-price { color: var(--on-primary); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.hero-price span, .hero-price small { color: rgba(255, 255, 255, .74); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.hero-offer .hero-actions { justify-content: flex-end; margin-top: 0; }
.hero.is-compact .hero-inner > .facts { grid-column: 1 / -1; padding-top: var(--sp-md); border-top: 1px solid rgba(255, 255, 255, .22); }
.hero .fact { color: rgba(255, 255, 255, .88); font-size: 15px; }
.hero .fact-icon { background: rgba(255, 255, 255, .1); color: var(--yellow); }

/* ---------- Steps (progress) + portal nav ---------- */
.steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.steps li { display: flex; align-items: center; gap: 8px; }
.step-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; font-size: .6875rem; letter-spacing: 0; }
.steps .is-done { color: rgba(255, 255, 255, .85); }
.steps .is-done .step-num { background: rgba(255, 255, 255, .85); border-color: transparent; color: var(--blue); }
.steps .is-current { color: var(--yellow); }
.steps .is-current .step-num { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
/* Overview of a flow before it starts (e.g. the shop's steps on the order page): every label stays visible */
.steps.is-overview { margin-top: var(--sp-md); }
/* Online order on a marketing page: the hero (.is-order) carries title, lead and the step bar, centred like a checkout;
   the step sits in the centred form column under it. */
.hero .steps { margin-top: var(--sp-md); }
.hero.is-order .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.hero.is-order h1, .hero.is-order .hero-box { margin-inline: auto; }
.hero.is-order .steps { justify-content: center; }
.order-step { max-width: var(--wrap); margin-inline: auto; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: var(--r); color: rgba(255, 255, 255, .8); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a[aria-current="page"] { background: var(--yellow); color: var(--navy); }

/* ---------- Forms ---------- */
label { display: flex; flex-direction: column; gap: 4px; }
label > span { font-size: .875rem; font-weight: 600; }
.field-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px 1px 6px; border-radius: 999px; background: var(--error-container); color: var(--error); font-size: .75rem; font-style: normal; font-weight: 700; line-height: 1.6; white-space: nowrap; vertical-align: 1px; }
.field-hint svg { width: 13px; height: 13px; fill: currentColor; }
input, select, textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--outline); border-radius: var(--r); background: var(--card); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ui-blue); outline-offset: 0; border-color: var(--blue); }
input[aria-invalid="true"] { border-color: var(--error); }
textarea { resize: vertical; min-height: 96px; }
.error { color: var(--error); font-size: .8125rem; }
fieldset { margin: 0 0 20px; padding: 20px; border: 2px solid var(--border); border-radius: var(--r); background: var(--card); }
legend { padding: 0 8px; margin-left: -8px; font-size: 1.125rem; font-weight: 800; color: var(--navy); }
.fieldset-note { margin: 0 0 4px; font-weight: 600; color: var(--navy); }
.check { flex-direction: row; align-items: flex-start; gap: 10px; margin: 8px 0; }
.check > span { font-weight: 400; font-size: 1rem; }
.check input { margin-top: 5px; padding: 0; accent-color: var(--blue); }
.choices { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; margin: 8px 0 16px; }
.choices-label { width: 100%; font-weight: 600; font-size: .875rem; }
.choices-list { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; margin: 0 0 20px; }
.choice { min-height: 48px; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--r); background: var(--card); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
button.choice:hover { border-color: var(--blue); }
.choice-street { color: var(--muted); cursor: default; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.field-label { font-size: .875rem; font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 16px; }
.filters label { min-width: 160px; }
.form-narrow { max-width: 460px; }
/* Website forms (Kontakt, Support, XDSL order): one card with a title, the result panel, the fields in the shop's
   two-column .grid (.wide for full width; required fields carry no marker, optional ones say "(optional)") and the action. */
.form-card { padding: var(--sp-md); border: 2px solid var(--border); border-radius: var(--r); background: var(--card); }
.form-card > .grid { margin: var(--sp-md) 0; }
.form-card textarea { min-height: 160px; }
.form-card :is(.alert, .notice) { margin-top: var(--sp-sm); }
/* Two columns aligned at the top (Kontakt: details left, form right); one column below 1024px */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sp-lg); align-items: start; }
.form-narrow label { margin-bottom: 14px; }
.form-narrow input { width: 100%; }

/* Shop form logic: CSS-only toggles the order/addons steps rely on */
.billing-fields, .sepa-fields { margin-top: 12px; }
form:has(#billing_same:checked) .billing-fields { display: none; }
form:not(.sepa-only):not(:has(#pay_sepa:checked)) .sepa-fields { display: none; }
form:not(.sepa-only):not(:has(#pay_sepa:checked)) .terms-sepa { display: none; }
form:has(#pay_sepa:checked) .terms-invoice { display: none; }
.addons-form:has(input[name="addon"][value=""]:checked) .phone-number { display: none; }
.phone-number:not(:has(input[value="port"]:checked)) .phone-number-port { display: none; }
.phone-number-port { margin: 0 0 4px; font-size: .9375rem; color: var(--navy); }
.customer-type { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; font-size: .9375rem; color: var(--muted); }
.address-line { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--navy); }
.address-line svg { flex: none; width: 20px; height: 20px; fill: var(--blue); }

/* XINON select: native fallback + enhanced (select.js) */
select { appearance: none; -webkit-appearance: none; min-height: 48px; padding-right: 44px; background: var(--card) url("chevron.svg") no-repeat right 12px center / 20px 20px; cursor: pointer; }
.xselect { position: relative; }
.xselect-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 10px 12px 10px 14px; border: 1px solid var(--outline); border-radius: var(--r); background: var(--card); color: var(--navy); font: inherit; font-weight: 700; text-align: left; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.xselect-button:hover { border-color: var(--blue); }
.xselect-button:focus-visible { outline: 2px solid var(--ui-blue); outline-offset: 0; border-color: var(--blue); }
.xselect-button[aria-expanded="true"] { border: 2px solid var(--blue); padding: 9px 11px 9px 13px; box-shadow: inset 4px 0 0 var(--yellow); }
.xselect-chevron { flex: none; width: 20px; height: 20px; fill: var(--blue); transition: transform var(--dur-base) var(--ease-standard); }
.xselect-button[aria-expanded="true"] .xselect-chevron { transform: rotate(180deg); }
.xselect-options { min-width: 100%; }
.xselect-options .option { min-height: 44px; }
.xselect-options .option-icon { visibility: hidden; }
.xselect-options .option[aria-selected="true"] .option-icon { visibility: visible; }
.xselect-options .option:hover, .xselect-options .option.is-active { background: var(--primary-fixed); }
.xselect-options .option[aria-selected="true"] { background: var(--surface-low); box-shadow: inset 4px 0 0 var(--yellow); }
.xselect-options .option[aria-selected="true"].is-active { background: var(--primary-fixed); }

/* Combobox / dropdown options */
.address-search { display: flex; flex-direction: column; align-items: flex-start; }
.combobox { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-bottom: 16px; }
.combobox > label { font-size: .875rem; font-weight: 600; }
.combobox-field { position: relative; }
.combobox input { width: 100%; height: 56px; padding: 0 48px 0 46px; border: 2px solid var(--border); font-size: 1.0625rem; transition: border-color var(--dur-fast) var(--ease-standard); -webkit-appearance: none; appearance: none; }
.combobox input:focus { outline: none; border-color: var(--blue); }
.combobox input[aria-expanded="true"] { border-color: var(--blue); }
.combobox-icon { position: absolute; top: 28px; left: 15px; width: 20px; height: 20px; margin-top: -10px; fill: var(--outline); pointer-events: none; }
.combobox-field:focus-within .combobox-icon { fill: var(--blue); }
.clear { position: absolute; top: 28px; right: 6px; width: 44px; height: 44px; margin-top: -22px; padding: 12px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.clear svg { display: block; width: 20px; height: 20px; fill: var(--outline); }
.clear:hover svg { fill: var(--text); }
.spinner { position: absolute; top: 28px; right: 18px; width: 20px; height: 20px; margin-top: -10px; border: 2px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.options { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; max-height: 360px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; background: var(--card); border: 2px solid var(--blue); border-radius: var(--r); box-shadow: var(--shadow-card); animation: drop var(--dur-base) var(--ease-enter); }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes panel-down { from { opacity: 0; transform: translateY(-12px); } }
.option { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--r); cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.option + .option { margin-top: 2px; }
.option[aria-selected="true"] { background: var(--surface-low); box-shadow: inset 4px 0 0 var(--yellow); }
.option:active { background: var(--primary-fixed); }
.option-icon { flex: none; width: 20px; height: 20px; fill: var(--outline); }
.option[aria-selected="true"] .option-icon { fill: var(--blue); }
.option-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.option-main { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.option-main mark { background: none; color: var(--blue); font-weight: 800; }
.option-sub { overflow: hidden; font-size: .8125rem; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.option-arrow { flex: none; font-size: 1.5rem; line-height: 1; color: var(--outline); }
.option-empty { padding: 12px; font-size: .9375rem; color: var(--muted); }
.hint { min-height: 1.2em; margin: 0; font-size: .8125rem; color: var(--muted); }

/* TAN / one-time-code */
.tan-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 20px; border: 2px solid var(--blue); border-radius: var(--r); background: var(--card); }
.tan-form label { width: 100%; }
.tan-input { width: 100%; max-width: 280px; height: 60px; border: 2px solid var(--border); font-family: var(--font-mono); font-size: 1.75rem; font-weight: 700; letter-spacing: .35em; text-align: center; }
.tan-input:focus { outline: none; border-color: var(--blue); }
.tan-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-bottom: 20px; }

/* ---------- Cards ---------- */
.type, .product {
  position: relative; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--r);
  background: var(--card);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.type::before, .product::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-standard);
}
.type:hover, .product:hover { border-color: var(--yellow); box-shadow: var(--shadow-card); color: var(--text); }
.type:hover::before, .product:hover::before, .product.is-promo::before { transform: scaleX(1); }
.types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.type { display: flex; gap: 14px; align-items: flex-start; padding: 24px 20px 20px; color: var(--text); text-decoration: none; }
.type.is-current { border-color: var(--blue); }
.type-icon { flex: none; width: 32px; height: 32px; fill: var(--blue); }
.type-body { display: flex; flex-direction: column; gap: 4px; }
.type-name { font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--navy); }
.type-desc { font-size: .9375rem; color: var(--muted); }

.products { display: grid; gap: 16px; margin-bottom: 24px; }
.product { display: flex; align-items: center; gap: 16px; padding: 22px 20px 20px; cursor: pointer; }
.product-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.product:focus-within { border-color: var(--blue); box-shadow: var(--shadow-card); }
.product.is-selected { border-color: var(--blue); }
.product.is-promo { border-color: var(--yellow); background: linear-gradient(var(--yellow-soft), var(--card) 70%); }
.product-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.product-name { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--navy); }
.product-desc { margin: 0; font-size: .9375rem; color: var(--muted); }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.product-price small { white-space: nowrap; font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.product-meta { margin: 0; font-size: .875rem; color: var(--muted); }
.product-meta s { margin-right: 4px; }
.product-cta { display: grid; flex: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--yellow); cursor: pointer; transition: background-color var(--dur-base) var(--ease-standard); }
.product-cta svg { width: 22px; height: 22px; fill: var(--on-yellow); }
.product:hover .product-cta { background: var(--yellow-dim); }
.product-cta::after { content: ""; position: absolute; inset: 0; } /* whole card is the hit area */
.product-cta:focus-visible { outline: none; }
.product:has(.product-cta:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.promo { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .9375rem; font-weight: 700; color: var(--navy); }
.promo span::before { content: "+ "; color: var(--yellow-dim); }
.product.is-option { flex-direction: row; cursor: pointer; }
.product.is-option > .product-body { font-size: inherit; font-weight: inherit; }
.product.is-option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--blue); }
.product.is-option:has(input:checked) { border-color: var(--blue); }
.product.is-option:has(input:checked)::before { transform: scaleX(1); }
.product.is-option.is-disabled { cursor: not-allowed; opacity: .6; }
.product.is-option.is-disabled:hover { border-color: var(--border); box-shadow: none; }
.product.is-option.is-disabled:hover::before { transform: scaleX(0); }

/* Marketing card (base.css) */
.cards-section { position: relative; z-index: 2; margin-top: -72px; } /* desktop: card tops sit clearly in the blue, above the hero's slanted edge */
@media (min-width: 1024px) {
  .hero:has(+ main > .cards-section:first-child) .hero-inner { padding-bottom: calc(72px + var(--sp-lg)); }
  .hero.is-slim:has(+ main > .cards-section:first-child) .hero-inner { padding-top: 20px; padding-bottom: 88px; } /* xinon.eu: cards still fit at 1280x720 */
}
main > .cards-section:last-child { padding-bottom: var(--sp-xl); } /* cards as the page's last block: room before the footer */
.cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.card { display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--border); border-radius: var(--r); padding: var(--sp-md); position: relative; overflow: hidden; color: inherit; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-standard); }
.card:hover { border-color: var(--yellow); box-shadow: var(--shadow-card); color: inherit; }
.card:hover::before { transform: scaleX(1); }
.card .card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-sm); }
.card .card-title { font-size: 24px; font-weight: 700; color: var(--navy); }
.card .card-arrow { color: var(--border); font-size: 22px; transition: color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.card:hover .card-arrow { color: var(--yellow-dim); transform: translateX(4px); }
.card .card-desc { font-size: 16px; font-weight: 500; margin-bottom: var(--sp-md); }
.card .card-desc .sub { display: block; font-size: 14px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.card .tags { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-top: auto; }
.tag { background: var(--surface-variant); color: var(--muted); }

.feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-md); }
.feature .f-icon { width: 44px; height: 44px; border-radius: var(--r); background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: var(--sp-sm); }
.feature h3 { font-size: 18px; margin-bottom: var(--sp-xs); }
.feature p { font-size: 15px; color: var(--muted); }
/* A list inside a feature card (parallel offers side by side, e.g. Aktiv / Wellenlängen / Dark Fiber) */
.feature ul { display: grid; gap: var(--sp-xs); margin-top: var(--sp-sm); }
.feature ul > li { position: relative; padding-left: 18px; font-size: 15px; color: var(--muted); }
.feature ul > li::before { content: ""; position: absolute; top: calc(.8em - 3px); left: 2px; width: 6px; height: 6px; border-radius: var(--r-sm); background: var(--blue); }
/* Feature with actions at the bottom (help routes): the buttons line up across the row.
   .is-marked: the yellow signature line for the one card in a row that must not be missed. */
.feature:has(> .feature-actions) { display: flex; flex-direction: column; }
.feature-actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: auto; padding-top: var(--sp-md); }
.feature.is-marked { border-left: 4px solid var(--yellow); }
/* Partner exception (Luca 2026-10-21): the AnyDesk support card wears AnyDesk's red (#ef443b, from their logo file)
   and their white logo, as a courtesy to the partner. The only non-XINON colour in the system; never reuse it elsewhere.
   White text on this red passes AA only as large text, so the title is 20px bold and there is no small text. */
.feature.is-anydesk { --anydesk-red: #ef443b; border-color: var(--anydesk-red); background: var(--anydesk-red); }
.feature.is-anydesk h3 { color: var(--on-primary); font-size: 20px; }
.feature.is-anydesk .partner-logo { display: block; width: auto; height: 28px; margin-bottom: var(--sp-sm); }
.feature.is-anydesk .btn { border-color: var(--card); background: var(--card); color: var(--text); }
.feature.is-anydesk .btn:hover { border-color: rgba(255, 255, 255, .88); background: rgba(255, 255, 255, .88); color: var(--text); }
.feature.is-anydesk .btn:focus-visible { outline-color: var(--on-primary); }
/* Testimonial: the customer's words large, name and product below, yellow signature line on the left */
.quote { display: flex; flex-direction: column; gap: var(--sp-md); margin: 0; padding: var(--sp-md); border: 1px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); }
.quote blockquote { margin: 0; color: var(--text); font-size: 17px; font-weight: 500; line-height: 1.55; }
.quote figcaption { display: flex; flex-direction: column; margin-top: auto; }
.quote figcaption strong { color: var(--navy); font-size: 16px; }
.quote figcaption span { color: var(--muted); font-size: 14px; }
/* Line icon at the top of a marketing card (Kundencenter, teasers) */
.card .card-icon { margin-bottom: var(--sp-sm); color: var(--blue); }
/* Product logo instead of a line icon on a card that opens a third-party tool (MailEnable, Plesk): original colours */
.card .card-logo { display: block; align-self: flex-start; width: auto; height: 28px; margin-bottom: var(--sp-md); }
.cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* four cards: 2 × 2, no orphan */
/* Not live yet (e.g. Kundenportal): a <div class="card is-soon">, no hover and no arrow; a .tag at the bottom says so */
.card.is-soon:hover { border-color: var(--border); box-shadow: none; }
.card.is-soon:hover::before { transform: scaleX(0); }
/* Entry tiles (Startseite): one tile per customer group with its key figure and the group's pages as a .link-list.
   The yellow top line is the signature; a long list runs in two columns (.link-list.is-cols). */
.segments-section { position: relative; z-index: 2; margin-top: -32px; }
.segments { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--sp-md); align-items: stretch; }
.segment { display: flex; flex-direction: column; padding: var(--sp-md); border: 2px solid var(--border); border-top: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); }
.segment > .link-list { margin-bottom: var(--sp-md); }
/* Tile footer: the group's main action with one line of context on a tonal strip, pinned to the tile bottom */
.segment-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md); margin: auto calc(var(--sp-md) * -1) calc(var(--sp-md) * -1); padding: var(--sp-md); border-radius: 0 0 calc(var(--r) - 2px) calc(var(--r) - 2px); background: var(--primary-fixed); }
.segment-foot p { flex: 1 1 14rem; font-size: 15px; line-height: 1.45; }
.segment-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs) var(--sp-sm); margin-bottom: var(--sp-sm); }
.segment-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--primary-fixed); color: var(--blue); }
.segment-title { color: var(--navy); font-size: 26px; font-weight: 800; line-height: 1.1; }
.segment-figure { margin-left: auto; color: var(--navy); font-size: 26px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.segment-figure small { color: var(--muted); font-size: 14px; font-weight: 600; }
.link-list .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-weight: 400; }
.link-list.is-cols { column-count: 2; column-gap: var(--sp-md); }
.link-list.is-cols > li { break-inside: avoid; }
.link-list.is-cols > li a { border-bottom: 1px solid var(--border); }

/* Key facts with an icon (Eckdaten): tonal tile with a blue line icon, one line of text each */
/* Column count follows the number of entries so no row ends with a single orphan: 4 → 4, 5 → 5, 6/9 → 3, 7/8 → 4. */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm) var(--sp-md); }
.facts:not(.is-list):has(> :nth-child(4):last-child),
.facts:not(.is-list):has(> :nth-child(7):last-child),
.facts:not(.is-list):has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts:not(.is-list):has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fact { display: flex; align-items: center; gap: var(--sp-sm); min-width: 0; font-weight: 500; line-height: 1.35; }
.fact-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--primary-fixed); color: var(--blue); }
/* One column for longer entries (contact details); text with links or line breaks goes in ONE <span> */
.facts.is-list { grid-template-columns: minmax(0, 1fr); }
.facts.is-list .fact { align-items: flex-start; }
.prose ul.facts > li { padding-left: 0; }
.prose ul.facts > li::before { content: none; }
.feature .link-list > li { padding-left: 0; }
.feature .link-list > li::before { content: none; }

/* FAQ: native <details>, one question per item. The open item gets the yellow signature line. */
.faq { border: 2px solid var(--border); border-radius: var(--r); background: var(--card); }
.faq-item + .faq-item { border-top: 1px solid var(--border); }
.faq-item[open] { box-shadow: inset 4px 0 0 var(--yellow); }
.faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); min-height: 56px; padding: var(--sp-sm) 20px; color: var(--navy); font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--surface-low); }
.faq-item > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.faq-item > summary .icon { color: var(--blue); transition: transform var(--dur-base) var(--ease-standard); }
.faq-item[open] > summary .icon { transform: rotate(180deg); }
.faq-body { padding: 0 20px 20px; }

/* Embedded tool (support form, order tool, network status, speedtest): a framed full-width
   iframe; its height attribute sets the height. .is-video keeps 16:9. */
.embed { display: block; width: 100%; border: 2px solid var(--border); border-radius: var(--r); background: var(--card); }
.embed.is-video { height: auto; aspect-ratio: 16 / 9; }

/* Click-to-load video (assets/embed.js): navy 16:9 field with a short notice; the YouTube player
   is requested only after the visitor presses the yellow button, then replaces the notice. */
.video-consent { display: grid; place-content: center; justify-items: center; gap: var(--sp-md); max-width: 640px; aspect-ratio: 16 / 9; padding: var(--sp-md); border-radius: var(--r); background: var(--navy); color: rgba(255, 255, 255, .85); text-align: center; }
.video-consent p { max-width: 34rem; font-size: 15px; }
.video-consent a:not(.btn) { color: var(--on-primary); }
.video-consent-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-sm); }
.video-consent .btn.is-quiet { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--on-primary); }
.video-consent .btn.is-quiet:hover { background: rgba(255, 255, 255, .1); border-color: var(--on-primary); color: var(--on-primary); }
.video-consent.is-loaded { display: block; aspect-ratio: auto; padding: 0; background: none; }
/* Compact: a slim row (notice left, buttons right) instead of an empty 16:9 box; the player still opens at 16:9 */
.video-consent.is-compact:not(.is-loaded) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-sm) var(--sp-md); max-width: none; aspect-ratio: auto; text-align: left; }
.video-consent.is-compact:not(.is-loaded) .video-consent-actions { justify-content: flex-start; }

/* Shop embed (assets/shop.js): the online-order shop full width, it brings its own band and column.
   Without the shop's height message (origin not allowed, shop down) the link .shop-fallback replaces it. */
.embed.is-shop { height: 900px; border: 0; border-radius: 0; background: transparent; }
.embed.is-shop.is-loading { visibility: hidden; height: 240px; }
.shop-fallback { padding-block: var(--sp-sm); }

/* Team: one compact card per person, photo or initials, name, role, e-mail; same height for all */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sm) var(--sp-md); }
.person { display: flex; align-items: center; gap: var(--sp-sm); min-width: 0; padding: var(--sp-sm); border: 1px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); }
.person-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.person-initials { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-family: var(--font-mono); font-size: 1.125rem; font-weight: 700; letter-spacing: .02em; }
.person-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.person-name { font-weight: 700; color: var(--navy); }
.person-role { font-size: .875rem; color: var(--muted); }
.person-body a { font-size: .875rem; overflow-wrap: anywhere; }
/* Card action (e-mail): appears on hover / keyboard focus on pointer devices, always visible on touch.
   The address lives in title + aria-label, so the card itself shows only photo, name and role. */
.person { transition: box-shadow var(--dur-base) var(--ease-standard); }
.person:hover { box-shadow: var(--shadow-card); }
.person-actions { display: flex; flex: none; gap: var(--sp-xs); margin-left: auto; }
.person-action { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); background: var(--primary-fixed); color: var(--blue); transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.person-action:hover { background: var(--blue); color: var(--on-primary); }
@media (hover: hover) {
  .person-action { opacity: 0; transform: translateX(-6px); }
  .person:hover .person-action, .person:focus-within .person-action { opacity: 1; transform: none; }
}

/* Partner logos: equal tiles, logo only; the partner name is the image alt text */
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-sm); }
.logo-tile { display: grid; place-items: center; height: 88px; padding: var(--sp-sm) var(--sp-md); border: 1px solid var(--border); border-radius: var(--r); background: var(--card); transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.logo-tile:hover { border-color: var(--yellow); box-shadow: var(--shadow-card); }
.logo-tile img { width: auto; max-width: 100%; max-height: 48px; }

/* Side column lists: downloads and related pages, under a .label-caps title */
.aside .label-caps { display: block; margin-bottom: var(--sp-xs); color: var(--muted); }
.link-list a { display: flex; align-items: center; gap: var(--sp-base); padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--blue); font-weight: 600; line-height: 1.35; text-decoration: none; }
.link-list li:last-child a { border-bottom: 0; }
.link-list a:hover { color: var(--navy); }
.link-list a::after { content: "→"; content: "→" / ""; margin-left: auto; padding-left: var(--sp-base); color: var(--border); font-weight: 400; transition: color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.link-list a:hover::after { color: var(--yellow-dim); transform: translateX(4px); }
.link-list a[aria-current="page"]::after { content: none; }
.link-list a[aria-current="page"] { color: var(--text); }
.link-list .icon { width: 20px; height: 20px; }
/* .aside-related (written by tools/shell.py): the page's menu group; hidden on phones, where the burger menu has the same links */

/* Tariff (pricing) */
.tariffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.tariff { position: relative; background: var(--card); border: 2px solid var(--border); border-radius: var(--r); padding: var(--sp-md); display: flex; flex-direction: column; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.tariff:hover { border-color: var(--ui-blue); box-shadow: var(--shadow-card); }
.tariff.featured { border-color: var(--yellow); }
.tariff .t-speed { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; }
.tariff .t-speed small { font-size: 14px; font-weight: 600; color: var(--muted); }
.tariff .t-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 var(--sp-sm); }
.tariff .t-price { font-size: 26px; font-weight: 800; color: var(--navy); }
.tariff .t-price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tariff .t-vat { font-size: 11px; color: var(--muted); margin-bottom: var(--sp-sm); }
.tariff ul { margin: var(--sp-sm) 0 var(--sp-md); display: flex; flex-direction: column; gap: 6px; }
.tariff ul li { font-size: 14px; color: var(--text); padding-left: 22px; position: relative; }
.tariff ul li::before { content: "✓"; position: absolute; left: 0; color: var(--ui-blue); font-weight: 700; }
.tariff .btn { margin-top: auto; width: 100%; }
/* One line under the speed instead of repeating it: "symmetrisch" (icon) or the upload value */
.tariff .t-rate { display: flex; align-items: center; gap: 6px; margin: var(--sp-xs) 0 var(--sp-md); color: var(--muted); font-size: 14px; line-height: 1.35; }
.tariff .t-rate .icon { flex: none; width: 18px; height: 18px; color: var(--blue); }
.tariff .t-rate + .t-price { margin-top: auto; }
.tariffs:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tariffs:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tariffs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-sm) var(--sp-md); margin-top: var(--sp-md); }
.tariffs-foot p { color: var(--muted); font-size: 14px; }
.badge-pop { position: absolute; top: -12px; right: 16px; background: var(--yellow); color: var(--on-yellow); }

/* Contract (portal) */
.contracts { display: grid; gap: 16px; }
.contract { border: 2px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); }
.contract-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 20px 20px 16px; }
.contract-address { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 4px; font-size: .9375rem; color: var(--muted); }
.contract-address svg { flex: none; width: 18px; height: 18px; margin-top: 3px; fill: var(--blue); }
.contract-product { margin: 0; font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: var(--navy); }
.contract-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 14px 20px; background: var(--surface-low); }
.contract-facts dt { font-size: .8125rem; color: var(--muted); }
.contract-facts dd { margin: 0; font-weight: 700; color: var(--navy); }
.contract-facts .num { font-family: var(--font-mono); font-size: .9375rem; }
.contract-extras { margin: 0; padding: 12px 20px 16px; list-style: none; font-size: .9375rem; }
.contract-extras li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.contract-extras li + li { border-top: 1px solid var(--border); }
.contract-extras span:last-child { color: var(--muted); white-space: nowrap; }
.contract-extras li.is-total { margin-top: 4px; border-top: 2px solid var(--border); padding-top: 8px; }
.contract-extras li.is-total span:last-child { color: var(--navy); }
.contract.is-cancelled { border-left-color: var(--outline); }

/* Methods (radio cards) */
.methods { display: grid; gap: 12px; margin-bottom: 20px; }
.methods .product { padding: 18px 20px; }
.methods .product-name { font-size: 1.0625rem; }
.method-target { font-family: var(--font-mono); font-size: .875rem; color: var(--muted); }
.method { flex-direction: row; align-items: flex-start; cursor: default; }
.method > input[type="radio"] { margin-top: 2px; }
.method .product-name { cursor: pointer; }
.method-field { display: block; margin-top: 8px; }
.product.is-option .method-field input { width: 100%; height: auto; accent-color: auto; }
.method:not(:has(> input[type="radio"]:checked)) .method-field { display: none; }

/* ---------- Tables ---------- */
.invoices { width: 100%; border-collapse: collapse; border: 2px solid var(--border); border-radius: var(--r); background: var(--card); font-size: .9375rem; }
.invoices th { padding: 10px 16px; border-bottom: 2px solid var(--border); background: var(--surface-low); font-size: .8125rem; font-weight: 600; color: var(--muted); text-align: left; }
.invoices td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.invoices tr:last-child td { border-bottom: 0; }
.invoices .num { font-family: var(--font-mono); font-size: .875rem; white-space: nowrap; }
.invoices .amount { font-weight: 700; color: var(--navy); text-align: right; white-space: nowrap; }
.invoices th.amount { color: var(--muted); }
.invoices .action { width: 1%; text-align: right; white-space: nowrap; }
.download { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; }
.download svg:not(.icon) { width: 18px; height: 18px; fill: currentColor; }
.invoices .action .btn { min-height: 44px; padding: 8px 14px 8px 12px; gap: 6px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
table.data { width: 100%; border-collapse: collapse; background: var(--card); font-size: 15px; }
table.data th { background: var(--surface-low); color: var(--navy); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 12px 16px; border-bottom: 2px solid var(--border); }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
table.data tr:last-child td { border-bottom: none; }
table.data td.k { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
table.data td.v { font-weight: 600; }

/* ---------- Costs / summary / current ---------- */
.costs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-low); }
.costs-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.costs-title { margin-bottom: 2px; font-family: var(--font-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.costs-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.costs-row strong { color: var(--navy); white-space: nowrap; }
.costs-row s { margin-right: 4px; font-weight: 500; color: var(--muted); }
.costs-row.is-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); font-weight: 700; }
.costs-row.is-free strong { padding: 0 6px; border-radius: var(--r-sm); background: var(--yellow); color: var(--on-yellow); }
.costs-saving { margin: 2px 0 0; font-size: .8125rem; font-weight: 700; color: var(--blue); }
.costs-note { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--muted); }
.costs.is-compact { padding: 12px 14px; }
.summary { display: grid; gap: 8px; margin-bottom: 24px; padding: 20px; border: 2px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); }
.summary > div:not(.costs) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.summary > div > span { color: var(--muted); }
.summary > div > strong { color: var(--navy); }
.summary .costs { grid-column: 1 / -1; margin-top: 4px; }
.current { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-low); }
.current strong { color: var(--navy); }
.order-terms { max-height: 260px; overflow-y: auto; margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: .875rem; line-height: 1.55; color: var(--muted); }
.order-terms p + p { margin-top: 8px; }

/* ---------- Feedback ---------- */
.alert { margin-bottom: 16px; padding: 12px 16px; border-left: 4px solid var(--error); border-radius: var(--r); background: var(--error-container); color: var(--on-error-container); }
.notice { margin-bottom: 16px; padding: 12px 16px; border-left: 4px solid var(--blue); border-radius: var(--r); background: var(--primary-fixed); color: var(--navy); }
.panel { padding: 20px; border: 2px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); }
.panel p + p { margin-top: 8px; }
/* Callout on light surfaces: the same promise style as .hero-callout, on tonal blue with navy text */
.callout { display: flex; align-items: flex-start; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--primary-fixed); color: var(--text); font-size: 17px; line-height: 1.5; }
.callout .icon { flex: none; margin-top: 3px; color: var(--blue); }
.callout strong { display: block; color: var(--navy); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.3; }
.callout a { font-weight: 700; }
.hotline { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r); background: var(--surface-low); font-size: .9375rem; }
.hotline svg { flex: none; width: 22px; height: 22px; margin-top: 2px; fill: var(--blue); }
.hotline a { font-weight: 700; white-space: nowrap; }
.hotline.is-prominent { border-left: 4px solid var(--yellow); background: var(--yellow-soft); }
.not-found { display: flex; align-items: flex-start; gap: 14px; margin-top: 24px; padding: 16px 18px; border: 2px solid var(--border); border-left: 4px solid var(--yellow); border-radius: var(--r); background: var(--card); color: var(--text); text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.not-found:hover { border-color: var(--yellow); box-shadow: var(--shadow-card); color: var(--text); }
.not-found.is-highlighted { background: var(--yellow-soft); border-color: var(--yellow); }
.not-found svg { flex: none; width: 26px; height: 26px; margin-top: 1px; fill: var(--blue); }
.not-found > span { display: flex; flex-direction: column; gap: 2px; }
.not-found strong { font-size: 1.0625rem; color: var(--navy); }
.not-found > span > span { font-size: .9375rem; color: var(--muted); }

/* System banner: one line above the top bar for a special mode.
   Navy = test system, .is-staff (yellow, an alert) = staff looking at a customer's view. */
.system-banner { padding: var(--sp-xs) var(--sp-md); background: var(--navy); color: var(--on-primary); font-size: .8125rem; font-weight: 700; text-align: center; }
.system-banner.is-staff { background: var(--yellow); color: var(--on-yellow); }

/* ---------- Badges / status / marks ---------- */
/* Chips: one spec for every small label (mono caps, 2px radius, same height).
   Colour carries the meaning; .status adds a dot so state is not colour-only. */
.badge, .status, .tag, .badge-pop { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; white-space: nowrap; }
.badge { background: var(--yellow); color: var(--on-yellow); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.is-active { background: var(--primary-fixed); color: var(--navy); }
.status.is-ending { background: var(--error-container); color: var(--on-error-container); }
.done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; background: var(--yellow); }
.done-mark svg { width: 30px; height: 30px; fill: var(--on-yellow); }

/* ---------- Stat band / CTA band ---------- */
/* Stat band: a left-aligned spec strip on navy. Numbers stay white (yellow is rationed). */
.stat-band { background: var(--navy); color: var(--on-primary); }
/* Directly under a hero the strip tucks in behind the slant, so the slant reads blue-on-navy. */
.hero:has(+ .stat-band) { z-index: 1; }
.hero + .stat-band { margin-top: -64px; padding-top: 64px; }
.stat-band .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-md) var(--gutter); }
.stat { position: relative; padding-top: var(--sp-sm); border-top: 1px solid rgba(255, 255, 255, .22); }
/* Line light: a short yellow light runs once along each figure's top line and stops at its end, in step with the
   digit roll below (assets/motion.js adds .is-live). The light is a background inside the line, so it never leaves it. */
.stat::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--yellow), transparent) no-repeat; background-size: 40% 100%; background-position: -66.7% 0; opacity: 0; pointer-events: none; }
.stats.is-live .stat::before { animation: line-light var(--dur-count) var(--ease-settle) both; }
.stats.is-live .stat:nth-child(2)::before { animation-delay: var(--dur-stagger); }
.stats.is-live .stat:nth-child(3)::before { animation-delay: calc(var(--dur-stagger) * 2); }
.stats.is-live .stat:nth-child(4)::before { animation-delay: calc(var(--dur-stagger) * 3); }
@keyframes line-light { 0% { opacity: 0; background-position: -66.7% 0; } 6% { opacity: 1; } 70% { opacity: 1; animation-timing-function: ease-in; } 100% { opacity: 0; background-position: 100% 0; } }
/* Digit roll (assets/motion.js): each digit becomes a strip of digits that rolls up and settles on the written value.
   A hidden copy of the digit keeps the cell exactly as wide and high as the text; afterwards the plain text comes back.
   The cell reaches .25em above and below the line (padding, cancelled by negative margin) and fades out there, so digits
   slide in and out softly while the landed digit stays crisp. */
.roll-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.roll-cell { position: relative; display: inline-block; padding: .25em .1em; margin: -.25em -.1em; mask-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0) .3em, rgb(0 0 0) calc(100% - .3em), rgb(0 0 0 / 0)); }
.roll-ghost { visibility: hidden; }
.roll-strip { position: absolute; top: 0; left: .1em; right: .1em; }
.roll-strip > span { display: block; padding: .25em 0; } /* one digit per window: neighbours stay out of sight at rest */
.stat .stat-num { color: var(--on-primary); font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat .stat-label { margin-top: 6px; color: rgba(255, 255, 255, .74); font-size: 15px; line-height: 1.4; }
/* CTA band: solid yellow (conversion), navy text, blue button. No gradient. */
.cta-band { position: relative; overflow: hidden; background: var(--yellow); color: var(--navy); }
.cta-band .cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.cta-band h2 { color: var(--navy); }
.cta-band p { max-width: 40rem; margin-top: 6px; color: var(--on-yellow); }
.cta-band .btn:not(.is-quiet):not(.btn-ghost) { background: var(--blue); color: var(--on-primary); }
.cta-band .btn:not(.is-quiet):not(.btn-ghost):hover { background: var(--navy); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(255, 255, 255, .8); border-top: 4px solid var(--yellow); }
.footer .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 20px; padding-bottom: 20px; font-size: .8125rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { display: block; height: 24px; width: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.footer-links a:hover { color: var(--yellow); }

/* Marketing footer: same surface as the app .footer (navy, 4px yellow line on top), with columns. */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .8); border-top: 4px solid var(--yellow); position: relative; overflow: hidden; margin-top: auto; }
.site-footer a { text-decoration: none; }
.site-footer .footer-bar { display: none; } /* old markup: the yellow now sits on top */
.site-footer .footer-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-md) var(--sp-lg); padding-top: var(--sp-lg); padding-bottom: var(--sp-md); }
.site-footer .f-logo img { height: 36px; width: auto; opacity: .92; margin-bottom: var(--sp-sm); }
.site-footer address { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
.site-footer h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); margin-bottom: var(--sp-sm); }
.site-footer .f-contact p { font-size: 16px; color: rgba(255, 255, 255, .8); margin-bottom: 8px; }
.site-footer .f-contact a { color: inherit; }
.site-footer .f-contact a:hover { color: var(--yellow); }
.site-footer nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer nav a { color: rgba(255, 255, 255, .85); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.site-footer nav a:hover { color: var(--yellow); }
.site-footer .f-copy { grid-column: 1 / -1; margin-top: 0; padding-top: var(--sp-sm); border-top: 1px solid rgba(255, 255, 255, .15); font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, .6); }

/* ---------- Utility ---------- */
.mt-sm { margin-top: var(--sp-sm); } .mt-md { margin-top: var(--sp-md); } .mt-lg { margin-top: var(--sp-lg); }
.mb-sm { margin-bottom: var(--sp-sm); } .mb-md { margin-bottom: var(--sp-md); } .mb-lg { margin-bottom: var(--sp-lg); }
.center { text-align: center; }
.flex { display: flex; } .wrap-flex { flex-wrap: wrap; } .gap-sm { gap: var(--sp-sm); } .gap-md { gap: var(--sp-md); }
.flex.wrap { flex-wrap: wrap; max-width: none; margin: 0; padding: 0; } /* base.css markup: class="flex wrap" */
.hidden { display: none !important; }
.below { margin-top: 20px; font-size: .9375rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .tariffs { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: var(--sp-md); }
  .stat-band .stats { grid-template-columns: 1fr 1fr; }
  .cards-section { margin-top: var(--sp-md); } /* below 1024px the cards start under the slanted edge */
  .with-aside { grid-template-columns: minmax(0, 1fr); }
  .with-aside > .aside { position: static; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero.has-media .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-media { max-width: 420px; }
  .facts:not(.is-list), .facts:not(.is-list):has(> :nth-child(n):nth-last-child(n)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tariffs:has(> :nth-child(n):nth-last-child(n)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segments { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .segments-section { margin-top: 0; }
  /* Site nav: burger + full-width panel; dropdown groups expand in place */
  .nav-links { display: none; }
  .nav-burger { display: inline-grid; }
  .site-nav .nav-right { position: static; }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; z-index: 2; max-height: calc(100dvh - 64px); overflow-y: auto; padding: var(--sp-xs) var(--gutter) var(--sp-md); background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); animation: panel-down var(--dur-slow) var(--ease-enter); }
  .nav-links.open > * { border-bottom: 1px solid var(--border); }
  .nav-links.open > li { flex-direction: column; align-items: stretch; } /* group: label, then its submenu */
  .nav-links.open > a, .nav-links.open > li > a, .nav-links.open .nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: var(--sp-sm) 0; border-bottom: 0; font-size: 16px; }
  .nav-links.open .nav-menu { position: static; min-width: 0; margin: 0 0 var(--sp-sm); padding: 0; border: 0; box-shadow: none; animation: none; }
  .nav-links.open .nav-menu::before { display: none; }
  .nav-links .nav-menu a { white-space: normal; }
  .nav-links.open > li > a[aria-current="page"] { font-weight: 700; }
}
@media (max-width: 767px) {
  :root { --sp-xl: 56px; --sp-lg: 32px; }
  .cards, .tariffs, .grid-3 { grid-template-columns: 1fr; }
  .cards:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; } /* the 2 x 2 rule is more specific: one column on phones too */
  /* Phones: phone number and e-mail stay on top (navy, so Safari's top area is navy too), the nav sticks right below. */
  .site-top { position: sticky; top: 0; z-index: 51; height: 36px; }
  .site-top + .site-nav { top: 36px; }
  .stat-band .stats { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-inner { grid-template-columns: 1fr; gap: var(--sp-md); padding-top: var(--sp-md); }
  .site-footer .f-links nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--sp-sm); }
  .hero { clip-path: none; }
  .cta-band .cta-inner { flex-direction: column; align-items: flex-start; }
  .hero.is-compact .hero-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-offer { align-items: flex-start; }
  .hero-offer .hero-actions { justify-content: flex-start; }
  .hero-offer .cta-note { text-align: left; }
  .tariffs:has(> :nth-child(n):nth-last-child(n)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-sm); } /* price cards stay side by side */
  .link-list.is-cols { column-count: 1; }
  .segment-figure { width: 100%; margin-left: 0; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aside-related { display: none; }
}
@media (max-width: 639px) {
  .topbar-contact, .account-name, .site-top-item.is-address { display: none; }
  .site-top .site-top-inner { justify-content: center; }
  /* Long labels (download names) wrap instead of pushing the page sideways */
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .people { grid-template-columns: minmax(0, 1fr); }
  .facts:not(.is-list), .facts:not(.is-list):has(> :nth-child(n):nth-last-child(n)) { grid-template-columns: minmax(0, 1fr); }
  .band { padding: 14px 0 24px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); }
  .page-head { margin-bottom: 18px; }
  .shop { padding-top: 16px; }
  .steps { gap: 6px 10px; }
  .steps:not(.is-overview) li:not(.is-current) .step-label { display: none; }
  .nav a { padding: 6px 10px; }
  .types, .grid { grid-template-columns: 1fr; }
  .grid .wide { grid-column: auto; }
  fieldset { padding: 16px; }
  .type, .product { padding: 20px 16px 16px; }
  .product { gap: 12px; }
  .costs { grid-template-columns: 1fr; }
  .contract-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contract-head .btn { width: 100%; }
  .tan-form .btn, .address-search > .btn, .actions .btn { width: 100%; }
  .tan-input { max-width: none; }
  .options { position: static; max-height: none; margin-top: 6px; }
  .actions { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .invoices thead { display: none; }
  .invoices, .invoices tbody, .invoices tr, .invoices td { display: block; width: 100%; }
  .invoices tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .invoices tr:last-child { border-bottom: 0; }
  .invoices td { padding: 0; border: 0; }
  .invoices td.amount, .invoices td.action { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .hero .fiber-pattern path:nth-child(2) { animation: none; stroke-opacity: 0; }
  .hero-media img, .stats.is-live .stat::before { animation: none; }
  .person-action { opacity: 1; transform: none; }
  .btn:active { transform: none; }
  .spinner { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
}