/* ==========================================================================
   MyLastKey — Guide download page (built on style-index.css tokens)
   ========================================================================== */

.ratgeber-hero {
  min-height: 100vh;
  background:
    radial-gradient(circle at 70% 30%, rgba(61, 217, 199, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(199, 154, 69, 0.12) 0%, transparent 45%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}

.ratgeber-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; position: relative; z-index: 1; }
.ratgeber-text { color: #fff; }

.ratgeber-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(61, 217, 199, 0.14);
  border: 1px solid rgba(61, 217, 199, 0.35);
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  color: var(--teal-400);
  margin-bottom: var(--space-5);
}
.ratgeber-badge i { color: var(--teal-400); }

.ratgeber-title { font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.2; margin-bottom: var(--space-5); color: #fff; }
.ratgeber-title .highlight {
  background: linear-gradient(120deg, var(--teal-400), var(--gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ratgeber-quote {
  font-size: 19px; font-style: italic;
  color: rgba(226, 232, 238, 0.92);
  padding-left: var(--space-4);
  border-left: 4px solid var(--teal-500);
  margin-bottom: var(--space-6);
}

.ratgeber-description { color: rgba(226, 232, 238, 0.78); font-size: 16px; line-height: 1.8; margin-bottom: var(--space-4); }

.ratgeber-features { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); }
.ratgeber-feature {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  padding: 11px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.ratgeber-feature i { color: var(--teal-400); font-size: 16px; }
.ratgeber-feature span { color: rgba(255, 255, 255, 0.9); font-size: 14.5px; font-weight: 600; }

.ratgeber-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.btn-ratgeber {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 32px;
  border-radius: var(--radius-pill);
  font-size: 15.5px;
  font-weight: 700;
  transition: all var(--dur-fast) var(--ease-out);
  cursor: pointer;
  border: none;
}
.btn-ratgeber-primary { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); color: #fff; box-shadow: var(--shadow-glow-teal); }
.btn-ratgeber-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(36, 172, 156, 0.4); }
.btn-ratgeber-secondary { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ratgeber-secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: var(--teal-400); }

/* Book image */
.ratgeber-image { position: relative; display: flex; justify-content: center; align-items: center; }
.book-container { position: relative; perspective: 1500px; }
.book-3d { position: relative; transform-style: preserve-3d; transform: rotateY(-15deg) rotateX(5deg); transition: transform 0.5s ease; }
.book-3d:hover { transform: rotateY(-5deg) rotateX(2deg); }
.book-cover { width: 320px; height: auto; border-radius: 8px; box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1); }
.book-shine {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 55%, transparent 70%);
  border-radius: 8px;
  pointer-events: none;
}
.book-badge {
  position: absolute; top: -20px; right: -20px;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
  color: #fff;
  padding: 16px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 10px 28px rgba(185, 134, 47, 0.4);
  animation: mlk-pulse 2s infinite;
}
@keyframes mlk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.floating-element {
  position: absolute;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  display: flex; align-items: center; gap: 12px;
  animation: mlk-float 4s ease-in-out infinite;
}
.floating-element i { font-size: 20px; }
.floating-element span { font-weight: 600; color: #fff; font-size: 14px; }
.float-1 { top: 10%; right: -10%; animation-delay: 0s; }
.float-2 { bottom: 20%; left: -15%; animation-delay: 1s; }
@keyframes mlk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Password request form */
.request-section { background: var(--surface); padding: var(--space-9) 0; }
.request-container { max-width: 700px; margin: 0 auto; text-align: center; }
.request-section h2 { margin-bottom: var(--space-4); }
.request-section .subtitle { color: var(--muted-600); margin-bottom: var(--space-7); font-size: 16px; }

.request-form { background: var(--cream-100); padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--border-100); text-align: left; }
.form-group { margin-bottom: var(--space-5); }
.form-group label { display: block; font-weight: 700; color: var(--ink-700); margin-bottom: var(--space-2); font-size: 14.5px; }
.form-group label .required { color: var(--danger-600); }

.form-input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border-200);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  transition: all var(--dur-fast) ease;
  background: var(--surface);
  color: var(--ink-900);
}
.form-input:focus { outline: none; border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(36, 172, 156, 0.12); }
.form-input::placeholder { color: var(--muted-400); }
.form-note { font-size: 13px; color: var(--muted-600); margin-top: 6px; }

.form-submit {
  width: 100%;
  padding: 17px;
  background: linear-gradient(135deg, var(--teal-500), var(--teal-700));
  border: none;
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.form-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-teal); }

.form-success { display: none; text-align: center; padding: var(--space-6); }
.form-success.show { display: block; }
.form-success i { font-size: 52px; color: var(--teal-600); margin-bottom: var(--space-4); }
.form-success h3 { margin-bottom: var(--space-3); }
.form-success p { color: var(--muted-600); }

/* Footer */
.ratgeber-footer { background: var(--navy-950); padding: var(--space-6) 0; text-align: center; }
.ratgeber-footer .footer-links { display: flex; justify-content: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ratgeber-footer .footer-links a { color: rgba(226, 232, 238, 0.62); font-size: 14px; font-weight: 600; transition: color var(--dur-fast) ease; }
.ratgeber-footer .footer-links a:hover { color: var(--teal-400); }
.ratgeber-footer .copyright { color: rgba(226, 232, 238, 0.4); font-size: 13px; }

@media (max-width: 968px) {
  .ratgeber-content { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; }
  .ratgeber-quote { border-left: none; padding-left: 0; border-top: 3px solid var(--teal-500); padding-top: var(--space-4); }
  .ratgeber-features, .ratgeber-cta { justify-content: center; }
  .ratgeber-image { order: -1; }
  .book-cover { width: 260px; }
  .floating-element { display: none; }
}
@media (max-width: 480px) {
  .ratgeber-hero { padding: 100px 0 60px; }
  .book-cover { width: 220px; }
  .ratgeber-cta { flex-direction: column; }
  .btn-ratgeber { width: 100%; justify-content: center; }
  .request-form { padding: var(--space-5); }
}