@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Permanent+Marker&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink-900:#0C0D0E;
  --ink-800:#141516;
  --ink-700:#1D1E1F;
  --ink-600:#2A2B2C;
  --wood:#5C4A32;
  --wood-light:#7A6242;
  --olive:#454A38;
  --stencil:#C9A227;
  --stencil-dim:#8E7220;
  --stencil-glow:rgba(201,162,39,0.55);
  --paper:#ECEAE3;
  --paper-dim:#A8A7A2;
  --font-display:'Oswald', sans-serif;
  --font-brush:'Permanent Marker', cursive;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink-800);
  color:var(--paper);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--stencil);color:var(--ink-900);}
:focus-visible{outline:2px solid var(--stencil);outline-offset:3px;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:0.01em;margin:0;color:var(--paper);}
p{margin:0;}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(12,13,14,0.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ink-600);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px;}
.brand{
  font-family:var(--font-display);
  font-size:21px;font-weight:700;letter-spacing:0.04em;
  display:flex;align-items:center;gap:10px;
}
.crown{width:22px;height:22px;flex:none;color:var(--stencil);}
.crown svg{width:100%;height:100%;}

.nav-cta{display:flex;gap:12px;align-items:center;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;font-family:var(--font-body);font-weight:600;font-size:14px;
  border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, box-shadow .2s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--stencil);color:var(--ink-900);}
