/* ============================================================
   WIR MACHEN DAS GMBH — Erweiterung 2026
   Additiv. Nutzt ausschliesslich die bestehenden Design-Tokens.
   Keine Aenderung am Farbschema.
   ============================================================ */

/* ---------- Zugaenglichkeit ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Behebt den violetten :visited-Bug */
a:visited { color: inherit; }
.main-nav a:visited,
.mobile-nav-link:visited,
.footer-links a:visited,
.breadcrumb a:visited,
.btn:visited,
.blog-card a:visited,
.job-card a:visited { color: inherit; }
.article-body a:visited { color: var(--color-primary-active); }

/* ---------- Logo-Zusatz (behebt verwaistes span) ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.logo-sub {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (max-width: 1100px) { .logo-sub { display: none; } }

/* ---------- Header: Laptop-Fix (1024–1280 px) ---------- */
@media (min-width: 1025px) and (max-width: 1320px) {
  .header-inner { gap: var(--space-3); }
  .main-nav ul { gap: var(--space-3); }
  .main-nav a { font-size: 0.875rem; }
  .header-phone { font-size: 0.8125rem; }
  .header-actions .btn--primary { padding: .55rem .9rem; font-size: .8125rem; }
}
@media (min-width: 1025px) and (max-width: 1140px) {
  .header-phone span, .header-phone { display: none; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb .bc-sep { opacity: .5; }
.breadcrumb--light, .breadcrumb--light a { color: rgba(255,255,255,.82); }
.breadcrumb--light a:hover { color: #fff; }

/* ---------- Generischer Seiten-Hero fuer neue Seiten ---------- */
.wmd-hero {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(150deg, var(--color-primary-active) 0%, var(--color-primary) 62%, #2a74be 100%);
  color: #fff;
  overflow: hidden;
}
.wmd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(232,118,43,.24) 0%, transparent 46%),
    radial-gradient(circle at 6% 92%, rgba(255,255,255,.08) 0%, transparent 40%);
  pointer-events: none;
}
.wmd-hero__inner { position: relative; z-index: 2; max-width: 62rem; }
.wmd-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.wmd-hero__sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,.9);
  max-width: 46rem;
  line-height: 1.5;
  margin: 0 0 var(--space-6);
}
.wmd-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem .85rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.wmd-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wmd-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,.18);
}
.wmd-fact { min-width: 8.5rem; }
.wmd-fact__val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.wmd-fact__lbl {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.76);
  margin-top: .2rem;
}

/* ---------- Sektions-Grundlagen ---------- */
.wmd-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.wmd-section--tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section-intro {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 46rem;
  margin: 0 0 var(--space-8);
  line-height: 1.65;
}
.wmd-prose > h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin: var(--space-10) 0 var(--space-4);
  color: var(--color-text);
  text-wrap: balance;
}
.wmd-prose > h2:first-child { margin-top: 0; }
.wmd-prose > h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: var(--space-8) 0 var(--space-3);
  color: var(--color-text);
}
.wmd-prose p { color: var(--color-text-muted); line-height: 1.75; margin: 0 0 var(--space-4); }
.wmd-prose strong { color: var(--color-text); font-weight: 600; }
.wmd-prose ul, .wmd-prose ol { margin: 0 0 var(--space-5); padding-left: 1.35rem; }
.wmd-prose li { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-2); }
.wmd-prose a { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wmd-prose a:hover { color: var(--color-primary-hover); }
.wmd-prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-subtle);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.wmd-prose blockquote p { margin: 0; color: var(--color-text); font-size: var(--text-base); }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; margin: var(--space-6) 0; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--text-sm);
}
.data-table caption {
  caption-side: bottom;
  text-align: left;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  line-height: 1.6;
}
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
}
.data-table thead th {
  background: var(--color-surface-2);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody th { font-weight: 600; color: var(--color-text); }
.data-table td { color: var(--color-text-muted); }
.zuschlag-table .z-pct {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-accent);
  font-size: var(--text-base);
  white-space: nowrap;
}

/* ---------- Karten-Grid (universell) ---------- */
.wmd-grid { display: grid; gap: var(--space-5); }
.wmd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.wmd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.wmd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.wmd-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.wmd-card--link { display: block; text-decoration: none; color: inherit; }
.wmd-card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }
.wmd-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.wmd-card p { color: var(--color-text-muted); line-height: 1.65; margin: 0; font-size: var(--text-sm); }
.wmd-card__icon {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.wmd-card__icon--orange { background: var(--color-accent-light); color: var(--color-accent-active); }
.wmd-card__icon--green { background: var(--color-success-light); color: var(--color-success); }

/* ---------- Bilder ---------- */
.wmd-figure { margin: var(--space-8) 0; }
.wmd-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--color-surface-2);
}
.wmd-figure figcaption {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
  line-height: 1.6;
}
.wmd-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-2);
  aspect-ratio: 16 / 10;
}
.wmd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- BLOG: Uebersicht ---------- */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.blog-filter {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: .5rem 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all .18s ease;
}
.blog-filter:hover { border-color: var(--color-primary); color: var(--color-primary); }
.blog-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--space-6); }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.blog-card__media { aspect-ratio: 16 / 9; background: var(--color-surface-2); overflow: hidden; }
.blog-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.blog-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.blog-card__cat {
  background: var(--color-primary-light);
  color: var(--color-primary-active);
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
}
.blog-card__cat--orange { background: var(--color-accent-light); color: var(--color-accent-active); }
.blog-card__cat--green { background: var(--color-success-light); color: var(--color-success); }
.blog-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
  text-wrap: balance;
}
.blog-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.blog-card__more {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.blog-card:hover .blog-card__more { color: var(--color-accent); }
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-muted);
}

