/* ==========================================================================
   RhönBlech – Hauptstylesheet
   Farben aus dem Firmenauftritt: Magenta #EC008C (Logo, aus der Vektordatei),
   #E5007D als Bedienfarbe, weil sie weiße Schrift mit 4,5:1 trägt,
   Anthrazit #22252A für Typografie und dunkle Flächen.
   Schrift: IBM Plex Sans und IBM Plex Mono, selbst ausgeliefert.
   Zwei Modi: hell (Standard) und dunkel. Der Besucher schaltet um,
   Voreinstellung folgt der Systemeinstellung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften – IBM Plex, selbst ausgeliefert
   Liegt im Theme unter assets/fonts/, keine Verbindung zu Google oder einem
   anderen Anbieter. Plex wurde für ein Technologieunternehmen gezeichnet und
   bringt eine schmale Mono-Schwester mit: passend für ein Haus, in dem Maße
   und Kennwerte die halbe Seite ausmachen.
   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/LICENSE-IBM-Plex.txt
   -------------------------------------------------------------------------- */

@font-face{
  font-family:"Plex Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plex-sans-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/plex-sans-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/plex-sans-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plex-mono-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/plex-mono-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Plex Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/plex-mono-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --bg:#FFFFFF;
  --surface:#F3F3F5;
  --surface-2:#EAEAEC;
  --deep:#22252A;
  --ink:#22252A;
  --soft:#5C6167;
  --line:#DCDDE0;
  --accent:#E5007D;
  --accent-tx:#B00060;
  --on-accent:#FFFFFF;
  --on-deep:#F2F3F4;
  --on-deep-soft:#A6ACB3;
  --focus:#B00060;
  /* Aus der Original-Vektordatei des Logos entnommen. --marke ist die
     Zeichenfarbe der Wortmarke, --accent bleibt die Bedienfarbe, weil
     sie weiße Schrift mit ausreichendem Kontrast tragen muss. */
  --marke:#EC008C;
  --logo-schrift:#656263;

  --wrap:1120px;
  --gutter:clamp(20px,4vw,34px);
  --mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --step--1:clamp(13px,.82rem + .1vw,13.5px);
  --step-0:clamp(15.5px,.95rem + .12vw,16.5px);
  --step-1:clamp(18px,1.05rem + .3vw,20px);
  --step-2:clamp(22px,1.2rem + .8vw,27px);
  --step-3:clamp(27px,1.4rem + 1.5vw,36px);
  --step-4:clamp(32px,1.6rem + 2.6vw,50px);
}

@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){
    --bg:#16181B;
    --surface:#1E2126;
    --surface-2:#242830;
    --deep:#0F1113;
    --ink:#F2F3F4;
    --soft:#A6ACB3;
    --line:#2E3238;
    --accent:#FF2E97;
    --accent-tx:#FF7ABC;
    --on-accent:#16181B;
    --focus:#FF7ABC;
    --marke:#FF2E97;
    --logo-schrift:#C9CCD1;
  }
}
:root[data-mode="dark"]{
  --bg:#16181B;
  --surface:#1E2126;
  --surface-2:#242830;
  --deep:#0F1113;
  --ink:#F2F3F4;
  --soft:#A6ACB3;
  --line:#2E3238;
  --accent:#FF2E97;
  --accent-tx:#FF7ABC;
  --on-accent:#16181B;
  --focus:#FF7ABC;
  --marke:#FF2E97;
  --logo-schrift:#C9CCD1;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent-tx)}
a:where(:not(.btn)):hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.12;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2);font-weight:700}
h4{font-size:var(--step-1);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.35em}
li::marker{color:var(--accent-tx)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.stack>*+*{margin-top:var(--gap,24px)}
.prose{max-width:68ch}

/* Inhalte aus dem Editor: Fließtext auf Lesebreite, gestaltete Bausteine
   bleiben volle Breite. Ersetzt den früheren .prose-Wrapper im Template. */
.page-body>.wrap>p,
.page-body>.wrap>h2,
.page-body>.wrap>h3,
.page-body>.wrap>ul,
.page-body>.wrap>ol,
.page-body>.wrap>blockquote,
.page-body>.wrap>.wp-block-buttons{max-width:68ch}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:10px;z-index:200;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--accent-tx);
  font-weight:600;
  margin:0 0 14px;
  display:block;
}

/* --- „Bitte prüfen“-Markierung ------------------------------------------ */
.tbd{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border-bottom:2px dotted var(--accent);
  padding:0 2px;
  cursor:help;
}
.tbd::after{
  content:"zu prüfen";
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-accent);
  background:var(--accent);
  padding:1px 5px;
  border-radius:2px;
  margin-left:6px;
  white-space:nowrap;
  vertical-align:2px;
}
.tbd-hinweis{
  background:var(--surface);
  border-left:4px solid var(--accent);
  padding:14px 18px;
  font-size:var(--step--1);
  color:var(--soft);
  margin:0;
}
.tbd-hinweis b{color:var(--ink)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-block;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:700;
  font-size:var(--step-0);
  padding:14px 26px;
  border-radius:2px;
  text-decoration:none;
  border:1px solid var(--accent);
  transition:opacity .15s ease;
}
.btn:hover{opacity:.88}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent);opacity:1}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* --- Kopfbereich --------------------------------------------------------- */
.topbar{background:var(--deep);color:var(--on-deep-soft);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.topbar .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:8px 16px;padding-block:8px;
}
.topbar-kontakt{
  grid-column:2;display:flex;flex-wrap:wrap;justify-content:center;
  gap:4px 22px;text-align:center;
}
.topbar a{color:var(--on-deep);text-decoration:none}
.topbar a:hover{text-decoration:underline}

.site-head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:60}
.site-head .wrap{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);padding-block:12px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand img{width:auto;height:clamp(38px,3.6vw,52px);max-width:210px;object-fit:contain}
.brand-txt{font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.brand-txt span{color:var(--accent)}
.brand-txt small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:4px}

.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:clamp(12px,1.5vw,22px);list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.main-nav li{margin:0}
.main-nav a{
  color:var(--soft);text-decoration:none;font-weight:600;
  font-size:clamp(13.5px,.92vw,15px);white-space:nowrap;
  padding-block:4px;border-bottom:2px solid transparent;display:block;
}
.main-nav a:hover{color:var(--ink)}
.main-nav .current-menu-item>a,.main-nav .current_page_parent>a{color:var(--ink);border-bottom-color:var(--accent)}

.head-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mode-toggle{
  background:transparent;border:1px solid var(--line);color:var(--ink);
  width:40px;height:40px;border-radius:2px;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.mode-toggle:hover{border-color:var(--accent)}
.mode-toggle svg{width:18px;height:18px;fill:currentColor}
.mode-toggle .ico-dark{display:none}
:root[data-mode="dark"] .mode-toggle .ico-dark{display:block}
:root[data-mode="dark"] .mode-toggle .ico-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]) .mode-toggle .ico-dark{display:block}
  :root:not([data-mode="light"]) .mode-toggle .ico-light{display:none}
}

.nav-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--ink);width:40px;height:40px;border-radius:2px;cursor:pointer;padding:0;place-items:center}
.nav-toggle svg{width:20px;height:20px;fill:currentColor}

/* Der Anfrage-Button verliert auf mittleren Breiten seinen Text nicht,
   wandert aber aus dem Kopf, sobald es eng wird. */
@media (max-width:1240px){
  .head-actions .btn{padding:12px 16px;font-size:14.5px}
}
@media (max-width:1150px){
  .head-actions .btn{display:none}
}

