/* components.css — buttons, cards, inputs, nav, footer, expandable rows.
   See design.md §5. */

/* ======================================================================
   Buttons
====================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
              background var(--motion-duration-fast) var(--motion-ease-standard),
              color var(--motion-duration-fast) var(--motion-ease-standard);
}

.btn--small { padding: 0.625rem 1.25rem; font-size: var(--font-size-sm); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn--primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--color-ink);
  color: var(--color-paper);
}
.btn--primary:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 var(--color-ink);
}

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
.btn--secondary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--color-ink);
  color: var(--color-ink);
}
.btn--secondary:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 var(--color-ink);
}

.btn--coral {
  background: var(--color-coral);
  color: var(--color-ink);
}
.btn--coral:hover {
  background: var(--color-coral-deep);
  color: var(--color-white);
}
/* Audit fix — coral focus ring on coral button is invisible. Use ink. */
.btn--coral:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

.btn--text {
  background: transparent;
  color: var(--color-ink);
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.btn--text:hover { color: var(--color-coral-deep); }

/* Universal focus ring */
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-coral);
  outline-offset: 2px;
}
/* Cancel for coral elements where ink is needed. */
.btn--coral:focus-visible,
.card--featured:focus-visible {
  outline-color: var(--color-ink);
}

/* Circular icon button */
.btn--icon-circle {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn--icon-circle:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}
.btn--icon-circle:active { transform: scale(0.96); }

/* ======================================================================
   Cards
====================================================================== */

/* Footer-rail rule (Pick3-Lessons §3): every card uses flex column + height:100%
   so it fills its grid cell. The terminal element (.card__cta or .card__footer)
   gets margin-top:auto so prices/CTAs/badges align horizontally across a row
   regardless of variable title/excerpt length above. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border: 2px solid var(--color-border-ink);
  border-radius: 20px;
  padding: var(--space-8);
  box-shadow: var(--shadow-hard-md);
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 0 var(--color-ink);
  color: var(--color-ink);
}
.card:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 var(--color-ink);
}

.card--featured {
  background: var(--color-coral);
}
.card--featured:hover { background: var(--color-coral); }

.card__chip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: var(--color-coral-soft);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  margin-bottom: var(--space-3);
  align-self: flex-start;
}
.card--featured .card__chip {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* "Anwaltlich/steuerberater geprüft" — only allowed on calculators that have
   actually been externally reviewed (legal-content-filter.php blocks the phrase
   elsewhere). On dark .card--featured the chip inverts via the rule below. */
.chip--verified {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  background: rgba(46, 125, 91, 0.15);
  color: var(--color-success);
  border: 1px solid rgba(46, 125, 91, 0.30);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
}
.card--featured .chip--verified {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper);
}
.card--featured .card__footer {
  border-top-color: rgba(15, 15, 15, 0.18);
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw + 0.5rem, 1.5rem);  /* 18px → 24px fluid */
  font-weight: 600;
  line-height: var(--line-height-snug);
  margin: 0 0 var(--space-3);
  min-width: 0;
  overflow-wrap: break-word;        /* NOT `anywhere` — would break mid-syllable */
  word-break: normal;
  /* See .hero__title for rationale — auto + de-DE lang attribute + injected
     ­ soft hyphens combine to produce morphological compound breaks. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.card__excerpt {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
  flex: 1 1 auto;                   /* pushes the footer/CTA to the bottom */
}
.card__body {
  flex: 1 1 auto;
}
.card--featured .card__excerpt { color: var(--color-ink); }

.card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

/* Grid wrappers — .card-grid is the original Pick 2 pattern. .card-row is the
   Pick3-Lessons §6 responsive 1→2→3→4 pattern; both work, the new code uses
   .card-row going forward. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .card-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .card-grid--3col { grid-template-columns: repeat(3, 1fr); }
}

.card-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 640px)  { .card-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .card-row { grid-template-columns: repeat(4, 1fr); } }

.grid--3col {
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding: 0 var(--space-6) var(--space-16);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .grid--3col { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
}

.card--list {
  background: var(--color-white);
  border-radius: 20px;
}

.card--cat .card__title { font-size: var(--font-size-xl); }

/* ======================================================================
   Form inputs
====================================================================== */

.input, .select, .textarea {
  display: block;
  width: 100%;
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-ink);
  transition: box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
  appearance: none;
  -webkit-appearance: none;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-coral);
  border-color: var(--color-ink);
}
.input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.field__label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
}
.field__hint {
  font-size: var(--font-size-xs);
  color: var(--color-ink-mute);
}
/* Contact-form / calculator field error message.
   Rendered only when an error exists (`<p class="field__error">…</p>`),
   so we force it visible the moment it appears. The ⚠ glyph makes the
   message unambiguous next to the red field border. */
