MediaWiki:Common.css
MediaWiki-Schnittstellenseite
Weitere Optionen
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
/* ═══ Lucid Wiki — Erscheinungsbild ═══════════════════════════════════════
Dunkles Silber-Thema passend zum Lucid-Wappen. Schrift für Überschriften
(Cinzel) liegt selbst gehostet unter /lucid-assets/, keine Google-Anfragen. */
@font-face {
font-family: 'Cinzel';
src: url('/lucid-assets/cinzel.woff2') format('woff2');
font-weight: 400 900;
font-display: swap;
}
:root {
--color-primary__h: 215;
--color-primary__s: 14%;
--color-primary__l: 76%;
--lucid-bg: #0b0c0f;
--lucid-panel: #121419;
--lucid-panel-2: #171a20;
--lucid-line: rgba( 205, 211, 220, 0.12 );
--lucid-line-strong: rgba( 205, 211, 220, 0.26 );
--lucid-silver: #cdd3dc;
--lucid-silver-bright: #f1f3f6;
--lucid-silver-dim: #8b929d;
--lucid-metal: linear-gradient( 180deg, #f6f7f9 0%, #c9ced6 48%, #8d949f 100% );
--lucid-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
--lucid-radius: 10px;
}
/* ── Nur für Admins relevante Oberfläche ausblenden ─────────────────────── */
.citizen-preferences-dropdown,
#citizen-sidebar-lastmod,
#footer-info-lastmod,
#footer-places,
.citizen-userMenu:has( #p-personal.emptyPortlet ),
body:has( #p-personal.emptyPortlet ) #p-Verwaltung,
body:has( #p-personal.emptyPortlet ) #t-specialpages,
body:has( #p-personal.emptyPortlet ) #p-tb,
body:has( #p-personal.emptyPortlet ) #citizen-page-more-dropdown,
body:has( #p-personal.emptyPortlet ) #citizen-sticky-header-more,
.mw-userlogin-help {
display: none !important;
}
/* Primäre Schaltflächen (Anmelden, Speichern …) in Silber statt Blau */
.cdx-button.cdx-button--action-progressive.cdx-button--weight-primary,
.cdx-button.cdx-button--action-progressive.cdx-button--weight-primary:enabled {
background: var( --lucid-metal );
border-color: transparent;
color: #0b0c0f;
font-weight: 700;
}
.cdx-button.cdx-button--action-progressive.cdx-button--weight-primary:enabled:hover {
filter: brightness( 1.08 );
}
/* ── Grundflächen ───────────────────────────────────────────────────────── */
html,
body {
background-color: var( --lucid-bg );
}
::selection {
background: rgba( 205, 211, 220, 0.28 );
color: #fff;
}
/* ── Überschriften ──────────────────────────────────────────────────────── */
.mw-page-title-main,
.firstHeading,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.citizen-footer__sitetitle {
font-family: var( --lucid-display );
letter-spacing: 0.03em;
}
.firstHeading,
.mw-page-title-main {
font-weight: 700;
background: var( --lucid-metal );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mw-parser-output h2 {
font-weight: 600;
color: var( --lucid-silver-bright );
border-bottom: 1px solid var( --lucid-line );
padding-bottom: 0.3em;
}
.mw-parser-output h3 {
font-weight: 600;
color: var( --lucid-silver );
}
.mw-parser-output a:not( .new ):not( .external ) {
color: var( --lucid-silver-bright );
text-decoration: underline;
text-decoration-color: rgba( 205, 211, 220, 0.35 );
text-underline-offset: 0.2em;
}
.mw-parser-output a:not( .new ):hover {
text-decoration-color: var( --lucid-silver-bright );
}
/* ── Hauptseite ─────────────────────────────────────────────────────────── */
.page-Hauptseite.action-view .citizen-page-header,
.page-Hauptseite.action-view .citizen-page-sidebar,
.page-Hauptseite.action-view .citizen-page-footer {
display: none;
}
.lucid-hero {
position: relative;
display: grid;
justify-items: center;
text-align: center;
gap: 0.4rem;
padding: 3rem 1.5rem 2.75rem;
margin: 0 0 2.25rem;
border: 1px solid var( --lucid-line );
border-radius: 16px;
background:
radial-gradient( ellipse 60% 55% at 50% 0%, rgba( 205, 211, 220, 0.10 ), transparent 70% ),
linear-gradient( 180deg, var( --lucid-panel ) 0%, var( --lucid-bg ) 100% );
overflow: hidden;
}
.lucid-hero::before {
content: '';
position: absolute;
inset: 10px;
border: 1px solid rgba( 205, 211, 220, 0.06 );
border-radius: 10px;
pointer-events: none;
}
.lucid-hero__logo {
width: 168px;
height: 168px;
background: url( /lucid-assets/logo-320.png ) center / contain no-repeat;
filter: drop-shadow( 0 0 24px rgba( 205, 211, 220, 0.18 ) ) drop-shadow( 0 8px 16px rgba( 0, 0, 0, 0.6 ) );
margin-bottom: 0.75rem;
}
.lucid-hero__eyebrow {
font-family: var( --lucid-display );
font-size: 0.8rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
}
.lucid-hero__title {
font-family: var( --lucid-display );
font-weight: 700;
font-size: clamp( 2.4rem, 6vw, 3.8rem );
line-height: 1.05;
background: var( --lucid-metal );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lucid-hero__lead {
max-width: 36rem;
color: var( --lucid-silver );
font-size: 1.05rem;
line-height: 1.6;
margin-top: 0.4rem;
}
.lucid-hero__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-top: 1.25rem;
}
.mw-parser-output .lucid-btn a,
.mw-parser-output .lucid-btn a:not( .new ):not( .external ) {
display: inline-block;
padding: 0.65rem 1.4rem;
border-radius: 999px;
font-family: var( --lucid-display );
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.08em;
text-decoration: none;
border: 1px solid var( --lucid-line-strong );
color: var( --lucid-silver-bright );
background: rgba( 255, 255, 255, 0.03 );
transition: background-color 150ms ease, border-color 150ms ease;
}
.mw-parser-output .lucid-btn--primary a,
.mw-parser-output .lucid-btn--primary a:not( .new ):not( .external ) {
background: var( --lucid-metal );
color: #0b0c0f;
border-color: transparent;
}
.mw-parser-output .lucid-btn a:hover {
border-color: var( --lucid-silver );
background-color: rgba( 255, 255, 255, 0.07 );
}
.mw-parser-output .lucid-btn--primary a:hover {
filter: brightness( 1.06 );
}
.mw-parser-output .lucid-btn a.external {
padding-right: 1.4rem;
}
.mw-parser-output .lucid-btn--primary a.external {
background: var( --lucid-metal );
}
.mw-parser-output .lucid-btn a.external::after {
display: none;
}
.lucid-btn--disabled {
display: inline-block;
padding: 0.65rem 1.4rem;
border-radius: 999px;
font-family: var( --lucid-display );
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.08em;
border: 1px dashed var( --lucid-line-strong );
color: var( --lucid-silver-dim );
cursor: default;
}
/* ── Server-, Kollektions- und Discord-Kacheln ──────────────────────────── */
.lucid-links {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 12.5rem, 1fr ) );
gap: 1rem;
}
.lucid-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 1.5rem 0.75rem;
text-align: center;
border: 1px solid var( --lucid-line );
border-radius: var( --lucid-radius );
background: linear-gradient( 180deg, var( --lucid-panel-2 ), var( --lucid-panel ) );
}
.lucid-link__label {
font-family: var( --lucid-display );
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
}
.lucid-link__value {
font-family: var( --font-family-monospace );
font-size: 0.92rem;
color: var( --lucid-silver-bright );
user-select: all;
white-space: nowrap;
}
@media ( max-width: 480px ) {
.lucid-link__value {
white-space: normal;
overflow-wrap: anywhere;
}
}
.lucid-link--soon .lucid-link__value {
font-family: var( --lucid-display );
user-select: auto;
color: var( --lucid-silver );
}
.lucid-link__action {
margin-top: 0.6rem;
}
/* ── Abschnittstitel mit Ornament ───────────────────────────────────────── */
.lucid-section-title {
display: flex;
align-items: center;
gap: 1rem;
margin: 2.25rem 0 1rem;
font-family: var( --lucid-display );
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
}
.lucid-section-title::before,
.lucid-section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient( 90deg, transparent, var( --lucid-line-strong ), transparent );
}
/* ── Kacheln ────────────────────────────────────────────────────────────── */
.lucid-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 15.5rem, 1fr ) );
gap: 1rem;
}
.lucid-grid--five {
grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
}
.lucid-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 1.25rem 1.3rem 1.3rem;
border: 1px solid var( --lucid-line );
border-radius: var( --lucid-radius );
background: linear-gradient( 180deg, var( --lucid-panel-2 ), var( --lucid-panel ) );
transition: border-color 150ms ease, transform 150ms ease;
}
.lucid-card:hover {
border-color: var( --lucid-line-strong );
transform: translateY( -2px );
}
.lucid-card__numeral {
font-family: var( --lucid-display );
font-size: 0.8rem;
letter-spacing: 0.2em;
color: var( --lucid-silver-dim );
}
.lucid-card__title {
font-family: var( --lucid-display );
font-weight: 700;
font-size: 1.25rem;
color: var( --lucid-silver-bright );
}
.mw-parser-output .lucid-card__title a,
.mw-parser-output .lucid-card__title a:not( .new ):not( .external ) {
color: var( --lucid-silver-bright );
text-decoration: none;
}
.lucid-card__title a::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
.lucid-card__text {
color: var( --lucid-silver-dim );
font-size: 0.92rem;
line-height: 1.5;
}
/* ── Hinweiskästen ──────────────────────────────────────────────────────── */
.lucid-note {
margin: 1.25rem 0;
padding: 1rem 1.2rem;
border: 1px solid var( --lucid-line );
border-left: 3px solid var( --lucid-silver );
border-radius: 8px;
background: var( --lucid-panel );
}
.lucid-note__title {
font-family: var( --lucid-display );
font-weight: 700;
letter-spacing: 0.06em;
color: var( --lucid-silver-bright );
margin-bottom: 0.3rem;
}
.lucid-note__text > p:first-child { margin-top: 0; }
.lucid-note__text > p:last-child { margin-bottom: 0; }
.lucid-note--wichtig {
border-left-color: #f1f3f6;
background: linear-gradient( 90deg, rgba( 241, 243, 246, 0.07 ), var( --lucid-panel ) 60% );
}
.lucid-note--warnung {
border-left-color: #d9a441;
background: linear-gradient( 90deg, rgba( 217, 164, 65, 0.10 ), var( --lucid-panel ) 60% );
}
.lucid-note--warnung .lucid-note__title { color: #ecc374; }
.lucid-note--verboten {
border-left-color: #d0564f;
background: linear-gradient( 90deg, rgba( 208, 86, 79, 0.10 ), var( --lucid-panel ) 60% );
}
.lucid-note--verboten .lucid-note__title { color: #ef8a84; }
/* ── Infobox ────────────────────────────────────────────────────────────── */
.lucid-infobox {
float: right;
clear: right;
width: 20rem;
max-width: 100%;
margin: 0 0 1.25rem 1.5rem;
border: 1px solid var( --lucid-line-strong );
border-radius: 12px;
background: linear-gradient( 180deg, var( --lucid-panel-2 ), var( --lucid-panel ) );
font-size: 0.9rem;
overflow: hidden;
}
.lucid-infobox__title {
padding: 1rem 1rem 0.2rem;
text-align: center;
font-family: var( --lucid-display );
font-weight: 700;
font-size: 1.3rem;
line-height: 1.2;
color: var( --lucid-silver-bright );
}
.lucid-infobox__subtitle {
text-align: center;
font-style: italic;
color: var( --lucid-silver-dim );
padding: 0 1rem 0.6rem;
}
.lucid-infobox__image {
text-align: center;
padding: 0.6rem 1rem 0.8rem;
}
.lucid-infobox__caption {
font-size: 0.8rem;
color: var( --lucid-silver-dim );
margin-top: 0.35rem;
}
.lucid-infobox__header {
padding: 0.45rem 1rem;
font-family: var( --lucid-display );
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
background: rgba( 255, 255, 255, 0.03 );
border-top: 1px solid var( --lucid-line );
border-bottom: 1px solid var( --lucid-line );
}
.lucid-infobox__row {
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: 0.75rem;
padding: 0.45rem 1rem;
border-top: 1px solid rgba( 205, 211, 220, 0.05 );
}
.lucid-infobox__label {
color: var( --lucid-silver-dim );
font-weight: 600;
}
.lucid-infobox__value {
color: var( --lucid-silver-bright );
overflow-wrap: anywhere;
}
.lucid-status {
display: inline-block;
padding: 0.1rem 0.6rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid var( --lucid-line-strong );
}
.lucid-status--aktiv { color: #8fd6a5; border-color: rgba( 143, 214, 165, 0.4 ); }
.lucid-status--inaktiv { color: var( --lucid-silver-dim ); }
.lucid-status--verstorben,
.lucid-status--aufgelöst { color: #ef8a84; border-color: rgba( 239, 138, 132, 0.4 ); }
@media ( max-width: 720px ) {
.lucid-infobox {
float: none;
width: auto;
margin: 0 0 1.25rem;
}
}
/* ── Tabellen ───────────────────────────────────────────────────────────── */
.mw-parser-output .wikitable {
border: 1px solid var( --lucid-line-strong );
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: var( --lucid-panel );
}
.mw-parser-output .wikitable > * > tr > th {
font-family: var( --lucid-display );
letter-spacing: 0.05em;
background: var( --lucid-panel-2 );
color: var( --lucid-silver-bright );
border-color: var( --lucid-line );
}
.mw-parser-output .wikitable > * > tr > td {
border-color: var( --lucid-line );
}
/* ── Zeitleiste ─────────────────────────────────────────────────────────── */
:root {
--lucid-red: #c23a3a;
--lucid-red-glow: rgba( 194, 58, 58, 0.35 );
--lucid-silver-glow: rgba( 225, 230, 238, 0.35 );
}
.lucid-timeline {
--tl-accent: var( --lucid-silver );
--tl-glow: var( --lucid-silver-glow );
position: relative;
margin: 1.5rem 0 2.5rem;
padding-left: 2.25rem;
}
.lucid-timeline::before {
content: '';
position: absolute;
left: 0.45rem;
top: 0.4rem;
bottom: 0.4rem;
width: 2px;
background: linear-gradient( 180deg, transparent, var( --tl-accent ) 6%, var( --tl-accent ) 94%, transparent );
opacity: 0.35;
}
.lucid-timeline--rot,
.lucid-era-heading--rot + .lucid-timeline {
--tl-accent: var( --lucid-red );
--tl-glow: var( --lucid-red-glow );
}
.lucid-timeline__item {
position: relative;
margin-bottom: 1.35rem;
}
.lucid-timeline__item::before {
content: '';
position: absolute;
left: calc( -2.25rem + 0.45rem - 4px );
top: 0.45rem;
width: 10px;
height: 10px;
transform: rotate( 45deg );
background: var( --tl-accent );
box-shadow: 0 0 0 4px var( --lucid-bg ), 0 0 12px var( --tl-glow );
}
.lucid-timeline__year {
font-family: var( --lucid-display );
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var( --tl-accent );
}
.lucid-timeline__title {
font-family: var( --lucid-display );
font-weight: 700;
font-size: 1.15rem;
color: var( --lucid-silver-bright );
margin-top: 0.1rem;
}
.lucid-timeline__text {
color: var( --lucid-silver );
margin-top: 0.2rem;
line-height: 1.55;
}
.lucid-timeline__item--key {
padding: 1rem 1.2rem;
border: 1px solid var( --lucid-line-strong );
border-radius: var( --lucid-radius );
background: linear-gradient( 90deg, rgba( 255, 255, 255, 0.045 ), transparent 80% );
box-shadow: inset 3px 0 0 var( --tl-accent );
}
.lucid-timeline__item--key::before {
left: calc( -2.25rem + 0.45rem - 6px );
top: 1.35rem;
width: 14px;
height: 14px;
animation: lucid-pulse 2.8s ease-in-out infinite;
}
.lucid-timeline__item--key .lucid-timeline__title {
font-size: 1.45rem;
}
@keyframes lucid-pulse {
0%, 100% { box-shadow: 0 0 0 4px var( --lucid-bg ), 0 0 10px var( --tl-glow ); }
50% { box-shadow: 0 0 0 4px var( --lucid-bg ), 0 0 26px var( --tl-glow ), 0 0 48px var( --tl-glow ); }
}
.lucid-era-heading {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 1rem;
margin: 2.75rem 0 0.5rem;
padding-bottom: 0.8rem;
border-bottom: 1px solid var( --lucid-line );
font-family: var( --lucid-display );
font-weight: 700;
font-size: clamp( 1.5rem, 3.5vw, 2.1rem );
color: var( --lucid-silver-bright );
}
.lucid-era-heading span {
font-size: 0.9em;
background: var( --lucid-metal );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lucid-era-heading--rot span {
background: linear-gradient( 180deg, #f08a7e, #a3161c );
-webkit-background-clip: text;
background-clip: text;
}
.lucid-era-heading small {
margin-left: auto;
font-size: 0.8rem;
letter-spacing: 0.25em;
color: var( --lucid-silver-dim );
}
/* ── Lore: Banner ───────────────────────────────────────────────────────── */
.page-Lore.action-view .citizen-page-header {
display: none;
}
.lucid-epic {
position: relative;
display: grid;
justify-items: center;
gap: 0.6rem;
padding: clamp( 3.5rem, 9vw, 6.5rem ) 1.5rem;
margin-bottom: 2.5rem;
text-align: center;
border: 1px solid var( --lucid-line );
border-radius: 16px;
overflow: hidden;
isolation: isolate;
background:
radial-gradient( ellipse 70% 60% at 50% 115%, rgba( 194, 58, 58, 0.28 ), transparent 70% ),
radial-gradient( ellipse 55% 45% at 50% 0%, rgba( 225, 230, 238, 0.10 ), transparent 70% ),
linear-gradient( 180deg, #101216 0%, #0a0b0d 100% );
}
.lucid-epic::before,
.lucid-epic::after {
content: '';
position: absolute;
inset: -40% 0 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient( 2px 2px at 12% 88%, rgba( 255, 170, 110, 0.9 ), transparent ),
radial-gradient( 1.5px 1.5px at 27% 72%, rgba( 255, 140, 90, 0.8 ), transparent ),
radial-gradient( 2px 2px at 43% 94%, rgba( 255, 190, 130, 0.85 ), transparent ),
radial-gradient( 1px 1px at 58% 80%, rgba( 255, 150, 100, 0.8 ), transparent ),
radial-gradient( 2px 2px at 71% 91%, rgba( 255, 170, 110, 0.9 ), transparent ),
radial-gradient( 1.5px 1.5px at 86% 76%, rgba( 255, 140, 90, 0.8 ), transparent ),
radial-gradient( 1px 1px at 93% 97%, rgba( 255, 190, 130, 0.7 ), transparent );
animation: lucid-embers 14s linear infinite;
}
.lucid-epic::after {
animation-duration: 22s;
animation-delay: -9s;
transform: scaleX( -1 );
opacity: 0.7;
}
@keyframes lucid-embers {
from { transform: translateY( 0 ); opacity: 0; }
10% { opacity: 1; }
80% { opacity: 0.8; }
to { transform: translateY( -45% ); opacity: 0; }
}
.lucid-epic__eyebrow {
font-family: var( --lucid-display );
font-size: 0.8rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
animation: lucid-rise 1.2s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}
.lucid-epic__title {
font-family: var( --lucid-display );
font-weight: 800;
font-size: clamp( 2.3rem, 7vw, 4.6rem );
line-height: 1.02;
max-width: 14ch;
background: linear-gradient( 110deg, #7f8793 0%, #f6f7f9 22%, #aeb5bf 40%, #f6f7f9 58%, #7f8793 80% );
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow( 0 4px 24px rgba( 0, 0, 0, 0.8 ) );
animation:
lucid-rise 1.4s 0.15s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both,
lucid-sheen 7s 1.5s ease-in-out infinite;
}
.lucid-epic__lead {
max-width: 34rem;
margin-top: 0.6rem;
font-size: 1.05rem;
line-height: 1.6;
color: var( --lucid-silver );
animation: lucid-rise 1.4s 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}
@keyframes lucid-rise {
from { opacity: 0; transform: translateY( 22px ); filter: blur( 6px ); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes lucid-sheen {
0%, 100% { background-position: 100% 0; }
50% { background-position: 0% 0; }
}
/* Hauptseite bekommt denselben Auftritt */
.lucid-hero__logo {
animation: lucid-rise 1.2s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both, lucid-glow 6s 1.2s ease-in-out infinite;
}
.lucid-hero__eyebrow,
.lucid-hero__title,
.lucid-hero__actions {
animation: lucid-rise 1.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}
.lucid-hero__title { animation-delay: 0.15s; }
.lucid-hero__actions { animation-delay: 0.3s; }
@keyframes lucid-glow {
0%, 100% { filter: drop-shadow( 0 0 18px rgba( 205, 211, 220, 0.14 ) ) drop-shadow( 0 8px 16px rgba( 0, 0, 0, 0.6 ) ); }
50% { filter: drop-shadow( 0 0 34px rgba( 225, 230, 238, 0.32 ) ) drop-shadow( 0 8px 16px rgba( 0, 0, 0, 0.6 ) ); }
}
/* ── Lore: Verse, Zitate ────────────────────────────────────────────────── */
.lucid-verse {
max-width: 40rem;
margin: 0 auto 1rem;
text-align: center;
font-size: 1.12rem;
line-height: 1.7;
color: var( --lucid-silver );
}
.lucid-verse p {
margin: 0 0 1.1rem;
}
.lucid-verse b {
color: var( --lucid-silver-bright );
}
.lucid-quote {
position: relative;
max-width: 38rem;
margin: 2.5rem auto;
padding: 1.2rem 0;
text-align: center;
font-family: var( --lucid-display );
font-weight: 600;
font-size: clamp( 1.2rem, 2.6vw, 1.6rem );
line-height: 1.4;
color: var( --lucid-silver-bright );
}
.lucid-quote::before,
.lucid-quote::after {
content: '';
display: block;
width: 5rem;
height: 1px;
margin: 0 auto 1rem;
background: linear-gradient( 90deg, transparent, var( --lucid-silver ), transparent );
}
.lucid-quote::after {
margin: 1rem auto 0;
}
.lucid-quote--rot::before,
.lucid-quote--rot::after {
background: linear-gradient( 90deg, transparent, var( --lucid-red ), transparent );
}
.lucid-quote--lead {
font-size: clamp( 1.6rem, 4.5vw, 2.6rem );
background: var( --lucid-metal );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: lucid-rise 1.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ) both;
}
/* ── Lore: Epochen ──────────────────────────────────────────────────────── */
.lucid-eras {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
gap: 1rem;
}
.lucid-era {
--era: var( --lucid-silver );
position: relative;
padding: 1.5rem 1.3rem 1.4rem;
border: 1px solid var( --lucid-line );
border-top: 2px solid var( --era );
border-radius: var( --lucid-radius );
background: linear-gradient( 180deg, color-mix( in srgb, var( --era ) 9%, var( --lucid-panel-2 ) ), var( --lucid-panel ) 70% );
overflow: hidden;
}
.lucid-era--rot { --era: var( --lucid-red ); }
.lucid-era__years {
font-family: var( --lucid-display );
font-weight: 800;
font-size: 1.55rem;
color: var( --era );
letter-spacing: 0.02em;
}
.lucid-era__title {
font-family: var( --lucid-display );
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.03em;
hyphens: auto;
color: var( --lucid-silver-bright );
margin: 0.35rem 0 0.5rem;
}
.lucid-era__text {
color: var( --lucid-silver-dim );
line-height: 1.5;
font-size: 0.93rem;
}
/* ── Lore: Kaiserreich gegen Volksunion ─────────────────────────────────── */
.lucid-versus {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 0;
margin: 1rem 0 1.5rem;
border: 1px solid var( --lucid-line );
border-radius: 14px;
overflow: hidden;
background: var( --lucid-panel );
}
.lucid-side {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 2rem 1.25rem 1.75rem;
text-align: center;
}
.lucid-side--reich {
background: radial-gradient( ellipse 90% 70% at 50% 0%, rgba( 225, 230, 238, 0.10 ), transparent 70% );
}
.lucid-side--union {
background: radial-gradient( ellipse 90% 70% at 50% 0%, rgba( 194, 58, 58, 0.18 ), transparent 70% );
}
.lucid-side__flag img {
border-radius: 3px;
box-shadow: 0 6px 22px rgba( 0, 0, 0, 0.6 ), 0 0 0 1px rgba( 255, 255, 255, 0.08 );
}
.lucid-side__kicker {
margin-top: 0.8rem;
font-family: var( --lucid-display );
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
}
.lucid-side__name {
font-family: var( --lucid-display );
font-weight: 800;
font-size: 1.35rem;
margin-bottom: 0.8rem;
}
.mw-parser-output .lucid-side__name a:not( .new ) {
color: var( --lucid-silver-bright );
text-decoration: none;
}
.mw-parser-output .lucid-side--union .lucid-side__name a:not( .new ) {
color: #f0a39b;
}
.lucid-fact {
display: flex;
justify-content: space-between;
gap: 1rem;
width: 100%;
max-width: 19rem;
padding: 0.4rem 0;
border-top: 1px solid rgba( 205, 211, 220, 0.07 );
color: var( --lucid-silver-bright );
font-size: 0.92rem;
text-align: right;
}
.lucid-fact span {
color: var( --lucid-silver-dim );
text-align: left;
}
.lucid-versus__divider {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
width: 2px;
background: linear-gradient( 180deg, transparent, var( --lucid-silver ) 30%, var( --lucid-red ) 70%, transparent );
}
.lucid-versus__divider span {
position: absolute;
top: 2.6rem;
padding: 0.55rem 0.8rem;
white-space: nowrap;
font-family: var( --lucid-display );
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.2em;
line-height: 1.5;
text-transform: uppercase;
text-align: center;
color: var( --lucid-silver-bright );
background: #0b0c0f;
border: 1px solid var( --lucid-line-strong );
border-radius: 6px;
}
@media ( max-width: 640px ) {
.lucid-versus {
grid-template-columns: 1fr;
}
.lucid-versus__divider {
width: auto;
height: 2px;
margin: 1.2rem 0;
align-items: center;
background: linear-gradient( 90deg, transparent, var( --lucid-silver ) 30%, var( --lucid-red ) 70%, transparent );
}
.lucid-versus__divider span {
top: auto;
}
}
/* ── Lore: Begriffe ─────────────────────────────────────────────────────── */
.lucid-terms {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 14rem, 1fr ) );
gap: 0.75rem;
}
.lucid-term {
padding: 0.9rem 1rem;
border: 1px solid var( --lucid-line );
border-radius: 8px;
background: var( --lucid-panel );
color: var( --lucid-silver-dim );
font-size: 0.9rem;
line-height: 1.5;
}
.lucid-term__name {
font-family: var( --lucid-display );
font-weight: 700;
color: var( --lucid-silver-bright );
margin-bottom: 0.25rem;
}
/* ── Chronik ────────────────────────────────────────────────────────────── */
.lucid-chapter {
position: relative;
max-width: 44rem;
margin: 0 auto 3.5rem;
padding: 2.5rem 0 0;
}
.lucid-chapter::before {
content: attr( data-numeral );
position: absolute;
top: -0.5rem;
right: 0;
z-index: 0;
font-family: var( --lucid-display );
font-weight: 800;
font-size: clamp( 5rem, 14vw, 9rem );
line-height: 1;
color: rgba( 205, 211, 220, 0.05 );
pointer-events: none;
}
.lucid-chapter > * {
position: relative;
z-index: 1;
}
.lucid-chapter__kicker {
font-family: var( --lucid-display );
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var( --lucid-red );
}
.lucid-chapter__title {
font-family: var( --lucid-display );
font-weight: 800;
font-size: clamp( 1.8rem, 4.5vw, 2.6rem );
line-height: 1.1;
margin: 0.3rem 0 1.2rem;
background: var( --lucid-metal );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lucid-chapter__body {
font-size: 1.08rem;
line-height: 1.75;
color: var( --lucid-silver );
}
.lucid-chapter__body b {
color: var( --lucid-silver-bright );
}
.lucid-chapter .lucid-quote {
margin: 1.75rem auto 0;
}
/* ── Nationen ───────────────────────────────────────────────────────────── */
.lucid-nation-grid {
display: grid;
grid-template-columns: repeat( auto-fill, minmax( 11.5rem, 1fr ) );
gap: 1rem;
margin: 1rem 0 1.5rem;
}
.lucid-nation-grid--big {
grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
}
.lucid-nation-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 1.4rem 1rem 1.2rem;
text-align: center;
border: 1px solid var( --lucid-line );
border-radius: var( --lucid-radius );
background: linear-gradient( 180deg, var( --lucid-panel-2 ), var( --lucid-panel ) );
transition: border-color 150ms ease, transform 150ms ease;
}
.lucid-nation-card:hover {
border-color: var( --lucid-line-strong );
transform: translateY( -3px );
}
.lucid-nation-card__flag img {
height: 72px;
width: auto;
border-radius: 3px;
box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.55 ), 0 0 0 1px rgba( 255, 255, 255, 0.08 );
}
.lucid-nation-grid--big .lucid-nation-card__flag img {
height: 96px;
}
.lucid-nation-card__name {
margin-top: 0.6rem;
font-family: var( --lucid-display );
font-weight: 700;
font-size: 1.05rem;
}
.lucid-nation-grid--big .lucid-nation-card__name {
font-size: 1.35rem;
}
.mw-parser-output .lucid-nation-card__name a:not( .new ) {
color: var( --lucid-silver-bright );
text-decoration: none;
}
.lucid-nation-card__name a::after {
content: '';
position: absolute;
inset: 0;
}
.lucid-nation-card__sub {
color: var( --lucid-silver-dim );
font-size: 0.85rem;
}
.lucid-tag {
margin-top: 0.4rem;
padding: 0.15rem 0.7rem;
border-radius: 999px;
border: 1px solid var( --lucid-line-strong );
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var( --lucid-silver );
}
.lucid-tag--reich { color: var( --lucid-silver-bright ); border-color: rgba( 225, 230, 238, 0.45 ); }
.lucid-tag--rot { color: #f0a39b; border-color: rgba( 194, 58, 58, 0.55 ); }
.lucid-tag--warn { color: #ecc374; border-color: rgba( 217, 164, 65, 0.5 ); }
.lucid-relations {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
gap: 0.9rem;
margin: 1.25rem 0;
}
.lucid-relation {
padding: 1rem 1.1rem;
border: 1px solid var( --lucid-line );
border-radius: 8px;
background: var( --lucid-panel );
color: var( --lucid-silver );
line-height: 1.55;
}
.lucid-relation--reich { box-shadow: inset 3px 0 0 var( --lucid-silver ); }
.lucid-relation--union { box-shadow: inset 3px 0 0 var( --lucid-red ); }
.lucid-relation__label {
font-family: var( --lucid-display );
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var( --lucid-silver-dim );
margin-bottom: 0.35rem;
}
/* ── Hinweis auf der Startseite ─────────────────────────────────────── */
.lucid-disclaimer {
margin: 0 0 1.25rem;
padding: 0.6rem 1rem;
border: 1px solid rgba( 217, 164, 65, 0.35 );
border-left: 3px solid #d9a441;
border-radius: 8px;
background: rgba( 217, 164, 65, 0.06 );
color: var( --lucid-silver-dim );
font-size: 0.8rem;
line-height: 1.5;
}
.lucid-disclaimer b {
color: #ecc374;
}
/* ── Einblenden beim Scrollen (Klasse setzt MediaWiki:Common.js) ────────── */
.lucid-reveal {
opacity: 0;
transform: translateY( 28px );
transition: opacity 0.9s cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 0.9s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}
.lucid-reveal.is-visible {
opacity: 1;
transform: none;
}
@media ( prefers-reduced-motion: reduce ) {
.lucid-epic::before,
.lucid-epic::after,
.lucid-epic__eyebrow,
.lucid-epic__title,
.lucid-epic__lead,
.lucid-hero__logo,
.lucid-hero__eyebrow,
.lucid-hero__title,
.lucid-hero__actions,
.lucid-quote--lead,
.lucid-timeline__item--key::before {
animation: none !important;
}
.lucid-reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* ── Fußzeile ───────────────────────────────────────────────────────────── */
.citizen-footer {
border-top: 1px solid var( --lucid-line );
}
.citizen-footer__sitetitle {
background: var( --lucid-metal );
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Logo im Header etwas heller, damit das dunkle Ringprofil nicht versinkt */
.mw-logo-icon,
.citizen-footer__logo img {
filter: drop-shadow( 0 0 6px rgba( 205, 211, 220, 0.18 ) );
}