/*! * DM Effects — Basis-Stylesheet * Gehört zu dm-effects.js. Enthält nur, was die Effekte brauchen: * Keyframes, Ausgangszustände, ein paar Bausteine. Kein Reset, kein Grid — * das Layout bleibt eure Sache. */ :root { --dm-bg: #070B22; --dm-bg-card: #0A0F2A; --dm-bg-light: #F4F4F7; --dm-accent: #B5A55E; --dm-accent-hi: #C9BA77; --dm-accent-lo: #8A7C3C; --dm-ink: #F2F3F8; --dm-ink-dim: #A7AEC4; --dm-ink-dark: #151A33; --dm-ink-dark-dim: #4E5265; --dm-line: rgba(255, 255, 255, 0.10); --dm-line-dark: #D6D6E0; --dm-ease: cubic-bezier(.16, .86, .24, 1); --dm-font-head: Archivo, system-ui, sans-serif; --dm-font-body: Manrope, system-ui, sans-serif; --dm-font-mono: "JetBrains Mono", ui-monospace, monospace; } /* --- Keyframes -------------------------------------------------- */ @keyframes dm-wipe { from { opacity: 0; transform: translateY(112%) skewY(5deg); } to { opacity: 1; transform: translateY(0) skewY(0); } } @keyframes dm-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes dm-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes dm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* --- 1 Intro-Vorhang -------------------------------------------- */ /* Fehlerbehebung 24.09.2026: Der Vorhang ist im Grundzustand NICHT sichtbar. Ohne JavaScript verdeckte er sonst dauerhaft die ganze Seite. Eingeblendet wird er erst durch .dm-js am - die Klasse setzt dm-effects.js. Siehe den Block "EFFEKTPAKET" am Dateiende. */ .dm-preloader { position: fixed; inset: 0; z-index: 99; background: var(--dm-bg); display: none; grid-template-rows: 1fr auto; padding: clamp(20px, 4vw, 56px); will-change: transform; } .dm-preloader__mark { display: flex; align-items: center; justify-content: center; } .dm-preloader__mark img { width: min(340px, 62vw); height: auto; opacity: .92; } .dm-preloader__foot { display: grid; gap: 14px; } .dm-preloader__num { font-family: var(--dm-font-head); font-weight: 800; font-size: clamp(40px, 9vw, 110px); line-height: .85; letter-spacing: -0.04em; color: var(--dm-accent); font-variant-numeric: tabular-nums; } .dm-preloader__track { height: 2px; background: var(--dm-line); } .dm-preloader__track > i { display: block; height: 100%; width: 0; background: var(--dm-accent); } /* --- 2 Lesefortschritt ------------------------------------------ */ .dm-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: rgba(255, 255, 255, 0.07); } .dm-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--dm-accent-lo), var(--dm-accent-hi)); } /* --- 3 Spotlight + magnetische Elemente ------------------------- */ .dm-glow { position: fixed; top: 0; left: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; background: radial-gradient(circle, rgba(181, 165, 94, 0.15), rgba(181, 165, 94, 0.05) 42%, transparent 66%); pointer-events: none; z-index: 1; opacity: .5; will-change: transform; transition: opacity .6s ease; } [data-dm-magnetic] { transition: transform .18s ease-out, background .3s ease, box-shadow .3s ease; } /* --- 4 Punkteraster --------------------------------------------- */ .dm-dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: .9; } /* --- 5/10 Zeilenmaske für Text, der von unten einfährt ---------- */ .dm-clip { display: block; overflow: hidden; padding-bottom: .06em; } /* --- 6 Statuspunkt ---------------------------------------------- */ .dm-status { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #7FCF8F; box-shadow: 0 0 0 3px rgba(127, 207, 143, 0.18); } /* --- 7 Laufband -------------------------------------------------- */ .dm-marquee { display: flex; width: max-content; will-change: transform; } .dm-marquee > * { padding: 26px clamp(28px, 4vw, 56px); border-left: 1px solid var(--dm-line); display: flex; align-items: center; white-space: nowrap; } /* --- 11 Lichtstreif ---------------------------------------------- */ .dm-sweep { position: absolute; top: -4%; left: 0; width: 38%; height: 108%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent); mix-blend-mode: overlay; pointer-events: none; opacity: 0; } /* --- 12 Umrisswort im Hintergrund -------------------------------- */ .dm-ghost { position: absolute; left: 0; bottom: 2%; white-space: nowrap; font-family: var(--dm-font-head); font-weight: 900; font-size: clamp(90px, 17vw, 240px); line-height: .8; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(181, 165, 94, 0.13); pointer-events: none; user-select: none; will-change: transform; } /* --- 13 Zeigerring ----------------------------------------------- */ .dm-cursor { position: fixed; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(181, 165, 94, 0.8); border-radius: 50%; pointer-events: none; z-index: 90; opacity: 0; will-change: transform; transition: opacity .35s ease, background .25s ease, border-color .25s ease; } @media (hover: none) { .dm-cursor { display: none; } } /* --- 15 Sektionswechsel ------------------------------------------ */ .dm-section--light { background: var(--dm-bg-light); color: var(--dm-ink-dark); } [data-dm-wipe] { will-change: clip-path; } /* --- 16/17 Karten ------------------------------------------------- */ .dm-card { position: relative; background: var(--dm-bg); border: 1px solid var(--dm-line); padding: clamp(26px, 2.6vw, 36px); display: grid; gap: 14px; align-content: start; overflow: hidden; transform-style: preserve-3d; transition: background .35s ease, border-color .35s ease, transform .5s var(--dm-ease); } .dm-card:hover { background: #0D1330; border-color: rgba(181, 165, 94, 0.45); } .dm-card__line { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--dm-accent); transition: width .7s var(--dm-ease); z-index: 3; pointer-events: none; } .dm-card__ghost { position: absolute; top: -28px; right: 6px; font-family: var(--dm-font-head); font-weight: 900; font-size: 110px; line-height: 1; color: rgba(255, 255, 255, 0.035); pointer-events: none; } /* --- Bausteine ---------------------------------------------------- */ .dm-mono { font-family: var(--dm-font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dm-accent); } .dm-h1 { position: relative; margin: 0; font-family: var(--dm-font-head); font-weight: 900; font-size: clamp(42px, 8.6vw, 120px); line-height: 0.9; letter-spacing: -0.045em; max-width: 15ch; } .dm-h2 { margin: 0; font-family: var(--dm-font-head); font-weight: 800; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -0.032em; max-width: 20ch; text-wrap: balance; } .dm-btn { display: inline-flex; align-items: center; justify-content: center; padding: 17px 30px; min-height: 50px; border-radius: 2px; background: var(--dm-accent); color: var(--dm-bg); font-family: var(--dm-font-head); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: background .3s ease, box-shadow .3s ease, transform .18s ease-out; } .dm-btn:hover { background: var(--dm-accent-hi); box-shadow: 0 12px 40px rgba(181, 165, 94, 0.3); } .dm-btn--ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #E8E5DF; } .dm-btn--ghost:hover { background: transparent; border-color: var(--dm-accent); color: var(--dm-accent); box-shadow: none; } /* --- Barrierefreiheit --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .dm-dots, .dm-cursor, .dm-ghost, .dm-sweep { display: none !important; } .dm-preloader { display: none !important; } } /* === SCHAUSTUECK: Zeitachse "So laeuft der Start" (Startseite) ========= * * Gehoert zu Modul 18 in dm-effects.js. * * GRUNDZUSTAND (dieses Stylesheet allein, ohne JavaScript): * Linie vollstaendig gezeichnet, alle vier Schritte in voller Deckkraft. * Hier steht bewusst keine Regel, die Text abdunkelt oder versteckt. * * BEWEGUNG: * ausschliesslich unter [data-dm-timeline="on"]. Dieses Attribut setzt * nur das JavaScript zur Laufzeit. Animiert werden nur transform und * opacity; die kleinste Deckkraft fuer Text ist 0.62 - gedaempft, aber * lesbar. Nie display:none, visibility:hidden oder opacity:0. * * LAYOUT: * ab 900 px waagerecht (Linie quer), darunter senkrecht (Linie links). * Kein festes Mindestmass, kein Querscrollen, Text bleibt Text. * ====================================================================== */ .dm-tl { margin: clamp(2rem, 3.4vw, 3rem) 0 0; } .dm-tl__plate { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 3.4vw, 46px) clamp(20px, 3vw, 44px); background: radial-gradient(118% 150% at 12% 0%, rgba(201, 186, 119, .11), rgba(201, 186, 119, 0) 58%), linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 24px 60px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .05); } /* Feine Goldkante links - dasselbe Motiv wie bei der Buchplatte. */ .dm-tl__plate::before { content: ""; position: absolute; left: -1px; top: 14%; bottom: 14%; width: 2px; background: linear-gradient(180deg, rgba(201, 186, 119, 0), var(--gold), rgba(201, 186, 119, 0)); } .dm-tl__kicker { margin: 0 0 clamp(22px, 2.6vw, 32px); padding-bottom: clamp(14px, 1.8vw, 20px); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; line-height: 1.55; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } .dm-tl__steps { --dm-tl-gap: clamp(18px, 2.4vw, 34px); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--dm-tl-gap); margin: 0; padding: 0; } .dm-tl__step { position: relative; margin: 0; } /* Schiene zwischen zwei Ziffernkreisen. Der vierte Schritt hat keine - sie steht deshalb gar nicht erst im HTML, statt sie auszublenden. */ .dm-tl__rail { position: absolute; top: 21px; left: 56px; right: calc(12px - var(--dm-tl-gap)); height: 2px; background: var(--line); } .dm-tl__fill { display: block; width: 100%; height: 100%; transform-origin: left center; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); will-change: transform; } .dm-tl__node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); background: var(--gold); color: var(--deep); font-family: var(--font-head); font-weight: 800; font-size: 17px; line-height: 1; transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); } .dm-tl__title { margin: clamp(16px, 1.7vw, 22px) 0 .3rem; font-size: clamp(1.02rem, .94rem + .3vw, 1.22rem); line-height: 1.22; } .dm-tl__meta { margin: 0 0 .5rem; font-family: var(--font-mono); font-size: 13px; line-height: 1.5; letter-spacing: .04em; color: var(--gold); } .dm-tl__desc { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text); } .dm-tl__foot { margin: clamp(26px, 3vw, 38px) 0 0; padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.55; color: var(--muted); } /* ---- Unter 900 px: senkrechte Achse, Linie links ---------------------- */ @media (max-width: 899px) { .dm-tl__steps { --dm-tl-gap: clamp(26px, 5vw, 38px); grid-template-columns: minmax(0, 1fr); gap: var(--dm-tl-gap) 0; } .dm-tl__step { padding-left: 62px; min-height: 44px; } .dm-tl__node { position: absolute; left: 0; top: 0; } .dm-tl__rail { top: 56px; left: 21px; right: auto; bottom: calc(12px - var(--dm-tl-gap)); width: 2px; height: auto; } .dm-tl__fill { transform-origin: top center; background: linear-gradient(180deg, var(--gold-deep), var(--gold)); } .dm-tl__title { margin-top: .3rem; } } /* ---- Nur mit JavaScript: Fortschritt, Abdunklung, Aktivierung -------- Alles ab hier haengt am Attribut, das dm-effects.js setzt. Faellt das JavaScript aus, greift keine einzige dieser Regeln. --dm-tl-f ist der Fuellgrad einer Schiene zwischen 0 und 1. */ [data-dm-timeline="on"] .dm-tl__fill { transform: scaleX(var(--dm-tl-f, 0)); transition: transform .28s linear; } @media (max-width: 899px) { [data-dm-timeline="on"] .dm-tl__fill { transform: scaleY(var(--dm-tl-f, 0)); } } /* Noch nicht erreichte Schritte: gedaempft, aber vollstaendig lesbar. */ [data-dm-timeline="on"] .dm-tl__step { opacity: 0.62; transition: opacity .5s var(--ease); } [data-dm-timeline="on"] .dm-tl__node { background: var(--gold-pale); border-color: rgba(201, 186, 119, .35); color: var(--gold); } /* Erreichter Schritt: voller Text, gefuellter Ziffernkreis mit weichem Schein. */ [data-dm-timeline="on"] .dm-tl__step.is-on { opacity: 1; } [data-dm-timeline="on"] .dm-tl__step.is-on .dm-tl__node { background: var(--gold); border-color: var(--gold); color: var(--deep); box-shadow: 0 0 0 6px rgba(201, 186, 119, .09), 0 10px 26px rgba(201, 186, 119, .22); transform: scale(1.05); } /* Bewegungsreduktion: Endzustand, statisch. Das JavaScript setzt das Attribut in diesem Fall gar nicht erst - dies ist nur das Sicherheitsnetz fuer den Fall, dass die Einstellung nach dem Laden umgestellt wird. */ @media (prefers-reduced-motion: reduce) { [data-dm-timeline="on"] .dm-tl__fill { transform: none; } [data-dm-timeline="on"] .dm-tl__step { opacity: 1; } [data-dm-timeline="on"] .dm-tl__node { background: var(--gold); border-color: var(--gold); color: var(--deep); transform: none; } } /* === EFFEKTPAKET: Partikelfeld, Überschriften-Einzug, Maßstab, Zeiger ==== * * Gehört zu den Modulen 19-22 in dm-effects.js. * * GRUNDZUSTAND (dieses Stylesheet allein, ohne JavaScript): * Die Seite ist fertig. Kein Vorhang, kein Canvas, keine Zeichenaufspaltung, * keine Ausblendung. Alle Startzustände der Animationen (Versatz, * Transparenz, Drehung) setzt ausschließlich das JavaScript zur Laufzeit * als Inline-Stil - hier steht keine einzige Regel, die etwas versteckt. * * SCHALTER: * .dm-js am , gesetzt vom Skript ganz oben in dm-effects.js. * [data-dm-split="on"] setzt das Skript auf eine Überschrift, nachdem es * sie in Wörter und Zeichen zerlegt hat. * [data-dm-magnet="on"] setzt das Skript, solange der Zeiger in der Nähe * einer Hauptschaltfläche steht. * * FARBEN: nur die vorhandenen Töne. Nichts aufgehellt. * ====================================================================== */ /* --- E Ladevorhang: nur mit JavaScript --------------------------------- Ohne .dm-js bleibt .dm-preloader auf display:none (siehe oben im Grundstylesheet). Erst das Skript blendet ihn ein - damit sieht ein Besucher ohne JavaScript sofort den Inhalt statt einer leeren Fläche. */ .dm-js .dm-preloader { display: grid; } /* --- A Partikelfeld ---------------------------------------------------- Das Canvas legt das Skript selbst an; ohne JavaScript existiert es nicht. Es liegt hinter allem (z-index -1) und fängt nichts ab. Damit es überhaupt sichtbar wird, muss der Seitenkörper durchsichtig sein: die Grundfarbe trägt ohnehin das -Element, beide haben denselben Ton (--bg). Optisch ändert sich dadurch nichts. */ .dm-js body { background-color: transparent; } .dm-field { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; } /* Der Hero trägt einen eigenen Verlauf und würde das Feld komplett zudecken. Er behält exakt dieselben drei Farbstopps, bekommt aber Durchlass. Weil der Grund darunter (--bg #070b22) dunkler ist als die unteren Stopps, wird der Hero dadurch minimal DUNKLER - nie heller. */ .dm-js .hero { background-image: linear-gradient(170deg, rgba(4, 6, 26, .88) 0%, rgba(11, 17, 48, .62) 56%, rgba(19, 27, 64, .46) 100%); } /* --- B Überschriften ziehen zeichenweise ein -------------------------- Nur Bühne und Endzustand. Der Startzustand jedes Zeichens (opacity 0, translateY, rotateX) steht als Inline-Stil im DOM und wird nur vom Skript gesetzt. */ [data-dm-split="on"] { perspective: 820px; perspective-origin: 50% 60%; } [data-dm-split="on"] .dm-word { display: inline-block; white-space: nowrap; } [data-dm-split="on"] .dm-char { display: inline-block; transform-origin: 50% 80%; will-change: transform, opacity; } /* --- C Typografie auf Maßstab ---------------------------------------- Greift über das Auszeichnungsattribut, nicht über den Elementnamen - so ändert sich nur, was ausdrücklich ausgezeichnet wurde (heute die Startseite), und nicht die restlichen 28 Seiten, die dieselbe Datei laden. Die untere Grenze ist bewusst kleiner als in der Spec genannt: bei 360 px Breite ragt "Vertriebsagentur" sonst aus dem Bild. Korrektur 24.09.2026: 2,2rem (35,2px) waren immer noch zu gross. Seit Ueberschriften nicht mehr automatisch getrennt werden, zerschnitt der Browser lange Komposita stattdessen ohne Trennstrich ("Vertriebsoutsourci ng"). Gemessen bei 320px Fensterbreite: der laengste untrennbare Wortteil der Seite ist "Neukundengewinnung" und passt erst ab 25,9px. 1,55rem (24,8px) liegt darunter, greift nur unterhalb von ~355px Fensterbreite und wird ab dort sofort wieder von 7vw ueberholt. */ h1[data-dm-split] { font-size: clamp(1.55rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.03em; } .hero h1[data-dm-split].h1-wechsel { font-size: clamp(1.55rem, 7vw, 5.5rem); } /* Lange Hero-Ueberschriften (Korrektur 24.09.2026): 5,5rem sind fuer die kurze Startseiten-Schlagzeile gedacht. Saetze ab etwa 60 Zeichen liefen damit auf fuenf Zeilen und rissen den Hero auf ueber 900 px auf - gemessen 24.09.2026: /einwandbehandlung/ 1338 px, /kaltakquise-agentur/ 1053 px. Mit dieser flacheren Kurve bleiben sie bei drei bis vier Zeilen. Wird pro Seite von Hand gesetzt, weil CSS die Laenge einer Ueberschrift nicht kennt. */ .hero h1[data-dm-split].h1-lang, h1[data-dm-split].h1-lang { font-size: clamp(1.7rem, 5.2vw, 4.1rem); } h2[data-dm-split] { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; } /* --- D Magnetische Hauptschaltflächen --------------------------------- Das Skript schreibt nur zwei Zahlen in --dm-mx / --dm-my. Der Versatz selbst steht hier, damit die vorhandene Hover-Anhebung der Schaltfläche erhalten bleibt (sie würde von einem Inline-transform überschrieben). */ .dm-js [data-dm-magnet] { transform: translate(var(--dm-mx, 0px), var(--dm-my, 0px)); transition: transform .45s var(--dm-ease), background .2s ease, border-color .2s ease; } .dm-js [data-dm-magnet]:hover { transform: translate(var(--dm-mx, 0px), calc(var(--dm-my, 0px) - 2px)); } .dm-js [data-dm-magnet="on"] { transition: transform .11s linear, background .2s ease, border-color .2s ease; } /* --- D Lichtkante auf Karten ------------------------------------------ Wiederverwendung des vorhandenen Glanz-Overlays .dm-sweep (Modul 11): gleiches Bauteil, andere Füllung. Das Element hängt das Skript zur Laufzeit in die Karte - ohne JavaScript gibt es keines. isolation:isolate macht die Karte zum eigenen Stapelkontext; erst dadurch liegt der Schimmer über dem Kartengrund, aber unter dem Text. */ .dm-js [data-dm-phase-card] { isolation: isolate; } .dm-sweep--pointer { top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; border-radius: inherit; mix-blend-mode: normal; background: radial-gradient(220px 220px at var(--dm-sx, 50%) var(--dm-sy, 50%), rgba(201, 186, 119, .13), rgba(201, 186, 119, .05) 42%, rgba(201, 186, 119, 0) 72%); transition: opacity .35s ease; } /* --- Bewegungsreduktion: Sicherheitsnetz ------------------------------- Das Skript startet die Effekte in diesem Fall gar nicht erst. Falls die Einstellung nach dem Laden umgestellt wird, greift das hier. */ @media (prefers-reduced-motion: reduce) { .dm-field { display: none !important; } .dm-sweep--pointer { display: none !important; } .dm-js [data-dm-magnet] { transform: none !important; } [data-dm-split="on"] .dm-char { transform: none !important; opacity: 1 !important; } } /* ====================================================================== GRAFIKSYSTEM (Ausbaustufe 1) ---------------------------------------------------------------------- OBERSTES GESETZ — identisch zum SCHAUSTUECK-Block weiter oben: Der Grundzustand ist der FERTIGE, vollstaendig sichtbare Zustand. Hier unten steht deshalb NIRGENDS opacity: 0, scaleY(0), scaleX(0) oder ein voller stroke-dashoffset als Grundwert. Diese Startwerte setzt ausschliesslich dm-effects.js zur Laufzeit per Inline-Style. Ohne JavaScript, ohne IntersectionObserver oder bei reduzierter Bewegung bleibt jede Grafik so stehen, wie sie im Quelltext steht. Die Uebergaenge greifen erst, wenn das Skript am

das Attribut data-dm-graphic="on" gesetzt hat. ====================================================================== */ /* Der gemeinsame -Block liegt unsichtbar direkt hinter . */ .dm-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Die neuen Grafiken zeichnen auf 1120 Einheiten Breite. Damit die kleinste Schrift (16–18 Einheiten) auch auf dem Telefon ueber 11 px bleibt, brauchen sie mehr Grundbreite als die alten 560er-Grafiken. Die sitewide Regel "unter 700 px seitlich scrollbar" bleibt dabei unangetastet — .fig-box scrollt weiterhin selbst. */ .fig-box svg.dmg-canvas { min-width: 640px; } /* --- Uebergaenge: nur unter data-dm-graphic="on" ---------------------- */ [data-dm-graphic="on"] .dmg-draw { transition: stroke-dashoffset 1000ms var(--dm-ease) var(--dmg-d, 0ms); } [data-dm-graphic="on"] .dmg-grow { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 800ms var(--dm-ease) var(--dmg-d, 0ms); } [data-dm-graphic="on"] .dmg-sweep { transform-box: fill-box; transform-origin: 0% 50%; transition: transform 800ms var(--dm-ease) var(--dmg-d, 0ms); } [data-dm-graphic="on"] .dmg-pop { transition: opacity 600ms var(--dm-ease) var(--dmg-d, 0ms), transform 600ms var(--dm-ease) var(--dmg-d, 0ms); } /* .dmg-count braucht kein CSS — die Zahl schreibt das Skript. */ /* Ruhiger Dauerpuls auf dem Fokuspunkt, hoechstens einmal je Grafik. */ @keyframes dmg-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } [data-dm-graphic="on"] .dmg-pulse { animation: dmg-pulse 2.8s ease-in-out infinite; } /* --- Hero der Startseite: mehr Luft ---------------------------------- Bewusst auf .hero--air begrenzt, damit die Heros der uebrigen Seiten unveraendert bleiben. Die Luft wandert nach innen: der Rand oben und unten wird etwas schmaler als in styles.css, die Abstaende ZWISCHEN den Elementen werden deutlich groesser. Gemessen bei 1440x900: Rand 86,4 px -> 66,2 px .lead 0 px -> 28,8 px (vorher klebte der Absatz an der H1) .btn-row 25,6 px -> 41,8 px .hero-proof 30,4 px -> 46,1 px Hero gesamt: 905,3 px (3 Absaetze, alte Abstaende) -> 758,1 px. Die Mindestwerte der clamp() entsprechen den Werten aus styles.css, damit auf schmalen Geraeten nichts enger wird als bisher. */ .hero--air { padding: clamp(52px, 4.6vw, 78px) 0; } .hero--air .lead { margin-top: clamp(1.3rem, 2vw, 2rem); } .hero--air .btn-row { margin-top: clamp(1.9rem, 2.9vw, 2.8rem); } .hero--air .hero-proof { margin-top: clamp(2.1rem, 3.2vw, 3rem); } /* --- Bewegungsreduktion: Sicherheitsnetz fuer das Grafiksystem ------- Das Skript ruehrt die Grafiken in diesem Fall gar nicht erst an. Falls die Einstellung nach dem Laden umgestellt wird, greift das hier: alles steht sofort im Endzustand, der Puls ist aus. */ @media (prefers-reduced-motion: reduce) { [data-dm-graphic="on"] .dmg-draw, [data-dm-graphic="on"] .dmg-grow, [data-dm-graphic="on"] .dmg-sweep, [data-dm-graphic="on"] .dmg-pop { transition: none !important; } [data-dm-graphic="on"] .dmg-pulse { animation: none !important; } } /* --- Vorgefundener Fehler: gesplittete Ueberschrift laeuft bei 320 px ueber den Bildrand ------------------------------------------------- [data-dm-split="on"] .dm-word traegt white-space: nowrap (Block B weiter oben). Ein langes deutsches Wort wie "Einwandbehandlung," kann dadurch nicht umbrechen und schiebt bei 320 px die ganze Seite um 8 px nach rechts (gemessen: documentElement.scrollWidth 328 statt 320 auf /telefonakquise-agentur/). Das lag schon vor dieser Runde so im Arbeitsstand; die Abnahme verlangt aber 0 Ueberlaeufe. Kleinstmoegliche Korrektur: auf sehr schmalen Geraeten wird die Grundgroesse der ausgezeichneten H2 so weit gesenkt, dass auch das laengste Wort in die Zeile passt. Kein Umbruch mitten im Wort, keine Aenderung an Block B, keine Aenderung ab 401 px Breite. */ @media (max-width: 400px) { h2[data-dm-split] { font-size: clamp(1.7rem, 8.4vw, 2rem); } }