/* DAS FENSTER — Glaswerte, Reiter, Hilfe

   Aus `farbrad-geraet.css` herausgelöst, damit keine Datei über
   300 Zeilen wächst. Inhalt unverändert. */

.fr-geraet {

    --glass-bg: rgba(30, 41, 59, .7);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-blur: 12px;
    --glass-card-bg: rgba(255, 255, 255, .05);
    --glass-card-bg-hover: rgba(255, 255, 255, .1);
    --glass-text-primary: #fff;
    --glass-text-secondary: rgba(255, 255, 255, .5);
    --glass-icon-color: rgba(255, 255, 255, .4);

    --sel-border-color-active: #fff;
    --sel-border-color-inactive: transparent;

    --app-gap: 15px;
    --app-gap-small: 8px;

    width: 320px;
    max-width: 100%;
    padding: 20px;
    background: #1e293b;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--glass-text-primary);
    flex-shrink: 0;
}

.fr-reiter {
    display: flex;
    gap: var(--app-gap-small);
    margin-bottom: var(--app-gap);
}

.fr-reiter-feld {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    background: var(--glass-card-bg);
    padding: 4px;
    border-radius: 8px;
}

.fr-reiter-knopf {
    flex: 1 1 40%;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--glass-text-secondary);
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 500;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background-color .2s, color .2s;
}

.fr-reiter-knopf[aria-selected="true"] {
    background: var(--glass-card-bg-hover);
    color: var(--glass-text-primary);
}

.fr-reiter-knopf span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-reiter-knopf .fr-zeichen {
    flex-shrink: 0;
    font-size: .82rem;
}

.fr-punkt-verlauf {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f00, #0f0, #00f);
    flex-shrink: 0;
}

.fr-hilfe {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-card-bg);
    border: none;
    border-radius: 8px;
    width: 32px;
    color: var(--glass-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .2s, color .2s;
}

.fr-hilfe:hover,
.fr-hilfe[aria-expanded="true"] {
    background: var(--glass-card-bg-hover);
    color: var(--glass-text-primary);
}

.fr-hilfetext {
    background: var(--glass-card-bg);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .75rem;
    line-height: 1.55;
    color: var(--glass-text-secondary);
    margin-bottom: var(--app-gap);
}

.fr-hilfetext strong {
    color: var(--glass-text-primary);
}