/* =====================================================================
   schliff.css · Qualitätsrunden Startseite, Preise, Shop, Gründung,
   Kontakt (Oktober 2026). Liegt NACH stil.css / stil.min.css und
   ändert nur Inhalt, Hero und Bewegung. Kopf, Fuss, Navigation und
   Handy-Leiste bleiben unberührt (eigener Auftrag «einheitliche Navigation»).
   Protokoll: docs/STARTSEITE-RUNDEN.md
   ===================================================================== */

/* ---- Runde 1 · CLS: die Bitleiste hält ihren Platz ------------------
   Vorher war der Akzentstrich 3 px hoch und wuchs beim Hereinscrollen
   auf eine Textzeile (0101…). Jede Überschrift darunter sprang um 6 bis
   25 px. Jetzt ist der Platz von Anfang an reserviert; der Strich bleibt
   als 3 px hohe Linie in der Mitte dieser Zeile sichtbar. */
.kopfzeile .strich:not([data-bits]),
.bitzeile:not([data-bits]) {
  height: 0.8rem;
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}
.kopfzeile .strich:not([data-bits]) { margin-bottom: 1.25rem; }
@media (max-width: 30rem) {
  .kopfzeile .strich:not([data-bits]), .bitzeile:not([data-bits]) { height: 0.72rem; }
}

/* Die freistehende Bitzeile (Seitenkopf, unter den Paketen) stand bisher
   in der Fliesstextschrift, weiss und 28 px hoch. Jetzt wie in jeder
   Kopfzeile: Mono, gesperrt, Verlauf. */
.bitzeile[data-bits] {
  font: 600 0.8rem/1 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.42em;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  color: var(--cyan);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .bitzeile[data-bits]:not(.schluss-bits) {
    background: linear-gradient(90deg, var(--koenig), var(--cyan) 55%, rgba(108,231,250,0.35));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .teil--hell .bitzeile[data-bits] {
    background: linear-gradient(90deg, var(--akzent-tief), var(--akzent-text) 55%, rgba(15,79,168,0.4));
    -webkit-background-clip: text;
    background-clip: text;
  }
}
@media (max-width: 30rem) {
  .bitzeile[data-bits] { font-size: 0.72rem; letter-spacing: 0.3em; }
}

/* ---- Runde 1 · «Nach oben» lag am Rechner unter dem Chat-Knopf ------- */
@media (min-width: 46rem) {
  body:has(.lmc-knopf) .hoch { bottom: calc(16px + 48px + 14px); right: 16px; }
}

/* ---- Runde 2 · Hero-Szenen (Canvas) -----------------------------------
   Ohne JavaScript bleibt das Canvas leer und nimmt am Rechner keinen
   Platz weg (absolut), am Telefon wird es gar nicht erst gezeigt. */
.szene { display: block; pointer-events: none; }
html:not(.schliff-js) .szene { display: none; }
.seiten-kopf.seiten-kopf--szene { flex-direction: column; align-items: stretch; justify-content: center; }
.seiten-kopf .szene {
  flex: 0 0 auto;
  width: min(100% - 2.5rem, 34rem);
  height: 17rem;
  margin: 1.8rem auto 0;
}
@media (min-width: 64rem) {
  .seiten-kopf .szene {
    position: absolute;
    z-index: 0;
    margin: 0;
    top: 50%;
    right: max(1.5rem, calc((100% - var(--mass, 1180px)) / 2 - 1rem));
    width: min(30vw, 27rem);
    height: min(36rem, 92%);
    transform: translateY(-50%);
  }
  .seiten-kopf--szene .mass { position: relative; z-index: 1; }
}
.gr-schluss { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.gr-schluss .szene {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
}
@media print { .szene { display: none !important; } }

/* ---- Runde 3 · eigene Auftritte (gesetzt von schliff.js) ------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-auftritt="wisch"] {
    clip-path: inset(-1rem 100% -1rem -1rem);
    transition: clip-path 0.9s cubic-bezier(.2,.7,.1,1) var(--verzug, 0ms);
  }
  [data-auftritt="wisch"][data-auftritt-da] { clip-path: inset(-1rem -1rem -1rem -1rem); }
  [data-auftritt="zeile"] { position: relative; }
  [data-auftritt="zeile"] .ikon {
    transform: scale(0.4) rotate(-20deg); opacity: 0;
    transition: transform 0.7s cubic-bezier(.34,1.56,.64,1) var(--verzug, 0ms), opacity 0.4s ease-out var(--verzug, 0ms);
  }
  [data-auftritt="zeile"][data-auftritt-da] .ikon { transform: none; opacity: 1; }
  [data-auftritt="zeile"]::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, var(--cyan), rgba(108,231,250,0));
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1s cubic-bezier(.2,.7,.1,1) calc(var(--verzug, 0ms) + 120ms);
    pointer-events: none;
  }
  [data-auftritt="zeile"][data-auftritt-da]::after { transform: scaleX(1); opacity: 0.55; }
  [data-auftritt="zeile"].taste::after { display: none; }
}

/* ---- Runde 4 · Typografie am grossen Bildschirm ----------------------
   Auf 1440 px standen die Abschnittstitel bei 54 px, der Fliesstext
   darunter in einer 46rem-Spalte. Gegenüber gasser.html wirkte das
   klein und eng. Etwas grösser, eine Spur mehr Laufweite der Spalte. */
@media (min-width: 80rem) {
  .kopfzeile { max-width: 54rem; }
  .kopfzeile h2 { font-size: clamp(3.4rem, 1.2rem + 2.9vw, 4.2rem); line-height: 1.02; }
  .kopfzeile .still { font-size: 1.12rem; max-width: 40rem; }
}

/* Kurzvideo im Kopfbereich: Hintergrundszenen (Canvas) nie neben, unter oder hinter Video, Tasten und Bildunterschrift.
   Beide wollen die rechte Spalte; das Video hat Vorrang, die Szene entfällt. */
.seiten-kopf:has(.lm-clip--oben) .szene { display: none !important; }
.seiten-kopf .lm-clip--oben { position: relative; z-index: 2; isolation: isolate; }
.seiten-kopf .lm-clip--oben .lm-clip-buehne { background: #070D1A; }

/* Kassenbon (Preise) unter 64rem im normalen Fluss: Der Canvas war 17rem hoch, der Bon braucht rund 430 px plus Schlitz.
   Folge war ein oben und unten abgeschnittenes Papierfragment mit leerem Rest. Höhe an den Bon angepasst. */
@media (max-width: 63.99rem) {
  .seiten-kopf .szene[data-szene="beleg"] { height: 31.5rem; }
}
@media (max-width: 32.5rem) {
  .seiten-kopf .szene[data-szene="beleg"] { height: 26rem; }
}