/* ===================================================================== Velmora City, Grund-Stylesheet (Designsystem "Cover bei Nacht") Verbindlich laut docs/design.md. Nur gemeinsame Bausteine. Seitenstile gehören nach public/css/pages/.css, das Control Panel setzt mit public/css/panel.css darauf auf. Aufbau 01 Schriften 09 Karte, Tafel, Chip, Tag, Pille 02 Tokens 10 Kennzahlen, Zahlenband, Statistik 03 Reset und Grund 11 Live-Status, Diagramm, Countdown 04 Layout 12 Kopieren, Missionsband, Toast 05 Typografie 13 Nachtszene, Claim, HUD, Tipp-Leiste 06 Knöpfe und Links 14 Handy, Steckbrief, Karte, Radar 07 Kopfzeile, Banner 15 News, VIP, Route, Galerie 08 Fußzeile 16 Tabs, Formulare, Tabellen, Hinweise 17 Leer- und Ladezustände, Bildplatzhalter 18 Ladebildschirm, Seitenkopf, Fließtext 19 Bewegung, reduzierte Bewegung, Druck Namensregel: Block .name, Teil .name__teil, Variante .name--variante, Zustand .is-*, JS-Anker nur über data-* (nie über Klassen). Brechpunkte (mobil zuerst): 640, 960, 1280 px. ===================================================================== */ /* --------------------------------------------------------------------- 01 SCHRIFTEN Genau vier Familien. Alle anderen Dateien in /fonts sind abgelöst. --------------------------------------------------------------------- */ @font-face { font-family: "Bebas Neue"; src: url("/fonts/bebas-neue-400.woff2?v=mub86nq9") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sora"; src: url("/fonts/sora-400.woff2?v=mrmnsmow") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Sora"; src: url("/fonts/sora-500.woff2?v=mrmnsmow") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Sora"; src: url("/fonts/sora-600.woff2?v=mrmnsmow") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-500.woff2?v=mrmnsmow") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-700.woff2?v=mrmnsmow") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Permanent Marker"; src: url("/fonts/permanent-marker.woff2?v=msy59b6s") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------- 02 TOKENS Farben immer über Tokens. Für Transparenz das RGB-Tripel nutzen: rgb(var(--mag-rgb) / .3) --------------------------------------------------------------------- */ :root { color-scheme: dark; /* Marke (am Logo gemessen, Standard für alle neuen Velmora-Oberflächen) */ --mag: #ff2ec7; --mag-rgb: 255 46 199; --vio: #b02ce0; --vio-rgb: 176 44 224; --rosa: #ff8ce0; --rosa-rgb: 255 140 224; --tief: #2b0a45; --tief-rgb: 43 10 69; --nacht: #12091c; --nacht-rgb: 18 9 28; /* Flächen, von hinten nach vorn */ --grund: #09060d; --grund-rgb: 9 6 13; --grund-2: #0d0812; --grund-2-rgb: 13 8 18; --flaeche: #170f21; --flaeche-rgb: 23 15 33; --flaeche-2: #1f1430; --flaeche-2-rgb: 31 20 48; --flaeche-3: #28193d; --flaeche-3-rgb: 40 25 61; --papier: #f3eff7; --papier-rgb: 243 239 247; --papier-2: #e4d9ec; --papier-2-rgb: 228 217 236; /* Text */ --text: #f3eff7; --text-rgb: 243 239 247; /* Überschriften, starker Text, 18:1 */ --text-2: #d8d0e1; --text-2-rgb: 216 208 225; /* Fließtext, 12,9:1 auf Grund */ --text-3: #a89cb4; --text-3-rgb: 168 156 180; /* Labels, Achsen, 7,7:1 auf Grund, 7,2:1 auf Fläche */ --text-ink: #09060d; /* Schrift auf Magenta, Papier, Gold */ --text-papier: #2a2033; /* Fließtext auf Papier, 13:1 */ --text-papier-2: #5b4a6b; /* Labels auf Papier, 7:1 */ /* Zustände */ --ok: #3fdc7f; --ok-rgb: 63 220 127; /* online, Geld, Zuwachs */ --achtung: #ffb547; --achtung-rgb: 255 181 71; /* Restart läuft, Hinweis, Entwurf */ --gefahr: #ff3d6a; --gefahr-rgb: 255 61 106; /* offline, Fehler, Wartung, Löschen */ --info: #8f9bff; --info-rgb: 143 155 255; /* neutrale Info */ /* Sonderfarben mit festem Zweck */ --bronze: #cd7f32; --bronze-rgb: 205 127 50; --silber: #c7d0da; --silber-rgb: 199 208 218; --gold: #ffc44d; --gold-rgb: 255 196 77; --discord: #5865f2; --discord-rgb: 88 101 242; /* nur Discord */ --steam: #1b2838; --steam-rgb: 27 40 56; /* nur Steam */ --blaulicht-rot: #ff3d6a; --blaulicht-blau: #4d7bff; --kennzeichen: #1d2a6b; /* nur Nummernschilder */ /* Verläufe */ --grad-logo: linear-gradient(100deg, #b02ce0, #ff2ec7 52%, #ff8ce0); --grad-btn: linear-gradient(105deg, #b02ce0, #ff2ec7); --grad-btn-lang: linear-gradient(105deg, #b02ce0, #ff2ec7 55%, #ff8ce0); --grad-sonne: linear-gradient(180deg, #ffc44d 0%, #ff8ce0 38%, #ff2ec7 64%, #b02ce0 100%); --grad-himmel: linear-gradient(180deg, #07040b 0%, #120720 35%, #2b0b3d 68%, #5a1150 92%, #7a1560 100%); --grad-chrom: linear-gradient(180deg, #ffffff 0%, #fff3fd 22%, #f2c6f4 44%, #4a1a63 49.5%, #7c2c96 52%, #ff8ce0 70%, #ffe8fa 88%, #ffffff 100%); --grad-gold: linear-gradient(105deg, #e8a92c, #ffc44d 50%, #ffe2a0); --grad-flaeche: linear-gradient(160deg, #1f1430, #110a19 70%); --grad-platzhalter: linear-gradient(135deg, #2b0a45 0%, #4a0f52 55%, #7a1560 100%); --streifen: repeating-linear-gradient(120deg, #ff2ec7 0 8px, #b02ce0 8px 13px); --streifen-leer: repeating-linear-gradient(120deg, #ff2ec7 0 8px, transparent 8px 13px); /* Linien */ --linie: rgba(255, 255, 255, .08); --linie-2: rgba(255, 255, 255, .14); --linie-3: rgba(255, 255, 255, .24); --linie-mag: rgba(255, 60, 205, .34); --linie-mag-2: rgba(255, 46, 199, .65); --linie-papier: rgba(9, 6, 13, .3); /* Schatten und Leuchten */ --versatz: 9px 9px 0 rgba(176, 44, 224, .55); /* Druckversatz, als filter: drop-shadow() am Elternelement */ --versatz-s: 5px 5px 0 rgba(176, 44, 224, .55); --versatz-hover: 14px 16px 0 rgba(255, 46, 199, .5); --versatz-tinte: 4px 4px 0 #09060d; --versatz-text: .055em .055em 0 rgba(176, 44, 224, .55); /* text-shadow für weiße Display-Zeilen */ --schatten-1: 0 8px 24px rgba(0, 0, 0, .35); --schatten-2: 0 24px 60px rgba(0, 0, 0, .55); --leuchten-mag: 0 0 18px rgba(255, 46, 199, .55); --leuchten-ok: 0 0 10px rgba(63, 220, 127, .7); --leuchten-neon: 0 0 2px #fff, 0 0 8px #ff2ec7, 0 0 22px #ff2ec7, 0 0 48px #b02ce0; /* text-shadow Neonröhre */ --fokus: #ffffff; /* Form: Schrägschnitt oben rechts und unten links, Scherung */ --cut: 22px; --cut-m: 14px; --cut-s: 10px; --cut-xs: 6px; --skew: -4deg; --unskew: 4deg; --r-s: 4px; --r-m: 10px; --r-l: 18px; --r-pill: 999px; /* Abstände (4er-Raster) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --gutter: clamp(16px, 4vw, 48px); --sec-y: clamp(64px, 9vw, 128px); --sec-y-s: clamp(40px, 5vw, 72px); --wrap: 1320px; --wrap-wide: 1480px; --wrap-text: 760px; --hdr-h: 64px; /* Ebenen */ --z-unter: -1; --z-basis: 1; --z-deko: 2; --z-inhalt: 3; --z-sticky: 50; --z-korn: 90; --z-header: 100; --z-menue: 110; --z-toast: 200; --z-band: 250; --z-modal: 300; --z-skip: 400; /* Bewegung */ --ease: cubic-bezier(.2, .8, .2, 1); --ease-punch: cubic-bezier(.3, 1.6, .4, 1); --ease-inout: cubic-bezier(.65, 0, .35, 1); --t-fast: .15s; --t: .25s; --t-slow: .45s; --t-reveal: .8s; /* Schrift */ --f-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif; --f-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --f-ui: "Space Grotesk", "Sora", system-ui, sans-serif; --f-script: "Permanent Marker", "Segoe Print", cursive; --fs-display: clamp(64px, 9vw, 144px); --fs-h1: clamp(52px, 7vw, 112px); --fs-h2: clamp(44px, 6vw, 96px); --fs-h3: clamp(26px, 2.4vw, 34px); --fs-h4: 17px; --fs-lead: clamp(17px, 1.35vw, 20px); --fs-body: 16px; --fs-klein: 14px; --fs-label: 12px; --fs-script: clamp(30px, 4.4vw, 68px); --fs-hud-xl: clamp(96px, 9.6vw, 150px); --fs-hud-l: clamp(56px, 6vw, 92px); --fs-hud-m: 36px; --fs-hud-s: 24px; } @media (min-width: 960px) { :root { --hdr-h: 74px; } } /* --------------------------------------------------------------------- 03 RESET UND GRUND --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); background: var(--grund); overflow-x: clip; /* am Wurzelelement: verhindert, dass Deko (Bänder, Klebestreifen) das mobile Layout verbreitert. Sticky bleibt intakt */ } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; min-height: 100vh; background: var(--grund); color: var(--text); font: 400 var(--fs-body)/1.65 var(--f-body); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Druckkorn nur auf großen Schirmen, ohne Mischmodus (kostet sonst beim Scrollen) */ @media (min-width: 960px) { body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-korn); pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,"); } } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; } p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } table { border-collapse: collapse; } code, kbd, samp { font-family: var(--f-ui); } [hidden] { display: none !important; } /* Lange deutsche Wörter dürfen nie das Layout sprengen */ h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; hyphens: auto; } p, li, dd, dt, td, th, figcaption, blockquote, label, summary { overflow-wrap: break-word; hyphens: auto; } ::selection { background: rgb(var(--mag-rgb) / .55); color: #fff; } /* Fokus: immer sichtbar. Geschnittene Elemente (clip-path) zeichnen ihn nach innen, siehe .btn */ :focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: -80px; z-index: var(--z-skip); padding: 12px 18px; background: var(--mag); color: var(--text-ink); font: 700 14px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .skip-link:focus { top: 12px; outline-color: #fff; } /* Inline-SVG-Icons (views/icons.js), Strich erbt die Textfarbe */ .icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; } .icon--s { width: 16px; height: 16px; } .icon--m { width: 20px; height: 20px; } .icon--l { width: 28px; height: 28px; } /* Schrägschnitt: eine Regel für alle geschnittenen Bausteine. --c setzt die Schnittgröße */ .cut, .btn, .card, .copy, .kpi, .note, .input, .select, .textarea, .search, .tabs__list, .news-card__media, .gallery__item, .vip__price-box, .empty, .phone-card, .places__item, .toast { clip-path: polygon(0 0, calc(100% - var(--c, var(--cut))) 0, 100% var(--c, var(--cut)), 100% 100%, var(--c, var(--cut)) 100%, 0 calc(100% - var(--c, var(--cut)))); } /* --------------------------------------------------------------------- 04 LAYOUT --------------------------------------------------------------------- */ .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); } .wrap--text { max-width: calc(var(--wrap-text) + 2 * var(--gutter)); } .sec { position: relative; padding-block: var(--sec-y); } .sec--tight { padding-block: var(--sec-y-s); } .sec--flush-top { padding-top: 0; } .sec--tint { background: linear-gradient(180deg, transparent, rgb(var(--tief-rgb) / .35) 40%, transparent); } .sec--dark { background: var(--grund-2); box-shadow: inset 0 1px 0 var(--linie), inset 0 -1px 0 var(--linie); } /* Raster: immer minmax(0, 1fr), Kinder dürfen schrumpfen */ .grid { display: grid; gap: var(--gap, var(--s-5)); grid-template-columns: minmax(0, 1fr); } .grid > * { min-width: 0; } @media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 90px); align-items: center; } .grid--split-r { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 90px); align-items: center; } .grid--aside { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 4vw, 64px); align-items: start; } .grid--aside-l { grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; } } .stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); } .stack > * { min-width: 0; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--s-3)); } .row--end { justify-content: flex-end; } .row--between { justify-content: space-between; } .flow > * + * { margin-top: var(--flow, 1em); } /* --------------------------------------------------------------------- 05 TYPOGRAFIE Display-Schrift ist immer Versal. Verlaufstext nur als Inline- oder mit .grad-text (Schutz für Umlautpunkte eingebaut). --------------------------------------------------------------------- */ .t-display { font: 400 var(--fs-display)/.9 var(--f-display); letter-spacing: .005em; text-transform: uppercase; } .t-h1 { font: 400 var(--fs-h1)/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase; } .t-h2 { font: 400 var(--fs-h2)/.92 var(--f-display); letter-spacing: .01em; text-transform: uppercase; } .t-h3 { font: 400 var(--fs-h3)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; } .t-h4 { font: 700 var(--fs-h4)/1.3 var(--f-ui); letter-spacing: .01em; } .t-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); max-width: 36em; } .t-klein { font-size: var(--fs-klein); line-height: 1.55; color: var(--text-2); } .t-label, .eyebrow { font: 700 var(--fs-label)/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); } .t-hud { font-family: var(--f-display); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: .85; } .t-script { font: 400 var(--fs-script)/1.05 var(--f-script); } .t-mono { font-family: var(--f-ui); font-variant-numeric: tabular-nums; } .t-muted { color: var(--text-3); } .t-ok { color: var(--ok); } .t-rosa { color: var(--rosa); } /* Verlaufstext. Als Block: Box nach oben erweitern, damit Ä Ö Ü nicht gekappt werden */ .grad-text, .sec-head__title em, .page-hero__title em, .t-display em, .t-h1 em, .t-h2 em { font-style: normal; background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(.055em .055em 0 rgb(var(--tief-rgb) / .95)); padding-right: .06em; } .grad-text--block { display: block; width: fit-content; max-width: 100%; padding-top: .22em; margin-top: -.22em; } /* Kicker: Warnstreifen plus Versal-Label */ .kicker { display: flex; align-items: center; gap: 12px; font: 700 var(--fs-label)/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); } .kicker::before { content: ""; width: 34px; height: 8px; flex: none; background: repeating-linear-gradient(120deg, var(--mag) 0 5px, transparent 5px 8px); } .kicker--center { justify-content: center; } /* Abschnittskopf als Missionskarte: Kapitelmarke, zweizeiliger Titel, zweite Zeile im Logo-Verlauf */ .sec-head { margin-bottom: clamp(32px, 4vw, 56px); } .sec-head__mark { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; font: 700 var(--fs-label)/1.2 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); } .sec-head__no { display: inline-block; padding: 6px 12px 5px; background: var(--mag); color: var(--text-ink); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } .sec-head__title { font: 400 var(--fs-h2)/.92 var(--f-display); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: var(--versatz-text); } .sec-head__title > span { display: block; } .sec-head__title em { display: block; width: fit-content; max-width: 100%; padding-top: .22em; margin-top: -.22em; text-shadow: none; } .sec-head__lead { margin-top: 20px; max-width: 34em; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); } .sec-head--center { text-align: center; } .sec-head--center .sec-head__mark { justify-content: center; } .sec-head--center .sec-head__title em { margin-inline: auto; } .sec-head--center .sec-head__lead { margin-inline: auto; } @media (min-width: 960px) { .sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 64px; } .sec-head--split .sec-head__lead { margin-top: 0; max-width: 30em; } } /* Mehrzeilen-Begrenzung OHNE Auslassungszeichen (line-clamp und ellipsis malen "..." und sind verboten). Höhe auf ganze Zeilen kappen. site.js setzt .is-clamped, wenn wirklich Text abgeschnitten wird, erst dann blendet die letzte Zeile aus. Hat der Server den Text schon gekürzt (Auszüge), kommt .is-clamped samt data-cut fest aus dem HTML. Ohne JS: sauberer Schnitt an der Zeilengrenze. */ .fade-2, .fade-3, .fade-4 { overflow: hidden; } .fade-2 { max-height: calc(2 * 1lh); } .fade-3 { max-height: calc(3 * 1lh); } .fade-4 { max-height: calc(4 * 1lh); } .fade-2.is-clamped, .fade-3.is-clamped, .fade-4.is-clamped { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1lh), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 1lh), transparent); } /* --------------------------------------------------------------------- 06 KNÖPFE UND LINKS Knöpfe sind geschnitten. Fokusrahmen liegt innen (outline-offset negativ), weil clip-path alles außerhalb der Form abschneidet. --------------------------------------------------------------------- */ .btn { --c: var(--cut-s); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; padding: 10px 22px; border: 0; cursor: pointer; text-decoration: none; text-align: center; font: 700 14px/1.15 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--flaeche-2); transition: transform var(--t) var(--ease), filter var(--t), background-position .5s var(--ease), background-color var(--t), color var(--t); } .btn:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; } .btn:active { transform: translateY(1px) scale(.98); } .btn .icon { width: 18px; height: 18px; } .btn--sm { --c: 8px; min-height: 40px; padding: 8px 14px; font-size: 13px; gap: 8px; } .btn--lg { --c: 12px; min-height: 56px; padding: 12px 28px; font-size: 15px; } .btn--block { display: flex; width: 100%; } .btn--icon { width: 44px; min-height: 44px; padding: 0; } .btn--icon.btn--sm { width: 40px; min-height: 40px; } /* Primär: Knopf-Verlauf Violett nach Magenta (ohne Rosa-Ende, das wäre unter weißer Schrift zu hell), weiße Schrift mit dunkler Kante, Glanzlauf beim Überfahren */ .btn--primary { background: var(--grad-btn); text-shadow: 0 1px 1px rgb(60 0 50 / .55); } .btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .4) 45%, transparent 60%) -150% 0 / 60% 100% no-repeat; transition: background-position .7s var(--ease); } .btn--primary:hover { filter: brightness(1.08); transform: translateY(-2px); } .btn--primary:hover::after { background-position: 250% 0; } /* Sekundär: Papier, dunkle Schrift */ .btn--secondary { background: var(--papier); color: var(--text-ink); } .btn--secondary:hover { background: #fff; transform: translateY(-2px); } .btn--secondary:focus-visible { outline-color: var(--mag); } /* Discord: nur für Discord-Ziele */ .btn--discord { background: var(--discord); } .btn--discord:hover { filter: brightness(1.12); transform: translateY(-2px); } /* Geister: ruhige Nebenaktion */ .btn--ghost { background: rgba(255, 255, 255, .06); color: var(--text); box-shadow: inset 0 0 0 1px rgb(var(--rosa-rgb) / .4); } .btn--ghost:hover { background: rgb(var(--mag-rgb) / .16); } /* Steam-Anmeldung */ .btn--steam { background: linear-gradient(105deg, #1b2838, #2a475e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } .btn--steam:hover { filter: brightness(1.15); transform: translateY(-2px); } /* Gold: Shop, Coins */ .btn--gold { background: var(--grad-gold); color: #2a1a00; } .btn--gold:hover { filter: brightness(1.06); transform: translateY(-2px); } .btn--gold:focus-visible { outline-color: var(--text-ink); } /* Gefahr: nur Panel, Löschen */ .btn--danger { background: var(--gefahr); color: var(--text-ink); } /* dunkel auf Rot 5,9:1, weiß wäre 3,4:1 */ .btn--danger:hover { filter: brightness(1.1); } .btn[disabled], .btn[aria-disabled="true"], .btn.is-busy { opacity: .5; pointer-events: none; } .btn.is-busy::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dreh 0.8s linear infinite; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } @media (max-width: 639px) { .btn-row--stack { flex-direction: column; align-items: stretch; } .btn-row--stack > .btn { width: 100%; } } /* Textlink in Versalien mit Unterstrich */ .link { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font: 700 13px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--rosa); background: linear-gradient(var(--mag), var(--mag)) 0 100% / 100% 2px no-repeat; transition: color var(--t), background-size var(--t) var(--ease); } .link:hover { color: #fff; background-size: 0 2px; background-position: 100% 100%; } .link--neon { text-shadow: 0 0 10px rgb(var(--mag-rgb) / .6); } .link--papier { color: #8e1467; background-image: linear-gradient(#8e1467, #8e1467); } .link--papier:hover { color: var(--text-ink); } /* Tastenkappe (Q, E, F8, Strg) */ .key { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px; font: 700 12px/1 var(--f-ui); color: var(--text); background: rgba(255, 255, 255, .08); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px var(--linie-2); } /* --------------------------------------------------------------------- 07 KOPFZEILE, MOBILMENÜ, BANNER, LADEBALKEN Klebt oben (sticky). Unter 1280 px: Menüknopf mit Vollbild-Menü. Ohne JS: Menüknopf ist ein Sprunglink zur Navigation in der Fußzeile. --------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--hdr-h); background: rgb(var(--grund-rgb) / .88); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--linie); } .site-header::after { /* Lichtkante */ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--mag) 30%, var(--vio) 70%, transparent); opacity: .5; } .site-header__bar { display: flex; align-items: center; gap: 16px; height: 100%; max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .brand { display: flex; align-items: center; gap: 12px; flex: none; text-decoration: none; min-height: 44px; } .brand__logo { height: 28px; width: auto; filter: drop-shadow(0 0 12px rgb(var(--mag-rgb) / .45)); transition: transform var(--t-slow) var(--ease-punch); } .brand:hover .brand__logo { transform: rotate(-6deg) scale(1.08); } .brand__word { display: flex; flex-direction: column; line-height: 1; } .brand__word b { font: 400 23px/.9 var(--f-display); letter-spacing: .08em; color: #fff; } .brand__word small { display: none; font: 700 12px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--rosa); margin-top: 4px; } .site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .nav-toggle, .nav-jump { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; padding: 0; background: rgba(255, 255, 255, .06); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-2); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .nav-toggle:focus-visible, .nav-jump:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; } .nav-toggle .icon, .nav-jump .icon { width: 22px; height: 22px; } .nav-toggle[aria-expanded="true"] { background: var(--mag); color: var(--text-ink); } .no-js .nav-toggle { display: none; } .js .nav-jump { display: none; } /* Live-Pille: Spieler jetzt, führt zu /server */ .live-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; background: rgb(var(--ok-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--ok-rgb) / .35); font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); transition: background var(--t); } .live-pill:hover { background: rgb(var(--ok-rgb) / .18); } .live-pill b { font: 400 22px/1 var(--f-display); letter-spacing: .02em; color: #fff; margin-top: 2px; font-variant-numeric: tabular-nums; } .live-pill__word { display: none; } .live-pill--offline { background: rgb(var(--gefahr-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--gefahr-rgb) / .4); } .live-pill--restart { background: rgb(var(--achtung-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--achtung-rgb) / .4); } /* Statuspunkt, pulsiert */ .dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / .7); animation: puls 1.8s infinite; } .dot--offline { background: var(--gefahr); animation: none; } .dot--restart { background: var(--achtung); animation: puls-achtung 1.8s infinite; } .dot--still { animation: none; } /* Hauptnavigation, mobil: Vollbild-Menü unter der Kopfzeile */ .nav { display: none; } .js .nav { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menue); height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--gutter) 32px; background: rgb(var(--grund-rgb) / .98); visibility: hidden; opacity: 0; transform: translateY(-12px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t); } .js .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s; } .nav__list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .nav__link { position: relative; display: flex; align-items: center; min-height: 56px; padding: 8px 4px 6px 16px; font: 400 32px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--text-2); border-bottom: 1px solid var(--linie); } .nav__link::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; background: var(--mag); transform: scaleY(0); transition: transform var(--t) var(--ease); } .nav__link:hover, .nav__link[aria-current="page"] { color: #fff; } .nav__link[aria-current="page"]::before, .nav__link:hover::before { transform: scaleY(1); } .nav__extra { display: grid; gap: 12px; margin-top: 28px; } body.is-menu-open { overflow: hidden; } @media (min-width: 640px) { .brand__logo { height: 30px; } .brand__word small { display: block; } .live-pill__word { display: inline; } } @media (min-width: 1280px) { .site-header__bar { gap: 20px; } .nav, .js .nav { display: flex; flex-direction: row; position: static; height: auto; overflow: visible; padding: 0; background: none; visibility: visible; opacity: 1; transform: none; transition: none; margin-left: auto; } .site-header__actions { margin-left: 0; } .nav-toggle, .nav-jump, .js .nav-jump, .nav__extra { display: none; } /* Reiter wie im Pausenmenü: dunkle Kacheln, aktiver Reiter hell mit Balken oben */ .nav__list { flex-direction: row; gap: 3px; } .nav__link { min-height: 40px; padding: 12px 13px 11px; border: 0; font: 700 12.5px/1 var(--f-ui); letter-spacing: .12em; background: rgba(255, 255, 255, .035); color: var(--text-2); transition: background var(--t), color var(--t); } .nav__link::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; transform: scaleX(0); transform-origin: left; } .nav__link:hover { background: rgba(255, 255, 255, .09); color: #fff; } .nav__link:hover::before { transform: scaleX(1); } .nav__link[aria-current="page"] { background: var(--papier); color: var(--text-ink); } .nav__link[aria-current="page"]::before { transform: scaleX(1); } .nav__link:focus-visible { outline-offset: 2px; } } /* Scroll-Ladebalken unter der Kopfzeile, JS setzt --sp (0 bis 1) */ .scroll-bar { position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; pointer-events: none; } .scroll-bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--sp, 0)); background: var(--streifen); } .no-js .scroll-bar { display: none; } /* Banner über der Kopfzeile (Ankündigung, Wartung). Inhalt site.banner */ .site-banner { position: relative; z-index: calc(var(--z-header) + 1); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; min-height: 44px; padding: 10px var(--gutter); font: 500 14px/1.4 var(--f-ui); text-align: center; color: var(--text); background: var(--flaeche-2); box-shadow: inset 0 -2px 0 var(--mag); } .site-banner .icon { color: var(--rosa); } .site-banner a { font-weight: 700; color: #fff; text-underline-offset: 3px; } .site-banner--warn { background: #2a1b08; box-shadow: inset 0 -2px 0 var(--achtung); } .site-banner--warn .icon { color: var(--achtung); } .site-banner--danger { background: #2b0a14; box-shadow: inset 0 -2px 0 var(--gefahr); } .site-banner--danger .icon { color: var(--gefahr); } .site-banner--success { background: #0a2415; box-shadow: inset 0 -2px 0 var(--ok); } .site-banner--success .icon { color: var(--ok); } /* --------------------------------------------------------------------- 08 FUSSZEILE --------------------------------------------------------------------- */ .site-footer { position: relative; overflow: hidden; padding: 72px 0 28px; background: #06040a; box-shadow: inset 0 1px 0 var(--linie); } .site-footer::before { /* Palmen-Wasserzeichen */ content: ""; position: absolute; inset: auto 0 0; height: 70%; pointer-events: none; opacity: .08; background: url("/img/palmen-wasserzeichen.png?v=mumzako8") center bottom / cover no-repeat; } .site-footer__grid { position: relative; display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); } .site-footer__logo { height: 48px; width: auto; } .site-footer__claim { margin-top: 14px; max-width: 24em; font-size: var(--fs-klein); color: var(--text-2); } .site-footer__h { margin-bottom: 10px; font: 400 22px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); } .site-footer__links { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0; } .site-footer__links a { display: inline-flex; align-items: center; min-height: 36px; font-size: var(--fs-klein); color: var(--text-2); text-decoration: none; } .site-footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .site-footer__base { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: 13px; line-height: 1.5; color: var(--text-3); } .socials { display: flex; gap: 10px; margin-top: 18px; list-style: none; padding: 0; } .socials a { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: var(--flaeche-2); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); transition: filter var(--t), transform var(--t) var(--ease); } .socials a:hover { filter: brightness(1.2); transform: translateY(-2px); } .socials a:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; } .socials .is-discord { background: var(--discord); } @media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .site-footer__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; } } /* --------------------------------------------------------------------- 09 KARTE, TAFEL, CHIP, TAG, PILLE, STEMPEL, AVATAR, HALBTON Versatzschatten sitzt immer am ELTERN (.tafel), der Schnitt am Kind. --------------------------------------------------------------------- */ .card { --c: var(--cut); position: relative; padding: clamp(20px, 2.4vw, 28px); background: var(--flaeche); } .card--line { background: var(--grad-flaeche); box-shadow: inset 0 0 0 1px var(--linie-mag); } .card--glow::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 100% 0%, rgb(var(--mag-rgb) / .2), transparent 70%); } .card--papier { background: var(--papier); color: var(--text-ink); } .card--papier p { color: var(--text-papier); } .card--flach { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--linie); } .card--s { --c: var(--cut-s); padding: 16px 18px; } .card__title { font: 400 var(--fs-h3)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; } .card__text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--text-2); } .card__foot { margin-top: 18px; } a.card { display: block; text-decoration: none; transition: background var(--t); } a.card:hover { background: var(--flaeche-2); } a.card:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; } .tafel { position: relative; filter: drop-shadow(var(--versatz)); } .tafel--s { filter: drop-shadow(var(--versatz-s)); } .tafel--link { transition: transform .35s var(--ease), filter .35s var(--ease); } .tafel--link:hover, .tafel--link:focus-within { transform: translate(-4px, -6px); filter: drop-shadow(var(--versatz-hover)); } /* Chips: kurze Fakten und Stichworte */ .chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 6px 10px 5px; font: 700 12px/1.1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); background: rgb(var(--mag-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--mag-rgb) / .3); } .chip b { font: 400 17px/1 var(--f-display); letter-spacing: .04em; color: #fff; margin-top: 1px; } .chip .icon { width: 14px; height: 14px; } .chip--dunkel { color: var(--text); background: rgb(var(--grund-rgb) / .72); box-shadow: inset 0 0 0 1px rgb(var(--rosa-rgb) / .3); } .chip--ok { color: var(--ok); background: rgb(var(--ok-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--ok-rgb) / .35); } .chip--achtung { color: var(--achtung); background: rgb(var(--achtung-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--achtung-rgb) / .35); } .chip--gefahr { color: var(--gefahr); background: rgb(var(--gefahr-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--gefahr-rgb) / .35); } .chip--gold { color: var(--gold); background: rgb(var(--gold-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--gold-rgb) / .35); } /* Tag: Kategorie einer Neuigkeit, Stempelkante */ .tag { display: inline-block; padding: 5px 8px 4px; font: 700 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; background: var(--grund); color: var(--rosa); } .tag--mag { background: var(--mag); color: var(--text-ink); } .tag--vio { background: #6a1a8f; color: #fff; } .tag--rot { background: #a8127b; color: #fff; } .tag--gold { background: var(--gold); color: var(--text-ink); } .tag--achtung { background: var(--achtung); color: var(--text-ink); } .tag--neu { background: var(--ok); color: var(--text-ink); } /* Status-Pille (Seite und Panel) */ .pill { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 5px 12px 4px; border-radius: var(--r-pill); font: 700 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--text-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--linie-2); } .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .pill--plain::before { display: none; } .pill--ok { color: var(--ok); background: rgb(var(--ok-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--ok-rgb) / .35); } .pill--achtung { color: var(--achtung); background: rgb(var(--achtung-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--achtung-rgb) / .35); } .pill--gefahr { color: var(--gefahr); background: rgb(var(--gefahr-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--gefahr-rgb) / .35); } .pill--mag { color: var(--rosa); background: rgb(var(--mag-rgb) / .12); box-shadow: inset 0 0 0 1px rgb(var(--mag-rgb) / .4); } .pill--info { color: var(--info); background: rgb(var(--info-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--info-rgb) / .35); } /* Stempel: nie über Text legen. line-height und padding schützen Umlautpunkte */ .stamp { display: inline-block; padding: .28em .45em .12em; border: 3px solid currentColor; font: 400 26px/1.1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: #c01c8f; transform: rotate(-10deg); opacity: .9; } .stamp--hell { color: #fff; background: rgb(var(--grund-rgb) / .35); } .avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 50%; font: 700 14px/1 var(--f-ui); color: #fff; background: var(--grad-btn); box-shadow: 0 0 0 2px var(--grund), 0 0 0 3px rgb(var(--mag-rgb) / .5); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--s { width: 32px; height: 32px; font-size: 12px; } .avatar--l { width: 64px; height: 64px; font-size: 20px; } /* Halbtonraster als Deko-Ebene */ .ht { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgb(var(--rosa-rgb) / .5) 1.15px, transparent 1.75px); background-size: 8px 8px; } .ht--tinte { background-image: radial-gradient(circle, rgb(var(--grund-rgb) / .45) 1.4px, transparent 2px); } .ht--ur { -webkit-mask-image: linear-gradient(135deg, transparent 45%, #000 100%); mask-image: linear-gradient(135deg, transparent 45%, #000 100%); } .ht--ol { -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%); mask-image: linear-gradient(135deg, #000 0%, transparent 55%); } /* --------------------------------------------------------------------- 10 KENNZAHLEN, ZAHLENBAND, STATISTIKLISTE, FÄHIGKEITSBALKEN --------------------------------------------------------------------- */ .kpi { --c: var(--cut-m); position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); } .kpi__label { font: 700 var(--fs-label)/1.3 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); } .kpi__value { display: flex; align-items: baseline; gap: 8px; font: 400 clamp(44px, 4.4vw, 64px)/.85 var(--f-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff; } .kpi__unit { font: 700 13px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .kpi__sub { font-size: 13px; line-height: 1.4; color: var(--text-2); } .kpi__spark { width: 100%; height: 36px; margin-top: auto; overflow: visible; } .kpi__spark path { fill: none; stroke: var(--mag); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; } .kpi--hot { background: linear-gradient(160deg, rgb(var(--vio-rgb) / .45), rgb(var(--mag-rgb) / .12)); box-shadow: inset 0 0 0 1px var(--linie-mag-2); } .kpi--hot .kpi__label { color: var(--rosa); } .delta { font: 700 13px/1 var(--f-ui); letter-spacing: .04em; font-variant-numeric: tabular-nums; } .delta--up { color: var(--ok); } .delta--down { color: var(--gefahr); } /* Zahlenband: Magenta-Band mit dunkler Schrift, gekreuzt von schwarzem Laufband */ .tapes { position: relative; overflow: hidden; padding: 48px 0 72px; display: flex; flex-direction: column-reverse; } .tape { position: relative; width: 112%; margin-left: -6%; } .tape--back { padding: 14px 0; background: var(--grund); z-index: 0; box-shadow: inset 0 2px 0 rgb(var(--rosa-rgb) / .5), inset 0 -2px 0 rgb(var(--rosa-rgb) / .5); transform: rotate(4deg); margin-bottom: -6px; } .tape--front { z-index: 1; padding: 24px 10% 26px; background: var(--mag); color: var(--text-ink); transform: rotate(-2deg); box-shadow: 0 14px 0 rgb(var(--vio-rgb) / .55); } .tape--front::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgb(var(--grund-rgb) / .16) 1.2px, transparent 1.8px); background-size: 7px 7px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 35%, transparent 65%, #000); mask-image: linear-gradient(90deg, #000, transparent 35%, transparent 65%, #000); } .tape__label { position: relative; max-width: var(--wrap); margin: 0 auto 12px; font: 700 12px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; } .tape__stats { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; max-width: var(--wrap); margin: 0 auto; list-style: none; padding: 0; } .tape__stats li { padding: 0 14px; border-left: 3px solid var(--text-ink); min-width: 0; } .tape__stats li:nth-child(odd) { border-left: 0; padding-left: 0; } .tape__stats b { display: block; font: 400 var(--fs-hud-l)/.85 var(--f-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .tape__stats span { display: block; margin-top: 6px; font: 700 12px/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; } .tape__stand { position: relative; max-width: var(--wrap); margin: 16px auto 0; font: 500 13px/1.3 var(--f-ui); } .marquee { overflow: hidden; } .marquee__track { display: flex; align-items: center; gap: 22px; width: max-content; animation: laufen 38s linear infinite; } .marquee__track span { font: 400 26px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); white-space: nowrap; } .marquee__track .icon { width: 16px; height: 16px; color: var(--mag); } @media (min-width: 640px) { .tape__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tape__stats li:nth-child(odd) { border-left: 3px solid var(--text-ink); padding-left: 14px; } .tape__stats li:nth-child(3n + 1) { border-left: 0; padding-left: 0; } } @media (min-width: 1280px) { .tapes { display: block; padding: 150px 0 160px; } .tape--back { position: absolute; top: 50%; left: -6%; margin: 0; transform: translateY(-50%) rotate(9deg); } .tape--front { padding: 28px 5% 30px; } .tape__stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .tape__stats li:nth-child(3n + 1) { border-left: 3px solid var(--text-ink); padding-left: 16px; } .tape__stats li:first-child { border-left: 0; padding-left: 0; } } /* Statistikliste: Bezeichnung links, Wert rechts, gepunktete Führung */ .statlist { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .statlist li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 16px; background: rgb(var(--flaeche-rgb) / .72); } .statlist li:nth-child(odd) { background: rgb(var(--flaeche-2-rgb) / .72); } .statlist span { font: 500 15px/1.3 var(--f-body); color: var(--text); min-width: 0; } .statlist i { flex: 1; min-width: 12px; border-top: 1px dashed rgba(255, 255, 255, .18); } .statlist b { font: 400 30px/1 var(--f-display); letter-spacing: .02em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; } .statlist small { font: 700 12px/1 var(--f-ui); color: var(--text-3); margin-left: -6px; } .statlist li:hover { background: var(--papier); } .statlist li:hover span, .statlist li:hover b { color: var(--text-ink); } .statlist li:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--mag); } .stand { margin-top: 12px; font: 500 13px/1.4 var(--f-ui); color: var(--text-3); } /* Fähigkeitsbalken wie im Statistik-Bildschirm: 10 Segmente, --v von 0 bis 1 */ .skills { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; } .skill { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 7px; } .skill__name { font: 700 12px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; } .skill__lvl { font: 500 12px/1.2 var(--f-ui); color: var(--text-3); font-variant-numeric: tabular-nums; } .skill__bar { grid-column: 1 / -1; height: 10px; background: linear-gradient(90deg, var(--vio), var(--mag)) 0 0 / calc(var(--v, 0) * 100%) 100% no-repeat, rgba(255, 255, 255, .1); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); mask-image: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%); } /* --------------------------------------------------------------------- 11 LIVE-STATUS, VERLAUFSDIAGRAMM, DIAGRAMM GROSS, COUNTDOWN Werte kommen serverseitig gerendert, JS aktualisiert alle 30 s (nur bei sichtbarem Tab) über data-live-*. --------------------------------------------------------------------- */ .live { --c: var(--cut); position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; background: var(--grad-flaeche); box-shadow: inset 0 0 0 1px var(--linie-mag); } .live::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 100% 0%, rgb(var(--mag-rgb) / .2), transparent 70%); } .live > * { position: relative; } .live__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .live__state { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--ok); } .live__tag { font: 400 17px/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; background: var(--mag); color: var(--text-ink); padding: 5px 10px 3px; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); } .live__big { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; } .live__num { font: 400 var(--fs-hud-xl)/.8 var(--f-display); font-variant-numeric: tabular-nums; background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(4px 4px 0 var(--tief)); padding-top: .12em; margin-top: -.12em; } .live__max { padding-bottom: 8px; font: 700 12px/1.35 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); } .live__max span { color: #fff; } .live__sub { margin-top: 8px; font-size: var(--fs-klein); color: var(--text-2); } .live__quiet { display: none; margin-top: 10px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); background: rgb(var(--vio-rgb) / .14); box-shadow: inset 3px 0 0 var(--vio); } .live__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 16px 0 18px; background: var(--linie); } .live__facts > div { min-width: 0; padding: 10px 12px 9px; background: #140c1d; } .live__facts dt { font: 700 12px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .live__facts dd { margin: 5px 0 0; font: 400 32px/.9 var(--f-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .live__restart { grid-column: 1 / -1; } .live__hint { margin-top: 8px; font: 500 12.5px/1.35 var(--f-ui); letter-spacing: .04em; color: var(--text-3); } .live .copy { margin-top: auto; } /* Zustände */ .live--offline .live__state { color: var(--gefahr); } .live--offline .live__num { background: none; color: var(--text-3); -webkit-text-fill-color: currentColor; filter: none; } .live--restart .live__state { color: var(--achtung); } .live--quiet .live__quiet { display: block; } @media (min-width: 640px) { .live { padding: 24px 30px 22px 32px; } .live__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); } .live__restart { grid-column: auto; } } /* Verlaufsdiagramm klein (24 Std.). SVG viewBox 0 0 288 64, preserveAspectRatio none. Lücken (offline, null) = neuer Teilpfad mit M. Fadenkreuz per JS. */ .spark { position: relative; margin-top: 14px; } .spark__svg { display: block; width: 100%; height: 64px; overflow: visible; cursor: crosshair; } .spark__area { fill: rgb(var(--mag-rgb) / .16); stroke: none; } .spark__line { fill: none; stroke: var(--mag); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .spark__base { stroke: var(--linie-2); stroke-width: 1; vector-effect: non-scaling-stroke; } .spark__cross { stroke: rgb(var(--text-rgb) / .5); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; opacity: 0; } .spark__dot { fill: #fff; stroke: var(--mag); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; } .spark.is-hover .spark__cross, .spark.is-hover .spark__dot { opacity: 1; } .spark__axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font: 500 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .spark__tip { color: var(--text); font-variant-numeric: tabular-nums; } /* Diagramm groß (Server-Seite, Panel). Achsen als HTML, damit Text nicht verzerrt */ .chart { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 6px 8px; height: var(--chart-h, 280px); } .chart__y { grid-row: 1; display: flex; flex-direction: column-reverse; justify-content: space-between; font: 500 12px/1 var(--f-ui); color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; } .chart__plot { grid-row: 1; grid-column: 2; position: relative; min-width: 0; } .chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .chart__grid line { stroke: var(--linie); stroke-width: 1; vector-effect: non-scaling-stroke; } .chart__area { fill: rgb(var(--mag-rgb) / .18); } .chart__line { fill: none; stroke: var(--mag); stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgb(var(--mag-rgb) / .7)); } .chart__line--2 { stroke: var(--rosa); stroke-dasharray: 5 5; filter: none; opacity: .8; } .chart__mark { stroke: var(--achtung); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .chart__x { grid-row: 2; grid-column: 2; display: flex; justify-content: space-between; font: 700 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .chart__tip { position: absolute; z-index: var(--z-inhalt); pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 8px 10px; background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie-mag-2); white-space: nowrap; font: 500 13px/1.3 var(--f-ui); color: var(--text-2); } .chart__tip b { display: block; font: 400 24px/1 var(--f-display); color: #fff; } .chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0 0 12px; padding: 0; font: 700 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); } .chart-legend li { display: inline-flex; align-items: center; gap: 8px; } .chart-legend i { width: 18px; height: 3px; background: var(--mag); } .chart-legend i.is-2 { background: repeating-linear-gradient(90deg, var(--rosa) 0 4px, transparent 4px 7px); } /* Countdown bis zum Restart (Europe/Berlin), JS zählt jede Sekunde */ .countdown { display: inline-flex; align-items: baseline; gap: 6px; font: 700 12.5px/1 var(--f-ui); letter-spacing: .06em; color: var(--rosa); font-variant-numeric: tabular-nums; } .countdown time { font: inherit; } .countdown--big { gap: 4px; align-items: flex-end; color: #fff; } .countdown--big b { font: 400 var(--fs-hud-l)/.85 var(--f-display); font-variant-numeric: tabular-nums; } .countdown--big i { font: 700 12px/1 var(--f-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 10px 6px 2px; } /* Restart-Zeitstrahl: drei Rauten, jetzt-Marke */ .timeline { position: relative; height: 44px; margin-top: 8px; } .timeline__track { position: absolute; left: 0; right: 0; top: 12px; height: 5px; background: repeating-linear-gradient(120deg, rgb(var(--mag-rgb) / .45) 0 6px, transparent 6px 10px); } .timeline__mark { position: absolute; top: 4px; left: var(--x); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; } .timeline__mark::before { content: ""; width: 14px; height: 14px; transform: rotate(45deg); background: var(--grund); box-shadow: inset 0 0 0 2px var(--mag); } .timeline__mark.is-past::before { background: var(--mag); } .timeline__mark span { font: 700 12px/1 var(--f-ui); color: var(--text-2); font-variant-numeric: tabular-nums; } .timeline__now { position: absolute; top: 0; left: var(--x); width: 2px; height: 28px; background: var(--ok); box-shadow: var(--leuchten-ok); } /* --------------------------------------------------------------------- 12 KOPIERFELD, MISSIONSBAND, TOAST --------------------------------------------------------------------- */ .copy { --c: var(--cut-xs); display: flex; align-items: stretch; min-height: 48px; background: #07040b; box-shadow: inset 0 0 0 1px rgb(var(--mag-rgb) / .45); } .copy__prompt { align-self: center; flex: none; margin-left: 10px; padding: 4px 6px; border-radius: 3px; font: 700 12px/1 var(--f-ui); letter-spacing: .06em; color: var(--text-ink); background: var(--rosa); } /* Nichts abschneiden (design.md): in engen Behältern bricht der Befehl erst am Leerzeichen, notfalls im Wort um */ .copy__code { flex: 1; min-width: 0; align-self: center; padding: 12px; font: 500 14px/1.2 var(--f-ui); letter-spacing: .02em; color: var(--rosa); white-space: normal; overflow-wrap: anywhere; user-select: all; } .route__step .copy__code, .live .copy__code { padding-inline: 10px; font-size: 13px; letter-spacing: 0; } .copy__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; padding: 0 16px; border: 0; font: 700 12.5px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--grad-btn); transition: filter var(--t), background var(--t); } .copy__btn:hover { filter: brightness(1.15); } .copy__btn:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; } .copy__btn span { display: none; } .copy.is-done .copy__btn { background: var(--ok); color: var(--text-ink); } .copy--hell { background: var(--papier); } .copy--hell .copy__code { color: var(--text-ink); } .no-js .copy__btn { display: none; } @media (min-width: 640px) { .copy__btn span { display: inline; } .copy--kompakt .copy__btn span { display: none; } } /* Missionsband: "Ziel erreicht" quer über den Schirm. role=status, blockiert nichts. Dient für Kopieren (Seite) und für "Veröffentlicht", "Wartung an" (Panel). */ .passed { position: fixed; left: 0; right: 0; top: 38%; z-index: var(--z-band); display: grid; place-items: center; pointer-events: none; visibility: hidden; } .passed__band { width: 100%; padding: 22px 16px 20px; text-align: center; background: linear-gradient(90deg, transparent, rgb(var(--grund-rgb) / .94) 16%, rgb(var(--grund-rgb) / .94) 84%, transparent); transform: scaleY(0); transition: transform .35s var(--ease); } .passed__band::before, .passed__band::after { content: ""; display: block; height: 1px; margin: 0 auto; width: 70%; background: linear-gradient(90deg, transparent, var(--mag), transparent); } .passed__band::before { margin-bottom: 16px; } .passed__band::after { margin-top: 16px; } .passed__kick { font: 700 13px/1 var(--f-ui); letter-spacing: .4em; text-transform: uppercase; color: var(--rosa); opacity: 0; transition: opacity .25s .1s; } .passed__title { display: block; width: fit-content; max-width: 100%; margin: 8px auto 0; padding-top: .2em; font: 400 clamp(56px, 9vw, 120px)/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase; background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(4px 4px 0 var(--tief)); transform: scale(1.5); opacity: 0; transition: transform .45s var(--ease-punch) .08s, opacity .2s .08s; } .passed__sub { margin-top: 10px; font: 700 13px/1.4 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--text); opacity: 0; transition: opacity .3s .3s; } .passed__plus { margin-left: 12px; color: var(--ok); white-space: nowrap; } .passed.is-on { visibility: visible; } .passed.is-on .passed__band { transform: scaleY(1); } .passed.is-on .passed__title { transform: none; opacity: 1; } .passed.is-on .passed__kick, .passed.is-on .passed__sub { opacity: 1; } .passed--gefahr .passed__title { background: linear-gradient(100deg, #ff3d6a, #ff8ce0); -webkit-background-clip: text; background-clip: text; } /* Toasts: kleine Meldungen unten rechts, mobil unten über volle Breite */ .toasts { position: fixed; z-index: var(--z-toast); left: 12px; right: 12px; bottom: 12px; display: grid; gap: 10px; pointer-events: none; } .toast { --c: var(--cut-s); pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 14px 14px 16px; background: var(--flaeche-2); box-shadow: inset 4px 0 0 var(--mag), inset 0 0 0 1px var(--linie-2); font-size: var(--fs-klein); line-height: 1.45; color: var(--text-2); } .toast__icon { width: 20px; height: 20px; color: var(--rosa); margin-top: 1px; } .toast__title { display: block; font: 700 14px/1.3 var(--f-ui); color: #fff; } .toast__close { display: grid; place-items: center; width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; background: none; color: var(--text-3); } .toast__close:hover { color: #fff; } .toast--ok { box-shadow: inset 4px 0 0 var(--ok), inset 0 0 0 1px var(--linie-2); } .toast--ok .toast__icon { color: var(--ok); } .toast--achtung { box-shadow: inset 4px 0 0 var(--achtung), inset 0 0 0 1px var(--linie-2); } .toast--achtung .toast__icon { color: var(--achtung); } .toast--gefahr { box-shadow: inset 4px 0 0 var(--gefahr), inset 0 0 0 1px var(--linie-2); } .toast--gefahr .toast__icon { color: var(--gefahr); } .toast.is-in { animation: toast-rein .35s var(--ease) both; } .toast.is-out { animation: toast-raus .25s var(--ease) both; } @media (min-width: 640px) { .toasts { left: auto; right: 20px; bottom: 20px; width: 380px; } } /* --------------------------------------------------------------------- 13 NACHTSZENE, CLAIM, NEONSCHILD, HUD, TIPP-LEISTE Die Nachtszene ist reines CSS plus vier SVG-Dateien (/img/szene). Sie funktioniert ohne jedes Foto. Kein Perspektivgitter. --------------------------------------------------------------------- */ .night { position: absolute; inset: 0; overflow: hidden; background: var(--grad-himmel); isolation: isolate; } .night::before { /* Lichtglocke über dem Horizont */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 45% at var(--sun-x, 50%) 100%, rgb(var(--mag-rgb) / .42), transparent 70%), radial-gradient(ellipse 90% 55% at var(--sun-x, 50%) 100%, rgb(var(--vio-rgb) / .4), transparent 75%); } .night__stars { position: absolute; inset: 0 0 35%; pointer-events: none; opacity: .7; background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent 60%), radial-gradient(1px 1px at 120px 80px, rgba(255, 255, 255, .8), transparent 60%), radial-gradient(1.5px 1.5px at 200px 150px, #ffd6f4, transparent 60%), radial-gradient(1px 1px at 260px 40px, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 330px 200px, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1.2px 1.2px at 80px 230px, rgba(255, 255, 255, .75), transparent 60%); background-size: 350px 260px; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); } .night__sun { position: absolute; left: var(--sun-x, 50%); bottom: var(--horizon, 22%); width: var(--sun-size, min(460px, 70%)); aspect-ratio: 1; transform: translate(-50%, 50%); pointer-events: none; border-radius: 50%; background: var(--grad-sonne); -webkit-mask-image: linear-gradient(180deg, #000 0 46%, transparent 46% 48.5%, #000 48.5% 55%, transparent 55% 58%, #000 58% 63%, transparent 63% 67.5%, #000 67.5% 71%, transparent 71% 77%, #000 77%); mask-image: linear-gradient(180deg, #000 0 46%, transparent 46% 48.5%, #000 48.5% 55%, transparent 55% 58%, #000 58% 63%, transparent 63% 67.5%, #000 67.5% 71%, transparent 71% 77%, #000 77%); filter: drop-shadow(0 0 40px rgb(var(--mag-rgb) / .6)); } .night__skyline { position: absolute; left: 50%; bottom: var(--horizon, 22%); transform: translateX(-50%); width: auto; min-width: 100%; max-width: none; pointer-events: none; } .night__skyline--far { height: var(--sky-far, 46%); opacity: .9; } .night__skyline--near { height: var(--sky-near, 32%); } .night__ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--horizon, 22%); background: linear-gradient(180deg, #1a0624 0%, #0b0510 55%, var(--grund) 100%); } .night__ground::before { /* Spiegelung der Sonne */ content: ""; position: absolute; left: var(--sun-x, 50%); top: 0; width: min(420px, 60%); height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse 50% 60% at 50% 0, rgb(var(--rosa-rgb) / .4), transparent 70%); } .night__horizon { position: absolute; left: 0; right: 0; bottom: var(--horizon, 22%); height: 2px; background: linear-gradient(90deg, transparent, #ff8ce0 20%, #fff 50%, #ff8ce0 80%, transparent); box-shadow: 0 0 18px 4px rgb(var(--mag-rgb) / .75); } .night__palm { position: absolute; bottom: calc(var(--horizon, 22%) - 8px); width: auto; max-width: none; pointer-events: none; transform-origin: 50% 100%; } .night__palm--l { left: -6%; height: var(--palm-l, 78%); animation: wiegen 9s ease-in-out infinite; } .night__palm--r { right: -6%; height: var(--palm-r, 66%); animation: wiegen-r 11s ease-in-out infinite; } .night__palm--r img, img.night__palm--r { transform: scaleX(-1); } .night--ohne-sonne .night__sun, .night--ohne-sonne .night__ground::before { display: none; } /* Claim als Vice-City-Zitat: Chromzeile plus Neon-Handschrift darunter (nie darüber) */ .claim { display: flex; flex-direction: column; align-items: flex-start; } .claim__chrome { display: block; padding-top: .14em; margin-top: -.14em; font: 400 var(--fs-display)/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase; background: var(--grad-chrom); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #2a0a3a) drop-shadow(0 7px 0 rgb(20 4 30 / .9)); } .claim__script { display: block; margin: .12em 0 0 .6em; transform: rotate(-4deg); transform-origin: left center; font: 400 var(--fs-script)/1.05 var(--f-script); color: #ffe9f9; text-shadow: var(--leuchten-neon); } .claim--center { align-items: center; text-align: center; } .claim--center .claim__script { margin-left: 0; } /* Neonschild: Logo mit Röhrenglühen, geht beim Laden flackernd an */ .neon-sign { height: var(--sign-h, clamp(56px, 7vw, 96px)); width: auto; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .6)) drop-shadow(0 0 14px rgb(var(--mag-rgb) / .8)) drop-shadow(0 0 40px rgb(var(--vio-rgb) / .7)); } /* HUD-Ecke: Uhrzeit San Andreas, Startkapital, Fahndungssterne */ .hud { display: flex; align-items: center; gap: 20px; text-align: right; } .hud__item { display: flex; flex-direction: column; align-items: flex-end; } .hud__time { font: 400 28px/1 var(--f-display); letter-spacing: .06em; color: #fff; font-variant-numeric: tabular-nums; } .hud__cash { font: 400 38px/1 var(--f-display); letter-spacing: .03em; color: var(--ok); text-shadow: 0 0 1px #000, 0 2px 0 #0a3d20, 0 0 12px rgb(var(--ok-rgb) / .35); font-variant-numeric: tabular-nums; } .hud__label { margin-top: 3px; font: 500 12px/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .wanted { display: flex; gap: 3px; } .wanted svg { width: 20px; height: 20px; fill: rgb(var(--grund-rgb) / .6); stroke: rgb(var(--text-rgb) / .75); stroke-width: 1.4; } .wanted svg.is-on { fill: #fff; stroke: #fff; } /* Tipp-Leiste unter dem Cover und im Ladebildschirm */ .tipbar { position: relative; background: rgb(var(--grund-rgb) / .9); box-shadow: inset 0 1px 0 var(--linie), inset 0 -1px 0 var(--linie); } .tipbar__in { display: flex; align-items: center; gap: 14px; min-height: 58px; padding-block: 12px; } .tipbar__label { flex: none; padding: 5px 8px 3px; font: 400 18px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-ink); background: var(--rosa); } .tipbar__text { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); transition: opacity .35s; } .tipbar__text b { color: #fff; font-weight: 600; } .tipbar__text.is-out { opacity: 0; } .tipbar .spinner { display: none; } @media (min-width: 640px) { .tipbar .spinner { display: block; } } /* --------------------------------------------------------------------- 14 HANDY-MOCKUP, STECKBRIEF, CHAT, KENNZEICHEN, KARTE, RADAR --------------------------------------------------------------------- */ .phone { position: relative; width: min(300px, 78vw); aspect-ratio: 300 / 620; border-radius: 46px; padding: 12px; background: linear-gradient(145deg, #3a2a4a, #0d0812 40%, #241833); box-shadow: 0 0 0 2px #4a3a5c, 18px 18px 0 rgb(var(--vio-rgb) / .5), var(--schatten-2); } .phone--schraeg { transform: rotate(-5deg); } .phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #150a20 url("/img/handy-wallpaper.webp?v=mumzako6") center 40% / cover; } .phone__screen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--grund-rgb) / .3), rgb(var(--grund-rgb) / .1) 30%, rgb(var(--grund-rgb) / .6)); } .phone__bar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 0; font: 700 12px/1 var(--f-ui); } .phone__notch { width: 88px; height: 24px; border-radius: 14px; background: #000; } .phone__app { position: relative; display: grid; gap: 10px; padding: 16px 14px; } .phone__logo { height: 36px; width: auto; justify-self: center; margin: 4px 0 8px; filter: drop-shadow(0 0 16px rgb(var(--mag-rgb) / .6)); } .phone-card { --c: var(--cut-s); padding: 12px 14px; background: rgb(var(--flaeche-rgb) / .9); box-shadow: inset 0 0 0 1px var(--linie); font-size: 13px; line-height: 1.35; } .phone-card__label { display: block; margin-bottom: 4px; font: 700 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); } .phone-card__title { font: 400 22px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; } .install-toast { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--papier); color: var(--text-ink); box-shadow: 8px 8px 0 var(--mag); } .install-toast img { width: 44px; height: 44px; padding: 6px; border-radius: 10px; background: var(--grund); object-fit: contain; } .install-toast b { display: block; font: 700 14px/1.2 var(--f-ui); } .install-toast span { font-size: 13px; color: var(--text-papier-2); } /* Steckbrief: Papierkarte. Stempel sitzt auf dem Foto, nie auf dem Namen */ .dossier { position: relative; padding: 18px 20px 20px; background: var(--papier); color: var(--text-ink); box-shadow: 12px 12px 0 var(--mag); } .dossier__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 3px solid var(--text-ink); font: 400 30px/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; } .dossier__id { padding: 6px 8px; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; color: var(--papier); background: var(--text-ink); white-space: nowrap; } .dossier__main { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; margin-top: 14px; } .dossier__photo { position: relative; align-self: start; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(180deg, #2b0a45, #b02ce0); } .dossier__photo .stamp { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) rotate(-10deg); font-size: 18px; border-width: 2px; color: #fff; background: rgb(192 28 143 / .85); opacity: 1; } .dossier__facts { display: grid; gap: 8px; margin: 0; } .dossier__facts dt { font: 700 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-papier-2); } .dossier__facts dd { margin: 3px 0 0; font: 600 15.5px/1.25 var(--f-body); overflow-wrap: anywhere; } @media (min-width: 640px) { .dossier__main { grid-template-columns: 116px minmax(0, 1fr); gap: 18px; } } /* Chatblasen (Handy-Nachrichten) */ .msgs { display: grid; gap: 10px; align-content: start; } .msg { max-width: 88%; padding: 12px 16px; border-radius: 18px; font-size: 14.5px; line-height: 1.4; box-shadow: 6px 6px 0 rgb(var(--grund-rgb) / .6); } .msg__from { display: block; margin-bottom: 4px; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .msg__time { display: block; margin-top: 4px; font: 500 12px/1 var(--f-ui); opacity: .7; text-align: right; } .msg--in { justify-self: start; background: #2a1d3a; color: var(--text); border-bottom-left-radius: 4px; } .msg--out { justify-self: end; background: var(--grad-btn); color: #fff; border-bottom-right-radius: 4px; } /* Kennzeichen San Andreas */ .plate { display: inline-block; padding: 5px 9px 4px; border-radius: 3px; font: 700 13px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--kennzeichen); background: #f3eff7; box-shadow: inset 0 0 0 1.5px var(--kennzeichen); white-space: nowrap; } /* Karte: eingeklebter Ausdruck mit Klebestreifen und Blips */ .map { position: relative; width: 100%; max-width: 520px; margin-inline: auto; padding: 12px; background: var(--papier); transform: rotate(-2deg); box-shadow: 16px 16px 0 rgb(var(--vio-rgb) / .45), var(--schatten-2); } .map::before, .map::after { content: ""; position: absolute; z-index: 3; width: 90px; height: 28px; background: rgb(var(--rosa-rgb) / .55); } .map::before { left: -22px; top: 22px; transform: rotate(-38deg); } .map::after { right: -22px; bottom: 30px; transform: rotate(-38deg); } .map__img { position: relative; aspect-ratio: 1086 / 1514; overflow: hidden; background: var(--grad-platzhalter); } .map__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 40px 40px; } .map__stamp { position: absolute; right: 22px; top: 26px; z-index: 4; } .map__pin { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; font: 400 20px/1 var(--f-display); color: #fff; background: var(--grund); box-shadow: 0 0 0 3px var(--mag), 0 0 0 0 rgb(var(--mag-rgb) / .7); cursor: pointer; transition: transform .3s var(--ease-punch), background var(--t), color var(--t); animation: pin-puls 2.4s infinite; } .map__pin span { margin-top: 2px; } .map__pin.is-on, .map__pin:hover, .map__pin:focus-visible { background: var(--mag); color: var(--text-ink); transform: scale(1.3); } .map__pin:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .map__legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; list-style: none; padding: 0; font: 500 13px/1.3 var(--f-ui); color: var(--text-2); } .map__legend li { display: inline-flex; align-items: center; gap: 8px; } .map__legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--grund); box-shadow: 0 0 0 2px var(--mag); } .map__coords { margin-top: 10px; font: 500 12px/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); font-variant-numeric: tabular-nums; } /* Ortsliste zur Karte (Hover leuchtet den Pin mit auf, data-pin) */ .places { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; } .places__item { --c: 12px; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; background: var(--flaeche); transition: background var(--t), transform .3s var(--ease); } .places__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-logo); transform: scaleY(0); transition: transform .3s var(--ease); } .places__item:hover, .places__item.is-on { background: var(--flaeche-3); transform: translateX(8px); } .places__item:hover::before, .places__item.is-on::before { transform: scaleY(1); } .places__no { display: grid; place-items: center; width: 52px; height: 52px; padding-top: 3px; font: 400 32px/1 var(--f-display); color: var(--mag); background: var(--grund); box-shadow: inset 0 0 0 2px var(--mag); } .places__region { font: 700 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); } .places__name { margin: 6px 0 4px; font: 400 28px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; } .places__text { font-size: 14.5px; line-height: 1.55; color: var(--text-2); } /* Radar: Live-Anzeige als Minimap. Blips NUR aus der Spielerzahl, zufällig verteilt, keine Polizei */ .radar { position: relative; width: min(100%, 320px); aspect-ratio: 1; margin-inline: auto; } .radar__gauge { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .radar__gauge circle { fill: none; stroke-width: 5; } .radar__track { stroke: rgba(255, 255, 255, .08); } .radar__val { stroke: var(--mag); stroke-linecap: round; stroke-dasharray: calc(var(--p, 0) * 100) 100; filter: drop-shadow(0 0 6px rgb(var(--mag-rgb) / .8)); transition: stroke-dasharray 1s var(--ease); } .radar__disc { position: absolute; inset: 22px; overflow: hidden; border-radius: 50%; background: #0c0714; box-shadow: 0 0 0 1px rgb(var(--rosa-rgb) / .35), 0 0 0 7px rgb(var(--grund-rgb) / .9), 0 0 50px rgb(var(--vio-rgb) / .45); } .radar__map { position: absolute; width: 260%; max-width: none; left: -70%; top: -100%; opacity: .85; } .radar__vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 38%, rgb(var(--grund-rgb) / .8) 100%); } .radar__rings { position: absolute; inset: 0; width: 100%; height: 100%; } .radar__rings circle, .radar__rings path { fill: none; stroke: rgb(var(--rosa-rgb) / .22); stroke-width: .6; } .radar__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 290deg, rgb(var(--mag-rgb) / .08) 300deg, rgb(var(--mag-rgb) / .42) 359deg, rgb(var(--rosa-rgb) / .9) 360deg); animation: dreh 4.2s linear infinite; } .radar__blip { position: absolute; left: var(--x); top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--rosa); box-shadow: 0 0 0 2px rgb(var(--grund-rgb) / .8), 0 0 10px var(--mag); animation: blip 4.2s linear infinite; animation-delay: var(--d, 0s); } .radar__me { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -60%); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 18px solid #fff; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .9)); } .radar__count { position: absolute; right: -6px; bottom: 6px; padding: 10px 12px 9px; text-align: right; background: rgb(var(--grund-rgb) / .9); box-shadow: inset 0 0 0 1px var(--linie-mag); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); } .radar__count b { display: block; font: 400 48px/.9 var(--f-display); color: #fff; font-variant-numeric: tabular-nums; } .radar__count span { display: block; margin-top: 4px; font: 700 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .radar--leer .radar__sweep { animation-duration: 9s; opacity: .5; } /* --------------------------------------------------------------------- 15 NEWS-KARTE, VELMORA POST, VIP-KARTE, ROUTE, GALERIE, POSTKARTE --------------------------------------------------------------------- */ /* News-Karte: schnell überfliegbar, 16:9-Bild, Tag, Datum, Titel, Auszug */ .news-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--flaeche); } .news-card__media { --c: var(--cut-m); display: block; } .news-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; } .news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); } .news-card__title { font: 400 clamp(26px, 2.2vw, 32px)/1 var(--f-display); letter-spacing: .015em; text-transform: uppercase; } .news-card__title a { text-decoration: none; background: linear-gradient(var(--mag), var(--mag)) 0 100% / 0 3px no-repeat; transition: background-size .35s var(--ease); } .news-card__title a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */ .news-card:hover .news-card__title a { background-size: 100% 3px; } .news-card__title a:focus-visible { outline: none; } .news-card:focus-within { outline: 3px solid var(--rosa); outline-offset: 3px; } .news-card__excerpt { font-size: 14.5px; line-height: 1.55; color: var(--text-2); } .news-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 13px/1.3 var(--f-ui); color: var(--text-3); } .news-card--pinned { box-shadow: inset 0 3px 0 var(--mag); } /* Velmora Post: Aufmacher als Zeitungsseite (Startseite, Neuigkeiten Seite 1) */ .post { position: relative; padding: 18px 20px 22px; background: var(--papier); color: var(--text-ink); box-shadow: 12px 12px 0 rgb(var(--vio-rgb) / .5); } .post::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgb(60 30 80 / .07) 1px, transparent 1.4px); background-size: 4px 4px; } .post__masthead { padding-bottom: 8px; border-bottom: 4px double var(--text-ink); font: 400 clamp(34px, 4vw, 52px)/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; text-align: center; } .post__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--linie-papier); font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-papier-2); } .post__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-platzhalter); } .post__title { margin: 14px 0 8px; font: 400 clamp(32px, 3.4vw, 48px)/.95 var(--f-display); letter-spacing: .01em; text-transform: uppercase; } .post__title a { text-decoration: none; } .post__title a::after { content: ""; position: absolute; inset: 0; } .post__text { font-size: 15px; line-height: 1.6; color: var(--text-papier); } .post:focus-within { outline: 3px solid var(--rosa); outline-offset: 4px; } @media (min-width: 960px) { .post { transform: rotate(-1deg); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } .post:hover { transform: rotate(0) translateY(-6px); box-shadow: 18px 20px 0 rgb(var(--mag-rgb) / .55); } } /* Kompakte News-Zeile: mobil und in Listen */ .news-rows { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; } .news-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; background: var(--flaeche); transition: background var(--t); } .news-row:hover { background: var(--flaeche-2); } .news-row__date { display: grid; place-items: center; height: 64px; background: var(--grund); box-shadow: inset 0 0 0 1px var(--linie-mag); text-align: center; } .news-row__date b { display: block; font: 400 30px/.9 var(--f-display); color: #fff; } .news-row__date span { display: block; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); } .news-row__title { display: block; margin-top: 6px; font: 600 15.5px/1.35 var(--f-body); } .news-row__title a { text-decoration: none; } .news-row__title a::after { content: ""; position: absolute; inset: 0; } .news-row:focus-within { outline: 3px solid var(--rosa); outline-offset: -3px; } /* VIP-Karte: Mitgliedskarte mit Chip, darunter Preis und Leistungen */ .vip { --tier: var(--bronze); --tier-2: #f3b27a; --tier-3: #6b3a17; position: relative; display: flex; flex-direction: column; gap: 20px; } .vip--silber { --tier: var(--silber); --tier-2: #ffffff; --tier-3: #5d6875; } .vip--gold { --tier: var(--gold); --tier-2: #fff1c2; --tier-3: #7a5410; } .vip__badge { position: absolute; top: -12px; left: 50%; z-index: 3; transform: translateX(-50%); padding: 7px 10px 6px; white-space: nowrap; font: 700 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--grad-btn); box-shadow: var(--leuchten-mag); } .vip__card { --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%; position: relative; overflow: hidden; aspect-ratio: 1.586; padding: 18px 20px; border-radius: 16px; color: #1a0f14; background: radial-gradient(circle at 20% 0, var(--tier-2), transparent 55%), linear-gradient(135deg, var(--tier) 0%, var(--tier-2) 38%, var(--tier) 60%, var(--tier-3) 100%); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 40px color-mix(in srgb, var(--tier) 30%, transparent); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease); } .vip__card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 7px); mix-blend-mode: overlay; } .vip__shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .7; background: radial-gradient(circle at var(--px) var(--py), rgba(255, 255, 255, .55), transparent 38%), linear-gradient(115deg, transparent 30%, rgb(var(--mag-rgb) / .25) 45%, rgba(120, 220, 255, .2) 52%, rgb(var(--gold-rgb) / .25) 60%, transparent 72%); } .vip__top { position: relative; display: flex; justify-content: space-between; align-items: center; } .vip__logo { height: 26px; width: auto; filter: brightness(0) opacity(.72); } .vip__club { font: 700 12px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; opacity: .72; } .vip__chip { position: relative; width: 46px; height: 34px; margin-top: 14px; border-radius: 6px; background: linear-gradient(135deg, #f6e3a6, #b8913a 60%, #f0d68c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } .vip__chip::before { content: ""; position: absolute; inset: 6px 10px; border: 1px solid rgba(0, 0, 0, .3); border-radius: 3px; } .vip__tier { position: absolute; left: 20px; bottom: 38px; font: 400 clamp(34px, 3vw, 44px)/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: rgb(20 10 16 / .88); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); } .vip__no { position: absolute; left: 20px; bottom: 16px; font: 700 12px/1 var(--f-ui); letter-spacing: .24em; opacity: .66; font-variant-numeric: tabular-nums; } .vip__price { display: flex; align-items: baseline; gap: 8px; } .vip__price b { font: 400 56px/.9 var(--f-display); color: #fff; letter-spacing: .01em; } .vip__price span { font: 700 12px/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); } .vip__claim { font-size: 14.5px; line-height: 1.5; color: var(--text-2); } .vip__perks { display: grid; gap: 8px; list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--linie-2); } .vip__perks li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: var(--text); } .vip__perks li::before { content: ""; position: absolute; left: 1px; top: .3em; width: 12px; height: 7px; border-left: 3px solid var(--tier); border-bottom: 3px solid var(--tier); transform: rotate(-45deg); } .vip__btn { background: var(--tier); color: var(--text-ink); } .vip__btn:hover { filter: brightness(1.1); transform: translateY(-2px); } .vip__btn:focus-visible { outline-color: var(--text-ink); } .vip--hot .vip__card { box-shadow: 0 24px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 0 3px var(--mag), 0 0 40px rgb(var(--mag-rgb) / .45); } /* Route: Einstieg als GPS-Route mit nummerierten Blips und Stern am Ziel */ .route { position: relative; } .route__line { display: none; } .route__steps { position: relative; display: grid; gap: 28px; list-style: none; margin: 0; padding: 0; } .route__steps::before { /* mobil: senkrechte Navi-Linie */ content: ""; position: absolute; left: 22px; top: 10px; bottom: 30px; width: 5px; background: repeating-linear-gradient(180deg, var(--mag) 0 4px, transparent 4px 14px); filter: drop-shadow(0 0 5px rgb(var(--mag-rgb) / .7)); } .route__step { position: relative; padding-left: 70px; min-width: 0; } .route__step .blip { position: absolute; left: 0; top: 0; } .route__title { margin: 8px 0 8px; font: 400 30px/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; } .route__text { font-size: 14.5px; line-height: 1.6; color: var(--text-2); } .route__step .link, .route__step .copy { margin-top: 12px; } .blip { display: grid; place-items: center; width: 48px; height: 48px; flex: none; padding-top: 3px; border-radius: 50%; font: 400 30px/1 var(--f-display); color: #fff; background: var(--grund); box-shadow: 0 0 0 4px var(--mag), 0 0 0 10px rgb(var(--mag-rgb) / .18); } .blip--ziel { padding-top: 0; color: var(--text-ink); background: var(--gold); box-shadow: 0 0 0 4px #fff, 0 0 26px rgb(var(--gold-rgb) / .7); } .blip--ziel .icon { width: 24px; height: 24px; } @media (min-width: 960px) { .route__line { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 200px; overflow: visible; } .route__line path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; } .route__glow { stroke: rgb(var(--vio-rgb) / .25); stroke-width: 14; } .route__path { stroke: var(--mag); stroke-width: 5; stroke-dasharray: 2 14; animation: gps 1.2s linear infinite; } .route__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .route__steps::before { display: none; } .route__step { display: flex; flex-direction: column; align-items: center; padding: 26px 6px 0; text-align: center; } .route__step:nth-child(odd) { padding-top: 126px; } .route__step .blip { position: static; } .route__title { margin-top: 20px; } .route__text { max-width: 22em; } } /* Kurze nummerierte Schritte (App installieren usw.) */ .steps { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; counter-reset: schritt; } .steps li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; color: var(--text-2); counter-increment: schritt; } .steps li::before { content: counter(schritt); display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding-top: 2px; font: 400 22px/1 var(--f-display); color: var(--rosa); background: var(--grund); box-shadow: inset 0 0 0 2px var(--vio); } /* Galerie: Raster aus 16:9-Aufnahmen mit Bildunterschrift */ .gallery { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); list-style: none; margin: 0; padding: 0; } .gallery__item { --c: var(--cut-s); position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-platzhalter); } .gallery__item > img { transition: transform .6s var(--ease); } .gallery__item:hover img { transform: scale(1.04); } .gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; font: 500 13px/1.35 var(--f-ui); color: #fff; background: linear-gradient(0deg, rgb(var(--grund-rgb) / .9), transparent); } .gallery__cap b { font-weight: 700; color: var(--rosa); } .gallery__item--gross { grid-column: span 2; grid-row: span 2; } @media (max-width: 639px) { .gallery__item--gross { grid-column: auto; grid-row: auto; } } /* Filmstreifen: waagerecht wischbar, Perforation oben und unten */ .filmstrip-wrap { position: relative; padding: 26px 0; background: #0d0812; box-shadow: 14px 14px 0 rgb(var(--vio-rgb) / .4); } .filmstrip-wrap::before, .filmstrip-wrap::after { /* Perforation */ content: ""; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 10px, #3a2a47 10px 22px); } .filmstrip-wrap::before { top: 7px; } .filmstrip-wrap::after { bottom: 7px; } .filmstrip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px; list-style: none; margin: 0; scrollbar-width: thin; scrollbar-color: var(--vio) transparent; } .filmstrip > * { flex: 0 0 min(78%, 420px); scroll-snap-align: center; } .filmstrip__frame { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-platzhalter); } .filmstrip__frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 12px 8px; font: 500 13px/1.35 var(--f-ui); color: #fff; background: linear-gradient(0deg, rgb(var(--grund-rgb) / .9), transparent); } /* Postkarte: Bild des Tages mit perforierter Briefmarke */ .postcard { position: relative; padding: 12px 12px 18px; background: var(--papier); color: var(--text-ink); transform: rotate(2deg); box-shadow: 14px 14px 0 rgb(var(--vio-rgb) / .45), var(--schatten-2); } .postcard__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grad-platzhalter); } .postcard__gruss { margin: 12px 4px 0; font: 400 clamp(24px, 2.6vw, 32px)/1.05 var(--f-script); color: #8e1467; } .postcard__meta { margin: 4px 4px 0; font: 700 12px/1.3 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--text-papier-2); } .postcard__marke { /* Zackenrand: Kreise auf den Kanten, Mitte deckt das Motiv */ position: absolute; right: 22px; top: 22px; width: 80px; height: 96px; padding: 7px; display: grid; text-align: center; background: radial-gradient(circle, transparent 3px, var(--papier) 3.5px) -5px -5px / 10px 10px; transform: rotate(6deg); filter: drop-shadow(2px 3px 0 rgb(var(--grund-rgb) / .35)); } .postcard__marke span { display: grid; place-items: center; padding: 6px; background: var(--grad-btn); font: 400 16px/1 var(--f-display); letter-spacing: .08em; color: #fff; } .postcard__marke img { width: 100%; height: auto; } /* --------------------------------------------------------------------- 16 TABS, FORMULARE, SUCHE, TABELLEN, HINWEISE, FAQ, SEITENNAVIGATION --------------------------------------------------------------------- */ /* Tabs: ARIA-Tabs. Q und E (und Pfeiltasten) wirken NUR, solange der Fokus in der Reiterleiste steht. Ohne JS sind alle Paneele offen untereinander. */ .tabs__bar { display: flex; align-items: center; gap: 8px; max-width: 100%; } .tabs__bar > .key { display: none; } .tabs__list { --c: var(--cut-xs); display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; padding: 3px; background: rgb(var(--grund-rgb) / .6); box-shadow: inset 0 0 0 1px var(--linie); } .tabs__list::-webkit-scrollbar { display: none; } .tabs__tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 10px 14px 9px; border: 0; font: 700 12.5px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--text-2); background: rgba(255, 255, 255, .035); transition: background var(--t), color var(--t); } .tabs__tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--mag); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); } .tabs__tab:hover { background: rgba(255, 255, 255, .09); color: #fff; } .tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { background: var(--papier); color: var(--text-ink); } .tabs__tab[aria-selected="true"]::before, .tabs__tab[aria-current="page"]::before { transform: scaleX(1); } .tabs__tab:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; } .tabs__tab .count { margin-left: 2px; padding: 3px 6px; border-radius: var(--r-pill); font-size: 12px; background: var(--mag); color: var(--text-ink); letter-spacing: 0; } .tabs__panel { padding-top: 24px; } .tabs__panel:focus-visible { outline-offset: 6px; } .no-js .tabs__panel + .tabs__panel { border-top: 1px solid var(--linie); margin-top: 24px; } @media (hover: hover) and (pointer: fine) and (min-width: 960px) { .js .tabs--keys .tabs__bar > .key { display: inline-grid; } } /* Formulare */ .form { display: grid; gap: 20px; } .field { display: grid; gap: 8px; min-width: 0; } .field__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 700 12px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); } .field__label .opt { font-weight: 500; letter-spacing: .06em; text-transform: none; color: var(--text-3); } .field__hint { font-size: 13px; line-height: 1.45; color: var(--text-3); } .field__error { display: flex; gap: 8px; align-items: flex-start; font: 500 13px/1.4 var(--f-ui); color: var(--gefahr); } .field__count { font: 500 12px/1 var(--f-ui); letter-spacing: .04em; color: var(--text-3); font-variant-numeric: tabular-nums; text-transform: none; } .field__count.is-over { color: var(--gefahr); } .input, .select, .textarea { --c: var(--cut-xs); width: 100%; min-height: 48px; padding: 12px 14px; border: 0; border-radius: 0; font: 400 15.5px/1.4 var(--f-body); color: var(--text); background: #0b0710; box-shadow: inset 0 0 0 1px var(--linie-2); transition: box-shadow var(--t), background var(--t); -webkit-appearance: none; appearance: none; } .input::placeholder, .textarea::placeholder { color: rgb(var(--text-3-rgb) / .8); } .input:hover, .select:hover, .textarea:hover { box-shadow: inset 0 0 0 1px var(--linie-3); } .input:focus, .select:focus, .textarea:focus { outline: none; background: #100a17; box-shadow: inset 0 0 0 2px var(--mag), inset 0 0 18px rgb(var(--mag-rgb) / .12); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--gefahr); } .input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; } .textarea { min-height: 140px; resize: vertical; line-height: 1.6; } .select { padding-right: 44px; cursor: pointer; background: #0b0710 url("data:image/svg+xml;utf8,") right 16px center / 14px no-repeat; } .select option { background: var(--flaeche); color: var(--text); } /* Kontrollkästchen und Radio: native Elemente in Markenfarbe */ .check { display: flex; align-items: flex-start; gap: 12px; min-height: 32px; font-size: 15px; line-height: 1.45; color: var(--text-2); cursor: pointer; } .check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--mag); cursor: pointer; } /* Schalter */ .switch { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; font-size: 15px; color: var(--text-2); } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch__track { position: relative; flex: none; width: 46px; height: 26px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--linie-2); transition: background var(--t); } .switch__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: transform var(--t) var(--ease), background var(--t); } .switch input:checked + .switch__track { background: var(--grad-btn); } .switch input:checked + .switch__track::after { transform: translateX(20px); background: #fff; } .switch input:focus-visible + .switch__track { outline: 3px solid var(--rosa); outline-offset: 3px; } /* Segmentumschalter (24 Std., 7 Tage, 30 Tage) */ .segmented { display: inline-flex; gap: 3px; padding: 3px; background: rgb(var(--grund-rgb) / .6); box-shadow: inset 0 0 0 1px var(--linie); } .segmented button, .segmented a { min-height: 36px; padding: 8px 12px; border: 0; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--text-2); background: none; } .segmented [aria-pressed="true"], .segmented [aria-current="true"] { background: var(--mag); color: var(--text-ink); } .segmented :focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; } /* Suche mit Symbol und Tastenhinweis */ .search { --c: var(--cut-xs); position: relative; display: flex; align-items: center; min-height: 48px; background: #0b0710; box-shadow: inset 0 0 0 1px var(--linie-2); } .search:focus-within { box-shadow: inset 0 0 0 2px var(--mag); } .search .icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-3); pointer-events: none; } .search input { flex: 1; min-width: 0; height: 48px; padding: 0 12px 0 44px; border: 0; background: none; font: 400 15.5px/1 var(--f-body); color: var(--text); } .search input:focus { outline: none; } .search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); } .search .key { margin-right: 10px; } .search__count { margin-right: 12px; font: 500 12px/1 var(--f-ui); color: var(--text-3); white-space: nowrap; } mark, .hit { padding: 0 2px; background: rgb(var(--mag-rgb) / .35); color: #fff; box-shadow: 0 2px 0 var(--mag); } /* Tabellen. Mobil: .table--stack stapelt Zeilen, td trägt data-label */ .table-wrap { max-width: 100%; overflow-x: auto; box-shadow: inset 0 0 0 1px var(--linie); } .table { width: 100%; font-size: 14.5px; line-height: 1.45; } .table th { padding: 12px 14px; text-align: left; font: 700 12px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); background: rgb(var(--grund-rgb) / .6); border-bottom: 1px solid var(--linie-2); white-space: nowrap; } .table td { padding: 12px 14px; color: var(--text-2); border-bottom: 1px solid var(--linie); vertical-align: top; } .table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); } .table tbody tr:hover td { background: rgb(var(--mag-rgb) / .06); } .table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table strong { color: var(--text); font-weight: 600; } @media (max-width: 639px) { .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .table--stack tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--linie-2); } .table--stack td { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 12px; padding: 6px 14px; border: 0; background: none !important; } .table--stack td::before { content: attr(data-label); font: 700 12px/1.4 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); } .table--stack .num { text-align: left; } } /* Hinweis-Kästen */ .note { --c: var(--cut-s); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.55; color: var(--text-2); background: rgb(var(--vio-rgb) / .12); box-shadow: inset 4px 0 0 var(--vio); } .note__icon { width: 22px; height: 22px; margin-top: 1px; color: var(--rosa); } .note__title { display: block; margin-bottom: 4px; font: 700 15px/1.3 var(--f-ui); color: #fff; } .note a { color: #fff; text-underline-offset: 3px; } .note--ok { background: rgb(var(--ok-rgb) / .09); box-shadow: inset 4px 0 0 var(--ok); } .note--ok .note__icon { color: var(--ok); } .note--achtung { background: rgb(var(--achtung-rgb) / .09); box-shadow: inset 4px 0 0 var(--achtung); } .note--achtung .note__icon { color: var(--achtung); } .note--gefahr { background: rgb(var(--gefahr-rgb) / .1); box-shadow: inset 4px 0 0 var(--gefahr); } .note--gefahr .note__icon { color: var(--gefahr); } /* Regel-Hinweis: hervorgehobene Magenta-Kachel ("Lies sie, bevor du einreist") */ .note--regel { background: var(--mag); color: var(--text-ink); box-shadow: none; } .note--regel .note__icon, .note--regel .note__title, .note--regel a { color: var(--text-ink); } .note--discord { background: rgb(var(--discord-rgb) / .14); box-shadow: inset 4px 0 0 var(--discord); } .note--discord .note__icon { color: #aab3ff; } /* FAQ als details/summary: ohne JS voll bedienbar */ .faq { display: grid; gap: 8px; } .faq details { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); } .faq summary { position: relative; display: block; padding: 18px 56px 18px 20px; cursor: pointer; list-style: none; font: 600 16px/1.4 var(--f-body); color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--rosa); border-bottom: 2px solid var(--rosa); transform: rotate(45deg); transition: transform var(--t) var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .faq summary:focus-visible { outline-offset: -3px; } .faq__a { padding: 0 20px 20px; color: var(--text-2); } /* Inhaltsverzeichnis (Regelwerk, Rechtliches). JS setzt .is-active beim Lesen */ .toc { font-size: 14px; } .toc__title { margin-bottom: 10px; } .toc__list { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0; counter-reset: none; } .toc__link { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px 10px; text-decoration: none; color: var(--text-2); box-shadow: inset 2px 0 0 var(--linie); transition: color var(--t), background var(--t), box-shadow var(--t); } .toc__link b { font: 700 12px/1 var(--f-ui); color: var(--text-3); font-variant-numeric: tabular-nums; } .toc__link:hover { color: #fff; background: rgba(255, 255, 255, .04); } .toc__link.is-active, .toc__link[aria-current="true"] { color: #fff; background: rgb(var(--mag-rgb) / .1); box-shadow: inset 3px 0 0 var(--mag); } .toc__link.is-active b { color: var(--rosa); } @media (min-width: 960px) { .toc--sticky { position: sticky; top: calc(var(--hdr-h) + 24px); max-height: calc(100vh - var(--hdr-h) - 48px); overflow-y: auto; scrollbar-width: thin; } } /* Seitenweise blättern */ .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; } .pager a, .pager span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; font: 700 14px/1 var(--f-ui); text-decoration: none; color: var(--text-2); background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); } .pager a:hover { color: #fff; background: var(--flaeche-2); } .pager [aria-current="page"] { background: var(--mag); color: var(--text-ink); box-shadow: none; } /* --------------------------------------------------------------------- 17 LEERZUSTÄNDE, LADEZUSTÄNDE, BILDPLATZHALTER Öffentlich steht NIE "Bildslot" oder "Screenshot folgt" auf der Seite. --------------------------------------------------------------------- */ .empty { --c: var(--cut); position: relative; display: grid; justify-items: center; gap: 10px; padding: clamp(32px, 5vw, 56px) 24px; text-align: center; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); overflow: hidden; } .empty__art { width: 96px; height: auto; opacity: .22; filter: grayscale(.2); margin-bottom: 6px; } .empty__title { font: 400 32px/1 var(--f-display); letter-spacing: .04em; text-transform: uppercase; color: #fff; } .empty__text { max-width: 30em; font-size: 15px; line-height: 1.55; color: var(--text-2); } .empty .btn-row { justify-content: center; margin-top: 8px; } /* Skeleton: Platz halten, bis Daten da sind */ .skel { position: relative; overflow: hidden; background: rgba(255, 255, 255, .06); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); animation: schimmer 1.4s var(--ease-inout) infinite; } .skel--text { height: .9em; margin: .35em 0; border-radius: 2px; } .skel--text.is-kurz { width: 55%; } .skel--titel { height: 1.6em; width: 70%; } .skel--zahl { height: 64px; width: 96px; } .skel--bild { aspect-ratio: 16 / 9; } .skel--rund { border-radius: 50%; } /* Kreisel wie im Ladebildschirm */ .spinner { width: 28px; height: 28px; flex: none; animation: dreh 1s linear infinite; } .spinner circle { fill: none; stroke: var(--mag); stroke-width: 4; stroke-dasharray: 70 40; stroke-linecap: round; } .spinner--s { width: 18px; height: 18px; } /* Ladebalken schräg gestreift */ .loadbar { height: 9px; overflow: hidden; background: rgb(var(--mag-rgb) / .15); } .loadbar i { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--v, 1)); background: var(--streifen-leer); filter: drop-shadow(0 0 5px rgb(var(--mag-rgb) / .65)); } .loadbar--laeuft i { animation: laden 7s var(--ease) infinite; } /* Bildrahmen mit festem Seitenverhältnis. Fehlt das Bild, setzt site.js .is-missing: Duoton-Fläche, Halbton, VC-Monogramm als Wasserzeichen, kein Text */ .media { position: relative; display: block; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; background: var(--grad-platzhalter); } /* Bilder in Rahmen mit Seitenverhältnis liegen absolut, sonst drückt die Eigenhöhe den Rahmen auf */ .media > img, .media > picture > img, .gallery__item > img, .filmstrip__frame > img, .post__media > img, .postcard__img > img, .map__img > img, .dossier__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--t); } .media.is-missing > img, .media.is-missing > picture { visibility: hidden; } .media.is-missing::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgb(var(--rosa-rgb) / .35) 1.15px, transparent 1.75px); background-size: 8px 8px; -webkit-mask-image: linear-gradient(135deg, transparent 40%, #000); mask-image: linear-gradient(135deg, transparent 40%, #000); } .media.is-missing::after { opacity: .2; background: url("/img/logo-flach-256.webp?v=mumzajjy") center / 38% auto no-repeat; } .media--1-1 { --ratio: 1 / 1; } .media--4-3 { --ratio: 4 / 3; } .media--3-4 { --ratio: 3 / 4; } /* --------------------------------------------------------------------- 18 LADEBILDSCHIRM (Finale, 404, Offline), SEITENKOPF, FLIESSTEXT --------------------------------------------------------------------- */ .loadscreen { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(560px, 80vh, 780px); overflow: hidden; padding: 96px 0 168px; } .loadscreen__art { position: absolute; inset: 0; } .loadscreen__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(var(--grund-rgb) / .88) 0%, rgb(var(--grund-rgb) / .55) 45%, rgb(var(--grund-rgb) / .1) 75%, transparent), linear-gradient(0deg, rgb(var(--grund-rgb) / .96), transparent 34%), linear-gradient(180deg, rgb(var(--grund-rgb) / .7), transparent 22%); } .loadscreen__body { position: relative; z-index: var(--z-inhalt); } .loadscreen__title { margin: 18px 0 16px; font: 400 clamp(56px, 8vw, 132px)/.9 var(--f-display); text-transform: uppercase; color: #fff; text-shadow: var(--versatz-text); } .loadscreen__title > span { display: block; } .loadscreen__title em { display: block; width: fit-content; max-width: 100%; padding-top: .22em; margin-top: -.22em; font-style: normal; background: var(--grad-logo); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(.055em .055em 0 var(--tief)); } .loadscreen__live { font-size: var(--fs-lead); color: var(--text-2); } .loadscreen__live b { font: 400 34px/1 var(--f-display); color: var(--ok); } .loadscreen__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-inhalt); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); margin-inline: auto; padding: 0 var(--gutter) 30px; } .loadscreen__tip { display: flex; align-items: baseline; gap: 12px; max-width: 46em; font-size: 15px; line-height: 1.5; color: var(--text-2); } .loadscreen__tip b { flex: none; padding: 4px 8px 2px; font: 400 20px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-ink); background: var(--rosa); } .loadscreen__tip span { transition: opacity .4s; } .loadscreen__tip span.is-out { opacity: 0; } .loadscreen__loading { display: flex; align-items: center; gap: 12px; font: 700 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .loadscreen__foot .loadbar { grid-column: 1 / -1; } @media (max-width: 639px) { .loadscreen__foot { grid-template-columns: minmax(0, 1fr); } .loadscreen__loading { display: none; } } /* Seitenkopf für alle Unterseiten: Kapitelmarke, H1, Lead, rechts optional Bild oder Live-Tafel */ .page-hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); isolation: isolate; } .page-hero::before { /* Lichtinseln */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 40% 60% at 12% 0%, rgb(var(--vio-rgb) / .3), transparent 70%), radial-gradient(ellipse 40% 50% at 92% 100%, rgb(var(--mag-rgb) / .16), transparent 70%); } .page-hero::after { /* schräge Tafelkante unten */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: -1; background: var(--grund); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .page-hero__grid { display: grid; gap: 32px; } .page-hero__title { margin-top: 16px; font: 400 var(--fs-h1)/.9 var(--f-display); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: var(--versatz-text); } .page-hero__title > span { display: block; } .page-hero__title em { display: block; width: fit-content; max-width: 100%; padding-top: .22em; margin-top: -.22em; text-shadow: none; } .page-hero__lead { margin-top: 20px; max-width: 36em; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-2); } .page-hero .btn-row { margin-top: 28px; } .page-hero .chips { margin-top: 22px; } @media (min-width: 960px) { .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(40px, 5vw, 80px); } } /* Fließtext aus markdown.js (News, Regeln, Rechtliches). Listenmarke ist eine Raute als Grafik */ .prose { font-size: 16.5px; line-height: 1.7; color: var(--text-2); } .prose > * + * { margin-top: 1em; } .prose h2, .prose .md-h { margin-top: 1.8em; font: 400 clamp(30px, 3vw, 40px)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; } .prose h3 { margin-top: 1.5em; font: 700 18px/1.35 var(--f-ui); color: #fff; } .prose strong, .prose b { color: var(--text); font-weight: 600; } .prose a { color: var(--rosa); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose a:hover { color: #fff; } .prose ul, .prose ol, .prose .md-list { padding: 0; list-style: none; display: grid; gap: .45em; } .prose ul > li, .prose .md-li { position: relative; padding-left: 26px; } .prose ul > li::before, .prose .md-li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--mag); } .prose ol { counter-reset: nr; } .prose ol > li { position: relative; padding-left: 34px; counter-increment: nr; } .prose ol > li::before { content: counter(nr); position: absolute; left: 0; top: .1em; min-width: 24px; font: 700 13px/1.6 var(--f-ui); color: var(--rosa); text-align: right; } /* Changelog-Marken aus Discord: Wort statt Symbol */ .prose .md-li.is-new, .prose .md-li.is-fix, .prose .md-li.is-removed { padding-left: 92px; } .prose .md-li.is-new::before, .prose .md-li.is-fix::before, .prose .md-li.is-removed::before { left: 0; top: .2em; width: 80px; height: auto; transform: none; padding: 4px 0 3px; text-align: center; font: 700 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; } .prose .md-li.is-new::before { content: "Neu"; background: rgb(var(--ok-rgb) / .15); color: var(--ok); } .prose .md-li.is-fix::before { content: "Behoben"; background: rgb(var(--info-rgb) / .15); color: var(--info); } .prose .md-li.is-removed::before { content: "Entfernt"; background: rgb(var(--gefahr-rgb) / .15); color: var(--gefahr); } .prose blockquote, .prose .md-quote { padding: 14px 18px; background: rgb(var(--vio-rgb) / .12); box-shadow: inset 4px 0 0 var(--vio); color: var(--text); } .prose code, .prose .md-code { padding: 2px 6px; font-size: .92em; background: rgba(255, 255, 255, .08); color: var(--rosa); } .prose .md-spoiler { background: var(--text-3); color: transparent; cursor: pointer; transition: color var(--t), background var(--t); } .prose .md-spoiler:hover, .prose .md-spoiler:focus, .prose .md-spoiler.is-open { background: rgba(255, 255, 255, .1); color: var(--text); } .prose .md-sub { font-size: 13px; color: var(--text-3); } .prose img { margin-block: 1.4em; } .prose hr { height: 5px; border: 0; margin: 2em 0; background: repeating-linear-gradient(120deg, rgb(var(--mag-rgb) / .5) 0 6px, transparent 6px 10px); } /* Regel-Eintrag (Regelwerk, auch für Suche und Anker) */ .rule { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0 20px; border-bottom: 1px solid var(--linie); scroll-margin-top: calc(var(--hdr-h) + 24px); } .rule__nr { font: 400 26px/1 var(--f-display); letter-spacing: .04em; color: var(--mag); } .rule__title { font: 700 17px/1.35 var(--f-ui); color: #fff; } .rule:target { background: linear-gradient(90deg, rgb(var(--mag-rgb) / .12), transparent 70%); box-shadow: inset 3px 0 0 var(--mag); padding-left: 14px; } .rule .chip { justify-self: start; } @media (min-width: 640px) { .rule { grid-template-columns: 72px minmax(0, 1fr); gap: 6px 18px; } .rule__nr { grid-row: span 3; padding-top: 2px; } } /* --------------------------------------------------------------------- 19 BEWEGUNG, REDUZIERTE BEWEGUNG, DRUCK Inhalte sind ohne JS sichtbar: Einblenden gibt es nur unter html.js, und nur für Elemente, die beim Laden unterhalb des ersten Bildschirms liegen (site.js setzt .rv, IntersectionObserver setzt .is-in). --------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .js .rv { opacity: 0; transform: translateY(32px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); transition-delay: var(--d, 0s); } .js .rv.is-in { opacity: 1; transform: none; } .neon-sign.is-an { animation: schild-an 1.8s steps(1) both; } .claim__script.is-flackern { animation: flackern 8s infinite 2s; } } /* Pausieren außerhalb des Sichtbereichs: site.js setzt .is-paused per IntersectionObserver */ .is-paused, .is-paused *, .is-paused::before, .is-paused::after { animation-play-state: paused !important; } @keyframes dreh { to { transform: rotate(360deg); } } @keyframes puls { 70% { box-shadow: 0 0 0 9px rgb(var(--ok-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--ok-rgb) / 0); } } @keyframes puls-achtung { 0% { box-shadow: 0 0 0 0 rgb(var(--achtung-rgb) / .7); } 70% { box-shadow: 0 0 0 9px rgb(var(--achtung-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--achtung-rgb) / 0); } } @keyframes pin-puls { 70% { box-shadow: 0 0 0 3px var(--mag), 0 0 0 16px rgb(var(--mag-rgb) / 0); } 100% { box-shadow: 0 0 0 3px var(--mag), 0 0 0 0 rgb(var(--mag-rgb) / 0); } } @keyframes laufen { to { transform: translateX(-50%); } } @keyframes gps { to { stroke-dashoffset: -32; } } @keyframes laden { 0% { transform: scaleX(.02); } 70%, 100% { transform: scaleX(1); } } @keyframes blip { 0%, 100% { opacity: 1; } 55% { opacity: .45; } } @keyframes wiegen { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1deg; } } @keyframes wiegen-r { 0%, 100% { rotate: 1deg; } 50% { rotate: -1.2deg; } } @keyframes schimmer { to { transform: translateX(100%); } } @keyframes toast-rein { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes toast-raus { to { opacity: 0; transform: translateX(24px); } } @keyframes schild-an { 0% { opacity: .15; } 8% { opacity: 1; } 12% { opacity: .25; } 20% { opacity: 1; } 24% { opacity: .5; } 30%, 100% { opacity: 1; } } @keyframes flackern { 0%, 19%, 21%, 23%, 55%, 57%, 100% { opacity: 1; } 20%, 22%, 56% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .marquee__track { animation: none !important; transform: none !important; } .loadbar--laeuft i { animation: none !important; transform: scaleX(1); } .radar__sweep { animation: none !important; opacity: .35; } .vip__card { transform: none !important; } } @media print { .site-header, .site-footer, .site-banner, .toasts, .passed, .nav, .scroll-bar, .tipbar, body::after { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .prose, .prose strong, .rule__title { color: #000; } .rule__nr { color: #8e1467; } a { color: #000; } } /* ===================================================================== Ergänzungen Grundgerüst (29.09.2026) Bausteine, die layout.js, components.js und site.js brauchen und oben noch fehlten. Nur Tokens, keine neuen Farben. ===================================================================== */ /* Programmatisch fokussierte Sprungziele (Skip-Link, Fußnavigation) ohne Rahmen */ main[tabindex="-1"]:focus, nav[tabindex="-1"]:focus { outline: none; } /* Bild, das nicht geladen werden konnte und in keinem Rahmen steht: nie das kaputte Symbol zeigen */ img.is-broken { visibility: hidden; } /* Live-Pille: bei offline und Restart steht das Wort immer (auch unter 640) */ .live-pill--offline .live-pill__word, .live-pill--restart .live-pill__word { display: inline; color: var(--text); } .live-pill--offline .live-pill__word { color: var(--gefahr); } .live-pill--restart .live-pill__word { color: var(--achtung); } /* Banner schließen (nur mit JS) */ .site-banner__close { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 4px; padding: 0; border: 0; background: none; color: var(--text-3); cursor: pointer; } .site-banner__close:hover { color: #fff; } .site-banner__close:focus-visible { outline: 3px solid var(--fokus); outline-offset: -4px; } .no-js .site-banner__close { display: none; } /* Kontomenü in der Kopfzeile: details/summary, ohne JS bedienbar */ .konto-menu { position: relative; } .konto-menu__knopf { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 10px 2px 2px; list-style: none; cursor: pointer; border-radius: var(--r-pill); color: var(--text); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgb(var(--rosa-rgb) / .3); transition: background var(--t); } .konto-menu__knopf::-webkit-details-marker { display: none; } .konto-menu__knopf:hover, .konto-menu[open] .konto-menu__knopf { background: rgb(var(--mag-rgb) / .16); } .konto-menu__knopf:focus-visible { outline: 3px solid var(--rosa); outline-offset: 2px; } .konto-menu__knopf[aria-current="true"], .site-header__actions .btn--icon[aria-current="page"] { background: rgb(var(--mag-rgb) / .16); box-shadow: inset 0 0 0 2px var(--mag); } .konto-menu__knopf .avatar { box-shadow: none; } .konto-menu__name { display: none; max-width: 12em; overflow-wrap: anywhere; font: 700 13px/1.1 var(--f-ui); letter-spacing: .04em; } .konto-menu__box { --c: var(--cut-s); position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-menue); width: min(280px, calc(100vw - 32px)); padding: 14px; background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie-mag), var(--schatten-2); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); } .konto-menu__kopf { padding: 2px 4px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--linie); } .konto-menu__kopf b { display: block; font: 600 15px/1.3 var(--f-body); color: #fff; overflow-wrap: anywhere; } .konto-menu__kopf small { display: block; margin-top: 4px; font: 700 12px/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--rosa); } .konto-menu__liste { display: grid; gap: 2px; list-style: none; margin: 0 0 10px; padding: 0; } .konto-menu__liste a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; font: 500 15px/1.2 var(--f-ui); color: var(--text-2); text-decoration: none; } .konto-menu__liste a:hover { background: rgba(255, 255, 255, .06); color: #fff; } .konto-menu__liste a:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; } .konto-menu__liste .icon { width: 18px; height: 18px; color: var(--rosa); } @media (min-width: 960px) { .konto-menu__name { display: block; } } /* Fußzeile: Kopierfeld unter dem Claim */ .site-footer__copy { margin-top: 18px; max-width: 360px; } /* Seitenkopf rechts (Live-Tafel, Radar, Bild) darf schrumpfen */ .page-hero__aside { min-width: 0; } /* Radar: Blips liegen in einer eigenen Ebene (site.js ersetzt sie beim Abruf) */ .radar__blips { position: absolute; inset: 0; } /* Nachtszene: Palmenlinien als ruhige Ebene (404, Offline), 15 Prozent */ .night__linien { position: absolute; left: 50%; bottom: 0; width: max(100%, 1200px); max-width: none; height: auto; transform: translateX(-50%); opacity: .15; pointer-events: none; } /* Großes Diagramm als figure ohne Außenabstand */ .chart-box { margin: 0; } .chart[aria-busy="true"] .chart__plot { opacity: .45; transition: opacity var(--t); } /* Toast ohne Farbton (Info) */ .toast__text { display: block; } /* Fußzeile mobil: Marke über die volle Breite, Linkspalten zu zweit (kürzer) */ @media (max-width: 639px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } .site-footer__grid > :first-child { grid-column: 1 / -1; } } /* Mobilmenü deckend: mit halbtransparentem Grund schien der Seiteninhalt deutlich durch (geprüft in Chrome 152) */ @media (max-width: 1279px) { .js .nav { background: var(--grund); } } /* Banner: Schließen-Knopf rechts, bricht mobil nicht in eine eigene Zeile */ .site-banner:has(.site-banner__close) { padding-right: 52px; } .site-banner__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin: 0; }