/* Ladebuchse reparieren (app/content/seiten/ladebuchse-reparatur.php) – nur Ergänzungen zu site.css */

/* Kopf: Text und Suche links, Zeichnung rechts (unter 960 px nur Text) */
.lb-kopf { display: grid; gap: 32px; align-items: center; padding-block: 28px 56px; }
.lb-kopf .gross { max-width: 52ch; }
.lb-kopf .suche { margin-bottom: 0; }
.lb-kopf__bild { max-height: 460px; }
@media (min-width: 960px) {
  .lb-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; padding-block: 40px 88px; }
}
.lb-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.6rem); }   /* längere H1: drei Zeilen auf dem Desktop, vier am Handy */
@media (max-width: 959px) { .lb-kopf__bild { display: none; } }

/* Eckdaten unter der Suche */
.lb-eckdaten { display: flex; flex-wrap: wrap; margin: 28px 0 0; border-top: 1px solid var(--alu); }
.lb-eckdaten > div { flex: 1 1 140px; padding: 14px 20px 0 0; }
.lb-eckdaten > div + div { padding-left: 20px; border-left: 1px solid var(--alu); }
.lb-eckdaten dt { font: 400 .72rem/1.6 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.lb-eckdaten dd { margin: 2px 0 0; font: 700 1.1rem var(--din); }
.lb-eckdaten a { color: var(--rot); text-decoration: none; }
.lb-eckdaten a:hover { text-decoration: underline; }
@media (max-width: 559px) {
  .lb-eckdaten > div { flex-basis: 100%; padding: 10px 0; border-bottom: 1px solid var(--alu); display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
  .lb-eckdaten > div + div { padding-left: 0; border-left: 0; }
  .lb-eckdaten dd { margin: 0; }
}

/* Selbst prüfen: Probe links, Schluss daraus rechts – wie ein Prüfprotokoll */
.lb-pruefen { padding-top: clamp(40px, 2rem + 2vw, 72px); }
.lb-pruefen__kopf { display: grid; gap: 8px 64px; margin-bottom: 28px; align-items: end; }
.lb-pruefen__kopf .h2 { margin-bottom: 0; }
.lb-pruefen__kopf p:not(.etikett) { margin: 0; color: var(--text-2); max-width: 58ch; }
@media (min-width: 900px) { .lb-pruefen__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lb-proben { list-style: none; margin: 0; padding: 0; counter-reset: probe; border-top: 2px solid var(--schwarz); }
.lb-proben li { counter-increment: probe; position: relative; display: grid; gap: 12px 48px; padding: 22px 0 22px 48px; border-bottom: 1px solid var(--alu); }
.lb-proben li::before { content: counter(probe, decimal-leading-zero); position: absolute; left: 0; top: 25px; font: 700 .95rem var(--din); letter-spacing: .04em; color: var(--rot); }
.lb-proben h3 { margin: 0 0 .35em; font: 700 1.2rem/1.3 var(--din); }
.lb-proben__was p { margin: 0; color: var(--text-2); max-width: 62ch; }
.lb-proben__folge { margin: 0; align-self: start; padding: 14px 16px; background: var(--werkbank); border-left: 3px solid var(--schwarz); border-radius: 0 4px 4px 0; font-size: .98rem; }
.lb-proben__folge span { display: block; font: 700 .95rem var(--din); margin-bottom: 2px; }
@media (min-width: 900px) { .lb-proben li { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.lb-hinweis { margin: 24px 0 0; max-width: 78ch; color: var(--text-2); font-size: .95rem; }

/* Fussel: Text links, Schnittzeichnung rechts */
.lb-fussel { align-items: center; }
.lb-fussel p:not(.etikett) { color: var(--text-2); max-width: 60ch; }
.lb-fussel .h4 { margin: 1.6em 0 .4em; }
.lb-schnitt { margin: 0; width: 100%; max-width: 520px; justify-self: center; }
.lb-schnitt svg { width: 100%; height: auto; overflow: visible; }
.lb-schnitt figcaption { margin-top: 14px; font-size: .88rem; color: var(--stahl); max-width: 54ch; }
.lb-s__schraffur { stroke: var(--stahl); stroke-width: 1.1; }
.lb-s__gehaeuse { fill: url(#lb-schraffur); stroke: var(--schwarz); stroke-width: 1.5; }
.lb-s__raum { fill: #fff; }
.lb-s__buchse { fill: #C3C8D0; stroke: var(--schwarz); stroke-width: 1.5; stroke-linejoin: miter; }
.lb-s__stecker { fill: #E6ECF1; stroke: var(--schwarz); stroke-width: 1.5; }
.lb-s__schlitz { fill: #fff; stroke: var(--schwarz); stroke-width: .75; }
.lb-s__zunge { fill: var(--graphit-2); }
.lb-s__griff { fill: var(--graphit); }
.lb-s__kabel { fill: var(--graphit-2); }
.lb-s__filzgrund { fill: #D9D1C4; }
.lb-s__faser { fill: none; stroke: #8C8273; stroke-width: .9; }
.lb-s__filz { fill: url(#lb-filz); stroke: var(--rot); stroke-width: 1.2; }
.lb-s__zeile { font: 700 12px var(--din); letter-spacing: .14em; fill: var(--stahl); }
.lb-s__zeile--rot { fill: var(--rot); }
.lb-s__t { font: 700 14px var(--din); fill: var(--schwarz); }
.lb-s__t--rot { fill: var(--rot); }
.lb-s__beschriftung line { stroke: var(--stahl); stroke-width: 1; }
.lb-s__beschriftung circle { fill: var(--schwarz); }
.lb-s__mass line { stroke: var(--rot); stroke-width: 1.5; }
@media (max-width: 599px) {
  .lb-s__t { font-size: 17px; }
  .lb-s__zeile { font-size: 14px; letter-spacing: .1em; }
}

/* Ladechip: Text links, Anzeichen rechts */
.lb-tiefer p:not(.etikett) { color: var(--text-2); max-width: 60ch; }
.lb-anzeichen { align-self: start; padding: 26px 28px; border-radius: 4px; background: var(--werkbank); border-top: 3px solid var(--rot); }
.lb-anzeichen .h4 { margin: 0 0 .8em; }
.lb-anzeichen ul { list-style: none; margin: 0 0 1em; padding: 0; }
.lb-anzeichen li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px dashed var(--alu); }
.lb-anzeichen li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 12px; height: 2px; background: var(--rot); }
.lb-anzeichen p { margin: 0; font-size: .95rem; }
@media (min-width: 900px) { .lb-anzeichen { margin-top: 56px; } }

/* Preise je Marke */
.lb-preise__kopf { display: grid; gap: 8px 64px; margin-bottom: 28px; align-items: end; }
.lb-preise__kopf .h2 { margin-bottom: 0; }
.lb-preise__kopf p:not(.etikett) { margin: 0; color: var(--text-2); max-width: 58ch; }
@media (min-width: 900px) { .lb-preise__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lb-marken li { padding: 0; }
.lb-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); }
.lb-marken span { font-weight: 600; }
.lb-marken small { display: block; font-weight: 400; font-size: .82rem; color: var(--stahl); }
.lb-marken a:hover span { color: var(--rot); }
.lb-marken a::after { content: "→"; color: var(--alu); margin-left: -4px; transition: transform .15s, color .15s; }
.lb-marken a:hover::after { color: var(--rot); transform: translateX(3px); }
.lb-marken strong { margin-left: auto; }
.lb-fussnote { margin: 16px 0 0; font-size: .88rem; color: var(--stahl); max-width: 76ch; }

/* Beispielpreise als Tabelle */
.lb-beispiele { margin-top: clamp(48px, 2rem + 3vw, 88px); }
.lb-beispiele .h3 { margin-bottom: .8em; }
.lb-tabelle { width: 100%; border-collapse: collapse; border-top: 2px solid var(--schwarz); font-variant-numeric: tabular-nums; background: #fff; }
.lb-tabelle th, .lb-tabelle td { text-align: left; vertical-align: middle; padding: 13px 16px; border-bottom: 1px dashed var(--alu); }
.lb-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); }
.lb-tabelle th[scope="row"] { font-weight: 600; width: 45%; }
.lb-tabelle th[scope="row"] a { text-decoration: none; }
.lb-tabelle th[scope="row"] a:hover { text-decoration: underline; }
.lb-tabelle td { color: var(--text-2); font-family: var(--din); }
.lb-tabelle td:last-child, .lb-tabelle thead th:last-child { text-align: right; }
.lb-tabelle__preis { font: 700 1.05rem var(--din); color: var(--rot); white-space: nowrap; }
.lb-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; }
.lb-tabelle__buchen:hover { color: var(--rot); text-decoration-color: currentColor; }
@media (max-width: 599px) {
  .lb-tabelle { font-size: .92rem; }
  .lb-tabelle th, .lb-tabelle td { padding: 12px 8px; }
  .lb-tabelle th[scope="row"] { width: auto; }
  .lb-tabelle__buchen { display: block; margin: 6px 0 0; padding-block: 6px; }
}

/* Tablets, MacBooks, Konsolen */
.lb-andere { margin-top: clamp(48px, 2rem + 3vw, 88px); }
.lb-andere .h3 { margin-bottom: .8em; }
.lb-andere__raster { display: grid; gap: 16px; }
@media (min-width: 900px) { .lb-andere__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.lb-geraet { display: flex; flex-direction: column; padding: 24px 24px 22px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgb(10 10 11 / .08); }
.lb-geraet__kopf { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; }
.lb-geraet__icon { color: var(--rot); }
.lb-geraet__icon .icon, .lb-geraet__icon svg { width: 28px; height: 28px; }
.lb-geraet__ab { font: 700 1.2rem var(--din); color: var(--rot); white-space: nowrap; }
.lb-geraet .h4 { margin: 0 0 .4em; }
.lb-geraet > p { color: var(--text-2); font-size: .98rem; margin: 0 0 14px; }
.lb-geraet__liste { list-style: none; margin: auto 0 16px; padding: 0; border-top: 1px solid var(--alu); }
.lb-geraet__liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--alu); font-size: .95rem; }
.lb-geraet__liste a { text-decoration: none; }
.lb-geraet__liste a:hover { text-decoration: underline; }
.lb-geraet__liste strong { font-family: var(--din); white-space: nowrap; }
.lb-geraet .pfeil-link { font-size: .95rem; }

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