/* =========================================================
   DISSBERGER MESSEBAU – PROJEKTPLANER / LEAD-FUNNEL
   Version 1.1.0
   ========================================================= */

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

.dmff {
  --dmff-blue: #0B3A6F;
  --dmff-blue-deep: #06294F;
  --dmff-blue-mid: #275D8F;
  --dmff-blue-pale: #EEF4FA;
  --dmff-blue-faint: #F5F8FB;
  --dmff-ink: #172534;
  --dmff-text: #536577;
  --dmff-muted: #748597;
  --dmff-line: #DCE5ED;
  --dmff-white: #FFFFFF;

  position: relative;
  overflow: hidden;

  width: 100%;
  min-height: 0;

  padding: 0;

  color: var(--dmff-ink);
  font-family: inherit;

  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,.99),
      rgba(248,251,253,.98)
    );

  border: 1px solid rgba(11,58,111,.15);
  border-radius: 24px;

  box-shadow:
    0 28px 68px rgba(6,41,79,.12),
    0 7px 20px rgba(6,41,79,.045),
    inset 0 1px 0 rgba(255,255,255,.98);
}

.dmff::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -115px;
  right: -85px;
  width: 310px;
  height: 215px;
  border: 1px solid rgba(11,58,111,.055);
  border-radius: 26px;
  transform: rotate(14deg);
  pointer-events: none;
}

.dmff [hidden] {
  display: none !important;
}

.dmff__honeypot,
.dmff__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   PROJEKTPLANER-KOPF
   ========================================================= */

.dmff__progress {
  position: relative;
  z-index: 2;

  padding:
    23px
    28px
    18px;

  color: #FFFFFF;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(77,127,174,.34),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--dmff-blue-deep),
      var(--dmff-blue) 66%,
      #164B7A
    );
}

.dmff__progress-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;

  margin-bottom: 18px;
}

.dmff__progress-copy {
  min-width: 0;
}

.dmff__progress-kicker {
  display: block;

  margin-bottom: 5px;

  color: rgba(255,255,255,.64);

  font-size: 9.5px;
  line-height: 1;
  font-weight: 820;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.dmff__progress-copy strong {
  display: block;

  color: #FFFFFF;

  font-size:
    clamp(16px, 1.5vw, 20px);

  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.018em;
}

.dmff__progress-meta {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;

  text-align: right;
}

.dmff__progress-meta span:first-child {
  color: rgba(255,255,255,.62);

  font-size: 9.5px;
  line-height: 1;
  font-weight: 720;
}

.dmff__progress-meta span:last-child {
  color: #FFFFFF;

  font-size: 11px;
  line-height: 1;
  font-weight: 760;
}

/* sechs sichtbare Stationen */

.dmff__stage-nav {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0,1fr));

  gap: 7px;

  margin-bottom: 13px;
}

.dmff-stage {
  position: relative;

  display: flex;
  align-items: center;
  gap: 7px;

  min-width: 0;
  min-height: 39px;

  padding:
    7px
    9px;

  color: rgba(255,255,255,.56);

  background: rgba(255,255,255,.055);

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;

  transition:
    color .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    transform .22s ease;
}

.dmff-stage b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 23px;

  width: 23px;
  height: 23px;

  color: inherit;

  background: rgba(255,255,255,.08);

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;

  font-size: 9px;
  line-height: 1;
  font-weight: 840;
}