@media (max-width:1080px){
  .main-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 18px;margin:0;
  }
  .main-nav[hidden]{display:none}
  .main-nav ul{flex-direction:column;gap:0}
  .main-nav a{padding-block:12px;border-bottom:1px solid var(--line);font-size:16px}
  .nav-toggle{display:grid}
  .head-actions{margin-left:auto}
  .site-head .wrap{position:relative}
  .main-nav ul{flex-wrap:wrap}
  .main-nav a{font-size:16px;white-space:normal}
}

/* --- Startseite: Einstieg ------------------------------------------------ */
.hero{border-bottom:1px solid var(--line);background:var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,52px);padding-block:clamp(36px,5vw,60px);align-items:start}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lead{font-size:var(--step-1);color:var(--soft);margin-bottom:26px;max-width:44ch}

.spec{border:1px solid var(--line);background:var(--surface);border-radius:3px;overflow:hidden}
.spec-head{
  background:var(--deep);color:var(--on-deep);font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 18px;display:flex;justify-content:space-between;gap:10px;
}
.spec-head span:last-child{color:var(--on-deep-soft)}
.spec dl{margin:0;padding:2px 18px 12px}
.spec .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:11px;border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:none}
.spec dt{margin:0;font-size:14.5px;color:var(--soft)}
.spec dd{margin:0;font-family:var(--mono);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.spec dd i{font-style:normal;font-size:12px;color:var(--soft);margin-left:3px}

/* --- Bemaßungsband ------------------------------------------------------- */
.dimband{background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink)}
.dimband .wrap{padding-block:22px}
.dimband svg{display:block;width:100%;height:54px}
.dimband p{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);text-align:center;margin:8px 0 0;
}

/* --- Abschnitte ---------------------------------------------------------- */
.section{padding-block:clamp(42px,5.5vw,68px)}
.section--alt{background:var(--surface)}
.section--deep{background:var(--deep);color:var(--on-deep)}
.section--deep h2,.section--deep h3{color:var(--on-deep)}
.section--deep p{color:var(--on-deep-soft)}
.section-head{margin-bottom:clamp(24px,3vw,34px);max-width:62ch}
.section-head p{color:var(--soft);font-size:var(--step-1);margin:0}
.section--deep .section-head p{color:var(--on-deep-soft)}

/* --- Verfahrensraster ---------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.card{background:var(--bg);display:flex;flex-direction:column}
.card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.card figure img{width:100%;height:100%;object-fit:cover}
.card-body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:var(--step-1)}
.card p{margin:0;color:var(--soft);font-size:15px;flex:1}
.card .val{
  font-family:var(--mono);font-size:14.5px;font-weight:600;color:var(--ink);
  padding-top:12px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.card .val i{font-style:normal;color:var(--soft);font-size:12px}
.card a.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1}
.card a.card-link:hover h3{color:var(--accent-tx)}

/* Ganze Karte anklickbar: Der Link in der Überschrift trägt die
   Beschriftung, die Fläche darüber macht die Karte zum Ziel. */
.card{position:relative;transition:background .18s ease}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover{background:var(--surface)}
.card:hover h3 a{color:var(--accent-tx)}
.card:hover figure img{transform:scale(1.03)}
.card figure img{transition:transform .35s ease}
.card:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.card h3 a:focus-visible{outline:none}
.card-mehr{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-tx);margin-top:2px;
}
.card-mehr::after{content:" \2192";transition:margin-left .18s ease;display:inline-block}
.card:hover .card-mehr::after{margin-left:5px}
@media (prefers-reduced-motion:reduce){
  .card,.card figure img,.card-mehr::after{transition:none}
  .card:hover figure img{transform:none}
}

/* --- Material ------------------------------------------------------------ */
.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.mats>div{border-top:3px solid var(--accent);padding-top:16px}
.mats h3{font-size:var(--step-1);margin:0 0 8px}
.mats p{margin:0;color:var(--soft);font-size:15px}

/* --- Ablauf -------------------------------------------------------------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 22px}
.flow>div{position:relative;border-top:2px solid var(--line);padding-block:18px}

/* Der gefüllte Teil des Balkens liegt über der grauen Linie und wächst von
   links. Im Ruhezustand ist nur der erste Schritt gefüllt – das entspricht
   dem bisherigen Bild. */
.flow>div::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.flow>div:first-child::before{transform:scaleX(1)}

/* Beim Überfahren eines Schritts füllt sich der Balken bis dorthin.
   Die gestaffelte Verzögerung lässt ihn von links nach rechts laufen,
   statt alle Abschnitte gleichzeitig umzuschalten. Ohne Zeigegerät
   (Touch) greift nichts davon, dort bleibt der Ruhezustand. */
@media (hover:hover){
  .flow:has(>div:nth-child(2):hover)>div:nth-child(-n+2)::before,
  .flow:has(>div:nth-child(3):hover)>div:nth-child(-n+3)::before,
  .flow:has(>div:nth-child(4):hover)>div:nth-child(-n+4)::before,
  .flow:has(>div:nth-child(5):hover)>div:nth-child(-n+5)::before,
  .flow:has(>div:nth-child(6):hover)>div:nth-child(-n+6)::before{transform:scaleX(1)}

  .flow:has(>div:hover)>div:nth-child(2)::before{transition-delay:.07s}
  .flow:has(>div:hover)>div:nth-child(3)::before{transition-delay:.14s}
  .flow:has(>div:hover)>div:nth-child(4)::before{transition-delay:.21s}
  .flow:has(>div:hover)>div:nth-child(5)::before{transition-delay:.28s}
  .flow:has(>div:hover)>div:nth-child(6)::before{transition-delay:.35s}
}
.flow .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--accent-tx);display:block;margin-bottom:8px}
.flow h3{font-size:var(--step-0);margin:0 0 5px;font-weight:700}
.flow p{margin:0;font-size:14px;color:var(--soft)}

/* --- Bildstrecke --------------------------------------------------------- */
.shots{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:30px}
.shots img{width:100%;height:100%;object-fit:cover}
.shots figure{margin:0;overflow:hidden;background:var(--surface-2)}
.shots>figure{aspect-ratio:16/10}
@media (min-width:861px){
  .shots>figure{aspect-ratio:auto;height:100%}
}
.shots-col{display:grid;gap:16px}
.shots-col figure{aspect-ratio:16/9}

/* --- Abschluss ----------------------------------------------------------- */
.closing .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:38px;align-items:center;padding-block:clamp(36px,4.5vw,54px)}
.closing h2{margin-bottom:12px}
.contact-box{border:1px solid rgba(255,255,255,.18);padding:22px;border-radius:3px}
.contact-box .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-deep-soft);margin:0 0 10px}
.contact-box .v{font-family:var(--mono);font-size:19px;font-weight:600;margin:0 0 4px;color:var(--on-deep)}
.contact-box .v a{color:inherit;text-decoration:none}
.contact-box .v2{font-size:14px;color:var(--on-deep-soft);margin:0}

/* --- Fußbereich ---------------------------------------------------------- */
.site-foot{background:var(--surface);border-top:1px solid var(--line);padding-block:40px 0}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:34px}
.foot-grid h3{font-size:var(--step-0);margin:0 0 12px;letter-spacing:0}
.foot-grid p,.foot-grid li{color:var(--soft);font-size:14.5px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-contact dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-top:12px}
.foot-contact dd{margin:2px 0 0;font-size:15.5px}
.foot-contact dd a{color:var(--ink);text-decoration:none}
.foot-contact dd a:hover{color:var(--accent-tx)}
.foot-bottom{border-top:1px solid var(--line);margin-top:34px;padding-block:16px;font-size:13.5px;color:var(--soft)}
.foot-bottom .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-inline:0}
.foot-bottom ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.foot-bottom a{color:var(--soft);text-decoration:none}
.foot-bottom a:hover{color:var(--accent-tx)}
.region-note{margin-top:10px;font-size:13.5px;color:var(--soft);max-width:70ch}

