/* Handy-Display-Reparatur (app/content/seiten/handy-display-reparatur.php) – nur Ergänzungen zu site.css */

/* Kopf: Text und Suche links, Zeichnung rechts (unter 960 px nur Text) */
.hd-kopf { display: grid; gap: 32px; align-items: center; padding-block: 28px 8px; }
.hd-kopf .gross { max-width: 50ch; }
.hd-kopf .suche { margin-bottom: 0; }
.hd-kopf__bild { max-height: 460px; }
@media (min-width: 960px) {
  .hd-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; padding-block: 40px 16px; }
}
@media (max-width: 959px) { .hd-kopf__bild { display: none; } }

/* Preise je Marke */
.hd-preise { padding-top: clamp(48px, 2rem + 2.5vw, 88px); }
.hd-nw { white-space: nowrap; }
.hd-preise__kopf { display: grid; gap: 8px 64px; margin-bottom: 28px; align-items: end; }
.hd-preise__kopf .h2 { margin-bottom: 0; }
.hd-preise__kopf p:not(.etikett) { margin: 0; color: var(--text-2); max-width: 58ch; }
@media (min-width: 900px) { .hd-preise__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hd-marken li { padding: 0; }
.hd-marken a { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 4px; text-decoration: none; color: var(--schwarz); }
.hd-marken span { font-weight: 600; }
.hd-marken small { display: block; font-weight: 400; font-size: .82rem; color: var(--stahl); }
.hd-marken a:hover span { color: var(--rot); }
.hd-marken a::after { content: "→"; color: var(--alu); margin-left: -4px; transition: transform .15s, color .15s; }
.hd-marken a:hover::after { color: var(--rot); transform: translateX(3px); }
.hd-marken strong { margin-left: auto; }
.hd-fussnote { margin: 16px 0 0; font-size: .88rem; color: var(--stahl); max-width: 70ch; }

/* Beispielpreise als Tabelle */
.hd-beispiele { margin-top: clamp(48px, 2rem + 3vw, 88px); }
.hd-beispiele .h3 { margin-bottom: .8em; }
.hd-tabelle { width: 100%; border-collapse: collapse; border-top: 2px solid var(--schwarz); font-variant-numeric: tabular-nums; }
.hd-tabelle th, .hd-tabelle td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px dashed var(--alu); }
.hd-tabelle thead th { padding-block: 10px; border-bottom: 1px solid var(--alu); font: 400 .72rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hd-tabelle tbody tr.hd-tabelle__erste > * { border-top: 1px solid var(--alu); }
.hd-tabelle tbody tr:first-child > * { border-top: 0; }
.hd-tabelle th[scope="row"] { font-weight: 600; width: 40%; }
.hd-tabelle th[scope="row"] a { text-decoration: none; }
.hd-tabelle th[scope="row"] a:hover { text-decoration: underline; }
.hd-tabelle td { color: var(--text-2); }
.hd-tabelle td:last-child, .hd-tabelle thead th:last-child { text-align: right; padding-right: 0; }
.hd-tabelle__preis { font: 700 1.05rem var(--din); color: var(--rot); white-space: nowrap; }
.hd-tabelle__buchen { display: inline-block; margin-left: 16px; font: 700 .88rem var(--din); color: var(--schwarz); text-decoration: underline; text-decoration-color: var(--alu); text-underline-offset: .25em; }
.hd-tabelle__buchen:hover { color: var(--rot); text-decoration-color: currentColor; }
@media (max-width: 599px) {
  .hd-tabelle { font-size: .92rem; }
  .hd-tabelle__marke { display: none; }
  .hd-marken a { min-height: 54px; padding: 9px 4px; }
  .hd-marken span { line-height: 1.3; }
  .hd-tabelle th, .hd-tabelle td { padding-right: 10px; }
  .hd-tabelle th[scope="row"] { width: auto; }
  .hd-tabelle__buchen { display: none; }
  .hd-tabelle th[scope="row"] a { text-decoration: underline; text-decoration-color: var(--alu); }
}

/* Schnitt durch das Display (technische Zeichnung) */
.hd-aufbau { align-items: center; }
.hd-aufbau p:not(.etikett) { color: var(--text-2); max-width: 60ch; }
.hd-schnitt { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.hd-schnitt svg { width: 100%; height: auto; overflow: visible; }
.hd-schnitt figcaption { margin-top: 14px; font-size: .88rem; color: var(--stahl); max-width: 52ch; }
.hd-s__schraffur { stroke: var(--stahl); stroke-width: 1.1; }
.hd-s__gehaeuse { fill: url(#hd-schraffur); stroke: var(--schwarz); stroke-width: 1.5; stroke-linejoin: miter; }
.hd-s__glas { fill: #E6ECF1; stroke: var(--schwarz); stroke-width: 1.5; }
.hd-s__kleber { fill: rgb(160 0 0 / .28); stroke: var(--schwarz); stroke-width: .75; }
.hd-s__touch { fill: #C3C8D0; stroke: var(--schwarz); stroke-width: .75; }
.hd-s__panel { fill: var(--graphit-2); stroke: var(--schwarz); stroke-width: 1.5; }
.hd-s__rahmen { fill: var(--rot); }
.hd-s__sprung { fill: none; stroke: var(--glut); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hd-s__einheit { fill: none; stroke: var(--glut); stroke-width: 2; stroke-dasharray: 7 5; }
.hd-s__marke { font: 700 12px var(--din); letter-spacing: .14em; fill: var(--rot); }
.hd-s__t { font: 700 15px var(--din); fill: var(--schwarz); }
.hd-s__klein { font: 400 12px var(--din); fill: var(--stahl); letter-spacing: .04em; }
.hd-s__leiter, .hd-s__beschriftung polyline { fill: none; stroke: var(--stahl); stroke-width: 1; stroke-linejoin: round; }
.hd-s__beschriftung circle { fill: var(--schwarz); }
@media (max-width: 599px) {
  .hd-s__t { font-size: 16.5px; }
  .hd-s__klein, .hd-s__marke { font-size: 13px; }
}

/* Teilequalitäten */
.hd-qualitaet p:not(.etikett) { color: var(--text-2); max-width: 60ch; }
.hd-qualitaet__liste { align-self: center; }
.hd-qualitaet .qualitaet { margin: 0; padding: 0; background: none; border-top: 2px solid var(--schwarz); border-radius: 0; gap: 0; font-size: 1rem; }
.hd-qualitaet .qualitaet__titel { margin: 16px 0 0; }
.hd-qualitaet .qualitaet__stufen { grid-template-columns: minmax(0, 1fr); gap: 0; }
.hd-qualitaet .qualitaet__stufe { margin-top: 16px; padding: 2px 0 2px 16px; }   /* Text nicht mehr an der roten Linie (Founder 18.10. mobil) */
.hd-qualitaet .qualitaet dt { font-family: var(--din); }

/* Fehlerbilder – nummeriert wie ein Befundbogen */
.hd-befunde__kopf { margin-bottom: 28px; }
.hd-befunde__kopf p:not(.etikett) { color: var(--text-2); max-width: 60ch; }
.hd-befunde { list-style: none; margin: 0; padding: 0; counter-reset: befund; border-top: 2px solid var(--schwarz); }
.hd-befunde li { counter-increment: befund; position: relative; display: grid; gap: 6px 48px; padding: 22px 0 20px 48px; border-bottom: 1px solid var(--alu); }
.hd-befunde li::before { content: counter(befund, decimal-leading-zero); position: absolute; left: 0; top: 25px; font: 700 .95rem var(--din); letter-spacing: .04em; color: var(--rot); }
.hd-befunde h3 { margin: 0; font: 700 1.2rem/1.3 var(--din); }
.hd-befunde p { margin: 0; color: var(--text-2); max-width: 64ch; }
@media (min-width: 900px) { .hd-befunde li { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }

/* Zwei Wege: Laden und Einsendung */
.hd-wege { display: grid; gap: 48px; margin-top: 12px; }
@media (min-width: 900px) { .hd-wege { grid-template-columns: 1fr 1fr; gap: 64px; } }
.hd-weg { border-top: 2px solid var(--schwarz); padding-top: 22px; display: flex; flex-direction: column; }
.hd-weg > p:not(.knopf-reihe) { color: var(--text-2); max-width: 54ch; }
.hd-weg .knopf-reihe { margin-top: auto; padding-top: 20px; align-items: center; }
.hd-weg__mehr { color: var(--schwarz); }
.hd-daten { margin: 8px 0 0; border-top: 1px solid var(--alu); }
.hd-daten > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--alu); }
.hd-daten dt { font: 400 .74rem/1.9 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hd-daten dd { margin: 0; font-weight: 600; }

/* Kombi-Nachlass mit Beispielrechnung */
.hd-kombi { align-items: center; }
.hd-kombi p:not(.etikett):not(.knopf-reihe) { color: var(--text-2); max-width: 58ch; }
.hd-beleg { margin: 0; padding: 26px 28px 22px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgb(10 10 11 / .08); max-width: 480px; justify-self: center; width: 100%; }
.hd-beleg__titel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 12px; }
.hd-beleg__titel .etikett { margin: 0; }
.hd-beleg__titel strong { font: 700 1.1rem var(--din); }
.hd-beleg dl { margin: 0; border-top: 2px solid var(--schwarz); }
.hd-beleg dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--alu); }
.hd-beleg dt { color: var(--text-2); }
.hd-beleg dd { margin: 0; font: 700 1.05rem var(--din); white-space: nowrap; }
.hd-beleg s { margin-left: 6px; font-weight: 400; color: var(--stahl); }
.hd-beleg__summe { border-bottom: 0 !important; }
.hd-beleg__summe dt { color: var(--schwarz); font-weight: 600; }
.hd-beleg__summe dd { font-size: 1.5rem; color: var(--rot); }
.hd-beleg__hinweis { margin: 8px 0 0; font-size: .82rem; color: var(--stahl); }