/* ==========================================================================
   HN-Computer — Redesign v2
   Direction: "Instrumententafel" — die Seite als präzises technisches
   Instrument. Tiefes Nachtschiefer als Trägermaterial, Gold aus dem
   HN-Computer-Logo als einziges Signal, Glasflächen mit echter Tiefe.
   Signature: Sektor-Scan-Konsole (Datenrettung) im Hero.
   ========================================================================== */

/* ==========================================================================
   SCHRIFTEN — liegen auf dem eigenen Server
   Bewusst nicht von fonts.googleapis.com geladen: dabei ginge die IP jedes
   Besuchers ohne Einwilligung an Google. Die Dateien stammen aus dem
   Google-Fonts-Angebot (SIL Open Font License 1.1, siehe assets/fonts/LIZENZ.txt)
   und decken die Zeichenvorräte latin und latin-ext ab — mehr braucht ein
   deutschsprachiger Auftritt nicht.
   Archivo, Inter und JetBrains Mono sind variable Schriften: eine Datei je
   Zeichenvorrat deckt den gesamten Strichstärkenbereich ab.
   ========================================================================== */

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

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

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

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

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

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

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

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

:root {
  /* ---- color: engineered dark ---- */
  --void: #070a10;
  --base: #0b0f17;
  --surface: #111725;
  --surface-2: #161d2d;
  --surface-3: #1d2637;

  --line: rgba(232, 237, 245, 0.09);
  --line-strong: rgba(232, 237, 245, 0.16);

  --ice: #eaeff7;
  --mute: #8a97ae;
  --mute-dim: #5e6a80;

  /* Gold aus dem bestehenden HN-Computer-Signet */
  --gold: #f2b33d;
  --gold-hi: #ffd27a;
  --gold-deep: #b5811d;
  --gold-glow: rgba(242, 179, 61, 0.18);
  /* Rahmenfarben der goldgefassten Flaechen als Leiter, damit die
     Verwandtschaft sichtbar bleibt, ohne die Rangfolge einzuebnen:
     Karte ruhend (soft) < Karte im Hover = Panel ruhend < Panel im
     Hover. Die Karte erreicht im Hover also genau die Staerke, mit der
     das Panel dasteht — und ueberholt es nie. */
  --gold-line-soft: rgba(242, 179, 61, 0.18);
  --gold-line: rgba(242, 179, 61, 0.3);
  --gold-line-hi: rgba(242, 179, 61, 0.45);

  --signal: #4fd1c5;
  --alert: #f2765d;

  --focus: #7fb2ff;

  /* ---- type ---- */
  --display: "Archivo", "Helvetica Neue", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "Inter", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;

  /* ---- rhythm (8pt) ---- */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.5rem;
  --s5: 4rem;
  --s6: 6rem;
  --s7: 9rem;

  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;

  --max: 1240px;

  --shadow-lift:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 24px 64px rgba(0, 0, 0, 0.28);
  --shadow-deep:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 48px 120px rgba(0, 0, 0, 0.4);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ice);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Feines Korn für Materialtiefe */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

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

::selection {
  background: var(--gold);
  color: var(--void);
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--s3);
  padding-right: var(--s3);
  position: relative;
  z-index: 2;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--void);
  padding: 0.75em 1.25em;
  font-family: var(--mono);
  font-size: 0.8rem;
  z-index: 200;
}

.skip:focus {
  left: var(--s3);
  top: var(--s2);
}

/* ---------- shared atoms ---------- */

/* Abschnittstrenner: statt einer durchgehenden Rahmenlinie ein Verlauf,
   der zu beiden Fensterkanten hin ausblendet. In der Mitte so kraeftig
   wie die alte Linie (--line), an den Raendern bei null — dadurch faellt
   das harte Anstossen an der Fensterkante weg. Als Pseudo-Element und
   nicht als background, damit die eigenen Farbverlaeufe der Abschnitte
   unangetastet bleiben. */
