/* V3.1.2 – einheitliches, benutzerabhängiges Design über alle App-Bereiche. */
:root{
  --user-primary:#175cd3;
  --user-primary-contrast:#fff;
  --user-accent:#0d8b68;
  --user-accent-contrast:#fff;
  --user-bg:#07111d;
  --user-surface:#0f1f31;
  --user-radius:15px;
  --app-bg:var(--user-bg);
  --app-surface:var(--user-surface);
  --app-surface-2:color-mix(in srgb,var(--user-surface) 86%,var(--user-bg));
  --app-surface-3:color-mix(in srgb,var(--user-surface) 74%,var(--user-primary));
  --app-border:color-mix(in srgb,var(--user-surface-contrast,#fff) 16%,transparent);
  --app-text:var(--user-surface-contrast,#fff);
  --app-muted:color-mix(in srgb,var(--app-text) 66%,transparent);
  --app-shadow:0 18px 54px rgba(0,0,0,.22);
  --v2-bg:var(--app-bg);
  --v2-surface:var(--app-surface);
  --v2-surface-2:var(--app-surface-2);
  --v2-text:var(--app-text);
  --v2-muted:var(--app-muted);
  --v2-border:var(--app-border);
  --background:var(--app-bg);
  --surface:var(--app-surface);
  --primary:var(--user-primary);
  --primary-light:var(--app-surface-2);
  --accent:var(--user-accent);
  --text:var(--app-text);
  --muted:var(--app-muted);
  --border:var(--app-border);
  --radius:var(--user-radius);
}

html[data-theme="light"]{
  --app-surface-2:color-mix(in srgb,var(--user-surface) 90%,#dfe7ef);
  --app-border:rgba(12,31,51,.14);
  --app-shadow:0 18px 54px rgba(22,48,75,.11);
}

html[data-font-size="small"]{font-size:14px}
html[data-font-size="normal"]{font-size:16px}
html[data-font-size="large"]{font-size:18px}
html[data-font-size="xlarge"]{font-size:20px}

html[data-density="compact"]{--app-space:.78}
html[data-density="normal"]{--app-space:1}
html[data-density="spacious"]{--app-space:1.22}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

body:not(.app-scoreboard){
  background:var(--app-bg)!important;
  color:var(--app-text)!important;
}

body:not(.app-scoreboard) :where(.page,.center-main,.profile-v2-main,.auth-main){color:var(--app-text)}

/* alte feste Blau-/Weißflächen neutralisieren */
body:not(.app-scoreboard) :where(
  .panel,.wizard-shell,.management-card,.mini-profile-card,.profile-view,
  .center-card,.center-panel,.owner-card,.spectator-tournament-card,
  .tournament-card,.assignment-dialog,.past-tournaments-section,
  .empty-state,.notice,.wizard-conditional-settings,.profile-v2-sidebar,
  .profile-v2-content,.profile-stat-card,.profile-data-card,.profile-card
){
  background:var(--app-surface)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
  border-radius:var(--user-radius)!important;
  box-shadow:var(--app-shadow);
}

body:not(.app-scoreboard) :where(
  input:not([type="color"]),textarea,select,.segmented,.auth-tabs,
  .wizard-option-card>span,.admin-sport-choice>label>span,.assignment-result,
  .assignment-chip
){
  background:var(--app-surface-2)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
}

body:not(.app-scoreboard) :where(input,textarea,select)::placeholder{color:var(--app-muted)!important}
body:not(.app-scoreboard) :where(label,small,.subtitle,.section-support-copy,.profile-section-heading p,.auth-card-head p){color:var(--app-muted)}

.button,.auth-button{border-radius:calc(var(--user-radius) * .78)!important}
.button-primary,.auth-button-primary,
.admin-sport-choice input:checked+span,
.wizard-option-card input:checked+span,
.segmented input:checked+span{
  background:var(--user-primary)!important;
  color:var(--user-primary-contrast)!important;
  border-color:color-mix(in srgb,var(--user-primary) 72%,transparent)!important;
}
.button-secondary,.auth-button-secondary{
  background:var(--app-surface-2)!important;
  color:var(--app-text)!important;
  border-color:var(--app-border)!important;
}

.site-header,.profile-v2-hero,.center-hero{
  background:
    radial-gradient(circle at 84% 15%,color-mix(in srgb,var(--user-accent) 42%,transparent),transparent 35rem),
    linear-gradient(135deg,color-mix(in srgb,var(--user-primary) 58%,var(--user-bg)),color-mix(in srgb,var(--user-accent) 43%,var(--user-bg)))!important;
  color:#fff!important;
  border-color:color-mix(in srgb,#fff 12%,transparent)!important;
}
.site-header :where(.subtitle,.eyebrow),.profile-v2-hero :where(p,small){color:rgba(255,255,255,.78)!important}

/* Sportwahl: keine weißen Flecken mehr. */
.admin-sport-choice label span{
  min-height:54px;
  display:grid;
  place-items:center;
  background:var(--app-surface-2)!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-border)!important;
  border-radius:var(--user-radius)!important;
}
.admin-sport-choice input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--user-primary) 45%,transparent);outline-offset:2px}

/* Einheitliche Navigation */
.v3-quick-nav{display:none!important}
.global-app-nav{
  position:sticky;top:0;z-index:1000;
  min-height:58px;padding:7px clamp(10px,2.5vw,28px);
  display:flex;align-items:center;gap:18px;justify-content:space-between;
  background:color-mix(in srgb,var(--app-surface) 92%,transparent);
  border-bottom:1px solid var(--app-border);backdrop-filter:blur(18px);
  color:var(--app-text);box-shadow:0 8px 30px rgba(0,0,0,.12)
}
.global-app-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--app-text);min-width:max-content}
.global-app-brand-mark{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--user-primary);color:var(--user-primary-contrast);font-weight:950}
.global-app-brand-copy{display:grid;line-height:1.05}.global-app-brand-copy strong{font-size:.94rem}.global-app-brand-copy small{font-size:.69rem;color:var(--app-muted);margin-top:4px}
.global-app-nav-links{display:flex;align-items:center;gap:5px;overflow:auto;scrollbar-width:none}.global-app-nav-links::-webkit-scrollbar{display:none}
.global-app-nav-link{padding:9px 11px;border-radius:11px;text-decoration:none;color:var(--app-muted);font-weight:800;white-space:nowrap}
.global-app-nav-link:hover{background:var(--app-surface-2);color:var(--app-text)}
.global-app-nav-link.is-active{background:var(--user-primary);color:var(--user-primary-contrast)}
.global-mobile-nav{display:none}

