/* ============ AI CONTENT /services/content-production/ai/ — Figma Desktop 858:2 (ganze Seite dunkel, Masonry-Galerie); kein Mobil-Frame,
   Tablet/mobil nach dem Muster der dunklen Creator-Seite. Baut auf bereich.css (Kopf, Text, FAQ), produktfoto.css (Brotkrume, Kontakt .pf-test,
   „Show more“ .pf-l-mehr, Band .pf-mehr, Schließen/Pfeile der Großansicht) und dunkel.css (Farben) auf; hier Galerie, Vollbild und Abstände ============ */

/* Einleitung 123 unter der H1, Lead Creme */
.ai-seite .b-text{padding-top:calc(123 * var(--u))}
.ai-seite .b-text > .b-lead{color:var(--creme)}

/* ---------- Galerie: 120 unter der Einleitung, 5 Spalten à 268 mit 10 Abstand (1380 breit), Kacheln im Format des Bildes, Radius 5;
   „Show more“ 42 unter der längsten Spalte, mittig; Kontakt-Linie 152 darunter ---------- */
.ai-galerie-abschnitt{padding-top:calc(120 * var(--u));padding-bottom:calc(152 * var(--u))}
.ai-galerie{display:flex;align-items:flex-start;gap:calc(10 * var(--u))}
.ai-spalte{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:calc(10 * var(--u))}
.ai-kachel[hidden]{display:none}
.ai-bild{display:block;width:100%;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:var(--tile);cursor:pointer;isolation:isolate}
.ai-bild img{height:auto}
.ai-bild:focus-visible{outline:calc(2 * var(--u)) solid var(--creme);outline-offset:calc(3 * var(--u))}
.ai-seite .pf-l-mehr{color:var(--creme)}

/* ---------- FAQ nach dem Kontakt: Linie über die volle Breite (Kontakt endet 152 darüber), erste Frage 61 darunter;
   am Desktop ersetzt sie die Linie der ersten Zeile. „More services“ 146 unter der letzten Linie ---------- */
.ai-seite .b-faq{padding-top:calc(38 * var(--u));padding-bottom:calc(146 * var(--u));border-top:1px solid rgba(247,244,240,.18)}
@media (min-width:1101px){.ai-seite .s-faq-zeile:first-child{border-top-color:transparent}}

/* ---------- Vollbild (Klick auf ein Bild): dunkles Vollbild, Bild mittig im eigenen Format (bei 900 hoch max. 720 hoch, Platz für die Pfeile),
   × oben rechts, ← / → auf Bildmitte wie die Library-Großansicht, Zähler 24 unter dem Bild; --r (Breite/Höhe) setzt ai-content.js ---------- */
.ai-lb{--lb-h:min(calc(720 * var(--u)),calc(100vh - 180 * var(--u)));--lb-w:calc(100vw - 2 * var(--rand) - 120 * var(--u));position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:var(--dunkel);color:var(--creme);opacity:0;transition:opacity .25s ease;touch-action:pan-y}
.ai-lb[hidden]{display:none}
.ai-lb.offen{opacity:1}
.ai-lb .pf-zu{top:calc(31 * var(--u));right:var(--rand);color:var(--creme)}
.ai-lb .pf-lb-pfeil{color:var(--creme)}
.ai-lb .pf-zu:focus-visible,.ai-lb .pf-lb-pfeil:focus-visible{outline-color:var(--creme)}
.ai-lb-figur{position:relative;margin:0}
.ai-lb-bild{--r:.8;display:block;width:auto;height:min(var(--lb-h),calc(var(--lb-w) / var(--r)));aspect-ratio:var(--r);border-radius:var(--radius);background:var(--tile);user-select:none}
.ai-lb .ai-lb-text{position:absolute;left:0;right:0;top:calc(100% + 24 * var(--u));text-align:center;color:rgba(247,244,240,.5)}

@media (prefers-reduced-motion:reduce){.ai-lb{transition:none}}

/* ---------- Tablet (nicht designt): 4 Spalten; Abstände wie die Service-Seiten ---------- */
@media (max-width:1100px){
  .ai-seite .b-text{padding-top:100px}
  .ai-galerie-abschnitt{padding-top:100px;padding-bottom:100px}
  .ai-seite .b-faq{padding-top:64px;padding-bottom:100px}
  /* ohne JS: Spalten im Fluss (CSS-Spalten), alle Bilder sichtbar */
  html:not(.js) .ai-galerie{display:block;columns:4;column-gap:10px}
  html:not(.js) .ai-spalte{display:contents}
  html:not(.js) .ai-kachel{break-inside:avoid;margin-bottom:10px}
}
html:not(.js) .ai-kachel[hidden]{display:block}
html:not(.js) .ai-galerie-abschnitt .pf-l-mehr{display:none}

/* ---------- Mobil (nicht designt, wie Creator CR-M1): 2 Spalten à 170 mit 10 Abstand, Radius 3; Einleitung 64 unter der H1, Galerie 64 darunter,
   Abschnitte 80 auseinander; Vollbild wie die Library-Großansicht PP-M4 (Bild 140 von oben, Pfeile unten) ---------- */
@media (max-width:760px){
  .ai-seite .b-text{padding-top:64px}
  .ai-galerie-abschnitt{padding-top:64px;padding-bottom:77px}
  .ai-seite .b-faq{padding-top:63px;padding-bottom:80px}
  html:not(.js) .ai-galerie{columns:2}
  .ai-lb{--lb-h:calc(100svh - 276px);--lb-w:calc(100vw - 40px);align-items:flex-start;padding-top:140px}
  .ai-lb .pf-zu{top:32px}
  .ai-lb .ai-lb-text{top:calc(100% + 20px)}
}