/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */

.ph-hero-grid { align-items: center; }

/* ---- Hero: Kartenkomposition -------------------------------- */
.ph-hc {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  width: 100%;
  justify-self: end;
}
.ph-card {
  --tilt: 0deg;
  position: absolute;
  margin: 0;
  background: var(--white);
  border-radius: 14px;
  padding: 8px 8px 10px;
  box-shadow: 0 16px 34px rgba(26,35,34,0.16);
  transform: rotate(var(--tilt));
}
.ph-card img { width: 100%; height: auto; display: block; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 8px; }
.ph-card figcaption {
  margin-top: 8px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal-dark);
}
.ph-card--1 { left: 0; top: 2%; width: 31%; --tilt: -3deg; z-index: 1; }
.ph-card--2 { left: 26%; top: 6%; width: 32%; --tilt: 1.6deg; z-index: 2; }
.ph-card--3 { left: 53%; top: 0; width: 31%; --tilt: 3.2deg; z-index: 1; }
.ph-card--result {
  left: 22%; top: 62%; width: 58%; z-index: 3; --tilt: -1deg;
  padding: 16px 18px 16px;
}
.ph-card img.ph-card-wappen {
  position: absolute; top: -20px; right: 16px;
  width: 44px; height: auto;
  aspect-ratio: auto; object-fit: contain; border-radius: 0;
  filter: drop-shadow(0 4px 10px rgba(26,35,34,0.25));
}
.ph-card--result strong {
  display: block;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.ph-card--result ul { list-style: none; margin: 0; padding: 0; }
.ph-card--result li {
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-soft);
}
.ph-card--result li:first-child { border-top: 0; padding-top: 0; }
.ph-card--result li b {
  font-size: 16px; font-weight: 800;
  color: var(--teal-dark);
  margin-right: 7px;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .ph-card { transition: transform 0.45s cubic-bezier(.2,.7,.2,1); }
  .ph-hc:hover .ph-card--1 { transform: rotate(-4.5deg) translate(-5px, -3px); }
  .ph-hc:hover .ph-card--2 { transform: rotate(2.4deg) translateY(-5px); }
  .ph-hc:hover .ph-card--3 { transform: rotate(4.6deg) translate(5px, -3px); }}


