/* 
 *
 * in Themes Optionen | Leistung | CSS-Datei-Zusammenführung und -Komprimierung: Aktivieren! (Deaktivieren (), minimieren ())
 *
 */
 
/* 
 * Layout Grundraster min-width 1842px
 *	  3 Spalten
 *    Spalte 1: 25%
 *    Spalte 2: 1050px
 *    Spalte 3: 24%
 *
 * Layout Grundraster min-width 1361px
 *    Spalte 1: 25%
 *    Spalte 2: 57%
 *    Spalte 3: 18%
 *
 * Layout Grundraster max-width 1360px
 *    D: Umschalten auf 2 Spalten
 *    Spalte 1: 26%
 *    Spalte 2: 74%
 *    Spalte 3:  0% 
 *
 *
 * Layout Grundraster max-width: 767px
 *    F: Umschalten auf 1 Spalte
 *    Spalte 1: 100%
 *    Spalte 2: 100%
 *    Spalte 3:   0% 
 *
 *
 * die Umsprungspunkte:
 * a) (min-width: 1842px)
 *    Die 2. Spalte ist auf 1050px begrenzt, die 3. Spalte ist 24% breit
 *
 * b) (min-width: 1451px)
 *    Das Menü ist eher zur Mitte.
 *
 * c) (min-width: 1361px) and (max-width: 1450px)
 *    Das Menü ist weiter rechts.
 *
 * d) (min-width: 850px) and (max-width: 1360px)
 *    Logo und Menü rutschen nach links.
 *
 * E) (min-width: 990px) and (max-width: 1360px)
 *
 *    Umschalten auf 2 Spalten
 *
 *
 * F) (max-width: 989px)
 *    Tablet: Umschalten auf 1 Spalte
 *    Hover auf die Menüpunkte muss manuell gesetzt werden | Standard-Enfold für tablet
 *
 * g) (max-width: 850px)
 *    die Menüpunkte rücken näher zusammen
 *
 * H) (max-width: 767px)
 *
 *    Umschalten auf Burger-Menü  | Standard-Enfold für mobil
 *
 * I) (max-width: 479px)
 *
 *    Smartphone Portrait | Standard-Enfold für Smartphone Portrait
 */
 
 /*
  * die Elemente:
  * 1.   der gesamte Inhalt
  * 2.   Header
  * 2.1. Header Grundraster
  * 2.2. Header Logo
  * 2.3. Header Hauptmenü
  * 2.4. Header Submenü
  * 2.5. Header Menu-Item Kontakt
  * 2.6. Header Menü mobil
  * 3.   Main
  * 3.1. Main Grundraster
  * 3.2. Main Grundraster Farben
  * 3.3. Main häufige Elemente
  * 4.   Startseite
  * 5.   Unterseiten
  * 5.1. Konzeption
  * 5.2. Screendesign
  * 5.3. Barrierefrei
  * 5.4. über mich
  * 6.   Projekte
  * 7.   Kontakt
  * 8.   Footer
  */
 
 /* 1.   der gesamte Inhalt 
  *      der Browser weiß jetzt schon, dass er eine vertikale Scrollleiste zeichnen muss:
  *      verhindert das Flackern im Hauptmenü */
#wrap_all {
    min-height: 1400px;
}

strong {
	font-family: 'myriadpro-bold', Helvetica, Arial, sans-serif !important;
	color: #000000 !important;
	font-weight: normal;
}

pre {
	font-size: 16px !important;
}

.html-code {
	font-family: "Courier New", Courier, monospace;
    font-size: 16px;
	margin: 30px 0 30px 0;
	padding: 30px 0 30px 0;
    background: #f1f1f1;
	border: 1px solid #d4d4d4 !important;
}

.html-code p {
	margin: 0;
	padding: 2px 0 2px 40px;
}

.html-code p:nth-child(1) {
	padding-left: 10px;
}

.html-code p:nth-child(5),
.html-code p:nth-child(6),
.html-code p:nth-child(7) {
	padding-left: 70px;
}

.html-code p:nth-child(odd) {
	background: #ffffff;
}

.screen-reader-text:focus {
    background-color: #ffffff !important;
	border: 3px solid #cc3300 !important;
    color: #000000 !important;
	border-radius: 8px !important;
	padding: 4px 20px 3px;
    left: 2% !important;
    top: 11px;
}

#skipnav a {
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif;
	font-size: 20px;
}

/* für Inhaltsverzeichnis-Tabsprung zum Ziel */
.code-span-tabindex span:focus-visible {
	outline: none !important;
}

/* 2.   Header
 * 2.1. Header Grundraster  */
 
#header_main .container {
	max-width: 100% !important;
    margin-left: 0;
	margin-right: 0;
	padding-left: 0;    
    padding-right: 0;
}

div .logo {
	/* Breite im folgenden */ 
	background: #ffffff;
}

.logo img {
	position: absolute !important;
    right: 5% !important;
}

/* 2.3. Header Hauptmenü */
.main_menu {
	padding-right: 8%;
}

@media only screen and (min-width: 1361px) {
	.main_menu {
		padding-right: 13%;
	}
}

@media only screen and (min-width: 990px) and (max-width: 1360px) {
	.main_menu {
		padding-right: 6%;
	}
}

.main_menu .av-main-nav > li > a {
    line-height: 163px !important;
}

.av-main-nav > li > a {
	padding: 0;
}

.logo a:focus-visible img {
	background-color: #c33c00 !important;
}

/* das muss schneller gehen */
.av-main-nav > li > a {
    transition: background-color 0.2s ease-in-out;
}

.av-main-nav > li a:focus-visible {
	text-decoration: underline !important;
	text-decoration-thickness: 4px !important;
	text-underline-offset: 11px;
	text-decoration-color: #cc3300 !important;
}

.av-main-nav > li:nth-child(1) a:active,
.av-main-nav > li:nth-child(2) a:active,
.av-main-nav > li:nth-child(3) a:active,
.av-main-nav > li:nth-child(4) a:active,
.av-main-nav > li:nth-child(1) a:focus-visible,
.av-main-nav > li:nth-child(2) a:focus-visible,
.av-main-nav > li:nth-child(3) a:focus-visible,
.av-main-nav > li:nth-child(4) a:focus-visible {
	background-color: #b1d1e2 !important;
}

.av-main-nav > li.current-menu-item > a:hover {
    background-color: #7dadcc !important;	
}

.av-main-nav .sub-menu li a:focus,
.av-burger-overlay ul li a:focus {
	background-color: #000000 !important;
}

.av-main-nav .sub-menu li a:focus {
	text-decoration: none !important;
}

.av-main-nav .sub-menu li a:focus .avia-menu-text,
.av-burger-overlay ul li a:focus .avia-menu-text {
	color: #ffffff !important;
}

.avia-menu-text {
	padding: 0 25px 0 25px;
}

.sub-menu .avia-menu-text {
	padding: 0 29px 0 12px;
}

.av-main-nav ul {
	margin-top: 0;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}

.current-menu-item .avia-menu-text {
	transition: none;
}

#top #header .av-main-nav > li.current-menu-item > a {
    text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 11px;
}


/* 2.5. Header Menu-Item Kontakt: weiß auf schwarz und größer */
#menu-item-62 .avia-menu-text {
	background-color: #000000;
	color: #ffffff !important;
	padding-top: 20px;
	padding-bottom: 14px;
	transition: padding 0.25s ease-in-out;
}

#menu-item-62:hover .avia-menu-text {
	padding-top: 72px;
	padding-bottom: 33px;
	transition: padding 0.25s ease-in-out;
}

#menu-item-62.current-menu-item:hover .avia-menu-text {
	transition: none;
}

#menu-item-62.current-menu-item,
#menu-item-62.current-menu-item a,
#menu-item-62.current-menu-item:hover {
    background-color: #000000;
	transition: none;
}

#menu-item-62 a:focus-visible .avia-menu-text {
	background-color: #cc3300;
}

#menu-item-62.current-menu-item a:focus-visible .avia-menu-text {
	padding-top: 65px;
	padding-bottom: 39px;
	transition: none;
}

#menu-item-62 a:focus {
	text-decoration: none !important;
}

/* 3.1. Main Grundraster */
@media only screen and (min-width: 1361px) and (max-width: 1841px) {
	.grundraster .av_one_third:nth-child(1),
	.third-child-bleibt .av_one_third:nth-child(1)	{
		width: 25% !important;
	}

	.grundraster .av_one_third:nth-child(2),
	.third-child-bleibt .av_one_third:nth-child(2) {
		width: 57% !important;
	}

	.grundraster .av_one_third:nth-child(3),
	.third-child-bleibt .av_one_third:nth-child(3) {
		width: 18% !important;
	}
}

@media only screen and (min-width: 990px) and (max-width: 1841px) {
	.kopfzeile-tausch .av_one_third:nth-child(1) {
		width: 57% !important;
	}

	.kopfzeile-tausch .av_one_third:nth-child(2) {
		width: 25% !important;
	}

	.kopfzeile-tausch .av_one_third:nth-child(3) {
		width: 18% !important;
	}
}

