/* ==========================================================================
   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); }

/* ---------- 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-intro{ height:230vh; }
  body.page-intro:not(.home) .ai-intro{ height:160vh; }
  .ai-strip{ width:clamp(104px, 30vw, 150px); }
  .ai-row{ width:92vw; gap:8px; }
  .ai-corner{ max-width:18ch; }
  .ai-corner.bl, .ai-corner.br{ bottom:16px; }
  .ai-hero{ width:min(62vw, 300px); }
  .ai-intro{ padding:96px 20px 92px; }
  .ai-menu a{ font-size:clamp(24px, 8vw, 40px); }
}

@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);
}