/* ---- Ergebnis: KPI-Zeile + Kundenzeile ----------------------- */
.ph-result { padding: var(--space-md) 0; background: var(--teal-tint); }
.ph-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 26px 0 30px;
}
.ph-kpi { padding: 0 26px; border-left: 1px solid rgba(16,100,102,0.18); }
.ph-kpi:first-child { padding-left: 0; border-left: 0; }
.ph-kpi strong {
  display: block;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: var(--teal-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ph-kpi span { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--ink); }
.ph-kpi p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

.ph-client {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 0;
  padding: 20px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ph-client-photo {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.ph-client-body { flex: 1 1 240px; min-width: 0; }
.ph-client-name {
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 4px;
}
.ph-client-role {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0;
}
.ph-client-logo {
  flex-shrink: 0;
  width: auto; height: 56px;
  object-fit: contain;
  display: block;
}

/* ---- Gegenüberstellung in zwei Karten -----------------------------------
   Zweimal auf dieser Seite im Einsatz: „passiert / passiert nicht" und
   „war hier besonders / liegt bei dir anders". Gleicher Bau wie die
   Vergleichskarten der Betreuungsseite, damit die Bildsprache hält. */

/* ---- Proof-Wall: Plattform-Ausschnitte ----------------------- */
.ph-pw {
  display: flex; flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  margin: 32px 0 34px;
}
.ph-pw-tile {
  --tilt: 0deg;
  flex: 0 0 auto;
  margin: 0;
  background: var(--white);
  padding: 6px 6px 8px;
  border-radius: 10px;
  box-shadow: 0 12px 26px rgba(26,35,34,0.14);
  transform: rotate(var(--tilt));
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s ease;
}
.ph-pw-tile:hover { transform: rotate(0deg) translateY(-5px) scale(1.04); box-shadow: 0 18px 36px rgba(26,35,34,0.2); z-index: 2; position: relative; }
.ph-pw-tile img { display: block; height: clamp(140px, calc(140px + (100vw - 1240px) * 0.7), 168px); width: auto; border-radius: 6px; }
.ph-pw-tile figcaption {
  margin-top: 6px;
  /* 11 statt 9px: der Lesbarkeitsboden aus der Mobil-Runde endete bei 640px,
     darueber fiel die Beschriftung bis 1440px auf 9px zurueck. */
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-dark); opacity: 0.65;
  text-align: center;
}
@media (max-width: 1240px) {
  .ph-pw-tile img { height: 140px; }}

@media (max-width: 1024px) {
  /* eine Reihe bleibt: ab hier horizontal wischbar */
  .ph-pw { justify-content: flex-start; overflow-x: auto; padding: 6px 4px 18px; scrollbar-width: thin; }
  .ph-pw-tile img { height: 132px; }}

@media (prefers-reduced-motion: reduce) {
  .ph-pw-tile { transition: none; }
  .ph-pw-tile:hover { transform: rotate(var(--tilt)); }}


/* ---- Content-System: sechs Stationen ------------------------- */
.ph-sys { padding: var(--space-md) 0; background: var(--white); }
.ph-sysgrafik {
  margin-top: 34px;
  padding: 30px 32px 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-image:
    linear-gradient(to right, rgba(16,100,102,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,100,102,0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}
.ph-sysgrafik:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.ph-sys-steps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.ph-sys-steps::before {
  content: '';
  position: absolute; top: 8px; left: 10px; right: 10px;
  height: 2px;
  background: rgba(16,100,102,0.18);
}
.ph-step { position: relative; }
.ph-step-marker {
  position: relative; z-index: 1;
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--teal);
  margin-bottom: 8px;
}
.ph-step-6 .ph-step-marker { background: var(--peach); border-color: var(--peach); }
.ph-step-visual svg { display: block; width: 100%; max-width: 116px; height: auto; }
.ph-step strong { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink); }

/* ---- Medien-Galerie (dunkel) --------------------------------- */
.ph-media { padding: var(--space-md) 0; background: var(--ink); color: rgba(255,255,255,0.82); }
.ph-media h2 { color: var(--white); }
.ph-media-intro { margin: 0 0 30px; font-size: 15.5px; line-height: 1.64; max-width: 62ch; }

/* ---- Die ersten drei Monate ---------------------------------- */
.ph-phasen { padding: var(--space-md) 0; background: var(--teal-tint); }
.ph-phasen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 28px;
}
.ph-ph { border-top: 1px solid rgba(16,100,102,0.18); padding-top: 14px; }
.ph-ph-num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 800; font-style: normal; line-height: 1;
  background: var(--white); color: var(--teal);
  border: 2px solid var(--border);
  margin-bottom: 8px;
}
.ph-ph h3 { margin: 0 0 6px; font-size: 16.5px; color: var(--ink); }
.ph-ph p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--ink-soft); }
/* ---- Vom Video zur Website ----------------------------------- */
.ph-web { padding: var(--space-md) 0; background: var(--white); }
.ph-web-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 52px;
  align-items: center;
}
.ph-webgrafik { max-width: 560px; }
.ph-webgrafik:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; border-radius: 12px; }
.ph-webgrafik svg { display: block; width: 100%; height: auto; }
.ph-wg-people, .ph-wg-site, .ph-wg-badge { transform-box: fill-box; transform-origin: center; }
.ph-webgrafik:hover .ph-wg-l1, .ph-webgrafik:focus-visible .ph-wg-l1 { animation: hk-linedraw2 0.6s ease 0.1s both; }
.ph-webgrafik:hover .ph-wg-l2, .ph-webgrafik:focus-visible .ph-wg-l2 { animation: hk-linedraw2 0.6s ease 0.7s both; }
.ph-webgrafik:hover .ph-wg-badge, .ph-webgrafik:focus-visible .ph-wg-badge { animation: ma-pop2 0.5s cubic-bezier(.2,.7,.2,1) 1.3s both; }

