/* iPad-Akku tauschen (app/content/seiten/ipad-akku-tausch.php) – Präfix ipa- */

/* Kopf: Text mit Suche links, Selbsttest rechts */
.ipa-kopf { padding-top: 24px; }
.ipa-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.7rem); max-width: 19ch; }
.ipa-kopf .gross { max-width: 54ch; }
.ipa-suche { margin: 24px 0 0; max-width: 560px; }
.ipa-meta { margin: 18px 0 0; font: 400 .82rem/1.5 var(--din); letter-spacing: .06em; color: var(--stahl); }
.ipa-meta a { color: inherit; }

/* Selbsttest: vier Fragen untereinander, die erste (aufgebläht) in Rot */
.ipa-weg { align-self: center; width: 100%; max-width: 500px; justify-self: end; padding: 26px clamp(18px, 2.4vw, 30px) 10px; border-radius: 4px; background: var(--werkbank); }
.ipa-weg .etikett { margin-bottom: .7em; }
.ipa-weg__titel { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.65rem); margin-bottom: 18px; }
.ipa-weg__liste { list-style: none; margin: 0; padding: 16px 0 0; border-top: 2px solid var(--schwarz); }
.ipa-weg__schritt { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; padding-bottom: 20px; }
.ipa-weg__schritt::before { content: ""; position: absolute; left: 16px; top: 38px; bottom: 2px; width: 2px; background: var(--alu); }
.ipa-weg__schritt:last-child::before { display: none; }
.ipa-weg__nr { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--schwarz); border-radius: 4px; background: #fff; font: 700 .95rem var(--din); }
.ipa-weg__schritt--rot .ipa-weg__nr { background: var(--rot); border-color: var(--rot); color: #fff; }
.ipa-weg__schritt--rot::before { background: var(--rot); }
.ipa-weg__schritt--ende .ipa-weg__nr { border-color: var(--stahl); }
.ipa-weg__schritt--ende .ipa-weg__nr::before { content: ""; width: 14px; height: 7px; border-left: 2.5px solid var(--stahl); border-bottom: 2.5px solid var(--stahl); transform: translateY(-2px) rotate(-45deg); }
.ipa-weg__frage { margin: 0; padding-top: 4px; font: 700 1.02rem/1.3 var(--din); letter-spacing: .005em; }
.ipa-weg__antwort { grid-column: 2; margin: 4px 0 0; font-size: .93rem; line-height: 1.45; color: var(--text-2); }
.ipa-weg__antwort strong { color: var(--schwarz); }
.ipa-weg__antwort a { color: var(--rot); font-weight: 600; }
.ipa-weg__schritt--rot .ipa-weg__antwort strong { color: var(--rot); }
@media (max-width: 959px) { .ipa-weg { justify-self: stretch; max-width: 560px; } }

/* Einleitungen: Text nie breiter als etwa 70 Zeichen */
.ipa-einleitung { max-width: 68ch; margin: 0 0 28px; }
.ipa-einleitung p:not(.etikett) { color: var(--text-2); }
.ipa-einleitung a { color: var(--rot); }
.ipa-preise { padding-top: clamp(32px, 1.2rem + 2.6vw, 72px); }
.ipa-modellhilfe { padding: 14px 18px; border-left: 3px solid var(--alu); background: #fff; border-radius: 0 4px 4px 0; font-size: .94rem; }

/* Preisliste: je Baureihe eine Tabelle, auf breiten Bildschirmen in zwei Spalten; Modelle ohne Festpreis stehen ruhiger darin */
.ipa-sprung { margin-bottom: 24px; }
.ipa-sprung a { border-radius: 4px; background: #fff; }
.ipa-stand { margin: 0 0 8px; padding-bottom: 12px; border-bottom: 2px solid var(--schwarz); font: 400 .78rem/1.5 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.ipa-reihen { column-gap: 56px; }
@media (min-width: 1180px) { .ipa-reihen { columns: 2; } .ipa-tabelle:nth-of-type(3) { break-before: column; } }   /* links die ersten beiden Reihen, rechts die übrigen */

.ipa-tabelle { width: 100%; border-collapse: collapse; break-inside: avoid; margin: 0 0 12px; font-variant-numeric: tabular-nums; scroll-margin-top: calc(var(--kopf-h) + 12px); }
.ipa-tabelle__titel { caption-side: top; text-align: left; padding: 22px 4px 8px; border-bottom: 1px solid var(--schwarz); font: 700 1.2rem/1.1 var(--din); letter-spacing: -.005em; }
.ipa-tabelle__titel span { margin-left: 10px; font: 400 .8rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.ipa-tabelle__kopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.ipa-tabelle, .ipa-vergleich) tbody :where(th, td) { padding: 12px 10px 12px 4px; border-bottom: 1px dashed var(--alu); vertical-align: middle; font-weight: 400; text-align: left; }
:where(.ipa-tabelle, .ipa-vergleich) tbody tr:hover :where(th, td) { background: #fff; }
.ipa-modell a { font-weight: 600; text-decoration: none; }
.ipa-modell a:hover { text-decoration: underline; }
.ipa-nb { white-space: nowrap; }
.ipa-nr { display: block; margin-top: 2px; font: .8125rem/1.4 var(--mono); color: var(--stahl); }
.ipa-tabelle td.ipa-teil { width: 10.5rem; }
.ipa-stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ipa-stufen li { display: flex; align-items: baseline; gap: 12px; }
.ipa-preis { font: 700 1.15rem var(--din); white-space: nowrap; }
.ipa-marke { display: inline-block; padding: 2px 8px; border: 1px solid var(--alu); border-radius: 3px; background: #fff; font: 600 .76rem/1.5 var(--din); letter-spacing: .02em; color: var(--text-2); white-space: nowrap; }
.ipa-marke--original { border-color: var(--schwarz); color: var(--schwarz); }
.ipa-anfrage { font: 400 .95rem var(--din); letter-spacing: .02em; color: var(--stahl); white-space: nowrap; }
/* Ohne Festpreis: kein Buchen-Knopf, sondern ein ruhiger Link „Anfrage stellen“ */
.ipa-anfrage-link { display: inline-flex; align-items: center; gap: .45em; min-height: 38px; font: 700 .92rem/1 var(--din); letter-spacing: .01em; color: var(--rot); text-decoration: none; white-space: nowrap; }
.ipa-anfrage-link::after { content: "→"; font: 400 1rem/1 var(--sans); transition: transform .15s; }
.ipa-anfrage-link:hover { color: var(--rot-tief); text-decoration: underline; }
.ipa-anfrage-link:hover::after { transform: translateX(2px); }
@media (max-width: 899px) { .ipa-anfrage-link { min-height: 44px; } }
.ipa-tabelle td.ipa-aktion { width: 1%; text-align: right; padding-right: 2px; }
.ipa-offen .ipa-modell a { color: var(--text-2); }
.ipa-fussnote { max-width: 68ch; margin: 22px 0 0; font-size: .92rem; color: var(--text-2); }
.ipa-fussnote a { color: var(--rot); }

@media (max-width: 699px) {
  .ipa-tabelle, .ipa-tabelle tbody, .ipa-tabelle caption,
  .ipa-vergleich, .ipa-vergleich tbody, .ipa-vergleich caption { display: block; }
  .ipa-tabelle__titel { padding-inline: 2px; }
  .ipa-tabelle tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "modell modell" "teil aktion"; align-items: center; column-gap: 14px; row-gap: 8px; padding: 12px 2px; border-bottom: 1px dashed var(--alu); }
  .ipa-tabelle tbody :where(th, td) { display: block; width: auto !important; padding: 0 !important; border: 0; background: none !important; }
  .ipa-tabelle .ipa-modell { grid-area: modell; }
  .ipa-tabelle td.ipa-teil { grid-area: teil; }
  .ipa-tabelle td.ipa-aktion { grid-area: aktion; }
}

/* Anzeichen, Batteriezustand (nur neuere iPads), aufgeblähter Akku, Ablauf: Text links, Kasten rechts */
@media (min-width: 900px) { .ipa-raster { grid-template-columns: 7fr 5fr; align-items: start; } }
.ipa-raster > div:first-child > p:not(.etikett) { color: var(--text-2); max-width: 62ch; }
.ipa-raster > div:first-child a:not(.knopf) { color: var(--rot); }
.ipa-zustand { border-radius: 4px; border-left: 3px solid var(--rot); background: var(--werkbank); }
.ipa-zustand .etikett { letter-spacing: .14em; }
.ipa-zustand p:not(.etikett) { color: var(--text-2); }
.ipa-zustand a { color: var(--rot); }
.ipa-modelle { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--alu); }
.ipa-modelle li { padding: 9px 2px; border-bottom: 1px dashed var(--alu); font: 600 1rem var(--din); letter-spacing: .01em; }
.ipa-pfad { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 16px; }
.ipa-pfad span { font: 400 .86rem/1 var(--din); letter-spacing: .02em; color: var(--schwarz); background: #fff; border: 1px solid var(--alu); border-radius: 3px; padding: 7px 10px; }
.ipa-pfad span + span { margin-left: 22px; position: relative; }
.ipa-pfad span + span::before { content: "›"; position: absolute; left: -16px; top: 50%; translate: 0 -52%; color: var(--stahl); font-size: 1.1rem; }
/* Handy: Pfad als eine Textzeile, die an den Leerzeichen umbricht (der Pfeil hängt am vorigen Schritt) */
@media (max-width: 559px) {
  .ipa-pfad { display: block; font: 700 .9rem/1.5 var(--din); letter-spacing: .02em; }
  .ipa-pfad span { display: inline; padding: 0; border: 0; background: none; font: inherit; }
  .ipa-pfad span + span { margin-left: 0; position: static; }
  .ipa-pfad span + span::before { content: none; }
  .ipa-pfad span:not(:last-child)::after { content: "›"; margin: 0 6px 0 8px; color: var(--stahl); font-size: 1rem; }
}

/* Aufgebläht: Sofort-Hilfe als dunkle Karte */
.ipa-sofort { border-radius: 4px; }
.ipa-sofort .liste-haken li { color: var(--text-hell-2); }
.ipa-sofort .liste-haken li::before { border-color: var(--glut); }
.ipa-sofort .knopf-reihe { margin-top: .5em; }
.ipa-sofort__mehr { margin: 18px 0 0; font-size: .92rem; }
.ipa-sofort__mehr a { color: #fff; }
@media (min-width: 900px) { .ipa-sofort { position: sticky; top: calc(var(--kopf-h) + 32px); } }

/* Ablauf an der Werkbank */
.ipa-schritte { list-style: none; margin: 8px 0 24px; padding: 0; counter-reset: ipa; border-top: 2px solid var(--schwarz); }
.ipa-schritte li { counter-increment: ipa; position: relative; padding: 16px 0 14px 46px; border-bottom: 1px solid var(--alu); }
.ipa-schritte li::before { content: counter(ipa, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 700 .95rem var(--din); letter-spacing: .04em; color: var(--rot); }
.ipa-schritte .h4 { margin-bottom: .25em; }
.ipa-schritte p { margin: 0; color: var(--text-2); font-size: .98rem; }
.ipa-raster .ipa-risiko { max-width: 62ch; color: var(--text-2); }
.ipa-h-klein { margin: 1.6em 0 .3em; }
.ipa-wege { align-self: start; }
.ipa-wege .weg-kurz__block { background: #fff; border-radius: 4px; }
.ipa-wege .weg-kurz__block--leise { background: transparent; }
@media (min-width: 900px) { .ipa-wege { position: sticky; top: calc(var(--kopf-h) + 24px); } }

/* Vergleich mit Apple */
.ipa-vergleich { width: 100%; max-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ipa-vergleich__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); }
.ipa-vergleich 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; }
.ipa-vergleich thead th:not(:first-child) { text-align: right; }
.ipa-vergleich .ipa-modell { width: 52%; }
.ipa-vergleich td.ipa-v-preis { text-align: right; white-space: nowrap; font: 700 1.1rem var(--din); }
.ipa-vergleich td.ipa-v-preis--wir { color: var(--rot); }
.ipa-apple-schluss { margin: 24px 0 0; }
@media (max-width: 699px) {
  .ipa-vergleich tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 12px 2px; border-bottom: 1px dashed var(--alu); }
  .ipa-vergleich tbody :where(th, td) { display: block; width: auto !important; padding: 0 !important; border: 0; background: none !important; text-align: left !important; }
  .ipa-vergleich .ipa-modell { grid-column: 1 / -1; }
  .ipa-vergleich td.ipa-v-preis::before { content: attr(data-label); display: block; font: 400 .8rem/1.4 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
}
@media (max-width: 699px) { .ipa-vergleich thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* Weiterlesen und Quellen */
.ipa-ende { padding-top: 0; }
.ipa-verwandt { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; margin: 0; padding-top: 20px; border-top: 1px solid var(--alu); }
.ipa-verwandt .etikett { margin: 0 8px 0 0; }
.ipa-verwandt a { color: var(--rot); }
@media (max-width: 559px) { .ipa-verwandt .etikett { flex-basis: 100%; } }
.ipa-quellen { margin-top: 36px; font-size: .88rem; color: var(--text-2); }
.ipa-quellen .etikett { margin-bottom: .8em; }
.ipa-quellen p { max-width: 70ch; }
.ipa-quellen ul { list-style: none; margin: 0; padding: 0; }
.ipa-quellen li { margin-bottom: 4px; }
.ipa-quellen a { color: var(--text-2); }
.ipa-quellen a:hover { color: var(--rot); }