/* ============================================================
   WSNR — Website Styles (exportierte, eigenständige Fassung)
   ------------------------------------------------------------
   Diese Datei bündelt das komplette Design-System (Farben, Typo,
   Spacing, Basis-Reset) + die Seiten-spezifischen Regeln.
   Alle Schriften werden LOKAL geladen (DSGVO-konform, siehe
   ../assets/fonts/fonts.css) — kein externer Aufruf.

   Aufbau:
     1) Lokale Schriften (Schibsted Grotesk + JetBrains Mono)
     2) Farb-Tokens         (CSS-Variablen)
     3) Typografie-Tokens
     4) Spacing / Radien / Schatten / Motion
     5) Basis-Reset
     6) Keyframes & Seiten-Helfer (Reveal, Hover, Responsive)
   ============================================================ */

/* ---- 1) Lokale Schriften ---- */
@import url('../assets/fonts/fonts.css');



/* ============================================================
   2) FARB-TOKENS
   ============================================================ */
/* ============================================================
   WSNR — Color tokens
   Brand: black wordmark + jade-green dot, on a cool-neutral base.
   Restrained & clean: green is an accent, never a flood.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --wsnr-black: #0A0A0A;          /* the wordmark */
  --wsnr-jade: #06A878;           /* the dot — sampled from the logo */
  --wsnr-jade-600: #058A62;       /* hover */
  --wsnr-jade-700: #046B4C;       /* pressed / deep */
  --wsnr-jade-100: #CDEFE2;       /* tint */
  --wsnr-jade-50:  #E8F7F1;       /* faint wash */

  /* ---- Neutrals (very slightly cool/green to harmonize with jade) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F8F8;
  --neutral-100: #EEF0F0;
  --neutral-200: #E2E5E5;
  --neutral-300: #CBD0CF;
  --neutral-400: #A4ABAA;
  --neutral-500: #7B8281;
  --neutral-600: #585E5D;
  --neutral-700: #3E4342;
  --neutral-800: #26292A;
  --neutral-900: #141617;
  --neutral-950: #0A0B0B;

  /* ---- Semantic data colors (muted, for reporting/dashboards) ---- */
  --positive: #06A878;            /* up / good — reuses brand jade */
  --positive-50: #E8F7F1;
  --negative: #E5484D;            /* down / bad */
  --negative-50: #FCEBEB;
  --warning: #E5901E;             /* caution / pacing */
  --warning-50: #FCF3E6;
  --info: #2E7CF6;                /* neutral data / links in product */
  --info-50: #E9F1FE;

  /* ============================================================
     Semantic aliases — reference these in components, not raw values
     ============================================================ */

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--wsnr-black);
  --surface-accent:  var(--wsnr-jade-50);

  /* Text */
  --text-primary:    var(--neutral-950);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-disabled:   var(--neutral-400);
  --text-inverse:    var(--neutral-0);
  --text-accent:     var(--wsnr-jade-700);
  --text-link:       var(--wsnr-jade-700);

  /* Borders */
  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-400);
  --border-inverse:  var(--neutral-800);
  --border-accent:   var(--wsnr-jade);

  /* Interactive (primary = jade, on dark text? no — jade is bg, white text) */
  --action-primary-bg:       var(--wsnr-jade);
  --action-primary-bg-hover: var(--wsnr-jade-600);
  --action-primary-bg-press: var(--wsnr-jade-700);
  --action-primary-fg:       var(--neutral-0);

  --action-dark-bg:          var(--wsnr-black);
  --action-dark-bg-hover:    var(--neutral-800);
  --action-dark-bg-press:    var(--neutral-700);
  --action-dark-fg:          var(--neutral-0);

  --focus-ring: var(--wsnr-jade);
}


/* ============================================================
   3) TYPOGRAFIE-TOKENS
   ============================================================ */
