/*
Theme Name: WeldNova
Theme URI: https://weldnova.com
Author: WeldNova GmbH
Author URI: https://weldnova.com
Description: Custom Block-Theme (FSE) fuer weldnova.com. Verkauft das Ergebnis — Single-Pass-Schweißen auf Dickblech, Abrechnung pro Meter Naht. Englisch, DSGVO-konform, self-hosted Fonts (Avenir Next 200/400/600, Nunito Sans als Fallback). Marke strikt nach theme.json: Navy/Blau/Weiß, eckige Ecken, keine Schatten.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: weldnova
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, translation-ready
*/

/*
 * Der Grossteil des Stylings kommt aus theme.json (Farben, Typo, Abstaende, Buttons).
 * Hier nur, was theme.json nicht abbildet: Rendering-Feinschliff und Barrierefreiheit.
 * Hinweis: Die Avenir-Next-Schriftdateien sind lizenziert (nicht GPL); der Theme-Code ist GPL.
 */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ausgewogene Zeilenumbrueche in Ueberschriften (kein Deko-Element, nur Satz). */
h1, h2, h3,
.wp-block-heading {
  text-wrap: balance;
}

/* Sichtbarer Tastatur-Fokus (WCAG AA, Tastaturbedienung). Kein Fokusring bei Mausklick. */
:where(a, button, input, select, textarea, summary, .wp-block-button__link):focus-visible {
  outline: 2px solid var(--wp--preset--color--navy, #002D6E);
  outline-offset: 2px;
}

/* Bilder nie ueber ihre Box hinaus. */
img {
  max-width: 100%;
  height: auto;
}

/* ===================================================================
   Header & Footer (Schritt 2)
   =================================================================== */

/* Sticky Header — der <header>-Wrapper der Template-Part (nur Header nutzt tagName header). */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wp--preset--color--white);
}

/* Zweifarbige Wortmarke „WeldNova" (core/html, damit der Editor sie nicht zerlegt). */
.weldnova-wordmark {
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.weldnova-wordmark .wm-weld { color: var(--wp--preset--color--navy); }
.weldnova-wordmark .wm-nova { color: var(--wp--preset--color--gray); }

/* Voll-Logo: offizielle SVG-Dateien (Icon-Mark + Wortmarke). */
.weldnova-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; }

/* Header: Icon-Mark als Bild (zweifarbig Navy/Grau) neben der Live-Wortmarke. */
.weldnova-header .wn-mark {
  display: inline-block;
  flex: none;
  width: 38px;
  height: 38px;
  background: url("assets/logo/mark.svg") center / contain no-repeat;
}

/* Navigation: Gewicht + Hover/Fokus auf Navy. */
.weldnova-header .wp-block-navigation { font-weight: 600; }
.weldnova-header .wp-block-navigation a:hover,
.weldnova-header .wp-block-navigation a:focus-visible {
  color: var(--wp--preset--color--navy);
}


/* Foerder-Band (weiss, ueber dem Navy-Footer): BAM-Ausgruendung links, offizielle
   Foerder-Logoleiste rechts. Logos unveraendert auf Weiss (Vorgabe der Foerdergeber). */
.wn-funding-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px 56px; }
.wn-funding-bam { display: flex; align-items: center; gap: 12px; max-width: 500px; }
.wn-funding-bam img { flex: none; width: 140px; height: auto; }  /* PNG enthaelt die Schutzzone */
.wn-funding-bam p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--wp--preset--color--gray-600); }
.wn-funding-strip { display: block; width: 300px; max-width: 100%; height: auto; }

/* Footer (Navy): weisse Links ohne Unterstrich, Unterstrich bei Hover/Fokus. */
.weldnova-footer a { color: var(--wp--preset--color--white); text-decoration: none; }
.weldnova-footer a:hover,
.weldnova-footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.wn-footer-claim { margin-top: 22px; max-width: 34ch; line-height: 1.6; }
.wn-footer-k { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.wn-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.wn-footer-address { margin: 0 0 14px; font-style: normal; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--white); }
.wn-footer-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; }
.wn-footer-bar p { margin: 0; }
.wn-footer-bar a + a { margin-left: 22px; }

