/* Ratgeber „Handy geht nicht mehr an“ (app/content/ratgeber/handy-geht-nicht-mehr-an.php): Fahrplan nach Symptom, Ladezeiten, Tastenfolgen, Preise */

/* Kopf: Überschrift links, Antwort rechts */
.hgn-kopf { padding-top: 24px; }
.hgn-kopf__raster { display: grid; gap: 22px 64px; align-items: end; }
@media (min-width: 960px) { .hgn-kopf__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.hgn-titel { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.7rem); max-width: 14ch; margin-bottom: 0; }
.hgn-kopf .gross { max-width: 56ch; margin-bottom: 0; }
.hgn-ausnahme { max-width: 56ch; margin: 22px 0 0; padding: 12px 18px; font-size: .95rem; line-height: 1.5; }
.hgn-ausnahme strong { font-family: var(--din); }
.hgn-meta { margin: 18px 0 0; font: 400 .82rem/1.5 var(--din); letter-spacing: .06em; color: var(--stahl); }
.hgn-meta a { color: inherit; }

/* Fahrplan nach Symptom: Karten mit dem Bild, das der Leser sieht */
.hgn-plan__kopf { max-width: 840px; margin-bottom: 36px; }
.hgn-plan__kopf p:not(.etikett) { max-width: 70ch; margin-bottom: 0; color: var(--text-2); }
.hgn-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .hgn-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hgn-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hgn-fall { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 24px 22px 20px; background: #fff; border-top: 2px solid var(--schwarz); border-radius: 4px; box-shadow: var(--schatten), 0 0 0 1px rgb(10 10 11 / .06); }
.hgn-sym { width: 56px; height: auto; }
.hgn-fall__text { display: flex; flex-direction: column; align-self: stretch; }
.hgn-fall__titel { margin: 0 0 12px; font: 700 1.28rem/1.15 var(--din); letter-spacing: -.01em; }
.hgn-fall__daten { margin: 0; display: grid; gap: 10px; }
.hgn-fall__daten dt { margin-bottom: 2px; font: 400 .72rem/1.3 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hgn-fall__daten dd { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--text-2); }
.hgn-fall__daten dd a { color: var(--schwarz); text-decoration-color: var(--rot); }
.hgn-fall__daten dd a:hover { color: var(--rot); }
.hgn-fall__weiter { margin: auto 0 0; padding-top: 14px; font-size: .95rem; }
.hgn-fall__weiter .pfeil-link { display: inline; color: var(--rot); }
.hgn-fall__weiter .pfeil-link::after { content: "\00a0→"; display: inline-block; }
@media (max-width: 479px) {
  .hgn-fall { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px 16px 16px; }
  .hgn-sym { width: 44px; }
}

/* Zeichnungen: schlicht, Schwarz/Weiß/Grau, Rot sparsam */
.hgn-sym__geh { fill: #fff; stroke: var(--schwarz); stroke-width: 2; }
.hgn-sym__aus { fill: var(--schwarz); }
.hgn-sym__hell { fill: var(--werkbank); }
.hgn-sym__rot { fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hgn-sym__weiss { fill: none; stroke: #fff; stroke-width: 2; }
.hgn-sym__linie { fill: none; stroke: var(--schwarz); stroke-width: 1.8; stroke-linejoin: round; }
.hgn-sym__fuell { fill: var(--rot); }
.hgn-sym__fuell--dunkel { fill: var(--schwarz); }
.hgn-sym__grau { fill: none; stroke: var(--stahl); stroke-width: 1.6; stroke-linecap: round; }

/* Zweispaltige Abschnitte: Text breiter als die Seite */
.hgn-raster > * { min-width: 0; }
.hgn-raster { align-items: start; }
@media (min-width: 900px) {
  .hgn-raster { grid-template-columns: 7fr 5fr; }
  .hgn-raster--zwei { grid-template-columns: 5fr 7fr; }
}
.hgn-text p, .hgn-text li { max-width: 70ch; }
.hgn-plan__kopf p, .hgn-einleitung p, .hgn-text p, .hgn-fussnote { text-wrap: pretty; }
.hgn-text p a { text-decoration-color: var(--rot); }
.hgn-text .hinweis-box { margin-bottom: 0; }

/* Ladezeit laut Hersteller */
.hgn-zeiten { padding: 28px 26px 14px; background: var(--werkbank); border-radius: 4px; }
.hgn-zeiten .h4 { margin-bottom: 14px; }
.hgn-zeiten__liste { margin: 0; border-top: 2px solid var(--schwarz); }
.hgn-zeiten__liste > div { padding: 12px 0; border-bottom: 1px dashed var(--alu); }
.hgn-zeiten__liste > div:last-child { border-bottom: 0; }
.hgn-zeiten__liste dt { font: 700 1.05rem/1.2 var(--din); }
.hgn-zeiten__liste dd { margin: 2px 0 0; font-size: .93rem; line-height: 1.45; color: var(--text-2); }

/* Neustart erzwingen: Tasten je Gerät */
.hgn-einleitung { max-width: 760px; margin-bottom: 32px; }
.hgn-einleitung p:not(.etikett) { max-width: 70ch; margin-bottom: 0; color: var(--text-2); }
.hgn-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid var(--schwarz); }
.hgn-tabelle th, .hgn-tabelle td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--alu); vertical-align: top; line-height: 1.7; }
.hgn-tabelle thead th { padding-block: 12px; font: 400 .72rem/1.4 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hgn-tabelle tbody th { width: 30%; font-weight: 400; line-height: 1.45; }
.hgn-tabelle__geraet { font: 700 1.1rem/1.25 var(--din); }
.hgn-tabelle tbody th small { display: block; margin-top: 2px; font-size: .86rem; color: var(--stahl); }
.hgn-tabelle td { color: var(--text-2); }
.hgn-tabelle tbody tr:hover { background: #FAFAFB; }
.hgn-taste { display: inline-block; padding: 0 8px 1px; border: 1px solid var(--stahl); border-bottom-width: 2px; border-radius: 3px; background: #fff; color: var(--schwarz); font: 600 .84rem/1.45 var(--din); letter-spacing: .02em; white-space: nowrap; }
.hgn-fussnote { max-width: 70ch; margin: 18px 0 0; font-size: .92rem; color: var(--text-2); }
@media (max-width: 699px) {
  .hgn-tabelle, .hgn-tabelle tbody, .hgn-tabelle tr, .hgn-tabelle th, .hgn-tabelle td { display: block; width: auto; }
  .hgn-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hgn-tabelle { background: none; }
  .hgn-tabelle tr { padding: 16px 16px 14px; background: #fff; border-bottom: 1px solid var(--alu); }
  .hgn-tabelle th, .hgn-tabelle td { padding: 0; border: 0; }
  .hgn-tabelle tbody th { width: auto; margin-bottom: 6px; }
}

/* Kosten */
.hgn-kosten__kopf { display: grid; gap: 28px; align-items: end; margin-bottom: 36px; }
@media (min-width: 960px) { .hgn-kosten__kopf { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; } }
.hgn-kosten__kopf .gross { margin-bottom: 0; }
.hgn-preisband { grid-template-columns: 1fr; }
.hgn-preisband li { align-items: baseline; }
.hgn-preisband span a { color: var(--schwarz); text-decoration-color: var(--rot); }
.hgn-preisband span a:hover { color: var(--rot); }
.hgn-preisband small { display: block; font-size: .85rem; color: var(--stahl); }
.hgn-preisband strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.hgn-modelle__vor { margin: 0 0 12px; font-size: .95rem; color: var(--text-2); }
.hgn-modelle { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hgn-modelle a { display: inline-block; padding: 8px 12px; border: 1px solid var(--alu); border-radius: 3px; background: #fff; font: 600 .92rem/1.2 var(--din); text-decoration: none; }
.hgn-modelle a:hover { border-color: var(--schwarz); color: var(--schwarz); }
/* Preise je Modell, falls die Beispielmodelle verschiedene Preise haben */
.hgn-preistabelle { width: 100%; margin-bottom: 32px; border-collapse: collapse; background: #fff; border-top: 2px solid var(--schwarz); font-variant-numeric: tabular-nums; }
.hgn-preistabelle th, .hgn-preistabelle td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--alu); }
.hgn-preistabelle thead th { padding-block: 12px; font: 400 .72rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hgn-preistabelle tbody th { font: 700 1.05rem/1.25 var(--din); }
.hgn-preistabelle tbody th a { text-decoration: none; }
.hgn-preistabelle tbody th a:hover { text-decoration: underline; }
.hgn-preistabelle td a { text-decoration-color: var(--rot); }
@media (max-width: 599px) {
  .hgn-preistabelle, .hgn-preistabelle tbody, .hgn-preistabelle tr, .hgn-preistabelle th, .hgn-preistabelle td { display: block; }
  .hgn-preistabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hgn-preistabelle { background: none; }
  .hgn-preistabelle tr { padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--alu); }
  .hgn-preistabelle th, .hgn-preistabelle td { padding: 0; border: 0; }
  .hgn-preistabelle td[data-spalte]::before { content: attr(data-spalte); display: block; margin-top: 8px; font: 400 .78rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
}
.hgn-suche { display: grid; gap: 12px; max-width: 560px; margin: 0 0 48px; }
.hgn-suche p { margin: 0; color: var(--text-2); }
.hgn-schluss { align-items: start; }
@media (min-width: 900px) { .hgn-schluss { grid-template-columns: 7fr 5fr; } }
.hgn-los { border-radius: 4px; }
.hgn-los .h3 { margin-bottom: .6em; color: #fff; }
.hgn-los .knopf-reihe { margin-top: 1.2em; }
.hgn-los p.hgn-los__weg { margin: 18px 0 0; font-size: .92rem; }
.hgn-los__weg a { color: #fff; }
.hgn-los__weg a:hover { color: var(--text-hell-2); }

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