/* Glas-Ordner „Ihre Unterlagen“ (Baustein gf-)
   Nachbau der Machart „Glassmorphism Folder Cards“ (21st.dev, kedhareswer) ohne React, in Deltriva-Farben.
   Bühne in eigenen Einheiten 340 × 272, per --gf-k (JS, ResizeObserver) auf die Breite skaliert.
   Ebenen von hinten nach vorn: Schatten, Rückwand (Canvas-Grafik), Unterlagen, Milchglas-Klappe, Taste „+“.
   Zustände: Ruhe · Zeigen/Fokus · .gf-offen · Blatt .gf-gezogen. Platz über dem Ordner zum Auffächern: 146 × --gf-k px. */

.gf-figur {
  --gf-k: .9412;
  /* hell: Milchglas */
  --gf-ton: hell;
  --gf-tinte: #12383e;
  --gf-tinte-schwach: rgba(18, 56, 62, .62);
  --gf-toenung: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .5) 42%, rgba(246, 248, 248, .93) 100%);
  --gf-toenung-ersatz: linear-gradient(180deg, rgba(250, 251, 251, .84) 0%, rgba(246, 248, 248, .97) 100%);
  --gf-rueck-grund: linear-gradient(180deg, #e9efef 0%, #d3dddd 100%);
  --gf-schatten: rgba(11, 34, 38, .32);
  --gf-kante-rueck: rgba(255, 255, 255, .5);
  --gf-kante-klappe: 1;
  --gf-licht-mix: soft-light;
  --gf-licht-staerke: .9;
  --gf-taste-grund: radial-gradient(120% 90% at 50% 0%, #1f5960 0%, #12383e 55%, #0b2226 100%);
  --gf-taste-farbe: #f3f5f5;
  --gf-taste-schatten: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(8, 26, 29, .7),
    0 14px 22px -8px rgba(11, 34, 38, .5), 0 3px 6px -2px rgba(11, 34, 38, .3);
  --gf-papier-filter: none;
  --gf-fokus: #d9862f;
  position: relative;
  justify-self: center;
  width: min(100%, 320px);
  margin: 0 auto;
  padding-top: calc(146px * var(--gf-k));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gf-figur {
    --gf-ton: dunkel;
    --gf-tinte: #e3eaeb;
    --gf-tinte-schwach: rgba(227, 234, 235, .62);
    --gf-toenung: linear-gradient(180deg, rgba(11, 34, 38, .2) 0%, rgba(8, 26, 29, .62) 46%, rgba(5, 17, 19, .94) 100%);
    --gf-toenung-ersatz: linear-gradient(180deg, rgba(11, 34, 38, .88) 0%, rgba(5, 17, 19, .97) 100%);
    --gf-rueck-grund: linear-gradient(180deg, #12383e 0%, #0b2226 100%);
    --gf-schatten: rgba(0, 0, 0, .62);
    --gf-kante-rueck: rgba(255, 255, 255, .16);
    --gf-kante-klappe: .55;
    --gf-licht-mix: screen;
    --gf-licht-staerke: .16;
    --gf-taste-grund: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef2f2 55%, #d3dddd 100%);
    --gf-taste-farbe: #12383e;
    --gf-taste-schatten: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .4), 0 14px 22px -8px rgba(0, 0, 0, .7);
    --gf-papier-filter: brightness(.9) saturate(.95);
    --gf-fokus: #e8a24a;
  }
}
:root[data-theme="dark"] .gf-figur {
  --gf-ton: dunkel;
  --gf-tinte: #e3eaeb;
  --gf-tinte-schwach: rgba(227, 234, 235, .62);
  --gf-toenung: linear-gradient(180deg, rgba(11, 34, 38, .2) 0%, rgba(8, 26, 29, .62) 46%, rgba(5, 17, 19, .94) 100%);
  --gf-toenung-ersatz: linear-gradient(180deg, rgba(11, 34, 38, .88) 0%, rgba(5, 17, 19, .97) 100%);
  --gf-rueck-grund: linear-gradient(180deg, #12383e 0%, #0b2226 100%);
  --gf-schatten: rgba(0, 0, 0, .62);
  --gf-kante-rueck: rgba(255, 255, 255, .16);
  --gf-kante-klappe: .55;
  --gf-licht-mix: screen;
  --gf-licht-staerke: .16;
  --gf-taste-grund: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef2f2 55%, #d3dddd 100%);
  --gf-taste-farbe: #12383e;
  --gf-taste-schatten: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .4), 0 14px 22px -8px rgba(0, 0, 0, .7);
  --gf-papier-filter: brightness(.9) saturate(.95);
  --gf-fokus: #e8a24a;
}
/* Einspaltig steht der Ordner unter dem Text: Platz zum Auffächern nur im offenen Zustand */
@media (max-width: 1000px) {
  .gf-figur { padding-top: 0; transition: padding-top .55s cubic-bezier(.2, .8, .2, 1); }
  .gf-figur.gf-offen { padding-top: calc(146px * var(--gf-k)); }
}

.gf-ordner {
  --gf-px: 0;
  --gf-py: 0;
  --gf-sanft: cubic-bezier(.2, .8, .2, 1);
  --gf-feder: cubic-bezier(.34, 1.3, .5, 1);
  /* Ruhe */
  --gf-scharnier: 0deg;
  --gf-hub: 42px;
  --gf-breit: 0px;
  --gf-faecher: 0deg;
  --gf-stapel: var(--gf-stapel-zu, 15px);
  position: relative;
  width: 100%;
  height: calc(284px * var(--gf-k));
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  font-family: Inter, system-ui, sans-serif;
}
@media (hover: hover) {
  .gf-ordner:hover { --gf-scharnier: -11deg; --gf-hub: -34px; --gf-breit: 8px; --gf-faecher: 1deg; --gf-stapel: var(--gf-stapel-zeigen, 10px); }
}
.gf-ordner:has(:focus-visible) { --gf-scharnier: -11deg; --gf-hub: -34px; --gf-breit: 8px; --gf-faecher: 1deg; --gf-stapel: var(--gf-stapel-zeigen, 10px); }
.gf-ordner.gf-offen, .gf-ordner.gf-offen:hover, .gf-ordner.gf-offen:has(:focus-visible) {
  --gf-scharnier: -26deg; --gf-hub: -96px; --gf-breit: 30px; --gf-faecher: var(--gf-faecher-offen, 3deg); --gf-stapel: var(--gf-stapel-offen, 32px);
}

.gf-buehne { position: absolute; left: 0; top: 0; width: 340px; height: 272px; transform-origin: 0 0; transform: scale(var(--gf-k)); }
.gf-neigung {
  position: absolute; inset: 0;
  transform: perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));
  transition: transform .9s var(--gf-sanft);
}

