/* Handy-Datenrettung (app/content/seiten/handy-datenrettung.php) – Klassen mit Vorsatz hdr- */

/* Kopf: Brotkrumen im dunklen Band, rechts die Preistafel */
.hdr-kopf { padding-top: 20px; }
.hdr-krumen { padding-top: 0; }
.hdr-krumen ol { color: var(--text-hell-2); }
.hdr-krumen li:not(:last-child)::after { color: var(--graphit-2); }
.hdr-krumen a { color: #fff; }
.hdr-krumen a:hover { color: #fff; }
.hdr-kopf__raster { margin-top: clamp(28px, 1rem + 3vw, 56px); align-items: start; }
.hdr-kopf .gross { max-width: 50ch; }
.hdr-kopf .h1 { max-width: 16ch; }

.hdr-preise { background: var(--graphit); border: 1px solid rgb(255 255 255 / .08); border-radius: 4px; padding: 26px 26px 22px; }
.hdr-preise .etikett { margin-bottom: 14px; }
.hdr-preise__liste { margin: 0; border-top: 1px solid rgb(255 255 255 / .16); }
.hdr-preise__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgb(255 255 255 / .16); }
.hdr-preise__zeile dt { color: var(--text-hell-2); font-size: .95rem; line-height: 1.4; }
.hdr-preise__zeile dt a { color: #fff; white-space: nowrap; }
.hdr-preise__zeile dd { margin: 0; font: 700 1.25rem/1 var(--din); color: #fff; white-space: nowrap; }
.hdr-preise__zeile--haupt dt { color: #fff; font-weight: 600; }
.hdr-preise__zeile--haupt dd { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.hdr-preise__fuss { margin: 16px 0 0; font-size: .88rem; color: var(--text-hell-2); }

/* Display statt Datenrettung */
.hdr-display { align-items: start; }
.hdr-display > div > p:not(.etikett) { color: var(--text-2); max-width: 58ch; }
.hdr-preisband { grid-template-columns: 1fr; margin-bottom: 14px; }
.hdr-preisband a { text-decoration: none; }
.hdr-preisband a:hover { text-decoration: underline; }
.hdr-klein { font-size: .9rem; color: var(--stahl); }

/* Einleitung über Rastern */
.hdr-kopfzeile { max-width: 760px; margin-bottom: clamp(24px, 1rem + 2vw, 44px); }
.hdr-kopfzeile p:not(.etikett) { color: var(--text-2); }

/* Vier Stellen zum Nachsehen */
.hdr-pruef { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: pruef; display: grid; gap: 16px; }
@media (min-width: 760px) { .hdr-pruef { grid-template-columns: 1fr 1fr; } }
.hdr-pruef li { counter-increment: pruef; background: #fff; border-radius: 4px; padding: 22px 24px 8px 64px; position: relative; }
.hdr-pruef li::before { content: counter(pruef, decimal-leading-zero); position: absolute; left: 24px; top: 23px; font: 700 .95rem var(--din); color: var(--rot); letter-spacing: .04em; }
.hdr-pruef p { color: var(--text-2); font-size: .98rem; }
.hdr-hinweis { background: #fff; max-width: 860px; margin: 0; }
.hdr-hinweis p:last-child { margin-bottom: 0; }

/* Verschlüsselung: drei Teile ergeben lesbare Daten */
.hdr-schluessel { align-items: center; }
.hdr-schluessel a { color: #fff; }
.hdr-schloss { margin: 0; display: grid; gap: 10px; }
.hdr-schloss__teil { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid rgb(255 255 255 / .16); border-radius: 4px; }
.hdr-schloss__teil strong { font: 700 1.1rem/1.2 var(--din); color: #fff; }
.hdr-schloss__teil span:not(.hdr-schloss__nr) { grid-column: 2; color: var(--text-hell-2); font-size: .92rem; line-height: 1.4; margin-top: 2px; }
.hdr-schloss__nr { grid-row: 1 / span 2; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / .28); border-radius: 3px; font: 700 .9rem/1 var(--din); color: #fff; }
.hdr-schloss__op { justify-self: start; width: 28px; margin-left: 19px; text-align: center; font: 700 1.6rem/1 var(--din); color: #fff; }
.hdr-schloss__teil--ziel { background: #fff; border-color: #fff; grid-template-columns: 1fr; }
.hdr-schloss__teil--ziel strong { color: var(--schwarz); }
.abschnitt--dunkel .hdr-schloss__teil--ziel span { grid-column: 1; color: var(--text-2); }

/* Typische Fälle */
.hdr-faelle { display: grid; gap: 28px 32px; }
@media (min-width: 700px) { .hdr-faelle { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hdr-faelle { grid-template-columns: repeat(4, 1fr); } }
.hdr-faelle article { border-top: 2px solid var(--schwarz); padding-top: 18px; }
.hdr-faelle .h4 { font-size: 1.25rem; margin-bottom: .5em; }
.hdr-faelle p { color: var(--text-2); font-size: .98rem; margin: 0; }

/* Tablets */
.hdr-iphone { align-self: start; }
.hdr-iphone .h3 { margin-bottom: .4em; }
.hdr-iphone .pfeil-link, .abschnitt--grau .pfeil-link { color: var(--schwarz); }
.abschnitt--grau .pfeil-link:hover { color: var(--rot); }

/* Ablauf + Code */
.hdr-ablauf-raster { align-items: start; }
.hdr-ablauf { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: ab; border-top: 2px solid var(--schwarz); }
.hdr-ablauf li { counter-increment: ab; position: relative; padding: 18px 0 14px 46px; border-bottom: 1px solid var(--alu); }
.hdr-ablauf li::before { content: counter(ab, decimal-leading-zero); position: absolute; left: 0; top: 20px; font: 700 .95rem var(--din); color: var(--rot); letter-spacing: .04em; }
.hdr-ablauf p { margin: 0; color: var(--text-2); font-size: .98rem; }
.hdr-code__karte { padding: 28px; }
.hdr-code__karte p:not(.etikett) { color: var(--text-2); margin-bottom: 0; font-size: .98rem; }
.hdr-muster { margin: 6px 0 18px; display: flex; align-items: center; gap: 20px; }
.hdr-muster svg { width: 132px; height: 132px; flex: none; background: #fff; border-radius: 4px; }
.hdr-muster figcaption { font-size: .95rem; color: var(--text-2); max-width: 24ch; }
.hdr-nw { white-space: nowrap; font-family: var(--din); font-weight: 700; color: var(--schwarz); }
.hdr-muster__weg { fill: none; stroke: var(--rot); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hdr-muster__punkt { fill: var(--alu); }
.hdr-muster__punkt--an { fill: var(--schwarz); }
.hdr-muster__zahl { font: 700 10px var(--din); fill: var(--stahl); }
.hdr-offen { margin: 20px 0 0; padding-left: 16px; border-left: 3px solid var(--alu); color: var(--text-2); font-size: .95rem; }

@media (max-width: 699px) {
  .hdr-kopf .knopf-reihe { display: grid; gap: 10px; }
  .hdr-kopf .knopf-reihe .knopf { width: 100%; }
  .hdr-preise { padding: 20px 18px 16px; }
  .hdr-pruef li { padding: 20px 18px 6px 56px; }
  .hdr-pruef li::before { left: 18px; top: 21px; }
  .hdr-muster { gap: 16px; }
  .hdr-muster svg { width: 116px; height: 116px; }
}