/* ============ /services/product-photography — Figma H-1 (807:2, Seite weiß) + Z-0/Z-1/Z-3/Z-4, mobil PP-M1–PP-M4 ============
   Kopf, Leadbild, Text und FAQ kommen aus /services/bereich.css (wie die Expertise-Bereichsseiten), hier nur Abweichungen und die eigenen Abschnitte.
   Desktop in Design-Pixeln var(--u), Schriften als Rollen aus typo.css. */

/* Seite weiß (Artur 11.10.: Produktfotos auf Weiß, Creme biss sich mit den grauen Produkt-Hintergründen); Nav ebenfalls weiß */
body.pf-seite{background:var(--weiss)}
.pf-seite .sub-nav{background:rgba(255,255,255,.92)}
.pf-seite .b-leadbild{border-radius:0}
.k-unsichtbar,.k-honig{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.pf-gesperrt,html.pf-gesperrt body{overflow:hidden}

/* ---------- Styles (H-1): 150 unter dem Text; Kerbe 170 · Liste 680 · 70 · Bild 460 × 576; Zeilen 96 (Linie + 30 + 35 + 30) ---------- */
.pf-styles{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,680fr) calc(70 * var(--u)) minmax(0,460fr);align-items:start;padding-top:calc(150 * var(--u))}
.pf-styles .label.kerbe{grid-column:1;grid-row:1;float:none;width:auto;margin-top:calc(41 * var(--u))}
.pf-s-liste{grid-column:2;grid-row:1;list-style:none;border-bottom:1px solid rgba(26,26,26,.18)}
.pf-s-zeile{border-top:1px solid rgba(26,26,26,.18)}
.pf-s-zeile a{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(30 * var(--u));padding:calc(30 * var(--u)) 0}
.pf-s-kachel,.pf-s-luecke{display:none}
.pf-s-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);transition:opacity .25s ease}
/* Pfeil 20 hinter dem Namen, nur in der aktiven Zeile */
.pf-s-pfeil{display:inline-block;margin-left:calc(20 * var(--u));letter-spacing:0;transition:opacity .25s ease,transform .25s ease}
.pf-s-zeile a:hover .pf-s-pfeil{transform:translateX(calc(6 * var(--u)))}
/* Lieferzeit rechtsbündig (x 880), 6 tiefer als der Name; aktiv 78 %, sonst 40 % */
.pf-s-zeit{flex:none;margin-top:calc(6 * var(--u));font-family:var(--font-b);font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(26,26,26,.78);white-space:nowrap;transition:color .25s ease}
.pf-s-zeile a:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}
.pf-s-hinweis,.pf-s-texte p{font-family:var(--font-b);font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(26,26,26,.78)}
.pf-s-hinweis{grid-column:2;grid-row:2;max-width:calc(440 * var(--u));margin-top:calc(17 * var(--u))}
@media (min-width:1101px){
  .pf-s-zeile:not(.aktiv) .pf-s-name{opacity:.35}
  .pf-s-zeile:not(.aktiv) .pf-s-pfeil{opacity:0}
  .pf-s-zeile:not(.aktiv) .pf-s-zeit{color:rgba(26,26,26,.4)}
  .pf-s-bild{grid-column:4;grid-row:1;position:relative;aspect-ratio:460/576;border-radius:var(--radius);overflow:hidden;isolation:isolate}
  .pf-s-bild img{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
  .pf-s-bild img.aktiv{opacity:1}
  /* Beschreibung unter dem Bild (17 unter der Bildkante), nimmt keinen Platz ein: die Library steht fest 173 unter dem Hinweis */
  .pf-s-texte{grid-column:4;grid-row:2;position:relative;align-self:stretch}
  .pf-s-texte p{position:absolute;top:calc(17 * var(--u));left:0;right:0;opacity:0;transition:opacity .4s ease}
  .pf-s-texte p.aktiv{opacity:1}
}

/* ---------- Library (H-1): Kopfzeile 173 unter dem Hinweis — Label in der Kerbe, Reiter ab x 200, Auswahl bündig rechts;
   Linie 40 unter der Schrift, Raster 23 darunter: 6 Spalten 210 × 315, 24 Abstand; „Show more“ 42 unter dem Raster, mittig ---------- */
.pf-library{padding-top:calc(173 * var(--u));padding-bottom:calc(152 * var(--u))}
.pf-l-kopf{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr) auto;grid-template-areas:"label reiter auswahl";align-items:start;padding-bottom:calc(40 * var(--u));border-bottom:1px solid rgba(26,26,26,.18)}
.pf-l-label{grid-area:label}
.pf-l-reiter{grid-area:reiter;display:flex;gap:calc(23 * var(--u));min-width:0}
.pf-l-auswahlen{grid-area:auswahl;display:flex;gap:calc(24 * var(--u))}
/* Reiter wie die Work-Filter: Versal-Label, Zähler 10/12 hochgestellt (5 höher, 6 Abstand), aktiv Ink + unterstrichen, sonst Grau */
.pf-l-reiter button{display:inline-flex;align-items:flex-start;flex:none;padding:0;border:0;background:none;color:var(--gedaempft);font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;cursor:pointer;transition:color .15s}
.pf-l-reiter button:hover,.pf-l-reiter button[aria-pressed="true"]{color:var(--ink)}
.pf-l-reiter button[aria-pressed="true"] .pf-l-rname{text-decoration:underline;text-decoration-thickness:1.25px;text-underline-offset:calc(2 * var(--u))}
.pf-l-reiter button:disabled{opacity:.35;cursor:default}
.pf-l-reiter button:disabled:hover{color:var(--gedaempft)}
/* Fokusrahmen nur bei Tastaturbedienung (Artur 13.10.: beim Klicken kein schwarzer Rahmen um die Auswahl) */
.pf-l-reiter button:focus-visible,.pf-l-auswahl.tastatur:has(select:focus){outline:1.5px solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}
.pf-l-zahl{position:relative;top:calc(-5 * var(--u));margin-left:calc(6 * var(--u));font:600 calc(10 * var(--u))/calc(12 * var(--u)) var(--font-b);letter-spacing:.02em;color:var(--gedaempft)}
/* Auswahl: Label + Chevron 8 × 4 (10 Abstand), die echte Auswahlliste liegt unsichtbar darüber (Systemmenü, mobil nativer Picker) */
.pf-l-auswahl{position:relative;display:flex;align-items:flex-start;gap:calc(10 * var(--u));color:var(--gedaempft)}
.pf-l-auswahl .label{color:inherit;white-space:nowrap}
.pf-l-auswahl.gewaehlt{color:var(--ink)}
.pf-l-chevron{flex:none;width:calc(8 * var(--u));height:calc(4 * var(--u));margin-top:calc(4.5 * var(--u));overflow:visible}
.pf-l-auswahl select{position:absolute;top:-6px;left:-4px;width:calc(100% + 8px);height:calc(100% + 12px);opacity:0;cursor:pointer;font-size:16px}
.pf-l-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(24 * var(--u));margin-top:calc(23 * var(--u));list-style:none}
.pf-l-eintrag[hidden]{display:none}
.pf-l-bild{display:block;width:100%;aspect-ratio:2/3;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:#F2F2F2;cursor:pointer;isolation:isolate}
/* Library ohne Zoom und Aufklappen, Mauszeiger = Finger; Klick öffnet die Großansicht (Artur 14.10., wie Creator) */
.pf-l-bild:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(3 * var(--u))}
.pf-l-mehr{display:flex;width:max-content;margin:calc(42 * var(--u)) auto 0;padding:0 0 calc(7 * var(--u));border:0;background:none;color:var(--ink);cursor:pointer}
.pf-l-mehr[hidden]{display:none}
.pf-l-mehr:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u))}

