/*
Theme Name:   Ute Bernbeck (Twenty Twenty Child-Theme)
Theme URI:    https://feuerball.de
Author:       Florian Bube
Author URI:   https://feuerball.de 
Description:  Child-Theme für das WordPress-Standardtheme Twenty Twenty 
Template:     twentytwenty 
Version:      1.1.4

https://pmueller.de/ein-child-theme-fuer-twenty-twenty-erstellen/

Grau Kasten: #475650
Orange Kasten: #FC8510
Gold Kasten: #B7A01E
*/

/* rubik-300 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/rubik-v20-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/rubik-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/rubik-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/rubik-v20-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/rubik-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/rubik-v20-latin-300.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-regular - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/rubik-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/rubik-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/rubik-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/rubik-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/rubik-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/rubik-v20-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */
}

body,
.entry-content,
.widget_text p, .widget_text ol, .widget_text ul, .widget_text dl, .widget_text dt, .widget-content .rssSummary {
	font-family: 'Rubik', sans-serif;
}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .entry-content cite, .entry-content figcaption, .entry-content table, .entry-content address, .entry-content .wp-caption-text, .entry-content .wp-block-file,
input, textarea, button, .button, .faux-button, .faux-button.more-link, .wp-block-button__link, .wp-block-file__button,
.modal-menu a,
.pagination-single a,
.footer-top-wrapper .regional-karte h3 {
	font-family: 'Rubik', sans-serif;
}

body,
h1, h2, h3, h4, h5, h6, .faux-heading,
button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"],
.site-description,
.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
	letter-spacing: normal;
}

.footer-copyright,
.footer-menu {
	letter-spacing: .26px;
}

body {
	color: #475650!important;
	background: #fff;
}

.header-footer-group, body:not(.overlay-header) #site-header .toggle, .menu-modal .toggle {
	color: #475650!important;
}

.header-footer-group pre, .header-footer-group fieldset, .header-footer-group input, .header-footer-group textarea, .header-footer-group table, .header-footer-group table *, .footer-nav-widgets-wrapper, #site-footer, .menu-modal nav *, .footer-widgets-outer-wrapper, .footer-top {
	border-color: #707070!important;
}

.color-accent, .color-accent-hover:hover, .color-accent-hover:focus, :root .has-accent-color, .has-drop-cap:not(:focus):first-letter, .wp-block-button.is-style-outline, a,
.footer-widgets a {
	color: inherit!important;
}

.header-inner,
.section-inner,
.section-inner.medium,
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 122.6rem;
}

.text-block-grau {
	background-color: #475650;
	color: #fff;
	padding: 2rem 2.8rem 2.8rem 2.8rem;
}

.text-block-orange {
	background-color: #FC8510;
	color: #fff;
	padding: 2rem 2.8rem 2.8rem 2.8rem;
}

.text-block-gold {
	background-color: #B7A01E;
	color: #fff;
	padding: 2rem 2.8rem 2.8rem 2.8rem;
}

.text-block-weiss.text-block-plus,
.text-block-grau.text-block-plus,
.text-block-orange.text-block-plus,
.text-block-gold.text-block-plus {
	padding-bottom: 7rem;
}

button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"], .bg-accent, .bg-accent-hover:hover, .bg-accent-hover:focus, :root .has-accent-background-color, .comment-reply-link {
	background-color: transparent!important;
	border: 1px solid #475650;
	font-size: 2rem;
    font-weight: 300;
	text-transform: inherit;
	padding: 1rem 2rem;
}

.wp-block-buttons {
	gap: 2rem!important;
	margin-top: 2.8rem;
}

