/* ============================================================
   R+ 2026 — Editorial Sub-page Stylesheet
   Erzeugt 1:1 die DNA aus index.html für alle Unterseiten:
   Inter Tight 800/900 Display · Fraunces Italic Akzent ·
   JetBrains Mono Eyebrows · Royal-Electric-Blue (#2A6CFF) ·
   Highlight-Underline ".hl" · 1260-Container ·
   8px Akzent-Streifen · cubic-bezier(.86,0,.07,1).
   ============================================================ */

:root {
  --rs-container: 1260px;
  --rs-pad: 40px;
  --rs-ease: cubic-bezier(.86, 0, .07, 1);
}
@media (max-width: 1024px) { :root { --rs-pad: 28px; } }
@media (max-width: 767px)  { :root { --rs-pad: 20px; } }

/* Wrap helper */
.rs-wrap { max-width: var(--rs-container); margin: 0 auto; padding: 0 var(--rs-pad); }

/* Highlight-Underline (R+ Signature) */
.hl { position: relative; display: inline-block; white-space: nowrap; }
.hl::before { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.06em; height: 0.32em; background: var(--accent-primary); z-index: -1; }
.hl > * { position: relative; }

/* Mono Eyebrow (Pflicht für jede Section) */
.rs-eyb { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-primary); display: inline-flex; align-items: center; gap: 12px; }
.rs-eyb.dark { color: rgba(250,250,250,0.7); }
.rs-eyb::before { content: ''; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }

/* ============================================================
   SUB-PAGE HERO (Editorial, hell, mit Riesen-Headline)
   ============================================================ */
.sp-hero { background: var(--surface-light-primary); padding: 196px 0 96px; position: relative; border-bottom: 1px solid var(--outline-light-tertiary); }
@media (max-width: 1024px) { .sp-hero { padding: 156px 0 72px; } }
@media (max-width: 767px)  { .sp-hero { padding: 128px 0 56px; } }
.sp-hero-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--font-light-tertiary); text-transform: uppercase; padding-bottom: 24px; margin-bottom: 56px; border-bottom: 1px solid var(--outline-light-secondary); }
.sp-hero-meta .left { display: flex; gap: 18px; align-items: center; }
.sp-hero-meta .left::before { content: ''; width: 8px; height: 8px; background: var(--accent-primary); border-radius: 50%; display: inline-block; box-shadow: 0 0 12px rgba(42,108,255,0.55); animation: rs-pulse 2.4s ease-in-out infinite; }
@keyframes rs-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.sp-hero-meta .right { display: flex; gap: 18px; }

.sp-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--font-light-primary); margin: 0 0 40px; max-width: 18ch; }
.sp-h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
.sp-h1 .hl::before { background: var(--accent-primary); height: 0.22em; bottom: 0.04em; }

.sp-hero-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; padding-top: 32px; border-top: 1px solid var(--outline-light-secondary); }
@media (max-width: 900px) { .sp-hero-foot { grid-template-columns: 1fr; gap: 32px; } }
.sp-hero-sub { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--font-light-secondary); margin: 0; max-width: 56ch; }
.sp-hero-sub strong { color: var(--font-light-primary); font-weight: 600; }
.sp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 900px) { .sp-hero-ctas { justify-content: flex-start; } }

/* ============================================================
   GENERIC SECTIONS (light + dark)
   ============================================================ */
.sp-sec { padding: 144px 0; background: var(--surface-light-primary); }
.sp-sec.alt { background: var(--surface-light-secondary); }
.sp-sec.dark { background: var(--font-light-primary); color: var(--font-dark-primary); padding: 168px 0; }
@media (max-width: 1024px) { .sp-sec, .sp-sec.dark { padding: 120px 0; } }
@media (max-width: 767px)  { .sp-sec, .sp-sec.dark { padding: 88px 0; } }