/* Login/Register folgt jetzt ebenfalls dem Profil-Design. */
.auth-page-v31{background:var(--app-bg)!important;color:var(--app-text)!important}
.auth-main{background:var(--app-bg)!important}
.auth-card{background:var(--app-surface)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;box-shadow:var(--app-shadow)!important}
.auth-card-head h2,.auth-active h2,.auth-form label,.auth-info-strip strong{color:var(--app-text)!important}
.auth-tabs{background:var(--app-surface-2)!important}
.auth-tabs button{color:var(--app-muted)!important}
.auth-tabs button.is-active{background:var(--user-primary)!important;color:var(--user-primary-contrast)!important;box-shadow:none!important}
.auth-form input,.auth-form select{background:var(--app-surface-2)!important;color:var(--app-text)!important;border-color:var(--app-border)!important}
.auth-form input:focus,.auth-form select:focus{background:var(--app-surface)!important}
.auth-info-strip{background:color-mix(in srgb,var(--user-accent) 12%,var(--app-surface))!important;border-color:color-mix(in srgb,var(--user-accent) 38%,var(--app-border))!important}
.auth-info-strip p,.auth-footnote{color:var(--app-muted)!important}
.auth-brand{background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--user-accent) 38%,transparent),transparent 28rem),linear-gradient(145deg,var(--user-bg),color-mix(in srgb,var(--user-primary) 35%,var(--user-bg)))!important}
.auth-brand .auth-kicker,.auth-benefits article>span{color:color-mix(in srgb,var(--user-accent) 65%,#fff)!important}

/* Profil – mehr Designoptionen. */
.theme-preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px}
.theme-preset{border:1px solid var(--app-border);border-radius:var(--user-radius);padding:11px;background:var(--app-surface-2);color:var(--app-text);cursor:pointer;text-align:left;display:grid;gap:8px}
.theme-preset:hover{border-color:var(--user-primary)}
.theme-preset-swatches{display:flex;gap:5px}.theme-preset-swatches i{width:24px;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,.15)}
.color-grid.four-colors{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.appearance-preview-v311{padding:16px;background:var(--app-bg);border:1px solid var(--app-border);border-radius:var(--user-radius);display:grid;gap:11px}
.appearance-preview-v311 .preview-card{padding:14px;background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--user-radius)}

