/* Ratgeber „Handy lädt nicht mehr“ (app/content/ratgeber/handy-laedt-nicht.php) – alle Klassen mit hl-Vorsilbe */

/* Kopf: Text links, Schnittzeichnung der Buchse rechts */
.hl-kopf { padding-block: 0 clamp(32px, 1rem + 2vw, 56px); }
.hl-kopf .krumen { margin-bottom: clamp(20px, .8rem + 1.5vw, 40px); }
/* site.css gibt den Krumen-Links unter 900 px 12 px Polster (Tippfläche) – der Text der aktuellen Seite rutscht sonst nach oben */
@media (max-width: 899px) { .hl-kopf .krumen ol { align-items: center; } }
.hl-kopf__raster { display: grid; gap: 36px; align-items: end; }
@media (min-width: 1024px) { .hl-kopf__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; } }
.hl-kopf .h1 { max-width: 16ch; overflow-wrap: break-word; }
.hl-kopf .gross { max-width: 54ch; }
/* Trennpunkt VOR jedem Eintrag, links außerhalb der Box: am Zeilenanfang schneidet overflow ihn ab – kein hängender Punkt beim Umbruch */
.hl-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 24px 0 0; overflow: hidden; font: 400 .8rem/1.5 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.hl-meta span { position: relative; margin-right: 28px; }
.hl-meta span:last-child { margin-right: 0; }
.hl-meta span::before { content: "·"; position: absolute; left: -28px; width: 28px; text-align: center; letter-spacing: 0; color: var(--alu); }
@media (max-width: 599px) { .hl-meta { flex-direction: column; gap: 4px; } }