.field__error {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-error);
  margin-top: var(--space-2);
  font-weight: 500;
  line-height: 1.4;
}
.field__error::before {
  content: "⚠ ";
  margin-right: 0.25rem;
}
.field--has-error .input,
.field--has-error .select,
.field--has-error .contact-form__textarea {
  border-color: var(--color-error);
  box-shadow: 0 0 0 1px var(--color-error);
}

/* Suffix/prefix unit (€, %, Monate) */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 3rem; }
.input__suffix {
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-mute);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

/* Radio + checkbox */
.choice-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-sm);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) {
  background: var(--color-coral);
  color: var(--color-ink);
}
/* Keyboard focus ring — the visually hidden checkbox would otherwise have no
   visible focus state. Mirrors --color-coral-deep so it reads on white *and*
   coral backgrounds (when toggle is in the "on" state). 2026-05-03 audit D3. */
.choice:has(input:focus-visible) {
  outline: 3px solid var(--color-coral-deep);
  outline-offset: 2px;
}

/* Slider */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-ink);
  border-radius: 3px;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-coral);
  border: 2px solid var(--color-ink);
  cursor: grab;
}
.slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-coral);
  border: 2px solid var(--color-ink);
  cursor: grab;
}

/* Select */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230F0F0F' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

/* ======================================================================
   Header / Nav / Drawer
====================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border-soft);
  height: var(--site-header-h);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
  max-width: var(--max-width-full);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px) {
  .site-header__inner { padding-inline: var(--space-8); }
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--color-ink);
  text-transform: lowercase;
}
.site-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 700;
  font-size: var(--font-size-base);
  line-height: 1;
}
.site-logo--inverse { color: var(--color-paper); }
.site-logo--inverse .site-logo__mark { background: var(--color-paper); color: var(--color-ink); }

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
}
.site-nav__list {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Top-level nav-link styling — scoped via `>` so it does NOT leak into the
   mega-panel grid or the CTA button (where .btn--primary needs to win the
   colour cascade). Without the child combinator the broader `.site-nav__list a`
   selector beats `.btn--primary` on specificity (0,1,1 vs 0,1,0) and the CTA
   button renders ink-on-ink — invisible until hover. */
.site-nav__list > .site-nav__item > a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-ink);
  text-decoration: none;
  position: relative;
}
.site-nav__list > .site-nav__item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--color-coral);
  transition: width var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-nav__list > .site-nav__item > a:hover::after { width: 100%; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-header__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--color-ink);
}
@media (min-width: 1024px) {
  .site-header__hamburger { display: none; }
}

.site-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85%;
  max-width: 420px;
  background: var(--color-paper);
  border-left: 2px solid var(--color-ink);
  padding: var(--space-12) var(--space-6);
  z-index: 200;
  transform: translateX(100%);
  transition: transform var(--motion-duration-slow) var(--motion-ease-entrance);
}
.site-drawer[data-open="true"] {
  transform: translateX(0);
  box-shadow: -7px 0 0 0 var(--color-ink);
}
.site-drawer__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: transparent;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
}
.site-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.site-drawer__list a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-xl);
  color: var(--color-ink);
  text-decoration: none;
}

/* ======================================================================
   Footer
====================================================================== */

.site-footer {
  background: var(--color-ink);
  color: var(--color-paper);
  padding: var(--space-16) 0 var(--space-8);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
@media (min-width: 768px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; padding-inline: var(--space-8); }
}
.site-footer__pitch { color: var(--color-paper); opacity: 0.85; max-width: 36ch; margin-top: var(--space-3); }
.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-paper);
  margin: 0 0 var(--space-4);
}
.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-footer a {
  color: var(--color-paper);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
/* Specificity gotcha (Pick3-Lessons §5): base.css scopes the global anchor hover
   to `:not(.btn):not(.btn *)` (specificity 0,3,2). A naive `.site-footer a:hover`
   is only (0,2,1) and LOSES — link stays ink-on-ink (invisible) on the dark
   footer. Match the :not() chain to reach (0,4,2) and win. */
.site-footer a:not(.btn):not(.btn *):hover,
.site-footer a:not(.btn):not(.btn *):focus-visible {
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer .footer-link-button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-paper);
  cursor: pointer;
  text-align: left;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-footer .footer-link-button:hover,
.site-footer .footer-link-button:focus-visible {
  color: var(--color-coral);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.card--featured a:not(.btn):not(.btn *):hover,
.card--featured a:not(.btn):not(.btn *):focus-visible { color: var(--color-paper); }
.site-footer__bottom {
  max-width: var(--max-width-wide);
  margin: var(--space-12) auto 0;
  padding: var(--space-4) var(--space-6) 0;
  border-top: 1px solid var(--color-ink-mute);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-ink-mute);
}

/* ======================================================================
   Hero (front-page)
====================================================================== */

.hero {
  padding: var(--space-16) 0;
}
@media (min-width: 1024px) {
  .hero { padding: var(--space-32) 0; }
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: end;
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 65% 35%; }
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--line-height-tight);
  font-size: var(--hero-display-size);   /* fluid clamp() — see tokens.css */
  text-wrap: balance;
  overflow-wrap: break-word;
  /* `hyphens: auto` engages the browser's German hyphenation dictionary
     (requires <html lang="de-DE">, forced in functions.php). Combined with
     soft hyphens injected by frh_soft_hyphenate() this prefers morphological
     breaks for compounds and falls back to dictionary breaks otherwise. */
  hyphens: auto;
  -webkit-hyphens: auto;
  margin: 0;
}
.hero__line { display: block; }
/* Title-split helper classes (Pick3-Lessons §1b/d): hero H1 wraps the main
   title and any "(parenthetical)" suffix in two spans so the sub renders smaller
   and muted. Both spans are children of the same H1 so screen readers read the
   full title intact. */
