/* =====================================================================
   LMMeier Rahmen: ein gemeinsamer Kopf, Fuss, Handy-Leiste, Brotkrumen,
   Zurück-Leiste und die Demo-Leiste für alle Unterseiten.

   1. Bausteine, die jede Seite nutzt (.lm-krumen, .lm-zurueck,
      .lm-demo-leiste). Eigene Klassennamen, kollidieren mit nichts.
   2. Kopf und Fuss der Startseite für Seiten OHNE assets/stil.css
      (Tools, Standorte, Branchen, Demo-Übersicht, Verkaufs-Cases).
      Dort tragen <header>, <footer> und .leiste zusätzlich die Klasse
      .lm-rahmen. Die Regeln sind eine Abschrift aus assets/stil.css
      (Abschnitte Kopf, Tasten, Fuss, Feste Leiste) und mit .lm-rahmen
      verschärft, damit seiteneigene Regeln (.kopf, .taste, nav a …)
      nicht durchschlagen. Seiten MIT stil.css brauchen Teil 2 nicht.
   Quelle der Wahrheit für das Markup: index.html (Kopf, Fuss, .leiste).
   ===================================================================== */

/* ---------- 1a. Brotkrumen ------------------------------------------- */
.lm-krumen {
  position: relative;
  z-index: 1;
  background: #070D1A;
  border-bottom: 1px solid #1C2C47;
  font: 500 0.84rem/1.4 "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  color: #A4B2C8;
}
.lm-krumen .lm-krumen-in {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem 1.25rem;
  min-height: 2.75rem;
  flex-wrap: wrap;
}
@media (max-width: 30rem) { .lm-krumen .lm-krumen-in { width: min(100% - 1.75rem, 1180px); } }
.lm-krumen ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
  flex: 1 1 16rem;
}
.lm-krumen li { display: inline-flex; align-items: center; min-width: 0; }
.lm-krumen li + li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.6rem 0 0.45rem;
  border-top: 1.5px solid #5A6E8C;
  border-right: 1.5px solid #5A6E8C;
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.lm-krumen a {
  color: #A4B2C8;
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.lm-krumen a:hover { color: #6CE7FA; text-decoration: underline; text-underline-offset: 3px; }
.lm-krumen [aria-current="page"] {
  color: #EAF0F9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
  display: inline-block;
}
.lm-krumen .lm-katalog {
  margin-left: auto;
  color: #6CE7FA;
  font-weight: 600;
}
@media (max-width: 40rem) {
  .lm-krumen [aria-current="page"] { max-width: 22ch; }
  .lm-krumen .lm-katalog { display: none; } /* unten steht die Zurück-Leiste */
}

/* ---------- 1b. Zurück-Leiste am Ende eines Katalogeintrags ----------- */
.lm-zurueck {
  position: relative;
  z-index: 1;
  background: #0C1628;
  border-top: 1px solid #1C2C47;
  font: 500 0.95rem/1.4 "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
}
.lm-zurueck .lm-zurueck-in {
  width: min(100% - 2.5rem, 1180px);
  margin-inline: auto;
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  align-items: center;
}
@media (max-width: 30rem) { .lm-zurueck .lm-zurueck-in { width: min(100% - 1.75rem, 1180px); } }
.lm-zurueck a {
  color: #6CE7FA;
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.lm-zurueck a:hover { text-decoration: underline; text-underline-offset: 3px; }
.lm-zurueck a.lm-zurueck-start { color: #A4B2C8; }
.lm-zurueck a::before { content: "\2190"; } /* Pfeil links */

/* ---------- 1c. Demo-Leiste über fiktiven Kundenwebsites -------------- */
.lm-demo-leiste {
  position: relative;
  z-index: 2147483000;
  background: #070D1A;
  color: #EAF0F9;
  font: 500 13px/1.3 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #2959C4 0%, #6CE7FA 45%, #2959C4 100%) 1;
  box-sizing: border-box;
  margin: 0;
}
.lm-demo-leiste * { box-sizing: border-box; }
.lm-demo-leiste .lm-demo-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2px 12px;
  min-height: 48px;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 4px 18px;
}
.lm-demo-leiste a {
  color: #EAF0F9;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* Tap-Ziel mindestens 44 px */
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}
.lm-demo-leiste a:hover { color: #6CE7FA; }
.lm-demo-leiste a:focus-visible { outline: 3px solid #6CE7FA; outline-offset: -3px; }
.lm-demo-leiste .lm-demo-marke b { font-weight: 700; margin-left: 4px; }
.lm-demo-leiste .lm-demo-zurueck { color: #A4B2C8; }
.lm-demo-leiste .lm-demo-zurueck::before { content: "\2190"; margin-right: 6px; }
.lm-demo-leiste .lm-demo-tun {
  margin-left: auto;
  color: #041018;
  background: linear-gradient(96deg, #35B6E6, #6CE7FA);
  border-radius: 2px;
  padding: 0 14px;
  min-height: 44px;
  font-weight: 700;
}
.lm-demo-leiste .lm-demo-tun:hover { color: #041018; background: linear-gradient(96deg, #4FCBF2, #A3F2FE); }
.lm-demo-leiste .lm-kurz { display: none; }
@media (max-width: 40rem) {
  /* Eine Zeile bis 360 px: kurze Beschriftungen, etwas kleiner */
  .lm-demo-leiste { font-size: 12px; }
  .lm-demo-leiste .lm-demo-in { gap: 10px; padding: 2px 8px; flex-wrap: nowrap; }
  .lm-demo-leiste .lm-demo-zurueck::before { margin-right: 4px; }
  .lm-demo-leiste .lm-demo-tun { padding: 0 10px; }
  .lm-demo-leiste .lm-lang { display: none; }
  .lm-demo-leiste .lm-kurz { display: inline; }
}
/* 18.10./19.10.2026: Link "Gratis-Entwurf" (/gratis-entwurf/) in der Demo-Leiste. Seit der Entwurf immer kostenlos ist,
   hiesse der Vorentwurf-Knopf daneben ebenfalls "Gratis-Entwurf": darum gibt es pro Leiste nur EINEN Gratis-Entwurf-Knopf.
   Wo der Link steht, übernimmt er Lage und Look des Hauptknopfs und .lm-demo-tun wird ausgeblendet; "Demos" bleibt sichtbar.
   Unten auf dem Handy bleibt die Leiste "Termin buchen" (.handleiste) unverändert. */
.lm-demo-leiste .lm-demo-in:has(.lm-demo-gratis) .lm-demo-tun { display: none; }
.lm-demo-leiste .lm-demo-gratis {
  margin-left: auto;
  color: #041018;
  background: linear-gradient(96deg, #35B6E6, #6CE7FA);
  border-radius: 2px;
  padding: 0 14px;
  min-height: 44px;
  font-weight: 700;
}
.lm-demo-leiste .lm-demo-gratis:hover { color: #041018; background: linear-gradient(96deg, #4FCBF2, #A3F2FE); }
@media (max-width: 40rem) { .lm-demo-leiste .lm-demo-gratis { padding: 0 10px; } }
@media (max-width: 22rem) { .lm-demo-leiste .lm-demo-marke span { display: none; } }
@media print { .lm-demo-leiste { display: none; } }

/* Abschnittsmarkierung im Hauptmenü (Seite gehört zu diesem Bereich) */
.kopf nav a[aria-current="true"] { color: var(--auf-nacht, #EAF0F9); border-bottom-color: var(--cyan, #6CE7FA); }

/* =====================================================================
   2. Kopf, Fuss und Leiste für Seiten ohne stil.css
   ===================================================================== */
.lm-rahmen {
  --lmr-nacht: #070D1A;
  --lmr-linie: #1C2C47;
  --lmr-cyan: #6CE7FA;
  --lmr-koenig: #2959C4;
  --lmr-text: #EAF0F9;
  --lmr-still: #A4B2C8;
  --lmr-taste-linie: #5A6E8C;
  --lmr-schrift: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  font-family: var(--lmr-schrift);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  box-sizing: border-box;
}
.lm-rahmen *, .lm-rahmen *::before, .lm-rahmen *::after { box-sizing: border-box; }
.lm-rahmen img { max-width: 100%; height: auto; display: block; border: 0; }
.lm-rahmen .mass { width: min(100% - 2.5rem, 1180px); margin-inline: auto; padding: 0; max-width: none; }
@media (max-width: 30rem) { .lm-rahmen .mass { width: min(100% - 1.75rem, 1180px); } }

/* Kopf */
header.lm-rahmen.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  color: var(--lmr-text);
  background: rgba(7, 13, 26, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 0;
  box-shadow: none;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.09rem);
}
header.lm-rahmen.kopf::before { content: none; }
header.lm-rahmen.kopf::after {
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  background: linear-gradient(90deg, var(--lmr-koenig) 0%, var(--lmr-cyan) 45%, var(--lmr-koenig) 100%);
}
.lm-rahmen .kopf-in {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 4.25rem;
  padding-block: 0.5rem;
  flex-wrap: wrap;
}
.lm-rahmen .marke {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  flex: 0 0 auto;
  text-decoration: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
.lm-rahmen.kopf .marke img { width: 151px; height: auto; }
.lm-rahmen.fuss .marke img { width: 180px; height: auto; }
.lm-rahmen.kopf nav {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.6vw, 1.4rem);
  margin: 0 0 0 auto;
  padding: 0;
  flex-wrap: wrap;
  position: static;
  background: none;
  border: 0;
  width: auto;
  height: auto;
  transform: none;
  opacity: 1;
  visibility: visible;
}
.lm-rahmen.kopf nav a {
  color: var(--lmr-still);
  text-decoration: none;
  font-family: var(--lmr-schrift);
  font-size: clamp(0.86rem, 0.8rem + 0.22vw, 0.95rem);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.62;
  padding: 0.5rem 0.4rem;
  margin: 0;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.lm-rahmen.kopf nav a:hover,
.lm-rahmen.kopf nav a[aria-current="page"],
.lm-rahmen.kopf nav a[aria-current="true"] { color: var(--lmr-text); border-bottom-color: var(--lmr-cyan); }
.lm-rahmen.kopf nav a::before, .lm-rahmen.kopf nav a::after { content: none; }
.lm-rahmen.kopf .nav-umbruch { display: none; }
@media (max-width: 58rem) {
  .lm-rahmen .kopf-in { min-height: 0; gap: 0.25rem; padding-block: 0.35rem 0.15rem; }
  .lm-rahmen.kopf .kopf-tun { display: none; }
  .lm-rahmen.kopf .nav-umbruch { display: block; flex-basis: 100%; height: 0; }
  .lm-rahmen.kopf nav { width: 100%; margin-inline-start: 0; flex-wrap: wrap; justify-content: space-between; gap: 0; }
  .lm-rahmen.kopf nav a { padding-inline: 0.25rem; font-size: clamp(0.74rem, 0.6rem + 0.6vw, 0.9rem); white-space: nowrap; }
}
@media (min-width: 58.0625rem) and (max-width: 63rem) {
  .lm-rahmen.kopf nav { gap: 0.1rem; }
  .lm-rahmen.kopf nav a { padding-inline: 0.28rem; font-size: 0.82rem; }
}

/* Tasten (nur im Rahmen) */
.lm-rahmen .taste {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  width: auto;
  margin: 0;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 2px;
  font: 600 1rem/1 var(--lmr-schrift);
  letter-spacing: 0.005em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(96deg, #35B6E6, #6CE7FA);
  color: #041018;
  box-shadow: 0 8px 22px -12px rgba(41, 89, 196, 0.85);
  transition: background 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.lm-rahmen .taste:hover { background: linear-gradient(96deg, #4FCBF2, #A3F2FE); color: #041018; }
.lm-rahmen .taste--leer { background: transparent; color: var(--lmr-text); border-color: var(--lmr-taste-linie); box-shadow: none; }
.lm-rahmen .taste--leer:hover { background: transparent; color: #fff; border-color: var(--lmr-cyan); }
.lm-rahmen .taste--klein { min-height: 2.75rem; padding: 0.55rem 1.1rem; font-size: 0.92rem; }
.lm-rahmen :where(a):focus-visible { outline: 3px solid var(--lmr-cyan); outline-offset: 2px; border-radius: 2px; }

/* Fuss */
footer.lm-rahmen.fuss {
  display: block;
  margin: 0;
  background: var(--lmr-nacht);
  color: var(--lmr-text);
  border: 0;
  border-top: 1px solid var(--lmr-linie);
  padding: 3rem 0 7rem;
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.09rem);
  position: relative;
  z-index: 1;
}
@media (min-width: 58.0625rem) { footer.lm-rahmen.fuss { padding-bottom: 3rem; } }
.lm-rahmen .fuss-oben { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 50rem) { .lm-rahmen .fuss-oben { grid-template-columns: 1fr 1.2fr; } }
.lm-rahmen .fuss-oben p { color: var(--lmr-still); max-width: 32em; margin: 0.75rem 0 0; font-size: 1rem; }
.lm-rahmen.fuss nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-content: start; margin: 0; padding: 0; background: none; border: 0; }
.lm-rahmen.fuss nav a {
  color: var(--lmr-still);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
}
.lm-rahmen.fuss nav a:hover { color: var(--lmr-cyan); }
.lm-rahmen .fuss-unten {
  border-top: 1px solid var(--lmr-linie);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--lmr-still);
}
.lm-rahmen .fuss-unten p { margin: 0; color: var(--lmr-still); }
.lm-rahmen .fuss-unten .recht { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; max-width: none; }
.lm-rahmen .fuss-unten a { color: var(--lmr-still); min-height: 2.75rem; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }

/* Feste Leiste am Handy */
div.lm-rahmen.leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(7, 11, 20, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 0;
}
div.lm-rahmen.leiste::before {
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  left: 0; right: 0; top: -2px;
  background: linear-gradient(90deg, var(--lmr-koenig) 0%, var(--lmr-cyan) 45%, var(--lmr-koenig) 100%);
}
div.lm-rahmen.leiste .taste { flex: 1; padding-inline: 0.75rem; }
/* Schmale Telefone (320 px): wie .leiste in stil.css schrumpfen lassen, sonst ragt «Erstgespräch» über den Rand */
@media (max-width: 30rem) {
  div.lm-rahmen.leiste { gap: 0.4rem; padding-inline: 0.55rem; }
  div.lm-rahmen.leiste .taste { min-width: 0; padding-inline: 0.5rem; font-size: 0.88rem; white-space: nowrap; }
}
@media (min-width: 58.0625rem) { div.lm-rahmen.leiste { display: none; } }

/* ---------- 1d. Seiteneigener Hinweis über dem Fuss (z. B. Datenschutzsatz der Tools) ---- */
.lm-hinweis {
  position: relative;
  z-index: 1;
  background: #070D1A;
  border-top: 1px solid #1C2C47;
  color: #A4B2C8;
  font: 400 0.9rem/1.55 "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
}
.lm-hinweis .lm-hinweis-in { width: min(100% - 2.5rem, 1180px); margin-inline: auto; padding-block: 1.25rem; }
@media (max-width: 30rem) { .lm-hinweis .lm-hinweis-in { width: min(100% - 1.75rem, 1180px); } }
.lm-hinweis p { margin: 0; max-width: 70ch; color: #A4B2C8; }
.lm-hinweis p + p { margin-top: 0.5rem; }
.lm-hinweis a { color: #6CE7FA; }

/* =====================================================================
   3. Handy-Menü (gilt für den Kopf aller Seiten, auch der Startseite)
   Ohne JavaScript (keine Klasse lm-js) bleibt die Navigation zweizeilig sichtbar.
   ===================================================================== */
.kopf .lm-menue { display: none; }
@media (max-width: 58rem) {
  html.lm-js .kopf .kopf-in { flex-wrap: nowrap; min-height: 3.5rem; padding-block: 0.35rem; gap: 0.75rem; }
  html.lm-js .kopf .lm-menue {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0 auto;
    min-height: 2.75rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    color: #EAF0F9;
    border: 1.5px solid #5A6E8C;
    border-radius: 2px;
    font: 600 0.92rem/1 "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
  }
  html.lm-js .kopf .lm-menue[aria-expanded="true"] { border-color: #6CE7FA; }
  html.lm-js .kopf .lm-menue:focus-visible { outline: 3px solid #6CE7FA; outline-offset: 2px; }
  html.lm-js .kopf .lm-menue-strich,
  html.lm-js .kopf .lm-menue-strich::before,
  html.lm-js .kopf .lm-menue-strich::after {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    position: relative;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  html.lm-js .kopf .lm-menue-strich::before,
  html.lm-js .kopf .lm-menue-strich::after { content: ""; position: absolute; left: 0; }
  html.lm-js .kopf .lm-menue-strich::before { top: -5px; }
  html.lm-js .kopf .lm-menue-strich::after { top: 5px; }
  html.lm-js .kopf .lm-menue[aria-expanded="true"] .lm-menue-strich { background: transparent; }
  html.lm-js .kopf .lm-menue[aria-expanded="true"] .lm-menue-strich::before { transform: translateY(5px) rotate(45deg); }
  html.lm-js .kopf .lm-menue[aria-expanded="true"] .lm-menue-strich::after { transform: translateY(-5px) rotate(-45deg); }

  html.lm-js .kopf nav { display: none; }
  html.lm-js .kopf.lm-offen nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
    position: absolute;
    left: 0; right: 0; top: calc(100% + 2px);
    width: auto;
    margin: 0;
    padding: 0.5rem max(1rem, (100% - 1180px) / 2) 1.1rem;
    background: rgba(7, 13, 26, 0.98);
    border-bottom: 1px solid #1C2C47;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
    z-index: 41;
  }
  html.lm-js .kopf.lm-offen nav a {
    font-size: 1rem;
    padding: 0.65rem 0.25rem;
    min-height: 3rem;
    white-space: normal;
    border-bottom: 1px solid #1C2C47;
    justify-content: flex-start;
  }
  html.lm-js .kopf.lm-offen nav a[aria-current] { color: #EAF0F9; border-bottom-color: #6CE7FA; }
  html.lm-js .kopf .nav-umbruch { display: none; }
}
@media (max-width: 58rem) and (prefers-reduced-motion: reduce) {
  html.lm-js .kopf .lm-menue-strich, html.lm-js .kopf .lm-menue-strich::before, html.lm-js .kopf .lm-menue-strich::after { transition: none; }
}

/* Sprungmarke: stil.css setzt «body > .sprung { position: relative }» (für die Ebene über dem
   Regen) und hebt damit position:absolute auf. Folge: 50 px leerer Streifen über dem Kopf auf
   jeder Seite. Hier wieder aus dem Fluss nehmen, Ebene bleibt über dem Regen. */
body > a.sprung { position: absolute; z-index: 60; }

/* Kopf am Handy: beim Runterscrollen ausblenden, beim Hochscrollen zeigen (assets/lm-rahmen.js) */
@media (max-width: 58rem) {
  html.lm-js .kopf { transition: transform 0.25s ease; }
  html.lm-js .kopf.lm-weg { transform: translateY(calc(-100% - 3px)); }
}
@media (max-width: 58rem) and (prefers-reduced-motion: reduce) {
  html.lm-js .kopf { transition: none; }
}

/* Druck: Rahmen weglassen (wie bisher auf den Tools-Seiten) */
@media print {
  header.kopf, footer.fuss, div.leiste, .lm-krumen, .lm-zurueck, .lm-hinweis, .lm-menue { display: none !important; }
}

/* Vorentwurf (assets/lm-rahmen.js): kleiner Satz unter dem Knopf, nur mit JavaScript sichtbar */
.vorentwurf-hinweis { font-size: 0.85rem; line-height: 1.45; opacity: 0.85; margin: 0.6rem 0 0; max-width: 34rem; }

/* ---------- Chat-Knopf (chatbot/widget.js, zentral geladen über lm-rahmen.js) ----------
   widget.js setzt den Knopf am Handy 84 px über den Rand, über die Handy-Leiste. Auf Geräten mit
   Home-Balken ist die Leiste um env(safe-area-inset-bottom) höher; der Rand schiebt den Knopf und
   das Fenster um genau so viel nach oben. Der Fuss bekommt unten Platz, damit der Knopf am Seitenende
   keinen Link (Impressum, Datenschutz, AGB, Social) verdeckt. */
@media (max-width: 58rem) {
  body:has(> div.leiste) .lmc-knopf, body:has(> div.leiste) .lmc-fenster { margin-bottom: env(safe-area-inset-bottom, 0px); }
  body:has(.lmc-knopf) footer.fuss, body:has(.lmke-knopf) footer.fuss { padding-bottom: calc(9.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 58.0625rem) {
  body:has(.lmc-knopf) footer.fuss, body:has(.lmke-knopf) footer.fuss { padding-bottom: 6rem; }
}

/* ---------- Ein Chat-Knopf: KI-Empfang (ki-empfang/widget.js) und «Nach oben» (.hoch, assets/kino.js) ----------
   Das Widget sitzt fest unten rechts (16 px, 48 px hoch). Am Handy steht dort die feste Leiste (.leiste, bis
   58 rem): Knopf und Fenster rücken über sie (84 px, wie früher beim Regel-Chat), Home-Balken eingerechnet.
   «Nach oben» steht auf jeder Breite 14 px über dem Chat-Knopf, rechtsbündig, nie darauf. */
body:has(.lmke-knopf) .hoch { right: 16px; bottom: calc(16px + 48px + 14px + env(safe-area-inset-bottom, 0px)); }
/* Audit 19.10.2026: Solange das Cookie-Banner offen ist, rueckt der Chat-Knopf darueber und liegt am Handy (375 px)
   genau auf dem Haupt-Knopf "Gratis-Entwurf". Darum bis zur Cookie-Wahl ausblenden. */
body:has(#lm-cc-banner) .lmke-knopf { visibility: hidden; }
@media (max-width: 58rem) {
  body:has(> div.leiste) .lmke-knopf { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body:has(> div.leiste) .lmke-fenster { bottom: calc(84px + 60px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 84px - 60px - 16px - env(safe-area-inset-bottom, 0px)); }
  body:has(> div.leiste):has(.lmke-knopf) .hoch { bottom: calc(84px + 48px + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* GSC-Audit 19.10.2026: einheitlicher CTA-Block im Kopf der Orts- und Branchenseiten (ueber dem Video,
   damit Knopf, Preis-Anker und Vertrauen am Handy bei 375 px ueber dem Falz liegen). */
.lm-cta-block { margin-top: 1.1rem; }
.lm-cta-block .kopf-handlung { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.lm-cta-preis { margin-top: 0.7rem; color: var(--auf-nacht-still); font-size: 0.95em; max-width: 40em; }
.lm-cta-vertrauen { margin-top: 0.35rem; color: var(--auf-nacht-still); font-size: 0.92em; }
.lm-cta-block + .lm-clip { margin-top: 1.5rem; }
@media (max-width: 30rem) {
  .seiten-kopf .lm-cta-block .taste { width: 100%; justify-content: center; text-align: center; }
}
/* Handy: Reihenfolge Titel, CTA-Block, Video (clip.css stellt das Video sonst direkt unter den Titel). */
@media (max-width: 40rem) {
  .seiten-kopf .mass:has(> .lm-clip--oben) > .lm-cta-block { order: -1; }
}
@media (max-width: 40rem) {
  /* Anrufen steht am Handy schon in der Leiste unten; so rueckt die Vertrauenszeile ueber den Falz. */
  .lm-cta-block .kopf-handlung-alt { display: none; }
}

/* Handy (unter 768 px, 20.10.2026): Der KI-Knopf ist nur ein rundes Symbol rechts ueber der unteren Leiste
   (die Hoehe der Leiste samt Home-Balken rechnet widget.js als bottom ein), der Pfeil nach oben entfaellt,
   und unten bleibt so viel Platz (Leiste + Knopf + Abstand), dass am Seitenende nichts verdeckt wird.
   Pruefung: tests/overlap-test.js (Handy-Pruefung). */
@media (max-width: 47.99rem) {
  body:has(> div.leiste) .lmke-knopf { width: 52px; height: 52px; min-height: 52px; padding: 0; border-radius: 50%;
    font-size: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
  body:has(> div.leiste) .lmke-knopf::before { content: ""; width: 24px; height: 24px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center / contain no-repeat; }
  .hoch, body:has(> div.leiste):has(.lmke-knopf) .hoch { display: none !important; }
  body:has(> div.leiste) footer.fuss, body:has(> div.leiste):has(.lmke-knopf) footer.fuss { padding-bottom: calc(10.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Tap-Ziele Fusszeile (05.11.2026): schmale Woerter (Blog 31, AGB 29 px) auf mindestens 44 px Breite */
.fuss-oben nav a, .fuss-unten .recht a, .wo a { min-width: 2.75rem; justify-content: center; }