/* Landing home pages (index.html German, index.en.html English).
   One stylesheet for both; served from this host only (CSP style-src 'self').
   Fonts are self-hosted under /fonts/ (OFL); nothing loads from a third party. */

@font-face {
  font-family: "Jost"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 400;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

/* Brand palette (web/src/index.css carries the same base tokens).
   Coral is the action colour only: the waiting-list buttons and the logo.
   Accent text on light uses coral-deep, never coral (2.3:1 on white). */
:root {
  --teal: #0F4F45; --coral: #FF8A6B; --coral-ink: #23100A; --coral-deep: #8A3A24;
  --mist: #EEF1EC; --white: #FFFFFF; --ink-muted-light: #4B544F; --ink-muted-teal: #9CBFB6;
  --ground: #06211D; --raise: #0D3B34; --line-dark: #1D5E53;

  --text-primary: var(--teal);
  --text-secondary: var(--ink-muted-light);
  --text-accent: var(--coral-deep);
  --surface-page: var(--white);
  --surface-band: var(--mist);          /* tinted bands: team, closing CTA */
  --surface-card: var(--white);
  --surface-vig: var(--mist);           /* vignette panel inside a card */
  --surface-paper: var(--white);        /* sheet inside a vignette panel */
  --surface-strong: var(--teal);        /* field-app band, footer */
  --line: #D3DBD6;                      /* decorative card borders */
  --line-strong: var(--teal);           /* outlines inside vignettes */
  --bar-fill: var(--teal);
  --bar-track: #D3DBD6;
  --action-bg: var(--coral); --action-fg: var(--coral-ink);
  --action-bg-hover: var(--teal); --action-fg-hover: var(--white);
  --focus-ring: var(--teal);
  --field-bg: var(--white);
  --field-border: var(--ink-muted-light);  /* 7.8:1 on white, 6.9:1 on mist */
  --field-error: var(--coral-deep);        /* 7.8:1 on white, 6.8:1 on mist */
  --field-focus: var(--teal);
  --font-ui: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: var(--white);
    --text-secondary: var(--ink-muted-teal);
    --text-accent: var(--coral);
    --surface-page: var(--ground);
    --surface-band: var(--raise);
    --surface-card: var(--ground);
    --surface-vig: var(--raise);
    --surface-paper: var(--ground);
    --surface-strong: var(--teal);
    --line: var(--line-dark);
    --line-strong: var(--ink-muted-teal);
    --bar-fill: var(--ink-muted-teal);
    --bar-track: var(--line-dark);
    --action-bg-hover: var(--white); --action-fg-hover: var(--teal);
    --focus-ring: var(--coral);
    --field-bg: var(--ground);
    --field-border: var(--ink-muted-teal); /* 8.5:1 on ground, 6.2:1 on raise */
    --field-error: var(--coral);           /* 7.3:1 on ground, 5.4:1 on raise */
    --field-focus: var(--white);           /* not coral: coral marks an error here */
    color-scheme: dark;
  }
}

* { margin: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--surface-page); color: var(--text-primary);
  font-family: var(--font-ui); font-weight: 400; font-size: 17px;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; }
img, svg { display: block; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Layout: content column 1080, 16px gutter on a phone. */
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.section { padding: 88px 0; }
.band { background: var(--surface-band); }
.strong { background: var(--surface-strong); color: var(--white); --focus-ring: var(--white); }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 2;
  background: var(--teal); color: var(--white); padding: 10px 16px; border-radius: 6px;
  text-decoration: none; --focus-ring: var(--coral);
}
.skip:focus { top: 12px; }

/* Header: logo, language switch, log in. The waiting-list button lives in the
   hero right below, so the first screen shows one coral button only. */
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap; padding: 20px 0;
}
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 32px; width: auto; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand .logo-light { display: none; }
  .brand .logo-dark { display: block; }
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-weight: 500; font-size: 16px; text-decoration: none; border-radius: 6px;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav .login {
  border: 1px solid var(--line-strong); min-height: 40px; padding: 0 14px; margin-left: 4px;
}
.site-nav .login:hover { background: var(--teal); color: var(--white); text-decoration: none; }
@media (prefers-color-scheme: dark) {
  .site-nav .login:hover { background: var(--white); color: var(--teal); }
}