/* --- Inhaltsseiten ------------------------------------------------------- */
.page-head{background:var(--surface);border-bottom:1px solid var(--line);padding-block:clamp(28px,3.5vw,44px)}
.page-head h1{margin:0}
.page-body{padding-block:clamp(32px,4vw,52px)}
.page-body img{margin-block:1.2em}
.page-body h2{margin-top:1.6em}
.page-body h3{margin-top:1.4em}
.page-body table{width:100%;border-collapse:collapse;font-size:15px;margin-block:1.2em}
.page-body th{background:var(--deep);color:var(--on-deep);text-align:left;padding:10px 12px;font-weight:600}
.page-body td{padding:10px 12px;border-bottom:1px solid var(--line)}
.page-body tr:nth-child(even) td{background:var(--surface)}

.tbl-scroll{overflow-x:auto}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .closing .wrap{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Unterseiten
   ========================================================================== */

/* --- Seitenkopf mit Kicker ------------------------------------------------ */
.page-head .kicker{margin-bottom:10px}
.page-head p{color:var(--soft);font-size:var(--step-1);margin:12px 0 0;max-width:62ch}

/* --- Leistungsübersicht --------------------------------------------------- */
.leistung-teaser{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.leistung-teaser>a{
  background:var(--bg);padding:26px 24px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:9px;transition:background .15s ease;
}
.leistung-teaser>a:hover{background:var(--surface)}
.leistung-teaser h2{font-size:var(--step-2);margin:0}
.leistung-teaser p{margin:0;color:var(--soft);font-size:15px;flex:1}
.leistung-teaser .val{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent-tx);font-variant-numeric:tabular-nums}
.leistung-teaser .mehr{font-size:14.5px;font-weight:700;color:var(--accent-tx)}

/* --- Datenblock auf Leistungsseiten -------------------------------------- */
.datenblock{border:1px solid var(--line);background:var(--surface);border-radius:3px;overflow:hidden;margin-block:26px}
.datenblock-head{
  background:var(--deep);color:var(--on-deep);font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;
}
.datenblock table{width:100%;border-collapse:collapse;margin:0}
.datenblock td{padding:11px 18px;border-bottom:1px solid var(--line);font-size:15px}
.datenblock tr:last-child td{border-bottom:none}
.datenblock td:last-child{
  text-align:right;font-family:var(--mono);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);
}
.datenblock tr:nth-child(even) td{background:transparent}

/* --- Maschinenliste ------------------------------------------------------- */
.maschine{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,38px);
  align-items:start;padding-block:clamp(28px,3.5vw,44px);border-top:1px solid var(--line);
}
.maschine:first-of-type{border-top:none;padding-top:0}
.maschine figure{margin:0;overflow:hidden;background:var(--surface-2);aspect-ratio:3/2}
.maschine figure img{width:100%;height:100%;object-fit:cover}
.maschine h2{font-size:var(--step-2);margin-bottom:6px}
.maschine .typ{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-tx);font-weight:600;display:block;margin-bottom:10px}
.maschine ul{margin:0 0 16px;padding-left:1.1em}
.maschine li{font-size:15px;color:var(--soft)}
.maschine .daten{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.maschine .daten div{background:var(--bg);padding:12px 14px}
.maschine .daten dt{font-size:12px;color:var(--soft);margin:0 0 3px}
.maschine .daten dd{margin:0;font-family:var(--mono);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:820px){.maschine{grid-template-columns:1fr}}

/* --- Kennzahlen ----------------------------------------------------------- */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-block:26px}
.kennzahlen div{background:var(--bg);padding:20px 18px}
.kennzahlen .z{font-size:var(--step-3);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.kennzahlen .b{font-size:13.5px;color:var(--soft);margin-top:6px;display:block}

/* --- FAQ ------------------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:18px 40px 18px 0;position:relative;list-style:none;
  font-weight:700;font-size:var(--step-1);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent-tx)}
.faq .antwort{padding:0 0 20px;color:var(--soft);max-width:68ch}
.faq .antwort p:last-child{margin-bottom:0}

/* --- Kontaktseite --------------------------------------------------------- */
.kontakt-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(26px,4vw,48px);align-items:start}
.kontakt-daten dt{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);margin-top:18px}
.kontakt-daten dt:first-child{margin-top:0}
.kontakt-daten dd{margin:4px 0 0;font-size:17px}
.kontakt-daten dd a{color:var(--ink);text-decoration:none}
.kontakt-daten dd a:hover{color:var(--accent-tx)}
.kontakt-form{background:var(--surface);border:1px solid var(--line);padding:clamp(20px,3vw,30px);border-radius:3px}
.kontakt-form label{display:block;font-weight:700;font-size:15px;margin-bottom:5px}
.kontakt-form input[type=text],.kontakt-form input[type=email],.kontakt-form input[type=tel],.kontakt-form textarea,.kontakt-form select{
  width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);
}
.kontakt-form input:focus,.kontakt-form textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent)}
.kontakt-form p{margin-bottom:16px}
.kontakt-form input[type=submit],.kontakt-form .wpcf7-submit{
  background:var(--accent);color:var(--on-accent);border:0;font-weight:700;font-size:16px;
  padding:14px 28px;border-radius:2px;cursor:pointer;width:auto;
}
.kontakt-form .wpcf7-not-valid-tip{color:#C0182B;font-size:14px}
.kontakt-form .wpcf7-response-output{border:1px solid var(--line);padding:12px 14px;margin:16px 0 0;font-size:15px}
@media (max-width:820px){.kontakt-grid{grid-template-columns:1fr}}

/* --- Downloads ------------------------------------------------------------ */
.downloads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-block:26px}
.download{
  border:1px solid var(--line);background:var(--bg);padding:20px;border-radius:3px;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
}
.download:hover{border-color:var(--accent)}
.download h3{font-size:var(--step-1);margin:0}
.download p{margin:0;font-size:14.5px;color:var(--soft);flex:1}
.download .meta{font-family:var(--mono);font-size:12px;color:var(--accent-tx);letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* --- Querverweise am Seitenende ------------------------------------------ */
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:12px}
.weiter a{
  border:1px solid var(--line);padding:16px 18px;text-decoration:none;color:inherit;
  border-radius:3px;font-weight:700;display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.weiter a:hover{border-color:var(--accent);color:var(--accent-tx)}
.weiter a span{color:var(--accent-tx)}

/* Das Logo liegt als eingebettetes SVG vor. Der Schriftzug nimmt
   --logo-schrift, das Zeichen die Marke – damit stimmt es in beiden
   Schemata, ohne weißen Träger darunter.
   Fällt die SVG-Datei aus, greift die Rasterfassung mit hellem Träger. */
.rb-logo-svg{
  display:block;width:auto;height:clamp(38px,3.6vw,52px);max-width:230px;
}
.rb-logo-schrift{fill:var(--logo-schrift);transition:fill .2s ease}
.rb-logo-akzent{fill:var(--marke);transition:fill .2s ease}
.brand:hover .rb-logo-schrift{fill:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .rb-logo-schrift,.rb-logo-akzent{transition:none}
}
:root[data-mode="dark"] .brand img{
  background:#fff;padding:6px 10px;border-radius:3px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]) .brand img{
    background:#fff;padding:6px 10px;border-radius:3px;
  }
}

/* ==========================================================================
   Stellenanzeigen
   Die Struktur kommt vom Job-Postings-Plugin – wir gestalten sie nur.
   Kein eigenes Template, damit JobPosting-Markup und Bewerbungsformular
   unangetastet bleiben.
   ========================================================================== */

