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

:root {
  --bg:     #0a0a0a;
  --bg2:    #111111;
  --bg3:    #1a1a1a;
  --accent: #FFD600;
  --text:   #f5f5f5;
  --muted:  #7a7a7a;
  --border: rgba(255,214,0,0.15);
  --max-w:  1200px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── AMBIENT BLOBS — bewegen sich langsam, pulsieren weich ── */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  z-index: 9997;           /* über Content, unter Grain-Overlay */
  filter: blur(90px);
}

body::before {
  width: 55vw;
  height: 42vw;
  background: radial-gradient(ellipse at center,
    rgba(255,210,0,0.22) 0%,
    rgba(255,170,0,0.10) 45%,
    transparent 70%);
  top: -18%;
  left: -12%;
  animation: blob1 14s ease-in-out infinite;
}

body::after {
  width: 48vw;
  height: 58vw;
  background: radial-gradient(ellipse at center,
    rgba(255,180,0,0.16) 0%,
    rgba(255,130,0,0.07) 45%,
    transparent 70%);
  bottom: -22%;
  right: -16%;
  animation: blob2 11s ease-in-out infinite alternate;
}

@keyframes blob1 {
  0%   { transform: translate(  0,    0)  scale(1);    opacity: .5;  }
  35%  { transform: translate( 8vw, 10vh) scale(1.18); opacity: .85; }
  70%  { transform: translate( 3vw, -6vh) scale(0.88); opacity: .6;  }
  100% { transform: translate(  0,    0)  scale(1);    opacity: .5;  }
}

@keyframes blob2 {
  0%   { transform: translate(   0,    0) scale(1);    opacity: .38; }
  50%  { transform: translate(-9vw, -7vh) scale(1.22); opacity: .72; }
  100% { transform: translate( 4vw,  5vh) scale(0.84); opacity: .44; }
}

/* ── GRAIN OVERLAY — konstante Textur, kein Pulsieren ── */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;   /* eigener GPU-Layer → über composited Video */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0.8 0 0 0 0.8 1 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  opacity: 0.04;
  animation: grainShift 0.12s steps(1) infinite;
}

@keyframes grainShift {
  0%   { background-position:   0px   0px; }
  14%  { background-position:  -7px   4px; }
  28%  { background-position:   5px  -7px; }
  42%  { background-position:  -4px   7px; }
  57%  { background-position:   8px  -3px; }
  71%  { background-position:  -6px   5px; }
  85%  { background-position:   3px  -6px; }
  100% { background-position:  -5px   3px; }
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 5vw;
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: padding .3s;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--muted);
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 500; transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--accent); }
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  background: none; border: none; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--text); transition: all .3s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-mobile {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(10,10,10,0.97); flex-direction: column;
  align-items: center; justify-content: center; gap: 2.5rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  text-decoration: none; color: var(--text);
  font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; transition: color .2s;
}
.nav-mobile a:hover { color: var(--accent); }

/* ── FOOTER ── */
footer {
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 2.5rem 5vw;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.footer-logo img { height: 36px; opacity: .8; }
.footer-links { display: flex; gap: 2rem; list-style: none; }
.footer-links a {
  text-decoration: none; color: var(--muted); font-size: .78rem; transition: color .2s;
}
.footer-links a:hover { color: var(--text); }
.footer-contact { display: flex; flex-direction: column; gap: .4rem; }
.footer-contact a {
  text-decoration: none; color: var(--muted); font-size: .78rem;
  transition: color .2s; letter-spacing: .02em;
}
.footer-contact a:hover { color: var(--accent); }
.footer-copy { color: var(--muted); font-size: .75rem; }

/* ── SECTIONS ── */
section { padding: 7rem 5vw; }
.inner { max-width: var(--max-w); margin: 0 auto; }
.section-eyebrow {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .8rem; font-weight: 500;
}
.section-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1rem;
}
.section-desc {
  color: var(--muted); font-weight: 300;
  max-width: 520px; line-height: 1.9; font-size: 1rem;
}

