/* =========================================================
   BranchenPionier – ZENTRALE CSS-DATEI
   Diese Datei enthält das Styling für ALLE Seiten.
   Keine separaten CSS-Dateien pro Unterseite verwenden.
   ========================================================= */

:root {
  --brand-blue: #1a648f;
  --brand-blue-deep: #123f5d;
  --brand-blue-soft: #eef6fa;
  --brand-blue-mist: #f7fbfd;

  --ink: #18232b;
  --ink-soft: #61707a;

  --line: #dce7ed;
  --line-strong: #c8d8e1;

  --white: #ffffff;
  --surface: #fbfdfe;

  --danger: #a63d3d;

  --radius-field: 12px;
  --radius-card: 18px;
  --radius-large: 24px;

  --shell: 1120px;
  --ease: 160ms ease;

  /*
    Pfad relativ zu CSS/style.css:
    ../assets/pattern.webp
  */

  --pattern-image:
    url("../assets/pattern.webp");
}


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


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--ink);
  background: var(--white);

  line-height: 1.55;

  -webkit-font-smoothing:
    antialiased;
}


a {
  color: inherit;
}


button,
input,
textarea,
select {
  font: inherit;
}


textarea {
  resize: vertical;
}


.shell {
  width:
    min(
      calc(100% - 40px),
      var(--shell)
    );

  margin-inline: auto;
}


/* =========================================================
   GEMEINSAMER HEADER
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;

  z-index: 50;

  border-bottom:
    1px solid
    rgba(220, 231, 237, 0.9);

  background:
    rgba(255, 255, 255, 0.96);

  backdrop-filter:
    blur(14px);
}


.header-inner {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}


.brand {
  display: flex;
  flex-direction: column;

  text-decoration: none;

  line-height: 1.1;
}


.brand-name {
  font-size: 1.03rem;
  font-weight: 700;

  letter-spacing: -0.02em;
}


.brand-subline {
  margin-top: 5px;

  color: var(--ink-soft);

  font-size: 0.76rem;
}


.header-meta {
  color: var(--ink-soft);

  font-size: 0.82rem;
}


/* =========================================================
   STARTSEITE
   ========================================================= */

.landing-hero {
  position: relative;

  padding:
    112px 0 100px;
}


/*
  Desktop-/Fullview-Raster:

  1. Zeile: Eyebrow links
  2. Zeile: Headline + Beschreibung links / Medaille rechts

  Die Medaille orientiert sich damit an der gesamten Höhe des
  zentralen Textblocks – von der Oberkante der Headline bis zur
  Unterkante des Beschreibungstextes.
*/
.landing-hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(230px, 270px);

  grid-template-areas:
    "eyebrow ."
    "copy    medal";

  column-gap: 72px;
  row-gap: 14px;

  align-items: stretch;
}


.eyebrow,
.assist-label,
.step-kicker,
.note-index {
  display: inline-block;

  color: var(--brand-blue);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


.landing-hero-grid > .eyebrow {
  grid-area: eyebrow;

  justify-self: start;
}


/* Hauptbotschaft: Headline + Beschreibung bleiben ein geschlossener Block. */
.landing-copy {
  grid-area: copy;

  min-width: 0;
  max-width: 760px;
}


.landing-copy h1 {
  margin:
    0 0 22px;

  max-width: 760px;

  font-size:
    clamp(
      3rem,
      6vw,
      5.6rem
    );

  line-height: 0.98;

  letter-spacing:
    -0.045em;

  font-weight: 700;
}


.lead {
  margin: 0;

  max-width: 760px;

  color: var(--ink-soft);

  font-size:
    clamp(
      1.06rem,
      1.8vw,
      1.23rem
    );
}


/*
  Medaille im Fullview:
  Der Wrapper besitzt dieselbe Rasterzeile wie der gesamte Textblock.
  Die Grafik wird darin vertikal zentriert und bewusst groß geführt,
  sodass sie optisch die Höhe von Headline + Untertext aufnimmt.
*/
.award-medal-wrap {
  grid-area: medal;

  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  align-self: stretch;
}


.award-medal {
  display: block;

  width:
    clamp(
      220px,
      22vw,
      255px
    );

  max-width: 100%;
  height: auto;
}


/* CTA bleibt vorbereitet, solange der Formularlink im HTML auskommentiert ist. */
.landing-actions {
  margin-top: 34px;
}


.landing-info {
  padding:
    68px 0 84px;

  border-top:
    1px solid
    var(--line);

  background:
    var(--surface);
}


.landing-info-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 0;
}


.landing-info-grid article {
  padding:
    8px 34px 8px 0;

  border-left:
    1px solid
    var(--line);
}


.landing-info-grid article:first-child {
  border-left: 0;
}


.landing-info-grid article:not(:first-child) {
  padding-left: 34px;
}


.landing-info-grid span {
  color:
    var(--brand-blue);

  font-size:
    0.72rem;

  font-weight:
    700;
}