/* Fokusring auf dunklen Flaechen weiss statt Navy (sonst unsichtbar). */
.weldnova-footer :focus-visible,
.wn-hero :focus-visible,
.has-navy-background-color :focus-visible { outline-color: var(--wp--preset--color--white); }

/* Footer-Logo: komplettes Lockup in Weiss (offizielles SVG, umgefaerbt), nicht unterstrichen. */
.weldnova-footer .weldnova-logo { text-decoration: none; }
.weldnova-footer .wn-logo {
  display: block;
  width: 133px;
  height: 64px;                 /* Seitenverhaeltnis 2.084 : 1 (viewBox 35000 x 16792) */
  background: url("assets/logo/lockup-white.svg") left center / contain no-repeat;
}

/* Zusatz-Idee: unter Tablet nur die Icon-Mark im Header, Wortmarke ab Tablet.
   Engere Abstaende, damit Links + Contact bis zum Mobil-Overlay (<=600px, Navigations-
   Block) in einer Zeile bleiben. */
@media (max-width: 781px) {
  .weldnova-header .weldnova-wordmark { display: none; }
  .weldnova-header .weldnova-actions,
  .weldnova-header .wp-block-navigation,
  .weldnova-header .wp-block-navigation__container { gap: 18px; }
}

/* ===================================================================
   Startseiten-Sektionen (Schritt 3)
   Struktur = Core-Blocks; hier nur die markenspezifischen Feinheiten.
   =================================================================== */

/* Eyebrow — kleines Label ueber der Ueberschrift. */
.wn-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--blue-primary);
}

/* Lead — ruhige Ultra-Light-Einleitung. */
.wn-lead { font-weight: 200; }

/* Hero-H1: zweite Zeile in Ultra Light (Demi + Light-Paarung). */
.wn-lt { display: block; font-weight: 200; color: var(--wp--preset--color--gray-600); }

/* Hero-Figur: scharfer Nahtquerschnitt im 1-px-Rahmen (kein Hintergrundbild). */
.wn-figure { border: 1px solid var(--wp--preset--color--gray-200); padding: 22px 22px 16px; background: var(--wp--preset--color--white); }
.wn-figure svg { width: 100%; height: auto; display: block; }
.wn-figcap { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: 12.5px; color: var(--wp--preset--color--gray-600); }
.wn-figcap b { color: var(--wp--preset--color--navy); }

/* Kachel-Nummer (01/02/03) — Mono. */
.wn-num { font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 700; color: var(--wp--preset--color--blue-primary); }

/* Results: Querschliffe im gleichen Massstab. flex-grow = Seitenverhaeltnis des Bildes,
   dadurch gleiche Bildhoehe -> die Bleche wachsen sichtbar mit der Dicke. */
.wn-macros { margin-top: var(--wp--preset--spacing--50); padding: 28px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-200); }
.wn-macros-labels { display: flex; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.wn-l-neg { flex: 0.572 1 0; color: var(--wp--preset--color--danger); }
.wn-l-ok { flex: 2.772 1 0; padding-left: 21px; color: var(--wp--preset--color--navy); }
.wn-strip { display: flex; align-items: flex-end; gap: 10px; }
.wn-strip figure { min-width: 0; margin: 0; }
.wn-strip img { display: block; width: 100%; height: auto; }
.wn-m-neg { flex: 0.572 1 0; }
.wn-m15 { flex: 0.371 1 0; }
.wn-m20 { flex: 0.509 1 0; }
.wn-m25 { flex: 0.588 1 0; }
.wn-m28 { flex: 0.635 1 0; }
.wn-m30 { flex: 0.669 1 0; }
.wn-strip-sep { flex: none; align-self: stretch; width: 1px; margin: 0 10px; background: var(--wp--preset--color--gray-200); }


@media (max-width: 781px) {
  .wn-macros { padding: 16px; }
  .wn-macros-labels { display: none; }
  /* Mobil: Schliffreihe wischbar, feste Hoehe = weiterhin gleicher Massstab. */
  .wn-strip { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .wn-strip figure { flex: none; height: 240px; scroll-snap-align: start; }
  .wn-strip img { width: auto; height: 100%; }
}

/* Anwendungs-Karten: Bild oben (4:3), Text darunter. Bilder aus verschiedenen Quellen wirken
   "aus einem Guss": entsaettigt + deutlicher Navy-Scrim (Marke: Navy-Scrims ueber Fotos). */
.wn-app-card .wn-app-img { position: relative; margin: 0; background: var(--wp--preset--color--navy); }
.wn-app-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.wn-app-img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 45, 110, 0.45); pointer-events: none; }

