@media (max-width: 768px) {

  .header {
    padding: 0.5rem 0.75rem;
  }

  .menu-bar {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0 1rem;
  }

  .site-logo img {
    max-width: 220px;
    height: 100%;
  }

  .menu-toggle {
    font-size: 1.3rem;
  }

  .social-icons-header {
    display: none;
  }

  .menu-grid {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }

  .menu-column {
    text-align: center;
  }

  .footer {
    font-size: 0.9rem;
  }

  .planung-grid {
    grid-template-columns: 1fr; /* 1 Spalte für schmale Screens */
  }
}

  .timeline::before {
    left: 8px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 0;
    text-align: left !important;
  }

  .timeline-item.right,
  .timeline-item.left {
    left: 0;
  }

/* === IMPRESSUM === */

  .impressum {
    display: block;
    padding: 2rem 1rem;
  }

  .left-column,
  .right-column {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
    text-align: justify; /* für Blocktext-Layout */
  }

  .impressum h2,
  .impressum h3 {
    text-align: center;
  }

  .impressum p {
    font-size: 1rem;
    line-height: 1.6;
    color: #0f0f0f;
    word-wrap: break-word;
  }

  .impressum a {
  color: #e63946;
  text-decoration: underline;
 }

 .impressum a:hover {
  color: #ff4b5c; /* etwas helleres Rot beim Hover */
 }

/* === PRIVATKUNDEN === */

  .privatkunden-container {
    padding: 0 0rem; /* z. B. 1rem = 16px Abstand links und rechts */
    max-width: 95vw;
  }

  .privatkunden-container blockquote {
    padding: 1.5rem 1rem;
  }

  .privatkunden-container h2 {
    font-size: 1.5rem;
  }

  .privatkunden-container p,
  .privatkunden-container li {
    font-size: 1rem;
  }

  .google-reviews {
    padding: 2rem 1rem;
  }

  .review {
    flex-direction: column;
    align-items: flex-start;
  }

  .kunden-grid {
    flex-direction: column;
    align-items: center;
  }

/* === IMPRESSUM & LEISTUNGEN === */

  .header {
    margin-bottom: 0.5rem;
  }

  .impressum h2 {
    margin-top: 1rem; /* z. B. von 3rem auf 1rem reduzieren */
  }

  .impressum {
    padding-top: 1rem; /* reduziert den oberen Innenabstand */
  }

  main.impressum-wrapper {
    padding-top: 0rem; /* falls hier noch Abstand war */
  }


  .leistung-bild {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .left-column {
    padding: 0;
    margin: 0;
  }

  .leistungen {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0rem 2rem;
  }



/* ==== MOBILE MENU SCROLL FIX (<=768px) ==== */
@media (max-width: 768px) {
  /* Panel als Flex-Container, damit der Inhalt (menu-grid) die Scrollhöhe bekommt */
  #menuPanel.menu-panel {
    position: fixed;
    inset: 0;
    display: flex;                   /* neu */
    flex-direction: column;          /* neu */
    background: #fff;
    z-index: 1000;
    padding: 5rem 1rem 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
  }
  #menuPanel.menu-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: 100svh;                  /* statt max-height + 100dvh */
    max-height: none;                /* wichtig */
    overscroll-behavior: contain;    /* iOS/Android: kein Hintergrund-Scroll */
  }

  /* Der eigentliche Scrollbereich */
  #menuPanel .menu-grid {
    flex: 1 1 auto;                  /* nimmt Resthöhe */
    overflow-y: auto;                 /* scrollt */
    -webkit-overflow-scrolling: touch;/* iOS smooth scroll */
    padding-bottom: 1rem;             /* damit letzter Link nicht klebt */
    touch-action: pan-y;              /* explizit vertikal scrollen */
  }

  /* Body darf gesperrt sein – Panel übernimmt Scroll */
  body.menu-open { overflow: hidden; }
}
/* === MOBILE: Menü darf den Header NICHT überdecken === */
:root { --menu-top: 64px; } /* Default, wird gleich per JS exakt gesetzt */

@media (max-width: 768px) {
  /* Header über dem Panel halten */
  .site-header, #mainHeader { z-index: 1101; position: fixed; top: 0; left: 0; right: 0; }

  /* Panel beginnt UNTER dem Header und ist scrollbar */
  #menuPanel.menu-panel {
    position: fixed;
    top: var(--menu-top);
    left: 0;
    right: 0;
    bottom: 0;                    /* statt inset:0 */
    background: #fff;
    z-index: 1100;                /* kleiner als Header */
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    padding: 1rem 1rem 2rem;      /* oben nicht zu groß, Header ist ja separat */
  }

  #menuPanel.menu-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Scrollbereich im Panel */
  #menuPanel .menu-grid {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* Body darf gelockt werden – Panel übernimmt Scroll */
  body.menu-open { overflow: hidden; }

  /* Toggle nicht ganz am Rand kleben */
  .menu-toggle { margin-right: .5rem; }
}

/* === MOBILE MENU PERFECT ALIGN === */
@media (max-width: 768px) {
  #menuPanel.menu-panel {
    top: var(--menu-top);
    padding-top: 0;              /* kein zusätzlicher Abstand mehr */
    margin-top: 0;               /* Sicherheit */
    border-top: none;            /* falls irgendwo Schatten o. Linie war */
  }

  /* optional: leichter Schatten am oberen Rand (sieht edel aus) */
  #menuPanel.menu-panel.open {
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.08);
  }
}