/* Küchenmarkt Götz — Landing Variante B („Direkt-Buchung", hell)
   Regeln: STYLEGUIDE.md der Variante A — gleiche Farben, gleiche Schriften,
   anderes Konversions-Konzept: Formular steht sofort im Hero. */
:root {
  --ink: #1B1B1E;             /* Anthrazit-Stein, warm */
  --ink-soft: #26262A;
  --paper: #F4F2EE;           /* warmes Off-White */
  --white: #FFFFFF;
  --stone: #8A8886;           /* Logo-Grau abgetönt */
  --accent: #E30613;          /* Logo-Rot, Signalfarbe */
  --accent-soft: #8A888659;   /* Hairlines in Stein-Grau */
  --accent-ink: #F4F2EE;      /* Text auf Rot */
  --accent-glow: 14%;
  --font-display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --radius: 6px;
  --radius-pill: 999px;
  --container: 1160px;
}

* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.6;
}
img { max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(100% - 2 * var(--s3), var(--container)); margin-inline: auto; }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 52%, transparent);
}
.h2 {
  font-family: var(--font-display); font-weight: 300; line-height: 1.2;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: 0; margin-top: var(--s2);
}
.h2 em { font-style: normal; color: var(--accent); }
.lead { max-width: 48ch; margin-top: var(--s2); font-size: 17px; line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 78%, transparent); }

/* Reveal (Scroll-Animation 1) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Buttons (CD: Pill) ---------- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 15px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn--small { padding: 10px 20px; font-size: 13.5px; }
.btn--accent {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) var(--accent-glow), transparent);
}
.btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) calc(var(--accent-glow) * 1.7), transparent);
}
.btn--ghost { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--block { width: 100%; text-align: center; min-height: 52px; border: 0; font-family: inherit; cursor: pointer; }

/* ---------- Topbar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s2) var(--s3);
  transition: background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.topbar--solid {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  padding-block: var(--s1);
  box-shadow: 0 1px 0 var(--accent-soft);
}
.topbar__brand { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.topbar__logo { width: 130px; height: auto; display: block; flex: none; }
.topbar__claim {
  font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  padding-left: var(--s2); border-left: 1px solid var(--accent-soft); white-space: nowrap;
}
@media (min-width: 768px) and (max-width: 1023px) { .topbar__claim { display: none; } }
@media (max-width: 767px) {
  .topbar__claim { font-size: 10px; letter-spacing: .18em; padding-left: var(--s1); }
  .topbar__claim span { display: none; }
}
.topbar__actions { display: flex; align-items: center; gap: var(--s2); }
.topbar__tel { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.topbar__tel:hover { color: var(--accent); }

/* ---------- Hero mit Buchungskarte ---------- */
.hero { position: relative; padding: calc(var(--s6) + 20px) 0 var(--s5); overflow: hidden; }
.hero__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%;
  filter: saturate(.92) contrast(1.04);
  transform: translateY(var(--par, 0px)); will-change: transform;
}
/* Verlauf statt Fläche: links lesbar, rechts bleibt Küche sichtbar */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--paper) 34%, #F4F2EEE6 52%, #F4F2EE66 100%);
}
.hero__grid { position: relative; z-index: 2; display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s5); } }

.hero h1 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.18;
  font-size: clamp(1.75rem, 3.8vw, 2.8rem); letter-spacing: .01em; margin-top: var(--s2);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__bewertung {
  margin-top: var(--s3); font-size: 15.5px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.sterne { color: var(--accent); letter-spacing: .08em; }
.hero__punkte { list-style: none; padding: 0; margin-top: var(--s3); display: grid; gap: 10px; }
.hero__punkte li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; }
.hero__punkte li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700;
}
.hero__tel { margin-top: var(--s3); font-size: 15px; }
.hero__tel a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--accent); }
.hero__tel span { display: block; color: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 13.5px; }

/* Buchungskarte */
.buchung {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 12%, transparent);
  padding: var(--s4); scroll-margin-top: 90px;
}
@media (max-width: 599px) { .buchung { padding: var(--s3); } }
.buchung__kopf h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; }
.buchung__kopf p { margin-top: 6px; font-size: 14.5px; color: color-mix(in srgb, var(--ink) 62%, transparent); }

/* Kalender-Embed (nur sichtbar, wenn data-embed gesetzt ist) */
.kalender:empty { display: none; }
.kalender { margin-top: var(--s3); }
.kalender iframe { width: 100%; min-height: 620px; border: 0; border-radius: var(--radius); display: block; }

/* ---------- Formular ---------- */
.form { display: grid; gap: var(--s2); margin-top: var(--s3); }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; /* 16px: verhindert iOS-Zoom beim Fokus */
  color: var(--ink); background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--radius); padding: 12px 14px; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field-row { display: grid; gap: var(--s2); }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }
.mehr summary {
  cursor: pointer; font-size: 14px; font-weight: 700; padding: 6px 0;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.mehr summary:hover { color: var(--accent); }
.mehr[open] { display: grid; gap: var(--s2); }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  font-size: 13.5px; line-height: 1.5; margin-top: var(--s1);
}
.check input { width: 20px; height: 20px; accent-color: var(--accent); margin-top: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__sicher {
  list-style: none; padding: 0; display: grid; gap: 5px;
  font-size: 13px; color: color-mix(in srgb, var(--ink) 58%, transparent);
}
.form__sicher li { position: relative; padding-left: 20px; }
.form__sicher li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.form__status { font-size: 14px; min-height: 1.2em; }
.form__status[data-ok="1"] { color: #1E7A4B; }
.form__status[data-ok="0"] { color: #B3261E; }

/* ---------- Galerie ---------- */
.galerie { padding-bottom: var(--s6); }
.galerie__gitter { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: var(--s2); }
@media (min-width: 620px) { .galerie__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .galerie__gitter { grid-template-columns: repeat(3, 1fr); } }
.galerie__gitter li { overflow: hidden; border-radius: var(--radius); background: var(--white); }
.galerie__gitter li:nth-child(2), .galerie__gitter li:nth-child(5) { transition-delay: .07s; }
.galerie__gitter li:nth-child(3), .galerie__gitter li:nth-child(6) { transition-delay: .14s; }
.galerie__gitter img {
  display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.galerie__gitter li:hover img { transform: scale(1.05); }
.galerie__hinweis { margin-top: var(--s2); font-size: 13.5px; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ---------- Signature: Aufmaß-Linie zeichnet sich (Scroll-Animation 2) ---------- */
.masslinie { width: min(100% - 2 * var(--s3), var(--container)); margin: 0 auto; height: 22px; position: relative; }
.masslinie__strich {
  position: absolute; inset: 0 0 auto 0; height: 22px; display: block;
  /* Maßband: Grundlinie + Teilstriche alle 24px, wie am Zollstock */
  background:
    linear-gradient(var(--stone), var(--stone)) 0 0 / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--stone) 0 1px, transparent 1px 24px) 0 0 / 100% 9px no-repeat;
  transform: scaleX(var(--draw, 0)); transform-origin: left center; will-change: transform;
}

/* ---------- Kurz-Infos ---------- */
.kurz { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--accent-soft); }
.kurz__grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 860px) { .kurz__grid { grid-template-columns: 1.15fr .85fr; gap: var(--s5); } }
.kurz__fakten { margin-top: var(--s3); display: grid; gap: var(--s2); }
.kurz__fakten dt {
  font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.kurz__fakten dd { margin: 3px 0 0; font-size: 15.5px; line-height: 1.6; }
.kurz__fakten a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.kurz__mehr {
  border: 1px solid var(--accent-soft); border-radius: var(--radius); padding: var(--s3);
  display: grid; gap: var(--s2); justify-items: start;
}
.kurz__mehr p { font-size: 15px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 70%, transparent); }

/* ---------- Fuß ---------- */
.fuss { background: var(--ink); color: color-mix(in srgb, var(--paper) 70%, transparent); }
.fuss__grid { display: grid; gap: var(--s3); padding: var(--s5) 0 var(--s4); font-size: 14.5px; }
@media (min-width: 700px) { .fuss__grid { grid-template-columns: 1fr 1fr; } }
.fuss__logo { background: var(--paper); padding: 8px 12px; border-radius: var(--radius); margin-bottom: var(--s2); display: block; width: 150px; height: auto; }
.fuss p { line-height: 1.7; }
.fuss a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.fuss a:hover { border-color: var(--accent); }

/* ---------- Powered-by Schwarzwald Agent ---------- */
.pbStrip {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 26px 16px 22px; text-align: center;
  background: #FEFDF9; border-top: 1px solid #E8E0D5;
}
.pbStrip .pbLink {
  display: inline-flex; align-items: center; gap: 11px;
  opacity: .75; transition: opacity .18s ease; text-decoration: none;
}
.pbStrip .pbLink:hover { opacity: 1; text-decoration: none; }
.pbStrip .pbLabel {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .28em; color: #8B7355;
}
.pbStrip .pbIcon { height: 32px; width: 32px; object-fit: contain; display: block; }
.pbStrip .pbName {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: -.02em; color: #0D4A3C;
}

/* ---------- Sticky Mobile CTA ---------- */
.stickybar {
  position: fixed; inset: auto 0 0 0; z-index: 60;
  display: none; grid-template-columns: 1fr 1.6fr; gap: 10px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--accent-soft);
  padding: 10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));
}
.stickybar a {
  display: grid; place-items: center; min-height: 48px;
  text-decoration: none; font-weight: 700; font-size: 15px; border-radius: var(--radius-pill);
}
.stickybar__call { color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.stickybar__cta { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 767px) {
  .stickybar { display: grid; }
  .topbar__tel, .topbar .btn { display: none; }   /* sticky bar übernimmt mobil */
  .fuss__grid { padding-bottom: var(--s5); }
  /* Hero mobil: Bild als Band oben, Text darunter — Karte bleibt in Reichweite */
  .hero { padding-top: 300px; }
  .hero__media { inset: 0 0 auto 0; height: 300px; }
  .hero::after { background: linear-gradient(180deg, #F4F2EE00 0%, #F4F2EEE6 210px, var(--paper) 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .masslinie__strich { transform: none; }
  .hero__media img { transform: none; }
  .galerie__gitter img { transition: none; }
  html { scroll-behavior: auto; }
}