/* ---------- How we work + Clients: dunkles Band (#1A1A18), Statement 185 unter der Kante (Label in der Kerbe wie der Seitenkopf);
   Schritte 162 darunter, je 154 hoch: Nummer · Titel 36/39 (x 200, 560) · Text (x 850, 560); Zitat 160 unter dem letzten Schritt ---------- */
.pf-band{padding-top:calc(185 * var(--u));padding-bottom:calc(150 * var(--u));background:var(--dunkel);color:var(--weiss)}
.pf-band .label{color:rgba(255,255,255,.9)}
.pf-band .label.kerbe{width:calc(170 * var(--u));margin-top:calc(5 * var(--u))}
.pf-band-statement{max-width:calc(1150 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-statement);line-height:var(--lh-statement);letter-spacing:var(--ls-statement)}
.pf-band-grau{color:rgba(255,255,255,.45)}
.pf-schritte{clear:both;margin-top:calc(162 * var(--u));list-style:none}
.pf-schritt{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,560fr) calc(90 * var(--u)) minmax(0,560fr);align-items:start;min-height:calc(154 * var(--u))}
.pf-schritt:last-child{min-height:0}
.pf-band .pf-schritt-nr{grid-column:1;margin-top:calc(12 * var(--u));color:rgba(255,255,255,.4)}
.pf-schritt-titel{grid-column:2;font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-l);line-height:var(--lh-titel-l);letter-spacing:var(--ls-titel-l)}
.pf-schritt-text{grid-column:4;margin-top:calc(7 * var(--u));font-family:var(--font-b);font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:rgba(255,255,255,.55)}
.pf-kunden{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;margin-top:calc(160 * var(--u))}
.pf-kunden-label{grid-column:1;grid-row:1;margin-top:calc(11 * var(--u))}
.pf-zitat{grid-column:2;grid-row:1}
.pf-zitat blockquote{max-width:calc(900 * var(--u));font-family:var(--font-z);font-weight:400;font-size:var(--fs-zitat);line-height:var(--lh-zitat);letter-spacing:var(--ls-zitat)}
.pf-band .pf-zitat figcaption{margin-top:calc(25 * var(--u));color:rgba(255,255,255,.55)}
/* Kundenlogos: 6 × 185 × 80 ab x 200, 20 Abstand, weiße Kacheln (Logos als Bild) */
.pf-logos{grid-column:2;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(20 * var(--u));margin-top:calc(64 * var(--u));list-style:none}
.pf-logos li{aspect-ratio:185/80;border-radius:var(--radius);overflow:hidden;background:var(--weiss)}

