/*
Projekt       : AccoReal
Komponente    : Wordpress
Datei         : style-mobile.css
Beschreibung  : Spezielle Mobile Anpassungen des Themes "twentytwentyfour" für die Website "accoreal.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentytwentyfour
Version:        1.0
Historie
   14.08.26  Gernot Daum  Angelegt als Spinoff der style.cee
*/


/* Inhaltsbreite */
@media only screen and (max-width: 1440px) {
	.objects .card {width: calc(50% - var(--acr-spacing-card))}
  .foot-line {flex-direction: column}
}

/* Kleiner Bildschirm */
@media only screen and (max-width: 1120px) {
	.acr-profiles > .profile-summary {width: 100%}
	.quick-search .card {width: calc(50% - var(--global-seam))}
  #footer nav ul {flex-direction: column}
}


/* Getwid: Laptop */
@media only screen and (max-width: 991px) {
  #content .testimonials .wp-block-getwid-content-slider-slide__wrapper {margin-right: 0}
}

/* Tablett Landscape */
@media only screen and (max-width: 960px) {
  body {
    --default-outer-margin-mult: 2;
  }
	#content .wide1 {display: none}
	#content .small1 {display: initial}
	#content div.small1 {display: block}
	#content .gfield_radio {grid-template-columns: repeat(4,1fr)}
  .entry-content .gfield--type-date {grid-column: span 6}
  #masthead .search {display: flex; flex-direction: column}
  #masthead .search-form {width: 100%}
  #masthead .search-button {width: 100%}
  #masthead .search-button .wp-block-button {max-width: 360px}
	#content .objects {padding-left: 0; padding-right: 0}
	.objects .card {
		width: 100%;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto
	}
}

/* Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
	.wide2 {display: none}
	.small2 {display: initial}
  #masthead .mnu-tabs li {padding: var(--acr-spacing-seam) var(--global--spacing-unit)}
  .profile-details .gallery div {width: 100%}
  .profile-details .wp-block-column:nth-child(2) {margin-top: var(--global--spacing-vertical)}
	#content .gfield_radio {grid-template-columns: repeat(3,1fr)}
	#gform_fields_6 {flex-direction: column}
	#gform_6 .gform_fields > div {width: 100%}
	
	/*   Objektanzeige */
	.hero-gallery {flex-direction: column}
	.hero-gallery .sub-heros {flex-direction: row}
	.hero-gallery .sub-heros img {
		width: calc(50% - 0px);
		aspect-ratio: 1/1
	}
	
  .acr-highlights {flex-direction: column}
  .acr-highlights > * {padding-right:0}
  .acr-highlights .card {width: 100%; padding: var(--acr-spacing-card) 0 0 0} 
  .acr-highlights .card p {margin: 0} 
  .lbx-row.slider .lbx-column {width: calc(50% - var(--global-seam))}
  .lbx-row.gallery.lbx-thumbnails {flex-wrap: wrap}
  .lbx-thumbnails .lbx-column {max-width: 50px; aspect-ratio: 1/1}
  .lbx-box img {
	max-height: calc(2 * var(--js-height) / 3)
}
	.acr-info-table {flex-direction: column}
	#content .acr-info-table > * {width: 100%; padding-right: 0}
	.acr-info-table .caption {padding-bottom: var(--acr-spacing-seam)}
  #content .entry-content .inquiry {
  	box-sizing: border-box;
	  top: initial;
    bottom: 0;
    right: initial;
    left: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%
  }
  .inquiry .infos {display: flex; justify-content: center}
  .inquiry .pin {margin-left: 0}
  .inquiry .price {margin-left: var(--global--spacing-medium)}
}

/* Gravity Forms Theme Umbruch */
@media only screen and (max-width: 639px) {
	#content .gfield_checkbox {grid-template-columns: repeat(2,1fr);}
	#content .gfield {grid-column: 1/-1}
  #content .horizontal-spacer {display: none}
}

/*  Smartphone groß */
@media only screen and (max-width: 600px) {
	.quick-search .card {width: 100%}
	#content .gfield_radio {grid-template-columns: repeat(2,1fr)}
	#gform_fields_5 {flex-direction: column}
  #gform_5 .gfield {width: 100%}
}  
  
  
/* Bugfix für Navigations-Overlay */  
@media only screen and (max-width: 599px) {
	#modal-1, .wp-block-navigation__overlay-container {max-width: 100vw}
}

/* Smartphone */
@media only screen and (max-width: 480px) {
	.gf_page_steps {flex-direction: column}
  .profile-details {font-size: 90%}
  .profile-details table {font-size: 75%}
}

/* Smartphone klein */
@media only screen and (max-width: 400px) {
}

/* Smartphone sehr klein */
@media only screen and (max-width: 320px) {
}