/* Genussco — Farbwelt & gemeinsame Muster (übernommen aus dem Designer-Prototyp) */
:root {
  --color-bg: #f7f1ea;
  --color-surface: #efe5da;
  --color-text: #231f1e;
  --color-accent: #231f1e;
  --color-divider: color-mix(in srgb, #231f1e 38%, transparent);
  --color-accent-100: #f4e9dd;
  --color-accent-200: #e4c4a6;
  --color-accent-300: #d3ac87;
  --color-accent-400: #b98f66;
  --color-accent-500: #966b45;
  --color-accent-600: #3b322c;
  --color-accent-700: #6b4e36;
  --color-accent-800: #4a3626;
  --color-accent-900: #2e2119;
  --color-neutral-100: #faf6f1;
  --color-neutral-200: #efe8e0;
  --color-neutral-300: #ddd3c8;
  --color-neutral-400: #c0b4a6;
  --color-neutral-500: #a0958a;
  --color-neutral-600: #7f766d;
  --color-neutral-700: #625b54;
  --color-neutral-800: #45403b;
  --color-neutral-900: #2e2b28;
}
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); }
input[type="checkbox"] { accent-color: var(--color-accent); width: 16px; height: 16px; }
.btn { white-space: nowrap; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }
@keyframes gcPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* wiederkehrende Muster aus dem Prototyp */
.kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; }
.lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.microlbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.choice { border: 2px solid var(--color-divider); padding: 9px 14px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-align: left; background: transparent; color: var(--color-text); }
.choice.on { background: var(--color-accent); color: var(--color-bg); }
.choice:disabled { opacity: .4; cursor: default; }
.choice:hover:not(.on):not(:disabled) { background: var(--color-accent-100); }
.imgslot { position: absolute; inset: 0; background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-neutral-600); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 0; }
.okbox { border: 2px solid var(--color-accent); background: var(--color-accent-100); padding: 18px 20px; }
.errbox { border: 2px solid #a33; background: #f6e2dd; padding: 12px 16px; font-size: 14px; }
.topbar { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; padding: 12px 40px; border-bottom: 2px solid var(--color-divider); background: var(--color-bg); }
.topbar .navlink { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px; border: 0; background: transparent; color: var(--color-text); cursor: pointer; text-decoration: none; }
.topbar .navlink:hover, .topbar .navlink.on { background: var(--color-accent-100); }
.staffbar { position: sticky; top: 0; z-index: 50; background: #231f1e; color: #f7f1ea; display: flex; align-items: center; gap: 20px; padding: 0 20px; height: 52px; flex-wrap: wrap; }
.staffbar .snav { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 8px 14px; border: 0; cursor: pointer; text-align: left; background: transparent; color: rgba(247,241,234,.7); }
.staffbar .snav.on { background: var(--color-accent-200); color: #231f1e; }
.staffbar .ghost { font-family: var(--font-heading); font-weight: 700; font-size: 13px; padding: 7px 14px; border: 1px solid rgba(247,241,234,.35); background: transparent; color: #f7f1ea; cursor: pointer; }
.stepper { padding: 4px 10px; min-width: 30px; justify-content: center; }
.footer { padding: 36px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px), 1fr)); gap: 24px; font-size: 13px; }
.footer a { cursor: pointer; color: var(--color-neutral-700); text-decoration: none; }
.footer a:hover { color: var(--color-accent-700); }
table.table td, table.table th { padding: 8px 10px; border-bottom: 1px solid var(--color-neutral-300); }
/* Fotos in Farbe zeigen (Design-System-Vorgabe Schwarzweiß bewusst übersteuert) */
.grayscale, .grayscale img { filter: none !important; }

/* ---------- Mobil & Tablet (Go-Live 06.08.) ----------
   Die Seite war nur fuer Desktop gebaut — hier responsive nachgezogen:
   grosse Ueberschriften umbrechen/verkleinern, Kopfzeile schlank, keine
   horizontalen Ueberlaeufe. */
/* Lange Woerter umbrechen, aber NICHT automatisch silbentrennen — die
   Auto-Trennung zerteilte u. a. „Geschmack" (Nutzer 06.08.); lange Titel
   loesen wir gezielt per ­ bzw. voller Breite (wideTitle). */
h1, h2, h3 { overflow-wrap: break-word; }

@media (max-width: 900px) {
  /* Kopfzeile: schmaleres Padding, Aktionsknoepfe umbrechen unter die Nav */
  .topbar { padding: 10px 18px; gap: 10px 16px; }
  .topbar > div:last-child { margin-left: 0 !important; width: 100%; }
  .topbar > div:last-child .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
  .footer { padding: 30px 22px; }
  /* Grosse Ueberschriften schon auf Tablet massvoll verkleinern (kein Wortbruch) */
  h1 { font-size: clamp(30px, 6vw, 50px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 4.6vw, 40px) !important; }
}

@media (max-width: 640px) {
  /* Grosse Ueberschriften an kleine Screens anpassen (ueberschreibt Inline-Groessen) */
  h1 { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(23px, 6.5vw, 32px) !important; line-height: 1.12 !important; }
  /* Grosszuegige Innenabstaende auf dem Handy reduzieren */
  .topbar { padding: 9px 14px; }
}