/**
 * HAVEN Child — the form system (site-wide).
 *
 * REDESIGN, 2026-09-15 (DEC-013). The Human Owner found the previous field —
 * a label above a pale box — still read as a template. The anatomy changes:
 *
 *   ┌────┬───────────────────────────────────────────────────┐ ◤ gold corner
 *   │ ⌂  │ LABEL (floats up on focus / value)           ✓    │   on focus
 *   │    │ value                                              │
 *   └────┴━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┘
 *    navy     focus rail draws along the lower edge
 *    anchor
 *
 * A visible navy keyline carries the whole shell; the icon anchor is part of
 * it and turns solid navy on focus; the label lives inside the shell and floats
 * to the top edge; a gold corner and a drawn rail mark the active field; a
 * filled field keeps a stronger keyline; a valid field shows a check mark (a
 * shape, not a colour); an invalid field turns red AND shows its message.
 *
 * RECTIFICATION, 2026-09-16 (Human Owner still dissatisfied). The contour is
 * now an unmistakable solid NAVY line (not a tinted grey), the icon well is a
 * clean navy-tinted block, required fields carry a gold asterisk and optional
 * ones a small outlined tag, each group of the short form sits on its own
 * warm inset panel, the card's depth is calmer, and the glint is re-staged so
 * it is actually seen (it ran behind the fields and was nearly invisible).
 *
 * Presentation only. Names, ids, the nonce, the honeypot and the handler are
 * untouched; the markup comes from haven_form_field() in inc/calculator.php.
 * Loaded after haven-visual.css and haven-p2.css; the older field rules in
 * haven-homepage.css are not deleted — the rules below out-specify them.
 *
 * Also here, because several page types use them: the student advantage seal
 * and the service explorer's starting price.
 */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  --hvn-f-fill:        #FFFFFF;
  --hvn-f-fill-2:      #FFFFFF;
  --hvn-f-line:        #3A5373;                 /* solid navy contour (6.9 : 1 on white) */
  --hvn-f-line-hover:  #223A57;
  --hvn-f-line-filled: #223A57;
  --hvn-f-well-bg:     #EDF1F5;                 /* navy at ~8 % on white */
  --hvn-f-radius:      12px;
  --hvn-f-h:           3.75rem;                 /* 60px */
  --hvn-f-well:        3.125rem;
  --hvn-f-err:         #B7232C;                 /* approved restricted red */
  --hvn-f-spring:      cubic-bezier(.34, 1.4, .64, 1);
  --hvn-f-glide:       cubic-bezier(.2, .8, .2, 1);
}

/* =========================================================================
   2. LAYOUT AND GROUPS
   ========================================================================= */

.hvn-form { display: block; }

.hvn-form__row { display: grid; grid-template-columns: 1fr; gap: 0; }

@media (min-width: 540px) {
  .hvn-form__row { grid-template-columns: 1fr 1fr; column-gap: var(--hvn-s4); }
}

.hvn-form__group {
  margin: 0 0 var(--hvn-s4);
  padding: clamp(1rem, .6rem + 1.4vw, 1.4rem) clamp(.9rem, .5rem + 1.4vw, 1.4rem) .35rem;
  background: #F7F5F1;
  border: 1px solid rgba(34, 58, 87, .10);
  border-radius: 16px;
}

.hvn-form__group .hvn-field { margin-bottom: var(--hvn-s4); }

/* "* Pflichtfeld" — the key to the asterisks, once, beside the first group head. */
.hvn-form__legend {
  max-width: none;
  margin: 0 0 var(--hvn-s3);
  font-size: .75rem;
  font-weight: 500;
  color: var(--hvn-text-secondary);
  text-align: right;
}

.hvn-form__legend b { color: var(--hvn-gold-deep); font-weight: 700; }

.hvn-form__gh {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 var(--hvn-s4);
  font-size: 1rem;
  font-weight: 600;
  color: var(--hvn-text);
}

