/* Content from itemsolution.css */
/* Custom-Tag als Block */
itemsolution {
    display: block;
    width: 100%;
}

/* Wrapper ohne Hintergrund, Inhalte schweben „frei“ */
.itemsolution-container {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.3rem 0;
    outline: none;
}

/* Scrollbereich bestimmt die Tile-Höhe */
.itemsolution-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    min-height: 80px; 
    display: block;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    text-align:center;
}

.itemsolution-scroll::-webkit-scrollbar {
    height: 4px;
}

/* Platz für den Submit-Button rechts freihalten */
.itemsolution-has-submit .itemsolution-scroll {
    padding-right: 5.5rem; 
    padding-left: 0.5rem;
}

/* Tiles-Row: horizontale Leiste, linksbündig */
.itemsolution-tiles {
    display: inline-flex;
    font-size: 2.2rem;
    font-weight: bolder;
    width: max-content;
    height: 70px;
    align-items: center;
}

/* Basis-Tile: quadratisch per aspect-ratio, Glass-Outset */
.itemsolution-tile {
    box-sizing: border-box;
    text-align: center;
    font-family: monospace;
    user-select: none;
    white-space: nowrap;
    height: 60px; 
    width: 60px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    font-size: 90%;
    border-radius: 4px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(210, 210, 210, 0.6));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #222;
    position: relative; /* für Index-Overlays */
}

/* Kleine Index-Box oben links (immer sichtbar, verdrängt nichts) */
.itemsolution-tile::before {
    content: attr(data-pos);
    position: absolute;
    top: 0.1rem;
    left: 0.15rem;
    padding: 0 0.2em;
    border-radius: 2px;
    font-size: 0.55em;
    line-height: 1.1;
    background: rgba(0, 0, 0, 0.25);
    color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    mix-blend-mode: soft-light;
}

/* Add-Mode: leere Tiles mit großer, eingebrannter Nummer im Hintergrund */
.itemsolution-addmode .itemsolution-tile-empty::after {
    content: attr(data-pos);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}

/* Editierbar: Glass-Inset */
.itemsolution-editable .itemsolution-tile {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    background: linear-gradient(145deg, rgba(240, 240, 240, 0.8), rgba(190, 190, 190, 0.5));
    cursor: pointer;
}

/* Add-Mode (operation=additems): blauer Akzent, gleicher Glass-Look */
.itemsolution-addmode.itemsolution-editable .itemsolution-tile {
    background:linear-gradient(145deg, rgba(227, 249, 253 , 0.9), rgba(0, 130, 150 , 0.5));
    box-shadow:
        inset 0 2px 4px rgba(13, 71, 161, 0.4),
        inset 0 0 0 1px rgba(227, 242, 253, 0.8);
}

/* Leere Tiles: leicht eingedrückte Glasflächen */
.itemsolution-tile-empty {
    opacity: 0.7;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    background: linear-gradient(145deg,
        rgba(245, 245, 245, 0.7),
        rgba(210, 210, 210, 0.5)
    );
    color: #888;
}

/* Wildcard-Tiles (nur im upd-Kontext gesetzt) */
.itemsolution-tile-wildcard {
    opacity: 1;
    box-shadow:
        inset 0 1px 3px rgba(25, 118, 210, 0.7),
        inset 0 0 0 1px rgba(227, 242, 253, 0.9);
    background: linear-gradient(145deg,
        rgba(227, 242, 253, 0.98),
        rgba(144, 202, 249, 0.9)
    );
    color: #0d47a1;
}

/* Korrekt / falsch (Glass-Farben) */
.itemsolution-tile-correct {
    background: linear-gradient(145deg,
        rgba(200, 230, 201, 0.9),
        rgba(129, 199, 132, 0.8)
    );
}

.itemsolution-tile-wrong {
    background: linear-gradient(145deg,
        rgba(255, 205, 210, 0.9),
        rgba(239, 154, 154, 0.8)
    );
}

