/* =========================================================
   BIANCHI BRAND TOKENS
   Referenz: bianchi.ch Avada :root-Variablen (Stand 08/2026)
   Button: Rot statt Anthrazit (Entscheid Jonas 08/2026)
   serif-{300,400,500,700}.woff2 = Cormorant Garamond (statische Schnitte)
   ========================================================= */
:root {
  --brand-ink:      #222222;   /* body_typography-color */
  --brand-muted:    #4a4a4a;
  --brand-line:     #e0dede;   /* sep_color */
  --brand-red:      #bf0000;   /* primary_color / Buttons */
  --brand-red-dark: #990000;
  --brand-error:    #e0284f;
  --brand-input-border: #c4c1c1;
  --brand-paper:    #f6f6f6;   /* awb-color2 */
  --brand-white:    #ffffff;
  --brand-green:    #11481c;

  --font-serif: "Bianchi Serif", "Cormorant Garamond", "Times New Roman", Times, serif;

  --maxw: 700px;
}

@font-face {
  font-family: "Bianchi Serif";
  src: url("/fonts/serif-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bianchi Serif";
  src: url("/fonts/serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bianchi Serif";
  src: url("/fonts/serif-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bianchi Serif";
  src: url("/fonts/serif-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-serif);
  font-size: 24px;             /* body_typography-font-size */
  line-height: 1.3;
  color: var(--brand-ink);
  background: var(--brand-paper);
  padding: 56px 16px 96px;
}
@media (max-width: 640px) {
  body { font-size: 20px; }
}

.brand-header {
  max-width: var(--maxw);
  margin: 0 auto 36px;
  text-align: center;
}
.brand-header img { height: auto; }

.card {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--brand-white);
  border: 1px solid var(--brand-line);
  padding: 48px 56px 56px;
}
@media (max-width: 640px) {
  .card { padding: 32px 20px 40px; }
}

.card-cover {
  text-align: center;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--brand-line);
  margin-bottom: 40px;
}
.card-cover h1 {
  font-family: var(--font-serif);
  font-weight: 300;            /* h1_typography-font-weight */
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -1px;        /* h1_typography-letter-spacing */
  color: var(--brand-ink);
}
.card-cover p {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--brand-muted);
}

form { margin: 0 auto; }

.field { margin-bottom: 28px; }
.field label.main {
  display: block;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 6px;
}
.req { color: var(--brand-red); }

input[type="text"],
input[type="email"] {
  width: 100%;
  max-width: 380px;
  height: 48px;
  padding: 0 15px;
  font-family: var(--font-serif);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--brand-ink);
  background: var(--brand-white);
  border: 1px solid var(--brand-input-border);
  border-radius: 0;
}
input.wide { max-width: 100%; }

input:focus {
  outline: 1px solid var(--brand-ink);
  outline-offset: 0;
  border-color: var(--brand-ink);
}

.sub {
  display: block;
  margin-top: 4px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--brand-muted);
}

.addr-row { display: flex; gap: 14px; }
.addr-row .col-street { flex: 1; min-width: 0; }
.addr-row .col-nr  { flex: 0 0 110px; }
.addr-row .col-zip  { flex: 0 0 150px; }
.addr-row .col-city { flex: 1; }
@media (max-width: 480px) {
  .addr-row { flex-direction: column; }
  .addr-row .col-nr, .addr-row .col-zip { flex-basis: auto; }
}

.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; min-width: 0; }
.field-row .field input { max-width: 100%; }

.dual-row { display: flex; gap: 14px; }
.dual-row input { flex: 1; min-width: 0; }

@media (max-width: 560px) {
  .field-row, .dual-row { flex-direction: column; }
  .dual-row { gap: 10px; }
}

.field.invalid input { border-color: var(--brand-error); }
.error {
  display: none;
  margin-top: 6px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--brand-error);
}
.field.invalid .error { display: block; }

.valid-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--brand-error);
  min-height: 1.2em;
}
.valid-hint.ok { color: var(--brand-green); }

.iban-confirm {
  margin-top: 8px;
  padding: 12px 15px;
  background: #fdf3f5;
  border: 1px solid var(--brand-error);
  font-size: 0.8em;
  font-weight: 500;
}
.iban-confirm button {
  font: inherit;
  font-weight: 700;
  margin-top: 8px;
  display: block;
  padding: 8px 16px;
  color: var(--brand-white);
  background: var(--brand-error);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

/* --- Autocomplete --- */
.ac-wrapper { position: relative; }
.ac-wrapper input { width: 100%; }
.ac-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--brand-white);
  border: 1px solid var(--brand-input-border);
  border-top: none;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
.ac-list li {
  padding: 9px 15px;
  font-size: 0.85em;
  font-weight: 500;
  cursor: pointer;
}
.ac-list li:hover,
.ac-list li.active {
  background: var(--brand-paper);
  color: var(--brand-red);
}

.actions {
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--brand-line);
  text-align: center;
}
button[type="submit"] {
  font-family: var(--font-serif);
  font-size: 0.9em;
  font-weight: 500;
  min-width: 260px;
  padding: 13px 29px;          /* button_padding */
  color: var(--brand-white);
  background: var(--brand-red);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
button[type="submit"]:hover:not(:disabled) { background: var(--brand-red-dark); }
button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
button[type="submit"]:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.submit-error {
  display: block;
  margin-top: 12px;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--brand-error);
}

.success { padding: 48px 0; text-align: center; }
.success h2 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 2rem;
  margin-bottom: 10px;
}
.edit-note {
  margin-top: 20px;
  font-size: 0.8em;
  color: var(--brand-muted);
  word-break: break-all;
}

.footer-note {
  max-width: var(--maxw);
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--brand-muted);
}

.hp { position: absolute; left: -9999px; }

.fixed-value {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 380px;
  height: 48px;
  padding: 0 15px;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--brand-ink);
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
}
.field-row .field .fixed-value { max-width: 100%; }

.clear-button {
  font-family: var(--font-serif);
  font-size: 0.8em;
  font-weight: 500;
  margin-top: 14px;
  padding: 10px 22px;
  color: var(--brand-ink);
  background: var(--brand-white);
  border: 1px solid var(--brand-input-border);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.clear-button:hover { border-color: var(--brand-ink); }
.actions button { display: inline-block; }
.actions button[type="submit"] { display: block; margin: 0 auto; }
.clear-button { display: block; margin: 14px auto 0; }