/* Atlas Shop - Kunden-Gestaltung (Shop, Statusseite).
   Heller, ruhiger, bildgetragener Auftritt. Das Admin-Panel bleibt bewusst
   bei der alten "Blueprint"-Optik (style-admin.css) - hier geht es um
   Vertrauen und Präsentation für Kund:innen, nicht um Werkzeug-Dichte. */

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/spacegrotesk-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/mono400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/mono500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/plexsans.woff2') format('woff2');
}

/* Farben der Marke WöTag (Logo vom 08.10.2026): Grund #1E2125, Schrift
   #F0F2F6, das T #B9DFF1. Das Hellblau traegt nur auf dunklem Grund - im
   hellen Modus ist der Akzent derselbe Farbton, aber dunkel genug fuer Text
   (5,6:1 auf --bg). Alle Text-Paare halten 4,5:1, geprueft beim Rebranding. */
:root {
  --bg: #f5f7f9;
  --bg-raised: #ffffff;
  --bg-sunken: #eaeef2;
  --ink: #1e2125;
  --ink-dim: #58616b;
  --line: #dce2e8;
  --line-strong: #c5cdd6;
  --accent: #1a6a91;
  --on-accent: #ffffff;
  --logo-ink: #1e2125;
  --logo-t: #4aa3d3;
  --ok: #1f7a5c;
  --ok-bg: rgba(31, 122, 92, 0.1);
  --warn: #a6740e;
  --warn-bg: rgba(166, 116, 14, 0.12);
  --bad: #b23a2c;
  --bad-bg: rgba(178, 58, 44, 0.1);

  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* Dunkles Farbschema: greift automatisch nach Systemeinstellung, außer die
   Person hat über den Umschalter oben rechts explizit "hell" gewählt
   (dann sitzt data-theme="light" auf <html> und gewinnt gegen die Media Query). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1e2125;
    --bg-raised: #262a2f;
    --bg-sunken: #2b3036;
    --ink: #f0f2f6;
    --ink-dim: #a4acb6;
    --line: #343a41;
    --line-strong: #474e57;
    --accent: #b9dff1;
    --on-accent: #1e2125;
    --logo-ink: #f0f2f6;
    --logo-t: #b9dff1;
    --ok: #5fb39a;
    --ok-bg: rgba(95, 179, 154, 0.14);
    --warn: #d8a441;
    --warn-bg: rgba(216, 164, 65, 0.14);
    --bad: #e0796a;
    --bad-bg: rgba(224, 121, 106, 0.14);
  }
}

/* Gleiche dunkle Palette, aber erzwungen über den Umschalter - unabhängig
   vom Systemschema (deckt auch "System ist hell, Person will dunkel" ab). */
