/* Ratgeber „Kaffee übers MacBook“ (app/content/ratgeber/kaffee-ueber-macbook.php) – nur Ergänzungen zu site.css */

/* ---------- Kopf mit Zeichnung ---------- */
.kum-kopf { padding-top: 28px; }
.kum-kopf .h1 { font-size: clamp(2.1rem, 1.35rem + 2.5vw, 3.6rem); line-height: 1.02; }
.kum-kopf .gross { max-width: 52ch; }
.kum-meta { margin: 22px 0 0; font: 400 .78rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.kum-meta time, .kum-meta span { white-space: nowrap; }
/* Am Handy steht das Datum in einer eigenen Zeile statt hinter einem hängenden Punkt */
@media (max-width: 599px) { .kum-meta__trenner { display: none; } .kum-meta time { display: block; margin-top: 4px; } }
@media (min-width: 960px) { .kum-kopf .kopf-bild { grid-template-columns: 7fr 5fr; } }

.kum-zelt { margin: 0; padding: 28px 24px 22px; background: var(--werkbank); border-radius: var(--radius-gross); }
.kum-zelt svg { width: 100%; height: auto; overflow: visible; }
.kum-zelt__legende { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--alu); counter-reset: zelt; display: grid; gap: 6px; }
.kum-zelt__legende li { counter-increment: zelt; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: baseline; font-size: .94rem; color: var(--text-2); line-height: 1.4; }
.kum-zelt__legende li::before { content: counter(zelt); 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); }

.kz-tuch { fill: #fff; stroke: var(--alu); stroke-width: 1.5; }
.kz-tuch-naht { fill: none; stroke: var(--alu); stroke-width: 1.2; stroke-dasharray: 3 5; }
.kz-fleck { fill: rgb(111 78 55 / .2); }
.kz-alu { fill: #C9CDD3; stroke: var(--stahl); stroke-width: 1.5; }
.kz-glas { fill: var(--graphit); }
.kz-tasten rect, .kz-pad { fill: var(--graphit); }
.kz-scharnier { fill: var(--graphit); }
.kz-tropfen path { fill: #6F4E37; animation: kum-tropfen 2.1s cubic-bezier(.45, 0, .8, .4) infinite; transform-box: fill-box; }
@keyframes kum-tropfen {
  0% { translate: 0 -4px; opacity: 0; }
  12% { translate: 0 0; opacity: 1; }
  78% { translate: 0 var(--weg); opacity: 1; }
  100% { translate: 0 var(--weg); opacity: 0; }
}
.ruhig .kz-tropfen path { animation: none; }
@media (prefers-reduced-motion: reduce) { .kz-tropfen path { animation: none; } }
.kz-nr circle { fill: var(--rot); stroke: var(--werkbank); stroke-width: 3; }
.kz-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) { .kz-nr { transform-box: fill-box; transform-origin: center; transform: scale(1.35); } }

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

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

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

.kum-merke { padding: 16px 20px; border: 1px solid var(--alu); border-radius: var(--radius); background: #fff; }
.kum-merke strong { color: var(--schwarz); }

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

/* Rückstände */
.kum-tabelle { width: 100%; margin-top: 30px; border-collapse: collapse; }
.kum-tabelle caption { caption-side: top; text-align: left; padding-bottom: 12px; font: 400 .78rem var(--din); letter-spacing: .16em; text-transform: uppercase; color: var(--stahl); }
.kum-tabelle th, .kum-tabelle td { padding: 14px 0; border-bottom: 1px solid var(--alu); text-align: left; vertical-align: baseline; }
.kum-tabelle thead th { padding-block: 0 10px; border-bottom: 2px solid var(--schwarz); font: 400 .72rem var(--din); letter-spacing: .14em; text-transform: uppercase; color: var(--stahl); }
.kum-tabelle tbody th { width: 38%; padding-right: 20px; font: 700 1.02rem/1.3 var(--din); letter-spacing: .01em; }
.kum-tabelle td { color: var(--text-2); line-height: 1.5; }
.kum-tabelle tbody tr:last-child > * { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 599px) {
  .kum-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kum-tabelle, .kum-tabelle tbody, .kum-tabelle tr, .kum-tabelle th, .kum-tabelle td { display: block; width: auto; }
  .kum-tabelle caption { display: block; border-bottom: 2px solid var(--schwarz); padding-bottom: 10px; }
  .kum-tabelle tr { padding: 12px 0; border-bottom: 1px solid var(--alu); }
  .kum-tabelle tbody th, .kum-tabelle td { padding: 0; border: 0; }
  .kum-tabelle tbody th { width: auto; margin-bottom: 4px; }
  .kum-tabelle tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Späte Folgen */
.kum-zeichen { list-style: none; margin: 0 0 1.2em; padding: 0; }
.kum-zeichen li { position: relative; padding: 0 0 0 28px; margin-bottom: 10px; color: var(--text-2); line-height: 1.55; }
.kum-zeichen li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 14px; height: 2px; background: var(--rot); }

/* Time Machine */
.kum-schritte { list-style: none; margin: 8px 0 1.2em; padding: 0; counter-reset: sichern; }
.kum-schritte li { counter-increment: sichern; position: relative; padding: 0 0 18px 48px; color: var(--text-2); line-height: 1.55; }
.kum-schritte li::before { content: counter(sichern); 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); }
.kum-schritte li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 32px; bottom: 4px; width: 2px; background: var(--alu); }
.kum-schritte strong { color: var(--schwarz); }

/* Einschicken oder vorbeibringen */
.kum-wege { display: grid; gap: 16px; margin: 26px 0 28px; }
@media (min-width: 700px) { .kum-wege { grid-template-columns: 1fr 1fr; } }
.kum-wege .karte { padding: 26px 24px 24px; display: flex; flex-direction: column; }
.kum-wege .karte > span { display: block; }
.kum-wege .liste-haken li { font-size: .96rem; line-height: 1.45; }
.kum-wege .karte > p { font-size: .96rem; line-height: 1.5; }
.kum-wege .karte > p:not(.knopf-reihe):not(.status):not(.kum-wege__mehr) { color: var(--text-2); }
.kum-wege .karte a:not(.knopf):not(.pfeil-link) { color: var(--rot); }
.kum-wege__mehr { margin: 0 0 4px; }
.kum-wege .status { margin: 0 0 1em; }
.kum-wege .karte > p.kum-wege__zeiten { margin: -.6em 0 1em 16px; font-size: .9rem; color: var(--stahl); }
.kum-wege__nobr { white-space: nowrap; }
/* Knöpfe beider Karten auf einer Linie am unteren Rand */
.kum-wege .knopf-reihe { margin: auto 0 0; padding-top: 16px; }
.kum-wege .knopf-reihe .knopf { width: 100%; }

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