/*
Projekt       : Entscheidungshaus
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwenty" für die website "entscheidungshaus.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentytwenty
Version:        1.0
Historie
   21.11.19  Gernot Daum  Beginn der Implementierung
*/

/* Fonts */
@font-face {
  font-family: 'Rubik Regular';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Regular.woff') format('woff2'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Regular.woff') format('woff'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Regular.ttf') format('truetype'),
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Regular.eot') format('eot')
}
@font-face {
  font-family: 'Rubik Light';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Light.woff2') format('woff2'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Light.woff') format('woff'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Light.ttf') format('truetype'),
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Light.eot') format('eot')
}
@font-face {
  font-family: 'Rubik Medium';
  font-style: normal;
  font-weight: 400;
  src: url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Medium.woff2') format('woff2'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Medium.woff') format('woff'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Medium.ttf') format('truetype'),
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Medium.eot') format('eot')
}
@font-face {
  font-family: 'Rubik Bold';
  font-style: normal;
  letter-spacing: 0;
  font-weight: 100;
  src: url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Bold.woff2') format('woff2'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Bold.woff') format('woff'), 
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Bold.ttf') format('truetype'),
       url('/wp-content/themes/twentytwenty-entscheidungshaus/fonts/Rubik-Bold.eot') format('eot')
}
h1, .entry-content h1, h2, .entry-content h2, h3, .entry-content h3, 
h4, .entry-content h4, h5, .entry-content h5, h6, .entry-content h6, .site-title {
	font-family: 'Rubik Light', sans;
	font-weight: 100;
  letter-spacing: 0
}
body, p, .entry-content p, .entry-content ul, .entry-content .valuepairs, .site-description {
	font-family: 'Rubik Light', sans-serif;
	font-size: 18px;
	line-height: 22px;
	font-weight: 100
}
strong {font-family: 'Rubik Regular', sans-serif}

/* Theme Reset */
.entry-content > .alignwide:not(.wp-block-group.has-background), 
.entry-content > .alignfull:not(.wp-block-group.has-background) {
    margin-bottom: 3rem;
    margin-top: 3rem;
}

/* Allgemein */
a, .entry-content a, #site-footer a {
	color: #0886f7;
	font-family: 'Rubik Regular', sans-serif;
	text-decoration: none
}
a:hover, .entry-content a:hover {text-decoration: underline}
ul, ol {margin: 0 0 3rem 0}
.post-meta-edit-link-wrapper {display: none}
.listcaption {margin-bottom: 4px}
.alignwide {margin: 0}
#site-content .alignscreen {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto 0 auto
}
article {position: relative}
.smartphone {
	display: none;
	position: fixed;
	z-index: 2;
	top: 20px;
	right: 30px
}
.admin-bar .smartphone {top: 60px} 
#site-content a.smartphone {color: white}

/* Breiten */
.constriction, #site-content .pagination-single, .footer-inner.section-inner {
	max-width: 128rem; 
	margin: 0 auto
}
.constriction {max-width: 120rem}
#site-content, .section-inner {
	max-width: 192rem; 
	margin: 0 auto
}
.entry-content > .alignwide, [class*="__inner-container"] > .alignwide {
 	width: 100%; 
 	max-width: 192rem
}
#site-content #et-boc {max-width: 120rem; margin: 0 auto}
#site-content .narrow, .blog article {max-width: 96rem; margin: 0 auto}
#site-content .single-track, #site-content #et-boc .single-track, 
.narrow-content #site-content, .post-template .post-inner 
{max-width: 800px; margin: 0 auto} 
#site-content .path {max-width: 64rem; margin-left: auto; margin-right: auto}
#site-content .path.path1 {padding-left: 6rem}

/* Vertikale Abstände und Schrigftgröße */
#site-content .wp-block-group:not(.has-background):not(.alignwide)), #site-content .wp-block-image 
  {margin-top: 3rem; margin-bottom: 3rem} 