:root[data-theme="dark"] {
  --bg: #1e2125;
  --bg-raised: #262a2f;
  --bg-sunken: #2b3036;
  --ink: #f0f2f6;
  --ink-dim: #a4acb6;
  --line: #343a41;
  --line-strong: #474e57;
  --accent: #b9dff1;
  --on-accent: #1e2125;
  --logo-ink: #f0f2f6;
  --logo-t: #b9dff1;
  --ok: #5fb39a;
  --ok-bg: rgba(95, 179, 154, 0.14);
  --warn: #d8a441;
  --warn-bg: rgba(216, 164, 65, 0.14);
  --bad: #e0796a;
  --bad-bg: rgba(224, 121, 106, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}
p { margin: 0; }
a { color: var(--accent); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.narrow { max-width: 680px; }

/* --- Kopfzeile --- */
.topbar {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; white-space: nowrap; }
.brand-tag {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.topbar nav { display: flex; gap: 24px; align-items: center; }
.topbar nav a { color: var(--ink-dim); text-decoration: none; font-size: 0.92rem; font-weight: 500; }
.theme-toggle {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.topbar nav a:hover { color: var(--accent); }

/* --- Abschnitte ---
   Bewusst ohne Trennlinien zwischen den Abschnitten - passt besser zum
   "heller, ruhiger" Anspruch oben als harte Regeln, und Hero/USP/Gründer-Notiz
   sollen ohnehin als ein zusammenhängender Einstieg wirken, nicht als
   einzelne, hart geschnittene Kapitel. Trennung entsteht rein über Abstand
   und gelegentlich über --bg-sunken (z.B. die Gründer-Notiz). */
.section { padding: clamp(48px, 7vw, 96px) 0; }
/* Hero → USP-Kacheln → Gründer-Notiz gehören zusammen und bekommen absichtlich
   engere Abstände als die übrigen Kapitel (Werkstatt/Katalog/Bestellen), die
   den vollen Abschnittsabstand behalten. */
#usp, #founder { padding-top: clamp(8px, 1.5vw, 20px); }
#usp { padding-bottom: clamp(8px, 1.5vw, 20px); }
.sheet-index { margin-bottom: 28px; }
.sheet-index .num {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
}
.sheet-index .rule { display: none; }
.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.lede { color: var(--ink-dim); margin-top: 14px; max-width: 58ch; font-size: 1.05rem; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 12px 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn-ghost { background: var(--bg-raised); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: 0.84rem; border-radius: 6px; }

/* --- Karten und Panels --- */
.panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 30px);
  box-shadow: 0 1px 3px rgba(20, 15, 10, 0.04);
}

/* --- Gründer-Notiz ---------------------------------------------------------
   Bewusster Bruch mit dem sonstigen "Sie" der Seite (siehe index.html) - ein
   eigener Ton statt eines eingefärbten .panel, damit der Wechsel als Absicht
   statt als Inkonsistenz wirkt: Byline mit Monogramm statt Fließtext-Wand,
   der LinkedIn-Link als greifbarer Chip statt unauffälliger Inline-Link. */
.founder-note {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(20px, 3vw, 28px);
}
.founder-avatar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.founder-byline { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; }
.founder-byline .name { font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
.founder-byline .role {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.founder-note p { font-size: 0.95rem; line-height: 1.62; color: var(--ink); margin: 0 0 12px; }
.founder-note p:last-child { margin-bottom: 0; }
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 6px 14px 6px 9px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.founder-link:hover { border-color: var(--accent); background: var(--bg-raised); }
.founder-link svg { width: 15px; height: 15px; }
@media (max-width: 520px) { .founder-note { flex-direction: column; } }

.founder-social { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.founder-social-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.founder-social .social-icon { width: 36px; height: 36px; border: 1px solid var(--line-strong); }
.founder-social .social-icon svg { width: 17px; height: 17px; }

/* --- Hero --- */
/* --- Showcase / fertiges Beispielteil (Robo) - jetzt im Hero verwendet --- */
.showcase-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  max-width: 280px;
  margin: 0 auto;
  background: linear-gradient(155deg, #20201d 0%, #141412 100%);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px -20px rgba(20, 15, 10, 0.18);
}
.showcase-card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* --- Werkstatt / Zeitraffer --- */
.werkstatt-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(155deg, #20201d 0%, #141412 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.werkstatt-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.werkstatt-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #f1efea;
  text-align: center;
  padding: 20px;
}
.werkstatt-placeholder .play-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.5px solid rgba(241, 239, 234, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.werkstatt-placeholder .play-ring svg { margin-left: 3px; }
.werkstatt-placeholder .label { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.werkstatt-placeholder .sub { font-size: 0.85rem; color: rgba(241, 239, 234, 0.6); max-width: 34ch; }

/* --- Produktraster --- */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.product {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.product:hover { box-shadow: 0 16px 32px -18px rgba(20, 15, 10, 0.22); transform: translateY(-2px); }
.product-image {
  margin: -22px -22px 4px;
  aspect-ratio: 4 / 3;
  background: var(--bg-sunken);
  overflow: hidden;
  position: relative;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  font-size: 0.8rem;
  background: repeating-linear-gradient(135deg, var(--line) 0 1px, transparent 1px 12px);
}
.product-image-3d { cursor: pointer; }
.product-image-3d:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.turntable-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.turntable-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 8, 6, 0.72);
}
.turntable-modal[hidden] { display: none; }
.turntable-modal-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
}
.turntable-modal-inner {
  position: relative;
  /* Breite/Seitenverhältnis werden nach dem Laden per JS an die tatsächliche Bildauflösung der
     jeweiligen Farbvariante angepasst (sizeTurntableModal in index.html) - der Default hier greift
     nur kurz, bis die erste Datei geladen hat. */
  width: min(640px, 90vw);
  aspect-ratio: 4 / 3;
  max-height: 80vh;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.turntable-modal-inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.turntable-modal-colors { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.turntable-color-btn {
  padding: 6px 16px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.turntable-color-btn:hover { border-color: var(--accent); }
.turntable-color-btn.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised)); }
.turntable-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.turntable-modal-close:hover { background: rgba(0, 0, 0, 0.75); }
.soon-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.product-soon .price { color: var(--ink-dim); }
.product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product h3 { font-size: 1.08rem; font-weight: 600; }
.product .price {
  font-family: var(--mono);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.product .tagline { color: var(--accent); font-size: 0.86rem; font-weight: 500; }
.product .desc { color: var(--ink-dim); font-size: 0.92rem; flex: 1; }
.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.product-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- "Benachrichtige mich" (inaktive Produkte) ----------------------------
   Ersetzt den deaktivierten Button - eigenes, kompaktes Pill-Feld statt
   Eingabefeld + Textbutton nebeneinander, die in der schmalen Produktkarte
   sonst schnell umbrechen. Icon-Button statt Beschriftung spart Breite, das
   Label darüber trägt den eigentlichen Text. */
.interest-label { font-size: 0.76rem; color: var(--ink-dim); margin-bottom: 6px; }
.interest-form {
  display: flex;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-raised);
  transition: border-color 0.15s ease;
}
.interest-form:focus-within { border-color: var(--accent); }
.interest-form input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 4px 8px 14px;
}
.interest-form input:focus { outline: none; }
.interest-form button {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.interest-form button:hover:not(:disabled) { opacity: 0.85; }
.interest-form button:disabled { opacity: 0.5; cursor: default; }
.interest-form button svg { width: 15px; height: 15px; }
.interest-msg { display: flex; align-items: center; gap: 6px; }
select, input, textarea {
  font-family: var(--body);
  font-size: 0.92rem;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--ink);
  width: 100%;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
textarea { resize: vertical; min-height: 80px; }
label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.field[hidden] { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Dateiauswahl im Anfrageformular (Logo, Bilder): als ruhige Flaeche statt
   des nackten Browser-Steuerelements. */
.field input[type="file"] { padding: 10px; background: var(--bg-sunken); border-style: dashed; cursor: pointer; }
.feld-hinweis { font-size: 0.8rem; color: var(--ink-dim); margin: 6px 0 0; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* --- Warenkorb --- */
.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
.cart-line:last-of-type { border-bottom: none; }
.cart-total {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.cart-sub {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* --- Statusanzeigen --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.pill-neu { background: var(--warn-bg); color: var(--warn); }
.pill-bezahlt { background: var(--ok-bg); color: var(--ok); }
.pill-in_warteschlange { background: var(--bg-sunken); color: var(--ink-dim); }
.pill-im_druck { background: var(--ok-bg); color: var(--ok); }
.pill-fertig { background: var(--ok-bg); color: var(--ok); }
.pill-versandt { background: var(--bg-sunken); color: var(--ink-dim); }
.pill-storniert { background: var(--bad-bg); color: var(--bad); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot-live { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dot-live { animation: none; } }

/* --- Fortschrittsbalken --- */
.progress {
  height: 6px;
  background: var(--bg-sunken);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* --- Tabellen --- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--line-strong);
}
td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.9rem; }
tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Meldungen --- */
.msg { padding: 12px 16px; border-radius: 8px; font-size: 0.9rem; margin-bottom: 16px; }
.msg-ok { background: var(--ok-bg); color: var(--ok); }
.msg-bad { background: var(--bad-bg); color: var(--bad); }
.msg-info { background: var(--bg-sunken); color: var(--ink-dim); }
.msg-warn { background: var(--warn-bg); color: var(--warn); }

/* --- Rechtstexte (Impressum, Datenschutz, Widerruf, AGB) --- */
.legal-text { max-width: 68ch; }
.legal-text h2 { font-size: 1.25rem; margin-top: 36px; margin-bottom: 12px; }
.legal-text h2:first-of-type { margin-top: 28px; }
.legal-text p, .legal-text ul { margin-bottom: 14px; font-size: 0.95rem; }
.legal-text ul { padding-left: 20px; }
.legal-text address { font-style: normal; }
.legal-text .placeholder { color: var(--warn); font-weight: 600; }
.hidden { display: none !important; }

/* --- Fußzeile --- */
footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.footer-row {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.social-links { display: flex; gap: 10px; align-items: center; }
.social-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--ink-dim);
}
.social-icon:hover { color: var(--accent); background: var(--bg-sunken); }
.social-icon svg { width: 16px; height: 16px; }

/* ── Kunden-Chat (FINN) ─────────────────────────────────────────────────── */
/* Bewusst als aufklappbare Ecke statt als Vollbild-Overlay: der Katalog ist
   die Hauptsache, der Assistent hilft nur nach. */

#finnToggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--line-strong); font: inherit; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
#finnToggle:hover { filter: brightness(1.08); }

/* Auf dem Telefon wirkt die Pille in voller Desktop-Größe unverhältnismäßig
   groß neben dem restlichen Inhalt - kleinere Schrift/Polsterung, näher an
   die Ecke gerückt. */
@media (max-width: 700px) {
  #finnToggle {
    right: 14px; bottom: 14px;
    padding: 9px 14px; font-size: .86rem; gap: 6px;
  }
  #finnPanel { right: 14px; bottom: 66px; }
}

#finnPanel {
  position: fixed; right: 20px; bottom: 84px; z-index: 60;
  width: min(380px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 140px));
  display: flex; flex-direction: column;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
#finnPanel[hidden] { display: none; }

.finn-head {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.finn-head strong { font-size: .95rem; }
.finn-head small { color: var(--ink-dim); display: block; font-size: .75rem; }

.finn-log { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.finn-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; }
.finn-msg.finn { background: var(--bg-sunken); border: 1px solid var(--line); align-self: flex-start; }
.finn-msg.me { background: var(--accent); color: var(--on-accent); align-self: flex-end; }
.finn-msg.err { background: var(--bad-bg, var(--bg-sunken)); border: 1px solid var(--bad); align-self: flex-start; }

.finn-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.finn-form input { flex: 1; min-width: 0; }

/* --- Beratungsleistungen & Referenzseite ---------------------------------- */
/* Nutzt durchgehend die vorhandenen Tokens und das .panel-Raster aus .products;
   hier stehen nur die Ergaenzungen, die es im Warenkatalog nicht gab. */

.service-card { display: flex; flex-direction: column; }

.service-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.25;
  margin: 0 0 6px;
}

.service-tagline {
  font-size: 0.92rem;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 500;
}

.service-outcomes {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 7px;
}
.service-outcomes li {
  position: relative;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--ink-dim);
  line-height: 1.45;
}
/* Haken statt Aufzaehlungspunkt: Es sind Ergebnisse, keine Merkmale. */
.service-outcomes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

.service-proof,
.service-goodfor {
  font-size: 0.85rem;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.service-goodfor { border-top: none; padding-top: 0; margin-top: 8px; }
.service-proof .eyebrow,
.service-goodfor .eyebrow { display: block; margin-bottom: 3px; }

.service-preis {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.service-preis strong { font-family: var(--mono); font-weight: 600; }
/* Ohne Preisfreigabe steht hier ein Satz statt einer Zahl - bewusst ruhiger,
   damit die Karte nicht wie ein unvollstaendiges Angebot wirkt. */
.service-preis-offen { color: var(--ink-dim); font-style: italic; display: block; }

.service-card .product-actions { margin-top: auto; padding-top: 18px; }

/* --- Ablauf auf /technik --------------------------------------------------- */

.tech-ablauf {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 26px 0 0;
  display: grid;
  gap: 2px;
}
.tech-schritt {
  border-left: 2px solid var(--line-strong);
  padding: 16px 0 18px 22px;
  position: relative;
}
.tech-schritt::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.tech-schritt:last-child { border-left-color: transparent; }

.tech-schritt-kopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.tech-schritt-kopf .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
}
.tech-schritt-kopf strong {
  font-family: var(--display);
  font-size: 1.02rem;
}
.tech-schritt .desc { margin: 0; }

@media (max-width: 760px) {
  #printerPanel { grid-template-columns: 1fr !important; }
  #werkstatt-hinweis .panel { grid-template-columns: 1fr !important; }
}

/* --- Hero mit Video ------------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero-video {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  /* Feste Proportion, damit beim Laden nichts springt. */
  aspect-ratio: 4 / 3;
}
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-video { aspect-ratio: 16 / 9; }
}
/* Wer Bewegung reduziert haben will, bekommt das Standbild. */
@media (prefers-reduced-motion: reduce) {
  .hero-video video { animation: none; }
}

/* --- Fallstudien auf /systeme --------------------------------------------- */
/* Einspaltig statt im Kartenraster: Die Texte sind laenger als Produktkarten,
   und nebeneinander wuerde jede Spalte zu schmal zum Lesen. */
.fallstudien { grid-template-columns: 1fr; gap: 18px; }
.fallstudie { max-width: 78ch; }
.fallstudie .service-outcomes li { font-size: 0.9rem; }

/* --- Referenzprojekt-Block mit Zeitraffer --------------------------------- */
.werkstatt-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(22px, 3vw, 40px);
  align-items: center;
}
.werkstatt-video {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  aspect-ratio: 16 / 9;
}
.werkstatt-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 820px) {
  .werkstatt-grid { grid-template-columns: 1fr; }
}

/* --- Zwei Preiswege je Leistung ------------------------------------------- */
.service-preis-wege {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line-strong);
  padding-top: 14px;
  margin-top: 16px;
}
.preis-weg { display: grid; gap: 2px; }
.preis-weg-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.preis-weg-betrag { font-size: 0.9rem; }
.preis-weg-betrag strong { font-family: var(--mono); font-weight: 600; }
.preis-weg-note { font-size: 0.8rem; color: var(--ink-dim); line-height: 1.45; }

/* --- Kundenstimmen -------------------------------------------------------- */
.stimme { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.stimme blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.55;
  /* Typografische Anfuehrungszeichen kommen aus dem CSS, nicht aus den Daten -
     so muss niemand beim Eintragen daran denken. */
  quotes: "\201E" "\201C";
}
.stimme blockquote::before { content: open-quote; }
.stimme blockquote::after  { content: close-quote; }
.stimme figcaption {
  font-size: 0.85rem;
  color: var(--ink-dim);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

/* --- Häufige Fragen ------------------------------------------------------- */
.faq-liste { margin-top: 26px; border-top: 1px solid var(--line); }
.faq-eintrag { border-bottom: 1px solid var(--line); }
.faq-eintrag summary {
  cursor: pointer;
  padding: 16px 34px 16px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  position: relative;
  list-style: none;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
/* Eigenes Zeichen statt des Browser-Dreiecks, damit es zum Rest passt. */
.faq-eintrag summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.faq-eintrag[open] summary::after { content: "\2212"; }
.faq-eintrag summary:hover { color: var(--accent); }
.faq-eintrag summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq-antwort { padding: 0 34px 18px 0; }
.faq-antwort p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.94rem;
  line-height: 1.65;
  max-width: 62ch;
}
@media (prefers-reduced-motion: reduce) {
  .faq-eintrag summary::after { transition: none; }
}

/* --- Ablauf in vier Schritten --------------------------------------------- */
.ablauf-liste {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 4px;
}
.ablauf-liste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.ablauf-liste li:last-child { border-bottom: 1px solid var(--line); }
.ablauf-num {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  padding-top: 3px;
}
.ablauf-liste strong {
  font-family: var(--display);
  font-size: 1.02rem;
  display: block;
  margin-bottom: 4px;
}
.ablauf-liste .desc { margin: 0; max-width: 64ch; }

/* --- Anfragebereich: Formular + Nebenspalte -------------------------------
   Vorher lagen die Kontaktwege als lose Kacheln ueber dem Formular. Stand nur
   einer davon zur Verfuegung (Telefonnummer nicht gesetzt), schwebte eine
   einzelne Kachel mittig im Nichts. Als eigene Spalte neben dem Formular
   traegt der Block sich auch allein. */
.anfrage-wrap { max-width: 1000px; }
.anfrage-grid {
  display: grid;
  grid-template-columns: 1.55fr 0.9fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.anfrage-neben { display: grid; gap: 16px; position: sticky; top: 92px; }
.anfrage-zusage {
  font-size: 0.85rem;
  color: var(--ink-dim);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.anfrage-zusage strong { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) {
  /* Einspaltig: erst das Formular, dann die Wege - wer scrollt, will meist
     ausfuellen; die Alternativen stehen darunter, nicht davor. */
  .anfrage-grid { grid-template-columns: 1fr; gap: 24px; }
  .anfrage-neben { position: static; }
}

/* --- Direkte Kontaktwege -------------------------------------------------- */
.kontakt-wege { display: grid; gap: 10px; }
.kontakt-weg {
  display: grid;
  gap: 1px;
  padding: 12px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-raised);
}
.kontakt-weg:hover { border-color: var(--accent); }
.kontakt-art { font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.kontakt-wert { font-family: var(--mono); font-size: 0.95rem; }
.kontakt-hinweis { font-size: 0.82rem; color: var(--ink-dim); margin: 12px 0 0; }

/* --- Herkunftszeile unter dem Helden (lib/landing.js, herkunftBereich) ----
   Ein ruhiges Band zwischen zwei Linien statt einer Aufzaehlung. Unten kein
   Abschnittsabstand: Der Held davor und die Leistungen danach bringen ihren
   eigenen mit, sonst klafft hier die doppelte Luecke. */
.section.herkunft { padding-bottom: 0; }
.herkunft-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 32px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.herkunft-label { font-size: 0.75rem; color: var(--ink-dim); letter-spacing: 0.04em; text-transform: uppercase; }
.herkunft-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}
/* Punkt vor jedem Eintrag statt Trenner dazwischen - ein Trenner landet beim
   Umbruch sonst vorn in der neuen Zeile. Haengender Einzug, damit eine
   umbrochene Zeile auf dem Handy unter dem Text beginnt, nicht unter dem Punkt. */
.herkunft-liste li { padding-left: 16px; text-indent: -16px; }
.herkunft-liste li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.15em;
}
@media (max-width: 640px) {
  .herkunft-band { display: grid; gap: 10px; }
  .herkunft-liste { display: grid; gap: 6px; }
}

/* --- Vorstart-Hinweis ueber dem Katalog (public/shop.html, renderPrelaunch)
   [hidden] ausdruecklich: Eine eigene display-Regel wuerde das Attribut
   sonst ueberstimmen, und der Hinweis stuende auch nach dem Start da. */
.prelaunch {
  margin: 0 0 32px;
  padding: 18px 22px;
  max-width: 76ch;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
}
.prelaunch[hidden] { display: none; }
.prelaunch-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); margin-bottom: 6px; }
.prelaunch-text { margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* --- Kompakte Leistungskarten (29.08.2026) --------------------------------
   Die ganze Karte ist ein <a>. Ohne diese Regeln erbt sie die Linkfarbe und
   die Unterstreichung und saehe aus wie ein Textlink in Kastenform. */
a.service-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.service-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
a.service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.service-mehr {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  a.service-card { transition: none; }
  a.service-card:hover { transform: none; }
}

/* Fuenf kurze Karten sollen in einer Reihe stehen. Das Standardraster der
   Shop-Produkte (min. 290px) laesst dafuer nur drei zu und bricht 3+2 um. */
.products-kompakt { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.products-kompakt .service-card { padding: 18px 16px; }
.products-kompakt .service-name { font-size: 1rem; }
.products-kompakt .service-tagline { font-size: 0.84rem; line-height: 1.45; margin-bottom: 0; }

/* --- "Zwei Wege": Text neben die Karten (29.08.2026) ----------------------
   Vorher stand alles untereinander - Überschrift, Einleitung, Kartenreihe,
   Empfehlung - jeweils über die volle Breite. Die Textblöcke sind auf gut
   60 Zeichen begrenzt, also blieb rechts daneben viel Leere, während die
   Sektion in die Höhe lief. Jetzt trägt die linke Spalte den Text, die rechte
   die beiden Karten; die Sektionshöhe richtet sich nach der längeren Spalte
   statt nach der Summe. */
.modelle-grid { display: grid; grid-template-columns: minmax(260px, 0.85fr) 1.6fr; gap: 40px; align-items: start; }
.modelle-text > * { max-width: 46ch; }
.modelle-text h2 { margin-top: 0; }
.modelle-text .desc { margin-top: 18px; }
.modelle-karten { margin-top: 0; }

@media (max-width: 900px) {
  /* Einspaltig: erst der Text, dann die Karten - die Empfehlung rahmt die
     Auswahl, bevor man sie sieht, das liest sich auch so richtig herum. */
  .modelle-grid { grid-template-columns: 1fr; gap: 28px; }
  .modelle-text > * { max-width: 62ch; }
}

/* --- Responsive-Korrekturen (29.08.2026) ---------------------------------- */

/* Sicherheitsnetz: Kein eingebettetes Medium darf breiter werden als sein
   Container. Fehlte bisher global - die vorhandene Regel galt nur dem
   Turntable-Fenster. */
img, video, iframe { max-width: 100%; }

/* Das Produktraster forderte Spalten von mindestens 290px. Bei 320px
   Gerätebreite bleiben nach dem Innenabstand nur 280px übrig, die Seite lief
   also seitlich über. min() lässt die Spalte auf die Containerbreite
   schrumpfen, ohne auf breiten Schirmen etwas zu ändern. */
.products { grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); }

/* Die Kopfzeile hatte zwei Navigationseinträge, inzwischen sind es vier
   (bzw. drei im Shop, mit langen Beschriftungen). Ohne Umbruch schob das die
   ganze Seite auf dem Telefon zur Seite. Bewusst als Umbruch statt als
   Klappmenü: kein JavaScript, alles bleibt sichtbar und mit der Tastatur
   erreichbar. */
.topbar-row { flex-wrap: wrap; row-gap: 10px; }
.topbar nav { flex-wrap: wrap; }

@media (max-width: 700px) {
  .topbar-row { padding-top: 12px; padding-bottom: 12px; }
  .topbar nav {
    gap: 16px;
    width: 100%;
    justify-content: flex-start;
  }
  .topbar nav a { font-size: 0.86rem; }
  /* Der Umschalter gehoert nach oben rechts neben die Marke. Am Ende der
     Linkzeile belegte er im Shop (drei lange Beschriftungen) allein eine
     dritte Zeile. Absolut, weil er im Markup Teil der nav ist - so bleibt die
     Tastaturreihenfolge unveraendert. */
  .topbar-row { position: relative; }
  .topbar nav .theme-toggle {
    position: absolute;
    top: 12px;
    right: clamp(18px, 4vw, 36px);
  }
}

/* Tabellen (nur im Admin-Bereich) haben min-width: 640px. Auf dem Telefon -
   und das Panel ist als App installierbar - muss dafür der Container scrollen,
   nicht die Seite. */
.table-scroll, .panel > table { display: block; overflow-x: auto; }

/* Die Bildmarke steht seit dem 29.08.2026 inline im Markup statt als <img>.
   Nur so erbt sie über currentColor die Textfarbe und dreht damit im
   Dunkelmodus mit - als PNG war sie dort fast unsichtbar (#17181A auf
   #121211). Der Punkt nimmt die Akzentfarbe des jeweiligen Themas. */
.brand-mark { display: block; flex: none; height: 24px; width: auto; }

/* WöTag-Wortmarke (lib/brand.js) seit dem Rebranding am 08.10.2026: ebenfalls
   inline, Schrift und T bekommen ihre Farbe aus --logo-ink und --logo-t. Das
   Hellblau des Logos waere auf hellem Grund kaum zu sehen, deshalb ist das T
   dort dunkler (gleicher Farbton). */
.brand-logo { display: block; flex: none; height: 30px; width: auto; }
.logo-schrift { fill: var(--logo-ink); }
.logo-t { fill: var(--logo-t); }
@media (max-width: 420px) { .brand-logo { height: 26px; } }

/* --- Scan-Bericht fuer Firmenkunden (lib/nfc-report.js) ---------------------
   Saeulenfarbe seit dem Rebranding im Blau der Marke: hell 4,7:1 gegen
   #ffffff, dunkel 8,1:1 gegen #262a2f (Mindestwert fuer Grafik: 3:1). */
.rb { --series-1: #2b7ba8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rb { --series-1: #8ccbea; }
}
:root[data-theme="dark"] .rb { --series-1: #8ccbea; }

.rb-title { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; }
.rb .panel { margin-top: 20px; }
.rb h2 { font-size: 1.15rem; }
.rb-dim { color: var(--ink-dim); }
.rb-small { font-size: 0.85rem; margin: 4px 0 8px; }

/* Zeitraum: eine Reihe ueber allem, was er steuert. */
.rb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.rb-filter a {
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  background: var(--bg-raised);
}
.rb-filter a:hover { border-color: var(--accent); color: var(--accent); }
.rb-filter a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }

/* Kennzahlen: genau eine grosse Zahl, der Rest als Kacheln. */
.rb-hero { margin-top: 22px; }
.rb-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.rb-tile, .rb-hero {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
}
.rb-tile-label { font-size: 0.8rem; color: var(--ink-dim); }
.rb-hero-value { font-size: clamp(2.6rem, 7vw, 3.4rem); font-weight: 600; line-height: 1.1; margin-top: 4px; }
.rb-tile-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-top: 2px; }
.rb-tile-sub { font-size: 0.8rem; color: var(--ink-dim); margin-top: 2px; }

