/* Stylesheet der vorgerenderten Seiten (/projekte/, /projekt/<id>/ …).
   Bewusst klein und ohne three.js — dieselben Farben und Schriften wie die Spirale. */
:root{
  --bg:#0e0e0d; --ink:#f0ede6; --mut:#8a877f; --acc:#e8c15a;
  --panel:#f4f1ea; --panel-ink:#141412; --line:rgba(255,255,255,.08);
  --font-d:'Syne',sans-serif; --font-b:'Space Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--font-b);
  font-weight:300;line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:#0e0e0d;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;
  padding:1.1rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(14,14,13,.92);backdrop-filter:blur(8px);z-index:10}
.wortmarke{font-family:var(--font-d);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;text-decoration:none}
.wortmarke sup{font-size:.5em;color:var(--acc)}
.kopf__nav{display:flex;flex-wrap:wrap;gap:.3rem clamp(.8rem,2.5vw,1.8rem);font-size:.9rem}
.kopf__nav a{color:var(--mut);text-decoration:none}
.kopf__nav a:hover{color:var(--acc)}

main{max-width:1240px;margin:0 auto;padding:0 clamp(1rem,4vw,3rem) 4rem}
h1{font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(2.1rem,6vw,4rem);margin:.4em 0 .3em;
  /* Lange deutsche Komposita ("Gastronomiefotografie") sprengen sonst
     die Zeile und schieben die ganze Seite waagerecht. */
  overflow-wrap:break-word;hyphens:auto}
h2{font-family:var(--font-d);font-weight:700;font-size:clamp(1.3rem,3vw,1.9rem);margin:2.4rem 0 1rem}
h3{font-family:var(--font-d);font-weight:700;font-size:1.05rem;margin:0 0 .2rem}

.krumen{padding-top:1.6rem;font-size:.82rem;color:var(--mut)}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.krumen li+li::before{content:'/';margin-right:.45rem;color:var(--line)}
.krumen a{color:var(--mut)}
.krumen a:hover{color:var(--acc)}

.vorspann{color:var(--mut);max-width:62ch;font-size:1.02rem}
.band{background:var(--acc);color:#0e0e0d;font-weight:500;padding:.7rem 1rem;
  margin:1.2rem 0 0;border-radius:3px;font-size:.9rem}

.fall__meta{display:flex;flex-wrap:wrap;gap:1.1rem;color:var(--acc);
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 1.1rem}
.fall__blurb{max-width:62ch;font-size:1.1rem;color:var(--ink);margin:0 0 1.2rem}
.fall__text{max-width:62ch;color:var(--mut)}
.fall__spirale{margin:2rem 0}
.knopf{display:inline-block;border:1px solid var(--acc);color:var(--acc);
  text-decoration:none;padding:.7rem 1.4rem;border-radius:2px;font-size:.9rem;
  letter-spacing:.04em;transition:background .18s,color .18s}
.knopf:hover{background:var(--acc);color:#0e0e0d}

.raster{columns:3 300px;column-gap:14px;margin-top:2.2rem}
.raster__stueck{break-inside:avoid;margin:0 0 14px}
.raster__stueck img,.raster__stueck video{width:100%;border-radius:2px;background:#1a1a18}

.karten{list-style:none;margin:2.2rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.karte a{text-decoration:none;display:block;height:100%}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;background:#1a1a18}
.karte__text{padding:.85rem 0}
.karte__text h2,.karte__text h3{margin:0 0 .2rem;font-size:1.15rem}
.karte__meta{color:var(--acc);font-size:.75rem;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 .4rem}
.karte__blurb{color:var(--mut);font-size:.92rem;margin:0}
.karte a:hover h2,.karte a:hover h3{color:var(--acc)}

.recht{max-width:70ch}
.recht h2{font-size:1.12rem;margin:2rem 0 .4rem;border:0}
.recht p{margin:.5rem 0}

.watch{max-width:520px;margin:1.5rem 0}
.watch video{width:100%;border-radius:3px;background:#1a1a18}

.blaettern{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;margin-top:3.5rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.9rem}
.blaettern__zu{text-decoration:none;display:block;max-width:44%}
.blaettern__zu span{display:block;color:var(--mut);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.blaettern__zu strong{font-family:var(--font-d);font-weight:700}
.blaettern__zu--rechts{text-align:right;margin-left:auto}
.blaettern__zu:hover strong{color:var(--acc)}
.blaettern__alle{color:var(--mut);text-decoration:none}
.blaettern__alle:hover{color:var(--acc)}

.fuss{border-top:1px solid var(--line);padding:2.5rem clamp(1rem,4vw,3rem);
  color:var(--mut);font-size:.9rem}
.fuss__spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.6rem;max-width:1240px;margin:0 auto}
.fuss__titel{color:var(--ink);font-family:var(--font-d);font-weight:700;margin:0 0 .4rem}
.fuss p{margin:.15rem 0}
.fuss a{color:var(--mut)}
.fuss a:hover{color:var(--acc)}
.fuss__recht{max-width:1240px;margin:2rem auto 0;font-size:.8rem}

@media (max-width:700px){
  .raster{columns:1}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}