#site-content .wp-block-columns {margin-top: 0; margin-bottom: 1.5rem}
#site-content .default-topm {margin-top: 3rem}
#site-content .double-topm {margin-top: 6rem}
#site-content .default-bottomm {margin-bottom: 3rem}
#site-content .default-topp {padding-top: 3rem}
#site-content .default-bottomp {padding-bottom: 3rem}
#site-content h1 {font-size: 30px;line-height: 34px}
#site-content #et-boc .fluid h1 {margin-top: 1rem; font-size: 4.5rem}
#site-content #et-boc .fluid h2 {font-size: 3.2rem}
#site-content h2, #site-content .level2  {
	margin-top: 30px;
	margin-bottom: 15px;
	font-size: 30px;
	line-height: 34px;
	text-align: center
}
#site-content h3 {
	margin: 2.8rem 0 1.4rem 0;
	font-size: 24px;
	line-height: 28px
}
#site-content h3:first-child {margin-top: 0}
#site-content h3.answer {margin: 1rem 0 0 0}
#site-content h4 {
	margin: 2.4rem 0 1.2rem 0;
	font-size: 20px;
	line-height: 24px
}
#site-content h4.proposition {margin: 0.6rem 0 0.3rem 0}
 
/* Kopf */
#site-header {position: fixed; width: 100%; z-index: 2}
.header-inner {max-height: 150px; transition: max-height 1s; max-width: 1200px}
.header-titles-wrapper {
	opacity: 1; 
	transition: opacity 1s
}
.header-titles {float: left}
.primary-menu-wrapper {min-height: 9rem; transition: min-height 1s}
.header-inner {padding: 30px 0}
ul.primary-menu {margin: 60px 0 0 0; transition: margin 1s}

/* Fuß */
.footer-top-hidden #site-footer {
	margin-top: 0;
	padding: 1.2rem 0 2.3rem 0;
	background: url('/wp-content/themes/twentytwenty-entscheidungshaus/22_Images/Entscheidungshaus-Paartherapeuten.jpg')
}
#site-footer .section-inner {display: block; max-width: 1200px}
#site-footer .section1, #site-footer .section2 {float: left}
#site-footer .section1 {width: 38.2%}
#site-footer .section2 {width: 61.8%}
#site-footer .menu, .socialmedia {float: right}
#site-footer .site-logo {width: 100%}
#site-footer .site-logo img {max-height: 15rem}
#site-footer .menu-container {width: 80%}
#site-footer .menu, .socialmedia {margin: 74px 0 0 0}
.socialmedia {width: 20%}
.socialmedia a {
	display: block;
	margin-left: 10px;
	float: right
}
#site-footer .copyright {
	clear: right;
	width: 100%;
	padding: 15px 0 0 0;
	text-align: right
}
#site-footer .copyright a {
	font-size: 15px;
	color: #000;
	text-decoration: none 
}

/* Navigation */
#site-header a, .menu-modal .mobile-menu a, #site-footer .menu a 
{ color: #000}
#site-header a:hover, .menu-modal .mobile-menu a:hover, 
.footer-nav-widgets-wrapper .footer-widgets .current-menu-item a,
.footer-nav-widgets-wrapper .footer-widgets a:hover 
{color: #0886f7; text-decoration: underline}
.modal-menu > li > .ancestor-wrapper > a {font-size: 20px}
.header-titles-wrapper {display: block}
.news:before {
  display: block;
  position: absolute; /* Damit der Block „über“ allem anderen schwebt */
  content: url('/wp-content/themes/twentytwenty-entscheidungshaus/21_Icons/News.png');
  margin-top: -2rem; 
  margin-left: 1.5rem;
  padding: 0.2rem 0.7rem
}

/*   Mobile */
.header-inner .toggle {
	position: static; 
	float: right; 
	display: block;
	margin-top: 60px;
	padding: 0
}
.nav-toggle .toggle-icon, .nav-toggle svg {height: auto; width: 100%}
.nav-toggle .toggle-inner {height: auto; padding-top: 0}
.toggle-inner img {float: right}

/*   Fuß */
#site-footer .menu li {
	display: inline;	
	margin: 0;
	padding: 15px
}
#site-footer .menu li:first-child {padding-left: 0}
#site-footer #site-footer .menu a {
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase
}
#site-header .current-menu-item > a, .modal-menu li.current-menu-item > .ancestor-wrapper > a, #site-footer .menu li > a 
{text-decoration: none}
#site-header .current-menu-item > a, #site-header .current-menu-ancestor > a, #site-header a:hover,
.modal-menu li.current-menu-item > .ancestor-wrapper > a, .menu-modal .mobile-menu a:hover,
.modal-menu li.current_page_ancestor > .ancestor-wrapper > a,
#site-footer .menu li.current-menu-item > a, #site-footer .menu a:hover {
	color: #0886f7;
  text-decoration: none
}
#site-header .primary-menu > li > .icon {color: #0886f7}
#site-header .primary-menu ul {background-color: #fff}
.primary-menu ul {top: 2rem; padding: 0; width: 8rem; text-align: right}
.primary-menu ul::before {height: 0}
#site-header .primary-menu > li > ul::after {display: none}
 
