:root {
  --color-bg: #181C28;
  --color-bg-elevated: #222839;
  --color-text: #FFFFFF;
  --color-text-muted: #98A6C0;
  --color-brand: #002F6F;
  --color-accent: #DFEDFF;
  --color-accent-grad-start: #FFFFFF;
  --color-accent-grad-end: #8FB8E8;
  --font-family: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --container-width: 480px;
  --radius-l: 20px;
  --radius-m: 14px;
  --radius-s: 8px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.funnel-container {
  max-width: var(--container-width);
  margin: 0 auto;
  /* Jeder Schritt ist ein eigener Flex-Container, der mindestens den
     sichtbaren Bildschirm ausfuellt. svh = kleiner Viewport, aendert sich
     beim Ein-/Ausblenden der Browserleiste nicht. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 0;
  position: relative;
}

/* Inhaltsbloecke behalten ihre eigene Hoehe und werden im Flex-Container
   nicht gestaucht. */
.funnel-container > * {
  flex: 0 0 auto;
}

/* ---------- Typography helpers ---------- */

.accent-text {
  background: radial-gradient(circle at center, var(--color-accent-grad-start) 0%, var(--color-accent-grad-end) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1, h2, h3 {
  margin: 0 0 16px;
  font-weight: 600;
}

h1 {
  font-size: 22px;
  text-align: center;
}

h2 {
  font-size: 19px;
  text-align: center;
}

p {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ---------- Progress + Back nav (quiz steps) ---------- */

.step-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}

/* Abstand zwischen Fortschrittsbalken und Frage: 30px.
   Der 6px hohe Balken sitzt mittig in der 28px hohen Navi-Zeile, unter ihm
   bleiben also 11px Zeilenhoehe stehen - deshalb ergeben 19px Margin
   sichtbare 30px. Gilt nur dort, wo direkt eine Frage folgt; Formular- und
   PLZ-Schritt behalten ihren bisherigen Abstand. */
.step-nav:has(+ .question-block) {
  margin-bottom: 0;
}

.step-nav + .question-block {
  margin-top: 19px;
}

.step-nav__back {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.step-nav__progress {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.step-nav__progress-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

/* ---------- Question / option cards ---------- */

.question-block {
  margin: 32px 0;
}

.option-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.option-card {
  flex: 0 1 calc(50% - 7px);
  background: var(--color-bg-elevated);
  border: 1px solid rgba(223, 237, 255, 0.25);
  border-radius: var(--radius-m);
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.option-card:hover,
.option-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  background: rgba(223, 237, 255, 0.08);
}

.option-card.is-selected {
  border-color: var(--color-accent);
  background: rgba(223, 237, 255, 0.14);
}

.option-card__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card__icon svg {
  width: 100%;
  height: 100%;
}

/* Foto-Kacheln sind quadratisch, damit die quadratischen Motive vollstaendig
   sichtbar bleiben und nicht oben/unten beschnitten werden. Der weisse
   Hintergrund passt zu den freigestellten Motiven auf weissem Grund. */
.option-card__icon--photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 0 14px;
  background: #FFFFFF;
  border-radius: var(--radius-s);
  overflow: hidden;
}

.option-card__icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-s);
}

.option-card__label {
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ---------- Logo ---------- */

.logo-block {
  display: flex;
  justify-content: center;
  margin: 36px 0;
}

.logo-block img {
  width: 180px;
  height: auto;
}

/* ---------- Trust bullets ---------- */

.trust-bullets {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.trust-bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--color-accent-grad-start) 0%, var(--color-accent-grad-end) 100%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center / contain no-repeat;
}

/* ---------- Project gallery ---------- */

.projects-section {
  margin: 40px 0;
}

.project-card {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--color-bg-elevated);
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.project-card__video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.project-card__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.project-card__body {
  padding: 16px 18px 18px;
}

.project-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.project-card__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.project-card__specs li {
  padding: 3px 0;
}

.project-card__specs li::before {
  content: "- ";
  color: var(--color-accent);
}

/* ---------- About text ---------- */

.about-block {
  margin: 32px 0;
  text-align: left;
}

.about-block p {
  font-size: 14px;
}

/* ---------- Load-more button ---------- */

.btn-load-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 16px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-s);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-load-more:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--color-text);
}