@media only screen and (min-width: 990px) {
	/* wenn der Browser von schmal auf breit gezogen wird, hängen sonst die Menüpunkte manchmal zu weit unten. 107 ist die geschrumpfte Headerhöhe von 124px */
	#top #wrap_all #header,
	#top #wrap_all .av-logo-container,
	#top #wrap_all .avia-standard-logo a,
	.logo img	{
		min-height: 107px !important;
	}
	
	/* tauschen bei .kopfzeile-tausch min-width: 990px */
	.kopfzeile-tausch {
		display: flex !important;
		flex-wrap: nowrap;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(1) {
		order: 2;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(2) {
		order: 1;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(3) {
		order: 3;
	}	
}

/* 3.2. Main Grundraster Farben */
#main .maincontent-page.grundraster .av_one_third:nth-child(1) {
	background-color: #f4f8fb;
}

#main .maincontent-page.rasterzeile-odd.grundraster .av_one_third:nth-child(1) {
	background-color: #d3e4ef;
	background-color: #d3e6f3;
}

#main .maincontent-page.rasterzeile-odd.grundraster .av_one_third:nth-child(2),
#main .maincontent-page.rasterzeile-odd.grundraster.projekte .av_one_third:nth-child(3),
#main .maincontent-page.rasterzeile-odd.grundraster.bildzeile .av_one_third:nth-child(3) {
	background-color: #ecf3fa;
}

#main .maincontent-page.rasterzeile-odd.grundraster.checkliste-barrierefreiheit.weiss .av_one_third:nth-child(2) {
	background-color: #ffffff;
}

#kopfzeile-tausch .av_one_third:nth-child(1) {
	background-color: #ecf3fa !important;
}

#kopfzeile-tausch .av_one_third:nth-child(2) {
	background-color: #d3e6f3 !important;
}

.projekte .av_one_third:nth-child(1) {
    background-color: #ffffff !important;
}

.projekte .av_one_third:nth-child(2) {
	background-color: #f4f8fb !important;
}

.projekte.rasterzeile-odd .av_one_third:nth-child(1) {
    background-color: #ecf3fa !important;
}

.projekte.rasterzeile-odd .av_one_third:nth-child(2) {
    background-color: #d3e6f3 !important;
}

.kontaktformular .av_one_third:nth-child(1) {
    background-color: #e3eef5 !important;
}

/* 3.3. Main häufige Elemente */
p a,
p a strong,
.links-in-liste li a {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	color: #c7040a !important;
	background-color: transparent;
	transition: all 0.1s ease-in-out !important;
	box-shadow: none !important;
	border: 2px solid transparent;
	border-bottom: 1px solid transparent;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
}

p a[href^='http://']:not([href*="christof-deinhard.de"]),
p a[href^='https://']:not([href*="christof-deinhard.de"]),
.links-in-liste li a[href^='http://']:not([href*="christof-deinhard.de"]),
.links-in-liste li a[href^='https://']:not([href*="christof-deinhard.de"]) {
    padding-right: 1.3em;
    background: transparent url(https://christof-deinhard.de/wp-content/uploads/2024/04/externer_link.svg) no-repeat right;
    background-size: 0.86em;
    margin-right: 0.125em;
    position: relative;
}

p a:hover,
p a:focus,
p a:hover strong, 
p a:focus strong,
.links-in-liste li a:hover,
.links-in-liste li a:focus {
	text-decoration: none !important;
	color: #ffffff !important;
	background-color: #c7040a !important;
	transition: all 0.1s ease-in-out !important;
	border: 2px solid #c7040a;
	border-bottom: 1px solid #c7040a;
}

p a[href^='http://']:not([href*="christof-deinhard.de"]):focus,
p a[href^='https://']:not([href*="christof-deinhard.de"]):focus,
p a[href^='http://']:not([href*="christof-deinhard.de"]):hover,
p a[href^='https://']:not([href*="christof-deinhard.de"]):hover,
.links-in-liste li a[href^='http://']:not([href*="christof-deinhard.de"]):focus,
.links-in-liste li a[href^='https://']:not([href*="christof-deinhard.de"]):focus,
.links-in-liste li a[href^='http://']:not([href*="christof-deinhard.de"]):hover,
.links-in-liste li a[href^='https://']:not([href*="christof-deinhard.de"]):hover {
    padding-right: 1.3em;
	background: transparent url(https://christof-deinhard.de/wp-content/uploads/2024/04/externer_link_hover_focus.svg) no-repeat right;
	background-size: 0.86em;
    margin-right: 0.125em;
    position: relative;
}

#footer .textwidget p .font-22 {
    position: relative;
    font-size: 22px;
    top: 1px;
}

#footer .av_one_third:first-child .textwidget p:last-child {
	margin-top: 0;
	padding-left: 1.0em;
}

@media only screen and (min-width: 768px) and (max-width: 844px) {
	#footer .av_one_third:first-child .textwidget p:last-child {
		padding-left: 0;
	}
}

#footer .av_one_third:first-child .textwidget p:first-child {
	margin-bottom: 0;
}

#footer p a {
	color: #ffffff !important;
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
	border: 4px solid transparent;
}

#footer p a:hover {
	text-decoration: none !important;
	color: #ffffff !important;
	background-color: transparent !important;
	transition: all 0.1s ease-in-out !important;
	border: 4px solid transparent;
	border-bottom: 1px solid transparent;
}

#footer p a:focus {
	text-decoration: none !important;
	color: #1d3076 !important;
	background-color: #ffffff !important;
	transition: all 0.1s ease-in-out !important;
	border: 4px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

.inlineblock {
    display: inline-block;
}

.weiss {
    background-color: #ffffff;
}

.schwarz {
	background-color: #000000;
}

.textweiss {
    color: #ffffff;
}

.textschwarz {
    color: #000000;
}

.text-22px {
	font-size: 22px;
}

.bk-vollbild {
	background-size: 100% 100% !important;
}

.bk-vollbild p {
	margin: 0.35em 0;
}

.bk-rote-streifen {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/kacheln-rot.webp);
}
	
.bk-braune-balken {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/kachel2-2.webp);
}

.bk-bunte-streifen {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2023/12/startschmal1050.png);
}

.bk-impressum {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/impressum-desktop.webp);
}

.bk-datenschutz {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/datenschutz-desktop.webp);
}

#scroll-top-link {
	background-color: #ffffff !important;	
}

#scroll-top-link.avia-svg-icon {
	background-color: #4a6db9 !important;
	border: none !important;
	opacity: 0.7 !important;
	border-radius: 6px;
}

#scroll-top-link:hover {
    opacity: 1 !important;
}

#scroll-top-link.avia-svg-icon svg:first-child {
    fill: #ffffff !important;
    height: 30px;
    width: auto;
    margin-top: 9px;
}

#scroll-top-link.avia-svg-icon:hover svg:first-child {
    fill: #ffffff !important;
}

/* footer*/
.footer-projekt-anfrage {
	margin-top: 22px;
	background: #ecf3fa;
	border-radius: 8px;
	padding: 9px 6px 4px 16px;
	float: left;
}

.footer-projekt-anfrage a {
	padding: 14px 48px 14px 0px;
	color: #1d3076 !important;
	font-size: 22px;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
	font-weight: 400;
	background-image: url("https://christof-deinhard.de/wp-content/uploads/2024/06/pfeil-zur-projekt-anfrage.svg");
	background-repeat: no-repeat;
	background-position: right 6% bottom 54%;
	background-size: 24px 24px;
	transition: all 0.14s ease-in-out !important;
}

.footer-projekt-anfrage:hover {
	background: #ffffff;
}

.footer-projekt-anfrage:hover a,
.footer-projekt-anfrage a:focus-visible {
	color: #cc3300 !important;
	background-image: url("https://christof-deinhard.de/wp-content/uploads/2024/06/pfeil-zur-projekt-anfrage-focus.svg");
	background-position: right 2% bottom 62%;
	background-size: 28px 28px;
	transition: all 0.14s ease-in-out !important;
}

.footer-projekt-anfrage a:focus-visible {
	text-decoration: underline !important;
	transition: all 0.14s ease-in-out !important;
}

	
/* 3.3. Main häufige Elemente: die Inhaltsseiten mit Gliederung */
/* #kopfzeile {
	border-bottom: 36px solid #ffffff !important;
} */

.maincontent-page h3 {
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #255c8f !important;
	margin-top: 1.0em;
}

.maincontent-page .margin-top-2-5em {
	margin-top: 2.5em;
}

.inhaltsverzeichnis {
	border-bottom: 30px solid #3c6b9f !important;
}

.block-kopfzeile {
    border-bottom: 30px solid #ffffff !important;
}

.block-kopfzeile p {
	font-size: 30px;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	line-height: 1.2;
	color: #1c2461 !important;
}
	
.block-kopfzeile.konzeption p,
.block-kopfzeile .zweiter-text p {
    font-size: 22px !important;
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
	font-weight: 400 !important;
	line-height: 1.5;
}

.block-kopfzeile .p-regular p {
	font-size: 22px;
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
	line-height: 1.4;
}

.block-kopfzeile.halbbild h1,
.block-kopfzeile.halbbild p {
    margin-left: 4.6%;
	margin-right: 8.5%;
}

.kopfbild-halbhoch {
	min-height: 140px !important;
}

.inhaltsverzeichnis .avia-image-container.avia-align-left {
	margin: 0 0 54px 0;
}

