/* ============================================================
   E1 ProServ — Grundlagen

   Reset, Grundtypografie und die Hilfsklassen, die in mehreren
   Bloecken vorkommen. Alle Werte stammen woertlich aus dem
   Prototyp — hier wird nichts neu erfunden, nur aus Inline-Styles
   in Klassen ueberfuehrt.

   Media Queries stehen NICHT hier, sondern gesammelt in
   responsive.css.
   ============================================================ */

/* ---------- Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Kein seitliches Wegziehen.
     `overflow-x: clip` schneidet ueberstehende Elemente ab, ohne — anders als
     `hidden` — einen Scrollbereich zu erzeugen. `overscroll-behavior-x: none`
     unterbindet zusaetzlich das Gummiband und die Wischgeste zum Zurueckblaettern.
     Beides ist unbedenklich, seit die Kopfzeile `position: fixed` ist: nur
     `sticky` haette darunter gelitten. */
  overflow-x: clip;
  overscroll-behavior-x: none;

  /* Der Platz fuer den senkrechten Balken bleibt immer reserviert. Sonst
     springt das Layout um dessen Breite, sobald das Menue den Seitenscroll
     sperrt. */
  scrollbar-gutter: stable;

  scroll-behavior: smooth;
  /* Die Kopfzeile schwebt ueber dem Inhalt. Ohne diesen Versatz landet jeder
     Ankersprung darunter. app.js haelt --ps-header-h aktuell. */
  scroll-padding-top: calc(var(--ps-header-h, 94px) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kein overflow-x auf html/body: Das ist die haeufigste Ursache dafuer, dass
   position:sticky im Kopfbereich nicht mehr greift. Elemente, die breiter als
   der Viewport werden (Logo-Laufband, Hero), bekommen ihr overflow:hidden
   jeweils selbst. */

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--highlight); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Der Standard-Fokusring von WordPress ist blau und passt nicht. */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Layout ---------- */

.ps-shell {
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--space-6);
}

/* ---------- Abschnitte stossen aneinander ----------

   WordPress setzt zwischen Bloecke im Fluss 24 Pixel Abstand. Der Selektor
   dafuer heisst `.wp-container-... > *` und ist damit genauso stark wie ein
   `.ps-abschnitt { margin-block: 0 }` — bei Gleichstand gewinnt die spaeter
   geladene Regel, und die Layout-Stile stehen weiter unten im Dokument.

   Aufgefallen ist es erst, als zwei gefaerbte Abschnitte aneinanderstiessen:
   Zwischen dem dunklen Band und der Flaeche darunter blitzte ein 24 Pixel
   schmaler Streifen Seitenhintergrund durch. Zwischen zwei durchsichtigen
   Abschnitten war der Abstand die ganze Zeit da, nur eben unsichtbar.

   Die doppelte Klasse ist Absicht: Sie hebt die Staerke um eine Stufe an,
   ohne zu !important zu greifen.
*/

.ps-abschnitt.ps-abschnitt,
.ps-hero.ps-hero,
.ps-section.ps-section {
  margin-block: 0;
}

.ps-section {
  padding-block: var(--space-10);
  border-top: 1px solid var(--border-subtle);
}
.ps-section--tight { padding-block: var(--space-9); }
.ps-section--flush { border-top: 0; }

/* Volle Breite ausbrechen, ohne den Body horizontal scrollen zu lassen. */
.ps-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---------- Wiederkehrende Textbausteine ---------- */

/* Die getrackte Versalzeile mit vorangestelltem Strich —
   im Design-System "SectionLabel". */
.ps-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--highlight);
}
.ps-eyebrow::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
}

.ps-lead {
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* Kleine technische Auszeichnung (Rollen, Nummern, Tags). */
.ps-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ps-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
}

.ps-icon { flex: none; }


/* ---------- Einblenden beim Scrollen ---------- */

