/* ============================================================
   Natursteine Keck — Prototyp
   Statische Umsetzung des Claude-Design-Prototyps (redesign-2)
   Zwei Design-Varianten, umschaltbar über data-theme am <html>:
   (Standard)          Warm-Editorial  · EB Garamond / Source Sans 3
   [data-theme="teal"] Klassisch Teal  · Spectral / Archivo
   ============================================================ */

/* ---------- Fonts (lokal, latin) ---------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/spectral-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/spectral-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2');
}

/* ---------- Design-Tokens: Warm-Editorial (Standard) ---------- */
:root {
  --bg: #faf8f4;
  --dark: #0c2a2c;
  --dark-2: #004e54;
  --dark-3: #0e3033;
  --dark-4: #1c3f40;
  --dark-line: #23494a;
  --on-dark: #e6efee;
  --on-dark-soft: #a9c5c3;
  --on-dark-2: #cfe0df;
  --on-dark-3: #8fb3b1;
  --on-dark-4: #7fa5a3;
  --on-dark-5: #5f8583;
  --teal: #7fc4c2;
  --accent: #ffb98a;
  --accent-soft: #ffc598;
  --text: #3a352f;
  --text-strong: #26201a;
  --text-2: #5a544b;
  --text-3: #4a443c;
  --text-4: #7a7264;
  --text-5: #6f665a;
  --muted: #8a8172;
  --muted2: #a99e8c;
  --muted-3: #a99a82;
  --line: #e2ddd4;
  --line-soft: #ece6da;
  --line2: #cfc7b8;
  --line-hover: #c9bfad;
  --line-3: #e6e0d6;
  --line-4: #e0dacf;
  --line-5: #d8d0c0;
  --bg-3: #f0ece4;
  --bg-4: #efeae0;
  --link: #006e78;
  --link-h: #008691;
  --ink: #0f0905;
  --sel-text: #0f0905;
  --display: 'EB Garamond', Georgia, serif;
  --body: 'Source Sans 3', Arial, sans-serif;
  --header-bg: rgba(250, 248, 244, 0.96);
  --header-bg-stuck: rgba(250, 248, 244, 0.85);
}

/* ---------- Design-Tokens: Klassisch Teal ---------- */
:root[data-theme="teal"] {
  --bg: #ffffff;
  --dark: #00707b;
  --dark-2: #005760;
  --dark-3: #06626c;
  --dark-4: #0a5560;
  --dark-line: #2f8087;
  --on-dark: #effafa;
  --on-dark-soft: #c3e3e5;
  --on-dark-2: #dcf1f1;
  --on-dark-3: #8fc4c4;
  --on-dark-4: #7fb8b8;
  --on-dark-5: #4f8f8f;
  --teal: #bfe6e7;
  --accent: #ffb98a;
  --accent-soft: #ffc598;
  --text: #243230;
  --text-strong: #152826;
  --text-2: #48534f;
  --text-3: #38433f;
  --text-4: #5f6b68;
  --text-5: #55615e;
  --muted: #6f7d7c;
  --muted2: #96a5a4;
  --muted-3: #93a2a0;
  --line: #e2ecec;
  --line-soft: #eef4f4;
  --line2: #cfdddc;
  --line-hover: #b7cbca;
  --line-3: #e2ecec;
  --line-4: #dce8e8;
  --line-5: #cddcdb;
  --bg-3: #f1f6f6;
  --bg-4: #eef5f5;
  --link: #00707b;
  --link-h: #008691;
  --ink: #0d2b2c;
  --sel-text: #0d2b2c;
  --display: 'Spectral', Georgia, serif;
  --body: 'Archivo', Arial, sans-serif;
  --header-bg: rgba(255, 255, 255, 0.96);
  --header-bg-stuck: rgba(255, 255, 255, 0.85);
}

/* ---------- Basis ---------- */
html, body { margin: 0; padding: 0; }
body { background: var(--bg); }
a { color: var(--link); }
a:hover { color: var(--link-h); }
::selection { background: var(--accent-soft); color: var(--sel-text); }

