/* ===========================================================================
   Korkenzieher Design System — component styles.
   These rules are emitted at runtime by the design system's JS bundle; for this
   static build they are extracted verbatim so the same class names (.kzbtn,
   .kzsh, .kzseg, .kztag, .kzcheck, .kzbadge, .kzcard, .kzsvc, .kzfield,
   .kzcontact) render identically without loading any JavaScript framework.

   The .kzi (icon wrapper) and .kz-slot (image placeholder) helpers at the end
   are specific to this static implementation.
   =========================================================================== */

/* ---- Button ------------------------------------------------------------- */
.kzbtn{
  --_bg: var(--navy-800); --_fg:#fff; --_bd: transparent; --_bgh: var(--navy-700);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; line-height:1; white-space:nowrap; cursor:pointer;
  border:var(--border-thin) solid var(--_bd); border-radius:var(--radius-md);
  background:var(--_bg); color:var(--_fg);
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  text-decoration:none;
}
.kzbtn:hover{ background:var(--_bgh); text-decoration:none; }
.kzbtn:active{ transform:scale(var(--press-scale)); }
.kzbtn:focus-visible{ outline:none; box-shadow:var(--ring-focus); }
.kzbtn[disabled]{ opacity:.45; pointer-events:none; }
.kzbtn--sm{ height:var(--control-sm); padding:0 var(--space-4); font-size:var(--text-xs); }
.kzbtn--md{ height:var(--control-md); padding:0 var(--space-5); font-size:var(--text-sm); }
.kzbtn--lg{ height:var(--control-lg); padding:0 var(--space-6); font-size:var(--text-base); }
.kzbtn--block{ width:100%; }
.kzbtn--accent{ --_bg:var(--azure-600); --_bgh:var(--azure-700); }
.kzbtn--accent:focus-visible{ box-shadow:var(--glow-azure); }
.kzbtn--gold{ --_bg:var(--gold-600); --_bgh:var(--gold-700); }
.kzbtn--outline{ --_bg:transparent; --_fg:var(--navy-800); --_bd:var(--navy-800); --_bgh:var(--navy-50); }
.kzbtn--ghost{ --_bg:transparent; --_fg:var(--navy-800); --_bgh:var(--navy-50); }
.kzbtn--onfield{ --_bg:rgba(255,255,255,.06); --_fg:var(--text-on-field); --_bd:var(--border-field); --_bgh:rgba(255,255,255,.12); }
.kzbtn--onfield:hover{ box-shadow:var(--inset-gold-line); }

/* ---- SectionHeading ----------------------------------------------------- */
.kzsh{ display:flex; flex-direction:column; }
.kzsh--center{ align-items:center; text-align:center; }
.kzsh__eyebrow{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:var(--text-sm); color:var(--gold-600); margin:0 0 var(--space-3);
}
.kzsh__title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:-.01em; line-height:1.02; color:var(--text-strong);
  font-size:var(--text-2xl); margin:0;
}
.kzsh__rule{ width:64px; height:3px; border:0; border-radius:999px; margin:var(--space-4) 0 0;
  background:linear-gradient(90deg,var(--gold-400),var(--gold-600)); }
.kzsh--center .kzsh__rule{ margin-left:auto; margin-right:auto; }
.kzsh__sub{ margin:var(--space-4) 0 0; color:var(--text-muted); font-size:var(--text-md); max-width:60ch; line-height:1.6; }
.kzsh--center .kzsh__sub{ margin-left:auto; margin-right:auto; }
.kzsh--onfield .kzsh__title{ color:var(--text-on-field); }
.kzsh--onfield .kzsh__eyebrow{ color:var(--gold-400); }
.kzsh--onfield .kzsh__sub{ color:var(--text-on-field-muted); }

