/* Ratgeber „Handy zur Reparatur verschicken“ (app/content/ratgeber/handy-verschicken.php) – alle Klassen mit hv-Vorsilbe */

/* ---------- Kopf mit Paket-Zeichnung ---------- */
.hv-kopf { padding-block: clamp(20px, .8rem + 1.5vw, 40px) clamp(32px, 1rem + 2vw, 56px); }
.hv-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.6rem); line-height: 1.02; max-width: 17ch; overflow-wrap: break-word; }
.hv-kopf .gross { max-width: 54ch; }
.hv-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 24px 0 0; font: 400 .76rem/1.5 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.hv-meta span:not(:last-child)::after { content: "·"; margin: 0 12px; color: var(--alu); }
/* schmal: untereinander ohne Trennpunkt, sonst hängt der Punkt am Zeilenende */
@media (max-width: 599px) {
  .hv-meta { flex-direction: column; gap: 2px; }
  .hv-meta span:not(:last-child)::after { content: none; }
}

.hv-paket { margin: 0; padding: 26px 24px 20px; background: var(--werkbank); border-radius: 4px; }
.hv-paket svg { width: 100%; height: auto; max-width: 440px; margin-inline: auto; overflow: visible; }
.hv-p-lasche { fill: #E6D8BC; stroke: #A38D66; stroke-width: 1.5; stroke-linejoin: round; }
.hv-p-lasche--seite { fill: #DDCCAA; }
.hv-p-wand { fill: #CDB68C; stroke: #8E7751; stroke-width: 2; }
.hv-p-boden { fill: #EFE4CE; stroke: #B49F78; stroke-width: 1; }
.hv-p-papier path { fill: #fff; stroke: #BFC4CB; stroke-width: 1.3; stroke-linejoin: round; }
.hv-p-knick path { fill: none; stroke: #D5D8DD; stroke-width: 1.2; stroke-linecap: round; }
.hv-p-handy { fill: var(--graphit); }
.hv-p-kamera { fill: var(--graphit-2); stroke: #3A3D43; stroke-width: 1; }
.hv-p-folie { fill: rgb(236 241 245 / .72); stroke: #A9B7C3; stroke-width: 1.5; }
.hv-p-folie-blasen { stroke: none; }
.hv-p-blase { fill: rgb(255 255 255 / .35); stroke: #B3C1CD; stroke-width: 1; }
.hv-p-zettel rect { fill: #fff; stroke: var(--stahl); stroke-width: 1.2; filter: drop-shadow(0 2px 2px rgb(10 10 11 / .18)); }
.hv-p-zettel-klein { font: 400 9px var(--din); letter-spacing: .22em; fill: var(--stahl); }
.hv-p-zettel-nr { font: 700 16px var(--mono); fill: var(--schwarz); }
.hv-p-nr circle { fill: var(--rot); stroke: #fff; stroke-width: 2.5; }
.hv-p-nr text { font: 700 14px var(--din); fill: #fff; text-anchor: middle; }

.hv-legende { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--alu); counter-reset: hvl; display: grid; gap: 7px 20px; }
@media (min-width: 560px) and (max-width: 959px) { .hv-legende { grid-template-columns: 1fr 1fr; } }
.hv-legende li { counter-increment: hvl; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; font-size: .94rem; line-height: 1.4; color: var(--text-2); }
.hv-legende li::before { content: counter(hvl); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--rot); color: #fff; font: 700 .8rem/1 var(--din); transform: translateY(3px); }

/* ---------- Packliste zum Abhaken ---------- */
.hv-packliste.abschnitt { padding-block: clamp(36px, 1.5rem + 2.5vw, 72px); }
.hv-packliste__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-bottom: 22px; }
.hv-packliste__kopf .h3 { margin: 0; }
.hv-packliste__kopf p { margin: 0; color: var(--text-2); }
.hv-packliste__raster { display: grid; gap: 28px 56px; }
@media (min-width: 900px) { .hv-packliste__raster { grid-template-columns: 5fr 4fr; } }
.hv-packliste__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.hv-packliste__gruppe legend { padding: 0; margin-bottom: 10px; }
.hv-packliste ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.hv-packliste li { border-bottom: 1px solid var(--alu); }
.hv-packliste label { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 12px 0; cursor: pointer; line-height: 1.45; }
.hv-packliste input { appearance: none; -webkit-appearance: none; margin: 0; width: 22px; height: 22px; border: 2px solid var(--schwarz); border-radius: 3px; background: #fff center / 14px no-repeat; cursor: pointer; transform: translateY(1px); transition: background-color .15s, border-color .15s; }
.hv-packliste input:checked { background-color: var(--rot); border-color: var(--rot);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hv-packliste input:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.hv-packliste input:checked + span { color: var(--stahl); text-decoration: line-through; text-decoration-color: var(--alu); }
.hv-packliste label:hover input:not(:checked) { border-color: var(--rot); }

/* ---------- Raster: Inhaltsverzeichnis links (mitlaufend), Text rechts ---------- */
.hv-raster { display: grid; gap: 36px; padding-block: clamp(44px, 1.5rem + 4vw, 104px) clamp(24px, 1rem + 2vw, 48px); }
@media (min-width: 1024px) {
  .hv-raster { grid-template-columns: 220px minmax(0, 1fr); gap: 80px; }
  .hv-inhalt { position: sticky; top: calc(var(--kopf-h) + 32px); align-self: start; }
}
.hv-inhalt .etikett { margin-bottom: 12px; }
.hv-inhalt ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.hv-inhalt li { counter-increment: toc; border-bottom: 1px solid var(--alu); }
.hv-inhalt a { display: flex; gap: 12px; padding: 10px 0; text-decoration: none; font-size: .93rem; line-height: 1.3; color: var(--text-2); }
.hv-inhalt a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 20px; font: 400 .74rem/1.75 var(--din); color: var(--stahl); }
.hv-inhalt a:hover { color: var(--rot); }
@media (max-width: 1023px) {
  .hv-inhalt ol { display: grid; column-gap: 28px; }
  .hv-inhalt a { padding: 11px 0; }
}
@media (min-width: 640px) and (max-width: 1023px) { .hv-inhalt ol { grid-template-columns: 1fr 1fr; } }

/* ---------- Artikeltext ---------- */
.hv-text { min-width: 0; max-width: 780px; }
.hv-text > section { margin-bottom: clamp(56px, 2rem + 3vw, 96px); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.hv-text .h2 { font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem); margin-bottom: .55em; }
.hv-text > section > .h4 { font-size: 1.3rem; margin: 1.6em 0 .45em; }
.hv-text > section > .hv-einstieg + .h4 { margin-top: 1.1em; }
.hv-text p, .hv-text li, .hv-text dd { color: var(--text-2); hyphens: auto; -webkit-hyphens: auto; }
.hv-text p { max-width: 68ch; }
.hv-text p.hv-einstieg { font-size: 1.18rem; line-height: 1.55; color: var(--text); }
.hv-text a:not(.knopf) { color: var(--schwarz); text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; }
.hv-text a:not(.knopf):hover { color: var(--rot); }
.hv-text a[href^="tel:"] { white-space: nowrap; }

/* Umschlag, Schachtel, Karton */
.hv-vergleich { margin: 26px 0 28px; border-top: 2px solid var(--schwarz); }
.hv-vergleich > div { display: grid; gap: 4px 32px; padding: 16px 0 18px; border-bottom: 1px solid var(--alu); }
@media (min-width: 700px) { .hv-vergleich > div { grid-template-columns: 230px minmax(0, 1fr); } }
.hv-vergleich dt { position: relative; padding-left: 26px; font: 700 1.12rem/1.3 var(--din); color: var(--schwarz); }
.hv-vergleich dt::before, .hv-vergleich dt::after { content: ""; position: absolute; left: 3px; top: .62em; width: 13px; height: 2px; background: var(--stahl); }
.hv-vergleich dt::before { transform: rotate(45deg); }
.hv-vergleich dt::after { transform: rotate(-45deg); }
.hv-vergleich > div:nth-child(2) dt::before { transform: none; }
.hv-vergleich > div:nth-child(2) dt::after { display: none; }
.hv-vergleich > div:last-child dt::before { left: 5px; top: .28em; width: 7px; height: 12px; background: none; border: solid var(--rot); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.hv-vergleich > div:last-child dt::after { display: none; }
.hv-vergleich dd { margin: 0; }

/* Buchen-Kasten */
.hv-los { margin-top: 28px; padding: clamp(24px, 1rem + 1.5vw, 36px); border-radius: 4px; background: var(--schwarz); color: var(--text-hell); }
.hv-los .h3 { color: #fff; max-width: 26ch; }
.hv-text .hv-los p { color: var(--text-hell-2); }
.hv-text .hv-los a:not(.knopf) { color: #fff; text-decoration-color: var(--glut); }
.hv-text .hv-los a:not(.knopf):hover { color: var(--glut); }
.hv-los .knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.hv-los .knopf { border-radius: 4px; }
.hv-text .hv-los .hv-los__klein { margin: 0; font-size: .92rem; }
.hv-los :focus-visible { outline-color: var(--glut); }
@media (max-width: 479px) { .hv-los .knopf { width: 100%; } }

/* Akku: erst anrufen */
.hv-warnung { margin: 6px 0 8px; padding: 22px 24px 8px; border: 2px solid var(--rot); border-radius: 4px; background: #fff; }
.hv-warnung__titel { margin: 0 0 10px; font: 400 .78rem var(--din); letter-spacing: .28em; text-transform: uppercase; color: var(--rot); }
.hv-text .hv-warnung p:not(.hv-warnung__titel) { color: var(--text); }
@media (max-width: 479px) { .hv-warnung { padding: 18px 16px 4px; } }

/* Weg durch die Werkstatt */
.hv-weg { list-style: none; margin: 28px 0 28px; padding: 0; }
.hv-weg li { position: relative; padding: 0 0 22px 40px; max-width: 64ch; }
.hv-weg li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--schwarz); background: #fff; z-index: 1; }
.hv-weg li::after { content: ""; position: absolute; left: 9px; top: 21px; bottom: -3px; width: 2px; background: var(--alu); }
.hv-weg li:last-child { padding-bottom: 0; }
.hv-weg li:last-child::after { display: none; }
.hv-weg li:nth-child(3)::before { border-color: var(--rot); }
.hv-weg li:last-child::before { background: var(--rot); border-color: var(--rot); }
.hv-weg__wann { display: block; margin-bottom: 3px; font: 700 1.05rem/1.3 var(--din); color: var(--schwarz); }

/* Laptop, Tablet, Konsole */
.hv-geraete { margin: 26px 0 0; border-top: 2px solid var(--schwarz); }
.hv-geraete > div { display: grid; gap: 6px 32px; padding: 20px 0 22px; border-bottom: 1px solid var(--alu); }
@media (min-width: 700px) { .hv-geraete > div { grid-template-columns: 200px minmax(0, 1fr); } }
.hv-geraete dt { display: flex; align-items: center; gap: 12px; font: 700 1.2rem/1.25 var(--din); color: var(--schwarz); }
.hv-geraete dt > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--werkbank); color: var(--schwarz); }
.hv-geraete dt svg { width: 24px; height: 24px; }
@media (min-width: 700px) { .hv-geraete dt { align-items: flex-start; flex-direction: column; gap: 10px; } }
.hv-geraete dd { margin: 0; }
.hv-geraete dd p:last-child { margin-bottom: 0; }

/* Über diesen Ratgeber */
.hv-autor { margin: 0 0 clamp(40px, 1.5rem + 2vw, 72px); padding: 20px 24px; border-left: 3px solid var(--rot); background: var(--werkbank); border-radius: 0 4px 4px 0; }
.hv-autor .etikett { margin-bottom: 8px; }
.hv-text .hv-autor p:last-child { margin: 0; font-size: .98rem; }

/* FAQ in der Textspalte statt mittig */
.hv-text .faq { padding-block: 0 8px; }
.hv-text .faq .rahmen { max-width: none; padding-inline: 0; }
.hv-text .faq .h2 { font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem); }

/* Weiterlesen */
.hv-weiter.abschnitt { padding-block: clamp(40px, 1.5rem + 3vw, 88px); }
.hv-weiter__liste { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 40px; border-top: 2px solid var(--schwarz); }
@media (min-width: 760px) { .hv-weiter__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hv-weiter__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hv-weiter__liste li { border-bottom: 1px solid var(--alu); }
.hv-weiter__liste a { position: relative; display: grid; gap: 4px; align-content: start; height: 100%; padding: 20px 36px 22px 0; text-decoration: none; }
.hv-weiter__liste a::after { content: "→"; position: absolute; right: 6px; top: 22px; color: var(--stahl); transition: transform .2s, color .2s; }
.hv-weiter__liste a:hover::after { color: var(--rot); transform: translateX(3px); }
.hv-weiter__liste .etikett { margin: 0; }
.hv-weiter__titel { font: 700 1.2rem/1.2 var(--din); color: var(--schwarz); }
.hv-weiter__liste a:hover .hv-weiter__titel { color: var(--rot); }
.hv-weiter__text { color: var(--text-2); font-size: .96rem; line-height: 1.45; }

@media print {
  .hv-paket, .hv-inhalt, .hv-los, .hv-weiter { display: none; }
}