/* EMAS — Northbound. Layout/Geometrie 1:1 aus dem Design „EMAS Landingpage
   Northbound". Farben/Fonts/Spacing-Presets kommen als Tokens aus theme.json;
   hier die Sektions-Geometrie (Rail, Full-Bleed-Hero, Glass-Panel, Tabelle,
   überlappende Formkarte), die Core-Blöcke nicht ausdrücken. */

/* Kein Wert steht hier mehr als Literal. Jede Property zeigt auf einen Preset
   oder ein custom-Token aus theme.json. Die --emas-* Namen bleiben, damit die
   Sektions-Regeln darunter unveraendert weiterlaufen. */
:root {
  --emas-rail: var(--wp--preset--color--rail);
  --emas-ink: var(--wp--preset--color--ink);
  --emas-ink-80: var(--wp--preset--color--ink-80);
  --emas-ink-60: var(--wp--preset--color--ink-60);
  --emas-ink-40: var(--wp--preset--color--ink-40);
  --emas-hairline: var(--wp--preset--color--hairline);
  --emas-hairline-strong: var(--wp--preset--color--hairline-strong);
  --emas-field: var(--wp--preset--color--field);
  --emas-paper: var(--wp--preset--color--paper);
  --emas-paper-2: var(--wp--preset--color--paper-2);
  --emas-white: var(--wp--preset--color--white);
  --emas-green: var(--wp--preset--color--green);
  --emas-green-dark: var(--wp--preset--color--green-dark);
  --emas-green-light: var(--wp--preset--color--green-light);
  --emas-error: var(--wp--preset--color--error);

  --rail-w: var(--wp--custom--rail--width);
  --gutter: var(--wp--custom--gutter);

  --dur-micro: var(--wp--custom--duration--micro);
  --dur-medium: var(--wp--custom--duration--medium);
  --dur-long: var(--wp--custom--duration--long);
  --emas-ease: var(--wp--custom--ease--default);
  --emas-ease-enter: var(--wp--custom--ease--enter);
}

html { scroll-behavior: auto; }

/* margin, background, color und font-family setzt theme.json auf body.
   Hier bleibt nur, was theme.json nicht ausdruecken kann. */
body { -webkit-font-smoothing: antialiased; }

/* Nur im Block-Editor. theme.json faerbt den Body auf rail (dunkel), im
   Frontend deckt .emas-main das mit paper wieder zu. Im Editor fehlt dieser
   Wrapper — er steht im Template, nicht im post_content —, also stuende
   dunkles ink auf dunklem rail. Die Leinwand bekommt deshalb dieselbe
   Grundfarbe wie der Inhaltsbereich der Seite. Im Frontend existiert
   .editor-styles-wrapper nicht, die Regel greift dort nie. */
.editor-styles-wrapper { background: var(--emas-paper); }

/* Bleibt: theme.json faerbt Links hart auf ink. Auf den dunklen Sektionen
   waere das unlesbar — Links muessen die Farbe ihres Umfelds erben.
   Spezifitaet 0,0,2 schlaegt das a:where(...) der Global Styles. */
body a { color: inherit; text-decoration: none; }
*:focus-visible { outline: 2px solid var(--emas-green); outline-offset: 3px; }

.emas-eyebrow {
  font: 500 12px/1 Archivo, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emas-ink-60);
}
.emas-note { font: 400 13px/1.5 Archivo, sans-serif; color: var(--emas-ink-40); }

