/* Schriftfinder Start*/
:root { 
    --mdf-primary: #E91E63; 
    --mdf-primary-hover: #D81B60;
    --mdf-bg-gray: #f1f5f9;
    --mdf-border: #e2e8f0;
}

.mdf-schriftfinder-container { 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 20px; 
    background: #ffffff; 
    border-radius: 8px; 
    font-family: sans-serif; 
    box-sizing: border-box; 
}

.mdf-intro-text {
    font-size: 14px;
    color: #475569;
    margin-bottom: 20px;
    line-height: 1.5;
}

.mdf-controls { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: flex-end; 
    gap: 20px; 
    margin-bottom: 25px; 
    background: var(--mdf-bg-gray); 
    padding: 20px; 
    border-radius: 8px; 
}

/* Flex-Gewichtung für Desktop */
.mdf-control-group.mdf-text-group { 
    flex: 1 1 150px; /* Nimmt weniger Platz ein */
}

.mdf-control-group.mdf-size-group { 
    flex: 3 1 300px; /* Nimmt deutlich mehr Platz ein */
}

.mdf-control-group p { 
    margin: 0 0 8px 0 !important; 
    font-weight: 600; 
    font-size: 13px; 
    color: #1e293b; 
}

.mdf-variant-info-box { 
    flex: 1 1 100%; 
    padding-top: 15px;
    border-top: 1px solid var(--mdf-border);
    margin-top: 10px;
}

.mdf-variant-info-box p { margin: 0; font-size: 13px; color: #64748b; }

.mdf-text-input, .mdf-size-input { 
    padding: 10px; 
    border: 1px solid var(--mdf-border); 
    border-radius: 6px; 
    font-size: 15px; 
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    height: 42px;
}

.mdf-size-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    width: 100%; 
    height: 42px;
}

.mdf-size-wrapper input[type="range"] { 
    flex: 1; 
    accent-color: var(--mdf-primary); 
    margin: 0; 
    cursor: pointer;
}

/* Verkleinert das Zahlenfeld im Vergleich zum Slider */
.mdf-size-input {
    flex: 0 0 65px;
    text-align: center;
}

/* Grid und Responsive Verhalten */
.mdf-font-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
.mdf-font-item { 
    background: #fff; 
    padding: 15px; 
    border-radius: 8px; 
    border: 1px solid var(--mdf-border); 
    cursor: pointer; 
    transition: 0.2s; 
    display: flex; 
    flex-direction: column; 
}

.mdf-font-item:hover { border-color: var(--mdf-primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.mdf-font-preview { margin-bottom: 15px; min-height: 40px; color: #111; overflow: hidden; }
.mdf-font-meta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f1f5f9; padding-top: 10px; }
.mdf-font-name { font-size: 11px; font-family: monospace; color: #64748b; }

.mdf-copy-btn { 
    background: var(--mdf-primary); 
    color: #fff; 
    border: none; 
    padding: 6px 14px; 
    border-radius: 4px; 
    font-size: 11px; 
    font-weight: 600; 
    cursor: pointer; 
}

/* Toast Design */
.mdf-toast-overlay { 
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
    display: flex; justify-content: center; align-items: center; 
    background: rgba(15, 23, 42, 0.6); z-index: 999999; 
    opacity: 0; visibility: hidden; transition: 0.2s; 
}
.mdf-toast-content { 
    background: #fff; padding: 20px 30px; border-radius: 8px; text-align: center; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); transform: scale(0.9); transition: 0.2s; 
}
.mdf-toast-title { font-size: 15px; font-weight: 700; color: #1e293b; display: block; }
.mdf-toast-subtitle { color: var(--mdf-primary); font-size: 13px; font-weight: 700; display: block; text-transform: uppercase; margin: 4px 0; }
.mdf-toast-hint { font-size: 11px; color: #64748b; display: block; }
.mdf-toast-overlay.show { opacity: 1; visibility: visible; }
.mdf-toast-overlay.show .mdf-toast-content { transform: scale(1); }
/* Schriftfinder ENde  */