.hvn-form__gn {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.95rem;
  height: 1.95rem;
  border-radius: 9px;
  background: var(--hvn-navy);
  color: var(--hvn-gold-lift);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(34, 58, 87, .24);
  transition: background-color 280ms var(--hvn-ease), color 280ms var(--hvn-ease), box-shadow 280ms var(--hvn-ease);
}

.hvn-form__group.is-complete .hvn-form__gn {
  background: var(--hvn-gold);
  color: transparent;
  box-shadow: 0 4px 12px rgba(192, 137, 83, .38);
}

.hvn-form__group.is-complete .hvn-form__gn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141A22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19.5 7'/%3E%3C/svg%3E") center / .95rem no-repeat;
  animation: hvnFieldOk 420ms var(--hvn-f-spring) both;
}

/* =========================================================================
   3. THE FIELD
   ========================================================================= */

.hvn-field {
  position: relative;
  display: grid;
  gap: .4rem;
  min-width: 0;
  margin: 0 0 var(--hvn-s4);
}

.hvn-field__hint {
  padding-left: .15rem;
  font-size: var(--hvn-fs-small);
  line-height: 1.5;
  color: var(--hvn-text-secondary);
}

.hvn-field__err {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--hvn-fs-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--hvn-f-err);
}

.hvn-field__err::before {
  content: '!';
  display: grid;
  place-items: center;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--hvn-f-err);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 700;
}

.hvn-field__err[hidden] { display: none; }

/* Required / optional, written out (segmented questions). */
.hvn-tag {
  flex: none;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.2;
  white-space: nowrap;
}

.hvn-tag--req { background: var(--hvn-navy); color: #FFFFFF; }
.hvn-tag--opt { background: transparent; color: var(--hvn-navy-80); border: 1px solid rgba(34, 58, 87, .24); }
.is-required > .hvn-seg__legend .hvn-tag--opt,
.is-required > legend .hvn-tag--opt { display: none; }

/* =========================================================================
   4. THE SHELL
   ========================================================================= */

.hvn-ctl {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  min-width: 0;
  min-height: var(--hvn-f-h);
  background: var(--hvn-f-fill);
  /* 2px, not 1.5px: a 1.5px border renders as 1px on standard-density screens. */
  border: 2px solid var(--hvn-f-line);
  border-radius: var(--hvn-f-radius);
  box-shadow: 0 1px 0 rgba(34, 58, 87, .10);
  transition:
    border-color 200ms var(--hvn-ease),
    background-color 200ms var(--hvn-ease),
    box-shadow 260ms var(--hvn-ease),
    transform 260ms var(--hvn-f-spring);
}

/* The gold corner — appears on the active field only. */
.hvn-ctl::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-top: 2.5px solid var(--hvn-gold);
  border-right: 2.5px solid var(--hvn-gold);
  border-top-right-radius: var(--hvn-f-radius);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 220ms var(--hvn-ease), transform 340ms var(--hvn-f-spring);
  pointer-events: none;
}

