/*
Theme Name: Elbnetz
Template: Impreza
Version: 1.0
Author:	Elbnetz GmbH
Theme URI: https://elbnetz.com/
Author URI: https://elbnetz.com/
*/

/*Add your own styles here:*/
:root {
  /* Style */
	/*
  --blur: ;
  --shadow: ;
  --border: ;
	*/

/* Variable Abstände */
  --padding-xl: clamp(2.4rem, 1.667rem + 4vw, 5rem);
  --padding-l: clamp(2.4rem, 1.560rem + 3.84vw, 3.2rem);
  --padding-m: clamp(1.2rem, 0.780rem + 1.92vw, 1.6rem);
  --padding-s: clamp(0.6rem, 0.39rem + 0.546vw, 0.8rem);

/* Radius */

  --radius: 1em;
	--radius-btn: 40px;
}

/* ---
* Theme-Korrekturen 
* —-- */
/* Fix für feststehende Bilder mobil iOS */
@media only screen and (max-device-width: 1300px) {
  .state_mobiles section {
  background-attachment: initial!important;
  }
}

/* Horizontales Seitenscrolling verhindern */
.l-canvas {
  overflow: hidden;
	/*overflow-x: clip; //wenn stiky Elemente*/
}

/* Farben für Text-Markierungen */
::-moz-selection { 
  background: var(--color-content-secondary);
  color: var(--color-content-bg);
}
::selection { 
  background: var(--color-content-secondary);
  color: var(--color-content-bg);
}

/* Abstände angleichen - Section */
.l-section.height_small {
  padding-top: var(--padding-s);
  padding-bottom: var(--padding-s);
}
.l-section.height_medium {
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
}
.l-section.height_large {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-l);
}
.l-section.height_huge {
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-xl);
}

/* Abstände angleichen - Trenner ohne Inhalt */
.w-separator.size_small:empty {
  height: var(--padding-s);
}
.w-separator.size_medium:empty {
  height: var(--padding-m);
}
.w-separator.size_large:empty {
  height: var(--padding-l);
}
.w-separator.size_huge:empty {
  height: var(--padding-xl);
}

/* Bildformate anpassen - funktioniert bei Bildern mit farbigem Schatten nicht über die Einstellungen */
.state_mobiles .en_change_image_ratio img,
.state_tablets .en_change_image_ratio img {
	aspect-ratio: 4/3;
}

.en_img_ratio_3_4 {
	aspect-ratio: 3/4;
}

.en_img_ratio_4_3 {
	aspect-ratio: 4/3;
}

/* ---
 * Schriften 
 * --- */
/* --- Wortumbruch - Hyphens/Silbentrennung --- */
h1, h2, h3, h4  {
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto!important; 
	
	-ms-hyphenate-limit-chars: 12 3 4;
  hyphenate-limit-chars: 12 3 4;
	
	/* Safari */
	-webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3; 
  -webkit-hyphenate-limit-after: 4;
}

/* --- Uppercase --- */
span.en_uppercase, 
.en_uppercase {
  text-transform: uppercase;
}

/* --- Link-Unterstreichung --- */
.w-iconbox p > a, p > a strong,
.wpb_text_column ul:not(.menu) > li > a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.en_external_link:hover a:after {
	content: "\f08e";
	font-family: "fontawesome";
	margin-left: 7px;
	margin-bottom: 1px;
	font-weight: 400;
	font-size: 80%;
	color: var(--color-lightblue);
}

/* --- 
 * Design Standards
 * --- */


/* ---
 * Buttons 
 * --- */
.w-btn {
  box-shadow: 
    0 8px 18px rgba(50, 114, 172, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.12);
  transform: translateY(0);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

.w-btn:hover {
  transform: translateY(2px);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.1)
}

/* ---
 * Iconbox 
 * --- */
.en_icon_box .w-iconbox-title {
	padding-bottom: 0.5rem !important;
}

.en_icon_box .w-iconbox {
	display: flex;
	align-items: center!important;
}

/* ---
 * Header 
 * --- */
/* --- Logo --- */
/* --- Menü 1. Ebene --- */
/* --- Submenu --- */
nav.type_desktop .en_hide_desktop  {
  display: none;
}

.no-touch .w-nav.type_desktop .hover_underline .w-nav-anchor.level_1 .w-nav-title:after {
	background: var(--color-blue)!important;
	border-radius: 5px !important;
	transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
	bottom: -5px!important;
	height: 3px!important;
}

.no-touch .w-nav.type_desktop .hover_underline .w-nav-anchor.level_1:hover .w-nav-title:after {
	transform: scaleX(1);
}

.no-touch .w-nav.type_desktop .current-menu-item .w-nav-anchor.level_1 .w-nav-title:after {
	opacity: 1!important;
	transform: scaleX(1);
}

 /* ---
 * Teaser (Raster / Karussell)
 * --- */
.w-grid-item:hover .en_icon_circle
{
	background: white !important;
	color: var(--color-blue) !important;
}

.en_icon_circle {
	border: 2px solid white;
	padding: 0.6rem 0.9rem;
	border-radius: 40px;
}

.en_icon_circle i{
	transform: rotate(-45deg);
}

/* --- Pfeile --- */
/* --- Dots --- */
.owl-dots button span {
  width: 30px!important;
  border-radius: 2px;
  background: var(--color-blue);
  box-shadow: none!important;
  transition: all 0.4s ease-in-out;
}
.owl-dots button.active span {
  width: 40px!important;
  background: var(--color-green)!important;
  box-shadow: none!important;
}

/* --- 
 * Kontaktformular
 * --- */
.gform_wrapper.gravity-theme .gfield_label {
	font-size: 18px;
}

::-ms-input-placeholder { /* Edge 12-18 */
  color: var(--color-black);
}

::placeholder {
  color: var(--color-black);
}

/* ---
 * Barrierefreiheit
 * --- */
*:focus:not(:focus-visible) {
  outline: none!important;
}

*:focus-visible {
  outline: 2px solid var(--color-focus)!important;
    outline-offset: 2px;
}

/* --- Impreza-Standard --- */
a:focus-visible, button:focus-visible, input[type=checkbox]:focus-visible + i, input[type=checkbox]:focus-visible + .w-color-switch-box, input[type=submit]:focus-visible {
  outline: 2px solid var(--color-focus)!important; 
}
/* --- Grids/Raster & Karussell --- */
/* Variante 1: Funktioniert nur wenn im Raster-Element der Link überschrieben wurde */
article .w-grid-item-h:focus-within  {
  border: var(--border) solid var(--color-focus)!important;
  outline-offset: 4px!important;
}

/* --- Links --- */
p > a:focus {
  outline: 1px solid var(--color-focus)!important;
outline-offset: 2px!important;
  color: var(--color-focus);
}

p > a, .wpb_text_column ul:not(.menu) > li > a {
	text-underline-offset: 4px!important;
	text-decoration-thickness: 1px !important;
}

/* --- Button (a) --- */
.w-btn:focus-visible  {
  outline: 2px solid var(--color-focus)!important;
}

/* --- Formulare --- */
form input:focus-visible {
  outline: 2px solid var(--color-focus-2)!important;
}
form button:focus-visible {
  outline: 2px solid var(--color-focus-2)!important;
}