/*
Theme Name: Lebensberatung Freyher
Theme URI: https://lebensberatung-freyher.de
Author: Nils Freyher
Description: Individuelles Theme für Lebensberatung & Potentialentfaltung (Nils Freyher).
Version: 1.0.0
Text Domain: lebensberatung-freyher
*/

/* ==========================================================
   Lebensberatung Nils Freyher – Shared Stylesheet
   ========================================================== */

:root{
  /* Palette matched to the reference watercolor swatch: a vivid teal,
     a soft peach-orange, and white — the old darker/brownish shades
     (orange-dark, footer-1/2, turquoise-dark) are kept as aliases so
     nothing breaks, but they now resolve to these same pastel tones. */
  --orange: #FAB478;
  --orange-dark: #FAB478;
  --orange-light: #FCC79A;
  --orange-tint: #FDEDDF;
  --turquoise: #15AEB8;
  --turquoise-dark: #15AEB8;
  --turquoise-tint: #DFF6F5;
  /* Softer, warmer teal for the footer — leaning a little toward the
     orange side of the palette instead of the vivid, saturated turquoise. */
  --turquoise-soft: #5AB0A5;
  --footer-1: #5AB0A5;
  --footer-2: #5AB0A5;
  --cream: #FFFBF7;
  --text: #3A2A1F;
  --text-soft: #6E5B4E;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(219, 138, 93, 0.18);
  --radius: 22px;
  --max-width: 1180px;
  /* True reference-image colors, no darkening wash — the mixed teal→peach
     gradient plus the two plain washes, used as-is on the bold panels. */
  --panel-gradient: linear-gradient(135deg, var(--turquoise) 0%, var(--orange) 100%);
  --panel-turquoise-dark: var(--turquoise-soft);
  --panel-orange-dark: var(--orange);
  /* Subtle paper-grain noise, layered on top of the gradient panels. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.4' intercept='-1.2'/%3E%3CfeFuncG type='linear' slope='3.4' intercept='-1.2'/%3E%3CfeFuncB type='linear' slope='3.4' intercept='-1.2'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 0.5em;
}

h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2{ font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--text-soft); }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display: block; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------------- Navigation ---------------- */

.site-header{
  background: var(--panel-orange-dark);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  overflow: hidden;
}
.site-header::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.nav{
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand{
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 14px rgba(0,0,0,0.3);
  font-family: "Georgia", serif;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand span{
  font-family: "Segoe UI", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}

.nav-links{
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a{
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 14px rgba(0,0,0,0.3);
  font-size: 0.98rem;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background 0.25s ease, transform 0.2s ease;
  display: inline-block;
}

.nav-links a:hover{
  background: rgba(255,255,255,0.18);
}

.nav-links a.active{
  background: rgba(255,255,255,0.28);
}

.nav-cta{
  border: 1.5px solid rgba(255,255,255,0.6) !important;
}

.nav-toggle{
  display: none;
  background: none;
  border: none;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width: 780px){
  .nav-links{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--panel-orange-dark);
    flex-direction: column;
    padding: 12px 20px 20px;
    gap: 4px;
    display: none;
  }
  .nav-links.open{ display: flex; }
  .nav-toggle{ display: block; }
}

/* ---------------- Section base + curved transitions ---------------- */

section{
  position: relative;
  padding: 100px 0 130px;
  overflow: hidden;
}

section.tint-cream{ background: var(--cream); }
section.tint-orange{ background: var(--orange-tint); }
section.tint-turquoise{ background: var(--turquoise-tint); }
section.tint-dark{ background: var(--panel-gradient); color: var(--text); }
section.tint-dark::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
section.tint-dark .container{ position: relative; z-index: 1; }
section.tint-dark h2, section.tint-dark h3{ color: var(--text); }
section.tint-dark p{ color: var(--text-soft); }
/* Cards keep their own white background, so their heading/text need to
   stay dark instead of inheriting the dark set above (harmless here, but
   kept explicit in case the base card text color ever changes). */
section.tint-dark .card h3{ color: var(--text); }
section.tint-dark .card p{ color: var(--text-soft); }
/* .btn-primary is turquoise-on-white by default, which can wash out
   against this section's own teal-to-orange wash — set it off in solid
   orange instead, the same way the cards below get an orange accent. */
section.tint-dark .btn-primary{
  background: var(--orange);
  color: var(--text);
  box-shadow: 0 10px 24px rgba(58,42,31,0.18);
}
section.tint-dark .btn-primary:hover{ background: var(--orange-light); }

/* Cards keep the same white-box-with-top-accent-strip look used elsewhere,
   just with the strip in orange so it stands out against this turquoise
   section instead of blending into it. */
section.tint-dark .card{ border-top-color: var(--orange); }

.curve{
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.curve-top{ top: -1px; }
.curve-bottom{ bottom: -1px; transform: scaleY(-1); }
.curve svg{ width: 100%; height: 90px; display: block; }

/* The grain texture on .curve-grain waves is painted inline in the SVG
   itself (a second path, same "d", filled via feTurbulence) so it's
   clipped to the wave shape instead of covering the whole rectangular
   box the way a CSS background layer would. */

/* Header wave: hangs fully below the sticky nav bar, dipping into the
   content beneath it instead of overlapping the menu itself. */
.site-header .curve{
  top: 100%;
  bottom: auto;
}
.site-header .curve svg{ height: 60px; }

/* ---------------- Hero eyebrow (shared pill label) ---------------- */

.hero-eyebrow{
  display: inline-block;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--white);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero-actions{
  display: flex;
  gap: 16px;
  margin-top: 34px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------- Buttons ---------------- */

.btn{
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-primary{
  background: var(--turquoise);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(44, 191, 174, 0.35);
}
.btn-primary:hover{ background: var(--turquoise-dark); transform: translateY(-2px); }

.btn-outline{
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.8);
}
.btn-outline:hover{ background: rgba(255,255,255,0.15); transform: translateY(-2px); }

.btn-dark-outline{
  background: transparent;
  color: var(--orange-dark);
  border: 1.5px solid var(--orange);
}
.btn-dark-outline:hover{ background: var(--orange-tint); transform: translateY(-2px); }

/* ---------------- Cards / grids ---------------- */

.eyebrow{
  color: var(--turquoise-dark);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.section-head{
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.grid{
  display: grid;
  gap: 28px;
}

.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px){
  .grid-3, .grid-2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--turquoise);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: center;
}

.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(198, 80, 30, 0.2);
}

.card .icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--orange-tint);
  color: var(--orange-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.icon svg{
  width: 26px;
  height: 26px;
  stroke: currentColor;
}

.contact-info-item .icon svg{
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.pill{
  display: inline-block;
  background: var(--turquoise-tint);
  color: var(--turquoise-dark);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  text-align: center;
}
.two-col p{
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
}
@media (max-width: 900px){
  .two-col{ grid-template-columns: 1fr; gap: 36px; }
}

.image-frame{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 6px solid var(--white);
}

/* ---------------- Ablauf: vertical path with numbered steps ---------------- */

.path-steps{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 46px;
  padding-left: 76px;
  max-width: 640px;
  margin: 0 auto;
}

.path-steps-track{
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
}
.path-steps-track svg{ width: 100%; height: 100%; display: block; overflow: visible; }
.path-steps-track path{
  fill: none;
  stroke: var(--turquoise-dark);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
}
.path-steps-track path.ready{ opacity: 1; }

.path-step{
  position: relative;
  min-height: 46px;
}

.path-step-dot{
  position: absolute;
  left: -76px;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  border: 2.5px solid var(--turquoise-dark);
  color: var(--turquoise-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: "Georgia", serif;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.path-step-dot.visible{ opacity: 1; transform: scale(1); }

.path-step-body{
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.path-step-body.visible{ opacity: 1; transform: translateX(0); }

.path-step h3{ margin-bottom: 6px; }
.path-step p{ margin: 0; }

@media (max-width: 560px){
  .path-steps{ padding-left: 60px; gap: 38px; }
  .path-steps-track{ width: 32px; }
  .path-step-dot{ left: -60px; width: 34px; height: 34px; font-size: 0.9rem; }
}

/* ---------------- Contact ---------------- */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 50px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-info-item{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}

.contact-info-item .icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--turquoise-tint);
  color: var(--turquoise-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

form{
  background: var(--white);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow);
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 560px){
  .form-row{ grid-template-columns: 1fr; }
}

label{
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

input, textarea, select{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #EFE1D5;
  background: var(--cream);
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 18px;
  resize: vertical;
}

input:focus, textarea:focus, select:focus{
  outline: none;
  border-color: var(--turquoise);
  background: var(--white);
}

/* ---------------- Footer ---------------- */

footer{
  position: relative;
  background: var(--panel-turquoise-dark);
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 14px rgba(0,0,0,0.25);
  padding: 60px 0 30px;
  text-align: center;
  overflow: hidden;
}
footer::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
footer .container{ position: relative; z-index: 1; }

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 700px){
  .footer-grid{ grid-template-columns: 1fr; }
}

footer h4{ color: var(--white); font-family: "Segoe UI", sans-serif; font-size: 1rem; }

/* Overrides the global p{ color: var(--text-soft) } rule, which otherwise
   wins over the inherited footer text color for the tagline under the
   footer-brand heading. */
footer p{ color: rgba(255,255,255,0.85); }

footer a{ color: rgba(255,255,255,0.85); }
footer a:hover{ color: var(--white); }

footer ul{ list-style: none; padding: 0; margin: 0; }
footer li{ margin-bottom: 10px; }

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.3);
  padding-top: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.8);
}

.footer-brand{
  font-family: "Georgia", serif;
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 12px;
}

/* ---------------- Page hero (non-home pages) ---------------- */

.page-hero{
  color: var(--white);
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 66vh;
  display: flex;
  align-items: center;
  background: #16110c;
}
.page-hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.page-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(18,10,5,0.58) 0%, rgba(18,10,5,0.3) 45%, rgba(18,10,5,0.62) 100%);
}
.page-hero .container{
  position: relative;
  z-index: 2;
  padding-top: 70px;
  padding-bottom: 70px;
}
.page-hero .hero-eyebrow{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.page-hero .hero-eyebrow.visible{ opacity: 1; transform: translateY(0); }
.page-hero h1{ color: var(--white); min-height: 1.2em; }
.page-hero h1 .type-cursor{
  display: inline-block;
  width: 3px;
  margin-left: 3px;
  background: var(--white);
  opacity: 0;
  animation: page-hero-cursor-blink 0.9s step-end infinite;
  vertical-align: -0.1em;
  height: 0.85em;
}
.page-hero h1.typing .type-cursor{ opacity: 1; }
@keyframes page-hero-cursor-blink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0; }
}
.page-hero p{
  color: rgba(255,255,255,0.9);
  max-width: 560px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.page-hero p.visible{ opacity: 1; transform: translateY(0); }

@media (max-width: 700px){
  .page-hero{ min-height: 50vh; }
  .page-hero .container{ padding-top: 50px; padding-bottom: 50px; }
}


/* Logo neben dem Namen */
.nf-brand-wrap{ display:flex; align-items:center; gap:12px; }
.nf-logo{ display:block; line-height:0; }
.nf-logo-img{ height:48px; width:auto; display:block; }
@media (max-width:780px){ .nf-logo-img{ height:38px; } }

/* ---------------- Responsive: Unterseiten-Hero ---------------- */
.page-hero .container{ width: 100%; box-sizing: border-box; }
.page-hero h1{ overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; margin-left: auto; margin-right: auto; text-wrap: balance; }
.page-hero p{ max-width: min(560px, 100%); }
.page-hero .hero-eyebrow{ max-width: 100%; }
@media (max-width: 700px){
  .page-hero{ min-height: 66svh; }
  .page-hero .container{ padding: 56px 22px 64px; }
  .page-hero h1{ font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.22; }
  .page-hero p{ font-size: 0.98rem; }
  .page-hero .hero-eyebrow{ font-size: 0.7rem; letter-spacing: 0.1em; padding: 5px 13px; }
}
@media (max-width: 380px){
  .page-hero .container{ padding-left: 16px; padding-right: 16px; }
}

.grid-4{ display:grid; gap:24px; grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-4{ grid-template-columns:1fr; } }

/* Mobile: Karten zentriert, nichts läuft über */
.grid > *{ min-width:0; }
.card{ box-sizing:border-box; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; }
@media (max-width:900px){
  .grid-2,.grid-3{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .grid-4{ grid-template-columns:minmax(0,1fr); }
  .container{ padding-left:20px; padding-right:20px; }
  .grid{ gap:20px; width:100%; margin-left:auto; margin-right:auto; }
  .card{ padding:26px 20px; width:100%; }
  .card h3{ font-size:1.2rem; }
}

/* Menü auf Unterseiten: Dropdown nicht abschneiden */
@media (max-width:780px){
  .site-header{ overflow:visible; }
  .nav-links{ z-index:200; box-shadow:0 12px 24px rgba(0,0,0,.15); }
  .nav-toggle{ position:relative; z-index:201; }
}
/* Kompakte Sektion (Ablauf: Was dich erwartet) */
section.nf-compact{ padding:48px 0 56px; }
section.nf-compact .section-head{ margin-bottom:0; }
@media (max-width:640px){ section.nf-compact{ padding:32px 0 40px; } }

/* ---- Unterseiten: Bild über volle Bildschirmhöhe. Oben (2/3) Hero, unten (1/3) die erste Überschrift
        als eigene, durchgehende Sektion mit Wellenkante und leicht weißer Transparenz ---- */
:root{ --hh:90px; }
@media (max-width:860px){ :root{ --hh:104px; } }
@media (max-width:600px){ :root{ --hh:76px; } }
.page-hero{ --frame:calc(100vh - var(--hh)); --frame:calc(100svh - var(--hh)); }
.page-hero:has(+ section > .container > .section-head:first-child){
  min-height:calc(var(--frame) * .66 + 60px); padding-bottom:60px; box-sizing:border-box;
}
.page-hero:has(+ section > .container > .section-head:first-child) .page-hero-video{ height:var(--frame); bottom:auto; }
.page-hero:has(+ section > .container > .section-head:first-child) .curve-bottom{ display:none; }
.page-hero + section:has(> .container > .section-head:first-child){
  margin-top:-60px; padding-top:0; position:relative; z-index:4;
  background:linear-gradient(to bottom, transparent 60px, var(--cream) 60px);
}
.page-hero + section.tint-turquoise:has(> .container > .section-head:first-child){
  background:linear-gradient(to bottom, transparent 60px, var(--turquoise-tint) 60px);
}
.page-hero + section > .container > .section-head:first-child{
  --frame:calc(100vh - var(--hh)); --frame:calc(100svh - var(--hh));
  width:100vw; max-width:none; box-sizing:border-box;
  margin:0 calc(50% - 50vw) 56px;
  min-height:calc(var(--frame) * .34);
  padding:96px 24px 44px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:
    linear-gradient(rgba(255,255,255,.66), rgba(255,255,255,.66)),
    url("assets/hero-poster.jpg") center / cover no-repeat;
  background-size:auto, max(100vw, calc(var(--frame) * 1.5209)) auto;
  background-position:0 0, center calc(100% + max(0px, calc((65.75vw - var(--frame)) / 2)));
  clip-path:polygon(0.0% 33.5px, 1.9% 26.4px, 3.9% 20.4px, 6.0% 15.4px, 8.2% 11.5px, 10.4% 8.4px, 12.8% 6.2px, 15.2% 4.7px, 17.6% 4.0px, 20.1% 4.0px, 22.7% 4.6px, 25.3% 5.8px, 27.9% 7.4px, 30.6% 9.5px, 33.3% 12.0px, 36.0% 14.8px, 38.8% 17.9px, 41.6% 21.2px, 44.4% 24.6px, 47.2% 28.1px, 50.0% 31.7px, 52.8% 35.2px, 55.6% 38.6px, 58.4% 41.9px, 61.2% 45.0px, 64.0% 47.8px, 66.7% 50.3px, 69.4% 52.5px, 72.1% 54.1px, 74.7% 55.3px, 77.3% 56.0px, 79.9% 56.0px, 82.4% 55.4px, 84.8% 54.0px, 87.2% 51.8px, 89.6% 48.8px, 91.8% 44.9px, 94.0% 40.0px, 96.1% 34.1px, 98.1% 27.1px, 100.0% 18.9px, 100% 100%, 0% 100%);
}
.page-hero + section > .container > .section-head:first-child > *{ max-width:680px; }
.page-hero + section > .container > .section-head:first-child h2,
.page-hero + section > .container > .section-head:first-child p{ color:var(--text); }
@media (max-width:640px){ .page-hero + section > .container > .section-head:first-child{ padding:84px 20px 36px; } }

/* Ablauf: Überschriften-Sektion ohne leere Fläche danach */
.page-hero + section.nf-compact{ padding-bottom:0; }
.page-hero + section.nf-compact > .container > .section-head:first-child{ margin-bottom:0; }
.page-hero + section.nf-compact + section > .curve-top{ display:none; }
.page-hero + section.nf-compact + section{ padding-top:90px; }