/* Schatten wandert gegen den Zeiger */
.gf-schatten {
  position: absolute; left: 18px; right: 18px; bottom: -6px; height: 60px; border-radius: 40px;
  background: var(--gf-schatten); filter: blur(22px);
  transform: translate(calc(var(--gf-px) * -10px), calc(var(--gf-py) * -3px));
  transition: transform .9s var(--gf-sanft), opacity .9s var(--gf-sanft);
}

/* ---------- Rückwand mit erzeugter Grafik ---------- */
.gf-rueck {
  position: absolute; inset: 0; overflow: hidden; cursor: pointer;
  background: var(--gf-rueck-grund);
  clip-path: path("M0 56A22 22 0 0 1 22 34L146 34C170 34 172 0 198 0L318 0A22 22 0 0 1 340 22L340 250A22 22 0 0 1 318 272L22 272A22 22 0 0 1 0 250Z");
}
.gf-kunst {
  position: absolute; left: -12px; top: -12px; width: 364px; height: 296px; max-width: none;
  opacity: 0; filter: blur(14px) saturate(.6);
  transform: translate(calc(var(--gf-px) * -7px), calc(var(--gf-py) * -6px)) scale(1.02);
  transition: transform 1.1s var(--gf-sanft), opacity 1.2s var(--gf-sanft), filter 1.2s var(--gf-sanft);
}
.gf-ordner[data-ton="hell"] .gf-kunst[data-ton="hell"][data-fertig],
.gf-ordner[data-ton="dunkel"] .gf-kunst[data-ton="dunkel"][data-fertig] { opacity: 1; filter: none; }
.gf-rueck-glanz {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
}
.gf-kante { position: absolute; left: 0; top: 0; max-width: none; overflow: visible; pointer-events: none; fill: none; }
.gf-rueck-kante { width: 340px; height: 272px; }
.gf-rueck-kante path { stroke: var(--gf-kante-rueck); stroke-width: 1; }