/* Type */
h1 {
  font-size: clamp(34px, 6vw, 60px); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.02em; margin-bottom: 24px;
}
h1 .h1-line2 { display: block; font-weight: 400; }
h2 {
  font-size: clamp(28px, 4vw, 40px); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.015em; margin-bottom: 16px; max-width: 24ch;
}
h3 { font-size: 21px; font-weight: 600; line-height: 1.25; margin-bottom: 10px; }
p + p { margin-top: 12px; }
.lead { color: var(--text-secondary); font-size: 19px; max-width: 60ch; }
.muted { color: var(--text-secondary); }
.strong .muted, .strong .lead { color: var(--ink-muted-teal); }
.section-head { margin-bottom: 40px; }

/* Primary action (coral). Same look in hero and closing band. */
.cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px;
  background: var(--action-bg); color: var(--action-fg); border-radius: 6px;
  text-decoration: none; font-weight: 500; font-size: 18px;
  transition: background-color 120ms ease, color 120ms ease;
}
.cta:hover { background: var(--action-bg-hover); color: var(--action-fg-hover); }
button.cta { border: 0; font-family: inherit; line-height: 1.2; cursor: pointer; }
button.cta:disabled { opacity: 0.65; cursor: progress; }
button.cta:disabled:hover { background: var(--action-bg); color: var(--action-fg); }
.cta-note { color: var(--text-secondary); font-size: 16px; max-width: 56ch; margin-top: 16px; }

/* Hero */
.hero { padding: 56px 0 88px; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
}
.hero .lead { margin-bottom: 32px; }

/* Vignettes: illustrations of the app with sample data. aria-hidden in the
   markup; the text next to them carries the meaning. No coral in here, so
   nothing in an illustration looks like a button to press. */
.vig {
  background: var(--surface-vig); border-radius: 8px; padding: 16px;
  font-size: 15px; line-height: 1.4; color: var(--text-primary);
}
.paper {
  background: var(--surface-paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 16px;
}
.paper + .paper { margin-top: 8px; }
.vig-label { font-size: 13px; color: var(--text-secondary); }
.vig-title { font-weight: 600; font-size: 16px; }
.vig-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; }
.vig-row + .vig-row { margin-top: 6px; }
.vig .num { font-size: 14px; }
.tag {
  display: inline-block; font-size: 12px; line-height: 1; padding: 4px 6px;
  border: 1px solid var(--line-strong); border-radius: 4px; white-space: nowrap;
}
.fake-btn {
  display: inline-block; font-size: 14px; font-weight: 500; padding: 7px 12px;
  border: 1px solid var(--line-strong); border-radius: 6px;
}
.fake-btn.filled { background: var(--teal); color: var(--white); border-color: var(--teal); }
@media (prefers-color-scheme: dark) {
  .fake-btn.filled { background: var(--white); color: var(--teal); border-color: var(--white); }
}
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Hero vignette: one project, step by step */
.steps { list-style: none; padding: 0; margin: 12px 0 0; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .step-name { flex: 1; }
.dot {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-strong); display: grid; place-items: center;
}
.dot.done { background: var(--bar-fill); border-color: var(--bar-fill); }
.dot.done svg { width: 10px; height: 10px; stroke: var(--surface-paper); }
.dot.now::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bar-fill); }
.steps .later { color: var(--text-secondary); }

/* Team band: two columns */
.duo { display: grid; gap: 24px; }
@media (min-width: 760px) { .duo { grid-template-columns: 1fr 1fr; gap: 32px; } }
.duo-item { background: var(--surface-card); border: 1px solid var(--line); border-radius: 8px; padding: 28px; }

/* Feature cards */
.features { display: grid; gap: 24px; }
@media (min-width: 760px) { .features { grid-template-columns: 1fr 1fr; } }
.feature {
  display: flex; flex-direction: column;
  background: var(--surface-card); border: 1px solid var(--line); border-radius: 8px; padding: 28px;
}
.feature > p { color: var(--text-secondary); }
.feature .vig { margin-top: auto; }
.feature > p:last-of-type { margin-bottom: 24px; }

