/* ═══════════════════════════════════════════════════════════════════════════
   AUDIOFLOOR TONSTUDIO — Landingpage
   Gestaltung: Swiss / technische Reduktion, Dark Theme.
   Farbherkunft:  Logo (#F29400 Orange, #707173 Graphit)
                  Studioausbau aus /samp: Flusskiesel, Akustik-Textil, Karminwand
   Kontraste:     siehe ACCESSIBILITY.md — alle Textpaare >= 4.5:1 (WCAG 2.2 AA)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────── SCHRIFTEN (lokal gehostet) ───────────────────────
   Kein Request an Google: keine Uebertragung der Besucher-IP an Dritte,
   und die Seite sieht auch ohne Internetverbindung richtig aus.
   Archivo und IBM Plex stehen unter der SIL Open Font License 1.1,
   Selbsthosten ist ausdruecklich erlaubt (assets/fonts/LIZENZ.txt).
   Die latin-ext-Dateien laedt der Browser dank unicode-range nur,
   wenn ein Zeichen daraus tatsaechlich vorkommt.
   ─────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('assets/fonts/archivo-var-latin.woff2') format('woff2');
  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';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('assets/fonts/archivo-var-latin-ext.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
  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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-var-latin-ext.woff2') format('woff2');
  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;
}

/* ─────────────────────────────── TOKENS ─────────────────────────────── */
:root {
  /* Flächen — abgeleitet vom Grau der Flusskiesel-Wand */
  --bg:          #0E1113;
  --surface:     #14181B;
  --card:        #1B2125;
  --card-hi:     #212930;

  /* Text */
  --text:        #F4F2ED;   /* 16.94:1 auf --bg   AAA */
  --text-2:      #B3B8BC;   /*  9.47:1 auf --bg   AAA */
  --text-3:      #A29F94;   /*  7.15:1 auf --bg   AAA — greige, aus dem Akustik-Textil */

  /* Linien: --line rein dekorativ, --line-strong für Bedienelement-Ränder (>= 3:1) */
  --line:        #262E33;
  --line-strong: #68727A;

  /* Marke */
  --orange:      #F29400;   /*  8.13:1 auf --bg   AAA — Logofarbe */
  --orange-hi:   #FFA92B;   /*  9.89:1 auf --bg   AAA — Hover */
  --orange-deep: #C97D00;   /* nur Flächen, nie Text auf Hell */

  /* Karmin — aus der roten Studiowand */
  --carmine:      #8C2931;  /* Fläche, Text darauf weiß = 8.48:1 */
  --carmine-mid:  #9F3239;
  --carmine-text: #E07782;  /*  6.43:1 auf --bg   AA — aufgehellt für Textnutzung */

  /* Sand / Greige — aus Kiesel und Teppich */
  --sand:        #CFC2A0;   /* 10.72:1 auf --bg   AAA */
  --greige:      #9C998F;
  --bone:        #EFEBE2;   /* helle Sektion */
  --ink:         #1A1D1F;   /* 14.24:1 auf --bone AAA */
  --ink-2:       #55504A;   /*  6.71:1 auf --bone AAA */

  --focus:       var(--orange);

  /* Typografie */
  --f-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Raster */
  --shell: 1220px;
  --pad:   clamp(1.25rem, 4vw, 2.5rem);
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4rem;   --s-8: 6rem;
  --section-y: clamp(3.25rem, 6vw, 5.25rem);

  --nav-h: 80px;
  --r: 3px;                 /* bewusst nahezu kantig — technische Anmutung */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: 220ms;
}

/* ─────────────────────────────── RESET ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
ul[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }

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

/* ─────────────────────────────── FOKUS ─────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--light :focus-visible { outline-color: var(--carmine); }

.skip-link {
  position: absolute;
  left: var(--s-3); top: var(--s-3);
  z-index: 200;
  transform: translateY(-160%);
  background: var(--orange);
  color: #0E1113;
  font-family: var(--f-mono);
  font-size: .875rem;
  padding: .7rem 1.1rem;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ─────────────────────────────── LAYOUT ─────────────────────────────── */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}


.section { padding-block: var(--section-y); position: relative; }
.section--surface { background: var(--surface); }

.mono {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ─────────────────────────────── HEADER ─────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,17,19,.82);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled { background: rgba(14,17,19,.96); border-bottom-color: #303A40; }

.header-inner {
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-4);
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; padding: .35rem 0; }
/* Quer-Fassung des Logos: Schriftzug bei 52 px Höhe ca. 17 px groß */
.brand-logo { width: auto; height: 52px; }

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav-list { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: inline-block;
  padding: .55rem .58rem;
  font-size: .9rem;
  color: var(--text-2);
  text-decoration: none;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute;
  left: .58rem; right: .58rem; bottom: .28rem; height: 1.5px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-list a:hover { color: var(--text); }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current="true"] { color: var(--text); }
