/*
Theme Name: Running 8
Theme URI: https://www.running8.ch
Author: Running 8 GmbH
Description: Custom theme for Running 8 GmbH — lokaler IT-Dienstleister für massgeschneiderte Hard- und Softwarelösungen.
Version: 1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: running8
*/

:root {
  --r8-blue-dark: #0f3557;
  --r8-blue: #1c5b96;
  --r8-blue-light: #2f80c4;
  --r8-blue-pale: #eaf2fa;
  --r8-teal: #0d8f83;
  --r8-teal-pale: #e3f5f3;
  --r8-amber: #e08a2c;
  --r8-amber-pale: #fdf1e3;
  --r8-coral: #d1495b;
  --r8-coral-pale: #fbe9eb;
  --r8-violet: #6d4fc2;
  --r8-violet-pale: #eee9fa;
  --r8-ink: #1f2733;
  --r8-gray: #5a6675;
  --r8-border: #dde6ef;
  --r8-bg: #ffffff;
  --r8-surface: #ffffff;
  --r8-header-bg: rgba(255, 255, 255, 0.96);
  --r8-heading: var(--r8-blue-dark);
  --r8-success-bg: #e7f6ec;
  --r8-success-text: #206a3a;
  --r8-success-border: #bfe6cb;
  --r8-error-bg: #fdeaea;
  --r8-error-text: #a3312a;
  --r8-error-border: #f3c4c1;
  --r8-radius: 10px;
  --r8-shadow: 0 10px 30px rgba(15, 53, 87, 0.08);
  --r8-max: 1140px;
  --r8-ambient:
    radial-gradient(circle at 6% 10%, rgba(28, 91, 150, 0.14), transparent 30%),
    radial-gradient(circle at 94% 22%, rgba(13, 143, 131, 0.13), transparent 28%),
    radial-gradient(circle at 12% 62%, rgba(224, 138, 44, 0.12), transparent 28%),
    radial-gradient(circle at 90% 78%, rgba(109, 79, 194, 0.12), transparent 30%),
    radial-gradient(circle at 40% 95%, rgba(209, 73, 91, 0.1), transparent 26%);
}

