/* ============================================================
   P/W Consulting GmbH — Basis-Schicht
   Reset, Typografie, Buttons, Sektionen, Navigation, Footer.
   Gilt fuer jede Seite. Komplett neu geschrieben — bewusst ohne
   Bezug zu den alten Stylesheets (Spezifikation Abschnitt 9).
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Verhindert, dass eine einzelne zu breite Komponente die ganze
     Seite auf dem Handy seitlich verschiebbar macht. */
  overflow-x: hidden;
  background: var(--pw-white);
  color: var(--pw-ink);
  font-family: var(--pw-font-text);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--pw-font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  /* Deutsche Komposita sind lang: "Allgemeine Geschäftsbedingungen"
     passt auf schmalen Schirmen in keine Zeile. Mit lang="de" trennt
     der Browser korrekt; break-word ist der Notnagel, falls das
     Trennmuster fehlt. */
  hyphens: auto;
  overflow-wrap: break-word;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

/* Mehrere Werkzeuge blenden Bloecke ueber das hidden-Attribut aus —
   das darf keine Komponentenregel versehentlich ueberschreiben. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--pw-mint-ink);
  outline-offset: 3px;
}
.pw-dunkel :focus-visible,
.pw-nav :focus-visible,
.pw-mnav :focus-visible { outline-color: var(--pw-mint); }

/* Die Navigation klebt oben — angesprungene Abschnitte (#qng,
   #produktfinder, #zielgruppen) sonst teilweise darunter. */
:target { scroll-margin-top: clamp(78px, 10vh, 108px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Hilfsklassen ----------------------------------------- */
.pw-nur-screenreader {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pw-sprung {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px;
  background: var(--pw-mint); color: var(--pw-petrol-deep);
  font-weight: 700; border-radius: var(--pw-radius-chip);
  transition: top var(--pw-dauer) var(--pw-kurve);
}
.pw-sprung:focus { top: 12px; }

/* --- Raster ------------------------------------------------ */
.pw-inhalt {
  width: 100%;
  max-width: var(--pw-breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--pw-rand);
}

/* Helle Inhaltssektion (Standard) und ihre Variante auf Flaechenfarbe */
.pw-sektion {
  padding-block: var(--pw-abstand-sektion);
  background: var(--pw-white);
}
.pw-sektion--flaeche { background: var(--pw-surface); }
.pw-sektion--dunkel {
  background: var(--pw-petrol);
  color: var(--pw-on-dark-1);
}

/* --- Typografie-Bausteine ---------------------------------- */
.pw-kicker {
  margin: 0 0 14px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pw-mint-ink);
}
.pw-dunkel .pw-kicker,
.pw-sektion--dunkel .pw-kicker { color: var(--pw-mint); }

.pw-h2 { font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.3rem); }
.pw-h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem); font-weight: 700; }

.pw-lead {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 1.0625rem;
  color: var(--pw-ink-soft);
}

.pw-sektion__kopf { max-width: 68ch; }
.pw-sektion__kopf > .pw-kicker::before {
  content: '';
  display: block;
  width: 34px;
  height: var(--pw-linie-stark);
  margin-bottom: 16px;
  background: currentColor;
}
.pw-sektion__kopf + * { margin-top: clamp(28px, 4vw, 48px); }

/* --- Buttons ----------------------------------------------
   Zwei Paare: "hell" fuer dunklen Grund, "dunkel" fuer hellen
   Grund — jeweils gefuellt und als Outline. Kanten bleiben eckig.
   ---------------------------------------------------------- */
.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--pw-radius-chip);
  font-family: var(--pw-font-display);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition: background-color var(--pw-dauer) var(--pw-kurve),
              color var(--pw-dauer) var(--pw-kurve),
              border-color var(--pw-dauer) var(--pw-kurve),
              transform var(--pw-dauer) var(--pw-kurve);
}
.pw-btn:hover { transform: translateY(-1px); }
.pw-btn:active { transform: translateY(0); }
.pw-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* auf dunklem Grund */
.pw-btn--hell {
  background: var(--pw-mint);
  color: var(--pw-petrol-deep);
}
.pw-btn--hell:hover { background: var(--pw-mint-600); }

.pw-btn--hell-outline {
  background: transparent;
  color: var(--pw-mint);
  border-color: rgba(0, 235, 166, .45);
}
.pw-btn--hell-outline:hover {
  background: rgba(0, 235, 166, .12);
  border-color: var(--pw-mint);
}

/* auf hellem Grund */
.pw-btn--dunkel {
  background: var(--pw-petrol);
  color: var(--pw-white);
}
.pw-btn--dunkel:hover { background: var(--pw-petrol-deep); }

