/* ============ CREATOR /services/content-production/creator/ — Figma D-2 (1511:144, ganze Seite dunkel), mobil CR-M1 (1517:2) + CR-M2 (1521:9).
   Board: Kopfzeile 121 unter der H1 (Label in der Kerbe, Sortierung ab x 200, A–Z rechtsbündig), Linie 40 darunter, Raster 23 unter der Linie ============ */
.cr-board{padding-top:calc(121 * var(--u))}
.cr-kopf{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr) auto;align-items:start}
.cr-filter{display:flex;gap:calc(37 * var(--u))}
.dunkel .cr-f{position:relative;padding:0;border:0;background:none;color:rgba(247,244,240,.5);cursor:pointer;transition:color .2s ease}
.dunkel .cr-f:hover,.dunkel .cr-f[aria-pressed="true"]{color:var(--creme)}
.cr-f[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;top:calc(20 * var(--u));height:2px;background:currentColor}
/* A–Z = Filter: aktiver Buchstabe Creme, die anderen 50 %; ohne JS ausgeblendet (dann stehen alle Creator da) */
.cr-az{display:flex;gap:calc(14 * var(--u))}
.dunkel .cr-az button{padding:0;border:0;background:none;color:rgba(247,244,240,.5);cursor:pointer;transition:color .2s ease}
.dunkel .cr-az button:hover,.dunkel .cr-az button[aria-pressed="true"]{color:var(--creme)}
html:not(.js) .cr-az{display:none}

/* Raster 4 Spalten (330 breit, 20 Abstand), Kachel 3:4, Name links / Stadt rechts 17 darunter, nächste Reihe 49 darunter */
.cr-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:calc(20 * var(--u));row-gap:calc(49 * var(--u));margin-top:calc(40 * var(--u));padding-top:calc(23 * var(--u));border-top:1px solid rgba(247,244,240,.18);list-style:none}
/* mit JS zuerst 12 Creator; „Show all“ zeigt alle (ohne JS stehen alle da) */
.js .cr-raster:not(.alle):not(.gefiltert) .cr-kachel:nth-child(n+13){display:none}
/* Buchstabe gewählt: nur Treffer, alle auf einmal */
.cr-raster.gefiltert .cr-kachel:not(.treffer){display:none}
.cr-kachel a{display:block}
.cr-bild{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;isolation:isolate;background:var(--tile)}
.cr-meta{display:flex;justify-content:space-between;gap:calc(12 * var(--u));margin-top:calc(17 * var(--u))}
.dunkel .cr-meta .cr-name{color:var(--creme)}
.dunkel .cr-meta .cr-stadt{color:rgba(247,244,240,.5);text-align:right}
.cr-kachel a:focus-visible{outline:2px solid var(--creme);outline-offset:4px;border-radius:2px}

/* Maße mit Trennpunkten (Profil-Leiste und Hover-Karte) */
.cr-masse{display:flex;flex-wrap:wrap}
.cr-masse > span{white-space:nowrap}
.cr-masse > span:not(:last-child)::after{content:"·";margin:0 .55em}

/* Hover-Karte (nur Maus): 12 vom Bildrand, Creme, Radius 4, Maße Inter 14/20, „View profile →“ Archivo 16/22 */
.cr-hover{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));bottom:calc(12 * var(--u));z-index:1;padding:calc(14 * var(--u)) calc(16 * var(--u));border-radius:4px;background:var(--creme);color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.cr-hover-masse{font-family:var(--font-b);font-weight:400;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));letter-spacing:-.01em}
.cr-hover-link{display:block;margin-top:calc(6 * var(--u));font-family:var(--font-h);font-weight:500;font-size:calc(16 * var(--u));line-height:calc(22 * var(--u));letter-spacing:-.01em}
@media (hover:hover) and (pointer:fine){
  .cr-kachel a:hover .cr-hover,.cr-kachel a:focus-visible .cr-hover{opacity:1;transform:none}
}
@media (hover:none),(pointer:coarse){.cr-hover{display:none}}

