/* iMac-Reparatur (app/content/seiten/imac-reparatur.php) */

/* Kopf: Text links, Kurzdaten rechts wie ein Datenblatt */
.imac-kopf { padding-top: 24px; }
.imac-kopf .gross { max-width: 50ch; }
.imac-kopf__bewertung { margin: 20px 0 0; }
.imac-kurz { margin: 0; border-top: 2px solid var(--schwarz); align-self: end; }
.imac-kurz > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--alu); }
.imac-kurz dt { font: 400 .78rem/1.9 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.imac-kurz dd { margin: 0; font-weight: 600; }
@media (max-width: 420px) {
  .imac-kurz > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
}

/* Fehlerbilder: Überschrift links (klebt), nummerierte Liste rechts */
.imac-raster { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) {
  .imac-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
  .imac-raster__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.imac-raster__kopf p:not(.etikett) { color: var(--text-2); max-width: 40ch; }
.imac-fehler { list-style: none; margin: 0; padding: 0; counter-reset: fehler; border-top: 2px solid var(--schwarz); }
@media (min-width: 700px) { .imac-fehler { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.imac-fehler li { counter-increment: fehler; position: relative; padding: 22px 0 22px 46px; border-bottom: 1px solid var(--alu); }
.imac-fehler li::before { content: counter(fehler, decimal-leading-zero); position: absolute; left: 0; top: 24px; font: 700 .95rem var(--din); color: var(--rot); letter-spacing: .04em; }
.imac-fehler .h4 { margin-bottom: .3em; }
.imac-fehler__ursache { margin: 0 0 .6em; font: 400 .76rem/1.5 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); }
.imac-fehler p:last-child { margin: 0; color: var(--text-2); font-size: .98rem; }

/* Werkstatt: Liste links, Schema rechts */
.imac-werkstatt { align-items: start; }
.imac-werkstatt .liste-haken li { margin-bottom: 12px; }
.imac-werkstatt__zwischen { margin-top: 1.6em; }
.imac-schema { margin: 0; }
@media (min-width: 900px) { .imac-schema { position: sticky; top: calc(var(--kopf-h) + 32px); } }
.imac-schema__bild { background: #fff; border-radius: var(--radius-gross); padding: clamp(14px, 2.5vw, 28px); }
.imac-schema svg { width: 100%; height: auto; }
.imac-schema .s-glas { fill: var(--schwarz); }
.imac-schema .s-panel { fill: var(--graphit-2); }
.imac-schema .s-spiegel { fill: #fff; opacity: .06; }
.imac-schema .s-gehaeuse { fill: none; stroke: var(--schwarz); stroke-width: 2; }
.imac-schema .s-kinn { stroke: var(--alu); stroke-width: 1.5; }
.imac-schema .s-fuss { fill: var(--werkbank); stroke: var(--schwarz); stroke-width: 2; stroke-linejoin: round; }
.imac-schema .s-sockel { fill: var(--schwarz); }
.imac-schema .s-teil { fill: var(--werkbank); stroke: var(--stahl); stroke-width: 1.5; }
.imac-schema .s-chip { fill: var(--graphit-2); }
.imac-schema .s-nabe { fill: var(--stahl); }
.imac-schema .s-platte { fill: #fff; stroke: var(--alu); stroke-width: 1.5; }
.imac-schema .s-bahn { fill: none; stroke: var(--stahl); stroke-width: 1.5; stroke-linecap: round; }
.imac-schema .s-kleber { fill: none; stroke: var(--rot); stroke-width: 3; stroke-dasharray: 12 7; }
.imac-schema .s-nr circle { fill: var(--rot); }
.imac-schema .s-nr text { fill: #fff; font: 700 13px var(--din); text-anchor: middle; dominant-baseline: central; }
/* Am Handy schrumpft das Schema auf gut die Hälfte – Nummern größer, damit sie lesbar bleiben */
@media (max-width: 599px) {
  .imac-schema .s-nr circle { r: 18px; }
  .imac-schema .s-nr text { font-size: 20px; }
}
.imac-schema__legende { list-style: none; counter-reset: teil; margin: 18px 0 0; padding: 0; display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); font-size: .95rem; }
.imac-schema__legende li { counter-increment: teil; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.imac-schema__legende li::before { content: counter(teil); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--rot); color: #fff; font: 700 .78rem/1 var(--din); }
.imac-schema figcaption { margin-top: 14px; font-size: .85rem; color: var(--stahl); }

/* Datenrettung: Preise im dunklen Kasten */
.imac-preise { align-self: start; }
.imac-preise .h4 { color: #fff; margin-bottom: 14px; }
.imac-preise dl { margin: 0 0 18px; border-top: 1px solid rgb(255 255 255 / .2); }
.imac-preise dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgb(255 255 255 / .2); }
.imac-preise dt { font-weight: 600; }
.imac-preise dd { margin: 0; text-align: right; font: 700 1.3rem/1.2 var(--din); color: #fff; white-space: nowrap; }
.imac-preise small { display: block; margin-top: 4px; font: 400 .86rem/1.4 var(--sans); color: var(--text-hell-2); }
.imac-preise p { margin: 0; font-size: .94rem; }
.imac-preise a { color: #fff; }
.imac-preise a:hover { color: var(--glut); }
@media (max-width: 420px) {
  .imac-preise dl > div { flex-direction: column; gap: 6px; }
  .imac-preise dd { text-align: left; }
}

/* Preis in drei Schritten */
.imac-preis__text { margin-bottom: 40px; }

/* Bringen oder schicken */
.imac-wege { margin-top: clamp(28px, 1rem + 2vw, 48px); }
.imac-wege .h3 { margin-bottom: .6em; }
.imac-wege__zeiten { font-variant-numeric: tabular-nums; }
.imac-weiter { margin-top: clamp(40px, 2rem + 3vw, 80px); padding-top: 28px; border-top: 1px solid var(--alu); }
.imac-weiter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 36px; }
.imac-weiter .pfeil-link { color: var(--schwarz); }
.imac-weiter .pfeil-link:hover { color: var(--rot); }