/* ============================================================
   WSNR — Typography tokens
   One primary grotesque family used across display, headings and UI.
   Mono reserved for numbers, metrics, labels and code.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);

  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */
  --fw-black: 900;    /* @kind font */

  /* ---- Type scale (1.25 major-third-ish, tuned) ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.5rem;    /* 88px */

  /* ---- Line heights ---- */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.04em;  /* big display */
  --tracking-tight: -0.02em;    /* headings */
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.12em;      /* mono eyebrows / labels */

  /* ============================================================
     Semantic text roles
     ============================================================ */
  --display-size: var(--text-5xl);
  --display-weight: var(--fw-black);
  --display-leading: var(--leading-tight);
  --display-tracking: var(--tracking-tighter);

  --h1-size: var(--text-3xl);
  --h2-size: var(--text-2xl);
  --h3-size: var(--text-xl);
  --h4-size: var(--text-lg);

  --body-size: var(--text-base);
  --body-leading: var(--leading-relaxed);

  --eyebrow-size: var(--text-xs);
  --eyebrow-weight: var(--fw-bold);
  --eyebrow-tracking: var(--tracking-caps);
}


/* ============================================================
   4) SPACING / RADIEN / SCHATTEN / MOTION
   ============================================================ */
/* ============================================================
   WSNR — Spacing, radii, shadows, layout
   Clean & geometric: modest radii, soft low-contrast shadows.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Radii (geometric, restrained) ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* buttons, inputs */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 16px;    /* large panels */
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (soft, cool, low-contrast) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 11, 11, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 11, 11, 0.06), 0 1px 2px rgba(10, 11, 11, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 11, 11, 0.06), 0 2px 4px rgba(10, 11, 11, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 11, 11, 0.08), 0 4px 8px rgba(10, 11, 11, 0.04);
  --shadow-xl: 0 24px 56px rgba(10, 11, 11, 0.12), 0 8px 16px rgba(10, 11, 11, 0.05);
  --shadow-focus: 0 0 0 3px rgba(6, 168, 120, 0.28);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: var(--space-5);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --duration-fast: 120ms;   /* @kind other */
  --duration-base: 200ms;   /* @kind other */
  --duration-slow: 360ms;   /* @kind other */
}


/* ============================================================
   5) BASIS-RESET
   ============================================================ */
/* ============================================================
   WSNR — Base layer
   Light resets + element defaults wired to tokens.
   Keep this thin; components carry their own styling.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--wsnr-jade-600); }

/* Mono utility for figures/labels */
.wsnr-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-normal);
}

/* Eyebrow / kicker label */
.wsnr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

::selection { background: var(--wsnr-jade-100); color: var(--wsnr-jade-700); }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }


/* ============================================================
   6) SEITEN-KEYFRAMES, RESET-ERGÄNZUNGEN & HELFER
   ============================================================ */

html { scroll-behavior: smooth; }
body { background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
img { max-width: 100%; }

/* Lucide / Icon-SVGs füllen ihren span-Container */
[data-icon] svg { width: 100%; height: 100%; display: block; stroke-width: 1.75; }
::selection { background: var(--wsnr-jade); color: #fff; }

/* ---- Keyframes (Hero-Zoom, Marquee, Puls etc.) ---- */
@keyframes wsnrPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes heroZoom { from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.22) translate(-2.2%,-2.6%)} }
@keyframes wsnrMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- Scroll-Reveal (per JS aktiviert: js/app.js) ----
   Elemente mit [data-fade] starten unsichtbar und werden beim
   Scrollen eingeblendet. Ohne JS (oder bei reduzierter Bewegung)
   bleibt der Inhalt sichtbar. */
/* Inhalt ist standardmäßig sichtbar. Das Einblenden steuert js/app.js
   ausschließlich per Inline-Style (Startzustand opacity:0 wird nur gesetzt,
   wenn die Animation auch wirklich läuft) — so bleibt der Inhalt in jedem
   Kontext (ohne JS, reduzierte Bewegung, eingebettete Frames) sichtbar. */
[data-fade] { opacity: 1; }

