/* ============================================================
   portfolio.css — eigene Ergänzungen zum übernommenen Vorlagen-CSS.
   Alles Eigene trägt den Präfix .pf-. Werte folgen dem
   Design-System der Vorlage (Farben, Radien, Kurven).
   Lädt auf jeder Seite als LETZTES Stylesheet.
   ============================================================ */

/* --- Monogramm (Logo-Slot links in der Nav) --- */
.pf-nav-verweis-marke svg {
  display: block;
}

/* --- Nav-Labels als Text sichtbar machen ---
   Die Vorlage rendert Menüpunkte als SVG-Wortmarken und versteckt
   .pf-nav-wort für Screenreader (clip auf 1px). Dieses
   Portfolio nutzt echte Text-Labels — also: entclippen. */
#pf-nav .pf-nav-menue .pf-nav-wort {
  position: static;
  clip: auto;
  clip-path: none;
  overflow: visible;
  height: auto;
  width: auto;
  padding: 0;
  border: 0;
}

/* --- Desktop: Abstände wie beim Vorbild ---
   Die Liste verteilt per space-between; mit weniger Menüpunkten
   als die Vorlage spreizt das zu weit. Zentriert + festes
   Link-Padding ≈ der Vorlage Item-Abstand. */
@media (min-width: 834px) {
  /* Eine Fluchtlinie für alles: JP-Logo an die linke, Suche+Mail an
     die rechte Kante des 1024er-Containers (innen = 980er-Raster,
     der Vorlage 22px-Padding), Menügruppe bleibt mittig mit unveränderten
     Abständen. Damit stehen Logo, Bereichsleiste (980), Artikelspalte
     und Kacheln alle auf denselben Kanten. */
  #pf-nav .pf-nav-liste {
    justify-content: center;
  }
  /* der Vorlage Liste hat margin-inline:-8px (kompensierte früher die
     Item-Paddings) — mit genullten Randpaddings schöbe das die
     Glyphen über die Rasterkanten hinaus. */
  #pf-nav .pf-nav-liste {
    margin-inline: 0;
  }
  #pf-nav .pf-nav-punkt-marke {
    margin-inline-end: auto;
  }
  #pf-nav .pf-nav-suche {
    margin-inline-start: auto;
  }
  #pf-nav .pf-nav-punkt-menue .pf-nav-verweis {
    padding-inline: 18px;
  }
  /* Icon-Links (Suche/Kontakt) mit gleichem Abstand wie die Texte */
  #pf-nav .pf-nav-suche .pf-nav-verweis,
  #pf-nav .pf-nav-punkt-kontakt .pf-nav-verweis {
    padding-inline: 18px;
  }
  /* Außenpaddings der Randelemente nullen (nach den Padding-Regeln,
     sonst verlieren sie die Kaskade), damit die GLYPHEN — nicht die
     Link-Boxen — auf den Rasterkanten sitzen. */
  #pf-nav .pf-nav-punkt-marke .pf-nav-verweis {
    padding-inline-start: 0;
    /* 3px Innenluft der JP-Wortmarke im viewBox ausgleichen —
       gemessen an der Tintenkante, nicht der SVG-Box. */
    margin-inline-start: -3px;
  }
  #pf-nav .pf-nav-punkt-kontakt .pf-nav-verweis {
    padding-inline-end: 0;
  }
  /* Chevron nur im Compact-Menü — auf Desktop nie zeigen */
  #pf-nav .pf-nav-pfeil {
    display: none !important;
  }
  /* Große Flyout-Einträge dichter (Abstand wie beim Vorbild).
     line-height:0 am li killt das Baseline-Leading der Zeilenbox,
     der Link bekommt seine Zeilenhöhe explizit zurück. */
  #pf-nav .pf-nav-spalte-gross .pf-nav-spalteneintrag-gross {
    line-height: 0;
  }
  #pf-nav .pf-nav-spalte-gross .pf-nav-spaltenverweis {
    line-height: 1.1666666667;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 0;
  }
  #pf-nav .pf-nav-spalte-gross .pf-nav-spalteneintrag-gross + .pf-nav-spalteneintrag-gross {
    margin-top: 2px;
  }
}

/* --- Compact (Hamburger-Menü) ---
   Die Vorlage setzt die Menü-Geometrie per JS-Inline-Styles;
   hier als CSS nachgebaut. */
@media (max-width: 833px) {
  /* Icons rechts gruppieren statt über die Breite verteilen.
     Das Listen-Padding reserviert beim Vorbild Platz für deren
     absolut gesetzten Burger — hier ist er ein Flex-Nachbar. */
  #pf-nav .pf-nav-liste {
    justify-content: flex-start;
    padding-inline-end: 0;
  }
  #pf-nav .pf-nav-suche {
    margin-inline-start: auto;
  }
  #pf-nav .pf-nav-suche .pf-nav-verweis,
  #pf-nav .pf-nav-punkt-kontakt .pf-nav-verweis {
    padding-inline: 12px;
  }
  #pf-nav.pf-nav-menue-offen {
    height: 100dvh;
    max-height: none;
    background: rgb(22, 22, 23);
  }
  /* Overlay beginnt am Viewport-Top (wie beim Vorbild) — das
     padding-top:50px des Flyouts schafft den Platz unter dem X. */
  #pf-nav .pf-nav-menue {
    top: 0;
    bottom: 0;
    inset-inline: 0;
  }
  /* Schließen-Kreuz bleibt über dem Overlay */
  #pf-nav .pf-nav-burger {
    position: relative;
    z-index: 3;
  }
  /* Icon-Flyout (Suche/Kontakt): kein Zurück-Chevron — das X schließt */
  #pf-nav.pf-iconflyout-open .pf-nav-zurueck {
    display: none !important;
  }
  #pf-nav .pf-nav-menue > .pf-nav-flyout {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Große Menüeinträge wie beim Vorbild */
  #pf-nav .pf-nav-menue .pf-nav-wort {
    font-size: 28px;
    line-height: 1.14;
    font-weight: 600;
    letter-spacing: 0.007em;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #pf-nav .pf-nav-menue .pf-nav-punkt-menue .pf-nav-verweis {
    margin-bottom: 0;
  }
  #pf-nav .pf-nav-menue .pf-nav-menue-liste {
    padding-top: 12px;
  }
  #pf-nav .pf-nav-menue .pf-nav-punkt-menue {
    margin: 0;
    padding: 0;
  }
  #pf-nav .pf-nav-punkt-menue .pf-nav-verweis {
    padding-block: 8px;
    position: relative;
  }
  /* Untermenü-Einträge: gleiche Dichte wie das Hauptmenü */
  #pf-nav .pf-nav-unterflaeche .pf-nav-spalteneintrag-gross {
    line-height: 0;
  }
  #pf-nav .pf-nav-unterflaeche .pf-nav-spalteneintrag-gross + .pf-nav-spalteneintrag-gross {
    margin-top: 0;
  }
  /* Untermenü beginnt auf gleicher Höhe wie das Hauptmenü */
  #pf-nav .pf-nav-unterflaeche .pf-nav-unterflaeche-inhalt {
    padding-top: 57px;
  }
  #pf-nav .pf-nav-unterflaeche .pf-nav-spalteneintrag-gross .pf-nav-spaltenverweis {
    display: inline-block;
    line-height: 1.14;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-bottom: 0;
  }
  /* Chevron rechts an Einträgen mit Untermenü — erscheint erst
     bei Hover/Antippen (wie beim Vorbild) */
  #pf-nav.pf-nav-menue-offen .pf-nav-punkt-menue .pf-nav-pfeil {
    display: flex;
    visibility: visible;
    opacity: 0;
    position: absolute;
    inset-inline-end: 28px;
    top: 0;
    height: 100%;
    align-items: center;
    margin: 0;
    padding: 0;
    color: #86868b;
    animation: none;
    transform: translateX(-6px);
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1), transform 0.24s cubic-bezier(0.4, 0, 0.6, 1);
  }
  #pf-nav.pf-nav-menue-offen .pf-nav-punkt-menue .pf-nav-verweis:hover .pf-nav-pfeil,
  #pf-nav.pf-nav-menue-offen .pf-nav-punkt-menue .pf-nav-verweis:active .pf-nav-pfeil,
  #pf-nav.pf-nav-menue-offen .pf-nav-punkt-menue .pf-nav-verweis:focus-visible .pf-nav-pfeil {
    opacity: 1;
    transform: none;
  }
}

/* --- Such-Flyout --- */
#pf-nav .pf-nav-suchfeld-eingabe:focus,
#pf-nav .pf-nav-suchfeld-eingabe:focus-visible {
  outline: none;
  box-shadow: none;
}
.pf-nav-treffer .pf-nav-spaltentitel {
  margin-top: 24px;
}
.pf-nav-treffer .pf-nav-spalteneintrag[hidden] {
  display: none;
}
/* Lupe im Suchfeld */
.pf-searchfield-icon {
  display: flex;
  align-items: center;
  color: #86868b;
  margin-inline-end: 12px;
}
.pf-searchfield-icon svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 833px) {
  .pf-searchfield-icon svg {
    width: 25px;
    height: 25px;
  }
  .pf-searchfield-icon {
    margin-inline-end: 14px;
  }
}
/* Pfeil-Icon vor den Schnellinks (wie beim Vorbild) */
.pf-ql-arrow {
  flex: none;
  width: 14px;
  height: 14px;
  margin-inline-end: 12px;
  color: #86868b;
  transition: color 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.pf-nav-spaltenverweis:hover .pf-ql-arrow {
  color: currentColor;
}
.pf-nav-treffer .pf-nav-spaltenverweis {
  display: flex;
  align-items: center;
}

/* Der Bag-Wrapper ist position:relative — dadurch würde das
   Flyout an ihm kleben statt an der Nav (schmales Kärtchen rechts).
   Die Vorlage hat dort echte Bag-Logik; wir wollen dasselbe Vollbreiten-
   Flyout wie bei den übrigen Menüpunkten. */
#pf-nav .pf-nav-kontakt-huelle {
  position: static;
}

/* --- Kontakt-Flyout im Aufbau der Einkaufstasche der Vorlage:
   Headline, Satz mit Link, darunter die Liste. Kein eigenes
   Panel — es nutzt die Vollbreiten-Fläche der anderen Flyouts. --- */
/* Die elevated-Klasse (für die Einblend-Kaskade) bringt 24px/600
   mit — Größen und Farben daher explizit setzen. */
#pf-nav .pf-bag-group {
  max-width: 420px;
}
/* Compact: volle Spaltenbreite, linksbündig auf der Content-Kante
   (als Flex-Item schrumpft die Gruppe sonst auf ihren Inhalt und
   wird mittig gesetzt). */
