/* =====================================================================
   SOFTWARE KOMPAKT — /software und /en/software auf dem Handy kuerzer
   Stand 17.10.2026. Gehoert zu /assets/js/software-kompakt.*.js.
   Dasselbe Muster wie websites-kompakt.*.css vom selben Tag.

   Rueckmeldung: auf dem Handy ist der Scrollweg viel zu lang. Gemessen bei
   390x844: 17.168px = 20,3 Bildschirme. Die eigenen Produkte allein
   6.621px = 7,8 Bildschirme, dazu Individuelle Software 2.016px,
   Automatisierung 1.783px, Vorgehen 1.753px und Technik 1.612px.

   Zwei Werkzeuge:
   1. PRODUKTKLAPPE, bis 900px. Ab dort stehen die Produkte einspaltig.
      Vier Produkte, man sucht das eigene, so wie auf /websites die eigene
      Branche. Anders als dort bleiben hier die Screens stehen: Sparte,
      Name, Status und Bilder sieht man, ohne etwas zu tippen. Text, Liste,
      Video und Schema klappen ein und bleiben im HTML. Aufgeklappt steht
      der Text direkt unter dem Namen, also da, wo getippt wurde. Die
      Screens ruecken darunter, das Video folgt wie bisher nach den Screens.
   2. WISCHREIHE, bis 700px: die Screens eines Produkts (FlowSNX und
      CargoSNX haben je drei) und die sechs Punkte Technik & Betrieb.

   Nicht angefasst: Plotter-SNX (zeigt mit Reitern ohnehin nur eine
   Funktion auf einmal), Automatisierung und Vorgehen (feste Reihenfolge,
   die man nicht wischt), Kaufmaennisches (stand frueher hinter einem Klick
   und wurde bewusst nach vorn geholt), Gegenueberstellung und Fragen.
   Kein Zwischen-CTA: das gebogene Band bleibt die eine Ausnahme auf
   /websites.

   Ohne das Skript bleibt alles wie vorher: offen und untereinander.
   ===================================================================== */

/* Grenzen muessen zu MQ_KLAPP und MQ_WISCH in software-kompakt.*.js passen. */
@media(max-width:900px){

  /* ---- 1. Produktklappe ---------------------------------------------- */
  /* Block statt Raster: die drei Flaechen stehen hier ohnehin
     untereinander, und das Skript stellt den Text im Dokument vor die
     Bilder. Abstand per margin statt row-gap, sonst hinterliesse der
     eingeklappte Text eine doppelte Luecke. */
  .prod.ist-klapp{display:block}
  .prod.ist-klapp > .prod__body:not([hidden]),
  .prod.ist-klapp > .prod__media{margin-top:clamp(20px,5vw,28px)}
  /* hidden="until-found" laesst den Kasten stehen (content-visibility statt
     display:none). Zugeklappt darf er weder Abstand noch Polster und Grund
     behalten, sonst stuende unter dem FeeFox-Screen ein leerer Kasten. */
  .prod.ist-klapp .prod__media > [hidden]{margin:0;padding:0;border:0;background:none;box-shadow:none}
  /* Der Knopf ist hoeher als die Schrift, der Kopf soll es nicht werden. */
  .prod.ist-klapp .prod__head h3{margin-bottom:4px}
  .klapp__knopf{
    display:flex;align-items:center;gap:14px;
    width:100%;min-height:48px;margin:0;padding:2px 0;
    border:0;border-radius:0;background:none;color:inherit;
    font:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  /* Winkel wie bei .faq__item summary::after, nur in der Farbe des
     Produkts: dieselbe Farbe wie Sparte und Status darueber und darunter. */
  .klapp__knopf::after{
    content:"";flex:0 0 auto;width:12px;height:12px;margin:0 7px 0 auto;
    border-right:2.4px solid var(--acc,var(--cyan));border-bottom:2.4px solid var(--acc,var(--cyan));
    transform:rotate(45deg) translate(-3px,-3px);transition:transform .22s ease;
  }
  .klapp__knopf[aria-expanded="true"]::after{transform:rotate(225deg) translate(-3px,-3px)}
  .klapp__knopf:focus-visible{outline:2.5px solid var(--cyan);outline-offset:2px;border-radius:5px}
}

@media(max-width:700px){

  /* ---- 2. Wischreihe ------------------------------------------------- */
  /* Die Reihe laeuft bis an beide Bildkanten (negatives --page) und haelt
     mit gleich grossem padding die erste Karte auf der Flucht der
     Ueberschrift. scroll-padding sorgt dafuer, dass jede Karte an
     derselben Flucht einrastet. */
  .shots.wisch,
  .umfang__grid.wisch{
    display:flex;gap:12px;max-width:none;
    margin-left:calc(var(--page) * -1);margin-right:calc(var(--page) * -1);
    padding:2px var(--page) 4px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--page);
    scrollbar-width:none;
  }
  .wisch::-webkit-scrollbar{display:none}
  /* 84%: die naechste Karte schaut gut 50px herein. Das ist genug, damit
     sie als Karte erkennbar ist und nicht wie ein abgeschnittener Rand. */
  .wisch > *{flex:0 0 84%;max-width:340px;min-width:0;scroll-snap-align:start}
  /* Screens behalten ihre eigene Hoehe, statt auf die hoechste Karte
     gestreckt zu werden. Der grosse Schlagschatten der Screens wuerde am
     Rand der Reihe hart abgeschnitten, es bleibt der feine Rahmen. */
  .shots.wisch{align-items:flex-start}
  .shots.wisch > .mock{box-shadow:0 0 0 1px rgba(174,185,199,.13)}
  /* Untereinander trennt nur eine Haarlinie oben. In der Reihe traegt jede
     Karte eine Haarlinie ringsum, sonst liest sich die angeschnittene
     Karte am rechten Rand wie abgeschnittener Text. Eckig wie jede Flaeche. */
  .umfang__grid.wisch > .feat{padding:24px 20px 26px;border:1px solid var(--line);border-radius:0}
  .wisch:focus-visible{outline:2.5px solid var(--cyan);outline-offset:-3px;border-radius:0}
  /* Karten rechts ausserhalb des Bildes werden vom Einblenden nie
     "gesehen". Das Skript setzt is-in, diese Regel sichert es ab. */
  .rv-on .wisch > .rv{opacity:1;transform:none}

  .wisch__punkte{display:flex;justify-content:center;gap:7px;margin:16px 0 0}
  /* --punkt-ruhe wie bei den Deck-Punkten im Hero (3:1). Der aktive Punkt
     traegt bei den Screens die Farbe des Produkts. */
  .wisch__punkte i{
    display:block;width:7px;height:7px;border-radius:4px;
    background:var(--punkt-ruhe);
    transition:width .25s ease,background-color .25s ease;
  }
  .wisch__punkte i.ist-an{width:20px;background:var(--acc,var(--cyan))}
}

@media(prefers-reduced-motion:reduce){
  .klapp__knopf::after,.wisch__punkte i{transition:none}
}