/* iPad-Display-Reparatur (app/content/seiten/ipad-display-reparatur.php): Explosionszeichnung der zwei Bauweisen, Preisliste Glas | Einheit */

.ipd-kopf { padding-top: 24px; }
.ipd-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.7rem); }
.ipd-kopf .gross { max-width: 52ch; }
.ipd-suche { margin: 28px 0 0; max-width: 560px; }

/* Explosionszeichnung im Kopf */
.ipd-bauweise { align-self: center; width: 100%; max-width: 500px; justify-self: end; padding: 26px clamp(18px, 2.4vw, 30px) 22px; border-radius: 4px; background: var(--werkbank); }
.ipd-bauweise .etikett { margin-bottom: .7em; }
.ipd-bauweise__titel { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); margin-bottom: 18px; }
.ipd-bauweise__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; border-top: 2px solid var(--schwarz); padding-top: 14px; }
.ipd-bauweise__fall { margin: 0; display: flex; flex-direction: column; }
.ipd-bauweise__fall figcaption { flex: 1; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ipd-bauweise__fall strong { font: 700 1rem/1.2 var(--din); }
.ipd-bauweise__fall span { margin-bottom: 8px; font-size: .84rem; line-height: 1.35; color: var(--text-2); }
.ipd-bauweise__preis { margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--alu); font: 700 .98rem/1.2 var(--din); font-style: normal; color: var(--rot); font-variant-numeric: tabular-nums; }
.ipd-bauweise__betrag { display: block; font-weight: inherit; white-space: nowrap; }   /* immer eigene Zeile: beide Preise stehen gleich hoch, egal wie breit die Spalte ist (bei 1024 px brach nur einer um) */