/* Schnittzeichnung */
.hl-schnitt { margin: 0; width: 100%; max-width: 560px; scroll-margin-top: calc(var(--kopf-h) + 24px); }
.hl-schnitt svg { width: 100%; height: auto; overflow: visible; }
.hl-s-glas { fill: #fff; stroke: var(--schwarz); stroke-width: 1.2; }
.hl-s-panel { fill: var(--graphit); }
.hl-s-alu { fill: var(--alu); stroke: var(--stahl); stroke-width: .8; }
.hl-s-hohl { fill: #fff; }
.hl-s-platine { fill: #fff; stroke: var(--schwarz); stroke-width: 1.2; }
.hl-s-chip { fill: var(--schwarz); }
.hl-s-bein { fill: var(--stahl); }
.hl-s-kontakt rect { fill: #B08A2E; }
.hl-s-fussel { fill: #B7AE9F; stroke: #7D7568; stroke-width: .6; }
.hl-s-faser { fill: none; stroke: #6F685C; stroke-width: .8; stroke-linecap: round; }
.hl-s-stecker { fill: var(--schwarz); }
.hl-s-bruch { fill: none; stroke: var(--stahl); stroke-width: 1.2; stroke-linejoin: round; }
.hl-s-soll { fill: none; stroke: var(--rot); stroke-width: 1.4; stroke-dasharray: 4 3; }
.hl-s-mass { stroke: var(--rot); stroke-width: 1.2; }
.hl-s-spitze { fill: var(--rot); }
.hl-s-masslinie line { stroke: var(--rot); stroke-width: .8; opacity: .55; }
.hl-s-fuehrung line { stroke: var(--schwarz); stroke-width: 1; }
.hl-s-fuehrung circle { fill: var(--schwarz); }
.hl-s-pos circle { fill: #fff; stroke: var(--schwarz); stroke-width: 1.4; }
.hl-s-pos text { font: 700 14px var(--din); text-anchor: middle; fill: var(--schwarz); }

.hl-legende { list-style: none; counter-reset: pos; margin: 16px 0 10px; padding: 14px 0 0; border-top: 2px solid var(--schwarz);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; font-size: .92rem; }
.hl-legende li { counter-increment: pos; display: flex; align-items: center; gap: 10px; line-height: 1.3; }
.hl-legende li::before { content: counter(pos); flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  border: 1.4px solid var(--schwarz); border-radius: 50%; font: 700 .76rem var(--din); }
.hl-schnitt figcaption { font-size: .85rem; color: var(--stahl); }
.hl-schnitt figcaption::before { content: ""; display: inline-block; width: 18px; border-top: 2px dashed var(--rot); vertical-align: middle; margin-right: 8px; }
@media (max-width: 419px) { .hl-legende { grid-template-columns: 1fr; } }

/* Raster: Inhaltsverzeichnis links (mitlaufend), Text rechts */
.hl-raster { display: grid; gap: 36px; padding-block: clamp(40px, 1.5rem + 3vw, 96px) clamp(16px, .5rem + 2vw, 40px); }
@media (min-width: 1024px) {
  .hl-raster { grid-template-columns: 230px minmax(0, 1fr); gap: 80px; }
  .hl-inhalt { position: sticky; top: calc(var(--kopf-h) + 32px); align-self: start; }
}
.hl-inhalt .etikett { margin-bottom: 14px; }
.hl-inhalt__gruppe { margin: 18px 0 6px; font: 700 .95rem/1.2 var(--din); color: var(--schwarz); }
.hl-inhalt .etikett + .hl-inhalt__gruppe { margin-top: 0; }
.hl-inhalt ol { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.hl-inhalt li { border-bottom: 1px solid var(--alu); }
.hl-inhalt a { display: flex; gap: 12px; padding: 9px 0; text-decoration: none; font-size: .93rem; line-height: 1.3; color: var(--text-2); }
.hl-inhalt a:hover { color: var(--rot); }
.hl-inhalt__nr { flex: none; width: 16px; font: 700 .85rem/1.5 var(--din); color: var(--rot); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  .hl-inhalt { padding: 22px 20px 20px; background: var(--werkbank); border-radius: 4px; }
  .hl-inhalt a { padding: 11px 0; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hl-inhalt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .hl-inhalt > .etikett { grid-column: 1 / -1; }
  .hl-inhalt__gruppe { grid-row: 2; margin-top: 0; }
  .hl-inhalt ol { grid-row: 3; }
}

/* Artikeltext */
.hl-text { min-width: 0; max-width: 780px; }
.hl-text > section { margin-bottom: clamp(56px, 2rem + 3vw, 96px); scroll-margin-top: calc(var(--kopf-h) + 24px); }
.hl-text > section:last-child { margin-bottom: 0; }
.hl-text .h2 { position: relative; font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem); margin-bottom: .55em; }
.hl-nr { display: block; margin-bottom: .45em; font: 700 .78rem/1 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); }
.hl-nr::before { content: "Schritt "; }
.hl-text > section > .h4 { font-size: 1.3rem; margin: 1.6em 0 .45em; }
.hl-text p, .hl-text li { color: var(--text-2); hyphens: auto; -webkit-hyphens: auto; }
.hl-text p { max-width: 68ch; }
.hl-text p.hl-einstieg { font-size: 1.18rem; line-height: 1.55; color: var(--text); }
.hl-text a:not(.knopf) { color: var(--schwarz); text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; }
.hl-text a:not(.knopf):hover { color: var(--rot); }

/* Gegenprobe: zwei mögliche Ergebnisse */
.hl-probe { display: grid; gap: 16px; margin: 26px 0 26px; }
@media (min-width: 700px) { .hl-probe { grid-template-columns: 1fr 1fr; } }
.hl-probe__fall { padding: 22px 24px 18px; border-radius: 4px; background: var(--werkbank); }
.hl-probe__fall:first-child { background: #fff; border: 2px solid var(--schwarz); }
.hl-text .hl-probe__ergebnis { margin: 0 0 8px; font: 400 .8125rem/1.4 var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hl-probe .h4 { font-size: 1.25rem; margin-bottom: .45em; }
.hl-text .hl-probe__fall p:last-child { margin: 0; font-size: 1rem; }

/* Werkstatt-Hinweis im Text */
.hl-notiz { margin: 24px 0; }
.hl-notiz .etikett { margin-bottom: 6px; }
.hl-text .hl-notiz p:last-child { margin: 0; }

/* Anzeichen auf einen Blick */
.hl-ueberblick { scroll-margin-top: var(--kopf-h); }
.hl-abschnittskopf { max-width: 760px; margin-bottom: 32px; }
.hl-abschnittskopf p:not(.etikett) { color: var(--text-2); }
.hl-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid var(--schwarz); }
.hl-tabelle th, .hl-tabelle td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--alu); vertical-align: top; line-height: 1.45; }
.hl-tabelle thead th { padding-block: 12px; font: 400 .72rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hl-tabelle tbody th { width: 40%; font: 700 1.05rem/1.35 var(--din); color: var(--schwarz); }
.hl-tabelle td { color: var(--text-2); }
.hl-tabelle td.hl-tabelle__link { width: 1%; white-space: nowrap; }
.hl-tabelle .pfeil-link { color: var(--schwarz); font-size: .95rem; }
.hl-tabelle .pfeil-link:hover { color: var(--rot); }
.hl-tabelle tbody tr:hover { background: #FAFAFB; }
@media (max-width: 759px) {
  .hl-tabelle, .hl-tabelle tbody, .hl-tabelle tr, .hl-tabelle th, .hl-tabelle td { display: block; width: auto; }
  .hl-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hl-tabelle { background: none; }
  .hl-tabelle tr { padding: 16px 16px 14px; background: #fff; border-bottom: 1px solid var(--alu); }
  .hl-tabelle th, .hl-tabelle td { padding: 0; border: 0; }
  .hl-tabelle tbody th { width: auto; margin-bottom: 6px; }
  .hl-tabelle td[data-spalte]::before { content: attr(data-spalte); display: block; margin-bottom: 2px; font: 400 .8rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
  .hl-tabelle td.hl-tabelle__link { width: auto; margin-top: 8px; }
  .hl-tabelle .pfeil-link { display: inline-flex; padding-block: 6px; }
}

/* Kosten und Termin */
.hl-kosten { scroll-margin-top: var(--kopf-h); }
.hl-kosten__kopf { display: grid; gap: 28px; align-items: end; margin-bottom: 56px; }
@media (min-width: 960px) { .hl-kosten__kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.hl-kosten__kopf .gross { margin-bottom: 0; }
.hl-preisband { grid-template-columns: 1fr; }
.hl-preisband li { align-items: baseline; }
.hl-preisband span a { color: var(--schwarz); text-decoration-color: var(--rot); }
.hl-preisband span a:hover { color: var(--rot); }
.hl-preisband small { display: block; font-size: .85rem; color: var(--stahl); }
.hl-preisband strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.hl-modelle__titel { margin: 0 0 .3em; }
.hl-modelle__vor { color: var(--text-2); max-width: 70ch; margin-bottom: 20px; }
.hl-modelle { width: 100%; border-collapse: collapse; background: #fff; border-top: 2px solid var(--schwarz); font-variant-numeric: tabular-nums; }
.hl-modelle th, .hl-modelle td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--alu); vertical-align: middle; }
.hl-modelle thead th { padding-block: 12px; font: 400 .72rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.hl-modelle tbody th { font: 700 1.05rem/1.25 var(--din); }
.hl-modelle tbody th a { text-decoration: none; }
.hl-modelle tbody th a:hover { text-decoration: underline; }
.hl-modelle__marke { display: block; font: 400 .8rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.hl-preis { font: 700 1.05rem var(--din); color: var(--rot); text-decoration: none; white-space: nowrap; }
.hl-preis:hover { color: var(--rot-tief); text-decoration: underline; }
.hl-modelle td small { display: block; font-size: .78rem; line-height: 1.3; color: var(--stahl); }
.hl-modelle__leer { color: var(--stahl); font-size: .88rem; }
.hl-modelle td.hl-modelle__buchen { text-align: right; }
.hl-modelle tbody tr:hover { background: #FAFAFB; }
@media (max-width: 759px) {
  .hl-modelle, .hl-modelle tbody, .hl-modelle tr, .hl-modelle th, .hl-modelle td { display: block; }
  .hl-modelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hl-modelle { background: none; }
  .hl-modelle tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; padding: 16px 16px 18px; background: var(--werkbank); border-bottom: 1px solid var(--alu); }
  .hl-modelle th, .hl-modelle td { padding: 0; border: 0; }
  .hl-modelle tbody th { grid-column: 1 / -1; font-size: 1.15rem; }
  .hl-modelle td[data-spalte]::before { content: attr(data-spalte); display: block; margin-bottom: 2px; font: 400 .8rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
  .hl-modelle td.hl-modelle__buchen { grid-column: 1 / -1; text-align: left; }
  .hl-modelle__buchen:empty { display: none; }
}

.hl-suche { display: grid; gap: 16px 40px; align-items: center; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--alu); }
@media (min-width: 900px) { .hl-suche { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.hl-suche p { margin: 0; color: var(--text-2); }
.hl-suche .h4 { margin-bottom: .2em; }
.hl-suche .suche { margin-bottom: 0; }
/* Termin: hell und ruhig im Kostenabschnitt (vorher ein eigener dunkler Abschnitt direkt vor FAQ und dunklem Schlussband) */
.hl-termin { display: grid; gap: 28px 64px; margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--schwarz); }
@media (min-width: 960px) { .hl-termin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.hl-termin .etikett { margin-bottom: .7em; }
.hl-termin .h3 { margin-bottom: .5em; }
.hl-termin__text p:not(.etikett):not(.knopf-reihe) { margin: 0 0 .8em; color: var(--text-2); max-width: 52ch; }
.hl-termin .knopf-reihe { margin-top: 18px; }
.hl-termin__liste { margin: 0; align-self: start; }
.hl-termin__liste li { color: var(--text-2); margin-bottom: 12px; }
.hl-termin__liste a { color: var(--schwarz); text-decoration-color: var(--rot); }
.hl-termin__liste a:hover { color: var(--rot); }
.hl-nw { white-space: nowrap; }
@media (min-width: 960px) { .hl-termin__liste { padding-top: 34px; } }   /* erste Zeile auf Höhe der Überschrift links */
@media (max-width: 479px) { .hl-termin .knopf { width: 100%; } }