/**
 * main.css — Heimliebe Hochzeit theme styles
 *
 * Mobile-first. Uses tokens.css custom properties; never hardcodes hex.
 * Order: reset → typography → layout primitives → components → page sections.
 *
 * Alignment rule (DESIGN.md): centered by default; long-form prose left-aligned.
 * Card-grid CTA bottom-rail anchoring is non-negotiable.
 */

/* ── Reset / base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--hh-font-body);
  font-size: var(--hh-type-body-md);
  line-height: var(--hh-leading-body);
  color: var(--hh-color-primary);
  background: var(--hh-color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button { font-family: inherit; cursor: pointer; }
ul, ol { padding-left: 1.25em; }

/* ── Typography ───────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--hh-font-display);
  font-weight: var(--hh-weight-medium);
  letter-spacing: var(--hh-tracking-display);
  margin: 0 0 var(--hh-space-md);
  line-height: var(--hh-leading-display);
  /* German typography: never auto-hyphenate headlines; allow overflow-wrap as last resort */
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
h1 { font-size: var(--hh-type-display-lg); line-height: var(--hh-leading-hero); letter-spacing: var(--hh-tracking-tight); }
h2 { font-size: var(--hh-type-display-md); }
h3 { font-size: 1.375rem; line-height: var(--hh-leading-md); }
h4 { font-size: 1.125rem; line-height: var(--hh-leading-md); }
p  { margin: 0 0 var(--hh-space-md); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

.hh-eyebrow,
.hh-label-caps {
  font-family: var(--hh-font-body);
  font-size: var(--hh-type-label-caps);
  font-weight: var(--hh-weight-semibold);
  letter-spacing: var(--hh-tracking-caps);
  line-height: var(--hh-leading-flat);
  text-transform: uppercase;
  color: var(--hh-color-primary);
}

.hh-numeric {
  font-family: var(--hh-font-display);
  font-size: var(--hh-type-numeric);
  font-weight: var(--hh-weight-medium);
  line-height: var(--hh-leading-tight);
}

/* ── Layout primitives ────────────────────────────────────────────── */
.hh-page { background: var(--hh-color-paper); }
.hh-page--sky { background: var(--hh-color-neutral); }

.hh-container {
  width: 100%;
  max-width: var(--hh-content-wide);
  margin-inline: auto;
  padding-inline: var(--hh-margin);
}
@media (min-width: 768px) {
  .hh-container { padding-inline: var(--hh-space-xl); }
}

.hh-section {
  padding-block: var(--hh-space-3xl);
}
.hh-section--hero {
  padding-block: var(--hh-space-4xl);
}

.hh-stack > * + * { margin-top: var(--hh-space-lg); }
.hh-stack-sm > * + * { margin-top: var(--hh-space-sm); }
.hh-stack-xl > * + * { margin-top: var(--hh-space-xl); }
.hh-stack-2xl > * + * { margin-top: var(--hh-space-2xl); }

.hh-prose {
  max-width: var(--hh-content-prose);
  margin-inline: auto;
}
.hh-prose p,
.hh-prose ul,
.hh-prose ol { line-height: var(--hh-leading-body); }

.hh-center { text-align: center; }
.hh-center > * { margin-inline: auto; }

/* ── Buttons ──────────────────────────────────────────────────────── */
.hh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hh-space-sm);
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--hh-radius-full);
  border: 1.5px solid transparent;
  font-family: var(--hh-font-body);
  font-size: var(--hh-type-label-lg);
  font-weight: var(--hh-weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--hh-duration) var(--hh-ease),
              color var(--hh-duration) var(--hh-ease),
              border-color var(--hh-duration) var(--hh-ease),
              transform var(--hh-duration) var(--hh-ease);
}
.hh-btn:hover { transform: translateY(-1px); }
.hh-btn:focus-visible {
  outline: 2px solid var(--hh-color-primary);
  outline-offset: 2px;
}

.hh-btn--primary {
  background: var(--hh-color-primary);
  color: var(--hh-color-surface);
}
.hh-btn--primary:hover { background: #000814; color: var(--hh-color-surface); }

.hh-btn--secondary {
  background: transparent;
  color: var(--hh-color-primary);
  border-color: var(--hh-color-primary);
}
.hh-btn--secondary:hover { background: var(--hh-color-primary); color: var(--hh-color-surface); }

.hh-btn--tertiary {
  background: var(--hh-color-tertiary);
  color: var(--hh-color-primary);
}
.hh-btn--tertiary:hover { background: #d9a432; }

.hh-btn--block { width: 100%; }

.hh-btn--sm {
  min-height: 40px;
  padding: 8px 18px;
  font-size: var(--hh-type-body-sm);
}

.hh-card__cta-rail .hh-btn { width: 100%; }

/* ── Pills / tags ─────────────────────────────────────────────────── */
.hh-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--hh-space-sm);
  padding: 8px 16px;
  border-radius: var(--hh-radius-full);
  background: var(--hh-color-paper);
  color: var(--hh-color-primary);
  font-family: var(--hh-font-body);
  font-size: var(--hh-type-label-caps);
  font-weight: var(--hh-weight-semibold);
  letter-spacing: var(--hh-tracking-caps);
  text-transform: uppercase;
  line-height: var(--hh-leading-flat);
}
.hh-tag--counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--hh-color-primary);
  color: var(--hh-color-surface);
  border-radius: var(--hh-radius-full);
}
.hh-tag--done {
  background: var(--hh-color-success);
  color: var(--hh-color-surface);
}

/* ── Cards ────────────────────────────────────────────────────────── */
.hh-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--hh-color-surface);
  border-radius: var(--hh-radius-xl);
  padding: var(--hh-space-xl);
}
.hh-card--paper { background: var(--hh-color-paper); }
.hh-card--coral { background: var(--hh-color-accent); }
.hh-card--honey { background: var(--hh-color-tertiary); }
.hh-card--sky   { background: var(--hh-color-neutral); }

.hh-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;  /* preserve centered card alignment */
}
.hh-card__cta-rail {
  margin-top: auto;     /* footer-rail anchoring */
  padding-top: var(--hh-space-md);
  width: 100%;
}

