/* Chip und Schraube · Fallblatt-Tafel (Richtungsvertrag: .impeccable/surfaces/seite-index-html.md) */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff") format("woff"); font-weight: 700 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-sc-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../fonts/barlow-sc-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --grau: #E5E5E1;            /* Werkstattgrau, Grund (neutral, nicht cremefarben) */
  --grau-tief: #D8D8D3;       /* zweiter Ton für getrennte Flächen */
  --weiss: #FFFFFF;
  --tinte: #1E2023;           /* Anthrazit */
  --leise: #4A4F55;           /* leiser Text auf Grau, 7 : 1 */
  --stahl: #3B3F45;           /* Tafelrahmen */
  --blatt: #15171A;           /* Fallblatt */
  --gelb: #F0B400;            /* nur Anruf */
  --gelb-hell: #FFC933;
  --text-auf-dunkel: #D3D3CE; /* 9 : 1 auf Anthrazit */

  --kopf: "Archivo", "Arial Narrow", Arial, sans-serif;
  --text: "Barlow", Arial, sans-serif;
  --tafel: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;

  --seite: 64px;              /* Seitenabstand */
  --breite: 1312px;
  --abschnitt: clamp(64px, 9vw, 128px);
  --einstieg-oben: clamp(8px, 2vw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--stahl) var(--grau); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--grau); color: var(--tinte); font: 400 clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem)/1.55 var(--text); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }
::selection { background: var(--stahl); color: var(--grau); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 3px; }
.abschnitt--dunkel :focus-visible, .anrufleiste :focus-visible, .fuss :focus-visible { outline-color: var(--grau); }

.innen { width: 100%; max-width: calc(var(--breite) + 2 * var(--seite)); margin-inline: auto; padding-inline: var(--seite); }
.nb { white-space: nowrap; }
.nur-vorleser { text-transform: none; letter-spacing: normal; position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--tinte); color: var(--grau); padding: 10px 16px; font-weight: 600; border-radius: 6px; transition: top .15s ease; }
.sprung:focus { top: 12px; }

/* ---------- Kopf ---------- */
.kopf { position: relative; z-index: 5; }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.marke { display: flex; align-items: center; gap: 12px; min-height: 44px; white-space: nowrap; text-decoration: none; font: 800 1.6rem/1 var(--kopf); letter-spacing: -0.015em; }
.marke img { width: auto; height: 40px; }
.kopf nav ul { display: flex; gap: clamp(18px, 2.4vw, 34px); list-style: none; margin: 0; padding: 0; font: 600 1.0625rem var(--tafel); letter-spacing: 0.06em; text-transform: uppercase; }
.kopf nav a { white-space: nowrap; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: transparent; text-underline-offset: .4em; padding: 8px 2px; transition: text-decoration-color .15s ease; }
.kopf nav a:hover { text-decoration-color: var(--tinte); }
.kopf-tel { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; background: var(--gelb); color: var(--tinte); text-decoration: none; font: 700 1.25rem/1 var(--text); padding: 13px 20px; border-radius: 6px; transition: background-color .15s ease, box-shadow .15s ease; font-variant-numeric: tabular-nums; }
.kopf-tel svg { width: 22px; height: 22px; }
.kopf-tel:hover { background: var(--gelb-hell); box-shadow: 0 6px 14px -6px rgba(30, 32, 35, .45); }
.menue-knopf { display: none; font: 700 1rem var(--tafel); letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--tinte); border: 2px solid var(--tinte); border-radius: 6px; padding: 9px 14px; min-height: 44px; cursor: pointer; }