.text-block-grau button, .text-block-grau .button, .text-block-grau .faux-button, .text-block-grau .wp-block-button__link, .text-block-grau .wp-block-file .wp-block-file__button, .text-block-grau input[type="button"], .text-block-grau input[type="reset"], .text-block-grau input[type="submit"], .text-block-grau .bg-accent, .text-block-grau .bg-accent-hover:hover, .text-block-grau .bg-accent-hover:focus, .text-block-grau :root .has-accent-background-color, .text-block-grau .comment-reply-link,
.text-block-orange button, .text-block-orange .button, .text-block-orange .faux-button, .text-block-orange .wp-block-button__link, .text-block-orange .wp-block-file .wp-block-file__button, .text-block-orange input[type="button"], .text-block-orange input[type="reset"], .text-block-orange input[type="submit"], .text-block-orange .bg-accent, .text-block-orange .bg-accent-hover:hover, .text-block-orange .bg-accent-hover:focus, .text-block-orange :root .has-accent-background-color, .text-block-orange .comment-reply-link,
.text-block-gold button, .text-block-gold .button, .text-block-gold .faux-button, .text-block-gold .wp-block-button__link, .text-block-gold .wp-block-file .wp-block-file__button, .text-block-gold input[type="button"], .text-block-gold input[type="reset"], .text-block-gold input[type="submit"], .text-block-gold .bg-accent, .text-block-gold .bg-accent-hover:hover, .text-block-gold .bg-accent-hover:focus, .text-block-gold :root .has-accent-background-color, .text-block-gold .comment-reply-link {
	border: 1px solid #fff;
	color: #fff;
}

ul.liste-profil {
	list-style-type: none;
	border-top: 1px solid #707070;
	padding-top: .5rem;	
}

ul.liste-profil li {
	margin-bottom: 0!important;
}

ul.liste-profil li:before {
	content: "-";
    position: absolute;
    left: 2px;
}

.spalte-2 h2 {
	font-size: 2.8rem;
}

h1, .heading-size-1,
h2, .heading-size-2,
.home .spalte-2 h2 {
	font-weight: 300;
	font-size: 3.6rem;
}

h1 {
	margin-top: 2.8rem!important;
}

.home h1 {
	margin-top: 0!important;
}

.header-inner {
	padding: 2rem 0 5rem 0;
}

.site-title {
	font-size: 1.4rem;
}

.site-title a {
	color: #707070!important;
}

.site-description,
.text-orange,
.footer-menu a {
	color: #FC8510!important;
}

.site-description {
	margin-top: .3rem;
	line-height: 1;
	display: block;
	font-size: 1.4rem;
}

.site-description::after {
	display: block;
	content: 'Dipl. Ing. Architektur Ute Bernbeck';
	font-size: 1.2rem;
	font-weight: 300;
	margin-top: .5rem;
	color: #475650!important;
}

.header-inner .toggle {
	display: inline-block;
    padding: 0;
	height: auto;
	min-width: auto;
}

.header-toggles {
	margin-top: .9rem;
}

.nav-toggle .toggle-inner {
	margin-top: 2.1rem;
}

.toggle-inner {
	display: block;
	height: auto;
}

.nav-toggle {
	right: -0.25rem;
    top: -6.5rem;
}

.nav-toggle .toggle-icon, 
.nav-toggle svg {
	width: 4.2rem;
    height: 4.6rem;
	color: #FC8510;
}

.toggle-inner .toggle-text {
	padding-right: 2px;
	font-size: 1.2rem;
	font-weight: 300;
	text-transform: uppercase;
	top: 5rem;
    left: 0.5rem;
}

button.close-nav-toggle {
	font-size: 1.4rem;
	font-weight: 300;
	text-transform: uppercase;
}

button.close-nav-toggle svg {
	width: 4rem;
	height: 4rem;
	color: #FC8510;
}

.menu-modal:focus,
.menu-modal *:focus {
	outline: none;
}

.nav-toggle:-webkit-autofill:focus,
.nav-toggle:-webkit-autofill:focus-visible,
.close-nav-toggle:-webkit-autofill:focus,
.close-nav-toggle:-webkit-autofill:focus-visible,
.nav-toggle:focus,
.nav-toggle:focus-visible,
.nav-toggle:active,
.close-nav-toggle:focus,
.close-nav-toggle:focus-visible,
.close-nav-toggle:active {
	outline: none!important;
}

