/* FirmenaApp-Hinweis auf Lite-Websites · M-1 bis M-5a · Entwurf 12.10.2026 (RPE-101, RPE-109)
   Gewählt für Lite: M-5a in der Kopfzeile, M-3 + M-2 auf allen Seiten, M-4 nur auf Impressum/Künye. Aufruf im Bau: FM.marke('lite', { lang, impressum, pfad, grund }) aus schnipsel.js.
   Logo: aktuelles Firmena-Logo L5-2 als Bild (logo-l5-2-hell.webp auf hellem, logo-l5-2.webp auf dunklem Grund). Höhen so gewählt,
   dass der Schriftzug lesbar bleibt (Großbuchstaben mind. etwa 9 px): M-5a 20 px, M-2 24 px, M-3 32 px (Telefon 28 px), M-4 30 px.
   Einbau: diese Datei in die Kundenseite (eigener Server, keine Anfrage an firmena.app), dazu die Schnipsel aus schnipsel.js (Ansicht und Code: muster.html).
   Farben erben: Schrift, Schriftart und Linien kommen aus der Kundenseite (currentColor, inherit).
   Die Kundenseite kann drei Werte setzen, sonst gelten die Vorgaben:
     --fm-ink   Schriftfarbe            (Vorgabe: geerbt)
     --fm-acc   Linkfarbe im Band M-3   (Vorgabe: wie --fm-ink; nur Farben mit ≥ 4,5 : 1 zum Grund eintragen)
     --fm-rand  Innenabstand links/rechts, damit M-2/M-3 bündig mit dem Seiteninhalt stehen (Vorgabe 16px)
   Eigene Farben hat nur M-1 (Schild über fremdem Inhalt, Grund unbekannt): data-fm-ton="hell" | "dunkel" | "auto" (Systemeinstellung).
   Kontraste (WCAG 2.1 AA): M-2, M-3, M-4 so gut wie die Fußzeile bzw. der Text der Kundenseite, weil sie deren Farbe erben;
   M-1 hell #161513 auf #F4F1EA 16,1 : 1, dunkel #ECE9E2 auf #121211 15,4 : 1. */

