/* ==========================================================================
   Magma Art&Sound – öffentliche Seite
   Mobile first. Dunkel wie ein invertierter Fotokopier-Flyer: Anton (Überschriften),
   Archivo (Text), Courier Prime (Schreibmaschine), dazu Korn, Staub und abgenutzte Tinte.
   Alle Schriften lokal eingebunden (SIL OFL, siehe assets/fonts/LICENSES.txt).
   ========================================================================== */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #000;
  --panel: #151515;
  --line: #2e2e2e;
  --text: #f3f3f3;
  --soft: #d3d3d3;
  --muted: #a6a6a6;
  --accent: #cc4125;
  --accent-text: #ee6f52;
  --focus: #ffd2c7;
  --ink: #f2f0eb;            /* "Tonerweiss": Überschriften und Linien, minimal warm */
  --rule: rgba(242, 240, 235, .62);
  --display: "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", "Franklin Gothic Medium", sans-serif;
  --typewriter: "Courier New", Courier, monospace; /* Courier Prime folgt mit .deco (Courier-Breite, deshalb kein Springen) */
  --gutter: clamp(1rem, 4.5vw, 2.5rem);
  --nav-h: 3.75rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}
html.menu-lock, html.lb-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}
@media (min-width: 56rem) { body { font-size: 1.125rem; } }

.section-panel, .faq-hire { background-color: var(--panel); }

/* <picture> (AVIF/WebP mit JPEG/PNG als Reserve) soll das Layout nicht veraendern: das <img> darin verhaelt sich wie bisher */
picture { display: contents; }
picture > source { display: none; } /* sonst belegt die (leere) <source> in Gitter-Layouts einen eigenen Platz */
img { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: .18em; }
a:hover { color: #ff9a82; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  background: #fff; color: #000; padding: .65rem 1rem; border-radius: 4px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Navigation ---------- */

.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,0));
}
/* Der Blur liegt bewusst auf einem Pseudo-Element: backdrop-filter direkt auf der Leiste
   wuerde sie zum Bezugsrahmen fuer das fixierte Mobilmenue machen (Menue waere nur so hoch wie die Leiste). */
.site-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(0,0,0,.9); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .25s;
}
.site-nav.is-scrolled::before { opacity: 1; }
.nav-brand, .nav-toggle { position: relative; z-index: 2; }
.nav-brand {
  color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 400; font-size: 1.2rem;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.is-scrolled .nav-brand { opacity: 1; pointer-events: auto; }
.site-nav.is-open .nav-brand { opacity: 1; pointer-events: auto; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 2.75rem; padding: 0 .25rem 0 .75rem; margin-right: -.25rem;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase;
}
.nav-toggle-bars, .nav-toggle-bars::before {
  display: block; width: 1.6rem; height: 2px; background: currentColor; transition: transform .25s;
}
.nav-toggle-bars { position: relative; transform: translateY(-4px); }
.nav-toggle-bars::before { content: ""; position: absolute; top: 8px; left: 0; }
.site-nav.is-open .nav-toggle-bars { transform: rotate(45deg); }
.site-nav.is-open .nav-toggle-bars::before { top: 0; transform: rotate(-90deg); }

.nav-menu { display: none; list-style: none; margin: 0; padding: 0; }
.site-nav.is-open .nav-menu {
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 1; overflow-y: auto;
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + 1.5rem) var(--gutter) 2rem;
  background: #000;
}
.nav-menu a {
  display: block; padding: .55rem 0 .5rem; color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.5rem, 12vw, 3.6rem); line-height: 1.05; letter-spacing: .01em; border-bottom: 1px solid var(--line);
}
.nav-menu a[aria-current="page"] { color: var(--accent-text); }

