/* Leistungsseiten (/leistungen/…): gemeinsames Aussehen, Farben und Schriften wie auf der Startseite */

:root {
  --c-bg: #282c20;
  --c-bg-elevated: #313627;
  --c-bg-floating: #3a402e;
  --c-bg-deep: #1a1d15;
  --c-accent: #d2ff00;
  --c-accent-glow: rgba(210, 255, 0, 0.15);
  --c-teal: #2a9d8f;
  --c-teal-glow: rgba(42, 157, 143, 0.15);
  --c-text: #f4f4ed;
  --c-text-muted: #b0b0a3;
  --c-border: rgba(244, 244, 237, 0.08);
  --c-border-hover: rgba(210, 255, 0, 0.2);

  --f-display: 'Outfit', sans-serif;
  --f-text: 'Geologica', sans-serif;

  --f-hero: clamp(2.5rem, 5.2vw, 5.2rem);
  --f-h2: clamp(2rem, 4.2vw, 3.6rem);
  --f-h3: clamp(1.15rem, 1.6vw, 1.45rem);
  --f-body-lg: clamp(1.05rem, 1.2vw, 1.2rem);
  --f-body: clamp(0.95rem, 1vw, 1.05rem);
  --f-small: 0.875rem;
  --f-eyebrow: clamp(0.78rem, 0.95vw, 0.95rem);

  --section-py: clamp(4.5rem, 11vh, 8.5rem);
  --container-max: 1340px;
  --container-px: clamp(1.25rem, 4vw, 3rem);
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 9999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.25s;
  --t-slow: 0.9s;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-text);
  font-size: var(--f-body);
  line-height: 1.7;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--c-accent); color: var(--c-bg-deep); }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-px); }
section { position: relative; padding: var(--section-py) 0; }
.eyebrow {
  display: block;
  font-family: var(--f-display);
  font-size: var(--f-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 0.75rem; }
.section-head h2 { font-size: var(--f-h2); }
.section-head p { margin-top: 1.2rem; color: var(--c-text-muted); font-size: var(--f-body-lg); }

.noise {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px;
}

/* Hintergrund: zwei langsam treibende Lichtflecken pro Abschnitt */
.glow::before {
  content: '';
  position: absolute;
  inset: -60px; /* größer als der Abschnitt: beim Treiben bleibt kein Rand frei */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 420px at var(--g1, 20% 30%), rgba(210, 255, 0, 0.045) 0%, transparent 70%),
    radial-gradient(ellipse 520px 380px at var(--g2, 80% 70%), rgba(42, 157, 143, 0.06) 0%, transparent 70%);
  animation: drift 36s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.98); }
}
main { position: relative; z-index: 1; isolation: isolate; }
main > section { overflow: hidden; }

/* ── Navigation ─────────────────────────────────────── */
#navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(40, 44, 32, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
#navbar.scrolled { background: rgba(40, 44, 32, 0.92); border-bottom-color: var(--c-border); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}
.nav-logo { font-family: var(--f-display); font-size: 1.3rem; font-weight: 900; letter-spacing: 0.08em; }
.logo-l { color: var(--c-accent); }
.nav-links { display: flex; align-items: center; gap: 2.2rem; }
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
  font-family: var(--f-display);
  font-size: var(--f-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--c-accent);
  transition: width var(--t-fast) var(--ease-out-expo);
}
.nav-link:hover::after, .nav-link[aria-current]::after { width: 100%; left: 0; right: auto; }
.nav-link svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform var(--t-fast); }

/* Aufklappmenü „Leistungen“ */
.nav-drop { position: relative; }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: 330px;
  padding: 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: rgba(26, 29, 21, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out-expo), visibility var(--t-fast);
}
.nav-drop-menu::before { content: ''; position: absolute; inset: -18px 0 auto; height: 18px; } /* Brücke für die Maus */
.nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-drop:hover .nav-link svg, .nav-drop.open .nav-link svg { transform: rotate(180deg); }
.nav-drop-menu a {
  display: block;
  padding: 0.8rem 1rem;
  border-radius: var(--r-md);
  transition: background var(--t-fast);
}
.nav-drop-menu a:hover, .nav-drop-menu a[aria-current] { background: rgba(244, 244, 237, 0.05); }
.nav-drop-menu strong { display: block; font-family: var(--f-display); font-size: 0.98rem; }
.nav-drop-menu a[aria-current] strong { color: var(--c-accent); }
.nav-drop-menu span { display: block; font-size: 0.82rem; color: var(--c-text-muted); line-height: 1.4; }

.nav-cta, .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-display);
  font-weight: 700;
  background: var(--c-accent);
  color: var(--c-bg-deep);
  border-radius: var(--r-full);
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}
.nav-cta { font-size: var(--f-small); padding: 0.65rem 1.5rem; }
.btn-primary { font-size: var(--f-body); padding: 1rem 2.2rem; }
.nav-cta:hover, .btn-primary:hover { transform: scale(1.04) translateY(-2px); box-shadow: 0 8px 30px rgba(210, 255, 0, 0.25); }
.btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--c-text-muted);
  transition: color var(--t-fast);
}
.btn-secondary::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--c-accent); transition: width var(--t-fast) var(--ease-out-expo); }
.btn-secondary:hover { color: var(--c-accent); }
.btn-secondary:hover::after { width: 100%; }
.arrow { display: inline-block; transition: transform var(--t-fast) var(--ease-spring); }
a:hover .arrow { transform: translateX(4px); }

.hamburger { display: none; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; z-index: 1001; }
.hamburger span { display: block; height: 2px; background: var(--c-text); border-radius: 2px; transition: transform var(--t-fast) var(--ease-out-expo), opacity var(--t-fast); }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  background: rgba(26, 29, 21, 0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-smooth);
}
.mobile-menu.open { opacity: 1; pointer-events: all; }
.mobile-menu a { font-family: var(--f-display); font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; }
.mobile-menu .sub { font-size: 1.05rem; font-weight: 600; color: var(--c-text-muted); }
.mobile-menu .sub[aria-current] { color: var(--c-accent); }