.landing-info-grid h2 {
  margin:
    18px 0 8px;

  font-size:
    1.16rem;
}


.landing-info-grid p {
  margin: 0;

  color:
    var(--ink-soft);

  font-size:
    0.9rem;
}


/* =========================================================
   FORMULAR / WIZARD
   ========================================================= */

.wizard-main {
  min-height:
    calc(100vh - 72px);

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      var(--brand-blue-mist) 100%
    );

  padding:
    44px 20px 90px;
}


.wizard-shell {
  width:
    min(
      920px,
      100%
    );

  margin:
    0 auto;
}


.wizard-top {
  margin-bottom:
    44px;
}


.back-link {
  display:
    inline-block;

  margin-bottom:
    26px;

  color:
    var(--ink-soft);

  font-size:
    0.84rem;

  text-decoration:
    none;
}


.back-link:hover {
  color:
    var(--brand-blue);
}


.wizard-progress {
  display: grid;

  gap: 12px;
}


.progress-copy {
  display: flex;

  justify-content:
    space-between;

  gap: 18px;

  align-items:
    baseline;
}


.progress-copy span {
  color:
    var(--ink-soft);

  font-size:
    0.8rem;
}


.progress-copy strong {
  font-size:
    0.88rem;
}


.progress-track {
  height: 7px;

  border-radius:
    999px;

  background:
    #e7eef2;

  overflow:
    hidden;
}


.progress-bar {
  width:
    16.666%;

  height:
    100%;

  border-radius:
    999px;

  background:
    var(--brand-blue);

  transition:
    width
    220ms
    ease;
}


.wizard-step {
  display:
    none;
}


.wizard-step.is-active {
  display:
    block;

  animation:
    stepFade
    180ms
    ease;
}


@keyframes stepFade {

  from {
    opacity: 0;

    transform:
      translateY(4px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


.wizard-heading {
  max-width:
    760px;

  margin-bottom:
    34px;
}


.wizard-heading h1 {
  margin:
    9px 0 12px;

  font-size:
    clamp(
      2.15rem,
      5vw,
      3.8rem
    );

  line-height:
    1.02;

  letter-spacing:
    -0.04em;
}


.wizard-heading p {
  margin: 0;

  max-width:
    720px;

  color:
    var(--ink-soft);

  font-size:
    1rem;
}


/* =========================================================
   FORMULARFELDER
   ========================================================= */

.form-grid {
  display: grid;

  gap:
    20px;
}


.form-grid-2 {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}


.field {
  margin-top:
    24px;
}


.form-grid > .field {
  margin-top:
    0;
}


.field label,
.field-label {
  display:
    block;

  margin-bottom:
    8px;

  font-size:
    0.9rem;

  font-weight:
    700;
}


.field-intro {
  display:
    block;

  margin:
    -1px 0 12px;

  color:
    var(--ink-soft);

  font-size:
    0.82rem;
}


input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="month"],
textarea,
select {
  width:
    100%;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-field);

  background:
    var(--white);

  color:
    var(--ink);

  padding:
    14px 15px;

  outline:
    none;

  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}


textarea {
  min-height:
    128px;
}


/*
  NORMALER FOKUS:
  Nur gültige bzw. noch nicht beanstandete
  Felder werden blau hervorgehoben.
*/

input:focus,
textarea:focus,
select:focus {
  border-color:
    var(--brand-blue);

  box-shadow:
    0 0 0 4px
    rgba(26, 100, 143, 0.08);
}


input:disabled,
input:read-only {
  color:
    #7f8a92;

  background:
    #f4f7f9;
}


.field small,
.upload-preview,
.assist-panel p {
  color:
    var(--ink-soft);

  font-size:
    0.82rem;
}


.field small {
  display:
    block;

  margin-top:
    7px;
}


.field-meta {
  margin-top:
    7px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    14px;
}


.field-meta small {
  margin:
    0;
}


.required-marker {
  color:
    var(--brand-blue);

  font-weight:
    700;
}


.narrow-field {
  max-width:
    360px;
}


/* =========================================================
   AUSWAHLFELDER
   ========================================================= */

.choice-grid {
  display:
    grid;

  gap:
    12px;
}


.choice-grid-2,
.choice-grid-category {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}


.choice-card {
  margin:
    0 !important;

  padding:
    18px;

  display:
    flex !important;

  align-items:
    flex-start;

  gap:
    12px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-card);

  background:
    rgba(
      255,
      255,
      255,
      0.74
    );

  cursor:
    pointer;

  transition:
    border-color var(--ease),
    background var(--ease),
    transform var(--ease);
}


.choice-card:hover {
  border-color:
    #b8cfdb;

  background:
    var(--white);

  transform:
    translateY(-1px);
}


.choice-card:has(input:checked) {
  border-color:
    var(--brand-blue);

  background:
    var(--brand-blue-soft);
}


.choice-card input {
  margin-top:
    4px;

  accent-color:
    var(--brand-blue);
}