.nav-toggle:-webkit-autofill,
.nav-toggle:-webkit-autofill:hover,
.nav-toggle:-webkit-autofill:focus,
.nav-toggle:-webkit-autofill:active,
.close-nav-toggle:-webkit-autofill,
.close-nav-toggle:-webkit-autofill:hover,
.close-nav-toggle:-webkit-autofill:focus,
.close-nav-toggle:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0px 1000px #ffefef inset !important;
}

.menu-modal-inner {
	background: rgba(255, 255, 255, .9);
}

.modal-menu li {
	border: 0;
}

.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
	font-size: 3.2rem;
	font-weight: 300;
	padding-bottom: 0;
}

.modal-menu a:focus, .modal-menu a:hover, .modal-menu li.current-menu-item > .ancestor-wrapper > a, .modal-menu li.current_page_ancestor > .ancestor-wrapper > a {
	text-decoration: none;
	color: #FC8510!important;
}

#site-content {
	overflow: inherit;
}

.spalten-container {
	position: relative;
	margin-top: 2.5rem!important;
	margin-bottom: 0!important;
}

.bafa-button {
	position: absolute;
	width: 200px!important;
	height: 200px;
	border-radius: 100px;
	background-color: #FC8510;
	top: -8rem;
    right: 0;
    margin: 0!important;
    z-index: 4;
	transform: rotate(-10deg);
}

.bafa-button h3 {
	font-size: 2.1rem;
	font-weight: 300;
	text-align: center;
	color: #fff;
	margin-top: 7.4rem!important;
    margin-bottom: 1.4rem!important;
}

.bafa-button p {
	font-size: 1.2rem;
	text-align: center;
	color: #475650;
	padding: 0 5rem;
}

.spalte-1 {
	margin-top: 0!important;
}

.bafa-button ~ .spalte-1 {
	padding-top: 12rem!important;
}

.spalte-2 {
    margin-top: 0!important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content p,
.entry-content ul,
.entry-content ol {
	hyphens: auto;
}

.info-container {
	border-top: 1px solid #707070;
	padding-top: 5rem;
	margin-top: 2rem;
}

.info-container p {
	font-size: 2.8rem;
	font-weight: 300;
	color: #FC8510;
}

p.kontakt-telefon {
    margin-bottom: 3rem!important;
}

p.kontakt-telefon a {
	font-size: 2.8rem;
	font-weight: 300;
	text-decoration: none;
}

.footer-widgets-wrapper .footer-widgets:first-child .widget:last-child {
	margin-top: 0;
	margin-bottom: 4.6rem;
}

.footer-widgets {
	border-top: 1px solid #707070;
}

.widget-content h2 {
	font-size: 2rem;
	font-weight: 400;
	line-height: 1;
	margin-top: 2rem;
	margin-bottom: 0;
}

.widget-content p.text-orange {
	font-size: 2rem;
	line-height: 1.1;
    padding-top: 0.3rem;
}

.footer-widgets .widget-content .wp-block-columns .wp-block-column:nth-child(2),
.footer-copyright,
.footer-menu a {
	font-size: 1.6rem;
	font-weight: 300;
}

.footer-widgets .widget-content .wp-block-columns .wp-block-column:nth-child(2) p br {
	display: none;
}

.footer-copyright,
.footer-menu a {
	text-transform: uppercase;
}

.footer-menu {
	display: flex;
	gap: 1rem;
	justify-content: flex-end;
}


#scrollicon {
	text-align: center;
	text-decoration: none;
	color: #707070;
	border: 1px solid #707070;
	border-radius: 50px;
	padding: 15px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	display: none;
	z-index: 999;
}

#scrollicon:hover {
	background-color: rgba(238,238,238,.5);
}

#scrollicon img {
	color: #fff;
	width: 100%;
	/* content: '↑'; */
}