/* Saeulendiagramm in HTML: Text bleibt auf dem Handy in echter Groesse. */
.rb-chart { margin: 18px 0 0; }
.rb-plot { position: relative; height: 200px; margin-left: 40px; }
.rb-tick { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.rb-tick span {
  position: absolute;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rb-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  column-gap: 2px;
  align-items: end;
}
.rb-col { height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.rb-bar {
  display: block;
  width: 100%;
  max-width: 24px;
  background: var(--series-1);
  border-radius: 4px 4px 0 0;
}
.rb-col:hover .rb-bar, .rb-col:focus-visible .rb-bar { filter: brightness(1.15); }
.rb-col:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); border-radius: 3px; }
.rb-x {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  column-gap: 2px;
  margin: 6px 0 0 40px;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
}
.rb-x span { display: flex; justify-content: center; white-space: nowrap; min-width: 0; }
/* Das juengste Datum ragte zentriert ueber den rechten Rand hinaus. */
.rb-x span:last-child { justify-content: flex-end; }
.rb-tip {
  position: absolute;
  top: -6px;
  transform: translate(-50%, -100%);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.rb-tip strong { display: block; font-size: 0.95rem; }
.rb-tip span { font-size: 0.78rem; color: var(--ink-dim); }
.rb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.rb-details { margin-top: 16px; }
.rb-details summary { cursor: pointer; font-size: 0.85rem; color: var(--ink-dim); }
.rb-details table { margin-top: 10px; }

/* Tabellen hier sind schmal genug fuers Handy - die 640px-Mindestbreite der
   Admin-Tabellen wuerde die Seite nur seitlich verschieben. */
/* Ausserdem wieder display: table - die allgemeine Regel ".panel > table"
   macht Tabellen zu Bloecken, die dann nur so breit wie ihr Inhalt werden. */
.rb table, .rb .panel > table { display: table; width: 100%; min-width: 0; }
.rb td, .rb th { padding: 10px 8px; }
.rb th:first-child, .rb td:first-child { padding-left: 0; }
.rb th:last-child, .rb td:last-child { padding-right: 0; }
.rb .rb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb .rb-rank { width: 2.5em; padding-right: 14px; }
.rb-code { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; }
.rb-url { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-dim); word-break: break-all; }
.rb-share-cell { white-space: nowrap; width: 34%; }
.rb-share {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 3.6em);
  height: 8px;
  background: var(--bg-sunken);
  border-radius: 99px;
  overflow: hidden;
}
.rb-share span { display: block; height: 100%; background: var(--series-1); border-radius: 99px; }
.rb-pct { display: inline-block; width: 3.2em; text-align: right; font-size: 0.82rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

.rb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 0 20px; }
.rb-note { margin-top: 28px; font-size: 0.85rem; color: var(--ink-dim); max-width: 70ch; }