/* Wide feature card (missed calls): spans both columns, text beside the
   vignette on a wide screen, so seven cards still fill the grid. */
@media (min-width: 760px) { .feature.wide { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .feature.wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .feature.wide .vig { margin-top: 0; }
}
.feature.wide p { color: var(--text-secondary); }
.feature.wide .feature-scope { margin-bottom: 24px; font-weight: 500; color: var(--text-primary); }
@media (min-width: 900px) { .feature.wide .feature-scope { margin-bottom: 0; } }

/* Missed call to SMS */
.call-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.call-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-strong); display: grid; place-items: center;
}
.call-icon svg { width: 16px; height: 16px; stroke: currentColor; }
.call-text { flex: 1 1 150px; display: flex; flex-direction: column; min-width: 0; }
.call-text .vig-label { white-space: nowrap; }
.call-row .tag { margin-left: auto; }
.sms {
  margin: 12px 0 0 24px; background: var(--surface-paper); border: 1px solid var(--line-strong);
  border-radius: 14px 14px 14px 4px; padding: 12px 14px;
}
.sms p { margin-top: 4px; }
.sms-link { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Quote line */
.line-pos { display: flex; gap: 10px; align-items: baseline; }
.line-calc { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 8px; }
.line-calc .total { margin-left: auto; font-weight: 600; }

/* Cost bars */
.bar { height: 10px; border-radius: 5px; background: var(--bar-track); overflow: hidden; margin: 6px 0 12px; }
.bar span { display: block; height: 100%; background: var(--bar-fill); border-radius: 5px; }
.bar .w100 { width: 100%; }
.bar .w61 { width: 61%; }
.split { border-top: 1px solid var(--line); padding-top: 8px; }

/* Week board */
.week { display: grid; grid-template-columns: minmax(56px, 1.3fr) repeat(5, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.week > span { padding: 6px 2px; text-align: center; border-radius: 4px; overflow: hidden; white-space: nowrap; }
.week .h { color: var(--text-secondary); padding: 2px; }
.week .who { text-align: left; padding-left: 0; font-weight: 500; }
.week .job { background: var(--surface-paper); border: 1px solid var(--line); }
.week .off {
  border: 1px dashed var(--line-strong); color: var(--text-secondary);
}

/* Search */
.search-box {
  display: flex; align-items: center; gap: 8px; background: var(--surface-paper);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 12px;
}
.search-box svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }
.results { list-style: none; padding: 0; margin: 8px 0 0; }
.results li { display: flex; gap: 10px; align-items: baseline; padding: 8px 4px; border-top: 1px solid var(--line); }
.results li:first-child { border-top: 0; }
.results .tag { flex: none; }

/* Field app band */
.field .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .field .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 64px; } }
.field p { color: var(--ink-muted-teal); max-width: 56ch; }
.field p.lead { font-size: 19px; color: var(--white); }
.field p.soon {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  padding: 8px 14px; border: 1px solid var(--ink-muted-teal); border-radius: 999px;
  color: var(--white); font-size: 15px; font-weight: 500; line-height: 1.35;
}
.soon-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted-teal); }
.phone {
  width: min(300px, 100%); margin: 0 auto; background: var(--ground);
  border: 2px solid var(--line-dark); border-radius: 28px; padding: 14px; color: var(--white);
}
.phone-screen { background: var(--white); color: var(--teal); border-radius: 18px; padding: 16px; font-size: 15px; }
.phone-bar { height: 4px; width: 56px; margin: 0 auto 14px; border-radius: 2px; background: var(--line-dark); }
.phone .vig-label { color: var(--ink-muted-light); }
.phone .reading {
  border: 2px solid var(--teal); border-radius: 8px; padding: 10px 12px; margin: 12px 0 8px;
}
.phone .reading .num { font-size: 24px; }
.phone .fake-btn.filled { background: var(--teal); color: var(--white); border-color: var(--teal); }
.phone .fake-btn { border-color: var(--teal); }
.phone .formula { border-top: 1px solid #D3DBD6; margin-top: 12px; padding-top: 10px; }

/* Trust band */
.trust { display: grid; gap: 32px; }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(3, 1fr); } }
.trust p { color: var(--text-secondary); }
.trust-more { margin-top: 32px; color: var(--text-secondary); max-width: 72ch; }
.trust-more a, .closing a.inline { color: var(--text-primary); text-underline-offset: 3px; }

