/* =============================================================================
   styles.css — global primitives only.
   Component-specific rules live in each Svelte component's own <style> block.
   These rules stay here because they (a) are cross-cutting utilities used by
   many components, or (b) are descendant selectors that reach into child
   component roots (e.g. .sh-frame-top > .sh-hero).
============================================================================= */

/* UI kit shared styles — extends colors_and_type.css */

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--sh-deep-space); background: #fff; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }


/* ----- Frame: Hero + Referenzen fit one viewport ----- */
.sh-frame-top {
  /* Top viewport = nav (72px) + Hero + Referenzen. */
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sh-frame-top > .sh-hero {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sh-frame-top > .sh-refs {
  flex-shrink: 0;
}

/* ----- Container ----- */
.shk-container { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
@media (max-width: 720px) { .shk-container { padding: 0 24px; } }

/* ----- Buttons (only variants in use: primary, onspace) ----- */
.shk-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 15px; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s; text-decoration: none; }
.shk-btn-primary { background: var(--sh-electric-violet); color: #fff; }
.shk-btn-primary:hover { background: var(--sh-violet-light); box-shadow: 0 10px 24px -8px rgba(95,40,239,.55), 0 2px 6px rgba(16,0,48,.12); transform: translateY(-1px); }
.shk-btn-primary:active { transform: scale(0.98); }
.shk-btn-onspace { background: var(--sh-signal-yellow); color: var(--sh-deep-space); }
.shk-btn-onspace:hover { background: #FFF59D; }

/* ----- Eyebrow ----- */
.shk-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sh-electric-violet); display: inline-block; }
.shk-on-space .shk-eyebrow { color: var(--sh-signal-yellow); }

/* ----- Display headings + body text ----- */
.shk-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 6.5vw, 96px); line-height: 1.02; letter-spacing: -0.022em; margin: 0; text-wrap: balance; }
.shk-h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.016em; margin: 0; text-wrap: balance; }
.shk-h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.18; margin: 0; }
.shk-lead { font-size: 20px; line-height: 1.5; color: color-mix(in srgb, currentColor 75%, transparent); margin: 0; }
.shk-body { font-size: 17px; line-height: 1.55; color: color-mix(in srgb, currentColor 72%, transparent); margin: 0; }
.shk-small { font-size: 14px; line-height: 1.5; color: color-mix(in srgb, currentColor 65%, transparent); }

/* ----- Marker highlight ----- */
.shk-marker { background: linear-gradient(180deg, transparent 60%, var(--sh-signal-yellow) 60%); padding: 0 .08em; color: var(--sh-deep-space); }
.shk-on-space .shk-marker { background: none; color: var(--sh-signal-yellow); padding: 0; }

/* ----- Card primitives ----- */
.shk-card { background: #fff; border: 1px solid rgba(16,0,48,.10); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color .18s; }
.shk-card:hover { border-color: rgba(16,0,48,.24); }
.shk-card .ico { width: 40px; height: 40px; }
.shk-card .ico-violet { filter: brightness(0) saturate(100%) invert(20%) sepia(70%) saturate(5500%) hue-rotate(254deg) brightness(98%) contrast(105%); }
.shk-glass { background: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.10)); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 28px; color: #fff; }

/* ----- Sections ----- */
.shk-section { padding: 96px 0; background: #fff; }
.shk-section-tight { padding: 64px 0; }
.shk-on-space { background: var(--sh-deep-space); color: #fff; position: relative; overflow: hidden; }

/* ----- Shared section head (Services, Founders) ----- */
.sh-section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 64px;
}
.sh-section-head > :nth-child(1) {
  max-width: 100%;
}
.sh-section-head h2 {
  /* Use pretty (or normal) so long German compounds don't wrap onto an
     unnecessary second line just to "balance" the headline. */
  text-wrap: pretty;
}
.sh-section-head > :nth-child(2) {
  justify-self: stretch;
  max-width: 100%;
  text-align: left;
}
.sh-section-head.sh-on-space-head { align-items: start; }
@media (max-width: 880px) {
  .sh-section-head { gap: 24px; }
}