/* Strivera-Demo Mechanik-Basis-CSS (bewährt: Burmeister + Schutzhund-Berlin 07/2026).
   Das ist der SICHERHEITS-LAYER, kein Design: 1:1 übernehmen, Design-Tokens
   und Layout kommen pro Demo individuell obendrauf.
   Jede Regel sichert eine nummerierte Falle aus feedback_coding_fallen.md ab. */

/* Reset + Pflicht-Regeln */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}          /* Fallen 11/20/26: hidden schlägt jede display-Klasse */
img{display:block;max-width:100%;height:auto} /* Falle 5: sonst greift aspect-ratio nicht */
html{scroll-behavior:smooth}              /* Achtung Falle 31: Headless-Klicks via el.click() testen */

/* A11y-Minimum (Schritt 4b) */
:focus-visible{outline:2px solid var(--accent,#204870);outline-offset:2px;border-radius:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent,#204870);color:#fff;padding:10px 18px}
.skip-link:focus-visible{left:12px;top:12px}

/* Honeypot (Demo-Submit) — offscreen, von QA-Scans per tabindex/aria-hidden erkannt */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Marquee: margin-right statt gap (Falle 35 — gap lässt den Loop springen) */
.marquee{overflow:hidden}
.marquee-track{display:inline-flex;white-space:nowrap;animation:marquee 60s linear infinite}
.marquee-track span{margin-right:34px}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sticky Mobile-Bar (Pflicht bei lokalen KMU) — body braucht padding-bottom! */
.sticky-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper,#fff);
  border-top:1px solid var(--line-strong,#B9B5A6);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.sticky-bar .btn{min-height:48px}

/* Ergebnis-Panel als Mobile-Bottom-Sheet (Falle 35 + Schutzhund-top:auto-Falle).
   Desktop: Panel bleibt im Flow (ggf. align-items:center im Eltern-Grid — AUSMITTELN,
   und margin-bottom:0 am letzten Options-Block, Pascal-Feedback 07/2026). */
.kp-close{display:none}
.kp-backdrop{position:fixed;inset:0;z-index:70;background:rgba(20,25,30,.5)}
@keyframes kp-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* Scroll-Reveal: IMMER :where() (Falle 15 — :is() hebt Spezifität, .is-in verliert).
   Hero/Above-fold NIE in die Liste (Falle 28). Selektoren pro Demo ersetzen: */
.has-js :where(.reveal-item){
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease,transform .55s ease;
}
.has-js :where(.reveal-item).is-in{opacity:1;transform:none}

/* Mobile-Breakpoint-Pflichtteile */
@media (max-width:760px){
  .sticky-bar{display:flex}
  body{padding-bottom:76px}               /* Sticky-Bar verdeckt sonst Content */

  /* Bottom-Sheet: top:auto ist PFLICHT — erbt das Panel ein Desktop-top
     (sticky/absolute), spannt es sich sonst über den halben Viewport */
  .kp-open{
    display:block;
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:71;
    max-height:78vh;overflow:auto;
    margin:0;max-width:none;
    border:0;outline:none;border-top:3px solid var(--accent,#204870);
    border-radius:18px 18px 0 0;
    box-shadow:0 -24px 60px rgba(20,25,30,.3);
    padding:30px 22px calc(26px + env(safe-area-inset-bottom));
    animation:kp-up .28s ease forwards;
  }
  .kp-open .kp-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:10px;right:12px;
    width:44px;height:44px;
    background:none;border:1px solid var(--line-strong,#B9B5A6);border-radius:50%;
    font-size:1.5rem;line-height:1;cursor:pointer;
  }
}

/* Fließtext in Flex-Containern: Text IMMER in EIN span wrappen (Falle 38 —
   Flex frisst Leerzeichen zwischen strong/em/a und Textknoten).
   Muster: <li><span class="txt"><strong>Fett</strong> und Rest</span></li> */

/* Reduzierte Bewegung — Pflicht-Block ans CSS-Ende, .reveal-item-Liste synchron halten */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .has-js :where(.reveal-item){opacity:1;transform:none}
}