/* ==========================================================================
   A.I. — eigene Farbwelt: Fast-Schwarz mit Koralle
   ========================================================================== */

body.ai-page{
  --bg:      #0e0e10;
  --bg-soft: #16161a;
  --ink:     #e9e6e2;
  --ink-dim: #8b8783;
  --accent:  #ff6f5e;
  
  --mono:    "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --disp:    "Oswald", "Roboto Condensed", sans-serif;

  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  overflow-x:hidden;
}

body.ai-page ::selection{ background:var(--accent); color:#0e0e10; }

/* ---------- Mikro-Typografie -------------------------------------------- */

.ai-micro{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.55;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin:0;
}
.ai-micro em{ color:var(--accent); font-style:normal; }

/* ---------- Hintergrund: haarfeine Rauten und Kreise -------------------- */

.ai-bg{
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
  will-change:transform, opacity;
}
.ai-bg{ color:var(--accent); }

/* Drei Stufen, die sich über den Scrollweg ablösen */
.ai-bg .stg{
  position:absolute; inset:0;
  opacity:0;
  will-change:opacity;
}

.ai-bg i{
  position:absolute;
  display:block;
  border:1px solid rgba(233,230,226,.13);
  border-color:color-mix(in srgb, var(--accent) 18%, transparent);
  will-change:transform, opacity;
}
.ai-bg i.d{ animation:aiBreathe 22s ease-in-out infinite; }
.ai-bg i.c{
  border-radius:50%;
  border-style:dashed;
  border-color:rgba(233,230,226,.10);
  animation:aiDrift 30s ease-in-out infinite;
}
.ai-bg i.dot{
  width:3px; height:3px;
  border:0; border-radius:50%;
  background:var(--accent);
  opacity:.5;
  animation:aiPulse 4.5s ease-in-out infinite;
}

/* Stufe zwei: lange Haarlinien, die langsam wandern */
.ai-bg i.vln{
  width:1px; top:-10%; height:120%;
  border:0;
  background:linear-gradient(180deg, transparent,
             color-mix(in srgb, var(--accent) 26%, transparent) 35%,
             color-mix(in srgb, var(--accent) 26%, transparent) 65%, transparent);
  animation:aiSlide 26s linear infinite;
}
.ai-bg i.hln{
  height:1px; left:-10%; width:120%;
  border:0;
  background:linear-gradient(90deg, transparent,
             rgba(233,230,226,.16) 40%, rgba(233,230,226,.16) 60%, transparent);
  animation:aiScan 34s ease-in-out infinite alternate;
}

/* Stufe drei: konzentrische Ringe, ganz langsam */
.ai-bg i.rng{
  border-radius:50%;
  border-color:color-mix(in srgb, var(--accent) 13%, transparent);
  animation:aiRing 44s linear infinite;
}

@keyframes aiBreathe{
  0%,100%{ transform:rotate(45deg) scale(1);    opacity:.55; }
  50%    { transform:rotate(45deg) scale(1.07); opacity:1; }
}
@keyframes aiSlide{
  0%   { transform:translateY(-14%); opacity:.35; }
  50%  { transform:translateY(14%);  opacity:.9; }
  100% { transform:translateY(-14%); opacity:.35; }
}
@keyframes aiScan{
  0%   { transform:translateX(-6%) scaleX(.9); opacity:.25; }
  100% { transform:translateX(6%)  scaleX(1);  opacity:.8; }
}
@keyframes aiRing{
  0%   { transform:rotate(0deg)   scale(.94); opacity:.4; }
  50%  { transform:rotate(180deg) scale(1.06); opacity:.95; }
  100% { transform:rotate(360deg) scale(.94); opacity:.4; }
}

@keyframes aiBreathe{
  0%,100%{ transform:rotate(45deg) scale(1);    opacity:.55; }
  50%    { transform:rotate(45deg) scale(1.07); opacity:1; }
}
@keyframes aiDrift{
  0%,100%{ transform:scale(1)    rotate(0deg);   opacity:.5; }
  50%    { transform:scale(1.05) rotate(180deg); opacity:.9; }
}
@keyframes aiPulse{
  0%,100%{ transform:scale(1);   opacity:.25; }
  50%    { transform:scale(1.9); opacity:.75; }
}

/* Nachthimmel: sehr dunkle Verläufe, die sich beim Scrollen verschieben */
.ai-sky{
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(130% 70% at 50% 108%, var(--sky-glow, transparent), transparent 62%),
    linear-gradient(180deg, var(--sky-1, #0b0b0e), var(--sky-2, #0e0e12) 58%, var(--sky-3, #101015));
}

/* Feiner Schimmer in der Schmuckfarbe über allem */
.ai-veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(90,190,200,.05), transparent 60%);
}

/* ---------- Durchsichtiger Header --------------------------------------- */

body.ai-page .site-header{
  background:none;
  padding:20px clamp(20px,4vw,64px) 16px;
  align-items:flex-start;
}
body.ai-page .logo{ text-decoration:none; }
body.ai-page .logo-type{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(21px, 2.1vw, 32px);
  line-height:1;
  letter-spacing:.03em;
  text-transform:lowercase;
  color:var(--ink);
  text-shadow:none;
}
body.ai-page .logo-sub{
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(9px, .78vw, 11px);
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--accent);
  margin-top:.62em;
}
body.ai-page .logo:hover .logo-sub{ color:var(--ink-dim); }

