/* =========================================================
   PNFLOW TYPOGRAFIE
   Alle Größen kommen aus pnflow-variables.css.
   In dieser Datei stehen keine festen px-Werte mehr.
========================================================= */


/* =========================================================
   BASIS
========================================================= */

body {
  font-family: var(--font-secondary);
  font-size: 20px;
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   HEADLINES BASIS
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
  margin-top: 0;
  font-family: var(--font-primary);
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: var(--ls-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: var(--ls-h2);
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
}
h4 {
  font-size: var(--fs-h4);
  line-height: 1.25;
  font-weight: 600;
}
h5 {
  font-size: var(--fs-h5);
  line-height: 1.3;
  font-weight: 600;
}
h6 {
  font-size: var(--fs-h6);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* =========================================================
   FLIESSTEXT
========================================================= */

p,
li,
.elementor-widget-text-editor > .elementor-widget-container {
  font-family: var(--font-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
}


/* =========================================================
   LISTEN
========================================================= */

ul,
ol {
  margin-top: 0;
}
li + li {
  margin-top: 0.35em;
}


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

small,
.pnflow-text-small {
  font-size: var(--fs-small);
  line-height: 1.5;
}


/* =========================================================
   LEAD / EINLEITUNGSTEXT
========================================================= */

.pnflow-lead,
.pnflow-lead p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  font-weight: 500;
}


/* =========================================================
   KICKER / EYEBROW
   Eine Komponente für die gesamte Seite.
   Ersetzt: .pnflow-intro-eyebrow, .pnflow-cta-eyebrow,
   .hub-hero-eyebrow, .page-offer-hero-eyebrow,
   .page-legal-kicker und alle .page-about-*-kicker.

   Verwendung in Elementor (Klasse ohne Punkt):
     pnflow-kicker                     Standard
     pnflow-kicker pnflow-kicker--sm   kleinere Variante
     pnflow-kicker pnflow-kicker--center   zentriert
     pnflow-kicker pnflow-kicker--on-dark  auf dunkelblauer Fläche
     pnflow-kicker pnflow-kicker--on-green auf grüner Fläche
     pnflow-kicker pnflow-kicker--plain    ohne Strich

   Funktioniert auf Überschrift- und Textfeld-Widgets.
========================================================= */


/* Wrapper neutralisieren, damit die Sektionen das nicht mehr tun müssen */

.pnflow-kicker {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pnflow-kicker .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}


/* Das eigentliche Textelement.
   Der Einzug wird gerechnet: Strichbreite + Abstand.
   Ändert sich --kicker-line-w, wandert der Text automatisch mit. */

.pnflow-kicker .elementor-heading-title,
.pnflow-kicker p,
p.pnflow-kicker,
span.pnflow-kicker {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  padding: 0 0 0 calc(var(--kicker-line-w) + var(--kicker-gap)) !important;
  color: var(--kicker-color) !important;
  font-family: var(--font-primary) !important;
  font-size: var(--kicker-size) !important;
  line-height: 1.2 !important;
  font-weight: var(--kicker-weight) !important;
  letter-spacing: var(--kicker-tracking) !important;
  text-transform: uppercase !important;
}


/* Strich: currentColor, damit Text und Strich nie auseinanderlaufen */

.pnflow-kicker .elementor-heading-title::before,
.pnflow-kicker p::before,
p.pnflow-kicker::before,
span.pnflow-kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--kicker-line-w);
  height: var(--kicker-line-h);
  transform: translateY(-50%);
  background-color: var(--kicker-line-color);
}


/* Modifier: Größe
   Standard ist 15px. --sm für Stellen, an denen der Kicker
   zurücktreten soll. */

.pnflow-kicker--sm {
  --kicker-size: var(--kicker-size-sm);
  --kicker-line-w: 24px;
}


/* Modifier: Ausrichtung */

.pnflow-kicker--center {
  margin-left: auto !important;
  margin-right: auto !important;
}
.pnflow-kicker--center .elementor-heading-title,
.pnflow-kicker--center p {
  text-align: left !important;
}


/* Modifier: Farbflächen.
   Gold erreicht auf Dunkelblau 6.4:1, auf dem kräftigen Grün
   aber nur 2.1:1 – dort wird deshalb auf Creme gewechselt. */

.pnflow-kicker--on-dark {
  --kicker-color: var(--kicker-color-dark);
  --kicker-line-color: var(--accent);
}
.pnflow-kicker--on-green {
  --kicker-color: var(--kicker-color-green);
  --kicker-line-color: var(--cream);
}


/* Modifier: ohne Strich */

.pnflow-kicker--plain .elementor-heading-title,
.pnflow-kicker--plain p {
  padding-left: 0 !important;
}
.pnflow-kicker--plain .elementor-heading-title::before,
.pnflow-kicker--plain p::before {
  content: none;
}


/* =========================================================
   SECTION TITLE
   Basisklasse plus Modifier statt eigener Klassen
   pro Sektion.
========================================================= */

.pnflow-section-title,
.pnflow-section-title .elementor-heading-title {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  color: var(--primary);
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: var(--ls-h2);
  text-wrap: balance;
  text-align: center;
}

.pnflow-section-title--h3,
.pnflow-section-title--h3 .elementor-heading-title {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  color: var(--primary);
  font-family: var(--font-primary);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  text-wrap: balance;
  text-align: center;
}


/* Hero-Variante: größer und kräftiger, ersetzt .hub-hero-title & Co. */

.pnflow-section-title--hero,
.pnflow-section-title--hero .elementor-heading-title {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: var(--ls-h1);
}


/* Ausrichtung */

.pnflow-section-title--left,
.pnflow-section-title--left .elementor-heading-title {
  text-align: left;
}


/* Auf dunklen Flächen */

.pnflow-section-title--on-dark,
.pnflow-section-title--on-dark .elementor-heading-title {
  color: var(--text-on-dark);
}


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

.pnflow-section-text,
.pnflow-section-text p {
  max-width: 720px;
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.pnflow-section-text--on-dark p {
  color: var(--text-on-dark-muted);
}

/* Modifier: breitere Textspalte für längere Artikelabschnitte,
   die links unter einer vollbreiten Überschrift stehen.
   Zusätzlich zu pnflow-section-text vergeben. */

.pnflow-section-text--wide,
.pnflow-section-text--wide p {
    max-width: none;
}


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

.pnflow-text-muted {
  color: var(--muted-text);
}
.pnflow-text-center {
  text-align: center;
}
.pnflow-text-left {
  text-align: left;
}


/* =========================================================
   ENTFERNT
   Die frühere Regel
     @media (hover: hover) { a:hover { color: var(--accent) !important } }
   ist ersatzlos gestrichen. Sie hat den Kontrast beim Hover
   von 6.8:1 auf 2.3:1 gesenkt und per !important auch
   Navigation und Buttons überschrieben.
   Die Link-Zustände stehen jetzt vollständig in base.css.
========================================================= */