/* ===================================================
   BROTHERS AMSTETTEN - SUPPLEMENTARY STYLES
   Additional enhancements & utility classes
   ================================================== */

/* ===== SCROLLBAR STYLING ===== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

::-webkit-scrollbar-thumb {
  background-color: #4d3c33;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #3a2a25;
}

/* ===== UTILITY CLASSES ===== */

/* Text Alignments */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Spacing Utilities */
.mt-xs { margin-top: 0.5rem; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2rem; }
.mt-xl { margin-top: 3rem; }

.mb-xs { margin-bottom: 0.5rem; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 1.5rem; }
.mb-lg { margin-bottom: 2rem; }
.mb-xl { margin-bottom: 3rem; }

.p-sm { padding: 1rem; }
.p-md { padding: 1.5rem; }
.p-lg { padding: 2rem; }

/* Display Utilities */
.hidden { display: none; }
.visible { display: block; }

/* Opacity */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* ===== PRINT STYLES ===== */
@media print {
  .navbar,
  .floating-buttons,
  .btn-hours {
    display: none;
  }

  body {
    color: #000;
    background-color: #fff;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* ===== ACCESSIBILITY ===== */

/* Focus states for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #4d3c33;
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4d3c33;
  color: white;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-to-main:focus {
  top: 0;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== CUSTOM FORM STYLING ===== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
  font-family: var(--font-body);
  color: inherit;
}

/* Focus state for form inputs */
.form-input:focus {
  border-color: #4d3c33;
  box-shadow: 0 0 0 3px rgba(77, 60, 51, 0.1);
}

/* Placeholder styling */
.form-input::placeholder {
  opacity: 0.7;
}

/* ===== LINK STYLING ===== */

a {
  color: inherit;
  transition: color 0.3s ease;
}

a:hover {
  color: #4d3c33;
}

/* Special link styling in dark sections */
.kontakt-section a {
  color: #d2c1a5;
}

.kontakt-section a:hover {
  color: #ffffff;
}

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

.loading {
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #4d3c33;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

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

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4d3c33;
  color: white;
  padding: 16px 24px;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  animation: slideUp 0.3s ease;
}

.toast.success {
  background-color: #28a745;
}

.toast.error {
  background-color: #dc3545;
}

.toast.info {
  background-color: #17a2b8;
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ===== IMAGE UTILITIES ===== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Image hover effects */
.img-responsive:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease;
}

/* ===== CUSTOM SCROLLING BEHAVIOR ===== */

html.smooth-scroll {
  scroll-behavior: smooth;
}

/* ===== BACKDROP BLUR (for modals, if needed) ===== */

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 998;
}

/* ===== PARALLAX EFFECT (Optional) ===== */

.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll;
  }
}

/* ===== BADGE/LABEL STYLING ===== */

.badge {
  display: inline-block;
  padding: 4px 12px;
  background-color: #4d3c33;
  color: white;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge.new {
  background-color: #c41e3a;
}

.badge.special {
  background-color: #2f4a3c;
}

/* ===== CONTAINER VARIANTS ===== */

.container-sm {
  max-width: 800px;
  margin: 0 auto;
}

.container-md {
  max-width: 1000px;
  margin: 0 auto;
}

.container-lg {
  max-width: 1200px;
  margin: 0 auto;
}

.container-xl {
  max-width: 1400px;
  margin: 0 auto;
}

/* ===== CARD COMPONENT ===== */

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.card-dark {
  background-color: #4d3c33;
  color: white;
}

/* ===== FLEXBOX UTILITIES ===== */

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }

/* ===== GRID UTILITIES ===== */

.grid {
  display: grid;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ===== DIVIDER ===== */

.divider {
  height: 1px;
  background-color: #ddd;
  margin: 2rem 0;
}

.divider-dark {
  background-color: rgba(255, 255, 255, 0.2);
}

/* ===== SHADOW UTILITIES ===== */

.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ===== BORDER UTILITIES ===== */

.border {
  border: 1px solid #ddd;
}

.border-dark {
  border-color: #4d3c33;
}

.border-light {
  border-color: #f0f0f0;
}

.border-top { border-top: 1px solid #ddd; }
.border-bottom { border-bottom: 1px solid #ddd; }
.border-left { border-left: 1px solid #ddd; }
.border-right { border-right: 1px solid #ddd; }

.rounded {
  border-radius: 8px;
}

.rounded-lg {
  border-radius: 12px;
}

.rounded-full {
  border-radius: 9999px;
}

/* ===== ASPECT RATIO ===== */

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

/* ===== VERTICAL ALIGN HELPER ===== */

.v-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== HERO TEXT WITH GRADIENT ===== */

.gradient-text {
  background: linear-gradient(135deg, #4d3c33, #2f4a3c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== HOVER EFFECTS ===== */

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-darken {
  transition: filter 0.3s ease;
}

.hover-darken:hover {
  filter: brightness(0.9);
}

/* ===== DARK MODE SUPPORT (Optional) ===== */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #e0e0e0;
  }

  .card {
    background-color: #2a2a2a;
    color: #e0e0e0;
  }

  .form-input {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border-color: #4a4a4a;
  }
}

/* ===== ANIMATION KEYFRAMES ===== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.6s ease;
}

.animate-fadeInDown {
  animation: fadeInDown 0.6s ease;
}

.animate-slideInLeft {
  animation: slideInLeft 0.6s ease;
}

.animate-slideInRight {
  animation: slideInRight 0.6s ease;
}

/* ===== RESPONSIVE TEXT SIZING ===== */

@media (max-width: 768px) {
  .text-lg { font-size: 1rem; }
  .text-xl { font-size: 1.25rem; }
}

/* ===== END OF SUPPLEMENTARY STYLES ===== */