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

   Rueckmeldung: auf dem Handy ist der Scrollweg viel zu lang. Gemessen bei
   390x844: 12.854px = 15,2 Bildschirme. Die groessten Posten waren der
   eigene Shop 2.735px, Leistungen 2.098px, Technik 1.888px und
   Marktplaetze 1.778px.

   Zwei Werkzeuge:
   1. KLAPPLISTE fuer die Marktplaetze, bis 900px. Ab dort steht das Raster
      ohnehin einspaltig. Amazon, eBay, Etsy: man sucht den eigenen Kanal,
      so wie auf /websites die eigene Branche. Nummer und Name bleiben
      sichtbar, Claim und Text bleiben im HTML. Suchmaschinen lesen sie
      weiter, und die Seitensuche des Browsers klappt einen Treffer dank
      hidden="until-found" selbst auf. Optik wie bei den Fragen weiter unten:
      Haarlinie, Winkel, kein Kasten.
   2. WISCHREIHE fuer gleichrangige Karten, bis 700px: die drei Aussagen
      unter dem Fall Plotter-FIX, die vier Leistungen und die sechs Punkte
      Technik & Betrieb. Die naechste Karte schaut rechts an, die Punkte
      darunter zeigen den Stand.

   Nicht angefasst: Fall, Zahlen und Quellenangabe (das ist der Beleg),
   Vorgehen (feste Reihenfolge, die man nicht wischt), die
   Gegenueberstellung (gehoert nebeneinander gelesen) und die Fragen (sind
   schon aufklappbar). 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 shops-kompakt.*.js passen. */
@media(max-width:900px){

  /* ---- 1. Klappliste ------------------------------------------------- */
  .klappliste{display:block;border-top:1px solid var(--linie)}
  /* Die Karte loest sich in eine Zeile auf: kein Innenabstand, keine
     Oberkante, kein Hover-Grund. Getrennt wird mit der Haarlinie, wie bei
     den Fragen. */
  .klappliste > .ist-klapp{
    margin:0;padding:0;border:0;border-bottom:1px solid var(--linie);
    border-radius:0;background:none;box-shadow:none;
  }
  /* Nummer und Name auf einer Zeile. Der aufgeklappte Teil laeuft darunter
     ueber die volle Breite, sonst bliebe links eine leere Nummernspalte. */
  .kanal.ist-klapp{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:12px;align-items:center;
  }
  .kanal.ist-klapp .kanal__no{grid-column:1;padding-left:4px}
  .kanal.ist-klapp h3{grid-column:2}
  .kanal.ist-klapp .klapp__inhalt{grid-column:1 / -1}
  .klappliste > .ist-klapp h3{
    margin:0;font-size:1.06rem;font-weight:640;letter-spacing:-.01em;line-height:1.3;
  }
  .klapp__knopf{
    display:flex;align-items:center;gap:14px;
    width:100%;min-height:58px;margin:0;padding:15px 4px 15px 0;
    border:0;border-radius:0;background:none;color:var(--text);
    font:inherit;text-align:left;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease;
  }
  /* Winkel wie bei .faq__item summary::after in shops.css — derselbe
     Baustein, nicht ein zweiter, der nur aehnlich aussieht. */
  .klapp__knopf::after{
    content:"";flex:0 0 auto;width:11px;height:11px;margin:0 4px 0 auto;
    border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);
    transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;
  }
  .klapp__knopf[aria-expanded="true"]{color:var(--akzent)}
  .klapp__knopf[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
  .klapp__knopf:focus-visible{outline:2.5px solid var(--akzent);outline-offset:-2px}
  /* Polster nur, wenn offen: hidden="until-found" laesst den Kasten stehen
     (content-visibility statt display:none), sonst blieben zugeklappt
     22px Luft unter jeder Zeile. */
  .klapp__inhalt:not([hidden]){padding:0 4px 22px}
  /* Der Text stand bisher als letztes Kind direkt in der Karte
     (.kanal > p:last-child). Im Klappteil greift das nicht mehr. */
  .kanal.ist-klapp .kanal__claim{margin:0 0 10px}
  .kanal.ist-klapp .klapp__inhalt > p:last-child{
    margin:0;color:var(--ton);line-height:1.65;font-size:.99rem;
  }
}
@media(max-width:900px) and (hover:hover){
  .klapp__knopf:hover{color:var(--akzent)}
}

@media(max-width:700px){

  /* ---- 2. Wischreihe ------------------------------------------------- */
  /* Die Reihe laeuft bis an beide Bildkanten (negatives --page) und haelt
     mit gleich grossem padding den Text der ersten Karte auf der Flucht
     der Ueberschrift. scroll-padding sorgt dafuer, dass jede Karte an
     derselben Flucht einrastet. */
  .naeher.wisch,
  .leist__grid.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}
  /* Untereinander trennt nur eine Haarlinie oben. In der Reihe traegt jede
     Karte eine Haarlinie ringsum: ohne sie liest sich die angeschnittene
     Karte am rechten Rand wie abgeschnittener Text. Eckig, wie jede Flaeche
     im Haus. Das ist die einzige Abweichung von "keine Kaesten", und nur
     hier in der Reihe. */
  .naeher.wisch > .naeher__teil,
  .leist__grid.wisch > .tat,
  .umfang__grid.wisch > .feat{
    padding:24px 20px 26px;border:1px solid var(--linie);border-radius:0;
  }
  .wisch:focus-visible{outline:2.5px solid var(--akzent);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}
  /* Ruhende Punkte in --leise, die Zone liefert den passenden Ton: auf
     Navy hell, auf Papier dunkel. */
  .wisch__punkte i{
    display:block;width:7px;height:7px;border-radius:4px;
    background:var(--leise);opacity:.55;
    transition:width .25s ease,background-color .25s ease,opacity .25s ease;
  }
  .wisch__punkte i.ist-an{width:20px;background:var(--akzent);opacity:1}
}

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