@media only screen and (max-width: 833px) {
  #pf-nav .pf-bag-group {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }
}
#pf-nav .pf-bag-headline {
  font-size: 24px;
  line-height: 1.1667;
  font-weight: 600;
  letter-spacing: 0.009em;
  color: #f5f5f7;
  margin: 0 0 6px;
}
#pf-nav .pf-bag-intro {
  font-size: 17px;
  line-height: 1.4118;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: #86868b;
  margin: 0 0 26px;
}
#pf-nav .pf-bag-intro .pf-nav-spaltenverweis {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: #2997ff;
  /* Klickflächen-Innenabstand der Flyout-Links stört im Fließtext */
  padding: 0;
  margin: 0;
}
#pf-nav .pf-bag-intro .pf-nav-spaltenverweis:hover {
  text-decoration: underline;
}
#pf-nav .pf-bag-group .pf-nav-spaltentitel {
  font-size: 12px;
  line-height: 1.3334;
  font-weight: 400;
  color: #86868b;
  margin: 0 0 8px;
}
/* Kontaktwege etwas größer als die Quick-Links der anderen Flyouts */
#pf-nav .pf-bag-list .pf-nav-spaltenverweis {
  font-size: 17px;
  line-height: 1.4118;
  letter-spacing: -0.022em;
}

/* ============================================================
   Medien-Utilities (Platzhalter-Fotos)
   ============================================================ */
.pf-media {
  position: relative;
  overflow: hidden;
  background: #000;
}
.pf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pf-media--dim img {
  opacity: 0.85;
}

/* Homepage-Tiles: Platzhalter-Fotos füllen die Kachel (cover). */
.pf-kachel-huelle .pf-kachel-bildhuelle picture.static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pf-kachel-huelle .pf-kachel-bildhuelle picture.static img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Scroll-Reveal
   ============================================================ */
.pf-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.6, 1), transform 0.6s cubic-bezier(0.4, 0, 0.6, 1);
}
.pf-reveal-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .pf-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Story-Seiten (dunkel, Produkt-Story-Look)
   Akzentfarben pro Projekt über --pf-accent / --pf-grad-*.
   ============================================================ */
.pf-page-story {
  background: #000;
  color: #f5f5f7;
  --pf-accent: #2997ff;
  --pf-grad-a: #0090f7;
  --pf-grad-b: #ba62fc;
  --pf-grad-c: #f2416b;
  --pf-grad-d: #f55f44;
}
.pf-accent-borealis { --pf-accent: #64d2ff; --pf-grad-a: #0090f7; --pf-grad-b: #64d2ff; --pf-grad-c: #30d158; --pf-grad-d: #a0e8af; }
.pf-accent-atlas    { --pf-accent: #bf5af2; --pf-grad-a: #5e5ce6; --pf-grad-b: #bf5af2; --pf-grad-c: #ff375f; --pf-grad-d: #ff9f0a; }
.pf-accent-relay    { --pf-accent: #ff9f0a; --pf-grad-a: #ff9f0a; --pf-grad-b: #ff625d; --pf-grad-c: #ff375f; --pf-grad-d: #bf5af2; }
.pf-accent-mono     { --pf-accent: #98989d; --pf-grad-a: #f5f5f7; --pf-grad-b: #98989d; --pf-grad-c: #6e6e73; --pf-grad-d: #48484a; }
.pf-accent-studio   { --pf-accent: #30d158; --pf-grad-a: #30d158; --pf-grad-b: #64d2ff; --pf-grad-c: #0090f7; --pf-grad-d: #5e5ce6; }
.pf-accent-reels    { --pf-accent: #ff375f; --pf-grad-a: #ff375f; --pf-grad-b: #ff9f0a; --pf-grad-c: #ffd60a; --pf-grad-d: #ff625d; }
.pf-accent-nachtplan{ --pf-accent: #5e5ce6; --pf-grad-a: #5e5ce6; --pf-grad-b: #0090f7; --pf-grad-c: #64d2ff; --pf-grad-d: #bf5af2; }

.pf-page-story .section-welcome {
  padding-top: 92px;
  text-align: center;
}
.pf-page-story .pf-schrift-augenbraue {
  color: #86868b;
}
.pf-page-story .section-welcome .welcome .welcome-text-content.gradient-text {
  background-image: linear-gradient(108deg, var(--pf-grad-a) 0%, var(--pf-grad-b) 34%, var(--pf-grad-c) 68%, var(--pf-grad-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pf-welcome-media {
  margin: 48px auto 0;
  max-width: 980px;
}
.pf-welcome-media picture {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
}
.pf-story-section {
  padding: 120px 0;
}
.pf-page-story .pf-story-headline {
  color: #f5f5f7;
  margin: 0 0 28px;
}
.pf-page-story .pf-story-intro {
  color: #a1a1a6;
  max-width: 680px;
  margin: 0;
}
.pf-page-story .pf-story-intro strong {
  color: #f5f5f7;
}

/* Bento-Karten */
.pf-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.pf-bento-card {
  background: #1d1d1f;
  border-radius: 28px;
  padding: 40px;
  overflow: hidden;
}
.pf-bento-headline {
  font-size: 28px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: 0.007em;
  color: #f5f5f7;
  margin: 0 0 12px;
}
.pf-bento-copy {
  font-size: 17px;
  line-height: 1.47;
  color: #a1a1a6;
  margin: 0;
}
.pf-bento-media {
  margin: 32px 0 0;
  border-radius: 18px;
  aspect-ratio: 16 / 10;
}
@media (max-width: 734px) {
  .pf-bento {
    grid-template-columns: 1fr;
  }
  .pf-bento-card {
    padding: 28px;
  }
}

/* Stats */
.pf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 80px;
  margin-top: 56px;
}
.pf-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-stat-value {
  font-size: 72px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.015em;
  background: linear-gradient(108deg, var(--pf-grad-a, #0090f7) 0%, var(--pf-grad-b, #ba62fc) 50%, var(--pf-grad-c, #f2416b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pf-accent, #2997ff);
}
.pf-stat-label {
  font-size: 17px;
  color: #a1a1a6;
}
@media (max-width: 734px) {
  .pf-stat-value {
    font-size: 56px;
  }
}

/* Feature-Touts (3er-Reihe) */
.pf-touts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pf-tout {
  background: #1d1d1f;
  border-radius: 28px;
  padding: 32px;
}
.pf-tout-headline {
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  letter-spacing: 0.011em;
  color: #f5f5f7;
  margin: 0 0 8px;
}
.pf-tout-copy {
  font-size: 14px;
  line-height: 1.42;
  color: #a1a1a6;
  margin: 0;
}
@media (max-width: 734px) {
  .pf-touts {
    grid-template-columns: 1fr;
  }
}

/* Statement (großes zentriertes Claim mit Gradient-Wort) */
.pf-statement {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.pf-statement h2 {
  font-size: 56px;
  line-height: 1.07;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #f5f5f7;
  margin: 0;
}
.pf-grad {
  background-image: linear-gradient(108deg, var(--pf-grad-a, #0090f7) 0%, var(--pf-grad-b, #ba62fc) 50%, var(--pf-grad-c, #f2416b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 734px) {
  .pf-statement h2 {
    font-size: 40px;
  }
}

/* Specs (Schlüssel/Wert-Spalten) */
.pf-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}
.pf-spec {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 20px;
}
.pf-spec-title {
  font-size: 14px;
  font-weight: 600;
  color: #86868b;
  margin: 0 0 18px;
}
.pf-spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}
.pf-spec-value {
  font-size: 28px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: 0.007em;
  color: #f5f5f7;
}
.pf-spec-label {
  font-size: 14px;
  color: #a1a1a6;
}
@media (max-width: 734px) {
  .pf-specs {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Breites Bild */
.pf-story-section-wide {
  padding: 0;
}
.pf-story-wide {
  margin: 0 auto;
  max-width: 1440px;
}
.pf-story-wide img {
  max-height: 72vh;
}

/* Abschluss */
.pf-story-outro .pf-story-ctas {
  margin-top: 36px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Localnav: taucht beim Scrollen auf, kurz nachdem die Globalnav
   aus dem Bild ist — schwebt dann fixiert mit Blur-Hintergrund.
   margin-top:0: ihr 44px-Margin collapste durch den body und
   verschob die absolute Globalnav; Platz kommt als body-padding. */
#pf-lokalnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9997;
  margin-top: 0 !important;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.4s step-end;
}
.pf-ln-visible #pf-lokalnav {
  transform: none;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1), visibility 0.4s step-start;
}
/* Gleiche Höhe wie die Globalnav (44px, compact 48px) —
   Inhalte fürs kleinere Maß nachzentriert (Vorlage rechnet mit 52px). */
#pf-lokalnav,
#pf-lokalnav .pf-lokalnav-flaeche {
  height: 44px;
}
#pf-lokalnav .pf-lokalnav-titel {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 500;
}
/* Inhalte auf die Spannweite der Globalnav-Gruppe begrenzen */
@media (min-width: 834px) {
  #pf-lokalnav .pf-lokalnav-flaeche {
    max-width: 671px;
    box-sizing: border-box;
  }
}
#pf-lokalnav .pf-lokalnav-menue {
  margin-top: -7px;
}
@media (max-width: 833px) {
  #pf-lokalnav,
  #pf-lokalnav .pf-lokalnav-flaeche {
    height: 48px;
  }
  #pf-lokalnav .pf-lokalnav-titel {
    margin-top: 12px;
  }
  #pf-lokalnav .pf-lokalnav-menue {
    margin-top: -5px;
  }
}
/* Hintergrund direkt auf dem Wrapper — deterministisch, statt
   der Vorlage außerhalb liegendes Curtain-Div zu verbiegen.
   transform:none: die Vorlage schiebt den Wrapper per Transform
   um eine Leistenhöhe nach oben (deren JS-Einfahrmechanik) —
   dadurch war der Inhalt der Leiste unsichtbar. */
#pf-lokalnav .pf-lokalnav-huelle {
  position: relative;
  height: 100%;
  transform: none !important;
  background: rgba(22, 22, 23, 0.8);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#pf-lokalnav .pf-lokalnav-grund {
  display: none;
}
.pf-page-story {
  padding-top: 44px;
}
@media (max-width: 833px) {
  .pf-page-story {
    padding-top: 48px;
  }
}

/* ============================================================
   Carousel (Galerie mit Paddles + Dots, Scroll-Snap)
   ============================================================ */
.pf-carousel {
  position: relative;
}
.pf-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 0;
}
.pf-carousel-track::-webkit-scrollbar {
  display: none;
}
.pf-carousel-slide {
  flex: 0 0 min(680px, 86%);
  scroll-snap-align: center;
  border-radius: 28px;
  overflow: hidden;
  background: #1d1d1f;
}
.pf-carousel-slide figure {
  margin: 0;
}
.pf-carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
/* Angeschnittene Nachbar-Slides bleiben innen lange deckend und
   laufen erst zum Rand hin weich aus (Ease-Kurve über die Peek-Zone,
   gedeckelt auf 160px für sehr breite Tracks). */
.pf-carousel-track {
  --pf-fade: min(160px, calc((100% - min(680px, 86%)) / 2));
  --pf-maske: linear-gradient(to right,
    transparent 0,
    rgba(0, 0, 0, 0.11) calc(var(--pf-fade) * 0.125),
    rgba(0, 0, 0, 0.27) calc(var(--pf-fade) * 0.25),
    rgba(0, 0, 0, 0.45) calc(var(--pf-fade) * 0.375),
    rgba(0, 0, 0, 0.62) calc(var(--pf-fade) * 0.5),
    rgba(0, 0, 0, 0.76) calc(var(--pf-fade) * 0.625),
    rgba(0, 0, 0, 0.87) calc(var(--pf-fade) * 0.75),
    rgba(0, 0, 0, 0.95) calc(var(--pf-fade) * 0.875),
    #000 var(--pf-fade),
    #000 calc(100% - var(--pf-fade)),
    rgba(0, 0, 0, 0.95) calc(100% - var(--pf-fade) * 0.875),
    rgba(0, 0, 0, 0.87) calc(100% - var(--pf-fade) * 0.75),
    rgba(0, 0, 0, 0.76) calc(100% - var(--pf-fade) * 0.625),
    rgba(0, 0, 0, 0.62) calc(100% - var(--pf-fade) * 0.5),
    rgba(0, 0, 0, 0.45) calc(100% - var(--pf-fade) * 0.375),
    rgba(0, 0, 0, 0.27) calc(100% - var(--pf-fade) * 0.25),
    rgba(0, 0, 0, 0.11) calc(100% - var(--pf-fade) * 0.125),
    transparent 100%);
  -webkit-mask-image: var(--pf-maske);
  mask-image: var(--pf-maske);
}
.pf-carousel-caption {
  padding: 18px 24px 22px;
  font-size: 14px;
  line-height: 1.42;
  color: #a1a1a6;
}
.pf-carousel-caption strong {
  color: #f5f5f7;
  display: block;
  margin-bottom: 2px;
}
.pf-paddle {
  position: absolute;
  top: calc(50% - 34px);
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  color: rgba(0, 0, 0, 0.56);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.pf-paddle:hover {
  background: rgba(223, 223, 227, 0.7);
  color: rgba(0, 0, 0, 0.64);
}
.pf-paddle:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}
.pf-paddle svg {
  width: 10px;
  height: 16px;
}
.pf-paddle-prev {
  left: 12px;
}
.pf-paddle-next {
  right: 12px;
}
/* Schwebende Steuerleiste (Dots-Pill + Play/Pause wie beim Vorbild) */
.pf-carousel-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}
.pf-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: 980px;
  background: rgba(66, 66, 69, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pf-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.36);
  cursor: pointer;
  transition: width 0.32s cubic-bezier(0.4, 0, 0.6, 1), background 0.32s cubic-bezier(0.4, 0, 0.6, 1);
}
.pf-dot:hover {
  background: rgba(255, 255, 255, 0.55);
}
.pf-dot[aria-current="true"] {
  width: 26px;
  background: #f5f5f7;
}
.pf-carousel-play {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(66, 66, 69, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f5f5f7;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.pf-carousel-play:hover {
  background: rgba(85, 85, 90, 0.8);
}
.pf-carousel-play svg {
  width: 13px;
  height: 13px;
}
.pf-carousel-play .pf-ic-pause {
  display: none;
}
.pf-carousel.pf-playing .pf-carousel-play .pf-ic-pause {
  display: block;
}
.pf-carousel.pf-playing .pf-carousel-play .pf-ic-play {
  display: none;
}

/* ============================================================
   Info-Gauges (Ring) und Meter (Balken)
   ============================================================ */
.pf-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 48px 72px;
  margin-top: 56px;
}
.pf-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  --pf-gauge-value: 0;
}
.pf-gauge-ring {
  position: relative;
  width: 130px;
  height: 130px;
}
.pf-gauge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pf-gauge-ring circle {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
}
.pf-gauge-track {
  stroke: rgba(255, 255, 255, 0.12);
}
.pf-gauge-fill {
  stroke: var(--pf-accent, #2997ff);
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.4, 0, 0.6, 1) 0.25s;
}
.pf-reveal-in .pf-gauge-fill,
.pf-gauge.pf-reveal-in .pf-gauge-fill {
  stroke-dashoffset: calc(339.292 * (1 - var(--pf-gauge-value)));
}
.pf-gauge-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.007em;
  color: #f5f5f7;
}
.pf-gauge-label {
  font-size: 14px;
  color: #a1a1a6;
  text-align: center;
  max-width: 150px;
}
.pf-meters {
  display: grid;
  gap: 28px;
  margin-top: 56px;
  max-width: 560px;
}
.pf-meter {
  --pf-meter-value: 0;
}
.pf-meter-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}
.pf-meter-head span:first-child {
  color: #f5f5f7;
}
.pf-meter-head span:last-child {
  color: #a1a1a6;
}
.pf-meter-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.pf-meter-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--pf-accent, #2997ff);
  transition: width 1.1s cubic-bezier(0.4, 0, 0.6, 1) 0.25s;
}
.pf-reveal-in .pf-meter-fill {
  width: calc(var(--pf-meter-value) * 100%);
}

