/* =============================================================================
   Responsive Anpassungen (Smartphone/Tablet) – Desktop-Ansicht bleibt unverändert
   ========================================================================== */

/* Header darf nie breiter als der Bildschirm sein (vorher feste 960px) */
header { width: auto; max-width: 960px; }
img { max-width: 100%; }

/* ---------- Tablet und kleiner (< 960px) ---------- */
@media (max-width: 959px) {
  #main { float: none; width: auto; max-width: none; box-sizing: border-box; padding: 24px 24px 0 24px; }
  .ftext { margin-right: 0; max-width: 100%; }
  .ftext img { height: auto; }
  .ftext iframe, .ftext video, .ftext embed, .ftext object { max-width: 100%; }
  .ftext table { display: block; max-width: 100%; overflow-x: auto; }

  /* Projektbilder: statt absolut positioniert mittig im Fluss, nie breiter als der Bildschirm */
  .project_image_wrapper { height: auto !important; margin-top: 24px; text-align: center; }
  .project_image { position: static !important; left: auto; width: auto !important; height: auto !important;
                   margin: 0 auto !important; background: none !important; display: inline-block; max-width: 100%; }
  .project_image a { position: relative; display: block; }
  .project_image img { display: block; max-width: 100%; height: auto; max-height: 439px; }

  footer { height: auto; box-sizing: border-box; max-width: 100%; }
}

/* ---------- Smartphone (< 768px) ---------- */
@media (max-width: 767px) {
  header { padding-top: 60px; text-align: left; }
  .logo_container { float: none; display: inline-block; padding: 12px 16px 8px 16px; }
  .logo { padding-bottom: 0; }

  /* Navigation: Hauptpunkte links, Info/Kontakt rechts, bricht bei Bedarf sauber um */
  #nav { height: auto; margin: 0 16px 4px 16px; text-align: left; }
  #nav ul { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 2px; }
  #nav ul li { float: none !important; padding: 10px 0; font-size: 15px; margin: 0 !important; }
  #nav ul li a { display: inline-block; }
  #nav .rex-article-15 { order: 1; margin-left: auto !important; }
  #nav .rex-article-4 { order: 2; }
  #nav ul li ul { display: none !important; }

  /* Inhalt: Teaser im 2er-Raster, alles andere volle Breite */
  #main { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 16px 0 16px; }
  #main > * { flex: 0 0 100%; min-width: 0; }
  #main > .clearfix { display: none; }
  #main > .image_teaser { flex: 0 0 calc(50% - 6px); width: auto; height: auto; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
  .image_teaser a { display: block; height: 100%; }
  .image_teaser img { display: block; width: 100%; height: 100%; object-fit: cover; }

  .project_image_wrapper { margin-top: 0; }
  .project_image { display: block; }
  .project_image img { width: 100%; max-height: none; }

  /* Texte etwas größer und luftiger für kleine Bildschirme */
  .ftext { padding-top: 4px; }
  .ftext p, .ftext li { font-size: 15px; line-height: 1.5; }
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }

  /* Kontaktformular untereinander statt nebeneinander */
  .xform { float: none; width: 100%; }
  .kontaktformular_left, .kontaktformular_right { float: none; width: 100%; padding: 0; }
  #form_formular p { font-size: 15px; }
  .formtext { width: 100%; height: auto; margin-bottom: 10px; display: flex; align-items: center; }
  #form_formular label.text { float: none; width: 80px; flex: 0 0 80px; margin-left: 0; padding: 3px 0; }
  #form_formular input.text { float: none; flex: 1; width: auto; height: 36px; box-sizing: border-box; font-size: 16px; }
  #form_formular label.textarea { float: none; display: block; width: auto; padding: 8px 0 6px 0; }
  #form_formular textarea.textarea { width: 100%; box-sizing: border-box; height: 180px; font-size: 16px; }
  .formcaptcha { float: none; width: 100%; height: auto; display: flex; align-items: center; flex-wrap: wrap; margin-top: 10px; }
  #form_formular label.captcha { float: none; width: auto; margin: 0 10px 0 0; padding: 3px 0; font-family: 'Roboto Condensed', verdana, helvetica, sans-serif; }
  #form_formular input.captcha { float: none; width: 80px; height: 36px !important; box-sizing: border-box; font-size: 16px; }
  .formsubmit { margin-top: 12px !important; }
  input.submit { height: 44px !important; padding: 0 24px !important; margin: 0 !important; font-family: 'Roboto Condensed', verdana, helvetica, sans-serif; }

  .slide_toggle { padding: 8px 0; font-size: 16px; }

  footer { display: flex; justify-content: space-between; padding: 24px 16px; }
  .footer_left, .footer_right { float: none; height: auto; }
  .footer_right a { padding: 8px 0; }
}