/*
   * Smahoma — deliberately NOT the 7HILLS look. One committed dark theme,
   * explicit colours everywhere: the software brand gets the console
   * atmosphere, the hospitality brand keeps the cream and gold.
   */
  :root {
    --bg: #10151c;
    --panel: #161e28;
    --ink: #e8ecf1;
    --soft: #96a2af;
    --line: #26303c;
    /* Das helle Ende des Logo-Verlaufs. Kontrast 9.2:1 auf --bg und
       8.5:1 auf --panel, also auch fuer kleine Schrift weit ueber AA. */
    --accent: #35c8e8;
    color-scheme: dark;
  }
  /* Heller Satz: dieselben Rollen, gemessen statt gefühlt. Der Akzent ist
     bewusst dunkler als das Logo-Cyan — #35c8e8 auf hellem Grund liest
     4.3:1 und fällt für Text durch; #0c7496 liegt bei 5.6:1. */
  :root[data-theme="light"] {
    --bg: #f4f8fa;
    --panel: #ffffff;
    --ink: #10151c;
    --soft: #4a5866;
    --line: #d8e1e8;
    --accent: #0c7496;
    color-scheme: light;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #f4f8fa;
      --panel: #ffffff;
      --ink: #10151c;
      --soft: #4a5866;
      --line: #d8e1e8;
      --accent: #0c7496;
      color-scheme: light;
    }
  }
  * { margin: 0; box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    line-height: 1.65;
    min-height: 100svh;
  }
  /* Die Unterseiten (Preis, Recht) bleiben schmale Dokumente, mittig und mit
     Luft. Die Startseite traegt ihre eigene Klasse und volle Breite. */
  main:not(.home) {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
  }

  /* ---------------------------------------------------------- Kopfleiste */
  /* Eine echte, ruhige Navigationsleiste statt eines Briefkopfs. Sie bleibt
     oben stehen, damit „Preise“ und „Anmelden“ immer eine Handbewegung weit
     sind — das ist der Unterschied zwischen einem Dokument und einem
     Produkt. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0.7rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
  }
  .brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
  .brand-mark { display: block; width: 30px; height: 30px; }
  :root:not([data-theme="light"]) .brand-mark { filter: brightness(1.35) saturate(1.05); }
  @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .brand-mark { filter: none; } }
  :root[data-theme="light"] .brand-mark { filter: none; }
  .brand-word { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.22em; }
  .brand-word .dot { color: var(--accent); }

  .header-nav { display: flex; gap: 0.3rem; }
  .header-nav a {
    padding: 0.35rem 0.7rem; border-radius: 6px;
    color: var(--soft); text-decoration: none;
    font-weight: 600; font-size: 0.9rem;
  }
  .header-nav a:hover { color: var(--ink); background: var(--panel); }
  .header-nav a[aria-current="page"] { color: var(--accent); }

  .header-actions { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }

  /* Sprache als Menue statt neun Schaltflaechen: eine Zeile, die nicht mehr
     Platz braucht als sie muss, mit den Sprachnamen ausgeschrieben. */
  .lang-menu { position: relative; }
  .lang-menu summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.6rem; border-radius: 6px;
    border: 1px solid var(--line); color: var(--ink);
    font-size: 0.82rem; font-weight: 600;
  }
  .lang-menu summary::-webkit-details-marker { display: none; }
  .lang-menu summary::after { content: "▾"; color: var(--soft); font-size: 0.7rem; }
  .lang-menu[open] summary { border-color: var(--accent); }
  .lang-list {
    position: absolute; right: 0; margin-top: 0.4rem;
    min-width: 10rem; padding: 0.35rem;
    background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.28);
    display: grid; gap: 0.1rem; z-index: 60;
  }
  .lang-list button {
    text-align: left; font: inherit; font-size: 0.88rem;
    padding: 0.4rem 0.6rem; border-radius: 5px;
    background: none; border: none; color: var(--ink); cursor: pointer;
  }
  .lang-list button:hover { background: var(--bg); }
  .lang-list button[aria-current="true"] { color: var(--accent); font-weight: 700; }

  main { width: 100%; }
  /* Der Verlauf endet in Navy, das auf dunklem Grund absaeuft. 1.35 hebt es
     an, ohne das Cyan ins grelle Reincyan zu treiben. Im Hellen ist der
     Verlauf fuer genau diesen Grund gezeichnet — kein Filter. */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .mark { filter: none; }
  }

  /* Das Angebot ist der einzige Kasten mit Rahmen — es soll sich vom Fliesstext
     abheben, ohne den ruhigen Ton der Seite zu brechen. */
  .offer {
    margin-top: 2.6rem;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel);
  }
  .offer h2 { font-size: 1.15rem; margin: 0.2rem 0 0.9rem; }
  .price { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
  .price .amount { font-size: 2.2rem; font-weight: 700; color: var(--accent); }
  .price .per { color: var(--soft); font-size: 0.95rem; }
  .setup { margin-top: 0.6rem; color: var(--soft); font-size: 0.95rem; }
  .ticks { margin: 1.1rem 0 0; padding: 0; list-style: none; }
  .ticks li { padding-left: 1.4rem; position: relative; margin-bottom: 0.35rem; }
  .ticks li::before {
    content: "\2713"; position: absolute; left: 0; color: var(--accent);
  }
  /* Bewusst nicht kleingedruckt: was das Produkt nicht kann, gehoert in
     dieselbe Schriftgroesse wie das, was es kann. */
  .caveat {
    margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
    font-size: 0.95rem;
  }
  /* EIN Linkstil fuer beide Handlungsaufrufe. Der zweite Kasten bekam nur
     display/margin und fiel aufs Browser-Blau zurueck — ein Farbton, der auf
     dieser Seite schlicht fremd ist. */
  a.cta {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 1px;
  }
  a.cta:hover { border-bottom-width: 2px; }
  .offer .cta { display: inline-block; margin-top: 1.1rem; }
  .mods-lead { margin-top: 1.2rem; font-weight: 600; }
  .mods-list { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
  .mods-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding: 0.3rem 0; }
  .mprice { color: var(--accent); font-weight: 600; white-space: nowrap; }
  .order-row { margin-top: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .orderbtn {
    display: inline-block; background: var(--accent); color: var(--bg);
    font-weight: 700; padding: 0.7rem 1.4rem; border-radius: 4px;
    text-decoration: none; border: none;
  }
  .orderbtn:hover { filter: brightness(1.1); }
  .order-note { color: var(--soft); font-size: 0.85rem; }
  /* Probelauf zuerst, Bestellung zuletzt. Der gefuellte Knopf gehoert dem
     kostenlosen Test; die Bestellung traegt denselben Umriss ohne Fuellung
     und sitzt am Fuss des Kastens. Wer zahlen will, findet sie; wer erst
     schauen will, wird nicht an der Kasse abgefangen. */
  .trial-row {
    margin-top: 1.4rem; padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  }
  .orderbtn.ghost {
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent); font-weight: 600;
  }
  .orderbtn.ghost:hover { background: var(--accent); color: var(--bg); filter: none; }
  .order-later { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .order-later .lead { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.6rem; }
  .order-later .order-row { margin-top: 0; padding-bottom: 0; border-bottom: none; }

  /* Die Anmeldung, die vor dem Bezahlen kommt. Eigener Kasten, weil sie ein
     eigener Schritt ist und kein Kleingedrucktes des Angebots. */
  .trial {
    margin-top: 2.2rem; padding: 1.5rem;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  }
  .trial h2 { font-size: 1.15rem; margin: 0.2rem 0 0.6rem; }
  .trial .lede2 { color: var(--soft); font-size: 0.95rem; }
  .steps { margin: 1.1rem 0 1.4rem; padding: 0; list-style: none; counter-reset: s; font-size: 0.95rem; }
  .steps li { counter-increment: s; padding-left: 2.1rem; position: relative; margin-bottom: 0.5rem; }
  .steps li::before {
    content: counter(s); position: absolute; left: 0; top: 0.05rem;
    width: 1.45rem; height: 1.45rem; border-radius: 999px;
    background: var(--accent); color: var(--bg);
    font-size: 0.8rem; font-weight: 700;
    display: grid; place-items: center;
  }
  .fields { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
  .fields label { display: block; font-size: 0.9rem; font-weight: 600; }
  .fields .wide { grid-column: 1 / -1; }
  .fields input, .fields select {
    margin-top: 0.3rem; width: 100%; box-sizing: border-box;
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line); border-radius: 4px;
    padding: 0.55rem 0.6rem; font: inherit; font-size: 0.95rem; font-weight: 400;
    /* Native Auswahlfelder rendern niedriger als Textfelder — dieselbe
       Mindesthöhe gleicht das aus, sonst wirken Land und Einheiten
       gequetscht neben Name und E-Mail. */
    min-height: 2.8rem;
  }
  .fields select { line-height: 1.4; }
  .fields input:focus, .fields select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
  .send-row { margin-top: 1.3rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .send-row .orderbtn { cursor: pointer; font: inherit; font-weight: 700; }
  .form-note { color: var(--soft); font-size: 0.85rem; }
  .form-note a { color: var(--accent); }
  .formfehler {
    margin-top: 0.9rem; padding: 0.7rem 0.9rem; font-size: 0.9rem;
    border: 1px solid var(--schlecht, #a3231f); color: var(--schlecht, #a3231f);
    border-radius: 6px; background: color-mix(in srgb, #a3231f 6%, transparent);
  }
  /* Der Erfolgszustand ersetzt das Formular an Ort und Stelle — ein
     Seitenwechsel würde den Faden reissen. */
  .gesendet { padding: 1.5rem 0 0.5rem; }
  .gesendet h3 { font-size: 1.3rem; margin: 0 0 0.5rem; }
  .gesendet p { color: var(--soft); margin: 0; }

  @media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
  .examples { margin-top: 0.6rem; color: var(--soft); font-size: 0.95rem; }
  .built-lead { margin-top: 1.2rem; font-weight: 600; }
  .countries { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
  .countries li { display: flex; gap: 0.55rem; margin-bottom: 0.35rem; }
  .countries .flag { flex: 0 0 auto; }
  .countries strong { color: var(--accent); font-weight: 600; }
  .built-note { margin-top: 0.7rem; color: var(--soft); font-size: 0.9rem; }
  .group { margin-top: 1.4rem; font-size: 0.95rem; font-weight: 600; }
  .countries-fold { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1rem; }
  .countries-fold summary {
    cursor: pointer; font-weight: 600; font-size: 0.95rem;
    color: var(--accent); list-style: none;
  }
  .countries-fold summary::before { content: "▸ "; }
  .countries-fold[open] summary::before { content: "▾ "; }
  .countries-fold .countries { margin-top: 0.7rem; }
  /* Sprache und Modus als erste Zeile — wer die Seite nicht lesen kann,
     soll nicht erst ans Ende scrollen muessen, um das zu aendern. */
  .loginlink { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); font-size: 0.9rem; white-space: nowrap; }
  .loginlink:hover { border-color: var(--accent); color: var(--accent); }
  .customers { margin-top: 1.4rem; font-size: 0.92rem; color: var(--soft); }
  .customers a { color: var(--accent); }
  .mode {
    background: var(--panel); color: var(--ink);
    border: 1px solid var(--line); border-radius: 999px;
    width: 2.2rem; height: 2.2rem; font-size: 1rem; cursor: pointer;
    flex: 0 0 auto;
  }

  .eyebrow {
    margin-top: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  h1 {
    margin-top: 1.6rem;
    font-size: clamp(1.6rem, 5.2vw, 2.3rem);
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .lede { margin-top: 1rem; color: var(--soft); font-size: 1.05rem; }

  ul.mods {
    margin: 2.2rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.65rem 1.6rem;
  }
  @media (min-width: 34rem) { ul.mods { grid-template-columns: 1fr 1fr; } }
  ul.mods li {
    display: flex;
    gap: 0.7rem;
    color: var(--soft);
    font-size: 0.95rem;
  }
  ul.mods li::before {
    content: "";
    flex: none;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.55rem;
    border-radius: 2px;
    background: var(--accent);
  }

  .case {
    margin-top: 2.6rem;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 0.5rem;
    padding: 1.6rem;
  }
  /* Alle drei Kasten-Vorzeilen tragen denselben Stil. Die des Angebots war
     als schlichter Absatz durchgerutscht und sah neben dem Vorzeigeprojekt
     wie ein vergessener Satz aus. */
  .tag {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .case img { display: block; height: 3.4rem; width: auto; margin: 1rem 0 0.9rem; }
  .case p { color: var(--soft); font-size: 0.95rem; }
  .case a.cta {
    display: inline-block;
    margin-top: 1rem;
    color: var(--ink);
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 0.1rem;
  }
  .case a.cta:hover { color: var(--accent); }

  .status {
    margin-top: 2.2rem;
    color: var(--soft);
    font-size: 0.9rem;
    border-left: 2px solid var(--accent);
    padding-left: 0.9rem;
  }
  .ask { margin-top: 1.6rem; font-size: 0.9rem; color: var(--soft); }
  .ask a { color: var(--ink); }

  .foot { margin-top: 2rem; font-size: 0.78rem; color: var(--soft); opacity: 0.8; }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* Zwei Reiter, weil der Preis eine eigene Seite verdient: wer vergleicht,
     will eine Adresse zum Weiterschicken, und die Hauptseite soll mit dem
     Produkt anfangen statt mit einer Zahlenwand. Der aktive Reiter traegt
     die Akzentlinie, nicht bloss fette Schrift — Farbe allein reicht nicht. */

  /* Der Haupteinstieg der Startseite: erst das Produkt, dann dieser Knopf. */
  .hero-cta { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .price-teaser { margin-top: 0.9rem; color: var(--soft); font-size: 0.95rem; }
  .price-teaser a {
    color: var(--accent); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--accent); white-space: nowrap;
  }
  /* Die Preisseite braucht keine Wortmarke in Plakatgroesse — sie ist eine
     Unterseite, kein zweiter Auftritt. */
  .subhead { margin-top: 0.4rem; }
  .subhead h1 { font-size: 1.6rem; margin: 0.3rem 0 0.6rem; }
  .subhead .lede { margin-bottom: 0; }
  .pricing-foot { margin-top: 2.2rem; font-size: 0.95rem; }
  .pricing-foot a {
    color: var(--accent); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid var(--accent);
  }

/* Rechtstexte: schmaler als der Rest, weil sie gelesen und nicht überflogen
   werden — und mit Zwischenüberschriften, damit man die eine Stelle findet,
   wegen der man gekommen ist. */
.rechtstext { max-width: 42rem; margin: 0 auto; }
.rechtstext h1 { font-size: 1.6rem; margin: 0.3rem 0 0.2rem; }
.rechtstext h2 { font-size: 1.05rem; margin: 1.8rem 0 0.4rem; }
.rechtstext p { margin: 0.5rem 0; }
.rechtstext ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.rechtstext li { margin: 0.25rem 0; }
.rechtstext .stand { color: var(--soft); font-size: 0.9rem; }
.rechtstext a { color: var(--accent); }
.rechtstext hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 1.5rem; }
.rechtstext em { font-style: normal; font-weight: 600; }

/* ================================================================ Startseite */
/* Sektionen mit eigenem Rhythmus statt einer durchlaufenden Textspalte. Jede
   zentriert ihren Inhalt in derselben Breite wie die Kopfleiste. */
.home > section,
.home > .customers,
.home > .foot { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ---- Hero ---- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 60rem) { .hero { grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem; } }
.hero h1 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.12;
  font-weight: 680;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero .lede { margin-top: 1.1rem; color: var(--soft); font-size: 1.1rem; max-width: 34rem; }
.hero-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-note { margin-top: 0.9rem; color: var(--soft); font-size: 0.9rem; }

/* Ein Knopf-System fuer die ganze Seite. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.4rem; border-radius: 8px;
  font-weight: 650; font-size: 0.98rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: filter 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ---- Kalender-Mockup ---- */
.hero-visual { display: flex; justify-content: center; }
.mock {
  width: 100%; max-width: 30rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45);
}
.mock-bar {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 40%, var(--panel));
}
.mock-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--line); }
.mock-title { margin-left: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--soft); letter-spacing: 0.02em; }
.mock-body { padding: 0.9rem 1rem 0.4rem; }
.mock-days, .mock-row { display: grid; grid-template-columns: 4.6rem repeat(7, 1fr); align-items: center; }
.mock-days { margin-bottom: 0.5rem; }
.mock-days span { grid-column: auto; text-align: center; font-size: 0.7rem; color: var(--soft); }
.mock-days span:first-child { grid-column: 1; }
.mock-row { height: 1.9rem; }
.mock-name { font-size: 0.78rem; color: var(--soft); font-weight: 600; }
.mock-grid { grid-column: 2 / -1; position: relative; height: 1.25rem; }
.mock-grid b {
  position: absolute; top: 0; height: 100%;
  left: calc((var(--a) - 1) / 7 * 100%);
  width: calc((var(--b) - var(--a)) / 7 * 100%);
  border-radius: 5px;
}
.mock-grid b.s1, .mock-legend i.s1 { background: var(--accent); }
.mock-grid b.s2, .mock-legend i.s2 { background: color-mix(in srgb, var(--accent) 55%, #9b8cff); }
.mock-grid b.s3, .mock-legend i.s3 { background: color-mix(in srgb, var(--accent) 30%, var(--soft)); }
.mock-legend {
  display: flex; gap: 1.1rem; flex-wrap: wrap;
  padding: 0.7rem 1rem 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.72rem; color: var(--soft);
}
.mock-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.mock-legend i { width: 0.7rem; height: 0.7rem; border-radius: 3px; }

/* ---- Funktionen ---- */
.features { padding-top: 1rem; padding-bottom: 3.5rem; border-top: 1px solid var(--line); }
.section-head { margin-bottom: 1.8rem; }
.section-title {
  font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 660;
  letter-spacing: -0.01em; text-wrap: balance; max-width: 26rem;
}
.feature-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 0.9rem;
}
@media (min-width: 40rem) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-card {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 1.1rem 1.15rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
}
.feature-card p { margin: 0; font-size: 0.92rem; color: var(--ink); }
.feature-icon {
  flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 8px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.feature-icon svg { width: 1.25rem; height: 1.25rem; }
.features .price-teaser { margin-top: 1.8rem; }

/* ---- Vorzeigekunde ---- */
.proof { padding-top: 2.6rem; padding-bottom: 2.6rem; }
.proof-inner {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 2rem;
}
.proof-logo { display: block; height: 3.4rem; width: auto; margin: 0.9rem 0 1rem; }
.proof-inner p:last-child { color: var(--soft); font-size: 0.98rem; max-width: 44rem; margin: 0; }

/* ---- Anmeldung (Karte) ---- */
.home .trial {
  margin: 0 auto; margin-top: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.home .trial-inner { padding: 2rem; }
@media (min-width: 40rem) { .home .trial-inner { padding: 2.4rem 2.6rem; } }
.home .trial h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 660; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.home .trial .lede2 { color: var(--soft); font-size: 1rem; max-width: 40rem; }

.home .customers { margin-top: 2rem; text-align: center; }
.home .foot { margin-top: 2.5rem; margin-bottom: 3rem; text-align: center; }

/* Sehr schmale Geräte: die Kopfleiste darf notfalls in zwei Zeilen brechen,
   und die Marke gibt zuerst Platz ab. Kein Element verschwindet — alles
   bleibt erreichbar, nur enger. */
@media (max-width: 30rem) {
  .header-inner { flex-wrap: wrap; gap: 0.5rem 0.8rem; padding: 0.6rem 1rem; }
  .header-nav { order: 3; gap: 0.1rem; }
  .header-actions { gap: 0.5rem; }
  .brand-word { letter-spacing: 0.14em; font-size: 0.9rem; }
  .header-nav a { padding: 0.3rem 0.5rem; font-size: 0.86rem; }
  .home > section, .home > .customers, .home > .foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  .home .trial-inner, .proof-inner { padding: 1.4rem; }
  .hero { padding-top: 2.2rem; }
}

/* Die Anmeldeseite: dieselbe Adress-Zeile wie einst im Formular, plus die
   Merkzeile der letzten Installation. */
.si-form { margin-top: 1.6rem; max-width: 30rem; }
.si-form label { display: block; font-size: 0.9rem; font-weight: 600; }
.si-zeile { display: flex; align-items: stretch; margin-top: 0.35rem; }
.si-zeile input {
  flex: 1; min-width: 0; box-sizing: border-box;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px 0 0 6px;
  padding: 0.65rem 0.7rem; font: inherit; font-size: 1rem; font-weight: 400;
  min-height: 2.8rem;
}
.si-zeile input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.si-fest {
  display: flex; align-items: center; white-space: nowrap;
  padding: 0 0.7rem; font-weight: 500; color: var(--soft);
  background: color-mix(in srgb, var(--panel) 60%, var(--bg));
  border: 1px solid var(--line); border-left: none; border-radius: 0 6px 6px 0;
}
.si-hinweis { display: block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 400; color: var(--soft); min-height: 1.2em; }
.si-hinweis.frei { color: var(--gut, #1a7f4b); font-weight: 600; }
.si-hinweis.belegt { color: var(--schlecht, #a3231f); font-weight: 600; }
.si-last { margin-top: 1.6rem; font-size: 0.95rem; color: var(--soft); }
.si-last a { color: var(--accent); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent); }
.si-custom { margin-top: 2rem; font-size: 0.9rem; color: var(--soft); }
.si-custom code { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0.1rem 0.35rem; }
.si-help { margin-top: 0.6rem; font-size: 0.9rem; color: var(--soft); }
.si-help a { color: var(--accent); }