/* shop mit Kopf - nur das, was zur Hauptseite dazukommt.
   assets/styles.css und assets/main.js bleiben bewusst unveränderte Kopien aus
   dmk-website (beide byteidentisch), damit ein späterer Abgleich ein reines
   Kopieren bleibt. Alles Eigene steht hier.

   Hinweis: .dmk-kopf und der Reveal-Failsafe stehen seit dem 19.08.2026 in
   styles.css selbst - vorher fehlten sie dort und wurden hier nachgebaut. */

/* ---------- Hero ----------
   Die Klasse .hero bringt aus styles.css den Verlauf und die Einblend-Staffelung
   mit. Die Maße dafür stehen dort aber nur unter ".stack .panel.hero", also nur
   für das Panel-Deck der Startseite. Diese Landingpage ist eine normale Seite,
   deshalb stehen sie hier.

   Alle Werte am 19.08.2026 an digital-mit-kopf.de gemessen (Viewport 1424 px):
   Hero 545 px hoch = calc(80vh - 72px), .hero-top OHNE max-width (die H1 läuft
   über die vollen 1160 px und bleibt einzeilig), Innenabstand oben nur rund
   20 px. Breiter und flacher also - nicht hoch und schmal. */
/* Die allgemeine Regel "section { padding: clamp(4rem,9vw,7.5rem) 0 }" aus
   styles.css legt oben und unten je 120 px drauf - gemessen 240 px zu viel, der
   Hero wurde dadurch 724 statt 545 px hoch. Auf der Startseite greift sie nicht,
   weil der Hero dort ein .panel im Deck ist. Hier also ausdrücklich abräumen. */
.hero { display: flex; align-items: center; padding: 0; }
.hero > .wrap { width: 100%; position: relative; z-index: 1; }
.hero-top { padding-top: clamp(1.1rem, 2.6vh, 2.2rem); }
.hero-proof { margin-bottom: clamp(1.2rem, 3.4vh, 2.7rem); }

@media (min-width: 701px) {
  .hero { min-height: calc(80vh - 72px); min-height: calc(80svh - 72px); }
}

/* dezentes Logo im Hintergrund - dieselbe Regel wie auf der Startseite, dort
   hängt sie an .page-hero bzw. .stack .panel.hero und greift deshalb bei
   unserem .hero nicht. Werte 1:1 übernommen, inklusive der Startseiten-Variante
   top:120px: das Zeichen sitzt damit auf Höhe von Überschrift und Intro und
   verbindet sich mit dem Text, statt in der Mitte der ganzen Sektion zu schweben. */
.hero .wrap::after {
  content: "";
  position: absolute; right: -4%; top: 120px; z-index: -1;
  width: clamp(220px, 26vw, 380px); aspect-ratio: 1;
  transform: translateY(-50%);
  background: url("img/dmk-icon-dark-500.png") center / contain no-repeat;
  opacity: .05; pointer-events: none; user-select: none;
}
:root[data-theme="dark"] .hero .wrap::after {
  background-image: url("img/dmk-icon-light-760.webp");
}
@media (max-width: 1100px) {
  .hero .wrap::after { display: none; }
}

/* ---------- dunkler Farbbruch ----------
   Gleiche Optik wie der Zoho-One-Block auf der Startseite. .panel-dark selbst
   ist in styles.css nicht an .stack gebunden, die Innenabstände von
   .panel-inner aber schon - deshalb hier. */
/* auch hier die Sektions-Polsterung abräumen, sonst polstert es doppelt */
.panel-dark { padding: 0; }
.panel-dark .panel-inner { padding: clamp(4rem, 9vw, 7rem) 0; }
.panel-dark .eyebrow { color: var(--blue); }