/* --- Übersicht ------------------------------------------------------------
   Das Plugin setzt eigene Breiten, Tabellen-Layout und helle Flächen.
   Die werden hier durchgängig überschrieben, damit die Liste dem Theme
   folgt und im dunklen Modus lesbar bleibt.
   ------------------------------------------------------------------------ */

/* Der Filterblock des Plugins bleibt aus: Seine Auswahl kommt am Server
   nicht an, die Liste ändert sich dadurch nicht. An seiner Stelle steht
   .rb-jobfilter weiter unten. */
main .job-postings-filters{display:none !important}
main .job-listing-categories{display:flex;flex-wrap:wrap;gap:8px;float:none;width:auto}
main a.job-category{
  display:inline-block;padding:8px 15px;border:1px solid var(--line);border-radius:2px;
  text-decoration:none;color:var(--soft) !important;font-size:14.5px;font-weight:600;
  background:var(--bg) !important;line-height:1.3;
}
main a.job-category:hover{border-color:var(--accent);color:var(--accent-tx) !important}
main a.job-category.active,main a.job-category.current,main a.job-category.job-category-active{
  background:var(--accent) !important;border-color:var(--accent);color:var(--on-accent) !important;
}
main a.job-category .category{font-family:var(--mono);font-size:12px;opacity:.7;margin-left:5px}

main .jobs-search{margin-left:auto}
main .jobs-search form{display:flex;gap:8px;align-items:center;margin:0}
main .jobs-search input.job-search{
  font:inherit;font-size:15px;padding:9px 12px;min-width:210px;
  border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);
}
main .jobs-search .job-search-submit{
  background:var(--accent);color:var(--on-accent);border:0;border-radius:2px;
  padding:10px 16px;cursor:pointer;font-weight:700;font-size:14.5px;
}
main .jobs-search .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

main .job-listing{
  width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);float:none;
}
main .job-listing .column,
main .job-listing .row,
main .job-listing [class*="medium-"]{
  width:100% !important;max-width:none !important;padding:0 !important;
  margin:0 !important;float:none !important;display:block !important;
}

main article.job-preview{
  display:flex !important;
  width:100% !important;max-width:none !important;
  box-sizing:border-box;
  gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--bg) !important;
  border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:3px;padding:22px 24px;margin:0 0 12px !important;float:none !important;
}
main article.job-preview:hover{border-color:var(--accent)}
main article.job-preview>.job-content{
  display:block !important;flex:1 1 300px;min-width:0;width:auto !important;
  padding:0 !important;vertical-align:baseline;
}
main article.job-preview>.job-cta{
  display:block !important;flex:0 0 auto;width:auto !important;padding:0 !important;text-align:right;
}
/* Das Plugin gibt den Stellentitel als h5 aus und setzt darauf hart
   color:black – das muss im dunklen Schema überschrieben werden. */
main article.job-preview h2,main article.job-preview h3,
main article.job-preview h4,main article.job-preview h5,
main .job-listing .job-preview .job-content h5{
  font-size:var(--step-2);margin:0 0 6px;line-height:1.2;color:var(--ink) !important;
}
main article.job-preview h2 a,main article.job-preview h3 a,
main article.job-preview h4 a,main article.job-preview h5 a,
main .job-listing .job-preview .job-content h5 a,
main .job-listing .job-preview .job-content h5 span,
main article.job-preview a.job-title{
  color:var(--ink) !important;text-decoration:none !important;
}
main article.job-preview h2 a:hover,main article.job-preview h3 a:hover,
main article.job-preview h5 a:hover,
main .job-listing .job-preview .job-content h5 a:hover,
main .job-listing .job-preview .job-content h5 a:hover span{color:var(--accent-tx) !important}
main article.job-preview p{margin:0;color:var(--soft) !important;font-size:15px}
/* „Konstruktionsmechaniker/Schweißer" passt auf 420 px nicht in eine Zeile und
   bricht ohne Hilfe gar nicht – die Seite wird dadurch breiter als das Gerät. */
main article.job-preview h2,main article.job-preview h3,
main article.job-preview h4,main article.job-preview h5,
main .job-listing .job-preview .job-content h5,
main .job-post h1.jobs-row-input{overflow-wrap:break-word;hyphens:auto}
/* Sicherheitsnetz: alles im Kartentext erbt die Themefarben,
   damit kein Plugin-Update wieder schwarz auf schwarz erzeugt. */
main article.job-preview .job-content *{color:inherit}
main .job-additional-information{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--soft) !important;
  margin-top:8px;display:flex;gap:16px;flex-wrap:wrap;
}
main .job-cta a,main .job-cta .button,main .job-preview .button{
  display:inline-block;background:var(--accent) !important;color:var(--on-accent) !important;
  font-weight:700;font-size:15px;padding:13px 22px;border-radius:2px;
  text-decoration:none !important;border:0;white-space:nowrap;line-height:1.2;
}
main .job-cta a:hover{opacity:.88}

/* Das Plugin gibt den Einleitungstext ohne Rasterbezug aus. Er soll an
   derselben Kante beginnen wie Überschrift und Filter, die Zeilen aber
   trotzdem lesbar kurz bleiben. */
.jobs-intro{
  max-width:70ch;
  margin:0 0 24px max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  padding:0;
  font-size:var(--step-1);color:var(--soft);
}

@media (max-width:700px){
  h1,h2,h3,h4{overflow-wrap:break-word;hyphens:auto}
  main article.job-preview{align-items:flex-start}
  main article.job-preview>.job-cta{width:100% !important;text-align:left}
  main .job-cta a{display:block;text-align:center}
  main .jobs-search{margin-left:0;width:100%}
  main .jobs-search input.job-search{flex:1;min-width:0}
}

/* --- Einzelanzeige -------------------------------------------------------- */
.job-post{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,44px) var(--gutter)}
.job-post::after{content:"";display:table;clear:both}
.job-post>.job-content{float:left;width:62%;padding-right:clamp(20px,3vw,40px)}
.job-post>.job-side{float:right;width:38%}
@media (max-width:860px){
  .job-post>.job-content,.job-post>.job-side{float:none;width:100%;padding-right:0}
  .job-post>.job-side{margin-top:30px}
}

.job-post .jobs-row{margin-bottom:22px}
.job-post .jobs-row::after{content:"";display:table;clear:both}
.job-post h1.jobs-row-input{font-size:var(--step-3);margin:0 0 6px}
.job-post .jobs-row-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-tx);font-weight:600;margin-bottom:6px;
}
.job-post .jobs-row-input,.job-post .jobs-row-content{color:var(--ink)}
.job-post .jobs-row-input ul,.job-post .jobs-row-content ul{padding-left:1.15em}
.job-post .jobs-row-input li,.job-post .jobs-row-content li{color:var(--soft)}
.job-post .jobs-row-input p,.job-post .jobs-row-content p{color:var(--soft)}

