/* Themenseite MacBook-Wasserschaden (app/content/seiten/macbook-wasserschaden.php) – nur Ergänzungen zu site.css */

/* ---------- Kopf mit Sofort-Kasten ---------- */
.mbw-kopf { padding-top: 28px; }
.mbw-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.6rem); line-height: 1.02; text-wrap: balance; }
.mbw-kopf .gross { max-width: 50ch; }
.mbw-kopf .kopf-bild { align-items: start; }
@media (min-width: 960px) { .mbw-kopf .kopf-bild { grid-template-columns: 7fr 5fr; } .mbw-sofort { margin-top: 30px; } }

.mbw-sofort { padding: 28px 28px 24px; }
.mbw-sofort .h3 { color: #fff; margin-bottom: 18px; }
.mbw-sofort__tun { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: sofort; }
.mbw-sofort__tun li { counter-increment: sofort; position: relative; padding: 0 0 14px 44px; color: var(--text-hell-2); }
.mbw-sofort__tun li:last-child { padding-bottom: 0; }
.mbw-sofort__tun li::before { content: counter(sofort); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 2px solid var(--glut); border-radius: 50%; font: 700 .95rem/1 var(--din); color: #fff; }
.mbw-sofort__tun strong { color: #fff; font-weight: 600; }
.mbw-sofort__nicht-titel { margin: 0 0 8px; padding-top: 18px; border-top: 1px solid var(--graphit-2); font: 400 .78rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--glut); }
.mbw-sofort__nicht { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mbw-sofort__nicht li { padding: 6px 12px 6px 30px; position: relative; border: 1px solid var(--graphit-2); border-radius: 3px; color: #fff; font-size: .95rem; }
.mbw-sofort__nicht li::before, .mbw-sofort__nicht li::after { content: ""; position: absolute; left: 12px; top: 50%; width: 11px; height: 2px; background: var(--glut); }
.mbw-sofort__nicht li::before { transform: rotate(45deg); }
.mbw-sofort__nicht li::after { transform: rotate(-45deg); }
.karte--dunkel p.mbw-sofort__fuss { margin: 0; font-size: .92rem; }
.mbw-sofort__fuss a { color: #fff; }

/* ---------- Überschrift links (mitlaufend), Inhalt rechts ---------- */
.mbw-raster { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) {
  .mbw-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
  .mbw-raster__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.mbw-raster__kopf p:not(.etikett):not(.mbw-ab) { color: var(--text-2); max-width: 44ch; }

/* ---------- Zeitleiste „Warum Tempo zählt“ ---------- */
.mbw-zeit { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.mbw-zeit li { display: grid; gap: 6px 32px; padding: 22px 0; border-bottom: 1px solid var(--alu); }
@media (min-width: 700px) { .mbw-zeit li { grid-template-columns: 12.5rem 1fr; } }
.mbw-zeit__wann { margin: 0; padding-top: 3px; font: 700 .82rem/1.3 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--rot); }
.mbw-zeit p { margin: 0; color: var(--text-2); max-width: 60ch; }

/* ---------- Werkstatt ---------- */
@media (min-width: 900px) { .mbw-werkstatt__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); align-self: start; } }
.mbw-werkstatt__kopf p:not(.etikett):not(.gross) { color: var(--text-2); max-width: 44ch; }
.schritte a { color: inherit; }

/* ---------- Typische Folgen: Zeichnung + nummerierte Liste ---------- */
.mbw-ausfall-band__kopf { max-width: 720px; margin-bottom: 40px; }
.mbw-ausfall-band__kopf .h2 { color: #fff; }
.mbw-ausfall-band__raster { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) {
  .mbw-ausfall-band__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
  .mbw-zeichnung { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.mbw-zeichnung { margin: 0; }
.mbw-zeichnung svg { width: 100%; height: auto; }
.mbw-zeichnung figcaption { margin-top: 12px; font: 400 .74rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--text-hell-2); }   /* steht im dunklen Band */
.z-gehaeuse { fill: #111215; stroke: #3A3D43; stroke-width: 2; }
.z-scharnier { fill: #26282D; }
.z-tastatur { fill: none; stroke: #5C6068; stroke-width: 1.5; stroke-dasharray: 6 6; }
.z-teil, .z-akku rect { fill: #17181B; stroke: #3A3D43; stroke-width: 1.5; }
.z-platine { fill: #1E2024; stroke: #4A4E55; stroke-width: 1.5; }
.z-chip { fill: #2A2C30; stroke: #5C6068; stroke-width: 1; }
.z-stecker, .z-buchse { fill: #3A3D43; }
.z-bauteile rect { fill: #44474E; }
.z-flex { fill: none; stroke: #4A4E55; stroke-width: 8; }
.z-fluessig { fill: rgb(255 59 47 / .14); stroke: var(--glut); stroke-width: 1.5; stroke-dasharray: 4 4; }
.z-lauf { fill: none; stroke: var(--glut); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 8; animation: mbw-lauf 1.4s linear infinite; }
@keyframes mbw-lauf { to { stroke-dashoffset: -20; } }
.ruhig .z-lauf { animation: none; }
@media (prefers-reduced-motion: reduce) { .z-lauf { animation: none; } }
.z-korrosion circle { fill: var(--glut); }
.z-nr circle { fill: var(--glut); stroke: #111215; stroke-width: 3; }
.z-nr text { fill: #fff; font: 700 16px var(--din); text-anchor: middle; }
/* Am Handy ist die Zeichnung halb so breit – die Nummern wachsen mit, damit sie lesbar bleiben */
@media (max-width: 599px) { .z-nr { transform-box: fill-box; transform-origin: center; transform: scale(1.45); } }

.mbw-ausfall { list-style: none; margin: 0; padding: 0; counter-reset: folge; border-top: 1px solid var(--graphit-2); }
.mbw-ausfall li { counter-increment: folge; position: relative; padding: 20px 0 18px 50px; border-bottom: 1px solid var(--graphit-2); }
.mbw-ausfall li::before { content: counter(folge); position: absolute; left: 0; top: 19px; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--glut); color: #fff; font: 700 .95rem/1 var(--din); }
.mbw-ausfall .h4 { color: #fff; margin-bottom: .4em; }
.mbw-ausfall p { margin: 0; font-size: .98rem; }
.abschnitt--dunkel .mbw-ausfall p.mbw-ausfall__preis { margin-top: 8px; font: 700 .95rem var(--din); color: #fff; letter-spacing: .01em; }

/* ---------- Preise ---------- */
.mbw-ab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 6px 0 18px; font-family: var(--din); }
.mbw-ab span { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.mbw-ab strong { font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1; color: var(--rot); letter-spacing: -.02em; }
.mbw-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.mbw-tabelle__modell { width: 36%; }
.mbw-tabelle th, .mbw-tabelle td { padding: 12px 8px; border-bottom: 1px solid var(--alu); text-align: right; vertical-align: baseline; }
.mbw-tabelle th:first-child { text-align: left; padding-left: 0; }
.mbw-tabelle td:last-child, .mbw-tabelle thead th:last-child { padding-right: 0; }
.mbw-tabelle thead th { font: 400 .72rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); border-bottom: 2px solid var(--schwarz); padding-block: 0 10px; }
.mbw-tabelle tbody th { font-weight: 600; }
.mbw-tabelle a { text-decoration: none; }
.mbw-tabelle a:hover { text-decoration: underline; }
.mbw-tabelle td { font: 700 1.02rem var(--din); white-space: nowrap; }
.mbw-tabelle__leer { color: var(--alu); font-weight: 400; }
.mbw-aeltere { margin-top: 4px; }
.mbw-aeltere summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--alu);
  font: 700 1rem var(--din); letter-spacing: .01em; }
.mbw-aeltere summary::-webkit-details-marker { display: none; }
.mbw-aeltere summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(-45deg); transition: transform .2s; }
.mbw-aeltere[open] summary::before { transform: rotate(45deg); }
.mbw-aeltere summary:hover { color: var(--rot); }
/* Kopfzeile der zweiten Tabelle nur optisch ausblenden – Vorleseprogramme brauchen die Spaltennamen */
.mbw-aeltere .mbw-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mbw-fussnote { margin: 16px 0 0; font-size: .86rem; color: var(--stahl); max-width: 70ch; }

@media (max-width: 699px) {
  .mbw-tabelle, .mbw-tabelle tbody { display: block; }
  .mbw-tabelle colgroup { display: none; }
  .mbw-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mbw-preise > .mbw-tabelle { border-top: 2px solid var(--schwarz); }
  .mbw-tabelle tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 12px 0 10px; border-bottom: 1px solid var(--alu); }
  .mbw-tabelle th, .mbw-tabelle td { border: 0; padding: 2px 0; }
  .mbw-tabelle tbody th { grid-column: 1 / -1; padding-bottom: 6px; font-size: 1.02rem; }
  .mbw-tabelle td { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .95rem; }
  .mbw-tabelle td::before { content: attr(data-label); font: 400 .88rem var(--sans); color: var(--stahl); }
}

/* ---------- Windows-Laptops ---------- */
.mbw-windows { align-self: center; }
.mbw-marken { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.abschnitt--grau .mbw-marken .chip { background: #fff; }
.abschnitt--grau .mbw-marken .chip:hover { background: var(--schwarz); color: #fff; }
.mbw-windows .pfeil-link { color: var(--schwarz); }
.mbw-windows .pfeil-link:hover { color: var(--rot); }
.mbw-klein { font-size: .9rem; color: var(--stahl); max-width: 44ch; }

/* ---------- Einsendung ---------- */
.mbw-einsenden__seite { align-self: start; }
@media (min-width: 900px) { .mbw-einsenden__seite { padding-top: 34px; } }
.mbw-einsenden__seite .hinweis-box { margin-bottom: 32px; }
.mbw-einsenden__seite .hinweis-box p { margin: 0; }
.mbw-einsenden__seite .status { margin-bottom: .8em; }

/* ---------- Weiterlesen ---------- */
.mbw-links { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.mbw-links li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--alu); }
.mbw-links a { font: 700 1.1rem var(--din); text-decoration: none; }
.mbw-links a::after { content: " →"; color: var(--rot); }
.mbw-links span { font-size: .92rem; color: var(--stahl); }