.choice-card span {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.choice-card strong {
  font-size:
    0.91rem;
}


.choice-card small {
  margin:
    0;

  color:
    var(--ink-soft);

  font-weight:
    400;
}


.compact-choice {
  min-height:
    64px;

  align-items:
    center;
}


.choice-stack {
  display:
    grid;

  gap:
    10px;
}


/* =========================================================
   HINWEISE / KI-BEREICHE
   ========================================================= */

.guidance-box,
.summary-box {
  padding:
    20px 22px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-card);

  background:
    var(--brand-blue-soft);
}


.guidance-box p,
.summary-box p {
  margin:
    5px 0 0;

  color:
    var(--ink-soft);

  font-size:
    0.9rem;
}


.assist-panel {
  margin-top:
    26px;

  padding:
    22px 0;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    28px;
}


.assist-panel h2,
.upload-copy h2,
.summary-box h2 {
  margin:
    5px 0;

  font-size:
    1.05rem;
}


.assist-panel p {
  margin:
    0;

  max-width:
    630px;
}


.soft-divider {
  height:
    1px;

  margin:
    30px 0 8px;

  background:
    var(--line);
}


/* =========================================================
   STATUS-CHECKBOXEN
   ========================================================= */

.toggle-list {
  margin-top:
    30px;

  display:
    grid;

  gap:
    12px;
}


.toggle-row {
  padding:
    18px 0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    13px;

  border-top:
    1px solid
    var(--line);

  cursor:
    pointer;
}


.toggle-row:first-child {
  border-top:
    0;
}


.toggle-row input {
  margin-top:
    4px;

  accent-color:
    var(--brand-blue);
}


.toggle-row span {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.toggle-row strong {
  font-size:
    0.91rem;
}


.toggle-row small {
  color:
    var(--ink-soft);

  font-size:
    0.81rem;
}


/* Ergänzende Upload-Struktur */

.upload-section-heading {
  margin-bottom: 14px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}

.upload-section-heading h2 {
  margin: 0 0 5px;

  font-size: 1.05rem;
}

.upload-section-heading p {
  margin: 0;

  color: var(--ink-soft);

  font-size: 0.84rem;
}

.upload-section + .upload-section,
.field + .upload-section {
  margin-top: 30px;
}

.upload-total-info {
  margin-top: 14px;

  padding: 12px 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  border: 1px solid var(--line);
  border-radius: var(--radius-field);

  background: var(--white);

  color: var(--ink-soft);

  font-size: 0.82rem;
}

.upload-total-info strong {
  color: var(--ink);

  font-size: 0.84rem;
}


/* =========================================================
   UPLOAD
   ========================================================= */

.upload-requirements {
  margin-bottom:
    14px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.upload-requirements span {
  padding:
    7px 10px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    var(--white);

  color:
    var(--ink-soft);

  font-size:
    0.78rem;
}


.upload-requirements strong {
  color:
    var(--ink);
}


.upload-box {
  min-height:
    132px;

  padding:
    24px;

  display:
    grid;

  grid-template-columns:
    52px
    1fr
    auto;

  align-items:
    center;

  gap:
    18px;

  border:
    1px dashed
    #b9cfdc;

  border-radius:
    var(--radius-large);

  background:
    rgba(
      238,
      246,
      250,
      0.55
    );
}


.upload-symbol {
  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    16px;

  background:
    var(--white);

  color:
    var(--brand-blue);

  border:
    1px solid
    var(--line);

  font-size:
    1.25rem;

  font-weight:
    700;
}


.upload-copy h2 {
  margin-top:
    0;
}


.upload-copy p {
  margin:
    0;

  color:
    var(--ink-soft);

  font-size:
    0.84rem;
}


.upload-preview {
  margin-top:
    14px;

  display:
    grid;

  gap:
    8px;
}


.file-preview-row {
  padding:
    11px 13px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    16px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    var(--white);
}


.file-preview-row strong {
  font-size:
    0.84rem;

  font-weight:
    600;
}


.file-preview-row span {
  color:
    var(--ink-soft);

  font-size:
    0.78rem;
}


/* Bildvorschau in der Dateiliste */

.file-preview-row-image {
  align-items: center;
}

.file-preview-media {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 12px;
}

.file-preview-thumb {
  width: 72px;
  height: 58px;

  flex: 0 0 72px;

  display: block;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: var(--surface);

  object-fit: cover;
  object-position: center;
}

.file-preview-details {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}

.file-preview-details strong {
  max-width: 430px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-image-choice {
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center;

  gap: 7px;

  color: var(--ink);

  font-size: 0.82rem !important;
  font-weight: 700 !important;

  white-space: nowrap;
  cursor: pointer;
}

.title-image-choice input {
  margin: 0;

  accent-color: var(--brand-blue);
}

.title-image-choice span {
  color: var(--ink);

  font-size: 0.82rem;
  font-weight: 700;
}


/* =========================================================
   MARKETING-AUSSPIELUNG ALS GESCHLOSSENER BAUSTEIN
   ========================================================= */

.marketing-bundle {
  margin-top: 30px;

  padding: 24px;

  border: 1px solid var(--line);
  border-radius: var(--radius-large);

  background: var(--brand-blue-mist);
}

.marketing-bundle-heading {
  margin-bottom: 22px;
}

.marketing-bundle-heading h2 {
  margin: 6px 0 7px;

  font-size: 1.12rem;
}

.marketing-bundle-heading p {
  margin: 0;

  max-width: 720px;

  color: var(--ink-soft);

  font-size: 0.88rem;
}

.marketing-bundle > .field:first-of-type {
  margin-top: 0;
}

.marketing-bundle .choice-card {
  background: var(--white);
}

.marketing-bundle .choice-card:has(input:checked) {
  background: var(--brand-blue-soft);
}

#marketing-package-note {
  margin: 9px 0 0;
}

#marketing-package-note small {
  margin: 0;
}


/* Zeichenlimit: erst bei tatsächlicher Überschreitung rot */

.character-counter.is-over-limit {
  color: var(--danger);
  font-weight: 700;
}


/* BranchenPionier – Abstand Nutzenhinweis / Auswahl */

.award-participation-field
> .guidance-box
+ .choice-grid {
  margin-top: 20px;
}


@media (max-width: 620px) {
  .file-preview-row-image {
    align-items: flex-start;
    flex-direction: column;
  }

  .file-preview-media {
    width: 100%;
  }

  .file-preview-details strong {
    max-width: calc(100vw - 145px);
  }

  .marketing-bundle {
    padding: 18px;
  }
}


/* =========================================================
   FREIGABEN
   ========================================================= */

.consent-stack {
  margin-top:
    30px;

  display:
    grid;

  gap:
    14px;
}


.consent-row {
  padding:
    16px 0;

  display:
    flex !important;

  align-items:
    flex-start;

  gap:
    12px;

  border-top:
    1px solid
    var(--line);

  font-size:
    0.9rem;

  font-weight:
    400 !important;
}


.consent-row:first-child {
  border-top:
    0;
}


.consent-row input {
  margin-top:
    4px;

  accent-color:
    var(--brand-blue);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
  appearance:
    none;

  min-height:
    46px;

  padding:
    0 18px;

  border-radius:
    14px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    transparent;

  cursor:
    pointer;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease),
    transform var(--ease),
    opacity var(--ease);
}


