/* Grundlagen. */
:root {
  --ink: #11110f;
  --ink-soft: #24231f;
  --paper: #f1eee5;
  --paper-deep: #e6e0d3;
  --coral: #f06a4f;
  --mint: #94cdb6;
  --yellow: #e3c65c;
  --blue: #72a9d5;
  --purple: #b294cc;
  --green: #82bd79;
  --muted: #aaa69c;
  --line-dark: rgba(255, 255, 255, 0.15);
  --line-light: #c9c4b8;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
::selection { background: var(--coral); color: var(--ink); }

.skipLink { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-150%); background: var(--paper); color: var(--ink); padding: 12px 16px; font-weight: 800; }
.skipLink:focus { transform: translateY(0); }

/* Header. */
.siteHeader { position: absolute; inset: 0 0 auto; z-index: 20; height: 88px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line-dark); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brandLogoFrame { display: grid; place-items: center; width: 48px; height: 48px; padding: 5px; border-radius: 12px; background: var(--coral); box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.brandLogoFrame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brandText { font-size: 15px; font-weight: 950; letter-spacing: .12em; }
.brandText small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .25em; }
.desktopNav { display: flex; align-items: center; gap: clamp(12px, 1.35vw, 24px); }
.desktopNav a { position: relative; color: var(--paper); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.desktopNav a::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.22,1,.36,1); }
.desktopNav a:hover::after, .desktopNav a:focus-visible::after, .desktopNav a.isCurrent::after { transform: scaleX(1); }
.globalWebsite { color: var(--coral) !important; }
.globalGameservers { color: var(--blue) !important; }
.globalRules { color: var(--yellow) !important; }
.globalDiscord { color: var(--mint) !important; }
.globalPartners { color: var(--purple) !important; }
.navDivider { width: 1px; height: 18px; flex: 0 0 1px; background: var(--line-dark); }
.headerActions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.languageSwitch { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.28); }
.languageSwitch button { min-width: 31px; border: 0; padding: 8px 7px; background: transparent; color: #aaa69c; font: inherit; font-size: 9px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.languageSwitch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.headerDiscord { border: 1px solid rgba(255,255,255,.28); padding: 13px 17px; font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; transition: .2s ease; }
.headerDiscord span { margin-left: 14px; color: var(--coral); }
.headerDiscord:hover, .headerDiscord:focus-visible { background: var(--paper); color: var(--ink); }
.mobileMenu { display: none; }

/* Startbereich. */
.hero { min-height: min(900px, 100svh); position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; background: radial-gradient(circle at 72% 36%, rgba(240,106,79,.15), transparent 27%), linear-gradient(118deg, #11110f 60%, #1a1916); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent, rgba(0,0,0,.25)); z-index: -1; }
.heroGrid { position: absolute; inset: 0; z-index: -2; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 74px 74px; mask-image: linear-gradient(to right, transparent 20%, black); }
.heroMonogram { position: absolute; right: -2vw; bottom: -8vw; z-index: -1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); font-size: clamp(300px, 39vw, 650px); font-weight: 1000; line-height: .8; letter-spacing: -.13em; transform: rotate(-7deg); user-select: none; }
.heroInner { width: min(1420px, 100%); margin: 0 auto; padding: 150px 8vw 90px; }
.eyebrow, .kicker { margin: 0; font-size: 9px; font-weight: 900; letter-spacing: .23em; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.eyebrow i { width: 34px; height: 3px; background: var(--coral); }
.hero h1 { margin: 34px 0 45px; font-size: clamp(62px, 9.6vw, 146px); line-height: .77; letter-spacing: -.074em; font-weight: 1000; }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { color: var(--coral); font-style: normal; }
.heroBottom { display: grid; grid-template-columns: minmax(280px, 530px) 1fr; align-items: end; gap: 5vw; }
.heroBottom > p { margin: 0; color: #bcb8ae; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.65; }
.heroActions { display: flex; align-items: center; gap: 26px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; min-width: 218px; padding: 18px 21px; font-size: 11px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; transition: transform .18s ease, background .18s ease, color .18s ease; }
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button b { margin-left: 22px; color: var(--coral); font-size: 16px; }
.buttonLight { background: var(--paper); color: var(--ink); }
.buttonDark { background: var(--ink); color: var(--paper); }
.textLink { border-bottom: 1px solid rgba(255,255,255,.32); padding: 12px 0; color: var(--paper); font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.textLink span { margin-left: 20px; color: var(--coral); }
.heroSideNote { position: absolute; right: 3vw; top: 180px; display: flex; gap: 13px; color: #716e67; font-size: 8px; font-weight: 900; letter-spacing: .24em; writing-mode: vertical-rl; }
.heroSideNote span { color: var(--coral); }

.valueStrip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--coral); color: var(--ink); }
.valueStrip > div { min-height: 112px; padding: 27px 2.8vw; display: flex; align-items: center; gap: 18px; border-right: 1px solid rgba(17,17,15,.33); }
.valueStrip > div:last-child { border: 0; }
.valueStrip span { color: rgba(17,17,15,.5); font-size: 9px; font-weight: 900; }
.valueStrip b { font-size: 12px; line-height: 1.35; }

.serverStatusCta { position: relative; overflow: hidden; padding: 88px 8vw; display: grid; grid-template-columns: minmax(330px, 1fr) minmax(320px, .8fr); gap: 9vw; align-items: end; background: var(--blue); color: var(--ink); }
.serverStatusCta .kicker { display: flex; align-items: center; gap: 10px; color: #244f70; }
.serverStatusCta .kicker i { width: 9px; height: 9px; border-radius: 50%; background: #246f47; box-shadow: 0 0 0 5px rgba(36,111,71,.16); }
.serverStatusIntro, .serverStatusCopy { position: relative; z-index: 1; }
.serverStatusIntro h2 { margin: 16px 0 0; font-size: clamp(50px, 6.7vw, 96px); line-height: .88; letter-spacing: -.065em; }
.serverStatusIntro h2 em { color: var(--paper); font-style: normal; }
.serverStatusCopy > p { max-width: 560px; margin: 0 0 25px; font-size: 15px; line-height: 1.7; }
.serverStatusFacts { margin: 0 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(17,17,15,.38); border-bottom: 1px solid rgba(17,17,15,.38); }
.serverStatusFacts span { padding: 14px 10px 14px 0; font-size: 9px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.serverStatusFacts span + span { padding-left: 12px; border-left: 1px solid rgba(17,17,15,.28); }
.serverStatusMark { position: absolute; right: -2vw; top: -16vw; color: rgba(17,17,15,.06); font-size: 42vw; line-height: 1; }

.sectionLight { background: var(--paper); color: var(--ink); }
.about, .principles, .events { padding: 105px 7vw; }
.sectionLabel { display: flex; align-items: center; gap: 18px; margin-bottom: 70px; border-top: 1px solid var(--line-light); padding-top: 15px; }
.sectionLabel span { color: var(--coral); font-size: 10px; font-weight: 1000; }
.sectionLabel p { margin: 0; font-size: 9px; font-weight: 900; letter-spacing: .22em; }
.sectionLabelDark { border-color: var(--line-dark); }
.about { display: grid; grid-template-columns: 170px minmax(300px, 1.1fr) minmax(280px, .8fr); column-gap: 5vw; }
.about .sectionLabel { grid-column: 1 / -1; }
.aboutLead { grid-column: 1 / 3; min-width: 0; }
.kicker { color: var(--coral); }
.aboutLead h2, .principlesIntro h2, .eventsHead h2 { margin: 16px 0 0; font-size: clamp(44px, 6.5vw, 92px); line-height: .92; letter-spacing: -.06em; }
.aboutLead h2 em, .eventsHead h2 em { color: var(--coral); font-style: normal; }
.aboutCopy { grid-column: 3; min-width: 0; padding-top: 27px; }
.aboutCopy p { color: #5d5a53; font-size: 14px; line-height: 1.72; }
.aboutCopy .largeCopy { color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.55; }
.inkLink { display: inline-flex; justify-content: space-between; min-width: 205px; margin-top: 18px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.inkLink span { color: var(--coral); }
.numbers { grid-column: 2 / -1; margin-top: 90px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 5px solid var(--ink); }
.numbers div { padding: 24px 20px 0 0; border-right: 1px solid var(--line-light); }
.numbers div:not(:first-child) { padding-left: 26px; }
.numbers div:last-child { border: 0; }
.numbers strong { display: block; color: var(--coral); font-size: clamp(48px, 6vw, 76px); line-height: 1; letter-spacing: -.06em; }
.numbers span { display: block; margin-top: 8px; color: #706c64; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }

/* Projekte. */
.projects { padding: 105px 7vw; background: var(--ink-soft); }
.projectsHead { display: grid; grid-template-columns: 1.2fr minmax(280px, .65fr); gap: 8vw; align-items: end; margin-bottom: 65px; }
.projectsHead h2, .rulesCta h2, .join h2 { margin: 15px 0 0; font-size: clamp(54px, 7.4vw, 105px); line-height: .86; letter-spacing: -.065em; }
.projectsHead > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.projectGrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.projectCard { --accent: var(--coral); --project-image: none; position: relative; isolation: isolate; overflow: hidden; min-height: 390px; padding: 26px; display: flex; flex-direction: column; background: #1c1b18; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); transition: transform .22s ease; }
.projectCard::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--project-image); background-position: center; background-size: cover; opacity: .54; transform: scale(1.015); transition: opacity .25s ease, transform .35s ease; }
.projectCard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(17,17,15,.28) 0%, rgba(17,17,15,.58) 48%, rgba(17,17,15,.96) 100%), linear-gradient(90deg, rgba(17,17,15,.28), transparent 70%); }
.projectCard > * { position: relative; z-index: 1; }
.projectCard.gameZomboid { --project-image: url("games/project-zomboid.jpg?v=20260823"); --project-image: image-set(url("games/project-zomboid.webp?v=20260823") type("image/webp"), url("games/project-zomboid.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameGmod { --project-image: url("games/garrys-mod.jpg?v=20260823"); --project-image: image-set(url("games/garrys-mod.webp?v=20260823") type("image/webp"), url("games/garrys-mod.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameArma { --project-image: url("games/arma-3.jpg?v=20260823"); --project-image: image-set(url("games/arma-3.webp?v=20260823") type("image/webp"), url("games/arma-3.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameBarotrauma { --project-image: url("games/barotrauma.jpg?v=20260823"); --project-image: image-set(url("games/barotrauma.webp?v=20260823") type("image/webp"), url("games/barotrauma.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameMinecraft { --project-image: url("games/minecraft.jpg?v=20260823"); --project-image: image-set(url("games/minecraft.webp?v=20260823") type("image/webp"), url("games/minecraft.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameCs2 { --project-image: url("games/counter-strike-2.jpg?v=20260823"); --project-image: image-set(url("games/counter-strike-2.webp?v=20260823") type("image/webp"), url("games/counter-strike-2.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameLol { --project-image: url("games/league-of-legends.jpg?v=20260823"); --project-image: image-set(url("games/league-of-legends.webp?v=20260823") type("image/webp"), url("games/league-of-legends.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameGta { --project-image: url("games/gta-online.jpg?v=20260823"); --project-image: image-set(url("games/gta-online.webp?v=20260823") type("image/webp"), url("games/gta-online.jpg?v=20260823") type("image/jpeg")); }
.projectCard.gameDbd { --project-image: url("games/dead-by-daylight.jpg?v=20260823"); --project-image: image-set(url("games/dead-by-daylight.webp?v=20260823") type("image/webp"), url("games/dead-by-daylight.jpg?v=20260823") type("image/jpeg")); }
.projectCard.mint { --accent: var(--mint); }
.projectCard.yellow { --accent: var(--yellow); }
.projectCard.blue { --accent: var(--blue); }
.projectCard.green { --accent: var(--green); }
.projectCard.purple { --accent: var(--purple); }
.projectCard:hover { transform: translateY(-5px); }
.projectCard:hover::before { opacity: .7; transform: scale(1.05); }
.projectTop { display: flex; justify-content: space-between; align-items: center; }
.projectTop span { color: var(--accent); font-size: 11px; font-weight: 1000; }
.projectTop small { max-width: 72%; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); padding: 6px 8px; background: rgba(17,17,15,.54); color: var(--accent); font-size: 7px; font-weight: 900; line-height: 1.35; letter-spacing: .12em; text-align: right; text-transform: uppercase; }
.projectCard h3 { margin: auto 0 13px; color: #fffdf7; font-size: clamp(25px, 2.3vw, 36px); letter-spacing: -.045em; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.projectCard p { min-height: 68px; margin: 0 0 28px; color: #d5d0c6; font-size: 12px; line-height: 1.6; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.projectLinks { display: grid; grid-template-columns: 1fr 1fr; background: rgba(17,17,15,.24); border-top: 1px solid rgba(255,255,255,.25); }
.projectLinks a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 17px 10px 0 0; color: #d6d1c7; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.projectLinks a + a { border-left: 1px solid var(--line-dark); padding-right: 0; padding-left: 12px; }
.projectLinks a b { color: var(--accent); font-size: 15px; }
.projectLinks .serverLink { color: var(--paper); }
.projectLinks .onlyLink { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
.projectNote { margin-top: 36px; padding: 24px 0; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 25px; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.projectNote span { color: var(--coral); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.projectNote p { margin: 0; color: var(--muted); font-size: 12px; }
.projectNote a { font-size: 10px; font-weight: 900; }
/* Weitere Spiele. */
.multigamingBlock { margin-top: 48px; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid rgba(255,255,255,.12); }
.multigamingIntro { padding: 46px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 7vw; align-items: end; }
.multigamingIntro h3 { margin: 13px 0 0; font-size: clamp(42px, 5vw, 72px); line-height: .9; letter-spacing: -.055em; }
.multigamingIntro h3 em { color: var(--coral); font-style: normal; }
.multigamingIntro > div:last-child > p { max-width: 580px; margin: 0; color: #5f5b53; font-size: 14px; line-height: 1.72; }
.inkLinkDark { color: var(--ink); }
.gameCloud { padding: 24px 46px 34px; display: flex; flex-wrap: wrap; gap: 9px; border-top: 1px solid #d5cfc3; background: #e8e3d8; }
.gameCloud span { border: 1px solid #aaa398; padding: 10px 13px; background: rgba(255,255,255,.28); color: #48453f; font-size: 9px; font-weight: 900; letter-spacing: .055em; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.gameCloud span:hover { border-color: var(--coral); background: var(--coral); color: var(--ink); transform: translateY(-2px); }
/* Jedes Spiel. */
.gameCloud .anyGame { border-color: var(--ink); background: var(--coral); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); font-size: 10px; letter-spacing: .1em; }
.gameCloud .anyGame::before { content: "+"; margin-right: 8px; font-size: 13px; }
.gameCloud .anyGame:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* Community-Hosting. */
.hostingPitch { margin-top: 18px; padding: 46px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 7vw; align-items: start; background: var(--coral); color: var(--ink); }
.hostingPitch > div:first-child > span { font-size: 8px; font-weight: 950; letter-spacing: .18em; }
.hostingPitch h3 { margin: 16px 0 0; font-size: clamp(34px, 4.3vw, 62px); line-height: .94; letter-spacing: -.05em; }
.hostingPitch p { max-width: 720px; margin: 0 0 24px; font-size: 14px; line-height: 1.72; }
.hostingFacts { margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.hostingFacts span { border: 1px solid rgba(17,17,15,.4); padding: 8px 10px; font-size: 7px; font-weight: 950; letter-spacing: .11em; }
.hostingPitch .button { width: fit-content; }

.principles { display: grid; grid-template-columns: minmax(280px, .85fr) 1.35fr; column-gap: 8vw; }
.principles .sectionLabel { grid-column: 1 / -1; }
.principlesIntro h2 { max-width: 650px; font-size: clamp(43px, 5.5vw, 78px); }
.principleRows { border-top: 5px solid var(--ink); }
.principleRows article { display: grid; grid-template-columns: 42px 145px 1fr; gap: 14px; align-items: start; padding: 25px 6px; border-bottom: 1px solid var(--line-light); }
.principleRows span { color: var(--coral); font-size: 9px; font-weight: 1000; }
.principleRows h3 { margin: 0; font-size: 18px; }
.principleRows p { margin: 0; color: #625e56; font-size: 12px; line-height: 1.6; }

.rulesCta { position: relative; overflow: hidden; padding: 100px 8vw; display: grid; grid-template-columns: 1.1fr .7fr; gap: 8vw; align-items: end; background: var(--mint); color: var(--ink); }
.rulesCta .kicker { color: #2d6452; }
.rulesCta h2 { font-size: clamp(55px, 7vw, 100px); }
.rulesCopy { position: relative; z-index: 1; }
.rulesCopy p { margin: 0 0 30px; font-size: 14px; line-height: 1.7; }
.rulesMark { position: absolute; right: -2vw; top: -11vw; color: rgba(17,17,15,.065); font-size: 40vw; font-weight: 1000; line-height: 1; transform: rotate(-8deg); }

.eventsHead { margin-bottom: 60px; }
.eventsHead h2 { max-width: 1000px; }
.eventGrid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 5px solid var(--ink); }
.eventGrid article { min-height: 250px; padding: 25px 25px 20px 0; border-right: 1px solid var(--line-light); }
.eventGrid article:not(:first-child) { padding-left: 25px; }
.eventGrid article:last-child { border-right: 0; }
.eventGrid span { color: var(--coral); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.eventGrid h3 { max-width: 280px; margin: 75px 0 13px; font-size: 26px; letter-spacing: -.04em; }
.eventGrid p { max-width: 350px; margin: 0; color: #615e57; font-size: 12px; line-height: 1.65; }

.join { padding: 105px 8vw; display: grid; grid-template-columns: 1.15fr .75fr; gap: 8vw; align-items: end; background: var(--coral); color: var(--ink); }
.join .kicker { color: #762b1f; }
.join h2 em { color: var(--paper); font-style: normal; }
.joinCopy > p { max-width: 520px; margin: 0 0 34px; font-size: 16px; line-height: 1.65; }
.joinActions { display: flex; align-items: center; gap: 24px; }
.mailLink { border-bottom: 1px solid rgba(17,17,15,.45); padding: 10px 0; font-size: 11px; font-weight: 900; }

.siteFooter { padding: 62px 7vw 28px; background: var(--ink); color: #8f8b82; }
.footerTop { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 35px; align-items: center; }
.footerTop > p { margin: 0; font-size: 11px; line-height: 1.65; }
.footerLinks { display: flex; justify-content: flex-end; gap: 22px; color: var(--paper); font-size: 10px; font-weight: 900; }
.footerBottom { margin-top: 48px; padding-top: 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid rgba(255,255,255,.11); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.footerBottom nav { display: flex; gap: 24px; }
.footerBottom > span:last-child { justify-self: end; }

.legalHero { min-height: 380px; padding: 158px 8vw 62px; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(circle at 78% 28%, rgba(240,106,79,.15), transparent 24%), var(--ink); }
.legalHero h1 { margin: 23px 0 12px; color: var(--paper); font-size: clamp(62px, 10vw, 142px); font-weight: 1000; line-height: .82; letter-spacing: -.075em; }
.legalHero > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.legalContent { padding: 90px max(7vw, calc((100vw - 1280px) / 2)); background: var(--paper); color: var(--ink); }
.legalLead { display: grid; grid-template-columns: minmax(150px, .35fr) 1fr; gap: 5vw; padding-bottom: 65px; border-bottom: 5px solid var(--ink); }
.legalLead > span { padding-top: 9px; color: var(--coral); font-size: 9px; font-weight: 900; letter-spacing: .17em; }
.legalLead h2 { margin: 0 0 16px; font-size: clamp(39px, 5.4vw, 72px); line-height: .95; letter-spacing: -.055em; }
.legalLead p { max-width: 700px; color: #5f5b54; font-size: 14px; line-height: 1.72; }
.legalContent address { color: #413e38; font-size: 14px; font-style: normal; line-height: 1.75; }
.legalContent a { color: #9c3422; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legalSection { display: grid; grid-template-columns: minmax(230px, .42fr) 1fr; gap: 5vw; padding: 38px 0; border-bottom: 1px solid var(--line-light); }
.legalSection h2 { margin: 0; font-size: clamp(23px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -.04em; }
.legalSection > p, .legalSection > address { grid-column: 2; max-width: 760px; margin: 0 0 12px; color: #5f5b54; font-size: 14px; line-height: 1.75; }
.legalSection > p:last-child { margin-bottom: 0; }
.legalHighlight { margin: 48px 0; padding: 45px; grid-template-columns: 1fr; background: var(--mint); border: 0; }
.legalHighlight > span { color: #28604e; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.legalHighlight h2 { max-width: 900px; font-size: clamp(32px, 4.5vw, 60px); }
.legalHighlight > p { grid-column: 1; max-width: 780px; color: #315347; }
.legalDate { color: #8d3a2a !important; font-size: 10px !important; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

/* Responsive. */
@media (max-width: 1240px) {
  .siteHeader { grid-template-columns: 1fr auto; }
  .desktopNav { display: none; }
  .headerActions { margin-right: 50px; }
  .mobileMenu { display: block; position: absolute; right: 4vw; }
  .mobileMenu summary { width: 34px; height: 34px; display: grid; align-content: center; gap: 7px; cursor: pointer; list-style: none; }
  .mobileMenu summary::-webkit-details-marker { display: none; }
  .mobileMenu summary span { display: block; width: 28px; height: 2px; background: var(--paper); transition: transform .2s ease; }
  .mobileMenu[open] summary span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .mobileMenu[open] summary span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .mobileMenu nav { position: fixed; top: 88px; right: 0; left: 0; padding: 22px 5vw 30px; display: grid; background: var(--ink); border-bottom: 1px solid var(--line-dark); box-shadow: 0 20px 40px rgba(0,0,0,.25); }
  .mobileMenu nav a { padding: 15px 0; border-bottom: 1px solid var(--line-dark); font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  .mobileMenu nav .navDivider { width: 100%; height: 1px; margin: 10px 0; background: rgba(255,255,255,.28); }
  .mobileMenu nav a.isCurrent { padding-left: 12px; border-left: 3px solid currentColor; }
}

@media (max-width: 1020px) {
  .hero { min-height: 780px; }
  .heroSideNote { display: none; }
  .heroBottom { grid-template-columns: 1fr; }
  .serverStatusCta { grid-template-columns: 1fr; gap: 45px; }
  .about { grid-template-columns: 1fr 1fr; }
  .aboutLead { grid-column: 1 / -1; }
  .aboutCopy { grid-column: 2; }
  .numbers { grid-column: 1 / -1; }
  .projectGrid { grid-template-columns: repeat(2, 1fr); }
  .multigamingIntro, .hostingPitch { grid-template-columns: 1fr; gap: 34px; }
  .principles { grid-template-columns: 1fr; }
  .principlesIntro { margin-bottom: 50px; }
  .rulesCta, .join { grid-template-columns: 1fr; align-items: start; }
  .rulesCopy, .joinCopy { max-width: 650px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 74px; }
  .siteHeader { height: 74px; padding: 0 5vw; }
  .brandLogoFrame { width: 40px; height: 40px; border-radius: 10px; }
  .brandText { font-size: 12px; }
  .brandText small { font-size: 6px; }
  .headerDiscord { display: none; }
  .headerActions { margin-right: 44px; }
  .languageSwitch button { min-width: 28px; padding: 7px 5px; }
  .mobileMenu { right: 5vw; }
  .mobileMenu nav { top: 74px; }
  .hero { min-height: 690px; }
  .heroInner { padding: 126px 6vw 66px; }
  .hero h1 { margin-top: 28px; font-size: 16.2vw; }
  .heroActions { align-items: stretch; flex-direction: column; gap: 12px; }
  .button { min-width: 0; width: 100%; }
  .textLink { align-self: flex-start; }
  .valueStrip { grid-template-columns: 1fr 1fr; }
  .valueStrip > div { min-height: 90px; padding: 20px 5vw; border-bottom: 1px solid rgba(17,17,15,.33); }
  .valueStrip > div:nth-child(2) { border-right: 0; }
  .serverStatusCta { padding: 70px 6vw; }
  .serverStatusFacts { grid-template-columns: 1fr; }
  .serverStatusFacts span, .serverStatusFacts span + span { padding: 13px 0; border-left: 0; border-bottom: 1px solid rgba(17,17,15,.25); }
  .serverStatusFacts span:last-child { border-bottom: 0; }
  .about, .projects, .principles, .events { padding: 75px 6vw; }
  .sectionLabel { margin-bottom: 48px; }
  .about { grid-template-columns: 1fr; }
  .aboutCopy { grid-column: 1; }
  .numbers { grid-template-columns: 1fr; margin-top: 55px; }
  .numbers div, .numbers div:not(:first-child) { padding: 19px 0; display: grid; grid-template-columns: 125px 1fr; align-items: end; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .numbers div:last-child { border-bottom: 0; }
  .numbers strong { font-size: 51px; }
  .projectsHead { grid-template-columns: 1fr; gap: 28px; }
  .projectGrid { grid-template-columns: 1fr; }
  .projectCard { min-height: 330px; }
  .projectNote { grid-template-columns: 1fr; gap: 12px; }
  .multigamingIntro, .hostingPitch { padding: 28px; }
  .multigamingIntro h3 { font-size: 42px; }
  .gameCloud { padding: 20px 28px 28px; }
  .gameCloud span { padding: 9px 10px; font-size: 8px; }
  .principleRows article { grid-template-columns: 34px 1fr; }
  .principleRows p { grid-column: 2; }
  .rulesCta, .join { padding: 76px 6vw; }
  .eventGrid { grid-template-columns: 1fr; }
  .eventGrid article, .eventGrid article:not(:first-child) { min-height: 0; padding: 26px 0; border-right: 0; border-bottom: 1px solid var(--line-light); }
  .eventGrid h3 { margin-top: 38px; }
  .joinActions { align-items: stretch; flex-direction: column; }
  .mailLink { align-self: flex-start; }
  .siteFooter { padding: 52px 6vw 25px; }
  .footerTop { grid-template-columns: 1fr; }
  .footerLinks { justify-content: flex-start; flex-wrap: wrap; }
  .footerBottom { grid-template-columns: 1fr; gap: 15px; }
  .footerBottom nav { grid-row: 1; }
  .footerBottom > span:last-child { justify-self: start; }
  .legalHero { min-height: 330px; padding: 132px 6vw 52px; }
  .legalContent { padding: 68px 6vw; }
  .legalLead, .legalSection { grid-template-columns: 1fr; gap: 22px; }
  .legalSection > p, .legalSection > address { grid-column: 1; }
  .legalHighlight { margin: 35px 0; padding: 32px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Lesbare Akzente. */
:root {
  --coral-readable: #ae503c;
  --blue-readable: #1f3d54;
  --mint-readable: #295849;
  --coral-on-coral: #4c2018;
}

.valueStrip span { color: var(--coral-on-coral); }
.heroSideNote { color: #8f8b82; }
.buttonLight b { color: var(--coral-readable); }
.serverStatusCta .kicker { color: var(--blue-readable); }
.serverStatusIntro h2 em,
.join h2 em {
  display: inline-block;
  padding: .02em .08em .06em;
  background: var(--ink);
  color: var(--paper);
}
.sectionLight .sectionLabel span,
.sectionLight .kicker,
.sectionLight .aboutLead h2 em,
.sectionLight .eventsHead h2 em,
.sectionLight .inkLink span,
.sectionLight .numbers strong,
.multigamingBlock .kicker,
.multigamingIntro h3 em,
.multigamingBlock .inkLink span,
.principleRows span,
.eventGrid span,
.legalLead > span { color: var(--coral-readable); }
.sectionLabelDark span { color: var(--coral); }
.rulesCta .kicker,
.legalHighlight > span { color: var(--mint-readable); }
.join .kicker { color: var(--coral-on-coral); }