@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ewdlgswx1m.bundle.scp.css';

/* /Components/Controls/AnswerStatisticSmall.razor.rz.scp.css */
/* /Components/Controls/CharacterHighlighter.razor.rz.scp.css */
:root[b-8z2j9ufgp6] {
    /* ... existing variables ... */
    --highlight-bg: #fef08a;   /* Light yellow */
    --highlight-color: #854d0e; /* Dark gold/brown */
}

.character-highlighter[b-8z2j9ufgp6] {
    font-size: 1.5rem;
    font-family: monospace;
    white-space: pre-wrap; /* Erlaubt Umbrüche bei langen Texten */
    line-height: 1.6;
}

.char-span[b-8z2j9ufgp6] {
    /* Standardstil für Buchstaben */
    padding: 0 1px;
}

.char-target[b-8z2j9ufgp6] {
    background-color: var(--highlight-bg, #fef08a);
    color: var(--highlight-color, #854d0e);
    border-bottom: 3px solid currentColor;
    font-weight: bold;
}

.char-error[b-8z2j9ufgp6] {
    background-color: #fecaca; /* Helles Rot */
    color: #dc2626;           /* Dunkles Rot */
    text-decoration: underline wavy; /* Optional: Wellenlinie */
}

/* Wenn Cursor UND Fehler gleichzeitig (User steht auf einem falschen Buchstaben, falls Backspace erlaubt ist) */
.char-target.char-error[b-8z2j9ufgp6] {
    background-color: #fca5a5;
    border-bottom-color: #dc2626;
}
/* /Components/Controls/CreateNewTypeQuiz.razor.rz.scp.css */
/* /Components/Controls/FlashCard.razor.rz.scp.css */
/* Card Grundlayout */
[b-imfogdw2x7] .card {
    display: flex;
    flex-direction: column; /* Flex-Ausrichtung vertikal */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: unset;
    width: 300px;
    height: 400px; /* Feste Höhe für die Card */
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    background-color: #ffffff;
}


[b-imfogdw2x7] .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Header */
[b-imfogdw2x7] .card-header {
    background-color: #f5f5f5;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #ddd;
    color: #333;
    width: 100%;
}

/* Flexibler Hauptinhalt */
[b-imfogdw2x7] .card-content {
    flex: 1; /* Nimmt den Platz ein, der übrig bleibt */
    padding: 16px;
    font-size: 14px;
    height: 100px;
    color: #555;
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6; /* Bis zu 6 Zeilen anzeigen (anpassbar) */
    -webkit-box-orient: vertical;
}

/* Footer (fixe Höhe am Ende der Card) */
[b-imfogdw2x7] .card-footer {
    padding: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid #ddd;
    width: 100%;
    flex-shrink: 0;
}

/* /Components/Controls/FlashCardEditor.razor.rz.scp.css */
/* /Components/Controls/FrontPageCatcher.razor.rz.scp.css */
.glass-card[b-4w88lijids]{
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: white;
    margin: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
}
/* /Components/Controls/LeitnerBoxes.razor.rz.scp.css */
/* /Components/Controls/P42Center.razor.rz.scp.css */
/* /Components/Controls/Panel.razor.rz.scp.css */
.result[b-75s7hcrx2w] {
    color: var(--accent-foreground-rest);
    border: 1px solid var(--accent-foreground-rest);
    border-radius: 5px;
    width: 100%;
    height: 100%;
    /* Flexbox container to hold the two halves */
    display: flex;
    flex-direction: row; /* Arrange items horizontally */
    padding: 0; /* Ensure no padding interferes with widths */
    overflow: hidden; /* Ensure rounded corners clip the background */

    /* ... existing properties ... */
    /* Force hardware acceleration context in Safari */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.title-container[b-75s7hcrx2w] {
    width: 50%; /* Takes up the right half (technically order matters, see below) */
    background-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: flex-end; /* Right align text */
    padding-right: 8px; /* Little padding from the right edge */
    font-size: 0.75rem;
    /* Order 2 puts it on the right side */
    order: 1;

    /* Add this to help Safari rendering */
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.content-container[b-75s7hcrx2w] {
    width: 50%; /* Takes up the left half (or full if title is missing) */
    flex-grow: 1; /* Allow it to grow if title is missing */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    /* Order 1 puts it on the left side */
    order: 2;
}
/* /Components/Controls/Quiz/FlashCardQuiz.razor.rz.scp.css */
.fcq-container[b-15drrfyne2] {
    perspective: 1000px;
    width: 100%;
}

.fcq-card[b-15drrfyne2] {
    position: relative;
    width: 100%;
    height: 280px;
    transform-style: preserve-3d;
    transition: transform 350ms ease;
}

.fcq-container.revealed .fcq-card[b-15drrfyne2] {
    transform: rotateY(180deg);
}

.fcq-face[b-15drrfyne2] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.fcq-back[b-15drrfyne2] {
    transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .fcq-card[b-15drrfyne2] { transition: none; }
}
/* /Components/Controls/Quiz/MultipleChoiceQuiz.razor.rz.scp.css */
/* /Components/Controls/Quiz/SpeedTypingQuiz.razor.rz.scp.css */
/* /Components/Controls/Quiz/TypeCardQuiz.razor.rz.scp.css */
.result[b-m3fqd3h2qc] {
    color: var(--accent-foreground-rest);
    border: 1px solid var(--accent-foreground-rest);
    border-radius: 5px;
    width: 32px;
    height: 32px;
    /* Add these lines to center the content: */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* /Components/Controls/SettingsContent.razor.rz.scp.css */
/* /Components/Controls/TTSPlayButton.razor.rz.scp.css */
/* /Components/Controls/WorkingCard.razor.rz.scp.css */
/* /Components/Pages/CardSelection.razor.rz.scp.css */
.flashcard[b-i4dbs33ehl] {
    width: 350px; /* Feste Breite für die Flashcards */
    height: 260px; /* Feste Höhe für die Flashcards */
    margin: 10px; /* Abstand zwischen Karten */
    box-sizing: border-box; /* Verhindert Überlappen durch Padding */
}

.flashcard-container[b-i4dbs33ehl] {
    display: flex; /* Flexbox für Ausrichtung */
    flex-wrap: wrap; /* Umbruch bei Bedarf */
    justify-content: center; /* Zentriere Karten horizontal */
    gap: 10px; /* Abstand zwischen den Karten */
}

.background[b-i4dbs33ehl] {
    min-height: 100vh; /* full viewport height */
    background-image: url("/images/working-5348699_1920.jpg"); /* adjust path */
    background-size: cover;        /* or 'contain' if you want full image visible */
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;  /* image stays fixed */
    overflow-x: hidden;
    overflow-y: auto;
    margin: -0.5rem -1.5rem;

    /* \Optional: make sure content isn't glued to the edge 
    
    */
    padding: 24px;
}
/* /Components/Pages/EmailUs.razor.rz.scp.css */
/* /Components/Pages/FlashCards/FlashCards.razor.rz.scp.css */
/* /Components/Pages/Home.razor.rz.scp.css */
.background[b-gnphz7uzxl] {
    min-height: 100vh; /* full viewport height */
    background-image: url("/images/working-5348699_1920.jpg"); /* adjust path */
    background-size: cover;        /* or 'contain' if you want full image visible */
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;  /* image stays fixed */
    overflow-x: hidden;
    overflow-y: auto;
    margin: -0.5rem -1.5rem;
  
    /* \Optional: make sure content isn't glued to the edge 
    
    */
    padding: 24px;
}
/* /Components/Pages/MultipleChoice/MultipleChoice.razor.rz.scp.css */
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* /Components/Pages/Settings.razor.rz.scp.css */
/* /Components/Pages/SpeedTyping/SpeedTyping.razor.rz.scp.css */
/* /Components/Pages/TypeCards/NewTypeQuiz.razor.rz.scp.css */
/* /Components/Pages/TypeCards/Quiz.razor.rz.scp.css */
/* /Components/Pages/TypeCards/TypeQuizSettings.razor.rz.scp.css */
/* /Components/UI/AppBar.razor.rz.scp.css */
/* Default: Desktop → Vertical */
[b-byo2iecgc9] .responsive-appbar {
   /* flex-direction: column; */
    width: 100%;       /* adjust as needed */
    height: 100%;
    background-color: red;

}

/* Mobile → Horizontal */
@media (max-width: 767px) {
    [b-byo2iecgc9] .responsive-appbar {
       /* flex-direction: row; */
        width: 100%;
        height: 100%;
        background-color: #00bbff;

    }
}