/* ============================================================
   EMC GmbH – gemeinsames Stylesheet fuer alle Seiten
   ------------------------------------------------------------
   Aufbau:
     1. Basis   – gilt ueberall (unskopiert)
     2. Scopes  – wo sich Start-/Kontaktseite und Karriereseite
                  bewusst unterscheiden:
                    body:not(.page-karriere)  Start + Kontakt
                    body.page-karriere        Karriere
     3. Kontaktseite + mobile Navigation
   Die Karriereseite traegt dafuer class="page-karriere" am <body>.
   ============================================================ */

/* ========== BASIS + STARTSEITE/KONTAKT ========== */
:root { --emc-blue: #0063AF; --emc-blue-dark: #0F3963; --emc-blue-mid: #146FB5; --emc-blue-light: #3382BF; --emc-blue-50: #E5EFF7; --emc-card-fill: #F3F8FC; --emc-card-border: #DCEAF6; --emc-logo-blue: #0063af; --emc-bordeaux: #E63323; --emc-bordeaux-dark: #BC291C; --emc-bordeaux-light: #EB5F53; --emc-bg: #F3F8FC; --emc-surface: #FFFFFF; --emc-border: #DCE4EC; --emc-text: #1A2B3D; --emc-text-muted: #5A6B7D; --emc-text-light: #8A95A0; --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --hero-sub-h: 640px; --hero-home-h: max(75vh, 620px); }

/* Hero-Hoehe aller Unterseiten an einer Stelle. Wird pro Breakpoint
   neu gesetzt, damit Karriere-, Leistungs-, Ueber-uns- und Kontaktseite
   bei jeder Fensterbreite exakt gleich hoch sind und beim Seitenwechsel
   nichts springt. Schmalere Fenster brauchen mehr Hoehe, weil Headline
   und Lead dort auf mehr Zeilen umbrechen. */
@media (max-width: 960px) { :root { --hero-sub-h: 560px; --hero-home-h: max(70vh, 480px); } }
@media (max-width: 430px) { :root { --hero-sub-h: 620px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--emc-text); background: var(--emc-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; line-height: 1.05; text-transform: uppercase; }
h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.3px; line-height: 1.15; text-transform: uppercase; }
p { line-height: 1.7; }
img { max-width: 100%; display: block; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.header { border-bottom: 1px solid var(--emc-border); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(255,255,255,0.95); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 84px; max-width: 1240px; margin: 0 auto; position: relative; }
.logo-row { display: flex; align-items: center; cursor: pointer; height: 100%; }
.logo-img { height: 84px; width: auto; display: block; }
.nav { display: flex; gap: 32px; }
.nav a { color: var(--emc-text); font-size: 14px; font-weight: 500; text-decoration: none; position: relative; transition: color 0.2s; }
.nav a:hover { color: var(--emc-blue); }
.nav a::after { content: ''; position: absolute; bottom: -22px; left: 0; right: 0; height: 3px; background: var(--emc-blue); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transform: scaleX(0); transform-origin: left; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.active { color: var(--emc-blue); }
.nav a.active::after { transform: scaleX(1); background: var(--emc-bordeaux); }
@media (prefers-reduced-motion: reduce) {
  .nav a::after { transition: none; }
}
.header-cta { display: flex; align-items: center; gap: 18px; }
.phone-link { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--emc-text); text-decoration: none; transition: color 0.2s; }
.phone-link:hover { color: var(--emc-blue); }
.phone-link svg { width: 16px; height: 16px; stroke: var(--emc-blue); }
.btn { font-family: var(--font-body); font-weight: 600; font-size: 14px; border: none; cursor: pointer; padding: 11px 20px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: all 0.2s; letter-spacing: 0.2px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn:focus-visible { outline: 3px solid var(--emc-bordeaux); outline-offset: 3px; }
.btn-primary { background: var(--emc-blue); color: #fff; }
.btn-primary:hover { background: var(--emc-blue-dark); transform: translateY(-1px); }
.btn-logo { background: var(--emc-logo-blue); color: #fff; }
.btn-logo:hover { background: #005494; transform: translateY(-1px); }
.btn-accent { background: var(--emc-bordeaux); color: #fff; }
.btn-accent:hover { background: var(--emc-bordeaux-dark); transform: translateY(-1px); }
.btn-ghost { color: #fff; }
.btn-outline { color: var(--emc-blue); }
.btn-wrap { position: relative; display: inline-flex; border-radius: 0; }
.btn-wrap::before { content: ''; position: absolute; inset: 0; z-index: 0; background: rgba(255,255,255,0.9); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%); transition: background 0.2s; }
.btn-wrap .btn-ghost { position: relative; z-index: 1; margin: 2px; background: rgba(15,57,99,0.35); border: none; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%); transition: background 0.2s; }
body:not(.page-karriere) .btn-wrap { transition: transform 0.2s; }
body:not(.page-karriere) .btn-wrap:hover { transform: translateY(-1px); }
.btn-wrap:hover::before { background: #fff; }
.btn-wrap .btn-ghost:hover { background: rgba(255,255,255,0.92); color: var(--emc-blue-dark); }
.mobile-toggle { display: none; background: transparent; border: none; padding: 8px; cursor: pointer; }
.mobile-toggle svg { width: 24px; height: 24px; stroke: var(--emc-text); }
body:not(.page-karriere) .hero { position: relative; color: #fff; overflow: hidden; background: var(--emc-blue); min-height: var(--hero-home-h); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* object-position greift nur, solange die Datei keinen Fokuspunkt hat –
   ein im Panel gesetzter Punkt überschreibt es per style-Attribut. */
body:not(.page-karriere) .hero-bg img { width: 100%; height: 130%; object-fit: cover; object-position: center 35%; display: block; filter: brightness(0.95) contrast(1.05) saturate(0.85); will-change: transform; }
body:not(.page-karriere) .hero-overlay { position: absolute; inset: 0; z-index: 1; background:
    linear-gradient(90deg, rgba(15,57,99,0.94) 0%, rgba(15,57,99,0.85) 30%, rgba(15,57,99,0.55) 60%, rgba(15,57,99,0.15) 100%),
    linear-gradient(180deg, rgba(15,57,99,0.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.35) 100%); }
body:not(.page-karriere) .hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; min-height: var(--hero-home-h); display: flex; align-items: center; }
body:not(.page-karriere) .hero-text { padding: 0 32px; max-width: 720px; }
body:not(.page-karriere) .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.9); margin-bottom: 24px; display: inline-block; }
body:not(.page-karriere) .hero h1 { font-size: clamp(2.75rem, 5.5vw, 4.75rem); font-weight: 600; margin-bottom: 28px; letter-spacing: 0; text-transform: uppercase; line-height: 1.05; max-width: 9em; }
.hero h1 .accent { color: inherit; font-weight: inherit; }
body:not(.page-karriere) .hero-lead { font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 36px; max-width: 480px; line-height: 1.6; }
body:not(.page-karriere) .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.trust { background: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 36px 0; gap: 24px; }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 16px; border-right: 1px solid var(--emc-border); }
.trust-item:last-child { border-right: none; }
body:not(.page-karriere) .trust-num { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--emc-blue); letter-spacing: -0.02em; line-height: 1; }
.trust-num-sm { font-size: 20px; line-height: 1.15; }
.trust-label { font-size: 12px; color: var(--emc-text-muted); letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; }
.section { padding: 100px 0; }
.section.alt { background: #fff; }
.section-head { margin-bottom: 60px; max-width: 720px; }
.section-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--emc-blue); text-transform: uppercase; margin-bottom: 14px; display: inline-block; }
.section h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; margin-bottom: 16px; color: var(--emc-text); }
.section-intro { font-size: 17px; color: var(--emc-text-muted); line-height: 1.7; }
.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.service { position: relative; background: transparent; padding: 32px 28px; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.service::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--emc-card-border); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); transition: background 0.2s; }
.service::after { content: ''; position: absolute; inset: 1px; z-index: 1; background: var(--emc-card-fill); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%); }
.service > * { position: relative; z-index: 2; }
.service:hover::before { background: var(--emc-blue); }
.service:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -12px rgba(0,99,175,0.2); }
.service-icon { width: 64px; height: 64px; background: var(--emc-blue-50); border-radius: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.service-icon svg { width: 36px; height: 36px; stroke: var(--emc-blue); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.service p { font-size: 14.5px; color: var(--emc-text-muted); line-height: 1.65; }
.service-cta { background: transparent; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; cursor: pointer; }
.service-cta::before { background: var(--emc-text); }
.service-cta::after { background: var(--emc-text); }
.service-cta:hover::before { background: var(--emc-blue); }
.service-cta:hover::after { background: var(--emc-blue); }
.service-cta:hover { transform: none; box-shadow: none; }
.service-cta h3 { color: #fff; }
.service-cta p { color: rgba(255,255,255,0.75); }
.service-cta .arrow { margin-top: 16px; color: var(--emc-bordeaux-light); font-size: 22px; font-weight: 500; }
.career { background: var(--emc-blue); color: #fff; padding: 100px 0; position: relative; overflow: hidden; }
.career::before { content: ''; position: absolute; inset: 0; background:
    repeating-linear-gradient(45deg, transparent 0, transparent 80px, rgba(255,255,255,0.02) 80px, rgba(255,255,255,0.02) 81px); pointer-events: none; }
.career > * { position: relative; z-index: 1; }
.career .section-eyebrow { color: rgba(255,255,255,0.9); }
.career h2 { color: #fff; font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; margin-bottom: 16px; }
.career-intro { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.7; }
.career-header { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; margin-bottom: 56px; }
.career-header-image { height: 380px; border-radius: 0; overflow: hidden; position: relative; }
.career-header-image img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95) brightness(0.95); }
.career-header-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,57,99,0.25), transparent 55%); pointer-events: none; }
.benefits-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 64px; padding: 0 8px; }
.benefit-item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.benefit-icon { width: 64px; height: 64px; background: rgba(255,255,255,0.1); border-radius: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.benefit-icon svg { width: 36px; height: 36px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-text { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; }
.career-subhead { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 22px; }
.career-subhead.spaced { margin-top: 60px; }
.job-badge { display: inline-block; background: #25D366; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 2px 7px; border-radius: 0; margin-left: 10px; vertical-align: 2px; }
.career-quote { max-width: 760px; margin: 64px auto; text-align: center; padding: 0 16px; }
.quote-text { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 1.85rem); color: #fff; line-height: 1.4; font-weight: 500; margin-bottom: 22px; font-style: normal; letter-spacing: -0.005em; }
.quote-author { font-size: 13px; color: rgba(255,255,255,0.65); letter-spacing: 0.6px; text-transform: uppercase; font-weight: 600; }
.quote-author strong { color: #fff; font-weight: 700; margin-right: 10px; }
.initiative-hint { text-align: center; margin-top: 24px; font-size: 14px; color: rgba(255,255,255,0.7); }
.initiative-hint a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 1px; transition: border-color 0.15s; margin-left: 6px; }
.initiative-hint a:hover { border-color: #fff; }
.career-promise { display: flex; gap: 24px; margin: 36px 0 48px; flex-wrap: wrap; }
.promise { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #fff; font-weight: 500; }
.promise-check { width: 24px; height: 24px; background: var(--emc-bordeaux); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.promise-check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.5; }
.jobs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 32px; }
.job { background: #fff; border: 1px solid var(--emc-border); border-radius: 0; padding: 28px; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; position: relative; }
.job:hover { border-color: var(--emc-blue); transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(0,0,0,0.35); }
body:not(.page-karriere) .job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; min-height: 22px; }
.job-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; background: var(--emc-blue-50); color: var(--emc-blue); padding: 4px 10px; border-radius: 0; flex-shrink: 0; }
.job-tag.ausbildung { background: #FFE9A8; color: #6B4F00; }
.job-tag.quereinstieg { background: #E1F4DC; color: #2E6E1A; }
.job-tag.fuehrung { background: #F2DFE3; color: var(--emc-bordeaux-dark); }
.job-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.job-badge-new { font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; background: #25D366; color: #fff; padding: 3px 7px; border-radius: 0; flex-shrink: 0; }
.job h3 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--emc-text); text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.15; margin: 0; }
.job-card-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--emc-text-muted); }
.job-card-meta span { display: flex; align-items: center; gap: 6px; }
body:not(.page-karriere) .job-card-meta svg { width: 14px; height: 14px; stroke: var(--emc-text-light); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body:not(.page-karriere) .job-card-cta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--emc-border); padding-top: 16px; margin-top: auto; }
body:not(.page-karriere) .job-card-cta-text { font-size: 12.5px; font-weight: 700; color: var(--emc-blue); letter-spacing: 0.6px; text-transform: uppercase; }
.job-card-cta-arrow { font-size: 22px; font-weight: 500; color: var(--emc-blue); transition: transform 0.2s; }
.job:hover .job-card-cta-arrow { transform: translateX(4px); }
.apply-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.apply-card { background: var(--emc-blue-dark); border: 1px solid var(--emc-blue-light); border-radius: 0; padding: 36px 32px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; }
.apply-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.apply-icon.form { background: var(--emc-bordeaux); }
.apply-icon.wa { background: #25D366; }
.apply-icon svg { width: 26px; height: 26px; }
.apply-icon.wa svg { width: 32px; height: 32px; fill: #fff; }
.apply-icon.form svg { fill: none; stroke: #fff; }
.apply-card h3 { font-size: 24px; font-weight: 600; color: #fff; margin-bottom: 0; }
.apply-card p { font-size: 15px; color: rgba(255,255,255,0.82); line-height: 1.65; }
.apply-features { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.apply-feature { font-size: 14px; color: rgba(255,255,255,0.92); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.apply-feature::before { content: ''; width: 6px; height: 6px; background: var(--emc-bordeaux); border-radius: 50%; margin-top: 8px; flex-shrink: 0; }
.apply-card.whatsapp .apply-feature::before { background: #25D366; }
.apply-hint { font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.3px; margin-top: 4px; font-style: italic; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-image { height: 440px; border-radius: 0; overflow: hidden; border: 1px solid var(--emc-border); position: relative; }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bild rechts statt links. Nur ab Tablet-Breite – sobald das Raster einspaltig
   wird, soll das Bild wieder zuerst kommen, sonst steht es unter dem Text. */
@media (min-width: 961px) {
  .about-reverse .about-image { order: 2; }
  .about-reverse .about-text  { order: 1; }
}
.about-text h2 { margin-bottom: 18px; }
.about-text p { font-size: 16px; color: var(--emc-text-muted); line-height: 1.75; margin-bottom: 16px; }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.about-stat { padding: 18px 22px; background: var(--emc-bg); border-left: 3px solid var(--emc-blue); }
.about-stat-label { display: block; font-size: 11px; color: var(--emc-text-muted); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; }
.about-stat-value { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--emc-text); text-transform: uppercase; letter-spacing: 0.3px; }
.ref-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* Referenzen sind reine Anzeige, nicht klickbar – daher kein
   Hover-Effekt und kein Zeigefinger-Cursor. */
.ref { position: relative; background: var(--emc-bg); border-radius: 0; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.ref-image { height: 280px; overflow: hidden; border-bottom: 1px solid var(--emc-border); position: relative; }
.ref-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref-info { padding: 22px 24px; }
.ref-tag { font-size: 11px; color: var(--emc-blue); letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 8px; font-weight: 700; }
.ref-info h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--emc-text); }
.ref-info p { font-size: 14px; color: var(--emc-text-muted); }
.contact-cta { position: relative; color: #fff; padding: 80px 0; overflow: hidden; background: #D62A1B; }
.contact-cta::after { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--emc-blue); clip-path: polygon(calc(50% + var(--slant, 205px)) 0, 100% 0, 100% 100%, calc(50% - var(--slant, 205px)) 100%); }
.contact-cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.contact-cta h2 { color: #fff; font-size: clamp(2.25rem, 3.5vw, 3rem); margin-bottom: 14px; max-width: 8.5em; }
.contact-cta-text { color: #fff; font-size: 17px; line-height: 1.65; max-width: 30ch; }
.contact-info { display: flex; flex-direction: column; gap: 18px; padding-left: 96px; }
.contact-row { display: flex; align-items: center; gap: 16px; text-decoration: none; color: #fff; transition: transform 0.2s; }
.contact-row:hover { transform: translateX(4px); }
.contact-icon { width: 44px; height: 44px; background: rgba(0,0,0,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-icon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.contact-row-text { display: flex; flex-direction: column; }
.contact-label { font-size: 11px; color: rgba(255,255,255,0.85); letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600; }
.contact-value { font-size: 17px; color: #fff; font-weight: 600; }
.footer { position: relative; background: var(--emc-blue-dark); color: rgba(255,255,255,0.75); overflow: hidden; }
.footer-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 16px; padding: 30px 0; min-height: 96px; }
.footer-left { display: flex; align-items: center; gap: 14px; }
.footer-logo { height: 40px; width: auto; display: block; opacity: 0.95; }
.footer-left-text { display: flex; flex-direction: column; gap: 8px; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: #fff; text-decoration: none; opacity: 0.9; transition: opacity 0.2s; }
.footer-links a:hover { opacity: 1; }
.footer-contact { display: flex; flex-direction: column; gap: 6px; text-align: right; align-items: flex-end; }
.footer-contact a { color: rgba(255,255,255,0.92); text-decoration: none; transition: color 0.2s; display: flex; align-items: center; gap: 8px; }
.footer-contact a:hover { color: #fff; }
.footer-contact .fc-phone { font-size: 16px; font-weight: 600; color: #fff; }
.footer-contact svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
@media (max-width: 960px) {
  body:not(.page-karriere) .nav, body:not(.page-karriere) .header-cta .phone-link { display: none; }
  body:not(.page-karriere) .mobile-toggle { display: block; }
  body:not(.page-karriere) .hero-text { padding: 0 24px; max-width: 100%; }
  body:not(.page-karriere) .hero-overlay { background:
      linear-gradient(180deg, rgba(15,57,99,0.85) 0%, rgba(15,57,99,0.75) 50%, rgba(0,0,0,0.5) 100%); }
  body:not(.page-karriere) .trust-grid { grid-template-columns: repeat(2, 1fr); padding: 28px 0; gap: 32px 16px; }
  body:not(.page-karriere) .trust-item:nth-child(2) { border-right: none; }
  .services-grid, .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .jobs-grid { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; gap: 32px; }
  .about-image { height: 280px; }
  .career-mobile { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .phone-mock { margin: 0 auto; }
  .apply-options { grid-template-columns: 1fr; }
  .career-header { grid-template-columns: 1fr; gap: 32px; }
  .career-header-image { height: 240px; }
  .benefits-bar { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  body:not(.page-karriere) .contact-cta { padding: 56px 0; }
  body:not(.page-karriere) .contact-cta::after { clip-path: polygon(100% calc(100% - var(--slant-narrow, 200px)), 100% 100%, calc(100% - var(--slant-narrow, 200px)) 100%); }
  body:not(.page-karriere) .contact-cta-inner { grid-template-columns: 1fr; gap: 30px; max-width: 78%; }
  body:not(.page-karriere) .contact-info { padding-left: 0; }
  body:not(.page-karriere) .contact-cta h2 { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  body:not(.page-karriere) .contact-cta-text { font-size: 14.5px; }
  body:not(.page-karriere) .container { padding: 0 24px; }
  body:not(.page-karriere) .header-inner { padding: 0 24px; height: 64px; }
  body:not(.page-karriere) .logo-img { height: 64px; }
  body:not(.page-karriere) .section { padding: 64px 0; }
  .career { padding: 64px 0; }
  body:not(.page-karriere) .section-head { margin-bottom: 36px; }
}
@media (max-width: 540px) {
  .services-grid, .ref-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .career-promise { gap: 12px; }
  .promise { font-size: 14px; }
  .benefits-bar { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .benefit-icon { width: 52px; height: 52px; }
  .benefit-icon svg { width: 28px; height: 28px; }
  .benefit-text { font-size: 14px; }
}
@media (max-width: 860px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 0; min-height: 0; }
  .footer-contact { text-align: left; align-items: flex-start; }
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
body:not(.page-karriere) .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.08s; }
body:not(.page-karriere) .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
body:not(.page-karriere) .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.24s; }
body:not(.page-karriere) .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.32s; }
body:not(.page-karriere) .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-bg img { transform: none !important; }
}

/* ========== KARRIERESEITE – abweichende Variablen ========== */
body.page-karriere {
  --emc-card-fill: #FFFFFF;
  --emc-bg-warm: #EAF2FA;
}

/* ========== KARRIERESEITE ========== */
.btn-lg { padding: 14px 26px; font-size: 15px; }
body.page-karriere .btn-wrap { position: relative; display: inline-flex; border-radius: 0; }
body.page-karriere .hero { position: relative; color: #fff; overflow: hidden; background: var(--emc-blue); min-height: var(--hero-sub-h); }
body.page-karriere .hero-bg img { width: 100%; height: 130%; object-fit: cover; display: block; filter: brightness(0.85) contrast(1.05) saturate(0.85); will-change: transform; }
body.page-karriere .hero-overlay { position: absolute; inset: 0; z-index: 1; background:
    linear-gradient(95deg, rgba(15,57,99,0.92) 0%, rgba(15,57,99,0.78) 35%, rgba(15,57,99,0.45) 65%, rgba(15,57,99,0.15) 100%),
    linear-gradient(180deg, rgba(15,57,99,0.1) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%); }
body.page-karriere .hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; min-height: var(--hero-sub-h); display: flex; align-items: center; }
body.page-karriere .hero-text { padding: 0 32px; max-width: 760px; }
body.page-karriere .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.92); margin-bottom: 24px; display: inline-block; }
body.page-karriere .hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); font-weight: 600; margin-bottom: 26px; letter-spacing: 0; text-transform: uppercase; line-height: 1.05; max-width: 11em; }
body.page-karriere .hero-lead { font-size: 18px; color: rgba(255,255,255,0.88); margin-bottom: 36px; max-width: 540px; line-height: 1.65; }
body.page-karriere .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
body.page-karriere .trust-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--emc-blue); letter-spacing: -0.01em; line-height: 1; }
.section.warm { background: var(--emc-bg-warm); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.benefit-card { position: relative; background: transparent; border: none; padding: 32px 28px; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.benefit-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--emc-card-border); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); transition: background 0.2s; }
.benefit-card::after { content: ''; position: absolute; inset: 1px; z-index: 1; background: var(--emc-card-fill); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%); }
.benefit-card > * { position: relative; z-index: 2; }
.benefit-card:hover::before { background: var(--emc-blue); }
.benefit-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px -12px rgba(0,99,175,0.2); }
.benefit-card-icon { width: 64px; height: 64px; background: var(--emc-blue-50); border-radius: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.benefit-card-icon svg { width: 36px; height: 36px; stroke: var(--emc-blue); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-card h3 { font-size: 22px; font-weight: 600; color: var(--emc-text); margin-bottom: 12px; }
.benefit-card p { font-size: 14.5px; color: var(--emc-text-muted); line-height: 1.65; }
.benefits-extra { margin-top: 36px; padding: 22px 28px; background: var(--emc-card-fill); border: 1px solid var(--emc-card-border); border-radius: 0; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.benefits-extra-label { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--emc-blue); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
.benefits-extra-list { display: flex; gap: 22px; flex-wrap: wrap; }
.benefits-extra-list span { font-size: 14px; color: var(--emc-text); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.benefits-extra-list span::before { content: ''; width: 6px; height: 6px; background: var(--emc-bordeaux); border-radius: 50%; }
.culture { background: var(--emc-blue); color: #fff; padding: 100px 0; position: relative; overflow: hidden; }
.culture::before { content: ''; position: absolute; inset: 0; background:
    repeating-linear-gradient(45deg, transparent 0, transparent 80px, rgba(255,255,255,0.02) 80px, rgba(255,255,255,0.02) 81px); pointer-events: none; }
.culture > * { position: relative; z-index: 1; }
.culture .section-eyebrow { color: rgba(255,255,255,0.9); }
.culture h2 { color: #fff; font-size: clamp(2.25rem, 4vw, 3.25rem); margin-bottom: 16px; }
.culture .section-intro { color: rgba(255,255,255,0.82); }
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 64px; }
.quote-card { background: var(--emc-blue-mid); border: 1px solid var(--emc-blue-light); border-radius: 0; padding: 32px 30px; display: flex; flex-direction: column; gap: 22px; transition: all 0.2s; }
.quote-card:hover { background: var(--emc-blue-light); transform: translateY(-3px); }
.quote-mark { font-family: var(--font-display); font-size: 60px; line-height: 0.7; color: var(--emc-bordeaux-light); font-weight: 700; margin-bottom: -10px; margin-top: -8px; }
.quote-card p { font-family: var(--font-display); font-size: 19px; line-height: 1.4; color: #fff; font-weight: 500; flex-grow: 1; }
.quote-attr { display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(255,255,255,0.18); padding-top: 20px; }
.quote-photo { width: 48px; height: 48px; border-radius: 50%; background: var(--emc-blue-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.6); flex-shrink: 0; border: 1.5px dashed rgba(255,255,255,0.3); }
.quote-attr-text { display: flex; flex-direction: column; }
.quote-name { font-size: 14px; color: #fff; font-weight: 700; letter-spacing: 0.2px; }
.quote-role { font-size: 12px; color: rgba(255,255,255,0.7); letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600; }
.culture-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 36px 0 0; border-top: 1px solid rgba(255,255,255,0.15); }
.culture-fact { display: flex; flex-direction: column; gap: 6px; }
.culture-fact-num { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: #fff; line-height: 1; letter-spacing: -0.01em; }
.culture-fact-label { font-size: 14px; color: rgba(255,255,255,0.78); font-weight: 500; line-height: 1.4; }
.jobs-meta { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; flex-wrap: wrap; gap: 20px; }
.jobs-count { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--emc-blue); text-transform: uppercase; letter-spacing: 0.6px; }
.jobs-count .num { font-size: 22px; color: var(--emc-bordeaux); margin-right: 4px; }
.jobs-grid-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Stellenkarten verlinken auf das Stellenportal der Firmengruppe Tepe.
   Hover hebt die Karte an, faerbt den Rahmen blau und blendet unten
   rechts einen Pfeil ein – so ist die Klickbarkeit sichtbar. */
.job-card { background: transparent; border: none; padding: 28px 28px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; gap: 16px; position: relative; text-decoration: none; color: inherit; }
.job-card::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--emc-card-border); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); transition: background 0.2s; }
.job-card::after { content: ''; position: absolute; inset: 1px; z-index: 1; background: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%); }
.job-card > * { position: relative; z-index: 2; }
.job-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(0,99,175,0.22); }
.job-card:hover::before { background: var(--emc-blue); }
.job-card:focus-visible { outline: 3px solid var(--emc-bordeaux); outline-offset: 3px; }
/* Pfeil unten rechts, erscheint beim Ueberfahren */
.job-card .job-card-go {
  position: absolute; right: 24px; bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--emc-blue);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.job-card:hover .job-card-go, .job-card:focus-visible .job-card-go { opacity: 1; transform: translateX(0); }
.job-card .job-card-go svg {
  width: 14px; height: 14px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .job-card, .job-card .job-card-go { transition: none; }
  .job-card:hover { transform: none; }
}
body.page-karriere .job-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.job-badge-start { font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; background: var(--emc-bordeaux); color: #fff; padding: 3px 7px; border-radius: 0; flex-shrink: 0; }
.job-card h3 { font-size: 22px; font-weight: 600; color: var(--emc-text); letter-spacing: 0.2px; line-height: 1.2; margin: 0; }
body.page-karriere .job-card-meta svg { width: 14px; height: 14px; stroke: var(--emc-text-light); fill: none; stroke-width: 1.6; stroke-linecap: round; }
.no-job-hint { margin-top: 28px; text-align: center; font-size: 15px; color: var(--emc-text-muted); }
.no-job-hint a { color: var(--emc-blue); font-weight: 600; text-decoration: none; transition: color 0.2s; margin-left: 6px; }
.no-job-hint a:hover { color: var(--emc-blue-dark); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 8px; }
.tl-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* Verbindungslinie: pro Schritt ein Stueck vom Kreisrand bis kurz vor
   den naechsten Kreis. Sitzt dadurch immer auf Kreismitte (28px),
   unabhaengig von Spaltenbreite und Abstand. */
.tl-step::after {
  content: '';
  position: absolute;
  top: 27px;
  left: 68px;
  right: -16px;
  height: 2px;
  background: var(--emc-blue);
  opacity: 0.25;
}
.tl-step:last-child::after { display: none; }
.tl-step-num { width: 56px; height: 56px; background: var(--emc-blue); border: 2px solid var(--emc-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: #fff; flex-shrink: 0; }
.tl-step-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--emc-bordeaux); letter-spacing: 0.6px; text-transform: uppercase; }
.tl-step h3 { font-size: 19px; font-weight: 600; color: var(--emc-text); margin: -10px 0 0; }
.tl-step p { font-size: 14.5px; color: var(--emc-text-muted); line-height: 1.6; }
.apply-options-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.apply-card-2 { background: var(--emc-blue); border: none; border-radius: 0; padding: 32px 30px; display: flex; flex-direction: column; gap: 16px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); }
.apply-icon-2 { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.apply-icon-2.form { background: var(--emc-bordeaux); }
.apply-icon-2.wa { background: #25D366; }
.apply-icon-2 svg { width: 26px; height: 26px; }
.apply-icon-2.wa svg { width: 30px; height: 30px; fill: #fff; }
.apply-icon-2.form svg { fill: none; stroke: #fff; }
.apply-card-2 h3 { font-size: 22px; font-weight: 600; color: #fff; }
.apply-card-2 p { font-size: 14.5px; color: rgba(255,255,255,0.82); line-height: 1.6; }
.apply-features-2 { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.apply-feature-2 { font-size: 13.5px; color: rgba(255,255,255,0.92); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.apply-feature-2::before { content: ''; width: 5px; height: 5px; background: var(--emc-bordeaux-light); border-radius: 50%; margin-top: 8px; flex-shrink: 0; }
.apply-card-2.wa-card .apply-feature-2::before { background: #25D366; }
.apply-card-pin { margin-top: 4px; padding: 12px 14px; background: rgba(255,255,255,0.08); border-radius: 0; font-size: 12.5px; color: rgba(255,255,255,0.78); line-height: 1.55; }
.apply-card-pin strong { color: #fff; font-weight: 700; }
.apply-cta-wa { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; background: #25D366; color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none; text-align: center; line-height: 1.3; transition: background 0.2s; }
.apply-cta-wa:hover { background: #1DA851; }
.apply-cta-wa svg { width: 20px; height: 20px; fill: #fff; flex-shrink: 0; }
/* Innenabstand liegt komplett auf dem Kasten, damit er rundum
   gleich gross ist. Die Spalten selbst bekommen kein Padding. */
.contact-person { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--emc-border); border-radius: 0; padding: 36px; position: relative; }
.contact-person-photo { height: 360px; border-radius: 0; background: linear-gradient(135deg, #E5EFF7 0%, #CFDFF0 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
/* Das Foto füllt die Fläche und wird zugeschnitten (Fokuspunkt über object-position aus bild.php). */
.contact-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-person-photo::after { content: ''; position: absolute; inset: 0; background-image:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(0,99,175,0.08), transparent 55%); pointer-events: none; }
.photo-placeholder { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--emc-blue); }
.photo-placeholder svg { width: 76px; height: 76px; stroke: var(--emc-blue); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4; }
.photo-placeholder-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--emc-blue); opacity: 0.6; }
.contact-person-info { padding: 0; }
.contact-person-info .role { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--emc-bordeaux); text-transform: uppercase; margin-bottom: 10px; }
.contact-person-info h3 { font-size: 32px; font-weight: 600; color: var(--emc-text); margin-bottom: 6px; }
.contact-person-info .position-line { font-size: 16px; color: var(--emc-text-muted); margin-bottom: 22px; }
.contact-person-info p.intro { font-size: 15.5px; color: var(--emc-text-muted); line-height: 1.7; margin-bottom: 28px; }
.contact-person.no-photo { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }

/* Ansprechpartner-Uebersicht (Kontaktseite) */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.team-card { display: flex; flex-direction: column; background: var(--emc-surface); border: 1px solid var(--emc-border); border-radius: 0; padding: 28px 26px; transition: border-color 0.2s, transform 0.2s; }
.team-card:hover { border-color: var(--emc-blue); transform: translateY(-3px); }
.team-card .team-role { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; color: var(--emc-bordeaux); text-transform: uppercase; margin-bottom: 10px; }
.team-card h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--emc-text); margin-bottom: 18px; }
.team-lines { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.team-line { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--emc-text); font-size: 14.5px; font-weight: 500; padding: 10px 14px; border: 1px solid var(--emc-border); transition: border-color 0.2s, color 0.2s; word-break: break-word; }
.team-line:hover { border-color: var(--emc-blue); color: var(--emc-blue); }
.team-line svg { width: 16px; height: 16px; stroke: var(--emc-blue); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.contact-rows-list { display: flex; flex-direction: column; gap: 12px; }
.contact-rowlist { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--emc-text); padding: 10px 0; border-top: 1px solid var(--emc-border); transition: color 0.2s; }
.contact-rowlist:hover { color: var(--emc-blue); }
.contact-rowlist-icon { width: 36px; height: 36px; background: var(--emc-blue-50); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-rowlist-icon svg { width: 16px; height: 16px; stroke: var(--emc-blue); fill: none; stroke-width: 1.7; stroke-linecap: round; }
.contact-rowlist-icon.wa { background: #25D366; }
.contact-rowlist-icon.wa svg { fill: #fff; stroke: none; }
.contact-rowlist-text { display: flex; flex-direction: column; }
.contact-rowlist-label { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--emc-text-light); font-weight: 600; }
.contact-rowlist-value { font-size: 15.5px; font-weight: 600; color: inherit; }
.faq-list { display: flex; flex-direction: column; max-width: 880px; margin: 0 auto; border-top: 1px solid var(--emc-border); }
.faq-item { border-bottom: 1px solid var(--emc-border); }
.faq-item summary { padding: 22px 4px; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--emc-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-transform: uppercase; letter-spacing: 0.3px; transition: color 0.2s; }
.faq-item summary:hover { color: var(--emc-blue); }
.faq-item[open] summary { color: var(--emc-blue); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; background: var(--emc-blue); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s; }
.faq-icon::before { width: 14px; height: 2px; }
.faq-icon::after { width: 2px; height: 14px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); opacity: 0; }
.faq-content { overflow: hidden; }
.faq-answer { padding: 4px 4px 26px; font-size: 15.5px; color: var(--emc-text-muted); line-height: 1.75; max-width: 760px; }
.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.faq-answer p + ul { margin-top: 4px; }
.faq-answer ul li { display: flex; align-items: flex-start; gap: 10px; }
.faq-answer ul li::before { content: ''; width: 5px; height: 5px; margin-top: 10px; background: var(--emc-bordeaux); border-radius: 50%; flex-shrink: 0; }
/* WhatsApp im Kontakt-Aufruf: gilt auf allen Seiten, nicht nur auf Karriere. */
.contact-icon.wa { background: #25D366; }
.contact-icon.wa svg { stroke: none; fill: #fff; width: 22px; height: 22px; }
/* Das Menue der Karriereseite klappt an derselben Grenze um wie ueberall
   (960 px). Mit 980 px gab es zwischen 961 und 980 px gar kein Menue: Die
   Leiste war schon aus, das mobile Menue ab 961 px noch gesperrt. */
@media (max-width: 960px) {
  body.page-karriere .nav, body.page-karriere .header-cta .phone-link { display: none; }
  body.page-karriere .mobile-toggle { display: block; }
}
@media (max-width: 980px) {
  body.page-karriere .hero-text { padding: 0 24px; max-width: 100%; }
  body.page-karriere .hero-overlay { background:
      linear-gradient(180deg, rgba(15,57,99,0.85) 0%, rgba(15,57,99,0.78) 50%, rgba(0,0,0,0.55) 100%); }
  body.page-karriere .trust-grid { grid-template-columns: repeat(2, 1fr); padding: 28px 0; gap: 28px 16px; }
  body.page-karriere .trust-item:nth-child(2) { border-right: none; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes-grid { grid-template-columns: 1fr; gap: 14px; }
  .culture-facts { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
  .jobs-grid-list { grid-template-columns: 1fr; }
  /* Ablauf-Schritte untereinander: Nummer links, Text rechts.
     Grid statt Flex, damit Label, Titel und Text nicht nebeneinander
     rutschen, sondern sauber neben der Nummer stehen bleiben. */
  .timeline { grid-template-columns: 1fr; gap: 0; }
  /* waagerechte Verbindung des Desktop-Layouts abschalten */
  .tl-step::after { display: none; }
  .tl-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 18px;
    row-gap: 4px;
    align-items: start;
    padding-bottom: 32px;
    position: relative;
  }
  /* senkrechte Verbindungslinie zwischen den Schritten */
  .tl-step::before {
    content: '';
    position: absolute;
    left: 23px; top: 56px; bottom: 8px;
    width: 2px; background: var(--emc-blue); opacity: 0.2;
  }
  .tl-step:last-child { padding-bottom: 0; }
  .tl-step:last-child::before { display: none; }
  .tl-step-num { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; font-size: 18px; }
  .tl-step-label { grid-column: 2; grid-row: 1; }
  .tl-step h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .tl-step p { grid-column: 2; grid-row: 3; margin-top: 4px; }
  .apply-options-2 { grid-template-columns: 1fr; }
  .apply-cta-wa { font-size: 13.5px; padding: 13px 14px; }
  .contact-person { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .contact-person.no-photo { max-width: none; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card { padding: 24px 22px; }
  .contact-person-photo { height: 280px; border-radius: 0; }
  .contact-person-info { padding: 0; }
  .contact-person-info h3 { font-size: 26px; }
  body.page-karriere .container { padding: 0 24px; }
  body.page-karriere .header-inner { padding: 14px 24px; }
  body.page-karriere .section { padding: 64px 0; }
  .culture { padding: 64px 0; }
  body.page-karriere .section-head { margin-bottom: 36px; }
  body.page-karriere .contact-cta { padding: 56px 0; }
  body.page-karriere .contact-cta::after { clip-path: polygon(100% calc(100% - var(--slant-narrow, 200px)), 100% 100%, calc(100% - var(--slant-narrow, 200px)) 100%); }
  body.page-karriere .contact-cta-inner { grid-template-columns: 1fr; gap: 30px; max-width: 78%; }
  body.page-karriere .contact-info { padding-left: 0; }
  body.page-karriere .contact-cta h2 { font-size: clamp(1.5rem, 5vw, 2.25rem); }
  body.page-karriere .contact-cta-text { font-size: 14.5px; }
}
@media (max-width: 540px) {
  .benefits-grid { grid-template-columns: 1fr; }
  body.page-karriere .footer-inner { flex-direction: column; align-items: flex-start; }
  .jobs-meta { flex-direction: column; align-items: flex-start; }
  .benefits-extra { flex-direction: column; align-items: flex-start; gap: 14px; }
  .faq-item summary { font-size: 16px; padding: 18px 20px; }
  .faq-answer { padding: 0 20px 22px; }
}
body.page-karriere .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.06s; }
body.page-karriere .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.12s; }
body.page-karriere .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.18s; }
body.page-karriere .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.24s; }
body.page-karriere .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.3s; }
body.page-karriere .reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.36s; }
body.page-karriere .reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.42s; }

/* ============================================================
   MOBILE NAVIGATION – auf allen Seiten
   Der Menue-Button war ohne Funktion; unter 960px gab es damit
   gar keine Navigation. Das Panel klappt unter dem Header auf.
   ============================================================ */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--emc-blue-dark);
  display: none;
  flex-direction: column;
  justify-content: center;
  padding: 88px 32px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  display: block;
  padding: 16px 0;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.active { color: var(--emc-bordeaux-light); }
.mobile-nav .mobile-nav-phone {
  margin-top: 28px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  color: #fff;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--emc-bordeaux);
  padding: 14px 22px;
  align-self: flex-start;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
/* Schliessen-Kreuz oben rechts, innerhalb der Vollbildflaeche */
.mobile-nav-close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-close svg {
  width: 28px; height: 28px;
  stroke: #fff; fill: none;
  stroke-width: 2; stroke-linecap: round;
}
/* Hintergrund nicht mitscrollen lassen, solange das Menue offen ist */
body.nav-open { overflow: hidden; }

@media (min-width: 961px) {
  .mobile-nav, .mobile-nav.open { display: none; }
  body.nav-open { overflow: visible; }
}

/* ============================================================
   KONTAKTSEITE
   ============================================================ */

.purpose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.purpose {
  background: var(--emc-card-fill); border: 1px solid var(--emc-card-border);
  padding: 36px 32px; display: flex; flex-direction: column;
  position: relative; transition: border-color 0.25s, transform 0.25s;
}
.purpose:hover { border-color: var(--emc-blue); transform: translateY(-3px); }
.purpose-icon {
  width: 48px; height: 48px; display: flex;
  align-items: center; justify-content: center;
  background: var(--emc-blue); margin-bottom: 22px;
}
.purpose-icon svg {
  width: 24px; height: 24px; stroke: #fff; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.purpose h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; margin-bottom: 10px; }
.purpose > p { color: var(--emc-text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.purpose-lines { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.purpose-line {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--emc-text);
  font-weight: 600; font-size: 15px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--emc-border);
  transition: border-color 0.2s, color 0.2s; word-break: break-word;
}
.purpose-line:hover { border-color: var(--emc-blue); color: var(--emc-blue); }
.purpose-line svg {
  width: 17px; height: 17px; stroke: var(--emc-blue); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

.anfahrt { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; }
.anfahrt-map { position: relative; }
.anfahrt-map img {
  width: 100%; height: 380px; object-fit: cover;
  display: block; border: 1px solid var(--emc-border);
}
.map-credit { font-size: 11px; color: var(--emc-text-light); margin-top: 8px; }
.map-credit a { color: var(--emc-text-light); }
.map-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  font-size: 14px; font-weight: 600; color: var(--emc-blue); text-decoration: none;
}
.map-link:hover { text-decoration: underline; }
.map-link svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.info-block { margin-bottom: 30px; }
.info-block:last-child { margin-bottom: 0; }
.info-block h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--emc-blue); margin-bottom: 10px;
}
.info-block address { font-style: normal; font-size: 17px; line-height: 1.7; color: var(--emc-text); }
.hours-table { display: flex; flex-direction: column; gap: 8px; }
.hours-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--emc-border);
}
.hours-row:last-child { border-bottom: none; padding-bottom: 0; }
.hours-row span:first-child { color: var(--emc-text-muted); }
.hours-row span:last-child { font-weight: 600; }

@media (max-width: 960px) {
  .purpose-grid { grid-template-columns: 1fr; }
  .anfahrt { grid-template-columns: 1fr; gap: 32px; }
  .anfahrt-map img { height: 280px; }
}
@media (max-width: 700px) {
  .purpose { padding: 28px 22px; }
}

/* Kartenlinks: Google Maps als Hauptweg, OpenStreetMap dezent daneben */
.map-links { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.map-link.subtle { color: var(--emc-text-muted); font-weight: 500; }
.map-link.subtle:hover { color: var(--emc-blue); }

/* .service-cta wird auf Unterseiten als Link verwendet – Browser-Unterstreichung unterdruecken */
a.service-cta { text-decoration: none; }

/* Faktenliste in Karten (Ueber uns) */
.fact-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.fact-list li {
  position: relative; padding-left: 18px;
  font-size: 15px; color: var(--emc-text); font-weight: 600;
}
.fact-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 2px; background: var(--emc-bordeaux);
}

/* ============================================================
   UNTERSEITEN-HERO
   Einheitlicher Kopf fuer alle Unterseiten – gleicher Aufbau wie
   der Hero der Karriereseite, nur flacher: Bild, blauer Verlauf,
   Eyebrow, Headline, Lead.
   ============================================================ */
.subhero { position: relative; color: #fff; overflow: hidden; background: var(--emc-blue-dark); }
.subhero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.subhero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.9) contrast(1.05) saturate(0.85);
}
.subhero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(95deg, rgba(15,57,99,0.94) 0%, rgba(15,57,99,0.82) 35%, rgba(15,57,99,0.5) 65%, rgba(15,57,99,0.2) 100%),
    linear-gradient(180deg, rgba(15,57,99,0.15) 0%, transparent 35%, transparent 70%, rgba(0,0,0,0.35) 100%);
}
.subhero-inner {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto;
  min-height: var(--hero-sub-h); display: flex; align-items: center;
}
.subhero-text { padding: 0 32px; max-width: 760px; }
.subhero-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(255,255,255,0.9);
  margin-bottom: 22px; display: inline-block;
}
.subhero h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: 600; line-height: 1.05; margin-bottom: 22px;
}
.subhero-lead {
  font-size: 18px; line-height: 1.65;
  color: rgba(255,255,255,0.87); max-width: 580px;
}
/* align-items bleibt auf stretch (wie .hero-buttons der Karriereseite),
   damit gefuellter Button und Ghost-Button trotz dessen 2px-Rahmen
   auf gleiche Hoehe kommen. Der Hinweistext wird separat zentriert. */
.subhero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

@media (max-width: 960px) {
  .subhero-text { padding: 0 24px; max-width: 100%; }
  .subhero-overlay {
    background: linear-gradient(180deg, rgba(15,57,99,0.88) 0%, rgba(15,57,99,0.78) 50%, rgba(0,0,0,0.5) 100%);
  }
}

/* ============================================================
   LEISTUNGSSEITE – abwechselnd Bild und Text
   ============================================================ */
.svc-list { display: flex; flex-direction: column; gap: 90px; }
.svc { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.svc:nth-child(even) .svc-media { order: 2; }
.svc-media img {
  width: 100%; height: 420px; object-fit: cover;
  display: block; border: 1px solid var(--emc-border);
}
.svc-text h2 { font-size: clamp(1.85rem, 3vw, 2.5rem); margin-bottom: 18px; }
.svc-text p { color: var(--emc-text-muted); font-size: 16px; line-height: 1.75; margin-bottom: 16px; }
.svc-text p:last-of-type { margin-bottom: 0; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.svc-tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--emc-blue);
  background: var(--emc-blue-50); padding: 7px 12px;
}

@media (max-width: 960px) {
  .svc-list { gap: 56px; }
  .svc { grid-template-columns: 1fr; gap: 28px; }
  .svc:nth-child(even) .svc-media { order: 0; }
  .svc-media img { height: 280px; }
}

/* Tepe-Panorama: Quelle ist nur 340px hoch. Rahmenhoehe darauf
   begrenzen, damit nicht hochskaliert und dadurch unscharf wird.
   Ausschnitt liegt auf dem Gebaeude statt mittig. */
.about-tepe .about-image { height: 340px; }
@media (max-width: 960px) {
  .about-tepe .about-image { height: 240px; }
}

/* Textlink mit Pfeil-Symbol (z. B. Verweis auf tepe.de) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--emc-blue);
  text-decoration: none;
  transition: color 0.2s;
}
.text-link:hover { color: var(--emc-blue-dark); text-decoration: underline; }
.text-link svg {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}

/* ============================================================
   BEWERBUNGS-ABLAUF – Schritt-fuer-Schritt-Aufbau
   Die Schritte blenden nacheinander ein, dazwischen waechst
   jeweils die Verbindungslinie zum naechsten Schritt.
   Ausgeloest durch .in-view, das der Scroll-Beobachter setzt.
   ============================================================ */

/* langsamerer Takt als bei den uebrigen Rastern, damit die Abfolge lesbar ist */
body.page-karriere .timeline.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
body.page-karriere .timeline.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.35s; }
body.page-karriere .timeline.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.70s; }
body.page-karriere .timeline.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 1.05s; }

/* Nummernkreis kommt mit einem kurzen Aufploppen */
.timeline .tl-step-num { transform: scale(0.8); opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.35s ease; }
.timeline.in-view .tl-step-num { transform: scale(1); opacity: 1; }
.timeline.in-view .tl-step:nth-child(1) .tl-step-num { transition-delay: 0.10s; }
.timeline.in-view .tl-step:nth-child(2) .tl-step-num { transition-delay: 0.45s; }
.timeline.in-view .tl-step:nth-child(3) .tl-step-num { transition-delay: 0.80s; }
.timeline.in-view .tl-step:nth-child(4) .tl-step-num { transition-delay: 1.15s; }

/* Verbindungslinie waechst von links nach rechts in den naechsten Schritt */
.timeline .tl-step::after { transform: scaleX(0); transform-origin: left center; transition: transform 0.4s ease-out; }
.timeline.in-view .tl-step::after { transform: scaleX(1); }
.timeline.in-view .tl-step:nth-child(1)::after { transition-delay: 0.25s; }
.timeline.in-view .tl-step:nth-child(2)::after { transition-delay: 0.60s; }
.timeline.in-view .tl-step:nth-child(3)::after { transition-delay: 0.95s; }

@media (max-width: 980px) {
  /* untereinander: Linie waechst von oben nach unten */
  .timeline .tl-step::before { transform: scaleY(0); transform-origin: center top; transition: transform 0.4s ease-out; }
  .timeline.in-view .tl-step::before { transform: scaleY(1); }
  .timeline.in-view .tl-step:nth-child(1)::before { transition-delay: 0.25s; }
  .timeline.in-view .tl-step:nth-child(2)::before { transition-delay: 0.60s; }
  .timeline.in-view .tl-step:nth-child(3)::before { transition-delay: 0.95s; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline .tl-step-num,
  .timeline .tl-step::after,
  .timeline .tl-step::before {
    transform: none !important;
    opacity: 1;
    transition: none !important;
  }
  .timeline .tl-step-num { opacity: 1; }
}

/* ==========================================================================
   Cookie-Banner
   Die drei Schaltflaechen sind bewusst identisch gestaltet: gleiche Groesse,
   gleiche Farbe, gleicher Kontrast. Ablehnen muss genauso leicht fallen wie
   Zustimmen – ein hervorgehobener Zustimmungs-Button waere unzulaessig.
   ========================================================================== */
.consent { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; padding: 20px; background: rgba(15, 57, 99, 0.42); backdrop-filter: blur(2px); }
.consent[hidden] { display: none; }
.consent-box { width: 100%; max-width: 640px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--emc-surface); border: 1px solid var(--emc-border); border-top: 4px solid var(--emc-blue); padding: 30px 32px; box-shadow: 0 18px 50px rgba(15, 57, 99, 0.22); }
.consent-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--emc-text); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 12px; }
.consent-text { font-size: 14.5px; line-height: 1.65; color: var(--emc-text-muted); }
.consent-text p { margin-bottom: 10px; }
.consent-text p:last-child { margin-bottom: 0; }

.consent-details { margin-top: 20px; border-top: 1px solid var(--emc-border); padding-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.consent-details[hidden] { display: none; }
.consent-cat-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.consent-cat-head input { width: 17px; height: 17px; accent-color: var(--emc-blue); flex-shrink: 0; }
.consent-cat-head input:disabled { cursor: not-allowed; }
.consent-cat-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--emc-text); text-transform: uppercase; letter-spacing: 0.4px; }
.consent-cat-fix { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--emc-text-light); font-weight: 600; }
.consent-cat-text { margin-top: 6px; padding-left: 27px; font-size: 13.5px; line-height: 1.6; color: var(--emc-text-muted); }

