/*
   * 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 Produktgrün von Smahoma Properties — seit der Aufteilung in
       Untermarken ist der Akzent die Produktfarbe, nicht mehr das
       Familien-Cyan. NICHT das Grün des Zeichens (#22c55e): das trägt hier
       zwar, fällt im hellen Satz aber durch. Gemessen: 10.5:1 auf --bg,
       9.6:1 auf --panel. */
    --accent: #4ade80;
    --marke-start: #0c7496;   /* gemeinsamer Startpunkt aller Smahoma-Verläufe */
    color-scheme: dark;
  }
  /* Heller Satz: dieselben Rollen, gemessen statt gefühlt. Der Akzent ist
     bewusst dunkler als das helle Grün — #4ade80 auf hellem Grund liest
     1.7:1 und fällt für Text glatt durch; #166534 liegt bei 6.7:1, und Weiß
     darauf (Knopfschrift) bei 7.1:1. */
  :root[data-theme="light"] {
    --bg: #f4f8fa;
    --panel: #ffffff;
    --ink: #10151c;
    --soft: #4a5866;
    --line: #d8e1e8;
    --accent: #166534;
    color-scheme: light;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #f4f8fa;
      --panel: #ffffff;
      --ink: #10151c;
      --soft: #4a5866;
      --line: #d8e1e8;
      --accent: #166534;
      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 trägt 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; }

  .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); }

  /* Der Weg zurück zur Dachseite ist keine weitere Seite dieser Marke.
     Ein senkrechter Strich davor trennt ihn optisch von der Seitenliste. */
  .header-nav .hub-link {
    margin-left: 0.35rem; padding-left: 0.95rem;
    border-left: 1px solid var(--line);
    border-radius: 0 6px 6px 0;
    font-weight: 500;
  }
  .header-nav .hub-link::after { content: " \2197"; }

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

  /* Sprache als Menü statt neun Schaltflächen: 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 für 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 Fließtext
     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, gehört in
     dieselbe Schriftgröße 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 für beide Handlungsaufrufe. Der zweite Kasten bekam nur
     display/margin und fiel aufs Browser-Blau zurück — 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 gefüllte Knopf gehört dem
     kostenlosen Test; die Bestellung trägt denselben Umriss ohne Füllung
     und sitzt am Fuß 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 reißen. */
  .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 müssen, um das zu ändern. */
  .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 trägt
     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 Plakatgröße — 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 für 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;
}
/* Der Hauptknopf trägt den Verlauf der Marke: Familien-Teal in die
   Produktfarbe, waagrecht — dieselbe Achse wie im Zeichen. */
.btn-primary { background: linear-gradient(90deg, var(--marke-start) 0%, var(--accent) 100%); 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); }