@media (hover: hover) {
  .hvn-ctl:hover { border-color: var(--hvn-f-line-hover); background: #FFFFFF; box-shadow: 0 6px 14px -8px rgba(34, 58, 87, .45); }
}

.hvn-ctl:focus-within {
  border-color: var(--hvn-navy);
  background: #FFFFFF;
  box-shadow:
    inset 0 0 0 1px var(--hvn-navy),
    0 0 0 4px rgba(192, 137, 83, .32),
    0 12px 24px -12px rgba(20, 26, 34, .35);
}

.hvn-ctl:focus-within::before { opacity: 1; transform: none; }

/* --- the navy anchor ------------------------------------------------------ */

.hvn-ctl__lead {
  flex: 0 0 var(--hvn-f-well);
  display: grid;
  place-items: center;
  color: var(--hvn-navy);
  background: var(--hvn-f-well-bg);
  border-right: 1.5px solid rgba(34, 58, 87, .30);
  border-radius: calc(var(--hvn-f-radius) - 2px) 0 0 calc(var(--hvn-f-radius) - 2px);
  transition: background-color 220ms var(--hvn-ease), color 220ms var(--hvn-ease), border-color 220ms var(--hvn-ease);
}

.hvn-ctl__lead svg { transition: transform 340ms var(--hvn-f-spring); }

.hvn-ctl:focus-within .hvn-ctl__lead {
  background: var(--hvn-navy);
  border-right-color: var(--hvn-navy);
  color: var(--hvn-gold-lift);
}

.hvn-ctl:focus-within .hvn-ctl__lead svg { transform: scale(1.1) rotate(-6deg); }

.hvn-ctl--textarea .hvn-ctl__lead { place-items: start center; padding-top: 1.2rem; }

/* --- the control and its floating label ------------------------------------ */

.hvn-ctl__main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.hvn-field .hvn-ctl input,
.hvn-field .hvn-ctl select,
.hvn-field .hvn-ctl textarea,
.hvn-field .hvn-ctl input:hover,
.hvn-field .hvn-ctl select:hover,
.hvn-field .hvn-ctl textarea:hover,
.hvn-field .hvn-ctl input:focus,
.hvn-field .hvn-ctl select:focus,
.hvn-field .hvn-ctl textarea:focus,
.hvn-field .hvn-ctl input:focus-visible,
.hvn-field .hvn-ctl select:focus-visible,
.hvn-field .hvn-ctl textarea:focus-visible,
.hvn-field .hvn-ctl input:user-invalid,
.hvn-field .hvn-ctl textarea:user-invalid {
  -webkit-appearance: none;
          appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: calc(var(--hvn-f-h) - 3px);
  margin: 0;
  padding: 1.55rem 1rem .45rem;
  font-family: var(--hvn-font);
  font-size: 1rem;          /* a floor: below 16px iOS zooms on focus */
  font-weight: 500;
  line-height: 1.35;
  color: var(--hvn-text);
  background: transparent;
  border: 0;
  border-radius: 0 var(--hvn-f-radius) var(--hvn-f-radius) 0;
  box-shadow: none;
  outline: none;
  transform: none;
}

/*
 * FOCUS RING HAND-OFF. style.css draws a 3px navy outline on every
 * :focus-visible element with !important (Architecture Part 7G). Inside a
 * field shell that outline would be drawn a second time, around the bare
 * control. Here, and only here, it is handed to the shell, which shows a
 * doubled navy keyline, a gold halo, a gold corner, a drawn rail and a solid
 * navy anchor — more visible than the outline was.
 */
.hvn-field .hvn-ctl input:focus-visible,
.hvn-field .hvn-ctl select:focus-visible,
.hvn-field .hvn-ctl textarea:focus-visible {
  outline: none !important;
}

.hvn-ctl__main input::placeholder,
.hvn-ctl__main textarea::placeholder { color: transparent; }

.hvn-ctl__main input:focus::placeholder,
.hvn-ctl__main textarea:focus::placeholder { color: var(--hvn-navy-60); }

.hvn-field .hvn-ctl .hvn-ctl__label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 1rem;
  right: 1rem;
  display: block;
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3A5373;
  transform: translateY(-50%);
  transform-origin: left top;
  pointer-events: none;
  transition:
    top 220ms var(--hvn-f-glide),
    transform 220ms var(--hvn-f-glide),
    font-size 220ms var(--hvn-f-glide),
    letter-spacing 220ms var(--hvn-f-glide),
    color 200ms var(--hvn-ease);
}

/* "optional" sits at the right edge of the label line, so it never truncates
   a long label once the label floats (e.g. "WORUM GEHT ES?"). */


/* The label must not clip the outlined "optional" tag; only the text truncates. */
.hvn-field .hvn-ctl .hvn-ctl__label { overflow: visible; }

.hvn-ctl__opt {
  position: absolute;
  z-index: 3;
  top: 0;
  right: .9rem;
  padding: .12rem .5rem;
  border: 1px solid rgba(34, 58, 87, .34);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--hvn-navy-80);
  background: #FFFFFF;
  transform: translateY(-55%);
  pointer-events: none;
}

.hvn-field.is-required .hvn-ctl__opt,
.hvn-field.is-required .hvn-ctl__opt-sr { display: none; }

