/* Ratgeber „MacBook startet nicht“ (app/content/ratgeber/macbook-startet-nicht.php) – Präfix msn- */

/* Kopf: Titel links, Warnkarte rechts */
.msn-kopf { padding-block: 20px clamp(40px, 1.5rem + 3vw, 72px); border-bottom: 1px solid var(--alu); }
.msn-krumen { padding-top: 0; margin-bottom: clamp(28px, 1rem + 2vw, 48px); }
.msn-kopf__raster { display: grid; gap: 32px; }
@media (min-width: 1000px) { .msn-kopf__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: end; } }
.msn-kopf__titel { font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.9rem); max-width: 15ch; }
.msn-kopf .gross { max-width: 50ch; }
.msn-kopf__meta { margin: 20px 0 0; font: 400 .88rem var(--din); letter-spacing: .06em; color: var(--stahl); }
.msn-kopf__meta span { white-space: nowrap; }

.msn-vorab { padding: 26px 26px 18px; border-top: 3px solid var(--rot); }
.msn-vorab .h4 { color: #fff; font-size: 1.1rem; margin-bottom: 14px; }
.msn-vorab ul { list-style: none; margin: 0; padding: 0; }
.msn-vorab li { padding: 12px 0; border-top: 1px solid rgb(255 255 255 / .12); color: var(--text-hell-2); font-size: .96rem; line-height: 1.5; }
.msn-vorab li strong { color: #fff; font-weight: 600; }
.msn-vorab a { color: #fff; text-decoration-color: var(--glut); }
.msn-vorab a:hover { color: #fff; text-decoration-thickness: 2px; }

/* Körper: Inhaltsverzeichnis links (mitlaufend), Text rechts */
.msn-koerper { padding-block: clamp(40px, 1.5rem + 4vw, 104px) clamp(24px, 1rem + 2vw, 48px); }
.msn-raster { display: grid; gap: 40px; }
@media (min-width: 1000px) {
  .msn-raster { grid-template-columns: 230px minmax(0, 1fr); gap: 72px; align-items: start; }
  .msn-inhalt { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.msn-inhalt .etikett { margin-bottom: .8em; }
.msn-inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: msn; border-top: 2px solid var(--schwarz); }
.msn-inhalt li { counter-increment: msn; border-bottom: 1px solid var(--alu); }
.msn-inhalt a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 10px 0; text-decoration: none; font: 500 .98rem/1.3 var(--din); color: var(--text); }
.msn-inhalt a::before { content: counter(msn, decimal-leading-zero); font-weight: 700; font-size: .85rem; color: var(--rot); }
.msn-inhalt a:hover { color: var(--rot); }
@media (min-width: 560px) and (max-width: 999px) { .msn-inhalt ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } }

.msn-text { max-width: 72ch; min-width: 0; }
.msn-schritt { padding-bottom: clamp(36px, 1.5rem + 2vw, 56px); margin-bottom: clamp(36px, 1.5rem + 2vw, 56px); border-bottom: 1px solid var(--alu); scroll-margin-top: calc(var(--kopf-h) + 24px); }
.msn-schritt:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.msn-schritt > .etikett { margin-bottom: .7em; }
.msn-text h2 { font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: .6em; }
.msn-text h3 { font-size: 1.15rem; line-height: 1.25; margin-bottom: .4em; }
.msn-text p, .msn-text li, .msn-text dd { color: var(--text-2); }
.msn-text strong { color: var(--text); font-weight: 600; }
.msn-text p a:not(.knopf), .msn-text li a, .msn-text dd a { text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; }
.msn-extern::after { content: "\2009\2197"; font-size: .85em; color: var(--stahl); text-decoration: none; display: inline-block; }
.msn-quelle { font-size: .92rem; }

/* Werkstatt-Notiz mit Messwerten */
.msn-notiz { margin: 28px 0 0; padding: 20px 22px 8px; background: var(--werkbank); border-left: 3px solid var(--rot); border-radius: 0 4px 4px 0; }
.msn-notiz .etikett { margin-bottom: .6em; }
.msn-notiz dl { margin: 0; }
.msn-notiz dl div { display: grid; gap: 4px 20px; padding: 12px 0; border-top: 1px dashed var(--alu); }
@media (min-width: 560px) { .msn-notiz dl div { grid-template-columns: 11rem 1fr; } }
.msn-notiz dt { font: 600 .9rem/1.5 var(--mono); color: var(--schwarz); }
.msn-notiz dd { margin: 0; font-size: .96rem; }

/* Fünf Proben: nummerierte Liste mit kantigen Ziffern */
.msn-proben { list-style: none; margin: 0 0 1.4em; padding: 0; counter-reset: probe; border-top: 1px solid var(--alu); }
.msn-proben li { counter-increment: probe; position: relative; padding: 14px 0 14px 46px; border-bottom: 1px solid var(--alu); }
.msn-proben li::before { content: counter(probe); position: absolute; left: 0; top: 13px; width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--schwarz); border-radius: 3px; font: 700 .9rem/1 var(--din); color: var(--schwarz); }

/* Apple-Chip / Intel nebeneinander */
.msn-chips { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 700px) { .msn-chips { grid-template-columns: 1fr 1fr; } }
.msn-chip { padding: 20px 22px 6px; border: 1px solid var(--alu); border-top: 3px solid var(--schwarz); border-radius: 0 0 4px 4px; background: #fff; }
.msn-chip .etikett { margin-bottom: .5em; }
.msn-chip p { font-size: .98rem; }

/* Startbildschirme als kleine Bildschirme */
.msn-symbole { list-style: none; margin: 28px 0 24px; padding: 0; display: grid; gap: 32px 28px; }
@media (min-width: 640px) { .msn-symbole { grid-template-columns: 1fr 1fr; } }
.msn-symbol svg { width: calc(100% - 12px); height: auto; margin: 6px 6px 20px; border-radius: 3px; box-shadow: 0 0 0 5px var(--graphit), 0 0 0 6px var(--graphit-2); }
.msn-symbol h3 { color: var(--text); }
.msn-symbol p { font-size: .98rem; margin-bottom: 0; }
.msn-symbol__schirm { fill: var(--schwarz); }
.msn-symbol__linie { fill: none; stroke: var(--alu); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.msn-symbol__linie--dick { stroke-width: 5; }
.msn-symbol__text { fill: var(--alu); font: 700 38px var(--din); text-anchor: middle; }
.msn-symbol__punkt { fill: var(--alu); }
.msn-symbol__balken { fill: var(--graphit-2); }
.msn-symbol__fuellung { fill: var(--alu); }

/* Wege in die Wiederherstellung */
.msn-wege { margin: 20px 0 12px; border-top: 2px solid var(--schwarz); }
.msn-wege div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--alu); }
@media (min-width: 560px) { .msn-wege div { grid-template-columns: 8.5rem 1fr; } }
.msn-wege dt { font: 700 1rem/1.5 var(--din); color: var(--schwarz); }
.msn-wege dd { margin: 0; }

/* Anzeichen für die Platine */
.msn-zeichen { list-style: none; margin: 0 0 1.2em; padding: 0; }
.msn-zeichen li { position: relative; padding: 0 0 14px 26px; }
.msn-zeichen li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border: 2px solid var(--rot); border-radius: 50%; }
.msn-zeichen li a { white-space: nowrap; }

/* Preise */
.msn-preise { margin-top: 32px; padding: 24px 24px 8px; background: var(--werkbank); border-radius: 4px; }
.msn-preise .h4 { margin-bottom: 14px; }
.msn-preise .preisband { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.msn-preise .preisband li { padding: 13px 2px; }
.msn-preise .preisband a { color: var(--text); font-weight: 500; text-decoration-color: var(--alu); }
.msn-preise .preisband a:hover { color: var(--rot); text-decoration-color: var(--rot); }
.msn-preise__fuss { margin: 16px 0 0; font-size: .88rem; }
.msn-preise .knopf-reihe { margin: 18px 0 16px; }

/* Abschluss mit Einsendung */
.msn-cta { margin-top: 28px; padding: clamp(24px, 1rem + 2vw, 36px); border-radius: 4px; }
.msn-cta .h3 { color: #fff; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.msn-cta p { color: var(--text-hell-2); }
.msn-cta p a:not(.knopf) { color: #fff; text-decoration-color: var(--glut); }
.msn-cta p a:not(.knopf):hover { color: #fff; text-decoration-thickness: 2px; }
.msn-cta .knopf-reihe { margin: 20px 0 0; }

/* Weiterlesen */
.msn-weiter { padding-block: clamp(40px, 1.5rem + 3vw, 88px); }
.msn-weiter__liste { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); column-gap: 32px; border-top: 2px solid var(--schwarz); }
.msn-weiter__liste a { position: relative; display: grid; gap: 2px; padding: 16px 30px 16px 0; border-bottom: 1px solid var(--alu); text-decoration: none; }
.msn-weiter__liste a::after { content: "→"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; color: var(--stahl); transition: transform .15s, color .15s; }
.msn-weiter__liste strong { font: 700 1.08rem var(--din); letter-spacing: .005em; }
.msn-weiter__liste span { font-size: .9rem; color: var(--text-2); }
.msn-weiter__liste a:hover strong, .msn-weiter__liste a:hover::after { color: var(--rot); }
.msn-weiter__liste a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .msn-weiter__liste a::after { transition: none; } }