/* =============================================================================
rd-weld-effects.css
-----------------------------------------------------------------------------
Wiederverwendbares Effekt-System für "Die Schweiß-Profis 2026"
(YooTheme Pro Child-Theme).
Namespace / Prefix: rd-weld-
Thematik: Schweißnaht, Funken, Glühen, Scan, Prozess, Netzwerk
Abhängigkeiten: keine (kein jQuery, kein UIkit-JS, keine CDNs)
Aufbau:
0. Custom Properties (Farben, Zeiten, Intensität)
1. rd-weld-headline – Glühende Schweißnaht unter Headlines
2. rd-weld-glow-card – Glühender Rahmen beim Hover
3. rd-weld-scan-card – Scanlinie beim Hover
4. rd-weld-spark-button – Funken bei Hover/Fokus
5. rd-weld-reveal – Reveal beim Scrollen (+ Richtungen/Delays)
6. rd-weld-counter – Zähleranimation (Styling, Logik in JS)
7. rd-weld-process – Verschweißte Prozesslinie
8. rd-weld-network – Netzwerk-Visual (Canvas via JS)
9. rd-weld-tooltip – Glossar-Tooltip
10. rd-weld-dark-section – Dunkle Technik-Section
11. rd-weld-divider – Schweißnaht-Trenner
12. rd-weld-magnetic – Magnetischer Button (Logik in JS)
13. prefers-reduced-motion – Globale Reduktion
Hinweise:
- Alle Bewegungen laufen über transform/opacity (GPU-freundlich, kein Reflow).
- Sichtbarkeits-/Scroll-Effekte werden erst aktiv, wenn die Klasse
".rd-weld-js" trägt (wird sehr früh per Inline-Script gesetzt). Ohne
JavaScript bleiben Inhalte vollständig sichtbar (progressive enhancement).
========================================================================== */
/* -----------------------------------------------------------------------------
0. CUSTOM PROPERTIES
Zentrale Stellschrauben – hier Farben/Zeiten projektweit anpassen.
-------------------------------------------------------------------------------*/
:root {
/* Farben ------------------------------------------------------------------
Zentrale Stellschraube ist --rd-weld-accent-rgb (R,G,B als Kanäle).
Alle weiteren Farben werden daraus abgeleitet. So genügt es, EINEN Wert
zu ändern – und JavaScript kann hier die in YooTheme hinterlegte
Primärfarbe injizieren (siehe rd-weld-effects.js -> Theme-Accent).
Der Default entspricht der Marken-/Glutfarbe Orange (#ff7a1a). */
--rd-weld-accent-rgb: 255, 122, 26;
--rd-weld-accent: rgb(var(--rd-weld-accent-rgb)); /* Hauptakzent (Glut) */
--rd-weld-accent-hot: #ffd08a; /* heiße Spitze (Fallback; unten aus Akzent abgeleitet) */
--rd-weld-dark: #111418; /* Technik-Dunkel */
--rd-weld-line: rgba(var(--rd-weld-accent-rgb), 0.65); /* glühende Linie */
--rd-weld-soft: rgba(var(--rd-weld-accent-rgb), 0.16); /* weicher Schein */
/* Zeiten */
--rd-weld-time-fast: 0.35s;
--rd-weld-time: 0.7s;
--rd-weld-time-slow: 1.4s;
--rd-weld-time-card: 0.55s; /* Card-Hover etwas ruhiger */
--rd-weld-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--rd-weld-ease-in: cubic-bezier(0.45, 0, 0.25, 1); /* sanfter Einstieg (langsam beginnend) */
/* Intensität / Maße */
--rd-weld-reveal-shift: 24px; /* Versatz beim Reveal */
--rd-weld-headline-h: 3px; /* Dicke der Schweißnaht (Breite = Textbreite) */
}
/* "Heiße Spitze" aus dem Akzent ableiten, damit sie der YooTheme-Primärfarbe
folgt. Nur dort, wo color-mix() unterstützt wird; sonst greift der Fallback
(#ffd08a) aus dem :root oben. */
@supports (color: color-mix(in srgb, red, white)) {
:root {
--rd-weld-accent-hot: color-mix(in srgb, var(--rd-weld-accent), #ffffff 55%);
}
}
/* -----------------------------------------------------------------------------
1. rd-weld-headline – Glühende Schweißnaht unter Headlines
Die Naht ist so breit wie der Headline-TEXT (nicht die ganze Spalte): die
Headline-Box schrumpft via fit-content auf die Textbreite, die Naht (::after)
nimmt mit width:100% genau diese Breite ein. Beim Scroll-In wird sie von
links nach rechts "gezeichnet" + dezenter Funke an der Spitze.
Ohne JS bzw. bei reduced-motion: Linie statisch sichtbar.
Hinweis: Durch fit-content sitzt die Headline-Box auf Textbreite. Zentrierte
Headlines daher mit .rd-weld-headline-center (zentriert die Box sauber).
Volle Spaltenbreite bei Bedarf via .rd-weld-headline-full.
-------------------------------------------------------------------------------*/
.rd-weld-headline {
position: relative;
width: -moz-fit-content;
width: fit-content; /* Box = Textbreite */
max-width: 100%; /* aber nie über den Container */
padding-bottom: 0.4em; /* Platz für die Naht (kein Shift) */
}
/* Die Schweißnaht selbst – volle Breite der (textbreiten) Box */
.rd-weld-headline::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--rd-weld-headline-h);
border-radius: var(--rd-weld-headline-h);
background: var(--rd-weld-accent); /* reine Primary-Farbe (kein Verlauf) */
box-shadow: 0 0 8px var(--rd-weld-line);
transform: scaleX(1); /* Fallback ohne JS: sichtbar */
transform-origin: left center;
pointer-events: none;
}
/* Wandernder Glut-Funke an der aufbauenden Spitze (Funken ober- UND unterhalb).
Gleicher Stil wie in der Navbar; läuft automatisch beim Scroll-In. */
.rd-weld-headline::before {
content: "";
position: absolute;
left: 0;
bottom: calc(var(--rd-weld-headline-h) / 2);
width: 5px;
height: 5px;
margin: 0 0 -2.5px -2.5px; /* Glut auf (left, Naht-Mitte) zentrieren */
border-radius: 50%;
background: var(--rd-weld-accent-hot); /* heller Glutkern */
transform-origin: center;
box-shadow:
0 0 12px 3px var(--rd-weld-accent), /* Glut-Halo */
/* Funken oberhalb (Richtung Text) */
0px -9px 3px 0 var(--rd-weld-accent-hot),
6px -15px 2px -1px var(--rd-weld-accent),
-6px -13px 2px -1px var(--rd-weld-accent-hot),
2px -22px 2px -1px var(--rd-weld-accent),
/* Funken unterhalb */
0px 9px 3px 0 var(--rd-weld-accent-hot),
6px 15px 2px -1px var(--rd-weld-accent),
-6px 13px 2px -1px var(--rd-weld-accent-hot),
2px 22px 2px -1px var(--rd-weld-accent);
opacity: 0; /* nur während des Zeichnens sichtbar */
pointer-events: none;
}
/* Zentrierte Variante – Box mittig stellen (Text bleibt mittig) */
.rd-weld-headline-center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* Voll-Breiten-Variante (optional): Naht über die ganze Spaltenbreite */
.rd-weld-headline-full {
width: auto; /* Box wieder volle Breite */
}
/* Mit JS aktiv: Naht zunächst eingezogen, Funke unsichtbar */
.rd-weld-js .rd-weld-headline::after {
transform: scaleX(0);
transition: transform var(--rd-weld-time-slow) var(--rd-weld-ease);
}
/* Scroll-In: Naht zeichnen + Funke laufen lassen */
.rd-weld-js .rd-weld-headline.rd-weld-in::after {
transform: scaleX(1);
}
/* Zwei Animationen gleichzeitig (wie in der Navbar):
1) -spark -> Spitze läuft synchron zur Naht von links nach rechts
2) -twinkle -> schnelles Scale/Drehen = die Funken FUNKELN
Twinkle läuft endlich (7x ~1.75s), damit nichts dauerhaft im Hintergrund
weiterläuft, nachdem der Funke längst ausgefadet ist. */
.rd-weld-js .rd-weld-headline.rd-weld-in::before {
animation:
rd-weld-headline-spark var(--rd-weld-time-slow) var(--rd-weld-ease) forwards,
rd-weld-headline-twinkle 0.25s linear 7;
}
/* Funke läuft über die gesamte (dynamische) Nahtbreite: left 0% -> 100%.
Ab 50% gleichmäßig (linear) und langsam ausfaden -> kein abruptes Ende.
Der Lauf (left) behält die Auskling-Ease und bleibt synchron zur Naht. */
@keyframes rd-weld-headline-spark {
0% { opacity: 0; left: 0; }
12% { opacity: 1; }
50% { opacity: 1; animation-timing-function: linear; }
100% { opacity: 0; left: 100%; }
}
/* Funkeln: rasches Zucken + Drehen -> die Funkenpunkte tanzen um die Spitze */
@keyframes rd-weld-headline-twinkle {
0% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.5) rotate(14deg); }
50% { transform: scale(0.75) rotate(-9deg); }
75% { transform: scale(1.35) rotate(8deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* -----------------------------------------------------------------------------
2. rd-weld-glow-card – Glühender Rahmen beim Hover (erhitztes Metall)
Glow liegt auf dem Element selbst (box-shadow), wird daher NICHT von einem
overflow:hidden (z. B. bei rd-weld-scan-card) abgeschnitten.
-------------------------------------------------------------------------------*/
.rd-weld-glow-card {
position: relative;
/* Sanfter Einstieg: langsam beginnend (ease-in) + etwas längere Dauer,
damit der Glow nicht schlagartig "anspringt". */
transition:
box-shadow var(--rd-weld-time-card) var(--rd-weld-ease-in),
transform var(--rd-weld-time-card) var(--rd-weld-ease-in);
}
.rd-weld-glow-card:hover,
.rd-weld-glow-card:focus-within {
box-shadow:
0 0 0 1px var(--rd-weld-line), /* glühender Rand */
0 0 16px -2px var(--rd-weld-line), /* enger Schein */
0 0 44px -8px var(--rd-weld-soft); /* weicher Halo */
transform: translateY(-2px); /* minimale Anhebung */
}
/* -----------------------------------------------------------------------------
3. rd-weld-scan-card – Scanlinie beim Hover (UVV, Kalibrierung, Wartung …)
Eine feine Linie fährt von oben nach unten über die Karte.
-------------------------------------------------------------------------------*/
.rd-weld-scan-card {
position: relative;
overflow: hidden; /* Scanlinie clippen */
}
.rd-weld-scan-card::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--rd-weld-line) 30%,
var(--rd-weld-accent-hot) 50%,
var(--rd-weld-line) 70%,
transparent
);
box-shadow: 0 0 12px var(--rd-weld-line);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.rd-weld-scan-card:hover::before,
.rd-weld-scan-card:focus-within::before {
animation: rd-weld-scan var(--rd-weld-time-slow) linear;
}
/* "top" wird animiert: nur das Pseudo-Element repaintet (overflow:hidden) */
@keyframes rd-weld-scan {
0% { opacity: 0; top: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; top: 100%; }
}
/* -----------------------------------------------------------------------------
4. rd-weld-spark-button – Funken bei Hover/Fokus (rein CSS, keine Partikel-DOM)
Zwei Pseudo-Elemente mit Mehrfach-box-shadow simulieren je einen Funkenstoß.
Funktioniert auch bei Tastatur-Fokus (:focus-visible).
-------------------------------------------------------------------------------*/
.rd-weld-spark-button {
position: relative;
overflow: visible;
}
/* Zwei Funken-Quellen, leicht versetzt */
.rd-weld-spark-button::before,
.rd-weld-spark-button::after {
content: "";
position: absolute;
top: 0;
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--rd-weld-accent-hot);
opacity: 0;
pointer-events: none;
/* Mehrere kleine Funken über box-shadow (1 Element, 1 Transform) */
box-shadow:
6px -2px 0 -1px var(--rd-weld-accent),
-8px -1px 0 -1px var(--rd-weld-accent-hot),
14px 1px 0 -1px var(--rd-weld-line);
}
.rd-weld-spark-button::before { left: 22%; }
.rd-weld-spark-button::after { left: 70%; }
.rd-weld-spark-button:hover::before,
.rd-weld-spark-button:focus-visible::before {
animation: rd-weld-spark 0.6s ease-out;
}
.rd-weld-spark-button:hover::after,
.rd-weld-spark-button:focus-visible::after {
animation: rd-weld-spark 0.6s ease-out 0.08s; /* leichter Versatz */
}
@keyframes rd-weld-spark {
0% { opacity: 0; transform: translateY(0) scale(0.6); }
15% { opacity: 1; }
100% { opacity: 0; transform: translateY(-14px) scale(1); }
}
/* -----------------------------------------------------------------------------
5. rd-weld-reveal – Reveal beim Scrollen (Fade + leichte Bewegung)
Versteckt wird NUR mit aktivem JS (.rd-weld-js) -> ohne JS voll sichtbar.
-------------------------------------------------------------------------------*/
.rd-weld-js .rd-weld-reveal {
opacity: 0;
transform: translateY(var(--rd-weld-reveal-shift));
transition:
opacity var(--rd-weld-time) var(--rd-weld-ease),
transform var(--rd-weld-time) var(--rd-weld-ease);
/* Kein dauerhaftes will-change: transform/opacity werden ohnehin
kompositiert; will-change auf vielen Elementen kostet unnötig Speicher. */
}
/* Richtungs-Varianten */
.rd-weld-js .rd-weld-reveal-left { transform: translateX(calc(var(--rd-weld-reveal-shift) * -1.2)); }
.rd-weld-js .rd-weld-reveal-right { transform: translateX(calc(var(--rd-weld-reveal-shift) * 1.2)); }
/* Sichtbar */
.rd-weld-js .rd-weld-reveal.rd-weld-in {
opacity: 1;
transform: none;
}
/* Verzögerungen (staffeln von Gruppen) */
.rd-weld-reveal-delay-1 { transition-delay: 0.12s; }
.rd-weld-reveal-delay-2 { transition-delay: 0.24s; }
.rd-weld-reveal-delay-3 { transition-delay: 0.36s; }
/* -----------------------------------------------------------------------------
6. rd-weld-counter – Zähleranimation (Logik in JS)
tabular-nums + inline-block verhindern Layout-Springen beim Hochzählen.
-------------------------------------------------------------------------------*/
.rd-weld-counter {
font-variant-numeric: tabular-nums;
display: inline-block;
}
/* -----------------------------------------------------------------------------
7. rd-weld-process – Verschweißte Prozesslinie
Architektur: KEINE durchgehende Linie über die volle Höhe, sondern pro Step
ein eigenes Verbindungs-Segment vom eigenen Knoten zum nächsten. Vorteile:
- Knoten sitzen exakt mittig auf der Naht (box-sizing + saubere Mathematik).
- Das letzte Segment entfällt -> die Naht endet sauber am letzten Punkt
(kein überstehendes/abgeschnittenes Ende).
- Die Naht "zündet" beim Scroll-In von oben nach unten gestaffelt durch
(Glut-/Schweiß-Anmutung) – ohne Layout-Shift (nur Farbe/Glow).
Knoten liegen via z-index sauber ÜBER der Naht.
-------------------------------------------------------------------------------*/
.rd-weld-process {
--rd-weld-process-pad: 2.6rem; /* Einrückung für die Schiene */
--rd-weld-process-rail: 0.7rem; /* X-Position der Schiene (vertikal) */
--rd-weld-process-node: 0.85rem; /* Knoten-Durchmesser */
--rd-weld-process-node-top: 0.5rem; /* Knoten-Top innerhalb eines Steps */
--rd-weld-process-gap: 1.5rem; /* Abstand zwischen Steps (= margin) */
position: relative;
padding-left: var(--rd-weld-process-pad);
}
/* Steps */
.rd-weld-process-step {
position: relative;
z-index: 1; /* Inhalt + Knoten über der Naht */
margin-bottom: var(--rd-weld-process-gap);
}
.rd-weld-process-step:last-child {
margin-bottom: 0;
}
/* Verbindungs-Segment (::after): vom eigenen Knoten zum nächsten Knoten.
Höhe = Step-Höhe (100%) + Abstand -> endet exakt in der nächsten Knotenmitte.
Beim letzten Step ausgeblendet -> kein überstehendes Ende. */
.rd-weld-process-step::after {
content: "";
position: absolute;
box-sizing: border-box;
top: calc(var(--rd-weld-process-node-top) + var(--rd-weld-process-node) / 2);
left: calc(var(--rd-weld-process-rail) - var(--rd-weld-process-pad));
width: 2px;
margin-left: -1px;
height: calc(100% + var(--rd-weld-process-gap));
border-radius: 2px;
z-index: 1;
/* Basis = fertige, glühende Naht (Fallback ohne JS) */
background: var(--rd-weld-accent);
box-shadow: 0 0 8px var(--rd-weld-line);
}
.rd-weld-process-step:last-child::after {
display: none;
}
/* Knoten (::before): sitzt exakt mittig auf der Schiene */
.rd-weld-process-step::before {
content: "";
position: absolute;
box-sizing: border-box;
top: var(--rd-weld-process-node-top);
left: calc(var(--rd-weld-process-rail) - var(--rd-weld-process-pad));
width: var(--rd-weld-process-node);
height: var(--rd-weld-process-node);
margin-left: calc(var(--rd-weld-process-node) / -2);
border-radius: 50%;
z-index: 2; /* über der Naht */
/* Basis = fertiger, glühender Knoten (Fallback ohne JS) */
background: var(--rd-weld-accent-hot);
border: 2px solid var(--rd-weld-accent-hot);
box-shadow: 0 0 10px var(--rd-weld-line);
}
/* Mit JS: Naht/Knoten zunächst "kalt" (ungeschweißt), dann beim Scroll-In
gestaffelt aufglühen. */
.rd-weld-js .rd-weld-process-step::after {
background: var(--rd-weld-soft);
box-shadow: none;
transition: background var(--rd-weld-time-slow) var(--rd-weld-ease),
box-shadow var(--rd-weld-time-slow) var(--rd-weld-ease);
}
.rd-weld-js .rd-weld-process-step::before {
background: var(--rd-weld-dark);
border-color: var(--rd-weld-line);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
transition: background var(--rd-weld-time-fast) var(--rd-weld-ease),
border-color var(--rd-weld-time-fast) var(--rd-weld-ease),
box-shadow var(--rd-weld-time-fast) var(--rd-weld-ease);
}
/* In view -> aufglühen */
.rd-weld-js .rd-weld-process.rd-weld-in .rd-weld-process-step::after {
background: var(--rd-weld-accent);
box-shadow: 0 0 8px var(--rd-weld-line);
}
.rd-weld-js .rd-weld-process.rd-weld-in .rd-weld-process-step::before {
background: var(--rd-weld-accent-hot);
border-color: var(--rd-weld-accent-hot);
box-shadow: 0 0 10px var(--rd-weld-line);
}
/* Gestaffelte Zündung (Knoten + zugehöriges Segment) */
.rd-weld-process-step:nth-child(1)::before,
.rd-weld-process-step:nth-child(1)::after { transition-delay: 0.10s; }
.rd-weld-process-step:nth-child(2)::before,
.rd-weld-process-step:nth-child(2)::after { transition-delay: 0.30s; }
.rd-weld-process-step:nth-child(3)::before,
.rd-weld-process-step:nth-child(3)::after { transition-delay: 0.50s; }
.rd-weld-process-step:nth-child(4)::before,
.rd-weld-process-step:nth-child(4)::after { transition-delay: 0.70s; }
.rd-weld-process-step:nth-child(5)::before,
.rd-weld-process-step:nth-child(5)::after { transition-delay: 0.90s; }
.rd-weld-process-step:nth-child(6)::before,
.rd-weld-process-step:nth-child(6)::after { transition-delay: 1.10s; }
/* Horizontale Variante (optional): Knoten oben, Segment nach rechts. */
.rd-weld-process-horizontal {
display: flex;
flex-wrap: nowrap;
gap: var(--rd-weld-process-gap);
padding-left: 0;
}
.rd-weld-process-horizontal .rd-weld-process-step {
flex: 1 1 8rem;
margin-bottom: 0;
padding-top: 1.6rem; /* Raum für Knoten oben */
text-align: center;
}
/* Knoten ganz oben, horizontal mittig */
.rd-weld-process-horizontal .rd-weld-process-step::before {
top: 0;
left: 50%;
margin-left: calc(var(--rd-weld-process-node) / -2);
}
/* Segment nach rechts zum nächsten Knoten */
.rd-weld-process-horizontal .rd-weld-process-step::after {
top: calc(var(--rd-weld-process-node) / 2);
left: 50%;
margin-left: 0;
width: calc(100% + var(--rd-weld-process-gap));
height: 2px;
}
.rd-weld-process-horizontal .rd-weld-process-step:last-child::after {
display: none;
}
/* -----------------------------------------------------------------------------
8. rd-weld-network – Netzwerk-Visual (Canvas wird per JS eingefügt)
Host braucht eine Höhe -> min-height. Canvas liegt dekorativ hinter Inhalt.
-------------------------------------------------------------------------------*/
.rd-weld-network {
position: relative;
min-height: 220px;
}
.rd-weld-network-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
/* Inhalt im Netzwerk-Host über das Canvas heben */
.rd-weld-network > *:not(.rd-weld-network-canvas) {
position: relative;
z-index: 1;
}
/* -----------------------------------------------------------------------------
9. rd-weld-tooltip – Glossar-Tooltip (Bubble wird per JS erzeugt)
Term markiert durch dezente gestrichelte Unterlinie. Bubble erscheint bei
Hover UND Fokus (Tastatur). ARIA via aria-describedby (in JS gesetzt).
-------------------------------------------------------------------------------*/
.rd-weld-tooltip {
position: relative;
cursor: help;
border-bottom: 1px dashed var(--rd-weld-line);
outline-offset: 3px;
}
.rd-weld-tooltip-bubble {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 260px;
padding: 0.6rem 0.75rem;
border-radius: 6px;
background: var(--rd-weld-dark);
color: #f3f4f6;
font-size: 0.82rem;
line-height: 1.4;
font-weight: 400;
text-align: left;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--rd-weld-line);
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 60;
transition:
opacity var(--rd-weld-time-fast) var(--rd-weld-ease),
transform var(--rd-weld-time-fast) var(--rd-weld-ease),
visibility var(--rd-weld-time-fast) var(--rd-weld-ease);
}
/* kleiner Pfeil */
.rd-weld-tooltip-bubble::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--rd-weld-dark);
}
.rd-weld-tooltip:hover .rd-weld-tooltip-bubble,
.rd-weld-tooltip:focus .rd-weld-tooltip-bubble,
.rd-weld-tooltip:focus-within .rd-weld-tooltip-bubble {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* -----------------------------------------------------------------------------
10. rd-weld-dark-section – Dunkle Technik-Section
Dezentes Raster + weicher Lichtreflex. Gute Lesbarkeit durch helle Schrift.
Tipp: in YooTheme zusätzlich "uk-light" setzen, damit UIkit-Komponenten
(Buttons, Subnav etc.) korrekt hell dargestellt werden.
-------------------------------------------------------------------------------*/
.rd-weld-dark-section {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--rd-weld-dark);
color: #e8eaed;
}
/* Rasterlinien (Metall-/Technik-Anmutung) */
.rd-weld-dark-section::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 46px 46px;
pointer-events: none;
}
/* Weicher Lichtreflex oben + Glut-Schimmer */
.rd-weld-dark-section::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(60% 50% at 50% -10%, rgba(255, 255, 255, 0.06), transparent 70%),
radial-gradient(40% 40% at 85% 110%, var(--rd-weld-soft), transparent 70%);
pointer-events: none;
}
/* Lesbarkeit absichern (ohne UIkit-Klassen zu überschreiben) */
.rd-weld-dark-section :is(h1, h2, h3, h4, h5, h6) {
color: #ffffff;
}
/* -----------------------------------------------------------------------------
11. rd-weld-divider – Schweißnaht-Trenner (dekorativ)
Funktioniert auf
oder einem leeren .
-------------------------------------------------------------------------------*/
.rd-weld-divider {
position: relative;
width: 100%;
height: 2px;
border: 0;
margin: 2.4rem 0;
/* Reine Primary-Farbe; nur die Enden blenden weich aus (kein Farbverlauf) */
background: linear-gradient(
90deg,
transparent,
var(--rd-weld-accent) 25%,
var(--rd-weld-accent) 75%,
transparent
);
box-shadow: 0 0 10px var(--rd-weld-line);
overflow: visible;
}
/* Sehr dezenter, langsam wandernder Glanz (nur bei erlaubter Bewegung) */
.rd-weld-divider::after {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 28%;
height: 4px;
border-radius: 4px;
background: radial-gradient(closest-side, var(--rd-weld-accent), transparent);
opacity: 0.7;
transform: translateX(-30%);
animation: rd-weld-divider-glint 5s ease-in-out infinite;
}
@keyframes rd-weld-divider-glint {
0%, 100% { transform: translateX(-30%); opacity: 0.35; }
50% { transform: translateX(260%); opacity: 0.8; }
}
/* -----------------------------------------------------------------------------
12. rd-weld-magnetic – Magnetischer Button (Logik in JS)
Sanfte Rückkehr zur Ausgangslage; aktive Bewegung kommt aus JS.
-------------------------------------------------------------------------------*/
.rd-weld-magnetic {
transition: transform var(--rd-weld-time-fast) var(--rd-weld-ease);
will-change: transform;
}
/* Während aktiver Mausverfolgung deaktiviert JS die Transition (Klasse) */
.rd-weld-magnetic.rd-weld-magnetic-active {
transition: transform 0.05s linear;
}
/* =============================================================================
13. prefers-reduced-motion: reduce
Bewegung stark reduzieren/deaktivieren. Glow/Farbwechsel bleiben erlaubt.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
/* Schweißnaht statisch, kein Funke */
.rd-weld-js .rd-weld-headline::after { transform: scaleX(1); transition: none; }
.rd-weld-js .rd-weld-headline::before,
.rd-weld-js .rd-weld-headline.rd-weld-in::before { animation: none; opacity: 0; }
/* Scan aus */
.rd-weld-scan-card:hover::before,
.rd-weld-scan-card:focus-within::before { animation: none; opacity: 0; }
/* Funken aus */
.rd-weld-spark-button:hover::before,
.rd-weld-spark-button:hover::after,
.rd-weld-spark-button:focus-visible::before,
.rd-weld-spark-button:focus-visible::after { animation: none; opacity: 0; }
/* Reveal ohne Bewegung sofort sichtbar */
.rd-weld-js .rd-weld-reveal,
.rd-weld-js .rd-weld-reveal-left,
.rd-weld-js .rd-weld-reveal-right {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Prozess sofort "geschweißt" (glühend), ohne Zünd-Animation */
.rd-weld-js .rd-weld-process-step::before,
.rd-weld-js .rd-weld-process-step::after { transition: none !important; }
.rd-weld-js .rd-weld-process .rd-weld-process-step::after {
background: var(--rd-weld-accent);
box-shadow: 0 0 8px var(--rd-weld-line);
}
.rd-weld-js .rd-weld-process .rd-weld-process-step::before {
background: var(--rd-weld-accent-hot);
border-color: var(--rd-weld-accent-hot);
box-shadow: 0 0 10px var(--rd-weld-line);
}
/* Glow-Anhebung neutralisieren (Glow selbst bleibt) */
.rd-weld-glow-card:hover,
.rd-weld-glow-card:focus-within { transform: none; }
/* Trenner-Glanz aus */
.rd-weld-divider::after { animation: none; opacity: 0.5; transform: translateX(120%); }
/* Tooltip ohne Slide */
.rd-weld-tooltip-bubble { transition: opacity var(--rd-weld-time-fast) var(--rd-weld-ease); transform: translateX(-50%); }
.rd-weld-tooltip:hover .rd-weld-tooltip-bubble,
.rd-weld-tooltip:focus .rd-weld-tooltip-bubble,
.rd-weld-tooltip:focus-within .rd-weld-tooltip-bubble { transform: translateX(-50%); }
/* Magnetic neutral (JS deaktiviert zusätzlich) */
.rd-weld-magnetic { transition: none; }
}