@font-face {
  font-family: 'SF Display Pro';
  src: url('fonts/SFPRODISPLAYTHINITALIC.OTF') format('opentype');
  font-style: italic;
  font-display: swap;
}

/* =========================
   DESIGN-TOKENS (CSS-Variablen)
========================= */

:root {
    /* Primärfarbe (Lila) */
    --clr-primary:          #9c3aa3;
    --clr-primary-dark:     #5b2d8e;
    --clr-primary-hover:    #852f8c;
    --clr-primary-disabled: #cdbbd0;
    --clr-primary-light:    #f3e6f5;
    --clr-primary-border:   #e5d3e7;
    --clr-primary-bg:       #faf7fb;

    /* Erfolg (Grün) */
    --clr-success:          #4fa43c;
    --clr-success-dark:     #2e7d32;
    --clr-success-darker:   #1b5e20;

    /* Fehler (Rot) */
    --clr-error:            #c62828;
    --clr-error-dark:       #b71c1c;

    /* Warnung (Orange/Gelb) */
    --clr-warning:          #f9a825;
    --clr-warning-dark:     #b45000;
    --clr-warning-mid:      #e65100;

    /* Teilweise gelernt */
    --clr-partial:          #caa000;
}

/* =========================
   ERFOLGS-SCREEN (nach E-Mail-Versand)
========================= */

#success-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 32px 16px;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#success-screen.success-screen-visible {
    opacity: 1;
    transform: scale(1);
}

.success-screen-inner {
    text-align: center;
    max-width: 480px;
    background: #fff;
    border: 1.5px solid var(--clr-success);
    border-radius: 20px;
    padding: 48px 36px 40px;
    box-shadow: 0 8px 32px rgba(79, 164, 60, 0.15);
}

.success-checkmark {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: success-pop 0.5s cubic-bezier(.17,.67,.35,1.4) both;
}

@keyframes success-pop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.success-title {
    font-size: 1.6rem;
    color: var(--clr-success-dark);
    margin: 0 0 10px;
}

.success-msg {
    color: #555;
    margin: 0 0 8px;
    font-size: 0.95rem;
}

.success-email {
    color: #555;
    font-size: 0.9rem;
    background: var(--clr-primary-light);
    border-radius: 8px;
    padding: 8px 14px;
    margin: 0 0 24px;
    display: inline-block;
}

