/* ============================================================
   Bausteinlager „Deine neue Webseite" — kartenfaecher.css (29.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-kartenfaecher-20261029
   Karten wie ein Blatt in der Hand. Mit Maus oder Finger durchblättern, Karte antippen (mit der Maus auch nach oben ziehen)
   = sie fliegt heraus und zeigt alles groß. Für Leistungen, Pakete, Speisekarte, Team, Referenzen.
   EINBAU:
     <div class="faecher" data-faecher aria-label="Unsere Leistungen">
       <button class="fk" type="button">
         <img src="bilder/x.webp" alt="" width="400" height="300">
         <span class="fk-titel">Umzugsreinigung</span>
         <span class="fk-kurz">Besenrein bis abnahmefertig.</span>
         <span class="fk-mehr" hidden>Langer Text … <a href="#kontakt">Jetzt anfragen</a></span>
       </button> … (3–9 Karten)
     </div>
   Farben: --fk-papier, --fk-tinte, --fk-akzent (Standard aus glas.css)
   ============================================================ */
.faecher{
  --fk-papier:#fff;--fk-tinte:var(--tinte,#14213A);--fk-tinte-2:var(--tinte-2,#4A5568);--fk-akzent:var(--signal-tief,#245A9F);
  --fk-b:clamp(128px,38vw,224px);--fk-h:calc(var(--fk-b) * 1.42);
  position:relative;height:calc(var(--fk-h) + 46px + var(--fk-unten,40px) + 30px);margin:0 auto;max-width:900px;touch-action:pan-y;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none
}
.fk{position:absolute;left:calc(50% - var(--fk-b) / 2);bottom:calc(var(--fk-unten,40px) + 30px);width:var(--fk-b);height:var(--fk-h);padding:0;margin:0;border:0;cursor:pointer;
  display:flex;flex-direction:column;text-align:left;overflow:hidden;border-radius:16px;background:var(--fk-papier);color:var(--fk-tinte);font:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,33,58,.08),0 18px 36px -18px rgba(10,18,30,.55),0 4px 10px -4px rgba(10,18,30,.18);
  transform-origin:50% 122%;transition:transform .42s cubic-bezier(.25,1.25,.45,1),box-shadow .3s ease,opacity .35s ease;will-change:transform}
.fk img{display:block;flex:none;width:100%;height:54%;object-fit:cover;pointer-events:none;background:#E8ECF1}
.fk-titel{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:none;padding:12px 13px 0;margin-bottom:3px;font-weight:800;font-size:clamp(15px,1.6vw,17px);line-height:1.15}
.fk-kurz{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:0 13px;font-size:13px;line-height:1.35;color:var(--fk-tinte-2)}
.fk-mehr{display:none}
.fk.-oben{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 2px var(--fk-akzent),0 30px 50px -22px rgba(10,18,30,.6),0 6px 14px -6px rgba(10,18,30,.25)}
.fk:focus-visible{outline:3px solid var(--fk-akzent);outline-offset:3px}
.faecher-hinweis{position:absolute;left:0;right:0;bottom:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:13px;font-weight:700;color:var(--fk-tinte-2);transition:opacity .4s}
.faecher.-beruehrt .faecher-hinweis{opacity:0}
/* Groß gezeigte Karte (Dialog) */
.fk-schleier{position:fixed;inset:0;z-index:9000;background:rgba(8,12,20,.55);opacity:0;transition:opacity .35s ease}
.fk-schleier.-da{opacity:1}
.fk-ebene{position:fixed;inset:0;z-index:9001;display:grid;place-items:center;padding:16px;pointer-events:none}
.fk-gross{position:relative;pointer-events:auto;width:min(100%,440px);max-height:calc(100svh - 32px);overflow:auto;margin:0;
  border-radius:20px;background:var(--fk-papier,#fff);color:var(--fk-tinte,#14213A);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.4) inset}
.fk-gross img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#E8ECF1}
.fk-gross .fk-innen{padding:20px 22px 22px}
.fk-gross h3{margin:0 0 8px;font-size:24px;line-height:1.15}
.fk-gross p{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--fk-tinte-2,#4A5568)}
.fk-gross a{color:var(--fk-akzent,#245A9F);font-weight:800}
.fk-zu{position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#14213A;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.fk-zu svg{width:20px;height:20px}
.fk-zu:focus-visible{outline:3px solid var(--fk-akzent,#245A9F);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.fk,.fk-schleier{transition:none}}