/* Sections v2 (2026-10-30): mehr Abwechslung zwischen den Sections.
   Vorlagen von Originkit/21st.dev, an Dentalliebe angepasst. Zurücksetzen: diese Datei und das Markup
   aus 06-sections-redesign/fallback-vor-components/ wiederherstellen. */

/* ---------- Unser Labor: Bento mit Foto, zwei Belegkarten und dunklem Faktenband (nach Originkit Features 05) ---------- */
.lab-bento {
  width: var(--wrap); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px;
}
.lab-photo { position: relative; grid-row: 1 / 3; margin: 0; min-height: 600px; border-radius: 40px; overflow: hidden; background: var(--cloud); }
.lab-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.lab-caption {
  position: absolute; left: 20px; bottom: 20px; max-width: 420px;
  padding: 20px 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-ui);
}
.lab-caption p { margin-top: 6px; font-size: 16px; line-height: 1.45; color: var(--charcoal); }

.lab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.5vw, 36px);
  border: 1px solid #e5e5e8;
  border-radius: 28px;
  background: linear-gradient(165deg, #f3f3f5, #f9f9fa);
  box-shadow:
    inset 0 2px 4px rgb(28 36 48 / .06),
    inset 0 -1px 0 #fff;
}
.lab-card-head { display: flex; align-items: center; gap: 12px; }
.lab-card-head .h4 { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.25; }
.lab-card-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 11px;
  background: #f4ecd9;
  color: var(--gold-ink);
}
.lab-card-icon .ico { width: 19px; height: 19px; }
.lab-card p { font-size: 16px; line-height: 1.49; color: var(--charcoal); max-width: 420px; }
.lab-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e5e5e8;
  font: 500 13px/1.3 var(--font-ui);
  color: var(--charcoal);
}
.lab-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.lab-card-meta .ico { width: 15px; height: 15px; flex: none; color: var(--gold-ink); }
.lab-check { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lab-check span {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 100px; background: #fff; box-shadow: var(--shadow-ui);
  font: 500 13px/1.2 var(--font-ui); letter-spacing: -0.01em; color: var(--obsidian);
}
.lab-check .ico { width: 14px; height: 14px; color: var(--gold); stroke-width: 2.4; }
.lab-check .sig { margin-left: auto; font: 400 34px/1 var(--font-hand); font-style: normal; color: var(--slate); transform: rotate(-5deg); white-space: nowrap; }

@media (max-width: 1023px) {
  .lab-bento { grid-template-columns: 1fr 1fr; }
  .lab-photo { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .lab-bento { width: calc(100% - 16px); grid-template-columns: 1fr; gap: 12px; }
  .lab-photo { aspect-ratio: auto; height: 460px; border-radius: 32px; }
  .lab-caption { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 16px; border-radius: 20px; }
  .lab-caption .h4 { font-size: 18px; }
  .lab-caption p { font-size: 15px; margin-top: 4px; }
  .lab-card { border-radius: 24px; }
  .lab-check { padding-top: 18px; }
  .lab-check .sig { font-size: 26px; margin-left: 4px; }
}

/* ---------- Service: Reiter mit automatischem Wechsel (nach dentart.framer.website) ----------
   Oben eine Pillenleiste, der schwarze 3D-Schieber wandert zum aktiven Reiter (Takt: Timer in sections-v2.js,
   ohne sichtbaren Balken). Darunter links die Karte in hellem Himmelblau mit dem UI-Element und dem Text,
   rechts das Foto ohne Überlagerung. Alle Panels liegen in derselben Rasterzelle, damit die Höhe nicht springt. */
.svt { width: var(--wrap); margin-inline: auto; }
.svt-tabs {
  position: relative; isolation: isolate; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 6px; border-radius: 100px; background: #fff;
  box-shadow: 0 0 0 1px #ececf1, 0 1px 2px #0000000a, 0 6px 14px -8px #0000001f;
}
.svt-tab {
  position: relative; z-index: 1; height: 48px; padding: 0 18px; border: 0; border-radius: 100px; background: transparent; cursor: pointer;
  font: 500 16px/1 var(--font-ui); letter-spacing: -0.015em; color: var(--charcoal); white-space: nowrap; transition: color .35s var(--ease);
}
.svt-tab:hover { color: var(--obsidian); }
.svt-tab[aria-selected="true"] { color: #fff; }
.svt-tab:focus { outline: none; }
.kbd .svt-tab:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold-ink); }
.svt-thumb {
  position: absolute; z-index: 0; left: 0; top: 6px; height: 48px; width: var(--w, 0px); border-radius: 100px; overflow: hidden;
  transform: translateX(var(--x, 0px)); background: var(--btn-dark); box-shadow: var(--btn-dark-sh);
  transition: transform .55s cubic-bezier(.34, 1.3, .64, 1), width .4s var(--ease);
}

.svt-panels { display: grid; margin-top: 20px; }
.svt-panel { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; visibility: hidden; transition: visibility 0s linear .45s; }
.svt-panel.is-active { visibility: visible; transition: none; }
.svt-card, .svt-media { opacity: 0; transition: opacity .4s var(--ease), transform .7s var(--ease); }
.svt-card { transform: translateY(14px); }
.svt-media { transform: scale(1.015); }
.svt-panel.is-active .svt-card, .svt-panel.is-active .svt-media { opacity: 1; transform: none; transition-delay: .06s; }

.svt-card {
  display: flex; flex-direction: column; gap: 28px; min-height: 600px; padding: 32px 36px 36px;
  border-radius: 40px; background: var(--sky-wash);
}
.svt-top { display: flex; align-items: center; justify-content: space-between; }
.svt-step { font: 500 14px/1 var(--font-ui); letter-spacing: -0.01em; color: var(--charcoal); }
.svt-dots { display: flex; gap: 6px; }
.svt-dots i { width: 9px; height: 9px; border-radius: 50%; background: #c4d8ec; }
.svt-dots i.on { background: var(--gold); }
.svt-copy .h3 { max-width: 460px; }
.svt-copy p { margin-top: 14px; max-width: 470px; font-size: 18px; line-height: 1.45; color: var(--charcoal); }
.svt-copy .btn { margin-top: 26px; }
/* Bühne für das UI-Element zwischen Kopfzeile und Text */
.svt-stage { flex: 1; display: grid; place-items: center; min-height: 0; }

.svt-media { position: relative; margin: 0; min-height: 600px; border-radius: 40px; overflow: hidden; background: var(--cloud); }
.svt-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svt-ui .ui { position: relative; left: auto; top: auto; transform: none; }
.svt-ui .chat { position: relative; left: auto; top: auto; width: 360px; transform: none; }
.svt-ui .bubble { font-size: 15px; }
.svt-ui .meta-lab, .svt-ui .meta-praxis { color: #7d8ea3; }

/* UI-Elemente für KV, Garantie und Abrechnung */
.kv { width: 330px; display: grid; gap: 12px; }
.kv .step-chip { transform: rotate(-1.5deg); }
.kv-doc { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; rotate: 1.5deg; translate: 18px 0; }
.kv-doc strong { display: block; font-size: 15px; line-height: 1.3; color: var(--obsidian); }
.kv-doc small { display: block; font-size: 13px; color: var(--charcoal); margin-top: 2px; }
.kv-time { margin-left: auto; align-self: flex-start; font-size: 12px; color: var(--slate); white-space: nowrap; }
.warranty { width: 290px; padding: 22px 24px 18px; border-radius: 18px; rotate: 2deg; box-shadow: var(--shadow-ui), var(--shadow-xl); }
.warranty small { display: block; font-size: 11px; letter-spacing: .08em; font-weight: 500; color: var(--slate); }
.warranty strong { display: block; margin-top: 8px; font: 500 46px/1 var(--font-ui); letter-spacing: -0.05em; color: var(--obsidian); }
.warranty > span { display: block; margin-top: 8px; font-size: 14px; color: var(--charcoal); }
.warranty-foot { display: flex; align-items: center; margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); }
.warranty-foot .ico { width: 22px; height: 22px; color: var(--gold); }
.bill { width: 320px; padding: 8px; border-radius: 18px; rotate: -1.5deg; box-shadow: var(--shadow-ui), var(--shadow-xl); }
.bill-head { padding: 10px 12px 12px; font-size: 14px; font-weight: 500; color: var(--obsidian); }
.bill-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 12px; font-size: 14px; color: var(--charcoal); }
.bill-row:nth-child(even) { background: var(--mist); }
.bill-row em { font-style: normal; padding: 3px 8px; border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--charcoal); background: var(--cloud); }
.bill-row em.beb { color: var(--gold-ink); background: var(--gold-wash); }