/* Inhalt */
#site-content {clear: both}
#site-content article {margin-top: 150px; transition: margin-top 1s}
#site-content article.blog-overview {margin-top: 30px}
.post-inner {padding-top: 0}
.entry-content .highlighted {background: #f9dda5}
.entry-content .greyed {background: #dcdbe0}
.entry-content .beige {background: #f4e5bf}
.entry-content .pink {background: #fadde3}
.alignwide.highlighted, .alignscreen.greyed, .alignscreen.highlighted, .alignwide.greyed { 
	position: static; 
	/* Margin wegen Farbe durch Padding ersetzen */
	margin-top: 0; 
	margin-bottom: 0; 
	padding: 3rem 0 1.5rem 0
}
#site-content .greyed .wp-block-group {
	margin-top: 0; 
	margin-bottom: 0; 
}

#site-content h2.highlighted, #site-content h2.greyed {margin: 0; padding: 30px 0 15px 0}
.wp-block-group.alignwide {padding-top: 3rem; padding-bottom: 3rem}
.wp-block-group.alignwide.overlay {padding-top: 0}
#site-content .wp-block-group.alignwide.overlay h2 {
	font-size: 40px; 
	line-height: 46px; 
	text-align: left
}
.entry-content .wp-block-group .wp-block-columns {margin: 0}
.centered {text-align: center}
.centered img {margin: 0 auto}
.underwriting {display: block; margin: 10px 0 5px 0; font-size: 14px; text-align:center}
.video-underwriting {text-align: center; margin-top: 6px}
.divider {min-height: 30px; border-bottom: 1px solid #999}

/*   Diverse Standards */
.nomargin, #site-content .nomargin {margin: 0}
.nopadding, .alignwide.nopadding {padding: 0}
.notopm, #site-content .notopm {margin-top: 0}
.notopp, #site-content .notopp {padding-top: 0}
.nobottomm, #site-content .nobottomm {margin-bottom: 0}
.nobottomp, #site-content .nobottomp, #site-content .greyed.nobottomp {padding-bottom: 0}
.centred {text-align: center} 
.clearfix:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}

/*   Überlagerungen */
.overlay-anchor {position: relative}
.overlay {position: absolute; Top: 0}
#site-content .overlay.homeleft {Left: 25%; Top: 45%; width: 20%; max-width: 220px}
#site-content .overlay.homemiddle {
	z-index: 0;
	left: 46%; 
	top: 0; 
	margin: 15px 0;
	max-width: 400px
}
#site-content .overlay.homeright {Left: 73%; Top: 20.5%; width: 10%; max-width: 150px}
.overlay.img-fw1 {Left: 3%; Top: -6rem}
.overlay.img01 {Left: 75%; Top: 7%}
.overlay.img02 {Left: 3%; Top: 40%}
.overlay.img03 {Left: 75%; Top: 70%}
.overlay img {max-width: 100%}
.overlay.img-fw1 img, .overlay.img01 img, .overlay.img02 img, .overlay.img03 img {max-width: 240px}
#site-content .overlay.homemiddle img {
	max-width: 100%;
	opacity: 1;
	animation-name: proxy-disappear;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards
}
@keyframes proxy-disappear {
	99%  {opacity: 1}
	100% {opacity: 0}
}
.overlay.homemiddle figcaption {display: none}