body.ai-page .site-nav{ gap:2px 22px; padding-top:5px; }
body.ai-page .site-nav a{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .2s ease;
}
body.ai-page .site-nav a:hover{ color:var(--ink); opacity:1; }
body.ai-page .site-nav a[aria-current="page"]{ color:var(--accent); }

body.ai-page .nav-toggle span{ background:var(--ink); height:1px; }
body.ai-page .nav-toggle[aria-expanded="true"] span{ background:var(--accent); }

/* Auf Seiten mit Intro kommt der Header erst danach */
body.ai-page.page-intro .site-header{
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
body.ai-page.page-intro .site-header:not(.is-visible) > *{ pointer-events:none; }
body.ai-page.page-intro .site-header.is-visible{ opacity:1; transform:none; }

/* ---------- Mini-Navigation als Pille (nicht mehr benutzt) -------------- */

.ai-pill{
  position:fixed; top:18px; left:50%;
  transform:translateX(-50%);
  z-index:60;
  display:flex; align-items:center; gap:2px;
  background:rgba(14,14,16,.82);
  backdrop-filter:blur(9px);
  border:1px solid rgba(233,230,226,.14);
  border-radius:3px;
  padding:7px 8px 7px 12px;
}
.ai-pill-mark{
  display:block; width:26px; height:26px;
  color:var(--accent);
}
.ai-pill-mark svg, .ai-pill-mark img{ width:100%; height:auto; overflow:visible; }

.ai-burger{
  width:34px; height:26px;
  background:none; border:0; padding:6px 5px;
  cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
}
.ai-burger span{
  display:block; height:1px; width:100%;
  background:var(--ink);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .18s;
}
.ai-burger[aria-expanded="true"] span{ background:var(--accent); }
.ai-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.ai-burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.ai-menu{
  position:fixed; inset:0; z-index:55;
  background:rgba(14,14,16,.97);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.ai-menu.is-open{ opacity:1; visibility:visible; }
.ai-menu a{
  font-family:var(--disp);
  font-size:clamp(26px, 4.4vw, 52px);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  transition:color .2s, letter-spacing .3s;
}
.ai-menu a:hover{ color:var(--accent); letter-spacing:.11em; }
.ai-menu a[aria-current="page"]{ color:var(--accent); }

/* ---------- Intro -------------------------------------------------------- */

/* Der Einstieg ist höher als das Fenster. Der Inhalt bleibt stehen,
   während darunter weitergescrollt wird. */
.ai-intro{
  position:relative; z-index:2;
  height:270vh;
}
/* Alle Rubrikseiten außer der Startseite: halb so lang, also doppelt so
   schnell durch. Zum Zurückdrehen einfach diesen Block löschen. */
body.page-intro:not(.home) .ai-intro{ height:180vh; }
.ai-pin{
  position:sticky; top:0;
  height:100svh;
  display:grid; place-items:center;
  padding:112px clamp(20px,4vw,64px) 96px;
  overflow:hidden;
}
.ai-corner{
  position:absolute;
  max-width:24ch;
}
.ai-corner.two{ opacity:0; }

/* Bildspalte, die von unten durchs Bild wandert */
.ai-strip{
  position:absolute; top:0; left:50%;
  z-index:1;
  width:clamp(124px, 14vw, 208px);
  display:flex; flex-direction:column;
  gap:clamp(10px,1.4vw,20px);
  transform:translate(-50%, 100vh);
  will-change:transform;
  pointer-events:none;
}
/* Bildwolke: löst sich vom Startbild und fliegt nach oben davon.
   Vor dem Scrollen ist nichts davon zu sehen. */
.ai-cloud{
  position:absolute; top:50%; left:50%;
  z-index:1;
  width:0; height:0;
  pointer-events:none;
}
.ai-cloud figure{
  position:absolute; top:0; left:0;
  margin:0;
  width:120px; height:160px;   /* wird je Kachel aus dem Bildformat gerechnet */
  overflow:hidden;
  background:var(--bg-soft);
  opacity:0;
  will-change:transform, opacity, filter;
  transform:translate(-50%,-50%) scale(.4);
  /* --flake-blur setzt theme/ai.js beim Auftauchen aus der Unschärfe.
     Die Farbbehandlung steht weiter unten je Verfahren und bleibt erhalten. */
  filter:blur(var(--flake-blur, 0px));
}
/* Die Kachel hat das Format des Bildes, deshalb wird nichts beschnitten */
.ai-cloud img{
  width:100%; height:100%;
  object-fit:contain;
}

.ai-cloud figure::before,
.ai-cloud figure::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}

/* Einmal durchgescrollt, dann weg. Das !important muss sein, weil die
   Höhe weiter oben je nach Seite unterschiedlich gesetzt wird. */
.ai-intro.ist-durch{
  height:0 !important; min-height:0 !important;
  overflow:hidden; visibility:hidden; pointer-events:none;
}

/* ---- Verfahren 1: Einfärben ------------------------------------------
   Legt den Farbton der Rubrik über das Bild, Helligkeiten bleiben.
   Kräftig, aber bei manchen Farben unruhig auf Hauttönen. */
body[data-tint="farbe"] .ai-cloud img{ filter:grayscale(.42) contrast(1.05); }
body[data-tint="farbe"] .ai-cloud figure::after{
  background:var(--accent); opacity:var(--tint, .45); mix-blend-mode:color;
}

/* ---- Verfahren 2: Duplex ---------------------------------------------
   Schwarzweiß als Grundlage, Tiefen tief ins Schwarze, Lichter kräftig
   in die Rubrikfarbe. Wie eine Duplex-Platte im Druck. Zum Schluss wird
   das fertige Ergebnis noch einmal in der Sättigung angezogen — sonst
   wird aus dem Duplex ein blasser Pastellton. */
body[data-tint="duplex"] .ai-cloud figure,
body[data-tint="tv"] .ai-cloud figure{
  filter:saturate(var(--pop, 1.3)) contrast(1.04) blur(var(--flake-blur, 0px));
}
body[data-tint="duplex"] .ai-cloud img,
body[data-tint="tv"] .ai-cloud img{ filter:grayscale(1) contrast(1.2) brightness(1.02); }
/* Tiefen leicht anheben, damit es nicht monoton wird */
body[data-tint="duplex"] .ai-cloud figure::before,
body[data-tint="tv"] .ai-cloud figure::before{
  background:#12203a; opacity:.2; mix-blend-mode:screen;
}
/* multiply bildet die Grauwerte auf die Rubrikfarbe ab: Weiß wird zur
   vollen Farbe, Schwarz bleibt Schwarz. Die Zeichnung bleibt erhalten. */
body[data-tint="duplex"] .ai-cloud figure::after,
body[data-tint="tv"] .ai-cloud figure::after{
  background:var(--accent); opacity:.92; mix-blend-mode:multiply;
}

/* ---- Das Titelbild verwandelt sich beim Scrollen ---------------------
   --tone geht von 0 (volles Farbfoto) auf 1 (Duplex wie die Kacheln).
   Den Wert setzt theme/ai.js aus der Scrollstellung. */
body[data-tint="duplex"] .ai-hero,
body[data-tint="tv"] .ai-hero{
  position:relative;
  filter:saturate(calc(1 + (var(--pop, 1.3) - 1) * var(--tone, 0)))
         contrast(calc(1 + 0.04 * var(--tone, 0)));
}
body[data-tint="duplex"] .ai-hero img,
body[data-tint="tv"] .ai-hero img{
  filter:grayscale(var(--tone, 0))
         contrast(calc(1 + 0.20 * var(--tone, 0)))
         brightness(calc(1 + 0.02 * var(--tone, 0)));
}
body[data-tint="duplex"] .ai-hero::before,
body[data-tint="tv"] .ai-hero::before,
body[data-tint="duplex"] .ai-hero::after,
body[data-tint="tv"] .ai-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
}
body[data-tint="duplex"] .ai-hero::before{
  background:#12203a; opacity:calc(.2 * var(--tone, 0)); mix-blend-mode:screen;
}
body[data-tint="duplex"] .ai-hero::after,
body[data-tint="tv"] .ai-hero::after{
  background:var(--accent); opacity:calc(.92 * var(--tone, 0)); mix-blend-mode:multiply;
}

