/* =============================================================
   EDV-Service — Stylesheet
   Sticky/scroll-aware Header, statischer Hero-Hintergrund, hell/dunkel-Theme.
   Nur Systemschriften, kein CDN.
   ============================================================= */

:root {
  /* Seitenhintergrund ab "Leistungen" (Startseite) - dunkel/hell je Theme */
  --tech-bg:      url("images/hintergrund/dunkel/hintergrund-dunkel.webp");
  --tech-bg-hoch: url("images/hintergrund/dunkel/hintergrund-dunkel-hochformat.webp");
  --tech-tint:    rgba(10, 11, 14, .35);
  --glass-card:       rgba(16, 18, 24, .42);
  --glass-blur:       16px;
  --glass-sep:        rgba(255, 255, 255, .09);
  --glass-hi:         rgba(58, 66, 86, .45);
  --glass-inner:      rgba(255, 255, 255, .07);
  --glass-card-hover: rgba(26, 29, 38, .72);
  --glass-border:     rgba(255, 255, 255, .10);
  --glass-shadow:     0 24px 60px -24px rgba(0, 0, 0, .65);
  /* ---- DARK (Standard) ---- */
  --bg:          #0a0b0e;
  --bg-soft:     #101218;
  --panel-hover: #14171f;
  --ink:         #f2f3f5;
  --ink-dim:     #9aa1ac;
  --line:        #23262e;
  --accent:      #ff6a3d;   /* warmer Akzent — nach Wunsch ändern */
  --accent-2:    #34e0d0;   /* kühler Gegenpol */
  --on-accent:   #170a06;   /* Textfarbe auf dem Akzent */
  --video-shade: 6, 8, 12;  /* dunkle Abtoenung ueber dem Hintergrundvideo -> weisser Text */
  --logo-filter: brightness(1.22) contrast(1.22);   /* volle Farben inkl. blaue Akzente */

  /* Transluzente Nav-Hintergründe (rgba statt color-mix -> auch ältere Safari) */
  --glass-header: rgba(10, 11, 14, .45);
  --glass-nav:    rgba(10, 11, 14, .95);

  /* Hero-Hintergrund-Ebenen (statisch, pro Theme abgestimmt) */
  --dot:            rgba(255, 255, 255, .10);
  --scan:           rgba(255, 255, 255, .028);
  --aurora-opacity: .34;
  --orb-blend:      screen;
  --orb-opacity:    .5;

  --header-h:  121px;
  --header-h-sm: 97px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;

  /* Nur Systemschriften – keine Web-Fonts. "Bahnschrift" (Windows) gibt der
     Überschrift einen technischen DIN-Charakter; Fallbacks für macOS/Linux. */
  --f-display: "Bahnschrift", "Arial Narrow", system-ui, -apple-system,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-body:    system-ui, -apple-system, "Segoe UI", "Helvetica Neue",
               Arial, sans-serif;
  --f-mono:    ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
               "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;
}

/* ---- LIGHT-Tokens ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --tech-bg:      url("images/hintergrund/hell/hintergrund-hell.webp");
    --tech-bg-hoch: url("images/hintergrund/hell/hintergrund-hell-hochformat.webp");
    --tech-tint:    rgba(245, 243, 238, .30);
    --glass-card:       rgba(255, 255, 255, .75);
    --glass-blur:       4px;
    --glass-sep:        transparent;
    --glass-hi:         rgba(255, 255, 255, .9);
    --glass-inner:      rgba(255, 255, 255, .95);
    --glass-card-hover: rgba(255, 255, 255, .9);
    --glass-border:     rgba(255, 255, 255, .75);
    --glass-shadow:     0 24px 60px -28px rgba(30, 50, 80, .35);
    --video-shade: 245, 243, 238;   /* helle Abtoenung ueber dem Video -> schwarzer Text */
    --bg:          #f5f3ee;
    --bg-soft:     #ffffff;
    --panel-hover: #efece4;
    --ink:         #17181c;
    --ink-dim:     #5b616b;
    --line:        #e2ddd0;
    --accent:      #d9530b;
    --accent-2:    #0e8f82;
    --on-accent:   #fff4ec;
    --logo-filter: brightness(1.22) contrast(1.22);   /* Hell-Theme: gleiche Darstellung wie Dunkel, Farben/blaue Akzente bleiben */
    --glass-header: rgba(245, 243, 238, .5);
    --glass-nav:    rgba(245, 243, 238, .96);
    --dot:            rgba(20, 22, 28, .15);
    --scan:           rgba(20, 22, 28, .05);
    --aurora-opacity: .34;
    --orb-blend:      multiply;
    --orb-opacity:    .48;
    color-scheme: light;
  }
}
/* ---- LIGHT: manuell gewählt (gewinnt über System) ---- */
:root[data-theme="light"] {
  --tech-bg:      url("images/hintergrund/hell/hintergrund-hell.webp");
  --tech-bg-hoch: url("images/hintergrund/hell/hintergrund-hell-hochformat.webp");
  --tech-tint:    rgba(245, 243, 238, .30);
  --glass-card:       rgba(255, 255, 255, .75);
  --glass-blur:       4px;
  --glass-sep:        transparent;
  --glass-hi:         rgba(255, 255, 255, .9);
  --glass-inner:      rgba(255, 255, 255, .95);
  --glass-card-hover: rgba(255, 255, 255, .9);
  --glass-border:     rgba(255, 255, 255, .75);
  --glass-shadow:     0 24px 60px -28px rgba(30, 50, 80, .35);
  --video-shade: 245, 243, 238;
  --bg:          #f5f3ee;
  --bg-soft:     #ffffff;
  --panel-hover: #efece4;
  --ink:         #17181c;
  --ink-dim:     #5b616b;
  --line:        #e2ddd0;
  --accent:      #d9530b;
  --accent-2:    #0e8f82;
  --on-accent:   #fff4ec;
  --logo-filter: brightness(1.22) contrast(1.22);   /* Hell-Theme: gleiche Darstellung wie Dunkel, Farben/blaue Akzente bleiben */
  --glass-header: rgba(245, 243, 238, .5);
  --glass-nav:    rgba(245, 243, 238, .96);
  --dot:            rgba(20, 22, 28, .15);
  --scan:           rgba(20, 22, 28, .05);
  --aurora-opacity: .34;
  --orb-blend:      multiply;
  --orb-opacity:    .48;
  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* iOS: kein Auto-Vergrößern bei Drehung */
          text-size-adjust: 100%;
  scrollbar-width: thin;                                  /* Firefox */
  scrollbar-color: var(--accent) var(--bg-soft);
}
/* Mac (html.awk-mac, 11.10.2026): normale macOS-Scrollleiste - Safari zeichnet
   selbst gestaltete Leisten im Haupt-Rechenstrang, sie hinkten dem Scrollen hinterher */
html.awk-mac { scrollbar-width: auto; scrollbar-color: auto; }
/* Mac: Spruenge zu Bereichen ohne sanftes Gleiten (11.10.2026, Nutzerwunsch) */
html.awk-mac { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #111; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Bunter Scrollbalken – gleicher Aufbau wie im Projekt „AWK GAMING",
   hier mit den Akzentfarben dieser Seite (Verlauf dreht sich beim Hover) */
html:not(.awk-mac)::-webkit-scrollbar, html:not(.awk-mac) ::-webkit-scrollbar { width: 8px; height: 8px; }
html:not(.awk-mac)::-webkit-scrollbar-track, html:not(.awk-mac) ::-webkit-scrollbar-track { background: var(--bg-soft); }
html:not(.awk-mac)::-webkit-scrollbar-thumb, html:not(.awk-mac) ::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent), var(--accent-2));
  border-radius: 4px;
}
html:not(.awk-mac)::-webkit-scrollbar-thumb:hover, html:not(.awk-mac) ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--accent-2), var(--accent)); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #111;
  padding: .7rem 1rem; font-family: var(--f-mono); font-size: .8rem;
}
.skip:focus { left: .75rem; top: .75rem; }

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .35s var(--ease), background .35s var(--ease),
              border-color .35s var(--ease), backdrop-filter .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  height: var(--header-h-sm);
  background: var(--bg);
  background: var(--glass-header);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: var(--line);
}
/* Horizontaler Glow-Strich unter dem Header — wie .header-glow bei AWK-GAMING */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .5;
  pointer-events: none;
}

.nav {
  width: 100%;
  max-width: 1600px;    /* Desktop: Header-Inhalt breiter, füllt Full-HD besser */
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 1.5vw, 1.5rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;          /* darf schrumpfen, damit Burger/Toggle nie rausfallen */
}
/* Firmenlogo (dunkles Chrome-PNG) — pro Theme angepasst (--logo-filter) */
.brand__logo {
  /* neues Logo-PNG hat viel Leerraum oben/unten (AWK-TECH + IT SERVICE
     stehen nur auf ~54% der Bildhöhe) -> Anzeigehöhe angehoben, damit der
     Schriftzug wieder so groß & scharf wirkt wie mit dem alten Zuschnitt.
     Fließend statt in festen Sprüngen, sonst kollidiert es auf schmalen
     Fenstern mit den Icon-Buttons (die an anderen Breakpoints schrumpfen). */
  height: clamp(16px, 27.15vw - 67px, 103px);
  width: auto;
  max-width: 380px;
  flex: none;
  filter: var(--logo-filter);
  transform: none;              /* eng beschnittenes PNG -> keine Korrektur nötig */
  transition: height .35s var(--ease);
}
.site-header.is-scrolled .brand__logo { height: clamp(13px, 22.4vw - 55px, 85px); }
.brand__suffix {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-left: .55rem;
  border-left: 1px solid var(--line);
  white-space: nowrap;
  /* Reine Versalien wirken optisch zu hoch (keine Unterlängen, x-Höhe leer) –
     spürbar nach unten auf den Mittelpunkt der Icon-Buttons ziehen */
  transform: translateY(.16em);
}
/* Schriftgröße von "EDV-Service" schrumpft weiter gestuft mit; die Logo-Höhe
   selbst läuft jetzt fließend über .brand__logo (siehe oben). */
@media (max-width: 600px) {
  .brand__suffix {
    font-size: .72rem;
    letter-spacing: .06em;
    padding-left: .4rem;
  }
}
@media (max-width: 400px) {
  .brand__suffix {
    font-size: .6rem;
    letter-spacing: .02em;
    padding-left: .3rem;
  }
}

