/* ============================================================
   Neuberger Digital — Landingpage
   Nutzt ausschliesslich Tokens aus tokens.css (keine Roh-Hexwerte)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { margin: 0; }

img, svg { max-width: 100%; }

/* Ankerziele stoppen unterhalb der Sticky-Nav (statt zufaellig durchs
   Sektions-Padding zu passen) */
[id] { scroll-margin-top: var(--navbar-height); }

/* Skip-Link: unsichtbar, bis er per Tastatur fokussiert wird */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 60;
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }
/* Text auf Mint bleibt auch beim Hover dunkel (sonst greift a:hover mit Mint 800) */
.skip-link:hover { color: var(--color-accent-foreground); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--spacing-page-gutter);
}
/* Schmale Variante fuer Textseiten (Impressum, Datenschutz, AGB, Widerruf) */
.container-narrow { max-width: 720px; }
/* Nebentext, z. B. "Stand:"-Zeilen der Rechtsseiten */
.text-secondary { color: var(--color-foreground-secondary); }

/* --- Navigation ------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navbar-bg);
  color: var(--navbar-fg);
}
.nav .container {
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--navbar-fg);
  text-decoration: none;
}
.nav-brand-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
}
.nav-brand-sub {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  letter-spacing: 0.35em;
  color: var(--color-mint-300);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-links a {
  color: var(--navbar-fg);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--navbar-link-hover); }
/* Animierter Unterstrich fuer Nav-Links */
.nav-links a.nav-plain { position: relative; }
.nav-links a.nav-plain::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: var(--color-mint-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}
.nav-links a.nav-plain:hover::after { transform: scaleX(1); }
/* Spezifitaets-Fix: Button-Text darf nicht von .nav-links a ueberschrieben werden
   (Text auf Mint muss dunkel bleiben, siehe Token --color-accent-foreground) */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--button-primary-fg); }

/* --- Mobiles Menue (natives <details>, ohne JS bedienbar) -------
   Ersetzt unter 860px die ausgeblendeten Sektionslinks; JS in
   js/nav.js schliesst es beim Klick auf einen Link / ausserhalb. */
.nav-menu { display: none; position: relative; }
.nav-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--navbar-fg);
}
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover,
.nav-menu[open] summary { color: var(--color-mint-300); }
.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--color-navy-900);
  border: 1px solid var(--color-navy-700);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.nav-menu-panel a {
  color: var(--navbar-fg);
  text-decoration: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}
.nav-menu-panel a:hover {
  background: var(--color-navy-800);
  color: var(--color-mint-300);
}
.nav-menu-panel a:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
}
/* CTA-Eintrag im Menue — ersetzt unter 640px den Nav-Button */
.nav-menu-panel .nav-menu-cta {
  margin-top: var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-foreground);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}
.nav-menu-panel .nav-menu-cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-accent-foreground);
}