.sp-sec-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: flex-end; margin-bottom: 80px; }
.sp-sec-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.625rem, 3.2vw, 2.75rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--font-light-primary); margin: 0; max-width: 18ch; }
.sp-sec.dark .sp-sec-head h2 { color: var(--font-dark-primary); }
.sp-sec-head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.sp-sec-head .lead { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--font-light-secondary); margin: 0; max-width: 38ch; }
.sp-sec.dark .sp-sec-head .lead { color: rgba(250,250,250,0.78); }
.sp-sec-head .eyb { margin-bottom: 28px; }
@media (max-width: 900px) { .sp-sec-head { grid-template-columns: 1fr; gap: 24px; align-items: flex-start; } }

/* ============================================================
   FILTER CHIPS (Editorial)
   ============================================================ */
.sp-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 32px; }
.sp-filter-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-light-tertiary); margin-right: 8px; }
.sp-chip { padding: 10px 16px; border: 1px solid var(--outline-light-secondary); background: transparent; color: var(--font-light-primary); font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background var(--duration), color var(--duration), border-color var(--duration); border-radius: 2px; }
.sp-chip:hover, .sp-chip.active { background: var(--font-light-primary); color: var(--font-dark-primary); border-color: var(--font-light-primary); }

/* ============================================================
   EDITORIAL TABLE (für Cases-/Press-Listen)
   ============================================================ */
.sp-table { display: flex; flex-direction: column; border-top: 1px solid var(--outline-light-secondary); }
.sp-tr { display: grid; gap: 32px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--outline-light-secondary); text-decoration: none; color: inherit; transition: padding 0.4s var(--rs-ease), background 0.4s var(--rs-ease); }
.sp-tr:hover { padding-left: 16px; padding-right: 16px; background: rgba(42,108,255,0.05); }
.sp-tr:hover .sp-tr-name { color: var(--accent-primary); }
.sp-tr-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--accent-primary); }
.sp-tr-meta { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--font-light-secondary); }
.sp-tr-name { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.375rem); font-weight: 600; letter-spacing: -0.025em; color: var(--font-light-primary); line-height: 1.2; transition: color var(--duration); }
.sp-tr-arrow { color: var(--font-light-primary); transition: transform 0.4s var(--rs-ease); justify-self: end; font-size: 1rem; }
.sp-tr:hover .sp-tr-arrow { transform: translateX(4px); color: var(--accent-primary); }

/* Cases-Variant */
.sp-table-cases .sp-tr { grid-template-columns: 56px 220px 1fr 140px 24px; }
@media (max-width: 1024px) { .sp-table-cases .sp-tr { grid-template-columns: 1fr auto; row-gap: 4px; }
  .sp-table-cases .sp-tr-num, .sp-table-cases .sp-tr-meta, .sp-table-cases .sp-tr-client { grid-column: 1; }
  .sp-table-cases .sp-tr-name { grid-column: 1; }
  .sp-table-cases .sp-tr-arrow { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
.sp-tr-client { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.025em; color: var(--font-light-primary); }

/* Press-Variant */
.sp-table-press .sp-tr { grid-template-columns: 130px 220px 130px 1fr 24px; }
@media (max-width: 1024px) { .sp-table-press .sp-tr { grid-template-columns: 1fr; row-gap: 4px; padding: 22px 0; }
  .sp-table-press .sp-tr-arrow { display: none; }
}

/* ============================================================
   MEGA-SANS-LISTE mit Slide-In-Akzent (Disziplinen / Nav)
   ============================================================ */
.sp-mega-list { display: flex; flex-direction: column; border-top: 1px solid var(--outline-light-secondary); }
.sp-mega-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 32px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--outline-light-secondary); text-decoration: none; color: inherit; transition: padding 0.5s var(--rs-ease); position: relative; overflow: hidden; }
.sp-mega-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-primary); transition: width 0.5s var(--rs-ease); }
.sp-mega-row:hover::before { width: 6px; }
.sp-mega-row:hover { padding-left: 28px; }
.sp-mega-row > * { position: relative; }
.sp-mega-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--font-light-tertiary); text-transform: uppercase; }
.sp-mega-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 2.6vw, 2.25rem); letter-spacing: -0.045em; line-height: 1.02; color: var(--font-light-primary); transition: color var(--duration); }
.sp-mega-row:hover .sp-mega-name { color: var(--accent-primary); }
.sp-mega-arrow { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--font-light-tertiary); display: inline-flex; align-items: center; gap: 8px; transition: color var(--duration), transform 0.5s var(--rs-ease); }
.sp-mega-row:hover .sp-mega-arrow { color: var(--accent-primary); transform: translateX(8px); }
@media (max-width: 600px) { .sp-mega-row { grid-template-columns: 56px 1fr auto; gap: 16px; padding: 24px 0; } .sp-mega-row:hover { padding-left: 16px; } .sp-mega-arrow span { display: none; } }

