/* =========================================================================
   Stein.Digital — gemeinsame Basis der Beispielseiten

   Hier steht AUSDRUECKLICH kein Layout. Nur das, was auf allen fuenf Seiten
   technisch identisch sein muss:

     - Zuruecksetzen der Browservorgaben
     - das Kennzeichnungsband oben
     - der Kennzeichnungshinweis im Fuss
     - Sprungmarke und visuell versteckter Text

   Alles Sichtbare — Raster, Typografie, Farben, Abstaende, Bildbehandlung —
   liegt je Marke in einer eigenen Datei. Das ist der Punkt: die fuenf Seiten
   sollen nicht eine Vorlage in fuenf Farben sein, sondern fuenf Entwuerfe.
   Wer hier etwas Gestalterisches ergaenzt, macht sie wieder gleich.

   Das Band ist bewusst das einzige Element in Stein.Digital-Farben. Es
   gehoert dem Absender, nicht dem dargestellten Betrieb, und soll sich
   sichtbar vom Rest der Seite abheben.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body { margin: 0; overflow-x: hidden; }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

.versteckt {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #1c2b3a; color: #fff; padding: 0.75rem 1.25rem;
  font: 700 0.9375rem/1.3 "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  text-decoration: none;
}
.sprung:focus { left: 0; }

/* ---------- Kennzeichnungsband ----------
   Oben, nicht schliessbar, nicht kleingedruckt. Wer die Seite oeffnet, soll
   in derselben Sekunde wissen, dass hier kein echter Betrieb steht. */
.band {
  background: #1c2b3a;
  color: #dfe4e9;
  border-bottom: 3px solid #c0603a;
  font: 400 0.875rem/1.45 "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  position: relative;
  z-index: 90;
}
.band__innen {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding: 0.7rem clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem;
}
.band__text { margin: 0; }
.band__text strong {
  color: #f0c88a; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 800;
}
.band__aktionen {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1rem; margin-left: auto;
}
.band__zurueck {
  color: #dfe4e9; text-decoration: none; font-weight: 600; white-space: nowrap;
}
.band__zurueck:hover { color: #fff; text-decoration: underline; }
.band__cta {
  background: #b45332; color: #fff; text-decoration: none; font-weight: 700;
  border-radius: 6px; padding: 0.45rem 0.95rem; white-space: nowrap;
}
.band__cta:hover { background: #a44b28; }
.band a:focus-visible, .sprung:focus-visible {
  outline: 3px solid #f0c88a; outline-offset: 2px;
}

/* ---------- Kennzeichnung im Fuss ----------
   Wiederholt, was oben steht. Wer ueber einen geteilten Link direkt im
   unteren Seitenbereich landet, soll die Kennzeichnung nicht verpassen. */
.marke {
  background: #1c2b3a; color: rgba(223, 228, 233, 0.82);
  font: 400 0.875rem/1.6 "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  padding-block: 1.75rem;
}
.marke__innen {
  width: 100%; max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  align-items: center; justify-content: space-between;
}
.marke p { max-width: 64ch; margin: 0; }
.marke strong { color: #f0c88a; }
.marke a { color: #fff; }
.marke__cta {
  display: inline-block; background: #b45332; color: #fff;
  text-decoration: none; font-weight: 700; border-radius: 6px;
  padding: 0.6rem 1.2rem; white-space: nowrap;
}
.marke__cta:hover { background: #a44b28; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}