@import url('/assets/css/fonts.css');

/* --- Tokens (B2B palette) --- */
:root {
  --bg-base:        #FBF7F1;
  --bg-secondary:   #FBF7F1;
  --bg-tertiary:    #FBF7F1;
  --bg-highlight:   #F9E4D0;
  --bg-footer:      #1F1B14;

  --glass-bg:       rgba(255,255,255,0.55);
  --glass-border:   rgba(255,255,255,0.6);

  --surface:        rgba(255,255,255,0.85);
  --surface-border: rgba(26,26,31,0.08);

  --text-primary:   #1A1A1F;
  --text-muted:     rgba(26,26,31,0.55);

  --accent:         #EE731E;
  --accent-hover:   #D4631A;
  --hairline:       rgba(26,26,31,0.10);
  --section-line:   rgba(26,26,31,0.06);
}

/* --- Base reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Geist', sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* --- Glass --- */
.glass-nav {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 16px rgba(0,0,0,0.04);
}
.glass-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 32px rgba(0,0,0,0.04);
}
.surface {
  background: var(--surface);
  border: 1px solid var(--surface-border);
}

/* --- Typography --- */
.mono { font-family: 'Geist Mono', monospace; }

/* --- Buttons --- */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff;
  padding: 13px 24px; border-radius: 8px;
  font-family: 'Geist', sans-serif; font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: none; white-space: nowrap;
  transition: background 150ms ease, transform 100ms ease;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1.5px solid rgba(26,26,31,0.20);
  color: var(--text-primary);
  padding: 12px 22px; border-radius: 8px;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 1rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease;
}
.btn-outline:hover { border-color: rgba(26,26,31,0.40); background: rgba(255,255,255,0.40); }

.btn-nav-outline {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1.5px solid rgba(26,26,31,0.18);
  color: var(--text-primary);
  padding: 8px 16px; border-radius: 8px;
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 0.875rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease;
}
.btn-nav-outline:hover { border-color: rgba(26,26,31,0.40); background: rgba(26,26,31,0.04); }