/* Der Startzustand wird von app.js gesetzt, nicht hier: Ohne JavaScript
   soll der Inhalt sichtbar bleiben, nicht dauerhaft auf Opacity 0 stehen. */
[data-reveal][data-reveal-state="hidden"] {
  opacity: 0;
  transform: translateY(20px);
}
[data-reveal][data-reveal-state="shown"] {
  opacity: 1;
  transform: none;
}

/* ---------- Barrierefreiheit ---------- */

/* Nicht ueber `left: -9999px` verstecken: das erzeugt einen Kasten weit
   ausserhalb des Viewports, der je nach Browser und Schreibrichtung doch
   Platz beansprucht. `clip-path` nimmt ihn aus der Darstellung, ohne ihn zu
   verschieben. */
.ps-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: 0 0 var(--radius-sm) 0;
  clip-path: inset(50%);
}
.ps-skip-link:focus {
  clip-path: none;
  color: var(--accent-contrast);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Vorlaeufig ---------- */
/* Platzhalter fuer den Hero. Entfaellt mit dem Block e1ps/hero in Phase 03. */


.ps-hero-stub {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-4);
  min-height: 78vh;
  padding: calc(var(--ps-header-h, 94px) + var(--space-8)) var(--space-6) var(--space-9);
  color: var(--on-media-strong);
}
.ps-hero-stub .ps-eyebrow { color: var(--accent-base); }
.ps-hero-stub p { max-width: 62ch; }

/* ---------- Schmale Breiten ---------- */
/*
   Nur was global gilt. Was einen bestimmten Block betrifft, steht bei diesem
   Block — sonst bleibt sein CSS beim Umzug in ein anderes Theme unvollstaendig.
*/

/* ---------- <= 1024px ---------- */
@media (max-width: 1024px) {
  html { scroll-padding-top: 76px; }
}

/* ---------- <= 768px ---------- */
@media (max-width: 768px) {
  :root {
    /* Der Prototyp setzt 128px Sektionspadding und 32px seitlich. Auf dem
       Handy wirkt das leer und kostet viel Scrollweg. */
    --section-y: var(--space-8);
    --gutter: var(--space-4);
  }

  .ps-section { padding-block: var(--space-8); }
  .ps-section--tight { padding-block: var(--space-7); }
  .ps-shell { padding-inline: var(--space-4); }

  .ps-header__inner { padding: var(--space-3) var(--space-4); }
  .ps-footer { padding: var(--space-7) var(--space-4) var(--space-6); }

  /* Harte Zeilenumbrueche aus dem Prototyp (4x <br> in H1 und Hero-Absatz)
     erzeugen auf schmalen Displays Einzelwortzeilen. */
  .ps-br-lg { display: none; }
}

/* ---------- <= 480px ---------- */
@media (max-width: 480px) {
  .ps-shell { padding-inline: var(--space-4); }
}

/* ---------- Zeigergeraete ---------- */

/* Hover-Interaktionen (Hero-Hotspots, Team-Portraits) gibt es nur dort, wo
   es einen echten Mauszeiger gibt. Auf Touch laeuft alles ueber Klick. */
@media (hover: hover) and (pointer: fine) {
  /* wird ab Phase 03 gefuellt */
}

/* ---------- Druck ---------- */
@media print {
  .ps-header,
  .ps-footer,
  .ps-theme-toggle { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Fliesstext in Abschnitten — eine Stufe groesser als die Grundschrift.
   Der Klassenname kommt von register_block_style() in inc/setup.php;
   WordPress bildet ihn aus dem Namen des Stils. */
.is-style-fliesstext {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
}

/* ---------- Der pulsierende Ring ---------- */

/* Wird an zwei Stellen gebraucht — am Menuepunkt in der Kopfzeile und an
   den Bildpunkten im Hero. Keyframes gelten global, ein zweiter Satz unter
   anderem Namen waere nur doppelter Code. */
@keyframes ps-ping {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}