.hero__title-main { display: block; }
.hero__title-sub {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--hero-sub-size);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--color-ink-mute);
  margin-top: var(--space-2);
}
.hero__lead {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}
.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .hero__cta { flex-direction: row; align-items: center; }
}

/* Centered hero variant — single vertical stack: pill → headline → lead → CTAs.
   Overrides the default 2-col grid in .hero__inner via display:flex. */
.hero--centered .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}
.hero--centered .hero__title {
  max-width: 18ch;
  margin-inline: auto;
  padding: 0;
  text-wrap: balance;
}
.hero--centered .hero__lead {
  max-width: 56ch;
  margin: 0 auto;
}
.hero--centered .hero__cta {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 22rem;
  margin-top: var(--space-2);
}
@media (min-width: 640px) {
  .hero--centered .hero__cta {
    flex-direction: row;
    align-items: center;
    width: auto;
    max-width: none;
  }
}

/* Hero announcement pill — nested chip ("Neu in 2026") inside an outer pill,
   Bankon-flavoured: coral-soft surface, ink ink, hard-shadow lift on hover. */
.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border-radius: 999px;
  background: var(--color-coral-soft);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-sm);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard),
              box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.hero__pill:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--color-ink);
  color: var(--color-ink);
}
.hero__pill:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 0 var(--color-ink);
}
.hero__pill-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero__pill-text {
  color: var(--color-ink);
  white-space: normal;
}
.hero__pill-arrow {
  display: inline-block;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.hero__pill:hover .hero__pill-arrow { transform: translateX(2px); }
@media (max-width: 480px) {
  .hero__pill {
    white-space: normal;
    max-width: 100%;
    padding: 0.5rem 0.875rem 0.5rem 0.5rem;
  }
  .hero__pill-text { display: none; }
}

/* ======================================================================
   Contact form (page-kontakt.php)
====================================================================== */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 640px;
  margin-block: var(--space-12);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 640px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
.contact-form__textarea {
  resize: vertical;
  min-height: 12rem;
  font-family: var(--font-body);
  line-height: var(--line-height-normal);
}
.contact-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--space-2);
}
.field__required {
  color: var(--color-coral-deep);
  font-weight: 600;
  margin-left: 2px;
}

/* Honeypot — visually hidden, keeps screen-readers and tab-order out. */
.hp-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ======================================================================
   Alert / status messages
====================================================================== */

.alert {
  border: 2px solid var(--color-ink);
  border-radius: 16px;
  padding: var(--space-6);
  margin-block: var(--space-8);
  background: var(--color-white);
  box-shadow: var(--shadow-hard-sm);
}
.alert h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
}
.alert p { margin: 0; }
.alert--success {
  background: var(--color-coral-soft);
  border-color: var(--color-ink);
}
.alert--error {
  background: var(--color-white);
  border-color: var(--color-error);
  color: var(--color-ink);
}

/* ======================================================================
   Legal page accents
====================================================================== */

.page-stand {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
  color: var(--color-ink-mute);
  font-size: var(--font-size-sm);
}

/* Section headers */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  flex-wrap: wrap;
}
.section-header__title { margin: 0; font-size: var(--font-size-2xl); }
.section-header__link {
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
}
.section-header__link:hover { color: var(--color-coral-deep); }

/* ======================================================================
   Marquee (Neu in 2026 strip)
====================================================================== */

.marquee {
  background: var(--color-paper);
  border-block: 2px solid var(--color-ink);
  overflow: hidden;
  padding: var(--space-6) 0;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-2xl);
  color: var(--color-ink);
  padding-left: var(--space-6);
  will-change: transform;
}
.marquee__chip {
  background: var(--color-coral-soft);
  color: var(--color-ink);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 2px solid var(--color-ink);
}