/* --- Buttons ------------------------------------------------ */
.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
/* Einheitlicher Fokus-Ring (Token --color-ring, wie bei den Karten) */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-menu summary:focus-visible,
.footer a:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  font-weight: var(--button-primary-weight);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
  border-radius: var(--button-primary-radius);
  border: none;
}
.btn-primary:hover { background: var(--button-primary-hover-bg); color: var(--button-primary-fg); }
.btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
  border: 1.5px solid var(--button-secondary-border);
  font-weight: var(--font-weight-medium);
  padding: var(--button-primary-padding-y) var(--button-primary-padding-x);
  border-radius: var(--button-primary-radius);
}
.btn-secondary:hover { background: var(--button-secondary-hover-bg); color: var(--button-secondary-fg); }
.btn-sm { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); }
/* Button mit vorangestelltem Icon (z. B. WhatsApp im Kontaktbereich). */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.btn-icon svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* --- Hero --------------------------------------------------- */
.hero { padding: var(--spacing-section) 0; }
.hero .container {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--space-12);
}
.badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  border-radius: var(--badge-radius);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-size: var(--font-size-5xl);
  margin: 0 0 var(--space-5);
}
.hero h1 .accent { color: var(--color-accent-text); }
.hero p.lead {
  font-size: var(--font-size-lg);
  color: var(--color-foreground-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-8);
  max-width: 34rem;
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-mark { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.hero-mark svg { width: 100%; max-width: 300px; height: auto; }

/* Slogan: erscheint synchron zum Kollaps-Moment der Logo-Animation */
.hero-slogan {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground-secondary);
  text-align: center;
  margin: 0;
  animation: nd-slogan 6s ease-in-out infinite;
}
.hero-slogan .punkt { color: var(--color-accent-text); }
@keyframes nd-slogan {
  0%, 44%   { opacity: 0; transform: translateY(6px); }
  52%, 70%  { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(6px); }
}

/* --- Logo-Animation: N kollabiert in den Mittelpunkt ----------
   Wanderer = Ecken unten links / oben rechts. Sie huepfen von
   Knoten zu Knoten, die Linie dahinter zehrt sich synchron auf
   (stroke-dashoffset, Pfade mit pathLength="100"), passierte
   Knoten werden absorbiert. Am Ende bleibt nur der Mint-Punkt. */
.nd-line { stroke-dasharray: 100; }
.nd-travel-a { animation: nd-travel-a 6s ease-in-out infinite; }
.nd-travel-b { animation: nd-travel-b 6s ease-in-out infinite; }
.nd-line-vert { animation: nd-line-vert 6s ease-in-out infinite; }
.nd-line-diag { animation: nd-line-diag 6s ease-in-out infinite; }
.nd-absorb-early { animation: nd-absorb-early 6s ease-in-out infinite; }
.nd-absorb-late { animation: nd-absorb-late 6s ease-in-out infinite; }
.nd-center {
  transform-box: fill-box;
  transform-origin: center;
  animation: nd-center-pulse 6s ease-in-out infinite;
}
/* Scroll-Variante (Nav-Logo): gleiche Keyframes, aber pausiert —
   der Fortschritt wird per JavaScript aus der Scroll-Position gesetzt.
   Bleibt bewusst "infinite": Das Skript setzt currentTime direkt, eine
   endliche Laufzeit wuerde die Animation irgendwann als beendet gelten
   lassen und der Zeitstempel liefe ins Leere. */
#navMark * { animation-play-state: paused; }

/* Das grosse Hero-Logo laeuft bewusst dauerhaft in der Schleife —
   Entscheidung des Inhabers vom 27.07.2026. Am 27.07. war es zeitweise auf
   drei Durchlaeufe begrenzt, weil Endlosbewegung ohne Stopp-Moeglichkeit
   im Konflikt mit WCAG 2.2.2 steht; das wurde bewusst zurueckgenommen.
   Bitte nicht erneut begrenzen, ohne Ruecksprache — es ist kein Versehen.

   Abgemildert bleibt es dadurch, dass die Bewegung rein dekorativ ist
   (das SVG traegt aria-hidden, der Slogan steht als Text daneben) und
   prefers-reduced-motion die Animation vollstaendig abschaltet. Wer die
   Bewegung stoert, schaltet sie also im Betriebssystem ab. */

@keyframes nd-travel-a {
  0%, 5%    { transform: translate(0, 0); opacity: 1; }
  12%, 20%  { transform: translate(0, -20px); }
  27%, 35%  { transform: translate(0, -40px); }
  45%       { transform: translate(16px, -20px); opacity: 1; }
  48%, 69%  { transform: translate(16px, -20px); opacity: 0; }
  70%, 80%  { transform: translate(0, 0); opacity: 0; }
  90%, 100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes nd-travel-b {
  0%, 5%    { transform: translate(0, 0); opacity: 1; }
  12%, 20%  { transform: translate(0, 20px); }
  27%, 35%  { transform: translate(0, 40px); }
  45%       { transform: translate(-16px, 20px); opacity: 1; }
  48%, 69%  { transform: translate(-16px, 20px); opacity: 0; }
  70%, 80%  { transform: translate(0, 0); opacity: 0; }
  90%, 100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes nd-line-vert {
  0%, 5%    { stroke-dashoffset: 0; opacity: 1; }
  12%, 20%  { stroke-dashoffset: 50; }
  27%       { stroke-dashoffset: 100; opacity: 1; }
  74.9%     { stroke-dashoffset: 100; opacity: 0; }
  75%       { stroke-dashoffset: 0; opacity: 0; }
  90%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes nd-line-diag {
  0%, 35%   { stroke-dashoffset: 0; opacity: 1; }
  45%       { stroke-dashoffset: 100; opacity: 1; }
  74.9%     { stroke-dashoffset: 100; opacity: 0; }
  75%       { stroke-dashoffset: 0; opacity: 0; }
  90%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes nd-absorb-early {
  0%, 11.9% { opacity: 1; }
  12%, 80%  { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes nd-absorb-late {
  0%, 26.9% { opacity: 1; }
  27%, 80%  { opacity: 0; }
  90%, 100% { opacity: 1; }
}
@keyframes nd-center-pulse {
  0%, 44%   { transform: scale(1); }
  48%       { transform: scale(1.35); }
  54%, 100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Animation bleibt der Slogan dauerhaft sichtbar (Default-Opacity 1) */
  .nd-travel-a, .nd-travel-b, .nd-line-vert, .nd-line-diag,
  .nd-absorb-early, .nd-absorb-late, .nd-center, .hero-slogan { animation: none; }
}

/* --- Sektionen ---------------------------------------------- */
.section { padding: var(--spacing-section) 0; }
.section-alt { background: var(--color-surface); }
.section-kicker {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-foreground-secondary);
  margin: 0 0 var(--space-2);
}
.section h2 { margin: 0 0 var(--space-4); }
.section-intro {
  color: var(--color-foreground-secondary);
  max-width: 40rem;
  margin: 0 0 var(--space-10);
}

/* --- Leistungen (Cards) ------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  /* Flex-Spalte, damit der CTA in Reihen ungleicher Hoehe am
     Kartenboden steht (margin-top: auto am .card-cta) */
  display: flex;
  flex-direction: column;
}
/* Karten als Links: heben sich beim Hover, Icon faerbt sich Mint */
a.card {
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
a.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}
a.card:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
a.card:hover .card-icon { background: var(--color-accent); }
a.card:hover .card-icon svg { stroke: var(--color-navy-950); }
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-foreground);
}
.card-cta .arrow { transition: transform var(--duration-fast) var(--ease-out); }
a.card:hover .card-cta .arrow { transform: translateX(4px); }
.card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  transition: background var(--duration-normal) var(--ease-out);
}
.card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--color-foreground-secondary);
  transition: stroke var(--duration-normal) var(--ease-out);
}
.card h3 { font-size: var(--font-size-xl); margin: 0 0 var(--space-2); }
.card p { color: var(--color-foreground-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); margin: 0 0 var(--space-3); }
.card ul { margin: 0; padding: 0 0 0 1.1rem; color: var(--color-foreground-secondary); font-size: var(--font-size-sm); line-height: 1.9; }

