/* 
 * Kaisergarten Restaurant - Grid CSS
 * Modernisiertes Layout-System mit CSS Grid und Flexbox
 */

/* Container-System */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    position: relative;
}

.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-xl {
    max-width: var(--container-xl);
}

.container-fluid {
    max-width: 100%;
}

/* Flexbox-basiertes Row-System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--spacing-sm) * -1);
}

.row > * {
    padding: 0 var(--spacing-sm);
    width: 100%;
}

/* Flexbox Spalten */
.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Flexbox Utilities - Erweitert */
.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-shrink-1 {
    flex-shrink: 1;
}

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.justify-evenly {
    justify-content: space-evenly;
}

/* Align Items */
.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-center {
    align-items: center;
}

.items-baseline {
    align-items: baseline;
}

.items-stretch {
    align-items: stretch;
}

/* Align Self */
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

.self-end {
    align-self: flex-end;
}

.self-center {
    align-self: center;
}

.self-stretch {
    align-self: stretch;
}

/* Align Content */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

.content-center {
    align-content: center;
}

.content-between {
    align-content: space-between;
}

.content-around {
    align-content: space-around;
}

.content-stretch {
    align-content: stretch;
}

/* Modernes CSS Grid System */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-cols-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Grid Gap */
.gap-0 {
    gap: 0;
}

.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-xl {
    gap: var(--spacing-xl);
}

/* Grid Column Span */
.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* Grid Row Span */
.row-span-1 {
    grid-row: span 1 / span 1;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.row-span-3 {
    grid-row: span 3 / span 3;
}

.row-span-full {
    grid-row: 1 / -1;
}

/* Sections */
section {
    padding: var(--spacing-xxl) 0;
    position: relative;
    overflow: hidden;
}

section.with-bg {
    background-color: var(--light-color);
}

section.with-texture {
    background-image: var(--paper-texture);
    background-size: 400px;
    background-repeat: repeat;
}

section.with-pattern {
    background-image: var(--light-pattern-bg);
    background-size: 300px;
    background-repeat: repeat;
}

section.with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

section.with-overlay > * {
    position: relative;
    z-index: 2;
}

/* Section Dividers */
.section-divider {
    height: 80px;
    position: relative;
    overflow: hidden;
}

.section-divider svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}

.divider-top {
    top: 0;
    transform: translateY(-1px);
}

.divider-bottom {
    bottom: 0;
    transform: translateY(1px);
}

/* Section Decorations */
.section-ornament {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--transition-smooth);
}

.section-ornament.top-left {
    top: 0;
    left: 0;
}

.section-ornament.top-right {
    top: 0;
    right: 0;
    transform: rotate(90deg);
}

.section-ornament.bottom-left {
    bottom: 0;
    left: 0;
    transform: rotate(270deg);
}

.section-ornament.bottom-right {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

.section-ornament img {
    width: 150px;
    height: auto;
    opacity: 0.2;
    transition: transform var(--transition-speed) var(--transition-bounce);
}

.section-ornament:hover img {
    opacity: 0.3;
    transform: scale(1.05);
}

/* Spacing Utilities - Erweitert */
/* Margin */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.m-xxs { margin: var(--spacing-xxs); }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-xxl { margin: var(--spacing-xxl); }

/* Margin X-Axis */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-xxs { margin-left: var(--spacing-xxs); margin-right: var(--spacing-xxs); }
.mx-xs { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }
.mx-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
.mx-xxl { margin-left: var(--spacing-xxl); margin-right: var(--spacing-xxl); }

/* Margin Y-Axis */
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.my-xxs { margin-top: var(--spacing-xxs); margin-bottom: var(--spacing-xxs); }
.my-xs { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }
.my-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
.my-xxl { margin-top: var(--spacing-xxl); margin-bottom: var(--spacing-xxl); }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mt-xxs { margin-top: var(--spacing-xxs); }
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-xxl { margin-top: var(--spacing-xxl); }
.mt-xxxl { margin-top: var(--spacing-xxxl); }

/* Margin Right */
.mr-0 { margin-right: 0; }
.mr-auto { margin-right: auto; }
.mr-xxs { margin-right: var(--spacing-xxs); }
.mr-xs { margin-right: var(--spacing-xs); }
.mr-sm { margin-right: var(--spacing-sm); }
.mr-md { margin-right: var(--spacing-md); }
.mr-lg { margin-right: var(--spacing-lg); }
.mr-xl { margin-right: var(--spacing-xl); }
.mr-xxl { margin-right: var(--spacing-xxl); }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-auto { margin-bottom: auto; }
.mb-xxs { margin-bottom: var(--spacing-xxs); }
.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-xxl { margin-bottom: var(--spacing-xxl); }
.mb-xxxl { margin-bottom: var(--spacing-xxxl); }

/* Margin Left */
.ml-0 { margin-left: 0; }
.ml-auto { margin-left: auto; }
.ml-xxs { margin-left: var(--spacing-xxs); }
.ml-xs { margin-left: var(--spacing-xs); }
.ml-sm { margin-left: var(--spacing-sm); }
.ml-md { margin-left: var(--spacing-md); }
.ml-lg { margin-left: var(--spacing-lg); }
.ml-xl { margin-left: var(--spacing-xl); }
.ml-xxl { margin-left: var(--spacing-xxl); }

/* Padding */
.p-0 { padding: 0; }
.p-xxs { padding: var(--spacing-xxs); }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-xxl { padding: var(--spacing-xxl); }

/* Padding X-Axis */
.px-0 { padding-left: 0; padding-right: 0; }
.px-xxs { padding-left: var(--spacing-xxs); padding-right: var(--spacing-xxs); }
.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }
.px-xxl { padding-left: var(--spacing-xxl); padding-right: var(--spacing-xxl); }