/* ============================================================
   Accessory-Elemente: Farb-Swatches + „Neu“-Badge
   ============================================================ */
.pf-swatches {
  display: flex;
  gap: 7px;
  margin: 0 0 8px;
}
.pf-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.24);
}
.pf-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #b64400;
  margin-bottom: 4px;
}
.pf-page-story .pf-badge {
  color: #ff9f0a;
}

/* ============================================================
   Projekte-Grid (hell)
   ============================================================ */
.pf-page-grid {
  background: #fff;
  color: #1d1d1f;
}
.pf-grid-header {
  padding: 88px 0 8px;
}
.pf-grid-header .pf-grid-title {
  margin: 0 0 10px;
}
.pf-grid-header .pf-grid-sub {
  color: #86868b;
  margin: 0;
}
.pf-grid-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.pf-grid-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.pf-uplink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  line-height: 1.24;
  color: #0066cc;
  text-decoration: none;
}
.pf-uplink:hover {
  text-decoration: underline;
}

/* Projekt-Shelf (Kategorie-Leiste im Stil der Vorlage) */
.pf-shelf-wrapper {
  width: 980px;
  max-width: calc(100% - 44px);
  margin: 48px auto 8px;
}
.pf-shelf {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 14px;
}
.pf-shelf::-webkit-scrollbar {
  display: none;
}
.pf-shelf-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #1d1d1f;
}
.pf-shelf-media {
  display: block;
  width: 98px;
  height: 74px;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f5f7;
}
.pf-shelf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.6, 1);
}
.pf-shelf-item:hover .pf-shelf-media img {
  transform: scale(1.06);
}
.pf-shelf-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Neuheiten-Karte */
.pf-news {
  margin-top: 56px;
}
.pf-news-title {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0.004em;
  margin: 0 0 24px;
}
.pf-news-card-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 22px;
}
.pf-news-card {
  background: #f5f5f7;
  border-radius: 28px;
  padding: 44px 48px 48px;
}
.pf-news-card h3 {
  font-size: 28px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: 0.007em;
  margin: 0 0 10px;
}
.pf-news-card p {
  font-size: 17px;
  line-height: 1.47;
  color: #494949;
  margin: 0 0 14px;
  max-width: 62ch;
}
.pf-newslink {
  font-size: 17px;
  color: #0066cc;
  text-decoration: none;
}
.pf-newslink:hover {
  text-decoration: underline;
}
@media (max-width: 734px) {
  .pf-news-card {
    padding: 28px;
  }
}

.pf-chips-wrapper {
  margin: 40px auto 8px;
  width: 980px;
  max-width: calc(100% - 44px);
}
.pf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pf-chip {
  appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 10px 18px;
  border-radius: 980px;
  background: #f5f5f7;
  color: #1d1d1f;
  transition: background 0.2s ease, color 0.2s ease;
}
.pf-chip:hover {
  background: #e8e8ed;
}
.pf-chip[aria-pressed="true"] {
  background: #1d1d1f;
  color: #fff;
}
.pf-chip:focus-visible {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}
.pf-grid-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 22px 120px;
}
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px 20px;
}
.pf-card {
  scroll-margin-top: 88px;
}
.pf-card-hidden {
  display: none;
}
.pf-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.pf-card-media {
  margin: 0 0 18px;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #f5f5f7;
}
.pf-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.6, 1);
}
.pf-card-link:hover .pf-card-media img {
  transform: scale(1.03);
}
.pf-card-cat {
  font-size: 12px;
  color: #86868b;
  margin: 0 0 2px;
}
.pf-card-title {
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  letter-spacing: 0.011em;
  margin: 0 0 4px;
}
.pf-card-copy {
  font-size: 14px;
  line-height: 1.42;
  color: #494949;
  margin: 0 0 8px;
}
.pf-card-more {
  font-size: 14px;
  color: #0066cc;
}
.pf-card-more::after {
  content: " ›";
}
.pf-card-link:hover .pf-card-more {
  text-decoration: underline;
}

/* ============================================================
   Prosa-Seiten (Über mich, Kontakt, Impressum, Datenschutz)
   ============================================================ */
.pf-page-prose {
  background: #fff;
  color: #1d1d1f;
}
.pf-prose {
  max-width: 692px;
  margin: 0 auto;
  padding: 120px 22px 140px;
}
/* Textseiten (Über, Kontakt, Impressum, Datenschutz) auf derselben
   Fluchtlinie wie Nav-Logo, Bar und Artikel: linksbündig aufs
   980er-Raster statt eigener Zentrierung. */
@media only screen and (min-width: 1069px) {
  .pf-prose {
    margin-inline-start: calc((100% - 980px) / 2);
    margin-inline-end: auto;
    padding-inline: 0;
  }
}
.pf-prose h1 {
  margin: 0 0 32px;
}
/* Die Fehlernummer steht als Augenbraue über der Überschrift — im
   selben Ton wie die Kategorie über einem Artikel. Sie ist per
   aria-hidden ausgeblendet: vorgelesen ist "404" keine Information,
   der Satz darunter sagt dasselbe in verständlich. */
.pf-404-code {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.33337;
  font-weight: 700;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: #6e6e73;
}
/* Zwei Knöpfe nebeneinander, auf schmalen Geräten untereinander. */
.pf-page-404 .pf-prose-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.pf-prose p {
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: 0.012em;
  margin: 0 0 22px;
}
.pf-prose-subheadline {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0.004em;
  margin: 64px 0 18px;
  scroll-margin-top: 88px;
}
.pf-prose-ctas {
  margin-top: 8px;
}
.pf-notice {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.42;
  color: #6e6e73;
  margin: 28px 0;
}
.pf-contact-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.pf-contact-list a {
  color: #0066cc;
  text-decoration: none;
}
.pf-contact-list a:hover {
  text-decoration: underline;
}

