/* angebot.css — Booking-funnel styles.
   Editorial wizard on cream paper. Two-column layout: questions left, live summary right.
*/

.ang-body { background: var(--c-bg); }

/* ==================== Hero header */
.ang-hero {
  position: relative;
  background: var(--c-darker); color: #faf8f4;
  padding: 160px 40px 96px;
}
.ang-hero__inner { max-width: 1400px; margin: 0 auto; }
.ang-hero__eyebrow {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3em; color: var(--c-accent);
  margin-bottom: 24px;
}
.ang-hero__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 7vw, 96px); line-height: 0.95;
  letter-spacing: -0.045em; text-transform: uppercase;
  margin: 0 0 28px; max-width: 1100px;
}
.ang-hero__h em {
  font-family: "Cormorant Garamond", "Garamond", serif;
  font-style: italic; font-weight: 500;
  letter-spacing: -0.005em; color: #faf8f4;
}
.ang-hero__lead {
  font-family: var(--font-body); font-weight: 300; font-size: 18px;
  line-height: 1.6; color: rgba(250,248,244,0.78); max-width: 720px; margin: 0;
}

/* ==================== Wizard layout */
.ang { position: relative; z-index: 2; }
.ang-layout {
  max-width: 1400px; margin: -56px auto 0;
  padding: 0 40px 96px;
  display: grid; grid-template-columns: 7fr 4fr;
  gap: 64px; align-items: start;
}
.ang-layout--done { grid-template-columns: 1fr; }
.ang-main {
  background: var(--c-bg); border: 1px solid var(--border);
  padding: 56px 56px 40px;
  box-shadow: 0 30px 60px rgba(81,85,74,0.10);
  position: relative;
}

/* ==================== Step dots */
.ang-steps {
  list-style: none; padding: 0; margin: 0 0 48px;
  display: flex; gap: 0; border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}
.ang-steps li {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-body); color: rgba(81,85,74,0.45);
  border-top: 2px solid var(--border); padding-top: 14px;
  position: relative;
  transition: color .4s var(--ease-out), border-color .4s var(--ease-out);
}
.ang-steps li.is-on   { color: var(--c-dark); border-top-color: var(--c-dark); }
.ang-steps li.is-done { color: var(--c-accent); border-top-color: var(--c-accent); }
.ang-steps__n {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.05em;
}
.ang-steps__l {
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em;
}

/* ==================== Step content */
.ang-step__eyebrow {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3em; color: var(--c-accent);
  margin-bottom: 16px;
}
.ang-step__h {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px); line-height: 0.95;
  letter-spacing: -0.04em; text-transform: uppercase;
  margin: 0 0 20px;
}
.ang-step__h em {
  font-family: "Cormorant Garamond", "Garamond", serif;
  font-style: italic; font-weight: 500; letter-spacing: -0.005em;
}
.ang-step__lead {
  font-family: var(--font-body); font-weight: 300; font-size: 16px;
  line-height: 1.6; color: rgba(81,85,74,0.85);
  margin: 0 0 40px; max-width: 640px;
}

/* ==================== Step 1: Category grid */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.cat {
  appearance: none; border: 1px solid var(--border); background: var(--c-bg);
  padding: 0; cursor: pointer; text-align: left;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease-out), border-color .3s var(--ease-out), box-shadow .5s var(--ease-out);
  font-family: inherit;
}
.cat:hover { transform: translateY(-4px); border-color: var(--c-accent); box-shadow: 0 18px 32px rgba(81,85,74,0.10); }
.cat.is-on { border-color: var(--c-dark); box-shadow: 0 0 0 1px var(--c-dark); }
.cat__img {
  display: block; aspect-ratio: 4 / 3;
  background-size: cover; background-position: center;
  background-color: var(--c-bg-stone);
  filter: grayscale(0.05);
  transition: filter .6s var(--ease-out);
}
.cat:hover .cat__img { filter: grayscale(0); }
.cat__body {
  padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px;
}
.cat__num {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.28em; color: var(--c-accent);
}
.cat__title {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--c-dark);
}
.cat__desc {
  font-family: var(--font-body); font-size: 13px; font-weight: 300;
  line-height: 1.5; color: rgba(81,85,74,0.7);
}