.band,
.limit,
.site-footer {
  position: relative;
}

.band::before,
.band::after,
.limit::before,
.limit::after,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line) 18%,
    var(--line) 82%,
    transparent
  );
}

.band::before,
.limit::before,
.site-footer::before {
  top: 0;
}

.band::after,
.limit::after {
  bottom: 0;
}


.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  flex: none;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: var(--s2) 0 0;
}

.lede {
  color: var(--mute);
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 56ch;
  margin: var(--s2) 0 0;
}

.section {
  padding-top: var(--s7);
  padding-bottom: var(--s7);
  position: relative;
}

.section-head {
  max-width: 62ch;
  margin: 0 auto var(--s5);
  text-align: center;
}

/* .lede hat ein eigenes max-width — ohne auto-Margins bliebe der
   Fliesstext im zentrierten Kopf linksbuendig stehen. */
.section-head .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- buttons ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ice);
  --btn-line: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.95em 1.5em;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-line);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-gold {
  --btn-bg: linear-gradient(180deg, var(--gold-hi), var(--gold));
  --btn-fg: #241a05;
  --btn-line: var(--gold-deep);
  font-weight: 600;
  box-shadow: 0 4px 16px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-gold:hover {
  box-shadow: 0 8px 28px rgba(242, 179, 61, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn-line:hover {
  border-color: var(--gold);
  background: rgba(242, 179, 61, 0.06);
}

/* ==========================================================================
   Topbar + Header
   ========================================================================== */

.topbar {
  background: var(--void);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--mute-dim);
  position: relative;
  z-index: 3;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  flex-wrap: wrap;
}

/* Gleiche Helligkeit wie die Telefonnummer rechts — die Adresse ist eine
   Kerninformation und soll nicht als Nebentext untergehen. */
.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--ice);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.16);
  flex: none;
}

.topbar a {
  color: var(--ice);
  text-decoration: none;
}

.topbar a:hover {
  color: var(--gold);
}

/* Der Sticky-Punkt liegt jetzt auf .site-top, damit Topbar und Kopf
   gemeinsam stehen bleiben. Ein fester Zahlenwert fuer die Topbar-Hoehe
   waere falsch: die bricht auf schmalen Schirmen auf zwei Zeilen um. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 60;
}

.site-header {
  background: rgba(11, 15, 23, 0.78);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex: none;
}

/* Signet frei auf dem dunklen Grund — die helle Variante der Datei traegt
   den Kontrast selbst, deshalb keine weisse Plakette mehr. Ohne das alte
   Padding steht der Schriftzug bei gleicher Kopfhoehe deutlich groesser.
   47px ist die native Hoehe der Datei: so bleibt sie pixelscharf. */
.brand-logo {
  height: 47px;
  width: auto;
  flex: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  transition: filter 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.brand:hover .brand-logo {
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 10px rgba(242, 179, 61, 0.35));
}

.brand-role {
  font-family: var(--mono);
  font-size: 0.62rem;
  /* 700 ist zusaetzlich zu 400/500 geladen — ohne den echten Schnitt
     würde der Browser die Mono kuenstlich fetten, was bei dieser
     Sperrung ausfranst. */
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  padding-left: 0.9rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--s3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  padding: 0.4em 0;
  position: relative;
  transition: color 0.2s ease;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--ice);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ice);
  cursor: pointer;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: var(--s6);
  padding-bottom: var(--s7);
  overflow: hidden;
}

/* Lichtfeld hinter dem Hero */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 85vw);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(242, 179, 61, 0.13) 0%,
    rgba(79, 209, 197, 0.05) 38%,
    transparent 68%
  );
  filter: blur(20px);
  pointer-events: none;
}

/* Technisches Raster */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 40%, #000 20%, transparent 75%);
  opacity: 0.55;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
  justify-items: center;
  text-align: center;
}