/* Value-/Link-Kacheln auf volle Spaltenhoehe. */
.wn-card { height: 100%; }

/* Akzent-Kachel (Navy) — z. B. die offene „Ihre Anwendung?"-CTA-Karte. */
.wn-card-accent { height: 100%; }
.wn-card-accent .wp-block-heading { color: var(--wp--preset--color--white); }
.wn-card-accent .wn-k { color: var(--wp--preset--color--gray-200); }

/* ROI-Band (Navy): Button rechts, auf Mobil unter dem Text linksbuendig. */
.wn-band-eyebrow { color: var(--wp--preset--color--gray-200); }
@media (max-width: 781px) {
  .wn-roi-cta { justify-content: flex-start !important; }
}

/* „Tiefer einsteigen": Verweiskacheln mit Hover-Rahmen. */
.wn-plink { display: block; height: 100%; border: 1px solid var(--wp--preset--color--gray-200); padding: 24px; background: var(--wp--preset--color--white); transition: border-color 120ms ease; }
.wn-plink:hover, .wn-plink:focus-within { border-color: var(--wp--preset--color--navy); }
.wn-plink .wn-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--gray); }

/* Branchen-Chips (eckig, 1-px-Rahmen). */
.wn-chip { display: inline-block; font-size: 14px; font-weight: 600; color: var(--wp--preset--color--navy); border: 1px solid var(--wp--preset--color--gray-200); padding: 9px 16px; }
.wn-chip.is-secondary { color: var(--wp--preset--color--gray); font-weight: 400; }

/* Kontakt-Telefon — Mono. */
.wn-phone { font-family: var(--wp--preset--font-family--mono); font-size: 1.2rem; font-weight: 700; color: var(--wp--preset--color--navy); }
.wn-phone a { color: inherit; text-decoration: none; }

/* Ghost-Button: transparent, Navy-Rahmen/-Text, Hover -> Navy-Flaeche. */
.wn-btn-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--navy);
  border: 1px solid var(--wp--preset--color--navy);
}
.wn-btn-ghost .wp-block-button__link:hover,
.wn-btn-ghost .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--white);
}

/* Light-Button auf Navy: weisse Flaeche, Navy-Text. */
.wn-btn-light .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}
.wn-btn-light .wp-block-button__link:hover,
.wn-btn-light .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--gray-200);
  color: var(--wp--preset--color--navy);
}

/* Anlagen-Video (Sektion „Our turnkey solutions“) — self-hosted MP4, stumm, Loop, Poster; ohne Rahmen. */
.wn-anlage-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--wp--preset--color--white);
}

/* Hero: heller Text auf Navy-Scrim ueber Foto/Video.
   Ueberschreibt die dunklen Default-Farben innerhalb des Cover-Blocks. */
.wn-hero .wp-block-heading { color: var(--wp--preset--color--white); }
.wn-hero .wn-eyebrow { color: var(--wp--preset--color--gray-200); }
.wn-hero .wn-lt { color: var(--wp--preset--color--gray-200); }
.wn-hero .wn-lead,
.wn-hero .wn-hero-note { color: var(--wp--preset--color--white); }

