/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* ---------- Fonts ---------- */
@font-face{
  font-family:"Geist";
  src:url("fonts/InstrumentSans-Bold.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist1";
  src:url("fonts/Geist-Medium.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist2";
  src:url("fonts/InstrumentSans_SemiCondensed-Medium.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist3";
  src:url("fonts/Outfit-Bold.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Tokens ----------clamp(1.05rem,.95rem + .6vw,1.3rem); */
:root{
  --color-bg:#fff;
  --color-fg:#111;
  --color-muted:#aaaaaa;

  --color-bg:#fff; --color-fg:#111;
  --menu-bg:#000;  --menu-fg:#fff; /* invertiertes Schema */

  --color-invert-bg:#111;
  --color-invert-fg:#fff;

  --footer-gap: clamp(0.75rem, 2.5vw, 2rem);

  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  --fs-0:clamp(.7rem,.71rem + .15vw,.85rem);
  --fs-1:clamp(.7rem,.71rem + .15vw,.85rem);
  --fs-2:clamp(2.3rem,1.8rem + 2.4vw,3.0rem);
  --fs-3:clamp(3.0rem,2.2rem + 4.0vw,4.0rem);
  --fs-4:clamp(.7rem,.7rem + .15vw,1.3rem);

  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-5:5rem; --space-6:2rem;

  /* Container/Gutter (schlank) */
  --page-gutter: clamp(10px, 4vw, 18px);
  --container-max: 99vw;        /* Header & Galerie identisch */
  --gallery-max: var(--container-max);

  /* Grid */
  --cols-mobile: 2;
  --cols-desktop: 9;
  --grid-gap: 34px;               /* integer px → weniger Subpixel-Artefakte */

  /* Zellen (Quadrate, responsive) */
  --cell-size-mobile: clamp(140px, 40vw, 220px);
  --cell-size-desktop: clamp(120px, 10vw, 180px);

  /* fixe Headerhöhe (mobil→desktop) */
  --header-h: clamp(42px, 7vw, 62px);
}

/* ---------- Global ---------- */
body{
  background:var(--color-bg);
  color:var(--color-fg);
  padding-top: var(--header-h); 
  font-family:var(--font-sans);
  font-size:var(--fs-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* iOS/Android: Tap-Highlight deaktivieren, ohne Focus-Outline zu entfernen */
html { -webkit-tap-highlight-color: transparent; }
a, button, .nav-toggle, .card {
  -webkit-tap-highlight-color: transparent;
}
::selection {
  background: #fffb00;
  color: rgb(0, 0, 0);
  text-shadow: none;
}
strong {
	text-transform: uppercase;
}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);height:1px!important;width:1px!important;overflow:hidden}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  position:fixed;left:var(--space-3);top:var(--space-3);
  padding:var(--space-2) var(--space-3);
  background:var(--color-invert-bg);color:var(--color-invert-fg);
  border-radius:6px;z-index:2000;
}

/* ---------- Layout-Container (einheitlich für Header, Galerie, Footer) ---------- */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: content-box; /* Gutter zählt nicht in die max-width hinein */
}

/* ---------- Header / Nav ---------- */
/* Header jetzt fixed */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: none;
}
/* Smooth Farbwechsel */
.site-header, .brand, .nav-toggle, .nav-list a,
.mobile-menu, .mobile-menu__list a {
  transition: color .32s ease, background-color .32s ease;
}

/* Navbar auf exakte Höhe setzen (kein extra padding-block mehr) */
.navbar{ min-height: var(--header-h); padding-block: 0; display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);}
.brand{font-size:var(--fs-1);font-weight:500;letter-spacing:.01em;position:relative;z-index:1001}
.nav-list{display:none;gap:var(--space-5)}
.nav-list a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.nav-toggle{border:none;background:transparent;border-radius:999px;padding:.4rem .8rem;font:inherit;position:relative;z-index:1001}
@media (min-width:900px){.nav-toggle{display:none}.nav-list{display:flex}}

/* ---------- Mobile-Menü (weißes Overlay) ---------- */
/* stärkerer, garantierter Background */
/* statt inset:0 – unterhalb des fixen Headers beginnen */
.mobile-menu{
  position: fixed;
  left: 0; right: 0; top: var(--header-h); bottom: 0;
  z-index: 900;
  background: var(--menu-bg, #fff);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 320ms ease, visibility 0ms linear 320ms;
  display: grid; align-content: start;
  font-family:"Geist2";
}
.mobile-menu::before{ content:""; position:absolute; inset:0; background: var(--menu-bg, #fff); }

/* optional: innen gleichbleibende Seiten-Gutter */
.mobile-menu > .container{ max-width: var(--container-max);
  margin-inline: 0;                 /* statt auto */
  padding-inline: var(--page-gutter);
  box-sizing: content-box; z-index: 901;}
.mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 320ms ease}
.mobile-menu__list{
  display:grid;gap:0;font-size:var(--fs-2); padding-top: 30px;
}
body.menu-open{overflow:hidden}


/* Menü offen: Header invertieren */
.menu-open .site-header{ background: var(--menu-bg); }
.menu-open .brand,
.menu-open .nav-toggle,
.menu-open .nav-list a{ color: var(--menu-fg); }

/* Menü-Overlay invertiert */
.mobile-menu{ background: var(--menu-bg); }
.mobile-menu__list a{ color: var(--menu-fg); line-height: 1.0;}

/* Fokus sichtbar auf dunklem Grund */
.menu-open :focus-visible{ outline-color: var(--menu-fg); }

/* Optional: Underline-Kontrast im Header, wenn ein Desktop-Link aktiv ist */
.menu-open .nav-list a[aria-current="page"]{
  text-decoration-color: currentColor;
}
/* Mobile-Menü: Links bündig ausrichten */
.mobile-menu__list{
  justify-items: start;   /* Grid-Items links ausrichten */
  text-align: left;       /* Text linksbündig */
  align-items: start;     /* vertikal am Start (falls nötig) */
}


/* ---------- Galerie ---------- */
.gallery{ padding-block: var(--space-4); }
@media (min-width:768px){.gallery{ padding-block: var(--space-4); }}

/* Fixed, zentriertes Grid im gemeinsamen Container */
.grid.grid--fixed{
  display:grid;
  grid-template-columns: repeat(var(--cols-mobile), minmax(0,1fr)); /* minmax(0,1fr) gegen Overflow-Ränder */
  gap: var(--grid-gap);

  /* Zentrierung + identischer Gutter wie Header */
  max-width: var(--gallery-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: content-box;
}
.container,
.grid.grid--fixed{
  max-width: var(--container-max);              /* z.B. clamp(1000px, 95vw, 1400px) */
  margin-inline: auto;
  padding-inline: var(--page-gutter);           /* gleicher Gutter links/rechts */
  box-sizing: content-box;
}
@media (min-width:768px){
  .grid.grid--fixed{
    grid-template-columns: repeat(var(--cols-desktop), minmax(0,1fr));
  }
}
/* hält leere Zellen in gleicher 10/16-Höhe */
.grid--fixed .cell.spacer { aspect-ratio: 10 / 16; }


/* Zellen: quadratisch via aspect-ratio (keine grid-auto-rows nötig → weniger Subpixel-Fehler) */
/* WICHTIG: alte quadratische Zellen abschalten */
.cell{ aspect-ratio: auto; }

/* Bild bestimmt die Zeilenhöhe via 16:9 */
.card{ width:100%; height:auto; }
.card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 10 / 16;
  object-fit: cover;
}
.cell.spacer{ background: transparent; }

/* Bild-Kacheln */
.card{position:relative;display:block;width:100%;height:100%;border:none;border-radius:10px;overflow:hidden}
.card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  backface-visibility:hidden;   /* reduziert dünne Kanten bei skalierter Darstellung */
  -webkit-font-smoothing:antialiased;
}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(8px);transition:opacity 360ms ease, transform 360ms ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Globaler Hover-Titel ---------- */
#title-overlay{
  position:fixed;inset:0;display:grid;place-items:center;padding:var(--space-4);
  pointer-events:none;opacity:0;transition:opacity 480ms ease;
  font-size:var(--fs-3);font-weight:500;letter-spacing:.02em;color:#fff;text-align:center;
  mix-blend-mode:exclusion;z-index:800; font-family:"Geist3";
}
#title-overlay{
  transition: opacity 150ms ease; /* vorher evtl. 480ms */
  will-change: opacity;
}
#title-overlay.is-visible{opacity:1}
body.menu-open #title-overlay{opacity:0 !important}