/*   Mobile Version */
#site-content .mobile {
	width: 100%;
	max-width: 640px;
	margin: 0 auto
}
#site-content .mobile > .wp-block-group__inner-container > * {padding-left: 1.5rem; padding-right: 1.5rem}
#site-content .mobile > .wp-block-group__inner-container > .nopadding {padding: 0}
#site-content .mobile h2 {
	text-transform: uppercase;
	margin-left: 0;
	margin-right: 0;
  font-size: 44px;
  line-height: 48px;
  text-align: left;
}

#site-content .mobile .wp-block-group__inner-container h2:first-child {margin-top: 0}
#site-content .mobile p {hyphens: auto; font-size: 20px; line-height: 22px}
#site-content .mobile .underwriting {font-size: 18px; line-height: 20px; text-align: left}

#site-content .header-mobile {margin-top: 0}
#site-content .header-mobile1 {top: 15px;	left: 30px;	margin: 0; z-index: 5}
#site-content .header-mobile1 img {width: 15%; min-width: 60px}
#site-content .header-mobile2 {top: 24%; right: 10%;	width: 30%; margin: 0; z-index: 10}
#site-content .header-mobile2 img {width: 100%}
#site-content .header-mobile3 {top: auto; bottom: 15px; right: 5%;	width: 14%; margin: 0; z-index: 15}
#site-content .header-mobile3 img {width: 100%; max-width: 80px}
#site-content .mobile .claim {top: auto; bottom: 15px; left: 30px; margin: 0; z-index: 20}
#site-content .mobile .claim h2 {margin: 0; padding:0; max-width: 400px}

/* Kommentarbereich */
#site-content .pagination-single {margin-top: 60px}
.comment-respond p.comment-notes, .comment-respond p.logged-in-as {margin: 0 0 30px 0}

/* Tabellen */
.wp-block-group.alignwide.pageheader {padding: 0}
#site-content .pageheader .wp-block-columns {margin-bottom: 0}
#site-content .pageheader .wp-block-columns:first-child {padding-top: 3rem; padding-bottom: 3rem}
.wp-block-group .symbol {flex-basis: 20%}
.wp-block-group .symbol img {max-width: 15rem}
.MWide3col .wp-block-column:nth-child(1) {width: 25%} 
.MWide3col {display: block}
.MWide3col .wp-block-column {float: left}
.MWide3col .wp-block-column:nth-child(1) {width: 25%} 
.MWide3col .wp-block-column:nth-child(2) {width: calc(50% - 2em)}
.MWide3col .wp-block-column:nth-child(3) {width: calc(25% - 2em)}

.valuepairs {margin-bottom: 15px}
.valuepairs:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
.valuepairs div {float: left; padding: 2px 12px 2px 0}
.valuepairs .name {clear: left; width: calc(30% - 12px); max-width: 120px}
.valuepairs .value {width: calc(70% - 12px)}
.valuepairs .line {width: calc(100% - 12px)}

/* Kacheln */
.tiles {hyphens: auto} 
.tiles img:hover {opacity: 0.8}