.dmff-stage > span {
  min-width: 0;

  overflow: hidden;

  font-size: 9.5px;
  line-height: 1.1;
  font-weight: 680;

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

.dmff-stage.is-complete {
  color: rgba(255,255,255,.82);

  background: rgba(255,255,255,.075);
}

.dmff-stage.is-current {
  color: var(--dmff-blue-deep);

  background: #FFFFFF;

  border-color: #FFFFFF;

  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(0,0,0,.13);
}

.dmff-stage.is-current b {
  color: #FFFFFF;
  background: var(--dmff-blue);
  border-color: var(--dmff-blue);
}

.dmff__progress-track {
  position: relative;

  overflow: hidden;

  width: 100%;
  height: 4px;

  background: rgba(255,255,255,.15);

  border-radius: 999px;
}

.dmff__progress-track > span {
  position: absolute;
  inset: 0 auto 0 0;

  width: 16.6667%;

  background:
    linear-gradient(
      90deg,
      #FFFFFF,
      #BBD2E7
    );

  border-radius: inherit;

  box-shadow:
    0 0 12px rgba(255,255,255,.18);

  transition:
    width
    350ms
    cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   BODY / SCHRITTE
   ========================================================= */

.dmff__form {
  position: relative;
  z-index: 2;
}

.dmff__steps {
  position: relative;

  padding:
    28px
    30px
    25px;
}

.dmff__step {
  width: 100%;
  max-width: none;

  margin: 0;
}

.dmff__step-head {
  max-width: 850px;

  margin-bottom: 20px;
}

.dmff__eyebrow {
  display: block;

  margin-bottom: 8px;

  color: var(--dmff-blue);

  font-size: 9.5px;
  line-height: 1;
  font-weight: 830;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.dmff__step-head h3 {
  max-width: 850px;

  margin: 0 0 8px;

  color: var(--dmff-ink);

  font-size:
    clamp(23px, 2.15vw, 31px);

  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.038em;

  text-wrap: balance;
}

.dmff__step-head p {
  max-width: 760px;

  margin: 0;

  color: var(--dmff-muted);

  font-size: 12.5px;
  line-height: 1.52;
  font-weight: 450;
}

/* =========================================================
   FEHLER / ERFOLG
   ========================================================= */

.dmff__error {
  max-width: 850px;

  margin: 0 0 15px;
  padding: 10px 12px;

  color: #A32929;

  background: #FFF5F5;

  border: 1px solid #E5B4B4;
  border-radius: 10px;

  font-size: 11.5px;
  line-height: 1.42;
}

.dmff__error--global {
  position: relative;
  z-index: 4;

  margin:
    18px
    28px
    0;
}

.dmff__success {
  position: relative;
  z-index: 3;

  min-height: 300px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  padding: 42px 34px;

  text-align: left;
}

.dmff__success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 56px;

  width: 56px;
  height: 56px;

  color: #FFFFFF;

  background: var(--dmff-blue);

  border-radius: 50%;

  box-shadow:
    0 0 0 8px rgba(11,58,111,.08);

  font-size: 24px;
  font-weight: 800;
}

.dmff__success strong {
  display: block;

  margin-bottom: 8px;

  color: var(--dmff-ink);

  font-size: 22px;
  line-height: 1.2;
}

.dmff__success p {
  max-width: 520px;

  margin: 0;

  color: var(--dmff-muted);

  font-size: 14px;
  line-height: 1.6;
}

/* =========================================================
   FELDER
   ========================================================= */

.dmff-fields {
  display: grid;
  gap: 13px;
}

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

.dmff-field {
  min-width: 0;
}

.dmff-field > label,
.dmff-field--upload > label:first-child {
  display: block;

  margin: 0 0 7px;

  color: var(--dmff-ink);

  font-size: 11px;
  line-height: 1.3;
  font-weight: 750;
}

.dmff-field label span {
  color: var(--dmff-muted);
  font-weight: 500;
}

.dmff-input {
  width: 100%;
  min-height: 48px;

  padding:
    11px
    13px;

  color: var(--dmff-ink);

  background: #FFFFFF;

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

  outline: none;

  font: inherit;
  font-size: 13px;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.dmff-input:hover {
  border-color: #C5D2DD;
}

.dmff-input:focus {
  border-color: var(--dmff-blue);

  box-shadow:
    0 0 0 3px rgba(11,58,111,.09);
}

.dmff-input.is-invalid {
  border-color: #C84A4A;

  box-shadow:
    0 0 0 3px rgba(200,74,74,.08);
}

/* =========================================================
   AUSWAHLEN
   ========================================================= */

.dmff__choices {
  margin: 0;
  padding: 0;

  border: 0;
}

/* Standgröße: eine kompakte Reihe */

.dmff__choices--tiles {
  display: grid;

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

  gap: 9px;
}

/*
 * Leistungen: bewusst KEIN großes Grid.
 * Kurze Optionen wie Licht, Ton oder Planung stehen nebeneinander.
 */
.dmff__choices--services {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;

  gap: 8px;
}

.dmff-choice {
  position: relative;

  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 46px;

  padding:
    9px
    11px;

  color: var(--dmff-ink);

  background: #FFFFFF;

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

  cursor: pointer;

  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 700;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background-color .18s ease;
}

.dmff__choices--services
.dmff-choice {
  flex:
    0
    1
    auto;

  min-height: 39px;

  padding:
    8px
    11px;
}

.dmff__choices--services
.dmff-choice__text {
  white-space: nowrap;
}

.dmff-choice:hover {
  border-color:
    rgba(11,58,111,.36);

  transform:
    translateY(-1px);
}

.dmff-choice input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}

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

  background:
    linear-gradient(
      135deg,
      rgba(11,58,111,.07),
      rgba(39,93,143,.035)
    );

  box-shadow:
    0 0 0 3px
    rgba(11,58,111,.055);
}

.dmff-choice__mark {
  position: relative;

  width: 17px;
  height: 17px;
  flex: 0 0 17px;

  border: 2px solid #B8C6D2;
  border-radius: 50%;

  background: #FFFFFF;
}

.dmff-choice--check
.dmff-choice__mark {
  border-radius: 5px;
}

.dmff-choice input:checked +
.dmff-choice__mark {
  border-color:
    var(--dmff-blue);

  background:
    var(--dmff-blue);
}

.dmff-choice input:checked +
.dmff-choice__mark::after {
  content: "";

  position: absolute;

  left: 4px;
  top: 1px;

  width: 4px;
  height: 8px;

  border: solid #FFFFFF;
  border-width:
    0
    2px
    2px
    0;

  transform:
    rotate(45deg);
}

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

.dmff-upload {
  display: flex;
  align-items: center;

  gap: 13px;

  min-height: 78px;

  padding:
    13px
    15px;

  background:
    var(--dmff-blue-faint);

  border:
    1px dashed #B9C8D5;

  border-radius: 12px;

  cursor: pointer;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.dmff-upload:hover {
  border-color:
    rgba(11,58,111,.44);

  background: #F0F5F9;

  transform:
    translateY(-1px);
}

.dmff-upload input {
  position: absolute;

  opacity: 0;
  pointer-events: none;
}

.dmff-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  color: #FFFFFF;

  background:
    linear-gradient(
      135deg,
      var(--dmff-blue),
      var(--dmff-blue-deep)
    );

  border-radius: 10px;

  box-shadow:
    0 8px 18px rgba(6,41,79,.14);
}

.dmff-upload__icon svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dmff-upload__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;

  min-width: 0;
}