/* Hero mit Hintergrundvideo (hero.mp4 vorhanden): etwas hoeher, Foto als sofort
   sichtbarer Fallback hinter dem Video — bleibt stehen bei reduzierter Bewegung,
   im iOS-Stromsparmodus (kein Autoplay) oder solange das Video laedt. */
.wn-hero-video {
  min-height: max(560px, 78vh) !important;
  min-height: max(560px, 78svh) !important;
  background: var(--wp--preset--color--navy) url("assets/images/hero-welding.webp") center / cover no-repeat;
}
.wn-hero-video .wp-block-cover__video-background { pointer-events: none; }
/* iOS/Safari: keinen Play-Button einblenden, wenn Autoplay verweigert wird. */
.wn-hero-video video::-webkit-media-controls,
.wn-hero-video video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
@media (prefers-reduced-motion: reduce) {
  .wn-hero-video .wp-block-cover__video-background { display: none; }
}

/* Ghost-Button auf dunklem Grund: weisser Rahmen/Text, Hover weiss -> Navy. */
.wn-btn-outline-light .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--white);
}
.wn-btn-outline-light .wp-block-button__link:hover,
.wn-btn-outline-light .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--navy);
}

/* Schliff-Beleg: scharfes Bild im 1-px-Rahmen (nutzt .wn-figure). */
.wn-figure img { display: block; width: 100%; height: auto; }

/* Generischer Platzhalter (Schema, Formular, Rechner-Embed) — bis zur Einbindung. */
.wn-placeholder {
  padding: 24px;
  border: 1px solid var(--wp--preset--color--gray-200);
  background: var(--wp--preset--color--gray-50);
  color: var(--wp--preset--color--gray-600);
  font-size: 14px;
}

/* Fussnote / Kleinhinweis. */
.wn-note { color: var(--wp--preset--color--gray); font-size: 13px; }

/* Case-Study-Seite: Inhaltsliste, schmaler Schliff-Beleg, Formular-Karte (Formular-CSS kommt
   aus dem Plugin "WeldNova Case Study Request"). */
.wn-list { padding-left: 1.1em; color: var(--wp--preset--color--gray-600); }
.wn-list li + li { margin-top: 10px; }
.wn-list b { color: var(--wp--preset--color--navy); font-weight: 600; }
.wn-cs-figure { max-width: 240px; margin: var(--wp--preset--spacing--40) 0 0; padding: 12px 12px 10px; }
.wn-cs-card { height: 100%; }
/* Mobil: Formular nicht hinter dem Schliff-Beleg verstecken — Beleg ausblenden. */
@media (max-width: 781px) {
  .wn-cs-figure { display: none; }
}

/* About us: Teamfoto (scharf, kein Scrim — Menschen), Team-Liste, Auszeichnungen. */
.wn-team-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.wn-team-photo figcaption { margin-top: 10px; font-size: 13px; color: var(--wp--preset--color--gray-600); }
.wn-people { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wn-people li { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-200); }
.wn-people b { font-weight: 600; color: var(--wp--preset--color--navy); }
.wn-people span { font-size: 14px; color: var(--wp--preset--color--gray-600); }
/* Team: LinkedIn-Link je Person. */
.wn-people .wn-person-li { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--wp--preset--color--blue-primary); text-decoration: none; }
.wn-people .wn-person-li:hover, .wn-people .wn-person-li:focus-visible { color: var(--wp--preset--color--navy); text-decoration: underline; text-underline-offset: 3px; }
.wn-li-icon { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* Auszeichnungen als Logowand: einheitlich graustufig, Farbe bei Hover; kurze Zeile darunter. */
.wn-awards-wall { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wn-awards-wall li { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; padding: 24px 20px 18px; text-align: center; background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gray-200); }
/* Einheitliche Logo-Flaeche: alle Marken in derselben Box, per object-fit eingepasst. */
.wn-awards-wall li > img, .wn-award-pair { height: 110px; }
.wn-awards-wall img { display: block; width: 66%; object-fit: contain; filter: grayscale(1); opacity: 0.85; transition: filter 160ms ease, opacity 160ms ease; }
.wn-awards-wall li:hover img { filter: none; opacity: 1; }
.wn-awards-wall li > span:last-child { font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--gray-600); }
.wn-award-pair { display: flex; gap: 12px; align-items: center; justify-content: center; }
.wn-award-pair img { width: auto; height: 104px; max-width: calc(50% - 6px); object-fit: contain; }
.wn-awards-wall img.is-wordmark { width: 52%; }