/* ---------- Buttons (Northbound „wipe"-Hover) ---------- */
.emas-btn .wp-block-button__link,
a.emas-btn {
  display: inline-block;
  border-radius: 0;
  background-color: var(--emas-green);
  color: #fff;
  font: 600 15px/1.2 Archivo, sans-serif;
  padding: 16px 24px;
  background-image: linear-gradient(var(--emas-green-dark), var(--emas-green-dark));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size var(--dur-long) var(--emas-ease), color var(--dur-micro) var(--emas-ease);
}
.emas-btn .wp-block-button__link:hover,
a.emas-btn:hover { color: #fff; background-size: 100% 100%; }

/* Sekundär: Outline auf dunkel, füllt weiss */
.emas-btn--secondary .wp-block-button__link,
a.emas-btn--secondary {
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  background-image: linear-gradient(#fff, #fff);
}
.emas-btn--secondary .wp-block-button__link:hover,
a.emas-btn--secondary:hover { color: var(--emas-ink); }

/* =====================================================================
   LOAD-CHOREOGRAFIE (Focal-Moment beim ersten Paint)
   Rail wischt von links, Hero-Headline steigt gestaffelt, Glass-Panel gleitet
   von rechts mit auflösendem Blur. Keyframes = Northbound-DS. Default-State ist
   sichtbar; die Animation überschreibt nur während des Ablaufs. Kein JS nötig.
   ===================================================================== */
@keyframes nb-rail-in { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nb-rise-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes nb-panel-in {
  from { transform: translateX(72px); opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  to   { transform: none; opacity: 1; -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .emas-rail { animation: nb-rail-in 620ms cubic-bezier(.16,1,.3,1) both; }
  .emas-hero__text > * { animation: nb-rise-in 720ms cubic-bezier(.16,1,.3,1) both; }
  .emas-hero__text > *:nth-child(1) { animation-delay: 140ms; }
  .emas-hero__text > *:nth-child(2) { animation-delay: 230ms; }
  .emas-hero__text > *:nth-child(3) { animation-delay: 340ms; }
  .emas-hero__panel { animation: nb-panel-in 640ms cubic-bezier(.16,1,.3,1) 300ms both; }
}

/* =====================================================================
   RAIL (fixe linke Sidebar)
   ===================================================================== */
.emas-rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail-w); z-index: 30;
  background: var(--emas-rail);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 0 0 30px; box-sizing: border-box;
}
.emas-rail__logo {
  width: var(--rail-w); height: var(--rail-w); flex: none;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--emas-green);
}
.emas-rail__logo img { width: 118px; height: 92px; display: block; object-fit: contain; }

.emas-rail__nav {
  flex: 1; min-height: 0; width: var(--rail-w);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 24px 0; box-sizing: border-box;
}
.emas-rail__nav a {
  width: var(--rail-w); min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 14px; box-sizing: border-box;
  color: rgba(255,255,255,0.62);
  transition: color var(--dur-micro) var(--emas-ease);
}
.emas-rail__nav a .mark {
  width: 16px; height: 2px; flex: none; background: rgba(255,255,255,0.45);
  transform: scaleX(.5); transform-origin: left center;
  transition: transform var(--dur-medium) var(--emas-ease), background-color var(--dur-micro) var(--emas-ease);
}
.emas-rail__nav a .label {
  font: 500 12px/1 Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.emas-rail__nav a.is-active { color: #fff; }
.emas-rail__nav a.is-active .mark { transform: scaleX(1); background: #fff; }
.emas-rail__nav a:hover { color: #fff; }

.emas-rail__social { display: flex; align-items: center; justify-content: center; gap: 22px; color: #fff; }
.emas-rail__social a { display: inline-flex; opacity: .85; transition: opacity var(--dur-micro) var(--emas-ease); }
.emas-rail__social a:hover { opacity: 1; }
.emas-rail__social svg { width: 19px; height: 19px; display: block; }

/* Rail-Burger (nur mobil) */
.emas-rail__burger { display: none; }

/* =====================================================================
   SHELL / OFFSET
   ===================================================================== */
.emas-shell { margin-left: var(--rail-w); background: var(--emas-paper); }
.emas-main { background: var(--emas-paper); color: var(--emas-ink); }

/* =====================================================================
   HERO
   ===================================================================== */
.emas-hero {
  position: relative; height: 78vh; min-height: 640px;
  background: var(--emas-rail); overflow: visible;
}
.emas-hero__media { position: absolute; inset: 0; overflow: hidden; }
.emas-hero__media .wp-block-video,
.emas-hero__media video {
  position: absolute; inset: 0; margin: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%; display: block;
}
.emas-hero__placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 500 11px/1 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #4A4E4C;
}
.emas-hero__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(16,18,20,0.68) 0%, rgba(16,18,20,0.38) 45%, rgba(16,18,20,0) 72%);
}

.emas-hero__topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 128px;
  display: flex; align-items: center; padding: 0 var(--gutter); box-sizing: border-box;
}
.emas-hero__topbar .emas-eyebrow { color: #fff; }

.emas-hero__text {
  position: absolute; left: var(--gutter);
  right: calc(var(--gutter) + min(438px, 42vw) + 32px);
  bottom: 72px; max-width: 680px;
  display: flex; flex-direction: column; gap: 20px; z-index: 6;
}
.emas-hero__text .emas-eyebrow { color: #fff; }
.emas-hero__text h1 {
  margin: 0; font-family: Archivo, sans-serif; font-weight: 700;
  font-size: clamp(30px, calc((100vw - 660px) * 0.115), 76px);
  line-height: 1; letter-spacing: -.02em; color: #fff; text-wrap: pretty;
}
.emas-hero__text p { margin: 0; font: 400 18px/1.55 Archivo, sans-serif; color: #fff; max-width: 480px; }

/* Glass-Panel (Intranet) */
.emas-hero__panel {
  position: absolute; right: var(--gutter); bottom: 0; width: min(438px, 42vw); z-index: 12;
  color: #fff; overflow: hidden;
  background: rgba(24,26,28,0.28);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.emas-hero__panel-inner {
  display: flex; flex-direction: column; gap: 18px;
  padding: 40px 32px 70px;
}
.emas-hero__panel .emas-eyebrow { color: #fff; }
.emas-hero__panel h2 { margin: 0; font: 700 24px/1.15 Archivo, sans-serif; letter-spacing: -.01em; color: #fff; }
.emas-hero__panel .wp-block-button,
.emas-hero__panel .wp-block-buttons { width: 100%; }
.emas-hero__panel .emas-btn .wp-block-button__link {
  width: 100%; text-align: center; box-sizing: border-box;
  text-transform: uppercase; letter-spacing: .1em; font-size: 13px; line-height: 1.2; padding: 16px 20px;
}
.emas-hero__panel .emas-note { font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.85); }
.emas-hero__panel-hatch {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.55) 0 2px, rgba(255,255,255,0) 2px 12px);
}

/* =====================================================================
   NEWS (Tabelle + Tabs)
   ===================================================================== */
.emas-news { padding: 112px var(--gutter); }
.emas-news__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap; margin-bottom: 40px;
}
.emas-news__head h2 { margin: 0; font: 700 52px/1 Archivo, sans-serif; letter-spacing: -.02em; color: var(--emas-ink); }
.emas-filter { display: flex; align-items: center; gap: 4px; }
.emas-filter a {
  font: 500 13px/1 Archivo, sans-serif; padding: 10px 16px; color: var(--emas-ink-60);
  border: 1px solid transparent;
  transition: color var(--dur-micro) var(--emas-ease), border-color var(--dur-micro) var(--emas-ease);
}
.emas-filter a:hover { color: var(--emas-ink); }
.emas-filter a.is-active { color: var(--emas-ink); border-color: var(--emas-hairline-strong); }

/* Query-Loop als Tabelle rendern */
.emas-news__list > .wp-block-post-template {
  display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; width: 100%;
}
.emas-news__labels {
  display: grid; grid-template-columns: 1fr 180px 140px; gap: 24px;
  padding: 0 12px 12px; border-bottom: 1px solid var(--emas-hairline-strong);
  font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--emas-ink-60);
}
.emas-news__row {
  display: grid; grid-template-columns: 1fr 180px 140px; gap: 24px; align-items: baseline;
  padding: 22px 12px; border-bottom: 1px solid var(--emas-hairline);
  font: 400 18px/1.4 Archivo, sans-serif; color: var(--emas-ink);
  transition: background var(--dur-micro) var(--emas-ease);
}
.emas-news__row:hover { background: rgba(23,25,27,0.04); }
/* Vom Tab-Filter ausgeblendet — schlaegt das display:grid der Zeile. */
.emas-news__row[hidden] { display: none; }
.emas-news__row .emas-news__title { color: var(--emas-ink); font-weight: 500; }
.emas-news__row .emas-news__title a { color: inherit; }
.emas-news__row .emas-news__tag { font: 400 15px/1.4 Archivo, sans-serif; color: var(--emas-ink-60); }
.emas-news__row .emas-news__tag a { color: inherit; }
.emas-news__row .emas-news__date { font: 400 15px/1.4 Archivo, sans-serif; color: var(--emas-ink-60); }

/* ---------- News-Popup (zentrierter Dialog) ----------
   Progressive Enhancement: ohne JS bleibt die Zeile ein normaler Link auf den
   Beitrag. Erst emas.js macht daraus einen Dialog; das Markup dafuer erzeugt
   ebenfalls das JS, damit weder Pattern noch Datenbank angefasst werden. */
.emas-news__row { cursor: pointer; }

.emas-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 64px var(--gutter); box-sizing: border-box;
}
.emas-modal[hidden] { display: none; }
.emas-modal__backdrop { position: absolute; inset: 0; background: rgba(23,25,27,0.62); }
.emas-modal__dialog {
  position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto;
  background: var(--emas-paper); color: var(--emas-ink);
  padding: 56px 64px 40px; box-sizing: border-box;
}
.emas-modal__close {
  position: absolute; top: 20px; right: 20px;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  appearance: none; background: transparent; border: 1px solid var(--emas-hairline);
  color: var(--emas-ink-60); cursor: pointer;
  transition: color var(--dur-micro) var(--emas-ease), border-color var(--dur-micro) var(--emas-ease);
}
.emas-modal__close:hover { color: var(--emas-green); border-color: var(--emas-hairline-strong); }
.emas-modal__meta {
  display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding-right: 56px;
  font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--emas-ink-60);
}
.emas-modal__meta .sep { width: 16px; height: 1px; background: var(--emas-hairline-strong); flex: none; }
.emas-modal__meta a { color: inherit; }
.emas-modal__title {
  margin: 0 0 24px; font: 700 40px/1.05 Archivo, sans-serif; letter-spacing: -.02em;
  color: var(--emas-ink); text-wrap: pretty;
}
.emas-modal__rule { height: 1px; background: var(--emas-hairline); margin-bottom: 28px; }
.emas-modal__body { font: 400 18px/1.6 Archivo, sans-serif; color: var(--emas-ink-80); }
.emas-modal__body > :first-child { margin-top: 0; }
.emas-modal__body > :last-child { margin-bottom: 0; }
.emas-modal__body p { margin: 0 0 16px; max-width: 62ch; }
.emas-modal__body h2, .emas-modal__body h3 { color: var(--emas-ink); letter-spacing: -.01em; }
.emas-modal__body img { max-width: 100%; height: auto; }
.emas-modal__body a { color: var(--emas-green); }
.emas-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--emas-hairline);
}
.emas-modal__nav {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  appearance: none; background: transparent; border: 0; padding: 0; cursor: pointer;
  font: 500 13px/1 Archivo, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--emas-ink-60);
  transition: color var(--dur-micro) var(--emas-ease);
}
.emas-modal__nav:hover:not([disabled]) { color: var(--emas-ink); }
.emas-modal__nav[disabled] { color: rgba(23,25,27,0.25); cursor: default; }
.emas-modal__nav svg { width: 16px; height: 16px; display: block; }
html.emas-noscroll, html.emas-noscroll body { overflow: hidden; }