/* ---- Hover-Mikrointeraktionen (im Original per JS; hier als CSS) ---- */
.wsnr-btn-jade:hover { background: var(--wsnr-jade-600) !important; transform: translateY(-2px); }
.wsnr-btn-dark:hover { background: var(--neutral-800) !important; }
.wsnr-btn-soft:hover { background: var(--surface-sunken) !important; }
.wsnr-card-hover { transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out); }
.wsnr-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.wsnr-marquee:hover { animation-play-state: paused !important; }
.wsnr-navlink { transition: color .15s var(--ease-out); }
.wsnr-navlink:hover { color: var(--wsnr-jade) !important; }
.wsnr-footlink:hover { color: #fff !important; }
.wsnr-input:focus { border-color: var(--wsnr-jade) !important; box-shadow: var(--shadow-focus); }

/* ---- Mobile-Navigation (Breakpoint identisch zum Original: 880px) ---- */
.wsnr-mobile-only { display: none; }
@media (max-width: 880px) {
  .wsnr-desktop-only { display: none !important; }
  .wsnr-mobile-only { display: inline-flex !important; }
}
.wsnr-mobile-menu { position: fixed; inset: 0; z-index: 70; background: var(--surface-page); display: none; flex-direction: column; padding: 18px clamp(20px,6vw,40px); }
.wsnr-mobile-menu.is-open { display: flex; }

/* ════════════════════════════════════════════════════════════════
   FEINSCHLIFF: Blog-Inhalt (Prose), Hinweisbox & Kontaktformular
   ════════════════════════════════════════════════════════════════ */

/* ---- Blog-/Seiteninhalt ---- */
.wsnr-prose > * + * { margin-top: 1.1em; }
.wsnr-prose h2 { font-family: var(--font-sans); font-size: clamp(22px,2.6vw,32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-top: 1.6em; color: var(--text-primary); }
.wsnr-prose h3 { font-family: var(--font-sans); font-size: clamp(18px,2vw,24px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin-top: 1.4em; color: var(--text-primary); }
.wsnr-prose p { margin: 0; }
.wsnr-prose a { color: var(--wsnr-jade-700); text-decoration: underline; }
.wsnr-prose strong { color: var(--text-primary); font-weight: 700; }

/* normale Aufzählung mit grünem Punkt */
.wsnr-prose ul { list-style: none; margin: 1.1em 0; padding: 0; }
.wsnr-prose ul li { position: relative; padding-left: 1.7em; margin: 0.55em 0; line-height: 1.6; }
.wsnr-prose ul li::before { content: ""; position: absolute; left: 0.15em; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--wsnr-jade); }
.wsnr-prose ol { margin: 1.1em 0; padding-left: 1.4em; }
.wsnr-prose ol li { margin: 0.55em 0; line-height: 1.6; padding-left: 0.3em; }
.wsnr-prose ol li::marker { color: var(--wsnr-jade); font-weight: 700; }

/* Häkchen-Variante: Liste mit zusätzlicher Klasse "wsnr-check" */
.wsnr-prose ul.wsnr-check li { padding-left: 2em; }
.wsnr-prose ul.wsnr-check li::before {
  content: ""; left: 0; top: 0.2em; width: 1.2em; height: 1.2em; border-radius: 0; background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2306A878'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%206%209%2017l-5-5'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ---- Grüne Hinweisbox (Group/Quote mit Klasse "wsnr-callout") ---- */
.wsnr-prose .wsnr-callout {
  margin: 1.7em 0; background: var(--wsnr-jade-50); border: 1px solid var(--wsnr-jade-100);
  border-radius: 18px; padding: clamp(20px,3vw,28px);
}
.wsnr-prose .wsnr-callout > *:first-child { margin-top: 0; }
.wsnr-prose .wsnr-callout > *:last-child { margin-bottom: 0; }
.wsnr-prose .wsnr-callout :is(h2,h3,h4,h5):first-child {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wsnr-jade-700); margin: 0 0 12px;
}
.wsnr-prose .wsnr-callout :is(h2,h3,h4,h5):first-child::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wsnr-jade); flex: 0 0 auto;
}
.wsnr-prose .wsnr-callout p { font-size: clamp(15px,1.6vw,18px); font-weight: 600; line-height: 1.55; color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════════
   Navigation größer (Desktop)
   ════════════════════════════════════════════════════════════════ */
.wsnr-navlink { font-size: 16px !important; color: var(--text-primary) !important; }

/* ════════════════════════════════════════════════════════════════
   KONTAKTFORMULAR (WPForms #2813) — robust per Formular-ID
   ════════════════════════════════════════════════════════════════ */
#wpforms-2813 .wpforms-field { padding: 0 0 18px; }
#wpforms-2813 .wpforms-field-label { font-family: var(--font-sans); font-weight: 700; font-size: 14px; color: var(--text-primary); margin: 0 0 8px; }
#wpforms-2813 .wpforms-required-label { color: var(--wsnr-jade); }
#wpforms-2813 .wpforms-field-description { font-size: 13px; color: var(--text-tertiary); }

/* Eingabefelder */
#wpforms-2813 input[type="text"],
#wpforms-2813 input[type="email"],
#wpforms-2813 input[type="url"],
#wpforms-2813 input[type="tel"],
#wpforms-2813 input[type="number"],
#wpforms-2813 select,
#wpforms-2813 textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; color: var(--text-primary);
  background: var(--surface-card); transition: border-color .15s, box-shadow .15s;
}
#wpforms-2813 textarea { min-height: 130px; resize: vertical; }
#wpforms-2813 input:focus, #wpforms-2813 select:focus, #wpforms-2813 textarea:focus {
  border-color: var(--wsnr-jade); box-shadow: 0 0 0 3px var(--wsnr-jade-50); outline: none;
}
#wpforms-2813 ::placeholder { color: var(--text-tertiary); opacity: 1; }