@media (min-width: 375px) {
	.header-inner {
		padding: 3.15rem 0;
	}

	.nav-toggle {
		top: -4.5rem;
	}
	
	.site-title,
	.site-description {
		font-size: 1.8rem;
	}
	
	.site-description::after {
		font-size: 1.4rem;
		margin-top: .7rem;
	}
}

@media (min-width: 520px) {

	.modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a {
		font-size: 3.6rem;
	}
	
	.site-title,
	.site-description {
		font-size: 2.8rem;
		font-weight: 300;
	}
	
	.site-title a {
		display: inline-block;
		color: #475650!important;
	}

	.site-title::after {
		display: inline;
		content: 'Dipl. Ing. Architektur Ute Bernbeck';
		font-size: 1.2rem;
		font-weight: 300;
		margin-left: .9rem;
	}

	.site-description {
		margin-top: .3rem;
	}

	.site-description::after {
		display: none;
	}
	
	.bafa-button {
		top: -8rem;
	}

	.bafa-button ~ .spalte-1 {
		padding-top: 6rem!important;
	}

	.entry-content h1,
	.entry-content h2,
	.entry-content h3,
	.entry-content p,
	.entry-content ul,
	.entry-content ol {
		hyphens: inherit;
	}	

	.info-container p {
		font-size: 3.6rem;
	}
	
}

@media (min-width: 700px) {
	
	.wp-block-archives:not(.alignwide):not(.alignfull), .wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, .wp-block-columns:not(.alignwide):not(.alignfull), .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), .wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, .wp-block-video:not(.alignwide):not(.alignfull) {
		margin-top: 2.5rem;
		margin-bottom: 2.5rem;
	}
	
	.section-inner {
		width: calc(100% - 4rem);
	}

	.header-inner .toggle {
		padding: 0; /*padding: 0 4.5rem;*/
	}

	.nav-toggle {
		right: 0;
		top: -3.1rem;
	}

	.nav-toggle .toggle-inner {
		margin-top: 0;
	}
	
	button.close-nav-toggle svg {
		width: 4rem;
		height: 4rem;
	}

	.site-title,
	.site-description {
		font-weight: 300;
		font-size: 3.6rem;
	}
	
	h1, .heading-size-1,
	h2, .heading-size-2 {
		font-weight: 300;
		font-size: 3.6rem;
	}
	
	.entry-content h1, .entry-content h2, .entry-content h3 {
		margin-bottom: 2.1rem;
	}
	
	.post-inner {
		padding-top: 5rem;
	}
	
	.entry-content {
		font-size: 1.6rem;
	}
	
	.entry-content p, .entry-content li {
		line-height: 1.25;
		margin-bottom: 1.2em;
	}

	.bafa-button {
		top: -11rem;
		left: 70%;
	}

	.bafa-button ~ .spalte-1 {
		padding-top: 4rem!important;
	}
	
	.footer-widgets-outer-wrapper {
		padding: 0;
	}
	
	.footer-widgets-wrapper {
		display: block;
		margin-left: 0;
		width: 100%;
	}
	
	.footer-widgets {
		margin-left: 0;
		width: 100%;
	}
	
	#site-footer {
		padding: 7.6rem 0 2.5rem 0;
	}
	
	.footer-credits {
		align-items: baseline;
		width: 100%;
	}
	
	.footer-copyright {
		font-weight: 300;
		width: 50%;
	}
	
	.footer-menu-wrapper {
		width: 50%;
	}
	
	.footer-menu-wrapper .footer-menu {
		justify-content: flex-end;
	}
	
	.footer-widgets .wp-block-columns {
		margin-top: 1.9rem!important;
		margin-bottom: 3.7rem!important;
	}
	
	.footer-widgets .widget-content .wp-block-columns .wp-block-column:nth-child(2) {
		margin-top: 0.4rem;
	}
	
	.footer-widgets .widget-content .wp-block-column p {
		line-height: 1.2;
		margin-bottom: 1.2em;
	}
	
	.footer-widgets .widget-content .wp-block-column p:last-child {
		margin-bottom: 0;
	}

	.footer-widgets .widget-content .wp-block-columns .wp-block-column:nth-child(2) p br {
		display: block;
	}

	.footer-menu {
		gap: 2rem;
	}

}

