/* ==================================================================
 * kiyewski.de — static WebGo build
 * Self-contained stylesheet: design tokens + base + components.
 * System fonts only (no external font services), per privacy policy.
 * ================================================================== */

:root {
  /* ---- Blue ---------------------------------------------------- */
  --blue-50:  #eef3f8;
  --blue-100: #dbe6f0;
  --blue-200: #b9cde0;
  --blue-300: #8aabc8;
  --blue-500: #2f6493;
  --blue-700: #14507f;
  --blue-800: #0e4675;
  --blue-900: #0b3c69;
  --blue-950: #082c4d;

  /* ---- Neutral gray ramp --------------------------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fafafa;
  --gray-50:  #f6f6f5;
  --gray-100: #efefee;
  --gray-200: #e4e4e1;
  --gray-300: #d4d4d1;
  --gray-400: #b6b6b4;
  --gray-500: #999898;
  --gray-600: #74746f;
  --gray-700: #565650;
  --gray-800: #34342f;
  --gray-900: #1c2b36;

  /* ---- Surfaces ------------------------------------------------ */
  --surface-page:    var(--gray-50);
  --surface-card:    var(--gray-0);
  --surface-sunken:  var(--gray-100);
  --surface-invert:  var(--blue-950);
  --surface-accent:  var(--blue-900);

  /* ---- Text ---------------------------------------------------- */
  --text-strong:     var(--gray-900);
  --text-body:       #2c3a44;
  --text-muted:      var(--gray-600);
  --text-subtle:     var(--gray-500);
  --text-on-dark:    #eef2f5;
  --text-on-dark-muted: #9fb2c2;
  --text-accent:     var(--blue-900);

  /* ---- Lines --------------------------------------------------- */
  --line:            var(--gray-200);
  --line-strong:     var(--gray-300);
  --line-accent:     #cdd9e4;
  --line-on-dark:    rgba(238,242,245,0.14);

  /* ---- Interactive --------------------------------------------- */
  --accent:          var(--blue-900);
  --accent-hover:    var(--blue-800);
  --accent-press:    var(--blue-950);
  --accent-soft:     var(--blue-50);
  --focus-ring:      rgba(11,60,105,0.32);

  /* ---- Fonts (system only) ------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-eyebrow: var(--font-sans);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extra: 800;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 18px;
  --text-md: 20px;
  --text-lg: 24px;
  --text-xl: 29px;
  --text-2xl: 37px;
  --text-3xl: 47px;

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.62;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-eyebrow: 0.14em;

  /* ---- Spacing ------------------------------------------------- */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --container: 1120px;
  --gutter: 24px;
  --gutter-lg: 48px;

  /* ---- Radius & depth ------------------------------------------ */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-full: 999px;
  --depth-card:  0 1px 2px rgba(11,60,105,0.04), 0 18px 40px -18px rgba(11,60,105,0.10);
  --depth-media: 0 2px 6px rgba(11,60,105,0.05), 0 30px 64px -26px rgba(11,60,105,0.15);

  /* ---- Motion -------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  --sticky-top: 80px;
}

/* ---- Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; }
::selection { background: var(--blue-100); color: var(--blue-950); }
#top, #arbeitsweise { scroll-margin-top: var(--sticky-top); }

/* ---- Header / nav ----------------------------------------------- */
.k-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,246,245,0.78);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.k-nav {
  max-width: var(--container); margin: 0 auto;
  padding: 22px var(--gutter-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding var(--dur) var(--ease);
}
.k-header.is-scrolled .k-nav { padding-top: 11px; padding-bottom: 11px; }
.k-brand {
  font-family: var(--font-heading); font-size: 21px; font-weight: 700;
  color: var(--blue-900); text-decoration: none; letter-spacing: -0.025em; white-space: nowrap;
}
.k-navlink {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease); white-space: nowrap;
}
.k-navlink:hover { color: var(--text-strong); }