/* ==================== Step 2: Questions */
.qs { display: flex; flex-direction: column; gap: 40px; }
.q { border: 0; padding: 0; margin: 0; }
.q__label {
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-dark);
  margin-bottom: 16px; padding: 0;
}
.q__req { color: #b54a3a; margin-left: 4px; }
.q__opts { display: flex; flex-direction: column; gap: 10px; }

.q__opt {
  appearance: none; cursor: pointer; font-family: inherit;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--c-bg); border: 1px solid var(--border);
  text-align: left;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.q__opt:hover { border-color: var(--c-accent); }
.q__opt.is-on { border-color: var(--c-dark); background: rgba(81,85,74,0.05); }
.q__opt__check { color: rgba(81,85,74,0.5); display: inline-flex; }
.q__opt.is-on .q__opt__check { color: var(--c-dark); }
.q__opt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.q__opt__t {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: var(--c-dark); letter-spacing: 0.01em;
}
.q__opt__d {
  font-family: var(--font-body); font-weight: 300; font-size: 13px;
  color: rgba(81,85,74,0.7); line-height: 1.45;
}
.q__opt__p {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: -0.01em; color: var(--c-dark); white-space: nowrap;
}

/* ==================== Step 3+4: Form fields */
.ang-fields { display: flex; flex-direction: column; gap: 32px; }
.ang-fields__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.ang-field { display: flex; flex-direction: column; gap: 8px; }
.ang-field label {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--c-dark);
}
.ang-field label .req { color: #b54a3a; margin-left: 2px; }
.ang-field label .opt { font-weight: 400; opacity: 0.55; margin-left: 6px; text-transform: none; letter-spacing: 0.05em; }
.ang-field input, .ang-field textarea {
  border: none; border-bottom: 1px solid rgba(26,26,26,0.20);
  padding: 12px 0 10px; background: transparent;
  font-family: var(--font-body); font-size: 16px; font-weight: 400;
  color: var(--c-ink); outline: none;
  transition: border-color .3s var(--ease-out);
}
.ang-field textarea {
  border: 1px solid rgba(26,26,26,0.12);
  padding: 16px; resize: vertical; min-height: 120px;
}
.ang-field input:focus, .ang-field textarea:focus { border-color: var(--c-dark); }

.ang-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: var(--font-body); font-size: 13px; font-weight: 300;
  line-height: 1.55; color: rgba(81,85,74,0.85);
  cursor: pointer;
}
.ang-check input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--c-dark); }
.ang-check a { text-decoration: underline; text-underline-offset: 3px; }

/* ==================== Bottom nav */
.ang-nav {
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 16px;
}
.ang-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 32px;
  background: transparent; color: var(--c-dark);
  border: 1px solid var(--c-dark);
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
  text-decoration: none;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), opacity .3s;
}
.ang-btn:hover { background: var(--c-dark); color: var(--c-bg); }
.ang-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ang-btn:disabled:hover { background: transparent; color: var(--c-dark); }
.ang-btn--solid { background: var(--c-dark); color: var(--c-bg); }
.ang-btn--solid:hover { background: var(--c-ink); border-color: var(--c-ink); }
.ang-btn--ghost { border-color: rgba(81,85,74,0.30); color: rgba(81,85,74,0.75); }
.ang-btn--ghost:hover { border-color: var(--c-dark); color: var(--c-dark); background: transparent; }

/* ==================== Summary sidebar */
.ang-summary {
  position: sticky; top: 80px;
  background: var(--c-dark); color: #faf8f4;
  padding: 36px 36px 32px;
  box-shadow: 0 30px 60px rgba(81,85,74,0.18);
}
.ang-summary__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,248,244,0.18);
}
.ang-summary__eyebrow {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3em; color: var(--c-accent);
}
.ang-summary__step {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.05em; color: rgba(250,248,244,0.55);
}
.ang-summary__empty {
  margin-top: 24px;
  font-family: var(--font-body); font-size: 14px; font-weight: 300;
  line-height: 1.6; color: rgba(250,248,244,0.65);
}
.ang-summary__cat {
  margin-top: 24px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,248,244,0.10);
}
.ang-summary__cat__l {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; color: rgba(250,248,244,0.6);
  display: block; margin-bottom: 6px;
}
.ang-summary__cat strong {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; text-transform: uppercase; color: #faf8f4;
}
.ang-summary__list {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: flex; flex-direction: column; gap: 20px;
}
.ang-summary__list__q {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; color: rgba(250,248,244,0.55);
  display: block; margin-bottom: 6px;
}
.ang-summary__list__a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  color: rgba(250,248,244,0.9);
  padding: 2px 0;
}
.ang-summary__list__a > :last-child {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.02em; color: var(--c-accent); white-space: nowrap;
}
.ang-summary__when {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(250,248,244,0.10);
  display: flex; flex-direction: column; gap: 12px;
}
.ang-summary__when div {
  font-family: var(--font-body); font-size: 14px; font-weight: 400;
  color: rgba(250,248,244,0.9);
}
.ang-summary__when div span {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em;
  color: rgba(250,248,244,0.55); margin-bottom: 4px;
}
.ang-summary__total {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid rgba(250,248,244,0.30);
  display: flex; justify-content: space-between; align-items: baseline;
}
.ang-summary__total span {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.24em; color: rgba(250,248,244,0.7);
}
.ang-summary__total strong {
  font-family: var(--font-display); font-weight: 700; font-size: 36px;
  letter-spacing: -0.02em; color: #faf8f4;
}
.ang-summary__note {
  margin: 20px 0 0;
  font-family: var(--font-body); font-size: 11.5px; font-weight: 300;
  line-height: 1.55; color: rgba(250,248,244,0.55);
}

/* ==================== Done state */
.ang-step--done {
  text-align: center; padding: 56px 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.ang-step--done .ang-step__h { max-width: 720px; }
.ang-done-actions { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }

/* ==================== Nav-on-dark adjustment for the angebot hero */
.site-nav--dark { mix-blend-mode: normal; color: #faf8f4 !important; }

/* ==================== Responsive */
@media (max-width: 1024px) {
  .ang-layout { grid-template-columns: 1fr; gap: 32px; margin-top: -40px; padding: 0 24px 64px; }
  .ang-main { padding: 40px 32px; }
  .ang-summary { position: static; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .ang-fields__row { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .ang-hero { padding: 120px 24px 80px; }
  .ang-steps__l { display: none; }
  .ang-steps li { padding-top: 10px; }
  .cat-grid { grid-template-columns: 1fr; }
  .q__opt { grid-template-columns: 24px 1fr; }
  .q__opt__p { grid-column: 2; padding-top: 4px; font-size: 12px; }
}