/* Landingpage – Stil wie Installationsanleitung und Film (DESIGN.md, „Tutorial-Material“):
   weißer Grund, dicke schwarze Linien, Lila als einzige Akzentfarbe (am 08.10.2026 kurz Grün – Git-Marke snipdot-gruen,
   dann Robs Entscheidung zurück zu Lila), Nunito für Überschriften,
   kleine Illustrationen mit fester Linienstärke. Kopf: 3D-Board (3d/szene.js). Nur Hellmodus. */
:root {
  --bg: #FFFFFF;
  --panel: #FFFFFF;
  --ink: #141414;
  --ink-2: #4A4A50;
  --ink-3: #85858C;
  --line: #141414;
  --soft-line: #E4E0EE;
  --accent: #7C5CFF;
  --accent-ink: #6544E8;
  --accent-soft: #E8E1FF;
  --blob: #F3EFFF;
  --tint: #F3EFFF;    /* Hintergrund der abgesetzten Abschnitte (Wellen) */
  --marker: #FFF135;  /* Neongelb wie der Marker der App (MARKER_COLORS) – Dateinamen im Fließtext */
  --grey: #F6F6F6;    /* Fläche von Try it out, Funktionen und Fragen (Robs Wahl im Tweaks-Panel, 08.10.2026) */
  --sand: #FBF0E2;    /* Frame-Farbe „Sand“ aus der App (FRAME_COLORS in js/ui.js) – Probe „mehr Farben“ (Robs Wunsch, 07.10.2026) */
  --claude: #D97757;  /* Claudes Orange – nur im Abschnitt „Use SnipDot with Claude“ (Robs Wunsch, 07.10.2026) */
  --claude-soft: #EDB9A3;
  --claude-tint: #FBEFEA;
  /* Robs Wahl aus dem Tweaks-Panel (01.10.2026): Abschnittsabstand 144 px (vormittags 172; auf schmalen Schirmen
     anteilig kleiner), Laufweite der Überschriften −29/1000 em (h2; h1 10 enger, h3 15 weiter), Fließtext Manrope */
  --pad-n: 144;
  --pad: clamp(calc(var(--pad-n) * 0.55px), calc(var(--pad-n) * 0.077vw), calc(var(--pad-n) * 1px));
  --track: -0.029em;
  --display: "Nunito", "Arial Rounded MT Bold", -apple-system, sans-serif;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sw-l: 3px;        /* eine Linienstärke für Kästen und Illustrationen, wie in der Anleitung */
  --stroke: var(--sw-l);
  --gutter: clamp(16px, 4vw, 40px);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  color-scheme: light;
}