/* Im Add-Mode bleiben correct/wrong erkennbar, aber mit leichter Blautönung */
.itemsolution-addmode .itemsolution-tile-correct {
    background: linear-gradient(145deg,
        rgba(200, 230, 201, 0.95),
        rgba(129, 199, 132, 0.9)
    );
}

.itemsolution-addmode .itemsolution-tile-wrong {
    background: linear-gradient(145deg,
        rgba(255, 205, 210, 0.95),
        rgba(239, 154, 154, 0.9)
    );
}

/* Aktive (Cursor-)Kachel */
.itemsolution-tile-active {
    outline: 2px solid rgba(66, 66, 66, 0.9);
    outline-offset: 0;
}

/* Fokusrahmen für das ganze Feld */
.itemsolution-container:focus {
    outline: 2px solid #1976d2;
    outline-offset: 2px;
}

/* Submit-Buttons: Glass-Style, fix am rechten Rand, nicht mitscrollend */
.itemsolution-submit {
    position: absolute;
    right: 0.6rem;
    top: calc(50% - 2.4rem);
    width: 4.8rem;
    height: 4.8rem;
    border: none;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    font-size: 3.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(210, 210, 210, 0.7));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #111;
}

/* Farbliche Nuancen für Add/Update */
.itemsolution-submit-add {
    color: var(--link-4);
}

.itemsolution-submit-upd {
    color: var(--link-3);
}

/* ---------- Kreis-Auswahl A–F für Touch ---------- */

.itemsolution-chooser {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Optionen selbst reaktivieren das */
    z-index: 5;
}

.itemsolution-chooser-option {
    position: absolute;
    
    /* NEU: Feste Größe und Zentrierung per Flexbox */
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Macht die Buttons rund */
    font-size: 1.5rem; /* Bessere Lesbarkeit auf Touch-Geräten */
    
    /* NEU: Verschiebt das Element um exakt die halbe eigene Größe nach links und oben.
       Dadurch zielen 'left' und 'top' aus dem JS haargenau auf die Button-Mitte. */
    margin-left: -1.75rem; 
    margin-top: -1.75rem;

    text-align: center;
    font-family: monospace;
    white-space: nowrap;
    user-select: none;
    pointer-events: auto;

    background: linear-gradient(145deg,
        rgba(245, 245, 245, 0.95),
        rgba(200, 200, 200, 0.8)
    );
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #222;

    opacity: 0;
    /* Der vorhandene Transform-Scale bleibt unangetastet für die Animation */
    transform: scale(0.5);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.itemsolution-chooser-visible .itemsolution-chooser-option {
    opacity: 1;
    transform: scale(1);
}


.itemsolution-correct-popup {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 2px;
    left: 2px;
    bottom: 2px;
    top: 2px;
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
    font-family: monospace;
    overflow: hidden;
    font-size: 3rem;
    font-weight: 700;
    white-space: nowrap;
    background: linear-gradient(145deg, rgba(200, 230, 201, 0.95), rgba(129, 199, 132, 0.9));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.7);
    color: #ffffff;
    opacity: 0;
    pointer-events: none;
    transform: scale3d(0.1, 0.5, 0.3);
    transition: opacity 0.35s 
    ease-out, transform 0.35s 
    ease-out;
}

.itemsolution-correct-popup-visible {
    opacity: 1;
    transform: scale3d(1, 1, 1);
}


/* Content from pointchoice.css */
pointchoice {
    display: inline-block;
}

/* Wrapper für alles */
.pointchoice-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

/* Wrapper nur für Slider + Ticks + Tooltip */
.pointchoice-slider-wrapper {
    position: relative;
    width: 100px; /* wird per Attribut überschrieben */
    padding-bottom: 14px; /* etwas mehr Platz für größere Text-Ticks */
}

/* ===========================
   FARB-FÜLLUNG
   =========================== */

.pointchoice-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 0;
}

/* Basis: kompletter Farbverlauf (0..max) */
.pointchoice-fill-base {
    left: 6px; /* passt zu Ticks und Thumb */
    width: 0;  /* wird per JS auf innerWidth gesetzt */
    background: linear-gradient(
        to right,
        #d60000,   /* rot */
        #ff7a00,   /* orange */
        #ffd000,   /* gelb */
        #b6ff5a,   /* hellgrün */
        #00a200    /* dunkelgrün */
    );
}