/* ============================================================
   SERVICES — Riesen-Mega-Block für Kompetenzen
   ============================================================ */
.sp-srv { display: grid; grid-template-columns: 90px 1fr; gap: 48px; padding: 80px 0; border-top: 1px solid var(--outline-light-secondary); align-items: flex-start; }
.sp-srv:last-child { border-bottom: 1px solid var(--outline-light-secondary); }
.sp-srv-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent-primary); padding-top: 12px; }
.sp-srv-content { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: flex-start; }
.sp-srv-name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.875rem, 4vw, 3.5rem); line-height: 1.02; letter-spacing: -0.04em; color: var(--font-light-primary); margin: 0 0 16px; }
.sp-srv-name em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--accent-primary); }
.sp-srv-claim { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--accent-primary); margin: 0; line-height: 1.4; }
.sp-srv-desc { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--font-light-secondary); margin: 0 0 24px; }
.sp-srv-feats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.sp-srv-feats li { font-family: var(--font-body); font-size: 0.9375rem; color: var(--font-light-primary); display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.sp-srv-feats li::before { content: ''; width: 6px; height: 6px; background: var(--accent-primary); border-radius: 50%; flex-shrink: 0; }
@media (max-width: 1024px) { .sp-srv { grid-template-columns: 1fr; gap: 24px; padding: 56px 0; } .sp-srv-content { grid-template-columns: 1fr; gap: 24px; } .sp-srv-feats { grid-template-columns: 1fr; } }

/* ============================================================
   IMAGE GRID (Kunden, Branchen)
   ============================================================ */
.sp-grid { display: grid; gap: 16px; }
.sp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sp-grid.cols-5 { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sp-grid.cols-6 { grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1024px) { .sp-grid.cols-3, .sp-grid.cols-4, .sp-grid.cols-5, .sp-grid.cols-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .sp-grid.cols-3, .sp-grid.cols-4, .sp-grid.cols-5, .sp-grid.cols-6 { grid-template-columns: repeat(2, 1fr); } }

.sp-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.sp-card-img { aspect-ratio: 4/5; overflow: hidden; background: var(--surface-light-secondary); position: relative; }
.sp-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--rs-ease); filter: grayscale(0.2); }
.sp-card:hover .sp-card-img img { transform: scale(1.04); filter: grayscale(0); }
.sp-card-num { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-primary); }
.sp-card-name { font-family: var(--font-display); font-size: clamp(1rem, 1.4vw, 1.375rem); font-weight: 700; letter-spacing: -0.03em; color: var(--font-light-primary); line-height: 1.1; transition: color var(--duration); }
.sp-card:hover .sp-card-name { color: var(--accent-primary); }
.sp-card-desc { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--font-light-secondary); }

/* Logo Tile (Kunden Cloud) */
.sp-logo-tile { aspect-ratio: 5/3; background: transparent; border: 1px solid var(--outline-light-tertiary); display: flex; align-items: center; justify-content: center; padding: 24px; transition: border-color 0.3s var(--rs-ease); }
.sp-logo-tile:hover { border-color: var(--accent-primary); }
.sp-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.78; transition: filter 0.3s var(--rs-ease), opacity 0.3s var(--rs-ease); }
.sp-logo-tile:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
   TEAM / FOUNDER (für Über-uns)
   ============================================================ */