/* Auswahl "Wie kann ich dir helfen?" als Button-Kacheln (nur die Optionen, NICHT die Feldbeschriftung) */
#wpforms-2813 .wpforms-field-radio > label.wpforms-field-label {
  display: block; font-family: var(--font-sans); font-weight: 700; font-size: 14px;
  color: var(--text-primary); margin: 0 0 8px; padding: 0; border: none; background: none;
}
#wpforms-2813 .wpforms-field-radio ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
#wpforms-2813 .wpforms-field-radio ul li { margin: 0; padding: 0; }
#wpforms-2813 .wpforms-field-radio ul li input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#wpforms-2813 .wpforms-field-radio ul li label {
  display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px;
  border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card);
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary);
  cursor: pointer; transition: border-color .15s, background .15s, color .15s; margin: 0; line-height: 1.2;
}
#wpforms-2813 .wpforms-field-radio ul li input[type="radio"]:checked + label {
  border-color: var(--wsnr-jade); background: var(--wsnr-jade-50); color: var(--wsnr-jade-700); box-shadow: inset 0 0 0 1px var(--wsnr-jade);
}
#wpforms-2813 .wpforms-field-radio ul li input[type="radio"]:focus + label { box-shadow: 0 0 0 3px var(--wsnr-jade-50); }

/* Absende-Button */
#wpforms-2813 button[type="submit"], #wpforms-2813 .wpforms-submit {
  background: var(--wsnr-jade); color: #fff; border: none; border-radius: var(--radius-md);
  min-height: 52px; padding: 0 30px; font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  cursor: pointer; transition: background .15s; width: 100%; margin-top: 6px;
}
#wpforms-2813 button[type="submit"]:hover, #wpforms-2813 .wpforms-submit:hover { background: var(--wsnr-jade-600); }

/* Formular-Titel an den Look angleichen */
#wpforms-2813 .wpforms-title { font-family: var(--font-sans); font-size: clamp(18px,2vw,24px); font-weight: 800; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 20px; }

/* ════════════════════════════════════════════════════════════════
   v1.11.0 — Blog-Reiter (Dropdown), Blog-Übersicht & Beitrags-Blöcke
   ════════════════════════════════════════════════════════════════ */

/* ---- Desktop-Dropdown „Blog" ---- */
.wsnr-navdrop-panel {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  width: 340px; padding: 8px; margin-top: 14px;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 14px;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility .15s;
  z-index: 80;
}
/* unsichtbare Brücke, damit das Menü beim Runterfahren mit der Maus offen bleibt */
.wsnr-navdrop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.wsnr-navdrop:hover .wsnr-navdrop-panel,
.wsnr-navdrop:focus-within .wsnr-navdrop-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.wsnr-navdrop-item {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px;
  text-decoration: none; transition: background .15s var(--ease-out);
}
.wsnr-navdrop-item:hover, .wsnr-navdrop-item:focus-visible { background: var(--surface-sunken); outline: none; }
.wsnr-navdrop-cat {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wsnr-jade-700);
}
.wsnr-navdrop-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text-primary); }
.wsnr-navdrop-all {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 11px 12px 6px;
  border-top: 1px solid var(--border-subtle); font-size: 13.5px; font-weight: 600;
  color: var(--wsnr-jade-700); text-decoration: none;
}
.wsnr-navdrop-all:hover { color: var(--wsnr-jade); }

