/* Eine Schrift: Reinton Sans = beschnittene IBM Plex Sans Variable (SIL OFL 1.1, schrift/OFL.txt), 400–700, selbst gehostet.
   «Reinton Ersatz» passt Arial/Helvetica auf ihre Masse an, damit beim Nachladen nichts springt (Werte: werkzeug/schrift.sh). */
@font-face {
  font-family: "Reinton Sans";
  src: url("../schrift/reinton-sans-var.woff2?v=d541a7ceb4") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Reinton Ersatz";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.2%;
  ascent-override: 101.2%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}
:root {
  color-scheme: light dark;
  --font: "Reinton Sans", "Reinton Ersatz", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --bg: #f7f6f3;
  --surface: #fff;
  --text: #1b1d1c;
  --muted: #565e59;
  --border: #d9ded8;
  --accent: #1d6b47;
  --accent-hover: #155237;
  --accent-soft: #edf4ee;
  --accent-border: #b5cdbb;
  --amber: #845000;
  --draft-bg: #fff7e8;
  --button-text: #fff;
  --photo-bg: #fff;
  --photo-border: #d8ddd7;
  --field-border: #858c87; /* Rahmen der Eingabefelder: mind. 3:1 gegen Seite, Feld und accent-soft (pruefung/p2-stand.md) */
  --clear: transparent;
  --max: 1200px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --heading-2: clamp(1.65rem, 2.8vw, 2.5rem);
  --heading-3: 1.2rem;
  --radius: .75rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111713;
    --surface: #1b231e;
    --text: #e9eeea;
    --muted: #b0bcb3;
    --border: #39483d;
    --accent: #7cd4a4;
    --accent-hover: #a0e5bd;
    --accent-soft: #202e25;
    --accent-border: #4c7059;
    --amber: #f0bd68;
    --draft-bg: #2b2418;
    --button-text: #102017;
    --photo-border: #78877d;
    --field-border: #78877d;
  }
}
* { box-sizing: border-box; }
/* Sprungziele und fokussierte Ziele landen unter dem Kopf, der oben stehen bleibt (--kopf, Paket 009), mit dem bisherigen Abstand.
   Als scroll-margin an allem ausser dem Kopf, nicht als scroll-padding am Dokument: Damit rollte Chromium die Seite nach oben,
   sobald ein Ziel im stehenden Kopf den Fokus bekam (Esc im Menü, Fokus zurück auf den Knopf: rund 300 px, gemessen 13.10.) */