/* Closing band */
.closing .lead { margin-bottom: 28px; }
.closing .langs { margin-top: 28px; color: var(--text-secondary); font-size: 16px; max-width: 60ch; }

/* Footer */
.site-footer { padding: 40px 0; font-size: 15px; }
.site-footer .wrap { display: flex; gap: 4px 24px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--white); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer .copy { color: var(--ink-muted-teal); margin-right: auto; }

/* Forms: waiting list (home pages) and contact (kontakt.html, contact.html).
   Label above the field, 48px fields, the coral .cta as the submit button.
   landing.js writes the outcome into .pt-form-status and sets
   data-state="ok" or "error" on it; a field with aria-invalid="true" gets the
   error outline. */
.pt-form { max-width: 720px; }
.pt-fields { display: grid; gap: 16px 20px; }
@media (min-width: 760px) { .pt-fields { grid-template-columns: 1fr 1fr; } .pt-field.full { grid-column: 1 / -1; } }
.pt-field label { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; color: var(--text-primary); }
.pt-optional { font-weight: 400; color: var(--text-secondary); }
.pt-field input, .pt-field textarea, .pt-field select {
  display: block; width: 100%; min-height: 48px; padding: 10px 14px;
  font: inherit; font-size: 17px; line-height: 1.4; color: var(--text-primary);
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 6px;
}
.pt-field textarea { min-height: 168px; resize: vertical; }
.pt-field input:focus-visible, .pt-field textarea:focus-visible, .pt-field select:focus-visible {
  outline: 2px solid var(--field-focus); outline-offset: 1px; border-color: var(--field-focus);
}
.pt-field [aria-invalid="true"] { border-color: var(--field-error); box-shadow: inset 0 0 0 1px var(--field-error); }
.pt-field-error { margin-top: 6px; font-size: 15px; color: var(--field-error); }
.pt-form .cta { margin-top: 24px; }
.pt-form-status { margin-top: 16px; min-height: 1.55em; font-weight: 500; color: var(--text-primary); max-width: 60ch; }
.pt-form-status:empty { margin-top: 0; min-height: 0; }
.pt-form-status[data-state="error"] { color: var(--field-error); }
.pt-form-alt { margin-top: 24px; color: var(--text-secondary); font-size: 16px; max-width: 60ch; }
.pt-form-alt a { color: var(--text-primary); text-underline-offset: 3px; }
/* Honeypot: off screen for people, aria-hidden for screen readers, and the
   input carries tabindex="-1" so the keyboard never lands on it. */
.pt-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

@media (max-width: 700px) {
  .section { padding: 56px 0; }
  .hero { padding: 24px 0 56px; }
  .lead, .field p.lead { font-size: 17px; }
  .feature, .duo-item { padding: 20px; }
  .vig { padding: 12px; }
  .week { font-size: 11px; gap: 3px; grid-template-columns: minmax(44px, 1fr) repeat(5, minmax(0, 1fr)); }
  .week > span { padding: 6px 0; }
  .site-footer .copy { flex-basis: 100%; }
  .paper { padding: 12px; }
  .section-head { margin-bottom: 28px; }
}
@media (max-width: 420px) {
  .site-header .wrap { gap: 8px; }
  .brand img { height: 22px; }
  .site-nav { gap: 2px; }
  .site-nav a { padding: 0 6px; font-size: 15px; }
  .site-nav .login { padding: 0 10px; margin-left: 2px; }
}

/* Phone screen follows the theme so it does not glare in dark mode. */
@media (prefers-color-scheme: dark) {
  .phone-screen { background: var(--raise); color: var(--white); }
  .phone .vig-label { color: var(--ink-muted-teal); }
  .phone .reading { border-color: var(--ink-muted-teal); }
  .phone .fake-btn { border-color: var(--ink-muted-teal); }
  .phone .fake-btn.filled { background: var(--white); color: var(--teal); border-color: var(--white); }
  .phone .formula { border-top-color: var(--line-dark); }
}