/* Mobile-Menü scrollbar, da „Blog" eine Beitragsliste mitbringt */
.wsnr-mobile-menu { overflow-y: auto; }

/* ---- Editor-Blöcke in Beiträgen (Zitat, Tabelle, Button, Trenner) ---- */
.wsnr-prose blockquote, .wsnr-prose .wp-block-quote {
  margin: 1.7em 0; padding: clamp(20px,3vw,28px); background: var(--wsnr-jade-50);
  border: 1px solid var(--wsnr-jade-100); border-left: 4px solid var(--wsnr-jade); border-radius: 14px;
}
.wsnr-prose blockquote p { font-size: clamp(16px,1.7vw,19px); font-weight: 600; line-height: 1.55; color: var(--text-primary); }
.wsnr-prose blockquote cite {
  display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; font-style: normal;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wsnr-jade-700);
}
.wsnr-prose .wp-block-table { margin: 1.7em 0; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 14px; }
.wsnr-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.wsnr-prose th, .wsnr-prose td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.wsnr-prose thead th {
  background: var(--surface-sunken); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary);
}
.wsnr-prose tbody tr:last-child td { border-bottom: none; }
.wsnr-prose td:first-child { font-weight: 600; color: var(--text-primary); }
.wsnr-prose td:last-child { color: var(--wsnr-jade-700); font-weight: 600; }
.wsnr-prose hr, .wsnr-prose .wp-block-separator { border: none; border-top: 1px solid var(--border-subtle); margin: 2.4em 0; opacity: 1; }
.wsnr-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.wsnr-prose .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px;
  background: var(--wsnr-jade); color: #fff !important; border-radius: 12px; text-decoration: none !important;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; transition: background .15s, transform .15s;
}
.wsnr-prose .wp-block-button__link:hover { background: var(--wsnr-jade-600); transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════════
   v1.11.1 — Editor-Beiträge im exakten Look der bestehenden Beiträge
   (Werte 1:1 aus single-post-blog-*.php übernommen)
   ════════════════════════════════════════════════════════════════ */
.wsnr-article > :first-child { margin-top: 0 !important; }
.wsnr-article p { font-size: 17px; line-height: 1.78; color: var(--text-secondary); margin: 0 0 22px; text-wrap: pretty; }
.wsnr-article h2 { font-family: var(--font-sans); font-size: clamp(21px,2.4vw,27px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); margin: 38px 0 16px; text-wrap: balance; }
.wsnr-article h3 { font-family: var(--font-sans); font-size: clamp(18px,1.9vw,20px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); margin: 30px 0 10px; text-wrap: balance; }
.wsnr-article strong, .wsnr-article b { color: var(--text-primary); font-weight: 600; }
.wsnr-article a { color: var(--wsnr-jade-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Aufzählung: grüner Punkt wie in den bestehenden Beiträgen */
.wsnr-article ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.wsnr-article ul li { position: relative; padding-left: 20px; font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); }
.wsnr-article ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--wsnr-jade); }
.wsnr-article ol { margin: 0 0 24px; padding-left: 1.3em; display: flex; flex-direction: column; gap: 13px; }
.wsnr-article ol li { font-size: 16.5px; line-height: 1.6; color: var(--text-secondary); padding-left: 4px; }
.wsnr-article ol li::marker { color: var(--wsnr-jade); font-weight: 700; }