/* ---- Verfahren 6: Keine Behandlung -----------------------------------
   Volle Farbe, nichts liegt darüber. Für Seiten, auf denen die Fotos
   für sich sprechen sollen. */
body[data-tint="keiner"] .ai-cloud img,
body[data-tint="keiner"] .ai-hero img{ filter:none; }

/* ---- Verfahren 7: Sanft ----------------------------------------------
   Volle Farbe, nur um 30 Prozent entsättigt. Nimmt den Bildern die
   Buntheit, ohne sie umzufärben. Das Titelbild wandert beim Scrollen
   von voller Sättigung dorthin. */
body[data-tint="sanft"] .ai-cloud img{ filter:saturate(.7); }
body[data-tint="sanft"] .ai-hero img{
  filter:saturate(calc(1 - 0.3 * var(--tone, 0)));
}

/* ---- Verfahren 8: Fernseher ------------------------------------------
   Wie Duplex, dazu Zeilenraster und alle paar Sekunden ein kurzes
   Zucken mit Farbversatz — wie ein Bild, das nicht sauber anliegt. */
/* Zeilenraster wie auf einer Bildröhre. Nur die Linien dunkeln ab,
   dazwischen bleibt das Bild unberührt. */
body[data-tint="tv"] .ai-cloud figure::before,
body[data-tint="tv-klar"] .ai-cloud figure::before,
body[data-tint="tv"] .ai-hero::before,
body[data-tint="tv-klar"] .ai-hero::before{
  background-image:repeating-linear-gradient(180deg,
    rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
  background-color:transparent;
  mix-blend-mode:normal;
  opacity:.42;
}
body[data-tint="tv"] .ai-hero::before{ opacity:calc(.42 * var(--tone, 0)); }
/* Ohne Umfärbung gibt es kein --tone, das Raster liegt gleich an. */
body[data-tint="tv-klar"] .ai-hero::before{ opacity:.42; }
body[data-tint="tv-klar"] .ai-cloud img,
body[data-tint="tv-klar"] .ai-hero img{ filter:none; }

/* Das Zucken läuft über Versatz und Helligkeit, nicht über den Filter —
   sonst würde es die Duplex-Umsetzung überschreiben. */
body[data-tint="tv"] .ai-cloud img,
body[data-tint="tv-klar"] .ai-cloud img,
body[data-tint="tv"] .ai-hero img,
body[data-tint="tv-klar"] .ai-hero img{
  animation:tvVersatz 6.5s steps(1, end) infinite,
            tvFlackern 6.5s steps(1, end) infinite;
}
body[data-tint="tv"] .ai-cloud figure:nth-child(2n) img,
body[data-tint="tv-klar"] .ai-cloud figure:nth-child(2n) img{ animation-delay:-1.7s, -1.7s; }
body[data-tint="tv"] .ai-cloud figure:nth-child(3n) img,
body[data-tint="tv-klar"] .ai-cloud figure:nth-child(3n) img{ animation-delay:-3.4s, -3.4s; }
body[data-tint="tv"] .ai-cloud figure:nth-child(5n) img,
body[data-tint="tv-klar"] .ai-cloud figure:nth-child(5n) img{ animation-delay:-4.9s, -4.9s; }
body[data-tint="tv"] .ai-hero img,
body[data-tint="tv-klar"] .ai-hero img{
  animation-duration:8.3s, 8.3s;
  animation-delay:-2.2s, -2.2s;
}

@keyframes tvVersatz{
  0%, 88%   { transform:none; }
  89%       { transform:translate3d(-8px,0,0) scaleX(1.014); }
  90%       { transform:translate3d(7px,-2px,0) scaleX(.99); }
  91%       { transform:translate3d(-3px,1px,0); }
  92%       { transform:translate3d(2px,0,0); }
  93%, 100% { transform:none; }
}
@keyframes tvFlackern{
  0%, 88%   { opacity:1; }
  89%       { opacity:.45; }
  90%       { opacity:1; }
  91%       { opacity:.7; }
  92%, 100% { opacity:1; }
}

/* ---- Verfahren 3: Nur die Tiefen ------------------------------------
   Die Schatten nehmen die Farbe an, die Lichter bleiben sauber.
   Zurückhaltend, dunkelt die Bilder etwas ab. */
body[data-tint="tiefen"] .ai-cloud img{ filter:grayscale(.55) contrast(1.06); }
body[data-tint="tiefen"] .ai-cloud figure::after{
  background:var(--accent); opacity:.5; mix-blend-mode:multiply;
}

/* ---- Verfahren 4: Nur die Lichter -----------------------------------
   Die hellen Stellen glimmen in der Rubrikfarbe, die Tiefen bleiben
   schwarz. Auf dunklem Grund sehr elegant. */
body[data-tint="lichter"] .ai-cloud img{ filter:grayscale(1) contrast(1.12); }
body[data-tint="lichter"] .ai-cloud figure::after{
  background:var(--accent); opacity:.3; mix-blend-mode:screen;
}

/* ---- Verfahren 5: Schwarzweiß ---------------------------------------
   Ganz ohne Farbe. Die Rubrikfarbe lebt nur in Schrift und Linien.
   Am ruhigsten und bei jedem Farbton gleich gut. */
body[data-tint="sw"] .ai-cloud img{ filter:grayscale(1) contrast(1.08) brightness(.97); }
body[data-tint="sw"] .ai-cloud figure::after{
  background:var(--accent); opacity:.1; mix-blend-mode:screen;
}

.ai-strip figure{
  margin:0;
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--bg-soft);
  outline:1px solid rgba(233,230,226,.07);
  outline-offset:-1px;
}
.ai-strip img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.05);
  opacity:.88;
}
.ai-corner.tl{ top:24px;    left:clamp(20px,4vw,64px); }
.ai-corner.tr{ top:24px;    right:clamp(20px,4vw,64px); text-align:right; }
.ai-corner.bl{ bottom:24px; left:clamp(20px,4vw,64px); }
.ai-corner.br{ bottom:24px; right:clamp(20px,4vw,64px); text-align:right; }