@media (max-width: 1023px) {
  .svt-panel { grid-template-columns: 1fr; }
  .svt-card { min-height: 0; gap: 28px; }
  .svt-stage { padding: 4px 0; }
  .svt-media { min-height: 380px; }
  /* Fünf Reiter passen nicht nebeneinander: die Leiste scrollt seitlich, der Schieber scrollt mit */
  .svt-tabs { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
  .svt-tabs::-webkit-scrollbar { display: none; }
}
@media (max-width: 767px) {
  .svt { width: calc(100% - 16px); }
  .svt-tab { height: 44px; padding: 0 16px; font-size: 15px; }
  .svt-thumb { height: 44px; }
  .svt-card { padding: 24px 24px 28px; border-radius: 32px; }
  .svt-copy p { font-size: 16px; }
  .svt-media { min-height: 280px; border-radius: 32px; }
  .svt-ui { width: 100%; display: flex; justify-content: center; }
  .svt-ui .chat { width: 100%; }
  .svt-ui .bubble { font-size: 14px; max-width: 230px; }
  .svt-ui .bubble-row img { width: 36px; height: 36px; }
  .svt-ui .chat .meta-praxis { margin-left: 48px; }
  .kv, .bill { width: 290px; }
  .warranty { width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .svt-thumb, .svt-card, .svt-media { transition: none; transform: none; }
}


/* ---------- Karriere im Stimmen-Look (2026-11-05) ----------
   Die frühere Stimmen-Sektion (gekreuzte Instrumente über einem großen Panel) trägt jetzt die Stellen.
   Karten, Ringe und Karussell kommen aus site.css (.voices, .voice, .voice-track). */
.career-voices .voices { margin-top: 300px; }
.career-voices .voices-panel .sec-head { display: block; margin-bottom: 120px; }
.career-voices .voices-panel .sec-head .lead { max-width: 520px; }
.career-voices .career-title { font-weight: 400; }
.career-voices .career-title .mute { color: #51505a; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .career-voices .career-title .mute {
    --g1: #34323b;
    --g2: #696671;
    background-image: linear-gradient(180deg, var(--g1) 25%, var(--g2));
    color: transparent;
  }
}
.job-voice { align-items: center; text-align: center; padding-top: 84px; }
.job-icon {
  position: absolute; left: 50%; top: -60px; width: 120px; height: 120px; border-radius: 50%; transform: translateX(-50%);
  display: grid; place-items: center; background: var(--gold-wash); box-shadow: 0 0 0 5px #fff, 0 12px 26px -12px rgba(134, 103, 31, .45);
}
.job-icon .ico { width: 44px; height: 44px; color: var(--gold-ink); stroke-width: 1.6; }
.job-voice .tag { align-self: center; box-shadow: inset 0 0 0 1px var(--line); }
.job-voice .h4 { margin-top: 18px; }
.job-voice .pay { margin-top: 8px; font-size: 16px; line-height: 1.49; color: var(--charcoal); }
.job-voice ul { list-style: none; width: fit-content; margin: 18px auto 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; text-align: left; font-size: 16px; line-height: 1.49; color: var(--charcoal); }
.job-voice li { display: flex; gap: 8px; align-items: center; }
.job-voice li .ico { flex: none; width: 15px; height: 15px; color: var(--gold); stroke-width: 2.2; }
.job-voice .job-link { margin-top: auto; padding-top: 26px; display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 500; color: var(--obsidian); }
.job-voice .job-link .ico { width: 16px; height: 16px; stroke-width: 2; }
.career-voices .apply-card { margin-top: 100px; }
@media (max-width: 767px) {
  .career-voices .voices { margin-top: 210px; }
  .career-voices .voices-panel .sec-head { margin-bottom: 72px; }
  .career-voices .apply-card { margin-top: 56px; }
}


.service-eyebrow {
  align-self: flex-start;
  padding: 3px;
}
.service-eyebrow .eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-size: 12px;
}
.service-eyebrow .eyebrow-tag::before {
  flex: 0 0 8px;
  height: 8px;
  margin: 0;
}