.success-btn {
    background: var(--clr-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 8px;
}

.success-btn:hover { background: var(--clr-primary-hover); }

/* =========================
   GRUNDLAYOUT
========================= */

body{
    margin:0;
    font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    background:#e5e5e5;
    color:#333;
}

/* =========================
   WRAPPER
========================= */

.wrapper{
    max-width:1100px;
    width:100%;
    margin:30px auto;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    box-sizing:border-box;
}

/* =========================
   HEADER
========================= */

.header img{
    width:100%;
    display:block;
}

/* =========================
   NAVIGATION
========================= */

.mainmenu{
    background:#f5f5f5;
    padding:12px 20px;
    border-bottom:1px solid #ddd;
    font-size:14px;
}
.mainmenu a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.mainmenu a:hover {
    text-decoration: underline;
}

/* =========================
   HAUPTBEREICH
========================= */

.main{
    padding:40px;
}

/* =========================
   ÜBERSCHRIFTEN
========================= */

h1{
    color:#000000;
    margin-bottom:30px;
  font-family: "Century Gothic", Arial, Helvetica, sans-serif;
}

h2{
 font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    margin:10px 0;
}

h3{
 font-family: "Century Gothic", Arial, Helvetica, sans-serif;
    margin-top:0;
}

/* =========================
   DASHBOARD
========================= */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.dashboard-card{
    background:#fafafa;
    padding:30px;
    border-radius:10px;
    border:1px solid #eee;
    text-align:center;
    cursor:pointer;
    transition:all 0.2s ease;
}

.dashboard-card:hover{
    transform:translateY(-4px);
    box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.dashboard-card p{
    font-size:14px;
    color:#666;
}

.dashboard-card-disabled{
    opacity:0.75;
}

/* =========================
   BUTTONS
========================= */

button{
    padding:10px 18px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

button:hover{
    opacity:0.9;
}

button:disabled{
    opacity:0.7;
    cursor:not-allowed;
}

/* =========================
   SETS SEITE
========================= */

#sets-list{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.set-card{
    background:#fafafa;
    border:1px solid #e5e5e5;
    border-radius:10px;
    padding:20px;
    transition:all 0.2s ease;
}

.set-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.set-buttons{
    margin-top:15px;
    display:flex;
    gap:10px;
}

.set-buttons button{
    flex:1;
}

/* =========================
   SETAUSWAHL (SPIELE)
========================= */

#game-title{
    text-align:center;
    margin-bottom:25px;
	
	    word-break: normal;
    overflow-wrap: normal;

    /* erlaubt automatischen Zeilenumbruch */
    white-space: normal;
}

.selection-info{
    background:#fafafa;
    border:1px solid #ececec;
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:18px;
}

.selection-info p{
    margin:6px 0;
}

.mode-banner{
    background:var(--clr-primary-light);
    border:1px solid #d9bfdc;
    color:#6f2a74;
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:18px;
    font-weight:600;
}

.homework-options{
    background:var(--clr-primary-bg);
    border:1px solid #e8d8eb;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
}

.homework-options h2{
    margin-top:0;
    margin-bottom:10px;
}

.homework-options-text{
    margin-bottom:14px;
    color:#666;
}

.goal-option{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
    cursor:pointer;
}

.goal-option input[type="radio"]{
    width:auto;
    margin:2px 0 0 0;
}

.goal-option span{
    line-height:1.4;
}

/* Scrollbereich */

#sets-scroll-container{
    max-height:420px;
    overflow-y:auto;
    padding:10px;
    background:#f5f5f5;
    border-radius:8px;
}

/* Grid mit mehreren Karten nebeneinander */

#sets-container{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
}

/* einzelne Set-Karte */

#sets-container .set-card{
    background:white;
    border:1px solid #e0e0e0;
    border-radius:8px;
    padding:14px 16px;

    display:flex;
    align-items:center;
    gap:12px;

    cursor:pointer;
    transition:all 0.15s ease;
}

.set-card-info{
    flex:1;
    min-width:0;
}

.set-word-count{
    display:inline-block;
    font-size:12px;
    color:#888;
    margin-top:2px;
}

/* Hover */

#sets-container .set-card:hover{
    border-color:var(--clr-primary);
    background:var(--clr-primary-bg);
}

/* ausgewählt */

#sets-container .set-card.selected{
    border-color:var(--clr-primary);
    background:var(--clr-primary-light);
    border-left:4px solid var(--clr-primary);
}

/* Checkbox links */

#sets-container input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    cursor:pointer;
    flex-shrink:0;
}

/* Setname */

#sets-container .set-card span{
    flex:1;
    font-size:15px;
    line-height:1.3;
}

/* Startbutton */

#start-game-btn{
    margin-top:25px;
    width:100%;
    padding:13px;
    font-size:15px;
    font-weight:600;

    background:var(--clr-primary);
    color:white;

    border:none;
    border-radius:8px;

    cursor:pointer;
    transition:background 0.15s ease;
}

#start-game-btn:hover:not(:disabled){
    background:var(--clr-primary-hover);
}

/* deaktiviert */

#start-game-btn:disabled{
    background:var(--clr-primary-disabled);
    cursor:not-allowed;
}

/* Infotext */

.empty-info{
    margin:0;
    padding:20px;
    text-align:center;
    color:#666;
}

/* =========================
   SPIELE
========================= */

.game-mode-info{
    background:var(--clr-primary-bg);
    border:1px solid var(--clr-primary-border);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:18px;
}

.game-mode-badge{
    display:inline-block;
    background:var(--clr-primary);
    color:white;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-bottom:10px;
}

.game-goal-text{
    font-weight:600;
    margin-bottom:6px;
}

.game-goal-progress{
    color:#666;
}

