/* ============ /services/pop-up-space — Figma Entwurf 2 (1359:9) + Z-1/Z-2, mobil S-M1–S-M3 (1397:9, 1398:6, 1398:55) ============
   Kopf, Leadbild, Text und FAQ aus /services/bereich.css; fester Button, „Availability“ und Formular aus /services/produktfoto.css.
   Hier nur Abweichungen, der dunkle Teil und der Kalender. Desktop in Design-Pixeln var(--u), Schriften als Rollen aus typo.css. */

/* Hero 1380 × 860; Intro 120 unter dem Hero, Link 42 unter dem Absatz, Übergangsbild 150 unter dem Link */
.pu-seite .b-leadbild{aspect-ratio:1380/860}
.pu-seite .b-text{padding-top:calc(120 * var(--u));padding-bottom:calc(150 * var(--u))}
.pu-link{display:flex;width:max-content;margin-top:calc(42 * var(--u))}

/* ---------- Dunkler Teil (#1A1A18) ab der Oberkante des randlosen Übergangsbilds (1440 × 810) bis 150 unter dem letzten Bild ---------- */
.pu-dunkel{background:var(--dunkel);color:var(--creme)}
.pu-dunkel .label{color:var(--creme)}
.pu-uebergang{aspect-ratio:1440/810}

/* Abschnitte nach der About-Vorlage: Titel links (740), Inhalt in zwei Spalten 300 | 300 (x 790 / 1110);
   Linie über volle Inhaltsbreite, Titel 63 darunter; Abstand zwischen den Abschnitten 120 */
.pu-abschnitt{display:grid;grid-template-columns:minmax(0,740fr) minmax(0,300fr) minmax(0,300fr);column-gap:calc(20 * var(--u));align-items:start;margin:calc(120 * var(--u)) var(--rand) 0;padding:calc(62 * var(--u)) 0 0;border-top:1px solid rgba(247,244,240,.18)}
.pu-titel{grid-column:1;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);text-transform:uppercase}

