/* 
 * Kaisergarten Restaurant - Reset CSS
 * Modernisierte Grundlegende Styles für die Webseite
 */

/* Moderner CSS Reset mit Fokus auf Barrierefreiheit und Performance */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Verbesserte Scrollbar-Darstellung für WebKit-Browser */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-200);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-500);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-600);
}

/* Verbesserte Textauswahl */
::selection {
    background-color: var(--primary-color);
    color: var(--text-light);
}

html {
    font-size: 16px; /* Basis-Schriftgröße für rem-Einheiten */
    scroll-behavior: smooth; /* Sanftes Scrollen für Anker-Links */
    -webkit-text-size-adjust: 100%; /* Verhindert automatische Textvergrößerung auf iOS */
}

body {
    line-height: var(--line-height-normal);
    color: var(--text-color);
    background-color: var(--neutral-100);
    font-family: 'Raleway', sans-serif;
    font-size: var(--font-size-base);
    overflow-x: hidden;
    background-image: var(--light-pattern-bg);
    background-repeat: repeat;
    min-height: 100vh; /* Stellt sicher, dass der Body mindestens die volle Viewport-Höhe einnimmt */
    text-rendering: optimizeSpeed; /* Optimiert die Textdarstellung für Geschwindigkeit */
}

/* Verbesserte Fokus-Stile für Barrierefreiheit */
:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Grundlegende Link-Stile */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-smooth),
                background-color var(--transition-speed) var(--transition-smooth);
}

a:hover {
    color: var(--primary-dark);
}

/* Listen-Reset */
ul, ol {
    list-style: none;
}

/* Bilder und Medien */
img, picture, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Verbesserte Bilddarstellung */
img {
    object-fit: cover; /* Standardmäßig cover für bessere Bildproportionen */
}

/* Formulare und Eingabefelder */
input, button, textarea, select {
    font: inherit; /* Erbt die Schriftart vom übergeordneten Element */
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

/* Tabellen */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

/* Verbesserte Barrierefreiheit für versteckte Elemente */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Container-Klasse für konsistente Breite */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Verhindert CLS (Cumulative Layout Shift) für Bilder und iframes */
img, iframe {
    aspect-ratio: attr(width) / attr(height);
}

/* Responsive Container-Größen */
@media (max-width: 1280px) {
    .container {
        max-width: var(--container-lg);
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: var(--container-md);
    }
}

@media (max-width: 768px) {
    .container {
        max-width: var(--container-sm);
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    html {
        font-size: 15px; /* Leicht reduzierte Basis-Schriftgröße für mobile Geräte */
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
    }
}

/* Reduzierte Bewegung für Benutzer, die dies in ihren Systemeinstellungen bevorzugen */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}