/* ================================
   Fonts: Brandon Grotesk (self-host)
   Pfad & Dateinamen bei dir anpassen
   ================================ */
@font-face{
  font-family:"Brandon Grotesque";
  src:url("/assets/css/fonts/brandon/BrandonGrotesque-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Brandon Grotesque";
  src:url("/assets/css/fonts/brandon/BrandonGrotesque-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Brandon Grotesque";
  src:url("/assets/css/fonts/brandon/BrandonGrotesque-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ================================
   Design Tokens (Light = Standard)
   ================================ */
:root {
  --font-sans: "Brandon Grotesque", Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Light */
  --bg: #ffffff;
  --surface: #f6f7f9;
  --surface-2:#eef1f5;
  --text: #0f1220;
  --text-muted:#6b7280;
  --border:#e5e7eb;

  --primary: #3b82f6;        /* Akzent + Badge */
  --primary-2:#2563eb;
  --ring: rgba(59,130,246,.35);

  --success:#10b981;
  --danger:#ef4444;

  /* Card / Button radius & shadow */
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.08);

  /* Aura */
  --aura: radial-gradient(1200px 600px at 50% 20%, rgba(96,165,250,.14), transparent 60%);
  --aura-hero: radial-gradient(900px 500px at 50% 0%, rgba(59,130,246,.18), transparent 60%);
  --aura-footer: radial-gradient(900px 500px at 50% 100%, rgba(59,130,246,.12), transparent 65%);
}

html[data-theme="dark"] {
  --bg: #0d0f14;
  --surface: #141823;
  --surface-2:#10141f;
  --text: #e5e7eb;
  --text-muted:#9aa0aa;
  --border:#1f2432;

  --primary:#60a5fa;
  --primary-2:#3b82f6;
  --ring: rgba(96,165,250,.35);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45);

  --aura: radial-gradient(1200px 600px at 50% 20%, rgba(96,165,250,.18), transparent 60%);
  --aura-hero: radial-gradient(900px 500px at 50% 0%, rgba(37,99,235,.25), transparent 60%);
  --aura-footer: radial-gradient(900px 500px at 50% 100%, rgba(37,99,235,.2), transparent 65%);
}

/* ===== Base ===== */
* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
.nojs {
  background:var(--surface);
  border:1px solid var(--border);
  padding:10px 12px;
  text-align:center;
  font-size:.95rem;
}

/* ===== Containers & Utilities ===== */
.container { width:min(1100px, 92%); margin-inline:auto; }
.page { padding-bottom:56px; }

/* Focus Styles (a11y) */
:where(a,button,input,select,textarea) {
  outline:none;
}
:where(a,button,input,select,textarea):focus-visible {
  box-shadow:0 0 0 3px var(--ring);
  border-radius:10px;
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--primary);
  color:#fff;
  padding:.7rem 1rem;
  border-radius:12px;
  border:0;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  font-weight:600;
}
.btn:hover { text-decoration:none; background:var(--primary-2); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(0); }

/* ================================
   Topbar
   ================================ */
.topbar {
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, var(--surface), transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar__inner {
  width:min(1100px, 92%); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; position:relative;
}
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.brand img { border-radius:12px; box-shadow:var(--shadow-sm); }
.brand__name { font-weight:700; letter-spacing:.2px; }

.nav { display:flex; align-items:center; gap:12px; }
.nav__link {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem .8rem;
  border-radius:10px;
  color:var(--text);
  border:1px solid transparent;
}
.nav__link:hover {
  text-decoration:none;
  background:var(--surface);
  border-color:var(--border);
}

/* Theme Toggle */
.theme-toggle {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .8rem;
  border-radius:12px; border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  transition:background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.theme-toggle:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.theme-toggle i { width:1rem; display:inline-block; }
#iconSun { display:none; } /* JS schaltet um */
.theme-toggle__label { font-weight:600; font-size:.95rem; }

/* Aura im Header */
.aura--top {
  position:absolute; inset:auto 0 -1px 0; height:60px;
  background:var(--aura);
  pointer-events:none;
}

/* ================================
   Hero
   ================================ */
.hero {
  position:relative;
  padding:48px 0 16px;
  background:transparent;
}
.hero__content {
  width:min(1100px, 92%); margin-inline:auto;
}
.hero__title {
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  line-height:1.15;
  margin:0 0 .4rem;
  letter-spacing:.3px;
}
.hero__lead {
  margin:0;
  color:var(--text-muted);
  font-size:clamp(1rem, 2.2vw, 1.15rem);
}
.aura--hero {
  position:absolute; inset:0; pointer-events:none;
  background:var(--aura-hero);
}

/* ================================
   Intro
   ================================ */
.intro {
  margin:22px auto 10px;
  color:var(--text);
}
.intro p { margin:0; color:var(--text-muted); }

/* ================================
   Gallery & Cards
   ================================ */
.gallery {
  margin:20px auto 40px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:16px;
}
.card {
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
}
.card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:color-mix(in hsl, var(--primary) 30%, var(--border));
}
.card__media {
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.card__media img {
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.02);
}
.card__body { padding:12px 12px 14px; }
.card__title { margin:0 0 .4rem; font-weight:700; font-size:1.05rem; }
.card__actions { display:flex; gap:8px; align-items:center; }

/* ================================
   Footer
   ================================ */
.footer {
  position:relative;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, var(--surface));
  padding:18px 0 24px;
}
.footer__grid {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.footer__brand {
  display:flex; align-items:center; gap:.6rem; color:var(--text-muted);
}
.footer__brand img { border-radius:10px; }
.footer__nav { display:flex; gap:12px; flex-wrap:wrap; }
.footer__link {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .6rem;
  border-radius:10px;
  border:1px solid transparent;
  color:var(--text-muted);
}
.footer__link:hover {
  text-decoration:none;
  border-color:var(--border);
  background:var(--surface);
}
.aura--footer {
  position:absolute; inset:0 0 -1px 0; height:100%;
  background:var(--aura-footer);
  pointer-events:none;
}

/* Sticky Footer Layout */
html, body {
  height: 100%;
}
body {
  min-height: 100vh;            /* Höhe = ganze Bildschirmhöhe */
  display: flex;
  flex-direction: column;       /* Header/Main/Footer untereinander */
}
.page {
  flex: 1 0 auto;               /* Hauptbereich dehnt sich aus */
}
.footer {
  flex-shrink: 0;               /* Footer bleibt unten */
}

/* ================================
   Badges / Status (optional helper)
   ================================ */
.badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 8px;
  font-size:.8rem; font-weight:700;
  color:#fff; background:var(--primary);
  border-radius:999px; box-shadow:var(--shadow-sm);
}

/* ================================
   Responsive Tweaks
   ================================ */
@media (max-width: 640px){
  .nav { gap:6px; }
  .nav__link { padding:.5rem .6rem; }
  .theme-toggle { padding:.5rem .6rem; }
  .brand__name { display:none; } /* spart Platz mobil */
}

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

/* Cookie Banner + Modal */
#cc-banner{ position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:12px; }
#cc-banner .cc-wrap{
  width:min(1100px, 96%); margin:0 auto; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-md); padding:12px 14px;
}
#cc-banner .cc-text{ color:var(--text); }
#cc-banner .cc-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#cc-banner .btn--ghost{ background:var(--surface); color:var(--text); border:1px solid var(--border); }

#cc-modal{ position:fixed; inset:0; display:none; z-index:1001; }
#cc-modal.open{ display:block; }
#cc-modal .cc-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(1px); }
#cc-modal .cc-modal{
  position:relative; z-index:1; width:min(720px, 92%); margin:8vh auto 0;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-md); padding:16px;
}
#cc-modal h2{ margin:0 0 10px; }
#cc-modal .cc-group{ display:grid; gap:10px; margin:12px 0; }
#cc-modal .cc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
#cc-modal .cc-modal-actions{ display:flex; justify-content:flex-end; gap:8px; }