main, main *, .site-footer, .site-footer * { scroll-margin-top: calc(var(--kopf) + var(--space-5)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1.0625rem/1.65 var(--font);
  text-align: left;
  overflow-wrap: break-word;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
a[href^="tel:"], .nowrap { white-space: nowrap; }
a, summary, button { -webkit-tap-highlight-color: var(--clear); }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}
h1, h2, h3, p, figure, dl { margin: 0 0 var(--space-5); }
h1, h2, h3 { font-weight: 600; letter-spacing: -.028em; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: 1.08; max-width: 19ch; }
h2 { font-size: var(--heading-2); line-height: 1.18; }
h3 { font-size: var(--heading-3); line-height: 1.35; letter-spacing: -.015em; margin-bottom: var(--space-3); }
p { max-width: 66ch; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
ul, ol { margin-block: 0 var(--space-5); padding-left: 1.35em; }
li { margin-bottom: var(--space-2); }
address { font-style: normal; }
small, .small { font-size: .875rem; line-height: 1.6; }
strong { font-weight: 650; }
.wrap { width: min(var(--max), calc(100% - 80px)); margin-inline: auto; }
/* Keep grid content shrinkable, including technical names and draft notes. */
.wrap *, .product-layout > *, .area-hero > * { min-width: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 10; background: var(--surface); padding: var(--space-3) var(--space-5); }
.skip-link:focus { top: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Platzhalter: Angaben, die noch von René kommen (quelle/angaben.json). Bewusst auffällig. */
.platzhalter {
  color: inherit;
  background: repeating-linear-gradient(135deg, var(--draft-bg) 0 6px, transparent 6px 12px);
  outline: 2px dashed var(--amber);
  outline-offset: 1px;
  border-radius: 2px;
  padding: 0 .2em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.platzhalter-lang { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.platzhalter::after {
  content: "Platzhalter";
  margin-left: .35em;
  padding: 0 .35em;
  border-radius: 3px;
  background: var(--amber);
  color: var(--surface);
  font: 600 .65rem/1.6 var(--font);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .15em;
  white-space: nowrap;
}
/* Aussagen, die René noch bestätigen muss (angaben.json, bestaetigungen). */
.zu-bestaetigen { text-decoration: underline dotted var(--amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.zu-bestaetigen::after {
  content: "bestätigen";
  margin-left: .3em;
  font: 600 .62rem/1 var(--font);
  letter-spacing: .03em;
  color: var(--amber);
  vertical-align: super;
  white-space: nowrap;
  text-transform: uppercase;
}
/* Der Kopf bleibt beim Scrollen oben stehen (Paket 009): deckend, über dem Inhalt, unter «Zum Inhalt» (z-index 10).
   --kopf ist seine Höhe samt Linie. assets/menue.js misst sie, denn je nach Breite und Schriftgrösse hat er eine oder zwei
   Zeilen; ohne JavaScript gelten die Schätzwerte hier und in den Medienabfragen unten. env(safe-area-inset-top) ist 0, solange
   Safari die Seite selbst in den sicheren Bereich setzt (kein viewport-fit=cover); sonst rückt der Inhalt unter die Statusleiste */
:root { --kopf: calc(77px + env(safe-area-inset-top, 0px)); }
.site-header { position: sticky; top: 0; z-index: 3; padding-top: env(safe-area-inset-top, 0px); background: var(--bg); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--space-5); padding-block: var(--space-2); }
.wordmark { color: var(--text); font-size: 1.25rem; letter-spacing: -.04em; font-weight: 700; text-decoration: none; white-space: nowrap; }
.wordmark span { font-weight: 400; }
/* Zwei Gruppen (Paket 008): die Bereiche, dann Über uns, Kontakt, Impressum und Bestellen. Fehlt der Platz für eine Zeile,
   bricht die zweite Gruppe als Ganzes unter die erste um, beide rechtsbündig */
.main-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 var(--space-7); }
.nav-gruppe { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 var(--space-5); }
.nav-haus { column-gap: var(--space-4); }
.main-nav a { font-size: .875rem; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; }
.main-nav a.nav-order { color: var(--accent); font-weight: 650; }
.main-nav a.nav-order::before { content: ""; width: .45em; height: .45em; margin-right: .45em; border-radius: 50%; background: var(--accent); }
/* Kontakt und Impressum als Knöpfe (Renés Wunsch); Rahmen wie der Menü-Knopf, mind. 3:1 gegen den Grund */
.main-nav a.nav-knopf {
  min-height: 2.375rem; padding: 0 var(--space-4); border: 1px solid var(--field-border); border-radius: var(--space-2); color: var(--text);
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.main-nav a.nav-knopf:hover, .main-nav a.nav-knopf[aria-current] { text-decoration: none; }
.main-nav a.nav-knopf[aria-current] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
  .main-nav a.nav-knopf:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
}
.main-nav a.nav-knopf:active { transform: scale(.97); }
/* Menü am Handy (Paket 007): nur unter 900 px sichtbar (Regeln dort) */
.menu { display: none; }
.eyebrow { font-size: .8rem; font-weight: 600; line-height: 1.6; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-4); text-wrap: balance; }
/* Renés Ring (aus seinem Logo, werkzeug/icons.mjs) als Zeichen vor jeder Bereichszeile, in seinen Farben in beiden Varianten (Paket 014) */
.eyebrow::before { content: ""; display: inline-block; flex: none; width: 1.15em; height: 1.15em; margin-right: .6em; vertical-align: -.22em; background: url("../bilder/marke-ring.svg") center / contain no-repeat; }
.hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: var(--space-8); align-items: center; padding-block: var(--space-8); }
.hero h1 { font-size: clamp(2.7rem, 4.6vw, 4.25rem); max-width: 14ch; }
.hero .lead { font-size: 1.125rem; max-width: 36ch; }
.hero-photo, .product-photo, .feature figure { margin: 0; }
.photo-plate { background: var(--photo-bg); border: 1px solid var(--photo-border); border-radius: var(--radius); padding: var(--space-5); overflow: hidden; }
.hero-photo img { width: 100%; }
figcaption { font-size: .875rem; color: var(--muted); margin-top: var(--space-3); line-height: 1.6; }
.hero-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); }
/* One typeface throughout; figures line up through tabular numerals instead of a monospace face. */
.mono, .specs dd, .price, .price-table td, .variant-table td, .timeline-date, .card-number { font-variant-numeric: tabular-nums; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--accent);
  border-radius: var(--space-2);
  background: var(--accent);
  color: var(--button-text);
  font-size: 1rem;
  font-weight: 650;
  text-decoration: none;
  line-height: 1.5;
  text-align: center;
  transition: background-color 150ms ease, border-color 150ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
  .button.secondary:hover { background: var(--accent-soft); }
}
/* Druck sichtbar machen: die Seite hat den Klick gehört */
.button:active { transform: scale(.97); }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.button.secondary { background: var(--clear); color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; margin-top: var(--space-6); }
.actions > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.badge { display: inline-block; flex: none; padding: var(--space-1) var(--space-3); border: 1px solid var(--accent-border); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 650 .8rem/1.5 var(--font); letter-spacing: .02em; text-transform: none; white-space: nowrap; vertical-align: middle; }
.title-with-badge, .feature-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.intro-note { border-top: 1px solid var(--border); padding: var(--space-5) 0 var(--space-6); font-size: .95rem; color: var(--muted); max-width: none; }
.section { padding-block: var(--space-8); border-top: 1px solid var(--border); }
.section-heading { display: flex; justify-content: space-between; gap: var(--space-6); align-items: baseline; margin-bottom: var(--space-6); }
.section-heading h2 { margin: 0; }
.section-heading p { font-size: .95rem; color: var(--muted); margin: 0; }
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.area-card .photo-plate { aspect-ratio: 1.45; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.area-card .photo-plate picture { width: 100%; height: 100%; }
.area-card img { width: 100%; height: 100%; object-fit: contain; }
/* Die Nummer steht im HTML vor dem Link, damit sein Name nur der Titel ist (WCAG 2.5.3); das Raster setzt sie wieder zwischen Foto und Titel */
.area-card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.area-card .card-number { grid-area: 2 / 1; }
.area-link { grid-area: 1 / 1 / 4; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-3); color: var(--text); text-decoration: none; border-radius: var(--radius); }
.area-link h3 { grid-row: 3; margin-bottom: 0; }
.area-link:hover h3, .area-link:focus-visible h3 { color: var(--accent); text-decoration: underline; text-underline-offset: .22em; }
.area-card .card-arrow { color: var(--accent); }
.area-card p { font-size: .95rem; color: var(--muted); }
.card-number { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--space-2); }
/* Bücher und PCB-Services (Paket 008): kein Gerät, darum eine eigene, ruhigere Zeile unter den drei Produktbereichen.
   Quer: Umschlag links, Nummer, Titel und Text rechts; ohne Bild nur der Text. Fehlt eine Karte, nimmt die andere die Zeile */
