/*
Projekt       : AccoReal
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle 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
   02.12.24  Gernot Daum  Beginn der Implementierung
*/


/* Eigene Konstanten body */
body {
	/*   Farben */
	--wp--custom--color--background: #c0c7ce;
	--wp--custom--color--transparency01: rgba(45, 70, 93, 0.4);
	
	/*   Schriften */
	--wp--preset--font-family--heading: 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--preset--font-family--body: 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;
  --wp--preset--font-size--x-small: clamp(9pt, 0.7vw, 24pt);
	--wp--preset--font-size--small: clamp(10pt, 0.9vw, 32pt);
  --wp--preset--font-size--medium: clamp(13pt, 1.3vw, 36pt);
  --wp--preset--font-size--large: clamp(16pt, 2vw, 48pt);
  --wp--preset--font-size--x-large: clamp(24pt, 3.2vw, 90pt);
  --wp--preset--font-size--big: clamp(30pt, 4vw, 115pt);
  --wp--preset--font-size--huge: clamp(36pt, 4.8vw, 120pt);
  
  /*   Breiten und Abstände */
  --global--spacing-unit: 15px;
  --global--spacing-horizontal: var(--global--spacing-unit);
  --global--spacing-vertical: calc(2 * var(--global--spacing-unit));
  --global--spacing-section: calc(3 * var(--global--spacing-vertical));
  --default-outer-margin-mult: 4;
	--default-outer-margin: calc(var(--default-outer-margin-mult) * var(--global--spacing-horizontal));
	--default-outer-spacing: calc(2 * var(--default-outer-margin));
  --global-seam: 6px;
  
  --street-width: 1440px;
  --responsive--street-width: min(calc(100vw - var(--default-outer-spacing)), var(--street-width));
  --responsive--content-width: var(--responsive--street-width);
  --constriction-width: 1120px;
  --responsive--constriction-width: min(calc(100vw - var(--default-outer-spacing)), var(--constriction-width));
  --single-track-width: 880px;
  --responsive--single-track-width: min(calc(100vw - var(--default-outer-spacing)), var(--single-track-width));
  --margin-street: max(var(--default-outer-margin), calc((100vw - var(--street-width)) / 2));
  --margin-constriction: max(var(--default-outer-margin), calc((100vw - var(--constriction-width)) / 2));
  
  --wp--custom--spacing--small: max(12pt, 1vw);
  --wp--custom--slick-dot-size: 24px;
  --wp--custom--navigation-icon-size: 36px;
  }


/* Allgemein */

/* Theme Reset */
.has-global-padding {padding-right: 0; padding-left: 0}
.has-global-padding > .alignfull {margin-right: 0; margin-left: 0}
main {margin: 0}
#content .entry-content > *:not(.alignfull) {
	max-width: var(--responsive--content-width);
	margin-left: auto;
	margin-right: auto
}
:where(.wp-site-blocks :focus) {outline-width: 0}
.wp-block-post-featured-image img, 
.wp-block-post-featured-image .block-editor-media-placeholder, 
.wp-block-post-featured-image .wp-block-post-featured-image__overlay {border-radius: 0}

/*   Diverse Standards */
body {
  font-size: 110%
}
#content h1 {
 font-size: 180%;
 color: #333;
 margin-bottom: var(--global--spacing-unit)
}
h2 {font-size: 140%}
h3 {font-size: 120%}
#content .entry-content p:not(.alignfull), 
#content .entry-content ul:not(.alignfull):not(.sort-grid), #content .entry-content ol:not(.alignfull) {
	max-width: var(--responsive--single-track-width);
	margin-left: 0 !important
}
a {
	color: var(--wp--preset--color--contrast-2);
	text-decoration: none
}
a:hover {text-decoration: underline}
header, .entry-content, footer  {
  box-sizing: border-box;
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
  padding: var(--global--spacing-vertical); 
  background: var(--wp--preset--color--contrast-3)
}
.listcaption {margin-bottom: var(--global-seam)}
.listcaption + * {margin-top: 4px; margin-block-start: var(--global-seam)}
.caption-decoration {max-width: 150px}
 