/* Gedankenpunkte */
#site-content .thoughts, #site-content #et-boc .thoughts {
	position: relative; 
	height: 55rem; 
	max-width: 96rem
}
.thoughts img, #site-content #et-boc .thoughts img {
	position: absolute; 
	width: 1px;
	max-width: 20rem;
	animation-timing-function: linear;
	animation-fill-mode: forwards
}
.thoughts .item01 {
	top: 0; 
	left: 20%
}
.thoughts.visible .item01 {
	animation-name: expand1;
	animation-duration: 1.5s;
}
@keyframes expand1 {100% {width: 100%}}
.thoughts .item04 {
  top: 19rem; 
  left: 30%
}
.thoughts.visible .item02 {
	animation-name: expand4;
	animation-duration: 0.5s;
}
@keyframes expand4 { 100% {width: 100%}}
.thoughts .item02 {
  top: 3rem; 
  left: 45%
}
.thoughts.visible .item04 {
	animation-name: expand2;
	animation-duration: 1.4s;
}
@keyframes expand2 {100% {width: 100%}}
.thoughts .item03 {
  top: 8rem; 
  left: 65%
}
.thoughts.visible .item03 {
	animation-name: expand3;
	animation-duration: 1.8s;
}
@keyframes expand3 {20% {width: 1px} 100% {width: 100%}}
.thoughts .item05 {
  top: 25rem; 
  left: 70%
}
.thoughts.visible .item05 {
	animation-name: expand5;
	animation-duration: 2.4s;
}
@keyframes expand5 {30% {width: 1px} 100% {width: 100%}}
.thoughts .item06 {
  top: 30rem; 
  left: 13%;
  max-width: 17rem
}
.thoughts.visible .item06 {
	animation-name: expand6;
	animation-duration: 2.8s;
}
@keyframes expand6 {20% {width: 1px} 100% {width: 100%}}
.thoughts .item07 {
  top: 32rem; 
  left: 50%
}
.thoughts.visible .item07 {
	animation-name: expand7;
	animation-duration: 1s;
}
@keyframes expand7 {30% {width: 1px}100% {width: 100%}}

/*
.thoughts .item06 {top: 30rem; left: 15%; max-width: 17rem}
.thoughts .item07 {top: 32rem; left: 50%}
*/

/* Kontaktformulare */
.wpcf7-form {margin-bottom: 30px}
input[type="text"], input[type="email"] {
	border-left: none;
	border-bottom: none;
	border-right: none
}
textarea {
	border-left: none;
	border-right: none
}
#site-content input[type="submit"] {
	padding: 0;
	color: #0886f7;
	background: #fff;
	text-transform: none
}

/* Blog Übersicht */ 
section.blog {padding: 0}
.blog article {margin-bottom: 6rem}
.blog .col1, .blog .col2 {float: left}
.blog .col1 {width: 50%; padding: 0 60px 15px 0}
.blog .col2 {width: 50%}
#site-content .blog h2 {
	margin: 26px 0 13px 0;
	font-size: 22px;
	line-height: 26px;
	text-align: left
}
/* Blog Einzelseite */
.featured-media {margin-bottom: 4.5rem}


/* Responsive */

@media screen and (max-width: 1840px) {
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 360px}
}

@media screen and (max-width: 1760px) {
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 300px}
}

@media screen and (max-width: 1440px) {
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 260px}
}

/* Kleiner PC Bildschirm  */
@media screen and (max-width: 1280px) {
	/* "Vorstufe" für Margin und Padding Ränder */
  .wp-block-group.alignwide.pageheader, .alignwide h1, .alignwide h2 {padding: 0 30px}
  .alignwide .path h1, .alignwide path h2 {padding: 0}
  .tiles {padding: 0 30px}
  .overlay.img01 {Left: 80%}
  .overlay.img02 {Left: -5%}
  .overlay.img03 {Left: 80%}
  #site-content #et-boc .fluid h1 {font-size: 3.6vw}
  #site-content #et-boc .fluid h2 {font-size: 3vw}
} 
@media screen and (max-width: 1220px) {   
	.header-titles-wrapper {margin-right: 2rem}
	#site-header a {font-size: 15px}
  #site-content .overlay.homeleft {Top: 42%; max-width: 150px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 200px}
  #site-content .overlay.homeright {Top: 18%; max-width: 100px}
}