/* Hinweisbox (Klasse „wsnr-callout") & Zitat = „Aha"-Box */
.wsnr-article .wsnr-callout,
.wsnr-article blockquote {
  background: var(--wsnr-jade-50); border: 1px solid rgba(6,168,120,0.28); border-radius: 16px;
  padding: 26px 28px; margin: 32px 0;
}
.wsnr-article .wsnr-callout > :is(h2,h3,h4,h5):first-child {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 11px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wsnr-jade-700);
}
.wsnr-article .wsnr-callout > :is(h2,h3,h4,h5):first-child::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wsnr-jade); flex: none;
}
.wsnr-article .wsnr-callout p,
.wsnr-article blockquote p { font-size: 18px; line-height: 1.62; color: var(--wsnr-jade-700); font-weight: 600; margin: 0; }
.wsnr-article blockquote cite {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--wsnr-jade-700);
}
.wsnr-article blockquote cite::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wsnr-jade); }

/* Tabelle */
.wsnr-article .wp-block-table { margin: 28px 0 32px; overflow-x: auto; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: 16px; }
.wsnr-article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.wsnr-article th, .wsnr-article td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.wsnr-article thead th { background: var(--surface-sunken); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); }
.wsnr-article tbody tr:last-child td { border-bottom: none; }
.wsnr-article td:first-child { font-weight: 600; color: var(--text-primary); }
.wsnr-article td:last-child { color: var(--wsnr-jade-700); font-weight: 600; }

/* Trenner, Bilder, Buttons */
.wsnr-article hr, .wsnr-article .wp-block-separator { border: none; border-top: 1px solid var(--border-subtle); margin: 38px 0; opacity: 1; }
.wsnr-article figure { margin: 28px 0; }
.wsnr-article img { max-width: 100%; height: auto; border-radius: 16px; }
.wsnr-article figcaption { font-size: 13px; color: var(--text-tertiary); margin-top: 8px; text-align: center; }
.wsnr-article .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 24px; }
.wsnr-article .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 28px;
  background: var(--wsnr-jade); color: #fff !important; border-radius: 12px; text-decoration: none !important;
  font-family: var(--font-sans); font-size: 16px; font-weight: 600; transition: background .15s, transform .15s;
}
.wsnr-article .wp-block-button__link:hover { background: var(--wsnr-jade-600); transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════════
   v1.11.2 — Blog-Dropdown typografisch wie die Hauptnavigation
   ════════════════════════════════════════════════════════════════ */
.wsnr-navdrop-panel { width: 320px; padding: 8px; }
.wsnr-navdrop-item { padding: 11px 14px; gap: 0; }
.wsnr-navdrop-title {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1.4;
  letter-spacing: normal; color: var(--text-primary); transition: color .15s var(--ease-out);
}
.wsnr-navdrop-item:hover .wsnr-navdrop-title,
.wsnr-navdrop-item:focus-visible .wsnr-navdrop-title { color: var(--wsnr-jade); }
.wsnr-navdrop-all { font-size: 15px; font-weight: 500; padding: 12px 14px 6px; }

/* ================================================================
   AKTUELLE NEWS & UPDATES (seit v1.12.0)
   ================================================================ */
.wsnr-news-row { transition: background .15s var(--ease-out); }
.wsnr-news-row:first-child { border-top: 0 !important; }
.wsnr-news-row:hover, .wsnr-news-row:focus-visible { background: var(--neutral-50); outline: none; }
.wsnr-news-row[hidden] { display: none !important; }
@media (max-width: 640px) {
  .wsnr-news-row { gap: 14px !important; padding: 22px 20px !important; }
  .wsnr-news-row > div:first-child { flex-basis: 100% !important; display: flex; gap: 10px; align-items: baseline; }
  .wsnr-news-row > div:last-child { flex-direction: row !important; align-items: center !important; flex-basis: 100% !important; justify-content: space-between; }
}

/* ---- v1.12.1: zweispaltiges Dropdown „News & Blog" ---- */
.wsnr-navdrop-panel--split {
  width: min(680px, calc(100vw - 40px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
.wsnr-navdrop-panel--split .wsnr-navdrop-col + .wsnr-navdrop-col {
  border-left: 1px solid var(--border-subtle); padding-left: 8px;
}
.wsnr-navdrop-col { display: flex; flex-direction: column; min-width: 0; }
.wsnr-navdrop-col .wsnr-navdrop-all { margin-top: auto; }
/* v1.12.1: Filter blenden per Attribut aus (Inline-Layouts bleiben erhalten) */
[data-filter-hidden], .wsnr-news-row[data-topic-hidden] { display: none !important; }