.sp-founder { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sp-founder-photo { aspect-ratio: 1/1; background: var(--font-light-primary); color: var(--font-dark-primary); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 10vw, 9rem); letter-spacing: -0.07em; line-height: 1; transition: background 0.5s var(--rs-ease); }
.sp-founder:hover .sp-founder-photo { background: var(--accent-primary); }
.sp-founder-quote { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 2.25rem); line-height: 1.12; letter-spacing: -0.025em; color: inherit; margin: 32px 0; max-width: 30ch; }
.sp-founder-quote em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.sp-founder-quote .hl::before { background: var(--accent-primary); height: 0.32em; }
.sp-founder-attr { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--outline-light-secondary); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--font-light-tertiary); }
.sp-founder-attr strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: var(--font-light-primary); text-transform: none; }
.sp-sec.dark .sp-founder-attr { border-top-color: rgba(250,250,250,0.16); color: rgba(250,250,250,0.6); }
.sp-sec.dark .sp-founder-attr strong { color: var(--font-dark-primary); }
@media (max-width: 1024px) { .sp-founder { grid-template-columns: 1fr; gap: 32px; } }

/* Manifest Grid (Werte/Prinzipien) */
.sp-manifest { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 64px; }
@media (max-width: 767px) { .sp-manifest { grid-template-columns: 1fr; gap: 48px; } }
.sp-mf-cell { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid rgba(250,250,250,0.18); }
.sp-sec:not(.dark) .sp-mf-cell { border-top-color: var(--outline-light-secondary); }
.sp-mf-idx { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; color: rgba(250,250,250,0.5); text-transform: uppercase; }
.sp-sec:not(.dark) .sp-mf-idx { color: var(--font-light-tertiary); }
.sp-mf-name { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.025em; color: var(--font-dark-primary); margin: 0; }
.sp-sec:not(.dark) .sp-mf-name { color: var(--font-light-primary); }
.sp-mf-cell:nth-child(2) .sp-mf-name { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: -0.03em; color: var(--accent-primary); }
.sp-mf-desc { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: rgba(250,250,250,0.78); margin: 0; max-width: 38ch; }
.sp-sec:not(.dark) .sp-mf-desc { color: var(--font-light-secondary); }

/* Stats-Band (für ueber-uns / case detail) */
.sp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--outline-light-secondary); }
.sp-sec.dark .sp-stats { border-top-color: rgba(250,250,250,0.16); }
@media (max-width: 1024px) { .sp-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sp-stats { grid-template-columns: 1fr; } }
.sp-stat-cell { padding: 32px 28px 32px 0; border-bottom: 1px solid var(--outline-light-secondary); display: flex; flex-direction: column; gap: 12px; }
.sp-stat-cell + .sp-stat-cell { padding-left: 28px; border-left: 1px solid var(--outline-light-secondary); }
.sp-sec.dark .sp-stat-cell { border-color: rgba(250,250,250,0.16); }
@media (max-width: 1024px) { .sp-stat-cell:nth-child(odd) { border-left: 0; padding-left: 0; } .sp-stat-cell:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--outline-light-secondary); } }
@media (max-width: 600px) { .sp-stat-cell + .sp-stat-cell { padding-left: 0; border-left: 0; } }
.sp-stat-key { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-primary); }
.sp-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 3rem); line-height: 1.02; letter-spacing: -0.045em; color: var(--font-light-primary); display: inline-flex; align-items: flex-start; }
.sp-sec.dark .sp-stat-num { color: var(--font-dark-primary); }
.sp-stat-num .unit { font-family: var(--font-mono); font-size: 0.36em; line-height: 1; padding-top: 0.32em; padding-left: 0.1em; font-weight: 500; color: var(--accent-primary); }
.sp-stat-label { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5; color: var(--font-light-secondary); max-width: 28ch; }
.sp-sec.dark .sp-stat-label { color: rgba(250,250,250,0.7); }

