/* Ratgeber „Unbekanntes Teil“ (app/content/ratgeber/unbekanntes-teil-iphone.php): Legende, Pfad in den Einstellungen, Teile-Tabelle, Fälle */

/* Kopf */
.utip-kopf { padding-top: 24px; }
.utip-titel { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.7rem); max-width: 17ch; }
.utip-kopf .gross { max-width: 52ch; }
.utip-meta { margin: 20px 0 0; font: 400 .82rem/1.5 var(--din); letter-spacing: .06em; color: var(--stahl); }
.utip-meta a { color: inherit; }

/* Vermerke, die das iPhone kennt – Beleg im Kopf */
.utip-legende { width: 100%; max-width: 500px; justify-self: end; }
.utip-legende .beleg__titel { margin-bottom: 14px; }
/* Ein Raster für alle Zeilen: die Marken-Spalte ist so breit wie die längste Marke */
.utip-legende__liste { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 2px solid var(--schwarz); }
.utip-legende__liste > div { display: contents; }
.utip-legende__liste dt, .utip-legende__liste dd { margin: 0; border-bottom: 1px dashed var(--alu); }
.utip-legende__liste dt { padding: 11px 16px 11px 2px; }
.utip-legende__liste dd { padding: 12px 2px; font-size: .93rem; line-height: 1.45; color: var(--text-2); }
@media (max-width: 959px) { .utip-legende { justify-self: stretch; max-width: none; } }
@media (max-width: 479px) {
  .utip-legende__liste { grid-template-columns: minmax(0, 1fr); }
  .utip-legende__liste dt { padding: 14px 2px 6px; border-bottom: 0; }
  .utip-legende__liste dd { padding: 0 2px 14px; }
}

/* Vermerk als Marke, wie er in der Liste steht */
.utip-status { display: inline-block; padding: 3px 9px; border: 1px solid var(--schwarz); border-radius: 3px; background: #fff; color: var(--schwarz); font: 700 .8rem/1.35 var(--din); letter-spacing: .02em; white-space: nowrap; }
.utip-status--offen { border-style: dashed; border-color: var(--stahl); color: var(--text-2); }
.utip-status--rot { border-color: var(--rot); color: var(--rot); }

/* Zweispaltige Abschnitte: Text breiter als die Seite */
@media (min-width: 900px) { .utip-raster { grid-template-columns: 7fr 5fr; align-items: start; } }

/* Pfad in den Einstellungen */
.utip-pfad { list-style: none; margin: 0; padding: 30px 28px 6px; background: var(--werkbank); border-radius: 4px; align-self: center; }
.utip-pfad li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
.utip-pfad li::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--alu); }
.utip-pfad li:nth-last-child(2)::before { background: var(--rot); }
.utip-pfad li:last-child::before { display: none; }
.utip-pfad__nr { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--schwarz); border-radius: 4px; background: #fff; font: 700 1rem var(--din); }
.utip-pfad__name { padding-top: 8px; font: 700 1.3rem/1.2 var(--din); }
.utip-pfad__zusatz { grid-column: 2; margin-top: 2px; font-size: .9rem; line-height: 1.4; color: var(--stahl); }
.utip-pfad__ziel .utip-pfad__nr { background: var(--rot); border-color: var(--rot); color: #fff; }
.utip-pfad__ziel .utip-pfad__name { color: var(--rot); }

/* Einleitungen */
.utip-einleitung { max-width: 760px; margin-bottom: 32px; }
.utip-einleitung p:not(.etikett) { color: var(--text-2); }

/* Welche Teile erfasst werden */
.utip-tabelle { width: 100%; border-collapse: collapse; }
.utip-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); }
.utip-tabelle thead th { padding: 10px 8px; border-bottom: 2px solid var(--schwarz); text-align: center; font: 400 .74rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.utip-tabelle thead th:first-child { text-align: left; padding-left: 4px; }
.utip-tabelle tbody :is(th, td) { padding: 16px 8px; border-bottom: 1px dashed var(--alu); vertical-align: middle; }
.utip-tabelle tbody th { width: 34%; padding-left: 4px; text-align: left; font-weight: 400; }
.utip-tabelle__modell { font: 700 1.15rem/1.2 var(--din); }
.utip-tabelle tbody th small { display: block; margin-top: 2px; font-size: .86rem; color: var(--stahl); }
.utip-tabelle td { text-align: center; }
.utip-haken { display: inline-block; width: 15px; height: 8px; border-left: 2.5px solid var(--rot); border-bottom: 2.5px solid var(--rot); transform: translateY(-3px) rotate(-45deg); }
.utip-nein { color: var(--alu); font-weight: 700; }
.utip-fussnote { max-width: 760px; margin: 20px 0 0; font-size: .92rem; color: var(--text-2); }

@media (max-width: 699px) {
  .utip-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .utip-tabelle, .utip-tabelle tbody, .utip-tabelle caption { display: block; }
  .utip-tabelle tbody { border-top: 2px solid var(--schwarz); }
  .utip-tabelle tbody tr { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 2px 16px; border-bottom: 1px dashed var(--alu); }
  .utip-tabelle tbody :is(th, td) { padding: 0; border: 0; }
  .utip-tabelle tbody th { flex-basis: 100%; width: auto; margin-bottom: 2px; }
  .utip-tabelle td.utip-nein { display: none; }
  .utip-tabelle td.utip-ja { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 8px; border: 1px solid var(--alu); border-radius: 3px; background: #fff; font: 600 .86rem/1.3 var(--din); }
  .utip-tabelle td.utip-ja::after { content: attr(data-teil); }
  .utip-haken { width: 11px; height: 6px; border-width: 2px; transform: translateY(-2px) rotate(-45deg); }
}

/* Ausnahme iPhone 18 Pro */
.utip-ausnahme { max-width: 860px; margin: 44px 0 0; }

/* Vier Fälle am Beispiel Display */
.utip-faelle { margin: 0; padding: 28px clamp(20px, 3vw, 32px) 24px; background: #fff; border-radius: 4px; box-shadow: var(--schatten), 0 0 0 1px rgb(10 10 11 / .06); }
.utip-faelle figcaption { margin-bottom: 14px; }
.utip-faelle__liste { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.utip-faelle__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 0; border-bottom: 1px dashed var(--alu); }
.utip-faelle__liste p { margin: 0; font-size: .95rem; line-height: 1.45; }
.utip-faelle__fuss { margin: 14px 0 0; font-size: .86rem; line-height: 1.5; color: var(--stahl); }
@media (max-width: 479px) { .utip-faelle__liste li { grid-template-columns: minmax(0, 1fr); } .utip-faelle__liste .utip-status { justify-self: start; } }

/* Vor der Reparatur */
.utip-vorher { border-radius: 4px; }
.utip-vorher .h3 { color: #fff; margin-bottom: .7em; }
.utip-vorher .liste-haken { margin-bottom: 0; }
.utip-vorher .liste-haken li::before { border-color: var(--glut); }
.utip-vorher .knopf-reihe { margin-top: 1.4em; }
.utip-vorher p.utip-vorher__wege { margin: 18px 0 0; font-size: .92rem; }
.utip-vorher p.utip-vorher__preise { margin-top: 6px; }
.utip-vorher__wege a { color: #fff; }
.utip-vorher__wege a:hover { color: var(--text-hell-2); }

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