/* =========================================================
   GLASSMORPHISM UI SYSTEM
   Auto Dark / Light via prefers-color-scheme
   ========================================================= */

/* =========================
   1. THEME TOKENS
   ========================= */

/* ---------- DARK (default) ---------- */
:root{
  color-scheme: dark;

  /* Backgrounds */
  --bg-1: #0f1724;
  --bg-2: #0b1220;

  /* Glass layers */
  --glass-base: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.10);
  --glass-soft: rgba(255,255,255,0.03);
  --glass-border: rgba(255,255,255,0.12);

  /* Text */
  --text: #e6eef8;
  --muted: #b9c6d9;

  /* Accent */
  --accent-1: #7c5cfc;
  --accent-2: #40dca7;
  --accent-gradient: linear-gradient(
    90deg,
    var(--accent-1),
    var(--accent-2)
  );

  /* Shadows */
  --glass-shadow: 0 10px 36px rgba(2,6,23,0.7);

  /* Radius */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;

  /* Motion */
  --fast: 150ms;
  --medium: 280ms;
}

/* ---------- LIGHT (auto) ---------- */
@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;

    --bg-1: #f5f9ff;
    --bg-2: #eaf2ff;

    --glass-base: rgba(255,255,255,0.65);
    --glass-strong: rgba(255,255,255,0.78);
    --glass-soft: rgba(255,255,255,0.45);
    --glass-border: rgba(255,255,255,0.9);

    --text: #0b1220;
    --muted: #334155;

    --glass-shadow: 0 14px 34px rgba(15,30,60,0.14);
  }
}

/* =========================
   2. BASE / RESET
   ========================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  min-height:100%;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 12% 10%, rgba(124,92,252,0.14), transparent 35%),
    radial-gradient(900px 500px at 88% 90%, rgba(64,220,167,0.10), transparent 35%),
    var(--bg-1);
  -webkit-font-smoothing: antialiased;
}

/* =========================
   3. GLASS CORE
   ========================= */

.glass{
  border-radius: var(--radius-lg);
  padding:1.25rem;
  background: linear-gradient(
    180deg,
    var(--glass-base),
    var(--glass-soft)
  );
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition:
    transform var(--medium),
    box-shadow var(--medium);
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))){
  .glass{
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
  }
}

.glass:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 52px rgba(2,6,23,0.75);
}

/* Variants */
.glass-strong{
  background: linear-gradient(
    180deg,
    var(--glass-strong),
    var(--glass-soft)
  );
}

.glass-soft{
  padding:.75rem;
  border-radius: var(--radius-sm);
}

/* Layered glow */
.glass-layer{
  position:relative;
}
.glass-layer::after{
  content:"";
  position:absolute;
  inset:-12px;
  background: radial-gradient(
    circle at top,
    rgba(124,92,252,0.25),
    transparent 60%
  );
  filter: blur(40px);
  z-index:-1;
}

/* =========================
   4. TYPOGRAPHY
   ========================= */

.h1{ font-size:2rem; margin:.2rem 0 }
.h2{ font-size:1.3rem; margin:.2rem 0 }
.kicker{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.lead{
  color:var(--muted);
  line-height:1.5;
}

/* Gradient text */
.gradient-text{
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip:text;
  -webkit-text-fill-color: transparent;
}

/* =========================
   5. BUTTONS
   ========================= */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem 1.1rem;
  border-radius: var(--radius-md);
  border:1px solid var(--glass-border);
  background: var(--glass-base);
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  transition:
    transform var(--fast),
    box-shadow var(--fast);
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(2,6,23,0.5);
}

/* Accent */
.btn-accent{
  background: var(--accent-gradient);
  color:white;
  border:none;
}

/* Ghost */
.btn-ghost{
  background: transparent;
}

/* =========================
   6. CARDS / GRID
   ========================= */

.card{
  overflow:hidden;
}

.card-header{
  padding:1rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;
  gap:.8rem;
  align-items:center;
}

.card-body{
  padding:1rem;
}

.grid{
  display:grid;
  gap:1rem;
}

.grid-auto{
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}

/* =========================
   7. FORMS
   ========================= */

.input{
  width:100%;
  padding:.6rem .75rem;
  border-radius: var(--radius-sm);
  border:1px solid var(--glass-border);
  background: var(--glass-soft);
  color:var(--text);
  outline:none;
}

.input:focus{
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.2);
}

/* =========================
   8. MODAL
   ========================= */

.modal-backdrop{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
}

.modal{
  max-width:900px;
  width:92%;
  max-height:88vh;
  overflow:auto;
}

/* =========================
   9. UTILITIES
   ========================= */

.center{ display:flex; align-items:center; justify-content:center }
.mt{ margin-top:1rem }
.hr{
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
  margin:1rem 0;
}

/* =========================
   10. ACCESSIBILITY
   ========================= */

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}


/* =========================
   GLASS HEADER
   ========================= */

.header{
  position: sticky;
  top:0;
  z-index:900;

  width:100%;
  padding:.6rem 1.2rem;

  background: linear-gradient(
    180deg,
    var(--glass-base),
    var(--glass-soft)
  );

  border-bottom:1px solid var(--glass-border);
  box-shadow: 0 6px 24px rgba(2,6,23,0.35);

  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);

  transition:
    box-shadow var(--medium),
    background var(--medium);
}