.pw-btn--dunkel-outline {
  background: transparent;
  color: var(--pw-petrol);
  border-color: var(--pw-border-strong);
}
.pw-btn--dunkel-outline:hover {
  background: var(--pw-mint-tint);
  border-color: var(--pw-petrol);
}

.pw-btn--breit { width: 100%; }

/* Textlink mit Pfeil */
.pw-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pw-font-display);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--pw-mint-ink);
}
.pw-textlink {
  padding-bottom: 3px;
  border-bottom: 2px solid rgba(0, 179, 129, .35);
  transition: border-color var(--pw-dauer) var(--pw-kurve);
}
.pw-textlink:hover { border-bottom-color: currentColor; }
.pw-dunkel .pw-textlink,
.pw-sektion--dunkel .pw-textlink { color: var(--pw-mint); }

/* --- Dunkle Markenebene ------------------------------------
   Grundlage für Hero (Startseite) und Seitenkopf (Unterseiten).
   Gehört in die Basis-Schicht, weil sie auf jeder Seite vorkommt. */
.pw-dunkel {
  position: relative;
  background: var(--pw-petrol);
  color: var(--pw-on-dark-1);
}
/* Sehr dezente Aufhellung, damit die Fläche nicht als flacher
   Farbblock wirkt. */
.pw-dunkel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 12% 0%, rgba(10, 93, 88, .75), transparent 62%);
  pointer-events: none;
}
.pw-dunkel > * { position: relative; }

/* Kicker auf dunklem Grund, mit Akzentlinie darüber. */
.pw-kicker-dunkel {
  margin: 0 0 18px;
  font-family: var(--pw-font-display);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pw-mint);
}
.pw-kicker-dunkel::before {
  content: '';
  display: block;
  width: 34px;
  height: var(--pw-linie-stark);
  margin-bottom: 16px;
  background: var(--pw-mint);
}

/* --- Navigation (Glas, sticky) ----------------------------- */
/* Glas-Navigation: über dem dunklen Seitenkopf gar kein Balken —
   Logo und Links stehen direkt auf der Markenfläche. Erst beim
   Scrollen legt sich mattiertes Glas darunter (Klasse is-glas,
   gesetzt in js/navigation.js). Auf Seiten ohne dunklen Kopf
   (Bestellstrecke) ist das Glas von Anfang an da. */
.pw-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 14px var(--pw-rand);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--pw-kurve),
              border-color 240ms var(--pw-kurve);
}

.pw-nav.is-glas {
  /* Durchsichtig genug, dass der Inhalt darunter sichtbar
     durchscheint und beim Scrollen mitwandert — aber dunkel genug,
     dass die weiße Schrift auch über den hellen Abschnitten lesbar
     bleibt. Unter etwa 0.7 kippt der Kontrast. */
  background: rgba(1, 44, 41, .72);
  border-bottom-color: rgba(0, 235, 166, .16);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
}

/* Ohne Backdrop-Filter (ältere Browser) gäbe es keine Mattierung —
   dann muss die Fläche decken, sonst wird die Schrift unlesbar. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pw-nav.is-glas { background: var(--pw-petrol-deep); }
}
.pw-nav__marke { flex: 0 0 auto; }
.pw-nav__marke img { width: 112px; height: auto; }

.pw-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 30px);
  margin-left: auto;
}
.pw-nav__link {
  position: relative;
  padding: 6px 0;
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 500;
  color: var(--pw-on-dark-1);
  white-space: nowrap;
  transition: color var(--pw-dauer) var(--pw-kurve);
}
.pw-nav__link:hover { color: var(--pw-white); }
.pw-nav__link[aria-current='page'] { color: var(--pw-mint); font-weight: 600; }
.pw-nav__link[aria-current='page']::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: var(--pw-linie-stark);
  background: var(--pw-mint);
}

.pw-nav__cta {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid rgba(0, 235, 166, .45);
  border-radius: var(--pw-radius-chip);
  font-family: var(--pw-font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--pw-mint);
  white-space: nowrap;
  transition: background-color var(--pw-dauer) var(--pw-kurve),
              border-color var(--pw-dauer) var(--pw-kurve);
}
.pw-nav__cta:hover { background: rgba(0, 235, 166, .14); border-color: var(--pw-mint); }

.pw-nav__burger {
  display: none;
  margin-left: auto;
  padding: 9px;
  background: transparent;
  border: 1px solid rgba(0, 235, 166, .35);
  border-radius: var(--pw-radius-chip);
  color: var(--pw-mint);
}

/* Die Leiste schwebt — der oberste Block jeder Seite braucht daher
   den Platz als Innenabstand, sonst laege er darunter. */