.job-post .job-side{}
.job-post .job-side .job-content-wrap{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:24px;position:sticky;top:96px;
}
.job-post .job-side .jobs-row{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.job-post .job-side .jobs-row:last-of-type{border-bottom:none}
.job-post .job-side .jobs-row-input{font-weight:700;font-size:16px}
.job-post .jobs_hiring_logo img{max-width:170px;margin-bottom:8px}

.jobs-row-apply{margin-top:8px}
.jobs-row-apply .button,button.jp-apply-button{
  display:block;width:100%;text-align:center;
  background:var(--accent);color:var(--on-accent);border:0;
  font-weight:700;font-size:16.5px;padding:15px 20px;border-radius:2px;cursor:pointer;
  font-family:inherit;
}
.jobs-row-apply .button:hover,button.jp-apply-button:hover{opacity:.88}

.job-pdf-export a{
  display:inline-block;margin-top:12px;font-size:14.5px;font-weight:600;
  color:var(--accent-tx);text-decoration:none;
}
.job-pdf-export a:hover{text-decoration:underline}

/* Das Plugin schreibt global svg{fill:#ffffff} in den Kopf – im hellen
   Schema ist das Symbol damit weiß auf weiß. currentColor koppelt es an
   die Textfarbe und stimmt dadurch in beiden Schemata. */
main .job-post svg,
main .job-side svg,
main .jobs-row-input svg,
main .jobs-row-content svg,
main a.job-pdf-export svg,
main .job-pdf-export a svg,
main .jobs-modal svg{
  fill:currentColor !important;
}
main a.job-pdf-export,
main .job-pdf-export a{color:var(--accent-tx) !important}
main a.job-pdf-export svg,
main .job-pdf-export a svg{vertical-align:-3px;margin-right:6px}

/* Teilen-Leiste dezenter */
.job-post ~ .job-content-wrap .shariff,.shariff.shariff-align-center{
  max-width:var(--wrap);margin:0 auto 34px;padding-inline:var(--gutter);
}

/* --- Bewerbungsformular im Überlagerungsfenster --------------------------- */
.jobs-modal{z-index:1000}
/* Das Plugin setzt Tabelle und Inhalt hart auf Weiß. Ohne diese
   Überschreibung steht im dunklen Schema helle Schrift auf Weiß. */
.jobs-modal .jobs-modal-table,
.jobs-modal .jobs-modal-content,
.jobs-modal .jobs-modal-form{background:var(--bg) !important;color:var(--ink) !important}
.jobs-modal .modal-title,
.jobs-modal .input-label,
.jobs-modal .checkbox-text,
.jobs-modal .input-paragraph,
.jobs-modal .jobs-modal-content p,
.jobs-modal .jobs-modal-content span,
.jobs-modal .jobs-modal-content div{color:var(--ink)}
.jobs-modal .input-paragraph,
.jobs-modal .jobs-modal-content small{color:var(--soft)}
.jobs-modal .checkbox-text a,
.jobs-modal .jobs-modal-content a{color:var(--accent-tx)}
.jobs-modal .jobs-modal-close,
.jobs-modal .close-modal{color:var(--ink) !important;opacity:.7}
.jobs-modal .jobs-modal-close:hover,
.jobs-modal .close-modal:hover{opacity:1}
.jobs-modal input[type=text],.jobs-modal input[type=email],.jobs-modal input[type=tel],
.jobs-modal textarea,.jobs-modal select{
  font:inherit;font-size:16px;padding:10px 12px;
  border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);
}
.jobs-modal input[type=submit],.jobs-modal button[type=submit]{
  background:var(--accent);color:var(--on-accent);border:0;font-weight:700;
  padding:13px 26px;border-radius:2px;cursor:pointer;font-size:16px;
}
.jobs-modal label{color:var(--ink)}

/* Google-reCAPTCHA-Abzeichen ausblenden – wir nutzen einen eigenen Schutz */
.grecaptcha-badge{display:none !important}

/* ==========================================================================
   Brotkrumenpfad
   ========================================================================== */
.brotkrumen{background:var(--bg);border-bottom:1px solid var(--line);font-size:14px}
.brotkrumen ol{
  display:flex;flex-wrap:wrap;gap:6px 0;list-style:none;margin:0;padding:11px 0;
  color:var(--soft);
}
.brotkrumen li{margin:0;display:flex;align-items:center}
.brotkrumen li+li::before{
  content:"›";margin:0 9px;color:var(--soft);opacity:.6;
}
.brotkrumen a{color:var(--soft);text-decoration:none}
.brotkrumen a:hover{color:var(--accent-tx);text-decoration:underline}
.brotkrumen [aria-current="page"]{color:var(--ink);font-weight:600}

/* ==========================================================================
   Anfrageformular
   ========================================================================== */
.anfrage-form{max-width:none}
.anfrage-form .feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.anfrage-form .feld-reihe.drei{grid-template-columns:1fr 1fr 1fr}
.anfrage-form .feld{margin:0 0 18px}
.anfrage-form label{display:block;font-weight:700;font-size:15px;margin-bottom:5px;color:var(--ink)}
.anfrage-form .pflicht{color:var(--accent-tx)}
.anfrage-form input[type=text],.anfrage-form input[type=email],.anfrage-form input[type=tel],
.anfrage-form textarea,.anfrage-form select{
  width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:1px solid var(--line);border-radius:2px;background:var(--bg);color:var(--ink);
}
.anfrage-form textarea{resize:vertical;min-height:130px}
.anfrage-form input:focus,.anfrage-form textarea:focus,.anfrage-form select:focus{
  outline:2px solid var(--focus);outline-offset:1px;border-color:var(--accent);
}
.anfrage-form input[type=file]{
  width:100%;font:inherit;font-size:15px;padding:10px;
  border:1px dashed var(--line);border-radius:2px;background:var(--bg);color:var(--ink);
}
.anfrage-form .hinweis{display:block;font-size:13.5px;color:var(--soft);margin-top:5px}
.anfrage-form .feld-check label{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;color:var(--soft)}
.anfrage-form .feld-check input{margin-top:4px;flex:0 0 auto;width:18px;height:18px;accent-color:var(--accent)}
.anfrage-form .feld-check a{color:var(--accent-tx)}
.anfrage-form .feld-submit{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:6px 0 0}
.anfrage-form button.btn{cursor:pointer;font-family:inherit}

.anfrage-erfolg{
  border:1px solid var(--accent);border-left-width:4px;background:var(--surface);
  padding:22px 24px;border-radius:3px;
}
.anfrage-erfolg h3{margin:0 0 8px;font-size:var(--step-2)}
.anfrage-erfolg p{margin:0;color:var(--soft)}
.anfrage-fehler{
  border:1px solid #C0182B;border-left-width:4px;background:#FBE9EB;
  padding:14px 18px;border-radius:3px;margin-bottom:20px;color:#8E1220;
}
.anfrage-fehler p{margin:0}

@media (max-width:640px){
  .anfrage-form .feld-reihe,.anfrage-form .feld-reihe.drei{grid-template-columns:1fr}
}

/* --- Untermenü (Fertigungsverfahren) -------------------------------------- */
.main-nav li{position:relative}
.main-nav .sub-menu{
  display:none;position:absolute;left:-14px;top:100%;z-index:70;
  background:var(--bg);border:1px solid var(--line);border-radius:0 0 3px 3px;
  min-width:250px;padding:6px 0;margin:0;list-style:none;
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.main-nav li:hover>.sub-menu,
.main-nav li:focus-within>.sub-menu{display:block}
.main-nav .sub-menu li{margin:0}
.main-nav .sub-menu a{
  padding:9px 18px;border-bottom:0;white-space:normal;font-size:14.5px;font-weight:600;
}
.main-nav .sub-menu a:hover{background:var(--surface);color:var(--accent-tx)}
.main-nav .sub-menu .current-menu-item>a{color:var(--accent-tx)}
.main-nav .menu-item-has-children>a::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:7px;vertical-align:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);opacity:.6;
}
@media (max-width:1080px){
  .main-nav .sub-menu{
    display:block;position:static;border:0;box-shadow:none;min-width:0;
    padding:0 0 0 16px;background:transparent;
  }
  .main-nav .sub-menu a{border-bottom:1px solid var(--line);font-weight:400;font-size:15px}
  .main-nav .menu-item-has-children>a::after{display:none}
}

