/* ============================================================================
   piviq Warteliste — Gestaltungssystem
   ----------------------------------------------------------------------------
   Diese Datei ist die einzige Gestaltungsquelle der Seite. Sie liegt in der
   hellen Fassung, weil der Betreiber keine dunkle Fassung wuenscht.

   Herkunft der Werte (nachpruefbar, nicht erfunden):
     * Flaechen und Textfarben stammen aus der hellen Fassung der piviq-
       Produktoberflaeche: Leinwand #F7F4FF, Karte #FFFFFF, Text #1D1233,
       gedaempft #5E547F, Linien aus #4C1D95 mit kleiner Deckkraft,
       Markenfarbe #6D28D9, Akzent #FFB020.
     * Schriften sind dieselben drei Familien wie auf der Hauptseite
       (Bricolage Grotesque, Figtree, JetBrains Mono) und liegen lokal.
     * Es wird nichts von fremden Servern geladen: keine Schriftdienste,
       keine Analyseskripte, keine Bilddienste.

   Aufbau der Seite: Kopfzeile, Held mit dem Formular, Kontakt mit Firma und
   Schlusszeile, Fuss. Die Abschnitte Produktstand, Arbeitstag und Ablauf sind
   auf Anweisung vom 8. Oktober 2026 entfernt; ihre Regeln sind mit ihnen
   entfernt und liegen nicht als toter Ballast herum.

   Aufbau der Datei: Grundwerte, Grundlagen, Kopf, Knopfe, Held, Formular,
   Kontakt, Fuss, Bewegung, enge Bildschirme.
   ========================================================================= */

:root {
  /* Flaechen */
  --canvas: #f7f4ff;
  --canvas-2: #eee9fb;
  --surface: #ffffff;
  --surface-2: #f3eeff;

  /* Text */
  --ink: #1d1233;
  --muted: #5e547f;
  --muted-2: #7c74a0;

  /* Marke */
  --brand: #6d28d9;
  --brand-deep: #4c1d95;
  --brand-soft: #5b21b6;
  --accent: #ffb020;
  --accent-ink: #1d1233;

  /* Linien und Schatten */
  --line: rgba(76, 29, 149, 0.14);
  --line-strong: rgba(76, 29, 149, 0.32);
  --shadow-1: 0 1px 2px rgba(29, 18, 51, 0.05), 0 8px 24px rgba(76, 29, 149, 0.06);
  --shadow-2: 0 2px 4px rgba(29, 18, 51, 0.06), 0 18px 48px rgba(76, 29, 149, 0.10);

  /* Schrift */
  --font-display: "Bricolage Grotesque", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Rhythmus */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --wrap: 1200px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0; }

a { color: var(--brand-deep); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* Sprungmarke: sichtbar, sobald sie den Fokus bekommt. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 16px; top: 16px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.lede {
  font-size: 19px;
  color: var(--muted);
  max-width: 46ch;
}

.section {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--line);
}

.section-head { max-width: 62ch; }

.section-head h2 {
  font-size: clamp(28px, 3.1vw, 42px);
  margin-bottom: var(--space-4);
}

.section-head p { color: var(--muted); }

/* Der Kontaktabschluss ist eine Nebenlinie, keine zweite Hauptzeile. */
.section-head.compact h2 { font-size: clamp(22px, 2.1vw, 27px); }

/* ---------------------------------------------------------------- Kopfzeile */

.masthead {
  background: rgba(247, 244, 255, 0.92);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  min-height: 44px;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.wordmark img {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: block;
}

.wordmark .os {
  color: var(--brand);
  font-weight: 700;
  margin-left: 3px;
}

.mast-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.langs { display: flex; gap: 2px; }

.langs a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.langs a:hover { color: var(--ink); background: var(--surface-2); }
.langs a[aria-current="true"] { color: var(--brand-deep); background: var(--surface-2); }

/* -------------------------------------------------------------------- Knoepfe */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(29, 18, 51, 0.12), 0 10px 26px rgba(255, 176, 32, 0.30);
}

.btn-primary:hover { box-shadow: 0 2px 0 rgba(29, 18, 51, 0.14), 0 14px 34px rgba(255, 176, 32, 0.40); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover { background: var(--surface-2); }

.btn-block { width: 100%; }

/* ---------------------------------------------------------------------- Held */

.hero { padding: 48px 0 64px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8);
  /* Die linke Spalte steht mittig zur Formularkarte. Nach dem Wegfall der
     drei Abschnitte ist die Karte deutlich hoeher als der Text; oben
     ausgerichtet haette der Text eine grosse leere Flaeche unter sich, die wie
     ein fehlender Abschnitt wirkt. Mittig verteilt sie sich nach oben und
     unten und liest sich als Absicht. */
  align-items: center;
}

.hero h1 {
  font-size: clamp(32px, 4.1vw, 54px);
  margin: var(--space-4) 0 var(--space-4);
  max-width: 20ch;
}

.hero .lede { max-width: 44ch; }

.hero-facts {
  margin-top: var(--space-5);
  display: grid;
  gap: var(--space-4);
  max-width: 52ch;
}