/* ---- Übertragbar: Abstand zur hellen FAQ --------------------- */
.ph-learn { padding: var(--space-md) 0; background: var(--teal-tint); }

/* ---- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  .ph-sys-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .ph-sys-steps::before { display: none; }
  .ph-step-marker { display: none; }}

@media (max-width: 980px) {
  .ph-hc { justify-self: center; max-width: 460px; }
  .ph-kpis { grid-template-columns: 1fr; }
  .ph-kpi { padding: 12px 0; border-left: 0; border-top: 1px solid rgba(16,100,102,0.18); }
  .ph-kpi:first-child { padding-top: 0; border-top: 0; }
  .ph-phasen-grid { grid-template-columns: 1fr; gap: 22px; }
  .ph-web-grid { grid-template-columns: 1fr; gap: 30px; }}

@media (max-width: 560px) {
  .ph-hc { aspect-ratio: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 380px; }
  .ph-card { position: static; width: auto; }
  .ph-card--result { grid-column: 1 / -1; }
  .ph-sys-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }}

@media (prefers-reduced-motion: reduce) {
  .ph-card { transition: none; }
  .ph-hc:hover .ph-card--1, .ph-hc:hover .ph-card--2, .ph-hc:hover .ph-card--3 { transform: rotate(var(--tilt)); }}



/* ==========================================================================
   MOBILE-FEINSCHLIFF (Mobile-Audit 31.07.2026)
   Gilt ausschliesslich bis 640px. Desktop und Tablet bleiben unberuehrt.
   ========================================================================== */
@media (max-width: 640px) {

  /* ---------- Gruppe e ---------- */
  /* Pro Heraldica, Hero-Karten: "FAMILIENNAMEN" ist ein Wort und braucht bei
     390px 109px in einer 90px breiten Karte. Es lief bis auf die Nachbarkarte,
     bei 320px stand "FAMILIENNAME" direkt ueber "GESCHICHTE". Jetzt darf die
     Beschriftung trennen; die drei Karten bleiben unveraendert breit. */
  .ph-card figcaption {
    hyphens: auto;
    overflow-wrap: break-word;
    letter-spacing: 0.04em;
    line-height: 1.25;
  }
  
  /* Pro Heraldica, Grafik "Vom Video zur Website": das SVG ist 520 Einheiten
     breit und wird auf dem Handy auf 342px gestaucht (Faktor 0,66). Die
     Beschriftungen "Video", "Interesse" und "Website von Pro Heraldica" kamen
     damit bei 7,2px an, "Website-Klicks" sogar bei 5,6px. Groessere Schrift im
     SVG, das Peach-Schild wird dafuer breiter. Alle Werte bleiben innerhalb der
     viewBox (520) und innerhalb des Schildes. */
  .ph-webgrafik text { font-size: 15px; }
  .ph-webgrafik .ph-wg-badge text { font-size: 13px; }
  .ph-webgrafik .ph-wg-badge rect { width: 112px; }}


/* ==========================================================================
   GRAFIK-FEINSCHLIFF - Phase 1 und 2 des Produktionsdurchlaufs, 03.08.2026
   --------------------------------------------------------------------------
   Sechs Pruefdurchgaenge haben jede beschriftete Grafik aller 16 Routen
   einzeln nachgemessen, bei 320 / 360 / 390 / 430 / 641 / 768 / 900 / 980 /
   1024 und 1280px. Aufgenommen ist hier ausschliesslich Fehlerbehebung:
   Beschnitt, Ueberlauf, Beschriftungen unter 11px, Linien ohne Endpunkt,
   verdeckte Texte, tote Flaeche. Vorschlaege, die Anordnung oder Aufbau einer
   Grafik aendern, sind bewusst NICHT enthalten.
   ========================================================================== */