/* The hero, CTA band and footer stay deliberately dark navy in both
   themes (like a fixed accent band); everything else follows the
   toggle below. Default: system preference, unless overridden. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --r8-blue: #5b9bdc;
    --r8-blue-light: #6db4e8;
    --r8-blue-pale: rgba(91, 155, 220, 0.16);
    --r8-teal: #35c7b8;
    --r8-teal-pale: rgba(53, 199, 184, 0.16);
    --r8-amber: #f0a94f;
    --r8-amber-pale: rgba(240, 169, 79, 0.16);
    --r8-coral: #e88b96;
    --r8-coral-pale: rgba(232, 139, 150, 0.16);
    --r8-violet: #a68ee8;
    --r8-violet-pale: rgba(166, 142, 232, 0.16);
    --r8-ink: #e8edf3;
    --r8-gray: #a0acba;
    --r8-border: #2b3946;
    --r8-bg: #182029;
    --r8-surface: #1a2430;
    --r8-header-bg: rgba(24, 32, 41, 0.92);
    --r8-heading: #e3ecf6;
    --r8-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --r8-success-bg: rgba(32, 106, 58, 0.25);
    --r8-success-text: #86e0a6;
    --r8-success-border: rgba(134, 224, 166, 0.35);
    --r8-error-bg: rgba(163, 49, 42, 0.25);
    --r8-error-text: #f0a8a3;
    --r8-error-border: rgba(240, 168, 163, 0.35);
    --r8-ambient:
      radial-gradient(circle at 6% 10%, rgba(91, 155, 220, 0.16), transparent 30%),
      radial-gradient(circle at 94% 22%, rgba(53, 199, 184, 0.15), transparent 28%),
      radial-gradient(circle at 12% 62%, rgba(240, 169, 79, 0.14), transparent 28%),
      radial-gradient(circle at 90% 78%, rgba(166, 142, 232, 0.15), transparent 30%),
      radial-gradient(circle at 40% 95%, rgba(232, 139, 150, 0.12), transparent 26%);
  }
}

:root[data-theme="dark"] {
  --r8-blue: #5b9bdc;
  --r8-blue-light: #6db4e8;
  --r8-blue-pale: rgba(91, 155, 220, 0.16);
  --r8-teal: #35c7b8;
  --r8-teal-pale: rgba(53, 199, 184, 0.16);
  --r8-amber: #f0a94f;
  --r8-amber-pale: rgba(240, 169, 79, 0.16);
  --r8-coral: #e88b96;
  --r8-coral-pale: rgba(232, 139, 150, 0.16);
  --r8-violet: #a68ee8;
  --r8-violet-pale: rgba(166, 142, 232, 0.16);
  --r8-ink: #e8edf3;
  --r8-gray: #a0acba;
  --r8-border: #2b3946;
  --r8-bg: #182029;
  --r8-surface: #1a2430;
  --r8-header-bg: rgba(24, 32, 41, 0.92);
  --r8-heading: #e3ecf6;
  --r8-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --r8-success-bg: rgba(32, 106, 58, 0.25);
  --r8-success-text: #86e0a6;
  --r8-success-border: rgba(134, 224, 166, 0.35);
  --r8-error-bg: rgba(163, 49, 42, 0.25);
  --r8-error-text: #f0a8a3;
  --r8-error-border: rgba(240, 168, 163, 0.35);
  --r8-ambient:
    radial-gradient(circle at 6% 10%, rgba(91, 155, 220, 0.16), transparent 30%),
    radial-gradient(circle at 94% 22%, rgba(53, 199, 184, 0.15), transparent 28%),
    radial-gradient(circle at 12% 62%, rgba(240, 169, 79, 0.14), transparent 28%),
    radial-gradient(circle at 90% 78%, rgba(166, 142, 232, 0.15), transparent 30%),
    radial-gradient(circle at 40% 95%, rgba(232, 139, 150, 0.12), transparent 26%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The logo intro is exempted below: it's a one-off brand moment shown once
     per session, not the kind of ongoing motion this preference targets, and
     it's meant to always play. */
  *:not(.logo-intro, .logo-intro *, .logo-intro-backdrop),
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--r8-ink);
  background-color: var(--r8-bg);
  background-image: var(--r8-ambient);
  background-attachment: fixed;
  line-height: 1.65;
}

