/*
 * ============================================================
 *  BLUNAA.COM – Shared Component Styles
 *  Datei: shared/css/components.css
 *  Wiederverwendbare UI-Komponenten für alle Varianten
 * ============================================================
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@import 'tokens.css';

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --sb-open: 260px; --sb-closed: 64px; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
body { font-family: var(--font); color: var(--text-main); background: var(--bg-page); line-height: 1.7; font-size: 15px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Banner ────────────────────────────────────────── */
.banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: var(--accent); color: #fff;
  text-align: center; padding: 8px 1rem 8px 260px;
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  transition: padding-left .3s;
}
body.sb-closed .banner { padding-left: 80px; }

/* ── Sidebar ───────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; width: var(--sb-open); height: 100vh;
  background: var(--bg-deep); z-index: 1000;
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .3s; border-right: 1px solid rgba(255,255,255,.05);
}
.sidebar.closed { width: var(--sb-closed); }
.sb-header { display:flex; align-items:center; justify-content:space-between; padding:22px 16px 16px; border-bottom:1px solid rgba(255,255,255,.07); min-height:65px; }
.sb-logo { font-size:17px; font-weight:600; letter-spacing:.18em; color:#fff; white-space:nowrap; transition:opacity .2s; }
.sidebar.closed .sb-logo { opacity:0; pointer-events:none; }
.sb-toggle { background:none; border:none; cursor:pointer; padding:6px; color:rgba(255,255,255,.6); flex-shrink:0; display:flex; flex-direction:column; gap:4px; }
.sb-toggle:hover { color:#fff; }
.sb-toggle span { display:block; width:20px; height:2px; background:currentColor; border-radius:2px; }
.sb-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px 0 24px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
.sb-nav::-webkit-scrollbar { width:8px; }
.sb-nav::-webkit-scrollbar-track { background:transparent; }
.sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:8px; }
.sb-nav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.24); }
.sb-group { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.25); padding:14px 20px 4px; white-space:nowrap; transition:opacity .2s; }
.sidebar.closed .sb-group { opacity:0; }
.sb-link { display:flex; align-items:center; gap:12px; padding:10px 16px; color:rgba(255,255,255,.55); font-size:13px; white-space:nowrap; transition:color .2s, background .2s; cursor:pointer; border-left:2px solid transparent; text-decoration:none; }
.sb-link:hover { color:#fff; background:rgba(255,255,255,.05); }
.sb-link.active { color:#fff; border-left-color:var(--accent); background:rgba(91,127,166,.12); }
.sb-icon { width:28px; text-align:center; font-size:16px; flex-shrink:0; }
.sb-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:opacity .2s, max-width .3s; max-width:200px; }
.sidebar.closed .sb-label { opacity:0; max-width:0; }
.sb-footer { padding:14px 16px; border-top:1px solid rgba(255,255,255,.07); display:flex; gap:10px; }
.sb-social { width:28px; height:28px; border-radius:6px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); font-size:13px; flex-shrink:0; transition:background .2s, color .2s; }
.sb-social:hover { background:var(--accent); color:#fff; }

/* ── Main Content ──────────────────────────────────── */
/* Altes Sidebar-System: margin-left nur noch für Bodies OHNE shared-nav.
   Bei has-shared-nav kommt der Offset allein aus shared-nav.css (padding-left),
   sonst summierten sich margin-left + padding-left zu doppeltem Abstand. */
body:not(.has-shared-nav) { margin-left: var(--sb-open); transition: margin-left .3s; }
body:not(.has-shared-nav).sb-closed { margin-left: var(--sb-closed); }
.main-content { padding-top: 44px; } /* = ssn-topbar height, bündig darunter */

/* ── Parallax Sections ─────────────────────────────── */
.parallax-section { position:relative; background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat; }
.parallax-section::before { content:''; position:absolute; inset:0; background:rgba(16,22,35,.72); z-index:0; }
.parallax-section > * { position:relative; z-index:1; }