/* invertierter Verlauf für die Basis (bei inverse=1) */
.pointchoice-fill-base.pointchoice-fill-inverse {
    background: linear-gradient(
        to right,
        #00a200,   /* dunkelgrün */
        #b6ff5a,   /* hellgrün */
        #ffd000,   /* gelb */
        #ff7a00,   /* orange */
        #d60000    /* rot */
    );
}

/* Cover: neutrale Abdeckung von Sliderposition bis Ende */
.pointchoice-fill-cover {
    background: #ddd;           /* neutrale Farbe, ggf. anpassen */
    width: 0;                   /* wird per JS gesetzt */
    left: 6px;                  /* Start, wird per JS verschoben */
    /*transition: left 0.2s ease-out, width 0.2s ease-out;*/
}

/* Wenn colored aktiv ist: Slidertrack selbst unsichtbar */
.pointchoice-colored::-webkit-slider-runnable-track {
    background: transparent;
}
.pointchoice-colored::-moz-range-track {
    background: transparent;
}


/* ===========================
   SLIDER
   =========================== */
.pointchoice-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background-color: #ddd;
    outline: none;
    position: relative;
    z-index: 1;
}

/* Thumb (Schiebeknopf) */
.pointchoice-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    margin-top: -4px; /* zentriert auf 6px-Track */
}

.pointchoice-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

/* Track */
.pointchoice-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
}
.pointchoice-slider::-moz-range-track {
    height: 6px;
    border-radius: 3px;
}

/* ===========================
   TICKS
   =========================== */
.pointchoice-ticks {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 0;
    height: 10px; /* genug Höhe für Text-Ticks */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 0;
}

/* Standard kleiner Punkt */
.pointchoice-tick {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #555;
}

/* Variante: Text-Ticks (bei textticks=1) */
.pointchoice-tick-text {
    width: fit-content;
    height: fit-content;
    border-radius: 5px;
    padding: 2px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
}

/* ===========================
   contenteditable-Zahlenfeld
   =========================== */
.pointchoice-input {
    min-width: 2ch;
    padding: 2px 6px;
    border: 1px solid #777;
    border-radius: 4px;
    text-align: center;
    font-family: inherit;
    font-size: inherit;    /* <- deine Einstellung */
    cursor: text;
    background-color: white; /* <- deine Einstellung */
}

.pointchoice-input:focus {
    outline: none;
    border-color: #666;
}

/* ===========================
   TOOLTIP
   =========================== */
.pointchoice-tooltip {
    position: absolute;
    bottom: 120%;          /* über dem Slider */
    left: 0;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #333;
    color: #fff;
    font-size: 1.25rem;      /* <- deine Einstellung */
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 10;
    margin-left: 6px;        /* <- deine Einstellung */
}

.pointchoice-tooltip.visible {
    opacity: 1;
}


/* Content from unitbar.css */
.unitbar-wrapper {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
    padding-top: 2rem; /* Platz für Tooltips in Vollansicht */
    box-sizing: border-box;
}

.unitbar-wrapper.minimal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}

.unitbar-wrapper.unitbar-highlighted {
    border: 1px solid #ffd700;
    border-radius: 7px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    background-color:#fff4ba;
}

.unitbar-bar {
    position: relative;
    width: 100%;
    height: 36px;
    border-radius: 5px;
    background: transparent;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

.unitbar-wrapper.minimal .unitbar-bar {
    height: 20px;
}

/* Hintergrund-Gradient (ganz unten) */
.unitbar-bg {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        #711111 0%,
        #b54517 18%,
        #c88b13 36%,
        #b8c71a 54%,
        #3ba63b 78%,
        #09551a 100%
    );
    z-index: 0;
}

/* Entsättigungsmaske */
.unitbar-desat {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    background: linear-gradient(
        90deg,
        rgba(230, 230, 230, 0.9),
        rgba(210, 210, 210, 0.9)
    );
    mix-blend-mode: saturation;
    transition: width 1.5s ease-out;
    z-index: 1;
}

