/* ===================================================================== Redwood Roleplay – Gestaltung für Website und Panel Aufbau dieser Datei: 1. Farben, Abstände, Schrift (die „Stellschrauben“) 2. Grundlagen (body, Überschriften, Links) 3. Bausteine (Knöpfe, Karten, Formulare …) 4. Seitenteile (Kopf, Hero, Fuß …) Die beiden Akzentfarben kommen aus den Einstellungen im Panel und werden im überschrieben – deshalb hier nur als Vorgabe. Schriften liegen bewusst nicht bei Google, sondern kommen vom Gerät: das ist schneller und in Deutschland datenschutzrechtlich unbedenklich. ===================================================================== */ /* ===================================================================== */ /* 1. Stellschrauben */ /* ===================================================================== */ :root { /* Untergrund – von ganz dunkel nach etwas heller */ --grund: #07040e; --grund-2: #0d0719; --flaeche: #150c26; --flaeche-2:#1e1233; --flaeche-3:#2a1a45; /* Linien: sehr zurückhaltend, damit die Farbe wirken kann */ --linie: #2c1a45; --linie-hell: #3d2560; /* Schrift */ --schrift: #f4eefc; --leise: #a894c4; --sehr-leise: #7a6795; /* Akzente (werden vom Panel überschrieben) */ --akzent: #a04ede; --akzent-2: #d07ff0; /* Rückmeldungen */ --gut: #34d399; --warn: #fbbf24; --schlecht: #f87171; /* Rundungen */ --rund-gross: 22px; --rund: 15px; --rund-klein: 10px; --rund-mini: 7px; /* Höhe – drei Stufen statt einem harten Schatten */ --e1: 0 1px 2px rgba(0, 0, 0, .35); --e2: 0 8px 24px -8px rgba(0, 0, 0, .55); --e3: 0 28px 70px -20px rgba(0, 0, 0, .75); --glanz: inset 0 1px 0 rgba(255, 255, 255, .055); --schatten: var(--e3); /* Leuchten in Akzentfarbe – sparsam einsetzen */ --schein: 0 0 0 1px rgba(160, 78, 222, .35), 0 12px 40px -12px rgba(160, 78, 222, .55); /* Abstände (immer Vielfache voneinander) */ --a1: .35rem; --a2: .65rem; --a3: 1rem; --a4: 1.5rem; --a5: 2.25rem; --a6: 3.5rem; --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif; --font-titel: "Segoe UI Variable Display", "Segoe UI Semibold", var(--font); --font-fest: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace; --takt: .18s cubic-bezier(.2, .8, .3, 1); } /* ===================================================================== */ /* 2. Grundlagen */ /* ===================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--linie-hell) transparent; } body { margin: 0; font-family: var(--font); background: var(--grund); color: var(--schrift); line-height: 1.68; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Ein sehr ruhiger Farbschimmer über der ganzen Seite. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60rem 40rem at 12% -10%, rgba(160, 78, 222, .16), transparent 60%), radial-gradient(45rem 35rem at 95% 8%, rgba(208, 127, 240, .09), transparent 55%); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } ::selection { background: var(--akzent); color: #fff; } :focus-visible { outline: 2px solid var(--akzent-2); outline-offset: 2px; border-radius: var(--rund-mini); } code { font-family: var(--font-fest); font-size: .88em; background: var(--flaeche-2); padding: .14em .45em; border-radius: 5px; border: 1px solid var(--linie); } h1, h2, h3 { font-family: var(--font-titel); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.025em; } h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); letter-spacing: -.035em; } h2 { font-size: clamp(1.35rem, 3.4vw, 2rem); } h3 { font-size: 1.12rem; letter-spacing: -.015em; } p { margin: 0 0 1em; } hr { border: 0; border-top: 1px solid var(--linie); margin: var(--a4) 0; } /* ------------------------------------------------------------ Hilfsklassen */ .breite { width: min(1200px, 100% - 2.5rem); margin-inline: auto; } .schmal { max-width: 780px; } .block { padding: clamp(2.25rem, 5.5vw, 4rem) 0; } .leise { color: var(--leise); } .klein { font-size: .87rem; } .center { text-align: center; } .gut { color: var(--gut); } .schlecht { color: var(--schlecht); } .verweis { color: var(--akzent-2); text-decoration: none; font-weight: 600; text-underline-offset: 3px; } .verweis:hover { text-decoration: underline; } /* Überschrift mit Farbverlauf – für die großen Aufmacher */ .leucht { background: linear-gradient(100deg, var(--schrift) 15%, var(--akzent-2) 55%, var(--akzent) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===================================================================== */ /* 3. Bausteine */ /* ===================================================================== */ /* -------------------------------------------------------------------- Knöpfe */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.4rem; border-radius: 999px; border: 1px solid transparent; background: linear-gradient(135deg, var(--akzent), var(--akzent-2)); color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .005em; text-decoration: none; cursor: pointer; font-family: inherit; box-shadow: var(--e1), var(--glanz); transition: transform var(--takt), box-shadow var(--takt), filter var(--takt), border-color var(--takt); } .knopf:hover { transform: translateY(-2px); box-shadow: var(--schein); filter: saturate(1.1); } .knopf:active { transform: translateY(0); } .knopf.zweit { background: var(--flaeche-2); color: var(--schrift); border-color: var(--linie-hell); } .knopf.zweit:hover { border-color: var(--akzent); box-shadow: var(--e2); } .knopf.rand { background: transparent; border-color: var(--linie-hell); color: var(--schrift); box-shadow: none; } .knopf.rand:hover { border-color: var(--akzent); background: rgba(160, 78, 222, .1); box-shadow: none; } .knopf.klein { padding: .45rem .95rem; font-size: .84rem; } .knopf.breit { width: 100%; } .knopf.gefahr { background: linear-gradient(135deg, #dc2626, #f87171); } .knopf.gefahr:hover { box-shadow: 0 0 0 1px rgba(248, 113, 113, .4), 0 12px 34px -14px rgba(248, 113, 113, .7); } .knopf[disabled], .knopf.aus { opacity: .45; pointer-events: none; } /* --------------------------------------------------------------------- Raster */ .raster { display: grid; gap: var(--a3); } .raster.zwei { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .raster.drei { grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); } .raster.vier { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); } /* ---------------------------------------------------------------------- Karten */ .karte { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent 40%), var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; box-shadow: var(--e1), var(--glanz); transition: transform var(--takt), border-color var(--takt), box-shadow var(--takt); } a.karte:hover { border-color: var(--linie-hell); transform: translateY(-4px); box-shadow: var(--e3); } /* Ein feiner Lichtsaum oben, der beim Überfahren aufleuchtet */ a.karte::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--takt); background: linear-gradient(180deg, rgba(160, 78, 222, .16), transparent 45%); } a.karte:hover::after { opacity: 1; } .karte-inhalt { padding: 1.15rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .38rem; flex: 1; } .karte-inhalt h3 { margin: 0; } .karte-inhalt p { margin: 0; } .karte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .karte-fuss { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .7rem; } .karte.gross .karte-inhalt { padding: 1.6rem; gap: .7rem; } .karte.gross .knopf { align-self: flex-start; margin-top: .3rem; } /* --------------------------------------------------------------- Formulare */ .formular { display: grid; gap: var(--a4); } .feld { display: grid; gap: .4rem; } .feld > label { font-weight: 650; font-size: .93rem; letter-spacing: .002em; } .feld p { margin: 0; } .pflicht { color: var(--akzent-2); } input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], input[type=search], input[type=date], input[type=time], textarea, select { width: 100%; padding: .72rem .95rem; border-radius: var(--rund-klein); border: 1px solid var(--linie); background: var(--grund-2); color: var(--schrift); font-family: inherit; font-size: .97rem; transition: border-color var(--takt), box-shadow var(--takt), background var(--takt); } input::placeholder, textarea::placeholder { color: var(--sehr-leise); } input[type=text]:hover, input[type=email]:hover, input[type=url]:hover, input[type=number]:hover, input[type=password]:hover, input[type=search]:hover, textarea:hover, select:hover { border-color: var(--linie-hell); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(160, 78, 222, .22); background: var(--flaeche); } textarea { resize: vertical; min-height: 95px; line-height: 1.6; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--leise) 50%), linear-gradient(135deg, var(--leise) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; } input[type=color] { width: 58px; height: 40px; padding: 3px; border-radius: 9px; border: 1px solid var(--linie); background: var(--grund-2); cursor: pointer; } .feld.fehler input, .feld.fehler textarea, .feld.fehler select { border-color: var(--schlecht); } .feld-fehler { color: var(--schlecht); font-size: .85rem; } .ankreuz { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-size: .92rem; } .ankreuz input { width: 18px; height: 18px; margin-top: .2rem; flex: none; accent-color: var(--akzent); } .honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } /* ------------------------------------------------------------------ Hinweise */ .hinweis { position: relative; padding: .95rem 1.15rem .95rem 1.15rem; border-radius: var(--rund-klein); background: var(--flaeche-2); border: 1px solid var(--linie); margin: 0 0 var(--a4); font-size: .93rem; box-shadow: var(--glanz); } .hinweis.gut { border-color: rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .09); } .hinweis.schlecht { border-color: rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .09); } .hinweis.warnung { border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .09); } /* ------------------------------------------------------------------- Marker */ .marker { display: inline-block; align-self: flex-start; padding: .2rem .65rem; border-radius: 999px; font-size: .69rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; background: var(--flaeche-2); color: var(--leise); border: 1px solid var(--linie); } .marker.staat { background: rgba(59, 130, 246, .15); color: #93c5fd; border-color: rgba(59, 130, 246, .3); } .marker.legal { background: rgba(52, 211, 153, .14); color: #6ee7b7; border-color: rgba(52, 211, 153, .3); } .marker.illegal { background: rgba(248, 113, 113, .14); color: #fca5a5; border-color: rgba(248, 113, 113, .3); } .marker.twitch { background: rgba(145, 70, 255, .18); color: #c4b5fd; border-color: rgba(145, 70, 255, .35); } .marker.youtube { background: rgba(248, 113, 113, .14); color: #fca5a5; border-color: rgba(248, 113, 113, .3); } .marker.tiktok { background: rgba(255, 255, 255, .08); color: #e5e5e5; } /* -------------------------------------------------------------------- Filter */ .filter { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--a4); } .filter-knopf { padding: .48rem 1.05rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); font-weight: 650; font-size: .87rem; cursor: pointer; font-family: inherit; text-decoration: none; transition: var(--takt); } .filter-knopf:hover { color: var(--schrift); border-color: var(--linie-hell); } .filter-knopf.an { background: linear-gradient(135deg, var(--akzent), var(--akzent-2)); border-color: transparent; color: #fff; box-shadow: var(--e1); } /* ===================================================================== */ /* 4. Seitenteile */ /* ===================================================================== */ /* --------------------------------------------------------------- Kopfzeile */ .kopf { position: sticky; top: 0; z-index: 50; background: rgba(7, 4, 14, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--linie); padding-top: env(safe-area-inset-top); } .kopf-innen { display: flex; align-items: center; gap: 1rem; min-height: 68px; } .marke { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 800; } .marke-logo { height: 36px; width: auto; filter: drop-shadow(0 3px 10px rgba(160, 78, 222, .45)); } .marke-name { font-family: var(--font-titel); font-size: 1.12rem; letter-spacing: -.01em; } .nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; } .nav a { position: relative; text-decoration: none; padding: .5rem .8rem; border-radius: 999px; color: var(--leise); font-weight: 650; font-size: .94rem; transition: color var(--takt), background var(--takt); } .nav a:hover { color: var(--schrift); background: rgba(255, 255, 255, .045); } .nav a.an { color: var(--schrift); background: rgba(160, 78, 222, .16); } .nav a.knopf { color: #fff; margin-left: .4rem; } .sprach-knopf { padding: .35rem .6rem; border-radius: var(--rund-mini); border: 1px solid var(--linie); color: var(--leise); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-decoration: none; transition: var(--takt); } .sprach-knopf:hover { color: var(--schrift); border-color: var(--akzent); } .burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; padding: 11px; flex-direction: column; justify-content: space-between; } .burger span { display: block; height: 2px; background: var(--schrift); border-radius: 2px; transition: var(--takt); } .burger.offen span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .burger.offen span:nth-child(2) { opacity: 0; } .burger.offen span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } @media (max-width: 940px) { .burger { display: flex; } .nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--grund-2); border-bottom: 1px solid var(--linie); padding: .75rem 1.25rem 1.5rem; gap: .15rem; transform: translateY(-140%); transition: transform .28s cubic-bezier(.3, .9, .3, 1); max-height: 85vh; overflow-y: auto; box-shadow: var(--e3); } .nav.offen { transform: translateY(0); } .nav a { padding: .9rem .7rem; font-size: 1.05rem; border-radius: var(--rund-klein); } .nav a.knopf { margin: .5rem 0 0; justify-content: center; } } /* ---------------------------------------------------------------------- Hero */ .hero { position: relative; isolation: isolate; padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(2.75rem, 6vw, 4rem); border-bottom: 1px solid var(--linie); background-size: cover; background-position: center; overflow: hidden; } /* Farbschleier – liegt über einem eventuellen Hintergrundbild */ .hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -2; background: radial-gradient(38rem 26rem at 20% 12%, rgba(160, 78, 222, .38), transparent 62%), radial-gradient(32rem 24rem at 82% 30%, rgba(208, 127, 240, .2), transparent 60%), linear-gradient(180deg, rgba(7, 4, 14, .55), var(--grund) 92%); animation: schweben 22s ease-in-out infinite alternate; } /* Ganz feines Raster, damit die Fläche nicht leer wirkt */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(70% 60% at 50% 25%, #000, transparent 78%); -webkit-mask-image: radial-gradient(70% 60% at 50% 25%, #000, transparent 78%); } @keyframes schweben { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); } } .hero-innen { max-width: 820px; position: relative; } .hero-slogan { /* Trägt oft einen ganzen Satz – deshalb normale Schreibweise statt Großbuchstaben, sonst wird die Zeile zum Geschrei. */ display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; font-weight: 650; letter-spacing: .01em; color: var(--akzent-2); background: rgba(160, 78, 222, .12); border: 1px solid rgba(160, 78, 222, .28); padding: .34rem 1rem; border-radius: 999px; margin-bottom: 1.2rem; max-width: 100%; } .hero-slogan:empty { display: none; } .hero h1 { margin-bottom: .35rem; } .hero-text { color: var(--leise); font-size: clamp(1rem, 2.2vw, 1.14rem); max-width: 60ch; } .hero-knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.8rem 0; } .kennzahlen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; } .kennzahl { display: flex; flex-direction: column; padding: .85rem 1.3rem .9rem; background: rgba(255, 255, 255, .035); border: 1px solid var(--linie); border-radius: var(--rund-klein); backdrop-filter: blur(6px); min-width: 130px; } .kennzahl-wert { font-family: var(--font-titel); font-size: 1.8rem; font-weight: 800; line-height: 1.05; background: linear-gradient(120deg, var(--akzent-2), var(--schrift)); -webkit-background-clip: text; background-clip: text; color: transparent; } .kennzahl-text { font-size: .82rem; color: var(--leise); } /* ------------------------------------------------------------- Seitenköpfe */ .seiten-kopf { position: relative; padding: clamp(2.4rem, 6vw, 4rem) 0 1.75rem; border-bottom: 1px solid var(--linie); background: linear-gradient(180deg, rgba(160, 78, 222, .12), transparent 85%); } .seiten-kopf h1 { margin-bottom: .35rem; } .seiten-kopf p { max-width: 70ch; margin: 0; color: var(--leise); } .abschnitt-kopf { margin-bottom: var(--a4); } .abschnitt-kopf p { margin: 0; color: var(--leise); } /* ---------------------------------------------------------------- Fraktionen */ .fraktion-karte { border-top: 3px solid var(--karten-farbe, var(--akzent)); } .fraktion-logo { width: 64px; height: 64px; object-fit: contain; margin: 1.15rem 1.2rem -.3rem; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); } .fraktion-hero { position: relative; border-bottom: 1px solid var(--linie); padding: clamp(2.2rem, 6vw, 3.6rem) 0; border-top: 4px solid var(--karten-farbe, var(--akzent)); background: radial-gradient(40rem 20rem at 10% 0%, color-mix(in srgb, var(--karten-farbe, var(--akzent)) 22%, transparent), transparent 65%), var(--grund-2); } .fraktion-hero-innen { display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; } .fraktion-hero-logo { width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6)); } .fraktion-hero h1 { margin: .2rem 0 .3rem; } .spalten { display: grid; grid-template-columns: 1fr; gap: var(--a5); } @media (min-width: 900px) { .spalten { grid-template-columns: 1fr 330px; } } .seitenleiste .karte { position: sticky; top: 88px; } .daten-liste { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.1rem; margin: 0 0 var(--a3); } .daten-liste dt { color: var(--leise); font-size: .85rem; } .daten-liste dd { margin: 0; font-weight: 650; } .fraktion-rang { display: flex; align-items: baseline; gap: .6rem; margin: 1.6rem 0 .5rem; font-size: 1.05rem; padding-bottom: .3rem; border-bottom: 1px solid var(--linie); } .fraktion-rang span { margin-left: auto; } .mitglieder-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .mitglieder-liste li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-klein); transition: border-color var(--takt); } .mitglieder-liste li:hover { border-color: var(--linie-hell); } /* ----------------------------------------------------------------- Regelwerk */ .regel-suche { margin-bottom: var(--a4); } .regel-suche input { font-size: 1rem; padding: .9rem 1.15rem; } .regel-suche p { margin: .5rem 0 0; } .sprungmarken { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--a5); } .sprungmarken a { padding: .38rem .85rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; font-size: .85rem; color: var(--leise); font-weight: 650; transition: var(--takt); } .sprungmarken a:hover { color: var(--schrift); border-color: var(--akzent); } .regel-abschnitt { margin-bottom: var(--a5); scroll-margin-top: 88px; } .regel-liste { display: grid; gap: .7rem; } .regel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.05rem 1.25rem; border-left: 3px solid transparent; transition: border-color var(--takt), background var(--takt); } .regel:hover { border-left-color: var(--akzent); background: var(--flaeche-2); } .regel-kopf { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } .regel-kopf h3 { margin: 0; font-size: 1.02rem; } .regel-code { color: var(--akzent-2); font-weight: 800; font-size: .88rem; white-space: nowrap; font-family: var(--font-fest); } .regel-text { color: var(--leise); font-size: .95rem; } .regel-text p:last-child { margin-bottom: 0; } .regel-strafe { margin: .65rem 0 0; font-size: .85rem; color: var(--warn); } .regel-strafe span { display: inline-block; background: rgba(251, 191, 36, .13); color: var(--warn); padding: .12rem .55rem; border-radius: 5px; font-weight: 700; margin-right: .4rem; border: 1px solid rgba(251, 191, 36, .25); } .regel.versteckt { display: none; } /* ---------------------------------------------------------------------- Team */ .team-gruppe { margin-bottom: var(--a5); } .team-gruppe h2 { display: flex; align-items: center; gap: .65rem; } .rang-punkt { width: 11px; height: 11px; border-radius: 50%; background: var(--karten-farbe, var(--akzent)); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--karten-farbe, var(--akzent)) 22%, transparent); } .team-karte { border-top: 3px solid var(--karten-farbe, var(--akzent)); } .team-karte .karte-inhalt { align-items: center; text-align: center; } .team-bild { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; margin-bottom: .35rem; border: 2px solid var(--linie); } .team-bild.ersatz { display: grid; place-items: center; background: linear-gradient(140deg, var(--flaeche-2), var(--flaeche-3)); font-size: 1.95rem; font-weight: 800; color: var(--akzent-2); } .team-ueber { margin-top: .4rem !important; } /* --------------------------------------------------------------- Galerie */ .galerie { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .galerie-bild { margin: 0; border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; background: var(--flaeche); transition: transform var(--takt), border-color var(--takt); } .galerie-bild:hover { transform: translateY(-3px); border-color: var(--linie-hell); } .galerie-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .galerie-bild figcaption { padding: .7rem .9rem; display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; } .galerie-bild figcaption em { font-style: normal; font-size: .8rem; } .partner-bild { width: 100%; height: 120px; object-fit: contain; padding: 1.2rem; background: var(--flaeche-2); } /* --------------------------------------------------------------- Kalender */ .kalender-karte { flex-direction: row; align-items: stretch; } .kalender-tag { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; background: linear-gradient(160deg, rgba(160, 78, 222, .22), transparent); border-right: 1px solid var(--linie); } .kalender-zahl { font-family: var(--font-titel); font-size: 1.7rem; font-weight: 800; line-height: 1; } .kalender-monat { font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--leise); } /* ----------------------------------------------------------------- Suche */ .such-treffer { display: grid; gap: .6rem; margin-top: 1.2rem; } .such-treffer-satz { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; padding: .95rem 1.1rem; text-decoration: none; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); border-left: 3px solid transparent; transition: border-color var(--takt), background var(--takt); } .such-treffer-satz:hover { border-left-color: var(--akzent); background: var(--flaeche-2); } .such-treffer-satz strong { font-size: 1.02rem; } mark { background: rgba(160, 78, 222, .28); color: inherit; border-radius: 3px; padding: 0 .15em; } /* ---------------------------------------------------------- Teamupdates */ .teamupdate-karte .karte-inhalt { gap: .45rem; } .teamupdate-pfeil { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: 0; } .teamupdate-pfeil .pfeil { color: var(--akzent-2); font-weight: 700; } /* ---------------------------------------------------------------- Dienst */ .dienst-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sehr-leise); flex: none; } .dienst-zeile { display: inline-flex; align-items: center; gap: .55rem; margin: 1rem 0 0; padding: .4rem .95rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); font-size: .92rem; color: var(--leise); } .dienst-zeile.an { color: var(--schrift); border-color: rgba(52, 211, 153, .35); } .dienst-zeile.an .dienst-punkt { background: var(--gut); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); animation: pochen 2.4s ease-in-out infinite; } .dienst-abzeichen { display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(52, 211, 153, .14); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, .3); } .dienst-abzeichen .dienst-punkt { width: 7px; height: 7px; background: var(--gut); animation: pochen 2.4s ease-in-out infinite; } .status-punkt { font-size: .77rem; font-weight: 700; color: var(--leise); } .status-punkt::before { content: "● "; } .status-punkt.aktiv { color: var(--gut); } .status-punkt.urlaub { color: var(--warn); } .status-punkt.probe { color: var(--akzent-2); } .status-punkt.inaktiv { color: var(--sehr-leise); } .aufruf { position: relative; overflow: hidden; margin-top: var(--a5); padding: 2.4rem 1.6rem; text-align: center; background: radial-gradient(30rem 14rem at 50% 0%, rgba(160, 78, 222, .22), transparent 70%), var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-gross); box-shadow: var(--glanz); } .aufruf h2 { margin-bottom: .35rem; } /* ------------------------------------------------------------------- Status */ .status-kachel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a4); padding: 1.6rem; border-radius: var(--rund-gross); border: 1px solid var(--linie); background: var(--flaeche); margin-bottom: var(--a5); box-shadow: var(--e1), var(--glanz); } .status-punkt-gross { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: .55rem; background: var(--schlecht); } .status-kachel.online .status-punkt-gross { background: var(--gut); box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); animation: pochen 2.4s ease-in-out infinite; } @keyframes pochen { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, .2); } 50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, .05); } } .status-zahl { font-family: var(--font-titel); font-size: 2.1rem; font-weight: 800; color: var(--akzent-2); line-height: 1.1; } .balken { flex: 1 1 200px; height: 9px; background: var(--flaeche-2); border-radius: 999px; overflow: hidden; } .balken span { display: block; height: 100%; background: linear-gradient(90deg, var(--akzent), var(--akzent-2)); box-shadow: 0 0 14px rgba(160, 78, 222, .55); } .spieler-liste { display: flex; flex-wrap: wrap; gap: .4rem; } .spieler { padding: .32rem .8rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; } .schritte { padding-left: 1.25rem; margin: 0; display: grid; gap: .4rem; color: var(--leise); } .schritte strong { color: var(--schrift); } .beitrag-bild { width: 100%; border-radius: var(--rund); margin: 1rem 0 var(--a4); } .beitrag-text { font-size: 1.03rem; } .beitrag-text p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------- Fuß */ .fuss { border-top: 1px solid var(--linie); background: linear-gradient(180deg, var(--grund-2), var(--grund)); margin-top: var(--a5); } .fuss-innen { display: grid; gap: var(--a4); padding: var(--a5) 0 var(--a4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fuss-innen p { margin: .3rem 0 0; } .fuss-links, .fuss-sozial { display: flex; flex-direction: column; gap: .35rem; } .fuss-links a, .fuss-sozial a { text-decoration: none; color: var(--leise); font-size: .92rem; width: fit-content; transition: color var(--takt); } .fuss-links a:hover, .fuss-sozial a:hover { color: var(--akzent-2); } .fuss-unten { padding: 1rem 0 calc(1.5rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); color: var(--sehr-leise); } /* ------------------------------------------------------------- Mittige Box */ body.mittig { display: grid; place-items: center; min-height: 100vh; padding: var(--a4); } .mitte-box { max-width: 430px; width: 100%; text-align: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-gross); padding: 2.4rem 1.9rem; box-shadow: var(--e3), var(--glanz); } .mitte-box .formular { text-align: left; margin-top: var(--a4); } /* Trennlinie mit „oder“ in der Mitte */ .oder { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 1rem; color: var(--sehr-leise); font-size: .82rem; } .oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); } /* Knopf in den Discord-Farben – erkennbar, ohne aus dem Rahmen zu fallen */ .knopf.discord { background: #5865f2; color: #fff; } .knopf.discord:hover { box-shadow: 0 0 0 1px rgba(88, 101, 242, .5), 0 12px 34px -14px rgba(88, 101, 242, .9); } .knopf.discord svg { flex: none; } /* ------------------------------------------- Ankündigungen einer Fraktion */ .fraktion-meldungen { display: grid; gap: .85rem; margin-bottom: var(--a5); } .fraktion-meldungen .karte-inhalt { gap: .28rem; } .fraktion-meldungen h3 { margin: 0; font-size: 1.05rem; } .fraktion-meldungen .leise p:last-child { margin-bottom: 0; } /* ===================================================================== */ /* Rücksicht auf Einstellungen des Geräts */ /* ===================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .knopf:hover, a.karte:hover { transform: none; } } @media print { body::before, .kopf, .nav, .fuss, .burger { display: none !important; } body { background: #fff; color: #000; } .karte, .regel { border-color: #ccc; box-shadow: none; } }