/* ---------- Einstieg ---------- */
.einstieg { padding-block: var(--einstieg-oben) clamp(48px, 7vw, 96px); padding-inline: var(--seite); }
.einstieg > .innen { display: grid; grid-template-columns: minmax(0, 1fr); }
h1 { font-family: var(--kopf); font-weight: 800; font-size: clamp(2.25rem, 1.2rem + 3.2vw, 3.875rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.lead { font-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.4375rem); line-height: 1.45; color: var(--leise); max-width: 52ch; margin: 18px 0 clamp(24px, 3vw, 36px); }
.knopf { display: inline-block; background: var(--gelb); color: var(--tinte); font: 700 1.25rem/1.2 var(--text); padding: 16px 26px; border-radius: 6px; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; font-variant-numeric: tabular-nums; }
.knopf:hover { background: var(--gelb-hell); box-shadow: 0 10px 18px -8px rgba(30, 32, 35, .5); transform: translateY(-1px); }
.knopf--ruhig { background: transparent; box-shadow: inset 0 0 0 2px var(--tinte); }
.knopf--ruhig:hover { background: var(--tinte); color: var(--grau); box-shadow: inset 0 0 0 2px var(--tinte); transform: none; }
.abschnitt--dunkel .knopf--ruhig { color: var(--grau); box-shadow: inset 0 0 0 2px var(--grau); }
.abschnitt--dunkel .knopf--ruhig:hover { background: var(--grau); color: var(--tinte); }

/* ---------- Tafel ---------- */
.tafel { container-type: inline-size; position: relative; background: var(--stahl); border-radius: 8px; padding: 16px; box-shadow: 0 26px 34px -18px rgba(30, 32, 35, .5), inset 0 0 0 3px #5B6068; }
.tafel table { width: 100%; border-collapse: collapse; color: var(--grau); font: 700 1rem var(--tafel); letter-spacing: .06em; text-transform: uppercase; }
.tafel thead th { font: 600 1rem var(--tafel); letter-spacing: .14em; color: #B5B9BF; text-align: left; padding: 2px 4px 10px; }
.tafel thead th:last-child { text-align: right; }
.tafel th, .tafel td { padding: 6px 4px; text-align: left; font-weight: 700; }
.tafel td { text-align: right; }
.tafel a { text-decoration: none; color: inherit; display: block; }
.tafel tbody tr { position: relative; }
.tafel tbody th a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.js .tafel:not(.hat-kacheln) table { visibility: hidden; }
.js .tafel[data-tafel="start"] { aspect-ratio: 3.4 / 1; }
.tafel tr.anruf { color: var(--tinte); }
.tafel tr.anruf th, .tafel tr.anruf td { background: var(--gelb); }

/* mit Kacheln (Skript): sichtbare Zeichen, Text bleibt für Vorleser */
.tafel.hat-kacheln table { display: block; }
.tafel.hat-kacheln caption { display: none; }
.tafel.hat-kacheln thead { display: block; }
.tafel.hat-kacheln thead tr { display: flex; justify-content: space-between; }
.tafel.hat-kacheln tbody { display: block; }
.tafel.hat-kacheln tbody tr { display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 12fr); column-gap: 4.4cqi; margin-bottom: clamp(5px, .8cqi, 9px); }
.tafel.hat-kacheln tr.anruf th, .tafel.hat-kacheln tr.anruf td { background: transparent; }
.tafel.hat-kacheln th, .tafel.hat-kacheln td { padding: 0; }
.zellen { display: grid; gap: clamp(2px, .3cqi, 4px); }
.zellen--links { grid-template-columns: repeat(22, minmax(0, 1fr)); }
.zellen--rechts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.z { position: relative; display: grid; place-content: center; aspect-ratio: 31 / 54; font: 700 2.6cqi/1 var(--tafel); font-style: normal; letter-spacing: 0; text-transform: uppercase; color: var(--grau);
  background: linear-gradient(#1C1F23 0 49.5%, #0E1013 49.5% 50.5%, var(--blatt) 50.5% 100%); border-radius: 3px; font-variant-numeric: tabular-nums; }
.z::after { content: ""; position: absolute; inset: 49.2% 0 auto; height: 1.5px; background: rgba(0, 0, 0, .7); }
.anruf .z { color: var(--tinte); background: linear-gradient(var(--gelb-hell) 0 49.5%, #C99600 49.5% 50.5%, var(--gelb) 50.5% 100%); }
.tafel tr:hover .z { background: linear-gradient(#272B30 0 49.5%, #0E1013 49.5% 50.5%, #1E2125 50.5% 100%); }
.tafel .anruf:hover .z { background: linear-gradient(#FFD766 0 49.5%, #C99600 49.5% 50.5%, var(--gelb-hell) 50.5% 100%); }
.tafel a:focus-visible { outline: none; }
.tafel tbody tr:has(a:focus-visible) { outline: 3px solid var(--grau); outline-offset: 3px; border-radius: 4px; }
.tafel tbody tr.anruf:has(a:focus-visible) { outline-color: var(--grau); }
.z.schlaegt { transform: scaleY(.9); }
.tafel--klein { align-self: start; max-width: 440px; width: 100%; }
.tafel--klein table, .tafel--klein.hat-kacheln table { max-width: 100%; }
.tafel--klein.hat-kacheln tbody tr { grid-template-columns: minmax(0, 1fr); row-gap: 5px; }
.tafel--klein .z { font-size: 6.6cqi; aspect-ratio: 26 / 44; }
.tafel--klein .zellen--links, .tafel--klein .zellen--rechts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.tafel--klein.hat-kacheln tbody tr + tr { margin-top: 8px; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 128px 64px; }
.abschnitt > .innen, .einstieg > .innen { max-width: var(--breite); padding-inline: 0; }
.abschnitt--hell { background: var(--grau); }
.abschnitt--hell + .abschnitt--hell { background: var(--grau-tief); }
.abschnitt--dunkel { background: var(--tinte); color: var(--text-auf-dunkel); }
.abschnitt--dunkel h2 { color: var(--grau); }
h2 { font-family: var(--kopf); font-weight: 800; font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; margin-bottom: clamp(18px, 2.4vw, 30px); }
.text { display: grid; gap: 1.1em; max-width: 62ch; align-content: start; }
.text > h2 { margin-bottom: clamp(4px, .8vw, 10px); }
.text--breit { max-width: 70ch; }
.text .gross { font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.18 var(--kopf); letter-spacing: -0.015em; color: var(--grau); }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.textlink { display: inline-block; padding-block: 8px; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: .22em; text-decoration-color: currentColor; }
.textlink:hover { text-decoration-thickness: 4px; }
.preis strong { font-weight: 700; color: var(--grau); }
.text > h2 { width: fit-content; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 5px; padding-bottom: 6px; }
@media (prefers-reduced-motion: no-preference) { .abschnitt:target h2 { animation: unterstrich 1.8s cubic-bezier(.22, 1, .36, 1); } }
@media (prefers-reduced-motion: reduce) { .abschnitt:target h2 { background-size: 100% 5px; } }
@keyframes unterstrich { 0% { background-size: 0 5px; } 35% { background-size: 100% 5px; } 80% { background-size: 100% 5px; opacity: 1; } 100% { background-size: 100% 5px; background-image: linear-gradient(transparent, transparent); } }

/* Zeichnung */
.zeichnung { margin: 0; justify-self: center; width: min(100%, 440px); }
.zeichnung svg { width: 100%; height: auto; overflow: visible; }
.zeichnung .teile, .zeichnung .hilfen { fill: none; stroke: var(--grau); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .hilfen { stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .7; }
.zeichnung .achse { stroke: var(--grau); stroke-width: 1.5; stroke-dasharray: 2 9; fill: none; opacity: .6; }
.zeichnung .kopfteil { fill: var(--grau); stroke: var(--grau); }
.zeichnung .nummern circle { fill: var(--grau); }
.zeichnung .teile .kopfteil + path { stroke: var(--tinte); }
.zeichnung .nummern text { font: 800 15px var(--kopf); fill: var(--tinte); }
.zeichnung .nummern text.name { font: 600 21px var(--text); fill: var(--grau); }

/* Beispiel */
.beispiel-bilder { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr); gap: clamp(16px, 3vw, 40px); align-items: start; margin: clamp(32px, 4vw, 56px) 0 22px; }
.bild { display: block; border: 3px solid var(--tinte); border-radius: 10px; overflow: hidden; background: var(--weiss); box-shadow: 0 24px 32px -20px rgba(30, 32, 35, .5); transition: box-shadow .2s ease, transform .2s ease; }
.bild:hover { box-shadow: 0 32px 40px -20px rgba(30, 32, 35, .55); transform: translateY(-3px); }
.bild img { width: 100%; height: auto; }
.bild--handy { border-radius: 22px; }
.hinweis { font: 600 1rem var(--tafel); letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 22px; }

/* ---------- Fuß ---------- */
.fuss { background: var(--tinte); color: var(--text-auf-dunkel); padding-block: 36px; }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: space-between; align-items: center; font-size: 1.0625rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.fuss a { display: inline-block; padding-block: 10px; text-underline-offset: .2em; text-decoration-color: rgba(211, 211, 206, .55); }
.fuss a:hover { text-decoration-color: var(--grau); }
.anrufleiste { display: none; }

/* ---------- Unterseiten ---------- */
.unterseite main { padding-block: clamp(40px, 6vw, 80px); }
.unterseite .text { max-width: 70ch; }
.unterseite h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); margin-bottom: 24px; }
.unterseite .text h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 24px 0 0; }
.unterseite .text ul { margin: 0; padding-left: 1.2em; display: grid; gap: .35em; }
.unterseite .text a { text-underline-offset: .2em; text-decoration-thickness: 2px; }
.unterseite .zurueck { display: inline-block; margin-bottom: 32px; padding-block: 8px; font-weight: 600; text-underline-offset: .22em; text-decoration-thickness: 2px; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1199px) {
  .kopf-innen { flex-wrap: wrap; min-height: 68px; row-gap: 0; }
  .marke { margin-right: auto; }
  .menue-knopf { display: inline-block; }
  .kopf-tel { padding: 11px 16px; font-size: 1.125rem; }
  .kopf nav { flex-basis: 100%; display: none; order: 3; }
  .kopf nav.ist-offen { display: block; padding-bottom: 14px; }
  .kopf nav ul { flex-direction: column; gap: 0; }
  .kopf nav a { display: block; padding: 13px 2px; text-decoration: none; box-shadow: inset 0 -1px 0 rgba(30, 32, 35, .18); }
}
@media (max-width: 1099px) {
  :root { --seite: 32px; }
  .abschnitt { padding: 96px 32px; }
  .zweispaltig { grid-template-columns: minmax(0, 1fr); }
  .zeichnung { justify-self: start; }
}
@media (max-width: 899px) {
  .tafel { padding: 12px; }
  .js .tafel[data-tafel="start"] { aspect-ratio: 0.6 / 1; }
  .einstieg h1 { margin-bottom: 20px; }
  .einstieg .tafel { max-width: 480px; }
  .einstieg .lead { order: 3; margin: 22px 0 0; }
  .tafel.hat-kacheln tbody tr { grid-template-columns: minmax(0, 1fr); row-gap: 5px; margin-bottom: 14px; }
  .z { font-size: 7.4cqi; aspect-ratio: 26 / 44; }
  .zellen--links, .zellen--rechts { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .beispiel-bilder { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); }
}
@media (max-width: 767px) {
  .kopf-tel { display: none; }
  .marke { font-size: 1.35rem; } .marke img { height: 34px; }
  .einstieg { padding-bottom: 40px; }
  .einstieg-text .knopf { display: none; }
  .lead { max-width: none; }
  .abschnitt { padding-block: 56px; }
  .beispiel-bilder { grid-template-columns: minmax(0, 1fr); }
  .bild--desktop { display: none; }
  .bild--handy { max-width: 300px; }
  .anrufleiste { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--tinte); padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 20px -12px rgba(30, 32, 35, .5); }
  .anrufleiste .knopf { display: block; text-align: center; }
  body { padding-bottom: 84px; }
}
@media (max-width: 360px) { .kopf-innen { gap: 8px; } .marke { font-size: 1.1rem; gap: 8px; } .marke img { height: 28px; } .menue-knopf { padding: 9px 10px; } .anrufleiste .knopf { font-size: 1.05rem; padding-inline: 8px; white-space: nowrap; } }
@media (max-width: 400px) { :root { --seite: 16px; } .abschnitt { padding-inline: 16px; } .einstieg { padding-inline: 16px; } }

@media print { .anrufleiste, .menue-knopf { display: none; } }