/* ==========================================================================
   QC ROADMAP 2.0
   - vollstaendig gescoped auf #qcr-roadmap
   - eigener Klassen-Namespace qcr-  (kein Konflikt mit Theme-Klassen
     wie .module, .module__inner, .module__headline, .card, .tabs, .panel)
   - Design-Tokens unveraendert aus dem Styleguide quantumbw.de
   ========================================================================== */

#qcr-roadmap{
  /* --- Farben --- */
  --qcrBrand:#262D33;
  --qcrAccent:#fffc00;
  --qcrBody:#313131;
  --qcrGrey100:#f5f5f5;
  --qcrGrey200:#d3d3d3;
  --qcrGrey400:#818181;
  --qcrGrey500:#707070;
  --qcrGrey600:#313131;

  /* --- Raster / Typo --- */
  --qcrUnit:20px;
  --qcrMaxWidth:1700px;
  --qcrFont:'Referenz Grotesk W05 Regular','Helvetica Neue',Helvetica,Arial,sans-serif;
  --qcrFontSize:15px;
  --qcrLineHeight:1.3;
  --qcrH2:35px;
  --qcrH3:25px;
  --qcrH4:18px;

  /* --- Buttons --- */
  --qcrBtnFontSize:16px;
  --qcrBtnMaxWidth:320px;
  --qcrBtnRadius:28px;

  --qcrShadow:rgba(149,157,165,.2) 0 8px 24px 0;
  --qcrSpaceM:calc(var(--qcrUnit) * 4);

  /* Offset fuer fixe Theme-Header / Admin-Bar (siehe README) */
  --qcrStickyOffset:0px;

  display:block;
  background:var(--qcrGrey100);
  color:var(--qcrBody);
  font-family:var(--qcrFont);
  font-size:var(--qcrFontSize);
  line-height:var(--qcrLineHeight);
  letter-spacing:0;
  padding:calc(var(--qcrSpaceM) * .65) var(--qcrUnit);
}

@media (min-width:768px){
  #qcr-roadmap{ padding:var(--qcrSpaceM) calc(var(--qcrUnit) * 2); }
}

/* --- Reset nur innerhalb der Komponente (Theme-Styles neutralisieren) --- */
#qcr-roadmap *,
#qcr-roadmap *::before,
#qcr-roadmap *::after{ box-sizing:border-box; }

#qcr-roadmap ul,
#qcr-roadmap li{ margin:0; padding:0; list-style:none; }

#qcr-roadmap button{
  margin:0;
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}

#qcr-roadmap .qcr-inner{
  max-width:var(--qcrMaxWidth);
  margin-inline:auto;
}

/* ============ HEADLINE ============ */
#qcr-roadmap .qcr-headline{
  margin:0 0 var(--qcrUnit);
  font-family:var(--qcrFont);
  font-size:var(--qcrH2);
  line-height:1.2;
  font-weight:700;
  color:#000;
  letter-spacing:0;
}
#qcr-roadmap .qcr-accent-mark{
  background:var(--qcrAccent);
  padding:0 6px;
}

/* ============ TABS ============ */
#qcr-roadmap .qcr-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--qcrUnit);
  margin:0 0 calc(var(--qcrUnit) * 2);
}
#qcr-roadmap .qcr-tabs__btn{
  flex:1 1 260px;
  max-width:var(--qcrBtnMaxWidth);
  padding:17px 20px 20px;
  border:1px solid var(--qcrBrand);
  border-radius:var(--qcrBtnRadius);
  background:transparent;
  color:var(--qcrBrand);
  font-size:var(--qcrBtnFontSize);
  line-height:1.2;
  font-weight:400;
  text-align:center;
  cursor:pointer;
  transition:background-color .3s, color .3s, border-color .2s;
}
@media (hover:hover) and (pointer:fine){
  #qcr-roadmap .qcr-tabs__btn:hover{
    background:var(--qcrAccent);
    border-color:var(--qcrAccent);
    color:#000;
  }
}
#qcr-roadmap .qcr-tabs__btn[aria-selected="true"]{
  background:var(--qcrBrand);
  border-color:var(--qcrBrand);
  color:#fff;
  font-weight:700;
}
#qcr-roadmap .qcr-tabs__btn:focus-visible{
  outline:2px solid #000;
  outline-offset:3px;
}

/* ============ PANELS ============ */
#qcr-roadmap .qcr-panel[hidden]{ display:none; }
#qcr-roadmap .qcr-panel{ display:block; animation:qcrFadeIn .3s linear both; }
@keyframes qcrFadeIn{ from{opacity:0} to{opacity:1} }

#qcr-roadmap .qcr-scroll{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding-bottom:var(--qcrUnit);
}
#qcr-roadmap .qcr-scroll::-webkit-scrollbar{ height:10px; }
#qcr-roadmap .qcr-scroll::-webkit-scrollbar-thumb{
  background:var(--qcrGrey400);
  border-radius:0;
}

#qcr-roadmap .qcr-hint{
  margin:0 0 calc(var(--qcrUnit) * .5);
  font-size:13px;
  color:var(--qcrGrey500);
}
@media (min-width:1280px){
  #qcr-roadmap .qcr-hint{ display:none; }
}

/* ============ TABELLE ============ */
#qcr-roadmap table.qcr-table{
  width:100%;
  min-width:1080px;
  border-collapse:separate;
  border-spacing:var(--qcrUnit);
  table-layout:fixed;
  margin:0;
  background:transparent;
}
#qcr-roadmap .qcr-col--goal{ width:19%; }
#qcr-roadmap .qcr-col--term{ width:27%; }