/* Tablett Landscape  / Hauptmenü Umbruch */
@media screen and (max-width: 999px) {
  #site-header {position: static}
  .header-inner {margin: 30px; padding: 0}
  .header-inner:after {content: "."; clear: both; display: block; visibility: hidden; height: 0px}
  .header-titles-wrapper {margin: 0; padding: 0}
  .header-titles {width: 61.8%}
  .site-logo img {max-height: none}
  .modal-menu {width: 98%; left: 0}
	.news:before {display: none}
	#site-content article, .entry-content {margin-top: 0}
  #site-content .wp-block-group.alignwide.overlay.claim h2 {font-size: 32px; line-height: 34px}
  #site-content .overlay.img01, #site-content .overlay.img02, #site-content .overlay.img03, 
  #site-content .overlay.img-fw1
  {position: static; margin: 0}
  #site-content .overlay.img01, #site-content .overlay.img02, #site-content .overlay.img02
  {width: 33.33%; float: left} 
  #site-content .overlay.homeleft {Top: 39%; max-width: 120px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 160px}
  #site-content .overlay.homeright {Top: 16%; max-width: 80px}
  #site-content .overlay.img-fw1 img {display: block; margin: 0 auto}
  #site-footer .menu, .socialmedia {margin: 60px 0 0 0}
  #site-footer .menu li {padding: 10px}
  /*   - Gedankenpunkte */
  .thoughts .item01 {left: 2%}
  .thoughts .item02 {left: 38%}
  .thoughts .item03 {left: 65%}
  .thoughts .item04 {left: 20%}
  .thoughts .item05 {left: 65%}
  .thoughts .item06 {left: 1%}
  .thoughts .item07 {top: 36rem; left: 40%}
}

/* Tablett Portrait / großer Umbruch */
@media screen and (max-width: 782px) {
}
@media screen and (max-width: 700px) {
	 /* Divi Builder Smartphone Anpassungen */ 
	 #site-content #et-boc .et-l a {
     display: block;
     margin: 0 auto;
     max-width: 360px;
     transform: none;
     text-align: center
   }
	
	/* #site-header {display: none} */ 
  .smartphone {display: initial}
	.alignwide.claim {margin-top: 20px}
  #site-content .wp-block-group.alignwide.overlay.claim h2 {font-size: 28px; line-height: 32px}
  .tiles img, .so-widget-sow-editor {
  	display: block; 
  	margin: 0 auto; 
  }
  .tiles img {max-width: 320px !important}
  .MWide3col .wp-block-column:nth-child(1) {display: none} 
  .MWide3col .wp-block-column:nth-child(2), .MWide3col .wp-block-column:nth-child(3) {
  	width: calc(100% - 30px);
  	margin: 0 15px
  }
  #site-content .MWide3col .wp-block-column:nth-child(3) .wp-block-image {margin: 0 auto}
  #site-content .overlay.homeleft {Top: 36%; max-width: 90px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 120px; Left: 48%}
  #site-content .overlay.homeright {Top: 14%; max-width: 60px}
  .blog .col1, .blog .col2 {width: 100%; padding: 0 0 15px 0}
  #site-footer .section1, #site-footer .section2, #site-footer .menu, .socialmedia
  { width: 100%}
  #site-footer .section1 img {display: block; margin: 0}
  #site-footer .contact {margin-top: 3rem; font-size: 2rem; line-height: 2.2rem}
  #site-footer .menu, .socialmedia {margin: 1.5rem 0 0 0}
  .socialmedia a {float: left; margin: 1.5rem 1rem 0 0}
  #site-footer .menu {float: left}
  #site-footer .copyright {clear: both; text-align: left}
  #site-content .path h1, #site-content .path p {padding-left: 30px; padding-right: 30px}
  #site-content .path.path1 {padding-left: 30px}
  /*   - Gedankenpunkte */
  #site-content .thoughts, #site-content #et-boc .thoughts {height: 60rem}
  .thoughts img, #site-content #et-boc .thoughts img {max-width: 17.5rem}
  .thoughts .item01 {left: 2%}
  .thoughts .item02 {top: 0; left: 38%}
  .thoughts .item03 {top: 14rem; left: 65%}
  .thoughts .item04 {left: 5%}
  .thoughts .item05 {top: 27rem; left: 45%}
  .thoughts .item06 {top: 38rem; left: 1%}
  .thoughts .item07 {top: 45rem; left: 50%}
}

