/* ==========================================================================
   ELN Systems — app.css
   --------------------------------------------------------------------------
   Handgeschrieben, kein Build-Schritt, keine externen Ressourcen. Quelle der
   Gestaltung: das abgenommene Mockup mockups/variante-c-leitstand.html samt
   Unterseiten (Variante C, „Leitstand"). Vorgänger-Design (Editorial, hell)
   liegt als app-editorial-backup.css daneben.

   Welt: dunkler Graphitgrün-Grund, Panel-Kacheln mit 1px-Linien, Markengrün
   #00951d als System- und Statusfarbe (Text-Tint #2FC24E auf dunklem Grund),
   Mono-Ziffern tabellarisch, harte Grotesk. Die -8°-Scherung aus der
   Bildmarke bleibt das durchgehende geometrische Motiv.

   Inhalt
   ------
    1. Design-Tokens
    2. Reset & Basis
    3. Typografische Skala
    4. Marken-Motiv (Tick)
    5. Raster & Sektionen
    6. Kopfzeile & Navigation
    7. Skip-Link & Screenreader-Utilities
    8. Hero & Kennzahlen-Panel
    9. Schaltflächen & Links
   10. Sektionskopf
   11. Werdegang (Protokoll-Zeilen)
   12. Geschäftsfelder (Modul-Kacheln)
   13. Technologie (Prinzipien-Liste + Schema)
   14. Karriere
   15. Kontakt
   16. Fußzeile
   17. Illustrationen & Einblendungen
   18. Prosa-Seiten (page.php, the_content)
   19. WordPress-Kernklassen
   20. WP Job Openings
   21. Consent-Layer
   22. 404
   23. Admin-Bar & Reduced Motion
   24. Unterseiten — Seitenkopf & Abschluss-CTA
   25. Unterseiten — Erzählte Meilensteine & Prinzipien
   26. Unterseiten — Bereiche, Spannungsfeld, Kreislauf
   27. Unterseiten — Duo-Layout mit Panel-Kacheln
   28. Unterseiten — Karriere & Jobs-Embed
   29. Förderung
   ========================================================================== */


/* == 1. Design-Tokens ====================================================== */

:root{
  /* Flächen (dunkel) */
  --g0:#0F110F;            /* Seitengrund */
  --g1:#141714;            /* Panels, getönte Bänder */
  --g2:#191D19;            /* Panel-Hover, Vertiefung */

  /* Linien */
  --line:#272C27;
  --line-2:#343A34;
  --line-soft:#1E231E;

  /* Schrift */
  --fg:#EEF0EC;
  --fg-mid:#A2AAA0;        /* 7,2:1 auf g0 */
  --fg-dim:#7E857C;        /* 4,7:1 auf g0 — nur ≥13px */

  /* Akzent */
  --green:#00951d;         /* Marke: Flächen, Marker, Buttons */
  --green-t:#2FC24E;       /* Tint für Text/Icons auf dunklem Grund, 7,3:1 */
  --green-deep:#007A18;
  --wash:rgba(0,149,29,.08);

  /* Kompatibilitäts-Mapping auf die alten Token-Namen: übersehene Regeln
     oder Plugin-Anpassungen landen so automatisch in der neuen Welt. */
  --paper:var(--g0);
  --paper-2:var(--g1);
  --paper-3:var(--g2);
  --ink:var(--fg);
  --ink-2:var(--fg-mid);
  --ink-3:var(--fg-dim);
  --rule:var(--line);
  --rule-2:var(--line-2);
  --green-ink:var(--green-t);
  --green-wash:var(--wash);

  /* Maße */
  --pad:clamp(4rem, 7vw, 6.5rem);
  --shear:-8deg;
  --wrap:1320px;

  /* Schriftfamilien — reiner Systemstack, keine externen Ressourcen.
     Die Serifen der Editorial-Welt entfallen bewusst. */
  --sans:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --serif:var(--sans);
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --head-h:70px;
}


/* == 2. Reset & Basis ====================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--g0);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--green-t); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--green); color:#fff; }


/* == 3. Typografische Skala ================================================ */

.h1{
  font-size:clamp(2.4rem, 4.6vw, 4rem);
  line-height:1.04;
  letter-spacing:-0.025em;
  font-weight:700;
  text-wrap:balance;
}
.h2{
  font-size:clamp(1.7rem, 3vw, 2.6rem);
  line-height:1.08;
  letter-spacing:-0.022em;
  font-weight:700;
  text-wrap:balance;
}
.h3{
  font-size:1.0625rem;
  line-height:1.3;
  letter-spacing:-0.012em;
  font-weight:600;
}
.lede{
  font-size:clamp(1.02rem, 1.3vw, 1.15rem);
  line-height:1.65;
  color:var(--fg-mid);
  max-width:56ch;
}
.prose{
  font-size:0.97rem;
  line-height:1.68;
  color:var(--fg-mid);
  max-width:60ch;
}
.prose + .prose{ margin-top:1.05em; }
.prose strong{ color:var(--fg); font-weight:600; }
.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
  font-weight:500;
}
.meta{
  font-size:0.8125rem;
  line-height:1.5;
  color:var(--fg-dim);
}


/* == 4. Marken-Motiv (Tick) ================================================ */

.tick{
  display:inline-block;
  width:24px; height:5px;
  background:var(--green);
  transform:skewX(var(--shear));
}
.tick--sm{ width:18px; height:4px; }


/* == 5. Raster & Sektionen ================================================= */
/* Die Randspalte der Editorial-Welt entfällt: .grid wird zum neutralen
   Container, .rail bleibt im Markup, wird aber nicht mehr gerendert. */

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(20px, 4.5vw, 56px);
}
.grid{ display:block; }
.rail{ display:none; }
.col{ padding-block:var(--pad); min-width:0; }
.sec{ scroll-margin-top:96px; }
.sec--ruled .grid{ border-top:1px solid var(--line-soft); }
.sec--tint{ background:var(--g1); border-top:1px solid var(--line); }


/* == 6. Kopfzeile & Navigation ============================================= */

.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(15,17,15,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:var(--head-h);
}
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand svg{ height:38px; width:auto; display:block; }
/* Wortmarke liegt in der Datei in Marken-Schwarz, auf dunklem Grund hell. */
.brand svg path[fill="#1A1A1A"]{ fill:var(--fg); }
.nav{ display:flex; align-items:center; gap:clamp(14px, 2.1vw, 30px); }
.nav a{
  text-decoration:none;
  font-size:0.8125rem;
  letter-spacing:0.015em;
  color:var(--fg-mid);
  padding:6px 0;
  position:relative;
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--green);
  transform:skewX(var(--shear)) scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{ color:var(--fg); }