.consent-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
/* Alle Buttons teilen exakt dieselben Werte – bitte nicht einzeln ueberschreiben. */
.consent-btn { flex: 1 1 180px; min-height: 48px; padding: 13px 18px; font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--emc-text); background: var(--emc-surface); border: 1.5px solid var(--emc-text); border-radius: 0; cursor: pointer; transition: background 0.18s, color 0.18s; }
.consent-btn:hover { background: var(--emc-text); color: var(--emc-surface); }
.consent-btn:focus-visible { outline: 3px solid var(--emc-blue); outline-offset: 2px; }
.consent-btn[hidden] { display: none; }

.consent-legal { margin-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.consent-legal a { font-size: 13px; color: var(--emc-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.consent-legal a:hover { color: var(--emc-blue); }

@media (max-width: 640px) {
  .consent { padding: 0; align-items: flex-end; }
  .consent-box { max-width: none; padding: 24px 20px; border-left: none; border-right: none; border-bottom: none; max-height: 88vh; }
  .consent-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .consent { backdrop-filter: none; }
}

/* Sprungmarke: nur sichtbar, solange sie den Fokus hat. Erspart Tastatur-
   und Screenreader-Nutzern, sich durch die Navigation zu hangeln. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 14px 20px; background: var(--emc-blue); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.skip-link:focus { left: 0; }

/* ==========================================================================
   Freitext-Sektion
   Fliesstext aus dem Writer-Feld. Absaetze, Zwischenueberschriften und
   Listen bekommen hier ihre Form – ohne diese Regeln faellt der Block auf
   die Browser-Voreinstellung zurueck.
   ========================================================================== */
.richtext { font-size: 16px; line-height: 1.75; color: var(--emc-text-muted); }
.richtext-schmal { max-width: 760px; }
.richtext > :first-child { margin-top: 0; }
.richtext > :last-child { margin-bottom: 0; }
.richtext p { margin-bottom: 18px; }

.richtext h2,
.richtext h3 { font-family: var(--font-display); font-weight: 600; color: var(--emc-text); text-transform: uppercase; letter-spacing: 0.3px; margin: 36px 0 12px; }
.richtext h2 { font-size: 26px; }
.richtext h3 { font-size: 21px; }
.richtext h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--emc-text); text-transform: uppercase; letter-spacing: 0.4px; margin: 28px 0 10px; }

.richtext ul,
.richtext ol { margin: 0 0 18px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.richtext li { display: flex; align-items: flex-start; gap: 11px; }
.richtext ul li::before { content: ''; width: 5px; height: 5px; margin-top: 10px; background: var(--emc-bordeaux); border-radius: 50%; flex-shrink: 0; }
.richtext ol { counter-reset: richtext-zaehler; }
.richtext ol li { counter-increment: richtext-zaehler; }
.richtext ol li::before { content: counter(richtext-zaehler) "."; color: var(--emc-bordeaux); font-weight: 700; flex-shrink: 0; min-width: 18px; }

.richtext a { color: var(--emc-blue); text-decoration: underline; text-underline-offset: 3px; }
.richtext a:hover { color: var(--emc-blue-dark); }
.richtext strong { color: var(--emc-text); font-weight: 700; }
.richtext em { font-style: italic; }

@media (max-width: 760px) {
  .richtext { font-size: 15.5px; }
  .richtext h2 { font-size: 22px; }
  .richtext h3 { font-size: 19px; }
}

/* ==========================================================================
   Block-Einstellungen (Tab "Einstellungen" im Panel)

   Diese drei Abstands-Klassen tragen bewusst !important. Die Grundregeln für
   .section stehen teils hinter zusammengesetzten Selektoren wie
   "body:not(.page-karriere) .section", die spezifischer sind als jede
   einzelne Klasse. Ohne !important bliebe die Einstellung im Panel wirkungslos.
   ========================================================================== */
.blk-abstand-kompakt { padding-top: 56px !important; padding-bottom: 56px !important; }
.blk-abstand-gross   { padding-top: 140px !important; padding-bottom: 140px !important; }
.blk-abstand-ohne    { padding-top: 0 !important; padding-bottom: 0 !important; }

@media (max-width: 900px) {
  .blk-abstand-kompakt { padding-top: 40px !important; padding-bottom: 40px !important; }
  .blk-abstand-gross   { padding-top: 88px !important; padding-bottom: 88px !important; }
}

/* Silbentrennung greift nur mit gesetzter Sprache – die steht am <html>. */
.blk-trennung { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* ==========================================================================
   Fehlerseite (404)
   ========================================================================== */
.fehler { padding: 78px 0 92px; background: var(--emc-bg); }
.fehler-inner { max-width: 720px; margin: 0 auto; text-align: center; }

.fehler-code { display: block; font-family: var(--font-display); font-size: clamp(62px, 12vw, 132px); font-weight: 700; line-height: 1; letter-spacing: 2px; color: var(--emc-blue); opacity: 0.15; margin-bottom: 12px; }
.fehler h1 { font-size: clamp(1.7rem, 4.4vw, 2.9rem); font-weight: 600; color: var(--emc-text); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.3px; }
.fehler-text { font-size: 16.5px; line-height: 1.7; color: var(--emc-text-muted); max-width: 540px; margin: 0 auto; }

.fehler-grafik { display: block; width: 100%; height: auto; margin: 42px 0 38px; }

.fehler-aktion { border-top: 1px solid var(--emc-border); padding-top: 30px; }
.fehler-weiter { margin-top: 15px; font-size: 14px; color: var(--emc-text-light); min-height: 1.4em; }
.fehler-weiter [data-zahl] { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--emc-text-muted); }

@media (max-width: 700px) {
  .fehler { padding: 44px 0 54px; }
  .fehler-code { margin-bottom: 6px; }
  .fehler h1 { margin-bottom: 14px; }
  .fehler-text { font-size: 15.5px; line-height: 1.65; }

  /* Das flache Breitbild wird auf Telefonen zum dünnen Streifen. Feste Höhe
     plus preserveAspectRatio="slice" im SVG zeigt stattdessen den mittleren
     Ausschnitt – Absperrbake und Abbruchkante – in brauchbarer Größe. */
  .fehler-grafik { height: 156px; margin: 30px 0 26px; }

  .fehler-aktion { padding-top: 24px; }
  .fehler-aktion .btn { width: 100%; max-width: 320px; }
}

/* ==========================================================================
   FAQ – Aufklappen

   Die Bedienlogik haengt bewusst an keiner Animation: <details> oeffnet und
   schliesst nativ, das JavaScript sorgt nur dafuer, dass immer nur eine Frage
   offen ist. Alles Folgende ist Zugabe und darf ausfallen.
   ========================================================================== */

/* Symbol: das Plus dreht sich zum Minus. */
.faq-icon { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item[open] .faq-icon { transform: rotate(180deg); }

/* Frage und Antwort ruecken beim Ueberfahren und im geoeffneten Zustand
   leicht ein. Der Wert ist bewusst *relativ* zur Grundeinrueckung: auf dem
   Telefon betraegt die 20px, ein fester Wert wuerde den Text dort nach links
   ziehen statt nach rechts. */
.faq-item { --faq-einzug: 4px; }
.faq-item summary { transition: color 0.2s, padding-left 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-item summary:hover,
.faq-item[open] summary { padding-left: calc(var(--faq-einzug) + 8px); }
.faq-item[open] .faq-answer { padding-left: calc(var(--faq-einzug) + 8px); }

@media (max-width: 640px) {
  .faq-item { --faq-einzug: 20px; }
}

/* Rueckfallebene: sanftes Einblenden ohne Hoehenanimation. */
@keyframes faq-aufklappen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq-item[open] .faq-answer { animation: faq-aufklappen 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* Moderne Browser koennen die Hoehe von <details> selbst animieren – damit
   klappt es in beide Richtungen weich auf und zu, ganz ohne JavaScript.
   Wo das fehlt, bleibt es bei der Rueckfallebene darueber. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  :root { interpolate-size: allow-keywords; }

  .faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease,
      content-visibility 0.4s allow-discrete;
  }
  .faq-item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }

  /* Sonst liefe beides gleichzeitig. */
  .faq-item[open] .faq-answer { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon,
  .faq-item summary,
  .faq-item::details-content { transition: none; }
  .faq-item[open] .faq-answer { animation: none; }
  .faq-item[open] .faq-icon { transform: none; }
  .faq-item summary:hover,
  .faq-item[open] summary,
  .faq-item[open] .faq-answer { padding-left: var(--faq-einzug); }
}

/* ------------------------------------------------------------------
   Referenzkarten: Text buendig zur Bildkante
   Die abgeschnittene Ecke gehoerte bisher zur ganzen Karte und sass damit
   unsichtbar im Textbereich, wodurch der Text eingerueckt wirkte. Jetzt
   traegt das Bild den Zuschnitt, der Text sitzt buendig darunter.
   ------------------------------------------------------------------ */
.ref { clip-path: none; overflow: visible; background: transparent; }
.ref-image { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); border-bottom: 0; }
.ref-info { padding: 20px 0 12px; }

/* ------------------------------------------------------------------
   FAQ: Einrueckung beim Aufklappen wurde durch die Transition blockiert
   (der Wert blieb auf 4px haengen). Ohne Transition greift sie zuverlaessig.
   ------------------------------------------------------------------ */
.faq-item summary { transition: color 0.2s; }

/* ============================================================
   MOBILE MENUE – UEBERARBEITUNG
   Kopfzeile mit Logo bleibt ueber dem Overlay sichtbar, der
   Hamburger wird an gleicher Stelle zum X. Das Overlay blendet
   weich ein, die Punkte kommen leicht versetzt, Telefon und
   Button sitzen als Aktionen am unteren Rand.
   ============================================================ */
body.nav-open .header { z-index: 300; }
body.nav-open .header .btn-logo,
body.nav-open .header .phone-link { visibility: hidden; }

.mobile-toggle { position: relative; width: 44px; height: 44px; padding: 0; }
.mobile-toggle svg {
  position: absolute; inset: 0; margin: auto;
  transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-toggle .ico-close { opacity: 0; transform: rotate(-90deg) scale(0.6); }
body.nav-open .mobile-toggle .ico-menu  { opacity: 0; transform: rotate(90deg) scale(0.6); }
body.nav-open .mobile-toggle .ico-close { opacity: 1; transform: none; }

.mobile-nav {
  display: flex;
  justify-content: flex-start;
  padding: 96px 28px 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.32s;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s, 0s, 0s; }

.mobile-nav-links a { opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1); }
.mobile-nav.open .mobile-nav-links a { opacity: 1; transform: none; }
.mobile-nav.open .mobile-nav-links a:nth-child(1) { transition-delay: 0.06s; }
.mobile-nav.open .mobile-nav-links a:nth-child(2) { transition-delay: 0.11s; }
.mobile-nav.open .mobile-nav-links a:nth-child(3) { transition-delay: 0.16s; }
.mobile-nav.open .mobile-nav-links a:nth-child(4) { transition-delay: 0.21s; }
.mobile-nav.open .mobile-nav-links a:nth-child(5) { transition-delay: 0.26s; }
.mobile-nav.open .mobile-nav-links a:nth-child(n+6) { transition-delay: 0.3s; }

.mobile-nav-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 32px; }
.mobile-nav .mobile-nav-phone { margin-top: 0; align-self: stretch; justify-content: center; }
.mobile-nav .mobile-nav-phone svg { width: 18px; height: 18px; }
.mobile-nav .mobile-nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  text-transform: none; letter-spacing: 0.2px; line-height: 1.2;
  color: #fff; text-decoration: none;
  padding: 13px 22px;
  border: 1.5px solid rgba(255,255,255,0.6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav, .mobile-nav-links a, .mobile-toggle svg { transition: none; }
}

/* ============================================================
   MOBILE MENUE – BLAUE KOPFZEILE
   Bei offenem Menue faerbt sich die Kopfzeile im Blau des Overlays,
   das Logo wechselt auf die weisse Fassung, das X wird weiss.
   ============================================================ */
.header { transition: background-color 0.28s ease, border-color 0.28s ease; }
.logo-img-negativ { display: none; }
body.nav-open .header {
  background: var(--emc-blue-dark);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
body.nav-open .header .logo-img { display: none; }
body.nav-open .header .logo-img-negativ { display: block; }
body.nav-open .mobile-toggle svg { stroke: #fff; }
@media (prefers-reduced-motion: reduce) { .header { transition: none; } }

/* ============================================================
   MOBILE MENUE – KOPFZEILEN-BUTTON WEICH AUSBLENDEN
   Statt hart zu verschwinden blendet der Button im Tempo der
   Kopfzeile aus und kommt beim Schliessen leicht versetzt zurueck,
   wenn die Kopfzeile schon wieder weiss ist.
   ============================================================ */
.header .btn-logo,
.header .phone-link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.24s ease 0.14s,
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.14s,
    visibility 0s linear 0s,
    background-color 0.2s ease, color 0.2s ease;
}
body.nav-open .header .btn-logo,
body.nav-open .header .phone-link {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .header .btn-logo, .header .phone-link,
  body.nav-open .header .btn-logo, body.nav-open .header .phone-link { transition: none; }
}

/* ============================================================
   MOBILE MENUE – BURGER ZU X
   Drei echte Balken. Beim Oeffnen ruecken oben und unten zuerst
   zur Mitte, dann drehen sie sich zum X; der mittlere verschwindet.
   Beim Schliessen laeuft es exakt rueckwaerts.
   ============================================================ */
.mobile-toggle { position: relative; width: 44px; height: 44px; padding: 0; }
.mobile-toggle .bar {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--emc-text);
  transform-origin: center;
  transition:
    top 0.22s cubic-bezier(0.16, 1, 0.3, 1) 0.16s,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) 0s,
    opacity 0.14s ease 0.12s,
    background-color 0.28s ease;
}
.mobile-toggle .bar:nth-child(1) { top: 15px; }
.mobile-toggle .bar:nth-child(2) { top: 21px; }
.mobile-toggle .bar:nth-child(3) { top: 27px; }