/* „Show all 94 creators →“: Archivo 22/26, 57 unter der letzten Reihe, Linie 2 px 33 unter der Oberkante (Box endet mit der Linie) */
.cr-alle{position:relative;display:inline-flex;margin-top:calc(57 * var(--u));padding:0 0 calc(9 * var(--u));border:0;background:none;color:var(--creme);font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile);cursor:pointer}
.cr-alle::after{content:"";position:absolute;left:0;right:0;top:calc(33 * var(--u));height:2px;background:currentColor}
html:not(.js) .cr-alle,.cr-raster.alle + .cr-alle,.cr-raster.gefiltert + .cr-alle{display:none}

/* FAQ → Kontakt-Linie 140 (wie Leistungsseiten) */
.cr-seite .b-faq{padding-bottom:calc(139 * var(--u))}

/* ---------- Profil-Pop-up (Desktop, Viewport 1440 × 900): Label + Close oben (33), Galerie ab 76 bis 20 über der Leiste, Leiste 90 hoch;
   alles in --u, damit die Leiste bei jeder Fensterbreite wie Figma steht ---------- */
html.cr-gesperrt,html.cr-gesperrt body{overflow:hidden}
.cr-pop{position:fixed;inset:0;z-index:90;background:var(--dunkel);color:var(--creme)}
.cr-pop[hidden]{display:none}
.cr-p-label{position:absolute;left:var(--rand);top:calc(33 * var(--u));color:rgba(247,244,240,.55)}
.dunkel .cr-p-label{color:rgba(247,244,240,.55)}
.cr-p-zu{position:absolute;right:var(--rand);top:calc(33 * var(--u));z-index:2}
.dunkel .cr-p-zu{color:var(--creme)}
/* Bühne für das Zieh-Karussell (/ziehkarussell.js wie der Slider der Pop-up-Seite): Galerie ab 76 bis 20 über der Leiste */
.cr-p-buehne{position:absolute;left:0;right:0;top:calc(76 * var(--u));height:calc(100vh - 186 * var(--u));min-height:320px}
.cr-p-galerie{display:flex;gap:calc(20 * var(--u));height:100%;padding:0 var(--rand);overflow-x:auto;overflow-y:hidden;scroll-padding:0 var(--rand);scrollbar-width:none;overscroll-behavior-x:contain}
/* Touch wischt nativ mit Einrasten; mit der Maus zieht das Modul (Gleiten mit Nachlauf, ohne Einrasten) */
@media (pointer:coarse){.cr-p-galerie{scroll-snap-type:x mandatory}}
.cr-p-galerie::-webkit-scrollbar{display:none}
.cr-p-buehne.zieht{user-select:none}
/* „Drag“-Kreis nur ab 761 px (Artur 14.10.: auf Mobil kein Drag-Button, Maus behält ihren Zeiger) */
@media (min-width:761px){.cr-p-buehne.mit-cursor,.cr-p-buehne.mit-cursor *{cursor:none}}
/* „Drag“-Kreis wie auf der Pop-up-Seite: Creme 96, beim Ziehen 64 mit Pfeilen statt Wort */
.cr-p-cursor{position:absolute;left:0;top:0;z-index:2;display:none;pointer-events:none;will-change:transform;opacity:0;transition:opacity .2s ease}
@media (min-width:761px){.cr-p-buehne.mit-cursor .cr-p-cursor{display:block}}
/* nur sichtbar, solange die Maus über den Bildern ist (ziehkarussell.js: „kreis-an“), mit kurzem Aufploppen */
.cr-p-buehne.kreis-an .cr-p-cursor{opacity:1}
.cr-p-kreis{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:calc(96 * var(--u));height:calc(96 * var(--u));border-radius:50%;background:var(--creme);transform:translate(-50%,-50%);scale:.6;transition:width .25s cubic-bezier(.28,0,.49,1),height .25s cubic-bezier(.28,0,.49,1),scale .25s cubic-bezier(.28,0,.49,1)}
.cr-p-buehne.kreis-an .cr-p-kreis{scale:1}
.dunkel .cr-p-wort{color:var(--ink);transition:opacity .15s cubic-bezier(.28,0,.49,1)}
.cr-p-kpfeile{position:absolute;top:50%;left:calc(14 * var(--u));right:calc(14 * var(--u));display:flex;justify-content:space-between;height:calc(12 * var(--u));margin-top:calc(-6 * var(--u));opacity:0;transform:scale(.6);transition:opacity .2s cubic-bezier(.28,0,.49,1),transform .2s cubic-bezier(.28,0,.49,1)}
.cr-p-kpfeile svg{width:calc(6 * var(--u));height:calc(12 * var(--u));fill:var(--ink)}
.cr-p-buehne.zieht .cr-p-kreis{width:calc(64 * var(--u));height:calc(64 * var(--u))}
.cr-p-buehne.zieht .cr-p-wort{opacity:0}
.cr-p-buehne.zieht .cr-p-kpfeile{opacity:1;transform:none}
.cr-p-galerie:focus-visible{outline:none}
.cr-p-bild{flex:none;height:100%;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--tile);scroll-snap-align:start}
.cr-p-bild img{pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Leiste V1 (Figma 771:2, Artur 14.10.): eine Zeile, alle Texte auf der Grundlinie des Namens (56 unter der Linie); Maße ab x 430 einzeilig,
   Zähler 40 vor dem Request-Link rechtsbündig */
.cr-p-leiste{position:absolute;left:0;right:0;bottom:0;height:calc(90 * var(--u));display:flex;align-items:baseline;align-content:flex-start;padding:calc(28 * var(--u) - 1px) var(--rand) 0;border-top:1px solid rgba(247,244,240,.15)}
.cr-p-wer{flex:none;display:flex;align-items:baseline;gap:calc(19 * var(--u));width:min(calc(400 * var(--u)),calc(430 / 1440 * 100vw - var(--rand)))}
.cr-p-name{font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m);color:var(--creme);white-space:nowrap}
.dunkel .cr-p-stadt{color:rgba(247,244,240,.55)}
.cr-p-masse{display:block;flex:0 1 auto;min-width:0;margin-right:calc(40 * var(--u));overflow:clip;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-b);font-weight:400;font-size:calc(16 * var(--u));line-height:calc(22 * var(--u));letter-spacing:-.01em;color:rgba(247,244,240,.78)}
.dunkel .cr-p-zaehler{flex:none;margin:0 0 0 auto;white-space:nowrap;color:var(--creme)}
.cr-p-cta{position:relative;flex:none;margin-left:calc(40 * var(--u));color:var(--creme);font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile)}
.cr-p-cta::after{content:"";position:absolute;left:0;right:0;top:calc(34 * var(--u));height:2px;background:currentColor}
.cr-p-karte{display:none}
/* Passen die Maße nicht in die Zeile (schmale Fenster, lange Maße), rutschen sie unter den Namen (Artur 14.10., Anordnung V2):
   creator.js setzt dann „zweizeilig“ am Pop-up. Zeile 1 Name, Stadt … Zähler, Request (Grundlinie 52), Zeile 2 Maße ab x 30 (6 unter der Namenszeile);
   Leiste 110 statt 90, Bilder dadurch 20 niedriger */