#qcr-roadmap .qcr-table thead th{
  position:sticky;
  top:var(--qcrStickyOffset);
  z-index:3;
  background:var(--qcrGrey100);
  padding:calc(var(--qcrUnit) * .5) 0;
  border-bottom:1px solid var(--qcrGrey600);
  text-align:left;
  vertical-align:bottom;
  font-weight:400;
  color:var(--qcrBody);
}
#qcr-roadmap .qcr-th__label{
  display:block;
  font-size:var(--qcrH3);
  line-height:1.2;
  font-weight:700;
  color:#000;
}
#qcr-roadmap .qcr-th__sub{
  display:block;
  margin-top:4px;
  font-size:var(--qcrFontSize);
  line-height:var(--qcrLineHeight);
  font-weight:400;
  color:var(--qcrGrey500);
}
#qcr-roadmap .qcr-accent-bar{
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:8px;
  background:var(--qcrAccent);
  border:1px solid rgba(0,0,0,.4);
  vertical-align:middle;
}

#qcr-roadmap .qcr-table td{ padding:0; vertical-align:top; }

/* --- Ziel-Zelle: Solid Brand --- */
#qcr-roadmap .qcr-goal{
  height:100%;
  padding:var(--qcrUnit);
  background:var(--qcrBrand);
  color:#fff;
  border-radius:0;
  font-size:18px;
  line-height:1.2;
  font-weight:700;
}

/* ============ KARTE / ACCORDION ============ */
#qcr-roadmap .qcr-card{
  height:100%;
  padding:var(--qcrUnit);
  background:#fff;
  border:1px solid var(--qcrGrey200);
  border-top:8px solid var(--qcrAccent);
  border-radius:0;
  transition:box-shadow .3s, border-color .2s;
}
@media (hover:hover) and (pointer:fine){
  #qcr-roadmap .qcr-card:hover{
    box-shadow:var(--qcrShadow);
    border-color:var(--qcrGrey400);
    border-top-color:var(--qcrAccent);
  }
}

#qcr-roadmap .qcr-card__toggle{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:calc(var(--qcrUnit) * .6);
  width:100%;
  padding:0;
  border:0;
  background:none;
  text-align:left;
  cursor:pointer;
}
#qcr-roadmap .qcr-card__toggle:focus-visible{
  outline:2px solid #000;
  outline-offset:4px;
}

#qcr-roadmap .qcr-card__title{
  display:block;
  font-size:var(--qcrH4);
  line-height:1.2;
  font-weight:700;
  color:#000;
}

#qcr-roadmap .qcr-card__icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  background:var(--qcrAccent);
  border:1px solid var(--qcrGrey600);
  font-size:16px;
  font-weight:700;
  line-height:1;
  color:#000;
}
#qcr-roadmap .qcr-card__icon::before{ content:"+"; }
#qcr-roadmap .qcr-card.is-open .qcr-card__icon::before{ content:"\2013"; }

/* Default: geschlossen - unabhaengig davon, ob JS laeuft */
#qcr-roadmap .qcr-card__panel{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .25s ease, opacity .25s ease;
}
#qcr-roadmap .qcr-card.is-open > .qcr-card__panel{
  max-height:none;
  opacity:1;
}

#qcr-roadmap .qcr-card__panel ul{
  padding-top:calc(var(--qcrUnit) * .6);
  font-size:var(--qcrFontSize);
}
#qcr-roadmap .qcr-card__panel li{
  position:relative;
  padding-left:18px;
  margin-bottom:calc(var(--qcrUnit) * .5);
  line-height:var(--qcrLineHeight);
  color:var(--qcrBody);
}
#qcr-roadmap .qcr-card__panel li:last-child{ margin-bottom:0; }
#qcr-roadmap .qcr-card__panel li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:8px;
  height:8px;
  background:var(--qcrAccent);
  border:1px solid var(--qcrGrey600);
}

/* ============ RESPONSIVE ============ */
@media (max-width:767px){
  #qcr-roadmap .qcr-headline{ font-size:25px; }
  #qcr-roadmap .qcr-tabs{ gap:calc(var(--qcrUnit) * .5); }
  #qcr-roadmap .qcr-tabs__btn{
    flex:1 1 100%;
    max-width:none;
    padding:12px 14px 14px;
    font-size:14px;
    border-radius:22px;
  }
  #qcr-roadmap table.qcr-table{
    min-width:940px;
    border-spacing:calc(var(--qcrUnit) * .6);
  }
  #qcr-roadmap .qcr-th__label{ font-size:20px; }
  #qcr-roadmap .qcr-goal{ font-size:16px; }
}

@media (max-width:359px){
  #qcr-roadmap{ padding-inline:12px; }
  #qcr-roadmap .qcr-tabs__btn{ font-size:13px; }
}

/* ============ A11Y / PRINT ============ */
@media (prefers-reduced-motion:reduce){
  #qcr-roadmap .qcr-card__panel,
  #qcr-roadmap .qcr-card,
  #qcr-roadmap .qcr-tabs__btn,
  #qcr-roadmap .qcr-panel{
    transition:none !important;
    animation:none !important;
  }
}

@media print{
  #qcr-roadmap .qcr-scroll{ overflow:visible; }
  #qcr-roadmap .qcr-panel[hidden]{ display:block; }
  #qcr-roadmap .qcr-card__panel{ max-height:none !important; opacity:1 !important; }
  #qcr-roadmap .qcr-card__icon{ display:none; }
}