/* ---------- Unterlagen ---------- */
.gf-blaetter {
  position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; list-style: none; pointer-events: none;
  /* unten hängt nichts aus der Tasche heraus */
  clip-path: inset(-400px -400px 10px -400px);
}
.gf-blatt {
  position: absolute; left: 34px; top: 96px; width: 272px; height: 184px;
  transform-origin: 50% 100%;
  transform:
    translate(calc(var(--gf-jx, 0px) + var(--gf-slot, 0) * var(--gf-breit)), calc(var(--gf-hub) - var(--gf-tiefe, 0) * var(--gf-stapel)))
    rotate(calc(var(--gf-jr, 0deg) + var(--gf-slot, 0) * var(--gf-faecher)));
  transition: transform .75s var(--gf-feder) calc(var(--gf-tiefe, 0) * 40ms), translate .9s var(--gf-sanft), opacity .9s var(--gf-sanft);
}
.gf-blatt-knopf {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  font: inherit; color: #1a2629; text-align: left; cursor: pointer; pointer-events: auto;
  border-radius: 15px; overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f1f4f4 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(11, 34, 38, .14), 0 10px 26px -8px rgba(11, 34, 38, .3);
  filter: var(--gf-papier-filter);
  transition: box-shadow .4s var(--gf-sanft);
}
.gf-ordner:not(.gf-offen) .gf-blatt-knopf { pointer-events: none; }
.gf-blatt-knopf:focus-visible { outline: 2.5px solid var(--gf-fokus); outline-offset: 2px; }
.gf-ordner.gf-offen .gf-blatt:hover:not(.gf-gezogen), .gf-ordner.gf-offen .gf-blatt:has(:focus-visible):not(.gf-gezogen) {
  transform:
    translate(calc(var(--gf-jx, 0px) + var(--gf-slot, 0) * var(--gf-breit)), calc(var(--gf-hub) - var(--gf-tiefe, 0) * var(--gf-stapel) - 16px))
    rotate(calc(var(--gf-slot, 0) * var(--gf-faecher) * .6));
  transition-delay: 0s;
}
.gf-ordner.gf-offen .gf-blatt:hover .gf-blatt-knopf { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(11, 34, 38, .14), 0 22px 40px -12px rgba(11, 34, 38, .42); }
/* herausgezogen: ganz nach vorn und über den Stapel */
.gf-blatt.gf-gezogen { z-index: 40 !important; transform: translate(0px, -214px) rotate(0deg); transition-delay: 0s; }
.gf-blatt.gf-gezogen .gf-blatt-knopf { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(11, 34, 38, .14), 0 26px 44px -14px rgba(11, 34, 38, .5); }