/* ============================================================
   CMS-Projectpage (Artikel-Layout, hell)
   ============================================================ */
.pf-page-article {
  background: #fff;
  color: #1d1d1f;
  padding-top: 44px;
}
@media (max-width: 833px) {
  .pf-page-article {
    padding-top: 48px;
  }
}
.pf-page-article .article {
  padding-bottom: 96px;
}
/* Localnav hell */
.pf-page-article #pf-lokalnav .pf-lokalnav-huelle {
  background: rgba(250, 250, 252, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
/* Artikelbilder: unsere Fotos füllen die Figur */
.pf-article-img img {
  display: block;
  width: 100%;
  height: auto;
}
/* Breite Blöcke (Facts, Touts, Specs) erben die exakte
   Bildbreite über die image-big-Hülle — hier nur Abstände. */
.pf-article-wide {
  margin-top: 56px;
  margin-bottom: 56px;
}
/* Facts: ruhige Zahlenreihe statt Diagramm */
.pf-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pf-fact {
  border-top: 1px solid #d2d2d7;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pf-fact-value {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0;
  color: #1d1d1f;
}
.pf-fact-label {
  font-size: 14px;
  line-height: 1.42;
  color: #6e6e73;
}
@media (max-width: 734px) {
  .pf-facts {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* Touts hell */
.pf-page-article .pf-tout {
  background: #f5f5f7;
}
.pf-page-article .pf-tout-headline {
  color: #1d1d1f;
}
.pf-page-article .pf-tout-copy {
  color: #494949;
}
/* Specs hell */
.pf-page-article .pf-specs {
  margin-top: 0;
}
.pf-page-article .pf-spec {
  border-top-color: #d2d2d7;
}
.pf-page-article .pf-spec-value {
  color: #1d1d1f;
}
.pf-page-article .pf-spec-label,
.pf-page-article .pf-spec-title {
  color: #6e6e73;
}
/* Galerie: zentriert auf Bildbreite, Slides snappen mittig */
.pf-article-gallery {
  width: 980px;
  max-width: calc(100% - 44px);
  margin: 56px auto;
}
.pf-page-article .pf-carousel-track {
  padding-inline: calc((100% - min(680px, 86%)) / 2);
}
.pf-page-article .pf-carousel-slide {
  background: #f5f5f7;
}
.pf-page-article .pf-carousel-caption {
  color: #6e6e73;
}
.pf-page-article .pf-carousel-caption strong {
  color: #1d1d1f;
}
.pf-page-article .pf-dots {
  background: rgba(0, 0, 0, 0.06);
  backdrop-filter: none;
}
.pf-page-article .pf-dot {
  background: rgba(0, 0, 0, 0.22);
}
.pf-page-article .pf-dot:hover {
  background: rgba(0, 0, 0, 0.4);
}
.pf-page-article .pf-dot[aria-current="true"] {
  background: #1d1d1f;
}
.pf-page-article .pf-carousel-play {
  background: rgba(0, 0, 0, 0.06);
  color: #1d1d1f;
  backdrop-filter: none;
}
.pf-page-article .pf-carousel-play:hover {
  background: rgba(0, 0, 0, 0.12);
}
/* Bildecken wie bei den Kacheln runden — der Vorlage Kachelraster lässt
   Artikelbilder eckig, im Rest der Seite ist alles abgerundet.
   Randlose Leadbilder (fullbleed) bleiben kantig. */
.pf-page-article .pf-bild-gross:not(.pf-bild-randlos) .pf-article-img,
.pf-page-article .pf-carousel-slide .pf-media {
  border-radius: 18px;
  overflow: hidden;
}
.pf-page-article .pf-bild-gross:not(.pf-bild-randlos) .pf-article-img img,
.pf-page-article .pf-carousel-slide .pf-media img {
  border-radius: inherit;
  display: block;
}

/* Abschluss-Block: linksbündig auf der Wide-Kante; Copy in der
   Artikel-Typo (19/27), die außerhalb der pagebody-Hülle fehlt. */
.pf-article-outro .pf-fliesstext-absatz {
  font-size: 19px;
  line-height: 1.4211;
  font-weight: 400;
  letter-spacing: 0.012em;
}
.pf-article-outro .pf-story-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ============================================================
   Projekte-Übersicht (Kachelraster, pf-raster)
   ============================================================ */
/* Das äußere Kachelraster injiziert der Vorlage Feed-Bundle als CSS-in-JS —
   es steht in keiner der statischen CSS-Dateien. Werte vom Live-DOM:
   12 Spalten, 36px Gap; Hero volle Breite, 2up = 6, 3up = 4 Spalten.
   minmax(0,1fr) + min-width:0, sonst weiten feste Kachelinnenmaße
   (Hero-Media 643px) die Spuren über den 980px-Container hinaus. */
.pf-raster .pf-kachelreihe,
.pf-blog .pf-kachelreihe {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pf-raster .pf-kachel-feld,
.pf-blog .pf-kachel-feld {
  min-width: 0;
  display: block;
}
.pf-raster .pf-kachel-feld .pf-kachel,
.pf-blog .pf-kachel-feld .pf-kachel {
  width: 100%;
}
.pf-raster .pf-feld-aufmacher, .pf-blog .pf-feld-aufmacher { grid-column: 1 / -1; }
.pf-raster .pf-feld-halb, .pf-blog .pf-feld-halb { grid-column: span 6; }
.pf-raster .pf-feld-drittel, .pf-blog .pf-feld-drittel { grid-column: span 4; }
/* Tablet/Mobile mit !important auf .pf-kachel-feld: der Vorlage Feed-CSS
   platziert die Kacheln per nth-child EXPLIZIT (z. B. grid-column:
   7/span 6) als Basis-Regel — höhere Spezifität, dadurch blieb auf
   dem iPhone das Desktop-Raster stehen. */
@media only screen and (min-width: 735px) and (max-width: 1068px) {
  .pf-raster .pf-kachel-feld, .pf-blog .pf-kachel-feld {
    grid-column: span 6 !important;
    /* der Vorlage Stories-CSS blendet ab dem 4. Tile aus (Slider-Modus) */
    display: block !important;
  }
  .pf-raster .pf-feld-aufmacher, .pf-blog .pf-feld-aufmacher { grid-column: 1 / -1 !important; }
  /* Tablet-Kante: der Vorlage Content-Maß ist hier 692px zentriert —
     die Bar würde sonst auf ihrer 1024er-Formel (22px) sitzen. */
  .pf-nrbar-content,
  .pf-nr-tray-inner,
  .pf-suche,
  .pf-prose {
    max-width: 692px !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }
}
@media only screen and (max-width: 734px) {
  .pf-raster .pf-kachelreihe, .pf-blog .pf-kachelreihe {
    grid-template-columns: 1fr !important;
    gap: 24px;
    /* die Vorlage deckelt die Kachelliste mobil auf 366px — dadurch endet
       das Raster vor der rechten Content-Kante. */
    max-width: none !important;
    width: 100% !important;
  }
  .pf-raster .pf-kachel-feld, .pf-blog .pf-kachel-feld {
    grid-column: auto !important;
    /* der Vorlage Stories-CSS blendet mobil alles ab dem 4. Tile aus
       (deren Modul wechselt auf einen Slider) — bei uns sollen
       alle Posts sichtbar bleiben. */
    display: block !important;
  }
  /* Einheitliche Kachelhöhen: die Vorlage gibt tile-2up eine
     min-height von 347px (für sein zweispaltiges Desktop-Raster),
     Hero und 3up nicht. Einspaltig untereinander erzeugt das
     unterschiedlich große Weißräume unter den Texten. Mobil folgt
     die Höhe dem Inhalt — Bild 16:9, Text direkt darunter. */
  .pf-raster .pf-kachel,
  .pf-blog .pf-kachel-randlos,
  .pf-blog .pf-kachel-aufmacher {
    min-height: 0 !important;
    height: auto !important;
  }
  /* space-between verteilt den Resthöhen-Überschuss zwischen
     Headline und Datum — ohne feste Höhe unnötig, mit Restluft
     würde es die Abstände wieder auseinanderziehen. */
  .pf-raster .pf-kachel-text {
    justify-content: flex-start !important;
  }
  /* Overlay-Kacheln des Blogs brauchen weiter eine Bildfläche,
     da ihr Text im Bild liegt. */
  .pf-blog .pf-kachel-randlos,
  .pf-blog .pf-kachel-aufmacher {
    aspect-ratio: 4 / 3;
  }
  /* die Vorlage gibt dem <picture> mobil aspect-ratio: 4/5 — das schlägt
     die inset-basierte Höhe und macht das Bild höher als seine
     Kachel (ragte unten heraus). */
  .pf-blog .pf-kachel .pf-bildfeld,
  .pf-blog .pf-kachel .pf-bildfeld-datei {
    aspect-ratio: auto !important;
  }
  /* In den flacheren Mobilkacheln steht der Text höher im Bild —
     der Verlauf muss entsprechend früher greifen, sonst wird die
     weiße Headline auf hellen Motiven unlesbar. */
  .pf-blog .pf-kachel-aufmacher .pf-verlaufsschicht::after,
  .pf-blog .pf-kachel-randlos .pf-kachel-bild::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.78) 100%);
  }
}
/* die Vorlage liefert exakt zugeschnittene Bilder und nutzt object-fit:fill —
   unsere Platzhalter haben andere Seitenverhältnisse und brauchen cover. */
.pf-raster .pf-kachel-bild .pf-bildfeld,
.pf-raster .pf-kachel-bild .pf-bildfeld-datei,
.pf-blog .pf-kachel .pf-bildfeld,
.pf-blog .pf-kachel .pf-bildfeld-datei {
  width: 100%;
  height: 100%;
}
.pf-raster .pf-kachel-bild .pf-bildfeld-datei,
.pf-blog .pf-kachel .pf-bildfeld-datei {
  object-fit: cover;
  display: block;
}
/* Safari: <picture> bleibt sonst inline und kollabiert — das Bild
   füllt die Kachel dann nicht und wirkt unten abgeschnitten. */
.pf-raster .pf-kachel-bild .pf-bildfeld,
.pf-blog .pf-kachel .pf-bildfeld {
  display: block;
}
/* Ohne der Vorlage Icon-Font gibt es kein Uhr-Glyph — Einzug neutralisieren. */
.pf-raster .pf-kachel-datum::before,
.pf-blog .pf-kachel-datum::before {
  display: none;
}

/* Kachelraster-Verhalten der Globalnav auf allen CMS-Seiten (Projekte-
   Übersicht + Projekt-/Blog-Artikel): sie scrollt weg (absolute
   statt fixed), die Bereichsleiste darunter bleibt sticky stehen. */
.pf-page-article #pf-nav {
  position: absolute !important;
  top: 0;
}
/* Nav-Grundfarben sitewide auf reines Schwarz/Weiß normiert —
   der Vorlage Mischtöne (22,22,23 / 29,29,31 / 250,250,252) fliegen raus.
   Spezifität muss die @supports-Regel
   .pf-nav-milchglas.pf-kopf-dunkel #pf-nav schlagen. */