.ai-stage{
  position:relative;
  display:grid; place-items:center;
  width:100%;
  z-index:2;
  will-change:transform;
}
.ai-hero{
  width:clamp(220px, 27vw, 420px);
  aspect-ratio:3 / 4;
  overflow:hidden;
  background:var(--bg-soft);
}
.ai-hero img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.3s ease;
  filter:saturate(1.05) contrast(1.03);
}
.ai-hero img.is-loaded{ opacity:1; }

.ai-title{
  position:absolute;
  z-index:0;
  margin:0;
  will-change:transform, opacity;
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(38px, 8.2vw, 128px);
  line-height:.9;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  color:#fff;
  mix-blend-mode:difference;
  white-space:nowrap;
  pointer-events:none;
}
.ai-title span{
  display:block;
  opacity:0;
  animation:aiRise 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}
.ai-title span:nth-child(1){ animation-delay:.3s; }
.ai-title span:nth-child(2){ animation-delay:.45s; letter-spacing:.02em; }
@keyframes aiRise{
  from{ opacity:0; transform:translateY(.3em); }
  to  { opacity:1; transform:none; }
}

/* ---------- Werkteil ---------------------------------------------------- */

.ai-works{
  --card:clamp(240px, 31vw, 520px);
  position:relative; z-index:2;
  padding:0 clamp(20px,4vw,64px) 40px;
}