.hvn-ctl__opt-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Required: a gold asterisk straight after the label text (the control itself
   carries `required`, so assistive technology announces it). */
.hvn-ctl__req { display: none; margin-left: .18em; color: var(--hvn-gold-deep); font-weight: 700; }
.hvn-field.is-required .hvn-ctl__req { display: inline; }
.hvn-field .hvn-ctl .hvn-ctl__label { display: flex; align-items: baseline; }
.hvn-ctl__ltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.hvn-ctl--textarea .hvn-field .hvn-ctl__label,
.hvn-field .hvn-ctl--textarea .hvn-ctl__label { top: 1.1rem; transform: none; }

/* Floated: focused, filled, autofilled, or a control that always shows a value. */
.hvn-field .hvn-ctl__main:focus-within .hvn-ctl__label,
.hvn-field .hvn-ctl__main input:focus + .hvn-ctl__label,
.hvn-field .hvn-ctl__main input:not(:placeholder-shown) + .hvn-ctl__label,
.hvn-field .hvn-ctl__main input:-webkit-autofill + .hvn-ctl__label,
.hvn-field .hvn-ctl__main textarea:focus + .hvn-ctl__label,
.hvn-field .hvn-ctl__main textarea:not(:placeholder-shown) + .hvn-ctl__label,
.hvn-field.is-fixed .hvn-ctl .hvn-ctl__label {
  top: .55rem;
  transform: none;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hvn-navy);
}

.hvn-field .hvn-ctl:focus-within .hvn-ctl__label { color: var(--hvn-navy); }

/* --- select and date -------------------------------------------------------- */

.hvn-ctl__trail {
  position: absolute;
  z-index: 1;
  right: .7rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--hvn-f-well-bg);
  color: var(--hvn-navy);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color 200ms var(--hvn-ease), transform 280ms var(--hvn-f-spring);
}

.hvn-ctl:focus-within .hvn-ctl__trail { color: var(--hvn-gold-lift); background: var(--hvn-navy); transform: translateY(-50%) rotate(180deg); }

.hvn-field .hvn-ctl--select select { padding-right: 3.2rem; cursor: pointer; }
.hvn-ctl--select select::-ms-expand { display: none; }
.hvn-ctl--select select option { color: var(--hvn-text); background: #FFFFFF; }

.hvn-field .hvn-ctl--date input[type="date"] { cursor: pointer; }

.hvn-ctl--date input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.hvn-ctl--date input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.hvn-ctl--date input[type="date"]::-webkit-datetime-edit { padding: 0; }

.hvn-field .hvn-ctl textarea {
  min-height: 8.25rem;
  padding-top: 1.75rem;
  resize: vertical;
  line-height: 1.55;
  overflow-y: auto;
  transition: height 160ms var(--hvn-ease);
}

/* --- the focus rail --------------------------------------------------------- */

.hvn-ctl__rail {
  position: absolute;
  z-index: 2;
  left: calc(var(--hvn-f-well) + 2px);
  right: 14px;
  bottom: -2px;
  height: 2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hvn-gold) 0%, var(--hvn-navy) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--hvn-f-glide);
  pointer-events: none;
}

.hvn-ctl:focus-within .hvn-ctl__rail { transform: scaleX(1); }

/* --- confirmation mark ------------------------------------------------------ */

.hvn-ctl__ok {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: .85rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -.7rem;
  border-radius: 999px;
  background: var(--hvn-navy);
  color: #FFFFFF;
  box-shadow: 0 3px 8px rgba(34, 58, 87, .28);
  opacity: 0;
  transform: scale(.35);
  transition: opacity 180ms var(--hvn-ease), transform 380ms var(--hvn-f-spring);
  pointer-events: none;
}

.hvn-ctl__ok svg { stroke-width: 3.2; }

