/* E111 Module anschaulich (27.10.2026): Modulseiten /loesungen/m-N/ und Katalog-Karten
   als Karten mit Icon, Vorteilen, Ablauf in 3 Schritten, Zeitleiste und Chips statt
   Datenblöcken in Code-Schrift. Nur Tokens aus tokens.css, Raster 4/8, keine Animation,
   kein Hover-only. Icons: eigene SVG-Pfade (lizenzfrei, im Markup). */

/* Überzeilen ohne Code-Schrift */
main.ma .ds-eyebrow, main.ma .card__eyebrow, main.ma .ds-flow figcaption{font-family:var(--font-sans)!important;font-weight:600;letter-spacing:.04em;font-size:var(--fs-small);color:var(--brand-blue-ink)}

/* Modul-Icon im Kopf */
.ma-kopf{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-2)}
.ma-kopf .ds-eyebrow{margin:0}
.ma-icon{flex:none;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:var(--r-4);background:var(--t-accent-tint);border:1px solid var(--t-accent-border);color:var(--brand-blue-ink)}
.ma-icon svg{width:28px;height:28px}
.ma-svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Preis-Karte (Eckdaten) */
.ma-preis{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-0) var(--space-1);margin:0 0 var(--space-1)}
.ma-preis__ab,.ma-preis__per{font-size:var(--fs-body);color:var(--t-ink-2)}
.ma-preis__zahl{font-family:var(--font-sans);font-size:clamp(32px,3.2vw,44px);line-height:1.1;font-weight:600;color:var(--t-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
main.ma .ds-hero__aside .ds-stufen--frei li{position:relative;padding-left:var(--space-3)}
main.ma .ds-hero__aside .ds-stufen--frei li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;border-left:2px solid var(--t-emerald);border-bottom:2px solid var(--t-emerald);transform:rotate(-45deg)}

/* Drei Vorteile (aus den Zielwerten) */
.ma-vorteile,main.ma .ds-body .ma-vorteile{list-style:none;margin:var(--space-2) 0;padding:0;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.ma-vorteil{display:flex;gap:var(--space-1-5);align-items:flex-start;margin:0;padding:var(--space-2);background:var(--t-raised);border:1px solid var(--line-2);border-radius:var(--r-3);font-size:var(--fs-body);line-height:1.45;color:var(--t-ink);max-width:none!important;overflow-wrap:anywhere;hyphens:auto}
.ma-vorteil>span{min-width:0;hyphens:auto}
.ma-vorteil svg{flex:none;width:24px;height:24px;color:var(--t-emerald);margin-top:2px}
main.ma .ds-ziel{padding:var(--space-3)}

/* Ablauf in 3 Schritten */
main.ma .ds-flow .ds-flow__phasen{counter-reset:ma-schritt}
main.ma .ds-flow .ds-flow__phase{counter-increment:ma-schritt;padding:var(--space-3) var(--space-2) var(--space-2);background:var(--t-raised);border:1px solid var(--line-2);border-radius:var(--r-4)}
main.ma .ds-flow .ds-flow__phase+.ds-flow__phase::before,main.ma .ds-flow .ds-flow__phase+.ds-flow__phase::after{display:none}
main.ma .ds-flow .ds-flow__ph{display:flex;align-items:center;gap:var(--space-1-5);font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:600;letter-spacing:0;text-transform:none;color:var(--t-ink);margin:0 0 var(--space-2)}
main.ma .ds-flow .ds-flow__ph::before{content:counter(ma-schritt);flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--t-accent-interactive);color:var(--t-fg-on-accent);font-size:var(--fs-body);font-weight:700}
.ma-schritt-icon{display:block;width:40px;height:40px;margin:0 0 var(--space-2);color:var(--brand-blue-ink)}
main.ma .ds-flow .ds-flow__schritte li{background:none;border:0;border-radius:0;padding:0 0 0 var(--space-3);color:var(--t-ink-2)}
main.ma .ds-flow .ds-flow__schritte li::before,main.ma .ds-flow .ds-flow__schritte li+li::before{content:"";position:absolute;left:var(--space-0);top:.6em;width:8px;height:8px;border-radius:50%;background:var(--brand-blue-ink)}
@media (min-width:1024px){main.ma .ds-flow .ds-flow__phase+.ds-flow__phase::before{display:block;content:"";position:absolute;left:calc(-1 * var(--space-6) / 2 - 8px);top:var(--space-5);width:16px;height:16px;border:0;border-top:2px solid var(--brand-blue-ink);border-right:2px solid var(--brand-blue-ink);background:none;transform:rotate(45deg)}}

/* Einrichtung als Zeitleiste */
main.ma .ds-body .ma-zeit{list-style:none;margin:var(--space-2) 0 var(--space-3);padding:0}
.ma-zeit li{position:relative;margin:0;padding:0 0 var(--space-2) var(--space-4);max-width:min(68ch,34em)}
.ma-zeit li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--t-accent-interactive);box-shadow:0 0 0 4px var(--t-accent-tint)}
.ma-zeit li+li::after{content:"";position:absolute;left:9px;top:calc(-1 * var(--space-2) + .45em + 12px);width:2px;height:calc(var(--space-2) - 12px + .45em);background:var(--line-2)}
.ma-zeit__tag{display:block;font-weight:700;color:var(--brand-blue-ink)}

/* Sonderfälle als Chips */
main.ma .ds-body .ma-chips{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1)}
.ma-chips li{margin:0;padding:var(--space-1) var(--space-2);border:1px solid var(--line-2);border-radius:var(--r-5);background:var(--t-raised);color:var(--t-ink);font-size:var(--fs-body);line-height:1.4;max-width:100%!important;overflow-wrap:anywhere}

/* Katalog-Karten: technischer Stand ohne Code-Schrift, Modulnummer als Plakette */
.m-detail-tech .m-detail-note{font-family:var(--font-sans)!important;color:var(--t-ink-2)}
.m-detail-tech{border-left-color:var(--brand-blue-ink)!important}
.m-detail-tech h4{color:var(--brand-blue-ink)!important;letter-spacing:.04em}
.m-detail-id{font-family:var(--font-sans)!important;font-weight:700;display:inline-grid;place-items:center;min-width:40px;padding:var(--space-0) var(--space-1);border-radius:var(--r-2);background:var(--t-accent-tint);border:1px solid var(--t-accent-border);color:var(--brand-blue-ink)!important}