.inhaltsverzeichnis img {
    height: 66px;
}

.inhaltsverzeichnis ol,
.inhaltsverzeichnis h2 {
    margin-left: 10% !important;
}

.inhaltsverzeichnis ol ol {
	margin-top: 8px;
    margin-left: 14px !important;
}

.inhaltsverzeichnis h2 {
	font-size: 20px !important;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
	font-weight: 300 !important;
	color: #1c2461 !important;
}

.inhaltsverzeichnis ol {
	line-height: 1.25;
    margin-bottom: 40px !important;
}

.inhaltsverzeichnis li {
	padding: 6px 0;
}

.inhaltsverzeichnis li li {
	padding: 3px 0;
}

.inhaltsverzeichnis li a {
	padding: 3px 2% 0 10px;
    width: 96%;
    display: block;	
	color: #1c2461 !important;
	transition: background 0.2s;
	transition: color 0.2s;
}

.inhaltsverzeichnis ol li {
	position: relative;
	z-index: 22;
}  

.inhaltsverzeichnis ol li a:hover,
.inhaltsverzeichnis ol li a:focus {
	background: #ffffff;
	box-shadow: #ffffff -25px 0px 0px 0px;
  	transition: all 0.2s;
}

.inhaltsverzeichnis ol li ol li a:hover,
.inhaltsverzeichnis ol li ol li a:focus {
	box-shadow: #ffffff -59px 0px 0px 0px;
}
	
.maincontent-page p + h3 {
	margin-top: 2.5em;
}
	
.kreis {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute;
	right: 9%;
	top: 2.9em;
	text-align: center;
	color: #ffffff;
}

.kreis > p {
	margin: 0;
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.8em;
	line-height: 1.3;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif;
}

.button-erstgespraech-wrapper {
	margin-left: 29% !important;
	width: 71% !important;
	border-radius: 30px 0 0 30px;
}

.button-erstgespraech {
	margin-bottom: 30px !important;
    margin-top: -10px !important;
}

.button-erstgespraech .avia_button_icon {
    margin-left: 10px;
	margin-right: 15px;
}

.button-erstgespraech .avia-button:focus {
	background-color: #103976 !important;
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);
	outline: 2px solid #ffffff;
    outline-offset: -5px;
}

.padding-right-8-5-prozent {
	padding-right: 14%;
}

.strong-dunkelblau p strong {
	color: #1c2461 !important;
}

.kontrast-beispiel .av_textblock_section:first-child {
	border-radius: 6px;
	border: solid 1px;
	font-size: 32px;
}

.kontrast-beispiel .av_textblock_section:first-child .avia_textblock {
    line-height: 1.0em;
}