.button:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


.button:disabled {
  cursor:
    not-allowed;

  opacity:
    0.45;
}


.button-primary {
  background:
    var(--brand-blue);

  color:
    var(--white);
}


.button-primary:hover:not(:disabled) {
  background:
    var(--brand-blue-deep);
}


.button-secondary {
  background:
    var(--white);

  color:
    var(--brand-blue-deep);

  border-color:
    var(--line-strong);
}


.button-secondary:hover:not(:disabled) {
  border-color:
    var(--brand-blue);
}


.button-large {
  min-height:
    52px;

  padding-inline:
    24px;
}


/* =========================================================
   NAVIGATION IM FORMULAR
   ========================================================= */

.wizard-actions {
  margin-top:
    42px;

  padding-top:
    24px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  border-top:
    1px solid
    var(--line);
}


.wizard-actions-right {
  display: flex;

  align-items:
    center;

  gap:
    14px;

  margin-left:
    auto;
}


.step-error {
  color:
    var(--danger);

  font-size:
    0.82rem;

  text-align:
    right;
}


.is-hidden {
  display:
    none !important;
}


/* =========================================================
   GEMEINSAMER FOOTER
   ========================================================= */

.site-footer {
  padding:
    42px 0;

  border-top:
    1px solid
    var(--line);

  background:
    var(--white);
}


.footer-inner {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;
}


.footer-inner > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.footer-inner strong {
  font-size:
    0.92rem;
}


.footer-inner span {
  color:
    var(--ink-soft);

  font-size:
    0.78rem;
}


.footer-inner nav {
  display:
    flex;

  gap:
    18px;
}


.footer-inner a {
  color:
    var(--ink-soft);

  font-size:
    0.82rem;

  text-decoration:
    none;
}


/* =========================================================
   HILFSKLASSEN
   ========================================================= */

.visually-hidden {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(
      0,
      0,
      0,
      0
    ) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}


/* =========================================================
   PROTOTYP-HINWEIS
   ========================================================= */

.prototype-note {
  margin-top:
    20px;

  padding:
    14px 16px;

  border-left:
    3px solid
    var(--brand-blue);

  background:
    var(--brand-blue-soft);

  border-radius:
    0
    var(--radius-field)
    var(--radius-field)
    0;
}


.prototype-note strong {
  display:
    block;

  font-size:
    0.84rem;
}


.prototype-note p {
  margin:
    4px 0 0;

  color:
    var(--ink-soft);

  font-size:
    0.8rem;
}