/* ── PAGE HERO (subpages) ── */
.page-hero {
  padding: 9rem 5vw 5rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.page-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.page-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900; line-height: 1.0; letter-spacing: -.03em;
  margin-top: 1rem;
}
.page-hero h1 em { font-style: normal; color: var(--accent); }
.page-hero .lead {
  font-size: clamp(.9rem, 1.8vw, 1.1rem); color: var(--muted);
  font-weight: 300; line-height: 1.9; max-width: 540px; margin-top: 1.5rem;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .7rem; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.breadcrumb a { text-decoration: none; color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { color: rgba(255,214,0,0.3); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--accent); color: #0a0a0a;
  padding: .9rem 2rem; border-radius: 3px;
  font-family: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .2s, transform .2s;
}
.btn:hover { background: #FFE033; transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--accent);
  border: 1px solid rgba(255,214,0,0.5);
}
.btn-outline:hover { background: var(--accent); color: #0a0a0a; }

/* ── PROJEKT CARDS ── */
.projekte-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.projekt-card {
  display: block; text-decoration: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.projekt-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.projekt-img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1a1410, #2a1f0f);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.projekt-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, opacity .25s; }
.projekt-card:hover .projekt-img img { transform: scale(1.04); }
.projekt-dots {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2; pointer-events: none;
}
.projekt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background .25s;
}
.projekt-dot.active { background: #fff; }
.projekt-placeholder {
  font-size: 2.5rem; color: rgba(255,214,0,0.12);
}
.projekt-body { padding: 1.2rem 1.5rem; }
.projekt-tag {
  font-size: .68rem; color: var(--accent); font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: .4rem;
}
.projekt-title { font-size: 1rem; font-weight: 600; margin-bottom: .3rem; }
.projekt-date { font-size: .78rem; color: var(--muted); }
.projekte-empty {
  grid-column: 1 / -1; text-align: center;
  padding: 4rem 2rem; color: var(--muted); font-size: .9rem;
}

/* ── PROJEKT-MODAL ── */
#proj-modal { display:none; position:fixed; inset:0; z-index:8000; align-items:center; justify-content:center; }
#proj-modal.open { display:flex; }
.pm-bd { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); }
.pm-panel {
  position:relative; z-index:1; background:var(--bg2); border:1px solid var(--border);
  border-radius:6px; max-width:860px; width:calc(100% - 2rem);
  max-height:90vh; overflow-y:auto; display:flex; flex-direction:column;
}
@media (min-width:700px) { .pm-panel { flex-direction:row; max-height:80vh; } }
.pm-close {
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  background:rgba(0,0,0,.5); border:none; color:#fff; font-size:1.5rem;
  width:2rem; height:2rem; border-radius:50%; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.pm-close:hover { background:rgba(255,255,255,.1); }
.pm-stage {
  position:relative; flex:0 0 55%; background:#0d0d0d;
  border-radius:6px 6px 0 0; overflow:hidden; min-height:240px;
  display:flex; align-items:center; justify-content:center;
}
@media (min-width:700px) { .pm-stage { border-radius:6px 0 0 6px; min-height:380px; } }
.pm-img { width:100%; height:100%; object-fit:contain; transition:opacity .15s; display:block; }
.pm-arr {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); border:none; color:#fff; font-size:1.8rem;
  padding:.3rem .7rem; cursor:pointer; border-radius:3px; line-height:1;
  transition:background .2s;
}
.pm-arr:hover { background:rgba(0,0,0,.75); }
.pm-p { left:.5rem; }
.pm-n { right:.5rem; }
.pm-info { flex:1; padding:2rem; display:flex; flex-direction:column; gap:.6rem; }
.pm-tag {
  font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--accent);
}
.pm-title { font-size:1.3rem; font-weight:700; line-height:1.3; margin:0; }
.pm-ort { font-size:.82rem; color:var(--muted); }
.pm-desc { font-size:.88rem; color:var(--muted); line-height:1.7; margin-top:.5rem; }

/* ── COOKIE-CONSENT-BANNER ── */
#cc-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10000;
  background: #111111;
  border-top: 1px solid rgba(255,214,0,0.25);
  padding: 1.1rem 5vw;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s;
  opacity: 0;
  box-shadow: 0 -4px 32px rgba(0,0,0,.6);
}
#cc-banner.cc-visible {
  transform: translateY(0);
  opacity: 1;
}
#cc-banner.cc-hide {
  transform: translateY(100%);
  opacity: 0;
}
.cc-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cc-text {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 300;
  flex: 1;
  min-width: 0;
}
.cc-text strong { color: var(--text); font-weight: 600; }
.cc-text a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.cc-text a:hover { text-decoration: underline; }
.cc-actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cc-btn {
  white-space: nowrap;
  font-size: .78rem;
  padding: .7rem 1.4rem;
}
@media (max-width: 600px) {
  .cc-inner { flex-direction: column; align-items: stretch; }
  .cc-actions { flex-direction: row; justify-content: stretch; }
  .cc-btn { flex: 1; text-align: center; justify-content: center; }
}

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--border); max-width: var(--max-w); margin: 0 auto; }

/* ── FOCUS STATES (Keyboard Navigation / Accessibility) ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Buttons und Links mit eigenem Hintergrund: Outline genügt */
.btn:focus-visible,
.btn-outline:focus-visible,
.filter-btn:focus-visible,
.nav-hamburger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .projekte-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  section { padding: 5rem 5vw; }
  .page-hero { padding: 8rem 5vw 4rem; }
  .projekte-grid { grid-template-columns: 1fr; }
}