.card{
    background:#fafafa;
    padding:40px;
    border-radius:10px;
    text-align:center;
    margin-bottom:25px;
}

.word{
    font-size:32px;
}

.answer{
    font-size:24px;
    color:var(--clr-success);
    margin-top:10px;
    min-height:32px;
}

.buttons{
    display:flex;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================
   Fortschrittsseite
========================= */

.progress-card{
    background:white;
    padding:25px;
    margin-bottom:20px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.progress-bar{
    width:100%;
    height:20px;
    background:#eee;
    border-radius:10px;
    overflow:hidden;
    margin:10px 0;
}

.progress-fill{
    height:100%;
    background:var(--clr-success);
    transition:width 0.5s;
}

.progress-stats{
    margin-top:10px;
}

.learned{
    color:var(--clr-success-dark);
    font-weight:600;
}

.partial{
    color:var(--clr-partial);
    font-weight:600;
}

.new{
    color:var(--clr-error);
    font-weight:600;
}

/* =========================
   SCHWIERIGE WÖRTER
========================= */

.difficult-card{
    background:#fafafa;
    padding:12px;
    border-radius:6px;
    margin-bottom:10px;
}

/* =========================
   FORMULARE
========================= */

input, textarea{
    width:100%;
    padding:10px;
    border:1px solid #ddd;
    border-radius:6px;
    margin-bottom:10px;
}

/*  =========================
    MULTIPLE CHOICE
=========================*/
.answers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:20px;
}

.mc-answer{
    padding:15px;
    font-size:16px;
    border:none;
    background:#f4f4f4;
    cursor:pointer;
    border-radius:6px;
    transition:0.2s;
}

.mc-answer:hover{
    background:#e5e5e5;
}

/*CREATE SET*/
/* =========================
   Vokabel Liste
========================= */

.add-row{
    margin-top:15px;
    margin-bottom:10px;
}

#vocab-scroll-container{
    max-height:320px;
    overflow-y:auto;
    margin-top:12px;
}

.vocab-entry{
    display:grid;
    grid-template-columns:1fr 1fr 36px;
    gap:12px;
    margin-bottom:10px;
    align-items:start;
}

.vocab-entry input{
    padding:8px 10px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:14px;
    height:36px;
    box-sizing:border-box;
}

/* =========================
   Löschen Button
========================= */

.delete-btn{
    height:36px;
    width:36px;
    background:#e5e5e5;
    border:none;
    border-radius:4px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.delete-btn:hover{
    background:#d6d6d6;
}

/* =========================
   Buttons unter der Liste
========================= */

.vocab-controls{
    margin-top:15px;
}

.form-buttons{
    margin-top:25px;
    display:flex;
    gap:10px;
}

.form-actions{
    margin-top:0;
    display:flex;
    gap:15px;
}

/* =========================
   ZUORDNUNGSSPIEL
========================= */

.memory-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:30px;
}

.memory-card{
    background:#fafafa;
    border:1px solid #ddd;
    padding:20px;
    border-radius:6px;
    text-align:center;
    font-size:18px;
    cursor:pointer;
    transition:all 0.2s;
}

.memory-card:hover{
    background:#f2f2f2;
}

.memory-card.selected{
    border:2px solid var(--clr-primary);
}

.memory-card.correct{
    background:#dff5df;
    border-color:var(--clr-success);
}

.memory-card.wrong{
    background:#ffdede;
    border-color:#d9534f;
}


/*SEND PROGRESS*/
.toggle-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:12px;
}

.switch{
    position:relative;
    display:inline-block;
    width:62px;
    height:34px;
}

.switch input{
    opacity:0;
    width:0;
    height:0;
    margin:0;
}

.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#d0d0d0;
    transition:.25s;
    border-radius:34px;
}

.slider:before{
    position:absolute;
    content:"";
    height:26px;
    width:26px;
    left:4px;
    bottom:4px;
    background-color:white;
    transition:.25s;
    border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.switch input:checked + .slider{
    background-color:var(--clr-primary);
}

.switch input:checked + .slider:before{
    transform:translateX(28px);
}

#overall-summary-hint{
    margin:0;
    color:#666;
    font-size:14px;
}