/* =========================================================
   VALIDIERUNG / PFLICHTFELDER

   Normalzustand:
   Pflicht- und optionale Felder erhalten KEINE
   unterschiedliche Kennfarbe.

   Erst nach fehlgeschlagener Prüfung wird
   .is-invalid gesetzt.

   ROT bedeutet ausschließlich:
   notwendige Angabe fehlt oder ist ungültig.
   ========================================================= */


/*
  Fehlermeldungen besitzen dauerhaft etwas Platz,
  bleiben aber zunächst unsichtbar.

  So gibt es beim Einblenden keinen starken
  Layoutsprung.
*/

.validation-message {
  min-height:
    1.15rem;

  margin-top:
    6px;

  display:
    block;

  color:
    var(--danger);

  font-size:
    0.78rem;

  line-height:
    1.25;

  visibility:
    hidden;

  opacity:
    0;

  transition:
    opacity
    var(--ease);
}


/* =========================================================
   NORMALE EINGABEFELDER IM FEHLERZUSTAND
   ========================================================= */

.field.is-invalid > input,
.field.is-invalid > textarea,
.field.is-invalid > select {
  border-color:
    var(--danger);

  box-shadow:
    0 0 0 3px
    rgba(
      166,
      61,
      61,
      0.10
    );
}


/*
  WICHTIG:

  Der allgemeine :focus-Stil weiter oben
  ist blau.

  Bei einem ungültigen Pflichtfeld überschreiben
  wir ihn ausdrücklich.

  Das Feld bleibt also auch nach dem automatischen
  Fokus ROT.
*/

.field.is-invalid > input:focus,
.field.is-invalid > textarea:focus,
.field.is-invalid > select:focus {
  border-color:
    var(--danger);

  box-shadow:
    0 0 0 4px
    rgba(
      166,
      61,
      61,
      0.12
    );
}


/* Fehlermeldung anzeigen */

.field.is-invalid
> .validation-message {
  visibility:
    visible;

  opacity:
    1;
}


/* =========================================================
   RADIO-AUSWAHLGRUPPEN

   Nicht jede einzelne Karte wird rot.

   Die gesamte Auswahlgruppe erhält einen roten
   Außenrahmen.

   outline verändert die Abmessungen nicht und
   verursacht daher keinen Layoutsprung.
   ========================================================= */

.field.is-invalid
.choice-grid,

.field.is-invalid
.choice-stack {
  outline:
    2px solid
    var(--danger);

  outline-offset:
    5px;

  border-radius:
    var(--radius-card);

  background:
    rgba(
      166,
      61,
      61,
      0.025
    );
}


/*
  Die einzelne gewählte Karte darf weiterhin
  unseren normalen blauen Auswahlzustand haben.

  Sobald eine gültige Auswahl erfolgt,
  entfernt JavaScript .is-invalid vollständig.
*/


/* =========================================================
   DATENSCHUTZ-PFLICHTCHECKBOX
   ========================================================= */

.consent-stack.is-invalid
.consent-row:has(
  input[name="privacy"]
) {
  outline:
    2px solid
    var(--danger);

  outline-offset:
    4px;

  border-radius:
    var(--radius-field);

  background:
    rgba(
      166,
      61,
      61,
      0.025
    );
}


.consent-stack.is-invalid
> .consent-validation-message {
  visibility:
    visible;

  opacity:
    1;
}


/* =========================================================
   UPLOAD-FEHLER
   ========================================================= */

.wizard-step.has-upload-error
.upload-box {
  border-color:
    var(--danger);

  box-shadow:
    0 0 0 3px
    rgba(
      166,
      61,
      61,
      0.08
    );

  background:
    rgba(
      166,
      61,
      61,
      0.025
    );
}


.wizard-step.has-upload-error
> .upload-validation-message {
  visibility:
    visible;

  opacity:
    1;
}


/* =========================================================
   BILD-UPLOAD: PFLICHTSTATUS
   ========================================================= */

.image-upload-status {
  min-height: 1.2rem;

  margin-top: 9px;

  display: flex;

  justify-content: flex-end;

  color: var(--ink-soft);

  font-size: 0.78rem;
}


/* Fehlerzustand nach "Weiter" */

.upload-section.is-invalid .upload-box {
  border:
    2px dashed
    var(--danger);

  background:
    rgba(
      166,
      61,
      61,
      0.025
    );

  box-shadow:
    0 0 0 3px
    rgba(
      166,
      61,
      61,
      0.08
    );
}


.upload-section.is-invalid .upload-symbol {
  border-color:
    rgba(
      166,
      61,
      61,
      0.35
    );

  color:
    var(--danger);
}


.upload-section.is-invalid
.image-upload-status {
  color:
    var(--danger);

  font-weight:
    700;
}


.upload-section.is-invalid
.upload-validation-message {
  visibility:
    visible;

  opacity:
    1;
}


/* Mindestanforderung erfüllt */