/* --- Leistungen: gleichwertiges Bildraster --------------------
   Vier Leistungen, vier gleich grosse Kacheln. Jede fuehrt mit
   einem Geraete-Rendering, darunter Titel, ein Satz, Link. Kein
   Rahmen, nur ein weicher Schatten — die Kachel soll ruhig wirken
   und das Bild die Arbeit machen. */
.leistungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Ohne diese Zeile richtet sich jede Zeile nach ihrem laengsten Text und
     die beiden Reihen werden unterschiedlich hoch — im 2x2 faellt das auf. */
  grid-auto-rows: 1fr;
  gap: var(--space-10);
}
.leistung {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: none;
  border-radius: var(--card-radius);
  box-shadow: 0 2px 9px rgb(13 27 42 / 0.13);
  overflow: hidden;
  padding: 0 0 var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.leistung:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgb(13 27 42 / 0.16);
}
.leistung:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* Illustrationsfeld oben in der Karte. Traegt dieselbe Zeichnung wie der
   Kopf der jeweiligen Leistungsseite — wer klickt, erkennt sie wieder.
   Grund ist Off-White, weil die Illustrationen weisse Flaechen enthalten
   (var(--color-surface)); auf weissem Grund wuerden die verschwinden. */
.leistung-illu {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6);
}
/* Kein aspect-ratio am Kasten und keine Prozenthoehe am SVG: beides loest
   im Flex-Kontext nicht verlaesslich auf und der Kasten wurde dadurch
   hoeher als vorgegeben. Stattdessen bestimmt die Zeichenflaeche selbst
   (340x260) die Hoehe — bei gleicher Kachelbreite ergibt das automatisch
   vier exakt gleich hohe Felder. */