/* Mehrere Arbeiten nebeneinander, gleich hoch */
.ai-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(10px, 1.5vw, 26px);
  width:min(88vw, 1180px, calc(var(--card) * var(--n, 2) * 0.95));
  margin:0 auto clamp(78px, 9.5vw, 170px);
}
.ai-row .ai-work{
  width:auto;
  margin:0;
  flex:var(--ar) 1 0;
  min-width:0;
}
.ai-works-head{
  display:flex; justify-content:space-between;
  gap:20px;
  padding-bottom:clamp(60px,9vw,150px);
}

.ai-work{
  position:relative;
  margin:0 auto clamp(78px, 9.5vw, 170px);
  width:min(var(--w, var(--card)), 88vw);
}
.ai-work-cap{
  display:flex; justify-content:space-between; gap:14px;
  padding-bottom:9px;
}
.ai-work-cap .no{ color:var(--accent); }
.ai-frame{
  position:relative;
  display:block;
  aspect-ratio:var(--ar);
  overflow:hidden;
  background:var(--bg-soft);
  cursor:pointer;
}
.ai-frame img, .ai-frame video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
.ai-frame img.is-loaded, .ai-frame video.is-loaded{ opacity:1; }
.ai-frame:hover img, .ai-frame:hover video{ transform:scale(1.03); }

/* kleines Quadrat in der Mitte, wie in der Vorlage */
.ai-mark{
  position:absolute; top:50%; left:50%;
  width:12px; height:12px;
  margin:-6px 0 0 -6px;
  border:1px solid rgba(255,255,255,.85);
  opacity:0;
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.3,1);
  transform:scale(.6) rotate(0deg);
  pointer-events:none;
}
.ai-frame:hover .ai-mark{ opacity:1; transform:scale(1) rotate(45deg); }

.ai-work-foot{
  display:flex; justify-content:space-between; gap:14px;
  padding-top:9px;
}
.ai-badge{
  position:absolute; top:9px; left:9px;
  z-index:2;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
  background:rgba(14,14,16,.6);
  padding:3px 6px;
  pointer-events:none;
}

/* ---------- Portfolio-Raster in der dunklen Hülle ----------------------- */