/* ---------- BLOG: Artikelseite ---------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 960px) { .article-layout { grid-template-columns: 1fr; } }

.article-body { max-width: 44rem; }
.article-body > *:first-child { margin-top: 0; }
.article-lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text);
  font-weight: 500;
  margin-bottom: var(--space-6);
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); color: rgba(255,255,255,.82);
  margin-top: var(--space-5);
}
.article-meta__dot { opacity: .5; }

.article-aside { position: sticky; top: 6.5rem; display: grid; gap: var(--space-5); }
@media (max-width: 960px) { .article-aside { position: static; } }
.aside-box {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.aside-box h2, .aside-box h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}
.aside-box p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.aside-box .btn { width: 100%; justify-content: center; }
.aside-box--accent { background: var(--color-primary); border-color: var(--color-primary); }
.aside-box--accent h3, .aside-box--accent h2 { color: #fff; }
.aside-box--accent p { color: rgba(255,255,255,.86); }

.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.toc-list a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: .3rem 0 .3rem .7rem;
  border-left: 2px solid var(--color-divider);
  line-height: 1.45;
}
.toc-list a:hover { color: var(--color-primary); border-left-color: var(--color-primary); }

.article-sources {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.article-sources h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.article-sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.article-sources li { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.article-sources a { color: var(--color-primary); word-break: break-word; }

.article-nav {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.article-nav a {
  flex: 1 1 14rem;
  text-decoration: none;
  padding: var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color .2s ease;
}
.article-nav a:hover { border-color: var(--color-primary); }
.article-nav span { display: block; font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: .25rem; }
.article-nav strong { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-text); font-weight: 600; line-height: 1.35; }

.disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
}

/* ---------- JOBS ---------- */
.job-list { display: grid; gap: var(--space-5); }
.job-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-left-color .2s ease;
}
.job-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-left-color: var(--color-accent); }
.job-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.job-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: .22rem .6rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
}
.job-tag--new { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.job-tag--qual { background: var(--color-primary-light); color: var(--color-primary-active); border-color: transparent; }
.job-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
  text-wrap: balance;
}
.job-card__ort { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.job-card__facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.job-card__facts span { display: inline-flex; align-items: center; gap: .4rem; }
.job-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.job-card__pay { font-size: var(--text-sm); color: var(--color-text); }
.job-card__pay strong { font-family: var(--font-display); color: var(--color-accent); font-size: 1.05rem; }
.job-card__cta { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: .35rem; }
.job-card:hover .job-card__cta { color: var(--color-accent); }

.job-filters {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
.job-filter-group { display: flex; flex-direction: column; gap: .35rem; min-width: 12rem; flex: 1 1 12rem; }
.job-filter-group label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.job-filter-group select {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: .6rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}
.job-count { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.job-count strong { color: var(--color-text); }

.job-facts-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}
.job-fact__lbl { display: block; font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.job-fact__val { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); line-height: 1.4; }

.apply-box {
  background: linear-gradient(140deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  color: #fff;
  margin: var(--space-10) 0 0;
}
.apply-box h2 { color: #fff; font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-3); }
.apply-box p { color: rgba(255,255,255,.88); margin: 0 0 var(--space-6); line-height: 1.65; }
.apply-box__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- STANDORTE ---------- */
.city-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-4); }
.city-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.city-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }
.city-card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--color-text); }
.city-card__meta { font-size: var(--text-xs); color: var(--color-text-faint); }
.city-card__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.city-card__link { margin-top: auto; padding-top: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
.city-card:hover .city-card__link { color: var(--color-accent); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.chip {
  font-size: var(--text-xs);
  padding: .3rem .7rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
}
.chip--link { text-decoration: none; }
.chip--link:hover { border-color: var(--color-primary); color: var(--color-primary); }

.info-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-6);
  align-items: start;
}