.leistung-illu svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 340 / 260;
  margin: 0 auto;
  transition: transform var(--duration-slow) var(--ease-out);
}
.leistung:hover .leistung-illu svg { transform: scale(1.04); }
.leistung h3 {
  font-size: var(--font-size-xl);
  margin: var(--space-2) var(--space-6) var(--space-2);
}
.leistung p {
  color: var(--color-foreground-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  margin: 0 var(--space-6) var(--space-4);
}
.leistung .card-cta { margin: auto var(--space-6) 0; padding-top: 0; }

/* --- Freistehendes Geraete-Bild (Apple-Muster) ----------------
   Kein Rahmen, kein Radius, kein CSS-Schatten: Der Schatten steckt
   im Rendering, und der Bildhintergrund ist exakt die Sektionsfarbe.
   Dadurch gibt es keine sichtbare Bildkante — das Geraet steht frei
   auf der Seite. Voraussetzung: Sektion auf reinem Weiss. */
.section-devices { background: #FFFFFF; padding: var(--space-16) 0 var(--space-24); }
.device-shot {
  display: block;
  width: 100%;
  height: auto; /* sonst gewinnt das height-Attribut und das Bild wird gestaucht */
  max-width: 900px;
  margin: 0 auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.device-caption {
  max-width: 34rem;
  margin: var(--space-8) auto 0;
  text-align: center;
  color: var(--color-foreground-secondary);
}

/* --- Arbeitsweise: Scroll-Timeline im Netzwerk-Motiv ----------
   Die Prozessschritte sind Knoten (wie im Logo), verbunden durch
   eine Linie, die sich beim Scrollen fuellt. JS setzt .js-anim,
   .visible (Reveal) und .active (Knoten erreicht) — ohne JS ist
   alles statisch sichtbar. */
.timeline { position: relative; max-width: 720px; margin: 0 auto; }
.tl-line, .tl-progress {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 2px;
  height: calc(100% - 72px);
}
.tl-line { background: var(--color-border); }
/* Der Balken hat volle Hoehe und wird per transform: scaleY() skaliert
   (js/timeline.js). Ueber die Hoehe zu animieren wuerde bei jedem Bild
   eine Layout-Neuberechnung ausloesen. */
.tl-progress {
  background: var(--color-accent);
  transform: scaleY(0);
  transform-origin: top;
}
.tl-dot {
  position: absolute;
  left: 25px;
  top: 24px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--color-accent);
}
.tl-dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  animation: tl-pulse 2s ease-out infinite;
}
@keyframes tl-pulse {
  0%        { transform: scale(0.5); opacity: 0.8; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}
.tl-step { position: relative; padding: 0 0 var(--space-10) 72px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground-secondary);
  transition: background var(--duration-slow) var(--ease-out),
              border-color var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.tl-step.active .tl-node {
  background: var(--color-foreground);
  border-color: var(--color-foreground);
  color: var(--color-neutral-50);
  transform: scale(1.1);
}
.tl-card {
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: border-color var(--duration-slow) var(--ease-out);
}
.tl-step.active .tl-card { border-color: var(--color-accent); }
.tl-card h3 { font-size: var(--font-size-lg); margin: 0 0 var(--space-2); }
.tl-card p { color: var(--color-foreground-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-normal); margin: 0; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.tl-chip {
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 3px 12px;
  border-radius: var(--radius-full);
}
/* Reveal nur mit JS (Klasse js-anim), sonst alles sichtbar */
.js-anim .tl-step {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.js-anim .tl-step.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .tl-step { opacity: 1; transform: none; transition: none; }
  .tl-dot, .tl-dot::after { animation: none; display: none; }
  .tl-progress { transform: scaleY(1); }
}

/* --- Über mich ----------------------------------------------- */
.about-text {
  color: var(--color-foreground-secondary);
  line-height: var(--line-height-relaxed);
}
.about-grid .tl-chips { margin-top: var(--space-5); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-12);
  align-items: center;
}
.about-facts-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}
.fact {
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}
.fact:hover { border-color: var(--color-accent); transform: translateX(4px); }

.about-photo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto var(--space-4);
  border: 4px solid var(--color-accent);
  box-shadow: var(--shadow-md);
}
.about-caption {
  text-align: center;
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-foreground-secondary);
  line-height: 1.6;
}
.about-caption strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-base);
  color: var(--color-foreground);
  margin-bottom: 2px;
}
.fact strong { display: block; font-family: var(--font-heading); }
.fact span { color: var(--color-foreground-secondary); font-size: var(--font-size-sm); }