@media (min-width: 56rem) {
  /* Name links in einer Zeile; die Spalte rechts gibt nach, wenn es eng wird, so bleibt das Menü auch bei 900 px ohne Umbruch */
  .site-nav { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); column-gap: 1.5rem; }
  .nav-brand { white-space: nowrap; }
  .nav-toggle { display: none; }
  .nav-menu, .site-nav.is-open .nav-menu {
    display: flex; flex-direction: row; position: static; inset: auto; padding: 0; overflow: visible;
    background: none; gap: clamp(.9rem, 2vw, 2.4rem); grid-column: 2;
  }
  .nav-menu a {
    padding: .5rem 0 .4rem; font-size: 1rem; line-height: 1.2; letter-spacing: .05em; color: var(--soft); border: 0;
    border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
  }
  .nav-menu a:hover { color: #fff; border-bottom-color: var(--accent); }
  .nav-menu a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }
}
/* Ab breiten Fenstern darf die Schrift etwas grösser und luftiger sein */
@media (min-width: 72rem) {
  .nav-menu, .site-nav.is-open .nav-menu { gap: clamp(1.1rem, 2.6vw, 2.4rem); }
  .nav-menu a { font-size: 1.08rem; letter-spacing: .07em; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative; isolation: isolate; overflow: hidden; background: #000;
  min-height: clamp(26rem, 88svh, 46rem);
  display: grid; place-items: center;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,.05) 38%, rgba(0,0,0,.3) 68%, #000 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
}
.hero-inner {
  display: flex; flex-direction: column; align-items: center; gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: calc(var(--nav-h) + 1.5rem) var(--gutter) 3.5rem; text-align: center;
}
.hero-h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }
.hero-logo-link { display: block; line-height: 0; }
.hero-logo { width: clamp(14rem, 40vw, 25rem); filter: drop-shadow(0 2px 18px rgba(0,0,0,.75)); }
.hero-small { min-height: clamp(15rem, 40svh, 22rem); }
.hero-small .hero-logo { width: clamp(10rem, 24vw, 14rem); }
.hero-follow { display: flex; align-items: center; gap: 1rem; }
.follow-label { font-weight: 600; font-size: .98rem; color: var(--soft); }