/* ---------- CTA-Banner Ergaenzung ---------- */
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn--accent {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }
.btn--outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.btn--outline-white:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* ---------- Footer-Ergaenzung ---------- */
.footer-grid--5 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.footer-cities { columns: 2; column-gap: var(--space-4); }
.footer-cities li { break-inside: avoid; }
.footer-aueg {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  line-height: 1.55;
  margin-top: var(--space-3);
  max-width: 22rem;
}
.footer-bottom p { font-size: var(--text-xs); line-height: 1.7; }

/* ---------- FAQ-Ergaenzung ---------- */
.faq-btn { text-align: left; }
.faq-btn > span:first-child { padding-right: var(--space-4); }

/* ---------- Danke-Seite ---------- */
.danke-wrap { max-width: 38rem; margin: 0 auto; text-align: center; padding: clamp(4rem, 10vw, 7rem) 0; }
.danke-icon {
  width: 4.5rem; height: 4.5rem; margin: 0 auto var(--space-6);
  display: grid; place-items: center;
  background: var(--color-success-light); color: var(--color-success);
  border-radius: var(--radius-full);
}
.danke-wrap h1 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.danke-wrap p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 var(--space-6); }
.danke-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---------- 404 ---------- */
.err-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  color: var(--color-primary-light);
  line-height: 1;
  margin: 0;
}

/* ---------- Bewertungs-Hinweis ---------- */
.review-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}
.review-strip__stars { color: var(--color-accent); font-size: 1.1rem; letter-spacing: .1em; }
.review-strip__text { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ---------- Dark Mode Feinschliff ---------- */
[data-theme="dark"] .data-table { background: var(--color-surface); }
[data-theme="dark"] .data-table thead th { background: var(--color-surface-2); }
[data-theme="dark"] .wmd-prose blockquote { background: rgba(77,157,224,.1); }
[data-theme="dark"] .blog-card__media,
[data-theme="dark"] .wmd-media { background: var(--color-surface-2); }
[data-theme="dark"] .skip-link { color: #0b0f14; }
[data-theme="dark"] .article-body a:visited { color: var(--color-primary); }
[data-theme="dark"] .err-code { color: var(--color-surface-2); }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .floating-sidebar, .cta-banner,
  .article-aside, .blog-filters, .job-filters, .apply-box { display: none !important; }
  body { background: #fff; color: #000; }
  .wmd-hero { background: #fff !important; color: #000; padding: 1rem 0; }
  .wmd-hero h1, .wmd-hero__sub { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   NACHTRAG — Hooks für wmd-2026.js
   ========================================================================== */

/* KRITISCH: display:flex/grid auf Karten überschreibt sonst das hidden-Attribut.
   Ohne diese Regel funktioniert kein einziger Filter. */
[hidden] { display: none !important; }

/* ---------- Lesefortschritt ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 200; background: transparent; pointer-events: none;
}
.read-progress__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width .1s linear;
}

/* ---------- TOC aktiver Zustand ---------- */
.toc-list a.is-active {
  color: var(--color-primary);
  font-weight: 600;
  border-left-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

/* ---------- Leerzustände der Filter ---------- */
.filter-empty {
  grid-column: 1 / -1;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}
.filter-empty strong { display: block; color: var(--color-text); margin-bottom: .35rem; }

/* ---------- Filter-Meta-Zeile ---------- */
.filter-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.filter-reset {
  background: none; border: 1px solid var(--color-border); cursor: pointer;
  border-radius: var(--radius-full, 999px); padding: .3rem .85rem;
  font: inherit; font-size: var(--text-xs); color: var(--color-text-muted);
}
.filter-reset:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Städte-Suchfeld ---------- */
.city-search { max-width: 26rem; margin: 0 auto var(--space-6); }
.city-search input {
  width: 100%; padding: .7rem 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text);
  font: inherit; font-size: var(--text-base);
}
.city-search input:focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 1px;
  border-color: var(--color-primary);
}

@media print { .read-progress, .filter-meta, .city-search { display: none !important; } }

/* ==========================================================================
   MOBILE-KORREKTUREN 2026
   Behebt drei konkrete Befunde aus der Sichtprüfung:
   1. Auf dem Handy stand das Logo-Bild über der Überschrift — die Aussage
      der Seite lag damit unter der ersten Bildschirmseite.
   2. Ab 600 px verschwand jede Kontaktmöglichkeit aus dem Header.
   3. Die Schnellkontakt-Buttons lagen ohne Abstand über dem Text.
   ========================================================================== */

/* ---------- 1) Auf Mobil zuerst die Botschaft, dann das Bild ---------- */
@media (max-width: 900px) {
  .hero-visual { order: 0; }
  .hero-text   { order: -1; }
}

/* ---------- 2) Anruf-Button im Header auf kleinen Geräten ---------- */
.header-call-mobile { display: none; }

@media (max-width: 600px) {
  .header-call-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .2s ease;
  }
  .header-call-mobile:hover,
  .header-call-mobile:focus-visible { background: var(--color-primary-hover); }
  .header-call-mobile svg { width: 19px; height: 19px; }
}

/* ---------- 3) Schnellkontakt: Abstand und Sicherheitszone ---------- */
@media (max-width: 900px) {
  .floating-sidebar {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  }
}

@media (max-width: 600px) {
  .floating-sidebar { gap: 6px; }
  .floating-sidebar__btn { width: 46px; height: 46px; max-width: 46px; }
  .floating-sidebar__btn svg { width: 20px; height: 20px; }
  /* Verhindert, dass die Buttons den letzten Abschnitt verdecken */
  .site-footer { padding-bottom: calc(var(--space-10) + 60px); }
}

/* ==========================================================================
   NEUE SEITENTYPEN 2026
   Blog, Stellen, Standorte. Nutzt ausschliesslich vorhandene Tokens,
   damit das Farbschema unveraendert bleibt.
   ========================================================================== */

/* ---------- Allgemeiner Abschnitt ---------- */
.section { padding-block: var(--space-20); }
@media (max-width: 900px) { .section { padding-block: var(--space-12); } }

.section-intro {
  max-width: 62ch;
  margin: 0 auto var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------- Buttons: Ergaenzungsgroessen ---------- */
.btn--sm { padding: 10px 16px; font-size: var(--text-sm); }
.btn--full { width: 100%; justify-content: center; }
.btn--full + .btn--full { margin-top: var(--space-3); }

/* ---------- Trust-Leiste auf Stadtseiten ---------- */
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--space-10);
}
.trust-bar-inner .trust-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.trust-bar-inner .trust-item strong { color: var(--color-primary); font-size: var(--text-base); }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-featured-wrap .section-label { display: block; margin-bottom: var(--space-4); }

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary-light);
}