/* ---------- Eyebrow, der auf zwei Zeilen läuft ----------
   Das Label ist in styles.css ein Flexkasten: erst der 26 px lange Strich als
   ::before, dann der Text. Solange alles in eine Zeile passt, sieht das gut aus.
   Am Handy passt es nicht mehr, und dann kippen zwei Dinge um. Gemessen am
   21.08.2026 an allen sechs Landingpages, Chrome, 320 bis 430 px, DE/EN/ES:

   1. align-items: center zentriert den Strich über den GANZEN Block. Bei zwei
      Zeilen hängt er dadurch 11,1 px zu tief, also mitten im Zwischenraum
      statt am Anfang der ersten Zeile.
   2. Der Strich ist selbst ein Flex-Item und schrumpft mit. Statt 26 px misst er
      je nach Breite nur noch 15 bis 25 px (itk bei 375 px: 18,7 px).

   Betroffen war das nicht nur itk: auf Deutsch auch agentur (bis 390 px) und
   startup (320 px), auf Englisch zusätzlich handwerk, auf Spanisch bei 320 px
   alle sechs. Repariert wird es hier, damit styles.css byteidentisch zur
   Hauptseite bleibt.

   - align-self: flex-start setzt den Strich an den Anfang. Das sitzt am Strich selbst,
     nicht am ganzen Kasten - die Ausrichtung aller anderen Teile bleibt damit unberührt.
   - Der berechnete margin-top schiebt ihn auf die Mitte der ERSTEN Zeile. Das
     ist genau die Rechnung, die align-items: center bei einer Zeile macht:
     halbe Zeilenhöhe minus halbe Strichstärke. Neuere Browser nehmen 1lh,
     also die echte Zeilenhöhe; ältere die Ersatzrechnung 1.65em, das ist die
     line-height, die styles.css am body setzt.
   - flex: none hält den Strich auf seinen 26 px.
   - text-wrap: balance verteilt den Text gleichmäßig auf die Zeilen. Ohne das
     füllt der Browser die erste Zeile randvoll und lässt einen Rest stehen:
     "mobilfunk-" / "fachhandel" (itk, ab 414 px) oder ein 46 px kurzes "teams"
     (startup, 320 px). Browser ohne diese Regel behalten den alten Umbruch,
     der Strich sitzt aber trotzdem richtig.

   Einzeilige Eyebrows bleiben unverändert: der Strich saß vorher 10,297 px
   unter der Oberkante, jetzt 10,281 px. 0,016 px Unterschied, also weniger als
   ein Bildpunkt, und 26 px breit war er dort ohnehin schon. */
.eyebrow { text-wrap: balance; }
.eyebrow::before {
  flex: none;
  align-self: flex-start;
  margin-top: calc((1.65em - 1px) / 2);
  margin-top: calc((1lh - 1px) / 2);
}

/* Am Handy ist der Strich kürzer (Jans Entscheidung, 21.08.2026). Am Desktop
   sehen die 26 px aus dem Brand Guide richtig aus, auf dem schmalen Schirm wirken
   sie neben dem kleinen Label zu wuchtig - 14 px passen dort besser. Wichtig:
   das gilt für ALLE Eyebrows, nicht nur den umbrechenden im Hero, sonst hätten
   Überschrift und Sektionslabel auf demselben Schirm zwei verschiedene Striche.
   640 px ist der Mobil-Breakpoint, den styles.css ohnehin benutzt. */
@media (max-width: 640px) {
  .eyebrow::before { width: 14px; }
}

/* ---------- App-Bausteine ----------
   Die sechs Karten bekommen ein Icon-Feld. Die Glyphen sind bewusst eigene,
   schlichte Zeichen und KEINE Nachbauten der Zoho-Logos; die echten App-Logos
   liegen in der Mediathek nur als weiße Fassung und nur für drei der sechs Apps.
   Farbe läuft über unsere Markenspanne Blau -> Cyan, damit der Block lebendiger
   wirkt, ohne bunt zu werden. */
.app-icon { width: 46px; height: 46px; }
.app-icon svg { width: 24px; height: 24px; }

/* ---------- Reihenfolge beim Aufdecken ----------
   styles.css staffelt nur bis zur vierten Karte:
     .grid > .reveal:nth-child(2|3|4) { transition-delay: .09s | .18s | .27s }
   Auf der Hauptseite reicht das, dort hat kein Raster mehr als vier Kacheln.
   Die Bausteine-Reihe hier hat sechs - Karte 5 und 6 bekamen dadurch GAR keine
   Verzögerung und erschienen zusammen mit Karte 1, also vor 2, 3 und 4. Das sah
   nach Zufall aus.

   Deshalb hier zeilenweise staffeln statt fortlaufend: jede Zeile läuft von
   links nach rechts durch, und die nächste Zeile beginnt wieder bei null.
   Die Spaltenzahl wechselt bei 960 px und 640 px - die Regeln folgen dem. */