body.ai-page .ai-works > .masonry{
  gap:clamp(44px, 5.5vw, 96px) clamp(12px, 1.8vw, 26px);
  margin:0 auto;
  max-width:1720px;
}
body.ai-page .mshot{
  background:var(--bg-soft);
  outline:1px solid rgba(233,230,226,.06);
  outline-offset:-1px;
}
body.ai-page .mshot img{
  transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
body.ai-page .mshot:hover img{ transform:scale(1.02); }

/* Filme im Raster */
.mshot.mfilm{ position:relative; }
.mshot.mfilm video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .8s ease;
}
.mshot.mfilm video.is-loaded{ opacity:1; }
.mshot.mfilm .ai-badge{ top:10px; left:10px; }

/* ---------- Strecken-Galerie (Cars, People) in der dunklen Hülle -------- */

body.ai-page main{
  max-width:1180px;
  padding:clamp(30px,5vw,70px) clamp(20px,4vw,64px) 140px;
}
body.ai-page .series{ scroll-margin-top:120px; }
body.ai-page .series-label h2{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent);
  text-shadow:none;
}
body.ai-page .series-note{ color:var(--ink-dim); font-family:var(--mono); font-size:10px; }
body.ai-page .shot{
  background:var(--bg-soft);
  outline:1px solid rgba(233,230,226,.06);
  outline-offset:-1px;
}
body.ai-page .shot-tag{
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.16em;
  color:var(--accent);
  background:rgba(14,14,16,.6);
}

/* Filigranes „See more" */
body.ai-page .show-all{
  color:var(--accent);
  gap:9px;
  height:calc(var(--row) * .9);
  width:calc(var(--row) * .9);
}
body.ai-page .sa-disc{
  width:calc(var(--row) * .32);
  height:calc(var(--row) * .32);
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
body.ai-page .sa-disc::after{ border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
body.ai-page .sa-label{
  font-family:var(--mono);
  font-weight:400;
  font-size:10px;
  letter-spacing:.17em;
  text-shadow:none;
  color:var(--ink-dim);
}
body.ai-page .show-all:hover .sa-label{ color:var(--accent); }
body.ai-page .show-all:hover .sa-disc{ box-shadow:none; transform:scale(1.05); }

body.ai-page .site-footer{
  border-top:1px solid rgba(233,230,226,.12);
  margin:0 clamp(20px,4vw,64px);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
body.ai-page .site-footer a:hover{ color:var(--accent); }

/* Bilder unter dem Text einer Seite */
.page-media{ padding-top:clamp(30px,5vw,70px); }
.page-media .masonry{ max-width:1720px; margin:0 auto; }

/* ---------- Textseiten (About, Contact) --------------------------------- */

body.ai-page .page{ max-width:64ch; }
body.ai-page .page h1{
  font-family:var(--disp);
  font-weight:400;
  letter-spacing:.05em;
  color:var(--ink);
}
body.ai-page .page h2{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--accent);
  margin:44px 0 10px;
}
body.ai-page .page p,
body.ai-page .page li{
  font-family:var(--mono);
  font-size:13px;
  line-height:2;
  color:var(--ink-dim);
  letter-spacing:.02em;
}
body.ai-page .page a{ color:var(--accent); }
body.ai-page .page code{ color:var(--ink); }

/* Verbandszeichen im Fließtext: Marke links, Hinweis daneben.
   Die Bilddatei bringt ihre Schutzzone als Rand schon mit — rund ein
   Siebtel der Breite auf jeder Seite. Deshalb kein eigener Abstand
   daneben, und links zieht ein negativer Rand die Marke wieder auf die
   Textkante zurück. Sonst stünde der Absatz sichtbar eingerückt. */
body.ai-page .page p.bff{
  display:flex;
  align-items:center;
  gap:0;
  margin:4px 0 0;
  font-size:10.5px;
  line-height:1.75;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
body.ai-page .page p.bff a{ display:block; flex:0 0 auto; line-height:0; }
body.ai-page .page p.bff img{
  display:block;
  width:140px;
  height:auto;
  margin-left:-21px;
  opacity:.8;
  transition:opacity .35s ease;
}
body.ai-page .page p.bff a:hover img{ opacity:1; }
/* Schmale Bildschirme: nebeneinander wird der Hinweis vierzeilig,
   deshalb Marke oben, Text darunter. */
@media (max-width:560px){
  body.ai-page .page p.bff{
    display:block;
    margin:10px 0 0;
    font-size:9.5px;
    letter-spacing:.07em;
  }
  body.ai-page .page p.bff img{ width:118px; margin:0 0 4px -18px; }
  body.ai-page .page p.bff span br{ display:none; }
}

/* ---------- Motion: Filme ----------------------------------------------- */

.mo-list{ --card:clamp(280px, 62vw, 1080px); }

.mo-film{
  position:relative;
  width:min(var(--card), 92vw);
  margin:0 auto clamp(64px, 8vw, 140px);
}
.mo-cap{
  display:flex; justify-content:space-between; gap:14px;
  padding-bottom:10px;
}
.mo-cap .no{ color:var(--accent); }

.mo-frame{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  padding:0;
  overflow:hidden;
  border:0;
  cursor:pointer;
  background:var(--bg-soft);
  outline:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset:-1px;
  transition:outline-color .35s ease;
}
.mo-frame:hover,
.mo-frame:focus-visible{ outline-color:var(--accent); }

.mo-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.55) contrast(1.06) brightness(.7);
  transform:scale(1.02);
  transition:filter .55s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.mo-frame:hover img,
.mo-frame:focus-visible img{
  filter:grayscale(0) contrast(1.02) brightness(.86);
  transform:scale(1.06);
}

/* Wenn kein Standbild da ist */
.mo-blank{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 38px,
      color-mix(in srgb, var(--accent) 9%, transparent) 38px 39px),
    linear-gradient(140deg, #17171c, #0d0d11);
}

/* Laufende Abtastlinie */
.mo-scan{
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 75%, transparent), transparent);
  opacity:0;
  animation:moScan 3.4s linear infinite;
}
.mo-frame:hover .mo-scan{ opacity:.9; }
@keyframes moScan{
  0%   { top:-2%; }
  100% { top:102%; }
}