/* ============================================================
   CONTACT FORM (Editorial)
   ============================================================ */
.sp-contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: flex-start; }
@media (max-width: 1024px) { .sp-contact-grid { grid-template-columns: 1fr; gap: 48px; } }
.sp-contact-info { display: flex; flex-direction: column; gap: 32px; }
.sp-contact-block { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--outline-light-secondary); }
.sp-contact-block:last-of-type { border-bottom: 0; }
.sp-contact-key { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-primary); }
.sp-contact-val { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; color: var(--font-light-primary); line-height: 1.4; }
.sp-contact-val.subtle { font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem; color: var(--font-light-secondary); }
.sp-contact-val a { color: var(--font-light-primary); text-decoration: none; transition: color var(--duration); border-bottom: 1px solid var(--outline-light-secondary); padding-bottom: 2px; }
.sp-contact-val a:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.sp-contact-socials { display: flex; gap: 8px; align-items: center; padding-top: 16px; }
.sp-contact-socials a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--outline-light-secondary); color: var(--font-light-primary); border-radius: 2px; transition: background var(--duration), color var(--duration), border-color var(--duration); }
.sp-contact-socials a:hover { background: var(--font-light-primary); color: var(--font-dark-primary); border-color: var(--font-light-primary); }

.sp-form { display: flex; flex-direction: column; gap: 24px; padding: 48px; background: var(--surface-light-secondary); border: 1px solid var(--outline-light-tertiary); }
.sp-form h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.025em; color: var(--font-light-primary); margin: 0; }
.sp-form-sub { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.55; color: var(--font-light-secondary); margin: 0 0 16px; }
.sp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .sp-form-row { grid-template-columns: 1fr; } .sp-form { padding: 32px 24px; } }
.sp-form-group { display: flex; flex-direction: column; gap: 6px; }
.sp-form-label { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--font-light-secondary); }
.sp-form-input, .sp-form-textarea, .sp-form-select { font-family: var(--font-body); font-size: 0.9375rem; padding: 14px 16px; border: 1px solid var(--outline-light-secondary); background: var(--surface-light-primary); color: var(--font-light-primary); border-radius: 0; transition: border-color var(--duration); }
.sp-form-input:focus, .sp-form-textarea:focus, .sp-form-select:focus { outline: none; border-color: var(--accent-primary); }
.sp-form-textarea { min-height: 140px; resize: vertical; }
.sp-form button[type="submit"] { align-self: flex-start; margin-top: 8px; }

/* ============================================================
   BREADCRUMB / META-BAR (Detail-Seiten)
   ============================================================ */
.sp-crumb { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-light-tertiary); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.sp-crumb a { color: var(--accent-primary); text-decoration: none; }
.sp-crumb a:hover { color: var(--accent-hover); }
.sp-sec.dark .sp-crumb { color: rgba(250,250,250,0.5); }

/* ============================================================
   FINAL CTA (schwarz, zentriert)
   ============================================================ */