.hvn-field.is-valid .hvn-ctl__ok { opacity: 1; transform: none; }
.hvn-field.is-valid .hvn-ctl--select .hvn-ctl__ok { right: 2.7rem; }
.hvn-field.is-valid .hvn-ctl--textarea .hvn-ctl__ok { top: 1rem; margin-top: 0; }
.hvn-field.is-valid .hvn-ctl input,
.hvn-field.is-valid .hvn-ctl textarea { padding-right: 2.9rem; }
.hvn-field.is-valid .hvn-ctl--select select { padding-right: 4.4rem; }

/* --- filled ----------------------------------------------------------------- */

.hvn-field.is-filled .hvn-ctl { border-color: var(--hvn-f-line-filled); background: #FFFFFF; }

.hvn-field.is-filled .hvn-ctl__lead {
  background: #E1E8EF;
  border-right-color: rgba(34, 58, 87, .42);
}

/* --- invalid ---------------------------------------------------------------- */

.hvn-field.is-invalid .hvn-ctl {
  border-color: var(--hvn-f-err);
  background: #FFFBFB;
  box-shadow: inset 0 0 0 1px var(--hvn-f-err), 0 0 0 3px rgba(183, 35, 44, .12);
}

.hvn-field.is-invalid .hvn-ctl:focus-within { box-shadow: inset 0 0 0 1px var(--hvn-f-err), 0 0 0 4px rgba(183, 35, 44, .18); }
.hvn-field.is-invalid .hvn-ctl::before { border-color: var(--hvn-f-err); }
.hvn-field.is-invalid .hvn-ctl__rail { background: var(--hvn-f-err); }
.hvn-field.is-invalid .hvn-ctl .hvn-ctl__label { color: var(--hvn-f-err); }

.hvn-field.is-invalid .hvn-ctl__lead {
  color: var(--hvn-f-err);
  background: rgba(183, 35, 44, .08);
  border-right-color: rgba(183, 35, 44, .28);
}

.hvn-field.is-invalid .hvn-ctl__ok { opacity: 0; }

/* A shake the first time a field is flagged: motion that points at the problem. */
.hvn-field.is-invalid .hvn-ctl { animation: hvnFieldNudge 360ms var(--hvn-ease) 1; }

@keyframes hvnFieldNudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  60%      { transform: translateX(3px); }
}

@keyframes hvnFieldOk {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}

/* Stacked row: fields that carry a long floated label AND a control of their
   own (select chevron, date) get the full width, so the label never truncates. */
@media (min-width: 540px) {
  .hvn-form__row--stack { grid-template-columns: 1fr; }
}

/* In the calculator the key sits flush right under the step title. */
.hvn-calc .hvn-form__legend { margin: -.35rem 0 var(--hvn-s4); }

/* =========================================================================
   5. PROMPT CHIPS
   ========================================================================= */

.hvn-prompts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: -.3rem 0 var(--hvn-s4);
}

.hvn-prompts[hidden] { display: none; }
.hvn-prompts__lab { margin-right: .15rem; font-size: var(--hvn-fs-small); color: var(--hvn-text-secondary); }

.hvn-prompts button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2.75rem;
  padding: .4rem .9rem;
  border: 1.5px solid rgba(34, 58, 87, .28);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hvn-navy);
  font: 600 .8125rem/1.1 var(--hvn-font);
  cursor: pointer;
  transition: background-color 200ms var(--hvn-ease), border-color 200ms var(--hvn-ease), transform 200ms var(--hvn-f-spring);
}

.hvn-prompts button::before { content: '+'; color: var(--hvn-gold-deep); font-weight: 700; }
.hvn-prompts button:hover { border-color: var(--hvn-navy); background: var(--hvn-warm); }
.hvn-prompts button:active { transform: scale(.96); }
.hvn-prompts button:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }
.hvn-prompts button.is-used { background: rgba(34, 58, 87, .07); }
.hvn-prompts button.is-used::before { content: '✓'; }

/* =========================================================================
   6. SUBMIT — a tactile key
   ========================================================================= */

.hvn-btn--submit {
  min-height: 3.75rem;
  padding-inline: 1.7rem .55rem;
  gap: .9rem;
  border-radius: 999px;
  font-size: 1.0625rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 0 rgba(20, 26, 34, .08),
    0 3px 0 var(--hvn-gold-deep),
    0 14px 28px rgba(192, 137, 83, .34);
}