/* Theme-Umschalter */
.theme-toggle {
  width: 40px; height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
/* Symbol hell weiss; im hellen Design waere Weiss auf hellem Grund
   unsichtbar - dort dunkel (--ink) */
.theme-toggle { color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle { color: var(--ink); }
}
:root[data-theme="light"] .theme-toggle { color: var(--ink); }
.theme-toggle:hover,
:root .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
/* halb hell / halb dunkel — dreht sich beim Umschalten leicht */
:root[data-theme="light"] .theme-toggle svg { transform: rotate(180deg); }
.theme-toggle svg { transition: transform .4s var(--ease); }

/* Icon-Buttons im Header (Telefon, WhatsApp) */
.nav__mail, .nav__tel, .nav__wa {
  width: 40px; height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__mail:hover, .nav__tel:hover { color: var(--accent); border-color: var(--accent); }
/* Telefon dauerhaft in Orange (wie Nummer und "Termin anfragen") */
.nav__tel {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 45%, var(--line));
}
.nav__tel:hover { color: color-mix(in oklab, var(--accent) 75%, var(--ink)); border-color: var(--accent); }
/* E-Mail dauerhaft in Blau (Rahmen leicht blau, wie WhatsApp in Gruen);
   mit --ink gemischt -> im hellen Design etwas dunkler, im dunklen heller */
.nav__mail {
  --mail-blue: color-mix(in oklab, #2f8cff 85%, var(--ink));
  color: var(--mail-blue);
  border-color: color-mix(in oklab, var(--mail-blue) 45%, var(--line));
}
.nav__mail:hover { color: color-mix(in oklab, #2f8cff 65%, var(--ink)); border-color: var(--mail-blue); }
/* WhatsApp dauerhaft in WhatsApp-Gruen (Rahmen leicht gruen, wie
   Telefon in Orange) */
.nav__wa { color: #25d366; border-color: color-mix(in oklab, #25d366 45%, var(--line)); }
.nav__wa:hover { color: #1da851; border-color: #25d366; }
/* Chat-Symbol (oeffnet den Berater) - nur in sehr schmalen PC-Fenstern sichtbar, an der
   Stelle von "Rund um die Uhr anfragen": deshalb wie dieser invertiert (orange gefuellt,
   Symbol in der Button-Textfarbe) und mit demselben Lichtreflex (.btn__clip) */
.nav__form {
  display: none;
  width: 40px; height: 40px;
  flex: none;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav__form:hover {
  background: color-mix(in oklab, var(--accent) 88%, #fff);
  border-color: color-mix(in oklab, var(--accent) 88%, #fff);
}
.nav__form svg { width: 18px; height: 18px; }
.nav__mail svg { width: 18px; height: 18px; }
.nav__tel svg { width: 18px; height: 18px; }
.nav__wa svg { width: 19px; height: 19px; }


/* Telefonnummer unter den Header-Buttons. Absolut zum Header positioniert,
   damit Logo, Buttons und Header-Hoehe unveraendert bleiben.
   Senkrecht: mittig zwischen Button-Unterkante (50% + halbe Button-Hoehe)
   und Header-Unterkante (100%) -> 75% + halbe Button-Hoehe / 2; wandert
   beim Schrumpfen des Headers (is-scrolled) automatisch mit.
   Waagerecht: script.js setzt --phone-cx = Mitte der Symbole (PC: Theme
   bis WhatsApp, mobil/Touch: Theme bis "Termin anfragen");
   ohne JS rechtsbuendig mit dem letzten Button (Nav max. 1600px, zentriert). */
.nav__phone {
  --btn-half: 20px;
  position: absolute;
  top: calc(75% + var(--btn-half) / 2);
  right: calc(max(0px, (100% - 1600px) / 2) + clamp(1.1rem, 4vw, 3rem));
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--f-mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  color: var(--accent);
  text-decoration: none;
  transition: color .2s var(--ease), font-size .35s var(--ease);
}
.nav__phone.is-centered {
  right: auto;
  left: var(--phone-cx);
  transform: translate(-50%, -50%);
}
.nav__phone svg { width: 15px; height: 15px; flex: none; }
.nav__phone:hover { color: color-mix(in oklab, var(--accent) 75%, var(--ink)); }

/* Kurzinfo (Tooltip) beim Überfahren / Fokussieren der Icon-Buttons */
.theme-toggle, .nav__mail, .nav__tel, .nav__wa, .nav__form { position: relative; }
/* Kurzinfo auch an "Termin anfragen" im Header */
.theme-toggle[data-tip]::after,
.nav__mail[data-tip]::after,
.nav__tel[data-tip]::after,
.nav__wa[data-tip]::after,
.nav__form[data-tip]::after,
.nav > .btn--cta[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  /* unterhalb der Header-Linie und damit unter der Telefonnummer
     (Header 121px / 97px gescrollt, Nummer liegt zwischen Buttons und Linie) */
  top: calc(100% + 50px);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%) translateY(4px);
  padding: .3rem .55rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
/* "Termin anfragen" ist hoeher als die 40px-Icons: Kurzinfo von der
   Button-Mitte aus setzen (= 100% + 50px bei einem 40px-Icon), damit sie
   auf gleicher Hoehe wie bei den Symbolen erscheint */
.nav > .btn--cta[data-tip]::after { top: calc(50% + 70px); }
/* Pfeil entfernt – nur die Text-Box, klar unterhalb der Header-Linie */
.theme-toggle[data-tip]:hover::after, .theme-toggle[data-tip]:focus-visible::after,
.nav__mail[data-tip]:hover::after, .nav__mail[data-tip]:focus-visible::after,
.nav__tel[data-tip]:hover::after, .nav__tel[data-tip]:focus-visible::after,
.nav__wa[data-tip]:hover::after, .nav__wa[data-tip]:focus-visible::after,
.nav__form[data-tip]:hover::after, .nav__form[data-tip]:focus-visible::after,
.nav > .btn--cta[data-tip]:hover::after, .nav > .btn--cta[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* auf Touch-Geräten (kein Hover) nicht anzeigen */
@media (hover: none) {
  .theme-toggle[data-tip]::after, .nav__mail[data-tip]::after,
  .nav__tel[data-tip]::after, .nav__wa[data-tip]::after,
  .theme-toggle[data-tip]::before, .nav__mail[data-tip]::before,
  .nav__tel[data-tip]::before, .nav__wa[data-tip]::before,
  .nav__form[data-tip]::after, .nav > .btn--cta[data-tip]::after { display: none; }
}

.nav__links {
  list-style: none;
  display: flex;
  gap: clamp(.85rem, 1.8vw, 1.9rem);
  margin-left: auto;
  margin-right: .4rem;
  font-size: .92rem;
}
.nav__links a {
  position: relative;
  white-space: nowrap;   /* "Über uns" nicht umbrechen */
  color: var(--ink-dim);
  padding: .4rem 0;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: width .28s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }
/* Mac (11.10.2026, Nutzerwunsch): kein Unterstrich-Effekt beim Darueberfahren - der Unterstrich
   zeigt nur die aktuelle Position (.is-active) */
html.awk-mac .nav__links a:hover:not(.is-active)::after { width: 0; }

.btn {
  --pad-y: .72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .9rem;
  padding: var(--pad-y) 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 15px; height: 15px; }

.btn--cta {
  /* orange wie "Termin anfragen" im Hero und auf Touch-Geraeten,
     inkl. Lichtreflex (.btn__shine) */
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent);
}
.btn--cta:hover { background: color-mix(in oklab, var(--accent) 88%, #fff); }
.site-header.is-scrolled .btn--cta { --pad-y: .58rem; }
/* Header-CTA: nicht selbst beschneiden (sonst waere die Kurzinfo darunter
   unsichtbar) - den Lichtreflex begrenzt stattdessen .btn__clip */
.nav > .btn--cta { overflow: visible; }
.btn__clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}

.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent);
  padding: .95rem 1.6rem;
  font-size: 1rem;
}
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, #fff); }
.btn__shine {
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: shine 3.6s var(--ease) infinite;
}
.btn--ghost {
  /* zweiter Hero-Button: leicht mit der Akzentfarbe hinterlegt statt nur Rahmen */
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--ink);
  padding: .95rem 1.6rem;
  font-size: 1rem;
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 26%, transparent);
  color: var(--ink);
}

/* burger */
.burger {
  display: none;
  flex: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.burger span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .28s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;      /* Fallback für Browser ohne svh (iOS < 15.4) */
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto;   /* Inhalt = flexible Zeile, darunter Buttons, dann Laufband */
  grid-template-columns: minmax(0, 1fr);   /* Spalte nie breiter als die Seite - sonst zieht ein zu langes Wort den ganzen Hero (inkl. Laufband) seitlich ueber den Rand */
  align-items: stretch;           /* Inhaltszeile fuellt die Hoehe: Titel oben, Beschreibung unten */
  /* horizontales Padding sitzt auf .hero__inner (gleicher Rahmen wie der Header),
     damit sich das Laufband weiterhin randlos über die volle Breite zieht */
  padding: calc(var(--header-h) + clamp(1.5rem, 6vh, 4rem)) 0 clamp(1.5rem, 5vh, 3rem);
  isolation: isolate;
}

/* --- Hintergrund-Ebenen (rein dekorativ, statisch) --- */
/* overflow liegt hier, nicht auf .hero -> Inhalt wird auf kurzen Screens nie abgeschnitten */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Kurze/liegende Screens: Hero nicht zwingend bildschirmfüllend */
@media (max-height: 620px) {
  .hero { min-height: auto; }
}

.hero__aurora {
  position: absolute;
  inset: -30%;
  background:
    conic-gradient(from 210deg at 50% 45%,
      color-mix(in oklab, var(--accent) 55%, transparent),
      color-mix(in oklab, var(--accent-2) 45%, transparent),
      color-mix(in oklab, #7a5cff 40%, transparent),
      color-mix(in oklab, var(--accent) 55%, transparent));
  filter: blur(90px) saturate(1.2);
  opacity: var(--aurora-opacity);
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  mix-blend-mode: var(--orb-blend);
  opacity: var(--orb-opacity);
}
.hero__orb--a {
  width: 42vw; height: 42vw;
  left: -8vw; top: 4vw;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 62%);
}
.hero__orb--b {
  width: 36vw; height: 36vw;
  right: -6vw; bottom: -6vw;
  background: radial-gradient(circle at 60% 40%, var(--accent-2), transparent 60%);
}

.hero__grid {
  position: absolute;
  inset: -4%;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 30%, transparent 78%);
}

.hero__noise {
  position: absolute; inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__scan {
  position: absolute; inset: 0;
  background: linear-gradient(var(--scan) 1px, transparent 1px);
  background-size: 100% 4px;
  opacity: .5;
}

/* --- hero content --- */
.hero__inner {
  position: relative;
  width: 100%;
  /* gleicher Rahmen wie der Header (.nav): Text + Button beginnen im
     Desktop-Vollbild linksbündig unter dem Logo statt mittig */
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
}

/* Standort-Zeile ueber dem Beschreibungstext: orange Akzentlinie links,
   kleine Zeile "Ihr IT-Service im Raum", darunter der Ort gross */
.eyebrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  margin: 1.5rem 0 0;            /* Abstand zur Überschrift darüber */
  padding: .15rem 0 .15rem 1rem;
  border-left: 4px solid var(--accent);
  opacity: 0;
  transform: translateY(12px);
  animation: rise .7s .58s var(--ease) forwards;
}
.eyebrow__kicker {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow__place {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--ink);
}

.hero__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 9.5vw, 6.6rem);   /* vorher max 5.4rem */
  line-height: 1.02;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.hero__title .line { display: block; overflow: hidden; }
/* Mac (11.10.2026): dort fehlt Bahnschrift, die Ersatzschrift hat laengere Unterlaengen - g, y, p
   wurden unten abgeschnitten (Zeile kappt fuers Hereingleiten, Verlaufswoerter malen nur im
   Wortkasten). Unten Luft fuer die Unterlaengen, per negativem Rand ausgeglichen: Zeilenabstand
   und Lage bleiben gleich. */
html.awk-mac .hero__title .line,
html.awk-mac .hero__title .word { padding-bottom: .2em; margin-bottom: -.2em; }
/* ebenso Handys/Tablets (11.10.2026, Nutzer: g, y, p in der mobilen Ansicht unten angeschnitten -
   Android nimmt Roboto, iPhone die Systemschrift) */
@media (hover: none) and (pointer: coarse) {
  .hero__title .line,
  .hero__title .word { padding-bottom: .2em; margin-bottom: -.2em; }
}
.hero__title .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  /* Einblenden von unten; die Wiederholung steuert der Text-Wechsler in script.js */
  animation: wordUp .8s var(--ease) forwards;
}
.hero__title .line:nth-child(1) .word:nth-child(1) { animation-delay: .05s; }
.hero__title .line:nth-child(1) .word:nth-child(2) { animation-delay: .13s; }
.hero__title .line:nth-child(1) .word:nth-child(3) { animation-delay: .21s; }
.hero__title .line:nth-child(2) .word:nth-child(1) { animation-delay: .21s; }
.hero__title .line:nth-child(2) .word:nth-child(2) { animation-delay: .29s; }
.hero__title .line:nth-child(2) .word:nth-child(3) { animation-delay: .37s; }
/* dritte Zeile (z. B. Variante "WLAN weg? Drucker streikt? Läuft gleich wieder.") */
.hero__title .line:nth-child(3) .word:nth-child(1) { animation-delay: .37s; }
.hero__title .line:nth-child(3) .word:nth-child(2) { animation-delay: .45s; }
.hero__title .line:nth-child(3) .word:nth-child(3) { animation-delay: .53s; }
/* 4./5. Wort einer Zeile (z. B. "Ihr System ist zu langsam?", "So schnell wie neu.") - sonst ohne
   Verzoegerung und vor den anderen Woertern sichtbar (11.10.2026) */
.hero__title .line:nth-child(1) .word:nth-child(4) { animation-delay: .29s; }
.hero__title .line:nth-child(1) .word:nth-child(5) { animation-delay: .37s; }
.hero__title .line:nth-child(2) .word:nth-child(4) { animation-delay: .45s; }
.hero__title .line:nth-child(2) .word:nth-child(5) { animation-delay: .53s; }
.hero__title .line:nth-child(3) .word:nth-child(4) { animation-delay: .61s; }
.hero__title .line:nth-child(3) .word:nth-child(5) { animation-delay: .69s; }
/* vierte Zeile (Variante "Fotos weg? Dateien verschwunden? Wir geben Ihre Daten nicht so schnell auf.") */
.hero__title .line:nth-child(4) .word:nth-child(1) { animation-delay: .53s; }
.hero__title .line:nth-child(4) .word:nth-child(2) { animation-delay: .61s; }
.hero__title .line:nth-child(4) .word:nth-child(3) { animation-delay: .69s; }
.hero__title .line:nth-child(4) .word:nth-child(4) { animation-delay: .77s; }
.hero__title .line:nth-child(4) .word:nth-child(5) { animation-delay: .85s; }
/* kurzes Hinausgleiten nach oben, bevor der nächste Text kommt */
.hero__title.is-leaving .word { animation: wordOut .28s var(--ease) forwards; }
.hero__title .accent {
  background: linear-gradient(92deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Titel + Kurzinfo oben (unter der Header-Linie), der Beschreibungstext
   rutscht ans Ende der Inhaltszeile - direkt ueber die Buttons. */
.hero__inner:not(.hero__inner--actions) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* Kurzinfo-Pille nicht auf volle Breite dehnen */
}
/* Kurzinfo-Pille gehoert zum unteren Block: sie nimmt den Freiraum
   (margin-top:auto) und steht direkt ueber dem Beschreibungstext */
.hero__inner:not(.hero__inner--actions) .eyebrow {
  margin-top: auto;
}
.hero__lead {
  max-width: 52ch;
  margin-top: 1.1rem;
  margin-bottom: 1.6rem;
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  opacity: 0;
  transform: translateY(12px);
  animation: rise .8s .7s var(--ease) forwards;
}

/* Preisangabe passend zum wechselnden Hero-Text, direkt ueber den Buttons */
.hero__price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .3rem .7rem;
  margin-bottom: 1rem;
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  opacity: 0;
  transform: translateY(12px);
  animation: rise .8s .78s var(--ease) forwards;
}
.hero__price-label { color: var(--ink-dim); }
.hero__price-amt {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1.8em;   /* nur der Preis gross, Beschreibung bleibt normal */
  color: var(--accent);
  white-space: nowrap;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0;   /* sitzt in eigener Grid-Zeile ueber dem Laufband, Abstand regelt .ticker margin-top */
  opacity: 0;
  transform: translateY(12px);
  animation: rise .8s .85s var(--ease) forwards;
}

/* --- ticker (im Fluss, in der 2. Grid-Zeile, randlos über die Hero-Breite) --- */
.ticker {
  align-self: end;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);   /* Abstand Buttons -> Laufband */
  margin-inline: 0;  /* .hero hat kein horizontales Padding mehr -> schon randlos */
  border-block: 1px solid var(--line);
  padding-block: .7rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--f-mono);
  font-size: 1.35rem;   /* vorher .78rem */
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);   /* Kopfzeilen in Akzent-Orange wie die Preise */
  animation: marquee 34s linear infinite;
  will-change: transform;
}
/* Drei identische Gruppen -> nahtlose Endlosschleife bis ~4000 px Breite */
.ticker__group {
  display: flex;
  align-items: center;
  gap: 4.5rem;            /* ohne "+"-Trenner etwas mehr Luft zwischen den Begriffen */
  padding-right: 4.5rem;  /* = gap, sonst springt die Endlosschleife */
  flex: none;
}
.ticker__sep { color: var(--accent); }

/* =============================================================
   INHALT unterhalb des Headers
   ============================================================= */
.wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.section {
  padding-block: clamp(3.4rem, 9vh, 6.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h-sm) + 1.2rem);
}
#leistungen { border-top: 0; }

.section__head { max-width: 60ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.kicker {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.section h2, #ueber h1 {   /* Ueber uns: einzige h1 der Seite (SEO), Optik wie h2 */
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
}
.section__lead { margin-top: .9rem; color: var(--ink-dim); max-width: 56ch; }

/* Zentrierte Variante (Leistungen): Ueberschrift und Text mittig ueber dem Raster;
   Text in voller Schriftfarbe (schwarz im hellen, weiss im dunklen Theme)
   statt gedaempftem Grau - ebenso die Texte in den Leistungs-Karten (.svc p). */
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .section__lead { margin-inline: auto; color: var(--ink); font-size: 1.15rem; }   /* einheitlich in allen zentrierten Abschnitten */
#preise .section__head--center,
#kontakt .section__head--center { max-width: none; }   /* Saetze bleiben einzeilig */
#preise .section__lead { max-width: none; }   /* Satz passt in eine Zeile */
#ueber .section__lead { font-size: 1.15rem; }   /* gleiche Groesse wie der Text darunter (.prose) */
#kontakt .section__lead { color: var(--ink); font-size: 1.15rem; }   /* wie bei "Ueber uns" */
.prose {
  /* "Ueber uns": breiter, luftiger, mittig unter der zentrierten Ueberschrift */
  color: var(--ink);
  max-width: 92ch;
  margin-inline: auto;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.8;
}
.prose + .prose { margin-top: 1.1em; }   /* Absaetze sichtbar trennen */

/* --- Leistungen: Karten --- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.svc {
  background: var(--bg-soft);
  padding: 1.6rem 1.4rem 1.8rem;
  transition: background .2s var(--ease);
  /* Titel oben, Text unten buendig (Karten einer Reihe sind gleich hoch) */
  display: flex;
  flex-direction: column;
  /* Karte ist ein Link zum Kontaktbereich */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.svc:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.svc p { margin-top: auto; }
.svc:hover { background: var(--panel-hover); }
.svc h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.14rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 .5rem;
}
.svc p { color: var(--ink); font-size: .93rem; }   /* volle Schriftfarbe statt Grau (schwarz hell / weiss dunkel) */

/* --- Preise: Liste --- */
.pricelist {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.prow {
  display: grid;
  /* feste Preis-Spalte: jede Zeile ist ein eigenes Grid - mit "auto" wuerde
     sich die 3. Spalte nach dem Inhalt richten (Kopf "ab (inkl. 19 % MwSt.)"
     vs. "30 €") und die Spalten verschoben sich von Zeile zu Zeile */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 15.5rem;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.05rem 1.3rem;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.prow:first-child { border-top: 0; }
.prow--head {
  background: transparent;
  font-family: var(--f-mono);
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);   /* Kopfzeilen in Akzent-Orange wie die Preise */
}
.prow:not(.prow--head):hover { background: var(--panel-hover); }
/* Preiszeilen sind Links zum Kontaktbereich */
a.prow { color: inherit; text-decoration: none; cursor: pointer; }
a.prow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.prow__name { font-weight: 600; color: var(--ink); }
.prow__desc { color: var(--ink); font-size: .9rem; }   /* volle Schriftfarbe (schwarz hell / weiss dunkel) */
.prow__amt {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
  white-space: nowrap;
  text-align: right;
}
.prow--head .prow__amt { font-family: var(--f-mono); font-size: .95rem; color: var(--accent); white-space: normal; line-height: 1.4; }
.pricelist__subhead + .pricelist .prow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 15.5rem; }
/* Kopfzeilen der Preis-Spalte immer einzeilig ("ab (inkl. 19 % MwSt.)",
   "Privat / Gewerbe je Std."): rechtsbuendig, darf bei Bedarf nach links
   in die (kurze) Details-Ueberschrift hineinragen statt umzubrechen */