/* --- Kontakt -------------------------------------------------- */
.contact {
  background: var(--color-navy-900);
  color: var(--color-neutral-50);
}
.contact .section-kicker { color: var(--color-mint-300); }
.contact h2, .contact h3 { color: var(--color-neutral-50); }
.contact p { color: var(--color-navy-200); max-width: 36rem; }
.contact .contact-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-8);
}
/* Direktkontakt unter den Schaltflaechen: Telefon und E-Mail zum Antippen.
   Fuer Handwerksbetriebe ist das Telefon der Hauptkanal — bis 27.07.2026
   stand die Nummer auf der ganzen Website nur im Impressum. */
.contact-direkt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
}
.contact-direkt a {
  color: var(--color-mint-200);
  text-decoration: none;
  padding: var(--space-1) 0;
}
.contact-direkt a:hover { color: var(--color-neutral-50); text-decoration: underline; }
.contact-direkt a:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.contact-direkt span { color: var(--color-navy-400); }
/* Der Primaerbutton hat keinen Rahmen, der Sekundaerbutton 1,5 px. Bei
   border-box kommt der Rahmen zur Inhaltshoehe hinzu - ohne diesen
   transparenten Rahmen stuenden die beiden Buttons 3 px versetzt. */
.contact .btn-primary { border: 1.5px solid transparent; }
/* Der Kontaktbereich steht immer auf Navy. Der Sekundaer-Button traegt dort
   sonst Navy auf Navy - daher heller Rahmen; beim Hover greift die
   CD-Kontrastregel: Text auf Mint immer dunkel. */
.contact .btn-secondary {
  background: transparent;
  color: var(--color-mint-200);
  border-color: var(--color-mint-300);
}
.contact .btn-secondary:hover {
  background: var(--color-mint-300);
  color: var(--color-navy-950);
}

/* --- Footer ---------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: var(--space-8) 0;
  font-size: var(--font-size-sm);
}
.footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.footer a { color: var(--footer-link); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
/* Mindestens 24x24 px Zielflaeche (WCAG 2.2, Kriterium 2.5.8). Die Links
   waren mit 22 px knapp darunter — reines Padding, das Layout bleibt. */
.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: var(--space-1) 2px;
}
/* Anschrift und Telefon auf jeder Seite — durchgaengiges lokales Signal,
   und die Nummer ist von ueberall aus antippbar. */
.footer-ort {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-navy-300);
}
.footer-ort a { color: var(--color-navy-200); }
/* Profile in sozialen Netzwerken. Die Markenzeichen liegen als Inline-SVG in
   der Seite — kein Icon-Font, kein Netzwerk-Widget, also auch beim Aufruf keine
   Verbindung zu Facebook, Instagram oder LinkedIn. */
.footer-social {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-navy-200);
  transition: color 150ms ease, background-color 150ms ease;
}
.footer-social a:hover {
  color: var(--color-mint-300);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}
.footer-social svg { display: block; }

/* --- Responsive ------------------------------------------------- */
/* --- Unterseiten (Leistungen) ---------------------------------- */
.page-header { padding: var(--space-12) 0 var(--space-10); }
.page-header .container.with-illu {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-12);
  align-items: center;
}
.page-illu { display: flex; justify-content: center; }
.page-illu svg { width: 100%; max-width: 340px; height: auto; }
.breadcrumb {
  font-size: var(--font-size-sm);
  color: var(--color-foreground-muted);
  margin: 0 0 var(--space-4);
}
.breadcrumb a { color: var(--color-accent-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.page-header h1 { font-size: var(--font-size-4xl); margin: 0 0 var(--space-4); }
.page-header .lead {
  font-size: var(--font-size-lg);
  color: var(--color-foreground-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 42rem;
  margin: 0;
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: var(--space-3);
  color: var(--color-foreground-secondary);
  line-height: var(--line-height-normal);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-foreground);
}
.check-list li strong { color: var(--color-foreground); }

/* FAQ-Akkordeon (native details/summary — barrierefrei ohne JS) */
.faq { max-width: 46rem; }
.faq details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  margin-bottom: var(--space-3);
  transition: border-color var(--duration-normal) var(--ease-out);
}
.faq details:hover, .faq details[open] { border-color: var(--color-accent); }
.faq summary {
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--color-foreground);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-foreground-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}

/* Fehlerseite: die 404 gross und ruhig, nicht als Alarm.
   Bewusst foreground-muted (5,8:1) statt border-strong — letzteres kam nur
   auf 1,79:1 und faellt damit unter AA, auch wenn die Zahl aria-hidden ist. */
.fehler-code {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-foreground-muted);
  margin: 0 0 var(--space-3);
}