/* ── Hero ───────────────────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--nav-h) + 3rem) 0 4rem; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.6rem; font-size: var(--f-small); color: var(--c-text-muted); }
.crumbs a:hover { color: var(--c-accent); }
.crumbs li { list-style: none; display: flex; gap: 0.5rem; }
.crumbs li + li::before { content: '/'; opacity: 0.4; }
.hero .eyebrow { margin-bottom: 1rem; }
.hero h1 { font-size: var(--f-hero); font-weight: 900; line-height: 0.98; text-transform: uppercase; }
.hero-line { display: block; overflow: hidden; padding: 0 0 0.08em 0.1em; margin-left: -0.1em; }
.hero-line > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease-out-expo); }
.hero-line .accent { display: inline-block; color: var(--c-accent); transform: skewX(-8deg); }
.loaded .hero-line > span { transform: translateY(0); }
.loaded .hero-line:nth-child(2) > span { transition-delay: 0.1s; }
.loaded .hero-line:nth-child(3) > span { transition-delay: 0.2s; }
.hero-desc { max-width: 540px; margin-top: 1.6rem; font-size: var(--f-body-lg); color: var(--c-text-muted); line-height: 1.75; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.2rem; }
.price-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin-top: 2rem;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--c-border-hover);
  border-radius: var(--r-md);
  background: rgba(210, 255, 0, 0.04);
  font-family: var(--f-display);
}
.price-chip b { font-size: 1.15rem; font-weight: 800; }
.price-chip span { color: var(--c-text-muted); font-size: var(--f-small); }
.trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; font-size: var(--f-small); color: var(--c-text-muted); }
.trust li { list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.trust svg { width: 16px; height: 16px; fill: none; stroke: var(--c-accent); stroke-width: 2.4; }
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); }
.loaded .fade-up { opacity: 1; transform: none; }
.loaded .fade-up.d1 { transition-delay: 0.35s; }
.loaded .fade-up.d2 { transition-delay: 0.5s; }
.loaded .fade-up.d3 { transition-delay: 0.65s; }
.loaded .fade-up.d4 { transition-delay: 0.8s; }

/* Handy mit Chat-Demo */
.demo { position: relative; justify-self: center; }
.phone {
  position: relative;
  width: 320px;
  height: 640px;
  padding: 11px;
  border-radius: 50px;
  background: linear-gradient(150deg, #44483c 0%, #1b1d16 45%, #2b2e25 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 1.5px #0d0e0a, 0 50px 90px -30px rgba(0, 0, 0, 0.75), 0 0 90px -10px var(--c-teal-glow);
  animation: float 6s ease-in-out 1.5s infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.island { position: absolute; z-index: 3; top: 10px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; }
.wa-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 40px;
  background: #0b141a;
  color: #e9edef;
  font: 14.2px/1.38 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.wa-statusbar { display: flex; justify-content: space-between; align-items: flex-end; height: 44px; padding: 0 30px 4px; background: #202c33; font-weight: 600; font-size: 13px; }
.wa-head { display: flex; align-items: center; gap: 9px; padding: 6px 12px 10px; background: #202c33; }
.wa-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-teal); font: 800 15px var(--f-display); color: #fff; }
.wa-name { font-weight: 600; font-size: 15.5px; line-height: 1.2; }
.wa-status { font-size: 12.5px; color: #8696a0; }
.wa-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 9px 6px; background: #0b141a radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.4px) 0 0 / 17px 17px; }
.wa-feed { display: flex; flex-direction: column; gap: 3px; }
.wa-day { align-self: center; margin: 4px 0; padding: 5px 12px; border-radius: 8px; background: #182229; color: #8696a0; font-size: 12.5px; }
.wa-msg { max-width: 84%; animation: pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }
.wa-msg.in { align-self: flex-start; transform-origin: left bottom; }
.wa-msg.out { align-self: flex-end; transform-origin: right bottom; }
.wa-msg.in + .wa-msg.out, .wa-msg.out + .wa-msg.in { margin-top: 8px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
.wa-bubble { padding: 6px 8px 7px 9px; border-radius: 8px; background: #202c33; overflow-wrap: break-word; }
.wa-msg.out .wa-bubble { background: #005c4b; }
.wa-meta { float: right; margin: 7px 0 -5px 10px; font-size: 11px; color: rgba(233, 237, 239, 0.6); }
.wa-btns { display: flex; gap: 3px; margin-top: 3px; }
.wa-btn { flex: 1; padding: 8px; border-radius: 8px; background: #202c33; color: #53bdeb; text-align: center; font-weight: 500; transition: background 0.25s, transform 0.25s; }
.wa-btn.pressed { background: #33464f; transform: scale(0.95); }
.wa-msg.typing .wa-bubble { display: flex; gap: 4px; padding: 12px 13px; }
.wa-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8696a0; animation: dot 1.2s infinite ease-in-out; }
.wa-msg.typing i:nth-child(2) { animation-delay: 0.15s; }
.wa-msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.wa-input { display: flex; gap: 6px; padding: 6px 8px 20px; }
.wa-input div:first-child { flex: 1; padding: 10px 15px; border-radius: 22px; background: #202c33; color: #8696a0; font-size: 15px; }
.wa-input div:last-child { width: 44px; height: 44px; border-radius: 50%; background: #00a884; }

/* Begleitkarten am Handy: Uhrzeit-Hinweis und Benachrichtigung an den Inhaber */
.demo-note, .demo-alert {
  position: absolute;
  z-index: 4;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: rgba(26, 29, 21, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  font-size: 0.85rem;
  line-height: 1.45;
}
.demo-note { top: 250px; left: -195px; width: 200px; }
.demo-note b { display: block; font-family: var(--f-display); font-size: 1.6rem; color: var(--c-accent); }
.demo-alert {
  bottom: -26px;
  right: -150px;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  width: 250px;
  opacity: 0;
  transform: translateX(30px) scale(0.96);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.6s var(--ease-spring);
}
.demo-alert.show { opacity: 1; transform: none; }
.demo-alert i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent); }
.demo-alert i svg { width: 18px; height: 18px; fill: none; stroke: var(--c-bg-deep); stroke-width: 2.6; }
.demo-alert b { display: block; font-family: var(--f-display); }
.demo-alert span { color: var(--c-text-muted); }

/* Website-Demo: eine Beispielseite schwebt in fünf Ebenen (Technik, Bilder, Texte, Bedienung, Kontakt), die Ebenen fügen
   sich zusammen, die Seite dreht sich zum Betrachter, ein Besucher klickt „Anfrage senden“ und das Handy des Inhabers meldet
   die Anfrage – dann wieder auseinander. Die Phasen überlappen sich (die Seite dreht sich schon, während die letzten Ebenen
   einrasten), so bleibt alles in Bewegung, ohne gehetzt zu wirken. Den Ablauf steuert leistung.js über Klassen.
   Maße in cqw (Anteil an der Breite der Demo): das Bild skaliert als Ganzes; Schriften haben eine Untergrenze */
.site-demo { container-type: inline-size; width: 100%; max-width: 560px; justify-self: center; }
.sd-stage { --call-x: -9cqw; --call-s: 0.86; position: relative; aspect-ratio: 100 / 90; perspective: 1700px; perspective-origin: 50% 35%; }
.sd-tilt, .sd-stack, .sd-layer { transform-style: preserve-3d; }
.sd-tilt { position: absolute; inset: 0; }

/* Alle Lagen mit derselben Funktionsliste – so geht jeder Zustand direkt und weich in jeden anderen über */
.sd-stack {
  position: absolute;
  left: 10cqw;
  top: 12cqw;
  width: 80cqw;
  height: 60cqw;
  transform: translate(0, 8cqw) rotateX(57deg) rotateY(0deg) rotateZ(-36deg) scale(0.72);
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.site-demo.front .sd-stack { transform: translate(0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }
.site-demo.front.call .sd-stack { transform: translate(var(--call-x), -1cqw) rotateX(0deg) rotateY(9deg) rotateZ(0deg) scale(var(--call-s)); transition: transform 1.2s cubic-bezier(0.45, 0, 0.2, 1); }

/* Ebenen: zusammengesetzt fast deckungsgleich (winziger Abstand gegen Flimmern), auseinandergezogen 11cqw je Ebene */
.sd-layer { position: absolute; inset: 0; transform: translateZ(calc(var(--i) * 0.6px)); transition: transform 1.3s var(--ease-out-expo) calc(var(--i) * 0.1s); }
.site-demo.exploded .sd-layer { transform: translateZ(calc(var(--i) * 11cqw)); }
.site-demo.pre .sd-layer { transform: translateZ(calc(var(--i) * 11cqw + 40cqw)); }
/* Rückweg: erst drehen, dann auseinanderziehen – frontal würden sich die Ebenen nur übereinanderschieben */
.site-demo.back .sd-layer { transition-delay: calc(0.55s + var(--i) * 0.1s); }
/* Zusammenfügen: oben zuerst, ohne Überschwingen (sonst rutschen Ebenen durcheinander) */
.site-demo.collapse .sd-layer { transition: transform 0.95s cubic-bezier(0.7, 0, 0.25, 1) calc((4 - var(--i)) * 0.06s); }

/* Glasplatte je Ebene – nur auseinandergezogen */
.sd-layer::before {
  content: '';
  position: absolute;
  inset: -1.4cqw;
  border: 1px solid rgba(210, 255, 0, 0.42);
  border-radius: 3.6cqw;
  background: linear-gradient(135deg, rgba(210, 255, 0, 0.08), rgba(210, 255, 0, 0.015) 60%);
  transform: translateZ(-1px);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.site-demo.exploded .sd-layer::before { opacity: 1; transition: opacity 0.6s ease calc(0.15s + var(--i) * 0.1s); }

/* Beschriftung: dreht sich immer zum Betrachter (Gegendrehung zur Schräglage) */
.sd-label {
  position: absolute;
  left: -3.5cqw;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 1cqw;
  color: var(--c-accent);
  font: 600 max(1.75cqw, 9px) / 1 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform-origin: 100% 50%;
  transform: translate(-100%, -50%) rotateZ(36deg) rotateX(-57deg);
  transition: opacity 0.35s ease;
}
.sd-label::after { content: ''; width: 3cqw; height: 1px; background: currentColor; opacity: 0.6; }
.sd-label b { color: var(--c-text-muted); font-weight: 600; }
.site-demo.labels .sd-label { opacity: 1; transition: opacity 0.5s ease calc(0.45s + var(--i) * 0.09s); }
.site-demo.back.labels .sd-label { transition-delay: calc(1.15s + var(--i) * 0.09s); }

.sd-browser {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2.6cqw;
  background: #f4f4ed;
  transition: opacity 0.8s ease calc(var(--i) * 0.1s);
}
.site-demo.pre .sd-browser { opacity: 0; }
.l0 .sd-browser { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10cqw 18cqw -6cqw rgba(0, 0, 0, 0.75), 0 0 18cqw -2cqw var(--c-teal-glow); }
.site-demo.flash .l0 .sd-browser { animation: sdGlow 1.3s ease-out; }
@keyframes sdGlow { 25% { box-shadow: 0 0 0 1px rgba(210, 255, 0, 0.7), 0 10cqw 18cqw -6cqw rgba(0, 0, 0, 0.75), 0 0 14cqw 0 rgba(210, 255, 0, 0.35); } }

/* Jede weitere Ebene ist eine Kopie der ganzen Seite (legt das Skript an), von der nur ihr Teil sichtbar ist –
   so liegt alles deckungsgleich. Ohne Skript gibt es nur Ebene 1, und die zeigt die ganze Seite */
.layered .sd-layer:not(.l0) .sd-browser { overflow: visible; background: transparent; box-shadow: none; }
.layered .sd-layer:not(.l0) .sd-bar { visibility: hidden; }
.layered .sd-layer .sd-page * { visibility: hidden; }
.layered .l1 .sd-banner, .layered .l1 .sd-art, .layered .l1 .sd-art * { visibility: visible; }
.layered .l2 .sd-kicker, .layered .l2 .sd-h, .layered .l2 .sd-sub { visibility: visible; }
.layered .l3 .sd-nav, .layered .l3 .sd-nav *, .layered .l3 .sd-btns, .layered .l3 .sd-btns *, .layered .l3 .sd-card, .layered .l3 .sd-card * { visibility: visible; }
.layered .l4 .sd-wa, .layered .l4 .sd-wa *, .layered .l4 .sd-cursor, .layered .l4 .sd-cursor * { visibility: visible; }

/* Lichtstreif, wenn alles eingerastet ist */
.sd-sheen { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.5) 48%, rgba(210, 255, 0, 0.35) 50%, transparent 58%) 120% 0 / 250% 100% no-repeat; opacity: 0; }
.site-demo.flash .sd-sheen { opacity: 1; background-position: -20% 0; transition: background-position 1.1s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s; }

.sd-bar { display: flex; align-items: center; gap: 1.1cqw; height: 7cqw; padding: 0 2cqw; background: #e3e3d8; }
.sd-bar > i { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ff6b5e; }
.sd-bar > i:nth-child(2) { background: #ffbd2e; }
.sd-bar > i:nth-child(3) { background: #28c840; }
.sd-url {
  display: flex;
  align-items: center;
  gap: 1cqw;
  flex: 1;
  height: 4.4cqw;
  margin-left: 2cqw;
  padding: 0 2cqw;
  border-radius: 2.2cqw;
  background: #f4f4ed;
  color: #3a402e;
  font: 500 max(2.3cqw, 9px) / 1 var(--f-text);
  white-space: nowrap;
}
.sd-url svg { flex: none; width: 2.2cqw; height: 2.2cqw; fill: none; stroke: var(--c-teal); stroke-width: 2.4; }

/* Beispielseite: eine fiktive Tischlerei – Navigation, Bild-Banner mit Möbeln, Leistungen, WhatsApp-Knopf */
.sd-page { position: relative; height: calc(100% - 7cqw); padding: 2.2cqw 3cqw; color: #23271c; }
.sd-nav { display: flex; align-items: center; gap: 2cqw; height: 5cqw; }
.sd-logo { display: flex; align-items: center; gap: 0.9cqw; font: 800 max(2.4cqw, 9px) / 1 var(--f-display); letter-spacing: -0.02em; }
.sd-logo i { display: grid; place-items: center; flex: none; width: 2.6cqw; height: 2.6cqw; border-radius: 0.7cqw; background: var(--c-teal); color: #fff; font: 800 max(1.6cqw, 7px) / 1 var(--f-display); font-style: normal; }
.sd-links { display: flex; gap: 2.2cqw; margin-left: auto; font: 500 max(1.7cqw, 7px) / 1 var(--f-text); color: #5f6358; }
.sd-pill { padding: 0.9cqw 1.8cqw; border-radius: 2cqw; background: #23271c; color: #f4f4ed; font: 600 max(1.7cqw, 7px) / 1 var(--f-text); }

/* Banner: helle Holzwand mit Lamellen, Boden, Sideboard und Leuchte; links dunkel für den Text */
.sd-banner {
  position: relative;
  height: 31cqw;
  margin-top: 2cqw;
  overflow: hidden;
  border-radius: 1.8cqw;
  background:
    linear-gradient(90deg, rgba(20, 22, 16, 0.84) 0%, rgba(20, 22, 16, 0.55) 44%, rgba(20, 22, 16, 0) 74%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 0.5cqw, transparent 0.5cqw 2.6cqw),
    linear-gradient(180deg, #dcc6a3 0%, #c39d6d 72%, #7f6141 72.5%, #96734d 100%);
}
.sd-art { position: absolute; right: 0; bottom: 0; width: 72%; height: 100%; }
.sd-banner-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 60%; height: 100%; padding: 0 3.4cqw; color: #fff; }
.sd-kicker { font: 700 max(1.5cqw, 7px) / 1 var(--f-display); letter-spacing: 0.16em; text-transform: uppercase; color: #9fe3d8; }
.sd-h { margin-top: 1.2cqw; font: 800 max(4.2cqw, 13px) / 1.02 var(--f-display); letter-spacing: -0.03em; }
.sd-sub { margin-top: 1.2cqw; font: 400 max(1.7cqw, 7px) / 1.35 var(--f-text); color: rgba(255, 255, 255, 0.82); }
.sd-btns { display: flex; gap: 1.2cqw; margin-top: 2cqw; }
.sd-btn { position: relative; display: inline-block; padding: 1.2cqw 2.2cqw; border-radius: 2.4cqw; background: var(--c-teal); color: #fff; font: 700 max(1.8cqw, 7.5px) / 1 var(--f-display); white-space: nowrap; }
.sd-btn.ghost { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }

.sd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; margin-top: 2.4cqw; }
.sd-card { display: flex; align-items: center; gap: 1.2cqw; padding: 1.5cqw 1.6cqw; border-radius: 1.6cqw; background: #fff; box-shadow: 0 0.4cqw 1.6cqw rgba(35, 39, 28, 0.08); }
.sd-card svg { flex: none; width: max(3cqw, 12px); height: max(3cqw, 12px); fill: none; stroke: var(--c-teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-card b { font: 700 max(1.8cqw, 7.5px) / 1.1 var(--f-display); }

.sd-wa { position: absolute; right: 3cqw; bottom: 2cqw; z-index: 2; display: grid; place-items: center; width: max(5cqw, 20px); height: max(5cqw, 20px); border-radius: 50%; background: #25d366; box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.25); }
.sd-wa svg { width: 55%; height: 55%; fill: #fff; }

/* Besucher klickt „Anfrage senden“ (Ziel setzt das Skript in --cx/--cy); sobald das Handy kommt, verschwindet der Zeiger */
.sd-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: max(3cqw, 13px); opacity: 0; pointer-events: none; transform: translate(calc(var(--cx, 30cqw) + 18cqw), calc(var(--cy, 30cqw) + 12cqw)); transition: transform 1.1s var(--ease-out-expo), opacity 0.3s; filter: drop-shadow(0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.35)); }
.sd-cursor svg { display: block; width: 100%; height: auto; fill: #fff; stroke: #23271c; stroke-width: 1.5; stroke-linejoin: round; }
.site-demo.click .sd-cursor { opacity: 1; transform: translate(var(--cx, 30cqw), var(--cy, 30cqw)); }
.site-demo.call .sd-cursor { opacity: 0; transition: opacity 0.4s ease 0.5s; }
.sd-btn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.site-demo.click .sd-cta { animation: ctaPress 0.5s 0.95s both; }
.site-demo.click .sd-cta::after { animation: ctaRing 0.9s 1s ease-out both; }
@keyframes ctaPress { 40% { transform: scale(0.92); } 100% { transform: none; } }
@keyframes ctaRing { from { opacity: 1; box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.6); } to { opacity: 0; box-shadow: 0 0 0 3cqw rgba(42, 157, 143, 0); } }

/* Handy des Inhabers: fährt von rechts herein, die Seite weicht etwas zur Seite und dreht sich ihm zu */
.sd-phone {
  position: absolute;
  z-index: 5;
  right: 2cqw;
  top: 21cqw;
  width: 26cqw;
  height: 54cqw;
  padding: 1.1cqw;
  border-radius: 4.6cqw;
  background: linear-gradient(150deg, #4a4e41 0%, #1b1d16 45%, #2b2e25 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8cqw 14cqw -5cqw rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translate3d(18cqw, 5cqw, 0) rotateY(-32deg) rotateZ(7deg);
  transition: opacity 0.5s ease, transform 0.9s cubic-bezier(0.5, 0, 0.75, 0), box-shadow 0.6s ease;
}
.site-demo.call .sd-phone { opacity: 1; transform: rotateY(-12deg); transition: opacity 0.6s ease, transform 1.3s var(--ease-out-expo), box-shadow 0.6s ease; }
.site-demo.note .sd-phone { box-shadow: inset 0 0 0 1px rgba(210, 255, 0, 0.45), 0 0 11cqw -2cqw rgba(210, 255, 0, 0.38), 0 8cqw 14cqw -5cqw rgba(0, 0, 0, 0.85); animation: sdBuzz 0.55s 0.12s; }
@keyframes sdBuzz { 15%, 45%, 75% { rotate: -2.2deg; } 30%, 60%, 90% { rotate: 2.2deg; } }
.sd-lock {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 3.6cqw;
  color: #f4f4ed;
  background:
    radial-gradient(120% 70% at 25% 5%, #4b5a33 0%, rgba(75, 90, 51, 0) 60%),
    radial-gradient(90% 60% at 90% 100%, rgba(210, 255, 0, 0.22), rgba(210, 255, 0, 0) 60%),
    #15180f;
}
.sd-lock::before { content: ''; position: absolute; top: 1cqw; left: 50%; width: 6.6cqw; height: 1.8cqw; margin-left: -3.3cqw; border-radius: 1cqw; background: #000; }
.sd-status { display: flex; justify-content: flex-end; align-items: center; height: 3.8cqw; padding: 0 2.6cqw; }
.sd-status i { width: 2.6cqw; height: 1.2cqw; border: 1.5px solid currentColor; border-radius: 0.35cqw; opacity: 0.8; }
.sd-clock { margin-top: 3.2cqw; text-align: center; }
.sd-clock span { display: block; font: 500 max(1.35cqw, 7.5px) / 1 var(--f-text); opacity: 0.8; }
.sd-clock b { display: block; margin-top: 0.5cqw; font: 300 7.2cqw / 1 var(--f-display); letter-spacing: -0.03em; }
.sd-note {
  display: flex;
  gap: 1.1cqw;
  margin: 4cqw 1.2cqw 0;
  padding: 1.5cqw;
  border-radius: 2.2cqw;
  background: rgba(244, 244, 237, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(244, 244, 237, 0.12);
  opacity: 0;
  transform: translateY(-4cqw) scale(0.92);
  transition: opacity 0.3s ease, transform 0.5s ease;
}
.site-demo.note .sd-note { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.8s var(--ease-spring); }
.sd-note > i { display: grid; place-items: center; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; background: var(--c-accent); }
.sd-note > i svg { width: 60%; height: 60%; fill: none; stroke: #1a1d15; stroke-width: 2.4; }
.sd-note p { min-width: 0; font-size: max(1.3cqw, 7.5px); line-height: 1.35; }
.sd-note b { display: block; font: 700 max(1.55cqw, 8.5px) / 1.2 var(--f-display); }
.sd-note span { display: block; }
.sd-note small { display: block; margin-top: 0.3cqw; opacity: 0.65; font-size: max(1.15cqw, 7px); }

/* Schmale Bildschirme: Handy größer, die Seite weicht weiter aus */
@container (max-width: 440px) {
  .sd-stage { --call-x: -14cqw; --call-s: 0.74; }
  .sd-phone { right: 0; top: 18cqw; width: 33cqw; height: 66cqw; border-radius: 5.6cqw; }
  .sd-lock { border-radius: 4.4cqw; }
  .sd-clock b { font-size: 9cqw; }
}

/* ── Nachweis: Lighthouse-Werte dieser Website ──────── */
.scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2.5rem); max-width: 900px; }
.score { text-align: center; }
.score-ring { position: relative; width: clamp(96px, 11vw, 140px); aspect-ratio: 1; margin: 0 auto 1rem; }
.score-ring svg { position: relative; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
/* Lichthof hinter dem Ring: weicher box-shadow statt drop-shadow (der wurde am Rand des SVG hart abgeschnitten) */
.score-ring::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  box-shadow: 0 0 34px 8px rgba(210, 255, 0, 0.16), 0 0 70px 18px rgba(210, 255, 0, 0.06);
  opacity: 0;
  transition: opacity 1.4s var(--ease-smooth) 0.6s;
}
.scores.visible .score-ring::before { opacity: 1; animation: halo 4.5s ease-in-out 2s infinite; }
@keyframes halo { 50% { opacity: 0.55; } }
.score-ring circle { fill: none; stroke-width: 6; }
.score-ring .track { stroke: rgba(244, 244, 237, 0.08); }
.score-ring .bar {
  stroke: var(--c-accent);
  stroke-linecap: round;
  stroke-dasharray: 289.1;
  stroke-dashoffset: 289.1;
  transition: stroke-dashoffset 1.6s var(--ease-out-expo);
}
.scores.visible .bar { stroke-dashoffset: calc(289.1 * (1 - var(--v, 100) / 100)); }
.scores.visible .score:nth-child(2) .bar { transition-delay: 0.12s; }
.scores.visible .score:nth-child(3) .bar { transition-delay: 0.24s; }
.scores.visible .score:nth-child(4) .bar { transition-delay: 0.36s; }
.score-num { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(1.6rem, 2.6vw, 2.3rem) var(--f-display); }
.score h3 { font-size: var(--f-body); font-weight: 600; letter-spacing: 0; color: var(--c-text-muted); }
.scores-note { max-width: 760px; margin-top: 2.2rem; font-size: var(--f-small); color: var(--c-text-muted); }
.scores-note a { color: var(--c-accent); white-space: nowrap; }
.scores-note a:hover { text-decoration: underline; }

/* ── Problem ────────────────────────────────────────── */
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.stat-num { font-family: var(--f-display); font-size: clamp(5rem, 13vw, 11rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.05em; color: var(--c-accent); }
.stat-text { max-width: 560px; font-size: var(--f-body-lg); }
.stat-text small { display: block; margin-top: 0.8rem; font-size: var(--f-small); color: var(--c-text-muted); }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pain { padding: 1.8rem; border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--r-md); background: rgba(49, 54, 39, 0.5); }
.pain h3 { font-size: var(--f-h3); margin-bottom: 0.6rem; }
.pain p { color: var(--c-text-muted); }

/* Kleine Illustrationen über den Problem-Karten. Grundzustand = Endbild (ohne Bewegung oder JavaScript),
   die Schleifen laufen erst, wenn die Karte sichtbar ist */
.pain-ill { position: relative; height: 140px; margin-bottom: 1.4rem; padding: 12px; overflow: hidden; border: 1px solid var(--c-border); border-radius: 12px; background: rgba(26, 29, 21, 0.6); font-size: 0.78rem; line-height: 1.2; }

/* 1 · Google-Suche: Mitbewerber erscheinen, „Ihr Betrieb“ fehlt */
.pi-q { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 99px; background: rgba(244, 244, 237, 0.08); }
.pi-q svg { flex: none; width: 13px; height: 13px; fill: none; stroke: var(--c-text-muted); stroke-width: 2.4; }
.pi-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 5px 10px; border-radius: 8px; background: rgba(244, 244, 237, 0.05); }
.pi-row i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); }
.pi-row b { font-weight: 600; color: var(--c-text-muted); }
.pi-you { border: 1px dashed rgba(244, 244, 237, 0.22); background: none; }
.pi-you i { background: none; box-shadow: inset 0 0 0 1.5px rgba(244, 244, 237, 0.4); }
.pi-you b { color: rgba(244, 244, 237, 0.4); }
.pi-you em { margin-left: auto; padding: 2px 7px; border-radius: 99px; background: rgba(255, 107, 94, 0.16); color: #ff8a7e; font-size: 0.7rem; font-style: normal; font-weight: 600; white-space: nowrap; }
.pain.visible .pi-q span { animation: piType 7s infinite; }
.pain.visible .pi-row { animation: piRow 7s var(--ease-out-expo) infinite; animation-delay: calc(var(--d, 0) * 0.35s); }
.pain.visible .pi-you { animation-name: piYou; animation-delay: 0s; }
.pain.visible .pi-you em { animation: piMiss 7s infinite; }
@keyframes piType { 0% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(22); } 18%, 100% { clip-path: inset(0); } }
@keyframes piRow { 0%, 20% { opacity: 0; transform: translateY(6px); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes piYou { 0%, 40% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes piMiss {
  0%, 54% { opacity: 0; transform: scale(0.6); }
  59% { opacity: 1; transform: scale(1.12); }
  62%, 65% { transform: translateX(-3px); }
  63.5%, 66.5% { transform: translateX(3px); }
  68%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* 2 · Handy: Seite lädt und lädt, Schrift winzig, Bild ragt heraus – der Besucher geht zurück zu Google */
.pain-ill-phone { display: flex; align-items: center; gap: 14px; }
.pi-phone { position: relative; flex: none; width: 64px; height: 114px; padding: 10px 6px 6px; overflow: hidden; border: 2px solid rgba(244, 244, 237, 0.25); border-radius: 13px; }
.pi-load { position: absolute; left: 0; top: 0; width: 65%; height: 3px; background: var(--c-accent); }
.pi-tiny span { display: block; height: 2px; margin-top: 4px; border-radius: 2px; background: rgba(244, 244, 237, 0.3); }
.pi-tiny span.short { width: 55%; }
.pi-tiny i { display: block; width: 130%; height: 26px; margin-top: 6px; border-radius: 3px; background: linear-gradient(135deg, #8fa35a, #2a9d8f); }
.pi-spin { position: absolute; left: 50%; bottom: 12px; width: 16px; height: 16px; margin-left: -8px; border: 2px solid rgba(244, 244, 237, 0.2); border-top-color: var(--c-accent); border-radius: 50%; }
.pi-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pi-chip { padding: 4px 9px; border-radius: 99px; background: rgba(244, 244, 237, 0.07); color: var(--c-text-muted); white-space: nowrap; }
.pi-back { background: rgba(255, 107, 94, 0.16); color: #ff8a7e; font-weight: 600; }
.pain.visible .pi-load { animation: piLoad 8s infinite; }
.pain.visible .pi-spin { animation: piSpin 0.9s linear infinite; }
.pain.visible .pi-tiny { animation: piLeave 8s infinite; }
.pain.visible .pi-chip { animation: piChip 8s var(--ease-out-expo) infinite; animation-delay: calc(var(--d, 0) * 1.4s); }
@keyframes piLoad { 0% { width: 0; } 40%, 100% { width: 65%; } }
@keyframes piSpin { to { transform: rotate(360deg); } }
@keyframes piLeave { 0%, 66% { opacity: 1; transform: none; } 74%, 92% { opacity: 0.25; transform: translateX(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes piChip { 0%, 12% { opacity: 0; transform: translateX(10px); } 20%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 3 · Zahlen: Besucher steigen, Anfragen bleiben bei 0 */
.pain-ill-stats { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.pi-stat { display: grid; grid-template-columns: 64px minmax(0, 1fr) 22px; align-items: center; gap: 10px; }
.pi-label { color: var(--c-text-muted); }
.pi-stat svg { width: 100%; height: 34px; overflow: visible; }
.pi-stat path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 400; } /* px: mit non-scaling-stroke zählt der Strich in Bildschirmpixeln */
.pi-spark path { stroke: var(--c-accent); }
.pi-flat path { stroke: rgba(244, 244, 237, 0.35); }
.pi-stat b { font: 800 1rem var(--f-display); text-align: center; }
.pi-up { color: var(--c-accent); }
.pi-zero { color: #ff8a7e; }
.pain.visible .pi-stat path { animation: piDraw 7s var(--ease-out-expo) infinite; }
.pain.visible .pi-up { animation: piFade 7s infinite; }
.pain.visible .pi-zero { animation: piZero 7s infinite; }
@keyframes piDraw { 0%, 6% { stroke-dashoffset: 400; } 45%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes piFade { 0%, 40% { opacity: 0; transform: translateY(4px); } 48%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes piZero { 0%, 46% { opacity: 0.4; transform: none; } 52% { opacity: 1; transform: scale(1.35); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0.4; } }

/* ── Leistungsumfang ────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.feature {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-elevated);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow 0.7s var(--ease-smooth);
}
.feature::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(210, 255, 0, 0.09), transparent 45%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-smooth);
}
/* Lichtrand: 1 px breiter Ring (Maske), hell dort, wo die Maus ist */
.feature::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(210, 255, 0, 0.6), rgba(210, 255, 0, 0.12) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease-smooth);
}
/* Schatten aus mehreren hellen Lagen: wird nach außen gleichmäßig weicher, keine harte dunkle Kante am Rand */
.feature { box-shadow: 0 2px 4px rgba(0, 0, 0, 0), 0 10px 20px -6px rgba(0, 0, 0, 0), 0 26px 50px -14px rgba(0, 0, 0, 0), 0 50px 90px -30px rgba(0, 0, 0, 0); }
.feature:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 10px 20px -6px rgba(0, 0, 0, 0.1), 0 26px 50px -14px rgba(0, 0, 0, 0.16), 0 50px 90px -30px rgba(0, 0, 0, 0.22); }
.feature:hover::before, .feature:hover::after { opacity: 1; }
.feature-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.4rem; border-radius: 14px; background: rgba(210, 255, 0, 0.08); }
.feature-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--c-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { font-size: var(--f-h3); margin-bottom: 0.6rem; }
.feature p { color: var(--c-text-muted); }

/* ── Ablauf ─────────────────────────────────────────── */
.steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
/* Verbindung von Kreis zu Kreis: graue Spur, darüber läuft die farbige Linie Abschnitt für Abschnitt (1 → 2 → 3 → 4).
   Jeder Abschnitt beginnt und endet 8 px vor dem Kreisrand – nie über den Ziffern, nie hinter dem letzten Kreis */
.steps { --dir: 90deg; }
.step:not(:last-child)::before, .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 27px;
  left: 64px;
  width: calc(100% + 1.5rem - 72px);
  height: 2px;
  border-radius: 2px;
}
.step::before { background: var(--c-border); }
.step::after { transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-smooth); }
.step:nth-child(1)::after { background: linear-gradient(var(--dir), #d2ff00, #9ade30); }
.step:nth-child(2)::after { background: linear-gradient(var(--dir), #9ade30, #62be5f); }
.step:nth-child(3)::after { background: linear-gradient(var(--dir), #62be5f, #2a9d8f); }
.steps.visible .step::after { transform: scaleX(1); }
.steps.visible .step:nth-child(1)::after { transition-delay: 0.3s; }
.steps.visible .step:nth-child(2)::after { transition-delay: 0.9s; }
.steps.visible .step:nth-child(3)::after { transition-delay: 1.5s; }
.step { position: relative; }
.step-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.4rem;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-bg);
  font: 800 1.3rem var(--f-display);
  color: var(--c-accent);
  position: relative;
  z-index: 1;
}
.step h3 { font-size: var(--f-h3); margin-bottom: 0.5rem; }
.step p { color: var(--c-text-muted); }

/* ── Preis ──────────────────────────────────────────── */
.price-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border-radius: 28px;
  background: var(--c-bg-elevated);
  isolation: isolate;
}
/* Leuchtender, umlaufender Rand */
.price-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 29px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0 55%, var(--c-accent) 70%, var(--c-teal) 85%, transparent 100%);
  animation: spin 7s linear infinite;
}
.price-card::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: 27px; background: var(--c-bg-elevated); }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --angle: 360deg; } }
.price-main { padding: clamp(2rem, 4vw, 3.2rem); border-right: 1px solid var(--c-border); }
.price-row + .price-row { margin-top: 1.8rem; }
.price-label { font-size: var(--f-small); color: var(--c-text-muted); }
.price-value { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; }
.price-value small { font-size: 0.4em; font-weight: 700; color: var(--c-text-muted); letter-spacing: 0; }
.price-tax { margin-top: 1.8rem; font-size: var(--f-small); color: var(--c-text-muted); }
.price-main .btn-primary { margin-top: 2rem; }
.price-incl { padding: clamp(2rem, 4vw, 3.2rem); }
.price-incl h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.price-incl h3:not(:first-child) { margin-top: 1.8rem; }
.checks li { list-style: none; display: flex; gap: 0.75rem; padding: 0.35rem 0; }
.checks svg { flex: none; width: 20px; height: 20px; margin-top: 0.2rem; fill: none; stroke: var(--c-accent); stroke-width: 2.4; }
.checks.muted svg { stroke: var(--c-teal); }

/* ── Datenschutz-Paket ──────────────────────────────── */
.dpack {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border: 1px solid var(--c-border);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.09), rgba(49, 54, 39, 0.6) 60%);
}
.dpack h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.dpack-sub { max-width: 560px; margin-top: 0.7rem; color: var(--c-text-muted); }
.dpack-list { list-style: none; margin-top: 1.8rem; }
.dpack-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid var(--c-border);
}
.dpack-list li:last-child { border-bottom: 1px solid var(--c-border); }
/* Mini-Dokument als Symbol: Papier mit Eselsohr, farbiger Streifen wie das Blatt in der Mappe */
.dpack-file { position: relative; width: 44px; height: 54px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.45)); transition: transform 0.45s var(--ease-spring); }
.dpack-file i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  border-radius: 5px;
  background: linear-gradient(165deg, #fbfbf6 0%, #e4e5da 100%);
  clip-path: polygon(0 0, 70% 0, 100% 21%, 100% 100%, 0 100%);
  font: normal 900 0.68rem var(--f-display);
  letter-spacing: 0.06em;
  color: var(--c-bg-deep);
}
.dpack-file i::before { content: ''; position: absolute; left: 7px; right: 12px; top: 10px; height: 4px; border-radius: 2px; background: var(--band); box-shadow: 0 7px 0 -0.5px #cfd0c3, 0 13px 0 -0.5px #cfd0c3; }
.dpack-file::after { content: ''; position: absolute; top: 0; right: 0; width: 30%; height: 21%; border-bottom-left-radius: 4px; background: linear-gradient(225deg, transparent 50%, #b6b8a8 50%); }
.dpack-list li:hover .dpack-file { transform: translateY(-4px); }
.dpack-list b { display: block; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.3; }
.dpack-list span { display: block; margin-top: 0.15rem; font-size: 0.9rem; line-height: 1.45; color: var(--c-text-muted); }
/* Häkchen „zeichnen“ sich nacheinander */
.dpack-tick { width: 24px; height: 24px; fill: none; stroke: var(--c-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--ease-out-expo); }
.dpack.visible .dpack-tick { stroke-dashoffset: 0; }
.dpack.visible li:nth-child(1) .dpack-tick { transition-delay: 0.5s; }
.dpack.visible li:nth-child(2) .dpack-tick { transition-delay: 0.9s; }
.dpack.visible li:nth-child(3) .dpack-tick { transition-delay: 1.3s; }
.dpack-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }

/* Mappe mit drei Unterlagen. Ablauf beim Einblenden: AVV, TOM, SUB gleiten heraus (gleichzeitig mit den Häkchen),
   dann Stempel „EU“, Unterschrift und ein Glanz über die Mappe. Maus: nur die Blätter fächern auf, die Mappe selbst neigt sich nicht (Wunsch des Inhabers) */
.dpack-visual { display: flex; justify-content: center; height: 370px; }
.dpack-stage { position: relative; width: 300px; height: 370px; }
.folder { position: absolute; inset: 0; }
.folder-back, .folder-front { position: absolute; left: 10px; width: 280px; border-radius: 16px; }
.folder-back { bottom: 0; height: 205px; background: linear-gradient(180deg, #46503a, #343b29); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.8); }
.folder-back::before { content: ''; position: absolute; top: -18px; left: 0; width: 110px; height: 30px; border-radius: 12px 12px 0 0; background: #46503a; }
.folder-front {
  bottom: 0;
  height: 150px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, #5a6542 0%, #3a4229 55%, #2e3421 100%);
  box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.6);
}
.folder-front::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(244, 244, 237, 0.16); border-radius: 10px; } /* Naht */
.folder-front::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent); transform: skewX(-18deg); }
.dpack.visible .folder-front::after { animation: shine 1.3s var(--ease-smooth) 2.4s both; }
@keyframes shine { to { left: 130%; } }
.folder-label { position: absolute; left: 26px; top: 30px; font: 800 0.72rem var(--f-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); }
.folder-brand { position: absolute; right: 24px; bottom: 22px; font: 900 1.05rem var(--f-display); letter-spacing: 0.08em; color: rgba(244, 244, 237, 0.75); }
.folder-brand i, .doc-head i { font-style: normal; color: var(--c-accent); }

.doc {
  position: absolute;
  left: 50px;
  bottom: 26px;
  width: 200px;
  height: 250px;
  padding: 16px 18px;
  border-radius: 10px;
  background: linear-gradient(170deg, #fbfbf6 0%, #ecede3 100%);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
  color: var(--c-bg-deep);
  transform: translateY(110px);
  transition: transform 1s var(--ease-out-expo);
}
.doc::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 10px 10px 0 0; background: var(--band); }
.doc-head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font: 800 0.6rem var(--f-display); letter-spacing: 0.12em; color: #5b604f; }
.doc-head i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--c-bg-deep); font-size: 0.62rem; }
.doc b { display: block; font: 900 1.9rem/1 var(--f-display); letter-spacing: -0.03em; }
.doc small { display: block; margin: 4px 0 12px; font-size: 0.72rem; color: #5b604f; }
.doc span { display: block; height: 6px; margin: 9px 0; border-radius: 3px; background: #d8d9ce; }
.doc span.short { width: 58%; }
.dpack.visible .doc-avv { transform: translate(0, -58px) rotate(-1deg); transition-delay: 0.5s; }
.dpack.visible .doc-tom { transform: translate(44px, -14px) rotate(8deg); transition-delay: 0.9s; }
.dpack.visible .doc-sub { transform: translate(-46px, -6px) rotate(-10deg); transition-delay: 1.3s; }
/* Nach dem Auftritt (Klasse settled, ~3 s): keine Verzögerungen mehr, beim Überfahren fächern die Blätter auf */
.dpack.settled .doc { transition-delay: 0s; transition-duration: 0.6s; }
.dpack.settled.fan .doc-avv { transform: translate(0, -74px) rotate(0deg); }
.dpack.settled.fan .doc-tom { transform: translate(70px, -26px) rotate(14deg); }
.dpack.settled.fan .doc-sub { transform: translate(-72px, -18px) rotate(-16deg); }
.sign { display: block; width: 96px; height: 26px; margin-top: 4px; fill: none; stroke: #1f3b6e; stroke-width: 2; stroke-linecap: round; } /* im sichtbaren oberen Teil des Blatts */
.sign path { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1s var(--ease-smooth) 2.3s; }
.dpack.visible .sign path { stroke-dashoffset: 0; }
.stamp {
  position: absolute;
  right: 14px;
  top: 62px;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 3px double var(--c-teal);
  border-radius: 50%;
  font: normal 900 1rem var(--f-display);
  color: var(--c-teal);
  opacity: 0;
  transform: rotate(-14deg) scale(1.8);
  transition: transform 0.4s var(--ease-spring) 1.9s, opacity 0.2s 1.9s;
}
.dpack.visible .stamp { opacity: 0.9; transform: rotate(-14deg) scale(1); }
.dpack-facts { display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; margin-top: 1.6rem; list-style: none; font-size: var(--f-small); color: var(--c-text-muted); }
.dpack-facts li { display: flex; align-items: center; gap: 0.6rem; }
.dpack-facts li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-teal); box-shadow: 0 0 0 4px rgba(42, 157, 143, 0.15); }

/* ── FAQ ────────────────────────────────────────────── */
.faq { max-width: 900px; }
.faq details { border-bottom: 1px solid var(--c-border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  list-style: none;
  cursor: pointer;
  font: 700 clamp(1.05rem, 1.5vw, 1.3rem) / 1.3 var(--f-display);
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--c-accent); }
.faq summary i { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--c-border-hover); border-radius: 50%; transition: transform 0.4s var(--ease-out-expo), background 0.3s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; background: var(--c-accent); }
.faq summary i::after { transform: rotate(90deg); transition: transform 0.4s var(--ease-out-expo); }
.faq details[open] summary i { background: rgba(210, 255, 0, 0.1); transform: rotate(180deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq-body { overflow: hidden; }
.faq-body p { max-width: 760px; padding-bottom: 1.6rem; color: var(--c-text-muted); }

/* ── Passt dazu ─────────────────────────────────────── */
.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.related a {
  display: block;
  padding: 2rem 2.2rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg-elevated);
  transition: border-color 0.3s, transform 0.4s var(--ease-out-expo);
}
.related a:hover { border-color: var(--c-border-hover); transform: translateY(-4px); }
.related small { display: block; margin-bottom: 0.6rem; font: 700 var(--f-eyebrow) var(--f-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-teal); }
.related h3 { display: flex; justify-content: space-between; gap: 1rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.related h3 .arrow { color: var(--c-accent); }
.related p { margin-top: 0.6rem; color: var(--c-text-muted); }

/* ── Abschluss ──────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 900px; margin: 0 auto; font-size: clamp(2.2rem, 5vw, 4.4rem); }
.cta-band h2 em { font-style: normal; color: var(--c-accent); }
.cta-band p { margin: 1.4rem auto 0; max-width: 560px; color: var(--c-text-muted); font-size: var(--f-body-lg); }
.cta-band .hero-ctas { justify-content: center; }
.btn-wa { background: #25d366; color: #0b141a; }
.btn-wa:hover { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.3); }

/* ── Footer ─────────────────────────────────────────── */
footer { position: relative; z-index: 1; padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--c-border); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: var(--f-small); color: var(--c-text-muted); }
.footer-nav a:hover, .footer-legal a:hover { color: var(--c-accent); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--c-border); font-size: 0.8rem; color: #939487; }
.footer-legal { display: flex; gap: 1.5rem; }

/* ── Einblenden beim Scrollen ───────────────────────── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--t-slow) var(--ease-out-expo), transform var(--t-slow) var(--ease-out-expo); }
.reveal.visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }

/* Entwurfs-Markierung (verschwindet mit den abgestimmten Texten) */
.draft {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1001;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-full);
  background: #ff9f43;
  color: #1a1d15;
  font: 700 0.75rem var(--f-display);
  letter-spacing: 0.05em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Anpassung an kleinere Bildschirme ──────────────── */
/* ── KI-Automatisierung ─────────────────────────────── */
/* Längere Überschrift („automatisieren“) – etwas kleiner, damit sie auch neben der Demo in eine Zeile passt */
.hero h1.h1-long { font-size: clamp(2.2rem, 4.4vw, 4.4rem); }

/* Ablauf-Demo im Hero: Eingang → die KI liest die Angaben aus → drei Ergebnisse, verbunden wie in einem Ablauf-Editor.
   Eine Rechnung, einmal abgespielt. Schritte als Klassen aus leistung.js (in, w1, read, w2, out, done, idle);
   alle Maße in cqw, die Leitungen liegen in einem SVG mit denselben Koordinaten (Breite 100, Höhe 92) */
.flow-demo { container-type: inline-size; width: 100%; max-width: 540px; justify-self: center; }
.fd-stage { position: relative; aspect-ratio: 100 / 92; }
.fd-stage > :not(svg) { position: absolute; }
/* Punktraster wie auf der Arbeitsfläche eines Ablauf-Editors, zum Rand hin ausgeblendet */
.fd-stage::before { content: ''; position: absolute; inset: -4cqw; background: radial-gradient(rgba(244, 244, 237, 0.09) 1px, transparent 1.3px) 0 0 / 4cqw 4cqw; -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); pointer-events: none; }
/* Lichtkegel: dieselben Rasterpunkte in Lindgrün, nur rund um den Mauszeiger sichtbar (Lage setzt leistung.js) */
.fd-glow {
  position: absolute;
  inset: -4cqw;
  background: radial-gradient(rgba(210, 255, 0, 0.6) 1px, transparent 1.4px) 0 0 / 4cqw 4cqw;
  -webkit-mask-image: radial-gradient(16cqw circle at var(--mx, 50%) var(--my, 50%), #000, transparent 75%);
  mask-image: radial-gradient(16cqw circle at var(--mx, 50%) var(--my, 50%), #000, transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.fd-stage:hover .fd-glow { opacity: 1; }

.fd-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.fd-wire .line { stroke: rgba(244, 244, 237, 0.14); stroke-width: 0.35; stroke-linecap: round; transition: stroke 0.5s ease 0.45s; }
.fd-wire .pulse { stroke: var(--c-accent); stroke-width: 0.75; stroke-linecap: round; stroke-dasharray: 16 120; stroke-dashoffset: 16; opacity: 0; }
.flow-demo.w1 .w-in .line, .flow-demo.w2 .w-o1 .line, .flow-demo.w2 .w-o2 .line, .flow-demo.w2 .w-o3 .line { stroke: rgba(210, 255, 0, 0.4); }
.flow-demo.w1 .w-in .pulse { animation: fdPulse 0.8s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
.flow-demo.w2 .w-o1 .pulse, .flow-demo.w2 .w-o2 .pulse, .flow-demo.w2 .w-o3 .pulse { animation: fdPulse 0.75s cubic-bezier(0.45, 0, 0.25, 1) forwards; }
.flow-demo.w2 .w-o2 .pulse { animation-delay: 0.06s; }
.flow-demo.w2 .w-o3 .pulse { animation-delay: 0.12s; }
@keyframes fdPulse { 0% { stroke-dashoffset: 16; opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.fd-ports circle { fill: #3a402e; stroke: rgba(244, 244, 237, 0.35); stroke-width: 0.25; }

.fd-in, .fd-core, .fd-out {
  border: 1px solid rgba(244, 244, 237, 0.1);
  border-radius: 2.4cqw;
  background: linear-gradient(160deg, rgba(58, 64, 46, 0.94), rgba(35, 39, 28, 0.94));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2cqw 4cqw -1cqw rgba(0, 0, 0, 0.12), 0 5cqw 10cqw -3cqw rgba(0, 0, 0, 0.2);
}
.fd-ico { display: grid; place-items: center; flex: none; width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; background: rgba(210, 255, 0, 0.14); }
.fd-ico svg { width: 58%; height: 58%; fill: none; stroke: var(--c-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Eingang: gleitet herein; beim Lesen zieht ein Lichtstreif über die Nachricht */
.fd-in { left: 0; top: 2cqw; width: 58cqw; height: 20cqw; padding: 2.2cqw; overflow: hidden; opacity: 0; transform: translateX(-6cqw); transition: opacity 0.5s ease, transform 0.9s var(--ease-out-expo); }
.flow-demo.in .fd-in { opacity: 1; transform: none; }
.fd-head { display: flex; align-items: center; gap: 1.6cqw; }
.fd-head b { display: block; font: 700 max(2.6cqw, 10.5px) / 1.15 var(--f-display); }
.fd-head small { display: block; margin-top: 0.4cqw; color: var(--c-text-muted); font-size: max(1.8cqw, 8.5px); }
.fd-text { margin-top: 1.4cqw; color: rgba(244, 244, 237, 0.88); font-size: max(2.1cqw, 9px); line-height: 1.4; }
.fd-in::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(210, 255, 0, 0.16) 50%, transparent 65%) 130% 0 / 250% 100% no-repeat; opacity: 0; }
.flow-demo.read .fd-in::after { animation: fdScan 1.2s ease-in-out; }
@keyframes fdScan { from { opacity: 1; background-position: 130% 0; } to { opacity: 1; background-position: -30% 0; } }

/* KI-Knoten: während des Lesens läuft ein Lichtpunkt um den Rand, die erkannten Angaben springen als Chips heraus */
@property --fd-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fd-core { left: 11cqw; top: 31cqw; width: 78cqw; height: 17cqw; padding: 2cqw 2.4cqw; opacity: 0; transform: scale(0.96); transition: opacity 0.6s ease 0.15s, transform 0.8s var(--ease-out-expo) 0.15s; }
.flow-demo.in .fd-core { opacity: 0.55; transform: none; }
.flow-demo.read .fd-core { opacity: 1; }
.fd-core::before {
  content: '';
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--fd-a), transparent 0 55%, var(--c-accent) 75%, transparent 92%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.flow-demo.read .fd-core::before { opacity: 1; animation: fdSpin 1.6s linear infinite; }
.flow-demo.out .fd-core::before { opacity: 0; }
@keyframes fdSpin { to { --fd-a: 360deg; } }
.fd-core-head { display: flex; align-items: center; gap: 1.4cqw; }
.fd-spark { display: grid; place-items: center; flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--c-accent); }
.fd-spark svg { width: 64%; height: 64%; fill: #1a1d15; }
.flow-demo.read:not(.out) .fd-spark { animation: fdBreath 1.2s ease-in-out infinite; }
@keyframes fdBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(210, 255, 0, 0.5); } 50% { box-shadow: 0 0 0 1.2cqw rgba(210, 255, 0, 0); transform: scale(1.06); } }
.fd-core-head b { font: 700 max(2.3cqw, 10px) / 1 var(--f-display); white-space: nowrap; }
.fd-scan { position: relative; flex: 1; height: 0.5cqw; min-height: 2px; margin-left: 1cqw; overflow: hidden; border-radius: 1cqw; background: rgba(244, 244, 237, 0.08); }
.fd-scan::after { content: ''; position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); transform: translateX(-100%); }
.flow-demo.read:not(.out) .fd-scan::after { animation: fdBar 1.1s ease-in-out infinite; }
@keyframes fdBar { to { transform: translateX(340%); } }
.fd-chips { display: flex; gap: 1.2cqw; margin-top: 2.2cqw; }
.fd-chip { padding: 1cqw 1.8cqw; border: 1px solid rgba(210, 255, 0, 0.35); border-radius: 3cqw; background: rgba(210, 255, 0, 0.1); color: var(--c-accent); font: 600 max(1.9cqw, 8.5px) / 1 var(--f-text); white-space: nowrap; opacity: 0; transform: translateY(1.2cqw) scale(0.9); transition: opacity 0.4s ease, transform 0.6s var(--ease-spring); }
.flow-demo.read .fd-chip { opacity: 1; transform: none; transition-delay: calc(0.35s + var(--k) * 0.22s); }

/* Ergebnisse: warten gedimmt, leuchten auf, wenn die Daten ankommen, und bekommen ein Häkchen */
.fd-out { top: 60cqw; width: 31cqw; height: 16cqw; padding: 2cqw; opacity: 0; transform: translateY(3cqw); transition: opacity 0.5s ease, transform 0.8s var(--ease-out-expo), border-color 0.4s ease, box-shadow 0.4s ease; }
.fd-out.o1 { left: 0; }
.fd-out.o2 { left: 34.5cqw; }
.fd-out.o3 { left: 69cqw; }
.flow-demo.in .fd-out { opacity: 0.5; transform: none; transition-delay: calc(0.25s + var(--k) * 0.08s); }
.flow-demo.out .fd-out { opacity: 1; border-color: rgba(210, 255, 0, 0.4); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 2cqw 4cqw -1cqw rgba(0, 0, 0, 0.12), 0 5cqw 10cqw -3cqw rgba(0, 0, 0, 0.2), 0 0 6cqw -1cqw rgba(210, 255, 0, 0.22); transition-delay: calc(var(--k) * 0.12s); }
.fd-out-head { display: flex; align-items: center; gap: 1.2cqw; }
.fd-out .fd-ico { width: 4.6cqw; height: 4.6cqw; background: rgba(42, 157, 143, 0.22); }
.fd-out .fd-ico svg { stroke: #7fd6cb; }
.fd-out small { overflow: hidden; color: var(--c-text-muted); font-size: max(1.6cqw, 8px); font-weight: 600; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.fd-out b { display: block; margin-top: 1.6cqw; overflow: hidden; font: 700 max(2.2cqw, 10px) / 1.2 var(--f-display); text-overflow: ellipsis; white-space: nowrap; opacity: 0; transform: translateY(1cqw); transition: opacity 0.4s ease, transform 0.6s var(--ease-out-expo); }
.flow-demo.out .fd-out b { opacity: 1; transform: none; transition-delay: calc(0.15s + var(--k) * 0.12s); }
.fd-ok { position: absolute; top: -1.6cqw; right: -1.6cqw; display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 0.6cqw var(--c-bg); opacity: 0; transform: scale(0.3); transition: opacity 0.3s ease, transform 0.5s var(--ease-spring); }
.fd-ok svg { width: 60%; height: 60%; fill: none; stroke: #1a1d15; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.flow-demo.out .fd-ok { opacity: 1; transform: none; transition-delay: calc(0.3s + var(--k) * 0.12s); }

.fd-done { left: 0; right: 0; top: 82cqw; display: flex; align-items: center; gap: 1.2cqw; width: fit-content; margin: 0 auto; padding: 1.4cqw 2.6cqw 1.4cqw 1.8cqw; border-radius: 4cqw; background: var(--c-accent); color: #1a1d15; font: 700 max(2.1cqw, 10px) / 1 var(--f-display); white-space: nowrap; box-shadow: 0 0 8cqw -1cqw rgba(210, 255, 0, 0.45); opacity: 0; transform: translateY(2cqw) scale(0.94); transition: opacity 0.4s ease, transform 0.7s var(--ease-spring); }
.fd-done svg { width: max(2.8cqw, 12px); height: max(2.8cqw, 12px); fill: none; stroke: #1a1d15; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.flow-demo.done .fd-done { opacity: 1; transform: none; }

/* Endbild: in Ruhe fließen weiter Impulse – erst zum KI-Knoten, dann weiter zu den drei Ergebnissen */
.flow-demo.idle .fd-wire .pulse { animation: fdFlow 3.2s infinite; }
.flow-demo.idle .w-o1 .pulse { animation-delay: 1.35s; }
.flow-demo.idle .w-o2 .pulse { animation-delay: 1.42s; }
.flow-demo.idle .w-o3 .pulse { animation-delay: 1.49s; }
@keyframes fdFlow {
  0% { stroke-dashoffset: 16; opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  5% { opacity: 1; }
  40% { stroke-dashoffset: -100; opacity: 1; }
  43%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
.flow-demo.idle .fd-spark { animation: fdBreath 3.2s ease-in-out infinite; }
/* Unter der Maus: der Knoten hebt sich, seine Leitungen leuchten auf; der KI-Knoten liest erneut, das Häkchen springt */
.flow-demo.idle .fd-in, .flow-demo.idle .fd-core, .flow-demo.idle .fd-out { transition: opacity 0.5s ease, transform 0.6s var(--ease-out-expo), border-color 0.5s ease, box-shadow 0.6s ease; }
.flow-demo.idle .fd-wire .line { transition: stroke 0.45s ease; }
.flow-demo.idle .fd-wire .pulse { transition: stroke-width 0.45s ease; }
@media (hover: hover) {
  .flow-demo.idle .fd-in:hover, .flow-demo.idle .fd-core:hover, .flow-demo.idle .fd-out:hover {
    border-color: rgba(210, 255, 0, 0.6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 10px 22px -6px rgba(0, 0, 0, 0.12), 0 28px 56px -16px rgba(0, 0, 0, 0.2), 0 0 7cqw -1cqw rgba(210, 255, 0, 0.3);
    transform: translateY(-0.9cqw);
  }
  .flow-demo.idle:has(.fd-in:hover) .w-in .line, .flow-demo.idle:has(.fd-core:hover) .fd-wire .line,
  .flow-demo.idle:has(.o1:hover) .w-o1 .line, .flow-demo.idle:has(.o2:hover) .w-o2 .line, .flow-demo.idle:has(.o3:hover) .w-o3 .line { stroke: rgba(210, 255, 0, 0.9); }
  .flow-demo.idle:has(.fd-in:hover) .w-in .pulse, .flow-demo.idle:has(.fd-core:hover) .fd-wire .pulse,
  .flow-demo.idle:has(.o1:hover) .w-o1 .pulse, .flow-demo.idle:has(.o2:hover) .w-o2 .pulse, .flow-demo.idle:has(.o3:hover) .w-o3 .pulse { stroke-width: 1.2; }
  .flow-demo.idle .fd-in:hover::after { animation: fdScan 1.2s ease-in-out; }
  .flow-demo.idle .fd-core:hover::before { opacity: 1; animation: fdSpin 1.6s linear infinite; }
  .flow-demo.idle .fd-out:hover .fd-ok { animation: fdPop 0.55s var(--ease-spring); }
}
@keyframes fdPop { 0% { transform: scale(0.5); } 100% { transform: none; } }

/* Problem der Automatisierungsseite: Durcheinander im Büro. Links drei Zeilen, rechts schweben Belege, Nachrichten und
   Tabellen in drei Tiefen (--z), bewegen sich leicht mit der Maus; die aktive Zeile hebt ihre Gruppe hervor (data-focus) */
.chaos { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "head stage" "list stage"; column-gap: clamp(2rem, 4vw, 4.5rem); align-items: end; }
.chaos .section-head { grid-area: head; margin-bottom: 1.8rem; }
.chaos-pains { grid-area: list; align-self: start; }
.chaos-stage { grid-area: stage; align-self: center; }
.chaos-pains { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; counter-reset: pain; }
.chaos-pains li { position: relative; padding: 1.1rem 1.2rem 1.1rem 1.7rem; border-radius: 16px; transition: background 0.5s ease, opacity 0.5s ease; }
.chaos-pains li::before, .chaos-pains li::after { content: ''; position: absolute; left: 0; top: 1.15rem; bottom: 1.15rem; width: 3px; border-radius: 3px; background: var(--c-border); }
.chaos-pains li::after { background: var(--c-accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s ease; }
.chaos-pains li.active { background: rgba(244, 244, 237, 0.04); }
.chaos-pains li.active::after { transform: none; }
.chaos-pains.auto li.active::after { animation: czDwell 3.2s linear both; }
.chaos-pains.has-active li:not(.active) { opacity: 0.5; }
.chaos-pains h3 { display: flex; align-items: baseline; gap: 0.8rem; font-size: var(--f-h3); counter-increment: pain; }
.chaos-pains h3::before { content: '0' counter(pain); color: var(--c-accent); font: 600 0.8rem / 1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.06em; }
.chaos-pains p { margin-top: 0.45rem; color: var(--c-text-muted); }
@keyframes czDwell { from { transform: scaleY(0); } to { transform: none; } }

.chaos-stage { position: relative; aspect-ratio: 10 / 8; container-type: inline-size; }
.chaos-stage::before { content: ''; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(210, 255, 0, 0.08), transparent); filter: blur(10px); }
.cz {
  --sc: calc(0.7 + var(--z) * 0.1);
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  z-index: var(--z);
  translate: calc(var(--px, 0) * var(--z) * 1.4cqw) calc(var(--py, 0) * var(--z) * 1.1cqw);
  transition: opacity 0.6s ease, filter 0.6s ease, scale 0.8s var(--ease-spring);
}
/* Auftritt (nur mit Skript und ohne „Bewegung reduzieren“): die Teile fliegen nacheinander ein */
.chaos-stage.armed:not(.visible) .cz { opacity: 0; scale: 0.6; }
.chaos-stage.armed.visible .cz { transition-delay: calc(var(--i) * 60ms); }
.chaos-stage[data-focus] .cz { opacity: 0.2; filter: saturate(0.3); transition-delay: 0s; }
.chaos-stage[data-focus="type"] .cz[data-g="type"], .chaos-stage[data-focus="pile"] .cz[data-g="pile"], .chaos-stage[data-focus="inbox"] .cz[data-g="inbox"] { z-index: 6; opacity: 1; filter: none; scale: 1.07; }
.chaos-stage[data-focus="type"] .cz[data-g="type"] .cz-in, .chaos-stage[data-focus="pile"] .cz[data-g="pile"] .cz-in, .chaos-stage[data-focus="inbox"] .cz[data-g="inbox"] .cz-in {
  box-shadow: 0 0 0 1.5px rgba(210, 255, 0, 0.75), 0 0 6cqw rgba(210, 255, 0, 0.22), 0 1.6cqw 4cqw -1cqw rgba(0, 0, 0, 0.3);
}
.cz-in {
  position: relative;
  border-radius: 1.4cqw;
  font-size: max(1.75cqw, 9px);
  line-height: 1.3;
  transform: rotate(var(--r)) scale(var(--sc));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1.4cqw 3cqw -0.6cqw rgba(0, 0, 0, 0.18), 0 3.6cqw 7cqw -2cqw rgba(0, 0, 0, 0.24);
  transition: box-shadow 0.6s ease;
}
.chaos-stage.live .cz-in { animation: czFloat calc(4.6s + var(--i) * 0.37s) ease-in-out calc(var(--i) * -0.9s) infinite alternate; }
@keyframes czFloat { to { transform: translate(calc((var(--i) - 5.5) * 0.3cqw), -1.6cqw) rotate(calc(var(--r) + 2.5deg)) scale(var(--sc)); } }

/* Papier: Rechnung, Quittung, Lieferschein */
.cz-pdf .cz-in, .cz-receipt .cz-in, .cz-slip .cz-in { padding: 1.8cqw; background: linear-gradient(#f6f6ef, #e6e6db); color: #23271c; }
.cz-pdf .cz-in { width: 25cqw; }
.cz-receipt .cz-in { width: 16cqw; -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.2cqw) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 2.4cqw 1.2cqw repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.2cqw) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 2.4cqw 1.2cqw repeat-x; padding-bottom: 3cqw; }
.cz-slip .cz-in { width: 23cqw; }
.cz-pdf b, .cz-receipt b, .cz-slip b { display: block; margin-bottom: 1cqw; font: 700 max(1.7cqw, 9px) / 1.2 var(--f-display); }
.cz-pdf i, .cz-receipt i, .cz-slip i { display: block; height: 0.7cqw; margin-top: 0.9cqw; border-radius: 1cqw; background: rgba(35, 39, 28, 0.16); }
.cz-pdf i.short, .cz-receipt i.short, .cz-slip i.short { width: 60%; }
.cz-pdf em, .cz-receipt em { display: block; margin-top: 1.4cqw; font: 800 max(2.1cqw, 10px) / 1 var(--f-display); font-style: normal; text-align: right; }
.cz-tag { position: absolute; top: -1.2cqw; right: 1.6cqw; padding: 0.5cqw 1.2cqw; border-radius: 0.8cqw; background: #e5533d; color: #fff; font: 800 max(1.4cqw, 8px) / 1 var(--f-display); letter-spacing: 0.06em; }
.cz-note .cz-in { width: 17cqw; height: 15cqw; padding: 2cqw; border-radius: 0.4cqw; background: linear-gradient(170deg, #fff27a, #f3d94a); color: #4a3b06; }
.cz-note .cz-in::before { content: ''; position: absolute; top: -1.2cqw; left: 50%; width: 7cqw; height: 2.4cqw; margin-left: -3.5cqw; background: rgba(244, 244, 237, 0.5); transform: rotate(-4deg); }
.cz-note b { font: 700 max(1.9cqw, 10px) / 1.25 var(--f-display); }

/* Bildschirm-Teile: E-Mail, WhatsApp, Zähler, Anruf, Formular, Tabelle, Tasten, „Kopiert“ */
.cz-mail .cz-in { display: flex; align-items: center; gap: 1.4cqw; width: 34cqw; padding: 1.8cqw 2cqw; background: #f6f6ef; color: #23271c; }
.cz-av { display: grid; place-items: center; flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--c-teal); color: #fff; font: 800 max(1.8cqw, 9px) / 1 var(--f-display); }
.cz-mail b { display: block; font: 700 max(1.8cqw, 9.5px) / 1.2 var(--f-display); }
.cz-mail small { color: #6b6f63; }
.cz-dot { flex: none; width: 1.4cqw; height: 1.4cqw; margin-left: auto; border-radius: 50%; background: #1a73e8; }
.cz-wa .cz-in { width: 30cqw; padding: 1.6cqw 2cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw 0.3cqw; background: #202c33; color: #e9edef; }
.cz-wa p { font-size: max(1.8cqw, 9.5px); }
.cz-wa small { display: block; margin-top: 0.6cqw; color: #8696a0; text-align: right; }
.cz-badge .cz-in { display: grid; justify-items: center; gap: 0.6cqw; padding: 2cqw 2.4cqw; background: #2b3023; color: var(--c-text-muted); }
.cz-badge svg { width: 6cqw; height: 6cqw; fill: none; stroke: var(--c-text); stroke-width: 1.6; }
.cz-badge em { position: absolute; top: 0.8cqw; right: 1cqw; padding: 0.4cqw 1cqw; border-radius: 2cqw; background: #e5533d; color: #fff; font: 800 max(1.6cqw, 9px) / 1 var(--f-display); font-style: normal; }
.cz-call .cz-in { display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2cqw; border-radius: 4cqw; background: #2b3023; color: var(--c-text); }
.cz-call svg { width: 2.8cqw; height: 2.8cqw; fill: none; stroke: #ff8a7e; stroke-width: 2; }
.cz-call b { font: 600 max(1.7cqw, 9px) / 1 var(--f-text); }
.cz-call em { padding: 0.3cqw 0.9cqw; border-radius: 2cqw; background: rgba(255, 107, 94, 0.2); color: #ff8a7e; font-style: normal; font-weight: 700; }
.cz-form .cz-in { width: 24cqw; padding: 1.8cqw; background: #2b3023; color: var(--c-text-muted); }
.cz-form b { display: block; margin-bottom: 0.6cqw; color: var(--c-text); font: 700 max(1.6cqw, 9px) / 1.2 var(--f-display); }
.cz-form span { display: block; margin-top: 0.8cqw; }
.cz-form small { display: block; font-size: max(1.3cqw, 8px); }
.cz-form span i { position: relative; display: block; height: 3cqw; margin-top: 0.3cqw; border: 1px solid rgba(244, 244, 237, 0.14); border-radius: 0.6cqw; }
.cz-form .typing i::after { content: ''; position: absolute; left: 1cqw; top: 25%; width: 1px; height: 50%; background: var(--c-accent); animation: caret 0.9s infinite; }
.cz-sheet .cz-in { width: 32cqw; padding: 1.6cqw; background: #f6f6ef; color: #23271c; }
.cz-sheet b { display: block; margin-bottom: 1cqw; font: 700 max(1.6cqw, 9px) / 1.2 var(--f-display); }
.cz-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #cfd2c6; }
.cz-grid span { padding: 0.4cqw; background: #e3e3d8; color: #6b6f63; font-size: max(1.2cqw, 7.5px); text-align: center; }
.cz-grid i { height: 3cqw; border-top: 1px solid #dcdfd4; border-left: 1px solid #dcdfd4; }
.cz-grid i.hl { box-shadow: inset 0 0 0 2px #1f7a52; background: rgba(31, 122, 82, 0.08); }
.cz-keys .cz-in { display: grid; grid-template-columns: auto auto; gap: 0.8cqw; padding: 1.6cqw; background: #2b3023; }
.cz-keys kbd { display: grid; place-items: center; min-width: 4.4cqw; height: 4.4cqw; padding: 0 1cqw; border: 1px solid rgba(244, 244, 237, 0.2); border-bottom-width: 0.5cqw; border-radius: 0.8cqw; color: var(--c-text-muted); font: 600 max(1.6cqw, 9px) / 1 var(--f-text); }
.chaos-stage.live .cz-keys .k-c { animation: czKey 1.6s infinite; }
.chaos-stage.live .cz-keys .k-v { animation: czKey 1.6s 0.8s infinite; }
@keyframes czKey { 0%, 30%, 100% { color: var(--c-text-muted); border-color: rgba(244, 244, 237, 0.2); translate: 0 0; } 10%, 20% { color: var(--c-accent); border-color: var(--c-accent); translate: 0 0.3cqw; } }
.cz-copy .cz-in { display: flex; align-items: center; gap: 1cqw; padding: 1.2cqw 2cqw; border-radius: 4cqw; background: #1a1d15; color: var(--c-text); font-weight: 600; }
.cz-copy svg { width: 2.6cqw; height: 2.6cqw; fill: none; stroke: var(--c-accent); stroke-width: 2; }
/* Rote Warnpunkte pulsieren */
.cz-ping { position: absolute; top: -0.8cqw; left: -0.8cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #e5533d; box-shadow: 0 0 0 0 rgba(229, 83, 61, 0.6); }
.chaos-stage.live .cz-ping { animation: czPing 1.8s ease-out infinite; }
@keyframes czPing { 0% { box-shadow: 0 0 0 0 rgba(229, 83, 61, 0.55); } 80%, 100% { box-shadow: 0 0 0 2.4cqw rgba(229, 83, 61, 0); } }

/* Leistungen der Automatisierungsseite: Schaltzentrale. Links sechs Schalter, rechts ein Bildschirm mit dem, was der
   gewählte Ablauf tut; das Skript schaltet nacheinander ein (aria-pressed) und spielt die Szene ab (.play) */
.console { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.console-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.cl-item { border: 1px solid var(--c-border); border-radius: 18px; background: rgba(49, 54, 39, 0.5); transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.6s ease; }
.cl-item.active { border-color: rgba(210, 255, 0, 0.35); background: var(--c-bg-elevated); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px -8px rgba(0, 0, 0, 0.14), 0 0 40px -10px rgba(210, 255, 0, 0.18); }
.cl-sw { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.2rem; border: 0; border-radius: 18px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cl-sw:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.cl-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 99px; background: rgba(244, 244, 237, 0.12); box-shadow: inset 0 0 0 1px rgba(244, 244, 237, 0.1); transition: background 0.45s ease, box-shadow 0.45s ease; }
.cl-track i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #f4f4ed; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.5s var(--ease-spring), background 0.4s ease; }
.cl-sw[aria-pressed="true"] .cl-track { background: var(--c-accent); box-shadow: 0 0 18px rgba(210, 255, 0, 0.35); }
.cl-sw[aria-pressed="true"] .cl-track i { background: #1a1d15; transform: translateX(20px); }
.cl-title { font: 700 var(--f-h3) / 1.2 var(--f-display); }
.cl-desc { max-height: 0; margin: 0; padding: 0 1.2rem 0 calc(2.2rem + 46px); overflow: hidden; color: var(--c-text-muted); opacity: 0; transition: max-height 0.6s var(--ease-out-expo), opacity 0.4s ease, padding 0.6s var(--ease-out-expo); }
.cl-item.active .cl-desc, .console.all-open .cl-desc { max-height: 9em; padding-bottom: 1.1rem; opacity: 1; }

.console-screen { container-type: inline-size; overflow: hidden; border: 1px solid rgba(244, 244, 237, 0.1); border-radius: 22px; background: linear-gradient(160deg, #2b3023, #1b1e16); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 20px 40px -14px rgba(0, 0, 0, 0.22), 0 50px 90px -30px rgba(0, 0, 0, 0.26), 0 0 80px -30px rgba(210, 255, 0, 0.15); }
.cs-bar { display: flex; align-items: center; gap: 1.2cqw; height: 9cqw; padding: 0 3cqw; border-bottom: 1px solid rgba(244, 244, 237, 0.07); color: var(--c-text-muted); font-size: max(2.1cqw, 11px); }
.cs-bar > i { flex: none; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: rgba(244, 244, 237, 0.16); }
.cs-title { margin-left: 1.6cqw; }
.cs-title b { color: var(--c-text); font-weight: 600; }
.cs-live { display: flex; align-items: center; gap: 1cqw; margin-left: auto; color: var(--c-accent); font-weight: 600; }
.cs-live::before { content: ''; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--c-accent); animation: csLive 1.6s ease-out infinite; }
@keyframes csLive { 0% { box-shadow: 0 0 0 0 rgba(210, 255, 0, 0.6); } 80%, 100% { box-shadow: 0 0 0 1.6cqw rgba(210, 255, 0, 0); } }
.cs-body { position: relative; aspect-ratio: 100 / 64; font-size: max(1.9cqw, 10px); }
.cs-foot { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 3cqw; border-top: 1px solid rgba(244, 244, 237, 0.07); color: var(--c-text-muted); font-size: max(2cqw, 10.5px); }
.cs-count b { color: var(--c-accent); font: 800 max(2.6cqw, 13px) / 1 var(--f-display); }
.cs-progress { flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: rgba(244, 244, 237, 0.08); }
.cs-progress i { display: block; width: calc(var(--n, 0) / 6 * 100%); height: 100%; background: linear-gradient(90deg, var(--c-teal), var(--c-accent)); transition: width 0.7s var(--ease-out-expo); }

/* Szenen: Grundzustand = Endbild; beim Abspielen (.play) laufen die Teile von ihrem Anfang dorthin */
/* Wechsel ohne Überlagerung: die alte Szene ist fast weg, bevor die neue kommt */
.cs-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(2cqw); transition: opacity 0.25s ease, transform 0.4s ease, visibility 0s linear 0.25s; }
.cs-scene.show { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s ease 0.2s, transform 0.7s var(--ease-out-expo) 0.2s, visibility 0s linear 0s; }
.cs-scene.play .cs-a { animation: csIn 0.6s var(--ease-out-expo) both; animation-delay: var(--d, 0s); }
@keyframes csIn { from { opacity: 0; transform: translateY(2cqw) scale(0.96); } }
.cs-toast { position: absolute; left: 4cqw; bottom: 3.6cqw; display: flex; align-items: center; gap: 1.2cqw; margin: 0; padding: 1.2cqw 2.2cqw; border-radius: 3cqw; background: rgba(42, 157, 143, 0.2); color: #9fe3d8; font-weight: 600; }
.cs-toast svg { width: 2.6cqw; height: 2.6cqw; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 1 · Anfrage → CRM */
.s0-msg { position: absolute; left: 4cqw; top: 4cqw; width: 50cqw; padding: 2cqw 2.4cqw; border-radius: 2.2cqw 2.2cqw 2.2cqw 0.6cqw; background: #202c33; color: #e9edef; }
.s0-msg small { display: flex; align-items: center; gap: 1cqw; margin-bottom: 0.8cqw; color: #8696a0; font-size: max(1.6cqw, 9px); }
.s0-msg small i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #25d366; }
.s0-fly { position: absolute; left: 12cqw; top: 15cqw; padding: 0.8cqw 1.6cqw; border-radius: 2cqw; background: var(--c-accent); color: #1a1d15; font-weight: 700; opacity: 0; }
.cs-scene.play .s0-fly { animation: s0Fly 1.2s cubic-bezier(0.5, 0, 0.2, 1) 0.45s both; }
@keyframes s0Fly { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 85% { opacity: 1; transform: translate(26cqw, 15cqw) scale(0.8); } 100% { opacity: 0; transform: translate(26cqw, 15cqw) scale(0.8); } }
.cs-table { position: absolute; right: 4cqw; top: 25cqw; width: 66cqw; overflow: hidden; border: 1px solid rgba(244, 244, 237, 0.1); border-radius: 2cqw; background: rgba(244, 244, 237, 0.03); }
.cs-th, .cs-tr { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 2cqw; align-items: center; padding: 1.4cqw 2.4cqw; }
.cs-th { border-bottom: 1px solid rgba(244, 244, 237, 0.08); color: var(--c-text-muted); font-size: max(1.4cqw, 8.5px); letter-spacing: 0.06em; text-transform: uppercase; }
.cs-tr + .cs-tr { border-top: 1px solid rgba(244, 244, 237, 0.05); }
.cs-tr > :last-child { justify-self: start; padding: 0.3cqw 1.2cqw; border-radius: 2cqw; background: rgba(244, 244, 237, 0.08); font-size: max(1.5cqw, 8.5px); font-style: normal; }
.cs-new { background: rgba(210, 255, 0, 0.08); }
.cs-new em { background: var(--c-accent) !important; color: #1a1d15; font-weight: 700; }
.cs-scene.play .cs-new { animation: csRow 0.7s var(--ease-out-expo) 1.25s both; }
@keyframes csRow { from { opacity: 0; transform: translateY(-3cqw); background: rgba(210, 255, 0, 0.3); } }

/* 2 · Kalender */
.cs-cal { position: absolute; inset: 4cqw 4cqw 12cqw; display: grid; grid-template-columns: 5cqw repeat(5, 1fr); grid-template-rows: auto repeat(4, 1fr); gap: 1cqw; }
.cs-cal b { color: var(--c-text-muted); font-size: max(1.5cqw, 8.5px); font-weight: 600; text-align: center; }
.cs-cal small { align-self: center; color: var(--c-text-muted); font-size: max(1.4cqw, 8px); }
.cs-cal i { position: relative; border-radius: 1cqw; background: rgba(244, 244, 237, 0.04); }
.cs-cal i.busy { background: rgba(42, 157, 143, 0.22); }
.cs-slot em { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 1cqw; background: var(--c-accent); box-shadow: 0 0 4cqw rgba(210, 255, 0, 0.35); color: #1a1d15; font-weight: 700; font-style: normal; }
.cs-scene.play .cs-slot em { animation: csSlot 0.8s var(--ease-spring) 0.4s both; }
@keyframes csSlot { from { opacity: 0; transform: translateY(-8cqw) scale(0.8); } }

/* 3 · Rechnung */
.cs-doc { position: absolute; left: 6cqw; top: 5cqw; width: 30cqw; height: 44cqw; overflow: hidden; padding: 2.4cqw; border-radius: 1.4cqw; background: linear-gradient(#f6f6ef, #e6e6db); color: #23271c; }
.cs-doc b { display: block; font: 800 max(2.2cqw, 11px) / 1.1 var(--f-display); }
.cs-doc small { color: #6b6f63; }
.cs-doc i { display: block; height: 0.8cqw; margin-top: 2cqw; border-radius: 1cqw; background: rgba(35, 39, 28, 0.15); }
.cs-doc i.short { width: 55%; }
.cs-doc em { position: absolute; right: 2.4cqw; bottom: 2.4cqw; font: 800 max(2.2cqw, 11px) / 1 var(--f-display); font-style: normal; }
.cs-beam { position: absolute; left: 0; right: 0; top: 0; height: 6cqw; background: linear-gradient(transparent, rgba(210, 255, 0, 0.55), transparent); opacity: 0; }
.cs-scene.play .cs-beam { animation: csBeam 1.1s ease-in-out 0.2s both; }
@keyframes csBeam { 0% { opacity: 1; transform: translateY(-6cqw); } 100% { opacity: 1; transform: translateY(44cqw); } }
.cs-fields { position: absolute; left: 42cqw; top: 6cqw; display: grid; gap: 1.6cqw; }
.cs-fields span { display: flex; align-items: center; gap: 1.6cqw; padding: 1.2cqw 2cqw; border: 1px solid rgba(210, 255, 0, 0.35); border-radius: 3cqw; background: rgba(210, 255, 0, 0.08); color: var(--c-accent); font-weight: 700; }
.cs-fields small { color: var(--c-text-muted); font-weight: 500; }
.cs-folder { position: absolute; right: 5cqw; bottom: 5cqw; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0.4cqw 1.6cqw; padding: 2cqw 2.6cqw; border: 1px solid rgba(244, 244, 237, 0.1); border-radius: 2cqw; background: rgba(42, 157, 143, 0.14); }
.cs-folder svg { grid-row: span 2; width: 5cqw; height: 5cqw; fill: rgba(42, 157, 143, 0.35); stroke: #7fd6cb; stroke-width: 1.6; }
.cs-folder b { font-weight: 600; }
.cs-folder small { grid-column: 2; color: var(--c-text-muted); }
.cs-num { position: absolute; top: -1.6cqw; right: -1.6cqw; display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; overflow: hidden; border-radius: 50%; background: var(--c-accent); color: #1a1d15; font-weight: 800; }
.cs-num i { grid-area: 1 / 1; font-style: normal; }
.cs-num i:first-child { opacity: 0; transform: translateY(-100%); }
.cs-scene.play .cs-num i:first-child { animation: csNumOut 0.5s ease 2.1s both; }
.cs-scene.play .cs-num i:last-child { animation: csNumIn 0.5s var(--ease-out-expo) 2.1s both; }
@keyframes csNumOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }
@keyframes csNumIn { from { opacity: 0; transform: translateY(100%); } }

/* 4 · Postfach sortiert sich */
.cs-inbox { position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; height: 44cqw; }
.cs-mail { position: absolute; left: 0; right: 0; top: calc(var(--to) * 11cqw); display: grid; grid-template-columns: auto max(13cqw, 68px) minmax(0, 1fr) auto; align-items: center; gap: 1.6cqw; height: 9.4cqw; padding: 0 2cqw; border-radius: 1.6cqw; background: rgba(244, 244, 237, 0.05); }
.cs-mail i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #1a73e8; }
.cs-mail b { font-weight: 600; }
.cs-mail span { overflow: hidden; color: var(--c-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.cs-mail em { padding: 0.4cqw 1.4cqw; border-radius: 2cqw; font-size: max(1.5cqw, 8.5px); font-style: normal; font-weight: 700; }
.t-lead { background: var(--c-accent); color: #1a1d15; }
.t-bill { background: rgba(42, 157, 143, 0.3); color: #9fe3d8; }
.t-ask { background: rgba(255, 189, 46, 0.2); color: #ffd36b; }
.cs-scene.play .cs-mail { animation: csSort 1.7s var(--ease-out-expo) both; }
.cs-scene.play .cs-mail em { animation: csTag 0.45s var(--ease-spring) both; animation-delay: calc(0.15s + var(--from) * 0.12s); }
@keyframes csSort { 0%, 45% { translate: 0 calc((var(--from) - var(--to)) * 11cqw); } 100% { translate: 0 0; } }
@keyframes csTag { from { opacity: 0; transform: scale(0.4); } }

/* 5 · Kontakt */
.cs-card { position: absolute; left: 4cqw; top: 4cqw; width: 60cqw; padding: 2.4cqw; border: 1px solid rgba(244, 244, 237, 0.1); border-radius: 2cqw; background: rgba(244, 244, 237, 0.04); }
.cs-card-head { display: flex; align-items: center; gap: 1.6cqw; margin-bottom: 1.6cqw; }
.cs-card-head i { display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 50%; background: rgba(42, 157, 143, 0.25); }
.cs-card-head svg { width: 60%; height: 60%; fill: none; stroke: #7fd6cb; stroke-width: 1.8; }
.cs-card-head b { display: block; font: 700 max(2.1cqw, 11px) / 1.2 var(--f-display); }
.cs-card-head small { color: var(--c-text-muted); }
.cs-card dl { display: grid; gap: 1cqw; margin: 0; }
.cs-card dl div { display: grid; grid-template-columns: 19cqw 1fr; padding: 1.2cqw 1.6cqw; border-radius: 1.2cqw; background: rgba(244, 244, 237, 0.04); }
.cs-card dt { color: var(--c-text-muted); }
.cs-card dd { margin: 0; font-weight: 600; }
.cs-steps { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; display: flex; gap: 1.6cqw; margin: 0; padding: 0; list-style: none; }
.cs-steps li { flex: 1; padding: 1.2cqw; border-radius: 1.2cqw; background: rgba(210, 255, 0, 0.1); color: var(--c-accent); font-weight: 700; text-align: center; }
.cs-steps li + li { position: relative; }
.cs-steps li + li::before { content: '→'; position: absolute; left: -1.5cqw; color: var(--c-text-muted); }

/* 6 · Programme verbinden */
.cs-net { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke-linecap: round; }
.cs-net path { stroke: rgba(210, 255, 0, 0.35); stroke-width: 0.35; stroke-dasharray: 100; }
.cs-net path.p { stroke: var(--c-accent); stroke-width: 0.8; stroke-dasharray: 10 120; stroke-dashoffset: 10; opacity: 0; }
.cs-scene.play .cs-net path:not(.p) { animation: csDraw 0.6s ease both; animation-delay: calc(0.2s + var(--k) * 0.15s); }
.cs-scene.show .cs-net path.p { animation: fdFlow 2.6s infinite; animation-delay: calc(1.2s + var(--k) * 0.3s); }
@keyframes csDraw { from { stroke-dashoffset: 100; } }
.cs-hub { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 20cqw; height: 13cqw; margin: -6.5cqw 0 0 -10cqw; border-radius: 2.4cqw; background: #1a1d15; box-shadow: 0 0 0 1.5px var(--c-accent), 0 0 7cqw rgba(210, 255, 0, 0.3); }
.cs-hub b { color: var(--c-accent); font: 800 max(2.8cqw, 13px) / 1 var(--f-display); }
.cs-hub small { margin-top: -1.4cqw; color: var(--c-text-muted); }
.cs-app { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) / 64 * 100%); padding: 1cqw 2cqw; border: 1px solid rgba(244, 244, 237, 0.14); border-radius: 3cqw; background: #2b3023; font-weight: 600; white-space: nowrap; translate: -50% -50%; }

/* Zum Schluss: alle aktiv */
.cs-all { padding: 4cqw; }
.cs-all-head { margin-bottom: 2cqw; font: 800 max(2.6cqw, 13px) / 1 var(--f-display); }
.cs-all ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; margin: 0; padding: 0; list-style: none; }
.cs-all li { display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw 1.8cqw; border-radius: 1.6cqw; background: rgba(244, 244, 237, 0.05); font-weight: 600; }
.cs-all li svg { flex: none; width: 2.6cqw; height: 2.6cqw; fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cs-all em { margin-left: auto; padding: 0.3cqw 1.2cqw; border-radius: 2cqw; background: rgba(210, 255, 0, 0.14); color: var(--c-accent); font-size: max(1.4cqw, 8px); font-style: normal; }

.cs-feed-head { margin: 3cqw 0 1.4cqw; color: var(--c-text-muted); font-size: max(1.5cqw, 8.5px); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cs-feed { display: grid; gap: 0.8cqw; margin: 0; padding: 0; list-style: none; color: var(--c-text-muted); }
.cs-feed li { display: flex; gap: 2cqw; }
.cs-feed time { color: var(--c-accent); font: 600 max(1.6cqw, 9px) / 1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; }

@media (max-width: 1024px) {
  .chaos { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "list"; }
  .chaos-stage { margin-bottom: 1.5rem; }
  .console { grid-template-columns: 1fr; }
  .console-screen { order: -1; }
}
/* Schmale Bühne: weniger, dafür größere Teile, damit Schrift und Formen lesbar bleiben */
@container (max-width: 520px) {
  .cz-keys, .cz-copy, .cz-call, .cz-badge { display: none; }
  .cz-pdf { --x: 2 !important; --y: 3 !important; } .cz-pdf .cz-in { width: 42cqw; }
  .cz-note { --x: 62 !important; --y: 2 !important; } .cz-note .cz-in { width: 32cqw; height: 26cqw; }
  .cz-mail { --x: 14 !important; --y: 27 !important; } .cz-mail .cz-in { width: 66cqw; }
  .cz-form { --x: 1 !important; --y: 47 !important; } .cz-form .cz-in { width: 40cqw; }
  .cz-sheet { --x: 40 !important; --y: 50 !important; } .cz-sheet .cz-in { width: 56cqw; }
  .cz-receipt { --x: 4 !important; --y: 73 !important; } .cz-receipt .cz-in { width: 28cqw; }
  .cz-wa { --x: 36 !important; --y: 80 !important; } .cz-wa .cz-in { width: 58cqw; }
  .cz-slip { display: none; }
  .cz-in { font-size: max(2.6cqw, 9px); }
  .cz-pdf b, .cz-receipt b, .cz-note b, .cz-mail b, .cz-form b, .cz-sheet b { font-size: max(3cqw, 10px); }
}
@media (max-width: 1024px) { .chaos-stage { aspect-ratio: 10 / 12; } }
@media (max-width: 1024px) and (min-width: 600px) { .chaos-stage { aspect-ratio: 10 / 7; } }

/* E-Rechnung: Zeitleiste mit drei Stufen – die Linie zieht sich beim Erscheinen durch, die Punkte springen nacheinander auf */
.etime { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.etime::before, .etime::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--c-border); }
.etime::after { background: linear-gradient(90deg, var(--c-teal), var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out-expo) 0.2s; }
.etime.visible::after { transform: none; }
.etime li { position: relative; display: flex; flex-direction: column; }
.et-dot { position: relative; z-index: 1; order: -1; width: 14px; height: 14px; margin-bottom: 1.4rem; border-radius: 50%; background: var(--c-bg); box-shadow: 0 0 0 2px var(--c-accent), 0 0 18px rgba(210, 255, 0, 0.5); transform: scale(0); transition: transform 0.6s var(--ease-spring) calc(0.3s + var(--k) * 0.45s); }
.etime.visible .et-dot { transform: none; }
.et-year { font: 900 clamp(2.6rem, 5vw, 4rem) / 1 var(--f-display); letter-spacing: -0.03em; }
.etime li:last-child .et-year { color: var(--c-accent); }
.etime h3 { margin-top: 0.8rem; font: 700 var(--f-h3) / 1.25 var(--f-display); }
.etime p { margin-top: 0.6rem; color: var(--c-text-muted); }
.etime p b { color: var(--c-text); font-weight: 600; }
.etime + .scores-note { margin-top: 2.6rem; }
@media (max-width: 720px) {
  .etime { grid-template-columns: 1fr; padding-left: 30px; }
  .etime::before, .etime::after { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .etime::after { background: linear-gradient(180deg, var(--c-teal), var(--c-accent)); transform: scaleY(0); transform-origin: top; }
  .et-dot { position: absolute; left: -30px; top: 0.8rem; margin: 0; }
}

/* ── Preise ─────────────────────────────────────────── */
/* Nur für Vorlesegeräte: Text, den die Seite sonst grafisch zeigt (Zählwerk der Preise) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Kasse im Hero: unten das Gerät mit drei Tasten, darüber kommt der Bon aus dem Schlitz und wächst nach oben.
   Grundzustand = fertiger Bon (ohne Skript, „Bewegung reduzieren“). Mit Skript (Klasse armed) sind alle Zeilen
   eingezogen und werden nacheinander gedruckt (Klasse p), zum Schluss der Stempel. Maße in cqw – alles skaliert mit */
.bill { container-type: inline-size; width: 100%; max-width: 440px; justify-self: center; }
/* Platz für den längsten Bon (drei Leistungen): die Kasse springt nicht, wenn eine Zeile dazukommt */
.bill-stage { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-height: 112cqw; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.1)) drop-shadow(0 22px 34px rgba(0, 0, 0, 0.14)); }
.bill-paper {
  position: relative;
  width: 80cqw;
  margin-bottom: -5cqw; /* das untere Ende steckt im Schlitz */
  padding: 5.5cqw 6cqw 8cqw;
  background: linear-gradient(#f7f7f0, #ecebe1);
  color: #23271c;
  font-size: max(3.2cqw, 12px);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  /* Oberkante abgerissen: Zickzack */
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 3cqw 1.5cqw repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 1.5cqw) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 3cqw 1.5cqw repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 1.5cqw) no-repeat;
}
.bill.thump .bill-paper { animation: billThump 0.4s var(--ease-out-expo); }
@keyframes billThump { 30% { transform: translateY(0.8cqw) scale(0.995); } }

/* Druckzeilen: Höhe über die Rasterzeile (0fr ↔ 1fr), der Text „dunkelt nach“ wie beim Thermodruck */
.pr { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.55s var(--ease-out-expo); }
.pr > div { min-height: 0; overflow: hidden; transition: opacity 0.45s ease, filter 0.6s ease; }
.bl.off, .bill.armed .pr:not(.p) { grid-template-rows: 0fr; }
.bl.off > div, .bill.armed .pr:not(.p) > div { opacity: 0; filter: blur(2px); }

.bh-logo { text-align: center; font: 900 max(4.6cqw, 16px) / 1 var(--f-display); letter-spacing: 0.08em; }
.bh-logo i { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-right: 0.08em; border-radius: 0.22em; background: #1a1d15; color: var(--c-accent); font-style: normal; }
.bh-title { margin-top: 2.2cqw; text-align: center; font: 800 max(2.6cqw, 10px) / 1.3 var(--f-display); letter-spacing: 0.22em; text-transform: uppercase; }
.bh-meta { text-align: center; font-size: max(2.4cqw, 9.5px); color: #6b6e60; }
.bill-rule i { display: block; height: 1.5px; margin: 2.6cqw 0; background: linear-gradient(90deg, rgba(35, 39, 28, 0.4) 50%, transparent 0) 0 0 / 2.2cqw 100% repeat-x; }
.bl-main, .bl-sub, .bill-sum p { display: flex; justify-content: space-between; align-items: baseline; gap: 3cqw; }
.bl-main span { font-weight: 600; }
.bl-main b, .bl-sub b, .bill-sum b { flex: none; white-space: nowrap; }
.bl-main { padding-top: 1.1cqw; }
.bl-sub { padding: 0 0 1.1cqw 3cqw; font-size: 0.9em; color: #6b6e60; }
.bl-sub b { font-weight: 500; }
.bill-sum p { font: 800 max(3.9cqw, 14px) / 1.5 var(--f-display); }
.bill-sum .bs-year { margin-top: 1.2cqw; padding-top: 1.2cqw; border-top: 1px solid rgba(35, 39, 28, 0.14); font: 500 max(3cqw, 11.5px) / 1.5 var(--f-text); color: #4d5143; }
.bill-foot > div { text-align: center; }
.bill-foot p { padding-top: 3cqw; font-size: max(2.4cqw, 9.5px); color: #6b6e60; }
/* Strichcode aus zwei überlagerten Streifenmustern */
.bill-code { display: block; width: 36%; height: 10cqw; margin: 3.4cqw 0 0 1cqw; opacity: 0.8;
  background:
    repeating-linear-gradient(90deg, #23271c 0 0.5cqw, transparent 0.5cqw 1.1cqw),
    repeating-linear-gradient(90deg, transparent 0 1.7cqw, #23271c 1.7cqw 2.6cqw, transparent 2.6cqw 3.1cqw); }

/* Stempel: schlägt nach dem Druck auf, das Papier gibt kurz nach */
.bill-stamp {
  position: absolute;
  right: 4cqw;
  bottom: 6.6cqw;
  display: grid;
  justify-items: center;
  padding: 1.6cqw 3.4cqw 1.8cqw;
  border: 0.75cqw solid currentColor;
  border-radius: 2.2cqw;
  color: rgba(28, 128, 116, 0.82);
  font: 900 max(5cqw, 17px) / 1 var(--f-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: rotate(-11deg);
  transition: opacity 0.16s ease-in, transform 0.36s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.bill-stamp small { margin-top: 0.8cqw; font: 700 max(2.2cqw, 9px) / 1.2 var(--f-text); letter-spacing: 0.03em; text-transform: none; }
.bill.armed:not(.stamped) .bill-stamp { opacity: 0; transform: rotate(-3deg) scale(2.2); }

/* Das Gerät: Oberseite mit Schlitz (leuchtet beim Drucken), Front mit Lämpchen und drei Tasten */
.register { position: relative; z-index: 1; width: 100%; }
.reg-top { position: relative; height: 7cqw; margin: 0 5cqw; border-radius: 3cqw 3cqw 0 0; background: linear-gradient(#4b523a, #3a402e); }
.reg-slot { position: absolute; left: 7cqw; right: 7cqw; top: 2.4cqw; height: 1.8cqw; border-radius: 1cqw; background: #0f110c; box-shadow: inset 0 0.4cqw 0.6cqw rgba(0, 0, 0, 0.7); }
.reg-slot::after { content: ''; position: absolute; inset: 30% 3%; border-radius: 1cqw; background: var(--c-accent); opacity: 0; filter: blur(0.5cqw); transition: opacity 0.3s; }
.bill.printing .reg-slot::after { opacity: 0.85; }
.reg-face {
  padding: 3.4cqw 4cqw 4.6cqw;
  border: 1px solid var(--c-border);
  border-radius: 3.4cqw;
  background: linear-gradient(170deg, #3a402e, #24281c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 10px 20px -6px rgba(0, 0, 0, 0.1), 0 26px 50px -14px rgba(0, 0, 0, 0.16), 0 50px 90px -30px rgba(0, 0, 0, 0.2);
}
.reg-brand { display: flex; align-items: center; gap: 1.8cqw; margin-bottom: 3.4cqw; font: 800 max(2.4cqw, 10px) / 1 var(--f-display); letter-spacing: 0.32em; color: var(--c-text-muted); }
.reg-led { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 1.6cqw rgba(210, 255, 0, 0.7); animation: ledBreathe 3.2s ease-in-out infinite; }
.bill.printing .reg-led { animation: ledBlink 0.24s steps(2) infinite; }
@keyframes ledBreathe { 50% { opacity: 0.45; box-shadow: 0 0 0.6cqw rgba(210, 255, 0, 0.3); } }
@keyframes ledBlink { 50% { opacity: 0.2; } }
.reg-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
/* Tasten: stehen hoch, gedrückte sitzen tiefer und leuchten */
.bill-key {
  display: grid;
  justify-items: center;
  gap: 1.3cqw;
  padding: 2.8cqw 1cqw 2.4cqw;
  border: 1px solid rgba(244, 244, 237, 0.1);
  border-radius: 2.4cqw;
  background: linear-gradient(#30351f, #22261b);
  box-shadow: 0 1.3cqw 0 #14170f, 0 1.8cqw 2.2cqw rgba(0, 0, 0, 0.28);
  color: var(--c-text-muted);
  font: 700 max(2.7cqw, 10.5px) / 1.15 var(--f-display);
  transition: transform 0.16s var(--ease-smooth), box-shadow 0.16s var(--ease-smooth), background 0.3s, color 0.3s;
}
.bill-key svg { width: max(5.6cqw, 20px); height: max(5.6cqw, 20px); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bill-key:hover { color: var(--c-text); }
.bill-key[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(#e4ff52, #c6f000);
  box-shadow: 0 0.5cqw 0 #6f8700, 0 0 3.4cqw rgba(210, 255, 0, 0.3);
  color: #1a1d15;
  transform: translateY(0.8cqw);
}
.bill-key:active { transform: translateY(1.3cqw); box-shadow: 0 0 0 #14170f, 0 0 2cqw rgba(0, 0, 0, 0.2); }
/* Die letzte Leistung bleibt: kurzes Wackeln statt eines leeren Bons */
.bill-key.nope { animation: keyNope 0.42s ease; }
@keyframes keyNope { 20% { translate: -1cqw 0; } 45% { translate: 1cqw 0; } 70% { translate: -0.5cqw 0; } }

/* Vergleich: Umschalter mit gleitender Lichtpille, darunter drei Karten */
.compare { display: grid; gap: 2.4rem; }
.cmp-mode { position: relative; justify-self: start; display: inline-grid; grid-template-columns: repeat(3, auto); padding: 5px; border: 1px solid var(--c-border); border-radius: var(--r-full); background: var(--c-bg-elevated); }
.cmp-mode button { position: relative; z-index: 1; padding: 0.7rem 1.5rem; border-radius: var(--r-full); font: 700 var(--f-small) / 1.2 var(--f-display); color: var(--c-text-muted); transition: color 0.3s; }
.cmp-mode button:hover { color: var(--c-text); }
/* Ohne Skript trägt der gedrückte Knopf die Farbe selbst, mit Skript die gleitende Pille */
.cmp-mode button[aria-pressed="true"] { background: var(--c-accent); color: var(--c-bg-deep); }
.compare.js .cmp-mode button[aria-pressed="true"] { background: none; }
.cmp-pill { display: none; position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: var(--r-full); background: var(--c-accent); box-shadow: 0 0 24px rgba(210, 255, 0, 0.28); }
.compare.js .cmp-pill { display: block; }
.compare.ready .cmp-pill { transition: transform 0.55s var(--ease-out-expo), width 0.55s var(--ease-out-expo); }
.cmp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.cmp-card { display: flex; flex-direction: column; }
.cmp-top { display: flex; align-items: center; gap: 1rem; }
.cmp-top .feature-ico { flex: none; margin: 0; }
.cmp-top h3 { margin: 0; }
.cmp-card .cmp-for { margin-top: 1rem; }
/* Zählwerk-Stellen haben keine Textgrundlinie: „ab“ und „€“ werden unten bündig gesetzt und so weit angehoben,
   dass sie auf der Grundlinie der Ziffern stehen */
.cmp-card .cmp-price { --o: clamp(3rem, 4.6vw, 4.2rem); display: flex; align-items: flex-end; gap: 0.45rem; margin-top: 1.8rem; font-family: var(--f-display); color: var(--c-text); }
.cmp-price small { margin-bottom: calc(var(--o) * 0.27); font-size: 1.1rem; font-weight: 700; line-height: 1; color: var(--c-text-muted); }
.cmp-eur { margin-bottom: calc(var(--o) * 0.25); font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1; }
.odo { font-size: var(--o); font-weight: 900; letter-spacing: -0.03em; line-height: 1.08; }
/* Zählwerk: je Stelle ein Streifen 0–9 0–9, der auf die Ziffer rollt (zweite Runde, damit beim ersten Auftritt jede
   Stelle einmal durchläuft); Tausenderpunkt und leere Stellen ändern nur die Breite */
.odo-w { --h: 1.08em; display: inline-flex; }
.odo-s { position: relative; display: inline-block; width: 0.62em; height: var(--h); overflow: hidden; transition: width 0.5s var(--ease-out-expo); }
.odo-s[data-c="."] { width: 0.24em; }
.odo-s[data-c=""] { width: 0; }
.odo-r { position: absolute; top: 0; left: 0; right: 0; display: flex; flex-direction: column; text-align: center; transform: translateY(calc(var(--d, 0) * var(--h) * -1)); transition: transform 1.1s var(--ease-out-expo) var(--delay, 0s), opacity 0.3s; }
.odo-r span { height: var(--h); line-height: var(--h); }
.odo-dot { position: absolute; inset: 0; line-height: var(--h); text-align: center; opacity: 0; transition: opacity 0.3s; }
.odo-s[data-c="."] .odo-r, .odo-s[data-c=""] .odo-r { opacity: 0; }
.odo-s[data-c="."] .odo-dot { opacity: 1; }
/* Einheit und Hinweis wechseln weich mit dem Umschalter (alle drei liegen übereinander) */
.cmp-unit, .cmp-note { display: grid; }
.cmp-unit > *, .cmp-note > * { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.4s var(--ease-out-expo), visibility 0s linear 0.25s; }
.compare[data-mode="once"] [data-m="once"], .compare[data-mode="month"] [data-m="month"], .compare[data-mode="year"] [data-m="year"] {
  opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease 0.1s, transform 0.5s var(--ease-out-expo) 0.1s, visibility 0s linear 0s;
}
.cmp-card .cmp-unit { margin-top: 0.3rem; font: 700 var(--f-small) / 1.4 var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text); }
.cmp-card .cmp-note { min-height: 3.4em; margin-top: 0.4rem; font-size: var(--f-small); line-height: 1.7; color: var(--c-teal); }
.cmp-card .checks { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--c-border); }
.cmp-card .cmp-vary { margin-top: 1.2rem; font-size: var(--f-small); }
.cmp-vary b { color: var(--c-text); font-weight: 600; }
.cmp-link { position: relative; z-index: 1; display: inline-flex; gap: 0.5rem; margin-top: auto; padding-top: 1.6rem; font: 700 var(--f-body) var(--f-display); color: var(--c-accent); }
.cmp-link .arrow { transition: transform 0.3s var(--ease-out-expo); }
.cmp-link:hover .arrow { transform: translateX(4px); }

/* Enthalten / kann dazukommen: Preisschilder an zwei Stangen. Ebenen: li.tag (Ring an der Stange, steht still) →
   .tag-drop (fällt herein und pendelt aus) → .tag-sw (schwingt unter der Maus) → Schnur + .tag-card.
   Grundzustand = Endbild; nur mit Skript (armed) warten die Schilder unsichtbar, bis ihre Stange zu sehen ist */
.tagwall { display: grid; gap: clamp(3rem, 6vw, 4.5rem); }
.tagline.reveal { opacity: 1; transform: none; }
.tl-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.6rem; font-size: var(--f-h3); transition: opacity 0.6s ease; }
.tl-head i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(210, 255, 0, 0.1); }
.tl-head svg { width: 22px; height: 22px; fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.extra .tl-head i { background: rgba(42, 157, 143, 0.15); }
.extra .tl-head svg { stroke: var(--c-teal); }
.tl-tags { --cols: 5; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.2rem; padding-top: 6px; list-style: none; }
.extra .tl-tags { --cols: 3; }
/* Stange: Metallrohr mit Glanzkante */
.tl-tags::before { content: ''; position: absolute; top: 0; left: -0.8rem; right: -0.8rem; height: 6px; border-radius: 3px; background: linear-gradient(#78805f, #40462f 55%, #2a2f21); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); }
.tag { position: relative; display: flex; }
.tag::before { content: ''; position: absolute; z-index: 2; top: -10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 2.5px solid #a5ab8c; border-radius: 50%; }
.tag-drop, .tag-sw { flex: 1; display: flex; flex-direction: column; transform-origin: 50% -3px; }
.tag-sw { position: relative; padding-top: 28px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 16px 22px rgba(0, 0, 0, 0.16)); }
/* Schnur vom Ring bis in die Öse */
.tag-sw::before { content: ''; position: absolute; z-index: 1; top: -4px; left: 50%; width: 2px; height: 52px; margin-left: -1px; border-radius: 1px; background: linear-gradient(#c3c8ad, #8f957b); transition: background 0.3s; }
.tag:hover .tag-sw::before { background: var(--c-accent); }
/* Schild: oben abgeschrägte Ecken, Loch mit Metallöse */
.tag-card {
  position: relative;
  flex: 1;
  padding: 46px 1.1rem 1.5rem;
  text-align: center;
  background: linear-gradient(165deg, #fbfbf4, #e6e5d8);
  color: #23271c;
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%, 0 24px);
  -webkit-mask: radial-gradient(circle 6px at 50% 20px, #0000 95%, #000);
  mask: radial-gradient(circle 6px at 50% 20px, #0000 95%, #000);
  transition: filter 0.3s;
}
.tag-card::before { content: ''; position: absolute; top: 11px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border: 3px solid #c6c7b6; border-radius: 50%; }
.tag:hover .tag-card { filter: brightness(1.05); }
.tag-name { font: 800 0.74rem / 1.3 var(--f-display); letter-spacing: 0.14em; text-transform: uppercase; color: #5b604f; }
.tag-val { display: grid; justify-items: center; align-items: center; margin: 0.85rem 0 1rem; font: 900 clamp(1.3rem, 1.7vw, 1.75rem) / 1.15 var(--f-display); letter-spacing: -0.01em; }
.tv-q, .tv-v { grid-area: 1 / 1; }
.tv-q { opacity: 0; color: #a3a891; }
/* Wert als Etikett aus der Auszeichnungspistole: liegt leicht schräg, eine Ecke steht ab (Maske schneidet sie weg,
   ::after ist die umgeklappte Rückseite). Beim Überfahren hebt sich die Ecke etwas mehr und ein Glanz läuft darüber */
@property --peel { syntax: '<length>'; inherits: true; initial-value: 0.34em; }
.tv-v { --sr: -2.5deg; display: block; transform: rotate(var(--sr)); filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.28)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12)); }
.tag:nth-child(2n) .tv-v { --sr: 2deg; }
.tag:nth-child(3n) .tv-v { --sr: -1.2deg; }
.tv-l {
  position: relative;
  display: block;
  padding: 0.22em 0.62em 0.26em;
  border-radius: 0.18em;
  background: #171a12 linear-gradient(160deg, #2c3222, #111410);
  box-shadow: inset 0 0 0 1px rgba(210, 255, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--c-accent);
  text-shadow: 0 0 10px rgba(210, 255, 0, 0.3);
  -webkit-mask: linear-gradient(-45deg, #0000 var(--peel), #000 var(--peel));
  mask: linear-gradient(-45deg, #0000 var(--peel), #000 var(--peel));
  transition: --peel 0.45s var(--ease-out-expo), translate 0.45s var(--ease-out-expo);
}
.tv-l::after { content: ''; position: absolute; right: 0; bottom: 0; width: calc(var(--peel) * 1.4142); height: calc(var(--peel) * 1.4142); background: linear-gradient(-45deg, transparent 50%, #d4d4c6 50%, #f6f6ee 88%); filter: drop-shadow(-1px -1px 1.5px rgba(0, 0, 0, 0.4)); }
.tv-l::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat; }
.tag:hover .tv-l { --peel: 0.52em; translate: 0 -1px; }
.tag:hover .tv-l::before { background-position: -60% 0; transition: background-position 0.9s var(--ease-smooth); }
.tag-desc { font-size: 0.86rem; line-height: 1.5; color: #55594a; }
.tag-desc .nowrap { white-space: nowrap; }
/* Was dazukommen kann: dunkle Schilder, Wert mit türkisem Strich */
.extra .tag-card { background: linear-gradient(165deg, #434a35, #2a2f21); box-shadow: inset 0 0 0 1px rgba(244, 244, 237, 0.1); color: var(--c-text); }
.extra .tag-card::before { border-color: #8f957b; }
.extra .tag-name { color: var(--c-text-muted); }
.extra .tv-q { color: #66705a; }
.extra .tv-l { background: #ecebdf linear-gradient(160deg, #fbfaf1, #dad9ca); box-shadow: inset 0 0 0 1px rgba(42, 157, 143, 0.35), inset 0 1px 0 #fff; color: #17564f; text-shadow: none; }
.extra .tv-l::after { background: linear-gradient(-45deg, transparent 50%, #b5b6a5 50%, #d3d3c4 88%); }
.extra .tv-l::before { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%); }
.extra .tag-desc { color: var(--c-text-muted); }

/* Auftritt: fallen, ausschwingen, dann wird das Etikett über das „?“ geklebt (federt nach, Schatten wird klein), ein Glanz läuft darüber */
.tagwall.armed .tagline:not(.visible) .tag-drop, .tagwall.armed .tagline:not(.visible) .tl-head { opacity: 0; }
.extra { --base: 0.45s; }
.tagline.visible .tag-drop { animation: tagDrop 2.4s calc(var(--base, 0s) + var(--k) * 0.13s) both; }
.tagline.visible .tv-q { animation: tvOut 0.12s ease-out calc(var(--base, 0s) + var(--k) * 0.13s + 1.32s) both; }
.tagline.visible .tv-v { animation: tvSlap 0.6s calc(var(--base, 0s) + var(--k) * 0.13s + 1.05s) both; }
.tagline.visible .tv-l::before { animation: tvGloss 0.9s var(--ease-smooth) calc(var(--base, 0s) + var(--k) * 0.13s + 1.75s); }
@keyframes tagDrop {
  0% { opacity: 0; transform: translateY(-24px) rotate(var(--r)); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  22% { opacity: 1; transform: translateY(0) rotate(calc(var(--r) * -0.6)); animation-timing-function: ease-in-out; }
  44% { transform: translateY(0) rotate(calc(var(--r) * 0.34)); animation-timing-function: ease-in-out; }
  63% { transform: translateY(0) rotate(calc(var(--r) * -0.17)); animation-timing-function: ease-in-out; }
  81% { transform: translateY(0) rotate(calc(var(--r) * 0.06)); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes tvOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes tvSlap {
  0% { opacity: 0; transform: translateY(-0.5em) scale(1.7) rotate(calc(var(--sr) - 10deg)); filter: drop-shadow(0 16px 10px rgba(0, 0, 0, 0.16)) drop-shadow(0 24px 24px rgba(0, 0, 0, 0.1)); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
  45% { opacity: 1; transform: translateY(0) scale(0.92) rotate(var(--sr)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.12)); animation-timing-function: ease-out; }
  70% { transform: translateY(0) scale(1.04) rotate(var(--sr)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--sr)); filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.28)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12)); }
}
@keyframes tvGloss { from { background-position: 160% 0; } to { background-position: -60% 0; } }
/* Unter der Maus: Schwung weg von der Seite, von der sie kommt (Richtung --dir setzt leistung.js) */
.tag-sw.swing { animation: tagSwing 1.7s ease-in-out; }
@keyframes tagSwing {
  0% { rotate: 0deg; }
  18% { rotate: calc(var(--dir, 1) * 8deg); }
  42% { rotate: calc(var(--dir, 1) * -5deg); }
  64% { rotate: calc(var(--dir, 1) * 2.5deg); }
  84% { rotate: calc(var(--dir, 1) * -1deg); }
  100% { rotate: 0deg; }
}

/* Bezahlung: zwei Hälften füllen sich nacheinander, dann wachsen zwölf Monatsbalken (die ersten drei leuchten) */
.pay { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); padding: clamp(1.8rem, 3.5vw, 3rem); border: 1px solid var(--c-border); border-radius: 28px; background: var(--c-bg-elevated); }
.pay-cap { margin-bottom: 1.2rem; font: 700 var(--f-eyebrow) / 1.2 var(--f-display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-teal); }
.pay-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 58px; }
.pay-half { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(244, 244, 237, 0.05); }
.pay-half i { position: absolute; inset: 0; background: linear-gradient(90deg, #9ade30, var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out-expo) 0.3s; }
.pay-half + .pay-half i { background: linear-gradient(90deg, var(--c-accent), #b9f018); transition-delay: 1.1s; }
.pay-half b { position: relative; font: 900 1.3rem / 1 var(--f-display); color: var(--c-text-muted); transition: color 0.4s ease 0.7s; }
.pay-half + .pay-half b { transition-delay: 1.5s; }
.pay.visible .pay-half i { transform: none; }
.pay.visible .pay-half b { color: var(--c-bg-deep); }
.pay-texts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.4rem; }
.pay-part:last-child .pay-texts { grid-template-columns: 1fr; }
.pay-texts h3 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.pay-texts p { color: var(--c-text-muted); font-size: var(--f-small); }
.pay-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; height: 58px; }
.pay-m { border-radius: 6px; background: rgba(42, 157, 143, 0.4); transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease-spring) calc(1.7s + var(--i) * 0.06s); }
.pay-m.min { background: var(--c-accent); box-shadow: 0 0 16px rgba(210, 255, 0, 0.25); }
.pay.visible .pay-m { transform: none; }
.pay-mlab { display: grid; grid-template-columns: 3fr 9fr; gap: 4px; margin-top: 0.5rem; font-size: 0.75rem; color: var(--c-text-muted); }
.pay-mlab span:first-child { color: var(--c-accent); }
.pay-note { margin-top: 1.4rem; font-size: var(--f-small); color: var(--c-text-muted); }

@media (max-width: 1024px) {
  .bill { margin-top: 1rem; }
  .pay { grid-template-columns: 1fr; }
}
/* Ohne durchgehende Stange: jedes Schild hängt an seinem eigenen Nagel */
@media (max-width: 1100px) {
  .tl-tags { --cols: 3; row-gap: 2.4rem; }
  .tl-tags::before { display: none; }
  .tag::before { top: -8px; width: 12px; height: 12px; margin-left: -6px; border: 0; background: radial-gradient(circle at 35% 35%, #d3d7c0, #6d7558 70%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); }
}
@media (max-width: 900px) {
  .cmp-cards { grid-template-columns: 1fr; max-width: 640px; }
  .cmp-card .cmp-note { min-height: 0; }
}
@media (max-width: 720px) {
  .tl-tags { --cols: 2; gap: 2.2rem 0.8rem; }
  .extra .tl-tags { --cols: 1; }
  /* ungerade Zahl: das letzte Schild hängt mittig */
  .tl-tags > .tag:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.4rem); }
  .extra .tl-tags > .tag:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  .tag-card { padding: 44px 0.8rem 1.2rem; }
  .tag-val { font-size: 1.15rem; }
  .tag-desc { font-size: 0.8rem; }
  .pay-texts { grid-template-columns: 1fr; }
  .cmp-mode { justify-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cmp-mode button { padding: 0.7rem 0.4rem; }
}

@media (max-width: 1200px) {
  .demo-note { left: -110px; }
  .demo-alert { right: -70px; }
}
@media (max-width: 1024px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .demo { margin-top: 1rem; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .dpack { grid-template-columns: 1fr; }
  .dpack-visual { order: -1; }
  /* Ablauf als senkrechte Zeitleiste */
  .steps { grid-template-columns: 1fr; row-gap: 2.2rem; max-width: 640px; }
  .steps { --dir: 180deg; }
  .step:not(:last-child)::before, .step:not(:last-child)::after { top: 64px; left: 27px; width: 2px; height: calc(100% + 2.2rem - 72px); }
  .step::after { transform: scaleY(0); transform-origin: top; }
  .steps.visible .step::after { transform: scaleY(1); }
  .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1.3rem; }
  .step-num { grid-row: span 2; margin-bottom: 0; }
  .step h3, .step p { grid-column: 2; }
  .step h3 { margin-top: 0.8rem; }
  .price-card { grid-template-columns: 1fr; }
  .price-main { border-right: 0; border-bottom: 1px solid var(--c-border); }
}
@media (max-width: 720px) {
  .pains, .features, .related { grid-template-columns: 1fr; }
  .scores { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .dpack-visual { height: 315px; }
  .dpack-stage { transform: scale(0.85); transform-origin: top center; }
  .stat { grid-template-columns: 1fr; gap: 1rem; }
  /* Handy: Uhrzeit-Hinweis über dem Gerät, Benachrichtigung mittig am unteren Rand */
  .demo { display: flex; flex-direction: column; align-items: center; }
  .demo-note { position: static; order: -1; width: auto; max-width: 320px; margin-bottom: 1.4rem; text-align: center; }
  .demo-note b { display: inline; font-size: 1.1rem; margin-right: 0.4rem; }
  .demo-alert { left: 50%; right: auto; bottom: -22px; width: 270px; transform: translate(-50%, 20px) scale(0.96); }
  .demo-alert.show { transform: translate(-50%, 0); }
}
@media (max-width: 480px) {
  .phone { width: 296px; height: 600px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-line > span, .hero-line .accent { transform: none; }
  .hero-line .accent { transform: skewX(-8deg); }
  .fade-up, .reveal { opacity: 1; transform: none; }
  .step::after { transform: none; }
}