.sp-cta { background: var(--font-light-primary); color: var(--font-dark-primary); padding: 144px 0; }
@media (max-width: 767px) { .sp-cta { padding: 96px 0; } }
.sp-cta-inner { max-width: 880px; margin: 0 auto; padding: 0 var(--rs-pad); text-align: center; }
.sp-cta-q { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.025em; color: var(--font-dark-primary); margin: 0 0 32px; }
.sp-cta-q .hl::before { background: var(--accent-primary); height: 0.32em; bottom: 0.06em; }
.sp-cta-q em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.sp-cta-lead { font-family: var(--font-body); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: rgba(250,250,250,0.72); max-width: 56ch; margin: 0 auto 16px; }
.sp-cta-tag { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1.6vw, 1.4375rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--font-dark-primary); margin: 0 0 48px; }
.sp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* CTA "Dein Case fehlt" — Inline 2-Spalter */
.sp-cta-inline { padding: 144px 0; background: var(--surface-light-primary); border-top: 1px solid var(--outline-light-tertiary); }
.sp-cta-inline-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: flex-end; max-width: var(--rs-container); margin: 0 auto; padding: 0 var(--rs-pad); }
@media (max-width: 1024px) { .sp-cta-inline-row { grid-template-columns: 1fr; gap: 32px; align-items: flex-start; } }
.sp-cta-inline-q { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 5vw, 4.75rem); line-height: 1.0; letter-spacing: -0.04em; color: var(--font-light-primary); margin: 0; max-width: 14ch; }
.sp-cta-inline-q em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--accent-primary); }
.sp-cta-inline-side { display: flex; flex-direction: column; gap: 18px; }
.sp-cta-inline-side .lab { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-light-tertiary); margin-bottom: 4px; }
.sp-cta-inline-side a { color: var(--font-light-primary); text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; transition: color var(--duration); border-bottom: 1px solid var(--outline-light-secondary); padding-bottom: 2px; width: max-content; }
.sp-cta-inline-side a:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.sp-cta-inline-buttons { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 12px; }

/* ============================================================
   STAT-BIG (Riesen-KPIs für Case-Detail)
   ============================================================ */
.sp-bigkpi { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-top: 32px; border-top: 1px solid var(--outline-light-secondary); }
@media (max-width: 900px) { .sp-bigkpi { grid-template-columns: 1fr; gap: 48px; } }
.sp-bigkpi-cell { display: flex; flex-direction: column; gap: 16px; }
.sp-bigkpi-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 9vw, 8rem); line-height: 0.92; letter-spacing: -0.05em; color: var(--font-light-primary); display: inline-flex; align-items: baseline; }
.sp-bigkpi-num .unit { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 0.32em; color: var(--accent-primary); padding-left: 0.1em; }
.sp-bigkpi-label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-primary); }
.sp-bigkpi-desc { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--font-light-secondary); margin: 0; max-width: 42ch; }

/* Editorial Claim block (Pull-Quote) */
.sp-claim { padding: 144px 0; background: var(--surface-light-secondary); }
@media (max-width: 767px) { .sp-claim { padding: 96px 0; } }
.sp-claim-inner { max-width: 1080px; margin: 0 auto; padding: 0 var(--rs-pad); }
.sp-claim-text { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.625rem, 3.6vw, 3rem); line-height: 1.2; letter-spacing: -0.025em; color: var(--font-light-primary); margin: 0 0 32px; max-width: 28ch; }
.sp-claim-text strong { color: var(--accent-primary); font-weight: 800; }
.sp-claim-text em { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.sp-claim-attr { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-light-tertiary); padding-top: 24px; border-top: 1px solid var(--outline-light-secondary); }

/* Editorial Body Copy 2-Col */
.sp-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: flex-start; padding: 144px 0; background: var(--surface-light-primary); }
.sp-body-wrap { max-width: var(--rs-container); margin: 0 auto; padding: 0 var(--rs-pad); display: contents; }
@media (max-width: 1024px) { .sp-body { grid-template-columns: 1fr; gap: 32px; padding: 96px 0; } }
.sp-body-prose { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; color: var(--font-light-secondary); }
.sp-body-prose p { margin: 0 0 24px; }
.sp-body-prose strong { color: var(--font-light-primary); font-weight: 600; }
.sp-body-aside { display: flex; flex-direction: column; gap: 0; }
.sp-aside-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--outline-light-secondary); align-items: baseline; }
.sp-aside-row:first-child { padding-top: 0; }
.sp-aside-key { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-primary); }
.sp-aside-val { font-family: var(--font-body); font-size: 0.9375rem; color: var(--font-light-primary); }
.sp-aside-val a { color: var(--font-light-primary); border-bottom: 1px solid var(--outline-light-secondary); padding-bottom: 2px; }
.sp-aside-val a:hover { color: var(--accent-primary); border-color: var(--accent-primary); }

