/* ============================================================
   Musterband · studio-siemering.de/arbeiten/
   10.08.2026

   Liegt über den sechs Musterfassungen und gehört NICHT zu
   ihnen. Es trägt deshalb die Farben von Studio Siemering und
   nicht die des jeweiligen Musters: Wer es liest, soll sofort
   sehen, dass hier jemand anderes spricht als die Seite
   darunter.

   WARUM ES UNTEN KLEBT. Die sechs Fassungen haben sechs
   verschiedene Kopfzeilen · sticky, fixed, im Fluss. Ein Band
   oben müsste jede davon einzeln berücksichtigen und läge im
   falschen Fall unsichtbar dahinter. Unten gibt es diesen
   Streit nicht, und gesehen wird es dort genauso.

   KEINE style-Attribute im Markup. Die Domain schickt
   style-src 'self' ohne 'unsafe-inline'; ein style="…" würde
   live still verworfen und der Fehler wäre lokal unsichtbar.
   ============================================================ */

.musterband {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2147483000;

  display: flex;
  align-items: center;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  justify-content: center;

  padding: .7rem clamp(1rem, 4vw, 2rem);
  padding-bottom: max(.7rem, env(safe-area-inset-bottom));

  background: #101316;
  color: #f2f0ec;
  border-top: 2px solid #d9b64a;

  font-family: "Public Sans", "Segoe UI", Tahoma, sans-serif;
  font-size: .875rem;
  line-height: 1.4;
  text-align: center;

  /* Der Schatten trägt Versatz und Weichzeichnung · ein Schein
     ohne Versatz wäre Dekoration und keine Höhe. */
  box-shadow: 0 -8px 28px rgb(0 0 0 / .45);
}

/* Der Inhalt der Seite darf nicht unter dem Band enden. Die
   Höhe ist gemessen, nicht geraten: zwei Zeilen auf dem Telefon,
   eine auf dem Schreibtisch. */
body { padding-bottom: 5.5rem; }
@media (min-width: 56rem) { body { padding-bottom: 3.75rem; } }

.musterband__marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  white-space: nowrap;
  color: #f2f0ec;
  text-decoration: none;
}
.musterband__marke:hover,
.musterband__marke:focus-visible { text-decoration: underline; }

.musterband__signet {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: #d9b64a;
}

/* 6,6:1 auf dem dunklen Grund · reicht für Fließtext. */
.musterband__satz {
  margin: 0;
  color: #b6bcc2;
  max-width: 48ch;
}

.musterband__taste {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border-radius: 8px;
  border: 1px solid #3d434b;
  background: transparent;
  color: #f2f0ec;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s cubic-bezier(.22, 1, .36, 1),
              border-color .18s cubic-bezier(.22, 1, .36, 1);
}
.musterband__taste:hover,
.musterband__taste:focus-visible {
  background: #1a1f25;
  border-color: #d9b64a;
}
.musterband__taste--voll {
  background: #d9b64a;
  border-color: #d9b64a;
  color: #171208;
  font-weight: 600;
}
.musterband__taste--voll:hover,
.musterband__taste--voll:focus-visible {
  background: #e6c766;
  border-color: #e6c766;
}

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

/* Auf dem Telefon fällt der lange Satz weg. Die beiden
   wichtigen Aussagen · "Muster" und "zurück zur Übersicht" ·
   bleiben stehen. */
@media (max-width: 46rem) {
  .musterband { gap: .5rem .75rem; font-size: .8125rem; }
  .musterband__satz { display: none; }
}

/* Beim Drucken gehört das Band nicht aufs Papier. */
@media print {
  .musterband { display: none; }
  body { padding-bottom: 0; }
}

/* ── Oben statt unten · im Pflegebereich ───────────────────
   Die Vorführung des Pflegebereichs ist keine Seite, sondern
   eine Oberfläche: Seitenleiste und Vorschau kleben am
   Fensterrand und rechnen ihre Höhe gegen 100dvh. Ein Band,
   das unten festklebt, läge dort über dem eigenen Namen und
   über der Vorschau · und die Höhe, die es wegnimmt, ist in
   deren Rechnung nirgends enthalten.

   Deshalb steht es dort oben und IM FLUSS. Es schiebt den
   Kopf des Pflegebereichs nach unten, statt etwas zu
   verdecken; was die klebenden Spalten davon wissen müssen,
   steht als --musterband-hoehe in deren Stylesheet.

   Warum überhaupt: Wer aus der Werkliste in den Pflegebereich
   geht, hatte bis hierhin keinen Weg zurück. Der Kopf führt
   nur auf die Musterseite, und die Musterseite ist nicht
   studio-siemering.de.
   ───────────────────────────────────────────────────────── */

