/* Scroll-Reveal: leichter Slide von unten, weiches Ease-Out (Startseite + Projektseiten) */
:root {
  --ppg-reveal-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ppg-reveal-duration: 0.78s;
  --ppg-reveal-fade-duration: 0.18s;
  --ppg-reveal-shift: 1.35rem;
  /* Erster Viewport auf Projektseiten: länger und weicher */
  --ppg-entrance-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ppg-entrance-duration: 1.12s;
  --ppg-entrance-fade-duration: 0.48s;
  --ppg-entrance-shift: 2.15rem;
  /* Text (Hero-Meta + typische Text-Blöcke): schnelleres Einblenden */
  --ppg-entrance-text-duration: 0.4s;
  --ppg-entrance-text-fade-duration: 0.14s;
  --ppg-entrance-text-shift: 0.85rem;
  /* Einheitliche Typo-Stufen */
  --ppg-type-small: 0.8125rem; /* z. B. Impressum-Label, Kunde */
  --ppg-type-body: 0.936rem;   /* Standard-Fliesstext */
  --ppg-type-body-fw: 500;
}

.ppg-section {
  margin: clamp(2.5rem, 6vw, 5rem) 0;
  padding-inline: var(--py-page-pad, clamp(1.25rem, 6vw, 5rem));
  padding-bottom: 150px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  scroll-margin-top: 2rem;
}

/*
 * ── Grid-Struktur ────────────────────────────────────────────────────────
 * .ppg-grid  = vertikaler Stack der Zeilen-Container
 * .ppg-row   = eine Zeile mit bis zu 3 Kacheln;
 *              grid-template-columns wird via --ppg-cols (PHP) gesetzt,
 *              z. B. "3fr 5fr 5fr" für klein+groß+groß.
 *              Keine Normalisierung auf 12 — die fr-Werte spiegeln direkt
 *              die gewählten Größen wider (s=3, m=4, l=5).
 */
.ppg-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5.5vw, 4.5rem);
}

.ppg-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(3.5rem, 2.4vw, 4.5rem);
  column-gap: clamp(1.1rem, 2.4vw, 2.2rem);
  align-items: start;
}

/* Solo-Zeile: align-items bereits im Basis-Stil gesetzt */
.ppg-row--solo {}

/* Kacheln haben kein eigenes grid-column mehr — die Breite kommt
   ausschließlich von --ppg-cols der Zeile. */
.ppg-item {
  min-width: 0;
  position: relative;
}

/* ── Größen-Klassen: steuern das Seitenverhältnis des Thumbnails ──────── */
.ppg-item--xs .ppg-thumb { aspect-ratio: 2 / 3; }
.ppg-item--s .ppg-thumb  { aspect-ratio: 3 / 4; }
.ppg-item--m .ppg-thumb  { aspect-ratio: 4 / 5; }
.ppg-item--l .ppg-thumb  { aspect-ratio: 1 / 1.2; }

/* Rückwärtskompatibilität (werden von PHP nicht mehr ausgegeben) */
.ppg-item--feature  { /* legacy */ }
.ppg-item--standard { /* legacy */ }

.ppg-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: default;
}

/* Mini-Lift nur über dem Thumbnail, nicht bei Hover über der Meta-Zeile */
.ppg-link .ppg-thumb {
  cursor: pointer;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppg-link .ppg-thumb:hover,
.ppg-link:focus-visible .ppg-thumb {
  transform: translateY(-4px);
}

/* Nur Anzeige: gleiches Layout wie Link-Kachel, ohne Klick / ohne Hover-Lift */
.ppg-static-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: default;
}

.ppg-thumb {
  background: #f2f2f2;
  aspect-ratio: 4 / 5; /* Fallback für m; überschrieben durch ppg-item--s/l */
  overflow: hidden;
}

.ppg-thumb-image,
.ppg-thumb-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ppg-thumb-placeholder {
  background: #1f5fff;
}

/* Wendekachel: gleiche Flächenfarbe wie Rückseite (sichtbar bei transparentem Thumbnail / ohne Bild) */
.ppg-thumb--flip .ppg-thumb-placeholder {
  background: transparent;
}

.ppg-meta {
  margin-top: calc(0.55rem + 16px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.38rem;
}

.ppg-title {
  margin: 0 0 0.55rem;
  font-size: var(--ppg-type-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--py-ink, #0a0a0a);
}

.ppg-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  width: 100%;
  margin: 0 0 0.55rem;
}

.ppg-title-row .ppg-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.ppg-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  flex-shrink: 0;
  font-size: var(--ppg-type-body);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--py-ink, #0a0a0a);
}

.ppg-link-cta__icon {
  display: block;
  flex-shrink: 0;
  color: inherit;
}

.ppg-subtitle {
  margin: 0;
  font-size: var(--ppg-type-body);
  letter-spacing: 0.04em;
  opacity: 0.82;
  text-align: left;
  color: var(--py-ink, #0a0a0a);
}

.ppg-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.34rem 0.42rem;
  margin-top: 0.35rem;
}