.upload-section.is-complete
.image-upload-status {
  color:
    var(--brand-blue-deep);

  font-weight:
    700;
}


/* =========================================================
   MONATS-PICKER
   Markteinführung
   ========================================================= */

.month-picker-field {
  max-width: 520px;
}


.month-picker {
  position: relative;
}


/* Sichtbares Auswahlfeld */

.month-picker-trigger {
  width: 100%;
  min-height: 50px;

  padding:
    0 15px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-field);

  background:
    var(--white);

  color:
    var(--ink);

  cursor:
    pointer;

  text-align:
    left;

  transition:
    border-color var(--ease),
    box-shadow var(--ease),
    background var(--ease);
}


.month-picker-trigger:hover {
  border-color:
    #b8cfdb;
}


.month-picker-trigger:focus {
  outline:
    none;

  border-color:
    var(--brand-blue);

  box-shadow:
    0 0 0 4px
    rgba(
      26,
      100,
      143,
      0.08
    );
}


.month-picker-trigger[aria-expanded="true"] {
  border-color:
    var(--brand-blue);

  box-shadow:
    0 0 0 4px
    rgba(
      26,
      100,
      143,
      0.08
    );
}


.month-picker-value {
  color:
    var(--ink);

  font-size:
    0.94rem;
}


.month-picker-value.is-placeholder {
  color:
    #7f8a92;
}


.month-picker-chevron {
  color:
    var(--brand-blue);

  font-size:
    0.9rem;

  transition:
    transform var(--ease);
}


.month-picker-trigger[aria-expanded="true"]
.month-picker-chevron {
  transform:
    rotate(180deg);
}


/* Aufklappender Kalenderbereich */

.month-picker-panel {
  position: absolute;

  z-index: 40;

  top:
    calc(100% + 8px);

  left: 0;

  width: 100%;

  padding:
    18px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-card);

  background:
    var(--white);

  box-shadow:
    0 18px 45px
    rgba(
      18,
      63,
      93,
      0.12
    );
}


.month-picker-panel[hidden] {
  display:
    none;
}


/* Jahresnavigation */

.month-picker-head {
  display: grid;

  grid-template-columns:
    44px
    1fr
    44px;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    18px;
}


.month-picker-nav {
  width:
    44px;

  height:
    44px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    var(--white);

  color:
    var(--brand-blue-deep);

  cursor:
    pointer;

  font-size:
    1.5rem;

  line-height:
    1;
}


.month-picker-nav:hover:not(:disabled) {
  border-color:
    var(--brand-blue);

  background:
    var(--brand-blue-soft);
}


.month-picker-nav:disabled {
  opacity:
    0.3;

  cursor:
    default;
}


/* Jahresauswahl */

.month-picker-year {
  width:
    100%;

  height:
    44px;

  padding:
    0 38px 0 14px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  background:
    var(--white);

  color:
    var(--ink);

  font-weight:
    700;

  text-align:
    center;

  cursor:
    pointer;
}


/* 12 Monate */

.month-picker-months {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    8px;
}


.month-picker-month {
  min-height:
    46px;

  padding:
    8px 6px;

  border:
    1px solid
    transparent;

  border-radius:
    11px;

  background:
    var(--brand-blue-mist);

  color:
    var(--ink);

  cursor:
    pointer;

  font-size:
    0.84rem;

  transition:
    border-color var(--ease),
    background var(--ease),
    color var(--ease);
}


.month-picker-month:hover {
  border-color:
    var(--brand-blue);

  background:
    var(--brand-blue-soft);
}


/* Bereits ausgewählter Monat */

.month-picker-month.is-selected {
  border-color:
    var(--brand-blue);

  background:
    var(--brand-blue);

  color:
    var(--white);
}


/*
  Aktueller Kalendermonat:
  nur sehr dezente Orientierung.
*/

.month-picker-month.is-current:not(.is-selected) {
  border-color:
    var(--line-strong);

  font-weight:
    700;
}


/* Unterer Bereich */

.month-picker-footer {
  margin-top:
    16px;

  padding-top:
    14px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    12px;

  border-top:
    1px solid
    var(--line);
}


.month-picker-clear,
.month-picker-close {
  padding:
    7px 0;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

  font-size:
    0.8rem;
}


.month-picker-clear {
  color:
    var(--ink-soft);
}


.month-picker-clear:hover {
  color:
    var(--danger);
}


.month-picker-close {
  color:
    var(--brand-blue);

  font-weight:
    700;
}


/* Mobile */

@media (max-width: 620px) {

  .month-picker-field {
    max-width:
      none;
  }


  .month-picker-months {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }


  .month-picker-panel {
    padding:
      14px;
  }

}

/* =========================================================
   SCHUTZ BEIM VERLASSEN DES FORMULARS
   ========================================================= */

.leave-dialog {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: grid;

  place-items: center;

  padding: 24px;
}


.leave-dialog[hidden] {
  display: none;
}