/* ── Section Layout ────────────────────────────────── */
.section { max-width:900px; margin:0 auto; padding:5rem 2rem; }
.section-dark { padding:5rem 2rem; }
.eyebrow { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:500; display:block; margin-bottom:.4rem; }
.parallax-section .eyebrow { color:var(--accent-lt); }
.heading { font-size:26px; font-weight:500; margin-bottom:2.5rem; }
.parallax-section .heading { color:#fff; }
.bg-alt { background:var(--bg-surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ── Hero ──────────────────────────────────────────── */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6rem 2rem 4rem; color:#fff; }
.hero-title { font-size:clamp(56px,12vw,110px); font-weight:600; letter-spacing:.14em; line-height:1; margin-bottom:1.8rem; }
.hero-divider { width:52px; height:2px; background:var(--accent); margin:0 auto 1.8rem; }
.hero-tag { font-size:12px; padding:6px 18px; border:1px solid rgba(255,255,255,.2); border-radius:99px; color:rgba(255,255,255,.6); letter-spacing:.06em; display:inline-block; margin:3px; }

/* ── Cards / Components ────────────────────────────── */
.card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s; }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.tag { font-size:12px; padding:4px 13px; border:1px solid var(--border); border-radius:99px; color:var(--text-muted); background:var(--bg-page); display:inline-block; margin:3px; }

/* ── Event Cards ───────────────────────────────────── */
.event-card { display:flex; align-items:center; gap:1.5rem; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.5rem; box-shadow:var(--shadow-sm); transition:box-shadow .2s, transform .2s; margin-bottom:1rem; }
.event-card:hover { box-shadow:var(--shadow-md); transform:translateX(3px); }
.ev-date { text-align:center; min-width:50px; border-right:1px solid var(--border); padding-right:1.5rem; }
.ev-day { font-size:26px; font-weight:600; color:var(--accent); line-height:1; }
.ev-mon { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.ev-year { font-size:10px; color:var(--text-muted); letter-spacing:.05em; }
.ev-info { flex:1; }
.ev-info h3 { font-size:15px; font-weight:500; }
.ev-info p { font-size:13px; color:var(--text-muted); margin-top:2px; }
.badge { font-size:11px; padding:4px 12px; border-radius:99px; font-weight:500; }
.badge-soon { background:#dde8f2; color:#3a5f80; }
.badge-up { background:var(--bg-surface); color:var(--text-muted); }
.badge-past { background:var(--bg-surface); color:var(--accent); border:1px solid var(--border); }
.badge-past:hover { background:var(--accent); color:#fff; }

/* ── Gallery ───────────────────────────────────────── */
.gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.gallery-item { border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:transform .25s, box-shadow .25s; cursor:pointer; position:relative; }
.gallery-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.gallery-item img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(16,22,35,.85)); color:rgba(255,255,255,.9); font-size:13px; padding:1rem 1rem .75rem; transform:translateY(100%); transition:transform .25s; }
.gallery-item:hover .gallery-caption { transform:translateY(0); }
.gallery-caption strong { display:block; font-size:14px; }

/* ── Forms ─────────────────────────────────────────── */
.cf { display:flex; flex-direction:column; gap:.9rem; }
.cf-field { position:relative; display:flex; flex-direction:column; gap:4px; }
.cf input, .cf textarea, .cf select { width:100%; padding:11px 15px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); font-size:14px; font-family:var(--font); color:#fff; outline:none; transition:border-color .2s; }
.cf input::placeholder, .cf textarea::placeholder { color:rgba(255,255,255,.3); }
.cf input:focus, .cf textarea:focus { border-color:var(--accent-lt); }
.cf textarea { min-height:120px; resize:vertical; }
.cf-hint { font-size:12px; min-height:16px; padding-left:2px; }
.cf-hint.error { color:#e07070; }
.cf-hint.ok { color:#70b870; }
.cf input.field-error, .cf textarea.field-error, .cf select.field-error { border-color:#c05050 !important; }
.cf input.field-ok, .cf textarea.field-ok, .cf select.field-ok { border-color:#50a050 !important; }
.form-error { background:rgba(180,60,60,.18); border:1px solid rgba(200,80,80,.4); border-radius:var(--radius); padding:12px 16px; font-size:13px; color:#e8a0a0; margin-bottom:4px; }
.form-success { background:rgba(60,130,80,.18); border:1px solid rgba(80,160,100,.4); border-radius:var(--radius); padding:16px; font-size:14px; color:#90d8a8; text-align:center; }

/* ── Buttons ───────────────────────────────────────── */
.btn-primary { display:inline-block; padding:11px 28px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius); font-size:14px; font-family:var(--font); font-weight:500; cursor:pointer; letter-spacing:.04em; transition:background .2s, transform .15s; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── Tech Cards ────────────────────────────────────── */
.tech-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
.tech-card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.tech-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.tech-card-img { height:180px; overflow:hidden; background:var(--bg-deep2); }
.tech-card-img img { width:100%; height:100%; object-fit:cover; }
.tech-card-body { padding:1.2rem 1.4rem; }
.tech-card-body h3 { font-size:15px; font-weight:500; margin-bottom:.4rem; color:var(--accent); }
.tech-card-body p { font-size:13px; color:var(--text-muted); line-height:1.65; }

/* ── Blog ──────────────────────────────────────────── */
.blog-list { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.blog-item { background:var(--bg-white); padding:1.4rem 1.75rem; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; display:flex; align-items:flex-start; gap:1rem; }
.blog-item:last-child { border-bottom:none; }
.blog-item:hover { background:var(--bg-page); }
.blog-cat { flex-shrink:0; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:3px 10px; border-radius:99px; margin-top:3px; }
.cat-music { background:#dde8f2; color:#3a5f80; }
.cat-tech  { background:#e0eae0; color:#375537; }
.cat-fpv   { background:#ede0ea; color:#5a3356; }
.cat-funk  { background:#e8e5d8; color:#4a4218; }
.blog-body h3 { font-size:15px; font-weight:500; margin-bottom:.3rem; }
.blog-body p  { font-size:13px; color:var(--text-muted); line-height:1.6; }
.blog-meta { font-size:11px; color:var(--accent); margin-bottom:.3rem; }

/* ── Links ─────────────────────────────────────────── */
.links-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
.link-card { display:flex; align-items:center; gap:1rem; background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.25rem; box-shadow:var(--shadow-sm); transition:background .15s, box-shadow .2s, transform .2s; }
.link-card:hover { background:var(--bg-surface); box-shadow:var(--shadow-md); transform:translateX(3px); }
.link-icon { width:38px; height:38px; border-radius:9px; background:var(--bg-surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--accent); flex-shrink:0; }
.link-name { font-size:14px; font-weight:500; }
.link-desc { font-size:12px; color:var(--text-muted); }

/* ── Fun Cards ─────────────────────────────────────── */
.fun-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.fun-card { background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.4rem; box-shadow:var(--shadow-sm); }
.fun-card h3 { font-size:14px; font-weight:500; color:var(--accent); margin-bottom:.5rem; }
.fun-card p  { font-size:13px; color:var(--text-muted); line-height:1.65; }

/* ── Contact ───────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; }
.social-item { display:flex; align-items:center; gap:.75rem; color:var(--text-light); font-size:14px; transition:color .2s; margin-bottom:.75rem; }
.social-item:hover { color:#fff; }
.social-icon { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; font-size:15px; }

/* ── Footer ────────────────────────────────────────── */
footer { background:var(--bg-deep); border-top:1px solid rgba(255,255,255,.06); text-align:center; padding:2rem; font-size:13px; color:var(--text-muted); }
footer a { color:var(--accent-lt); }
footer a:hover { color:#fff; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width:900px) {
  /* Sidebar-Breite NICHT ändern (verhinderte Springen); nur Grid anpassen */
  .gallery-grid, .tech-grid, .contact-grid { grid-template-columns:1fr; }
  .fun-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  :root { --sb-open: var(--sb-closed); }
  .links-grid, .fun-grid { grid-template-columns:1fr; }
}

/* ── Accordion Sidebar Groups v3.0 ────────────────────── */
.sb-acc-group { }
.sb-acc-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: 13px;
  border-left: 2px solid transparent;
  transition: color .2s, background .2s;
  user-select: none;
}
.sb-acc-header:hover { color: #fff; background: rgba(255,255,255,.05); }
.sb-acc-header .sb-icon { width: 28px; text-align: center; font-size: 16px; flex-shrink: 0; }
.sb-acc-header .sb-label { flex: 1; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; transition: opacity .2s, max-width .3s; max-width: 200px; }
.sb-acc-arrow { font-size: 10px; opacity: .4; transition: transform .25s; flex-shrink: 0; }
.sidebar.closed .sb-acc-header .sb-label,
.sidebar.closed .sb-acc-arrow { opacity: 0; max-width: 0; pointer-events: none; }
.sb-acc-items { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.sb-acc-group.open .sb-acc-items { max-height: 2000px; }
.sb-acc-group.open .sb-acc-arrow { transform: rotate(180deg); }
/* Active group header gets accent color */
.sb-acc-group.open .sb-acc-header { color: #fff; }
.sb-link.sub { padding-left: 44px; font-size: 12.5px; }

/* ── Logo color transition ─────────────────────────────── */
.sb-logo span { transition: color .3s ease; }

/* ── Shared Standalone Sidenav (FPV + Funk Seiten) ───── */
.shared-sidenav {
  position: fixed; top: 0; left: 0; width: 210px; height: 100vh;
  background: var(--bg-deep); border-right: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; z-index: 1000; overflow-y: auto;
  transition: transform .28s ease, width .28s ease;
}
.shared-sidenav.closed { width: 54px; overflow: hidden; }
.ssn-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.07);
  min-height: 60px; flex-shrink: 0;
}
.ssn-logo {
  font-size: 16px; font-weight: 700; letter-spacing: .16em; color: #fff;
  text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: opacity .2s;
}
.shared-sidenav.closed .ssn-logo { opacity: 0; pointer-events: none; }
.ssn-toggle {
  background: none; border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.5);
  border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: 14px;
  flex-shrink: 0; transition: color .2s;
}
.ssn-toggle:hover { color: #fff; }
.ssn-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
.ssn-home-link {
  display: block; padding: 8px 14px; font-size: 11.5px;
  color: rgba(255,255,255,.35); text-decoration: none;
  transition: color .2s;
}
.ssn-home-link:hover { color: rgba(255,255,255,.7); }
.shared-sidenav.closed .ssn-home-link,
.shared-sidenav.closed .sb-acc-header .sb-label,
.shared-sidenav.closed .sb-acc-arrow,
.shared-sidenav.closed .ssn-nav .sb-label { opacity: 0; pointer-events: none; }

/* Body-Offset für shared-sidenav kommt zentral aus shared-nav.css (260px).
   Frühere 210px-Regel hier entfernt (war widersprüchlich/doppelt). */
body.has-shared-nav.ssn-closed { padding-left: 54px; }
@media (max-width: 860px) {
  .shared-sidenav { transform: translateX(-100%); width: 210px !important; }
  .shared-sidenav.ssn-mobile-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,.4); }
  .ssn-mob-toggle {
    display: flex; position: fixed; top: .7rem; left: .7rem; z-index: 1100;
    background: var(--bg-deep); border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.7); border-radius: 7px; padding: 7px 10px;
    cursor: pointer; font-size: 15px;
  }
  body.has-shared-nav { padding-left: 0 !important; }
}
.ssn-mob-toggle { display: none; }