/* HDMI-Buchse reparieren (app/content/seiten/hdmi-buchse-reparatur.php) – nur Ergänzungen zu site.css */

.hb-nw { white-space: nowrap; }
.hb-preise__seite .pfeil-link, .hb-mehr__block .pfeil-link, .hb-laden .pfeil-link, .hb-gegenprobe .pfeil-link { color: var(--schwarz); }
.hb-preise__seite .pfeil-link:hover, .hb-mehr__block .pfeil-link:hover, .hb-laden .pfeil-link:hover, .hb-gegenprobe .pfeil-link:hover { color: var(--rot); }

/* Kopf: Text links, Zeichnung der Buchse rechts (darunter auf schmalen Bildschirmen) */
.hb-kopf { padding-block: 32px 56px; }
.hb-kopf__raster { display: grid; gap: 40px; align-items: center; }
.hb-kopf .gross { max-width: 44ch; }
.hb-kopf__zeile { margin: 18px 0 0; font: 400 .78rem/1.6 var(--din); letter-spacing: .12em; text-transform: uppercase; color: var(--stahl); }
@media (min-width: 960px) {
  .hb-kopf { padding-block: 48px 72px; }
  .hb-kopf__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
}

.hb-bauteil { margin: 0; background: var(--werkbank); border: 1px solid var(--alu); border-radius: 4px; padding: 20px 20px 18px; }
.hb-bauteil__titel { margin: 0 0 10px; font: 400 .8125rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hb-bauteil svg { width: 100%; height: auto; overflow: visible; }
.hb-bauteil__blech { fill: #C9CDD3; stroke: var(--schwarz); stroke-width: 2; stroke-linejoin: round; }
.hb-bauteil__innen { fill: var(--schwarz); }
.hb-bauteil__zunge { fill: #33363B; stroke: #50545B; stroke-width: 1; }
.hb-bauteil__kontakt { fill: #D5D8DD; }
.hb-bauteil__kontakt--krumm { fill: var(--glut); }
.hb-bauteil__lasche { fill: #C9CDD3; stroke: var(--schwarz); stroke-width: 1.5; }
.hb-bauteil__platine { fill: #E1E4E8; stroke: var(--schwarz); stroke-width: 1.5; }
.hb-bauteil__lot { fill: #9AA0A8; }
.hb-bauteil__schrift { font: 400 14px var(--din); letter-spacing: .14em; text-transform: uppercase; fill: var(--stahl); text-anchor: end; }
.hb-bauteil__linie { fill: none; stroke: #8A8F98; stroke-width: 1.5; }
.hb-bauteil__marke circle { fill: #fff; stroke: var(--rot); stroke-width: 2; }
.hb-bauteil__marke text { font: 700 20px var(--din); fill: var(--rot); text-anchor: middle; dominant-baseline: central; }

.hb-legende { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--alu); display: grid; gap: 8px; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.hb-legende li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.hb-legende span { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--rot); border-radius: 50%; font: 700 .78rem var(--din); color: var(--rot); background: #fff; }

/* Preise */
.hb-preise__kopf { display: grid; gap: 8px 64px; margin-bottom: 28px; align-items: end; }
.hb-preise__kopf .h2 { margin-bottom: 0; }
.hb-preise__kopf > p { margin: 0; color: var(--text-2); max-width: 58ch; }
@media (min-width: 900px) { .hb-preise__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.hb-preise__raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1000px) { .hb-preise__raster { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 56px; } }

.hb-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid var(--schwarz); font-variant-numeric: tabular-nums; }
.hb-tabelle th, .hb-tabelle td { text-align: left; vertical-align: middle; padding: 14px 16px; border-bottom: 1px solid var(--alu); }
.hb-tabelle thead th { padding-block: 12px; font: 400 .72rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hb-tabelle__marke th { padding: 22px 16px 8px; background: var(--werkbank); border-bottom: 1px solid var(--alu); font: 400 .8rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hb-tabelle tbody th[scope="row"] { font: 700 1.1rem/1.25 var(--din); }
.hb-tabelle tbody th[scope="row"] a { text-decoration: none; }
.hb-tabelle tbody th[scope="row"] a:hover { color: var(--rot); text-decoration: underline; }
.hb-tabelle tbody th small { display: block; margin-top: 3px; font: 400 .8rem var(--sans); color: var(--stahl); }
.hb-tabelle__preis { font: 700 1.2rem var(--din); color: var(--rot); white-space: nowrap; }
.hb-tabelle__dauer { color: var(--text-2); white-space: nowrap; }
.hb-tabelle__buchen { text-align: right; width: 1%; }
.hb-tabelle thead th:last-child { text-align: right; }
.hb-tabelle tbody tr:not(.hb-tabelle__marke):hover { background: #FAFAFB; }

@media (max-width: 699px) {
  .hb-tabelle, .hb-tabelle tbody, .hb-tabelle tr, .hb-tabelle th, .hb-tabelle td { display: block; }
  .hb-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hb-tabelle { background: none; }
  .hb-tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 10px 16px; padding: 16px; background: #fff; border-bottom: 1px solid var(--alu); }
  .hb-tabelle th, .hb-tabelle td { padding: 0; border: 0; }
  .hb-tabelle tbody th[scope="row"] { grid-column: 1 / -1; }
  .hb-tabelle td[data-spalte]::before { content: attr(data-spalte); display: block; margin-bottom: 2px; font: 400 .8rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
  .hb-tabelle__dauer { font-size: .95rem; white-space: normal; }   /* „ca. 1,5 Stunden“ schob die Zeile am Handy über den Rand */
  .hb-tabelle__buchen { width: auto; justify-self: end; }
  .hb-tabelle tr.hb-tabelle__marke { display: block; padding: 20px 0 8px; background: none; border-bottom: 0; }
  .hb-tabelle__marke th { padding: 0; background: none; border: 0; }
}

.hb-preise__seite { border-top: 2px solid var(--schwarz); padding-top: 20px; }
.hb-preise__seite .h4 { margin-top: 0; }
.hb-preise__seite p { color: var(--text-2); font-size: .98rem; }
.hb-preise__seite p + .h4 { margin-top: 1.4em; }
.hb-preise__seite a:not(.pfeil-link) { color: var(--schwarz); }

/* Fehlerbild: Überschrift links (klebt), Befunde rechts */
.hb-fehler { display: grid; gap: 32px; align-items: start; }
.hb-fehler__kopf p:not(.etikett) { color: var(--text-2); max-width: 42ch; }
@media (min-width: 960px) {
  .hb-fehler { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
  .hb-fehler__kopf { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.hb-befunde { list-style: none; margin: 0 0 32px; padding: 0; border-top: 2px solid var(--schwarz); counter-reset: hb; }
.hb-befunde li { counter-increment: hb; position: relative; padding: 22px 0 20px 46px; border-bottom: 1px solid var(--alu); }
.hb-befunde li::before { content: counter(hb, decimal-leading-zero); position: absolute; left: 0; top: 24px; font: 700 .95rem var(--din); color: var(--rot); letter-spacing: .04em; }
.hb-befunde .h4 { font-size: 1.25rem; margin-bottom: .4em; }
.hb-befunde p { margin: 0; color: var(--text-2); max-width: 62ch; }
.hb-gegenprobe { border-radius: 0 4px 4px 0; padding: 20px 24px 8px; }
.hb-gegenprobe .h4 { margin-bottom: .5em; }
.hb-gegenprobe p { max-width: 64ch; }

/* Werkstatt */
.hb-werkstatt p:not(.etikett) { max-width: 60ch; }
.hb-werkstatt .schritte__via { background: var(--werkbank); }
@media (min-width: 900px) { .hb-schritte { margin-top: 72px; } }

/* Chip und Lüfter */
.hb-mehr { display: grid; gap: 56px; }
@media (min-width: 900px) { .hb-mehr { grid-template-columns: 1fr 1fr; gap: 72px; } .hb-mehr--eins { grid-template-columns: minmax(0, 720px); } }
.hb-mehr__block > p:not(.etikett) { color: var(--text-2); max-width: 60ch; }
.hb-mehr__block .h3 { margin-bottom: .6em; }
.hb-band { margin: 20px 0 16px; }
.hb-band li { align-items: baseline; }
.hb-band a { color: var(--schwarz); text-decoration: none; font-weight: 600; }
.hb-band a:hover { color: var(--rot); text-decoration: underline; }
.hb-band s { font: 400 .9rem var(--din); color: var(--stahl); margin-right: 4px; }
.hb-fussnote { font-size: .9rem; color: var(--stahl); max-width: 60ch; }

/* Einsendung und Laden */
.hb-einsenden p:not(.etikett) { max-width: 60ch; }
.hb-einsenden .h4 { margin-top: 1.6em; }
.hb-laden { border-radius: 4px; background: #fff; align-self: start; }
.hb-laden .h4 { margin-top: 0; }
.hb-laden p + .h4 { margin-top: 1.4em; }
.hb-laden p { color: var(--text-2); }
.hb-laden a:not(.pfeil-link) { color: var(--schwarz); }
.hb-laden__adresse { font-family: var(--din); color: var(--schwarz) !important; }