/* ==========================================================================
   Leistungsseiten – Bildkopf, zweispaltiger Text, Kennzahlkacheln
   ========================================================================== */

.leistung-kopf{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.leistung-kopf .wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);
  align-items:center;padding-block:0;
}
.leistung-kopf-text{padding-block:clamp(30px,4.5vw,54px)}
.leistung-kopf h1{margin-bottom:14px}
.leistung-lead{font-size:var(--step-1);color:var(--soft);margin:0 0 20px;max-width:44ch}
.leistung-kennwert{
  display:inline-block;margin:0;font-family:var(--mono);font-size:var(--step-2);
  font-weight:600;color:var(--accent-tx);border-top:2px solid var(--accent);
  padding-top:10px;font-variant-numeric:tabular-nums;
}
.leistung-kopf-bild{margin:0;height:100%;min-height:280px}
.leistung-kopf-bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .leistung-kopf .wrap{grid-template-columns:1fr;gap:0}
  .leistung-kopf-bild{min-height:0;aspect-ratio:16/9;margin-inline:calc(var(--gutter)*-1)}
}

.leistung-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,54px);align-items:start}
.leistung-text{max-width:none}
.leistung-text>.prose{max-width:68ch}
.leistung-text>.prose>p:first-child{font-size:var(--step-1);line-height:1.6;color:var(--ink)}
.leistung-text h2{
  font-size:var(--step-2);margin:2em 0 .6em;padding-top:.9em;
  border-top:1px solid var(--line);
}
.leistung-text h2:first-child{margin-top:0;padding-top:0;border-top:0}
.leistung-text p{color:var(--soft)}
.leistung-text p strong{color:var(--ink)}
@media (max-width:960px){.leistung-grid{grid-template-columns:1fr}}

/* Kennzahlen statt Tabelle */
.datenblock{
  border:0;background:transparent;border-radius:0;margin-block:30px;overflow:visible;
}
.datenblock-head{
  background:transparent;color:var(--accent-tx);padding:0 0 12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  border-bottom:2px solid var(--accent);margin-bottom:0;
}
.datenblock table{width:100%;border-collapse:collapse;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
.datenblock tbody{display:contents}
.datenblock tr{display:flex;flex-direction:column;background:var(--bg);padding:18px 20px}
.datenblock td{border:0;padding:0;font-size:14px;color:var(--soft)}
.datenblock td:last-child{
  text-align:left;font-family:var(--mono);font-size:var(--step-1);font-weight:700;
  color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums;
}
.datenblock tr:nth-child(even) td{background:transparent}

/* Anfragekasten in der Seitenspalte */
.leistung-seite{position:sticky;top:100px;display:grid;gap:20px}
.anfrage-kasten{
  border:1px solid var(--line);border-top:3px solid var(--accent);
  background:var(--surface);padding:24px;border-radius:3px;
}
.anfrage-kasten .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-tx);font-weight:600;display:block;margin-bottom:10px;
}
.anfrage-kasten p{font-size:14.5px;color:var(--soft);margin:0 0 16px}
.anfrage-kasten .btn{display:block;text-align:center}
.anfrage-kasten .tel{margin:12px 0 0;font-size:14px;text-align:center}
.anfrage-kasten .tel a{color:var(--ink);font-weight:700;text-decoration:none}

.verfahren-liste .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);font-weight:600;display:block;margin-bottom:10px;
}
.verfahren-liste ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.verfahren-liste li{margin:0;border-bottom:1px solid var(--line)}
.verfahren-liste a{
  display:block;padding:10px 0;text-decoration:none;color:var(--soft);
  font-size:14.5px;font-weight:600;
}
.verfahren-liste a:hover{color:var(--accent-tx)}
.verfahren-liste .aktiv a{color:var(--ink);border-left:3px solid var(--accent);padding-left:12px}
@media (max-width:960px){.leistung-seite{position:static}}

/* ==========================================================================
   Rechtstexte – Sprungnavigation neben dem Text
   ========================================================================== */
.recht-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(30px,4vw,64px);align-items:start}

/* --- Sprungnavigation ----------------------------------------------------
   Nummerierte Hauptabschnitte, darunter eingerückt die Unterpunkte.
   Bei dreißig Abschnitten ist eine flache Liste keine Orientierung. */
.recht-nav{position:sticky;top:100px;font-size:14.5px;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px}
.recht-nav .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);display:block;margin-bottom:14px;
}
.recht-nav ol{list-style:none;margin:0;padding:0;counter-reset:none}
.recht-nav>ol>li{margin:0 0 2px}
.recht-nav a{text-decoration:none;display:block}

/* Die Klasse muss die generische Regel darüber überbieten, sonst bleibt
   das Raster wirkungslos und Nummer und Titel kleben aneinander. */
.recht-nav a.recht-nav-haupt{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:baseline;
  padding:7px 10px 7px 8px;border-radius:2px;color:var(--ink);font-weight:600;line-height:1.35;
}
.recht-nav a.recht-nav-haupt .nr{
  font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--accent-tx);
  font-variant-numeric:tabular-nums;text-align:right;
}
.recht-nav a.recht-nav-haupt:hover{background:var(--surface)}
.recht-nav a.recht-nav-haupt:hover .tx{color:var(--accent-tx)}

.recht-nav-unter{
  list-style:none;margin:0 0 12px;padding:0;
  border-left:1px solid var(--line);margin-left:20px;
}
.recht-nav-unter li{margin:0}
.recht-nav ul.recht-nav-unter a{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;
  color:var(--soft);padding:5px 10px 5px 12px;font-size:13.5px;line-height:1.4;
}
.recht-nav-unter .nr{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--soft);
  font-variant-numeric:tabular-nums;text-align:right;opacity:.8;
}
.recht-nav-unter a:hover{background:var(--surface)}
.recht-nav-unter a:hover .tx,
.recht-nav-unter a:hover .nr{color:var(--accent-tx);opacity:1}

/* --- Der Text ------------------------------------------------------------ */
.recht-text{max-width:72ch}

/* Hauptabschnitt: die Nummer steht in der Marginalie, nicht im Satz. */
.recht-text h2{
  font-size:var(--step-3);margin:2.6em 0 .7em;padding-top:1.4em;
  border-top:2px solid var(--ink);scroll-margin-top:110px;position:relative;
}
.recht-text h2[data-nr]::before{
  content:"Abschnitt " attr(data-nr);
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tx);margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.recht-text h2:first-child{margin-top:0}
.recht-text>.rb-firmenkarte+h2{margin-top:2.2em}

/* Unterabschnitt: Nummer voran, in derselben Schrift wie im Verzeichnis. */
.recht-text h3{
  font-size:var(--step-1);margin:2em 0 .5em;scroll-margin-top:110px;
  padding-left:14px;border-left:3px solid var(--accent);
}
.recht-text h3[data-nr]::before{
  content:attr(data-nr);
  font-family:var(--mono);font-size:.72em;font-weight:700;
  color:var(--accent-tx);margin-right:.6em;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.recht-text p{color:var(--soft);line-height:1.72}
.recht-text p strong,.recht-text strong{color:var(--ink)}
.recht-text ul,.recht-text ol{color:var(--soft)}
.recht-text li{line-height:1.65;margin-bottom:.5em}
.recht-text a{color:var(--accent-tx)}
.recht-text em{font-family:var(--mono);font-style:normal;font-size:.92em;color:var(--ink)}

/* --- Firmenkarte über dem Rechtstext ------------------------------------
   Der Text beginnt nicht mit einem Absatz, sondern mit der Angabe,
   um die es geht. Dunkle Fläche, damit der Blick dort landet. */
.rb-firmenkarte{
  background:var(--deep);color:var(--on-deep);
  padding:clamp(26px,3.2vw,38px) clamp(24px,3vw,40px);
  border-radius:3px;margin:0 0 10px;
  border-left:4px solid var(--accent);
}
.rb-firmenkarte-marke{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-deep-soft);margin:0 0 16px;
}
.rb-firmenkarte-firma{
  font-size:var(--step-2);font-weight:700;letter-spacing:-.022em;
  color:var(--on-deep);margin:0 0 12px;line-height:1.15;
}
.rb-firmenkarte-anschrift{
  color:var(--on-deep-soft);margin:0;font-size:var(--step-0);line-height:1.65;max-width:62ch;
}