h1, h2, h3, h4,
.site-branding .site-title,
.btn,
.footer-grid h4 {
  font-family: "Manrope", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3 { text-wrap: balance; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--r8-blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }
a { color: var(--r8-blue); text-decoration: none; }
a:hover { color: var(--r8-blue-light); }

.container {
  max-width: var(--r8-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--r8-header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--r8-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
}

/* Front-page intro: a full-screen cover, the two circles drop in from
   opposite directions and settle with a little bounce, the wordmark fades
   in on top of them, then the whole lockup shrinks and slides up into the
   header while the cover fades away. */
.logo-intro-backdrop {
  position: fixed;
  /* `dvh` for height specifically misbehaves on real mobile Safari in this
     nested-fixed-position setup (confirmed by testing — width via `dvw` is
     fine, height via `dvh` is not). Pinning both vertical edges instead of
     stating an explicit height sidesteps any dvh/vh computation entirely:
     the browser stretches the box edge-to-edge with no viewport-unit maths
     involved. */
  top: 0;
  bottom: 0;
  left: 0;
  width: 100dvw;
  background: var(--r8-bg);
  z-index: 290;
  pointer-events: none;
  animation: r8-backdrop-fade 1.3s ease 2.3s forwards;
}

.logo-intro {
  position: fixed;
  /* Horizontal centring is fine via dvw. Vertical centring can't use the
     same "pin both edges" trick as the backdrop (a centre point, not a
     stretch), and `dvh` itself is what's broken here, so the vertical
     centre is computed in JS from `window.innerHeight` instead (see
     header.php) and exposed as this custom property; `50%` is only the
     fallback before that script runs. */
  top: var(--r8-vh-center, 50%);
  left: 50dvw;
  width: 0;
  height: 0;
  z-index: 300;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  /* The shrink-to-logo phase is driven directly from JS (see header.php),
     not from this @keyframes rule — it needs the logo's real, measured
     position, which a CSS custom property substituted into a keyframe
     apparently doesn't reliably pick up in every browser. */
}

.logo-intro-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.logo-intro-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.logo-intro-circle { opacity: 0; }

.logo-intro-circle-top {
  /* Easing lives per-keyframe-step below (a real bounce accelerates into
     each peak and decelerates out of it), so the overall timing here is
     a neutral "ease" — it only governs the very last, easing-less segment. */
  animation: r8-drop-top 1.3s ease 0.1s forwards;
}

.logo-intro-circle-bottom {
  animation: r8-drop-bottom 1.3s ease 0.3s forwards;
}

.logo-intro-text {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.logo-intro-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 56px;
  color: var(--r8-heading);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(14px);
  animation: r8-text-in 0.7s ease-out 1.3s forwards;
}

.logo-intro-subtitle {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--r8-gray);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  animation: r8-text-in 0.6s ease-out 1.55s forwards;
}

/* A falling object accelerates (ease-in) on the way to each peak/trough and
   decelerates (ease-out) coming out of it; alternating that per step, with
   each overshoot roughly a third of the last, is what reads as a real
   spring settling rather than a single snap-back correction. */
@keyframes r8-drop-top {
  0%   { transform: translateY(-160px); opacity: 0; animation-timing-function: ease-in; }
  50%  { opacity: 1; }
  58%  { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  70%  { transform: translateY(9px); animation-timing-function: ease-in; }
  80%  { transform: translateY(-4px); animation-timing-function: ease-out; }
  89%  { transform: translateY(1.5px); animation-timing-function: ease-in; }
  96%  { transform: translateY(-0.5px); animation-timing-function: ease-out; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes r8-drop-bottom {
  0%   { transform: translateY(160px); opacity: 0; animation-timing-function: ease-in; }
  50%  { opacity: 1; }
  58%  { transform: translateY(0); opacity: 1; animation-timing-function: ease-out; }
  70%  { transform: translateY(-9px); animation-timing-function: ease-in; }
  80%  { transform: translateY(4px); animation-timing-function: ease-out; }
  89%  { transform: translateY(-1.5px); animation-timing-function: ease-in; }
  96%  { transform: translateY(0.5px); animation-timing-function: ease-out; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes r8-text-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes r8-group-shrink {
  to {
    /* --r8-intro-dx/dy/scale are computed at runtime (see header.php) from
       the real position of the header logo, so the animation always lands
       exactly on it regardless of viewport size. The hardcoded values are
       only a fallback for the rare case that script fails. */
    transform: translate(calc(-50% + var(--r8-intro-dx, -38vw)), calc(-50% + var(--r8-intro-dy, -34vh))) scale(var(--r8-intro-scale, 0.12));
    opacity: 0;
  }
}

@keyframes r8-backdrop-fade {
  to { opacity: 0; visibility: hidden; }
}

/* The logo intro always plays now, even under prefers-reduced-motion — see
   the exemption in the earlier reduced-motion block above. */

/* Already played in this browser session (flag set in header.php). */
.r8-intro-seen .logo-intro,
.r8-intro-seen .logo-intro-backdrop { display: none; }

.logo-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand .logo-mark {
  width: 28px;
  height: 28px;
}

.site-branding .site-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--r8-heading);
  line-height: 1.1;
}

.site-branding .site-title span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--r8-gray);
  letter-spacing: 0.3px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main-navigation ul {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.main-navigation a {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  color: var(--r8-ink);
  font-weight: 500;
  font-size: 15px;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  background: var(--r8-blue-pale);
  color: var(--r8-blue);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--r8-heading);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--r8-border);
  background: var(--r8-surface);
  border-radius: 8px;
  cursor: pointer;
  color: var(--r8-heading);
  margin-left: 6px;
  flex-shrink: 0;
}

.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--r8-blue-dark) 0%, var(--r8-blue) 100%);
  color: #fff;
  padding: 90px 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 85% 15%, rgba(224, 138, 44, 0.48), transparent 45%),
    radial-gradient(circle at 68% 78%, rgba(13, 143, 131, 0.45), transparent 42%),
    radial-gradient(circle at 12% 60%, rgba(109, 79, 194, 0.32), transparent 40%),
    radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px);
  background-size: auto, auto, auto, 26px 26px;
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.hero-illustration {
  width: 100%;
  height: auto;
  max-width: 380px;
  margin: 0 auto 20px;
  display: block;
}