.ppg-category-pill {
  display: inline-flex;
  align-items: center;
  background: var(--py-ink, #0a0a0a);
  color: #fff;
  border-radius: 999px;
  padding: 0.36rem 0.78rem;
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Eine Zeile Filter-Pillen oberhalb des Rasters (Startseite) */
.ppg-project-filters {
  width: 100%;
  max-width: 100%;
  margin: 0 0 calc(1.1rem + 20px);
  padding: 0;
}

.ppg-project-filters__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem 0.45rem;
}

.ppg-filter-pill {
  margin: 0;
  appearance: none;
  box-sizing: border-box;
  border: 1px solid rgba(10, 10, 10, 0.2);
  background: transparent;
  color: rgba(10, 10, 10, 0.42);
  border-radius: 999px;
  padding: 0.36rem 0.78rem;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.ppg-filter-pill:hover {
  color: rgba(10, 10, 10, 0.62);
  border-color: rgba(10, 10, 10, 0.32);
}

.ppg-filter-pill:focus-visible {
  outline: 2px solid var(--py-ink, #0a0a0a);
  outline-offset: 2px;
}

.ppg-filter-pill.is-active {
  background-color: var(--py-ink, #0a0a0a);
  color: #fff;
  border-color: var(--py-ink, #0a0a0a);
}

.ppg-item--filter-hidden {
  display: none !important;
}

/* ── Filter-Modus: Kacheln fließen in einem flachen 12-Spalten-Raster ────
   Wenn eine Kategorie aktiv ist, werden .ppg-row-Wrapper durch display:contents
   aufgelöst. Die Kacheln packen sich dann lückenlos von links nach rechts,
   ohne leere Spaltenspuren aus dem Zeilenraster zu hinterlassen.         */
.ppg-grid.ppg-grid--filtered {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1.1rem, 2.4vw, 2.2rem);
  row-gap: clamp(2.5rem, 5.5vw, 4.5rem);
  align-items: start;
}
.ppg-grid--filtered .ppg-row {
  display: contents;
}
/* Explizite grid-column / grid-row werden per JS gesetzt (normalisiert auf 12 Sp.).
   Kein statisches span hier, damit 3×L = je 4fr (relativ), nicht 3×5fr > 12. */

.ppg-item {
  opacity: 0;
  transform: translate3d(0, var(--ppg-reveal-shift), 0);
  transition:
    opacity var(--ppg-reveal-fade-duration) var(--ppg-reveal-ease),
    transform var(--ppg-reveal-duration) var(--ppg-reveal-ease);
  will-change: transform, opacity;
}

.ppg-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Projektseiten: direkte Blöcke im Inhalt — gleicher Slide wie Startseiten-Raster */
body.ppg-project-case .ppg-project-body .wp-block-post-content > .ppg-case-reveal {
  opacity: 0;
  transform: translate3d(0, var(--ppg-reveal-shift), 0);
  transition:
    opacity var(--ppg-reveal-fade-duration) var(--ppg-reveal-ease),
    transform var(--ppg-reveal-duration) var(--ppg-reveal-ease);
  will-change: transform, opacity;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content > .ppg-case-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*
 * Erster Viewport: Startzustand ohne transition (sonst würde vom sichtbaren Layout nach unten animiert).
 * Erst .ppg-first-view-reveal--armed erlaubt den Übergang zu .is-visible (nur nach oben einblenden).
 */
body.ppg-project-case .ppg-first-view-reveal {
  opacity: 0;
  transform: translate3d(0, var(--ppg-entrance-shift), 0);
  transition: none;
  will-change: auto;
}

body.ppg-project-case .ppg-first-view-reveal.ppg-first-view-reveal--armed {
  transition:
    opacity var(--ppg-entrance-fade-duration) var(--ppg-entrance-ease),
    transform var(--ppg-entrance-duration) var(--ppg-entrance-ease);
  will-change: transform, opacity;
}

body.ppg-project-case .ppg-first-view-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Nur im ausgeblendeten Zustand — sonst überschreibt dies den Endzustand von .is-visible (keine sichtbare Animation). */
body.ppg-project-case .ppg-first-view-reveal.ppg-first-view-reveal--text:not(.is-visible) {
  transform: translate3d(0, var(--ppg-entrance-text-shift), 0);
}

body.ppg-project-case .ppg-first-view-reveal.ppg-first-view-reveal--text.ppg-first-view-reveal--armed {
  transition:
    opacity var(--ppg-entrance-text-fade-duration) var(--ppg-entrance-ease),
    transform var(--ppg-entrance-text-duration) var(--ppg-entrance-ease);
}

@media (prefers-reduced-motion: reduce) {
  .ppg-item,
  .ppg-item.is-visible,
  body.ppg-project-case .ppg-project-body .wp-block-post-content > .ppg-case-reveal,
  body.ppg-project-case .ppg-project-body .wp-block-post-content > .ppg-case-reveal.is-visible,
  body.ppg-project-case .ppg-first-view-reveal,
  body.ppg-project-case .ppg-first-view-reveal.ppg-first-view-reveal--text,
  body.ppg-project-case .ppg-first-view-reveal.ppg-first-view-reveal--armed,
  body.ppg-project-case .ppg-first-view-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .ppg-project-hero__media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Projekt-Karten: keine Hover-/Fokus-Linie (global .home a::after vom Contact-Plugin) */
.home .ppg-link::after,
.home .ppg-static-card::after {
  display: none !important;
  content: none !important;
}

.home .ppg-link:hover::after,
.home .ppg-link:focus-visible::after,
.home .ppg-static-card:hover::after,
.home .ppg-static-card:focus-visible::after {
  display: none !important;
  content: none !important;
}

/* Hero-Untertitel & Lead-Highlights: Crimson Pro Italic (wie portfolio-contact-form .py-subtitle) */
@font-face {
  font-family: "CrimsonProCustom";
  src: url("/wp-content/uploads/fonts/CrimsonPro-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Headline-Italic: Gambetta (mehrere Gewichte fuer saubere Interpolation) */
@font-face {
  font-family: "GambettaItalic";
  src: url("/wp-content/uploads/fonts/Gambetta-LightItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "GambettaItalic";
  src: url("/wp-content/uploads/fonts/Gambetta-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GambettaItalic";
  src: url("/wp-content/uploads/fonts/Gambetta-MediumItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "GambettaItalic";
  src: url("/wp-content/uploads/fonts/Gambetta-SemiboldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "GambettaItalic";
  src: url("/wp-content/uploads/fonts/Gambetta-BoldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

/* Cursor „i“: Crimson Pro Medium Italic (Datei wie andere Fonts unter /wp-content/uploads/fonts/) */
@font-face {
  font-family: "CrimsonPro-MediumItalic";
  src: url("/wp-content/uploads/fonts/CrimsonPro-MediumItalic.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Custom cursor (nur Maus / feiner Zeiger) — nur über Thumbnail und „mehr sehen“, nicht über übrige Meta-Zeilen */
@media (pointer: fine) {
  body.ppg-cursor-ready .ppg-item--flip .ppg-flip,
  body.ppg-cursor-ready .ppg-item:not(.ppg-item--flip) .ppg-link .ppg-thumb {
    cursor: none;
  }
}

.ppg-custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--ppg-cursor-bg, var(--py-ink, #0a0a0a));
  color: var(--ppg-cursor-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 100000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition: opacity 0.14s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform, opacity;
  box-sizing: border-box;
  padding: 8px;
}

.ppg-custom-cursor.is-square {
  border-radius: 4px;
}

/* Wendekachel: mini schwarzer Kreis mit „i“ in Crimson Pro Medium Italic */
.ppg-custom-cursor--info {
  width: 26px;
  height: 26px;
  padding: 0;
  min-width: 26px;
}

.ppg-custom-cursor--info .ppg-custom-cursor__label {
  font-family: "CrimsonPro-MediumItalic", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}

.ppg-custom-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Kreis-Übergang: gleiche Position wie Overlay, ohne Ausblend-Animation (sonst wirkt es wie ein Sprung). */
.ppg-custom-cursor.ppg-custom-cursor--handoff {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.ppg-custom-cursor__label {
  display: block;
  font-size: 8.5px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  max-width: 58px;
  margin: 0;
}

.ppg-pt-overlay-circle {
  box-sizing: border-box;
  backface-visibility: hidden;
}

/* Wendekachel: nur Thumbnail dreht; Titel/Meta bleiben fest */
.ppg-item--flip .ppg-flip-stack {
  display: block;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ppg-item--flip .ppg-flip-stack:hover {
  transform: translateY(-4px);
}

.ppg-item--flip .ppg-flip {
  perspective: 1200px;
  cursor: pointer;
  outline: none;
  display: block;
}

.ppg-item--flip .ppg-flip:focus-visible {
  outline: 2px solid var(--py-ink, #0a0a0a);
  outline-offset: 4px;
}

.ppg-item--flip .ppg-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ppg-item--flip .ppg-flip.is-flipped .ppg-flip-inner {
  transform: rotateY(180deg);
}

.ppg-item--flip .ppg-flip-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ppg-item--flip .ppg-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* Hintergrund- und Textfarbe pro Projekt (inline style) */
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.ppg-item--flip .ppg-flip-back-inner {
  padding: clamp(1rem, 4vw, 1.75rem);
  max-height: 100%;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.ppg-item--flip .ppg-flip-back-content {
  width: 100%;
  text-align: left;
  font-size: clamp(0.936rem, 1.8vw, 1.14rem);
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: none;
}

.ppg-item--flip .ppg-flip-back-content p {
  margin: 0 0 0.65em;
}

.ppg-item--flip .ppg-flip-back-content p:last-child {
  margin-bottom: 0;
}

.ppg-item--flip .ppg-flip-back-content ul,
.ppg-item--flip .ppg-flip-back-content ol {
  margin: 0 0 0.65em;
  padding-left: 1.15em;
}

.ppg-item--flip .ppg-flip-back-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.ppg-item--flip .ppg-flip-back-placeholder {
  margin: 0;
  opacity: 0.55;
}

.ppg-item--flip .ppg-thumb {
  transform: translateZ(0.1px);
}

@media (prefers-reduced-motion: reduce) {
  .ppg-item--flip .ppg-flip-inner {
    transition-duration: 0.01ms;
  }
}

/* Telefon oben rechts (.py-top-links) bzw. doppelte Zeile: nicht anzeigen */
body.home .py-hero-section .py-top-links a[href^="tel:"] {
  display: none !important;
}

body.home .py-hero-top-meta a[href^="tel:"] {
  display: none !important;
}

/* Unter .ppg-section (z-index 30), damit Arbeiten über dem fixen Hero-Bild scrollen + ausfaden. */
.home .py-hero-section {
  position: relative;
  z-index: 0 !important;
  min-height: 100vh !important;
  background: transparent !important;
}

.home .py-hero-image {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  /* Nicht nur 100vh: nach Toolbar-Ein-/Ausblendung (iOS/Safari) kürzer als sichtbarer Bereich → unten weiß von .wp-site-blocks. inset:0 füllt den Viewport; min-height als Fallback. */
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden !important;
  background: #d9d9d9 !important;
  z-index: 2 !important;
  /* Am Seitenende: unteren Streifen ausblenden, sonst verdeckt weißes ::after den Footer (fixed bleibt). */
  clip-path: inset(0 0 var(--ppg-hero-bottom-clip, 0px) 0);
  -webkit-clip-path: inset(0 0 var(--ppg-hero-bottom-clip, 0px) 0);
  /* iOS GPU-Layer: reduziert Jank durch clip-path-Animationen auf fixed Elementen */
  will-change: clip-path;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Sonnenlicht-Fenster (SVG + Entry/Drift), Markup per frontend.js */
.home .py-hero-image .py-hero-sun-layer {
  position: absolute;
  top: -6%;
  left: -6%;
  width: 112%;
  height: 112%;
  animation:
    pyHeroSunEntry 2.6s cubic-bezier(0.16, 1, 0.3, 1) both,
    pyHeroSunDrift 26s ease-in-out 2.8s infinite;
}

.home .py-hero-image .py-hero-sun-parallax {
  width: 100%;
  height: 100%;
}

.home .py-hero-image .py-hero-sun-layer svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home .py-hero-image .py-hero-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 42%,
    rgba(255, 255, 255, 0.93) 72%,
    #ffffff 100%
  );
  pointer-events: none;
  z-index: 5;
}

@keyframes pyHeroSunEntry {
  0% {
    transform: translate(-8%, -6%) rotate(-2deg);
    opacity: 0;
  }
  22% {
    opacity: 0.75;
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 1;
  }
}

@keyframes pyHeroSunDrift {
  0% {
    transform: translate(0%, 0%);
  }
  18% {
    transform: translate(0.45%, -0.28%);
  }
  38% {
    transform: translate(0.8%, 0.1%);
  }
  55% {
    transform: translate(0.6%, 0.45%);
  }
  75% {
    transform: translate(0.2%, 0.3%);
  }
  90% {
    transform: translate(-0.1%, 0.05%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .py-hero-image .py-hero-sun-layer {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/*
 * Mobil Hochformat: statisches Portrait-JPEG (--ppg-hero-mobile-static, PHP auf Startseite).
 * Desktop: unverändert SVG-Sonne + separates Portrait. Rückbau: MOBILE_HERO_REVERT_STATE.txt
 */
@media (max-width: 900px) and (orientation: portrait) {
  /*
   * Voller Viewport, 100svh (nicht dvh): Höhe springt nicht mit der Adressleiste → wirkt „fixed“.
   * position: fixed kommt von der Basisregel .home .py-hero-image
   */
  .home .py-hero-image {
    position: fixed !important;
    overflow: hidden !important;
    isolation: isolate;
    inset: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    height: 100svh !important;
    min-height: 100svh !important;
    max-height: none !important;
    will-change: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #ffffff !important;
    background-image: var(--ppg-hero-mobile-static, none) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
  }

  .home .py-hero-image::after {
    transition: opacity 560ms cubic-bezier(0.33, 1, 0.32, 1) !important;
  }

  /* Mobile: PNG-Layer sichtbar, bleibt statisch (kein Intro-Move) */
  .home .py-hero-person {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: translate3d(0, 0, 0) !important;
    transition: opacity 560ms cubic-bezier(0.33, 1, 0.32, 1) !important;
    will-change: auto !important;
  }

  .home .py-hero-image .py-hero-sun-layer,
  .home .py-hero-image .py-hero-fade-bottom {
    display: none !important;
  }

}

/* Nur Transform: Opacity + SVG-Blur flackert mit fixem Portrait auf WebKit-Mobile. */
@keyframes pyHeroSunEntryMobile {
  0% {
    transform: translate(0%, 9%) rotate(-0.4deg);
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
  }
}

@keyframes pyHeroSunDriftMobile {
  0% {
    transform: translate(0%, 0%);
  }
  20% {
    transform: translate(0.1%, 0.14%);
  }
  40% {
    transform: translate(0.12%, 0.04%);
  }
  58% {
    transform: translate(0.14%, 0.1%);
  }
  78% {
    transform: translate(0.05%, 0.08%);
  }
  92% {
    transform: translate(-0.03%, 0.02%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

@media (max-width: 900px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .home .py-hero-image .py-hero-sun-layer {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .home .py-hero-image .py-hero-sun-layer svg {
    transform: scale(1.378);
    transform-origin: 0% 0%;
  }
}

/* WebKit: clip-path mit 0px kann nach Scroll/Composite hängen — Klasse setzt Clip komplett aus (frontend.js). */
.home .py-hero-image.ppg-hero-no-clip {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.home .py-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #fff;
  opacity: var(--ppg-hero-fade, 0);
  transition: opacity 120ms linear;
  pointer-events: none;
}

.home .py-hero-text {
  z-index: 45;
}

.home .py-top-links,
.home .py-corner-contact {
  z-index: 45;
}

/* Startview (erster Viewport): Name + Kontaktzeilen spuerbar groesser/dicker */
body.home .py-corner-contact,
body.home .py-corner-contact-title {
  font-size: 1.132rem !important; /* +20% von 0.943rem */
  font-weight: var(--ppg-type-body-fw) !important;
}

body.home .py-top-links a[href^="mailto:"],
body.home .py-top-links a[href^="tel:"] {
  font-size: 0.936rem !important; /* +20% von 0.78rem */
  font-weight: var(--ppg-type-body-fw) !important;
}

body.home .py-top-links a[href*="instagram.com"],
body.home .py-top-links a[href*="instagr.am"],
body.home .py-top-links a[href*="linkedin.com"] {
  font-size: 0.936rem !important;
  font-weight: var(--ppg-type-body-fw) !important;
}

body.home .py-hero-section .py-hero-text .py-subtitle {
  font-size: 1.05em !important;
  font-weight: 500 !important;
}

/* Hero-Headline: 3. Zeile (Webdesigner etc.) explizit Gambetta BoldItalic */
body.home .py-hero-section .py-hero-text .py-subtitle,
body.home .py-hero-section .py-hero-text .py-subtitle em {
  font-family: "GambettaItalic", Georgia, "Times New Roman", serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Hero-Rollen: staggered reveal (Maske + bottom-to-top + ease-out) */
body.home .py-hero-section .py-hero-text .py-subtitle {
  display: inline-flex;
  align-items: flex-start;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  line-height: 1.28 !important;
  height: 1.28em;
  min-height: 1.28em;
  position: relative;
  top: 0 !important;
  opacity: 1;
  will-change: auto;
  transition: none !important;
  transform: none !important;
  animation: none !important;
  contain: layout paint;
}

body.home .py-hero-section .py-hero-text .py-subtitle em,
body.home .py-hero-section .py-hero-text .py-subtitle * {
  line-height: inherit !important;
  display: inline-block;
  position: static !important;
  top: auto !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

body.home .py-hero-section .py-hero-buttons .py-btn,
body.home .py-hero-section .wp-block-buttons .wp-block-button__link,
body.home .py-top-links a:not([href*="instagram.com"]):not([href*="instagr.am"]):not([href*="linkedin.com"]) {
  font-size: var(--ppg-type-body) !important;
  font-weight: var(--ppg-type-body-fw) !important;
}

.home .py-hero-person {
  position: fixed !important;
  right: -4% !important;
  bottom: -190px !important;
  height: min(118vh, 1260px) !important;
  width: auto !important;
  z-index: 12 !important;
  pointer-events: none;
  opacity: calc(1 - var(--ppg-hero-fade, 0));
  transition: opacity 120ms linear;
  /* iOS: eigene GPU-Ebene verhindert Jank beim Scrollen */
  will-change: opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/*
 * Reload mit Scroll-Restore: bis JS --ppg-hero-* setzt, wäre das fixed Hero voll sichtbar.
 * Mit Scroll erkannt: kurz verstecken, erst nach ppg-hero-ready einblenden (siehe frontend.js).
 */
html.ppg-hero-needs-hide body.home:not(.ppg-hero-ready) .py-hero-image,
html.ppg-hero-needs-hide body.home:not(.ppg-hero-ready) .py-hero-person {
  visibility: hidden !important;
}

/* Kein 120ms-Übergang beim ersten Korrigieren der Fade-Werte nach Restore. */
html.ppg-hero-scroll-settling .home .py-hero-image::after,
html.ppg-hero-scroll-settling .home .py-hero-person {
  transition: none !important;
}

.ppg-section {
  position: relative;
  z-index: 30;
  isolation: isolate;
  background: transparent;
}

/* Tablet: 2 Spalten gleich breit; explizite Item-Positionen aufheben */
@media (max-width: 1100px) {
  .ppg-row {
    grid-template-columns: 1fr 1fr !important;
  }

  .ppg-row .ppg-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Solo-Zeile: 1 Spalte */
  .ppg-row--solo {
    grid-template-columns: 1fr !important;
  }

  /* Seitenverhältnisse vereinheitlichen */
  .ppg-item--xs .ppg-thumb,
  .ppg-item--s .ppg-thumb,
  .ppg-item--m .ppg-thumb,
  .ppg-item--l .ppg-thumb {
    aspect-ratio: 4 / 5;
  }

  /* Filter-Modus Tablet: 2 gleiche Spalten, JS-Positionen aufheben */
  .ppg-grid.ppg-grid--filtered {
    grid-template-columns: 1fr 1fr;
  }
  .ppg-grid--filtered .ppg-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* —— Site footer: dunkler Block, kompaktes Kontaktformular, schmale Meta-Zeile —— */
body.home .wp-site-blocks > footer.wp-block-template-part {
  display: none !important;
}

/* Hero-Links: animiertes ::after — Bridge-Zeilen ausnehmen (gleiche Animation wie .py-top-links) */
.home .py-site-footer a:not(.py-btn):not(.py-site-footer__bridge-line)::after {
  display: none;
}

/*
 * Footer-Reveal: Content-Box bleibt weiß; margin-bottom ist transparent (Footer + body-Hintergrund).
 * Fixer Footer z-index 0 unter wp-site-blocks (1). Hero-Bild bleibt fixed; unten clip-path (--ppg-hero-bottom-clip) am Seitenende.
 */
html:has(body.home) {
  overflow-x: hidden;
}

body.home {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Unter dem Content (transparente margin-bottom): wie Footer — gegen Theme-Weiß auf body. */
  background-color: var(--py-ink, #0a0a0a) !important;
  overflow-x: hidden; /* Verhindert Scrollbar, wenn .ppg-section mit --py-bleed-pull nach links gezogen wird */
  /* Basis-Abstand; auf allen Viewports gleiche Formel wie :root im Contact-Plugin */
  --py-page-pad: clamp(1.25rem, 6vw, 5rem);
  /* Notch / Home-Indikator (viewport-fit=cover im Theme empfohlen) */
  --py-inset-left: calc(var(--py-page-pad) + env(safe-area-inset-left, 0px));
  --py-inset-right: calc(var(--py-page-pad) + env(safe-area-inset-right, 0px));
  /* Logo, Hero-Text, Kontakt-Ecke erben --py-left-grid aus dem Plugin; auf der Startseite = linker Safe-Inset */
  --py-left-grid: var(--py-inset-left);
  /* Auf schmalen Screens oft kein Theme-Gutter → Zug gegen 0; groß max. 2rem */
  --py-bleed-pull: clamp(0rem, 2.5vw, 2rem);
  /* Anker #arbeiten: gleicher Wert für scroll-margin und für JS (Klick / Hash), siehe frontend.js */
  /* ~30 % weniger als zuvor (0.7 × max(6.75rem, 16vmin)) */
  --py-arbeiten-scroll-pad: calc(env(safe-area-inset-top, 0px) + max(4.725rem, 11.2vmin));
}

body.home .wp-site-blocks {
  position: relative;
  z-index: 1;
  background: #fff;
  margin-bottom: var(--py-footer-h, 620px);
  /* Footer-Höhe / Clip-Updates: Browser-Scroll-Anchoring kann sonst die Position springen lassen */
  overflow-anchor: none;
}

/*
 * Gleiche linke Kante wie Hero-Text / Logo: Theme-„Content width“ umgehen.
 * --py-bleed-pull zieht Sektionen, die in der Theme-Content-Box sitzen, weiter nach links (Hero-Text als Referenz).
 */
body.home .py-hero-section {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

body.home .ppg-section {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw - var(--py-bleed-pull, 0px));
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
  /* Anker #arbeiten / „Projekte“ (+ JS-Scroll mit gleichem Offset in frontend.js) */
  scroll-margin-top: var(--py-arbeiten-scroll-pad);
}

body.home .wp-block-shortcode:has(.ppg-section),
body.home .wp-block-html:has(.py-hero-section) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Header/Logo über Hauptinhalt (Grid erzeugt eigene Ebenen durch Transforms) */
body.home .wp-site-blocks > header,
body.home header.wp-block-template-part {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 100001 !important;
}

body.home .wp-block-site-title {
  position: fixed !important;
  z-index: 100002 !important;
}

/* Footer unter dem weißen Content-Stack; in der transparenten Margin sieht man den Footer + body.home Hintergrund. */
body.home footer.py-site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  margin-top: 0 !important;
}

/* Footer hell (weiß) für Projektseiten mit ppg-case-footer-light */

/* 3-Klassen-Selektor schlägt body.ppg-brand-footer-page.ppg-project-case (2 Klassen) */
body.ppg-brand-footer-page.ppg-project-case.ppg-case-footer-light {
  background-color: #ffffff !important;
}
body.ppg-case-footer-light .py-site-footer {
  background: #ffffff;
  --py-footer-fg: rgba(10, 10, 10, 0.88);
  --py-footer-muted: rgba(10, 10, 10, 0.48);
  --py-footer-line: rgba(10, 10, 10, 0.1);
}
/*
 * Hardcodierte weiße Unterstriche, Pfeile und Hover-Farben auf dunkel umschalten.
 * body.ppg-brand-footer-page als Präfix nötig: die weißen Regeln weiter unten in
 * der Datei nutzen diesen Selektor — gleiche Spezifizität, spätere Quellposition → sie gewinnen.
 * Mit zusätzlicher Klasse (.ppg-case-footer-light) haben unsere Overrides eine Klasse mehr
 * und gewinnen unabhängig von der Reihenfolge.
 */
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer a.py-site-footer__bridge-line::before {
  color: rgba(10, 10, 10, 0.88);
}
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer a.py-site-footer__bridge-line::after,
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain::after {
  background: rgba(10, 10, 10, 0.88);
}
/* Große Brand-Schrift (E-Mail): hardcodiertes #fff überschreiben + Hover-Farbwechsel deaktivieren */
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer .py-site-footer__brand,
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer .py-site-footer__brand:hover {
  color: rgba(10, 10, 10, 0.88);
}
/* Impressum/Legal-Links: Hover-Farbe und Focus-Outline auf dunkel */
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer .py-site-footer__legal a:hover {
  color: rgba(10, 10, 10, 0.88);
}
body.ppg-brand-footer-page.ppg-case-footer-light .py-site-footer a:focus-visible {
  outline-color: rgba(10, 10, 10, 0.45);
}

.py-site-footer {
  box-sizing: border-box;
  /* Vertikaler Maßstab: Basis +15 %, zuletzt +20 % → 1.15×1.2 (Reveal-Margin: --py-footer-h aus JS). */
  --py-footer-v: 1.38;
  /* Extra-Luft am äußeren Footer: bei großem Brand-Text sonst kaum sichtbar (nur innere Paddings skalieren wenig). */
  --py-footer-boost: max(0px, calc((var(--py-footer-v) - 1) * 4.5rem));
  padding-top: var(--py-footer-boost);
  padding-bottom: var(--py-footer-boost);
  --py-page-pad: clamp(1.25rem, 6vw, 5rem);
  --py-footer-fg: rgba(255, 255, 255, 0.92);
  --py-footer-muted: rgba(255, 255, 255, 0.52);
  --py-footer-line: rgba(255, 255, 255, 0.1);
  /* Kontaktzeilen, Copyright, Impressum — eine Zeile */
  --py-footer-meta-fs: var(--ppg-type-body);
  --py-footer-meta-ls: 0.02em;
  --py-footer-meta-fw: 300;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  margin-top: 0;
  color: var(--py-footer-fg);
  background: var(--py-ink, #0a0a0a);
  font-family: "SwitzerCustom", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  overflow-y: visible;
  display: flex !important;
  flex-direction: column;
  isolation: isolate;
}

.py-site-footer a {
  color: inherit;
  text-decoration: none;
}

.py-site-footer a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}

.py-site-footer__inner {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: calc(var(--py-footer-v) * clamp(2.25rem, 6vw, 4rem)) var(--py-page-pad)
    calc(var(--py-footer-v) * (50px + clamp(1.25rem, 3vw, 2rem)));
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--py-footer-v) * clamp(1.25rem, 3vw, 2rem));
  align-items: start;
}

/* Startseite: gleiche Kanten wie Hero/Logo (Safe Area) */
body.home .py-site-footer__inner {
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
}

/* Zwei gleich breite Spalten: letzte Zeile links (Domain) und rechts (Bridge) auf einer Baseline */
.py-site-footer__inner--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 4vw, 3rem);
  align-items: end;
}

@supports (align-items: last baseline) {
  .py-site-footer__inner--split {
    align-items: last baseline;
  }
}

.py-site-footer__col--brand {
  min-width: 0;
}

.py-site-footer__col--text {
  min-width: 0;
}

.py-site-footer__intro {
  /* Dreizeilig (Zeilenumbrüche im Text); Abstand zur Bridge-Zeile */
  margin: 0 0 1.55em;
  margin-bottom: 1lh;
  max-width: 100%;
  font-size: clamp(0.9375rem, 1.35vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--py-footer-fg);
  white-space: pre-line;
}

/* Eine Zeile, weißer Pfeil vor jedem Link */
.py-site-footer__bridge {
  margin: 0 0 clamp(1rem, 3vw, 1.75rem);
  max-width: min(42rem, 100%);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: clamp(0.65rem, 2vw, 1.1rem);
  row-gap: 0.35rem;
}

.py-site-footer__col--text .py-site-footer__bridge:last-child {
  margin-bottom: 0;
}

/* Instagram + LinkedIn als Gruppe (eine Zeile mobil; Desktop gleicher Abstand wie zwischen Bridge-Zeilen) */
.py-site-footer__bridge-social {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: clamp(0.65rem, 2vw, 1.1rem);
}

/* Wie portfolio-contact-form.php (Hero / .py-top-links): Linie fährt von links nach rechts auf */
body.home .py-site-footer a.py-site-footer__bridge-line {
  position: relative;
  display: inline-block;
  font-size: var(--ppg-type-body);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--py-footer-fg);
  text-decoration: none !important;
}

body.home .py-site-footer a.py-site-footer__bridge-line::before {
  content: "→";
  display: inline-block;
  margin-right: 0.4em;
  color: #fff;
  font-weight: 300;
  opacity: 0.95;
  pointer-events: none;
}

body.home .py-site-footer a.py-site-footer__bridge-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

body.home .py-site-footer a.py-site-footer__bridge-line:hover::after,
body.home .py-site-footer a.py-site-footer__bridge-line:focus-visible::after {
  transform-origin: left center;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  body.home .py-site-footer a.py-site-footer__bridge-line::after {
    transition-duration: 0.01ms;
  }
}

/*
 * E-Mail im Footer: niemals Pfeil (::before).
 * !important bewusst: überschreibt versehentliche .bridge-line-Klasse oder wieder eingefügte Domain-::before-Regeln.
 */
body.home .py-site-footer a[href^="mailto:"]::before,
body.home .py-site-footer a[href^="mailto:"] .py-site-footer__brand-line::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.py-site-footer__contact {
  list-style: none;
  margin: 0 0 calc(var(--py-footer-v) * clamp(2rem, 4.5vw, 3rem));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.py-site-footer__contact li {
  margin: 0;
}

.py-site-footer__contact-line {
  font-size: var(--py-footer-meta-fs);
  font-weight: var(--py-footer-meta-fw);
  letter-spacing: var(--py-footer-meta-ls);
  line-height: 1.4;
  color: var(--py-footer-muted);
  transition: color 0.2s ease;
}

.py-site-footer__contact-line:hover {
  color: rgba(255, 255, 255, 0.82);
}

.py-site-footer__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--py-page-pad);
  padding-top: calc(var(--py-footer-v) * clamp(0.5rem, 1.5vw, 0.85rem));
  padding-bottom: calc(var(--py-footer-v) * clamp(1rem, 2.5vw, 1.75rem));
  border-top: none;
  font-size: var(--py-footer-meta-fs);
  letter-spacing: var(--py-footer-meta-ls);
  font-weight: var(--py-footer-meta-fw);
  text-transform: none;
  color: var(--py-footer-muted);
  line-height: 1.4;
}

body.home .py-site-footer__sub {
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
}

.py-site-footer__copyright {
  margin: 0;
  letter-spacing: var(--py-footer-meta-ls);
  text-transform: none;
  font-weight: var(--py-footer-meta-fw);
  font-size: inherit;
}

/* Gleiche Schriftgröße wie .py-hero-section h1; linksbündig, zwei Zeilen (hallo@ / domain) */
.py-site-footer__brand {
  margin: 0;
  padding: calc(var(--py-footer-v) * clamp(0.15rem, 1vw, 0.35rem)) 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  font-size: clamp(2.18rem, 5.46vw, 4.28rem);
  font-weight: 400;
  line-height: 1.05;
  font-stretch: normal;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-decoration: none;
}

.py-site-footer__brand:hover {
  color: rgba(255, 255, 255, 0.88);
}

.py-site-footer__brand-line {
  display: block;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: inherit;
}

/* Domain-Zeile: Unterstreichungs-Animation wie Bridge (Pfeil: siehe mailto-Block oben — nie) */
body.home .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

body.home .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

body.home .py-site-footer a.py-site-footer__brand:hover .py-site-footer__brand-line--domain::after,
body.home .py-site-footer a.py-site-footer__brand:focus-visible .py-site-footer__brand-line--domain::after {
  transform-origin: left center;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  body.home .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain::after {
    transition-duration: 0.01ms;
  }
}

/* —— Kontaktformular im Footer (Dark) —— */
.py-contact-footer {
  width: 100%;
}

.py-contact-footer__eyebrow {
  margin: 0 0 1rem;
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--py-footer-muted);
}

.py-contact-footer__notice {
  margin: 0 0 0.9rem;
  padding: 0 0 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  border-bottom: 1px solid var(--py-footer-line);
}

.py-contact-footer__notice--success {
  color: rgba(160, 230, 185, 0.95);
}

.py-contact-footer__notice--error {
  color: rgba(255, 168, 168, 0.92);
}

.py-contact-form--footer {
  margin: 0;
}

.py-contact-footer__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.15rem;
}

.py-contact-footer__field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0 0 0.75rem;
}

.py-contact-footer__field--full {
  margin-bottom: 0.65rem;
}

.py-contact-footer__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--py-footer-muted);
}

.py-contact-form--footer input,
.py-contact-form--footer textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  padding: 0.28rem 0 0.42rem;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.8125rem;
  font-weight: 450;
  line-height: 1.35;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.py-contact-form--footer input::placeholder,
.py-contact-form--footer textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.py-contact-form--footer input:hover,
.py-contact-form--footer textarea:hover {
  border-bottom-color: rgba(255, 255, 255, 0.26);
}

.py-contact-form--footer input:focus,
.py-contact-form--footer textarea:focus {
  outline: none;
  border-bottom-color: rgba(255, 255, 255, 0.48);
}

.py-contact-form--footer textarea {
  resize: vertical;
  min-height: 4.25rem;
  max-height: 12rem;
}

.py-contact-footer__actions {
  margin-top: 0.15rem;
}

.py-contact-form--footer button {
  appearance: none;
  margin: 0;
  padding: 0.48rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 1px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.py-contact-form--footer button:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.48);
  color: #fff;
}

.py-site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  margin: 0;
  text-transform: none;
  letter-spacing: var(--py-footer-meta-ls);
  font-size: inherit;
  font-weight: var(--py-footer-meta-fw);
}

.py-site-footer__legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.py-site-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 520px) {
  .py-contact-footer__row {
    grid-template-columns: 1fr;
  }

  body.home .py-site-footer__sub {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  /* Obere Leiste: Safe-Area + Offset für Kontakt / Social-Links */
  body.home {
    --py-top-bar-y: calc(env(safe-area-inset-top, 0px) + 14px);
    /* Hero-CTAs: längere, weichere Ausblendung (auch bei schnellem Scroll; JS-Hysterese gegen Flattern) */
    --py-cta-wipe-dur: 0.68s;
    --py-cta-wipe-opacity-dur: 0.58s;
    --py-cta-wipe-ease: cubic-bezier(0.26, 0.88, 0.32, 1);
    --py-cta-stagger: 0.14s;
  }

  .py-site-footer__inner--split {
    grid-template-columns: 1fr;
  }

  /* Footer mobil: Fließtext ohne \n-Zeilenumbrüche; Bridge je Zeile; Copyright näher an Impressum */
  body.home .py-site-footer__intro {
    white-space: normal;
  }

  body.home .py-site-footer__bridge {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    row-gap: 0.35rem;
  }

  body.home .py-site-footer__sub {
    justify-content: flex-start;
    gap: 0.35rem 0.75rem;
  }

  .ppg-grid {
    gap: clamp(3.25rem, 10.5vw, 5rem);
  }

  /* Mobile: jede Zeile wird zur 1-Spalte; explizite Positionen aufheben */
  .ppg-row,
  .ppg-row--solo {
    grid-template-columns: 1fr !important;
  }

  .ppg-row .ppg-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Filter-Modus Mobile: 1 Spalte, JS-Positionen aufheben */
  .ppg-grid.ppg-grid--filtered {
    grid-template-columns: 1fr;
  }
  .ppg-grid--filtered .ppg-item {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .ppg-thumb,
  .ppg-item--xs .ppg-thumb,
  .ppg-item--s .ppg-thumb,
  .ppg-item--m .ppg-thumb,
  .ppg-item--l .ppg-thumb,
  .ppg-item--feature .ppg-thumb {
    aspect-ratio: 4 / 5;
  }

  .ppg-meta {
    gap: 0.28rem;
  }

  .ppg-subtitle {
    text-align: left;
  }

  body.home .ppg-section {
    padding-bottom: clamp(3.5rem, 14vw, 150px);
  }

  /*
   * Hero: volle Viewport-Höhe, Text oben (nicht vertikal zentriert) — höher im ersten Screen.
   * z-index: auto (statt 0): Sonst liegt die ganze Hero-Stacking-Context unter .ppg-section (30);
   * fixe Kinder wie .py-corner-contact-title würden nie über Projektkacheln zeichnen.
   * Hero-Bild (z-index 2) und Person (12) bleiben unter dem Raster (30); Logo/Titel darüber.
   */
  .home .py-hero-section {
    min-height: 100vh !important;
    /* Nur svh: min-height mit dvh wächst/schrumpft mit Toolbar beim Scrollen → Layout springt */
    min-height: 100svh !important;
    align-items: flex-start !important;
    z-index: auto !important;
  }

  /*
   * Hero-Typo aus einem Maßstab (.py-hero-text): H1 = 1em, Rolle = 0.7em.
   * Zusätzlich .py-subtitle em { inherit } — sonst machen Browser/Themes „em“ kleiner.
   */
  .home .py-hero-section .py-hero-text {
    font-size: clamp(2.18rem, 5.46vw, 4.28rem) !important;
    padding-right: var(--py-inset-right);
    padding-left: 0;
    box-sizing: border-box;
    max-width: min(760px, calc(100vw - var(--py-inset-left) - var(--py-inset-right))) !important;
    width: 100%;
    /* Abstand Logo (fix) → Headline: per JS ~35px (--py-hero-text-pt), Fallback ohne JS */
    padding-top: var(
      --py-hero-text-pt,
      calc(var(--py-top-bar-y) + 2.4rem + 35px)
    ) !important;
    /*
     * Kein transform: Vorfahren mit transform brechen position:fixed für Kinder
     * (fixed wirkt dann nur noch relativ zum Textblock — Buttons „kleben“ oben).
     */
    transform: none !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .home .py-hero-section .py-hero-text h1 {
    font-size: 1.1em !important;
    line-height: 1.05 !important;
    margin-bottom: 0.35rem !important;
    overflow-wrap: normal;
    word-break: normal;
  }

  /* „ich bin Yevgeniy“ nach dem Zeilenumbruch hinter „Hallo,“ in einer Zeile (JS: .py-hero-h1-line2) */
  .home .py-hero-section .py-hero-text h1 .py-hero-h1-line2 {
    white-space: nowrap;
  }

  .home .py-hero-section .py-hero-text .py-subtitle {
    font-size: 1.05em !important;
    line-height: 1.28 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Kein Browser-/Theme-„smaller“ auf innenliegendem em */
  .home .py-hero-section .py-hero-text .py-subtitle em {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* Doppelter Name: Kontaktzeile oben reicht */
  .home .wp-block-site-title {
    display: none !important;
  }

  .home header {
    padding-top: var(--py-top-bar-y) !important;
  }

  /* Telefon: keine Unterstreich-Animation (tel: wird sonst wie andere Links animiert) */
  .home a[href^="tel:"]::after {
    display: none !important;
  }

  /* Telefon/E-Mail unter der Headline (links), klein — JS: .py-hero-top-meta in .py-hero-text */
  .home .py-hero-top-meta {
    display: none !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: 52 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.22em !important;
    margin-top: 10px !important;
    margin-bottom: 0.15rem !important;
    max-width: none !important;
    width: 100% !important;
    font-size: 0.936rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1.35 !important;
    text-align: left !important;
    pointer-events: auto !important;
    box-sizing: border-box;
  }

  .home .py-hero-top-meta a {
    color: var(--py-ink, #0a0a0a) !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    text-decoration: none !important;
  }

  .home .py-hero-top-meta a::after {
    display: none !important;
  }

  /* Mobile Hero: nur obere Kontakt-Links ausblenden (CTA-Buttons bleiben sichtbar) */
  .home .py-corner-contact a[href^="mailto:"],
  .home .py-corner-contact a[href^="tel:"] {
    display: none !important;
  }

  /* Social-Zeilen aus dem Flex entfernen; Ersatz ist .py-hero-top-meta */
  .home .py-top-links a[href*="instagram.com"],
  .home .py-top-links a[href*="instagr.am"],
  .home .py-top-links a[href*="linkedin.com"] {
    display: none !important;
  }

  /*
   * Projekte/Kontakt: oft als .py-hero-buttons im Fluss unter dem Untertitel — die bisherigen Regeln galten nur .py-top-links.
   * fixed + vh = unten im Viewport (~2,5 % + Safe Area).
   */
  .home .py-hero-section .py-hero-text .py-hero-buttons,
  .home .py-hero-section .py-hero-text .wp-block-buttons,
  .home .py-hero-section .py-hero-buttons,
  .home .py-hero-section > .wp-block-buttons {
    position: fixed !important;
    top: auto !important;
    bottom: calc(2.5vh + env(safe-area-inset-bottom, 0px)) !important;
    left: var(--py-inset-left) !important;
    right: var(--py-inset-right) !important;
    z-index: 45 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0.35rem !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    box-sizing: border-box;
    overflow: visible !important;
  }

  .home .py-hero-section .py-hero-buttons .py-btn,
  .home .py-hero-section .wp-block-buttons .wp-block-button {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  /* Wipe oben → unten auf jedem Button; Staffelung beim Aus-/Einblenden */
  .home .py-hero-section .py-hero-buttons > .py-btn,
  .home .py-hero-section .wp-block-buttons > .wp-block-button {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-property: clip-path, -webkit-clip-path, opacity, transform;
    transition-duration: var(--py-cta-wipe-dur, 0.68s), var(--py-cta-wipe-dur, 0.68s), var(--py-cta-wipe-opacity-dur, 0.58s),
      var(--py-cta-wipe-dur, 0.68s);
    transition-timing-function: var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1)),
      var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1)), var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1)),
      var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1));
  }

  .home .py-hero-section .py-hero-buttons > .py-btn:nth-child(1),
  .home .py-hero-section .wp-block-buttons > .wp-block-button:nth-child(1) {
    transition-delay: var(--py-cta-stagger), var(--py-cta-stagger), calc(var(--py-cta-stagger) + 0.02s);
  }

  .home .py-hero-section .py-hero-buttons > .py-btn:nth-child(2),
  .home .py-hero-section .wp-block-buttons > .wp-block-button:nth-child(2) {
    transition-delay: 0s, 0s, 0s;
  }

  /* Hero-Buttons: runde Enden */
  .home .py-hero-section .py-hero-buttons .py-btn {
    border-radius: 999px !important;
    font-weight: var(--ppg-type-body-fw) !important;
    border: none !important;
    font-size: var(--ppg-type-body) !important;
  }

  .home .py-hero-section .py-hero-buttons .py-btn:not(.py-btn-secondary) {
    background: var(--py-ink, #0a0a0a) !important;
    color: #fff !important;
  }

  .home .py-hero-section .py-hero-buttons .py-btn.py-btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--py-ink, #0a0a0a) !important;
    border: 1.5px solid var(--py-ink, #0a0a0a) !important;
  }

  .home .py-hero-section .wp-block-buttons .wp-block-button__link {
    border-radius: 999px !important;
    font-weight: var(--ppg-type-body-fw) !important;
    border: none !important;
    font-size: var(--ppg-type-body) !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .home .py-top-links a:not([href*="instagram.com"]):not([href*="instagr.am"]):not([href*="linkedin.com"]) {
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .home .py-hero-section .wp-block-buttons .wp-block-button:first-child .wp-block-button__link {
    background: var(--py-ink, #0a0a0a) !important;
    color: #fff !important;
  }

  .home .py-hero-section .wp-block-buttons .wp-block-button:last-child .wp-block-button__link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--py-ink, #0a0a0a) !important;
    border: 1.5px solid var(--py-ink, #0a0a0a) !important;
  }

  /* Wenn CTAs in .py-hero-buttons liegen, doppelte Leiste .py-top-links ausblenden */
  .home .py-hero-section:has(.py-hero-buttons) .py-top-links,
  .home .py-hero-section:has(.wp-block-buttons) .py-top-links {
    display: none !important;
  }

  /*
   * Fallback: nur .py-top-links (ohne .py-hero-buttons im Markup).
   */
  .home .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons)) .py-top-links {
    position: fixed !important;
    top: auto !important;
    bottom: calc(2.5vh + env(safe-area-inset-bottom, 0px)) !important;
    left: var(--py-inset-left) !important;
    right: var(--py-inset-right) !important;
    z-index: 45 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0.35rem !important;
    max-width: none !important;
    width: auto !important;
    font-size: 0.943rem !important;
    line-height: 1.1 !important;
    pointer-events: auto !important;
    box-sizing: border-box;
    overflow: visible !important;
  }

  .home .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons)) .py-top-links > a {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-property: clip-path, -webkit-clip-path, opacity, transform;
    transition-duration: var(--py-cta-wipe-dur, 0.68s), var(--py-cta-wipe-dur, 0.68s), var(--py-cta-wipe-opacity-dur, 0.58s),
      var(--py-cta-wipe-dur, 0.68s);
    transition-timing-function: var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1)),
      var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1)), var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1)),
      var(--py-cta-wipe-ease, cubic-bezier(0.26, 0.88, 0.32, 1));
  }

  .home
    .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons))
    .py-top-links
    > a:nth-child(1) {
    transition-delay: var(--py-cta-stagger, 0.11s), var(--py-cta-stagger, 0.11s), calc(var(--py-cta-stagger, 0.11s) + 0.02s);
  }

  .home
    .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons))
    .py-top-links
    > a:nth-child(2) {
    transition-delay: 0s, 0s, 0s;
  }

  /* .ppg-section ≥20 % sichtbar: Leiste nicht klickbar, Wipe auf den Buttons */
  body.py-mobile-cta-scrolled-out .py-hero-section .py-hero-text .py-hero-buttons,
  body.py-mobile-cta-scrolled-out .py-hero-section .py-hero-text .wp-block-buttons,
  body.py-mobile-cta-scrolled-out .py-hero-section .py-hero-buttons,
  body.py-mobile-cta-scrolled-out .py-hero-section > .wp-block-buttons,
  body.py-mobile-cta-scrolled-out
    .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons))
    .py-top-links {
    pointer-events: none !important;
  }

  body.py-mobile-cta-scrolled-out .py-hero-section .py-hero-buttons > .py-btn,
  body.py-mobile-cta-scrolled-out .py-hero-section .wp-block-buttons > .wp-block-button,
  body.py-mobile-cta-scrolled-out
    .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons))
    .py-top-links
    > a {
    clip-path: inset(100% 0 0 0) !important;
    -webkit-clip-path: inset(100% 0 0 0) !important;
    opacity: 0 !important;
    transform: translate3d(0, 12px, 0) !important;
  }

  body.py-mobile-cta-scrolled-out .py-hero-section .py-hero-buttons > .py-btn:nth-child(1),
  body.py-mobile-cta-scrolled-out .py-hero-section .wp-block-buttons > .wp-block-button:nth-child(1),
  body.py-mobile-cta-scrolled-out
    .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons))
    .py-top-links
    > a:nth-child(1) {
    transition-delay: 0s, 0s, 0s !important;
  }

  body.py-mobile-cta-scrolled-out .py-hero-section .py-hero-buttons > .py-btn:nth-child(2),
  body.py-mobile-cta-scrolled-out .py-hero-section .wp-block-buttons > .wp-block-button:nth-child(2),
  body.py-mobile-cta-scrolled-out
    .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons))
    .py-top-links
    > a:nth-child(2) {
    transition-delay: var(--py-cta-stagger), var(--py-cta-stagger), calc(var(--py-cta-stagger) * 0.85) !important;
  }

  .home .py-top-links a:not([href*="instagram.com"]):not([href*="instagr.am"]):not([href*="linkedin.com"]) {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.35rem 0.25rem !important;
    min-height: 44px;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    text-align: center;
    font-size: 0.936rem !important;
    font-weight: 500 !important;
    border: none !important;
    background: transparent !important;
    color: var(--py-ink, #0a0a0a) !important;
  }

  /* Nur der Name fix oben; höchste Ebene. Kontakt unter Headline, über dem Foto (z-index) */
  .home .py-corner-contact {
    position: static !important;
    z-index: auto !important;
    max-width: none !important;
    font-size: 1.132rem !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
  }

  .home .py-corner-contact a {
    display: none !important;
  }

  .home .py-corner-contact-title {
    position: fixed !important;
    top: var(--py-top-bar-y) !important;
    left: var(--py-left-grid) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    max-width: min(16.5rem, calc(100vw - var(--py-inset-left) - var(--py-inset-right) - 5.5rem)) !important;
    box-sizing: border-box;
    /* Über .ppg-section (30), Header (100001) bleibt separat oben; unter Maus-Cursor (100000) nur Desktop */
    z-index: 1000100 !important;
  }

  /* Oben platziert: py-stuck würde sonst sofort ausblenden (Anchor nahe Viewport-Oberkante) */
  .home.py-stuck .py-corner-contact {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .home .py-btn {
    min-height: 44px;
    padding: 0.72rem 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /*
   * Portrait: unter Kontaktzeile (--py-hero-person-top / -h per JS), +35 % Größe, horizontal zentriert.
   */
  .home .py-hero-person {
    top: var(--py-hero-person-top, clamp(15rem, 42svh, 22rem)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    height: calc(var(--py-hero-person-h, min(58svh, 780px)) * 1.15) !important;
    max-height: none !important;
    z-index: 12 !important;
    object-position: center center !important;
    object-fit: contain !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}

/* Nach 720px-Block: noch weniger Abstand Copyright ↔ Impressum untereinander */
@media (max-width: 520px) {
  body.home .py-site-footer__sub {
    gap: 0.25rem 0.75rem;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .home .py-hero-section .py-hero-buttons > .py-btn,
  .home .py-hero-section .wp-block-buttons > .wp-block-button,
  .home .py-hero-section:not(:has(.py-hero-buttons)):not(:has(.wp-block-buttons)) .py-top-links > a {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media (max-width: 480px) {
  /* body.home = höhere Spezifität gegen Theme; em = 1em sonst oft „smaller“ (~0.75) */
  body.home .py-hero-section .py-hero-text .py-subtitle {
    font-size: 1.05em !important;
  }

  body.home .py-hero-section .py-hero-text .py-subtitle em {
    font-size: 1em !important;
  }

  .home .py-hero-section .py-hero-text {
    transform: none !important;
  }

  .home .py-corner-contact-title {
    max-width: min(17rem, calc(100vw - var(--py-inset-left) - var(--py-inset-right) - 4.5rem));
    font-size: 0.96rem;
    font-weight: 500;
  }

  .home .py-top-links a:not([href*="instagram.com"]):not([href*="instagr.am"]):not([href*="linkedin.com"]) {
    padding: 0.3rem 0.2rem !important;
  }

  .home .py-hero-person {
    top: var(--py-hero-person-top, clamp(15rem, 42svh, 22rem)) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    height: calc(var(--py-hero-person-h, min(58svh, 780px)) * 1.15) !important;
    z-index: 12 !important;
    object-position: center center !important;
    object-fit: contain !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
}

@media (min-width: 721px) {
  /* Desktop: viewport-proportionale Typo/Bild-Relation im Hero */
  body.home .py-hero-section .py-hero-text {
    font-size: clamp(2.35rem, 4.2vmin + 1rem, 5.15rem) !important;
  }
  body.home .py-hero-person {
    height: clamp(101vh, 118vh, 151vh) !important;
  }

  /* Desktop Hero: Buttons + Top-Right-Links gleich groß wie Kontaktblock */
  body.home .py-hero-section .py-hero-buttons .py-btn,
  body.home .py-hero-section .wp-block-buttons .wp-block-button__link,
  body.home .py-top-links a {
    font-size: 1.132rem !important;
    font-weight: var(--ppg-type-body-fw) !important;
  }
  body.home .py-hero-section .py-hero-buttons .py-btn,
  body.home .py-hero-section .wp-block-buttons .wp-block-button,
  body.home .py-hero-section .wp-block-buttons .wp-block-button__link {
    border-radius: 999px !important;
    overflow: hidden !important;
  }
  body.home .py-top-links a {
    font-weight: 300 !important;
  }

  /* Desktop: fixes/sticky Logo oben links auf gleiche Schriftgröße */
  body.home .py-corner-contact-title,
  body.home .wp-block-site-title,
  body.home .wp-block-site-title a {
    font-size: 1.132rem !important;
  }

  body.home .py-hero-section .py-hero-buttons .py-btn.py-btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--py-ink, #0a0a0a) !important;
    border: 1.5px solid var(--py-ink, #0a0a0a) !important;
    box-shadow: none !important;
  }

  body.home .py-hero-section .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link,
  body.home .py-hero-section .wp-block-buttons .wp-block-button:last-child:not(:only-child) .wp-block-button__link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--py-ink, #0a0a0a) !important;
    border: 1.5px solid var(--py-ink, #0a0a0a) !important;
    box-shadow: none !important;
  }
}

@media (min-width: 901px) {
  body.home .py-corner-contact {
    bottom: calc((21px + 2.5vh) * 0.88) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Impressum: schwarze Vollfläche, Logo oben links wie Startseite, unten Start-Button */
/* -------------------------------------------------------------------------- */

html:has(body.page-impressum),
html:has(body.ppg-impressum-page) {
  background: #000 !important;
}

body.page-impressum,
body.ppg-impressum-page {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #000 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  overflow-x: hidden;
  /* Gleiche Kanten wie body.home (Logo / Content) */
  --py-page-pad: clamp(1.25rem, 6vw, 5rem);
  --py-inset-left: calc(var(--py-page-pad) + env(safe-area-inset-left, 0px));
  --py-inset-right: calc(var(--py-page-pad) + env(safe-area-inset-right, 0px));
}

body.page-impressum .wp-site-blocks,
body.ppg-impressum-page .wp-site-blocks {
  background: #000 !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body.page-impressum .wp-site-blocks > main,
body.ppg-impressum-page .wp-site-blocks > main,
body.page-impressum main.wp-block-group,
body.ppg-impressum-page main.wp-block-group,
body.page-impressum article,
body.ppg-impressum-page article,
body.page-impressum .entry-content,
body.ppg-impressum-page .entry-content,
body.page-impressum .wp-block-post-content,
body.ppg-impressum-page .wp-block-post-content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: inherit !important;
}

/* Theme-Seitentitel ausblenden (eigenes h1 im Plugin) */
body.page-impressum .wp-block-post-title,
body.ppg-impressum-page .wp-block-post-title {
  display: none !important;
}

body.page-impressum .wp-site-blocks > footer.wp-block-template-part,
body.ppg-impressum-page .wp-site-blocks > footer.wp-block-template-part,
body.page-impressum footer.wp-block-template-part,
body.ppg-impressum-page footer.wp-block-template-part {
  display: none !important;
}

/* Header / Site-Titel: wie Startseite (Contact-Plugin .home) */
body.page-impressum .wp-site-blocks > header,
body.ppg-impressum-page .wp-site-blocks > header,
body.page-impressum header.wp-block-template-part,
body.ppg-impressum-page header.wp-block-template-part {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 100001 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: var(--py-inset-right) !important;
  padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
  pointer-events: none;
}

body.page-impressum header .wp-block-group,
body.ppg-impressum-page header .wp-block-group,
body.page-impressum header .wp-block-group__inner-container,
body.ppg-impressum-page header .wp-block-group__inner-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

body.page-impressum .wp-block-site-title,
body.ppg-impressum-page .wp-block-site-title {
  display: block !important;
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  left: var(--py-inset-left) !important;
  z-index: 100002 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  font-size: 0.943rem !important;
  pointer-events: auto;
}

body.page-impressum header a,
body.ppg-impressum-page header a,
body.page-impressum .wp-block-site-title a,
body.ppg-impressum-page .wp-block-site-title a {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
}

body.page-impressum .wp-block-navigation,
body.ppg-impressum-page .wp-block-navigation,
body.page-impressum .wp-block-social-links,
body.ppg-impressum-page .wp-block-social-links {
  display: none !important;
}

.ppg-impressum {
  box-sizing: border-box;
  width: 100%;
  max-width: 28rem;
  min-height: calc(100vh - env(safe-area-inset-bottom, 0px));
  min-height: calc(100dvh - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  padding: max(5rem, calc(env(safe-area-inset-top, 0px) + 4rem)) var(--py-inset-right)
    max(2.25rem, env(safe-area-inset-bottom, 0px)) var(--py-inset-left);
  font-family: "SwitzerCustom", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ppg-imp-fg: rgba(255, 255, 255, 0.88);
  --ppg-imp-muted: rgba(255, 255, 255, 0.42);
  --ppg-imp-dim: rgba(255, 255, 255, 0.58);
  color: var(--ppg-imp-fg);
  font-size: var(--ppg-type-body);
  line-height: 1.65;
  letter-spacing: -0.008em;
  font-weight: 400;
}

.ppg-impressum__main {
  flex: 1 1 auto;
}

.ppg-impressum__header {
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.ppg-impressum__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.ppg-impressum__subtitle {
  margin: 0;
  font-size: var(--ppg-type-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ppg-imp-muted);
  line-height: 1.4;
}

.ppg-impressum__body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.ppg-impressum__identity {
  margin: 0;
  color: var(--ppg-imp-fg);
  font-size: var(--ppg-type-body);
  line-height: 1.7;
}

.ppg-impressum__name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
}

.ppg-impressum__meta {
  display: grid;
  grid-template-columns: minmax(5.25rem, max-content) 1fr;
  column-gap: 1.25rem;
  row-gap: 0.85rem;
  margin: 0;
  padding: 0;
  align-items: baseline;
}

.ppg-impressum__meta dt {
  margin: 0;
  font-size: var(--ppg-type-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ppg-imp-muted);
  line-height: 1.3;
}

.ppg-impressum__meta dd {
  margin: 0;
  font-size: var(--ppg-type-body);
  color: var(--ppg-imp-dim);
  line-height: 1.5;
}

.ppg-impressum__addendum {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: var(--ppg-type-body);
  line-height: 1.6;
  color: var(--ppg-imp-muted);
}

.ppg-impressum__addendum p {
  margin: 0 0 0.65em;
}

.ppg-impressum__addendum p:last-child {
  margin-bottom: 0;
}

.ppg-impressum__link {
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 0.06em;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.ppg-impressum__link:hover {
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}

.ppg-impressum__link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
  border-bottom-color: transparent;
}

.ppg-impressum__actions {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: clamp(2.25rem, 7vh, 3.5rem);
  padding-bottom: 0.15rem;
}

.ppg-impressum__back.wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.55rem 1.2rem !important;
  box-sizing: border-box;
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: var(--ppg-type-small) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease;
}

.ppg-impressum__back.wp-block-button__link:hover {
  border-color: rgba(255, 255, 255, 0.38) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ppg-impressum__back.wp-block-button__link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Case Study: Einzelseite portfolio_project (Header wie Startseite, py-footer) */
/* -------------------------------------------------------------------------- */

html:has(body.ppg-brand-footer-page) {
  overflow-x: hidden;
}

/* UA-Styles (body margin ~8px) erzeugen sonst sichtbare Lücken links/rechts bei 100vw-Bildern */
html:has(body.ppg-project-case) {
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Horizontales Raster 1:1 wie body.home: gleiche Formeln wie im Contact-Plugin / .ppg-section.
 * Logo, Footer, Projekt-Inhalt und #arbeiten teilen sich dieselben Insets.
 */
body.ppg-brand-footer-page.ppg-project-case {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--py-ink, #0a0a0a) !important;
  overflow-x: hidden;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Weißer Content-Stack; Schrift — überschreibbar pro Projekt via wp_head */
  --ppg-case-bg: #ffffff;
  --ppg-case-fg: var(--py-ink, #0a0a0a);
  --py-page-pad: clamp(1.25rem, 6vw, 5rem);
  --py-inset-left: calc(var(--py-page-pad) + env(safe-area-inset-left, 0px));
  --py-inset-right: calc(var(--py-page-pad) + env(safe-area-inset-right, 0px));
  --py-left-grid: var(--py-inset-left);
  --py-bleed-pull: clamp(0rem, 2.5vw, 2rem);
  --py-arbeiten-scroll-pad: calc(env(safe-area-inset-top, 0px) + max(4.725rem, 11.2vmin));
}

/*
 * Theme-Root-Padding (Frost theme.json spacing.padding) schmalert .wp-site-blocks —
 * auf Projektseiten doppelt mit --py-inset-* und bricht alignfull-Breite. Hier volle Breite.
 */
body.ppg-project-case .wp-site-blocks {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
  background-color: var(--ppg-case-bg) !important;
}

/* Theme-„Content width“ umgehen — wie .wp-block-html:has(.py-hero-section) auf der Startseite */
body.ppg-project-case .wp-site-blocks > main.ppg-project-case-main,
body.ppg-project-case main.ppg-project-case-main {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

body.ppg-brand-footer-page .wp-site-blocks {
  position: relative;
  z-index: 1;
  background: #fff;
  margin-bottom: var(--py-footer-h, 620px);
  overflow-anchor: none;
}

body.ppg-brand-footer-page .wp-site-blocks > footer.wp-block-template-part {
  display: none !important;
}

/*
 * Gleicher Header-Chrome wie Startseite / Impressum: Logo links in Startseiten-Groesse (1.132rem),
 * kein Theme-Navigation-Overlay („Startseite“ etc.) — auf der Startseite sitzen die Links in .py-top-links im Hero.
 */
body.ppg-brand-footer-page .wp-site-blocks > header,
body.ppg-brand-footer-page header.wp-block-template-part {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 100001 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: var(--py-inset-right) !important;
  padding-top: max(1rem, env(safe-area-inset-top, 0px)) !important;
  pointer-events: none;
}

body.ppg-brand-footer-page header .wp-block-group,
body.ppg-brand-footer-page header .wp-block-group__inner-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}

body.ppg-brand-footer-page .wp-block-site-title {
  display: block !important;
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  left: var(--py-inset-left) !important;
  z-index: 100002 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  font-size: 1.132rem !important;
  font-family:
    "SwitzerCustom",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
  pointer-events: auto;
}

body.ppg-brand-footer-page .wp-block-site-title a {
  color: var(--py-ink, #0a0a0a) !important;
  text-decoration: none !important;
}

body.ppg-project-case .wp-block-site-title a {
  color: var(--ppg-case-fg) !important;
}

/* Zurück-Pfeil + Logo eine Zeile; Sprung zur Startseite auf die jeweilige Kachel (#post_name, Fallback #arbeiten) */
body.ppg-brand-footer-page.single-portfolio_project .ppg-site-title-with-back {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.42rem !important;
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top, 0px)) !important;
  left: var(--py-inset-left) !important;
  z-index: 100002 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}

body.ppg-brand-footer-page.single-portfolio_project .ppg-site-title-with-back .wp-block-site-title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}

/* Site-Logo: einmaliges, kurzes Hover-Feedback (nur Projektseiten) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ppg-site-logo-hover-nudge {
    0% {
      transform: translate3d(0, 0, 0);
    }
    28% {
      transform: translate3d(-5px, 0, 0);
    }
    52% {
      transform: translate3d(2px, 0, 0);
    }
    76% {
      transform: translate3d(-1px, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  body.ppg-brand-footer-page.single-portfolio_project
    .ppg-site-title-with-back:hover
    .wp-block-site-title
    a {
    animation: ppg-site-logo-hover-nudge 0.55s cubic-bezier(0.33, 1.15, 0.52, 1) both;
  }

  body.ppg-brand-footer-page.single-portfolio_project
    .ppg-site-title-with-back
    .wp-block-site-title
    a:focus-visible {
    animation: ppg-site-logo-hover-nudge 0.55s cubic-bezier(0.33, 1.15, 0.52, 1) both;
  }

  @keyframes ppg-back-arrow-hover-nudge {
    0% {
      transform: translate3d(0, 0, 0);
    }
    32% {
      transform: translate3d(-5px, 0, 0);
    }
    58% {
      transform: translate3d(2px, 0, 0);
    }
    82% {
      transform: translate3d(-1px, 0, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  body.ppg-brand-footer-page.single-portfolio_project
    .ppg-site-title-with-back:hover
    .ppg-back-to-grid-link__icon,
  body.ppg-brand-footer-page.single-portfolio_project
    .ppg-site-title-with-back:focus-within
    .ppg-back-to-grid-link__icon,
  body.ppg-brand-footer-page.single-portfolio_project
    .ppg-back-to-grid-link:hover
    .ppg-back-to-grid-link__icon,
  body.ppg-brand-footer-page.single-portfolio_project
    .ppg-back-to-grid-link:focus-visible
    .ppg-back-to-grid-link__icon {
    animation: ppg-back-arrow-hover-nudge 0.5s cubic-bezier(0.33, 1.15, 0.52, 1) both;
  }
}

body.ppg-brand-footer-page .ppg-back-to-grid-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none !important;
  border-radius: 4px;
  opacity: 0.92;
  transition: opacity 0.18s ease;
}

body.ppg-brand-footer-page .ppg-back-to-grid-link:hover,
body.ppg-brand-footer-page .ppg-back-to-grid-link:focus-visible,
body.ppg-brand-footer-page.single-portfolio_project
  .ppg-site-title-with-back:hover
  .ppg-back-to-grid-link,
body.ppg-brand-footer-page.single-portfolio_project
  .ppg-site-title-with-back:focus-within
  .ppg-back-to-grid-link {
  opacity: 1;
}

body.ppg-brand-footer-page .ppg-back-to-grid-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body.ppg-brand-footer-page .ppg-back-to-grid-link__icon {
  display: block;
  transform-origin: 50% 50%;
}

body.ppg-project-case .ppg-back-to-grid-link {
  color: var(--ppg-case-fg) !important;
}

body.ppg-brand-footer-page .wp-block-navigation,
body.ppg-brand-footer-page .wp-block-social-links {
  display: none !important;
}

body.ppg-brand-footer-page footer.py-site-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  margin-top: 0 !important;
}

body.ppg-brand-footer-page .py-site-footer__inner {
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
}

body.ppg-brand-footer-page .py-site-footer__sub {
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__bridge-line {
  position: relative;
  display: inline-block;
  font-size: var(--ppg-type-body);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--py-footer-fg);
  text-decoration: none !important;
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__bridge-line::before {
  content: "→";
  display: inline-block;
  margin-right: 0.4em;
  color: #fff;
  font-weight: 300;
  opacity: 0.95;
  pointer-events: none;
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__bridge-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__bridge-line:hover::after,
body.ppg-brand-footer-page .py-site-footer a.py-site-footer__bridge-line:focus-visible::after {
  transform-origin: left center;
  transform: scaleX(1);
}

body.ppg-brand-footer-page .py-site-footer a[href^="mailto:"]::before,
body.ppg-brand-footer-page .py-site-footer a[href^="mailto:"] .py-site-footer__brand-line::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.12em;
  width: 100%;
  height: 1px;
  background: #fff;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

body.ppg-brand-footer-page .py-site-footer a.py-site-footer__brand:hover .py-site-footer__brand-line--domain::after,
body.ppg-brand-footer-page .py-site-footer a.py-site-footer__brand:focus-visible .py-site-footer__brand-line--domain::after {
  transform-origin: left center;
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  body.ppg-brand-footer-page .py-site-footer a.py-site-footer__bridge-line::after,
  body.ppg-brand-footer-page .py-site-footer a.py-site-footer__brand .py-site-footer__brand-line--domain::after {
    transition-duration: 0.01ms;
  }
}

body.ppg-brand-footer-page .py-site-footer a:not(.py-btn):not(.py-site-footer__bridge-line)::after {
  display: none;
}

/* ─── Split-Viewport: erster Viewport = nur Projektbeschreibung (nur Desktop) ─── */
@media (min-width: 900px) {
  body.ppg-case-split-viewport .ppg-project-hero--split {
    min-height: 100svh;
    min-height: 100vh; /* Fallback für Browser ohne svh */
    position: relative;
    display: flex;
    flex-direction: column;
  }

  /* Scroll-Pfeil: zentriert am unteren Rand des Viewports */
  .ppg-project-hero__scroll-hint {
    position: absolute;
    bottom: clamp(1.5rem, 3.5vw, 2.5rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
    opacity: 0.55;
    animation: ppgScrollHintBounce 2s ease-in-out infinite;
    pointer-events: none;
  }

  .ppg-project-hero__scroll-arrow {
    width: 1.5rem;
    height: 1.5rem;
  }

  @keyframes ppgScrollHintBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(6px); }
  }
}

/* Pfeil auf Mobil/Tablet komplett ausblenden */
.ppg-project-hero__scroll-hint {
  display: none;
}
@media (min-width: 900px) {
  body.ppg-case-split-viewport .ppg-project-hero--split .ppg-project-hero__scroll-hint {
    display: flex;
  }
}

/* Abstand unter fixiertem Header */
body.ppg-project-case .ppg-project-case-main {
  padding-top: clamp(5.5rem, 14vw, 9rem);
  color: var(--ppg-case-fg);
}

/*
 * Wie body.home .py-hero-section — ohne --py-bleed-pull (nur .ppg-section / Raster).
 * Logo: left = --py-inset-left; Titel/Kategorien müssen dieselbe Basislinie nutzen.
 */
.ppg-project-hero {
  box-sizing: border-box;
  color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  position: relative;
  width: 100%;
  max-width: none;
  margin-bottom: var(--ppg-case-content-gap-desktop, 0px);
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 782px) {
  .ppg-project-hero {
    margin-bottom: var(--ppg-case-content-gap-mobile, var(--ppg-case-content-gap-desktop, 0px));
  }
}

/* Kein separates Titelbild: Abstand von der Header-Unterkante zum Einleitungstext */
.ppg-project-hero--no-media .ppg-project-hero__meta {
  padding-top: clamp(4.15rem, 8.4vw, 7.65rem);
}

.ppg-project-hero__media {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  max-height: min(92vh, 1080px);
  overflow: hidden;
  background: #e8e8e8;
  /* Leichter Slide von unten + kurzes Einblenden (wie Raster-Reveal) */
  animation: ppgHeroFadeIn 0.88s var(--ppg-reveal-ease, cubic-bezier(0.33, 1, 0.68, 1)) both;
}

@keyframes ppgHeroFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--ppg-reveal-shift) * 0.55), 0) scale(1.008);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.ppg-project-hero__img {
  display: block;
  width: 100%;
  height: min(92vh, 1080px);
  object-fit: cover;
}

.ppg-project-hero__img--placeholder {
  min-height: min(48vh, 420px);
  background: linear-gradient(135deg, #e0e0e0 0%, #f0f0f0 100%);
}

.ppg-project-hero__meta {
  box-sizing: border-box;
  width: 100%;
  max-width: min(1200px, 100%);
  margin-left: 0;
  margin-right: auto;
  padding-top: clamp(6.5rem, 13vw, 12rem);
  padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
}

.ppg-project-hero__nav {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.ppg-project-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--ppg-type-small);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  opacity: 0.55;
  transition:
    opacity 0.22s ease,
    color 0.22s ease;
}

.ppg-project-hero__back::before {
  content: "←";
  font-style: normal;
  letter-spacing: 0;
  opacity: 1;
}

.ppg-project-hero__back:hover,
.ppg-project-hero__back:focus-visible {
  opacity: 1;
  color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
}

.ppg-project-hero__back:focus-visible {
  outline: 2px solid var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  outline-offset: 3px;
  border-radius: 1px;
}

.ppg-project-hero__title {
  margin: 0 0 0.6rem;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

/*
 * Mit Lead: Projekttitel = sehr kleiner „Anker” links (wie „Arbeitsweise” im Referenzbild),
 * Lead = großer Haupttext rechts. Beide starten auf derselben y-Position.
 */
.ppg-project-hero__title--lead {
  /*
   * Absolut positioniert: sitzt im Leerraum links des eingerückten Lead-Textes.
   * Füllt exakt die durch padding-left erzeugte Freifläche in der ersten Zeile.
   */
  position: absolute;
  left: 0;
  top: 8px;
  margin: 0;
  width: clamp(6rem, 10vw, 10rem);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.ppg-project-hero__title-anchor {
  display: block;
  font-size: var(--ppg-type-small);
  font-weight: 500;
  /*
   * Optische Ausrichtung an die Cap-Height der ersten Lead-Zeile:
   * Der Lead hat line-height 1.12, also (font-size * 1.12) / 2 als Half-Leading.
   * Das kleine Label hat line-height 1.35, also eigene Half-Leading.
   * padding-top gleicht die Differenz aus damit Baseline annähernd fluchtet.
   */
  line-height: 1.35;
  padding-top: calc((clamp(1.625rem, 3.8vw, 3.25rem) * (1.12 - 1) / 2) - (var(--ppg-type-small) * (1.35 - 1) / 2));
  letter-spacing: 0.03em;
  color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  opacity: 0.75;
  text-transform: uppercase;
}

.ppg-project-hero__client {
  margin: 0 0 0.9rem;
  font-size: var(--ppg-type-body);
  font-weight: var(--ppg-type-body-fw);
  letter-spacing: 0.01em;
  color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  opacity: 0.62;
}

.ppg-project-hero__pills {
  margin-bottom: 1rem;
}

.ppg-project-hero__pills .ppg-category-pills {
  margin-top: 0;
}

.ppg-project-hero .ppg-category-pill {
  background: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  color: var(--ppg-case-bg, #ffffff);
}

.ppg-project-hero__lead-row {
  /*
   * Einrückungs-Layout: Nur die ERSTE Zeile des Lead-Textes ist eingerückt
   * (via text-indent am Lead-Element). Alle weiteren Zeilen laufen bündig
   * von links. Der Leerraum links der ersten Zeile wird vom absolut
   * positionierten Titel-Label befüllt.
   */
  position: relative;
  text-align: left;
  margin-top: clamp(0.5rem, 1.5vw, 1.25rem);
  width: 100%;
  max-width: min(80rem, 100%);
}

.ppg-project-hero__lead-row + .ppg-project-hero__client {
  margin-top: clamp(1.35rem, 3.5vw, 2.25rem);
}

.ppg-project-hero__lead-row + .ppg-project-hero__pills {
  margin-top: clamp(1.35rem, 3.5vw, 2.25rem);
}

.ppg-project-hero__lead {
  margin: 0;
  max-width: none;
  /* Groß & prägnant — wie im Referenzbild */
  font-size: clamp(1.625rem, 3.8vw, 3.25rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ppg-case-fg, var(--py-ink, #0a0a0a));
  opacity: 1;
  white-space: pre-line;
  /*
   * Nur die erste Zeile einrücken: text-indent schiebt ausschließlich Zeile 1
   * nach rechts. Alle weiteren Zeilen beginnen bündig am linken Rand.
   * Der Einzug entspricht der Breite des absolut positionierten Titel-Labels.
   */
  text-indent: clamp(7rem, 12vw, 11rem);
}

.ppg-project-hero__lead :where(p, ul, ol) {
  margin: 0 0 0.65em;
}

.ppg-project-hero__lead :where(p, ul, ol):last-child {
  margin-bottom: 0;
}

.ppg-project-hero__lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}

.ppg-project-hero__lead a:hover,
.ppg-project-hero__lead a:focus-visible {
  opacity: 0.85;
}

/* Lead-Highlights: Gambetta Italic in der großen Headline */
.ppg-project-hero__lead .ppg-intro-highlight {
  font-family: "GambettaItalic", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  /* Etwas enger als der Fließtext, aber etwas luftiger als -0.03em */
  letter-spacing: -0.02em;
  /* Serif wirkt kleiner als der Lead-Sans; leicht hochskalieren für optischen Ausgleich */
  font-size: 1em;
}

.ppg-project-hero--placeholder {
  padding: 2rem var(--py-inset-left) 2rem var(--py-inset-right);
  border: 1px dashed rgba(10, 10, 10, 0.2);
  color: rgba(10, 10, 10, 0.55);
}

/*
 * Volle Zeilenbreite bis zum Viewport; horizontaler Rhythmus nur über --py-inset-*.
 * (Kein 100vw/calc(50%-50vw): bricht, wenn Vorfahren schmaler als 100vw sind.)
 */
body.ppg-project-case .ppg-project-body {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 20px !important;
  /* Gegen theme.json Root-Padding bei .alignfull */
  padding-left: var(--py-inset-left) !important;
  padding-right: var(--py-inset-right) !important;
  color: var(--ppg-case-fg);
}

body.ppg-project-case .ppg-project-body.alignfull {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Volle Breite zwischen den Insets (nicht die ~640px der äußeren constrained-Gruppe) */
body.ppg-project-case .ppg-project-body .wp-block-post-content {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
  color: var(--ppg-case-fg);
}

body.ppg-project-case .ppg-project-body .wp-block-post-content :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content a:where(:not(.wp-element-button)) {
  color: var(--ppg-case-fg);
}

/* Spacer (Abstandshalter): optionale kleinere Höhe unter Editor-/Admin-Breakpoint (~782px). */
@media (max-width: 781px) {
  .wp-block-spacer.ppg-spacer--has-mobile {
    height: var(--ppg-spacer-mobile-height) !important;
  }
}

/*
 * Textblöcke: zentrierte Lesespalte (max. contentSize), zentriert im verfügbaren Raum.
 * Kein !important bei Breite/Margin: sonst überschreiben wir die im Editor gesetzten
 * Inline-Styles (Abmessungen, negative Margins) nach dem Speichern nicht mehr.
 */
body.ppg-project-case .ppg-project-body .wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
  max-width: var(--wp--style--global--content-size, 640px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content.is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-left: auto;
  margin-right: auto;
}

/*
 * Volle Fensterbreite: 100vw + neg. Inset-Margins (unabhängig von verschachtelter %-Breite).
 * WICHTIG: kein „margin: 0“ auf .alignfull-Bild/Cover — das hat die horizontalen Breakout-Margins
 * mit !important überschrieben und ließ Kästen an der Logo-Linie hängen.
 */
body.ppg-project-case .ppg-project-body .wp-block-post-content .alignfull {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-1 * var(--py-inset-left, 0px)) !important;
  margin-right: calc(-1 * var(--py-inset-right, 0px)) !important;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content .wp-block-group.alignfull {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* In Spalten absichtlich keine Viewport-Breite (100% = Spalte) */
body.ppg-project-case .ppg-project-body .wp-block-post-content .wp-block-column .alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Bereits ausgebrochener Container: innere .alignfull nicht erneut mit 100vw/Inset rechnen */
body.ppg-project-case .ppg-project-body .wp-block-post-content .alignfull .alignfull {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content .alignfull.wp-block-image {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-1 * var(--py-inset-left, 0px)) !important;
  margin-right: calc(-1 * var(--py-inset-right, 0px)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content .alignfull.wp-block-image img {
  width: 100% !important;
  max-width: none !important;
  display: block;
  height: auto;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content .alignfull.wp-block-cover {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-1 * var(--py-inset-left, 0px)) !important;
  margin-right: calc(-1 * var(--py-inset-right, 0px)) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content .alignfull.wp-block-image figcaption {
  box-sizing: border-box;
  padding-left: var(--py-inset-left);
  padding-right: var(--py-inset-right);
  max-width: min(1200px, 100%);
  margin-left: 0;
  margin-right: auto;
  color: var(--ppg-case-fg);
}

/* Breitflächig (alignwide): zentriert, wideSize als Maximum */
body.ppg-project-case .ppg-project-body .wp-block-post-content > .alignwide {
  max-width: var(--wp--style--global--wide-size, 1200px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Body: vertikaler Rhythmus (Block-Editor-Inhalt) */
body.ppg-project-case .ppg-project-body .wp-block-group.ppg-project-pattern-gap {
  margin-bottom: clamp(2.5rem, 5.5vw, 4.5rem);
}

body.ppg-project-case .ppg-project-body > .wp-block-post-content > * + * {
  margin-top: 0;
}

body.ppg-project-case .ppg-project-body .wp-block-post-content > * {
  margin-top: 0;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-group,
body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-columns,
body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-pullquote,
body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-quote {
  margin-bottom: clamp(2.5rem, 5.5vw, 4.5rem);
}

/* Paragraph-Abstand innerhalb der Textblöcke */
body.ppg-project-case .ppg-project-body .wp-block-post-content p {
  margin-top: 0;
  margin-bottom: 1.35em;
}

/* Headings im Body: etwas mehr Luft nach oben */
body.ppg-project-case .ppg-project-body .wp-block-post-content h2,
body.ppg-project-case .ppg-project-body .wp-block-post-content h3 {
  margin-top: 0;
  margin-bottom: 0.6em;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Figcaptions: kleine Schrift, zentriert unter Bild */
body.ppg-project-case .ppg-project-body .wp-block-post-content figcaption {
  font-size: clamp(0.75rem, 1.1vw, 0.875rem);
  letter-spacing: 0.02em;
  opacity: 0.6;
  text-align: center;
  margin-top: 0.65rem;
}

/* Bild-Reihen (2/3 Spalten): immer volle Inhaltsbreite — nicht auf contentSize einengen */
body.ppg-project-case .ppg-project-body .wp-block-post-content .ppg-project-media-row {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* Bilder in Spalten: keine zusätzlichen Ränder, volle Breite */
body.ppg-project-case .ppg-project-media-row .wp-block-image {
  margin: 0;
}

body.ppg-project-case .ppg-project-media-row .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}

.wp-block-pullquote.ppg-project-pullquote {
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  border-bottom: 1px solid rgba(10, 10, 10, 0.12);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  margin-left: auto;
  margin-right: auto;
  /* Etwas breiter als Lesespalte für visuellen Akzent */
  max-width: min(860px, 100%) !important;
  width: 100% !important;
  box-sizing: border-box;
  text-align: center;
}

body.ppg-project-case .wp-block-pullquote.ppg-project-pullquote {
  border-top-color: color-mix(in srgb, var(--ppg-case-fg) 14%, var(--ppg-case-bg));
  border-bottom-color: color-mix(in srgb, var(--ppg-case-fg) 14%, var(--ppg-case-bg));
}

.wp-block-pullquote.ppg-project-pullquote blockquote {
  margin: 0;
}

.wp-block-pullquote.ppg-project-pullquote p {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--py-ink, #0a0a0a);
  font-weight: 400;
}

body.ppg-project-case .wp-block-pullquote.ppg-project-pullquote p {
  color: var(--ppg-case-fg);
}

.wp-block-pullquote.ppg-project-pullquote cite {
  display: block;
  margin-top: 1.25rem;
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(10, 10, 10, 0.45);
}

body.ppg-project-case .wp-block-pullquote.ppg-project-pullquote cite {
  color: color-mix(in srgb, var(--ppg-case-fg) 50%, var(--ppg-case-bg));
}

/* —— Projektseite: Responsive —— */

@media (max-width: 900px) {
  /* Hero-Bild: kompakter auf mittleren Screens */
  .ppg-project-hero__media,
  .ppg-project-hero__img {
    max-height: min(72vh, 680px) !important;
    height: min(72vh, 680px) !important;
  }

  /* Großer Allein-Titel (ohne Lead) etwas kompakter */
  .ppg-project-hero__title:not(.ppg-project-hero__title--lead) {
    font-size: clamp(1.875rem, 7vw, 3rem);
    letter-spacing: -0.022em;
  }

  /* Lead etwas kompakter, weiterhin kräftig */
  .ppg-project-hero__lead {
    font-size: clamp(1.3rem, 3.6vw, 2.2rem);
    font-weight: 700;
  }

  /* Abstände der Sektionen */
  body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-group,
  body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-columns,
  body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-pullquote,
  body.ppg-project-case .ppg-project-body .wp-block-post-content > .wp-block-quote {
    margin-bottom: clamp(2rem, 6vw, 3.5rem);
  }
}

@media (max-width: 680px) {
  /* Hero-Bild: noch kompakter mobil */
  .ppg-project-hero__media,
  .ppg-project-hero__img {
    max-height: 56vh !important;
    height: 56vh !important;
  }

  /* Fullscreen-Breite für Body-Padding mobil (schmaler als Desktop) */
  body.ppg-project-case .ppg-project-body {
    padding-left: var(--py-inset-left) !important;
    padding-right: var(--py-inset-right) !important;
  }

  /* Zentrierte Textblöcke: volle Breite auf Mobilgeräten (ohne !important: Editor-Breiten/Margins respektieren) */
  body.ppg-project-case .ppg-project-body .wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
    max-width: 100%;
  }

  /* Pullquote: volle Breite mobil */
  .wp-block-pullquote.ppg-project-pullquote {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Spalten übereinander stapeln (WordPress-Standard ab ~600px, hier enforced) */
  body.ppg-project-case .ppg-project-media-row.wp-block-columns {
    flex-direction: column !important;
    gap: clamp(0.75rem, 3vw, 1.25rem) !important;
  }

  body.ppg-project-case .ppg-project-media-row .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Hero-Back-Link: auf Mobilgeräten gut klickbar */
  .ppg-project-hero__back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Hero-Meta: weniger vertikalen Abstand */
  .ppg-project-hero__meta {
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
  }

  .ppg-project-hero__nav {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }

  /* Lead-Zeile mobil: Einrückung aufheben, Titel-Label statisch über dem Text */
  .ppg-project-hero__lead-row {
    margin-top: clamp(0.5rem, 2vw, 1rem);
  }

  .ppg-project-hero__lead {
    text-indent: 0;
  }

  .ppg-project-hero__title--lead {
    position: static;
    width: auto;
    display: block;
    margin-bottom: 0.5rem;
  }

  .ppg-project-hero__title-anchor {
    padding-top: 0;
    text-transform: uppercase;
    font-weight: 500;
  }

  /* Projekttitel (ohne Lead-Layout) */
  .ppg-project-hero__title {
    font-weight: 500;
  }

  /* Lead-Text mobil: etwas kleiner */
  .ppg-project-hero__lead {
    font-size: clamp(1.375rem, 5.5vw, 2rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.025em !important;
    font-weight: 500;
  }

  .ppg-project-hero__lead .ppg-intro-highlight {
    font-weight: 600;
  }
}

/* Reduzierte Bewegung: Hero-Einblende-Animation deaktivieren */
@media (prefers-reduced-motion: reduce) {
  .ppg-project-hero__media {
    animation: none;
  }
}

@media (max-width: 900px) {
  /* Für sanftes Ausfaden: sichtbar sofort, unsichtbar erst nach Opacity-Transition. */
  body.home .py-hero-image,
  body.home .py-hero-person {
    visibility: visible;
    transition: opacity 900ms cubic-bezier(0.33, 1, 0.32, 1), visibility 0s linear 0s;
  }

  /* Mobile-Footer-Reveal: Hero-Bild nach erstem Scrollen ausblenden (JS-Klasse). */
  body.py-mobile-hero-scrolled-out .py-hero-image,
  body.py-mobile-hero-scrolled-out .py-hero-person {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 900ms cubic-bezier(0.33, 1, 0.32, 1), visibility 0s linear 900ms !important;
    pointer-events: none !important;
  }
}