/* Dunkle Bar in JEDEM Zustand exakt #333333 — deckend und ohne
   Backdrop-Filter. Jede Transluzenz macht die Farbe vom Untergrund
   abhängig (Hero oben, weißer Streifen auf Artikelseiten), und schon
   ein vorhandener vs. fehlender Filter erzeugt beim Öffnen einen
   sichtbaren Sprung, weil er die Bar in eine eigene Compositing-
   Ebene zwingt. Deckend ist die einzige Variante, die zwischen
   eingeklappt und offen garantiert dieselben Pixel liefert.
   background/backdrop-filter direkt gesetzt, weil der Vorlage Scrim-Modus
   sonst background:none + eigenen Filter fährt. */
body.pf-nav-milchglas.pf-kopf-dunkel #pf-nav,
body.pf-nav-milchglas.pf-kopf-dunkel #pf-nav.pf-nav-flyout-offen,
body.pf-nav-milchglas.pf-kopf-dunkel #pf-nav.pf-nav-flyout-schliesst {
  --pf-leiste-background: #333333;
  --pf-leiste-backdrop-filter: none;
  background: #333333 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Die eigene transition auf der Nav ist "all" ohne Dauer, also
   wirkungslos: der Wechsel transluzent -> opakes Sheet-Grau sprang
   hart. Dauer ist dieselbe, die nav.js fürs Flyout errechnet und als
   Inline-Variable auf #pf-nav legt; vor dem ersten Öffnen greift
   der Vorgabewert. */
#pf-nav {
  transition: background-color var(--pf-nav-flyout-rate, 0.28s)
              cubic-bezier(0.4, 0, 0.6, 1);
}
/* der Vorlage Staffel-Formel für die Flyout-Links hängt an
   --pf-nav-flyout-elevated-group-count, die nirgends definiert
   ist — ohne sie ist die ganze transition-delay-calc ungültig und
   die Links erscheinen ohne Kaskade. 1 = unsere eine elevated-Spalte:
   Hauptspalte sofort, Quick-Links-Gruppe +80ms, Items je +20ms. */
#pf-nav {
  --pf-nav-flyout-elevated-group-count: 1;
}
/* Kategorie-Wechsel (change-previous/-next) — NUR Desktop: im
   Compact-Menü würden die absoluten Overlay-Regeln die Menü-Ebenen
   übereinanderlegen. */
@media (min-width: 834px) {
  /* Alte Fläche verschwindet sofort — sonst kollabiert sie sichtbar
     auf 0, während die neue von der alten Höhe weiterfährt. */
  #pf-nav .pf-nav-punkt.pf-flyout-change-prev .pf-nav-unterflaeche {
    transition: none !important;
    visibility: hidden !important;
  }
  /* Wechsel: neue Fläche sofort sichtbar und NUR die Höhe fährt —
     die animating-Transition der Vorlage hält visibility per
     step-end bis zum Ende auf hidden (ergibt den „zu"-Frame) und
     verzögert die Höhe um 0.12s. */
  #pf-nav .pf-nav-punkt.pf-flyout-change-next .pf-nav-unterflaeche {
    visibility: visible !important;
    transition: height var(--pf-nav-flyout-rate) cubic-bezier(0.4, 0, 0.6, 1) !important;
  }
  /* Die neuen Texte beim Wechsel dezent einfaden (ohne Y-Slide) —
     auch die Spaltentitel (Quick Links), sonst sliden sie bei jedem
     Wechsel erneut von oben rein. */
  #pf-nav .pf-nav-punkt.pf-flyout-change-next .pf-nav-spalteneintrag,
  #pf-nav .pf-nav-punkt.pf-flyout-change-next .pf-nav-spalteneintrag-gross,
  #pf-nav .pf-nav-punkt.pf-flyout-change-next .pf-nav-spaltentitel {
    opacity: 1;
    transform: none !important;
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.6, 1) 0.06s !important;
  }
}
/* Flyout-Expand in der Farbe der eingeklappten Bar: die geöffnete
   Nav (pf-nav-flaeche/-unterflaeche) zieht die opened-Variablen
   (#fafafc hell / #161617 dunkel) — auf grauen Seiten expandierte
   sie damit falsch und blitzte beim Schließen weiß, weil die
   Submenu-BASIS (zu-Zustand) die helle Variable nutzt und die
   background-Transition dorthin zurückläuft. Variablen AND direkte
   !important-Farbe: damit ist die Fläche in jedem Zustand #333333
   und keine Transition kann eine andere Farbe anfahren. */
body.pf-kopf-dunkel #pf-nav {
  --pf-nav-background-opened: #333333;
  --pf-nav-background-opened-dark: #333333;
}
body.pf-kopf-dunkel #pf-nav .pf-nav-unterflaeche,
body.pf-kopf-dunkel #pf-nav.pf-nav-flyout-offen .pf-nav-flaeche {
  background: #333333 !important;
}
/* der Vorlage CSS schaltet die Bar bei offenem UND schließendem Flyout
   auf background:none (die Flyout-Fläche übernimmt die Farbe) —
   während die Fläche zuklappt, scheint bei uns sonst kurz die
   weiße Seite durch die transparente Bar. */
body.pf-kopf-dunkel #pf-nav.pf-nav-flyout-offen,
body.pf-kopf-dunkel #pf-nav.pf-nav-flyout-schliesst {
  background: #333333 !important;
}
body.pf-nav-milchglas:not(.pf-kopf-dunkel) #pf-nav {
  --pf-leiste-background: rgba(255, 255, 255, 0.8);
}
/* Der Scrim-Layer (body::before) hinter der absoluten Nav: bei
   dark-Nav über hellem Content (CMS-Seiten) muss er weiß sein —
   80% Schwarz über Weiß ergibt der Vorlage Kachelraster-Anthrazit (#333);
   über dunklem Scrim würde die Nav zu reinem Schwarz mischen.
   Überall sonst ebenfalls auf reines Schwarz/Weiß normiert. */
body.pf-nav-milchglas.pf-kopf-dunkel.pf-page-article::before {
  background: #fff !important;
  /* Mit der absoluten Nav wegscrollen: als fixed klebte der weiße
     44px-Streifen dauerhaft am Viewport und schob sich beim
     Scrollen sichtbar über/hinter die sticky Bar („buggt hoch"). */
  position: absolute !important;
}
body.pf-nav-milchglas.pf-kopf-dunkel:not(.pf-page-article)::before {
  /* Durchsichtig statt schwarz: Der Layer liegt zwischen Nav und
     Hero — gefüllt würde der Backdrop-Blur nur ihn sampeln und
     Content könnte nie durchschimmern. */
  background: transparent !important;
}
body.pf-nav-milchglas:not(.pf-kopf-dunkel)::before {
  background: #fff !important;
}
/* Kein Artikel-Einzug unter der Bar — das Feed-Grau beginnt wie im
   Kachelraster direkt an der Bar-Unterkante. */
.pf-page-projekte .main {
  padding-top: 0 !important;
}

/* Footer auf dieselbe Fluchtlinie wie der übrige Content — der Vorlage
   Footer bringt ein eigenes Maß mit (980px + 16px Innenabstand). */
#pf-fuss .pf-fuss-flaeche {
  width: 980px;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
@media only screen and (max-width: 1068px) {
  #pf-fuss .pf-fuss-flaeche { width: 692px; }
}
@media only screen and (max-width: 734px) {
  #pf-fuss .pf-fuss-flaeche { width: 87.5%; }
}
/* Chevron des Footer-Akkordeons: dreht beim Aufklappen nach oben.
   (die Vorlage zeichnet ihn aus seiner Icon-Font, die wir nicht ausliefern
   — hier ein eigenes SVG.) */
#pf-fuss .pf-fuss-spalte-zeichen svg {
  width: 11px;
  height: 7px;
  display: block;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.6, 1);
}
#pf-fuss .pf-fuss-spalte-offen .pf-fuss-spalte-zeichen svg {
  transform: rotate(180deg);
}
/* Fußnoten-Nummern auf die Kante statt in den Listeneinzug. */
#pf-fuss .pf-fuss-kleingedrucktes ol {
  padding-inline-start: 1.1em;
  margin-inline-start: -1.1em;
}

/* Nav-Container an das Content-Maß des jeweiligen Breakpoints
   koppeln (Content + 2×22px Nav-Padding). Sonst spannt die Nav
   unterhalb 1069px ihre volle Breite, während der Content auf
   der Vorlage 692er- bzw. 87.5%-Maß sitzt — Logo und Icons stehen dann
   deutlich außerhalb der Content-Kante. */
/* Desktop-Nav mit 22px-Innenpadding: Content-Maß + 44.
   Die Flyout-Flächen tragen ihren eigenen Container (der Vorlage 1024) —
   ohne dieselbe Begrenzung stehen ihre Spalten weiter außen als die
   Nav-Items darüber. */
@media only screen and (min-width: 834px) and (max-width: 1068px) {
  #pf-nav .pf-nav-flaeche,
  #pf-nav .pf-nav-unterflaeche-inhalt {
    max-width: 736px;
  }
}
/* Compact-Nav (Burger, ≤833): die Vorlage nullt hier das Nav-Padding, der
   Content trägt die Content-Breite selbst. Absolut positioniert —
   margin:auto zentriert nur mit beidseitigem Anker. */
@media only screen and (max-width: 833px) {
  /* WICHTIG: Im Compact trägt .pf-nav-flaeche den dunklen
     Nav-Hintergrund (Regel der Vorlage in @media max-width:833px). Die
     Breite darf hier also NICHT beschnitten werden — sonst endet
     der Balken vor dem Fensterrand. Die Items rücken stattdessen
     per Innenabstand auf die Content-Kante. */
  #pf-nav .pf-nav-flaeche {
    max-width: none !important;
    width: 100% !important;
    inset-inline: 0 !important;
    margin-inline: 0 !important;
  }
  /* Compact nutzt die -compact-SVGs mit eigener Innenluft — daher
     andere Tintenausgleiche als auf dem Desktop (dort -3px). */
  #pf-nav .pf-nav-punkt-marke .pf-nav-verweis {
    padding-inline-start: 0;
    margin-inline-start: -18px;
  }
  #pf-nav .pf-nav-burger {
    padding-inline-end: 0;
    margin-inline-end: -17px;
  }
}
@media only screen and (max-width: 734px) {
  #pf-nav .pf-nav-flaeche {
    padding-inline: 6.25% !important;
  }
}
@media only screen and (min-width: 735px) and (max-width: 833px) {
  #pf-nav .pf-nav-flaeche {
    padding-inline: calc((100% - 692px) / 2) !important;
  }
}

