/* Homepage redesign — Direction 1 "Vertrauen zuerst" (2026-06-16).
   Replaces the prior Direction-B layout. Uses the shared design tokens
   (/shared/tokens.css) + refzins r5.2 component language (16px cards, 13px
   red CTA, neutral trust marks w/ subtitle, FAQ accordion). Mobile-first,
   media-query scoped. The upload form + processing classes are preserved
   verbatim from the prior build (homepage-app.js drives them by id). */

.home-page {
  --home-max: 1080px;
  --home-content: 720px;
  --home-upload-col: 420px;
  --home-amber: #c89400;
  --home-amber-tx: #8a6400;
  --home-amber-bg: #fefbf0;
  background: #fff;
}

/* ── HERO ───────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(180deg, #faf8f5 0%, #fff 100%);
}
.home-hero__inner {
  box-sizing: border-box;
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 32px 18px 24px;
  text-align: center;
}
@media (min-width: 1024px) {
  .home-hero__inner { padding: 56px 40px 40px; text-align: start; }
}
.home-hero__grid { display: grid; width: 100%; gap: 26px; align-items: start; }
.home-hero__aside { min-width: 0; }
@media (min-width: 1024px) {
  .home-hero__grid {
    grid-template-columns: 1fr var(--home-upload-col);
    gap: 48px; align-items: center;
  }
}

.home-h1 {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700; line-height: 1.1;
  color: var(--ink); margin: 0 0 10px;
}
.home-h1 em { color: var(--red); font-style: italic; }
@media (min-width: 1024px) { .home-h1 { font-size: 48px; margin-bottom: 14px; } }

.home-sub {
  font-size: 15px; line-height: 1.55; color: var(--ink-3);
  max-width: 340px; margin: 0 auto 18px;
}
@media (min-width: 1024px) {
  .home-sub { font-size: 18px; max-width: 470px; margin: 0 0 24px; }
}

/* ── UPLOAD CARD (form — classes preserved) ─────────── */
.home-upload-card {
  max-width: 100%; margin: 0 auto; background: #fff;
  border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 18px; text-align: left;
}
@media (min-width: 1024px) {
  .home-upload-card { padding: 22px; }
  #home-hero-form, #home-processing { width: 100%; }
}
.home-drop-zone {
  position: relative; border: 2px dashed #d8d4ce; border-radius: 11px;
  background: #fafaf8; padding: 24px 16px; margin-bottom: 12px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
@media (min-width: 1024px) { .home-drop-zone { padding: 30px 18px; } }
#drop-zone .drop-file-input, #drop-zone #file-input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
.home-drop-zone.dragover { border-color: var(--red); background: #fff8f8; }
.home-drop-zone.has-file .home-drop-default { display: none; }
.home-drop-zone:not(.has-file) .home-drop-selected { display: none; }
.home-drop-icon { font-size: 24px; display: block; margin-bottom: 8px; }
.home-drop-title { font-size: 15px; font-weight: 600; color: #333; }
.home-drop-sub { font-size: 12px; color: #999; margin-top: 4px; }
.home-drop-selected { font-size: 14px; color: #333; }
.home-drop-selected .fname { font-weight: 600; word-break: break-all; }

.home-field-error { display: none; color: var(--red); font-size: 13px; margin-top: 10px; }
.home-field-error.visible, .field-error.visible { display: block; }

@keyframes home-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
#drop-zone.shake { animation: home-shake .4s ease; }

.home-submit-btn {
  width: 100%; margin-top: 0; min-height: 54px; border-radius: 13px;
  background: var(--red); color: #fff; font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; cursor: pointer; box-shadow: 0 6px 18px rgba(204, 0, 0, .18);
}
.home-submit-btn:disabled { opacity: .75; cursor: not-allowed; }

/* ── PROCESSING STATE (preserved) ───────────────────── */
#home-processing[hidden] { display: none !important; }
.home-hero--processing #home-hero-form { display: none; }
.home-hero--processing #home-processing { display: block !important; }
.home-processing-wrap { text-align: center; padding: 90px 18px 40px; }
@media (min-width: 1024px) { .home-processing-wrap { padding: 140px 40px 60px; } }
.home-spinner {
  width: 48px; height: 48px; border: 3px solid #eee; border-top-color: var(--red);
  border-radius: 50%; margin: 0 auto 24px; animation: home-spin .8s linear infinite;
}
@keyframes home-spin { to { transform: rotate(360deg); } }
.home-status-area { position: relative; height: 22px; margin-bottom: 20px; }
.home-status-msg {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  font-size: 15px; font-weight: 600; color: var(--ink-2); transition: opacity .4s ease;
}
.home-progress-track--processing {
  width: 200px; height: 4px; margin: 0 auto; background: #eee;
  border-radius: 4px; overflow: hidden;
}
@media (min-width: 1024px) { .home-progress-track--processing { width: 320px; height: 5px; } }
.home-progress-track--processing .home-progress-fill {
  height: 100%; width: 0%; background: var(--red); border-radius: 4px; transition: width .4s ease;
}

/* ── TRUST RAIL (refzins rz2-trust language) ────────── */
.home-trust { max-width: var(--home-max); margin: 0 auto; padding: 22px 18px 30px; }
@media (min-width: 1024px) { .home-trust { padding: 22px 40px 36px; } }
.home-trust__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (min-width: 1024px) { .home-trust__inner { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.home-tmark { display: flex; gap: 11px; align-items: flex-start; }
.home-tmark__ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px;
  background: var(--paper-2); display: flex; align-items: center; justify-content: center;
}
.home-tmark__ic svg { width: 19px; height: 19px; color: var(--ink-2); }
.home-tmark__t { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.home-tmark__s { font-size: 12px; color: var(--ink-4); margin-top: 2px; line-height: 1.3; }

/* ── SECTION SCAFFOLD ───────────────────────────────── */
.home-sec { max-width: var(--home-max); margin: 0 auto; padding: 36px 18px; }
@media (min-width: 1024px) { .home-sec { padding: 46px 40px; } }
.home-sec--paper {
  max-width: none; background: var(--paper);
  border-top: 1px solid #ebe7e0; border-bottom: 1px solid #ebe7e0;
}
.home-sec--paper > * { max-width: var(--home-max); margin-left: auto; margin-right: auto; }
.home-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: #a59c8c; text-align: center; margin: 0 auto 8px;
}
.home-sec__title {
  font-family: var(--font-display); font-size: 24px; font-weight: 700;
  text-align: center; color: var(--ink); margin: 0 auto 6px;
}
@media (min-width: 1024px) { .home-sec__title { font-size: 28px; } }
.home-sec__lead {
  font-size: 14px; color: var(--ink-3); text-align: center;
  max-width: 600px; margin: 0 auto 26px; line-height: 1.55;
}
@media (min-width: 1024px) { .home-sec__lead { font-size: 15px; } }

/* ── PRESS BAND ─────────────────────────────────────── */
.home-press2__grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: var(--home-content); margin: 0 auto; }
@media (min-width: 700px) { .home-press2__grid { grid-template-columns: 1fr 1fr; } }
.home-pcard {
  display: block; background: #fff; border: 1px solid var(--rule);
  border-radius: 14px; padding: 18px 20px; text-align: left;
  box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s;
}
.home-pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.home-pcard__src {
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 7px; display: flex; align-items: center; gap: 6px;
}
.home-pcard__src svg { width: 12px; height: 12px; flex: none; }
.home-pcard__head {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  line-height: 1.3; color: var(--ink); margin: 0 0 6px;
}
.home-pcard__gloss { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin: 0; }
.home-pcard__link { font-size: 12px; color: var(--blue); font-weight: 600; margin-top: 9px; display: inline-block; }
.home-press2__disc { text-align: center; font-size: 11.5px; color: #b3aca0; margin: 18px auto 0; max-width: 560px; }

/* ── EXAMPLE RESULT (mirrors /ergebnis/) ────────────── */
.home-ex { max-width: var(--home-content); margin: 0 auto; }
.home-ex__card {
  background: #fff; border: 1px solid var(--rule); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-md);
}
.home-ex__label {
  display: flex; align-items: center; gap: 7px; justify-content: center;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; color: #b08a3a;
  background: #fdf8ee; border-bottom: 1px solid #f2e8d4; padding: 8px; text-align: center;
}
.home-ex__label svg { width: 13px; height: 13px; flex: none; }
/* dual-bucket hero */
.home-ex__hero { padding: 18px 20px 16px; border-bottom: 1px solid #efeae2; }
.home-ex__heroline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.home-ex__amt { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--red); line-height: 1; }
.home-ex__amtlabel { font-size: 13px; font-weight: 600; color: #a71818; }
.home-ex__herosub { font-size: 12px; color: var(--ink-4); margin-top: 4px; }
.home-ex__buckets { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
.home-ex__bucket { flex: 1; min-width: 150px; border: 1px solid #eee; border-radius: 9px; padding: 9px 11px; }
.home-ex__bucket--amber { border-left: 3px solid var(--home-amber); background: #fffdf6; }
.home-ex__bucket--green { border-left: 3px solid var(--green); background: #f7fbf8; }
.home-ex__bt { font-size: 13px; font-weight: 700; }
.home-ex__bucket--amber .home-ex__bt { color: var(--home-amber-tx); }
.home-ex__bucket--green .home-ex__bt { color: #226b2f; }
.home-ex__bs { font-size: 11px; color: var(--ink-4); margin-top: 1px; line-height: 1.3; }
/* finding cards */
.home-ex__rows { padding: 10px; }
.home-ex__row { border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.home-ex__row:last-child { margin-bottom: 0; }
.home-ex__row--red { border-left: 3px solid var(--red); }
.home-ex__row--amber { border-left: 3px solid var(--home-amber); }
.home-ex__row--green { border-left: 3px solid var(--green); }
.home-ex__rowhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; }
.home-ex__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.home-ex__reason { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.home-ex__chf { font-size: 14px; font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.home-ex__chev { color: #bbb; font-size: 12px; font-weight: 400; }
.home-ex__row--red .home-ex__chf { color: var(--red); }
.home-ex__row--amber .home-ex__chf { color: var(--home-amber); }
.home-ex__row--green .home-ex__chf { color: var(--ink-4); font-weight: 600; }
.home-ex__chf--ok { color: var(--green) !important; }
.home-ex__rowbody { padding: 0 13px 12px 16px; border-top: 1px solid #f5f2ec; background: #fcfbf9; }
.home-ex__detail { font-size: 12.5px; color: var(--ink-3); padding-top: 9px; line-height: 1.45; margin: 0; }
.home-ex__action { font-size: 12px; color: #a71818; font-weight: 600; margin: 6px 0 0; }
/* evidence pack strip */
.home-ex__pack { background: #faf8f4; border-top: 1px solid var(--rule); padding: 14px 16px 16px; }
.home-ex__packhead { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #9a8b6a; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.home-ex__packhead svg { width: 14px; height: 14px; flex: none; }
.home-ex__packgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-ex__doc { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 9px 11px; }
.home-ex__doc svg { width: 17px; height: 17px; color: #b3924a; flex: none; }
.home-ex__docn { font-size: 12.5px; font-weight: 600; color: #333; line-height: 1.15; }
.home-ex__doct { font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }
@media (max-width: 1023px) { .home-ex__packgrid { grid-template-columns: 1fr; } }

/* ── K-TIPP CREDIBILITY BAND ─────────────────────────── */
.home-cred { background: #fbf8f2; border-top: 1px solid #ebe7e0; border-bottom: 1px solid #ebe7e0; }
.home-cred__inner { max-width: var(--home-content); margin: 0 auto; padding: 36px 18px; text-align: center; }
@media (min-width: 1024px) { .home-cred__inner { padding: 42px 40px; } }
.home-cred__k {
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: #b08a3a; margin: 0 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.home-cred__k svg { width: 15px; height: 15px; }
.home-cred__quote { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ink); margin: 0 0 12px; }
@media (min-width: 1024px) { .home-cred__quote { font-size: 25px; } }
.home-cred__quote b { color: var(--red); }
.home-cred__src { font-size: 13px; color: var(--ink-3); }
.home-cred__src a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: #b8ceee; }
.home-cred__disc { font-size: 12px; color: #9a9286; margin-top: 6px; }

/* ── HOW IT WORKS ───────────────────────────────────── */
.home-steps { display: grid; grid-template-columns: 1fr; gap: 22px; max-width: 360px; margin: 0 auto; }
@media (min-width: 1024px) { .home-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--home-content); } }
.home-step { text-align: center; }
.home-step__n {
  width: 40px; height: 40px; border-radius: 50%; background: #fff;
  border: 2px solid var(--red); color: var(--red); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 13px;
}
.home-step__t { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 5px; }
.home-step__d { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ── FAQ (refzins rz2-faq accordion) ────────────────── */
.home-faq { max-width: var(--home-content); margin: 22px auto 0; }
.home-faq__item { border-bottom: 1px solid var(--rule); }
.home-faq__q {
  list-style: none; cursor: pointer; padding: 16px 0; font-size: 15px; font-weight: 600;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__q::after { content: "+"; color: var(--red); font-weight: 400; font-size: 22px; line-height: 1; transition: transform .15s; }
.home-faq__item[open] .home-faq__q::after { transform: rotate(45deg); }
.home-faq__a { font-size: 14px; color: var(--ink-3); line-height: 1.6; padding: 0 0 18px; margin: 0; }

/* ── CROSS-SELL (demoted, richer cards) ─────────────── */
.home-cross2 { max-width: var(--home-max); margin: 0 auto; padding: 38px 18px 50px; }
@media (min-width: 1024px) { .home-cross2 { padding: 42px 40px 58px; } }
.home-cross2__grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: var(--home-content); margin: 22px auto 0; }
@media (min-width: 700px) { .home-cross2__grid { grid-template-columns: 1fr 1fr; } }
.home-xcard {
  position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  padding: 20px; display: block; text-align: left; transition: box-shadow .15s, transform .15s;
}
.home-xcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.home-xcard__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 13px; }
.home-xcard__ic svg { width: 21px; height: 21px; }
.home-xcard__label { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 1.2px; margin-bottom: 5px; }
.home-xcard__title { font-size: 17px; font-weight: 700; color: #111; margin: 0 0 7px; line-height: 1.2; }
.home-xcard__body { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 14px; }
.home-xcard__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; border-radius: 10px; padding: 9px 15px; }
.home-xcard__sub { font-size: 11px; color: var(--ink-4); margin-top: 8px; }
.home-xcard--rz { border-top: 3px solid var(--blue); }
.home-xcard--rz .home-xcard__ic { background: var(--blue-bg); color: var(--blue); }
.home-xcard--rz .home-xcard__label { color: var(--blue); }
.home-xcard--rz .home-xcard__cta { color: var(--blue); background: var(--blue-bg); }
.home-xcard--pro { border: 1px solid #d8c9a6; background: linear-gradient(180deg, #fffdf8, #fff); box-shadow: 0 4px 18px rgba(180, 140, 40, .10); }
.home-xcard--pro .home-xcard__ic { background: #1f2937; color: #f1c878; }
.home-xcard--pro .home-xcard__label { color: #9a7b2e; }
.home-xcard--pro .home-xcard__price { font-size: 12px; font-weight: 700; color: #9a7b2e; margin-bottom: 7px; }
.home-xcard--pro .home-xcard__cta { color: #fff; background: #1f2937; }
.home-xcard__flag {
  position: absolute; top: -10px; right: 16px; font-size: 10px; font-weight: 700;
  letter-spacing: .4px; color: #fff; background: #1f2937; border-radius: 999px; padding: 3px 10px;
}