/**/
.game-mode-info{
    background:var(--clr-primary-bg);
    border:1px solid var(--clr-primary-border);
    border-radius:10px;
    padding:16px 18px;
    margin-bottom:18px;
}

.game-mode-badge{
    display:inline-block;
    background:var(--clr-primary);
    color:white;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    margin-bottom:10px;
}

.game-goal-text{
    font-weight:600;
    margin-bottom:6px;
}

.game-goal-progress{
    color:#666;
    margin-top:4px;
}

.typing-input-wrap{
    margin-top:20px;
}

#typing-answer{
    max-width:420px;
    margin:0 auto 12px auto;
    display:block;
    font-size:18px;
    text-align:center;
}

.typing-feedback{
    min-height:28px;
    font-size:18px;
    margin-top:10px;
}

.typing-correct{
    color:var(--clr-success-dark);
    font-weight:600;
}

.typing-wrong{
    color:var(--clr-error);
    font-weight:600;
}

.summary-buttons{
    margin-top:20px;
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

.primary-btn{
    background:var(--clr-primary);
    color:white;
}

/*EXAM SIMULTAION*/

.exam-page{
    max-width:100%;
}

.exam-help-text{
    color:#666;
    margin-bottom:18px;
}

.exam-writing-row{
    display:grid;
    grid-template-columns:200px 1fr 220px;
    gap:20px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.exam-writing-word{
    font-size:22px;
}

.exam-writing-answer input{
    margin:0;
}

.exam-writing-result{
    font-size:14px;
    color:#666;
}

.exam-mc-task{
    padding:18px 0;
    border-bottom:1px solid #eee;
}

.exam-mc-word{
    font-size:20px;
    margin-bottom:12px;
}

.exam-mc-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.exam-mc-option{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fafafa;
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:10px 12px;
}

.exam-mc-option input{
    width:auto;
    margin:0;
}

.exam-mc-result{
    margin-top:10px;
    font-size:14px;
}

.exam-matching-wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    margin-top:20px;
}

.exam-matching-column h3{
    margin-bottom:12px;
}

.exam-match-item{
    background:#fafafa;
    border:1px solid #ddd;
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:10px;
    cursor:pointer;
    transition:all 0.15s ease;
}

.exam-match-item:hover{
    background:var(--clr-primary-light);
    border-color:var(--clr-primary);
}

.exam-match-item.active{
    border-color:var(--clr-primary);
    background:var(--clr-primary-light);
}

.exam-match-item.assigned{
    border-left:4px solid var(--clr-primary);
}

.exam-match-main{
    font-size:16px;
    font-weight:600;
}

.exam-match-sub{
    font-size:13px;
    color:#666;
    margin-top:4px;
}

.exam-info-line{
    margin-top:14px;
    color:#555;
    font-size:14px;
}

.exam-correct-row{
    background:#eef8ee;
    border-radius:8px;
    padding:8px 10px;
}

.exam-wrong-row{
    background:#fff0f0;
    border-radius:8px;
    padding:8px 10px;
}

.exam-match-result-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:10px;
}

.exam-result-icon{
    font-weight:700;
    min-width:20px;
    text-align:right;
}

/*EXAM PDF*/
.exam-pdf-sheet{
    background:white;
    padding:20px;
    border:1px solid #ddd;
    border-radius:8px;
    box-shadow:none;
}

.exam-pdf-header{
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:2px solid #eee;
}

.exam-pdf-header h2{
    margin-top:0;
    margin-bottom:12px;
}

.exam-pdf-section{
    margin-top:20px;
}

.exam-mc-selected{
    border:2px solid var(--clr-primary) !important;
    background:var(--clr-primary-light) !important;
}

.exam-mc-correct-answer{
    box-shadow: inset 0 0 0 2px var(--clr-success);
}

/* =========================
   TOAST NOTIFICATIONS
========================= */