.hero h1 {
  font-family: var(--display);
  font-size: clamp(2.7rem, 5.6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.038em;
  margin: var(--s3) 0 0;
}

.hero h1 .serif {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  background: linear-gradient(100deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  color: var(--mute);
  font-size: 1.1rem;
  line-height: 1.68;
  max-width: 48ch;
  margin: var(--s3) auto 0;
}

.hero-ctas {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--s4);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  list-style: none;
  margin: var(--s4) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--mute);
}

.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.hero-proof svg {
  width: 13px;
  height: 13px;
  color: var(--signal);
  flex: none;
}

/* ==========================================================================
   Metrik-Band
   ========================================================================== */

.band {
  background: linear-gradient(180deg, rgba(17, 23, 37, 0.65), transparent);
}

.band-grid {
  display: grid;
  /* minmax(0,1fr) statt 1fr: sonst waechst eine Spalte mit langem
     Inhalt ueber ihren Anteil hinaus und die Zellen sind ungleich. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.band-item {
  /* Flex-Spalte + center: gleiche Zellbreite, Inhalt horizontal wie
     vertikal mittig, auch wenn eine Kachel mehr Zeilen hat. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--s4) var(--s3);
  border-right: 1px solid var(--line);
  text-align: center;
}

.band-item:last-child {
  border-right: none;
}

.band-item .n {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ice);
}

.band-item .n em {
  font-style: normal;
  color: var(--gold);
}

.band-item .t {
  display: block;
  margin-top: 0.7em;
  font-size: 0.86rem;
  color: var(--mute);
  line-height: 1.5;
}

/* ==========================================================================
   Leistungen
   ========================================================================== */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), rgba(17, 23, 37, 0.35));
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
    border-color 0.3s ease, box-shadow 0.3s ease;
}

.svc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    rgba(242, 179, 61, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.svc:hover {
  transform: translateY(-5px);
  border-color: var(--gold-line);
  box-shadow: var(--shadow-lift);
}

.svc:hover::after {
  opacity: 1;
}

.svc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.svc-idx {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.svc-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex: none;
}

.svc-icon svg {
  width: 19px;
  height: 19px;
}

.svc h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0;
  color: var(--ice);
}

.svc p {
  color: var(--mute);
  font-size: 0.95rem;
  margin: 0;
  flex: 1;
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-tags li {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--mute-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35em 0.8em;
}

.svc-go {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ice);
  margin-top: var(--s1);
}

.svc-go svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.svc:hover .svc-go {
  color: var(--gold);
}

.svc:hover .svc-go svg {
  transform: translateX(4px);
}

/* ==========================================================================
   Wartungsvertrag — hervorgehobene Ebene über den vier Fachbereichen
   ========================================================================== */

.care {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s5);
  margin-top: var(--s3);
  padding: var(--s5) var(--s4);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(85% 130% at 10% 0%, rgba(242, 179, 61, 0.11), transparent 58%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

/* Laufende Betreuung: ein durchlaufendes Band an der Oberkante. */
.care::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold) 18%,
    var(--gold-hi) 50%,
    var(--gold) 82%,
    transparent
  );
}

/* Derselbe zeigerfolgende Schein wie auf den Leistungskarten. Das Panel
   ist deutlich groesser als eine Karte, deshalb ein weiterer Radius
   (620px statt 420px) — sonst wirkt der Fleck darin verloren. Den
   Anheb-Effekt der Karten bekommt es bewusst nicht: ein Block dieser
   Groesse, der beim Ueberfahren springt, wirkt unruhig. */
.care {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.care::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    620px circle at var(--mx, 50%) var(--my, 0%),
    rgba(242, 179, 61, 0.09),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.care:hover::after {
  opacity: 1;
}

.care:hover {
  border-color: var(--gold-line-hi);
  box-shadow: var(--shadow-deep);
}

.care h3 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: var(--s2) 0 0;
}