.hvn-btn__arrow { flex: none; transition: transform 300ms var(--hvn-f-spring); }

.hvn-btn--submit .hvn-btn__arrow {
  width: 2.6rem;
  height: 2.6rem;
  padding: .7rem;
  border-radius: 999px;
  background: var(--hvn-charcoal);
  color: var(--hvn-gold-lift);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.hvn-btn:hover .hvn-btn__arrow,
.hvn-btn:focus-visible .hvn-btn__arrow { transform: translateX(4px); }

.hvn-btn--submit:active {
  transform: translateY(3px) scale(.99);
  box-shadow:
    inset 0 2px 6px rgba(20, 26, 34, .22),
    0 0 0 var(--hvn-gold-deep),
    0 4px 10px rgba(192, 137, 83, .22);
}

.hvn-form .hvn-btn:disabled,
.hvn-calc .hvn-btn:disabled { cursor: progress; opacity: .78; transform: none; }

.hvn-form__actions { margin: 0 0 var(--hvn-s4); }

@media (max-width: 539.98px) {
  .hvn-form__actions { display: block; }
  .hvn-btn--submit { width: 100%; justify-content: space-between; }
}

/* =========================================================================
   7. RESULT NOTES
   ========================================================================= */

.hvn-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  margin: 0 0 var(--hvn-s5);
  padding: var(--hvn-s4) var(--hvn-s5);
  border: 1px solid transparent;
  border-radius: var(--hvn-f-radius);
  font-size: var(--hvn-fs-small);
  line-height: 1.6;
}

.hvn-note::before {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: .8rem;
}

.hvn-note--ok { background: #F6F1E9; border-color: var(--hvn-gold); color: #4A3720; }

.hvn-note--ok::before {
  background-color: var(--hvn-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141A22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}

.hvn-note--err { background: #FDF4F4; border-color: var(--hvn-f-err); color: #6B1B21; }

.hvn-note--err::before {
  background-color: var(--hvn-f-err);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E");
}

/* =========================================================================
   8. HONEYPOT
   ========================================================================= */

.hvn-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   9. THE CARD
   ========================================================================= */

.hvn-quick__panel,
.hvn-qform__panel,
.hvn-calc__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(34, 58, 87, .16);
  border-radius: 22px;
  box-shadow:
    0 1px 2px rgba(20, 26, 34, .06),
    0 28px 56px -24px rgba(20, 26, 34, .28);
  --hvn-card-pad: clamp(1.25rem, .5rem + 2.8vw, 2.6rem);
  padding: var(--hvn-card-pad);
}

/* A navy-to-gold rule across the head of the card. */
.hvn-quick__panel::before,
.hvn-qform__panel::before,
.hvn-calc__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--hvn-navy) 0%, var(--hvn-navy) 22%, var(--hvn-gold) 22%, var(--hvn-gold-lift) 60%, rgba(192, 137, 83, 0) 100%);
}

.hvn-form__foot {
  margin: var(--hvn-s5) calc(var(--hvn-card-pad, 1.5rem) * -1) calc(var(--hvn-card-pad, 1.5rem) * -1);
  padding: var(--hvn-s5) var(--hvn-card-pad, 1.5rem);
  background: linear-gradient(180deg, rgba(247, 245, 241, 0) 0%, var(--hvn-warm) 38%);
  border-top: 1px solid var(--hvn-warm-line);
}

.hvn-form__alt { margin: 0 0 var(--hvn-s3); font-size: var(--hvn-fs-small); color: var(--hvn-text-secondary); }
.hvn-form__alt a { color: var(--hvn-text); font-weight: 600; text-underline-offset: .18em; }
.hvn-form__alt a:hover { color: var(--hvn-gold-deep); }
.hvn-form__alt span { margin-inline: .35em; color: var(--hvn-navy-40); }
.hvn-form__note { margin: 0; font-size: var(--hvn-fs-small); line-height: 1.6; color: var(--hvn-text-secondary); }