/* ── Grid (mobile-first 1-col → 2 → 3) ────────────────────────────── */
.hh-grid {
  display: grid;
  gap: var(--hh-space-lg);
  grid-template-columns: 1fr;
  /* Equal-row heights — every card in a row stretches to the tallest sibling. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
@media (min-width: 768px) {
  .hh-grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--hh-space-xl); }
  .hh-grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--hh-space-xl); }
}
@media (min-width: 1024px) {
  .hh-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--hh-space-2xl); }
}
/* Auto-fit modifier for grids whose item count doesn't divide cleanly (5, 7, etc.). */
.hh-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--hh-space-xl);
}
@media (min-width: 1024px) {
  .hh-grid--auto { gap: var(--hh-space-2xl); }
}

/* ── Header / nav ─────────────────────────────────────────────────── */
.hh-header {
  position: relative;
  z-index: 10;
  background: transparent;
  padding-block: var(--hh-space-md);
}
.hh-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hh-space-md);
}
.hh-wordmark {
  font-family: var(--hh-font-display);
  font-size: 1.5rem;
  font-weight: var(--hh-weight-medium);
  letter-spacing: var(--hh-tracking-display);
  color: var(--hh-color-primary);
  text-decoration: none;
  line-height: 1;
}
.hh-nav {
  display: none;
  align-items: center;
  gap: var(--hh-space-lg);
  font-size: var(--hh-type-label-lg);
}
.hh-nav a { text-decoration: none; }
.hh-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Nav list — reset list styling, lay out horizontally, space evenly. */
.hh-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--hh-space-lg);
  margin: 0;
  padding: 0;
}
.hh-nav__list li { margin: 0; }
.hh-nav__list a {
  color: var(--hh-color-primary);
  font-weight: var(--hh-weight-medium);
  letter-spacing: 0.01em;
  padding: var(--hh-space-xs) 0;
  transition: color var(--hh-duration) var(--hh-ease);
}
.hh-nav__list a:hover { color: var(--hh-color-tertiary); text-decoration: none; }

/* Separate the nav links from the CTA button. */
.hh-nav .hh-btn { margin-left: var(--hh-space-sm); }

@media (min-width: 1024px) {
  .hh-nav { display: flex; }
  .hh-header__menu-toggle { display: none; }
}

.hh-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--hh-color-primary);
  border-radius: var(--hh-radius-full);
}
.hh-header__menu-toggle:hover { background: var(--hh-color-paper); }
@media (min-width: 1024px) { .hh-header__menu-toggle { display: none; } }