.prow--head .prow__amt { width: max-content; justify-self: end; white-space: nowrap; }
@media (max-width: 1020px) {
  /* bis ca. 1010px ragte die einzeilige Kopfzeile ueber "Details" /
     "Abrechnungstakt" - darunter wieder in der Preis-Spalte umbrechen */
  .prow--head .prow__amt { width: auto; white-space: normal; }
}
.prow__unit { font-family: var(--f-mono); font-weight: 400; font-size: .82rem; color: var(--ink); }
.pricelist__subhead {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  margin: 2rem 0 .8rem;
}
.pricelist__note { margin-top: 1.1rem; font-size: .84rem; color: var(--ink); }
.pricelist__note + .pricelist__note { margin-top: .5rem; }

/* --- Ablauf: Schritte --- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.steps li {
  background: var(--bg-soft);
  padding: 1.6rem 1.4rem 1.8rem;
  /* Nummer + Titel oben, Text unten buendig (wie bei den Leistungs-Karten) */
  display: flex;
  flex-direction: column;
}
.steps p { margin-top: auto; }
.steps__n {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.05rem;
}
.steps h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  margin: .9rem 0 .45rem;
}
.steps p { color: var(--ink); font-size: .92rem; }   /* volle Schriftfarbe wie bei den Leistungs-Karten */

/* --- Kontakt --- */
.contact {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
.contact__facts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.contact__facts div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.2rem;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.contact__facts div:first-child { border-top: 0; }
.contact__facts dt {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);   /* Kopfzeilen in Akzent-Orange wie die Preise */
}
.contact__facts dd { text-align: right; font-size: .92rem; color: var(--ink); }
.contact__facts dd a { border-bottom: 1px solid var(--line); }
.contact__facts dd a:hover { color: var(--accent); border-color: var(--accent); }
.wa-link, .tel-link { display: inline-flex; align-items: center; gap: .4rem; }
.wa-link svg, .tel-link svg { width: 15px; height: 15px; flex: none; }
.wa-link svg { color: #25d366; }
.tel-link svg { color: var(--accent); }
.wa-link:hover { color: #25d366; border-color: #25d366; }

.enquiry { display: grid; gap: 1.1rem; }
.enquiry .field { display: grid; gap: .4rem; }
.enquiry label {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);   /* Kopfzeilen in Akzent-Orange wie die Preise */
}
.enquiry input, .enquiry textarea {
  font-family: var(--f-body);
  font-size: .96rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .85rem;
  transition: border-color .2s var(--ease);
}
.enquiry input:focus, .enquiry textarea:focus { outline: none; border-color: var(--accent); }
.enquiry textarea { resize: vertical; min-height: 4.5rem; }
.enquiry .btn { justify-self: start; align-self: start; }   /* nicht mit der gestreckten Formularhoehe mitwachsen */
.enquiry__note { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-dim); min-height: 1.2em; }
.enquiry__note.is-error { color: var(--accent); }

/* --- Footer (mehrspaltig, Aufbau aus BETA_CODE übernommen, an den EDV-Service angepasst) --- */
.foot {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-dim);
  font-size: .85rem;
  scroll-margin-top: calc(var(--header-h-sm) + 1rem);   /* Sprungziel #rechtliches */
}
.foot__glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .4;
}
/* Aufbau/Maße am AWK-GAMING-Footer ausgerichtet */
.foot__inner {
  max-width: 1280px;                                   /* wie .container bei AWK-GAMING -> langer Divider */
  margin-inline: auto;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 24px) 0;
}
.foot__grid {
  display: grid;
  /* Feste Spaltenzahl statt auto-fit: "Rechtliches" soll immer neben
     "Service" stehen und nie darunter rutschen. Unter 700px bekommt das
     Logo die volle Breite, die beiden Link-Spalten bleiben nebeneinander. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}

.foot__brand { grid-column: 1 / -1; min-width: 0; }
/* Ab Tablet-Breite: Logo/Beschreibung bekommen die linke Haelfte, die
   Spalten "Service" und "Rechtliches" ruecken nach rechts */
@media (min-width: 700px) {
  .foot__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: auto; }
  .foot__col { padding-top: 28px; }   /* Spalten etwas tiefer, auf Hoehe des Logo-Schriftzugs */
}
.foot__logo {
  /* Breitenbasiert statt hoehenbasiert: so schrumpft das Logo mit seiner
     Spalte und laeuft nie in "Service"/"Rechtliches" hinein. */
  width: min(250px, 100%);
  height: auto;
  max-width: 100%;
  filter: var(--logo-filter);
  transform: none;
  display: block;
  margin-top: -22px;   /* Logo-PNG hat Leerraum oben -> Schriftzug auf Hoehe der Spaltentitel */
  margin-bottom: 16px;
}
.foot__desc {
  font-size: 14px;
  line-height: 1.6;
  max-width: 300px;
  margin-bottom: 24px;
  color: var(--accent);   /* Kopfzeilen in Akzent-Orange wie die Preise */
}
.foot__owner { font-size: .8rem; color: var(--ink-dim); }
.foot__col { display: flex; flex-direction: column; align-items: flex-start; }
.foot__col h4 {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
.foot__col a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 6px 0;
  font-size: 14px;
  color: var(--ink-dim);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.foot__col a:hover { color: var(--accent); transform: translateX(4px); }
.foot__col svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.foot__hours { margin-top: .65rem; font-size: .8rem; line-height: 1.5; color: var(--ink-dim); }
.foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.2rem;
  padding: 24px 0;
  font-size: 13px;
  color: var(--ink);   /* Copyright-Zeile in voller Schriftfarbe: schwarz hell / weiss dunkel */
}
.foot__bottom-legal a { border-bottom: 1px solid var(--line); }
.foot__bottom-legal a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 480px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .foot__bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* Platzhalter-Markierung (noch einzutragende Angaben) */
.tbd {
  color: var(--accent);
  border-bottom: 1px dashed color-mix(in oklab, var(--accent) 55%, transparent);
}

/* =============================================================
   RECHTSSEITEN (Impressum / Datenschutz)
   ============================================================= */
.site-header--page,
.site-header--page.is-scrolled {
  height: var(--header-h-sm);
  background: var(--bg);
  background: var(--glass-header);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: var(--line);
}
.site-header--page .brand__logo { height: clamp(12px, 20vw - 49px, 76px); }

/* Unterseite im Abschnitts-Layout (z. B. ueber-uns.html): Platz fuer den
   festen Header, Abschnitt ohne obere Trennlinie */
main.page { padding-top: var(--header-h); }
main.page .section { border-top: 0; min-height: 60vh; }
.page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.legal {
  max-width: 820px;
  margin-inline: auto;
  padding: calc(var(--header-h) + clamp(2rem, 6vw, 3.5rem)) clamp(1.1rem, 4vw, 2.5rem) clamp(4rem, 10vh, 7rem);
}
.legal__crumb {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 1.2rem;
}
.legal__crumb a { border-bottom: 1px solid var(--line); }
.legal__crumb a:hover { color: var(--accent); }

.legal h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3rem);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
}
.legal .legal__intro { margin-top: .9rem; color: var(--ink-dim); }
.legal h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 2.4rem 0 .8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1rem;
  margin: 1.4rem 0 .4rem;
}
.legal p, .legal li { color: var(--ink-dim); font-size: .95rem; line-height: 1.7; }
.legal p { margin: .7rem 0; }
.legal ul, .legal ol { margin: .7rem 0 .7rem 1.3rem; }
.legal li { margin: .35rem 0; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--accent); }
.legal a:hover { color: var(--accent); }
.legal strong { color: var(--ink); }
.legal code {
  font-family: var(--f-mono);
  font-size: .86em;
  background: var(--panel-hover);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05em .35em;
}

.legal__addr {
  font-style: normal;
  display: block;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--bg-soft);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.7;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 2.6rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .6rem .9rem;
}
.legal__back:hover { color: var(--accent); border-color: var(--accent); }

/* =============================================================
   KEYFRAMES
   ============================================================= */
@keyframes shine  { 0%, 55% { left: -60%; } 100% { left: 130%; } }
/* Mac (html.awk-mac, 11.10.2026): Glanz per transform statt left (left liess Safari in jedem Bild
   das Layout neu rechnen; Strecke 190 % der Knopfbreite = 190/45 = 422,22 % der eigenen Breite) -
   optisch identisch. Andere Geraete unveraendert. */
@keyframes shine-mac { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(422.222%) skewX(-18deg); } }
html.awk-mac .btn__shine { animation-name: shine-mac; }
@keyframes marquee { to { transform: translateX(calc(-100% / 3)); } }
@keyframes rise    { to { opacity: 1; transform: translateY(0); } }
@keyframes wordUp  { to { opacity: 1; transform: translateY(0); } }
@keyframes wordOut { to { opacity: 0; transform: translateY(-110%); } }
@keyframes leadOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
/* Navigation ins Menü einklappen (Logo + 7 Links + 4 Icons + CTA brauchen viel Platz).
   Durch das größere Logo und den Link "Über uns" ab 1440px, sonst stößt "Start" ans Logo. */
@media (max-width: 1440px), (hover: none) and (pointer: coarse) {   /* Touch: immer Klappmenue, auch Handy quer (Seite 2200 breit) */
  .nav__links { display: none; }
  .theme-toggle { margin-left: auto; }
  .burger { display: flex; }
  /* "Termin anfragen" bleibt sichtbar; dafuer entfaellt das Telefon-Symbol
     (die Nummer steht darunter) */
  .nav__tel { display: none; }

  /* Klappmenue als kompaktes Panel rechts unter dem Menue-Symbol (nur so
     breit wie die Menuepunkte) statt ueber die ganze Seitenbreite; faehrt
     beim Oeffnen leicht von oben herunter und blendet ein. */
  .nav__links.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    right: clamp(1.1rem, 4vw, 3rem);
    left: auto;
    flex-direction: column;
    gap: 0;
    margin: 0;
    min-width: 230px;
    padding: .3rem 1.3rem .6rem;
    background: var(--bg);
    background: var(--glass-nav);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    transform-origin: top right;
    animation: nav-panel-in .32s cubic-bezier(.22, 1, .36, 1) both;
  }
  @keyframes nav-panel-in {
    from { opacity: 0; transform: translateY(-12px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .nav__links.is-open li { border-top: 1px solid var(--line); }
  .nav__links.is-open li:first-child { border-top: 0; }
  .nav__links.is-open a {
    display: block;
    padding: .95rem .2rem;
    color: var(--ink);
    text-align: right;   /* Menuepunkte rechts, unter dem Menue-Symbol */
  }
  .nav__links.is-open a::after { display: none; }
}

@media (max-width: 820px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .contact__facts div { flex-direction: column; gap: .2rem; }
  .contact__facts dd { text-align: left; }
}
/* Preistabellen: unter ~760px sind drei Spalten zu eng (lange Namen wie
   "Betriebssystem-Neuinstallation" ragten in die Beschreibung) -> Name und
   Preis oben, Beschreibung darunter. Gilt auch fuer die Tabellen nach einer
   Zwischenueberschrift (Vor Ort, Anfahrt), deren eigene 3-Spalten-Regel
   spezifischer ist. */
@media (max-width: 760px) {
  .prow,
  .pricelist__subhead + .pricelist .prow {
    grid-template-columns: 1fr auto;
    row-gap: .3rem;
  }
  .prow__desc { grid-column: 1 / -1; order: 3; }
  /* Kopfzeile bleibt sichtbar: "Leistung" links, MwSt.-Hinweis rechts
     (darf umbrechen); "Details" entfaellt, weil die Beschreibung hier
     unter dem Namen steht */
  .prow--head { letter-spacing: .1em; }
  .prow--head > span:nth-child(2) { display: none; }
  .prow--head .prow__amt { max-width: 15rem; text-align: right; }
}

/* Header eng packen: Logo + 4 Icon-Buttons + Menü müssen passen */
/* unter ~760px wuerde "Termin anfragen" das Logo quetschen: dann tritt an
   seine Stelle das Kontaktformular-Symbol (Telefon bleibt ausgeblendet) */
/* Header-Knopf "Rund um die Uhr anfragen" (oeffnet den Chat-Berater): in schmalen PC-Fenstern
   wuerde der lange Text Logo und Symbole zusammenschieben - dort die Kurzform "Jetzt anfragen" */
.nav > .btn--cta .cta__kurz { display: none; }
@media (max-width: 900px) {
  .nav > .btn--cta .cta__lang { display: none; }
  .nav > .btn--cta .cta__kurz { display: inline; }
}
@media (max-width: 760px) {
  .nav > .btn--cta { display: none; }
  .nav__form { display: inline-grid; }
}
@media (max-width: 560px) {
  .nav { gap: .5rem; }
  .theme-toggle, .nav__mail, .nav__tel, .nav__wa, .nav__form { width: 36px; height: 36px; }
  .nav__mail svg, .nav__tel svg, .nav__wa svg, .nav__form svg { width: 16px; height: 16px; }
  .burger { width: 38px; height: 38px; }
  .nav__phone { --btn-half: 18px; font-size: .92rem; }
}
@media (max-width: 400px) {
  .eyebrow__kicker { letter-spacing: .12em; font-size: .7rem; }
  .eyebrow__place { font-size: 1.45rem; }
  .hero__actions { gap: .7rem; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .wrap, .foot__inner { padding-inline: 1.05rem; }
  /* noch enger für ~320 px */
  .nav { gap: .3rem; padding-inline: .8rem; }
  .theme-toggle, .nav__mail, .nav__tel, .nav__wa, .nav__form { width: 32px; height: 32px; }
  .nav__mail svg, .nav__tel svg, .nav__wa svg, .nav__form svg { width: 15px; height: 15px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .burger { width: 34px; height: 34px; }
  .nav__phone { --btn-half: 16px; right: .8rem; font-size: .84rem; }
}

/* =============================================================
   REDUCED MOTION — alles Nicht-Essentielle ruhigstellen
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__title .word { transform: none; opacity: 1; }
  .eyebrow, .hero__lead, .hero__price, .hero__actions { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
  .btn__shine { display: none; }
}

/* =============================================================
   TOUCH-GERAETE (Handy/Tablet): Die Seite wird ueber das viewport-Meta
   (width=1130) wie am PC gerechnet und herunterskaliert. Der Bildschirm
   ist im Hochformat dadurch in CSS-Pixeln extrem hoch (z. B. ca. 2950px
   bei 412x915) - ein 100svh-Hero waere ein riesiger, fast leerer Block.
   Deshalb feste, PC-aehnliche Hero-Hoehe (1130 x 830 ~ 4:3).
   ============================================================= */
@media (hover: none) and (pointer: coarse) {
  .hero {
    min-height: 980px;   /* hoechste Titel-Variante (3 Zeilen + Text) passt rein -> Hoehe springt beim Textwechsel nicht */
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 0;   /* Laufband schliesst direkt unten ab */
  }

  /* "Leistungen" naeher ans Laufband: Abstand oben 104px -> 40px;
     "Richtpreise" naeher an "Leistungen": Abstand unten/oben 104px -> 40px */
  #leistungen {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  #preise {
    padding-top: 2.5rem;
  }
}

/* Touch-Geraete: "Leistungen" und "Richtpreise" breiter (Rahmen 1080px ->
   volle 1130px-Layoutbreite, kleiner Seitenrand) und alle Texte darin
   groesser, damit sie nach der Herunterskalierung lesbar bleiben. */
@media (hover: none) and (pointer: coarse) {
  #leistungen.wrap,
  #preise.wrap {
    max-width: none;
    padding-inline: 1rem;
  }

  #leistungen .section__head {
    max-width: 80ch;
  }

  #preise .section__head {
    max-width: none;   /* Satz unter "Preise" bleibt einzeilig */
  }

  #leistungen h2,
  #preise h2 { font-size: 3rem; }

  #leistungen .section__lead,
  #preise .section__lead { font-size: 1.5rem; max-width: 70ch; }   /* wie "Ueber uns"/"Kontakt" */

  #preise .kicker { font-size: .95rem; }

  /* Leistungs-Karten */
  .svc { padding: 1.9rem 1.6rem 2.1rem; }
  .svc h3 { font-size: 1.5rem; }
  .svc p { font-size: 1.25rem; }

  /* Preisliste - deutlich groesser fuer die Handy-Skalierung */
  .prow { padding: 1.5rem 1.6rem; gap: 1.6rem; }

  /* Feste Breite fuer die Preis-Spalte: jede Zeile ist ein eigenes Grid,
     mit "auto" richtet sich die 3. Spalte nach dem jeweiligen Inhalt
     ("30 €" vs. "n. V." bzw. "60 / 80 € / Std." vs. "+50 % / Std.") und
     die Details-Spalte verschiebt sich von Zeile zu Zeile. */
  .prow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 15rem; }
  .pricelist__subhead + .pricelist .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 15rem; }
  /* Kopfzeilen ("ab (inkl. 19 % MwSt.)", "Privat / Gewerbe je Std.") einzeilig */
  /* umbrechen statt einzeilig: einzeilig lag der Text ueber "Details" */
  .prow--head .prow__amt { width: auto; white-space: normal; line-height: 1.4; letter-spacing: .04em; }
  .prow__name { font-size: 1.85rem; }
  .prow__desc { font-size: 1.7rem; line-height: 1.45; }
  .prow__amt { font-size: 2.1rem; }
  .prow--head, .prow--head .prow__amt { font-size: 1.45rem; }
  .prow__unit { font-size: 1.25rem; }
  .pricelist__subhead { font-size: 1.7rem; margin-top: 2.4rem; }
  .pricelist__note { font-size: 1.45rem; line-height: 1.5; }
}

