:root{
 --icn:#0066cc;
 --icn-dark:#004899;
 --icn-light:#eef6ff;
 --border:#dce7f5;
 --text:#111827;
 --muted:#6b7280;
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}


/* Komplexitäts-Achse */
.axis{
 max-width:1400px;
 margin:0 auto 4px;
 padding:0 60px;
 display:flex;
 align-items:center;
 gap:14px;
}

.axis-line{
 flex:1;
 height:3px;
 border-radius:3px;
 background:linear-gradient(90deg,#9ec8f0,var(--icn) 50%,#b03a2e);
}

.axis-label{
 font-size:.72rem;
 font-weight:700;
 letter-spacing:.04em;
 text-transform:uppercase;
 color:var(--muted);
 white-space:nowrap;
}

/* Komplexitäts-Punkt auf jeder Karte */
.lvl-dot{
 display:block;
 width:9px;
 height:9px;
 border-radius:50%;
 margin-bottom:12px;
}

.lvl1 .lvl-dot{background:#5ca9ff;}
.lvl2 .lvl-dot{background:var(--icn);}
.lvl3 .lvl-dot{background:#e08a3c;}
.lvl4 .lvl-dot{background:#b03a2e;}

@media(max-width:640px){
 .axis{padding:0 24px;}
 .axis-label{font-size:.62rem;}
}

.slider-wrap{
 position:relative;
 padding:0 20px;
}

.slider{
 overflow-x:auto;
 padding:10px 40px 30px;
 scroll-behavior:smooth;
 scrollbar-width:none;
}

.slider::-webkit-scrollbar{
 display:none;
}

.arrow{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:5;
 width:44px;
 height:44px;
 border-radius:50%;
 border:1px solid var(--border);
 background:white;
 color:var(--icn);
 font-size:1.4rem;
 line-height:1;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 4px 14px rgba(0,72,153,.12);
 transition:.2s;
}

.arrow:hover{
 background:var(--icn);
 color:white;
 border-color:var(--icn);
}

.arrow.left{
 left:8px;
}

.arrow.right{
 right:8px;
}

.arrow[disabled]{
 opacity:.35;
 pointer-events:none;
}

@media(max-width:640px){
 .arrow{display:none;}
}

.track{
 display:flex;
 gap:18px;
 width:max-content;
}

.card{
 width:260px;
 min-width:260px;
 background:white;
 border:1px solid var(--border);
 border-radius:18px;
 padding:22px;
 cursor:pointer;
 transition:.2s;
}

.card:hover{
 transform:translateY(-4px);
 border-color:var(--icn);
}

.card.selected{
 border-color:var(--icn);
 box-shadow:0 0 0 1px var(--icn);
}

.card h3{
 color:var(--icn-dark);
 margin-bottom:8px;
}

.card p{
 color:var(--muted);
 font-size:.9rem;
}

.detail{
 max-width:1400px;
 margin:0 auto;
 padding:0 40px;
}

.detail-box{
 display:none;
 background:white;
 border:1px solid var(--border);
 border-left:5px solid var(--icn);
 border-radius:18px;
 padding:30px;
 margin-top:10px;
}

.detail-box.active{
 display:block;
}

.detail-box h3{
 color:var(--icn-dark);
 margin-bottom:12px;
}

.lvl-badge{
 display:inline-flex;
 align-items:center;
 gap:8px;
 margin-bottom:16px;
 padding:5px 12px;
 border-radius:999px;
 background:#f3f6fb;
 font-size:.74rem;
 font-weight:700;
 letter-spacing:.03em;
 text-transform:uppercase;
 color:var(--muted);
}

.lvl-badge .lvl-dot{
 margin-bottom:0;
}

.detail-box p{
 color:var(--text);
 line-height:1.6;
 white-space:pre-line;
}

.badges{
 display:flex;
 gap:8px;
 flex-wrap:wrap;
 margin-top:15px;
}

.badges span{
 background:var(--icn-light);
 color:var(--icn);
 padding:5px 12px;
 border-radius:999px;
 font-size:.75rem;
 font-weight:600;
}