@keyframes headerReveal {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 200;
  left: 0;
  right: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  font-family: var(--body);
}
.site-header.is-stuck {
  position: fixed;
  top: 0;
  background: var(--header-bg-stuck);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(12, 42, 44, 0.09);
  animation: headerReveal .68s cubic-bezier(.22, 1, .32, 1) both;
}
.header-spacer { height: 0; }
.header-spacer.is-stuck { height: 77px; }
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 76px;
}
.header-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}
.header-logo { height: 90px; width: auto; display: block; transition: height .4s ease; }
.header-logo.logo-sticky { display: none; height: 46px; }
.is-stuck .header-logo.logo-default { display: none; }
.is-stuck .header-logo.logo-sticky { display: block; }
.header-nav { display: flex; align-items: center; gap: 26px; }
.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-strong);
  text-decoration: none;
  padding: 6px 0;
  white-space: nowrap;
}
.nav-link:hover { color: var(--link-h); }
.nav-active-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
}
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 18px;
  white-space: nowrap;
}
.header-tel:hover { background: var(--dark-2); color: #fff; }

/* ---------- Footer ---------- */
.footer-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 40px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  gap: 56px;
}
.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--on-dark-4);
}

/* ---------- Hover-Utilities ----------
   Ersetzen die style-hover-Attribute der DC-Runtime. Die Runtime machte
   jede Hover-Deklaration !important, weil die Basis-Styles inline stehen —
   das muss hier exakt so nachgebildet werden. */
.hov-c-linkh:hover { color: var(--link-h) !important; }
.hov-c-white:hover { color: #fff !important; }
.hov-c-accent:hover { color: var(--accent-soft) !important; }
.hov-bg-dark2:hover { background: var(--dark-2) !important; }
.hov-bg-accent:hover { background: var(--accent-soft) !important; }
.hov-bg-dark2-bc:hover { background: var(--dark-2) !important; border-color: var(--dark-2) !important; }
.hov-bg-white15:hover { background: rgba(255, 255, 255, 0.15) !important; }
.hov-bc-dark:hover { border-color: var(--dark) !important; }
.hov-bc-dark-c:hover { border-color: var(--dark) !important; color: var(--dark) !important; }
.hov-bc-accent-c:hover { border-color: var(--accent-soft) !important; color: var(--accent-soft) !important; }
.hov-bc-linehover:hover { border-color: var(--line-hover) !important; }
.hov-bc-linkh-c:hover { border-color: var(--link-h) !important; color: var(--link-h) !important; }
.hov-lb-close:hover { background: var(--accent-soft) !important; color: var(--ink) !important; border-color: var(--accent-soft) !important; }
.hov-bg-white:hover { background: #fff !important; }
.hov-bg-dark:hover { background: var(--dark) !important; }

/* ---------- Theme-Umschalter ---------- */
.theme-switch {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line2);
  background: var(--bg);
  box-shadow: 0 4px 18px rgba(12, 42, 44, 0.14);
  font-family: var(--body);
}
.theme-switch button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  color: var(--muted);
}
.theme-switch button.active {
  background: var(--dark);
  color: #fff;
  cursor: default;
}
.theme-switch button:not(.active):hover { color: var(--link-h); }

/* ============================================================
   Seiten-spezifisches Zustands-CSS
   ============================================================ */

