/* ============================================================
   Q1 Energie — VfL-Vorteilskarte landing page
   Recreated from the Q1 design system (Figma tokens).
   ============================================================ */

/* ---- Qualitaet — the proprietary corporate typeface (4 weights) ---- */
@font-face {
  font-family: "Qualitaet";
  src: url("/fonts/qualitaet/Qualitaet-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Qualitaet";
  src: url("/fonts/qualitaet/Qualitaet-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Qualitaet";
  src: url("/fonts/qualitaet/Qualitaet-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Qualitaet";
  src: url("/fonts/qualitaet/Qualitaet-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   Design tokens (Desktop)
   ============================================================ */
:root {
  /* Primärfarben */
  --q1-rot: #ED0019;
  --q1-blau: #111987;
  --q1-weiss: #FFFFFF;
  --q1-schwarz: #141414;

  /* Sekundärfarben (warm neutral scale) */
  --lichtgrau: #F6F2ED;
  --hellgrau: #EDE7E0;
  --mittelgrau: #DCD6CE;
  --dunkelgrau: #B1ABA3;
  --dunkelgrau-text: #6B6761;

  /* Functional accents */
  --q1-blau-finder: #3164C6;
  --q1-rot-hover: #D5072D;

  /* Semantic aliases */
  --text-primary: var(--q1-schwarz);
  --text-secondary: var(--dunkelgrau-text);
  --text-on-dark: var(--q1-weiss);
  --text-link: var(--q1-blau);
  --surface-page: var(--q1-weiss);
  --surface-muted: var(--lichtgrau);
  --surface-card: var(--q1-weiss);
  --surface-brand: var(--q1-rot);
  --surface-brand-blue: var(--q1-blau);
  --border-subtle: var(--hellgrau);
  --border-default: var(--mittelgrau);
  --action-primary: var(--q1-rot);
  --action-primary-hover: var(--q1-rot-hover);
  --focus-ring: var(--q1-blau);

  /* Typografie */
  --font-family: "Qualitaet", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-leicht: 300;
  --fw-normal: 400;
  --fw-halbfett: 600;
  --fw-kraeftig: 700;

  --type-teasertext: 44px;
  --type-headline-l: 44px;
  --type-headline-m: 32px;
  --type-headline-s: 26px;
  --type-overline: 26px;
  --type-button: 18px;
  --type-copy: 20px;
  --type-small-copy: 18px;
  --type-caption: 18px;

  --lh-headline: 1.25;
  --lh-body: 1.4;
  --lh-tight: 1;

  /* Abstände */
  --space-xxs: 12px;
  --space-xs: 24px;
  --space-s: 40px;
  --space-m: 48px;
  --space-l: 60px;
  --space-xl: 120px;

  /* Eckradien — Q1 rounds a SINGLE corner (bottom-right) */
  --radius-normal: 60px;
  --radius-angebot: 40px;
  --radius-pill: 28px;
  --radius-chip: 24px;

  --page-max: 1640px;
  --page-gutter: 160px;
}

/* Mobile token scale */
@media (max-width: 820px) {
  :root {
    --type-teasertext: 32px;
    --type-headline-l: 34px;
    --type-headline-m: 26px;
    --type-headline-s: 22.5px;
    --type-overline: 22.5px;
    --type-button: 18px;
    --type-copy: 18px;
    --type-small-copy: 16px;
    --type-caption: 16px;
    --space-xxs: 8px;
    --space-xs: 24px;
    --space-s: 28px;
    --space-m: 40px;
    --space-l: 40px;
    --space-xl: 60px;
    --radius-normal: 50px;
    --radius-angebot: 30px;
    --page-gutter: 20px;
  }
}

/* ============================================================
   Base + scaffolding
   ============================================================ */
html, body { margin: 0; padding: 0; background: #FFFFFF; }
* { box-sizing: border-box; }
#vfl-root a { color: inherit; text-decoration: none; }
#vfl-root a:hover { text-decoration: underline; text-underline-offset: 4px; }

.util-bar a:hover { color: var(--dunkelgrau-text); text-decoration: none; }

.nav-mobile { display: none; }
.util-bar { display: flex; }
.nav-desktop { display: flex; align-self: stretch; align-items: stretch; }

.header-main { padding: 20px 40px; }
.hero-wrap { margin-bottom: 72px; }
.hero-media { height: 600px; }
.hero-tab { padding: 30px 56px 34px 40px; white-space: nowrap; left: max(40px, calc(50% - 820px)); }

.sec { padding: 96px 40px; }
.intro { max-width: 1040px; margin: 0 auto; padding: 0 40px 96px; }
.benefits-inner, .steps-inner, .cta-outer { max-width: 1200px; margin: 0 auto; }
.benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.bcard { padding: 40px; }
.cta-inner { padding: 64px 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-sec { padding: 0 40px 96px; }
.footer-inner { max-width: 1640px; margin: 0 auto; display: flex; gap: clamp(80px, 11vw, 200px); align-items: flex-start; flex-wrap: wrap; }
.footer-cols { display: flex; gap: clamp(56px, 8vw, 130px); flex-wrap: wrap; }
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.intro-h1 { font-size: var(--type-teasertext); }

/* ---- Buttons (recreated from DS Button component) ----
   Scoped under #vfl-root so the variant colours win over the
   `#vfl-root a { color: inherit }` base rule (ID specificity). */
#vfl-root .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 52px; padding: 0 34px;
  border: none; border-radius: var(--radius-pill);
  font-family: var(--font-family); font-size: var(--type-button);
  font-weight: var(--fw-halbfett); line-height: var(--lh-tight);
  text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease;
}
#vfl-root .btn:hover { text-decoration: none; }
#vfl-root .btn-primary { background: var(--q1-rot); color: var(--q1-weiss); }
#vfl-root .btn-primary:hover { background: var(--q1-rot-hover); color: var(--q1-weiss); }
#vfl-root .btn-tertiary { background: var(--q1-weiss); color: var(--q1-blau); }
#vfl-root .btn-tertiary:hover { background: var(--lichtgrau); color: var(--q1-blau); }

/* ---- Mobile burger menu ---- */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

@media (max-width: 820px) {
  .util-bar { display: none; }
  .nav-desktop { display: none; }
  .nav-mobile { display: flex; }
  .header-main { padding: 16px 20px; }
  .hero-wrap { margin-bottom: 52px; }
  .hero-media { height: 340px; }
  .hero-tab { padding: 20px 40px 24px 20px; left: 20px; }
  .sec { padding: 56px 20px; }
  .intro { padding: 0 20px 56px; }
  .benefits-grid { grid-template-columns: 1fr; gap: 16px; }
  .steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .bcard { padding: 28px; }
  .cta-inner { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .cta-sec { padding: 0 20px 56px; }
  .footer-inner { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .footer-cols { flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
  .footer-links { align-items: center; gap: 14px; }
  .footer-links.social-links { flex-direction: row; gap: 28px; margin-top: 22px; }
  .footer-links.social-links .social-label { display: none; }
  .footer-links.social-links a { gap: 0; }
}

/* ============================================================
   Anmeldung (registration form) — cosmetic Q1 restyle.
   Reuses the #vfl-root scope so header/footer/button styles apply.
   ============================================================ */
#vfl-root .content { max-width: 1200px; min-width: 0; margin: 0 auto; padding: 0 40px 96px; }
#vfl-root .anm-content { max-width: 640px; margin: 0 auto; }
#vfl-root .anm-title { margin: 0 0 40px; font-weight: var(--fw-halbfett); font-size: var(--type-teasertext); line-height: var(--lh-headline); color: var(--q1-schwarz); text-wrap: balance; }

#vfl-root .anm-form { display: flex; flex-direction: column; gap: 28px; }
#vfl-root .anm-form .fld { display: flex; flex-direction: column; gap: 10px; }
#vfl-root .anm-form .fld > label { margin: 0; font-size: var(--type-small-copy); font-weight: var(--fw-normal); color: var(--q1-schwarz); }
#vfl-root .anm-form input[type="text"],
#vfl-root .anm-form input[type="email"],
#vfl-root .anm-form input[type="tel"],
#vfl-root .anm-form select {
  width: 100%; margin: 0; height: auto;
  padding: 14px 16px; border: 1px solid var(--mittelgrau); background: var(--q1-weiss);
  border-radius: 0; font-family: var(--font-family); font-size: 16px; color: var(--q1-schwarz);
  -webkit-appearance: none; appearance: none;
}
#vfl-root .anm-form input:focus, #vfl-root .anm-form select:focus {
  border-color: var(--q1-blau); outline: none; box-shadow: 0 0 0 1px var(--q1-blau);
}
#vfl-root .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#vfl-root .field-row.plz-ort { grid-template-columns: 160px 1fr; }
#vfl-root .date-row { display: flex; gap: 12px; }
/* flex-basis 0 + min-width 0 lets the day/month/year selects shrink to fit
   narrow phones (default flex min-width:auto would keep them at option width). */
#vfl-root .date-row select { flex: 1 1 0; min-width: 0; }
#vfl-root .date-row select:nth-of-type(2) { flex: 1.6 1 0; }

/* Consents */
#vfl-root .terms { display: flex; gap: 14px; align-items: flex-start; }
#vfl-root .terms input[type="checkbox"] { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--q1-blau); }
#vfl-root .terms label { margin: 0; font-size: var(--type-small-copy); font-weight: var(--fw-leicht); line-height: var(--lh-body); color: var(--q1-schwarz); }
#vfl-root .terms a { color: var(--q1-blau); text-decoration: none; }
#vfl-root .terms a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Upload block */
#vfl-root .anm-upload { display: flex; flex-direction: column; gap: 14px; }
#vfl-root .anm-upload-title { font-size: var(--type-small-copy); font-weight: var(--fw-halbfett); color: var(--q1-schwarz); }
#vfl-root .anm-upload-desc { margin: 0; font-size: var(--type-small-copy); font-weight: var(--fw-leicht); line-height: var(--lh-body); color: var(--dunkelgrau-text); text-wrap: pretty; }

/* Photo tabs — keeps the radio-driven mechanism, restyled to Q1 */
#vfl-root .photo-tabs > input { display: none; }
#vfl-root .photo-tabs nav { display: flex; flex-wrap: wrap; gap: 2px; }
#vfl-root .photo-tabs nav label {
  margin: 0; cursor: pointer; padding: 12px 20px; border: none; border-radius: 0;
  font-size: var(--type-small-copy); font-weight: var(--fw-halbfett);
  background: var(--q1-blau); color: var(--q1-weiss);
}
#vfl-root .photo-tabs nav label:hover { background: var(--q1-blau-finder); }
#vfl-root #tab1:checked ~ nav label[for="tab1"],
#vfl-root #tab2:checked ~ nav label[for="tab2"],
#vfl-root #tab3:checked ~ nav label[for="tab3"] { background: var(--q1-weiss); color: var(--q1-schwarz); }
#vfl-root .photo-tabs figure { display: block; margin: 0; border: 1px solid var(--hellgrau); padding: 20px; }
#vfl-root .photo-tabs figure > div { display: none; }
#vfl-root #tab1:checked ~ figure .tab1,
#vfl-root #tab2:checked ~ figure .tab2,
#vfl-root #tab3:checked ~ figure .tab3 { display: block; }
/* Hide the native file input (fixed intrinsic width, won't shrink on phones)
   behind a styled button; the wrapping label still opens the file dialog. */
#vfl-root .file-picker { display: inline-flex; align-items: center; cursor: pointer; }
#vfl-root .file-picker input[type="file"] { display: none; }
#vfl-root .file-btn { display: inline-flex; align-items: center; padding: 10px 16px; background: var(--lichtgrau); border: 1px solid var(--mittelgrau); font-size: var(--type-small-copy); font-weight: var(--fw-normal); color: var(--q1-schwarz); }
#vfl-root .file-btn:hover { background: var(--hellgrau); }
#vfl-root #drop_zone {
  border: 2px dashed var(--mittelgrau); border-radius: 0; background: var(--q1-weiss);
  min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; margin-top: 16px;
}
#vfl-root #drop_zone p { margin: 0; font-size: var(--type-copy); font-weight: var(--fw-leicht); color: var(--dunkelgrau-text); }
#vfl-root #video { width: 100%; display: block; margin: 16px 0; }
#vfl-root #canvas { display: none; }
#vfl-root #theimage { display: block; margin: 0 auto; max-width: 100%; max-height: 320px; }

/* Errors */
#vfl-root .help-block { color: var(--q1-rot); font-size: var(--type-small-copy); }
#vfl-root .anm-alert { background: #FDE7EA; border: 1px solid var(--q1-rot); color: var(--q1-rot); padding: 16px 20px; border-radius: 0; }
#vfl-root .anm-alert p { margin: 0; }
#vfl-root .anm-submit { margin-top: 8px; }

@media (max-width: 820px) {
  #vfl-root .content { padding: 0 20px 56px; }
  #vfl-root .field-row, #vfl-root .field-row.plz-ort { grid-template-columns: 1fr; }
  #vfl-root .photo-tabs nav label { padding: 10px 12px; }
}