/* Touch-Geraete: Hero-Buttons "Termin anfragen" / "Preise ansehen" groesser */
@media (hover: none) and (pointer: coarse) {
  .hero__price { font-size: 1.4rem; margin-bottom: 1.4rem; }
  .hero__actions { gap: 1.4rem; }
  .hero__actions .btn {
    padding: 1.3rem 2.3rem;
    font-size: 1.4rem;
  }
}

/* Touch-Geraete: Header-Buttons (Theme, E-Mail, Telefon, WhatsApp, Menue)
   deutlich groesser - 40px waeren nach der Herunterskalierung auf dem
   Handy nur ca. 15px und kaum antippbar. */
@media (hover: none) and (pointer: coarse) {
  .theme-toggle, .nav__mail, .nav__tel, .nav__wa, .burger {
    width: 70px;
    height: 70px;
    border-radius: 999px;   /* rund, passend zum Pillen-Button "Termin anfragen" */
  }
  .theme-toggle svg, .nav__mail svg, .nav__tel svg { width: 32px; height: 32px; }
  .nav__wa svg { width: 34px; height: 34px; }
  .burger { gap: 7px; }
  .burger span { width: 30px; height: 3px; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  .nav { gap: 1rem; }
}

/* Touch-Geraete: Menuepunkte im Klappmenue groesser */
@media (hover: none) and (pointer: coarse) {
  .nav__links.is-open { min-width: 340px; padding: .4rem 1.6rem .8rem; }
  .nav__links.is-open a { font-size: 1.5rem; padding: 1.2rem .3rem; }
}

/* Touch-Geraete: Hero-Ueberschrift noch groesser (105 -> 128px) */
@media (hover: none) and (pointer: coarse) {
  .hero__title { font-size: 8rem; }
  .eyebrow__kicker { font-size: .95rem; }
  .eyebrow__place { font-size: 2.15rem; }
}

/* Touch-Geraete: "Ablauf" wie "Leistungen" - volle Breite, gleiche
   Kartengroesse und Schriftgroessen. */
@media (hover: none) and (pointer: coarse) {
  #ablauf.wrap { max-width: none; padding-inline: 1rem; }
  #preise { padding-bottom: 2.5rem; }
  #ablauf { padding-top: 2.5rem; }
  #ablauf h2 { font-size: 3rem; }
  .steps li { padding: 1.9rem 1.6rem 2.1rem; }
  .steps__n { width: 2.8rem; height: 2.8rem; border-radius: 10px; font-size: 1.4rem; }
  .steps h3 { font-size: 1.6rem; margin: 1rem 0 .6rem; }
  .steps p { font-size: 1.45rem; line-height: 1.5; }
}

/* Touch-Geraete: "Ueber uns"-Text groesser, volle Breite */
@media (hover: none) and (pointer: coarse) {
  #ueber.wrap { max-width: none; padding-inline: 1rem; }
  #ueber h1,
  #kontakt h2 { font-size: 3rem; }
  #ueber .section__lead,
  #kontakt .section__lead { font-size: 1.5rem; }
  .prose { max-width: none; font-size: 1.5rem; line-height: 1.7; }
}

/* Touch-Geraete: Logo oben links groesser (103 -> 150px), Header passend hoeher */
@media (hover: none) and (pointer: coarse) {
  :root { --header-h: 166px; --header-h-sm: 130px; }
  .brand__logo { height: 150px; max-width: min(560px, 40vw); }   /* 40vw: in der Desktop-Ansicht des Handys (~980px) nicht mit den Buttons kollidieren */
  .site-header.is-scrolled .brand__logo { height: 114px; }
}

/* Touch-Geraete: Footer-Logo groesser (78 -> 120px) */
@media (hover: none) and (pointer: coarse) {
  .foot__logo { width: min(400px, 100%); height: auto; margin-top: -34px; }
}

/* Touch-Geraete: unter der Copyright-Zeile Luft lassen, sonst verdeckt die
   Browser-/Gestenleiste des Handys die letzte Zeile der Seite. */
@media (hover: none) and (pointer: coarse) {
  .foot__bottom { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* Touch-Geraete: Footer-Texte mobilfreundlich (Groessen wie in den
   uebrigen Abschnitten: Text ca. 20-24px, Links mit hoeherer Tap-Flaeche) */
@media (hover: none) and (pointer: coarse) {
  .foot__desc { font-size: 1.35rem; line-height: 1.6; max-width: 34ch; }
  .foot__col h4 { font-size: 1.1rem; margin-bottom: 22px; }
  .foot__col a { font-size: 1.35rem; padding: 10px 0; color: var(--ink); }
  .foot__bottom { font-size: 1.2rem; }
}

/* Touch-Geraete: Kontaktbereich mobilfreundlich - volle Breite, Kontaktdaten,
   Formular-Beschriftungen, Eingabefelder und Button groesser */
@media (hover: none) and (pointer: coarse) {
  #kontakt.wrap { max-width: none; padding-inline: 1rem; }
  .contact { gap: 2rem; }
  /* Bezeichnung ueber dem Wert statt daneben -> Werte wie "Mo-Fr 9:00-13:00 Uhr
     (Buerozeiten)" und "Weiteres nach Vereinbarung" bleiben einzeilig */
  .contact__facts div { flex-direction: column; padding: 1.1rem 1.4rem; gap: .35rem; }
  .contact__facts dt { font-size: 1.05rem; }
  .contact__facts dd { font-size: 1.35rem; line-height: 1.45; text-align: left; }
  .wa-link svg, .tel-link svg { width: 24px; height: 24px; }
  .enquiry { gap: 1.4rem; }
  .enquiry .field { gap: .6rem; }
  .enquiry label { font-size: 1.05rem; }
  .enquiry input, .enquiry textarea { font-size: 1.35rem; padding: 1rem 1.1rem; border-radius: 12px; }
  .enquiry textarea { min-height: 7rem; }
  .enquiry .btn { font-size: 1.4rem; padding: 1.3rem 2.3rem; }
  .enquiry__note { font-size: 1.1rem; }
}

/* Touch-Geraete: "Termin anfragen" auch im Header - als orangener Button
   neben dem Menue-Symbol. Damit er Platz hat, entfallen dort die
   E-Mail- und Telefon-Icons (beide Wege stehen im Kontaktbereich, zu dem
   der Button fuehrt); WhatsApp bleibt. */
@media (hover: none) and (pointer: coarse) {
  .nav__mail, .nav__tel, .nav__form { display: none; }
  .nav > .btn--cta {
    display: inline-flex;
    height: 70px;
    padding: 0 1.5rem;
    font-size: 1.2rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    white-space: nowrap;
  }
  .nav > .btn--cta svg { width: 22px; height: 22px; }
}

/* Touch-Geraete: Buttons sind 70px hoch und die Seite wird verkleinert -
   Nummer entsprechend tiefer und groesser */
@media (hover: none) and (pointer: coarse) {
  .nav__phone { --btn-half: 35px; font-size: 1.75rem; gap: .55rem; }
  .nav__phone svg { width: 25px; height: 25px; }
  /* kompakter Header (gescrollt / Rechtsseiten): nur ca. 30px Luft unter den
     Buttons - dort etwas kleiner, damit die Nummer im Header bleibt */
  .site-header.is-scrolled .nav__phone,
  .site-header--page .nav__phone { font-size: 1.45rem; }
  .site-header.is-scrolled .nav__phone svg,
  .site-header--page .nav__phone svg { width: 21px; height: 21px; }
}

/* Antippen: das eckige Standard-Tipp-Highlight des Handy-Browsers
   abschalten und stattdessen eine kurze Rueckmeldung in der Form des
   Elements (rund/oval) zeigen. */
a, button, .svc, .prow {
  -webkit-tap-highlight-color: transparent;
}
@media (hover: none) and (pointer: coarse) {
  .theme-toggle:active, .nav__mail:active, .nav__tel:active, .nav__wa:active, .burger:active {
    background: color-mix(in oklab, var(--accent) 22%, transparent);
    border-color: var(--accent);
    transform: scale(.94);
  }
  .btn:active { transform: scale(.96); filter: brightness(.92); }
  .svc:active, a.prow:active { background: var(--panel-hover); }
  .nav__links a:active, .foot__col a:active { color: var(--accent); }
}

/* =============================================================
   HERO MIT HINTERGRUNDBILD (.hero--video - Klassenname von frueher, Startvideo seit 15.10.2026 ausgebaut)
   Standbild liegt ganz unten, darueber eine dunkle Abtoenung
   (links staerker, wo der Text steht). Text im Hero wird hell, damit er
   auf dem dunklen Video in beiden Themes lesbar bleibt.
   ============================================================= */
.hero--video .hero__bg {
  background: #0b0d12 url("images/startbereich/dunkel/startbereich-dunkel-standbild.jpg") center / cover no-repeat;   /* Standbild als Fallback */
}
.hero__shade {
  position: absolute;
  inset: 0;
  /* Abtoenung in der Theme-Farbe: dunkel im dunklen Theme (weisser Text),
     hell im hellen Theme (schwarzer Text) - links staerker, wo der Text steht */
  background:
    linear-gradient(90deg, rgba(var(--video-shade), .82) 0%, rgba(var(--video-shade), .6) 45%, rgba(var(--video-shade), .3) 100%),
    linear-gradient(180deg, rgba(var(--video-shade), .45) 0%, rgba(var(--video-shade), 0) 35%, rgba(var(--video-shade), .6) 100%);
}
/* farbige Effekt-Ebenen ueber dem Video zuruecknehmen */
.hero--video .hero__aurora { opacity: .18; }
.hero--video .hero__orb { opacity: .25; }
.hero--video .hero__grid { display: none; } /* Punktraster aus (Nutzer 19.10.2026) */

/* Texte im Video-Hero in voller Schriftfarbe: weiss im dunklen, schwarz im hellen Theme */
.hero--video .hero__title,
.hero--video .hero__lead,
.hero--video .hero__lead strong,
.hero--video .hero__price-label,
.hero--video .ticker__track { color: var(--ink); }
.hero--video .eyebrow__place { color: var(--ink); }
.hero--video .btn--ghost {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--ink) 45%, transparent);
  background: rgba(var(--video-shade), .55);
}
.hero--video .btn--ghost:hover { background: rgba(var(--video-shade), .8); border-color: var(--ink); }
.hero--video .ticker { border-color: color-mix(in oklab, var(--ink) 18%, transparent); }

/* Header ueber dem Video: immer mit Glas-Hintergrund, sonst waeren die
   dunklen Icons/Menuepunkte im hellen Theme auf dem dunklen Video unsichtbar */
.site-header--video {
  background: var(--bg);
  background: var(--glass-header);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
          backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: var(--line);
}

/* =============================================================
   RECHTSSEITEN: AGB / Widerruf / Widerrufsformular
   ============================================================= */
.legal__muster {
  margin: 1rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}
.legal__muster p { margin: .45rem 0; }
.legal__stand { margin-top: 2rem; font-size: .85rem; }
.legal .enquiry { margin-top: 1rem; max-width: 560px; }
.page__actions--left { justify-content: flex-start; margin-top: 1.4rem; }
.legal .btn--ghost { cursor: pointer; font-family: var(--f-body); }

/* Footer: "Vertrag widerrufen" als Button in der Spalte "Rechtliches" -
   sitzt in der 5. Zeile, auf Hoehe von "Kontakt" in der Spalte "Service"
   (dort 5 Links; hier 4 Links + Button, gleicher Zeilenabstand). */
.foot__widerruf {
  margin-top: 6px;
  /* Text buendig unter den anderen Links ("V" unter dem "W" von Widerrufsrecht), nur der
     Rahmen ragt links heraus - wie AWK-GAMING (11.10.2026): Innenabstand + Rahmen zurueck */
  margin-left: -15px;
  padding: 6px 14px !important;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent) !important;
  font-weight: 600;
}
.foot__widerruf:hover { background: var(--accent); color: var(--on-accent) !important; transform: none !important; }
@media (hover: none) and (pointer: coarse) {
  .foot__widerruf { padding: 10px 20px !important; margin-left: -21px; }
}

/* =============================================================
   STARTSEITE: Hintergrundbild ab "Leistungen" bis einschliesslich Footer
   (dunkel/hell je Theme, siehe --tech-bg). Bild steht fest, der Inhalt
   scrollt darueber: feste Ebene (::before) per clip-path auf den Bereich
   zugeschnitten - funktioniert anders als background-attachment:fixed
   auch auf Handys. --tech-tint toent leicht ab, damit Texte lesbar bleiben.
   ============================================================= */
.home,
.foot--bg {
  position: relative;
  isolation: isolate;
  clip-path: inset(0);
}
.foot--bg { background: transparent; }
.home::before,
.foot--bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--tech-tint), var(--tech-tint)),
    var(--bg) var(--tech-bg) center / cover no-repeat;
}

/* Handy/Tablet: Hochformat-Version (Bild abwechselnd gespiegelt
   uebereinander) statt nur der leeren Bildmitte; feste Hoehe = groesster
   Viewport, damit die ein-/ausfahrende Adressleiste das Bild nicht
   neu skaliert (wie bei AWK-GAMING). */
@media (hover: none) and (pointer: coarse) {
  .home::before,
  .foot--bg::before {
    top: 0;
    bottom: auto;
    height: 100vh;
    height: 100lvh;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .home::before,
  .foot--bg::before {
    background:
      linear-gradient(var(--tech-tint), var(--tech-tint)),
      var(--bg) var(--tech-bg-hoch) center / cover no-repeat;
  }
}

/* =============================================================
   STARTSEITE: Leistungen als einzelne, schwebende Glas-Karten ueber dem
   Hintergrundbild. Je Karte: Symbol-Kachel (Verlauf orange -> gruen),
   Titel, Text, Hinweis "Jetzt anfragen". Leicht durchsichtig mit
   Weichzeichner, Lichtkante oben, Verlaufsrahmen (::after, per Maske nur
   1px Rand), farbiger Schein oben links (::before).
   Hover: Karte hebt sich, Rahmen + Schein leuchten auf, Symbol kippt,
   Hinweis faehrt ein.
   ============================================================= */
.home .cards {
  gap: 22px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.home .svc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
  padding: 1.7rem 1.55rem 1.5rem;
  background: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card) 55%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
}
/* farbiger Schein oben links */
.home .svc::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -30%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 32%, transparent), transparent);
  opacity: .35;
  transition: opacity .45s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