.cta-strip {
  background: var(--color-navy-900);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  text-align: center;
}
.cta-strip h2 { color: var(--color-neutral-50); margin: 0 0 var(--space-3); }
.cta-strip p { color: var(--color-navy-200); margin: 0 0 var(--space-6); }

/* --- Dezente Illustrations-Animation (Mint-Puls) ---------------- */
.illu-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: illu-pulse 3.5s ease-in-out infinite;
}
@keyframes illu-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* --- Hintergrundmuster: Punktraster im Netzwerk-Motiv ------------
   Nur Deko (::before), faerbt sich ueber Tokens automatisch im
   Dark Mode um und wird zum Rand hin ausgeblendet. */
.hero, .page-header { position: relative; }
.hero::before, .page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--color-border-strong) 1.2px, transparent 1.7px);
  background-size: 26px 26px;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 65% 90% at 78% 35%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 65% 90% at 78% 35%, black 0%, transparent 72%);
  pointer-events: none;
}
.hero .container, .page-header .container { position: relative; }

/* --- Navigation: leichte Transparenz + Blur beim Scrollen -------- */
@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .nav {
    background: color-mix(in srgb, var(--navbar-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* --- Scroll-Reveal (js/reveal.js setzt .js-reveal am <html>) -----
   Ohne JS oder mit reduzierter Bewegung bleibt alles sichtbar.

   Bewusst ueber die Einzeleigenschaften translate/scale statt ueber
   transform: Reveal-Ziele sind haeufig auch Hover-Ziele (Karten, Fakten,
   Showcase-Kacheln). Mit transform hat ".js-reveal .reveal.revealed"
   (Spezifitaet 0,3,0) jeden Hover-Transform wie ".leistung:hover" (0,2,0)
   ueberschrieben — das Anheben beim Hover blieb wirkungslos. translate und
   scale sind eigene Eigenschaften und ueberlagern sich mit transform,
   statt es zu ersetzen. */
.js-reveal .reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.55s var(--ease-out),
              translate 0.55s var(--ease-out),
              scale 0.55s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal .reveal.revealed { opacity: 1; translate: 0 0; }

/* --- Demo-Beispiele (Webdesign-Unterseite) ----------------------
   Bild und Beschreibung im Wechsel links/rechts. Die Merkmale sind
   bewusst je Demo verschieden — sie sollen zeigen, was diese eine
   Seite kann, nicht allgemeine Webdesign-Vorzuege aufzaehlen. */
.demo-list {
  display: grid;
  gap: var(--space-16);
  margin-bottom: var(--space-16);
}
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: center;
}
/* Jede zweite Zeile spiegeln. Nur optisch — die Lesereihenfolge im
   Quelltext bleibt Bild, dann Text. Das Spaltenverhaeltnis dreht mit,
   sonst landet das Bild in der schmaleren Spalte und die gespiegelten
   Reihen haetten ein kleineres Bild als die uebrigen. */
.demo:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.demo:nth-child(even) .demo-shot { order: 2; }

.demo-shot {
  display: block;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: 0 2px 9px rgb(13 27 42 / 0.13);
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.demo-shot:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgb(13 27 42 / 0.18); }
.demo-shot:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.demo-shot img {
  display: block;
  width: 100%;
  height: auto; /* hebt den height-Attribut-Hint auf, sonst greift aspect-ratio nicht */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: scale var(--duration-slow) var(--ease-out);
}
.demo-shot:hover img { scale: 1.03; }

.demo-kicker {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-foreground-muted);
  margin: 0 0 var(--space-2);
}
.demo-text h3 { font-size: var(--font-size-2xl); margin: 0 0 var(--space-3); }
.demo-text > p {
  color: var(--color-foreground-secondary);
  line-height: var(--line-height-normal);
  margin: 0 0 var(--space-5);
}
.demo-features { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.demo-features li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-2);
  color: var(--color-foreground-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}
.demo-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-foreground);
}
.demo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-foreground);
}
.demo-link .arrow { transition: transform var(--duration-fast) var(--ease-out); }
.demo-link:hover { color: var(--color-accent-text); }
.demo-link:hover .arrow { transform: translateX(4px); }

/* --- Abschluss-Kachel: alle Beispiele --------------------------
   Navy-Band wie der CTA-Streifen, damit der Abschnitt sichtbar
   endet. Die Zahl traegt den Akzent, nicht die Flaeche. */
