.fl3d{position:fixed;inset:0;z-index:9000;display:none;flex-direction:column;background:rgba(9,38,42,.80);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#F5FAF9;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;opacity:0;transition:opacity .35s ease}
.fl3d.on{display:flex}.fl3d.vis{opacity:1}
.fl3d *{box-sizing:border-box}
.fl3d-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(16px,3vw,32px) 8px}
.fl3d-top .t{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#AADEC7}
.fl3d-top .t b{display:block;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;margin-top:3px}
.fl3d-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.fl3d-x:hover{background:rgba(255,255,255,.18)}
/* Buehne: die Klappen schwingen beim Falten zur Kamera hin und werden dabei perspektivisch groesser - deshalb flache
   Perspektive (3200 px) und Luft nach oben/unten (siehe geo(): Faktor 1.14), sonst wird der obere Rand abgeschnitten. */
.fl3d-stage{flex:1;position:relative;perspective:3200px;perspective-origin:50% 48%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden;min-height:200px}
.fl3d-stage.drag{cursor:grabbing}
/* Das Objekt steht mit der MITTLEREN Seite fest im Zentrum: beim Falten bewegt sich nur die jeweilige Klappe, nichts
   rutscht oder zoomt mit (auf dem Handy wird der Zoom vor bzw. nach dem Falten als eigener Schritt gefahren). */
.fl3d-obj{position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:scale(var(--k,1)) rotateX(var(--rx,4deg)) rotateY(var(--ry,-11deg));transition:transform .55s cubic-bezier(.4,0,.2,1)}
.fl3d-stage.drag .fl3d-obj{transition:none}
.fl3d-p{position:absolute;top:0;height:100%;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.45,.02,.18,1)}
.fl3d.snap .fl3d-p,.fl3d.snap .fl3d-obj,.fl3d.snap .fl3d-shadow{transition:none!important}   /* beim Oeffnen: zugeklappt hinstellen, nicht hinfalten */
.fl3d-f{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;background-color:#EDF1EF;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 0 .5px rgba(0,0,0,.14)}
.fl3d-f.b{transform:rotateY(180deg)}
.fl3d-shadow{position:absolute;left:50%;top:50%;border-radius:50%;background:rgba(3,22,25,.55);transform:scale(var(--k,1));transition:transform .55s cubic-bezier(.4,0,.2,1);pointer-events:none}
.fl3d-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:12px clamp(16px,3vw,32px) calc(18px + env(safe-area-inset-bottom,0px))}
.fl3d-btn{appearance:none;border-radius:999px;padding:11px 18px;font:600 14px/1 Inter,-apple-system,sans-serif;cursor:pointer;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);transition:background .2s}
.fl3d-btn:hover{background:rgba(255,255,255,.22)}
.fl3d-btn.pri{background:#F5FAF9;color:#146B72;border-color:transparent}.fl3d-btn.pri:hover{background:#fff}
.fl3d-btn[disabled]{opacity:.35;cursor:default;background:rgba(255,255,255,.12)}
.fl3d-dl{color:#AADEC7;font-weight:600;font-size:14px;text-decoration:none;padding:11px 8px}
.fl3d-dl:hover{text-decoration:underline}
.fl3d-hint{width:100%;text-align:center;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:2px}
@media(max-width:560px){.fl3d-hint{display:none}.fl3d-top .t b{font-size:14px}}
@media(prefers-reduced-motion:reduce){.fl3d-obj,.fl3d-p,.fl3d-shadow{transition-duration:.01s}}