.unitbar-bonus,
.unitbar-penalty {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 0;
    pointer-events: none;
    z-index: 2;
}

.unitbar-bonus {
    background: linear-gradient(
        90deg,
        rgba(255, 215, 0, 0.9),
        rgba(255, 255, 255, 0.95)
    );
    mix-blend-mode: screen;
    transition: width 2s ease-out;
}

.unitbar-penalty {
    background: linear-gradient(
        90deg,
        rgba(70, 0, 0, 0.95),
        rgba(0, 0, 0, 0.95)
    );
    mix-blend-mode: multiply;
    transform-origin: right center;
    transform: scaleX(0);
    transition: transform 2s ease-out;
}

/* Ticks + Notenlabels (über Segmenten, unter Cursorn) */
.unitbar-ticks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.unitbar-tick {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 1px;
    background: rgba(255, 255, 255, 0.6);
    mix-blend-mode: soft-light;
}

.unitbar-grade-labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    font-size: 1rem;
}

.unitbar-grade-label {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
    font-weight: 500;
}

/* Cursor-Linien über Ticks/Labels */
.unitbar-cursor-main,
.unitbar-cursor-bonus {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 4px;
    border-radius: 2px;
    pointer-events: none;
    transform: translateX(-50%);
    z-index: 4;
}

.unitbar-cursor-main {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    transition: left 1.5s ease-out;
}

.unitbar-cursor-bonus {
    background: rgba(255, 248, 200, 0.95);
    box-shadow: 0 0 8px rgba(255, 250, 210, 1);
    transition: left 2s ease-out;
}

.unitbar-cursor-bonus.penalty {
    background: #460000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

/* Partikel-Layer (normaler Modus) – über Cursorn, unter Tooltips/Infotext */
.unitbar-particle-layer {
    position: absolute;
    inset: -10px 0;
    pointer-events: none;
    overflow: visible;
    z-index: 5;
}

/* eigener Layer für Info-Mode-Funken, noch über normalen Partikeln */
.unitbar-particle-layer-info {
    position: absolute;
    inset: -10px 0;
    pointer-events: none;
    overflow: visible;
    z-index: 6;
}

.unitbar-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 230, 150, 0.95);
    box-shadow: 0 0 6px rgba(255, 255, 200, 1);
    opacity: 0;
    animation: unitbarSparkFloat 700ms ease-out forwards;
}

.unitbar-particle.penalty {
    background: rgba(120, 0, 0, 0.95);
    box-shadow: 0 0 6px rgba(0, 0, 0, 1);
}

@keyframes unitbarSparkFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.5);
    }
}

/* Tooltips über normalen Partikeln (aber im Info-Mode per JS ausgeblendet) */
.unitbar-tooltip {
    position: absolute;
    top: 0;
    transform: translate(-50%, -40%);
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.2;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 6;
}

.unitbar-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, -130%);
}

.unitbar-wrapper.minimal .unitbar-tooltip {
    display: none;
}