/* Mobile nav — stacked list, paper card. */
.hh-mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: var(--hh-space-md);
  background: var(--hh-color-paper);
  border-radius: var(--hh-radius-xl);
  margin-top: var(--hh-space-sm);
}
.hh-mobile-nav.is-open { display: flex; }
.hh-mobile-nav ul {
  list-style: none;
  margin: 0 0 var(--hh-space-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hh-mobile-nav ul li { margin: 0; }
.hh-mobile-nav ul li + li { border-top: 1px solid var(--hh-color-hairline); }
.hh-mobile-nav a {
  text-decoration: none;
  padding: var(--hh-space-md) var(--hh-space-sm);
  font-size: var(--hh-type-body-lg);
  color: var(--hh-color-primary);
  display: block;
}
.hh-mobile-nav a:hover { color: var(--hh-color-tertiary); }
.hh-mobile-nav .hh-btn { width: 100%; justify-content: center; margin-top: var(--hh-space-sm); }
@media (min-width: 1024px) {
  .hh-mobile-nav { display: none !important; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hh-hero {
  text-align: center;
  padding-block: var(--hh-space-3xl);
}
.hh-hero h1 {
  font-size: var(--hh-type-display-hero);
  margin-bottom: var(--hh-space-lg);
}
.hh-hero__sub {
  font-size: var(--hh-type-body-lg);
  color: var(--hh-color-secondary);
  max-width: 50ch;
  margin: 0 auto var(--hh-space-xl);
}
.hh-hero__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hh-space-sm);
}
.hh-hero__price-line {
  font-size: var(--hh-type-body-sm);
  color: var(--hh-color-secondary);
}

/* ── Forms ────────────────────────────────────────────────────────── */
.hh-form {
  max-width: var(--hh-form-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-md);
}
.hh-field {
  display: flex;
  flex-direction: column;
  gap: var(--hh-space-xs);
  text-align: left;
}
.hh-field label {
  font-size: var(--hh-type-body-sm);
  font-weight: var(--hh-weight-semibold);
}
.hh-field input,
.hh-field select,
.hh-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: var(--hh-type-body-md);   /* ≥16px to prevent iOS zoom */
  background: var(--hh-color-surface);
  color: var(--hh-color-primary);
  border: 1.5px solid var(--hh-color-hairline);
  border-radius: var(--hh-radius-lg);
}
.hh-field input:focus,
.hh-field textarea:focus,
.hh-field select:focus {
	outline: 3px solid var(--hh-color-tertiary);
	outline-offset: 2px;
	border-color: var(--hh-color-primary);
}
.hh-field--error input { border-color: var(--hh-color-error); }
.hh-field__error { color: var(--hh-color-error); font-size: var(--hh-type-body-sm); }

/* Magic-link / Mini-Plan email field — pill geometry */
.hh-field--pill input {
  border-radius: var(--hh-radius-full);
}

/* ── Footer ───────────────────────────────────────────────────────── */
.hh-footer {
  background: #edf0e8;
  color: var(--hh-color-primary);
  padding-block: var(--hh-space-3xl);
  margin-top: var(--hh-space-3xl);
  border-top: 1px solid var(--hh-color-hairline);
}
.hh-footer a { color: var(--hh-color-primary); text-decoration: none; }
.hh-footer a:hover { text-decoration: underline; color: #14231d; }
.hh-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hh-space-2xl);
}
@media (min-width: 768px) {
  .hh-footer__columns { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hh-footer__columns { grid-template-columns: repeat(4, 1fr); }
}
.hh-footer__col h4 {
  font-family: var(--hh-font-body);
  font-size: var(--hh-type-label-caps);
  font-weight: var(--hh-weight-semibold);
  letter-spacing: var(--hh-tracking-caps);
  text-transform: uppercase;
  color: var(--hh-color-primary);
  margin-bottom: var(--hh-space-md);
}
.hh-footer__col ul { list-style: none; padding: 0; margin: 0; }
.hh-footer__col li { margin-bottom: var(--hh-space-sm); min-height: 28px; }
.hh-footer__col a { color: #4a574e; }
.hh-footer__col a:hover { color: var(--hh-color-primary); text-decoration: underline; }

.hh-footer__legal {
  margin-top: var(--hh-space-2xl);
  padding-top: var(--hh-space-lg);
  border-top: 1px solid #d2dbce;
  font-size: var(--hh-type-body-sm);
  color: #556358;
  text-align: center;
}
@media (min-width: 1024px) {
  .hh-footer__legal { text-align: left; }
}
.hh-footer__legal p { color: #556358; margin: 0; }
.hh-footer__legal a { color: #556358; }
.hh-footer__legal a:hover { color: var(--hh-color-primary); text-decoration: underline; }
.hh-footer__legal ul {
  list-style: none; padding: 0; margin: var(--hh-space-md) 0 0; display: flex;
  flex-wrap: wrap; gap: var(--hh-space-md); justify-content: center;
}
@media (min-width: 1024px) {
  .hh-footer__legal ul { justify-content: flex-start; }
}

/* ── Comparison table (the /preise/ centerpiece) ──────────────────── */
.hh-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--hh-type-body-md);
  background: var(--hh-color-surface);
  border-radius: var(--hh-radius-xl);
  overflow: hidden;
}
.hh-compare th, .hh-compare td {
  padding: var(--hh-space-md);
  text-align: left;
  border-bottom: 1px solid var(--hh-color-hairline);
  vertical-align: top;
}
.hh-compare thead th {
  background: var(--hh-color-paper);
  font-family: var(--hh-font-display);
  font-weight: var(--hh-weight-medium);
  font-size: var(--hh-type-body-lg);
}
.hh-compare th:first-child, .hh-compare td:first-child {
  font-weight: var(--hh-weight-semibold);
  background: var(--hh-color-paper);
}
.hh-compare .is-us {
  background: var(--hh-color-tertiary);
  color: var(--hh-color-primary);
}
.hh-compare tr:last-child td { border-bottom: none; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.hh-faq { max-width: var(--hh-content-prose); margin-inline: auto; }
.hh-faq details {
  background: var(--hh-color-surface);
  border-radius: var(--hh-radius-md);
  padding: var(--hh-space-md) var(--hh-space-lg);
  margin-bottom: var(--hh-space-md);
}
.hh-faq summary {
  font-family: var(--hh-font-display);
  font-size: 1.125rem;
  font-weight: var(--hh-weight-medium);
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.hh-faq summary::-webkit-details-marker { display: none; }
.hh-faq details[open] summary { margin-bottom: var(--hh-space-md); }
.hh-faq p { text-align: left; max-width: 60ch; margin-inline: auto; hyphens: auto; -webkit-hyphens: auto; }

/* ── Testimonials ─────────────────────────────────────────────────── */
.hh-testimonial {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--hh-color-paper);
  padding: var(--hh-space-xl);
  border-radius: var(--hh-radius-xl);
}
.hh-testimonial blockquote {
  margin: 0 0 var(--hh-space-md);
  font-family: var(--hh-font-display);
  font-size: var(--hh-type-body-lg);
  line-height: var(--hh-leading-body);
  font-style: italic;
  flex: 1 1 auto;            /* push citation to the bottom rail */
}
.hh-testimonial figcaption,
.hh-testimonial cite {
  margin-top: auto;          /* footer-rail anchoring */
  font-size: var(--hh-type-body-sm);
  color: var(--hh-color-secondary);
  font-style: normal;
}

/* ── Long-form article body (left-aligned exception) ─────────────── */
.hh-article {
  max-width: var(--hh-content-prose);
  margin-inline: auto;
}
.hh-article > h1, .hh-article > h2, .hh-article > h3 { text-align: left; }
.hh-article > p, .hh-article > ul, .hh-article > ol { text-align: left; hyphens: auto; -webkit-hyphens: auto; }
.hh-article p, .hh-article li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.hh-article > .hh-article__lede,
.hh-article > .hh-article__h1-block,
.hh-article > .hh-article__cta-final { text-align: center; }

/* ── Transparent wedding-budget calculator ──────────────────────── */
.hh-budget-tool {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-budget-form { margin-top: var(--hh-space-xl); }
.hh-budget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--hh-space-md);
}
.hh-budget-grid label {
  display: grid;
  gap: var(--hh-space-xs);
  font-weight: 600;
  text-align: left;
}
.hh-budget-grid input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 45%, transparent);
  border-radius: var(--hh-radius-md);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
}
.hh-budget-grid input:focus-visible {
  outline: 3px solid var(--hh-color-tertiary);
  outline-offset: 2px;
}
.hh-budget-results {
  display: grid;
  gap: var(--hh-space-sm);
  margin-block: var(--hh-space-xl);
  padding: var(--hh-space-lg);
  border-radius: var(--hh-radius-lg);
  background: var(--hh-color-primary);
  color: var(--hh-color-surface);
}
.hh-budget-results > div {
  display: flex;
  justify-content: space-between;
  gap: var(--hh-space-md);
  align-items: baseline;
}
.hh-budget-results__total {
  padding-block: var(--hh-space-sm);
  border-block: 1px solid color-mix(in srgb, var(--hh-color-surface) 35%, transparent);
  font-size: var(--hh-type-body-lg);
}
.hh-budget-note {
  margin-top: var(--hh-space-md);
  font-size: var(--hh-type-body-sm);
  color: var(--hh-color-secondary);
}
.hh-planner-offers {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-planner-offers__form { margin-top: var(--hh-space-xl); }
.hh-planner-offers__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hh-space-sm); max-width: 40rem; margin: 0 auto var(--hh-space-lg); }
.hh-planner-offers__summary > div { display: flex; flex-direction: column; gap: .2rem; padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: #fff; }
.hh-planner-offers__summary span { font-size: var(--hh-type-body-sm); }
.hh-planner-offers__summary strong { font-size: var(--hh-type-h3); }
.hh-planner-offers__summary strong span { font-size: inherit; }
.hh-planner-offers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hh-space-md); align-items: start; }
.hh-planner-offer { display: grid; gap: var(--hh-space-md); min-width: 0; padding: var(--hh-space-lg); border: 1px solid color-mix(in srgb, var(--hh-color-primary) 24%, transparent); border-radius: var(--hh-radius-lg); background: #fff; }
.hh-planner-offer.is-ready { border-color: var(--hh-color-tertiary); box-shadow: inset 0 0 0 1px var(--hh-color-tertiary); }
.hh-planner-offer > label,
.hh-planner-offer__prices label { display: grid; gap: .35rem; color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); font-weight: 700; }
.hh-planner-offer__prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hh-space-sm); }
.hh-planner-offer input[type="text"],
.hh-planner-offer input[type="number"],
.hh-planner-offer select,
.hh-planner-offer textarea { width: 100%; min-height: 2.75rem; padding: .6rem .7rem; border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent); border-radius: var(--hh-radius-sm); background: #fff; color: var(--hh-color-primary); font: inherit; font-weight: 400; }
.hh-planner-offer textarea { resize: vertical; }
.hh-planner-offer__checks { display: grid; gap: var(--hh-space-sm); margin: 0; padding: var(--hh-space-md); border: 1px solid color-mix(in srgb, var(--hh-color-primary) 20%, transparent); border-radius: var(--hh-radius-md); }
.hh-planner-offer__checks legend { padding-inline: .35rem; font-weight: 700; }
.hh-planner-offer__checks label { display: flex; gap: var(--hh-space-sm); align-items: flex-start; text-align: left; cursor: pointer; font-size: var(--hh-type-body-sm); }
.hh-planner-offer__checks input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: var(--hh-color-primary); flex: 0 0 auto; }
.hh-planner-offer input:focus-visible,
.hh-planner-offer select:focus-visible,
.hh-planner-offer textarea:focus-visible { outline: 3px solid var(--hh-color-tertiary); outline-offset: 2px; }
.hh-planner-offer__result { display: grid; gap: var(--hh-space-sm); padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: var(--hh-color-paper); }
.hh-planner-offer__result p { display: flex; justify-content: space-between; gap: var(--hh-space-sm); }
.hh-planner-offer__result p:last-child { display: block; color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); }
.hh-planner-offers__actions { margin-top: var(--hh-space-xl); }
.hh-planner-offers__boundary { margin-top: var(--hh-space-lg); padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: color-mix(in srgb, var(--hh-color-neutral) 45%, #fff); font-size: var(--hh-type-body-sm); }
.hh-checklist-tool {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-standesamt-prep {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-standesamt-prep__form { margin-top: var(--hh-space-xl); }
.hh-standesamt-prep__scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hh-space-sm);
  margin: 0;
  padding: var(--hh-space-lg);
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 24%, transparent);
  border-radius: var(--hh-radius-lg);
  background: #fff;
}
.hh-standesamt-prep__scenarios legend { padding-inline: .35rem; font-family: var(--hh-font-display); font-size: var(--hh-type-h3); font-weight: 700; }
.hh-standesamt-prep__scenarios label,
.hh-standesamt-question__confirmed { display: flex; gap: var(--hh-space-sm); align-items: flex-start; text-align: left; cursor: pointer; }
.hh-standesamt-prep__scenarios input,
.hh-standesamt-question__confirmed input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--hh-color-primary); flex: 0 0 auto; }
.hh-standesamt-prep__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hh-space-sm); margin-block: var(--hh-space-lg); }
.hh-standesamt-prep__summary > div { display: flex; flex-direction: column; gap: .2rem; padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: #fff; }
.hh-standesamt-prep__summary span { font-size: var(--hh-type-body-sm); }
.hh-standesamt-prep__summary strong { font-size: var(--hh-type-h3); }
.hh-standesamt-prep__summary strong span { font-size: inherit; }
.hh-standesamt-prep__questions { display: grid; gap: var(--hh-space-md); }
.hh-standesamt-question { padding: var(--hh-space-lg); border-left: 4px solid var(--hh-color-tertiary); border-radius: var(--hh-radius-md); background: #fff; break-inside: avoid; }
.hh-standesamt-question h3 { margin-bottom: var(--hh-space-md); font-size: var(--hh-type-body-lg); }
.hh-standesamt-question > label:last-child { display: grid; gap: .35rem; margin-top: var(--hh-space-md); color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); font-weight: 700; }
.hh-standesamt-question textarea { width: 100%; padding: .7rem .8rem; resize: vertical; border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent); border-radius: var(--hh-radius-sm); background: #fff; color: var(--hh-color-primary); font: inherit; font-weight: 400; line-height: 1.5; }
.hh-standesamt-prep input:focus-visible,
.hh-standesamt-prep textarea:focus-visible { outline: 3px solid var(--hh-color-tertiary); outline-offset: 2px; }
.hh-standesamt-prep__actions { margin-top: var(--hh-space-xl); }
.hh-standesamt-prep__boundary { margin-top: var(--hh-space-lg); padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: color-mix(in srgb, var(--hh-color-neutral) 45%, #fff); font-size: var(--hh-type-body-sm); }
.hh-standesamt-prep__boundary p + p { margin-top: var(--hh-space-sm); }
.hh-name-change {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-name-change__form { margin-top: var(--hh-space-xl); }
.hh-name-change__scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hh-space-sm);
  margin: 0;
  padding: var(--hh-space-lg);
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 24%, transparent);
  border-radius: var(--hh-radius-lg);
  background: #fff;
}
.hh-name-change__scenarios legend { padding-inline: .35rem; font-family: var(--hh-font-display); font-size: var(--hh-type-h3); font-weight: 700; }
.hh-name-change__scenarios label { display: flex; gap: var(--hh-space-sm); align-items: flex-start; text-align: left; cursor: pointer; }
.hh-name-change__scenarios input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--hh-color-primary); flex: 0 0 auto; }
.hh-name-change__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hh-space-sm); margin-top: var(--hh-space-lg); }
.hh-name-change__summary > div { display: flex; flex-direction: column; gap: .2rem; padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: #fff; }
.hh-name-change__summary span { font-size: var(--hh-type-body-sm); }
.hh-name-change__summary strong { font-size: var(--hh-type-h3); }
.hh-name-change__toolbar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hh-space-sm); margin-block: var(--hh-space-lg); }
.hh-name-change__phase { margin: 0 0 var(--hh-space-xl); padding: 0; border: 0; }
.hh-name-change__phase legend { width: 100%; margin-bottom: var(--hh-space-sm); color: var(--hh-color-primary); font-family: var(--hh-font-display); font-size: var(--hh-type-h3); font-weight: 700; }
.hh-name-task { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(10rem, .55fr) minmax(12rem, .8fr); gap: var(--hh-space-md); align-items: center; padding: var(--hh-space-md); border-bottom: 1px solid color-mix(in srgb, var(--hh-color-primary) 18%, transparent); background: #fff; }
.hh-name-task:first-of-type { border-radius: var(--hh-radius-md) var(--hh-radius-md) 0 0; }
.hh-name-task:last-of-type { border-bottom: 0; border-radius: 0 0 var(--hh-radius-md) var(--hh-radius-md); }
.hh-name-task.is-complete { background: color-mix(in srgb, var(--hh-color-neutral) 45%, #fff); }
.hh-name-task.is-complete .hh-name-task__copy { color: var(--hh-color-secondary); }
.hh-name-task label { display: grid; gap: .3rem; color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); font-weight: 700; }
.hh-name-task select,
.hh-name-task input { width: 100%; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent); border-radius: var(--hh-radius-sm); background: #fff; color: var(--hh-color-primary); font: inherit; font-weight: 400; }
.hh-name-change input:focus-visible,
.hh-name-change select:focus-visible { outline: 3px solid var(--hh-color-tertiary); outline-offset: 2px; }
.hh-name-change__actions { margin-top: var(--hh-space-xl); }
.hh-name-change__boundary { margin-top: var(--hh-space-lg); padding: var(--hh-space-md); border-radius: var(--hh-radius-md); background: color-mix(in srgb, var(--hh-color-neutral) 45%, #fff); font-size: var(--hh-type-body-sm); }
.hh-name-change__boundary p + p { margin-top: var(--hh-space-sm); }
.hh-vow-builder {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-vow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  gap: var(--hh-space-xl);
  align-items: start;
  margin-top: var(--hh-space-xl);
}
.hh-vow-inputs { display: grid; gap: var(--hh-space-md); }
.hh-vow-inputs > label,
.hh-vow-promises label { display: grid; gap: .35rem; text-align: left; }
.hh-vow-inputs label > span { color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); }
.hh-vow-inputs textarea {
  width: 100%;
  padding: .7rem .8rem;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-sm);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
  line-height: 1.5;
}
.hh-speech-inputs select {
  width: 100%;
  min-height: 2.75rem;
  padding: .65rem .75rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-sm);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
}
.hh-speech-inputs select:focus-visible { outline: 3px solid var(--hh-color-tertiary); outline-offset: 2px; }
.hh-speech-safety { display: grid; gap: var(--hh-space-sm); margin: 0; padding: var(--hh-space-md); border: 1px solid color-mix(in srgb, var(--hh-color-primary) 22%, transparent); border-radius: var(--hh-radius-md); }
.hh-speech-safety legend { padding-inline: .35rem; font-weight: 700; }
.hh-speech-safety label { display: flex; gap: var(--hh-space-sm); align-items: flex-start; text-align: left; }
.hh-speech-safety input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--hh-color-primary); flex: 0 0 auto; }
.hh-speech-role { margin-bottom: var(--hh-space-sm); color: var(--hh-color-secondary); font-weight: 700; }
.hh-speech-cards article { padding: var(--hh-space-sm); border-bottom: 1px solid color-mix(in srgb, var(--hh-color-primary) 18%, transparent); break-inside: avoid; }
.hh-speech-cards article:last-child { border-bottom: 0; }
.hh-speech-cards h4 { margin-bottom: .35rem; font-size: var(--hh-type-body); }
.hh-vow-inputs textarea:focus-visible { outline: 3px solid var(--hh-color-tertiary); outline-offset: 2px; }
.hh-vow-promises { display: grid; gap: var(--hh-space-sm); margin: 0; padding: var(--hh-space-md); border: 1px solid color-mix(in srgb, var(--hh-color-primary) 22%, transparent); border-radius: var(--hh-radius-md); }
.hh-vow-promises legend { padding-inline: .35rem; font-weight: 700; }
.hh-vow-promises > p { color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); }
.hh-vow-output { position: sticky; top: 2rem; padding: var(--hh-space-lg); border-radius: var(--hh-radius-lg); background: #fff; text-align: left; }
.hh-vow-output h3 { margin-bottom: var(--hh-space-md); }
.hh-vow-draft { min-height: 12rem; padding: var(--hh-space-md); border-left: 3px solid var(--hh-color-tertiary); background: color-mix(in srgb, var(--hh-color-neutral) 28%, #fff); }
.hh-vow-draft p + p { margin-top: var(--hh-space-sm); }
.hh-vow-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hh-space-sm); margin-top: var(--hh-space-lg); }
.hh-vow-metrics > div { display: flex; flex-direction: column; gap: .2rem; padding: var(--hh-space-sm); border-radius: var(--hh-radius-sm); background: var(--hh-color-paper); }
.hh-vow-metrics span { font-size: var(--hh-type-body-sm); }
.hh-vow-metrics strong { font-size: var(--hh-type-body-lg); }
.hh-vow-metrics strong span { font-size: inherit; }
.hh-vow-actions { justify-content: flex-start; }
.hh-checklist-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hh-space-sm);
  margin-top: var(--hh-space-xl);
}
.hh-checklist-summary > div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--hh-space-md);
  border-radius: var(--hh-radius-md);
  background: #fff;
}
.hh-checklist-summary span { font-size: var(--hh-type-body-sm); }
.hh-checklist-summary strong { font-size: var(--hh-type-h3); }
.hh-checklist-summary strong span { font-size: inherit; }
.hh-checklist-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hh-space-sm);
  margin-block: var(--hh-space-lg);
}
.hh-btn--small { min-height: 2.75rem; padding: .55rem 1rem; }
.hh-checklist-phase {
  margin: 0 0 var(--hh-space-lg);
  padding: 0;
  border: 0;
}
.hh-checklist-phase legend {
  width: 100%;
  margin-bottom: var(--hh-space-sm);
  color: var(--hh-color-primary);
  font-family: var(--hh-font-display);
  font-size: var(--hh-type-h3);
  font-weight: 700;
}
.hh-checklist-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 15rem);
  gap: var(--hh-space-md);
  align-items: center;
  padding: var(--hh-space-sm) var(--hh-space-md);
  border-bottom: 1px solid color-mix(in srgb, var(--hh-color-primary) 18%, transparent);
  background: #fff;
}
.hh-checklist-task:first-of-type { border-radius: var(--hh-radius-md) var(--hh-radius-md) 0 0; }
.hh-checklist-task:last-of-type { border-bottom: 0; border-radius: 0 0 var(--hh-radius-md) var(--hh-radius-md); }
.hh-checklist-task.is-complete { background: color-mix(in srgb, var(--hh-color-neutral) 45%, #fff); }
.hh-checklist-task.is-complete .hh-checklist-task__label span { text-decoration: line-through; color: var(--hh-color-secondary); }
.hh-checklist-task__label { display: flex; gap: var(--hh-space-sm); align-items: flex-start; text-align: left; cursor: pointer; }
.hh-checklist-task__label input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--hh-color-primary); flex: 0 0 auto; }
.hh-checklist-task__owner select {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .65rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-sm);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
}
.hh-checklist-task__label input:focus-visible,
.hh-checklist-task__owner select:focus-visible { outline: 3px solid var(--hh-color-tertiary); outline-offset: 2px; }
.hh-checklist-actions { margin-top: var(--hh-space-xl); }
.hh-section--preview { padding-top: 0; }
.hh-pdf-preview {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.hh-pdf-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 22%, transparent);
  border-radius: var(--hh-radius-lg);
  background: #fff;
}
.hh-pdf-preview figcaption {
  max-width: 62ch;
  margin: var(--hh-space-sm) auto 0;
  color: var(--hh-color-secondary);
  font-size: var(--hh-type-body-sm);
}
.hh-seating-worksheet {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-seating-worksheet__table { margin-top: var(--hh-space-xl); }
.hh-seating-worksheet__row {
  display: grid;
  grid-template-columns: 1.3fr .45fr 1.1fr 1.6fr;
  gap: var(--hh-space-sm);
  padding-block: var(--hh-space-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--hh-color-primary) 22%, transparent);
}
.hh-seating-worksheet__head {
  font-size: var(--hh-type-body-sm);
  font-weight: 700;
}
.hh-seating-worksheet input {
  width: 100%;
  min-height: 2.75rem;
  padding: .6rem .7rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-sm);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
}
.hh-seating-worksheet__actions { margin-top: var(--hh-space-xl); }
.hh-seating-worksheet__actions p { font-size: var(--hh-type-body-sm); }
.hh-seating-planner {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-seating-planner__setup {
  display: grid;
  gap: var(--hh-space-md);
  max-width: 48rem;
  margin: var(--hh-space-xl) auto 0;
}
.hh-seating-planner__controls { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hh-space-md); }
.hh-seating-planner__setup label { display: grid; gap: .4rem; font-weight: 700; }
.hh-seating-planner__setup input,
.hh-seating-planner__setup textarea,
.hh-guest-select {
  width: 100%;
  padding: .7rem .8rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-sm);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
}
.hh-seating-planner__setup textarea { resize: vertical; }
.hh-seating-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hh-space-sm);
  margin-top: var(--hh-space-xl);
}
.hh-seating-summary > div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--hh-space-md);
  border-radius: var(--hh-radius-md);
  background: #fff;
}
.hh-seating-summary span { font-size: var(--hh-type-body-sm); }
.hh-seating-summary strong { font-size: var(--hh-type-h3); }
.hh-seating-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hh-space-md);
  margin-top: var(--hh-space-xl);
}
.hh-seat-zone {
  min-height: 12rem;
  padding: var(--hh-space-md);
  border: 2px dashed color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-lg);
  background: #fff;
}
.hh-seat-zone--unassigned { grid-column: 1 / -1; min-height: 7rem; background: color-mix(in srgb, var(--hh-color-neutral) 35%, #fff); }
.hh-seat-zone.is-drag-over { border-color: var(--hh-color-tertiary); background: color-mix(in srgb, var(--hh-color-tertiary) 12%, #fff); }
.hh-seat-zone.is-over-capacity { border-color: var(--hh-color-error); background: color-mix(in srgb, var(--hh-color-accent) 10%, #fff); }
.hh-seat-zone h3 { margin-bottom: var(--hh-space-sm); font-size: var(--hh-type-body); }
.hh-seat-zone__guests { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.hh-guest-chip {
  display: grid;
  gap: .35rem;
  min-width: 9.5rem;
  padding: .6rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 24%, transparent);
  border-radius: var(--hh-radius-md);
  background: var(--hh-color-paper);
  cursor: grab;
}
.hh-guest-chip:active { cursor: grabbing; }
.hh-guest-chip strong { overflow-wrap: anywhere; }
.hh-guest-select { padding: .4rem .5rem; font-size: var(--hh-type-body-sm); }
.hh-seating-planner__actions { margin-top: var(--hh-space-xl); }
.hh-timeline-tool {
  background: var(--hh-color-paper);
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  padding: clamp(var(--hh-space-lg), 5vw, var(--hh-space-2xl));
}
.hh-timeline-table { margin-top: var(--hh-space-xl); }
.hh-timeline-row {
  display: grid;
  grid-template-columns: .7fr .7fr 1.35fr 1.35fr 1.15fr;
  gap: var(--hh-space-sm);
  padding-block: var(--hh-space-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--hh-color-primary) 22%, transparent);
}
.hh-timeline-head { font-size: var(--hh-type-body-sm); font-weight: 700; }
.hh-timeline-row input {
  width: 100%;
  min-height: 2.75rem;
  padding: .6rem .7rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 35%, transparent);
  border-radius: var(--hh-radius-sm);
  background: #fff;
  color: var(--hh-color-primary);
  font: inherit;
}
.hh-timeline-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hh-space-sm);
  margin-top: var(--hh-space-xl);
}
.hh-timeline-results > div {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--hh-space-md);
  border-radius: var(--hh-radius-md);
  background: #fff;
}
.hh-timeline-results span { font-size: var(--hh-type-body-sm); }
.hh-timeline-results strong { font-size: var(--hh-type-h3); }
.hh-timeline-actions { margin-top: var(--hh-space-xl); }

.hh-comparison-scroll {
  margin-top: var(--hh-space-xl);
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--hh-ink) 16%, transparent);
  border-radius: var(--hh-radius-lg);
  background: var(--hh-paper);
}
.hh-comparison-scroll:focus-visible { outline: 3px solid var(--hh-coral); outline-offset: 3px; }
.hh-comparison-table { width: 100%; min-width: 880px; border-collapse: collapse; }
.hh-comparison-table th,
.hh-comparison-table td { padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in srgb, var(--hh-ink) 12%, transparent); }
.hh-comparison-table thead th { background: var(--hh-ink); color: var(--hh-paper); font-size: var(--hh-type-body-sm); }
.hh-comparison-table tbody th { width: 17%; }
.hh-comparison-table tbody tr:last-child > * { border-bottom: 0; }
.hh-comparison-table a { font-size: var(--hh-type-body-sm); }
.hh-conversion-card {
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(var(--hh-space-xl), 6vw, var(--hh-space-3xl));
  border: 2px solid var(--hh-color-primary);
  border-radius: var(--hh-radius-xl);
  background: var(--hh-color-paper);
}
.hh-conversion-card > p { max-width: 62ch; }
.hh-conversion-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hh-space-sm);
}
.hh-proof-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hh-proof-list li {
  padding: .4rem .75rem;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 25%, transparent);
  border-radius: 999px;
  background: #fff;
  font-size: var(--hh-type-body-sm);
}
.hh-mini-plan-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(var(--hh-space-xl), 6vw, var(--hh-space-3xl));
}
.hh-mini-plan-preview { margin: 0; }
.hh-mini-plan-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--hh-color-primary) 22%, transparent);
  border-radius: var(--hh-radius-lg);
  background: #fff;
}
.hh-mini-plan-preview figcaption {
  margin-top: var(--hh-space-sm);
  color: var(--hh-color-secondary);
  font-size: var(--hh-type-body-sm);
}
.hh-guide-hub { display: grid; gap: var(--hh-space-3xl); }
.hh-guide-cluster { display: grid; gap: var(--hh-space-xl); }
.hh-guide-cluster > header p { max-width: 62ch; margin-inline: auto; }
.hh-guide-card {
  display: grid;
  align-content: start;
  gap: var(--hh-space-sm);
  min-height: 12rem;
  padding: var(--hh-space-lg);
}
.hh-guide-card > strong { font-family: var(--hh-font-display); font-size: var(--hh-type-question); }
.hh-guide-card__more { margin-top: auto; font-weight: 700; }
.hh-guide-posts-heading { margin: var(--hh-space-3xl) 0 var(--hh-space-xl); }
.hh-guide-hub-link { margin-top: var(--hh-space-xl); }
@media (max-width: 700px) {
	.hh-mini-plan-intro { grid-template-columns: 1fr; }
	.hh-mini-plan-preview { max-width: 25rem; margin-inline: auto; }
	.hh-timeline-head { display: none; }
	.hh-timeline-row { grid-template-columns: 1fr 1fr; }
	.hh-timeline-row label:nth-child(n+3) { grid-column: 1 / -1; }
	.hh-timeline-row label::before { display: block; margin-bottom: .2rem; color: var(--hh-color-secondary); font-size: var(--hh-type-body-sm); }
	.hh-timeline-row label:nth-child(1)::before { content: "Start"; }
	.hh-timeline-row label:nth-child(2)::before { content: "Ende"; }
	.hh-timeline-row label:nth-child(3)::before { content: "Programmpunkt"; }
	.hh-timeline-row label:nth-child(4)::before { content: "Ort / Übergang"; }
	.hh-timeline-row label:nth-child(5)::before { content: "Verantwortlich"; }
	.hh-timeline-results { grid-template-columns: 1fr 1fr; }
	.hh-seating-planner__controls { grid-template-columns: 1fr; }
	.hh-seating-summary { grid-template-columns: 1fr 1fr; }
	.hh-checklist-summary { grid-template-columns: 1fr; }
	.hh-checklist-task { grid-template-columns: 1fr; }
	.hh-vow-layout { grid-template-columns: 1fr; }
	.hh-vow-output { position: static; }
	.hh-seating-board { grid-template-columns: 1fr; }
	.hh-seat-zone--unassigned { grid-column: auto; }
	.hh-guest-chip { width: 100%; }
  .hh-seating-worksheet__head { display: none; }
  .hh-seating-worksheet__row { grid-template-columns: 1fr; }
  .hh-seating-worksheet__row label::before {
    display: block;
    margin-bottom: .2rem;
    color: var(--hh-color-secondary);
    font-size: var(--hh-type-body-sm);
  }
  .hh-seating-worksheet__row label:nth-child(1)::before { content: "Gruppe"; }
  .hh-seating-worksheet__row label:nth-child(2)::before { content: "Anzahl"; }
  .hh-seating-worksheet__row label:nth-child(3)::before { content: "Ankerperson"; }
  .hh-seating-worksheet__row label:nth-child(4)::before { content: "Bedürfnisse / Abstand"; }
}