/* ---------- Footer ---------- */
.site-footer{margin-top:var(--space-6);background:var(--color-invert-bg);color:var(--color-invert-fg)}
.site-footer__inner{
  display:grid;gap:var(--footer-gap);
  border-top:1px solid color-mix(in srgb, var(--color-invert-fg) 15%, transparent);
  padding-block: clamp(9rem,4vw,10rem);
}
.site-footer .container{ /* gleiche Container-Grenzen */
  max-width: var(--container-max);
  margin-inline:auto;
  padding-inline: var(--page-gutter);
  box-sizing: content-box;
}
/* 2) Spacing between the three "parts" (Email / Rechtliches / Social) */
.site-footer__inner > .container{
  display: grid;                                   /* <- was previously block */
  gap: clamp(.75rem, 2.5vw, 2rem);                 /* overall gap */
  column-gap: clamp(1rem, 3vw, 2.5rem);            /* horizontal spacing */
  row-gap: clamp(1.5rem, 2vw, 1.5rem);            /* vertical spacing */
  align-items: start;
}
.site-footer a{text-decoration:underline}

/* ---------- Utils ---------- */
.hidden{display:none!important}
/* CSS: Footer-Email unten links im Mobile-Menü */
.mobile-menu{ position: fixed; }
.mobile-menu__footer{
  position: absolute;
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: clamp(24px, 4vw, 40px);   /* ähnliches Padding wie oben */
  font-size: var(--fs-1);           /* wie "Menu" Button */
  text-align: left;
  font-family:var(--font-sans);
}
.mobile-menu__footer a{
  color: var(--menu-fg, #fff);      /* invertiertes Schema sichtbar */
  text-decoration: none;
}
/* SOLO WORK: festes, quadratisches Raster (unabhängig von Soundtracks) */
:root{
  /* optional: Solo-Overrides (kannst du nach Bedarf anpassen) */
  --solo-cols-mobile: 2;
  --solo-cols-desktop: 6;
  --solo-gap: var(--grid-gap);
}

/* zentriert wie die anderen Container/Grids */
.grid.grid--quad{
  display: grid;
  grid-template-columns: repeat(var(--solo-cols-mobile), minmax(0,1fr));
  gap: var(--solo-gap);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  box-sizing: content-box;
}

@media (min-width: 768px){
  .grid.grid--quad{
    grid-template-columns: repeat(var(--solo-cols-desktop), minmax(0,1fr));
  }
}

/* Zellen sind quadratisch */
.grid--quad .cell{
  aspect-ratio: 1 / 1;   /* macht die Zelle quadratisch */
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Bilder füllen die Quadrate (übersteuern 16:9-Regel der Soundtracks) */
.grid--quad .card{ width: 100%; height: 100%; border-radius: 0; }
.grid--quad .card img{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;     /* wichtig: 16:9 aus Soundtracks hier neutralisieren */
  object-fit: cover;
}
/* --- Prosa / Typografie für Textseiten --- */
.prose{ font-size: var(--fs-0); line-height: 1.55; font-family:"Geist2"}
.prose--narrow{ max-width: 60ch; margin-inline: auto; }
.stack-lg > * + *{ margin-top: var(--space-4); }

.prose h2{
  font-size: clamp(1.1rem, 0.8rem + 1.4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
}
.prose p{ margin: 0; color: var(--color-fg); }

.prose .kicker{
  font-size: var(--fs-0);
  color: var(--color-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: clamp(3.5rem, 3vw, 2.5rem);
}

/* etwas mehr Rhythmus zwischen Blöcken (Kicker → nachfolgende Gruppe) */
.prose .kicker + h2{ margin-top: .25rem; }
.prose h2 + p{ margin-top: .25rem; }
/* --- Contact (zentriert, minimal) --- */
.contact{
  display:grid;
  place-items:center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(10rem, 6vw, 10rem);
  text-align:center;
}

.contact__photo{
  margin:0;
}
.contact__photo img{
  display:block;
  width:min(290px, 50vw);
  height:auto;
  border-radius: 12px;           /* dezent; bei Bedarf 50% für rund */
  object-fit: cover;
}

.contact__block{
  display:grid;
  gap: .5rem;
}
.contact__name{
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing:.01em;
  margin:0;
}
.contact__email a{
  font-size: var(--fs-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact__social{
  display:flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  justify-content:center;
  flex-wrap: wrap;
  margin-top: .25rem;
}
.contact__social a{
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
/* ——— Rechtstexte: saubere, ruhige Typo ——— */
.prose.legal{
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-0);
  line-height: 1.6;
}
.prose.legal h2{
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: .01em;
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 .25rem 0;
}
.prose.legal p{ margin: .4rem 0; }
.prose.legal a{ text-decoration: underline; text-underline-offset: 2px; }
.prose.legal ul, .prose.legal ol{ margin: .4rem 0 .8rem 1.25rem; }
.prose.legal li + li{ margin-top: .25rem; }

/* optionale Trennlinie oben für Orientierung (dezent) */
/* .prose.legal{ border-top: 1px solid #eaeaea; } */
/* Feste Headerhöhe bleibt bestehen */
:root{ --header-h: clamp(52px, 7vw, 72px); }

/* Fixed Header + Safe-Area */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
}

/* Platz für den Header im Layout (mit Safe-Area-Fallback) */
body{
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}

/* Mobile-Menu beginnt direkt unter dem Header */
.mobile-menu{
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  bottom: 0;
}
a[aria-disabled="true"]{ cursor: pointer; } /* Hover/Effekt bleibt sichtbar */
/* Spacers gezielt NUR auf kleinen Screens ausblenden */
@media (max-width: 767.98px){
  .grid--fixed .cell.spacer--sm-hide,
  .grid--quad  .cell.spacer--sm-hide{
    display: none !important;
  }
}
/* Geräte ohne Hover (Smartphones/Tablets): Overlay aus */
@media (hover: none) and (pointer: coarse){
  #title-overlay{ display: none !important; }
}
/* --- Project Modal (global) --- */
.modal{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background: rgba(1,1,1,.94);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.modal.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .3s ease; }

.modal__dialog{
  position: relative;
  width: 100%;
  max-width: min(880px, 92vw);
  max-height: min(72vh, 78svh);
  display: grid; place-items: center;
  transform: scale(.98);
  transition: transform .28s ease;
}
.modal.is-open .modal__dialog{ transform: scale(1); }

.modal__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.modal__media video,
.modal__media iframe{ width: 100%; height: 100%; display: block; }

.modal__close{
  position: absolute;
  top: calc(clamp(12px, 3vw, 24px) + env(safe-area-inset-top, 0px));
  right: clamp(12px, 3vw, 24px);
  background: transparent; border: none; font: inherit; color: var(--color-invert-fg); cursor: pointer;
}

.modal__corner{
  position: fixed; font-size: var(--fs-4); color: var(--color-invert-fg);
}
.modal__corner--tl{ top: calc(clamp(12px,3vw,24px) + env(safe-area-inset-top,0px)); left: clamp(12px,3vw,24px);  width: 75vw; }
.modal__corner--tr{ top: calc(clamp(12px,3vw,24px) + env(safe-area-inset-top,0px)); right: clamp(12px,3vw,24px); text-align:right; }
.modal__corner--bl{ bottom: calc(clamp(12px,3vw,24px) + env(safe-area-inset-bottom,0px)); left: clamp(12px,3vw,24px); }
.modal__corner--br{ bottom: calc(clamp(12px,3vw,24px) + env(safe-area-inset-bottom,0px)); right: clamp(12px,3vw,24px); text-align:right; }
.modal{ cursor: default; }
body.modal-open{ overflow: hidden; }
body.modal-open #title-overlay{ opacity: 0 !important; } /* Hovertext aus, wenn Modal offen */

@media (max-width: 720px){
  .modal__dialog{ max-width: 94vw; max-height: 70svh; }
}

/* 1) Kein Fokus-Rahmen auf eingebetteten Medien im Modal */
.modal__media :is(iframe, video):focus,
.modal__media :is(iframe, video):focus-visible{
  outline: none !important;
}

/* 2) Iframe wirklich ohne Rand/Schatten und bündig in die Rundung */
.modal__media iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent;
  border-radius: inherit;          /* vermeidet helle Kanten an den Ecken */
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(0);        /* verhindert 1px-Antialias-Seams */
}

/* 3) Optional: Container-Hintergrund neutralisieren, um "helle Ränder" zu vermeiden */
.modal__media{
  background: transparent;         /* statt #f5f5f5, falls dieser Schimmer stört */
  overflow: hidden;                 /* hast du bereits – zur Sicherheit */
}
/* Fallback für in-app Browser (z.B. Instagram): wenn Touch erkannt → Hover-Overlay aus */
.has-touch #title-overlay{ display: none !important; }
.has-touch .card:hover{ transform: none !important; } /* falls du Hover-Transforms nutzt */