/* Bauanleitung „Mini-Deskstella“ (Fassung 28, Punkt 17). Eigene Stile nur für mini-deskstella.html, Vorsilbe md-. */
.seite-mini .al-artikel{grid-template-columns:minmax(0,48rem) 13rem}
.md-held{display:grid;gap:1rem}
.md-held h1 .verlauf-text{display:inline}
.md-unabhaengig,.al-text-inhalt>p.md-unabhaengig{font-size:.9rem;line-height:1.6;color:var(--leise);max-width:46rem}

/* Vorschau: so kann die fertige Startseite aussehen */
.md-vorschau{margin:.6rem 0 0;display:grid;gap:.7rem}
.md-fenster{border-radius:var(--r-l);background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten);overflow:hidden}
.md-leiste{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;background:var(--grund);border-bottom:1px solid var(--linie);font:600 .74rem var(--display);color:var(--leise);min-width:0}
.md-leiste i{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:#e3d4dd}
.md-leiste i:first-child{background:#f2696c}
.md-leiste span{margin-left:.5rem;padding:.2rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--linie);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.md-bild{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.2rem;padding:clamp(1.1rem,3vw,1.8rem)}
.md-gruss{font:700 .9rem var(--display);color:var(--marke)}
.md-uhr{display:block;font:900 clamp(2.6rem,7vw,3.9rem)/1 var(--display);letter-spacing:-.05em;color:var(--tinte);font-variant-numeric:tabular-nums;margin:.2rem 0 .3rem}
.md-datum{display:block;color:var(--leise);font-size:.95rem}
.md-block{display:grid;gap:.45rem;align-content:start}
.md-block-titel{font:800 .68rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.md-aufgaben{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.md-aufgaben li{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:.75rem;background:var(--grund);font-size:.92rem;color:var(--tinte)}
.md-aufgaben li::before{content:"";flex:none;width:1rem;height:1rem;border-radius:.3rem;border:2px solid var(--linie-2);background:#fff}
.md-aufgaben li.erledigt{color:var(--leise);text-decoration:line-through}
.md-aufgaben li.erledigt::before{border-color:var(--marke);background:var(--marke) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/80% no-repeat}
.md-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.md-links span{display:grid;justify-items:center;gap:.3rem;padding:.6rem .2rem;border-radius:.75rem;border:1px solid var(--linie);font-size:.72rem;color:var(--text);text-align:center}
.md-links b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;font:800 .85rem var(--display);color:#fff;background:var(--verlauf-tief)}
.md-links span:nth-child(2) b{background:linear-gradient(120deg,#dd428c,#f2696c)}
.md-links span:nth-child(3) b{background:linear-gradient(120deg,#9c54a1,#dd428c)}
.md-links span:nth-child(4) b{background:linear-gradient(120deg,#f2696c,#f9a77c)}
.md-notiz{padding:.7rem .8rem;border-radius:.75rem;background:#fffaf0;border:1px solid #f3e2bf;font-size:.9rem;line-height:1.5;color:#5c4a2a}
.md-rechts{display:grid;gap:1rem;align-content:start}
.md-links-block,.md-notiz-block{display:grid;gap:.45rem}
.md-vorschau figcaption{font-size:.86rem;color:var(--leise)}

/* Eckdaten */
.md-fakten{list-style:none;margin:.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.md-fakten li{display:grid;gap:.2rem;padding:.85rem .9rem;border-radius:var(--r-m);border:1px solid var(--linie);background:#fff}
.md-fakten small{font:800 .66rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--marke)}
.md-fakten b{font-weight:600;font-size:.92rem;line-height:1.4;color:var(--tinte)}

/* Hinweise */
.md-kasten{display:grid;gap:.5rem;padding:1.1rem 1.25rem;border-radius:var(--r-m);background:var(--grund);border-left:4px solid var(--marke)}
.md-kasten h3{font:800 1.05rem var(--display);letter-spacing:-.02em;color:var(--tinte)}
.md-kasten p,.md-kasten li{font-size:1rem;line-height:1.65;color:var(--text)}
.md-kasten ul{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}

/* Sprungmarken zu den Schritten */
.md-sprung{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .4rem}
.md-sprung a{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .8rem .4rem .45rem;border-radius:999px;border:1px solid var(--linie);background:#fff;font:700 .84rem var(--display);color:var(--tinte);text-decoration:none}
.md-sprung a:hover{border-color:var(--linie-2);color:var(--marke)}
.md-sprung a span{display:grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--grund);color:var(--marke);font-size:.78rem}

/* Ein Schritt */
.md-schritte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.2rem,2.6vw,1.7rem)}
.md-schritt{display:grid;gap:.9rem;padding:clamp(1.1rem,2.6vw,1.7rem);border-radius:var(--r-l);background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten);scroll-margin-top:7rem;min-width:0}
.md-schritt-kopf{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:center}
.md-nr{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:.9rem;background:var(--verlauf-tief);color:#fff;font:900 1.15rem var(--display);box-shadow:0 10px 22px -12px rgba(183,47,103,.8)}
.md-schritt-kopf small{display:block;font:800 .7rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--marke)}
.md-schritt h2{font:900 clamp(1.25rem,2.4vw,1.55rem)/1.18 var(--display);letter-spacing:-.03em;color:var(--tinte);margin:0;text-wrap:balance}
.md-ziel{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .85rem;border-radius:.8rem;background:var(--grund);font-size:1rem;line-height:1.55;color:var(--tinte)}
.md-ziel svg{flex:none;width:1.2rem;height:1.2rem;margin-top:.15rem;color:var(--marke)}
.md-ziel b{font-family:var(--display);font-weight:800;margin-right:.25rem}
.md-schritt > p,.md-schritt li{font-size:1.02rem;line-height:1.7;color:var(--text)}
.md-schritt ol,.md-schritt ul{margin:0;padding-left:1.3rem;display:grid;gap:.35rem}
.md-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.md-paar .kd-tipp,.md-paar .kd-fehler{margin:0;font-size:.95rem}
.md-paar .kd-tipp b,.md-paar .kd-fehler b{letter-spacing:.08em}
.md-paar em{font-style:normal;font-weight:700}
.md-schritt > p em{font-style:normal;font-weight:600;color:var(--tinte)}
.md-schritt > p mark{background:#fbe4ee;color:var(--marke);border-radius:.25rem;padding:0 .2rem;font-weight:700}
kbd{display:inline-block;padding:.05rem .4rem;border-radius:.35rem;border:1px solid var(--linie-2);border-bottom-width:2px;background:#fff;font:700 .85em var(--display);color:var(--tinte);white-space:nowrap}
.md-schritt code,.md-weg code,.md-kasten code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:.9em;padding:.05rem .3rem;border-radius:.3rem;background:var(--grund);color:var(--marke-tief);overflow-wrap:anywhere}

/* Zum Schluss: beim Start öffnen */
.md-wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.md-weg{display:grid;gap:.6rem;align-content:start;padding:1.15rem 1.2rem;border-radius:var(--r-l);border:1px solid var(--linie);background:#fff}
.md-weg h3{font:800 1.08rem var(--display);letter-spacing:-.02em;color:var(--tinte)}
.md-weg h4{font:800 .74rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--marke);margin-top:.3rem}
.md-weg p,.md-weg li{font-size:.97rem;line-height:1.6;color:var(--text)}
.md-weg ol{margin:0;padding-left:1.2rem;display:grid;gap:.3rem}
.md-weg .md-klein{font-size:.86rem;color:var(--leise)}

/* Ausblick: Mini-Deskstella und Deskstella */
.md-vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.md-spalte{display:grid;gap:.7rem;align-content:start;padding:1.25rem;border-radius:var(--r-l);border:1px solid var(--linie);background:#fff}
.md-spalte.voll{border:0;background:linear-gradient(#fff,#fff) padding-box,var(--verlauf) border-box;border:2px solid transparent;box-shadow:var(--schatten)}
.md-spalte small{font:800 .68rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--leise)}
.md-spalte.voll small{color:var(--marke)}
.md-spalte h3{font:900 1.25rem/1.15 var(--display);letter-spacing:-.03em;color:var(--tinte)}
.md-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.md-spalte li{position:relative;padding-left:1.6rem;font-size:.97rem;line-height:1.55;color:var(--text)}
.md-spalte li::before{content:"";position:absolute;left:0;top:.2rem;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b72f67' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat}
.md-spalte p{font-size:.92rem;line-height:1.55;color:var(--leise)}
.md-spalte .knopf{justify-self:start;margin-top:.3rem}
.md-teilen{display:grid;gap:.5rem;padding:1.1rem 1.25rem;border-radius:var(--r-m);border:1.5px dashed #e3bfd3;background:linear-gradient(135deg,#fdf5f9,#fff)}
.md-teilen h3{font:800 1.05rem var(--display);color:var(--tinte)}
.md-teilen p{font-size:.98rem;line-height:1.6;color:var(--text)}
.md-teilen a{color:var(--marke);font-weight:700}

@media (max-width:900px){
  .seite-mini .al-artikel{grid-template-columns:minmax(0,48rem)}
  .md-fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .md-bild{grid-template-columns:minmax(0,1fr)}
  .md-paar,.md-wege,.md-vergleich{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .md-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-schritt-kopf{gap:.7rem}
  .md-nr{width:2.4rem;height:2.4rem;border-radius:.8rem;font-size:1rem}
}