.social { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.social a {
  display: block; width: 2.75rem; height: 2.75rem; border-radius: 4px; overflow: hidden;
  filter: grayscale(1) brightness(.82); opacity: .9; transition: filter .2s, opacity .2s;
}
.social a:hover, .social a:focus-visible { filter: none; opacity: 1; }
.social img { display: block; width: 100%; height: 100%; }

/* ---------- Sektionen ---------- */

.section { padding: clamp(3.5rem, 9vw, 7rem) var(--gutter); scroll-margin-top: var(--nav-h); }
.section-panel { background-color: var(--panel); }
.wrap-wide { max-width: 82rem; margin-inline: auto; }
.wrap-measure { max-width: 46rem; margin-inline: auto; }
.wrap-form { max-width: 36rem; margin-inline: auto; }

/* Direkt unter dem Titelbild das Korn sanft einblenden, damit keine harte Kante zwischen reinem Schwarz und der Körnung entsteht */
.hero + main > .section:first-child { position: relative; isolation: isolate; }
.hero + main > .section:first-child::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 12rem; pointer-events: none;
  background: linear-gradient(to bottom, #000 0, rgba(0,0,0,0) 100%);
}

/* Überschrift: schwere schmale Schrift, linksbündig, darüber eine dünne Linie.
   Die Maske nimmt Tinte weg – Schrift und Linie sind stellenweise abgenutzt wie auf einer Kopie der Kopie. */
.section-title {
  margin: 0 0 clamp(1.75rem, 4.5vw, 3rem); padding-top: clamp(.8rem, 1.8vw, 1.15rem);
  border-top: 1px solid var(--rule);
  font-family: var(--display); font-weight: 400; text-transform: uppercase; text-align: left;
  font-size: clamp(2.9rem, 1.15rem + 8.2vw, 7.25rem); line-height: .94; letter-spacing: .006em;
  color: var(--ink); text-wrap: balance; overflow-wrap: anywhere;
}
.section-title-spaced { margin-top: clamp(3.5rem, 8vw, 6rem); }

/* Knöpfe wie Aufkleber auf dem Flyer: eckig, schmale Schrift, beim Darüberfahren invertiert (hell mit schwarzer Schrift) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: .7rem 1.6rem .6rem; border: 2px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  font-family: var(--display); font-weight: 400; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.2; text-align: center;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn.primary { background: #c23a1f; border-color: #c23a1f; color: #fff; }
/* Umkehren nur mit echter Maus: am Handy bliebe der Knopf sonst nach dem Antippen hell */
@media (hover: hover) {
  .btn:hover, .btn.primary:hover { background: var(--ink); border-color: var(--ink); color: #000; }
}
.cta-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .85rem; margin: clamp(2rem, 5vw, 3rem) 0 0; }

/* Einleitung unter "Mixing and Mastering": erster Absatz gross wie ein Vorspann, der Rest ruhig */
.sound-intro { max-width: 47rem; margin: 0 0 clamp(2rem, 5vw, 3.25rem); }
.sound-intro p { margin: 0 0 1rem; color: var(--soft); }
.sound-intro p:first-child { font-size: clamp(1.2rem, 1.02rem + .75vw, 1.5rem); line-height: 1.45; color: var(--ink); font-weight: 500; }
.sound-intro p:last-child { margin-bottom: 0; }

.fineprint { margin: 1.25rem 0 0; font-family: var(--typewriter); font-size: .88rem; line-height: 1.55; color: var(--muted); }
.contact-form .fineprint { margin: 0 0 1.25rem; }

/* ---------- Karussell (Artworks und Videos): eine Zeile, wischen oder Pfeile ---------- */

.carousel { --fade-l: 0px; --fade-r: 0px; --gap: .6rem; position: relative; }
.carousel.is-scrollable { --fade-r: 3rem; }
.carousel.is-scrollable:not(.at-start) { --fade-l: 3rem; }
.carousel.at-end { --fade-r: 0px; }
.carousel-track {
  display: flex; align-items: flex-start; gap: var(--gap); margin: 0; list-style: none;
  /* bis an den Bildschirmrand laufen lassen: so ist am Handy das naechste Bild angeschnitten sichtbar */
  margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-inline: var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 auto; min-width: 0; scroll-snap-align: start; }

/* Mit der Maus greifen und ziehen (nur Maus; am Handy wischt der Finger direkt) */
@media (hover: hover) and (pointer: fine) {
  .carousel-track { cursor: grab; -webkit-user-select: none; user-select: none; }
}
.carousel-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.carousel-track.is-dragging, .carousel-track.is-dragging * { cursor: grabbing !important; }

.carousel-controls { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.carousel-controls[hidden] { display: none; }
/* Fortschrittsleiste = Schieberegler: dicke, gut sichtbare Linie in einer grossen Beruehrungsflaeche (2.75rem hoch) */
.carousel-progress {
  position: relative; flex: 1; height: 2.75rem; cursor: pointer; border-radius: 6px;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.carousel-progress::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  background: #444; border-radius: 4px;
}
.carousel-progress span {
  position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; min-width: 0;
  background: var(--accent); border-radius: 8px; will-change: transform;
  transition: height .15s, margin-top .15s, background-color .15s;
}
.carousel-progress:hover span, .carousel-progress.is-dragging span { height: 12px; margin-top: -6px; background: #ee5a3a; }
.carousel-progress.is-dragging { cursor: grabbing; }
.carousel-progress:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.carousel-btns { display: flex; gap: .5rem; }
.carousel-btn {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(20,20,20,.85); color: #fff; border: 1px solid #555; border-radius: 0;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
@media (hover: hover) { .carousel-btn:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #000; } }
.carousel-btn:disabled { opacity: .35; cursor: default; }
.carousel-btn svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Artworks: feste Hoehe, Breite nach Seitenverhaeltnis (nie breiter als der Bildschirm) */
.gallery { --h: 15rem; }
@media (min-width: 40rem) { .gallery { --h: 20rem; } }
@media (min-width: 70rem) { .gallery { --h: 26rem; --gap: .75rem; } }
.art-item { width: min(calc(var(--ar) * var(--h)), 88vw); aspect-ratio: var(--ar); }
.art-item a { display: block; position: relative; width: 100%; height: 100%; background: var(--panel); overflow: hidden; line-height: 0; }
.art-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s, filter .3s; -webkit-user-drag: none; user-select: none; }
.art-item a:hover img { transform: scale(1.035); filter: brightness(1.12); }
.art-item a:focus-visible { outline-offset: -3px; }

/* Lightbox */
.lightbox {
  border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: #000; color: #fff;
}
.lightbox[open] { display: block; }
.lightbox::backdrop { background: #000; }
.lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 3.5rem .5rem 4.5rem; }
.lb-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; touch-action: pan-y pinch-zoom; user-select: none; }
.lb-caption { position: absolute; inset: auto 0 0 0; padding: 1rem 4rem 1.25rem; text-align: center; color: var(--soft); font-size: .98rem; min-height: 3.5rem; }
.lb-btn {
  position: absolute; width: 3rem; height: 3rem; display: grid; place-items: center;
  background: rgba(20,20,20,.85); color: #fff; border: 1px solid #555; border-radius: 0; cursor: pointer; padding: 0;
}
@media (hover: hover) { .lb-btn:hover { background: var(--ink); border-color: var(--ink); color: #000; } }
.lb-btn svg { width: 1.3rem; height: 1.3rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: .75rem; right: .75rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: .5rem; }
.lb-next { right: .5rem; }
@media (min-width: 48rem) { .lb-stage { padding: 3.5rem 5rem 4.5rem; } .lb-prev { left: 1rem; } .lb-next { right: 1rem; } }

/* ---------- Videos ---------- */

.videos { --gap: 1.25rem; }
/* Handy: eine Karte mit Blick auf die naechste. Ab ca. 700 px (iPad hochkant) drei nebeneinander. */
.video-card { flex-basis: min(82%, 22rem); }
@media (min-width: 40rem) { .video-card { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (min-width: 44rem) { .videos { --gap: 1rem; } .video-card { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@media (min-width: 70rem) { .videos { --gap: 1.25rem; } }
.frame { position: relative; aspect-ratio: 16 / 9; background: #0a0a0a; overflow: hidden; border-radius: 2px; }
.frame .play { all: unset; box-sizing: border-box; position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.frame .play:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.frame .play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s, filter .3s; }
.frame .play:hover img { transform: scale(1.03); filter: brightness(1.12); }
.play-icon { position: relative; width: 4rem; height: 4rem; }
.play-icon circle { fill: rgba(0,0,0,.65); stroke: #fff; stroke-width: 2; transition: fill .2s, stroke .2s; }
.play-icon path { fill: #fff; }
.frame .play:hover .play-icon circle, .frame .play:focus-visible .play-icon circle { fill: var(--accent); stroke: var(--accent); }
.frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Hinweisfeld statt Player, solange YouTube nicht erlaubt ist (wie auf jeanneartemis.com) */
.frame.is-gated { aspect-ratio: auto; height: auto; min-height: 13.5rem; display: grid; place-items: center; border: 1px dashed #666; background: rgba(255,255,255,.02); }
.gate { display: flex; flex-direction: column; justify-content: center; gap: .65rem; width: 100%; padding: 1.25rem; text-align: left; }
.gate p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--soft); }
.gate .gate-title { font-weight: 700; color: var(--accent-text); }
.gate .btns { margin-top: .35rem; }
.gate .btn { flex: 1 1 9rem; }
/* Schmale Karten (3 nebeneinander am Tablet): Sperrfeld kompakter, Knoepfe untereinander */
.frame { container-type: inline-size; }
@container (max-width: 21rem) {
  .gate { padding: .8rem .85rem; gap: .4rem; }
  .gate p { font-size: .82rem; line-height: 1.35; }
  .gate .btn { flex-basis: 100%; min-height: 2.5rem; padding: .35rem .75rem; font-size: .9rem; }
}

/* Bandcamp-Player: gleiche Kachel wie ein Video, Hoehe nach dem Einbettungscode (meist 120 px) */
.frame-bc { aspect-ratio: auto; height: var(--bc-h, 120px); }
.bc-poster {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .9rem; padding: 0 1rem;
  background: linear-gradient(135deg, #141c22, #0a0a0a 70%); border: 1px solid #2a343b; border-radius: 2px;
}
.bc-poster .play-icon { flex: none; width: min(3.25rem, calc(var(--bc-h, 120px) - 1rem)); height: min(3.25rem, calc(var(--bc-h, 120px) - 1rem)); }
.bc-label { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
.frame .play:hover .bc-label, .frame .play:focus-visible .bc-label { color: #fff; }
.video-title { margin: .75rem 0 0; font-size: 1rem; font-weight: 600; line-height: 1.4; letter-spacing: -.003em; }
.video-title a { color: var(--soft); text-decoration: none; }
.video-title a:hover { color: #fff; text-decoration: underline; }

/* ---------- News ---------- */

/* Zweispaltig ab Tablet-Breite (Reihenfolge zeilenweise: neueste zuerst, links vor rechts); am Handy eine Spalte */
.news-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) { .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.news-item { padding: 1.6rem 0 1.5rem; border-top: 1px solid var(--line); }
.news-item h3 {
  margin: 0 0 .45rem; font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.05rem); line-height: 1.08; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere;
}
.news-item p { margin: .4rem 0; color: var(--soft); overflow-wrap: anywhere; }
.news-item .news-date { margin: 0 0 .55rem; font-family: var(--typewriter); font-size: .92rem; color: var(--accent-text); }
.news-item .news-link { margin-top: .7rem; font-weight: 600; font-size: 1rem; }

.more { margin-top: 1.5rem; }
.more > summary {
  display: flex; align-items: center; justify-content: center; width: fit-content; min-height: 2.9rem;
  margin-inline: auto; padding: .7rem 1.6rem .6rem; border: 2px solid var(--ink); border-radius: 0;
  cursor: pointer; list-style: none; transition: background-color .15s, color .15s;
  font-family: var(--display); font-weight: 400; font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
}
.more > summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .more > summary:hover { background: var(--ink); color: #000; } }
.more .when-open { display: none; }
.more[open] .when-open { display: inline; }
.more[open] .when-closed { display: none; }
.more[open] > summary { margin-bottom: 1.75rem; }

/* ---------- Voices ---------- */

.quotes { columns: 2 24rem; column-gap: 3rem; }
@media (min-width: 56rem) { .quotes { margin-bottom: -.8rem; } } /* zweispaltig: Abstand unter dem letzten Zitat ausgleichen */
/* Abstand zwischen den Zitaten als Innenabstand (nicht als Aussenabstand): Safari und Firefox tragen sonst den unteren Aussenabstand
   des letzten Zitats einer Spalte an den Anfang der naechsten, dann beginnt die rechte Spalte tiefer als die linke.
   Die farbige Linie ist ein Pseudo-Element, damit sie nicht in den Abstand hineinragt. */
.quote { position: relative; display: inline-block; width: 100%; vertical-align: top; margin: 0; padding: .1rem 0 2.1rem calc(1.15rem + 2px); break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
.quote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 2rem; width: 2px; background: var(--accent); }
.quote p { margin: 0; color: var(--soft); font-family: var(--typewriter); font-size: .98rem; line-height: 1.62; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .quote p { font-size: .93rem; line-height: 1.58; } }
.quote footer { margin-top: .7rem; font-size: .92rem; line-height: 1.45; color: var(--muted); }
.quote-author { font-weight: 700; color: var(--ink); margin-right: .55em; }
.quotes-fan .quote::before { background: #444; }
.quotes-fan .quote p { color: var(--muted); }

/* ---------- Kontakt ---------- */

.field { margin-bottom: 1.1rem; }
.field label { display: block; margin-bottom: .4rem; font-weight: 700; font-size: .98rem; color: var(--ink); }
.field input, .field textarea {
  width: 100%; padding: .8rem .9rem; border: 1px solid rgba(242,240,235,.42); border-radius: 0;
  background: rgba(0,0,0,.55); color: var(--text); font: inherit;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent-text); outline-offset: 1px; border-color: var(--accent-text); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1rem 1.15rem; border: 1px solid; border-radius: 0; margin-bottom: 1.5rem; }
.notice p { margin: 0; }
.notice.ok { border-color: #3d7a4f; background: #0f1f15; color: #cdebd6; }
.notice.error { border-color: #8a2c1b; background: #220d09; color: #ffd5cc; }
.notice ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- Recording FAQ ---------- */

.faq-lede { margin: 0 0 1.75rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.25rem); line-height: 1.5; color: var(--ink); }
.faq-toc { margin: 0 0 1.5rem; }
.faq-toc ul { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 2.5rem; }
.faq-toc li { break-inside: avoid; padding: .45rem 0 .4rem; border-top: 1px dashed var(--line); }
.faq-toc a { color: var(--soft); text-decoration: none; font-family: var(--typewriter); font-size: .92rem; line-height: 1.4; }
.faq-toc a:hover, .faq-toc a:focus-visible { color: #fff; text-decoration: underline; }
.faq-item { scroll-margin-top: var(--nav-h); }
.faq-item { display: grid; gap: 1.1rem 2rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.faq-img { width: 100%; max-width: 21rem; height: auto; border-radius: 2px; }
.faq-text h2 { margin: 0 0 .7rem; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); line-height: 1.08; letter-spacing: .01em; color: var(--ink); }
.faq-text p, .faq-text li { color: var(--soft); }
.faq-text p { margin: .7rem 0; }
.faq-text ul { margin: .7rem 0; padding-left: 1.2rem; }
.faq-text li { margin: .55rem 0; }
@media (min-width: 46rem) {
  .faq-item { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; }
  .faq-img { max-width: none; }
}
.faq-hire { margin-top: 2.5rem; padding: clamp(1.75rem, 5vw, 2.75rem); border: 1px solid var(--rule); text-align: left; }
.faq-hire h2 { margin: 0 0 .6rem; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.2rem); line-height: 1; color: var(--ink); }
.faq-hire p { margin: .4rem 0; color: var(--soft); }
.faq-hire .cta-row { margin-top: 1.5rem; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative; padding: 3rem var(--gutter) calc(3rem + env(safe-area-inset-bottom)); text-align: center;
  color: var(--muted); font-family: var(--typewriter); font-size: .9rem;
}
/* dünne, abgenutzte Linie (eigenes Element, damit die Maske nicht den Text angreift) */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--rule);
}
.social-footer { justify-content: center; margin-bottom: 1.25rem; }
.footer-line { margin: 0; }
.footer-line a { color: var(--muted); }
.footer-line a:hover, .linkbtn:hover { color: #fff; }
.sep { margin: 0 .7rem; color: #555; }
.linkbtn { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.linkbtn[hidden], .sep[hidden] { display: none; }
/* Schmale Bildschirme: ohne Trennstriche und mittig umbrechen, damit kein "/" am Zeilenanfang steht */
@media (max-width: 40rem) {
  .footer-line { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; }
  .footer-line .sep { display: none; }
}

/* ---------- Cookie-Banner ---------- */

#cb {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
  width: min(48.5rem, calc(100% - 1.5rem)); max-height: calc(100vh - 1.75rem); max-height: calc(100svh - 1.75rem); overflow: auto;
  padding: 1.1rem 1.25rem 1.15rem; outline: 0;
  background: rgba(12,12,12,.98); color: var(--text);
  border: 1px solid #555; border-top: 3px solid var(--accent); border-radius: 0;
  box-shadow: 0 10px 40px rgba(0,0,0,.7);
  font-size: 1rem; line-height: 1.5;
}
#cb[hidden], html.cb-done #cb { display: none; }
/* cb-done setzt ein winziges Skript im Kopf der Seite, noch bevor der Banner gelesen wird (schon gewaehlt: nie sichtbar, auch wenn die Seite in Stuecken ankommt).
   cb-pending gilt nur bis die deutschen Texte eingesetzt sind, damit deutsche Besucher keinen englischen Text aufblitzen sehen. */
html.cb-pending #cb { visibility: hidden; }
#cb p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; color: var(--soft); }
.cb-h { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .6rem; }
#cb h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.cb-l { display: flex; gap: .35rem; }
.cb-l button {
  min-width: 2.5rem; min-height: 2.1rem; padding: .15rem .6rem; border: 1px solid #444; border-radius: 3px;
  background: none; color: var(--muted); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.cb-l button[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); }
.opt { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 0; border-top: 1px dashed #444; cursor: pointer; }
.opt:last-of-type { margin-bottom: .9rem; }
.opt input { flex: none; width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer; }
.opt input:disabled { opacity: .6; cursor: not-allowed; }
.opt b { font-weight: 600; }
.opt small { display: block; color: var(--muted); font-size: .85rem; }
.btns { display: flex; flex-wrap: wrap; gap: .6rem; }
#cb .btn { flex: 1 1 auto; min-height: 2.75rem; padding: .55rem 1rem .45rem; font-size: 1rem; }
#cb .cb-priv { margin: .85rem 0 0; font-size: .9rem; }
@media (max-width: 30rem) { #cb { padding: .95rem 1rem 1rem; } #cb .btn { flex-basis: calc(50% - .3rem); padding-inline: .5rem; } }
@media print { #cb { display: none !important; } }

@media print {
  :root { --ink: #000; --text: #000; --soft: #222; --muted: #444; --rule: #000; --panel: #fff; --accent-text: #8a2410; }
  .site-nav, .hero-bg, .contact-form, .lightbox { display: none !important; }
  body, .section-panel, .faq-hire { background: #fff !important; color: #000; }
  html .section-title, html .nav-menu a, html #cb h2 { -webkit-mask-image: none !important; mask-image: none !important; }
  .site-footer::before { display: none; }
}

/* ==========================================================================
   Schmutz: Korn, Staub, abgenutzte Tinte
   Alles hier haengt an html.deco. site.js setzt die Klasse, sobald die Bilder geladen sind –
   so blockieren die Texturen weder das erste Zeichnen noch das Titelbild.
   Ohne Skript bleibt die Seite schlicht schwarz und voll lesbar.
   ========================================================================== */

html.deco { --typewriter: "Courier Prime", "Courier New", Courier, monospace; }

/* Körnung wie auf einer schlechten Kopie: Staub und Kratzer, feines Korn, weiche Tonerwolken.
   Drei Hintergrundebenen unter dem Inhalt, die Bilder darüber bleiben unberührt.
   Menüs, Banner und Lightbox bekommen dieselben Ebenen, aber an anderer Stelle der Kachel, damit sie nicht wie ein Ausschnitt der Seite wirken. */
html.deco body, html.deco .section-panel, html.deco .faq-hire,
html.deco .site-nav.is-open .nav-menu, html.deco .lightbox, html.deco .site-nav::before {
  background-image: url("../img/dust.webp"), url("../img/grain.webp"), url("../img/mottle.webp");
  background-size: 1024px 1024px, 256px 256px, 1600px 1600px;
  background-repeat: repeat;
}
html.deco .site-nav.is-open .nav-menu { background-position: 310px 520px, 90px 40px, 760px 300px; }
html.deco .lightbox { background-position: 640px 80px, 20px 130px, 120px 900px; }
html.deco .site-nav::before { background-position: 480px 60px, 130px 20px, 300px 700px; }

/* Überschriften: Schrift und Linie stellenweise abgenutzt */
html.deco .section-title {
  -webkit-mask-image: url("../img/wear.webp"); mask-image: url("../img/wear.webp");
  -webkit-mask-size: 900px 450px; mask-size: 900px 450px; -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
/* jede Überschrift nutzt einen anderen Ausschnitt der Maske, damit sich die Abnutzung nicht wiederholt */
html.deco #sound .section-title { -webkit-mask-position: 310px 90px; mask-position: 310px 90px; }
html.deco #news .section-title { -webkit-mask-position: 120px 260px; mask-position: 120px 260px; }
html.deco #voices .section-title { -webkit-mask-position: 560px 30px; mask-position: 560px 30px; }
html.deco #voices .section-title-spaced { -webkit-mask-position: 40px 340px; mask-position: 40px 340px; }
html.deco #contact .section-title { -webkit-mask-position: 700px 200px; mask-position: 700px 200px; }
html.deco .site-footer::before {
  -webkit-mask-image: url("../img/wear.webp"); mask-image: url("../img/wear.webp"); -webkit-mask-size: 900px 450px; mask-size: 900px 450px;
}

/* Menüleiste: Unterkante als abgenutzte Linie statt glatter Strich, Name und Menü-Knopf wie von der Kopie */
html.deco .site-nav::before { border-bottom-color: transparent; }
html.deco .site-nav::after {
  content: ""; position: absolute; z-index: -1; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px;
  background: var(--rule); opacity: 0; transition: opacity .25s; pointer-events: none;
  -webkit-mask-image: url("../img/wear.webp"); mask-image: url("../img/wear.webp"); -webkit-mask-size: 900px 450px; mask-size: 900px 450px;
  -webkit-mask-position: 220px 300px; mask-position: 220px 300px;
}
html.deco .site-nav.is-scrolled::after { opacity: 1; }
html.deco .nav-brand, html.deco .nav-toggle {
  -webkit-mask-image: url("../img/wear.webp"); mask-image: url("../img/wear.webp"); -webkit-mask-size: 900px 450px; mask-size: 900px 450px;
}
html.deco .nav-brand { -webkit-mask-position: 80px 220px; mask-position: 80px 220px; }
html.deco .nav-toggle { -webkit-mask-position: 211px 88px; mask-position: 211px 88px; }
/* Fokusrahmen liegt ausserhalb der Kante und wuerde von der Maske abgeschnitten */
html.deco .nav-brand:focus-visible, html.deco .nav-toggle:focus-visible { -webkit-mask-image: none; mask-image: none; }

/* Mobiles Menü: grosse Schrift und die Trennlinien mit Abnutzung, jede Zeile an anderer Stelle der Maske */
html.deco .site-nav.is-open .nav-menu a {
  -webkit-mask-image: url("../img/wear.webp"); mask-image: url("../img/wear.webp"); -webkit-mask-size: 900px 450px; mask-size: 900px 450px;
}
html.deco .nav-menu li:nth-child(1) a { -webkit-mask-position: 400px 20px; mask-position: 400px 20px; }
html.deco .nav-menu li:nth-child(2) a { -webkit-mask-position: 330px 250px; mask-position: 330px 250px; }
html.deco .nav-menu li:nth-child(3) a { -webkit-mask-position: 850px 200px; mask-position: 850px 200px; }
html.deco .nav-menu li:nth-child(4) a { -webkit-mask-position: 110px 330px; mask-position: 110px 330px; }
html.deco .nav-menu li:nth-child(5) a { -webkit-mask-position: 470px 170px; mask-position: 470px 170px; }
html.deco .nav-menu li:nth-child(6) a { -webkit-mask-position: 560px 380px; mask-position: 560px 380px; }
html.deco .site-nav.is-open .nav-menu a:focus-visible { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 56rem) {
  /* Menüleiste am Desktop: kleine Schrift bleibt unversehrt lesbar */
  html.deco .site-nav.is-open .nav-menu a { -webkit-mask-image: none; mask-image: none; }
}

/* Cookie-Banner: Er ist das Erste, was Besucher sehen, und soll nicht auf Bilddateien warten. Ausserdem zaehlen Hintergrundbilder
   als "groesster Inhalt" der Seite und wuerden die gemessene Ladezeit nach hinten schieben. Darum Schmutz aus Farbverlaeufen:
   weiche Tonerwolken und zwei feine Kratzer. Die Überschrift ist abgenutzt wie die der Seite. */
html.deco #cb {
  background-image:
    radial-gradient(ellipse 62% 48% at 10% 6%, rgba(255,255,255,.07), transparent 72%),
    radial-gradient(ellipse 52% 56% at 94% 90%, rgba(255,255,255,.055), transparent 72%),
    radial-gradient(ellipse 28% 22% at 68% 34%, rgba(255,255,255,.035), transparent 72%),
    linear-gradient(101deg, transparent 0 41%, rgba(255,255,255,.07) 41.15%, transparent 41.5% 100%),
    linear-gradient(81deg, transparent 0 63%, rgba(255,255,255,.055) 63.1%, transparent 63.4% 100%);
}
html.deco #cb h2 {
  -webkit-mask-image: url("../img/wear.webp"); mask-image: url("../img/wear.webp"); -webkit-mask-size: 900px 450px; mask-size: 900px 450px;
  -webkit-mask-position: 91px 218px; mask-position: 91px 218px;
}