DogFatherGitandClaude Opus 5
3f9997456a
Nutzer-Report per Foto: beim Tippen auf "DE" im Handy-Menue erschien das Sprachfenster halb links ausserhalb des Bildschirms, man konnte keine Sprache mehr lesen oder treffen. Ursache: Die Handy-Regel, die alle Aufklapp-Fenster auf statische Position und volle Breite umstellt, hat den Sprachschalter nicht erreicht -- seine Desktop-Regel (.sprach-schalter .nav-dropdown, 0-2-0) ist spezifischer, und eine @media-Abfrage erhoeht die Spezifitaet nicht. Dadurch lief die Desktop-Animation "sprach-dropdown-in" weiter, die per fill-mode:both dauerhaft transform: translateX(-50%) setzt. Auf dem Desktop korrekt (schmales Fenster mittig unter dem Knopf), im Handy-Menue aber toedlich: das Fenster ist dort bildschirmbreit und wurde um seine halbe Breite nach links geschoben (gemessen live: x = -148px bei 390px Viewport). Fix: dieselben Handy-Regeln erneut mit ausreichender Spezifitaet fuer den Sprachschalter, samt Kommentar zur Begruendung. Geprueft mit Playwright (echter Browser): 390x844, 360x640, Querformat 844x390 und Tablet 768x1024 -> Fenster jeweils vollstaendig im Bild, alle 5 Sprachen sichtbar; Desktop 1920 unveraendert schmal und zentriert; Sprachwechsel (English) funktioniert weiterhin. Co-Authored-By: Claude Opus 5 <[email protected]>
4290 lines
166 KiB
CSS
4290 lines
166 KiB
CSS
/* =====================================================================
|
||
DOGFATHER UNIVERSE — main.css
|
||
Gemeinsames Design-System für alle drei Welten (Dogfather / HasiDog /
|
||
Manager Dogfather). Farben kommen aus den theme-*.css Dateien über
|
||
CSS-Variablen — dieses File ist bewusst themen-neutral.
|
||
===================================================================== */
|
||
|
||
/* ---------- Reset ---------- */
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
/* overflow-x:hidden gehört auf BEIDE Elemente: <html> ist im Standards-Modus
|
||
das tatsächliche Scroll-Element des Dokuments, nicht <body> — nur auf body
|
||
gesetzt, ließ sich die Seite auf schmalen Bildschirmen (Handy-Breiten wie
|
||
320-414px) trotzdem ca. 50px horizontal wegwischen und zeigte Leerraum
|
||
hinter den absichtlich überbreiten Deko-Elementen (Nebel/Aurora-Hintergrund).
|
||
Tagescheck-Fund vom 02.08.2026, siehe DogFather Website.md. */
|
||
html { overflow-x: hidden; }
|
||
html, body { margin: 0; padding: 0; }
|
||
img, svg { max-width: 100%; display: block; }
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font: inherit; }
|
||
ul { list-style: none; margin: 0; padding: 0; }
|
||
|
||
/* ---------- Fallback-Theme (Dogfather) — wird von theme-*.css überschrieben ---------- */
|
||
:root {
|
||
--bg: #0b0d10;
|
||
--bg-alt: #12151a;
|
||
--card-bg: #171b21;
|
||
--text: #f3f5f7;
|
||
--text-muted: #9aa4b2;
|
||
--border: #262c35;
|
||
--accent: #8fd9ea; /* Babyblau */
|
||
--accent-2: #8b5cf6; /* Lila */
|
||
--accent-contrast: #0b0d10;
|
||
--radius: 14px;
|
||
--font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
|
||
--font-body: "Inter", "Segoe UI", system-ui, sans-serif;
|
||
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||
}
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--font-body);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
h1, h2, h3, h4 {
|
||
font-family: var(--font-head);
|
||
line-height: 1.2;
|
||
margin: 0 0 .5em;
|
||
font-weight: 700;
|
||
}
|
||
h1 { font-size: clamp(2.2rem, 5.4vw, 3.5rem); }
|
||
h2 { font-size: clamp(1.95rem, 4.3vw, 2.95rem); }
|
||
h3 { font-size: 1.62rem; }
|
||
p { margin: 0 0 1em; color: var(--text-muted); font-size: 1.32rem; line-height: 1.85; }
|
||
.lead { font-size: 1.5rem; color: var(--text); }
|
||
.quote { font-size: 1.4rem; }
|
||
|
||
.container {
|
||
width: min(1180px, 92vw);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
|
||
.section-tight { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
|
||
|
||
.eyebrow {
|
||
display: inline-block;
|
||
font-size: .78rem;
|
||
letter-spacing: .14em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
margin-bottom: .8em;
|
||
}
|
||
|
||
/* ---------- Nebel/Partikel Hintergrund ---------- */
|
||
.fog-layer {
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
}
|
||
.fog-layer span {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
|
||
opacity: .08;
|
||
filter: blur(4px);
|
||
animation: drift 26s linear infinite;
|
||
}
|
||
@keyframes drift {
|
||
0% { transform: translateY(0) translateX(0); }
|
||
50% { transform: translateY(-40px) translateX(20px); }
|
||
100% { transform: translateY(0) translateX(0); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.fog-layer span { animation: none; }
|
||
}
|
||
|
||
/* ---------- Header / Navigation ---------- */
|
||
header.site-header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
/* Kräftig deckend statt Weichzeichnen durch das Bild dahinter — die
|
||
Kombination aus backdrop-filter + fest positionierter Kopfzeile führte
|
||
bei Chromium-Rendern zu Darstellungsfehlern (Logo/Menü teils unsichtbar).
|
||
Deckende Farbe braucht keinen Weichzeichner und ist zusätzlich schneller. */
|
||
background: var(--bg);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.nav-bar {
|
||
/* Eigene, etwas breitere Kappung als .container (1180px) — die Nav
|
||
braucht durch größere Schrift + mehr Abstand + Polarlicht-Padding
|
||
spürbar mehr Platz, ohne dass der restliche Seiteninhalt breiter
|
||
werden soll.
|
||
Bugfix 04.08.2026: 1400px -> 1440px angehoben (siehe damalige Analyse).
|
||
Bugfix 20.08.2026: reichte seither wieder nicht mehr — die Nav braucht
|
||
inzwischen (Nav-Punkt "DogiCrew" + "BALD"-Badge dazugekommen) real ca.
|
||
1491px, der Deckel blieb bei 1440px. 1440px -> 1560px, zusammen mit der
|
||
auf 1650px angehobenen Hamburger-Schwelle weiter unten (siehe Kommentar
|
||
dort) — diesmal mit echtem Sicherheitsabstand statt wieder nur knapp
|
||
genug für den aktuellen Stand. */
|
||
width: min(1560px, 94vw);
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
/* Bewusst NICHT space-between: sonst landet der ganze freie Platz auf
|
||
großen Bildschirmen als große Lücke zwischen Logo und "Start", und
|
||
das Menü wirkt an die rechte Kante gepresst. Stattdessen rückt das
|
||
Menü mit festem Abstand direkt ans Logo heran, der übrige Platz
|
||
bleibt rechts nach dem Bewerben-Knopf. */
|
||
justify-content: flex-start;
|
||
gap: 2rem;
|
||
padding: .9rem 0;
|
||
flex-wrap: nowrap;
|
||
}
|
||
/* Logo und Menü-Knopf dürfen NIE zusammengequetscht werden — auch nicht,
|
||
wenn .nav-links (das ausgeklappte Menü) aus irgendeinem Grund kurzzeitig
|
||
noch normal mitgerechnet wird, bevor die Klappt-Logik greift. */
|
||
.brand, .nav-toggle { flex-shrink: 0; }
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .65rem;
|
||
font-family: var(--font-head);
|
||
font-weight: 800;
|
||
font-size: 1.32rem;
|
||
letter-spacing: .02em;
|
||
}
|
||
.brand .heart { color: var(--accent); }
|
||
.brand-logo {
|
||
width: 42px;
|
||
height: 42px;
|
||
border-radius: 9px;
|
||
object-fit: cover;
|
||
flex-shrink: 0;
|
||
}
|
||
.brand small {
|
||
display: block;
|
||
font-size: .7rem;
|
||
font-weight: 500;
|
||
letter-spacing: .1em;
|
||
color: var(--text-muted);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
/* Seit die Kategorien eigene farbige Pillen (Polarlicht-Hintergrund)
|
||
haben, trennt schon die Farbfläche selbst optisch — ein kleinerer
|
||
Lücken-Abstand wirkt dadurch aufgeräumter/professioneller als der
|
||
vorherige große Abstand. */
|
||
gap: .7rem;
|
||
}
|
||
.nav-group { position: relative; }
|
||
.nav-group > button {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
background: none;
|
||
border: none;
|
||
border-radius: 999px;
|
||
color: var(--text);
|
||
font-weight: 600;
|
||
font-size: 1.14rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .3rem;
|
||
padding: .5rem .55rem;
|
||
transition: color .2s ease;
|
||
}
|
||
.nav-group > button:hover, .nav-group.open > button { color: var(--accent); }
|
||
.nav-flat {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
font-weight: 600;
|
||
font-size: 1.14rem;
|
||
padding: .5rem .55rem;
|
||
transition: color .2s ease;
|
||
}
|
||
.nav-flat:hover, .nav-flat.active { color: var(--accent); }
|
||
|
||
/* Kein Button-/Pillen-Look im Ruhezustand mehr (0% Deckkraft) — die
|
||
Kategorien sehen bei Dogi so aus wie normale Textlinks. Der Farbschein
|
||
in den echten Farben der jeweiligen Welt (siehe theme-dogfather/
|
||
-hasidog/-spicymedia.css) taucht NUR bei Hover/offenem Dropdown ganz
|
||
dezent auf, als kleiner Hinweis statt als ständige Box. */
|
||
.nav-group > button::before, .nav-flat::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -70% -35%;
|
||
z-index: -1;
|
||
background:
|
||
radial-gradient(circle at 28% 30%, var(--brand-1, transparent), transparent 62%),
|
||
radial-gradient(circle at 74% 72%, var(--brand-2, transparent), transparent 62%);
|
||
filter: blur(9px) saturate(1.25);
|
||
opacity: 0;
|
||
animation: nav-cta-aurora 11s ease-in-out infinite alternate;
|
||
pointer-events: none;
|
||
transition: opacity .3s ease;
|
||
}
|
||
.nav-group:hover > button::before,
|
||
.nav-group.open > button::before,
|
||
.nav-flat:hover::before,
|
||
.nav-flat.active::before {
|
||
opacity: .32;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.nav-group > button::before, .nav-flat::before { animation: none; }
|
||
}
|
||
|
||
.nav-item-dogfather { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(139, 92, 246, .85); }
|
||
.nav-item-hasidog { --brand-1: rgba(143, 217, 234, .9); --brand-2: rgba(199, 204, 209, .8); }
|
||
.nav-item-manager { --brand-1: rgba(217, 74, 92, .85); --brand-2: rgba(232, 147, 58, .8); }
|
||
.nav-item-medien { --brand-1: rgba(143, 217, 234, .7); --brand-2: rgba(217, 74, 92, .6); }
|
||
.nav-item-start { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .5); }
|
||
.nav-item-links { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(212, 175, 55, .7); }
|
||
/* Aufgeklapptes Kategorie-Menü: gleiche "gläserne, dunkle Karte mit
|
||
farbigem Schein"-Machart wie beim Sprachschalter-Dropdown, aber im
|
||
Farbton DIESER Kategorie (--brand-1/--brand-2, vom umschließenden
|
||
.nav-group geerbt) statt neutral silbern — sorgt für einen klaren,
|
||
ruhigen Look statt der vorherigen schlichten grauen Box. */
|
||
.nav-dropdown {
|
||
position: absolute;
|
||
/* WICHTIG: KEIN margin-top/Lücke zum Knopf — sonst verliert die Maus
|
||
beim Runterfahren zur Box kurz den Hover auf .nav-group, und das
|
||
Menü klappt zu, bevor man einen Punkt anklicken kann (Bug gefunden
|
||
03.08.2026, durch den Caret-Abstand selbst verursacht). Box sitzt
|
||
deshalb bewusst bündig an top:100%, der Verbindungs-Pfeil unten
|
||
pokt einfach in die Knopf-Kante hinein statt in eine echte Lücke. */
|
||
top: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
min-width: 230px;
|
||
background: rgba(4, 5, 8, .96);
|
||
border: 1px solid rgba(255, 255, 255, .14);
|
||
border-radius: 14px;
|
||
padding: .45rem;
|
||
box-shadow:
|
||
0 14px 34px rgba(0, 0, 0, .6),
|
||
0 0 16px var(--brand-1, rgba(220, 226, 235, .3)),
|
||
0 0 32px var(--brand-2, rgba(190, 200, 215, .15));
|
||
display: none;
|
||
flex-direction: column;
|
||
/* EIGENE Animation statt der geteilten sprach-dropdown-in: eine
|
||
@keyframes-Regel setzt "transform" als GANZES pro Frame, würde also
|
||
das zentrierende translateX(-50%) oben komplett überschreiben und
|
||
die Box nach dem Aufklappen sichtbar nach rechts verschieben (Bug
|
||
gefunden 03.08.2026 — Box wirkte "nicht mittig", war es auch nicht:
|
||
transform sprang nach der Animation auf reines translateY/scale).
|
||
Der Sprachschalter unten ist rechtsbündig (kein translateX nötig)
|
||
und behält deshalb bewusst die alte, geteilte Animation. */
|
||
animation: nav-dropdown-in .18s ease both;
|
||
}
|
||
/* Kleiner Verbindungs-Pfeil (Caret), mittig unter dem Kategorie-Knopf —
|
||
macht auch dann unmissverständlich klar, zu welcher Kategorie das
|
||
Menü gehört, wenn die Box (wegen mehr Einträgen) breiter ist als der
|
||
Knopf selbst und dadurch optisch in Nachbar-Kategorien hineinragt. */
|
||
.nav-dropdown::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 50%;
|
||
transform: translateX(-50%) rotate(45deg);
|
||
width: 14px;
|
||
height: 14px;
|
||
background: rgba(4, 5, 8, .96);
|
||
border-left: 1px solid rgba(255, 255, 255, .14);
|
||
border-top: 1px solid rgba(255, 255, 255, .14);
|
||
border-radius: 3px 0 0 0;
|
||
pointer-events: none;
|
||
}
|
||
.nav-group.open .nav-dropdown { display: flex; }
|
||
/* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim
|
||
Drüberfahren, ohne extra Klick — auf Touch/Tablet bleibt es bewusst
|
||
beim Klick (dort gibt es kein echtes "Hover"). */
|
||
@media (hover: hover) and (pointer: fine) {
|
||
.nav-group:hover .nav-dropdown { display: flex; }
|
||
}
|
||
/* Bewusst KEIN Button-Look (kein gefüllter Hintergrund, keine Pille) —
|
||
nur schlichte Menü-Zeilen, die beim Hover die Farbe wechseln. Die
|
||
Kategorie-Knöpfe selbst (DogFather/HasiDog/Manager/...) behalten
|
||
weiterhin ihren Pillen-Stil, nur das aufgeklappte Untermenü nicht. */
|
||
.nav-dropdown a {
|
||
padding: .55rem .75rem;
|
||
font-size: 1.06rem;
|
||
color: var(--text-muted);
|
||
transition: color .2s ease;
|
||
}
|
||
/* translateX(-50%) MUSS in jedem Frame mit drinstehen, sonst hebt die
|
||
Animation die Zentrierung von .nav-dropdown auf (siehe Kommentar oben). */
|
||
@keyframes nav-dropdown-in {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
|
||
}
|
||
.nav-dropdown a:hover, .nav-dropdown a.active {
|
||
color: var(--brand-1, var(--accent));
|
||
}
|
||
|
||
/* ===================================================================
|
||
Sprachumschalter — eigenes kleines "Schmuckstück" in der Nav-Bar statt
|
||
eines schlichten Menüpunkts: eine gläserne Pille mit Polarlicht-Schein
|
||
in der jeweiligen Sprachfarbe (--sprach-glut, von main.js gesetzt),
|
||
eine glänzende, sich sacht drehende "Mini-Planet"-Kugel und ein
|
||
Dropdown im selben Look, das beim Öffnen sanft einschwebt. */
|
||
.sprach-schalter { --sprach-glut: var(--accent); }
|
||
.sprach-schalter > button {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
font-size: 1.08rem;
|
||
font-weight: 700;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
padding: .45rem 1.1rem .45rem .6rem;
|
||
border-radius: 999px;
|
||
/* Rand bewusst neutral silbern (wie beim Dropdown-Kasten) statt in der
|
||
Sprachfarbe — nur die Kugel + das Glühen dahinter sind bunt, der
|
||
Rahmen selbst bleibt für alle Sprachen gleich. */
|
||
border: 1px solid rgba(210, 216, 224, .55);
|
||
background: rgba(4, 5, 8, .94);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, .05),
|
||
0 3px 10px rgba(0, 0, 0, .5),
|
||
0 0 10px color-mix(in srgb, var(--sprach-glut) 55%, transparent),
|
||
0 0 22px color-mix(in srgb, var(--sprach-glut) 35%, transparent);
|
||
transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
|
||
}
|
||
.sprach-schalter > button:hover,
|
||
.sprach-schalter.open > button {
|
||
transform: translateY(-1px);
|
||
border-color: rgba(235, 239, 244, .9);
|
||
box-shadow:
|
||
inset 0 0 0 1px rgba(255, 255, 255, .08),
|
||
0 6px 16px rgba(0, 0, 0, .4),
|
||
0 0 24px color-mix(in srgb, var(--sprach-glut) 60%, transparent);
|
||
}
|
||
/* Ebene: die "Landesflagge" als weiche, wandernde Aurora-Wolke im
|
||
Hintergrund des Knopfs — mehrere Farbflecken statt nur eines Farbtons,
|
||
dieselbe Machart wie beim Bewerben-Knopf, nur mit den 2-3 echten
|
||
Farben DIESER Sprache (siehe SPRACHEN.farbstopps in main.js). */
|
||
.sprach-schalter > button::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -65%;
|
||
z-index: -2;
|
||
background: var(--sprach-aurora);
|
||
filter: blur(8px) saturate(1.3);
|
||
/* Bewusst nur ein dezenter Farbschein statt einer vollflächig bunten
|
||
Fläche — der Knopf selbst soll "leuchtend schwarz" wirken (Glow am
|
||
Rand + hinter der Kugel), nicht komplett eingefärbt. */
|
||
opacity: .32;
|
||
animation: sprach-aurora-drift 7s ease-in-out infinite alternate;
|
||
pointer-events: none;
|
||
}
|
||
.sprach-schalter > button:hover::before,
|
||
.sprach-schalter.open > button::before {
|
||
opacity: .48;
|
||
}
|
||
@keyframes sprach-aurora-drift {
|
||
from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
|
||
to { transform: translate(3%, 3%) rotate(8deg) scale(1.12); }
|
||
}
|
||
/* Ebene: ein schmales Lichtband, das einmal quer durch den Knopf läuft —
|
||
dieselbe Machart wie beim Bewerben-Knopf, nur in der Sprachfarbe. */
|
||
.sprach-schalter > button::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--sprach-glut) 55%, white 25%) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
opacity: .8;
|
||
animation: sprach-schimmer 5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes sprach-schimmer {
|
||
0% { background-position: 160% 0; }
|
||
100% { background-position: -60% 0; }
|
||
}
|
||
/* Bugfix 20.08.2026 (Nutzer-Report per Screenshot-Vergleich: Kategorie-
|
||
Menüs wie "Medien" sind mittig unter dem Knopf, der Sprachschalter aber
|
||
rechtsbündig) — war bewusst rechtsbündig, seit der Sprachschalter aber
|
||
nicht mehr ganz am rechten Rand sitzt (DogiCrew-/Bewerben-Knopf daneben),
|
||
ist genug Platz für dieselbe zentrierte Ausrichtung wie überall sonst.
|
||
left/transform hier deshalb NICHT mehr überschrieben (erbt jetzt
|
||
left:50%/translateX(-50%) von der allgemeinen .nav-dropdown-Regel,
|
||
genau wie der bereits zentrierte Verbindungs-Pfeil (::before) es die
|
||
ganze Zeit schon war — vorher zeigte der Pfeil mittig, während die Box
|
||
selbst daneben saß). Eigene Animation bleibt bestehen (siehe Kommentar
|
||
der allgemeinen .nav-dropdown-Animation), jetzt aber ebenfalls mit
|
||
translateX(-50%) in jedem Frame, sonst würde sie die Zentrierung wieder
|
||
aufheben. */
|
||
.sprach-schalter .nav-dropdown {
|
||
min-width: 190px;
|
||
padding: .4rem;
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(210, 216, 224, .55);
|
||
background: rgba(4, 5, 8, .96);
|
||
box-shadow:
|
||
0 14px 34px rgba(0, 0, 0, .6),
|
||
0 0 16px rgba(220, 226, 235, .35),
|
||
0 0 34px rgba(190, 200, 215, .18);
|
||
animation: sprach-dropdown-in .18s ease both, sprach-silber-puls 3.6s ease-in-out infinite;
|
||
}
|
||
@keyframes sprach-dropdown-in {
|
||
from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); }
|
||
to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
|
||
}
|
||
/* Silberner Polarlicht-Schein um den Dropdown-Rand — bewusst neutral
|
||
silber statt farbig, damit sich der schwarze Kasten von der bunten
|
||
Kugel/Schrift jeder Sprache klar abhebt statt zu verschwimmen. */
|
||
@keyframes sprach-silber-puls {
|
||
0%, 100% {
|
||
border-color: rgba(210, 216, 224, .5);
|
||
box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 14px rgba(220, 226, 235, .3), 0 0 30px rgba(190, 200, 215, .15);
|
||
}
|
||
50% {
|
||
border-color: rgba(235, 239, 244, .9);
|
||
box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(230, 235, 242, .55), 0 0 46px rgba(200, 210, 224, .3);
|
||
}
|
||
}
|
||
.sprach-schalter .nav-dropdown a {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .65rem;
|
||
padding: .6rem .7rem;
|
||
border-radius: 10px;
|
||
border-left: 3px solid transparent;
|
||
transition: background .2s ease, border-color .2s ease, transform .15s ease;
|
||
}
|
||
.sprach-schalter .nav-dropdown a:hover,
|
||
.sprach-schalter .nav-dropdown a.active {
|
||
background: rgba(255, 255, 255, .09);
|
||
border-left-color: var(--sprach-glut);
|
||
transform: translateX(2px);
|
||
}
|
||
/* Kleine "Mini-Planet"-Kugel statt eines Flaggen-Emojis — Windows stellt
|
||
Flaggen-Emojis grundsätzlich nicht als Bild dar (siehe SPRACHEN oben in
|
||
main.js). Ein außermittiges Glanzlicht + langsame Drehung lassen sie
|
||
wie eine echte, beleuchtete Kugel wirken statt einer flachen Fläche. */
|
||
/* Kugel-Grundfarbe: conic-gradient aus den 2-3 echten Landesfarben
|
||
dieser Sprache (--sprach-stopps, siehe SPRACHEN.farbstopps in
|
||
main.js) — wirkt wie eine kleine, marmoriert eingefärbte Kugel statt
|
||
nur einem Farbton, plus Eigendrehung, damit die Farbmischung sichtbar
|
||
"lebt". Glanzlicht kommt separat über ::before oben drauf. */
|
||
.sprach-kugel {
|
||
position: relative;
|
||
display: inline-block;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
vertical-align: -4px;
|
||
overflow: hidden;
|
||
background: conic-gradient(from 0deg, var(--sprach-stopps));
|
||
box-shadow:
|
||
inset -3px -3px 5px rgba(0, 0, 0, .5),
|
||
0 0 8px 2px color-mix(in srgb, var(--sprach-glut) 75%, transparent),
|
||
0 0 20px 4px color-mix(in srgb, var(--sprach-glut) 45%, transparent);
|
||
flex-shrink: 0;
|
||
animation: sprach-glut-puls 3.2s ease-in-out infinite, sprach-kugel-dreh 7s linear infinite;
|
||
}
|
||
.sprach-kugel::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .35) 16%, transparent 55%);
|
||
mix-blend-mode: overlay;
|
||
}
|
||
.sprach-schalter .nav-dropdown a .sprach-kugel { width: 16px; height: 16px; }
|
||
/* Die Sprachfarbe zieht sich auch über die Schrift — kräftiger,
|
||
leuchtender Text statt neutralem Weiß, plus ein sanft pulsierender
|
||
Schein (dieselbe "Polarlicht"-Idee wie beim Bewerben-Knopf/den
|
||
Foto-Rahmen, nur in der jeweiligen Sprachfarbe). */
|
||
.sprach-schalter > button,
|
||
.sprach-schalter .nav-dropdown a {
|
||
color: var(--sprach-glut, var(--text));
|
||
text-shadow:
|
||
0 0 6px color-mix(in srgb, var(--sprach-glut, transparent) 70%, transparent),
|
||
0 0 14px color-mix(in srgb, var(--sprach-glut, transparent) 45%, transparent);
|
||
}
|
||
.sprach-kurz { animation: sprach-glut-puls 3.2s ease-in-out infinite; display: inline-block; }
|
||
@keyframes sprach-glut-puls {
|
||
0%, 100% { filter: brightness(1) saturate(1); }
|
||
50% { filter: brightness(1.3) saturate(1.35); }
|
||
}
|
||
@keyframes sprach-kugel-dreh {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.sprach-kugel, .sprach-kurz, .sprach-schalter > button::before, .sprach-schalter > button::after, .sprach-schalter .nav-dropdown { animation: none; }
|
||
}
|
||
|
||
/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
|
||
deshalb bewusst FEST babyblau + rot, unabhängig vom Theme der gerade
|
||
offenen Seite. Statt einer einfachen 50/50-Teilung ein echtes
|
||
Polarlicht: mehrere weiche, wandernde Farbwolken (blau/lila/rot) plus
|
||
ein durchlaufender Lichtschimmer — soll wirken wie Licht und Nebel,
|
||
nicht wie zwei flache Farbflächen. */
|
||
.nav-cta {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
white-space: nowrap;
|
||
padding: .6rem 1.35rem;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: .95rem;
|
||
background: #0b0e14;
|
||
border: 1px solid rgba(255, 255, 255, .16);
|
||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
|
||
}
|
||
.nav-cta span {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
|
||
}
|
||
/* Ebene 1: die wandernden Polarlicht-Wolken selbst */
|
||
.nav-cta::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -60%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 18% 30%, rgba(143, 217, 234, .95), transparent 55%),
|
||
radial-gradient(circle at 45% 75%, rgba(139, 92, 246, .85), transparent 58%),
|
||
radial-gradient(circle at 82% 32%, rgba(217, 74, 92, .95), transparent 55%),
|
||
radial-gradient(circle at 62% 82%, rgba(232, 147, 58, .55), transparent 55%);
|
||
filter: blur(9px) saturate(1.35);
|
||
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
|
||
}
|
||
/* Ebene 2: ein feiner Lichtschimmer, der einmal quer durchläuft */
|
||
.nav-cta::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes nav-cta-aurora {
|
||
from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
|
||
to { transform: translate(3%, 3%) rotate(6deg) scale(1.08); }
|
||
}
|
||
@keyframes nav-cta-shimmer {
|
||
from { background-position: 130% 0; }
|
||
to { background-position: -30% 0; }
|
||
}
|
||
.nav-cta:hover {
|
||
transform: translateY(-1px);
|
||
border-color: rgba(255, 255, 255, .32);
|
||
box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
|
||
0 0 22px rgba(143, 217, 234, .3),
|
||
0 0 22px rgba(217, 74, 92, .28);
|
||
}
|
||
/* Abo-Button (Supporter-Abo) — gleicher Polarlicht-Mechanismus wie
|
||
.nav-cta, aber in Babyblau/Lila (VIP-Anmutung) statt der allgemeinen
|
||
Regenbogen-Aurora.
|
||
Bugfix 04.08.2026: war Gold/Lila (rgba(212,175,55,...)) — dieser Knopf
|
||
erscheint in der Navigationsleiste auf JEDER Seite (auch auf
|
||
verwaltung.html, siehe Screenshot-Beschwerde), wurde von der 4. Runde
|
||
"überall wo gelb ist, Babyblau benutzen" aber NICHT erfasst, weil er in
|
||
main.css/main.js liegt statt in verwaltung.html selbst. Jetzt
|
||
nachgezogen: Gold -> Babyblau (rgba(143,217,234,...), derselbe Farbwert
|
||
wie beim allgemeinen .nav-cta-Polarlicht oben), Lila unverändert. Der
|
||
separate, deutlich größere Gold-VIP-Look von abonnieren.html/
|
||
supporter.html/gate.html/links.html/rabattcodes.html ist davon NICHT
|
||
betroffen — das ist eine eigenständige, bislang nie angesprochene
|
||
Design-Entscheidung für den öffentlichen Supporter-Bereich. */
|
||
.nav-cta-abo::before {
|
||
background:
|
||
radial-gradient(circle at 20% 30%, rgba(143, 217, 234, .95), transparent 55%),
|
||
radial-gradient(circle at 78% 70%, rgba(139, 92, 246, .85), transparent 58%);
|
||
}
|
||
.nav-cta-abo:hover {
|
||
box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
|
||
0 0 22px rgba(143, 217, 234, .35),
|
||
0 0 22px rgba(139, 92, 246, .3);
|
||
}
|
||
/* "Bald"-Badge auf dem Abo-Knopf, solange die Registrierung auf
|
||
abonnieren.html gesperrt ist (20.08.2026, siehe .btn-gold-locked weiter
|
||
unten + main.js renderAboButton/soonBadge). Sitzt als zweites Kind IN
|
||
der Pille (nicht als eigenes Nav-Element), bleibt dadurch Teil desselben
|
||
Klicks — der Knopf führt bewusst weiterhin ganz normal zu abonnieren.html,
|
||
nur die Registrierung selbst dort ist gesperrt. Bewusst neutral-silbern
|
||
(Wiederverwendung von .btn-silver-text/-spark, nur kleiner skaliert)
|
||
statt Gold, damit es nicht mit der babyblau/lila-Aurora dieser Pille
|
||
konkurriert — reine Status-Markierung, kein zweiter Marken-Akzent. */
|
||
.nav-cta-soon {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .22rem;
|
||
margin-left: .5rem;
|
||
padding: .15rem .5rem;
|
||
border-radius: 999px;
|
||
font-size: .64rem;
|
||
font-weight: 800;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
background: rgba(255, 255, 255, .07);
|
||
border: 1px solid rgba(255, 255, 255, .3);
|
||
box-shadow: 0 0 10px rgba(230, 235, 242, .3);
|
||
flex-shrink: 0;
|
||
}
|
||
.nav-cta-soon .btn-silver-spark { font-size: .85em; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.nav-cta::before, .nav-cta::after { animation: none; }
|
||
}
|
||
|
||
/* TikTok-Button "Glitch/Duotone" — eigener, klar erkennbarer Stil (nicht
|
||
mehr nur eine eingefärbte Kopie von .nav-cta): schwarze Pille mit einem
|
||
fließenden Cyan/Pink-Rahmen (klassischer Zwei-Layer-Background-Trick,
|
||
NICHT ein rotierender Masken-Ring — der verzerrt sich auf einer
|
||
länglichen Pillenform zu einer krummen Schlaufe statt einer sauberen
|
||
Kontur), einem dezenten Innenschimmer (KEIN nach außen strahlender
|
||
Blur-Wolken-Glow mehr — der hat vorher Text/Bilder drumherum überstrahlt,
|
||
Feedback vom 03.08.2026: "geht über den Text und das Bild"), einer
|
||
rotierenden Notenkopf-Spielmarke und einem Text mit TikToks
|
||
charakteristischem Chromatic-Aberration-/Glitch-Versatz (die Cyan/Rot-
|
||
Schattenkopien, die auch im echten TikTok-Logo stecken), der alle paar
|
||
Sekunden kurz "springt". Alle Effekte bleiben INNERHALB der Pille bzw.
|
||
direkt an ihrer Kante — die Auffälligkeit kommt vom Button selbst, nicht
|
||
von seiner Ausstrahlung. Bewusst NUR für echte TikTok-Links — die
|
||
Markenfarben (Cyan #25F4EE + Pink/Rot #FE2C55) bleiben exakt gleich. */
|
||
.btn-tiktok {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
padding: .85rem 2.2rem;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
letter-spacing: .01em;
|
||
border: 2px solid transparent;
|
||
background:
|
||
linear-gradient(160deg, #12151b, #05070a 55%, #14171d) padding-box,
|
||
linear-gradient(90deg, #25F4EE, #FE2C55, #25F4EE) border-box;
|
||
background-size: 100% 100%, 260% 100%;
|
||
text-decoration: none;
|
||
transition: transform .25s ease, box-shadow .25s ease;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, .4),
|
||
inset 0 0 10px rgba(37, 244, 238, .12),
|
||
inset 0 0 10px rgba(254, 44, 85, .1);
|
||
animation: btn-tiktok-border-flow 5s linear infinite;
|
||
}
|
||
.btn-tiktok-note {
|
||
position: relative;
|
||
z-index: 3;
|
||
display: inline-block;
|
||
font-size: 1.05em;
|
||
filter: drop-shadow(0 0 3px rgba(37, 244, 238, .8));
|
||
animation: btn-tiktok-spin 3.6s linear infinite;
|
||
}
|
||
.btn-tiktok-text {
|
||
/* Ruhezustand ist bewusst KLAR LESBAR (nur normaler Schlagschatten) —
|
||
der Cyan/Rot-Chromatic-Versatz von TikToks Logo erscheint nur ganz
|
||
kurz als Flicker (siehe @keyframes btn-tiktok-glitch), nicht dauerhaft,
|
||
sonst verschwimmt der Text (Feedback vom 03.08.2026: "kriegt man
|
||
TikTok nichtmal richtig gelesen"). */
|
||
position: relative;
|
||
z-index: 3;
|
||
text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
|
||
animation: btn-tiktok-glitch 6s ease-in-out infinite;
|
||
}
|
||
.btn-tiktok::before {
|
||
/* Sehr dezentes Farbschimmern INNEN in der Pille — sorgt für Tiefe,
|
||
bleibt aber innerhalb der Ränder (kein overflow, kein Blur-Bleed). */
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
border-radius: inherit;
|
||
background:
|
||
radial-gradient(circle at 18% 20%, rgba(37, 244, 238, .3), transparent 60%),
|
||
radial-gradient(circle at 85% 80%, rgba(254, 44, 85, .28), transparent 62%);
|
||
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
|
||
pointer-events: none;
|
||
}
|
||
.btn-tiktok::after {
|
||
/* Diagonaler Lichtschimmer, wandert einmal quer über die Pille */
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: inherit;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.btn-tiktok:hover {
|
||
transform: translateY(-1px) scale(1.02);
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, .45),
|
||
inset 0 0 14px rgba(37, 244, 238, .2),
|
||
inset 0 0 14px rgba(254, 44, 85, .16);
|
||
}
|
||
@keyframes btn-tiktok-border-flow {
|
||
to { background-position: 0 0, -260% 0; }
|
||
}
|
||
@keyframes btn-tiktok-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes btn-tiktok-glitch {
|
||
/* 97% der Zeit klar lesbarer Text — der Chromatic-Versatz blitzt nur für
|
||
einen Wimpernschlag (~150ms von 6s) auf, statt dauerhaft zu "verwaschen". */
|
||
0%, 96%, 100% {
|
||
text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
|
||
transform: translateX(0);
|
||
}
|
||
97% {
|
||
text-shadow: -3px 0 rgba(37, 244, 238, .95), 3px 0 rgba(254, 44, 85, .95), 0 2px 6px rgba(0, 0, 0, .6);
|
||
transform: translateX(-1px);
|
||
}
|
||
97.5% {
|
||
text-shadow: 3px 0 rgba(37, 244, 238, .95), -3px 0 rgba(254, 44, 85, .95), 0 2px 6px rgba(0, 0, 0, .6);
|
||
transform: translateX(1px);
|
||
}
|
||
98% {
|
||
text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn-tiktok, .btn-tiktok::before, .btn-tiktok::after, .btn-tiktok-note, .btn-tiktok-text { animation: none; }
|
||
}
|
||
|
||
/* Silberner "Coming soon"-Button: eigener, deutlich edlerer Look als
|
||
.btn-tiktok — echtes Chrome-Metallic-Textglitzern, rotierender
|
||
Metallrand-Schimmer, zwei funkelnde Sparkle-Akzente und ein sanft
|
||
pulsierender Halo-Glow. Für Dinge, die noch nicht live sind
|
||
(z.B. VanVans zweiter Kanal), aber trotzdem besonders auffallen sollen. */
|
||
.btn-silver {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: visible;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .55rem;
|
||
padding: .95rem 2.4rem;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 1.1rem;
|
||
letter-spacing: .02em;
|
||
background: linear-gradient(160deg, #14161c, #0b0e14 55%, #1a1d24);
|
||
border: 1px solid rgba(255, 255, 255, .22);
|
||
text-decoration: none;
|
||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||
box-shadow: 0 6px 18px rgba(0, 0, 0, .4),
|
||
0 0 0 1px rgba(255, 255, 255, .03) inset;
|
||
animation: btn-silver-halo 3.2s ease-in-out infinite;
|
||
}
|
||
.btn-silver-text {
|
||
position: relative;
|
||
z-index: 2;
|
||
background: linear-gradient(100deg, #9aa4b2 0%, #ffffff 28%, #e6ebf2 42%, #c7ccd1 58%, #ffffff 76%, #9aa4b2 100%);
|
||
background-size: 260% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
||
animation: btn-silver-text-shine 3.6s linear infinite;
|
||
}
|
||
.btn-silver-spark {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: inline-block;
|
||
font-size: .9em;
|
||
filter: drop-shadow(0 0 4px rgba(255, 255, 255, .8));
|
||
animation: btn-silver-twinkle 1.8s ease-in-out infinite;
|
||
}
|
||
.btn-silver-spark:last-child { animation-delay: .9s; }
|
||
.btn-silver::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -1px;
|
||
z-index: 0;
|
||
border-radius: inherit;
|
||
padding: 1.5px;
|
||
background: conic-gradient(from 0deg, #eef1f5, #9aa4b2, #ffffff, #c7ccd1, #7d8794, #eef1f5);
|
||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
animation: btn-silver-shine-rotate 5s linear infinite;
|
||
}
|
||
.btn-silver::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: inherit;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .5) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.btn-silver:hover {
|
||
transform: translateY(-1px) scale(1.02);
|
||
border-color: rgba(255, 255, 255, .4);
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, .5),
|
||
0 0 26px rgba(230, 235, 242, .45),
|
||
0 0 26px rgba(190, 200, 215, .35);
|
||
}
|
||
@keyframes btn-silver-shine-rotate {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes btn-silver-text-shine {
|
||
0% { background-position: 0% 50%; }
|
||
100% { background-position: 260% 50%; }
|
||
}
|
||
@keyframes btn-silver-twinkle {
|
||
0%, 100% { opacity: .45; transform: scale(.85) rotate(0deg); }
|
||
50% { opacity: 1; transform: scale(1.15) rotate(15deg); }
|
||
}
|
||
@keyframes btn-silver-halo {
|
||
0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 14px rgba(200, 208, 220, .18); }
|
||
50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 26px rgba(230, 235, 242, .4); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn-silver, .btn-silver::before, .btn-silver::after, .btn-silver-text, .btn-silver-spark {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* "Legendärer" Button (z.B. Casperlino-Link auf streamer.html): babyblau
|
||
+ Silber, gleiche edle Machart wie .btn-silver (Chrome-Textglanz,
|
||
rotierender Rand, Sparkles, pulsierender Halo), aber größer, kräftiger
|
||
und in der Marken-Akzentfarbe --accent (Babyblau) statt neutralem Grau —
|
||
soll bewusst wie ein besonderes, "episches" Highlight wirken. */
|
||
.btn-legendary {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: visible;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
padding: 1.05rem 2.7rem;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 1.18rem;
|
||
letter-spacing: .02em;
|
||
background: linear-gradient(160deg, #101b20, #0b0e14 55%, #16232a);
|
||
border: 1px solid rgba(143, 217, 234, .35);
|
||
text-decoration: none;
|
||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||
box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
|
||
0 0 0 1px rgba(143, 217, 234, .06) inset;
|
||
animation: btn-legendary-halo 3s ease-in-out infinite;
|
||
}
|
||
.btn-legendary-text {
|
||
position: relative;
|
||
z-index: 2;
|
||
background: linear-gradient(100deg, #8fd9ea 0%, #ffffff 26%, #c7ccd1 42%, #8fd9ea 58%, #ffffff 76%, #c7ccd1 100%);
|
||
background-size: 260% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
||
animation: btn-legendary-text-shine 3.4s linear infinite;
|
||
}
|
||
.btn-legendary-spark {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: inline-block;
|
||
font-size: .95em;
|
||
filter: drop-shadow(0 0 5px rgba(143, 217, 234, .9));
|
||
animation: btn-legendary-twinkle 1.7s ease-in-out infinite;
|
||
}
|
||
.btn-legendary-spark:last-child { animation-delay: .85s; }
|
||
.btn-legendary::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -1.5px;
|
||
z-index: 0;
|
||
border-radius: inherit;
|
||
padding: 2px;
|
||
background: conic-gradient(from 0deg, #8fd9ea, #eef1f5, #c7ccd1, #ffffff, #8fd9ea, #7d8794, #8fd9ea);
|
||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
animation: btn-legendary-shine-rotate 4.5s linear infinite;
|
||
}
|
||
.btn-legendary::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: inherit;
|
||
background: linear-gradient(115deg, transparent 32%, rgba(143, 217, 234, .55) 49%, transparent 66%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.btn-legendary:hover {
|
||
transform: translateY(-2px) scale(1.03);
|
||
border-color: rgba(143, 217, 234, .55);
|
||
box-shadow: 0 14px 34px rgba(0, 0, 0, .5),
|
||
0 0 30px rgba(143, 217, 234, .5),
|
||
0 0 30px rgba(199, 204, 209, .35);
|
||
}
|
||
@keyframes btn-legendary-shine-rotate {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
@keyframes btn-legendary-text-shine {
|
||
0% { background-position: 0% 50%; }
|
||
100% { background-position: 260% 50%; }
|
||
}
|
||
@keyframes btn-legendary-twinkle {
|
||
0%, 100% { opacity: .5; transform: scale(.85) rotate(0deg); }
|
||
50% { opacity: 1; transform: scale(1.2) rotate(15deg); }
|
||
}
|
||
@keyframes btn-legendary-halo {
|
||
0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(143, 217, 234, .22); }
|
||
50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(143, 217, 234, .5); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn-legendary, .btn-legendary::before, .btn-legendary::after, .btn-legendary-text, .btn-legendary-spark {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* =====================================================================
|
||
"Gesperrter Tresor"-Knopf für den DogiCrew-Registrieren-Knopf
|
||
(abonnieren.html, 20.08.2026, Nutzer-Wunsch: "richtig krank übertrieben
|
||
geiles... weil es wird ja das geilste Bonus und überhaupt so von mir").
|
||
Bewusst KEINE Wiederverwendung von .btn-silver — der ist neutral-grau und
|
||
auf DIESER Seite bereits für die Teddy-Kollektion (Nebensache) vergeben.
|
||
Chrome-Text-Clip-Schimmer + Schimmer-Sweep + Halo-Puls wie .btn-silver/
|
||
.btn-legendary, aber in den ECHTEN Gold-Tönen dieser Seite
|
||
(#ffe9a8/#d4af37, siehe .abo-panel .btn) und mit einem pulsierenden
|
||
Schloss statt Sternen, damit die Haupt-CTA sichtbar "das Besondere,
|
||
noch verschlossene" bleibt statt nur "irgendwann verfügbar".
|
||
WICHTIG: Für den Rand bewusst NICHT die rotierende Conic-Gradient-Maske
|
||
von .btn-silver/.btn-legendary kopiert — dieser Knopf läuft über
|
||
`width:100%` auf voller Kartenbreite (~440px) bei nur ~62px Höhe, also
|
||
ein sehr langgestrecktes Rechteck. Genau für diesen Fall ist die
|
||
dokumentierte Lektion in Projektregeln.md Punkt 14 gedacht (03.08.2026,
|
||
"TikTok-Button-Bug"): ein rotierendes maskiertes Pseudo-Element verzieht
|
||
sich auf länglichen Formen zu einer krummen Schlaufe, weil ein Rechteck
|
||
beim Rotieren nicht rotationssymmetrisch ist — live mit Playwright-
|
||
Screenshots über mehrere Frames nachgewiesen (die Schlaufe ist der
|
||
rotierende Rand bei verschiedenen Winkeln). Stattdessen derselbe sichere
|
||
Zwei-Layer-Background-Trick wie bei .abo-google-frame weiter oben in
|
||
dieser Datei (Füllung padding-box + Verlauf border-box, Bewegung nur
|
||
über background-position) — bleibt geometrisch exakt an der Kontur,
|
||
unabhängig vom Seitenverhältnis. Reine Deko/Statusanzeige — echte
|
||
Deaktivierung läuft über das native disabled-Attribut am <button>
|
||
(siehe abonnieren.html), nicht über pointer-events, damit auch
|
||
Tastatur-/Screenreader-Nutzung korrekt "nicht bedienbar" meldet. Bewusst
|
||
KEIN :hover-Zustand (keine Lift-Animation wie bei .btn-silver/
|
||
.btn-legendary) — soll nicht so wirken, als wäre er doch klickbar. */
|
||
.btn-gold-locked {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: .65rem;
|
||
padding: 1rem 1.4rem;
|
||
border-radius: 14px;
|
||
font-weight: 800;
|
||
font-size: 1.04rem;
|
||
letter-spacing: .02em;
|
||
border: 1.5px solid transparent;
|
||
background:
|
||
linear-gradient(160deg, #1c1710, #0b0e14 55%, #211a0d) padding-box,
|
||
linear-gradient(120deg, #d4af37, #ffe9a8, #b8912b, #fff2c9, #d4af37) border-box;
|
||
background-size: 100% 100%, 260% 100%;
|
||
cursor: not-allowed;
|
||
animation: btn-gold-locked-border-shine 6s ease-in-out infinite, btn-gold-locked-halo 3s ease-in-out infinite;
|
||
box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 1px rgba(212, 175, 55, .08) inset;
|
||
}
|
||
.btn-gold-locked-lock {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: inline-block;
|
||
font-size: 1.05em;
|
||
filter: drop-shadow(0 0 6px rgba(255, 214, 102, .85));
|
||
animation: btn-gold-locked-pulse 2.2s ease-in-out infinite;
|
||
}
|
||
.btn-gold-locked-text {
|
||
position: relative;
|
||
z-index: 2;
|
||
background: linear-gradient(100deg, #ffe9a8 0%, #ffffff 24%, #d4af37 42%, #ffe9a8 60%, #ffffff 78%, #d4af37 100%);
|
||
background-size: 260% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
||
animation: btn-silver-text-shine 3.6s linear infinite; /* bestehendes Keyframe wiederverwendet */
|
||
}
|
||
.btn-gold-locked::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: inherit;
|
||
background: linear-gradient(115deg, transparent 32%, rgba(255, 233, 168, .5) 49%, transparent 66%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4s linear infinite; /* bestehendes Keyframe wiederverwendet */
|
||
pointer-events: none;
|
||
}
|
||
@keyframes btn-gold-locked-border-shine {
|
||
0%, 100% { background-position: 0 0, 0% 50%; }
|
||
50% { background-position: 0 0, 100% 50%; }
|
||
}
|
||
@keyframes btn-gold-locked-pulse {
|
||
0%, 100% { opacity: .7; transform: scale(.92) rotate(-4deg); }
|
||
50% { opacity: 1; transform: scale(1.12) rotate(4deg); }
|
||
}
|
||
@keyframes btn-gold-locked-halo {
|
||
0%, 100% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 16px rgba(212, 175, 55, .22); }
|
||
50% { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 32px rgba(255, 214, 102, .45); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn-gold-locked, .btn-gold-locked::after,
|
||
.btn-gold-locked-text, .btn-gold-locked-lock {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
/* =====================================================================
|
||
.btn-holo — zweiter "Mega"-Button-Stil, bewusst MECHANISCH anders als
|
||
.btn-legendary/.btn-silver/.btn-tiktok (die alle nach demselben Muster
|
||
funktionieren: dunkler Hintergrund + heller Rand/Text-Glanz). Hier ist
|
||
stattdessen die GESAMTE Pille eine wandernde Holo-Foil-Fläche, wie bei
|
||
einer schillernden Trading-Card — Marken-Farbverlauf (Babyblau → Lila
|
||
→ Pink → Gold → zurück), ein diagonaler Glare-Sweep wie echtes reflek-
|
||
tierendes Folienlicht, feines Foliekorn und dunkle geprägte Schrift
|
||
OBEN DRAUF statt heller Chrome-Schrift auf Dunkel. Auf Vorrat gebaut
|
||
(03.08.2026, auf Wunsch von Dogi) — noch nirgends im Einsatz, einfach
|
||
die Klassen wie unten im Beispiel verwenden:
|
||
|
||
<a class="btn-holo" href="...">
|
||
<span class="btn-holo-spark" aria-hidden="true">💎</span>
|
||
<span class="btn-holo-text">Label</span>
|
||
<span class="btn-holo-spark" aria-hidden="true">💎</span>
|
||
</a>
|
||
===================================================================== */
|
||
.btn-holo {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .6rem;
|
||
padding: .95rem 2.4rem;
|
||
border-radius: 999px;
|
||
font-weight: 900;
|
||
font-size: 1.12rem;
|
||
letter-spacing: .02em;
|
||
text-decoration: none;
|
||
border: 1.5px solid rgba(255, 255, 255, .7);
|
||
background: linear-gradient(120deg,
|
||
#8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%);
|
||
background-size: 340% 340%;
|
||
animation: btn-holo-shift 6s ease-in-out infinite, btn-holo-halo 2.6s ease-in-out infinite;
|
||
transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), box-shadow .25s ease, border-color .25s ease;
|
||
box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
|
||
0 0 0 3px rgba(11, 13, 16, .9),
|
||
0 0 0 4.5px rgba(255, 255, 255, .3);
|
||
}
|
||
.btn-holo-text {
|
||
position: relative;
|
||
z-index: 2;
|
||
color: #0b0d10;
|
||
text-transform: uppercase;
|
||
text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .22);
|
||
}
|
||
.btn-holo-spark {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: inline-block;
|
||
font-size: .9em;
|
||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
|
||
animation: btn-holo-twinkle 1.8s ease-in-out infinite;
|
||
}
|
||
.btn-holo-spark:last-child { animation-delay: .9s; }
|
||
/* Diagonaler Glare-Sweep, wie Licht, das über echte Folie wandert */
|
||
.btn-holo::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background: linear-gradient(100deg,
|
||
transparent 28%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 54%, transparent 74%);
|
||
background-size: 250% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: btn-holo-glare 2.8s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
/* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look
|
||
statt einer platten Farbverlaufsfläche. */
|
||
.btn-holo::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
|
||
background-size: 150px 150px;
|
||
mix-blend-mode: overlay;
|
||
opacity: .3;
|
||
pointer-events: none;
|
||
}
|
||
.btn-holo:hover {
|
||
transform: translateY(-3px) scale(1.06);
|
||
border-color: #fff;
|
||
animation-play-state: paused;
|
||
box-shadow: 0 18px 44px rgba(0, 0, 0, .5),
|
||
0 0 0 3px rgba(11, 13, 16, .9),
|
||
0 0 0 4.5px rgba(255, 255, 255, .5),
|
||
0 0 40px rgba(139, 92, 246, .6),
|
||
0 0 40px rgba(143, 217, 234, .5);
|
||
}
|
||
@keyframes btn-holo-shift {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
@keyframes btn-holo-halo {
|
||
0%, 100% {
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
|
||
0 0 0 3px rgba(11, 13, 16, .9),
|
||
0 0 0 4.5px rgba(255, 255, 255, .3),
|
||
0 0 18px rgba(139, 92, 246, .35),
|
||
0 0 18px rgba(143, 217, 234, .3);
|
||
}
|
||
50% {
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
|
||
0 0 0 3px rgba(11, 13, 16, .9),
|
||
0 0 0 4.5px rgba(255, 255, 255, .45),
|
||
0 0 34px rgba(139, 92, 246, .6),
|
||
0 0 34px rgba(255, 95, 168, .45);
|
||
}
|
||
}
|
||
@keyframes btn-holo-glare {
|
||
0% { background-position: -70% 0; }
|
||
100% { background-position: 170% 0; }
|
||
}
|
||
@keyframes btn-holo-twinkle {
|
||
0%, 100% { opacity: .6; transform: scale(.85) rotate(0deg); }
|
||
50% { opacity: 1; transform: scale(1.35) rotate(-14deg); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; }
|
||
}
|
||
|
||
/* Kompakter Polarlicht-Button für Karten (z.B. Marinas Team-Modi-Karte →
|
||
direkter Link zur Manager-Seite): exakt derselbe Mechanismus wie
|
||
.btn-tiktok, nur kleiner und in den Spicy-Media-Markenfarben
|
||
(Rot #d94a5c + Orange #e8935a) statt Cyan/Pink. */
|
||
.btn-spicy-mini {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: .3rem;
|
||
margin-top: .6rem;
|
||
padding: .5rem 1rem;
|
||
border-radius: 999px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
font-size: .8rem;
|
||
background: #0b0e14;
|
||
border: 1px solid rgba(255, 255, 255, .16);
|
||
text-decoration: none;
|
||
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||
box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
|
||
}
|
||
.btn-spicy-mini span {
|
||
position: relative;
|
||
z-index: 2;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .35);
|
||
}
|
||
.btn-spicy-mini::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -60%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 22% 30%, rgba(217, 74, 92, .95), transparent 55%),
|
||
radial-gradient(circle at 78% 68%, rgba(232, 147, 90, .95), transparent 58%);
|
||
filter: blur(8px) saturate(1.35);
|
||
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
|
||
}
|
||
.btn-spicy-mini::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.btn-spicy-mini:hover {
|
||
transform: translateY(-1px);
|
||
border-color: rgba(255, 255, 255, .32);
|
||
box-shadow: 0 8px 20px rgba(0, 0, 0, .4),
|
||
0 0 16px rgba(217, 74, 92, .35),
|
||
0 0 16px rgba(232, 147, 90, .35);
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn-spicy-mini::before, .btn-spicy-mini::after { animation: none; }
|
||
}
|
||
|
||
/* Plattform-Karten mit echten Markenfarben (z.B. links.html-Übersicht):
|
||
gleicher Polarlicht-Mechanismus wie .btn-tiktok, aber generisch über
|
||
--brand-1/--brand-2 (+ optional --brand-3) einstellbar, damit jede
|
||
Plattform ihre EIGENEN echten Farben bekommt, ohne den ganzen Block
|
||
pro Plattform zu duplizieren. Die konkreten Farben stehen weiter unten
|
||
in den .card-<plattform>-Klassen. */
|
||
.card-brand {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
background: #0b0e14;
|
||
border-color: rgba(255, 255, 255, .16);
|
||
padding: 2rem 1.8rem;
|
||
}
|
||
.card-brand .icon-badge, .card-brand h3, .card-brand p {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.card-brand h3, .card-brand p {
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
|
||
}
|
||
.card-brand .icon-badge {
|
||
display: block;
|
||
font-size: 2.4rem;
|
||
line-height: 1;
|
||
margin-bottom: .6rem;
|
||
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
|
||
}
|
||
.card-brand h3 { font-size: 1.5rem; }
|
||
.card-brand p { font-size: 1.05rem; margin-top: .3rem; }
|
||
.card-brand::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -60%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 22% 28%, var(--brand-1, rgba(143, 217, 234, .85)), transparent 55%),
|
||
radial-gradient(circle at 78% 70%, var(--brand-2, rgba(139, 92, 246, .85)), transparent 58%),
|
||
radial-gradient(circle at 50% 92%, var(--brand-3, transparent), transparent 55%);
|
||
filter: blur(11px) saturate(1.35);
|
||
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
|
||
}
|
||
.card-brand::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.card-brand:hover {
|
||
border-color: rgba(255, 255, 255, .32);
|
||
box-shadow: 0 10px 26px rgba(0, 0, 0, .45),
|
||
0 0 22px var(--brand-1, rgba(143, 217, 234, .3)),
|
||
0 0 22px var(--brand-2, rgba(139, 92, 246, .28));
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.card-brand::before, .card-brand::after { animation: none; }
|
||
}
|
||
|
||
/* Bewusst NUR echte Plattform-/CTA-Farben, keine erfundenen: */
|
||
.card-tiktok { --brand-1: rgba(37, 244, 238, .95); --brand-2: rgba(254, 44, 85, .95); }
|
||
.card-instagram { --brand-1: rgba(131, 58, 180, .9); --brand-2: rgba(253, 29, 29, .82); --brand-3: rgba(252, 176, 69, .55); }
|
||
.card-snapchat { --brand-1: rgba(255, 252, 0, .85); --brand-2: rgba(255, 220, 0, .45); }
|
||
.card-snapchat h3, .card-snapchat p { text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 16px rgba(0, 0, 0, .55); }
|
||
.card-discord { --brand-1: rgba(88, 101, 242, .95); --brand-2: rgba(88, 101, 242, .4); }
|
||
.card-shop { --brand-1: rgba(212, 175, 55, .85); --brand-2: rgba(255, 183, 77, .6); }
|
||
.card-bewerben { --brand-1: rgba(143, 217, 234, .85); --brand-2: rgba(139, 92, 246, .8); --brand-3: rgba(217, 74, 92, .5); }
|
||
|
||
/* "Feature"-Karten (links.html): zwei besondere, GRÖSSERE Kacheln über der
|
||
normalen Plattform-Icon-Reihe — Abo-System (VIP: Gold/Lila) und
|
||
Rabattcodes (Community-Ersparnis: Grün/Orange). Bauen auf .card-brand
|
||
auf (gleicher Aurora-/Schimmer-Mechanismus), bekommen zusätzlich einen
|
||
rotierenden Farbring (wie .card-duel) und ein Eckband mit Status-Text,
|
||
damit sie sich klar von den kompakten Plattform-Kacheln absetzen. */
|
||
.card-feature {
|
||
padding: 2.6rem 2rem;
|
||
min-height: 230px;
|
||
}
|
||
.card-feature::before { inset: -70%; }
|
||
.card-feature .icon-badge { font-size: 3.1rem; margin-bottom: .8rem; }
|
||
.card-feature h3 { font-size: 1.75rem; }
|
||
.card-feature-desc {
|
||
position: relative;
|
||
z-index: 2;
|
||
font-size: .96rem;
|
||
line-height: 1.55;
|
||
color: rgba(255, 255, 255, .8);
|
||
margin: .5rem auto 0;
|
||
max-width: 32ch;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .3);
|
||
}
|
||
/* Echtes <span> statt eines dritten Pseudo-Elements (::before/::after sind
|
||
an .card-brand schon für Aurora/Schimmer vergeben) — bewusst NICHT
|
||
rotiert (siehe .btn-tiktok-Notiz weiter oben: ein rotierender Masken-Ring
|
||
verzerrt sich auf länglichen/runden Formen), sondern ein ruhiger,
|
||
statischer Farbverlaufs-Rand. */
|
||
.card-feature-ring {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
border-radius: inherit;
|
||
padding: 1.5px;
|
||
background: conic-gradient(from 0deg, var(--brand-1), var(--brand-2), var(--brand-1) 66%, var(--brand-2) 100%);
|
||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
opacity: .8;
|
||
pointer-events: none;
|
||
}
|
||
.card-feature-badge {
|
||
position: absolute;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
z-index: 4;
|
||
font-size: .66rem;
|
||
font-weight: 800;
|
||
letter-spacing: .05em;
|
||
text-transform: uppercase;
|
||
padding: .38rem .75rem;
|
||
border-radius: 999px;
|
||
background: rgba(8, 10, 14, .55);
|
||
border: 1px solid rgba(255, 255, 255, .28);
|
||
backdrop-filter: blur(4px);
|
||
color: #fff;
|
||
}
|
||
.card-feature:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.card-feature { transition: none; }
|
||
}
|
||
.card-abo { --brand-1: rgba(212, 175, 55, .9); --brand-2: rgba(139, 92, 246, .75); }
|
||
.card-abo .card-feature-badge { color: #ffe9a8; border-color: rgba(255, 214, 102, .5); }
|
||
.card-rabatt { --brand-1: rgba(52, 211, 153, .9); --brand-2: rgba(251, 146, 60, .8); }
|
||
.card-rabatt .card-feature-badge { color: #baf7d6; border-color: rgba(94, 234, 167, .5); }
|
||
|
||
/* Breite Variante von .card-feature — nimmt die volle Container-Breite ein
|
||
(statt im 2er-Grid neben einer zweiten Karte zu stehen) und wechselt
|
||
dafür auf ein horizontales Layout: Icon links, Titel/Text rechts daneben
|
||
statt zentriert übereinander, damit die Breite bewusst genutzt wird statt
|
||
nur Leerraum links/rechts vom zentrierten Text zu erzeugen. */
|
||
.card-feature-wide {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.8rem;
|
||
text-align: left;
|
||
padding: 2.2rem 2.8rem;
|
||
min-height: auto;
|
||
}
|
||
.card-feature-wide .icon-badge {
|
||
flex-shrink: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
.card-feature-wide .card-feature-text {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.card-feature-wide .card-feature-desc {
|
||
margin: .4rem 0 0;
|
||
max-width: 60ch;
|
||
}
|
||
@media (max-width: 640px) {
|
||
.card-feature-wide {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
padding: 2.4rem 1.6rem;
|
||
}
|
||
.card-feature-wide .card-feature-desc { margin: .4rem auto 0; }
|
||
}
|
||
|
||
.nav-toggle {
|
||
display: none;
|
||
/* Leichte blaue Tönung (21.08.2026, Nutzer-Wunsch: "die kiste soll auch
|
||
leicht eine andere farbe haben so dass sie auffällt. eine leicht blau
|
||
tönung.") -- bewusst sehr dezent (8% Deckkraft), damit es zur übrigen
|
||
augenschonenden Optik der Seite passt und nicht wie ein grelles Warn-
|
||
Element wirkt, aber deutlich genug, um die Kiste vom sonst rein
|
||
schwarzen Kopfbereich abzuheben. */
|
||
background: rgba(143, 217, 234, .1);
|
||
border: 1px solid rgba(143, 217, 234, .35);
|
||
border-radius: 8px;
|
||
color: var(--text);
|
||
padding: .5rem .7rem;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
gap: .4rem;
|
||
}
|
||
.nav-toggle:hover, .nav-toggle:focus-visible {
|
||
background: rgba(143, 217, 234, .18);
|
||
border-color: rgba(143, 217, 234, .55);
|
||
}
|
||
/* Sichtbares "Menü" NEBEN den drei Strichen (21.08.2026, Nutzer-Report per
|
||
Bild: "da soll auch menü stehen und die 3 striche"). */
|
||
.nav-toggle-label { font-size: .82rem; font-weight: 600; letter-spacing: .02em; }
|
||
|
||
/* Bugfix 20.08.2026 (Nutzer-Report per Screenshot: "DogiCrew"-Knopf/Badge
|
||
rechts abgeschnitten): die Schwelle war schon zweimal angehoben (880 ->
|
||
1480px, dazu der .nav-bar-Deckel 1400 -> 1440px), reichte aber seither
|
||
NICHT mehr aus — seit den neu dazugekommenen Nav-Punkten "DogiCrew" +
|
||
"BALD"-Badge braucht die aufgeklappte Desktop-Nav real ca. 1491px
|
||
Breite (per Playwright über mehrere Breiten nachgemessen), der Deckel
|
||
blieb aber bei 1440px hart begrenzt. Ergebnis: bei JEDER Fensterbreite
|
||
ab ca. 1500px (nicht nur in einer schmalen Übergangszone) lief die Nav
|
||
permanent ca. 50px über den Rand hinaus. Diesmal mit echtem Sicherheits-
|
||
abstand behoben statt wieder nur knapp: Schwelle auf 1650px, Deckel auf
|
||
1560px — bei exakt 1650px ergibt min(1560px, 94vw) ≈ 1551px, spürbar
|
||
mehr als die gemessenen ~1491px nötigen Breite. Bei jeder Fensterbreite
|
||
NACH der Schwelle reicht 94vw automatisch weiter aus (nur ganz nah an
|
||
der Schwelle war die Lücke kritisch). */
|
||
@media (max-width: 1650px) {
|
||
/* margin-left:auto (21.08.2026): schiebt den Menü-Knopf IMMER an die
|
||
rechte Kante, egal wie breit die Marke daneben ist. Ohne das stand er
|
||
direkt hinter der Marke und wurde auf schmalen Bildschirmen rechts aus
|
||
dem Bild geschoben (siehe Bugfix-Block bei @media max-width:620px). */
|
||
.nav-toggle { display: flex; margin-left: auto; }
|
||
.nav-links {
|
||
position: fixed;
|
||
inset: 62px 0 0 0;
|
||
background: var(--bg);
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
padding: 1.2rem 6vw;
|
||
gap: .3rem;
|
||
/* Bugfix 21.08.2026 (beim Testen des "Menü"-Knopf-Umbaus entdeckt, per
|
||
Playwright reproduziert): -110% verschiebt das Panel um 110% SEINER
|
||
EIGENEN Höhe -- das reicht nur dann sicher aus, wenn das Panel
|
||
mindestens 10x so hoch ist wie der "inset:62px"-Versatz oben
|
||
(Rechnung: Panel-Unterkante landet bei 62px - 10%-der-Panelhöhe).
|
||
Ist das Menü kürzer (z.B. weniger Punkte, oder der Kopfbereich wurde
|
||
etwas höher wie gerade eben durch den neuen "Menü"-Text), ragte die
|
||
UNTERKANTE des eigentlich geschlossenen Panels ein paar Pixel ins
|
||
Bild -- sichtbar wurde ausgerechnet der Sprachschalter (das farbige
|
||
"DE"-Pillenelement steht ganz unten in der Liste). Robuster Ersatz:
|
||
zusätzlich zu -100% (= exakt die eigene Höhe) ein FESTER Puffer, der
|
||
unabhängig von Panel- und Kopfbereichshöhe immer ausreicht. */
|
||
transform: translateY(calc(-100% - 200px));
|
||
transition: transform .25s ease;
|
||
overflow-y: auto;
|
||
/* Bugfix 21.08.2026 (Handy im QUERFORMAT): das zugeklappte Panel wird um
|
||
-110% SEINER EIGENEN HÖHE verschoben. Auf einem niedrigen Bildschirm
|
||
(quer, z.B. 568x320) ist das Panel nur 258px hoch, -110% sind also nur
|
||
-284px -- die Unterkante landet bei y=36px und lag damit GENAU über dem
|
||
Menü-Knopf (y=11..55). Unsichtbar, aber es hat jede Berührung
|
||
abgefangen: das Menü ließ sich im Querformat überhaupt nicht öffnen.
|
||
pointer-events:none im geschlossenen Zustand löst das unabhängig von
|
||
Bildschirmhöhe und Panelgröße -- was zu ist, kann nichts mehr
|
||
blockieren. */
|
||
pointer-events: none;
|
||
}
|
||
.nav-links.open { pointer-events: auto; }
|
||
.nav-links.open { transform: translateY(0); }
|
||
/* Bugfix 21.08.2026: .nav-links ist ein Flex-Container mit FESTER Höhe
|
||
(inset: 62px 0 0 0). Passen die Einträge zusammen nicht hinein, schrumpft
|
||
Flexbox sie standardmäßig (flex-shrink: 1) -- auf einem kurzen Bildschirm
|
||
(iPhone SE, 568px) wurden aus 59px hohen Menüzeilen dadurch 29px, und aus
|
||
den Knöpfen "DogiCrew"/"Bewerben" sogar nur 21px. Damit lagen sie unter
|
||
jeder vernünftigen Tippgröße (Empfehlung Apple/Google: ~44px).
|
||
flex-shrink:0 lässt sie ihre volle Höhe behalten -- der Bereich hat
|
||
bereits overflow-y:auto, scrollt also stattdessen. */
|
||
.nav-links > * { flex-shrink: 0; }
|
||
/* Trennlinien statt "Schüsseln" (Bugfix 21.08.2026): .nav-group > button
|
||
und .nav-flat tragen vom Desktop border-radius:999px (Pillen-Look). Mit
|
||
border-bottom zusammen bog sich die Linie an den Enden nach oben und sah
|
||
im aufgeklappten Handy-Menü aus wie eine Schale unter jedem Eintrag.
|
||
|
||
Lösung: border-bottom raus, Trennlinie stattdessen als ::after -- ein
|
||
absolut positionierter 1px-Streifen ist immer schnurgerade, egal welchen
|
||
Radius das Element hat. Dadurch bleibt gleichzeitig ein sanfter Radius
|
||
für die Farbfüllung des aktiven/offenen Eintrags möglich (ein harter
|
||
rechteckiger Block sah neben den runden Formen der Seite fremd aus).
|
||
::after ist bei beiden frei -- der ▾-Pfeil steht im Textinhalt, der
|
||
Farbschein nutzt ::before. */
|
||
.nav-group > button,
|
||
.nav-flat {
|
||
border-radius: 10px;
|
||
border-bottom: none;
|
||
}
|
||
.nav-group > button { width: 100%; justify-content: space-between; padding: .9rem .7rem; }
|
||
.nav-flat { display: block; padding: .9rem .7rem; }
|
||
.nav-group > button::after,
|
||
.nav-flat::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0; right: 0; bottom: 0;
|
||
height: 1px;
|
||
background: var(--border);
|
||
pointer-events: none;
|
||
}
|
||
.nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; }
|
||
.nav-dropdown::before { display: none; }
|
||
.nav-group.open .nav-dropdown { display: flex; }
|
||
/* Bugfix 22.08.2026 (Nutzer-Report per Foto: "wenn ich auf DE klicke geht
|
||
das Fenster halb schräg auf, man sieht nichts"). Ursache: die Zeile
|
||
darüber (.nav-dropdown, Spezifität 0-1-0) hebt für das Handy-Menü
|
||
position/transform/animation auf — sie verliert aber gegen die
|
||
Desktop-Regel .sprach-schalter .nav-dropdown (0-2-0, Zeile ~427), denn
|
||
eine @media-Abfrage erhöht die Spezifität NICHT. Beim Sprachschalter
|
||
blieb dadurch die Aufklapp-Animation "sprach-dropdown-in" aktiv, und
|
||
die setzt (fill-mode: both) dauerhaft transform: translateX(-50%) —
|
||
die im Handy-Menü volle-Breite-Box wurde also um ihre halbe Breite
|
||
nach links aus dem Bild geschoben. Deshalb hier dieselben Regeln noch
|
||
einmal mit passender Spezifität (Blattname mitgenannt, damit sie in
|
||
jedem Fall gewinnt). */
|
||
.nav-links .sprach-schalter .nav-dropdown {
|
||
position: static;
|
||
transform: none;
|
||
animation: none;
|
||
width: 100%;
|
||
min-width: 0;
|
||
margin-top: 0;
|
||
box-shadow: none;
|
||
}
|
||
.nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
|
||
|
||
/* Bugfix 20.08.2026 (Nutzer-Report: "auf dem Handy passt nicht immer alles").
|
||
Per echter Mobil-Emulation (iPhone 15 Pro + Pixel 8, Screenshots) nachgestellt:
|
||
Die schwebenden Eck-Knöpfe (Musik unten rechts, Vorschau-Umschalter unten links
|
||
für Dogi/VanVan — siehe .music-widget/.vorschau-widget weiter unten) sind
|
||
absichtlich IMMER sichtbar (position:fixed, direkte <body>-Kinder, eigener
|
||
Stacking-Kontext, unabhängig vom Menü). Bei aufgeklapptem Mobil-Menü liegen sie
|
||
dadurch ÜBER den untersten Menüpunkten (Sprachschalter + "Bewerben"-Knopf) und
|
||
verdecken/blockieren sie sichtbar. :has() statt einer weiteren main.js-Änderung,
|
||
weil beide Widgets keinen gemeinsamen Elternknoten mit .nav-links haben (beide
|
||
hängen direkt unter <body>, .nav-links steckt im Header) — reiner CSS-Fix bleibt
|
||
an der Stelle, an der auch die restliche Menü-Overlay-Logik dieses Blocks steht. */
|
||
body:has(.nav-links.open) .music-widget,
|
||
body:has(.nav-links.open) .vorschau-widget {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* =====================================================================
|
||
HANDY-KOPFLEISTE — Bugfix 21.08.2026 (Nutzer-Report per Screenshot:
|
||
"auf dem handy kann ich oben nicht aussehen in welche seite ich will
|
||
welche kategorie welche sprache garnichts").
|
||
|
||
Ursache (per Playwright bei 390px nachgemessen): .brand ist 352px breit
|
||
und steht auf `flex-shrink: 0` (Regel ganz oben) -- durfte also nicht
|
||
schrumpfen. Zusammen mit gap (2rem) und dem Menü-Knopf (39px) brauchte
|
||
die Leiste 423px, verfügbar waren aber nur 367px. Der Menü-Knopf landete
|
||
dadurch bei x=396px, also KOMPLETT außerhalb des 390px breiten Bildes.
|
||
Auf dem Handy war damit die gesamte Navigation unerreichbar: keine
|
||
Seiten, keine Kategorien, kein Sprachwechsel.
|
||
|
||
Fix in drei Teilen:
|
||
1. Menü-Knopf per margin-left:auto immer an die rechte Kante (oben im
|
||
1650px-Block) -- unabhängig von der Breite der Marke.
|
||
2. Die Marke darf hier ausnahmsweise schrumpfen. min-width:0 ist dabei
|
||
zwingend: ohne das schrumpft ein Flex-Element trotz flex-shrink NICHT
|
||
unter seine Inhaltsbreite (Standard ist min-width:auto).
|
||
3. Schriftgrößen etwas herunter + langer Text bricht sauber ab, statt
|
||
die Leiste zu sprengen.
|
||
===================================================================== */
|
||
@media (max-width: 620px) {
|
||
.nav-bar {
|
||
gap: .75rem;
|
||
padding: .7rem 0;
|
||
}
|
||
.brand {
|
||
flex-shrink: 1; /* hebt das globale flex-shrink:0 hier gezielt auf */
|
||
min-width: 0; /* ohne das greift flex-shrink nicht (min-width:auto) */
|
||
gap: .5rem;
|
||
font-size: 1.05rem;
|
||
line-height: 1.15;
|
||
}
|
||
/* Der Textblock neben dem Logo -- darf schmaler werden, Zeilen dürfen
|
||
umbrechen statt die Leiste breiter zu machen. */
|
||
.brand > span {
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.brand-logo { width: 34px; height: 34px; }
|
||
.brand small {
|
||
/* .56rem waren nur 8,96px -- deutlich unter dem, was auf einem Handy
|
||
noch angenehm lesbar ist (Faustregel: nicht unter 11-12px). Da der
|
||
Menü-Knopf inzwischen per margin-left:auto eigenständig rechts sitzt
|
||
und die Marke schrumpfen darf, ist der Platz dafür vorhanden. */
|
||
font-size: .69rem;
|
||
letter-spacing: .05em;
|
||
}
|
||
/* Menü-Knopf: etwas größere Tippfläche als die reine Schriftgröße
|
||
hergibt (Finger statt Mauszeiger), aber schmales Padding, damit er
|
||
auf sehr engen Geräten nicht selbst zum Platzproblem wird. */
|
||
.nav-toggle {
|
||
flex-shrink: 0;
|
||
font-size: 1.25rem;
|
||
line-height: 1;
|
||
padding: .45rem .6rem;
|
||
min-width: 44px;
|
||
min-height: 44px;
|
||
}
|
||
}
|
||
|
||
/* Sehr schmale Geräte (z.B. iPhone SE, 320-360px): dort ist selbst die
|
||
verkleinerte Unterzeile ("STREAMER · COMMUNITY · HASIDOG · MANAGER")
|
||
noch zu lang und drückt die Leiste unnötig in die Höhe. Sie ist reine
|
||
Deko -- der Markenname darüber sagt bereits alles -- deshalb hier weg,
|
||
damit Name und Menü-Knopf sicher nebeneinander passen. */
|
||
@media (max-width: 400px) {
|
||
.brand small { display: none; }
|
||
.brand { font-size: 1rem; }
|
||
}
|
||
|
||
/* ---------- Buttons ----------
|
||
Gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste (wandernde,
|
||
weichgezeichnete Farbwolken + durchlaufender Lichtschimmer) — aber NICHT
|
||
dieselbe feste Regenbogen-Palette, sondern die Farben der jeweiligen
|
||
Seite/Karte (--accent/--accent-2, die überall schon pro Theme bzw. pro
|
||
Karte gesetzt sind). Läuft komplett über negative z-index-Ebenen, dadurch
|
||
bleibt der Button-Text automatisch scharf obenauf, ganz ohne <span>-
|
||
Wrapper in jeder einzelnen HTML-Datei (siehe Stacking-Reihenfolge: eigene
|
||
Box-Hintergrund → negative z-index-Kinder → normaler Inline-Text). */
|
||
.btn {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .5rem;
|
||
padding: .8rem 1.5rem;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
font-size: .95rem;
|
||
border: 1px solid transparent;
|
||
cursor: pointer;
|
||
transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease;
|
||
}
|
||
.btn::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -70%;
|
||
z-index: -2;
|
||
background:
|
||
radial-gradient(circle at 24% 28%, color-mix(in srgb, var(--accent) 92%, transparent), transparent 58%),
|
||
radial-gradient(circle at 76% 74%, color-mix(in srgb, var(--accent-2) 92%, transparent), transparent 58%);
|
||
filter: blur(9px) saturate(1.3);
|
||
opacity: .55;
|
||
animation: btn-aurora 11s ease-in-out infinite alternate;
|
||
}
|
||
.btn::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .32) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: btn-shimmer 5.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes btn-aurora {
|
||
from { transform: translate(-3%, -2%) rotate(0deg) scale(1); }
|
||
to { transform: translate(3%, 3%) rotate(6deg) scale(1.08); }
|
||
}
|
||
@keyframes btn-shimmer {
|
||
from { background-position: 130% 0; }
|
||
to { background-position: -30% 0; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.btn::before, .btn::after { animation: none; }
|
||
}
|
||
.btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 22px rgba(0, 0, 0, .28),
|
||
0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
|
||
}
|
||
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
|
||
.btn-secondary { background: var(--accent-2); color: #fff; }
|
||
.btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
|
||
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
|
||
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
|
||
|
||
/* Kurzes "✓ Link kopiert"-Feedback für dogiTeilen()-Knöpfe (Zwischenablage-
|
||
Fallback ohne Web-Share-API) -- 21.08.2026. Gleiche Erfolgsfarbe wie
|
||
.vw-copy-btn.kopiert in der Verwaltung, für ein konsistentes Gefühl
|
||
zwischen öffentlicher Seite und Admin-Bereich. */
|
||
.dogi-teilen-kopiert { background: rgba(52,211,153,.15) !important; border-color: rgba(52,211,153,.5) !important; color: #5eeaa7 !important; }
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero {
|
||
position: relative;
|
||
padding: clamp(4rem, 10vw, 7rem) 0;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
}
|
||
.hero > .container { position: relative; z-index: 1; }
|
||
/* Zusätzlicher, garantiert deckender Schleier NUR hinter dem Hero-Text auf
|
||
Seiten mit Hintergrundfoto (.page-bg) — Ergänzung zum globalen
|
||
body.mit-hintergrund-Verlauf oben. Grund (BFSG/WCAG-Audit 04.08.2026):
|
||
der globale Verlauf allein reichte bei hellen Fotomotiven nicht überall
|
||
für AA-Kontrast (Eyebrow/H1/Lead direkt im Hero betroffen). Sitzt NUR
|
||
um den Text-Container, deckt also NICHT das scharfe .hero-banner-Foto
|
||
darüber ab (das bleibt unverändert sichtbar). */
|
||
.hero.page-bg > .container::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -1.4rem -1.6rem;
|
||
z-index: -1;
|
||
border-radius: 28px;
|
||
background: color-mix(in srgb, var(--bg) 55%, transparent);
|
||
pointer-events: none;
|
||
}
|
||
.hero .worlds {
|
||
margin: .6rem 0 1.2rem;
|
||
color: var(--text-muted);
|
||
font-size: 1.05rem;
|
||
}
|
||
.hero-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 1.2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } }
|
||
|
||
/* "Event des Jahres" (20.08.2026) — volle Breite wie .hero-grid darüber (eigener Block,
|
||
kein Grid-Kind), zeigt bewusst IMMER genau zwei Events nebeneinander. Gleiche
|
||
Karten-/Tag-Optik wie die 3 Welt-Kacheln, damit es wie ein natürlicher Abschluss des
|
||
Grids wirkt statt wie ein fremdes Element. */
|
||
.jahres-events {
|
||
margin-top: 1.2rem;
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 1.6rem;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.jahres-events-head { margin-bottom: 1.2rem; }
|
||
.jahres-events-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.2rem;
|
||
}
|
||
@media (max-width: 760px) { .jahres-events-grid { grid-template-columns: 1fr; } }
|
||
/* Nutzer-Wunsch 20.08.2026: "die kacheln sollen auch bissl spezieller sein" —
|
||
goldener Trophäen-Akzent statt der neutralen Standard-Kartenoptik (eigener,
|
||
gedeckter Farbton, kein grelles Gold — augenschonend), plus ein dezenter
|
||
wandernder Lichtschimmer oben (".jahres-event-shine"), der die Kachel als
|
||
etwas Besonderes markiert statt als normale Karte. Jetzt ein <button>
|
||
(öffnet ein Detail-Fenster) statt eines <a> (navigierte sofort weg) —
|
||
deshalb hier zusätzlich ein vollständiger Button-Reset. */
|
||
/* [hidden] explizit VOR der Klassenregel + als eigene Regel danach: ein
|
||
simples "display:block" in .jahres-event-card hat dieselbe Spezifität
|
||
wie die eingebaute [hidden]-UA-Regel des Browsers und würde sie sonst im
|
||
Zweifel überschreiben (identischer Bug wie schon bei .jahres-event-bild
|
||
weiter unten, hier per Playwright-Screenshot erneut gefunden — eine
|
||
"leere" Kachel blieb trotz hidden-Attribut sichtbar). */
|
||
.jahres-event-card[hidden] { display: none; }
|
||
.jahres-event-card {
|
||
display: block;
|
||
width: 100%;
|
||
text-align: left;
|
||
font: inherit;
|
||
color: inherit;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
padding: 1.2rem 1.4rem;
|
||
border-radius: calc(var(--radius) - 4px);
|
||
border: 1px solid rgba(212, 175, 55, .35);
|
||
background:
|
||
radial-gradient(circle at 15% 0%, rgba(212, 175, 55, .08), transparent 55%),
|
||
rgba(255, 255, 255, .02);
|
||
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
|
||
}
|
||
.jahres-event-card:hover, .jahres-event-card:focus-visible {
|
||
border-color: rgba(212, 175, 55, .7);
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 22px rgba(212, 175, 55, .18);
|
||
}
|
||
.jahres-event-shine {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 6%; right: 6%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(255, 214, 102, .9), transparent);
|
||
animation: jahres-event-goldglanz 4.5s ease-in-out infinite;
|
||
pointer-events: none;
|
||
}
|
||
@keyframes jahres-event-goldglanz { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
|
||
@media (prefers-reduced-motion: reduce) { .jahres-event-shine { animation: none; opacity: .6; } }
|
||
.jahres-event-datum {
|
||
display: block;
|
||
color: #e8c465;
|
||
font-weight: 700;
|
||
font-size: .82rem;
|
||
letter-spacing: .02em;
|
||
margin-bottom: .3rem;
|
||
}
|
||
.jahres-event-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
|
||
.jahres-event-card p { margin: 0 0 .6rem; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
|
||
.jahres-event-mehr { color: #e8c465; font-weight: 600; font-size: .88rem; }
|
||
/* Genau EIN aktives Event: zentrierte, etwas größere Einzelkachel statt
|
||
halbleerem Zwei-Spalten-Raster (Nutzer-Wunsch: "spezieller"). */
|
||
.jahres-events-grid-einzeln {
|
||
grid-template-columns: 1fr;
|
||
max-width: 480px;
|
||
margin: 0 auto;
|
||
}
|
||
.jahres-events-grid-einzeln .jahres-event-card { padding: 1.6rem 1.8rem; }
|
||
.jahres-events-grid-einzeln .jahres-event-card h3 { font-size: 1.3rem; }
|
||
/* Optionales Admin-Bild pro Event (20.08.2026, "Event des Jahres" jetzt in
|
||
der Verwaltung pflegbar) — bleibt per [hidden] unsichtbar, solange kein
|
||
Bild gesetzt ist, damit die textbasierten Standard-Karten unverändert
|
||
aussehen. Bugfix (per Playwright-Test gefunden): "display:block" allein
|
||
hätte dieselbe Spezifität wie die eingebaute [hidden]-Regel des Browsers
|
||
und würde sie im Zweifel überschreiben (leerer Bild-Rahmen wäre auch OHNE
|
||
gesetztes Bild sichtbar gewesen) — deshalb hier zusätzlich explizit
|
||
:not([hidden]) statt nur der Klasse allein. */
|
||
.jahres-event-bild[hidden] { display: none; }
|
||
.jahres-event-bild:not([hidden]) {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 16/9;
|
||
object-fit: cover;
|
||
border-radius: calc(var(--radius) - 4px);
|
||
margin-bottom: .9rem;
|
||
}
|
||
|
||
/* ---------- "Event des Jahres" — Detail-Fenster (20.08.2026) ----------
|
||
Nutzer-Wunsch: "wen ich drauf drücke dass dein ein kleines fenster
|
||
aufgeht wo das bild bissl größer ist mit einem größeren text und
|
||
beschreibung, und mit einem link ... bereite das richtig geil krank
|
||
vor." Augenschonend gehalten (siehe Projektregel): kein grelles Weiß,
|
||
sanftes Ein-/Ausblenden statt hartem Umschalten, respektiert
|
||
prefers-reduced-motion. */
|
||
.jahres-event-modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 200;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 4vh 5vw;
|
||
background: rgba(5, 7, 11, .78);
|
||
backdrop-filter: blur(6px);
|
||
opacity: 0;
|
||
transition: opacity .22s ease;
|
||
}
|
||
.jahres-event-modal-overlay.offen { opacity: 1; }
|
||
.jahres-event-modal-overlay[hidden] { display: none; }
|
||
body.modal-offen { overflow: hidden; }
|
||
.jahres-event-modal {
|
||
position: relative;
|
||
width: min(640px, 100%);
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
background: var(--card-bg);
|
||
border: 1px solid rgba(212, 175, 55, .4);
|
||
border-radius: var(--radius);
|
||
box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(212, 175, 55, .12);
|
||
transform: scale(.94) translateY(10px);
|
||
transition: transform .25s ease;
|
||
}
|
||
.jahres-event-modal-overlay.offen .jahres-event-modal { transform: scale(1) translateY(0); }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.jahres-event-modal-overlay, .jahres-event-modal { transition: none; }
|
||
}
|
||
.jahres-event-modal-close {
|
||
position: absolute;
|
||
top: .9rem; right: .9rem;
|
||
z-index: 2;
|
||
width: 38px; height: 38px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 255, 255, .25);
|
||
background: rgba(5, 7, 11, .7);
|
||
color: var(--text);
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
transition: border-color .15s ease, transform .15s ease;
|
||
}
|
||
.jahres-event-modal-close:hover { border-color: rgba(212, 175, 55, .7); transform: scale(1.06); }
|
||
.jahres-event-modal-bild {
|
||
display: block;
|
||
width: 100%;
|
||
max-height: 46vh;
|
||
object-fit: cover;
|
||
border-radius: var(--radius) var(--radius) 0 0;
|
||
}
|
||
.jahres-event-modal-bild[hidden] { display: none; }
|
||
.jahres-event-modal-body { padding: 1.8rem 2rem 2.2rem; }
|
||
.jahres-event-modal-datum {
|
||
display: block;
|
||
color: #e8c465;
|
||
font-weight: 700;
|
||
font-size: .92rem;
|
||
letter-spacing: .03em;
|
||
margin-bottom: .5rem;
|
||
}
|
||
.jahres-event-modal-body h2 { font-size: 1.7rem; margin: 0 0 .8rem; }
|
||
.jahres-event-modal-body p { font-size: 1.08rem; line-height: 1.7; color: var(--text-muted); margin: 0 0 1.4rem; }
|
||
.jahres-event-modal-link[hidden] { display: none; }
|
||
|
||
/* ---------- Cards ---------- */
|
||
.card {
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 1.6rem;
|
||
box-shadow: var(--shadow);
|
||
height: 100%;
|
||
transition: border-color .15s ease, transform .15s ease;
|
||
}
|
||
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
|
||
.card h3 { margin-bottom: .4rem; }
|
||
.card .tag {
|
||
display: inline-block;
|
||
font-size: .72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: .08em;
|
||
color: var(--accent);
|
||
border: 1px solid var(--accent);
|
||
border-radius: 999px;
|
||
padding: .15rem .6rem;
|
||
margin-bottom: .8rem;
|
||
}
|
||
|
||
.grid { display: grid; gap: 1.4rem; }
|
||
.grid-2 { grid-template-columns: repeat(2, 1fr); }
|
||
.grid-3 { grid-template-columns: repeat(3, 1fr); }
|
||
.grid-4 { grid-template-columns: repeat(4, 1fr); }
|
||
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
|
||
|
||
/* ---------- Profil-Karten (Team/Creator) ---------- */
|
||
.profile-card {
|
||
position: relative;
|
||
background: var(--card-bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
text-align: center;
|
||
padding: 2rem 1.2rem 1.7rem;
|
||
transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
|
||
}
|
||
/* dezenter Lichtschein hinter dem Avatar */
|
||
.profile-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -30%;
|
||
left: 50%;
|
||
width: 200px;
|
||
height: 200px;
|
||
transform: translateX(-50%);
|
||
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.profile-card:hover {
|
||
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
|
||
}
|
||
.profile-card h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
|
||
/* Avatar-Kreis mit Akzent-Ring.
|
||
WICHTIG: hier kommen fertig zugeschnittene Gesichts-Ausschnitte rein
|
||
(assets/img/avatar-*.jpg), NICHT die großen Team-Karten — die sind bei
|
||
dieser Größe nur Matsch. Siehe `avatar`-Feld in assets/js/data-modis.js. */
|
||
.avatar {
|
||
width: 108px;
|
||
height: 108px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 1rem;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
background: linear-gradient(140deg, var(--accent), var(--accent-2));
|
||
box-shadow:
|
||
0 0 0 2px var(--card-bg),
|
||
0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent),
|
||
0 10px 26px rgba(0, 0, 0, .45);
|
||
transition: box-shadow .3s ease, transform .3s ease;
|
||
}
|
||
.avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
/* Leichter Glanz oben, damit der Kreis nicht flach wirkt */
|
||
.avatar::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 50%;
|
||
background: linear-gradient(165deg, rgba(255, 255, 255, .18), transparent 55%);
|
||
pointer-events: none;
|
||
}
|
||
.avatar-initial {
|
||
font-family: var(--font-head);
|
||
font-weight: 800;
|
||
font-size: 2.4rem;
|
||
line-height: 1;
|
||
color: var(--accent-contrast);
|
||
text-shadow: 0 2px 6px rgba(0, 0, 0, .25);
|
||
}
|
||
.profile-card:hover .avatar {
|
||
transform: translateY(-2px);
|
||
box-shadow:
|
||
0 0 0 2px var(--card-bg),
|
||
0 0 0 4px var(--frame, var(--accent)),
|
||
0 14px 32px rgba(0, 0, 0, .5);
|
||
}
|
||
/* Fest lila bei JEDER Profilkarte (Modis, Scouts, Creator) — Wunsch von
|
||
Dogi, nachdem ihm Michis zufällig lila geloster Ring gefallen hat.
|
||
Fester Hex-Wert statt var(--accent-2), damit es auch auf den roten
|
||
Agentur-Seiten (Scout/Creator) lila bleibt statt orange zu werden. */
|
||
.profile-card { --frame: #8b5cf6; }
|
||
.profile-card .avatar {
|
||
/* Fester lila-Verlauf statt var(--accent-2), damit der Avatar-Hintergrund
|
||
auch auf roten Agentur-Seiten sauber lila bleibt statt lila+orange zu mischen. */
|
||
background: linear-gradient(140deg, var(--frame, var(--accent)), #6d28d9);
|
||
box-shadow:
|
||
0 0 0 2px var(--card-bg),
|
||
0 0 0 4px color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent),
|
||
0 10px 26px rgba(0, 0, 0, .45);
|
||
}
|
||
.profile-card::before {
|
||
background: radial-gradient(circle,
|
||
color-mix(in srgb, var(--frame, var(--accent)) 20%, transparent), transparent 70%);
|
||
}
|
||
.profile-card:hover { border-color: color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent); }
|
||
.profile-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: .6rem; }
|
||
.profile-card .quote { font-style: italic; font-size: .9rem; }
|
||
.profile-card .socials { display: flex; justify-content: center; gap: .6rem; margin-top: .8rem; }
|
||
.profile-card .socials a {
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding: .35rem .8rem;
|
||
font-size: .78rem;
|
||
color: var(--text-muted);
|
||
}
|
||
.profile-card .socials a:hover { color: var(--accent); border-color: var(--accent); }
|
||
|
||
/* ---------- Placeholder-Bild-Boxen (bis echte Fotos da sind) ---------- */
|
||
.img-placeholder {
|
||
aspect-ratio: 4 / 3;
|
||
border-radius: var(--radius);
|
||
background: repeating-linear-gradient(135deg, var(--bg-alt), var(--bg-alt) 10px, var(--card-bg) 10px, var(--card-bg) 20px);
|
||
border: 1px dashed var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: .3rem;
|
||
color: var(--text-muted);
|
||
font-size: .8rem;
|
||
text-align: center;
|
||
padding: 1rem;
|
||
}
|
||
|
||
/* ---------- Timeline (Zeitreise) — alte, einfache Punkt+Linie-Variante ---------- */
|
||
.timeline { position: relative; margin: 2rem 0; padding-left: 2rem; border-left: 2px solid var(--border); }
|
||
.timeline-item { position: relative; padding-bottom: 2.4rem; }
|
||
.timeline-item::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: -2.45rem;
|
||
top: .2rem;
|
||
width: 14px; height: 14px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
box-shadow: 0 0 0 4px var(--bg);
|
||
}
|
||
.timeline-item .date { color: var(--accent); font-weight: 700; font-size: .85rem; }
|
||
|
||
/* ---------- Zeitbaum (Zeitreise) — die Reise als wachsender Baum ----------
|
||
Ein Stamm (::before, per clip-path unten dicker als oben = "Wachstum")
|
||
läuft mittig durch alle Stationen. Jede Station ("Ast") hängt sich
|
||
abwechselnd links/rechts an den Stamm, verbunden über eine glühende
|
||
Astlinie. Meilenstein-Stationen bekommen eine goldene statt babyblaue
|
||
Aura. Oben ein Keim (🌱, Anfang), unten eine Krone (🌳, Fortsetzung). */
|
||
.zeit-baum {
|
||
position: relative;
|
||
margin: 3rem 0 1rem;
|
||
padding: 2.4rem 0;
|
||
}
|
||
.zeit-baum::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0; bottom: 0;
|
||
width: 44px;
|
||
transform: translateX(-50%);
|
||
background: linear-gradient(180deg,
|
||
rgba(143,217,234,.55) 0%,
|
||
rgba(139,92,246,.55) 45%,
|
||
rgba(217,196,90,.6) 100%);
|
||
clip-path: polygon(47% 0%, 53% 0%, 66% 100%, 34% 100%);
|
||
filter: blur(.2px);
|
||
box-shadow: 0 0 60px 6px rgba(143,217,234,.18);
|
||
opacity: .85;
|
||
}
|
||
/* "Diese Seite wächst noch"-Hinweis (20.08.2026, Nutzer-Wunsch) — bewusst
|
||
einladend statt wie eine Fehler-/Baustellen-Meldung, im selben Babyblau
|
||
wie der Rest des Wachstums-Baum-Themas dieser Seite (.zeit-baum-kappe/
|
||
-wurzel). Sitzt VOR dem Baum, damit Besucher sofort verstehen: hier
|
||
entsteht noch etwas, ohne dass es wie ein Fehler wirkt. */
|
||
.zeit-baustelle {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
max-width: 640px;
|
||
margin: 0 auto 2.6rem;
|
||
padding: 1.1rem 1.4rem;
|
||
border-radius: var(--radius);
|
||
background: rgba(143, 217, 234, .06);
|
||
border: 1.5px solid rgba(143, 217, 234, .35);
|
||
box-shadow: 0 0 24px rgba(143, 217, 234, .12);
|
||
}
|
||
.zeit-baustelle-icon {
|
||
flex-shrink: 0;
|
||
font-size: 1.8rem;
|
||
line-height: 1;
|
||
filter: drop-shadow(0 0 8px rgba(143, 217, 234, .55));
|
||
animation: zeit-baustelle-wiegen 3.5s ease-in-out infinite;
|
||
}
|
||
.zeit-baustelle strong {
|
||
display: block;
|
||
font-size: 1.05rem;
|
||
margin-bottom: .3rem;
|
||
color: var(--text);
|
||
}
|
||
.zeit-baustelle p {
|
||
margin: 0;
|
||
font-size: .92rem;
|
||
color: var(--text-muted);
|
||
line-height: 1.55;
|
||
}
|
||
@keyframes zeit-baustelle-wiegen {
|
||
0%, 100% { transform: rotate(-5deg); }
|
||
50% { transform: rotate(5deg); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.zeit-baustelle-icon { animation: none; }
|
||
}
|
||
|
||
.zeit-baum-kappe {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: .3rem;
|
||
margin-bottom: .5rem;
|
||
text-align: center;
|
||
font-size: .85rem;
|
||
font-weight: 700;
|
||
color: var(--accent);
|
||
text-shadow: 0 0 14px rgba(143,217,234,.55);
|
||
}
|
||
.zeit-baum-kappe span:first-child { font-size: 1.6rem; filter: drop-shadow(0 0 10px rgba(143,217,234,.6)); }
|
||
.zeit-baum-wurzel {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: .3rem;
|
||
margin-top: 1rem;
|
||
text-align: center;
|
||
font-size: .85rem;
|
||
font-weight: 700;
|
||
color: #e8d78f;
|
||
text-shadow: 0 0 14px rgba(217,196,90,.5);
|
||
}
|
||
.zeit-baum-wurzel span:first-child { font-size: 1.9rem; filter: drop-shadow(0 0 14px rgba(217,196,90,.6)); }
|
||
|
||
.zeit-ast {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 1.1rem 0;
|
||
}
|
||
.zeit-ast:nth-child(odd) { justify-content: flex-start; }
|
||
.zeit-ast:nth-child(even) { justify-content: flex-end; }
|
||
|
||
.zeit-node {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 16px; height: 16px;
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 60%, var(--accent-2) 100%);
|
||
box-shadow: 0 0 0 4px var(--bg), 0 0 18px 3px rgba(143,217,234,.6);
|
||
z-index: 2;
|
||
animation: zeit-node-pulse 3.2s ease-in-out infinite;
|
||
}
|
||
.zeit-ast.meilenstein .zeit-node {
|
||
background: radial-gradient(circle at 35% 30%, #fff, #e8d78f 55%, #b8892f 100%);
|
||
box-shadow: 0 0 0 4px var(--bg), 0 0 22px 5px rgba(232,215,143,.7);
|
||
}
|
||
@keyframes zeit-node-pulse {
|
||
0%, 100% { box-shadow: 0 0 0 4px var(--bg), 0 0 14px 2px rgba(143,217,234,.5); }
|
||
50% { box-shadow: 0 0 0 4px var(--bg), 0 0 24px 6px rgba(143,217,234,.85); }
|
||
}
|
||
|
||
.zeit-karte {
|
||
position: relative;
|
||
width: calc(50% - 2.6rem);
|
||
background: linear-gradient(160deg, rgba(23,27,33,.82), rgba(23,27,33,.55));
|
||
backdrop-filter: blur(6px);
|
||
border: 1px solid rgba(143,217,234,.25);
|
||
border-radius: 16px;
|
||
padding: 1.1rem 1.3rem;
|
||
box-shadow: 0 10px 26px rgba(0,0,0,.35);
|
||
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
|
||
}
|
||
.zeit-ast.meilenstein .zeit-karte { border-color: rgba(232,215,143,.4); }
|
||
.zeit-karte::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 2.6rem;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, rgba(143,217,234,.05), rgba(143,217,234,.65));
|
||
transform: translateY(-50%);
|
||
}
|
||
.zeit-ast:nth-child(odd) .zeit-karte::before { right: -2.6rem; }
|
||
.zeit-ast:nth-child(even) .zeit-karte::before { left: -2.6rem; background: linear-gradient(270deg, rgba(143,217,234,.05), rgba(143,217,234,.65)); }
|
||
.zeit-ast.meilenstein:nth-child(odd) .zeit-karte::before { background: linear-gradient(90deg, rgba(232,215,143,.05), rgba(232,215,143,.75)); }
|
||
.zeit-ast.meilenstein:nth-child(even) .zeit-karte::before { background: linear-gradient(270deg, rgba(232,215,143,.05), rgba(232,215,143,.75)); }
|
||
|
||
.zeit-karte:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(143,217,234,.55);
|
||
box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 24px rgba(143,217,234,.2);
|
||
}
|
||
.zeit-ast.meilenstein .zeit-karte:hover {
|
||
border-color: rgba(232,215,143,.7);
|
||
box-shadow: 0 16px 34px rgba(0,0,0,.45), 0 0 26px rgba(232,215,143,.3);
|
||
}
|
||
|
||
.zeit-datum {
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
font-size: .82rem;
|
||
letter-spacing: .02em;
|
||
margin-bottom: .25rem;
|
||
}
|
||
.zeit-ast.meilenstein .zeit-datum { color: #e8d78f; }
|
||
.zeit-karte h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
|
||
.zeit-karte p { margin: 0; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
|
||
|
||
.zeit-ast.zeit-final .zeit-karte { width: calc(100% - 4rem); max-width: 640px; text-align: center; }
|
||
.zeit-ast.zeit-final { justify-content: center !important; }
|
||
.zeit-ast.zeit-final .zeit-karte::before { display: none; }
|
||
/* Bugfix 20.08.2026 (Nutzer-Report: "wieso dieser Punkt da in der Mitte"):
|
||
.zeit-node ist bei allen normalen Karten position:absolute; left:50%;
|
||
top:50% relativ zu .zeit-ast — das sitzt korrekt in der Baum-Mitte,
|
||
WEIL die Karte dort nur die halbe Breite einnimmt. Die Finale-Karte
|
||
(.zeit-final) wird aber auf fast volle Breite gestreckt und zentriert
|
||
(siehe .zeit-karte-Regel oben) — der Knoten landete dadurch mitten im
|
||
Text statt am Rand. Die Verbindungslinie (::before, direkt drüber)
|
||
wurde dafür schon 2025 ausgeblendet, der Knoten selbst wurde dabei
|
||
übersehen. */
|
||
.zeit-ast.zeit-final .zeit-node { display: none; }
|
||
.zeit-zitat {
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
font-style: italic;
|
||
margin: .8rem 0 .5rem !important;
|
||
}
|
||
.zeit-familie {
|
||
font-weight: 800;
|
||
font-size: 1.05rem !important;
|
||
color: var(--accent) !important;
|
||
text-shadow: 0 0 14px rgba(143,217,234,.5);
|
||
}
|
||
.zeit-signoff {
|
||
margin-top: .8rem !important;
|
||
color: var(--text-muted);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Reveal-Animation (per IntersectionObserver in zeitreise.html getriggert) */
|
||
.zeit-ast { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
|
||
.zeit-ast.zeit-sichtbar { opacity: 1; transform: translateY(0); }
|
||
|
||
@media (max-width: 780px) {
|
||
.zeit-baum::before { left: 22px; width: 30px; clip-path: polygon(44% 0%, 56% 0%, 70% 100%, 30% 100%); }
|
||
.zeit-ast, .zeit-ast:nth-child(odd), .zeit-ast:nth-child(even) { justify-content: flex-start; padding-left: 3rem; }
|
||
.zeit-node { left: 22px; }
|
||
.zeit-karte { width: 100%; }
|
||
.zeit-karte::before,
|
||
.zeit-ast:nth-child(even) .zeit-karte::before { left: -2.2rem; right: auto; width: 2.2rem; background: linear-gradient(270deg, rgba(143,217,234,.05), rgba(143,217,234,.65)); }
|
||
.zeit-ast.meilenstein .zeit-karte::before,
|
||
.zeit-ast.meilenstein:nth-child(even) .zeit-karte::before { background: linear-gradient(270deg, rgba(232,215,143,.05), rgba(232,215,143,.75)); }
|
||
.zeit-ast.zeit-final .zeit-karte { width: 100%; text-align: left; }
|
||
.zeit-ast.zeit-final { padding-left: 3rem; }
|
||
}
|
||
|
||
/* ---------- Gallery / Lightbox ---------- */
|
||
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
|
||
.filter-btn {
|
||
border: 1px solid var(--border);
|
||
background: transparent;
|
||
color: var(--text-muted);
|
||
padding: .5rem 1rem;
|
||
border-radius: 999px;
|
||
cursor: pointer;
|
||
font-size: .85rem;
|
||
}
|
||
.filter-btn.active, .filter-btn:hover { border-color: var(--accent); color: var(--accent); }
|
||
.gallery-item { cursor: pointer; }
|
||
.lightbox {
|
||
position: fixed; inset: 0; background: rgba(0,0,0,.85);
|
||
display: none; align-items: center; justify-content: center; z-index: 200; padding: 5vh 5vw;
|
||
}
|
||
.lightbox.open { display: flex; }
|
||
.lightbox img, .lightbox .img-placeholder { max-height: 85vh; max-width: 90vw; }
|
||
.lightbox-close {
|
||
position: absolute; top: 20px; right: 30px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none;
|
||
}
|
||
|
||
/* ---------- Formulare ---------- */
|
||
form.app-form { display: grid; gap: 1rem; max-width: 640px; }
|
||
.field { display: grid; gap: .4rem; }
|
||
.field label { font-weight: 600; font-size: .9rem; }
|
||
.field input, .field select, .field textarea {
|
||
background: var(--bg-alt);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: .75rem .9rem;
|
||
color: var(--text);
|
||
font-family: var(--font-body);
|
||
}
|
||
.field textarea { min-height: 120px; resize: vertical; }
|
||
.field .error-msg { color: #ff6b6b; font-size: .8rem; display: none; }
|
||
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ff6b6b; }
|
||
.field.has-error .error-msg { display: block; }
|
||
.form-status { padding: .9rem 1.1rem; border-radius: 10px; font-size: .9rem; display: none; }
|
||
.form-status.show { display: block; }
|
||
.form-status.success { background: rgba(143,217,234,.12); border: 1px solid var(--accent); }
|
||
.form-status.error { background: rgba(255,107,107,.1); border: 1px solid #ff6b6b; }
|
||
.tabs { display: flex; gap: .6rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
|
||
.tab-btn {
|
||
border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
|
||
padding: .7rem 1.3rem; border-radius: 999px; cursor: pointer; font-weight: 600;
|
||
}
|
||
.tab-btn.active { border-color: var(--accent); color: var(--accent); }
|
||
.tab-panel { display: none; }
|
||
.tab-panel.active { display: block; }
|
||
|
||
/* ---------- Footer ---------- */
|
||
footer.site-footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 3rem 0 2rem;
|
||
margin-top: 4rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
/* Voll deckender Hintergrund (nicht color-mix/transparent) — auf Seiten
|
||
mit body.mit-hintergrund lag der Footer sonst direkt über dem fixen,
|
||
nur teilweise abgedunkelten Hintergrundfoto, was bei axe-core einen
|
||
color-contrast-Verstoß für .footer-grid .brand auslöste (04.08.2026). */
|
||
background: var(--bg);
|
||
}
|
||
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
|
||
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
|
||
.footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
|
||
.footer-grid ul { display: grid; gap: .5rem; }
|
||
.footer-grid a { color: var(--text-muted); font-size: .9rem; }
|
||
.footer-grid a:hover { color: var(--accent); }
|
||
/* Fußzeilen-Links auf Handys als richtige Tippziele (21.08.2026, Teil des
|
||
"alles muss auf dem Handy perfekt erreichbar sein"-Auftrags). Am Rechner
|
||
sind 20px hohe Textlinks mit der Maus problemlos zu treffen, mit dem
|
||
Finger nicht -- hier sind es 18 Links dicht untereinander, entsprechend
|
||
leicht erwischt man den falschen. inline-block + Innenabstand vergrößert
|
||
die Trefferfläche auf ~44px, ohne dass sich die Optik nennenswert ändert
|
||
(der Text bleibt gleich groß, nur die unsichtbare Fläche wächst). */
|
||
@media (max-width: 760px) {
|
||
.footer-grid ul { gap: .15rem; }
|
||
.footer-grid a {
|
||
display: inline-block;
|
||
padding: .62rem 0;
|
||
min-height: 44px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.footer-bottom {
|
||
margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
|
||
display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
|
||
font-size: .8rem; color: var(--text-muted);
|
||
}
|
||
/* Impressum/AGB auf Handys ebenfalls als echte Tippziele (21.08.2026).
|
||
Diese beiden sind rechtlich vorgeschrieben und müssen leicht erreichbar
|
||
sein -- mit 17px Höhe waren sie mit dem Finger kaum zu treffen. */
|
||
@media (max-width: 760px) {
|
||
.footer-bottom { align-items: center; }
|
||
.footer-bottom a {
|
||
display: inline-block;
|
||
padding: .6rem 0;
|
||
min-height: 44px;
|
||
/* min-width für kurze Beschriftungen wie "AGB" -- sonst ist das Ziel
|
||
zwar hoch genug, aber nur ~24px breit. */
|
||
min-width: 44px;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
|
||
/* ---------- Foto-Collage (Polaroid-Scrapbook, z.B. Dogfather & Casper) ---------- */
|
||
.collage-wrap {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
gap: 1.6rem 1rem;
|
||
padding: 2.5rem 0 1.5rem;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
.collage-item {
|
||
background: #fff;
|
||
padding: 10px 10px 30px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 16px 30px rgba(0, 0, 0, .4);
|
||
width: 190px;
|
||
transition: transform .25s ease, box-shadow .25s ease;
|
||
cursor: default;
|
||
}
|
||
.collage-item:nth-child(1) { transform: rotate(-7deg) translateY(12px); }
|
||
.collage-item:nth-child(2) { transform: rotate(4deg) translateY(-10px); z-index: 2; width: 210px; }
|
||
.collage-item:nth-child(3) { transform: rotate(-3deg) translateY(4px); }
|
||
.collage-item:nth-child(4) { transform: rotate(8deg) translateY(-6px); }
|
||
.collage-item:nth-child(5) { transform: rotate(-9deg) translateY(10px); }
|
||
.collage-item:hover {
|
||
transform: scale(1.08) rotate(0deg) !important;
|
||
z-index: 5;
|
||
box-shadow: 0 22px 40px rgba(0, 0, 0, .55);
|
||
}
|
||
/* Alle Fotoflächen bekommen denselben Rahmen-Look wie die Avatare:
|
||
feine Linie in der Rahmenfarbe, dunkle Trennkante, weicher Schlagschatten.
|
||
Die Farbe steuert die Variable --frame — Standard ist die Markenfarbe.
|
||
Andere Farben über die Klassen .frame-silver / .frame-lila / .frame-gold /
|
||
.frame-rot setzen (siehe unten). */
|
||
.collage-photo {
|
||
--frame: var(--accent);
|
||
position: relative;
|
||
aspect-ratio: 1 / 1;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
background: repeating-linear-gradient(135deg, #e8ebee, #e8ebee 10px, #f6f7f9 10px, #f6f7f9 20px);
|
||
/* Statt eines starren, matten Rahmens: ein "atmender" Polarlicht-Glanz,
|
||
der langsam heller/dunkler und weiter/enger pulsiert (siehe
|
||
@keyframes collage-aurora-glow unten). Box-shadow wird von
|
||
overflow:hidden NICHT beschnitten, deshalb bleibt der Glanz auch am
|
||
Rand sichtbar, obwohl das Foto selbst innen sauber zugeschnitten ist. */
|
||
box-shadow:
|
||
0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
|
||
0 0 0 4px rgba(0, 0, 0, .55),
|
||
0 0 26px color-mix(in srgb, var(--frame) 22%, transparent),
|
||
0 14px 34px rgba(0, 0, 0, .45);
|
||
animation: collage-aurora-glow 5s ease-in-out infinite;
|
||
transition: transform .3s ease;
|
||
}
|
||
@keyframes collage-aurora-glow {
|
||
0%, 100% {
|
||
box-shadow:
|
||
0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
|
||
0 0 0 4px rgba(0, 0, 0, .55),
|
||
0 0 26px color-mix(in srgb, var(--frame) 30%, transparent),
|
||
0 0 46px color-mix(in srgb, var(--frame) 12%, transparent),
|
||
0 14px 34px rgba(0, 0, 0, .45);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 2px color-mix(in srgb, var(--frame) 95%, transparent),
|
||
0 0 0 4px rgba(0, 0, 0, .55),
|
||
0 0 46px color-mix(in srgb, var(--frame) 62%, transparent),
|
||
0 0 80px color-mix(in srgb, var(--frame) 32%, transparent),
|
||
0 14px 34px rgba(0, 0, 0, .45);
|
||
}
|
||
}
|
||
.collage-photo:hover {
|
||
transform: translateY(-3px);
|
||
animation-play-state: paused;
|
||
box-shadow:
|
||
0 0 0 2px var(--frame),
|
||
0 0 0 4px rgba(0, 0, 0, .55),
|
||
0 0 46px color-mix(in srgb, var(--frame) 55%, transparent),
|
||
0 0 80px color-mix(in srgb, var(--frame) 30%, transparent),
|
||
0 18px 42px rgba(0, 0, 0, .5);
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.collage-photo { animation: none; }
|
||
}
|
||
/* Farbvarianten für Abwechslung */
|
||
.frame-silver { --frame: #c7ccd1; }
|
||
.frame-lila { --frame: var(--accent-2); }
|
||
.frame-gold { --frame: #d8b25a; }
|
||
.frame-rot { --frame: #d94a5c; }
|
||
.frame-tuerkis{ --frame: #6ee7d8; }
|
||
.collage-photo img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
/* Kräftigerer "produced look": mehr Sättigung/Kontrast als vorher, damit
|
||
auch schlichte Portraitfotos neben aufwendig gestalteten Postern
|
||
(z.B. dem DogFather-Manager-Artwork) nicht flach wirken. */
|
||
filter: saturate(1.26) contrast(1.15) brightness(1.03);
|
||
}
|
||
/* Sehr hohe Hochkant-Bilder (z.B. streamer-mascot.jpg mit 900x2812 px) würden
|
||
mit aspect-ratio:auto + height:auto in voller natürlicher Höhe rendern und die
|
||
danebenstehende Textspalte komplett erschlagen (Nutzer-Report 20.08.2026:
|
||
"der soll bissl kleiner sein und nicht so riesig"). Ein zu knapper max-height-
|
||
Deckel (erster Versuch: 460px) machte es dann aber zu klein und ließ eine
|
||
sichtbare Lücke unter dem Bild, weil die Textspalte daneben normalerweise
|
||
deutlich mehr Platz braucht (Nutzer-Report 21.08.2026: "die größe vom bild
|
||
vom husky soll dem text rechts nebendran angepasst werden").
|
||
Ausprobiert und wieder verworfen: die Höhe per CSS Grid align-items:stretch +
|
||
height:100% exakt an die Textspalte zu koppeln. Funktioniert bei Grid NICHT
|
||
robust, weil ein 'auto' sizing Track seine Höhe am MAX-CONTENT-Beitrag beider
|
||
Felder ausrichtet -- bei einem derart extremen Hochkantbild (Seitenverhältnis
|
||
~1:3.1) zieht das Bild die ganze Zeile (und damit auch die Textspalte) auf
|
||
seine eigene, riesige natürliche Höhe hoch, egal was man an min-height
|
||
probiert (min-height wirkt nur auf den Mindest-, nicht den Wachstums-Beitrag).
|
||
Robuster Kompromiss stattdessen: ein großzügiger fester max-height-Wert
|
||
(720px statt 460px), der sich an der TYPISCHEN Höhe der Textspalte in diesem
|
||
Abschnitt orientiert (auf normalen Desktop-Breiten ~715-850px hoch) -- das
|
||
Bild wirkt dadurch angemessen groß und auf Augenhöhe mit dem Text, ohne die
|
||
fragile/rückkoppelnde Grid-Stretch-Mechanik. width:fit-content lässt den
|
||
Rahmen dabei eng am Bild sitzen, statt breite gestreifte Hintergrund-Balken
|
||
danebenzulassen.
|
||
WICHTIG: muss NACH ".collage-photo img" stehen — beide Regeln haben dieselbe
|
||
Spezifität (eine Klasse + ein Element), die spätere gewinnt. Stünde dieser
|
||
Block davor, würde width:100%/height:100% oben die Deckelung wieder aufheben. */
|
||
.collage-photo-kompakt {
|
||
aspect-ratio: auto;
|
||
width: fit-content;
|
||
max-width: 100%;
|
||
margin: 0 auto;
|
||
}
|
||
.collage-photo-kompakt img {
|
||
width: auto;
|
||
height: auto;
|
||
max-height: 720px;
|
||
max-width: 100%;
|
||
display: block;
|
||
object-fit: contain;
|
||
}
|
||
@media (max-width: 780px) {
|
||
/* Auf Mobilgeräten stehen die Grid-Spalten untereinander -- dort ist die
|
||
Textspalte durch die volle Breite viel kürzer, ein 720px hohes Bild wäre
|
||
unangemessen groß für einen schmalen Handy-Screen. Deckel daher kleiner. */
|
||
.collage-photo-kompakt img { max-height: 420px; }
|
||
}
|
||
/* Cineastischer "Poster-Grade" für JEDES Präsentationsfoto auf der Seite:
|
||
zwei Farbschein-Blooms in der jeweiligen Rahmenfarbe (oben-links /
|
||
unten-rechts, wie ein Studio-Rimlight — nutzt dieselbe --frame-Variable
|
||
wie der Rahmen, damit Bild und Rand optisch zusammengehören), eine
|
||
sanfte Vignette unten für Tiefe/Fokus aufs Gesicht, plus feines
|
||
Filmkorn (SVG-Turbulence). Macht auch ein simples Handy-Foto "produziert",
|
||
ohne den eigentlichen Bildinhalt zu verdecken. */
|
||
.collage-photo::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
radial-gradient(125% 140% at 8% -14%, color-mix(in srgb, var(--frame) 75%, transparent) 0%, transparent 46%),
|
||
radial-gradient(125% 140% at 112% 116%, color-mix(in srgb, var(--frame) 65%, transparent) 0%, transparent 48%),
|
||
linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .5) 100%),
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
|
||
background-size: cover, cover, cover, 170px 170px;
|
||
background-blend-mode: screen, screen, multiply, overlay;
|
||
mix-blend-mode: overlay;
|
||
pointer-events: none;
|
||
}
|
||
/* Zusätzlicher, langsam wandernder Lichtschimmer in der Rahmenfarbe —
|
||
dieselbe Machart wie beim Bewerben-Knopf/den Buttons, nur sehr dezent,
|
||
damit das Foto selbst gut lesbar bleibt. */
|
||
.collage-photo::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 3;
|
||
background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--frame) 65%, white 35%) 50%, transparent 60%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
opacity: .55;
|
||
animation: btn-shimmer 7s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.collage-photo::before { animation: none; }
|
||
}
|
||
.collage-photo .img-placeholder {
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: 0;
|
||
border: none;
|
||
color: #6b7280;
|
||
}
|
||
.collage-caption {
|
||
text-align: center;
|
||
font-family: "Comic Sans MS", "Segoe Print", cursive;
|
||
color: #2a2a2a;
|
||
font-size: .85rem;
|
||
margin-top: .5rem;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.collage-item, .collage-item:nth-child(2) { width: 140px; }
|
||
}
|
||
|
||
/* ---------- Hero-Atmosphäre (Startseite): Polarlicht oben → Rauch Mitte → Nebel unten ----------
|
||
Drei Zonen, die weich ineinander übergehen, plus 4 Husky-/Hasen-Silhouetten mit leuchtend
|
||
blauen Augen, die deutlich erkennbar (aber nicht grell) darin stehen. ---------- */
|
||
.hero-atmosphere {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Verbindender Farbverlauf über die ganze Höhe: babyblau (oben) → neutral (Mitte) → silbrig (unten) */
|
||
.atmosphere-blend {
|
||
position: absolute;
|
||
inset: 0;
|
||
/* Fallback für Browser ohne color-mix() */
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(143, 217, 234, .18) 0%,
|
||
rgba(139, 92, 246, .12) 38%,
|
||
rgba(154, 166, 178, .10) 68%,
|
||
rgba(210, 216, 222, .14) 100%
|
||
);
|
||
background: linear-gradient(
|
||
to bottom,
|
||
color-mix(in srgb, var(--accent) 22%, transparent) 0%,
|
||
color-mix(in srgb, var(--accent-2) 14%, transparent) 38%,
|
||
rgba(154, 166, 178, .10) 68%,
|
||
rgba(210, 216, 222, .14) 100%
|
||
);
|
||
mix-blend-mode: screen;
|
||
opacity: .8;
|
||
}
|
||
|
||
/* ---- Zone 1: Polarlicht (oben) ---- */
|
||
.aurora-band {
|
||
position: absolute;
|
||
width: 150%;
|
||
height: 60%;
|
||
left: -25%;
|
||
border-radius: 50%;
|
||
filter: blur(65px);
|
||
opacity: .22;
|
||
mix-blend-mode: screen;
|
||
animation: aurora-drift 30s ease-in-out infinite;
|
||
}
|
||
.aurora-band.a1 { top: -16%; background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 70%); animation-duration: 26s; }
|
||
.aurora-band.a2 { top: 4%; background: radial-gradient(ellipse at center, var(--accent-2) 0%, transparent 70%); animation-duration: 36s; animation-delay: -9s; opacity: .18; }
|
||
.aurora-band.a3 { top: 16%; background: radial-gradient(ellipse at center, #6ee7d8 0%, transparent 70%); animation-duration: 44s; animation-delay: -18s; opacity: .14; }
|
||
|
||
@keyframes aurora-drift {
|
||
0%, 100% { transform: translateX(-4%) translateY(0) scaleY(1); }
|
||
50% { transform: translateX(4%) translateY(-3%) scaleY(1.18); }
|
||
}
|
||
|
||
/* ---- Zone 2: Rauch (Mitte) ---- */
|
||
.smoke-blob {
|
||
position: absolute;
|
||
top: 32%;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(210, 214, 220, .16), transparent 72%);
|
||
filter: blur(40px);
|
||
animation: smoke-float 30s ease-in-out infinite;
|
||
}
|
||
@keyframes smoke-float {
|
||
0%, 100% { transform: translate(0,0) scale(1); }
|
||
50% { transform: translate(3%, -4%) scale(1.12); }
|
||
}
|
||
|
||
/* ---- Zone 3: Nebel (unten) ---- */
|
||
.fog-ground {
|
||
position: absolute;
|
||
bottom: -8%;
|
||
left: -15%;
|
||
width: 130%;
|
||
height: 42%;
|
||
background: linear-gradient(to top, rgba(220, 224, 228, .28), transparent 85%);
|
||
filter: blur(30px);
|
||
animation: fog-drift 40s ease-in-out infinite;
|
||
}
|
||
@keyframes fog-drift {
|
||
0%, 100% { transform: translateX(-3%); }
|
||
50% { transform: translateX(3%); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.aurora-band, .smoke-blob, .fog-ground { animation: none; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
KINO-HINTERGRUND — das große Trio-Artwork (Dogfather · Dogi · HasiDog)
|
||
Aufbau in drei Schichten, damit der Text immer perfekt lesbar bleibt:
|
||
1. ::before = das Artwork selbst, mit langsamer Ken-Burns-Fahrt
|
||
2. ::after = Abdunkelung (Vignette + Verlauf), blendet unten in die Seite
|
||
3. darüber = die bestehende Polarlicht/Rauch/Nebel-Atmosphäre, gedimmt
|
||
========================================================================== */
|
||
.hero-cinematic {
|
||
/* Etwas mehr vertikaler Raum als vorher, damit das Trio-Artwork (läuft
|
||
mit background-size:contain mit) auf großen Desktop-Bildschirmen
|
||
spürbar größer wirkt statt klein in der Mitte zu schweben. */
|
||
padding: clamp(5.5rem, 15vw, 10.5rem) 0;
|
||
isolation: isolate;
|
||
}
|
||
.hero-artwork {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
pointer-events: none;
|
||
}
|
||
.hero-artwork::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
/* Zwei Ebenen: das scharfe Artwork komplett sichtbar (contain — auf
|
||
dieser Seite läuft der Text ÜBER dem Bild mit Polarlicht-Effekten,
|
||
ein Banner-oberhalb-des-Texts-Layout wie auf den anderen Seiten
|
||
würde das Design zerstören). Darunter dieselbe Szene verwaschen als
|
||
Cover, die jeden Rand auffüllt, den "contain" freilässt — dadurch
|
||
wirkt es trotzdem randlos, obwohl die scharfen Pixel garantiert
|
||
nie beschnitten werden. */
|
||
background-image: url("../img/universe-trio.jpg?v=20260820h"), url("../img/universe-trio-blur.jpg?v=20260820h");
|
||
background-size: contain, cover;
|
||
background-position: center, center;
|
||
background-repeat: no-repeat, no-repeat;
|
||
}
|
||
.hero-artwork::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
/* Vignette: Mitte frei, Ränder dunkel — lenkt den Blick auf die Figuren */
|
||
radial-gradient(ellipse 118% 86% at 50% 44%,
|
||
rgba(0, 0, 0, .10) 0%, rgba(0, 0, 0, .52) 68%, rgba(0, 0, 0, .84) 100%),
|
||
/* Verlauf: oben dunkel für die Navigation, unten sauberer Übergang in die Seite */
|
||
linear-gradient(to bottom,
|
||
rgba(0, 0, 0, .62) 0%,
|
||
rgba(0, 0, 0, .30) 26%,
|
||
rgba(0, 0, 0, .34) 58%,
|
||
rgba(0, 0, 0, .78) 88%,
|
||
var(--bg) 100%);
|
||
}
|
||
/* Atmosphäre über dem Artwork nur noch als feiner Schleier */
|
||
.hero-cinematic .hero-atmosphere { opacity: .5; }
|
||
/* Text bekommt eine weiche Abschattung, damit er auf jedem Bildausschnitt sitzt */
|
||
.hero-cinematic h1,
|
||
.hero-cinematic .lead,
|
||
.hero-cinematic .eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .9); }
|
||
/* Auf Wunsch: auf der Startseite wirkte alles (Überschrift, Text, Live-
|
||
Status-Kästchen, Buttons) auf großen PC-Bildschirmen zu klein — hier
|
||
moderat vergrößert, ohne die mobile Größe (untere Klammer der clamp()s)
|
||
anzufassen. */
|
||
.hero-cinematic h1 { font-size: clamp(2.3rem, 6.2vw, 4.2rem); }
|
||
.hero-cinematic .lead { font-size: clamp(1.25rem, 1.9vw, 1.55rem); }
|
||
.hero-cinematic .eyebrow { font-size: .95rem; }
|
||
.hero-cinematic .card { padding: 1.3rem 1.8rem; }
|
||
.hero-cinematic .card .badge { font-size: .9rem; }
|
||
.hero-cinematic .card .small { font-size: 1.05rem; }
|
||
.hero-cinematic .btn-row .btn { font-size: 1.15rem; padding: 1rem 1.9rem; }
|
||
/* Die drei Welten-Karten (DogFather/HasiDog/Manager) unter dem Hero
|
||
sollen ebenfalls etwas größer wirken, wie auf Wunsch — Text war auf
|
||
großen Bildschirmen zu klein. */
|
||
.hero-cinematic .hero-grid .tag { font-size: .8rem; }
|
||
.hero-cinematic .hero-grid h3 { font-size: 1.45rem; }
|
||
.hero-cinematic .hero-grid p { font-size: 1.05rem; }
|
||
|
||
/* Bugfix 21.08.2026 (Nutzer-Report per Bild: "der hintergrund da nicht genau,
|
||
der soll genau hinter dem text sein so dass es schön aussieht und man das
|
||
bild auch sieht hinter dem text").
|
||
|
||
Ursache: .hero-artwork hat "inset:0" -- es füllt also die GESAMTE Höhe von
|
||
.hero-cinematic, und diese Sektion umschließt nicht nur die Überschrift,
|
||
sondern auch die 3 Welt-Kacheln darunter. Auf Desktop ist das unauffällig
|
||
(Sektion ist nicht viel höher als das Bild), aber auf dem Handy wird die
|
||
Sektion durch den 4-zeilig umbrechenden Titel + Kacheln SEHR hoch (~1570px
|
||
bei 390px Breite) -- das Bild (16:9, per background-size:contain an die
|
||
Breite angepasst) wird dadurch nur rund 220px hoch und mittig in dieser
|
||
riesigen Fläche zentriert. Ergebnis: das Bild landete als schmaler Streifen
|
||
irgendwo zwischen den Buttons und den Welt-Kacheln -- nicht hinter der
|
||
Überschrift, für die es eigentlich gedacht ist.
|
||
|
||
Fix: .hero-artwork bekommt auf dem Handy sein eigenes, festes Seiten-
|
||
verhältnis (4:3, per Bildschirmtests etwas höher als 16:9 gewählt --
|
||
zeigt mehr vom Bild und lässt den Verlauf sanfter ausklingen) und wird
|
||
von OBEN verankert statt über die volle (riesige) Höhe zentriert. Damit
|
||
sitzt es exakt dort, wo die Überschrift beginnt. background-size wechselt
|
||
auf "cover" (statt "contain") -- bei diesem moderateren Seitenverhältnis
|
||
bleibt der Ausschnitt erkennbar (nicht wie bei "cover" auf die volle
|
||
Sektionshöhe stark eingezoomt), füllt aber die Box randlos.
|
||
Verlauf (::after) eigens für die jetzt kürzere Box abgestimmt: die
|
||
Desktop-Version fasst den Übergang über die ganze (dort kürzere) Sektion
|
||
zusammen -- 1:1 auf die neue, kleinere Handy-Box übertragen, wäre der
|
||
Übergang zu abrupt (an mehreren Bildschirmbreiten mit Playwright
|
||
gegengeprüft) gewesen. Bewusst nur bis 760px (bestehende Schwelle dieser
|
||
Seite für "Handy-Layout" u.a. bei .hero-grid) -- ab da reicht wieder die
|
||
normale Desktop-Logik. */
|
||
@media (max-width: 760px) {
|
||
.hero-artwork {
|
||
top: 0; left: 0; right: 0; bottom: auto;
|
||
aspect-ratio: 4 / 3;
|
||
height: auto;
|
||
}
|
||
.hero-artwork::before {
|
||
background-size: cover, cover;
|
||
background-position: center 25%, center;
|
||
}
|
||
.hero-artwork::after {
|
||
background:
|
||
radial-gradient(ellipse 130% 90% at 50% 35%, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .5) 65%, rgba(0, 0, 0, .8) 100%),
|
||
linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, .7) 78%, var(--bg) 100%);
|
||
}
|
||
}
|
||
|
||
/* ==========================================================================
|
||
CHARAKTER-SHOWCASE — die zwei Artworks groß, scharf und komplett sichtbar
|
||
========================================================================== */
|
||
.char-showcase {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: clamp(1.1rem, 4vw, 2.4rem);
|
||
max-width: 760px;
|
||
margin: 0 auto;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.char-showcase { grid-template-columns: 1fr; max-width: 320px; }
|
||
}
|
||
.char-card {
|
||
position: relative;
|
||
display: block;
|
||
width: 100%;
|
||
max-width: 330px;
|
||
margin-inline: auto;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
text-decoration: none;
|
||
background: #080c11;
|
||
border: 1px solid rgba(255, 255, 255, .10);
|
||
box-shadow: 0 26px 60px rgba(0, 0, 0, .58);
|
||
animation: char-float 11s ease-in-out infinite;
|
||
transition: transform .38s cubic-bezier(.2, .7, .3, 1),
|
||
box-shadow .38s ease,
|
||
border-color .38s ease;
|
||
}
|
||
.char-card:nth-child(2) { animation-delay: -5.5s; }
|
||
.char-card img {
|
||
display: block;
|
||
width: 100%;
|
||
aspect-ratio: 599 / 1212; /* exaktes Seitenverhältnis der Artworks — kein Zuschnitt */
|
||
object-fit: cover;
|
||
transition: transform .55s cubic-bezier(.2, .7, .3, 1);
|
||
}
|
||
/* eigener Glow pro Welt */
|
||
.char-card.dogfather { border-color: rgba(96, 175, 255, .30); }
|
||
.char-card.dogfather:hover,
|
||
.char-card.dogfather:focus-visible {
|
||
border-color: rgba(96, 175, 255, .75);
|
||
box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 70px rgba(96, 175, 255, .30);
|
||
}
|
||
.char-card.hasidog { border-color: rgba(199, 204, 209, .28); }
|
||
.char-card.hasidog:hover,
|
||
.char-card.hasidog:focus-visible {
|
||
border-color: rgba(199, 204, 209, .70);
|
||
box-shadow: 0 34px 70px rgba(0, 0, 0, .62), 0 0 70px rgba(143, 217, 234, .26);
|
||
}
|
||
.char-card:hover, .char-card:focus-visible { transform: translateY(-10px); }
|
||
.char-card:hover img, .char-card:focus-visible img { transform: scale(1.045); }
|
||
|
||
.char-meta {
|
||
position: absolute;
|
||
left: 0; right: 0; bottom: 0;
|
||
padding: 3.6rem .9rem 1.1rem;
|
||
text-align: center;
|
||
background: linear-gradient(to top,
|
||
rgba(4, 8, 12, .94) 14%, rgba(4, 8, 12, .58) 52%, transparent 100%);
|
||
}
|
||
.char-meta > span { display: block; }
|
||
.char-name {
|
||
font-family: var(--font-head);
|
||
font-weight: 800;
|
||
font-size: 1.02rem;
|
||
letter-spacing: .13em;
|
||
text-transform: uppercase;
|
||
color: #fff;
|
||
text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
|
||
}
|
||
.char-sub {
|
||
font-size: .76rem;
|
||
color: rgba(255, 255, 255, .70);
|
||
margin-top: .18rem;
|
||
}
|
||
.char-go {
|
||
font-size: .74rem;
|
||
font-weight: 700;
|
||
letter-spacing: .05em;
|
||
color: var(--accent);
|
||
margin-top: .5rem;
|
||
opacity: .85;
|
||
transition: opacity .3s ease, transform .3s ease;
|
||
}
|
||
.char-card:hover .char-go,
|
||
.char-card:focus-visible .char-go { opacity: 1; transform: translateX(3px); }
|
||
|
||
@keyframes char-float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-9px); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.char-card, .char-card img { animation: none; transition: none; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
SEITEN-HINTERGRÜNDE
|
||
|
||
Jede Seite kann ihr eigenes Artwork hinter den Kopfbereich legen. Das Bild
|
||
wird nicht fest im CSS hinterlegt, sondern pro Seite über zwei Variablen
|
||
gesetzt — so bleibt eine einzige Regel für alle Seiten:
|
||
|
||
<section class="hero page-bg"
|
||
style="--page-bg:url('assets/img/bg-x.jpg');
|
||
--page-bg-mobile:url('assets/img/bg-x-mobile.jpg');">
|
||
|
||
Aufbau: Bild (::before) → Abdunkelung (::after) → Inhalt.
|
||
Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und
|
||
der Rand sauber in die Seitenfarbe ausläuft.
|
||
========================================================================== */
|
||
/* ---- 1) Das Motiv trägt die GANZE Seite ----
|
||
Liegt fest hinter allem (position:fixed), leicht weichgezeichnet und
|
||
abgedunkelt. Dadurch ist das Bild beim Scrollen überall präsent, ohne
|
||
dass Texte und Karten darunter leiden. */
|
||
body.mit-hintergrund { background-color: transparent; }
|
||
body.mit-hintergrund::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: -2%;
|
||
z-index: -3;
|
||
background-image: var(--page-bg);
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
/* Weichzeichnen + abdunkeln: ruhiger Untergrund, der die Augen beim Lesen
|
||
nicht anstrengt. brightness(.45) statt vorher .62 — angepasst nach dem
|
||
BFSG/WCAG-Kontrast-Audit vom 04.08.2026 (axe-core fand color-contrast-
|
||
Verstöße auf allen Seiten mit Hintergrundfoto: helle Bildstellen
|
||
schimmerten durch die Abdunkelung, besonders im Hero-Bereich oben, wo
|
||
der ::after-Verlauf am schwächsten war). */
|
||
filter: blur(4px) brightness(.45) saturate(.95);
|
||
}
|
||
/* Abdunkelung für den Seitenkörper — bewusst kräftig, damit langes Lesen
|
||
angenehm bleibt UND Text zuverlässig AA-Kontrast erreicht (siehe oben).
|
||
Werte am 04.08.2026 zweimal nachgeschärft (80/92/95% → 90/97/99% →
|
||
94/98/99.5%, volle Deckung schon ab 30% statt erst bei 100%) — nach dem
|
||
zusätzlichen Hero-Schleier (oben) waren vereinzelt noch Elemente knapp
|
||
unterhalb des Heros betroffen (z.B. `.bewerben-side-label`,
|
||
`h2.text-center` auf team-modis.html), wo der Verlauf noch nicht voll
|
||
angekommen war. Mit axe-core auf allen betroffenen Seiten gegengeprüft. */
|
||
body.mit-hintergrund::after {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: -2;
|
||
pointer-events: none;
|
||
background: linear-gradient(to bottom,
|
||
color-mix(in srgb, var(--bg) 94%, transparent) 0%,
|
||
color-mix(in srgb, var(--bg) 98%, transparent) 30%,
|
||
color-mix(in srgb, var(--bg) 99.5%, transparent) 100%);
|
||
}
|
||
|
||
/* ---- 2) Kopfbereich: ECHTES <img> statt CSS-Hintergrund ----
|
||
Nach mehreren Anläufen mit background-size (cover schnitt Ränder ab,
|
||
contain ließ Lücken, "100% auto" schnitt oben/unten ab sobald die Box
|
||
nicht exakt im Bildseitenverhältnis war) die einzige Lösung, die IMMER
|
||
beides garantiert — volle Breite UND das komplette Bild sichtbar：
|
||
ein normales <img width:100% height:auto>, das seine Höhe selbst
|
||
bestimmt statt in eine vorgegebene Box gepresst zu werden. Es kann
|
||
dadurch gar nicht mehr beschnitten werden, ganz gleich welches
|
||
Seitenverhältnis das Foto hat.
|
||
|
||
<section class="hero page-bg">
|
||
<div class="hero-banner"><img src="assets/img/bg-x.jpg" alt="" /></div>
|
||
<div class="container">...</div>
|
||
</section>
|
||
|
||
Das Bild sitzt dadurch als eigener Banner OBERHALB der Überschrift
|
||
(statt als Hintergrund dahinter) — dafür garantiert zuverlässig, auf
|
||
jeder Seite, mit jedem Bild, ohne weitere Handarbeit. */
|
||
.hero-banner {
|
||
position: relative;
|
||
line-height: 0; /* verhindert einen Mini-Spalt unter dem Bild */
|
||
}
|
||
.hero-banner img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
/* Weicher Übergang unten, damit das Foto nicht hart in die Seite schneidet */
|
||
.hero-banner::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to bottom,
|
||
rgba(0, 0, 0, .05) 0%,
|
||
transparent 45%,
|
||
color-mix(in srgb, var(--bg) 55%, transparent) 82%,
|
||
var(--bg) 100%);
|
||
pointer-events: none;
|
||
}
|
||
.page-bg.hero {
|
||
padding: clamp(2.4rem, 5vw, 3.4rem) 0 clamp(3rem, 7vw, 4.5rem);
|
||
}
|
||
.page-bg.hero > .container { margin-inline: auto; }
|
||
|
||
@media (max-width: 760px) {
|
||
/* Der weichgezeichnete Grund-Layer darf ruhig den Handy-Zuschnitt nehmen —
|
||
der ist nur Stimmung im Hintergrund, wird nicht "als Bild" wahrgenommen.
|
||
Der scharfe .page-bg-Layer bleibt beim VOLLEN Original, damit auf dem
|
||
Handy garantiert nichts vom eigentlichen Motiv fehlt. */
|
||
body.mit-hintergrund::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
HIERARCHIE-PYRAMIDE — Team-Mitglieder stufenweise unter VanVan
|
||
|
||
Eine zentrale Linie läuft von oben (unter VanVans großer Karte) nach
|
||
unten durch alle Ebenen. Jede Ebene ist eine eigene, zentrierte Reihe;
|
||
die Kartengröße nimmt von Stufe zu Stufe leicht ab, wodurch die
|
||
Hierarchie auch optisch spürbar wird — oben groß und wichtig, nach
|
||
unten hin kompakter. An jeder Ebene sitzt ein leuchtender Knoten auf
|
||
der Linie, wie bei einem Organigramm.
|
||
========================================================================== */
|
||
.pyramid {
|
||
position: relative;
|
||
padding-top: 2.6rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: clamp(2.4rem, 5vw, 3.6rem);
|
||
}
|
||
/* Die zentrale, senkrechte Verbindungslinie */
|
||
.pyramid::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 2px;
|
||
transform: translateX(-50%);
|
||
background: linear-gradient(to bottom,
|
||
color-mix(in srgb, var(--accent) 70%, transparent),
|
||
color-mix(in srgb, var(--accent-2) 55%, transparent) 55%,
|
||
transparent 100%);
|
||
box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
|
||
}
|
||
.pyramid-tier {
|
||
position: relative;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
/* stretch statt flex-start: alle Karten einer Ebene werden gleich hoch,
|
||
egal ob der Name/die Rolle bei der einen Person länger ist als bei
|
||
der anderen (z.B. Diene/Funny) — Wunsch von Dogi. */
|
||
align-items: stretch;
|
||
gap: clamp(1rem, 3vw, 2rem);
|
||
}
|
||
/* Leuchtender Knoten pro Ebene, sitzt genau auf der Linie */
|
||
.pyramid-tier::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -1.5rem;
|
||
left: 50%;
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: var(--accent);
|
||
box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
|
||
0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
|
||
z-index: 2;
|
||
}
|
||
.pyramid-tier .profile-card {
|
||
width: 100%;
|
||
/* Flex-Spalte, damit der "Profil ansehen"-Button per margin-top:auto immer
|
||
ganz unten sitzt — dadurch wirken alle Karten einer Ebene gleich hoch
|
||
und gleich aufgebaut, auch wenn Name/Rolle unterschiedlich lang sind. */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
|
||
}
|
||
.pyramid-tier .profile-card .btn { margin-top: auto; }
|
||
.pyramid-tier .profile-card:hover { transform: translateY(-6px) scale(1.02); }
|
||
|
||
/* Fünf Größenstufen — je tiefer, desto kompakter */
|
||
.pyramid-tier[data-tier="1"] .profile-card { max-width: 260px; }
|
||
.pyramid-tier[data-tier="2"] .profile-card { max-width: 240px; }
|
||
.pyramid-tier[data-tier="3"] .profile-card { max-width: 222px; }
|
||
.pyramid-tier[data-tier="4"] .profile-card { max-width: 206px; }
|
||
.pyramid-tier[data-tier="5"] .profile-card { max-width: 192px; }
|
||
.pyramid-tier[data-tier="1"] .avatar { width: 108px; height: 108px; }
|
||
.pyramid-tier[data-tier="2"] .avatar { width: 98px; height: 98px; }
|
||
.pyramid-tier[data-tier="3"] .avatar { width: 90px; height: 90px; }
|
||
.pyramid-tier[data-tier="4"] .avatar { width: 82px; height: 82px; }
|
||
.pyramid-tier[data-tier="5"] .avatar { width: 76px; height: 76px; }
|
||
.pyramid-tier[data-tier="3"] .profile-card h3,
|
||
.pyramid-tier[data-tier="4"] .profile-card h3,
|
||
.pyramid-tier[data-tier="5"] .profile-card h3 { font-size: 1.02rem; }
|
||
.pyramid-tier[data-tier="4"] .role,
|
||
.pyramid-tier[data-tier="5"] .role { font-size: .78rem; }
|
||
|
||
@media (max-width: 700px) {
|
||
.pyramid-tier { gap: 1rem; }
|
||
.pyramid-tier .profile-card { max-width: min(78vw, 240px) !important; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
BEWERBEN-SHOWCASE — die beiden Kampagnen-Poster (Dogfather/Team-Dogi
|
||
links, Spicy Media rechts) flankieren die Bewerbungs-Spalten wie
|
||
Kinoplakate. Bewusst NICHT als verwaschener Hintergrund HINTER den
|
||
Karten (das hätte Lesbarkeit gekostet), sondern als eigene, scharfe
|
||
Bildspalten DANEBEN — dadurch bleiben die Poster in voller Qualität
|
||
sichtbar UND die Bewerbungs-Karten bleiben ungestört lesbar. Jedes
|
||
Poster fasst farblich zur jeweiligen Seite (blau/rot) und blendet nach
|
||
unten sanft aus, damit es nicht wie ein hart abgeschnittenes Rechteck
|
||
wirkt, sondern organisch in die Seite übergeht. */
|
||
.bewerben-showcase {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: clamp(1rem, 3vw, 2.2rem);
|
||
}
|
||
.bewerben-poster {
|
||
flex: 0 0 auto;
|
||
width: clamp(120px, 15vw, 220px);
|
||
aspect-ratio: 2 / 3;
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
position: relative;
|
||
align-self: center;
|
||
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
|
||
mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
|
||
transition: transform .25s ease, filter .25s ease;
|
||
}
|
||
.bewerben-poster img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
object-position: top center;
|
||
display: block;
|
||
}
|
||
.bewerben-poster::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: var(--radius);
|
||
pointer-events: none;
|
||
}
|
||
.bewerben-poster-blau {
|
||
box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 30px rgba(143, 217, 234, .22);
|
||
transform: rotate(-2.5deg);
|
||
}
|
||
.bewerben-poster-blau::after { box-shadow: inset 0 0 0 1px rgba(143, 217, 234, .35); }
|
||
.bewerben-poster-rot {
|
||
box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 30px rgba(217, 74, 92, .22);
|
||
transform: rotate(2.5deg);
|
||
}
|
||
.bewerben-poster-rot::after { box-shadow: inset 0 0 0 1px rgba(217, 74, 92, .35); }
|
||
.bewerben-poster:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); filter: brightness(1.08); }
|
||
@media (max-width: 1080px) {
|
||
.bewerben-poster { display: none; }
|
||
}
|
||
|
||
/* ==========================================================================
|
||
BEWERBEN-SPLIT — zwei Welten, zwei Spalten, kleine Trennwand in der Mitte
|
||
Passend zum Hintergrundbild: Community/Team Dogi (blau) links,
|
||
Agentur/Spicy Media (rot) rechts.
|
||
========================================================================== */
|
||
.bewerben-split {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: clamp(1.4rem, 4vw, 3.2rem);
|
||
max-width: 980px;
|
||
margin: 0 auto;
|
||
}
|
||
.bewerben-side {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 1.2rem;
|
||
}
|
||
.bewerben-side-label {
|
||
text-align: center;
|
||
font-family: var(--font-head);
|
||
font-weight: 800;
|
||
font-size: .74rem;
|
||
letter-spacing: .1em;
|
||
text-transform: uppercase;
|
||
margin-bottom: .2rem;
|
||
}
|
||
.bewerben-side-blau .bewerben-side-label { color: #8fd9ea; text-shadow: 0 0 14px rgba(143, 217, 234, .5); }
|
||
.bewerben-side-rot .bewerben-side-label { color: #d94a5c; text-shadow: 0 0 14px rgba(217, 74, 92, .5); }
|
||
.bewerben-side .card { height: auto; }
|
||
|
||
/* Die kleine Trennungswand: ein leuchtender Steg von blau nach rot,
|
||
mit einem Blitz-Knoten in der Mitte — passend zur Lichtgrenze im Bild. */
|
||
.bewerben-wall {
|
||
flex: none;
|
||
width: 3px;
|
||
align-self: stretch;
|
||
position: relative;
|
||
border-radius: 3px;
|
||
background: linear-gradient(to bottom,
|
||
transparent 0%,
|
||
#8fd9ea 18%,
|
||
#b285c9 50%,
|
||
#d94a5c 82%,
|
||
transparent 100%);
|
||
box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3);
|
||
}
|
||
/* "Reaktorkern"-Emblem: dunkle Mitte mit statischem Blitz, dahinter ein
|
||
EIGENER, separat rotierender Farbring (::before) — dadurch dreht sich
|
||
der Farbschein, ohne dass der Blitz selbst mitdreht/schief steht. */
|
||
.bewerben-wall span {
|
||
position: relative;
|
||
isolation: isolate;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.65rem;
|
||
background: radial-gradient(circle at 34% 28%, #232830, #0a0c10 72%);
|
||
border: 1px solid rgba(255, 255, 255, .2);
|
||
text-shadow: 0 0 10px rgba(255, 214, 140, .9), 0 0 4px rgba(0, 0, 0, .6);
|
||
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85),
|
||
0 0 0 6px rgba(255, 255, 255, .14),
|
||
0 0 26px rgba(143, 217, 234, .45),
|
||
0 0 26px rgba(217, 74, 92, .4);
|
||
}
|
||
.bewerben-wall span::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -5px;
|
||
z-index: -1;
|
||
border-radius: 50%;
|
||
background: conic-gradient(from 0deg,
|
||
#8fd9ea 0%, #b285c9 25%, #d94a5c 50%, #b285c9 75%, #8fd9ea 100%);
|
||
filter: blur(2px) saturate(1.3);
|
||
animation: bewerben-emblem-spin 5s linear infinite;
|
||
}
|
||
@keyframes bewerben-emblem-spin { to { transform: rotate(360deg); } }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.bewerben-wall span::before { animation: none; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.bewerben-split { flex-direction: column; gap: 2.2rem; width: 100%; }
|
||
.bewerben-side { width: 100%; }
|
||
.bewerben-side .card { width: 100%; box-sizing: border-box; }
|
||
.bewerben-wall {
|
||
width: 100%;
|
||
height: 3px;
|
||
background: linear-gradient(to right, transparent 0%, #8fd9ea 18%, #b285c9 50%, #d94a5c 82%, transparent 100%);
|
||
}
|
||
}
|
||
|
||
/* ==========================================================================
|
||
.card-duel — "Ultra"-Überarbeitung der vier Bewerbungs-Karten auf
|
||
bewerben.html (03.08.2026, auf Wunsch: "extrem geil, ultra von ultra,
|
||
trotzdem professionell", Farben MÜSSEN gleich bleiben). Nutzt bewusst
|
||
dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt
|
||
sind (Community-Karten inline babyblau/lila, Agentur-Karten automatisch
|
||
rot/orange vom Spicy-Media-Theme) — dadurch bleibt die Farbwelt exakt
|
||
erhalten, nur die Machart wird komplett neu: rotierender Farbring um
|
||
die Karte, driftender Aurora-Glow im Hintergrund, leuchtendes Icon-
|
||
Badge statt schlichtem Rahmen-Tag, dramatischer Hover-Lift mit
|
||
Farbexplosion. ========================================================================== */
|
||
.card-duel {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(140% 120% at 12% -15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
|
||
var(--card-bg);
|
||
border: 1px solid rgba(255, 255, 255, .14);
|
||
border-radius: calc(var(--radius) + 6px);
|
||
padding: 2.1rem 1.9rem 2.3rem;
|
||
transition: transform .35s cubic-bezier(.2, .8, .2, 1.25), box-shadow .35s ease, border-color .3s ease;
|
||
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
|
||
}
|
||
/* Rotierender, dünner Farbring exakt am Kartenrand entlang */
|
||
.card-duel::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -1.5px;
|
||
z-index: 0;
|
||
border-radius: inherit;
|
||
padding: 2px;
|
||
background: conic-gradient(from 0deg,
|
||
var(--accent) 0deg, var(--accent-2) 90deg, transparent 150deg, transparent 210deg, var(--accent) 270deg, var(--accent) 360deg);
|
||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
opacity: .6;
|
||
animation: card-duel-rotate 7s linear infinite;
|
||
}
|
||
/* Driftender Farbschein-Nebel im Hintergrund, hinter dem Text */
|
||
.card-duel::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -45%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%),
|
||
radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 58%);
|
||
filter: blur(26px) saturate(1.35);
|
||
opacity: .45;
|
||
animation: nav-cta-aurora 8s ease-in-out infinite alternate;
|
||
pointer-events: none;
|
||
}
|
||
.card-duel > * { position: relative; z-index: 2; }
|
||
.card-duel .tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .35rem;
|
||
background: color-mix(in srgb, var(--accent) 20%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
|
||
color: #fff;
|
||
font-weight: 700;
|
||
text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, black 20%);
|
||
box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
|
||
}
|
||
.card-duel h3 {
|
||
font-size: 1.55rem;
|
||
text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
|
||
}
|
||
.card-duel p { font-size: 1.04rem; }
|
||
.card-duel:hover {
|
||
transform: translateY(-9px) scale(1.025);
|
||
border-color: color-mix(in srgb, var(--accent) 70%, transparent);
|
||
box-shadow: 0 26px 54px rgba(0, 0, 0, .6),
|
||
0 0 44px color-mix(in srgb, var(--accent) 50%, transparent),
|
||
0 0 44px color-mix(in srgb, var(--accent-2) 40%, transparent);
|
||
}
|
||
@keyframes card-duel-rotate { to { transform: rotate(360deg); } }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.card-duel::before, .card-duel::after { animation: none; }
|
||
}
|
||
|
||
/* Trennwand + Emblem: von schlichtem Steg zu einem pulsierenden
|
||
"Energiekern" mit Doppelring und fließendem Lichtstrom aufgewertet. */
|
||
.bewerben-wall {
|
||
background-size: 100% 220%;
|
||
animation: bewerben-wall-flow 3.4s linear infinite;
|
||
}
|
||
@keyframes bewerben-wall-flow {
|
||
0% { background-position: 0 20%; }
|
||
100% { background-position: 0 -180%; }
|
||
}
|
||
.bewerben-wall span {
|
||
animation: bewerben-emblem-pulse 2.4s ease-in-out infinite;
|
||
}
|
||
@keyframes bewerben-emblem-pulse {
|
||
0%, 100% {
|
||
transform: translate(-50%, -50%) scale(1);
|
||
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 6px rgba(255, 255, 255, .14),
|
||
0 0 26px rgba(143, 217, 234, .45), 0 0 26px rgba(217, 74, 92, .4);
|
||
}
|
||
50% {
|
||
transform: translate(-50%, -50%) scale(1.08);
|
||
box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 7px rgba(255, 255, 255, .26),
|
||
0 0 42px rgba(143, 217, 234, .7), 0 0 42px rgba(217, 74, 92, .6);
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.bewerben-wall, .bewerben-wall span { animation: none; }
|
||
}
|
||
/* Seitenlabels: leuchtender Unterstrich statt schlichtem Text */
|
||
.bewerben-side-label {
|
||
position: relative;
|
||
padding-bottom: .55rem;
|
||
font-size: .8rem;
|
||
}
|
||
.bewerben-side-label::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 64px;
|
||
height: 2px;
|
||
border-radius: 2px;
|
||
}
|
||
.bewerben-side-blau .bewerben-side-label::after {
|
||
background: linear-gradient(90deg, transparent, #8fd9ea, transparent);
|
||
box-shadow: 0 0 10px rgba(143, 217, 234, .6);
|
||
}
|
||
.bewerben-side-rot .bewerben-side-label::after {
|
||
background: linear-gradient(90deg, transparent, #d94a5c, transparent);
|
||
box-shadow: 0 0 10px rgba(217, 74, 92, .6);
|
||
}
|
||
|
||
/* ==========================================================================
|
||
TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
|
||
========================================================================== */
|
||
.team-bg {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
}
|
||
.team-bg::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -2;
|
||
background-image: url("../img/team-dogi-bg.jpg");
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
/* Abdunkelung, damit Text und Avatare klar davor stehen und die Ränder
|
||
sauber in die Seite auslaufen */
|
||
.team-bg::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
background:
|
||
radial-gradient(ellipse 110% 80% at 50% 50%,
|
||
rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .80) 65%, rgba(0, 0, 0, .93) 100%),
|
||
linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
|
||
}
|
||
@media (max-width: 760px) {
|
||
.team-bg::before {
|
||
background-image: url("../img/team-dogi-bg-mobile.jpg");
|
||
}
|
||
}
|
||
|
||
/* Kurzes, dezentes Abblenden während ein Seitenwechsel geholt wird */
|
||
body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
|
||
|
||
/* ==========================================================================
|
||
MUSIK-KNOPF — kleiner schwebender Knopf unten rechts, auf jeder Seite
|
||
|
||
Klick öffnet ein Feld mit den Spotify-Playern von Hasidog und Van-Van.
|
||
Bewusst schwebend (position:fixed) statt als eigener Seitenabschnitt:
|
||
so ist die Musik überall mit einem Klick erreichbar, nimmt aber nirgends
|
||
Platz weg. Die Player werden erst beim ersten Öffnen geladen.
|
||
========================================================================== */
|
||
.music-widget {
|
||
position: fixed;
|
||
right: 22px;
|
||
bottom: 22px;
|
||
z-index: 120;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 12px;
|
||
}
|
||
/* Musik-Knopf: gleicher STIL wie der "Bewerben"-Knopf oben in der Leiste
|
||
(dunkler Grund + wandernde, weichgezeichnete Farbwolken + durchlaufender
|
||
Lichtschimmer) — aber mit den Chamäleon-Farben der jeweiligen Seite statt
|
||
der festen Regenbogen-Palette. "Chamäleon" heißt: main.js
|
||
(musikKnopfFarbenAnpassen) liest per Canvas das tatsächliche Bild der
|
||
Seite aus (Durchschnitts- + kräftigste Farbe daraus) und setzt
|
||
--music-c1/--music-c2 live. Ohne Bild (oder solange JS noch lädt) fällt
|
||
der Knopf sauber auf die normale Weltfarbe --accent/--accent-2 zurück.
|
||
Auf der Startseite und den Bewerben-Seiten überschreibt ein eigener Block
|
||
weiter unten die Farben fest auf die Bewerben-Palette (siehe dort). */
|
||
.music-toggle {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
width: 54px;
|
||
height: 54px;
|
||
flex: none;
|
||
border-radius: 999px;
|
||
font-size: 1.45rem;
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
|
||
background: #0b0e14;
|
||
border: 1px solid color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
|
||
0 0 24px color-mix(in srgb, var(--music-c1, var(--accent)) 35%, transparent);
|
||
transition: transform .25s ease, filter .25s ease, box-shadow .25s ease, border-color 1.1s ease;
|
||
}
|
||
.music-toggle::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -50%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--music-c1, var(--accent)) 92%, transparent), transparent 58%),
|
||
radial-gradient(circle at 75% 72%, color-mix(in srgb, var(--music-c2, var(--accent-2)) 92%, transparent), transparent 58%);
|
||
filter: blur(7px) saturate(1.3);
|
||
animation: btn-aurora 10s ease-in-out infinite alternate;
|
||
transition: background 1.1s ease;
|
||
}
|
||
.music-toggle::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: 999px;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: btn-shimmer 5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.music-toggle:hover,
|
||
.music-toggle:focus-visible {
|
||
transform: translateY(-2px) scale(1.05);
|
||
filter: brightness(1.12);
|
||
box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
|
||
0 0 34px color-mix(in srgb, var(--music-c1, var(--accent)) 55%, transparent);
|
||
}
|
||
.music-widget.open .music-toggle { transform: rotate(12deg); }
|
||
.music-toggle span { position: relative; z-index: 2; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.music-toggle::before, .music-toggle::after { animation: none; }
|
||
}
|
||
|
||
/* Auf der Startseite UND den Bewerben-Seiten bekommt der Musik-Knopf
|
||
dieselbe Polarlicht-Farbe wie der "Bewerben"-Knopf oben in der Leiste
|
||
(statt der Chamäleon-Farben vom Seitenbild) — das sind die beiden
|
||
Stellen, an denen bewusst "alle Welten auf einmal" gezeigt werden. */
|
||
body.bewerben-seite .music-toggle,
|
||
body.start-seite .music-toggle {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
background: #0b0e14;
|
||
border-color: rgba(255, 255, 255, .18);
|
||
color: #fff;
|
||
}
|
||
body.bewerben-seite .music-toggle::before,
|
||
body.start-seite .music-toggle::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -40%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 20% 25%, rgba(143, 217, 234, .95), transparent 55%),
|
||
radial-gradient(circle at 45% 75%, rgba(139, 92, 246, .9), transparent 58%),
|
||
radial-gradient(circle at 80% 30%, rgba(217, 74, 92, .95), transparent 55%),
|
||
radial-gradient(circle at 60% 85%, rgba(232, 147, 58, .55), transparent 55%);
|
||
filter: blur(6px) saturate(1.35);
|
||
animation: nav-cta-aurora 9s ease-in-out infinite alternate;
|
||
}
|
||
body.bewerben-seite .music-toggle::after,
|
||
body.start-seite .music-toggle::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: 999px;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: nav-cta-shimmer 4.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
body.bewerben-seite .music-toggle:hover,
|
||
body.bewerben-seite .music-toggle:focus-visible,
|
||
body.start-seite .music-toggle:hover,
|
||
body.start-seite .music-toggle:focus-visible {
|
||
box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
|
||
0 0 22px rgba(143, 217, 234, .3),
|
||
0 0 22px rgba(217, 74, 92, .28);
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
body.bewerben-seite .music-toggle::before,
|
||
body.bewerben-seite .music-toggle::after,
|
||
body.start-seite .music-toggle::before,
|
||
body.start-seite .music-toggle::after { animation: none; }
|
||
}
|
||
|
||
.music-panel {
|
||
width: min(330px, calc(100vw - 44px));
|
||
max-height: min(74vh, 640px);
|
||
overflow-y: auto;
|
||
padding: 1rem 1.1rem 1.2rem;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background: var(--card-bg);
|
||
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
|
||
animation: music-panel-in .22s ease-out;
|
||
}
|
||
.music-panel[hidden] { display: none; }
|
||
@keyframes music-panel-in {
|
||
from { opacity: 0; transform: translateY(10px) scale(.97); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
.music-panel-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: .6rem;
|
||
}
|
||
.music-panel-head strong { font-size: .95rem; }
|
||
.music-close {
|
||
background: none;
|
||
border: 0;
|
||
color: var(--text-muted);
|
||
font-size: 1rem;
|
||
line-height: 1;
|
||
padding: .2rem .3rem;
|
||
cursor: pointer;
|
||
border-radius: 6px;
|
||
}
|
||
.music-close:hover { color: var(--accent); }
|
||
.music-artist-label {
|
||
margin: .9rem 0 .4rem;
|
||
font-size: .7rem;
|
||
font-weight: 800;
|
||
letter-spacing: .06em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
}
|
||
/* Spotify bringt seinen eigenen abgerundeten Rahmen mit — hier nur Größe setzen. */
|
||
.music-panel iframe {
|
||
display: block;
|
||
width: 100%;
|
||
border: 0;
|
||
border-radius: 12px;
|
||
}
|
||
@media (max-width: 620px) {
|
||
.music-widget { right: 14px; bottom: 14px; }
|
||
.music-toggle { width: 48px; height: 48px; font-size: 1.25rem; }
|
||
}
|
||
@media print { .music-widget { display: none !important; } }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.music-panel { animation: none; }
|
||
.music-toggle { transition: none; }
|
||
}
|
||
|
||
/* =========================================================================
|
||
Vorschau-Umschalter (nur für Dogi/VanVan, siehe main.js
|
||
renderVorschauSchalter/gate-worker.js) — unten LINKS, spiegelbildlich zum
|
||
Musik-Knopf unten rechts, exakt dieselbe Bauart (Kreisknopf mit
|
||
wandernden Farbwolken + Lichtschimmer, aufklappbares Panel). Eigenes,
|
||
festes Farbpaar (Gold/Lila, das Supporter-Abo-Motiv) statt der
|
||
Chamäleon-Farben des Musik-Knopfs — dieser Knopf soll bewusst IMMER
|
||
gleich aussehen, unabhängig vom Seitenbild. Symbol: 🎭 (Theatermasken —
|
||
"als jemand anderes ansehen", passt zum Rollen-Vorschau-Zweck). Nutzer-
|
||
Feedback 03.08.2026: statt einer dauerhaft sichtbaren Text-Knopfleiste
|
||
sollte es "so ein Button wie bei VanVan" sein, der sich erst bei Klick
|
||
öffnet. ========================================================== */
|
||
.vorschau-widget {
|
||
position: fixed;
|
||
left: 22px;
|
||
bottom: 22px;
|
||
z-index: 120;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
}
|
||
.vorschau-toggle {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
width: 54px;
|
||
height: 54px;
|
||
flex: none;
|
||
border-radius: 999px;
|
||
font-size: 1.45rem;
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
|
||
background: #0b0e14;
|
||
border: 1px solid rgba(212, 175, 55, .55);
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, .45), 0 0 24px rgba(212, 175, 55, .3);
|
||
transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
|
||
}
|
||
.vorschau-toggle::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: -50%;
|
||
z-index: 0;
|
||
background:
|
||
radial-gradient(circle at 25% 30%, rgba(255, 214, 102, .95), transparent 58%),
|
||
radial-gradient(circle at 75% 72%, rgba(139, 92, 246, .9), transparent 58%);
|
||
filter: blur(7px) saturate(1.3);
|
||
animation: btn-aurora 10s ease-in-out infinite alternate;
|
||
}
|
||
.vorschau-toggle::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 1;
|
||
border-radius: 999px;
|
||
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 49%, transparent 63%);
|
||
background-size: 240% 100%;
|
||
mix-blend-mode: overlay;
|
||
animation: btn-shimmer 5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
.vorschau-toggle:hover, .vorschau-toggle:focus-visible {
|
||
transform: translateY(-2px) scale(1.05);
|
||
filter: brightness(1.12);
|
||
box-shadow: 0 16px 38px rgba(0, 0, 0, .5), 0 0 34px rgba(212, 175, 55, .5);
|
||
}
|
||
.vorschau-widget.open .vorschau-toggle { transform: rotate(-12deg); }
|
||
.vorschau-toggle span { position: relative; z-index: 2; }
|
||
@media (prefers-reduced-motion: reduce) { .vorschau-toggle::before, .vorschau-toggle::after { animation: none; } }
|
||
|
||
.vorschau-panel {
|
||
width: min(260px, calc(100vw - 44px));
|
||
padding: 1rem 1.1rem 1.1rem;
|
||
border-radius: var(--radius);
|
||
border: 1px solid var(--border);
|
||
background: var(--card-bg);
|
||
box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
|
||
animation: music-panel-in .22s ease-out;
|
||
}
|
||
.vorschau-panel[hidden] { display: none; }
|
||
.vorschau-panel-head {
|
||
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
|
||
margin-bottom: .8rem;
|
||
}
|
||
.vorschau-panel-head strong { font-size: .92rem; color: #ffe9a8; }
|
||
.vorschau-close {
|
||
background: none; border: 0; color: var(--text-muted); font-size: 1rem;
|
||
line-height: 1; padding: .2rem .3rem; cursor: pointer; border-radius: 6px;
|
||
}
|
||
.vorschau-close:hover { color: var(--accent); }
|
||
.vorschau-optionen { display: flex; flex-direction: column; gap: .4rem; }
|
||
.vorschau-optionen button {
|
||
display: block; width: 100%; text-align: left; font-size: .88rem; font-weight: 600;
|
||
padding: .6rem .8rem; border-radius: 9px; cursor: pointer;
|
||
background: transparent; border: 1px solid transparent; color: var(--text-muted);
|
||
transition: border-color .15s ease, background .15s ease, color .15s ease;
|
||
}
|
||
.vorschau-optionen button:hover { border-color: var(--border); color: var(--text); }
|
||
.vorschau-optionen button.aktiv {
|
||
border-color: rgba(212, 175, 55, .6); color: #ffe9a8; background: rgba(212, 175, 55, .1);
|
||
}
|
||
@media (max-width: 620px) {
|
||
.vorschau-widget { left: 14px; bottom: 14px; }
|
||
.vorschau-toggle { width: 48px; height: 48px; font-size: 1.25rem; }
|
||
}
|
||
@media print { .vorschau-widget { display: none !important; } }
|
||
@media (prefers-reduced-motion: reduce) { .vorschau-panel { animation: none; } }
|
||
|
||
/* ---------- Live-Status-Punkt ---------- */
|
||
.live-dot {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background: #e05260; /* rot = offline (Standard) */
|
||
box-shadow: 0 0 8px rgba(224, 82, 96, .55);
|
||
margin-right: .45rem;
|
||
vertical-align: middle;
|
||
transition: background .3s ease, box-shadow .3s ease;
|
||
}
|
||
.live-dot.is-live {
|
||
background: #22c55e; /* grün = live */
|
||
animation: live-pulse 1.6s infinite;
|
||
}
|
||
/* Solange der Status noch geladen wird: neutral grau, damit nie kurz
|
||
fälschlich "offline" aufblitzt. */
|
||
.live-dot.is-unknown {
|
||
background: #6b7280;
|
||
box-shadow: none;
|
||
}
|
||
@keyframes live-pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
|
||
70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.live-dot.is-live { animation: none; }
|
||
}
|
||
|
||
/* ---------- Badges / Hierarchy ---------- */
|
||
.badge { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .6rem; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text-muted); }
|
||
.badge.rank-1 { border-color: var(--accent); color: var(--accent); }
|
||
|
||
/* ---------- QR ---------- */
|
||
.qr-card { text-align: center; }
|
||
.qr-card .img-placeholder { width: 160px; height: 160px; margin: 0 auto 1rem; aspect-ratio: auto; }
|
||
|
||
/* ---------- Utility ---------- */
|
||
.text-center { text-align: center; }
|
||
.mt-0 { margin-top: 0; }
|
||
.muted { color: var(--text-muted); }
|
||
.small { font-size: .85rem; }
|
||
.todo-note {
|
||
border: 1px dashed var(--accent-2);
|
||
background: rgba(139,92,246,.08);
|
||
padding: 1rem 1.2rem;
|
||
border-radius: 10px;
|
||
font-size: .85rem;
|
||
color: var(--text-muted);
|
||
margin: 1.5rem 0;
|
||
}
|
||
.todo-note strong { color: var(--accent-2); }
|
||
|
||
/* ===================================================================
|
||
Streamplan — "Live-Radar" (20.08.2026, Nutzer-Wunsch: "soll viel
|
||
geiler und spezieller sein, überrasch mich"). Ein 24-Stunden-Ziffernblatt
|
||
als SVG: der feste 20-Uhr-Termin leuchtet dauerhaft als Fixpunkt, ein
|
||
"Jetzt"-Zeiger bewegt sich in Echtzeit mit der tatsächlichen Uhrzeit,
|
||
ein sanft rotierender Lichtschein sorgt für Atmosphäre. Schaltet live
|
||
auf Rot/Puls um, sobald DogFather laut /live-status wirklich sendet —
|
||
sonst zählt ein echter Sekunden-Countdown zum nächsten 20-Uhr-Termin
|
||
runter. Bewusst augenschonend: gedeckte Farben, langsame, sanfte
|
||
Animation, kompletter Stillstand bei prefers-reduced-motion. ================================================================= */
|
||
/* Reihe für 1-2 Uhren nebeneinander (20.08.2026: zweite Uhr für ein
|
||
"spezielles Live-Event", siehe assets/js/streamplan.js) — bricht auf
|
||
schmalen Bildschirmen automatisch untereinander um. */
|
||
.stream-radar-reihe {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
gap: 2.4rem;
|
||
margin-top: 1.4rem;
|
||
}
|
||
/* .stream-radar-wrap setzt selbst "display", das schlägt bei gleicher
|
||
Spezifität die eingebaute [hidden]-Regel des Browsers (identisches,
|
||
inzwischen mehrfach gefundenes Muster auf dieser Seite) — deshalb hier
|
||
explizit VOR der Klassenregel. */
|
||
.stream-radar-wrap[hidden] { display: none; }
|
||
.stream-radar-wrap { display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
|
||
.stream-radar {
|
||
position: relative;
|
||
width: min(300px, 70vw);
|
||
aspect-ratio: 1;
|
||
margin: 0 auto;
|
||
}
|
||
.stream-radar-sweep {
|
||
position: absolute;
|
||
inset: -6%;
|
||
border-radius: 50%;
|
||
background: conic-gradient(from 0deg,
|
||
transparent 0deg, rgba(143, 217, 234, .28) 40deg, transparent 90deg,
|
||
transparent 200deg, rgba(232, 196, 101, .22) 250deg, transparent 300deg,
|
||
transparent 320deg, rgba(139, 92, 246, .24) 350deg, transparent 360deg);
|
||
animation: stream-radar-rotate 16s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
/* Farbvariante fürs spezielle Live-Event (Nutzer-Wunsch "bissl Farbe") —
|
||
Magenta/Violett/Gold statt Cyan/Violett/Gold, damit die zweite Uhr auch
|
||
auf den ersten Blick als "etwas Besonderes" erkennbar ist. */
|
||
.stream-radar.event-spezial .stream-radar-sweep {
|
||
background: conic-gradient(from 0deg,
|
||
transparent 0deg, rgba(255, 92, 180, .26) 40deg, transparent 90deg,
|
||
transparent 200deg, rgba(232, 196, 101, .22) 250deg, transparent 300deg,
|
||
transparent 320deg, rgba(139, 92, 246, .28) 350deg, transparent 360deg);
|
||
}
|
||
@keyframes stream-radar-rotate { to { transform: rotate(360deg); } }
|
||
@media (prefers-reduced-motion: reduce) { .stream-radar-sweep { animation: none; } }
|
||
.stream-radar-dial { position: relative; width: 100%; height: 100%; display: block; }
|
||
/* Bunter Verlauf statt reinem Grau-Ton auf dem äußeren Ring (Nutzer-Wunsch
|
||
"bissl Farbe") — Farbverlauf steckt als <linearGradient> direkt im SVG
|
||
jeder Uhr (siehe streamplan.html), hier nur die Basiswerte/Deckkraft. */
|
||
.radar-ring-outer { fill: none; stroke-width: 2; opacity: .8; }
|
||
.radar-ring-inner { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
|
||
.radar-tick { stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; }
|
||
.radar-tick-major { stroke: rgba(255, 255, 255, .5); stroke-width: 2.2; }
|
||
.radar-tick-label { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body, inherit); }
|
||
.radar-fixmarker-dot {
|
||
fill: #e8c465;
|
||
filter: drop-shadow(0 0 6px rgba(232, 196, 101, .9)) drop-shadow(0 0 14px rgba(232, 196, 101, .5));
|
||
animation: stream-radar-fixpuls 3.2s ease-in-out infinite;
|
||
}
|
||
@keyframes stream-radar-fixpuls { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
|
||
@media (prefers-reduced-motion: reduce) { .radar-fixmarker-dot { animation: none; opacity: .9; } }
|
||
.radar-now-hand {
|
||
stroke: var(--accent);
|
||
stroke-width: 2.5;
|
||
stroke-linecap: round;
|
||
filter: drop-shadow(0 0 4px var(--accent));
|
||
transition: x2 .6s ease, y2 .6s ease;
|
||
}
|
||
.radar-now-dot {
|
||
fill: var(--accent);
|
||
filter: drop-shadow(0 0 6px var(--accent));
|
||
transition: cx .6s ease, cy .6s ease;
|
||
}
|
||
.stream-radar.ist-live .radar-now-hand,
|
||
.stream-radar.ist-live .radar-now-dot { stroke: #ff5c72; fill: #ff5c72; filter: drop-shadow(0 0 8px rgba(255, 92, 114, .8)); }
|
||
.radar-center-dot { fill: var(--text); opacity: .8; }
|
||
.stream-radar-center {
|
||
position: absolute;
|
||
inset: 24%;
|
||
border-radius: 50%;
|
||
background: rgba(8, 10, 14, .82);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: .5rem;
|
||
gap: .25rem;
|
||
}
|
||
.stream-radar-dot {
|
||
width: 10px; height: 10px;
|
||
border-radius: 50%;
|
||
background: var(--text-muted);
|
||
margin-bottom: .2rem;
|
||
}
|
||
.stream-radar.ist-live .stream-radar-dot { background: #ff5c72; box-shadow: 0 0 10px rgba(255, 92, 114, .8); animation: stream-radar-live-puls 1.4s ease-in-out infinite; }
|
||
@keyframes stream-radar-live-puls { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .75; } }
|
||
@media (prefers-reduced-motion: reduce) { .stream-radar.ist-live .stream-radar-dot { animation: none; } }
|
||
.stream-radar-status { font-size: 1rem; font-weight: 800; color: var(--text); line-height: 1.25; }
|
||
.stream-radar-countdown {
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 1.55rem;
|
||
font-weight: 900;
|
||
letter-spacing: .02em;
|
||
color: var(--accent);
|
||
}
|
||
.stream-radar.ist-live .stream-radar-countdown { color: #ff5c72; }
|
||
.stream-radar-sub { font-size: .74rem; color: var(--text-muted); }
|
||
/* Farbvariante fürs spezielle Live-Event: der Fixpunkt ist hier nicht der
|
||
tägliche 20-Uhr-Termin, sondern der eigene Zieltermin -- Magenta statt
|
||
Gold, damit man beide Uhren auf einen Blick unterscheidet. */
|
||
.stream-radar.event-spezial .radar-fixmarker-dot {
|
||
fill: #ff5cb8;
|
||
filter: drop-shadow(0 0 6px rgba(255, 92, 184, .9)) drop-shadow(0 0 14px rgba(255, 92, 184, .5));
|
||
}
|
||
.stream-radar.event-spezial:not(.ist-live) .radar-now-hand,
|
||
.stream-radar.event-spezial:not(.ist-live) .radar-now-dot { stroke: #c9a6ff; fill: #c9a6ff; filter: drop-shadow(0 0 5px rgba(201, 166, 255, .8)); }
|
||
.stream-radar.event-spezial:not(.ist-live) .stream-radar-countdown { color: #ff5cb8; }
|
||
.stream-radar-titel { font-size: .95rem; font-weight: 800; color: #ff9ed4; margin-bottom: .3rem; }
|
||
/* .btn setzt selbst "display", das schlägt bei gleicher Spezifität die
|
||
eingebaute [hidden]-Regel des Browsers (identisches Muster wie bei
|
||
.jahres-event-card weiter oben) — deshalb hier explizit. */
|
||
.stream-radar-watch-btn[hidden] { display: none; }
|
||
.stream-radar-watch-btn { margin-top: 1.1rem; }
|
||
.stream-radar-hinweis { margin-top: 1rem; opacity: .8; }
|
||
|
||
/* ===================================================================
|
||
"Stimmen" — eigene Nachricht einreichen (20.08.2026, Nutzer-Wunsch:
|
||
"eine richtig geile kachel ... das wird mega persoenlich zu den fans,
|
||
bitte wirklich krass geil speziell"). Warmer Babyblau/Rosé/Lila-
|
||
Farbverlauf statt der neutralen Standardkarte, wandernder Lichtschein
|
||
am Rand (dieselbe Zwei-Ebenen-Technik wie schon an mehreren Stellen
|
||
dieses Projekts, siehe .supp-card::before) — bewusst augenschonend
|
||
(gedeckte Farben, sanfte Bewegung, respektiert reduzierte Bewegung). ================================================================= */
|
||
/* Nutzer-Wunsch 20.08.2026 (2. Runde): "die kachel soll noch spezieller und
|
||
geiler aussehen". Deutlich aufgewertet gegenüber der ersten Fassung:
|
||
wandernder Farbverlauf-Rahmen rundherum (Zwei-Ebenen-Technik mit
|
||
background-position statt eines rotierenden Rings — siehe dokumentierte
|
||
Projekt-Lektion: rotierende Masken verzerren auf eckigen Flächen),
|
||
schwebende Herz-Partikel im Hintergrund, Medaillon statt nacktem Emoji,
|
||
Farbverlauf-Überschrift und Eingabefelder, die beim Tippen aufleuchten.
|
||
Bleibt trotzdem augenschonend: gedeckte Töne, langsame Bewegungen,
|
||
vollständiger Stillstand bei prefers-reduced-motion. */
|
||
.stimmen-einreichen-kachel {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
max-width: 580px;
|
||
margin: 0 auto;
|
||
padding: 2.4rem 2.4rem 2.6rem;
|
||
border-radius: calc(var(--radius) + 4px);
|
||
background:
|
||
radial-gradient(ellipse at 12% 0%, rgba(255, 154, 208, .13), transparent 58%),
|
||
radial-gradient(ellipse at 88% 100%, rgba(143, 217, 234, .13), transparent 58%),
|
||
linear-gradient(180deg, rgba(24, 34, 51, .96), rgba(14, 20, 32, .98));
|
||
box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 50px rgba(143, 217, 234, .06);
|
||
}
|
||
/* Farbverlauf-Rahmen: zwei Ebenen, nur die Hintergrundposition wandert. */
|
||
.stimmen-einreichen-kachel::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
border-radius: inherit;
|
||
padding: 1.5px;
|
||
background: linear-gradient(115deg, rgba(255,154,208,.75), rgba(143,217,234,.75), rgba(199,204,209,.5), rgba(255,154,208,.75));
|
||
background-size: 300% 100%;
|
||
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
||
mask-composite: exclude;
|
||
animation: stimmen-rahmen-wandert 9s linear infinite;
|
||
}
|
||
@keyframes stimmen-rahmen-wandert { to { background-position: 300% 0; } }
|
||
/* Schwebende Herz-Partikel — reines CSS, keine zusätzlichen Elemente nötig. */
|
||
.stimmen-einreichen-glanz {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: -1;
|
||
pointer-events: none;
|
||
background-image:
|
||
radial-gradient(circle, rgba(255,154,208,.5) 2px, transparent 3px),
|
||
radial-gradient(circle, rgba(143,217,234,.45) 2px, transparent 3px),
|
||
radial-gradient(circle, rgba(255,154,208,.35) 1.5px, transparent 3px);
|
||
background-size: 190px 190px, 260px 260px, 140px 140px;
|
||
background-position: 12% 18%, 78% 62%, 44% 88%;
|
||
animation: stimmen-partikel-treiben 16s ease-in-out infinite alternate;
|
||
}
|
||
@keyframes stimmen-partikel-treiben {
|
||
from { background-position: 12% 18%, 78% 62%, 44% 88%; opacity: .55; }
|
||
to { background-position: 18% 26%, 71% 54%, 50% 79%; opacity: .95; }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.stimmen-einreichen-kachel::before, .stimmen-einreichen-glanz { animation: none; }
|
||
}
|
||
.stimmen-einreichen-kopf { text-align: center; margin-bottom: 1.8rem; }
|
||
/* Medaillon statt nacktem Emoji: Kreis mit Farbschein und sanftem Puls. */
|
||
.stimmen-einreichen-herz {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 74px; height: 74px;
|
||
border-radius: 50%;
|
||
font-size: 2.1rem;
|
||
background: radial-gradient(circle at 35% 30%, rgba(255,154,208,.28), rgba(143,217,234,.12) 70%);
|
||
border: 1.5px solid rgba(255, 154, 208, .45);
|
||
box-shadow: 0 0 26px rgba(255, 154, 208, .3), inset 0 0 22px rgba(255, 154, 208, .12);
|
||
animation: stimmen-herz-puls 3.4s ease-in-out infinite;
|
||
}
|
||
@keyframes stimmen-herz-puls {
|
||
0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(255,154,208,.22), inset 0 0 20px rgba(255,154,208,.1); }
|
||
50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(255,154,208,.45), inset 0 0 26px rgba(255,154,208,.18); }
|
||
}
|
||
@media (prefers-reduced-motion: reduce) { .stimmen-einreichen-herz { animation: none; } }
|
||
.stimmen-einreichen-kopf h2 {
|
||
margin: .9rem 0 .6rem;
|
||
background: linear-gradient(100deg, #ffd0e8, #ffffff 40%, #a8e4f2);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.stimmen-einreichen-kopf p { color: var(--text-muted); }
|
||
#stimmen-formular .field { margin-bottom: 1.1rem; }
|
||
/* Eingabefelder leuchten beim Tippen in der Kachel-Farbwelt auf. */
|
||
#stimmen-formular .field input,
|
||
#stimmen-formular .field textarea {
|
||
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
||
}
|
||
#stimmen-formular .field input:focus,
|
||
#stimmen-formular .field textarea:focus {
|
||
outline: none;
|
||
border-color: rgba(255, 154, 208, .75);
|
||
box-shadow: 0 0 0 3px rgba(255, 154, 208, .14), 0 0 22px rgba(255, 154, 208, .18);
|
||
background: rgba(255, 255, 255, .06);
|
||
}
|
||
.stimmen-erfolg { color: #baf7d6; font-size: .9rem; margin-top: 1rem; display: none; text-align: center; }
|
||
.stimmen-erfolg.zeige { display: block; }
|
||
.stimmen-fehler { color: #ff9a9a; font-size: .88rem; margin-top: 1rem; display: none; text-align: center; }
|
||
.stimmen-fehler.zeige { display: block; }
|
||
|
||
/* Freigegebene Stimmen (20.08.2026, 2. Runde: "und auch die die danach
|
||
kommen wenn ich sie eingebe die sollen viel geiler sein"): echte
|
||
Präsentationskarten statt schlichter Kästen — Farbschein-Bloom in der
|
||
Ecke, großes Anführungszeichen als Wasserzeichen, farbige Akzentlinie
|
||
oben, Avatar-Medaillon mit dem Anfangsbuchstaben, TikTok-Handle als
|
||
eigener Chip. Beim Überfahren hebt sich die Karte leicht an. */
|
||
.stimmen-karte {
|
||
position: relative;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 2rem 1.8rem 1.6rem;
|
||
border-radius: calc(var(--radius) - 2px);
|
||
border: 1px solid rgba(143, 217, 234, .22);
|
||
background:
|
||
radial-gradient(ellipse at 100% 0%, rgba(255, 154, 208, .1), transparent 55%),
|
||
linear-gradient(180deg, rgba(24, 34, 51, .9), rgba(15, 21, 33, .95));
|
||
box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
|
||
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
|
||
}
|
||
.stimmen-karte:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(255, 154, 208, .5);
|
||
box-shadow: 0 22px 52px rgba(0, 0, 0, .42), 0 0 30px rgba(255, 154, 208, .14);
|
||
}
|
||
/* Farbige Akzentlinie oben — greift die Farbwelt der Einreich-Kachel auf. */
|
||
.stimmen-karte::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 2.5px;
|
||
background: linear-gradient(90deg, rgba(255,154,208,.9), rgba(143,217,234,.9));
|
||
}
|
||
/* Großes Anführungszeichen als dezentes Wasserzeichen im Hintergrund. */
|
||
.stimmen-karte::before {
|
||
content: "„";
|
||
position: absolute;
|
||
top: -.9rem; right: .6rem;
|
||
z-index: -1;
|
||
font-size: 8rem;
|
||
font-family: Georgia, serif;
|
||
color: rgba(143, 217, 234, .09);
|
||
line-height: 1;
|
||
pointer-events: none;
|
||
}
|
||
.stimmen-karte-text {
|
||
position: relative;
|
||
z-index: 1;
|
||
flex: 1;
|
||
margin: 0 0 1.3rem;
|
||
line-height: 1.75;
|
||
font-size: 1.02rem;
|
||
color: var(--text);
|
||
}
|
||
.stimmen-karte-fuss {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: .7rem;
|
||
padding-top: 1rem;
|
||
border-top: 1px solid rgba(255, 255, 255, .07);
|
||
}
|
||
/* Avatar-Medaillon mit dem Anfangsbuchstaben (wird in stimmen.js gefüllt). */
|
||
.stimmen-karte-avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px; height: 40px;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
font-weight: 800;
|
||
font-size: 1rem;
|
||
color: #0d1420;
|
||
background: linear-gradient(135deg, #ffd0e8, #a8e4f2);
|
||
box-shadow: 0 0 16px rgba(255, 154, 208, .3);
|
||
}
|
||
/* Gewähltes Profilbild statt Anfangsbuchstabe (21.08.2026). Erbt Größe und
|
||
runde Form von .stimmen-karte-avatar oben, ersetzt nur Füllung/Farbe. */
|
||
.stimmen-karte-avatar-bild {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
background: rgba(255, 255, 255, .05);
|
||
box-shadow: 0 0 14px rgba(212, 175, 55, .25);
|
||
}
|
||
.stimmen-karte-avatar-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* ---------- Profilbild-Auswahl im Einreichen-Formular (21.08.2026) ----------
|
||
Nutzer-Wunsch: "paar geile bilder zum aussuchen ... das soll denen auch
|
||
als möglichkeit gegeben sein". Kachelraster, das sich der Breite anpasst;
|
||
die getroffene Wahl bekommt einen goldenen Ring statt nur einer leichten
|
||
Aufhellung — sonst ist auf dunklem Grund kaum erkennbar, was gewählt ist. */
|
||
.stimmen-avatar-titel {
|
||
display: block;
|
||
font-size: .82rem; font-weight: 700; letter-spacing: .04em;
|
||
text-transform: uppercase; color: var(--text-muted);
|
||
margin-bottom: .25rem;
|
||
}
|
||
.stimmen-avatar-hinweis { margin: 0 0 .7rem; }
|
||
.stimmen-avatar-wahl {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
|
||
gap: .6rem;
|
||
}
|
||
.stimmen-avatar-kachel {
|
||
position: relative;
|
||
aspect-ratio: 1;
|
||
padding: 0;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background: rgba(255, 255, 255, .04);
|
||
border: 2px solid rgba(255, 255, 255, .12);
|
||
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
|
||
}
|
||
.stimmen-avatar-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.stimmen-avatar-keins {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 100%; height: 100%;
|
||
font-size: 1.15rem; color: var(--text-muted);
|
||
}
|
||
.stimmen-avatar-kachel:hover { transform: translateY(-2px); border-color: rgba(255, 233, 168, .6); }
|
||
.stimmen-avatar-kachel.aktiv {
|
||
border-color: #ffe9a8;
|
||
box-shadow: 0 0 0 2px rgba(212, 175, 55, .45), 0 0 18px rgba(212, 175, 55, .4);
|
||
}
|
||
.stimmen-avatar-kachel:focus-visible { outline: 2px solid #ffe9a8; outline-offset: 3px; }
|
||
/* "Eigenes Bild"-Kachel (21.08.2026): gestrichelter Rand, damit sofort
|
||
erkennbar ist, dass hier noch nichts drin ist und etwas hinzugefügt
|
||
werden kann -- im Unterschied zu den fertigen Auswahlbildern daneben.
|
||
Sobald ein Bild hochgeladen wurde, ersetzt das <img> das Plus-Zeichen
|
||
und die Kachel sieht aus wie die anderen. */
|
||
.stimmen-avatar-eigenes { border-style: dashed; border-color: rgba(255, 233, 168, .45); }
|
||
.stimmen-avatar-eigenes:has(img) { border-style: solid; }
|
||
.stimmen-avatar-plus {
|
||
display: flex; align-items: center; justify-content: center;
|
||
width: 100%; height: 100%;
|
||
font-size: 1.3rem; line-height: 1; color: #ffe9a8;
|
||
}
|
||
/* Während des Hochladens: kurz gedimmt, damit klar ist, dass etwas läuft. */
|
||
.stimmen-avatar-eigenes.laedt { opacity: .5; pointer-events: none; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.stimmen-avatar-kachel { transition: none; }
|
||
.stimmen-avatar-kachel:hover { transform: none; }
|
||
}
|
||
|
||
.stimmen-karte-namen { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
|
||
.stimmen-karte-name { font-weight: 700; color: var(--text); font-size: .95rem; }
|
||
.stimmen-karte-tiktok {
|
||
align-self: flex-start;
|
||
font-size: .76rem;
|
||
font-weight: 600;
|
||
color: #a8e4f2;
|
||
padding: .1rem .5rem;
|
||
border-radius: 999px;
|
||
background: rgba(143, 217, 234, .12);
|
||
border: 1px solid rgba(143, 217, 234, .28);
|
||
}
|