.nav-list a[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center; gap: .55rem;
  min-height: 44px; padding: .5rem .75rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .09em; text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--r);
}
.nav-toggle-box { display: grid; gap: 4px; width: 18px; }
.nav-toggle-box span {
  height: 1.5px; background: currentColor; width: 100%;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ─────────────────────────────── BUTTONS ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;
  padding: .85rem 1.5rem;
  font-family: var(--f-display);
  font-size: .95rem; font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-ico { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover .btn-ico { transform: translateX(3px); }

.btn-primary { background: var(--orange); color: #0E1113; }
.btn-primary:hover { background: var(--orange-hi); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange-hi); }

.btn-on-carmine { background: #FFFFFF; color: #7E2028; }
.btn-on-carmine:hover { background: var(--bone); }

.btn-sm { min-height: 42px; padding: .6rem 1.05rem; font-size: .875rem; }
.btn-block { width: 100%; }

/* ─────────────────────────────── HERO ─────────────────────────────── */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.75rem, 4.5vw, 4rem);
  overflow: hidden;
}
/* Technisches Raster + warmer Lichtkegel, in Marken- und Materialfarben */
.hero-lines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(120% 78% at 50% -12%, rgba(242,148,0,.13), transparent 62%),
    radial-gradient(70% 55% at 88% 8%, rgba(140,41,49,.16), transparent 68%),
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: auto, auto, 68px 100%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
.hero-inner { position: relative; }

.eyeblock { display: flex; align-items: center; gap: .9rem; color: var(--sand); margin-bottom: var(--s-4); }
.eyeblock-rule { width: 42px; height: 1px; background: var(--orange); flex: none; }

.hero-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8.4vw, 6.25rem);
  line-height: .96;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: var(--s-5);
}
.hero-title-before,
.hero-title-initial { color: var(--orange); }
.hero-title .accent { color: var(--text); }

.hero-lead {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.66;
  color: var(--text-2);
  margin-bottom: var(--s-6);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }
.mobile-call { display: none; }
.mobile-call-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mobile-call:hover .mobile-call-icon { stroke: currentColor; }

/* Auf dem Handy ersetzt der direkte Telefonweg den zweiten Sprunglink. */
@media (max-width: 43.99rem) {
  .hero-secondary { display: none; }
  .mobile-call { display: inline-flex; }
}

/* ─────────────── EFFEKTGERÄT (Hero) ───────────────
   19-Zoll-Einheit mit VU-Meter, vier Reglern und Gate-Anzeigen. Rein dekorativ
   (aria-hidden) — bis auf den Power-Schalter, der als echter Button die gesamte
   Animation anhält. Zustand über [data-power] auf .rack. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.rack { margin: 0; }
.rack-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.rack-face {
  position: relative;
  display: grid;
  -webkit-user-select: none; user-select: none;   /* Geraet ist Illustration, kein markierbarer Text */
  grid-template-columns: minmax(128px, .75fr) minmax(220px, 1.2fr) minmax(0, 2fr) minmax(176px, .95fr);
  grid-template-areas: "brand vu knobs gate";
  align-items: center;
  padding: 20px 60px;
  border-radius: 6px;
  border: 1px solid #333C42;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #283036 0%, #1C2226 46%, #15191C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 30px 60px -30px rgba(0,0,0,.9);
}
.rack-brand { grid-area: brand; }
.rack-vu    { grid-area: vu; }
.rack-knobs { grid-area: knobs; }
.rack-gate  { grid-area: gate; }

/* Gefräste Trennfugen zwischen den Sektionen */
.rack-vu, .rack-knobs, .rack-gate {
  padding-inline: 22px;
  border-left: 1px solid rgba(0,0,0,.5);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.045);
}

/* Rack-Ohren mit Schrauben */
.rack-ear {
  position: absolute; top: 0; bottom: 0; width: 44px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 14px 0;
  background: linear-gradient(180deg, #20272B, #131719);
}
.rack-ear--l { left: 0;  border-right: 1px solid rgba(0,0,0,.55); border-radius: 6px 0 0 6px; }
.rack-ear--r { right: 0; border-left:  1px solid rgba(0,0,0,.55); border-radius: 0 6px 6px 0; }
.rack-ear i {
  position: relative;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5B646A, #2A3035 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06);
}
.rack-ear i::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px;
  margin-top: -.75px; background: rgba(0,0,0,.6); transform: rotate(-35deg);
}

