/* Mobile Portrait (dein bestehender Block) */
@media (max-width: 767px) {
  .mobilehead {display: block; height: 100px; background: #fff;}
  .sticky { z-index: 100000; width: 100%; transform: none; top: 0; }
  .site-header {display: block;}

  .mobilelogo { margin-left: auto; width: 300px; height: auto; }
  .mobilehead .textmedia {gap:0;}

  .team h2 { line-height: 1.9rem; }

  main h1 { font-size: 2rem; line-height: 1.9rem; }
  main h2 { font-size: 1.4rem; line-height: 1.3rem; }
  main h3 { font-size: 1.6em; }

  .frame-custom-10 .image { width: 250px !important; height: 250px !important; }

  .mobilehead { display: flex; align-items: center; justify-content: space-between; }

  #c22 .textmedia-text { padding: 2rem 1rem; }
  main h5 { font-size: 1.4rem; }
  #c22 .textmedia-text h3 { font-size: 1.3rem; }

  #c22 .textmedia-text p:last-of-type { font-size: 1.4rem; line-height: 1.7; }

  footer p { margin-bottom: 0rem; }
  #pageid1 #s27-1 h2 { font-size: 2.4rem; line-height: 2.8rem; }
  footer h3 { text-align: center !important; padding-top: 30px; }

  .frame-custom-10 { padding-top: 0; }
  .frame-custom-10 h3,
  .frame-custom-10 p { text-align: center; }
}


/* ✅ Mobile Landscape Optimierung */
@media (max-width: 767px) and (orientation: landscape) {

  /* weniger Höhe für den Header, weil Landscape oft wenig Höhe hat */
  .mobilehead {
    height: 70px;               /* statt 100px */
  }

  /* Logo etwas kleiner, damit es nicht in die Navigation drückt */
  .mobilelogo {
    width: 220px;               /* statt 300px */
  }

  /* Typo etwas kompakter */
  main h1 {
    font-size: 1.7rem;
    line-height: 1.6rem;
  }

  main h2 {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  main h3 {
    font-size: 1.3em;
  }

  main h5 {
    font-size: 1.2rem;
  }

  /* Textpadding reduzieren, damit mehr Content “above the fold” bleibt */
  #c22 .textmedia-text {
    padding: 1.2rem 1rem;       /* statt 2rem 1rem */
  }

  #c22 .textmedia-text p:last-of-type {
    font-size: 1.2rem;
    line-height: 1.55;
  }

  /* Bild etwas kleiner, damit es nicht zu dominant wird */
  .frame-custom-10 .image {
    width: 200px !important;
    height: 200px !important;
  }

  /* ggf. Footer etwas kompakter */
  footer h3 {
    padding-top: 15px;
  }
}


/* Mobile Header standardmäßig ausblenden, nur in "mobile Situationen" zeigen */
.mobilehead { display: none; }

/* Mobile Header für echte Mobile-Portrait */
@media (max-width: 767px) {
  .mobilehead { display: flex; }
  .desktopheader { display: none !important; }
}

/* ✅ iPhone Landscape (kleine Höhe) -> Mobile Header zeigen, Desktop Header verstecken */
@media (orientation: landscape) and (max-height: 500px) {
  .mobilehead { display: flex; }
  .desktopheader { display: none !important; }
}