/* Compact: kein Curtain. Er ist ein schwarzer Vollbild-Schleier
   (rgba(0,0,0,.4), z-index 9998), der bei geöffnetem Flyout
   einblendet — auf Desktop liegt er sichtbar unter dem Flyout.
   Im Compact ist das Menü selbst formatfüllend, der Schleier also
   unsichtbar; beim Schließen verschwindet das Menü aber sofort,
   während der Curtain noch 0.32s ausfadet → dunkle Frames über der
   Seite. */
@media only screen and (max-width: 833px) {
  #pf-nav ~ .pf-nav-vorhang,
  #pf-nav-vorhang {
    display: none !important;
  }
}

/* ---------- Mobile: eine Kante für alles ----------
   Referenz ist der Vorlage Content-Maß 87.5% (zentriert, skaliert mit
   der Breite). Ohne das laufen mobil drei Formeln nebeneinander:
   Bar 22px-Padding, Textspalte 87.5%, breite Blöcke 320px fix. */
@media only screen and (max-width: 734px) {
  .pf-nrbar-content,
  .pf-nr-tray-inner,
  .pf-suche,
  .pf-prose {
    max-width: none !important;
    width: 87.5% !important;
    padding-inline: 0 !important;
  }
  /* Breite Blöcke (Facts/Specs/Touts/wide-Headings) und Bilder im
     Artikelmaß auf dieselbe Kante — fullbleed bleibt randlos.
     max-width mit zurücksetzen: der Vorlage Artikel-CSS deckelt die
     Spalten mobil zusätzlich auf feste Maße (u. a. 366px). */
  /* Erst die Komponenten-Wrapper entdeckeln (die Vorlage gibt ihnen mobil
     feste Maße wie 414px und zentriert sie), dann die Inhalte darin
     auf die Content-Breite setzen. */
  .pf-page-article .article > .pf-spalte,
  .pf-page-article .pf-artikelkopf > .pf-spalte,
  .pf-page-article .pf-fliesstext,
  .pf-page-article .image,
  .pf-page-article .category,
  .pf-page-article .pf-artikeltitel,
  .pf-page-article .pf-artikel-unterzeile {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }
  .pf-page-article .pf-bild-gross:not(.pf-bild-randlos) > .pf-spalte-inhalt,
  .pf-page-article .pf-fliesstext > .pf-spalte-inhalt,
  .pf-page-article .category > .pf-spalte-inhalt,
  .pf-page-article .pf-artikeltitel > .pf-spalte-inhalt,
  .pf-page-article .pf-artikel-unterzeile > .pf-spalte-inhalt {
    width: 87.5% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  /* Deren Innentexte sitzen dann direkt auf der Kante. */
  /* Nur die Innentexte — NICHT die component-content-Hüllen, die
     oben schon auf 87.5% stehen (sonst zieht width:100% sie wieder
     auf volle Breite und der Untertitel ragt links heraus). */
  .pf-page-article .pf-fliesstext-absatz,
  .pf-page-article .pf-fliesstext-titel,
  .pf-page-article .pf-augenbraue,
  .pf-page-article .pf-artikel-schlagzeile {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
  }
}

/* ---------- Bereichsleiste (Projekte-Übersicht) ----------
   Nachbau der Kachelraster-Localnav: sitzt im Fluss direkt unter der
   Globalnav und bleibt beim Scrollen per position:sticky allein
   oben stehen — mit dem Standard-Bar-Blur der Homepage-Globalnav.
   Werte vom Live-DOM: Höhe 52px, z-index 9997, Scrim
   rgba(255,255,255,0.7) + saturate(1.8) blur(20px). */
.pf-nrbar {
  position: sticky;
  top: 0;
  z-index: 9997;
  height: 52px;
  /* Eigener Layer gegen Safaris Sticky-/Backdrop-Zittern */
  transform: translateZ(0);
}
.pf-nrbar-bg {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
}
.pf-nrbar-content {
  position: relative;
  /* Exakt die Container-Formel der Globalnav (max 1024 + 22px
     Padding = 980 innen): so bleiben Bar und Nav-Glyphen auf JEDER
     Fensterbreite bündig — eine eigene 87.5%-Formel lief zwischen
     ~834 und 1120px auseinander. */
  width: 100%;
  max-width: 1024px;
  padding-inline: 22px;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pf-nrbar-title a {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.011em;
  color: #1d1d1f;
  text-decoration: none;
}
.pf-nrbar-menu {
  display: flex;
  align-items: center;
  gap: 24px;
}
.pf-nrbar-link {
  font-size: 12px;
  line-height: 1.33;
  font-weight: 400;
  color: #1d1d1f;
  text-decoration: none;
}
.pf-nrbar-link:hover {
  color: #06c;
}
.pf-nrbar-search {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e8e8ed;
  color: #1d1d1f;
  font-size: 12px;
  line-height: 1.33;
  font-weight: 400;
  font-family: inherit;
  padding: 5px 12px 4px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.pf-nrbar-search:hover {
  background: #dcdce1;
}
.pf-nrbar-search svg {
  width: 11px;
  height: 11px;
  flex: none;
}
@media only screen and (max-width: 734px) {
  .pf-nrbar-link {
    display: none;
  }
}
/* Keine Hover-Unterstriche in Bar, Such-Tray und Kachel-Sektionen
   (der Vorlage globale a:hover-Regel bringt sonst text-decoration mit). */
.pf-nrbar a:hover,
.pf-nr-tray a:hover,
.pf-raster a:hover,
.pf-blog a:hover,
.pf-store-karte a:hover,
.pf-store-karte a:hover *,
.pf-store-zeile a:hover,
.pf-store-zeile a:hover *,
.pf-as-wrap a:hover,
.pf-dlliste a:hover,
.pf-dlliste a:hover * {
  text-decoration: none !important;
}

/* Pill-Zustände: „Suchen Projekte" ↔ „✕ Schließen" */
.pf-nr-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pf-nr-lbl svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.pf-nr-lbl-close {
  display: none;
}
html.pf-nr-search-open .pf-nr-lbl-open {
  display: none;
}
html.pf-nr-search-open .pf-nr-lbl-close {
  display: inline-flex;
}

/* ---------- Kachelraster-Such-Tray ----------
   Werte 1:1 aus der Vorlage site.built.css: Tray klappt per max-height
   auf (0.4s cubic-bezier(.4,0,.25,1)), Formular und Quick Links
   faden mit 20px-Versatz nach (Delays 0.05s/0.2s); der Vorhang
   über der Seite ist rgba(255,255,255,.8) + saturate(180%) blur(20px). */
.pf-nr-tray {
  position: relative;
  z-index: 2;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition-property: max-height, visibility;
  transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
  transition-duration: 0.4s, 0s;
  transition-delay: 0s, 0.4s;
}
html.pf-nr-search-open .pf-nr-tray {
  max-height: 460px;
  visibility: visible;
  transition-delay: 0s, 0s;
}
.pf-nr-tray-inner {
  width: 100%;
  max-width: 1024px;
  padding-inline: 22px;
  box-sizing: border-box;
  margin: 0 auto;
}
.pf-nr-form,
.pf-nr-quicklinks {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.25, 1);
}
html.pf-nr-search-open .pf-nr-form {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}
html.pf-nr-search-open .pf-nr-quicklinks {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.pf-nr-form {
  display: flex;
  align-items: center;
  padding-top: 40px;
  font-size: 24px;
  line-height: 1.1667;
  font-weight: 600;
  letter-spacing: 0.009em;
}
.pf-nr-form-icon {
  width: 21px;
  height: 21px;
  flex: none;
  color: #86868b;
}
.pf-nr-input {
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  color: #1d1d1f;
  caret-color: #1d1d1f;
  margin-inline-start: 8px;
  width: 100%;
}
.pf-nr-input::placeholder {
  color: #86868b;
}
.pf-nr-quicklinks {
  padding: 40px 0 64px;
}
.pf-nr-ql-label {
  font-size: 12px;
  line-height: 1.33;
  font-weight: 400;
  letter-spacing: 0.066em;
  text-transform: uppercase;
  color: #6e6e73;
  margin: 0 0 20px;
}
.pf-nr-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 24px;
  row-gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-nr-item {
  font-size: 14px;
  line-height: 1.2857;
  font-weight: 600;
  letter-spacing: -0.016em;
  overflow: hidden;
}
.pf-nr-item a {
  color: #1d1d1f;
  text-decoration: none;
}
.pf-nr-item a:hover {
  color: #06c;
}
.pf-nr-item[hidden] {
  display: none;
}
@media only screen and (max-width: 734px) {
  .pf-nr-group {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    row-gap: 20px;
  }
}
#pf-nr-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  opacity: 0;
  z-index: -1;
  transition-property: opacity, z-index;
  transition-timing-function: cubic-bezier(0.4, 0, 0.25, 1);
  transition-duration: 0.4s;
}
html.pf-nr-search-open #pf-nr-curtain {
  opacity: 1;
  z-index: 9996;
}

/* ---------- Blog-Übersichtsseite (Blog-Layout) ----------
   Hero über die volle Breite, darunter ein 2up-Raster. der Vorlage
   Feed-CSS platziert Kacheln per nth-child explizit (grid-column:
   1/span 4 …) — das schlägt die Klassen, daher !important. */
@media only screen and (min-width: 735px) {
  .pf-blog-seite .pf-feld-halb { grid-column: span 6 !important; }
  .pf-blog-seite .pf-feld-aufmacher { grid-column: 1 / -1 !important; }
}
/* Auf der eigenen Seite bekommt das Lockup mehr Luft nach oben. */
.pf-blog-seite {
  padding-top: 32px;
}

/* ---------- Blog-Sektion (Blog-Modul) ---------- */
/* Content-Breite auf der Vorlage Stufen festgenagelt (980/692/87.5%) —
   einzelne Modul-MQs lassen die Breite sonst je Fenster springen. */
.pf-raster .pf-abschnitt-flaeche,
.pf-blog .pf-abschnitt-flaeche,
.pf-dlliste-sektion .pf-abschnitt-flaeche {
  width: 980px !important;
  /* die Vorlage deckelt die Breite zusätzlich per max-width (u. a. 366px
     zwischen 416 und 734px) — sonst springt der Content dort auf
     eine feste Schmalspur und steht neben der Nav-Kante. */
  max-width: none !important;
  margin-inline: auto !important;
}
@media only screen and (max-width: 1068px) {
  .pf-raster .pf-abschnitt-flaeche,
  .pf-blog .pf-abschnitt-flaeche,
  .pf-dlliste-sektion .pf-abschnitt-flaeche { width: 692px !important; }
}
@media only screen and (max-width: 734px) {
  .pf-raster .pf-abschnitt-flaeche,
  .pf-blog .pf-abschnitt-flaeche,
  .pf-dlliste-sektion .pf-abschnitt-flaeche { width: 87.5% !important; }
}
/* Text-Lockup statt der Vorlage Logo-Wortmarke (keine fremden Marken). */
.pf-blog .pf-blogmodul-kopf {
  text-align: center;
}
.pf-blog .pf-blog-lockup {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.009em;
  color: #1d1d1f;
}
.pf-blog .pf-unterzeile {
  margin-top: 10px;
}
.pf-blog .pf-blogmodul-kopf {
  margin-bottom: 48px;
}
/* Kartenhöhen wie im Original (551px Hero, 362px 3up) —
   unsere Bilder haben andere Ratios, daher hart gesetzt + cover.
   Nur ab Tablet: mobil folgt die Höhe dem 4:3-Bildformat (siehe
   Raster-Block oben), sonst werden die Kacheln übermäßig hoch. */
.pf-blog .pf-kachel-aufmacher,
.pf-blog .pf-kachel-randlos {
  overflow: hidden;
}
@media only screen and (min-width: 735px) {
  .pf-blog .pf-kachel-aufmacher {
    height: 551px !important;
  }
  .pf-blog .pf-kachel-randlos {
    /* !important: der Vorlage Modul-CSS rechnet die Höhe viewportabhängig
       und liegt sonst knapp daneben (356px statt 362px). */
    height: 362px !important;
  }
}
.pf-blog .pf-kachel-aufmacher .pf-verlaufsschicht,
.pf-blog .pf-kachel-randlos .pf-kachel-bild {
  height: 100% !important;
}
/* Bilder absolut in die Kachel gespannt — height:100%-Ketten durch
   <picture> brechen in Safari (Bild füllte nur den oberen Teil).
   inset:0 + auto-Maße statt 100%: streckt immer auf den Container,
   ohne die Prozent-Auflösung, die hier je nach Engine klemmt. */
.pf-blog .pf-kachel-aufmacher .pf-verlaufsschicht .pf-bildfeld,
.pf-blog .pf-kachel-randlos .pf-kachel-bild .pf-bildfeld {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  /* height:auto würde hier vom Bildinhalt bestimmt (Zirkelschluss
     mit dem img auf 100%) — Containerhöhe explizit durchreichen. */
  height: 100% !important;
}
.pf-blog .pf-kachel-aufmacher .pf-verlaufsschicht .pf-bildfeld-datei,
.pf-blog .pf-kachel-randlos .pf-kachel-bild .pf-bildfeld-datei {
  /* replaced (img): auto hieße intrinsische Größe — hier sind
     Prozente gegen das nun korrekt gespannte <picture> sicher */
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
}
/* die Vorlage gibt dem <picture> je Breakpoint ein festes Seitenverhältnis
   (16/9 auf Tablet, 4/5 mobil). Das schlägt die inset-Höhe, das Bild
   endet dann vor der Kachelunterkante und der Text steht im Leeren.
   Die Kachelhöhe geben wir selbst vor — Verhältnis also neutralisieren. */
.pf-blog .pf-kachel .pf-bildfeld,
.pf-blog .pf-kachel .pf-bildfeld-datei {
  aspect-ratio: auto !important;
  /* Dazu deckelt die Vorlage die Bildhöhe je Breakpoint (551/389/458px) —
     beim Hero endete das Bild dadurch vor der Kachelunterkante. */
  max-height: none !important;
  min-height: 0 !important;
}
/* Unsere Stock-Bilder bringen keinen eingebackenen Verlauf mit —
   für lesbare weiße Headlines legen wir selbst einen darüber. */
.pf-blog .pf-kachel-aufmacher .pf-verlaufsschicht {
  position: relative;
}
.pf-blog .pf-kachel-aufmacher .pf-verlaufsschicht::after,
.pf-blog .pf-kachel-randlos .pf-kachel-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.36) 66%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}
.pf-blog .pf-kachel-randlos .pf-kachel-bild {
  position: relative;
}
.pf-blog .pf-kachel-randlos .pf-kachel-bild::after {
  border-radius: inherit;
}
/* Text-Layer der Kacheln als Overlay unten im Bild —
   der Vorlage Modul positioniert das per JS-generierten Regeln;
   !important, damit keine Modul-MQ das Overlay zurück in den
   Fluss holt (Text oben bzw. unter dem Bild, Bild abgeschnitten). */