.kontrast-beispiel .av_textblock_section:last-child {
	font-size: 18px;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.kontrast-beispiel .av_textblock_section:last-child p {
	display: inline-block;
}


.kontrast-beispiel .av_textblock_section:last-child img {
    position: relative;
	top: 5px;    
    left: 4px;
}

.kontrast-beispiel-gruen,
.kontrast-beispiel-rot {
    font-size: 26px;
    margin-left: 12px;
	position: relative;
    top: 2px;    
}

.kontrast-beispiel-gruen {
    color: #00aa00;
}

.kontrast-beispiel-rot {
    color: #cc0000;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(1) .av_textblock_section:first-child {
	border-color: #000000;
	background-color: #000000;	
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(1) .av_textblock_section:first-child strong {
	color: #ffffff !important;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(3) .av_textblock_section:first-child {
	border-color: #d3e6f3;
	background-color: #d3e6f3;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(3) .av_textblock_section:first-child strong {
	color: #1c2461 !important;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(5) .av_textblock_section:first-child {
	border-color: #7dadcc;
	background-color: #7dadcc;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(5) .av_textblock_section:first-child strong {
	color: #000000 !important;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(7) .av_textblock_section:first-child {
	border-color: #33cc33;
	background-color: #33cc33;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(7) .av_textblock_section:first-child strong {
	color: #e36512 !important;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(9) .av_textblock_section:first-child {
	border-color: #1b73d4;
	background-color: #1b73d4;
}

.kontrast-beispiel-wrapper .kontrast-beispiel:nth-child(9) .av_textblock_section:first-child strong {
	color: #ec3533 !important;
}

/* 5.   Unterseiten */

/* Startseite */
.grundraster.mehr-nutzen .av_one_third:nth-child(1) {
	background: #f2ad10 !important;
}

.nutzer-box h3 {
	font-size: 26px;
}

.start-cd-block h2 {
	padding-right: 8% !important;
}

.start-cd-block .der-text p {
	padding-right: 18%
}

@media only screen and (min-width: 900px) {
	.hellblauer-wrapper-links p {
		padding-right: 16%;
	}
}

@media only screen and (min-width: 990px) and (max-width: 1400px) {
	.start-img-cd img {
		margin-top: 90px;
	}
}

/* jetzt neu mit card */
.aktuelle-arbeiten {
	background: #d3e6f3 !important;
}

.aktuelle-arbeiten ul {
    list-style: none;
}

.aktuelle-arbeiten .flex_cell,
.aktuelle-arbeiten ul,
.aktuelle-arbeiten li {
	padding: 0;
	margin: 0;
}

.aktuelle-arbeiten ul {
	display: flex;
	display: -webkit-flex;
	display: -ms-flexbox;
}

.aktuelle-arbeiten li {
	background: #ffffff !important;
}

.card { 
	position: relative;
	display: flex;
	flex-direction: column;
	transition: all 0.16s ease-in-out !important;
}

.card:hover,
.card:focus-within {
	opacity: 0.7 !important;
	transition: all 0.16s ease-in-out !important;
}

.card-p-wrapper {
	order: 2;
}

.card-img-wrapper {
	order: 1;
}

.card p a::before {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 1;
}

.card .avia_button_icon_right {
	margin-left: 12px;
}

.card:focus-within {
	outline: 3px solid #103976 !important;
	outline-offset: 2px;
}

.card:focus { 
	box-shadow: none !important; 
	outline: none !important;
	border: none !important;
	background: none !important;
}

.card.aktuell-1 {
	background-color: #ff9966;
}

.card.aktuell-2 {
	background-color: #076392;
}

.card.aktuell-3 {
	background-color: #cc3300;
}

.card a {
	text-decoration: none !important;
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
	border: none !important;
}

.card a:hover {
	background: none !important;
	border: none !important;
}

.card:focus-within a {
	background: none !important;
}

.card:focus-within .card-link {
	text-decoration: underline !important;
	background: none !important;
}

.card:focus-within .avia_button_icon_right {
	text-decoration: none !important;
}

.card.aktuell-1 a {
	color: #000000 !important;
}

.card.aktuell-2 a,
.card.aktuell-3 a {
	color: #ffffff !important;
}

@media only screen and (max-width: 768px) {	
	.aktuelle-arbeiten ul { 
		display: block;
	}
	
	.aktuelle-arbeiten li:not(:last-child) { 
		margin-bottom: 8%;
	}	
}

.aktuelle-arbeiten p {
	font-size: 25px;
	line-height: 1.3;	
	padding: 10px 20px 3.6% 14%;
}

@media only screen and (min-width: 767px) and (max-width: 989px) {
	.aktuelle-arbeiten p {
		font-size: 22px;
	}
}

/* 4 Startseite, neue Fassung August 2025 */
.start-argumentliste li {
	margin-bottom: 10px;
}

.block-meine-werte h3 {	
	font-size: 22px;
	color: #000000 !important;
	margin-top: 44px !important;
	margin-bottom: 1em;
	line-height: 1.2em;
	padding: 0.37em 2.4em 0.2em 0.9em;
	background: #ffd000;
	position: relative;
	left: -0.9em;	
	width: 400px;
}

.start-weisser-grund-nach-links,
.start-weisser-grund {
	margin-bottom: 1.6em;
}
	
.start-weisser-grund-nach-links p,
.start-weisser-grund p {
	display: inline;
	background-color: #ffffff;	
	line-height: 1.2em;
	padding: 0.47em 0.6em 0.3em 0.9em;	
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.start-weisser-grund-nach-links p {
	position: relative;
	left: -0.9em;
}

.rund-meine-werte {
	border-radius: 50%;
	height: 240px;
	width: 240px !important;	
	background-color: #027fad;
}

.rund-meine-werte h2 {
	top: 50%;
	left: 50%;
	transform: translate(0%, 45%);
	margin: 0 10px;
	line-height: 1.3;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
}

.start-einschub-gelb {
	background: #ffd000;
	border-radius: 26px;
	margin: 60px 0px 76px 140px;
	padding: 0.67em 3.9em 0.5em 3.9em;
}

.start-einschub-gelb a strong,
.kontakt-ergaenzung-p a {
	color: #000000 !important;
}

.start-email-adresse a {
	color: #372461 !important;
}

.h3-mit-bild {
	margin-bottom: 34px;
}

.h3-mit-bild .h3-text,
.h3-mit-bild img {
	display: inline-block !important;
}

.h3-mit-bild .h3-text {
	width: calc(100% - 100px);
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #003d75 !important;
	margin-top: 1.0em;
}

.start-klingt-gut h2 {
	font-size: 2.8em !important;
}

.start-drei-sparten-wrapper .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
	margin-top: 18px !important;
}

.start-drei-sparten-wrapper .content {
	padding-bottom: 18px;
}

.blauer-wrapper-links-hoeher {
	padding: 34px 10px 28px 50px;
}

.blauer-wrapper-links,
.hellblauer-wrapper-links {
	padding: 24px 10px 18px 50px;
}

.hellblauer-wrapper-rechts {
	padding: 24px 10px 18px 0;
}

.weisser-wrapper-links {
	padding: 14px 34px 0px 160px;
}

.weisser-wrapper-links-blau {
	padding: 14px 8px 0px 80px;
	border-left: 80px solid #ffffff !important;
	border-bottom: 8px solid #ffffff !important;
}

.start-erstgespraech-wrapper {
	border-radius: 0 40px 40px 40px;
}

.start-erstgespraech-wrapper .button-erstgespraech {
    margin-bottom: 0px !important;
}

.text-email-schreiben p {
	margin-bottom: -16px;
}

.weisser-wrapper-links ul li,
.hellblauer-wrapper-links ul li,
.hellblauer-wrapper-rechts ul li
{
    list-style-type: none;
    margin: 0 0 12px -3px;
    padding: 0px 0px 18px 40px;
    vertical-align: middle;
}

.weisser-wrapper-links ul li,
.hellblauer-wrapper-links ul li 
{
    background: url(/wp-content/uploads/2025/08/kreuz-rot.svg) no-repeat 0px -4px  transparent;
}

.hellblauer-wrapper-rechts ul li 
{
    background: url(/wp-content/uploads/2025/08/haken-gruen-weiss.svg) no-repeat 0px -4px  transparent;
}

.card-p-wrapper p {
	padding: 0 10px 0 20px;
}

/* Angebot */
.kopfbild-zeile-2-raster-2 {
	border-top: 10px solid #ffffff !important;
}

/* Konzeption */

.grosser-kreis {
	width: 250px !important;
	height: 250px;
	border-radius: 50%;
	border: 4px solid #000000 !important;
	margin-top: 10px !important;
	margin-bottom: 16px;
}

.grosser-kreis p {
	margin: 0;
	position: absolute;
	width: 80%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 36px;
	line-height: 1.3;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif;
}

.bild-align-right .avia-image-container.avia-align-right {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

@media only screen and (max-width: 515px) {
	.grosser-kreis {
		height: 150px;
		width: 150px !important;
	}
	
	.grosser-kreis p {
		font-size: 22px;
	}
}

@media only screen and (max-width: 356px) {
	.grosser-kreis {
		margin-left: calc(50% - 75px) !important;
	}
}

/* Barrierefrei */
/* Barrierefrei, der h1-h3-Quellcode-Ausschnitt */
.beispiel-h1-h2-h3 {
	margin-top: 20px !important;
	margin-bottom: 40px !important;
}

.beispiel-h1-h2-h3 p {
	margin: 0;
	font-family: Courier, Monospace;
	font-size: 0.83em;
	background-color: #f4f4f4;
	padding-top: 5px;
	padding-right: 2px;
	padding-bottom: 3px;
	line-height: 1.8;
	text-indent: -28px;
}

.beispiel-h1-h2-h3 section:nth-child(odd) p {
	background-color: #e8e8e8;
}

.beispiel-h1-h2-h3 .ha1 p {
	padding-left: 40px
}

.beispiel-h1-h2-h3 .ha2 p {
	padding-left: 68px
}

.beispiel-h1-h2-h3 .ha3 p {
	padding-left: 96px
}

.beispiel-h1-h2-h3 p strong {
	color: #1d3076 !important;
}

.rund2 {
	margin-top: 0 !important;
	border-radius: 50%;
	height: 260px;
    width: 260px !important;
	position: relative;
	left: 58% !important;
    text-align: center;
	top: -16px !important;
}

.rund2 p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    line-height: 1.4;
	color: #020339 !important;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
}

/* vegane Websites (Startseite) */
.rund-vegan {
    left: -30% !important;
	top: -36px !important;
	z-index: 90; !important;
}

/* barrierefrei, Beispiel Ffm Hbf */
.eingeschraenkt-wrapper {
	margin-top: 34px;
	margin-bottom: 40px;
} 

.eingeschraenkt {
	background: #ffc000;
	margin-right: 10px;
	line-height: 2.4em;
	padding: 8px 14px 6px;
	border-radius: 30px
}

.beispiel-ffm-hbf .alttext {
	background: #dfdfdf;
	padding: 8px 24px 6px;
}

.erklaertext-weiss {
    margin-top: 20px;
    background: #ffffff;
    padding: 2px 16px 0px;
    border: 1px solid #afafaf !important;
}

.beispiel-ffm-hbf .avia-image-container.avia-align-left {
	margin-right: 0;
}

.orange {
	background-color: #ffbb00;
}

.demo-formular-abbrechen {
	margin: 10px 0 26px 0 !important;
	max-width: 460px;
	background-color: #ffcc00;
	border-radius: 6px;
}

.demo-formular-abbrechen p {
	font-size: 24px;
}

.demo-button-wrapper {
	color: #ffffff;
}

.demo-button {
	display: inline-block;
	width: 180px;
	background-color: #036cb3;
	border-radius: 4px;
	margin: 0;
	padding-top: 5px;
}

.demo-button:first-child {
	margin-right: 30px;
}

@media only screen and (max-width: 500px) {	
	.demo-button-wrapper {
		text-align: center;
	}
	
	.demo-button {
		display: block;
		margin: 0 auto;
	}

	.demo-button:first-child {
		margin: 0 auto;
		margin-bottom: 20px;
	}
}

.font16 {
	font-size: 16px;
}

.font15 {
	font-size: 15px;
}

.taste {
	background: #ffffff;
	border: 1px solid #000000 !important;
	border-radius: 3px;
    margin-right: 6px;
    margin-left: 6px;
    padding: 3px 3px 0 3px;
	white-space: nowrap;
}

.checkliste-barrierefreiheit.maincontent-page h3 {
    font-size: 26px;
    color: #000000 !important;
    margin-top: 70px !important;
    margin-bottom: 1em;
    margin-right: 140px;
	line-height: 1.2em;
    padding: 0.37em 0.4em 0.2em 0.9em;
    background: #ffd000;
    box-shadow: #ffd000 -85px 0px -0px 0px;
    position: relative;
    left: -0.9em;
}

.w200 h3 {
	width: 200px !important;
}

/* die Formulare sind ab Zeile 1620 */


.text-neben-bild-p p,
.text-neben-bild-p img {
	display: inline-block !important;
}

.text-neben-bild .av_textblock_section:nth-child(3),
.text-neben-bild .av_textblock_section:nth-child(6) {
	width: 80%;
	float: left;
}

.text-neben-bild-img {
	width: 16%;
}

.text-neben-bild .avia-image-container.avia-align-right {
	margin-top: 15px;
}

.hinweis-gruene-box {
	margin-left: 10%;
	padding: 0 0.5em 0 0.9em;
	border: 2px solid #00aa00 !important;
	background: #ffffff;
}

.text-neben-bild .flex_column_table {
	margin-top: 10px !important;
	margin-bottom: 30px !important;
}

/* Projekte */
.bk-kachel-projekte {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/kachel_projekte-2.webp);
}

.grundraster.maincontent-page.projekte .av_one_third:nth-child(2) {
	text-align: right;
}

.grundraster.maincontent-page.projekte .av_one_third:nth-child(1) h2 {
	font-size: 26px;
}

.grundraster.maincontent-page.projekte .av_one_third:nth-child(2) p {
	font-size: 16px;
	margin: 4px 10px 1px 10px;
}

.projekt-bildwrapper .avia-image-container.avia-align-right {
	margin-left: 0;
	margin-right: 8%;
	max-width: 840px;
}

.projektumfang-h3 h3 {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 22px;
	color: #1c2461 !important;
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif;
}

.grundraster.maincontent-page.bildzeile .avia-button-center {
	text-align: right;
}

.button-link-sammlung li {
	list-style: none;
	display: inline-block;
	margin-left: 10px;
	margin-top: 0;
}

.button-link-sammlung li a {
	text-decoration: none;
	font-size: 18px;
	line-height: 1.4em !important;
	color: #1c2461;
	transition: all 0.2s ease-in-out !important;
	padding: 6px 10px 3px 10px;
	background-color: #d3e4ef !important;
	white-space: nowrap;
}

.rasterzeile-odd .button-link-sammlung li a {
    background-color: #ffffff !important;
}

.button-link-sammlung li a:hover,
.button-link-sammlung li a:focus-visible {
	background-color: #103976 !important;
	color: #ffffff;
	transition: all 0.2s ease-in-out !important;
}

.button-link-sammlung li a:focus-visible {
	box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
}

.button-projektlink .avia_button_icon {
	left: 12px !important;
	top: 1px;
}

.button-projektlink a:focus {
	background-color: #103976 !important;
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);
	transition: all 0.2s ease-in-out !important;
}

/* nachhaltig und klimafreundlich */
.nachhaltig-icon img {
	margin-top: 30px;
}

.nachhaltig-icon p {
	margin-bottom: 30px;
}

