/* Gemeinsame Datei aller Musterseiten.
   Zwei Aufgaben:

   1. Hilfsklassen. Die Muster hatten die Feinabstimmung urspruenglich in
      style="..."-Attributen stehen. Unter der Kopfzeile style-src 'self'
      wirft der Browser jedes einzelne davon weg - die Seiten saehen live
      kaputt aus. Darum liegen dieselben Regeln jetzt hier.
      Die Namen sind bewusst stumpf: mt = margin-top, fs = font-size.

   2. Das Muster-Band unten rechts. Es sagt jedem Besucher, dass der Betrieb
      erfunden ist, und fuehrt zurueck auf ag-designs.club. */


/* ---------- Abstaende ---------- */
.mt-0      { margin-top: 0; }
.mt-1      { margin-top: 1rem; }
.mt-12     { margin-top: 1.2rem; }
.mt-15     { margin-top: 1.5rem; }
.mt-3      { margin-top: 3rem; }
.mt-s      { margin-top: var(--s-s); }
.mt-m      { margin-top: var(--s-m); }
.mt-l      { margin-top: var(--s-l); }
.mb-xl     { margin-bottom: var(--s-xl); }
.m-0       { margin: 0; }
.ml-06     { margin-left: 0.6rem; }
.mi-auto   { margin-inline: auto; }

/* Fusszeile, die schon in einem Kasten mit eigener Linie steckt. */
.buendig-oben { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- Schrift und Ausrichtung ---------- */
.fs-85     { font-size: 0.85rem; }
.fs-88     { font-size: 0.88rem; }
.ta-center { text-align: center; }
.jc-center { justify-content: center; }
.titel-gross { font-size: clamp(2rem, 5vw, 3rem); }

/* Der graue Nachsatz unter einer Ueberschrift. */
.lead-grau {
  color: var(--grau);
  margin-top: 1.25rem;
  font-size: 0.94rem;
  max-width: 34ch;
}

/* ---------- Einblend-Verzoegerung ---------- */
/* Die Muster staffeln ihre Elemente ueber --verzoegerung. Die Zahl im Namen
   ist die Hundertstelsekunde. */
.verz-10 { --verzoegerung: .10s; }
.verz-12 { --verzoegerung: .12s; }
.verz-15 { --verzoegerung: .15s; }
.verz-20 { --verzoegerung: .20s; }
.verz-24 { --verzoegerung: .24s; }
.verz-30 { --verzoegerung: .30s; }

/* ---------- Deko-Kreise im Kosmetik-Muster ---------- */
.ringlicht--oben-rechts { top: -8rem;  right: -10rem; }
.ringlicht--unten-links { bottom: -12rem; left: -12rem; }
.ringlicht--oben-mitte  { top: -14rem; left: 50%; transform: translateX(-50%); }


/* ================================================================
   MUSTER-BAND
   Eigene Farben statt der Muster-Variablen: das Band soll in jedem
   der vier Entwuerfe gleich aussehen und nicht mitfaerben.
   ================================================================ */

.musterband {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(16, 17, 20, 0.92);
  color: #f4f4f5;
  font: 500 0.8rem/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  /* Ohne das erbt das Band auf manchen Mustern deren Textfarbe. */
  -webkit-font-smoothing: antialiased;
}

.musterband:hover,
.musterband:focus-visible {
  background: rgba(16, 17, 20, 1);
  border-color: rgba(255, 255, 255, 0.34);
}

.musterband:focus-visible {
  outline: 2px solid #f4f4f5;
  outline-offset: 3px;
}

.musterband__punkt {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d11a2a;
}

.musterband__text { color: inherit; }

.musterband__zurueck {
  color: #a1a1aa;
  white-space: nowrap;
}

/* Auf schmalen Geraeten verdeckt das Band sonst Bedienelemente. */
@media (max-width: 480px) {
  .musterband {
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
  }
  .musterband__zurueck { display: none; }
}

@media print {
  .musterband { display: none; }
}