.pf-blog .pf-kachel-randlos,
.pf-blog .pf-kachel-aufmacher {
  position: relative !important;
}
.pf-blog .pf-kachel-aufmacher .pf-kachel-verlauf {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  pointer-events: none;
}
.pf-blog .pf-kachel-randlos .pf-kachel-verlauf-zweit {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  pointer-events: none;
}
.pf-blog .pf-kachel-randlos .pf-kachel-bild {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
}
.pf-blog .pf-kachel-randlos .pf-kachel-text {
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
}
.pf-blog .pf-kachel-randlos .pf-kachel-schlagzeile,
.pf-blog .pf-kachel-randlos .pf-kachel-datum {
  color: #fff;
}
.pf-blog .pf-kachel-randlos .pf-kachel-datum {
  margin-top: 8px;
}
.pf-blog .pf-kachel .pf-plakette {
  margin-bottom: 10px;
}
/* Grundform des „Alle ansehen"-Buttons — auch die liefert der Vorlage
   Bundle als CSS-in-JS, nur die Farbwerte stehen im Modul-CSS.
   Werte vom Live-DOM: 17px, 12/24/11, Radius 30. */
.pf-blog .pf-alle-knopf {
  display: inline-block;
  font-size: 17px;
  line-height: 1.2353;
  font-weight: 600;
  letter-spacing: -0.022em;
  padding: 12px 24px 11px;
  border-radius: 30px;
  cursor: pointer;
  text-decoration: none;
}

/* ============================================================
   Suchseite (vereinfachtes Such-Layout)
   ============================================================ */
.pf-page-suche .main {
  padding-top: 0 !important;
}
.pf-suche {
  width: 100%;
  max-width: 1024px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 64px 22px 96px;
}

/* Artikelkopf und Textspalte linksbündig aufs 980er-Raster —
   die Kachelraster-Vorlage zentriert die 653px-Spalte für sich, wodurch
   Eyebrow/Titel/Text neben der Fluchtlinie von Bar, Logo und
   Bildern hingen. Breite (653) bleibt, nur die Kante wandert. */
@media only screen and (min-width: 1069px) {
  .pf-page-article .article .category .pf-spalte-inhalt,
  .pf-page-article .article .pf-artikeltitel .pf-spalte-inhalt,
  .pf-page-article .article .pf-artikel-unterzeile .pf-spalte-inhalt,
  .pf-page-article .article .pf-fliesstext .pf-spalte-inhalt {
    margin-inline-start: calc((100% - 980px) / 2) !important;
    margin-inline-end: auto !important;
  }
}
/* Tablet: dieselbe Logik auf der Vorlage 692er-Content-Maß. */
@media only screen and (min-width: 735px) and (max-width: 1068px) {
  .pf-page-article .article .category .pf-spalte-inhalt,
  .pf-page-article .article .pf-artikeltitel .pf-spalte-inhalt,
  .pf-page-article .article .pf-artikel-unterzeile .pf-spalte-inhalt,
  .pf-page-article .article .pf-fliesstext .pf-spalte-inhalt {
    margin-inline-start: calc((100% - 692px) / 2) !important;
    margin-inline-end: auto !important;
  }
}
/* Suchleiste wie auf der Vorlage Suchseite: abgerundetes Feld mit
   Rahmen, Lupe links, X zum Leeren rechts. */
.pf-suche-feld {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}
.pf-suche-feld:focus-within {
  border-color: #86868b;
}
.pf-suche-feld-lupe {
  width: 17px;
  height: 17px;
  flex: none;
  color: #86868b;
}
.pf-suche-feld-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 19px;
  line-height: 1.21;
  color: #1d1d1f;
  caret-color: #1d1d1f;
}
.pf-suche-feld-input::placeholder {
  color: #86868b;
}
.pf-suche-feld-clear {
  flex: none;
  width: 17px;
  height: 17px;
  padding: 0;
  border: none;
  background: none;
  color: #86868b;
  cursor: pointer;
}
.pf-suche-feld-clear svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pf-suche-feld-clear:hover {
  color: #1d1d1f;
}
.pf-suche-meta {
  margin: 28px 0 8px;
  font-size: 14px;
  line-height: 1.43;
  color: #6e6e73;
}
.pf-suche-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-suche-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #d2d2d7;
}
/* Projekt-/Blog-Bild als abgerundetes Quadrat neben dem Treffer */
.pf-suche-bild {
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 16px;
  object-fit: cover;
  background: #f5f5f7;
}
.pf-suche-text {
  min-width: 0;
}
.pf-suche-titel {
  display: inline-block;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #06c;
  text-decoration: none;
}
.pf-suche-titel:hover {
  text-decoration: underline;
}
.pf-suche-desc {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #1d1d1f;
}
.pf-suche-pfad {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.33;
  color: #86868b;
}
.pf-suche-leer {
  margin-top: 48px;
  text-align: center;
}
.pf-suche-leer-titel {
  font-size: 24px;
  line-height: 1.17;
  font-weight: 600;
  letter-spacing: 0.009em;
  color: #1d1d1f;
  margin: 0 0 12px;
}
.pf-suche-leer-tipp {
  font-size: 14px;
  line-height: 1.5;
  color: #6e6e73;
  margin: 0;
}

/* ============================================================
   App Store: Produktseite (pf-as-*) + Übersicht (pf-store-*)
   Nachbau nach apps.apple.com — Maße dort gemessen:
   Produkt-H1 34/700 (-0.02em), Claim 17/600 gedämpft,
   Store-Regaltitel 24–34/700, Icons 64 bzw. 128 mit ~22% Radius.
   ============================================================ */
.pf-as-wrap {
  width: 980px;
  max-width: none;
  margin: 0 auto;
  padding: 56px 0 96px;
}
@media only screen and (max-width: 1068px) {
  .pf-as-wrap { width: 692px; }
}
@media only screen and (max-width: 734px) {
  .pf-as-wrap { width: 87.5%; padding: 32px 0 64px; }
}

/* --- Kopf: Icon + Name + Laden --- */
.pf-as-kopf {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-bottom: 32px;
  border-bottom: 1px solid #d2d2d7;
}
.pf-as-icon {
  width: 128px;
  height: 128px;
  flex: none;
  border-radius: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.pf-as-name {
  font-size: 34px;
  line-height: 1.176;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  margin: 0 0 4px;
}
.pf-as-claim {
  font-size: 17px;
  line-height: 1.4118;
  font-weight: 600;
  color: #86868b;
  margin: 0 0 2px;
}
.pf-as-preis {
  font-size: 14px;
  line-height: 1.4286;
  color: #86868b;
  margin: 0 0 20px;
}
.pf-as-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Eckdaten-Leiste --- */
.pf-as-leiste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid #d2d2d7;
}
.pf-as-leiste-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.pf-as-leiste-label {
  font-size: 11px;
  line-height: 1.27;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #86868b;
}
.pf-as-leiste-wert {
  font-size: 19px;
  line-height: 1.21;
  font-weight: 600;
  color: #1d1d1f;
}