body.nav-open .mobile-toggle .bar {
  background: #fff;
  transition:
    top 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s,
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) 0.16s,
    opacity 0.12s ease 0s,
    background-color 0.28s ease;
}
body.nav-open .mobile-toggle .bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.nav-open .mobile-toggle .bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
body.nav-open .mobile-toggle .bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
body.nav-open .mobile-toggle:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mobile-toggle .bar, body.nav-open .mobile-toggle .bar { transition: none; }
}

/* ============================================================
   MOBILE MENUE – AKTIONEN UNTEN – FEINSCHLIFF
   Telefon-Symbol weiss (der Pfad hat keine eigene Farbe und wuerde
   sonst schwarz gefuellt). Der Mail-Button verlor seine Unterkante
   durch ".mobile-nav a:last-child { border-bottom: none }"; die
   hoehere Spezifitaet hier stellt den kompletten Rahmen sicher.
   ============================================================ */
.mobile-nav .mobile-nav-actions .mobile-nav-phone svg {
  width: 18px; height: 18px;
  fill: #fff; stroke: #fff; stroke-width: 0.5;
  flex: 0 0 auto;
}
.mobile-nav .mobile-nav-actions .mobile-nav-cta,
.mobile-nav .mobile-nav-actions .mobile-nav-cta:last-child {
  border: 1.5px solid rgba(255,255,255,0.7);
  border-bottom: 1.5px solid rgba(255,255,255,0.7);
}
.mobile-nav .mobile-nav-actions .mobile-nav-phone,
.mobile-nav .mobile-nav-actions .mobile-nav-phone:last-child { border-bottom: none; }
.mobile-nav .mobile-nav-actions .mobile-nav-cta:hover,
.mobile-nav .mobile-nav-actions .mobile-nav-cta:focus-visible { background: rgba(255,255,255,0.08); }