.musterband--oben {
  position: static;
  border-top: 0;
  border-bottom: 2px solid #d9b64a;
  box-shadow: none;
  justify-content: flex-start;
}

/* Der Satz drängt die Tasten sonst an den rechten Rand, wo im
   Pflegebereich schon "Vorschau" und "Website ansehen" stehen.

   Ohne die Breite bleibt es bei 48ch, und der Satz bräche auf drei
   Zeilen um · das Band wäre dreimal so hoch wie nötig, und diese
   Höhe fehlt unten der Seitenleiste. */
.musterband--oben .musterband__satz {
  margin-right: auto;
  max-width: none;
  text-align: left;
}

/* Der Weg zurück ist hier die einzige Handlung im Band · in den
   Fassungen unten ist es die zweite neben der Vorführung. */
.musterband--oben .musterband__taste {
  background: #d9b64a;
  border-color: #d9b64a;
  color: #171208;
  font-weight: 600;
}
.musterband--oben .musterband__taste:hover,
.musterband--oben .musterband__taste:focus-visible {
  background: #e6c766;
  border-color: #e6c766;
}

/* Das Polster gilt dem festen Band. Steht das Band oben, gibt es
   unten nichts, was den Fuß der Seite verdecken könnte · und im
   Pflegebereich wären 5,5rem Leerraum unter der Seitenleiste. */
body:has(.musterband--oben) { padding-bottom: 0; }


/* ── Im Rahmen der Werkliste ───────────────────────────────
   Gesetzt vom Skript am Ende von musterband.php, und nur dann,
   wenn die Seite wirklich in einem Rahmen derselben Domain
   steht.

   Dort trägt die Leiste des Schaufensters bereits Marke und
   Schliessen. Was hier bleibt, ist das, was nur diese Seite
   selbst sagen kann: dass der Betrieb erfunden ist · und der
   Weg in den Pflegebereich.

   "Alle Arbeiten" muss weg, nicht nur der Ordnung halber: Der
   Verweis lüde die Werkliste IN den Rahmen, also eine Werkliste
   in der Werkliste. Dasselbe gilt für die Marke daneben.
   ────────────────────────────────────────────────────────── */

.im-rahmen .musterband__marke,
.im-rahmen .musterband__taste--zurueck { display: none; }

/* Ohne die Marke links steht der Satz sonst allein in der Mitte
   und die Taste weit rechts · das sieht nach einer Lücke aus,
   in der etwas fehlt. */
.im-rahmen .musterband { justify-content: center; }

/* Am Telefon fällt der Satz sonst weg · das ist oben so
   eingerichtet, weil dort die Marke daneben dasselbe in kurz
   sagt. Im Rahmen ist die Marke weg, und dann bliebe nur noch
   die Taste stehen: keine Zeile mehr darüber, dass der Betrieb
   erfunden und die Bilder erzeugt sind. Also hier zurück. */
@media (max-width: 46rem) {
  .im-rahmen .musterband__satz { display: block; }
}

/* ── Ausnahmen je Fassung ──────────────────────────────────
   STEHT AM DATEIENDE UND NIRGENDS SONST. Diese Regeln heben
   die klebenden Leisten der einzelnen Musterfassungen über
   das Band. Alles, was nach ihnen käme, gewänne gegen sie.

   Eine Leiste, die unten klebt, und ein Band, das unten
   klebt, liegen sonst übereinander · und zwar nur auf dem
   Telefon, wo es niemand testet.
   ────────────────────────────────────────────────────────── */

.mobilleiste,          /* Trattoria Serafino */
.tel-leiste,           /* Physiotherapie am Mühlenweg */
.handyleiste {         /* Malerwerkstatt Ahlers */
  bottom: 5.5rem;
}

@media (min-width: 56rem) {
  .mobilleiste,
  .tel-leiste,
  .handyleiste { bottom: 3.75rem; }
}