/* seite-report.css — Anforderungsseite (report.html) und Freischaltung
   (report-fertig.html) des Engpass-Reports.

   Eigenheit dieser Seite: Sie hat genau EIN Ziel, deshalb steht der Bogen im
   Held und nicht am Seitenende. Die rechte Spalte trägt das echte Objekt statt
   einer Illustration, darunter die drei Zahlen, die die Frage "was kriege ich
   dafür" vor dem Absenden beantworten.

   Bühnenfolge: Held WEISS, "Drei Seiten daraus" TINT, "Warum die E-Mail" DUNKEL,
   Finale DUNKEL. Zwei dunkle Nachbarn wären ein Bruch der Regel aus DESIGN.md,
   deshalb liegt zwischen ihnen keine Naht, sondern ein durchgehender Verlauf:
   .rp-warum endet auf --bg-deep und das Finale beginnt dort. Optisch ist es EIN
   dunkler Akt mit zwei Kapiteln, kein Wechsel.
*/

/* ---------- Held ---------- */

.rp-held { padding-bottom: clamp(48px, 7vh, 90px); }

.rp-grid {
  position: relative;
  z-index: var(--z-inhalt);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}

/* Kleiner als der übliche Unterheld-Titel (dort clamp bis 3.9rem): Auf dieser
   Seite ist nicht die Headline das Ziel, sondern der Bogen darunter. Gemessen
   bei 1280x900: mit 3.4rem endete der Absende-Knopf bei 1097 px und lag damit
   unter dem Fold. */
.rp-text h1 {
  max-width: 19ch;
  font-size: clamp(2.05rem, 3.1vw, 2.7rem);
  line-height: 1.08;
  margin-bottom: 14px;
}

.rp-text .hero-lead {
  max-width: 38rem;
  font-size: 1rem;
  margin-bottom: clamp(20px, 2.4vh, 28px);
}

.rp-marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol);
}

.rp-marke::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat,
    var(--petrol);
}

/* ---------- Formular ---------- */

.rp-form {
  display: grid;
  gap: clamp(14px, 1.5vw, 18px);
  max-width: 34rem;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: 22px;
  border: 1px solid var(--linie);
  background: var(--bg);
  box-shadow: var(--karte-schatten);
}

.rp-zeile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Feld-Grundstile bewusst hier und nicht in main.css: jede Formularseite trägt
   ihre eigenen (Muster seite-kontakt.css, seite-potenzialanalyse.css). Die
   Fehler- und Danke-Darstellung dagegen ist geteilt und steht in main.css. */
.rp-form .feld {
  display: grid;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}

.rp-form .feld label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.rp-form .optional { color: var(--ink-leise); font-weight: 400; }

.rp-form input[type="text"],
.rp-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: var(--bg-tint);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.rp-form input::placeholder { color: var(--ink-leise); }

.rp-form input[type="text"]:hover,
.rp-form input[type="email"]:hover { border-color: rgba(14, 94, 99, 0.3); }

.rp-form input[type="text"]:focus-visible,
.rp-form input[type="email"]:focus-visible {
  outline: none;
  border-color: var(--petrol);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(14, 94, 99, 0.14);
}

.rp-haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed var(--linie);
  background: rgba(239, 246, 246, 0.5);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.rp-haken input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--petrol);
  cursor: pointer;
}

.rp-haken:hover { border-color: rgba(14, 94, 99, 0.32); }

.rp-knopf { justify-content: center; width: 100%; }

.rp-hinweis {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-leise);
}

.rp-hinweis a { color: var(--petrol); }

.rp-fehlerkasten {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(179, 38, 30, 0.28);
  background: rgba(179, 38, 30, 0.06);
  color: #8c2118;
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---------- Objekt-Spalte ---------- */

.rp-objekt {
  position: sticky;
  top: 116px;
  display: grid;
  gap: clamp(20px, 2.6vw, 30px);
}

.rp-figur {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-tint);
  box-shadow: var(--karte-schatten);
}

.rp-figur img { display: block; width: 100%; height: auto; }

.rp-zahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.rp-zahlen > div {
  padding: 16px 14px;
  border-top: 1px solid var(--linie);
}

.rp-zahlen dt {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--petrol);
  letter-spacing: -0.02em;
}

.rp-zahlen dd {
  margin: 8px 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-leise);
}

/* ---------- Drei Seiten daraus (TINT) ---------- */

.rp-inhalt {
  background: var(--bg-tint);
  padding: clamp(72px, 10vh, 128px) 0;
}

.rp-inhalt h2 { max-width: 20ch; margin-bottom: clamp(32px, 4vh, 48px); }

.rp-blaetter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.rp-blatt {
  margin: 0;
  display: grid;
  gap: 16px;
  align-content: start;
}

.rp-blatt img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Papier braucht eine Kante, sonst schwimmt eine helle Seite auf der
     getönten Bühne. Der Schatten macht daraus ein Objekt. */
  box-shadow:
    0 1px 2px rgba(11, 27, 29, 0.06),
    0 14px 34px rgba(11, 27, 29, 0.12);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.rp-blatt:hover img { transform: translateY(-6px); }

.rp-blatt figcaption {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.rp-blatt figcaption strong { color: var(--ink); display: block; }

.rp-nachsatz {
  margin: clamp(28px, 3.4vh, 40px) 0 0;
  max-width: 52ch;
  color: var(--ink-leise);
}

/* ---------- Warum die E-Mail (DUNKEL) ---------- */

.rp-warum {
  position: relative;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--dunkel-ink);
  padding: clamp(76px, 11vh, 136px) 0 clamp(76px, 11vh, 136px);
}

.rp-warum h2 { color: var(--dunkel-ink); max-width: 18ch; margin-bottom: clamp(34px, 4vh, 52px); }
.rp-warum h2 em { color: var(--mint-hell); font-style: normal; }

.rp-klartext {
  position: relative;
  z-index: var(--z-inhalt);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 46px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-klartext li { border-top: 1px solid var(--linie-dunkel); padding-top: 20px; }

.rp-klartext h3 {
  margin: 0 0 10px;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--dunkel-ink);
}

.rp-klartext p { margin: 0; color: var(--dunkel-soft); line-height: 1.65; }

/* ---------- Freischaltung (report-fertig.html) ---------- */

.rp-download { display: grid; gap: 12px; max-width: 26rem; }

.rp-download .rp-knopf[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.rp-naechste {
  margin: clamp(26px, 3vh, 36px) 0 0;
  max-width: 44ch;
  color: var(--ink-soft);
}

.rp-naechste a { color: var(--petrol); }

/* ---------- Schmaler ---------- */

@media (max-width: 1000px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Objekt vor das Formular: auf dem Handy will man erst sehen, was man bekommt.
     Auf dem Desktop steht der Bogen links, weil dort beides nebeneinander liegt. */
  .rp-objekt { position: static; order: -1; max-width: 460px; }
  .rp-text h1 { max-width: 20ch; }
  .rp-blaetter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-blatt:last-child { grid-column: span 2; max-width: 50%; }
  .rp-klartext { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 640px) {
  .rp-form { padding: 20px; border-radius: 18px; }
  .rp-zeile { grid-template-columns: minmax(0, 1fr); }
  .rp-blaetter { grid-template-columns: minmax(0, 1fr); }
  .rp-blatt:last-child { grid-column: auto; max-width: none; }
  .rp-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .rp-zahlen > div { padding: 12px 8px; }
  .rp-zahlen dd { font-size: 0.78rem; }
}