/* MacBook-Datenrettung (app/content/seiten/macbook-datenrettung.php) – Präfix mbd- */

/* Kopf: Brotkrumen im dunklen Band, Titel etwas kleiner als der Standard, weil er lang ist */
.mbd-kopf { padding-top: 24px; }
.mbd-krumen { padding-top: 0; margin-bottom: 40px; }
.mbd-krumen ol { color: var(--text-hell-2); }
.mbd-krumen li:not(:last-child)::after { color: var(--stahl); }
.mbd-krumen a { color: #fff; }
.mbd-krumen a:hover { color: #fff; text-decoration: underline; }
.mbd-kopf__titel { font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.9rem); max-width: 17ch; }
.mbd-kopf .platine__inhalt .gross { max-width: 50ch; }
.mbd-kopf__preis { flex-wrap: wrap; margin: 28px 0 0; row-gap: 4px; }
.mbd-kopf__preis span:last-child { letter-spacing: .08em; }
.mbd-kopf__klein { margin: 18px 0 0; color: var(--text-hell-2); font-size: .95rem; }
.mbd-kopf__klein a { color: #fff; }

/* Warum: Text links, Skizze rechts */
.mbd-warum { align-items: start; }
.mbd-warum p { max-width: 62ch; }
.mbd-warum p strong { font-weight: 600; }
.mbd-skizze { margin: 0; }
@media (min-width: 900px) { .mbd-skizze { margin-top: 44px; } }
.mbd-skizze svg { width: 100%; height: auto; }
.mbd-skizze__board { fill: var(--werkbank); stroke: var(--schwarz); stroke-width: 1.5; }
.mbd-skizze__loch circle { fill: #fff; stroke: var(--stahl); stroke-width: 1.2; }
.mbd-skizze__leitung path { fill: none; stroke: #A9AEB6; stroke-width: 2; }
.mbd-skizze__teil rect, .mbd-skizze__teil circle { fill: #fff; stroke: var(--schwarz); stroke-width: 1.2; }
.mbd-skizze__teil .mbd-skizze__buchse { fill: var(--alu); }
.mbd-skizze__chip { fill: var(--graphit); stroke: var(--schwarz); stroke-width: 1.5; }
.mbd-skizze__kern { fill: var(--graphit-2); stroke: var(--stahl); stroke-width: 1; }
.mbd-skizze__chiptext { fill: var(--text-hell); font: 700 16px var(--din); letter-spacing: .06em; text-anchor: middle; }
.mbd-skizze__speicher rect { fill: #fff; stroke: var(--schwarz); stroke-width: 1.5; }
.mbd-skizze__speicher path { stroke: var(--schwarz); stroke-width: 1.5; }
.mbd-skizze__speicher text { fill: var(--stahl); font: 700 14px var(--din); letter-spacing: .12em; text-anchor: middle; }
.mbd-skizze__schluessel { fill: none; stroke: var(--rot); stroke-width: 3; stroke-dasharray: 8 6; animation: mbd-strom 1.4s linear infinite; }
@keyframes mbd-strom { to { stroke-dashoffset: -28; } }
.ruhig .mbd-skizze__schluessel { animation: none; }
@media (prefers-reduced-motion: reduce) { .mbd-skizze__schluessel { animation: none; } }
.mbd-skizze__nr circle { fill: var(--rot); }
.mbd-skizze__nr text { fill: #fff; font: 700 18px var(--din); text-anchor: middle; }
.mbd-legende { list-style: none; margin: 22px 0 10px; padding: 0; border-top: 2px solid var(--schwarz); }
.mbd-legende li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--alu); font-size: .96rem; color: var(--text-2); }
.mbd-legende strong { color: var(--schwarz); font-weight: 600; }
.mbd-legende__nr { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--rot); color: #fff; display: inline-grid; place-items: center; font: 700 .82rem/1 var(--din); translate: 0 -1px; }
.mbd-skizze figcaption { font-size: .82rem; color: var(--stahl); }

/* Modelle nach Bauart */
.mbd-modelle__kopf p:not(.etikett) { max-width: 64ch; color: var(--text-2); }
/* je Bauart eine Zeile: links Einordnung, rechts die Modelle in Spalten */
.mbd-modelle { margin-top: 36px; border-top: 2px solid var(--schwarz); }
.mbd-gruppe { display: grid; gap: 14px 56px; padding: 26px 0 30px; border-bottom: 1px solid var(--alu); }
@media (min-width: 900px) { .mbd-gruppe { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.mbd-gruppe .etikett { margin-bottom: .7em; }
.mbd-gruppe__kopf p:not(.etikett) { color: var(--text-2); font-size: .98rem; max-width: 42ch; margin: 0; }
.mbd-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); column-gap: 32px; align-content: start; }
.mbd-liste a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--alu); text-decoration: none; font-weight: 600; }
.mbd-liste a::after { content: "→"; color: var(--stahl); font-weight: 400; transition: transform .15s, color .15s; }
.mbd-liste a:hover { color: var(--rot); }
.mbd-liste a:hover::after { color: var(--rot); transform: translateX(3px); }
.mbd-modelle__fuss { margin: 32px 0 0; color: var(--text-2); max-width: 72ch; }

/* Ausgangslagen: Zeilen wie ein Datenblatt */
.mbd-faelle { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--schwarz); }
.mbd-faelle li { display: grid; gap: 8px 48px; padding: 24px 0; border-bottom: 1px solid var(--alu); }
@media (min-width: 800px) { .mbd-faelle li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.mbd-faelle .h4 { margin: 0; font-size: 1.25rem; }
.mbd-faelle p { color: var(--text-2); margin: 0 0 .6em; max-width: 64ch; }
.mbd-faelle p:last-child { margin-bottom: 0; }
.mbd-faelle .pfeil-link { color: var(--rot); }

/* Ablauf: Überschrift bleibt neben den Schritten stehen */
@media (min-width: 900px) { .mbd-ablauf__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); align-self: start; } }
.mbd-bis { align-self: start; }

/* Preis */
.mbd-preisteil { align-items: start; }
.mbd-preis { margin: 0; display: grid; border-top: 2px solid var(--schwarz); }
@media (min-width: 560px) { .mbd-preis { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.mbd-preis > div { padding: 18px 0 22px; border-bottom: 1px solid var(--alu); }
.mbd-preis dt { font: 400 .78rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.mbd-preis dd { margin: 0; color: var(--text-2); font-size: .96rem; max-width: 36ch; }
.mbd-preis .mbd-preis__wert { font: 700 clamp(2.6rem, 2rem + 2vw, 3.6rem)/1.05 var(--din); color: var(--rot); letter-spacing: -.02em; margin: 6px 0 10px; }
.mbd-enthalten { margin-top: 26px; }

/* Grenzen: schließt direkt an die Fragen an */
.mbd-grenzteil { padding-bottom: 0; }
.mbd-grenzen { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--schwarz); }
.mbd-grenzen li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--alu); color: var(--text-2); }
.mbd-grenzen li::before { content: ""; position: absolute; left: 4px; top: calc(16px + .8em); width: 16px; height: 2px; background: var(--rot); }
.mbd-grenzen strong { color: var(--schwarz); font-weight: 600; }

/* Passend dazu */
.mbd-weiter { padding-block: clamp(40px, 1.5rem + 3vw, 88px); }
/* sechs Ziele: drei Spalten (3 + 3) statt 4 + 2; li als Raster, damit die Trennlinien einer Zeile auf einer Höhe liegen */
.mbd-weiter__liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); column-gap: 32px; border-top: 2px solid var(--schwarz); }
.mbd-weiter__liste li { display: grid; }
.mbd-weiter__liste a { position: relative; display: grid; gap: 2px; padding: 16px 30px 16px 0; border-bottom: 1px solid var(--alu); text-decoration: none; }
.mbd-weiter__liste a::after { content: "→"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; color: var(--stahl); transition: transform .15s, color .15s; }
.mbd-weiter__liste strong { font: 700 1.08rem var(--din); letter-spacing: .005em; }
.mbd-weiter__liste span { font-size: .9rem; color: var(--text-2); }
.mbd-weiter__liste a:hover strong, .mbd-weiter__liste a:hover::after { color: var(--rot); }
.mbd-weiter__liste a:hover::after { transform: translateX(3px); }
.mbd-preisteil .h2 { margin-bottom: .7em; }
.mbd-preis__fuss { margin: 12px 0 0; font-size: .85rem; color: var(--stahl); }
@media (min-width: 900px) { .mbd-preis__text { padding-top: 2.2rem; } }
.mbd-preis__text .enthalten { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }