/* ========================================================================== FC 27 Pro Clubs – Fußball-Community-Layout für Ilch 2.2 (Bootstrap 5.3, Flutlicht) © gameserver-install.de · by Rumpel Farbschemata: html[data-oa-theme="0…4"] – 0 = eigene Farben aus dem Admincenter ========================================================================== */ :root, html[data-oa-theme="1"] { --oa-a: #ff2e88; --oa-a2: #ffc2e2; --oa-b: #22d3ee; --oa-ar: 255, 46, 136; --oa-a2r: 255, 194, 226; --oa-br: 34, 211, 238; --oa-bg: #07050f; --oa-sky: #2a0b3a; } html[data-oa-theme="2"] { --oa-a: #22d3ee; --oa-a2: #d6fbff; --oa-b: #6366f1; --oa-ar: 34, 211, 238; --oa-a2r: 214, 251, 255; --oa-br: 99, 102, 241; --oa-bg: #040b12; --oa-sky: #0a2440; } html[data-oa-theme="3"] { --oa-a: #ff7a3d; --oa-a2: #ffe0b8; --oa-b: #ff2e88; --oa-ar: 255, 122, 61; --oa-a2r: 255, 224, 184; --oa-br: 255, 46, 136; --oa-bg: #0d0607; --oa-sky: #3a120a; } html[data-oa-theme="4"] { --oa-a: #b6ff3b; --oa-a2: #f0ffd6; --oa-b: #22d3ee; --oa-ar: 182, 255, 59; --oa-a2r: 240, 255, 214; --oa-br: 34, 211, 238; --oa-bg: #070a05; --oa-sky: #1c2a08; } html[data-oa-theme="0"] { --oa-a: var(--oa-own-a); --oa-a2: var(--oa-own-a2); --oa-b: var(--oa-own-b); --oa-ar: var(--oa-own-ar); --oa-a2r: var(--oa-own-a2r); --oa-br: var(--oa-own-br); --oa-bg: #07050f; --oa-sky: var(--oa-own-a); } :root { --oa-text: #eef4f7; --oa-soft: #cfdbe2; --oa-muted: #8fa1ad; --oa-dim: #5f707c; --oa-line: rgba(255, 255, 255, .08); --oa-head: "Unbounded", "Arial Black", system-ui, sans-serif; --oa-brush: "Unbounded", system-ui, sans-serif; --oa-display: "Manrope", "Segoe UI", system-ui, sans-serif; --oa-mono: "Manrope", "Segoe UI", sans-serif; --oa-body: "Manrope", "Segoe UI", system-ui, sans-serif; --oa-ease: cubic-bezier(.2, .8, .2, 1); --oa-r: 6px; --oa-pink: #ff3bd5; /* Verknüpfung zu den Modul-Stilen (gemeinsame wd-Variablen) */ --wd-accent: var(--oa-a); --wd-accent-2: var(--oa-a2); --wd-accent-3: var(--oa-b); --wd-accent-hover: color-mix(in srgb, var(--oa-a) 78%, #fff); --wd-accent-soft: rgba(var(--oa-ar), .16); --wd-accent-ring: rgba(var(--oa-ar), .42); --wd-on-accent: #16000c; --wd-bg: var(--oa-bg); --wd-bg-deep: #020303; --wd-bg-band: rgba(255, 255, 255, .035); --wd-panel: rgba(14, 17, 24, .78); --wd-panel-2: rgba(24, 28, 38, .9); --wd-panel-glass: rgba(14, 17, 24, .6); --wd-line: var(--oa-line); --wd-line-strong: rgba(255, 255, 255, .16); --wd-text: var(--oa-text); --wd-text-strong: #ffffff; --wd-text-soft: var(--oa-soft); --wd-muted: var(--oa-muted); --wd-ok: #34d399; --wd-red: #ff4d6d; --wd-font-display: var(--oa-head); --wd-font-body: var(--oa-body); --wd-font-mono: var(--oa-mono); --wd-ease: var(--oa-ease); } [data-bs-theme="dark"] { --bs-body-bg: var(--oa-bg); --bs-body-color: var(--oa-text); --bs-body-font-family: var(--oa-body); --bs-body-font-size: 1rem; --bs-body-line-height: 1.6; --bs-emphasis-color: #fff; --bs-secondary-color: var(--oa-muted); --bs-secondary-bg: rgba(24, 28, 38, .9); --bs-tertiary-bg: rgba(14, 17, 24, .8); --bs-border-color: rgba(255, 255, 255, .14); --bs-border-color-translucent: var(--oa-line); --bs-border-radius: 10px; --bs-link-color: var(--oa-a); --bs-link-color-rgb: var(--oa-ar); --bs-link-hover-color: #fff; --bs-heading-color: #fff; --bs-focus-ring-color: rgba(var(--oa-ar), .4); --bs-primary: var(--oa-a); } html { scroll-behavior: smooth; scroll-padding-top: 100px; scrollbar-color: rgba(var(--oa-ar), .6) #020303; } html, body.oa-body { overflow-x: hidden; } @supports (overflow: clip) { html, body.oa-body { overflow-x: clip; } } body.oa-body { margin: 0; background: var(--oa-bg); color: var(--oa-text); font-family: var(--oa-body); font-size: 16px; -webkit-font-smoothing: antialiased; transition: background-color .6s; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #020303; } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--oa-a), var(--oa-a2)); border: 3px solid #020303; border-radius: 10px; } a { color: var(--oa-a); text-decoration: none; transition: color .2s; } a:hover { color: #fff; } ::selection { background: var(--oa-a); color: #05070a; } :focus-visible { outline: 2px solid var(--oa-a2); outline-offset: 3px; } .container-xl { max-width: 1320px; padding-left: 24px; padding-right: 24px; } h1, h2, h3, h4, h5, h6 { color: #fff; } .oa-muted { color: var(--oa-muted); } .oa-skip { position: absolute; left: 16px; top: -60px; z-index: 4000; padding: 10px 16px; border-radius: 10px; background: var(--oa-a); color: #05070a; font-weight: 700; transition: top .2s; } .oa-skip:focus { top: 16px; color: #05070a; } .oa-fill { fill: currentColor; stroke: none; } /* -------------------------------------------------------------------------- Glas-Karten (statt Neon-Rahmen): weich, Leuchtrand läuft erst beim Drüberfahren um -------------------------------------------------------------------------- */ @property --oa-ang { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes oaSpinBorder { to { --oa-ang: 360deg; } } .glass { position: relative; border-radius: var(--oa-r); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border: 1px solid rgba(var(--oa-ar), .16); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 50px -30px rgba(0, 0, 0, .95); transition: transform .35s var(--oa-ease), box-shadow .35s, border-color .35s; } .glass::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--oa-ang), transparent 0 55%, var(--oa-a) 75%, var(--oa-a2) 86%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; } .hov:hover, a.hov:focus-visible { transform: translateY(-6px); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 50px -22px rgba(var(--oa-ar), .5); color: inherit; } .hov:hover::before, a.hov:focus-visible::before { opacity: 1; animation: oaSpinBorder 2.4s linear infinite; } /* Buttons */ .oa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer; background: var(--oa-a); color: #05070a; font-family: var(--oa-display); font-weight: 800; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 24px rgba(var(--oa-ar), .5); transition: transform .2s var(--oa-ease), box-shadow .2s, background-color .2s, color .2s; } .oa-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--oa-ease); } .oa-btn:hover { color: #05070a; transform: translateY(-2px); box-shadow: 0 0 36px rgba(var(--oa-ar), .9); } .oa-btn:hover svg { transform: translateX(3px); } .oa-btn--ghost { background: rgba(255, 255, 255, .02); color: var(--oa-text); border: 1px solid rgba(var(--oa-ar), .5); box-shadow: none; } .oa-btn--ghost:hover { color: #fff; background: rgba(var(--oa-ar), .14); box-shadow: 0 0 18px rgba(var(--oa-ar), .3); } .oa-btn--sm { height: 42px; padding: 0 18px; font-size: 11.5px; } .oa-btn--xs { height: 36px; padding: 0 14px; font-size: 10.5px; } .oa-btn--block { display: flex; width: 100%; height: 44px; } .oa-linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .oa-linkbtn:hover { color: var(--oa-a); } @keyframes oaHatch { to { background-position: 12px 0; } } .oa-live { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--oa-a); } .oa-anim .oa-live { animation: oaPulse 1.6s infinite; } @keyframes oaPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--oa-ar), .6); } 100% { box-shadow: 0 0 0 10px rgba(var(--oa-ar), 0); } } .oa-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- Abendhimmel hinter der Seite (optional Bild/Video) -------------------------------------------------------------------------- */ .oa-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--oa-page-image, none) center / cover no-repeat, var(--oa-bg); } .oa-sky--glow { background: var(--oa-page-image, none) center / cover no-repeat, radial-gradient(1100px 700px at 85% 0%, rgba(var(--oa-ar), .16), transparent 62%), radial-gradient(900px 700px at 0% 75%, rgba(var(--oa-a2r), .08), transparent 60%), radial-gradient(800px 500px at 50% 110%, rgba(var(--oa-br), .12), transparent 70%), var(--oa-bg); } .oa-sky__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .oa-sky__shade { position: absolute; inset: 0; display: none; background: rgba(8, 4, 16, var(--oa-bg-dim, .8)); } .oa-sky--media .oa-sky__shade { display: block; } .oa-sky__stars { position: absolute; inset: -20% 0 0; background-image: radial-gradient(1.3px 1.3px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 140px 80px, #fff, transparent), radial-gradient(1.5px 1.5px at 260px 170px, rgba(255, 255, 255, .9), transparent), radial-gradient(1px 1px at 90px 220px, #fff, transparent), radial-gradient(1.2px 1.2px at 330px 40px, #fff, transparent); background-size: 360px 340px; opacity: .35; } .oa-anim .oa-sky__stars { animation: oaTwinkle 6s ease-in-out infinite; } @keyframes oaTwinkle { 0%, 100% { opacity: .2; } 50% { opacity: .5; } } .oa-sky__haze { position: absolute; left: -20vw; top: 20vh; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--oa-a2r), .07), transparent 62%); filter: blur(30px); } .oa-anim .oa-sky__haze { animation: oaHaze 26s ease-in-out infinite; } @keyframes oaHaze { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -40px) scale(1.15); } } /* -------------------------------------------------------------------------- Preloader-Seite: Sonne geht über dem Meer auf, Palmen wiegen sich -------------------------------------------------------------------------- */ @keyframes oaSunrise { from { transform: translateY(70px); } to { transform: translateY(-60px); } } @keyframes oaShimmer { 0%, 100% { opacity: .35; transform: translateX(-50%) scaleX(.8); } 50% { opacity: .9; transform: translateX(-50%) scaleX(1.1); } } @keyframes oaSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } } @keyframes oaSwayR { 0%, 100% { transform: scaleX(-1) rotate(-2deg); } 50% { transform: scaleX(-1) rotate(3deg); } } @keyframes oaNameIn { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: .04em; } } /* Logo-Zeichen: Sonne mit Palme */ /* -------------------------------------------------------------------------- Farbumschalter -------------------------------------------------------------------------- */ .oa-themes { position: fixed; right: 0; top: 50%; z-index: 1050; display: flex; flex-direction: row-reverse; align-items: flex-start; transform: translateY(-50%); } .oa-themes__toggle { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(var(--oa-ar), .45); border-right: 0; border-radius: 12px 0 0 12px; background: rgba(8, 10, 16, .9); color: var(--oa-a); cursor: pointer; box-shadow: 0 0 18px rgba(var(--oa-ar), .3); } .oa-themes__toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .oa-anim .oa-themes__toggle svg { animation: oaSpin 9s linear infinite; } .oa-themes__panel { width: 236px; padding: 16px; border-radius: 16px 0 16px 16px; background: rgba(8, 10, 16, .92); } .oa-themes__panel[hidden] { display: none; } .oa-themes__title { margin-bottom: 10px; font-family: var(--oa-display); font-weight: 800; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--oa-a); } .oa-themes__opt { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 7px 9px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08); background: transparent; color: var(--oa-text); font: 600 13px var(--oa-body); text-align: left; cursor: pointer; transition: transform .2s, border-color .2s, background-color .2s; } .oa-themes__opt:hover { transform: translateX(-3px); } .oa-themes__opt.is-active { border-color: var(--oa-a); background: rgba(255, 255, 255, .07); } .oa-themes__sw { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; } .oa-themes__reset { margin-top: 10px; width: 100%; padding: 8px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .18); background: none; color: var(--oa-muted); font: 12px var(--oa-body); cursor: pointer; } .oa-themes__reset:hover { color: #fff; border-color: var(--oa-a); } /* -------------------------------------------------------------------------- Topbar + Header -------------------------------------------------------------------------- */ .oa-topbar { position: relative; z-index: 1031; border-bottom: 1px solid rgba(var(--oa-ar), .14); background: rgba(0, 0, 0, .45); font-size: 12.5px; color: var(--oa-muted); } .oa-topbar__inner { display: flex; align-items: center; gap: 22px; min-height: 36px; } .oa-topbar__status { display: inline-flex; align-items: center; gap: 8px; color: var(--oa-text); white-space: nowrap; } .oa-topbar__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .oa-topbar__user { display: flex; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; } .oa-topbar__user a { color: var(--oa-text); } .oa-topbar__user a:hover { color: var(--oa-a); } .oa-topbar__user .oa-topbar__cta { color: var(--oa-a); } @media (max-width: 767.98px) { .oa-topbar__text { display: none; } } .oa-header { position: relative; z-index: 1030; border-bottom: 1px solid rgba(var(--oa-ar), .16); background: rgba(5, 7, 11, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .3s, box-shadow .3s; } .oa-header--sticky { position: sticky; top: 0; } .oa-header.is-scrolled { background: rgba(5, 7, 11, .9); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8), 0 1px 0 rgba(var(--oa-ar), .25); } .oa-header__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; padding-top: 14px; padding-bottom: 14px; transition: padding .3s var(--oa-ease); } .oa-header.is-scrolled .oa-header__bar { padding-top: 9px; padding-bottom: 9px; } .oa-brand { display: flex; align-items: center; gap: 12px; color: #fff; } .oa-brand:hover { color: #fff; } .oa-brand:hover .oa-emblem--brand { transform: rotate(-10deg) scale(1.06); } .oa-brand__logo { max-height: 46px; width: auto; } .oa-brand__text { display: flex; flex-direction: column; line-height: 1; } .oa-brand__name { font-family: var(--oa-display); font-weight: 900; font-size: 20px; letter-spacing: .14em; white-space: nowrap; } .oa-brand__sub { margin-top: 6px; font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--oa-muted); white-space: nowrap; } .oa-header__collapse { flex: 1; align-items: center; gap: 12px 22px; min-width: 0; } .oa-nav { min-width: 0; } .oa-nav__list { display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; list-style: none; } .oa-nav__item { position: relative; } .oa-nav__link { position: relative; display: block; padding: 10px 12px; white-space: nowrap; font-family: var(--oa-display); font-weight: 700; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #c9d1db; transition: color .2s, text-shadow .2s; } .oa-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--oa-a); box-shadow: 0 0 10px var(--oa-a); transform: scaleX(0); transition: transform .3s var(--oa-ease); } .oa-nav__link:hover, .oa-nav__item.is-active > .oa-nav__link, .oa-nav__item--more.is-active-child > .oa-nav__link { color: var(--oa-a); text-shadow: 0 0 10px rgba(var(--oa-ar), .7); } .oa-nav__link:hover::after, .oa-nav__item.is-active > .oa-nav__link::after { transform: scaleX(1); } .oa-nav__item--has-sub > .oa-nav__link { padding-right: 26px; } .oa-nav__item--has-sub > .oa-nav__link::before { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); } .oa-nav__sub { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 230px; margin: 0; padding: 6px; list-style: none; border-radius: 14px; border: 1px solid rgba(var(--oa-ar), .2); background: rgba(8, 10, 16, .97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--oa-ease), visibility .2s; } .oa-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .oa-nav__item--more > .oa-nav__sub { left: auto; right: 0; max-height: 70vh; overflow-y: auto; } .oa-nav__item--has-sub:hover > .oa-nav__sub, .oa-nav__item--has-sub:focus-within > .oa-nav__sub, .oa-nav__item--more.is-open > .oa-nav__sub { opacity: 1; visibility: visible; transform: none; } .oa-nav__sub .oa-nav__link { padding: 10px 12px; border-radius: 8px; font-family: var(--oa-body); font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--oa-soft); } .oa-nav__sub .oa-nav__link::after, .oa-nav__sub .oa-nav__link::before { display: none; } .oa-nav__sub .oa-nav__link:hover, .oa-nav__sub .is-active > .oa-nav__link { background: rgba(var(--oa-ar), .12); color: #fff; text-shadow: none; } .oa-header__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; } .oa-me__btn { width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 1px solid rgba(var(--oa-ar), .5); overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, rgba(var(--oa-ar), .4), rgba(var(--oa-a2r), .3)); color: #fff; font-family: var(--oa-display); font-weight: 800; font-size: 13px; cursor: pointer; } .oa-me__btn img { width: 100%; height: 100%; object-fit: cover; } .oa-me .dropdown-menu { --bs-dropdown-bg: rgba(8, 10, 16, .97); --bs-dropdown-border-color: rgba(var(--oa-ar), .2); --bs-dropdown-border-radius: 14px; --bs-dropdown-link-hover-bg: rgba(var(--oa-ar), .12); --bs-dropdown-link-active-bg: var(--oa-a); --bs-dropdown-link-active-color: #05070a; padding: 6px; margin-top: 8px !important; } .oa-me .dropdown-item { border-radius: 8px; padding: 8px 12px; } .oa-burger { margin-left: auto; width: 44px; height: 44px; padding: 0; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: 12px; border: 1px solid rgba(var(--oa-ar), .4); background: rgba(255, 255, 255, .03); cursor: pointer; } .oa-burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--oa-a); transition: transform .3s var(--oa-ease), opacity .2s; } .oa-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .oa-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .oa-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1199.98px) { .oa-nav__link { padding: 10px 9px; font-size: 11px; letter-spacing: .1em; } .oa-brand__sub { display: none; } } @media (max-width: 991.98px) { .oa-header__collapse { flex-basis: 100%; } .oa-header__collapse.show, .oa-header__collapse.collapsing { display: block; } .oa-nav__list { flex-direction: column; padding: 8px 0; } .oa-nav__link::after { display: none; } .oa-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 0 12px; } .oa-nav__item--has-sub > .oa-nav__link::before { display: none; } .oa-header__tools { padding: 6px 0 8px; margin: 0; } } /* -------------------------------------------------------------------------- Hero: Szene (SVG), Header-Video oder Bild, Überschrift, Countdown, Server -------------------------------------------------------------------------- */ .oa-stop-a { stop-color: var(--oa-a); } .oa-stop-b { stop-color: var(--oa-b); } .oa-fill-a { fill: var(--oa-a); } @keyframes oaTwinkleStar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } @keyframes oaSunGlow { 0%, 100% { opacity: .55; } 50% { opacity: .85; } } @keyframes oaClouds { to { transform: translateX(-260px); } } @keyframes oaBird { to { transform: translate(-900px, -60px); } } @keyframes oaWin { 0%, 100% { opacity: .2; } 50% { opacity: 1; } } @keyframes oaShimmerBar { 0%, 100% { opacity: .3; transform: scaleX(.8); } 50% { opacity: .9; transform: scaleX(1.1); } } @keyframes oaCarR { from { transform: translate(-200px, 0); } to { transform: translate(1700px, -30px); } } @keyframes oaCarL { from { transform: translate(1700px, -30px); } to { transform: translate(-200px, 0); } } @keyframes oaRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .oa-grad { background: linear-gradient(90deg, var(--oa-b), var(--oa-a) 58%, var(--oa-a2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .oa-anim .oa-grad { background-size: 200% 100%; animation: oaGradMove 8s ease-in-out infinite alternate; } @keyframes oaGradMove { from { background-position: 0 0; } to { background-position: 100% 0; } } .oa-connect span { font-family: var(--oa-mono); font-weight: 500; letter-spacing: .02em; text-transform: none; } @keyframes oaPulseOk { 0% { box-shadow: 0 0 0 0 rgba(57, 255, 140, .6); } 100% { box-shadow: 0 0 0 10px rgba(57, 255, 140, 0); } } /* -------------------------------------------------------------------------- Laufband „Boxenfunk“ -------------------------------------------------------------------------- */ .oa-ticker { position: relative; z-index: 2; display: flex; align-items: stretch; margin-top: -1px; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 6, 20, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .oa-ticker::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--oa-b), var(--oa-a), var(--oa-a2)); } .oa-ticker__label { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 22px; background: linear-gradient(100deg, var(--oa-a), var(--oa-b)); color: #140612; font-family: var(--oa-head); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 32px; } .oa-ticker__label .oa-live { background: #140612; } .oa-side-card__sub .oa-live { background: #39ff88; box-shadow: 0 0 8px rgba(57, 255, 136, .6); } .oa-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 60px), transparent); } .oa-ticker__track { display: flex; width: max-content; padding: 14px 0; } .oa-anim .oa-ticker__track { animation: oaTicker var(--oa-ticker-time, 40s) linear infinite; } .oa-ticker:hover .oa-ticker__track, .oa-ticker:focus-within .oa-ticker__track { animation-play-state: paused; } @keyframes oaTicker { to { transform: translateX(-50%); } } .oa-ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; white-space: nowrap; font-weight: 600; font-size: 14.5px; color: #fff; } .oa-ticker__item::after { content: ""; width: 7px; height: 7px; margin-left: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--oa-b), var(--oa-a)); box-shadow: 0 0 10px rgba(var(--oa-ar), .8); } .oa-ticker__item a { color: #fff; text-decoration: underline; text-decoration-color: rgba(var(--oa-a2r), .6); text-underline-offset: 4px; } .oa-ticker__item a:hover { color: var(--oa-a2); } .oa-ticker__tag { padding: 2px 8px; border-radius: 6px; background: rgba(var(--oa-a2r), .16); color: var(--oa-a2); font-family: var(--oa-mono); font-size: 10.5px; letter-spacing: .12em; } @media (max-width: 575.98px) { .oa-ticker__label { padding: 0 22px 0 14px; font-size: 15px; } } /* -------------------------------------------------------------------------- Startseite: Bereiche -------------------------------------------------------------------------- */ .oa-home { padding-bottom: 40px; } .oa-sec { margin-top: 96px; scroll-margin-top: 110px; } .oa-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; } .oa-sec__title { margin: 10px 0 0; font-family: var(--oa-head); font-weight: 400; font-size: clamp(34px, 4vw, 54px); line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #fff; } .oa-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--oa-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-a2); } .oa-more span { transition: transform .25s var(--oa-ease); } .oa-more:hover { color: #fff; } .oa-more:hover span { transform: translateX(4px); } .oa-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); font-size: 13.5px; color: var(--oa-soft); } .oa-adminhint { margin: 16px 0 0; padding: 14px 18px; border-radius: 14px; border: 1px dashed rgba(var(--oa-ar), .55); background: rgba(var(--oa-ar), .06); color: var(--oa-soft); font-size: 14px; } .oa-adminhint i { margin-right: 8px; color: var(--oa-a); } .oa-art { background-color: #1a0b2a; background-size: cover; background-position: center; } .oa-art--0 { background-image: linear-gradient(160deg, var(--oa-a) 0%, #2a0d45 55%, #0b0614 100%); } .oa-art--1 { background-image: linear-gradient(200deg, var(--oa-a2) 0%, #3a1260 50%, #0b0614 100%); } .oa-art--2 { background-image: linear-gradient(140deg, var(--oa-b) 0%, #8a1a5a 50%, #0b0614 100%); } .oa-art--3 { background-image: linear-gradient(180deg, #7c5cff 0%, var(--oa-a) 60%, #2a0d45 100%); } .oa-art--4 { background-image: linear-gradient(120deg, #120820 0%, #b44bff 60%, var(--oa-b) 100%); } .oa-art--5 { background-image: linear-gradient(220deg, #ffe14d 0%, var(--oa-a) 45%, #120820 100%); } /* Streamer + Events */ .oa-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; } .oa-split--single { grid-template-columns: 1fr; } .oa-streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .oa-stream { display: flex; flex-direction: column; overflow: hidden; color: var(--oa-text); } .oa-stream:hover { color: var(--oa-text); } .oa-stream__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 17px 17px 0 0; } .oa-stream__live { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 6px; background: #ff3b5c; font-family: var(--oa-mono); font-weight: 700; font-size: 11px; color: #fff; } .oa-stream__live::before { content: "● "; } .oa-stream__off { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .6); font-family: var(--oa-mono); font-size: 11px; color: var(--oa-soft); } .oa-stream__viewers { position: absolute; right: 12px; top: 12px; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .6); font-family: var(--oa-mono); font-size: 11px; color: #fff; } .oa-stream__tw { position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #9146ff; color: #fff; } .oa-stream__body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; } .oa-stream__body b { color: #fff; } .oa-stream__body span { font-size: 13px; color: var(--oa-soft); } .oa-events { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 991.98px) { .oa-split { grid-template-columns: 1fr; } .oa-split__side { margin-top: 30px; } } /* News */ .oa-newsgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .oa-news { display: flex; flex-direction: column; overflow: hidden; color: var(--oa-text); } .oa-news:hover { color: var(--oa-text); } .oa-news__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 17px 17px 0 0; overflow: hidden; } .oa-news__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(11, 6, 20, .7)); } .oa-news__cat { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11.5px; color: #fff; } .oa-news__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; } .oa-news__title { font-size: 17.5px; line-height: 1.3; color: #fff; } .oa-news__teaser { font-size: 13.5px; color: var(--oa-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oa-news__meta { margin-top: auto; padding-top: 6px; display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--oa-muted); } /* Community */ .oa-community { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; } .oa-dc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 22px 22px; overflow: hidden; border-color: rgba(88, 101, 242, .55); text-align: center; } .oa-dc__hero { height: 100px; margin: 0 -22px; display: grid; place-items: center; background: radial-gradient(120% 140% at 50% 0%, rgba(88, 101, 242, .6), transparent 72%); } .oa-dc__logo { position: relative; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: #5865f2; color: #fff; font-size: 30px; box-shadow: 0 0 26px rgba(88, 101, 242, .8); } .oa-anim .oa-dc__logo { animation: oaDcFloat 3.2s ease-in-out infinite; } .oa-dc__ring { position: absolute; inset: -6px; border-radius: 22px; border: 2px solid rgba(88, 101, 242, .7); opacity: 0; } .oa-anim .oa-dc__ring { animation: oaDcRing 2.4s ease-out infinite; } .oa-anim .oa-dc__ring--2 { animation-delay: 1.2s; } @keyframes oaDcFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-4deg); } } @keyframes oaDcRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } } .oa-dc__name { font-family: var(--oa-head); font-size: 24px; text-transform: uppercase; color: #fff; } .oa-dc__sub { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13px; color: var(--oa-soft); } .oa-dc__text { margin: 0; font-size: 13.5px; color: var(--oa-soft); } .oa-dc__voice { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; } .oa-dc__voice li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(88, 101, 242, .14); font-size: 13px; color: #dfe4ff; } .oa-dc__voice li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oa-dc__voice li b { color: #fff; } .oa-dc__faces { justify-content: center; } .oa-dc .oa-btn--dc { margin-top: 6px; } .oa-btn--dc { background: #5865f2 !important; color: #fff !important; box-shadow: 0 12px 30px -10px #5865f2 !important; } .oa-btn--dc:hover { box-shadow: 0 16px 36px -8px #5865f2 !important; } .oa-live--ok { background: #39ff8c !important; } .oa-tscard { display: flex; flex-direction: column; gap: 14px; padding: 22px; overflow: hidden; } .oa-tscard__head { display: flex; align-items: center; gap: 12px; } .oa-tscard__head > span:last-child { display: flex; flex-direction: column; } .oa-tscard__head b { font-family: var(--oa-head); font-weight: 400; font-size: 24px; text-transform: uppercase; color: #fff; } .oa-tscard__head span span { font-size: 13px; color: var(--oa-soft); } .oa-tscard__logo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--oa-a2r), .12); color: var(--oa-a2); font-size: 22px; } .oa-galcard { display: flex; flex-direction: column; gap: 14px; padding: 22px; } .oa-galcard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .oa-galcard__head b { font-family: var(--oa-head); font-weight: 400; font-size: 24px; text-transform: uppercase; color: #fff; } .oa-galcard__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .oa-community > .oa-galcard:only-child .oa-galcard__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 575.98px) { .oa-community > .oa-galcard:only-child .oa-galcard__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .oa-galcard__img { display: block; aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; transition: transform .3s var(--oa-ease), box-shadow .3s; } /* -------------------------------------------------------------------------- Unterseiten: Kopfband, Inhalt, Seitenleiste -------------------------------------------------------------------------- */ .oa-pagehead { position: relative; overflow: hidden; border-bottom: 1px solid rgba(var(--oa-ar), .14); background: linear-gradient(180deg, rgba(var(--oa-ar), .08), transparent); } .oa-pagehead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--oa-a), var(--oa-a2), transparent); opacity: .7; } .oa-pagehead__inner { padding-top: 22px; padding-bottom: 22px; } .oa-breadcrumb { font-family: var(--oa-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oa-muted); } .oa-breadcrumb a { color: var(--oa-muted); } .oa-breadcrumb a:hover { color: var(--oa-a); } .oa-breadcrumb:empty::before { content: "//"; color: var(--oa-a); } .oa-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 34px; align-items: start; padding-top: 40px; padding-bottom: 80px; } .oa-layout--full { grid-template-columns: minmax(0, 1fr); } .oa-main { min-width: 0; } .oa-content > h1, .oa-content .wd-posts__head h1, .oa-homecontent > h1 { margin: 0 0 22px; font-family: var(--oa-display); font-weight: 800; font-size: clamp(24px, 3vw, 34px); letter-spacing: .04em; text-transform: uppercase; color: #fff; } @media (max-width: 991.98px) { .oa-layout { grid-template-columns: minmax(0, 1fr); } } .oa-sidebar { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .oa-box { padding: 0; } .oa-box__title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px 0; font-family: var(--oa-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #fff; } .oa-box__dot { width: 10px; height: 10px; flex-shrink: 0; background: var(--oa-a); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 8px var(--oa-a); } .oa-sidebar > .oa-box:nth-of-type(2n) .oa-box__dot { background: var(--oa-a2); } .oa-box__body { padding: 14px 20px 18px; font-size: 14px; overflow-wrap: anywhere; } .oa-box__body > *:last-child { margin-bottom: 0; } .oa-box__body .oa-menu { margin: -6px -10px; padding: 0; list-style: none; } .oa-box__body .oa-menu li a { display: flex; align-items: center; justify-content: space-between; padding: 9px 10px; border-radius: 10px; color: var(--oa-text); font-weight: 500; transition: background-color .2s, color .2s, padding .25s var(--oa-ease); } .oa-box__body .oa-menu li a::after { content: "→"; opacity: 0; transform: translateX(-6px); color: var(--oa-a); transition: opacity .2s, transform .25s var(--oa-ease); } .oa-box__body .oa-menu li a:hover { color: #fff; background: rgba(var(--oa-ar), .08); padding-left: 14px; } .oa-box__body .oa-menu li a:hover::after { opacity: 1; transform: none; } .oa-box__body .oa-menu li.is-active > a { color: #fff; background: rgba(var(--oa-ar), .14); } .oa-box__body .oa-menu--child { margin: 0 0 0 10px; } .oa-box__body ul.list-unstyled li { padding: 6px 0; border-bottom: 1px solid var(--oa-line); } .oa-box__body ul.list-unstyled li:last-child { border-bottom: 0; } .oa-side-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; } .oa-side-card__head { display: flex; align-items: center; gap: 12px; } .oa-side-card__logo { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: rgba(var(--oa-ar), .14); color: var(--oa-a); font-size: 21px; } .oa-side-card__logo--dc { background: #5865f2; color: #fff; } .oa-side-card__title { display: block; font-family: var(--oa-display); font-weight: 800; font-size: 15px; letter-spacing: .08em; color: #fff; } .oa-side-card__sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--oa-muted); line-height: 1.4; } .oa-copy { display: flex; align-items: stretch; overflow: hidden; border-radius: 12px; border: 1px dashed rgba(var(--oa-ar), .3); background: rgba(0, 0, 0, .3); } .oa-copy__value { flex: 1; min-width: 0; padding: 10px 12px; background: transparent; color: var(--oa-text); font-family: var(--oa-display); font-size: 14px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-copy__btn { width: 46px; flex-shrink: 0; border: 0; border-left: 1px solid rgba(255, 255, 255, .1); background: transparent; color: var(--oa-text); cursor: pointer; } .oa-copy__btn:hover { background: rgba(var(--oa-ar), .14); } .oa-copy__btn.is-done { background: var(--oa-a); color: #05070a; } .oa-faces { display: flex; flex-wrap: wrap; gap: 8px; } .oa-faces--sm { gap: 0; } .oa-faces--sm .oa-av + .oa-av { margin-left: -6px; } .oa-faces__note { margin: 10px 0 0; font-size: 12.5px; color: var(--oa-muted); } .oa-av { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; color: #fff; font-family: var(--oa-display); font-weight: 800; line-height: 1; background: radial-gradient(circle at 35% 30%, var(--oa-a), #07090d 75%); transition: transform .25s var(--oa-ease); } .oa-av img { width: 100%; height: 100%; object-fit: cover; } .oa-av--xs { width: 28px; height: 28px; font-size: 10px; border: 2px solid #0b0f16; } .oa-av--md { width: 42px; height: 42px; border-radius: 13px; font-size: 12px; } .oa-av--more { background: transparent; border: 1px dashed rgba(255, 255, 255, .22); color: var(--oa-muted); } a.oa-av:hover { transform: translateY(-4px); } /* -------------------------------------------------------------------------- Footer + Nach-oben-Button + Login-Popup -------------------------------------------------------------------------- */ .oa-footer { position: relative; z-index: 2; border-top: 1px solid rgba(var(--oa-ar), .18); background: rgba(0, 0, 0, .5); font-size: 14px; color: var(--oa-muted); } .oa-footer__grid { display: grid; grid-template-columns: minmax(240px, 2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; padding-top: 44px; padding-bottom: 24px; } .oa-brand--foot .oa-brand__name { font-size: 16px; } .oa-footer__tagline { max-width: 320px; margin: 12px 0 0; } .oa-footer__col { display: flex; flex-direction: column; gap: 6px; } .oa-footer__col h2 { margin: 0 0 6px; font-family: var(--oa-display); font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--oa-a); } .oa-footer a { color: var(--oa-muted); } .oa-footer a:hover { color: #fff; } .oa-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .oa-social:empty { display: none; } .oa-social__link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(var(--oa-ar), .2); background: rgba(255, 255, 255, .03); transition: transform .25s var(--oa-ease), background-color .25s, color .25s, box-shadow .25s; } .oa-footer .oa-social__link:hover { transform: translateY(-3px); background: var(--oa-a); color: #05070a; box-shadow: 0 0 18px rgba(var(--oa-ar), .6); } .oa-footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 14px; padding-bottom: 22px; font-size: 12px; color: var(--oa-dim); } .oa-footer__bottom::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: rgba(255, 255, 255, .06); } .oa-footer__credit { font-size: 11px; } .oa-footer__credit a { color: var(--oa-muted); } @media (max-width: 767.98px) { .oa-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oa-footer__about { grid-column: 1 / -1; } } .oa-totop { position: fixed; right: 18px; bottom: 18px; z-index: 1040; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(8, 10, 16, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--oa-a); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .3s, visibility .3s, transform .35s var(--oa-ease); } .oa-totop.is-visible { opacity: 1; visibility: visible; transform: none; } .oa-totop:hover { color: #fff; transform: translateY(-3px); } .oa-totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .oa-totop__ring circle { fill: none; stroke-width: 3; } .oa-totop__track { stroke: rgba(255, 255, 255, .1); } .oa-totop__progress { stroke: var(--oa-a); stroke-linecap: round; filter: drop-shadow(0 0 4px var(--oa-a)); } .oa-totop__arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .oa-modal .modal-content { --bs-modal-bg: rgba(8, 10, 16, .95); --bs-modal-border-color: rgba(var(--oa-ar), .3); border-radius: 22px; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 40px rgba(var(--oa-ar), .2); overflow: hidden; } .oa-modal .modal-header { border-bottom: 0; padding: 22px 24px 0; } .oa-modal .modal-title { margin: 0; font-family: var(--oa-display); font-weight: 800; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; } .oa-modal .modal-body { padding: 14px 24px 24px; } .oa-modal .btn-close { filter: invert(1) grayscale(1); opacity: .6; } .modal-backdrop { --bs-backdrop-bg: #020303; --bs-backdrop-opacity: .75; } .oa-login__lead { margin: 0 0 16px; color: var(--oa-muted); } .oa-login .row.mb-3 { --bs-gutter-x: 0; } .oa-login .form-control { border-radius: 12px; } .oa-login button[name="login"] { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--oa-a); color: #05070a; font-family: var(--oa-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 20px rgba(var(--oa-ar), .4); } .oa-login .checkbox label { display: inline-flex; align-items: center; gap: 8px; color: var(--oa-soft); font-size: 14px; cursor: pointer; } .oa-login > a { display: inline-block; margin-top: 6px; margin-right: 16px; font-size: 14px; color: var(--oa-muted); } .oa-login br { display: none; } /* -------------------------------------------------------------------------- Hover- und Icon-Effekte: Events, Streamer, Discord, TeamSpeak, Galerie (Bewegungen nur mit „Animationen“ an) -------------------------------------------------------------------------- */ /* gemeinsamer Lichtstreif über die Karte */ .oa-event::after, .oa-dc::after, .oa-tscard::after, .oa-galcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .07) 48%, color-mix(in srgb, var(--f, var(--oa-a)) 18%, transparent) 52%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; opacity: 0; transition: background-position 1s var(--oa-ease), opacity .3s; } .oa-event:hover::after, .oa-dc:hover::after, .oa-tscard:hover::after, .oa-galcard:hover::after { background-position: 0 0; opacity: 1; } .oa-event > *, .oa-tscard > *, .oa-galcard > * { position: relative; z-index: 1; } /* Icon-Bewegungen (werden je nach Symbol vergeben) */ @keyframes oaFxBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(.96); } 45% { transform: scale(1.14); } 60% { transform: scale(1); } } @keyframes oaFxFlip { from { transform: perspective(200px) rotateY(0); } to { transform: perspective(200px) rotateY(360deg); } } @keyframes oaFxWrench { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-28deg); } 75% { transform: rotate(18deg); } } @keyframes oaFxBob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-8deg); } 70% { transform: translateY(1px) rotate(6deg); } } @keyframes oaFxDrive { 0% { transform: translateX(0); } 20% { transform: translateX(-3px) translateY(1px); } 55% { transform: translateX(8px); } 56% { transform: translateX(-12px); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(0); } } @keyframes oaFxScale { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } } @keyframes oaFxJump { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-6px) scale(1.08, .94); } 55% { transform: translateY(0) scale(.94, 1.06); } } @keyframes oaFxSpin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } to { transform: rotate(360deg) scale(1); } } @keyframes oaFxFlicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.95, 1.12) skewX(-4deg); } 50% { transform: scale(1.04, .94) skewX(3deg); } 75% { transform: scale(.97, 1.08) skewX(-2deg); } } @keyframes oaFxBlink { 0%, 40%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } 56% { transform: scaleY(1); } } @keyframes oaFxShake { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-10deg); } 40%, 80% { transform: rotate(10deg); } } @keyframes oaFxTurn { to { transform: rotate(-360deg); } } @keyframes oaFxRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.55); opacity: 0; } } @keyframes oaFxIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes oaFxNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @keyframes oaFxStripes { to { background-position: 28px 0; } } @keyframes oaFxPage { 0% { transform: rotateX(0); } 35% { transform: rotateX(-38deg); } 70% { transform: rotateX(10deg); } 100% { transform: rotateX(0); } } .oa-anim .hov:hover .oa-fx-target, .oa-anim .hov:focus-visible .oa-fx-target { animation: oaFxJump .7s var(--oa-ease); } /* Karten */ /* Events */ .oa-event { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; padding: 14px 16px; color: var(--oa-text); } .oa-event:hover { color: var(--oa-text); } .oa-event__date { position: relative; flex: none; width: 60px; perspective: 260px; } .oa-event__page { display: block; padding: 10px 0 8px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, var(--oa-b), var(--oa-a)); color: #140612; transform-origin: 50% 0; transition: box-shadow .35s; } .oa-event__page b { display: block; font-family: var(--oa-head); font-weight: 400; font-size: 24px; line-height: 1; } .oa-event__page small { font-family: var(--oa-mono); font-weight: 700; font-size: 10px; text-transform: uppercase; } .oa-event:hover .oa-event__page { box-shadow: 0 0 24px rgba(var(--oa-ar), .65); } .oa-anim .oa-event:hover .oa-event__page { animation: oaFxPage .8s var(--oa-ease); } .oa-event__body { min-width: 0; flex: 1; display: flex; flex-direction: column; } .oa-event__body b { color: #fff; transition: color .3s; } .oa-event:hover .oa-event__body b { color: var(--oa-a); } .oa-event__meta { font-size: 13px; color: var(--oa-soft); } .oa-event__soon { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; font-family: var(--oa-mono); font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--oa-a2); } .oa-event__soon i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .oa-event.is-hot .oa-event__soon { color: var(--oa-a); } .oa-anim .oa-event.is-hot .oa-event__soon i { animation: oaPulse 1.6s infinite; } .oa-event__go { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(var(--oa-ar), .3); color: var(--oa-a); opacity: .45; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--oa-ease), background-color .3s, color .3s, box-shadow .3s; } .oa-event__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .oa-event:hover .oa-event__go { opacity: 1; transform: none; background: var(--oa-a); color: #140612; box-shadow: 0 0 18px rgba(var(--oa-ar), .6); } .oa-anim .oa-event:hover .oa-event__go svg { animation: oaFxNudge .7s ease-in-out infinite; } /* Schritte */ /* Streamer */ .oa-stream__media { overflow: hidden; } .oa-stream__media::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transition: transform .7s var(--oa-ease), filter .5s; } .oa-stream:hover .oa-stream__media::before { transform: scale(1.08); filter: saturate(1.25) brightness(1.08); } .oa-stream__tw { transition: transform .4s var(--oa-ease), box-shadow .3s; } .oa-stream:hover .oa-stream__tw { transform: scale(1.15) rotate(-8deg); box-shadow: 0 0 22px rgba(145, 70, 255, .8); } .oa-anim .oa-stream__live { animation: oaFxLive 1.6s ease-in-out infinite; } @keyframes oaFxLive { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .6); } 50% { box-shadow: 0 0 0 6px rgba(255, 59, 92, 0); } } /* Discord */ .oa-dc { transition: transform .35s var(--oa-ease), box-shadow .35s, border-color .35s; } .oa-dc:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 50px -22px rgba(88, 101, 242, .8); } .oa-dc::before { background: conic-gradient(from var(--oa-ang), transparent 0 50%, #5865f2 78%, #b9c0ff 86%, transparent 100%); } .oa-dc::after { --f: #5865f2; } .oa-dc__logo { transition: transform .45s var(--oa-ease), box-shadow .35s; } .oa-dc:hover .oa-dc__logo { transform: scale(1.12) rotate(-8deg); box-shadow: 0 0 40px rgba(88, 101, 242, .95); } .oa-anim .oa-dc:hover .oa-dc__logo { animation: oaFxBob .9s ease-in-out infinite; } .oa-anim .oa-dc:hover .oa-dc__ring { animation-duration: 1.2s; } .oa-dc__voice li { transition: transform .35s var(--oa-ease), background-color .3s; } .oa-dc:hover .oa-dc__voice li { transform: translateX(4px); background: rgba(88, 101, 242, .24); } .oa-dc:hover .oa-dc__voice li + li { transition-delay: .06s; } .oa-dc__faces .oa-av { transition: transform .35s var(--oa-ease); } .oa-dc:hover .oa-dc__faces .oa-av { transform: translateY(-3px); } .oa-dc:hover .oa-dc__faces .oa-av:nth-child(2n) { transform: translateY(2px); } /* TeamSpeak */ .oa-tscard::before { background: conic-gradient(from var(--oa-ang), transparent 0 50%, var(--oa-a2) 78%, #fff 86%, transparent 100%); } .oa-tscard::after { --f: var(--oa-a2); } .oa-tscard__logo { position: relative; transition: background-color .35s, color .35s, box-shadow .35s, transform .45s var(--oa-ease); } .oa-tscard__wave { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--oa-a2); opacity: 0; } .oa-tscard:hover .oa-tscard__logo { background: var(--oa-a2); color: #0b0614; box-shadow: 0 0 28px rgba(var(--oa-a2r), .7); transform: scale(1.08); } .oa-anim .oa-tscard:hover .oa-tscard__wave { animation: oaFxRing 1.4s ease-out infinite; } .oa-anim .oa-tscard:hover .oa-tscard__wave--2 { animation-delay: .7s; } .oa-anim .oa-tscard:hover .oa-tscard__logo .fa-teamspeak { animation: oaFxBeat 1.4s ease-in-out infinite; } .oa-tscard:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 50px -22px rgba(var(--oa-a2r), .55); } /* Galerie */ .oa-galcard__img { position: relative; overflow: hidden; transition: transform .4s var(--oa-ease), box-shadow .35s; } .oa-galcard__img::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transition: transform .6s var(--oa-ease), filter .4s; } .oa-galcard__img::after { content: "\f00e"; position: absolute; inset: 0; display: grid; place-items: center; font: var(--fa-font-solid, 900 1em "Font Awesome 6 Free"); font-size: 18px; color: #fff; background: linear-gradient(180deg, rgba(var(--oa-ar), .15), rgba(11, 6, 20, .65)); opacity: 0; transition: opacity .3s; } .oa-galcard__img:hover, .oa-galcard__img:focus-visible { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 14px 26px -10px rgba(var(--oa-ar), .85), 0 0 0 2px rgba(var(--oa-ar), .7); z-index: 2; } .oa-galcard__img:nth-child(2n):hover { transform: translateY(-3px) rotate(1.5deg); } .oa-galcard__img:hover::before { transform: scale(1.14); filter: saturate(1.3); } .oa-galcard__img:hover::after { opacity: 1; } .oa-galcard:hover .oa-galcard__img:not(:hover) { filter: brightness(.75); } .oa-galcard__img { transition: transform .4s var(--oa-ease), box-shadow .35s, filter .35s; } /* Galerie-Symbole */ .oa-galcard__head b { display: inline-flex; align-items: center; gap: 12px; } .oa-galcard__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--oa-br), .14); color: var(--oa-b); font-size: 17px; transition: background .35s, color .35s, box-shadow .35s, transform .45s var(--oa-ease); } .oa-galcard:hover .oa-galcard__ico { background: var(--oa-b); color: #140612; box-shadow: 0 0 24px rgba(var(--oa-br), .7); transform: rotate(-8deg) scale(1.08); } .oa-anim .oa-galcard:hover .oa-galcard__ico i { animation: oaFxShutter 1.4s ease-in-out infinite; } @keyframes oaFxShutter { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(.82); } 82% { transform: scale(1.12); } } /* Streamer: Play-Knopf und Pop-up */ .oa-stream__play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; background: rgba(145, 70, 255, .9); box-shadow: 0 0 0 6px rgba(145, 70, 255, .25), 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--oa-ease); } .oa-stream__play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; } .oa-stream:hover .oa-stream__play, .oa-stream:focus-visible .oa-stream__play { opacity: 1; transform: none; } .oa-stream.is-live .oa-stream__play { opacity: .85; transform: scale(.85); } .oa-stream.is-live:hover .oa-stream__play { opacity: 1; transform: scale(1.05); } .oa-stream__live, .oa-stream__off, .oa-stream__viewers, .oa-stream__tw { z-index: 1; } .oa-streammodal .modal-title { display: flex; align-items: center; gap: 10px; } .oa-streammodal .modal-title .fa-twitch { color: #9146ff; } .oa-streammodal__grid { display: grid; gap: 12px; } .oa-streammodal__grid.has-chat { grid-template-columns: minmax(0, 1fr) 340px; } .oa-streammodal__player { border-radius: 14px; overflow: hidden; background: #000; } .oa-streammodal__player iframe { width: 100%; height: 100%; border: 0; } .oa-streammodal__chat { min-height: 300px; border-radius: 14px; overflow: hidden; background: #18181b; } .oa-streammodal__chat iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; } @media (max-width: 991.98px) { .oa-streammodal__grid.has-chat { grid-template-columns: 1fr; } .oa-streammodal__chat { height: 360px; } } /* -------------------------------------------------------------------------- Einblenden + Bewegung -------------------------------------------------------------------------- */ .oa-js .oa-reveal .oa-will-reveal:not(.is-visible) { opacity: 0; transform: translateY(26px) scale(.985); } .oa-js .oa-reveal .oa-will-reveal { transition: opacity .7s var(--oa-ease), transform .7s var(--oa-ease), box-shadow .35s, border-color .35s; } .oa-js .oa-reveal .oa-will-reveal.is-visible.hov:hover { transform: translateY(-6px); } body:not(.oa-anim) .oa-sky * { animation: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .oa-js .oa-reveal .oa-will-reveal:not(.is-visible) { opacity: 1; transform: none; } } /* Cookie-Symbol von Ilch nicht über Farbumschalter/Nach-oben legen */ #tarteaucitronRoot #tarteaucitronIcon.tarteaucitronIconTopLeft { top: auto !important; bottom: 14px !important; left: 14px !important; } #tarteaucitronRoot #tarteaucitronIcon.tarteaucitronIconTopRight, #tarteaucitronRoot #tarteaucitronIcon.tarteaucitronIconBottomRight { top: auto !important; bottom: 84px !important; right: 14px !important; } /* ========================================================================== Ilch-Module (Beitragskarten, Tabellen, Formulare, Forum, Kalender …) gemeinsame wd-Variablen → Farben des gewählten Farbschemas ========================================================================== */ /* Avatare */ .wd-avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--wd-accent), var(--wd-accent-2)); color: #fff; font-weight: 800; line-height: 1; } .wd-avatar img { width: 100%; height: 100%; object-fit: cover; } .wd-avatar--xs { width: 26px; height: 26px; font-size: 10px; border: 2px solid rgba(20, 14, 30, .9); } .wd-avatar--sm { width: 28px; height: 28px; font-size: 11px; } .wd-avatar--md { width: 42px; height: 42px; border-radius: 13px; font-size: 13px; } .wd-avatar--more { background: transparent; border: 1px dashed rgba(255, 255, 255, .22); color: var(--wd-muted); font-family: var(--wd-font-mono); font-weight: 400; } .wd-avatar--c1 { background: linear-gradient(135deg, #ff8a3d, var(--wd-accent-3)); } .wd-avatar--c2 { background: linear-gradient(135deg, #34d399, var(--wd-accent-2)); } .wd-avatar--c3 { background: linear-gradient(135deg, #facc15, #ff8a3d); } .wd-avatar--c4 { background: linear-gradient(135deg, #a78bfa, var(--wd-accent-3)); } .wd-avatar--c5 { background: linear-gradient(135deg, var(--wd-accent-2), var(--wd-accent)); } .wd-empty, .wd-cards__empty { padding: 30px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, .14); color: var(--wd-muted); text-align: center; } /* Beiträge: Karten mit Umschalter Kacheln / Liste */ .wd-posts__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; } .wd-posts__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .wd-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .05); } .wd-seg__btn { height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: #b4b4c6; font: 600 13.5px var(--wd-font-body); cursor: pointer; transition: background-color .25s, color .25s; } .wd-seg__btn:hover { color: #fff; } .wd-seg__btn.is-active { background: var(--wd-text); color: var(--wd-bg); } .wd-seg--icons .wd-seg__btn { width: 36px; padding: 0; display: grid; place-items: center; } .wd-seg--icons .wd-seg__btn.is-active { background: color-mix(in srgb, var(--wd-accent) 40%, transparent); color: #fff; } .wd-seg--icons svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .wd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .wd-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--wd-line); background: rgba(255, 255, 255, .03); transition: transform .35s var(--wd-ease), border-color .3s, box-shadow .35s; } .wd-card[hidden] { display: none; } .wd-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--wd-accent) 55%, transparent); box-shadow: 0 20px 50px -20px var(--wd-accent-ring); } .wd-card__media { position: relative; display: block; flex-shrink: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wd-panel-2); } .wd-cards .wd-card__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s var(--wd-ease); } .wd-card:hover .wd-card__img { transform: scale(1.07); } .wd-card__cat { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 10, 16, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--g) 70%, #fff); } .wd-card__top { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #facc15; color: #1a1206; font-size: 12px; } .wd-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; padding: 16px 18px 18px; } .wd-card__meta { display: flex; gap: 12px; font-family: var(--wd-font-mono); font-size: 11.5px; color: var(--wd-muted); } .wd-card__title { margin: 0; font-weight: 700; font-size: 19px; line-height: 1.22; letter-spacing: -.02em; } .wd-card__title a { color: var(--wd-text-strong); } .wd-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; } .wd-card__teaser { display: none; margin: 0; color: #a9a9bc; font-size: 14px; } .wd-card__foot { position: relative; z-index: 1; margin-top: auto; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--wd-muted); } .wd-card__by { display: flex; align-items: center; gap: 8px; min-width: 0; } .wd-card__by a { color: var(--wd-muted); } .wd-card__by a:hover { color: #fff; } .wd-card__go { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, .07); transition: transform .3s var(--wd-ease), background-color .3s; } .wd-card__go svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; } .wd-card:hover .wd-card__go { transform: rotate(-45deg); background: var(--wd-accent); } .wd-cards.is-list { grid-template-columns: minmax(0, 1fr); gap: 12px; } .wd-cards.is-list .wd-card { flex-direction: row; } .wd-cards.is-list .wd-card__media { width: 240px; aspect-ratio: auto; min-height: 150px; } .wd-cards.is-list .wd-card__teaser { display: block; } .wd-cards.is-list .wd-card__title { font-size: 20px; } @media (max-width: 575.98px) { .wd-cards.is-list .wd-card { flex-direction: column; } .wd-cards.is-list .wd-card__media { width: 100%; aspect-ratio: 16 / 10; min-height: 0; } } .wd-pagination { margin-top: 24px; display: flex; justify-content: center; } /* ========================================================================== Ilch-Module (Tabellen, Formulare, Forum, Kalender, Veranstaltungen …) ========================================================================== */ /* -------------------------------------------------------------------------- Modul-Inhalte (Forum, Tabellen, Formulare, Karten …) -------------------------------------------------------------------------- */ .wd-content { min-width: 0; } .wd-content img { max-width: 100%; height: auto; } .wd-content h2 { font-size: 26px; } .wd-content h3 { font-size: 21px; } .wd-content hr { border-color: var(--wd-line); opacity: 1; } .wd-content blockquote { border-left: 3px solid var(--wd-accent); padding: 4px 0 4px 16px; color: var(--wd-text-soft); } .wd-content .table-responsive, .wd-content > table { border: 1px solid var(--wd-line); } .table { --bs-table-bg: var(--wd-panel); --bs-table-color: var(--wd-text); --bs-table-border-color: var(--wd-line); --bs-table-striped-bg: var(--wd-panel-2); --bs-table-striped-color: var(--wd-text); --bs-table-hover-bg: #1d1d2b; --bs-table-hover-color: var(--wd-text); --bs-table-active-bg: var(--wd-accent-soft); margin-bottom: 0; } .table > thead > tr > th, .table > thead > tr > td { background: var(--wd-bg-band); color: var(--wd-muted); font-family: var(--wd-font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--wd-line-strong); } .table > :not(caption) > * > * { padding: 12px 16px; } .card { --bs-card-bg: var(--wd-panel); --bs-card-border-color: var(--wd-line); --bs-card-cap-bg: var(--wd-bg-band); --bs-card-cap-color: var(--wd-text-strong); } .card-header { font-family: var(--wd-font-display); font-weight: 700; letter-spacing: -.02em; border-bottom: 2px solid var(--wd-accent); } .list-group { --bs-list-group-bg: var(--wd-panel); --bs-list-group-border-color: var(--wd-line); --bs-list-group-action-hover-bg: var(--wd-panel-2); --bs-list-group-active-bg: var(--wd-accent); --bs-list-group-active-border-color: var(--wd-accent); --bs-list-group-active-color: var(--wd-on-accent); } .form-control, .form-select, .input-group-text { background-color: var(--wd-bg-band); border-color: var(--wd-line-strong); color: var(--wd-text); min-height: 44px; } .form-control::placeholder { color: #6e6e82; } .form-control:focus, .form-select:focus { background-color: var(--wd-bg-band); color: var(--wd-text); border-color: var(--wd-accent); box-shadow: 0 0 0 3px var(--wd-accent-ring); } .input-group-text { color: var(--wd-muted); } .form-check-input:checked { background-color: var(--wd-accent); border-color: var(--wd-accent); } .form-check-input:focus { border-color: var(--wd-accent); box-shadow: 0 0 0 3px var(--wd-accent-ring); } .form-label, .col-form-label { color: var(--wd-text-soft); } .btn { font-family: var(--wd-font-display); font-weight: 700; letter-spacing: -.02em; transition: transform .2s var(--wd-ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s; } .btn:hover { transform: translateY(-1px); } .btn-primary, .btn-success { --bs-btn-bg: var(--wd-accent); --bs-btn-border-color: var(--wd-accent); --bs-btn-color: var(--wd-on-accent); --bs-btn-hover-bg: var(--wd-accent-hover); --bs-btn-hover-border-color: var(--wd-accent-hover); --bs-btn-hover-color: var(--wd-on-accent); --bs-btn-active-bg: var(--wd-accent); --bs-btn-active-border-color: var(--wd-accent); --bs-btn-active-color: var(--wd-on-accent); --bs-btn-focus-shadow-rgb: var(--oa-ar); } .btn-secondary, .btn-outline-secondary, .btn-default { --bs-btn-bg: transparent; --bs-btn-color: var(--wd-text); --bs-btn-border-color: rgba(255,255,255,.18); --bs-btn-hover-bg: transparent; --bs-btn-hover-color: var(--wd-accent); --bs-btn-hover-border-color: var(--wd-accent); --bs-btn-active-bg: var(--wd-panel-2); --bs-btn-active-color: var(--wd-accent); --bs-btn-active-border-color: var(--wd-accent); } .btn-outline-primary { --bs-btn-color: var(--wd-accent); --bs-btn-border-color: var(--wd-accent); --bs-btn-hover-bg: var(--wd-accent); --bs-btn-hover-border-color: var(--wd-accent); --bs-btn-hover-color: var(--wd-on-accent); } .pagination { --bs-pagination-bg: var(--wd-panel); --bs-pagination-color: var(--wd-text); --bs-pagination-border-color: var(--wd-line); --bs-pagination-hover-bg: var(--wd-panel-2); --bs-pagination-hover-color: var(--wd-accent); --bs-pagination-hover-border-color: var(--wd-line-strong); --bs-pagination-active-bg: var(--wd-accent); --bs-pagination-active-border-color: var(--wd-accent); --bs-pagination-active-color: var(--wd-on-accent); --bs-pagination-disabled-bg: var(--wd-bg-band); --bs-pagination-disabled-color: #6e6e82; --bs-pagination-focus-box-shadow: 0 0 0 3px var(--wd-accent-ring); font-family: var(--wd-font-mono); font-size: 13px; } .nav-tabs { --bs-nav-tabs-border-color: var(--wd-line); --bs-nav-tabs-link-hover-border-color: var(--wd-line) var(--wd-line) var(--wd-line); --bs-nav-tabs-link-active-bg: var(--wd-panel); --bs-nav-tabs-link-active-color: var(--wd-accent); --bs-nav-tabs-link-active-border-color: var(--wd-line) var(--wd-line) var(--wd-panel); } .nav-link { color: var(--wd-text-soft); } .nav-link:hover, .nav-link:focus { color: var(--wd-accent); } .nav-pills { --bs-nav-pills-link-active-bg: var(--wd-accent); --bs-nav-pills-link-active-color: var(--wd-on-accent); } .dropdown-menu { --bs-dropdown-bg: var(--wd-panel); --bs-dropdown-border-color: var(--wd-line); --bs-dropdown-link-hover-bg: var(--wd-panel-2); --bs-dropdown-link-active-bg: var(--wd-accent); --bs-dropdown-link-active-color: var(--wd-on-accent); } .alert { border-width: 0 0 0 3px; } .alert-info { --bs-alert-bg: #0e2230; --bs-alert-color: #cff4fb; --bs-alert-border-color: var(--wd-accent-2); } .alert-success { --bs-alert-bg: #0d241c; --bs-alert-color: #d3f5e2; --bs-alert-border-color: var(--wd-ok); } .alert-warning { --bs-alert-bg: #2a2410; --bs-alert-color: #f6e6bd; --bs-alert-border-color: var(--wd-accent); } .alert-danger { --bs-alert-bg: #2c1420; --bs-alert-color: #ffd3df; --bs-alert-border-color: var(--wd-red); } .badge.bg-primary, .bg-primary { background-color: var(--wd-accent) !important; color: var(--wd-on-accent) !important; } .text-primary { color: var(--wd-accent) !important; } .progress { --bs-progress-bg: var(--wd-bg-band); --bs-progress-bar-bg: var(--wd-accent); } /* CKEditor-Inhalte auf dunklem Grund */ .ck-content { color: var(--wd-text); } .ck-content a { color: var(--wd-accent); } /* -------------------------------------------------------------------------- Forum modernisiert (Ilch-Forum-Modul) -------------------------------------------------------------------------- */ #forum .forabg { margin-bottom: 26px; } #forum .forabg ul.forenlist, #forum .forabg ul.topiclist { border: 0; background: transparent; display: flex; flex-direction: column; gap: 8px; } #forum .forabg ul.forenlist li.header, #forum .forabg ul.topiclist li.header, #forum .ilch-head, #forum .ilch-head-dark { background: transparent !important; border: 0 !important; font-family: var(--wd-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wd-muted); } #forum .forabg ul.forenlist li.header dl.title dt::before, #forum .forabg ul.topiclist li.header dl.title dt::before { content: "# "; color: var(--wd-accent); } #forum .forabg ul.forenlist li.header a, #forum .forabg ul.topiclist li.header a { color: var(--wd-text-soft); } #forum .forabg ul.forenlist.forums li.row, #forum .forabg ul.topiclist.topics li.row, #forum .forabg ul.topiclist li.row { margin: 0; background: var(--wd-panel); border: 1px solid var(--wd-line) !important; transition: background-color .25s, border-color .25s, transform .25s var(--wd-ease); } #forum .forabg ul.forenlist.forums li.row:hover, #forum .forabg ul.topiclist li.row:hover { background: var(--wd-panel-2); border-color: var(--wd-accent) !important; transform: translateX(4px); } #forum .forabg ul li dl.icon { position: relative; background-image: none !important; padding-left: 70px !important; min-height: 72px !important; } #forum .forabg ul li dl.icon::before { content: ""; position: absolute; left: 14px; top: 50%; width: 44px; height: 44px; margin-top: -22px; background: var(--wd-panel-2) center / 22px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8ea3' stroke-width='2'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); transition: background-color .25s; } #forum .forabg ul li dl.icon.topic-unread::before, #forum .forabg ul li dl.icon.topic-unread-locked::before { background-color: var(--wd-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); } #forum .forabg ul li dl.icon.topic-read-locked::before, #forum .forabg ul li dl.icon.topic-unread-locked::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8ea3' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='10'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); } #forum .forabg ul li.row:hover dl.icon::before { background-color: var(--wd-accent); } #forum .forabg ul li dl dt > a, #forum .forabg ul li dl dt .ilch-link, #forum .forabg ul li dl dt a.forumtitle, #forum .forabg ul li dl dt a.topictitle { font-family: var(--wd-font-body); font-weight: 600; font-size: 17px; color: var(--wd-text-strong); } #forum .forabg ul li dl dd.posts { font-family: var(--wd-font-mono); font-size: 12px; color: var(--wd-muted); } #forum .forabg ul li dl dd.lastpost { font-size: 13px; color: var(--wd-muted); } #forum .forabg ul li dl dd.lastpost img { border-radius: 50%; border: 2px solid var(--wd-line-strong); } #forum .desc { background: transparent !important; border: 0 !important; color: var(--wd-muted); } #forum .statistics, #forum .user-list { background: var(--wd-panel); border: 1px solid var(--wd-line); padding: 16px 18px; } #forum .ilch-bg, #forum .ilch-bg--hover { background-color: var(--wd-panel); } #forum .ilch-bg--hover:hover { background-color: var(--wd-panel-2); } #forum .ilch-border { border-color: var(--wd-line) !important; } #forum > h1, .wd-content > div > h1:first-child { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--wd-line); font-family: var(--wd-font-display); font-weight: 900; font-size: 34px; letter-spacing: -.02em; color: var(--wd-text-strong); } .ilch-link { text-decoration: none; transition: color .2s; } .ilch-link:hover { color: var(--wd-accent); } #forum .foren-actions ul { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; list-style: none; font-family: var(--wd-font-mono); font-size: 13px; } #forum .foren-actions ul li::before { content: "→ "; color: var(--wd-accent); } #forum .statistic { margin-top: 26px; border: 1px solid var(--wd-line); background: var(--wd-panel); } #forum .statistic > .header { padding: 12px 18px !important; border-bottom: 2px solid var(--wd-accent) !important; font-family: var(--wd-font-display) !important; font-weight: 800; font-size: 21px !important; letter-spacing: -.02em; color: var(--wd-text-strong) !important; } #forum .statistic .content, #forum .statistic .desc, #forum .statistic .ilch-border { background: transparent !important; border-color: var(--wd-line) !important; } #forum a, .wd-content .ilch-link { text-decoration: none; } #forum a:hover { color: var(--wd-accent); } /* ========================================================================== Ilch-Module an den FC 27 Pro Clubs-Look anpassen (Module laden ihr eigenes CSS nach dem Layout, daher etwas höhere Gewichtung) ========================================================================== */ body.wd-body { /* CKEditor 5 (Gästebuch, Forum, Kommentare, Bewerbungen …) */ --ck-color-base-background: var(--wd-bg-band); --ck-color-base-foreground: var(--wd-panel); --ck-color-base-border: var(--wd-line-strong); --ck-color-base-text: var(--wd-text); --ck-color-text: var(--wd-text); --ck-color-toolbar-background: var(--wd-panel-2); --ck-color-toolbar-border: var(--wd-line-strong); --ck-color-button-default-hover-background: #232335; --ck-color-button-default-active-background: #2a2a40; --ck-color-button-on-background: #232335; --ck-color-button-on-hover-background: #2a2a40; --ck-color-button-on-color: var(--wd-accent); --ck-color-button-action-background: var(--wd-accent); --ck-color-button-action-text: var(--wd-on-accent); --ck-color-dropdown-panel-background: var(--wd-panel); --ck-color-dropdown-panel-border: var(--wd-line-strong); --ck-color-panel-background: var(--wd-panel); --ck-color-panel-border: var(--wd-line-strong); --ck-color-input-background: var(--wd-bg-band); --ck-color-input-border: var(--wd-line-strong); --ck-color-input-text: var(--wd-text); --ck-color-labeled-field-label-background: var(--wd-panel); --ck-color-list-background: var(--wd-panel); --ck-color-list-button-hover-background: #232335; --ck-color-list-button-on-background: var(--wd-accent); --ck-color-list-button-on-text: var(--wd-on-accent); --ck-color-focus-border: var(--wd-accent); --ck-color-shadow-drop: rgba(0, 0, 0, .4); --ck-color-tooltip-background: #050508; /* FullCalendar 7 (Kalender) */ --oa-classic-button: #191925; --oa-classic-button-border: rgba(255,255,255,.16); --oa-classic-button-strong: #0f0f17; --oa-classic-button-strong-border: var(--wd-accent); --oa-classic-button-foreground: var(--wd-text); --oa-classic-button-outline: color-mix(in srgb, var(--wd-accent) 40%, transparent); --oa-classic-primary: var(--wd-accent-2); --oa-classic-primary-foreground: #ffffff; --oa-classic-highlight: color-mix(in srgb, var(--wd-accent-2) 20%, transparent); --oa-classic-today: color-mix(in srgb, var(--wd-accent) 12%, transparent); --oa-classic-now: var(--wd-red); --oa-classic-background: transparent; --oa-classic-faint: rgba(255, 255, 255, .04); --oa-classic-muted: rgba(255, 255, 255, .08); --oa-classic-strong: rgba(255, 255, 255, .14); --oa-classic-foreground: var(--wd-text); --oa-classic-faint-foreground: #6e6e82; --oa-classic-muted-foreground: var(--wd-muted); --oa-classic-border: var(--wd-line); --oa-classic-strong-border: var(--wd-line-strong); } .wd-body .ck.ck-editor__main > .ck-editor__editable { background: var(--wd-bg-band); color: var(--wd-text); } .wd-body .ck.ck-toolbar { border-color: var(--wd-line-strong); } .wd-body .ck.ck-button, .wd-body .ck.ck-button .ck-button__label, .wd-body .ck.ck-dropdown__button { color: var(--wd-text); } .wd-body .ck-content .table td, .wd-body .ck-content table td, .wd-body .ck-content table th { border-color: var(--wd-line); } .wd-body .ck-content blockquote { border-left-color: var(--wd-accent); } /* Kalender */ .wd-body .fc { background: var(--wd-panel-glass); padding: 12px; border: 1px solid var(--wd-line); } .wd-body .fc .fc-toolbar-title, .wd-body .fc h2 { font-family: var(--wd-font-display); font-weight: 800; letter-spacing: -.02em; } .wd-body .fc a { color: var(--wd-text); } .wd-body .calendar #loading { background-color: var(--wd-panel); } .wd-body .calendar .calendarbox-event-count { background-color: var(--wd-accent); color: var(--wd-on-accent); } /* Veranstaltungen */ .wd-body .event-list > li { box-shadow: none; border: 1px solid var(--wd-line); background: var(--wd-panel-glass); transition: border-color .25s, transform .25s var(--wd-ease); } .wd-body .event-list > li:hover { border-color: var(--wd-accent-2); transform: translateY(-2px); } .wd-body .event-list > li > time { background-color: var(--wd-accent); color: #ffffff; font-family: var(--wd-font-display); } .wd-body .event-list > li:nth-child(even) > time { background-color: var(--wd-accent-3); color: #fff; } .wd-body .event-list > li > time > .day { font-weight: 900; } .wd-body .event-list > li .title, .wd-body .event-list > li .title a { font-family: var(--wd-font-display); font-weight: 800; color: var(--wd-text-strong); } .wd-body .event-list > li .title a:hover { color: var(--wd-accent); } .wd-body .event-list > li > .info > ul > li:hover, .wd-body .event-list > li > .adminInfo > ul > li:hover { color: var(--wd-text); background-color: var(--wd-panel-2); } .wd-body .event-list > li > .info > ul, .wd-body .event-list > li > .info > ul > li { border-color: var(--wd-line) !important; } .wd-body .datePic { color: var(--wd-text); background-color: var(--wd-panel-2); border: 1px solid var(--wd-line); } .wd-body .edit:hover a, .wd-body .del:hover a { background-color: var(--wd-panel-2) !important; } /* Downloads, Galerie, Benutzer: Listen-Panels */ .wd-body .lib-panel, .wd-body .lib-panel .row, .wd-body .lib-panel .col-md-6, .wd-body .lib-panel .lib-row.lib-header { background-color: var(--wd-panel) !important; color: var(--wd-text); } .wd-body .lib-panel { border: 1px solid var(--wd-line); } .wd-body .lib-panel .lib-row.lib-header .lib-header-seperator { background-color: var(--wd-line-strong); } .wd-body .lib-panel img { max-width: 100%; } /* Geschichte (Zeitleiste) */ .wd-body #cd-timeline::before { background: var(--wd-line-strong); } .wd-body .cd-timeline-content { background: var(--wd-panel); border-color: var(--wd-line); color: var(--wd-text); box-shadow: none; } .wd-body .cd-timeline-content h3 { background-color: var(--wd-panel-2); color: var(--wd-text-strong); } .wd-body .cd-timeline-content::before { border-right-color: var(--wd-line); } .wd-body .cd-timeline-block:nth-child(even) .cd-timeline-content::before { border-right-color: transparent; border-left-color: var(--wd-line); } .wd-body .cd-timeline-content .cd-date { color: var(--wd-muted); } .wd-body .cd-timeline-img { box-shadow: 0 0 0 4px var(--wd-bg), inset 0 2px 0 rgba(0, 0, 0, .08), 0 3px 0 4px rgba(0, 0, 0, .05); } /* Statistik */ .wd-body .stats-default, .wd-body .stats .card { background-color: var(--wd-panel); border-color: var(--wd-line); } .wd-body .ilch-body, .wd-body .stats .card-title { color: var(--wd-text) !important; } .wd-body .progress { background-color: var(--wd-bg-band); } .wd-body .box > .icon > .image { background: var(--wd-panel-2); border-color: var(--wd-line); } .wd-body .box > .icon > .info { border-color: var(--wd-line); background: var(--wd-panel); } /* Registrierung, Benutzerpanel, Nachrichten */ .wd-body .user-regist-step .step { background-color: var(--wd-panel); border-color: var(--wd-line); color: var(--wd-muted); } .wd-body .user-regist-step .step:last-child { border-color: var(--wd-line); } .wd-body .user-regist-step .step:hover { color: var(--wd-accent); } .wd-body .user-regist-step .activestep { color: var(--wd-text-strong); border-color: var(--wd-accent) !important; background: var(--wd-panel-2); } .wd-body .card-body.ck-content[style] { background: var(--wd-panel-2) !important; color: var(--wd-text); } body.wd-body input[readonly] { background-color: var(--wd-bg-band) !important; } .wd-body .profile-sidebar, .wd-body .profile-content { background: var(--wd-panel); border: 1px solid var(--wd-line); color: var(--wd-text); } .wd-body .profile-name, .wd-body .profile-sidebar .profile-usermenu ul li { border-color: var(--wd-line); } .wd-body .profile-sidebar .profile-usermenu ul li a { color: var(--wd-text-soft); } .wd-body .profile-sidebar .profile-usermenu ul li a:hover { background-color: var(--wd-panel-2); color: var(--wd-accent); } .wd-body #panel .nav > li > a.active { background-color: var(--wd-panel-2); color: var(--wd-accent); } .wd-body .userlist img.profile-image { border-color: var(--wd-line); } .wd-body .chat, .wd-body .chat .chat-wrapper .message-list-wrapper, .wd-body .chat .chat-wrapper .chat-list-wrapper { border-color: var(--wd-line); background: var(--wd-panel); } .wd-body .chat .chat-wrapper .chat-list-wrapper .chat-list a, .wd-body .chat .chat-wrapper .message-info .back-chat-list i { color: var(--wd-text); } .wd-body .chat .chat-wrapper .chat-list-wrapper .chat-list li { border-color: var(--wd-line); } .wd-body .chat .chat-wrapper .chat-list-wrapper .chat-list li:hover { background-color: var(--wd-panel-2); } .wd-body .chat .chat-wrapper .chat-list-wrapper .chat-list li.active, .wd-body .chat .chat-wrapper .chat-list-wrapper .chat-list li.active .body .timestamp { background-color: #232335; color: var(--wd-text-strong); } .wd-body .chat .chat-wrapper .chat-list-info, .wd-body .chat .chat-wrapper .message-info { background-color: var(--wd-panel-2); border-color: var(--wd-line); } .wd-body .chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message, .wd-body .chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message.well { background-color: var(--wd-panel-2); color: var(--wd-text); } .wd-body .chat .chat-wrapper .message-list-wrapper .message-list li.left .body .message:before { border-color: transparent var(--wd-panel-2) transparent transparent; } /* Shop */ .wd-body .shop-card-index { background: var(--wd-panel); border-color: var(--wd-line) !important; } .wd-body .shop-card-index:hover { border-color: var(--wd-accent) !important; } .wd-body .show .table.border, .wd-body .cart table td { border-color: var(--wd-line) !important; } .wd-body .order textarea.accepttext { background-color: var(--wd-bg-band); color: var(--wd-text); } .wd-body h1 a span.badge { background: var(--wd-accent); border-color: var(--wd-accent); color: var(--wd-on-accent); } /* Umfragen, Links, Partner, FAQ, Regeln, Jobs, Shoutbox */ .wd-body .vote .progress, .wd-body .progress { background-color: var(--wd-bg-band); } .wd-body .card-header.bg-primary, .wd-body .card .bg-primary { color: var(--wd-on-accent) !important; } .wd-body .accordion { --bs-accordion-bg: var(--wd-panel); --bs-accordion-border-color: var(--wd-line); --bs-accordion-btn-bg: var(--wd-panel); --bs-accordion-active-bg: var(--wd-panel-2); --bs-accordion-active-color: var(--wd-accent); --bs-accordion-btn-color: var(--wd-text); --bs-accordion-color: var(--wd-text); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--wd-accent-ring); } .wd-body .text-muted { color: var(--wd-muted) !important; } .wd-body .bg-light { background-color: var(--wd-panel-2) !important; color: var(--wd-text); } .wd-body .bg-white { background-color: var(--wd-panel) !important; } .wd-body .text-dark, .wd-body .text-black { color: var(--wd-text) !important; } .wd-body .border, .wd-body .border-top, .wd-body .border-bottom { border-color: var(--wd-line) !important; } .wd-body .well { background: var(--wd-panel); border: 1px solid var(--wd-line); padding: 14px; } .wd-body .page-header, .wd-body .card-footer { border-color: var(--wd-line); } .wd-body .breadcrumb { --bs-breadcrumb-divider-color: var(--wd-muted); --bs-breadcrumb-item-active-color: var(--wd-text-soft); } .wd-body .modal-content { --bs-modal-bg: var(--wd-panel); --bs-modal-border-color: var(--wd-line); } .wd-body .popover { --bs-popover-bg: var(--wd-panel); --bs-popover-border-color: var(--wd-line); --bs-popover-header-bg: var(--wd-panel-2); --bs-popover-body-color: var(--wd-text); } .wd-body .tooltip { --bs-tooltip-bg: #050508; } .wd-body .form-select { background-color: var(--wd-bg-band); color: var(--wd-text); } .wd-body select option { background: var(--wd-panel); color: var(--wd-text); } .wd-body input[type="date"], .wd-body input[type="time"], .wd-body input[type="datetime-local"] { color-scheme: dark; } .wd-body .captcha img, .wd-body img[src*="captcha"] { border-radius: 2px; } /* Admin-Hinweis (nur für Admins sichtbar) */ .wd-adminhint { margin: 0; padding: 14px 18px; border: 1px dashed color-mix(in srgb, var(--wd-accent) 55%, transparent); background: color-mix(in srgb, var(--wd-accent) 8%, transparent); color: var(--wd-text, #e8f1f6); font-size: 14px; line-height: 1.6; } .wd-adminhint i { color: var(--wd-accent); margin-right: 6px; } /* Veranstaltungen: Kartenhintergrund erzwingen – manche Ilch-Installationen/Module bringen einen hellen Hintergrund mit */ body.wd-body .event-list > li, body.wd-body .event-list > li > .info, body.wd-body .event-list > li > .adminInfo, body.wd-body .event-list > li > .info > ul, body.wd-body .event-list > li > .info > ul > li { background: transparent !important; background-color: transparent !important; color: var(--wd-text) !important; } body.wd-body .event-list > li { background: var(--wd-panel-glass) !important; box-shadow: none !important; } body.wd-body .event-list > li > .info .title a { color: var(--wd-text-strong) !important; } body.wd-body .event-list > li > .info .title a:hover { color: var(--wd-accent) !important; } body.wd-body .event-list > li > .info .desc, body.wd-body .event-list > li > .info .text-muted { color: var(--wd-muted) !important; } body.wd-body .event-list > li > .info > ul > li a, body.wd-body .event-list > li > .info > ul > li i { color: inherit !important; } body.wd-body .event-list > li > .info > ul > li:hover, body.wd-body .event-list > li > .adminInfo > ul > li:hover { background-color: var(--wd-panel-2) !important; } body.wd-body .event-list > li > .adminInfo > ul { border-color: var(--wd-line) !important; } body.wd-body .event-list .edit a, body.wd-body .event-list .del a { color: var(--wd-accent-2) !important; } body.wd-body .event-list .edit:hover a, body.wd-body .event-list .del:hover a { background-color: var(--wd-panel-2) !important; } /* Modul-Navigationsleisten (Veranstaltungen u. a.) im FC 27 Pro Clubs-Stil */ body.wd-body .wd-content .navbar.bg-body-tertiary, body.wd-body .wd-content .navbar.bg-light { background: var(--wd-panel) !important; border-color: var(--wd-line) !important; } body.wd-body .wd-content .navbar .navbar-brand { color: var(--wd-text-strong); font-family: var(--wd-font-display); letter-spacing: -.02em; } body.wd-body .wd-content .navbar .nav-link { color: var(--wd-muted); } body.wd-body .wd-content .navbar .nav-link:hover, body.wd-body .wd-content .navbar .nav-link.active { color: var(--wd-accent); } /* FC 27 Pro Clubs: runde Ecken und Glas auch in den Modulen */ .wd-content .card, .wd-content .table-responsive, .wd-content > table, .wd-body .accordion, .wd-body .lib-panel, .wd-body .well, .wd-body .fc, .wd-body .profile-sidebar, .wd-body .profile-content, .wd-body .shop-card-index { border-radius: 16px; overflow: hidden; } .wd-body .event-list > li { border-radius: 16px; overflow: hidden; } .wd-content .table-responsive > .table { margin: 0; } .btn { font-family: var(--wd-font-body); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 10px; } .card-header { font-family: var(--wd-font-body); font-weight: 700; letter-spacing: -.01em; text-transform: none; border-bottom: 1px solid var(--wd-line); } #forum .forabg ul.forenlist.forums li.row, #forum .forabg ul.topiclist li.row { border-radius: 14px; } #forum .forabg ul li dl.icon::before { border-radius: 12px; } #forum .statistic, #forum .statistics, #forum .user-list { border-radius: 16px; } .wd-body .user-regist-step .step { border-radius: 12px; } /* Ilch-Grundstil (ilch.css) überschreiben: Seitenzahlen, Veranstaltungs-Boxen */ .wd-body .pagination { gap: 4px; } .wd-body .pagination > .page-item > .page-link, .wd-body .pagination > li > .page-link { color: var(--wd-text); border-radius: 10px; min-width: 38px; text-align: center; } .wd-body .pagination > .active { --bs-pagination-active-bg: var(--wd-accent); --bs-pagination-active-border-color: var(--wd-accent); } .wd-body .pagination > .active > .page-link { color: #fff; } .wd-body .page-header { border-color: var(--wd-line); } .wd-body .eventBoxHead, .wd-body .eventBoxBottom, .wd-body .eventBoxContent, .wd-body .eventCommentSubmit { border-color: var(--wd-line) !important; background: rgba(255, 255, 255, .025); } .wd-body .eventBoxHead { border-radius: 14px 14px 0 0; } .wd-body .eventBoxBottom:last-child, .wd-body .eventBoxContent { border-radius: 0 0 14px 14px; } .wd-body .headPic { border-color: var(--wd-line); border-radius: 14px; } .wd-body .datePic { border-radius: 10px; } .wd-tile__label--row > span { white-space: nowrap; } .wd-tile__label--row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Forum: Profilbild immer links neben dem letzten Beitrag, Text daneben (statt mal darüber, mal daneben) */ #forum .forabg ul li dl dd.lastpost { display: flex; align-items: flex-start; gap: 12px; } #forum .forabg ul li dl dd.lastpost > .float-start { float: none !important; } #forum .forabg ul li dl dd.lastpost > .float-start:first-child { flex: none; } #forum .forabg ul li dl dd.lastpost > .float-start:first-child img { width: 40px !important; height: 40px; padding: 0 !important; object-fit: cover; } #forum .forabg ul li dl dd.lastpost > .float-start:last-child { min-width: 0; line-height: 1.5; } /* Sprungmarken (#clanwars, #news …) nicht unter dem mitlaufenden Header verstecken */ .oa-sec, .oa-banner { scroll-margin-top: 110px; } /* News-Bilder (Startseite und News-Seite): Schatten von unten, feine Scanlines, Lichtstreif läuft durch, Leuchtrand in der Akzentfarbe beim Drüberfahren */ .oa-news__media::before, .wd-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 30%, transparent 55%, rgba(var(--oa-ar), .18) 82%, rgba(3, 6, 5, .85) 100%); box-shadow: inset 0 0 0 1px rgba(var(--oa-ar), .0); transition: box-shadow .35s; } .oa-news__media::after, .wd-card__media::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(var(--oa-ar), .25) 55%, transparent); transform: translateX(-120%) skewX(-18deg); opacity: 0; } .oa-anim .oa-news__media::after, .oa-anim .wd-card__media::after { animation: oaImgSweep 7s ease-in-out infinite; } .oa-anim .oa-news:nth-child(2) .oa-news__media::after, .oa-anim .wd-card:nth-child(2n) .wd-card__media::after { animation-delay: 2.3s; } .oa-anim .oa-news:nth-child(3) .oa-news__media::after, .oa-anim .wd-card:nth-child(3n) .wd-card__media::after { animation-delay: 4.6s; } .oa-news:hover .oa-news__media::before, .wd-card:hover .wd-card__media::before { box-shadow: inset 0 0 0 1px rgba(var(--oa-ar), .55), inset 0 -40px 60px -30px rgba(var(--oa-ar), .55); } @keyframes oaImgSweep { 0%, 62% { transform: translateX(0) skewX(-18deg); opacity: 0; } 66% { opacity: 1; } 90% { transform: translateX(420%) skewX(-18deg); opacity: 1; } 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; } } .wd-card__cat, .wd-card__top, .oa-news__cat, .oa-news__badge { z-index: 2; } /* -------------------------------------------------------------------------- Discord-Karte: umlaufender Rahmen, pulsierendes Logo mit Ringen, Stimmkanäle -------------------------------------------------------------------------- */ .oa-side-card--dc { position: relative; overflow: hidden; gap: 12px; padding-top: 0; border-color: transparent; } .oa-side-card--dc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--oa-ang, 0deg), rgba(88, 101, 242, .25), #5865f2, var(--oa-a), rgba(88, 101, 242, .25) 60%, rgba(88, 101, 242, .25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 1; } .oa-anim .oa-side-card--dc::before { animation: oaSpinBorder 5s linear infinite; } .oa-dc__hero { position: relative; height: 92px; margin: 0 -20px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 140% at 50% 0%, rgba(88, 101, 242, .55), rgba(88, 101, 242, .08) 60%, transparent 75%); } .oa-dc__wave { position: absolute; inset: auto -20% -40px; height: 80px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(var(--oa-ar), .35), transparent 70%); filter: blur(6px); } .oa-anim .oa-dc__wave { animation: oaDcWave 6s ease-in-out infinite; } .oa-dc__logo { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-top: 12px; border-radius: 18px; background: #5865f2; color: #fff; font-size: 30px; box-shadow: 0 0 26px rgba(88, 101, 242, .8); } .oa-anim .oa-dc__logo { animation: oaDcFloat 3.2s ease-in-out infinite; } .oa-dc__ring { position: absolute; inset: -6px; border-radius: 22px; border: 2px solid rgba(88, 101, 242, .7); opacity: 0; } .oa-anim .oa-dc__ring { animation: oaDcRing 2.4s ease-out infinite; } .oa-anim .oa-dc__ring--2 { animation-delay: 1.2s; } .oa-side-card__head--center { justify-content: center; text-align: center; } .oa-side-card__head--center .oa-side-card__sub { justify-content: center; } .oa-dc__text { margin: 0; text-align: center; font-size: 13.5px; color: #c6ceda; line-height: 1.5; } .oa-dc__faces { justify-content: center; } .oa-dc__av { position: relative; overflow: visible !important; } .oa-dc__av img { border-radius: 50%; } .oa-dc__av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #0b0f16; background: #23a55a; } .oa-dc__av.is-idle::after { background: #f0b232; } .oa-dc__av.is-dnd::after { background: #f23f43; } .oa-dc__voice { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .oa-dc__voice li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 10px; background: rgba(88, 101, 242, .12); font-size: 13px; color: #dfe4ff; } .oa-dc__voice li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oa-dc__voice li b { font-family: var(--oa-display); font-size: 12px; color: #fff; } .oa-btn--dc { background: #5865f2 !important; color: #fff !important; box-shadow: 0 0 22px rgba(88, 101, 242, .55) !important; justify-content: center; } .oa-btn--dc:hover { box-shadow: 0 0 34px rgba(88, 101, 242, .9) !important; } @property --oa-ang { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes oaSpinBorder { to { --oa-ang: 360deg; } } @keyframes oaDcFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-4deg); } } @keyframes oaDcRing { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } } @keyframes oaDcWave { 0%, 100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } } /* -------------------------------------------------------------------------- Slider links am Rand: Discord und TeamSpeak fahren beim Drüberfahren heraus -------------------------------------------------------------------------- */ .oa-dock { position: fixed; left: 0; top: 50%; z-index: 1040; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; transform: translateY(-50%); pointer-events: none; } /* nur die sichtbaren Reiter nehmen Klicks an – die Fläche daneben bleibt für den Seiteninhalt frei */ .oa-dock__item { pointer-events: auto; } .oa-dock__item { position: relative; display: flex; align-items: center; gap: 0; height: 52px; padding: 0; border-radius: 0 14px 14px 0; background: rgba(8, 10, 16, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(var(--oa-ar), .3); border-left: 0; color: #fff; text-decoration: none; transform: translateX(calc(-100% + 52px)); transition: transform .45s var(--oa-ease), box-shadow .3s, border-color .3s; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9); } .oa-dock__item:hover, .oa-dock__item:focus-visible { transform: translateX(0); color: #fff; border-color: var(--oa-a); box-shadow: 0 0 26px rgba(var(--oa-ar), .45); } .oa-dock__icon { order: 2; display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; margin-left: 12px; font-size: 22px; color: var(--oa-a); } .oa-dock__text { order: 1; display: flex; flex-direction: column; padding: 0 4px 0 18px; line-height: 1.25; white-space: nowrap; } .oa-dock__text b { font-family: var(--oa-display); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; } .oa-dock__text small { font-size: 12px; color: #b3bdc9; } .oa-dock__item--dc { border-color: rgba(88, 101, 242, .55); } .oa-dock__item--dc .oa-dock__icon { color: #fff; background: #5865f2; border-radius: 0 13px 13px 0; } .oa-dock__item--ts .oa-dock__icon { border-radius: 0 13px 13px 0; background: rgba(var(--oa-ar), .14); } .oa-dock__item--dc:hover { border-color: #5865f2; box-shadow: 0 0 26px rgba(88, 101, 242, .6); } .oa-anim .oa-dock__item .oa-dock__icon i { animation: oaDockPulse 3.4s ease-in-out infinite; } .oa-anim .oa-dock__item--ts .oa-dock__icon i { animation-delay: 1.7s; } @keyframes oaDockPulse { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.18); } } @media (max-width: 767.98px) { .oa-dock { top: auto; bottom: 96px; transform: none; gap: 8px; } .oa-dock__item { height: 44px; transform: translateX(calc(-100% + 44px)); } .oa-dock__icon { flex-basis: 44px; width: 44px; height: 44px; font-size: 19px; } } /* ========================================================================== Gemeinsamer Grundstil der Startseite (überschreibt die gemeinsamen Grundstile oben) ========================================================================== */ /* ---------- Grundlagen ---------- */ body.oa-body { font-size: 17px; letter-spacing: .005em; font-variant-numeric: lining-nums; } .container-xl { max-width: 1340px; } .oa-ico { width: 24px; height: 24px; stroke-width: 1.6; } .oa-stop-a { stop-color: var(--oa-a); } .oa-stop-a2 { stop-color: var(--oa-a2); } .oa-stop-b { stop-color: var(--oa-b); } .oa-hot { color: var(--oa-a2); background: linear-gradient(180deg, var(--oa-a2), var(--oa-a)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(var(--oa-ar), .45)); } .oa-kick { display: inline-flex; align-items: center; gap: 12px; font-family: var(--oa-body); font-weight: 800; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--oa-a2); } .oa-kick::before, .oa-kick::after { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--oa-a); transform: rotate(45deg); box-shadow: 0 0 10px rgba(var(--oa-ar), .8); } .oa-kick::before { margin-right: 2px; } .oa-kick::after { display: none; } /* Hintergrund: Sternenhimmel, Glut-Schein und Shroud-Nebel */ .oa-sky--glow { background: var(--oa-page-image, none) center / cover no-repeat, radial-gradient(1000px 640px at 88% -6%, rgba(var(--oa-ar), .16), transparent 62%), radial-gradient(900px 700px at -6% 80%, rgba(var(--oa-br), .14), transparent 62%), radial-gradient(800px 500px at 50% 115%, rgba(var(--oa-ar), .12), transparent 60%), var(--oa-bg); } .oa-sky__grid { position: absolute; left: 0; right: 0; bottom: 0; height: 40vh; opacity: .55; background: radial-gradient(60% 80% at 20% 100%, rgba(var(--oa-br), .22), transparent 70%), radial-gradient(50% 70% at 80% 100%, rgba(var(--oa-br), .16), transparent 70%); filter: blur(10px); } .oa-anim .oa-sky__grid { animation: oaMistDrift 22s ease-in-out infinite alternate; } @keyframes oaMistDrift { from { transform: translateX(-4%); } to { transform: translateX(4%); } } .oa-sky__haze { background: radial-gradient(circle, rgba(var(--oa-br), .1), transparent 62%); } /* ---------- Karten: dunkler Stein, feine Goldkante, Runen-Ecken ---------- */ .oa-card { position: relative; border-radius: var(--oa-r); background: linear-gradient(180deg, rgba(26, 20, 32, .86), rgba(12, 9, 16, .9)); border: 1px solid rgba(var(--oa-a2r), .14); box-shadow: inset 0 1px 0 rgba(255, 240, 210, .05), 0 24px 50px -30px rgba(0, 0, 0, .95); transition: transform .35s var(--oa-ease), box-shadow .35s, border-color .35s; } .oa-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient(from var(--oa-ang), transparent 0 55%, var(--oa-a) 75%, var(--oa-a2) 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; } .oa-card::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border: 1.5px solid var(--oa-a2); background: var(--oa-bg); transform: rotate(45deg); opacity: .6; pointer-events: none; transition: opacity .3s, box-shadow .3s; } .oa-card.hov:hover::after { opacity: 1; box-shadow: 0 0 12px rgba(var(--oa-a2r), .9); } .hov:hover, a.hov:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 240, 210, .08), 0 26px 50px -22px rgba(var(--oa-ar), .55); } .glass { border-radius: var(--oa-r); border-color: rgba(var(--oa-a2r), .14); } /* ---------- Buttons: Glut gefüllt, Gold-Umriss ---------- */ .oa-btn { position: relative; overflow: hidden; height: 50px; padding: 0 26px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--oa-a) 75%, #fff), var(--oa-a) 55%, color-mix(in srgb, var(--oa-a) 70%, #000)); color: #1a0b02; font-family: var(--oa-head); font-weight: 700; font-size: 14px; letter-spacing: .14em; border: 1px solid color-mix(in srgb, var(--oa-a2) 70%, transparent); box-shadow: 0 0 24px rgba(var(--oa-ar), .45), inset 0 1px 0 rgba(255, 255, 255, .4); } .oa-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-24deg); transition: left .6s var(--oa-ease); } .oa-btn:hover { color: #1a0b02; transform: translateY(-2px); box-shadow: 0 0 38px rgba(var(--oa-ar), .85), 0 0 12px rgba(var(--oa-a2r), .6); } .oa-btn:hover::before { left: 130%; } .oa-btn:hover svg { transform: translateX(5px); } .oa-btn--ghost { background: rgba(10, 7, 14, .5); color: #fff; border: 1px solid rgba(var(--oa-a2r), .5); box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .oa-btn--ghost:hover { color: #fff; background: rgba(var(--oa-ar), .14); border-color: var(--oa-a2); box-shadow: 0 0 22px rgba(var(--oa-ar), .4); } .oa-btn--sm { height: 42px; font-size: 13px; padding: 0 18px; } .oa-btn--block { height: 46px; } .oa-btn--dc { background: #5865f2; color: #fff; border-color: #7983f5; box-shadow: 0 0 22px rgba(88, 101, 242, .5); } .oa-btn--dc:hover { color: #fff; box-shadow: 0 0 34px rgba(88, 101, 242, .9); } .oa-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--oa-body); font-weight: 800; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--oa-a2); } .oa-more svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; transition: transform .25s var(--oa-ease); } .oa-more:hover { color: #fff; } .oa-more:hover svg { transform: translateX(5px); } /* ---------- Topbar + Header ---------- */ .oa-topbar { background: rgba(6, 4, 9, .84); border-bottom: 1px solid rgba(var(--oa-a2r), .1); font-family: var(--oa-body); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--oa-soft); } .oa-topbar__race { display: inline-flex; align-items: center; gap: 8px; color: var(--oa-soft); } .oa-topbar__race:hover { color: #fff; } .oa-topbar__flag { width: 10px; height: 14px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(circle at 50% 75%, #fff6d8, var(--oa-a2) 35%, var(--oa-a) 70%); box-shadow: 0 0 10px rgba(var(--oa-ar), .9); } .oa-anim .oa-topbar__flag { animation: oaFlicker 1.1s ease-in-out infinite alternate; transform-origin: 50% 100%; } @keyframes oaFlicker { 0% { transform: scale(.9, 1) rotate(-3deg); } 50% { transform: scale(1.05, 1.12) rotate(2deg); } 100% { transform: scale(.95, .96) rotate(-1deg); } } .oa-topbar__clock { font-family: var(--oa-body); font-weight: 800; color: var(--oa-a2); letter-spacing: .06em; font-variant-numeric: tabular-nums; } .oa-header { background: rgba(10, 7, 14, .62); border-bottom: 1px solid rgba(var(--oa-a2r), .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .oa-header.is-scrolled { background: rgba(10, 7, 14, .93); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), 0 1px 0 rgba(var(--oa-ar), .3); } .oa-brand__name { font-family: var(--oa-head); font-weight: 900; font-size: 23px; line-height: 1; letter-spacing: .06em; color: #fff; text-shadow: 0 0 18px rgba(var(--oa-ar), .45); } .oa-brand__sub { font-family: var(--oa-body); font-weight: 700; font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--oa-a2); } .oa-nav__link { font-family: var(--oa-head); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #ece4d6; } .oa-nav__link::after { height: 2px; background: linear-gradient(90deg, transparent, var(--oa-a2), transparent); box-shadow: 0 0 10px rgba(var(--oa-a2r), .9); } .oa-nav__link:hover, .oa-nav__item.is-active > .oa-nav__link, .oa-nav__item--more.is-active-child > .oa-nav__link { color: var(--oa-a2); text-shadow: 0 0 14px rgba(var(--oa-ar), .6); } .oa-header__tools .oa-btn:not(.oa-btn--ghost) { height: 44px; } /* Logo-Zeichen: Flamme in Runen-Sechseck */ .oa-badge { width: 46px; height: 46px; flex-shrink: 0; overflow: visible; transition: transform .45s var(--oa-ease); } .oa-badge__frame { fill: rgba(var(--oa-ar), .12); stroke: var(--oa-a2); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(var(--oa-ar), .7)); } .oa-badge__wheel { fill: none; stroke: rgba(var(--oa-a2r), .45); stroke-width: 1.2; stroke-dasharray: 3 3; } .oa-badge__spokes { fill: none; stroke: var(--oa-a2); stroke-width: 2.4; stroke-linecap: round; } .oa-badge__bolt { fill: var(--oa-a); filter: drop-shadow(0 0 5px rgba(var(--oa-ar), .95)); transform-box: fill-box; transform-origin: 50% 100%; } .oa-anim .oa-badge__bolt { animation: oaFlicker 1.3s ease-in-out infinite alternate; } .oa-anim .oa-badge__wheel { animation: oaSpin 30s linear infinite; transform-box: fill-box; transform-origin: center; } .oa-brand:hover .oa-badge { transform: scale(1.08); } .oa-brand:hover .oa-badge__bolt { fill: var(--oa-a2); } .oa-pre { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: radial-gradient(700px 480px at 50% 55%, rgba(var(--oa-ar), .16), transparent 70%), radial-gradient(900px 500px at 50% 110%, rgba(var(--oa-br), .2), transparent 70%), #07050b; transition: opacity .6s var(--oa-ease), visibility .6s; } .oa-pre.is-hidden { opacity: 0; visibility: hidden; } .oa-pre__inner { width: min(560px, 90vw); text-align: center; } .oa-pre__lights { display: flex; justify-content: center; gap: 16px; margin-bottom: 6px; } .oa-pre__lights i { width: 18px; height: 18px; border: 1.5px solid rgba(var(--oa-a2r), .3); transform: rotate(45deg); background: rgba(255, 255, 255, .02); transition: background-color .25s, box-shadow .25s, border-color .25s; } .oa-pre__lights i.is-on { border-color: var(--oa-a2); background: rgba(var(--oa-ar), .5); box-shadow: 0 0 14px rgba(var(--oa-ar), .95), 0 0 34px rgba(var(--oa-ar), .5); } .oa-pre.is-go .oa-pre__lights i { border-color: #fff6d8; background: var(--oa-a2); box-shadow: 0 0 18px var(--oa-a2), 0 0 44px rgba(var(--oa-a2r), .7); } .oa-pre__road { position: relative; height: 2px; margin: 0 auto 22px; width: 70%; background: linear-gradient(90deg, transparent, rgba(var(--oa-a2r), .5), transparent); } .oa-pre__road i { display: none; } .oa-pre__name { font-family: var(--oa-head); font-weight: 900; font-size: clamp(28px, 5.6vw, 44px); line-height: 1.1; letter-spacing: .06em; color: #fff; text-shadow: 0 0 22px rgba(var(--oa-ar), .7); } .oa-pre__logo { max-height: 70px; margin: 0 auto 10px; display: block; } .oa-pre__bar { margin-top: 18px; } .oa-pre__meta { display: flex; justify-content: space-between; font-family: var(--oa-body); font-weight: 700; letter-spacing: .1em; font-size: 14px; color: var(--oa-soft); margin-bottom: 8px; } .oa-pre__track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; border: 1px solid rgba(var(--oa-a2r), .14); } .oa-pre__track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--oa-b), var(--oa-a), var(--oa-a2)); box-shadow: 0 0 14px rgba(var(--oa-ar), .9); } .oa-pre__skip { margin-top: 18px; padding: 6px 12px; border: 0; background: none; color: var(--oa-muted); font-family: var(--oa-body); font-weight: 800; letter-spacing: .2em; font-size: 12px; text-transform: uppercase; cursor: pointer; } .oa-pre__skip:hover { color: #fff; } /* ========================================================================== HERO ========================================================================== */ .oa-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(620px, 92vh, 920px); padding: 120px 0 110px; overflow: hidden; } .oa-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #07050b; } .oa-hero__video, .oa-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: center / cover no-repeat; } .oa-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .oa-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .oa-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 5, 11, .9) 0%, rgba(7, 5, 11, .62) 34%, rgba(7, 5, 11, 0) 62%), linear-gradient(0deg, var(--oa-bg) 0%, transparent 24%); pointer-events: none; } .oa-hero__grid { position: relative; width: 100%; } .oa-hero__copy { max-width: 660px; } .oa-hero__title { margin: 22px 0 26px; font-family: var(--oa-head); font-weight: 900; font-size: clamp(40px, 5vw, 78px); line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; } .oa-hero__line { position: relative; display: block; white-space: nowrap; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .7); } .oa-hero__line--hot { color: var(--oa-a2); background: linear-gradient(180deg, #fff6d8 0%, var(--oa-a2) 35%, var(--oa-a) 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(var(--oa-ar), .55)); } .oa-anim .oa-hero__line { animation: oaRise 1.1s var(--oa-ease) both; animation-delay: calc(var(--i) * .16s + .2s); } @keyframes oaRise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } to { opacity: 1; transform: none; } } .oa-anim .oa-hero__line--hot { animation: oaRise 1.1s var(--oa-ease) both, oaEmberText 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .16s + .2s), 1.6s; } @keyframes oaEmberText { 50% { filter: drop-shadow(0 0 34px rgba(var(--oa-ar), .9)); } } .oa-hero__text { max-width: 500px; margin: 0 0 30px; font-size: 19px; line-height: 1.6; color: #e6dccd; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); } .oa-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; } .oa-hero__server { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 10px 10px 10px 16px; border: 1px solid rgba(var(--oa-a2r), .25); border-radius: 6px; background: rgba(10, 7, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .oa-hero__server b { display: block; font-family: var(--oa-head); font-weight: 700; font-size: 15px; color: #fff; } .oa-hero__server small { display: block; font-size: 13.5px; color: var(--oa-muted); } .oa-hero__server .oa-copy__btn { width: 38px; height: 38px; } .oa-hero__scroll { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(var(--oa-a2r), .45); border-radius: 14px; } .oa-hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--oa-a); } .oa-anim .oa-hero__scroll span { animation: oaScrollDot 1.6s ease-in-out infinite; } @keyframes oaScrollDot { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } } .oa-hero.is-paused *, .oa-hero.is-paused *::before, .oa-hero.is-paused *::after { animation-play-state: paused !important; } /* ========================================================================== STARTSEITE ========================================================================== */ .oa-home { padding-bottom: 30px; } .oa-sec { margin-top: 96px; scroll-margin-top: 110px; } .oa-sec--first { margin-top: 46px; } .oa-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 28px; } .oa-sec__title { margin: 0; font-family: var(--oa-head); font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; letter-spacing: .03em; text-transform: uppercase; color: #fff; } .oa-sec__head .oa-sec__title { padding-left: 26px; position: relative; } .oa-sec__head .oa-sec__title::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--oa-a); transform: rotate(45deg); box-shadow: 0 0 12px rgba(var(--oa-ar), .9); } .oa-sec__title--stack span { display: block; } .oa-adminhint { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border: 1px dashed rgba(var(--oa-a2r), .4); border-radius: 6px; color: var(--oa-soft); font-size: 14.5px; } .oa-adminhint i { color: var(--oa-a2); } /* Laufband */ .oa-ticker { background: linear-gradient(90deg, rgba(var(--oa-ar), .14), rgba(var(--oa-br), .1)); border-top: 1px solid rgba(var(--oa-a2r), .3); border-bottom: 1px solid rgba(var(--oa-br), .25); } .oa-ticker__label { font-family: var(--oa-head); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(180deg, var(--oa-a2), var(--oa-a)); color: #1a0b02; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); padding-right: 30px; } .oa-ticker__item { font-family: var(--oa-body); font-weight: 700; letter-spacing: .04em; font-size: 15.5px; } .oa-ticker__item::after { content: "✦"; margin-left: 28px; color: var(--oa-a); } /* Was dich erwartet: 6 Kacheln mit eigenen Icon-Animationen */ .oa-features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .oa-feature { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 14px 22px; text-align: center; color: var(--oa-text); overflow: hidden; } .oa-feature::after { display: none; } .oa-feature__icon { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; color: var(--oa-a2); } .oa-feature__icon::before { content: ""; position: absolute; inset: 8px; border: 1.5px solid rgba(var(--oa-a2r), .35); transform: rotate(45deg); transition: transform .45s var(--oa-ease), border-color .45s, box-shadow .45s; } .oa-feature:nth-child(even) .oa-feature__icon { color: var(--oa-a); } .oa-feature__icon .oa-ico { position: relative; width: 38px; height: 38px; stroke-width: 1.5; filter: drop-shadow(0 0 8px currentColor); transition: transform .45s var(--oa-ease); } .oa-feature__name { font-family: var(--oa-head); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .oa-feature__text { font-size: 14.5px; line-height: 1.45; color: var(--oa-muted); } .oa-feature:hover { color: var(--oa-text); } .oa-feature:hover .oa-feature__icon::before { transform: rotate(225deg) scale(1.08); border-color: var(--oa-a2); box-shadow: 0 0 20px rgba(var(--oa-ar), .6), inset 0 0 14px rgba(var(--oa-ar), .4); } .oa-feature:hover .oa-feature__name { color: var(--oa-a2); } .oa-fx--compass:hover .oa-ico, .oa-fx--gear:hover .oa-ico { animation: oaSpin 2.4s linear infinite; } .oa-fx--hammer:hover .oa-ico, .oa-fx--anvil:hover .oa-ico { animation: oaHammer .45s ease-in-out infinite alternate; transform-origin: 80% 20%; } @keyframes oaHammer { from { transform: rotate(14deg); } to { transform: rotate(-18deg); } } .oa-fx--sword:hover .oa-ico, .oa-fx--bow:hover .oa-ico { animation: oaSlash .5s ease-in-out infinite alternate; } @keyframes oaSlash { from { transform: rotate(-12deg) translateX(-3px); } to { transform: rotate(12deg) translateX(3px); } } .oa-fx--group:hover .oa-ico, .oa-fx--trophy:hover .oa-ico, .oa-fx--house:hover .oa-ico { animation: oaJump .5s ease-in-out infinite alternate; } @keyframes oaJump { from { transform: translateY(2px) scale(1); } to { transform: translateY(-7px) scale(1.08); } } .oa-fx--spark:hover .oa-ico, .oa-fx--staff:hover .oa-ico { animation: oaSparkle .7s ease-in-out infinite alternate; } @keyframes oaSparkle { from { transform: scale(.9) rotate(-8deg); filter: drop-shadow(0 0 6px currentColor); } to { transform: scale(1.15) rotate(8deg); filter: drop-shadow(0 0 18px currentColor) brightness(1.4); } } .oa-fx--flame:hover .oa-ico { animation: oaFlicker .4s ease-in-out infinite alternate; transform-origin: 50% 100%; } @keyframes oaFloat { from { transform: translate(-4px, 3px) rotate(-6deg); } to { transform: translate(4px, -5px) rotate(5deg); } } .oa-fx--skull:hover .oa-ico, .oa-fx--shield:hover .oa-ico, .oa-fx--map:hover .oa-ico { animation: oaWiggle .45s ease-in-out infinite alternate; } @keyframes oaWiggle { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } @keyframes oaSpin { to { transform: rotate(360deg); } } /* Laufleiste (Biome) */ .oa-games { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 12px 0; border-top: 1px solid var(--oa-line); border-bottom: 1px solid var(--oa-line); } .oa-games__label { flex-shrink: 0; font-family: var(--oa-head); font-weight: 800; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-a); } .oa-games__viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .oa-games__track { display: flex; gap: 12px; width: max-content; } .oa-anim .oa-games__track { animation: oaMarquee 34s linear infinite; } .oa-games:hover .oa-games__track { animation-play-state: paused; } @keyframes oaMarquee { to { transform: translateX(-50%); } } .oa-games__item { padding: 6px 16px; border: 1px solid rgba(var(--oa-a2r), .22); border-radius: 30px; font-family: var(--oa-body); font-weight: 700; font-size: 15.5px; letter-spacing: .04em; color: var(--oa-soft); white-space: nowrap; transition: color .2s, border-color .2s, box-shadow .2s; } .oa-games__item::before { content: "✦"; margin-right: 8px; color: var(--oa-a); font-size: 11px; } .oa-games__item:hover { color: #fff; border-color: var(--oa-a2); box-shadow: 0 0 14px rgba(var(--oa-ar), .4); } /* Zahlen */ .oa-numbers { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); overflow: hidden; } .oa-numbers__art { position: relative; min-height: 320px; overflow: hidden; background: radial-gradient(500px 260px at 50% 90%, rgba(var(--oa-ar), .28), transparent 70%), radial-gradient(400px 200px at 50% 110%, rgba(var(--oa-br), .3), transparent 70%), linear-gradient(180deg, #0f0b18, #07050b); border-right: 1px solid rgba(var(--oa-a2r), .14); } .oa-numbers__img { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform 1.2s var(--oa-ease); } .oa-numbers:hover .oa-numbers__img { transform: scale(1.06); } .oa-numbers__smoke { position: absolute; left: 30%; bottom: 40%; width: 40%; height: 50%; pointer-events: none; } .oa-numbers__smoke i { position: absolute; left: 50%; bottom: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--oa-a2); box-shadow: 0 0 8px var(--oa-a); opacity: 0; } .oa-anim .oa-numbers__smoke i { animation: oaEmber 2.6s linear infinite; } .oa-numbers__smoke i:nth-child(2) { left: 30%; animation-delay: .5s; animation-name: oaEmber2; } .oa-numbers__smoke i:nth-child(3) { left: 62%; animation-delay: 1s; } .oa-numbers__smoke i:nth-child(4) { left: 42%; animation-delay: 1.5s; animation-name: oaEmber2; } .oa-numbers__smoke i:nth-child(5) { left: 56%; animation-delay: 2s; } .oa-numbers__body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .oa-numbers__body .oa-sec__title span:first-child { color: #fff; } .oa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 0 8px; } .oa-stat { padding: 4px 16px; border-left: 1px solid rgba(var(--oa-a2r), .14); text-align: center; } .oa-stat:first-child { border-left: 0; padding-left: 0; } .oa-stat dd { margin: 0; display: flex; flex-direction: column; align-items: center; } .oa-stat dd b { font-family: var(--oa-head); font-weight: 800; font-size: clamp(32px, 3.2vw, 48px); line-height: 1; color: var(--oa-a2); text-shadow: 0 0 20px rgba(var(--oa-ar), .55); font-variant-numeric: tabular-nums; } .oa-stat:nth-child(even) dd b { color: var(--oa-a); } .oa-stat dd small { font-family: var(--oa-body); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-a2); } .oa-stat:nth-child(even) dd small { color: var(--oa-a); } .oa-stat dt { margin-top: 6px; font-family: var(--oa-body); font-weight: 700; font-size: 13.5px; letter-spacing: .06em; color: var(--oa-muted); } .oa-numbers__body .oa-btn { align-self: flex-start; } /* Server-Karte (+ Live-Karte des Gameserver-Moduls) */ .oa-server { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .oa-server.has-live { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .oa-server__card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 30px 26px; overflow: hidden; background: radial-gradient(400px 220px at 100% 0%, rgba(var(--oa-ar), .2), transparent 70%), linear-gradient(180deg, rgba(26, 20, 32, .9), rgba(12, 9, 16, .92)); } .oa-server__flame { position: absolute; right: -40px; top: -30px; width: 220px; height: auto; opacity: .35; pointer-events: none; } .oa-server__head { position: relative; display: flex; align-items: center; gap: 12px; } .oa-server__head .oa-live { width: 10px; height: 10px; } .oa-server__head b { display: block; font-family: var(--oa-head); font-weight: 800; font-size: 22px; letter-spacing: .03em; color: #fff; } .oa-server__head small { display: block; font-size: 14.5px; color: var(--oa-muted); } .oa-server .oa-copy { position: relative; } .oa-server .oa-copy__value { font-family: var(--oa-body); font-weight: 700; font-size: 16px; letter-spacing: .04em; color: #fff; } .oa-server:not(.has-live) .oa-server__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 34px; row-gap: 16px; align-content: start; } .oa-server:not(.has-live) .oa-server__info { grid-column: 2; grid-row: 1 / span 3; align-self: center; } .oa-server:not(.has-live) .oa-server__flame { right: auto; left: 34%; top: auto; bottom: -50px; width: 260px; opacity: .22; } .oa-server__info { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .oa-server__info > div { padding: 10px 14px; border: 1px solid rgba(var(--oa-a2r), .12); border-radius: 4px; background: rgba(0, 0, 0, .25); } .oa-server__info dt { font-family: var(--oa-body); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-a2); } .oa-server__info dd { margin: 2px 0 0; font-weight: 700; color: #fff; } .oa-server__live { min-width: 0; } .oa-server__live:empty { display: none; } /* Zeitleiste „Der Weg zur 1.0“ */ .oa-timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .oa-timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--oa-a2r), .4) 8%, rgba(var(--oa-ar), .6) 60%, transparent); } .oa-timeline__item { position: relative; padding-top: 34px; } .oa-timeline__dot { position: absolute; left: 22px; top: 4px; width: 16px; height: 16px; border: 2px solid var(--oa-a2); background: var(--oa-bg); transform: rotate(45deg); } .oa-timeline__item.is-hot .oa-timeline__dot { background: var(--oa-a); border-color: #fff6d8; box-shadow: 0 0 18px rgba(var(--oa-ar), .95); } .oa-anim .oa-timeline__item.is-hot .oa-timeline__dot { animation: oaRuneGlow 2s ease-in-out infinite; } .oa-timeline__card { height: 100%; padding: 20px 20px 18px; } .oa-timeline__card::after { display: none; } .oa-timeline__date { display: block; font-family: var(--oa-body); font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-a2); } .oa-timeline__name { display: block; margin: 4px 0 8px; font-family: var(--oa-head); font-weight: 800; font-size: 20px; letter-spacing: .03em; color: #fff; } .oa-timeline__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--oa-soft); } .oa-timeline__item.is-hot .oa-timeline__card { border-color: rgba(var(--oa-ar), .6); box-shadow: 0 0 40px -10px rgba(var(--oa-ar), .55), inset 0 0 40px -24px rgba(var(--oa-ar), .7); } /* Biome (Slider) */ .oa-garage { position: relative; } .oa-garage__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 2px 14px; } .oa-garage__track::-webkit-scrollbar { display: none; } .oa-garage__nav { position: absolute; top: 38%; z-index: 3; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(var(--oa-a2r), .4); border-radius: 50%; background: rgba(10, 7, 14, .88); color: #fff; cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .2s; } .oa-garage__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .oa-garage__nav:hover { background: var(--oa-a); color: #1a0b02; box-shadow: 0 0 18px rgba(var(--oa-ar), .7); } .oa-garage__nav--prev { left: -18px; } .oa-garage__nav--next { right: -18px; } .oa-garage.is-static .oa-garage__nav { display: none; } .oa-carcard { display: flex; flex-direction: column; scroll-snap-align: start; overflow: hidden; color: var(--oa-text); } .oa-carcard::after { border-color: var(--car); } .oa-carcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0912; } .oa-carcard__img { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .8s var(--oa-ease); } .oa-carcard__sweep { position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 240, 210, .16), transparent); transform: skewX(-20deg); transition: left .8s var(--oa-ease); } .oa-carcard:hover .oa-carcard__sweep { left: 130%; } .oa-carcard__body { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 16px; border-top: 2px solid color-mix(in srgb, var(--car) 60%, transparent); } .oa-carcard__body b { display: block; font-family: var(--oa-head); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .oa-carcard__body small { font-size: 14px; color: var(--oa-muted); } .oa-carcard__go { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; color: var(--car); transition: transform .3s var(--oa-ease); } .oa-carcard__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .oa-carcard:hover .oa-carcard__go { transform: translateX(5px); } /* Klassen */ .oa-classes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } /* Raster passt sich der Anzahl der Karten an – keine leere Lücke */ .oa-classes--n1 { grid-template-columns: minmax(0, 420px); justify-content: center; } .oa-classes--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oa-classes--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oa-class { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 22px 22px; text-align: center; } .oa-class__name { font-family: var(--oa-head); font-weight: 800; font-size: 25px; letter-spacing: .04em; text-transform: uppercase; color: #fff; } .oa-class__sub { font-family: var(--oa-body); font-weight: 800; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-a2); } .oa-class__list { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 9px; width: 100%; text-align: left; flex: 1; } .oa-class__list li { position: relative; padding-left: 24px; font-size: 15.5px; color: var(--oa-soft); } .oa-class__list li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border: 1.5px solid var(--oa-a2); transform: rotate(45deg); } .oa-class .oa-btn { margin-top: auto; } .oa-class.is-hot { border-color: var(--oa-a); box-shadow: 0 0 0 1px rgba(var(--oa-ar), .5), 0 0 40px -6px rgba(var(--oa-ar), .5), inset 0 0 40px -20px rgba(var(--oa-ar), .6); } .oa-anim .oa-class.is-hot { animation: oaHotPulse 2.8s ease-in-out infinite; } @keyframes oaHotPulse { 50% { box-shadow: 0 0 0 1px rgba(var(--oa-ar), .8), 0 0 60px -4px rgba(var(--oa-ar), .7), inset 0 0 50px -20px rgba(var(--oa-ar), .8); } } .oa-class.is-hot .oa-class__list li::before { border-color: var(--oa-a); background: rgba(var(--oa-ar), .4); } .oa-class__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 3px 14px; border-radius: 2px; background: linear-gradient(180deg, var(--oa-a2), var(--oa-a)); color: #1a0b02; font-family: var(--oa-body); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 14px rgba(var(--oa-ar), .7); } .oa-class.is-hot::after { display: none; } .oa-class:hover .oa-class__name { text-shadow: 0 0 18px rgba(var(--oa-ar), .7); } /* Raids + Ruhmeshalle */ .oa-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; } .oa-split--single { grid-template-columns: minmax(0, 1fr); } .oa-race { display: block; padding: 28px 30px 30px; overflow: hidden; color: var(--oa-text); background: radial-gradient(500px 220px at 100% 0%, rgba(var(--oa-ar), .2), transparent 70%), radial-gradient(400px 200px at 0% 100%, rgba(var(--oa-br), .18), transparent 70%), linear-gradient(180deg, rgba(26, 20, 32, .92), rgba(12, 9, 16, .92)); } .oa-race:hover { color: var(--oa-text); } .oa-race__lights { display: flex; gap: 10px; margin-bottom: 18px; } .oa-race__lights i { width: 12px; height: 12px; border: 1.5px solid rgba(var(--oa-a2r), .4); transform: rotate(45deg); } .oa-anim .oa-race__lights i { animation: oaRuneSeq 5s ease-in-out infinite; } .oa-anim .oa-race__lights i:nth-child(2) { animation-delay: .25s; } .oa-anim .oa-race__lights i:nth-child(3) { animation-delay: .5s; } .oa-anim .oa-race__lights i:nth-child(4) { animation-delay: .75s; } .oa-anim .oa-race__lights i:nth-child(5) { animation-delay: 1s; } @keyframes oaRuneSeq { 0%, 100% { background: transparent; box-shadow: none; } 20%, 60% { background: var(--oa-a); border-color: var(--oa-a2); box-shadow: 0 0 12px rgba(var(--oa-ar), .9); } } .oa-race__kick { display: block; font-family: var(--oa-body); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--oa-a2); } .oa-race__title { display: block; margin: 8px 0 20px; font-family: var(--oa-head); font-weight: 800; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; text-transform: uppercase; color: #fff; } .oa-race__now { display: inline-flex; align-items: center; gap: 10px; font-family: var(--oa-head); font-weight: 800; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--oa-a); } .oa-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; } .oa-count > span { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border: 1px solid rgba(var(--oa-a2r), .2); border-radius: 4px; background: rgba(0, 0, 0, .35); } .oa-count b { font-family: var(--oa-head); font-weight: 800; font-size: 36px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .oa-count small { margin-top: 4px; font-family: var(--oa-body); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-muted); } .oa-race:hover .oa-count > span { border-color: var(--oa-a2); box-shadow: 0 0 16px -4px rgba(var(--oa-ar), .6); } .oa-events { display: grid; gap: 12px; margin-top: 14px; } .oa-event { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px; color: var(--oa-text); } .oa-event:hover { color: var(--oa-text); } .oa-event__date { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-right: 1px solid rgba(var(--oa-a2r), .14); } .oa-event__date b { font-family: var(--oa-head); font-weight: 800; font-size: 28px; line-height: 1; color: var(--oa-a2); } .oa-event__date small { font-family: var(--oa-body); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--oa-muted); } .oa-event__body b { display: block; font-family: var(--oa-head); font-weight: 800; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; color: #fff; } .oa-event__soon { font-family: var(--oa-body); font-weight: 800; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--oa-a); } .oa-event__meta { font-size: 14.5px; color: var(--oa-muted); } .oa-event__go svg { width: 20px; height: 20px; fill: none; stroke: var(--oa-a2); stroke-width: 2.2; stroke-linecap: round; transition: transform .3s var(--oa-ease); } .oa-event:hover .oa-event__go svg { transform: translateX(5px); } .oa-board { padding: 8px 0 10px; overflow: hidden; } .oa-board__track { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--oa-line); font-family: var(--oa-body); font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--oa-soft); } .oa-board__track svg { width: 18px; height: 18px; fill: none; stroke: var(--oa-a2); stroke-width: 2; } .oa-board__list { list-style: none; margin: 0; padding: 0; } .oa-board__row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, .05); transition: background-color .25s, transform .25s var(--oa-ease); } .oa-board__row:last-child { border-bottom: 0; } .oa-board__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--oa-a); transform: scaleY(0); transition: transform .25s var(--oa-ease); } .oa-board__row:hover { background: rgba(var(--oa-ar), .07); transform: translateX(4px); } .oa-board__row:hover::before { transform: scaleY(1); } .oa-board__pos { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; background: rgba(255, 255, 255, .06); font-family: var(--oa-head); font-weight: 800; font-size: 16px; color: var(--oa-soft); } .oa-board__row.is-p1 .oa-board__pos { background: linear-gradient(135deg, #ffe58a, #f5b301); color: #2a1a00; box-shadow: 0 0 14px rgba(245, 179, 1, .55); } .oa-board__row.is-p2 .oa-board__pos { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #10141a; } .oa-board__row.is-p3 .oa-board__pos { background: linear-gradient(135deg, #f0b48a, #b8662e); color: #1f0d02; } .oa-board__who b { display: block; font-family: var(--oa-head); font-weight: 700; font-size: 17px; letter-spacing: .02em; color: #fff; } .oa-board__who small, .oa-board__time small { font-size: 13.5px; color: var(--oa-muted); } .oa-board__time { text-align: right; } .oa-board__time b { display: block; font-family: var(--oa-head); font-weight: 800; font-size: 19px; color: var(--oa-a2); font-variant-numeric: tabular-nums; } .oa-board__row.is-p1 .oa-board__time b { color: #ffd34d; text-shadow: 0 0 12px rgba(255, 211, 77, .5); } /* Streams */ .oa-streams { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .oa-stream { overflow: hidden; } .oa-stream__live { font-family: var(--oa-body); font-weight: 800; letter-spacing: .14em; } /* Stimmen */ .oa-voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .oa-voices.has-image { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .oa-voices__main { padding: 30px 32px; } .oa-voices__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; } .oa-voices.has-image .oa-voices__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .oa-voice { position: relative; margin: 0; padding: 4px 18px 0 0; border-right: 1px solid rgba(var(--oa-a2r), .1); } .oa-voice:last-child { border-right: 0; } .oa-voice__q { display: block; height: 46px; font-family: var(--oa-head); font-weight: 900; font-size: 70px; line-height: 1; color: var(--oa-a); text-shadow: 0 0 18px rgba(var(--oa-ar), .6); transition: transform .35s var(--oa-ease), color .35s; } .oa-voice blockquote { margin: 0 0 18px; font-size: 16px; line-height: 1.6; font-style: italic; color: var(--oa-soft); } .oa-voice figcaption { display: flex; align-items: center; gap: 12px; } .oa-voice figcaption b { display: block; font-family: var(--oa-head); font-weight: 700; font-size: 16px; color: #fff; } .oa-voice figcaption small { font-size: 13.5px; color: var(--oa-muted); } .oa-voice .oa-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--oa-a), var(--oa-b)); color: #fff; font-family: var(--oa-head); font-weight: 800; box-shadow: 0 0 0 2px var(--oa-bg), 0 0 0 4px rgba(var(--oa-a2r), .5); transition: box-shadow .3s; } .oa-voice .oa-av img { width: 100%; height: 100%; object-fit: cover; } .oa-voice:hover .oa-voice__q { transform: translateY(-4px) scale(1.1); color: var(--oa-a2); } .oa-voice:hover .oa-av { box-shadow: 0 0 0 2px var(--oa-bg), 0 0 0 4px var(--oa-a), 0 0 20px rgba(var(--oa-ar), .7); } .oa-voices__img { min-height: 280px; background: center / cover no-repeat; } /* News */ .oa-newsgrid .oa-news { border-radius: var(--oa-r); } .oa-news__cat { border-radius: 2px; font-family: var(--oa-body); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .oa-news__title { font-family: var(--oa-head); font-weight: 700; letter-spacing: .02em; } /* Aufruf zum Mitspielen */ .oa-cta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); align-items: stretch; overflow: hidden; background: radial-gradient(600px 300px at 80% 100%, rgba(var(--oa-ar), .24), transparent 70%), radial-gradient(400px 260px at 0% 0%, rgba(var(--oa-br), .16), transparent 70%), linear-gradient(120deg, rgba(20, 14, 26, .95), rgba(10, 7, 14, .95)); } .oa-cta__info { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 30px 26px; border-right: 1px solid var(--oa-line); } .oa-cta__place { display: flex; gap: 12px; } .oa-cta__place svg { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: var(--oa-a); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(var(--oa-ar), .8)); } .oa-anim .oa-cta__place svg { animation: oaPinBob 2.2s ease-in-out infinite; } @keyframes oaPinBob { 50% { transform: translateY(-4px); } } .oa-cta__place b { display: block; font-family: var(--oa-head); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .oa-cta__place small { font-size: 14.5px; color: var(--oa-muted); } .oa-cta__body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 36px 32px; } .oa-cta__body .oa-sec__title { font-size: clamp(28px, 3vw, 40px); } .oa-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } .oa-cta__art { position: relative; min-height: 260px; overflow: hidden; } .oa-cta__art svg { position: absolute; left: 6%; right: 6%; bottom: 0; width: 88%; height: 94%; overflow: visible; } .oa-cta__img { position: absolute; inset: 0; background: center / cover no-repeat; } .oa-cta__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 16, .9), transparent 40%); z-index: 1; pointer-events: none; } /* Community-Karten */ .oa-community { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } /* Startseiten-Inhalt + Seitenleiste + Boxen + Module */ .oa-box { border-radius: var(--oa-r); } .oa-box__title { font-family: var(--oa-head); font-weight: 800; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; } .oa-box__dot { border-radius: 0 !important; transform: rotate(45deg); } .oa-pagehead { border-bottom: 1px solid rgba(var(--oa-a2r), .14); background: linear-gradient(90deg, rgba(var(--oa-ar), .1), transparent 40%, rgba(var(--oa-br), .08)); } .oa-breadcrumb { font-family: var(--oa-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .wd-content h1, .wd-content h2, .wd-content h3 { font-family: var(--oa-head); font-weight: 800; letter-spacing: .02em; } .wd-content h1 { text-transform: uppercase; } .card-header { font-family: var(--oa-head); font-weight: 700; letter-spacing: .04em; border-bottom-color: var(--oa-a); } .btn { font-family: var(--oa-body); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 4px; } .table > thead > tr > th, .table > thead > tr > td { font-family: var(--oa-body); font-weight: 800; font-size: 13.5px; letter-spacing: .1em; } /* Footer */ .oa-footer__disclaimer { margin: 0 auto; padding-top: 14px; padding-bottom: 4px; font-size: 12.5px; color: var(--oa-dim); } .oa-footer__tagline { font-family: var(--oa-head); font-weight: 700; letter-spacing: .04em; } /* ---------- Responsiv ---------- */ @media (max-width: 1199.98px) { .oa-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oa-garage__track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } .oa-classes, .oa-classes--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } .oa-classes--n3 > :last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); } .oa-classes--n1 { grid-template-columns: minmax(0, 420px); } .oa-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .oa-cta__info { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--oa-line); } .oa-server.has-live { grid-template-columns: minmax(0, 1fr); } .oa-server:not(.has-live) .oa-server__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (max-width: 991.98px) { .oa-hero { min-height: 660px; padding-top: 100px; align-items: flex-end; } .oa-hero__shade { background: linear-gradient(0deg, rgba(7, 5, 11, .96) 12%, rgba(7, 5, 11, .55) 55%, rgba(7, 5, 11, .1) 85%); } .oa-numbers { grid-template-columns: minmax(0, 1fr); } .oa-numbers__art { min-height: 240px; border-right: 0; border-bottom: 1px solid rgba(var(--oa-a2r), .14); } .oa-split { grid-template-columns: minmax(0, 1fr); } .oa-voices__list { grid-template-columns: minmax(0, 1fr); } .oa-voice { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 16px; } .oa-voice:last-child { border-bottom: 0; } .oa-voices.has-image { grid-template-columns: minmax(0, 1fr); } .oa-garage__nav--prev { left: 4px; } .oa-garage__nav--next { right: 4px; } .oa-timeline::before { display: none; } } @media (max-width: 767.98px) { .oa-sec { margin-top: 64px; } .oa-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .oa-feature { padding: 22px 10px 16px; } .oa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } .oa-stat:nth-child(3) { border-left: 0; padding-left: 0; } .oa-numbers__body { padding: 28px 22px; } .oa-garage__track { grid-auto-columns: 80%; } .oa-classes, .oa-classes--n1, .oa-classes--n2, .oa-classes--n3 { grid-template-columns: minmax(0, 1fr); } .oa-classes--n3 > :last-child { width: auto; justify-self: stretch; } .oa-cta { grid-template-columns: minmax(0, 1fr); } .oa-cta__art { min-height: 220px; } .oa-count b { font-size: 28px; } .oa-race { padding: 22px 18px; } .oa-hero__title { font-size: clamp(30px, 9vw, 56px); } .oa-hero__line { white-space: normal; } .oa-games { flex-direction: column; align-items: flex-start; gap: 10px; } .oa-games__viewport { width: 100%; } .oa-server__card { padding: 24px 20px; } .oa-server__info { grid-template-columns: minmax(0, 1fr); } .oa-server:not(.has-live) .oa-server__card { display: flex; } .oa-server:not(.has-live) .oa-server__info { align-self: stretch; } .oa-hero__server { max-width: 100%; } .oa-scene { width: 260%; left: -160%; opacity: .75; } } /* ========================================================================== ONAIR WEBRADIO – eigener Look: Neon-Studio bei Nacht, Glas, Equalizer, Funkwellen (überschreibt den gemeinsamen Grundstil darüber) ========================================================================== */ :root { --oa-r: 18px; --oa-glass: rgba(16, 12, 30, .62); --oa-glass-2: rgba(22, 16, 40, .78); --oa-live: #ff2d55; } body.oa-body { font-size: 16.5px; letter-spacing: 0; } .oa-hot { color: var(--oa-a); background: linear-gradient(90deg, var(--oa-a), var(--oa-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 18px rgba(var(--oa-ar), .45)); } .oa-kick { gap: 10px; font-family: var(--oa-body); font-weight: 800; font-size: 13.5px; letter-spacing: .22em; color: #fff; padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .oa-kick::before { display: none; } .oa-lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--oa-live); box-shadow: 0 0 0 3px rgba(255, 45, 85, .25), 0 0 14px var(--oa-live); } .oa-anim .oa-lamp { animation: oaLamp 1.4s ease-in-out infinite; } @keyframes oaLamp { 50% { opacity: .35; box-shadow: 0 0 0 6px rgba(255, 45, 85, 0), 0 0 4px var(--oa-live); } } .oa-sec__kick { display: inline-block; margin-bottom: 8px; font-family: var(--oa-body); font-weight: 800; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--oa-b); } /* Hintergrund */ .oa-sky--glow { background: var(--oa-page-image, none) center / cover no-repeat, radial-gradient(1100px 700px at 85% -10%, rgba(var(--oa-ar), .2), transparent 60%), radial-gradient(900px 700px at -5% 70%, rgba(var(--oa-br), .14), transparent 62%), radial-gradient(900px 500px at 50% 120%, rgba(var(--oa-ar), .18), transparent 60%), var(--oa-bg); } .oa-sky__grid { height: 30vh; opacity: .35; background: repeating-linear-gradient(90deg, rgba(var(--oa-br), .12) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(var(--oa-ar), .1) 0 1px, transparent 1px 40px); filter: none; transform: perspective(420px) rotateX(58deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(transparent, #000 75%); mask: linear-gradient(transparent, #000 75%); } .oa-anim .oa-sky__grid { animation: none; } .oa-skyart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34vh; opacity: .55; } .oa-skyline--far .oa-skyline__b { fill: #0b0818; } .oa-skyline--far .oa-skyline__win rect { fill: rgba(var(--oa-a2r), .18); } /* Karten: Glas mit Neon-Kante */ .oa-card { border-radius: var(--oa-r); background: linear-gradient(160deg, rgba(30, 22, 54, .72), rgba(12, 9, 24, .82)); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -36px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .oa-card::before { background: linear-gradient(135deg, rgba(var(--oa-ar), .9), transparent 40%, transparent 60%, rgba(var(--oa-br), .9)); opacity: .0; } .oa-card.hov:hover::before { opacity: .9; } .oa-card::after { display: none; } .hov:hover, a.hov:focus-visible { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -28px rgba(var(--oa-ar), .55); } .glass { border-radius: var(--oa-r); border-color: rgba(255, 255, 255, .08); } /* Buttons: Pillen mit Neon-Verlauf */ .oa-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 999px; border: 0; background: linear-gradient(100deg, var(--oa-a), color-mix(in srgb, var(--oa-a) 50%, var(--oa-b))); color: #fff; font-family: var(--oa-head); font-weight: 700; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 10px 30px -8px rgba(var(--oa-ar), .75), inset 0 1px 0 rgba(255, 255, 255, .3); clip-path: none; } .oa-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(var(--oa-ar), .95), 0 0 0 4px rgba(var(--oa-ar), .2); filter: none; } .oa-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--oa-ease); } .oa-btn--ghost { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); } .oa-btn--ghost:hover { color: #fff; background: rgba(var(--oa-br), .16); box-shadow: inset 0 0 0 1.5px var(--oa-b), 0 0 26px rgba(var(--oa-br), .4); } .oa-btn--sm { height: 42px; font-size: 12px; padding: 0 20px; } .oa-btn--block { width: 100%; justify-content: center; height: 46px; } .oa-btn--dc { background: #5865f2; box-shadow: 0 10px 30px -8px rgba(88, 101, 242, .8); } .oa-btn--dc:hover { background: #6d78f5; } .oa-btn__ico { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-left: -12px; border-radius: 50%; background: rgba(0, 0, 0, .25); font-size: 12px; } .oa-more { font-family: var(--oa-body); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--oa-b); } .oa-more:hover { color: #fff; } /* Topbar + Header */ .oa-topbar { background: rgba(7, 5, 15, .82); border-bottom: 1px solid rgba(255, 255, 255, .06); font-family: var(--oa-body); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; } .oa-topbar__now { display: inline-flex; align-items: center; gap: 8px; max-width: 46ch; color: var(--oa-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-topbar__now b { color: #fff; overflow: hidden; text-overflow: ellipsis; } .oa-topbar__now .wr-eq { color: var(--oa-a); height: 12px; } .oa-topbar__now:hover { color: #fff; } .oa-topbar__clock { font-family: var(--oa-body); font-weight: 800; color: var(--oa-a2); font-variant-numeric: tabular-nums; } .oa-header { background: rgba(9, 6, 20, .55); border-bottom: 1px solid rgba(255, 255, 255, .06); } .oa-header.is-scrolled { background: rgba(9, 6, 20, .92); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), 0 1px 0 rgba(var(--oa-ar), .35); } .oa-brand__name { font-family: var(--oa-head); font-weight: 800; font-size: 21px; line-height: 1.05; letter-spacing: .01em; color: #fff; text-transform: none; text-shadow: 0 0 22px rgba(var(--oa-ar), .5); } .oa-brand__sub { font-family: var(--oa-body); font-weight: 700; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--oa-b); } .oa-nav__link { font-family: var(--oa-body); font-weight: 800; font-size: 14.5px; letter-spacing: .04em; text-transform: none; color: #e9e6f5; } .oa-nav__link::after { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--oa-a), var(--oa-b)); box-shadow: 0 0 12px rgba(var(--oa-ar), .9); } .oa-nav__link:hover, .oa-nav__item.is-active > .oa-nav__link, .oa-nav__item--more.is-active-child > .oa-nav__link { color: #fff; text-shadow: 0 0 16px rgba(var(--oa-ar), .8); } .oa-onairbtn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid rgba(255, 45, 85, .55); background: rgba(255, 45, 85, .08); color: #fff; font-family: var(--oa-head); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, box-shadow .25s, border-color .25s; } .oa-onairbtn:hover { background: rgba(255, 45, 85, .2); box-shadow: 0 0 24px rgba(255, 45, 85, .55); } .oa-onairbtn__txt { white-space: nowrap; } /* Mittlere Breiten: nur Lampe + Pegel, damit der Knopf das Menü nicht überdeckt */ @media (min-width: 992px) and (max-width: 1279.98px) { .oa-onairbtn__txt { display: none; } .oa-onairbtn { padding: 0 14px; } } .oa-onairbtn__lamp { width: 10px; height: 10px; border-radius: 50%; background: #5a1020; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background-color .3s, box-shadow .3s; } .wr-playing .oa-onairbtn, .wr-loading .oa-onairbtn { border-color: var(--oa-live); background: rgba(255, 45, 85, .22); box-shadow: 0 0 26px rgba(255, 45, 85, .5); } .wr-playing .oa-onairbtn__lamp, .wr-live .oa-onairbtn__lamp { background: var(--oa-live); box-shadow: 0 0 12px var(--oa-live), 0 0 24px rgba(255, 45, 85, .7); } .oa-anim.wr-live .oa-onairbtn__lamp, .oa-anim .wr-live .oa-onairbtn__lamp { animation: oaLamp 1.4s ease-in-out infinite; } .oa-onairbtn .wr-eq { height: 14px; color: var(--oa-a2); } html:not(.wr-playing) .oa-onairbtn .wr-eq { display: none; } /* Logo-Zeichen: Mikrofon mit Funkwellen */ .oa-badge { width: 46px; height: 46px; } .oa-badge__frame { fill: rgba(var(--oa-ar), .14); stroke: rgba(var(--oa-ar), .8); stroke-width: 1.6; filter: drop-shadow(0 0 8px rgba(var(--oa-ar), .7)); } .oa-badge__mic { fill: var(--oa-a2); } .oa-badge__stand { fill: none; stroke: var(--oa-a2); stroke-width: 2.2; stroke-linecap: round; } .oa-badge__wave { fill: none; stroke: var(--oa-b); stroke-width: 2; stroke-linecap: round; } .oa-anim .oa-badge__wave--1 { animation: oaWaveBlink 1.6s ease-in-out infinite; } .oa-anim .oa-badge__wave--2 { animation: oaWaveBlink 1.6s ease-in-out .3s infinite; } @keyframes oaWaveBlink { 0%, 100% { opacity: .15; } 40% { opacity: 1; } } .oa-brand:hover .oa-badge { transform: scale(1.08) rotate(-6deg); } /* Preloader: Equalizer + Senderskala */ .oa-pre { background: radial-gradient(700px 480px at 50% 55%, rgba(var(--oa-ar), .18), transparent 70%), radial-gradient(900px 500px at 50% 110%, rgba(var(--oa-br), .22), transparent 70%), #07050f; } .oa-pre__eq { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 90px; margin-bottom: 16px; } .oa-pre__eq i { width: 12px; height: 100%; border-radius: 6px; background: linear-gradient(0deg, var(--oa-a), var(--oa-b)); box-shadow: 0 0 16px rgba(var(--oa-ar), .6); transform-origin: 50% 100%; transform: scaleY(.2); } .oa-anim .oa-pre__eq i { animation: oaEqBar .9s ease-in-out infinite alternate; } @keyframes oaEqBar { 0% { transform: scaleY(.15); } 100% { transform: scaleY(1); } } .oa-dial { display: block; width: min(320px, 80vw); height: auto; margin: 0 auto 20px; overflow: visible; } .oa-dial__glass { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .14); } .oa-dial__tick { stroke: rgba(var(--oa-a2r), .55); stroke-width: 1.2; } .oa-dial__num { font-family: var(--oa-body); font-weight: 700; font-size: 11px; fill: var(--oa-muted); } .oa-dial__needle { stroke: var(--oa-live); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(0 0 4px var(--oa-live)); transform: translateX(calc(var(--oa-tune, 0) * 2.8px)); transition: transform .2s linear; } .oa-pre__name { font-family: var(--oa-head); font-weight: 800; letter-spacing: .02em; } .oa-pre__track span { background: linear-gradient(90deg, var(--oa-b), var(--oa-a)); } /* ========================================================================== HERO ========================================================================== */ .oa-hero { min-height: clamp(640px, calc(100vh - 110px), 980px); align-items: flex-start; padding: 70px 0 0; flex-direction: column; justify-content: center; } .oa-hero.has-console { padding-bottom: 0; } .oa-hero__media { background: #07050f; } .oa-hero__shade { background: linear-gradient(90deg, rgba(7, 5, 15, .94) 0%, rgba(7, 5, 15, .66) 32%, rgba(7, 5, 15, 0) 60%), linear-gradient(0deg, rgba(7, 5, 15, .9) 0%, transparent 34%); } .oa-hero__grid { flex: 1; display: flex; align-items: center; } .oa-hero__copy { max-width: 640px; padding-bottom: 30px; } .oa-hero__title { margin: 22px 0 20px; font-family: var(--oa-head); font-weight: 800; font-size: clamp(38px, 4.3vw, 70px); line-height: .98; letter-spacing: -.02em; text-transform: none; } .oa-hero__line { white-space: normal; } .oa-hero__line--hot { background: linear-gradient(90deg, var(--oa-a) 10%, color-mix(in srgb, var(--oa-a) 40%, var(--oa-b)) 55%, var(--oa-b) 90%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 26px rgba(var(--oa-ar), .55)); } .oa-anim .oa-hero__line { animation: oaRise 1s var(--oa-ease) both; animation-delay: calc(var(--i) * .14s + .2s); } .oa-anim .oa-hero__line--hot { animation: oaRise 1s var(--oa-ease) both, oaHueFlow 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .14s + .2s), 1.4s; } @keyframes oaHueFlow { to { background-position: 100% 0; } } .oa-hero__text { max-width: 520px; font-size: 18.5px; color: #dcd6ef; } .oa-btn--play .oa-btn__ico .wr-ico-play, .oa-btn--play .oa-btn__ico .wr-ico-pause { font-size: 12px; } /* Szenen – gemeinsam */ .oa-stars circle { fill: #fff; opacity: .55; } .oa-anim .oa-stars circle.is-tw { animation: oaTwinkle 4s ease-in-out infinite; } @keyframes oaTwinkle { 50% { opacity: .05; } } .oa-skyline__b { fill: #0d0a1c; } .oa-skyline--back .oa-skyline__b { fill: #120d26; } .oa-skyline--front .oa-skyline__b { fill: #07050f; } .oa-skyline__win rect { fill: rgba(var(--oa-a2r), .5); } .oa-skyline--front .oa-skyline__win rect { fill: rgba(255, 214, 140, .55); } .oa-anim .oa-skyline__win rect.is-flicker { animation: oaWin 9s steps(1) infinite; } @keyframes oaWin { 0%, 100% { opacity: 1; } 30% { opacity: .1; } 34% { opacity: 1; } 70% { opacity: 0; } } .oa-tower__frame, .oa-tower__lattice, .oa-tower__spire { stroke: #1d1638; } .oa-tower__frame { stroke: #3a2f70; } .oa-tower__lattice { stroke: #2c2458; } .oa-tower__dish { fill: #1d1638; stroke: #3a2f6a; stroke-width: 1.5; } .oa-tower__lamp { fill: var(--oa-live); filter: drop-shadow(0 0 6px var(--oa-live)) drop-shadow(0 0 14px var(--oa-live)); } .oa-anim .oa-tower__lamp { animation: oaLamp 1.6s ease-in-out infinite; } .oa-tower__lamp--mid { animation-delay: .8s !important; } .oa-tower__ring { fill: none; stroke: rgba(var(--oa-br), .7); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; } .oa-anim .oa-tower__ring { animation: oaRing 3s ease-out infinite; } @keyframes oaRing { 0% { transform: scale(.2); opacity: .9; stroke-width: 4; } 100% { transform: scale(7); opacity: 0; stroke-width: .6; } } /* Szene 1 – Studio */ .oa-foam { opacity: .9; } .oa-foam--dim { opacity: .45; } .oa-neonstrip { stroke: var(--oa-a); stroke-width: 4; filter: drop-shadow(0 0 8px var(--oa-a)) drop-shadow(0 0 20px rgba(var(--oa-ar), .8)); } .oa-spot { transform-box: fill-box; transform-origin: center; } .oa-anim .oa-spot { animation: oaPulse 4s ease-in-out infinite; } @keyframes oaPulse { 50% { opacity: .6; transform: scale(.94); } } .oa-onair__box { fill: #1a0a12; stroke: #3a1a26; stroke-width: 3; } .oa-onair__wire { stroke: #2b2040; } .oa-onair__glass { fill: #2a0c16; transition: fill .4s; } .oa-onair__text { font-family: var(--oa-head); font-weight: 900; font-size: 50px; letter-spacing: .06em; fill: #5a1a28; transition: fill .4s; } .oa-onair__glow { font-family: var(--oa-head); font-weight: 900; font-size: 50px; letter-spacing: .06em; fill: transparent; } .oa-scene--studio .oa-onair__text { fill: #ff8aa2; } .oa-scene--studio .oa-onair__glass { fill: #4a0f1f; } .oa-scene--studio .oa-onair__glow { fill: var(--oa-live); filter: blur(10px); opacity: .7; } .wr-live .oa-scene--studio .oa-onair__text, .wr-playing .oa-scene--studio .oa-onair__text { fill: #fff; } .wr-live .oa-scene--studio .oa-onair__glass, .wr-playing .oa-scene--studio .oa-onair__glass { fill: #c0103a; } .wr-live .oa-scene--studio .oa-onair__glow { opacity: 1; } .oa-anim .oa-onair__glow { animation: oaNeonFlick 7s steps(1) infinite; } @keyframes oaNeonFlick { 0%, 100% { opacity: .9; } 92% { opacity: .9; } 93% { opacity: .2; } 94% { opacity: .9; } 96% { opacity: .3; } 97% { opacity: .9; } } .oa-soundrings circle { fill: none; stroke: rgba(var(--oa-ar), .8); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; } .oa-anim .oa-soundrings circle { animation: oaRing 3s ease-out infinite; } .oa-soundrings circle:nth-child(2) { animation-delay: 1s !important; } .oa-soundrings circle:nth-child(3) { animation-delay: 2s !important; } .oa-mic__stand, .oa-mic__pole { fill: #15121f; } .oa-mic__clamp { fill: #2a2640; } .oa-mic__spider { stroke: #3a3550; fill: none; } .oa-mic__ring { fill: color-mix(in srgb, var(--oa-a) 40%, #2a2e38); } .oa-mic__led { fill: var(--oa-live); filter: drop-shadow(0 0 6px var(--oa-live)); } .oa-mic__shine { stroke: rgba(255, 255, 255, .35); } .oa-mic__pop path { stroke: #1d1a2a; } .oa-mic__pop ellipse { fill: rgba(30, 25, 50, .45); stroke: #2c2742; } .oa-speaker__box { fill: #120e20; stroke: #241d3c; stroke-width: 3; } .oa-speaker__rim { fill: #0a0814; stroke: #2a2246; stroke-width: 4; } .oa-speaker__cone { fill: #1b1630; stroke: rgba(var(--oa-ar), .45); stroke-width: 2; transform-box: fill-box; transform-origin: center; } .oa-speaker__dust { fill: #0a0814; } .oa-anim .oa-speaker__cone { animation: oaCone .5s ease-in-out infinite alternate; } .oa-anim .oa-speaker__cone--s { animation-duration: .3s; } @keyframes oaCone { to { transform: scale(1.08); } } .oa-desk { fill: #0e0a1c; } .oa-desk__edge { stroke: rgba(var(--oa-br), .6); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(var(--oa-br), .9)); } .oa-mixer__body { fill: #151028; stroke: #2e2552; stroke-width: 2; } .oa-mixer__slot { stroke: #05040a; stroke-width: 5; stroke-linecap: round; } .oa-mixer__fader { fill: #cfd3e6; } .oa-anim .oa-mixer__fader { animation: oaFader 3s ease-in-out infinite alternate; } @keyframes oaFader { 0% { transform: translateY(-24px); } 100% { transform: translateY(30px); } } .oa-mixer__led { fill: #34d399; opacity: .25; } .oa-mixer__led.is-red { fill: var(--oa-live); } .oa-anim .oa-mixer__led { animation: oaLed .6s steps(2) infinite; } @keyframes oaLed { 50% { opacity: 1; } } /* Szene 2 – Plattenteller */ .oa-halo { transform-box: fill-box; transform-origin: center; } .oa-anim .oa-halo { animation: oaPulse 3s ease-in-out infinite; } .oa-lightbeams path { fill: rgba(var(--oa-br), .06); } .oa-anim .oa-lightbeams { animation: oaBeams 12s linear infinite; transform-origin: 1060px 440px; } @keyframes oaBeams { to { transform: rotate(360deg); } } .oa-plinth { fill: #100c1e; stroke: #2a2148; stroke-width: 2; } .oa-platter { fill: #1c1830; stroke: #3a3360; stroke-width: 6; } .oa-vinyl__grooves circle { fill: none; stroke: rgba(255, 255, 255, .06); } .oa-vinyl__sheen { fill: rgba(255, 255, 255, .07); } .oa-vinyl__labelring { stroke: rgba(255, 255, 255, .3); stroke-width: 2; } .oa-vinyl__mark { stroke: rgba(255, 255, 255, .6); stroke-width: 6; stroke-linecap: round; } .oa-vinyl__hole { fill: #d9d9e6; } .oa-vinyl__spin { transform-box: view-box; transform-origin: 0 0; } .oa-anim .oa-vinyl__spin { animation: oaSpin 3.6s linear infinite; } .oa-tonearm__base { fill: #1d1838; stroke: #3a3360; stroke-width: 3; } .oa-tonearm__pivot { fill: #cfd3e6; } .oa-tonearm__arm path { stroke: #cfd3e6; } .oa-tonearm__head { fill: #2a2448; stroke: #cfd3e6; stroke-width: 2; } .oa-tonearm__arm { transform-origin: 0 0; transform: rotate(4deg); } .oa-anim .oa-tonearm__arm { animation: oaArm 7s ease-in-out infinite alternate; } @keyframes oaArm { from { transform: rotate(2deg); } to { transform: rotate(7deg); } } /* Plattenteller läuft mit dem Radio: Platte dreht nur beim Hören, sonst hebt der Tonarm ab. Ohne Webradio-Modul (keine wr-Klassen) dreht sie einfach weiter. */ .oa-tonearm { transform-origin: 0 0; transition: transform 1.1s cubic-bezier(.5, 0, .2, 1); } .wr-online:not(.wr-playing) .oa-tonearm, .wr-offline:not(.wr-playing) .oa-tonearm { transform: rotate(-17deg); } .wr-online:not(.wr-playing) .oa-vinyl__spin, .wr-offline:not(.wr-playing) .oa-vinyl__spin, .wr-online:not(.wr-playing) .oa-tonearm__arm, .wr-offline:not(.wr-playing) .oa-tonearm__arm { animation-play-state: paused; } .oa-knobs circle, .oa-knobs rect { fill: #221c3e; stroke: rgba(var(--oa-ar), .5); stroke-width: 2; } /* Szene 3 – Sendemast */ .oa-moon { filter: drop-shadow(0 0 30px rgba(255, 246, 232, .5)); } /* Szene 4 – Equalizer-Skyline */ .oa-sun { filter: drop-shadow(0 0 60px rgba(var(--oa-ar), .7)); } .oa-skyline--eq .oa-skyline__b { fill: color-mix(in srgb, var(--oa-a) 30%, #120a24); stroke: rgba(var(--oa-ar), .8); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; } .oa-anim .oa-skyline--eq .oa-skyline__b { animation: oaEqBld 1s ease-in-out infinite alternate; } @keyframes oaEqBld { 0% { transform: scaleY(.45); } 100% { transform: scaleY(1); } } .wr-playing .oa-skyline--eq .oa-skyline__b { animation-duration: .45s !important; } .oa-grid4 path { stroke: rgba(var(--oa-ar), .55); stroke-width: 1.2; } .oa-anim .oa-grid4__rows { animation: oaGridRun 2.4s linear infinite; } @keyframes oaGridRun { to { transform: translateY(24px); } } .oa-horizon { stroke: var(--oa-a); stroke-width: 3; filter: drop-shadow(0 0 10px var(--oa-a)); } /* Szene 5 – Kassette */ .oa-cass__shell { fill: #1a1430; stroke: #3a2f66; stroke-width: 3; } .oa-cass__label { fill: #f2ecdf; } .oa-cass__stripe { fill: var(--oa-a); } .oa-cass__text { font-family: var(--oa-head); font-weight: 700; font-size: 22px; fill: #1a1430; } .oa-cass__window { fill: #0b0816; stroke: #3a2f66; stroke-width: 3; } .oa-cass__tape { fill: #2a1c14; } .oa-cass__hub { fill: #f2ecdf; } .oa-cass__tooth { fill: #0b0816; } .oa-cass__reel { transform-box: view-box; transform-origin: 0 0; } .oa-anim .oa-cass__reel { animation: oaSpin 2.4s linear infinite reverse; } .oa-cass__bottom { fill: #120e24; stroke: #3a2f66; stroke-width: 3; } .oa-cass__screw { fill: #3a2f66; } .oa-cassfloat { transform-box: fill-box; transform-origin: center; } .oa-anim .oa-cassfloat { animation: oaFloatY 6s ease-in-out infinite; } @keyframes oaFloatY { 50% { transform: translateY(-18px) rotate(1.5deg); } } .oa-tapeband path { stroke: rgba(var(--oa-ar), .5); stroke-width: 3; } .oa-tapeband path + path { stroke: rgba(var(--oa-br), .4); } /* Live-Pult unten im Hero */ .oa-console-wrap { position: relative; z-index: 3; margin-bottom: -6px; } .oa-console { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1.6fr) minmax(120px, 1fr) minmax(0, 1.2fr) 150px 72px; align-items: center; gap: 22px; padding: 14px 16px 14px 14px; border-radius: 26px; background: linear-gradient(120deg, rgba(20, 14, 38, .78), rgba(12, 8, 24, .86)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .oa-console::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(var(--oa-ar), .9), rgba(var(--oa-br), .9), rgba(var(--oa-ar), .9)); background-size: 200% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .35; transition: opacity .4s; } .wr-playing .oa-console::before { opacity: 1; } .oa-anim .oa-console::before { animation-play-state: paused; } html.wr-playing .oa-anim .oa-console::before { animation-play-state: running; animation: oaFlowBg 4s linear infinite; } @keyframes oaFlowBg { to { background-position: 200% 0; } } .oa-console__disc { position: relative; width: 78px; height: 78px; border-radius: 50%; } .oa-console__vinyl { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 27%, rgba(0, 0, 0, .6) 28%, transparent 30%), radial-gradient(circle, var(--oa-a) 0 14%, var(--oa-b) 28%, transparent 28.5%), repeating-radial-gradient(circle, #121018 0 2px, #1c1a24 3px 4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 0 0 3px #08070c; } .oa-console__cover { position: absolute; inset: 22%; width: 56%; height: 56%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(0, 0, 0, .6); } .oa-console__hole { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #0b0a10; box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); } /* Lichtreflex und Markierung auf der Platte – sonst sieht man das Drehen nicht (Rillen sind rund) */ .oa-console__vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .16) 13%, transparent 19% 58%, rgba(255, 255, 255, .11) 63%, transparent 69%); } .oa-console__vinyl::after { content: ""; position: absolute; left: 50%; top: 9%; width: 3px; height: 13%; margin-left: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .55); } .oa-console__disc { animation: oaSpin 3.6s linear infinite; animation-play-state: paused; } .wr-playing .oa-console__disc { animation-play-state: running; } .oa-console__now { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .oa-console__kick { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--oa-muted); } .oa-console__listen b { color: #fff; } .oa-console__title { font-family: var(--oa-head); font-weight: 700; font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-console__artist { color: var(--oa-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-console__viz { width: 100%; height: 52px; } .oa-console__show { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .08); } .oa-console__dj { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px var(--wr-show, var(--oa-a)); } .oa-console__show > span { display: flex; flex-direction: column; min-width: 0; } .oa-console__show small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oa-b); font-weight: 800; } .oa-console__show b { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-console__show span span { font-size: 14px; color: var(--oa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-console__count { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; } .oa-console__count small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--oa-muted); font-weight: 700; } .oa-console__count b { font-family: var(--oa-head); font-weight: 700; font-size: 22px; color: #fff; } .oa-console__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; } .oa-console__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--oa-a), var(--oa-b)); transition: width 1s linear; } .oa-console__count .oa-console__next { display: block; max-width: 200px; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--oa-muted); } .oa-console__count .oa-console__next b { display: block; font-family: var(--oa-body, inherit); font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-console__count .oa-console__next [data-wr="next-time"] { display: block; font-size: 12px; color: var(--oa-muted); } .oa-console__play { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 0; color: #fff; font-size: 22px; cursor: pointer; background: linear-gradient(135deg, var(--oa-a), var(--oa-b)); box-shadow: 0 12px 30px -6px rgba(var(--oa-ar), .8); transition: transform .2s; } .oa-console__play:hover { transform: scale(1.06); } .oa-console__pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--oa-ar), .8); opacity: 0; } .oa-anim .oa-console__pulse { animation: oaPlayPulse 2s ease-out infinite; } @keyframes oaPlayPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .wr-playing .oa-console__pulse { animation-duration: 1s !important; } /* Wellenband als Übergang */ .oa-wave { position: relative; z-index: 2; width: 100%; height: clamp(110px, 12vw, 180px); margin-top: -40px; pointer-events: none; } .oa-wave__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .oa-wave__l { transform-box: view-box; } .oa-wave__l--1 { fill: rgba(var(--oa-ar), .18); } .oa-wave__l--2 { fill: rgba(var(--oa-br), .16); } .oa-wave__l--3 { fill: var(--oa-bg); } .oa-anim .oa-wave__l--1 { animation: oaWaveRun 14s linear infinite; } .oa-anim .oa-wave__l--2 { animation: oaWaveRun 20s linear infinite reverse; } .oa-anim .oa-wave__l--3 { animation: oaWaveRun 26s linear infinite; } @keyframes oaWaveRun { from { transform: translateX(0); } to { transform: translateX(1440px); } } .oa-wave__scope { position: absolute; left: 0; right: 0; top: 30%; width: 100%; height: 46%; --wr-viz-1: var(--oa-a); --wr-viz-2: var(--oa-b); filter: drop-shadow(0 0 6px rgba(var(--oa-ar), .9)); opacity: .85; } /* ========================================================================== STARTSEITE ========================================================================== */ .oa-sec { margin-top: 90px; } .oa-sec--first { margin-top: 40px; } .oa-sec__title { font-family: var(--oa-head); font-weight: 800; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.01em; text-transform: none; } .oa-sec__head .oa-sec__title { padding-left: 0; } .oa-sec__head .oa-sec__title::before { display: none; } .oa-ticker { background: linear-gradient(90deg, rgba(var(--oa-ar), .14), rgba(var(--oa-br), .1)); border-top: 1px solid rgba(var(--oa-ar), .3); border-bottom: 1px solid rgba(var(--oa-br), .25); } .oa-ticker__label { font-family: var(--oa-head); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; background: linear-gradient(90deg, var(--oa-a), color-mix(in srgb, var(--oa-a) 50%, var(--oa-b))); color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%); } .oa-ticker__item { font-family: var(--oa-body); font-weight: 700; } .oa-ticker__item::after { content: "♪"; color: var(--oa-a); } /* Heute im Programm */ .oa-dayband { position: relative; margin-bottom: 26px; padding: 18px 18px 30px; border-radius: var(--oa-r); background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); } .oa-dayband__track { position: relative; height: 54px; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px calc(100% / 24)); overflow: hidden; } .oa-dayband__slot { position: absolute; top: 6px; bottom: 6px; display: flex; align-items: center; padding: 0 10px; border-radius: 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--slot, var(--oa-a)) 75%, transparent), color-mix(in srgb, var(--slot, var(--oa-a)) 40%, transparent)); border: 1px solid color-mix(in srgb, var(--slot, var(--oa-a)) 80%, #fff 0%); overflow: hidden; box-shadow: 0 0 20px -6px var(--slot, var(--oa-a)); } .oa-dayband__slot b { font-size: 13px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .oa-dayband__slot.is-auto { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 8px, rgba(255, 255, 255, .02) 8px 16px); border-color: rgba(255, 255, 255, .1); box-shadow: none; } .oa-dayband__slot.is-auto b { color: var(--oa-muted); font-weight: 700; } .oa-dayband__slot.is-past { opacity: .4; } .oa-dayband__slot.is-now { box-shadow: 0 0 0 2px #fff, 0 0 30px var(--slot, var(--oa-a)); } .oa-dayband__now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--oa-live); box-shadow: 0 0 10px var(--oa-live); z-index: 2; transition: left 1s linear; } .oa-dayband__now i { position: absolute; left: 50%; top: -1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--oa-live); } .oa-anim .oa-dayband__now i { animation: oaLamp 1.4s ease-in-out infinite; } .oa-dayband__hours { position: relative; height: 14px; margin-top: 6px; } .oa-dayband__hours span { position: absolute; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--oa-dim); font-variant-numeric: tabular-nums; } .oa-dayband__hours span:first-child { transform: none; } .oa-dayband__hours span:last-child { transform: translateX(-100%); } .oa-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .oa-slot { display: flex; gap: 14px; align-items: center; padding: 12px; border-left: 4px solid var(--slot, var(--oa-a)); } .oa-slot.is-auto { border-left-color: rgba(255, 255, 255, .18); } .oa-slot.is-now { box-shadow: 0 0 0 1px var(--slot, var(--oa-a)), 0 20px 50px -24px var(--slot, var(--oa-a)); } .oa-slot__img { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--slot, var(--oa-a)) 55%, #120a24), #120a24); color: #fff; font-size: 22px; } .oa-slot.is-auto .oa-slot__img { background: rgba(255, 255, 255, .06); color: var(--oa-muted); } .oa-slot__img img { width: 100%; height: 100%; object-fit: cover; } .oa-slot__live { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 1px 0; border-radius: 6px; background: var(--oa-live); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; } .oa-slot__body { min-width: 0; display: flex; flex-direction: column; } .oa-slot__time { font-size: 13px; font-weight: 800; color: var(--oa-b); font-variant-numeric: tabular-nums; } .oa-slot__title { font-family: var(--oa-head); font-weight: 700; font-size: 16px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-slot__meta { font-size: 14px; color: var(--oa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Frequenzband – Animation in der Mitte */ .oa-freq { position: relative; isolation: isolate; margin-top: 100px; padding: 90px 0 30px; overflow: hidden; background: radial-gradient(60% 70% at 50% 50%, rgba(var(--oa-ar), .16), transparent 70%), linear-gradient(180deg, transparent, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, .025) 80%, transparent); } .oa-freq__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .oa-freq__ring { position: absolute; left: 50%; top: 46%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; border: 1.5px solid rgba(var(--oa-ar), .5); opacity: 0; } .oa-anim .oa-freq__ring { animation: oaFreqRing 6s ease-out infinite; } .oa-freq__ring:nth-child(2) { animation-delay: 1.5s !important; border-color: rgba(var(--oa-br), .5); } .oa-freq__ring:nth-child(3) { animation-delay: 3s !important; } .oa-freq__ring:nth-child(4) { animation-delay: 4.5s !important; border-color: rgba(var(--oa-br), .5); } @keyframes oaFreqRing { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(3.6); opacity: 0; } } .oa-freq__lines { position: absolute; left: 0; top: 30%; width: 100%; height: 34%; overflow: hidden; opacity: .5; } .oa-freq__line { fill: none; stroke-width: 2; transform-box: view-box; } .oa-freq__line--1 { stroke: rgba(var(--oa-ar), .7); } .oa-freq__line--2 { stroke: rgba(var(--oa-br), .7); } .oa-anim .oa-freq__line--1 { animation: oaWaveRun 18s linear infinite reverse; } .oa-anim .oa-freq__line--2 { animation: oaWaveRun 24s linear infinite; } .oa-freq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) minmax(0, 1fr); gap: 30px; align-items: center; } .oa-freq__col { padding: 22px; align-self: stretch; } .oa-freq__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--oa-head); font-weight: 700; font-size: 18px; color: #fff; } .oa-freq__title i { color: var(--oa-a); } .oa-freq__center { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .oa-orb { position: relative; width: min(380px, 80vw); aspect-ratio: 1; } .oa-orb__viz { position: absolute; inset: 0; width: 100%; height: 100%; --wr-viz-1: var(--oa-a); --wr-viz-2: var(--oa-b); } .oa-orb__core { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; background: repeating-radial-gradient(circle, #121018 0 2px, #1c1a24 3px 4px); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06), 0 0 60px rgba(var(--oa-ar), .45); } .oa-orb__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wr-playing .oa-orb__core { animation: oaSpin 8s linear infinite; } .oa-orb__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; font-size: 20px; background: rgba(var(--oa-ar), .85); box-shadow: 0 0 30px rgba(var(--oa-ar), .8); cursor: pointer; transition: transform .2s; } .wr-playing .oa-orb__play { animation: oaSpin 8s linear infinite reverse; } .oa-orb__play:hover { transform: scale(1.08); } .oa-freq__now b { display: block; font-family: var(--oa-head); font-weight: 800; font-size: clamp(20px, 2vw, 28px); color: #fff; } .oa-freq__now span[data-wr="artist"] { color: var(--oa-soft); } .oa-history .wr-hist { padding: 7px; border-radius: 12px; } .oa-history .wr-hist:hover { background: rgba(255, 255, 255, .05); } .oa-history .wr-hist-cover { width: 46px; height: 46px; border-radius: 10px; } .oa-history .wr-hist-text b { color: #fff; } .oa-history .wr-hist-time { color: var(--oa-muted); opacity: 1; } .oa-freq .wr-wish .form-control { background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .12); color: #fff; } .oa-freq .wr-wish .form-control:focus { border-color: var(--oa-a); box-shadow: 0 0 0 3px rgba(var(--oa-ar), .25); } .oa-freq .wr-wish .btn-primary { border: 0; border-radius: 999px; background: linear-gradient(100deg, var(--oa-a), var(--oa-b)); font-weight: 800; } .wr-wish-kind label:has(input:checked) { background: linear-gradient(135deg, var(--oa-a), var(--oa-b)); } .oa-freq__genres { margin-top: 50px; border-color: rgba(255, 255, 255, .07); } .oa-games__label { font-family: var(--oa-head); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; color: var(--oa-a); } .oa-games__item { border-radius: 999px; font-weight: 700; } .oa-games__item::before { content: "♪"; font-size: 13px; } /* Formate */ .oa-feature__icon::before { inset: 4px; border-radius: 22px; border: 1.5px solid rgba(var(--oa-ar), .4); transform: none; background: rgba(var(--oa-ar), .06); } .oa-feature:hover .oa-feature__icon::before { transform: rotate(8deg) scale(1.08); border-color: var(--oa-a); box-shadow: 0 0 24px rgba(var(--oa-ar), .6); } .oa-feature__icon { color: var(--oa-a); } .oa-feature:nth-child(even) .oa-feature__icon { color: var(--oa-b); } .oa-feature__name { font-family: var(--oa-head); font-weight: 700; font-size: 15px; letter-spacing: 0; text-transform: none; } .oa-fx--mic:hover .oa-ico, .oa-fx--headphones:hover .oa-ico, .oa-fx--heart:hover .oa-ico { animation: oaBeat .5s ease-in-out infinite alternate; } @keyframes oaBeat { from { transform: scale(.94); } to { transform: scale(1.14); } } .oa-fx--vinyl:hover .oa-ico { animation: oaSpin 1.6s linear infinite; } .oa-fx--note:hover .oa-ico, .oa-fx--party:hover .oa-ico, .oa-fx--chat:hover .oa-ico { animation: oaJump .45s ease-in-out infinite alternate; } .oa-fx--chart:hover .oa-ico, .oa-fx--slider:hover .oa-ico, .oa-fx--wave:hover .oa-ico, .oa-fx--tower:hover .oa-ico { animation: oaSparkle .6s ease-in-out infinite alternate; } /* Zahlen: Equalizer */ .oa-numbers__art { background: radial-gradient(500px 260px at 50% 100%, rgba(var(--oa-ar), .3), transparent 70%), linear-gradient(180deg, #120c24, #07050f); border-right: 1px solid rgba(255, 255, 255, .07); } .oa-numbers__eq { position: absolute; inset: 0; width: 100%; height: 100%; } .oa-numbers__bar { fill: rgba(var(--oa-ar), .8); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.4); } .oa-numbers__bar:nth-child(3n) { fill: rgba(var(--oa-br), .8); } .oa-anim .oa-numbers__bar { animation: oaEqBar 1s ease-in-out infinite alternate; } .oa-stat dd b { font-family: var(--oa-head); font-weight: 800; color: var(--oa-a); } .oa-stat:nth-child(even) dd b { color: var(--oa-b); } .oa-stat dd small { color: var(--oa-soft) !important; } /* Team: Moderatoren-Karten */ .oa-dj { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 18px 22px; scroll-snap-align: start; text-align: center; color: var(--oa-text); border-radius: var(--oa-r); background: radial-gradient(260px 200px at 50% 0%, color-mix(in srgb, var(--dj) 30%, transparent), transparent 70%), linear-gradient(170deg, rgba(30, 22, 54, .72), rgba(12, 9, 24, .86)); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; transition: transform .35s var(--oa-ease), box-shadow .35s; } .oa-dj:hover { color: var(--oa-text); transform: translateY(-6px); box-shadow: 0 30px 60px -28px var(--dj); } .oa-dj__ring { position: absolute; top: 18px; left: 50%; width: 132px; height: 132px; margin-left: -66px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--dj) 70%, transparent); } .oa-anim .oa-dj__ring { animation: oaSpin 18s linear infinite; } .oa-dj__pic { position: relative; display: grid; place-items: center; width: 110px; height: 110px; margin: 9px 0 10px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--dj), #120a24); box-shadow: 0 0 0 4px rgba(7, 5, 15, .8), 0 0 30px color-mix(in srgb, var(--dj) 60%, transparent); } .oa-dj__pic img { width: 100%; height: 100%; object-fit: cover; } .oa-dj__pic b { font-family: var(--oa-head); font-weight: 800; font-size: 34px; color: #fff; } .oa-dj__mic { position: absolute; top: 108px; left: calc(50% + 30px); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dj); color: #fff; box-shadow: 0 0 16px var(--dj); } .oa-dj__mic .oa-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .oa-dj__name { font-family: var(--oa-head); font-weight: 700; font-size: 17px; color: #fff; } .oa-dj__show { font-size: 14.5px; color: var(--oa-soft); } .oa-dj__tag { margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--dj); border: 1px solid color-mix(in srgb, var(--dj) 60%, transparent); } .oa-dj__eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-top: 12px; opacity: .3; transition: opacity .3s; } .oa-dj__eq i { width: 4px; height: 30%; border-radius: 2px; background: var(--dj); } .oa-dj:hover .oa-dj__eq { opacity: 1; } .oa-dj:hover .oa-dj__eq i { animation: wr-eq .7s ease-in-out infinite alternate; } .oa-dj:hover .oa-dj__eq i:nth-child(2) { animation-delay: -.3s; } .oa-dj:hover .oa-dj__eq i:nth-child(3) { animation-delay: -.5s; } .oa-dj:hover .oa-dj__eq i:nth-child(4) { animation-delay: -.2s; } .oa-garage__nav:hover { background: var(--oa-a); color: #fff; } /* Hörercharts */ .oa-charts { padding: 22px; } .oa-charts__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: 13px; color: var(--oa-b); } .oa-charts__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .oa-charts__row { position: relative; display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); overflow: hidden; } .oa-charts__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; } .oa-charts__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--oa-a), var(--oa-b)); border-radius: 3px; } .oa-charts__pos { font-family: var(--oa-head); font-weight: 800; font-size: 24px; color: var(--oa-muted); text-align: center; } .oa-charts__row.is-top1 .oa-charts__pos { color: #ffd166; text-shadow: 0 0 14px rgba(255, 209, 102, .7); } .oa-charts__row.is-top2 .oa-charts__pos { color: #e5e7eb; } .oa-charts__row.is-top3 .oa-charts__pos { color: #f4a261; } .oa-charts__disc { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--oa-a) 0 22%, #121018 23% 26%, transparent 27%), repeating-radial-gradient(circle, #121018 0 2px, #1c1a24 3px 4px); } .oa-charts__row:hover .oa-charts__disc { animation: oaSpin 2s linear infinite; } .oa-charts__who { display: flex; flex-direction: column; min-width: 0; } .oa-charts__who b { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-charts__who small { color: var(--oa-muted); } .oa-charts__votes { text-align: right; } .oa-charts__votes b { display: block; font-family: var(--oa-head); font-weight: 700; color: #fff; } .oa-charts__votes small { font-size: 12px; color: var(--oa-muted); } /* Jobs / Mach mit */ .oa-class { border-radius: var(--oa-r); } .oa-class__name { font-family: var(--oa-head); font-weight: 800; font-size: 22px; text-transform: none; } .oa-class__sub { color: var(--oa-b); } .oa-class__list li::before { border-radius: 50%; transform: none; border-color: var(--oa-a); } .oa-class__badge { border-radius: 999px; background: linear-gradient(90deg, var(--oa-a), var(--oa-b)); color: #fff; } /* Events */ .oa-race { border-radius: var(--oa-r); } .oa-race__lights { display: none; } /* Aufruf: Mikrofon mit Wellen */ .oa-cta { border-radius: 26px; background: radial-gradient(500px 300px at 85% 100%, rgba(var(--oa-ar), .3), transparent 70%), radial-gradient(500px 300px at 10% 0%, rgba(var(--oa-br), .18), transparent 70%), linear-gradient(160deg, rgba(30, 22, 54, .8), rgba(12, 9, 24, .9)); } .oa-cta__place svg { fill: none; stroke: var(--oa-a); stroke-width: 1.8; } .oa-cta__art svg { position: absolute; left: 12%; right: 12%; bottom: 0; width: 76%; height: 100%; } .oa-cta__rings circle { fill: none; stroke: rgba(var(--oa-ar), .7); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; } .oa-anim .oa-cta__rings circle { animation: oaRing 3s ease-out infinite; } .oa-cta__rings circle:nth-child(2) { animation-delay: 1s !important; } .oa-cta__rings circle:nth-child(3) { animation-delay: 2s !important; } /* News, Community */ .oa-news { border-radius: var(--oa-r); overflow: hidden; } .oa-news__cat { border-radius: 999px; background: var(--oa-a); color: #fff; } .oa-dc, .oa-tscard, .oa-galcard { border-radius: var(--oa-r); } /* Player-Leiste unten (aus dem Layout, befüllt vom Modul) */ body:has(.oa-player) { padding-bottom: 92px; } body.oa-console-visible .oa-player:not(.wr-collapsed) { transform: translate(-50%, calc(100% + 30px)); } .oa-player { position: fixed; left: 50%; bottom: 14px; z-index: 1040; width: min(1340px, calc(100% - 28px)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 22px; background: linear-gradient(110deg, rgba(14, 10, 28, .94), rgba(28, 12, 40, .94)); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--oa-text); transition: transform .4s var(--oa-ease); } .oa-player__glow { position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(90deg, var(--oa-a), var(--oa-b), var(--oa-a)); background-size: 200% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; } .wr-playing .oa-player__glow { opacity: 1; animation: oaFlowBg 4s linear infinite; } .oa-player__play { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; background: linear-gradient(135deg, var(--oa-a), var(--oa-b)); box-shadow: 0 8px 24px -6px rgba(var(--oa-ar), .9); } .oa-player__cover { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #2a1c48, #140c26); color: var(--oa-a); } .oa-player__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .oa-player__info { flex: 1 1 auto; min-width: 0; } .oa-player__top { display: flex; align-items: center; gap: 8px; min-width: 0; } .oa-player__show { font-size: 12.5px; color: var(--oa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-player__song { display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oa-player__song b { color: #fff; } .oa-player__song span { color: var(--oa-muted); } .oa-player__viz { flex: 0 1 200px; width: 200px; height: 40px; --wr-viz-1: var(--oa-a); --wr-viz-2: var(--oa-b); } .oa-player__count { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-variant-numeric: tabular-nums; } .oa-player__count small { font-size: 11px; color: var(--oa-muted); } .oa-player__count b { font-family: var(--oa-head); font-weight: 700; color: #fff; } .oa-player__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .oa-player__listeners { font-size: 13px; color: var(--oa-muted); white-space: nowrap; } .oa-player__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; transition: background-color .2s, transform .3s; } .oa-player__btn:hover { background: rgba(var(--oa-ar), .3); } .oa-player__stream { max-width: 160px; height: 34px; padding: 0 8px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; } .oa-player__stream option { color: #111; } /* Stream-Auswahl im Live-Pult (erscheint nur bei mehreren Streams) */ .oa-console__stream { max-width: 170px; height: 26px; padding: 0 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; } .oa-console__stream option { color: #111; } .oa-console__stream[hidden] { display: none; } .oa-player__vol { width: 96px; } .oa-player .wr-note { top: -12px; } .oa-player.wr-collapsed { transform: translate(-50%, calc(100% - 8px)); } .oa-player.wr-collapsed .oa-player__min { transform: translateY(-50px) rotate(180deg); background: var(--oa-a); } [data-wr-volume] { background: linear-gradient(90deg, var(--oa-a) var(--wr-vol, 80%), rgba(255, 255, 255, .2) var(--wr-vol, 80%)); } /* Gezeichneter Footer: Skyline mit Sendemast */ .oa-footer.has-art { border-top: 0; padding-top: 0; margin-top: 60px; background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .55) 140px); } .oa-footer__art { position: relative; height: clamp(150px, 11vw, 300px); margin-bottom: 26px; pointer-events: none; } .oa-footart { position: absolute; inset: 0; width: 100%; height: 100%; } .oa-footart__ground { fill: rgba(var(--oa-ar), .6); filter: drop-shadow(0 0 10px rgba(var(--oa-ar), .9)); } .oa-footer__tagline { font-family: var(--oa-head); font-weight: 700; } /* Webradio-Seiten des Moduls im Layout-Look */ .wd-content .wr-stage { border-radius: 26px; } .wd-content .wr-card { background: linear-gradient(160deg, rgba(30, 22, 54, .72), rgba(12, 9, 24, .82)); border-color: rgba(255, 255, 255, .08); } :root:root { --wr-accent: var(--oa-a); --wr-accent-2: var(--oa-b); --wr-live: var(--oa-live); --wr-viz-1: var(--oa-a); --wr-viz-2: var(--oa-b); } /* ---------- Responsiv ---------- */ @media (max-width: 1199.98px) { .oa-console { grid-template-columns: 70px minmax(0, 1.5fr) minmax(0, 1.1fr) 130px 64px; } .oa-console__viz { display: none; } .oa-freq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .oa-freq__center { grid-column: 1 / -1; order: -1; } .oa-garage__track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } .oa-player__viz { display: none; } } @media (max-width: 991.98px) { .oa-hero { padding-top: 110px; } .oa-console { grid-template-columns: 64px minmax(0, 1fr) 120px 60px; gap: 14px; } .oa-console__show { display: none; } .oa-console__disc { width: 64px; height: 64px; } .oa-console__play { width: 60px; height: 60px; } .oa-player__count, .oa-player__stream { display: none; } } @media (max-width: 767.98px) { .oa-topbar__now, .oa-topbar__now + .oa-topbar__text { display: none !important; } .oa-hero__shade { background: linear-gradient(180deg, rgba(7, 5, 15, .55), rgba(7, 5, 15, .82) 40%, rgba(7, 5, 15, .9)); } .oa-hero__title { font-size: clamp(36px, 11vw, 58px); } .oa-console { grid-template-columns: 56px minmax(0, 1fr) 56px; padding: 10px; border-radius: 20px; } .oa-console__count { grid-column: 1 / -1; grid-row: 2; } .oa-console__disc { width: 56px; height: 56px; } .oa-console__play { width: 56px; height: 56px; } .oa-freq { padding-top: 60px; } .oa-freq__grid { grid-template-columns: 1fr; } .oa-garage__track { grid-auto-columns: 70%; } .oa-charts__row { grid-template-columns: 30px minmax(0, 1fr) auto; } .oa-charts__disc { display: none; } body:has(.oa-player) { padding-bottom: 80px; } .oa-player { bottom: 8px; width: calc(100% - 16px); gap: 10px; padding: 8px; border-radius: 18px; } .oa-player__cover, .oa-player__listeners, .oa-player__vol, .oa-player [data-wr-mute] { display: none; } .oa-player__play { width: 46px; height: 46px; } } /* Niedrige Bildschirme (z. B. Laptop 1366 × 768): Hero passt auf den Bildschirm */ @media (min-width: 992px) and (max-height: 860px) { .oa-hero { min-height: calc(100vh - 100px); padding-top: 90px; } .oa-hero__title { font-size: clamp(36px, 7vh, 64px); margin: 16px 0 16px; } .oa-hero__text { font-size: 16px; margin-bottom: 20px; } } @media (prefers-reduced-motion: reduce) { .oa-hero *, .oa-freq *, .oa-console *, .oa-player * { animation: none !important; } } /* Nach-oben-Knopf über der Player-Leiste */ body:has(.oa-player) .oa-totop { bottom: 108px; } @media (max-width: 767.98px) { body:has(.oa-player) .oa-totop { bottom: 92px; } } /* Cookie-Symbol von Ilch über der Player-Leiste */ body:has(.oa-player) #tarteaucitronRoot #tarteaucitronIcon { bottom: 108px !important; } body:has(.oa-player) #tarteaucitronRoot #tarteaucitronIcon.tarteaucitronIconTopRight, body:has(.oa-player) #tarteaucitronRoot #tarteaucitronIcon.tarteaucitronIconBottomRight { bottom: 172px !important; }