/* Short facts: ohne Linie, 150 unter dem Übergangsbild; 2 × 2 — Label, Zahl 64/72, Text (Creme 60 %), Zeilen 247 auseinander */
.pu-fakten{margin-top:0;padding-top:calc(150 * var(--u));border-top:0}
.pu-kpis{grid-column:2 / span 2;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(20 * var(--u));row-gap:calc(87 * var(--u));margin-top:calc(2 * var(--u))}
.pu-zahl{margin-top:calc(14 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-kennzahl);line-height:var(--lh-kennzahl);letter-spacing:var(--ls-kennzahl)}
.pu-kpi-text{margin-top:calc(16 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(247,244,240,.6)}

/* ---------- The space: Karussell bis an den rechten Bildschirmrand, Folien 900 × 646 im Abstand 20, ab x 30 (Artur 13.10.: größer als 600);
   Titel 24 unter dem Bild (22/26), Text 10 darunter (16/22, 560); Zähler 32 unter dem höchsten Text ---------- */
.pu-raum{display:block}
.pu-k-buehne{position:relative;margin:calc(64 * var(--u)) calc(-1 * var(--rand)) 0}
.pu-k-spur{display:flex;gap:calc(20 * var(--u));padding-left:var(--rand);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-left:var(--rand)}
.pu-k-spur::-webkit-scrollbar{display:none}
/* Abstand nach der letzten Folie (Polster am Ende zählt nicht in allen Browsern mit): Lücke 20 + 10 = Rand 30 */
.pu-k-spur::after{content:"";flex:0 0 calc(var(--rand) - 20 * var(--u))}
.pu-k-spur:focus-visible{outline:calc(2 * var(--u)) solid var(--creme);outline-offset:calc(4 * var(--u))}
.pu-k-folie{flex:0 0 calc(900 * var(--u));scroll-snap-align:start}
.pu-k-bild{aspect-ratio:600/431;border-radius:var(--radius);overflow:hidden;background:var(--tile)}
.pu-k-bild img{-webkit-user-drag:none;user-select:none}
.pu-k-titel{margin-top:calc(24 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:var(--ls-zeile)}
.pu-k-text{max-width:calc(560 * var(--u));margin-top:calc(10 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(247,244,240,.6)}
.pu-k-zaehler{margin-top:calc(32 * var(--u))}
/* Touch wischt nativ mit Einrasten; mit der Maus zieht popup.js (Spur gleitet mit Nachlauf, ohne Einrasten) */
@media (pointer:coarse){.pu-k-spur{scroll-snap-type:x mandatory}}
.pu-k-buehne.zieht{user-select:none}
/* „Drag“-Kreis nur ab 761 px (Artur 14.10.: auf Mobil kein Drag-Button) */
@media (min-width:761px){.pu-k-buehne.mit-cursor,.pu-k-buehne.mit-cursor *{cursor:none}}
/* „Drag“-Kreis 96 (Creme, Ink-Schrift) wie Basic: ruht über der zweiten Folie, folgt der Maus mit Nachlauf (popup.js setzt transform);
   beim Ziehen 64 mit Ink-Pfeilen innen links und rechts (14 vom Rand; außen wären sie auf den hellen Bildern unsichtbar), Schrift blendet aus */
.pu-k-cursor{position:absolute;left:0;top:0;z-index:2;display:none;pointer-events:none;will-change:transform}
@media (min-width:761px){.pu-k-buehne.mit-cursor .pu-k-cursor{display:block}}
.pu-k-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%);transition:width .25s cubic-bezier(.28,0,.49,1),height .25s cubic-bezier(.28,0,.49,1)}
.pu-dunkel .pu-k-wort{color:var(--ink);transition:opacity .15s cubic-bezier(.28,0,.49,1)}
.pu-k-pfeile{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)}
.pu-k-pfeile svg{width:calc(6 * var(--u));height:calc(12 * var(--u));fill:var(--ink)}
.pu-k-buehne.zieht .pu-k-kreis{width:calc(64 * var(--u));height:calc(64 * var(--u))}
.pu-k-buehne.zieht .pu-k-wort{opacity:0}
.pu-k-buehne.zieht .pu-k-pfeile{opacity:1;transform:none}

/* ---------- Equipment: Gruppen-Label, Zeilen 42 (Linie + 10 + 22 + 9), Creme; Gruppen 48 auseinander ---------- */
.pu-spalte{margin-top:calc(2 * var(--u))}
.pu-gruppe + .pu-gruppe{margin-top:calc(48 * var(--u))}
.pu-liste{list-style:none;margin-top:calc(14 * var(--u));border-top:1px solid rgba(247,244,240,.18)}
.pu-liste li{padding:calc(10 * var(--u)) 0 calc(9 * var(--u));border-bottom:1px solid rgba(247,244,240,.18);font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text)}

/* Zwei Querbilder 1380 × 776, 30 Abstand; 150 unter Equipment, Dunkel endet 150 darunter */
.pu-bilder{display:grid;row-gap:var(--rand);padding:calc(150 * var(--u)) var(--rand)}
.pu-bild{aspect-ratio:1380/776;border-radius:var(--radius);overflow:hidden}

/* FAQ endet 143 vor der Linie von „Availability“ (wie Produktfotografie) */
.pu-seite .b-faq{padding-bottom:calc(143 * var(--u))}

