/* Samsung-Display-Reparatur (app/content/seiten/samsung-display-reparatur.php) – Präfix sdr- */

/* Kopf: Text links, eigene Gerätezeichnung mit markiertem Display rechts */
.sdr-kopf { padding-block: 24px 64px; }
.sdr-kopf .gross { max-width: 52ch; }
.sdr-kopf .suche { max-width: 600px; margin: 28px 0 0; }
.sdr-kopf__knoepfe { margin-top: 20px; }
.sdr-kopf .vertrauenszeile { margin-top: 18px; }
.sdr-bild { width: 100%; max-width: 480px; justify-self: center; }
.sdr-bild figcaption { position: relative; z-index: 2; flex: none; font-size: .95rem; color: var(--text-2); text-align: center; }
.sdr-bild figcaption a { font-weight: 600; }
.sdr-bild figcaption strong { font-family: var(--din); color: var(--rot); white-space: nowrap; }
@media (max-width: 959px) {
  .sdr-kopf { padding-bottom: 40px; }
  .sdr-bild { aspect-ratio: 4 / 3; max-width: 440px; max-height: none; justify-self: start; }
}

/* Preisliste: Kopf zweispaltig, darunter je Baureihe eine aufklappbare Zeile */
.sdr-preise__kopf { display: grid; gap: 8px 64px; align-items: end; margin-bottom: 36px; }
.sdr-preise__kopf .h2 { margin-bottom: 0; }
.sdr-preise__kopf p:not(.etikett) { margin: 0; color: var(--text-2); max-width: 58ch; }
@media (min-width: 960px) { .sdr-preise__kopf { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }

.sdr-reihen { border-top: 2px solid var(--schwarz); }
.sdr-reihe { border-bottom: 1px solid var(--alu); }
.sdr-reihe > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 12px 24px; padding: 22px 4px; }
.sdr-reihe > summary::-webkit-details-marker { display: none; }
.sdr-reihe > summary::after { content: ""; width: 14px; height: 14px; justify-self: end;
  background: linear-gradient(var(--rot), var(--rot)) center / 100% 2px no-repeat, linear-gradient(var(--rot), var(--rot)) center / 2px 100% no-repeat; transition: transform .2s; }
.sdr-reihe[open] > summary::after { transform: rotate(45deg); }
.sdr-reihe__name { font: 700 clamp(1.3rem, 1.1rem + .7vw, 1.7rem)/1.15 var(--din); letter-spacing: -.01em; }
.sdr-reihe__zahl { display: block; margin-top: 4px; font: 400 .9rem/1.4 var(--sans); letter-spacing: 0; color: var(--stahl); }
.sdr-reihe__zahl span { white-space: nowrap; }
.sdr-reihe__ab { font: 700 1.2rem var(--din); color: var(--rot); white-space: nowrap; }
.sdr-reihe > summary:hover .sdr-reihe__name { color: var(--rot); }
.sdr-reihe > summary:focus-visible { outline-offset: -3px; }
.sdr-reihe__inhalt { padding: 0 0 32px; }
.sdr-hinweis { max-width: 80ch; font-size: .95rem; }
.sdr-reihe__teil { margin: 0 0 6px; font-size: .9rem; color: var(--stahl); }
.sdr-reihe__teil strong { color: var(--schwarz); font-weight: 600; }

.sdr-liste { border-top: 0; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 40px; }
.sdr-liste li { align-items: baseline; padding: 13px 2px; }
.sdr-liste a { text-decoration: none; font-weight: 600; min-width: 0; }
.sdr-liste a:hover { text-decoration: underline; }
.sdr-liste small { display: block; margin-top: 2px; font-weight: 400; font-size: .84rem; color: var(--stahl); }
.sdr-liste strong { font-size: 1.05rem; }
.sdr-fehlt { margin: 28px 0 0; max-width: 80ch; color: var(--text-2); }
.sdr-fehlt a, .sdr-preise__kopf a { color: var(--schwarz); }
.sdr-fehlt a:hover, .sdr-preise__kopf a:hover { color: var(--rot); }