@media (max-width: 640px) {

  /* --- /projekte/social-media-pro-heraldica/, Proof-Wall --------------- */
  /* Die Kachelreihe ist waagerecht wischbar, sitzt aber im .container mit 24px
     Innenabstand. Dadurch brach die letzte sichtbare Kachel mitten im Bild an
     einer Kante ab, hinter der noch weisser Rand lag: das liest sich wie ein
     Darstellungsfehler, nicht wie "hier geht es weiter". Die Reihe laeuft
     jetzt bis an den Bildschirmrand und rastet ein. */
  .ph-result .ph-pw {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 24px;
  }
  .ph-result .ph-pw-tile { scroll-snap-align: start; }}


/* --- /projekte/social-media-pro-heraldica/, Hero-Kartenfaecher --------- */
/* Karte 2 (FAMILIENNAMEN, z-index 2, 26% bis 58%) liegt ueber Karte 3 (53% bis
   84%) und reicht unten tiefer. Sie verdeckte damit die ersten Buchstaben der
   Bildunterschrift von Karte 3: aus "GESCHICHTE" wurde sichtbar "SCHICHTE".
   Rechtsbuendig gesetzt steht die Beschriftung ab rund 64% der Grafikbreite
   und damit ausserhalb des Ueberlappungsbereichs. Komposition und Karten
   bleiben unveraendert. Unterhalb von 560px ist der Faecher ein Raster ohne
   Ueberlappung. */
@media (min-width: 561px) {
  .ph-hc .ph-card--3 figcaption { text-align: right; }}


/* --- /projekte/social-media-pro-heraldica/, Content-System-Grafik ------ */
/* Die Schiene lief von left:10px bis right:10px ueber die ganze Liste, die
   sechs Punkte sitzen aber jeweils am linken Rand ihrer Spalte. Hinter dem
   letzten, orangenen Punkt ("Website-Klick") lief die Linie deshalb noch rund
   150px weiter und endete im Nichts, der Endpunkt der Kette wirkte dadurch
   nicht wie ein Ende. Linie exakt am letzten Punkt beenden: sechs Spalten,
   fuenf Luecken a 16px, Punktmitte 9px hinter dem Spaltenanfang. */
@media (min-width: 1025px) {
  .ph-sysgrafik .ph-sys-steps::before { right: calc((100% - 80px) / 6 - 9px); }}


/* ==========================================================================
   PRO HERALDICA, CONTENT-SYSTEM-GRAFIK WIEDER ALS KETTE - 03.08.2026
   --------------------------------------------------------------------------
   Unter 1025px schaltete die Grafik auf ein Icon-Raster um und blendete dabei
   Schiene und Punkte aus (Regeln bei Zeile 5005-5007). Damit blieb von der
   Kette "Dokument -> Detail -> Geschichte -> Video -> Reaktion ->
   Website-Klick" nur eine Sammlung gleichwertiger Icons uebrig: dass es
   ueberhaupt eine Reihenfolge ist, war nicht mehr zu sehen, und der orangene
   Endpunkt (Schritt 6) fehlte ganz. Die Grafik erklaerte damit nur noch die
   Zutaten, nicht mehr den Zusammenhang.
   ========================================================================== */

/* Handy: senkrechte Kette. Punkt und Beschriftung nebeneinander, Bild
   darunter. Dasselbe Muster nutzt die Entstehungs-Grafik auf
   /ueber-michael-hetzel/ bereits. */