@keyframes emas-modal-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .emas-modal__backdrop { animation: emas-modal-in var(--dur-medium) var(--emas-ease) both; }
  .emas-modal__dialog { animation: nb-rise-in 420ms var(--emas-ease-enter) both; }
}

/* =====================================================================
   ÜBER EMAS
   ===================================================================== */
.emas-ueber {
  padding: 0 var(--gutter) 112px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 96px; align-items: start;
}
.emas-ueber__intro { display: flex; flex-direction: column; gap: 24px; }
.emas-ueber__intro h2 { margin: 0; font: 700 52px/1 Archivo, sans-serif; letter-spacing: -.02em; color: var(--emas-ink); }
.emas-ueber__intro p { margin: 0; font: 400 18px/1.55 Archivo, sans-serif; color: var(--emas-ink-80); text-wrap: pretty; }
/* Fakten sind ein core/table (editierbar). Das Tabellen-Layout wird
   aufgeloest, damit jede Zeile wie zuvor eine eigene Flex-Zeile bleibt —
   sonst teilen sich alle Zeilen eine gemeinsame Spaltenbreite und die
   lange Zielgruppen-Zeile bricht anders um. Die Selektoren stehen bewusst
   mit .emas-ueber__intro davor: .wp-block-table td aus der Core-Bloecke-CSS
   ist gleich spezifisch und wird je nach Ladereihenfolge sonst staerker. */