.ipd-s { width: 100%; height: auto; overflow: visible; }
.ipd-s polygon, .ipd-s polyline, .ipd-s line { stroke-linejoin: round; stroke-linecap: round; }
.ipd-s-geh.ipd-s-o { fill: #E4E7EB; stroke: #B9BEC6; stroke-width: .8; }
.ipd-s-geh.ipd-s-l { fill: #CDD1D7; stroke: #B9BEC6; stroke-width: .8; }
.ipd-s-geh.ipd-s-r { fill: #BFC4CB; stroke: #B9BEC6; stroke-width: .8; }
.ipd-s-akku { fill: #D3D7DD; stroke: #C2C7CE; stroke-width: .6; }
.ipd-s-panel.ipd-s-o { fill: var(--graphit-2); }
.ipd-s-panel.ipd-s-l { fill: var(--graphit); }
.ipd-s-panel.ipd-s-r { fill: var(--schwarz); }
.ipd-s-glas.ipd-s-o { fill: #fff; }
.ipd-s-glas.ipd-s-l, .ipd-s-glas.ipd-s-r { fill: #fff; }
.ipd-s-tausch { fill: none; stroke: var(--rot); stroke-width: 1.6; }
.ipd-s-tausch--kante { stroke-width: 1; }
.ipd-s-sprung { fill: none; stroke: var(--stahl); stroke-width: .7; }
.ipd-s-fuehrung { stroke: var(--stahl); stroke-width: .6; stroke-dasharray: 1.5 2.5; opacity: .7; }

.ipd-legende { list-style: none; margin: 18px 0 0; padding: 12px 0 0; border-top: 1px solid var(--alu); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--text-2); }
.ipd-legende li { display: inline-flex; align-items: center; gap: 7px; }
.ipd-legende__farbe { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.ipd-legende__farbe--tausch { border: 2px solid var(--rot); }
.ipd-legende__farbe--glas { background: #fff; box-shadow: inset 0 0 0 1px var(--alu); }
.ipd-legende__farbe--panel { background: var(--graphit); }
.ipd-legende__farbe--geh { background: #CDD1D7; }

@media (max-width: 959px) { .ipd-bauweise { justify-self: stretch; max-width: 560px; } }
@media (max-width: 420px) {
  .ipd-bauweise__paar { gap: 12px; }
  .ipd-bauweise__fall strong { font-size: .95rem; }
  .ipd-bauweise__preis { font-size: .92rem; }
}

/* Zwei Bauweisen */
.ipd-einleitung { max-width: 760px; margin-bottom: 28px; }
.ipd-einleitung p:not(.etikett) { color: var(--text-2); }
.ipd-bauart { padding-top: 22px; border-top: 2px solid var(--schwarz); }
.ipd-bauart .h3 { margin-bottom: .6em; }
.ipd-bauart p { color: var(--text-2); }
@media (min-width: 900px) { .ipd-zwei { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* Preisliste */
.ipd-sprung { margin-bottom: 28px; }
.ipd-sprung a { border-radius: 4px; background: #fff; }

.ipd-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ipd-tabelle__titel { caption-side: top; text-align: left; padding: 0 0 12px; font: 400 .78rem/1.5 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.ipd-tabelle thead th { padding: 10px 10px 10px 4px; border-bottom: 2px solid var(--schwarz); text-align: left; font: 400 .74rem var(--din); letter-spacing: .2em; text-transform: uppercase; color: var(--stahl); vertical-align: bottom; }
.ipd-tabelle thead th small { display: block; margin-top: 3px; font: 700 .9rem var(--din); letter-spacing: 0; text-transform: none; color: var(--schwarz); }
.ipd-tabelle .ipd-rechts { text-align: right; }
.ipd-gruppe th { padding: 30px 4px 10px; border-bottom: 1px solid var(--schwarz); text-align: left; font: 700 1.2rem/1.1 var(--din); letter-spacing: -.005em; }
.ipd-gruppe th span { margin-left: 10px; font: 400 .8rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.ipd-tabelle tbody:first-of-type .ipd-gruppe th { padding-top: 18px; }
.ipd-tabelle tbody { scroll-margin-top: calc(var(--kopf-h) + 16px); }
.ipd-tabelle tbody tr:not(.ipd-gruppe) :is(th, td) { padding: 12px 10px 12px 4px; border-bottom: 1px dashed var(--alu); vertical-align: baseline; font-weight: 400; }
.ipd-tabelle tbody tr:not(.ipd-gruppe) th { text-align: left; }
.ipd-tabelle tbody tr:not(.ipd-gruppe):hover :is(th, td) { background: #fff; }
.ipd-modell { width: 46%; }
.ipd-modell a { font-weight: 600; text-decoration: none; }
.ipd-modell a:hover { text-decoration: underline; }
.ipd-nr { display: block; margin-top: 2px; font: .8125rem/1.4 var(--mono); color: var(--stahl); }
.ipd-tabelle td.ipd-preis { width: 19%; white-space: nowrap; }
.ipd-preis a { font: 700 1.15rem var(--din); text-decoration: none; }
.ipd-preis a:hover { color: var(--rot); text-decoration: underline; }
.ipd-preis--leer { color: var(--stahl); }
.ipd-tabelle td.ipd-aktion { width: 16%; }
.ipd-fussnote { max-width: 760px; margin: 22px 0 0; font-size: .92rem; color: var(--text-2); }
.ipd-fussnote a, .ipd-verwandt a, .ipd-nummer__hinweis a { color: var(--rot); }

@media (max-width: 699px) {
  .ipd-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ipd-tabelle, .ipd-tabelle tbody, .ipd-tabelle caption, .ipd-gruppe, .ipd-gruppe th { display: block; }
  .ipd-gruppe th { padding-top: 26px; }
  .ipd-gruppe th span { display: block; margin: 4px 0 0; }
  .ipd-tabelle tbody tr:not(.ipd-gruppe) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 22px; row-gap: 6px; padding: 12px 2px; border-bottom: 1px dashed var(--alu); }
  .ipd-tabelle tbody tr:not(.ipd-gruppe) :is(th, td) { display: block; width: auto; padding: 0; border: 0; background: none; }
  .ipd-tabelle tbody tr:not(.ipd-gruppe):hover :is(th, td) { background: none; }
  .ipd-modell { flex: 1 0 100%; }
  .ipd-tabelle td.ipd-preis { width: auto; text-align: left; }
  .ipd-tabelle td.ipd-preis::before { content: attr(data-label); display: block; font: 400 .8rem/1.4 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
  .ipd-tabelle tbody tr:not(.ipd-gruppe) td.ipd-preis--leer { display: none; }
  .ipd-tabelle td.ipd-aktion { width: auto; margin-left: auto; align-self: flex-end; }
}

/* Modell erkennen */
.ipd-nb { white-space: nowrap; }
.ipd-schritte { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: schritt; border-top: 2px solid var(--schwarz); }
.ipd-schritte li { counter-increment: schritt; position: relative; padding: 16px 0 14px 46px; border-bottom: 1px solid var(--alu); }
.ipd-schritte li::before { content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 700 .95rem var(--din); letter-spacing: .04em; color: var(--rot); }
.ipd-schritte .h4 { margin-bottom: .25em; }
.ipd-schritte p { margin: 0; color: var(--text-2); font-size: .98rem; }
.ipd-nummer { align-self: center; border-radius: 4px; }
.ipd-nummer__bsp { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--alu); border-radius: 4px; background: #fff; font: .82rem/1.4 var(--mono); color: var(--stahl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipd-nummer__bsp b { color: var(--schwarz); font-weight: 700; box-shadow: inset 0 -2px 0 var(--rot); }
.ipd-suche--klein { margin: 0; max-width: none; }
.ipd-nummer__hinweis { margin: 14px 0 0; font-size: .9rem; color: var(--text-2); }
@media (min-width: 900px) { .ipd-erkennen { grid-template-columns: 7fr 5fr; gap: 64px; } }

/* Werkbank */
.ipd-ablauf { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: schritt; border-top: 2px solid var(--schwarz); }
.ipd-ablauf li { counter-increment: schritt; position: relative; padding: 16px 0 14px 46px; border-bottom: 1px solid var(--alu); }
.ipd-ablauf li::before { content: counter(schritt, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 700 .95rem var(--din); letter-spacing: .04em; color: var(--rot); }
.ipd-ablauf .h4 { margin-bottom: .25em; }
.ipd-ablauf p { margin: 0; color: var(--text-2); font-size: .98rem; }
.ipd-touchid { align-self: start; border-radius: 4px; border-left: 3px solid var(--rot); background: #fff; }
.ipd-touchid p:not(.etikett) { color: var(--text-2); }
.ipd-touchid .etikett { letter-spacing: .14em; }
@media (min-width: 900px) {
  .ipd-werkbank { grid-template-columns: 7fr 5fr; gap: 64px; }
  .ipd-touchid { position: sticky; top: calc(var(--kopf-h) + 24px); }
}

/* Ablauf und Wege */
.ipd-ablauf-raster > div:first-child p:not(.etikett):not(.knopf-reihe) { color: var(--text-2); }
.ipd-wege { align-self: start; }
@media (min-width: 900px) {
  .ipd-ablauf-raster { grid-template-columns: 7fr 5fr; gap: 64px; }
  .ipd-wege { position: sticky; top: calc(var(--kopf-h) + 24px); }
}

/* Querverweise unter der FAQ (der eigene Buchen-Abschluss ist entfallen – das Schlussband darunter hat dieselbe Handlung) */
.ipd-schluss { padding-bottom: clamp(40px, 2rem + 3vw, 88px); }
.ipd-verwandt { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 0; padding-top: 20px; border-top: 1px solid var(--alu); }
.ipd-verwandt .etikett { margin: 0 8px 0 0; }
@media (max-width: 599px) { .ipd-verwandt .etikett { flex: 1 0 100%; } }