/* ---------- Studio: Statement 153 unter dem Band (x 200, 760), zwei Bilder 675 × 506 40 darunter ---------- */
.pf-studio{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(153 * var(--u))}
.pf-studio .label.kerbe{float:none;width:auto;margin-top:calc(2 * var(--u))}
.pf-studio-statement,.pf-test-statement{max-width:calc(760 * var(--u));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)}
.pf-studio-bilder{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;gap:var(--rand);margin-top:calc(40 * var(--u))}
.pf-studio-bild{aspect-ratio:675/506;border-radius:var(--radius);overflow:hidden}
/* FAQ wie bereich.css, endet 143 vor der Linie des Test-shoot-Abschnitts */
.pf-seite .b-faq{padding-bottom:calc(143 * var(--u))}

/* ---------- Test shoot: Linie über die volle Breite, Statement 62 darunter (x 200), Link 42 unter dem Statement ---------- */
.pf-test{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(62 * var(--u));padding-bottom:calc(152 * var(--u));border-top:1px solid rgba(26,26,26,.18)}
.pf-test .label.kerbe{float:none;width:auto;margin-top:calc(2 * var(--u))}
.pf-test .link-l{display:flex;width:max-content;margin-top:calc(42 * var(--u))}

/* ---------- More services: Beige (Saum) als Akzent, 112 Innenabstand, unterstrichene Links (44 Abstand), Übersicht 32 darunter ---------- */
.pf-mehr{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,1fr);align-items:start;padding-top:calc(112 * var(--u));padding-bottom:calc(112 * var(--u));background:var(--saum)}
.pf-mehr .label.kerbe{float:none;width:auto;margin-top:calc(5 * var(--u))}
.pf-mehr-links p{display:flex;flex-wrap:wrap;gap:0 calc(44 * var(--u))}
.pf-mehr-links p + p{margin-top:calc(32 * var(--u))}
.pf-mehr-links a{font-family:var(--font-h);font-weight:500;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link);text-decoration:underline;text-decoration-thickness:auto;text-underline-offset:auto;transition:opacity .2s ease}
.pf-mehr-links a:hover{opacity:.65}