main > .pw-dunkel:first-child { padding-top: var(--pw-nav-hoehe); }

/* --- Mobiles Vollbild-Menue -------------------------------- */
.pw-mnav {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  flex-direction: column;
  padding: 18px var(--pw-rand) 28px;
  background: rgba(1, 44, 41, .985);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pw-mnav.is-offen { display: flex; }

.pw-mnav__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pw-mnav__kopf img { width: 100px; height: auto; }
.pw-mnav__schliessen {
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(0, 235, 166, .35);
  border-radius: var(--pw-radius-chip);
  color: var(--pw-mint);
}

.pw-mnav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(28px, 7vh, 56px);
}
.pw-mnav__links a {
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 235, 166, .12);
  font-family: var(--pw-font-display);
  font-size: clamp(1.4rem, 1.1rem + 2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pw-white);
}
.pw-mnav__links a[aria-current='page'] { color: var(--pw-mint); }
.pw-mnav__cta { margin-top: auto; padding-top: 28px; }

@media (max-width: 1000px) {
  .pw-nav__links, .pw-nav__cta { display: none; }
  .pw-nav__burger { display: block; }
}

/* --- Footer ------------------------------------------------ */
.pw-footer {
  padding-top: clamp(44px, 6vw, 80px);
  background: var(--pw-petrol-deep);
  color: var(--pw-on-dark-1);
}
.pw-footer__raster {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.pw-footer__logo { display: inline-block; max-width: 100%; }
.pw-footer__logo img { display: block; width: 170px; max-width: 100%; height: auto; }
.pw-footer__slogan {
  margin-top: 24px;
  font-family: var(--pw-font-display);
  font-size: clamp(1rem, .9rem + .3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--pw-white);
}
.pw-footer__spalte h2 {
  margin: 0 0 16px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pw-on-dark-3);
}
.pw-footer__spalte a {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding-block: 9px;
  font-size: .9375rem;
  overflow-wrap: anywhere;
  color: var(--pw-on-dark-1);
}
.pw-footer__spalte address { font-style: normal; font-size: .9375rem; line-height: 1.7; margin-top: 16px; }
.pw-footer__spalte .pw-footer__kontakt { margin-top: 14px; color: var(--pw-mint); }
.pw-footer a { transition: color var(--pw-dauer) var(--pw-kurve); }
.pw-footer a:hover { color: var(--pw-mint); }
.pw-footer__schluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(36px, 5vw, 64px);
  padding-block: 18px;
  border-top: 1px solid rgba(215, 233, 229, .18);
  font-size: .8125rem;
  color: var(--pw-on-dark-3);
}
.pw-footer__schluss nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pw-footer__schluss a { display: inline-block; padding-block: 10px; color: inherit; }
@media (max-width: 900px) {
  .pw-footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .pw-footer__marke { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pw-footer__raster { grid-template-columns: 1fr; gap: 32px; }
  .pw-footer__logo img { width: 150px; }
  .pw-footer__spalte a { min-height: 44px; }
  .pw-footer__schluss { align-items: flex-start; flex-direction: column; }
  .pw-footer__schluss a { min-height: 44px; }
}

/* Ein Pfeilstil für sämtliche Aktionslinks und Buttons. */
.pw-aktionspfeil {
  --pfeil-winkel: 0deg;
  --pfeil-x: 3px;
  --pfeil-y: 0px;
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  vertical-align: -.15em;
  transform: rotate(var(--pfeil-winkel));
  transition: transform 180ms ease;
  pointer-events: none;
}
.pw-aktionspfeil::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 8px;
  width: 13px;
  border-top: 1.5px solid currentColor;
}
.pw-aktionspfeil::after {
  content: '';
  position: absolute;
  right: 3px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
@media (hover: hover) {
  a:hover .pw-aktionspfeil, button:not(:disabled):hover .pw-aktionspfeil {
    transform: translate(var(--pfeil-x), var(--pfeil-y)) rotate(var(--pfeil-winkel));
  }
}
a:focus-visible .pw-aktionspfeil, button:focus-visible .pw-aktionspfeil {
  transform: translate(var(--pfeil-x), var(--pfeil-y)) rotate(var(--pfeil-winkel));
}
@media (prefers-reduced-motion: reduce) {
  .pw-aktionspfeil { transition: none; }
  a:hover .pw-aktionspfeil, button:hover .pw-aktionspfeil,
  a:focus-visible .pw-aktionspfeil, button:focus-visible .pw-aktionspfeil { transform: rotate(var(--pfeil-winkel)); }
}