/* ===== Makeover 2026-10: shared building blocks for redesigned sub pages under /konzept/ =====
   Mirrors the app views (dist/app/app.css: .page-head, .home-section, .home-path, .home-panel).
   Colors only via the variables from /app/shell.css. Load after concept.css, before contrast.css. */

/* Semantic states (correct / wrong). The only page-level tokens on top of shell.css. */
html:root{--sp-good:#13795b;--sp-good-bg:#e7f5ef;--sp-bad:#b4233c;--sp-bad-bg:#fcecef}
html:root[data-theme=dark]{--sp-good:#7ee0b8;--sp-good-bg:#16382f;--sp-bad:#ffa3b1;--sp-bad-bg:#3c1d26}

html body .detail-main .sp-page{font-size:16px;line-height:1.6;color:var(--ink)}
.sp-page *{box-sizing:border-box}
.sp-page p{margin:0}
.sp-page a{color:inherit}
.sp-page button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sp-page svg.icon{width:22px;height:22px}

/* Page head: navy surface with the lane-change motif, as on the start page. */
html body .detail-main .sp-head{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;border-radius:20px;padding:36px 40px;margin:0}
.sp-head .hero-lanes{position:absolute;z-index:-1;top:0;right:16px;width:140px;height:100%;fill:none;stroke:#65e5df;stroke-width:3;opacity:.32}
.sp-head .hero-lanes .lane-move{stroke-width:5;opacity:1;stroke-linecap:round}
.sp-head-copy{max-width:520px}
html body .detail-main .sp-head h1{color:#fff!important;font-size:clamp(30px,3vw,40px)!important;line-height:1.1!important;letter-spacing:-.035em!important;margin:0!important;hyphens:manual!important}
html body .detail-main .sp-head p{color:#c9dde6;font-size:16px;line-height:1.6;margin-top:12px;max-width:48ch}
.sp-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.sp-facts li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px;border:1px solid #ffffff2e;border-radius:999px;font-size:14px;font-weight:600;color:#fff}
.sp-facts li strong{color:#65e5df;font-weight:750}
html[data-theme=dark] body .detail-main .sp-head{border:1px solid #ffffff1f}

/* Sections */
.sp-section{margin-top:44px}
.sp-section-head{margin-bottom:16px}
html body .detail-main .sp-section-head h2{font-size:22px!important;line-height:1.25!important;letter-spacing:-.025em!important;margin:0!important}
.sp-section-head p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--muted);max-width:62ch}

/* Panels */
.sp-panel{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:14px;min-width:0}
html body .detail-main .sp-panel h3{font-size:19px!important;line-height:1.3!important;letter-spacing:-.015em!important;margin:0!important}
.sp-label{font-size:13px;font-weight:650;color:var(--teal);margin-bottom:6px}

/* Row list (icon, text, action, arrow) */
.sp-rows{display:grid;gap:10px}
.sp-row{appearance:none;display:flex;align-items:center;gap:16px;width:100%;min-width:0;padding:18px 20px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-align:left;text-decoration:none}
.sp-row:hover{border-color:var(--teal)}
.sp-row-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:var(--tint);color:var(--teal)}
.sp-row-text{display:grid;gap:2px;min-width:0;flex:1}
.sp-row-text strong{font-size:17px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.sp-row-text small{font-size:14px;line-height:1.5;color:var(--muted)}
.sp-row-action{flex:none;font-size:14px;font-weight:700;color:var(--teal)}
.sp-row>.icon:last-child{color:var(--teal)}

/* Buttons */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:12px;font-size:15px;font-weight:700;line-height:1.35;text-align:center;text-decoration:none;white-space:normal}
.sp-btn svg.icon{width:20px;height:20px}
html body .sp-btn-primary{background:var(--navy);color:#fff}
html[data-theme=dark] body .sp-btn-primary{background:var(--accent);color:var(--navy)}
html body .sp-btn-primary:disabled{opacity:.45;cursor:not-allowed}
html body .sp-btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line)}
.sp-btn-secondary:hover{border-color:var(--teal)}
.sp-page .sp-link,.sp-link{appearance:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--teal);font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* Small pills and notes */
.sp-pill{display:inline-flex;align-items:center;min-height:28px;padding:4px 11px;border-radius:999px;background:var(--tint);color:var(--teal);font-size:13px;font-weight:700;line-height:1.3}
.sp-pill-neutral{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.sp-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:20px 22px;background:var(--tint);border-radius:16px;font-size:15px;line-height:1.6;color:var(--ink)}
.sp-note>.icon{color:var(--teal);margin-top:1px}
.sp-note strong{color:var(--ink)}

/* Generic grids and blocks (added with EaSI Drive / Nach dem Führerschein) */
.sp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sp-cards>.sp-panel{display:flex;flex-direction:column;gap:8px}
.sp-cards>.sp-panel>.sp-row-icon{margin-bottom:4px}
html body .detail-main .sp-cards h3{font-size:17px!important;line-height:1.3!important;margin:0!important}
.sp-cards p,.sp-cards li{font-size:14px;line-height:1.6;color:var(--muted)}
.sp-cards .sp-link{margin-top:auto}
.sp-link svg.icon{width:16px;height:16px}
.sp-checks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sp-checks li{position:relative;padding-left:34px;font-size:15px;line-height:1.55;color:var(--ink)}
.sp-checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--teal)}
.sp-checks li::after{content:"";position:absolute;left:8px;top:6px;width:6px;height:10px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sp-head-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:#fff;font-weight:650;font-size:15px;text-decoration:underline;text-decoration-color:#65e5df;text-decoration-thickness:2px;text-underline-offset:6px}
.sp-head-link svg.icon{width:18px;height:18px;color:#65e5df}
.sp-card-tag{align-self:flex-start;display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:999px;background:var(--tint);color:var(--teal);font-size:12px;font-weight:700}
.sp-faq{display:grid;gap:8px}
.sp-faq details{padding:0 18px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.sp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-size:16px;font-weight:650;color:var(--ink);cursor:pointer;list-style:none}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .2s}
.sp-faq details[open] summary::after{transform:rotate(-135deg)}
.sp-faq details p{padding-bottom:16px;font-size:15px;line-height:1.6;color:var(--muted)}
.sp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sp-head-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
html body .detail-main .sp-head .sp-btn-primary{background:#65e5df;color:#062d47}
.sp-fine{font-size:13px;line-height:1.6;color:var(--muted)}
.sp-fine a{color:var(--teal);font-weight:650}
.sp-cta{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center;padding:24px;background:var(--tint);border-radius:16px}
html body .detail-main .sp-cta h2{font-size:20px!important;line-height:1.3!important;margin:0!important}
.sp-cta p{font-size:15px;color:var(--muted);margin-top:4px}
@container detail-content (min-width:620px){.sp-grid-2,.sp-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-cta{grid-template-columns:minmax(0,1fr) auto}}
@container detail-content (min-width:860px){.sp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.sp-cta{padding:20px}.sp-cta .sp-btn,.sp-head-actions .sp-btn,.sp-actions .sp-btn{width:100%}}

@media(max-width:760px){
  html body .detail-main .sp-head{padding:28px 22px;border-radius:16px}
  .sp-head .hero-lanes{right:-24px;width:110px;opacity:.2}
  html body .detail-main .sp-head h1{font-size:30px!important}
  html body .detail-main .sp-head p{font-size:15px}
  .sp-section{margin-top:36px}
  html body .detail-main .sp-section-head h2{font-size:20px!important}
  .sp-row{padding:16px;gap:14px}
  .sp-row-action{display:none}
  .sp-panel{padding:18px}
  .sp-note{padding:18px;font-size:14px}
}
@media(max-width:370px){html body .detail-main .sp-head{padding:24px 18px}html body .detail-main .sp-head h1{font-size:27px!important}}
@media print{html body .detail-main .sp-head{background:none;color:var(--ink);border:1px solid var(--line)}html body .detail-main .sp-head h1{color:var(--ink)!important}.sp-head .hero-lanes{display:none}}