/* =========================================================================
   10. THE ONE-SHOT DIAGONAL GLINT
   One slow diagonal sweep of warm light across the card when it first comes
   into view — it says "this is where you act", then stays out of the way.

   Re-staged 2026-09-16. The previous glint (2.6 s) ran BEHIND the fields at a
   .20 peak, so on a white card it was almost invisible. It now passes OVER the
   card as a narrow warm band with `mix-blend-mode: multiply`: white ground
   takes a faint gold tint, navy text stays navy (multiply can only darken a
   dark value marginally), so nothing becomes harder to read. Timing chosen by
   frame review at 1440 and 390: 3.4 s, ease-in-out, after a 0.6 s pause, once.
   Removed entirely under prefers-reduced-motion.
   ========================================================================= */

.hvn-quick__panel > *,
.hvn-qform__panel > *,
.hvn-calc__card > * { position: relative; z-index: 1; }

.hvn-glint::after {
  content: '';
  position: absolute;
  z-index: 5;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 42%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: multiply;
  transform: translate3d(-160%, 0, 0) rotate(22deg);
  background: linear-gradient(
    90deg,
    rgba(240, 214, 182, 0) 0%,
    rgba(236, 204, 166, .32) 38%,
    rgba(226, 184, 138, .55) 50%,
    rgba(236, 204, 166, .32) 62%,
    rgba(240, 214, 182, 0) 100%
  );
}

@keyframes hvnCardGlint {
  0%   { opacity: 0; transform: translate3d(-160%, 0, 0) rotate(22deg); }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(330%, 0, 0) rotate(22deg); }
}

.hvn-glint.is-in::after {
  animation: hvnCardGlint 3400ms cubic-bezier(.45, 0, .25, 1) 600ms 1 both;
}

/* =========================================================================
   11. THE STUDENT ADVANTAGE SEAL
   Meaning is carried by the TEXT ("−5 %", "Studentenvorteil"); the red seal
   and the pulse only draw the eye. The pulse runs three times, slowly, and
   stops; under reduced motion it never runs.
   ========================================================================= */

.hvn-stud {
  --hvn-stud-s: 3.25rem;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  vertical-align: middle;
  text-align: left;
}

.hvn-stud--sm { --hvn-stud-s: 2.35rem; gap: .5rem; }
.hvn-stud--lg { --hvn-stud-s: 5.75rem; gap: 1rem; }

.hvn-stud__seal {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: var(--hvn-stud-s);
  height: var(--hvn-stud-s);
  color: #FFFFFF;
  transform: rotate(-8deg);
  animation: hvnStudSettle 900ms var(--hvn-f-spring) 500ms 1 both;
}

.hvn-stud__edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--hvn-f-err);
  filter: drop-shadow(0 4px 10px rgba(183, 35, 44, .34));
}

/* Inner gold ring. */
.hvn-stud__seal::before {
  content: '';
  position: absolute;
  inset: 17%;
  border: 1.5px solid rgba(236, 199, 158, .85);
  border-radius: 50%;
}

/* The attention pulse. */
.hvn-stud__seal::after {
  content: '';
  position: absolute;
  inset: -4%;
  border: 2px solid rgba(183, 35, 44, .55);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: hvnStudPulse 2400ms cubic-bezier(.2, .7, .3, 1) 1100ms 3 both;
}

.hvn-stud__pct {
  position: relative;
  font-size: calc(var(--hvn-stud-s) * .34);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hvn-stud__pct small { font-size: .6em; font-weight: 700; margin-left: .03em; }

.hvn-stud__txt { display: grid; gap: .1rem; min-width: 0; }

.hvn-stud__txt strong {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--hvn-f-err);
}

.hvn-stud__txt small { font-size: .75rem; line-height: 1.35; color: var(--hvn-text-secondary); }
.hvn-stud--sm .hvn-stud__txt strong { font-size: .75rem; }
.hvn-stud--lg .hvn-stud__txt strong { font-size: 1.0625rem; }
.hvn-stud--lg .hvn-stud__txt small { font-size: .875rem; }

