/* GENUSSRAUM – Seiten-Styles. Komponenten aus ds-classical.css, Farbwelt und Schrift hier überschrieben:
   Hero warmes Fast-Schwarz (Video), Inhalte Creme/Sand, Akzent Kupfer. Überschriften Fraunces, Text Nunito. */

/* — Fonts (selbst gehostet, keine externen Requests) — */
@font-face { font-family: "Fraunces"; font-weight: 300; font-style: normal; font-display: swap; src: url(fonts/fraunces-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/fraunces-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/fraunces-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/fraunces-latin-500-normal.woff2) format("woff2"); }

:root {
  /* Farbwelt Graphit + Kupfer (überschreibt die Rampen des DS) */
  --color-bg: #f6f1ea;          /* Creme */
  --color-surface: #ece4da;     /* Sand */
  --color-text: #2a2420;        /* dunkles Braungrau */
  --color-accent: #b06d47;      /* Kupfer – Linien, Konturen */
  --color-divider: color-mix(in srgb, #2a2420 13%, transparent);
  --color-accent-100: #f8ece4; --color-accent-200: #f0d5c3; --color-accent-300: #d9a17e; --color-accent-400: #c88660;
  --color-accent-500: #b06d47; --color-accent-600: #9a5c3a; --color-accent-700: #8c5233; --color-accent-800: #6b3d25; --color-accent-900: #4a2a19;
  --color-neutral-100: #f3ede6; --color-neutral-200: #e2d9cf; --color-neutral-300: #c9bdb0; --color-neutral-400: #a99c8f;
  --color-neutral-500: #8a7e72; --color-neutral-600: #6e6358; --color-neutral-700: #574d44; --color-neutral-800: #3d352f; --color-neutral-900: #2a2420;
  --link: #8c5233;              /* Kupfer dunkel – Text/Links auf Creme (≥ 4.5:1) */
  --link-light: #d9a17e;        /* Kupfer hell – auf dunklem Grund */
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --font-heading-weight: 400;

  --ink: #0f0d0c;               /* Bühne: warmes Fast-Schwarz */
  --gutter: clamp(16px, 5vw, 48px);
  --stage-gutter: clamp(16px, 6vw, 96px);
  --topbar-h: 64px;
  --buybar-h: 64px;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; font-size: 17px; line-height: 1.6; font-family: var(--font-body); }
img { max-width: 100%; }
[hidden] { display: none !important; } /* hidden schlägt display:flex/grid aus Komponentenklassen */
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-accent); }
.skip:focus { top: 12px; }

/* Platzhalter sichtbar markieren */
mark.ph { background: color-mix(in srgb, var(--color-accent-300) 45%, transparent); color: inherit; padding: 0 3px; border-radius: 2px; font-style: normal; }
.hero mark.ph, .request-visual mark.ph { background: color-mix(in srgb, var(--color-accent-400) 30%, transparent); color: var(--color-accent-100); }

.draft { position: relative; z-index: 60; background: var(--color-accent-200); color: var(--color-accent-900); font-size: 13px; line-height: 1.4; padding: 8px var(--gutter); text-align: center; }