/* Werte nur als Rückfall in var(), damit Angaben der Kundenseite (auf .fm oder einem Elternelement) gelten. */
.fm { --fm-linie: color-mix(in srgb, currentColor 22%, transparent); }
.fm, .fm * { box-sizing: border-box; }
.fm a { color: inherit; text-decoration: none; }
.fm a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.fm-chip { display: inline-block; flex: none; width: 1.5em; height: 1.5em; vertical-align: middle; }
/* Wortmarke: Höhe je Ort, Breite folgt (484 : 112). Kein Rahmen, kein Filter: das Logo bleibt, wie es ist. */
.fm .fm-logo { display: inline-block; flex: none; width: auto; height: var(--fm-logo-h, 22px); max-width: none; margin: 0; border: 0; vertical-align: middle; }
.fm-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media print { .fm-abz, .fm-band { display: none !important; } }
/* Ältere Browser ohne color-mix (vor Chrome 111, Safari 16.2, Firefox 113): neutrale Linie und Fläche. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .fm { --fm-linie: rgba(128, 128, 128, .4); }
  .fm-band { background: rgba(128, 128, 128, .08); }
}

/* M-1 Abzeichen unten rechts: festes Schild mit eigenem Grund (Firmena F-1 / F-2), Telefon nur Zeichen. */
.fm-abz {
  position: fixed; z-index: 40;
  right: max(var(--fm-seite, 16px), env(safe-area-inset-right));
  bottom: max(var(--fm-unten, 16px), env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 6px 12px 6px 7px;
  font-size: 12.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0;   /* Schriftart der Kundenseite */
  color: #161513; background: #F4F1EA;
  border: 1px solid rgba(22, 21, 19, .18); border-radius: 0;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55);
  text-decoration: none;
}
.fm-abz[data-fm-ton="dunkel"] { color: #ECE9E2; background: #121211; border-color: rgba(201, 163, 90, .5); }
@media (prefers-color-scheme: dark) { .fm-abz[data-fm-ton="auto"] { color: #ECE9E2; background: #121211; border-color: rgba(201, 163, 90, .5); } }
.fm-abz .fm-chip { width: 26px; height: 26px; }
.fm-abz b { font-weight: 700; }
.fm-abz:hover b { text-decoration: underline; text-underline-offset: 2px; }
.fm-abz:focus-visible { outline: 2px solid #C9A35A; outline-offset: 3px; }
@media (max-width: 599px) {
  .fm-abz { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .fm-abz .fm-abz-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* M-2 Zeile am Ende der Fußzeile: geerbte Farbe und Schrift, eine Haarlinie darüber. */
.fm-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin: 0; padding: 14px var(--fm-rand, 16px) 16px;
  border-top: 1px solid var(--fm-linie);
  color: var(--fm-ink, inherit); font: inherit; font-size: max(12px, .8125em); line-height: 1.5;
}
.fm-zeile a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: max(14px, .9375em); --fm-logo-h: 34px; }
.fm-zeile a:hover span, .fm-zeile a:focus-visible span { text-decoration: underline; text-underline-offset: 2px; }
.fm-zeile .fm-pkt { opacity: .7; }

/* M-3 Band über der Fußzeile: Werbung, deshalb mit „Anzeige“. Grund ist ein Hauch der Schriftfarbe (5 %), Linien oben und unten. */
.fm-band {
  position: relative; display: block; margin: 0;
  color: var(--fm-ink, inherit); font: inherit; line-height: 1.45;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border-block: 1px solid var(--fm-linie);
}
/* Inhaber 13.10.: mittig, zwei Zeilen untereinander (Logo + Satz, dann Frage + Link), Logo ist selbst ein Link. */
.fm-band-in { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 760px; margin-inline: auto; padding: 28px var(--fm-rand, 16px); text-align: center; }
.fm-band p { margin: 0; }
.fm-band-k { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; font-size: max(15px, 1em); --fm-logo-h: 44px; }
.fm-band-logo { display: inline-flex; align-items: center; line-height: 0; }
.fm-band-logo:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.fm-band-k .fm-logo { margin-right: 2px; }
.fm-band-f { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 14px; font-size: 1.0625em; font-weight: 700; }
.fm-band-f a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--fm-acc, var(--fm-ink, currentColor)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 700; }
.fm-band-f a:hover { text-decoration-thickness: 2px; }
.fm-anz { font-size: max(11px, .6875em); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fm-band-k .fm-anz { padding-left: 12px; border-left: 1px solid var(--fm-linie); }
@media (max-width: 599px) {
  .fm-band-in { gap: 10px; padding-block: 22px; }
  .fm-band-k { --fm-logo-h: 36px; }
  .fm-band-f { flex-direction: column; align-items: center; gap: 6px; }
}

/* M-4 Hinweis im Impressum (bzw. auf der Rechtsseite): Wortmarke als Bild + ein Satz. Sonst nirgends auf der Seite. */
.fm-imp { margin: 0; padding: 22px 0 4px; border-top: 1px solid var(--fm-linie); color: var(--fm-ink, inherit); font: inherit; line-height: 1.55; }
/* h2 der Kundenseite (Linien, Abstände, Farbe) nicht übernehmen */
.fm-imp-h { margin: 0 0 12px; padding: 0; border: 0; background: none; color: inherit; text-align: start; font: inherit; font-size: max(11px, .75em); font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; }
.fm-imp-logo { display: inline-block; line-height: 0; --fm-logo-h: 44px; }
.fm-imp-logo .fm-logo { display: block; }
.fm-imp p { margin: 14px 0 0; max-width: 60ch; font-size: max(15px, 1em); }
.fm-imp p a { font-weight: 700; }
.fm-imp p a { text-decoration: underline; text-underline-offset: 2px; }

/* M-5a Kopfzeile (gewählt 12.10., RPE-109): „designed by“ + Wortmarke 28 px als Zeile unter dem Kundenlogo.
   Einsetzen direkt hinter den Logo-Link (Platzhalter data-fm="kopf"); der Logo-Bereich der Kundenseite stapelt beide untereinander.
   „designed by“ erbt die Farbe der Kopfzeile. Unter 600 px bleibt die Zeile; data-fm-mobil="aus" blendet sie dort aus.
   Hat die Kundenseite eine verkleinerte feste Kopfzeile ohne Platz unter dem Logo, setzt sie dort data-fm-kompakt (blendet aus). */
.fm-kopf {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 24px;
  color: var(--fm-ink, inherit); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: .02em;
  white-space: nowrap; text-decoration: none; --fm-logo-h: 28px;
}
.fm-kopf:hover span, .fm-kopf:focus-visible span { text-decoration: underline; text-underline-offset: 2px; }
.fm-kopf:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }   /* .fm a:focus-visible greift hier nicht: der Link ist selbst .fm */
.fm-kopf[data-fm-kompakt] { display: none; }
@media (max-width: 599px) { .fm-kopf[data-fm-mobil="aus"] { display: none; } }
@media print { .fm-kopf { display: none !important; } }