/* --- Datenzeilen ---------------------------------------------------------
   Register, Nummern und Anschriften gehören in eine Tabelle, nicht in
   einen Absatz: Begriff links, Wert rechts, feste Spalte. */
.rb-daten{
  margin:1.4em 0 1.8em;padding:0;
  border-top:1px solid var(--line);
}
.rb-daten-zeile{
  display:grid;grid-template-columns:minmax(140px,210px) minmax(0,1fr);
  gap:6px clamp(16px,2.6vw,34px);
  padding:15px 0;border-bottom:1px solid var(--line);
}
.rb-daten dt{
  margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);padding-top:4px;
}
.rb-daten dd{
  margin:0;color:var(--ink);font-weight:600;line-height:1.55;
}
.rb-daten dd a{color:var(--accent-tx);text-decoration:none;border-bottom:1px solid transparent}
.rb-daten dd a:hover{border-bottom-color:currentColor}
.rb-daten-zusatz,.recht-text p.rb-daten-zusatz{
  display:block;font-weight:400;font-size:13.5px;color:var(--soft);
  margin-top:4px;font-family:var(--sans);letter-spacing:0;text-transform:none;line-height:1.5;
}
.recht-text p.rb-daten-zusatz{margin:-.4em 0 1.6em;padding-left:14px;border-left:2px solid var(--line)}

@media (max-width:620px){
  .rb-daten-zeile{grid-template-columns:1fr;gap:3px;padding:13px 0}
  .rb-daten dt{padding-top:0}
}

@media (max-width:900px){
  .recht-grid{grid-template-columns:1fr}
  .recht-nav{
    position:static;max-height:none;overflow:visible;
    border:1px solid var(--line);padding:20px;border-radius:3px;background:var(--surface);
  }
  .recht-nav-unter{display:none}
}

/* ==========================================================================
   Stellenanzeigen – Plugin-Farben überschreiben
   ========================================================================== */
.job-post .job-content-wrap,
.job-post .jobs-row,
.job-post .jobs-row-input,
.job-post .jobs-row-content,
.jobs-modal,.jobs-modal-table,.jobs-modal-form{
  background-color:transparent !important;
  color:inherit;
}
.job-post .job-side .job-content-wrap{
  background-color:var(--surface) !important;
  border:1px solid var(--line);
}
.job-post .job-side .jobs-row-input,
.job-post .job-side .jobs-row-content,
.job-post .jobs-row-input,
.job-post .jobs-row-content,
.job-post .jobs-row-input *,
.job-post .jobs-row-content *{color:var(--ink)}
.job-post .jobs-row-input p,.job-post .jobs-row-content p,
.job-post .jobs-row-input li,.job-post .jobs-row-content li{color:var(--soft)}
.job-post .jobs-row-input h2,.job-post .jobs-row-input h3,
.job-post .jobs-row-input h4,.job-post .jobs-row-content h4{color:var(--ink);font-size:var(--step-1);margin:1.4em 0 .4em}
.job-post .jobs_hiring_logo{background:#fff;padding:14px;border-radius:3px;margin-bottom:14px}
.job-post .jobs_hiring_logo img{margin:0 auto}
.jobs-modal .jobs-modal-table{background-color:var(--bg) !important;border:1px solid var(--line)}
.jobs-modal label,.jobs-modal p,.jobs-modal td,.jobs-modal th{color:var(--ink)}

/* Kopfbereich der Einzelanzeige */
.job-post{padding-top:clamp(24px,3vw,38px)}
.job-post h1.jobs-row-input{
  font-size:var(--step-3);line-height:1.1;margin:0 0 4px;color:var(--ink);
}

/* ==========================================================================
   Zeitachse der Firmenhistorie
   Aufgebaut wie eine Maßskala: durchgehende Achse, Teilstriche an jedem
   Jahr, Ereignisse als Einträge daneben. Zertifizierungen sind
   hervorgehoben – sie sind das, wonach Einkäufer suchen.
   ========================================================================== */

.zeitachse{
  --za-achse:34px;
  position:relative;
  margin:8px 0 34px;
  padding-left:var(--za-achse);
}
.zeitachse::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:2px;background:var(--line);
}

.za-jahr{position:relative;padding-bottom:26px}
.za-jahr:last-child{padding-bottom:0}

.za-marke{position:relative;margin-bottom:12px}
.za-marke::before{  /* Teilstrich auf der Achse */
  content:"";position:absolute;left:calc(var(--za-achse) * -1);top:50%;
  width:18px;height:2px;background:var(--accent);transform:translateY(-50%);
}
.za-zahl{
  font-family:var(--mono);font-size:var(--step-2);font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  line-height:1;display:inline-block;
}

.za-liste{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.za-eintrag{
  margin:0;background:var(--bg);padding:14px 18px;
  display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;
}
.za-art{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--soft);white-space:nowrap;
}
.za-text{color:var(--ink);font-size:15.5px;line-height:1.5}
.za-monat{
  font-family:var(--mono);font-size:12px;color:var(--soft);
  white-space:nowrap;text-align:right;
}

/* Zertifizierungen und Meilensteine heben sich ab */
.za-eintrag.za-zert{border-left:3px solid var(--accent);padding-left:15px}
.za-eintrag.za-zert .za-art{color:var(--accent-tx)}
.za-eintrag.za-zert .za-text{font-weight:700}
.za-eintrag.za-start .za-art{color:var(--accent-tx)}
.za-eintrag.za-start .za-text{font-weight:700}

.za-bilanz{
  border-left:4px solid var(--accent);background:var(--surface);
  padding:18px 22px;margin:0 0 34px;font-size:var(--step-1);
  line-height:1.6;color:var(--soft);max-width:70ch;
}
.za-bilanz strong{color:var(--ink)}

@media (max-width:680px){
  .zeitachse{--za-achse:22px}
  .za-eintrag{grid-template-columns:1fr;gap:3px}
  .za-monat{text-align:left}
  .za-art{font-size:10px}
}

/* ==========================================================================
   Karriereseite
   ========================================================================== */

.jobs-hero{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.jobs-hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);
  align-items:center;padding-block:0;
}
.jobs-hero-text{padding-block:clamp(32px,4.5vw,56px)}
.jobs-hero h1{margin-bottom:18px;font-size:clamp(28px,3.4vw,44px)}
.jobs-hero-lead{font-size:var(--step-1);color:var(--soft);margin:0 0 24px;max-width:46ch}
.jobs-hero-zahlen{
  display:flex;flex-wrap:wrap;gap:0;margin:0;border-top:1px solid var(--line);
}
.jobs-hero-zahlen span{
  padding:14px 22px 0 0;margin-right:22px;font-size:14.5px;color:var(--soft);
  border-right:1px solid var(--line);
}
.jobs-hero-zahlen span:last-child{border-right:0;margin-right:0}
.jobs-hero-zahlen strong{
  display:block;font-family:var(--mono);font-size:var(--step-2);font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:2px;
}
.jobs-hero-bild{margin:0;height:100%;min-height:300px}
.jobs-hero-bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:860px){
  .jobs-hero .wrap{grid-template-columns:1fr;gap:0}
  .jobs-hero-bild{min-height:0;aspect-ratio:16/9;margin-inline:calc(var(--gutter)*-1)}
}

