/* Kundenportal runschmiede.de / runschmiede.com: seitenspezifische Ergänzungen zu rs.css */

/* Startseite */
.p-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.p-hero-txt{display:flex;flex-direction:column;gap:20px}
.p-cta{display:flex;gap:12px;flex-wrap:wrap}
.p-price{color:var(--muted)}
.p-hero-shot{max-width:560px;justify-self:end}

.p-eco-unused{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.p-eco-card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.p-eco-card p{color:var(--muted);flex:1}
.p-eco-link{font-weight:600}

.p-split{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.p-steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:16px}
.p-steps li{counter-increment:st;display:grid;grid-template-columns:32px 1fr;column-gap:12px}
.p-steps li::before{content:counter(st);grid-row:span 2;width:32px;height:32px;border-radius:var(--r);background:var(--surface-2);color:var(--fg);font-weight:600;display:grid;place-items:center}
.p-steps span{color:var(--muted)}

.p-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.p-cats > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.p-cats h3{font-size:17px;margin-bottom:6px}
.p-cats p{color:var(--muted);font-size:15px}

.p-about{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.p-contact h3{margin-bottom:14px}
.p-contact dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0}
.p-contact dt{color:var(--muted)}
.p-contact dd{margin:0}
.p-final{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* So funktioniert's */
.p-toc{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.p-toc a{font-weight:600;text-decoration:none}
.p-toc a:hover{text-decoration:underline}
.p-case{display:flex;flex-direction:column;gap:12px}
.p-case > p{color:var(--muted)}
.p-timeline{list-style:none;margin:24px 0 0;padding:0;counter-reset:tl;display:flex;flex-direction:column;gap:20px}
.p-timeline li{counter-increment:tl;display:grid;grid-template-columns:32px 1fr;column-gap:12px}
.p-timeline li::before{content:counter(tl);grid-row:span 2;width:32px;height:32px;border-radius:var(--r);background:var(--surface-2);color:var(--fg);font-weight:600;display:grid;place-items:center}
.p-tl-h{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.p-tl-time{font-size:14px;color:var(--muted)}
.p-timeline p{color:var(--muted)}
.p-prose{margin-top:16px;display:flex;flex-direction:column;gap:14px;color:var(--fg);font-size:17px;max-width:68ch}
.p-ops{max-width:760px}

/* Anmeldung und Registrierung */
.p-auth{max-width:460px;margin:0 auto;padding-block:56px 72px}
.p-auth h1{font-size:30px;margin-bottom:8px}
.p-auth .rs-lead{font-size:16px;margin-bottom:24px}
.p-auth-alt{margin-top:20px;color:var(--muted);font-size:15px}

/* Kundenkonto */
.p-acc-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:40px 24px}
.p-acc-h h1{font-size:30px}
.p-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto}
.p-tabs a{padding:10px 14px;text-decoration:none;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.p-tabs a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--accent)}
.p-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:28px}
.p-summary .rs-panel{display:flex;flex-direction:column;gap:6px}
.p-summary .k{color:var(--muted);font-size:14px}
.p-summary .v{font-size:20px;font-weight:600}
.p-summary .s{color:var(--muted);font-size:14px}
.p-bots{display:flex;flex-direction:column;gap:16px}
.p-bot{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.p-bot-h{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--line)}
.p-bot-h h2{font-size:19px}
.p-bot-h small{display:block;color:var(--muted);font-size:14px;font-weight:400;margin-top:2px}
.p-bot-b{padding:18px 24px;display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.p-bot-b .rs-dl{font-size:15px}
.p-bot-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.p-token{border-top:1px solid var(--line);padding:18px 24px;background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}
.p-token form{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.p-token .rs-input{flex:1;min-width:240px;font-family:var(--mono);font-size:14px}
.p-empty{text-align:center;padding:48px 24px;color:var(--muted);display:flex;flex-direction:column;gap:16px;align-items:center}

@media (max-width:960px){
  .p-hero,.p-split,.p-about{grid-template-columns:1fr;gap:32px}
  .p-hero-shot{justify-self:start}
  .p-eco,.p-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-summary{grid-template-columns:1fr}
  .p-bot-b{grid-template-columns:1fr}
}
@media (max-width:640px){
  .p-eco,.p-cats{grid-template-columns:1fr}
  .p-layer{grid-template-columns:1fr;gap:4px}
}

/* Überarbeitung: weniger Kästchen, mehr Text und Struktur */
.p-hero-txt .rs-lead + .rs-lead{margin-top:-6px}
.p-rows-wrap{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.p-rows{display:flex;flex-direction:column}
.p-row{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:18px 0;border-top:1px solid var(--line)}
.p-row:first-child{border-top:0;padding-top:4px}
.p-row h3{font-size:18px}
.p-row h3 a{text-decoration:none}
.p-row h3 a:hover{text-decoration:underline}
.p-row p{color:var(--muted)}
.p-examples{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:14px;font-size:17px}
.p-examples li::marker{color:var(--faint)}
.p-examples b{font-weight:600}
.p-cases{margin:24px 0 0}
.p-cases dt{font-weight:600;font-size:18px;margin-top:20px}
.p-cases dt:first-child{margin-top:0}
.p-cases dd{margin:6px 0 0;color:var(--muted);max-width:68ch}
.p-layers{margin:24px 0 0;padding-left:1.4em;display:flex;flex-direction:column;gap:18px}
.p-layers li::marker{font-weight:600;color:var(--muted)}
.p-layers h3{font-size:18px}
.p-layers p{color:var(--muted);margin-top:4px;max-width:66ch}
.p-illu{padding:8px 0}
.p-ops dd a{margin-left:4px}
@media (max-width:960px){
  .p-rows-wrap{grid-template-columns:1fr;gap:20px}
}
@media (max-width:640px){
  .p-row{grid-template-columns:1fr;gap:4px}
}