/* ---------- Test-shoot-Button: fix unten rechts mit 30 Rand (wie Explore), 300 × 80. Über dem dunklen Band weiß mit Ink-Schrift (Z-0);
   sobald der Test-shoot-Abschnitt den Button erreicht, blendet er aus (Artur 13.10.: statt vor der Linie zu parken), beim Hochscrollen wieder ein.
   Klassen .hell und .weg setzt produktfoto.js ---------- */
.pf-cta{position:fixed;right:var(--rand);bottom:var(--rand);z-index:55;display:block;width:calc(300 * var(--u));height:calc(80 * var(--u));padding:calc(19 * var(--u)) calc(20 * var(--u)) 0;border-radius:var(--radius);background:var(--dunkel);color:var(--creme);transition:background-color .25s ease,color .25s ease,opacity .3s ease,visibility 0s linear 0s}
.pf-cta.weg{opacity:0;visibility:hidden;pointer-events:none;transition:background-color .25s ease,color .25s ease,opacity .3s ease,visibility 0s linear .3s}
.pf-cta .label{display:block;color:rgba(247,244,240,.55);transition:color .25s ease}
.pf-cta-titel{display:block;margin-top:calc(8 * var(--u));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)}
.pf-cta-pfeil{position:absolute;left:calc(260 * var(--u));top:calc(16 * var(--u));font:500 calc(22 * var(--u))/calc(22 * var(--u)) var(--font-h);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pf-cta:hover .pf-cta-pfeil{transform:translateX(4px)}
.pf-cta.hell{background:var(--weiss);color:var(--ink)}
.pf-cta.hell .label{color:var(--gedaempft)}
.pf-cta:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(2 * var(--u))}
.pf-cta.hell:focus-visible{outline-color:var(--weiss)}
/* DE (Übersetzung 14.10., noch nicht von Artur abgenommen): „Kostenloses Test-Shooting buchen“ ist breiter als „Book a free test shoot“ und lief in 300 × 80
   zweizeilig über den Rand → auf den deutschen Produktfoto-Seiten Karte 350 breit, Pfeil mitgerückt; EN unverändert, mobil (volle Breite) passt der Text */
@media (min-width:761px){
  .pf-seite:lang(de) .pf-cta{width:calc(350 * var(--u))}
  .pf-seite:lang(de) .pf-cta-pfeil{left:calc(310 * var(--u))}
}

/* ---------- Schließen „ד (Drawer, Lightbox): Archivo 28/28, Klickfläche größer als das Zeichen ---------- */
.pf-zu{position:absolute;padding:0;border:0;background:none;color:var(--ink);font:500 calc(28 * var(--u))/calc(28 * var(--u)) var(--font-h);cursor:pointer}
.pf-zu::before{content:"";position:absolute;inset:-10px}
.pf-zu:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

