/* ============================================================
   Rechner-Seite: kompakter Kopf im Stil der Unterseiten
   (Photovoltaik, Speicher, Projekte). Kein großes Bild, damit der
   dunkle Rechner noch auf dem ersten Bildschirm beginnt.
   Nav und Cremegrund kommen aus projekt-kopf.css (.seite-projekt).
   ============================================================ */
.rk-kopf { background: #f6f4f0; padding: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) 0 clamp(40px, 4.5vw, 64px); }
.rk-marke { color: #ef7b36; text-transform: uppercase; letter-spacing: 0.33em; font-size: 13px; font-weight: 500; }
.rk-marke i { font-style: normal; margin: 0 0.7em; }
.rk-oben { margin-top: clamp(18px, 2vw, 26px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 72px); align-items: end; }
.rk-titel { font-size: clamp(52px, 7.6vw, 112px); font-weight: 600; line-height: 0.86; letter-spacing: -0.075em; color: #0f1012; max-width: none; }
.rk-claim { font-size: clamp(20px, 1.9vw, 27px); font-weight: 300; line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); }
.rk-punkte { margin-top: 18px; display: grid; gap: 8px; }
.rk-punkte li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.rk-punkte i { color: #ef7b36; }
.rk-rund { margin-top: 24px; display: inline-flex; align-items: center; gap: 18px; font-size: 18px; font-weight: 500; color: var(--ink); }
.rk-kreis { width: 54px; height: 54px; border-radius: 50%; background: #fe863d; display: grid; place-items: center; font-size: 20px; transition: transform 0.35s var(--ease); }
.rk-rund:hover .rk-kreis { transform: translateY(3px); }
.rk-rund:focus-visible { outline: 2px solid #ef7b36; outline-offset: 6px; border-radius: 999px; }

.rk-zahlen { margin-top: clamp(34px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); }
.rk-zahlen > div { padding: 0 clamp(18px, 2.4vw, 36px); border-left: 1px solid #fe863d; }
.rk-zahlen > div:first-child { padding-left: 0; border-left: 0; }
.rk-zahlen dt { font-size: 14px; color: var(--ink-2); }
.rk-zahlen dd { margin-top: 6px; display: flex; align-items: baseline; font-size: clamp(44px, 5vw, 72px); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; font-variant-numeric: tabular-nums; color: #0f1012; }
.rk-zahlen dd em { font-style: normal; font-size: 20px; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.rk-zahlen dd.rk-zusatz { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 400; letter-spacing: 0; line-height: 1.4; color: #6b6f76; }

/* Der Rechner darunter braucht keinen Nav-Abstand mehr */
.pr-kopf + .rw-arbeit { padding-top: clamp(40px, 5vw, 72px); }

.rk-kopf [data-enter] { opacity: 0; transform: translateY(22px); animation: enter 0.9s var(--ease) forwards; }
.rk-kopf [data-enter="2"] { animation-delay: 0.1s; }
.rk-kopf [data-enter="3"] { animation-delay: 0.22s; }
.rk-kopf [data-enter="4"] { animation-delay: 0.34s; }
@media (prefers-reduced-motion: reduce) { .rk-kopf [data-enter] { animation: none; opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .rk-oben { grid-template-columns: 1fr; align-items: start; }
  .pr-claim br { display: none; } /* fester Umbruch passt nur zur Desktop-Breite */
  .rk-zahlen { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .rk-zahlen > div:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .rk-marke { font-size: 11.5px; letter-spacing: 0.26em; line-height: 1.8; }
  .rk-zahlen dd { font-size: clamp(38px, 11vw, 52px); }
}

/* Das seitenweite Punktmuster (body > section …) hier aus, der Kopf bleibt flach wie auf den anderen Unterseiten */
body > section.pr-kopf { background-image: none !important; }
/* Trennlinie über dem Werkzeug war für den alten Kopf in derselben Sektion gedacht */
.pr-kopf + .rw-arbeit .rw-tool { border-top: 0; padding-top: 0; }