/* ---------- About block ---------- */

.about-block h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 14px;
  text-align: left;
}

.about-block p {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--color-text);
}

.about-bullets {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.about-bullets li::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--color-accent-grad-start) 0%, var(--color-accent-grad-end) 100%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center / contain no-repeat;
}

/* ---------- Google rating ---------- */

.rating-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-bg-elevated);
  border-radius: var(--radius-m);
  padding: 16px;
  margin: 32px 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.rating-badge__score {
  font-size: 20px;
  font-weight: 700;
}

.rating-badge__stars {
  color: var(--color-accent);
  letter-spacing: 2px;
}

/* ---------- Reviews block ---------- */

.reviews-block {
  margin: 32px 0;
}

.reviews-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.reviews-header__score {
  font-size: 20px;
  font-weight: 700;
}

.reviews-header__stars {
  color: var(--color-accent);
  font-size: 16px;
  letter-spacing: 1px;
}

.reviews-header__count {
  font-size: 13px;
  color: var(--color-text-muted);
}

.reviews-track {
  overflow: hidden;
  border-radius: var(--radius-l);
}

.reviews-cards {
  display: flex;
  transition: transform 0.3s ease;
}

.review-card {
  min-width: 100%;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-l);
  padding: 18px;
  box-sizing: border-box;
}

.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  color: #000;
}

.review-card__meta {
  flex: 1;
  min-width: 0;
}

.review-card__name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-card__date {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.review-card__glogo {
  flex-shrink: 0;
  line-height: 0;
}

.review-card__stars {
  color: var(--color-accent);
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.review-card__text {
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.review-card__more {
  background: none;
  border: none;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-top: 8px;
  display: block;
}

.reviews-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}

.reviews-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}

.reviews-nav-btn:hover {
  border-color: var(--color-accent);
}

.reviews-nav-pos {
  font-size: 13px;
  color: var(--color-text-muted);
  min-width: 40px;
  text-align: center;
}

/* ---------- Certification block ---------- */

.cert-block {
  margin: 40px 0;
  text-align: center;
}

.cert-block h2 {
  color: var(--color-accent);
}

.cert-badge-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.cert-badge {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
  color: var(--color-accent);
  padding: 10px;
}

/* ---------- Form ---------- */

.funnel-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.funnel-form input,
.funnel-form select,
.funnel-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
}

.funnel-form input::placeholder {
  color: var(--color-text-muted);
}

.funnel-form input.field--error {
  border-color: #e05555 !important;
}

.field-error {
  background: rgba(224, 85, 85, 0.1);
  border: 1px solid rgba(224, 85, 85, 0.4);
  border-radius: var(--radius-s);
  color: #e88;
  font-size: 13px;
  line-height: 1.55;
  padding: 10px 14px;
  margin-top: 10px;
}

.funnel-form label {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: -6px;
}

/* ---------- Form subtitle ---------- */

.form-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  margin: -8px 0 8px;
}

/* ---------- Checkbox consent ---------- */

