/*
Theme Name: SBNE — Stabsstelle Bildung für nachhaltige Entwicklung
Theme URI:
Description: Custom WordPress theme built pixel-perfect from the SBNE Figma design. Sharp-cornered, Mona Sans, full-bleed section backgrounds inside a 1696px content container.
Version: 1.0
Author: chris & friends
Text Domain: sbne
*/

/* ============================================================
   SELF-HOSTED FONT — Mona Sans (OFL). Not on Google Fonts.
   Variable font, upright, weight axis 400–700.
   ============================================================ */
@font-face {
  font-family: "Mona Sans";
  src: url("assets/fonts/MonaSansVF.woff2") format("woff2-variations"),
       url("assets/fonts/MonaSansVF.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — every value traces to figma-audit.json.
   Design reference width: 1920px (treated as MAX width).
   ============================================================ */
:root {
  /* === Colors (figma-audit.json → colors[]) === */
  --color-black:            #000000; /* text, CTA button bg, footer bg, borders */
  --color-white:            #ffffff; /* backgrounds, card bg, button text */
  --color-cyan:             #00caff; /* Events section bg */
  --color-cyan-light:       #d1f5ff; /* Event card bg tint */
  --color-purple:           #ac61ff; /* Bildungsangebote bg, KONTAKT text (default) */
  --color-purple-mid:       #9627ff; /* accent / school card borders */
  --color-purple-light:     #bf82ff; /* button deco stroke, hero outline */
  --color-orange:           #f85739; /* Partnerschaften bg, KONTAKT hover bg */
  --color-orange-red:       #e82000; /* nav link hover text, dropdown hover text */
  --color-grey-placeholder: #c4c4c4; /* image placeholders */
  --color-logo-green:       #3cb44b; /* logo badge (STABSSTELLE) */

  /* === Subpage token deltas (Wave B, de-duplicated) === */
  --color-green:            #3FC72F; /* Green hero/module frame (projekte, print-downloads, pressemitteilungen) */
  --color-partner-card:     #ffe7e2; /* ueber-uns partner card tint */
  --color-purple-border:    #9320ff; /* ueber-uns purple frame border */
  --color-red-light:        #FFE7E2; /* pressemitteilungen Red year box inner tint */
  --color-lila-light:       #F9F2FF; /* pressemitteilungen Lila year box inner tint */
  --color-purple-pale:      #f9f2ff; /* master-detail / projekt-detail link-box background */

  /* === Typography === */
  --font-primary: "Mona Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Font weights present in design */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Font sizes (figma-audit.json → typography[]).
     Fluid via clamp(): preferred = size/1920*100 vw, so the value hits the
     exact Figma px at 1920px (the design/verification width) and scales down below. */
  --fs-h1:        clamp(34px, 2.9167vw, 56px);  /* H1 hero 56 / lh 72.8 */
  --fs-h2:        clamp(30px, 2.5000vw, 48px);  /* H2 heading 48 / lh 62.4 */
  --fs-h3:        clamp(24px, 1.6667vw, 32px);  /* H3 card title 32 / lh 41.6 */
  --fs-h4:        clamp(20px, 1.2500vw, 24px);  /* H4 title + Mehr erfahren 24 / lh 31.2 */
  --fs-body:      clamp(17px, 1.1458vw, 22px);  /* Body 22 / lh 33 */
  --fs-button:    clamp(17px, 1.1458vw, 22px);  /* Button label 22 semibold / lh 33 */
  --fs-footer:    clamp(17px, 1.1458vw, 22px);  /* Footer link 22 medium / lh 22 */
  --fs-label:     clamp(16px, 1.0417vw, 20px);  /* Category label 20 regular / lh 30 */
  --fs-nav:       clamp(16px, 1.0417vw, 20px);  /* Nav link / KONTAKT 20 semibold / lh 30 */
  --fs-small:     clamp(15px, 0.9375vw, 18px);  /* Small label 18 semibold / lh 27 */

  /* Line-heights (unitless = ratio, scale with font-size) */
  --lh-heading: 1.3;  /* 72.8/56, 62.4/48, 41.6/32, 31.2/24 all = 1.3 */
  --lh-body:    1.5;  /* 33/22, 30/20, 27/18 = 1.5 */
  --lh-tight:   1.0;  /* footer link 22/22 = 1.0 */

  /* === Layout (structural constants — full-bleed bg, centered content) === */
  --site-max:      1920px; /* design width — page never exceeds this visually */
  --container-max: 1696px; /* content container (1920 − 2×112 gutters) */
  --gutter:        112px;   /* side gutter at 1920 */

  /* === Border radius === */
  /* Design is sharp-cornered (figma-audit.json → border_radius.pattern = "none").
     No radius tokens — buttons, cards and images have square corners. */
  --radius: 0;

  /* === Transitions (figma-audit.json → components[].interactions[].transition) === */
  --transition-hover: 0.3s ease-out;  /* news/project/mehr-erfahren/kontakt/carousel */
  --transition-nav:   0.5s ease-out;  /* nav link + dropdown text color */
  --transition-cta:   1.0221s cubic-bezier(0.34, 1.25, 0.64, 1); /* CTA deco — Figma GENTLE spring (overshoot); cta-black-btn.json 18:395→78:569 */
}



 body.aktuelles-template-default article h1 {
          margin-bottom: 35px;
    }

 body.aktuelles-template-default article p {
          margin-bottom: 15px;
    }
body.aktuelles-template-default article .content-inner{
	text-align:justify;
	clear:both;
	overflow:hidden;
}
@media print, screen and (min-width: 40em) {
    body.aktuelles-template-default article .feature-image {
        float: right;
        max-width: 50%;
        margin: 0 0 20px 20px;
    }
}