.rb-demo {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 10px;
  /* Hinweis, keine Warnung: im Blau der Marke statt im Warnton */
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-raised));
  color: var(--ink);
  font-size: 0.92rem;
  max-width: 70ch;
}
.rb-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* --- NFC-Anhaenger: Angebotsseite (lib/nfc-landing.js) und Startseiten-Teaser --- */
.nl-title { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.05; max-width: 16ch; }
.nl-lede { max-width: 60ch; font-size: 1.12rem; }
.nl-h2 { font-size: clamp(1.5rem, 3vw, 2rem); max-width: 26ch; margin-bottom: 18px; }
.nl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
  margin-top: 8px;
}
.nl-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.nl-card .desc { margin: 0; }
.nl-grid-eng { gap: 22px 28px; }
.nl-punkt { border-top: 2px solid var(--accent); padding-top: 12px; }
.nl-punkt .desc { margin: 6px 0 0; }
.nl-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.nl-zahlen { display: grid; gap: 16px; }
.nl-zahlen > div { border-left: 3px solid var(--accent); padding-left: 14px; }
.nl-zahl { display: block; font-size: 2rem; font-weight: 600; line-height: 1.1; }
.nl-zahl-label { font-size: 0.85rem; color: var(--ink-dim); }
.nl-klein { font-size: 0.8rem; color: var(--ink-dim); margin-top: 8px; }
.nl-schluss { text-align: left; }
.nl-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
.nl-teaser-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .nl-demo, .nl-teaser { grid-template-columns: 1fr; }
}