/* ---------- Grabmale: Galerie-Viewer + Lightbox ---------- */
@keyframes gIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.gv-cap { animation: gIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.gv img { opacity: 0; transition: opacity .6s ease; }
.gv.m0 img:nth-of-type(1), .gv.m1 img:nth-of-type(2), .gv.m2 img:nth-of-type(3), .gv.m3 img:nth-of-type(4), .gv.m4 img:nth-of-type(5), .gv.m5 img:nth-of-type(6), .gv.m6 img:nth-of-type(7), .gv.m7 img:nth-of-type(8), .gv.m8 img:nth-of-type(9) { opacity: 1; }
.gv-th > button { cursor: pointer; padding: 0; border: none; background: none; position: relative; overflow: hidden; outline: 1px solid var(--line-4); outline-offset: -1px; transition: outline-color .2s; }
.gv-th > button img { transition: transform .5s ease; }
.gv-th > button:hover img { transform: scale(1.06); }
.gv-th.m0 > button:nth-of-type(1), .gv-th.m1 > button:nth-of-type(2), .gv-th.m2 > button:nth-of-type(3), .gv-th.m3 > button:nth-of-type(4), .gv-th.m4 > button:nth-of-type(5), .gv-th.m5 > button:nth-of-type(6), .gv-th.m6 > button:nth-of-type(7), .gv-th.m7 > button:nth-of-type(8), .gv-th.m8 > button:nth-of-type(9) { outline: 3px solid var(--link-h) !important; outline-offset: -3px; }
.lb { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.lb.open { display: flex; animation: gIn .3s ease both; }
.lb-stage img { opacity: 0; transition: opacity .4s ease; }
.lb.m0 .lb-stage img:nth-of-type(1), .lb.m1 .lb-stage img:nth-of-type(2), .lb.m2 .lb-stage img:nth-of-type(3), .lb.m3 .lb-stage img:nth-of-type(4), .lb.m4 .lb-stage img:nth-of-type(5), .lb.m5 .lb-stage img:nth-of-type(6), .lb.m6 .lb-stage img:nth-of-type(7), .lb.m7 .lb-stage img:nth-of-type(8), .lb.m8 .lb-stage img:nth-of-type(9) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .gv-cap, .lb.open { animation: none; }
  .gv img, .gv-th > button img, .lb-stage img { transition: none; }
}

/* ---------- Bau & Wohnen: Service-Tabs ---------- */
@keyframes bwIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.bw-tabs > button { transition: background .2s, color .2s, border-color .2s; }
.bw-tabs.s0 > button:nth-of-type(1), .bw-tabs.s1 > button:nth-of-type(2), .bw-tabs.s2 > button:nth-of-type(3), .bw-tabs.s3 > button:nth-of-type(4), .bw-tabs.s4 > button:nth-of-type(5), .bw-tabs.s5 > button:nth-of-type(6), .bw-tabs.s6 > button:nth-of-type(7), .bw-tabs.s7 > button:nth-of-type(8) { background: var(--dark) !important; color: #fff !important; border-color: var(--dark) !important; }
.bw-panel { display: none; }
.bw-panels.s0 > .bw-panel:nth-of-type(1), .bw-panels.s1 > .bw-panel:nth-of-type(2), .bw-panels.s2 > .bw-panel:nth-of-type(3), .bw-panels.s3 > .bw-panel:nth-of-type(4), .bw-panels.s4 > .bw-panel:nth-of-type(5), .bw-panels.s5 > .bw-panel:nth-of-type(6), .bw-panels.s6 > .bw-panel:nth-of-type(7), .bw-panels.s7 > .bw-panel:nth-of-type(8) { display: grid; animation: bwIn .45s cubic-bezier(.16, 1, .3, 1) both; }
.bw-zoom { overflow: hidden; }
.bw-zoom img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.bw-zoom:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .bw-panels .bw-panel { animation: none; }
  .bw-zoom img { transition: none; }
}

/* ---------- Naturstein: Material-Explorer ---------- */
@keyframes matIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.mat-panel { animation: matIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.mat-fig img { opacity: 0; transition: opacity .6s ease, filter .4s ease; }
.mat-fig.m0 img:nth-of-type(1), .mat-fig.m1 img:nth-of-type(2), .mat-fig.m2 img:nth-of-type(3), .mat-fig.m3 img:nth-of-type(4), .mat-fig.m4 img:nth-of-type(5) { opacity: 1; }
.mat-fig.s0 img { filter: contrast(1.08) brightness(1.05) saturate(1.05); }
.mat-fig.s1 img { filter: contrast(.93) brightness(.96) saturate(.9); }
.mat-fig.s2 img { filter: contrast(.97) brightness(1) saturate(.88); }
.mat-sheen { position: absolute; inset: 0; pointer-events: none; transition: background .4s ease, opacity .4s ease; }
.mat-fig.s0 .mat-sheen { background: linear-gradient(120deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.16) 100%); mix-blend-mode: screen; }
.mat-fig.s1 .mat-sheen { background: rgba(86,92,98,.14); }
.mat-fig.s2 .mat-sheen { background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, rgba(0,0,0,.05) 2px 4px); }
.mat-chips > button { transition: background .2s, color .2s, border-color .2s; }
.mat-chips.m0 > button:nth-of-type(1), .mat-chips.m1 > button:nth-of-type(2), .mat-chips.m2 > button:nth-of-type(3), .mat-chips.m3 > button:nth-of-type(4), .mat-chips.m4 > button:nth-of-type(5) { background: var(--dark) !important; color: #fff !important; border-color: var(--dark) !important; }
.surf-ctl > button { transition: background .2s, color .2s; }
.surf-ctl > button:last-child { border-right: none !important; }
.surf-ctl.s0 > button:nth-of-type(1), .surf-ctl.s1 > button:nth-of-type(2), .surf-ctl.s2 > button:nth-of-type(3) { background: var(--dark) !important; color: #fff !important; }
@media (prefers-reduced-motion: reduce) {
  .mat-panel { animation: none; }
  .mat-fig img, .mat-sheen { transition: none; }
}

/* ---------- Restaurierung: Vorher/Nachher + Prozess-Stepper ---------- */
@keyframes rIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.rest-panel { animation: rIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.rest-fig img { opacity: 0; transition: opacity .55s ease; }
.rest-fig.m0 img:nth-of-type(1), .rest-fig.m1 img:nth-of-type(2), .rest-fig.m2 img:nth-of-type(3), .rest-fig.m3 img:nth-of-type(4), .rest-fig.m4 img:nth-of-type(5) { opacity: 1; }
.rest-steps .rst-dot { width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; transition: all .25s ease; background: var(--bg); border: 2px solid var(--line2); }
.rest-steps .rst-label { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; transition: color .25s ease; color: var(--muted); }
.rest-steps.m0 > button:nth-of-type(1) .rst-dot, .rest-steps.m1 > button:nth-of-type(2) .rst-dot, .rest-steps.m2 > button:nth-of-type(3) .rst-dot, .rest-steps.m3 > button:nth-of-type(4) .rst-dot, .rest-steps.m4 > button:nth-of-type(5) .rst-dot { background: var(--link-h); border-color: var(--link-h); box-shadow: 0 0 0 5px rgba(0, 134, 145, 0.14); }
.rest-steps.m0 > button:nth-of-type(1) .rst-label, .rest-steps.m1 > button:nth-of-type(2) .rst-label, .rest-steps.m2 > button:nth-of-type(3) .rst-label, .rest-steps.m3 > button:nth-of-type(4) .rst-label, .rest-steps.m4 > button:nth-of-type(5) .rst-label { color: var(--dark-3); }
.hov-op85:hover { opacity: 0.85 !important; }
@media (prefers-reduced-motion: reduce) {
  .rest-panel { animation: none; }
  .rest-fig img { transition: none; }
}

/* ---------- Unternehmen: Epochen-Timeline + Values ---------- */
@keyframes upIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@keyframes swapIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.era-panel { animation: swapIn .55s cubic-bezier(.16, 1, .3, 1) both; }
.val-card { animation: upIn .6s cubic-bezier(.16, 1, .3, 1) both; transition: transform .3s ease, border-color .3s ease; }
.val-card:nth-child(2) { animation-delay: .1s; }
.val-card:nth-child(3) { animation-delay: .2s; }
.val-card:hover { transform: translateY(-4px); }
.era-fig img { opacity: 0; transition: opacity .55s ease; }
.era-fig.m0 img:nth-of-type(1), .era-fig.m1 img:nth-of-type(2), .era-fig.m2 img:nth-of-type(3), .era-fig.m3 img:nth-of-type(4) { opacity: 1; }
.era-steps .era-dot { width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box; transition: all .25s ease; background: var(--dark); border: 2px solid #4a6c6d; }
.era-steps .era-year { font-family: var(--display); font-size: 20px; transition: color .25s ease; color: var(--on-dark-4); }
.era-steps.m0 > button:nth-of-type(1) .era-dot, .era-steps.m1 > button:nth-of-type(2) .era-dot, .era-steps.m2 > button:nth-of-type(3) .era-dot, .era-steps.m3 > button:nth-of-type(4) .era-dot { background: var(--accent-soft); border-color: var(--accent-soft); box-shadow: 0 0 0 5px rgba(255, 197, 152, 0.18); }
.era-steps.m0 > button:nth-of-type(1) .era-year, .era-steps.m1 > button:nth-of-type(2) .era-year, .era-steps.m2 > button:nth-of-type(3) .era-year, .era-steps.m3 > button:nth-of-type(4) .era-year { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .era-panel, .val-card { animation: none; }
  .era-fig img { transition: none; }
}

/* ---------- Referenzen: Filter, Karten, Detail-Modal ---------- */
@keyframes refIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.ref-card { animation: refIn .5s cubic-bezier(.16, 1, .3, 1) both; }
.ref-card img { transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.ref-card:hover img { transform: scale(1.05); }
.ref-card:hover { border-color: var(--line-hover) !important; }
.ref-card:hover .ref-more { color: var(--link-h); }
.ref-grid.grabmale > button:not([data-cat="grabmale"]), .ref-grid.bau > button:not([data-cat="bau"]), .ref-grid.restaurierung > button:not([data-cat="restaurierung"]) { display: none !important; }
.rf-inner { max-width: 1240px; margin: 0 auto; padding: 18px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; transition: padding .3s cubic-bezier(.22, 1, .32, 1); }
.rf-inner.is-stuck { padding: 8px 40px; }
.rf-btn { padding: 11px 18px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; font-family: inherit; line-height: 1; display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, border-color .2s; background: transparent; color: var(--text); border: 1px solid var(--line2); }
.rf-count { font-size: 12px; color: var(--muted2); }
.rf-bar.f-alle .rf-btn[data-ref-filter="alle"], .rf-bar.f-grabmale .rf-btn[data-ref-filter="grabmale"], .rf-bar.f-bau .rf-btn[data-ref-filter="bau"], .rf-bar.f-restaurierung .rf-btn[data-ref-filter="restaurierung"] { background: var(--dark); color: #fff; border-color: var(--dark); }
.rf-bar.f-alle .rf-btn[data-ref-filter="alle"] .rf-count, .rf-bar.f-grabmale .rf-btn[data-ref-filter="grabmale"] .rf-count, .rf-bar.f-bau .rf-btn[data-ref-filter="bau"] .rf-count, .rf-bar.f-restaurierung .rf-btn[data-ref-filter="restaurierung"] .rf-count { color: var(--teal); }
.rd { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 32px; box-sizing: border-box; }
.rd.open { display: flex; }
.rd-card { animation: refIn .35s cubic-bezier(.16, 1, .3, 1) both; }
.rd-stage img { opacity: 0; transition: opacity .45s ease; }
.rd.m0 .rd-stage img:nth-of-type(1), .rd.m1 .rd-stage img:nth-of-type(2), .rd.m2 .rd-stage img:nth-of-type(3), .rd.m3 .rd-stage img:nth-of-type(4), .rd.m4 .rd-stage img:nth-of-type(5), .rd.m5 .rd-stage img:nth-of-type(6), .rd.m6 .rd-stage img:nth-of-type(7), .rd.m7 .rd-stage img:nth-of-type(8), .rd.m8 .rd-stage img:nth-of-type(9) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ref-card, .rd-card { animation: none; }
  .ref-card img, .rd-stage img { transition: none; }
}

/* ---------- Kontakt & Karriere: Formulare ---------- */
.kf input, .kf textarea, .kf select { font-family: inherit; font-size: 16px; width: 100%; padding: 13px 14px; border: 1px solid var(--line2); background: #fff; color: var(--text-strong); box-sizing: border-box; }
.kf input:focus, .kf textarea:focus, .kf select:focus { outline: 2px solid var(--dark-2); outline-offset: 1px; border-color: var(--dark-2); }
.kf [aria-invalid="true"] { border-color: #a73f1a; background: #fdf4f0; }
.kf label.fld { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-3); margin-bottom: 7px; text-transform: uppercase; }
.kf .err { color: #a73f1a; font-size: 13px; margin-top: 6px; }
.kf .chip { padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .2s; background: #fff; color: var(--text); border: 1px solid var(--line2); }
.kf .chip.active { background: var(--dark); color: #fff; border-color: var(--dark); }
@keyframes kIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.k-done { animation: kIn .45s cubic-bezier(.16, 1, .3, 1) both; }
.kf-drop { transition: border-color .2s, background .2s; }
.kf-drop:hover, .kf-drop.dragover { border-color: var(--link-h) !important; background: #f4efe6 !important; }
.kf-file-x:hover { color: #a73f1a !important; }
@media (prefers-reduced-motion: reduce) {
  .k-done { animation: none; }
}

/* ============================================================
   Mobile-Layer (das Design-Tool-Original ist Desktop-only;
   dies ist eine pragmatische Ergänzung für Geräte < 960px)
   ============================================================ */
@media (max-width: 960px) {
  .header-inner { flex-wrap: wrap; padding: 10px 20px; gap: 12px 16px; }
  .header-logo { height: 56px; }
  .header-nav { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; gap: 20px; }
  .header-tel { padding: 9px 12px; font-size: 13px; }
  .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .grid-2 { gap: 32px !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .ref-grid { grid-template-columns: 1fr !important; }
  .rd-card { grid-template-columns: 1fr !important; overflow-y: auto !important; }
  .rd { padding: 16px; }
  .footer-grid { grid-template-columns: 1fr; padding: 48px 20px 32px; gap: 36px; }
  .footer-bottom { padding: 16px 20px; }
  .rf-inner { padding: 14px 20px; }
  .rf-inner.is-stuck { padding: 8px 20px; }
  .bw-panels .bw-panel { grid-template-columns: 1fr !important; }
  .theme-switch { bottom: 12px; right: 12px; }
}