.btn-primary:hover{background:#DDB737;box-shadow:0 0 0 4px rgba(201,162,39,0.18), 0 10px 26px -8px var(--stencil-glow);}
.btn-ghost{border-color:var(--ink-600);color:var(--paper);background:transparent;}
.btn-ghost:hover{border-color:var(--stencil-dim);box-shadow:0 0 16px -2px rgba(201,162,39,0.35);}
.btn-lg{padding:13px 24px;font-size:15px;}

/* ---------- Header-Buttonleiste (einzige Navigation der Seite) ---------- */
.header-actions{
  position:sticky;top:0;z-index:50;
  background:rgba(10,11,12,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ink-600);
  padding:14px 0;
}
.header-actions-inner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.brand-mini{
  font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:0.04em;
  display:flex;align-items:center;gap:8px;flex:none;
}
.brand-mini .crown{width:18px;height:18px;}
.header-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.header-btn{
  font-family:var(--font-display);font-size:12.5px;letter-spacing:0.14em;
  color:var(--paper-dim);
  padding:9px 18px;
  border:1px solid var(--ink-600);
  background:transparent;
  transition:color .18s ease, border-color .18s ease, box-shadow .28s ease, background-color .18s ease;
}
.header-btn:hover, .header-btn.active{
  color:var(--paper);
  border-color:var(--stencil);
  background:rgba(201,162,39,0.08);
  box-shadow:0 0 26px -3px var(--stencil-glow), 0 0 0 1px rgba(201,162,39,0.3) inset;
}
.header-cta{display:flex;gap:10px;flex:none;}
.btn-sm{padding:8px 14px;font-size:12.5px;}

/* ---------- Home hero / Hauptnavigation ---------- */
.home-hero{
  position:relative;
  width:100%;
  background:#000 url('hero-header-final.png') center/100% 100% no-repeat;
  /* Kompakter Header: Navigation bleibt sichtbar, erste Inhalte rücken nach oben. */
  height:clamp(360px, 30vw, 560px);
  aspect-ratio:auto;
  overflow:hidden;
}
.home-hero::after{display:none;}
.hero-hotspots{position:absolute;inset:0;z-index:2;}
.hero-hotspot{
  position:absolute;
  bottom:3.2%;
  height:10.2%;
  border-radius:8px;
  transition:background-color .18s ease, filter .18s ease;
}
.hero-hotspot span{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero-hotspot:hover,.hero-hotspot:focus-visible{
  background:rgba(255,255,255,.07);
  filter:drop-shadow(0 0 10px rgba(255,255,255,.18));
  outline:none;
}
.hero-news{left:3.3%;width:9.2%;}
.hero-tournaments{left:13.4%;width:13.6%;}
.hero-community{left:28.0%;width:12.5%;}
.hero-gameserver{left:41.7%;width:12.8%;}
.hero-discord{left:55.2%;width:10.6%;}
.hero-streaming{left:66.8%;width:12.5%;}
.hero-kistengang{left:80.6%;width:15.3%;}

/* ---------- Page header (Unterseiten) ---------- */
.page-hero{
  position:relative;
  padding:64px 0 42px;
  overflow:hidden;
  background:linear-gradient(165deg, var(--ink-900) 0%, var(--ink-800) 55%, #201A10 100%);
  border-bottom:1px solid var(--ink-600);
}
.page-hero::before{
  content:"";
  position:absolute;inset:-20%;
  background-image:repeating-linear-gradient(115deg, rgba(236,234,227,0.035) 0px, rgba(236,234,227,0.035) 1px, transparent 1px, transparent 90px);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1;}
.section-tag{
  font-family:var(--font-display);font-size:13px;letter-spacing:0.18em;
  color:var(--stencil-dim);display:block;margin-bottom:10px;
}
.page-hero h1{font-size:clamp(32px,5vw,52px);}
.page-hero p{margin-top:14px;color:var(--paper-dim);max-width:60ch;}

/* ---------- Section shell ---------- */
section{padding:52px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(24px,3vw,32px);}
.section-desc{color:var(--paper-dim);max-width:56ch;font-size:14.5px;}
.divider{border:none;border-top:1px dashed var(--ink-600);margin:0;}

/* ---------- Dense home layout ---------- */
.home-body{padding-top:34px;}
.home-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:start;}

.news-list{display:flex;flex-direction:column;border:1px solid var(--ink-600);}
.news-row{
  display:flex;gap:14px;align-items:baseline;
  padding:14px 16px;border-bottom:1px solid var(--ink-600);
  background:var(--ink-700);
}
.news-list .news-row:last-child{border-bottom:none;}
.news-row .news-date{
  font-family:var(--font-display);font-size:12px;letter-spacing:0.06em;
  color:var(--stencil-dim);flex:none;width:56px;
}
.news-row .news-body h3{font-size:15px;font-weight:600;margin-bottom:3px;}
.news-row .news-body p{font-size:13px;color:var(--paper-dim);}

/* ---------- Kalender (kompakt) ---------- */
.calendar-compact{border:1px solid var(--ink-600);background:var(--ink-700);}
.calendar-compact-head{
  display:grid;grid-template-columns:repeat(7,1fr);
  background:var(--ink-600);
}
.calendar-compact-head span{
  padding:8px 4px;text-align:center;font-family:var(--font-display);
  font-size:11px;letter-spacing:0.06em;color:var(--paper-dim);
}
.calendar-compact-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.cc-day{
  border-right:1px solid var(--ink-600);border-top:1px solid var(--ink-600);
  padding:8px 6px;min-height:78px;display:flex;flex-direction:column;gap:5px;
}
.cc-day:last-child{border-right:none;}
.cc-date{font-family:var(--font-display);font-size:11px;color:var(--paper-dim);}
.cc-slot{background:var(--ink-800);border:1px solid var(--wood-light);padding:5px 6px;font-size:10.5px;}
.cc-slot b{display:block;color:var(--stencil);font-weight:600;}
.cc-empty{font-size:10.5px;color:var(--ink-600);border:1px dashed var(--ink-600);padding:5px 6px;text-align:center;}
.calendar-note{display:flex;justify-content:space-between;align-items:center;margin-top:14px;flex-wrap:wrap;gap:10px;}
.calendar-note p{font-size:13px;color:var(--paper-dim);}

/* ---------- Neue Mitglieder (klein, Startseite) ---------- */
.members-strip{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px;
  padding:16px 18px;border:1px solid var(--ink-600);background:var(--ink-700);
}
.mini-member{display:flex;align-items:center;gap:8px;}
.mini-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(150deg,var(--wood-light),var(--wood));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:10.5px;color:var(--paper);
  flex:none;
}
.mini-member span{font-size:12.5px;color:var(--paper-dim);}
.members-strip .more{margin-left:auto;font-size:12.5px;color:var(--stencil);}

/* ---------- Turnier ---------- */
.tourney-board{
  position:relative;background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--olive);
  border:1px solid #363B2B;padding:40px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:36px;align-items:center;
}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:12.5px;
  letter-spacing:0.1em;color:var(--ink-900);background:var(--stencil);padding:5px 12px;margin-bottom:16px;
}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-900);}
.tourney-board h3{font-size:clamp(24px,3vw,32px);margin-bottom:12px;}
.tourney-meta{display:flex;flex-wrap:wrap;gap:20px;margin:18px 0 22px;}
.tourney-meta div{font-size:14px;}
.tourney-meta b{display:block;font-family:var(--font-display);font-size:16px;color:var(--paper);}
.tourney-meta span{color:var(--paper-dim);font-size:12px;letter-spacing:0.04em;}
.tourney-desc{color:var(--paper-dim);max-width:48ch;margin-bottom:22px;}
.tourney-side{background:var(--ink-800);border:1px solid rgba(236,234,227,0.12);padding:26px;}
.tourney-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.tourney-side li{display:flex;justify-content:space-between;font-size:14px;border-bottom:1px solid var(--ink-600);padding-bottom:11px;color:var(--paper-dim);}
.tourney-side li b{color:var(--paper);font-weight:600;}
.past-list{display:flex;flex-direction:column;border:1px solid var(--ink-600);margin-top:16px;}
.past-row{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--ink-600);background:var(--ink-700);font-size:14px;}
.past-list .past-row:last-child{border-bottom:none;}
.past-row span{color:var(--paper-dim);}