/* ---- IconBadge ---------------------------------------------------------- */
.kzbadge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-circle); position:relative; flex:none;
  background:var(--ink-800); color:var(--gold-400);
  box-shadow: inset 0 0 0 2px var(--gold-600);
}
.kzbadge--light{ background:var(--navy-50); color:var(--navy-700); box-shadow: inset 0 0 0 2px var(--gold-400); }
.kzbadge--solid{ background:var(--navy-800); color:#fff; box-shadow: inset 0 0 0 2px var(--gold-500); }
.kzbadge--azure{ background:var(--azure-600); color:#fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }

/* ---- Card --------------------------------------------------------------- */
.kzcard{ background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  overflow:hidden; }
.kzcard--pad{ padding:var(--space-6); }
.kzcard--hover:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.kzcard--gold{ border-color:var(--gold-200); box-shadow:var(--shadow-sm), inset 0 3px 0 var(--gold-400); }
.kzcard--field{ background:var(--field-raised); border-color:transparent;
  box-shadow:var(--inset-gold-line), var(--shadow-field); color:var(--text-on-field); }

/* ---- Tag ---------------------------------------------------------------- */
.kztag{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-body);
  font-weight:600; font-size:var(--text-xs); letter-spacing:.02em; line-height:1;
  padding:.42em .8em; border-radius:var(--radius-pill); white-space:nowrap;
  background:var(--navy-50); color:var(--navy-700); border:1px solid var(--navy-100); }
.kztag--gold{ background:var(--gold-50); color:var(--gold-800); border-color:var(--gold-200); }
.kztag--azure{ background:var(--azure-100); color:var(--azure-800); border-color:var(--azure-200); }
.kztag--success{ background:var(--success-100); color:var(--success-700); border-color:transparent; }
.kztag--solid{ background:var(--navy-800); color:#fff; border-color:transparent; }
.kztag--field{ background:rgba(255,255,255,.06); color:var(--gold-300); border-color:var(--border-field); }

/* ---- Input -------------------------------------------------------------- */
.kzfield{ display:flex; flex-direction:column; gap:var(--space-2); font-family:var(--font-body); }
.kzfield__label{ font-weight:600; font-size:var(--text-sm); color:var(--text-strong); letter-spacing:.01em; }
.kzfield__label .req{ color:var(--danger-600); margin-left:2px; }
.kzfield__input{ height:var(--control-md); padding:0 var(--field-pad-x); width:100%;
  font-family:var(--font-body); font-size:var(--text-base); color:var(--text-strong);
  background:var(--white); border:1.5px solid var(--border-default); border-radius:var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
textarea.kzfield__input{ height:auto; padding:var(--space-3) var(--field-pad-x); line-height:1.5; resize:vertical; }
.kzfield__input::placeholder{ color:var(--text-subtle); }
.kzfield__input:hover{ border-color:var(--gray-300); }
.kzfield__input:focus{ outline:none; border-color:var(--azure-500); box-shadow:var(--ring-focus); }

/* ---- ChecklistItem ------------------------------------------------------ */
.kzcheck{ display:flex; align-items:flex-start; gap:.6em; font-family:var(--font-body);
  font-size:var(--text-sm); line-height:1.45; color:var(--text-body); }
.kzcheck__mark{ flex:none; margin-top:.05em; display:inline-flex; color:var(--success-600); }
.kzcheck--gold .kzcheck__mark{ color:var(--gold-600); }
.kzcheck--field{ color:var(--text-on-field-muted); }
.kzcheck--field .kzcheck__mark{ color:var(--gold-400); }

/* ---- ContactBar --------------------------------------------------------- */
.kzcontact{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--space-6); font-family:var(--font-body);
  padding:var(--space-6) var(--space-7);
  background:var(--ink-950); color:var(--text-on-field);
  border-top:2px solid var(--gold-600); border-bottom:2px solid var(--gold-600); }
.kzcontact__rows{ display:flex; flex-direction:column; gap:var(--space-3); }
.kzcontact__row{ display:flex; align-items:center; gap:var(--space-3); }
.kzcontact__ring{ flex:none; width:42px; height:42px; border-radius:var(--radius-circle);
  display:inline-flex; align-items:center; justify-content:center; color:var(--gold-400);
  box-shadow: inset 0 0 0 2px var(--gold-600); }
.kzcontact__phone{ font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl);
  letter-spacing:.01em; color:#fff; line-height:1; text-decoration:none; }
.kzcontact__mail{ font-size:var(--text-md); color:var(--text-on-field); text-decoration:none; }
.kzcontact__mail:hover, .kzcontact__phone:hover{ color:var(--azure-400); }
.kzcontact__script{ font-family:var(--font-script); color:var(--gold-400); font-size:var(--text-2xl);
  line-height:1.15; text-align:right; }

/* ---- SegmentCard -------------------------------------------------------- */
.kzseg{ display:flex; align-items:flex-start; gap:var(--space-4); font-family:var(--font-body); }
.kzseg__icon{ flex:none; color:var(--gold-600); margin-top:2px; }
.kzseg__label{ font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.1em; font-size:var(--text-sm); color:var(--gold-600); margin:0 0 var(--space-1); }
.kzseg__desc{ margin:0; color:var(--text-body); font-size:var(--text-sm); line-height:1.5; max-width:30ch; }
.kzseg--field .kzseg__icon{ color:var(--gold-400); }
.kzseg--field .kzseg__label{ color:var(--gold-400); }
.kzseg--field .kzseg__desc{ color:var(--text-on-field-muted); }

/* ---- ServiceCard -------------------------------------------------------- */
.kzsvc{ display:flex; flex-direction:column; gap:var(--space-4); }
.kzsvc__title{ font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; line-height:1.1; font-size:var(--text-lg); margin:0; color:var(--text-strong); }
.kzsvc__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.kzsvc--field .kzsvc__title{ color:var(--text-on-field); }
.kzsvc__head{ display:flex; flex-direction:column; gap:var(--space-4); }
.kzsvc--row .kzsvc__head{ flex-direction:row; align-items:center; gap:var(--space-4); }

/* ===========================================================================
   Static-build helpers
   =========================================================================== */

/* Icon wrapper — mirrors the design system's <Icon> span. Lucide hydrates the
   inner <i data-lucide>; kz.js applies the data-size / data-stroke after. */
.kzi{ display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.kzi svg{ display:block; }

/* Image placeholder — replaces the prototype's drag-and-drop <image-slot>.
   A labelled, gold-bordered drop target the client can swap for a real photo. */
.kz-slot{ position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; width:100%; aspect-ratio:4/3;
  border:2px dashed var(--gold-500); border-radius:14px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(14,128,212,.06), transparent 60%),
    var(--gray-75);
  color:var(--gold-700); box-shadow:var(--shadow-md); overflow:hidden; }
.kz-slot__label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--text-xs); color:var(--text-muted); padding:0 var(--space-5); max-width:32ch; }
.kz-slot--circle{ aspect-ratio:1/1; border-radius:50%; box-shadow:var(--shadow-sm); }
.kz-slot--flat{ box-shadow:var(--shadow-sm), inset 0 0 0 1px rgba(201,168,95,.3); }