/* =============================================================
   Ostendorf Design System — Tokens + Components
   Auto-deployed from claude design hand-off (weSh0YJgRPloMSCLCED2rA)
   Source of truth: 07_Corporate-Identity (CI-Manual)
   ============================================================= */

/* ---------- Webfonts (Hausschrift Redonda) ---------- */
@font-face {
  font-family: "Redonda";
  src: url("../fonts/redonda-regular.woff2") format("woff2"),
       url("../fonts/redonda-regular.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Redonda";
  src: url("../fonts/redonda-bold.woff2") format("woff2"),
       url("../fonts/redonda-bold.woff")  format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== Brand Colors (CI-Manual) ===== */
  --os-navy:   #1a364b;
  --os-lemon:  #d9de05;

  --os-navy-900: #0e2334;
  --os-navy-800: #142b3f;
  --os-navy-700: #1a364b;
  --os-navy-600: #244660;
  --os-navy-500: #355a78;
  --os-navy-400: #5a7d97;
  --os-navy-300: #8aa3b6;
  --os-navy-200: #c1ced9;
  --os-navy-100: #e6ecf1;
  --os-navy-050: #f3f6f8;

  --os-lemon-700: #aab004;
  --os-lemon-600: #c4ca05;
  --os-lemon-500: #d9de05;
  --os-lemon-400: #e6ea3b;
  --os-lemon-300: #eef07a;
  --os-lemon-200: #f5f7b6;
  --os-lemon-100: #fbfcdf;

  /* Neutrals */
  --os-white:    #ffffff;
  --os-off-white:#fafbfc;
  --os-gray-050: #f5f5f5;
  --os-gray-100: #e9ecee;
  --os-gray-200: #d6dadd;
  --os-gray-300: #b9bfc4;
  --os-gray-400: #8a9197;
  --os-gray-500: #5e656b;
  --os-gray-600: #424a51;
  --os-gray-700: #333333;
  --os-gray-800: #1f2428;
  --os-black:    #000000;

  --os-success: #2f8f5a;
  --os-warning: #d99205;
  --os-error:   #c03434;
  --os-info:    #2c6b9b;

  --fg-1: var(--os-navy);
  --fg-2: var(--os-gray-700);
  --fg-3: var(--os-gray-500);
  --fg-on-navy: #ffffff;
  --fg-on-lemon: var(--os-navy);

  --accent: var(--os-lemon);
  --link: var(--os-navy);
  --link-hover: var(--os-navy-600);

  /* Tracking — Sperrung 50 = 0.05em */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0.05em;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.12em;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(26,54,75,.06), 0 1px 1px rgba(26,54,75,.04);
  --shadow-2: 0 4px 12px rgba(26,54,75,.08), 0 2px 4px rgba(26,54,75,.05);
  --shadow-3: 0 12px 32px rgba(26,54,75,.12), 0 4px 10px rgba(26,54,75,.06);
  --shadow-4: 0 24px 60px rgba(26,54,75,.18), 0 8px 18px rgba(26,54,75,.08);
  --shadow-focus: 0 0 0 3px rgba(217,222,5,.55);

  /* Motion */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ===== Base typography — Sperrung 50 ===== */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Redonda", "Calibri", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  color: var(--os-gray-700);
}
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: "Redonda", "Calibri", "Segoe UI", system-ui, sans-serif;
  letter-spacing: var(--tracking-normal);
  line-height: 1.15;
  color: var(--os-navy);
  font-weight: 700;
}
h1, .has-display-2xl-font-size, .has-xxxx-large-font-size, .has-xxx-large-font-size {
  line-height: 1.05;
}

/* ===== Selection ===== */
::selection { background: var(--os-lemon); color: var(--os-navy); }

/* ===== Focus ring ===== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Eyebrow utility ===== */
.os-eyebrow,
.is-style-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase;
  color: var(--os-navy);
  display: inline-block;
}

/* Lemon-tone variant on dark surfaces */
.has-primary-background-color .os-eyebrow,
.has-navy-900-background-color .os-eyebrow,
.is-style-section-primary .os-eyebrow,
.is-style-section-primary .is-style-eyebrow {
  color: var(--os-lemon);
}

/* ===== Lemon-Bar / Section-Top accent ===== */
.is-style-lemon-top {
  position: relative;
}
.is-style-lemon-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--os-lemon);
  z-index: 5;
  pointer-events: none;
}

/* ===== Lemon-Divider (60×4 px line) ===== */
.is-style-lemon-divider hr,
hr.is-style-lemon-divider {
  border: none;
  width: 60px;
  height: 4px;
  background: var(--os-lemon);
  margin: 16px 0;
  opacity: 1;
}