.area-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.area-card-quer { grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-5); }
.area-card-quer .area-link { grid-area: 1 / 1 / 4 / 3; grid-template-columns: subgrid; margin-bottom: 0; }
.area-card-quer .photo-plate { grid-area: 1 / 1 / 4 / 2; align-self: start; aspect-ratio: auto; margin: 0; padding: var(--space-3); }
.area-card-quer img { height: auto; }
.area-card-quer .card-number { grid-area: 1 / 2; }
.area-card-quer .area-link h3 { grid-area: 2 / 2; margin-bottom: var(--space-3); }
.area-card-quer > p { grid-area: 3 / 2; }
.area-card-text { grid-template-columns: minmax(0, 1fr); }
.area-card-text .card-number { grid-area: 1 / 1; }
.area-card-text .area-link { grid-area: 2 / 1; grid-template-rows: auto; grid-template-columns: minmax(0, 1fr); }
.area-card-text .area-link h3 { grid-area: auto; }
.area-card-text > p { grid-area: 3 / 1; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.feature h2 { max-width: 17ch; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.facts p { font-size: .95rem; color: var(--muted); margin: 0; }
.facts strong { display: block; font-size: 1.1rem; color: var(--text); margin-bottom: var(--space-2); }
.contact-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.contact-strip h2 { margin-bottom: var(--space-3); }
.contact-strip p { color: var(--muted); margin: 0; }
.contact-strip .eyebrow { margin-bottom: var(--space-4); color: var(--accent); }
/* Nicht schrumpfen: die Telefonnummer bricht nie um und ragte bei grosser Standardschrift über den Rand */
.contact-strip .contact-links { flex: none; }
.contact-links { display: flex; flex-direction: column; gap: var(--space-2); overflow-wrap: anywhere; }
.contact-links a { width: fit-content; max-width: 100%; }
.site-footer { margin-top: var(--space-7); padding: var(--space-7) 0 var(--space-5); border-top: 1px solid var(--border); font-size: .875rem; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--space-6); }
.footer-grid strong { color: var(--text); }
.footer-grid a { display: inline-block; margin-bottom: var(--space-2); }
.footer-links, .footer-bereiche { display: flex; flex-direction: column; align-items: flex-start; }
.footer-social { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin-top: var(--space-2); }
.footer-bottom { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: .8rem; }
.page-intro { padding-block: var(--space-8) var(--space-7); }
.page-intro h1 { max-width: 24ch; }
.page-intro > p:not(.eyebrow), .area-hero-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.125rem; max-width: 54ch; margin-bottom: 0; }
.area-intro { padding-bottom: var(--space-6); }
.area-hero h1 { font-size: clamp(2.35rem, 4.7vw, 4.25rem); }
.product-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); list-style: none; padding: var(--space-5) 0 0; border-top: 1px solid var(--border); margin: var(--space-6) 0 0; }
.product-nav li { margin: 0; }
.product-nav a { display: flex; align-items: center; min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--space-2); background: var(--surface); font-size: .9rem; text-decoration: none; }
.product-nav a:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: underline; }
.product { border-top: 1px solid var(--border); padding-block: var(--space-7) var(--space-8); scroll-margin-top: calc(var(--kopf) + 2 * var(--space-5)); }
.product-header { margin-bottom: var(--space-6); }
.product-header h2 { margin-bottom: 0; }
.product-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); align-items: start; }
.product-photo .photo-plate { padding: var(--space-5); }
.product-photo img { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.product-copy { display: grid; gap: var(--space-6); }
.product-section > :last-child { margin-bottom: 0; }
.product-section h3:not(:first-child) { margin-top: var(--space-5); }
.product-copy p, .product-copy ul { font-size: 1rem; }
.specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); font-size: .9rem; line-height: 1.65; margin: 0; }
.specs dt, .specs dd { border-top: 1px solid var(--border); padding-block: var(--space-3); margin: 0; overflow-wrap: anywhere; }
.specs dt { color: var(--muted); padding-right: var(--space-4); }
.specs dd { color: var(--text); }
.purchase { padding: var(--space-5); background: var(--accent-soft); border: 1px solid var(--accent-border); border-top: 3px solid var(--accent); border-radius: var(--radius); }
.purchase h3 { margin-bottom: var(--space-4); }
.purchase .price { font-size: 1.65rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.35; margin-bottom: var(--space-5); color: var(--text); }
.price-label { display: block; font-size: .9rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--muted); margin-bottom: var(--space-2); text-wrap: pretty; }
.price-extra { margin: calc(-1 * var(--space-4)) 0 var(--space-5); font-size: .95rem; color: var(--text); font-variant-numeric: tabular-nums; }
.price-note { font-size: .875rem; line-height: 1.6; color: var(--muted); margin: 0; }
.price-table + .price-note { margin-top: var(--space-4); }
.purchase-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.purchase .button { min-width: min(100%, 220px); }
.mail-order { font-size: .95rem; display: inline-flex; align-items: center; min-height: 44px; }
/* Mehrere Varianten: jede Preiszeile mit eigenem Link ins Formular */
.price-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.price-row .price { margin: 0; }
.purchase .variant-order { min-width: 0; min-height: 44px; padding: var(--space-2) var(--space-4); font-size: .95rem; }
.price-table a.variant-order { display: flex; align-items: center; width: fit-content; min-height: 44px; padding: 0; }
.downloads { display: flex; flex-direction: column; gap: var(--space-3); font-size: .9rem; align-items: flex-start; padding-top: var(--space-5); border-top: 1px solid var(--border); }
.downloads h3, .downloads p { margin: 0; }
.downloads a { max-width: 100%; overflow-wrap: anywhere; }
.product-extra { margin-top: var(--space-7); }
.table-scroll { overflow-x: auto; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--space-2); margin-bottom: var(--space-3); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
th { font-weight: 600; }
thead th { border-bottom-color: var(--accent-border); }
caption { text-align: left; padding: var(--space-3) var(--space-4); color: var(--muted); }
.variant-table { table-layout: fixed; }
.variant-table td { font-size: .875rem; }
.variant-table th:first-child { width: 22%; }
.price-table { table-layout: fixed; }
.price-table td { font-size: .9rem; padding-right: 0; width: 42%; }
.price-table th { font-weight: 400; padding-left: 0; }
.technical-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.technical-gallery figure { margin: 0; display: grid; grid-template-rows: 1fr auto; }
.technical-gallery .photo-plate { height: 100%; display: flex; align-items: center; padding: var(--space-4); }
.faq { margin-top: var(--space-7); max-width: 850px; }
.faq details { border-top: 1px solid var(--border); padding-block: var(--space-3); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
summary { cursor: pointer; min-height: 44px; align-content: center; font-weight: 500; padding-right: var(--space-3); }
.faq details p { margin: var(--space-3) 0 var(--space-2); }
.note { font-size: .9rem; color: var(--muted); }
.safety-note { padding: var(--space-4) var(--space-5); border-left: 3px solid var(--accent); background: var(--surface); }
.about-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.timeline { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.timeline > li { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-7); border-top: 1px solid var(--border); padding-block: var(--space-6); margin: 0; }
.timeline-date { color: var(--accent); font-size: .875rem; font-weight: 600; line-height: 1.8; }
.timeline p:last-child { margin-bottom: 0; }
.history-pictures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-5); }
.history-pictures figure { margin: 0; }
.history-gui { max-width: 437px; }
.history-gui .photo-plate { padding: 0; }
.publication-list { list-style: none; padding: 0; max-width: 66ch; }
.publication-list li { padding-block: var(--space-4); border-bottom: 1px solid var(--border); margin: 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.team-grid h3 { margin-bottom: var(--space-2); }
.team-grid p { color: var(--muted); font-size: .95rem; }
.contact-page { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.contact-address { font-size: 1.25rem; line-height: 1.7; }
.contact-page .contact-links, .legal-section .contact-links { margin-block: var(--space-5); }
.order-steps { list-style: none; counter-reset: step; padding: 0; margin-top: var(--space-5); }
.order-steps li { counter-increment: step; display: flex; gap: var(--space-5); margin-bottom: var(--space-5); }
.order-steps li::before { content: "0" counter(step); color: var(--accent); font-size: .875rem; font-weight: 600; line-height: 1.9; font-variant-numeric: tabular-nums; flex: none; }
.contact-lead { color: var(--muted); }
.order-page { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
.order-intro .order-steps strong { display: block; color: var(--text); }
.order-form fieldset { border: 0; margin: 0 0 var(--space-6); padding: 0; min-width: 0; }
.order-form legend { font-size: var(--heading-3); font-weight: 600; letter-spacing: -.015em; padding: 0; margin-bottom: var(--space-4); }
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--space-4); }
.field-small input { max-width: 9rem; }
.field-row .field-small input { max-width: none; }
.field label { font-size: .9rem; font-weight: 550; }
.optional { font-weight: 400; color: var(--muted); font-size: .85rem; }
.field input, .field select, .field textarea, .order-result textarea {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--surface);
  border: 1px solid var(--field-border); border-radius: var(--space-2); padding: var(--space-3) var(--space-4); min-height: 48px; width: 100%;
}
.field ::placeholder, .order-result ::placeholder { color: var(--muted); opacity: 1; }
.field textarea, .order-result textarea { line-height: 1.5; resize: vertical; }
.field select { appearance: auto; min-height: calc(1.65em + 2 * var(--space-3) + 2px); } /* so hoch wie die Textfelder (Chromium ignoriert line-height im select) */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .order-result textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.field-hint { font-size: .9rem; color: var(--text); background: var(--accent-soft); border-left: 3px solid var(--accent); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.form-submit { display: grid; gap: var(--space-3); justify-items: start; }
.form-submit .small { color: var(--muted); margin: 0; }
button.button { cursor: pointer; font-family: inherit; }
/* «hidden» gilt auch dort, wo eine Regel display setzt (.field, .position-head) */
.order-form [hidden] { display: none; }
/* Positionen: Produkt und Anzahl nebeneinander; ab zwei Positionen mit Kopf «Produkt 2 · Entfernen» und eigener Preiszeile */
.position + .position { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.position-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0; max-width: none; font-size: .8rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.position-fields { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 0 var(--space-4); }
.position-price { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: .95rem; font-variant-numeric: tabular-nums; }
.position.neu { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .position.neu { opacity: 0; transform: translateY(6px); } }
.link-button { font: inherit; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.link-button:hover { text-decoration-thickness: 2px; }
.link-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.order-add { margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
.order-total { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); min-height: calc(1.65em + 2 * var(--space-3)); background: var(--accent-soft); border-left: 3px solid var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; max-width: none; }
/* Ohne gewähltes Produkt ein ruhiger Hinweis in gleicher Höhe (ausserhalb der Live-Region #f-preis, wird also nicht angesagt) */
.order-total-leer { font-weight: 400; color: var(--muted); }
#f-preis:not(:empty) + .order-total-leer { display: none; }
/* Unter 360 px bricht schon «Preis: CHF 168.– zuzüglich Versand» um (braucht 351 px): zwei Zeilen freihalten */
@media (max-width: 359px) { .order-total { display: flex; align-items: center; min-height: calc(2 * 1.65em + 2 * var(--space-3)); } }
/* Ohne JavaScript stellt das Formular keine Mail zusammen: ausblenden, die Seite zeigt dann je Produkt die Mailvorlage (<noscript>) */
@media (scripting: none) { .order-form { display: none; } }
.order-mail-list { margin-bottom: var(--space-4); }
.order-mail-list li { margin-bottom: 0; }
.order-mail-list a { display: inline-flex; align-items: center; min-height: 44px; }
/* Das Ergebnis blendet weich ein (Zustandswechsel sichtbar machen); ältere Browser zeigen es einfach an */
.order-result:not([hidden]) { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .order-result:not([hidden]) { opacity: 0; transform: translateY(6px); } }
.order-result, .order-nojs { margin-top: var(--space-6); padding: var(--space-5); background: var(--accent-soft); border: 1px solid var(--accent-border); border-top: 3px solid var(--accent); border-radius: var(--radius); }
.order-nojs { margin-top: 0; }
.order-result p, .order-nojs p { font-size: .95rem; }
.order-result .order-status { margin: var(--space-3) 0 0; font-size: .875rem; }
.order-result-title { font-size: var(--heading-3); line-height: 1.35; letter-spacing: -.015em; margin-bottom: var(--space-3); }
.order-result-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
/* «Text kopieren» und «Kopiert» gleich breit: der Knopf daneben springt nicht */
#f-kopieren { min-width: 10rem; }
.legal-section > * { max-width: 760px; }
.legal-sections section { border-top: 1px solid var(--border); padding-block: var(--space-6); }
.legal-sections section > :last-child { margin-bottom: 0; }
.error-page { min-height: 52vh; padding-block: var(--space-9); }
.error-page h1 { max-width: 22ch; }
/* The photo stays in view while the long spec column scrolls past. */
@media (min-width: 900px) {
  .product-photo { position: sticky; top: calc(var(--kopf) + var(--space-5)); }
  /* Die Wortmarke behält ihre Breite; den Platz gibt die Navigation her, indem sie umbricht (Paket 008). Unter 900 px nicht:
     dort steht nur «Bestellen» und «Menü» daneben, und bei 20 px Schrift und 320 px Breite muss die Wortmarke nachgeben */
  .wordmark { flex: none; }
}
@media (min-width: 1500px) {
  .hero { padding-block: var(--space-9) var(--space-8); }
}
/* Kopf etwas kleiner, bis er in voller Grösse in eine Zeile passt (gemessen ab 1180 px bei 16 px Schrift, Paket 008; bis dahin
   galt das bis 1050 px). So steht er von rund 1010 px an in einer Zeile, darunter in zwei, ohne dazwischen hin und her zu springen */
@media (max-width: 1179px) {
  :root { --kopf: calc(44px + max(44px, 2.375rem) + 1rem + 1px + env(safe-area-inset-top, 0px)); } /* ohne JavaScript: zwei Zeilen angenommen (900 bis rund 1010 px) */
  .main-nav { column-gap: var(--space-6); }
  .nav-gruppe { column-gap: var(--space-4); }
  .nav-haus { column-gap: var(--space-3); }
  .header-inner { gap: var(--space-4); }
  .wordmark { font-size: 1.125rem; }
  .main-nav a { font-size: .8rem; }
}
@media (max-width: 1050px) {
  .wrap { width: calc(100% - 48px); }
  .hero, .feature, .product-layout { gap: var(--space-6); }
}
@media (max-width: 899px) {
  /* Kopf: Wortmarke links, rechts «Bestellen» und der Knopf «Menü»; die Tafel öffnet unter dem Kopf über dem Inhalt */
  :root { --kopf: calc(max(64px, 3.75rem) + 1px + env(safe-area-inset-top, 0px)); }
  .header-inner { min-height: 64px; gap: var(--space-3); }
  /* Trefffläche 44 px hoch (am PC bleibt die Wortmarke, wie sie war) */
  .wordmark { display: inline-block; line-height: 2.75rem; }
  .main-nav { flex-wrap: nowrap; align-items: center; gap: var(--space-4); }
  .main-nav > .nav-bereiche, .main-nav > .nav-haus > a:not(.nav-order) { display: none; }
  .main-nav > .nav-haus > .nav-order { font-size: .9375rem; }
  /* «Bestellen» nur, wenn es neben Wortmarke und Knopf Platz hat (gemessen 369 px bei 16 px Schrift); in em, damit es
     mit grösserer Standardschrift mitwächst. Darunter steht es nur in der Tafel. Die ganze Gruppe ausblenden, nicht nur den
     Link: Sonst hielte die leere Gruppe ihren Abstand zum Knopf (bei 20 px Schrift 1–2 px Überlauf bei 320 px, Paket 008) */
  @media (max-width: 23.25em) { .main-nav > .nav-haus { display: none; } }
  .menu { display: block; }
  .menu-knopf {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3);
    border: 1px solid var(--field-border); border-radius: var(--space-2); color: var(--text); font-size: .9375rem; font-weight: 600;
    list-style: none; user-select: none; -webkit-user-select: none;
  }
  .menu-knopf::-webkit-details-marker { display: none; }
  .menu[open] > .menu-knopf { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
  .menu-zeichen { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .menu-zu, .menu[open] .menu-auf { display: none; }
  .menu[open] .menu-zu { display: inline; }
  /* Offen ist das Menü ein Blatt über dem ganzen Bildschirm unter dem Kopf (Paket 010): deckend, bis an den unteren Rand, mit
     Abstand zum Home-Balken. Am Bildschirm festgemacht, direkt unter dem Kopf, der dort stehen bleibt (Paket 009). «fixed» statt
     «absolute» im Kopf: axe zählt sonst die Links der Tafel als Nachbarn der halb verdeckten Links darunter (target-size).
     Passt es nicht auf den Bildschirm (quer, grosse Schrift), rollt das Blatt in sich; am Rand rollt die Seite nicht mit */
  .menu-tafel {
    position: fixed; z-index: 5; top: var(--kopf); bottom: 0; left: 0; right: 0; display: flex; flex-direction: column;
    padding: var(--space-3) 24px calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); background: var(--bg);
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* Eine leise Bewegung beim Öffnen; Schliessen sofort. «Bewegung reduzieren» schaltet sie unten ab */
  .menu[open] .menu-tafel { animation: tafel-ein 180ms var(--ease-out); }
  /* Zwei Gruppen in einer Spalte: oben gross die Bereiche, darunter Über uns, Kontakt und Impressum und «Bestellen» als Knopf
     (am Handy unten am Blatt, Regel unter 620 px). Kontakt und Impressum sind hier Zeilen wie alle anderen (die ganze Zeile ist die Trefffläche) */
  .menu-tafel .nav-gruppe { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; max-width: 32rem; }
  .main-nav .menu-tafel a { min-height: 52px; font-size: 1.0625rem; color: var(--text); }
  .main-nav .menu-tafel .nav-bereiche a { min-height: 58px; font-size: 1.375rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.3; border-top: 1px solid var(--border); }
  .main-nav .menu-tafel .nav-bereiche a:first-child { border-top: 0; }
  .menu-tafel .nav-haus { padding-top: var(--space-6); }
  .main-nav .menu-tafel .nav-haus a { color: var(--muted); }
  .main-nav .menu-tafel a.nav-knopf { min-height: 52px; padding: 0; border: 0; border-radius: 0; background: none; transform: none; }
  /* Ohne JavaScript schliesst nichts die offene Tafel: Liegt der Fokus ausserhalb des Menüs (Tab aus der Tafel hinaus, Klick in
     den Inhalt), ist sie ausgeblendet und verdeckt kein fokussiertes Ziel (WCAG 2.2, 2.4.11; Paket 008). Mit JavaScript kommt der
     Fokus nicht hinaus (assets/menue.js) */
  @media (scripting: none) { html:has(:focus:not(.menu, .menu *)) .menu[open] .menu-tafel { display: none; } }
  .main-nav .menu-tafel a:hover, .main-nav .menu-tafel a:active, .main-nav .menu-tafel a[aria-current], .main-nav .menu-tafel a.gewaehlt { color: var(--accent); }
  /* Gewählt (Paket 011): sieht aus wie die Seite, auf der man ist, und die gibt ihre Auszeichnung so lange ab */
  .main-nav .menu-tafel a.gewaehlt { text-decoration: underline; text-underline-offset: 7px; }
  .main-nav .menu-tafel.waehlt a[aria-current]:not(.gewaehlt):not(.nav-order) { color: var(--text); text-decoration: none; }
  .main-nav .menu-tafel .nav-haus a.nav-order {
    justify-content: center; margin-top: var(--space-4); border: 1px solid var(--accent); border-radius: var(--space-2);
    background: var(--accent); color: var(--button-text); font-weight: 650; text-decoration: none;
    transition: transform 160ms var(--ease-out);
  }
  .main-nav .menu-tafel a.nav-order::before { background: currentColor; }
  .main-nav .menu-tafel .nav-haus a.nav-order:active { transform: scale(.97); }
  .main-nav .menu-tafel .nav-haus a.nav-order[aria-current], .main-nav .menu-tafel .nav-haus a.nav-order.gewaehlt { background: var(--accent-soft); color: var(--accent); }
  /* «Bestellen» im Kopf steht offen schon gross im Blatt; daneben wäre es nur ein Ziel, das nichts tut (der Rest ist inert) */
  html:has(.menu[open]) .main-nav > .nav-haus { visibility: hidden; }
  .hero { padding-top: var(--space-7); }
  .hero h1 { font-size: 2.8rem; }
  .product-layout { grid-template-columns: 1fr; }
  .product-photo { width: 100%; max-width: 620px; }
  .product-photo img { max-height: 360px; }
  .product-copy { max-width: 760px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .area-grid { gap: var(--space-5); }
  .about-intro, .contact-page { gap: var(--space-6); }
  .order-page { grid-template-columns: 1fr; gap: var(--space-6); }
  .page-intro { padding-top: var(--space-7); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .wrap { width: calc(100% - 32px); }
  /* Am Handy hochkant steht die zweite Gruppe mit «Bestellen» unten am Blatt, in Reichweite des Daumens */
  .menu-tafel { padding-inline: 16px; }
  .menu-tafel .nav-haus { margin-top: auto; }
  .hero { grid-template-columns: 1fr; padding-block: var(--space-6); gap: var(--space-6); }
  .hero h1 { font-size: clamp(2.35rem, 10vw, 3.5rem); max-width: 15ch; }
  .hero .lead { font-size: 1rem; }
  .actions { gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
  .hero-photo { max-width: 480px; }
  .hero-photo figcaption { font-size: .8rem; }
  .hero-photo .photo-plate { padding: var(--space-4); }
  .intro-note { font-size: .9rem; padding-bottom: var(--space-5); }
  .section { padding-block: var(--space-7); }
  .section-heading { display: block; }
  .section-heading p { margin-top: var(--space-3); }
  .area-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .area-card .photo-plate { aspect-ratio: 1.6; max-height: 280px; }
  .area-card-quer:not(.area-card-text) { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: var(--space-4); }
  .area-card-quer .photo-plate { aspect-ratio: auto; max-height: none; padding: var(--space-2); }
  .feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .facts { gap: var(--space-5); }
  .contact-strip { display: block; }
  .contact-strip .contact-links { margin-top: var(--space-5); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer { margin-top: var(--space-5); }
  .page-intro { padding-block: var(--space-6); }
  .page-intro h1 { font-size: clamp(2.2rem, 9.5vw, 2.8rem); }
  .page-intro > p:not(.eyebrow), .area-hero-copy > p:not(.eyebrow) { font-size: 1rem; }
  .area-hero h1 { margin-bottom: var(--space-3); }
  .area-hero .eyebrow { margin-bottom: var(--space-2); }
  .product-nav { gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); }
  .product-nav a { font-size: .85rem; padding-inline: var(--space-3); }
  .product { padding-block: var(--space-6) var(--space-7); }
  .product-header { margin-bottom: var(--space-5); }
  .product-layout { gap: var(--space-5); }
  .product-photo .photo-plate { padding: var(--space-4); }
  .product-photo img { max-height: 280px; }
  .specs { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .specs dt { font-size: .85rem; padding-right: var(--space-3); }
  .specs dd { font-size: .85rem; }
  .purchase { padding: var(--space-4); }
  .purchase .button { width: 100%; }
  .purchase-actions { gap: var(--space-2); }
  .price-table th, .price-table td { font-size: .85rem; }
  .price-table td { width: 44%; padding-left: var(--space-2); }
  .variant-table { font-size: .9rem; }
  .variant-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .variant-table tbody, .variant-table tr { display: block; }
  .variant-table tbody th { background: var(--accent-soft); }
  .variant-table tr { border-top: 1px solid var(--border); }
  .variant-table th, .variant-table td { display: block; width: 100%; padding: var(--space-2) var(--space-3); border-bottom: 0; }
  .variant-table th:first-child { width: 100%; }
  .variant-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-3); font-size: .85rem; }
  .variant-table td::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--muted); }
  .technical-gallery, .history-pictures, .team-grid, .about-intro, .contact-page { grid-template-columns: 1fr; gap: var(--space-5); }
  .timeline > li { grid-template-columns: 1fr; gap: var(--space-3); }
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: var(--space-3); }
  .position-fields { grid-template-columns: minmax(0, 1fr); }
  .form-submit .button { width: 100%; }
  .contact-address { font-size: 1.1rem; }
  .error-page { padding-block: var(--space-7); }
}
/* Kleine Handys (Höhe bis 600 px, etwa iPhone SE mit Safari-Leisten 375 × 553 oder 320 × 568): enger, damit «Bestellen» beim
   Öffnen ganz im Bild steht, ohne die Tafel zu rollen (Paket 010, Bedingung B1). Bereiche 52 px, Über uns bis Impressum 44 px, «Bestellen» bleibt 52 px */
@media (max-width: 899px) and (max-height: 600px) {
  .main-nav .menu-tafel .nav-bereiche a { min-height: 52px; }
  .main-nav .menu-tafel .nav-haus a:not(.nav-order) { min-height: 44px; }
  .menu-tafel .nav-haus { padding-top: var(--space-3); }
}
/* Offen steht die Seite unter dem Menü still (Paket 010), nur am Bildschirm und unter 900 px. Mit JavaScript hält menue.js sie fest
   (Klasse menue-sperre: body fixed, um den gemerkten Rollstand nach oben verschoben), weil Safari am iPhone mit overflow: hidden
   allein weiter rollt. Ohne JavaScript sperrt overflow: hidden, solange der Fokus nicht hinter der Tafel liegt (dann ist sie
   ausgeblendet, Regel oben). scrollbar-gutter hält die Breite, wo der Rollbalken Platz braucht; overscroll-behavior nimmt das
   Gummiband am Rand */
@media screen and (max-width: 899px) {
  html:has(.menu[open]):not(:has(:focus:not(.menu, .menu *))), html.menue-sperre { overflow: hidden; overscroll-behavior: none; scrollbar-gutter: stable; }
  html.menue-sperre body { position: fixed; left: 0; right: 0; }
}
@keyframes tafel-ein { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --text: #000;
    --muted: #333;
    --border: #bbb;
    --accent: #164e34;
    --accent-soft: #f3f6f3;
    --accent-border: #aaa;
    --amber: #704000;
    --draft-bg: #fff;
    --photo-border: #bbb;
  }
  .main-nav, .skip-link, .product-nav, .button { display: none; }
  .wrap { width: 100%; }
  body { font-size: 11pt; }
  .site-header { position: static; padding-bottom: var(--space-3); } /* nur auf der ersten Seite, nicht auf jeder */
  .hero, .section, .product, .page-intro { padding-block: var(--space-5); }
  .product-layout { grid-template-columns: 1fr 1.4fr; gap: var(--space-5); }
  .hero h1 { font-size: 30pt; }
  h1 { font-size: 28pt; }
  h2 { font-size: 21pt; }
  h2, h3 { break-after: avoid; }
  .photo-plate { break-inside: avoid; }
  a[data-druck-ziel]::after { content: " (" attr(data-druck-ziel) ")"; font-size: 9pt; overflow-wrap: anywhere; }
  /* Als Flex-Element verlöre das ::after sein führendes Leerzeichen */
  .mail-order { display: inline; }
  .hero-photo { max-width: 65mm; justify-self: end; }
  .hero-photo img { max-height: 50mm; object-fit: contain; }
  .purchase, .specs { break-inside: avoid; }
  .site-footer { margin-top: var(--space-5); }
  .faq details > p { display: block; }
  .table-scroll { overflow: visible; }
}

/* logo-anfang: von werkzeug/bauen.mjs angehängt, nur solange quelle/logo.* liegt (Paket 012) */
.wordmark.mit-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; line-height: 1.2; }
.wordmark .wordmark-text { font-weight: 700; }
.logo-bild { display: block; flex: none; }
.logo { display: block; height: 2rem; width: auto; max-width: min(11rem, 42vw); object-fit: contain; object-position: left center; }
.wordmark.nur-logo .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 900px) { .logo { height: 2.5rem; max-width: 14rem; } }
/* Ein breites Logo trägt den Namen selbst und bringt eigenen Rand mit (Renés Logo: oben und unten je rund 13 % der Höhe, Paket 013).
   Darum höher, damit es so gross wirkt wie die Wortmarke vorher; der Kopf bleibt gleich hoch (64 bzw. 76 px, abzüglich 2 × 8 px Polster
   bleiben 48 bzw. 60 px). Von 900 bis 1179 px rechnet --kopf mit 44 px je Zeile, dort 2.75rem */