/* On dark grounds. */
.hvn-shero3 .hvn-stud__txt strong,
.hvn-shero2 .hvn-stud__txt strong,
.hvn-calc__summary .hvn-stud__txt strong,
.hvn-estimate .hvn-stud__txt strong { color: #FFFFFF; }
.hvn-shero3 .hvn-stud__txt small,
.hvn-shero2 .hvn-stud__txt small { color: rgba(255, 255, 255, .8); }

@keyframes hvnStudPulse {
  0%   { opacity: .75; transform: scale(.88); }
  70%  { opacity: 0;   transform: scale(1.42); }
  100% { opacity: 0;   transform: scale(1.42); }
}

@keyframes hvnStudSettle {
  0%   { transform: rotate(-8deg) scale(.6); opacity: 0; }
  60%  { transform: rotate(-15deg) scale(1.06); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}

/* =========================================================================
   12. SERVICE EXPLORER — starting price (Homepage)
   ========================================================================= */

.hvn-sx__deal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }

.hvn-sx__from {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  margin: 0;
  padding: .35rem .85rem .4rem;
  border-radius: 999px;
  background: var(--hvn-navy);
  color: rgba(255, 255, 255, .78);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
}

.hvn-sx__from strong { font-size: 1.0625rem; letter-spacing: -.01em; color: var(--hvn-gold-lift); font-variant-numeric: tabular-nums; }

/* =========================================================================
   13. MOBILE
   ========================================================================= */

@media (max-width: 767.98px) {
  .hvn-quick__panel,
  .hvn-qform__panel,
  .hvn-calc__card { border-radius: 18px; }

  .hvn-form__foot { padding-bottom: var(--hvn-s6); }

  .hvn-quick,
  .hvn-qform { padding-bottom: calc(var(--hvn-section-y) + 2rem); }

  body.hvn-has-mbar { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 380px) {
  :root { --hvn-f-well: 2.8rem; }
  .hvn-field .hvn-ctl input,
  .hvn-field .hvn-ctl select { padding-left: .8rem; padding-right: .8rem; }
  .hvn-field .hvn-ctl .hvn-ctl__label { left: .8rem; right: .8rem; }
}

/* =========================================================================
   14. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hvn-ctl,
  .hvn-ctl::before,
  .hvn-ctl__lead,
  .hvn-ctl__lead svg,
  .hvn-ctl__trail,
  .hvn-ctl__rail,
  .hvn-ctl__ok,
  .hvn-field .hvn-ctl .hvn-ctl__label,
  .hvn-field .hvn-ctl textarea,
  .hvn-prompts button,
  .hvn-form__gn,
  .hvn-btn__arrow { transition: none; }

  .hvn-ctl:focus-within,
  .hvn-ctl:focus-within .hvn-ctl__lead svg,
  .hvn-btn:hover .hvn-btn__arrow,
  .hvn-btn--submit:active { transform: none; }

  .hvn-ctl:focus-within .hvn-ctl__trail { transform: translateY(-50%); }

  .hvn-field.is-invalid .hvn-ctl,
  .hvn-form__group.is-complete .hvn-form__gn::after,
  .hvn-stud__seal,
  .hvn-stud__seal::after { animation: none; }

  .hvn-stud__seal::after { opacity: 0; }

  .hvn-glint::after,
  .hvn-glint.is-in::after { animation: none; opacity: 0; }
}

/* =========================================================================
   15. VERY NARROW PHONES (after every other rule, so it wins)
   ========================================================================= */

/* Very narrow phones: reclaim width from padding and the icon well, not from labels. */
@media (max-width: 359.98px) {
  .hvn-ctl { --hvn-f-well: 2.6rem; }
  .hvn-quick__panel,
  .hvn-qform__panel { --hvn-card-pad: .85rem; }
  .hvn-form__group { padding-inline: .7rem; }
  .hvn-field .hvn-ctl .hvn-ctl__label { left: .75rem; right: .6rem; }
  .hvn-field .hvn-ctl input,
  .hvn-field .hvn-ctl select,
  .hvn-field .hvn-ctl textarea { padding-inline: .75rem; }
}