/* ======================================================
   Squiezzl Portfolio – styles.css (clean + stable Masonry)
   ====================================================== */

/* --- Reset / Tokens --- */
* { box-sizing: border-box; }
:root{
  /* Farben & Layout */
  --bg:#0b0f14; --surface:#121822; --fg:#e9edf3; --muted:#9aa3ad; --border:#1f2733;
  --accent:#00e5ff; --accent-2:#ff8a00;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --radius:12px; --card-radius:12px;

  /* Breiten/Gaps */
  --max:1140px;
  --gap:12px;              /* EINHEITLICHER Abstand in der Galerie */
  --tile-min:340px;        /* Ziel-Kachelbreite (steuert Spaltenanzahl) */

  /* Header-Icongröße */
  --btn-h:40px;
}
html[data-theme="light"]{
  --bg:#f6f7fb; --surface:#ffffff; --fg:#0b0f14; --muted:#5d6671; --border:#e6e9ef;
  --shadow:0 12px 32px rgba(10,20,40,.08);
}

html,body{ height:100%; overflow-x:hidden; }
body{
  margin:0; color:var(--fg); background:var(--bg);
  font-family:ui-sans-serif, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

/* Hintergrund (Glow + feines Grid) */
body::before{
  content:""; position:fixed; inset:-25%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 40% at 90% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(45% 30% at 15% 10%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%);
  filter:blur(18px);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.10;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size:44px 44px;
}

/* Layout */
.container{ width:min(100% - 2rem, var(--max)); margin-inline:auto; }
.container-full{ width:100%; padding-inline:clamp(8px,2vw,24px); margin-inline:auto; overflow-x:clip; }
.section{ padding:clamp(56px,7vw,96px) 0; scroll-margin-top: var(--anchor-offset, 72px); }
h1,h2,h3{ line-height:1.12; margin:0 0 .6em; letter-spacing:-.02em; }
h1{ font-size:clamp(2.2rem,5vw,4rem); }
h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
p{ margin:0 0 1rem; }
.muted{ color:var(--muted); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.header-inner{ display:grid; grid-template-columns:1fr auto auto; gap:1rem; align-items:center; padding:.8rem 0; }
.logo{ font-weight:800; text-decoration:none; color:var(--fg); letter-spacing:.2px; font-size:1.1rem; }
.logo .dot{ color:var(--accent); }
.nav{ display:none; gap:1rem; }
.nav a{ color:var(--muted); text-decoration:none; padding:.4rem .6rem; border-radius:8px; }
.nav a:hover{ color:var(--fg); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.header-actions{ display:flex; gap:.5rem; }
@media (min-width:760px){ .nav{ display:inline-flex; } }

/* Buttons/Chips */
.btn, .chip{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1rem; border-radius:999px; border:1px solid var(--border);
  cursor:pointer; text-decoration:none; font-weight:700;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  contain: layout paint; -webkit-tap-highlight-color:transparent;
}
.btn{
  color:#0b0f14;
  background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%) 100%);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
.btn-ghost{ background: color-mix(in srgb, var(--surface) 85%, transparent); color:var(--fg); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.header-actions .btn{
  width: var(--btn-h); min-width: var(--btn-h); height: var(--btn-h); min-height: var(--btn-h);
  padding:0; display:inline-grid; place-items:center; line-height:1;
}
.header-actions .btn .icon{ width:20px; height:20px; display:block; fill:currentColor; }

/* Hero */
.hero{ position:relative; }
.hero-inner{ padding:clamp(68px,10vw,120px) 0; position:relative; z-index:2; }
.gradient-text{
  background: linear-gradient(90deg, var(--fg), color-mix(in srgb, var(--accent) 50%, var(--fg)) 40%, color-mix(in srgb, var(--accent-2) 50%, var(--fg)) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block; line-height:1.15; padding-bottom:.08em; overflow:visible;
}
.hero-cta{ display:flex; gap:.6rem; flex-wrap:wrap; }
.hero-art .grid{
  position:absolute; inset:-20% -10% auto -10%; height:60%; opacity:.22;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px);
  background-size:42px 42px;
}
.hero-art .glow{
  position:absolute; inset:-30% -10% -20% -10%;
  background:
    radial-gradient(600px 300px at 20% 30%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    radial-gradient(400px 200px at 80% 20%, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 60%);
  filter:blur(20px); opacity:.6; pointer-events:none;
}

/* Section-Head mit Filtern */
.section-head{ margin-bottom:1rem; }
.head-with-filters{ display:grid; grid-template-columns:auto 1fr; align-items:end; gap:.8rem 1rem; }
.head-with-filters .filters{ justify-self:end; margin:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ background:var(--surface); color:var(--muted); line-height:1; height:36px; padding:0 .9rem; }
.chip[aria-checked="true"]{
  color:var(--fg);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* ======================================================
   GALLERY – Stable Masonry (Original-Format, identische Gaps)
   ====================================================== */
#portfolio .container-full{ padding-inline: 0 !important; } /* echte Full-bleed */

#gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  grid-auto-rows: 2px;        /* feine Basis (für exakte Spans) */
  grid-auto-flow: dense;
  gap: var(--gap);            /* EINHEITLICHE Abstände */
  width:100vw; max-width:100vw; margin:0; padding-inline: clamp(8px, 2vw, 16px);
}

#gallery .card{
  margin:0 !important; padding:0 !important; border:0 !important;
  border-radius: var(--card-radius); overflow:hidden; isolation:isolate;
  transition: transform .25s ease, filter .4s ease;
}
#gallery .card.loading{ visibility: hidden; } /* erst zeigen, wenn vermessen */
#gallery .card[hidden]{ display:none !important; }

#gallery .card img{
  display:block; width:100%; height:auto !important;
  border-radius: inherit;
  clip-path: inset(0 round var(--card-radius)); /* Safari-Ecken-Fix */
  transform: translateZ(0);
  transition: transform .6s ease, filter .6s ease;
}

#gallery .card:hover{ transform: translateY(-1px); }
#gallery .card:hover img{ transform: scale(1.02); filter: contrast(1.04) saturate(1.04); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background: color-mix(in srgb, #000 78%, transparent);
  display:grid; place-items:center; padding:2rem; opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease; z-index: 9999 !important;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-img{
  max-width:min(92vw, 1400px); max-height:80vh;
  border-radius:12px; box-shadow:var(--shadow); border:1px solid var(--border);
  cursor:zoom-in; transform-origin:center center;
}
.lightbox-caption{ margin-top:.6rem; color:var(--muted); text-align:center; max-width:80ch; }
.lightbox-close, .lightbox-nav{
  position:fixed; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--fg); cursor:pointer;
}
.lightbox-close{ top:12px; right:12px; font-size:24px; line-height:1; }
.lightbox-nav{ top:50%; transform:translateY(-50%); }
.lightbox-nav.prev{ left:12px; } .lightbox-nav.next{ right:12px; }

/* Back to top */
.to-top{
  position:fixed; right:14px; bottom:14px; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface); color:var(--fg);
  display:grid; place-items:center; cursor:pointer; opacity:0; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease; z-index:40;
}
.to-top.show{ opacity:1; transform:translateY(0); }

