/*
 * Roadmap und Neuerungen der Landingpages (roadmap.html, neuerungen.html).
 *
 * Quelle: brand/roadmap/. In die Seiten kopiert von brand/roadmap/verteilen.sh
 * (assets/roadmap.99c94573.css). Nicht in den Kopien ändern.
 *
 * Das HTML kommt aus dem Backend (resources/views/roadmap/), eingesetzt von
 * bootstrap/liveseite.php. Farben und Schriften stammen von der jeweiligen
 * Seite (--ink, --blue, --line …); die Fallbacks greifen nur, wo eine Seite
 * eine Variable nicht kennt.
 */
.rm{--rm-r:var(--r,8px);--rm-top:112px;text-align:left}

/* Rahmen der Seite. Wo die Seite eine eigene .page-head hat (MatBuddy,
   EquileBuddy), nimmt sie die; sonst gilt .rm-kopf. */
.rm-kopf{padding:clamp(40px,6vw,80px) 0 clamp(28px,3.4vw,44px);text-align:left}
.rm-kopf h1{margin:0}
.rm-kopf .lead{margin:16px 0 0;max-width:40em}
.rm-kopf-seite .lead{max-width:40em}
.rm-inhalt{padding:0 0 clamp(16px,2vw,24px)}
.rm .mk{width:20px;height:20px;flex:none;display:block}
.rm .st-fertig{color:var(--ink-3,#7589a4)}
.rm .st-arbeit{color:var(--blue,#3566e8)}
.rm .st-geplant{color:var(--ink-2,#4a6183)}

.rm-legend{display:flex;flex-wrap:wrap;gap:10px 30px;margin:0 0 30px;padding:0;list-style:none;font-size:15.5px;color:var(--ink-2,#4a6183)}
.rm-legend li{display:flex;align-items:center;gap:9px}
.rm-legend .mk{width:18px;height:18px}
.rm-legend b{font-weight:600;color:var(--ink,#0f2347)}

/* „Will ich auch" */
.rm .vote{display:inline-flex;align-items:stretch;border:1.5px solid var(--line,#dde5f0);border-radius:var(--rm-r);background:#fff;color:var(--ink,#0f2347);font:600 15px/1 var(--body,system-ui,sans-serif);cursor:pointer;overflow:hidden;white-space:nowrap;padding:0;margin:0}
.rm .vote .l{display:inline-flex;align-items:center;gap:8px;padding:11px 14px}
.rm .vote .l svg{width:16px;height:16px}
.rm .vote .n{display:flex;align-items:center;justify-content:center;min-width:46px;padding:0 12px;border-left:1.5px solid var(--line,#dde5f0);background:var(--bg-soft,#f7f9fc);font-variant-numeric:tabular-nums;color:var(--ink-2,#4a6183)}
.rm .vote:hover{border-color:var(--ink-3,#7589a4)}
.rm .vote:focus-visible{outline:2px solid var(--blue,#3566e8);outline-offset:2px}
.rm .vote.on{border-color:var(--blue,#3566e8);color:var(--blue,#3566e8)}
.rm .vote.on .n{background:var(--blue-lt,#edf2ff);border-left-color:var(--blue,#3566e8);color:var(--blue-dk,#2950c4)}
.rm .vote[aria-busy="true"]{opacity:.6;cursor:progress}
.rm-hinweis{flex-basis:100%;margin:0;font-size:14px;color:var(--ink-2,#4a6183);text-align:right}

.rm .live{font-size:14.5px;color:var(--ink-2,#4a6183);white-space:nowrap}
.rm .rm-produkt{font-size:14px;font-weight:600;color:var(--ink-2,#4a6183);white-space:nowrap}
.rm .it h3{margin:0}
.rm .it p{margin:0}
.rm .st{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}

/* Senkrechte Zeitleiste */
.rm-a .qrt{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:44px 0;border-top:1px solid var(--line,#dde5f0)}
.rm-a .qrt:first-child{border-top:0;padding-top:8px}
.rm-a .qlabel{align-self:start;position:sticky;top:var(--rm-top)}
.rm-a .qlabel h2{font-size:clamp(30px,3vw,40px);margin:0}
.rm-a .qlabel p{margin:6px 0 0;font-size:15.5px;color:var(--ink-2,#4a6183)}
.rm-a .qlabel .jetzt{display:block;margin-top:12px;font-size:15px;font-weight:600;color:var(--blue,#3566e8)}
.rm-a .items{list-style:none;margin:0;padding:0 0 0 38px;position:relative}
.rm-a .items::before{content:"";position:absolute;left:9px;top:26px;bottom:26px;width:2px;background:var(--line,#dde5f0)}
.rm-a .it{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 36px;align-items:start;padding:22px 26px;border-radius:var(--rm-r);scroll-margin-top:var(--rm-top)}
.rm-a .it + .it{margin-top:4px}
.rm-a .it > .mk{position:absolute;left:-38px;top:27px}
.rm-a .it h3{font-size:22px;line-height:1.22;overflow-wrap:anywhere}
.rm-a .it p{grid-column:1;color:var(--ink-2,#4a6183);margin-top:8px;font-size:16.5px;max-width:38em}
.rm-a .it .side{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:2px}
.rm-a .it.arbeit{background:var(--blue-lt,#edf2ff);padding:28px 28px 30px;margin:10px 0}
.rm-a .it.arbeit h3{font-size:26px}
.rm-a .it.arbeit p{color:var(--ink,#0f2347);font-size:17px}
.rm-a .it.arbeit > .mk{top:35px}
.rm-a .it.arbeit .st{color:var(--blue-dk,#2950c4);margin-bottom:10px}
.rm-a .it.fertig{padding-top:16px;padding-bottom:16px}
.rm-a .it.fertig > .mk{top:21px}
.rm-a .it.fertig h3{font-size:18px;font-weight:600;color:var(--ink-2,#4a6183)}
.rm-a .it.fertig p{font-size:15.5px;margin-top:4px}

/* Neuerungen: alles ist fertig, also nicht ausgegraut */
.rm-neu .it.fertig h3{font-size:19px;color:var(--ink,#0f2347)}
.rm-neu .it.fertig > .mk{color:var(--blue,#3566e8)}
.rm-neu .qlabel p{font-variant-numeric:tabular-nums}

.rm-leer{margin:8px 0 0;font-size:17px;color:var(--ink-2,#4a6183)}
.rm-verweis{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--line,#dde5f0);font-size:16.5px;color:var(--ink-2,#4a6183)}
.rm-verweis a{color:var(--blue,#3566e8);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Fuß der Seite: Kontakt */
.rm-frage{padding:clamp(24px,3vw,40px) 0 clamp(72px,9vw,120px);text-align:left}
.rm-frage .box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;border-top:1px solid var(--line,#dde5f0);padding-top:40px}
.rm-frage h2{font-size:clamp(28px,3.4vw,40px);margin:0}
.rm-frage p{color:var(--ink-2,#4a6183);margin:10px 0 0;max-width:34em}

@media (max-width:860px){
  .rm-a .qrt{grid-template-columns:1fr;gap:18px;padding:34px 0}
  .rm-a .qlabel{position:static;display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
  .rm-a .qlabel p,.rm-a .qlabel .jetzt{margin:0}
  .rm-a .items{padding-left:30px}
  .rm-a .items::before{left:7px}
  .rm-a .it > .mk{left:-30px;width:16px;height:16px;top:28px}
  .rm-a .it{grid-template-columns:minmax(0,1fr);padding:18px 16px 18px 14px}
  .rm-a .it .side{order:3;grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:6px}
  .rm-a .it.arbeit{padding:22px 16px 22px 14px}
  .rm-a .it.arbeit > .mk{top:30px}
  .rm-a .it.fertig > .mk{top:22px}
  .rm-a .it h3{font-size:19px}
  .rm-a .it.arbeit h3{font-size:21px}
  .rm-hinweis{text-align:left}
}
@media (max-width:640px){
  .rm-frage .box{grid-template-columns:1fr}
}