/* imm.one – Gestaltung „Klein“ (ab 0.6.0): alles Kleingedruckte in einem strengen 12er-Raster, groß sind nur die Arbeiten. */

@font-face { font-family: "HN"; src: url("/media/schrift/HelveticaNeueLTPro-Roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "HN"; src: url("/media/schrift/HelveticaNeueLTPro-It.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "HN"; src: url("/media/schrift/HelveticaNeueLTPro-Bd.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --schwarz: #111111;
  --grau: #737373;      /* 4,7:1 auf Weiß – reicht auch für kleine Schrift */
  --linie: #dedede;
  --hell: #f2f2f2;
  --orange: #ff7d00;
  --schrift: "HN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rand: 16px;
  --gross: 400 clamp(24px, 2.7vw, 40px)/1.12 var(--schrift);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; background: #fff; color: var(--schwarz);
  font: 400 13px/1.45 var(--schrift); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; padding: 0; font-style: normal; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.grau { color: var(--grau); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--schwarz); color: #fff; padding: 8px 12px; }
.sprung:focus { top: 12px; color: #fff; }
.cine { transform: scale(1.34); } /* Auto-Film hat Kinobalken im Bild */

/* ---------- Raster ---------- */
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; padding: 0 var(--rand); }
.s1 { grid-column: 1 / 4; } .s2 { grid-column: 4 / 7; } .s3 { grid-column: 7 / 10; } .s4 { grid-column: 10 / 13; }
.s2-3 { grid-column: 4 / 10; } .s2-4 { grid-column: 4 / 13; } .s3-4 { grid-column: 7 / 13; }

/* Abschnittszeile: Haarlinie, Titel, Zahl, Satz */
.zeile { border-top: 1px solid var(--schwarz); margin: 0 var(--rand); padding: 8px 0; }
.zeile h2 { font: inherit; }

/* ---------- Kopf und Fuß ---------- */
.kopf {
  position: sticky; top: 0; z-index: 10; align-items: start; padding-top: 14px; padding-bottom: 14px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf-logo img { width: clamp(120px, 10vw, 150px); }
.kopf nav ul { display: flex; gap: 14px; justify-content: flex-end; }
.kopf nav a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

.fuss { align-items: start; margin-top: 40px; padding-top: 14px; padding-bottom: 80px; border-top: 1px solid var(--linie); }
.fuss ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ---------- Start und große Sätze ---------- */
.held { padding-top: clamp(90px, 22vh, 240px); padding-bottom: clamp(70px, 14vh, 160px); }
.held > div, .held h1, .held p { font: var(--gross); letter-spacing: -.022em; } /* auch das Leerzeichen zwischen h1 und p groß */
.held h1, .held p { display: inline; }
.held h1 span, .held p { color: var(--grau); }
.gross { font: var(--gross); letter-spacing: -.022em; }
.text { font: 400 clamp(18px, 1.7vw, 24px)/1.3 var(--schrift); letter-spacing: -.012em; }
.text p + p { margin-top: .8em; }

/* ---------- Arbeiten ---------- */
.arbeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; padding: 24px var(--rand) clamp(100px, 14vw, 200px); }
.kachel { display: block; width: 100%; }
.kachel .medium { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--hell); }
.kachel video, .kachel img { width: 100%; height: 100%; object-fit: cover; }
.kachel .unter { display: grid; grid-template-columns: 2.6em auto 1fr auto; gap: 8px; margin-top: 8px; }
.kachel .art { margin-left: 4px; }
.kachel .unter b { font-weight: 400; }
.kachel .plus { width: 1em; text-align: right; transition: rotate .2s; }
.arbeit p { margin-left: calc(2.6em + 8px); color: var(--grau); }
.arbeit p a { color: var(--schwarz); border-bottom: 1px solid currentColor; }
@media (hover: hover) {
  .kachel:hover b, .kachel:hover .plus { color: var(--orange); }
  .kachel:hover .plus { rotate: 90deg; }
  /* Leute mit Maus in Schwarzweiß, farbig beim Drüberfahren; auf dem Handy immer in Farbe */
  .gr img { filter: grayscale(1); transition: filter .3s; }
  .gr:hover img { filter: none; }
}

/* Großansicht einer Arbeit */
.ansicht { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--schwarz); overflow: auto; }
.ansicht::backdrop { background: rgba(255, 255, 255, .9); }
.ansicht-kopf { display: flex; gap: 12px; position: sticky; top: 0; z-index: 2; align-items: baseline; padding-top: 14px; padding-bottom: 14px; background: rgba(255, 255, 255, .94); }
.ansicht-kopf h3 { font: inherit; }
.ansicht-kopf h3 span { margin-right: 8px; }
.ansicht-kopf .zu { margin-left: auto; }
.ansicht-kopf .zu:hover { color: var(--orange); }
.ansicht-inhalt { row-gap: 24px; padding-top: 8px; padding-bottom: 80px; }
.ansicht-film { grid-column: 1 / -1; justify-self: center; position: relative; }
.ansicht-film video {
  width: min(100%, calc((100svh - 190px) * var(--format, 1.7778)));
  aspect-ratio: var(--format, 1.7778); object-fit: cover; background: var(--hell);
}
.ansicht-film .ton { position: absolute; right: 10px; bottom: 10px; padding: 6px 10px; background: #fff; }
.ansicht-film .ton:hover { color: var(--orange); }
.ansicht-text { grid-column: 4 / 10; font: 400 clamp(16px, 1.4vw, 20px)/1.35 var(--schrift); letter-spacing: -.01em; }
.ansicht-text a { border-bottom: 1px solid currentColor; }
/* Stream-Fotos als Band wie die Kundenlogos: zwei gleiche Listen, die zweite nur fürs Auge */
.foto-band { grid-column: 1 / -1; display: flex; overflow: hidden; margin: 0 calc(-1 * var(--rand)); }
.fotos { flex: none; display: flex; gap: 12px; padding-right: 12px; animation: band 110s linear infinite; }
.foto-band:hover .fotos { animation-play-state: paused; }
.fotos img { height: min(62svh, 600px); width: auto; background: var(--hell); }

/* ---------- Studio ---------- */
.studio { row-gap: 56px; padding-top: 24px; padding-bottom: clamp(100px, 14vw, 200px); }
.studio h3, .ueber h3, .info h3 { font: inherit; color: var(--grau); }
.gr img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gr figcaption { margin-top: 8px; }
.weiter-zeile { margin-top: 28px; }
.weiter { border-bottom: 1px solid currentColor; }
/* Kundenlogos als Band: drei gleiche Listen laufen nach links, die zweite und dritte nur fürs Auge */
.kunden-band { grid-column: 1 / -1; display: flex; overflow: hidden; margin: 0 calc(-1 * var(--rand));
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.kunden-logos { flex: none; display: flex; align-items: center; animation: band 45s linear infinite; }
.kunden-band:hover .kunden-logos { animation-play-state: paused; }
.kunden-logos li { padding: 0 clamp(28px, 4vw, 64px); }
.kunden-logos img { height: clamp(30px, 3vw, 44px); width: auto; filter: grayscale(1); opacity: .7; }
.kunden-logos img[src$="kunde-6.webp"] { height: clamp(60px, 6vw, 88px); margin: -12px 0; }
.kunden-logos img[src$="kunde-7.webp"] { height: clamp(18px, 1.8vw, 26px); }
.kunden-logos img[src$="kunde-8.webp"] { height: clamp(26px, 2.6vw, 38px); }
@keyframes band { to { transform: translateX(-100%); } }

/* ---------- Über uns ---------- */
.ueber { row-gap: 56px; padding-top: 24px; padding-bottom: clamp(100px, 14vw, 200px); }

/* ---------- Kontakt ---------- */
.info { row-gap: 40px; padding-top: 24px; }
.info .unten { align-self: end; }
.mail { display: inline-block; justify-self: start; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; border-bottom: 1px solid currentColor; }
.faehnchen { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.faehnchen img { width: clamp(130px, 17vw, 240px); flex: none; }
.faehnchen figcaption { font-size: clamp(18px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -.015em; }
/* Quelle klein unter dem Satz, so groß wie das Kleingedruckte */
.faehnchen .quelle { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; letter-spacing: 0; }

/* ---------- Rechtliches und 404 ---------- */
.rechtlich {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px;
  padding: clamp(70px, 14vh, 160px) var(--rand) 40px; font-size: 14px; line-height: 1.55;
}
.rechtlich > * { grid-column: 4 / 10; }
.rechtlich h1 { font: var(--gross); letter-spacing: -.022em; margin-bottom: 32px; overflow-wrap: anywhere; hyphens: auto; }
.rechtlich h2 { font: inherit; margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--schwarz); }
.rechtlich h3 { font: inherit; margin-top: 28px; }
.rechtlich h4 { font: inherit; color: var(--grau); margin-top: 18px; }
.rechtlich p, .rechtlich ul { margin-top: 8px; overflow-wrap: anywhere; }
.rechtlich ul { list-style: disc; padding-left: 1.2em; }
.rechtlich a { border-bottom: 1px solid currentColor; }
.rechtlich .stand { color: var(--grau); margin-top: 48px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .raster > *, .rechtlich > * { grid-column: 1 / -1; }
  .kopf { grid-template-columns: auto 1fr; }
  .kopf .s2, .kopf .s3 { display: none; }
  .kopf .kopf-logo { grid-column: 1; grid-row: 1; }
  .kopf nav { grid-column: 2; grid-row: 1; }
  .zeile { grid-template-columns: auto 1fr; column-gap: 10px; }
  .zeile > * { grid-column: auto; }
  .zeile > :only-child { grid-column: 1 / -1; }
  .zeile > :last-child { text-align: right; }
  .arbeiten { grid-template-columns: 1fr 1fr; gap: 36px 12px; }
  .studio, .ueber { row-gap: 16px; }
  .studio > h3, .ueber > h3 { margin-top: 40px; }
  .studio .gr, .ueber .gr { grid-column: span 6; }
  .info .fakt { grid-column: span 6; }
  .info .kontakt { grid-column: 1 / span 6; }
  .fotos { gap: 8px; padding-right: 8px; }
  .fotos img { height: 46svh; }
  .fuss { row-gap: 8px; }
}
@media (max-width: 560px) {
  .kachel .unter { grid-template-columns: 2em 1fr auto; }
  .kachel .art { display: none; }
  .arbeit p { margin-left: calc(2em + 8px); }
  .info .fakt { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .kunden-band { flex-wrap: wrap; mask-image: none; margin: 0; row-gap: 24px; }
  .kunden-logos { flex: 1 1 100%; flex-wrap: wrap; row-gap: 24px; animation: none; }
  .kunden-logos[aria-hidden] { display: none; }
  .foto-band { margin: 0; }
  .fotos { flex: 1 1 100%; flex-wrap: wrap; padding: 0; animation: none; }
  .fotos[aria-hidden] { display: none; }
  .fotos img { height: 220px; }
}