/* Fehlerbilder: vier kleine Zeichnungen */
.sdr-fehler__kopf { max-width: 760px; margin-bottom: 40px; }
.sdr-fehler__kopf p:not(.etikett) { color: var(--text-2); }
.sdr-fehler { display: grid; gap: 36px 32px; }
@media (min-width: 700px) { .sdr-fehler { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sdr-fehler { grid-template-columns: repeat(4, 1fr); } }
.sdr-fehlerbild { margin: 0; padding-top: 22px; border-top: 2px solid var(--schwarz); }
.sdr-fehlerbild p { margin: 0; color: var(--text-2); font-size: .98rem; }
.sdr-schirm { width: 118px; height: auto; margin: 0 0 18px -14px; }
@media (max-width: 699px) {
  .sdr-fehlerbild { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
  .sdr-schirm { width: 96px; margin: 0 0 0 -14px; }
}
.sdr-schirm__gehaeuse { fill: var(--graphit); }
.sdr-schirm__an { fill: #dfe2e7; }
.sdr-schirm__aus { fill: #050506; }
.sdr-schirm__ui { fill: #b9bec6; }
.sdr-schirm__kamera { fill: var(--schwarz); }
.sdr-schirm__gruen { fill: #2fd37a; }
.sdr-schirm__rosa { fill: #ff5fa2; opacity: .85; }
.sdr-schirm__fleck { fill: #0a0a0b; stroke: #7b3fa0; stroke-width: 9; stroke-opacity: .5; stroke-linejoin: round; paint-order: stroke; }
.sdr-schirm__riss { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.sdr-schirm__riss--glas { stroke: #5c6068; stroke-width: 1.1; opacity: 1; }
.sdr-schirm__vibration { fill: none; stroke: var(--rot); stroke-width: 3; stroke-linecap: round; }
.sdr-test { margin: 44px 0 0; max-width: 80ch; background: #fff; }

/* Fingerabdruck: nummerierte Schritte in der Karte */
.sdr-karte { align-self: start; }
.sdr-schritte { list-style: none; counter-reset: sdr; margin: 0; padding: 0; }
.sdr-schritte li { counter-increment: sdr; position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--alu); color: var(--text-2); }
.sdr-schritte li:first-child { border-top: 0; padding-top: 4px; }
.sdr-schritte li::before { content: counter(sdr, decimal-leading-zero); position: absolute; left: 0; top: 16px; font: 700 .9rem var(--din); letter-spacing: .04em; color: var(--rot); }
.sdr-schritte li:first-child::before { top: 6px; }

/* Teilequalität */
.sdr-teile .gross { max-width: 60ch; }
.sdr-teile .qualitaet { margin: 28px 0; background: #fff; padding: 22px 24px; }
.sdr-teile__weiter { margin: 0; color: var(--text-2); max-width: 70ch; }
.sdr-teile__weiter a { color: var(--schwarz); }
.sdr-teile__weiter a:hover { color: var(--rot); }

/* Ablauf + Kombi */
.sdr-rechts { align-self: start; }
@media (min-width: 900px) { .sdr-rechts { position: sticky; top: calc(var(--kopf-h) + 32px); } }
.sdr-kombi .h3 { color: #fff; }
.sdr-kombi a { color: #fff; }
.sdr-kombi a:hover { color: var(--glut); }
.sdr-rechnung { margin: 0 0 1.2em; border-top: 1px solid var(--graphit-2); }
.sdr-rechnung div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--graphit-2); }
.sdr-rechnung dt { color: var(--text-hell-2); }
.sdr-rechnung dd { margin: 0; font: 700 1.05rem var(--din); color: #fff; white-space: nowrap; }
.sdr-rechnung s { margin-right: 6px; font-weight: 400; color: var(--text-hell-2); }