@media (max-width: 640px) {
  .ph-sysgrafik { padding: 24px 18px 18px; }
  .ph-sysgrafik .ph-sys-steps { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ph-sysgrafik .ph-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
  }
  /* Der Punkt war ab 1024px abwaerts ausgeblendet. */
  .ph-sysgrafik .ph-step-marker { display: inline-block; margin-bottom: 0; }
  .ph-sysgrafik .ph-step strong { grid-column: 2; grid-row: 1; margin-top: 0; }
  .ph-sysgrafik .ph-step-visual { grid-column: 2; grid-row: 2; }
  .ph-sysgrafik .ph-step-visual svg { max-width: 104px; }
  /* Schiene je Station statt einer Linie ueber die ganze Liste: so endet sie
     exakt am letzten Punkt und haengt nicht ins Leere. Der Punkt selbst liegt
     mit z-index 1 darueber und deckt das obere Ende ab. */
  .ph-sysgrafik .ph-step::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: -18px;
    width: 2px;
    background: rgba(16,100,102,0.18);
  }
  .ph-sysgrafik .ph-step:last-child::before { bottom: calc(100% - 18px); }}


/* Tablet: die sechsspaltige Kette passt hier noch, geprueft ab 641px. Also
   Schiene und Punkte zurueckholen statt des dreispaltigen Rasters. Die Schiene
   endet am letzten Punkt: sechs Spalten, fuenf Luecken a 14px, Punktmitte 9px
   hinter dem Spaltenanfang. */
@media (min-width: 641px) and (max-width: 1024px) {
  .ph-sysgrafik .ph-sys-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .ph-sysgrafik .ph-sys-steps::before { display: block; right: calc((100% - 70px) / 6 - 9px); }
  .ph-sysgrafik .ph-step-marker { display: inline-block; }
  .ph-sysgrafik .ph-step strong { font-size: 12px; }}


@media (max-width: 640px) {

  /* --- /projekte/social-media-pro-heraldica/ --------------------------- */
  /* Zwei Sektionen liefen auf 48px Innenabstand, alle anderen auf 64px. Weil
     die Sektionen abwechselnd weiss und tuerkis hinterlegt sind, sah man den
     Sprung von 96 auf 128px direkt. */
  .ph-phasen, .ph-learn { padding-top: 64px; padding-bottom: 64px; }

  /* Die Bildunterschrift der zweiten Hero-Karte trennte an der spaetesten
     Silbengrenze: FAMILIENNA- / MEN. Mit Mindestlaengen wird daraus
     FAMILIEN- / NAMEN. */
  .ph-card figcaption { hyphenate-limit-chars: auto 4 4; }}


/* ==========================================================================
   ZURUECKGEHALTENE UMBAUTEN - freigegeben und umgesetzt am 03.08.2026
   ========================================================================== */

/* --- /projekte/social-media-pro-heraldica/, Grafik "Vom Video zur Website" */
/* Die Querformat-Fassung (viewBox 520x210) wurde mobil auf 272px
   heruntergerechnet, Massstab 0.52. Die Beschriftungen landeten dadurch bei
   2.7 bis 7.8px - der schlechteste Wert der ganzen Website. Zweite Fassung im
   Hochformat: drei Stationen untereinander, viewBox 280 breit, Massstab 0.97. */
.ph-webgrafik .phwg-hoch { display: none; }
@media (max-width: 560px) {
  .ph-webgrafik .phwg-quer { display: none; }
  .ph-webgrafik .phwg-hoch { display: block; }}


/* --- Ketten-Grafiken: rechte Haelfte blieb leer ------------------------- */
/* Punkt und Beschriftung standen links, das Bild darunter war auf 104px
   gedeckelt und hing ebenfalls links - ueber die halbe Zeilenbreite blieb
   ungenutzt. Jetzt drei Spalten in einer Zeile: Punkt, Bild, Beschriftung. */
@media (max-width: 640px) {
  .ph-sysgrafik .ph-step {
    grid-template-columns: 34px 92px minmax(0, 1fr);
    gap: 0 12px;
  }
  .ph-sysgrafik .ph-step strong { grid-column: 3; grid-row: 1; align-self: center; }
  .ph-sysgrafik .ph-step-visual { grid-column: 2; grid-row: 1; }
  .ph-sysgrafik .ph-step-visual svg { max-width: 92px; }}