/* ---- Section heading / body ------------------------------------- */
.k-head {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(31px, 3.7vw, 46px); line-height: 1.06; letter-spacing: -0.03em;
  color: var(--text-strong); margin: 0; text-wrap: balance;
}
.k-body {
  font-family: var(--font-body); font-size: var(--text-md); line-height: 1.72;
  color: var(--text-body); margin: 0;
}

/* ---- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  line-height: 1; letter-spacing: 0.01em;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-lg { padding: 15px 28px; font-size: var(--text-base); }
.btn-primary { background: var(--accent); color: var(--text-on-dark); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--accent); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--accent-soft); border-color: var(--line-accent); }
.btn .arrow { transition: transform var(--dur) var(--ease); font-size: 1.05em; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Photo frame ------------------------------------------------ */
.k-photo {
  position: relative; width: 100%; box-sizing: border-box; overflow: hidden;
  background: var(--gray-100);
  border: 1px solid var(--line-strong);
  box-shadow: var(--depth-media);
}
.k-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- Principle cards -------------------------------------------- */
.k-tile {
  position: relative; box-sizing: border-box;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 3vw, 46px) clamp(28px, 2.6vw, 40px);
  box-shadow: var(--depth-card);
  transition: border-color var(--dur) var(--ease);
}
.k-tile:hover { border-color: var(--line-strong); }
.k-tile h3 {
  font-family: var(--font-heading); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700;
  line-height: 1.1; letter-spacing: -0.025em; color: var(--text-strong); margin: 0 0 17px; text-wrap: balance;
}
.k-tile p {
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.66;
  color: var(--text-body); margin: 0;
}
.k-tile--hi { background: var(--accent-soft); border-color: var(--line-accent); }
.k-tile--hi:hover { border-color: var(--accent); }

/* ---- Closing contact links -------------------------------------- */
.k-quiet {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px; max-width: 100%; white-space: normal;
  transition: border-color var(--dur-fast) var(--ease);
}
.k-quiet:hover { border-bottom-color: var(--accent); }
.k-quiet .ext { font-size: 0.82em; opacity: 0.7; }

/* ---- Footer ----------------------------------------------------- */
.k-foot-link {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm);
  color: var(--text-on-dark-muted); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.k-foot-link:hover { color: var(--text-on-dark); border-bottom-color: rgba(238,242,245,0.45); }
.k-foot-sep { color: var(--text-on-dark-muted); opacity: 0.45; font-size: var(--text-sm); }

/* ================================================================
 * Responsive — mobile (<= 860px)
 * ================================================================ */