/* ---------- Test-shoot-Formular (Z-1): Side-Drawer 560 breit von rechts, volle Höhe, weiß; Schleier Dunkel 40 %, Klick schließt ---------- */
.pf-drawer{position:fixed;inset:0;z-index:90}
.pf-drawer[hidden]{display:none}
.pf-d-schleier{position:absolute;inset:0;background:rgba(26,26,24,.4);opacity:0;transition:opacity .3s ease}
.pf-drawer.offen .pf-d-schleier{opacity:1}
.pf-d-panel{position:absolute;top:0;right:0;bottom:0;width:calc(560 * var(--u));max-width:100%;padding:calc(45 * var(--u)) calc(40 * var(--u)) calc(39 * var(--u));overflow-y:auto;overscroll-behavior:contain;background:var(--weiss);transform:translateX(100%);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.pf-d-panel:focus{outline:none}
.pf-drawer.offen .pf-d-panel{transform:none}
.pf-d-panel .pf-zu{top:calc(34 * var(--u));right:calc(36 * var(--u))}
.pf-d-titel{margin-top:calc(36 * var(--u));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)}
.pf-d-formular{margin-top:calc(48 * var(--u))}
/* Linienfelder wie /contact: Text 20/28, Linie 17 darunter, 34 bis zum nächsten Feld */
.pf-feld + .pf-feld{margin-top:calc(34 * var(--u))}
.pf-feld input{display:block;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(--ink);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);outline:none;transition:border-color .2s ease}
.pf-feld input::placeholder,.pf-d-nachricht::placeholder{color:var(--gedaempft);opacity:1}
.pf-feld input:focus{border-bottom-color:var(--ink)}
.pf-feld input:focus-visible{box-shadow:0 1px 0 var(--ink)}
/* Styles als Auswahl-Kacheln (F-2): 36 hoch, Inter Medium 14/20, Kontur 18 %, gewählt = Ink-Fläche */
.pf-d-stile{margin-top:calc(42 * var(--u));padding:0;border:0}
.pf-d-stile legend{float:left;width:100%;padding:0;color:var(--gedaempft)}
.pf-chips{clear:both;display:flex;flex-wrap:wrap;gap:calc(8 * var(--u));padding-top:calc(12 * var(--u))}
.pf-chip{position:relative;display:block;cursor:pointer}
.pf-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pf-chip span{display:block;padding:calc(7 * var(--u)) calc(13 * var(--u));border:1px solid rgba(26,26,26,.18);border-radius:var(--radius);background:var(--weiss);color:var(--ink);font-family:var(--font-b);font-weight:500;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:0;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.pf-chip:hover span{border-color:rgba(26,26,26,.45)}
.pf-chip input:checked + span{border-color:var(--ink);background:var(--ink);color:var(--weiss)}
.pf-chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.pf-d-nlabel{display:block;margin-top:calc(25 * var(--u));color:var(--gedaempft)}
.pf-d-nachricht{display:block;width:100%;height:calc(112 * var(--u));margin-top:calc(12 * var(--u));padding:calc(14 * var(--u)) calc(15 * var(--u));border:1px solid rgba(26,26,26,.18);border-radius:var(--radius);background:none;color:var(--ink);font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);resize:none;outline:none;transition:border-color .2s ease}
.pf-d-nachricht:focus{border-color:var(--ink)}
.pf-d-hinweis{margin-top:calc(24 * var(--u));font-family:var(--font-b);font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs);color:var(--gedaempft)}
.pf-d-hinweis a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
/* Absende-Button B-1 wie /contact (.k-senden) */
.pf-senden{display:inline-flex;align-items:center;gap:calc(12 * var(--u));margin-top:calc(30 * var(--u));padding:calc(15 * var(--u)) calc(20 * var(--u));border:1.5px solid var(--gedaempft);border-radius:var(--radius);background:none;color:rgba(26,26,26,.75);font-family:var(--font-h);font-weight:500;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.pf-senden:hover,.pf-senden:focus-visible{border-color:var(--ink);color:var(--ink)}
.pf-senden:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pf-senden-pfeil{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pf-senden:hover .pf-senden-pfeil{transform:translateX(4px)}

/* ---------- Library groß (Z-4): weißes Vollbild, Bild 2:3 mittig (bei 900 hoch: 480 × 720, 90 oben), ← / → auf Bildmitte, Style + Zähler 24 darunter ---------- */
.pf-lightbox{--lb-h:min(calc(720 * var(--u)),calc(100vh - 180 * var(--u)));position:fixed;inset:0;z-index:95;background:var(--weiss);opacity:0;transition:opacity .25s ease;touch-action:pan-y}
.pf-lightbox[hidden]{display:none}
.pf-lightbox.offen{opacity:1}
.pf-lb-label{position:absolute;left:var(--rand);top:calc(38 * var(--u))}
.pf-lightbox .pf-zu{top:calc(31 * var(--u));right:var(--rand)}
.pf-lb-bild{position:absolute;left:50%;top:50%;width:auto;height:var(--lb-h);aspect-ratio:2/3;border-radius:var(--radius);background:#F2F2F2;transform:translate(-50%,-50%)}
.pf-lightbox .pf-lb-text{position:absolute;left:0;right:0;top:calc(50% + var(--lb-h) / 2 + 24 * var(--u));text-align:center;color:var(--gedaempft)}
.pf-lb-pfeil{position:absolute;top:50%;padding:0;border:0;background:none;color:var(--ink);font:500 calc(32 * var(--u))/calc(40 * var(--u)) var(--font-h);cursor:pointer;transform:translateY(-50%)}
.pf-lb-pfeil::before{content:"";position:absolute;inset:-12px}
.pf-lb-zurueck{left:var(--rand)}
.pf-lb-vor{right:var(--rand)}
.pf-lb-pfeil:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

@media (prefers-reduced-motion:reduce){
  .pf-s-name,.pf-s-pfeil,.pf-s-zeit,.pf-s-bild img,.pf-s-texte p,.pf-cta,.pf-cta .label,.pf-cta-pfeil,.pf-d-schleier,.pf-d-panel,.pf-lightbox,.pf-senden-pfeil{transition:none}
  .pf-s-zeile a:hover .pf-s-pfeil,.pf-cta:hover .pf-cta-pfeil,.pf-senden:hover .pf-senden-pfeil{transform:none}
}

/* ---------- Tablet (761–1100, nicht eigens designt): Styles als Kacheln (3 Spalten), Library-Kopf gestapelt wie mobil (4 Spalten),
   Band und Abschnitte einspaltig mit Label über dem Inhalt ---------- */
@media (max-width:1100px){
  .pf-styles{display:block;padding-top:100px}
  .pf-styles .label.kerbe{margin:0 0 24px}
  .pf-s-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 16px;border-bottom:0}
  .pf-s-zeile{border-top:0}
  .pf-s-zeile a{display:block;padding:0}
  .pf-s-kachel{display:block;aspect-ratio:170/212;border-radius:var(--radius);overflow:hidden}
  .pf-s-name{display:block;margin-top:12px;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
  .pf-s-pfeil{display:inline;margin-left:0}
  .pf-s-luecke{display:inline}
  .pf-s-zeile a:hover .pf-s-pfeil{transform:none}
  .pf-s-zeit{display:block;margin-top:4px;font-size:var(--fs-mini);line-height:var(--lh-mini);letter-spacing:var(--ls-mini)}
  .pf-s-hinweis{max-width:none;margin-top:24px}
  .pf-s-bild,.pf-s-texte{display:none}

  .pf-library{padding-top:100px;padding-bottom:100px}
  .pf-l-kopf{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "auswahl" "reiter";padding-bottom:20px}
  .pf-l-auswahlen{margin-top:32px;gap:20px}
  .pf-l-auswahl{gap:8px}
  .pf-l-chevron{margin-top:5px}
  /* Reiter als Slider bis an den Bildschirmrand; 6 Innenabstand oben für die hochgestellten Zähler (der Slider schneidet sonst ab) → Schrift 24 unter der Auswahl */
  .pf-l-reiter{margin:18px calc(-1 * var(--rand)) 0;padding:6px var(--rand) 0;overflow-x:auto;scrollbar-width:none;gap:20px}
  .pf-l-reiter::-webkit-scrollbar{display:none}
  /* Trefferflächen der Reiter (B8, Optik unverändert): unsichtbare Fläche ::before, 44 hoch, die 20er-Lücke je zur Hälfte. Die Scroll-Leiste
     schneidet alles außerhalb ihres Polsters ab: Polster oben 6 → 15,5 und unten 0 → 15,5, Rand um genauso viel kleiner (18 → 8,5, 0 → −15,5) */
  .pf-l-reiter{margin-top:8.5px;margin-bottom:-15.5px;padding-top:15.5px;padding-bottom:15.5px}
  .pf-l-reiter button{position:relative}
  .pf-l-reiter button::before{content:"";position:absolute;inset:-15.5px -10px}
  .pf-l-zahl{top:-4px;margin-left:5px;letter-spacing:0}
  .pf-l-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

  .pf-band{padding-top:100px;padding-bottom:100px}
  .pf-band .label.kerbe{float:none;width:auto;margin:0 0 24px}
  .pf-schritte{margin-top:64px}
  .pf-schritt{display:block;min-height:0;padding:20px 0 40px;border-top:1px solid rgba(255,255,255,.18)}
  .pf-schritt:last-child{padding-bottom:0}
  .pf-band .pf-schritt-nr{display:block;margin-top:0}
  .pf-schritt-titel{margin-top:8px}
  .pf-schritt-text{margin-top:8px;max-width:640px}
  .pf-kunden{display:block;margin-top:100px}
  .pf-kunden-label{margin:0 0 24px}
  .pf-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:40px}

  .pf-studio,.pf-test,.pf-mehr{display:block}
  .pf-studio{padding-top:100px}
  .pf-studio .label.kerbe,.pf-test .label.kerbe,.pf-mehr .label.kerbe{margin:0 0 24px}
  .pf-studio-bilder{gap:16px}
  .pf-seite .b-faq{padding-bottom:100px}
  .pf-test{padding-top:64px;padding-bottom:100px}
  .pf-test .link-l{margin-top:32px}
  .pf-mehr{padding-top:64px;padding-bottom:64px}
  .pf-mehr-links p{gap:10px 24px}
  .pf-mehr-links p + p{margin-top:24px}
}

/* ---------- Mobil (PP-M1): einspaltig; Styles 2 × 3 Kacheln 170 × 212 (Name 16/20 mit Pfeil, Lieferzeit 13/18); Library 3 Spalten 110 × 165;
   Band mit Linien je Schritt; Studio-Bilder untereinander; Abstände zwischen den Abschnitten 80 ---------- */
@media (max-width:760px){
  .pf-styles{padding-top:80px}
  .pf-styles .label.kerbe{margin:0 0 32px}
  .pf-s-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
  .pf-s-hinweis{margin-top:24px}

  .pf-library{padding-top:80px;padding-bottom:77px}
  .pf-l-raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .pf-l-mehr{margin-top:32px}

  .pf-band{padding-top:80px;padding-bottom:80px}
  .pf-band .label.kerbe{margin:0 0 32px}
  .pf-schritte{margin-top:48px}
  .pf-schritt{padding:19px 0 32px} /* Nummer 20 unter der Linienoberkante */
  .pf-kunden{margin-top:80px}
  .pf-kunden-label{margin:0 0 32px}
  .pf-band .pf-zitat figcaption{margin-top:16px}
  .pf-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:40px}
  .pf-logos li{aspect-ratio:170/74}

  .pf-studio{padding-top:80px}
  .pf-studio .label.kerbe,.pf-test .label.kerbe,.pf-mehr .label.kerbe{margin:0 0 32px}
  .pf-studio-statement,.pf-test-statement{max-width:none}
  .pf-studio-bilder{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:32px}
  .pf-studio-bild{aspect-ratio:350/262}
  .pf-seite .b-faq{padding-top:80px;padding-bottom:80px}
  .pf-test{padding-top:63px;padding-bottom:77px}
  .pf-test .link-l{margin-top:32px}
  .pf-mehr-links p + p{margin-top:24px}

  /* Button volle Breite, 20 vom Rand, 72 hoch, dunkel 92 % (über Dunkel weiß 92 %, PP-M3); blendet vor dem Test-shoot-Abschnitt aus */
  .pf-cta{left:20px;right:20px;bottom:20px;width:auto;height:72px;padding:16px 16px 0;background:rgba(26,26,24,.92);color:var(--weiss)}
  .pf-cta .label{color:rgba(255,255,255,.55)}
  .pf-cta-titel{margin-top:6px}
  .pf-cta-pfeil{left:auto;right:16px;top:14px;font-size:20px;line-height:20px}
  .pf-cta.hell{background:rgba(255,255,255,.92)}

  /* Formular als weißes Vollbild-Blatt von unten (PP-M2) */
  .pf-d-panel{left:0;width:auto;padding:40px 20px 42px;transform:translateY(100%)}
  .pf-d-panel .pf-zu{top:32px;right:20px}
  .pf-d-titel{margin-top:32px}
  .pf-d-formular{margin-top:40px}
  .pf-feld + .pf-feld{margin-top:27px}
  .pf-feld input{padding-bottom:12px}
  .pf-d-stile{margin-top:31px}
  .pf-d-nlabel{margin-top:28px}
  .pf-d-nachricht{padding:14px 15px}
  .pf-d-hinweis{margin-top:20px}
  .pf-senden{margin-top:24px}

  /* Library groß (PP-M4): Bild 350 breit, 140 oben (kürzere Bildschirme: kleiner), Zähler 20 darunter, Pfeile unten */
  .pf-lightbox{--lb-h:min(calc((100vw - 40px) * 1.5),calc(100svh - 276px))}
  .pf-lb-label{top:40px}
  .pf-lightbox .pf-zu{top:32px}
  .pf-lb-bild{top:140px;transform:translateX(-50%)}
  .pf-lightbox .pf-lb-text{top:calc(140px + var(--lb-h) + 20px)}
  .pf-lb-pfeil{top:auto;bottom:40px;font-size:22px;line-height:24px;transform:none}
}

/* ============ STIL-UNTERSEITEN /services/product-photography/<stil>/ — Figma Hanging 839:4 (Desktop) + H-M1 1338:5 (mobil) ============
   Kein Titelbild: Einleitung 123 unter der H1; Brotkrume „Product photography“ in der Kerbe (150 breit, zweizeilig wie Figma);
   Library ohne Reiter 151 unter dem Text; zweiter Textblock 152 unter dem Raster (Library-Abstand), 150 vor dem Band */
.pf-brotkrume{display:inline-block;max-width:calc(150 * var(--u));transition:opacity .2s ease}
.pf-brotkrume:hover{opacity:.65}
.pf-brotkrume:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(4 * var(--u));border-radius:calc(2 * var(--u))}
.pf-stilseite .b-text{padding-top:calc(123 * var(--u))}
.pf-stilseite .b-text.pf-text2{padding-top:0;padding-bottom:calc(150 * var(--u))}
.pf-library--stil{padding-top:calc(151 * var(--u))}
@media (max-width:1100px){
  .pf-brotkrume{max-width:none}
  .pf-stilseite .b-text{padding-top:100px}
  .pf-stilseite .b-text.pf-text2{padding-bottom:100px}
  .pf-library--stil{padding-top:100px}
  /* Kopf einzeilig: „Library“ links, Category rechts (ohne Reiter muss nichts gestapelt werden) */
  .pf-library--stil .pf-l-kopf{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label auswahl"}
  .pf-library--stil .pf-l-auswahlen{margin-top:0}
}
@media (max-width:760px){
  .pf-stilseite .b-text{padding-top:64px}
  .pf-stilseite .b-text.pf-text2{padding-bottom:80px}
  .pf-library--stil{padding-top:80px;padding-bottom:80px}
}