/* Auszeichnungen fuer Personen aus dem Team: ruhige Liste unter der Logowand. */
.wn-team-awards-k { margin-top: var(--wp--preset--spacing--50) !important; }
.wn-team-awards { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--gray-200); }
.wn-team-awards li { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px 20px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--wp--preset--color--gray-200); color: var(--wp--preset--color--gray-600); }
.wn-team-awards b { font-weight: 600; color: var(--wp--preset--color--navy); }
.wn-ta-year { font-weight: 600; color: var(--wp--preset--color--blue-primary); font-variant-numeric: lining-nums tabular-nums; }
.wn-ta-who { font-size: 14px; text-align: right; }

/* Foerder-Band: SPRIND zwischen BAM und EXIST-Leiste. */
.wn-funding-sprind { display: flex; flex-direction: column; gap: 10px; }
.wn-funding-k { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--gray-600); }
.wn-funding-sprind img { display: block; width: 160px; height: auto; }

/* Footer: gut sichtbarer LinkedIn-Link (Firmenseite). */
.weldnova-footer .wn-footer-linkedin { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 10px 16px 10px 12px; border: 1px solid rgba(255, 255, 255, 0.45); color: var(--wp--preset--color--white); font-weight: 600; font-size: 15px; text-decoration: none; }
.wn-footer-linkedin svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.weldnova-footer .wn-footer-linkedin:hover, .weldnova-footer .wn-footer-linkedin:focus-visible { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); text-decoration: none; }

/* Nur fuer Screenreader sichtbar. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 960px) { .wn-people, .wn-awards-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .wn-people { grid-template-columns: 1fr; }
  .wn-awards-wall { gap: 10px; }
  .wn-team-awards li { grid-template-columns: 56px 1fr; }
  .wn-ta-who { grid-column: 2; text-align: left; }
}

/* Hero: Mitgliedschaften (DVS, FOSTA) als weisse Logos unter dem Hinweis — ohne sichtbares
   Label, im Alt-Text als "Member of" benannt. Nie als Zertifizierung darstellen. */
.wn-hero-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 28px; }
.wn-hp-group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.wn-hero-partners img { display: block; width: auto; opacity: 0.92; }
.wn-hero-partners .wn-hp-dvs { height: 26px; }
.wn-hero-partners .wn-hp-fosta { height: 30px; }
@media (max-width: 560px) {
  .wn-hero-partners { gap: 14px 28px; }
  .wn-hp-group { gap: 10px 14px; }
  .wn-hero-partners .wn-hp-dvs { height: 20px; }
  .wn-hero-partners .wn-hp-fosta { height: 24px; }
}
/* Rundes Preis-Badge: duenne Linien -> etwas groesser und dunkler, damit es neben den Wortmarken traegt. */
.wn-awards-wall img.is-badge { filter: grayscale(1) brightness(0.55); }
.wn-awards-wall li:hover img.is-badge { filter: none; }
@media (max-width: 560px) {
  .wn-awards-wall li > img, .wn-award-pair { height: 76px; }
  .wn-award-pair img { height: 72px; }
  .wn-awards-wall li > span:last-child { font-size: 12px; }
}