.emas-ueber__intro .emas-facts { margin: 8px 0 0; overflow: visible; }
.emas-ueber__intro .emas-facts table,
.emas-ueber__intro .emas-facts tbody { display: block; width: 100%; }
.emas-ueber__intro .emas-facts tr {
  display: flex; justify-content: space-between; gap: 24px; padding: 16px 0;
  border-top: 1px solid var(--emas-hairline);
}
.emas-ueber__intro .emas-facts tr:last-child { border-bottom: 1px solid var(--emas-hairline); }
.emas-ueber__intro .emas-facts td {
  border: 0; padding: 0;
  font: 400 15px/1.4 Archivo, sans-serif; color: var(--emas-ink-60);
}
.emas-ueber__intro .emas-facts td:last-child { color: var(--emas-ink); text-align: right; }

.emas-ueber__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 40px;
}
.emas-card { display: flex; flex-direction: column; gap: 14px; }
.emas-card__img, .emas-ph {
  background: var(--emas-paper-2); display: flex; align-items: flex-end; padding: 16px;
  font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--emas-ink-60);
}
.emas-card__img { aspect-ratio: 3/2; margin: 0; overflow: hidden; padding: 0; }
.emas-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emas-card__title { font: 700 24px/1.15 Archivo, sans-serif; color: var(--emas-ink); }
.emas-card__text { font: 400 15px/1.55 Archivo, sans-serif; color: var(--emas-ink-80); }

