/* Minimal-invasive Mobile-Overrides ohne Umbau des Desktop-Layouts */

/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1199px) {
  /* Ensure page is properly sized */
  #page {
    width: 90% !important;
    max-width: 956px !important;
    margin: 0 auto !important;
  }
  
  /* Fix out container - this is the parent for menu and content */
  #out {
    width: 95% !important;
    left: 17px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    min-height: 300px !important;
    display: flex !important;
  }
  
  /* Menu positioning - exactly like desktop */
  #menu {
    width: 180px !important;
    position: relative !important; /* Changed to relative for better layout */
    left: 0 !important;
    top: 0 !important;
    visibility: visible !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
  }
  
  /* Scale menu links */
  #menu a.menu {
    width: 90% !important;
    display: block !important;
    margin-bottom: 5px !important;
  }
  
  /* Content positioning */
  #content {
    position: relative !important;
    left: 40px !important; /* Space after menu */
    width: calc(100% - 220px) !important;
    max-width: 490px !important;
    font-size: 0.95rem !important;
    flex-grow: 1 !important;
  }
  
  /* Footer logo positioning */
  #f-logo {
    left: 220px !important;
    width: 60% !important;
    max-width: 515px;
  }

  /* Fix line elements */
  .line {
    width: 100% !important;
    left: 0 !important;
  }

  /* Fix header and footer width */
  #header,
  #footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: 20px !important;
  }

  /* Fix header image width */
  #top-image,
  #bottom-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    object-fit: contain;
  }
}

/* Baseline: nichts überschreiben, bis Viewport klein ist */
@media (max-width: 768px) {
  /* Box sizing for predictable widths */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html,
  body {
    font-size: 11px;
    line-height: 1.5;
    height: auto !important; /* überschreibt body: height:2500px */
    letter-spacing: normal;
    padding: 0;
    margin: 0;
    overflow-x: hidden; /* verhindert horizontales Scrollen */
    background-color: #fff !important; /* mobile: weißer Hintergrund */
  }
  /* Hintergrund-Scroll sperren, wenn Overlay-Menü geöffnet ist */
  body.menu-open {
    overflow: hidden !important;
    height: 100vh; /* verhindert zusätzliches Scrollen */
  }

  b {
    font-size: 1.1rem;
  }

  /* Bilder responsiv */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Schatten mobil ausblenden */
  #shadow {
    display: none !important;
  }

  /* Container vom absoluten/fixen Layout lösen */
  #page,
  #out,
  #footer,
  #f-logo,
  #content {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Hauptcontainer etwas Innenabstand, ohne Overflow dank border-box */
  #page {
    padding: 12px !important;
    padding-top: 5px !important;
    position: relative !important;
    margin-top: 0 !important;
  }

  /* Linien auf volle Breite ziehen */
  .line {
    left: 0 !important;
    width: 100% !important;
  }

  /* Menü vertikal darstellen, um Verzerrungen zu vermeiden */
  #menu {
    visibility: visible !important; /* falls JS später lädt */
    position: fixed !important; /* als Overlay-Layer am Viewport */
    left: 0;
    right: 0;
    top: 0; /* genaue Position wird per JS gesetzt */
    width: 100vw !important;
    height: auto !important; /* überschreibt Desktop-Fixhöhe */
    display: none; /* durch Hamburger gesteuert */
    margin: 0;
    padding: 10px 0 12px 0;
    text-align: center;
    background: #fff;
    z-index: 950; /* Hamburger liegt mit 1000 darüber */
    border-bottom: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow-y: auto; /* falls Inhalt höher ist als Viewport */
  }

  #menu a.menu {
    display: block;
    width: auto; /* natürliche Breite */
    max-width: min(260px, 90%); /* begrenzt auf Viewport, kein Upscaling */
    margin: 6px auto; /* zentriert */
    text-align: center;
  }

  /* Content-Innenabstand erhöhen */
  #content {
    padding: 16px !important;
    overflow-wrap: anywhere; /* verhindert Überlaufen langer Wörter */
    word-wrap: break-word; /* Fallback */
    word-break: break-word; /* Fallback alt */
    font-size: 1rem;
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  /* Footer-Logo ausrichten */
  #f-logo {
    padding: 12px 16px !important;
  }

  /* Header-Bereich entkoppeln */
  #header {
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    padding: 8px 0;
  }

  /* Header-Bild auf volle Breite */
  #top-image {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Footer-Bild auf volle Breite als Schutz */
  #bottom-image {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Linien dürfen Viewport nicht überschreiten */
  .line {
    max-width: 100vw;
  }

  /* Hamburger-Button mobil anzeigen und rechts oben positionieren */
  #hamburger {
    display: inline-flex !important;
    position: absolute;
    top: 35px;
    right: 25px;
    z-index: 1000;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  #hamburger .burger-icon {
    pointer-events: none;
  }
}