.cr-pop.zweizeilig .cr-p-buehne{height:calc(100vh - 206 * var(--u))}
.cr-pop.zweizeilig .cr-p-leiste{height:calc(110 * var(--u));flex-wrap:wrap;padding-top:calc(24 * var(--u) - 1px)}
.cr-pop.zweizeilig .cr-p-masse{order:1;flex:0 0 100%;margin:calc(6 * var(--u)) 0 0}

/* ---------- Tablet (noch nicht designt) ---------- */
@media (max-width:1100px){
  .cr-board{padding-top:100px}
  .cr-kopf{grid-template-columns:1fr auto}
  .cr-label{grid-column:1 / -1;margin-bottom:24px}
  .cr-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cr-seite .b-faq{padding-bottom:100px}
  .cr-p-leiste{padding-top:30px}
  .cr-p-wer{width:auto;margin-right:24px}
  .cr-pop.zweizeilig .cr-p-leiste{padding-top:26px}
}

/* ---------- Mobil (CR-M1 / CR-M2) ---------- */
@media (max-width:760px){
  /* Board 64 unter der H1: Label, Sortierung (+45), A–Z als Wischzeile (+33), Linie (+37), Raster 2 Spalten (+24) */
  .cr-board{padding-top:64px}
  .cr-kopf{display:block}
  .cr-label{margin-bottom:32px}
  .cr-filter{gap:24px}
  .cr-f[aria-pressed="true"]::after{top:18px}
  .cr-az{gap:16px;margin:20px calc(-1 * var(--rand)) 0;padding:0 var(--rand);overflow-x:auto;scrollbar-width:none}
  .cr-az::-webkit-scrollbar{display:none}
  /* Trefferflächen (B8, Optik unverändert): unsichtbare Fläche ::before um jeden Knopf, 44 hoch; die Lücken gehören je zur Hälfte
     den Nachbarn, also gibt es keine toten Stellen. Sortierung: 21 nach oben (darüber nur das Label), 10 nach unten bis zur Mitte der
     20er-Lücke zur A–Z-Leiste. A–Z: 10 nach oben, 21 nach unten (Linie 24 darunter). Die A–Z-Leiste ist eine Scroll-Leiste und schneidet
     alles außerhalb ihres Polsters ab: deshalb dort 10/21 Polster und gleich viel weniger Rand (oben 20 − 10, unten 0 − 21; der negative
     Rand fällt mit den 24 über dem Raster zusammen, die Linie bleibt, wo sie war) */
  .cr-f::before{content:"";position:absolute;inset:-21px -12px -10px}
  .cr-az{margin-top:10px;margin-bottom:-21px;padding-top:10px;padding-bottom:21px}
  .cr-az button{position:relative}
  .cr-az button::before{content:"";position:absolute;inset:-10px -8px -21px}
  .cr-raster{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px;margin-top:24px;padding-top:23px}
  .cr-meta{margin-top:12px;gap:8px}
  .cr-bild{border-radius:3px}
  .cr-alle{margin-top:48px;padding-bottom:4px;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link)}
  .cr-alle::after{top:24px}
  .cr-seite .b-faq{padding-top:80px;padding-bottom:80px}

  /* Pop-up: Label + Close an der MENU-Stelle, Bilder 330 × 440 als Wischreihe, Angaben darunter, fester heller Button unten */
  .cr-pop{overflow-y:auto}
  .cr-p-label{left:20px;top:42px}
  .cr-p-zu{right:20px;top:40px;font:600 14px/18px var(--font-b);letter-spacing:.02em}
  .cr-p-buehne{position:static;height:440px;min-height:0;margin-top:88px}
  .cr-p-galerie{gap:10px;padding:0 20px;scroll-padding:0 20px}
  .cr-p-bild{width:330px;height:440px;border-radius:3px}
  .cr-p-leiste{position:static;height:auto;display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"name stadt zaehler" "masse masse masse";align-items:start;padding:32px 20px 124px;border-top:0}
  .cr-p-wer{display:contents}
  .cr-p-name{grid-area:name}
  .dunkel .cr-p-stadt{grid-area:stadt;margin:6px 0 0 12px}
  .dunkel .cr-p-zaehler{grid-area:zaehler;justify-self:end;margin:6px 0 0}
  .cr-p-masse{grid-area:masse;display:flex;margin:12px 0 0;overflow:visible;white-space:normal;font-size:15px;line-height:21px}
  .cr-p-cta{display:none}
  .cr-p-karte{display:block;position:fixed;left:20px;right:20px;bottom:20px;z-index:3;height:72px;padding:16px 16px 0;border-radius:var(--radius);background:var(--weiss);color:var(--ink)}
  .dunkel .cr-p-karte .label{display:block;color:var(--gedaempft)}
  .cr-p-karte-titel{display:block;margin-top:6px;font-family:var(--font-h);font-weight:500;font-size:16px;line-height:20px;letter-spacing:-.01em}
  .cr-p-karte-pfeil{position:absolute;right:16px;top:14px;font:500 20px/22px var(--font-h)}
}

@media (prefers-reduced-motion:reduce){
  .cr-hover,.cr-f,.cr-az button,.cr-p-kreis,.cr-p-kpfeile,.dunkel .cr-p-wort,.cr-p-cursor{transition:none}
}