.care-lede {
  color: var(--mute);
  font-size: 1rem;
  line-height: 1.68;
  max-width: 48ch;
  margin: var(--s3) 0 0;
}

.care-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

/* Weiterlesen-Verweis am Fuß der Umfangsliste. Greift die Anmutung von
   .svc-go auf, damit "hier geht es weiter" auf der ganzen Seite gleich
   aussieht — Schreibmaschinenschrift, klein, in Eisfarbe. */
.care-more {
  margin: var(--s3) 0 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.care-more a {
  color: var(--ice);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.care-more a:hover,
.care-more a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold-line-hi);
}

.care-scope {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(7, 10, 16, 0.42);
  padding: var(--s3);
}

.care-scope h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s2);
}

.care-scope ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.care-scope li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.8rem 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ice);
}

.care-scope li + li {
  border-top: 1px solid var(--line);
}

.care-scope li svg {
  width: 14px;
  height: 14px;
  margin-top: 0.32em;
  color: var(--signal);
  flex: none;
}

/* Anfrageformular: eigene Zeile ueber beide Spalten des Panels. */
.care-form {
  grid-column: 1 / -1;
  margin-top: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--gold-line-soft);
}

.care-form h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ice);
}

.care-form-lede {
  margin: 0.5rem 0 var(--s3);
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--mute);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.care-form label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.care-form label span {
  color: var(--gold);
}

.care-form input,
.care-form select,
.care-form textarea {
  width: 100%;
  padding: 0.75em 0.9em;
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--ice);
  background: var(--void);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.care-form textarea {
  resize: vertical;
  min-height: 6em;
}

.care-form input:focus,
.care-form select:focus,
.care-form textarea:focus {
  outline: none;
  border-color: var(--gold-line-hi);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Fehlerzustand wird per aria-invalid gesetzt, nicht per :invalid — sonst
   faerbt der Browser leere Pflichtfelder schon vor dem ersten Absenden rot. */
.care-form [aria-invalid="true"] {
  border-color: var(--alert);
}

.field-error {
  font-family: var(--body);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--alert);
}

/* Honigtopf: aus dem Sichtfeld geschoben statt display:none, weil manche
   Roboter versteckte Felder erkennen und dann auslassen. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: var(--s3) 0 0;
}

.field-check input {
  width: 17px;
  height: 17px;
  margin-top: 0.15rem;
  accent-color: var(--gold);
}

.care-form .field-check label {
  font-family: var(--body);
  font-size: 0.84rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute);
}

.field-check a {
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field-check a:hover {
  color: var(--gold);
}

.care-form-foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s3);
}

.req-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--mute-dim);
}

.form-status {
  margin: var(--s2) 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
}

.form-status[data-state="ok"] {
  color: var(--signal);
}

.form-status[data-state="error"] {
  color: var(--alert);
}

@media (max-width: 640px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}

.care-note {

  margin: var(--s3) 0 0;
  padding-top: var(--s2);
  border-top: 1px dashed var(--line-strong);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--mute-dim);
}

/* ==========================================================================
   Kostenlimit — Ablauf
   ========================================================================== */

.limit {
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(242, 179, 61, 0.07), transparent 62%),
    var(--void);
}

.limit-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s5);
  align-items: start;
}

.steps {
  display: flex;
  flex-direction: column;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s3);
  padding: var(--s3) 0;
  position: relative;
}

.step + .step {
  border-top: 1px solid var(--line);
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--gold);
  flex: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.step.in-view .step-num {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 5px var(--gold-glow);
}

.step h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.35em;
}

.step p {
  color: var(--mute);
  font-size: 0.94rem;
  margin: 0;
}

/* Kostenlimit-Panel */
.limit-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lift);
  padding: var(--s4);
  position: sticky;
  /* Topbar (40px) + Kopfzeile (81px) + Luft — sonst schiebt sich das
     Panel beim Scrollen unter die Kopfzeile. */
  top: 150px;
}

.limit-panel h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--s2) 0 var(--s1);
}

