/* Salvara — the public site.
 *
 * Static files served directly by Caddy. No framework, no build step, no
 * JavaScript, and nothing fetched from anywhere else: no font service, no
 * analytics, no tag manager. A page about keeping other people's data safe
 * should not hand the address of everyone who reads it to a third party — and
 * a page with nothing to run is a page with nothing to patch.
 *
 * The colours are taken from the logo: navy, teal, mint. The pictures are
 * screenshots of the actual console rather than stock photography, and they are
 * dark — which is what the console is. On a light page they read as what they
 * are: windows of a program, not decoration.
 */

:root {
  --bg: #ffffff;
  --surface: #f5f8fb;
  --surface-2: #eaf1f7;
  --line: #d9e4ee;
  --line-soft: #e8eff5;

  /* Aus dem Logo. */
  --navy: #1a3a53;
  --teal: #2aa5b0;
  --mint: #5cc8b4;

  --text: #16324a;
  --dim: #4d647d;
  --faint: #7b91a6;

  --accent: var(--teal);
  --on-dark: #ffffff;
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.62 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* --- header --------------------------------------------------------------- */

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
header.top .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 70px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand img {
  display: block;
  height: 34px;
  width: auto;
}

header.top nav { display: flex; align-items: center; gap: 22px; margin-left: auto; flex-wrap: wrap; }
header.top nav a { color: var(--dim); font-size: 15px; }
header.top nav a:hover { color: var(--navy); text-decoration: none; }
header.top nav a.cta {
  color: var(--on-dark);
  background: var(--navy);
  padding: 9px 18px;
  border-radius: 7px;
  font-weight: 600;
}
header.top nav a.cta:hover { background: #22496a; }

/* --- the split layout ----------------------------------------------------- */

/* Text on one side, a picture on the other, rather than everything stacked in
 * the middle. A centred column with a headline, a sentence and four identical
 * cards is the shape every page generator produces; an asymmetric one has to be
 * decided. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 52px;
  align-items: center;
}
.split.reverse .shot { order: -1; }
.copy { min-width: 0; }

/* --- hero ----------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; padding: 76px 0 72px; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 16px;
}

.hero h1 {
  font-size: clamp(31px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -1.1px;
  font-weight: 650;
  color: var(--navy);
  margin: 0 0 20px;
}

p.lead { font-size: 18.5px; color: var(--dim); margin: 0 0 30px; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }

.button {
  display: inline-block;
  background: var(--navy);
  color: var(--on-dark);
  font-weight: 640;
  padding: 13px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.button:hover { background: #22496a; text-decoration: none; }
.button.quiet {
  background: #fff;
  color: var(--navy);
  border-color: var(--line);
}
.button.quiet:hover { background: var(--surface); border-color: #c3d4e2; }

/* --- screenshots ---------------------------------------------------------- */

/* The console preview below is a light rendering of the real console — same
 * layout, same figures in spirit, built in HTML so it is crisp at any size and
 * matches the palette. It is an illustration, not a literal screenshot: the real
 * console is dark today, and until it is lightened a dark screenshot on a white
 * page clashes more than a faithful light drawing of it does.
 *
 * It scales as a whole: the root sets a font size with clamp() and everything
 * inside is in em, so the whole panel shrinks on a phone without reflowing into
 * nonsense.
 */
.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 4px rgba(26, 58, 83, .05), 0 20px 46px rgba(26, 58, 83, .13);
  transition: transform .35s ease, box-shadow .35s ease;
}
.shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(26, 58, 83, .07), 0 30px 64px rgba(26, 58, 83, .18);
}
.chrome {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #c6d4e0; }
.chrome span { margin-left: 8px; font-size: 12px; color: var(--faint); }

.mock {
  font-size: clamp(9px, 1.35vw, 13px);
  display: flex;
  min-height: 17em;
  background: #fff;
  color: var(--text);
}

/* sidebar */
.mock-side {
  width: 8.5em;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1em 0.9em;
  display: flex;
  flex-direction: column;
  gap: 0.55em;
}
.mock-brand { font-weight: 700; letter-spacing: 1.2px; color: var(--navy); font-size: 1.05em; margin-bottom: 0.6em; }
.mock-side span { color: var(--dim); }
.mock-side span.on { color: var(--navy); font-weight: 650; }

/* main */
.mock-main { flex: 1; padding: 1.1em 1.2em; min-width: 0; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; margin-bottom: 1em; }
.mock-kpis .k { border: 1px solid var(--line); border-radius: 0.5em; padding: 0.6em 0.7em; }
.mock-kpis b { display: block; color: var(--navy); font-size: 1.35em; font-weight: 650; line-height: 1.1; }
.mock-kpis i { font-style: normal; color: var(--faint); font-size: 0.85em; }
.mock-kpis .k.warn b { color: #c47d12; }

.mock-rows { border: 1px solid var(--line); border-radius: 0.5em; overflow: hidden; }
.mock-rows .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr 1fr;
  gap: 0.5em;
  align-items: center;
  padding: 0.6em 0.8em;
  border-top: 1px solid var(--line-soft);
}
.mock-rows .row:first-child { border-top: none; }
.mock-rows .row.head { background: var(--surface-2); color: var(--faint); font-size: 0.82em; text-transform: uppercase; letter-spacing: .5px; }
.mock-rows .row span:first-child { color: var(--navy); font-weight: 600; }
.mock-rows em { font-style: normal; font-size: 0.86em; padding: 0.1em 0.6em; border-radius: 1em; }
.mock em.ok  { background: #e4f5ec; color: #1d7a4d; }
.mock em.bad { background: #fbe6e3; color: #c0392b; }
.mock .bad { color: #c0392b; }

.strip { display: inline-flex; gap: 2px; }
.strip i { width: 0.4em; height: 1.3em; border-radius: 1px; background: #d6e1ea; }
.strip i.ok { background: var(--mint); }
.strip i.warn { background: #e9b949; }
.strip i.bad { background: #e4604c; }
.strip i.none { background: #e4ebf1; }

/* running-backup panel */
.mock-run { flex-direction: column; padding: 1.3em 1.4em; gap: 0.5em; }
.run-head { display: flex; align-items: center; gap: 0.7em; }
.run-head strong { color: var(--navy); font-size: 1.15em; }
.run-src { color: var(--faint); font-size: 0.9em; }
.run-label { color: var(--faint); text-transform: uppercase; letter-spacing: .6px; font-size: 0.8em; margin-top: 0.6em; }
.run-bar { height: 0.7em; border-radius: 1em; background: var(--surface-2); overflow: hidden; }
.run-bar span { display: block; height: 100%; border-radius: 1em; background: linear-gradient(90deg, var(--teal), var(--mint)); }
.run-pct { color: var(--dim); font-size: 0.9em; }
.run-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; margin-top: 0.7em; }
.run-stats b { display: block; color: var(--navy); font-weight: 650; }
.run-stats i { font-style: normal; color: var(--faint); font-size: 0.85em; }
.run-path { margin-top: auto; color: var(--faint); font-size: 0.85em; font-family: "Cascadia Mono", Consolas, monospace; }

/* --- fact strip ----------------------------------------------------------- */

.facts {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.facts .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px 38px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.facts span { font-size: 14.5px; color: var(--dim); }
.facts b {
  display: block;
  color: var(--navy);
  font-weight: 650;
  font-size: 15.5px;
  margin-bottom: 2px;
}

/* --- sections ------------------------------------------------------------- */

section { padding: 82px 0; }
section.plain { background: var(--surface); border-top: 1px solid var(--line); }

h2 {
  font-size: clamp(23px, 2.8vw, 30px);
  letter-spacing: -.6px;
  font-weight: 650;
  color: var(--navy);
  margin: 0 0 18px;
}
.copy p { color: var(--dim); margin: 0 0 16px; }
.copy p:last-child { margin-bottom: 0; }

.cols {
  display: grid;
  /* Sechs gleich schwere Kacheln statt fuenf frei stehender Absaetze: fuenf in
   * zwei Spalten lassen einen allein in der letzten Reihe stehen, und
   * unterschiedlich lange Texte franst die Spalten aus. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 22px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.tile:hover {
  border-color: var(--mint);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(26, 58, 83, .08);
}
.tile h3 { font-size: 17px; font-weight: 650; color: var(--navy); margin: 0 0 8px; }
.tile p { color: var(--dim); font-size: 15.5px; margin: 0; }

/* --- steps ---------------------------------------------------------------- */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 26px;
}
.steps li { counter-increment: step; padding-top: 16px; border-top: 3px solid var(--mint); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: var(--teal);
  margin-bottom: 9px;
}
.steps strong { display: block; font-size: 17.5px; font-weight: 650; color: var(--navy); margin-bottom: 4px; }
.steps span { color: var(--dim); font-size: 15.5px; }

/* --- closing -------------------------------------------------------------- */

.closing {
  background: linear-gradient(160deg, #1a3a53, #15516a 55%, #1d7183);
  color: #eaf4f8;
  border: none;
}
.closing h2 { color: #fff; max-width: 20ch; }
.closing .lead { color: #c3dde6; max-width: 56ch; }
.closing .button { background: #fff; color: var(--navy); }
.closing .button:hover { background: #e9f4f7; }
.closing .button.quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.closing .button.quiet:hover { background: rgba(255,255,255,.1); }
.small { font-size: 14.5px; color: var(--faint); max-width: 56ch; margin-top: 20px; }
/* Heller als der uebrige Hinweistext: auf dem dunklen Verlauf war der
 * gewaehlte Ton zwar lesbar, aber nur knapp. */
.closing .small { color: #bcd8e4; }

/* --- footer --------------------------------------------------------------- */

footer { padding: 30px 0 48px; color: var(--faint); font-size: 14.5px; }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
footer a { color: var(--dim); }

/* --- Bewegung ------------------------------------------------------------- */

/* Ohne JavaScript, weil die Inhaltsrichtlinie keines zulaesst und die Seite
 * auch keines braucht.
 *
 * Alles hier ist Zugabe: ohne Unterstuetzung steht die Seite genauso da, nur
 * ohne Bewegung. Deshalb sind die Einblendungen in @supports gekapselt --
 * waeren sie es nicht, bliebe in einem Browser ohne scroll-gebundene
 * Animationen alles unsichtbar, was eingeblendet werden sollte. */

.hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 720px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(40% 44% at 28% 42%, rgba(92, 200, 180, .26), transparent 70%),
    radial-gradient(34% 38% at 74% 30%, rgba(42, 165, 176, .18), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@supports (animation-timeline: view()) {
  .split, .tile, .steps li, .facts span, .closing .wrap > * {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Wer in seinem System angegeben hat, weniger Bewegung sehen zu wollen, meint
 * das auch. Dann steht alles still und vollstaendig da. */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .shot, .tile { transition: none; }
  .shot:hover, .tile:hover { transform: none; }
  @supports (animation-timeline: view()) {
    .split, .tile, .steps li, .facts span, .closing .wrap > * {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}

/* --- schmale Fenster ------------------------------------------------------ */

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  /* Auf einer Spalte gehoert das Bild unter den Text, den es zeigt -- auf
   * welcher Seite es auf dem Schreibtisch auch stand. */
  .split.reverse .shot { order: 1; }
  .hero { padding: 52px 0 48px; }
  section { padding: 56px 0; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }

  /* Auf dem Telefon traegt die Kopfzeile das Logo und den Anmelde-Knopf; die
   * Sprungmarken wuerden in zweiter Reihe umbrechen und die halbe erste
   * Bildschirmseite kosten. Erreichbar bleibt alles durch Scrollen. */
  header.top .wrap { min-height: 60px; gap: 12px; }
  header.top nav a:not(.cta) { display: none; }
  .brand img { height: 28px; }

  .hero { padding: 36px 0 40px; }
  p.lead { font-size: 17px; }

  /* Knoepfe untereinander und ueber die volle Breite: nebeneinander sind sie
   * auf einem Telefon zu schmal, um sie sicher zu treffen. */
  .actions { flex-direction: column; align-items: stretch; }
  .actions .button { text-align: center; }

  .facts .wrap { gap: 16px; padding-top: 22px; padding-bottom: 22px; }
  .tile { padding: 20px 18px; }
  section { padding: 44px 0; }
  footer .wrap { gap: 12px; }
  footer nav { margin-left: 0; }
}