.dmff-upload__copy strong {
  color: var(--dmff-ink);

  font-size: 12.5px;
  line-height: 1.3;
}

.dmff-upload__copy small {
  color: var(--dmff-muted);

  font-size: 10.5px;
  line-height: 1.4;
}

/* =========================================================
   DATENSCHUTZ
   ========================================================= */

.dmff-privacy {
  display: grid;

  grid-template-columns:
    19px
    1fr;

  gap: 9px;
  align-items: start;

  margin: 15px 0 0;

  color: var(--dmff-muted);

  font-size: 10.5px;
  line-height: 1.45;
}

.dmff-privacy input {
  width: 17px;
  height: 17px;

  margin: 1px 0 0;

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

.dmff-privacy.is-invalid {
  color: #A32929;
}

.dmff-privacy a {
  color: var(--dmff-blue);

  text-underline-offset: 2px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

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

  gap: 12px;

  margin-top: 23px;
}

.dmff__nav-spacer {
  width: 1px;
}

.dmff-btn {
  appearance: none;

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

  gap: 9px;

  min-height: 48px;

  padding:
    10px
    18px;

  border-radius: 11px;

  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

.dmff-btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: 154px;

  color: #FFFFFF;

  background:
    linear-gradient(
      135deg,
      var(--dmff-blue),
      var(--dmff-blue-deep)
    );

  border:
    1px solid
    var(--dmff-blue-deep);

  box-shadow:
    0 10px 22px
    rgba(6,41,79,.17);
}

.dmff-btn--primary::before {
  content: "";

  position: absolute;

  inset:
    -1px
    auto
    -1px
    -55%;

  width: 42%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.42),
      transparent
    );

  transform:
    skewX(-22deg)
    translateX(-170%);

  transition:
    transform .48s ease;

  pointer-events: none;
}