.hero-facts div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  color: var(--muted);
  font-size: 15.5px;
}

.hero-facts svg { width: 22px; height: 22px; margin-top: 2px; color: var(--brand); }

/* -------------------------------------------------------------------- Formular */

.card-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  padding: 18px var(--space-6) 20px;
}

.card-form h2 {
  font-size: 23px;
  margin-bottom: var(--space-2);
}

.card-form .hint {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: var(--space-4);
}

/* Der Wahrheitshinweis steht unauffaellig ueber dem Formular: das Produkt ist
   in Entwicklung, und das soll der Besucher sehen, bevor er eintraegt. */
.truth-note {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: var(--space-4);
  padding-left: 10px;
  border-left: 2px solid var(--line-strong);
}

.field { display: grid; gap: 5px; margin-bottom: 10px; align-content: start; }

.field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.field .req { color: var(--brand-deep); font-weight: 700; }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}

.field textarea { min-height: 64px; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--brand); }

.field .note { font-size: 13.5px; color: var(--muted-2); }

.two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }

.form-legal {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.form-result {
  margin-top: var(--space-4);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-5);
  font-size: 15px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}

.form-result[hidden] { display: none; }

.form-result.ok {
  border-color: rgba(15, 118, 110, 0.35);
  background: rgba(15, 118, 110, 0.07);
}

.form-result.warn {
  border-color: rgba(178, 0, 88, 0.30);
  background: rgba(178, 0, 88, 0.06);
}

.form-result strong { display: block; margin-bottom: 4px; }

.form-result a { font-weight: 600; }

/* Verweise im Fliesstext sind auf dem Telefon schwer zu treffen, weil sie nur
   die Schrifthoehe haben. Sie bekommen eine Beruehrflaeche von 44 Pixeln, ohne
   dass sich am Schriftbild etwas aendert. */
.form-legal a,
.foot p a {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  vertical-align: middle;
  margin: -12px 0;
  padding: 0 2px;
}

/* --------------------------------------------------------------------- Kontakt */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.contact-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: var(--space-5);
}

.contact-box h3 { font-size: 18px; margin-bottom: var(--space-2); }
.contact-box p { color: var(--muted); font-size: 15.5px; }

.contact-box a.btn { margin-top: var(--space-3); }

/* Die Mailadresse steht als Text UND als Schaltflaeche. Damit der Textlink auf
   dem Telefon ebenso gut zu treffen ist, bekommt er eine volle Beruehrflaeche
   von 44 Pixeln Hoehe statt der reinen Schrifthoehe von 15 Pixeln. */
.contact-mail { margin-top: var(--space-2); font-size: 16px; font-weight: 600; }

.contact-mail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  margin-left: -10px;
  border-radius: var(--radius-s);
  text-decoration: none;
}

.contact-mail a:hover { text-decoration: underline; }

.details { font-size: 14.5px; color: var(--muted); line-height: 1.7; }
.details strong { color: var(--ink); display: block; font-size: 15.5px; }

.closing {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}

.closing p { color: var(--muted); font-size: 15.5px; max-width: 46ch; }

/* ----------------------------------------------------------------------- Fuss */

.foot {
  border-top: 1px solid var(--line);
  background: var(--canvas-2);
  padding: var(--space-7) 0;
  margin-top: var(--space-8);
}

.foot .wrap { display: grid; gap: var(--space-4); }

.foot p { font-size: 14.5px; color: var(--muted); }

.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

.foot nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.foot nav a:hover { color: var(--ink); text-decoration: underline; }

/* Die letzte Sektion vor dem Fuss braucht keinen vollen Bildschirmabstand:
   sonst entsteht eine Luecke, die wie ein fehlender Abschnitt wirkt. */
.section:last-of-type { padding-bottom: var(--space-8); }

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

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover { transform: none; }
}

/* -------------------------------------------------------------- Enge Bildschirme */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
}

@media (max-width: 860px) {
  /* Marke und Handlung bleiben in der ersten Zeile, Sprachwahl und Handlung
     rutschen in eine zweite: kein Umbruch mitten im Wort, kein Abschneiden. */
  .masthead .wrap { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .mast-right { order: 3; width: 100%; justify-content: space-between; min-width: 0; }
  .mast-right .btn { flex: 1 1 auto; }
  .memo-cols, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .section { padding: var(--space-8) 0; }
  .hero { padding: 40px 0 40px; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  .two-up { grid-template-columns: minmax(0, 1fr); }
  .card-form { padding: var(--space-5); border-radius: var(--radius-m); }
  .hero-grid > * { min-width: 0; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 42px); }
  .hero .lede { font-size: 17.5px; }
  .hero-facts { margin-top: var(--space-5); }
  .foot { margin-top: var(--space-8); padding: var(--space-6) 0; }
  .section:last-of-type { padding-bottom: var(--space-7); }
}

@media (max-width: 420px) {
  /* Engste geprüfte Breite: 360 px. */
  .wordmark { font-size: 20px; }
  .masthead .wrap { gap: var(--space-3); }
  .contact-box h3 { font-size: 17px; }
}