/* Bild/Video des Anhaengers im Kopf von /nfc-anhaenger - nur wenn die Datei da ist. */
.nl-held {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.nl-medium {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  /* Tripo-Renderings haben oft einen transparenten Grund - der Kasten soll
     dann in beiden Farbschemata ruhig wirken statt schwarz oder grell. */
  background: var(--bg-sunken);
  border: 1px solid var(--line);
}
.nl-medium video, .nl-medium img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .nl-held { grid-template-columns: 1fr; }
  .nl-medium { aspect-ratio: 4 / 3; }
}
/* Markenvideo (hero-woetag.mp4) ist 16:9 - quadratisch zugeschnitten fielen
   Laptop und Drucker links und rechts weg. Grund in der Farbe des Videos,
   damit vor dem ersten Bild kein heller Kasten aufblitzt. */
.nl-medium.nl-medium-breit { aspect-ratio: 16 / 9; background: #1e2125; }
@media (prefers-reduced-motion: reduce) {
  .nl-medium video { animation: none; }
}

/* 2 in 1: Anhaenger + Website (lib/nfc-landing.js, #paket) */
.nl-paket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.nl-paket-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.nl-paket-liste li {
  display: grid;
  gap: 4px;
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}
.nl-paket-liste span { color: var(--ink-dim); font-size: 0.95rem; }
@media (max-width: 760px) {
  .nl-paket { grid-template-columns: 1fr; }
}

/* Preise: die drei Bausteine (Anhaenger, Abo, Kampagnen) nebeneinander,
   auf dem Handy untereinander. Der Betrag steht gross, damit man beim
   Ueberfliegen an ihm haengen bleibt und nicht an der Liste darunter. */
.nl-preise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.nl-preis { display: flex; flex-direction: column; }
.nl-preis h3 { font-size: 1.05rem; margin: 0 0 10px; }
.nl-preis-betrag { font-family: var(--display); font-size: 2.1rem; font-weight: 600; line-height: 1.1; margin: 0; }
.nl-preis-einheit { font-size: 0.85rem; color: var(--ink-dim); margin: 4px 0 14px; }
.nl-preis ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.nl-preis li { position: relative; padding-left: 18px; font-size: 0.95rem; }
.nl-preis li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
@media (max-width: 860px) {
  .nl-preise { grid-template-columns: 1fr; }
}