/* mobile.css
   Nach test.css und nach den Inline-Styles der booking.php einbinden.
   Greift nur auf kleinen Bildschirmen und verändert die Desktop-Ansicht nicht.
*/

@media (max-width: 767.98px) {
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
  
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
  
    body {
      margin: 0;
      font-size: 16px;
      line-height: 1.4;
      word-break: normal;
      overflow-wrap: anywhere;
    }
  
    img,
    svg,
    video,
    canvas,
    iframe {
      max-width: 100%;
      height: auto;
    }
  
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    label,
    strong,
    span,
    div {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: normal;
    }
  
    h1 {
      font-size: 1.55rem;
      line-height: 1.2;
    }
  
    h2 {
      font-size: 1.35rem;
      line-height: 1.25;
    }
  
    h3 {
      font-size: 1.2rem;
      line-height: 1.3;
      margin-top: 18px;
    }
  
    .container,
    #container {
      width: calc(100% - 20px) !important;
      max-width: calc(100% - 20px) !important;
      margin: 10px auto !important;
      padding: 14px !important;
      padding-bottom: 80px !important;
      border-radius: 8px;
    }
  
    .step {
      margin-bottom: 32px !important;
    }
  
    .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 100%;
    }
  
    .form-group {
      width: 100%;
      max-width: 100%;
    }
  
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="time"],
    input[type="password"],
    textarea,
    select,
    .form-control,
    #niederlassung,
    #leistung {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      float: none !important;
      display: block !important;
      font-size: 16px !important; /* verhindert iOS-Zoom beim Fokus */
    }
  
    textarea {
      min-height: 110px;
    }
  
    .btn,
    .btn-primary,
    .btn-secondary,
    button,
    input[type="submit"],
    input[type="button"] {
      max-width: 100%;
      white-space: normal !important;
      overflow-wrap: anywhere;
      line-height: 1.25;
    }
  
    .step > .btn,
    .step > button,
    #step4 .btn,
    #step4 button,
    #terminBuchenBtn {
      width: 100%;
      display: block;
      margin: 8px 0 !important;
    }
  
    /* Arzt-/Ansprechpartner-Kacheln */
    .arzt-auswahl-grid {
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      gap: 12px !important;
      width: 100%;
    }
  
    .arzt-tile,
    .arzt-box {
      width: 100% !important;
      max-width: 100% !important;
    }
  
    .arzt-box {
      padding: 12px !important;
    }
  
    .arzt-box img {
      width: 130px !important;
      height: 130px !important;
    }
  
    .arzt-name,
    .arzt-beschreibung {
      white-space: normal !important;
      overflow-wrap: anywhere;
      line-height: 1.25 !important;
    }
  
    /* Leistungs-Kacheln */
    .leistung-grid {
      display: flex !important;
      flex-direction: column;
      flex-wrap: nowrap !important;
      align-items: stretch;
      justify-content: flex-start !important;
      gap: 12px !important;
      width: 100%;
      margin-top: 16px !important;
      margin-bottom: 24px !important;
    }
  
    .leistungskachel {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      padding: 18px 12px 14px 12px !important;
      transform: none !important;
      overflow: visible;
    }
  
    .leistungskachel:hover,
    .leistungskachel.selected {
      transform: none !important;
    }
  
    .leistung-icon,
    .leistungskachel img.leistung-icon,
    .leistungskachel img {
      max-width: 72px !important;
      width: auto !important;
      height: auto !important;
    }
  
    .leistungskachel i.fa,
    .leistungskachel i.fa-solid,
    .leistungskachel i.fas {
      font-size:16px !important;
    }
  
    .leistung-details,
    .leistung-details h4,
    .leistung-details p {
      width: 100%;
      max-width: 100%;
      white-space: normal !important;
      overflow-wrap: anywhere;
    }
  
    .leistung-details h4 {
      font-size: 1rem !important;
      line-height: 1.25 !important;
      margin: 8px 0 6px 0 !important;
    }
  
    .leistung-details p {
      font-size: 0.95rem !important;
      line-height: 1.35 !important;
    }
  
    .leistungsgruppe-header {
      width: 100% !important;
      flex-basis: 100% !important;
      margin-top: 20px !important;
      margin-bottom: 6px !important;
    }
  
    .leistungsgruppe-title-row {
      align-items: flex-start !important;
      gap: 8px !important;
    }
  
    .leistungsgruppe-title {
      display: block !important;
      width: auto !important;
      max-width: calc(100% - 34px) !important;
      font-size: 1.05rem !important;
      line-height: 1.25 !important;
      white-space: normal !important;
      overflow-wrap: anywhere;
    }
  
    .leistungsgruppe-beschreibung {
      font-size: 0.95rem !important;
      line-height: 1.4 !important;
    }
  
    /* Tooltips: am Handy nicht außerhalb des Viewports laufen lassen */
    .info-icon-wrapper,
    .favorit-icon-wrapper,
    .info-icon-wrapper-anmerkung,
    .leistungsgruppe-info-icon-wrapper {
      z-index: 20;
    }
  
    .leistungsbeschreibung-tooltip,
    .leistungsbeschreibung-tooltip-anmerkung,
    .favoritentext-tooltip,
    .leistungsgruppe-info-tooltip,
    .durchfuehrung-tooltip {
      position: absolute !important;
      left: auto !important;
      right: 0 !important;
      width: min(280px, calc(100vw - 36px)) !important;
      max-width: calc(100vw - 36px) !important;
      white-space: normal !important;
      overflow-wrap: anywhere;
      word-break: normal;
      z-index: 99999 !important;
    }
  
    .favoritentext-tooltip {
      left: 0 !important;
      right: auto !important;
    }
  
    .leistungsgruppe-info-tooltip {
      left: 0 !important;
      right: auto !important;
    }
  
    .durchfuehrung-stack {
      width: 110px !important;
      max-width: 100%;
    }
  
    .durchfuehrung-tooltip {
      top: 86px !important;
      left: 50% !important;
      right: auto !important;
      transform: translateX(-50%) !important;
      min-width: 0 !important;
    }
  
    /* Termin-Auswahl: Input und Button untereinander statt 80/20 Float */
    #ID_Appointment,
    .appt-field {
      width: 100% !important;
      float: none !important;
      margin-bottom: 10px !important;
    }
  
    #buttonContainer {
      width: 100% !important;
      float: none !important;
      text-align: left !important;
      margin-bottom: 12px !important;
    }
  
    #nextTermButton {
      width: 100%;
    }
  
    /* FullCalendar mobil lesbar machen */
    #calendar,
    .calendar,
    [id^="calendar_child_"] {
      width: 100% !important;
      max-width: 100% !important;
      overflow-x: auto !important;
      padding: 6px !important;
      margin-top: 18px !important;
      -webkit-overflow-scrolling: touch;
    }
  
    .fc-toolbar {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
    }
  
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right {
      float: none !important;
      display: block !important;
      width: 100% !important;
      text-align: center !important;
    }
  
    .fc-toolbar h2 {
      font-size: 1.05rem !important;
      line-height: 1.25 !important;
      white-space: normal !important;
    }
  
    .fc button,
    .fc-state-default {
      font-size: 0.85rem !important;
      padding: 0.35rem 0.5rem !important;
      height: auto !important;
      white-space: normal !important;
    }
  
    .fc-view-container {
      min-width: 640px; /* Kalender bleibt bedienbar und scrollt horizontal */
    }
  
    .fc-time-grid-event,
    .fc-event {
      min-height: 28px;
    }
  
    .fc-time-grid-event .fc-time,
    .fc-event .fc-time {
      font-size: 12px !important;
      white-space: normal !important;
    }
  
    /* PLZ-Hinweis */
    .plz-nl-hinweis {
      padding: 34px 12px 12px 12px !important;
      font-size: 0.95rem !important;
    }
  
    .plz-nl-buttons {
      flex-direction: column;
      align-items: stretch;
    }
  
    .plz-nl-btn {
      width: 100%;
      text-align: center;
      white-space: normal;
    }
  
    /* Checkboxen/Labels mit Inline-Styles abfangen */
    input[type="checkbox"],
    input[type="radio"] {
      max-width: 24px;
    }
  
    input[type="checkbox"] + label,
    input[type="radio"] + label,
    label.text-secondary,
    label.w-75 {
      width: auto !important;
      max-width: calc(100% - 34px) !important;
      white-space: normal !important;
      overflow-wrap: anywhere;
    }
  
    .importanthinweis,
    .alert,
    .card,
    .card-body {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  
    .tmm {
      left: 10px !important;
      right: 10px !important;
      top: 10px !important;
      width: auto !important;
      font-size: 13px !important;
    }
  }
  
  @media (max-width: 420px) {
    .container,
    #container {
      width: calc(100% - 12px) !important;
      max-width: calc(100% - 12px) !important;
      padding: 10px !important;
      padding-bottom: 70px !important;
    }
  
    .arzt-box img {
      width: 110px !important;
      height: 110px !important;
    }
  
    .leistungskachel {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }
  
    .fc-view-container {
      min-width: 580px;
    }
  }