.limit-panel > p {
  color: var(--mute);
  font-size: 0.94rem;
  margin: 0 0 var(--s4);
}

.slider-block label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-dim);
  margin-bottom: 0.9rem;
}

.slider-block label .amount {
  font-family: var(--display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold) var(--pct, 45%),
    var(--surface-3) var(--pct, 45%),
    var(--surface-3) 100%
  );
  outline: none;
  cursor: pointer;
  margin: 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-hi);
  border: 3px solid var(--void);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 12px rgba(0, 0, 0, 0.6);
  cursor: grab;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-hi);
  border: 3px solid var(--void);
  box-shadow: 0 0 0 1px var(--gold-deep);
  cursor: grab;
}

.limit-result {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.limit-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 0.86rem;
}

.limit-row .k {
  color: var(--mute-dim);
}

.limit-row .v {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.limit-row .v.teal {
  color: var(--signal);
}

.limit-verdict {
  margin-top: var(--s1);
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  border: 1px solid rgba(79, 209, 197, 0.3);
  background: rgba(79, 209, 197, 0.07);
  font-size: 0.88rem;
  color: var(--ice);
  line-height: 1.5;
}

.limit-verdict[data-state="ask"] {
  border-color: rgba(242, 179, 61, 0.35);
  background: rgba(242, 179, 61, 0.07);
}

/* ==========================================================================
   Warum / Trust
   ========================================================================== */

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
}

.why {
  padding: var(--s4) var(--s3);
  border-top: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(242, 179, 61, 0.05), transparent 55%);
}

.why h3 {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
}

.why p {
  color: var(--mute);
  font-size: 0.94rem;
  margin: 0;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.cta-block {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s4);
  text-align: center;
  background:
    radial-gradient(80% 140% at 50% 0%, rgba(242, 179, 61, 0.12), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow-lift);
}

.cta-block h2 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: var(--s2) auto 0;
  max-width: 20ch;
}

.cta-block p {
  color: var(--mute);
  margin: var(--s2) auto 0;
  max-width: 52ch;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

/* Ablauf der Fernwartung, direkt unter dem Knopf. Drei Spalten auf breiten
   Schirmen, gestapelt auf schmalen. Linksbuendig, obwohl der Block sonst
   zentriert ist: mehrzeilige Anleitungen liest man zentriert schlecht. */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin: var(--s4) 0 0;
  padding: var(--s3) 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
  text-align: left;
}

.flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.flow-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gold);
  flex: none;
}

.flow-t {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--mute);
}

.flow-t b {
  display: block;
  font-weight: 500;
  color: var(--ice);
}

@media (max-width: 860px) {
  .flow {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
}

/* Karte im Kontaktabschnitt.
 Der Platzhalter fuellt exakt dieselbe Flaeche,
   die der Google-Rahmen spaeter einnimmt — dadurch springt beim Laden nichts.
   Eigene Selektoren mit zwei Klassen, weil .cta-block p sonst Farbe und
   Aussenabstand der Texte darin ueberschreiben würde. */
.map {
  margin-top: var(--s4);
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-consent {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4) var(--s3);
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% 40%, rgba(242, 179, 61, 0.06), transparent 70%),
    var(--surface);
}

.map .map-pin {
  width: 30px;
  height: 30px;
  color: var(--gold);
}

.map .map-title {
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ice);
}

.map .map-note {
  margin: 0;
  max-width: 46ch;
  font-size: 0.82rem;
  color: var(--mute);
}

.map .map-alt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--mute-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.map .map-alt:hover,
.map .map-alt:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold-line);
}

@media (max-width: 560px) {
  .map {
    aspect-ratio: 4 / 5;
  }
}

.cta-meta {

  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--mute-dim);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--void);
  padding-top: var(--s5);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s4);
  padding-bottom: var(--s5);
}

