/* ============================================================================
   pn-motion.css  ·  Eigenentwicklung IECOOP
   Drei Bausteine:
     1. Schnellkontakt-Leiste fuer Desktop (die mobile Leiste bleibt unberuehrt)
     2. Kompakter Rezensionsblock fuer Unterseiten
     3. Ruhige Scroll-Einblendungen (GSAP)
   Bewegung laeuft ausschliesslich ueber GSAP, selbst gehostet unter js/vendor/.
   Ohne JavaScript bleibt jeder Inhalt sichtbar und vollstaendig benutzbar.
   ========================================================================== */

/* ===========================================================================
   1 · Schnellkontakt-Leiste (nur ab 992 px, darunter greift .pn-bar)
   ========================================================================= */

.pn-leiste { display: none; }

@media (min-width: 992px) {

  .pn-leiste {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
    background: #fff;
    border-top: 1px solid var(--pn-line);
    box-shadow: 0 -10px 30px rgba(17, 34, 64, .10);
    /* Startlage: ausgeblendet. GSAP schiebt sie herein. */
    transform: translateY(104%);
    will-change: transform;
  }
  .pn-leiste[hidden] { display: none; }
  /* eingefahren: fuer Auge und Tastatur gleichermassen weg */
  .pn-leiste.is-weg { visibility: hidden; }

  /* Lesefortschritt als Haarlinie auf der Oberkante */
  .pn-leiste-fort {
    position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: var(--blue);
    transform: scaleX(0); transform-origin: 0 50%;
    pointer-events: none;
  }

  .pn-leiste-in {
    display: flex; align-items: flex-end; gap: 1.1rem;
    max-width: 1400px; margin: 0 auto;
    padding: .85rem calc(var(--size--page-padding) + 2.4rem) .85rem var(--size--page-padding);
  }

  /* Claim links */
  .pn-leiste-claim { flex: 0 0 auto; max-width: 15.5rem; margin: 0 .4rem .3rem 0; }
  .pn-leiste-claim strong {
    display: block; color: var(--pn-ink);
    font-size: .9rem; font-weight: 700; line-height: 1.25;
    letter-spacing: .02em; text-transform: uppercase;
  }
  .pn-leiste-claim span {
    display: block; margin-top: .2rem;
    color: var(--pn-ink-3); font-size: .74rem; line-height: 1.35;
  }

  /* Felderzeile */
  .pn-leiste-felder { display: flex; align-items: flex-end; gap: .7rem; flex: 1 1 auto; min-width: 0; }
  .pn-leiste-f { flex: 1 1 0; min-width: 0; }
  .pn-leiste-f.is-weit { flex: 1.9 1 0; }
  .pn-leiste-f > span {
    display: block; margin: 0 0 .25rem .1rem;
    color: var(--pn-ink-3); font-size: .66rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .pn-leiste-f input {
    width: 100%; height: 2.5rem; margin: 0;
    padding: 0 .75rem;
    font-family: inherit; font-size: .86rem; color: var(--pn-ink);
    background: var(--pn-surface);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-r-sm);
    transition: border-color .18s, background-color .18s, box-shadow .18s;
    -webkit-appearance: none; appearance: none;
  }
  /* Kontrast 4,67:1 auf der Feldfarbe, der helle Grauton davor bestand nur 2,4:1 */
  .pn-leiste-f input::placeholder { color: var(--pn-ink-3); opacity: 1; }
  .pn-leiste-f input:hover { border-color: var(--pn-line-2); }
  .pn-leiste-f input:focus {
    background: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 116, 217, .13);
  }
  /* Beim Klicken reicht der weiche Ring, bei Tastaturbedienung kommt weiter
     unten der deutliche Rahmen dazu. Ein pauschales outline:none haette ihn
     wegen hoeherer Spezifitaet verschluckt. */
  .pn-leiste-f input:focus:not(:focus-visible) { outline: none; }
  .pn-leiste-f input[aria-invalid="true"] {
    border-color: #c0392b; background: #fdf4f3;
  }

  /* Honigtopf gegen Formular-Roboter. visibility:hidden ist wichtig: so sieht
     die Adressuebernahme des Browsers das Feld gar nicht erst als ausfuellbar
     an. Ein versehentlich gefuelltes Feld wuerde die Anfrage verwerfen. */
  .pn-leiste-falle {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; opacity: 0;
    visibility: hidden; pointer-events: none;
  }

  .pn-leiste-senden {
    flex: 0 0 auto; height: 2.5rem; margin: 0;
    display: inline-flex; align-items: center; gap: .55rem;
    padding: 0 1.35rem;
    font-family: inherit; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: var(--blue);
    border: 0; border-radius: var(--pn-r-sm); cursor: pointer;
    transition: background-color .18s, box-shadow .18s;
  }
  .pn-leiste-senden svg {
    width: 15px; height: 15px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2.3;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .22s;
  }
  .pn-leiste-senden:hover { background: var(--pn-brand-ink); box-shadow: 0 6px 16px rgba(0, 116, 217, .3); }
  .pn-leiste-senden:hover svg { transform: translateX(3px); }
  .pn-leiste-senden:disabled { opacity: .62; cursor: default; }
  .pn-leiste-senden:disabled svg { transform: none; }

  /* Zweite Zeile: Einwilligung und Direktwege. Oeffnet sich beim Hineinschreiben. */
  .pn-leiste-mehr {
    max-width: 1400px; margin: 0 auto;
    padding: 0 var(--size--page-padding);
    height: 0; overflow: hidden;
  }
  .pn-leiste-mehr-in {
    display: flex; align-items: flex-start; gap: 1.6rem;
    padding: .1rem 0 .95rem;
    border-top: 1px solid var(--pn-line); margin-top: .1rem;
  }
  .pn-leiste-ok {
    display: flex; align-items: flex-start; gap: .55rem;
    flex: 1 1 auto; margin: .85rem 0 0;
    color: var(--pn-ink-2); font-size: .74rem; line-height: 1.5;
  }
  .pn-leiste-ok input {
    flex: 0 0 auto; width: 15px; height: 15px; margin: .12rem 0 0;
    accent-color: var(--blue); cursor: pointer;
  }
  .pn-leiste-ok a { color: var(--pn-brand-ink); text-decoration: underline; text-underline-offset: 2px; }
  .pn-leiste-direkt {
    flex: 0 0 auto; margin: .85rem 0 0;
    color: var(--pn-ink-3); font-size: .74rem; line-height: 1.5;
  }
  .pn-leiste-direkt a { color: var(--pn-brand-ink); font-weight: 600; text-decoration: none; }
  .pn-leiste-direkt a:hover { text-decoration: underline; text-underline-offset: 2px; }

  .pn-leiste-fehler {
    max-width: 1400px; margin: 0 auto;
    padding: 0 var(--size--page-padding);
    color: #c0392b; font-size: .76rem; line-height: 1.5;
    height: 0; overflow: hidden;
  }
  .pn-leiste-fehler.on { height: auto; padding-bottom: .8rem; }
  .pn-leiste-fehler a { color: #c0392b; font-weight: 700; }

  /* Danke-Zustand */
  /* Bleibt dauerhaft im Dokument, damit Vorlesesoftware die Meldung mitbekommt.
     Verborgen wird ueber die Hoehe, nicht ueber display. */
  .pn-leiste-danke {
    display: flex; align-items: center; gap: .85rem;
    max-width: 1400px; margin: 0 auto;
    padding: 0 var(--size--page-padding);
    height: 0; overflow: hidden;
  }
  .pn-leiste-danke.on { height: auto; padding: 1.15rem var(--size--page-padding); }
  .pn-leiste-danke:focus { outline: none; }
  .pn-leiste-danke i {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--pn-brand-tint);
  }
  .pn-leiste-danke svg { width: 17px; height: 17px; fill: none; stroke: var(--blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .pn-leiste-danke p { margin: 0; color: var(--pn-ink); font-size: .86rem; line-height: 1.5; }
  .pn-leiste-danke p strong { font-weight: 700; }

  /* Schliessen */
  .pn-leiste-zu {
    position: absolute; top: .55rem; right: .5rem;
    width: 1.9rem; height: 1.9rem; padding: 0;
    display: grid; place-items: center;
    background: none; border: 0; border-radius: 50%; cursor: pointer;
    color: var(--pn-ink-3);
    transition: background-color .18s, color .18s;
  }
  .pn-leiste-zu svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
  .pn-leiste-zu:hover { background: var(--pn-surface); color: var(--pn-ink); }

  .pn-leiste :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

  /* Cookie-Schaltflaeche ueber die Leiste heben */
  html.pn-leiste-an #pn-cc-fab { bottom: 5.5rem !important; }
}

/* Schmale Desktops: Claim weg, damit die Felder Luft haben */
@media (min-width: 992px) and (max-width: 1199px) {
  .pn-leiste-claim { display: none; }
  .pn-leiste-in { padding-left: var(--size--page-padding); }
}

/* ===========================================================================
   2 · Kompakter Rezensionsblock (Unterseiten)
   ========================================================================= */

.pn-stim { padding: 1rem var(--size--page-padding) 0; }
/* Steht der Block weit oben als eigene Sektion, braucht er den normalen
   Abstand der Seite statt des knappen Abstands ueber dem Kontaktkasten. */
.pn-stim-oben { padding: 6rem var(--size--page-padding); }
@media (max-width: 991px) { .pn-stim-oben { padding: 4rem var(--size--page-padding); } }
@media (max-width: 767px) { .pn-stim-oben { padding: 3rem var(--size--page-padding); } }
.pn-stim-head { max-width: 62ch; }
.pn-stim-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem; margin-top: 1.9rem;
}
/* Karten aus dem Laufband weiterverwenden, nur die Laufband-Maße aufheben */
.pn-stim-grid .pn-tm-card { width: auto; margin: 0; }
.pn-stim .pn-tm-echt { max-width: 100%; margin-top: 1.5rem; }