#toast-container{
    position:fixed;
    bottom:28px;
    right:28px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:10px;
    pointer-events:none;
}

.toast{
    padding:13px 20px;
    border-radius:8px;
    font-family:"Century Gothic",Arial,Helvetica,sans-serif;
    font-size:14px;
    font-weight:500;
    color:#fff;
    max-width:340px;
    box-shadow:0 4px 16px rgba(0,0,0,0.18);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.25s ease,transform 0.25s ease;
    pointer-events:none;
}

.toast.toast-visible{
    opacity:1;
    transform:translateY(0);
}

.toast-success{ background:var(--clr-success-dark); }
.toast-error  { background:var(--clr-error); }
.toast-warning{ background:var(--clr-warning-dark); }
.toast-info   { background:var(--clr-primary-dark); }

/* =========================
   BUTTON LOADING STATE
========================= */

.btn-loading{
    position:relative;
    color:transparent !important;
    pointer-events:none;
}

.btn-loading::after{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:16px; height:16px;
    margin:-8px 0 0 -8px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:btn-spin 0.7s linear infinite;
}

@keyframes btn-spin{
    to{ transform:rotate(360deg); }
}

/* =========================
   PASSWORD STRENGTH
========================= */

.pw-strength-bar{
    height:4px;
    border-radius:2px;
    margin-top:-6px;
    margin-bottom:10px;
    transition:width 0.3s,background 0.3s;
    width:0;
}

.pw-strength-label{
    font-size:12px;
    margin-top:-8px;
    margin-bottom:10px;
    min-height:16px;
}

/* =========================
   CONFIRM MODAL
========================= */

.confirm-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    transition:background 0.2s ease;
}

.confirm-overlay.confirm-visible{
    background:rgba(0,0,0,0.45);
}

.confirm-box{
    background:#fff;
    border-radius:10px;
    padding:28px 32px;
    max-width:360px;
    width:90%;
    box-shadow:0 8px 32px rgba(0,0,0,0.18);
    transform:scale(0.92);
    opacity:0;
    transition:transform 0.2s ease,opacity 0.2s ease;
}

.confirm-overlay.confirm-visible .confirm-box{
    transform:scale(1);
    opacity:1;
}

.confirm-msg{
    margin:0 0 20px;
    font-size:15px;
    line-height:1.5;
    color:#333;
}

.confirm-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

.confirm-ok{
    background:var(--clr-error);
    color:#fff;
    border:none;
    border-radius:6px;
    padding:9px 20px;
    font-size:14px;
    cursor:pointer;
    font-family:inherit;
}

.confirm-ok:hover{ background:var(--clr-error-dark); }

.confirm-cancel{
    background:#e5e5e5;
    color:#333;
    border:none;
    border-radius:6px;
    padding:9px 20px;
    font-size:14px;
    cursor:pointer;
    font-family:inherit;
}

.confirm-cancel:hover{ background:#d6d6d6; }

/* =========================
   RESPONSIVE / MOBILE
========================= */

@media (max-width: 768px) {
    body { background: white; }

    .wrapper {
        margin: 0;
        box-shadow: none;
    }

    .main {
        padding: 16px;
    }

    .mainmenu {
        font-size: 13px;
        padding: 10px 16px;
        line-height: 1.8;
    }

    /* Spiele: 2-spaltig → 1-spaltig */
    .answers {
        grid-template-columns: 1fr;
    }

    .memory-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Prüfungs-Zuordnung */
    .exam-writing-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .exam-matching-wrap {
        grid-template-columns: 1fr;
    }

    .exam-mc-options {
        grid-template-columns: 1fr;
    }

    /* Formulare */
    .vocab-entry {
        grid-template-columns: 1fr 1fr 36px;
        gap: 6px;
    }

    .form-buttons,
    .form-actions,
    .summary-buttons {
        flex-direction: column;
    }

    .form-buttons button,
    .form-actions button,
    .summary-buttons button {
        width: 100%;
    }

    /* Toast unten zentriert auf Mobile */
    #toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        align-items: center;
    }

    .toast {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }
}