/* ===========================================================================
   SCHARIOTH DESIGN SYSTEM v1 — bundled for WordPress (ps-core).
   Single stylesheet: @font-face (self-hosted Geist) + tokens + base helpers.
   Source of truth: design/Scharioth Design System/ (tokens/*.css, base.css).
   Re-sync by re-concatenating the token files; keep font URLs pointing at
   ./fonts/ (relative to this file inside the plugin's assets/ dir).

   hell-kühl, fast monochrom · EIN Akzent (Stahl-/Petrolblau) · Geist ·
   Haarlinien statt Schatten · "weniger Farbe = Gesetz".
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FONTS — Geist (Sans + Mono), self-hosted, variable. OFL (Vercel).
   Self-hosted .woff2 → kein Google-Fonts-CDN, kein IP-Leak (DSGVO).
   URLs relative to assets/design-system.css → assets/fonts/*.woff2.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   COLORS — hell-kühl, fast monochrom. EIN Akzent: Stahl-/Petrolblau.
   --------------------------------------------------------------------------- */
:root {
  --paper:         #F5F7F9;
  --surface:       #FFFFFF;
  --surface-sunk:  #EFF2F5;
  --ink:           #15191F;
  --ink-soft:      #3A424E;
  --ink-muted:     #6B7480;
  --ink-faint:     #98A1AC;
  --line:          #E2E7EC;
  --line-strong:   #CBD3DB;

  --accent:        #2F6F8F;
  --accent-strong: #245A74;
  --accent-tint:   #EAF1F5;
  --accent-line:   #B9D0DB;
  --on-accent:     #FFFFFF;

  --positive:      #2F7D5B;
  --positive-tint: #E7F1EC;
  --warning:       #9A6B1E;
  --warning-tint:  #F5EEDF;
  --critical:      #A23A36;
  --critical-tint: #F4E6E5;

  --bg-page:        var(--paper);
  --bg-surface:     var(--surface);
  --bg-sunken:      var(--surface-sunk);
  --bg-accent:      var(--accent);
  --bg-accent-soft: var(--accent-tint);

  --text-strong:    var(--ink);
  --text-body:      var(--ink-soft);
  --text-muted:     var(--ink-muted);
  --text-faint:     var(--ink-faint);
  --text-link:      var(--accent-strong);
  --text-on-accent: var(--on-accent);

  --border-hairline: var(--line);
  --border-strong:   var(--line-strong);
  --border-accent:   var(--accent-line);

  --focus-ring:      var(--accent);
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY — genau eine Familie. Geist Sans + Geist Mono (Eyebrows/Labels).
   --------------------------------------------------------------------------- */
:root {
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  --text-display: clamp(2.5rem, calc(1.4rem + 4.4vw), 4.25rem);
  --text-h1:      clamp(2.1rem, calc(1.5rem + 2.6vw), 3.1rem);
  --text-h2:      clamp(1.7rem, calc(1.2rem + 1.8vw), 2.4rem);
  --text-h3:      1.2rem;
  --text-lead:    clamp(1.05rem, calc(1rem + 0.5vw), 1.3rem);
  --text-body-lg: 1.0625rem;
  --text-base:    1rem;
  --text-sm:      0.9rem;
  --text-xs:      0.8rem;
  --text-eyebrow: 0.72rem;

  --leading-tight:   1.04;
  --leading-heading: 1.1;
  --leading-snug:    1.4;
  --leading-normal:  1.55;
  --leading-body:    1.7;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.16em;

  --measure: 68ch;

  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-label:   var(--font-mono);
}

/* ---------------------------------------------------------------------------
   SPACING, RADII, LINES & MOTION — Haarlinien statt Schatten, dezente Rundung.
   --------------------------------------------------------------------------- */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3.5rem;
  --space-9:  5rem;

  --space-section: clamp(4.5rem, 10vw, 8rem);

  --maxw: 1120px;
  --maxw-prose: 68ch;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --border-width: 1px;
  --hair:        1px solid var(--line);
  --hair-strong: 1px solid var(--line-strong);
  --hair-accent: 1px solid var(--accent-line);

  --shadow-none: none;
  --shadow-pop: 0 1px 2px rgba(21, 25, 31, 0.04),
                0 8px 24px -12px rgba(21, 25, 31, 0.12);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.15s;
  --dur:      0.25s;
}