/* --- Badges --- */
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
.badge-prio { background: #FEE2E2; color: #DC2626; }
.badge-neu  { background: #DCFCE7; color: #16A34A; }
.badge-seo  { background: #DBEAFE; color: #2563EB; }

/* --- Card Link --- */
.card-link {
  display: block; background: #fff; border-radius: 12px; padding: 1.5rem;
  border: 1px solid rgba(26,26,31,.07); text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: box-shadow 200ms, transform 150ms, border-color 200ms;
}
.card-link:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transform: translateY(-2px);
  border-color: rgba(238,115,30,.25);
}

/* --- Marquee --- */
.marquee-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 12px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
.logo-pill {
  background: rgba(26,26,31,0.07);
  border: 1px solid rgba(26,26,31,0.10);
  border-radius: 4px;
  padding: 7px 20px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Filter Pills --- */
.filter-pill {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: transparent;
  font-family: 'Geist', sans-serif;
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.filter-pill:hover:not(.active) { background: rgba(255,255,255,0.50); color: var(--text-primary); }

/* --- Footer links --- */
.footer-link {
  font-family: 'Geist', sans-serif;
  font-size: 0.9375rem;
  color: rgba(224,221,214,0.65);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer-link:hover { color: #E0DDD6; }

/* --- Accessibility --- */
:focus-visible { outline: 2px solid #EE731E; outline-offset: 3px; }

@media (prefers-reduced-transparency: reduce) {
  .glass-nav, .glass-card {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.97);
  }
}
@media (prefers-contrast: high) {
  .glass-nav, .glass-card { border-color: rgba(26,26,31,0.35); }
  .surface { border-color: rgba(26,26,31,0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .kpi-animating { animation: none !important; }
  .chart-animated #chart-line-postando { transition: none !important; }
  .chart-animated #chart-fill-postando,
  .chart-animated #chart-fill-standard { transition: none !important; }
  #chart-line-postando, #chart-fill-postando { transition: none !important; }
}

/* --- Aurora Subtle (static section wash) --- */
.aurora-subtle { position: relative; overflow: hidden; }
.aurora-subtle::before {
  content: '';
  position: absolute; top: -200px; left: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,180,120,0.15) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
.aurora-subtle::after {
  content: '';
  position: absolute; bottom: -150px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(238,115,30,0.08) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* --- Hero Aurora (drifting blobs -- index.html hero) --- */
/* overflow:clip klammert die dekorativen Blobs (700-750px), damit sie auf Mobile
   nicht das Dokument verbreitern (Zoom-out). Nav ist separat (sticky), nicht betroffen. */
.hero-aurora { position: relative; overflow: clip; }
.hero-aurora .aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(48px);
  pointer-events: none; will-change: transform; z-index: 0;
  animation: aurora-drift 20s ease-in-out infinite;
}
.hero-aurora .aurora-blob-1 { width: 700px; height: 700px; background: rgba(255,212,184,0.55); top: 20px; left: -120px; animation-delay: 0s; }
.hero-aurora .aurora-blob-2 { width: 750px; height: 450px; background: rgba(255,228,209,0.45); bottom: -150px; right: -100px; animation-delay: -7s; }
.hero-aurora .aurora-blob-3 { width: 420px; height: 420px; background: rgba(238,115,30,0.07); top: 42%; left: 46%; transform: translate(-50%,-50%); animation-delay: -13s; }
@keyframes aurora-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(28px,-18px) scale(1.04); }
  66%     { transform: translate(-18px,12px) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) { .hero-aurora .aurora-blob { animation: none; } }

/* --- Mobile-Safety (<=400px): lange Komposita/URLs umbrechen, breite CTAs umbrechen lassen,
   damit auf sehr schmalen Screens (iPhone SE 320px) nichts den Rand ueberragt --- */
@media (max-width: 400px) {
  h1, h2, h3, p, li, a, .agb-wrap, .agb-wrap * { overflow-wrap: break-word; }
  .btn-primary { white-space: normal; }
}

/* --- Body Aurora (data-attribute control) --- */
body[data-hero-aurora="off"] .hero-aurora .aurora-blob { display: none; }
body[data-hero-aurora="subtle"] .hero-aurora .aurora-blob-1 { background: rgba(255,212,184,0.30); }
body[data-hero-aurora="subtle"] .hero-aurora .aurora-blob-2 { background: rgba(255,228,209,0.24); }
body[data-hero-aurora="subtle"] .hero-aurora .aurora-blob-3 { background: rgba(238,115,30,0.04); }
body[data-hero-aurora="subtle"] {
  background:
    radial-gradient(ellipse 800px 600px at 8% 80px, rgba(255,212,184,0.32) 0%, transparent 56%),
    radial-gradient(ellipse 700px 500px at 92% 280px, rgba(255,228,209,0.34) 0%, transparent 56%),
    var(--bg-base);
}
body[data-hero-aurora="full"] {
  background:
    radial-gradient(ellipse 800px 600px at 8% 80px, rgba(255,212,184,0.60) 0%, transparent 56%),
    radial-gradient(ellipse 700px 500px at 92% 280px, rgba(255,228,209,0.62) 0%, transparent 56%),
    var(--bg-base);
}

/* --- Postcard Flip --- */
.postcard-wrapper { cursor: pointer; width: 100%; max-width: 500px; margin-left: auto; user-select: none; }
.postcard-3d {
  position: relative; width: 100%; aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
  transform: rotate(-2deg);
  filter: drop-shadow(0 28px 48px rgba(26,26,31,0.12));
}
.postcard-3d.flipped { transform: rotate(-2deg) rotateY(180deg); }
.postcard-wrapper:hover .postcard-3d:not(.flipped) {
  transform: rotate(-2deg) translateY(-5px);
  filter: drop-shadow(0 36px 56px rgba(26,26,31,0.16));
}
.postcard-front, .postcard-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(26,26,31,0.05);
}
.postcard-back { transform: rotateY(180deg); }
.postcard-wrapper:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.postcard-hint { transition: color 150ms ease; }
@media (min-width: 1024px) {
  .pc-col { position: relative; }
  .pc-col .postcard-hint {
    position: absolute; left: 50%; bottom: -34px;
    transform: translateX(-50%); margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .postcard-3d, .postcard-wrapper:hover .postcard-3d:not(.flipped) { transition: none; transform: rotate(-2deg); }
  .postcard-3d.flipped { transition: none; transform: rotate(-2deg) rotateY(180deg); }
}

/* --- Flip-Hinweis-Pill (Postkarte umdrehen) --- */
.pc-flip-btn {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 8px 16px 8px 12px; border-radius: 9999px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(26,26,31,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  font-family: 'Geist', sans-serif; font-weight: 500; font-size: 0.9375rem;
  color: var(--text-muted);
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  cursor: pointer; user-select: none;
}
.pc-flip-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.85); border-color: rgba(26,26,31,0.14); }
.pc-flip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pc-flip-btn .flip-hint-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; flex-shrink: 0;
  animation: flip-hint-pulse 2.4s ease-in-out infinite;
}
@keyframes flip-hint-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(238,115,30,0.35); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(238,115,30,0); }
}
@media (prefers-reduced-motion: reduce) { .pc-flip-btn .flip-hint-icon { animation: none; } }

/* --- Hero KPI Strip --- */
.hero-kpi-strip {
  display: flex; align-items: baseline;
  gap: clamp(40px, 6vw, 88px);
  margin-top: clamp(20px, 2.5vh, 32px);
  flex-wrap: wrap;
}
.hero-kpi { flex: 0 1 auto; max-width: 230px; }
.hero-kpi-num {
  font-family: 'Geist', sans-serif; font-weight: 700;
  font-size: clamp(2.5rem, 4.4vw, 3.5rem); letter-spacing: -0.04em;
  color: var(--text-primary); line-height: 1;
  display: flex; align-items: baseline;
}
.hero-kpi-unit {
  color: var(--accent); font-size: 0.5em; font-weight: 700;
  margin-left: 4px; letter-spacing: -0.01em;
}
.hero-kpi-label {
  font-family: 'Geist', sans-serif; font-size: 0.9375rem;
  color: var(--text-muted); line-height: 1.45; margin-top: 12px; display: block;
}
@media (max-width: 700px) {
  .hero-kpi-strip { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero-kpi { max-width: none; }
}

/* --- Slider --- */
.slider-orange {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: rgba(26,26,31,0.12); outline: none; cursor: pointer;
}
.slider-orange::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.15s ease;
}
.slider-orange::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider-orange::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* --- KPI Counter Pulse --- */
@keyframes kpi-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 32px rgba(0,0,0,0.04); }
  50%       { box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 32px rgba(0,0,0,0.04), 0 0 0 4px rgba(238,115,30,0.12); }
}
.kpi-animating { animation: kpi-pulse 0.8s ease-in-out 2; }

/* --- Chart --- */
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
#chart-line-postando {
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}
.chart-animated #chart-line-postando {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4,0,0.2,1);
}
#chart-fill-postando, #chart-fill-standard { opacity: 0; }
.chart-animated #chart-fill-postando,
.chart-animated #chart-fill-standard {
  opacity: 1;
  transition: opacity 0.9s ease 0.5s;
}
#wendepunkt-group { opacity: 0; }
.chart-animated #wendepunkt-group {
  opacity: 1;
  transition: opacity 0.4s ease 1.2s;
}