.demo-alle {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-navy-900);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  text-decoration: none;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.demo-alle::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 88% 12%,
              rgb(46 196 169 / 0.15), transparent 62%);
}
.demo-alle > * { position: relative; }
.demo-alle:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.demo-alle:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 3px; }
.demo-alle-zahl {
  font-family: var(--font-heading);
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-mint-300);
}
.demo-alle-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  color: var(--color-neutral-50);
  margin-bottom: 2px;
}
.demo-alle-text > span {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-navy-200);
  max-width: 42rem;
}
.demo-alle-pfeil {
  font-size: var(--font-size-2xl);
  color: var(--color-mint-300);
  transition: transform var(--duration-normal) var(--ease-out);
}
.demo-alle:hover .demo-alle-pfeil { transform: translateX(6px); }

/* --- Paket-Karten (Betreuung & Sichtbarkeit) ---------------------
   Festpreis-Pakete als Karten im bestehenden Card-Stil; Preis in
   Space Grotesk, Zusatz (einmalig / pro Monat) klein dahinter. */
.pakete {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* wie bei den Leistungskacheln: sonst richtet sich jede Zeile nach ihrem
     laengsten Paket und die beiden Reihen werden unterschiedlich hoch */
  grid-auto-rows: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}
.paket { display: flex; flex-direction: column; }
.paket-preis {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-foreground);
  margin: 0 0 var(--space-3);
}
.paket-preis small {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-foreground-secondary);
  margin-left: var(--space-1);
}
.paket ul { flex-grow: 1; }
.paket-badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border: 1px solid var(--badge-border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  margin-bottom: var(--space-3);
}
.pakete-hinweis {
  color: var(--color-foreground-secondary);
  font-size: var(--font-size-sm);
  max-width: 46rem;
}
/* Zwei Karten im Paket-Stil als Gegenueberstellung (KI-Suche: was zaehlt,
   was nicht). Nur eine Reihe, daher keine gleich hohen Zeilen: auf dem
   Handy stehen die Karten untereinander, jede so hoch wie ihr Inhalt. */
.pakete-vergleich { grid-auto-rows: auto; }
/* Haken bzw. Kreuz klein vor der Ueberschrift statt eigener Icon-Kachel.
   Haken in Mint 700 (Kontrastregel: Mint auf Hell nur als 700). */
.vergleich-titel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.vergleich-titel svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vergleich-ja svg { stroke: var(--color-mint-700); }
.vergleich-nein svg { stroke: var(--color-foreground-secondary); }

/* ============================================================
   Bewegung und Verlaeufe
   Grundsatz: jeder Effekt hat eine Aufgabe — zeigen, dass etwas
   anklickbar ist, den Blick zur Aktion fuehren oder einer grossen
   Flaeche Tiefe geben. Kein Verlauf nur zur Zierde, und Mint bleibt
   auch hier die einzige Farbe neben Navy und Weiss.
   Animiert wird ausschliesslich transform/opacity, damit nichts
   Layout neu berechnet. Alles darunter wird bei reduzierter
   Bewegung wieder abgeschaltet.
   ============================================================ */

/* --- Leistungskachel: Mint-Kante faehrt beim Hover ein ---------
   Ersetzt den frueheren Rahmenwechsel: praeziser, und die Karte
   bleibt in Ruhe rahmenlos. */
.leistung { position: relative; }
.leistung::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--color-mint-500), var(--color-mint-200));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
  z-index: 1;
}
.leistung:hover::before,
.leistung:focus-visible::before { transform: scaleX(1); }

/* --- Illustration reagiert: die gestrichelten Verbindungen
   beginnen zu fliessen, der Mint-Knoten pulst schneller. Greift
   ueber das vorhandene stroke-dasharray, ohne die SVGs zu aendern. */
@keyframes illu-flow { to { stroke-dashoffset: -22; } }
.leistung:hover .leistung-illu [stroke-dasharray] {
  animation: illu-flow 1.1s linear infinite;
}
.leistung:hover .leistung-illu .illu-pulse { animation-duration: 1.4s; }

/* --- Primaerbutton: leichter Verlauf plus Lichtwisch beim Hover.
   Beide Enden des Verlaufs tragen dunklen Text (CD-Kontrastregel),
   mint-400 ist heller als mint-500 — der Kontrast steigt also. */
.btn-primary {
  background: linear-gradient(135deg, var(--color-mint-400), var(--color-mint-500));
  position: relative;
  overflow: hidden;
}
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.4) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.65s var(--ease-out);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-mint-300), var(--color-mint-400));
}
.btn-primary:hover::after { transform: translateX(110%); }