.blog-card-media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-2);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}
.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.blog-card-body h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0;
}
.blog-card-body h3 a { color: var(--color-text); text-decoration: none; }
.blog-card-body h3 a:hover { color: var(--color-primary); }
.blog-card-body p { color: var(--color-text-muted); margin: 0; flex: 1; }

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
}
.blog-card-link span { transition: transform var(--transition); }
.blog-card:hover .blog-card-link span { transform: translateX(4px); }

/* Hervorgehobener Beitrag: zweispaltig */
.blog-card--featured { flex-direction: row; }
.blog-card--featured .blog-card-media { flex: 0 0 52%; aspect-ratio: auto; }
.blog-card--featured .blog-card-body { padding: var(--space-10); justify-content: center; }
.blog-card--featured .blog-card-body h3 { font-size: var(--text-3xl); }

@media (max-width: 860px) {
  .blog-card--featured { flex-direction: column; }
  .blog-card--featured .blog-card-media { flex: none; aspect-ratio: 16 / 10; }
  .blog-card--featured .blog-card-body { padding: var(--space-6); }
  .blog-card--featured .blog-card-body h3 { font-size: var(--text-2xl); }
}

/* ---------- Filter-Chips ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}
.filter-chip {
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   ARTIKELSEITE
   ========================================================================== */
.read-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  background: transparent;
}
.read-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width .1s linear;
}

.article-hero { padding-block: var(--space-12) var(--space-8); }
.article-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 1.12;
  margin: var(--space-4) 0 var(--space-5);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.article-teaser {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 62ch;
}

.article-figure { margin: 0 0 var(--space-10); }
.article-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.article-layout { padding-bottom: var(--space-16); }

/* ---------- Inhaltsverzeichnis ---------- */
.toc {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
}
.toc-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.toc-list { margin: 0; padding-left: var(--space-5); display: grid; gap: 8px; }
.toc-list a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc-list a:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ---------- Fliesstext ---------- */
.wmd-prose { max-width: 68ch; }
.wmd-prose > * + * { margin-top: var(--space-5); }
.wmd-prose p { font-size: var(--text-lg); line-height: 1.75; color: var(--color-text); }
.wmd-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  margin-top: var(--space-12);
  scroll-margin-top: 96px;
}
.wmd-prose h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-top: var(--space-8);
}
.wmd-prose ul, .wmd-prose ol { padding-left: var(--space-6); display: grid; gap: 10px; }
.wmd-prose li { font-size: var(--text-lg); line-height: 1.7; }
.wmd-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.wmd-prose a:hover { color: var(--color-primary-hover); }
.wmd-prose strong { font-weight: 600; }
.wmd-prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  font-size: var(--text-xl);
  font-family: var(--font-display);
  color: var(--color-text);
}
.wmd-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.wmd-prose th, .wmd-prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-divider);
  text-align: left;
}
.wmd-prose thead th { background: var(--color-surface-2); font-weight: 600; }

/* ---------- Quellen ---------- */
.quellen {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}
.quellen h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.quellen-list { padding-left: var(--space-6); display: grid; gap: 10px; margin: var(--space-4) 0; }
.quellen-list a { color: var(--color-primary); word-break: break-word; }
.quellen-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-4); }