.hero-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  color: #bcd9f5;
  margin-bottom: 14px;
}

.hero h1 {
  font-size: 42px;
  line-height: 1.2;
  margin: 0 0 20px;
  font-weight: 800;
}

.hero p {
  font-size: 18px;
  color: #dcebf9;
  max-width: 46ch;
  margin: 0 0 28px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
}

.btn-primary {
  background: #fff;
  color: var(--r8-blue-dark);
}

.btn-primary:hover { background: #eaf2fa; color: var(--r8-blue-dark); }

.btn-outline {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions .btn {
  min-width: 200px;
  text-align: center;
}

.btn-outline:hover { background: rgba(255,255,255,0.12); color: #fff; }

.hero-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r8-radius);
  padding: 28px;
}

.hero-card ul { margin: 0; padding-left: 20px; color: #dcebf9; }
.hero-card li { margin-bottom: 10px; }

/* Sections */
.section { padding: 80px 0; }
.section-alt {
  background: linear-gradient(135deg, var(--r8-blue-pale) 0%, var(--r8-teal-pale) 100%);
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.section-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--r8-blue-light);
  margin-bottom: 10px;
}

.section-head h2 {
  font-size: 32px;
  margin: 0 0 12px;
  color: var(--r8-heading);
}

.section-head p { color: var(--r8-gray); font-size: 17px; margin: 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card-grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--r8-surface);
  border: 1px solid var(--r8-border);
  border-radius: var(--r8-radius);
  padding: 30px;
  box-shadow: var(--r8-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 53, 87, 0.13);
}

.card .icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--r8-blue-pale);
  color: var(--r8-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.card .icon svg,
.contact-info-card .row .icon svg {
  width: 24px;
  height: 24px;
}

.icon-teal { background: var(--r8-teal-pale) !important; color: var(--r8-teal) !important; }
.icon-amber { background: var(--r8-amber-pale) !important; color: var(--r8-amber) !important; }
.icon-coral { background: var(--r8-coral-pale) !important; color: var(--r8-coral) !important; }
.icon-violet { background: var(--r8-violet-pale) !important; color: var(--r8-violet) !important; }

.card.card-teal { border-top: 3px solid var(--r8-teal); }
.card.card-blue { border-top: 3px solid var(--r8-blue); }
.card.card-amber { border-top: 3px solid var(--r8-amber); }
.card.card-coral { border-top: 3px solid var(--r8-coral); }
.card.card-violet { border-top: 3px solid var(--r8-violet); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.process-step {
  text-align: center;
  padding: 0 12px;
}

.process-step .num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--r8-blue-dark);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.process-step:nth-child(1) .num { background: var(--r8-blue); }
.process-step:nth-child(2) .num { background: var(--r8-teal); }
.process-step:nth-child(3) .num { background: var(--r8-amber); }

.process-step h3 { font-size: 17px; margin: 0 0 8px; color: var(--r8-ink); }
.process-step p { font-size: 14.5px; color: var(--r8-gray); margin: 0; }

.about-figure {
  display: flex;
  justify-content: center;
  margin: 0 0 40px;
}
.about-figure svg { width: 100%; max-width: 420px; height: auto; }

.card h3 { margin: 0 0 10px; font-size: 19px; color: var(--r8-ink); }
.card p { margin: 0; color: var(--r8-gray); font-size: 15px; }
.card ul { margin: 12px 0 0; padding-left: 18px; color: var(--r8-gray); font-size: 15px; }
.card ul li { margin-bottom: 6px; }

/* Page header (inner pages) */
.page-header {
  position: relative;
  overflow: hidden;
  background: var(--r8-blue-pale);
  padding: 56px 0;
  border-bottom: 1px solid var(--r8-border);
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 90% 15%, rgba(224, 138, 44, 0.3), transparent 45%),
    radial-gradient(circle at 78% 85%, rgba(13, 143, 131, 0.3), transparent 45%);
  pointer-events: none;
}

