/*
 * Schaad Advisors — Kontakt
 *
 *   Dark split: the entire page is dark studio bg.
 *   Left: eyebrow + headline + body + tags + meta-list.
 *   Right: form on a light "paper tile" floating on the dark surface.
 *   No second white section — page-as-hero, single screen.
 */

:root {
  --gutter: max(0px, calc((100vw - 1440px) / 2));
  /* --rail-pad is the global side-padding token (shared/tokens.css). */
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--color-bg-deep);
  color: var(--color-white);
  overflow-x: hidden;
  min-height: 100vh;
}
a   { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }


/* ─── Entrance animation · same rhythm as home hero ────────── */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Header chrome stays static — only page content reveals. */
.kontakt-split__lead { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.10s backwards; }
.kontakt-tile        { animation: hero-rise 1.1s cubic-bezier(0.23,1,0.32,1) 0.25s backwards; }

@media (prefers-reduced-motion: reduce) {
  .kontakt-split__lead,
  .kontakt-tile { animation: none; }
}


/* ════════════════════════════════════════════════════════════════
 *  HERO · whole page is the hero
 * ─────────────────────────────────────────────────────────────── */

.kontakt-hero {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  color: var(--color-white);
  z-index: 5;
  padding: 0 var(--rail-pad) clamp(80px, 10vw, 160px);
}

.bg-studio {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%,
      rgba(17, 100, 144, 0.22) 0%,
      transparent 65%),
    var(--color-bg-deep);
}
.bg-studio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feComponentTransfer><feFuncR type='linear' slope='3' intercept='-1'/><feFuncG type='linear' slope='3' intercept='-1'/><feFuncB type='linear' slope='3' intercept='-1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.85;
}


/* Header chrome (logo · nav · Kontakt · burger · panel) lives in
   shared/site-header.css — same source on every page. The `aria-
   current="page"` ghost variant of the CTA is also handled there. */


/* ════════════════════════════════════════════════════════════════
 *  SPLIT LAYOUT · 5/12 lead + 7/12 form-tile
 * ─────────────────────────────────────────────────────────────── */

.kontakt-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 6vw, 96px);
  padding-top: 191px;
  align-items: start;
}

/* ─── Lead column ───────────────────────────────────────────── */

.kontakt-split__lead {
  max-width: 520px;
  padding-top: 8px;
}

/* Eyebrow · matches ueber-hero / lesez-hero pattern across the site:
   16px hairline line + 12px alpine-uppercase text + 24px gap to title. */
.kontakt-split__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-alpine);
  margin: 0 0 24px;
}
.kontakt-split__eyebrow-line {
  width: 16px;
  height: 1px;
  background: var(--color-alpine);
  flex-shrink: 0;
}

/* Title · same scale + weight as ueber-hero / lesez-hero hero titles. */
.kontakt-split__title {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--color-white);
  margin: 0 0 28px;
}

.kontakt-split__body {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 24px;
  max-width: 460px;
}

/* Tags · "Persönlich · Diskret · Innert 48 Stunden" — small chips
   on the dark surface; 3px radius (matches .btn-cta and tile). */
.kontakt-split__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 48px;
  padding: 0;
}
.kontakt-split__tag {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(159, 186, 205, 0.28);
  color: var(--color-alpine);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
}

.kontakt-split__meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 28px;
}
.kontakt-split__meta li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.kontakt-split__meta-key {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding-top: 2px;
}
.kontakt-split__meta-val {
  color: rgba(255, 255, 255, 0.9);
}
.kontakt-split__meta-val a {
  color: var(--color-alpine);
  border-bottom: 1px solid rgba(159, 186, 205, 0.4);
  transition: border-color 200ms ease, color 200ms ease;
}
.kontakt-split__meta-val a:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}


/* ─── Form tile · light surface on dark page ────────────────────
   Floating paper tile with subtle shadow. The contrast against
   the dark backdrop is the entire visual move. */

.kontakt-tile {
  background: var(--color-paper);
  color: var(--color-charcoal);
  border-radius: 3px;            /* matches .btn-cta · system-wide radius */
  padding: clamp(32px, 4vw, 56px);
  box-shadow:
    0 30px 60px -20px rgba(7, 38, 52, 0.55),
    0 8px 24px -8px rgba(7, 38, 52, 0.35);
}

.kontakt-tile__head {
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}

.kontakt-tile__title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--color-charcoal);
  margin: 0 0 12px;
}

.kontakt-tile__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-pewter);
  margin: 0;
  max-width: 520px;
}

.kontakt-tile__form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kontakt-tile__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.kontakt-tile__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kontakt-tile__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-pewter);
}

.kontakt-tile__input,
.kontakt-tile__select,
.kontakt-tile__textarea {
  font-family: inherit;
  font-size: 16px;                 /* --text-body */
  line-height: 1.5;
  color: var(--color-charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 10px 0;
  outline: none;
  transition: border-color 200ms ease;
}
.kontakt-tile__input::placeholder,
.kontakt-tile__textarea::placeholder {
  color: rgba(30, 42, 53, 0.32);
}
.kontakt-tile__input:focus,
.kontakt-tile__select:focus,
.kontakt-tile__textarea:focus {
  border-bottom-color: var(--color-atlas);
}

.kontakt-tile__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23116490' stroke-width='1.4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
  padding-right: 28px;
  cursor: pointer;
}

.kontakt-tile__textarea {
  resize: vertical;
  min-height: 120px;
}

/* Submit button uses shared `.btn-cta` (height 48, atlas, 3px radius). */
.kontakt-tile__form .btn-cta { align-self: flex-start; margin-top: 8px; }


/* ════════════════════════════════════════════════════════════════
 *  Responsive
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .kontakt-split {
    grid-template-columns: 1fr;
    padding-top: 160px;
  }
  .kontakt-split__lead { max-width: 100%; }
  .kontakt-split__meta li { grid-template-columns: 110px 1fr; }
}

@media (max-width: 640px) {
  .kontakt-hero { padding-bottom: 80px; }
  .kontakt-tile__row { grid-template-columns: 1fr; gap: 20px; }
  .kontakt-split__meta li { grid-template-columns: 1fr; gap: 4px; }
}