.foot-about p {
  color: var(--mute);
  font-size: 0.92rem;
  max-width: 34ch;
  margin: var(--s2) 0 0;
}

.foot-col h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-dim);
  margin: 0 0 var(--s2);
  font-weight: 500;
}

.foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.foot-col a,
.foot-col span {
  color: var(--mute);
  text-decoration: none;
  font-size: 0.92rem;
}

.foot-col a:hover {
  color: var(--gold);
}

.foot-bar {
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--mute-dim);
}

.foot-bar a {
  color: var(--mute-dim);
  text-decoration: none;
}

.foot-bar a:hover {
  color: var(--ice);
}

/* ==========================================================================
   Reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
  .limit-layout {
    grid-template-columns: 1fr;
  }

  .limit-panel {
    position: static;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .care {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Kopfzeile wird eng — Rollenzeile weicht, das Signet trägt die Marke. */
  .site-header .brand-role {
    display: none;
  }
}

@media (max-width: 820px) {
  :root {
    --s6: 4.5rem;
    --s7: 5.5rem;
  }

  /* backdrop-filter erzeugt einen Containing Block für fixierte Kinder —
     das Off-Canvas-Menü würde sonst im Header eingesperrt statt am
     Viewport zu hängen. Auf Mobil daher deckende Fläche statt Glas. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--base);
  }

  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 340px);
    background: var(--surface);
    border-left: 1px solid var(--line-strong);
    padding: var(--s6) var(--s4);
    transform: translateX(102%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
    z-index: 70;
    box-shadow: var(--shadow-deep);
  }

  .main-nav[data-open="true"] {
    transform: translateX(0);
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s3);
  }

  .main-nav a {
    font-size: 1.05rem;
    color: var(--ice);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }

  .care {
    padding: var(--s4) var(--s3);
  }

  .foot-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .band-grid {
    grid-template-columns: 1fr;
  }

  .band-item {
    padding-left: 0;
    padding-right: 0;
    border-right: none;
  }

  /* Gestapelt: Trennlinie zwischen den Kacheln — nicht unter der letzten,
     dort sitzt schon der untere Rahmen von .band. */
  .band-item:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }

  .header-actions .btn-gold {
    display: none;
  }

  .brand-role {
    display: none;
  }

  .brand-logo {
    height: 40px;
  }

  .step {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   RECHTSTEXTE (Impressum, Datenschutzerklärung)
   Eigene Seiten, gleiche Instrumententafel-Sprache — aber ohne Schauwert:
   Rechtstexte werden gelesen, nicht überflogen. Darum eine schmale
   Lesespalte, ein mitlaufendes Verzeichnis und sonst nichts, was ablenkt.
   ========================================================================== */

.legal-hero {
  padding-top: var(--s5);
  padding-bottom: var(--s4);
  position: relative;
}

.legal-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: var(--s2) 0 0;
}

/* Das Datum trägt die Aussage "dieser Text ist gepflegt" — deshalb in der
   Monospace, wie alle harten Angaben auf der Seite (Telefon, Beträge). */
.legal-stand {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-dim);
  margin: var(--s3) 0 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  padding-bottom: var(--s7);
}

/* ---------- mitlaufendes Verzeichnis ---------- */

.legal-toc {
  position: sticky;
  /* .site-top klebt oben; das Verzeichnis muss darunter zum Stehen kommen,
     sonst verschwinden seine ersten Einträge hinter der Kopfzeile. */
  top: 130px;
  font-size: 0.88rem;
}

.legal-toc h2 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s2);
}

.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  border-left: 1px solid var(--line);
}

.legal-toc li {
  counter-increment: toc;
}

.legal-toc a {
  display: block;
  padding: 0.45em 0 0.45em var(--s2);
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--mute);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--mute-dim);
}

.legal-toc a:hover {
  color: var(--ice);
  border-left-color: var(--gold-line);
}

/* ---------- Lesespalte ---------- */

.legal-body {
  max-width: 68ch;
  counter-reset: legal;
}