/* --- Grosse Navy-Flaechen bekommen Tiefe --------------------
   Ein einzelner, weit auslaufender Mint-Schimmer aus einer Ecke.
   Sehr niedrige Deckkraft: Er soll die Flaeche modellieren, nicht
   als Farbfeld auffallen. */
.contact, .cta-strip { position: relative; overflow: hidden; }
.contact::before, .cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 75% at 88% 12%,
              rgb(46 196 169 / 0.15), transparent 62%);
}
.contact > .container, .cta-strip > * { position: relative; }

/* --- Hero: schwacher Schein hinter dem Logo, damit der Blick am
   Mint-Punkt haengenbleibt, wenn die Kollaps-Animation endet. */
.hero-mark { position: relative; }
.hero-mark::before {
  content: "";
  position: absolute;
  inset: -8% -8% 22%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%,
              rgb(46 196 169 / 0.14), transparent 60%);
}
/* Ohne das wuerde der absolut positionierte Schein ueber dem statisch
   positionierten Logo landen und es ueberdecken. */
.hero-mark svg, .hero-slogan { position: relative; }

/* --- Prozessschritte reagieren auf den Zeiger ---------------- */
.tl-card { transition: border-color var(--duration-slow) var(--ease-out),
                       transform var(--duration-normal) var(--ease-out); }
.tl-step:hover .tl-card { transform: translateX(4px); border-color: var(--color-accent); }
.tl-step:hover .tl-node { transform: scale(1.12); border-color: var(--color-accent); }

/* --- Geraete-Bild faehrt beim Einblenden minimal auf ---------- */
.js-reveal .device-shot.reveal { translate: 0 18px; scale: 0.985; }
.js-reveal .device-shot.reveal.revealed { translate: 0 0; scale: 1; }

@media (prefers-reduced-motion: reduce) {
  .illu-pulse { animation: none; }
  .js-reveal .reveal { opacity: 1; translate: none; scale: none; transition: none; }
  /* Bewegung aus, Farbe darf bleiben: Verlaeufe sind statisch. */
  .leistung::before,
  .btn-primary::after,
  .tl-card,
  .leistung-illu svg { transition: none; }
  .leistung:hover .leistung-illu [stroke-dasharray] { animation: none; }
  .leistung:hover .leistung-illu .illu-pulse { animation: none; }
  .tl-step:hover .tl-card,
  .tl-step:hover .tl-node,
  .leistung:hover .leistung-illu svg { transform: none; }
  .js-reveal .device-shot.reveal { translate: none; scale: none; }
}

@media (max-width: 860px) {
  .hero .container, .about-grid { grid-template-columns: 1fr; }
  .leistungen { grid-template-columns: 1fr; gap: var(--space-8); }
  .pakete { grid-template-columns: 1fr; }
  .section-devices { padding: var(--space-10) 0 var(--space-16); }
  .hero-mark { order: -1; }
  .hero-mark svg { max-width: 180px; }
  .hero h1 { font-size: var(--font-size-4xl); }
  .nav-links { gap: var(--space-3); }
  .nav-links a.nav-plain { display: none; }
  .nav-menu { display: block; }
  .page-header h1 { font-size: var(--font-size-3xl); }
  .page-header .container.with-illu { grid-template-columns: 1fr; }
  .page-illu { display: none; }
  /* Bild ueber Text, Wechsel entfaellt — sonst stuende bei jeder zweiten
     Demo der Text vor dem zugehoerigen Bild. Der :nth-child-Selektor muss
     hier mitgenannt werden: Media Queries erhoehen die Spezifitaet nicht,
     ein blosses ".demo" (0,1,0) verliert gegen ".demo:nth-child(even)"
     (0,2,0) weiter oben. */
  .demo,
  .demo:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-6); }
  .demo:nth-child(even) .demo-shot { order: 0; }
  .demo-list { gap: var(--space-12); margin-bottom: var(--space-12); }
  .demo-alle {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-4);
    padding: var(--space-6) var(--space-6);
  }
  .demo-alle-pfeil { grid-column: 2; justify-self: end; }
}
/* Schmale Handys: Marke + Toggle + Button + Burger passen nicht nebeneinander —
   der CTA steckt dann als Mint-Eintrag im Burger-Menue (.nav-menu-cta) */
@media (max-width: 640px) {
  .nav-links a.btn-primary { display: none; }
}