/* Verlaufsrahmen (nur 1px Rand sichtbar) */
.home .svc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 38%, transparent 62%, var(--accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .45;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.home .svc:hover,
.home .svc:focus-visible {
  transform: translateY(-6px);
  background: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card-hover) 60%);
  box-shadow:
    0 30px 70px -28px color-mix(in oklab, var(--accent) 55%, transparent),
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-inner);
}
.home .svc:hover::before,
.home .svc:focus-visible::before { opacity: .9; transform: translate(8%, 8%); }
.home .svc:hover::after,
.home .svc:focus-visible::after { opacity: 1; }
.home .svc:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Symbol-Kachel */
.svc__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 15px;
  color: var(--accent);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 20%, transparent),
      color-mix(in oklab, var(--accent-2) 20%, transparent));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform .45s var(--ease), color .45s var(--ease);
}
.svc__icon svg { width: 26px; height: 26px; }
.home .svc:hover .svc__icon { transform: rotate(-6deg) scale(1.08); color: var(--accent-2); }

/* Hinweis "Jetzt anfragen" */
.svc__more {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.svc__arrow { transition: transform .35s var(--ease); }
.home .svc:hover .svc__more,
.home .svc:focus-visible .svc__more { opacity: 1; transform: none; }
.home .svc:hover .svc__arrow { transform: translateX(4px); }

/* Touch-Geraete (Layout 1130px, herunterskaliert): groessere Symbole,
   Hinweis immer sichtbar (kein Hover), Antippen hebt leicht an */
@media (hover: none) and (pointer: coarse) {
  .home .cards { gap: 18px; }
  .svc__icon { width: 68px; height: 68px; border-radius: 18px; }
  .svc__icon svg { width: 34px; height: 34px; }
  .svc__more { opacity: 1; transform: none; font-size: 1rem; }
  .home .svc:active { transform: translateY(-3px); background: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card-hover) 60%); }
}
@media (prefers-reduced-motion: reduce) {
  .home .svc, .home .svc::before, .svc__icon, .svc__more, .svc__arrow { transition: none; }
  .home .svc:hover { transform: none; }
}

/* Leistungs-Karten: Titel zentriert */
.home .svc h3 { text-align: center; }

/* =============================================================
   STARTSEITE: Preisliste im Stil der Leistungs-Karten - jede Tabelle
   als durchsichtige Glas-Tafel (Verlaufsrahmen, Lichtkante, Schatten),
   getoentes Kopfband mit Verlaufslinie, zarte Trennlinien. Hover: Zeile
   hellt auf, Akzentleiste links faehrt ein, Preis leuchtet.
   Hinweise darunter als Glas-Infokasten mit Punkten.
   ============================================================= */
.home .pricelist {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card) 40%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
/* Verlaufsrahmen wie bei den Karten */
.home .pricelist::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), transparent 30%, transparent 70%, var(--accent-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .5;
  pointer-events: none;
}
.home .prow {
  position: relative;
  background: transparent;
  border-top: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  transition: background .3s var(--ease);
}
.home .prow:first-child { border-top: 0; }
/* Kopfband */
.home .prow--head {
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--accent) 14%, transparent),
      color-mix(in oklab, var(--accent-2) 10%, transparent));
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--accent), var(--accent-2)) 1;
}
.home .prow--head + .prow { border-top: 0; }
/* Akzentleiste links (Hover) */
.home a.prow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.home .prow:not(.prow--head):hover,
.home a.prow:focus-visible {
  background: color-mix(in oklab, var(--accent) 7%, var(--glass-card-hover));
}
.home a.prow:hover::before,
.home a.prow:focus-visible::before { transform: scaleY(1); }
.home .prow__amt { transition: text-shadow .3s var(--ease), transform .3s var(--ease); }
.home a.prow:hover .prow__amt {
  text-shadow: 0 0 18px color-mix(in oklab, var(--accent) 55%, transparent);
  transform: translateX(-4px);
}
/* Zwischenueberschriften mit Verlaufsbalken */
.home .pricelist__subhead {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 2.6rem 0 1rem;
}
/* Hinweise als Glas-Infokasten */
.home .pricelist__notes {
  margin-top: 2.2rem;
  padding: 1.3rem 1.6rem;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-card);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
.home .pricelist__notes .pricelist__note {
  position: relative;
  margin: 0;
}
.home .pricelist__notes .pricelist__note + .pricelist__note { margin-top: .55rem; }
@media (hover: none) and (pointer: coarse) {
  .home a.prow:active { background: color-mix(in oklab, var(--accent) 7%, var(--glass-card-hover)); }
  .home a.prow:active::before { transform: scaleY(1); }
  .home .pricelist__notes { padding: 1.8rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home .prow, .home a.prow::before, .home .prow__amt { transition: none; }
}

/* Leistungs-Karten: Symbol, Titel, Text und Hinweis liegen in allen Karten
   einer Reihe auf derselben Hoehe (subgrid: die Karten teilen sich die
   Zeilen des Kartenrasters). Text beginnt oben direkt unter dem Titel
   (statt unten am Kartenrand), mit etwas mehr Abstand. */
.home .cards { grid-auto-rows: auto; }
.home .svc {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
}
.home .svc h3 { margin-bottom: 0; align-self: start; }
.home .svc p { margin-top: 1.3rem; align-self: start; }
.home .svc .svc__more { align-self: end; }
/* Browser ohne subgrid: Titel bekommen Platz fuer 3 Zeilen */
@supports not (grid-template-rows: subgrid) {
  .home .svc { display: flex; }
  .home .svc h3 { min-height: 4.4em; }
  .home .svc .svc__more { margin-top: auto; padding-top: 1.1rem; }
}

/* Leistungs-Karten ohne Rahmen (weder heller Rand noch Verlaufsrahmen) */
.home .svc { border: 0; }
.home .svc::after { content: none; }

/* =============================================================
   STARTSEITE: "Ablauf" im Stil der Leistungs-Karten - einzelne,
   durchsichtige Glas-Karten ohne Rahmen, Nummer in einer Kachel wie die
   Leistungs-Symbole, Titel zentriert, Text startet in allen Karten auf
   gleicher Hoehe (subgrid). Zwischen den Karten ein runder Pfeil, der
   die Reihenfolge zeigt (einspaltig: nach unten).
   ============================================================= */
.home .steps {
  gap: 22px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  grid-auto-rows: auto;
}
.home .steps li {
  position: relative;
  border-radius: 20px;
  padding: 1.7rem 1.55rem 1.7rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in oklab, var(--accent) 16%, transparent), transparent 55%),
    linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card) 55%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.home .steps li:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 70px -28px color-mix(in oklab, var(--accent) 55%, transparent),
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-inner);
}
/* Nummer als Kachel wie die Leistungs-Symbole */
.home .steps__n {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: var(--accent);
  font-size: 1.45rem;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 20%, transparent),
      color-mix(in oklab, var(--accent-2) 20%, transparent));
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform .45s var(--ease), color .45s var(--ease);
}
.home .steps li:hover .steps__n { transform: rotate(-6deg) scale(1.08); color: var(--accent-2); }
.home .steps h3 { text-align: center; margin: 1.15rem 0 0; align-self: start; }
.home .steps p { margin-top: 1.3rem; align-self: start; }
/* Pfeil zwischen den Karten (mittig in der Luecke) */
.home .steps li:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -11px;
  width: 34px;
  height: 34px;
  margin-right: -17px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 22px -8px color-mix(in oklab, var(--accent) 70%, transparent);
}
@media (max-width: 820px) {
  .home .steps li:not(:last-child)::after {
    content: "\2193";
    top: auto;
    right: 50%;
    bottom: -11px;
    margin: 0 -17px -17px 0;
    transform: none;
  }
}
@supports not (grid-template-rows: subgrid) {
  .home .steps li { display: flex; }
}
@media (hover: none) and (pointer: coarse) {
  .home .steps { gap: 18px; }
  .home .steps__n { width: 68px; height: 68px; border-radius: 18px; font-size: 1.9rem; }
  .home .steps li:not(:last-child)::after { width: 44px; height: 44px; margin-right: -22px; right: -9px; font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home .steps li, .home .steps__n { transition: none; }
  .home .steps li:hover { transform: none; }
}
/* Pfeil liegt ueber der naechsten Karte (jede Glas-Karte ist eine eigene
   Ebene - fruehere Karten daher hoeher stapeln) und ist immer weiss */
.home .steps li:nth-child(1) { z-index: 3; }
.home .steps li:nth-child(2) { z-index: 2; }
.home .steps li:nth-child(3) { z-index: 1; }
.home .steps li:not(:last-child)::after { color: #fff; }

/* Ablauf-Karten deutlich durchsichtiger als die Leistungs-Karten:
   Flaeche ca. halb so deckend, kaum Weichzeichner */
.home .steps li {
  background:
    radial-gradient(circle at 0 0, color-mix(in oklab, var(--accent) 10%, transparent), transparent 55%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--glass-hi) 45%, transparent) 0%,
      color-mix(in oklab, var(--glass-card) 45%, transparent) 55%);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Ablauf: Symbole statt Ziffern in den Kacheln */
.steps__n svg { width: 26px; height: 26px; }
@media (hover: none) and (pointer: coarse) {
  .home .steps__n svg { width: 34px; height: 34px; }
}

/* Ablauf: keine Pfeile zwischen den Karten */
.home .steps li:not(:last-child)::after { content: none; }

/* Ablauf-Karten etwas hoeher: mehr Luft unten */
.home .steps li { padding-bottom: 3.2rem; }
@media (hover: none) and (pointer: coarse) {
  .home .steps li { padding-bottom: 3.8rem; }
}

/* Leistungen: Text noch etwas weiter unter dem Titel */
.home .svc p { margin-top: 2rem; }

/* Leistungen: Titelbereich in ALLEN Karten 3 Zeilen hoch (wie
   "Betriebssystem-Neuinstallation ...") - Text beginnt in beiden Reihen
   gleich weit unter dem Titel */
.home .svc h3 { min-height: calc(3lh); min-height: 3.84em; }
@supports (min-height: 1lh) {
  .home .svc h3 { min-height: 3lh; }
}

/* Ablauf wie Leistungen: Titelbereich 3 Zeilen hoch, Text 2rem darunter -
   Texte stehen gleich weit unter dem Titel wie bei den Leistungs-Karten */
.home .steps h3 { min-height: 3.84em; }
@supports (min-height: 1lh) {
  .home .steps h3 { min-height: 3lh; }
}
.home .steps p { margin-top: 2rem; }
/* gleiche Titelgroesse wie die Leistungs-Karten (sonst wenige px Versatz) */
.home .steps h3 { font-size: 1.14rem; }
@media (hover: none) and (pointer: coarse) {
  .home .steps h3 { font-size: 1.5rem; }
}

/* =============================================================
   STARTSEITE: "Kontakt" im Stil der Leistungs-/Ablauf-Karten.
   Kontaktdaten und Formular als zwei durchsichtige Glas-Karten ohne
   Rahmen (Schatten, Lichtkante, oranger Schein oben links). Zeilen der
   Kontaktdaten mit zarten Trennlinien und Akzentleiste beim Ueberfahren;
   Eingabefelder halbtransparent mit orangem Leuchten im Fokus.
   ============================================================= */
.home .contact { align-items: stretch; }
.home .contact__facts,
.home .enquiry {
  position: relative;
  border: 0;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, color-mix(in oklab, var(--accent) 14%, transparent), transparent 55%),
    linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card) 55%);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
/* Kontaktdaten */
.home .contact__facts { padding: .6rem 0; align-content: center; }
.home .contact__facts div {
  position: relative;
  background: transparent;
  border-top: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
  padding: 1rem 1.5rem;
  transition: background .3s var(--ease);
}
.home .contact__facts div:first-child { border-top: 0; }
.home .contact__facts div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.home .contact__facts div:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.home .contact__facts div:hover::before { transform: scaleY(1); }
.home .contact__facts dd a { border-bottom-color: color-mix(in oklab, var(--ink) 20%, transparent); }
/* Formular */
.home .enquiry { padding: 1.8rem 1.8rem 1.4rem; }
.home .enquiry input,
.home .enquiry textarea {
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  border-radius: 12px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.home .enquiry input:focus,
.home .enquiry textarea:focus {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}
@media (hover: none) and (pointer: coarse) {
  .home .contact__facts div { padding: 1.3rem 1.8rem; }
  .home .enquiry { padding: 2.2rem 2.2rem 1.8rem; }
  .home .enquiry input, .home .enquiry textarea { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .home .contact__facts div, .home .contact__facts div::before,
  .home .enquiry input, .home .enquiry textarea { transition: none; }
}
/* Kontaktdaten fuellen die Kartenhoehe gleichmaessig (keine leeren
   Flaechen oben/unten, wenn das Formular hoeher ist) */
.home .contact__facts { align-content: stretch; grid-auto-rows: 1fr; padding: .4rem 0; }
.home .contact__facts div { align-items: center; }
@media (max-width: 820px) {
  .home .contact__facts { grid-auto-rows: auto; }
  .home .contact__facts div { align-items: flex-start; }
}
@media (hover: none) and (pointer: coarse) {
  .home .contact__facts div { align-items: flex-start; justify-content: center; }
}

/* Ablauf-Karten noch durchsichtiger: Flaeche ca. 20 % statt 45 %,
   kein Weichzeichner, schwaecherer Schatten */
.home .steps li {
  background:
    radial-gradient(circle at 0 0, color-mix(in oklab, var(--accent) 7%, transparent), transparent 55%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--glass-hi) 20%, transparent) 0%,
      color-mix(in oklab, var(--glass-card) 20%, transparent) 55%);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .45), inset 0 1px 0 var(--glass-inner);
}

/* Ablauf-Karten mit derselben Durchsichtigkeit wie die Preis-Tafeln */
.home .steps li {
  background: linear-gradient(160deg, var(--glass-hi) 0%, var(--glass-card) 40%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-inner);
}

/* Hero: Preisangabe ("ab 30 €" usw., wechselt mit dem Text) in Neon-Orange
   - leuchtende Schrift mit orangem Glow, in beiden Themes */
.hero .hero__price-amt {
  color: #ff7a1a;
  text-shadow:
    0 0 4px rgba(255, 140, 40, .9),
    0 0 12px rgba(255, 110, 20, .75),
    0 0 26px rgba(255, 90, 0, .55),
    0 0 44px rgba(255, 80, 0, .35);
}
/* Hero-Preis: Neon-Orange ohne Glow (Glow machte die Schrift unscharf) */
.hero .hero__price-amt { text-shadow: none; }

/* Ablauf: Symbol-Kachel durchsichtiger (nur zarter Farbschleier, feiner Rand) */
.home .steps__n {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 7%, transparent),
      color-mix(in oklab, var(--accent-2) 7%, transparent));
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  box-shadow: none;
}

/* Hero-Preis: "bereits" klein in Schriftfarbe (weiss dunkel / schwarz hell) */
.hero .hero__price-amt .hero__price-pre {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  margin-right: .15em;
  vertical-align: .15em;
}

/* Leistungen: Symbol-Kachel ebenso durchsichtig wie beim Ablauf */
.svc__icon {
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 7%, transparent),
      color-mix(in oklab, var(--accent-2) 7%, transparent));
  border-color: color-mix(in oklab, var(--accent) 28%, transparent);
  box-shadow: none;
}
/* "bereits" in derselben Schrift + Groesse wie die Beschriftung davor
   (Preis ist 1.8em gross -> 1/1.8 = gleiche Groesse wie das Label) */
.hero .hero__price-amt .hero__price-pre {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: calc(1em / 1.8);
  letter-spacing: normal;
  vertical-align: baseline;
}
/* Abstaende wie normale Leerzeichen: Label -> "bereits" und "bereits" -> "ab"
   (vorher .7rem Flex-Abstand bzw. ein breites Leerzeichen der grossen
   Preisschrift) */