/* --- Y-Label Update --- */
@keyframes y-label-update {
  0%   { opacity: 0.3; }
  100% { opacity: 1; }
}
.y-label.updating { animation: y-label-update 300ms ease-out; }

/* --- Chart path transition --- */
@media not (prefers-reduced-motion: reduce) {
  #chart-line-postando, #chart-fill-postando {
    transition: d 400ms cubic-bezier(0.16,1,0.3,1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .y-label.updating { animation: none; }
}

/* --- Postcard Mini --- */
.postcard-mini {
  width: 82px; height: 58px;
  background: white;
  border-radius: 4px;
  border: 1px solid rgba(26,26,31,0.10);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.pc-photo { position: absolute; left: 0; top: 0; width: 52%; height: 100%; }
.pc-divider {
  position: absolute; left: 52%; top: 0; width: 1px; height: 100%;
  background: rgba(26,26,31,0.08);
}
.pc-stamp {
  position: absolute; top: 5px; right: 5px;
  width: 13px; height: 16px;
  background: var(--accent);
  border-radius: 1px; opacity: 0.75;
}
.pc-line {
  position: absolute; right: 5px;
  height: 2px; border-radius: 1px;
  background: rgba(26,26,31,0.12);
}

/* --- Journey Connector --- */
.journey-connector { flex-shrink: 0; }

/* --- Section separator --- */
.sep-top { border-top: 1px solid var(--section-line); }

/* --- Solution Icon Chip --- */
.sol-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(238,115,30,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); flex-shrink: 0;
}

/* --- Hub Card Grid (Lösungen/Produkt/Referenzen hubs) --- */
.hub-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  max-width: 1200px; margin: 0 auto;
}
@media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Trust Strip --- */
.trust-strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 18px 40px;
}
.trust-strip-label {
  font-family: 'Geist', sans-serif; font-size: 0.9375rem; font-weight: 400;
  color: var(--text-muted); letter-spacing: -0.005em; white-space: nowrap;
}
.trust-strip-logos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
}
.trust-logo {
  font-family: 'Geist', sans-serif; font-weight: 600;
  font-size: 1.0625rem; letter-spacing: -0.01em;
  color: rgba(26,26,31,0.42); white-space: nowrap;
}
@media (max-width: 640px) {
  .trust-strip { gap: 14px 28px; }
  .trust-strip-label { white-space: normal; text-align: center; }
}

