/*
NoraLee — main.css (v13.8)
- Header: mix-blend-mode:difference, Hover hellgruen
- Keine Unterstriche
- Projects: Toggle-Button + Dropdown exakt unter Button
- Frontpage: Edge-Padding (15px → 6vw bei sehr gross), responsive kuerzere Gaps
- Double-cards: gap 15px
- Footer: Marquee full-bleed + Links 15px links/unten
- Hero: weisser, drehender Stern
- Cursor: kleine PNG, bleibt ueberall gleich
*/

:root{
  --bg:#ffffff;
  --fg:#111111;
  --accent:#D9FF00;

  --h1-size: clamp(64px, 10vw, 320px);
  --p-size:  clamp(13px, 1.6vw, 16px);

  /* Basis-Gap (gross ok) */
  --project-gap:  clamp(220px, 12vw, 260px);
  --hero-multiplier: 1.01;
  --hero-gap: calc(var(--project-gap) * var(--hero-multiplier));
  --header-h: clamp(54px, 5.2vw, 66px);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--fg);
  font-family:"Space Mono", ui-monospace, monospace;
  line-height:1.6; letter-spacing:.2px; text-transform:uppercase;
}

/* ===== Custom Cursor: winzig (5x5px Stern) ===== */
:root{ --cursor-url: url("../img/star-cursor.png"); }
body, a, button, [role="button"], input, textarea, select, summary, label{
  cursor: var(--cursor-url) 2.5 2.5, auto; /* Hotspot Mitte des 5px Icons */
}

/* Links – NIE unterstrichen */
a{ color:inherit; text-decoration:none !important; font-style:italic; transition:color .2s ease; }
a:hover{ color:var(--accent); }

/* ===== Header ===== */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  z-index:1000; display:flex; align-items:center;
  background:transparent;
  mix-blend-mode:difference; color:#fff;
}
.site-header .bar{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
}
.brand a{
  color:inherit; font-weight:400; line-height:var(--header-h);
  font-size:clamp(12px,1.4vw,16px);
}
.nav ul{ list-style:none; display:flex; gap:18px; margin:0; padding:0 }
.nav a{
  color:inherit; line-height:var(--header-h);
  font-size:clamp(12px,1.4vw,16px);
}

/* Beim Hover kein Difference (damit hellgruen konstant bleibt) */
.site-header:has(a:hover),
.site-header:has(.projects-panel:hover){ mix-blend-mode:normal; color:var(--fg); }
.site-header:has(a:hover) .brand a,
.site-header:has(a:hover) .nav a{ color:var(--fg); }
.site-header .brand a:hover,
.site-header .nav a:hover,
.projects-panel .projects-list a:hover{ color:var(--accent) !important; }

/* ===== Projects Toggle + Dropdown ===== */
.has-projects{ position:relative; }
.projects-toggle{
  background:none; border:0; padding:0;
  font:inherit; color:inherit;
  line-height:var(--header-h);
  font-size:clamp(12px,1.4vw,16px);
  font-style:italic;
  cursor:inherit;
}
.projects-toggle:hover{ color:var(--accent); }

/* Dropdown exakt unter /PROJECTS/ ausrichten */
.projects-panel{
  display:none; position:absolute; left:0; right:auto; top:100%;
  margin-top:0; width:max-content; max-width:90vw;
  padding:0; background:transparent; color:#fff;
  mix-blend-mode:difference; z-index:999;
}
.has-projects:hover .projects-panel,
.projects-panel:hover{ display:block; }

.projects-panel .projects-list{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:2px; list-style:none; margin:0; padding:8px 0 12px;
  max-height:60vh; overflow:auto;
}
.projects-panel .projects-list a{
  display:block; width:100%; padding:4px 0; line-height:1.4;
  font-size:clamp(12px,1.4vw,16px); color:#fff; font-style:italic; text-decoration:none !important;
}