/* Smartphone groß */
@media screen and (max-width: 600px) {
  .claim h2 {padding-left: 20px}
  .smartphone {right: 15px}
  #site-content .wp-block-group.alignwide.overlay.claim h2 {font-size: 24px; line-height: 28px}
  #site-content .mobile h2 {font-size: 34px; line-height: 38px}
  #site-content .mobile p {font-size: 18px; line-height: 20px}
  #site-content .path.path1 {padding-left: 0}
  #site-content .overlay.homeleft {Top: 32%; max-width: 75px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 90px}
  #site-content .overlay.homeright {Top: 12%; max-width: 50px}
  #site-content .nowrap .wp-block-column {
    flex-basis: calc(50% - 16px) !important;
    padding-right: 15px
  }
  #site-content .nowrap .wp-block-image {margin-top: 0; margin-bottom: 0}
  .footer-top-hidden #site-footer {
	  background: url('/wp-content/themes/twentytwenty-entscheidungshaus/22_Images/Entscheidungshaus-Paartherapie.jpg')
  }
}

/*  Smartphone */
@media screen and (max-width: 480px) {
  #site-content .header-mobile2 {top: 20%}
	.alignwide.claim {margin-top: 10px}
  #site-content .wp-block-group.alignwide.overlay.claim h2 {font-size: 20px; line-height: 24px}
  #site-content .overlay.homeleft {Top: 29%; max-width: 60px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 80px; Left: 52%}
  #site-content .overlay.homeright {Top: 9%; max-width: 40px}
  .header-inner .toggle {margin-top: 48px}
  .smartphone img, .nav-toggle img {width: 40px}
  #site-footer .menu li {
  	display: inline-block; 
  	width: 100%; 
  	padding: 5px 10px 5px 0
  }
	#site-content #et-boc .fluid h1 {font-size: 2.4rem}
	#site-content #et-boc .fluid h2 {font-size: 2.2rem}
  #site-content .mobile h2 {font-size: 30px; line-height: 33px}
  #site-content .mobile p {font-size: 16px; line-height: 18px}
  #site-footer .contact, #site-footer a {font-size: 18px; line-height: 20px}
  /*   - Gedankenpunkte */
  .thoughts img, #site-content #et-boc .thoughts img {max-width: 14rem}
  #site-content .thoughts, #site-content #et-boc .thoughts {height: 52rem}
  .thoughts .item01 {left: 0}
  .thoughts .item02 {left: 50%}
  .thoughts .item03 {top: 13rem; left: 60%}
  .thoughts .item04 {top: 15rem}
  .thoughts .item05 {top: 25rem}
  .thoughts .item06 {top: 33rem}
  .thoughts .item07 {top: 40rem}
}

/*  Smartphone klein  */
@media screen and (max-width: 400px) {
  .claim h2 {padding-left: 10px}
  #site-content .wp-block-group.alignwide.overlay.claim h2 {font-size: 18px; line-height: 22px}
  #site-content .overlay.homeleft {Top: 27%; max-width: 40px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 60px; Left: 54%}
  #site-content .overlay.homeright {Top: 6%; max-width: 25px}
  #site-content .mobile h2 {font-size: 7.5vw; line-height: 8vw}
  #site-content .mobile p {font-size: 15px; line-height: 17px}
}

/*  Smartphone sehr klein  */
@media screen and (max-width: 320px) {
  #site-content .wp-block-group.alignwide.overlay.claim h2 {font-size: 14px; line-height: 18px}
  #site-content .overlay.homeleft {Top: 25%; max-width: 30px}
  #site-content .overlay.homemiddle, .overlay.homemiddle img {max-width: 40px}
  #site-content .overlay.homeright {Top: 4%; max-width: 20px}
  #site-content .header-mobile2 {right: 20%}
}