@media (max-width: 991px) {
  .pn-stim-grid {
    display: flex; gap: .9rem; margin-top: 1.5rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .2rem var(--size--page-padding) .9rem;
    margin-left: calc(var(--size--page-padding) * -1);
    margin-right: calc(var(--size--page-padding) * -1);
    scrollbar-width: thin;
  }
  .pn-stim-grid .pn-tm-card { flex: 0 0 86%; scroll-snap-align: center; }
  /* Der Schiebebereich bekommt per Skript einen Tabulatorhalt, sobald er wirklich
     ueberlaeuft. Dann braucht er auch einen sichtbaren Rahmen. */
  .pn-stim-grid:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
}
@media (max-width: 767px) {
  .pn-stim { padding-top: .5rem; }
  .pn-stim-grid .pn-tm-card { flex: 0 0 90%; }
}

/* ===========================================================================
   4 · Startseite: Handlungsaufforderung im Titelbild
   Die Anfrage steht vorn, "Über uns" bleibt als ruhiger zweiter Weg daneben.
   ========================================================================= */

.pn-held-akt {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .9rem 1.4rem;
}
.pn-held-zweit {
  display: inline-flex; align-items: center; gap: .5rem;
  /* genau so hoch wie .main-button: 1.25rem Zeile + 2x1rem Innenabstand,
     minus die beiden Rahmenlinien */
  padding: calc(1rem - 1px) 1.9rem;
  color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.25rem;
  letter-spacing: .025rem; text-transform: uppercase; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .62);
  /* dunkel hinterlegt, damit die Schrift auch auf hellen Titelbildern traegt */
  background: rgba(17, 24, 32, .34);
  backdrop-filter: blur(2px);
  transition: background-color .2s, border-color .2s, color .2s;
}
.pn-held-zweit:hover { background: #fff; border-color: #fff; color: var(--dark-grey); }

@media (max-width: 767px) {
  .pn-held-akt { flex-direction: column; align-items: stretch; width: 100%; gap: .7rem; }
  .pn-held-akt > * { width: 100%; justify-content: center; text-align: center; }
  .pn-held-zweit { padding: .85rem 1.2rem; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-held-zweit { transition: none; }
}

/* ===========================================================================
   2b · Laufband an seinem alten Platz, einreihig
   Die Ueberschrift steht links, darum laeuft auch das Band ueber die volle
   Breite des Containers und nicht mittig verengt.
   ========================================================================= */

.pn-stimmen-mehr .pn-tm { text-align: left; }
.pn-stimmen-mehr .pn-tm-row { max-width: 100%; }
.pn-stimmen-mehr .pn-tm-rows { margin-top: 1.25rem; }
.pn-stimmen-mehr .pn-tm-echt { margin-left: 0; margin-right: 0; }

/* ===========================================================================
   3 · Scroll-Einblendungen
   Sichtbar bleibt alles: verborgen wird nur, wenn html.pn-anim gesetzt ist,
   und das setzt ein kleines Skript im Kopf, das sich nach 2,5 s selbst
   zuruecknimmt, falls GSAP nicht hochkommt.
   ========================================================================= */

html.pn-anim .pn-sec-head,
html.pn-anim .pn-block,
html.pn-anim .pn-topic,
html.pn-anim .pn-signs,
html.pn-anim .pn-faq,
html.pn-anim .pn-fakten-row,
html.pn-anim .pn-bento-tile,
html.pn-anim .pn-cta-box,
html.pn-anim .pn-stim-grid > *,
html.pn-anim .service-wrapper,
html.pn-anim .pn-proj,
html.pn-anim .pn-step {
  opacity: 0;
}

/* Laufband: die CSS-Animation faellt erst weg, wenn GSAP eine Spur wirklich
   uebernommen hat. Fehlt ScrollTrigger, laeuft die CSS-Fassung weiter. */
.pn-tm-track.pn-band { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html.pn-anim .pn-sec-head,
  html.pn-anim .pn-block,
  html.pn-anim .pn-topic,
  html.pn-anim .pn-signs,
  html.pn-anim .pn-faq,
  html.pn-anim .pn-fakten-row,
  html.pn-anim .pn-bento-tile,
  html.pn-anim .pn-cta-box,
  html.pn-anim .pn-stim-grid > *,
  html.pn-anim .service-wrapper,
  html.pn-anim .pn-proj,
  html.pn-anim .pn-step { opacity: 1; }
  .pn-leiste { transform: none; }
  .pn-leiste-senden svg, .pn-leiste-zu, .pn-leiste-f input { transition: none; }
}

@media print {
  .pn-leiste { display: none !important; }
  /* Nur die Blöcke der Einblendung zuruecksetzen. Ein pauschales * haette auch
     die absichtlich verborgenen Titelbild-Folien sichtbar gemacht. */
  .pn-sec-head, .pn-block, .pn-topic, .pn-signs, .pn-faq, .pn-fakten-row,
  .pn-bento-tile, .pn-cta-box, .pn-stim-grid > *, .service-wrapper,
  .pn-proj, .pn-step { opacity: 1 !important; transform: none !important; }
}