/* ============================================================
   MOBILE MENUE – MAIL-BUTTON MIT SAUBERER SCHRAEGE
   Ein CSS-Rahmen wird vom clip-path an der Ecke einfach gekappt.
   Deshalb: Der Button selbst ist die helle Rahmenflaeche, ein um
   1,5px eingerueckter Pseudo-Layer traegt das Blau – beide mit
   parallel versetzter Schraege. So laeuft die Linie um die Ecke.
   ============================================================ */
.mobile-nav .mobile-nav-actions .mobile-nav-cta,
.mobile-nav .mobile-nav-actions .mobile-nav-cta:last-child {
  position: relative;
  isolation: isolate;
  border: none;
  background: rgba(255,255,255,0.7);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.mobile-nav .mobile-nav-actions .mobile-nav-cta::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: var(--emc-blue-dark);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13.1px), calc(100% - 13.1px) 100%, 0 100%);
  transition: background-color 0.2s ease;
}
.mobile-nav .mobile-nav-actions .mobile-nav-cta:hover,
.mobile-nav .mobile-nav-actions .mobile-nav-cta:focus-visible { background: #fff; }
.mobile-nav .mobile-nav-actions .mobile-nav-cta:hover::before,
.mobile-nav .mobile-nav-actions .mobile-nav-cta:focus-visible::before { background: #17466f; }

/* ============================================================
   HEROS – RESPONSIVE FEINSCHLIFF
   Befund auf 375px: Der Startseiten-Hero hatte keinen vertikalen
   Innenabstand – Eyebrow klebte an der Kopfzeile, der zweite Button
   an der Unterkante. Die Unterseiten-Heros waren mit 620px zu hoch
   und oben halb leer. Die Karriere-Kopfzeile war 20px hoeher als
   auf allen anderen Seiten, dadurch brach der Button zweizeilig.
   ============================================================ */
@media (max-width: 960px) {
  /* Kopfzeile: auf allen Seiten gleich hoch, Button bleibt einzeilig */
  body.page-karriere .header-inner { padding: 0 24px; height: 64px; }
  body.page-karriere .logo-img { height: 64px; }
  .header .btn-logo { white-space: nowrap; }

  /* Heros: Mindesthoehe als Untergrenze, Innenabstand garantiert Luft */
  body:not(.page-karriere) .hero,
  body:not(.page-karriere) .hero-inner { min-height: max(62vh, 520px); }
  body.page-karriere .hero,
  body.page-karriere .hero-inner { min-height: 560px; }
  .subhero-inner { min-height: 500px; }
  body:not(.page-karriere) .hero-inner,
  body.page-karriere .hero-inner,
  .subhero-inner { padding-top: 56px; padding-bottom: 64px; }
}

@media (max-width: 480px) {
  body:not(.page-karriere) .hero h1 { font-size: clamp(2.25rem, 10.5vw, 2.75rem); margin-bottom: 20px; }
  body.page-karriere .hero h1 { font-size: clamp(2.125rem, 10vw, 2.5rem); margin-bottom: 20px; }
  .subhero h1 { margin-bottom: 18px; }
  body:not(.page-karriere) .hero-lead,
  body.page-karriere .hero-lead,
  .subhero-lead { font-size: 17px; line-height: 1.55; margin-bottom: 28px; }

  /* Buttons untereinander, volle Breite, buendige Kanten */
  .hero-buttons, .subhero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .subhero-actions { margin-top: 28px; }
  .hero-buttons .btn, .subhero-actions .btn,
  .hero-buttons .btn-wrap, .subhero-actions .btn-wrap { width: 100%; justify-content: center; }
  .btn-wrap .btn { width: 100%; }
}

/* ============================================================
   KOPFZEILE – SEHR SCHMALE GERAETE (bis 360px)
   Der Button drueckte das Logo auf Briefmarkengroesse. Das Logo
   behaelt seine Breite, der Button wird kompakter.
   ============================================================ */
@media (max-width: 360px) {
  .header .logo-row { flex-shrink: 0; }
  .header .header-cta { gap: 10px; }
  .header .btn-logo { padding: 9px 12px; font-size: 13px; }
}

/* ============================================================
   HORIZONTALER UEBERLAUF AUF SCHMALEN GERAETEN
   Befund: Footer-Links brachen nie um (337px breit bei 375px Bild-
   schirm), Vorteils-Karten wurden von langen Woertern aufgesprengt.
   ============================================================ */
/* Sicherheitsnetz: clip statt hidden, damit position: sticky weiter funktioniert */
html { overflow-x: clip; }

@media (max-width: 860px) {
  .footer-inner > * { max-width: 100%; min-width: 0; }
  .footer-left { flex-wrap: wrap; row-gap: 16px; }
  .footer-left-text { min-width: 0; }
  .footer-links { flex-wrap: wrap; gap: 10px 18px; }
}
@media (max-width: 540px) {
  .footer-left { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Karten & Ueberschriften: lange Woerter trennen statt ausbrechen */
.benefits-grid > *, .services-grid > *, .ref-grid > *, .team-grid > * { min-width: 0; }
.benefit-card h3, .benefit-card p,
.service-card h3, .service-card p,
.faq-item summary, .job h3, h1, h2 {
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ============================================================
   GRIDS AUF SEHR SCHMALEN GERAETEN (320px)
   Grid-Kinder haben min-width:auto und werden nie schmaler als ihr
   laengstes Wort – Trust-Leiste und Text-Bild-Block sprengten so
   die Spalten. Hier: min-width 0, Trennung, kompaktere Zahlen.
   ============================================================ */
.trust-grid > *, .about > *, .about-stats > *,
.services-grid > *, .benefits-bar > *, .team-grid > * { min-width: 0; }
.trust-label, .trust-num, .about-stat-value, .about-stat-label, .about-text h2, .benefit-text {
  overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
}
.about-image, .about-image img { max-width: 100%; }

@media (max-width: 400px) {
  .about-stats { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .trust-grid { gap: 20px 8px; }
  .trust-item { padding: 0 6px; }
  body:not(.page-karriere) .trust-num { font-size: 26px; }
  body.page-karriere .trust-num { font-size: 24px; }
  .trust-num-sm { font-size: 17px; }
  .trust-label { font-size: 11px; letter-spacing: 0.4px; }
}

/* ============================================================
   COOKIE-BANNER – BUTTONS ALS FLAECHE
   Statt weiss mit Rahmen: hellblaue Flaeche ohne Rahmen. Alle drei
   Buttons bleiben absichtlich identisch (DSGVO: "Alle akzeptieren"
   darf nicht hervorgehoben sein).
   ============================================================ */
.consent-btn,
.consent-btn:hover,
.consent-btn:focus-visible {
  border: none;
  box-shadow: none;
}
.consent-btn {
  background: var(--emc-blue-50);
  color: var(--emc-blue-dark);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.consent-btn:hover { background: #D3E4F3; color: var(--emc-blue-dark); }
.consent-btn:active { background: #C4DAEE; }
.consent-btn:focus-visible { outline: 3px solid var(--emc-blue); outline-offset: 2px; }

/* ============================================================
   COOKIE-BANNER – BUTTON-ANORDNUNG
   Oben "Einstellungen" und "Nur technisch notwendige" je zur Haelfte,
   darunter "Alle akzeptieren" (und beim Bearbeiten "Auswahl speichern")
   in voller Breite. Reihenfolge per order, Markup bleibt unveraendert.
   ============================================================ */
.consent-actions { gap: 10px; }
.consent-btn[data-consent="settings"]  { order: 1; flex: 1 1 calc(50% - 5px); }
.consent-btn[data-consent="necessary"] { order: 2; flex: 1 1 calc(50% - 5px); }
.consent-btn[data-consent="all"]       { order: 3; flex: 1 1 100%; }
.consent-btn[data-consent="save"]      { order: 4; flex: 1 1 100%; }

@media (max-width: 360px) {
  .consent-btn[data-consent="settings"],
  .consent-btn[data-consent="necessary"] { flex: 1 1 100%; }
}

/* ============================================================
   SCROLLSPERRE BEI OFFENEM MENUE
   "html { overflow-x: clip }" hatte die Weitergabe von
   "body { overflow: hidden }" an den Viewport unterbunden – die Seite
   scrollte hinter dem Menue weiter und nahm den Header mit. Die
   Sicherung sitzt jetzt auf body; bei offenem Menue wird body fixiert
   (haelt auch auf iOS) und der Header steht fest oben.
   ============================================================ */
html { overflow-x: visible; }
body { overflow-x: clip; }
body.nav-open {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}
body.nav-open .header { position: fixed; top: 0; left: 0; right: 0; }

/* ============================================================
   NACHJUSTIERUNG MENUE/TRENNUNG
   1) Auf Desktopbreite bleibt das Vollbildmenue komplett aus dem
      Layout (die spaetere display:flex-Regel hatte das aufgehoben).
   2) Ueberschriften und Kennzahlen werden nicht mehr automatisch
      getrennt ("Im suedli-chen"); Umbruch im Notfall bleibt erlaubt.
   ============================================================ */
@media (min-width: 961px) {
  .mobile-nav, .mobile-nav.open { display: none; }
}
h1, h2, .trust-num, .about-stat-value, .benefit-card h3, .job h3, .service-card h3 {
  hyphens: manual; -webkit-hyphens: manual;
}

/* ============================================================
   FOKUSRAHMEN NUR BEI TASTATUR
   Skripte fokussieren Buttons programmatisch (Cookie-Banner, Menue-X);
   der Browser zeigt dann den Rahmen, obwohl niemand die Tastatur nutzt.
   script.js setzt <html class="kbd"> erst nach einem Tab-Druck; bis
   dahin bleiben Rahmen aus. Tastaturnutzer verlieren nichts.
   Zusaetzlich: kein blaeulicher Tipp-Effekt auf Android/iOS.
   ============================================================ */
a, button, .btn, .consent-btn, summary { -webkit-tap-highlight-color: transparent; }
html:not(.kbd) *:focus-visible { outline: none; }
html:not(.kbd) .mobile-nav .mobile-nav-actions .mobile-nav-cta:focus-visible { background: rgba(255,255,255,0.7); }
html:not(.kbd) .mobile-nav .mobile-nav-actions .mobile-nav-cta:focus-visible::before { background: var(--emc-blue-dark); }
html:not(.kbd) .job-card:focus-visible .job-card-go { opacity: 0; transform: translateX(-6px); }

/* ============================================================
   KARRIERE – KASTEN "WAS UNS AUSMACHT"
   Gleiche abgeschnittene Ecke wie die Vorteils-Karten (Rahmenflaeche
   plus um 1px eingerueckte Fuellung, weil ein CSS-Rahmen vom Zuschnitt
   gekappt wuerde) und eine groessere Ueberschrift.
   ============================================================ */
.benefits-extra {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  padding: 26px 30px;
}
.benefits-extra::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--emc-card-border);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
.benefits-extra::after {
  content: ''; position: absolute; inset: 1px; z-index: 1;
  background: var(--emc-card-fill);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 19px), calc(100% - 19px) 100%, 0 100%);
}
.benefits-extra > * { position: relative; z-index: 2; }
.benefits-extra-label { font-size: 22px; letter-spacing: 0.3px; line-height: 1.15; }

/* ============================================================
   KARRIERE – FUSSNOTE BEWERBUNGSWEGE
   Link im Tepe-Blau, ohne Unterstreichung; beim Ueberfahren dunkler.
   ============================================================ */
.apply-footnote a {
  color: var(--emc-blue);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.18s ease;
}
.apply-footnote a:hover { color: var(--emc-blue-dark); }

/* ============================================================
   MENUE – SCROLLLEISTEN-AUSGLEICH
   Bei offenem Menue verschwindet auf dem Desktop die Scrollleiste.
   Damit Inhalt und Kopfzeile nicht um ihre Breite springen, bekommt
   body denselben Innenabstand rechts und die fixierte Kopfzeile
   endet dort, wo sie vorher endete. --sbw setzt script.js.
   ============================================================ */
body.nav-open { padding-right: var(--sbw, 0px); }
body.nav-open .header { right: 0; padding-right: var(--sbw, 0px); }
body.nav-open .mobile-nav { padding-right: calc(28px + var(--sbw, 0px)); }

/* ============================================================
   RESPONSIVE-DURCHLAUF – NACHARBEITEN
   1) Kurze Seiten (404): Footer haftet am unteren Rand statt mittig
      zu schweben.
   2) Tippflaechen im Footer und der Karten-Link auf mindestens 40px.
   3) Stellen-Etikett war mit 10,5px zu klein.
   4) Kartenueberschriften duerfen wieder mit Bindestrich trennen –
      "WEITERBILDUNGSMASSNAHM|EN" brach sonst in der 3-Spalten-Ansicht
      ohne Trennstrich.
   ============================================================ */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
body.nav-open { min-height: 0; }

.footer-contact a { padding: 8px 0; margin: -4px 0; }
.footer-links a { display: inline-block; padding: 8px 0; margin: -4px 0; }
.map-link { display: inline-flex; align-items: center; min-height: 40px; }

.job-tag { font-size: 11.5px; }

.benefit-card h3, .service-card h3 { hyphens: auto; -webkit-hyphens: auto; }

/* ============================================================
   KARTEN BLENDEN WEICH EIN
   ".benefit-card { transition: transform .2s, box-shadow .2s }" ueber-
   schrieb die Einblend-Transition des Reveal-Rasters – die Karten
   poppten auf statt zu faden. Hover-Lift bleibt schnell, Opacity fadet.
   ============================================================ */
.reveal-stagger > .benefit-card,
.reveal-stagger > .service-card,
.reveal-stagger > .team-card,
.reveal-stagger > .job-card {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.reveal-stagger.in-view > .benefit-card,
.reveal-stagger.in-view > .service-card,
.reveal-stagger.in-view > .team-card,
.reveal-stagger.in-view > .job-card {
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
.reveal-stagger.in-view > .benefit-card:hover,
.reveal-stagger.in-view > .job-card:hover { transition: transform 0.2s, box-shadow 0.2s, opacity 0.7s; }

/* ============================================================
   TOUCH-GERAETE – KEIN HOVER
   Ohne Maus gibt es keinen Hover: "Stelle ansehen" blieb unsichtbar
   und der Hover-Zustand klebte nach dem Tippen an der Karte. Auf
   Touch-Geraeten steht der Link dauerhaft im Kartenfuss, Karten heben
   sich nicht mehr an, kurzes Druecken faerbt den Rahmen als Rueckmeldung.
   ============================================================ */
@media (hover: none) {
  .job-card .job-card-go,
  html:not(.kbd) .job-card:focus-visible .job-card-go {
    position: static;
    opacity: 1;
    transform: none;
    justify-content: flex-end;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--emc-border);
  }
  .job-card:hover { transform: none; box-shadow: none; }
  .job-card:hover::before { background: var(--emc-card-border); }
  .job-card:active::before { background: var(--emc-blue); }

  .job:hover { transform: none; box-shadow: none; border-color: var(--emc-border); }
  .job:hover .job-card-cta-arrow { transform: none; }
  .job:active { border-color: var(--emc-blue); }

  .benefit-card:hover { transform: none; box-shadow: none; }
  .benefit-card:hover::before { background: var(--emc-card-border); }
  .benefit-card:active::before { background: var(--emc-blue); }

  .btn:hover, .btn-primary:hover, .btn-logo:hover, .btn-accent:hover { transform: none; }
}

/* ============================================================
   STELLEN – INITIATIV-HINWEIS
   "Initiativ bewerben ->" brach auf dem Handy mitten im Link um.
   Der Link ist jetzt unteilbar und springt als Ganzes in die
   naechste Zeile; auf schmalen Geraeten steht er darunter.
   ============================================================ */
.no-job-hint a { white-space: nowrap; display: inline-block; }
@media (max-width: 480px) {
  .no-job-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1.5; }
}

/* ============================================================
   KONTAKTBLOCK – ADRESSE OHNE UMBRUCH
   Auf Mobil war der Block auf 78% Breite begrenzt und die Kontaktliste
   behielt ihren Desktop-Einzug von 96px – fuer die E-Mail blieben
   ~90px. Jetzt volle Breite, kein Einzug, Adresse bleibt einzeilig.
   ============================================================ */
@media (max-width: 960px) {
  body:not(.page-karriere) .contact-cta-inner,
  body.page-karriere .contact-cta-inner { max-width: 100%; }
  .contact-info { padding-left: 0; }
  .contact-row { gap: 14px; }
  .contact-value { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .contact-value { font-size: 16px; }
  .contact-icon { width: 40px; height: 40px; }
}

/* KONTAKTBLOCK – SEHR SCHMAL (bis 360px): lange Adresse bleibt einzeilig */
@media (max-width: 360px) {
  .contact-row { gap: 12px; }
  .contact-icon { width: 36px; height: 36px; }
  .contact-icon svg { width: 16px; height: 16px; }
  .contact-value { font-size: 14px; letter-spacing: -0.01em; }
  .contact-row { gap: 10px; }
}

/* ============================================================
   TEXT-BILD-BLOCK – BUTTON
   Optionaler Button unter dem Text (z. B. "Zur Tepe Website").
   ============================================================ */
.about-actions { margin-top: 28px; }
.about-actions .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* UEBERSCHRIFT TEXT-BILD OHNE TRENNUNG: "FIRMENGRUP-PE" vermeiden, Umbruch nur an Wortgrenzen */
.about-text h2 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }

/* ============================================================
   BILD & TEXT – DARSTELLUNG "LOGO"
   Ein Logo darf nicht wie ein Foto formatfuellend beschnitten
   werden. Statt der cover-Kachel steht es vollstaendig und
   mittig auf einer ruhigen Flaeche, mit Luft ringsum.
   Die Flaeche setzt sich immer vom Sektionshintergrund ab:
   auf weissem Grund (.section.alt) hellblau, sonst weiss.
   ============================================================ */
.about-image.is-logo {
  height: auto;
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: 64px;
  background: var(--emc-surface);
  border-color: var(--emc-card-border);
}
.section.alt .about-image.is-logo { background: var(--emc-card-fill); }

/* Nicht beschneiden, nicht hochskalieren. Die Breitenbegrenzung
   haelt das Logo auch in einer breiten Spalte in Augenhoehe zur
   Ueberschrift daneben. Das Seitenverhaeltnis kommt beim SVG aus
   der viewBox, deshalb springt beim Laden nichts. */
.about-image.is-logo img {
  width: min(100%, 340px);
  height: auto;
  object-fit: contain;
}

@media (max-width: 960px) {
  .about-image.is-logo { min-height: 0; padding: 48px 32px; }
  .about-image.is-logo img { width: min(100%, 260px); }
}
@media (max-width: 480px) {
  .about-image.is-logo { padding: 36px 24px; }
  .about-image.is-logo img { width: min(100%, 220px); }
}

/* Logo auf blauer Flaeche. Gegenstueck ist die weisse Fassung des Logos
   (…-negativ.svg) – nach EMC-Hausregel wird dabei Blau zu Weiss, Rot
   bleibt Rot. Steht bewusst hinter der hellen Variante, damit es sie in
   beiden Sektionshintergruenden schlaegt. */
.about-image.is-logo.is-logo-blau,
.section.alt .about-image.is-logo.is-logo-blau {
  background: var(--emc-blue);
  border-color: var(--emc-blue);
}

/* ============================================================
   BEWERBUNGSWEGE – KEINE AMPELFARBEN
   Rotes Symbol links, gruenes rechts las sich wie "schlecht /
   gut" – als waere die Online-Bewerbung der schlechtere Weg.
   Beide Karten tragen jetzt denselben weissen Kreis; die Farbe
   steckt nur noch im Zeichen darin (Hausblau fuers Formular,
   WhatsApp-Gruen fuer WhatsApp) und wirkt damit als Herkunfts-
   zeichen statt als Bewertung. Die Stichpunkte sind beidseitig
   gleich. Gruen bleibt nur dort, wo es die Marke WhatsApp meint:
   auf deren Schaltflaeche.
   ============================================================ */
.apply-icon-2.form,
.apply-icon-2.wa { background: #fff; }
.apply-icon-2.form svg { fill: none; stroke: var(--emc-blue); }
.apply-icon-2.wa svg { fill: #25D366; }

.apply-feature-2::before,
.apply-card-2.wa-card .apply-feature-2::before { background: rgba(255,255,255,0.55); }

/* Schaltflaeche des Formularwegs: hell statt rot, damit keiner der
   beiden Wege staerker zieht. Das Briefsymbol ist eine Strichzeichnung
   und braucht stroke statt fill, sonst wird ein weisser Klotz daraus. */
.apply-cta-form { background: #fff; color: var(--emc-blue); }
.apply-cta-form:hover { background: var(--emc-blue-50); }
.apply-cta-form svg {
  fill: none;
  stroke: var(--emc-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   RECHTLICHE ANGABEN (Impressum)
   Beschriftung und Wert als zweispaltige Liste, wie man es von
   Impressen kennt. Unter 700px stapelt sie, damit lange Zeilen
   wie die Wirtschafts-ID nicht in eine Schmalspur gequetscht
   werden.
   ============================================================ */
.legal-firma {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--emc-blue);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.15;
  margin-bottom: 26px;
}
.legal-daten { max-width: 760px; }
.legal-row {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--emc-border);
}
.legal-row:last-child { border-bottom: 1px solid var(--emc-border); }
.legal-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emc-text);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.45;
}
.legal-norm {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--emc-text-light);
}
.legal-value { font-size: 16px; color: var(--emc-text-muted); line-height: 1.7; }
.legal-value a { color: var(--emc-blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-value a:hover { color: var(--emc-blue-dark); }
.legal-hinweis { margin-top: 28px; }

@media (max-width: 700px) {
  .legal-firma { font-size: 22px; }
  .legal-row { grid-template-columns: 1fr; gap: 5px; padding: 14px 0; }
  .legal-value { font-size: 15.5px; }
}

/* ============================================================
   BEWERBUNGSWEGE – HINWEISKAESTEN AUF EINER LINIE
   Beide Karten sind gleich hoch, der Text darueber ist aber
   unterschiedlich lang: links bricht die Einleitung auf zwei
   Zeilen um, rechts auf eine. Dadurch standen "Datenschutz"
   und "So einfach" um eine Zeilenhoehe versetzt.

   Der Kasten wird jetzt an den unteren Kartenrand geschoben.
   Er sitzt damit in beiden Karten auf derselben Grundlinie,
   egal wie der Text darueber umbricht oder spaeter geaendert
   wird. Kommt in einer Karte wieder eine Schaltflaeche dazu,
   wandert sie mit nach unten und der Kasten bleibt darueber.

   Auf dem Handy stapeln die Karten und sind nur so hoch wie
   ihr Inhalt – dort gibt es keinen freien Raum zu verteilen,
   die Regel bleibt also wirkungslos.
   ============================================================ */
.apply-card-pin { margin-top: auto; }

/* ============================================================
   LEISTUNGSKACHELN – MAUSZEIGER NUR DORT, WO ES KLICKBAR IST
   Die drei Kacheln sind reine <div class="service"> ohne Link,
   trugen aber cursor: pointer. Der Zeigefinger versprach einen
   Klick, der nirgends hinfuehrt.

   Die Abschlusskachel "Alle Leistungen ansehen" ist dagegen ein
   <a class="service service-cta"> und behaelt ihn. Sie traegt
   beide Klassen, deshalb steht die Ausnahme hier dahinter und
   gewinnt bei gleicher Spezifitaet.
   ============================================================ */
.service { cursor: default; }
.service-cta { cursor: pointer; }

/* Writer-Listen: Das Panel speichert Punkte als <li><p>…</p></li>. Ohne diese
   Regel bekaeme jeder Punkt den Absatzabstand von .richtext p. */
.richtext li > p { margin: 0; }

/* ============================================================
   COOKIE-BANNER – GLEICHWERTIGE KNOEPFE (07.10.2026)
   Ersetzt die fruehere Anordnung, in der "Alle akzeptieren" allein und in
   voller Breite stand – groesser als das Ablehnen, also Nudging. Jetzt:
   oben "Nur technisch notwendige" und "Alle akzeptieren" je zur Haelfte,
   darunter "Einstellungen" (beim Bearbeiten neben "Auswahl speichern").
   Reihenfolge kommt aus dem Markup, nicht mehr aus order.
   ============================================================ */
.consent-btn[data-consent] { order: 0; flex: 1 1 calc(50% - 5px); }
@media (max-width: 360px) {
  .consent-btn[data-consent] { flex: 1 1 100%; }
}

/* ============================================================
   COOKIE-BANNER – KOMPAKTE KARTE OHNE ABDUNKLUNG (07.10.2026)
   Ersetzt das fruehere Vollbild-Overlay (abgedunkelt + weichgezeichnet).
   Desktop: kleine Karte unten rechts (links stehen Einleitungstexte und
   Knoepfe der Titelbereiche). Mobil: schmale Leiste am unteren Rand.
   Die Website bleibt dahinter voll sichtbar und bedienbar. "Nur notwendige"
   und "Alle akzeptieren" sind gleich gross; "Einstellungen" steht als Link
   neben Datenschutzerklaerung und Impressum.
   ============================================================ */
.consent {
  inset: auto 20px 20px auto;
  width: min(400px, calc(100vw - 40px));
  padding: 0;
  display: block;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.consent-box {
  max-width: none;
  max-height: calc(100vh - 40px);
  padding: 18px 20px 16px;
  border-top-width: 3px;
  box-shadow: 0 10px 30px rgba(15, 57, 99, 0.18);
}
.consent-title { font-size: 17px; margin-bottom: 6px; }
.consent-title:focus { outline: none; }
.consent-title:focus-visible { outline: 3px solid var(--emc-blue); outline-offset: 3px; }
.consent-text { font-size: 13px; line-height: 1.55; }
.consent-text p { margin-bottom: 6px; }

.consent-details { margin-top: 12px; padding-top: 12px; gap: 10px; }
.consent-cat-name { font-size: 14px; }
.consent-cat-fix { font-size: 10px; }
.consent-cat-text { margin-top: 3px; font-size: 12.5px; line-height: 1.5; }

.consent-actions { margin-top: 14px; gap: 8px; flex-wrap: nowrap; }
.consent-btn[data-consent] { flex: 1 1 0; min-height: 40px; padding: 9px 12px; font-size: 13px; }
.consent-btn.consent-btn-save { flex: none; width: 100%; margin-top: 2px; }

.consent-legal { margin-top: 10px; gap: 14px; align-items: center; }
.consent-legal a,
.consent-link {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--emc-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.consent-legal a:hover,
.consent-link:hover { color: var(--emc-blue); }
.consent-link:focus-visible,
.consent-legal a:focus-visible { outline: 3px solid var(--emc-blue); outline-offset: 2px; }

@media (max-width: 640px) {
  .consent { inset: auto 0 0 0; width: auto; }
  .consent-box {
    max-height: 70vh;
    padding: 14px 16px 12px;
    border-left: none; border-right: none; border-bottom: none;
  }
  .consent-btn[data-consent] { flex: 1 1 0; }
}
@media (max-width: 340px) {
  .consent-actions { flex-wrap: wrap; }
  .consent-btn[data-consent] { flex: 1 1 100%; }
}

/* ============================================================
   KONTRASTE (07.10.2026, Go-Live-Audit)
   --emc-text-light (#8A95A0) erreicht auf Weiss nur 3,05:1 und ist fuer
   Text zu hell. Kleine Beschriftungen nutzen jetzt --emc-text-muted
   (5,48:1 auf Weiss); #8A95A0 bleibt fuer Linien und Symbole.
   ============================================================ */
.contact-rowlist-label,
.map-credit,
.map-credit a,
.consent-cat-fix,
.fehler-weiter,
.legal-norm { color: var(--emc-text-muted); }
.contact-label { color: rgba(255, 255, 255, 0.95); }      /* 4,62:1 auf Rot */
.apply-card-pin { color: rgba(255, 255, 255, 0.92); }     /* 4,72:1 auf Blau */
/* "Neu"-Abzeichen der Stellen: weiss auf WhatsApp-Gruen hatte 1,98:1.
   Jetzt Hausblau (6,2:1) – Gruen bleibt der WhatsApp-Marke vorbehalten. */
.job-badge,
.job-badge-new { background: var(--emc-blue); color: #fff; font-size: 11px; }

/* ============================================================
   BLOCK "HALTUNG & ZITATE" – fehlende Klassen nachgezogen
   Das Snippet gibt figure.quote / blockquote / figcaption / .quote-person
   aus, das Stylesheet kannte nur .quote-card & Co. (Block derzeit unbenutzt.)
   ============================================================ */
.quote { margin: 0; background: var(--emc-blue-mid); border: 1px solid var(--emc-blue-light); padding: 32px 30px; display: flex; flex-direction: column; gap: 22px; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.4; color: #fff; font-weight: 500; flex-grow: 1; }
.quote figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 20px; }
.quote-person { font-size: 14px; color: #fff; font-weight: 700; letter-spacing: 0.2px; }

/* ============================================================
   FEHLERSEITE – Warnleuchte der Absperrbake blinkt (stand so in der
   README, die Regel fehlte). Steht bei "Bewegung reduzieren" still.
   ============================================================ */
.fehler-lampe { animation: fehler-blinken 1.4s steps(1, end) infinite; }
@keyframes fehler-blinken { 50% { opacity: 0.25; } }

/* ============================================================
   BEWEGUNG REDUZIEREN – auch kein weiches Scrollen zu Sprungmarken
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fehler-lampe { animation: none; }
}

/* ============================================================
   DRUCKANSICHT
   Ohne diese Regeln blieben Abschnitte, die nicht in den sichtbaren
   Bereich gescrollt wurden, beim Drucken leer (Einblend-Animation), und
   ein offener Cookie-Banner lag auf jeder Seite.
   ============================================================ */
@media print {
  .consent, .skip-link, .nav, .header-cta, .mobile-toggle, .mobile-nav { display: none !important; }
  .header { position: static !important; backdrop-filter: none !important; box-shadow: none !important; }
  .reveal, .reveal-stagger > *, .timeline .tl-step-num {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .timeline .tl-step::after,
  .timeline .tl-step::before { transform: none !important; transition: none !important; }
  body { background: #fff; }
}