/* ==========================================================================
   WkD, Seite "So lernst du bei WkD" (so-lernst-du.html, 6 Sprachen)
   Seit 30.10.2026 (Daniel): alle Vorteile auf einer Seite, klar und
   wahr, damit Menschen und KI-Assistenten sie finden. Nur diese Seite
   laedt die Datei; style.css bleibt unveraendert. Logische Eigenschaften
   (inline-start ...), damit Arabisch und Persisch (rtl) stimmen.
   ========================================================================== */

.sl-abschnitt h2{font:800 clamp(26px,3.4vw,38px)/1.15 'Manrope',sans-serif;letter-spacing:-.02em;margin:0 0 14px;color:var(--text)}
.sl-kicker{display:inline-block;font:800 13px 'Manrope',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--lila);margin:0 0 10px}
.sl-intro{max-width:780px;color:#3a2d47;font-size:17.5px;line-height:1.7;margin:0 0 30px}
.sl-intro a,.sl-liste a,.sl-text a,.sl-faq a{color:var(--lila);font-weight:700}
.sl-hell{background:var(--rosa)}

/* Auf einen Blick */
.sl-fakten{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sl-fakten li{background:#fff;border:1.5px solid var(--rahmen);border-radius:18px;padding:18px 18px 20px}
.sl-fakten b{display:block;font:800 17px/1.3 'Manrope',sans-serif;color:var(--text);margin:0 0 6px}
.sl-fakten span{display:block;color:var(--grau);font-size:14.5px;line-height:1.5}

/* Karten */
.sl-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sl-karten.vier{grid-template-columns:repeat(4,1fr)}
.sl-karte{background:#fff;border:1.5px solid #f0e6f5;border-radius:20px;padding:22px 22px 24px;box-shadow:0 6px 24px rgba(34,4,61,.06)}
.sl-karte::before{content:"";display:block;width:36px;height:5px;border-radius:9px;margin:0 0 14px;
  background:linear-gradient(90deg,#9700ee,var(--lila-hell))}
.sl-karte h3{font:800 18px/1.3 'Manrope',sans-serif;margin:0 0 8px;color:var(--text)}
.sl-karte p{margin:0;color:#4a3d57;line-height:1.6;font-size:15.5px}

/* Das Besondere: dunkel abgesetzt */
.sl-dunkel{background:var(--dunkel);color:#fff}
.sl-dunkel h2{color:#fff}
.sl-dunkel .sl-kicker{color:var(--limette)}
.sl-dunkel .sl-intro{color:#ded4e5}
.sl-dunkel .sl-karte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.sl-dunkel .sl-karte::before{background:var(--limette)}
.sl-dunkel .sl-karte h3{color:#fff}
.sl-dunkel .sl-karte p{color:#ded4e5}

/* Schritt 1 */
.sl-schritt{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;max-width:880px}
.sl-zahl{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#9700ee,var(--lila-hell));color:#fff;font:800 28px 'Manrope',sans-serif}
.sl-text p{color:#3a2d47;font-size:17px;line-height:1.75;margin:0}

/* Pruefungen */
.sl-pillen{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:10px}
.sl-pillen li{padding:8px 15px;border-radius:999px;background:#fff;border:1.5px solid var(--lila);font-weight:700;font-size:15px;color:var(--text)}
.sl-hinweis{max-width:780px;border-inline-start:4px solid var(--lila);background:#fff;padding:14px 18px;border-radius:12px;color:#3a2d47;line-height:1.6;margin:18px 0 0}

/* Fuer wen */
.sl-liste{list-style:none;padding:0;margin:0 0 22px;max-width:820px}
.sl-liste li{position:relative;padding-inline-start:34px;margin:0 0 12px;font-size:17px;line-height:1.6;color:#3a2d47}
.sl-liste li::before{content:"";position:absolute;inset-inline-start:0;top:.25em;width:20px;height:20px;border-radius:50%;
  background:var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%2322043d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.sl-links{display:flex;flex-wrap:wrap;gap:10px}

/* Fragen */
.sl-faq{max-width:860px}
.sl-faq details{border-bottom:1.5px solid var(--rahmen);padding:16px 0}
.sl-faq summary{font:800 17.5px/1.4 'Manrope',sans-serif;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--text)}
.sl-faq summary::-webkit-details-marker{display:none}
.sl-faq summary::after{content:"+";color:var(--lila);font-size:22px;line-height:1}
.sl-faq details[open] summary::after{content:"\2212"}
.sl-faq p{margin:10px 0 0;line-height:1.7;color:#3a2d47;font-size:16.5px}

.sl-knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

@media (max-width:980px){
  .sl-fakten,.sl-karten.vier{grid-template-columns:repeat(2,1fr)}
  .sl-karten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .sl-fakten,.sl-karten,.sl-karten.vier{grid-template-columns:1fr}
  .sl-schritt{grid-template-columns:1fr;gap:14px}
  .sl-zahl{width:52px;height:52px;font-size:23px}
}

/* Bilder (echte Bildschirmfotos des Lernportals mit Testdaten, 30.10.2026) */
.sl-bild{margin:0 0 30px;max-width:1100px}
.sl-bild img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 14px 40px rgba(34,4,61,.12)}
.sl-dunkel .sl-bild img{box-shadow:0 14px 40px rgba(0,0,0,.35)}
@media (max-width:640px){.sl-bild img{border-radius:16px}}