/* Kopf */
header {padding: 0}

/* Fuß */
footer {
  margin-top: 0;
  background: var(--wp--preset--color--accent-5)
}
#footer  {
  max-width: var(--responsive--content-width);
  margin-left: auto;
  margin-right: auto
}
#footer h3 {
  padding: var(--global-seam);
  color: var(--wp--preset--color--accent-3);
  background: var(--wp--preset--color--accent-2);
}
#footer nav {margin-top: 0}
#footer ul, #footer li {width: 100%}
#footer ul {
	row-gap: 0;
  color: var(--wp--preset--color--accent-3)
}
#footer li {
	box-sizing: border-box;
	padding: var(--global-seam);
	border-bottom: 1px solid var(--wp--preset--color--accent-2)
}
#footer .current-menu-item, #footer li:hover {background: var(--wp--preset--color--contrast-3)}
#footer a:hover {text-decoration: none}

/* Navigation */  
.wp-block-navigation {column-gap:  var(--global--spacing-horizontal)}
.dyn-header-mnu, .dyn-header-mnu nav {margin-top: 0}
.dyn-header-mnu nav.is-not-visible {display: none}
#masthead .nav-container {background: var(--wp--preset--color--contrast-3)}
#masthead .nav-container > * {max-width: var(--street-width)}
#masthead .mnu-tabs {gap: var(--global-seam)}
#masthead .mnu-tabs li {
	padding: var(--global-seam) calc(4 * var(--global--spacing-unit));
	color: var(--wp--preset--color--accent-3);
	background: var(--wp--preset--color--accent-2)
}
#masthead .mnu-tabs .current-menu-item, #masthead .mnu-tabs .current-menu-ancestor {
	color: var(--wp--preset--color--base-2);
  background-color: var(--wp--preset--color--accent)
}
.wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container
{min-width: 280px} 

/* Inhalt */

/*   Abschnitte */
#content .street, #content .constriction, #content .single-track {
	margin-left: auto !important; 
	margin-right: auto !important;
}
#content .street.left, #content .constriction.left, #content .single-track.left 
{margin-left: 0 !important}
#content .street.right, #content .constriction.right, #content .single-track.right 
{margin-right: 0 !important}
#content .street {max-width: var(--responsive--street-width)}
#content .constriction {max-width: var(--responsive--constriction-width)}
#content .single-track {max-width: var(--responsive--single-track-width)}
#content article {
	margin-top: calc(2 *var(--global--spacing-vertical));
	margin-bottom: calc(2 *var(--global--spacing-vertical))
}
#content article:first-child {margin-top: 0}
#content article:last-child {margin-bottom: 0}

/*   Profilübersicht */
.acr-profiles {
	--js-min-tile-height: 240px;
	display: flow-root
} 
.acr-profiles > .profile-summary {
	float: left; 
	width: 50%;
	min-height: var(--js-min-tile-height);
	margin-bottom: 0;
	padding: 15px
} 
.acr-profiles > .profile-summary:hover, .acr-profiles .profile-summary:hover a.wp-block-column {
	color: var(--wp--preset--color--base-2);
  background: var(--wp--preset--color--accent)
}
.profile-summary .wp-block-column:nth-child(1) {flex-grow: 4}
.profile-summary .wp-block-column:nth-child(2) {flex-grow: 3}
.profile-summary h2 {margin-top: 0}
.acr-profiles a.wp-block-column {
	display: block;
	color: var(--wp--preset--color--contrast)
}
.acr-profiles a.wp-block-column:hover {
	text-decoration: none
}
.acr-profiles > .profile-summary:hover h2 {color: var(--wp--preset--color--base-2)}
.profile-summary img {
	--js-width: 280px;
	--js-height: 210px;
	object-fit: cover;
  width: 100%;
  max-width: var(--js-width);
  height: var(--js-height)
}
.select-district {
	position: relative; 
	background: white;
	padding-top: var(--global--spacing-unit)
}
.select-district legend {
	position: absolute;
	top: 0;
	z-index: 1
}
.select-district label {padding-right: var(--global-seam)}