/* Programmierung */
.skip-demo {
	left: 0px !important;
    top: -10px !important;
    background-color: #cc3300 !important;
    color: #ffffff !important;
    z-index: 10 !important;
    position: relative;
    display: block;
    width: 280px !important;
}

/* über mich */
.ueber-mich-kopfzeile h1 {
	font-size: 26px;
	letter-spacing: 0.01em !important;
}

.ueber-mich-kopfzeile h2 {
	font-size: 33px;
	letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin-top: -10px !important;
    margin-bottom: 20px !important;
    margin-right: 140px;
    padding: 0.5em 0.4em 0.3em 0.9em !important;
    background: #ffd000;
    /* background: #ffffff; */
    /* background: transparent !important; */
    box-shadow: #ffd000 -85px 0px 0px 0px;
    position: relative;
    left: -0.9em;
	width: 110%;
}
}

.ueber-mich-kopfzeile p {
	font-size: 23px;
}

.ueber-mich-kopf-bild .avia-image-container.avia-align-left {
	margin-right: 0;
}

.grid-row-container {
	max-width: 1300px;
	margin: 0 auto;
}

.ueber-mich-zeile-2a {
	background: #c6dff0 !important;
}

.ueber-mich-zeile-3 {
	background: #ecf3fa !important;
}

.ueber-mich-zeile-2 h2 {	
	font-size: 36px;
    color: #000000 !important;
    margin-top: 50px !important;
	line-height: 1.3em;
    margin-bottom: 26px;
}

.ueber-mich-zeile-2-h2 {
	border-bottom: 7px solid #ed8049 !important;
	box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

@media only screen and (max-width: 787px) {
	.ueber-mich-zeile-2-textbox {
		width: 96% !important;
	}
}

.arbeitsweise-block-2 {
	margin-top: 122px;
	background: #a0cae2;
	background: #ffffff;
	padding: 16px 36px;
}

@media only screen and (min-width: 768px) {
	/* 4 Startseite */
	.start-drei-sparten h3 {
		min-height: 58px;
	}
	
	.ueber-mich-zeile-2 .block-links p {
		padding-right: 18% !important;
	}
}

.ueber-mich-zeile-3 h2,
.ueber-mich-zeile-4 h2 {	
	font-size: 36px;
    color: #000000 !important;
    margin-top: -90px !important;
    margin-bottom: 1.9em;
    padding: 3.9em 0em 0.4em 0.8em;
    box-shadow: #ed8049 -42px 0px 0px 0px;
    position: relative;
    left: -0.9em;
}

.ueber-mich-zeile-4 h2 {	
    margin-top: -45px !important;
}

.ueber-mich-zeile-3-fakten p,
.ueber-mich-zeile-4-fakten p {
	color: #000000;
}

.ueber-mich-zeile-3-fakten strong,
.ueber-mich-zeile-4-fakten strong {
	line-height: 1.2em;
    position: relative;
    left: -0.4em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 9px 9px 5px 9px;
}

.ueber-mich-zeile-3-fakten strong {
    background: #ffd000;
    box-shadow: #ffd000 -3px 0px -0px 0px;
}

.ueber-mich-zeile-4-fakten strong {
	background: #f17c57;
    box-shadow: #f17c57 -3px 0px -0px 0px;	
}

.ueber-mich-zeile-3-fakten .avia_textblock,
.ueber-mich-zeile-4-fakten .avia_textblock {
	margin-top: 38px;
}

.ueber-mich-zeile-4 {
	background: #ebcfaa !important;
}

@media only screen and (min-width: 1322px) {
	.ueber-mich-zeile-4-mehr {
	padding-left: calc(100% - 605px) !important;
	}
}

@media only screen and (max-width: 1321px) and (min-width: 768px) {
	.ueber-mich-zeile-4-mehr {
		padding-left: 50px !important;
	}
}

.ueber-mich-zeile-4-bilder {
	color: #000000;
}

.ueber-mich-zeile-4-bilder .av-equal-height-column-flextable:last-child p {
	margin-bottom: -10px;
}

.ueber-mich-zeile-4-bilder .av-equal-height-column-flextable {
	margin: 0 !important;
}

.ueber-mich-zeile-4-bilder .avia-image-container.avia-align-left {
	margin-right: 0px;
}

.ueber-mich-zeile-5 {
	background: #3c6b9f !important;
	color: #ffffff !important;
}

.ueber-mich-zeile-5 h2 {	
	font-size: 36px;
    color: #ffffff !important;
    margin-top: 50px !important;
    margin-bottom: 1em;
}

@media only screen and (min-width: 990px) {	
	.rennrad-bilder-row1-col2 {
		background: #e9c9a0;
	}
	
	.rennrad-bilder-row2-col1,
	.rennrad-bilder-row2-col3 {
		background: #efd7b8;
	}
}

/* Kontaktformular */
.bk-kachel-kontakt {
	background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/kachel_kontakt.webp);
}

.block-kopfzeile.kontakt-kopfzeile {
    border-bottom: 30px solid #c6dff0 !important;
}

.grundraster.kontaktformular .av_one_third:nth-child(2) {
	background-color: #c6dff0 !important;
}

.grundraster.kontakt-erstgespraech .av_one_third:nth-child(1) {
	background-color: #ffffff !important;
}

#top label {
    font-weight: 400;
    font-size: 0.94em;
	margin-top: 6px;
	margin-bottom: 1px;
}

.kontakt-erster-satz {
	border-radius: 0 20px 20px 0;
	color: #ffffff;
	padding-right: 0.85em;
	padding-left: 7.5%;
}

.kontaktformular form,
.kontaktformular .kontakt-ergaenzung-p {
	margin-left: 7.5% !important;
}

.av-fields-with-error {
	margin-top: 30px !important;
    font-size: 19px;
    color: #cc3300;
    border: 2px solid #cc3300 !important;
    border-radius: 8px;
}

#top .main_color select {
	border: 1px solid #000000;
}

#top .main_color input[type="text"],
#top .main_color input[type="email"],
#top .main_color textarea {	
	/* font-size: 0.94em !important; */	
	background-color: #ffffff !important;
	font-size: 1.2rem !important;	
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
	padding: 6px 4px 4px 13px !important;
	color: #333333 !important;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	padding: 6px 4px 4px 13px !important;
	border: none;
	background-color: #ffffff !important;
	/* border: 2px solid #ffffff !important; */
	border: 1px solid #7a7a7a !important;
	border-radius: 0 !important;
	font-size: 1.2rem !important;	
	font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
	color: #333333 !important;
}

#top input[type="text"]:hover,
#top input[type="text"]:focus-visible,
#top input[type="email"]:hover,
#top input[type="email"]:focus-visible,
#top .text_input.is_email:hover,
#top .text_input.is_email:focus-visible,
#top textarea:hover,
#top textarea:focus-visible {	
	border: 2px solid #30528f !important;
}

.wpcf7-not-valid-tip {
    font-size: 1.2rem !important;
    display: block;
    margin-top: -13px;
    margin-bottom: 23px;
    color: #000000 !important;
    border: 2px solid #dc3232 !important;
    border-radius: 4px !important;
    padding: 4px 0 0 10px;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    background-color: #ffb900;
}

.wpcf7 form .wpcf7-response-output {
    margin: 3em 0 3em 0;
    border: none;
    background: #87b33f;
    padding: 18px 0 16px 26px;
}

.value_verifier_label {
    bottom: 6px;
    font-size: 0.9em;
}

.main_color input[type='submit'] {
    background-color: #cc3300 !important;
    border: none !important;
    font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif;
    font-size: 22px;
    padding: 14px 32px 12px 32px;
    margin-top: 20px;
}

.main_color input[type='submit']:hover,
.main_color input[type='submit']:focus {
	background-color: #103976 !important;
}

.main_color input[type='submit']:focus {
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);
}

.avia_ajax_form .form_element_half {
    width: 48.5%;
    margin-left: 3%;
}

.avia_ajax_form .first_form {
    margin-left: 0;
}

/* die Demo-Formulare für Barrierefreiheit */
.formular-1,
.formular-2 {
	background: #ffffff;
	padding: 40px 30px 0 30px;
	margin-right: 8.5%;
	border: 1px solid #b2b2b2 !important;
}

.formular-2 {
	background: #ffffff;
	padding-bottom: 50px;
}

#top .formular-1 input,
#top .formular-2 input {
	background-color: #ffffff !important;
	padding: 6px 6px 2px 8px !important;
	margin-bottom: 0px !important;
}

#top .formular-1 input[type=text],
#top .formular-1 input[type=email] {    
    color: #333333 !important;
	border-bottom: 1px solid #7a7a7a !important;
}

#top .formular-1 input[type=text]:hover, 
#top .formular-1 input[type=text]:focus {
	border-bottom: 1px solid #b2b2b2 !important;
}

#top .formular-1 input[type=text]:focus-visible {
	border: 2px solid transparent !important;
}

#top .formular-1 input[type=text]:hover {
	border: 2px solid transparent !important;
	border-bottom: 1px solid #7a7a7a !important;
}

#top .formular-1 input[type=email]:focus-visible {
	border: 1px solid transparent !important;
}

#top .formular-1 input[type=text]:focus-visible,
#top .formular-1 input[type=email]:focus-visible {
	background-color: #efefef !important;		
	border-bottom: 1px solid #7a7a7a !important;
}