/* ======================================================================
   Why grid
====================================================================== */

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: 1fr 2fr; gap: var(--space-16); }
}
.why__bullets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .why__bullets { grid-template-columns: 1fr 1fr; }
}
.why__item h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-lg); }
.why__item p  { color: var(--color-ink-soft); margin: 0; }

/* ======================================================================
   Disclaimer + sources blocks
====================================================================== */

.disclaimer {
  background: var(--color-paper-soft);
  border-left: 4px solid var(--color-warning);
  padding: var(--space-4) var(--space-6);
  border-radius: 8px;
  margin-block: var(--space-8);
  font-size: var(--font-size-sm);
  color: var(--color-ink-soft);
}
.disclaimer__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.disclaimer--rdg { border-left-color: var(--color-error); }

/* Expandable rows */
.expand-row {
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 12px;
  padding: var(--space-4) var(--space-6);
}
.expand-row + .expand-row { margin-top: var(--space-3); }
.expand-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  list-style: none;
}
.expand-row > summary::-webkit-details-marker { display: none; }
/* +/× chevron (Pick3-Lessons §9b): rotate the same "+" glyph 45° instead of
   swapping content (content swap can't be transitioned). */
.expand-row > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 400;
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
              border-color 200ms ease,
              background 200ms ease,
              color 200ms ease;
  flex-shrink: 0;
  will-change: transform;
}
.expand-row > summary:hover::after { border-color: var(--color-ink); }
.expand-row[open] > summary::after {
  transform: rotate(45deg);              /* "+" → "×" visually */
  background: var(--color-ink);
  color: var(--color-paper);
}
.expand-row[open] { padding-bottom: var(--space-6); }

/* Search form */
.search-form {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-block: var(--space-6);
  flex-wrap: wrap;
}
.search-form__input {
  flex: 1;
  min-width: 240px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--font-size-base);
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: var(--font-size-sm);
  color: var(--color-ink-mute);
  margin-bottom: var(--space-4);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-ink-mute); }
.breadcrumbs a { color: var(--color-ink-soft); }

/* Pagination (WP default) */
.nav-links {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-block: var(--space-12);
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-3);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--color-white);
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover { background: var(--color-ink); color: var(--color-paper); }

/* Cookie banner shell (DSGVO) — full styling in inc/dsgvo-banner.php inline. */
.frh-cookie {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--color-white);
  border-top: 2px solid var(--color-ink);
  padding: var(--space-4) var(--space-6);
  z-index: 300;
  box-shadow: 0 -5px 0 0 var(--color-ink);
}
.frh-cookie__inner {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  max-width: var(--max-width-wide);
  margin-inline: auto;
}
.frh-cookie__text { flex: 1 1 320px; font-size: var(--font-size-sm); }
.frh-cookie__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ======================================================================
   Mega-menu (Pick3-Lessons §7) — categories + Lucide icons + descriptions
====================================================================== */

.site-nav__item { position: relative; }
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-nav__trigger:hover,
.site-nav__item.is-open .site-nav__trigger {
  background: var(--color-paper-soft);
}
.site-nav__chevron {
  width: 14px; height: 14px;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-nav__item.is-open .site-nav__chevron { transform: rotate(180deg); }

.mega-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 720px;
  max-width: 90vw;
  background: var(--color-white);
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  box-shadow: var(--shadow-hard-md);
  padding: var(--space-6);
  z-index: 110;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
              transform var(--motion-duration-base) var(--motion-ease-standard);
}
.site-nav__item.is-open .mega-panel,
.site-nav__item:hover .mega-panel,
.site-nav__item:focus-within .mega-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mega-panel__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.mega-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: 12px;
  color: var(--color-ink);
  text-decoration: none;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.mega-link:hover, .mega-link:focus-visible {
  background: var(--color-paper-soft);
}
.mega-link__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-coral-soft);
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
}
.mega-link__icon svg { width: 20px; height: 20px; }
.mega-link__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-link__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-ink);
  line-height: 1.2;
}
.mega-link__desc {
  font-size: var(--font-size-sm);
  color: var(--color-ink-mute);
  line-height: var(--line-height-normal);
}
.mega-panel__cta {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
}
/* Defensive: even if some future broader nav rule wins on specificity again,
   the CTA button always reads paper-on-ink. */
.mega-panel__cta .btn--primary {
  color: var(--color-paper);
}
.mega-panel__cta .btn--primary:hover {
  color: var(--color-paper);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Mobile drawer link variant — title + description rows */
.drawer-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-soft);
}
.drawer-link__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-lg);
  color: var(--color-ink);
}
.drawer-link__desc {
  font-size: var(--font-size-sm);
  color: var(--color-ink-mute);
}