/* Ratgeber „Festplatte klackert“ (app/content/ratgeber/festplatte-klackert.php) – nur Ergänzungen zu site.css */

/* ---------- Kopf mit Zeichnung ---------- */
.fk-kopf { padding-top: 28px; }
.fk-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.6rem); line-height: 1.02; }
.fk-kopf .gross { max-width: 52ch; }
.fk-meta { margin: 22px 0 0; font: 400 .78rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.fk-meta time, .fk-meta span { white-space: nowrap; }
/* Schmal: Datum in eigene Zeile statt eines Trennpunkts am Zeilenende */
@media (max-width: 479px) { .fk-meta__trenner { display: none; } .fk-meta time { display: block; margin-top: 4px; } }
.fk-nowrap { white-space: nowrap; }
@media (min-width: 960px) { .fk-kopf .kopf-bild { grid-template-columns: 7fr 5fr; } }

.fk-zeichnung { margin: 0; padding: 24px 22px 20px; background: var(--werkbank); border-radius: var(--radius-gross); }
.fk-zeichnung svg { width: 100%; height: auto; }
.fk-legende { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--alu); counter-reset: fk-leg; display: grid; gap: 7px; }
.fk-legende li { counter-increment: fk-leg; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: baseline; font-size: .93rem; color: var(--text-2); line-height: 1.4; }
.fk-legende li::before { content: counter(fk-leg); 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); }
.fk-legende strong { color: var(--schwarz); font-weight: 600; }