.page-header.wash-blue::before {
  background-image:
    radial-gradient(circle at 90% 15%, rgba(28, 91, 150, 0.3), transparent 45%),
    radial-gradient(circle at 78% 85%, rgba(109, 79, 194, 0.26), transparent 45%);
}

.page-header.wash-teal::before {
  background-image:
    radial-gradient(circle at 90% 15%, rgba(13, 143, 131, 0.32), transparent 45%),
    radial-gradient(circle at 78% 85%, rgba(224, 138, 44, 0.28), transparent 45%);
}

.page-header.wash-violet::before {
  background-image:
    radial-gradient(circle at 90% 15%, rgba(109, 79, 194, 0.3), transparent 45%),
    radial-gradient(circle at 78% 85%, rgba(209, 73, 91, 0.26), transparent 45%);
}

.page-header.wash-amber::before {
  background-image:
    radial-gradient(circle at 90% 15%, rgba(224, 138, 44, 0.34), transparent 45%),
    radial-gradient(circle at 78% 85%, rgba(28, 91, 150, 0.26), transparent 45%);
}

.page-header .container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.page-header-text { flex: 1; min-width: 260px; }

.page-header h1 {
  font-size: 34px;
  color: var(--r8-heading);
  margin: 0 0 10px;
}

.page-header p { color: var(--r8-gray); font-size: 17px; margin: 0; max-width: 60ch; }

.header-icons {
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

.header-icons .hi {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--r8-surface);
  box-shadow: var(--r8-shadow);
}
.header-icons .hi svg { width: 26px; height: 26px; }
.header-icons .hi:nth-child(2) { transform: translateY(10px); }
.header-icons .hi:nth-child(3) { transform: translateY(-6px); }

@media (max-width: 680px) {
  .header-icons { display: none; }
}

.prose { max-width: none; }
.prose h2 { color: var(--r8-heading); font-size: 24px; margin: 36px 0 14px; }
.prose p { color: var(--r8-ink); font-size: 16px; }

/* References / logos */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.logo-grid-partners {
  grid-template-columns: repeat(4, 1fr);
  max-width: 280px;
}

.logo-card {
  background: var(--r8-surface);
  border: 1px solid var(--r8-border);
  border-radius: var(--r8-radius);
  padding: 26px 20px;
  text-align: center;
}

.logo-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.logo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--r8-shadow);
}

.logo-card .initials {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--r8-blue-pale);
  color: var(--r8-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  overflow: hidden;
  padding: 4px;
}

.logo-card .initials img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.logo-card .initials.c-blue { background: var(--r8-blue-pale); color: var(--r8-blue); }
.logo-card .initials.c-teal { background: var(--r8-teal-pale); color: var(--r8-teal); }
.logo-card .initials.c-amber { background: var(--r8-amber-pale); color: var(--r8-amber); }
.logo-card .initials.c-coral { background: var(--r8-coral-pale); color: var(--r8-coral); }
.logo-card .initials.c-violet { background: var(--r8-violet-pale); color: var(--r8-violet); }

.logo-card .name { font-weight: 600; margin-bottom: 4px; }
.logo-card a { font-size: 14px; }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.contact-info-card {
  background: var(--r8-surface);
  border: 1px solid var(--r8-border);
  border-radius: var(--r8-radius);
  padding: 30px;
  box-shadow: var(--r8-shadow);
}