/* Fallback ohne backdrop-filter */
@supports not ((backdrop-filter: blur(8px))){
  .header{
    background: var(--glass-base);
  }
}

/* Inner container */
.header-inner{
  max-width:1200px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* Brand / Logo */
.header-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:700;
  letter-spacing:.02em;
}

.header-brand span{
  font-size:1.05rem;
}

/* Navigation */
.header-nav{
  display:flex;
  align-items:center;
  gap:1.2rem;
}

.header-nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:500;
  position:relative;
  opacity:.85;
  transition:opacity var(--fast);
}

.header-nav a:hover{
  opacity:1;
}

/* Active underline */
.header-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:2px;
  border-radius:2px;
  background: var(--accent-gradient);
  opacity:0;
  transform: scaleX(0.6);
  transition: opacity var(--fast), transform var(--fast);
}

.header-nav a:hover::after{
  opacity:1;
  transform: scaleX(1);
}

/* Actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:.6rem;
}

/* =========================
   HEADER ELEVATE ON SCROLL
   (Pure CSS)
   ========================= */

/* Wenn Header nicht mehr am oberen Rand ist */
@supports (position: sticky){
  .header{
    background: linear-gradient(
      180deg,
      var(--glass-base),
      var(--glass-soft)
    );
  }

  body:has(.header){
    scroll-padding-top: 80px;
  }
}
@media (max-width: 860px){

  .header-nav{
    display:none;
  }

  .header-actions{
    gap:.4rem;
  }

  .header-menu{
    display:inline-flex;
  }
}

/* Hamburger Button */
.header-menu{
  display:none;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--glass-border);
  background: var(--glass-base);
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.header-menu span{
  width:18px;
  height:2px;
  background: var(--text);
  position:relative;
}

.header-menu span::before,
.header-menu span::after{
  content:"";
  position:absolute;
  width:100%;
  height:2px;
  background: var(--text);
  left:0;
}

.header-menu span::before{ top:-6px }
.header-menu span::after{ top:6px }

.mobile-nav{
  position:fixed;
  inset:80px 1rem auto 1rem;
  padding:1rem;

  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    var(--glass-strong),
    var(--glass-soft)
  );

  border:1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow: var(--glass-shadow);
  display:none;
}

.mobile-nav a{
  display:block;
  padding:.7rem;
  color:var(--text);
  text-decoration:none;
  border-radius: var(--radius-sm);
}

.mobile-nav a:hover{
  background: rgba(255,255,255,0.06);
}

/* Checkbox hack (optional) */
#nav-toggle{ display:none }

#nav-toggle:checked ~ .mobile-nav{
  display:block;
}


/* =========================
   LINKS
   ========================= */

a{
  color: var(--accent-1);
  text-decoration: none;
  position: relative;
  font-weight: 500;
  transition:
    color var(--fast),
    opacity var(--fast);
}

a:hover{
  color: var(--accent-2);
}

/* Subtile Underline Animation */
a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1.5px;
  background: var(--accent-gradient);
  opacity:0;
  transform: scaleX(0.6);
  transition: opacity var(--fast), transform var(--fast);
}

a:hover::after{
  opacity:1;
  transform: scaleX(1);
}

/* Fokus (Accessibility) */
a:focus-visible{
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Muted link (z. B. Footer) */
.link-muted{
  color: var(--muted);
}
.link-muted:hover{
  color: var(--text);
}

/* Button-artiger Link */
.link-button{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .75rem;
  border-radius: var(--radius-sm);
  background: var(--glass-soft);
  border:1px solid var(--glass-border);
}

/* Externer Link Icon (optional) */
.link-external::after{
  content:"↗";
  margin-left:.25rem;
  font-size:.8em;
  opacity:.6;
}
/* =========================
   DETAILS / SUMMARY
   ========================= */

details{
  border-radius: var(--radius-md);
  border:1px solid var(--glass-border);
  background: linear-gradient(
    180deg,
    var(--glass-base),
    var(--glass-soft)
  );
  box-shadow: var(--glass-shadow);
  overflow:hidden;
}

/* Abstand bei mehreren Details */
details + details{
  margin-top:.75rem;
}
summary{
  list-style:none;
  cursor:pointer;
  padding:.9rem 1.1rem;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;

  font-weight:600;
  user-select:none;
}

/* Entfernt Standard Marker */
summary::-webkit-details-marker{
  display:none;
}

/* Hover Effekt */
summary:hover{
  background: rgba(255,255,255,0.04);
}
details[open] summary{
  background: rgba(255,255,255,0.06);
}
/* Pfeil */
summary::after{
  content:"▾";
  font-size:.9rem;
  opacity:.6;
  transform: rotate(0deg);
  transition: transform var(--medium), opacity var(--fast);
}

/* Open State */
details[open] summary::after{
  transform: rotate(180deg);
  opacity:1;
}
.details-content{
  padding: 0 1.1rem 1rem;
  color: var(--muted);
  line-height:1.55;
}

/* Divider zwischen summary & content */
details[open] summary{
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.details-accordion summary{
  background: transparent;
}

.details-accordion[open]{
  background: linear-gradient(
    180deg,
    var(--glass-strong),
    var(--glass-soft)
  );
}