/* ---------- CTA im Artikel ---------- */
.article-cta {
  margin-top: var(--space-12);
  padding: var(--space-8);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
}
.article-cta h2 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-3); }
.article-cta p { color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Blaettern ---------- */
.art-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.art-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.art-nav-link:hover { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.art-nav-link--next { text-align: right; }
.art-nav-link--next:only-child { grid-column: 2; }
.art-nav-lbl {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-faint);
}
.art-nav-ttl { font-weight: 600; color: var(--color-text); line-height: 1.35; }
@media (max-width: 700px) {
  .art-nav { grid-template-columns: 1fr; }
  .art-nav-link--next { text-align: left; }
  .art-nav-link--next:only-child { grid-column: 1; }
}

/* ==========================================================================
   STELLENANGEBOTE
   ========================================================================== */
.filter-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}
.filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 190px; flex: 1; }
.filter-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}
.filter-field select {
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.filter-field select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--space-6);
}
.job-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition);
}
.job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.job-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.job-ref { font-size: var(--text-xs); color: var(--color-text-faint); font-variant-numeric: tabular-nums; }
.job-card h3 { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; margin: 0; }
.job-card h3 a { color: var(--color-text); text-decoration: none; }
.job-card h3 a:hover { color: var(--color-primary); }

.job-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.job-facts li { font-size: var(--text-sm); color: var(--color-text); }
.job-fact-lbl {
  display: inline-block;
  min-width: 88px;
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.job-pay {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-base);
}
.job-pay strong { color: var(--color-primary); font-size: var(--text-lg); }
.job-pay-note { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 3px; }
.job-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: auto; }

/* ---------- Detailseite ---------- */
.job-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-12);
  align-items: start;
}
.job-detail-main > h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-top: var(--space-10);
}
.job-detail-main > h2:first-child { margin-top: 0; }
.job-detail-main p { font-size: var(--text-lg); line-height: 1.7; color: var(--color-text); }

.job-detail-side { position: sticky; top: 96px; }
.job-side-card {
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.job-side-title { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-5); }
.job-side-list { margin: 0 0 var(--space-6); display: grid; gap: var(--space-3); }
.job-side-list dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-faint);
}
.job-side-list dd { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text); font-weight: 500; }
.job-side-note { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-4) 0 0; }

.steps-list { padding-left: var(--space-6); display: grid; gap: var(--space-4); }
.steps-list li { font-size: var(--text-lg); line-height: 1.6; }

.gehalt-intro { color: var(--color-text-muted); margin-bottom: var(--space-6); }

@media (max-width: 1000px) {
  .job-detail-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .job-detail-side { position: static; }
}

/* ==========================================================================
   STANDORTE
   ========================================================================== */
.city-search { max-width: 460px; margin: 0 auto var(--space-8); }
.city-search label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.city-search input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.city-search input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}
.city-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  position: relative;
  transition: all var(--transition);
}
.city-tile:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  transform: translateY(-2px);
}
.city-tile-city { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); }
.city-tile-meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.city-tile-go {
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-primary);
  opacity: 0;
  transition: all var(--transition);
}
.city-tile:hover .city-tile-go { opacity: 1; transform: translateY(-50%) translateX(4px); }

/* ---------- Stadt-Hero mit Bild ---------- */
.city-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.city-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 20, 24, .35) 0%, rgba(16, 20, 24, .82) 100%);
}
.city-hero-inner { position: relative; padding-block: var(--space-16) var(--space-12); color: #fff; }
.city-hero-inner h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 1.1;
  color: #fff;
  margin: var(--space-4) 0 var(--space-5);
  max-width: 22ch;
}
.city-hero-inner > p { font-size: var(--text-lg); color: rgba(255, 255, 255, .9); max-width: 60ch; }
.city-hero-inner .breadcrumb--light { margin-bottom: var(--space-5); }
@media (max-width: 700px) {
  .city-hero { min-height: 380px; }
  .city-hero-inner { padding-block: var(--space-12) var(--space-8); }
}

.city-intro p { font-size: var(--text-lg); line-height: 1.75; }
.city-section { margin-top: var(--space-12); }
.city-section h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  margin: 0 0 var(--space-4);
  scroll-margin-top: 96px;
}
.city-section p { font-size: var(--text-lg); line-height: 1.75; }
.city-section p + p { margin-top: var(--space-4); }
.city-section ul { padding-left: var(--space-6); display: grid; gap: 10px; margin-top: var(--space-4); }
.city-section li { font-size: var(--text-lg); line-height: 1.65; }
.city-section a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.city-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-12);
}
.city-facts-card {
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.city-facts-card h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.city-facts-card p { font-size: var(--text-sm); line-height: 1.65; color: var(--color-text-muted); margin: 0; }
.city-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.city-list li {
  font-size: var(--text-sm);
  line-height: 1.5;
  padding-left: var(--space-4);
  position: relative;
  color: var(--color-text);
}
.city-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}
.city-facts-note {
  margin-top: var(--space-4) !important;
  font-size: var(--text-xs) !important;
  color: var(--color-text-faint) !important;
}