/* ---------- Gameserver ---------- */
.server-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.server-card{position:relative;background:linear-gradient(160deg, var(--ink-700), var(--ink-600));border:1px solid var(--ink-600);padding:24px 22px 22px;}
.server-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.server-name{font-family:var(--font-display);font-size:19px;}
.server-mode{font-size:12px;color:var(--paper-dim);margin-top:4px;}
.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#8FBF7A;}
.status-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:#8FBF7A;}
.status-dot.busy{color:var(--stencil);}
.status-dot.busy::before{background:var(--stencil);}
.server-map{font-size:14px;color:var(--paper-dim);margin-bottom:14px;}
.server-map b{color:var(--paper);}
.server-bar-track{height:5px;background:var(--ink-800);margin-bottom:8px;overflow:hidden;}
.server-bar-fill{height:100%;background:var(--wood-light);}
.server-players{font-size:12px;color:var(--paper-dim);margin-bottom:18px;}
.connect-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink-900);border:1px solid var(--ink-600);padding:10px 12px;font-size:13px;}
.connect-row code{font-family:var(--font-body);color:var(--paper-dim);}
.connect-row button{background:none;border:none;color:var(--stencil);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--font-body);}

/* ---------- Über uns ---------- */
.about{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start;}
.about-list{display:flex;flex-direction:column;}
.about-item{padding:20px 0;border-bottom:1px solid var(--ink-600);}
.about-item:first-child{border-top:1px solid var(--ink-600);}
.about-item h3{font-size:16px;margin-bottom:7px;}
.about-item p{color:var(--paper-dim);font-size:14px;}
.about-lead p{color:var(--paper-dim);}

/* ---------- Discord ---------- */
.discord-cta{
  position:relative;background:linear-gradient(135deg, #1E2A1D 0%, var(--ink-800) 65%);
  border:1px solid var(--ink-600);padding:48px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.discord-cta h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:10px;}
.discord-cta p{color:var(--paper-dim);max-width:44ch;}
.discord-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;}
.discord-point{border:1px solid var(--ink-600);background:var(--ink-700);padding:18px;font-size:13.5px;color:var(--paper-dim);}
.discord-point b{display:block;color:var(--paper);font-family:var(--font-display);font-size:15px;margin-bottom:6px;}