.hero .hero__price { column-gap: .3em; }
.hero .hero__price-amt .hero__price-pre { margin-right: 0; }
/* "ab" naeher an den Preis: statt des breiten Leerzeichens der grossen
   Preisschrift nur ein kleiner Abstand */
.hero .hero__price-ab { margin-right: .25em; }
/* "30 €" eng zusammen (statt breitem Leerzeichen der Preisschrift) */
.hero .hero__price-eur { margin-left: .12em; }
/* ca. 3 Leerzeichen Abstand: "bereits" -> Preis, und bei Preisen ohne
   "bereits" (Festpreis, Stundensatz) Beschriftung -> Preis */
.hero .hero__price-amt .hero__price-pre { margin-right: .55em; }
.hero .hero__price-amt:not(:has(.hero__price-pre)) { margin-left: .3em; }


/* Leistungs-Karten einen Hauch durchsichtiger (Flaeche ca. 80 %) */
.home .svc {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--glass-hi) 80%, transparent) 0%,
    color-mix(in oklab, var(--glass-card) 80%, transparent) 55%);
}
.home .svc:hover,
.home .svc:focus-visible {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--glass-hi) 80%, transparent) 0%,
    color-mix(in oklab, var(--glass-card-hover) 80%, transparent) 60%);
}

/* Preise, Ablauf, Kontakt ebenfalls einen Hauch durchsichtiger (ca. 80 %) */
.home .pricelist,
.home .steps li {
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--glass-hi) 80%, transparent) 0%,
    color-mix(in oklab, var(--glass-card) 80%, transparent) 40%);
}
.home .pricelist__notes {
  background: color-mix(in oklab, var(--glass-card) 80%, transparent);
}
.home .contact__facts,
.home .enquiry {
  background:
    radial-gradient(circle at 0 0, color-mix(in oklab, var(--accent) 11%, transparent), transparent 55%),
    linear-gradient(160deg,
      color-mix(in oklab, var(--glass-hi) 80%, transparent) 0%,
      color-mix(in oklab, var(--glass-card) 80%, transparent) 55%);
}

/* Preise: Tafeln und Hinweiskasten ohne Rahmen (wie die Leistungs-Karten) */
.home .pricelist,
.home .pricelist__notes { border: 0; }
.home .pricelist::after { content: none; }

/* =============================================================
   Hero: Anrufzeile unter den Buttons ("Oder direkt anrufen: ...")
   ============================================================= */
.hero__call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .7rem;
  margin-top: 1rem;
  font-size: .95rem;
  color: var(--ink);
  opacity: 0;
  transform: translateY(12px);
  animation: rise .8s .95s var(--ease) forwards;
}
.hero__call-num {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  transition: border-color .2s var(--ease);
}
.hero__call-num:hover { border-color: var(--accent); }
.hero__call-num svg { width: 17px; height: 17px; flex: none; }
.hero__call-time { color: var(--ink-dim); font-size: .85rem; }
.hero--video .hero__call-time { color: var(--ink); opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .hero__call { opacity: 1; transform: none; animation: none; }
}

/* =============================================================
   Feste Anrufleiste am unteren Rand - nur Handy/Tablet (Touch).
   Layout ist 1130px breit und wird herunterskaliert -> grosse Masse.
   ============================================================= */