/* =====================================================================
   BEITRETEN
   ===================================================================== */
.emas-join {
  position: relative; background: var(--emas-paper-2);
  padding: 112px var(--gutter) 128px;
  display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 440px); gap: 64px; align-items: start;
}
.emas-join__left { display: flex; flex-direction: column; gap: 40px; }
.emas-join__head { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.emas-join__head h2 { margin: 0; font: 700 52px/1 Archivo, sans-serif; letter-spacing: -.02em; color: var(--emas-ink); }
.emas-join__head p { font: 400 18px/1.55 Archivo, sans-serif; color: var(--emas-ink-60); }
.emas-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px; }
.emas-step { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--emas-hairline-strong); }
.emas-step--active { border-top: 2px solid var(--emas-ink); }
.emas-step__num { font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; color: var(--emas-ink-60); }
.emas-step--active .emas-step__num { color: var(--emas-ink); }
.emas-step__title { font: 700 24px/1.15 Archivo, sans-serif; color: var(--emas-ink); }
.emas-step__text { font: 400 15px/1.55 Archivo, sans-serif; color: var(--emas-ink-80); }

/* Formkarte — überlappt nach oben */
.emas-form {
  position: relative; margin-top: -184px; width: 100%; justify-self: end; box-sizing: border-box;
  background: #fff; border: 1px solid var(--emas-hairline-strong); padding: 28px; z-index: 10;
}
.emas-form .wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
.emas-form .emas-field { display: flex; flex-direction: column; gap: 8px; }
.emas-form .emas-field__label { font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--emas-ink-60); }
.emas-form .wpcf7-form-control-wrap { display: block; }
.emas-form .wpcf7-form-control {
  width: 100%; box-sizing: border-box; font: 400 16px/1.4 Archivo, sans-serif; color: var(--emas-ink);
  background: #fff; border: 1px solid var(--emas-field); padding: 12px 14px; border-radius: 0;
}
.emas-form .wpcf7-form-control:focus { outline: none; border-color: var(--emas-green); }
.emas-form .wpcf7-submit {
  margin-top: 4px; width: 100%; font: 600 15px/1.2 Archivo, sans-serif; color: #fff;
  background: var(--emas-green); border: 0; border-radius: 0; padding: 16px 24px; cursor: pointer;
  transition: background var(--dur-long) var(--emas-ease);
}
.emas-form .wpcf7-submit:hover { background: var(--emas-green-dark); }
.emas-form .wpcf7-not-valid { border-color: var(--emas-error); }
.emas-form .wpcf7-not-valid-tip { font: 400 13px/1.5 Archivo, sans-serif; color: var(--emas-error); margin-top: 6px; }
.emas-form .wpcf7-response-output {
  margin: 0 !important; padding: 12px 16px !important;
  border: 0 !important; border-left: 2px solid var(--emas-green) !important;
  background: var(--emas-paper-2); font: 400 14px/1.5 Archivo, sans-serif; color: var(--emas-ink-80);
}
.emas-form .wpcf7-response-output.wpcf7-validation-errors,
.emas-form .wpcf7-response-output.wpcf7-mail-sent-ng { border-left-color: var(--emas-error) !important; color: var(--emas-error); }
.emas-form .wpcf7-response-output.wpcf7-mail-sent-ok { border-left-color: var(--emas-green) !important; color: var(--emas-green); }
.emas-form .wpcf7-spinner { background: var(--emas-green-light); }