.legal-body h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Über der Überschrift mehr Luft als darunter, damit ein Abschnitt
     optisch mit seinem eigenen Text zusammenhängt und nicht mit dem
     vorhergehenden. */
  margin: var(--s5) 0 var(--s2);
  scroll-margin-top: 140px;
}

.legal-body h2::before {
  counter-increment: legal;
  content: counter(legal, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 0.6em;
}

.legal-body > *:first-child {
  margin-top: 0;
}

.legal-body h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--s3) 0 var(--s1);
}

.legal-body p,
.legal-body li {
  color: var(--mute);
  line-height: 1.72;
}

.legal-body p {
  margin: 0 0 var(--s2);
}

.legal-body ul {
  margin: 0 0 var(--s2);
  padding-left: 0;
  list-style: none;
}

.legal-body ul li {
  position: relative;
  padding-left: var(--s3);
  margin-bottom: 0.5em;
}

/* Kein Aufzählungspunkt, sondern ein kurzer goldener Strich — dieselbe
   Marke, die auch .eyebrow vor dem Text setzt. */
.legal-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--gold-deep);
}

.legal-body strong {
  color: var(--ice);
  font-weight: 600;
}

.legal-body a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color 0.2s ease;
}

.legal-body a:hover {
  border-bottom-color: var(--gold);
}

/* ---------- Angabenblock (Verantwortlicher, Anbieter) ---------- */

/* Rahmenstärke bewusst auf der untersten Sprosse der Goldleiter: Der Block
   trägt Fakten, ist aber kein Handlungsangebot wie das Wartungs-Panel. */
.legal-card {
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--s3);
  margin: 0 0 var(--s3);
}

.legal-card dl {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 0.55em var(--s2);
  margin: 0;
}

.legal-card dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-dim);
  padding-top: 0.28em;
}

.legal-card dd {
  margin: 0;
  color: var(--ice);
}

.legal-card dd a {
  color: var(--ice);
  border-bottom: 1px solid var(--line-strong);
}

.legal-card dd a:hover {
  border-bottom-color: var(--gold);
}

/* Adresse ohne Kursivschrift, sie wird hier als Anschrift gelesen. */
.legal-card address {
  font-style: normal;
}

/* ---------- Fuß der Seite ---------- */

.legal-back {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

@media (max-width: 900px) {
  /* Die Kopfzeile baut sich schmal zweizeilig auf und wird dadurch höher —
     ohne diesen Zuschlag verschwindet eine angesprungene Überschrift
     hinter ihr. Gemessen: 150 px Kopfzeile bei 375 px Breite. */
  .legal-body h2 {
    scroll-margin-top: 168px;
  }

  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  /* Ein klebendes Verzeichnis würde auf dem Telefon die halbe Höhe
     belegen — hier läuft es einfach als Liste voraus mit. */
  .legal-toc {
    position: static;
    top: auto;
  }
}

@media (max-width: 560px) {
  .legal-card dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15em;
  }

  .legal-card dt {
    padding-top: var(--s1);
  }
}

/* Impressum und Datenschutz stehen als Paar in der Fußzeile — ohne eigene
   Gruppe würde space-between sie an die Ränder auseinanderziehen. */
.foot-legal {
  display: flex;
  gap: var(--s3);
}

/* ==========================================================================
   LEISTUNGSSEITEN (Reparatur, Datenrettung, Fernwartung, Netzwerke)
   Vier Unterseiten mit gleichem Bau: Kopf mit Nummer und Anspruch, links
   der Fließtext, rechts eine Tafel mit den harten Angaben. Die Tafel läuft
   beim Scrollen mit, weil genau dort die Fragen stehen, die während des
   Lesens aufkommen: Was kostet es, wie lange, wo.
   ========================================================================== */

.svc-hero {
  padding-top: var(--s5);
  padding-bottom: var(--s4);
}

.svc-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: var(--s2) 0 0;
}

