/* Ratgeber „Handy ins Wasser gefallen“ (app/content/ratgeber/handy-ins-wasser-gefallen.php) – alle Klassen mit hw-Vorsilbe */

/* Bühne: schwarz, oben Titel und Einleitung, darunter sofort die sechs Schritte und „Bitte nicht“ */
.hw-buehne { padding-block: 22px clamp(36px, 1.2rem + 2.5vw, 64px); }
.hw-buehne .krumen { padding-top: 0; margin-bottom: clamp(24px, 1rem + 2vw, 48px); }
.hw-buehne .krumen ol { color: var(--text-hell-2); }
.hw-buehne .krumen li:not(:last-child)::after { color: var(--graphit-2); }
.hw-buehne .krumen a { color: var(--text-hell); }
.hw-buehne .krumen a:hover { color: #fff; }

.hw-kopf { display: grid; gap: 8px 64px; align-items: end; }
@media (min-width: 1000px) { .hw-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hw-kopf .h1 { margin: 0; color: #fff; max-width: 18ch; overflow-wrap: break-word; }
.hw-kopf .gross { margin: 0; max-width: 52ch; color: var(--text-hell-2); }
@media (max-width: 999px) { .hw-kopf .h1 { margin-bottom: .35em; } }
.hw-meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 20px 0 0; font: 400 .74rem/1.5 var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--text-hell-2); }

@media (max-width: 599px) { .hw-meta__ort { display: none; } .hw-meta { margin-top: 16px; } }

.hw-sofort { margin-top: clamp(28px, .5rem + 3.5vw, 64px); color: var(--text-hell); }
.hw-sofort__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; padding-bottom: 14px; border-bottom: 2px solid var(--glut); }
.hw-sofort__titel { margin: 0; font: 700 1.35rem/1.2 var(--din); letter-spacing: 0; color: #fff; }
.hw-sofort__kopf p { margin: 0; font-size: .95rem; color: var(--text-hell-2); }
.hw-schritte { list-style: none; counter-reset: hw; margin: 0; padding: 0; display: grid; column-gap: 48px; }
@media (min-width: 700px) { .hw-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hw-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hw-schritte li { counter-increment: hw; position: relative; padding: 18px 0 20px 52px; border-bottom: 1px solid rgb(255 255 255 / .16); color: var(--text-hell-2); line-height: 1.5; font-size: .98rem; }
.hw-schritte li::before { content: counter(hw); position: absolute; left: 0; top: 15px; width: 34px; font: 700 2.3rem/1 var(--din); color: var(--glut); font-variant-numeric: tabular-nums; }
.hw-schritte strong { display: block; margin-bottom: 4px; font: 700 1.2rem/1.2 var(--din); color: #fff; }
.hw-sofort a { color: #fff; text-decoration-color: var(--glut); }
.hw-sofort a:hover { color: var(--glut); }

.hw-nicht { display: grid; gap: 14px 40px; margin-top: 30px; align-items: baseline; }
@media (min-width: 900px) { .hw-nicht { grid-template-columns: auto minmax(0, 1fr); } }
.hw-nicht__titel { margin: 0; font: 400 .78rem var(--din); letter-spacing: .28em; text-transform: uppercase; color: var(--glut); }
.hw-nicht ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.hw-nicht li { position: relative; padding-left: 24px; color: var(--text-hell); line-height: 1.4; }
.hw-nicht li::before, .hw-nicht li::after { content: ""; position: absolute; left: 3px; top: .7em; width: 13px; height: 2px; background: var(--glut); }
.hw-nicht li::before { transform: rotate(45deg); }
.hw-nicht li::after { transform: rotate(-45deg); }
.hw-sofort .hw-nicht a { color: inherit; text-decoration-color: rgb(255 255 255 / .28); }
.hw-sofort .hw-nicht a:hover { color: #fff; text-decoration-color: var(--glut); }
@media (max-width: 759px) { .hw-nicht ul { flex-direction: column; } }

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

/* Artikeltext */
.hw-text { min-width: 0; max-width: 780px; }
.hw-text > section { margin-bottom: clamp(56px, 2rem + 3vw, 96px); }
.hw-text .h2 { font-size: clamp(1.65rem, 1.25rem + 1.3vw, 2.35rem); margin-bottom: .55em; }
.hw-text > section > .h4 { font-size: 1.3rem; margin: 1.6em 0 .45em; }
.hw-text > section > .h2 + .h4 { margin-top: .4em; }
.hw-text p, .hw-text li, .hw-text dd { color: var(--text-2); hyphens: auto; -webkit-hyphens: auto; }
.hw-text p { max-width: 68ch; }
.hw-text p.hw-einstieg { font-size: 1.18rem; line-height: 1.55; color: var(--text); }
.hw-text a:not(.knopf) { color: var(--schwarz); text-decoration-color: var(--rot); text-decoration-thickness: 1.5px; }
.hw-text a:not(.knopf):hover { color: var(--rot); }

/* Flüssigkeiten */
.hw-fluessig { margin: 28px 0 0; border-top: 2px solid var(--schwarz); }
.hw-fluessig > div { display: grid; gap: 4px 36px; padding: 18px 0 20px; border-bottom: 1px solid var(--alu); }
@media (min-width: 700px) { .hw-fluessig > div { grid-template-columns: 200px minmax(0, 1fr); } }
.hw-fluessig dt { font: 700 1.2rem/1.3 var(--din); color: var(--schwarz); }
.hw-fluessig dd { margin: 0; }

/* Verlauf der Korrosion: Punkte von Wasserblau über Belaggrün zu Rot */
.hw-verlauf { list-style: none; margin: 30px 0 30px; padding: 0; }
.hw-verlauf li { position: relative; padding: 0 0 24px 40px; max-width: 64ch; }
.hw-verlauf 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; }
.hw-verlauf li::after { content: ""; position: absolute; left: 9px; top: 21px; bottom: -3px; width: 2px; background: var(--alu); }
.hw-verlauf li:last-child { padding-bottom: 0; }
.hw-verlauf li:last-child::after { display: none; }
.hw-verlauf li:nth-child(1)::before { background: #2F7DB8; border-color: #2F7DB8; }
.hw-verlauf li:nth-child(3)::before { background: #5E8F7B; border-color: #5E8F7B; }
.hw-verlauf li:nth-child(4)::before { background: var(--rot); border-color: var(--rot); }
.hw-verlauf__wann { display: block; margin-bottom: 3px; font: 700 1.05rem/1.3 var(--din); color: var(--schwarz); }

/* Werkstatt oder abwarten */
.hw-kriterien { display: grid; gap: 16px; margin: 28px 0 0; }
@media (min-width: 760px) { .hw-kriterien { grid-template-columns: 7fr 5fr; } }
.hw-kriterien__spalte { padding: 24px 24px 20px; border-radius: 4px; background: var(--werkbank); }
.hw-kriterien__spalte--ja { background: #fff; border: 2px solid var(--schwarz); }
@media (max-width: 599px) { .hw-kriterien__spalte { padding: 20px 18px 16px; } }
.hw-kriterien .h4 { font-size: 1.2rem; margin-bottom: .8em; }
.hw-kriterien ul { list-style: none; margin: 0 0 14px; padding: 0; }
.hw-kriterien li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--alu); line-height: 1.45; font-size: 1rem; }
.hw-kriterien li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; background: var(--stahl); }
.hw-kriterien__spalte--ja li::before { background: var(--rot); }
.hw-kriterien p { margin: 0; font-size: .95rem; }

.hw-los { margin-top: 20px; padding: clamp(24px, 1rem + 1.5vw, 36px); border-radius: 4px; background: var(--schwarz); color: var(--text-hell); }
.hw-los .h3 { color: #fff; max-width: 26ch; }
.hw-text .hw-los p { color: var(--text-hell-2); }
.hw-text .hw-los a:not(.knopf) { color: #fff; text-decoration-color: var(--glut); }
.hw-text .hw-los a:not(.knopf):hover { color: var(--glut); }
.hw-los .knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 16px; }
.hw-text .hw-los .hw-los__klein { margin: 0; font-size: .92rem; max-width: none; }
.hw-los__klein a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 479px) { .hw-los .knopf { width: 100%; } }

/* Über diesen Ratgeber */
.hw-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; }
.hw-autor .etikett { margin-bottom: 8px; }
.hw-text .hw-autor p:last-child { margin: 0; font-size: .98rem; }

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

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

/* Brotkrumen auf der Bühne: aktuelles Glied auf Höhe der Links (die Links bekommen unter 900 px Tipp-Polster) */
@media (max-width: 899px) { .hw-buehne .krumen li[aria-current] { padding-block: 12px; } }