/*   Einzelprofil */
.profile-details table {font-size: 80%}
.profile-details .address-header {
	margin-bottom:  var(--global--spacing-vertical);
	padding-bottom: var(--global--spacing-unit);
	border-bottom: 1px solid  var(--wp--preset--color--accent-2); 
}
.profile-details .address-header > * {padding-left: var(--global-seam)}
.profile-details h3, .profile-details p {margin-top: 0}
.profile-details h3 {
	margin-top: var(--global--spacing-unit);
	margin-bottom: var(--global--spacing-unit);
	font-size: 133.33%
}
.profile-details p.minor {margin-bottom: var(--global-seam)}
.profile-details .table-caption {margin: 0}
.profile-details {display: flow-root}
.profile-details figcaption {font-size: 80%; text-align:center}
.profile-details .wp-block-columns {column-gap: 15px}
.profile-details .wp-block-column {width: 50%}
.profile-details .wp-block-column > .wp-block-group {
	padding: var(--global--spacing-unit);
	margin-top: var(--global--spacing-unit);
	border: 1px solid var(--wp--preset--color--accent-2);
	background: white
}
.profile-details .wp-block-column > .wp-block-group:first-child {
	margin-top: 0
}
.profile-details table {border-collapse: collapse}
.profile-details table, .profile-details thead, .profile-details tr, .profile-details th {width: 100%}
.profile-details th {
	padding: var(--global-seam);
	text-align: left;
	color: white;
	background: var(--wp--preset--color--accent);
}
.profile-details td {padding-right: var(--global--spacing-unit)}
.profile-details td:first-child {padding-left: var(--global-seam)}
.profile-details td:last-child {padding-right: 0}
.profile-details .CTA td {width: 10%; text-align: right}
.profile-details .CTA td:first-child {width: 70%; text-align: left}
.profile-details .CTA td:nth-child(2) {width: 20%; text-align: left}
.profile-details tr:nth-child(even) {background: var(--wp--preset--color--contrast-3)} 
.profile-details .watchobject {cursor: pointer}
.profile-details .search {
	background: white;
	margin-top: var(--global--spacing-vertical);
	padding: var(--global--spacing-unit)
}
.profile-details h3 {margin-top: 0}
.profile-details .search a {
	margin: var(--global--spacing-unit);
	padding: var(--global-seam);
	color: white;
	background: var(--wp--preset--color--accent)
}

/*   Gravity Form Formulare */
.gform_title {display: none}
#content .gform_next_button, #content .gform_button[type='submit'], #content .gf_step_completed .gf_step_number::after 
{background: var(--wp--preset--color--accent)}
#content .gf_step_completed .gf_step_number::after {border: none}
#content .gform_page_footer {
	margin-top: calc(2 * var(--global--spacing-vertical));
	margin-bottom: var(--global--spacing-vertical)
}
.entry-content .gfield--type-address .gfield_label_before_complex {font-weight: 700}
#content .ginput_container_date {
	padding: 0 6px;
	inline-size: 33.33%
}
#content .ginput_container_date select {padding: 0 0 0 var(--global-seam)}
#content .gfield.wide select,
#content .gfield.quarter input.small {
  inline-size: calc(90% - var(--gf-form-gap-x) * 3 / 4);
}

#content .gfield_checkbox, #content .gfield_radio {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  inline-size: 100%;
  column-gap: 0;
  row-gap: var(--global-seam);
}