/* Schriften liegen auf dem eigenen Server (nichts von Google o. Ä. laden – Datenschutz): Nunito 600/700/800 für
   Überschriften und Knöpfe, Manrope 400/500/600 für den Fließtext – beide SIL Open Font License */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("fonts/Manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("fonts/Manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("fonts/Manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("fonts/nunito-600.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("fonts/nunito-700.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("fonts/nunito-800.ttf") format("truetype"); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Weiches Scrollen mit Nachlauf übernimmt Lenis (bewegung.js); dessen empfohlene Regeln */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
b, strong { font-weight: 600; } /* Manrope liegt bis 600 vor */
h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
h3 { letter-spacing: calc(var(--track) + 0.015em); }
p { margin: 0; }
a { color: inherit; }
/* Dateinamen im Fließtext wie mit Textmarker (Robs Wunsch, 08.10.2026; vorher Hell-Lila --accent-soft) */
/* Textmarker im Fließtext: im Kopf „on your web space“ und „No subscription“ (Rob, 08.10.2026) */
mark { color: var(--ink); background: var(--marker); padding: 0 4px; margin-inline: -1px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
code { font-family: var(--mono); font-size: 0.86em; color: var(--ink); background: var(--marker); padding: 1px 6px; border-radius: 3px; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Mauszeiger im Illustrationsstil (Versuch, 01.10.2026): bewegung.js setzt data-cursor und die Bilder --cur/--cur-link */
html[data-cursor], html[data-cursor] * { cursor: var(--cur); }
/* auch alles darin (Symbol, Bild, Schrift im Knopf) – sonst setzt die Regel oben dort wieder den Pfeil (Rob, 08.10.2026) */
html[data-cursor] :is(a[href], button, summary, label, select, input[type="range"]),
html[data-cursor] :is(a[href], button, summary, label) * { cursor: var(--cur-link); }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Illustrationen (wie anleitung.css) ---------- */
.bild svg { display: block; width: 100%; height: auto; overflow: visible; }
.bild svg * { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.bild .ln { stroke: var(--line); stroke-width: var(--sw-l); }
.bild .ps { stroke: var(--accent); stroke-width: var(--sw-l); } .bild .ws { stroke: var(--on-accent, var(--panel)); stroke-width: var(--sw-l); }
.bild .w { fill: var(--panel); } .bild .p { fill: var(--accent); } .bild .lp { fill: var(--accent-soft); }
.bild .k { fill: var(--ink); } .bild .n { fill: none; }
.bild .lps { stroke: var(--accent-lps, #C9BCFF); stroke-width: var(--sw-l); } /* Verbindungen der Geräte-Illustration */
.bild text { font-family: var(--display); font-weight: 800; fill: #FFFFFF; text-anchor: middle; }
.bild text:not([class]) { fill: var(--on-accent, #FFFFFF); }
/* Weißer Rand um die großen Formen (medien.svg, teilen.svg) – nur auf dunklen Boxen (--tile-halo), damit die schwarzen
   Linien dort sichtbar bleiben; die Farben der Illustration werden nicht umgekehrt (Rob, 08.10.2026) */
.bild .halo { stroke: var(--tile-halo, none); stroke-width: calc(var(--sw-l) * 3); }
.bild .blob { fill: var(--blob); } .bild .dotgrid { fill: var(--accent-soft); }

/* ---------- Knöpfe ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 17px/1 var(--display); text-decoration: none; white-space: nowrap;
  color: #FFFFFF; background: var(--ink); border: var(--stroke) solid var(--ink); border-radius: 999px;
  padding: 15px 24px;
  transition: transform 0.18s var(--ease-back), box-shadow 0.18s var(--ease-back);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 5px 0 var(--edge, var(--accent)); }
.btn:active { transform: translateY(0); box-shadow: 0 0 0 var(--accent); transition-duration: 0.06s; }
.btn-ghost { color: var(--ink); background: var(--panel); }
.btn-light { color: var(--ink); background: var(--panel); border-color: var(--panel); }
.btn-light:hover { box-shadow: 0 5px 0 var(--accent); } /* Lila wie die Knöpfe oben (Rob, 08.10.2026; vorher Hell-Lila) */
.btn-small { font-size: 15px; padding: 11px 18px; }
.play-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: var(--stroke) solid var(--ink); flex: none; display: grid; place-items: center; }
/* Dreieck mit dem Schwerpunkt in der Kreismitte, wie beim Abspielknopf des Films (Rob, 01.10.2026: stand zu weit rechts) */
.play-dot svg { display: block; width: 16px; height: 16px; fill: #FFFFFF; }

/* Kurzinfos ohne Rahmen und Fläche, damit sie nicht wie Knöpfe aussehen (Rob, 01.10.2026): lila Punkt + Text */
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.facts li { display: flex; align-items: center; gap: 9px; font: 700 15px/1.3 var(--display); color: var(--ink-2); }
.facts li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--facts-dot, var(--accent)); flex: none; }

/* ---------- Kopf mit 3D-Board ---------- */
/* Seit 14.10.2026 (Robs Wunsch): Fläche dunkles Lila wie zuvor „Try it out“, ohne Punkteraster und ohne Kreis hinter
   dem Board, unten eine Welle wie bei den abgesetzten Abschnitten. Auf dunkler Fläche (.is-dark) Schrift weiß, Logo
   weiß mit neon-gelbem Punkt, Kante beim Drüberfahren helleres Lila wie in „Try it out“. Das Punkteraster mit weicher
   weißer Hinterlegung (Stand bis 13.10.2026) gibt es im Tweaks-Panel des Entwurfs weiter (.has-dots). */
.hero { --hero-bg: #7C5CFF; position: relative; isolation: isolate; background-color: var(--hero-bg); margin-bottom: 48px; }
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -23px; height: 24px; background: var(--hero-bg); transform: scaleY(-1);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cpath d='M0 12 Q40 0 80 12 T160 12 V24 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 0 / 160px 24px repeat-x; mask: var(--wave) 0 0 / 160px 24px repeat-x;
}
/* Folgt ein farbiger Abschnitt, liegt dessen Welle direkt über dem Kopf (wie bei zwei farbigen Abschnitten hintereinander) */
.hero:has(+ .band.alt) { margin-bottom: 0; }
.hero:has(+ .band.alt)::after { display: none; }
.hero + .band.alt { margin-top: 0; }
.hero.is-dark { --edge: #9F87FF; }
.hero.is-dark h1, .hero.is-dark .nav-logo { color: #FFFFFF; }
.hero.is-dark .nav-logo { --logo-dot: #FFF135; }
.hero.is-dark .lead { color: #ECE8FF; }
.hero.is-dark .req { color: #FFFFFF; }
.hero.is-dark .req::before { background: #FFFFFF; color: var(--ink); }
/* Punkteraster wie der Board-Hintergrund der App (Robs Wahl „Dots“, 01.10.2026) – nur noch über das Tweaks-Panel */
.hero.has-dots { background-image: radial-gradient(circle, #DCD3FF 1.6px, transparent 2.1px); background-size: 24px 24px; background-position: 12px 12px; }
/* Text, Knöpfe und Navigation liegen dann auf weichem Weiß, damit Punkte und Schrift sich nicht mischen */
.hero.has-dots :is(.hero-text, .nav-logo) { background: var(--hero-bg); box-shadow: 0 0 26px 18px var(--hero-bg); border-radius: 28px; }
/* Knopf oben: Schein gegen das Punkteraster. Die Kante steht in jedem Zustand an erster Stelle (in Ruhe unsichtbar unter
   dem Knopf), sonst blendet der Browser beim Drüberfahren den Schein in die Kante über (Rob, 01.10.2026: sah aus wie ein
   lila Blur). So bewegt sich nur die Kante, wie beim Knopf im Kopf. */
.hero.has-dots .nav .btn-small { box-shadow: 0 0 0 var(--edge, var(--accent)), 0 0 26px 18px var(--hero-bg); }
.hero.has-dots .nav .btn-small:hover { box-shadow: 0 5px 0 var(--edge, var(--accent)), 0 0 26px 18px var(--hero-bg); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: none; }
.hero.is-ready .hero-canvas { display: block; }
/* Navigationszeile 16 px tiefer (Rob, 08.10.2026): Abstand oben, die Zeile selbst bleibt 84 px hoch */
.nav { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; height: 100px; padding-top: 16px; }
.nav-logo { display: flex; color: var(--ink); --logo-dot: var(--accent); margin-right: auto; }
.logo { display: block; height: 30px; width: auto; }
/* Burger-Menü (Robs Wunsch, 14.10.2026): runder Knopf wie die übrigen Kreise der Seite (3 px Rand), darunter eine
   weiße Karte mit den Links; die durchsichtige Fläche über der Karte (padding-top) hält das Menü offen, während die
   Maus vom Knopf zur Karte wandert. Öffnen/Schließen in seite.html (.is-open). */
.menu { position: relative; }
/* Knopf = nur drei Striche, ohne Kreis (Rob, 14.10.2026): weiß auf dunklem Kopf, sonst schwarz; offen ein × */
.menu-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; cursor: pointer; background: none; border: 0; border-radius: 10px; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after {
  display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--burger, var(--ink)); transition: transform 0.2s, background-color 0.2s;
}
.hero.is-dark { --burger: #FFFFFF; }
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
.menu-btn span::before { top: -8px; } .menu-btn span::after { top: 8px; }
.menu-btn:hover span::before { transform: translateY(-1px); } .menu-btn:hover span::after { transform: translateY(1px); }
.menu.is-open .menu-btn span { background: transparent; }
.menu.is-open .menu-btn span::before { transform: translateY(8px) rotate(45deg); }
.menu.is-open .menu-btn span::after { transform: translateY(-8px) rotate(-45deg); }
.menu-panel { display: none; position: absolute; right: 0; top: 100%; padding-top: 12px; z-index: 10; }
.menu.is-open .menu-panel { display: block; animation: menu-pop 0.28s var(--ease-back); transform-origin: 90% 0; }
.menu-list {
  display: flex; flex-direction: column; min-width: 220px; padding: 8px;
  background: var(--panel); border: var(--stroke) solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--edge, var(--accent));
}
.menu-list a { font: 700 17px/1 var(--display); color: var(--ink); text-decoration: none; padding: 13px 14px; border-radius: 14px; }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--accent-soft); }
@keyframes menu-pop { from { opacity: 0; scale: 0.92; } }
/* Tweaks-Panel „Navigation: Links“: die Links wie bis 13.10.2026 nebeneinander, auf schmalen Schirmen trotzdem Burger */
@media (min-width: 901px) {
  html[data-nav="links"] .menu-btn { display: none; }
  html[data-nav="links"] .menu-panel { display: block; position: static; padding: 0; animation: none; }
  html[data-nav="links"] .menu-list { flex-direction: row; gap: 26px; min-width: 0; padding: 0 4px; background: none; border: 0; box-shadow: none; }
  html[data-nav="links"] .menu-list a { padding: 8px 0; border-radius: 0; background: linear-gradient(var(--edge, var(--accent)), var(--edge, var(--accent))) 0 100% / 0 3px no-repeat; transition: background-size 0.2s; }
  html[data-nav="links"] .menu-list a:hover { background-size: 100% 3px; }
  html[data-nav="links"] .hero.is-dark .menu-list a { color: #FFFFFF; }
}

.hero-main {
  position: relative; /* bewusst ohne z-index: Text über, Bühne unter der 3D-Leinwand */
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 24px;
  min-height: min(640px, calc(100svh - 100px)); padding-block: 16px 24px;
}
.hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; max-width: 560px; } /* 560 statt 520 (14.10.2026): Platz für die zwei Kacheln */
h1 { font-size: clamp(46px, 6.2vw, 80px); line-height: 1.0; letter-spacing: calc(var(--track) - 0.01em); font-weight: 800; }
.lead { font-size: 20px; line-height: 1.55; color: var(--ink-2); }
/* zweite Fassung des Kopftexts nur im Entwurf (Tweaks-Panel „Hero – text: One line“) */
.lead-b { display: none; }
html[data-hero-text="line"] .lead-b { display: block; }
html[data-hero-text="line"] :is(.lead-a, .hero-ways) { display: none; }
/* Die zwei Wege im Kopf als Text in zwei Spalten, dazwischen eine senkrechte Linie (Rob, 14.10.2026: zuerst Kacheln –
   zu viele Knöpfe, dann zwei Zeilen untereinander): Name fett, darunter eine kurze Zeile; schmal untereinander mit Linie
   dazwischen */
.hero-ways { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 500px; }
.hero-ways li { display: flex; flex-direction: column; gap: 4px; padding-right: 22px; }
.hero-ways li + li { padding: 0 0 0 22px; border-left: 2px solid var(--ways-line, var(--soft-line)); }
.hero-ways b { display: flex; align-items: center; gap: 8px; font: 800 20px/1.2 var(--display); color: var(--ink); letter-spacing: calc(var(--track) + 0.015em); }
/* kleines Symbol vor dem Namen (Rob, 14.10.2026): Globus für Online, Laptop für Desktop – Linien in Schriftfarbe */
.ways-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-ways span { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.hero.is-dark { --ways-line: rgba(255, 255, 255, 0.4); }
.hero.is-dark .hero-ways b { color: #FFFFFF; }
.hero.is-dark .hero-ways span { color: #ECE8FF; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bühne: Platzhalter, in den die Kamera das Board einpasst; ohne WebGL steht dort die gezeichnete Illustration */
.stage { position: relative; z-index: 0; aspect-ratio: 4 / 3; }
/* Ein runder lila Glow hinter dem ganzen Objekt (Rob, 01.10.2026: nicht jedes Element einzeln, größer, rund).
   Kreis in Lila, weich gezeichnet: Stärke = Deckkraft, Weichheit = Unschärfe, Größe = Durchmesser × Bühnenbreite.
   Liegt unter der 3D-Leinwand und über dem Punkteraster; das Tweaks-Panel des Entwurfs ändert die drei Werte. */
.board-glow {
  --glow-a: 0.8; --glow-soft: 0px; --glow-size: 0.7; /* Robs Wahl aus dem Tweaks-Panel (08.10.2026; vorher 0,4 / 0,65) */
  position: absolute; left: 50%; top: 50%; width: calc(var(--glow-size) * 100%); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: rgba(124, 92, 255, var(--glow-a)); filter: blur(var(--glow-soft));
  pointer-events: none;
}
.board-glow[hidden] { display: none; }
.fallback { position: absolute; inset: 0; display: grid; place-items: center; }
.fallback svg { width: 100%; }
.fallback svg .blob { display: none; } /* auf dem Punkteraster ohne Blob */
.hero.is-ready .fallback { visibility: hidden; }

/* ---------- Abschnitte ---------- */
/* Jeder zweite Abschnitt hell-lila mit Wellenkante oben und unten, ohne Linie (Robs Wahl „Waves“, 01.10.2026).
   Die Welle ist eine Maske in der Farbe --tint, so lässt sich die Farbe je Abschnitt umstellen. */
.band { padding-block: calc(var(--pad) * 0.8); }
.band.alt { position: relative; background: var(--tint); margin-block: 24px; }
.band.alt::before, .band.alt::after {
  content: ""; position: absolute; left: 0; right: 0; height: 24px; background: var(--tint);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24' viewBox='0 0 160 24'%3E%3Cpath d='M0 12 Q40 0 80 12 T160 12 V24 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 0 / 160px 24px repeat-x; mask: var(--wave) 0 0 / 160px 24px repeat-x;
}
/* Flächen: Robs Wahl im Tweaks-Panel (08.10.2026, zweite Runde) – Try it out dunkles Lila mit weißer Schrift,
   How to set it up Himmel, Funktionen und Fragen Grau, „Your ideas…“ hell-lila */
#features, #faq { --tint: var(--grey); }
/* Try it out seit 14.10.2026 hell-lila (vorher dunkles Lila – das hat jetzt der Kopf direkt darüber) */
#example { --tint: #F3EFFF; }
#film { --tint: #E3ECF8; }
/* auf dunklem Lila sähe man die lila Kante beim Drüberfahren nicht (Rob, 08.10.2026, nach Neon-Gelb, Hell-Lila und Schwarz):
   Knopf mit etwas hellerem Lila #9F87FF (wie die Kreise auf dunkel-lila Boxen), Board-Bild Schwarz wie die Linien */
#example.is-dark .btn:hover { box-shadow: 0 5px 0 #9F87FF; }
#example.is-dark .example-shot:hover { box-shadow: 0 6px 0 var(--ink); }
/* Zwei farbige Abschnitte direkt hintereinander: ohne Lücke, die Welle des unteren liegt über dem oberen (bei gleicher
   Farbe unsichtbar) */
.band.alt:has(+ .band.alt) { margin-bottom: 0; }
.band.alt:has(+ .band.alt)::after { display: none; }
.band.alt + .band.alt { margin-top: 0; }
.band.alt::before { top: -23px; }
.band.alt::after { bottom: -23px; transform: scaleY(-1); }
.section { display: flex; flex-direction: column; gap: 36px; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
/* Überschriften ohne lila Punkt davor (Robs Wunsch, 08.10.2026) */
h2 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: var(--track); font-weight: 800; }
.section-head p { font-size: 19px; color: var(--band-p, var(--ink-2)); }
/* Abschnitt auf dunkler Fläche (im Tweaks-Panel z. B. dunkles Lila): Überschrift und Einleitung weiß über --band-ink/-p */
.band.alt h2 { color: var(--band-ink, inherit); }

/* Beispiel-Board: Text links, echtes Bildschirmfoto der App rechts (Robs Wunsch, 01.10.2026: statt vieler Bilder
   ein Foto und ein Link zum Ausprobieren) */
.example { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px; }
.example-text { display: flex; flex-direction: column; gap: 18px; }
.example-text > p { font-size: 19px; color: var(--band-p, var(--ink-2)); }
.btn-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.example-shot {
  display: block; border: var(--stroke) solid var(--line); border-radius: 24px; overflow: hidden; background: var(--panel);
  transition: transform 0.25s var(--ease-back), box-shadow 0.25s var(--ease-back);
}
.example-shot img { display: block; width: 100%; height: auto; }
.example-shot:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 6px 0 var(--accent); }

/* Film */
.film { position: relative; margin: 0; aspect-ratio: 16 / 9; border: var(--stroke) solid var(--line); border-radius: 28px; overflow: hidden; background: var(--panel); }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play {
  position: absolute; left: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px);
  display: flex; align-items: center; gap: 12px; padding: 6px 18px 6px 6px;
  font: 800 17px/1 var(--display); color: var(--ink); cursor: pointer;
  background: var(--panel); border: var(--stroke) solid var(--line); border-radius: 999px;
  transition: transform 0.18s var(--ease-back), box-shadow 0.18s var(--ease-back);
}
.film-play-dot {
  width: 52px; height: 52px; border-radius: 50%; background: var(--accent); border: var(--stroke) solid var(--line);
  display: grid; place-items: center; flex: none;
}
.film-play-dot svg { width: 26px; height: 26px; fill: #FFFFFF; }
.film-play-label { text-box: trim-both cap alphabetic; }
.film-time { color: var(--ink-3); margin-left: 6px; }
.film-play:hover { transform: translateY(-3px); box-shadow: 0 5px 0 var(--accent); }
.film.is-playing .film-play { display: none; }

/* Karten */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card {
  background: var(--tile-bg, var(--panel)); color: var(--tile-ink, var(--ink));
  border: var(--stroke) solid var(--line); border-radius: 24px; padding: 24px 24px 26px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.25s var(--ease-back);
}
.card:hover { transform: translateY(-4px) rotate(-0.4deg); }
.card .icon { width: 88px; margin: -4px 0 8px -4px; }
/* Funktionen als Bento: zwei breite Kacheln (Medien oben links, Teilen unten rechts) */
.bento .wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 28px; }
.bento .icon-wide { width: 232px; flex: none; margin: 0 4px; }
.card-text { display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 22px; line-height: 1.25; font-weight: 800; }
.card p { font-size: 16px; color: var(--tile-p, var(--ink-2)); }
/* Online oder Mac (Robs Wunsch, 14.10.2026): ein Abschnitt, zwei gleich große Bereiche als Karten – Kopf mit Symbol,
   drei Schritte (Nummer links), darunter was die Fassung kann und braucht (an den Boden gerückt, damit beide Listen
   auf einer Höhe beginnen) */
/* Gemeinsamer erster Schritt über beiden Karten (14.10.2026): Fläche hell-lila ohne Rand (Rob: zu viele schwarze
   Linien), darunter zwei lila Pfeile, die sich von der Mitte zu den Mitten der zwei Karten teilen (Kurve gestreckt,
   Strich gleich stark, Spitze fest); die Karten zählen ab 2 weiter. Schmal (eine Spalte) ohne Pfeile. */
.steps.way-first {
  grid-template-columns: minmax(0, 1fr); padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
  background: #F3EFFF; border-radius: 24px;
}
.way-first .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding: 0; }
.way-first .step::before { grid-row: 1 / span 2; margin: 0; }
.way-first .step h3 { font-size: 22px; }
.way-first .step p { font-size: 16px; color: var(--ink-2); max-width: 760px; }
/* Linien statt Pfeilen (Rob, 14.10.2026: die Spitzen sahen schief aus): beginnen direkt an der lila Fläche und enden
   direkt an den Karten (margin hebt den Abstand der Sektion von 36 px auf, die Linie füllt die ganze Höhe, gerade
   Enden), Farbe helles Pastell-Lila – im Tweaks-Panel des Entwurfs umschaltbar (--fork) */
.way-fork { --fork: #C9BCFF; position: relative; height: 84px; margin: -36px 0; }
.way-fork svg { position: absolute; top: 0; height: 100%; width: calc(25% + 4.5px); overflow: visible; }
.way-fork .fork-l { left: calc(25% - 4.5px); }
.way-fork .fork-r { left: 50%; }
.way-fork path { fill: none; stroke: var(--fork); stroke-width: 4px; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
.way .steps { counter-reset: step 1; }
/* gemeinsames Zeilenraster (subgrid): Kopf, Schritte, Link und Liste stehen in beiden Karten auf gleicher Höhe */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.way {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 22px; align-content: start;
  padding: clamp(22px, 3vw, 32px); scroll-margin-top: 24px; margin-bottom: 18px;
  background: var(--panel); border: var(--stroke) solid var(--line); border-radius: 24px;
}
.way-head { display: flex; align-items: center; gap: 16px; }
.way-head .icon { width: 76px; flex: none; }
.way-title { display: flex; flex-direction: column; gap: 4px; }
.way-title h3 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: var(--track); }
.way-title p { font-size: 16px; color: var(--ink-2); }
.way .steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.way .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: start; padding: 0; }
.way .step::before { grid-row: 1 / span 2; margin: 0; width: 48px; height: 48px; font-size: 19px; padding-top: calc((48px - 2 * var(--stroke) - 1cap) / 2); }
.way .step h4 { margin: 0; padding-top: 3px; font: 800 19px/1.25 var(--display); letter-spacing: calc(var(--track) + 0.015em); }
.way .step p { font-size: 15.5px; color: var(--ink-2); }
/* Knöpfe „PDF guide“ und „Video guide“ in jeder Karte (Rob, 14.10.2026; ersetzen den Film-Abschnitt und den Link zur
   Anleitung) – weiße kleine Knöpfe wie „Watch the film“ früher im Kopf */
.guides { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.guides .btn-small { padding: 10px 16px; }
.guides .play-dot { width: 20px; height: 20px; }
.guides .play-dot svg { width: 14px; height: 14px; }
/* Videofenster: Film groß mit Bedienelementen, × rund wie bei den Rechtstexten */
dialog.video-dlg {
  width: min(1120px, calc(100vw - 32px)); padding: 0; overflow: hidden; background: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: 28px;
}
dialog.video-dlg[open] { display: block; animation: soon-pop 0.35s var(--ease-back); }
dialog.video-dlg::backdrop { background: rgba(20, 20, 20, 0.6); }
dialog.video-dlg video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #FFFFFF; }
dialog.video-dlg .legal-close { position: absolute; top: 12px; right: 12px; z-index: 1; }
html:has(dialog.video-dlg[open]) { overflow: hidden; }
/* Vergleichstabelle unter den Karten (Robs Wunsch, 14.10.2026): weiße Karte, Kopfzeile mit Symbol und Namen,
   Zeilen durch Haarlinien getrennt, Haken = lila Kreis mit 3-px-Rand wie die Schrittnummern, Kreuz = heller Kreis;
   kleine Zusätze unter dem Zeichen, unten was jede Fassung braucht */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Fläche hell-lila ohne Rand (Rob, 14.10.2026; zuerst weiß mit 3-px-Rand), Linien und Kreuz im passenden Lila-Grau */
.compare { --cmp-line: #E1D8FF; background: #F3EFFF; border-radius: 24px; padding: 6px clamp(16px, 3vw, 32px) clamp(14px, 2vw, 20px); }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table thead th { padding: 18px 8px 14px; text-align: center; vertical-align: bottom; }
.compare-table thead th > span { display: inline-flex; align-items: center; gap: 8px; font: 800 20px/1.2 var(--display); letter-spacing: calc(var(--track) + 0.015em); }
.compare-table tbody tr, .compare-table tfoot tr { border-top: 2px solid var(--cmp-line, var(--soft-line)); }
.compare-table tbody tr:first-child { border-top: 0; } /* keine Linie zwischen Kopfzeile und erster Zeile (Rob, 14.10.2026) */
.compare-table tbody th { padding: 14px 12px 14px 0; text-align: left; font: 700 17px/1.3 var(--display); }
.compare-table tbody th small { display: block; margin-top: 2px; font: 400 14px/1.4 var(--font); color: var(--ink-3); }
.compare-table td { width: 24%; padding: 12px 8px; text-align: center; vertical-align: middle; }
.compare-table td small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.compare-table tfoot td { width: auto; padding: 16px 0 6px; text-align: left; font-size: 15px; color: var(--ink-2); }
.compare-table tfoot b { font-family: var(--display); font-weight: 800; color: var(--ink); }
.yes, .no { display: inline-block; width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; background: center / 16px 16px no-repeat; }
.yes {
  background-color: var(--accent); border: var(--stroke) solid var(--line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 L6.6 11.4 L12.5 4.8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.no {
  background-color: #FFFFFF; border: var(--stroke) solid var(--cmp-line, #E2E1DC);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 4.8 L11.2 11.2 M11.2 4.8 L4.8 11.2' fill='none' stroke='%2385858C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Hinweis „Web version“ an Teilen und Claude (14.10.2026) */
.tag {
  align-self: flex-start; font: 800 12px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink);
}
/* Farbige Boxen bei „Everything a board needs“ (Robs Wahl im Tweaks-Panel, 08.10.2026). Die Illustration folgt der
   Fläche: --accent = kräftige Füllung, --accent-soft = Kreis (etwas dunkler als die Box), --accent-lps = helle Linien,
   --on-accent = Schrift/Linien auf der Füllung. Fließtext auf Farben #2E2E33 (--ink-2 ist dort zu blass). */
.tile-lilacsoft, .tile-lightgreen, .tile-neonyellow, .tile-lightyellow, .tile-grey { --tile-p: #2E2E33; --on-accent: #141414; }
.tile-lilacsoft { --tile-bg: #E8E1FF; --accent-soft: #D6CAFF; --on-accent: #FFFFFF; } /* Füllung bleibt Lila */
.tile-lightgreen { --tile-bg: #B8FA9B; --accent: #3FCF1A; --accent-soft: #9EEC7C; --accent-lps: #86DD62; }
.tile-neonyellow { --tile-bg: #FFF135; --accent: #FF9F1A; --accent-soft: #F5DE12; --accent-lps: #EBD10A; }
.tile-lightyellow { --tile-bg: #FFF5CC; --accent: #F5B921; --accent-soft: #F8E3A0; --accent-lps: #F0D57A; }
.tile-grey { --tile-bg: var(--grey); --accent-soft: #E9E9E9; --on-accent: #FFFFFF; }
/* Dunkle Boxen: Illustration nicht umkehren, weißer Rand um die großen Formen; Schwarz mit lila Illustration,
   dunkles Lila mit Neon-Gelb und hellerem Lila */
.tile-black, .tile-lilac { --tile-ink: #FFFFFF; --tile-halo: #FFFFFF; }
.tile-black { --tile-bg: #141414; --tile-p: #C9C9CF; }
.tile-lilac { --tile-bg: #7C5CFF; --tile-p: #ECE8FF; --accent: #FFF135; --accent-soft: #9F87FF; --accent-lps: #C9BCFF; --on-accent: #141414; }

/* Kleine Bewegung in den Illustrationen der Funktionen beim Drüberfahren (Robs Wunsch, 01.10.2026). Haken sind
   Klassen hv-… in Landing page/bilder/*.svg; das Ordner-Symbol kommt unverändert aus der Anleitung, darum dort über
   die Reihenfolge. Einheiten in px = Einheiten der viewBox. Nur mit Maus, nicht bei „Bewegung reduzieren“. */
.bento [class*="hv-"], .bento [data-bild="paket"] svg > path:nth-of-type(2) { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bento [class*="hv-"], .bento [data-bild="paket"] svg > path { transition: transform 0.45s var(--ease-back); }
  /* Bilder, PDFs, Links: die drei Kreise fächern auf */
  .bento .card:hover .hv-l { transform: translate(-7px, 2px) rotate(-8deg); }
  .bento .card:hover .hv-m { transform: translateY(-5px); }
  .bento .card:hover .hv-r { transform: translate(7px, 2px) rotate(8deg); }
  /* Text und Formen: Kreis hüpft heraus, Kasten kippt, Zeilen schreiben sich neu */
  .card:hover [data-bild="text"] .hv-dot { transform: translate(5px, -6px) scale(1.12); }
  .card:hover [data-bild="text"] .hv-box { transform: rotate(-4deg); }
  [data-bild="text"] .hv-line { transform-origin: 0 50%; }
  .card:hover [data-bild="text"] .hv-line { animation: hv-type 0.35s 0.08s ease-out both; }
  .card:hover [data-bild="text"] .hv-line + .hv-line { animation-delay: 0.2s; }
  /* Stift und Marker: der Stift zieht den Strich noch einmal */
  .card:hover [data-bild="stift"] .hv-stroke { animation: hv-reveal 0.7s linear both; }
  .card:hover [data-bild="stift"] .hv-pen { animation: hv-pen 0.7s linear both; }
  /* Mind maps: Kasten ploppt, Pfeil zeichnet sich, Kreis hüpft */
  .card:hover [data-bild="pfeile"] .hv-from { animation: hv-pop-small 0.35s var(--ease-back); }
  .card:hover [data-bild="pfeile"] .hv-line { animation: hv-reveal 0.3s 0.1s ease-in-out both; }
  .card:hover [data-bild="pfeile"] .hv-head { animation: hv-pop 0.3s 0.36s both; }
  .card:hover [data-bild="pfeile"] .hv-to { transform-origin: 50% 100%; animation: hv-hop 0.55s 0.5s; }
  /* Frames und Gruppen: Name wird länger, beide Objekte hüpfen nacheinander */
  [data-bild="frames"] .hv-name { transform-origin: 0 50%; }
  .card:hover [data-bild="frames"] .hv-name { transform: scaleX(1.4); }
  [data-bild="frames"] :is(.hv-a, .hv-b) { transform-origin: 50% 100%; --hop: -4px; } /* bleibt mit Abstand im Rahmen */
  .card:hover [data-bild="frames"] .hv-a { animation: hv-hop 0.55s; }
  .card:hover [data-bild="frames"] .hv-b { animation: hv-hop 0.55s 0.12s; }
  /* Ordner: Vorderseite klappt ein Stück auf */
  .bento [data-bild="paket"] svg > path:nth-of-type(2) { transform-origin: 50% 100%; }
  .card:hover [data-bild="paket"] svg > path:nth-of-type(2) { transform: skewX(-10deg) scaleY(0.84); }
  /* Teilen: lila Zeiger schiebt den Kasten, schwarzer Zeiger wählt den Kreis */
  .card:hover [data-bild="teilen"] :is(.hv-box, .hv-c1) { transform: translate(10px, -5px); }
  .card:hover [data-bild="teilen"] .hv-c2 { transform: translate(13px, -7px); }
  .card:hover [data-bild="teilen"] .hv-dot { transform: scale(1.14); transition-delay: 0.1s; }
}
@keyframes hv-type { from { transform: scaleX(0); } }
@keyframes hv-reveal { from { clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px -8px -8px -8px); } }
/* Stiftspitze folgt dem Strich (Punkte der Kurve relativ zum Ende 62|72) */
@keyframes hv-pen {
  0% { transform: translate(-38px, 2px); } 16% { transform: translate(-32px, -2px); } 34% { transform: translate(-25px, 7px); }
  47% { transform: translate(-18px, 4px); } 74% { transform: translate(-10px, -2px); } 100% { transform: none; }
}
@keyframes hv-pop { 0% { transform: scale(0); } 65% { transform: scale(1.2); } 100% { transform: none; } }
@keyframes hv-pop-small { 40% { transform: scale(1.1); } }
@keyframes hv-hop {
  15% { transform: scale(1.08, 0.9); } 45% { transform: translateY(var(--hop, -8px)) scale(0.96, 1.06); }
  75% { transform: scale(1.06, 0.94); } 100% { transform: none; }
}

/* Geräte */
.devices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.devices-text { display: flex; flex-direction: column; gap: 18px; }
.devices-text p { font-size: 19px; color: var(--ink-2); }
/* Works with Claude (07.10.2026): breite Illustration unter der Überschrift, auf schmalen Bildschirmen die hohe Fassung */
/* Claude-Rubrik wie am 08.10.2026 festgelegt (bleibt auch nach der Rückkehr zu Lila, Robs Entscheidung): Kreis statt
   Oval dahinter (60 % der Breite, mittig), das SnipDot-Board darin in Claudes Rot */
.claude-stage {
  width: 100%; max-width: 860px; justify-self: center; align-self: center; padding: clamp(18px, 4vw, 44px) clamp(14px, 5vw, 64px);
  position: relative; isolation: isolate;
  --accent: var(--claude); --accent-soft: #F6DCD1;
}
.claude-stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--claude-tint); z-index: -1;
}
.claude-stage .bild .lps { stroke: var(--claude-soft); }
.claude-tall { display: none; }
.bild .co { fill: var(--claude); } .bild .cl { fill: var(--claude-soft); } .bild .cos { stroke: var(--claude); stroke-width: var(--sw-l); } .bild .cls { stroke: var(--claude-soft); stroke-width: var(--sw-l); }
.bild .tt, .bild .tn { fill: var(--ink); text-anchor: start; }
.bild .tb { fill: var(--ink-2); text-anchor: start; font-family: var(--font); font-weight: 600; }
.bild .tw { fill: #FFFFFF; text-anchor: start; }
.bild .twb { fill: #FFFFFF; text-anchor: start; font-family: var(--font); font-weight: 700; }
@media (max-width: 640px) {
  .claude-stage { padding: 18px 10px; }
  .claude-stage::before { width: 100%; } /* hohe Fassung: Kreis so breit wie die Seite */
  .claude-wide { display: none; }
  .claude-tall { display: block; }
}
/* Kreis statt Oval hinter den Geräten (Robs Wunsch, 08.10.2026; wie bei der Claude-Rubrik und im Kopf): 65 % der Breite,
   mittig, die Illustration ragt links und rechts darüber hinaus. Kreis Neon-Grün (Robs Wahl im Tweaks-Panel, 08.10.2026),
   die Illustration in dessen Familie, die Punkte vor den Stichpunkten in der Farbe des Kreises */
.devices { --facts-dot: #7DF747; }
/* Geräte und Claude gehören zusammen: weniger Abstand dazwischen (Robs Wunsch, 08.10.2026) – 1 × --pad statt 1,6 × */
#devices { padding-bottom: calc(var(--pad) * 0.5); }
#claude { padding-top: calc(var(--pad) * 0.5); }
.devices-bild {
  max-width: 540px; justify-self: center; width: 100%; padding: 4% 6%; position: relative; isolation: isolate;
  --blob: #7DF747; --accent: #141414; --accent-soft: #B8FA9B; --accent-lps: #5ED62C; --on-accent: #FFFFFF;
}
.devices-bild::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 65%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--blob); z-index: -1;
}

/* Schritte (wie die Nummern in der Anleitung) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.step { counter-increment: step; display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.step::before {
  content: counter(step);
  box-sizing: border-box; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 8px;
  display: block; text-align: center; background: var(--accent); color: #FFFFFF; border: var(--stroke) solid var(--line);
  font: 800 22px/1 var(--display);
  text-box: trim-both cap alphabetic; padding-top: calc((56px - 2 * var(--stroke) - 1cap) / 2);
}
.step h3 { font-size: 22px; line-height: 1.25; font-weight: 800; }
.step p { font-size: 16px; color: var(--ink-2); }
.more a { font: 800 17px/1.4 var(--display); color: var(--accent-ink); text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Fragen zur Einrichtung: aufklappbare Karten, Knopf rechts dreht sich vom Plus zum Kreuz */
/* zwei Spalten (Rob, 01.10.2026: ein Turm links wirkte zu linksbündig), jede für sich, damit eine aufgeklappte Frage
   die Nachbarspalte nicht verschiebt; schmal eine Spalte */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
.faq-col { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--panel); border: var(--stroke) solid var(--line); border-radius: 22px; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 16px 16px 24px; border-radius: 19px;
  font: 800 19px/1.3 var(--display); letter-spacing: calc(var(--track) + 0.015em);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: var(--stroke) solid var(--line); background: var(--panel);
  transition: transform 0.3s var(--ease-back), background-color 0.15s;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 3px; border-radius: 2px;
  background: var(--ink); translate: -50% -50%;
}
.faq-icon::after { rotate: 90deg; }
.faq-item summary:hover .faq-icon { background: var(--accent-soft); }
.faq-item[open] .faq-icon { background: var(--accent); transform: rotate(135deg); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: #FFFFFF; }
.faq-answer { padding: 0 24px 22px; }
.faq-answer p { font-size: 16px; color: var(--ink-2); }
.faq-item[open] .faq-answer { animation: faq-open 0.3s ease-out; }
@keyframes faq-open { from { opacity: 0; translate: 0 -6px; } }

/* Abschluss */
.cta {
  background: var(--ink); color: #FFFFFF; border-radius: 32px; padding: clamp(36px, 6vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
.cta h2 { color: #FFFFFF; }
/* Hinweis bei den Kauf-Knöpfen (Robs Wunsch, 10.10.2026: unmissverständlich, dass eigenes Hosting nötig ist) */
.req { margin: -10px 0 0; display: flex; align-items: flex-start; gap: 9px; font: 700 14.5px/1.4 var(--display); color: var(--ink); max-width: 440px; }
.req::before { content: "i"; flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: var(--ink); color: #FFFFFF;
  font: 800 12.5px/19px var(--display); text-align: center; }
/* im dunklen Abschluss-Band unter der Überschrift, der Knopf steht rechts allein (Rob: klebte zu nah am Knopf) */
.cta-text { display: flex; flex-direction: column; gap: 14px; }
.cta .req { margin: 0; color: #FFFFFF; opacity: 0.85; max-width: 640px; }
.cta .req::before { background: #FFFFFF; color: var(--ink); }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; padding-block: 56px 48px; color: var(--ink-3); font-size: 15px; --logo-dot: var(--accent); }
.foot-brand { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot .logo { height: 24px; color: var(--ink); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.foot-legal button {
  border: 0; padding: 4px 0; cursor: pointer; font: 700 14px/1.2 var(--display); color: var(--ink-2);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size 0.2s, color 0.12s;
}
.foot-legal button:hover { color: var(--ink); background-size: 100% 2px; }
.foot-copy { grid-column: 1 / -1; font-size: 13px; }
.foot-copy a { color: var(--ink-2); font-weight: 600; text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size 0.2s, color 0.12s; }
.foot-copy a:hover { color: var(--ink); background-size: 100% 2px; }

/* Rechtstexte als Dialog: weiß, schwarzer Rand wie die Karten, Text scrollt innen, × oben rechts */
dialog.legal {
  width: min(720px, calc(100vw - 32px)); max-height: min(86vh, 920px); padding: 0;
  border: var(--stroke) solid var(--ink); border-radius: 28px; background: var(--panel); color: var(--ink); overflow: hidden;
}
dialog.legal[open] { display: flex; flex-direction: column; }
dialog.legal::backdrop { background: rgba(20, 20, 20, 0.38); }
html:has(dialog:is(.legal, .soon)[open]) { overflow: hidden; }
.legal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 0 32px; }
.legal-eyebrow { font: 800 12px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.legal-close {
  width: 40px; height: 40px; flex: none; border-radius: 50%; border: var(--stroke) solid var(--ink); background: var(--panel);
  font: 700 22px/1 var(--display); color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0 0 2px;
}
.legal-close:hover { background: var(--accent-soft); }
dialog.legal h2 { font-size: clamp(26px, 4vw, 36px); padding: 4px 32px 16px; }
.legal-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 32px 32px; }
.legal-body h3 { font-size: 17px; line-height: 1.3; margin: 24px 0 6px; }
.legal-body h3:first-child { margin-top: 4px; }
.legal-body p, .legal-body li { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.legal-body p + p { margin-top: 10px; }
.legal-body ul { margin: 8px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
.legal-body li::marker { color: var(--accent); }
.legal-body a { color: var(--accent-ink); font-weight: 600; text-underline-offset: 3px; }
.legal-date { color: var(--ink-3) !important; font-size: 14px !important; margin-bottom: 12px; }
.tnum { font-variant-numeric: tabular-nums; }

/* „Coming soon“ hinter den Kauf-Knöpfen, bis der Lemon-Squeezy-Link da ist (01.10.2026): wie die Rechtstexte weiß mit
   3 px Rand, aber klein, mittig gesetzt und mit Aufploppen wie die Elemente im Kopf */
dialog.soon {
  width: min(460px, calc(100vw - 32px)); padding: 44px 32px 32px; text-align: center;
  border: var(--stroke) solid var(--ink); border-radius: 28px; background: var(--panel); color: var(--ink);
}
dialog.soon[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: soon-pop 0.4s var(--ease-back); }
dialog.soon::backdrop { background: rgba(20, 20, 20, 0.38); }
dialog.soon .legal-close { position: absolute; top: 14px; right: 14px; }
dialog.soon h2 { font-size: clamp(30px, 4vw, 38px); margin-bottom: 4px; }
dialog.soon p { font-size: 17px; color: var(--ink-2); text-wrap: balance; }
.nowrap { white-space: nowrap; }
dialog.soon .actions { justify-content: center; margin-top: 14px; }
@keyframes soon-pop { from { opacity: 0; scale: 0.9; } }

/* ---------- Einfedern beim Scrollen (bewegung.js, Robs Wunsch 01.10.2026) ----------
   Von unten herein, über das Ziel hinaus und zurück – mittelstark. --rv-dist und --rv-bounce skalieren Weg und
   Überschwingen (Stufen in bewegung.js), --d ist die Verzögerung innerhalb einer Reihe. Eigene Eigenschaften
   translate/scale, damit die Hover-Bewegung der Karten (transform) unberührt bleibt. */
.reveal:not(.is-in) { opacity: 0; }
.reveal.is-in { animation: reveal 0.9s var(--d, 0ms) both; }
.reveal-off .reveal:not(.is-in) { opacity: 1; }
.reveal-off .reveal.is-in { animation: none; }
@keyframes reveal {
  0% {
    opacity: 0; translate: 0 calc(var(--rv-dist, 1) * 64px); scale: calc(1 - var(--rv-dist, 1) * 0.04);
    animation-timing-function: cubic-bezier(0.22, 0.8, 0.3, 1);
  }
  50% { opacity: 1; translate: 0 calc(var(--rv-bounce, 1) * -10px); scale: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  76% { translate: 0 calc(var(--rv-bounce, 1) * 3px); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---------- Schmal ---------- */
@media (max-width: 900px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way-fork { display: none; }
  .hero-main { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 8px 40px; gap: 8px; }
  .stage { width: min(100%, 560px); justify-self: center; margin-top: 28px; }
  .cards, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .devices, .example { grid-template-columns: minmax(0, 1fr); }
  .foot { grid-template-columns: minmax(0, 1fr); }
  .foot-legal { justify-content: flex-start; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .nav { height: 78px; padding-top: 10px; }
  .logo { height: 26px; }
  .lead { font-size: 18px; }
  .cards, .cards-3, .steps { grid-template-columns: minmax(0, 1fr); }
  .bento .wide { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 8px; }
  .bento .icon-wide { width: 160px; margin: -4px 0 8px -4px; }
  .hero.has-dots .hero-text { box-shadow: 0 0 18px 12px var(--hero-bg); }
  .hero-ways { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero-ways li, .hero-ways li + li { padding: 0; border: 0; }
  .hero-ways li + li { padding-top: 12px; border-top: 2px solid var(--ways-line, var(--soft-line)); }
  .film { border-radius: 20px; }
  .film-play { padding: 0; border: 0; background: none; }
  .film-play-dot { width: 44px; height: 44px; }
  .film-play-dot svg { width: 22px; height: 22px; }
  .film-play-label { display: none; }
  /* Vergleichstabelle schmal: Symbol über dem Namen, feste schmale Spalten, damit die Funktionen Platz haben */
  .compare { padding: 2px 14px 12px; }
  .compare-table thead th { padding: 14px 4px 10px; }
  .compare-table thead th > span { flex-direction: column; gap: 4px; font-size: 15px; }
  .compare-table td { width: 74px; padding: 10px 4px; }
  .compare-table tbody th { padding-right: 8px; font-size: 15px; }
  .compare-table tbody th small { font-size: 12.5px; }
  .compare-table td small { font-size: 11px; }
  .faq-item summary { font-size: 17px; padding: 14px 12px 14px 18px; gap: 14px; }
  .faq-icon { width: 32px; height: 32px; }
  .faq-answer { padding: 0 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .reveal:not(.is-in) { opacity: 1; }
  .reveal.is-in, .faq-item[open] .faq-answer, dialog.soon[open] { animation: none; }
}