@media (min-width: 961px) {
  .grid-3 > .reveal:nth-child(3n + 1) { transition-delay: 0s; }
  .grid-3 > .reveal:nth-child(3n + 2) { transition-delay: .09s; }
  .grid-3 > .reveal:nth-child(3n + 3) { transition-delay: .18s; }
}
@media (min-width: 641px) and (max-width: 960px) {
  .grid-3 > .reveal:nth-child(2n + 1) { transition-delay: 0s; }
  .grid-3 > .reveal:nth-child(2n + 2) { transition-delay: .09s; }
}
/* eine Spalte: jede Karte kommt ohnehin einzeln ins Bild, eine Verzögerung
   würde dort nur wie Verzug wirken.
   Das :nth-child(n) sieht überflüssig aus, ist es aber nicht: ohne den Zusatz
   hat der Selektor die Spezifität 0,2,0 und verliert gegen die Basisregel
   ".grid > .reveal:nth-child(2)" (0,3,0) aus styles.css. Gemessen am 19.08.:
   ohne den Zusatz blieb es einspaltig bei 0/.09/.18/.27/0/0. */
@media (max-width: 640px) {
  .grid-3 > .reveal:nth-child(n) { transition-delay: 0s; }
}

#apps .card:nth-child(1) .app-icon { background: rgba(20, 112, 200, .12); color: #1470C8; }
#apps .card:nth-child(2) .app-icon { background: rgba(37, 144, 235, .13); color: #2590EB; }
#apps .card:nth-child(3) .app-icon { background: rgba(56, 168, 240, .14); color: #1E82D8; }
#apps .card:nth-child(4) .app-icon { background: rgba(84, 190, 243, .15); color: #1B79C9; }
#apps .card:nth-child(5) .app-icon { background: rgba(120, 210, 246, .16); color: #1670BC; }
#apps .card:nth-child(6) .app-icon { background: rgba(171, 242, 255, .22); color: #12669F; }

#apps .card:hover .app-icon { background: var(--blue); color: #fff; }

:root[data-theme="dark"] #apps .card .app-icon { background: rgba(37, 144, 235, .16); color: var(--blue); }
:root[data-theme="dark"] #apps .card:nth-child(4) .app-icon,
:root[data-theme="dark"] #apps .card:nth-child(5) .app-icon { background: rgba(120, 210, 246, .16); color: #7ACBF5; }
:root[data-theme="dark"] #apps .card:nth-child(6) .app-icon { background: rgba(171, 242, 255, .18); color: #ABF2FF; }
:root[data-theme="dark"] #apps .card:hover .app-icon { background: var(--blue); color: #06131F; }

/* ---------- Terminbuchung ----------
   Höhen wie auf digital-mit-kopf.de/kontakt/ gemessen. */