/* ---------- Leistungen: drei Kacheln unter den großen Karten (2026-11-05) ----------
   Das Objekt ist der Blickfang, darunter eine Zeile Titel und höchstens zwei Zeilen Text,
   damit die Kacheln dieselbe Sprache sprechen wie die großen Karten darüber. */
.svc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 36px; }
.svc-tile { display: flex; flex-direction: column; padding: 32px 36px 36px; border-radius: 40px; background: var(--cloud); }
.svc-tile-stage { display: flex; align-items: center; justify-content: center; height: 230px; margin-bottom: 22px; }
.svc-tile-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.svc-tile p { margin-top: 8px; font-size: 17px; line-height: 1.4; color: var(--charcoal); text-wrap: pretty; }
@media (max-width: 1023px) {
  .svc-tiles { gap: 16px; margin-top: 16px; }
  .svc-tile { padding: 24px 24px 28px; border-radius: 32px; }
  .svc-tile-stage { height: 170px; margin-bottom: 18px; }
  .svc-tile p { font-size: 16px; }
}
/* Mobil: Text links, Objekt rechts, damit die drei Kacheln nicht drei Bildschirme füllen */
@media (max-width: 767px) {
  .svc-tiles { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .svc-tile { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 16px; align-items: center; padding: 20px 20px 20px 24px; }
  .svc-tile-stage { grid-column: 2; grid-row: 1 / 3; height: 104px; margin: 0; }
  .svc-tile .h4 { align-self: end; }
  .svc-tile p { align-self: start; margin-top: 4px; font-size: 15px; }
}


/* ---------- Karriereseite (2026-11-05) ----------
   Aufbau wie gehabt (Wolken-Hero, Stelle, Labor, Bewerbung, FAQ), Bausteine von der Startseite.
   Hier steht nur, was davon abweicht. */
.page-karriere .sky-panel .kicker .hero-kicker { margin-bottom: 0; }
/* Pille im Hero als Glas, gleiche Bauweise wie der Header (hero-redesign.css): 10 % Weiß, Hintergrund-Blur, feine Kontur und Lichtkante */
.page-karriere .sky-panel .kicker .hero-kicker {
  position: relative; isolation: isolate; color: #0c0b0d;
  background: rgb(255 255 255 / 10%);
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 0 0 .5px #ffffff59, 0 2px 6px -3px #1823320d, 0 10px 22px -14px rgba(8, 40, 120, .45);
}
.page-karriere .sky-panel .kicker .hero-kicker::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; padding: .75px;
  background: linear-gradient(125deg, #ffffff66, #ffffff0a 35%, transparent 65%, #ffffff40);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
@media (prefers-reduced-transparency: reduce) {
  .page-karriere .sky-panel .kicker .hero-kicker { background: rgb(255 255 255 / 86%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Fakten-Karten gleich hoch, anders als die Kontaktkarten mit dem großen Formular in der Mitte */
.page-karriere .sky-panel .contact-grid { align-items: stretch; }
.page-karriere .ccard.is-fact { transform: none; }
.job-stelle .voices { margin-top: 270px; }
.job-stelle .voices-obj { width: 230px; top: -170px; }
.job-stelle .voices-panel { padding-top: 170px; }
.job-stelle .job-voice { padding-top: 84px; }
.job-stelle .job-voice .h4 { margin-top: 0; }
.job-stelle .job-voice ul { padding-top: 16px; margin-top: 16px; }
.job-stelle .job-voice li { align-items: flex-start; }
.job-stelle .job-voice li .ico { margin-top: 5px; }

/* Labor-Kacheln: UI-Elemente statt Objekte, damit das Bild zeigt, worum es in der Kachel geht */
.job-chips { display: grid; gap: 12px; width: min(100%, 296px); }
.job-chips .step-chip { text-align: left; }
.job-chips .step-chip:nth-child(1) { rotate: -1.5deg; }
.job-chips .step-chip:nth-child(2) { rotate: 1.5deg; translate: 8px 0; }
.chat.job-chat { position: relative; left: auto; top: auto; width: min(100%, 320px); transform: none; }
.job-chat .bubble { max-width: 250px; font-size: 14px; }
.job-chat .bubble-meta { font-size: 12px; margin-top: 4px; }
.job-chat .meta-lab { max-width: 250px; justify-content: flex-end; }
.job-chat .meta-praxis { max-width: 250px; margin-left: 0; }
.job-chat .bubble-praxis { margin-top: 12px; width: fit-content; }
.job-learn { display: grid; justify-items: center; gap: 16px; }
.job-learn .job-icon { position: static; width: 92px; height: 92px; transform: none; box-shadow: 0 0 0 5px #fff, 0 12px 26px -12px rgba(134, 103, 31, .45); }
.job-learn .job-icon .ico { width: 36px; height: 36px; }
.job-learn .lab-check { margin: 0; padding: 0; justify-content: center; }
.job-bewerben .sec-head { margin-bottom: 56px; }

@media (max-width: 1023px) {
  .job-tiles { grid-template-columns: 1fr; gap: 12px; }
  .job-tiles .svc-tile-stage { height: 190px; }
}
@media (max-width: 767px) {
  .job-stelle .voices { margin-top: 200px; }
  .job-stelle .voices-obj { width: 170px; top: -120px; }
  .job-stelle .voices-panel { padding-top: 130px; }
  .job-tiles .svc-tile { display: flex; align-items: stretch; padding: 24px 24px 28px; }
  .job-tiles .svc-tile-stage { grid-column: auto; grid-row: auto; height: 190px; margin: 0 0 18px; }
  .job-tiles .svc-tile .h4, .job-tiles .svc-tile p { align-self: stretch; }
  .job-tiles .svc-tile p { margin-top: 6px; font-size: 16px; }
  .job-bewerben .sec-head { margin-bottom: 32px; }
}


/* ---------- Stil 2: Labor-Karten der Karriereseite (Referenz: 07-feedback-runde-2/design-loop/reference/stil2.png) ----------
   Weiße Karte in dickem, blassem Rahmen, Tonobjekt rechts oben, Verlaufs-Diagramm mit Tooltip. */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stat-card { padding: 11px; border-radius: 47px; background: #eeeef1; box-shadow: 0 34px 60px -36px rgba(20, 30, 60, .4); }
.stat-inner { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; border-radius: 36px; background: #fff; }
.stat-obj { position: absolute; top: 4px; right: -10px; width: 156px; height: auto; pointer-events: none; }
.stat-text { position: relative; z-index: 1; padding: 28px 28px 0; text-align: left; }
.stat-label { display: block; font: 500 14px/1.2 var(--font-ui); letter-spacing: -0.01em; color: #6b6b74; }
.stat-value { margin-top: 10px; font: 400 34px/1.08 var(--font-ui); letter-spacing: -0.045em; color: #0c0b0d; white-space: nowrap; }
.stat-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 6px 12px; border-radius: 100px; background: #f2f2f4; box-shadow: inset 0 0 0 1.5px #dcdce0; font: 500 13px/1.2 var(--font-ui); letter-spacing: -0.01em; color: #1a1a1d; }
.stat-chip .ico { width: 14px; height: 14px; stroke-width: 2.2; color: var(--gold-ink); }
.stat-chart { margin-top: auto; padding-top: 44px; }
.stat-plot { position: relative; margin: 0 22px; height: 128px; }
.stat-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.stat-dot { position: absolute; z-index: 2; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #0a49cf, 0 2px 6px rgba(10, 73, 207, .45); }
.stat-tip { position: absolute; z-index: 2; padding: 6px 11px; border-radius: 11px; white-space: nowrap; transform: translate(-50%, calc(-100% - 15px)); font: 500 13px/1.1 var(--font-ui); letter-spacing: -0.01em; color: #fff; background: linear-gradient(180deg, #6ba6f6, #1f6fe6); box-shadow: inset 0 0 0 1.5px rgba(10, 73, 207, .7), inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 26px 7px rgba(31, 120, 238, .5); }
.stat-tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; margin-left: -5px; background: #1f6fe6; transform: rotate(45deg); border-radius: 2px; }
.stat-axis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 8px 22px 16px; text-align: center; font: 500 12.5px/1.2 var(--font-ui); letter-spacing: -0.01em; color: #6b6b74; white-space: nowrap; }
@media (max-width: 1240px) {
  .stat-grid { gap: 16px; }
  .stat-value { font-size: 28px; }
  .stat-obj { width: 126px; top: 6px; right: -8px; }
  .stat-plot, .stat-axis { margin-inline: 16px; }
}
@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .stat-value { font-size: 34px; }
  .stat-obj { width: 156px; top: 4px; right: -10px; }
}
@media (max-width: 767px) {
  .stat-grid { gap: 12px; }
  .stat-card { padding: 8px; border-radius: 38px; }
  .stat-inner { border-radius: 30px; }
  .stat-text { padding: 24px 22px 0; }
  .stat-value { font-size: 30px; }
  .stat-obj { width: 126px; right: -8px; top: 4px; }
  .stat-plot, .stat-axis { margin-inline: 14px; }
}
@media (max-width: 374px) {
  .stat-value { font-size: 25px; }
  .stat-obj { width: 96px; }
}


/* ---------- Kartenhülle aus Stil 1 (2026-11-05) ----------
   Verlauf von oben nach unten, helle Kontur, weicher tiefer Schatten. Gilt für alle weißen Karten; Inhalt und Maße bleiben.
   Zum Zurücksetzen diesen Block löschen. Sicherung: 07-feedback-runde-2/vorher-runde-8/. */
:root {
  /* 2026-11-06 (Anton): heller, mehr Weiß, neutral grau statt Blaustich.
     Weiß hält bis 45 %, dann sanft zu #f8f8f8. Schatten und Ring in neutralem Schwarz statt Marineblau.
     Vorher: #fff → #f5f6f9, Schatten rgba(20,30,60,…), Felder #eceef3 (Sicherung: 08-hero-grau/sections-v2-vor-neutral.css). */
  --glass-bg: linear-gradient(180deg, #fff 0%, #fff 45%, #f8f8f8 100%);
  --glass-ring: 0 0 0 1px rgba(255, 255, 255, .92), 0 0 0 2px rgba(0, 0, 0, .04);
  --glass-shadow: inset 0 2px 0 #fff, var(--glass-ring), 0 2px 4px rgba(0, 0, 0, .045), 0 34px 54px -26px rgba(0, 0, 0, .22);
  --glass-shadow-flat: inset 0 2px 0 #fff, var(--glass-ring), 0 2px 4px rgba(0, 0, 0, .045);
  --glass-field: #f0f0f0;
}
.voice, .ccard, .apply-card, .job, .step:not(.is-active),
#leistungen :is(.card-big, .svc-tile) {
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
}
/* Die untere Kartenreihe liegt über dem Schatten der oberen Karten. */
#leistungen .svc-tiles {
  position: relative;
  z-index: 1;
}
.stat-inner { background: var(--glass-bg); box-shadow: inset 0 2px 0 #fff; }
/* Labor-Karten der Karriereseite (Abformung und Scan, Chat, Weiterbildung): gleiche Hülle wie alle Karten */
.job-tiles .svc-tile { background: var(--glass-bg); box-shadow: var(--glass-shadow); }
/* Felder, Auswahl-Chips und Segmentschalter brauchen auf dem Verlauf einen Hauch mehr Grau, sonst verschwinden sie im unteren Kartenteil */
.ccard .field input, .ccard .field textarea, .apply-card .field input, .apply-card .field textarea { background: var(--glass-field); }
.ccard .field input:focus, .ccard .field textarea:focus, .apply-card .field input:focus, .apply-card .field textarea:focus { background: #fff; }
.ccard .chips label, .apply-card .chips label, .ccard .seg { background: var(--glass-field); }
.ccard .chips input:checked + label, .apply-card .chips input:checked + label { background: #fff; }
@media (max-width: 767px) {
  /* Unscharf angeschnittene Nachbarkarten im Karussell: Hülle ohne den großen Schatten (spart Malarbeit beim Wischen) */
  .voice:not(.is-active) { box-shadow: var(--glass-shadow-flat); }
}

/* ---------- Outline-Panelsystem (2026-11-06) ----------
   Von außen nach innen: 1-px-Linie → graues Band → helles Panel → Schatten des Panels, der nur ins Band fällt.
   Werte und Herkunft: 03-projekt/08-hero-grau/panel-system-outline/README.md. Der Hero nutzt dieselben Werte (.hero-frame). */
:root {
  /* Linie mit Verlauf: oben hell, unten kräftiger (Anton, 2026-11-06). */
  --ol-line: #cdcdcd;
  --ol-line-grad: linear-gradient(180deg, #e0e0e0 0%, #c9c9c9 100%);
  /* Band hell und fast flach. Das Dunkel unten kommt vom Schlagschatten des Panels, nicht vom Verlauf (Anton, 2026-11-06). */
  --ol-band: #f1f1f1;
  --ol-band-grad: linear-gradient(180deg, #f3f3f3 0%, #efefef 100%);
  /* Inneres Panel im Stil der Stellen-Karten (Kartenhülle): oben weiß, unten neutrales Hellgrau,
     weiße 1-px-Kontur mit feinem grauem Ring außen, weiße Lichtkante oben innen. */
  --ol-panel: #fff;        /* reines Weiß, für den Hero (Motiv und Video haben weißen Grund) */
  --ol-panel-bg: var(--glass-bg);
  --ol-panel-inset: inset 0 2px 0 #fff;
  --ol-panel-ring: var(--glass-ring);
  --ol-shadow: 0 2px 4px rgba(0, 0, 0, .055), 0 12px 20px -8px rgba(0, 0, 0, .25);
  --ol-rim: var(--ol-panel-inset);
}
/* Bewerbungskarte (Startseite und Karriereseite) im Outline-Stil, ersetzt den Stil-2-Glasring (alter Stand: Commit f75733b).
   ::before ist Linie + Band (per Maske nur der Ring), ::after wirft den Schatten aufs Band,
   clip-path schneidet den Schatten an der äußeren Linie ab. */
.apply-card {
  --ol-w: 14px; --ol-r: 36px;
  isolation: isolate; border-radius: var(--ol-r);
  background: var(--ol-panel-bg); box-shadow: var(--ol-panel-inset);
  clip-path: inset(calc(-1 * (var(--ol-w) + 1px)) round calc(var(--ol-r) + var(--ol-w) + 1px));
}
.apply-card::before,
#kontakt .ccard-main::before {
  content: ""; position: absolute; inset: calc(-1 * (var(--ol-w) + 1px)); z-index: -2; box-sizing: border-box;
  padding: var(--ol-w); border: 1px solid transparent; border-radius: calc(var(--ol-r) + var(--ol-w) + 1px); pointer-events: none;
  /* Band-Verlauf innen, Linien-Verlauf in der 1-px-Kante */
  background: var(--ol-band-grad) padding-box, var(--ol-line-grad) border-box;
  box-shadow: inset 0 1px 0 #ffffffb3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
/* Über dem Band: weiße Kontur + grauer Ring der Kartenhülle und der Schlagschatten */
.apply-card::after,
#kontakt .ccard-main::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--ol-panel-ring), var(--ol-shadow);
}
@media (max-width: 767px) {
  .apply-card { --ol-w: 8px; --ol-r: 32px; width: calc(100% - 40px); }
  .apply-card::after { box-shadow: var(--ol-panel-ring), 0 2px 3px rgba(0, 0, 0, .055), 0 8px 14px -6px rgba(0, 0, 0, .23); }
}

/* Das Outline-Band der Schnellbewerbung als Milchglas auf dem Himmel. */
#kontakt .ccard-main {
  --ol-w: 12px;
  --ol-r: 32px;
  isolation: isolate;
  border-radius: var(--ol-r);
  box-shadow: var(--ol-panel-inset);
}
#kontakt .ccard-main::before {
  border-color: rgb(255 255 255 / .5);
  background: linear-gradient(180deg, rgb(255 255 255 / .36), rgb(255 255 255 / .22)) padding-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .36);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}
#kontakt .ccard-main::after {
  clip-path: inset(calc(-1 * (var(--ol-w) + 1px)) round calc(var(--ol-r) + var(--ol-w) + 1px));
}
#kontakt .ccard-main .big {
  font-family: var(--font);
  font-size: clamp(34px, 3.1vw, 44px);
}
@media (max-width: 1180px) {
  #kontakt .ccard-main { --ol-w: 8px; }
}
@media (max-width: 1023px) {
  #kontakt .ccard-main .big { font-size: clamp(28px, 9.8vw, 42px); }
}
@media (max-width: 374px) {
  #kontakt .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Äussere Kontaktkarten: Titel, Kontaktdaten und nächster Schritt. */
.ccard-side {
  min-width: 0;
  min-height: 0;
  padding: clamp(22px, 2.2vw, 32px);
}
.ccard-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--charcoal);
  font: 500 12px/1.3 var(--font-ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ccard-kicker .ico { width: 15px; height: 15px; color: var(--gold-ink); }
.ccard-title {
  margin-top: 11px;
  color: var(--obsidian);
  font: 400 clamp(24px, 2.15vw, 31px)/1.13 var(--font);
  letter-spacing: -.05em;
  text-wrap: balance;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ccard-title {
    background: linear-gradient(180deg, #0c0b0d 20%, #55535b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.ccard-details {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--charcoal);
  font: 400 15px/1.45 var(--font-ui);
  overflow-wrap: anywhere;
}
.ccard-detail {
  display: block;
  margin-bottom: 5px;
  color: var(--obsidian);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.025em;
}
a.ccard-detail {
  width: fit-content;
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: .22em;
}
.ccard-side .card-link { font-size: 14px; }
.ccard-side ul { margin-block: 18px 24px; font-size: 15px; }
.ccard-side > .btn { margin-top: auto; }
@media (min-width: 1024px) {
  .ccard-side { min-height: 420px; }
}

/* ---------- „Für wen“: Karten im Stil 2 mit großem Bildpanel (2026-11-06) ----------
   Vorlage: Antons Referenz (Karte mit Bildfläche oben, Fließtext mit dunklen Schlüsselwörtern darunter).
   Hülle = Kartenhülle (--glass-bg, --glass-shadow): feine doppelte Kontur, Schlagschatten, leichter Verlauf.
   Bildkante: hellgraue 1-px-Linie (Anton, 2026-11-06). Die vorherige Kante in der Farbe des Bildrands
   (unscharfe, aufgehellte Kopie hinter dem Bild) hat Anton verworfen. Vorher-Stand: 03-projekt/08-hero-grau/vorher-fuer-wen/ */
#fuer-wen .card-big.fw-card {
  min-height: 0; padding: 10px; border-radius: 40px; overflow: visible;
  background: var(--glass-bg); box-shadow: var(--glass-shadow);
}
.fw-media {
  --ring: 1px;            /* Anton: 2 px war zu dick */
  position: relative; margin: 0; padding: var(--ring); aspect-ratio: 4 / 3;
  border-radius: 30px; overflow: hidden; background: #e4e4e4;
}
.fw-media img { display: block; max-width: none; }
.fw-img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(30px - var(--ring)); }
.fw-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 26px 30px 30px; }
/* Headline + Subheadline, ohne Eyebrow (Anton, 2026-11-06) */
#fuer-wen .fw-title { margin: 6px 0 0; max-width: 470px; }
.fw-sub { margin: 10px 0 28px; max-width: 520px; font: 400 18px/1.4 var(--font-ui); letter-spacing: -.02em; color: #66656b; text-wrap: pretty; }
.fw-body > .btn { margin-top: auto; }
@media (max-width: 767px) {
  #fuer-wen .card-big.fw-card { padding: 8px; border-radius: 32px; }
  .fw-media { border-radius: 24px; }
  .fw-img { border-radius: calc(24px - var(--ring)); }
  .fw-body { padding: 20px 18px 22px; }
  .fw-sub { margin: 8px 0 22px; font-size: 16px; }
}