.dmff-btn--primary:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 14px 28px
    rgba(6,41,79,.23);

  background:
    linear-gradient(
      135deg,
      var(--dmff-blue-mid),
      var(--dmff-blue-deep)
    );
}

.dmff-btn--primary:hover::before {
  transform:
    skewX(-22deg)
    translateX(390%);
}

.dmff-btn--back {
  padding-inline:
    4px
    10px;

  color:
    var(--dmff-muted);

  background:
    transparent;

  border: 0;
}

.dmff-btn--back:hover {
  color:
    var(--dmff-ink);
}

.dmff-btn[disabled] {
  opacity: .65;
  cursor: wait;
  transform: none;
}

.dmff__submit-note {
  margin:
    10px
    0
    0;

  text-align: right;

  color:
    var(--dmff-muted);

  font-size: 9.5px;
  line-height: 1.3;
}

/* =========================================================
   VERTRAUENSZEILE
   ========================================================= */

.dmff__trust {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap:
    8px
    18px;

  padding:
    12px
    18px;

  color: #5E7082;

  background:
    rgba(244,248,251,.92);

  border-top:
    1px solid #E3EAF0;

  font-size: 9.5px;
  line-height: 1.3;
  font-weight: 700;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .dmff__stage-nav {
    gap: 5px;
  }

  .dmff-stage {
    padding:
      6px
      7px;
  }

  .dmff-stage > span {
    font-size: 8.5px;
  }

  .dmff__choices--tiles {
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }
}

/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 680px) {

  .dmff {
    border-radius: 17px;

    box-shadow:
      0 18px 42px
      rgba(6,41,79,.10);
  }

  .dmff__progress {
    padding:
      18px
      15px
      15px;
  }

  .dmff__progress-head {
    align-items: flex-start;

    gap: 12px;

    margin-bottom: 14px;
  }

  .dmff__progress-copy strong {
    font-size: 15px;
  }

  .dmff__progress-meta {
    gap: 2px;
  }

  .dmff__progress-meta span:first-child {
    font-size: 8.5px;
  }

  .dmff__progress-meta span:last-child {
    font-size: 9.5px;
  }

  /*
   * Alle sechs Schritte bleiben sichtbar,
   * aber extrem kompakt – kein zusätzlicher hoher Navigationsblock.
   */
  .dmff__stage-nav {
    grid-template-columns:
      repeat(6, minmax(0,1fr));

    gap: 4px;

    margin-bottom: 10px;
  }

  .dmff-stage {
    min-height: 44px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 4px;

    padding:
      5px
      2px;

    text-align: center;
  }

  .dmff-stage b {
    flex-basis: 20px;

    width: 20px;
    height: 20px;

    margin: 0 auto;

    font-size: 8px;
  }

  .dmff-stage > span {
    width: 100%;

    font-size: 7.4px;

    text-align: center;
  }

  .dmff__steps {
    padding:
      22px
      16px
      18px;
  }

  .dmff__step-head {
    margin-bottom: 16px;
  }

  .dmff__step-head h3 {
    font-size: 21px;
  }

  .dmff__step-head p {
    font-size: 11.5px;
  }

  .dmff-fields--two {
    grid-template-columns:
      1fr;

    gap: 9px;
  }

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

    gap: 7px;
  }

  /*
   * Schritt 4 bleibt auch mobil als kompakte Chip-Wolke.
   * Licht, Ton, Planung etc. teilen sich Zeilen.
   */
  .dmff__choices--services {
    gap: 7px;
  }

  .dmff__choices--services
  .dmff-choice {
    min-height: 36px;

    padding:
      7px
      9px;

    font-size: 10.5px;
  }

  .dmff__choices--services
  .dmff-choice__mark {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .dmff-choice {
    min-height: 44px;

    padding:
      9px
      10px;

    font-size: 11px;
  }

  .dmff-upload {
    min-height: 76px;

    padding:
      12px
      13px;
  }

  .dmff__nav {
    margin-top: 18px;
  }

  .dmff-btn--primary {
    min-width: 0;

    flex:
      1
      1
      auto;
  }

  .dmff-btn--back {
    flex:
      0
      0
      auto;
  }

  .dmff__trust {
    gap:
      6px
      10px;

    padding-inline:
      10px;

    font-size: 8.7px;
  }

  .dmff__success {
    min-height: 245px;

    align-items: flex-start;

    padding:
      34px
      20px;
  }
}

