@charset "UTF-8";
/* ============================================================
   actionplace – Handy-Darstellung (gilt für die GESAMTE Seite)
   Ziel: alles passt auf den Bildschirm, nichts muss gezoomt oder
   seitlich geschoben werden.
   Einbindung in inc.metahead.php als LETZTE Stylesheet-Datei,
   damit diese Regeln alle anderen überschreiben.
   ============================================================ */

/* ---------- Grundregeln für alle Bildschirmgrößen ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

img, video, iframe, embed, object { max-width: 100%; height: auto; }
audio { max-width: 100%; }

/* lange Wörter, E-Mail-Adressen, Links umbrechen statt die Seite zu verbreitern */
p, span, a, label, li, td, th, h1, h2, h3, h4, strong, small {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* ---------- Handy (bis 700 px Breite) ---------- */

@media (max-width: 700px) {

  body { min-width: 0 !important; }

  /* Haupt-Container: volle Breite, angenehmer Rand */
  #search_window_001,
  #user_profl_changes,
  .user_profl_changes,
  #id_main_content,
  .top_header {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #user_profl_changes,
  .user_profl_changes {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Einrückung des Untermenüs ("padding-left:60px" im Code) aufheben */
  #custom_sub_menue { padding-left: 0 !important; }

  /* WICHTIG gegen automatisches Hineinzoomen (iPhone):
     Eingabefelder brauchen mindestens 16 px Schrift */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"],
  select, textarea,
  .input_text_search, .input_text_login {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Datum/Uhrzeit untereinander statt fester Prozentbreiten (sofern nicht durch den Kalender-Ablauf ersetzt) */
  input[type="date"]:not([style*="opacity"]), input[type="time"]:not([style*="opacity"]) { display: block; margin: 0 0 10px 0 !important; }

  /* Original-Felder, die durch schönere Bedienelemente ersetzt wurden (Kategorie,
     Kalender, Action-Button), bleiben unsichtbar und ohne Breite */
  select[style*="opacity: 0"][style*="position: absolute"],
  input[style*="opacity: 0"][style*="position: absolute"] {
    width: 0 !important; min-width: 0 !important; max-width: 0 !important;
    padding: 0 !important; border: 0 !important; margin: 0 !important;
  }

  /* gut tippbare Schaltflächen (min. 44 px) */
  button, .button, .button_login, input[type="submit"], input[type="button"]:not(.button_delete),
  a.content_link_menu {
    min-height: 44px;
  }
  .button, .button_login, input[type="submit"] {
    width: 100% !important;
    white-space: normal;
  }

  /* Tabellen (z. B. Rechnungen) seitlich scrollbar statt Seite zu sprengen */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Überschriften nicht zu groß */
  h1 { font-size: 26px !important; line-height: 1.2; }
  h2 { font-size: 22px !important; line-height: 1.25; }
  h3 { font-size: 18px !important; line-height: 1.3; }

  /* Kopf- und Fußbereich */
  .logo_header { max-width: 70vw; height: auto; }
  footer, .footer, [class*="footer"] { padding-left: 16px !important; padding-right: 16px !important; }
  footer a, .footer a, [class*="footer"] a { display: inline-block; margin: 6px 10px; }

  /* Menü-Dropdown im Header über die volle Breite */
  .ap_header_dropdown { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; }

  /* Hinweise */
  .ap_notice, .error_message, .login_message_error, .ok_message { max-width: 100%; }

  /* Formular "actionplace anlegen" */
  .ap_offer_switch { flex-wrap: nowrap; }
  .ap_offer_option { flex: 1 1 0; min-width: 0; }
  .ap_offer_option span { width: 100%; padding-left: 12px; padding-right: 12px; }
  .ap_upload_tile { gap: 14px; padding: 18px 16px !important; min-height: 96px; }
  .ap_upload_icon { flex-basis: 44px; width: 44px; height: 38px; }
  .ap_upload_text strong { font-size: 18px; }
  .ap_more_btn { padding: 12px 12px; gap: 10px; }
  .ap_more_text strong { font-size: 14px; }
  #channel_files.div_flex_channel_files_galerie { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
  .ap_cat_chip { padding-left: 42px; }

  /* Zeitraum-Auswahl */
  .ap_daterange_wrap, .ap_daterange_btn, .ap_daterange_panel { width: 100% !important; max-width: 100% !important; }

  /* Mediathek-/Galerie-Kacheln an anderen Stellen */
  .galerie_bild_container { max-width: 100%; }
}

/* sehr kleine Handys (z. B. iPhone SE, 320–375 px) */
@media (max-width: 380px) {
  #user_profl_changes, .user_profl_changes { padding-left: 12px !important; padding-right: 12px !important; }
  .ap_upload_more { grid-template-columns: 1fr !important; }
  .ap_offer_option span { font-size: 15px; gap: 8px; }
  #channel_files.div_flex_channel_files_galerie { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ---------- Hintergrund ruhig: keine Skizzen-Grafik, kein Strich ---------- */
/* Die alte CSS legt auf Handys ein Bild (blue_bk_768_bearb.jpg) hinter die
   ganze Seite und zieht unter dem Channel-Bereich eine graue Linie.
   Gäste-Startseite behält ihren Farbverlauf (dortige Regel ist spezifischer). */
body {
  background-image: none !important;
  background-color: #fff !important;
}
.user_profl_changes,
#user_profl_changes {
  border-bottom: 0 !important;
}