/* ===== Hero Pattern: navy with overlapping circles ===== */
.is-style-hero-pattern,
.has-primary-background-color.is-style-hero-pattern,
.is-style-section-primary.is-style-hero-pattern {
  position: relative;
  overflow: hidden;
  background-color: var(--os-navy) !important;
  color: #fff;
}
.is-style-hero-pattern::before,
.is-style-hero-pattern::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.is-style-hero-pattern::before {
  width: 720px;
  height: 720px;
  background: var(--os-navy-900);
  left: -200px;
  top: -260px;
}
.is-style-hero-pattern::after {
  width: 540px;
  height: 540px;
  background: var(--os-navy-800);
  right: -180px;
  bottom: -240px;
}
.is-style-hero-pattern > * {
  position: relative;
  z-index: 2;
}

/* ===== Buttons — overrides (sentence/caps caps, lemon primary) ===== */
.wp-block-button .wp-block-button__link,
.wpforms-submit, .wpforms-page-button {
  border-radius: var(--radius-md) !important;
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  transition: all var(--dur-base) var(--ease-out);
}
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  /* default: navy filled */
  background-color: var(--os-navy);
  color: #fff;
  border: 1.5px solid var(--os-navy);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--os-navy-600);
  border-color: var(--os-navy-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
/* Primary (lemon CTA, navy text) */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-secondary-background-color {
  background-color: var(--os-lemon) !important;
  color: var(--os-navy) !important;
  border: 1.5px solid var(--os-lemon);
}
.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.has-secondary-background-color:hover {
  background-color: var(--os-lemon-400) !important;
  border-color: var(--os-lemon-400);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
/* Ghost on navy */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border-width: 1.5px;
}
.is-style-section-primary .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-hero-pattern .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.is-style-section-primary .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-hero-pattern .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.7);
}

/* ===== Cards (covers / groups) ===== */
.is-style-os-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--os-gray-100);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.is-style-os-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.is-style-os-card-lemon {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--os-gray-100);
  border-top: 3px solid var(--os-lemon);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.is-style-os-card-lemon:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

/* ===== Lemon-dot bullet for lists ===== */
.is-style-lemon-bullets ul,
ul.is-style-lemon-bullets {
  list-style: none;
  padding-left: 0;
}
.is-style-lemon-bullets ul li,
ul.is-style-lemon-bullets li {
  position: relative;
  padding-left: 22px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.is-style-lemon-bullets ul li::before,
ul.is-style-lemon-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--os-lemon);
}

/* ===== Capsule (navy pill — for text on photos) ===== */
.is-style-os-capsule {
  display: inline-block;
  background: var(--os-navy);
  color: #fff;
  padding: 12px 24px;
  border-radius: 6px;
  letter-spacing: var(--tracking-normal);
  font-weight: 700;
}

/* ===== Header / Navigation refinements ===== */
.site-header {
  box-shadow: none;
  background-color: transparent;
}
.site-header .site-header__navbar {
  background-color: transparent !important;
  transition: background-color .25s var(--ease-out);
}
.site-header.site-header--scrolled .site-header__navbar {
  background-color: var(--os-navy) !important;
  box-shadow: var(--shadow-2);
}
.site-header .wp-block-navigation .wp-block-navigation__container > li > a,
.site-header .wp-block-navigation .wp-block-navigation__container > li > button {
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  font-size: 0.875rem;
}
.site-header .wp-block-navigation .wp-block-navigation__container > li.current-menu-item > a {
  position: relative;
}
.site-header .wp-block-navigation .wp-block-navigation__container > li.current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--os-lemon);
}

/* ===== Footer accent: lemon column-headers ===== */
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5,
.has-primary-background-color h5, .has-primary-background-color .wp-block-heading {
  /* leave colors to inline; just tighten */
  letter-spacing: var(--tracking-caps);
}

/* ===== Slim refinement on cover slider headlines ===== */
.wp-block-cover .has-xxxx-large-font-size,
.wp-block-cover .has-xxx-large-font-size {
  letter-spacing: var(--tracking-normal);
  line-height: 1.05;
}

/* ===== Image refinements ===== */
.wp-block-image img {
  border-radius: var(--radius-md);
}
figure.wp-block-image.is-style-default img,
figure.wp-block-image.is-style-rounded img {
  border-radius: var(--radius-md);
}

/* ===== Section paddings consistent ===== */
.is-style-section-primary,
.is-style-section-secondary {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

/* ===== Trust / Reference card grid ===== */
.is-style-os-ref-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.is-style-os-ref-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}