.registration-state{display:grid;gap:5px;margin-top:10px;padding:12px 13px;border-radius:12px;background:var(--app-surface-2);border:1px solid var(--app-border);color:var(--app-muted)}
.registration-state.is-error{border-color:color-mix(in srgb,#e74b4b 55%,var(--app-border));color:#ffb9b9}
.registration-state.is-ok{border-color:color-mix(in srgb,#2ecb8d 50%,var(--app-border));color:#9cebc9}

@media(max-width:760px){
  body:not(.app-scoreboard){padding-bottom:70px!important}
  .global-app-nav{position:relative;min-height:52px}.global-app-nav-links{display:none}.global-app-brand{margin:auto}
  .global-mobile-nav{position:fixed;z-index:1100;left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));display:flex;gap:4px;padding:5px;background:color-mix(in srgb,var(--app-surface) 94%,transparent);border:1px solid var(--app-border);border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.3);backdrop-filter:blur(18px)}
  .global-mobile-nav a{flex:1;min-width:0;text-align:center;text-decoration:none;color:var(--app-muted);font-size:.72rem;font-weight:850;padding:10px 4px;border-radius:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .global-mobile-nav a.is-active{background:var(--user-primary);color:var(--user-primary-contrast)}
  .site-header{border-radius:0!important}
}


/* V3.1.2 – eine Hauptnavigation, klar getrennte Bereichsnavigation. */
.public-role-nav,.v3-quick-nav,.center-hero>nav{display:none!important}
.site-header,.center-hero,.profile-v2-hero{border-radius:0 0 calc(var(--user-radius)*1.25) calc(var(--user-radius)*1.25)!important}
.site-header,.center-hero{padding-top:clamp(22px,4vw,48px)!important}
.profile-v2-hero-inner{max-width:1180px;margin:0 auto}
.header-actions.is-context-only{display:flex;gap:8px;flex-wrap:wrap}
.profile-nav::before,.center-tabs::before,.tournament-workflow::before,.referee-quick-nav::before{content:"Bereich";display:block;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--app-muted);margin:0 0 7px}
.center-tabs{border:1px solid var(--app-border);padding:6px;border-radius:var(--user-radius);background:var(--app-surface-2)}
.center-tabs button{border-radius:calc(var(--user-radius)*.72)!important}
.branding-editor{display:grid;gap:14px;padding:16px;margin-top:16px;background:var(--app-surface-2);border:1px solid var(--app-border);border-radius:var(--user-radius)}
.branding-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.branding-field{display:grid;gap:9px}
.branding-preview{min-height:130px;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--app-surface) 84%,var(--app-bg));border:1px dashed color-mix(in srgb,var(--app-text) 24%,transparent);border-radius:calc(var(--user-radius)*.85)}
.branding-preview.logo-preview{min-height:150px}.branding-preview.banner-preview{aspect-ratio:16/5;min-height:120px}.branding-preview img{display:block;max-width:100%;max-height:220px;object-fit:contain}.branding-preview.banner-preview img{width:100%;height:100%;object-fit:cover}.branding-preview [data-branding-empty]{color:var(--app-muted);font-size:.88rem;text-align:center;padding:18px}.branding-help{color:var(--app-muted);font-size:.84rem;line-height:1.45}.branding-actions{display:flex;gap:8px;flex-wrap:wrap}
.spectator-tournament-brand-row{display:flex;gap:12px;align-items:center;margin-bottom:10px}.spectator-tournament-logo{width:48px;height:48px;border-radius:12px;background:var(--app-surface-2);border:1px solid var(--app-border);object-fit:contain;padding:4px}.tournament-brand-banner{width:100%;max-height:220px;object-fit:cover;border-radius:var(--user-radius);border:1px solid var(--app-border);margin-bottom:14px}
@media(max-width:760px){.center-tabs{display:flex;overflow-x:auto;scrollbar-width:none}.center-tabs::-webkit-scrollbar{display:none}.center-tabs::before{display:none}.center-tabs button{flex:0 0 auto}.branding-grid{grid-template-columns:1fr}}

.profile-community-brand{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--app-muted);font-size:.82rem}.profile-community-brand img{width:34px;height:34px;object-fit:contain;border-radius:9px;background:var(--app-surface-2);border:1px solid var(--app-border);padding:3px}