/* ---------- Mitglieder (Vollseite) ---------- */
.members-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px;}
.members-toolbar input{
  background:var(--ink-700);border:1px solid var(--ink-600);color:var(--paper);
  padding:9px 14px;font-family:var(--font-body);font-size:14px;min-width:220px;
}
.members-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.member-chip{background:var(--ink-700);border:1px solid var(--ink-600);padding:18px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.avatar{width:52px;height:52px;background:linear-gradient(150deg,var(--wood-light),var(--wood));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;color:var(--paper);}
.member-chip b{font-size:13.5px;}
.member-chip span{font-size:11.5px;color:var(--paper-dim);}

/* ---------- Mitgliederprofil (Detailseite) ---------- */
.profile-head{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:36px;}
.profile-avatar{
  width:96px;height:96px;flex:none;
  background:linear-gradient(150deg,var(--wood-light),var(--wood));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:32px;color:var(--paper);
  border:2px solid var(--ink-600);
}
.profile-head h1{font-size:clamp(26px,3.6vw,36px);}
.profile-meta-line{color:var(--paper-dim);font-size:14px;margin-top:6px;}
.profile-links{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.profile-links a{
  font-size:13px;font-family:var(--font-display);letter-spacing:0.05em;
  padding:7px 14px;border:1px solid var(--ink-600);color:var(--paper-dim);
  transition:color .18s ease,border-color .18s ease,box-shadow .25s ease;
}
.profile-links a:hover{color:var(--paper);border-color:var(--stencil-dim);box-shadow:0 0 16px -3px var(--stencil-glow);}
.profile-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:28px;align-items:start;}
.profile-card{border:1px solid var(--ink-600);background:var(--ink-700);padding:24px;}
.profile-card h3{font-size:15px;letter-spacing:0.04em;color:var(--paper-dim);margin-bottom:16px;font-family:var(--font-display);}
.spec-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--ink-600);font-size:14px;}
.spec-row:last-child{border-bottom:none;}
.spec-row span{color:var(--paper-dim);}
.spec-row b{font-weight:600;color:var(--paper);text-align:right;}
.profile-bio{color:var(--paper-dim);font-size:14.5px;margin-bottom:24px;}
.profile-note{font-size:12.5px;color:var(--stencil-dim);margin-top:10px;}

/* ---------- Streaming ---------- */
.stream-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.stream-card{border:1px solid var(--ink-600);background:linear-gradient(160deg,var(--ink-700),var(--ink-600));overflow:hidden;}
.stream-thumb{
  aspect-ratio:16/9;background:linear-gradient(150deg,#2a1c3d,#141516);
  display:flex;align-items:center;justify-content:center;
  color:var(--paper-dim);font-family:var(--font-display);font-size:13px;letter-spacing:0.08em;
  position:relative;
}
.stream-live{
  position:absolute;top:10px;left:10px;
  background:#C9302C;color:#fff;font-family:var(--font-display);font-size:11px;letter-spacing:0.08em;
  padding:3px 8px;display:flex;align-items:center;gap:5px;
}
.stream-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;}
.stream-body{padding:16px 18px;}
.stream-body h3{font-size:16px;margin-bottom:4px;}
.stream-body p{font-size:13px;color:var(--paper-dim);margin-bottom:12px;}

/* ---------- Adminportal ---------- */
.admin-shell{display:grid;grid-template-columns:220px 1fr;gap:0;min-height:calc(100vh - 200px);}
.admin-side{border-right:1px solid var(--ink-600);padding:28px 18px;background:var(--ink-900);}
.admin-side a{
  display:block;padding:10px 12px;margin-bottom:4px;font-size:14px;color:var(--paper-dim);
  border-left:2px solid transparent;transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
.admin-side a:hover, .admin-side a.active{color:var(--paper);border-left-color:var(--stencil);background:rgba(201,162,39,0.06);}
.admin-main{padding:36px;}
.admin-card{border:1px solid var(--ink-600);background:var(--ink-700);padding:24px;margin-bottom:22px;}
.admin-card h3{font-size:17px;margin-bottom:16px;}
.admin-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--ink-600);font-size:14px;}
.admin-row:last-child{border-bottom:none;}
.admin-row span{color:var(--paper-dim);}
.admin-actions{display:flex;gap:8px;}
.admin-actions button, .admin-actions a{
  font-size:12px;font-family:var(--font-display);letter-spacing:0.05em;
  padding:6px 12px;border:1px solid var(--ink-600);background:transparent;color:var(--paper-dim);cursor:pointer;
  transition:color .18s ease,border-color .18s ease;
}
.admin-actions button:hover, .admin-actions a:hover{color:var(--paper);border-color:var(--stencil-dim);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form-field{display:flex;flex-direction:column;gap:6px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:12.5px;color:var(--paper-dim);letter-spacing:0.03em;}
.form-field input, .form-field select, .form-field textarea{
  background:var(--ink-800);border:1px solid var(--ink-600);color:var(--paper);
  padding:9px 12px;font-family:var(--font-body);font-size:14px;
}
.form-field textarea{resize:vertical;min-height:70px;}
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px;}
.admin-stat{border:1px solid var(--ink-600);background:var(--ink-700);padding:18px;}
.admin-stat b{display:block;font-family:var(--font-display);font-size:26px;}
.admin-stat span{font-size:12.5px;color:var(--paper-dim);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--ink-600);padding:40px 0 28px;background:var(--ink-900);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:30px;}
.footer-grid h4{font-family:var(--font-display);font-size:13px;letter-spacing:0.08em;color:var(--paper-dim);margin-bottom:14px;}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;}
.footer-grid a{color:var(--paper-dim);}
.footer-grid a:hover{color:var(--paper);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--ink-600);font-size:13px;color:var(--paper-dim);flex-wrap:wrap;gap:10px;}