/* ===== Footer: Balken wie Header (Glass + Lightline) ===== */
.site-footer{
  position: relative;
  margin-top: 48px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  overflow: visible;
}

/* Sehr dezenter Glow wie am Header – ohne dicken Balken */
.site-footer::after{
  content:"";
  position:absolute; left:0; right:0; top:-28px; height:56px;
  background:
    radial-gradient(700px 140px at 18% 0%,
      color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(700px 140px at 82% 0%,
      color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%);
  filter: blur(16px);
  opacity:.6;
  pointer-events:none;
  z-index:0;
}

.footer-main, .footer-sub{ position:relative; z-index:1; }
.footer-main{
  display:grid; gap:1rem; grid-template-columns:1fr auto; align-items:center; padding:14px 0;
}
.footer-main .brand{ display:grid; gap:.2rem; align-content:center; }
.footer-main .tagline{ color:var(--muted); margin:0; }
.footer-sub{ padding:12px 0 28px; color:var(--muted); }
.footer-main, .footer-sub{ position:relative; z-index:1; }

/* Reveal Fallback */
[data-reveal]{ opacity:1; transform:none; }
.reveal-ready [data-reveal]{ opacity:0; transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
.reveal-ready [data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* Responsive */
@media (min-width: 1280px){ :root{ --max: 1280px; } }
@media (min-width: 1600px){ :root{ --max: 1400px; } }
@media (min-width: 1920px){ :root{ --max: 1600px; } }
@media (min-width: 2560px){ :root{ --max: 1680px; } }

@media (max-width: 900px){
  .section{ padding: clamp(36px, 7vw, 64px) 0; }
  :root{ --tile-min: 200px; }
}
@media (max-width: 600px){
  .section{ padding: clamp(28px, 6vw, 48px) 0; }
  :root{ --tile-min: 320px; --btn-h:36px; }
  .header-inner{ grid-template-columns:1fr auto; gap:.6rem; }
  .nav{ display:none !important; }
  .header-actions .btn .icon{ width:18px; height:18px; }
}

/* Skip-Link unsichtbar, nur bei Tastaturfokus anzeigen */
.skip-link{
  position:absolute;
  left:-9999px; top:auto;
  width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  border:0; padding:0; margin:0;
}
.skip-link:focus-visible{
  position:fixed;
  left:12px; top:10px;
  width:auto; height:auto;
  clip:auto; clip-path:none;
  padding:.5rem .75rem;
  background:var(--surface);
  color:var(--fg);
  border:1px solid var(--border);
  border-radius:8px;
  text-decoration:none;
  z-index:1000;
  box-shadow: var(--shadow);
}

/* Footer-Icons wieder sichtbar & hübsch */
.footer-main{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:1rem;
}

.footer-meta{ display:flex; align-items:center; }
.socials{ display:flex; gap:.6rem; }

.social{
  display:grid; place-items:center;
  width:40px; height:40px;
  border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  color: var(--muted);
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.social:hover{
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 26%, transparent);
  transform: translateY(-1px);
}

/* SVGs übernehmen die Textfarbe */
.social svg{
  width:20px; height:20px; display:block;
  fill: currentColor;
}

/* === Globaler Button-Hover wie im Footer (Lift + Glow) === */
.btn, .chip, .social{
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    border-color .2s ease,
    background .2s ease;
  will-change: transform;
}

/* Standard-Look anpassen (leicht „ghosty“ für Chips) */
.chip{
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--border);
  color: var(--muted);
}
.chip[aria-checked="true"]{
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

/* Hover: leichter Lift + Glow + Akzent-Rahmen */
.btn:hover, .chip:hover, .social:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--fg);
}

/* Active: zurück auf Ebene, dezenter Schatten */
.btn:active, .chip:active, .social:active{
  transform: translateY(0);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 18%, transparent);
  filter: brightness(.98);
}