/* ── Skip link / a11y ─────────────────────────────────────────────── */
.hh-skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  background: var(--hh-color-primary);
  color: var(--hh-color-surface);
  padding: var(--hh-space-sm) var(--hh-space-md);
  border-radius: var(--hh-radius-md);
  text-decoration: none;
  z-index: 100;
}
.hh-skip-link:focus { left: 1rem; }

/* ── Visually hidden (a11y) ───────────────────────────────────────── */
.hh-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════
   POLISH LAYER (2026-07-30) — micro-interactions, a11y, reveal, print
   No shadows (per DESIGN.md: flat). Lifts via translateY only.
   ══════════════════════════════════════════════════════════════════ */

/* Card hover — gentle lift, no shadow. */
.hh-card {
  transition: transform var(--hh-duration-slow) var(--hh-ease),
              background-color var(--hh-duration) var(--hh-ease);
}
.hh-card:hover,
.hh-card:focus-within {
  transform: translateY(-4px);
}
.hh-card--paper:hover { background: color-mix(in srgb, var(--hh-color-paper) 88%, var(--hh-color-tertiary) 12%); }

/* Card-as-link wrapper (blog grid + Paket grid): whole card is a link target. */
article.hh-card > a:first-child,
.hh-card a.hh-card__link {
  color: inherit;
  text-decoration: none;
}