.fk-z__gehaeuse { fill: #C9CDD3; stroke: var(--stahl); stroke-width: 1.5; }
.fk-z__schraube circle { fill: #B3B8BF; stroke: var(--stahl); stroke-width: 1.2; }
.fk-z__scheibe { fill: url(#fk-z-glanz); stroke: var(--stahl); stroke-width: 1.5; }
.fk-z__spur circle { fill: none; stroke: #B9BEC5; stroke-width: .8; }
.fk-z__achse { fill: #9BA1A9; stroke: var(--graphit); stroke-width: 1.5; }
.fk-z__punkt circle { fill: var(--graphit); }
.fk-z__rampe { fill: var(--graphit); }
.fk-z__magnet { fill: #4A4E55; stroke: var(--graphit); stroke-width: 1.2; stroke-linejoin: round; }
.fk-z__geist path, .fk-z__geist rect { fill: none; stroke: var(--stahl); stroke-width: 1.3; stroke-dasharray: 4 4; }
.fk-z__weg { fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; }
.fk-z__pfeil { fill: none; stroke: var(--rot); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fk-z__spule { fill: #7E5E34; stroke: #4F3920; stroke-width: 1.2; }
.fk-z__armkoerper { fill: var(--graphit-2); stroke: var(--schwarz); stroke-width: 1; }
.fk-z__armnut { fill: none; stroke: #4A4E55; stroke-width: 1; }
.fk-z__kopf { fill: var(--rot); }
.fk-z__lager { fill: #9BA1A9; stroke: var(--graphit); stroke-width: 1.5; }
.fk-z__lager-mitte { fill: var(--graphit); }
.fk-z__klack { fill: var(--rot); font: italic 700 17px var(--din); letter-spacing: .04em; }
.fk-z__nr circle { fill: var(--rot); stroke: #C9CDD3; stroke-width: 3; }
.fk-z__nr text { fill: #fff; font: 700 16px var(--din); text-anchor: middle; }
/* Am Handy ist die Zeichnung schmal – die Nummern wachsen mit, damit sie lesbar bleiben */
@media (max-width: 599px) { .fk-z__nr { transform-box: fill-box; transform-origin: center; transform: scale(1.35); } }

/* Der Arm pendelt ein paar Mal zwischen Spur und Parkposition, dann bleibt er stehen */
.fk-z__arm { transform-origin: 420px 270px; transform: rotate(40deg); animation: fk-klack 1.8s ease-in-out .8s 4 both; }
@keyframes fk-klack {
  0% { transform: rotate(40deg); }
  22% { transform: rotate(37.5deg); }
  40% { transform: rotate(42deg); }
  56% { transform: rotate(40deg); }
  62% { transform: rotate(58deg); animation-timing-function: ease-out; }
  72% { transform: rotate(58deg); }
  84% { transform: rotate(40deg); }
  100% { transform: rotate(40deg); }
}
.ruhig .fk-z__arm { animation: none; }
@media (prefers-reduced-motion: reduce) { .fk-z__arm { animation: none; } }

/* ---------- Kurz gesagt ---------- */
.fk-kurz { padding-block: clamp(40px, 1.5rem + 3vw, 72px); }
.fk-kurz .h3 { color: #fff; margin-bottom: 28px; }
.fk-kurz__schritte { list-style: none; margin: 0; padding: 0; counter-reset: fk-kurz; display: grid; gap: 0 32px; }
@media (min-width: 640px) { .fk-kurz__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fk-kurz__schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fk-kurz__schritte li { counter-increment: fk-kurz; display: grid; grid-template-columns: 44px 1fr; gap: 2px 14px; align-content: start; padding: 18px 0; border-top: 1px solid var(--graphit-2); }
.fk-kurz__schritte li::before { content: counter(fk-kurz); grid-row: span 2; font: 700 2.4rem/1 var(--din); color: var(--glut); letter-spacing: -.02em; }
.fk-kurz__schritte strong { font: 700 1.15rem/1.25 var(--din); color: #fff; letter-spacing: .01em; }
.fk-kurz__schritte span { color: var(--text-hell-2); font-size: .96rem; line-height: 1.45; }

/* ---------- Artikel: Inhaltsverzeichnis links, Text rechts ---------- */
.fk-artikel { display: grid; gap: 36px; align-items: start; }
@media (min-width: 1000px) {
  .fk-artikel { grid-template-columns: 250px minmax(0, 1fr); gap: 80px; }
  .fk-rand { position: sticky; top: calc(var(--kopf-h) + 32px); }
}
.fk-rand__karte { display: none; }
@media (min-width: 1000px) and (min-height: 760px) {
  .fk-rand__karte { display: block; margin-top: 28px; padding: 22px 22px 18px; }
  .fk-rand__karte p { font-size: .93rem; line-height: 1.5; margin-bottom: 16px; }
  .fk-rand__karte p.fk-rand__titel { margin-bottom: 8px; font: 700 1.1rem/1.25 var(--din); color: #fff; letter-spacing: .01em; }
  .fk-rand__karte .knopf { width: 100%; }
  .fk-rand__karte p.fk-rand__tel { margin: 12px 0 0; font-size: .86rem; }
  .fk-rand__tel a { color: #fff; }
}
.fk-inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: fk-inhalt; border-top: 2px solid var(--schwarz); }
.fk-inhalt li { counter-increment: fk-inhalt; border-bottom: 1px solid var(--alu); }
.fk-inhalt a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 10px 0; text-decoration: none; font: 700 .98rem/1.3 var(--din); letter-spacing: .01em; }
.fk-inhalt a::before { content: counter(fk-inhalt, decimal-leading-zero); font-weight: 400; font-size: .8rem; color: var(--rot); letter-spacing: .06em; }
@media (max-width: 999px) {
  .fk-inhalt { padding: 20px 20px 8px; background: var(--werkbank); border-radius: var(--radius-gross); }
  .fk-inhalt ol { border-top: 0; columns: 2 16rem; column-gap: 28px; }
  .fk-inhalt li { break-inside: avoid; }
  .fk-inhalt li:last-child { border-bottom: 0; }
}

.fk-text { max-width: 72ch; counter-reset: fk-teil; }
.fk-teil { counter-increment: fk-teil; padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--alu); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.fk-teil:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.fk-teil .h3 { margin-bottom: .7em; }
.fk-teil .h3::before { content: counter(fk-teil, decimal-leading-zero); display: block; margin-bottom: 10px; font: 400 .8rem var(--din); letter-spacing: .2em; color: var(--rot); }
.fk-teil > p { font-size: 1.09rem; line-height: 1.68; }
.fk-teil a:not(.knopf):not(.pfeil-link) { color: var(--rot); }
.fk-teil .hinweis-box { margin: 28px 0 0; }
.fk-teil .hinweis-box p { margin: 0; line-height: 1.55; }

/* ---------- Geräusche: Hörprobe + Befund ---------- */
.fk-laute { list-style: none; margin: 10px 0 0; padding: 0; border-top: 2px solid var(--schwarz); }
.fk-laut { display: grid; gap: 14px 28px; padding: 22px 0; border-bottom: 1px solid var(--alu); }
.fk-laut:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 640px) { .fk-laut { grid-template-columns: 168px minmax(0, 1fr); } }
.fk-laut__probe { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; align-content: start; }
@media (min-width: 640px) { .fk-laut__probe { flex-direction: column; align-items: flex-start; } }
.fk-welle { width: 168px; height: 42px; padding: 0 6px; background: var(--werkbank); border-radius: 4px; overflow: visible; }
.fk-welle__null { fill: none; stroke: var(--alu); stroke-width: 1; }
.fk-welle__linie { fill: none; stroke: var(--stahl); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fk-laut--mechanik .fk-welle__linie { stroke: var(--rot); }
.fk-laut__urteil { display: inline-block; padding: 4px 7px 3px; border: 1px solid var(--alu); border-radius: 3px; font: 700 .68rem/1.2 var(--din); letter-spacing: .07em; white-space: nowrap; text-transform: uppercase; color: var(--stahl); }
.fk-laut--mechanik .fk-laut__urteil { border-color: var(--rot); color: var(--rot); }
.fk-laut__text .h4 { margin-bottom: 10px; }
.fk-laut__text dl { margin: 0; display: grid; gap: 10px; }
.fk-laut__text dt { font: 400 .72rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.fk-laut__text dd { margin: 2px 0 0; color: var(--text-2); line-height: 1.55; }

/* ---------- Extern / eingebaut ---------- */
.fk-zwei { display: grid; gap: 16px; margin: 26px 0 0; }
@media (min-width: 700px) { .fk-zwei { grid-template-columns: 1fr 1fr; } }
.fk-zwei > div { padding: 20px 22px 6px; border: 1px solid var(--alu); border-radius: 4px; background: #fff; }
.fk-zwei p { color: var(--text-2); line-height: 1.55; font-size: .98rem; }

/* ---------- Gefahrlos prüfen ---------- */
.fk-schritte { list-style: none; margin: 8px 0 1.2em; padding: 0; counter-reset: fk-schritt; }
.fk-schritte li { counter-increment: fk-schritt; position: relative; padding: 0 0 18px 48px; color: var(--text-2); line-height: 1.55; }
.fk-schritte li::before { content: counter(fk-schritt); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--rot); border-radius: 3px; font: 700 .95rem/1 var(--din); color: var(--rot); }
.fk-schritte li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 4px; width: 2px; background: var(--alu); }
.fk-schritte strong { color: var(--schwarz); }

/* ---------- Was schadet: rotes Kreuz je Zeile ---------- */
.fk-lassen { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--schwarz); }
.fk-lassen li { position: relative; padding: 16px 0 16px 42px; border-bottom: 1px solid var(--alu); color: var(--text-2); line-height: 1.55; }
.fk-lassen li::before, .fk-lassen li::after { content: ""; position: absolute; left: 6px; top: 1.55em; width: 16px; height: 2.5px; background: var(--rot); border-radius: 1px; }
.fk-lassen li::before { transform: rotate(45deg); }
.fk-lassen li::after { transform: rotate(-45deg); }
.fk-lassen strong { display: block; margin-bottom: 2px; font: 700 1.08rem/1.3 var(--din); color: var(--schwarz); letter-spacing: .01em; }

/* ---------- Preise und Wege ---------- */
.fk-preise { margin-top: 26px; grid-template-columns: 1fr; }
.fk-teil .fk-preise span a:not(.knopf) { color: var(--schwarz); font-weight: 600; text-decoration-color: var(--alu); }
.fk-teil .fk-preise span a:not(.knopf):hover { color: var(--rot); text-decoration-color: currentColor; }
.fk-preise small { display: block; color: var(--stahl); font-size: .82rem; }
.fk-klein { margin: 10px 0 0; font-size: .86rem; color: var(--stahl); }
.fk-wege { display: grid; gap: 16px; margin: 30px 0 28px; }
@media (min-width: 700px) { .fk-wege { grid-template-columns: 1fr 1fr; } }
.fk-wege .karte { padding: 26px 24px 24px; display: flex; flex-direction: column; }
.fk-wege .karte > span { display: block; }
.fk-wege .liste-haken li { font-size: .96rem; line-height: 1.45; }
.fk-wege .karte > p { font-size: .96rem; line-height: 1.5; }
.fk-wege .karte > p:not(.knopf-reihe):not(.status):not(.fk-wege__mehr) { color: var(--text-2); }
.fk-wege .karte a:not(.knopf):not(.pfeil-link) { color: var(--rot); }
.fk-wege__mehr { margin: 0 0 4px; }
.fk-wege .status { margin: 0 0 1em; }
.fk-wege .knopf-reihe { margin: auto 0 0; padding-top: 16px; }
.fk-wege .knopf-reihe .knopf { width: 100%; }

/* ---------- Zwei Kopien an zwei Orten ---------- */
.fk-kopien { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .fk-kopien { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.fk-kopien li { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 18px 18px; border: 1px solid var(--alu); border-top: 3px solid var(--schwarz); border-radius: 4px; background: #fff; }
.fk-kopien li + li { border-top-color: var(--rot); }
.fk-kopien__art { font: 400 .72rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.fk-kopien strong { font: 700 1.08rem/1.25 var(--din); letter-spacing: .01em; }
.fk-kopien li > span:last-child { color: var(--text-2); font-size: .95rem; line-height: 1.45; }
/* Pfeil zwischen den Kästen */
@media (min-width: 700px) {
  .fk-kopien li + li::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font: 700 1.1rem var(--din); color: var(--stahl); }
}

/* ---------- Weiterlesen ---------- */
.fk-weiter-band .h3 { margin-bottom: 28px; }
.fk-weiter { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 40px; border-top: 2px solid var(--schwarz); }
@media (min-width: 700px) { .fk-weiter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .fk-weiter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fk-weiter li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--alu); }
.fk-weiter a { font: 700 1.1rem var(--din); text-decoration: none; }
.fk-weiter a::after { content: " →"; color: var(--rot); }
.fk-weiter span { font-size: .92rem; color: var(--stahl); }