.svc-actions {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}

.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s5);
  align-items: start;
  padding-bottom: var(--s6);
}

/* ---------- Fließtext ---------- */

.svc-main {
  max-width: 68ch;
}

.svc-main > *:first-child {
  margin-top: 0;
}

.svc-main h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  /* Über der Überschrift mehr Luft als darunter, damit ein Abschnitt
     optisch mit seinem eigenen Text zusammenhängt. */
  margin: var(--s5) 0 var(--s2);
  scroll-margin-top: 140px;
}

.svc-main h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: var(--s3) 0 var(--s1);
}

.svc-main p {
  color: var(--mute);
  line-height: 1.72;
  margin: 0 0 var(--s2);
}

.svc-main strong {
  color: var(--ice);
  font-weight: 600;
}

.svc-main a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  transition: border-color 0.2s ease;
}

.svc-main a:hover {
  border-bottom-color: var(--gold);
}

/* Kein Aufzählungspunkt, sondern ein kurzer goldener Strich — dieselbe
   Marke, die auch .eyebrow vor den Text setzt. */
.svc-list {
  list-style: none;
  margin: 0 0 var(--s2);
  padding-left: 0;
}

.svc-list li {
  position: relative;
  padding-left: var(--s3);
  margin-bottom: 0.5em;
  color: var(--mute);
  line-height: 1.72;
}

.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--gold-deep);
}

/* ---------- Tafel mit den harten Angaben ---------- */

.svc-side {
  position: sticky;
  /* .site-top klebt oben; die Tafel muss darunter zum Stehen kommen. */
  top: 130px;
  display: grid;
  gap: var(--s3);
}

/* Rahmenstärke auf der untersten Sprosse der Goldleiter: Die Tafel trägt
   Angaben, ist aber kein Handlungsangebot wie das Wartungs-Panel. */
.svc-facts {
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--r);
  background: var(--surface);
  padding: var(--s3);
}

.svc-facts h2 {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s2);
}

.svc-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding: 0.62em 0;
  border-bottom: 1px solid var(--line);
}

.svc-fact:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.svc-fact .k {
  color: var(--mute);
  font-size: 0.9rem;
}

.svc-fact .v {
  color: var(--ice);
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: right;
  flex: none;
  max-width: 55%;
}

.svc-ask {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(7, 10, 16, 0.42);
  padding: var(--s3);
}

.svc-ask h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

.svc-ask p {
  color: var(--mute);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 var(--s2);
}

.svc-ask .btn {
  width: 100%;
  justify-content: center;
}

/* ---------- die anderen Fachbereiche am Seitenfuss ---------- */

/* Eigene Spaltenzahl statt der zweispaltigen .svc-grid der Startseite: hier
   stehen immer genau drei Karten. Die Regel steht bewusst hinter allen
   Medienabfragen der Startseite, sonst würde deren Umbruch gewinnen. */
.svc-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .svc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  /* Auf schmalen Geräten würde eine klebende Tafel die halbe Höhe
     belegen — hier läuft sie einfach hinter dem Text mit. */
  .svc-side {
    position: static;
    top: auto;
  }

  .svc-grid.is-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .svc-main h2 {
    scroll-margin-top: 168px;
  }
}

@media (max-width: 700px) {
  .svc-grid.is-three {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Zugeklapptes Anfrageformular. [hidden] blendet zwar von sich aus aus, aber
   nur mit der schwachen Kraft des Browser-Standards — eine spätere
   display-Regel auf .care-form würde es unbemerkt wieder sichtbar machen. */
.care-form[hidden] {
  display: none;
}

/* Beim Aufklappen dieselbe kurze Bewegung wie bei .reveal, damit klar wird,
   dass etwas hinzugekommen ist und die Seite nicht nur gesprungen ist. */
.care-form.is-open {
  animation: anfrage-auf 0.28s ease both;
}

@keyframes anfrage-auf {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}