/* Kartei: Karte anklicken, sie wird gross und dreht sich um (js/kartei.js). Rueckseite = Datenblatt der Maschine.
   Gleiche Stoffe wie die Vorderseite: Papier, Linierung, Reiter, Laborabzug mit Klammer */
.kartei { cursor: pointer; transition: translate .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s cubic-bezier(.2, .7, .2, 1); }
.kartei:hover { translate: 0 -4px; box-shadow: 0 18px 26px -18px color-mix(in srgb, var(--papier-tief) 90%, transparent); }
.kartei:active { translate: 0 -1px; }
/* Gezogen: die Luecke bleibt stehen, bis die Karte zurueckfliegt */
.kartei.gezogen { visibility: hidden; }
.kartei.fliegt { transition: none; translate: none; backface-visibility: hidden; }
.umdrehen { display: flex; align-items: center; gap: 8px; margin: 12px 0 0 auto; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.umdrehen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kartei:hover .umdrehen, .umdrehen:focus-visible { color: var(--text); }

/* Dialog: ganzes Fenster, durchsichtig; das Blatt steht ueber der Tafelmitte (--mitte-x setzt kartei.js) */
.karteikarte { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: none; overflow: hidden; perspective: 1600px; color: var(--text); }
.karteikarte::backdrop { background: rgba(4, 18, 40, .55); animation: abdunkeln .35s ease both; }
.karteikarte.geht::backdrop { animation: aufhellen .45s ease both; }
@keyframes abdunkeln { from { background: rgba(4, 18, 40, 0); } }
@keyframes aufhellen { to { background: rgba(4, 18, 40, 0); } }
.rueckseite-blatt { position: absolute; left: var(--mitte-x, 50%); top: 50%; translate: -50% -50%; width: min(700px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  overflow: auto; overscroll-behavior: contain; padding: 24px 28px 28px; color: var(--text); backface-visibility: hidden;
  /* Scrollt das Blatt (flache Laptops, Handy), zeigt ein Schatten an der Kante, dass es weitergeht: Deckflaechen wandern mit dem Inhalt (local),
     die Schatten stehen fest (scroll) und werden nur sichtbar, wo keine Deckflaeche mehr liegt */
  background: linear-gradient(var(--seite) 40%, transparent) top / 100% 48px no-repeat local, linear-gradient(transparent, var(--seite) 60%) bottom / 100% 48px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .22), transparent) top / 100% 14px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .22), transparent) bottom / 100% 14px no-repeat scroll, var(--seite);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .6); }
.schliessen { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border: 1.5px solid var(--text-2); border-radius: 50%;
  background: var(--seite); color: var(--text); font: 400 22px/1 var(--schrift); cursor: pointer; }
.schliessen:hover, .schliessen:focus-visible { border-color: var(--text); }

/* Inhalt der Rueckseite */
.rs-kopf { display: flex; gap: 16px; align-items: baseline; padding-right: 52px; font: 700 var(--t-label) var(--zahl); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rs-oben { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; padding-bottom: 20px;
  border-bottom: 1.5px solid rgba(29, 91, 214, .55); }
.rs-foto { position: relative; margin: 8px 0 0; padding: 8px; background: #fff; transform: rotate(-1.4deg);
  box-shadow: 0 1px 1px color-mix(in srgb, var(--text) 22%, transparent), 0 14px 20px -12px color-mix(in srgb, var(--text) 55%, transparent); }
.rs-foto img { display: block; width: 100%; height: auto; }
.rs-foto .klammer { left: 78%; }
.rueckseite-blatt h3 { font: 400 var(--t-titel)/1 var(--titel); text-transform: uppercase; text-wrap: balance; }
.rs-preis { margin-top: 16px; font: 700 var(--t-titel)/1 var(--zahl); }
.rs-preis small { display: block; margin-top: 8px; font: 400 var(--t-ui)/1.4 var(--schrift); color: var(--text-2); }
.rs-oben .knopf { margin-top: 20px; }
.rs-hinweis { margin-top: 10px; font: 400 var(--t-ui)/1.4 var(--schrift); color: var(--text-2); }
.rs-spalten { display: grid; gap: 20px; margin-top: 16px; }
.rs-spalten h4 { margin-bottom: 4px; font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
/* Je Liste ein Raster mit zwei Spalten: die Zeilen richten sich aneinander aus (nebeneinander stehende Listen verrutschten,
   sobald ein Wert umbrach), Beschriftung ueber dem Wert */
.rs-spalten dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.rs-spalten dl div { padding: 8px 0 7px; border-bottom: 1px solid rgba(29, 91, 214, .16); }
.rs-spalten dt { font: 600 var(--t-label) var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.rs-spalten dd { font: 400 var(--t-ui)/1.4 var(--schrift); }
.rs-quelle { margin-top: 16px; font: 400 var(--t-label)/1.4 var(--schrift); color: var(--text-2); }

@media (max-width: 799px) {
  .rueckseite-blatt { left: 50%; padding: 20px 18px 24px; }
  .rs-oben, .rs-spalten { grid-template-columns: 1fr; }
  .rs-spalten dl { column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .kartei, .karteikarte::backdrop { transition: none; animation: none; }
}