/* ===== Phone link emphasis ===== */
a.os-phone,
.os-phone a {
  color: var(--os-lemon);
  font-weight: 700;
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  border-bottom: none;
}

/* ===== Containers ===== */
.os-container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 56px); }

/* Quote mark for testimonials */
.os-quote-mark {
  font-size: 80px;
  color: var(--os-lemon);
  line-height: .7;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

/* ============================================================
   Editorial Polish (v3 — marquee removed, hero re-centered)
   ============================================================ */

/* ===== Sub-Page-Hero: links-dark-Gradient wie Startseite ===== */
.wp-block-cover.os-subpage-hero {
  min-height: 56vh !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.wp-block-cover.os-subpage-hero h1 { text-wrap: balance; }

/* Replace flat dim with directional gradient — Text links lesbar, Foto rechts atmet */
.wp-block-cover.os-subpage-hero .wp-block-cover__background {
  background: linear-gradient(100deg,
              rgba(14,35,52,.92) 0%,
              rgba(14,35,52,.78) 38%,
              rgba(14,35,52,.45) 75%,
              rgba(14,35,52,.25) 100%) !important;
  opacity: 1 !important;
}
.wp-block-cover.os-subpage-hero .wp-block-cover__inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 1100px;
  width: 100%;
}
/* Bigger headline on sub-pages — match startseite proportions */
.wp-block-cover.os-subpage-hero h1.has-xxx-large-font-size {
  font-size: clamp(2.25rem, 4vw, 3.6rem) !important;
  max-width: 22ch;
}
.wp-block-cover.os-subpage-hero .has-medium-font-size {
  max-width: 56ch;
}

/* Same gradient overlay for the homepage hero (the first cover with hero-wand/arbeiten) */
.home main.site-content > .wp-block-cover:first-child .wp-block-cover__background,
body.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__background {
  background: linear-gradient(100deg,
              rgba(14,35,52,.86) 0%,
              rgba(14,35,52,.66) 45%,
              rgba(14,35,52,.30) 100%) !important;
  opacity: 1 !important;
}

/* Header schwebt transparent über dem Hero — Theme custom.scss macht das schon (.site-header { background-color: transparent; height: 0 }), wir geben dem Hero nur Top-Padding für den schwebenden Header */
.wp-block-cover.os-subpage-hero,
.home main.site-content > .wp-block-cover:first-child,
body.home .wp-block-post-content > .wp-block-cover:first-child {
  padding-top: clamp(110px, 13vh, 160px) !important;
}

/* ===== Top-Level Nav (sticky over hero) ===== */
.site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: #fff;
}
.site-header.site-header--scrolled .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: #fff;
}
.site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--os-lemon);
}

/* ===== Submenu (Aufklapp) — weisser Hintergrund + Navy-Text + Lemon-Top-Bar (CI: kein Lemon-Text auf Weiss) ===== */
.site-header ul.wp-block-navigation__submenu-container,
.site-header .wp-block-navigation__submenu-container.has-white-background-color {
  background-color: #fff !important;
  border: 1px solid var(--os-gray-100) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 16px 36px rgba(14,35,52,.18);
  padding: 8px 0 !important;
  min-width: 260px;
  margin-top: 10px;
  overflow: hidden !important;   /* clip the lemon top bar to the rounded corners */
  position: absolute;
}
/* Lemon top-bar (3 px) als CI-Akzent — Ecken folgen dem Container-Radius */
.site-header ul.wp-block-navigation__submenu-container::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--os-lemon);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

/* Submenu items: Navy-Text + Sperrung 50 — konstantes Padding (kein Layout-Shift) */
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%;
}
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--os-navy) !important;
  display: block;
  padding: 12px 22px !important;
  letter-spacing: var(--tracking-normal);
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--os-gray-100);
  position: relative;
  white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
/* Lemon-Indikator: liegt absolut links AM Element — Position konstant, nur Opacity wechselt */
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--os-lemon-700);
  opacity: 0;
  transition: opacity .18s var(--ease-out);
  pointer-events: none;
}
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
  border-bottom: none;
}
/* Hover: nur Background-Tint + Indikator sichtbar — KEIN Padding-Shift, KEIN Wrap-Change */
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: var(--os-lemon-100) !important;
  color: var(--os-navy) !important;
}
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::before,
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus::before {
  opacity: 1;
}
/* Active-Item: persistent Lemon-Tint + Punkt sichtbar */
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  background-color: var(--os-lemon-200) !important;
  color: var(--os-navy) !important;
  font-weight: 700;
}
.site-header ul.wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::before {
  opacity: 1;
}

