/* ===================================================================== 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: ist im Standards-Modus das tatsächliche Scroll-Element des Dokuments, nicht — 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: 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; /* 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; } } .sprach-schalter .nav-dropdown { min-width: 190px; left: auto; right: 0; transform: none; 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); transform-origin: top right; animation: sprach-dropdown-in .18s ease both, sprach-silber-puls 3.6s ease-in-out infinite; } @keyframes sprach-dropdown-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: 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); } @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; } } /* ===================================================================== .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: Label ===================================================================== */ .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--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 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; border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: .5rem .7rem; cursor: pointer; } /* Schwelle von ursprünglich 880px auf 1480px angehoben: nach mehreren Vergrößerungsrunden (Logo/Nav-Schrift/Sprachschalter/Bewerben-Button, mehr Abstand zwischen den Nav-Punkten, größerer eigener Nav-Container, Polarlicht-Padding je Kategorie) braucht die Desktop-Nav deutlich mehr Platz als früher. Live bei mehreren Breiten nachgeprüft (siehe Commits vom 02.08.2026) — Schwelle hier bewusst großzügig, damit nie wieder Elemente sichtbar aus der Leiste verschwinden. */ @media (max-width: 1480px) { .nav-toggle { display: block; } .nav-links { position: fixed; inset: 62px 0 0 0; background: var(--bg); flex-direction: column; align-items: stretch; padding: 1.2rem 6vw; gap: .3rem; transform: translateY(-110%); transition: transform .25s ease; overflow-y: auto; } .nav-links.open { transform: translateY(0); } .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); } .nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); } .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; } .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; } } /* ---------- 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 - 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; } /* ---------- 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; } } /* ---------- 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; } .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 { 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); } .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); } /* ---------- 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); } /* 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"), url("../img/universe-trio-blur.jpg"); 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; } /* ========================================================================== 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:
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 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 , 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.
...
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); }