.callbar { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hero__call { font-size: 1.45rem; gap: .5rem 1rem; margin-top: 1.4rem; }
  .hero__call-num { font-size: 1.6rem; }
  .hero__call-num svg { width: 26px; height: 26px; }
  .hero__call-time { font-size: 1.3rem; }
  /* Handy: Zeiten rechts neben der Nummer uebereinander */
  .hero__call-time { display: inline-grid; grid-template-columns: auto auto auto; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .hero__call-tage { margin-right: .35em; }
  .hero__call-und { display: none; }
  /* Startzeiten rechtsbuendig: die 4 von 14 steht unter der 9 */
  .hero__call-von { grid-column: 2; justify-self: end; }

  .callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: var(--glass-header);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
            backdrop-filter: blur(12px) saturate(1.4);
    border-top: 1px solid var(--line);
  }
  .callbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 22px 16px;
    border-radius: 18px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.9rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .callbar__btn svg { width: 36px; height: 36px; flex: none; }
  .callbar__btn--tel { background: var(--accent); color: var(--on-accent); }
  .callbar__btn--wa { background: #25d366; color: #fff; }
  .callbar__btn:active { filter: brightness(.92); }
  /* Platz unten frei halten, damit die Leiste den Footer nicht verdeckt */
  body:has(.callbar) { padding-bottom: 120px; }
}

/* Hero-Anrufzeile: Nummer etwas groesser */
.hero__call-num { font-size: 1.3rem; }
.hero__call-num svg { width: 20px; height: 20px; }
@media (hover: none) and (pointer: coarse) {
  .hero__call-num { font-size: 2rem; }
  .hero__call-num svg { width: 30px; height: 30px; }
}

/* Helles Design: kein weisser Schleier ueber dem Hero-Video - stattdessen
   dieselbe dunkle Abtoenung wie im dunklen Design und helle Schrift im
   Hero (sonst waere dunkle Schrift auf dem Video nicht lesbar).
   Header und restliche Seite bleiben hell. */
:root[data-theme="light"] .hero--video {
  --video-shade: 10, 11, 14;
  --ink: #f2f2ee;
  --ink-dim: #c9ccd2;
  --line: rgba(255, 255, 255, .14);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video {
    --video-shade: 10, 11, 14;
    --ink: #f2f2ee;
    --ink-dim: #c9ccd2;
    --line: rgba(255, 255, 255, .14);
  }
}

/* Hero: blau-weissen Farbschein (Aurora + Lichtkugeln) ueber dem Video entfernen */
.hero--video .hero__aurora,
.hero--video .hero__orb { display: none; }

/* Hero: blauen Lichtstrahl im Video (unten links, im Filmmaterial
   enthalten) gezielt abdunkeln - zusaetzliche dunkle Abtoenung nur dort */
.hero--video .hero__shade {
  background:
    radial-gradient(ellipse 45% 55% at 26% 82%, rgba(var(--video-shade), .92) 0%, rgba(var(--video-shade), .75) 45%, rgba(var(--video-shade), 0) 100%),
    linear-gradient(90deg, rgba(var(--video-shade), .82) 0%, rgba(var(--video-shade), .6) 45%, rgba(var(--video-shade), .3) 100%),
    linear-gradient(180deg, rgba(var(--video-shade), .45) 0%, rgba(var(--video-shade), 0) 35%, rgba(var(--video-shade), .6) 100%);
}

/* Helles Design: solange der Header ueber dem dunklen Video-Hero liegt
   (.over-hero, setzt script.js), Links und Symbole weiss - ab
   "Leistungen" wieder dunkel. Aufgeklapptes Handy-Menue bleibt dunkel. */
:root[data-theme="light"] .site-header.over-hero .nav__links:not(.is-open) a { color: rgba(255, 255, 255, .82); }
:root[data-theme="light"] .site-header.over-hero .nav__links:not(.is-open) a:hover,
:root[data-theme="light"] .site-header.over-hero .nav__links:not(.is-open) a.is-active { color: #fff; }
:root[data-theme="light"] .site-header.over-hero .theme-toggle { color: #fff; }
:root[data-theme="light"] .site-header.over-hero .burger span { background: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.over-hero .nav__links:not(.is-open) a { color: rgba(255, 255, 255, .82); }
  :root:not([data-theme="dark"]) .site-header.over-hero .nav__links:not(.is-open) a:hover,
  :root:not([data-theme="dark"]) .site-header.over-hero .nav__links:not(.is-open) a.is-active { color: #fff; }
  :root:not([data-theme="dark"]) .site-header.over-hero .theme-toggle { color: #fff; }
  :root:not([data-theme="dark"]) .site-header.over-hero .burger span { background: #fff; }
}

/* Leistungs-Karten: leichter Verlauf von unten nach oben - hell: dunkler
   Schatten unten, dunkel: heller Schimmer unten. Als Ebene ueber der
   Glasflaeche (::after war frei, Rahmen wurde entfernt). */
.home .svc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0;
  -webkit-mask: none;
          mask: none;
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(0deg, var(--svc-fade, rgba(255, 255, 255, .10)) 0%, transparent 55%);
}
:root[data-theme="light"] .home .svc { --svc-fade: rgba(20, 30, 50, .12); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .home .svc { --svc-fade: rgba(20, 30, 50, .12); }
}

/* Hero-Preis in derselben Farbe wie "Termin anfragen" (Akzentfarbe je Theme) */
.hero .hero__price-amt { color: var(--accent); }

/* Footer: leichte Glasflaeche ueber dem Hintergrundbild, damit Texte und
   Links unten gut lesbar sind (Bild scheint weiterhin durch) */
.foot--bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bg) 55%, transparent) 0%,
    color-mix(in oklab, var(--bg) 78%, transparent) 100%);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* Helles Design: Header milchig weiss, leicht durchsichtig (Milchglas).
   Auf dem hellen Header muessen Links/Symbole dunkel sein - die weissen
   Links ueber dem Video (.over-hero) entfallen dadurch. */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .site-header.is-scrolled,
:root[data-theme="light"] .site-header--video,
:root[data-theme="light"] .site-header--page {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
          backdrop-filter: blur(16px) saturate(1.2);
}
:root[data-theme="light"] .site-header.over-hero .nav__links:not(.is-open) a { color: var(--ink-dim); }
:root[data-theme="light"] .site-header.over-hero .nav__links:not(.is-open) a:hover,
:root[data-theme="light"] .site-header.over-hero .nav__links:not(.is-open) a.is-active { color: var(--ink); }
:root[data-theme="light"] .site-header.over-hero .theme-toggle { color: var(--ink); }
:root[data-theme="light"] .site-header.over-hero .burger span { background: var(--ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header,
  :root:not([data-theme="dark"]) .site-header.is-scrolled,
  :root:not([data-theme="dark"]) .site-header--video,
  :root:not([data-theme="dark"]) .site-header--page {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
            backdrop-filter: blur(16px) saturate(1.2);
  }
  :root:not([data-theme="dark"]) .site-header.over-hero .nav__links:not(.is-open) a { color: var(--ink-dim); }
  :root:not([data-theme="dark"]) .site-header.over-hero .nav__links:not(.is-open) a:hover,
  :root:not([data-theme="dark"]) .site-header.over-hero .nav__links:not(.is-open) a.is-active { color: var(--ink); }
  :root:not([data-theme="dark"]) .site-header.over-hero .theme-toggle { color: var(--ink); }
  :root:not([data-theme="dark"]) .site-header.over-hero .burger span { background: var(--ink); }
}
/* ueber dem dunklen Video deckender, damit er milchig weiss statt grau wirkt */
:root[data-theme="light"] .site-header.over-hero { background: rgba(255, 255, 255, .86); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.over-hero { background: rgba(255, 255, 255, .86); }
}

/* Helles Design: Header weisser UND durchsichtiger - weniger weisse Flaeche,
   dafuer hellt der Weichzeichner den Hintergrund dahinter stark auf
   (brightness), Farben gedaempft -> milchig weisses Glas */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .site-header.is-scrolled,
:root[data-theme="light"] .site-header--video,
:root[data-theme="light"] .site-header--page,
:root[data-theme="light"] .site-header.over-hero {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(18px) brightness(1.9) saturate(.6);
          backdrop-filter: blur(18px) brightness(1.9) saturate(.6);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header,
  :root:not([data-theme="dark"]) .site-header.is-scrolled,
  :root:not([data-theme="dark"]) .site-header--video,
  :root:not([data-theme="dark"]) .site-header--page,
  :root:not([data-theme="dark"]) .site-header.over-hero {
    background: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(18px) brightness(1.9) saturate(.6);
            backdrop-filter: blur(18px) brightness(1.9) saturate(.6);
  }
}
/* ueber dem dunklen Video fast deckend weiss (durchsichtiges Weiss auf
   Schwarz ergibt sonst Grau); ab "Leistungen" bleibt er durchsichtig */
:root[data-theme="light"] .site-header.over-hero { background: rgba(255, 255, 255, .92); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.over-hero { background: rgba(255, 255, 255, .92); }
}
/* Kompromiss: wieder sichtbar durchsichtig - Hintergrund schimmert durch,
   nur leicht aufgehellt; ueber dem Video etwas deckender */
:root[data-theme="light"] .site-header,
:root[data-theme="light"] .site-header.is-scrolled,
:root[data-theme="light"] .site-header--video,
:root[data-theme="light"] .site-header--page {
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(10px) brightness(1.25) saturate(.8);
          backdrop-filter: blur(10px) brightness(1.25) saturate(.8);
}
:root[data-theme="light"] .site-header.over-hero { background: rgba(255, 255, 255, .72); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header,
  :root:not([data-theme="dark"]) .site-header.is-scrolled,
  :root:not([data-theme="dark"]) .site-header--video,
  :root:not([data-theme="dark"]) .site-header--page {
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(10px) brightness(1.25) saturate(.8);
            backdrop-filter: blur(10px) brightness(1.25) saturate(.8);
  }
  :root:not([data-theme="dark"]) .site-header.over-hero { background: rgba(255, 255, 255, .72); }
}

/* =============================================================
   Helles Design: eigenes, helles Hero-Video (CPU-Einbau, script.js tauscht
   die Quelle). Dazu wieder heller Schleier + dunkle Schrift im Hero
   (die dunkle Abtoenung war fuer das dunkle Code-Video). Standbild fuer
   Handys/Touch ebenfalls hell.
   ============================================================= */
:root[data-theme="light"] .hero--video {
  --video-shade: 245, 243, 238;
  --ink: #17181c;
  --ink-dim: #5b616b;
  --line: #e2ddd0;
}
:root[data-theme="light"] .hero--video .hero__bg {
  background: #f5f3ee url("images/startbereich/hell/startbereich-hell-standbild.jpg") center / cover no-repeat;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video {
    --video-shade: 245, 243, 238;
    --ink: #17181c;
    --ink-dim: #5b616b;
    --line: #e2ddd0;
  }
  :root:not([data-theme="dark"]) .hero--video .hero__bg {
    background: #f5f3ee url("images/startbereich/hell/startbereich-hell-standbild.jpg") center / cover no-repeat;
  }
}
/* der gezielte Abdunkler fuer den blauen Lichtstrahl gilt nur dem dunklen Video */
:root[data-theme="light"] .hero--video .hero__shade {
  background:
    linear-gradient(90deg, rgba(var(--video-shade), .82) 0%, rgba(var(--video-shade), .6) 45%, rgba(var(--video-shade), .3) 100%),
    linear-gradient(180deg, rgba(var(--video-shade), .45) 0%, rgba(var(--video-shade), 0) 35%, rgba(var(--video-shade), .6) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__shade {
    background:
      linear-gradient(90deg, rgba(var(--video-shade), .82) 0%, rgba(var(--video-shade), .6) 45%, rgba(var(--video-shade), .3) 100%),
      linear-gradient(180deg, rgba(var(--video-shade), .45) 0%, rgba(var(--video-shade), 0) 35%, rgba(var(--video-shade), .6) 100%);
  }
}

/* Helles Design: weissen Schleier ueber dem Video entfernt - nur links
   hinter dem Text ein leichter heller Verlauf (laeuft zur Mitte aus),
   damit die dunkle Schrift lesbar bleibt; rechts ist das Video klar. */
:root[data-theme="light"] .hero--video .hero__shade {
  background: linear-gradient(90deg,
    rgba(var(--video-shade), .78) 0%,
    rgba(var(--video-shade), .55) 32%,
    rgba(var(--video-shade), 0) 58%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__shade {
    background: linear-gradient(90deg,
      rgba(var(--video-shade), .78) 0%,
      rgba(var(--video-shade), .55) 32%,
      rgba(var(--video-shade), 0) 58%);
  }
}
:root[data-theme="light"] .hero--video .hero__grid,
:root[data-theme="light"] .hero--video .hero__scan { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__grid,
  :root:not([data-theme="dark"]) .hero--video .hero__scan { display: none; }
}
/* Handy/Tablet: Text nimmt fast die ganze Breite ein -> Verlauf reicht weiter */
@media (hover: none) and (pointer: coarse) {
  :root[data-theme="light"] .hero--video .hero__shade {
    background: linear-gradient(90deg,
      rgba(var(--video-shade), .8) 0%,
      rgba(var(--video-shade), .62) 55%,
      rgba(var(--video-shade), 0) 92%);
  }
}
@media (hover: none) and (pointer: coarse) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__shade {
    background: linear-gradient(90deg,
      rgba(var(--video-shade), .8) 0%,
      rgba(var(--video-shade), .62) 55%,
      rgba(var(--video-shade), 0) 92%);
  }
}

/* Helles Design: orange Buttons genauso farbenfroh wie im dunklen Design
   (gleiches Orange + dunkle Schrift). Textakzente (Preise, Labels) behalten
   das dunklere Orange, weil helles Orange auf hellem Grund schlecht lesbar ist. */
:root[data-theme="light"] .btn--primary,
:root[data-theme="light"] .btn--cta,
:root[data-theme="light"] .callbar__btn--tel {
  background: #ff6a3d;
  color: #170a06;
}
:root[data-theme="light"] .btn--primary:hover,
:root[data-theme="light"] .btn--cta:hover {
  background: color-mix(in oklab, #ff6a3d 88%, #fff);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn--primary,
  :root:not([data-theme="dark"]) .btn--cta,
  :root:not([data-theme="dark"]) .callbar__btn--tel {
    background: #ff6a3d;
    color: #170a06;
  }
  :root:not([data-theme="dark"]) .btn--primary:hover,
  :root:not([data-theme="dark"]) .btn--cta:hover {
    background: color-mix(in oklab, #ff6a3d 88%, #fff);
  }
}

/* Helles Design: Video scheint im Header nicht mehr so grell durch -
   staerker weichgezeichnet, entsaettigt, ohne Aufhellung, etwas deckender */
:root[data-theme="light"] .site-header.over-hero {
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(24px) saturate(.4);
          backdrop-filter: blur(24px) saturate(.4);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.over-hero {
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(24px) saturate(.4);
            backdrop-filter: blur(24px) saturate(.4);
  }
}

/* Leistungs-Karten ohne Link (STARTER-Seite): kein Hand-Cursor */
div.svc { cursor: default; }

/* Helles Design: Preise (Hero + Preisliste) und Telefonnummer im selben
   kraeftigen Orange wie "Termin anfragen" */
:root[data-theme="light"] .hero .hero__price-amt,
:root[data-theme="light"] .prow__amt,
:root[data-theme="light"] .hero__call-num {
  color: #ff6a3d;
}
:root[data-theme="light"] .hero__call-num { border-bottom-color: color-mix(in oklab, #ff6a3d 45%, transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero .hero__price-amt,
  :root:not([data-theme="dark"]) .prow__amt,
  :root:not([data-theme="dark"]) .hero__call-num {
    color: #ff6a3d;
  }
  :root:not([data-theme="dark"]) .hero__call-num { border-bottom-color: color-mix(in oklab, #ff6a3d 45%, transparent); }
}

/* Helles Design: Header wieder durchsichtiger (weniger Weiss), Video bleibt
   durch starken Weichzeichner + Entsaettigung ruhig statt grell */
:root[data-theme="light"] .site-header.over-hero { background: rgba(255, 255, 255, .62); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header.over-hero { background: rgba(255, 255, 255, .62); }
}

/* Helles Design ab "Leistungen" (nicht ueber dem Video): Header deutlich
   durchsichtiger - weniger Weiss, keine Aufhellung, leichter Weichzeichner */
:root[data-theme="light"] .site-header:not(.over-hero),
:root[data-theme="light"] .site-header--page {
  background: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
          backdrop-filter: blur(8px) saturate(1.1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header:not(.over-hero),
  :root:not([data-theme="dark"]) .site-header--page {
    background: rgba(255, 255, 255, .32);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
            backdrop-filter: blur(8px) saturate(1.1);
  }
}

/* Helles Design ab "Leistungen" und auf Unterseiten: keine weisse
   Aufhellung mehr im Header - nur noch Weichzeichner, Hintergrund bleibt
   in seiner eigenen Helligkeit */
:root[data-theme="light"] .site-header:not(.over-hero),
:root[data-theme="light"] .site-header--page {
  background: transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-header:not(.over-hero),
  :root:not([data-theme="dark"]) .site-header--page {
    background: transparent;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
}

/* Helles Design: Laufband-Schrift weiss auf dem Schwarzglas (siehe unten),
   Trenn-"+" in Akzent-Orange wie im dunklen Design */
:root[data-theme="light"] .hero--video .ticker__track { color: #fff; }
:root[data-theme="light"] .hero--video .ticker__sep { color: #ff6a3d; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .ticker__track { color: #fff; }
  :root:not([data-theme="dark"]) .hero--video .ticker__sep { color: #ff6a3d; }
}

/* Helles Design: Laufband auf Schwarzglas - dunkle, getoente Scheibe mit
   Blur ueber dem Video, feine helle Glaskante oben/unten und leichter Glanz,
   damit Orange/Weiss sauber auf Schwarz stehen */
:root[data-theme="light"] .hero--video .ticker {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 45%),
    rgba(6, 7, 9, .62);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border-block-color: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.45);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .ticker {
    background:
      linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 45%),
      rgba(6, 7, 9, .62);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
            backdrop-filter: blur(14px) saturate(140%);
    border-block-color: rgba(255,255,255,.14);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(0,0,0,.45);
  }
}

/* Helles Design: Hero-Text, Preis-Beschreibung, "bereits" und Anruf-Zeile kraeftiger - dunkle Schrift auf hellem Video wirkt
   bei gleicher Staerke duenner als weisse Schrift im dunklen Design.
   Segoe UI hat keine 500er-Stufe, daher direkt Semibold (600). */
:root[data-theme="light"] .hero--video .hero__lead,
:root[data-theme="light"] .hero--video .hero__price-label,
:root[data-theme="light"] .hero--video .hero__price-amt .hero__price-pre,
:root[data-theme="light"] .hero--video .hero__call { font-weight: 600; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__lead,
  :root:not([data-theme="dark"]) .hero--video .hero__price-label,
  :root:not([data-theme="dark"]) .hero--video .hero__price-amt .hero__price-pre,
  :root:not([data-theme="dark"]) .hero--video .hero__call { font-weight: 600; }
}
/* Helles Design: Zeiten neben der Nummer in voller Deckkraft - mit .75
   wirkten sie trotz Semibold noch duenn */
:root[data-theme="light"] .hero--video .hero__call-time { opacity: 1; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__call-time { opacity: 1; }
}
/* Helles Design: Telefonnummer im Hero auf Schwarzglas (wie das Laufband),
   damit das Orange auf dem hellen Video klar lesbar ist */
:root[data-theme="light"] .hero--video .hero__call-num {
  padding: .3em .75em;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%),
    rgba(6, 7, 9, .66);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 14px rgba(0,0,0,.18);
}
:root[data-theme="light"] .hero--video .hero__call-num:hover { border-color: #ff6a3d; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__call-num {
    padding: .3em .75em;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%),
      rgba(6, 7, 9, .66);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 14px rgba(0,0,0,.18);
  }
  :root:not([data-theme="dark"]) .hero--video .hero__call-num:hover { border-color: #ff6a3d; }
}
/* Helles Design: Untertitel unter "Leistungen"/"Preise" sowie Texte in Leistungs-Karten, Preislisten, Ablauf und Kontakt ebenfalls Semibold */
:root[data-theme="light"] #leistungen .section__lead,
:root[data-theme="light"] #preise .section__lead,
:root[data-theme="light"] .svc p,
:root[data-theme="light"] .prow--head,
:root[data-theme="light"] .prow__desc,
:root[data-theme="light"] .prow__unit,
:root[data-theme="light"] .pricelist__note,
:root[data-theme="light"] .steps p,
:root[data-theme="light"] #kontakt .section__lead,
:root[data-theme="light"] .contact__facts dt,
:root[data-theme="light"] .contact__facts dd,
:root[data-theme="light"] .enquiry label,
:root[data-theme="light"] .enquiry input,
:root[data-theme="light"] .enquiry textarea,
:root[data-theme="light"] .enquiry__note { font-weight: 600; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #leistungen .section__lead,
  :root:not([data-theme="dark"]) #preise .section__lead,
  :root:not([data-theme="dark"]) .svc p,
  :root:not([data-theme="dark"]) .prow--head,
  :root:not([data-theme="dark"]) .prow__desc,
  :root:not([data-theme="dark"]) .prow__unit,
  :root:not([data-theme="dark"]) .pricelist__note,
  :root:not([data-theme="dark"]) .steps p,
  :root:not([data-theme="dark"]) #kontakt .section__lead,
  :root:not([data-theme="dark"]) .contact__facts dt,
  :root:not([data-theme="dark"]) .contact__facts dd,
  :root:not([data-theme="dark"]) .enquiry label,
  :root:not([data-theme="dark"]) .enquiry input,
  :root:not([data-theme="dark"]) .enquiry textarea,
  :root:not([data-theme="dark"]) .enquiry__note { font-weight: 600; }
}
/* =============================================================
   HANDY QUER + "DESKTOP-WEBSITE" AUF DEM HANDY (10.10.2026, wie AWK-GAMING)
   Kopf-Skript in jeder HTML-Seite:
   - html.awk-handy-quer: Handy quer, Seite 2200 statt 1130 breit -> mehr Bildinhalt pro Bildschirm
   - html.awk-desktop-zoom: Handy im Modus "Desktop-Website" (~980px) -> ganze Seite per zoom auf
     1130 (hochkant) bzw. 2200 (quer, zusaetzlich html.awk-dz-quer) gebracht, --awk-dz = Faktor
   ============================================================= */

/* Kopfzeile und Hero-Text ganz nach aussen (Seite ist quer 2200 breit; vorher mittiger 1600er-Rahmen) */
html.awk-handy-quer .nav, html.awk-dz-quer .nav,
html.awk-handy-quer .hero__inner, html.awk-dz-quer .hero__inner { max-width: none; padding-inline: 48px; }

/* Querformat: Kopfzeile niedriger (166px waeren ~1/6 der Bildschirmhoehe) */
html.awk-handy-quer, html.awk-dz-quer { --header-h: 132px; --header-h-sm: 112px; }
html.awk-handy-quer .brand__logo, html.awk-dz-quer .brand__logo { height: 112px; max-width: 600px; }
html.awk-handy-quer .site-header.is-scrolled .brand__logo,
html.awk-dz-quer .site-header.is-scrolled .brand__logo { height: 92px; }

/* Querformat: Anruf-Leiste unten kompakter (nimmt sonst ein Fuenftel der Hoehe ein) */
html.awk-handy-quer .callbar, html.awk-dz-quer .callbar { padding: 10px 48px calc(10px + env(safe-area-inset-bottom)); gap: 24px; }
html.awk-handy-quer .callbar__btn, html.awk-dz-quer .callbar__btn { padding: 14px 16px; font-size: 1.55rem; border-radius: 16px; }
html.awk-handy-quer .callbar__btn svg, html.awk-dz-quer .callbar__btn svg { width: 30px; height: 30px; }
html.awk-handy-quer body:has(.callbar), html.awk-dz-quer body:has(.callbar) { padding-bottom: 92px; }

/* "Desktop-Website": vw/vh beziehen sich nicht auf die gezoomte Seite -> feste Werte */
html.awk-desktop-zoom .brand__logo { max-width: 452px; }   /* = 40vw der normalen 1130er-Handyansicht */
html.awk-desktop-zoom.awk-dz-quer .brand__logo { max-width: 600px; }
html.awk-desktop-zoom .home::before,
html.awk-desktop-zoom .foot--bg::before { bottom: auto; height: var(--awk-dz-hoehe, 100lvh); }
/* "Desktop-Website": vw-abhaengige Groessen auf den Wert der normalen Handyansicht festlegen
   (vw rechnet dort mit ~980px statt 1130/2200) */
html.awk-desktop-zoom .hero__lead { font-size: 16.95px; }             /* 1.5vw bei 1130 */
html.awk-desktop-zoom.awk-dz-quer .hero__lead { font-size: 1.15rem; } /* Obergrenze wie bei 2200 */
html.awk-desktop-zoom:not(.awk-dz-quer) .nav,
html.awk-desktop-zoom:not(.awk-dz-quer) .hero__inner { padding-inline: 45.2px; }   /* 4vw bei 1130 */

/* PC (Maus): Kopfzeile wie bei AWK-GAMING weiter nach aussen (10.10.2026) - Logo links, Knoepfe rechts
   naeher am Rand statt im mittigen 1600er-Rahmen. Hero-Text zieht mit, damit er buendig unter dem Logo bleibt. */
@media (hover: hover) and (min-width: 1441px) {
  .nav, .hero__inner { max-width: none; padding-inline: 48px; }
  .nav__links.is-open { right: 48px; }
}

/* Telefonnummer im Hero: Schwarzglas-Rahmen jetzt in BEIDEN Designs (Nutzer 10.10.2026) - vorher nur im hellen,
   die Zeile war dort 20px hoeher und Text/Knoepfe darueber verschoben sich beim Umschalten Hell/Dunkel */
.hero--video .hero__call-num {
  padding: .3em .75em;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 50%),
    rgba(6, 7, 9, .66);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 4px 14px rgba(0,0,0,.18);
}
.hero--video .hero__call-num:hover { border-color: var(--accent); }

/* Querformat (Handy/Tablet + Desktop-Website quer): Hero-Texte hoeher, damit "Termin anfragen" / "Preise ansehen"
   ueber der Anruf-Leiste beginnen (Nutzer 10.10.2026, Pixel 9). Ueberschrift bleibt gleich gross; Platz kommt aus
   dem breiteren Beschreibungstext (4 -> 2 Zeilen) und weniger Abstand unter der Kopfzeile. */
html.awk-handy-quer .hero, html.awk-dz-quer .hero { padding-top: calc(var(--header-h) + 8px); }
html.awk-handy-quer .hero__lead, html.awk-dz-quer .hero__lead { max-width: 900px; }

/* =============================================================
   Mobile BREITANSICHT (Handy/Tablet quer, auch "Desktop-Website" quer): Schriften in Leistungen, Preise,
   Ablauf, Kontakt und Footer ca. 30 % groesser (Nutzer 10.10.2026), Bereichs-Ueberschriften ca. 20 %.
   :is(...) = Spezifitaet einer Klasse -> zusammen mit den IDs schlaegt es die Touch-Regeln weiter oben.
   ============================================================= */
:is(html.awk-handy-quer, html.awk-dz-quer) :is(#leistungen, #preise, #ablauf, #kontakt) h2 { font-size: 58px; }
:is(html.awk-handy-quer, html.awk-dz-quer) :is(#leistungen, #preise, #ablauf, #kontakt) .section__lead { font-size: 31px; }
/* Leistungen */
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen .svc h3 { font-size: 31px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen .svc p { font-size: 26px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen :is(.svc__more, .svc__arrow) { font-size: 21px; }
/* Preise (Preisspalte breiter, damit "60 / 80 € / Std." in der groesseren Schrift passt) */
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 20rem; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .pricelist__subhead + .pricelist .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 20rem; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__name { font-size: 38.5px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__desc { font-size: 35.4px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__amt { font-size: 43.7px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__unit { font-size: 26px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise :is(.prow--head, .prow--head .prow__amt) { font-size: 30px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .pricelist__subhead { font-size: 35.4px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .pricelist__note { font-size: 30.2px; }
/* Ablauf */
:is(html.awk-handy-quer, html.awk-dz-quer) #ablauf .steps h3 { font-size: 31.2px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #ablauf .steps p { font-size: 30.2px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #ablauf .steps__n { width: 3.6rem; height: 3.6rem; font-size: 1.8rem; }
/* Kontakt */
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .contact__facts dt { font-size: 21.8px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt :is(.contact__facts dd, .contact__facts a, .contact__facts span) { font-size: 28px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt :is(.wa-link, .tel-link) svg { width: 31px; height: 31px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry label { font-size: 21.8px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry :is(input, textarea) { font-size: 28px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry .btn { font-size: 29px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry__note { font-size: 23px; }
/* Footer */
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__desc { font-size: 28px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__col h4 { font-size: 22.9px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__col a { font-size: 28px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot :is(.foot__bottom, .foot__bottom *) { font-size: 25px; }

/* Breitansicht: Anruf-Leiste wieder etwas groesser (Nutzer 10.10.2026) */
:is(html.awk-handy-quer, html.awk-dz-quer) .callbar__btn { padding: 18px 16px; font-size: 1.85rem; }
:is(html.awk-handy-quer, html.awk-dz-quer) .callbar__btn svg { width: 36px; height: 36px; }
:is(html.awk-handy-quer, html.awk-dz-quer) body:has(.callbar) { padding-bottom: 108px; }

/* Breitansicht: Kopfzeile groesser (Nutzer 10.10.2026) */
html.awk-handy-quer, html.awk-dz-quer { --header-h: 156px; --header-h-sm: 132px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .brand__logo { height: 132px; max-width: 700px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .site-header.is-scrolled .brand__logo { height: 108px; }
:is(html.awk-handy-quer, html.awk-dz-quer) :is(.theme-toggle, .nav__wa, .burger) { width: 84px; height: 84px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .theme-toggle svg { width: 38px; height: 38px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .nav__wa svg { width: 41px; height: 41px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .burger span { width: 36px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .nav > .btn--cta { height: 84px; padding: 0 1.9rem; font-size: 1.45rem; }
:is(html.awk-handy-quer, html.awk-dz-quer) .nav > .btn--cta svg { width: 26px; height: 26px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .nav__links.is-open a { font-size: 1.85rem; }
/* Breitansicht: Abstaende im Hero etwas enger, damit die Knoepfe trotz groesserer Kopfzeile/Anruf-Leiste
   darueber bleiben (Ueberschrift bleibt gleich gross) */
:is(html.awk-handy-quer, html.awk-dz-quer) .hero .hero__lead { margin-top: 12px; margin-bottom: 14px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .hero .hero__price { margin-bottom: 12px; }
/* Feinabstimmung Breitansicht: Kopfzeile 144 statt 156 hoch (Knoepfe/Logo unveraendert), Hero direkt darunter,
   Anruf-Leiste mit schmalerem Rand -> Knoepfe im Hero bleiben auch auf Pixel 7/9 ueber der Leiste */
html.awk-handy-quer, html.awk-dz-quer { --header-h: 144px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .hero { padding-top: calc(var(--header-h) + 4px); }
:is(html.awk-handy-quer, html.awk-dz-quer) .callbar { padding-top: 7px; padding-bottom: calc(7px + env(safe-area-inset-bottom)); }

/* Breitansicht: Hoehe des Hero setzt script.js (Knoepfe direkt ueber der Anruf-Leiste) - keine feste Mindesthoehe,
   damit die Messung nur den Inhalt erfasst. Ort/Beschreibung bleiben unten beim Preis (.eyebrow margin-top:auto),
   die Luecke je nach Ueberschriftlaenge liegt unter der Ueberschrift. Beschreibung groesser (Nutzer 10.10.2026). */
:is(html.awk-handy-quer, html.awk-dz-quer) .hero { min-height: 0; }
:is(html.awk-handy-quer, html.awk-dz-quer) .hero .hero__lead { font-size: 26px; max-width: 1300px; line-height: 1.5; }
:is(html.awk-handy-quer, html.awk-dz-quer) .hero .hero__price { font-size: 1.7rem; }
:is(html.awk-handy-quer, html.awk-dz-quer) .hero .hero__lead { line-height: 1.4; margin-top: 10px; margin-bottom: 10px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .hero .hero__price { font-size: 1.55rem; margin-bottom: 8px; }

/* Hervorgehobene Woerter der Startbereich-Ueberschrift: Verlauf Orange -> Gold (11.10.2026,
   Nutzerwahl; vorher Orange -> Tuerkis). Helles Design: einfarbig im Orange des Knopfs
   "Termin anfragen" (#ff6a3d, Nutzerwunsch 11.10.2026; zuvor #d9530b -> #c98a00, Kupfer probiert). */
.hero__title .accent { background-image: linear-gradient(92deg, #ff6a3d, #ffc23d); }
:root[data-theme="light"] .hero__title .accent { background-image: linear-gradient(#ff6a3d, #ff6a3d); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero__title .accent { background-image: linear-gradient(#ff6a3d, #ff6a3d); }
}

/* Helles Design: helle Umrandung fuer die dunkle Schrift im Startbereich (11.10.2026, Nutzerwunsch) -
   bleibt lesbar, auch wo der Text ueber dunkle Videostellen laeuft (z. B. schmales Fenster).
   Ueberschrift: feine helle Kontur + leichter Schein; Verlaufswoerter (Text transparent) per
   drop-shadow; kleinere Texte nur ein dezenter Schein. */
:root[data-theme="light"] .hero--video .hero__title .word:not(.accent) {
  text-shadow:
    -.022em -.022em 0 rgba(245, 243, 238, .95), .022em -.022em 0 rgba(245, 243, 238, .95),
    -.022em .022em 0 rgba(245, 243, 238, .95), .022em .022em 0 rgba(245, 243, 238, .95),
    0 0 .12em rgba(245, 243, 238, .7);
}
:root[data-theme="light"] .hero--video .hero__title .accent {
  filter: drop-shadow(0 0 .02em rgba(245, 243, 238, .95)) drop-shadow(0 0 .08em rgba(245, 243, 238, .7));
}
:root[data-theme="light"] .hero--video :is(.eyebrow, .hero__lead, .hero__price-label, .hero__call) {
  text-shadow: 0 0 1px rgba(245, 243, 238, 1), 0 0 3px rgba(245, 243, 238, .95), 0 0 9px rgba(245, 243, 238, .85);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__title .word:not(.accent) {
    text-shadow:
      -.022em -.022em 0 rgba(245, 243, 238, .95), .022em -.022em 0 rgba(245, 243, 238, .95),
      -.022em .022em 0 rgba(245, 243, 238, .95), .022em .022em 0 rgba(245, 243, 238, .95),
      0 0 .12em rgba(245, 243, 238, .7);
  }
  :root:not([data-theme="dark"]) .hero--video .hero__title .accent {
    filter: drop-shadow(0 0 .02em rgba(245, 243, 238, .95)) drop-shadow(0 0 .08em rgba(245, 243, 238, .7));
  }
  :root:not([data-theme="dark"]) .hero--video :is(.eyebrow, .hero__lead, .hero__price-label, .hero__call) {
    text-shadow: 0 0 1px rgba(245, 243, 238, 1), 0 0 3px rgba(245, 243, 238, .95), 0 0 9px rgba(245, 243, 238, .85);
  }
}
/* Telefonnummer steht auf dunklem Knopf - dort kein heller Schein */
.hero--video .hero__call .hero__call-num { text-shadow: none; }
/* NUR helles Design: Preis im Startbereich ("ab 30 €", "60 € / Std." ...) mit derselben hellen Umrandung
   wie die Ueberschrift (11.10.2026, Nutzerwunsch - nur dort, nicht in der Preisliste, nicht im dunklen Design) */
:root[data-theme="light"] .hero--video .hero__price-amt {
  text-shadow:
    -.022em -.022em 0 rgba(245, 243, 238, .95), .022em -.022em 0 rgba(245, 243, 238, .95),
    -.022em .022em 0 rgba(245, 243, 238, .95), .022em .022em 0 rgba(245, 243, 238, .95),
    0 0 .12em rgba(245, 243, 238, .7);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero--video .hero__price-amt {
    text-shadow:
      -.022em -.022em 0 rgba(245, 243, 238, .95), .022em -.022em 0 rgba(245, 243, 238, .95),
      -.022em .022em 0 rgba(245, 243, 238, .95), .022em .022em 0 rgba(245, 243, 238, .95),
      0 0 .12em rgba(245, 243, 238, .7);
  }
}

/* Beschreibung im Startbereich: feste Hoehe (script.js lockHeroHeight = laengster Text), Text unten
   buendig ueber dem Preis - Ortszeile und Textende springen beim Wechsel nicht mehr (11.10.2026) */
.hero .hero__lead { display: flex; flex-direction: column; justify-content: flex-end; }

/* ===== Handy HOCHKANT: Startbereich ruhiger (11.10.2026, Nutzerwunsch) =====
   Seite ist 1130px breit und wird aufs Handy verkleinert (~36 %): Ueberschrift wirkte riesig,
   Text darunter winzig (Beschreibung ~6px echt). Ueberschrift kleiner, Texte groesser.
   Nur Handys (kurze Bildschirmseite <= 600px) im Hochformat - Tablets/quer/PC unveraendert. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-device-width: 600px) {
  html .hero .hero__title { font-size: 104px; }
  html .hero .eyebrow__kicker { font-size: 24px; }
  html .hero .eyebrow__place { font-size: 40px; }
  html .hero .hero__lead { font-size: 32px; line-height: 1.45; }
  html .hero .hero__price-label { font-size: 30px; }
  html .hero .hero__price-amt { font-size: 48px; }
  html .hero .hero__actions .btn { font-size: 28px; }
  html .hero .hero__call { font-size: 30px; }
  html .hero .hero__call-num { font-size: 40px; }
  html .hero .hero__call-num svg { width: 36px; height: 36px; }
  html .hero .hero__call-time { font-size: 26px; }
  html .hero .ticker { font-size: 24px; }
}

/* Bereichsueberschriften (Leistungen, Preise, Ablauf, Kontakt ...): im hellen Design helle Umrandung
   wie im Startbereich (11.10.2026); Schrift in normaler Farbe (schwarz/weiss) - Orange probiert,
   Nutzer: wieder schwarz bzw. weiss, Rahmen behalten. */
:root[data-theme="light"] :is(.section h2, #ueber h1) {
  text-shadow:
    -.03em -.03em 0 rgba(245, 243, 238, .95), .03em -.03em 0 rgba(245, 243, 238, .95),
    -.03em .03em 0 rgba(245, 243, 238, .95), .03em .03em 0 rgba(245, 243, 238, .95),
    0 0 .15em rgba(245, 243, 238, .7);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.section h2, #ueber h1) {
    text-shadow:
      -.03em -.03em 0 rgba(245, 243, 238, .95), .03em -.03em 0 rgba(245, 243, 238, .95),
      -.03em .03em 0 rgba(245, 243, 238, .95), .03em .03em 0 rgba(245, 243, 238, .95),
      0 0 .15em rgba(245, 243, 238, .7);
  }
}

}
/* Helles Design: Einleitungstexte unter den Bereichsueberschriften mit hellem Rand (weicher Schein wie
   die kleinen Texte im Startbereich) - 11.10.2026, Nutzerwunsch */
:root[data-theme="light"] :is(#leistungen, #preise, #kontakt) .section__lead {
  text-shadow: 0 0 1px rgba(245, 243, 238, 1), 0 0 3px rgba(245, 243, 238, .95), 0 0 9px rgba(245, 243, 238, .85);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(#leistungen, #preise, #kontakt) .section__lead {
    text-shadow: 0 0 1px rgba(245, 243, 238, 1), 0 0 3px rgba(245, 243, 238, .95), 0 0 9px rgba(245, 243, 238, .85);
  }
}


/* Kontaktbereich: Ueberschriften (Telefon, E-Mail ... / Name, Rueckmeldung an ...) etwas groesser -
   NUR Handy hochkant (11.10.2026, Nutzerwunsch): 16,8 -> 19,5px, Farbe/Staerke unveraendert */
@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-device-width: 600px) {
  html:not(.awk-handy-quer):not(.awk-dz-quer) #kontakt :is(.contact__facts dt, .enquiry label) { font-size: 19.5px; }
}
/* ... und im Breitformat (Handy quer, auch "Desktop-Website" quer): 21,8 -> 25px (Nutzerwunsch 11.10.2026) */
html:is(.awk-handy-quer, .awk-dz-quer) #kontakt :is(.contact__facts dt, .enquiry label) { font-size: 25px; }

/* ===== Breitformat (Handy/Tablet quer): mehr Bildinhalt wie bei AWK-GAMING (11.10.2026, Nutzerwunsch) =====
   Inhalt der Bereiche (Leistungen, Preise, Ablauf, Kontakt) und des Footers auf 75 % - vorher war die Seite
   quer 9,4 Bildschirmhoehen lang (AWK-GAMING 6,1), jetzt 7. Kopfzeile, Anruf-/WhatsApp-Leiste und
   Startbereich bleiben unveraendert (Nutzer); das feste Hintergrundbild haengt an .home/.foot, nicht hier. */
html:is(.awk-handy-quer, .awk-dz-quer) .home > .section,
html:is(.awk-handy-quer, .awk-dz-quer) .foot__inner { zoom: .75; }
/* Sprungziel-Abstand unter der Kopfzeile wie vorher (wird sonst mitverkleinert) */
html:is(.awk-handy-quer, .awk-dz-quer) .home > .section { scroll-margin-top: calc((var(--header-h-sm) + 1.2rem) / .75); }

/* Breitformat: Texte in den verkleinerten Bereichen (zoom .75) wieder etwas groesser - x1,2, effektiv 90 %
   der frueheren Quer-Groesse statt 75 % (11.10.2026, Nutzerwunsch). Karten/Abstaende bleiben kompakt. */
:is(html.awk-handy-quer, html.awk-dz-quer) :is(#leistungen, #preise, #ablauf, #kontakt) h2 { font-size: 64px; }
:is(html.awk-handy-quer, html.awk-dz-quer) :is(#leistungen, #preise, #ablauf, #kontakt) .section__lead { font-size: 37px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen .svc h3 { font-size: 37px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen .svc p { font-size: 31px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen :is(.svc__more, .svc__arrow) { font-size: 25px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__name { font-size: 46px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__desc { font-size: 42.5px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__amt { font-size: 52px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .prow__unit { font-size: 31px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise :is(.prow--head, .prow--head .prow__amt) { font-size: 36px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise .pricelist__subhead { font-size: 42.5px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #preise :is(.pricelist__note, .pricelist__notes, .pricelist__notes li, .pricelist__notes p) { font-size: 36px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #ablauf .steps h3 { font-size: 37.5px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #ablauf .steps p { font-size: 36px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt :is(.contact__facts dt, .enquiry label) { font-size: 30px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt :is(.contact__facts dd, .contact__facts a, .contact__facts span) { font-size: 33.6px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry :is(input, textarea) { font-size: 33.6px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry .btn { font-size: 35px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #kontakt .enquiry__note { font-size: 27.6px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__desc { font-size: 33.6px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__col h4 { font-size: 27.5px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__col a { font-size: 33.6px; }
:is(html.awk-handy-quer, html.awk-dz-quer) .foot :is(.foot__bottom, .foot__bottom *) { font-size: 30px; }
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen .section__head--center,
:is(html.awk-handy-quer, html.awk-dz-quer) #leistungen .section__lead { max-width: 1500px; }   /* breiter: weniger, laengere Zeilen */
:is(html.awk-handy-quer, html.awk-dz-quer) .foot .foot__widerruf { white-space: nowrap; }      /* Knopf einzeilig */

}

/* iPhone/iPad (11.10.2026, Nutzer: ganz oben runterziehen + ruckartig loslassen -> Seite sprang bis ganz nach
   unten): sanftes Gleiten (scroll-behavior: smooth) aus - kollidiert in iOS-Safari mit dem Rueckfedern nach dem
   Herunterziehen. Ziehen zum Aktualisieren bleibt erhalten (kein overscroll-behavior). -webkit-touch-callout
   kennen nur iOS/iPadOS-Browser - Android, Mac und PC unveraendert. */
@supports (-webkit-touch-callout: none) {
  html { scroll-behavior: auto; }
}