/* Submenu icon (chevron) auf Top-Level: weiss (auf Hero) */
.site-header > * .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item .wp-block-navigation__submenu-icon {
  color: #fff;
}
.site-header > * .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item .wp-block-navigation__submenu-icon svg {
  fill: currentColor;
}

/* Eyebrow universal: sauberer Lemon-Strich davor (statt nur Caps-Text) */
.is-style-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  position: relative;
}
.is-style-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  background: var(--os-lemon);
  flex-shrink: 0;
}

/* Wenn Eyebrow auf hellem Surface: Strich bleibt Lemon (gut), wenn auf navy/dim: bleibt Lemon */

/* Section-Divider: Lemon 60×4 horizontal nach Sektions-Eyebrow auf hellen Sections */
.is-style-lemon-divider, hr.is-style-lemon-divider {
  border: none !important;
  width: 60px; height: 4px;
  background: var(--os-lemon) !important;
  margin: 16px 0 !important;
  opacity: 1;
}

/* Big section numbers — dezente Mega-Ziffern hinter Section-Headlines */
.os-bignum {
  position: relative;
}
.os-bignum::before {
  content: attr(data-num);
  position: absolute;
  top: -.3em; right: 0;
  font-family: "Redonda", "Calibri", sans-serif;
  font-size: clamp(10rem, 18vw, 22rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--os-navy-100);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
  letter-spacing: -0.04em;
}
.os-bignum > * { position: relative; z-index: 1; }

/* (Marquee entfernt — wirkte zu unruhig oben.) */
.os-marquee { display: none !important; }

/* Sticky-Header refinement: Auto-fill mit Navy bei Scroll (nimmt Theme-Hook auf) */
body.is-scrolled .site-header__navbar {
  backdrop-filter: blur(8px);
  background: rgba(26,54,75,.92) !important;
  box-shadow: 0 8px 24px rgba(14,35,52,.18);
}

/* Card-Hover: smoother + Lemon-Kantenakzent erscheint nur on-hover (subtil) */
.is-style-os-card-lemon { position: relative; }
.is-style-os-card-lemon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(217,222,5,0);
  transition: box-shadow .28s var(--ease-out);
}
.is-style-os-card-lemon:hover::after {
  box-shadow: 0 0 0 2px rgba(217,222,5,.7);
}

/* Reveal-on-scroll utility */
.os-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.os-reveal.is-in {
  opacity: 1;
  transform: none;
}
.os-reveal.is-stagger-1 { transition-delay: 80ms; }
.os-reveal.is-stagger-2 { transition-delay: 160ms; }
.os-reveal.is-stagger-3 { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .os-reveal { opacity: 1; transform: none; transition: none; }
}

/* Number-counter style for stats (KPI like "60+", "1928", "3") */
.os-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 3px solid var(--os-lemon);
  padding-left: 16px;
}
.os-kpi .os-kpi-num {
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--os-navy);
}
.os-kpi .os-kpi-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--os-gray-500);
}

/* Fix sub-page H1 sizing — etwas kleiner als Startseite */
.os-subpage-hero h1.has-xxx-large-font-size {
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
}

/* ============================================================
   v6 fix — Section-aware text/button colours
   When inside a navy section (is-style-section-primary or any
   block with `has-primary-background-color`) text should be white
   and buttons should follow the CI CTA pattern (lemon bg + navy text).
   ============================================================ */

/* All headings on navy sections → white */
.is-style-section-primary h1,
.is-style-section-primary h2,
.is-style-section-primary h3,
.is-style-section-primary h4,
.is-style-section-primary h5,
.is-style-section-primary h6,
.is-style-section-primary .wp-block-heading,
.has-primary-background-color h1,
.has-primary-background-color h2,
.has-primary-background-color h3,
.has-primary-background-color h4,
.has-primary-background-color h5,
.has-primary-background-color h6,
.has-primary-background-color .wp-block-heading {
  color: #fff !important;
}

/* Paragraph text on navy sections → semi-transparent white */
.is-style-section-primary p,
.has-primary-background-color p {
  color: rgba(255,255,255,.85);
}
/* Strong/links on navy keep the lemon accent */
.is-style-section-primary a:not(.wp-block-button__link),
.has-primary-background-color a:not(.wp-block-button__link) {
  color: var(--os-lemon);
}
.is-style-section-primary a:not(.wp-block-button__link):hover,
.has-primary-background-color a:not(.wp-block-button__link):hover {
  color: var(--os-lemon-400);
}

/* Buttons inside navy sections — override the global navy-fill default
   so they don't disappear (navy on navy) */