.form-group--checkbox {
  margin-top: 4px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.checkbox-label span {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.checkbox-label span a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ---------- Buttons ---------- */

.btn-primary {
  display: block;
  width: 100%;
  padding: 16px;
  margin-top: 8px;
  border: none;
  border-radius: var(--radius-s);
  background: var(--color-brand);
  color: var(--color-accent);
  border: 1px solid rgba(223, 237, 255, 0.35);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Thank you / info step ---------- */

.info-step {
  /* Fuellt den Platz oberhalb des Footers, damit der Inhalt mittig steht. */
  flex: 1 1 auto;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 16px;
}

.info-step__icon {
  width: 64px;
  height: 64px;
}

/* ---------- Loading animation overlay ---------- */

.loading-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  z-index: 200;
  animation: fadeIn 0.25s ease;
}

.loading-svg {
  width: 120px;
  height: 120px;
  overflow: visible;
}

.loading-track {
  fill: none;
  stroke: rgba(223, 237, 255, 0.15);
  stroke-width: 3;
}

.loading-spinner {
  fill: none;
  stroke: #DFEDFF;
  stroke-width: 3;
  stroke-linecap: butt;
  stroke-dasharray: 188 64;
  transform-origin: 50px 50px;
  animation: spin-arc 1s linear infinite;
  transition: opacity 0.2s;
}

.loading-done {
  fill: none;
  stroke: #DFEDFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 251.3;
  transform-origin: 50px 50px;
  transform: rotate(-90deg);
  opacity: 0;
}

.loading-done.is-active {
  animation: draw-circle 0.55s ease forwards;
}

.loading-check {
  fill: none;
  stroke: #DFEDFF;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}

.loading-check.is-active {
  animation: draw-check 0.4s ease 0.1s forwards;
}

.loading-text {
  color: var(--color-text-muted);
  font-size: 16px;
  margin: 0;
}

@keyframes spin-arc {
  to { transform: rotate(360deg); }
}

@keyframes draw-circle {
  0%   { stroke-dasharray: 0 251.3;  opacity: 0; }
  15%  { stroke-dasharray: 10 241.3; opacity: 1; }
  100% { stroke-dasharray: 251.3 0;  opacity: 1; }
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

/* ---------- PLZ input step ---------- */

.plz-wrap {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plz-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.15s ease;
}

.plz-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.plz-input--error {
  border-color: #e05555 !important;
}

.plz-input::placeholder {
  color: var(--color-text-muted);
  letter-spacing: normal;
  font-size: 15px;
}

.plz-error {
  background: rgba(224, 85, 85, 0.1);
  border: 1px solid rgba(224, 85, 85, 0.4);
  border-radius: var(--radius-s);
  color: #e88;
  font-size: 13px;
  line-height: 1.55;
  padding: 12px 14px;
}

.plz-btn {
  margin-top: 4px;
}

/* ---------- List-layout options ---------- */

.question-subtitle {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
  margin: -8px 0 20px;
}

.option-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-list-item {
  width: 100%;
  padding: 18px 20px;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(223, 237, 255, 0.25);
  border-radius: var(--radius-m);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  text-align: left;
}

.option-list-item:hover,
.option-list-item:focus-visible {
  transform: translateX(4px);
  border-color: var(--color-accent);
  background: rgba(223, 237, 255, 0.08);
}

/* ---------- Exclude modal ---------- */

.exclude-overlay {
  position: fixed;
  inset: 0;
  padding-top: 60px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.exclude-sheet {
  background: var(--color-bg-elevated);
  border-top: 1px solid rgba(223, 237, 255, 0.25);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  width: 100%;
  max-width: var(--container-width);
  max-height: 100%;
  overflow-y: auto;
  padding: 32px 24px 48px;
  animation: slideUp 0.28s cubic-bezier(0.34, 1.1, 0.64, 1);
}

@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.exclude-sheet__back {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--color-accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 28px;
  padding: 0;
}

.exclude-sheet__heading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--color-accent);
}

.exclude-sheet__subheading {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 24px 0 10px;
}

.exclude-sheet__paragraph {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 14px;
  line-height: 1.65;
}

.exclude-sheet__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.exclude-sheet__contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.exclude-sheet__contact a:hover {
  text-decoration: underline;
}

.exclude-sheet__hint {
  margin-top: 28px;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  background: rgba(223, 237, 255, 0.08);
  border: 1px solid rgba(223, 237, 255, 0.2);
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ---------- Footer ---------- */

/* Mindestabstand zum Footer. `margin-top: auto` unten verteilt nur den
   UEBRIGEN Platz — auf hohen Schritten (Kontaktformular) bleibt keiner uebrig
   und der Footer wuerde sonst direkt am Button kleben. Diese Regel trifft das
   Element unmittelbar vor dem Footer und garantiert den Abstand unabhaengig
   von der Bildschirmhoehe. */
.funnel-container > *:nth-last-child(2) {
  margin-bottom: 32px;
}

.funnel-footer {
  /* Kein fixed/sticky: der Footer gehoert zum Schritt und wird auf kurzen
     Schritten durch den freien Platz an den unteren Rand geschoben. */
  position: static;
  margin: auto -20px 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 14px 20px;
  font-size: 12px;
  background: var(--color-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.funnel-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.funnel-footer a:hover {
  color: var(--color-accent);
}

/* ---------- Lebenslauf-Upload ---------- */

.upload-wrap {
  margin-top: 8px;
}

/* Das echte Dateifeld bleibt unsichtbar - geklickt wird die ganze Kachel. */
.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.upload-dropzone {
  border: 2px dashed rgba(223, 237, 255, 0.32);
  border-radius: var(--radius-l);
  background: var(--color-bg-elevated);
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible,
.upload-dropzone.is-dragover {
  border-color: var(--color-accent);
  background: rgba(223, 237, 255, 0.06);
}

.upload-dropzone.is-filled {
  border-style: solid;
  border-color: var(--color-accent);
}

.upload-dropzone.is-invalid {
  border-color: rgba(224, 85, 85, 0.75);
  background: rgba(224, 85, 85, 0.1);
}

.upload-dropzone__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
}

.upload-dropzone__icon svg {
  width: 100%;
  height: 100%;
}

.upload-dropzone__title {
  color: var(--color-accent);
  font-size: 15px;
  font-weight: 600;
}

.upload-dropzone__drag {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-top: 4px;
}

/* Auf Touch-Geraeten gibt es nichts zu ziehen. */
@media (hover: none) {
  .upload-dropzone__drag {
    display: none;
  }
}

.upload-dropzone__file {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
}

.upload-dropzone__size {
  color: var(--color-text-muted);
  font-size: 12px;
  margin-top: 2px;
}

.upload-remove {
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.upload-remove:hover {
  color: var(--color-accent);
}

.upload-hint {
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
  margin: 10px 0 18px;
}

.upload-error {
  color: #E05555;
  font-size: 13px;
  text-align: center;
  margin: 10px 0 18px;
}

.upload-skip {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 8px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.upload-skip:hover {
  color: var(--color-accent);
}

.upload-skip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Startscreen ---------- */

.intro-block {
  margin-top: 12px;
}

.intro-title {
  font-size: 23px;
  line-height: 1.3;
  margin: 0 0 16px;
}

.intro-subtitle {
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 0 0 28px;
}

.intro-bullets {
  margin-bottom: 32px;
}

/* Bei zweizeiligen Punkten soll der Haken oben stehen, nicht mittig. */
.intro-bullets li {
  align-items: flex-start;
}

.intro-bullets li::before {
  margin-top: 2px;
}

/* Benannte Abschnitte auf dem Startscreen */
.intro-section {
  margin-bottom: 26px;
}

.intro-section-title {
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  margin: 0 0 12px;
}

/* Die Liste im Abschnitt bringt keinen eigenen Abstand mit - den setzt
   der Abschnitt selbst. */
.intro-section .intro-bullets {
  margin-bottom: 0;
}

/* Variante mit Punkt statt Haken (Anforderungen). Der Punkt ist kleiner
   als der Haken, deshalb gleicht das Padding die linke Kante aus. */
.intro-bullets--dot li {
  gap: 15px;
  padding-left: 6px;
}

.intro-bullets--dot li::before {
  width: 7px;
  height: 7px;
  margin-top: 8px;
  background: var(--color-accent-grad-end);
  -webkit-mask: none;
  mask: none;
}

.intro-outro {
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  margin: 30px 0 24px;
}

.intro-footnote {
  font-size: 12px;
  text-align: center;
  margin: 12px 0 0;
}

/* ---------- Ladezustand im Absende-Button ---------- */

.btn-primary.is-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Der deaktivierte Zustand soll hier nicht ausgrauen - der Button
     arbeitet ja gerade sichtbar. */
  opacity: 1;
}

.btn-spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(223, 237, 255, 0.3);
  border-top-color: var(--color-accent);
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}