.city-konditionen { margin-top: var(--space-12); }
.city-konditionen h2 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.city-konditionen p { font-size: var(--text-lg); line-height: 1.75; }
.city-konditionen-note {
  font-size: var(--text-sm) !important;
  color: var(--color-text-muted);
  margin-top: var(--space-5);
}

.city-links {
  text-align: center;
  line-height: 2.2;
  max-width: 70ch;
  margin: 0 auto;
  color: var(--color-text-faint);
}
.city-links a { color: var(--color-primary); text-decoration: none; }
.city-links a:hover { text-decoration: underline; }

/* ---------- Impressum: Definitionsliste ---------- */
.legal-dl { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.legal-dl dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-faint);
  font-weight: 600;
}
.legal-dl dd { margin: 2px 0 0; color: var(--color-text); }

/* ============================================================
   NACHTRAG: Meta-Spans & Modifier ohne eigene Regel
   ============================================================ */
.article-read,
.blog-card-read {
  color: var(--color-text-muted, var(--color-muted));
  font-size: var(--text-sm);
  white-space: nowrap;
}
.article-read::before,
.blog-card-read::before {
  content: "·";
  margin-right: 0.45em;
  opacity: 0.6;
}
.blog-section { padding-top: var(--space-8); }
.art-nav-link--prev { text-align: left; }
.logo--footer { align-items: center; }

/* ============================================================
   TYPOGRAFIE-KORREKTUR 2026
   Die Basistokens --text-xl/2xl/3xl/hero skalieren stark mit der
   Viewportbreite (bis 5rem). Fuer Karten, Artikel-Ueberschriften und
   Fliesstext ist das zu gross. Hier bewusst engere Klammern.
   ============================================================ */

/* --- Seitentitel neuer Seitentypen --- */
.article-hero h1 { font-size: clamp(2rem, 1.35rem + 2.1vw, 3.15rem); }
.city-hero-inner h1 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.9rem); }
.wmd-hero h1 { font-size: clamp(2rem, 1.35rem + 2.2vw, 3.25rem); }
.danke-wrap h1 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem); }

/* --- Zwischenueberschriften im Text --- */
.wmd-prose h2,
.city-section h2,
.job-detail-main > h2,
.article-cta h2,
.city-konditionen h2 { font-size: clamp(1.55rem, 1.15rem + 1.15vw, 2.15rem); }
.wmd-prose h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.5rem); }
.wmd-prose blockquote { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); }
.quellen h2,
.job-side-title,
.apply-box h2 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }

/* --- Kartentitel: feste Groessen, damit nichts umbricht --- */
.blog-card-body h3 { font-size: 1.2rem; }
.blog-card--featured .blog-card-body h3 { font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); }
.job-card h3 { font-size: 1.18rem; }
.city-tile-city { font-size: 1.12rem; }
.wmd-fact__val { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }

@media (max-width: 860px) {
  .blog-card--featured .blog-card-body h3 { font-size: 1.4rem; }
}

/* --- Fliesstext etwas ruhiger --- */
.wmd-prose p,
.wmd-prose li,
.city-section p,
.city-intro p,
.job-detail-main p { font-size: 1.0625rem; }

/* --- Meta-Zeilen: kein Trennpunkt am Zeilenanfang --- */
.article-read::before,
.blog-card-read::before { content: none; }
.article-meta,
.blog-card-meta { column-gap: var(--space-4); row-gap: var(--space-2); }

/* --- Blog-Raster: drei Spalten ab ~1050px --- */
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }

/* ============================================================
   ARTIKEL-LAYOUT-KORREKTUR: Inhaltsverzeichnis als echte Spalte
   Vorher teilten sich TOC (18rem) und Text eine 640px-Spalte,
   dadurch blieben fuer den Text nur rund 210px.
   ============================================================ */
.article-layout {
  grid-template-columns: 17rem minmax(0, 1fr);
  align-items: start;
}
.article-layout > .toc {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 96px;
  margin-bottom: 0;
}
.article-layout > .wmd-prose,
.article-layout > .quellen,
.article-layout > .article-cta,
.article-layout > .art-nav {
  grid-column: 2;
}
.article-layout > .wmd-prose { grid-row: 1; }
.article-hero .container,
.article-figure .container { max-width: var(--content-default); }

@media (max-width: 1024px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout > .toc,
  .article-layout > .wmd-prose,
  .article-layout > .quellen,
  .article-layout > .article-cta,
  .article-layout > .art-nav { grid-column: 1; grid-row: auto; }
  .article-layout > .toc { position: static; margin-bottom: var(--space-8); }
}

