/* =========================================================================
Aktionstemplate-Styles (Fußball-Sommer 2026)
-------------------------------------------------------------------------
Bewusst SEPARAT von globals.css: diese Datei wird nur per im
Root-Layout eingebunden, WENN eine Aktion aktiv ist. Bei deaktivierter
Aktion wird hiervon nichts geladen.
Mechanik wie Dark Mode: das Attribut [data-campaign=""] (am ODER
am Vorschau-Element im Admin) überschreibt die Marken-Variablen.
Konzept: docs/plan-aktionstemplates.md.
========================================================================= */
/* --- Fußball-Sommer 2026 (Rasen-Grün + Gold; Flaggenstreifen schwarz-rot-gold) ---
Doppeltes Attribut = Spezifität (0,2,0) > :root (0,1,0): die Palette gewinnt
unabhängig von der Stylesheet-Reihenfolge (eigene Datei, nicht in globals). */
[data-campaign="wm2026"][data-campaign] {
--primary: oklch(0.46 0.13 152); /* Rasen-Grün (Fußball) */
--primary-foreground: oklch(0.98 0 0);
--ring: oklch(0.46 0.13 152);
--sidebar-primary: oklch(0.46 0.13 152);
--sidebar-primary-foreground: oklch(0.98 0 0);
--sidebar-ring: oklch(0.46 0.13 152);
--brand-amber: oklch(0.86 0.17 95); /* Gold-Akzent */
--brand-amber-fg: oklch(0.58 0.15 95);
}
/* Dark: am (ganze Seite) UND als Nachfahre (Admin-Vorschau in .dark). */
.dark[data-campaign="wm2026"],
.dark [data-campaign="wm2026"] {
--primary: oklch(0.70 0.15 152);
--primary-foreground: oklch(0.16 0.04 152);
--ring: oklch(0.70 0.15 152);
--sidebar-primary: oklch(0.70 0.15 152);
--sidebar-primary-foreground: oklch(0.16 0.04 152);
--sidebar-ring: oklch(0.70 0.15 152);
--brand-amber: oklch(0.86 0.17 95);
--brand-amber-fg: oklch(0.88 0.16 95);
}
/* Abgeblasster Rasen-Hintergrund NUR auf Elementen mit `.campaign-grass-bg`
(Hero-Section der Startseite + /jobs-Seitenwrapper) — nicht mehr site-weit.
Das echte Spielfeld-Foto stark heruntergewaschen über einem halbdeckenden
Verlauf der Seiten-Hintergrundfarbe. Nutzt das aktuelle --background
(hell/dunkel automatisch). Statisch (kein Repaint). */
[data-campaign="wm2026"] .campaign-grass-bg {
background-image:
linear-gradient(
oklch(from var(--background) l c h / 0.85),
oklch(from var(--background) l c h / 0.85)
),
url("/campaigns/rasen.webp");
background-repeat: repeat, repeat;
background-size: 540px 540px, 540px 540px;
background-position: center, center;
}
/* Header-Logo bleibt bewusst im ORIGINAL (kein Tausch) — gewünscht trotz Aktion.
Nur die animierte Logo-Marke/Ladeanimation (LogoLoader/AnimatedLogoMark) färbt
sich über var(--primary)/var(--brand-amber) mit (Aktionsfarbe).
Hinweis: public/logo-wm2026.svg wird dadurch nicht mehr genutzt. */
/* Echtes Rasen-Bild im Hero: unten als „Spielfeld" sichtbar, nach oben maskiert
ausgeblendet (Lesbarkeit). Maske = Alpha, keine Markenfarbe. */
.campaign-hero-bg {
background-position: bottom center;
background-size: cover;
}
[data-campaign="wm2026"] .campaign-hero-bg {
background-image: url("/campaigns/rasen.webp");
opacity: 0.5;
-webkit-mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 72%);
mask-image: linear-gradient(to top, #000 0%, #000 18%, transparent 72%);
}
.dark[data-campaign="wm2026"] .campaign-hero-bg,
.dark [data-campaign="wm2026"] .campaign-hero-bg {
opacity: 0.55;
}
/* Flaggenstreifen am oberen Rand des Hero/der Einladung. Standard = Deutschland
(schlichte Trikolore). Auf der Umfrage-Einladung folgt der Streifen der gewählten
Sprache (Attribut data-flag = Sprachcode, siehe Overrides unten); ohne data-flag
(z. B. Startseiten-Hero) bleibt es bei Deutschland. */
[data-campaign="wm2026"] .campaign-hero-flag {
height: 0.75rem;
background: linear-gradient(
to bottom,
#000000 0 33.33%,
#dd0000 33.33% 66.66%,
#ffce00 66.66% 100%
);
}
/* Sprach-spezifische Flaggen (nur Umfrage-Einladung). Eigenständige nationale
Flaggenfarben — es gibt dafür kein Marken-Token; sie liegen bewusst hier in der
Aktions-Datei, genau wie die Default-Trikolore darüber. Echte Trikoloren wo
möglich; bei Flaggen mit Emblem/Union-Muster (Türkei, UK) und sprachübergreifenden
Fällen (Arabisch = kein einzelnes Land) eine sinnvolle Annäherung über die
Landes-/panarabischen Farben — als dünner Streifen nicht detailliert darstellbar.
data-flag="de" fällt auf die Default-Regel oben zurück (kein Override nötig). */
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="en"] {
/* Vereinigtes Königreich — Union-Jack-Anmutung statt senkrechter Trikolore (die sah
wie Frankreich aus): weiß umrandete rote 45°-Bänder auf blauem Feld; linke Hälfte
nach rechts geneigt (45°), rechte Hälfte nach links (135°) — spiegeln in der Mitte. */
background-color: #012169;
background-image:
repeating-linear-gradient(45deg, transparent 0 7px, #ffffff 7px 9px, #c8102e 9px 11px, #ffffff 11px 13px),
repeating-linear-gradient(135deg, transparent 0 7px, #ffffff 7px 9px, #c8102e 9px 11px, #ffffff 11px 13px);
background-size: 50% 100%, 50% 100%;
background-position: left, right;
background-repeat: no-repeat, no-repeat;
}
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="tr"] {
/* Türkei — rot/weiß als senkrechte Abschnitte (Stern/Halbmond im dünnen Streifen
nicht darstellbar; Rot dominant wie das Flaggenfeld). */
background: linear-gradient(to right, #e30a17 0 38%, #ffffff 38% 62%, #e30a17 62% 100%);
}
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="ar"] {
/* Arabisch (kein einzelnes Land) — panarabische Farben als senkrechte Bänder */
background: linear-gradient(to right, #000000 0 25%, #ffffff 25% 50%, #007a3d 50% 75%, #ce1126 75% 100%);
}
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="ru"] {
/* Russland — waagerechte Trikolore */
background: linear-gradient(to bottom, #ffffff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66% 100%);
}
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="pl"] {
/* Polen — waagerecht Weiß/Rot */
background: linear-gradient(to bottom, #ffffff 0 50%, #dc143c 50% 100%);
}
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="ro"] {
/* Rumänien — senkrechte Trikolore */
background: linear-gradient(to right, #002b7f 0 33.33%, #fcd116 33.33% 66.66%, #ce1126 66.66% 100%);
}
[data-campaign="wm2026"] .campaign-hero-flag[data-flag="it"] {
/* Italien — senkrechte Trikolore */
background: linear-gradient(to right, #008c45 0 33.33%, #ffffff 33.33% 66.66%, #cd212a 66.66% 100%);
}
/* „Beliebt"-Tags im Hero: die transparenten Outline-Buttons sind auf dem
Rasen-Hintergrund schwer lesbar. In der Aktion daher voll in der Akzentfarbe
(Gold) hinterlegt — keine Transparenz mehr — mit dunklem Text für Kontrast. */
[data-campaign="wm2026"] .campaign-tag {
background-color: var(--brand-amber);
border-color: transparent;
color: oklch(0.24 0.04 95);
font-weight: 600;
box-shadow: 0 1px 2px oklch(0 0 0 / 0.18);
}
[data-campaign="wm2026"] .campaign-tag:hover {
background-color: oklch(from var(--brand-amber) calc(l - 0.06) c h);
color: oklch(0.24 0.04 95);
}
/* Das „Beliebt"-Label davor: gedämpftes Grau ist auf dem Rasen schlecht lesbar
— in der Aktion daher in voller Vordergrundfarbe und etwas kräftiger. */
[data-campaign="wm2026"] .campaign-tag-label {
color: var(--foreground);
font-weight: 600;
}
/* „Alle Jobs anzeigen" liegt über dem Rasen-Hero: in der Aktion mit einem
weißen Badge hinterlegt (nur so breit wie der Text), damit der Link lesbar
bleibt. */
[data-campaign="wm2026"] .campaign-alljobs {
width: fit-content;
margin-left: auto;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
background-color: #ffffff;
color: var(--primary);
box-shadow: 0 1px 3px oklch(0 0 0 / 0.2);
}
[data-campaign="wm2026"] .campaign-alljobs:hover {
background-color: oklch(0.97 0 0);
color: var(--primary);
}
/* Trikot: statische Pose + Flagge-im-Wind-Flatter-Filter (falls genutzt). */
.campaign-jersey {
transform-origin: center;
transform: perspective(1100px) rotateZ(-20deg) rotateX(9deg) rotateY(20deg);
}
.campaign-jersey-cloth {
filter: url(#campaign-flutter);
will-change: filter;
}
@media (prefers-reduced-motion: reduce) {
.campaign-jersey-cloth { filter: none; }
}
/* Moderner Fußball: fällt links ins Bild, hüpft 2–3× nach rechts, rollt aus und
bleibt liegen. ENTKOPPELT auf 3 Ebenen, damit es flüssig läuft (kein Ruckeln,
kein Stillstand am Sprung-Hochpunkt):
- .campaign-ball = Vorwärts (X): EINE durchlaufende, abbremsende Bewegung.
- .campaign-ball-bounce = Sprung (Y): eigenständig nach Schwerkraft (rauf bremst,
runter beschleunigt) — Vorwärtsfahrt läuft durch den Hochpunkt hindurch.
- .campaign-ball-spin = Drehung am Bild (am innersten Element, damit der
Sprung senkrecht bleibt und nicht mitrotiert). */
.campaign-ball {
animation: campaign-ball-x 2.8s ease-out forwards;
will-change: transform;
}
@keyframes campaign-ball-x {
from { transform: translateX(-82vw); }
to { transform: translateX(0); }
}
.campaign-ball-bounce {
/* Sprung (Y) + Auflegen des Schattens am Ende. Der Schatten sitzt bewusst auf
der Bounce-Ebene (nur translateY), nicht auf der Spin-Ebene: die rotiert am
Ende auf 540deg und wuerde einen nach unten gerichteten Schatten nach oben
kippen. So bekommt der ruhende Ball die uebliche, weiche Schattierung wie die
uebrigen Komponenten — erst wenn er die Endposition erreicht hat. */
animation: campaign-ball-y 2.8s forwards, campaign-ball-land 2.8s ease-out forwards;
will-change: transform, filter;
}
@keyframes campaign-ball-land {
0%, 88% { filter: drop-shadow(0 0 0 oklch(0 0 0 / 0)); }
100% { filter: drop-shadow(0 0.45rem 0.5rem oklch(0 0 0 / 0.2)); }
}
@keyframes campaign-ball-y {
0% { transform: translateY(-26rem); animation-timing-function: cubic-bezier(0.55,0,1,0.45); }
17% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0.55,0.45,1); }
34% { transform: translateY(-9rem); animation-timing-function: cubic-bezier(0.55,0,1,0.45); }
50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0.55,0.45,1); }
64% { transform: translateY(-4.4rem); animation-timing-function: cubic-bezier(0.55,0,1,0.45); }
76% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0.55,0.45,1); }
86% { transform: translateY(-1.7rem); animation-timing-function: cubic-bezier(0.55,0,1,0.45); }
94% { transform: translateY(0); }
100% { transform: translateY(0); }
}
.campaign-ball-spin {
animation: campaign-ball-spin 2.8s ease-out forwards;
will-change: transform;
}
@keyframes campaign-ball-spin {
from { transform: rotate(0deg); }
to { transform: rotate(540deg); }
}
@media (prefers-reduced-motion: reduce) {
.campaign-ball,
.campaign-ball-bounce,
.campaign-ball-spin { animation: none; }
/* Ruheposition direkt mit der ueblichen Schattierung (keine Animation, die sie auflegt). */
.campaign-ball-bounce { filter: drop-shadow(0 0.45rem 0.5rem oklch(0 0 0 / 0.2)); }
}
/* Gold-Schein-Animation um die Abschluss-Box (nur Aktion wm2026).
----------------------------------------------------------------------------
VERBOTEN (vom Maintainer ausdrücklich, NICHT wieder bauen):
1. Rotierende „Wirbel"-Animation (Flaggen als Elemente drehen/bloomen).
2. „Nur eine Linie" / Flaggenfarben um die Box (war „to much").
3. Eine Animation, die sich nur „vervollständigt" (clip-path-Draw-in).
4. Kein Quadrat erzwingen.
5. NICHTS, das die Box-Größe/Position verändert (kein padding-/scale-Puls,
der die Box verschiebt).
GEWOLLT (genau so):
- Eine GOLDENE Schein-Animation, die um die Linie der Box läuft.
- Als SCHATTEN (box-shadow) ausgeführt → verändert das Layout NICHT, die Box
bleibt exakt an ihrer Stelle (box-shadow wird außerhalb der Border gemalt und
von eigenem overflow-hidden NICHT geklippt).
----------------------------------------------------------------------------
Technik: zwei box-shadows — ein KONSTANTER weicher Gold-Halo (gleichmäßige Basis
rundum) + ein heller Akzent, dessen Offset einem ECHTEN KREIS folgt (sin/cos mit
vielen Stützpunkten, lineares Tempo). Dadurch keine Eck-Sprünge und kein
schwankender Radius wie bei einem 4-Punkt-Rauten-Pfad → ruhig, gleichmäßig,
flüssig. Langsam und endlos. Offset-Radius 7px (Werte = 7·sin/cos je 30°). */
[data-campaign="wm2026"] .campaign-goldrun {
animation: campaign-goldrun 6s linear infinite;
}
@keyframes campaign-goldrun {
0% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 0 -7px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
8.333% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 3.5px -6.1px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
16.667% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 6.1px -3.5px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
25% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 7px 0 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
33.333% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 6.1px 3.5px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
41.667% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 3.5px 6.1px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
50% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 0 7px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
58.333% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), -3.5px 6.1px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
66.667% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), -6.1px 3.5px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
75% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), -7px 0 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
83.333% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), -6.1px -3.5px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
91.667% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), -3.5px -6.1px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
100% { box-shadow: 0 0 16px 0 oklch(from var(--brand-amber) l c h / 0.26), 0 -7px 22px -2px oklch(from var(--brand-amber) l c h / 0.6); }
}
@media (prefers-reduced-motion: reduce) {
/* Kein Lauf — nur der konstante, gleichmäßige Gold-Halo. */
[data-campaign="wm2026"] .campaign-goldrun {
animation: none;
box-shadow: 0 0 18px 0 oklch(from var(--brand-amber) l c h / 0.3);
}
}