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

:root {
  /* ---- 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, .82);
  --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"]) {
    --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, .85);
    --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"] {
  --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, .85);
  --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);
}

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) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--accent), var(--accent-2));
  border-radius: 4px;
}
::-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);
}
.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); }
.nav__wa:hover { color: #25d366; border-color: #25d366; }
.nav__mail svg { width: 18px; height: 18px; }
.nav__tel svg { width: 18px; height: 18px; }
.nav__wa svg { width: 19px; height: 19px; }

/* Kurzinfo (Tooltip) beim Überfahren / Fokussieren der Icon-Buttons */
.theme-toggle, .nav__mail, .nav__tel, .nav__wa { position: relative; }
.theme-toggle[data-tip]::after,
.nav__mail[data-tip]::after,
.nav__tel[data-tip]::after,
.nav__wa[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  /* klar unterhalb der Header-Linie – in beiden Zuständen (76px / 60px gescrollt) */
  top: calc(100% + 20px);
  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);
}
/* 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 {
  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 { 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%; }

.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 {
  background: var(--ink);
  color: var(--bg);
}
.btn--cta:hover { background: var(--accent); color: var(--on-accent); }
.site-header.is-scrolled .btn--cta { --pad-y: .58rem; }

.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 */
  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);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  max-width: 100%;               /* Pille bleibt im Container, Text bricht um */
  margin-top: 1.5rem;            /* Abstand zur Überschrift darüber */
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
  opacity: 0;
  transform: translateY(12px);
  animation: rise .7s .58s var(--ease) forwards;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent);
  animation: pulse 2.4s ease-out infinite;
}

.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; }
.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 (Variante "Ihr System ist zu langsam? Bald nicht mehr.") */
.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; }
/* 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;
}

.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(--ink);   /* volle Schriftfarbe: schwarz hell / weiss dunkel */
  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: 2.5rem;
  padding-right: 2.5rem;
  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 {
  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;
}

/* --- 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) 12.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: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);   /* volle Schriftfarbe: schwarz hell / weiss dunkel */
}
.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: .78rem; color: var(--ink); white-space: normal; line-height: 1.4; }
.pricelist__subhead + .pricelist .prow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 15.5rem; }
.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(--ink);   /* volle Schriftfarbe: schwarz hell / weiss dunkel */
}
.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(--ink);   /* volle Schriftfarbe: schwarz hell / weiss dunkel */
}
.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; }
.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(--ink);   /* volle Schriftfarbe: schwarz hell / weiss dunkel */
}
.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%; } }
@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) {
  .nav__links,
  .nav > .btn--cta { display: none; }
  .theme-toggle { margin-left: auto; }
  .burger { display: flex; }

  /* 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; }
  .prow {
    grid-template-columns: 1fr auto;
    row-gap: .3rem;
  }
  .prow__desc { grid-column: 1 / -1; order: 3; }
  .prow--head { display: none; }
  .contact__facts div { flex-direction: column; gap: .2rem; }
  .contact__facts dd { text-align: left; }
}

/* Header eng packen: Logo + 4 Icon-Buttons + Menü müssen passen */
@media (max-width: 560px) {
  .nav { gap: .5rem; }
  .theme-toggle, .nav__mail, .nav__tel, .nav__wa { width: 36px; height: 36px; }
  .nav__mail svg, .nav__tel svg, .nav__wa svg { width: 16px; height: 16px; }
  .burger { width: 38px; height: 38px; }
}
@media (max-width: 400px) {
  .eyebrow { letter-spacing: .1em; font-size: .66rem; }
  .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 { width: 32px; height: 32px; }
  .nav__mail svg, .nav__tel svg, .nav__wa svg { width: 15px; height: 15px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .burger { width: 34px; height: 34px; }
}

/* =============================================================
   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__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: 880px;   /* reicht auch fuer die dreizeilige Titel-Variante */
    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) 11rem; }
  .pricelist__subhead + .pricelist .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 15rem; }
  /* Kopfzeilen ("ab (inkl. 19 % MwST)", "Privat / Gewerbe je Std.") duerfen
     in der festen Spalte umbrechen */
  .prow--head .prow__amt { white-space: normal; line-height: 1.4; }
  .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.2rem; }
  .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__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; }
}

/* 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 h2,
  #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 { 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; }
}

/* 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 HINTERGRUNDVIDEO (.hero--video)
   Video/Standbild liegen 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/hero-poster.jpg") center / cover no-repeat;   /* Standbild als Fallback */
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.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 { opacity: .35; }

/* 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 .ticker__track { color: var(--ink); }
.hero--video .eyebrow {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--ink) 25%, transparent);
  background: rgba(var(--video-shade), .6);
}
.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);
}

/* Touch-Geraete / Bewegung reduzieren: kein Video, nur das Standbild */
@media (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* =============================================================
   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;
  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; }
}