/* ============================================================
   VALEN – Dark Glass Layer
   Getöntes Frosted Glass auf Schiefer · große Radien · Motion
   Kaskadiert ÜBER valen-redesign.css (nach ihr eingebunden)
   ============================================================ */

:root {
  /* Die Radius-Leiter steht in valen-redesign.css – hier bewusst
     nicht erneut definiert, damit es genau eine Quelle gibt. */

  --glass-blur: 26px;
  --shadow-soft: 0 30px 70px -34px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 48px 100px -40px rgba(0, 0, 0, 0.85);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Glas-Tokens (dunkel) */
  --glass-bg:        rgba(255, 255, 255, 0.045);
  --glass-bg-hover:  rgba(255, 255, 255, 0.075);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-border-hi: rgba(255, 255, 255, 0.22);
  --glass-inset:     inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Glass-Utilities ───────────────────────────────────────── */

.glass, .glass-dark {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft), var(--glass-inset);
}

/* Getönte Hintergrund-„Blobs" für Tiefe hinter dem Frosting */
.tint { position: relative; overflow: clip; }
.tint > .tint-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.tint > .tint-blobs::before,
.tint > .tint-blobs::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.5;
  animation: blobDrift 26s ease-in-out infinite;
}
.tint > .tint-blobs::before {
  width: 44vw; height: 44vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle, var(--glow-warm), transparent 70%);
}
.tint > .tint-blobs::after {
  width: 40vw; height: 40vw; right: -10vw; bottom: -14vw;
  background: radial-gradient(circle, var(--glow-warm-soft), transparent 70%);
  animation-delay: -13s;
}
.tint > .container, .tint > .section-header { position: relative; z-index: 1; }
@keyframes blobDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3vw, 4vh, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .tint > .tint-blobs::before, .tint > .tint-blobs::after { animation: none; }
}

/* ── Hero: Proof-Chips ─────────────────────────────────────── */

.hero-proof { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.4rem; justify-content: center; }
.proof-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 0.85rem; font-weight: 600; color: var(--text-inv-sub);
  letter-spacing: -0.01em; white-space: nowrap;
}
.proof-chip svg { width: 15px; height: 15px; opacity: 0.85; flex: none; color: var(--text-inv); }
.proof-chip b { color: #fff; font-weight: 700; }

/* ── Buttons & Navbar: runder, glasiger ────────────────────── */

.btn { border-radius: var(--radius-pill); }

/* ── OUTCOME-BAND: animierte Zahlen ────────────────────────── */

.section-outcome {
  color: var(--text-inv);
  padding: var(--space-section) 0;
  position: relative;
  border-top: 1px solid var(--border);
}
.outcome-lead {
  text-align: center; max-width: 30ch; margin: 0 auto 3.8rem;
}
.outcome-lead .eyebrow { justify-content: center; }
.outcome-lead h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.14;
  letter-spacing: -0.03em; color: var(--text-inv);
}
.outcome-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
.outcome-card {
  border-radius: var(--radius-md);
  padding: 2.2rem 1.8rem 2rem;
  text-align: left;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft), var(--glass-inset);
  transition: transform 0.5s var(--ease-out), border-color 0.4s, box-shadow 0.5s, background 0.4s;
}
.outcome-card:hover {
  transform: translateY(-5px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lift), var(--glass-inset);
}
.outcome-value {
  font-size: clamp(2.6rem, 4.4vw, 3.5rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline;
}
.outcome-value .suffix { font-size: 0.5em; font-weight: 600; margin-left: 0.12em; color: var(--text-inv-sub); letter-spacing: -0.02em; }
.outcome-value .prefix { font-size: 0.5em; font-weight: 600; margin-right: 0.08em; color: var(--text-inv-sub); }
/* Zwei Zeilen reserviert: sonst starten die Beschreibungstexte in
   den vier Karten auf unterschiedlicher Höhe. */
.outcome-label {
  margin-top: 1rem;
  min-height: 2.7em;
  font-size: 0.96rem; font-weight: 600; line-height: 1.35;
  color: var(--text-inv); letter-spacing: -0.01em;
}
.outcome-sub { margin-top: 0.4rem; font-size: 0.86rem; color: var(--text-inv-fine); line-height: 1.5; }

/* ── ANSATZ-Figur ──────────────────────────────────────────── */

.ansatz-figure image-slot { border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }

/* ── Service-Cards: Glaskacheln ────────────────────────────── */

.section-services { position: relative; }
.services-grid {
  border: none; gap: 1.1rem;
  grid-template-columns: repeat(3, 1fr);
}
.service-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-soft), var(--glass-inset);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-soft), background 0.4s, border-color 0.4s;
}
.service-card::after { display: none; }
.service-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift), var(--glass-inset);
}
.service-icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 1px solid var(--glass-border);
  color: var(--stone); margin-bottom: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.service-icon svg { width: 21px; height: 21px; }