.wordmark.nur-logo .logo { height: 3rem; max-width: min(12rem, 45vw); }
@media (min-width: 900px) and (max-width: 1179px) { .wordmark.nur-logo .logo { height: 2.75rem; } }
/* Unter 900 px teilt sich der Kopf den Platz mit «Bestellen» und «Menü»: neben einem Bildzeichen steht dort nur «Reinton», «Audio Lab» bleibt für Screenreader */
@media (max-width: 899px) { .wordmark.mit-logo { gap: .5rem; } .wordmark.mit-logo:not(.nur-logo) .wordmark-text > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
/* Ohne helle Fassung steht das Logo im dunklen Modus auf einer hellen Fläche, statt es zu invertieren */
@media (prefers-color-scheme: dark) { .logo-flaeche .logo { box-sizing: content-box; background: #fff; padding: .25rem .4rem; border-radius: .4rem; } }
@media print { .logo-flaeche .logo { background: none; padding: 0; } }
/* Fusszeile (Paket 014): Renés Logo statt des Namens in Schrift (der bleibt für Screenreader), die Fassung passt zum Grund */
.fuss-marke { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.fuss-logo { display: block; height: 4rem; width: auto; max-width: 100%; margin-left: -.55rem; }
.fuss-logo-dunkel { display: none; }
@media (prefers-color-scheme: dark) { .fuss-logo-farbig { display: none; } .fuss-logo-dunkel { display: block; } }
/* Im Druck steht der Name wie vor Paket 014 in Schrift (das Papier braucht kein zweites Logo; der Kopf trägt es auf Seite 1) */
@media print { .fuss-logo { display: none !important; } .fuss-marke .sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; } }
/* logo-ende */

/* farbe-anfang: von werkzeug/bauen.mjs aus quelle/farbe-logo.css angehängt (Paket 014), seite.farbe = logo */
/* Variante B «Renés Logofarben» (Paket 014). bauen.mjs hängt diese Datei an assets/style.css an, solange seite.farbe in
   quelle/angaben.json ein Platzhalter ist (dann gilt sie nur mit ?farbe=logo, assets/farbe.js) oder «logo» ist (dann ohne Bedingung:
   :root wird zu :root). Mit «gruen» fehlt sie ganz.
   Violett trägt, was man anklickt (Links, Knöpfe, Markierungen, Fokus), Orange steht nur dort, wo bestellt wird (Punkt vor
   «Bestellen», Kante der Preisbox), wie der Punkt im Logo. Das Violett des Logos (#9e44ff) selbst erreicht als Text auf hellem
   Grund nur 4.1:1; für Text darum ein dunkleres Violett gleichen Tons, das reine Logoviolett nur als Fläche ohne Text.
   Grauwerte zum Grau des Logos hin (#3b3845) statt zum Grün; dunkler Modus bleibt dunkel. Kontraste: pakete/014-logo-voll.md, Abgabe. */
:root {
  --bg: #f7f5fa;
  --surface: #fff;
  --text: #1c1a21;
  --muted: #5a5664;
  --border: #dcd8e3;
  --accent: #7a2be0;
  --accent-hover: #6420c2;
  --accent-soft: #f2ecfd;
  --accent-border: #cdb8f3;
  --button-text: #fff;
  --photo-border: #dad6e0;
  --field-border: #86828f; /* mind. 3:1 gegen Seite, Feld und accent-soft */
  --orange: #ffa23a; /* Punkt im Logo; nur Fläche, nie Text auf hellem Grund */
  /* Fuss: dunkle Fläche auch im hellen Modus, Renés Logo in der Fassung für dunkle Hintergründe */
  --fuss-bg: #221d2b;
  --fuss-text: #ebe7f1;
  --fuss-muted: #b9b3c4;
  --fuss-link: #cfb2ff;
  --fuss-border: #3b3546;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121016;
    --surface: #1c1922;
    --text: #ece9f1;
    --muted: #b6b0c1;
    --border: #3a3544;
    --accent: #b47cff;
    --accent-hover: #c9a0ff;
    --accent-soft: #251d33;
    --accent-border: #5a4680;
    --button-text: #140a24;
    --photo-border: #7d7789;
    --field-border: #7d7789;
    --fuss-bg: #0c0a10;
    --fuss-border: #2c2834;
  }
}
:root .main-nav a.nav-order::before { background: var(--orange); }
:root .purchase { border-top-color: var(--orange); }
:root .site-footer {
  --text: var(--fuss-text); --muted: var(--fuss-muted); --accent: var(--fuss-link); --border: var(--fuss-border);
  color-scheme: dark; margin-top: 0; border-top: 0; background: var(--fuss-bg); color: var(--muted);
}
:root .fuss-logo-farbig { display: none; }
:root .fuss-logo-dunkel { display: block; }
@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --muted: #333; --border: #bbb; --accent: #5a1fa8; --accent-soft: #f5f2fa; --accent-border: #aaa; --photo-border: #bbb; }
  :root .site-footer { color-scheme: light; background: none; --text: #000; --muted: #333; --accent: #5a1fa8; --border: #bbb; }
}
/* farbe-ende */