@media (max-width: 390px) {

  .dmff__progress-copy strong {
    font-size: 14px;
  }

  .dmff-stage > span {
    font-size: 6.8px;
  }

  .dmff__steps {
    padding-left: 14px;
    padding-right: 14px;
  }

  .dmff__choices--services
  .dmff-choice {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .dmff,
  .dmff *,
  .dmff *::before,
  .dmff *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   VERSION 1.2.0 – KOMPAKTER PROJEKTPLANER
   Desktop deutlich niedriger / Mobil Schritt 4 exakt 2-spaltig
   ========================================================= */

/* ---------- DESKTOP / LAPTOP ---------- */

@media (min-width: 681px) {

  .dmff {
    border-radius: 21px;
  }

  .dmff__progress {
    padding:
      17px
      20px
      13px;
  }

  .dmff__progress-head {
    align-items: center;

    margin-bottom: 12px;
  }

  .dmff__progress-kicker {
    margin-bottom: 4px;

    font-size: 8.5px;
  }

  .dmff__progress-copy strong {
    font-size:
      clamp(14px, 1.25vw, 17px);
  }

  .dmff__progress-meta span:first-child {
    font-size: 8.5px;
  }

  .dmff__progress-meta span:last-child {
    font-size: 9.5px;
  }

  .dmff__stage-nav {
    gap: 5px;

    margin-bottom: 9px;
  }

  .dmff-stage {
    min-height: 32px;

    gap: 5px;

    padding:
      5px
      7px;

    border-radius: 7px;
  }

  .dmff-stage b {
    flex-basis: 20px;

    width: 20px;
    height: 20px;

    font-size: 8px;
  }

  .dmff-stage > span {
    font-size: 8.5px;
  }

  .dmff__progress-track {
    height: 3px;
  }

  .dmff__steps {
    padding:
      21px
      23px
      18px;
  }

  .dmff__step-head {
    margin-bottom: 15px;
  }

  .dmff__eyebrow {
    margin-bottom: 6px;

    font-size: 8.5px;
  }

  .dmff__step-head h3 {
    margin-bottom: 6px;

    font-size:
      clamp(20px, 1.65vw, 26px);
  }

  .dmff__step-head p {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .dmff-input {
    min-height: 43px;

    padding:
      9px
      12px;

    font-size: 12px;
  }

  .dmff-field > label,
  .dmff-field--upload > label:first-child {
    margin-bottom: 5px;

    font-size: 10px;
  }

  .dmff-fields {
    gap: 9px;
  }

  .dmff-fields--two {
    gap: 10px;
  }

  .dmff__choices--tiles {
    gap: 7px;
  }

  .dmff-choice {
    min-height: 39px;

    padding:
      7px
      9px;

    font-size: 10.5px;
  }

  .dmff__choices--services {
    gap: 6px;
  }

  .dmff__choices--services .dmff-choice {
    min-height: 35px;

    padding:
      6px
      9px;

    font-size: 10px;
  }

  .dmff-choice__mark {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .dmff-choice input:checked + .dmff-choice__mark::after {
    left: 3px;
    top: 0;

    width: 4px;
    height: 8px;
  }

  .dmff-upload {
    min-height: 66px;

    padding:
      10px
      12px;
  }

  .dmff-upload__icon {
    flex-basis: 36px;

    width: 36px;
    height: 36px;
  }

  .dmff-upload__copy strong {
    font-size: 11.5px;
  }

  .dmff-upload__copy small {
    font-size: 9.5px;
  }

  .dmff-privacy {
    margin-top: 11px;

    font-size: 9.5px;
  }

  .dmff__nav {
    margin-top: 16px;
  }

  .dmff-btn {
    min-height: 42px;

    padding:
      8px
      15px;

    font-size: 11px;
  }

  .dmff-btn--primary {
    min-width: 140px;
  }

  .dmff__submit-note {
    margin-top: 7px;

    font-size: 8.5px;
  }

  .dmff__trust {
    gap:
      6px
      13px;

    padding:
      9px
      12px;

    font-size: 8.5px;
  }

  .dmff__success {
    min-height: 230px;

    padding:
      30px
      26px;
  }
}

/* ---------- MOBILE: SCHRITT 4 EXAKT 2-SPALTIG ---------- */

@media (max-width: 680px) {

  .dmff__choices--services {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;

    width: 100%;
  }

  .dmff__choices--services .dmff-choice {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 39px;

    justify-content: flex-start;

    padding:
      7px
      8px;
  }

  .dmff__choices--services .dmff-choice__text {
    min-width: 0;

    white-space: normal !important;

    font-size: 10px;
    line-height: 1.2;
  }

  .dmff__choices--services .dmff-choice__mark {
    flex: 0 0 16px;
  }
}

@media (max-width: 360px) {

  .dmff__choices--services {
    gap: 6px !important;
  }

  .dmff__choices--services .dmff-choice {
    padding:
      6px
      7px;
  }

  .dmff__choices--services .dmff-choice__text {
    font-size: 9.4px;
  }
}


/* =========================================================
   VERSION 1.3.0 – DISSBERGER WEBSITE-FARBLOGIK
   Hauptshell außen dunkel, Funnel innen hell.
   Projektplaner-Kopf ebenfalls hell statt dunkelblau.
   ========================================================= */

/* ---------- FUNNEL-GRUNDFLÄCHE ---------- */

.dmff {
  background:
    linear-gradient(
      155deg,
      #FFFFFF 0%,
      #F8FAFC 100%
    );

  border-color:
    rgba(11, 58, 111, .10);

  box-shadow: none;
}

/* ---------- HELLER PROJEKTPLANER-KOPF ---------- */

.dmff__progress {
  color:
    var(--dmff-ink);

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(77, 127, 174, .08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F3F7FA 100%
    );

  border-bottom:
    1px solid
    rgba(11, 58, 111, .10);
}

.dmff__progress-kicker {
  color:
    var(--dmff-blue);
}

.dmff__progress-copy strong {
  color:
    var(--dmff-ink);
}

.dmff__progress-meta span:first-child {
  color:
    var(--dmff-muted);
}

.dmff__progress-meta span:last-child {
  color:
    var(--dmff-blue);
}

/* ---------- SCHRITTNAVIGATION HELL ---------- */

.dmff-stage {
  color:
    #607286;

  background:
    rgba(238, 244, 250, .88);

  border-color:
    rgba(11, 58, 111, .10);
}

.dmff-stage b {
  color:
    var(--dmff-blue);

  background:
    #FFFFFF;

  border-color:
    rgba(11, 58, 111, .13);
}

.dmff-stage.is-complete {
  color:
    #42586D;

  background:
    #E9F1F7;

  border-color:
    rgba(11, 58, 111, .13);
}

.dmff-stage.is-complete b {
  color:
    #FFFFFF;

  background:
    var(--dmff-blue-mid);

  border-color:
    var(--dmff-blue-mid);
}

.dmff-stage.is-current {
  color:
    #FFFFFF;

  background:
    linear-gradient(
      135deg,
      var(--dmff-blue),
      var(--dmff-blue-deep)
    );

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

  box-shadow:
    0 8px 18px
    rgba(6, 41, 79, .14);
}

.dmff-stage.is-current b {
  color:
    var(--dmff-blue);

  background:
    #FFFFFF;

  border-color:
    #FFFFFF;
}

.dmff__progress-track {
  background:
    #D9E4ED;
}

.dmff__progress-track > span {
  background:
    linear-gradient(
      90deg,
      var(--dmff-blue),
      var(--dmff-blue-mid)
    );

  box-shadow: none;
}

/* ---------- BODY ETWAS RUHIGER ---------- */

.dmff__steps {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .99),
      rgba(249, 251, 253, .99)
    );
}

.dmff__trust {
  color:
    #5E7082;

  background:
    #F3F7FA;

  border-top-color:
    #DFE8EF;
}

/* ---------- MOBILE ---------- */

@media (max-width: 680px) {

  .dmff__progress {
    background:
      linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F3F7FA 100%
      );
  }

  .dmff-stage {
    color:
      #607286;

    background:
      #EDF3F8;
  }

  .dmff-stage.is-current {
    color:
      #FFFFFF;

    background:
      var(--dmff-blue);
  }

  .dmff-stage.is-current b {
    color:
      var(--dmff-blue);

    background:
      #FFFFFF;
  }
}