/* FAQ details — smoother open transition + chevron rotation indicator. */
.hh-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 2.5rem;
}
.hh-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--hh-font-body);
  font-weight: 600;
  font-size: 1.25em;
  color: var(--hh-color-tertiary);
  transition: transform var(--hh-duration) var(--hh-ease);
  line-height: 1;
}
.hh-faq details[open] summary::after {
  content: "–";
  transform: translateY(-50%) rotate(0deg);
}
.hh-faq summary:hover { color: var(--hh-color-tertiary); }

/* Reveal-on-scroll (progressive enhancement; hidden if no JS). */
.hh-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--hh-ease), transform 500ms var(--hh-ease);
}
.hh-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Section rhythm — consistent vertical padding on marketing sections. */
.hh-section { padding-block: var(--hh-space-3xl); }
.hh-section--hero { padding-block: var(--hh-space-4xl); }

/* Narrow container for long-form traffic pages. */
.hh-container--narrow { max-width: var(--hh-content-prose); margin-inline: auto; }

/* Button — refined active state. */
.hh-btn:active { transform: translateY(0); }

/* Focus-visible — consistent ring across the site. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-within summary {
  outline: 3px solid var(--hh-color-tertiary);
  outline-offset: 2px;
  border-radius: var(--hh-radius-sm);
}

/* Image rendering — crisp on high-DPI. */
img { image-rendering: auto; }