/* Summary-Kacheln unter der Leiste / rechts im Minimalmodus */
.unitbar-summary-container {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.unitbar-wrapper.minimal .unitbar-summary-container {
    margin-top: 0;
    justify-content: flex-end;
}

.unitbar-summary-container.visible {
    opacity: 1;
    transform: translateY(0);
}

.unitbar-summary-box {
    min-width: 20%;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    background: #444;
    box-sizing: border-box;
    padding: 0px 10px;
}

.unitbar-wrapper.minimal .unitbar-summary-box {
    flex: 0 0 150px;
    min-width: 150px;
    height: 20px;
    font-size: 14px;
}

.unitbar-wrapper.unitbar-highlighted .unitbar-summary-box {
    border: 2px solid rgba(255, 215, 0, 0.9);
}

/* Extra-Boxen für Klassenwerte (links/rechts) */
.unitbar-summary-box.extra {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.unitbar-summary-box.extra-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.unitbar-summary-box.unitbar-summary-classratio.extra.extra-visible {
    opacity: 0.6;
}

.unitbar-summary-box.unitbar-summary-classmark.extra.extra-visible {
    opacity: 0.6;
}

/* Info-Text im Demo-Modus – ganz oben */
.unitbar-info-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 7;
}

.unitbar-info-text-inner {
    display: inline-flex;
    height: 90%;                 /* nimmt ca. 90% der Bar-Höhe ein */
    align-items: center;
    justify-content: center;
    padding: 0 0.6rem;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.4rem;           /* deutlich größer als Standard */
    text-align: center;
    line-height: 1.0;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}


/* Content from media_browser.css */
/* ============================================
   MediaBrowser: Spezifisches CSS
   (Nutzt ansonsten deine globalen Modal-Klassen)
   ============================================ */

/* Wrapper im Modal-Body */
.media-browser-host {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Damit es im modal-matter den Platz füllt */
    min-height: 400px; 
    max-height: 70vh; /* Scrollbar erzwingen wenn zu groß */
}

/* Haupt-Layout */
.media-browser {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-1);
    border-radius: 4px;
    background-color: var(--background-2);
    overflow: hidden;
}

