/* ===================================
OPTIMIERTE FONT-DEFINITIONEN
Performance-optimiert mit Preload-Unterstützung
=================================== */
/* === MONTSERRAT FONT FAMILY === */
/* Verwendet für Überschriften und Logo */
@font-face {
font-family: 'Montserrat';
src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap; /* Optimiert für Performance */
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
src: url('../assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Montserrat';
src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* === POPPINS FONT FAMILY === */
/* Verwendet für Body-Text und allgemeine UI-Elemente */
@font-face {
font-family: 'Poppins';
src: url('../assets/fonts/Poppins-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
src: url('../assets/fonts/Poppins-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
src: url('../assets/fonts/Poppins-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
src: url('../assets/fonts/Poppins-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0020-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===================================
FONT LOADING OPTIMIZATION
=================================== */
/* Preload-Hinweis für kritische Fonts */
/* Diese sollten im HTML eingefügt werden:
*/
/* ===================================
FONT FALLBACK STACKS
=================================== */
/* Definiere sichere Fallback-Stacks */
.font-montserrat {
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.font-poppins {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
/* ===================================
FONT UTILITY CLASSES
=================================== */
/* Gewichte */
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* Größen (Mobile-First) */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
/* Responsive Typografie */
@media (min-width: 768px) {
.text-xl { font-size: 1.5rem; line-height: 2rem; }
.text-2xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-3xl { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
.text-2xl { font-size: 2rem; line-height: 2.5rem; }
.text-3xl { font-size: 3rem; line-height: 1; }
}
/* ===================================
PERFORMANCE OPTIMIERUNGEN
=================================== */
/* Font Loading für bessere Performance */
@supports (font-display: optional) {
@font-face {
font-family: 'Montserrat';
src: url('../assets/fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: optional; /* Fallback nur wenn Font schnell lädt */
}
}
/* ===================================
ACCESSIBILITY IMPROVEMENTS
=================================== */
/* Respektiere Nutzer-Präferenzen für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Verbesserte Lesbarkeit */
.text-readable {
line-height: 1.6;
letter-spacing: 0.01em;
}
/* High-Contrast Mode Unterstützung */
@media (prefers-contrast: high) {
.font-montserrat,
.font-poppins {
font-weight: 500; /* Etwas kräftiger für besseren Kontrast */
}
}