.contact-info-card h3 { margin-top: 0; color: var(--r8-heading); }
.contact-info-card .row { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.contact-info-card .row .icon {
  width: 34px; height: 34px; border-radius: 8px; background: var(--r8-blue-pale);
  color: var(--r8-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-info-card .row div strong { display: block; font-size: 13px; color: var(--r8-gray); font-weight: 600; }

.contact-form {
  background: var(--r8-surface);
  border: 1px solid var(--r8-border);
  border-radius: var(--r8-radius);
  padding: 32px;
  box-shadow: var(--r8-shadow);
}

.contact-form h3 { margin: 0 0 20px; color: var(--r8-heading); }

.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--r8-border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--r8-surface);
  color: var(--r8-ink);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--r8-blue-light);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-notice {
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 15px;
}
.form-notice.success { background: var(--r8-success-bg); color: var(--r8-success-text); border: 1px solid var(--r8-success-border); }
.form-notice.error { background: var(--r8-error-bg); color: var(--r8-error-text); border: 1px solid var(--r8-error-border); }
.r8-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.r8-altcha { margin-bottom: 18px; --altcha-max-width: 100%; --altcha-border-color: var(--r8-border); --altcha-color-base: var(--r8-surface); --altcha-color-base-content: var(--r8-ink); --altcha-color-primary: var(--r8-blue-light); --altcha-input-border-radius: 8px; }

/* CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--r8-blue-dark);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(224, 138, 44, 0.3), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(13, 143, 131, 0.3), transparent 40%);
  pointer-events: none;
}

.cta-band .container { position: relative; }
.cta-band h2 { margin: 0 0 10px; font-size: 28px; }
.cta-band p { color: #cfe2f4; margin: 0 0 24px; }

/* Footer stays a fixed dark band in both themes, like the hero/CTA */
.site-footer {
  background: #1c2530;
  color: #c6ccd4;
  padding: 56px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.footer-grid h4 { color: #fff; font-size: 15px; margin: 0 0 16px; }
.footer-grid p, .footer-grid a { color: #aab3bf; font-size: 14px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 22px;
  font-size: 13px;
  color: #7f8894;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
  .card-grid, .card-grid-2 { grid-template-columns: 1fr 1fr; }
  .logo-grid, .logo-grid-partners { grid-template-columns: 1fr 1fr; max-width: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .main-navigation { position: fixed; top: 76px; left: 0; right: 0; background: var(--r8-surface); border-bottom: 1px solid var(--r8-border); display: none; }
  .main-navigation.is-open { display: block; }
  .main-navigation ul { flex-direction: column; padding: 12px 24px; gap: 2px; }
  .menu-toggle { display: block; }
  .hero { padding: 56px 0; }
  .hero h1 { font-size: 30px; }
  .card-grid, .card-grid-2 { grid-template-columns: 1fr; }
  .logo-grid, .logo-grid-partners { grid-template-columns: 1fr; max-width: none; }
  .two-col { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .process-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------------------------------------------------------------------------
   Elementor layer.

   Elementor owns the box model of anything it renders: it writes --padding-*,
   --margin-* and --gap onto .e-con / .e-con-inner, and zeroes widget margins
   with `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`. Mixing
   that with the theme's own padding/margin classes double-applies spacing, so
   the helpers below deliberately carry appearance ONLY — no padding, no
   margins. Spacing for Elementor-built pages is set in Elementor.
   --------------------------------------------------------------------------- */

/* Widget inner elements: the widget's own margin control owns the spacing. */
.elementor-widget-heading .elementor-heading-title { margin: 0; }
.elementor-widget-text-editor p { margin: 0; }

/* Bands ------------------------------------------------------------------- */
/* Elementor already owns `.e-con::before` for its own background overlay, so
   the decorative glow/dot layers are stacked onto the element's own
   background instead of a pseudo-element. */
.r8-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--r8-blue-dark);
  background-image:
    radial-gradient(circle at 85% 15%, rgba(224, 138, 44, 0.48), transparent 45%),
    radial-gradient(circle at 68% 78%, rgba(13, 143, 131, 0.45), transparent 42%),
    radial-gradient(circle at 12% 60%, rgba(109, 79, 194, 0.32), transparent 40%),
    radial-gradient(rgba(255,255,255,0.14) 1.5px, transparent 1.5px),
    linear-gradient(160deg, var(--r8-blue-dark) 0%, var(--r8-blue) 100%);
  background-size: auto, auto, auto, 26px 26px, auto;
}

.r8-band-alt {
  background: linear-gradient(135deg, var(--r8-blue-pale) 0%, var(--r8-teal-pale) 100%);
}

.r8-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--r8-blue-dark);
  background-image:
    radial-gradient(circle at 15% 30%, rgba(224, 138, 44, 0.3), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(13, 143, 131, 0.3), transparent 40%);
}

/* The decorative ::before is positioned, so the content needs a stacking
   context of its own or it would paint underneath the overlay. */
.r8-hero > .e-con-inner,
.r8-cta > .e-con-inner { position: relative; }

/* Cards ------------------------------------------------------------------- */
.r8-card {
  background: var(--r8-surface);
  border: 1px solid var(--r8-border);
  border-radius: var(--r8-radius);
  box-shadow: var(--r8-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.r8-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 53, 87, 0.13);
}

.r8-card-blue  { border-top: 3px solid var(--r8-blue); }
.r8-card-teal  { border-top: 3px solid var(--r8-teal); }
.r8-card-amber { border-top: 3px solid var(--r8-amber); }
.r8-card-coral { border-top: 3px solid var(--r8-coral); }

/* Icon chips -------------------------------------------------------------- */
.r8-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  /* Elementor's own `.elementor-element:where(.e-con-full,.elementor-widget)`
     rule sets align-items/justify-content from a --align-items/--justify-content
     custom property. `:where()` carries zero specificity, but the selector
     still ties with a plain single class here and loads after this file, so
     it wins and resets these to "normal" without !important. */
  align-items: center !important;
  justify-content: center !important;
  background: var(--r8-blue-pale);
  color: var(--r8-blue);
}

.r8-icon svg { width: 24px; height: 24px; }

.r8-icon-teal   { background: var(--r8-teal-pale);   color: var(--r8-teal); }
.r8-icon-amber  { background: var(--r8-amber-pale);  color: var(--r8-amber); }
.r8-icon-coral  { background: var(--r8-coral-pale);  color: var(--r8-coral); }
.r8-icon-violet { background: var(--r8-violet-pale); color: var(--r8-violet); }

/* Numbered process steps -------------------------------------------------- */
.r8-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  display: flex;
  /* Same Elementor override as .r8-icon above. */
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto;
  background: var(--r8-blue-dark);
}

.r8-num-blue  { background: var(--r8-blue); }
.r8-num-teal  { background: var(--r8-teal); }
.r8-num-amber { background: var(--r8-amber); }

/* Constrain the hero lead the same way `.hero p` does. */
.r8-hero-lead p { max-width: 46ch; }

/* Matches `.hero-actions .btn { min-width: 200px }` so the two hero buttons
   keep an equal, deliberate width rather than hugging their label. */
.r8-hero .elementor-button { min-width: 200px; }

/* Elementor lays widgets out as flex items, so the hero illustration's wrapper
   can shrink below the SVG's intrinsic height and clip it. */
/* As a flex item the wrapper freezes its base height from the SVG's intrinsic
   ratio before the final width is known, clipping it by a few pixels; an
   explicit aspect-ratio makes the height resolve from the width directly. */
.r8-hero .elementor-widget-html { flex-shrink: 0; }
.hero-illustration svg { aspect-ratio: 420 / 260; }

/* Feature list inside a service card (Dienstleistungen), matching `.card ul`. */
.r8-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--r8-gray); font-size: 15px; }
.r8-card ul li { margin-bottom: 6px; }