/* Markenschild + Power */
.rack-brand { display: grid; gap: 18px; padding-right: 18px; }
.rack-model { display: grid; gap: 2px; }
.rack-name {
  font-family: var(--f-display); font-weight: 700; font-size: .95rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.rack-model .mono { font-size: .6rem; color: var(--sand); letter-spacing: .12em; }

.rack-power { display: flex; align-items: center; gap: 12px; }
.power {
  position: relative; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid #0B0D0E;
  background: radial-gradient(circle at 50% 32%, #313A40, #15191C 72%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.07), inset 0 -4px 8px rgba(0,0,0,.65), 0 2px 5px rgba(0,0,0,.6);
  color: var(--text-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur) var(--ease);
}
/* Leuchtring: aus = Graphit, >= 3:1 auch an der hellsten Stelle der Frontplatte; an = CI-Orange */
.power::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid #808A91;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.power-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.power:hover { color: var(--text); }
.power:active { transform: translateY(1px); }
/* Der globale Fokusring setzt border-radius — hier rund halten */
.power:focus-visible { border-radius: 50%; outline-offset: 7px; }

.rack[data-power="on"] .power { color: var(--orange-hi); }
.rack[data-power="on"] .power::before {
  border-color: var(--orange);
  box-shadow: 0 0 16px rgba(242,148,0,.55), inset 0 0 8px rgba(242,148,0,.4);
}
.rack[data-power="on"] .power-ico { filter: drop-shadow(0 0 4px rgba(255,169,43,.8)); }

.power-text { display: grid; gap: 2px; }
.power-label { font-size: .64rem; color: var(--text); }
.power-state { font-size: .62rem; color: var(--text-3); letter-spacing: .06em; }
.rack[data-power="on"] .power-state { color: var(--orange); }

/* VU-Meter */
.rack-vu { display: grid; justify-items: center; gap: 8px; }
.vu-bezel {
  width: 100%; max-width: 270px;
  padding: 5px; border-radius: 8px;
  background: #0B0D0F;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06);
}
.vu { display: block; width: 100%; height: auto; }
.vu-arc { fill: none; stroke: #1A1D1F; stroke-width: 1.1; }
.vu-red { fill: none; stroke: #9F3239; stroke-width: 4; }
.vu-ticks line { stroke: #1A1D1F; stroke-width: 1.3; }
.vu-ticks line.f { stroke-width: .8; }
.vu-ticks line.r { stroke: #9F3239; }
.vu-num text {
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  fill: #1A1D1F; text-anchor: middle; dominant-baseline: middle;
}
.vu-num text.r { fill: #7E2028; }
.vu-logo {
  font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: 2px;
  fill: #1A1D1F; opacity: .82; text-anchor: middle;
}
.vu-peak { fill: #5A4A3A; stroke: rgba(0,0,0,.35); stroke-width: .6; }
.vu-peak.is-on { fill: #F29400; filter: drop-shadow(0 0 3px #F29400); }
.vu-peak-label { font-family: var(--f-mono); font-size: 5.6px; fill: #1A1D1F; text-anchor: middle; letter-spacing: .4px; }
.vu-needle { stroke: #16181A; stroke-width: 1.6; stroke-linecap: round; }
.vu-glass { fill: rgba(255,255,255,.07); }
.vu-glow { opacity: 0; transition: opacity 500ms var(--ease); }
.vu-dim  { fill: #0E1113; opacity: .5; transition: opacity 500ms var(--ease); }
.rack[data-power="on"] .vu-glow { opacity: .55; }
.rack[data-power="on"] .vu-dim  { opacity: 0; }

/* Drehregler */
.rack-knobs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; align-items: start;
}
.knob { display: grid; justify-items: center; gap: 4px; }
.knob-svg { width: 100%; max-width: 74px; height: auto; overflow: visible; }
.knob-svg use { stroke: #6A747B; stroke-width: 1.3; }
.knob-track { fill: none; stroke: #0C0F10; stroke-width: 3; stroke-linecap: round; }
.knob-arc {
  fill: none; stroke: #4C555B; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 0 1;
}
.rack[data-power="on"] .knob-arc { stroke: var(--orange); filter: drop-shadow(0 0 2.5px rgba(242,148,0,.7)); }
.knob-pointer { stroke: #F4F2ED; stroke-width: 2.2; stroke-linecap: round; }
.knob-val {
  font-size: .64rem; letter-spacing: .02em; text-transform: none;
  color: var(--text-3); font-variant-numeric: tabular-nums;
  min-width: 6ch; text-align: center;
}
.rack[data-power="on"] .knob-val { color: var(--orange); }
.knob-label { font-size: .6rem; color: var(--sand); }

/* Gate-Sektion */
.rack-gate { display: grid; gap: 12px; }
.gate-display {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  padding: 6px 10px;
  background: #090B0C;
  border: 1px solid #262E33; border-radius: 3px;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.85);
}
.gate-num {
  font-size: 1.35rem; font-weight: 500; letter-spacing: .03em;
  text-transform: none; font-variant-numeric: tabular-nums;
  color: #4A3A20;
}
.gate-unit { font-size: .56rem; color: var(--text-3); text-transform: none; letter-spacing: .04em; }
.rack[data-power="on"] .gate-num { color: var(--orange); text-shadow: 0 0 8px rgba(242,148,0,.55); }

.gate-ch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ch { display: grid; justify-items: center; gap: 4px; }
.ch b { font-size: .58rem; font-weight: 500; color: var(--text-3); }
.led {
  display: block; width: 100%; max-width: 26px; height: 8px; border-radius: 2px;
  background: #262B2F;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
  transition: background 70ms linear, box-shadow 70ms linear;
}
.led.is-on {
  background: var(--orange);
  box-shadow: 0 0 9px rgba(242,148,0,.75), inset 0 1px 0 rgba(255,255,255,.45);
}

.gr { display: flex; align-items: center; gap: 8px; }
.gr-label { font-size: .58rem; color: var(--text-3); }
.gr-bar { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.gr-bar i {
  display: block; height: 6px; border-radius: 1px; background: #262B2F;
  transition: background 70ms linear;
}
.gr-bar i.is-on { background: var(--sand); }
.gr-bar i:nth-child(n+8).is-on { background: var(--orange); box-shadow: 0 0 6px rgba(242,148,0,.6); }

.rack-caption { font-size: .56rem; color: var(--text-3); letter-spacing: .1em; }

/* Übergänge erst nach der Initialisierung — kein Aufblitzen beim Laden */
.rack:not(.is-ready) *, .rack:not(.is-ready) *::before { transition: none !important; }

/* Zwei Reihen: Regler unter die Anzeigen */
@media (max-width: 1180px) {
  .rack-face {
    grid-template-columns: minmax(128px, .8fr) minmax(210px, 1.2fr) minmax(170px, 1fr);
    grid-template-areas: "brand vu gate" "knobs knobs knobs";
    row-gap: 20px;
  }
  .rack-knobs {
    border-left: 0; box-shadow: none;
    border-top: 1px solid rgba(0,0,0,.5);
    padding: 18px 0 0;
    max-width: 520px; width: 100%; justify-self: center;
  }
}
/* Enge Tablets: Ohren und Innenabstände etwas schmaler */
@media (max-width: 900px) {
  .rack-face { padding-inline: 46px; }
  .rack-ear { width: 34px; }
  .rack-vu, .rack-knobs, .rack-gate { padding-inline: 14px; }
  .rack-brand { padding-right: 12px; }
}
/* Smartphones: Gerät ausblenden. Es würde fast eine Bildschirmhöhe belegen und die
   eigentlichen Informationen nach unten drücken. display:none nimmt es zugleich aus
   dem Accessibility-Baum, und der Animations-Loop startet dort gar nicht erst. */
@media (max-width: 767px) {
  .hero-visual.rack { display: none; }
  .hero-actions { margin-bottom: 0; }
}

.specbar {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line);
}
.specbar-item { padding: var(--s-4); border-right: 1px solid var(--line); }
.specbar-item:last-child { border-right: 0; }
.specbar dt { color: var(--sand); margin-bottom: .35rem; }
.specbar dd { margin: 0; font-size: 1.05rem; font-weight: 500; }

@media (max-width: 700px) {
  .specbar-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .specbar-item:last-child { border-bottom: 0; }
}

/* ─────────────────────────────── SEKTIONSKOPF ─────────────────────────────── */
.section-head { max-width: 72ch; margin-bottom: var(--s-7); }
.section-label { color: var(--sand); display: flex; align-items: baseline; gap: .8rem; margin-bottom: var(--s-3); }
.section-label .idx {
  color: var(--orange);
  font-size: .78rem;
  padding-right: .8rem;
  border-right: 1px solid var(--line-strong);
}
.section-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.section-intro {
  margin-top: var(--s-3);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--text-2);
  max-width: 58ch;
}

/* ─────────────────────────────── LEISTUNGSKARTEN ─────────────────────────────── */
.cards {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.card {
  position: relative;
  background: var(--card);
  padding: var(--s-5) var(--s-4) var(--s-5);
  transition: background var(--dur) var(--ease);
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--orange);
  transform: scaleY(0); transform-origin: top;
  transition: transform 320ms var(--ease);
}
.card:hover { background: var(--card-hi); }
.card:hover::before { transform: scaleY(1); }

.card-idx { position: absolute; top: var(--s-4); right: var(--s-4); color: var(--text-3); font-size: .72rem; }
.card-ico { width: 32px; height: 32px; color: var(--orange); margin-bottom: var(--s-4); }
.card-title {
  font-family: var(--f-display);
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.card-text { color: var(--text-2); font-size: .975rem; }
.card-meta {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  color: var(--text-3); font-size: .7rem;
}
.card-meta li { position: relative; padding-left: .85rem; }
.card-meta li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 4px; height: 4px; background: var(--sand);
}

/* ─────────────────────────────── PROZESS ─────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none; padding: 0;
  border-top: 1px solid var(--line);
}
.step {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.step::before {
  content: ""; position: absolute; top: -1px; left: var(--s-4); width: 34px; height: 2px;
  background: var(--orange);
}
.step-disclosure { position: relative; }
.step-summary {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  cursor: pointer;
  list-style: none;
}
.step-summary::-webkit-details-marker { display: none; }
.step-summary:hover .step-title { color: var(--orange-hi); }
.step-no { display: block; color: var(--orange); font-size: .8rem; }
.step-title { font-family: var(--f-display); font-size: 1.1rem; font-weight: 600; transition: color var(--dur) var(--ease); }
.step-toggle,
.offer-toggle {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  justify-self: end;
}
.step-toggle::before, .step-toggle::after,
.offer-toggle::before, .offer-toggle::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}
.step-toggle::after,
.offer-toggle::after { transform: rotate(90deg); }
.step-disclosure[open] .step-toggle::after,
.offer[open] .offer-toggle::after { transform: rotate(0); }
.step-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms var(--ease), opacity var(--dur) var(--ease);
}
.step-panel > div { overflow: hidden; }
.step-disclosure[open] .step-panel { grid-template-rows: 1fr; opacity: 1; }
details.step-disclosure:not([open]) > .step-panel { display: grid; }
.step-text { color: var(--text-2); font-size: .94rem; padding: 0 var(--s-4) var(--s-4) calc(4rem + var(--s-3)); }

@media (max-width: 620px) {
  .step-summary { grid-template-columns: 2.3rem minmax(0, 1fr) 1.25rem; padding-inline: var(--s-3); }
  .step::before { left: var(--s-3); }
  .step-text { padding-inline: calc(2.3rem + var(--s-6)) var(--s-3); }
}

/* ─────────────────────── STUDIO-SEKTION MIT STEINWAND ───────────────────────
   Die Flusskiesel-Wand des Aufnahmeraums liegt als Bild hinter der Sektion und
   verläuft nach unten in die Grundfläche. Der dunkle Schleier ist so gewählt,
   dass selbst über den hellsten Kieseln alle Textfarben AA/AAA erreichen
   (Messwerte siehe ACCESSIBILITY.md, Abschnitt 3). */
.section--stone { position: relative; isolation: isolate; overflow: hidden; }

.stone-layer { position: absolute; inset: 0; z-index: -1; }
.stone-layer::before {
  content: ""; position: absolute; inset: 0;
  background: url("assets/bg-stein-900.webp") 50% 30% / cover no-repeat;
  filter: grayscale(.28) contrast(1.05) brightness(.92);
}
@media (min-width: 901px) {
  .stone-layer::before { background-image: url("assets/bg-stein-1600.webp"); }
}
.stone-layer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #0E1113            0%,
    rgba(14,17,19,.89) 12%,
    rgba(14,17,19,.92) 30%,
    rgba(14,17,19,.97) 60%,
    #0E1113            82%);
}

/* Raumakustik als Textstrecke — die Wand selbst liefert das Bild dazu */
.acoustics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: var(--s-8);
}
.acoustic {
  position: relative;
  padding: var(--s-4);
  border-top: 1px solid var(--line-strong);
  border-right: 1px solid rgba(255,255,255,.10);
}
.acoustic:last-child { border-right: 0; }
.acoustic::before {
  content: ""; position: absolute; top: -1px; left: var(--s-4); width: 34px; height: 2px;
  background: var(--orange);
}
.acoustic-key { color: var(--sand); font-size: .72rem; margin-bottom: .5rem; }
.acoustic-val { color: var(--text-2); font-size: .94rem; max-width: 34ch; }

@media (max-width: 860px) {
  .acoustics { grid-template-columns: 1fr; }
  .acoustic { border-right: 0; }
  .acoustic-val { max-width: 56ch; }
}

/* ─────────────────────────────── RACK / EQUIPMENT ─────────────────────────────── */
.rack-title {
  font-family: var(--f-mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--sand);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
}
.rack-list { display: grid; gap: 0; }
.rack-row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.rack-row:first-child { border-top: 1px solid var(--line); }
.rack-key { color: var(--sand); font-size: .74rem; }
.rack-val { color: var(--text-2); font-size: .975rem; }
.rack-note { margin-top: var(--s-4); color: var(--text-3); font-size: .7rem; text-transform: none; letter-spacing: .03em; }

@media (max-width: 640px) {
  .rack-row { grid-template-columns: 1fr; gap: .25rem; }
}

/* ─────────────────────────────── HELLE SEKTION ─────────────────────────────── */
.section--light {
  background: var(--bone);
  color: var(--ink);
  /* Sandkorn aus der Kieselwand als feine Textur */
  background-image: radial-gradient(circle at 12% 18%, rgba(203,190,156,.35), transparent 42%),
                    radial-gradient(circle at 88% 82%, rgba(156,153,143,.28), transparent 46%);
}
.section--light .section-label { color: var(--ink-2); }
.section--light .section-label .idx { color: var(--carmine); border-right-color: #B6AE9F; }
.section--light .section-intro { color: var(--ink-2); }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: #D5CEC0;
  border: 1px solid #D5CEC0;
  border-radius: var(--r);
  overflow: hidden;
}
.person { background: var(--bone); padding: var(--s-5) var(--s-4); }
.person-role {
  font-family: var(--f-display); font-size: 1.1rem; font-weight: 600;
  margin-bottom: .55rem; color: var(--ink);
  padding-left: .85rem; border-left: 2px solid var(--carmine);
}
.person-text { color: var(--ink-2); font-size: .95rem; }

.family {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: rgba(140,41,49,.07);
  border-left: 3px solid var(--carmine);
  border-radius: var(--r);
}
.family-kicker { color: var(--carmine); margin-bottom: .5rem; font-size: .72rem; }
.family-text { color: var(--ink-2); max-width: 62ch; }

/* ─────────────────────────────── KARMIN-SEKTION ─────────────────────────────── */
.section--carmine {
  background:
    linear-gradient(135deg, #8C2931 0%, #7E2028 46%, #6E1B23 100%);
  color: #FFFFFF;
}
.section--carmine .section-label { color: rgba(255,255,255,.86); }
.section--carmine .section-label .idx { color: #FFD9AE; border-right-color: rgba(255,255,255,.4); }
.section--carmine .section-intro { color: rgba(255,255,255,.92); }


/* ─────────────────────────────── FAQ ─────────────────────────────── */
.faq { border-top: 1px solid var(--line-strong); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 60px; padding: var(--s-3) 0;
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: ""; flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--orange), var(--orange)) center/14px 1.6px no-repeat,
    linear-gradient(var(--orange), var(--orange)) center/1.6px 14px no-repeat;
  transition: transform 260ms var(--ease);
}
.faq-item[open] .faq-q::after { transform: rotate(135deg); }
.faq-q:hover { color: var(--orange-hi); }
.faq-a { padding-bottom: var(--s-4); }
.faq-a p { color: var(--text-2); max-width: 66ch; }

/* ─────────────────────────────── KONTAKT ─────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.contact-list { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.contact-row {
  display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.contact-row dt { color: var(--sand); font-size: .74rem; }
.contact-row dd { margin: 0; color: var(--text); }
/* Klickfläche >= 24 px hoch (WCAG 2.2 AA, 2.5.8 Target Size Minimum) */
.contact-row a {
  display: inline-block;
  padding-block: .2rem;
  color: var(--orange); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact-row a:hover { color: var(--orange-hi); border-bottom-color: currentColor; }

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-5);
}
.form-legend {
  color: var(--sand);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-5);
}
.field { margin-bottom: var(--s-4); }
.field > label {
  display: block;
  font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text);
  margin-bottom: .5rem;
}
.req { color: var(--orange); }

input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font-family: var(--f-body); font-size: 1rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
input:hover, select:hover, textarea:hover { border-color: #8A949B; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--carmine-text);
  background: rgba(224,119,130,.06);
}

.hint { margin-top: .4rem; font-size: .8rem; color: var(--text-2); }
.error-msg {
  margin-top: .45rem; font-size: .82rem; color: var(--carmine-text);
  display: flex; align-items: flex-start; gap: .4rem;
}
/* Gewicht 500, nicht 700: Mono wird nur in 400/500 ausgeliefert — 700 hätte der
   Browser künstlich fettet (Faux Bold) und dabei sichtbar verzerrt. */
.error-msg::before { content: "!"; font-weight: 500; font-family: var(--f-mono); flex: none; }

.field--check .check-row { display: flex; align-items: flex-start; gap: .7rem; }
.field--check input[type="checkbox"] {
  flex: none;
  width: 24px; height: 24px; margin-top: 1px;
  accent-color: var(--orange);
  cursor: pointer;
}
.field--check label {
  font-family: var(--f-body); font-size: .925rem;
  text-transform: none; letter-spacing: 0;
  color: var(--text-2); cursor: pointer; margin: 0;
}
.field--check .hint { margin-left: 2.2rem; }

.form-required { color: var(--text-3); font-size: .68rem; text-transform: none; letter-spacing: .04em; margin-bottom: var(--s-4); }

.form-trap {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.form-status:not(:empty) {
  margin-top: var(--s-4);
  padding: .85rem 1rem;
  border-radius: var(--r);
  font-size: .925rem;
  border-left: 3px solid var(--orange);
  background: rgba(242,148,0,.08);
  color: var(--text);
}
.form-status.is-error { border-left-color: var(--carmine-text); background: rgba(224,119,130,.08); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ─────────────────────────────── FOOTER ─────────────────────────────── */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-top: var(--s-7); }
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: var(--s-7);
  padding-bottom: var(--s-6);
}
.footer-logo { height: 56px; width: auto; margin-bottom: var(--s-4); }
.footer-claim { color: var(--text-2); font-size: .95rem; max-width: 42ch; }

.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-5); }
.footer-h {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--sand); margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .35rem; }
/* Klickfläche >= 24 px hoch, Abstand >= 8 px (WCAG 2.2 AA, 2.5.8) */
.footer-col a {
  display: inline-block;
  padding-block: .3rem;
  color: var(--text-2); text-decoration: none; font-size: .925rem;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--orange-hi); }

.footer-base {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: space-between;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: .7rem;
}

@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ─────────────── SOCIAL MEDIA ───────────────
   Einfache Links, keine eingebetteten Plugins — es fließen keine Daten zu Meta,
   solange niemand klickt. Klickflächen 44 × 44 px. */
.social { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: flex; gap: 10px; }
.social-link {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.social-link:hover { color: var(--orange-hi); border-color: var(--orange); }
.social-link:focus-visible { border-radius: 50%; }
.social-ico { display: block; width: 20px; height: 20px; flex: none; object-fit: contain; }

.social-text {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 32px;
  color: var(--orange); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social-text .social-ico { width: 18px; height: 18px; }
.social-text:hover { color: var(--orange-hi); border-bottom-color: currentColor; }
.contact-social { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
.contact-row .contact-social a { padding-block: 0; }

.social-text--carmine { color: #FFFFFF; }
.social-text--carmine:hover { color: #FFD9AE; }

/* Verweis unter den Leistungskarten */
.section-more { margin-top: var(--s-5); }
.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 32px;
  color: var(--orange); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link-arrow:hover { color: var(--orange-hi); border-bottom-color: currentColor; }
.link-arrow:hover .btn-ico { transform: translateX(3px); }
.link-arrow .btn-ico { transition: transform var(--dur) var(--ease); }

/* ─────────────── WAS WIR ANBIETEN ─────────────── */
.draft-note--block { max-width: 72ch; margin-bottom: var(--s-5); }
.offer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); max-width: 920px; }
.offer {
  padding: 0 var(--s-4);
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.offer-head {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: .9rem;
  padding-block: var(--s-4);
  cursor: pointer;
  list-style: none;
}
.offer-head::-webkit-details-marker { display: none; }
.offer-head:hover .offer-title { color: var(--orange-hi); }
.offer-idx { color: var(--orange); font-size: .72rem; }
.offer-title { font-family: var(--f-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -.01em; transition: color var(--dur) var(--ease); }
.offer-list {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top: 0 solid var(--line-strong);
  transition: max-height 420ms var(--ease), opacity var(--dur) var(--ease), border-top-width var(--dur) var(--ease);
}
.offer[open] .offer-list { max-height: 60rem; opacity: 1; border-top-width: 1px; }
details.offer:not([open]) > .offer-list { display: block; }
.offer-item { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.offer-item:last-child { border-bottom: 0; }
.offer-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.offer-name { font-weight: 500; color: var(--text); }
.offer-price { font-size: .72rem; color: var(--text-3); text-transform: none; letter-spacing: .03em; white-space: nowrap; }
.offer-desc { margin-top: .2rem; font-size: .86rem; color: var(--text-3); font-family: var(--f-mono); letter-spacing: .01em; }
.offer-foot {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: var(--r);
  background: var(--card);
}
.offer-foot p { color: var(--text-2); max-width: 52ch; }
.offer-foot p { font-weight: 700; }

/* ─────────────── GALERIE: EINBLICK INS STUDIO ─────────────── */
.media { margin-bottom: var(--s-6); }
.studio-preview .media { margin-bottom: 0; }
.media-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.shot { position: relative; margin: 0; min-height: 0; display: grid; }
.shot-frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--card); }
.shot--video { grid-column: span 8; grid-row: span 2; align-content: start; }
.shot--video .shot-frame { aspect-ratio: 16 / 9; }
.shot--side { grid-column: span 4; }
.shot--side .shot-frame { height: 100%; min-height: 150px; }
.shot--row { grid-column: span 3; }
.shot--row .shot-frame { aspect-ratio: 4 / 3; }
/* Echte Medien füllen den Rahmen */
.shot-frame > img, .shot-frame > video, .shot-frame > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.shot-frame > picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.shot-frame[data-image-fit="contain"] > img,
.shot-frame[data-image-fit="contain"] > picture > img { object-fit: contain; }
.shot-ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: .45rem;
  padding: var(--s-3); text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #1D2428, #141A1D);
  border: 1px dashed rgba(207,194,160,.34); border-radius: inherit;
}
.shot-ico { width: 28px; height: 28px; color: var(--sand); }
.shot-label { font-size: .64rem; color: var(--sand); }
.shot-hint { font-size: .86rem; color: var(--text-2); }
.shot-play {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--orange); color: var(--orange);
  box-shadow: 0 0 20px rgba(242,148,0,.35), inset 0 0 12px rgba(242,148,0,.18);
}
.shot-play svg { width: 26px; height: 26px; margin-left: 3px; }
/* Bildunterschrift liegt bei Fotos unten im Bild; beim Video als Etikett oben links,
   weil unten die Steuerleiste sitzt — so bleiben Video und Fotospalte bündig */
.shot-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.8rem .9rem .7rem;
  border-radius: 0 0 var(--r) var(--r);
  background: linear-gradient(180deg, transparent, rgba(9,11,12,.9) 70%);
  color: var(--text); font-size: .84rem; line-height: 1.35;
  pointer-events: none;
}
.shot--video .shot-cap {
  top: .8rem; left: .8rem; right: auto; bottom: auto;
  max-width: calc(100% - 1.6rem);
  padding: .35rem .65rem;
  background: rgba(9,11,12,.8);
  border: 1px solid rgba(255,255,255,.12); border-radius: 3px;
  font-size: .8rem;
}
@media (max-width: 1000px) {
  .shot--video { grid-column: 1 / -1; grid-row: auto; }
  .shot--side, .shot--row { grid-column: span 4; }
  .shot--side .shot-frame { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .media-grid { gap: 8px; }
  .shot--side, .shot--row { grid-column: span 6; }
  .shot-cap { font-size: .76rem; padding: 1.4rem .6rem .5rem; }
  .shot-ph .shot-hint { display: none; }
}
/* Platzhalter-Inhalt über der eingeblendeten Bildunterschrift halten */
.shot:not(.shot--video) .shot-ph { padding-bottom: 2.8rem; }
@media (max-width: 600px) {
  .shot-label-x { display: none; }
  .shot-ico { width: 22px; height: 22px; }
  /* Kleine Kacheln: Symbol und Etikett oben, die Unterschrift darf zweizeilig werden */
  .shot:not(.shot--video) .shot-ph { place-content: start center; padding-top: .9rem; padding-bottom: 0; }
  .shot-cap { padding-top: 1.1rem; }
}
/* Sehr schmale Geräte: einspaltig, sonst verdeckt eine dreizeilige Unterschrift fast das halbe Foto */
@media (max-width: 350px) {
  .shot--side, .shot--row { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .step-panel, .offer-list { transition: none; }
}

/* ─────────────── REFERENZEN (auf Karmin) ─────────────── */
.refs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.ref {
  display: grid; grid-template-rows: auto 1fr;
  overflow: hidden;
  background: rgba(9,11,12,.32);
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
}
.ref-media {
  aspect-ratio: 16 / 9;
  display: grid; place-content: center; justify-items: center; gap: .5rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 12px, transparent 12px 24px),
    rgba(9,11,12,.38);
  border-bottom: 1px dashed rgba(255,217,174,.4);
  color: #FFD9AE;
}
.ref-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  background: #090B0C;
}
.ref-media--audio {
  align-content: center;
  padding: var(--s-3);
}
.ref-media--audio .ref-audio-mark {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 1.5px solid rgba(255,217,174,.75);
  border-radius: 50%;
  color: #FFD9AE;
  background: rgba(9,11,12,.2);
}
.ref-media--audio .ref-audio-mark svg { width: 30px; height: 30px; }
.ref-media--audio audio {
  width: min(100%, 22rem);
  height: 2.6rem;
}
.ref-ico {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(255,217,174,.75);
}
.ref-ico svg { width: 27px; height: 27px; }
.ref--film .ref-ico svg { margin-left: 3px; }
.ref-media .mono { font-size: .62rem; }
.ref-body { padding: var(--s-4); display: grid; gap: .35rem; align-content: start; }
.ref-type { font-size: .64rem; color: #FFD9AE; }
.ref-title { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: #FFFFFF; }
.ref-meta, .ref-text { font-size: .88rem; color: rgba(255,255,255,.86); }
.refs-foot {
  margin-top: var(--s-6); padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5);
  border-top: 1px solid rgba(255,255,255,.26);
}
.refs-foot p { color: rgba(255,255,255,.92); max-width: 52ch; }
.refs-social { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; }
@media (max-width: 1000px) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .refs { grid-template-columns: 1fr; } }

/* ─────────────── UNTERSEITEN: RECHTLICHES & 404 ─────────────── */
.page-head {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head-inner { position: relative; }
.page-title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2.4rem, 6.5vw, 4.5rem);
  line-height: 1.02; letter-spacing: -.03em; text-wrap: balance;
}
.page-meta {
  margin-top: var(--s-4);
  color: var(--text-3); font-size: .72rem; text-transform: none; letter-spacing: .04em;
}

.legal {
  display: grid;
  grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
  padding-block: clamp(3rem, 7vw, 5rem) var(--section-y);
}
.legal-aside { position: sticky; top: calc(var(--nav-h) + 2rem); display: grid; gap: var(--s-4); }
.legal-aside-title {
  color: var(--sand);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line-strong);
}
.toc { list-style: none; padding: 0; margin: 0; display: grid; }
.toc a {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .42rem 0;
  font-size: .9rem; line-height: 1.4;
  color: var(--text-2); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.toc .idx { font-family: var(--f-mono); font-size: .7rem; color: var(--orange); min-width: 2ch; }
.toc a:hover { color: var(--text); }

.facts { list-style: none; padding: 0; margin: 0; display: grid; }
.facts li {
  display: grid; gap: .15rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
  font-size: .92rem; color: var(--text);
}
.facts .mono { font-size: .66rem; color: var(--sand); }
.facts a { color: var(--orange); text-decoration: none; }
.facts a:hover { color: var(--orange-hi); text-decoration: underline; }

.legal-body { max-width: 70ch; }
.legal-body > * + * { margin-top: var(--s-3); }
.legal-body h2 {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.2; letter-spacing: -.01em;
  margin-top: var(--s-7); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.legal-body h2 .idx {
  font-family: var(--f-mono); font-size: .74rem; font-weight: 500;
  color: var(--orange); letter-spacing: .08em; flex: none;
}
.legal-body h3 {
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem;
  margin-top: var(--s-5);
}
.legal-body p, .legal-body li, .legal-body address, .legal-body dd { color: var(--text-2); }
.legal-body strong { color: var(--text); font-weight: 500; }
.legal-body ul { padding-left: 1.15rem; display: grid; gap: .35rem; }
.legal-body li::marker { color: var(--orange); }
.legal-body address { font-style: normal; line-height: 1.8; }
.legal-body a {
  color: var(--orange);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.legal-body a:hover { color: var(--orange-hi); }

.legal-dl { display: grid; border-top: 1px solid var(--line); }
.legal-dl > div {
  display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: var(--s-4);
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.legal-dl dt { color: var(--sand); font-size: .72rem; padding-top: .2em; }
.legal-dl dd { margin: 0; }

.callout {
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: var(--r);
}
.callout > * + * { margin-top: var(--s-2); }

/* Entwurfshinweis und Platzhalter: bewusst auffällig, damit nichts versehentlich live geht */
.draft-note {
  padding: var(--s-3) var(--s-4);
  border: 1px dashed rgba(242,148,0,.6); border-radius: var(--r);
  background: rgba(242,148,0,.06);
}
.draft-note p { font-size: .92rem; }
.ph {
  font-family: var(--f-mono); font-size: .86em; font-weight: 500;
  color: var(--orange-hi); background: rgba(242,148,0,.13);
  padding: .05em .35em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.footer-col a[aria-current="page"] { color: var(--text); }

@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: var(--s-6); }
  .legal-aside { position: static; }
}
@media (max-width: 560px) {
  .legal-dl > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* 404 — im Stil der Digitalanzeige des Effektgeräts */
.nf {
  position: relative; overflow: hidden;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display: grid; align-items: center;
  padding-block: var(--s-7);
}
.nf-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--s-7); align-items: center;
}
.nf .section-intro { max-width: 52ch; }
.nf-actions { margin: var(--s-5) 0 var(--s-6); }
.nf-links-title { color: var(--sand); margin-bottom: var(--s-2); }
.nf-links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-4); max-width: 460px; }
.nf-links a {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
  color: var(--text-2); text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nf-links a:hover { color: var(--text); }
.nf-links .idx { font-size: .7rem; color: var(--orange); }

.nf-display {
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: #090B0C;
  border: 1px solid #2A3237; border-radius: 6px;
  box-shadow: inset 0 2px 14px rgba(0,0,0,.9), 0 30px 60px -30px rgba(0,0,0,.9);
  -webkit-user-select: none; user-select: none;
}
.nf-top, .nf-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  font-size: .64rem; color: var(--text-3);
}
.nf-led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #3A1417; box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
  margin-left: auto;
}
.nf-code {
  margin: var(--s-3) 0 var(--s-2);
  font-size: clamp(4.5rem, 13vw, 8.5rem); line-height: 1; font-weight: 500;
  letter-spacing: .02em; text-transform: none; font-variant-numeric: tabular-nums;
  color: var(--orange); text-shadow: 0 0 24px rgba(242,148,0,.45);
}
.nf-trace { display: block; width: 100%; height: 56px; margin-bottom: var(--s-3); }
.nf-trace .grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.nf-trace .flat { stroke: var(--orange); stroke-width: 1.6; fill: none; filter: drop-shadow(0 0 4px rgba(242,148,0,.6)); }

@media (max-width: 860px) {
  .nf { align-items: start; }
  .nf-inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .nf-display { order: -1; }
}
@media (max-width: 420px) {
  .nf-links ul { grid-template-columns: 1fr; }
}

/* ─────────────────────────────── REVEAL ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease) var(--d, 0ms), transform 620ms var(--ease) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
/* Fallback ohne JavaScript */
.no-js .reveal { opacity: 1; transform: none; }

/* ─────────────────────────────── MOBILE NAVIGATION ─────────────────────────────── */
/* Sieben Menüpunkte: Menü-Knopf bis 1240 px, darüber die volle Navigation */
@media (max-width: 1240px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    display: block;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--s-3) var(--pad) var(--s-5);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block;
    padding: .95rem .25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-list a::after { display: none; }
  .nav-cta { margin-top: var(--s-4); width: 100%; }
}

@media (max-width: 420px) {
  .brand-logo { height: 40px; }
  .nav-toggle { padding: .6rem; }
  /* Label optisch ausblenden, aber als Name des Buttons erhalten */
  .nav-toggle-label {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ─────────────────────────────── DRUCK ─────────────────────────────── */
@media print {
  .site-header, .nav-toggle, .hero-visual, .hero-lines, .form { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}