/* Abspielmarke */
.mo-play{
  position:absolute; top:50%; left:50%;
  width:clamp(54px, 7vw, 92px); height:clamp(54px, 7vw, 92px);
  margin:calc(clamp(54px, 7vw, 92px) / -2) 0 0 calc(clamp(54px, 7vw, 92px) / -2);
  color:var(--accent);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.mo-play svg{ width:100%; height:100%; overflow:visible; }
.mo-play .ring{
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-dasharray:289; stroke-dashoffset:289;
  transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1);
  opacity:.9;
}
.mo-play .tri{
  fill:currentColor;
  transform-box:fill-box; transform-origin:50% 50%;
  transform:scale(.82);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent));
}
.mo-frame:hover .mo-play,
.mo-frame:focus-visible .mo-play{ transform:scale(1.08); }
.mo-frame:hover .mo-play .ring,
.mo-frame:focus-visible .mo-play .ring{ stroke-dashoffset:0; }
.mo-frame:hover .mo-play .tri,
.mo-frame:focus-visible .mo-play .tri{ transform:scale(1); }

.mo-title{
  position:absolute; left:clamp(14px,2vw,26px); bottom:clamp(12px,1.8vw,22px);
  right:clamp(14px,2vw,26px);
  text-align:left;
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(19px, 3.2vw, 44px);
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.6);
  transition:color .35s ease, transform .5s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.mo-frame:hover .mo-title,
.mo-frame:focus-visible .mo-title{ color:var(--accent); transform:translateY(-3px); }

.mo-host{
  position:absolute; top:clamp(10px,1.4vw,16px); right:clamp(12px,1.6vw,20px);
  font-size:9px; letter-spacing:.2em;
  color:var(--accent);
  opacity:.75;
  pointer-events:none;
}

/* Nach dem Klick läuft der Film im Rahmen */
.mo-frame.is-playing{ cursor:default; outline-color:var(--accent); }
.mo-frame.is-playing > *:not(iframe){ opacity:0; transition:opacity .3s ease; }
.mo-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  opacity:0;
  animation:moIn .5s ease forwards;
}
@keyframes moIn{ to{ opacity:1; } }

@media (max-width:900px){
  .mo-list{ --card:92vw; }
  .mo-title{ font-size:clamp(16px, 5.6vw, 30px); }
}

@media (prefers-reduced-motion:reduce){
  .mo-scan{ display:none; }
}

/* ---------- Schluss ----------------------------------------------------- */

