/* ── Hausschrift: Figtree (selbst-gehostet, CSP-konform), Halvar nur als Wunsch-Display ── */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  --afb-green:      #2CB475;
  --afb-green-dark: #005A32;
  --afb-green-light:#e8f0cd;
  --afb-blue:       #202F61;
  --afb-blue-dark:  #15203f;
  --afb-gray:       #f4f4f4;
  --afb-border:     #d8d8d8;
  --afb-text:       #222222;
  --afb-muted:      #6b6b6b;
  --afb-white:      #ffffff;
  --radius:         10px;
  --shadow:         0 2px 12px rgba(0,0,0,0.08);
  /* Sekundärschrift Figtree (Fallback Calibri/Lucida); Halvar als bevorzugte Display-Schrift */
  --font-sans:      'Figtree', Calibri, 'Segoe UI', Arial, sans-serif;
  --font-display:   'Halvar Breitschrift', 'Lucida Grande', 'Lucida Sans', 'Figtree', Calibri, sans-serif;
}

body { font-family: var(--font-sans); background: var(--afb-gray); color: var(--afb-text); min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, .card-title { font-family: var(--font-display); }

header { background: var(--afb-white); border-bottom: 3px solid var(--afb-blue); padding: 0 2rem; height: 72px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 44px; width: auto; display: block; }
.header-badge { background: var(--afb-blue); color: white; border-radius: 20px; padding: 4px 14px; font-size: 0.8rem; font-weight: 600; }

.hero { background: linear-gradient(135deg, var(--afb-blue-dark) 0%, var(--afb-blue) 100%); color: white; text-align: center; padding: 2.5rem 1rem 3rem; }
.hero h1 { font-size: 1.9rem; font-weight: 700; margin-bottom: 0.4rem; }
.hero p  { font-size: 1rem; opacity: 0.88; }

main { flex: 1; max-width: 780px; width: 100%; margin: -1.5rem auto 3rem; padding: 0 1rem; }

.error-card { background: var(--afb-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 3rem 2rem; text-align: center; margin-top: 1rem; }
.error-card h2 { color: #d94040; margin-bottom: 0.75rem; }
.error-card p  { color: var(--afb-muted); }

.steps { display: flex; margin-bottom: 1.5rem; background: var(--afb-white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.step { flex: 1; padding: 0.9rem 0.5rem; text-align: center; font-size: 0.78rem; color: var(--afb-muted); border-bottom: 3px solid transparent; }
.step.active { color: var(--afb-blue); border-bottom-color: var(--afb-green); font-weight: 600; }
.step.done   { color: var(--afb-blue-dark); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--afb-border); color: var(--afb-muted); font-size: 0.75rem; font-weight: 700; margin-bottom: 4px; }
/* Dark Blue auf Bright Green (~4,8:1) statt Weiß auf Grün (~2,7:1, WCAG-Fail) */
.step.active .step-num { background: var(--afb-green); color: var(--afb-blue); }
.step.done   .step-num { background: var(--afb-blue); color: white; }

.card { background: var(--afb-white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; margin-bottom: 1.25rem; }
.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--afb-border); }
.card-icon { width: 36px; height: 36px; background: var(--afb-green-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-icon svg { stroke: var(--afb-green); }
.card-title    { font-size: 1.05rem; font-weight: 700; color: var(--afb-blue); }
.card-subtitle { font-size: 0.82rem; color: var(--afb-muted); margin-top: 1px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1 / -1; }

label { font-size: 0.82rem; font-weight: 600; color: var(--afb-text); }
label .req { color: var(--afb-green); margin-left: 2px; }

input, select { height: 42px; border: 1.5px solid var(--afb-border); border-radius: var(--radius); padding: 0 12px; font-size: 0.9rem; color: var(--afb-text); background: var(--afb-white); outline: none; transition: border-color 0.15s; }
input:focus, select:focus { border-color: var(--afb-green); box-shadow: 0 0 0 3px rgba(74,156,47,0.12); }
input.error { border-color: #d94040; }
input[readonly] { background: var(--afb-gray); color: var(--afb-muted); cursor: default; border-style: dashed; }
input[readonly]:focus { border-color: var(--afb-border); box-shadow: none; }

.field-hint  { font-size: 0.74rem; color: var(--afb-muted); }
.field-error { font-size: 0.74rem; color: #d94040; display: none; }
.field-error.visible { display: block; }

.recipient-box { background: var(--afb-green-light); border: 1.5px solid var(--afb-green); border-radius: var(--radius); padding: 1rem 1.25rem; }
.rb-label { font-size: 0.72rem; font-weight: 700; color: var(--afb-green-dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.recipient-box address { font-style: normal; font-size: 0.9rem; line-height: 1.6; }

.summary-table { width: 100%; border-collapse: collapse; }
.summary-table tr + tr td { border-top: 1px solid var(--afb-border); }
.summary-table td { padding: 0.6rem 0; font-size: 0.88rem; vertical-align: top; }
.summary-table td:first-child { color: var(--afb-muted); width: 38%; font-weight: 600; }

.success-card { text-align: center; padding: 3rem 2rem; }
.success-icon { width: 72px; height: 72px; background: var(--afb-green-light); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.success-card h2 { font-size: 1.4rem; color: var(--afb-blue-dark); margin-bottom: 0.5rem; }
.success-card p  { color: var(--afb-muted); max-width: 420px; margin: 0 auto; }
.ticket-number { margin: 1.5rem 0; display: inline-block; background: var(--afb-gray); border: 1.5px dashed var(--afb-green); border-radius: var(--radius); padding: 10px 24px; font-size: 1.1rem; font-family: 'Courier New', monospace; letter-spacing: 2px; color: var(--afb-green-dark); font-weight: 700; }

/* Pill-förmige Buttons (Formsprache: weiche, runde Kanten) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 999px; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; border: none; text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* Primär-CTA in Dark Blue + Weiß (~12,8:1). Bright Green wird im Web nicht als Schriftträger genutzt. */
.btn-primary   { background: var(--afb-blue); color: white; font-weight: 700; }
.btn-primary:hover:not(:disabled) { background: var(--afb-blue-dark); }
.btn-secondary { background: transparent; color: var(--afb-text); border: 1.5px solid var(--afb-border); }
.btn-secondary:hover { background: var(--afb-gray); }
.btn-outline   { background: transparent; color: var(--afb-blue); border: 1.5px solid var(--afb-blue); }
.btn-outline:hover { background: #e8eef8; }
.btn-row { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--afb-border); }

/* ── Wichtiger Hinweis ── */
.notice { margin-top: 1.5rem; background: #fff8e6; border: 1px solid #f0d98a; border-left: 4px solid #e0a800; border-radius: var(--radius); padding: 0.9rem 1.1rem; }
.notice-title { font-size: 0.85rem; font-weight: 700; color: #8a6d00; margin-bottom: 0.35rem; }
.notice-body { font-size: 0.83rem; line-height: 1.5; color: var(--afb-text); }
.notice-body a { color: var(--afb-green-dark); text-decoration: underline; }
.notice-body a:hover { color: var(--afb-green); }

/* Gefahrgut-Hinweis (rötlich) */
.notice-danger { background: #fdf1f1; border-color: #f0c4c4; border-left-color: #d94040; }
.notice-danger .notice-title { color: #b91c1c; }

/* Vorbereitungs-Hinweis (bläulich, neutral) */
.notice-prep { background: #eef2fb; border-color: #c7d3ee; border-left-color: var(--afb-blue); }
.notice-prep .notice-title { color: var(--afb-blue); }

.btn-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.6rem; padding: 0; background: none; border: none; color: var(--afb-blue); font-size: 0.83rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.btn-link:hover { color: var(--afb-blue-dark); }

/* ── Modal: Vor dem Versand ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 100; }
.modal-overlay[hidden] { display: none; }
.modal { background: var(--afb-white); border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,0.25); width: 100%; max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--afb-border); }
.modal-head h3 { font-size: 1.1rem; font-weight: 700; color: var(--afb-blue-dark); }
.modal-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--afb-muted); cursor: pointer; padding: 0 0.25rem; }
.modal-close:hover { color: var(--afb-text); }
.modal-body { padding: 1.25rem 1.5rem; overflow-y: auto; font-size: 0.88rem; line-height: 1.55; color: var(--afb-text); }
.modal-body p { margin-bottom: 0.7rem; }
.modal-body .prep-sub { font-weight: 700; color: var(--afb-blue); margin-top: 1rem; margin-bottom: 0.4rem; }
.modal-body ul { margin: 0 0 0.7rem 1.1rem; }
.modal-body li { margin-bottom: 0.3rem; }
.modal-body a { color: var(--afb-green-dark); text-decoration: underline; }
.modal-body a:hover { color: var(--afb-green); }
body.modal-open { overflow: hidden; }

/* ── Pflicht-Checkboxen (Consent) ── */
.consent-group { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.25rem; }
.consent-row { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; }
.consent-row input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 1px 0 0; accent-color: var(--afb-green); cursor: pointer; }
.consent-text { font-size: 0.83rem; line-height: 1.45; color: var(--afb-text); }
.consent-text a { color: var(--afb-green-dark); text-decoration: underline; }
.consent-text a:hover { color: var(--afb-green); }

.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.35); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; display: none; }
.spinner.visible { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.alert { border-radius: var(--radius); padding: 0.85rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; display: none; }
.alert.visible { display: block; }
.alert-error { background: #fff0f0; border: 1px solid #f5c2c2; color: #b91c1c; }

footer { background: #1a1a1a; color: #aaa; padding: 1.5rem 2rem; text-align: center; font-size: 0.78rem; }
footer a { color: #888; text-decoration: none; }
footer a:hover { color: var(--afb-green); }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 0.4rem; }

.page { display: none; }
.page.active { display: block; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.4rem; }
  .card { padding: 1.25rem; }
  .steps { display: none; }
}