.nav a:hover::after{ transform:skewX(var(--shear)) scaleX(1); }
.nav a[aria-current]{ color:var(--fg); }
.nav a[aria-current]::after{ transform:skewX(var(--shear)) scaleX(1); }
.nav-toggle{
  display:none;
  font:inherit; font-size:0.8125rem;
  background:none; border:1px solid var(--line-2);
  color:var(--fg); padding:8px 14px; cursor:pointer;
  border-radius:4px;
}
.nav-toggle:active{ transform:translateY(1px); }
.nav-toggle[aria-expanded="true"]{
  background:var(--fg); border-color:var(--fg); color:var(--g0);
}
@media (max-width:899px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--g0);
    border-bottom:1px solid var(--line);
    padding:8px clamp(20px,5vw,56px) 20px;
    display:none;
  }
  .site-head[data-open="true"] .nav{ display:flex; }
  .nav a{ padding:12px 0; font-size:0.95rem; width:100%; border-bottom:1px solid var(--line-soft); }
  .nav a:last-child{ border-bottom:0; }
}


/* == 7. Skip-Link & Screenreader-Utilities ================================= */

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff;
  font-size:0.875rem; font-weight:500;
  padding:14px 22px; border-radius:0 0 4px 0;
  text-decoration:none;
}
.skip-link:focus{ left:0; }

.screen-reader-text,
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}
.screen-reader-text:focus{
  clip:auto; clip-path:none;
  width:auto; height:auto; margin:0;
  padding:14px 22px;
  background:var(--green); color:#fff;
  z-index:200;
}


/* == 8. Hero & Kennzahlen-Panel ============================================ */

.hero .col{ padding-top:clamp(3rem, 6vw, 5.5rem); }
.hero__layout{ display:grid; gap:clamp(2.5rem, 4.5vw, 4.5rem); align-items:center; }
@media (min-width:1000px){
  .hero__layout{ grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); }
}
.hero__eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(1.4rem,2.4vw,2rem); }
.hero .h1{ margin-bottom:clamp(1.6rem,2.8vw,2.25rem); max-width:19ch; }
.hero .lede{ margin-bottom:1.5rem; max-width:50ch; }
.hero__note{ margin-bottom:2rem; }
.hero__links{ display:flex; flex-wrap:wrap; gap:14px; }

