/* 
 * Responsive Stylesheet für domain.com
 * Enthält alle Media Queries für responsive Design
 */

/* Tablet Devices */
@media (max-width: 992px) {
  /* Typografie */
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }
  
  /* Grid-System */
  .grid {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .col-3 {
    grid-column: span 3;
  }
  
  .col-4 {
    grid-column: span 3;
  }
  
  .col-5, .col-6, .col-7 {
    grid-column: span 6;
  }
  
  /* Header & Navigation */
  .desktop-nav {
    display: none;
  }
  
  /* Hero Section */
  .hero-grid {
    flex-direction: column;
  }
  
  .hero-content {
    max-width: 100%;
    text-align: center;
    margin-bottom: var(--space-lg);
  }
  
  .hero-visual {
    width: 100%;
  }
  
  /* About Section */
  .about-section .grid > div {
    margin-bottom: var(--space-md);
  }
  
  /* Testimonials */
  .testimonial-card {
    margin-bottom: var(--space-md);
  }
  
  /* Order Form */
  .contact-info {
    padding-right: 0;
    margin-bottom: var(--space-lg);
  }
  
  /* Footer */
  .main-footer .col-4 {
    margin-bottom: var(--space-md);
  }
}

/* Mobile Devices */
@media (max-width: 576px) {
  body {
    overflow-x: hidden;
  }
  /* Grid System */
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }
  
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 {
    grid-column: span 4;
  }
  
  /* Typografie */
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  /* Spacing */
  .container {
    padding: 0 10px;
  }
  
  section {
    padding: var(--space-lg) 0 !important;
  }
  
  /* Header */
  .logo h1 {
    font-size: 1.5rem;
  }
  
  /* Hero Section */
  .hero-content p {
    font-size: 1rem;
  }
  
  /* Service Cards */
  .service-card {
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
  }
  
  /* Timeline */
  .timeline::before {
    left: 20px;
  }
  
  .timeline-number {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }
  
  .timeline-item {
    padding-left: 50px;
  }
  
  /* Form */
  .order-form {
    padding: var(--space-md);
  }
  
  /* Cookie Popup */
  .cookie-popup-content {
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .cookie-button {
    width: 100%;
    text-align: center;
  }
}



/* Very Small Devices */
@media (max-width: 375px) {
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .logo h1 {
    font-size: 1.25rem;
  }
  
  .cta-button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}