#termin .booking-card { height: 1000px; }
#termin .booking-card, #termin .booking-card:hover { transform: none; }
@media (max-width: 760px) { #termin .booking-card { height: 1150px; } }

.termin-direkt {
  margin-top: 1.4rem; text-align: center;
  font-size: .95rem; color: var(--slate);
}
:root[data-theme="dark"] .termin-direkt { color: #A9BCD0; }

/* ---------- Consent-Banner ----------
   Bewusst schlank und ohne Fremd-Skript: das Banner selbst lädt nichts nach.
   Erst eine Zustimmung startet Google Ads bzw. Meta.
   Sitzt mittig auf einem abdunkelnden Grund - die Entscheidung soll man treffen,
   nicht übersehen. Aufbau angelehnt an CCM19 auf der Hauptseite: Titel, Erklärung,
   Kategorien mit Zahl, drei Schaltflächen, Links unten. */
.consent-hg {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10, 22, 38, .55);
  backdrop-filter: blur(2px);
  animation: consent-auf .25s ease both;
}
@keyframes consent-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes consent-rein {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.consent-banner {
  position: fixed; z-index: 9999;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem); overflow-y: auto;
  background: var(--paper); color: var(--slate);
  border: 1px solid var(--line);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(10, 22, 38, .35);
  padding: 2rem 2rem 1.6rem;
  font-size: .95rem; line-height: 1.6;
  animation: consent-rein .3s cubic-bezier(.2, .8, .3, 1) both;
}
:root[data-theme="dark"] .consent-banner {
  background: #13263E; color: #A9BCD0; border-color: rgba(255,255,255,.12);
  border-top-color: var(--blue);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.consent-banner h2 {
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--ink); margin-bottom: .7rem;
}
:root[data-theme="dark"] .consent-banner h2 { color: #EFF4F9; }
.consent-banner a { color: var(--link); }

/* Kategorien wie im CCM19-Banner: Name, Anzahl, Schalter */
.consent-kat {
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .consent-kat { border-top-color: rgba(255,255,255,.12); }
.consent-kat label {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; cursor: pointer;
}
.consent-kat input[type="checkbox"] {
  width: 17px; height: 17px; accent-color: var(--blue-deep); cursor: pointer;
}
.consent-kat input:disabled { cursor: default; opacity: .55; }
/* --mist ist laut styles.css "gedämpft auf DUNKEL" - auf dem hellen Banner
   ergibt es nur 2,15 Kontrast und fällt damit durch AA. Auf hell deshalb
   --slate, auf dunkel der dortige Fließtextton. Gemessen 19.08.2026. */
.consent-kat .kat-zahl { color: var(--slate); font-family: var(--font-mono); font-size: .8rem; }
:root[data-theme="dark"] .consent-kat .kat-zahl { color: #A9BCD0; }

.consent-actions {
  display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem;
}
.consent-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.btn-quiet {
  background: transparent; color: var(--slate);
  border: 1px solid var(--line);
}
.btn-quiet:hover { border-color: var(--link); color: var(--link); }
:root[data-theme="dark"] .btn-quiet { color: #A9BCD0; border-color: rgba(255,255,255,.16); }

.consent-links {
  margin-top: 1.3rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--slate);
}
:root[data-theme="dark"] .consent-links {
  border-top-color: rgba(255,255,255,.12); color: #A9BCD0;
}
/* der Weg zur vollständigen Liste bleibt bewusst zurückhaltend: gleiche
   Schriftgröße wie die Rechtslinks, kein Knopf, erst beim Überfahren blau */
.consent-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.consent-links a:hover { color: var(--link); }

/* ---------- Liste verwendeter Cookies ---------- */
.consent-banner.zeigt-liste { width: min(760px, calc(100vw - 2.5rem)); }
.ck-gruppe {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em;
  color: var(--link); margin: 1.8rem 0 .2rem;
}
.ck-dienst {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
}
:root[data-theme="dark"] .ck-dienst { border-top-color: rgba(255,255,255,.12); }
.ck-dienst h4 {
  font-family: var(--font-display); font-size: 1.02rem;
  color: var(--ink); margin-bottom: .4rem;
}
:root[data-theme="dark"] .ck-dienst h4 { color: #EFF4F9; }
/* Feldaufbau wie im CCM19-Dialog der Hauptseite: Bezeichnung als eigene
   Zeile darüber, darunter der Wert. */
.ck-feld { font-size: .88rem; color: var(--slate); margin-top: .9rem; word-break: break-word; }
.ck-feld span {
  display: block; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  margin-bottom: .15rem;
}
:root[data-theme="dark"] .ck-feld { color: #A9BCD0; }
:root[data-theme="dark"] .ck-feld span { color: #EFF4F9; }
.ck-grundlage { margin-top: 1.1rem; }
.ck-tab-titel {
  margin-top: 1.1rem; font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; color: var(--ink);
}
:root[data-theme="dark"] .ck-tab-titel { color: #EFF4F9; }

/* Tabellen laufen bei schmalen Fenstern in ihrem eigenen Rahmen, nie die Seite */
.ck-rahmen { overflow-x: auto; margin-top: .7rem; }
.ck-tabelle { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ck-tabelle th, .ck-tabelle td {
  text-align: left; padding: .45rem .7rem .45rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
:root[data-theme="dark"] .ck-tabelle th, :root[data-theme="dark"] .ck-tabelle td {
  border-bottom-color: rgba(255,255,255,.1);
}
.ck-tabelle th { color: var(--slate); font-weight: 500; white-space: nowrap; }
:root[data-theme="dark"] .ck-tabelle th { color: #A9BCD0; }
.ck-tabelle code {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--link); white-space: nowrap;
}
.ck-hinweis {
  margin-top: 1.6rem; padding: .8rem 1rem;
  border-radius: 10px; background: var(--blue-tint);
  font-size: .84rem;
}
:root[data-theme="dark"] .ck-hinweis { background: rgba(37,144,235,.12); }

@media (max-width: 520px) {
  .consent-banner { padding: 1.6rem 1.4rem 1.3rem; }
  .consent-banner h2 { font-size: 1.15rem; }
  .consent-actions { flex-direction: column; }
  .consent-kat { flex-direction: column; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .consent-banner, .consent-hg { animation: none; }
}

/* ---------- Branchen-Motive ----------
   4. Fassung, 20.08.2026, nach Jans Feedback. Die Regeln:
   - feste Objekte stehen ganz da, nur ein Detail bewegt sich dauerhaft
   - Aufbau-Motive zeichnen sich schnell, stehen kurz, bauen sofort ab, endlos
   - kein Motiv im dunklen Panel, nichts wiederholt sich auf einer Seite
   Nur CSS und Inline-SVG; styles.css und main.js bleiben unberührt. */
.dk-ebene { position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; user-select: none; z-index: 0; }
.dk-rahmen { position: absolute; top: 0; height: 100%; left: 50%;
  transform: translateX(-50%); width: min(100%, calc(var(--w) + 10rem)); }
#situation, #ergebnis, #apps, #faq, #termin { position: relative; }
#situation > .wrap, #ergebnis > .wrap, #apps > .wrap,
#faq > .wrap, #termin > .wrap { position: relative; z-index: 1; }

/* Im Hero übernimmt das Branchenmotiv den Platz des KPF-Zeichens - zwei
   Wasserzeichen übereinander wirken matschig. Die Bestandsregel in styles.css
   bleibt stehen und wird hier nur stillgelegt. */
.hero .wrap::after { content: none; }

.dk { position: absolute; color: var(--blue-deep); opacity: .12; }
.dk svg { display: block; width: 100%; height: auto; }
.dk-b { display: block; }
:root[data-theme="dark"] .dk { color: var(--blue); opacity: .17; }

/* die Plätze - links und rechts im Wechsel, damit die Seite atmet */
.dk-hero-a { right: -1rem; top: 84px; width: clamp(260px, 30vw, 430px); }
.dk-hero-b { left: .5rem; bottom: 2.2rem; width: clamp(170px, 19vw, 250px); }
.dk-sit { right: 0; top: 1.5rem; width: clamp(190px, 21vw, 280px); }
.dk-erg { right: -1rem; bottom: .4rem; width: clamp(160px, 17vw, 230px); }
.dk-apps { left: 0; top: 2rem; width: clamp(160px, 17vw, 230px); }
.dk-faq { right: 0; bottom: 2rem; width: clamp(160px, 17vw, 230px); }
.dk-term { left: 0; top: 2rem; width: clamp(150px, 16vw, 220px); }

/* Breite Fenster: das zweite Hero-Motiv sitzt unter der Vertrauenszeile.
   Damit es dort in jeder Branche gleich viel Platz braucht, wird seine Höhe
   gedeckelt - sonst ragt ein hohes Motiv (Wahlurne, Notizzettel) in die Zeile
   hinein. Auf flachen Fenstern (typisch MacBook) bleibt darunter zu wenig
   Platz; dort entfällt es ganz, das große Motiv rechts trägt den Hero allein.
   Gemessen am 20.08.2026: bei 1440x1150 sind 183 px frei, bei 1440x820 nur 57. */
@media (min-width: 1101px) {
  /* 21.08.2026: die reine Höhenvorgabe (height: 104px; width: auto) machte ein
     flaches Motiv breiter statt kleiner - die Wasserwaage (240:54) wuchs auf
     462 px statt höchstens 250 px. Deshalb jetzt: die Breite ist das Minimum
     aus der normalen Breite und 104 px mal Seitenverhältnis (--dk-r steht als
     Inline-Wert am Motiv). Hohe Motive bleiben exakt bei 104 px Höhe, flache
     behalten ihre alte Breite. */
  .dk-hero-b { width: min(clamp(170px, 19vw, 250px), calc(104px * var(--dk-r, 2))); }
}
@media (min-width: 1101px) and (max-height: 1000px) {
  .dk-hero-b { display: none; }
}

/* der Papierflieger nutzt die volle Fensterbreite, klein und selten */
.dk-voll { left: 0; width: clamp(56px, 6vw, 84px); }
.dk-voll-1 { top: 16%; } .dk-voll-2 { top: 58%; } .dk-voll-3 { top: 26%; }

/* Schmale Fenster: gemessen am 20.08.2026 bei 375 px. Der Hero stapelt dort,
   die Vertrauenszeile mit dem Zoho-Badge beginnt auf allen fünf Seiten bei
   67,2 % der Hero-Höhe, die Schaltflächen enden bei 46-48 %. Dazwischen liegen
   gut 220 px leere Fläche - dorthin wandert das zweite Motiv, statt hinter dem
   Badge zu klemmen. Das Hauptmotiv rückt aus der oberen Ecke nach unten. */
@media (max-width: 1100px) {
  .dk-hero-a { right: -2rem; top: 5%; width: 250px; }
  .dk-hero-b { left: 0; top: 54%; bottom: auto; }
  .dk-sit { right: -2rem; width: 210px; }
}
@media (max-width: 640px) {
  .dk-hero-a { right: -1rem; top: 8%; width: 205px; }
  .dk-hero-b { left: -1rem; top: 52%; bottom: auto; width: 172px; }
  .dk-sit { right: -1.6rem; width: 165px; }
  .dk-erg { right: -1.6rem; width: 150px; }
  .dk-apps { left: -1.4rem; width: 150px; }
  .dk-faq { right: -1.4rem; width: 150px; }
  .dk-term { left: -1.2rem; width: 150px; }
}

/* ---- Aufbau-Zeichnung: schnell hin, kurz stehen, schnell weg, kurze Pause.
   pathLength=100 macht alle Linien gleich schnell; --dks staffelt die
   Sektionen, --dkp die Striche innerhalb eines Motivs. */
@keyframes dk-bau {
  0% { stroke-dashoffset: 101; }
  30% { stroke-dashoffset: 0; }
  52% { stroke-dashoffset: 0; }
  76% { stroke-dashoffset: 101; }
  100% { stroke-dashoffset: 101; }
}
.dkz { stroke-dasharray: 101; stroke-dashoffset: 101;
  animation: dk-bau 9s ease-in-out infinite;
  animation-delay: calc(var(--dks, 0s) + var(--dkp, 0s)); }
.dkz:nth-of-type(2) { --dkp: .35s; }
.dkz:nth-of-type(3) { --dkp: .7s; }
.dkz:nth-of-type(4) { --dkp: 1.05s; }
.dkz:nth-of-type(5) { --dkp: 1.4s; }
.dk-hero-a { --dks: .2s; } .dk-hero-b { --dks: 1.2s; }
.dk-sit { --dks: .6s; }    .dk-erg { --dks: 1.5s; }
.dk-apps { --dks: .9s; }   .dk-faq { --dks: .4s; }
.dk-term { --dks: 1.1s; }

/* ---- dauerhafte Detail-Bewegungen ---- */
svg .dk-wippen, svg .dk-baumeln, svg .dk-slide,
svg .dk-dampf-a, svg .dk-dampf-b, svg .dk-einwurf { transform-box: view-box; }
svg g.dk-rot, svg g.dk-rot-r { transform-box: fill-box; transform-origin: 50% 50%; }

/* Libelle: wippt die ganze Zeit ruhig von links nach rechts */
@keyframes dk-wippe { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
.dk-wippen { animation: dk-wippe 2.6s ease-in-out infinite alternate; }

/* Maßstab-Glied: hängt am Gelenk und baumelt entspannt */
@keyframes dk-baumel { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
.dk-baumeln { transform-origin: 100px 40px;
  animation: dk-baumel 3.2s ease-in-out infinite alternate; }

@keyframes dk-schweben { 50% { transform: translateY(10px); } }
.dk-float { animation: dk-schweben 9s ease-in-out infinite; }

@keyframes dk-schwingen { 50% { transform: rotate(2.4deg); } }
.dk-sway { transform-origin: 50% 0; animation: dk-schwingen 7s ease-in-out infinite; }

@keyframes dk-schieben { to { transform: translateX(34px); } }
.dk-slide { animation: dk-schieben 5s ease-in-out infinite alternate; }

@keyframes dk-rollen { to { transform: translateX(9px); } }
.dk-roll { animation: dk-rollen 4s ease-in-out infinite alternate; }

/* Zahnräder: gleichmäßig, gegenläufig */
@keyframes dk-dreh { to { transform: rotate(360deg); } }
.dk-rot { animation: dk-dreh 16s linear infinite; }
.dk-rot-r { animation: dk-dreh 16s linear infinite reverse; }

/* Funkwellen: laufen ruhig vom Mast nach außen, endlos */
@keyframes dk-funk { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.dk-funk-1 { animation: dk-funk 3.2s ease-out infinite; }
.dk-funk-2 { animation: dk-funk 3.2s ease-out .55s infinite; }
.dk-funk-3 { animation: dk-funk 3.2s ease-out 1.1s infinite; }

/* Router-Leuchte: blinkt ungleichmäßig, wie es echte Geräte tun */
@keyframes dk-led { 0%, 42%, 52%, 100% { opacity: .25; } 46%, 48% { opacity: 1; } }
.dk-led { animation: dk-led 2.4s steps(1, end) infinite; }

/* Kaffeedampf: steigt sanft auf, verweht, kommt wieder */
@keyframes dk-dampf {
  0% { transform: translateY(0); opacity: .9; }
  70% { transform: translateY(-9px); opacity: .25; }
  100% { transform: translateY(-12px); opacity: 0; }
}
.dk-dampf-a { animation: dk-dampf 3s ease-out infinite; }
.dk-dampf-b { animation: dk-dampf 3s ease-out 1.5s infinite; }

/* Wahlurne: der Stimmzettel senkt sich in den Schlitz, taucht ein, kommt neu */
@keyframes dk-wurf {
  0% { transform: translateY(-24px); opacity: 0; }
  14% { opacity: 1; transform: translateY(-20px); }
  48% { transform: translateY(2px); opacity: 1; }
  62% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}
.dk-einwurf { animation: dk-wurf 6.5s ease-in-out infinite; }

/* Papierflieger: klein, schnell, mit Schräglage - und die meiste Zeit weg.
   Drei verschiedene Bahnen, damit er nicht immer gleich fliegt. */
@keyframes dk-flug-a {
  0% { transform: translate(-12vw, 46px) rotate(-14deg) rotateY(8deg) scale(.8); opacity: 0; }
  3% { opacity: 1; }
  13% { transform: translate(38vw, -8px) rotate(4deg) rotateY(52deg) scale(.66); }
  24% { transform: translate(104vw, -74px) rotate(-10deg) rotateY(14deg) scale(.85); opacity: 1; }
  26%, 100% { opacity: 0; transform: translate(112vw, -80px); }
}
@keyframes dk-flug-b {
  0%, 34% { transform: translate(108vw, -10px) rotate(-166deg) rotateY(30deg) scale(.6); opacity: 0; }
  37% { opacity: 1; }
  47% { transform: translate(52vw, 40px) rotate(-186deg) rotateY(-42deg) scale(.75); }
  58% { transform: translate(-10vw, -30px) rotate(-172deg) rotateY(-10deg) scale(.6); opacity: 1; }
  60%, 100% { opacity: 0; transform: translate(-14vw, -34px); }
}
@keyframes dk-flug-c {
  0%, 66% { transform: translate(-8vw, -50px) rotate(16deg) rotateY(-14deg) scale(.55); opacity: 0; }
  69% { opacity: 1; }
  80% { transform: translate(58vw, 44px) rotate(28deg) rotateY(46deg) scale(.8); }
  90% { transform: translate(106vw, 100px) rotate(12deg) rotateY(10deg) scale(.6); opacity: 1; }
  92%, 100% { opacity: 0; transform: translate(110vw, 108px); }
}
.dk-fly-a { animation: dk-flug-a 24s linear infinite both; }
.dk-fly-b { animation: dk-flug-b 24s linear infinite both; }
.dk-fly-c { animation: dk-flug-c 24s linear infinite both; }

@media (prefers-reduced-motion: reduce) {
  .dkz { animation: none; stroke-dashoffset: 0; }
  .dk-wippen, .dk-baumeln, .dk-float, .dk-sway, .dk-slide, .dk-roll,
  .dk-rot, .dk-rot-r, .dk-dampf-a, .dk-dampf-b, .dk-einwurf,
  .dk-funk-1, .dk-funk-2, .dk-funk-3, .dk-led { animation: none; opacity: 1; }
  .dk-fly-a, .dk-fly-b, .dk-fly-c { animation: none; opacity: 0; }
}