/* Kennzahlen-Panel (ersetzt Ledger-Sektion und Hero-Illustration) */
.panel{
  background:var(--g1);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.panel__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 22px;
  border-bottom:1px solid var(--line);
}
.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.tile{ background:var(--g1); padding:24px 22px; min-width:0; }
.tile__lab{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fg-dim);
  margin-bottom:13px;
  display:flex; justify-content:space-between; gap:10px;
}
.tile__lab i{ font-style:normal; color:var(--green-t); }
.tile__val{
  font-size:clamp(1.9rem, 2.8vw, 2.5rem);
  font-weight:700; letter-spacing:-0.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.tile__val span{ color:var(--green-t); }
.tile__meta{ margin-top:10px; font-size:0.78rem; color:var(--fg-dim); line-height:1.45; }
.bars{ display:flex; align-items:flex-end; gap:5px; height:52px; margin-top:4px; }
.bars i{
  flex:1; background:#2C332C;
  transform:skewX(var(--shear));
  border-radius:1px; transform-origin:bottom;
  animation:grow .9s cubic-bezier(.2,.7,.3,1) backwards;
}
.bars i.g{ background:var(--green); }
.bars i:nth-child(1){ height:34%; animation-delay:.15s }
.bars i:nth-child(2){ height:52%; animation-delay:.22s }
.bars i:nth-child(3){ height:44%; animation-delay:.29s }
.bars i:nth-child(4){ height:70%; animation-delay:.36s }
.bars i:nth-child(5){ height:58%; animation-delay:.43s }
.bars i:nth-child(6){ height:88%; animation-delay:.5s }
.bars i:nth-child(7){ height:76%; animation-delay:.57s }
.bars i:nth-child(8){ height:96%; animation-delay:.64s }
@keyframes grow{ from{ transform:skewX(var(--shear)) scaleY(0); } }
.panel__note{
  padding:12px 22px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9.5px; letter-spacing:0.1em;
  color:#5C635A;
}

/* Ledger (Restnutzung, dunkle Fassung) */
.ledger{ border-top:1px solid var(--line-2); }
.ledger__row{
  display:grid; grid-template-columns:1fr; gap:2px 24px;
  padding:clamp(1.15rem,2vw,1.6rem) 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
@media (min-width:640px){
  .ledger__row{ grid-template-columns:minmax(9rem,13rem) minmax(0,1fr) auto; gap:32px; }
}
.figure{
  font-size:clamp(2rem, 4.1vw, 3.15rem);
  font-weight:700; letter-spacing:-0.04em; line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.figure > span{ color:var(--green-t); }
.ledger__label{ font-size:1rem; color:var(--fg); }
.ledger__label span{ display:block; color:var(--fg-dim); font-size:0.8125rem; margin-top:3px; }
@media (max-width:639px){ .ledger__row .mono{ display:none; } }
.ledger__note{ margin-top:1.25rem; }


/* == 9. Schaltflächen & Links ============================================== */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:#fff;
  font:inherit; font-size:0.9375rem; font-weight:600;
  padding:15px 26px; border:0; border-radius:6px;
  text-decoration:none; cursor:pointer;
  transition:background .22s, transform .12s;
}
.btn:hover{ background:var(--green-deep); }
.btn:active{ transform:translateY(1px); }
.btn--quiet{
  background:transparent; color:var(--fg);
  border:1px solid var(--line-2);
  padding:14px 25px;
}
.btn--quiet:hover{ background:transparent; border-color:var(--fg-dim); }
.arw{ display:inline-flex; align-self:center; flex:0 0 auto; }
.arw svg{ display:block; width:.8em; height:auto; }
.btn .arw{ transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw{ transform:translateX(4px); }

.link{
  display:inline-flex; align-items:baseline; gap:9px;
  text-decoration:none; font-size:0.9375rem; font-weight:500;
  color:var(--fg);
  padding-bottom:5px;
  border-bottom:1px solid var(--line-2);
  transition:border-color .25s, color .25s;
}
.link .arw{ color:var(--green-t); transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.link:hover{ border-bottom-color:var(--green); color:var(--green-t); }
.link:hover .arw{ transform:translateX(4px); }
.link:active{ transform:translateY(1px); }
.link--quiet{ font-weight:400; color:var(--fg-mid); }
a.inline{ color:var(--green-t); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a.inline:hover{ text-decoration-thickness:2px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1.6rem; }
.chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em;
  color:var(--fg-mid);
  border:1px solid var(--line);
  border-radius:4px; padding:6px 12px;
}


/* == 10. Sektionskopf ====================================================== */

.sec-head{ max-width:64ch; margin-bottom:clamp(2.25rem, 4vw, 3.5rem); }
.sec-head .mono{ display:block; margin-bottom:14px; }
.sec-head .h2{ margin-bottom:1.1rem; }
.sec-head--flush{ margin-bottom:0; }
.sec-head--tight .h2{ max-width:16ch; margin-bottom:0; }


/* == 11. Werdegang (Protokoll-Zeilen) ====================================== */
/* Die vierspaltige Zeitleiste der Editorial-Welt wird zur Protokoll-Liste:
   eine Zeile je Etappe, Jahr in der Mono-Spalte, Scherungs-Marker am Beginn. */

.timeline{ display:grid; gap:0; margin-top:clamp(2.5rem,4vw,3.75rem); border-top:1px solid var(--line); }
.timeline__item{
  display:grid; grid-template-columns:110px minmax(0,1fr);
  gap:2px clamp(20px,3vw,48px);
  border-bottom:1px solid var(--line-soft);
  padding:clamp(1.3rem,2.2vw,1.8rem) 0;
  position:relative;
}
/* Jahr, Titel und Text sind Geschwister: das Jahr belegt Spalte 1 über beide
   Zeilen, Titel und Text stapeln in Spalte 2. */
.timeline__item .timeline__year{ grid-column:1; grid-row:1 / span 2; }
.timeline__item h3{ grid-column:2; }
.timeline__item p{ grid-column:2; }
@media (max-width:700px){
  .timeline__item{ grid-template-columns:1fr; gap:6px; }
  .timeline__item .timeline__year{ grid-column:1; grid-row:auto; }
  .timeline__item h3,.timeline__item p{ grid-column:1; }
}
.timeline__item::before{
  content:""; position:absolute; top:-1px; left:0;
  width:34px; height:3px; background:var(--green);
  transform:skewX(var(--shear));
}
.timeline__item:last-child::before{ width:72px; }
.timeline__year{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
  color:var(--fg-dim); font-weight:600;
  display:block; padding-top:.3rem;
}
.timeline__item:last-child .timeline__year{ color:var(--green-t); }
.timeline__item h3{ font-size:1.1rem; font-weight:600; margin-bottom:.45rem; letter-spacing:-0.012em; }
.timeline__item p{ font-size:0.94rem; line-height:1.6; color:var(--fg-mid); max-width:62ch; }

.copyblock{ display:grid; gap:clamp(1.5rem,3vw,3rem); grid-template-columns:1fr; }
.section-label{ margin-top:clamp(2.5rem,4vw,3.5rem); }


/* == 12. Geschäftsfelder (Modul-Kacheln) =================================== */

.ecolist{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
@media (min-width:860px){ .ecolist{ grid-template-columns:1fr 1fr; } }
.eco{
  background:var(--g1);
  padding:clamp(1.6rem,2.6vw,2.2rem);
  position:relative;
  transition:background .25s;
}
.eco:hover,
.eco:focus-within{ background:var(--g2); }
.eco::before{
  content:""; position:absolute; top:0; left:0;
  width:0; height:2px; background:var(--green);
  transform:skewX(var(--shear));
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.eco:hover::before,
.eco:focus-within::before{ width:64px; }
.eco__tag{
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg-dim); display:block; margin-bottom:1rem;
}
.eco h3{ font-size:1.15rem; font-weight:600; letter-spacing:-0.014em; margin-bottom:.6rem; }
.eco p{ font-size:0.94rem; line-height:1.62; color:var(--fg-mid); max-width:46ch; }

.brands{ margin-top:1.1rem; display:grid; gap:0; }
.brands li{
  border-top:1px solid var(--line);
  padding:.6rem 0;
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.brands b{ font-weight:600; font-size:0.9rem; letter-spacing:-0.01em; }
.brands span{ font-size:0.75rem; color:var(--fg-dim); }


/* == 13. Technologie (Prinzipien-Liste + Schema) =========================== */

.tech__layout{ display:grid; gap:clamp(2.5rem,4vw,4rem); align-items:start; }
@media (min-width:960px){ .tech__layout{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); } }
.techlist{ display:grid; gap:0; border-top:1px solid var(--line); }
/* Freistehend (z. B. Wirkung) zweispaltig; in der Zwei-Spalten-Sektion der
   Startseite bleibt die Liste einspaltig. */
@media (min-width:860px){
  .techlist{ grid-template-columns:1fr 1fr; gap:0 clamp(24px,3vw,40px); }
  .tech__layout .techlist{ grid-template-columns:1fr; gap:0; }
}
.tech{
  border-bottom:1px solid var(--line-soft);
  padding:1.25rem 0 1.45rem;
  position:relative;
}
.tech::before{
  content:""; position:absolute; top:-1px; left:0;
  width:26px; height:3px; background:var(--green);
  transform:skewX(var(--shear));
}
.tech h3{ margin-bottom:.5rem; }
.tech p{ font-size:0.92rem; line-height:1.6; color:var(--fg-mid); max-width:56ch; }

/* Schema-Figur im Panel-Rahmen */
.schema{
  background:var(--g1);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
}
.schema .mono{ display:block; margin-bottom:16px; }
.schema svg,
.stackfig svg,
.figwrap svg{ display:block; width:100%; height:auto; }


/* == 14. Karriere ========================================================== */

.career__layout{ display:grid; gap:clamp(2.25rem,4vw,4rem); align-items:start; }
@media (min-width:900px){ .career__layout{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.benefits{ display:grid; gap:0; border-top:1px solid var(--line); }
.benefit{
  border-bottom:1px solid var(--line-soft);
  padding:1rem 0;
  display:flex; gap:16px; align-items:flex-start;
}
.benefit .tick{ flex:0 0 auto; margin-top:.5rem; }
.benefit p{ font-size:0.96rem; line-height:1.55; color:var(--fg-mid); }
.career__cta{ margin-top:2rem; }


/* == 15. Kontakt =========================================================== */

.contact__layout{ display:grid; gap:clamp(2.5rem,4vw,4.5rem); align-items:start; }
@media (min-width:900px){ .contact__layout{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
.form{ display:grid; gap:0; }
.field{ border-top:1px solid var(--line); padding-top:.9rem; padding-bottom:1.05rem; }
.field:first-child{ border-top:1px solid var(--line-2); }
.field:last-of-type{ border-bottom:1px solid var(--line-2); }
.field label{
  display:block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:.5rem;
}
/* Checkbox ausgenommen: die Regel ist für Textfelder gedacht, und
   background:transparent würde das native Kästchen der DSGVO-Zustimmung
   im hellen Browser-Default statt im dunklen Schema rendern. */
.field input:not([type="checkbox"]),.field textarea,.field select{
  width:100%; font:inherit; font-size:1rem; color:var(--fg);
  background:transparent; border:0; padding:4px 0 8px;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
  color-scheme:dark;
}
.field textarea{ resize:vertical; min-height:5.5em; line-height:1.5; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-bottom-color:var(--green-t);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{ outline:none; }
.sel{ position:relative; }
.sel select{ appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer; }
.sel select option{ background:var(--g1); color:var(--fg); }
.sel::after{
  content:""; position:absolute; right:2px; bottom:16px;
  width:7px; height:7px; border-right:1.5px solid var(--fg-dim); border-bottom:1.5px solid var(--fg-dim);
  transform:rotate(45deg); pointer-events:none;
}
.form__submit{ margin-top:1.75rem; }

/* Vorname/Nachname nebeneinander: eine Zeile, zwei Felder. Die Oberlinie läuft
   dabei optisch durch — deshalb bekommen beide Felder dieselbe Linienfarbe. */
.field-pair{ display:grid; gap:0 1.75rem; }
@media (min-width:560px){ .field-pair{ grid-template-columns:1fr 1fr; } }
.field-pair .field{ border-top-color:var(--line); }
.form > .field-pair:first-child .field{ border-top-color:var(--line-2); }

.field__optional{ text-transform:none; letter-spacing:0; opacity:.7; margin-left:.4em; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{ border-bottom-color:var(--danger,#e5484d); }
.field__error{
  margin-top:.45rem; font-size:0.8125rem; line-height:1.45;
  color:var(--danger,#e5484d);
}

/* DSGVO-Zustimmung: Checkbox neben Fließtext, deshalb ohne die
   Mono-Label-Optik der übrigen Felder. */
.field--consent label.consent-check{
  display:flex; align-items:flex-start; gap:.7rem;
  font-family:var(--sans); font-size:0.8125rem; line-height:1.5;
  letter-spacing:0; text-transform:none; color:var(--fg-mid);
  margin-bottom:0;
}
.consent-check input[type="checkbox"]{
  flex:0 0 auto; margin-top:.15rem;
  accent-color:var(--green); color-scheme:dark; cursor:pointer;
}
.consent-check a{ color:var(--fg); text-decoration:underline; text-underline-offset:2px; }
.consent-check a:hover{ color:var(--green); }

.form__turnstile{ margin-top:1.25rem; }
.form__msg{
  margin-top:1.25rem; font-size:0.875rem; line-height:1.5; color:var(--green);
}
.form__msg--error{ color:var(--danger,#e5484d); }

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet. Bewusst
   nicht display:none — manche Bots ignorieren genau das. */
.elns-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.routes{ display:grid; gap:0; border-top:1px solid var(--line); }
.route{ padding:1.15rem 0 1.3rem; border-bottom:1px solid var(--line-soft); position:relative; }
.route::before{
  content:""; position:absolute; top:-1px; left:0;
  width:18px; height:3px; background:var(--green); transform:skewX(var(--shear));
}
.route h3{ margin-bottom:.4rem; }
.route p{ font-size:0.875rem; line-height:1.55; color:var(--fg-mid); }
.routes__hint{ margin-top:1.1rem; }
.section-head-inline{ margin-bottom:1rem; }

/* Direktkontakt-Fallback (ohne Contact Form 7) */
.direct{ display:grid; gap:0; }
.direct__item{
  border-top:1px solid var(--line);
  padding:1.15rem 0 1.35rem;
  position:relative;
}
.direct__item:first-child{ border-top:1px solid var(--line-2); }
.direct__item:last-child{ border-bottom:1px solid var(--line-2); }
.direct__item::before{
  content:""; position:absolute; top:-1px; left:0;
  width:18px; height:3px; background:var(--green); transform:skewX(var(--shear));
}
.direct__label{
  display:block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-dim); margin-bottom:.5rem;
}
.direct__value{
  font-size:1.0625rem; font-weight:500; letter-spacing:-0.012em;
  display:inline-flex; align-items:baseline; gap:9px;
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
  padding-bottom:4px;
  transition:border-color .25s, color .25s;
}
.direct__value:hover{ color:var(--green-t); border-bottom-color:var(--green); }
.direct__address{ font-size:1.0625rem; font-style:normal; color:var(--fg); }
.direct__note{ margin-top:1.25rem; }


/* == 16. Fußzeile ========================================================== */

.site-foot{ background:var(--g1); border-top:1px solid var(--line); }
.site-foot__inner{ padding-block:clamp(2.5rem,4vw,3.5rem); }
.foot-top{ display:grid; gap:clamp(1.75rem,3vw,3rem); }
@media (min-width:760px){ .foot-top{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }
.foot-mark{ display:flex; align-items:center; gap:18px; }
.foot-mark svg{ width:44px; height:44px; display:block; }
/* Bildmarke als Knockout: auf dunklem Grund in Markengrün. */
.foot-mark svg path{ fill:var(--green); }
.foot-mark p{ font-size:0.9375rem; font-weight:600; letter-spacing:-0.01em; }
.foot-mark p span{ display:block; font-weight:400; font-size:0.8125rem; color:var(--fg-dim); margin-top:2px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.foot-links a,
.foot-links button{
  font:inherit;
  font-size:0.875rem; color:var(--fg-mid); text-decoration:none;
  background:none; border:0;
  padding:0 0 3px; cursor:pointer;
}
.foot-links a:hover,
.foot-links button:hover{ color:var(--green-t); }
.foot-bottom{
  margin-top:clamp(2rem,3.4vw,2.75rem);
  padding-top:1.25rem; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
}


/* == 17. Illustrationen & Einblendungen ==================================== */

.svg-label{
  font-family:var(--mono); font-size:9px; letter-spacing:0.14em;
  fill:var(--fg-dim); text-transform:uppercase;
}
.svg-label--accent{ fill:var(--green-t); }
.flow{ stroke-dasharray:3 9; animation:flow 3.4s linear infinite; }
@keyframes flow{ to{ stroke-dashoffset:-48; } }
.pulse{ animation:pulse 4.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.32 } 45%{ opacity:1 } }
.drift{ animation:drift 26s linear infinite; }
@keyframes drift{ to{ transform:translateX(-400px); } }

.js .rv{ opacity:0; transform:translateY(14px); }
.rv{ transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.js .rv.in{ opacity:1; transform:none; }


/* == 18. Prosa-Seiten (page.php, the_content) ============================== */

.page-head{ margin-bottom:clamp(2.25rem,4vw,3.25rem); }
.page-head .mono{ display:block; margin-bottom:1rem; }
.page-head .h1{ font-size:clamp(2rem, 4.2vw, 3.4rem); }

.entry{
  font-size:0.97rem;
  line-height:1.68;
  color:var(--fg-mid);
  max-width:66ch;
}
.entry--wide{ max-width:none; }
.entry > * + *{ margin-top:1.05em; }
.entry h2,
.entry h3,
.entry h4{
  color:var(--fg);
  letter-spacing:-0.02em;
  line-height:1.2;
  margin-top:2.25em;
  position:relative;
}
.entry h2{ font-size:1.35rem; font-weight:600; padding-top:1.1rem; border-top:1px solid var(--line); }
.entry h2::before{
  content:""; position:absolute; top:-1px; left:0;
  width:26px; height:3px; background:var(--green);
  transform:skewX(var(--shear));
}
.entry h3{ font-size:1.125rem; font-weight:600; }
.entry h4{ font-size:1rem; font-weight:600; }
.entry h2 + *,
.entry h3 + *,
.entry h4 + *{ margin-top:.7em; }
.entry a{ color:var(--green-t); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.entry a:hover{ text-decoration-thickness:2px; }
.entry strong,.entry b{ color:var(--fg); font-weight:600; }
.entry ul,.entry ol{ padding-left:1.35em; }
.entry ul{ list-style:disc; }
.entry ol{ list-style:decimal; }
.entry li{ margin-top:.4em; }
.entry li::marker{ color:var(--green-t); }
.entry blockquote{
  border-left:2px solid var(--green);
  padding-left:1.25em;
  color:var(--fg);
}
.entry hr{ border:0; border-top:1px solid var(--line); margin-block:2.25em; }
.entry code,.entry kbd,.entry samp{ font-family:var(--mono); font-size:0.875em; background:var(--g1); padding:.15em .4em; border-radius:3px; }
.entry pre{ font-family:var(--mono); font-size:0.8125rem; background:var(--g1); padding:1.15rem; overflow-x:auto; border-radius:6px; border:1px solid var(--line); }
.entry pre code{ background:none; padding:0; }
.entry table{
  width:100%; border-collapse:collapse;
  font-size:0.9375rem;
  display:block; overflow-x:auto;
}
.entry th,.entry td{ text-align:left; padding:.7rem .9rem .7rem 0; border-bottom:1px solid var(--line); vertical-align:top; }
.entry th{ color:var(--fg); font-weight:600; }
.entry img{ height:auto; }
.entry address{ font-style:normal; }
.page-back{ margin-top:clamp(2.5rem,4vw,3.5rem); }


/* == 19. WordPress-Kernklassen ============================================= */

.alignleft{ float:left; margin:0 1.5rem 1rem 0; }
.alignright{ float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide,.alignfull{ max-width:none; }
.wp-caption{ max-width:100%; }
.wp-caption-text,.wp-element-caption{ font-size:0.8125rem; color:var(--fg-dim); margin-top:.6rem; }
.entry .wp-block-image{ margin-block:1.75em; }
.entry .wp-block-separator{ border:0; border-top:1px solid var(--line); }


/* == 20. WP Job Openings =================================================== */
/* Plugin-Dateien bleiben unberührt; nur überschreibbare Regeln, damit die
   Stellenliste in der dunklen Panel-/Hairline-Optik erscheint. */

.awsm-job-listings,
.awsm-job-container{ max-width:none; }
.awsm-job-wrap{ margin:0; }

.awsm-jobs-filter-wrapper,
.awsm-filter-wrap{
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line);
  padding:1.15rem 0;
  margin-bottom:0;
}
.awsm-filter-item select,
.awsm-job-search-wrapper input[type="text"],
.awsm-job-search-wrapper input[type="search"]{
  font:inherit; font-size:0.9375rem; color:var(--fg);
  background:transparent;
  border:0; border-bottom:1px solid var(--line-2);
  border-radius:0;
  padding:8px 0;
  color-scheme:dark;
}
.awsm-filter-item select:focus,
.awsm-job-search-wrapper input:focus{ outline:none; border-bottom-color:var(--green-t); }
/* Mobiler Filter-Umschalter des Plugins: Icon liefert ein fast schwarzes
   Inline-Fill — auf dunklem Grund unsichtbar. */
.awsm-filter-toggle{ color:var(--fg); }
.awsm-filter-toggle svg path{ fill:var(--fg); }

.awsm-grid-item,
.awsm-list-item{
  border:0;
  border-bottom:1px solid var(--line);
  background:none;
  box-shadow:none;
  padding:0;
  margin:0;
  list-style:none;
}
.awsm-job-item,
.awsm-job-listing-item{
  display:block;
  position:relative;
  padding:clamp(1.25rem,2.2vw,1.75rem) 0;
  border:0;
  background:none;
  box-shadow:none;
  text-decoration:none;
  color:inherit;
}
.awsm-job-item::before{
  content:""; position:absolute; top:0; left:0;
  width:0; height:2px; background:var(--green);
  transform:skewX(var(--shear));
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.awsm-job-item:hover::before,
.awsm-job-item:focus-visible::before{ width:64px; }
.awsm-job-post-title,
h2.awsm-job-post-title{
  font-family:var(--sans);
  font-size:1.15rem; font-weight:600; letter-spacing:-0.014em;
  color:var(--fg);
  margin:0 0 .6rem;
  line-height:1.25;
}
.awsm-job-item:hover .awsm-job-post-title{ color:var(--green-t); }
.awsm-job-specification-wrapper{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.awsm-job-specification-item{
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--fg-dim);
  display:inline-flex; align-items:center; gap:7px;
}
.awsm-job-specification-item .awsm-job-icon{ color:var(--green-t); }
.awsm-job-more{ margin-top:.75rem; }
.awsm-job-more a,
.awsm-job-more span{ font-size:0.875rem; color:var(--green-t); }

.is-jobs .awsm-job-main > .awsm-job-container{
  width:100%; max-width:var(--wrap);
  margin-inline:auto;
  padding:clamp(3rem,6vw,5.5rem) clamp(20px,4.5vw,56px) clamp(4rem,7vw,6.5rem);
}
.is-jobs .awsm-jobs-single-title{
  max-width:24ch;
  margin:0 0 clamp(1.75rem,3vw,2.75rem);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(2rem,4.1vw,3.65rem);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.025em;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
.is-jobs .awsm-job-single-wrap{
  display:grid;
  gap:clamp(3rem,5vw,5.5rem);
  margin:0;
  color:var(--fg-mid);
}
.is-jobs .awsm-job-single-wrap.awsm-col-2 > .awsm-job-content,
.is-jobs .awsm-job-single-wrap.awsm-col-2 > .awsm-job-form{
  float:none;
  width:auto;
  min-width:0;
  padding:0;
}
@media (min-width:1000px){
  .is-jobs .awsm-job-single-wrap{
    grid-template-columns:minmax(0,1.36fr) minmax(340px,.84fr);
    align-items:start;
  }
}
.is-jobs .awsm-job-specifications-container{ margin:0 0 clamp(2rem,3.5vw,3rem); }
.is-jobs .awsm-job-specification-wrapper{ gap:8px 24px; }
.is-jobs .awsm-job-specification-label strong{ font-weight:600; }
.is-jobs .awsm-job-single-wrap h1,
.is-jobs .awsm-job-single-wrap h2,
.is-jobs .awsm-job-single-wrap h3{ color:var(--fg); letter-spacing:-0.02em; }
.is-jobs .awsm-job-entry-content{
  max-width:70ch;
  font-size:1rem;
  line-height:1.68;
  overflow-wrap:break-word;
}
.is-jobs .awsm-job-entry-content h2{
  margin:0 0 .75rem;
  color:var(--fg);
  font-size:clamp(1.35rem,2vw,1.7rem);
  line-height:1.2;
}
.is-jobs .awsm-job-entry-content p{ margin:0 0 1rem; }
.is-jobs .awsm-job-entry-content ul,
.is-jobs .awsm-job-entry-content ol{
  display:grid;
  gap:.5rem;
  margin:0;
  padding-inline-start:1.25rem;
}
.is-jobs .awsm-job-entry-content ul{ list-style:disc; }
.is-jobs .awsm-job-entry-content ol{ list-style:decimal; }
.is-jobs .awsm-job-entry-content li{ padding-inline-start:.2rem; }
.is-jobs .awsm-job-entry-content li::marker{ color:var(--green-t); }
.is-jobs .awsm-job-entry-content hr{
  height:0;
  margin:clamp(2rem,3.5vw,3rem) 0 clamp(1.35rem,2.5vw,2rem);
  border:0;
  border-top:1px solid var(--line-2);
}
.is-jobs .awsm-job-entry-content strong{ color:var(--fg); font-weight:600; }

.is-jobs .awsm-job-form-inner{
  margin:0;
  padding:clamp(1.4rem,2.5vw,2rem);
  background:var(--g1);
  border:1px solid var(--line-2);
  border-radius:14px;
}
@media (min-width:1000px){
  .is-jobs .awsm-job-form-inner{
    position:sticky;
    top:calc(var(--head-h) + 24px);
  }
}
.is-jobs .awsm-job-form-inner > h2{
  margin:0 0 1.4rem;
  color:var(--fg);
  font-size:clamp(1.3rem,2vw,1.65rem);
  line-height:1.2;
}
.is-jobs .awsm-application-form{
  margin:0;
  padding:0;
  border:0;
}
.is-jobs .awsm-job-form-group{
  margin:0;
  padding:1rem 0;
  border-top:1px solid var(--line);
}
.is-jobs .awsm-job-form-group:first-child{ border-top:1px solid var(--line-2); }
.is-jobs .awsm-job-form-group label{
  display:block;
  margin:0 0 .5rem;
  color:var(--fg-dim);
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.45;
  letter-spacing:0.14em;
  text-transform:uppercase;
}
.is-jobs .awsm-job-form-plugin-style .awsm-job-form-control{
  display:block;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  color:var(--fg);
  background:var(--g0);
  border:1px solid var(--line-2);
  border-radius:6px;
  font:inherit;
  font-size:1rem;
  line-height:1.4;
  color-scheme:dark;
}
.is-jobs .awsm-job-form-plugin-style textarea.awsm-job-form-control{
  min-height:140px;
  resize:vertical;
}
.is-jobs .awsm-job-form-plugin-style .awsm-job-form-control:focus{
  outline:2px solid var(--green-t);
  outline-offset:2px;
  border-color:var(--green-t);
}
.is-jobs .awsm-job-form-group input[type="file"]{
  font-size:.875rem;
  color:var(--fg-mid);
}
.is-jobs .awsm-job-form-group input[type="file"]::file-selector-button{
  margin-inline-end:.75rem;
  padding:.45rem .7rem;
  color:var(--fg);
  background:var(--g2);
  border:1px solid var(--line-2);
  border-radius:4px;
  font:inherit;
  cursor:pointer;
}
.is-jobs .awsm-job-form-group small{
  display:block;
  margin-top:.5rem;
  color:var(--fg-dim);
  font-size:.75rem;
  line-height:1.5;
}
.is-jobs .awsm-job-inline-group{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.75rem;
  align-items:start;
}
.is-jobs .awsm-job-inline-group input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:.15rem 0 0;
  accent-color:var(--green);
}
.is-jobs .awsm-job-inline-group label{
  margin:0;
  color:var(--fg-mid);
  font-family:var(--sans);
  font-size:.8125rem;
  line-height:1.55;
  letter-spacing:0;
  text-transform:none;
}
.is-jobs .awsm-job-form-error{ color:#ff8585; }
.is-jobs .awsm-application-message{
  margin-top:1rem;
  padding:1rem;
  color:var(--fg);
  background:var(--g2);
  border:1px solid var(--line-2);
  border-radius:6px;
}
.awsm-job-form .awsm-submit-btn,
.awsm-jobs-primary-color,
.awsm-load-more-btn,
.awsm-job-form-group input[type="submit"]{
  display:inline-flex; align-items:center; gap:11px;
  background:var(--green); color:#fff;
  font:inherit; font-size:0.9375rem; font-weight:600;
  padding:15px 26px; border:0; border-radius:6px; cursor:pointer;
  transition:background .22s, transform .12s;
}
.awsm-job-form .awsm-submit-btn:hover,
.awsm-load-more-btn:hover,
.awsm-job-form-group input[type="submit"]:hover{ background:var(--green-deep); }
.is-jobs .awsm-job-form-group input[type="submit"]:disabled{
  cursor:not-allowed;
  opacity:.55;
}
@media (max-width:560px){
  .is-jobs .awsm-job-form-group input[type="submit"]{
    width:100%;
    justify-content:center;
  }
}
.awsm-jobs-none-listing-found,
.awsm-no-job-found{ color:var(--fg-mid); padding:1.5rem 0; }
.awsm-b-lft-none{ border-left:0; }


/* == 21. Consent-Layer ===================================================== */

.consent{
  position:fixed; inset:auto 0 0 0; z-index:120;
  background:var(--g1);
  border-top:1px solid var(--line-2);
  box-shadow:0 -12px 32px rgba(0,0,0,.4);
}
.consent[hidden]{ display:none; }
.consent__inner{ padding-block:clamp(1.5rem,3vw,2.25rem); }
.consent__grid{ display:grid; gap:clamp(1.25rem,2.5vw,2.5rem); align-items:start; }
@media (min-width:900px){ .consent__grid{ grid-template-columns:minmax(0,1fr) auto; } }
.consent__head{ display:flex; align-items:center; gap:12px; margin-bottom:.9rem; }
.consent h2{ font-size:1.0625rem; font-weight:600; letter-spacing:-0.015em; }
.consent p{ font-size:0.875rem; line-height:1.6; color:var(--fg-mid); max-width:62ch; }
.consent__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.consent__link{
  font-size:0.875rem; color:var(--fg-mid);
  background:none; border:0; padding:0;
  border-bottom:1px solid var(--line-2); cursor:pointer; font:inherit;
}
.consent__link:hover{ color:var(--green-t); border-bottom-color:var(--green); }
.consent__panel{ margin-top:1.5rem; border-top:1px solid var(--line); }
.consent__panel[hidden]{ display:none; }
.consent__cat{
  border-bottom:1px solid var(--line);
  padding:1rem 0;
  display:grid; gap:.35rem;
}
.consent__cat label{
  display:flex; align-items:center; gap:11px;
  font-size:0.9375rem; font-weight:600; color:var(--fg); cursor:pointer;
}
.consent__cat input[type="checkbox"]{ accent-color:var(--green); width:18px; height:18px; }
.consent__cat input[disabled]{ cursor:not-allowed; }
.consent__cat p{ font-size:0.8125rem; color:var(--fg-dim); padding-left:29px; }
.consent__panel .consent__actions{ margin-top:1.25rem; }


/* == 22. 404 =============================================================== */

.error404__code{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em;
  color:var(--green-t); font-weight:600;
  display:block; margin-bottom:1rem;
}
.error404__links{ display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:2rem; }


/* == 23. Admin-Bar & Reduced Motion ======================================== */

body.admin-bar .site-head{ top:32px; }
@media screen and (max-width:782px){
  body.admin-bar .site-head{ top:46px; }
}

@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .flow{ stroke-dasharray:none; }
}


/* == 24. Unterseiten — Seitenkopf & Abschluss-CTA ========================== */

.pagehero .col{ padding-top:clamp(2.75rem, 5vw, 4.75rem); padding-bottom:clamp(2.5rem,5vw,4.5rem); }
.pagehero .h1{
  font-size:clamp(2rem, 3.8vw, 3.2rem);
  margin-bottom:clamp(1.5rem, 2.6vw, 2.25rem);
  max-width:22ch;
}
.pagehero .lede{ max-width:56ch; }
.pagehero .lede + .prose{ margin-top:1.25rem; }
.pagehero .hero__links{ margin-top:clamp(1.75rem, 3vw, 2.5rem); }

.deep{ margin-top:-0.35rem; }
.closing{ margin-top:clamp(2rem, 3.4vw, 3rem); }

.sec--cta{ background:var(--g1); border-top:1px solid var(--line); }
.sec--cta .col{ padding-block:clamp(3.5rem,6vw,5.5rem); }
.cta{ display:grid; gap:clamp(1.75rem, 3vw, 3rem); align-items:end; }
@media (min-width:900px){ .cta{ grid-template-columns:minmax(0,1fr) auto; } }
.cta .mono{ display:block; margin-bottom:1rem; }
.cta .h2{ margin-bottom:1.1rem; max-width:18ch; }
.cta .lede{ max-width:46ch; }
.cta__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; }


/* == 25. Unterseiten — Erzählte Meilensteine & Prinzipien ================== */

.story{ display:grid; gap:0; margin-top:clamp(2.5rem, 4vw, 3.75rem); border-top:1px solid var(--line); }
.story__item{
  border-bottom:1px solid var(--line-soft);
  padding:clamp(1.3rem, 2.2vw, 1.8rem) 0;
  position:relative;
  display:grid; gap:.6rem;
  align-items:start;
}
.story__item::before{
  content:""; position:absolute; top:-1px; left:0;
  width:34px; height:3px; background:var(--green);
  transform:skewX(var(--shear));
}
.story__item--now::before{ width:72px; }
@media (min-width:760px){
  .story__item{ grid-template-columns:minmax(7rem, 9rem) minmax(0, 1fr); gap:clamp(24px, 3vw, 48px); }
}
.story__year{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
  color:var(--fg-dim); font-weight:600;
  display:block; padding-top:.3rem;
}
.story__item--now .story__year{ color:var(--green-t); }
.story__body h3{
  font-size:1.1rem; font-weight:600; letter-spacing:-0.012em;
  margin-bottom:.5rem;
}
.story__body p{ font-size:0.94rem; line-height:1.6; color:var(--fg-mid); max-width:62ch; }

.principles{ display:grid; gap:0; border-top:1px solid var(--line); }
.principle{
  border-bottom:1px solid var(--line-soft);
  padding:clamp(1.25rem, 2.2vw, 1.7rem) 0;
  position:relative;
  display:grid; gap:.6rem;
  align-items:start;
}
.principle::before{
  content:""; position:absolute; top:-1px; left:0;
  width:26px; height:3px; background:var(--green);
  transform:skewX(var(--shear));
}
@media (min-width:640px){
  .principle{ grid-template-columns:3.25rem minmax(0, 1fr); gap:clamp(18px, 2.4vw, 34px); }
}
.principle__num{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
  color:var(--fg-dim); font-weight:600;
  display:block; padding-top:.25rem;
}
.principle h3{
  font-size:1.05rem; font-weight:600; letter-spacing:-0.014em;
  margin-bottom:.5rem;
}
.principle p{ font-size:0.92rem; line-height:1.6; color:var(--fg-mid); max-width:56ch; }


/* == 26. Unterseiten — Bereiche, Spannungsfeld, Kreislauf ================== */

.pillars{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
@media (min-width:860px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{
  background:var(--g1);
  padding:clamp(1.6rem, 2.6vw, 2.2rem);
  position:relative;
  transition:background .25s;
}
.pillar:hover,
.pillar:focus-within{ background:var(--g2); }
.pillar::before{
  content:""; position:absolute; top:0; left:0;
  width:0; height:2px; background:var(--green);
  transform:skewX(var(--shear));
  transition:width .4s cubic-bezier(.2,.7,.3,1);
}
.pillar:hover::before,
.pillar:focus-within::before{ width:64px; }
.pillar__tag{
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--fg-dim);
  display:block; margin-bottom:1rem;
}
.pillar h3{
  font-size:1.15rem; font-weight:600; letter-spacing:-0.014em;
  margin-bottom:.6rem;
}
.pillar p{ font-size:0.94rem; line-height:1.62; color:var(--fg-mid); max-width:46ch; }
.pillar .brands{ margin-top:1.35rem; max-width:38rem; }
/* Ungerade Kachelzahl: die letzte Kachel füllt die Reihe, statt eine leere
   Zelle im Raster zu hinterlassen. */
@media (min-width:860px){
  .pillar:last-child:nth-child(odd){ grid-column:1 / -1; }
  .eco:last-child:nth-child(odd){ grid-column:1 / -1; }
}

.tension{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
@media (min-width:860px){ .tension{ grid-template-columns:1fr 1fr; } }
.tension__side{
  background:var(--g1);
  padding:clamp(1.6rem, 2.6vw, 2.2rem);
  position:relative;
}
.tension__side::before{
  content:""; position:absolute; top:0; left:0;
  width:34px; height:3px; background:var(--line-2);
  transform:skewX(var(--shear));
}
.tension__side--now::before{ background:var(--green); width:64px; }
.tension__side .mono{ display:block; margin-bottom:1rem; }
.tension__side h3{
  font-size:1.15rem; font-weight:600; letter-spacing:-0.014em;
  margin-bottom:.6rem; text-wrap:balance;
}
.tension__side p{ font-size:0.94rem; line-height:1.62; color:var(--fg-mid); max-width:46ch; }

.cycle__layout{ display:grid; gap:clamp(2.5rem, 4vw, 4rem); align-items:start; }
@media (min-width:960px){ .cycle__layout{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); } }


/* == 27. Unterseiten — Duo-Layout mit Panel-Kacheln ======================== */
/* Zweispaltige Prinzip-Sektionen der Technologie-Seite: Text links,
   Panel-Kachel rechts, im Wechsel gespiegelt. */

.duo{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (min-width:980px){
  .duo{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr); }
  .duo--flip > .viz{ order:-1; }
}
.sec--tight .col{ padding-block:clamp(2.75rem,5vw,4.5rem); }
.duo .sec-head{ margin-bottom:clamp(1rem,2vw,1.5rem); }
.viz .panel__head{ padding:13px 20px; }
.viz .panel__body{ padding:22px 20px; }
.viz svg{ display:block; width:100%; height:auto; }
.kv{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--line-soft);
  padding:12px 0; gap:14px;
}
.kv:first-child{ border-top:0; padding-top:0; }
.kv__k{
  font-family:var(--mono); font-size:10px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--fg-dim);
}
.kv__v{ font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums; }
.kv__v--g{ color:var(--green-t); }


/* == 28. Unterseiten — Karriere & Jobs-Embed =============================== */

.career2__layout{ display:grid; gap:clamp(2.5rem, 4vw, 4rem); align-items:start; }
@media (min-width:1100px){ .career2__layout{ grid-template-columns:minmax(0,1fr) minmax(0,.62fr); } }

.jobs-embed{ margin-top:clamp(.5rem, 1.5vw, 1rem); }
.jobs-embed .awsm-job-wrap{ margin:0; }
.jobs-embed .awsm-job-listings{ display:block; margin:0; }
.jobs-embed .awsm-grid-item{
  width:auto; max-width:none; float:none;
  margin:0; padding:0 !important;
  border:0; border-bottom:1px solid var(--line);
  box-shadow:none; background:none;
}
.jobs-embed .awsm-job-item{
  border:0; box-shadow:none; background:none;
  margin-bottom:0;
  display:grid; gap:.55rem clamp(24px, 3vw, 40px);
  align-items:baseline;
}
.jobs-embed .awsm-job-info{ min-height:0; margin-bottom:0; }
@media (min-width:760px){
  .jobs-embed .awsm-job-item{
    grid-template-columns:minmax(0,1fr) minmax(22rem,36%);
  }
}
.jobs-embed .awsm-grid-left-col,
.jobs-embed .awsm-grid-right-col{ width:auto; min-width:0; float:none; padding:0; }
.jobs-embed .awsm-job-post-title{ margin-bottom:0; }
.jobs-embed .awsm-job-more-container{ margin-top:.6rem; }
.jobs-embed .awsm-selectric{
  border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  background:transparent; box-shadow:none;
}
.jobs-embed .awsm-selectric .label{
  font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--fg-mid);
  margin:0 30px 0 0; height:38px; line-height:38px;
}
.jobs-embed .awsm-selectric .awsm-selectric-arrow-drop{ width:24px; }
.jobs-embed .awsm-selectric .awsm-selectric-arrow-drop:after{ border-top-color:var(--fg-dim); }
.jobs-embed .awsm-selectric-focus .awsm-selectric,
.jobs-embed .awsm-selectric-hover .awsm-selectric,
.jobs-embed .awsm-selectric-open .awsm-selectric{ border-bottom-color:var(--green-t); }
.jobs-embed .awsm-selectric-items{
  background:var(--g1);
  border:1px solid var(--line-2); border-radius:6px;
  box-shadow:0 10px 28px rgba(0,0,0,.5);
}
.jobs-embed .awsm-selectric-items li{
  font-family:var(--sans); font-size:0.875rem; color:var(--fg-mid);
}
.jobs-embed .awsm-selectric-items li.selected,
.jobs-embed .awsm-selectric-items li.highlighted,
.jobs-embed .awsm-selectric-items li:hover{ background:var(--g2); color:var(--fg); }
.jobs-embed .awsm-filter-item select:focus,
.jobs-embed .awsm-job-search-wrapper input:focus{ outline:none; border-bottom-color:var(--green-t); }
.jobs-embed__more{ margin-top:clamp(1.5rem, 2.6vw, 2.25rem); }


/* == 29. Förderung (/foerderung/, EFRE/JTF-Publizität) ===================== */
/* Die Logo-Kombination bleibt laut Leitfaden Kommunikation EFRE/JTF NRW
   unverändert auf weißer Fläche — auch in der dunklen Welt. */

.funding .h1{ max-width:22ch; overflow-wrap:break-word; hyphens:auto; }
.funding__logo{
  background:#fff; border:1px solid var(--line);
  border-radius:10px;
  padding:2rem 2rem 1.5rem; margin:2.5rem 0 3.5rem;
}
.funding__logo img{ display:block; width:100%; max-width:34rem; height:auto; }
.funding__logo .meta{ margin-top:1.25rem; max-width:60ch; color:#5A625C; }
.funding h2.h2{
  margin-top:3rem;
  padding-top:1.15rem;
  border-top:1px solid var(--line);
  position:relative;
}
.funding h2.h2::before{
  content:""; position:absolute; top:-1px; left:0;
  width:26px; height:3px; background:var(--green);
  transform:skewX(var(--shear));
}
.funding h2.h2 + *{ margin-top:.8rem; }
.funding__quote{
  border-left:2px solid var(--green); padding:0.35rem 0 0.35rem 1.35rem;
  margin:1.8rem 0;
}
.funding__quote p{ font-size:1.04rem; line-height:1.65; color:var(--fg); }
.funding__quote cite{
  display:block; margin-top:0.8rem; font-style:normal;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--fg-dim);
}
.funding__photo{ margin:2.5rem 0; }
.funding__photo img{
  display:block; max-width:min(34rem, 100%); height:auto;
  border:1px solid var(--line); border-radius:8px;
}
.funding__photo .meta{ margin-top:0.75rem; max-width:52ch; }