/* Abdunklung hinter dem Dialog */

.leave-dialog-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(
      18,
      35,
      43,
      0.46
    );

  backdrop-filter:
    blur(3px);
}


/* Eigentliches Dialogfenster */

.leave-dialog-box {
  position: relative;

  z-index: 1;

  width:
    min(
      520px,
      100%
    );

  padding:
    28px;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius-large);

  background:
    var(--white);

  box-shadow:
    0 24px 70px
    rgba(
      18,
      35,
      43,
      0.22
    );
}


.leave-dialog-kicker {
  display: block;

  margin-bottom: 8px;

  color:
    var(--danger);

  font-size:
    0.72rem;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.leave-dialog-box h2 {
  margin:
    0 0 12px;

  font-size:
    1.45rem;

  line-height:
    1.2;

  letter-spacing:
    -0.025em;
}


.leave-dialog-box p {
  margin:
    0;

  color:
    var(--ink-soft);

  font-size:
    0.92rem;
}


.leave-dialog-actions {
  margin-top:
    26px;

  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;
}


/*
  Verlassen bewusst zurückhaltend rot kennzeichnen.
  Der primäre blaue Button bleibt:
  "Im Formular bleiben".
*/

.button-danger-outline {
  background:
    var(--white);

  color:
    var(--danger);

  border-color:
    rgba(
      166,
      61,
      61,
      0.38
    );
}


.button-danger-outline:hover:not(:disabled) {
  background:
    rgba(
      166,
      61,
      61,
      0.05
    );

  border-color:
    var(--danger);
}


@media (max-width: 620px) {

  .leave-dialog {
    padding:
      16px;
  }


  .leave-dialog-box {
    padding:
      22px;
  }


  .leave-dialog-actions {
    flex-direction:
      column;
  }


  .leave-dialog-actions .button {
    width:
      100%;
  }

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .form-grid-2,
  .choice-grid-2,
  .choice-grid-category {
    grid-template-columns:
      1fr;
  }


  .landing-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(180px, 210px);

    column-gap: 42px;
  }


  .award-medal {
    width:
      clamp(
        175px,
        22vw,
        205px
      );
  }


  .landing-info-grid {
    grid-template-columns:
      1fr;

    gap:
      28px;
  }


  .landing-info-grid article,
  .landing-info-grid article:not(:first-child) {
    padding:
      0;

    border-left:
      0;
  }


  .assist-panel {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .assist-panel .button {
    width:
      100%;
  }


  .upload-box {
    grid-template-columns:
      52px
      1fr;
  }


  .upload-box .button {
    grid-column:
      1 / -1;

    width:
      100%;
  }

}


@media (max-width: 720px) {

  .landing-hero-grid {
    grid-template-columns:
      1fr;

    grid-template-areas:
      "eyebrow"
      "copy"
      "medal";

    column-gap: 0;
    row-gap: 0;
  }


  .landing-copy {
    max-width: none;
  }


  .award-medal-wrap {
    margin-top: 34px;

    justify-content: center;
  }


  .award-medal {
    width: 160px;
  }

}


@media (max-width: 620px) {

  .shell {
    width:
      min(
        calc(100% - 24px),
        var(--shell)
      );
  }


  .header-inner {
    min-height:
      64px;
  }


  .header-meta {
    display:
      none;
  }


  .landing-hero {
    padding:
      72px 0 56px;
  }


  .landing-copy h1 {
    margin-bottom: 18px;

    font-size:
      clamp(
        2.7rem,
        13vw,
        3.35rem
      );

    line-height: 0.98;
  }


  .lead {
    font-size: 1.03rem;
  }


  .award-medal-wrap {
    margin-top: 30px;
  }


  .award-medal {
    width: 145px;
  }


  .wizard-main {
    padding:
      28px 12px 70px;
  }


  .progress-copy {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      3px;
  }


  .wizard-heading h1 {
    font-size:
      2.45rem;
  }


  .field-meta,
  .footer-inner,
  .wizard-actions {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .wizard-actions-right {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  .wizard-actions .button {
    width:
      100%;
  }


  .step-error {
    text-align:
      left;
  }


  .footer-inner nav {
    flex-wrap:
      wrap;
  }

}

/* =========================================================
   FORMULAR – FEINSCHLIFF V3
   Hilfstexte, Beschreibung, Social-Baustein, Award, Freigaben
   ========================================================= */

/* Hilfstexte stehen vor dem zugehörigen Eingabefeld. */
.field > .field-intro {
  margin: -1px 0 9px;
}


/* Originalbeschreibung: Hinweis und Zähler optisch an das Feld andocken. */
.description-textarea {
  margin-bottom: 0;

  border-radius:
    var(--radius-field)
    var(--radius-field)
    0
    0;
}

.description-meta-dock {
  min-height: 42px;

  padding: 8px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  border:
    1px solid
    var(--line-strong);

  border-top: 0;

  border-radius:
    0
    0
    var(--radius-field)
    var(--radius-field);

  background:
    var(--surface);
}

.description-meta-dock small {
  margin: 0;

  color:
    var(--ink-soft);

  font-size:
    0.78rem;
}

.description-meta-dock .character-counter {
  flex: 0 0 auto;

  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}

.field.is-invalid .description-meta-dock {
  border-color:
    var(--danger);
}


/* Logo-Vorschau: vollständig sichtbar, nicht beschneiden. */
.file-preview-thumb-logo {
  padding: 5px;

  background:
    var(--white);

  object-fit:
    contain;
}


/* Marketing-Kopf mit kompaktem Plattformhinweis rechts. */
.marketing-bundle-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;
}

.marketing-bundle-heading-copy {
  min-width: 0;
}

.social-platform-labels {
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;
}

.social-platform-labels span {
  padding: 6px 9px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    999px;

  background:
    var(--white);

  color:
    var(--ink-soft);

  font-size:
    0.72rem;

  font-weight:
    700;

  white-space:
    nowrap;
}


/* BranchenPionier: Titel über volle Breite, Beschreibung links, Auszeichnung rechts. */
.award-hero {
  margin-bottom:
    24px;
}

.award-hero-heading {
  max-width:
    900px;

  margin-bottom:
    26px;
}

.award-hero-heading h1 {
  margin:
    9px 0 0;

  font-size:
    clamp(
      2.15rem,
      5vw,
      3.8rem
    );

  line-height:
    1.02;

  letter-spacing:
    -0.04em;
}

.award-hero-body {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    180px;

  align-items:
    start;

  gap:
    34px;
}

.award-hero-copy p {
  margin:
    0 0 14px;

  color:
    var(--ink-soft);

  font-size:
    0.96rem;
}

.award-hero-copy p:last-child {
  margin-bottom:
    0;
}

.award-hero-visual {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding-top:
    2px;
}

.award-hero-visual img {
  width:
    min(100%, 170px);

  height:
    auto;

  display:
    block;

  object-fit:
    contain;
}

.award-benefit-box {
  margin-top:
    6px;
}

.award-participation-field {
  margin-top:
    20px;

  padding:
    22px;

  border:
    1px solid
    var(--brand-blue);

  border-radius:
    var(--radius-large);

  background:
    var(--white);
}

.award-participation-field
.award-participation-label {
  margin-bottom:
    13px;

  color:
    var(--brand-blue-deep);

  font-size:
    1.02rem;
}


/* Freigaben: jede fehlende Pflichtauswahl erhält ihren eigenen Fehlerzustand. */
.consent-item {
  display:
    grid;
}

.consent-item .consent-row {
  border-top:
    0;
}

.consent-item.is-invalid .consent-row {
  outline:
    2px solid
    var(--danger);

  outline-offset:
    4px;

  border-radius:
    var(--radius-field);

  background:
    rgba(
      166,
      61,
      61,
      0.025
    );
}

.consent-item.is-invalid
> .validation-message {
  visibility:
    visible;

  opacity:
    1;
}


@media (max-width: 760px) {

  .marketing-bundle-heading {
    flex-direction:
      column;
  }

  .social-platform-labels {
    justify-content:
      flex-start;
  }

  .award-hero-heading {
    margin-bottom:
      18px;
  }

  .award-hero-body {
    grid-template-columns:
      1fr;

    gap:
      15px;
  }

  .award-hero-visual {
    order:
      -1;

    justify-content:
      flex-start;

    padding-top:
      0;
  }

  .award-hero-visual img {
    width:
      min(120px, 34vw);
  }

}


@media (max-width: 620px) {

  .description-meta-dock {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      4px;
  }

  .award-participation-field {
    padding:
      18px;
  }

}


/* =========================================================
   FORMULAR – TYPOGRAFISCHE HIERARCHIE V5
   Feldüberschriften klar oberhalb der Auswahl-/Eingabeinhalte
   ========================================================= */

/*
   Nur die eigentlichen Feldtitel vergrößern.
   Choice-Cards und andere verschachtelte Labels behalten
   ihre eigene Typografie.
*/
.field > label:not(.choice-card):not(.toggle-row),
.field > .field-label {
  margin-bottom: 8px;

  color: var(--ink);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}


/* Erklärung direkt unter einem Feldtitel etwas ruhiger,
   aber gut lesbar halten. */
.field > .field-intro {
  margin: -1px 0 11px;

  font-size: 0.84rem;
  line-height: 1.45;
}


/* Originalbeschreibung: Leitfragen direkt unter dem Feldtitel. */
.description-guidance {
  margin: -1px 0 12px;

  color: var(--ink-soft);

  font-size: 0.84rem;
  line-height: 1.5;
}

.description-guidance strong {
  display: block;

  margin-bottom: 2px;

  color: var(--ink);

  font-size: 0.84rem;
  font-weight: 700;
}

.description-guidance p {
  margin: 0;
}