/* — Kopfzeile — */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--ink) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--color-accent-400) 22%, transparent); margin-bottom: calc(-1 * var(--topbar-h)); }
.brand { display: flex; flex-direction: column; text-decoration: none; color: var(--color-neutral-100); min-width: 0; line-height: 1.1; }
.brand:hover { color: var(--color-neutral-100); }
.brand-mark { font-family: var(--font-body); font-weight: 600; font-size: 19px; letter-spacing: 0.22em; }
.brand-sub { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topnav { display: flex; align-items: center; gap: 20px; }
.topnav-link { color: var(--color-neutral-300); font-size: 14px; text-decoration: none; }
.topnav-link:hover { color: var(--color-accent-300); }

/* Buttons: Kontur-Buttons aus dem DS, größer und für dunklen Grund */
.btn { min-height: 44px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; border-radius: 999px; }
.btn-lg { min-height: 50px; padding: 0 28px; font-size: 16px; }
.btn-primary { color: #fff; background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-primary:hover { color: #fff; background: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); }
.btn-dark { color: #1a1310; background: var(--color-accent-300); border-color: var(--color-accent-300); }
.btn-dark:hover { color: #1a1310; background: var(--color-accent-200); }
.btn-dark:active { background: var(--color-accent-100); }
.btn-secondary { color: var(--color-text); }
.btn[hidden] { display: none; }

/* Kicker: „01 —— Das Gerät“ */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.kicker i { width: 40px; height: 1px; background: currentColor; opacity: 0.7; }
.kicker-light { color: var(--color-accent-300); }

/* ================= HERO ================= */
.hero { position: relative; background: var(--ink); }
.hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--ink); }
/* Animation nur, wenn JS läuft und keine reduzierte Bewegung gewünscht ist */
.hero.is-anim { height: 260vh; }
.hero.is-anim .hero-stage { position: sticky; top: 0; min-height: 0; }
.hero-video, .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.hero-video { z-index: 1; opacity: 0; }
.hero-still { z-index: 2; transition: opacity 0.2s linear; }
.hero-still-end { z-index: 3; opacity: 0; }
.hero.is-bg .hero-still { transition: opacity 0.9s ease; }
.hero.is-ready .hero-video { opacity: 1; }

.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 7; pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 84%, transparent) 52%, var(--ink)); }

.captions { list-style: none; margin: 0; padding: 0; }
.captions li { position: absolute; left: var(--stage-gutter); right: var(--stage-gutter); bottom: clamp(96px, 15vh, 150px); z-index: 8; max-width: 600px; opacity: 0; visibility: hidden; pointer-events: none; color: var(--color-accent-300); }
.captions p { margin: 12px 0 0; font-family: var(--font-heading); font-weight: 300; font-size: clamp(28px, 3.8vw, 50px); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-neutral-100); text-wrap: balance; }

.hero-offer, .hero-end { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 0 var(--stage-gutter) clamp(72px, 10vh, 104px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; }
.hero-end { opacity: 0; visibility: hidden; }
.hero-copy { max-width: 660px; flex: 1 1 360px; }
.hero h1 { margin: 14px 0 0; font-family: var(--font-heading); font-weight: 300; font-size: clamp(38px, 5.6vw, 80px); line-height: 1.04; letter-spacing: -0.015em; color: var(--color-neutral-100); text-wrap: balance; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--color-accent-300); }
.lead { margin: 16px 0 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--color-neutral-300); max-width: 34em; text-wrap: pretty; }
.hero-buy, .end-buy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.end-buy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.hero-hint { font-size: 13px; color: var(--color-neutral-400); }
.hero-region { margin: 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--color-neutral-200); }
.hero-region strong, .request-region { font-family: var(--font-heading); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: 0; color: var(--color-accent-200); display: block; line-height: 1.15; }
.request-region { margin: 8px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.link-light { color: var(--color-neutral-300); font-size: 15px; }
.link-light:hover { color: var(--color-accent-100); }
.end-title { margin: 12px 0 0; font-family: var(--font-heading); font-weight: 300; font-size: clamp(28px, 3.8vw, 52px); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-neutral-100); }

.progress { position: absolute; left: var(--stage-gutter); right: var(--stage-gutter); bottom: clamp(36px, 5vh, 52px); height: 1px; z-index: 9; background: color-mix(in srgb, var(--color-neutral-100) 14%, transparent); }
.progress div { height: 1px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--color-accent-300); }

/* Ohne Animation (kein JS / reduzierte Bewegung): Hero ist ein normaler Bildschirm */
.hero:not(.is-anim) .progress, .hero:not(.is-anim) .captions { display: none; }