/* Selection color matches brand. */
::selection {
  background: var(--hh-color-tertiary);
  color: var(--hh-color-primary);
}

/* Reduced motion — disable all transforms/transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hh-reveal { opacity: 1; transform: none; }
}

/* Print — for blog posts couples print for inspiration. */
@media print {
  .hh-header,
  .hh-footer,
  .hh-nav,
  .hh-mobile-nav,
  .hh-btn,
  .hh-skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .hh-section { padding-block: 1rem; }
  .hh-card,
  .hh-card--paper,
  .hh-page--sky { background: #fff !important; }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: ""; }
	.hh-seating-planner__setup,
	.hh-seating-planner__actions,
	.hh-guest-select { display: none !important; }
	.hh-checklist-toolbar,
	.hh-checklist-actions { display: none !important; }
	.hh-standesamt-prep__scenarios,
	.hh-standesamt-prep__actions { display: none !important; }
	.hh-standesamt-prep { border: 0; padding: 0; }
	.hh-standesamt-question textarea { min-height: 5rem; }
	.hh-name-change__scenarios,
	.hh-name-change__toolbar,
	.hh-name-change__actions { display: none !important; }
	.hh-name-change { border: 0; padding: 0; }
	.hh-name-task.is-applicable { display: grid !important; }
	.hh-name-task:not(.is-applicable) { display: none !important; }
	.hh-planner-offers__actions { display: none !important; }
	.hh-planner-offers { border: 0; padding: 0; }
	.hh-planner-offers__grid { grid-template-columns: repeat(3, 1fr); }
	.hh-planner-offer { break-inside: avoid; }
	.hh-vow-inputs,
	.hh-vow-actions { display: none !important; }
	.hh-vow-layout { grid-template-columns: 1fr; }
	.hh-vow-output { position: static; }
	.hh-checklist-task[hidden] { display: grid !important; }
	.hh-checklist-phase { break-inside: avoid; }
	.hh-seating-board { grid-template-columns: repeat(3, 1fr); }
	.hh-seat-zone { break-inside: avoid; }
}

@media (max-width: 46rem) {
  .hh-standesamt-prep__scenarios,
  .hh-name-change__scenarios,
  .hh-name-change__summary { grid-template-columns: 1fr; }
  .hh-name-task { grid-template-columns: 1fr; align-items: stretch; }
  .hh-planner-offers__summary,
  .hh-planner-offers__grid,
  .hh-planner-offer__prices { grid-template-columns: 1fr; }
}

@media (min-width: 46.01rem) and (max-width: 70rem) {
  .hh-planner-offers__grid { grid-template-columns: 1fr; }
}


/* Keep page introductions useful before the first scroll, especially form pages. */
.hh-section--hero { padding-block: clamp(2rem, 4vw, 3.5rem); }
.hh-section--hero .hh-hero { padding-block: 1rem; }
.hh-section--hero .hh-hero h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.1; max-width: 22ch; margin-inline: auto; }
@media (min-width: 640px) { .hh-hero__cta { flex-direction: row; flex-wrap: wrap; justify-content: center; } }