/* Padding Y-Axis */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xxs { padding-top: var(--spacing-xxs); padding-bottom: var(--spacing-xxs); }
.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.py-xxl { padding-top: var(--spacing-xxl); padding-bottom: var(--spacing-xxl); }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-xxs { padding-top: var(--spacing-xxs); }
.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }
.pt-xxl { padding-top: var(--spacing-xxl); }
.pt-xxxl { padding-top: var(--spacing-xxxl); }

/* Padding Right */
.pr-0 { padding-right: 0; }
.pr-xxs { padding-right: var(--spacing-xxs); }
.pr-xs { padding-right: var(--spacing-xs); }
.pr-sm { padding-right: var(--spacing-sm); }
.pr-md { padding-right: var(--spacing-md); }
.pr-lg { padding-right: var(--spacing-lg); }
.pr-xl { padding-right: var(--spacing-xl); }
.pr-xxl { padding-right: var(--spacing-xxl); }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-xxs { padding-bottom: var(--spacing-xxs); }
.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }
.pb-xxl { padding-bottom: var(--spacing-xxl); }
.pb-xxxl { padding-bottom: var(--spacing-xxxl); }

/* Padding Left */
.pl-0 { padding-left: 0; }
.pl-xxs { padding-left: var(--spacing-xxs); }
.pl-xs { padding-left: var(--spacing-xs); }
.pl-sm { padding-left: var(--spacing-sm); }
.pl-md { padding-left: var(--spacing-md); }
.pl-lg { padding-left: var(--spacing-lg); }
.pl-xl { padding-left: var(--spacing-xl); }
.pl-xxl { padding-left: var(--spacing-xxl); }

/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }

/* Position Utilities */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* Z-Index Utilities */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    section {
        padding: var(--spacing-xl) 0;
    }
    
    .lg\:hidden {
        display: none !important;
    }
    
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    
    .lg\:col-span-full { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
    section {
        padding: var(--spacing-lg) 0;
    }
    
    .md\:hidden {
        display: none !important;
    }
    
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    
    .md\:col-span-full { grid-column: 1 / -1; }
    
    .md\:flex-col {
        flex-direction: column;
    }
    
    .section-ornament img {
        width: 120px;
    }
}

@media (max-width: 767px) {
    section {
        padding: var(--spacing-md) 0;
    }
    
    .sm\:hidden {
        display: none !important;
    }
    
    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    
    .sm\:col-span-full { grid-column: 1 / -1; }
    
    .section-ornament img {
        width: 100px;
    }
}

@media (max-width: 480px) {
    .xs\:hidden {
        display: none !important;
    }
    
    .section-ornament img {
        width: 80px;
    }
}

/* Reduzierte Bewegung für Benutzer, die dies in ihren Systemeinstellungen bevorzugen */
@media (prefers-reduced-motion: reduce) {
    .section-ornament,
    .section-ornament img {
        transition: none !important;
    }
}