@media (min-width: 1000px) {
	
	.header-inner {
		align-items: start;
	}
	
	.header-titles-wrapper {
		max-width: 75%;
	}
	
	.header-titles .site-title {
		margin-top: 2.4rem;
	}
	
	.header-titles {
		display: block;
	}
	
	.header-titles .site-description {
		margin-top: 0;
	}
	
	.header-navigation-wrapper {
		align-items: center;
		display: flex;
	}

	.header-inner .toggle {
		padding: 0;
	}
	
	.header-toggles:only-child .toggle-inner {
		display: block;
		padding-right: 0;
	}
	
	.header-toggles:only-child .toggle-inner .toggle-text {
		font-size: 1.4rem;
		padding-left: 3px;
	}

	.spalten-container {
		border-top: 1px solid #707070;
	}

	.bafa-button {
		top: -11.4rem;
		left: 75%;
	}

	.bafa-button ~ .spalte-1 {
		padding-top: 0!important;
	}
	
	.spalte-1 {
		position: absolute;
		top: 0;
		max-width: 62.4rem!important;
		z-index: 2;
	}

	.spalte-1 .text-block-weiss,
	.spalte-1 .text-block-grau,
	.spalte-1 .text-block-orange,
	.spalte-1 .text-block-gold {
		padding-right: 30rem;
	}
	
	.spalte-1 > div > *:first-child {
		margin-top: 0!important;
	}

	.spalte-2 {
		position: relative;
		top: 0;
		margin-right: 0!important;
		padding-bottom: 1rem!important;
		max-width: 62.4rem!important;
		z-index: 3;
	}

	.home .spalte-2 {
		max-width: 51.2rem!important;
	}
	
	.home .spalte-1 .text-block-weiss,
	.home .spalte-1 .text-block-grau,
	.home .spalte-1 .text-block-orange,
	.home .spalte-1 .text-block-gold {
		padding-right: 19rem;
	}

	.info-container p {
		padding-right: 33rem!important;
	}

	ul.liste-profil {
		max-width: 96%!important;
		margin-left: 0!important;	
	}
	
}

@media (min-width: 1100px) {
	
	.spalte-1,
	.spalte-2 {
		max-width: 64.8rem!important;
	}
	
	.home .spalte-2 {
		max-width: 56.4rem!important;
	}
	
}
	
@media (min-width: 1220px) {
	
	.header-toggles {
		margin-right: -4.2rem;
	}

	.header-inner .toggle {
		padding: 0 1rem;
	}
	
	h1, .heading-size-1 {
		font-weight: 300;
		font-size: 3.6rem;
	}
	
	button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"], .bg-accent, .bg-accent-hover:hover, .bg-accent-hover:focus, :root .has-accent-background-color, .comment-reply-link {
		min-width: 22rem;
		padding: 1rem;
	}
	
	.spalte-1,
	.spalte-2 {
		max-width: 72.8rem!important;
	}
	
	.home .spalte-2 {
		max-width: 62.4rem!important;
	}
		
	.footer-widgets-wrapper {
		margin-left: 0;
		width: 100%;
	}
	
	.footer-widgets {
		margin-left: 0;
	}
	
	.widget-content {
		font-size: 2rem;
	}
}

@media (min-width: 1280px) {

	.header-inner .toggle {
		padding: 0 2rem;
	}
	
	.home .spalte-1 .text-block-weiss,
	.home .spalte-1 .text-block-grau,
	.home .spalte-1 .text-block-orange,
	.home .spalte-1 .text-block-gold {
		padding-right: 16rem;
	}
		
	.text-block-hoehe {
		height: 302px;
	}
		
	.home .text-block-hoehe {
		height: 330px;
	}

}