/* 404 */
.sp-404 { min-height: calc(100vh - 200px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 160px var(--rs-pad) 96px; gap: 32px; background: var(--surface-light-primary); }
.sp-404-code { font-family: var(--font-display); font-weight: 900; font-size: clamp(8rem, 22vw, 22rem); line-height: 0.85; letter-spacing: -0.07em; color: var(--accent-primary); margin: 0; }
.sp-404-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 3rem); letter-spacing: -0.03em; color: var(--font-light-primary); margin: 0; max-width: 22ch; }
.sp-404-sub { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--font-light-secondary); max-width: 56ch; margin: 0; }
.sp-404-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; padding-top: 8px; }

/* Reveal helper (re-uses styles.css .reveal2) */

/* Sub-page Buttons (kantig, BR=2px, R+ Editorial) */
.btn-rs-dark, .btn-rs-light, .btn-rs-out-dark, .btn-rs-out-light {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px;
  border-radius: 2px; font-family: var(--font-body); font-size: 0.8125rem;
  font-weight: 600; letter-spacing: 0; text-decoration: none; line-height: 1;
  cursor: pointer; border: 1px solid transparent;
  transition: background 0.3s var(--rs-ease), color 0.3s var(--rs-ease), border-color 0.3s var(--rs-ease);
}
.btn-rs-dark { background: var(--accent-primary); color: var(--font-dark-primary); border-color: var(--accent-primary); }
.btn-rs-dark:hover { background: var(--font-light-primary); color: var(--font-dark-primary); border-color: var(--font-light-primary); }
.btn-rs-light { background: var(--font-dark-primary); color: var(--font-light-primary); border-color: var(--font-dark-primary); }
.btn-rs-light:hover { background: var(--accent-primary); color: var(--font-dark-primary); border-color: var(--accent-primary); }
.btn-rs-out-dark { background: transparent; color: var(--font-light-primary); border-color: var(--font-light-primary); }
.btn-rs-out-dark:hover { background: var(--font-light-primary); color: var(--font-dark-primary); }
.btn-rs-out-light { background: transparent; color: var(--font-dark-primary); border-color: rgba(250,250,250,0.42); }
.btn-rs-out-light:hover { background: var(--font-dark-primary); color: var(--font-light-primary); border-color: var(--font-dark-primary); }

/* ============================================================
   GLOBAL BOTTOM CTA (Partial: partials/cta.html)
   ============================================================ */
.cs-cta { padding: 144px 0; background: var(--surface-light-primary); border-top: 1px solid var(--outline-light-tertiary); }
@media (max-width: 1024px) { .cs-cta { padding: 104px 0; } }
.cs-cta-wrap { max-width: var(--rs-container); margin: 0 auto; padding: 0 var(--rs-pad); }
.cs-cta-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 96px; align-items: end; }
@media (max-width: 1024px) { .cs-cta-grid { grid-template-columns: 1fr; gap: 48px; align-items: flex-start; } }
.cs-cta-q { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.875rem, 4.2vw, 3.75rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--font-light-primary); margin: 0; max-width: 22ch; }
.cs-cta-q em { font-family: var(--font-serif); font-style: italic; font-weight: 500; color: var(--accent-primary); }
.cs-cta-side { display: flex; flex-direction: column; gap: 28px; }
.cs-cta-rows { display: flex; flex-direction: column; gap: 20px; }
.cs-cta-row { display: flex; flex-direction: column; gap: 4px; }
.cs-cta-row .lab { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--font-light-tertiary); }
.cs-cta-row a { color: var(--font-light-primary); text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; transition: color var(--duration); width: max-content; }
.cs-cta-row a:hover { color: var(--accent-primary); }
.cs-cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 12px; }
.cs-cta-buttons .btn-rs-dark, .cs-cta-buttons .btn-rs-out-dark { white-space: nowrap; }

/* GLOBAL: Highlight-Underline ".hl" deaktiviert (alle Seiten, auch Inline-Overrides). */
.hl::before { display: none !important; background: transparent !important; height: 0 !important; }