/* --- Stadtseiten: Lesebreite begrenzen, Karten voll ausnutzen --- */
.city-intro,
.city-section > p,
.city-section > ul,
.city-konditionen > p,
.quellen > p { max-width: 68ch; }
.city-facts { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ============================================================
   FARB- UND KONTRASTKORREKTUR 2026
   Einige Links erbten die Browser-Standardfarbe (#0000EE) bzw.
   Lila fuer :visited. Das wird hier global unterbunden.
   ============================================================ */
a { color: inherit; }
a:visited { color: inherit; }
.wmd-prose a:not(.btn),
.quellen-list a,
.footer a:not(.btn),
.breadcrumb a { color: var(--color-primary); }
.wmd-prose a:not(.btn):visited,
.quellen-list a:visited { color: var(--color-primary); }
.city-tile,
.art-nav-link,
.blog-card,
.job-card,
.floating-sidebar__btn { color: var(--color-text); }
.city-tile h3, .city-tile-city, .art-nav-title { color: var(--color-text); }

/* Footer-Logo: heller Text auf dunklem Footer, in beiden Modi */
.logo--footer,
.logo--footer .logo-sub,
.logo--footer .logo-txt { color: #ffffff; }

/* Heller Text auf hellen Hero-Bildern zusaetzlich absichern */
.badge--white { background: rgba(255,255,255,.22); color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.city-hero-inner .breadcrumb a,
.city-hero-inner .breadcrumb { color: rgba(255,255,255,.9); }

/* Footer-Logo: hoehere Spezifitaet, damit die Dark-Mode-Inversfarbe
   (--color-text-inverse = #0d1218) den Text nicht unsichtbar macht. */
footer .logo.logo--footer,
footer .logo.logo--footer .logo-sub,
footer .logo.logo--footer .logo-main,
footer .logo.logo--footer .logo-txt,
[data-theme="dark"] footer .logo.logo--footer,
[data-theme="dark"] footer .logo.logo--footer .logo-sub,
[data-theme="dark"] footer .logo.logo--footer .logo-main {
  color: #e8eef7;
}

/* ============================================================
   MOBILE-KORREKTUR 2026
   Auf kontakt.html erzwang die min-content-Breite der langen
   E-Mail-Adresse eine 392px-Grid-Spalte in einem 320px-Container
   -> horizontales Scrollen. Grid-Kinder duerfen schrumpfen.
   ============================================================ */
.direktkontakt-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.direktkontakt-card,
.direktkontakt-card .dk-content,
.kontakt-info,
.split-card,
.city-facts-card,
.job-card,
.blog-card { min-width: 0; }
.direktkontakt-card .dk-content,
.direktkontakt-card .dk-content * { overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .direktkontakt-row { grid-template-columns: 1fr; }
  /* Tap-Ziele auf Touch-Groesse bringen */
  .faq-btn { min-height: 44px; }
  .footer-social-link,
  .footer-nav a,
  .blog-card-link { min-height: 40px; display: inline-flex; align-items: center; }
}
/* Sicherheitsnetz gegen horizontales Scrollen */
html, body { max-width: 100%; overflow-x: hidden; }

/* Artikelnavigation und CTA-Buttons: Grid-Kinder duerfen schrumpfen,
   sonst erzwingen lange Artikeltitel eine Breite > Viewport. */
.art-nav { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.art-nav-link,
.art-nav-lbl,
.art-nav-ttl,
.article-cta-actions,
.article-cta-actions > * { min-width: 0; }
.art-nav-ttl { overflow-wrap: anywhere; }
.article-cta-actions { flex-wrap: wrap; }

@media (max-width: 700px) {
  .art-nav { grid-template-columns: 1fr; }
  .art-nav-link--next,
  .art-nav-link--next:only-child { text-align: left; grid-column: 1; }
  .article-cta-actions { flex-direction: column; align-items: stretch; }
  .article-cta-actions .btn { width: 100%; justify-content: center; }
}

/* Ursache des mobilen Ueberlaufs in Artikeln: "1fr" bedeutet
   minmax(auto,1fr); die min-content-Breite langer Inhaltsverzeichnis-
   Eintraege blaehte die Spalte auf 509px in einem 360px-Container.
   Mit minmax(0,1fr) darf die Spalte kleiner werden als ihr Inhalt. */
.article-layout > * { min-width: 0; }
.toc, .toc-list, .toc-list li, .toc-list a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   TABELLEN AUF SCHMALEN DISPLAYS
   Wrapper wird vom Generator um jede Tabelle gelegt.
   ============================================================ */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-6);
  border-radius: var(--radius-md);
}
.table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.table-scroll > table { margin-block: 0; }
@media (max-width: 700px) {
  .table-scroll > table { min-width: 30rem; }
  .table-scroll { box-shadow: inset -12px 0 12px -12px rgba(0,0,0,.18); }
}

/* ============================================================
   HEADER ZWISCHEN 1101px UND 1400px
   Dort war die Navigation noch komplett sichtbar, der Platz aber
   zu knapp: .header-actions lief rechts aus dem Container heraus.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1400px) {
  .header-phone { display: none; }
  .header-inner { gap: 12px; flex-wrap: nowrap; }
  .header-inner > * { min-width: 0; }
  .main-nav { gap: 4px; min-width: 0; }
  .main-nav a { padding-inline: 8px; font-size: .9375rem; white-space: nowrap; }
  .header-actions { gap: 8px; flex-shrink: 0; }
  .header-actions .btn { padding-inline: 14px; font-size: .9375rem; }
  .logo-sub { display: none; }
}

/* E-Mail-Adresse in den Kontaktkarten umbrechen statt abschneiden */
.direktkontakt-card .dk-content strong,
.direktkontakt-card .dk-value {
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
}

/* Floating-Sidebar auf Handys kompakter, damit sie keine
   Ueberschriften verdeckt; Seite bekommt unten Luft. */
@media (max-width: 700px) {
  .floating-sidebar {
    top: auto;
    bottom: 14px;
    right: 10px;
    transform: none;
    flex-direction: row;
    gap: 8px;
  }
  .floating-sidebar__btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
  }
  .floating-sidebar__btn svg { width: 22px; height: 22px; }
  body { padding-bottom: 76px; }
}

/* ==========================================================================
   FORMULARFELDER — DARK-MODE-KORREKTUR
   Ursachen des weissen Qualifikationsfeldes:
   1. karriere.css wird nur auf karriere.html geladen -> auf kontakt.html hatte
      <select> ueberhaupt kein Styling und blieb Browser-Weiss.
   2. color-scheme war nirgends deklariert -> das aufgeklappte Dropdown wurde
      vom Betriebssystem immer hell gerendert, egal welches Theme aktiv war.
   3. Kein Autofill-Schutz -> Chrome faerbt ausgefuellte Felder weiss.
   Additiv, keine Farbwerte des Schemas geaendert.
   ========================================================================== */

/* 1) Betriebssystem mitteilen, welches Schema gilt. Wirkt auf aufgeklappte
      Dropdowns, Kalender, Checkboxen, Scrollbalken und Autofill. */
:root,
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

/* 2) Einheitliches Feld-Styling auf ALLEN Seiten */
.kontakt-form select,
.kontakt-form input,
.kontakt-form textarea,
.bewerben-form select,
.bewerben-form input,
.bewerben-form textarea,
.form-group select,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.form-group select,
.kontakt-form select,
.bewerben-form select {
  /* Eigener Pfeil, damit die Optik in beiden Modi identisch ist */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: var(--space-3) 2.5rem var(--space-3) var(--space-4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235a6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 14px 9px;
  cursor: pointer;
  text-overflow: ellipsis;
}

[data-theme="dark"] .form-group select,
[data-theme="dark"] .kontakt-form select,
[data-theme="dark"] .bewerben-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238a99b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .form-group select,
  :root:not([data-theme]) .kontakt-form select,
  :root:not([data-theme]) .bewerben-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238a99b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* 3) Die Optionsliste selbst — Firefox und Windows brauchen das explizit */
.form-group select option,
.kontakt-form select option,
.bewerben-form select option,
.job-filter-group select option,
.filter-field select option {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* 4) Platzhalter lesbar halten */
.kontakt-form ::placeholder,
.bewerben-form ::placeholder,
.form-group ::placeholder { color: var(--color-text-faint); opacity: 1; }

/* 5) Autofill: Chrome erzwingt sonst weissen Grund mit schwarzem Text */
.kontakt-form input:-webkit-autofill,
.bewerben-form input:-webkit-autofill,
.form-group input:-webkit-autofill,
.kontakt-form textarea:-webkit-autofill,
.form-group select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 100px var(--color-surface) inset;
          box-shadow: 0 0 0 100px var(--color-surface) inset;
  caret-color: var(--color-text);
}

/* 6) Fokus einheitlich */
.kontakt-form select:focus,
.kontakt-form input:focus,
.kontakt-form textarea:focus,
.bewerben-form select:focus,
.bewerben-form input:focus,
.bewerben-form textarea:focus,
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  outline: none;
}

/* 7) Filterfelder auf jobs.html und standorte.html gleich behandeln */
.job-filter-group select,
.filter-field select {
  background-color: var(--color-surface);
  color: var(--color-text);
}

/* Zustimmungstext war komplett orange: die Regel ".form-group label span"
   faerbt eigentlich nur das Pflichtfeld-Sternchen, traf aber auch den in
   ein <span> gefassten Datenschutzsatz. Der sah dadurch wie eine
   Fehlermeldung aus. Nur dieser Fall wird zurueckgesetzt. */
.form-group .checkbox-label span,
.form-consent .checkbox-label span,
.checkbox-label > span {
  color: var(--color-text-muted);
}
.form-group .checkbox-label span a,
.checkbox-label > span a {
  color: var(--color-primary);
}