#top .formular-1 input::placeholder {
  color: #444444;
}

#top .formular-2 input[type=email] {    
    color: #333333 !important;
}

#top .formular-2 input[type=text],
#top .formular-2 input[type=email] {			
	border: 1px solid #7a7a7a !important;
	border-bottom: 1px solid #7a7a7a !important;
}

#top .formular-2 input[type=text]:focus-visible,
#top .formular-2 input[type=email]:focus-visible {
	box-shadow: 0 0 0 2px #3052bf !important;
	transition: border 200ms ease-in-out, box-shadow 200ms ease-in-out;
    width: 100%;
}

.formular-2 label {
	min-width: 74px !important;
    display: inline-block !important;
} 

.formular-2 legend {
	font-size: 0.94em !important;
	margin-left: -10px;
    padding-left: 10px;
    padding-right: 10px;
}

.formular-2 .f2-check-boxen:has(:focus-visible) {
	outline: 2px solid #3052bf !important;
	outline-offset: 8px;
	transition: all 0.0s ease-in-out;
}

.formular-2 input[type="radio" i]:focus-visible {
    outline: 2px solid #3052bf !important;
	outline-offset: 3px;
	border-radius: 50%;
}

.formular-2 fieldset {
	border: 1px solid #b2b2b2 !important;
    padding: 0 0 12px 20px;
} 

/* a) (min-width: 1842px)
 *    Die 2. Spalte ist auf 1050px begrenzt, die 3. Spalte ist 24% breit */
@media only screen and (min-width: 1842px) {
	div .logo {
		--widthA: calc(100% - 1050px);
        --widthB: calc(var(--widthA) * 25 / 43);
        width: calc(var(--widthB) + 0px) !important;
	}
	
	/* a) 2.1. Header Grundraster */
	.grundraster .av_one_third:nth-child(2) {
		width: 1050px !important;
	}
	
	.grundraster .av_one_third:nth-child(3)	{
		width: 24% !important;
	}	
	
	.kopfzeile-tausch .av_one_third:nth-child(1) {
		width: 1050px !important;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(2) {
		--widthA: calc(100% - 1050px);
        --widthB: calc(var(--widthA) * 25 / 43);
        width: calc(var(--widthB) + 0px) !important;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(3) {
		width: 18% !important;
	}
	
	.start-cd-block {
		position: relative;
		left: -4%;
	}
	
	/* 4 Starteite */
	.rund-vegan {
		left: 0% !important;
	}
}

@media only screen and (min-width: 1360px) {
	/*  4 Starteite */
	.blauer-wrapper-links,
	.blauer-wrapper-links-hoeher,
	.hellblauer-wrapper-links {
		padding-left: calc(50% - 605px);
	}
	
	.weisser-wrapper-links {
		padding-left: calc(50% - 445px);
	}
	
	.weisser-wrapper-links-blau {
		border-left: 150px solid #ffffff !important;
    padding-left: calc(50% - 595px);
	}
	
	.hellblauer-wrapper-rechts {
		padding-right: calc(50% - 605px);
	}
}

@media only screen and (min-width: 1360px) and (max-width: 1841px) {	
	div .logo {
		width: 25% !important;
	}
}

@media only screen and (min-width: 990px) and (max-width: 1360px) {	
	div .logo {
		width: 26% !important;
	}
}

@media only screen and (max-width: 1200px) {
	.button-erstgespraech-wrapper {
		margin-left: 20% !important;
		width: 80% !important;
	}
}

@media only screen and (max-width: 1016px) {
	.start-weisser-grund-nach-links p {
		display: block;
	}
}

@media only screen and (max-width: 1320px) and (min-width: 768px) {
	.start-drei-sparten .avia_textblock {
		min-height: 110px;
	}
}

@media only screen and (max-width: 860px) and (min-width: 768px) {
	.start-drei-sparten .avia_textblock {
		min-height: 170px;	
	}
	.card-p-wrapper {
		min-height: 100px;
   }	
}

@media only screen and (max-width: 1100px) {
	/* 4 Starteite */
	.start-einschub-gelb {
		border-radius: 26px 0 0 26px;
		margin-left: 40px;
		margin-right: -50px;
		padding-left: 3em;
		padding-right: 56px;
		position: relative;
	}
}

@media only screen and (max-width: 1100px) and (min-width: 768px) {
	/* 4 Starteite */
	.start-drei-sparten .avia_textblock {
		min-height: 142px;
	}
}

/* E) (min-width: 990px) and (max-width: 1360px)
 *    Umschalten auf 2 Spalten */
@media only screen and (min-width: 990px) and (max-width: 1360px) {
	
	/* E) 2.1. Header Grundraster */
	.grundraster .av_one_third:nth-child(1) {
		width: 26% !important;
	}

	.grundraster .av_one_third:nth-child(2) {
		width: 74% !important;
	}

	.grundraster .av_one_third:nth-child(3) {
		display: none;
	}	
	
	.kopfzeile-tausch .av_one_third:nth-child(2) {
		width: 26% !important;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(1) {
		width: 74% !important;
	}
	
	.kopfzeile-tausch .av_one_third:nth-child(3) {
		display: none;
	}
	
	.third-child-bleibt .av_one_third:nth-child(1) {
		width: 26% !important;
	}
	
	.third-child-bleibt .av_one_third:nth-child(2) {
		width: 55% !important;
	}

	.third-child-bleibt .av_one_third:nth-child(3) {
		width: 19% !important;		
	}
	
	.kontrast-beispiel-wrapper {
		padding-right: 4.6% !important;
	}	
}
@media only screen and (max-width: 1360px) {
	.screen-reader-text:focus {
		left: 2%;
	}
	
	/* E) 5.   Barrierfrei, der Button */
	.rund2 {
		top: 40px !important;
	}	
	
	.rund-vegan {
		height: 220px !important;
        width: 220px !important;
        left: -30% !important;
		top: -10px !important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
	.responsive .main_menu ul:first-child > li > a {
		padding: 0;
	}
	
	div .logo {
		width: 40% !important;
	}
	
	.logo img {
		left: 11.5% !important;
		top: 0;
	}
	
	/* 5.4 über mich */
	.rennrad-bilder-row3-col1 {
		width: 66.7% !important;
	}
	
	.rennrad-bilder-row1-col1,
	.rennrad-bilder-row2-col1 {
		width: 0 !important;
	}
	
	.rennrad-bilder-row1-col2,
	.rennrad-bilder-row1-col3,
	.rennrad-bilder-row2-col2,
	.rennrad-bilder-row2-col3 {
		width: 50% !important;
	}
	
	.rennrad-bilder-row2-col2,
	.rennrad-bilder-row2-col3 {
		width: 50% !important;
		padding-bottom: 4px !important;
	}
	
	.rennrad-bilder-row1-col2 {
		background: #f3e1c9;
	}
	
	.rennrad-bilder-row2-col2,
	.rennrad-bilder-row2-col3 {
		background: #f9eddf;
	}	
		
	.rennrad-bilder-row3-col2 {
		background: none;
	}	
	
	.rennrad-bilder-row2-col3 {
		padding-bottom: 80px !important;
	}
}

/* F) (max-width: 989px) Tablet Sprung auf 1 Spalte */
@media only screen and (max-width: 989px) {
	.screen-reader-text:focus {
		left: 50px;
		top: 90px;
		background-color: #cc3300 !important;
		border: 3px solid #cc3300 !important;
		color: #ffffff !important;
	}
	
	div.av-burger-overlay-bg {
		background-color: #111111 !important;
	}
	
	.html_av-submenu-hidden .av-submenu-indicator {
		font-size: 18px;
		opacity: 1;
		top: 46%;
		/* color: red; */
		font-weight: 700;
	}
	
	.av-burger-overlay ul li a:focus .av-submenu-indicator {
		color: #ffffff;
	}
	
	.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
		opacity: 1;
		width: 9px;
		left: 76px;
		top: 47%;
	}
	 
	.av-burger-overlay .sub-menu .avia-menu-text {
		padding-left: 30px;
	}
	 
	.responsive .logo img {
        max-height: 86px !important;
        top: -22px;
    }
	
	.screen-reader-text:focus {
		left: 8%;
		box-shadow: 5px 5px 15px black;
	}	
	
	/* F) 2.   Header fixieren ... */
	.responsive #top #wrap_all #header {
		position: fixed !important;
		height: 70px !important;
	}
	
	.responsive #top #wrap_all .av-logo-container {
		margin: 0;
        width: 100% !important;
		height: 70px !important;
	}
	
	/* F) 2.   ... und alles darunter tiefer setzen */
	
	#main {
		position: absolute;
        top: 70px !important;
	}
	
	.av-hamburger {
		position: relative;
		top: -44px;
        height: 70px;
	}	
		
	.av-burger-menu-main a:focus-visible .av-hamburger {
		background-color: #cc3300;
		padding-left: 6px;
		padding-right: 6px;
		position: relative;
		left: 6px;
		height: 114px;
	}
		
	#main .maincontent-page.grundraster .av_one_third:nth-child(1),
	.projekte .av_one_third:nth-child(2) {
		background-color: #ffffff !important;
	}

	#main .maincontent-page.rasterzeile-odd.grundraster .av_one_third:nth-child(1),
	#main .maincontent-page.rasterzeile-odd.grundraster .av_one_third:nth-child(2) {
		background-color: #e5f0f8;
	}

	#main .maincontent-page.rasterzeile-odd.grundraster.projekte .av_one_third:nth-child(1),
	#main .maincontent-page.rasterzeile-odd.grundraster.projekte .av_one_third:nth-child(2),
	#main .maincontent-page.rasterzeile-odd.grundraster.rasterzeile-odd .av_one_third:nth-child(1),
	#main .maincontent-page.rasterzeile-odd.grundraster.rasterzeile-odd .av_one_third:nth-child(2) {
		background-color: #d3e6f3 !important;
	}	
	
	#main #kopfzeile-tausch .av_one_third:nth-child(1),
	#main .maincontent-page.grundraster.rasterzeile-odd.projekt-kopfzeile .av_one_third:nth-child(2) {
		background-color: #ecf3fa !important;
	}
	
	#kopfzeile-tausch .av_one_third:nth-child(2) {
		background-color: #d3e6f3 !important;
	}
	
	#main .maincontent-page.rasterzeile-odd.grundraster.checkliste-barrierefreiheit.weiss .av_one_third:nth-child(2) {
		background-color: #ffffff !important;
	}
	
	/* F) 3.3. Main häufige Elemente */
	.auf-tablet-weg {
		display: none !important;
	}
	
	.inhaltsverzeichnis {
		border-bottom: none !important;
	}
	
	.inhaltsverzeichnis ol,
	.inhaltsverzeichnis h2 {
		margin-left: 40px !important;
	}
	
	.inhaltsverzeichnis .avia-image-container.avia-align-left .avia-image-container-inner {
		padding-right: 15%;
	}
	
	.inhaltsverzeichnis .avia-image-container.avia-align-left img {
		height: 32px;
	}

	.block-kopfzeile {
		background-color: #ecf3fa !important;
		border-bottom: none !important;
	}
	
	.block-kopfzeile-impressum {
		background-color: #ffffff !important;
	}
	
	.impressum-datenschutz {
		background-color: #ffffff !important;
	}
		
	.kopfbild-zeile-2-raster-2 {
		border-top: 10px solid #a00000 !important;
	}
	
	.kreis {
		top: 50px;
		left: 4.6%;
		width: 64px;
		height: 64px;
	}
	
	.kreis p {
		font-size: 36px;
	}	
	
	.button-erstgespraech-wrapper {
		margin-left: 20% !important;
		width: 90% !important;
	}
	
	/* F) 2.4. Unterseiten */
	/* Startseite */
	
	.bk-braune-balken {
		background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/09/startschmal990.webp);		
	}
	
	.nutzer-box img {
		width: 90px;
	}
	
	.rund-meine-werte {
		height: 210px;
		width: 210px !important;
	}
	
	.rund-meine-werte h2 {
		font-size: 27px !important;
		transform: translate(0%, 60%);
	}
	
	.weisser-wrapper-links {
		padding-left: 80px;
	}
	
	.weisser-wrapper-links-blau {
		border-left: 0px !important;
		padding-left: 80px;
	}
	
	.start-img-cd img {
		width: 60%;
	}
	
	/* E) 5.   Barrierfrei, der Button */
	.rund2 {
		height: 220px !important;
        width: 220px !important;
        left: calc(100% - 250px) !important;
		top: -26px !important;
	}
	
	.rund2 p {
		font-size: 22px;
	}
	
	.rund2 {		
		top: -12px !important;
	}
	
	.rund-vegan {
		left: calc(100% - 270px) !important;
		top: 0px !important;
	}
	
	.checkliste-barrierefreiheit-ff .av_one_third:first-child {
		display: none !important;
	}
	
	/* F) Projekte */
	.bk-kachel-projekte {
		background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/06/kachel_projekte_quer-1.webp);		
	}
	
	.button-link-sammlung {
		text-align: left !important;
	}
	
	.button-link-sammlung ul {
		margin-left: 0;
	}
	
	.button-link-sammlung li {
		margin-left: 0;
		margin-right: 10px;
	}
	
	/* Kontakt */	
	.bk-kachel-kontakt {
		background-image: url(https://christof-deinhard.de/wp-content/uploads/2025/09/kachel_kontakt_quer-3.webp);		
	}
	
	.block-kopfzeile.kontakt-kopfzeile {
		border-bottom: none !important;
	}
	
	.bk-braune-balken .flex_cell_inner,
	.bk-kachel-projekte .flex_cell_inner,
	.bk-impressum .flex_cell_inner,
	.bk-datenschutz .flex_cell_inner,
	.bk-kachel-kontakt .flex_cell_inner	{
		height: 33px;
	}
	
	.bk-kachel-projekte p {
		margin: 0;
	}
	
	.grundraster.maincontent-page.projekte .av_one_third:nth-child(1) {
		text-align: left;
	}
	
	.grundraster.maincontent-page.projekte .av_one_third:nth-child(1) .av_textblock_section {
		margin: 0 10px 10px 0;
	}
	
	.avia-buttonrow-right {
		text-align: left;
	}
	
	.grundraster.maincontent-page.bildzeile .avia-button-center {
		text-align: center;
	}
	
	.projektumfang-h3 h3 {
		text-align: left !important;
		margin-top: 10px;
	}

	.interne-projekt-buttons .avia-button {
		margin-left: 0 !important;
		margin-right: 10px !important;
	}
	
	.padding-right-8-5-prozent {
		padding-right: 0;
	}
	
	/* F) 5.4. über mich */
	.ueber-mich-zeile-2-textbox {
		width: 77% !important;
	}
	
	/* F) 7 Kontakt */
	.kontaktformular form,
	.kontaktformular .kontakt-ergaenzung-p {
		margin-left: 4.6% !important;
	}
	
	.kontakt-erster-satz {
		padding-left: 5.5%;
	}	
}