.gf-kopfzeile {
  position: absolute; left: 14px; right: 12px; top: 7px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; white-space: nowrap; height: 20px;
}
.gf-name { overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 620; letter-spacing: -.005em; color: #1a2629; }
.gf-befund {
  flex: none; font: 600 12px/1 Inter, sans-serif; font-style: normal; color: #94510f; background: #fbeedd;
  padding: 4px 7px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(217, 134, 47, .28);
  opacity: 0; transform: translateY(4px) scale(.96); transition: opacity .3s var(--gf-sanft), transform .4s var(--gf-feder);
}
.gf-ordner.gf-offen .gf-befund { opacity: 1; transform: none; transition-delay: calc(.35s + var(--gf-tiefe, 0) * 60ms); }
.gf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.gf-zeichnung { position: absolute; left: 0; top: 38px; width: 272px; height: 140px; max-width: none; overflow: visible; }
.gf-z-marke { fill: #0f6a70; }
.gf-z-dunkel { fill: rgba(26, 38, 41, .42); }
.gf-z-hell { fill: rgba(26, 38, 41, .14); }
.gf-z-band { fill: #e1efef; }
.gf-z-zeilen rect { fill: rgba(26, 38, 41, .16); }
.gf-z-linie { stroke: rgba(26, 38, 41, .08); stroke-width: 1; fill: none; }
.gf-z-unterschrift { stroke: #0f6a70; stroke-width: 1.6; stroke-linecap: round; fill: none; opacity: .7; }
.gf-z-gitter { stroke: #c9d5d6; stroke-width: 1; fill: none; }
.gf-z-markiert { fill: #fbeedd; }
.gf-z-doppelt { fill: none; stroke: #d9862f; stroke-width: 2; }
.gf-z-tinte { stroke: #1d4a52; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .78; }
.gf-z-kringel { stroke: #c4521c; stroke-width: 1.8; stroke-linecap: round; fill: none; opacity: .7; }
.gf-z-faxkopf { font: 500 8.5px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; fill: rgba(26, 38, 41, .58); letter-spacing: .04em; }
.gf-z-stempel { fill: none; stroke: rgba(26, 38, 41, .32); stroke-width: 1.5; stroke-dasharray: 3 2; }
.gf-z-feld { fill: none; stroke: rgba(15, 106, 112, .28); stroke-width: 1; }
.gf-z-leiste { fill: #0f6a70; }

/* Papierarten */
.gf-art-notiz .gf-blatt-knopf { background: linear-gradient(180deg, #fbf1c9 0%, #f4e4a6 100%); border-radius: 6px 6px 18px 6px; }
.gf-art-notiz .gf-befund { background: #fff; }
.gf-art-fax .gf-blatt-knopf {
  background: repeating-linear-gradient(0deg, rgba(26, 38, 41, .028) 0 1px, transparent 1px 3px), linear-gradient(180deg, #f2f2ee 0%, #e7e8e3 100%);
}
.gf-art-fax .gf-zeichnung { filter: blur(.35px); }
.gf-art-telefon .gf-blatt-knopf { background: linear-gradient(180deg, #eef6f6 0%, #dcebeb 100%); }
.gf-art-mail .gf-blatt-knopf { background: linear-gradient(180deg, #ffffff 0%, #f4f6f7 100%); }

/* Neue Unterlage fällt hinein, entnommene steigen hinaus */
.gf-blatt.gf-faellt { animation: gf-fallen .85s var(--gf-sanft) both; }
@keyframes gf-fallen {
  0% { translate: 0 -190px; rotate: -9deg; opacity: 0; }
  35% { opacity: 1; }
  72% { translate: 0 10px; rotate: 1deg; }
  100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}
.gf-blatt.gf-geht { animation: gf-gehen .55s var(--gf-sanft) both; pointer-events: none; }
@keyframes gf-gehen { to { translate: 0 -150px; rotate: 6deg; opacity: 0; } }

/* ---------- Milchglas-Klappe am unteren Scharnier ---------- */
.gf-klappe {
  position: absolute; left: 0; top: 74px; width: 340px; height: 198px; z-index: 10;
  clip-path: path("M0 22A22 22 0 0 1 22 0L118 0C144 0 146 32 172 32L318 32A22 22 0 0 1 340 54L340 176A22 22 0 0 1 318 198L22 198A22 22 0 0 1 0 176Z");
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  transform-origin: 50% 100%;
  transform: perspective(1000px) rotateX(var(--gf-scharnier));
  transition: transform .8s var(--gf-feder), translate 1s var(--gf-sanft), opacity 1s var(--gf-sanft);
}
.gf-klappe.gf-delle { animation: gf-delle .7s var(--gf-sanft) .38s both; }
@keyframes gf-delle { 0% { scale: 1; } 35% { scale: 1.018 .975; } 70% { scale: .996 1.006; } 100% { scale: 1; } }
.gf-toenung { position: absolute; inset: 0; background: var(--gf-toenung); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gf-toenung { background: var(--gf-toenung-ersatz); }
}
/* Spekular-Licht unter dem Zeiger */
.gf-licht {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: var(--gf-licht-mix); opacity: var(--gf-licht-staerke);
}
.gf-klappe-kante { width: 340px; height: 198px; opacity: var(--gf-kante-klappe); }
.gf-klappe-kante path { stroke-width: 2.4; transition: stroke-width .3s var(--gf-sanft), stroke .3s; }
.gf-griff {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.gf-griff:focus { outline: none; }
.gf-klappe:has(.gf-griff:focus-visible) .gf-klappe-kante { opacity: 1; }
.gf-klappe:has(.gf-griff:focus-visible) .gf-klappe-kante path { stroke: var(--gf-fokus); stroke-width: 5; }
.gf-griff:focus-visible ~ .gf-etikett .gf-titel { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.gf-etikett {
  position: absolute; left: 28px; bottom: 30px; z-index: 2; display: flex; flex-direction: column; gap: 5px; max-width: 210px;
  pointer-events: none; color: var(--gf-tinte);
}
.gf-titel { font-family: var(--titel, "Archivo", Inter, sans-serif); font-stretch: 110%; font-weight: 650; font-size: 20px; line-height: 1.1; letter-spacing: -.015em; white-space: nowrap; }
.gf-zahl { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--gf-tinte-schwach); white-space: nowrap; }
.gf-zahl.gf-rollt { animation: gf-rollen .5s var(--gf-sanft) both; }
@keyframes gf-rollen { from { opacity: 0; translate: 0 8px; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* ---------- Taste „+“ ---------- */
.gf-taste {
  position: absolute; right: 22px; bottom: 22px; z-index: 12; width: 56px; height: 56px; margin: 0; padding: 0; border: 0;
  border-radius: 18px; display: grid; place-items: center; cursor: pointer;
  color: var(--gf-taste-farbe); background: var(--gf-taste-grund); box-shadow: var(--gf-taste-schatten);
  transition: transform .35s var(--gf-feder), opacity .6s var(--gf-sanft) .7s, scale .7s var(--gf-feder) .7s;
}
.gf-taste:hover { transform: translateY(-2px); }
.gf-taste:active { transform: translateY(0) scale(.93); transition-duration: .12s; }
.gf-taste:focus-visible { outline: 2.5px solid var(--gf-fokus); outline-offset: 3px; }
.gf-zeichen { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
  transition: rotate .5s var(--gf-feder); }
.gf-zeichen.gf-dreht { animation: gf-drehen .6s var(--gf-feder); }
@keyframes gf-drehen { from { rotate: -90deg; } to { rotate: 0deg; } }
.gf-taste.gf-voll .gf-zeichen { rotate: 45deg; }

/* ---------- Hinweis darunter ---------- */
.gf-hinweis { margin: 18px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--schwach, #56676b); text-align: center; max-width: 280px;
  text-wrap: balance; min-height: 3em; }

/* ---------- Aufbau beim ersten Sichtbarwerden ---------- */
.gf-ordner.gf-bereit:not(.gf-da) .gf-rueck, .gf-ordner.gf-bereit:not(.gf-da) .gf-rueck-kante { translate: 0 22px; opacity: 0; }
.gf-ordner.gf-bereit:not(.gf-da) .gf-blatt { translate: 0 -120px; opacity: 0; }
.gf-ordner.gf-bereit:not(.gf-da) .gf-klappe { translate: 0 46px; opacity: 0; }
.gf-ordner.gf-bereit:not(.gf-da) .gf-taste { opacity: 0; scale: .6; }
.gf-ordner.gf-bereit:not(.gf-da) .gf-schatten { opacity: 0; }
.gf-rueck, .gf-rueck-kante { transition: translate 1s var(--gf-sanft), opacity .9s var(--gf-sanft); }
.gf-ordner.gf-da .gf-blatt { transition-delay: calc(var(--gf-tiefe, 0) * 40ms), calc(.18s + var(--gf-tiefe, 0) * 90ms), calc(.18s + var(--gf-tiefe, 0) * 90ms); }
.gf-ordner.gf-da .gf-blatt.gf-gezogen, .gf-ordner.gf-offen .gf-blatt:hover { transition-delay: 0s; }
.gf-ordner.gf-da .gf-klappe { transition-delay: 0s, .42s, .42s; }

@media (prefers-reduced-motion: reduce) {
  .gf-figur, .gf-figur *, .gf-figur *::before, .gf-figur *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .gf-neigung { transform: none; }
}