/* Rechtstexte (Impressum, Datenschutz): ruhige Lesebreite, klare Zwischenueberschriften. */
.wn-legal h2 { margin-top: var(--wp--preset--spacing--60); font-size: 1.6rem; }
.wn-legal h3 { margin-top: var(--wp--preset--spacing--40); margin-bottom: 0.4em; font-size: 1.05rem; }
.wn-legal p, .wn-legal li { color: var(--wp--preset--color--ink); font-size: 16px; line-height: 1.65; }
.wn-legal a { color: var(--wp--preset--color--blue-primary); }
.wn-legal-intro { font-size: 14px !important; color: var(--wp--preset--color--gray-600) !important; }
.wn-legal-date { font-size: 14px !important; color: var(--wp--preset--color--gray-600) !important; }
.wn-legal .wn-legal-sep { margin: var(--wp--preset--spacing--60) 0 0; border: 0; border-top: 1px solid var(--wp--preset--color--gray-200); }

/* Kontaktseite: Kontaktdaten als Definitionsliste. Abstand nach oben explizit — "margin: 0" allein
   hob den Block-Abstand von WordPress auf, die Liste klebte an der Ueberschrift. */
.wn-contact-list { display: grid; grid-template-columns: 88px 1fr; gap: 12px 20px; margin: var(--wp--preset--spacing--40) 0 0; }
.wn-contact-list dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--gray-600); padding-top: 3px; }
.wn-contact-list dd { margin: 0; font-size: 17px; color: var(--wp--preset--color--ink); }
.wn-contact-list a { color: var(--wp--preset--color--navy); font-weight: 600; text-decoration: none; }
.wn-contact-list a:hover, .wn-contact-list a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .wn-contact-list { grid-template-columns: 1fr; gap: 2px; } .wn-contact-list dd { margin-bottom: 10px; } }

/* Sprungziel "How it works" (Hero-Button) nicht unter dem Sticky-Header verstecken. */
#how-it-works { scroll-margin-top: 80px; }

/* Lesebreite fuer Einleitungen auf breiten Seiten. Das Constrained-Layout zentriert jedes Kind
   mit eigener max-width (margin auto !important) — daher linke Kante auf die 1120-px-Spalte setzen. */
.is-layout-constrained > .wn-measure {
  max-width: 62ch;
  margin-left: max(0px, (100% - 1120px) / 2) !important;
  margin-right: auto !important;
}

/* About: Links in der Logowand und im Foerder-Band (neuer Tab). */
.wn-awards-wall li > span:last-child a { color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--gray-200); text-underline-offset: 3px; }
.wn-awards-wall li > span:last-child a:hover,
.wn-awards-wall li > span:last-child a:focus-visible { color: var(--wp--preset--color--navy); text-decoration-color: currentColor; }
.wn-funding-sprind a, .wn-funding-strip-link { display: block; }
.wn-team-awards a { color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--gray-200); text-underline-offset: 3px; }
.wn-team-awards a:hover, .wn-team-awards a:focus-visible { color: var(--wp--preset--color--navy); text-decoration-color: currentColor; }
.wn-funding-members { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--wp--preset--color--gray-100); font-size: 13px; line-height: 1.55; color: var(--wp--preset--color--gray-600); }
.wn-funding-members a { color: var(--wp--preset--color--navy); }

/* FAQ (/faq): Themengruppe links, Fragen rechts als natives Akkordeon (core/details). */
.wn-faq-group + .wn-faq-group { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--gray-200); }
.wn-faq-title { font-size: 1.5rem; }
.wn-faq .wp-block-details { margin: 0; border-top: 1px solid var(--wp--preset--color--gray-200); }
.wn-faq .wp-block-column > .wp-block-details:last-child { border-bottom: 1px solid var(--wp--preset--color--gray-200); }
.wn-faq summary { position: relative; display: block; padding: 18px 44px 18px 0; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--wp--preset--color--navy); cursor: pointer; list-style: none; }
.wn-faq summary::-webkit-details-marker { display: none; }
.wn-faq summary::before,
.wn-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 2px; margin-top: -1px; background: var(--wp--preset--color--blue-primary); transition: transform 160ms ease; }
.wn-faq summary::after { transform: rotate(90deg); }
.wn-faq details[open] > summary::after { transform: rotate(0deg); }
.wn-faq summary:hover { color: var(--wp--preset--color--blue-primary); }
.wn-faq .wp-block-details > :not(summary) { margin: 0 0 20px; max-width: 68ch; color: var(--wp--preset--color--gray-600); }