/* ================= Inhalt ================= */
.section { border-top: 1px solid var(--color-divider); }
.section:first-of-type { border-top: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter); box-sizing: border-box; }
.wrap-narrow { max-width: 880px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-700); }
main h2 { margin: 12px 0 0; font-family: var(--font-heading); font-weight: 300; font-size: clamp(32px, 3.9vw, 50px); line-height: 1.1; letter-spacing: -0.01em; }
.h2-narrow { max-width: 720px; }
.muted { color: var(--color-neutral-700); font-size: 15px; line-height: 1.6; }
.actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.offer-text { margin: 20px 0 0; max-width: 34em; }
.small { font-size: 14px; margin-top: 28px; }
.specs { margin-top: 20px; border-bottom: 1px solid var(--color-divider); }
.specs summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--font-heading); font-weight: 500; font-size: 17px; }
.specs summary:hover { color: var(--color-accent-700); }
.specs dl { margin: 0 0 16px; }
.specs dl > div { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 2fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--color-divider); font-size: 15px; }
.specs dt { color: var(--color-neutral-700); }
.specs dd { margin: 0; }
.facts { margin: 0; border-top: 1px solid var(--color-divider); }
.facts > div { display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(0, 2fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.facts dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-700); padding-top: 4px; }
.facts dd { margin: 0; line-height: 1.55; }

.benefits { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.benefits article { border-top: 1px solid var(--color-accent); padding-top: 18px; }
.num { font-size: 13px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.benefits h3 { margin: 8px 0 0; font-family: var(--font-heading); font-weight: 500; font-size: 23px; line-height: 1.25; }
.benefits p { margin: 12px 0 0; }

.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.scope-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.scope-photos figure { margin: 0; }
.scope-photos img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; background: var(--ink); }
.scope-photos figcaption { margin-top: 8px; font-size: 13px; color: var(--color-neutral-700); }
.scope-list { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-divider); }
.scope-list li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.scope-list li > span { font-size: 13px; color: var(--color-accent-700); font-variant-numeric: tabular-nums; min-width: 24px; }

.steps { margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px clamp(24px, 3vw, 48px); }
.steps li { display: flex; flex-direction: column; gap: 8px; }
.step-n { font-family: var(--font-heading); font-weight: 300; font-style: italic; font-size: 56px; line-height: 1; color: var(--color-accent-600); font-variant-numeric: tabular-nums; }
.steps strong { font-family: var(--font-heading); font-weight: 500; font-size: 23px; }
.steps li > span:last-child { color: var(--color-neutral-800); }

.faq { margin-top: 24px; border-top: 1px solid var(--color-divider); }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; min-height: 44px; box-sizing: border-box; font-family: var(--font-heading); font-weight: 500; font-size: clamp(17px, 1.6vw, 20px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-weight: 400; color: var(--color-accent-700); font-size: 22px; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--color-accent-700); }
.faq details p { margin: 0 0 22px; max-width: 680px; }

/* — Food-Foto und Über mich — */
.food { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
.photo-ph { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px;
  background: var(--color-surface); border: 1px dashed color-mix(in srgb, var(--color-accent-500) 55%, transparent); border-radius: 6px; color: var(--color-accent-800); }
.photo-ph strong { font-family: var(--font-heading); font-weight: 400; font-size: 22px; }
.photo-ph span { font-size: 14px; color: var(--color-neutral-700); max-width: 30ch; }
.photo-ph-portrait { aspect-ratio: 4 / 5; }
.food blockquote { margin: 0; font-family: var(--font-heading); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; color: var(--color-text); }
.about { background: var(--color-surface); }
.about-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-text p { margin: 16px 0 0; max-width: 36em; }
.about-sign { margin-top: 20px; font-family: var(--font-heading); font-style: italic; font-size: 24px; color: var(--color-accent-700); }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }

/* — Anfrage — */
.request { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); border-top: 1px solid var(--color-divider); }
.request-visual { position: relative; background: var(--ink); overflow: hidden; min-height: 540px; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 5vw, 64px); }
.request-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.request-summary { position: relative; z-index: 7; background: linear-gradient(180deg, transparent, var(--ink) 30%); padding-top: 48px; }
.hint-light { margin: 12px 0 0; font-size: 14px; color: var(--color-neutral-400); }
.request-form { padding: clamp(28px, 5vw, 72px) var(--gutter); max-width: 620px; box-sizing: border-box; width: 100%; }
.request-form > p { color: var(--color-neutral-800); }
.request-form form { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.field > label { font-size: 14px; color: var(--color-neutral-800); }
.optional { color: var(--color-neutral-700); }
.input { min-height: 46px; font-size: 16px; }
.input[aria-invalid="true"] { border-color: var(--color-accent-800); }
.field-hint { display: block; margin-top: 5px; font-size: 13px; color: var(--color-neutral-700); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-legal { margin: 0; font-size: 13px; color: var(--color-neutral-700); }
.form-error { margin: 0; font-size: 15px; color: var(--color-accent-900); border-top: 1px solid var(--color-accent-800); padding-top: 10px; }
.form-success { margin-top: 24px; border-top: 1px solid var(--color-accent); padding-top: 16px; outline: none; }
.form-success h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 26px; }
.contact-alt { margin-top: 28px; font-size: 15px; color: var(--color-neutral-700); }

/* — Footer — */
.footer { border-top: 1px solid var(--color-divider); padding: 32px var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; font-size: 13px; color: var(--color-neutral-700); }
.footer p { margin: 0; max-width: 680px; line-height: 1.6; }
.footer nav { display: flex; gap: 24px; }
.footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* — Mobile Kaufleiste — */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid color-mix(in srgb, var(--color-accent-400) 40%, transparent);
  transform: translateY(0); transition: transform 0.2s ease; }
.buybar[hidden] { display: none; }
.buybar-info { display: flex; flex-direction: column; line-height: 1.2; }
.buybar-info span { font-size: 12px; color: var(--color-neutral-400); }
.buybar-info strong { font-family: var(--font-heading); font-weight: 500; font-size: 18px; color: var(--color-neutral-100); font-variant-numeric: tabular-nums; }
body.has-buybar .footer { padding-bottom: calc(32px + var(--buybar-h) + env(safe-area-inset-bottom)); }

/* — Rechtliche Unterseiten — */
.legal { max-width: 760px; margin: 0 auto; padding: 120px var(--gutter) 64px; }
.legal h1 { font-family: var(--font-heading); font-weight: 400; font-size: clamp(32px, 5vw, 56px); hyphens: auto; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .topnav-link { display: none; }
  .brand-sub { letter-spacing: 0.1em; }
  .brand-role { display: none; }
  .brand-mark { font-size: 15px; letter-spacing: 0.16em; }
  .topbar { gap: 10px; }
  .topbar .btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .hero.is-anim { height: 220vh; }
  /* Video im oberen Teil, Text darunter – Gerät wird nicht vom Text verdeckt */
  .hero-video, .hero-still { top: var(--topbar-h); height: 58%; object-position: 50% 50%; }
  .hero-fade { height: 52%; }
  .hero-offer, .hero-end { padding-bottom: 64px; gap: 14px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 48px); }
  .lead { margin-top: 10px; }
  .hero-buy { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .hero-actions { flex-basis: 100%; margin-top: 0; }
  .hero-hint { flex-basis: 100%; }
  .hero-region strong { display: inline; font-size: 20px; }
  .buybar .btn { padding: 0 12px; font-size: 15px; }
  .specs dl > div { grid-template-columns: 1fr; gap: 2px; }
  .captions li { bottom: 96px; }
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
  .request-visual { min-height: 440px; }
}
@media (max-width: 360px) {
  .brand { flex-shrink: 0; }
  .brand-mark { font-size: 13px; letter-spacing: 0.14em; }
  .topbar .btn { padding: 0 10px; font-size: 13px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .lead { display: none; }
}
.portrait { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; border-radius: 6px; }
.legal h2 { margin: 32px 0 8px; font-size: 22px; font-weight: 400; }
.legal p { max-width: 42em; }