/* ===== Hero ===== */
.hero{ position:relative; padding:0 15px; margin-top:15px; margin-bottom:var(--hero-gap); }
.hero-inner{ position:relative; overflow:hidden; }
.hero-media{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; z-index:0; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-stack{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:2; text-align:center; color:#fff; mix-blend-mode:difference;
  padding:0 24px; width:100%; max-width:90%;
}
.hero-stack h1{
  margin:0; font-weight:400; letter-spacing:.06em; line-height:.95;
  font-size: clamp(64px, 14vw, 300px);
}
.hero-stack .ast{
  display:inline-block; color:#fff; animation: spinStar 8s linear infinite; transform-origin:center;
}
@keyframes spinStar{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.hero-stack p{ margin:.75rem auto 0; font-size:var(--p-size); max-width:70ch; }

/* ===== Projekte Grid (global) ===== */
main.container{ max-width:none; padding:60px 15px; }
.grid{ display:grid; grid-template-columns:1fr; gap:var(--project-gap); }
.card{ width:100%; margin:0; }
.card > a{ display:block; width:100%; }
.thumb{ display:block; width:100%; background:#000; }
img.thumb, video.thumb{ width:100%; height:auto; object-fit:cover; }

/* Double-Kacheln */
:root{ --double-gap: 15px; }
.card-double .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--double-gap); }
.card-double .meta-bar{ border-top:0; }

/* Meta-Bar */
.meta-bar{
  display:flex; justify-content:space-between; align-items:center;
  background:#fff; color:#111; padding:12px 16px;
  border-top:1px solid #eee; font-size:clamp(12px,1.6vw,16px);
}

/* ===== FRONT PAGE ONLY: Edge-Padding & responsive Gaps ===== */

/* Baseline: immer min. 15px links/rechts direkt auf dem Grid */
body.home .grid{
  padding-left:15px;
  padding-right:15px;
}

/* Sehr grosse Screens (Vollbild) → mehr Luft links/rechts */
@media (min-width: 1440px){
  body.home .grid{
    padding-left:6vw;
    padding-right:6vw;
  }
}

/* Kleinere Screens → Projektabstand kuerzer machen (nur Frontpage) */
@media (max-width: 1200px){
  body.home{ --project-gap: clamp(140px, 10vw, 200px); }
}
@media (max-width: 900px){
  body.home{ --project-gap: clamp(100px, 8vw, 160px); }
}
@media (max-width: 600px){
  body.home{ --project-gap: clamp(70px, 7vw, 120px); }
}

/* ===== FOOTER ===== */
.footer{
  margin-top: clamp(40px, 5vw, 80px);
  padding: 16px 0 0; color:#111; text-transform:uppercase;
}

/* Marquee */
.footer .marquee{
  display:block; overflow:hidden; width:100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top:0; margin-bottom: clamp(16px, 3vw, 28px);
  line-height:1; color:inherit; font-style:normal; cursor:pointer;
}
.footer .marquee:hover{ color:var(--accent); }
.footer .marquee .marquee-track{
  display:flex; width:max-content; align-items:center; will-change:transform;
  animation: marqueeLeft 45s linear infinite;
}
.footer .marquee .marquee-group{
  display:flex; gap: clamp(80px, 8vw, 140px);
  margin-right: clamp(80px, 8vw, 140px);
}
@keyframes marqueeLeft{ from{ transform:translateX(0%);} to{ transform:translateX(-50%);} }
.footer .marquee .wordmark{
  font-weight:400; letter-spacing:.06em; text-transform:uppercase;
  font-style:normal; font-size: clamp(64px, 14vw, 300px);
}
.footer .marquee .ast{ color:var(--accent); }

/* Footer-Links */
.footer .fnav{
  display:flex; gap:24px; flex-wrap:wrap; font-size:clamp(12px,1.4vw,16px);
  justify-content:flex-start; width:100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left:15px; padding-right:15px; margin-bottom:15px;
}
.footer .fnav a{ color:#111; text-decoration:none !important; }
.footer .fnav a:hover{ color:var(--accent); }

/* === Fixes: Hero & Frontpage Padding (v13.9) === */

/* 1) Frontpage: keine doppelten Ränder – Container-Rand weg, Grid behält 15px */
body.home main.container{
  padding-left: 0;
  padding-right: 0;
}

/* 2) Hero: Abstand zum ersten Projekt auf kleineren Screens kürzer */
@media (max-width: 900px){
  .hero{
    margin-bottom: clamp(40px, 10vw, 100px);
  }
}
@media (max-width: 600px){
  .hero{
    margin-bottom: clamp(32px, 8vw, 80px);
  }
}

/* 3) Hero-Titel immer einzeilig halten + runter skalieren auf kleinen Screens */
.hero-stack h1{
  white-space: nowrap;        /* nie umbrechen */
}
@media (max-width: 900px){
  .hero-stack h1{
    font-size: clamp(48px, 12vw, 72px);
    letter-spacing: .05em;    /* minimal enger = hilft einzeilig zu bleiben */
  }
}
@media (max-width: 600px){
  .hero-stack h1{
    font-size: clamp(36px, 16vw, 56px);
    letter-spacing: .045em;
  }
}

/* 4) Sicherheit: Frontpage-Ränder auf klein/mittel exakt 15px (falls was anderes greift) */
@media (max-width: 1200px){
  body.home .grid{ padding-left:15px; padding-right:15px; }
}
@media (max-width: 900px){
  body.home .grid{ padding-left:15px; padding-right:15px; }
}
@media (max-width: 600px){
  body.home .grid{ padding-left:15px; padding-right:15px; }
}