/* Leitfaden (/single-pass-welding): Inhaltsverzeichnis links (sticky), Text rechts. */
.wn-toc { position: sticky; top: 96px; }
.wn-toc-k { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gray-600); }
.wn-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--wp--preset--color--gray-200); counter-reset: wn-toc; }
.wn-toc li { counter-increment: wn-toc; }
.wn-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--gray-600); text-decoration: none; }
.wn-toc a::before { content: counter(wn-toc, decimal-leading-zero) "  "; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--blue-primary); white-space: pre; }
.wn-toc a:hover, .wn-toc a:focus-visible { color: var(--wp--preset--color--navy); border-left-color: var(--wp--preset--color--navy); }
.wn-article { max-width: 760px; }
.wn-article > h2 { margin-top: var(--wp--preset--spacing--60); font-size: 1.75rem; scroll-margin-top: 96px; }
.wn-article > h2:first-child { margin-top: 0; }
.wn-article > p { line-height: 1.65; }
.wn-article .wn-note { margin-top: var(--wp--preset--spacing--30); }

/* Leitfaden: Schliff-Vergleich (gleiche Bildhoehe, Breite nach Seitenverhaeltnis). */
.wn-macro-pair { display: flex; gap: 16px; max-width: 520px; margin-top: var(--wp--preset--spacing--40); padding: 20px; border: 1px solid var(--wp--preset--color--gray-200); }
.wn-macro-pair figure { margin: 0; min-width: 0; }
.wn-mp-neg { flex: 0.572 1 0; }
.wn-mp-ok { flex: 0.669 1 0; }
.wn-macro-pair img { display: block; width: 100%; height: auto; }
.wn-macro-pair figcaption { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--wp--preset--color--gray-600); }
.wn-macro-pair figcaption b { display: block; font-weight: 600; }
.wn-mp-neg figcaption b { color: var(--wp--preset--color--danger); }
.wn-mp-ok figcaption b { color: var(--wp--preset--color--navy); }

/* Leitfaden: Schritte, Vergleichstabelle. */
.wn-steps { list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; counter-reset: wn-step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wn-steps li { counter-increment: wn-step; padding: 18px; border: 1px solid var(--wp--preset--color--gray-200); font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--gray-600); }
.wn-steps li::before { content: counter(wn-step, decimal-leading-zero); display: block; margin-bottom: 8px; font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 700; color: var(--wp--preset--color--blue-primary); }
.wn-steps b { display: block; margin-bottom: 4px; font-weight: 600; color: var(--wp--preset--color--navy); }
.wn-compare { margin: var(--wp--preset--spacing--40) 0 0; overflow-x: auto; }
.wn-compare table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.wn-compare th, .wn-compare td { padding: 12px 14px; border: 1px solid var(--wp--preset--color--gray-200); text-align: left; vertical-align: top; }
.wn-compare thead th { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--gray-600); background: var(--wp--preset--color--gray-50); }
.wn-compare thead th:last-child { color: var(--wp--preset--color--navy); }
.wn-compare tbody th { width: 24%; font-weight: 600; color: var(--wp--preset--color--navy); }
.wn-compare td { color: var(--wp--preset--color--gray-600); }
.wn-compare td:last-child { color: var(--wp--preset--color--ink); }

@media (max-width: 781px) {
  .wn-toc { position: static; }
  .wn-steps { grid-template-columns: 1fr; }
  .wn-macro-pair { padding: 14px; }
  .wn-compare table { font-size: 14px; }
  .wn-compare th, .wn-compare td { padding: 10px; }
}