.service-num {
  position: absolute; top: 1.7rem; right: 1.7rem; margin: 0;
  font-size: 0.74rem; color: var(--text-fine);
}

/* ── ZUSAMMENARBEIT ────────────────────────────────────── */

.section-proof { position: relative; }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.trust-card {
  min-height: 310px;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: var(--shadow-soft), var(--glass-inset);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.4s, background 0.4s;
}
.trust-card:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hi);
  box-shadow: var(--shadow-lift), var(--glass-inset);
}
.trust-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 2.4rem;
  border: 1px solid var(--glass-border-hi);
  border-radius: 50%;
  color: var(--text-inv-sub);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.trust-card h3 {
  margin-bottom: 0.9rem;
  color: var(--text-inv);
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.trust-card p { font-size: 0.96rem; line-height: 1.65; color: var(--text-inv-sub); }
.trust-meta {
  margin-top: auto;
  padding-top: 2rem;
  color: var(--text-inv-fine);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.trust-promise {
  margin-top: 1.1rem;
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.025);
}
.trust-promise-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--text-inv-fine);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.trust-promise p { color: var(--text-inv); font-size: 1.05rem; font-weight: 600; }
.trust-promise .btn { flex: none; }

/* ── Cases-Cards ───────────────────────────────────────────── */
.case-card {
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-soft), var(--glass-inset);
}
.section-cta-final .btn-large { box-shadow: 0 24px 60px -22px rgba(0,0,0,0.85); }

/* ── Modal: glasiger, runder ───────────────────────────────── */
.modal-overlay { background: rgba(4, 5, 6, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.modal-container {
  border-radius: var(--radius-lg);
  background: rgba(20, 22, 25, 0.82);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--glass-border);
}
/* Der Kopf klebt oben, während der Inhalt darunter scrollt – er
   braucht deshalb eine eigene Deckung, sonst läuft Text hindurch. */
.modal-header {
  background: rgba(20, 22, 25, 0.86);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.option-btn { border-radius: var(--radius); }
.form-group input, .form-group textarea { border-radius: var(--radius); }
.modal-close { border-radius: 50%; }
.booking-overlay { background: rgba(4, 5, 6, 0.7); }
.booking-container { background: rgba(20, 22, 25, 0.96); }

@media (max-width: 720px) {
  .booking-overlay {
    background: #08090a;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .booking-container {
    border: 0;
    border-radius: 0;
    background: #0c0d0f;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Reveal: Blur-Variante ─────────────────────────────────── */
[data-reveal="blur"] { opacity: 0; filter: blur(14px); transform: translateY(calc(20px * var(--motion-dist))); transition: opacity calc(1s * var(--motion-dur)) var(--ease-soft), filter calc(1s * var(--motion-dur)) var(--ease-soft), transform calc(1.05s * var(--motion-dur)) var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal="blur"].is-in { opacity: 1; filter: blur(0); transform: none; }

/* Fallback-Garantie für sichtbaren Endzustand */
[data-reveal].reveal-shown {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* Hero-Entrance Fallback */
.hero-locked .hero-fade { opacity: 1 !important; transform: none !important; transition: none !important; }
.hero-locked .hero-headline .line > span { transform: none !important; transition: none !important; }
.hero-locked .scroll-hint { opacity: 1 !important; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-card { min-height: 0; }
  .services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .outcome-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .trust-promise { align-items: flex-start; flex-direction: column; }
  .hero-proof { gap: 0.5rem; }
  .proof-chip { font-size: 0.8rem; padding: 0.5rem 0.85rem; }
}