/* Startseite drei Sparten */
@media only screen and (max-width: 858px) {	
	.start-drei-sparten-p {
		height: 176px;
	}
}

@media only screen and (max-width: 947px) {	
	.start-drei-sparten h3 {
		height: 86px;
	}
}

/* H)
 * All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {	
	.responsive #top .logo {
        max-height: 70px !important;
    }
	
	.auf-mobil-weg {
		display: none !important;
	}
	
	/* H) 3.1. Main Grundraster */
	.grundraster .av_one_third:nth-child(1) {
		/* width: 100% !important; */
	}
	
	/* H) 3.3. Main häufige Elemente */
		
	.kopfbild-mobil-schmaler .avia-image-overlay-wrap img {
		height: 150px;
        object-fit: cover;
	}
	
	.block-kopfzeile p {
		font-size: 22px;
	}
	
	.block-kopfzeile .p-regular p {
		font-size: 20px;
		font-family: 'myriadpro-regular', Helvetica, Arial, sans-serif !important;
		line-height: 1.4;
	}

	.kreis {
		left: 40px;
	}
	
	.responsive #scroll-top-link {
		display: block;
	}
	
	#scroll-top-link {
		right: 20px;
		bottom: 30px;
	}
	
	.button-erstgespraech-wrapper {
		margin-left: 10% !important;
		width: 98% !important;
	}
	
	.grosser-kreis {
		margin-left: 20px !important;
		height: 190px;
		width: 190px !important;
	}
	
	.grosser-kreis p {
		font-size: 26px;
	}
	
	/* H) 5    Unterseiten */	

	.block-kopfzeile.konzeption p, 
	.block-kopfzeile .zweiter-text p {
		font-size: 21px !important;
		font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
		font-weight: 400 !important;
		line-height: 1.5;
	}

	.block-kopfzeile.halbbild h1,
	.block-kopfzeile.halbbild p {
		margin-left: 40px;
		margin-right: 40px;
	}
	
	/* H) 4 Startseite */
	.start-drei-sparten:not(:last-child) {
		margin-bottom: 8% !important;
	}
	
	.start-drei-sparten h3 {
		min-height: 58px;
	}
	
	.start-einschub-gelb {
		margin-right: -8.6%;
		padding-right: 28px;
	}
	
	.start-klingt-gut h2 {
		text-align: left !important;
		font-size: 2.3em !important;
	}
	
	.weisser-wrapper-links-blau {
		border-left: 0px !important;
		border-bottom: 0px !important;
		width: 85% !important;
		padding-left: 80px;
		padding-top: 8px;
		padding-bottom: 5px;
	}
	
	.nutzer-box .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
		margin-top: 0px !important;
	}
	
	.start-img-cd img {
		margin-left: 40px;
	}
	
	.start-cd-block .der-text p {
		padding-right: 10%
	}
		
	/* H) Projekte */		
	.responsive #top #wrap_all .bildzeile.av-flex-cells .no_margin {
		padding: 0 20px 0 0 !important;
	}
	
	.projekt-bildwrapper {
		margin-left: 40px !important;
	}
	
	.projekt-bildwrapper .avia-image-container.avia-align-right {
		margin-right: 20px;
	}
	
	.button-projektlink {
		margin-top: 34px !important;
		margin-right: -30px !important;
	}
	
	/* H) 5.3. Barrierefrei */
	.kontrast-beispiel .av_textblock_section:first-child {
		display: inline-block;
		width: 58%;
	}

	.kontrast-beispiel .av_textblock_section:last-child {
		font-size: 20px;
		width: 38%;
	}
	
	.checkliste-barrierefreiheit.maincontent-page h3 {
		margin-right: 10% !important;
	}
	
	.text-neben-bild-img {
		width: 22%;
	}
	
	/* H) 5.4. über mich */
	.arbeitsweise-block-2 {
		margin-top: 0px;
	}
	
	.ueber-mich-zeile-4-mehr {
		padding-left: 7.5% !important;
	}
	
	.ueber-mich-zeile-4-bilder .flex_column_table:first-child {
		display: flex !important;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	
	.ueber-mich-zeile-4-bilder .flex_column_table:first-child .rennrad-bilder-row1-col2 {
		order: 2;
	}
	
	.ueber-mich-zeile-4-bilder .flex_column_table:first-child .rennrad-bilder-row1-col3 {
		order: 1;
	} 
	
	.ueber-mich-zeile-4-bilder .flex_column_table:first-child p {
		text-align: left !important;
	}
	
	.ueber-mich-zeile-4-bilder .avia-image-container {
		max-width: 250px;
	}
	
	.rennrad-bilder-row3-col2 {
		max-width: 480px;
	}
	
	/* H) 7 Kontaktformular */
	.avia_ajax_form .form_element {
        width: 100%;
        clear: both;
        margin-right: 0;
        margin-left: 0;
        float: none;
    }
	
	.kontaktformular form,
	.kontaktformular .kontakt-ergaenzung-p {
		margin-left: 40px !important;
	}
	
	.kontakt-erster-satz {
		padding-left: 40px;
	}
}

