/* =========================================================
   PNFLOW BASE
   Globale technische und visuelle Grundlagen
========================================================= */


/* =========================================================
   BOX MODEL
========================================================= */

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


/* =========================================================
   DOKUMENT
   overflow-x: clip statt hidden, damit position: sticky
   funktionsfähig bleibt.

   scroll-padding-top hält Sprungmarken unter dem Header
   frei. Der Header ist auf Unterseiten sticky und auf der
   Startseite fixed; ohne diesen Wert scrollt jeder Link
   auf #anker sein Ziel hinter die Kopfleiste.
========================================================= */

html {
  max-width: 100%;
  overflow-x: clip !important;
  overflow-y: visible !important;
  scroll-behavior: smooth;
  scroll-padding-top: clamp(90px, 12vh, 140px);
  background-color: var(--pnflow-page-bg);
}

body {
  max-width: 100%;
  margin: 0;
  overflow-x: clip !important;
  overflow-y: visible !important;
  overscroll-behavior-x: none;
  background-color: var(--pnflow-page-bg);
}


/* =========================================================
   GLOBALE SEITENFLÄCHEN
========================================================= */

#page,
.site,
.site-content {
  max-width: 100%;
  overflow-x: clip !important;
  background-color: var(--pnflow-page-bg);
}

/* Sticky-Elemente bleiben vertikal frei, horizontales
   Verschieben der Seite wird verhindert. */
#page,
.site {
  overflow-y: visible !important;
}


/* =========================================================
   MEDIEN
========================================================= */

img,
picture,
svg,
video {
  max-width: 100%;
}
img {
  height: auto;
}
svg {
  overflow: visible;
}


/* =========================================================
   TEXT
========================================================= */

p:last-child {
  margin-bottom: 0;
}
strong,
b {
  font-weight: 700;
}


/* =========================================================
   GLOBALE LINKS
   Hover geht auf --deep-blue (10.1:1) statt auf --accent.
   Gold hätte den Kontrast beim Hover auf 2.3:1 gesenkt,
   also schlechter gemacht statt besser.
========================================================= */

a {
  color: var(--secondary-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--secondary-blue-rgb), var(--alpha-medium));
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--deep-blue);
  text-decoration-color: currentColor;
}


/* Links auf dunklen Flächen */

.pnflow-on-dark a {
  color: var(--soft-gold);
  text-decoration-color: rgba(var(--soft-gold-rgb), var(--alpha-medium));
}
.pnflow-on-dark a:hover,
.pnflow-on-dark a:focus {
  color: var(--white);
  text-decoration-color: currentColor;
}


/* =========================================================
   LINKS IM FLIESSTEXT
   Gilt für Links, die in Elementor-Textfeldern im Text
   gesetzt werden. Elementors Kit vergibt Linkfarbe und
   -schrift global (.elementor-kit-28 a) und schlägt damit
   die Grundregel oben - Links verschwanden optisch im Text.

   Hier: Schrift und Größe wie der umgebende Text, Farbe
   Gold (--accent-text, 5.25:1) wie auf den Rechtsseiten,
   dazu eine gut sichtbare Unterstreichung. So ist ein Link
   ohne Hover erkennbar. Hover wird dunkler und die Linie
   kräftiger.

   Zwei Klassen im Selektor schlagen das Kit ohne !important.
   Gestaltete Link-Widgets mit eigener Regel und !important
   (Hub-Karten, Footer, Rechtsseiten) bleiben unberührt.
========================================================= */

.elementor .elementor-widget-text-editor a {
  color: var(--accent-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--accent-text-rgb), var(--alpha-strong));
  text-underline-offset: 3px;
}

.elementor .elementor-widget-text-editor a:hover,
.elementor .elementor-widget-text-editor a:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}


/* Auf dunklen Flächen */

.elementor .pnflow-on-dark .elementor-widget-text-editor a,
.elementor .pnflow-section-text--on-dark a {
  color: var(--soft-gold);
  text-decoration-color: rgba(var(--soft-gold-rgb), var(--alpha-strong));
}

.elementor .pnflow-on-dark .elementor-widget-text-editor a:hover,
.elementor .pnflow-on-dark .elementor-widget-text-editor a:focus-visible,
.elementor .pnflow-section-text--on-dark a:hover,
.elementor .pnflow-section-text--on-dark a:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}


/* =========================================================
   TASTATURFOKUS
   Ring in --primary (14.9:1). Gold erreichte als
   Fokusindikator nur 2.3:1 und lag damit unter den
   geforderten 3:1 für grafische Elemente.
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Auf dunklen Flächen umgekehrt */
.pnflow-on-dark a:focus-visible,
.pnflow-on-dark button:focus-visible {
  outline-color: var(--cream);
}


/* =========================================================
   FORMULARE
   Grundlage für Kontaktformular und Amelia, damit beide
   später nicht im Plugin-Standard stehen.
========================================================= */

input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  padding: 14px 16px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.4;
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--secondary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), var(--alpha-medium));
}

::placeholder {
  color: var(--muted-text);
  opacity: 1;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--primary);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
}


/* =========================================================
   ELEMENTOR SHAPE DIVIDER
========================================================= */

.pnflow-hero .elementor-shape-bottom .elementor-shape-fill {
  fill: var(--pnflow-page-bg) !important;
}


/* =========================================================
   ELEMENTOR SHAPE DIVIDER · RESPONSIVE HÖHEN
========================================================= */

@media (max-width: 1024px) {
  .elementor-shape-top,
  .elementor-shape-bottom {
    height: clamp(36px, 6vw, 64px) !important;
  }
  .elementor-shape-top svg,
  .elementor-shape-bottom svg {
    height: 100% !important;
  }
}

@media (max-width: 767px) {
  .elementor-shape-top,
  .elementor-shape-bottom {
    height: clamp(24px, 8vw, 42px) !important;
  }
  .elementor-shape-top svg,
  .elementor-shape-bottom svg {
    height: 100% !important;
  }
}

@media (max-width: 480px) {
  .elementor-shape-top,
  .elementor-shape-bottom {
    height: 28px !important;
  }
}


/* =========================================================
   REDUZIERTE BEWEGUNG
   Gilt für die ganze Seite. Die einzelnen Sektionsdateien
   brauchen deshalb keine eigenen Blöcke – der
   Universalselektor mit !important greift überall.
========================================================= */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: -0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}