/* ---------- Formular (Z-1): Name | Email nebeneinander (230 | 230), Brand volle Breite; Zeitraum From | To mit Kalender-Symbol ---------- */
.pu-paar{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(20 * var(--u))}
.pu-paar .pf-feld + .pf-feld{margin-top:0}
.pu-paar + .pf-feld{margin-top:calc(34 * var(--u))}
.pu-daten{position:relative}
.pu-datum-paar{clear:both;display:grid;grid-template-columns:1fr 1fr;column-gap:calc(20 * var(--u));padding-top:calc(12 * var(--u))}
/* Datumsfeld wie die Linienfelder: Text 20/28, Linie 17 darunter; leer grau („From*“), gewählt Ink */
.pu-datum{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u));width:100%;margin:0;padding:0 0 calc(17 * var(--u));border:0;border-bottom:1px solid rgba(26,26,26,.18);border-radius:0;background:none;color:var(--gedaempft);font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l);text-align:left;cursor:pointer;outline:none;transition:border-color .2s ease}
.pu-datum.gefuellt{color:var(--ink)}
.pu-datum:hover,.pu-datum[aria-expanded="true"]{border-bottom-color:rgba(26,26,26,.45)}
.pu-datum:focus-visible{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.pu-datum[aria-invalid="true"]{border-bottom-color:var(--ink)}
.pu-datum-wert{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pu-datum-icon{flex:none;width:calc(16 * var(--u));height:calc(16 * var(--u));color:var(--gedaempft)}

/* ---------- Kalender (Z-2): 480 breit unter den Datumsfeldern (7 Abstand), weiß, Ecken 5, Schatten; Monat 18/22, Pfeile ← →;
   Wochentage 11/13 grau; Tage 14/20 in Zeilen 44 (Band 36 + 8): Bereich Ink 7 %, Anfang und Ende Ink-Quadrat 36 ---------- */
.pu-kalender{position:absolute;left:0;right:0;top:calc(100% + 7 * var(--u));z-index:5;padding:calc(20 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));border-radius:var(--radius);background:var(--weiss);box-shadow:0 0 calc(12 * var(--u)) rgba(0,0,0,.06),0 calc(4 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.04)}
.pu-kalender[hidden]{display:none}
.pu-k-kopf{display:flex;align-items:flex-start;gap:calc(16 * var(--u))}
.pu-k-monat{flex:1;font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
.pu-k-blaettern{position:relative;flex:none;width:calc(18 * var(--u));padding:0;border:0;background:none;color:var(--ink);font:500 var(--fs-klein-h)/var(--lh-klein-h) var(--font-h);text-align:center;cursor:pointer}
.pu-k-blaettern::before{content:"";position:absolute;inset:-8px}
.pu-k-blaettern:disabled{opacity:.25;cursor:default}
.pu-k-blaettern:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.pu-k-tabelle{width:100%;margin-top:calc(22 * var(--u));border-collapse:collapse;table-layout:fixed}
.pu-k-tabelle th{height:calc(28 * var(--u));padding:0 0 calc(15 * var(--u));vertical-align:top;font-family:var(--font-b);font-weight:600;font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);text-transform:uppercase;text-align:center;color:var(--gedaempft)}
.pu-k-tabelle td{position:relative;height:calc(44 * var(--u));padding:0;vertical-align:top}
.pu-k-tabelle td.bereich::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(36 * var(--u));background:rgba(26,26,26,.07)}
.pu-k-tabelle td.bereich.start::before{left:50%}
.pu-k-tabelle td.bereich.ende::before{right:50%}
.pu-k-tag{position:relative;display:block;width:calc(36 * var(--u));height:calc(36 * var(--u));margin:0 auto;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--ink);font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:0;cursor:pointer}
.pu-k-tag:hover{box-shadow:inset 0 0 0 1px rgba(26,26,26,.45)}
.pu-k-tag:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pu-k-tag[aria-pressed="true"]{background:var(--ink);color:var(--weiss);font-weight:500;box-shadow:none}
.pu-k-tag:disabled{color:rgba(26,26,26,.25);cursor:default;box-shadow:none}

@media (prefers-reduced-motion:reduce){.pu-k-kreis,.pu-k-pfeile,.pu-dunkel .pu-k-wort,.pu-datum{transition:none}}