/* --- Screenshots: horizontal scrollende Reihe --- */
.pf-as-shots {
  padding: 32px 0;
  border-bottom: 1px solid #d2d2d7;
}
.pf-as-shots-liste {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pf-as-shot {
  flex: 0 0 auto;
  width: 460px;
  max-width: 82%;
  scroll-snap-align: start;
}
.pf-as-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #e8e8ed;
}

/* --- Textblöcke --- */
.pf-as-block {
  padding: 32px 0;
  border-bottom: 1px solid #d2d2d7;
}
.pf-as-h2 {
  font-size: 22px;
  line-height: 1.2727;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px;
}
.pf-as-beschreibung {
  font-size: 17px;
  line-height: 1.4706;
  color: #1d1d1f;
  max-width: 42em;
}
.pf-as-beschreibung p { margin: 0 0 16px; }
.pf-as-beschreibung p:last-child { margin-bottom: 0; }
.pf-as-hls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pf-as-hl-titel {
  font-size: 17px;
  line-height: 1.4118;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 4px;
}
.pf-as-hl-copy {
  font-size: 15px;
  line-height: 1.4667;
  color: #6e6e73;
  margin: 0;
}
.pf-as-neu {
  font-size: 17px;
  line-height: 1.4706;
  color: #1d1d1f;
  margin: 0;
  max-width: 42em;
}
.pf-as-info {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.pf-as-info-zeile {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8ed;
  font-size: 15px;
  line-height: 1.4667;
}
.pf-as-info-zeile dt { color: #86868b; margin: 0; }
.pf-as-info-zeile dd { color: #1d1d1f; margin: 0; text-align: right; }
/* Die Informationstabelle schließt selbst mit einer Linie ab —
   der Rahmen der Sektion würde direkt darunter eine zweite ziehen. */
#details.pf-as-block {
  border-bottom: none;
}
.pf-as-abschluss {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: none;
  padding-top: 40px;
}
@media only screen and (max-width: 734px) {
  .pf-as-kopf { gap: 18px; }
  .pf-as-icon { width: 88px; height: 88px; border-radius: 20px; }
  .pf-as-name { font-size: 26px; }
  .pf-as-leiste { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; }
  .pf-as-hls { grid-template-columns: 1fr; gap: 20px; }
  .pf-as-info { grid-template-columns: 1fr; }
  .pf-as-shot { width: 300px; }
}

/* --- Store-Übersicht --- */
/* Grauer Grund unterhalb der Leiste wie im Feed der Projekte-Seite; der
   Footer trägt dasselbe Grau, der Verlauf ist also nahtlos. Die Karten
   drehen dafür auf Weiß, sonst verschwinden sie im Hintergrund. */
.pf-page-store .main { background: #f5f5f7; }
/* Ohne sichtbaren Seitentitel (den trägt die Bar) beginnt das erste Regal
   direkt unter der Leiste — deshalb derselbe Abstand wie im Feed der
   Projekte-Seite (.pf-raster: 52/40/32), statt der 56px der App-Seiten. */
.pf-page-store .pf-as-wrap { padding-top: 52px; padding-bottom: 0; }
/* Abstand von Regal zu Regal = 80+80 wie .pf-raster -> .pf-blogmodul
   auf der Projekte-Seite; darunter 64+64 bzw. 40+40. */
.pf-store-regal + .pf-store-regal { padding-top: 80px; }
/* margin: 0 — sonst schiebt die Browser-Vorgabe für <section> das erste
   Regal um weitere 13,6px nach unten. */
/* Gleicher Abstand ober- und unterhalb der Kacheln: der Wert steht einmal
   hier und einmal als margin-bottom des Regaltitels. Optisch differieren
   sie um ~2px, weil Ober- und Unterlänge der Schrift unterschiedlich weit
   in die Zeilenbox ragen — unter der Wahrnehmungsschwelle. */
.pf-store-regal { margin: 0; padding-bottom: 80px; }
/* Regaltitel = section-head der Projekte-Seite, ohne Trennlinie. */
.pf-store-regal-titel {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 700;
  letter-spacing: 0.004em;
  color: #1d1d1f;
  margin: 0 0 24px;
}
.pf-store-karten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pf-store-karte-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Innenabstand = Eckradius, wie bei der Vorlage Tiles: sonst drängt sich der
     Inhalt in die Rundung. Beides staffelt ab 1068px auf 24px. */
  padding: 32px;
  border-radius: 32px;
  background: #fff;
  text-decoration: none;
}
.pf-store-karte-link:hover { background: #fbfbfd; }
.pf-store-karte-eyebrow {
  font-size: 12px;
  line-height: 1.3334;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #86868b;
}
.pf-store-karte-titel {
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  color: #1d1d1f;
  margin-top: 2px;
}
.pf-store-karte-copy {
  font-size: 15px;
  line-height: 1.4667;
  color: #6e6e73;
  margin-top: 4px;
}
.pf-store-karte-bild {
  display: block;
  margin: 16px 0;
  border-radius: 16px;
  overflow: hidden;
}
.pf-store-karte-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.pf-store-karte-fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.pf-store-karte-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  flex: none;
}
.pf-store-karte-name {
  font-size: 17px;
  line-height: 1.4118;
  font-weight: 600;
  color: #1d1d1f;
  flex: 1;
}
.pf-store-karte-laden {
  font-size: 15px;
  line-height: 1.4667;
  font-weight: 600;
  color: #06c;
  background: #e8e8ed;
  border-radius: 20px;
  padding: 6px 18px;
  flex: none;
  /* Bündig mit der Unterkante des Icons — so ist der Abstand nach unten
     derselbe wie nach rechts (= Innenabstand der Karte). Mittig in der
     Zeile säße er 9px höher, weil das Icon höher ist als der Knopf. */
  align-self: flex-end;
}

/* Liste aller Apps */
.pf-store-liste { list-style: none; margin: 0; padding: 0; }
.pf-store-zeile {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #d2d2d7;
}
/* Die erste Zeile ohne oberen Innenabstand, sonst steht die Liste 80px
   unter ihrer Überschrift, die Kacheln daneben aber 64px. */
.pf-store-zeile:first-child { padding-top: 0; }
.pf-store-zeile-link {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}
.pf-store-zeile-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  flex: none;
}
.pf-store-zeile-text { min-width: 0; }
.pf-store-zeile-name {
  display: block;
  font-size: 17px;
  line-height: 1.4118;
  font-weight: 600;
  color: #1d1d1f;
}
.pf-store-zeile-claim {
  display: block;
  font-size: 15px;
  line-height: 1.4667;
  color: #6e6e73;
}
.pf-store-zeile-meta {
  display: block;
  font-size: 12px;
  line-height: 1.3334;
  color: #86868b;
  margin-top: 2px;
}
.pf-store-zeile-link:hover .pf-store-zeile-name { color: #06c; }
.pf-store-zeile-cta { flex: none; }
@media only screen and (max-width: 1068px) {
  .pf-page-store .pf-as-wrap { padding-top: 40px; }
  .pf-store-regal { padding-bottom: 64px; }
  .pf-store-regal + .pf-store-regal { padding-top: 64px; }
  .pf-store-karte-link { padding: 24px; border-radius: 24px; }
  .pf-store-regal-titel {
    font-size: 28px;
    line-height: 1.1429;
    letter-spacing: 0.007em;
    margin-bottom: 16px;
  }
}
@media only screen and (max-width: 734px) {
  .pf-page-store .pf-as-wrap { padding-top: 32px; }
  .pf-store-regal { padding-bottom: 40px; }
  .pf-store-regal + .pf-store-regal { padding-top: 40px; }
  .pf-store-regal-titel {
    font-size: 24px;
    line-height: 1.1667;
    letter-spacing: 0.009em;
    margin-bottom: 16px;
  }
  .pf-store-karten { grid-template-columns: 1fr; }
  .pf-store-zeile { gap: 12px; }
  .pf-store-zeile-icon { width: 52px; height: 52px; border-radius: 12px; }
}

/* ============================================================
   Apps: Download-Block (Artikelseite) + Download-Liste (Übersicht)
   ============================================================ */
.pf-dl-karte {
  background: #f5f5f7;
  border-radius: 18px;
  padding: 40px;
}
.pf-dl-headline {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: #1d1d1f;
  margin: 0 0 8px;
}
.pf-dl-copy {
  font-size: 19px;
  line-height: 1.4211;
  color: #6e6e73;
  margin: 0 0 24px;
  max-width: 34em;
}
.pf-dl-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.pf-dl-metas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid #d2d2d7;
  padding-top: 24px;
}
.pf-dl-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-dl-meta-wert {
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  color: #1d1d1f;
}
.pf-dl-meta-label {
  font-size: 14px;
  line-height: 1.2857;
  color: #6e6e73;
}
.pf-dl-hinweis {
  font-size: 14px;
  line-height: 1.4286;
  color: #86868b;
  margin: 20px 0 0;
}
@media only screen and (max-width: 734px) {
  .pf-dl-karte { padding: 28px 24px; }
  .pf-dl-headline { font-size: 24px; }
  .pf-dl-copy { font-size: 17px; }
  .pf-dl-metas { grid-template-columns: 1fr; gap: 16px; }
}

/* Download-Liste auf der Apps-Übersicht */
.pf-dlliste-sektion {
  background: #fff;
  padding: 80px 0 100px;
}
.pf-dlliste-head {
  font-size: 32px;
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: #1d1d1f;
  margin: 0 0 8px;
}
.pf-dlliste-intro {
  font-size: 19px;
  line-height: 1.4211;
  color: #6e6e73;
  margin: 0 0 32px;
  max-width: 34em;
}
.pf-dlliste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #d2d2d7;
}
.pf-dlliste-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid #d2d2d7;
}
.pf-dlliste-link {
  text-decoration: none;
  min-width: 0;
}
.pf-dlliste-name {
  display: block;
  font-size: 21px;
  line-height: 1.19;
  font-weight: 600;
  color: #1d1d1f;
}
.pf-dlliste-claim {
  display: block;
  font-size: 17px;
  line-height: 1.4118;
  color: #6e6e73;
  margin-top: 2px;
}
.pf-dlliste-link:hover .pf-dlliste-name {
  color: #06c;
}
.pf-dlliste-cta {
  flex: none;
}
@media only screen and (max-width: 734px) {
  .pf-dlliste-sektion { padding: 56px 0 72px; }
  .pf-dlliste-head { font-size: 24px; }
  .pf-dlliste-intro { font-size: 17px; }
  .pf-dlliste-item { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   Kleine Hilfsklassen
   ============================================================ */
.pf-visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}