/* =============================================================
   Landingpage-Bausteine (.mks-…), seit 1.21.0, 2026-10-23.
   Vorher als <style> im ersten Block von https://minoka.de/akademie/ai-literacy/
   (minoka-content tools/akademie_landing.py, Konstante STIL). Lädt nur auf Seiten,
   deren Inhalt `mks-` trägt (landing.php), und im Editor.
   Baut auf global.css: .minoka-hero, .minoka-section, .minoka-card, .minoka-overline,
   .minoka-btn-primary, .minoka-btn-outline-link.
   Muster dazu: minoka/landing-* (muster/landing-*.html).
   ============================================================= */

/* Kopf mit Trainerkarte und Vertrauensleiste */
.minoka-hero.mks-hero{ text-align:left; padding:96px 24px 0; }
.minoka-hero.mks-hero > *{ max-width:1160px; }
.mks-hero-grid{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:56px; align-items:center; }
.mks-hero h1, .mks-hero .minoka-hero-subline{ text-align:left; margin-left:0; margin-right:0; }
.mks-hero .minoka-hero-subline{ max-width:600px; }
.mks-knoepfe{ display:flex; gap:14px; flex-wrap:wrap; }
a.mks-btn-hell{ display:inline-block; color:#fff; text-decoration:none; font-weight:600; padding:12px 24px; border-radius:10px; border:2px solid #64748b; }
a.mks-btn-hell:hover{ border-color:#93c5fd; color:#fff; }
.mks-trainer{ margin:0; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:20px; }
.mks-trainer figcaption{ font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:#93c5fd; }
.mks-person{ display:flex; gap:16px; align-items:flex-start; }
.mks-person img{ width:80px; height:80px; border-radius:50%; object-fit:cover; flex:none; }
.mks-person p{ margin:0; font-size:15px; line-height:1.45; }
.mks-trainer .mks-person p{ color:#cbd5e1; }
.mks-trainer .mks-person p.mks-name{ color:#fff; font-weight:700; font-size:19px; margin-bottom:2px; }
.mks-leiste{ margin-top:64px; border-top:1px solid rgba(255,255,255,0.14); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:22px 0; }
.mks-leiste p{ margin:0; font-size:15px; line-height:1.5; color:#cbd5e1; }
.mks-leiste strong{ display:block; color:#fff; }

/* Breite Abschnitte (1160 px) und Raster */
.minoka-section.mks-breit > *{ max-width:1160px; }
.mks-g2, .mks-g3, .mks-g4{ display:grid; gap:24px; margin-top:28px; margin-bottom:0; padding:0; list-style:none; }
.mks-innen > p, .mks-innen > h2{ max-width:760px; }
.mks-innen > .minoka-overline{ margin-bottom:8px; }
.mks-innen > h2{ margin-top:0; }
.mks-innen ol.mks-g4{ margin-left:0; padding-left:0; }
.mks-innen > .has-small-font-size{ margin-top:14px; }
.mks-g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mks-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mks-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Zahlen und Nummern: `.minoka-card p` (global.css, 0-1-1) schlägt eine einfache Klasse,
   deshalb hier immer mit Karte oder Abschnitt davor (0-2-1). */
.mks-breit p.mks-zahl, .minoka-card p.mks-zahl{ font-weight:800; font-size:48px; line-height:1; color:var(--minoka-blau-text,#2B6CB0); margin:0 0 12px; }
.mks-modul{ border-top:3px solid var(--minoka-blau-text,#2B6CB0); padding-top:18px; }
.mks-modul h3, .mks-schritt h3{ font-size:20px; margin:6px 0 8px; }
.mks-breit .mks-modul p, .mks-breit .mks-schritt p{ margin:0; font-size:16px; line-height:1.6; }
.mks-breit p.mks-nr, .minoka-card p.mks-nr{ margin:0; font-weight:800; color:var(--minoka-blau-text,#2B6CB0); }
.mks-breit .mks-schritt p.mks-nr, .minoka-card.mks-schritt p.mks-nr{ font-size:28px; }

/* Passung: Karten mit Haken (<ul class="mks-g2 mks-fit"> mit <li class="minoka-card">), Knöpfe unter einem Abschnitt.
   Seit 1.21.1 aus minoka-content tools/leistungen_landing.py (STIL_LEISTUNG). */
.mks-fit li{ position:relative; padding-left:52px; font-size:16px; line-height:1.6; }
.mks-fit li::before{ content:""; position:absolute; left:24px; top:26px; width:7px; height:13px; border:solid var(--minoka-blau-text,#2B6CB0); border-width:0 3px 3px 0; transform:rotate(45deg); }
.mks-innen > .mks-knoepfe{ margin-top:28px; }

/* Dunkler Abschnitt mit Werkzeug-Karten */
.minoka-section.mks-dunkel{ background:var(--global-palette3,#1A202C); color:#fff; }
.mks-dunkel h2, .mks-dunkel p{ color:#fff; }
.mks-dunkel .minoka-overline{ color:#93c5fd; }
.mks-dunkel p.mks-hell{ color:#cbd5e1; }
a.mks-werkzeug{ display:flex; flex-direction:column; gap:8px; text-decoration:none; color:#fff; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:22px; }
a.mks-werkzeug:hover{ border-color:#93c5fd; color:#fff; }
.mks-werkzeug strong{ font-size:18px; }
.mks-werkzeug span{ color:#cbd5e1; font-size:15px; line-height:1.5; }
.mks-werkzeug span.mks-oeffnen{ color:#93c5fd; font-weight:700; }

/* Anfrage mit Ansprechpartner */
.mks-kontakt{ text-align:left; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px; align-items:start; margin-top:28px; }
.mks-ansprech{ display:flex; flex-direction:column; gap:12px; }
.mks-ansprech p{ margin:0; }
.mks-ansprech a{ font-weight:700; }

@media (max-width:960px){
  .mks-hero-grid, .mks-kontakt{ grid-template-columns:minmax(0,1fr); }
  .mks-g3, .mks-g4, .mks-leiste{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .mks-g2, .mks-g3, .mks-g4, .mks-leiste{ grid-template-columns:minmax(0,1fr); }
  .mks-leiste{ margin-top:40px; }
}