Alle ausstehenden Aenderungen (Bilder, Texte) fuer den Server-Umzug uebernommen
This commit is contained in:
+548
-36
@@ -120,8 +120,18 @@ header.site-header {
|
||||
/* 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. */
|
||||
width: min(1400px, 94vw);
|
||||
werden soll.
|
||||
Bugfix 04.08.2026: Der feste 1400px-Deckel war zu knapp — der
|
||||
tatsächliche Inhalt (Logo+Menü+Sprachschalter+DogiCrew-Knopf+
|
||||
Bewerben-Knopf) braucht bei aufgeklapptem Desktop-Menü (ab 1480px
|
||||
Breite, siehe Media Query unten) ca. 1417px und lief dadurch IMMER
|
||||
um ca. 17px über den Rahmen hinaus — auf breiten Bildschirmen ohne
|
||||
sichtbaren Schaden (genug Luft drumherum), aber bei schmaleren
|
||||
Fenstern knapp über der 1480px-Schwelle (z.B. Laptop-Fenster nicht
|
||||
maximiert, oder Browser-Zoom >100%) wurde dadurch der rechte Rand
|
||||
(der "Bewerben"-Knopf) sichtbar abgeschnitten. 1400px -> 1440px gibt
|
||||
ausreichend Puffer, ohne auf breiten Screens spürbar größer zu wirken. */
|
||||
width: min(1440px, 94vw);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -579,54 +589,114 @@ header.site-header {
|
||||
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);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.nav-cta::before, .nav-cta::after { animation: none; }
|
||||
}
|
||||
|
||||
/* TikTok-Button: exakt derselbe Polarlicht-Mechanismus wie .nav-cta
|
||||
(schwarze Pille + wandernde Farbwolken + Lichtschimmer), aber mit den
|
||||
echten TikTok-Markenfarben (Cyan #25F4EE + Pink/Rot #FE2C55) statt der
|
||||
allgemeinen Regenbogen-Aurora. Bewusst NUR für echte TikTok-Links
|
||||
verwendet — keine anderen Social-/CTA-Buttons bekommen diese Farben. */
|
||||
/* 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: .5rem;
|
||||
padding: .85rem 2.1rem;
|
||||
gap: .6rem;
|
||||
padding: .85rem 2.2rem;
|
||||
border-radius: 999px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 1.08rem;
|
||||
background: #0b0e14;
|
||||
border: 1px solid rgba(255, 255, 255, .16);
|
||||
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 .2s ease, box-shadow .2s ease, border-color .2s ease;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
|
||||
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 span {
|
||||
.btn-tiktok-note {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
|
||||
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: -60%;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
border-radius: inherit;
|
||||
background:
|
||||
radial-gradient(circle at 22% 30%, rgba(37, 244, 238, .95), transparent 55%),
|
||||
radial-gradient(circle at 78% 68%, rgba(254, 44, 85, .95), transparent 58%);
|
||||
filter: blur(9px) saturate(1.35);
|
||||
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;
|
||||
@@ -634,14 +704,39 @@ header.site-header {
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn-tiktok: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(37, 244, 238, .35),
|
||||
0 0 22px rgba(254, 44, 85, .35);
|
||||
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::before, .btn-tiktok::after { animation: none; }
|
||||
.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
|
||||
@@ -1101,6 +1196,108 @@ header.site-header {
|
||||
.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;
|
||||
background: none;
|
||||
@@ -1218,6 +1415,22 @@ header.site-header {
|
||||
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);
|
||||
@@ -1390,7 +1603,7 @@ header.site-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* ---------- Timeline (Zeitreise) ---------- */
|
||||
/* ---------- 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 {
|
||||
@@ -1405,6 +1618,177 @@ header.site-header {
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.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 {
|
||||
@@ -1464,6 +1848,11 @@ footer.site-footer {
|
||||
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; } }
|
||||
@@ -1928,12 +2317,22 @@ body.mit-hintergrund::before {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
/* Weichzeichnen + leicht abdunkeln: ruhiger Untergrund, der die Augen
|
||||
beim Lesen nicht anstrengt. */
|
||||
filter: blur(4px) brightness(.62) saturate(.95);
|
||||
/* 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. Das Motiv bleibt als ruhige Stimmung im Hintergrund. */
|
||||
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;
|
||||
@@ -1941,9 +2340,9 @@ body.mit-hintergrund::after {
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(to bottom,
|
||||
color-mix(in srgb, var(--bg) 80%, transparent) 0%,
|
||||
color-mix(in srgb, var(--bg) 92%, transparent) 45%,
|
||||
color-mix(in srgb, var(--bg) 95%, transparent) 100%);
|
||||
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 ----
|
||||
@@ -2622,6 +3021,119 @@ body.start-seite .music-toggle:focus-visible {
|
||||
.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;
|
||||
|
||||
Reference in New Issue
Block a user