.jobs-gruende{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.jobs-gruende>div{background:var(--bg);padding:24px 22px}
.jobs-gruende .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-tx);font-weight:600;display:block;margin-bottom:10px;
}
.jobs-gruende h3{font-size:var(--step-1);margin:0 0 8px}
.jobs-gruende p{margin:0;color:var(--soft);font-size:15px}

/* Die Stellenliste läuft über die volle Breite des Abschnitts */
.jobs-liste-bereich .job-postings-filters,
.jobs-liste-bereich .job-listing{padding-inline:var(--gutter)}
.jobs-liste-bereich main article.job-preview,
.jobs-liste-bereich article.job-preview{background:var(--bg) !important}

.jobs-initiativ-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,48px);align-items:start}
.jobs-initiativ h2{margin-bottom:12px}
.jobs-initiativ p{color:var(--soft);max-width:56ch}
.jobs-initiativ-kontakt{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;margin-top:20px}
.jobs-initiativ-kontakt span{font-size:15px}
.jobs-initiativ-kontakt a:not(.btn){color:var(--ink);font-weight:700;text-decoration:none}
.jobs-praktikum{
  border:1px solid var(--line);border-top:3px solid var(--accent);
  background:var(--surface);padding:24px;border-radius:3px;
}
.jobs-praktikum .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-tx);font-weight:600;display:block;margin-bottom:10px;
}
.jobs-praktikum h3{font-size:var(--step-1);margin:0 0 8px}
.jobs-praktikum p{margin:0;font-size:14.5px;color:var(--soft)}
@media (max-width:860px){.jobs-initiativ-grid{grid-template-columns:1fr}}

/* ==========================================================================
   EFRE-Förderhinweis

   Die Richtlinie verlangt, dass das Emblem ohne Scrollen zu sehen ist.
   Deshalb steht es in der Kopfleiste – und zusätzlich im Fuß, wo es beim
   ruhigen Lesen nicht stört. Das Logo trägt Rot, Blau und dunkle Schrift
   auf Weiß; damit es in beiden Farbschemata stimmt, liegt es immer auf
   einer weißen Fläche und wird nie umgefärbt.
   ========================================================================== */

.efre{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;
}
.efre-bild{
  background:#fff;border-radius:2px;padding:5px 8px;
  display:block;flex:0 0 auto;line-height:0;
}
.efre-bild img{display:block;width:auto;height:30px}
.efre-txt{line-height:1.3}
.efre--kopf .efre-txt{white-space:nowrap}

/* --- Kopfleiste ---------------------------------------------------------- */
.efre--kopf{grid-column:3;justify-self:end}
.efre--kopf .efre-txt{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--on-deep-soft);
}
a.efre--kopf:hover .efre-txt{color:var(--on-deep);text-decoration:underline}
a.efre--kopf:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Unter 900 px reicht die Breite für drei Spalten nicht mehr: Kontakt und
   Förderhinweis stehen dann untereinander, beide mittig. */
@media (max-width:900px){
  .topbar .wrap{grid-template-columns:1fr;row-gap:9px}
  .topbar-kontakt{grid-column:1}
  .efre--kopf{grid-column:1;justify-self:center;margin-left:0}
}
@media (max-width:560px){
  .efre-bild img{height:26px}
  .efre--kopf .efre-txt{font-size:10.5px}
}

/* --- Fußbereich ---------------------------------------------------------- */
.foot-efre{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.efre--fuss{align-items:center;gap:16px;flex-wrap:wrap}
.efre--fuss .efre-bild{padding:7px 10px}
.efre--fuss .efre-bild img{height:34px}
.efre--fuss .efre-txt{
  font-size:14px;color:var(--soft);max-width:60ch;
}
a.efre--fuss:hover .efre-txt{color:var(--accent-tx)}
a.efre--fuss:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --- Förderseite --------------------------------------------------------- */
.efre-karte{
  display:flex;align-items:center;gap:clamp(20px,3vw,34px);flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:3px;
  padding:clamp(22px,2.8vw,30px) clamp(22px,3vw,34px);
  margin-bottom:clamp(28px,3.4vw,40px);
}
.efre-karte-bild{
  background:#fff;border-radius:2px;padding:10px 14px;
  display:block;flex:0 0 auto;line-height:0;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.efre-karte-bild img{display:block;width:auto;height:52px;max-width:100%}
.efre-karte-satz{
  margin:0;font-size:var(--step-1);line-height:1.5;color:var(--ink);
  max-width:44ch;font-weight:600;
}

.efre-text h2{margin-top:1.8em}
.efre-text h2:first-child{margin-top:0}
.efre-daten{max-width:68ch}
.efre-quelle{font-size:14.5px;color:var(--soft);margin-top:2em}

@media (max-width:560px){
  .efre-karte-bild img{height:40px}
  .efre-karte-satz{font-size:var(--step-0)}
}


/* ==========================================================================
   Stellenfilter

   Ersetzt den Filter des Plugins. Gefiltert wird im Browser, deshalb gibt
   es keinen Seitenwechsel – Kategorie und Suchbegriff greifen zusammen.
   ========================================================================== */

.rb-jobfilter{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  width:100%;max-width:var(--wrap);margin:0 auto 22px;
  padding-inline:var(--gutter);
}

.rb-jf-tasten{order:1;display:flex;flex-wrap:wrap;gap:8px}
.rb-jf-taste{
  font:inherit;font-size:14.5px;font-weight:600;line-height:1.3;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 16px;cursor:pointer;
  background:var(--bg);color:var(--soft);
  border:1px solid var(--line);border-radius:2px;
  transition:border-color .12s,color .12s,background-color .12s;
}
.rb-jf-taste:hover{border-color:var(--accent);color:var(--accent-tx)}
.rb-jf-taste:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rb-jf-taste .n{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;color:var(--soft);
  background:var(--surface);border-radius:2px;padding:2px 6px;
}
.rb-jf-taste.is-aktiv{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
}
.rb-jf-taste.is-aktiv .n{background:rgba(255,255,255,.22);color:var(--on-accent)}

.rb-jf-suche{order:3;margin-left:auto;flex:0 1 260px}
.rb-jf-suche input{
  font:inherit;font-size:15px;width:100%;padding:10px 13px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;
}
.rb-jf-suche input::placeholder{color:var(--soft);opacity:1}
.rb-jf-suche input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.rb-jf-suche input::-webkit-search-cancel-button{cursor:pointer}

.rb-jf-stand{
  order:2;flex:0 0 auto;margin:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--soft);
}

/* Ohne JavaScript bleibt die Leiste weg – die vollständige Liste steht
   dann einfach da, und das ist der brauchbarere Zustand. */
.rb-jobfilter:not(.ist-bereit){display:none}

/* Das Plugin setzt display:flex mit !important, deshalb hier ebenso. */
main article.job-preview.rb-aus{display:none !important}

.rb-jf-leer{
  width:100%;max-width:var(--wrap);margin:0 auto 12px;
  padding:22px var(--gutter);color:var(--soft);
}
.rb-jf-reset{
  font:inherit;font-weight:700;color:var(--accent-tx);
  background:none;border:0;padding:0;margin-left:4px;
  cursor:pointer;text-decoration:underline;
}
.rb-jf-reset:hover{text-decoration:none}

@media (max-width:700px){
  .rb-jf-suche{order:2;margin-left:0;flex:1 1 100%}
  .rb-jf-stand{order:3}
}