.is-style-section-primary .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.has-primary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--os-lemon) !important;
  color: var(--os-navy) !important;
  border-color: var(--os-lemon) !important;
}
.is-style-section-primary .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--os-lemon-400) !important;
  border-color: var(--os-lemon-400) !important;
  color: var(--os-navy) !important;
}
/* Outline button on navy → white border + transparent fill */
.is-style-section-primary .wp-block-button.is-style-outline .wp-block-button__link,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
  background: transparent !important;
}
.is-style-section-primary .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Same logic for navy-900 / navy-800 backgrounds and our os-subpage-hero */
.has-navy-900-background-color h1,
.has-navy-900-background-color h2,
.has-navy-900-background-color h3,
.has-navy-900-background-color .wp-block-heading,
.has-navy-800-background-color h1,
.has-navy-800-background-color h2,
.has-navy-800-background-color h3,
.has-navy-800-background-color .wp-block-heading {
  color: #fff !important;
}

/* Section-secondary (lemon section, if used) — text stays navy (CI rule:
   no light type on lemon) */
.is-style-section-secondary h1,
.is-style-section-secondary h2,
.is-style-section-secondary h3,
.is-style-section-secondary .wp-block-heading {
  color: var(--os-navy) !important;
}

/* ============================================================
   Lemon-Sektion (is-style-section-secondary) — ALLES navy lesbar
   CI: kein lemon/weisser Text auf Lemon — nur Navy ist erlaubt.
   ============================================================ */
.is-style-section-secondary,
.is-style-section-secondary p,
.is-style-section-secondary li,
.is-style-section-secondary span:not(.has-text-color),
.is-style-section-secondary strong,
.is-style-section-secondary em,
.has-secondary-background-color,
.has-secondary-background-color p,
.has-secondary-background-color li,
.has-secondary-background-color span:not(.has-text-color),
.has-secondary-background-color strong,
.has-secondary-background-color em {
  color: var(--os-navy) !important;
}

/* Headings auf lemon → navy */
.is-style-section-secondary h1,
.is-style-section-secondary h2,
.is-style-section-secondary h3,
.is-style-section-secondary h4,
.is-style-section-secondary h5,
.is-style-section-secondary h6,
.is-style-section-secondary .wp-block-heading,
.has-secondary-background-color h1,
.has-secondary-background-color h2,
.has-secondary-background-color h3,
.has-secondary-background-color .wp-block-heading {
  color: var(--os-navy) !important;
}

/* Accordion-Panel-Body INNERHALB einer Lemon-Sektion: navy text auf white panel */
.is-style-section-secondary .wp-block-accordion-item,
.is-style-section-secondary .wp-block-accordion-panel,
.is-style-section-secondary .wp-block-accordion-panel * {
  color: var(--os-navy) !important;
}
/* Accordion-heading "1. Analyse" hat eigenes navy bg + has-white-color → das passt schon, nicht überschreiben */

/* Inputs / Form-Felder auf lemon — navy text + navy border */
.is-style-section-secondary input,
.is-style-section-secondary textarea,
.is-style-section-secondary select,
.has-secondary-background-color input,
.has-secondary-background-color textarea,
.has-secondary-background-color select {
  color: var(--os-navy) !important;
  border-color: var(--os-navy) !important;
}

/* Buttons innerhalb Lemon-Sektion: navy filled mit weisser Schrift (Inversion) */
.is-style-section-secondary .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.has-secondary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: var(--os-navy) !important;
  color: #fff !important;
  border-color: var(--os-navy) !important;
}
.is-style-section-secondary .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.has-secondary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: var(--os-navy-600) !important;
  border-color: var(--os-navy-600) !important;
  color: #fff !important;
}

/* Accordion items inside lemon sections — explicit white panel + dark body text */
.is-style-section-secondary .wp-block-accordion-item.has-background-background-color {
  background-color: #fff !important;
}
.is-style-section-secondary .wp-block-accordion-panel {
  background-color: #fff !important;
}
.is-style-section-secondary .wp-block-accordion-panel,
.is-style-section-secondary .wp-block-accordion-panel p,
.is-style-section-secondary .wp-block-accordion-panel li,
.is-style-section-secondary .wp-block-accordion-panel span,
.is-style-section-secondary .wp-block-accordion-panel strong {
  color: var(--os-gray-700) !important;
}

/* Make sure the accordion-heading bar stays navy + white text (theme intent) */
.is-style-section-secondary .wp-block-accordion-heading.has-primary-background-color,
.is-style-section-secondary .wp-block-accordion-heading.has-primary-background-color * {
  color: #fff !important;
}
.is-style-section-secondary .wp-block-accordion-heading.has-primary-background-color {
  background-color: var(--os-navy) !important;
}