.ai-foot{
  position:relative; z-index:2;
  border-top:1px solid rgba(233,230,226,.12);
  margin:0 clamp(20px,4vw,64px);
  padding:26px 0 52px;
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.ai-foot a{ color:var(--ink-dim); text-decoration:none; }
.ai-foot a:hover{ color:var(--accent); }

/* ---------- Lightbox auf dieser Seite ----------------------------------- */

body.ai-page .lightbox{ background:#07070a; }
body.ai-page .lb-caption, body.ai-page .lb-count{
  font-family:var(--mono); letter-spacing:.14em; font-size:11px;
}
body.ai-page .lb-count{ color:var(--accent); opacity:.85; }

/* ---------- Mobil ------------------------------------------------------- */

@media (max-width:900px){
  .ai-works{ --card:clamp(200px, 76vw, 460px); }
  .ai-row{ width:92vw; gap:8px; }
  .ai-corner{ max-width:18ch; }
  .ai-corner.bl, .ai-corner.br{ bottom:16px; }
  .ai-intro{ padding:96px 20px 92px; }
  .ai-menu a{ font-size:clamp(24px, 8vw, 40px); }

  /* Das Titelbild füllt hier fast die Breite. Über hellen Fotos braucht
     die Schrift etwas Halt. */
  .ai-title{ text-shadow:0 2px 22px rgba(8,8,10,.6), 0 0 4px rgba(8,8,10,.4); }

  /* ---- Intro auf dem Handy: nur Titelbild und Text -------------------
     Die Wolke aus sieben Kacheln braucht Breite. Auf einem Telefon
     bleiben davon Briefmarken übrig, die niemand erkennt — also weg
     damit. Ohne sie darf das Intro auch deutlich kürzer sein. */
  .ai-cloud, .ai-strip{ display:none; }
  .ai-intro{ height:145vh; }
  body.page-intro:not(.home) .ai-intro{ height:120vh; }
  .ai-hero{ width:min(78vw, 420px); }

  /* ---- Menü: groß genug, um es mit dem Daumen zu treffen -------------
     Elf Pixel Schrift sind am Schreibtisch richtig und am Telefon
     unbenutzbar. Jeder Eintrag bekommt hier seine eigene Fläche. */
  body.ai-page .site-nav{
    gap:2px;
    padding-top:0;
    justify-content:center;
  }
  body.ai-page .site-nav a{
    font-family:var(--disp);
    font-size:clamp(26px, 8.5vw, 40px);
    letter-spacing:.05em;
    line-height:1.1;
    color:var(--ink);
    display:flex; align-items:center;
    width:100%;
    min-height:54px;
    padding:6px 4px;
  }
  body.ai-page .site-nav a[aria-current="page"]{ color:var(--accent); }
}

@media (prefers-reduced-motion:reduce){
  .ai-bg i{ animation:none !important; }
  .ai-title span{ animation:none; opacity:1; }
}


/* ---- Sprachumschalter über dem Text -----------------------------------
   Sitzt über dem Textblock und übernimmt dessen Randmaße, damit er
   bündig mit der Überschrift steht. */
.sprachwahl{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(30px,5vw,70px) clamp(20px,4vw,64px) 0;
  display:flex; gap:10px; align-items:center;
  font:400 10px/1 "Geist Mono","SFMono-Regular",Menlo,monospace;
  letter-spacing:.18em;
}
.sprachwahl span{ color:var(--accent); }
.sprachwahl a{
  color:#8b8783; text-decoration:none;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.sprachwahl a:hover{ color:#e9e6e2; border-bottom-color:currentColor; }
.sprachwahl span::after{ content:""; }
.sprachwahl > *:not(:last-child)::after{
  content:" ·"; color:#4a4844; margin-left:10px;
}

/* Der Umschalter bringt schon Luft mit, der Text darunter braucht weniger. */
body.ai-page .sprachwahl + main{ padding-top:18px; }

/* Hinweis auf eine Gefälligkeitsübersetzung */
body.ai-page .page p.rechtshinweis{
  border-left:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding:8px 0 8px 14px;
  color:var(--ink-dim);
  font-size:.88em;
}

/* Auf Seiten ohne Intro steht der Kopf von Anfang an da — der Umschalter
   braucht dann Luft nach oben, sonst liegt er unter der Wortmarke. */
body.ai-page:not(.page-intro) .sprachwahl{
  padding-top:clamp(96px,10vw,132px);
}

/* ---- Hinweis, dass es nach unten weitergeht ---------------------------
   Im Nutzertest hat jemand das Titelbild angeklickt, statt zu scrollen.
   Eine dünne Linie mit einem Lichtpunkt, der nach unten läuft, sagt das
   ohne Worte. Sie verschwindet, sobald gescrollt wird. */
.ai-runter{
  position:absolute; left:50%; bottom:clamp(26px, 5vh, 62px);
  transform:translateX(-50%);
  width:1px; height:clamp(42px, 7vh, 74px);
  background:linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--accent) 28%, transparent));
  overflow:hidden;
  z-index:4;
  pointer-events:none;
}
.ai-runter span{
  position:absolute; left:0; top:0;
  display:block; width:1px; height:38%;
  background:linear-gradient(to bottom, transparent, var(--accent));
  animation:aiRunter 2.3s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes aiRunter{
  0%   { transform:translateY(-110%); opacity:0; }
  22%  { opacity:1; }
  78%  { opacity:1; }
  100% { transform:translateY(270%); opacity:0; }
}

/* Auf dem Handy sitzt sie etwas höher, sonst liegt sie in den Ecktexten */
@media (max-width:900px){
  .ai-runter{ bottom:clamp(52px, 9vh, 88px); height:clamp(34px, 6vh, 54px); }
}

@media (prefers-reduced-motion:reduce){
  .ai-runter span{ animation:none; top:auto; bottom:0; height:100%; opacity:.5; }
}