/* Online-Planer: baut auf public.css (Soft-UI) auf. Eigene Teile: Kacheln, „Ihr Plan“ daneben, Grundriss,
   Vorschlag, Kostenbalken, Preisklassen. */
.pl-layout { max-width: 1180px; }
@media (min-width: 1000px) { .pl-layout:has(.pl-side:not([hidden])) { grid-template-columns: minmax(0, 1fr) 330px; } }
.stage.still .box, .stage.still .pl-class, .stage.still .pl-tile { animation: none; }

/* Schrittleiste mit bis zu 7 Schritten (--n): Beschriftung auf schmalen Schirmen nur beim aktuellen Schritt */
.pl-stepper { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.pl-stepper .st-line { left: calc(50% / var(--n)); right: calc(50% / var(--n)); }
.pl-stepper .st-l { text-align: center; line-height: 1.2; }
@media (max-width: 640px) { .pl-stepper .st-l { display: none; } .pl-stepper li.now .st-l { display: inline; } }

/* „Ihr Plan“ */
.pl-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 12px; border-radius: 26px; padding: 20px;
  background: linear-gradient(145deg, #f2f3f5, #e1e4e8); border: 1px solid var(--hi); box-shadow: var(--raise); animation: infwd .6s var(--ease); }
.pl-side .tk-list { margin: 0; }
@media (max-width: 999px) { .pl-side { position: static; max-width: 720px; width: 100%; margin: 0 auto; } }
.pl-side-plan { border-radius: 18px; background: var(--surface-2); box-shadow: var(--press); padding: 8px; }
.pl-side-plan .pl-plan-empty { min-height: 120px; font-size: .85rem; }

/* Übersicht */
.pl-tiles { display: grid; gap: 16px; margin: 6px 0 22px; }
@media (min-width: 720px) { .pl-tiles { grid-template-columns: 1fr 1fr; } .pl-tiles .pl-tile:first-child { grid-column: 1 / -1; } }
.pl-tile { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 22px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--hi); box-shadow: var(--raise); color: var(--text); text-decoration: none;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease); animation: rise .6s var(--ease) both; }
.pl-tile:nth-child(2) { animation-delay: .07s; } .pl-tile:nth-child(3) { animation-delay: .14s; }
.pl-tile:hover, .pl-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--raise), var(--glow); }
.pl-tile-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--grad-btn); box-shadow: var(--glow); }
.pl-tile-t { display: flex; flex-direction: column; gap: 4px; }
.pl-tile-t strong { font: 700 1.25rem/1.15 var(--display); letter-spacing: -.015em; }
.pl-tile-t small { color: var(--muted); font-size: .92rem; }
.pl-tile-t em { align-self: flex-start; font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hot-l);
  background: rgb(232 137 43 / 12%); border-radius: 999px; padding: 3px 10px; }
.pl-more { display: grid; gap: 12px; margin-bottom: 18px; }
@media (min-width: 720px) { .pl-more { grid-template-columns: repeat(3, 1fr); } }
.pl-mini { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hi);
  box-shadow: var(--raise-s); color: var(--text); text-decoration: none; transition: box-shadow .3s; }
.pl-mini:hover { box-shadow: var(--press); }
.pl-mini svg { color: var(--hot-l); flex: none; }
.pl-mini span { display: flex; flex-direction: column; } .pl-mini small { color: var(--muted); }

/* Hinweise */
.pl-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; margin: 0 0 18px; font-size: .92rem;
  background: var(--info-soft); color: var(--text); }