/* ---------------------------------------------------------------------------
   BASE HELPERS — typographic helper classes (.ds-*). Used explicitly inside
   wp:html section blocks; no global element reset is shipped here so the
   plugin never fights the theme's chrome. Sections opt in via .ds-* classes.
   --------------------------------------------------------------------------- */
.ds-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  line-height: var(--leading-normal);
  color: var(--ink-soft);
  font-weight: var(--weight-regular);
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}
.ds-small { font-size: var(--text-sm); color: var(--ink-muted); }

.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.ds-eyebrow--muted { color: var(--ink-muted); }

.ds-prose { max-width: var(--measure); }
.ds-prose p + p { margin-top: 1.15em; }

/* Opt-in surface scope: apply to a section wrapper to adopt the full DS feel
   (Geist, paper ground, box-sizing) without a global reset bleeding sitewide. */
.ds-scope,
.ds-scope *,
.ds-scope *::before,
.ds-scope *::after { box-sizing: border-box; }
.ds-scope {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01";
}
.ds-scope a { color: var(--accent-strong); text-decoration: none; }
.ds-scope img, .ds-scope svg { max-width: 100%; }
.ds-scope :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   SITE CHROME — Twenty Twenty-Five Header/Footer/Titel in den DS-Look bringen,
   OHNE das Theme zu editieren. Selektoren mit `.wp-site-blocks`-Prefix (0,2,0)
   überstimmen die theme.json-Regeln `:root :where(...)` (0,1,0) ohne !important.
   Restyling des Bestehenden — keine Template-Part-Änderung.
   --------------------------------------------------------------------------- */

/* Papier-Grund für die ganze Seite */
.wp-site-blocks { background: var(--paper); }

/* Geist über die ganze Site (Titel, Nav, Footer, Prosa) */
.wp-site-blocks,
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3,
.wp-site-blocks h4, .wp-site-blocks h5, .wp-site-blocks h6,
.wp-site-blocks p, .wp-site-blocks a, .wp-site-blocks li,
.wp-site-blocks .wp-block-site-title,
.wp-site-blocks .wp-block-navigation,
.wp-site-blocks .wp-block-post-title {
  font-family: var(--font-sans);
}

/* Header: ruhige Haarlinie, Papier, leicht transluzent */
.wp-site-blocks header.wp-block-template-part > .site-header,
.wp-site-blocks header.wp-block-template-part {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: var(--hair);
  /* backdrop-filter bewusst NICHT hier (v1.5.2): ein Element mit backdrop-filter
     wird laut Spec zum Containing Block fuer position:fixed-Kinder und zerquetscht
     das mobile Overlay-Menue (.wp-block-navigation__responsive-container, fixed
     inset:0) auf Header-Groesse. Etwas opakerer Papier-Hintergrund als Ersatz. */
}
.wp-site-blocks .wp-block-site-title a {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wp-site-blocks .wp-block-site-title a:hover { color: var(--accent-strong); }
.wp-site-blocks .wp-block-navigation a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.95rem;
}
.wp-site-blocks .wp-block-navigation a:hover,
.wp-site-blocks .wp-block-navigation .current-menu-item a {
  color: var(--ink);
}

/* Seitentitel (H1 auf Unterseiten) im DS-Display-Stil */
.wp-site-blocks .wp-block-post-title {
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
  color: var(--ink);
}

/* Footer: Haarlinie, weiße Fläche, gedämpft */
.wp-site-blocks footer.wp-block-template-part > .site-footer,
.wp-site-blocks footer.wp-block-template-part {
  background: var(--surface);
  border-top: var(--hair);
}
.wp-site-blocks .site-footer p { color: var(--ink-muted); }
.wp-site-blocks .site-footer a { color: var(--ink-soft); text-decoration: none; }
.wp-site-blocks .site-footer a:hover { color: var(--accent-strong); }

/* Header sticky + ÜBER dem Seiteninhalt (fixt: Leistungen-Dropdown verschwand
   unter dem Hero, weil dessen Stacking-Kontext über das Menü malte). */
.wp-site-blocks header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}
.wp-site-blocks .site-header { padding-block: 0.5rem; }
.wp-site-blocks .wp-block-navigation { gap: 0.5rem 1.5rem; }
.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; }

/* Leistungen-Dropdown als ruhiges DS-Panel (weiße Fläche, Haarlinie, sanfter
   Lift, eigener z-index über dem Hero). */
