.pl { background: linear-gradient(#bfe6ff, #f6efe2 340px); }
.pl-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; background: #12355b; color: #fff; }
.pl-logo { font-weight: 800; font-size: 1.5rem; } .pl-sub { opacity: 0.8; flex: 1; }
.pl-back { color: #ffd23f; font-weight: 700; }
.pl-main { max-width: 1100px; margin: 0 auto; padding: 18px 16px 40px; }
.pl-card { background: #fffaf0; border: 3px solid #12355b; border-radius: 14px; padding: 14px 18px; box-shadow: 0 5px 0 #12355b; }
.pl-card h2 { margin: 0 0 8px; font-size: 1.2rem; }
.pl-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1.6fr; align-items: start; }
.pl-status { grid-row: span 2; } .pl-tavern { grid-column: 2; }
.pl-bar { height: 12px; border-radius: 6px; background: #e3ddcf; overflow: hidden; margin: 2px 0 8px; }
.pl-bar > div { height: 100%; background: #2f8a4f; } .pl-bar.en > div { background: #1d6fb8; }
.pl-stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0; }
.pl-quest { border: 2px solid #d8d1c2; border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: #fff; }
.pl-quest h3 { margin: 0 0 4px; font-size: 1.05rem; }
.pl-hint { display: flex; gap: 14px; flex-wrap: wrap; font-weight: 700; margin: 6px 0; }
.pl-hint .bad { color: #d7263d; } .pl-hint .good { color: #2f8a4f; }
.pl-plan { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.pl-plan select { font: inherit; padding: 4px 6px; border: 2px solid #b9b3a6; border-radius: 8px; }
.pl-log { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.pl-log li { background: #fff; border-left: 4px solid #12355b; padding: 4px 8px; border-radius: 4px; }
.pl-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px dashed #e3ddcf; padding: 6px 0; }
.pl-item b.eq::after { content: " ✓"; color: #2f8a4f; }
.pl-msg { padding: 10px 14px; border-radius: 10px; font-weight: 700; background: #e7f6ec; border: 2px solid #2f8a4f; margin-bottom: 14px; }
.pl-msg.err { background: #fde8e8; border-color: #c0392b; }
.pl-form { display: grid; gap: 10px; max-width: 420px; } .pl-form input { font: inherit; padding: 8px 10px; border: 2px solid #b9b3a6; border-radius: 8px; }
.pl-ship { font-size: 1.1rem; font-weight: 800; }
.pl-soon ul { margin: 0; padding-left: 18px; color: #666; }
.hidden { display: none !important; }
@media (max-width: 760px) { .pl-grid { grid-template-columns: 1fr; } .pl-status, .pl-tavern { grid-row: auto; grid-column: auto; } }

.pl-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 6px 0 10px; }
.pl-slot { border: 2px dashed #b9b3a6; border-radius: 10px; padding: 6px 4px; background: #fff; font: inherit; cursor: pointer; display: grid; text-align: center; min-height: 52px; }
.pl-slot.set { border-style: solid; border-color: #12355b; background: #fff1c9; font-weight: 700; }
.pl-slot small { color: #888; }
.pl-cost { font-weight: 800; color: #1d6fb8; margin: 4px 0; } .pl-cost.low { color: #c0392b; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }
.pl-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pl-bslot { border: 2px solid #d8d1c2; border-radius: 10px; padding: 4px 8px; background: #fff; display: grid; font-size: 0.85rem; }
.pl-bslot small { color: #888; }
.r-normal { color: #555; } .r-episch { color: #7b2cbf; } .r-legendaer { color: #b8860b; }
.r-unglaublich { background: linear-gradient(90deg, #e63946, #f4a261, #2a9d8f, #457b9d, #9b5de5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-bslot.r-episch { border-color: #7b2cbf; } .pl-bslot.r-legendaer { border-color: #d4a017; } .pl-bslot.r-unglaublich { border-color: #9b5de5; }
.pl-bslot.r-episch, .pl-bslot.r-legendaer, .pl-bslot.r-unglaublich, .pl-bslot.r-normal { color: inherit; background: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
#pl-items h3 { font-size: 1rem; margin: 12px 0 4px; }
.pl-roadmap { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pl-roadmap .rm-done { color: #2f8a4f; } .pl-roadmap .rm-next { font-weight: 800; } .pl-roadmap .rm-plan { color: #555; }
.pl-form textarea { font: inherit; padding: 8px 10px; border: 2px solid #b9b3a6; border-radius: 8px; }
.ad-scroll { overflow-x: auto; } .ad-body { white-space: pre-wrap; }
.pg-table { width: 100%; border-collapse: collapse; } .pg-table th, .pg-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e3ddcf; }

/* ---------- Vorab-Start ---------- */
.pl-landing { display: grid; gap: 18px; }
.pl-hero { position: relative; border-radius: 18px; overflow: hidden; border: 3px solid #12355b; box-shadow: 0 6px 0 #12355b; }
.pl-hero img { display: block; width: 100%; height: auto; }
.pl-hero-box { position: absolute; left: 44%; bottom: 3%; transform: translateX(-50%); width: min(400px, 90%);
  background: rgba(255, 250, 240, 0.93); border: 3px solid #12355b; border-radius: 16px; padding: 12px 16px; text-align: center; }
.pl-hero-box h1 { margin: 0 0 6px; font-size: 1.3rem; }
.pl-launch-bar { height: 18px; border-radius: 9px; background: #e3ddcf; overflow: hidden; border: 2px solid #12355b; }
#pl-launch-fill { height: 100%; width: 0; background: linear-gradient(90deg, #f4a261, #ffd23f); transition: width 1s ease; }
.pl-launch-num { margin: 6px 0 10px; }
.pl-reserve { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pl-reserve input { font: inherit; padding: 8px 10px; border: 2px solid #b9b3a6; border-radius: 8px; min-width: 200px; }
.pl-reserved { font-weight: 800; color: #2f8a4f; }
.pl-hero-small { margin: 8px 0 0; font-size: 0.85rem; color: #555; }
@media (max-width: 760px) {
  .pl-hero-box { position: static; transform: none; width: auto; border: 0; border-top: 3px solid #12355b; border-radius: 0; }
}