/* =====================================================================
   KONTAKT (dunkel)
   ===================================================================== */
.emas-contact {
  background: var(--emas-ink); color: #fff;
  padding: 112px var(--gutter) 48px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 64px; align-items: start;
}
.emas-contact__col { display: flex; flex-direction: column; gap: 16px; }
.emas-contact__col h2 { margin: 0; font: 700 52px/1 Archivo, sans-serif; letter-spacing: -.02em; color: #fff; }
.emas-contact__col .emas-eyebrow { color: rgba(255,255,255,0.62); }
.emas-contact__col p { font: 400 18px/1.55 Archivo, sans-serif; color: rgba(255,255,255,0.85); }
.emas-contact__map {
  min-height: 200px; background: rgba(255,255,255,0.14); display: flex; align-items: flex-end; padding: 16px;
  font: 500 12px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}

/* =====================================================================
   FOOTER (dunkel)
   ===================================================================== */
.emas-footer {
  margin-left: var(--rail-w); background: var(--emas-ink); color: #fff;
  padding: 40px var(--gutter) 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.emas-footer__brand { display: flex; align-items: center; gap: 16px; }
.emas-footer__brand img { width: 28px; height: 28px; display: block; }
.emas-footer__brand span { font: 500 12px/1.4 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.emas-footer .emas-btn .wp-block-button__link { padding: 14px 22px; }

/* =====================================================================
   MOBIL (<= 900px): Rail wird Top-Bar, Raster einspaltig
   ===================================================================== */
@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .emas-rail {
    top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 64px;
    flex-direction: row; justify-content: space-between; align-items: center;
    padding: 0 16px 0 0;
  }
  .emas-rail__logo { width: 64px; height: 64px; }
  .emas-rail__logo img { width: 52px; height: 40px; }
  .emas-rail__nav {
    position: fixed; top: 64px; left: 0; right: 0; width: auto;
    flex-direction: column; justify-content: flex-start; gap: 0; padding: 8px 16px 16px;
    background: var(--emas-rail); border-top: 1px solid rgba(255,255,255,0.14);
    max-height: 80vh; overflow: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 220ms var(--emas-ease), transform 260ms var(--emas-ease), visibility 0s linear 260ms;
  }
  .emas-rail.is-open .emas-rail__nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 220ms var(--emas-ease), transform 260ms var(--emas-ease), visibility 0s;
  }
  .emas-rail__nav a { width: auto; padding: 14px 4px; border-top: 1px solid rgba(255,255,255,0.10); }
  .emas-rail__nav a:first-child { border-top: 0; }
  .emas-rail__social { display: none; }

  .emas-rail__burger {
    display: inline-flex; appearance: none; background: transparent; border: 0; cursor: pointer;
    width: 44px; height: 44px; align-items: center; justify-content: center; color: #fff;
  }
  .emas-rail__burger .box { position: relative; width: 22px; height: 16px; }
  .emas-rail__burger .lines, .emas-rail__burger .lines::before, .emas-rail__burger .lines::after {
    position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
    transition: transform 250ms var(--emas-ease), opacity 150ms var(--emas-ease);
  }
  .emas-rail__burger .lines { top: 50%; transform: translateY(-50%); }
  .emas-rail__burger .lines::before { content: ""; top: -7px; }
  .emas-rail__burger .lines::after  { content: ""; top: 7px; }
  .emas-rail.is-open .emas-rail__burger .lines { transform: translateY(-50%) rotate(45deg); }
  .emas-rail.is-open .emas-rail__burger .lines::before { top: 0; transform: rotate(90deg); }
  .emas-rail.is-open .emas-rail__burger .lines::after  { top: 0; opacity: 0; }

  .emas-shell { margin-left: 0; margin-top: 64px; }
  .emas-footer { margin-left: 0; }

  .emas-hero { height: auto; min-height: 0; }
  .emas-hero__media { position: relative; height: 320px; }
  .emas-hero__topbar { display: none; }
  .emas-hero__text {
    position: static; inset: auto; right: auto; max-width: none;
    padding: 28px var(--gutter); background: var(--emas-rail);
  }
  .emas-hero__panel { position: static; width: auto; }

  .emas-news, .emas-ueber, .emas-join, .emas-contact { padding-top: 56px; padding-bottom: 56px; }
  .emas-ueber { gap: 40px; }
  .emas-news__labels { display: none; }
  .emas-news__row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .emas-news__row .emas-news__date { grid-column: 1; grid-row: 2; }
  .emas-news__row .emas-news__tag { grid-column: 2; grid-row: 2; text-align: right; }
  .emas-news__row .emas-news__title { grid-column: 1 / -1; grid-row: 1; font-size: 17px; }
  .emas-news__head h2, .emas-ueber__intro h2, .emas-join__head h2, .emas-contact__col h2 { font-size: 36px; }
  .emas-join { grid-template-columns: 1fr; }
  .emas-form { margin-top: 0; justify-self: stretch; }

  /* News-Popup wird zum Sheet von unten, die Top-Bar bleibt sichtbar. */
  .emas-modal { padding: 88px 0 0; align-items: stretch; }
  .emas-modal__dialog { width: 100%; max-height: none; height: 100%; padding: 24px 20px 32px; }
  .emas-modal__close { top: 12px; right: 12px; }
  .emas-modal__title { font-size: 28px; line-height: 1.1; }
  .emas-modal__body { font-size: 16px; }
}

/* ---------------- GDPR (Trew Knowledge) Cookie-Consent — Northbound ----
   Plugin-CSS ist stark spezifisch + font-family:!important; darum durchgehend
   !important. Cookie-Bar in Footer-Optik: Ink-Fläche, Aktion in EMAS-Grün,
   scharfe Kanten, Typo Archivo. */

.gdpr, .gdpr :not(textarea):not(input):not(select) { font-family: Archivo, system-ui, sans-serif !important; }

.gdpr.gdpr-privacy-bar, .gdpr.gdpr-reconsent-bar {
  background: var(--emas-ink) !important;
  border-top: 1px solid rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
.gdpr.gdpr-privacy-bar .gdpr-content p, .gdpr.gdpr-reconsent-bar .gdpr-content p {
  font: 400 15px/1.6 Archivo, sans-serif !important; color: rgba(255,255,255,0.85) !important;
}
.gdpr.gdpr-privacy-bar a, .gdpr.gdpr-reconsent-bar a { color: var(--emas-green-light) !important; }

.gdpr .gdpr-agreement, .gdpr.gdpr-reconsent-bar .gdpr-agreement {
  background: var(--emas-green) !important; border: 1px solid var(--emas-green) !important;
  border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
  color: #fff !important; font: 600 14px/1 Archivo, sans-serif !important;
  padding: 14px 22px !important; height: auto !important; line-height: 1 !important;
}
.gdpr .gdpr-agreement:hover, .gdpr.gdpr-reconsent-bar .gdpr-agreement:hover {
  background: var(--emas-green-dark) !important; border-color: var(--emas-green-dark) !important;
}
.gdpr .gdpr-preferences { color: #fff !important; font: 600 14px/1 Archivo, sans-serif !important; text-decoration: underline !important; }
.gdpr .gdpr-preferences:before { color: var(--emas-green-light) !important; }
.gdpr .gdpr-close { color: rgba(255,255,255,0.62) !important; }
.gdpr .gdpr-close:hover { color: var(--emas-green-light) !important; }

.gdpr-overlay { background: rgba(16,18,20,.72) !important; }
.gdpr.gdpr-privacy-preferences .gdpr-wrapper { background: var(--emas-paper) !important; border-top: 2px solid var(--emas-green) !important; border-radius: 0 !important; }
.gdpr.gdpr-privacy-preferences h3, .gdpr.gdpr-privacy-preferences h4 { color: var(--emas-ink) !important; font-family: Archivo, sans-serif !important; font-weight: 700 !important; }
.gdpr.gdpr-privacy-preferences .gdpr-box-title { border-bottom: 1px solid var(--emas-hairline) !important; }
.gdpr .gdpr-tab-button.gdpr-active, .gdpr .gdpr-tabs .gdpr-active > .gdpr-tab-button { color: var(--emas-green) !important; box-shadow: inset 3px 0 0 var(--emas-green) !important; }
.gdpr.gdpr-privacy-preferences footer input[type=submit], .gdpr.gdpr-privacy-preferences input[type=submit] {
  background: var(--emas-green) !important; color: #fff !important; border: 1px solid var(--emas-green) !important;
  border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
  font: 600 14px/1 Archivo, sans-serif !important; padding: 14px 22px !important;
}
.gdpr.gdpr-privacy-preferences footer input[type=submit]:hover { background: var(--emas-green-dark) !important; }
.gdpr .gdpr-switch .gdpr-slider { background-color: var(--emas-field) !important; }
.gdpr .gdpr-switch input:checked + .gdpr-slider { background-color: var(--emas-green) !important; }
.gdpr .gdpr-always-active { background-color: var(--emas-green) !important; color: #fff !important; border-radius: 0 !important; }
.gdpr .gdpr-cookies-used { border-top: 1px solid var(--emas-hairline) !important; }