/* Aingel Variante 13 – Halte-Freigabe (elemente/freigabe.js): die Karte eines Vorgangs mit seiner Spur und der Taste,
   die man gedrückt hält. Orange wartet auf den Menschen, Mint heißt freigegeben. */
.freigabe-karte {
  position: relative; display: grid; gap: 18px; padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-xl); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
  transition: border-color .5s var(--kurve);
}
.freigabe-karte[data-frei='ja'] { border-color: color-mix(in srgb, var(--rolle-pruefung) 55%, var(--linie)); }
.freigabe-karte__dach { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 500 12.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); }
.freigabe-karte__status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pille);
  letter-spacing: .04em; text-transform: none; font-size: 12.5px;
  color: var(--mensch); border: 1px solid color-mix(in srgb, var(--mensch) 45%, transparent); background: color-mix(in srgb, var(--glas-du) var(--toenung), transparent);
  transition: color .4s var(--kurve), border-color .4s var(--kurve), background-color .4s var(--kurve);
}
.freigabe-karte__status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.freigabe-karte[data-frei='ja'] .freigabe-karte__status { color: var(--rolle-pruefung); border-color: color-mix(in srgb, var(--rolle-pruefung) 45%, transparent); background: color-mix(in srgb, var(--glas-pruefung) var(--toenung), transparent); }
.freigabe-karte__titel { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.freigabe-karte__spur { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.freigabe-karte__spur li { display: flex; align-items: center; gap: 12px; color: var(--text-leise); font-size: 15.5px; }
.freigabe-karte__spur .schild { min-width: 96px; justify-content: center; }
.freigabe-karte[data-frei='ja'] .freigabe-karte__dutext { color: var(--text); }

/* Die Taste: eine Pille mit einem Ring links, der sich beim Halten in Orange füllt */
.halte-taste {
  position: relative; display: inline-flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 8px 22px 8px 8px;
  border-radius: var(--r-pille); border: 1px solid color-mix(in srgb, var(--mensch) 55%, var(--linie)); background: var(--flaeche-hoch);
  color: var(--text); font: 500 16px/1.2 var(--schrift); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: border-color .4s var(--kurve), background-color .4s var(--kurve), transform .15s var(--kurve);
}
.halte-taste:active { transform: scale(.985); }
.halte-taste__ring { flex: none; width: 44px; height: 44px; transform: rotate(-90deg); }
.halte-taste__ring circle { fill: none; stroke-width: 2.5; }
.halte-taste__ring .ring__grund { stroke: var(--linie); }
.halte-taste__ring .ring__fuellung { stroke: var(--glas-du); stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; transition: stroke-dashoffset .3s var(--kurve), stroke .4s var(--kurve); }
.halte-taste.ist-gehalten .ring__fuellung { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s linear; }
/* Häkchen in der Mitte des Rings, sobald freigegeben */
.halte-taste__haken { position: absolute; left: 25px; top: 50%; width: 12px; height: 6px; margin-top: -5px; border-left: 2.2px solid var(--glas-pruefung); border-bottom: 2.2px solid var(--glas-pruefung); transform: rotate(-45deg) scale(.4); opacity: 0; transition: opacity .3s var(--kurve), transform .4s var(--kurve); }
[data-frei='ja'] .halte-taste { border-color: color-mix(in srgb, var(--rolle-pruefung) 60%, var(--linie)); background: color-mix(in srgb, var(--glas-pruefung) 12%, var(--flaeche-hoch)); }
[data-frei='ja'] .ring__fuellung { stroke: var(--glas-pruefung); stroke-dashoffset: 0; }
[data-frei='ja'] .halte-taste__haken { opacity: 1; transform: rotate(-45deg) scale(1); }
.no-js .halte-taste { cursor: default; }