/*     Eigene Platzgestaltungen */
.entry-content .acr-half {grid-column: span 6}
.entry-content .acr-third {grid-column: span 4}
.entry-content .acr-two-thirds {grid-column: span 8}
.entry-content .acr-quarter {grid-column: span 3}
.entry-content .acr-grid-new-line.acr-third {grid-column: 1 / span 4}
.entry-content .acr-grid-new-line.acr-half {grid-column: 1 / span 6}
.entry-content .acr-no-vertical-spacing + * {margin-bottom: -20px}
.entry-content .acr-check-right {--js-label-width: 120px;	position: relative}
.entry-content .acr-check-right.wide {--js-label-width: 240px}
.entry-content .acr-check-right > * {position: absolute}  
.entry-content .acr-check-right .ginput_container_checkbox {left: var(--js-label-width)}  


/*   Translate Press */
.acr-language-switcher {cursor: pointer}
.acr-language-switcher .lang {
	margin: calc(2* var(--global-seam) / 3);
	padding: calc(var(--global-seam) / 3);
	border: 1px solid white
}
.acr-language-switcher .selected, .acr-language-switcher .lang:hover {
	border: 1px solid var(--wp--preset--color--accent)
}

/*   Google Maps Karten */
div#googleMap {
	width: 100%; height: 30em;
	margin-top: var(--global--spacing-vertical)
}

/*   Bildbearbeitung */
#content .sort-grid {max-width: none}

/* Lightbox */ 
.lbx {/* Hintergrund der Lightbox */
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
}
.lbx-content { /* Lightbox Inhalt */
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
}

/* Bildbereiche der Lightbox */
.lbx-row {display: flex; flex-wrap: wrap}
.lbx-row {column-gap: var(--global-seam)}
.lbx-row.gallery div {
	width: calc(50% - var(--global-seam) / 2);
	height: 100%;
	margin-bottom: var(--global--spacing-unit)
}
.lbx-row.count4 div {width: calc(25% - 3/4 * var(--global-seam))}
.lbx-row.gallery.lbx-thumbnails {
	--js-seam: 2px;
	flex-wrap: nowrap; 
	column-gap: var(--js-seam); 
	padding-left: var(--js-seam);
	padding-right: var(--js-seam);
	background: var(--wp--preset--color--accent)
}
.lbx-row.gallery.lbx-thumbnails div {width: auto}
.lbx-column img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	cursor: pointer
}
.lbx-thumbnails .lbx-column {max-height: 120px}
.lbx-close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.lbx-close:hover,
.lbx-close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Lightbox = "große Bilddarstellung" */
.lbx-box {display: none}
.lbx-box img {
	width: 100%;
	margin-left: auto;
	margin-right: auto
}
.lbx-box img {
	--js-height: 520px;
	display: block;
	object-fit: cover;
	max-height: var(--js-height)
}

/* Blättersteuerung */
.lbx-prev, .lbx-next {
  cursor: pointer;
  position: absolute;
  top: 35%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.lbx-next {right: 0; border-radius: 3px 0 0 3px}
.lbx-prev:hover,.lbx-next:hover {background-color: rgba(0, 0, 0, 0.8)}

.numbertext { /* Bildnummerierung */
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
.lbx-caption-container {/* Bildbeschriftung */
  text-align: center;
  background-color: var(--wp--preset--color--accent);
  padding: 2px 16px;
  color: white;
}
img.lbx-thumbnail {opacity: 0.6}
.lbx-thumbnail.active, .lbx-thumbnail:hover {opacity: 1}
img.hover-shadow {transition: 0.3s}
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*   Werkstatt */
.whitestamp, .blackstamp {padding: 30px} 
.whitestamp, .whitestamp h2 {color: white; background: black !important}
.blackstamp, .blackstamp h2 {color: black; background: white !important}


/* Responsive */

/*   Kleiner Bildschirm */
@media only screen and (max-width: 1120px) {
	.acr-profiles > .profile-summary {width: 100%}
}

/*   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}
}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
  #masthead .mnu-tabs li {padding: var(--global-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)}
}

/*   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) {
	#content .gfield_radio {grid-template-columns: repeat(2,1fr)}
}

/*   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) {
}