/* lokalejobsuche.de, Leistungsseite fuer Dentallabore (07.10.2026).
   Baut auf seite.css (Startseite, Farbwelt) und wissen.css (Kennzahlen, Tabelle,
   Rechner, Checkliste) auf. Hier steht nur, was die Laborseite zusaetzlich braucht. */

.labor .eng { max-width: 860px; margin: 0 auto; }
.labor .kurzantwort { margin: 0; }
.labor .sprungmarken { margin-top: 28px; }
.labor-uebersicht { padding: 72px 0 0; }

/* ---------- Ergebnis Malkodent: der eine tiefe Markenmoment der Seite ---------- */
.ergebnis { position: relative; isolation: isolate; overflow: hidden; padding: var(--sektion) 0; background: var(--marke-tief); color: #fff; }
.ergebnis::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--korn); background-size: 160px; mix-blend-mode: soft-light; opacity: .5; }
.ergebnis .ringe { background: repeating-radial-gradient(circle at 92% 8%, transparent 0 119px, rgb(255 255 255 / .08) 119px 120px); }
.ergebnis .wrap { position: relative; z-index: 1; }
.ergebnis .eyebrow { color: rgb(255 255 255 / .78); }
.ergebnis h2 { color: #fff; max-width: 820px; }
.ergebnis .lead { color: rgb(255 255 255 / .86); max-width: 680px; }
.ergebnis :focus-visible { outline-color: #fff; }

.ergebnis-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.ergebnis-zahl { padding: 28px 28px 26px; border-radius: var(--r-2xl); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ergebnis-zahl b { display: block; font-size: clamp(64px, 8vw, 104px); font-weight: 500; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ergebnis-zahl b.wort { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.03em; padding-top: 14px; }
.ergebnis-zahl span { display: block; margin-top: 14px; font-size: 16px; line-height: 1.45; color: rgb(255 255 255 / .88); }
.ergebnis-zahl small { display: block; margin-top: 10px; font-size: 12.5px; color: rgb(255 255 255 / .66); }

/* minmax(0, …): die Grafik hat eine Mindestbreite zum Wischen und darf die Spalte nicht aufdruecken */
.ergebnis-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; margin-top: 16px; }
.ergebnis-raster > * { min-width: 0; }
.ergebnis-weg { padding: 22px 22px 18px; border-radius: var(--r-2xl); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .22); }
.ergebnis-weg .mini-label { color: rgb(255 255 255 / .78); }
.ergebnis-weg-flaeche { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.ergebnis-weg svg { width: 100%; height: auto; min-width: 560px; }
.ergebnis-weg .w-titel { font: 600 14px var(--font); fill: #fff; }
.ergebnis-weg .w-text { font: 400 12.5px var(--font); fill: rgb(255 255 255 / .8); }
.ergebnis-weg .w-nr { font: 600 12px var(--font); fill: var(--tiefblau); }
.ergebnis-weg p { margin-top: 10px; font-size: 13px; color: rgb(255 255 255 / .72); }

.ergebnis-zitat { margin: 0; padding: 28px; border-radius: var(--r-2xl); background: #fff; color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; box-shadow: 0 30px 60px -24px rgb(3 32 79 / .5); }
.ergebnis-zitat blockquote { margin: 0; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; }
.ergebnis-zitat figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-muted); line-height: 1.4; }
.ergebnis-zitat figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; }
.ergebnis-zitat .avatar { width: 44px; height: 44px; font-size: 14px; }
.ergebnis-zitat p { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }

.ergebnis-hinweis { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 16px; padding: 16px 20px; border-radius: var(--r-lg); background: rgb(3 32 79 / .28); color: rgb(255 255 255 / .82); font-size: 14px; line-height: 1.5; }
.ergebnis-hinweis svg { width: 20px; height: 20px; margin-top: 1px; color: var(--eisblau); }
.ergebnis-hinweis b { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .ergebnis-zahlen { grid-template-columns: 1fr; gap: 12px; margin-top: 36px; }
  .ergebnis-zahl { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; padding: 22px; }
  .ergebnis-zahl b { font-size: 64px; grid-row: span 2; }
  .ergebnis-zahl b.wort { font-size: 28px; grid-row: auto; grid-column: 1 / -1; padding-top: 0; }
  .ergebnis-zahl span, .ergebnis-zahl small { margin-top: 0; }
  .ergebnis-zahl b.wort ~ span { grid-column: 1 / -1; }
  .ergebnis-raster { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Berufe im Labor: eine Gruppe, innen getrennt ---------- */
.berufe { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--bg); overflow: hidden; box-shadow: var(--e3); }
.beruf { position: relative; padding: 26px 24px 24px; }
.beruf:not(:nth-child(4n+1)) { border-left: 1px solid var(--line); }
.beruf:nth-child(n+5) { border-top: 1px solid var(--line); }
.beruf-zeichen { width: 44px; height: 44px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); background: linear-gradient(150deg, #e9f3ff, #fff0e6); border: 1px solid var(--rand-blau); }
.beruf-zeichen svg { width: 22px; height: 22px; }
.beruf h3 { margin-top: 18px; font-size: 18px; }
.beruf p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.beruf--blau { background: var(--marke-tief); isolation: isolate; color: #fff; }
.beruf--blau h3 { color: #fff; }
.beruf--blau p { color: rgb(255 255 255 / .84); }
.beruf--blau .beruf-zeichen { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); color: #fff; }
@media (max-width: 1000px) {
  .berufe { grid-template-columns: repeat(2, 1fr); }
  .beruf:not(:nth-child(4n+1)) { border-left: 0; }
  .beruf:nth-child(even) { border-left: 1px solid var(--line); }
  .beruf:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .berufe { grid-template-columns: 1fr; }
  .beruf:nth-child(even) { border-left: 0; }
  .beruf:nth-child(n+2) { border-top: 1px solid var(--line); }
  .beruf { display: grid; grid-template-columns: 44px 1fr; gap: 0 16px; padding: 20px; }
  .beruf-zeichen { grid-row: span 2; }
  .beruf h3 { margin-top: 0; }
}

/* ---------- Marktlage ---------- */
.labor .kennzahlen { box-shadow: var(--e3); }
.labor .figur-flaeche svg { min-width: 600px; }
.belege { margin-top: 20px; font-size: 13px; color: var(--ink-muted); line-height: 1.55; }
.belege a { color: var(--ink-soft); }

/* ---------- Ablauf mit fuenf Schritten ---------- */
.labor .ablauf-huelle { height: 400vh; }
.entscheid-zeile { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; }
.entscheid-zeile:first-of-type { border-top: 0; }
.entscheid-zeile .haken--laeuft { background: var(--bg); border: 2px solid var(--primary); box-shadow: 0 0 0 0 rgb(0 104 201 / .35); animation: puls-blau 2s ease-out infinite; }
.entscheid-zeile .haken--laeuft::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }

/* ---------- Vergleich und Rechner ---------- */
.labor .tabelle-huelle { box-shadow: var(--e3); }
.labor .rechner { margin-top: 0; }
.rechner-karte { margin-top: 32px; padding: 28px; border-radius: var(--r-2xl); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--e4); }
.rechner-karte h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.rechner-karte > p { margin: 6px 0 20px; color: var(--ink-soft); font-size: 15.5px; }
@media (max-width: 520px) { .rechner-karte { padding: 22px 18px; } }

/* ---------- Beitrag ---------- */
.beitrag-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.beitrag-raster .checkliste { margin-top: 0; box-shadow: var(--e3); }
.kosten-karte { padding: 28px; border-radius: var(--r-2xl); background: var(--marke-ruhig); border: 1px solid var(--rand-blau); }
.kosten-karte h3 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.kosten-karte p { margin-top: 10px; color: var(--ink-soft); font-size: 15.5px; }
.kosten-karte ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.kosten-karte li { display: flex; gap: 10px; align-items: flex-start; }
.kosten-karte li .haken { margin-top: 2px; }
@media (max-width: 900px) { .beitrag-raster { grid-template-columns: 1fr; gap: 24px; } }

/* Einstieg auf dem Handy: „Zahntechniker finden,“ bleibt eine Zeile (gemessen 375 und 360 px) */
@media (max-width: 760px) { .labor .einstieg h1 { font-size: min(36px, 9.4vw); } }