/* ---------- Tablet (761–1100, nicht eigens designt): Abschnitte einspaltig, Titel über dem Inhalt ---------- */
@media (max-width:1100px){
  .pu-seite .b-text{padding-top:100px;padding-bottom:100px}
  .pu-link{margin-top:32px}
  .pu-abschnitt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:40px;margin-top:100px}
  .pu-titel,.pu-kpis{grid-column:1 / -1}
  .pu-kpis,.pu-spalte{margin-top:0}
  .pu-fakten{margin-top:0;padding-top:100px}
  .pu-k-buehne{margin-top:40px}
  .pu-k-folie{flex-basis:min(720px,80vw)}
  .pu-bilder{padding:100px var(--rand)}
  .pu-seite .b-faq{padding-bottom:100px}
}

/* ---------- Mobil (S-M1): Abstände 80; Titel 22/24 (+32 unter der Linie); Short facts 2 × 2 (x 20 / 205); Karten 300 × 216 im Abstand 10;
   Equipment einspaltig (Sales, Furniture, Light, Space, Service); zwei Bilder 350 × 197, 10 Abstand ---------- */
@media (max-width:760px){
  .pu-seite .b-leadbild{aspect-ratio:350/219}
  .pu-seite .b-text{padding-top:80px;padding-bottom:80px}
  .pu-abschnitt{display:block;margin-top:80px;padding-top:32px}
  .pu-fakten{margin-top:0;padding-top:80px}
  .pu-kpis{column-gap:20px;row-gap:32px;margin-top:40px}
  .pu-zahl,.pu-kpi-text{margin-top:8px}
  .pu-k-buehne{margin-top:32px}
  .pu-k-spur{gap:10px}
  .pu-k-spur::after{flex-basis:calc(var(--rand) - 10px)}
  .pu-k-folie{flex-basis:300px}
  .pu-k-bild{aspect-ratio:300/216}
  .pu-k-titel{margin-top:16px}
  .pu-k-text{max-width:280px;margin-top:6px}
  .pu-k-zaehler{margin-top:24px}
  .pu-ausstattung{display:flex;flex-direction:column;gap:32px}
  .pu-ausstattung .pu-titel{margin-bottom:8px}
  .pu-spalte{display:contents}
  .pu-gruppe{order:var(--mo)}
  .pu-gruppe + .pu-gruppe{margin-top:0}
  .pu-liste li{padding:9px 0 11px}
  .pu-bilder{row-gap:10px;padding:80px var(--rand)}
  .pu-bild{aspect-ratio:350/197}
  .pu-seite .b-faq{padding-top:80px;padding-bottom:80px}
  /* Fragen 308 breit wie S-M1 (sonst bricht „How long can I rent the pop-up space?“ um) */
  .pu-seite .s-frage button > span:first-child{max-width:308px}
  .pu-seite .pf-test{padding-bottom:80px}

  /* Formular-Blatt (S-M2): Felder untereinander, From | To bleiben nebeneinander (165 | 165), Nachricht 88 hoch */
  .pu-paar{display:block}
  .pu-paar .pf-feld + .pf-feld,.pu-paar + .pf-feld{margin-top:27px}
  .pu-datum{padding-bottom:12px}
  .pu-datum-icon{width:16px;height:16px}
  .pu-seite .pf-d-nachricht{height:88px}

  /* Kalender (S-M3): 350 breit, Polster 16, Zeilen 42 (Band 32 + 10), Quadrat 32 */
  .pu-kalender{top:calc(100% + 7px);padding:16px 16px 8px;box-shadow:0 0 12px rgba(0,0,0,.08),0 6px 30px rgba(0,0,0,.05)}
  .pu-k-kopf{gap:14px}
  .pu-k-monat,.pu-k-blaettern{font-size:18px;line-height:22px} /* S-M3: Monat und Pfeile bleiben 18/22 (Rolle klein-h wäre mobil 16/20) */
  .pu-k-tabelle{margin-top:16px}
  .pu-k-tabelle th{height:28px;padding-bottom:15px}
  .pu-k-tabelle td{height:42px}
  .pu-k-tabelle td.bereich::before{height:32px}
  .pu-k-tag{width:32px;height:32px}
}