.pl-tip svg { flex: none; margin-top: 2px; color: var(--info); }
.pl-tip.warn { background: var(--warm-soft); color: #6b3d00; } .pl-tip.warn svg { color: var(--warm); }
.pl-tip.ok { background: var(--ok-soft); } .pl-tip.ok svg { color: var(--ok); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: .88rem; }

/* Vorschlag */
.pl-rec { border: 1px solid rgb(232 137 43 / 35%); box-shadow: var(--raise), 0 18px 40px -24px var(--hot); }
.pl-rec-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.pl-rec-ic { width: 64px; height: 64px; flex: none; border-radius: 20px; display: grid; place-items: center; color: #fff; background: var(--grad-btn); box-shadow: var(--glow); }
.pl-rec-head span:last-child { display: flex; flex-direction: column; }
.pl-rec-head small { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.pl-rec-head strong { font: 750 1.4rem/1.1 var(--display); letter-spacing: -.02em; }
.pl-rec-head em { font-style: normal; color: var(--hot-l); font-weight: 600; }
.pl-notes { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.pl-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.pl-kpis > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); box-shadow: var(--press); }
.pl-kpis small { color: var(--muted); font-size: .8rem; } .pl-kpis b { font: 700 1.1rem var(--display); }

/* Kostenbalken */
.pl-bars { display: grid; gap: 10px; margin: 6px 0 12px; }
.pl-bar { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 12px; align-items: center; font-size: .92rem; }
.pl-bar i { height: 14px; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, #9aa1ab, #6c737e); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%);
  transition: width .6s var(--ease); }
.pl-bar.is-now i { background: linear-gradient(90deg, #b9bec6, #8a9099); }
.pl-bar.is-sys i { background: linear-gradient(90deg, #f5b26b, var(--hot)); box-shadow: 0 6px 14px -6px var(--hot); }
.pl-bar b { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .pl-bar { grid-template-columns: 1fr auto; } .pl-bar i { grid-column: 1 / -1; grid-row: 2; } }
.pl-save { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 18px; color: #fff; background: var(--grad-btn); box-shadow: var(--glow); margin: 6px 0 10px; }
.pl-save small { opacity: .8; } .pl-save b { font: 750 1.5rem var(--display); } .pl-save span { font-size: .85rem; opacity: .85; }
.pl-list { margin: 0; padding-left: 20px; } .pl-list li { margin: 6px 0; }
.pl-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pl-check li { display: flex; gap: 10px; align-items: flex-start; }
.pl-check svg { flex: none; margin-top: 3px; color: #fff; background: var(--ok); border-radius: 50%; padding: 2px; }

/* Grundriss */
.pl-planbox { overflow: hidden; }
.pl-plan-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pl-plan-head h2 { margin: 0; }
.pl-svg { display: block; width: 100%; height: auto; max-height: 420px; }
.pl-svg.big { margin: 6px 0 12px; }
.pl-plan-empty { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; text-align: center; min-height: 180px; color: var(--muted); }

/* Preisklassen */
.pl-classes { display: grid; gap: 12px; margin-bottom: 18px; }
@media (min-width: 640px) { .pl-classes { grid-template-columns: repeat(3, 1fr); } }
.pl-class { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px; border-radius: var(--radius); font: inherit; color: var(--text); cursor: pointer;
  background: var(--surface); border: 1px solid var(--hi); box-shadow: var(--raise-s); transition: all .3s var(--ease); animation: rise .6s var(--ease) both; }
.pl-class:nth-child(2) { animation-delay: .06s; } .pl-class:nth-child(3) { animation-delay: .12s; }
.pl-class strong { font: 750 1.2rem var(--display); }
.pl-class span { color: var(--muted); font-size: .9rem; flex: 1; }
.pl-class b { font: 700 1rem var(--display); }
.pl-class small { color: var(--dim); }
.pl-class:hover { box-shadow: var(--press); }
.pl-class[aria-checked="true"] { background: var(--grad-btn); color: #fff; border-color: transparent; box-shadow: var(--glow); }
.pl-class[aria-checked="true"] span, .pl-class[aria-checked="true"] small { color: rgb(255 255 255 / 80%); }

/* Zusammenfassung + Abschluss */
.pl-sum { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 8px; }
.pl-sum dt { color: var(--muted); } .pl-sum dd { margin: 0; font-weight: 600; }
.pl-done-ic { width: 84px; height: 84px; margin: 10px auto 16px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok);
  box-shadow: 0 16px 30px -12px var(--ok); animation: popin .6s var(--ease); }
.pl-calc-out { margin-top: 6px; }