:root { --area-accent: #ef4a61; --area-muted: #bfb1b8; --area-border: #773746; --area-surface: #160e17; }
.area-context { margin-top: 1.5rem; display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1.6rem; padding: .9rem 1.2rem; background: var(--area-surface); border: 1px solid var(--area-border); border-left: 3px solid var(--area-accent); }
.area-context a { display: inline-flex; align-items: center; gap: .6rem; color: #e4edf6; text-decoration: none; font-size: .85rem; }
.area-context a:first-child { font-weight: 700; }
.area-context-exit { margin-left: auto; }
.area-context .area-icon { width: 28px; height: 28px; }
.area-masthead { position: relative; overflow: hidden; padding: 2.5rem; border: 1px solid var(--area-border); background: linear-gradient(115deg, var(--area-surface), #080d17); margin-bottom: 1.5rem; }
.area-masthead h1 { max-width: 16ch; position: relative; font-size: clamp(2.25rem, 5vw, 4rem); margin-bottom: 1rem; line-height: 1.06; letter-spacing: -.04em; }
.area-masthead .section-intro { max-width: 58ch; position: relative; }
.area-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--area-muted); }
.area-stats span { border-left: 2px solid var(--area-accent); padding-left: .7rem; }
.area-command-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.area-local-command { border-top: 2px solid var(--area-accent); }
.area-global-command h2 { font-size: 1.1rem; }
.area-global-command .area-person { padding: .6rem 0; background: transparent; border: 0; }
.area-person { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem; color: #eef2f6; background: #08101ab0; border: 1px solid var(--area-border); border-radius: .25rem; text-align: left; cursor: pointer; font: inherit; }
.area-person span { font-size: .8rem; color: var(--area-muted); }
.area-person strong { font-size: 1rem; }
.area-person:hover { border-color: var(--area-accent); background: var(--area-surface); }
.area-local-command .area-person + .area-person { margin-top: .6rem; }
.area-vote-card { margin-top: 1.1rem; padding: 1.25rem; background: #080d1599; border: 1px solid var(--area-border); }
.area-vote-card h3 { margin: .6rem 0; }
.area-vote-card form + form, #area-lead-panel form + form { margin-top: 1.5rem; }
.area-page > .surface, .area-page > div > .surface { margin-bottom: 1.5rem; }
.patron-report { margin: 1rem 0; padding: .8rem 1rem; border-left: 2px solid var(--area-accent); background: #ffffff06; }
.patron-report h4 { margin: .2rem 0 .6rem; }
.trial-extension-note { font-size: .85rem; color: var(--area-accent); }
.trial-history { margin-top: 1.5rem; }
details > summary { cursor: pointer; padding: .8rem 0; color: #f0edf2; font-weight: 600; }
.section-columns { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1.2rem; }
.section-columns > .surface { min-width: 0; }
fieldset { min-width: 0; }
#availability-weekdays, #area-request-founders { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
#area-request-founders { flex-direction: column; max-height: 25rem; overflow: auto; }
.availability-entry { border-top: 1px solid var(--area-border); padding: 1rem 0; }
.availability-entry p { font-size: .8rem; }
.calendar-rule { padding: 1rem; border-left: 3px solid var(--area-accent); background: var(--area-surface); font-size: .9rem; }
.calendar-event-list { margin: 1.2rem 0; display: grid; gap: 1rem; }
.calendar-event-dot { border: 0; padding: .25rem .35rem; display: block; width: 100%; background: #25244e; border-left: 2px solid #989cfe; text-align: left; color: #f4f5ff; font: inherit; font-size: .65rem; line-height: 1.4; cursor: pointer; overflow-wrap: anywhere; margin-top: .3rem; }
.calendar-event-dot:hover { background: #373362; }
.calendar-day { min-height: 5rem; min-width: 0; }
.calendar-availability { display: block; margin-top: .3rem; font-size: .6rem; color: #f6b5ad; }
.meeting-agenda { padding-left: 1.3rem; }
.calendar-event h3 { margin: .4rem 0; }
.calendar-event { scroll-margin: 2rem; }
.member-prompts { margin-top: 1.3rem; }
.member-prompt { display: block; padding: .9rem 1.2rem; border: 1px solid #b29949; background: #322812; color: #ffecb2; text-decoration: none; font-size: .9rem; }
.dossier-trial { padding: 1.1rem 1.6rem; border-top: 1px solid #565565; background: #12131b; }
.dossier-trial h3 { margin-top: 0; font-size: 1rem; }
.dossier-trial p { margin: .4rem 0; font-size: .85rem; }
.updates-wrap { position: relative; }
.updates-toggle { position:relative; width: 2.65rem; height: 2.65rem; border: 1px solid #f69e51; border-radius: 50%; background: #542417; color: #ffcf8d; font: 700 1.5rem Georgia, serif; cursor: pointer; box-shadow: 0 0 14px #e4832625; }
.updates-count{position:absolute;right:-.45rem;top:-.45rem;min-width:1.3rem;height:1.3rem;padding:0 .25rem;border-radius:1rem;background:#ed2336;color:#fff;font:700 .7rem/1.3rem system-ui;border:2px solid #100d15}.message-layout{display:grid;grid-template-columns:minmax(17rem,.8fr) minmax(20rem,1.2fr);gap:1.2rem}.message-list{display:grid;gap:.8rem;margin-top:.8rem}.message-card{padding:1rem;border:1px solid #493942;background:#120f16}.message-card[data-unread="true"]{border-left:4px solid #ed2336}.message-card h3{margin:.25rem 0}.message-meta{font-size:.75rem;color:#c8a8a8}.message-actions{display:flex;gap:.5rem;flex-wrap:wrap}.message-tabs{display:flex;gap:.5rem}@media(max-width:760px){.message-layout{grid-template-columns:1fr}}
.updates-toggle:hover { background: #7b321b; }
.updates-panel { position: absolute; top: calc(100% + .8rem); right: 0; z-index: 30; width: min(25rem, calc(100vw - 2.5rem)); max-height: 75vh; overflow: auto; padding: 1.2rem; background: #100d15; border: 1px solid #9b6347; box-shadow: 0 15px 45px #000a; }
.updates-panel h2 { margin: .2rem 0 1rem; font-size: 1.05rem; }
.update-item { display: block; border-top: 1px solid #40303c; color: #eee7ee; padding: .85rem .2rem; text-decoration: none; font-size: .875rem; line-height: 1.5; }
.update-item span { display: block; color: #d5a66d; text-transform: uppercase; letter-spacing: .1em; font-size: .65rem; }
.update-item:hover { color: #ffd596; }
#whatsapp-admin .surface, #whatsapp-admin > form { margin-top: 1.2rem; }
#whatsapp-admin > form { padding: 1.4rem; background: var(--area-surface); border: 1px solid var(--area-border); }
#council-agenda, #council-admissions { display: grid; gap: 1rem; margin: 1.2rem 0; }
body[data-area-theme] { background-color: #070c15; background-image: radial-gradient(ellipse at 80% 5%, #12375788, transparent 60%), linear-gradient(0deg, #070c15, #0c1422); color: #dce6f1; background-attachment: fixed; }
body[data-area-theme] .clan-header { border-color: var(--area-border); background: #070b13f2; }
body[data-area-theme] .surface { background: var(--area-surface); border-color: var(--area-border); }
body[data-area-theme] .panel-eyebrow, body[data-area-theme] .card-eyebrow { color: var(--area-accent); }
body[data-area-theme] .secondary-button { border-color: var(--area-border); background: #0b141e; color: #dee9f5; }
body[data-area-theme] .primary-button { background: var(--area-accent); color: #070d15; border-color: var(--area-accent); }
body[data-area-theme] input, body[data-area-theme] textarea, body[data-area-theme] select { background-color: #070e17; border-color: var(--area-border); color: #e6eef7; }
body[data-area-theme] a:focus-visible, body[data-area-theme] button:focus-visible { outline: 2px solid var(--area-accent); outline-offset: 3px; }
body[data-area-theme] .clan-navigation a:hover, body[data-area-theme] .clan-navigation a[aria-current] { background: #102237; box-shadow: inset 0 -2px var(--area-accent); }
body[data-area-theme] .nav-submenu { background: #091523; border-color: var(--area-border); }
body[data-area-theme] .subtle { color: var(--area-muted); }
body[data-area-theme="space"] { --area-accent: #88d2ff; --area-muted: #9eafc5; --area-border: #334c6d; --area-surface: #0b1524e8; background-image: radial-gradient(circle at 16% 20%, #99cfff66 1px, transparent 2px), radial-gradient(circle at 64% 58%, #bad2ff4d 1px, transparent 2px), radial-gradient(ellipse at 85% 15%, #203657, transparent 65%), linear-gradient(180deg, #070c19, #090c16); background-size: 193px 167px, 271px 243px, cover, cover; }
body[data-area-theme="space"] .area-masthead { border-radius: 0 2rem 0 0; min-height: 18rem; padding-right: 27%; background: linear-gradient(115deg, #0c182dcc 55%, #151634); }
body[data-area-theme="space"] .area-masthead:after { content: ''; position: absolute; width: 16rem; height: 16rem; right: -4rem; top: 3rem; border: 1px solid #647fb277; border-radius: 50%; box-shadow: 0 0 0 2.6rem #7fa1c308, 0 0 0 2.65rem #5975a133, 0 0 0 5.25rem #7fa1c306, 0 0 0 5.3rem #5975a129; pointer-events: none; }
body[data-area-theme="space"] .area-stats, body[data-area-theme="space"] .panel-eyebrow { font-family: ui-monospace, monospace; }
body[data-area-theme="shooter"] { --area-accent: #edb267; --area-muted: #b7b4ab; --area-border: #645341; --area-surface: #1a1a19e8; background-image: repeating-linear-gradient(130deg, #26232110 0 1px, transparent 1px 32px), linear-gradient(180deg, #141716, #080c0b); }
body[data-area-theme="shooter"] .area-masthead { border-left: .5rem solid #edb267; background: linear-gradient(100deg, #232621, #141917); }
body[data-area-theme="shooter"] .area-masthead h1 { text-transform: uppercase; font-weight: 900; letter-spacing: -.06em; }
body[data-area-theme="strategy"] { --area-accent: #d4c282; --area-muted: #afb7a2; --area-border: #58624a; --area-surface: #151e19ed; background-image: linear-gradient(#87a87a0b 1px, transparent 1px), linear-gradient(90deg, #87a87a0b 1px, transparent 1px), linear-gradient(#132017, #090e0c); background-size: 44px 44px, 44px 44px, cover; }
body[data-area-theme="strategy"] .area-masthead { background: linear-gradient(100deg, #243426, #121f19); border: 1px solid #86905e; }
body[data-area-theme="strategy"] .area-masthead h1 { font-family: Georgia, serif; letter-spacing: -.02em; }
body[data-area-theme="rpg"] { --area-accent: #debd70; --area-muted: #c3b2a9; --area-border: #735449; --area-surface: #25171cf0; background-image: radial-gradient(ellipse at top, #5c263b, #100d17 75%); }
body[data-area-theme="rpg"] .area-masthead { border: 1px solid #ad8855; background: linear-gradient(110deg, #43212f, #1a1423); }
body[data-area-theme="rpg"] .area-masthead h1 { font-family: Georgia, serif; }
body[data-area-theme="racing"] { --area-accent: #ff9755; --area-muted: #bdb7b3; --area-border: #685345; --area-surface: #1c1917f0; background-image: linear-gradient(150deg, #3b2920, #090c11 65%); }
body[data-area-theme="racing"] .area-masthead { border-left: 1rem solid #ff9755; background: repeating-linear-gradient(140deg, #33241e, #33241e 2rem, #271d1c 2rem, #271d1c 4rem); }
body[data-area-theme="racing"] .area-masthead h1 { font-style: italic; text-transform: uppercase; }
body[data-area-theme="sport"] { --area-accent: #88afff; --area-muted: #aebbd1; --area-border: #3b5380; --area-surface: #0d1a31f0; background-image: radial-gradient(ellipse at top, #133866, #070e1a 75%); }
body[data-area-theme="sport"] .area-masthead { background: linear-gradient(100deg, #123667, #0b172c); border-radius: 1rem; }
body[data-area-theme="simulation"] { --area-accent: #78d9c6; --area-muted: #a5bcb6; --area-border: #3e6a64; --area-surface: #10211fed; background-image: linear-gradient(#13312d, #070e11); }
body[data-area-theme="simulation"] .area-masthead { background: linear-gradient(100deg, #143831, #0c1e23); border-top: .35rem solid #78d9c6; }
@media (max-width: 700px) { .area-masthead { padding: 1.5rem; } .area-command-layout, .section-columns { grid-template-columns: 1fr; } .area-context { padding: .75rem; gap: .75rem; } .area-context-exit { margin-left: 0; } body[data-area-theme="space"] .area-masthead { padding-right: 1.5rem; } .area-masthead:after { opacity: .2; } .calendar-day { min-height: 4rem; padding: .3rem; } .calendar-event-dot { font-size: .55rem; } .updates-panel { position: fixed; top: 5.5rem; right: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
/* Area game catalog and compact administration */
.area-game-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:1rem; }
.area-game-card { padding:1.1rem; border:1px solid var(--line,#424652); border-radius:.5rem; background:rgba(0,0,0,.18); min-width:0; }
.area-game-card h3 { margin:0 0 .7rem; font-size:1.15rem; }
.area-game-card details,.council-workspace details { margin-top:1rem; }
.game-member-count { font-size:.9rem; opacity:.85; }
.game-create { margin-top:1.2rem; }
.council-workspace { margin-bottom:1rem; }
.council-workspace summary,.game-create summary,.area-game-card summary { cursor:pointer; font-size:.95rem; padding:.6rem 0; font-weight:650; }
.meeting-minutes { border-top:1px solid var(--line,#424652); margin-top:1rem; padding-top:.5rem; }
.meeting-warning { padding:.8rem; border-left:3px solid #efa94d; background:rgba(239,169,77,.09); }
.council-poll-entry { margin:.7rem 0; padding:.8rem; border:1px solid var(--line,#424652); }
.admin-grid.admin-compact { grid-template-columns:1fr; }
.admin-group { border:1px solid var(--line,#424652); border-radius:.5rem; overflow:hidden; }
.admin-group>summary { padding:1rem 1.2rem; font-size:1rem; font-weight:700; cursor:pointer; background:rgba(255,255,255,.035); }
.admin-group-content { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1rem; padding:1rem; }
.view-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:1rem; }
.view-stat { display:flex; flex-direction:column; gap:.4rem; border:1px solid var(--line,#424652); padding:1rem; border-radius:.4rem; font-size:.9rem; }
.view-stat strong { font-size:1.8rem; }

/* Area redesign: clear hierarchy, scan-friendly groups and calm reading rhythm. */
.area-page{max-width:92rem!important;padding-inline:clamp(1rem,3vw,3rem)!important;padding-top:clamp(1rem,3vw,2.5rem)!important}
.area-page .area-masthead{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,24rem);gap:2rem;align-items:center;min-height:20rem;margin-bottom:2rem;padding:clamp(1.5rem,4vw,3rem)!important;border-radius:1.2rem!important;box-shadow:0 1.5rem 4rem #0005}
.area-page .area-masthead h1{font-size:clamp(2.4rem,5vw,4.8rem)!important;max-width:12ch;margin:.35rem 0 1rem}
.area-page .area-detail-logo{grid-column:2;grid-row:1/6;width:min(100%,240px);height:auto;justify-self:center}
.area-page .area-detail-intro{font-size:1.08rem!important;line-height:1.7!important;max-width:55ch!important}
.area-page .area-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1.5rem 0!important;text-transform:none;letter-spacing:0}
.area-page .area-stats span{display:block;padding:.8rem 1rem!important;border:1px solid var(--area-border);border-left:3px solid var(--area-accent);border-radius:.7rem;background:#0003;font-size:.9rem}
.area-page #area-games{margin:0 0 2rem}
.area-page #area-games:before{content:'Spiele im Bereich';display:block;margin:0 0 1rem;color:var(--area-accent);font-size:1.35rem;font-weight:750;letter-spacing:-.01em}
.area-page .area-game-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:1.1rem}
.area-page .area-game-card{min-height:12rem;padding:1.35rem!important;border-radius:.9rem!important;box-shadow:0 .8rem 2rem #0003;transition:transform .18s ease,box-shadow .18s ease}
.area-page .area-game-card:hover{transform:translateY(-3px);box-shadow:0 1.1rem 2.5rem #0005}
.area-page .area-game-card h3{font-size:1.25rem!important;line-height:1.25}
.area-page .area-extra{margin:1rem 0;border-radius:.9rem;padding:0 1.25rem 1.25rem;box-shadow:0 .6rem 1.8rem #0002}
.area-page .area-extra>summary{padding:1.1rem 0;font-size:1.05rem}
.area-page>.surface{border-radius:.9rem!important;padding:clamp(1.2rem,2vw,2rem)!important;box-shadow:0 .6rem 1.8rem #0002}
.area-page>.surface h2{margin-top:0;font-size:1.4rem}
.area-page .member-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:.8rem}
@media(max-width:700px){.area-page .area-masthead{grid-template-columns:1fr;gap:1rem}.area-page .area-detail-logo{grid-column:1;grid-row:auto;width:150px;order:-1}.area-page .area-stats{grid-template-columns:1fr}.area-page .area-masthead h1{max-width:none}}