@media (max-width: 860px) {
  .k-hero-grid { display: flex !important; flex-direction: column; gap: var(--space-6) !important; }
  .k-hero-left { display: contents !important; }
  .k-hero-copy { order: 1; }
  .k-hero-media { order: 2; }
  .k-hero-actions { order: 3; margin-top: 0 !important; flex-direction: column !important; align-items: stretch; }
  .k-hero-actions a { width: 100%; justify-content: center; box-sizing: border-box; }
  .k-hero-media .k-photo { height: clamp(280px, 42vh, 380px) !important; min-height: 0 !important; }
  .k-2col { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .k-tiles { grid-template-columns: 1fr !important; }
  .k-work-grid { grid-template-columns: 1fr !important; gap: var(--space-7) !important; }
  .k-work-grid .k-work-img { position: static !important; order: -1; }
  .k-work-grid .k-work-steps { order: 0; }
  .k-work-grid .k-work-img .k-photo { height: clamp(260px, 44vh, 380px) !important; }
  .k-mit-card { position: static !important; }
  .k-entw-aside { position: static !important; }
  .k-brk { display: none; }
  .k-nav-right { display: none !important; }
  .k-mit-grid { grid-template-columns: 1fr !important; grid-template-areas: "text" "card" "close" !important; gap: var(--space-7) !important; }
  .k-cta-primary { width: 100%; box-sizing: border-box; justify-content: center; white-space: normal !important; text-align: center; }
  .k-cta-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .k-cta-card { padding: 36px 18px !important; }
  .k-foot-links { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .k-foot-midsep { display: none !important; }
  /* Legal pages */
  .legal-nav { padding: 12px var(--gutter); }
  .legal-navlinks { display: none; }
  .legal-main { padding-left: var(--gutter); padding-right: var(--gutter); }
  .legal-section { grid-template-columns: 1fr; gap: 14px; }
  .legal-footer-inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .legal-footer-links { flex-direction: column; align-items: flex-start; gap: 10px; }
  .legal-footer-midsep { display: none; }
}

/* ================================================================
 * Desktop hero — image left / text right
 * ================================================================ */
@media (min-width: 861px) {
  .k-hero-grid { grid-template-columns: 0.96fr 1.04fr !important; }
  .k-hero-media { order: -1; }
}

/* ================================================================
 * Legal subpages (Impressum / Datenschutz)
 * ================================================================ */
.legal-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 246, 245, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.legal-nav {
  max-width: var(--container); margin: 0 auto;
  padding: 15px var(--gutter-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.legal-brand {
  font-family: var(--font-heading); font-size: 21px; font-weight: 700;
  color: var(--blue-900); text-decoration: none; letter-spacing: -0.025em; white-space: nowrap;
}
.legal-navlinks { display: flex; align-items: center; gap: 26px; }
.legal-navlink {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.legal-navlink:hover { color: var(--text-strong); }
.legal-main {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) var(--gutter-lg) clamp(72px, 9vw, 120px);
}
.legal-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-eyebrow); font-size: 13px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-subtle);
}
.legal-eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); flex: none; }
.legal-h1 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(38px, 6vw, 60px); line-height: 1.04; letter-spacing: -0.035em;
  color: var(--blue-900); margin: clamp(16px, 2vw, 22px) 0 0; text-wrap: balance;
}
.legal-sections { margin-top: clamp(40px, 5vw, 64px); }
.legal-section {
  display: grid; grid-template-columns: 0.34fr 0.66fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid var(--line);
}
.legal-section:first-child { border-top: 1px solid var(--line-strong); }
.legal-section-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--text-strong); margin: 0; text-wrap: balance;
}
.legal-content { display: flex; flex-direction: column; gap: var(--space-5); max-width: 64ch; }
.legal-content p {
  margin: 0; font-family: var(--font-body); font-size: var(--text-base);
  line-height: 1.72; color: var(--text-body);
}
.legal-content a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color var(--dur-fast) var(--ease);
}
.legal-content a:hover { border-bottom-color: var(--accent); }
.legal-content ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.legal-content li {
  position: relative; padding-left: 22px;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-body);
}
.legal-content li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--accent); opacity: 0.7;
}
.legal-address { font-style: normal; line-height: 1.72; font-size: var(--text-base); color: var(--text-body); }
.legal-address .name { color: var(--text-strong); font-weight: 600; }
.legal-field { display: flex; flex-direction: column; gap: 3px; }
.legal-label {
  font-family: var(--font-eyebrow); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle);
}
.legal-field .val { font-size: var(--text-base); color: var(--text-body); }
.legal-vatid {
  font-family: var(--font-body); font-size: var(--text-md); font-weight: 600;
  letter-spacing: 0.01em; color: var(--text-strong);
}
.legal-footer { background: var(--surface-invert); }
.legal-footer-inner {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--gutter-lg) clamp(48px, 6vw, 72px);
}
.legal-footer-top {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 22px 36px;
}
.legal-footer-name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -0.022em;
  color: var(--text-on-dark); white-space: nowrap;
}
.legal-footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.legal-footer-group { display: inline-flex; align-items: center; gap: 18px; }
.legal-foot-link {
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-sm);
  color: var(--text-on-dark-muted); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.legal-foot-link:hover { color: var(--text-on-dark); border-bottom-color: rgba(238, 242, 245, 0.45); }
.legal-foot-sep { color: var(--text-on-dark-muted); opacity: 0.45; font-size: var(--text-sm); }
.legal-footer-meta {
  margin-top: clamp(40px, 5vw, 64px); padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.005em;
  color: var(--text-on-dark-muted);
}