@media only screen and (max-width: 640px) {
	.button-erstgespraech-wrapper {
		width: 100% !important;
		padding-right: 40px !important;
	}
}

@media only screen and (max-width: 570px) {
	.block-meine-werte h3 {
		width: 96%;
		padding-right: 1em;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {	
	div .logo {
		width: 40% !important;
	}
	
	.logo img {
		left: 40px !important;
		top: 0;
	}
}

@media only screen and (max-width: 496px) {
	.start-einschub-gelb {
		margin-left: 30px;
		margin-right: -8.6%;		
	}
	
	.button-erstgespraech-wrapper {
		margin-left: 0 !important;
		width: 110% !important;
		padding-right: 8.5% !important;
	}
}

/* I) (max-width: 479px) */
@media only screen and (max-width: 479px) {
	div .logo {
		width: 50% !important;
	}
	
	.logo img {
		left: 16% !important;
		top: 0;
	}
	
	/* I) 3.3. Main häufige Elemente */
	.inhaltsverzeichnis ol,
	.inhaltsverzeichnis h2 {
		margin-left: 8% !important;
	}
	
	.kreis {
		left: 8%;
	}
	
	/* I) 4 Startseite */
	.nutzer-box img {
		width: 80px;
		margin-bottom: 30px;
	}
	
	.start-img-cd img {
		margin-left: 8%;
	}
	
	.rund-meine-werte h2 {
		transform: translate(0%, 60%);
	}
	
	/* I) 5    Unterseiten */
	.block-kopfzeile.halbbild h1,
	.block-kopfzeile.halbbild p {
		margin-left: 8%;
		margin-right: 8%;
	}	
	
	/* Projekte */		
	.projekt-bildwrapper {
		margin-left: 8% !important;
	}
	
	/* I) 5.   Barrierefrei, der Button */
	.rund2 {
		height: 190px !important;
        width: 190px !important;
		left: calc(100% - 200px) !important;
	}

	.rund2 p {
		font-size: 20px;
	}
	
	.checkliste-barrierefreiheit.maincontent-page h3 {
		margin-right: 0 !important;
	}
	
	.text-neben-bild-img {
		width: 30%;
	}
	
	/* I) 5.4. über mich */
	.arbeitsweise-block-2 {
		padding: 16px 24px;
	}
	
	.ueber-mich-zeile-3 h2,
	.ueber-mich-zeile-4 h2 {
		padding: 3.9em 0em 0.4em 0.4em;
		left: -0.4em;
	}
	
	/* I) 7 Kontakt */
	.kontaktformular form,
	.kontaktformular .kontakt-ergaenzung-p {
		margin-left: 8% !important;
	}
	
	.kontakt-erster-satz {
		padding-left: 8%;
	}
}

@media only screen and (max-width: 430px) {
	.start-weisser-grund p {
		display: block;
	}
}

@media only screen and (max-width: 330px) {
	.block-meine-werte h3 {
		margin-right: 10px;
		left: 0:
	}
}

/* Schieberegler */
.deselect {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.responsiv-bk {
	padding-top: 10px;
    padding-bottom: 30px;
	height: 620px;
}

.responsivkasten {
	height: 460px;
	margin-top: 50px;
	margin-left: 0px;
	margin-bottom: 0px;
	
}

#dk {
	width: 100%;	
}

.rkX {
	position: relative; 
	margin-left: 0px;
	width: 100%;
	height: 100px;
	clear: left;
}

.knopfX {
	position: relative;
	top: 36px;
	background-image: url("https://christof-deinhard.de/wp-content/uploads/2024/08/schiebe-regler.svg");
	background-repeat: no-repeat;
	width: 68px;
	height: 46px; 
	padding: 0px; 
	z-index: 5; 
	cursor: w-resize;
	left: calc(90% - 38px);
}

.reglerX {
	height: 28px;
}

.cursorX {
	cursor: w-resize;
}

#passivX {
	position: relative;
	width: 100%;	
	height: 28px;
	z-index: 0;
}

#aktivX {
	position: relative;
	top: -39px;
	left: 0px;
	width: calc(90% - 7px);
	height: 28px;
	z-index: 1; 
}

#display {
	position: relative;
	background-color: #f9ebcd;
	width: 90%;
	height: 385px;
	border: 4px solid #555;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 2px 4px 4px #888;
}

.zweidrittel {
	width: 53%;	
	padding-left: 5%;
	padding-right: 2%;
	float: left;
	margin-top: 32px;
}

.eindrittel {
	width: 44%;
	float: left;
	padding-right: 8px;
	margin-top: 32px;
}

.eindrittel img {
	margin-top: 16px;
}

.txtdisplay {
	font-size: 18px;
	line-height: 1.32;
	margin-top: 16px;
	margin-bottom: 10px;
	width: 95%;
}

.zweidrittel .txtdisplay:last-child {
	margin-top: 28px;
}

/* das Displaymenü */
.displayband {
	text-align: right;
	background: #358300;
	height: 44px;
	box-shadow: 0px 0px 6px #333; 
}

#displaymenu {
	margin: 0 2px 0 0;	
	position: relative;
}

ul#displaymenu li {
    display: inline-block;
    position: relative;
	margin-left: -2px;
    margin-right: -2px; 
}

ul#displaymenu li p {
	padding: 15px 12px 0px 10px;
    font-size: 17px;
    color: #ffffff;
    margin: 1px -2px 0 0;
    line-height: 1.3;
    text-decoration: none;
    display: inline-block;
    border-bottom: 4px solid #e0ffde;
}

ul#displaymenu li:first-child {
    display: none;
    }
	
ul#displaymenu li:last-child > p {
    padding-right: 30px;
	letter-spacing: 0.04em;
}
	
ul#displaymenu.responsive li:not(:first-child) {
	display: none;
} 

ul#displaymenu.responsive li:first-child {
	display: block;
	float: right;
	margin-top: 11px;
	margin-right: 5%;
}

#zweidrittel.responsive {
	width: 100%;
	padding-left: 6%;
	margin-top: 10px;
	margin-bottom: 0px;
}

#eindrittel.responsive {
	width: 100%;
	padding-left: 6%;
	padding-right: 6%;
	margin-top: 6px;	
}

#eindrittel.responsive img {
	margin-top: 0px;	
}

.txtdisplay.responsive {
	display: none;
}	

.erklaertext-grau {
	margin-top: 30px;
	background: #dfdfdf;
    padding: 8px 24px 6px;
}

/* für single-blume.php */
.single-blumen-wrapper {
	margin-bottom: 50px;
}

.single-blumen-wrapper .blumen-bild,
.single-blumen-wrapper .blumen-text {
	display: inline-block;
}

.single-blumen-wrapper .blumen-bild img {
	border-radius: 10px;
	margin-bottom: 30px;
}

.single-blumen-wrapper .blumen-text {
	padding-left: 50px;
	line-height: 1.7em;
    position: relative;
    top: -44px;
}

.single-blumen-wrapper .blumen-text h1 {
	color: #2c4d8b !important;
}

.single-blumen-wrapper .blumen-text .botanischer_name {
	font-style: italic;
}

.single-blumen-wrapper .blumen-beitrag {
	font-family: 'myriadpro-semibold', Helvetica, Arial, sans-serif !important;
}

.single-blumen-wrapper hr{
	border: 1px solid #2c4d8b !important;
}

@media only screen and (max-width: 989px) {
	.single-blumen-wrapper .blumen-bild,
	.single-blumen-wrapper .blumen-text {
		display: block;
	}
	
	.single-blumen-wrapper .blumen-text {
		padding-left:0;
		top: 0;
	}
}
/* Ende für single-blume.php */