/* ---------- Reveal on scroll ---------- */
.reveal-io{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease;}
.reveal-io.in{opacity:1;transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal-io{opacity:1;transform:none;transition:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .home-grid{grid-template-columns:1fr;}
  .server-grid{grid-template-columns:1fr 1fr;}
  .about{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .members-grid{grid-template-columns:repeat(3,1fr);}
  .discord-points{grid-template-columns:1fr;}
  .profile-grid{grid-template-columns:1fr;}
  .stream-grid{grid-template-columns:1fr 1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-side{border-right:none;border-bottom:1px solid var(--ink-600);display:flex;overflow-x:auto;padding:14px;}
  .admin-side a{border-left:none;border-bottom:2px solid transparent;white-space:nowrap;}
  .admin-side a:hover, .admin-side a.active{border-left-color:transparent;border-bottom-color:var(--stencil);}
  .admin-stat-grid{grid-template-columns:1fr 1fr;}
  .form-grid{grid-template-columns:1fr;}
}
@media (max-width:680px){
  .header-actions-inner{justify-content:center;}
  .header-btns{gap:8px;}
  .header-btn{font-size:11.5px;padding:8px 14px;}
  .header-cta{width:100%;justify-content:center;}
  .tourney-board{grid-template-columns:1fr;padding:26px;}
  .server-grid{grid-template-columns:1fr;}
  .discord-cta{padding:28px;flex-direction:column;align-items:flex-start;}
  .footer-grid{grid-template-columns:1fr;}
  .members-grid{grid-template-columns:repeat(2,1fr);}
  .calendar-compact-grid,.calendar-compact-head{grid-template-columns:repeat(7,minmax(60px,1fr));overflow-x:auto;}
  .stream-grid{grid-template-columns:1fr;}
  .admin-stat-grid{grid-template-columns:1fr 1fr;}
  .admin-main{padding:22px;}
}

/* ---------- Kistengang 2026: einheitliche Interaktionen ---------- */
.hero-hotspot{
  transition:background-color .16s ease, filter .16s ease, box-shadow .16s ease, transform .16s ease;
}
.hero-hotspot:hover,.hero-hotspot:focus-visible,.hero-hotspot.active{
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  filter:drop-shadow(0 0 12px rgba(220,238,255,.52)) drop-shadow(0 0 26px rgba(118,188,255,.25));
  box-shadow:inset 0 -2px 0 rgba(225,242,255,.9),0 0 22px rgba(136,202,255,.20);
  transform:translateY(-1px);
}

/* Alle echten Bedienelemente reagieren gleich: leichtes Leuchten statt auffälliger Animation. */
.btn,.header-btn,.admin-actions button,.admin-actions a,.connect-row button,
.profile-links a,.footer-grid a,.footer-bottom a{
  transition:color .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .18s ease,filter .18s ease,transform .16s ease;
}
.btn:hover,.btn:focus-visible,.header-btn:hover,.header-btn:focus-visible,
.admin-actions button:hover,.admin-actions button:focus-visible,.admin-actions a:hover,.admin-actions a:focus-visible,
.connect-row button:hover,.connect-row button:focus-visible,.profile-links a:hover,.profile-links a:focus-visible{
  filter:brightness(1.13);
  box-shadow:0 0 8px rgba(225,242,255,.30),0 0 22px rgba(118,188,255,.17);
}

/* Unterseiten benutzen exakt denselben visuellen Header wie die Frontpage. */
.site-hero{border-bottom:1px solid rgba(190,220,245,.16);}

@media (max-width:680px){
  .home-hero{height:240px;min-height:0;aspect-ratio:auto;background-size:100% 100%;background-position:center;}
  .hero-hotspot{bottom:2.5%;height:12%;}
}

/* ---------- Kistengang 2026: universelles UI-Feedback ---------- */
/* Eingaben, Dropdowns und Textfelder */
input:not([type="hidden"]),select,textarea,
[contenteditable="true"],[role="combobox"],[role="textbox"]{
  transition:border-color .16s ease,background-color .16s ease,box-shadow .18s ease,filter .18s ease,transform .16s ease;
}
input:not([type="hidden"]):not(:disabled):hover,
select:not(:disabled):hover,textarea:not(:disabled):hover,
[contenteditable="true"]:hover,[role="combobox"]:hover,[role="textbox"]:hover,
input:not([type="hidden"]):focus-visible,select:focus-visible,textarea:focus-visible,
[contenteditable="true"]:focus-visible,[role="combobox"]:focus-visible,[role="textbox"]:focus-visible{
  border-color:rgba(205,232,255,.72) !important;
  filter:brightness(1.08);
  box-shadow:0 0 8px rgba(225,242,255,.25),0 0 22px rgba(118,188,255,.14),inset 0 0 12px rgba(180,220,255,.035);
  outline:none;
}

/* Tabs / Umschalter – funktioniert auch für später ergänzte Tabs. */
.tab,.tabs button,[role="tab"],.admin-side a{
  transition:color .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .18s ease,filter .18s ease,transform .16s ease;
}
.tab:hover,.tab:focus-visible,.tabs button:hover,.tabs button:focus-visible,
[role="tab"]:hover,[role="tab"]:focus-visible,.admin-side a:hover,.admin-side a:focus-visible{
  filter:brightness(1.13);
  box-shadow:0 0 8px rgba(225,242,255,.27),0 0 22px rgba(118,188,255,.15);
}

/* Interaktive Karten. :has() sorgt dafür, dass reine Infokarten nicht fälschlich wie Buttons wirken. */
:is(.news-row,.server-card,.about-item,.cc-day,.member-chip,.mini-member,.tourney-board,.discord-point,.past-row,.members-strip,.calendar-compact,.profile-card,.stream-card,.admin-card):has(a,button,input,select,textarea),
:is(.news-row,.server-card,.about-item,.cc-day,.member-chip,.mini-member,.tourney-board,.discord-point,.past-row,.members-strip,.calendar-compact,.profile-card,.stream-card,.admin-card)[tabindex],
a.member-chip,a.mini-member,a.news-row,a.server-card,a.stream-card{
  transition:border-color .16s ease,background-color .16s ease,box-shadow .18s ease,filter .18s ease,transform .16s ease;
}
:is(.news-row,.server-card,.about-item,.cc-day,.member-chip,.mini-member,.tourney-board,.discord-point,.past-row,.members-strip,.calendar-compact,.profile-card,.stream-card,.admin-card):has(a,button,input,select,textarea):hover,
:is(.news-row,.server-card,.about-item,.cc-day,.member-chip,.mini-member,.tourney-board,.discord-point,.past-row,.members-strip,.calendar-compact,.profile-card,.stream-card,.admin-card)[tabindex]:hover,
a.member-chip:hover,a.mini-member:hover,a.news-row:hover,a.server-card:hover,a.stream-card:hover{
  filter:brightness(1.07);
  border-color:rgba(205,232,255,.38);
  box-shadow:0 0 10px rgba(225,242,255,.16),0 0 28px rgba(118,188,255,.10);
  transform:translateY(-1px);
}

@media (prefers-reduced-motion:reduce){
  input,select,textarea,.tab,.tabs button,[role="tab"],.admin-side a{transition:none !important;transform:none !important;}
}

/* 2026-09-17 compact header + wide layout */
:root{--content-max:1560px}
.wrap{max-width:var(--content-max);width:calc(100% - 48px)}
.home-hero,.site-hero{height:430px;min-height:0;aspect-ratio:auto;background-size:100% auto;background-position:center top;background-repeat:no-repeat;position:relative;overflow:hidden}
.hero-hotspots{position:absolute;left:0;right:0;bottom:0;height:50px;display:grid;grid-template-columns:repeat(7,1fr);padding:0 4%;background:linear-gradient(180deg,rgba(8,11,14,.88),rgba(8,11,14,.98));backdrop-filter:blur(4px);border-top:1px solid rgba(255,255,255,.08)}
.hero-hotspot{position:static!important;width:auto!important;height:50px!important;display:flex;align-items:center;justify-content:center;text-decoration:none;background:transparent!important;filter:none!important;box-shadow:none!important;transform:none!important;color:#eef4f8;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero-hotspot span{position:static!important;width:auto!important;height:auto!important;clip:auto!important;clip-path:none!important;overflow:visible!important;white-space:nowrap!important}
.hero-hotspot:hover,.hero-hotspot:focus-visible,.hero-hotspot.active{color:#fff!important;text-shadow:0 0 10px rgba(210,235,255,.75);box-shadow:inset 0 -2px 0 rgba(220,240,255,.8)!important}
.home-body .wrap{max-width:1560px}
.home-grid{grid-template-columns:minmax(0,1.35fr) minmax(420px,.65fr);gap:34px}
.empty-state{border:1px dashed var(--ink-500);padding:28px;background:rgba(255,255,255,.015);color:var(--paper-dim);font-size:14px}
.empty-state b{display:block;color:var(--paper);margin-bottom:6px}
.admin-main{max-width:none}
.admin-card{max-width:none}
.admin-help{font-size:13px;color:var(--paper-dim);margin:-6px 0 18px;line-height:1.55}
.admin-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.admin-list-empty{padding:18px 0;color:var(--paper-dim);font-size:13px}
@media(max-width:1100px){.wrap{width:calc(100% - 32px)}.home-grid{grid-template-columns:1fr}.home-hero,.site-hero{height:360px}.hero-hotspot{font-size:10px;letter-spacing:.04em}}
@media(max-width:680px){.home-hero,.site-hero{height:270px;background-size:auto 220px;background-position:center top}.hero-hotspots{height:50px;padding:0;overflow-x:auto;grid-template-columns:repeat(7,minmax(105px,1fr))}.hero-hotspot{height:50px!important;font-size:10px}.wrap{width:calc(100% - 24px)}}

/* 2026-09-17 restore complete hero artwork + in-image navigation */
.home-hero,
.site-hero{
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:1983 / 793;
  background-image:url('hero-header-final.png');
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
.hero-hotspots{
  position:absolute;
  inset:0;
  display:block;
  height:auto;
  padding:0;
  background:none;
  backdrop-filter:none;
  border:0;
  overflow:visible;
}
.hero-hotspot{
  position:absolute!important;
  bottom:2.4%!important;
  height:12.5%!important;
  width:auto;
  display:block;
  padding:0;
  background:transparent!important;
  border:0;
  border-radius:10px;
  color:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background-color .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
.hero-hotspot span{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.hero-hotspot:hover,
.hero-hotspot:focus-visible,
.hero-hotspot.active{
  background:rgba(255,255,255,.055)!important;
  filter:drop-shadow(0 0 9px rgba(220,240,255,.48))!important;
  box-shadow:inset 0 -2px 0 rgba(230,245,255,.65)!important;
  outline:none;
}
.hero-news{left:2.7%!important;width:9.6%!important}
.hero-tournaments{left:13.1%!important;width:13.4%!important}
.hero-community{left:27.1%!important;width:12.7%!important}
.hero-gameserver{left:40.7%!important;width:13.7%!important}
.hero-discord{left:55.0%!important;width:10.5%!important}
.hero-streaming{left:66.0%!important;width:12.5%!important}
.hero-kistengang{left:79.2%!important;width:17.5%!important}
@media(max-width:1100px){
  .home-hero,.site-hero{height:auto;aspect-ratio:1983 / 793;background-size:100% 100%}
}
@media(max-width:680px){
  .home-hero,.site-hero{height:auto;aspect-ratio:1983 / 793;background-size:100% 100%;background-position:center}
  .hero-hotspots{position:absolute;inset:0;display:block;height:auto;padding:0;overflow:visible}
  .hero-hotspot{bottom:2.4%!important;height:13%!important;font-size:0!important}
}