/* Tastaturfokus: dezenter Ring */
.btn:focus-visible, .chip:focus-visible, .social:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Header-Icons: Footer-Glow, aber ohne Bewegung */
.header-actions .btn{
  transform: none !important;               /* kein Springen */
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 24%, transparent) !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.header-actions .btn:hover{
  transform: none !important;               /* weiterhin stabil */
  color: var(--fg);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border)) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 36%, transparent) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.header-actions .btn:active{
  transform: none !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 22%, transparent) !important;
  filter: brightness(.98);
}

.header-actions .btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* Hero-CTA: Text immer dunkel – auch bei Hover/Active/Focus */
.hero-cta .btn{
  --cta-fg: #0b0f14;
  color: var(--cta-fg) !important;
}
.hero-cta .btn:hover,
.hero-cta .btn:active,
.hero-cta .btn:focus-visible{
  color: var(--cta-fg) !important;
}

/* Ultrawide-Fix: Galerie zentriert, keine Phantom-Spalten */
:root{
  --gallery-max: 1800px;          /* ggf. anpassen: 1600–2000px */
}

#portfolio .container-full{
  padding-inline: 0 !important;   /* echte volle Breite für die Galerie */
}

#gallery{
  /* 1) Spalten: auto-fit kollabiert leere Tracks → kein rechter Leerraum */
  grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr)) !important;

  /* 2) Breite zentrieren (statt starr 100vw) */
  width: min(100%, var(--gallery-max)) !important;
  margin-inline: auto !important;

  /* sanfte Ränder am Viewportrand */
  padding-inline: clamp(8px, 2vw, 16px) !important;
}

/* Optional: auf extrem breiten Screens etwas größer erlauben */
@media (min-width: 2200px){
  :root{ --gallery-max: 2000px; }
}