.wp-site-blocks .wp-block-navigation__submenu-container {
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 0.4rem;
  min-width: 15rem;
  z-index: 101;
}
.wp-site-blocks .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}
.wp-site-blocks .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-site-blocks .wp-block-navigation__submenu-container .current-menu-item .wp-block-navigation-item__content {
  background: var(--accent-tint);
  color: var(--ink);
}
.wp-site-blocks .wp-block-navigation .wp-block-navigation-submenu__toggle { color: inherit; }
.wp-site-blocks .wp-block-navigation .wp-block-navigation__submenu-icon { color: var(--ink-muted); }

/* Mobile Overlay-Menue (Hamburger): DS-Look + WCAG-2.5.5-Tap-Targets (>=44px).
   Greift, sobald das WP-Navigation-Overlay erscheint. */
.wp-site-blocks .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--paper);
}
.wp-site-blocks .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: 0.75rem 0.5rem;
  font-size: 1.05rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.wp-site-blocks .wp-block-navigation__responsive-container-open,
.wp-site-blocks .wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
/* Offenes Vollbild-Menue ueber den consentmanager-Banner (z-index 9999999)
   heben: der Header bildet mit z-index:100 einen Stacking-Kontext, also wird er
   bei offenem Menue angehoben statt nur das Overlay selbst. */
.wp-site-blocks header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
  z-index: 10000000;
}
/* :has()-Fallback fuer Browser vor 2023 (Chrome<105, Safari<15.4): ein
   Inline-Script (Design_Assets::print_nav_fallback) spiegelt is-menu-open auf
   body.ps-nav-open, damit das offene Menue auch dort ueber dem Banner liegt. */
body.ps-nav-open .wp-site-blocks header.wp-block-template-part {
  z-index: 10000000;
}
/* Sichtbarer DS-Fokusring auf Navigation + CTA (Header liegt ausserhalb .ds-scope,
   erbt den Reset-Fokusring nicht). */
.wp-site-blocks .wp-block-navigation a:focus-visible,
.wp-site-blocks .wp-block-navigation button:focus-visible,
.wp-site-blocks .ps-header-cta a:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent));
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footer: etwas mehr Ruhe/Luft */
.wp-site-blocks footer.wp-block-template-part > .site-footer { padding-block: 2.75rem; }

/* Header-CTA-Button (DS-Primärbutton) + rechte Header-Gruppe */
.wp-site-blocks .ps-header-right { align-items: center; gap: 1.5rem; }
.wp-site-blocks .ps-header-cta .wp-block-button__link {
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem;
  padding: 0.6rem 1.1rem; line-height: 1;
  transition: background var(--dur-fast) var(--ease);
}
.wp-site-blocks .ps-header-cta .wp-block-button__link:hover { background: var(--accent-strong); color: var(--on-accent); }
@media (max-width: 680px) { .wp-site-blocks .ps-header-cta { display: none; } }

/* Footer-Struktur: Brand + Tagline | Link-Spalten | Legal-Zeile */
.wp-site-blocks .ps-footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.wp-site-blocks .ps-footer-brand-name { font-weight: 600; color: var(--ink); font-size: 1.02rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.wp-site-blocks .ps-footer-tagline { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; max-width: 36ch; }
.wp-site-blocks .ps-footer-coltitle { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.85rem; }
.wp-site-blocks .ps-footer-col p { margin: 0 0 0.5rem; font-size: 0.9rem; }
.wp-site-blocks .ps-footer-col a { color: var(--ink-soft); text-decoration: none; }
.wp-site-blocks .ps-footer-col a:hover { color: var(--accent-strong); }
.wp-site-blocks .ps-footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: var(--hair); }
.wp-site-blocks .ps-footer-legal p { font-size: 0.8rem; color: var(--ink-muted); margin: 0; }
.wp-site-blocks .ps-footer-legal a { color: var(--ink-soft); text-decoration: none; }
.wp-site-blocks .ps-footer-legal a:hover { color: var(--accent-strong); }
@media (max-width: 700px) { .wp-site-blocks .ps-footer-cols { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Header/Footer auf DS-Content-Breite (1120px) statt der schmalen Theme-
   contentSize (~645px) — damit Brand/Nav/CTA Platz haben (sonst quetscht der
   CTA-Button vertikal) und Header/Footer mit dem Seiteninhalt fluchten. */
.wp-site-blocks .site-header > .wp-block-group,
.wp-site-blocks .site-footer > .wp-block-group { max-width: var(--maxw); width: 100%; }
.wp-site-blocks .ps-header-cta { flex-shrink: 0; }
.wp-site-blocks .ps-header-cta .wp-block-button__link { white-space: nowrap; }