/* ── Lösungs-Detailseiten (Wrapper .sol-detail – kollisionssicher gescopt) ── */
.sol-detail hr.sep,
.sol-detail .sep { border: none; border-top: 1px solid var(--section-line); margin: 0; }
.sol-detail .h2 {
  font: 800 clamp(1.625rem,3vw,2.25rem)/1.12 'Geist', sans-serif;
  letter-spacing: -.025em; color: var(--text-primary);
}

/* Hero */
.sol-detail .hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 920px) { .sol-detail .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 4rem; } }
.sol-detail .hero-visual { position: relative; z-index: 1; width: 100%; max-width: 440px; justify-self: end; }
@media (max-width: 919px) { .sol-detail .hero-visual { margin: 0 auto; justify-self: center; } }

/* Hero-Postkarte (Platzhalter; eigene pcard*-Namen, um Postcard-Mini .pc-* nicht zu stören) */
.sol-detail .pcard {
  width: 100%; max-width: 440px; aspect-ratio: 3/2; background: #fff; border-radius: 12px;
  box-shadow: 0 30px 60px rgba(26,26,31,.14), 0 4px 12px rgba(26,26,31,.06), inset 0 0 0 1px rgba(26,26,31,.04);
  transform: rotate(-3deg); overflow: hidden; display: flex; flex-direction: column; margin: 0 auto;
}
.sol-detail .pcard-photo {
  flex: 1; position: relative; display: flex; align-items: flex-end; padding: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 48%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 13px, transparent 13px 26px),
    linear-gradient(135deg, #f5d5a8, #e8b27a);
}
.sol-detail .pcard-photo-lbl { font-family: 'Geist Mono', monospace; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(26,26,31,.42); }
.sol-detail .pcard-strip { height: 33%; background: #fff; padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sol-detail .pcard-mono { font-family: 'Geist Mono', monospace; font-size: .5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.sol-detail .pcard-line { font-size: .6875rem; font-weight: 500; color: var(--text-primary); }
.sol-detail .pcard-stamp {
  width: 34px; height: 42px; border: 1.4px dashed rgba(238,115,30,.45); border-radius: 3px;
  background: rgba(238,115,30,.05); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.sol-detail .pcard-stamp::after { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.4px solid rgba(238,115,30,.5); }

/* Use Case */
.sol-detail .usecase-lead { font-size: clamp(1.25rem,1.9vw,1.5rem); line-height: 1.5; letter-spacing: -.01em; color: var(--text-primary); font-weight: 500; margin-bottom: 1.1rem; max-width: 660px; text-wrap: pretty; }
.sol-detail .usecase-text { font-size: 1.0625rem; line-height: 1.75; color: var(--text-muted); max-width: 680px; }
.sol-detail .usecase-text .hl { color: var(--accent); font-weight: 600; }

/* Wie es funktioniert – Schritte + Prozess-Connector */
.sol-detail .step-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .sol-detail .step-grid { grid-template-columns: repeat(3,1fr); gap: 1.75rem; } }
.sol-detail .step-card { position: relative; background: #fff; border: 1px solid rgba(26,26,31,.06); border-radius: 14px; padding: 1.75rem; transition: transform 200ms ease, box-shadow 200ms ease; }
.sol-detail .step-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(26,26,31,.08); }
.sol-detail .step-num { font: 700 2.75rem/1 'Geist Mono', monospace; color: var(--accent); letter-spacing: -.02em; margin-bottom: 1rem; }
.sol-detail .step-card:not(:last-child)::after { content: ""; position: absolute; width: 11px; height: 11px; border-top: 2px solid rgba(238,115,30,.55); border-right: 2px solid rgba(238,115,30,.55); pointer-events: none; }
@media (min-width: 760px) { .sol-detail .step-card:not(:last-child)::after { top: 50%; right: -21px; transform: translateY(-50%) rotate(45deg); } }
@media (max-width: 759px) { .sol-detail .step-card:not(:last-child)::after { left: 50%; bottom: -17px; transform: translateX(-50%) rotate(135deg); } }

/* Ihre Vorteile – Editorial-Liste */
.sol-detail .vor-list { border-top: 1px solid var(--hairline); }
.sol-detail .vor-row { padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
.sol-detail .vor-term { display: flex; align-items: center; gap: .6rem; font: 700 1.0625rem/1.3 'Geist', sans-serif; letter-spacing: -.01em; color: var(--text-primary); margin-bottom: .35rem; }
.sol-detail .vor-term::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.sol-detail .vor-desc { font-size: .9375rem; line-height: 1.6; color: var(--text-muted); padding-left: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .sol-detail .step-card { transition: none; }
  .sol-detail .step-card:hover { transform: none; }
}

/* ── Case-Study KPI-Reihen (Hero + Ergebnisse) ───────────────── */
.kpi-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; border-top: 1px solid var(--hairline); padding-top: 2rem; max-width: 920px; }
@media (min-width: 760px) {
  .kpi-row { grid-template-columns: 1.25fr 1fr 1fr; gap: 0; }
  .kpi-item { padding: 0 2rem; }
  .kpi-item:first-child { padding-left: 0; }
  .kpi-item + .kpi-item { border-left: 1px solid var(--hairline); }
}
.res-row { display: grid; grid-template-columns: 1fr; gap: 2rem; border-top: 1px solid var(--hairline); padding-top: 2.5rem; }
@media (min-width: 760px) {
  .res-row { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .res-item { padding: 0 2.5rem; }
  .res-item:first-child { padding-left: 0; }
  .res-item + .res-item { border-left: 1px solid var(--hairline); }
}
.res-num { font: 700 clamp(2.75rem,5vw,4rem)/1 'Geist', sans-serif; letter-spacing: -.03em; color: var(--accent); }
.res-label { font-size: .875rem; color: var(--text-muted); line-height: 1.5; margin-top: .85rem; max-width: 240px; }

/* ── Duo-Spalten (zwei gleich breite Textspalten, vertikale Haarlinie) ── */
.sol-detail .duo-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 1000px; margin: 0 auto; }
@media (min-width: 760px) {
  .sol-detail .duo-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .sol-detail .duo-col { padding: 0 3rem; }
  .sol-detail .duo-col:first-child { padding-left: 0; }
  .sol-detail .duo-col + .duo-col { border-left: 1px solid var(--hairline); }
}

/* ── Hero Flip-Postkarte (Detailseiten) — Mechanik wie Home-Hero, gescopt ── */
.sol-detail .pcard-flip { width: 100%; max-width: 440px; margin: 0 auto; cursor: pointer; user-select: none; filter: drop-shadow(0 30px 60px rgba(26,26,31,.14)); }
.sol-detail .pcard-3d {
  position: relative; width: 100%; aspect-ratio: 3/2; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4,0,.2,1); transform: rotate(-3deg);
}
.sol-detail .pcard-3d.flipped { transform: rotate(-3deg) rotateY(180deg); }
.sol-detail .pcard-flip:hover .pcard-3d:not(.flipped) { transform: rotate(-3deg) translateY(-4px); }
.sol-detail .pcard-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(26,26,31,.05), 0 4px 12px rgba(26,26,31,.06);
}
.sol-detail .pcard-front { background: linear-gradient(135deg, #f5d5a8, #e8b27a); }
.sol-detail .pcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sol-detail .pcard-back {
  transform: rotateY(180deg); background: #FAF7F1;
  display: grid; grid-template-columns: 3fr 2fr; gap: 0; align-items: stretch; padding: 16px 18px;
}
.sol-detail .pcard-back-left { padding-right: 14px; display: flex; flex-direction: column; }
.sol-detail .pcard-back-right { padding-left: 14px; border-left: 1px dashed rgba(26,26,31,0.18); display: flex; flex-direction: column; }
.sol-detail .pcard-back-stamp { width: 44px; margin-left: auto; }
.sol-detail .pcard-back-stamp svg { width: 100%; height: auto; display: block; }
.sol-detail .pcard-back-addr { font-family: 'Geist', sans-serif; font-size: 0.75rem; line-height: 1.7; color: var(--text-primary); margin-top: 12px; }
.sol-detail .pcard-script { font-family: 'Caveat', cursive; font-size: clamp(1.1rem,2.2vw,1.35rem); line-height: 1.45; color: var(--text-primary); margin: 0; flex: 1; }
.sol-detail .pcard-flip:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .sol-detail .pcard-3d, .sol-detail .pcard-flip:hover .pcard-3d:not(.flipped) { transition: none; transform: rotate(-3deg); }
  .sol-detail .pcard-3d.flipped { transition: none; transform: rotate(-3deg) rotateY(180deg); }
}