/* Toolbar (angepasst an dein Design) */
.media-browser-toolbar {
    padding: 8px;
    background-color: var(--background-1);
    border-bottom: 1px solid var(--border-1);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Pfad-Leiste */
.media-browser-path {
    padding: 5px 10px;
    font-size: 0.9em;
    background-color: var(--accent-2);
    border-bottom: 1px solid var(--border-1);
    color: var(--text-2);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tabellen-Container (Scrollbar) */
.media-browser-table-wrapper {
    flex: 1;
    overflow: auto;
    background-color: #fff;
}

/* Tabelle */
.media-browser-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.media-browser-table th {
    background-color: var(--background-1);
    color: var(--accent-1);
    text-align: left;
    padding: 8px;
    position: sticky;
    top: 0;
    border-bottom: 2px solid var(--border-1);
    z-index: 2;
}

.media-browser-table td {
    padding: 6px 8px;
    border-bottom: 1px dotted rgba(200,200,200,0.5); /* Dein td Style */
    vertical-align: middle;
}

.media-browser-table tr:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Checkbox Spalte */
.mb-col-check { width: 30px; text-align: center; }

/* Buttons in der Tabelle */
.mb-col-actions button {
    /* Deine .button-xs Styles imitieren oder nutzen */
    border: 1px solid var(--border-2);
    background-color: var(--button-bg);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.85em;
    cursor: pointer;
    margin-left: 2px;
}
.mb-col-actions button:hover {
    background-color: var(--button-hover);
}

/* Footer (Editor Mode) */
.mb-editor-footer {
    padding: 10px;
    color: var(--accent-1);
    background-color: var(--background-1);
    border-top: 1px solid var(--border-1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

/* ============================================
   Share Modal Spezifika 
   (Nutzt auch deine .modal-matter Struktur)
   ============================================ */

/* Container für Suchfelder (Dropdowns) */
.searchable-container {
    width: 100%;
}
.searchable-input {
    /* Dein Style war top: -1.8em -> das passt */
    /* Hier evtl. Anpassung falls im Modal nötig */
}

/* Layout im Share-Modal */
.mb-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center;
}

.mb-share-url-row {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}
.mb-share-url {
    flex: 1;
    /* Nutze deine Input-Styles */
    border: 1px solid var(--glass-border);
    padding: 5px;
}

.mb-acl-current {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-1);
    margin-top: 10px;
}

/* Responsive Fixes für Mobile */
@media (max-width: 768px) {
    .mb-editor-footer {
        flex-direction: column;
        align-items: stretch;
    }
    .mb-share-row, .mb-share-url-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* Toolbar Buttons auf Mobile etwas größer für Touch */
    .mb-btn, .mb-upload-label {
        padding: 6px 10px;
        display: inline-block; 
        margin-bottom: 4px;
    }
    .mb-upload-label > input{
        display:none;
    }
}


/* ============================================
   NEU: Selection Preview Liste
   ============================================ */

.mb-selection-preview {
    width: 100%;
    max-height: 80px; /* Max 2-3 Zeilen */
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.mb-selection-tag {
    background-color: #e2e8f0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    user-select: none;
}

.mb-selection-tag.is-folder {
    background-color: #fef9c3; /* Gelblich für Ordner */
    border-color: #fde047;
}

.mb-tag-remove {
    cursor: pointer;
    font-weight: bold;
    color: #94a3b8;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.mb-tag-remove:hover {
    background-color: #ef4444;
    color: white;
}

/* Footer Container anpassen */
.mb-editor-footer {
    flex-direction: column; 
    align-items: stretch;
}

.mb-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

/* ============================================
   Upload Progress Overlay
   ============================================ */
.mb-progress-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.mb-progress-container {
    width: 60%;
    max-width: 400px;
    background: #e2e8f0;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.mb-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.1s linear;
    border-radius: 999px;
}

.mb-progress-text {
    font-size: 0.9rem;
    color: #334155;
    font-weight: 600;
}

.mb-progress-subtext {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

/* ============================================
   MediaBrowser Utilities (statt Inline-Styles)
   ============================================ */

/* Utility: Verstecken */
.mb-hidden {
    display: none !important;
}

/* Utility: Layout */
.mb-relative {
    position: relative;
}

.mb-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.mb-flex-wrap {
    flex-wrap: wrap;
}

.mb-align-center {
    align-items: center;
}

/* Ordner-Link in Tabelle */
.mb-folder-name {
    cursor: pointer;
    font-weight: bold;
}

/* Upload Label */
.mb-upload-label {
    cursor: pointer;
    border-style: dashed;
}

.mb-upload-label > input{
        display:none;
    }

/* === Share Modal Spezifische Styles === */

/* Grauer Einstellungs-Kasten oben */
.mb-settings-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* Zeile für Auth-Fallback (Basis-Regel) */
.mb-auth-fallback-row {
    margin-bottom: 10px;
    border-top: 1px solid #ddd;
    padding-top: 10px;
}

/* Labels und Selects im Modal */
.mb-label-bold {
    margin: 0;
    font-weight: bold;
}

.mb-select-bold {
    padding: 5px;
    font-weight: bold;
}

.mb-select-normal {
    padding: 5px;
}

/* Hint Text */
.mb-hint-text {
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #555;
}

/* Zeile für Datumsauswahl */
.mb-date-row {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--background-2);
    padding: 5px;
    border-radius: 3px;
    margin-top: 10px; /* Abstand nach oben */
}

.mb-push-right {
    margin-left: auto;
}

/* Container Wrapper für Dropdowns */
.mb-select-container {
    flex: 1;
    min-width: 200px;
}
.mb-select-full {
    display: block;
    width: 100%;
}

/* Modal Wrapper (Overlay) */
.mb-modal-overlay {
    display: block;
    z-index: 10000;
}

/* Modal Container Breite */
.mb-modal-width-large {
    max-width: 100%;
}

/* Abstandhalter */
.mb-mt-10 { margin-top: 10px; }
.mb-mt-20 { margin-top: 20px; }
.mb-mb-10 { margin-bottom: 10px; }

/* Flex Items fixieren */
.mb-flex-fixed {
    flex: 0 0 auto;
}

/* Mobile Optimierung für Date-Row */
@media (max-width: 640px) {
    .mb-date-row {
        flex-direction: column;
        align-items: stretch;
    }
    .mb-push-right {
        margin-left: 0;
        width: 100%;
    }
}

/* ============================================================
   FIX: Layout-Reset für MediaBrowser Modals
   Überschreibt die globalen .modal-* Styles NUR hier
   ============================================================ */

/* 1. Container: Zentrierung korrigieren & Margins entfernen */
.mb-modal-overlay .modal-container {
    margin: 50px auto !important; /* Statt 0% 15% auto ... */
    width: 90% !important;
    max-width: 800px !important;
    padding: 0 !important; /* Padding machen wir in den inneren Elementen */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Damit es auf den Screen passt */
    border-radius: 8px;
    overflow: hidden; /* Damit Header-Ecken abgerundet bleiben */
}

/* 2. Header: Das 15% Margin Problem lösen & Flexbox statt Float */
.mb-modal-overlay .modal-headline {
    margin: 0 !important; /* WICHTIG: Das killt den riesigen Abstand */
    height: auto !important;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f1f5f9; /* Hellgrauer Hintergrund für Header */
    border-bottom: 1px solid #cbd5e1;
    flex-shrink: 0;
}

/* 3. Titel: Schriftgröße normalisieren (war 3rem) */
.mb-modal-overlay .modal-title {
    float: none !important;
    font-size: 1.5rem !important; /* Kleiner als deine globalen 3rem */
    font-weight: 600;
    color: #1e293b !important; /* Dunkle Farbe erzwingen */
    padding: 0 !important;
    max-width: none !important;
}

/* 4. Schließen-Kreuz: Position korrigieren (war float:right) */
.mb-modal-overlay .modal-close {
    float: none !important;
    font-size: 1.5rem !important; /* War 4rem - viel zu groß für hier */
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background 0.2s;
}

.mb-modal-overlay .modal-close:hover {
    background-color: rgba(0,0,0,0.1);
    color: #ef4444 !important; /* Rot beim Hover */
}

/* 5. Inhalt: Abstände korrigieren */
.mb-modal-overlay .modal-matter {
    margin: 0 !important;
    padding: 20px !important;
    width: 100% !important;
    overflow-y: auto; /* Scrollbar wenn Inhalt zu lang */
    background: #fff;
}

/* 6. Tabelle und Dropdowns fixen (falls sie rausfliegen) */
.mb-modal-overlay .post-container {
    margin: 0 0 15px 0 !important;
    padding: 15px !important;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.mb-modal-overlay .addform-row, 
.mb-modal-overlay .addform-input {
    display: block !important; /* Tabellen-Layout der alten Forms aufbrechen */
    width: 100%;
}

/* Content from testing.css */
/* Gesamt-Container */
.test_container {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  background-color: var(--background-1);
  color: var(--text-3);
  position: relative;
  border-style: inset;
  border-width: 1px;
  border-radius:3px;
}

/* Header mit Back-Button, Titel und Fortschritt */
.test_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.test_back {
  background: var(--testbutton-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  padding: 0.5rem;
  cursor: pointer;
  font-size: 1.5rem;
  width:3.5rem;
  height:3.5rem;
  transition:0.25s;
}

.test_back:hover {
    background-color: var(--glass-hover);
    transition:0.25s;
}

.test_title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 1.5rem;
}
.test_progress {
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  min-width: 3rem;
  text-align: right;
}

/* Übersicht der Test-Durchläufe */
.test_list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
}
.test_list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: rgba(255,255,255,0.1);
  border-radius: 6px;
}

.test_answer_button math-field {
  pointer-events: none;
}

/* Einheitliche Buttons */
.test_button,
.test_answer_button {
  -webkit-tap-highlight-color: transparent;
  display: block;
  padding: 0.75rem 1rem;
  background: var(--testbutton-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-3);
  font-size: 1.5rem;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.2s;
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  touch-action: manipulation; /* verhindert Doppeltap-Vergrößerung */
  -webkit-touch-callout: none; /* verhindert iOS-Auswahlmenü */
}
.test_button:hover {
  background: var(--glass-hover);
}
.test_button {
  width: calc(100% - 2rem);
  margin: 0.5rem auto;
  max-width: 500px;
}

.test_answer_button p{
    margin:0;
    user-select: none;
}

/* Fragen-Text */
.test_question_text {
  padding: 1rem;
  background: var(--background-1);
  border-radius: 4px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

/* Navigations-Buttons (←/→) */
.test_nav {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  user-select: none;
}
.test_nav .test_button {
  width: 4rem;
  padding: 0.5rem;
  margin: 1rem 0;
  user-select: none;
}
.test_date{
    margin: 0 1rem;
    
}
.test_prog{
    margin: 0 1rem;
    font-weight: bold;
}

/* Antworten-Container */
.test_answers {
  display: flex;
  /*flex-direction: row;*/
  flex-direction: column;
  align-items: stretch;
  padding: 1rem 0;
  position: relative;
}

/* Antwort-Buttons */
.test_answer_button {
  flex: 1 1 calc(50% - 1rem);
  margin: 0.5rem;
  user-select: none;
  /*max-width: 40rem;*/
}
.test_answer_button:active {
  transform: scale(0.98);
}

/* Form der Buttons */
.test_single {
  border-radius: 16px;
}
.test_multi {
  border-radius: 4px;
}

/* Status-Markierungen */
.test_selected {
  background: rgba(255, 255, 0, 0.3) !important;
}
.test_correct {
  background: rgba(0, 200, 0, 0.3) !important;
}
.test_wrong {
  background: rgba(200, 0, 0, 0.3) !important;
}
.test_missing {
  background: rgba(0, 200, 0, 0.15) !important;
}

/* Action-Bereich (Auflösung / Weiter) */
.test_action {
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
.test_action .test_button {
  width: calc(100% - 2rem);
  margin: 1rem auto;
  user-select: none;
}

/* Fullscreen-Button */
#test_fullscreen_btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--testbutton-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-size: 1.5rem;
  line-height: 2.5rem;
  cursor: pointer;
  user-select: none;
  transition: 0.25s;
}
#test_fullscreen_btn:hover{
    background-color: var(--glass-hover);
    transition:0.25s;
}

/* Modal-Overlay für Musterlösung innerhalb des Antwort-Bereichs */
.test_modal_overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  z-index: 10;
}
.test_modal_overlay.hidden {
  display: none;
}
.test_modal {
  background: var(--testmodal-bg);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 1rem;
  max-width: 90%;
  max-height: 80%;
  overflow: auto;
  color: var(--text-3);
  font-size: 1.5rem;
}

/* Fragen blur, wenn Modal geöffnet */
.test_container.modal-open .test_question_text {
  filter: blur(4px);
}
.test_nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.test_nav_details {
  flex: 1;           /* Zwischen die Buttons stretchen */
  text-align: center;
  font-weight: bold;
  color: var(--text-3);
}

.question_displayname { margin-bottom: 0.5em; font-size: 1.1em; }
.question_points     { margin-bottom: 1em; color: #ccc; }
.question_wrapper    { padding: 1em; border: 1px solid #888; margin-bottom:1em; }

.question_parent_context{
    display: block;
    background: var(--accent-3);
    border-radius: 8px;
    color: var(--text-3);
    padding: 0.75rem 1rem;
    max-height: 5.5rem;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 0.5 rem;
    font-style: italic;
    font-size: 1.5rem;
}

.question_parent_context:hover {
  background: var(--shimmer);
}



div#test_content {
    height: calc(100vh - 6rem);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

div#test_content::-webkit-scrollbar {
    display: none;   
}

/* Content from bs.css */
/* Container für die Tabellenzelle, damit das Icon absolut positioniert werden kann */
.cell-relative {
    position: relative;
}

/* Das kleine beste.schule Icon oben rechts */
.bs-icon {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    z-index: 10;
}

/* Zustände für das Icon (ggf. auch für die ganze Zelle nutzbar) */
.bs-match {
    background-color: #2ecc71; /* Grün */
    box-shadow: 0 0 5px #2ecc71;
}
.bs-diff {
    background-color: #f39c12; /* Orange leuchtend */
    box-shadow: 0 0 8px #f39c12, inset 0 0 10px rgba(243, 156, 18, 0.3);
}
.bs-missing {
    background-color: #e74c3c; /* Rot leuchtend */
    box-shadow: 0 0 8px #e74c3c, inset 0 0 10px rgba(231, 76, 60, 0.3);
}

/* Extra-Spalten (Tests, die nur in beste.schule existieren) */
.bs-extra-col {
    background-color: rgba(150, 150, 150, 0.2) !important;
    color: #777;
    border: 1px dashed #aaa !important;
}
.bs-extra-col img {
    opacity: 0.5; /* Icon in den Extra-Spalten leicht ausgrauen */
}