/* Startseite des Handbuchs (Rollenauswahl) */
.hero { min-height: 100vh; display: flex; flex-direction: column; }
.hero .header-inner { padding-bottom: 30px; }
.pick { max-width: var(--maxw); margin: -22px auto 0; padding: 0 28px 60px; flex: 1; }
.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-md); padding: 30px 28px; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
  position: relative; overflow: hidden;
}
.pcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
}
.pcard.sec::before { background: linear-gradient(90deg, #0f6b35, #6bbf8c); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.pcard .pico { font-size: 2rem; width: 58px; height: 58px; border-radius: 15px; background: var(--blue-50);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pcard.sec .pico { background: var(--success-bg); }
.pcard h2 { font-size: 1.5rem; margin: 0 0 8px; }
.pcard p { color: var(--ink-soft); margin: 0 0 18px; font-size: .98rem; }
.pcard ul { margin: 0 0 20px; padding-left: 18px; color: var(--ink-soft); font-size: .92rem; }
.pcard li { margin: 4px 0; }
.pcard .go { margin-top: auto; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 8px; }
.pcard.sec .go { color: #0f6b35; }
.startcard {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 18px 22px; margin-bottom: 22px;
  text-decoration: none; color: var(--ink); position: relative; overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
}
.startcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
}
.startcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--blue-100); }
.startcard .s-ico {
  font-size: 1.6rem; width: 50px; height: 50px; border-radius: 13px; flex: none;
  background: var(--gold-soft); display: flex; align-items: center; justify-content: center;
}
.startcard .s-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.startcard .s-text b { font-family: var(--serif); font-size: 1.15rem; }
.startcard .s-sub { color: var(--ink-soft); font-size: .9rem; }
.startcard .s-go { margin-left: auto; font-weight: 700; color: var(--blue); font-size: 1.3rem; flex: none; }
.howto { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; margin-top: 26px; box-shadow: var(--shadow-sm); }
.howto h3 { margin: 0 0 6px; font-size: 1.15rem; }
.howto p { margin: 6px 0; color: var(--ink-soft); }
@media (max-width: 760px){ .pick-grid { grid-template-columns: 1fr; } }