/*!
Theme Name: sbe
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sbe
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sbe is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root 
{
	--sbe-red-dark: #AD5353;	
	--sbe-red: #c95f5f;
	--sbe-red-light: #E26F6F;
	--sbe-red-op5: rgba(201, 95, 95, 0.5);
}

html
{
	font-size: 16px;
}

*
{
	max-width: 100%;
}

.contact-icons
{
	position:fixed;
	right: 10px;
	bottom:10%;
	display:grid;
	text-align: right;
}

.contact-icons .flyout
{
	font-size:0px;
}

.contact-icons div:hover .flyout
{
	font-size: 1em;
}

.contact-icons .flyout-parent i,
.contact-icons .flyout-parent span
{
	background-color: red;
}

.contact-icons .flyout-parent i
{
	border-radius: 50%;
	padding: 0.5em;
}

.flyout-info
{
	
}

article .wb-auto
{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.sbe-container
{
	padding-top: 12rem !important;
    padding-bottom: 12rem !important;
}

.section-header-container
{
	margin-bottom: 7em;
}

.section-header-line,
.section-header-line-light
{	
	line-height: 2em;
}

.section-header-line::before,
.section-header-line-light::before 
{
    content: '';
    width: 75%;
	min-width: 100px;
    border-bottom: solid 5px var(--sbe-red-light);
    position: absolute;
    z-index: 1;
    top: 120%;
	left: 0px;
}

.section-header-line::after,
.section-header-line-light::after
{
	content: '';
	margin-left: 0px;    
    width: 50px;
    border-bottom: 5px solid var(--sbe-red-dark);
	z-index: 1;
	position: absolute;
	top: 120%;
	left: 0px;
}

.section-header-line-light::before
{
	border-bottom: solid 5px white;    
}

.dropdown-item,
a.nav-link 
{
	font-size: 1.25em;
	font-weight: bold;
	color: var(--sbe-red) !important;	
	padding-left: 0.75em !important;	
	padding-right: 0.75em !important;	
}

@media (min-width: 992px) 
{
	a.nav-link:hover span
	{
		text-decoration: underline;
	}
}

.nav-contact
{
	padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out;
	color: rgba(0,0,0,.55);
    border-color: rgba(0,0,0,.1);
}

.nav-contact a
{
	color: var(--sbe-red);
	font-size: 1.05em;
}

.navbar-light .navbar-toggler-icon 
{
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(201, 95, 95, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

#navigation-top img
{
	max-width:600px;
	width:80%;
}

#navigation-top.fixed-top img
{
	width:30%;
	min-width:150px;
}

.dropdown-item:focus,
.dropdown-item:hover
{
    color: #fff !important;
    text-decoration: underline;
    background-color: var(--sbe-red-light);
}

.dropdown-item.active, 
.dropdown-item:active,
.dropdown-item.active span, 
.dropdown-item:active span
{
    color: #fff !important;
    text-decoration: none;
    background-color: var(--sbe-red);
}


.navbar,
.navbar .fixed-top
{
	background-color: white;
	box-shadow: 0 6px 6px -4px rgb(0 0 0 / 30%) !important;
}

@media (min-width: 992px) 
{
	.site_logo
	{
		max-width: 800px;
		width: 80%;
	}
}

body
{
	font-size: 1.25rem;
}

.font-bold
{
	font-weight: bold;
}

.display-7
{
	font-size: 2.0rem
}

.display-8
{
	font-size: 1.75rem
}

.display-9
{
	font-size: 1.5rem
}

.display-10
{
	font-size: 1.25rem
}

.img-q
{
	padding-top: 100%;
}

.sbe-text
{
	color: var(--sbe-red);
}

.sbe-bg
{
	background-color: var(--sbe-red);
}

.btn-link 
{
    background-color: var(--sbe-red);
    color: white;
    cursor: pointer;
}

.header-intro
{
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 5px;
	color: var(--sbe-red);
	font-weight: bold;
}

.header-intro a:hover
{
	color: white;
}

.entry-header
{
	display: none;
}

.header-text h4
{
	font-weight: bold;
	font-size: 4rem;
	color: rgba(255,255,255,0.7);
	text-shadow: 2px 2px 4px #000000;	
}

.sbe-search-office a,
.sbe-search-office a:hover
{
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	color: white;
}

.sbe-search-office input[type=text]
{
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border: 4px solid var(--sbe-red);
}

.sbe-search-office input[type=text]:focus,
.sbe-search-office input[type=text]:focus-visible
{
	outline: none !important;
	border-color: #FFD800;
}

.search-button,
.search-button:focus,
.search-button:not(.collapsed)
{
	width:auto;
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	color: white;
	background-color: var(--sbe-red);
	outline: none !important;
	box-shadow: none;
}

.search-button:after,
.search-button:not(.collapsed)::after
{
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-search" viewBox="0 0 16 16"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/></svg>'); 
	transform: rotate(0deg);
	color: white;
	
}

#beratungsstellen a
{
	color: var(--sbe-red);
	text-decoration: none;
}

#beratungsstellen a:hover
{
	color: var(--sbe-red);
	text-decoration: underline;
}

/* Seite Beratungsstelle */

/* ----------------- Lebensbereiche --------------------------*/

#lebensbereiche .img-q
{
	transition: transform 1s ease, border-radius 0.25s ease 1s, box-shadow 0.5s;
	box-shadow: 0 0 0;
}

#lebensbereiche .img-q:hover
{
	transition: transform 1s ease 0.25s, border-radius 0.25s, box-shadow 1s ease 0.25s;
	transform: rotate(5deg) scale(1.2);
	border-radius: 50%;
	box-shadow: 3px 3px 3px #515151;
}

#angebot table tr 
{
	margin: 2em;
}

#angebot table tr:nth-child(even) 
{
    background-color: #eee;
}

#angebot table tr:nth-child(odd) 
{
    background-color: var(--sbe-red-light);
}

#angebot table th 
{
	font-size: 0.9em;
	padding: 1em;
    color: white;
    background-color: var(--sbe-red);
	border: 2px solid #eaeaea;
}

#angebot table td 
{
	font-size: 0.85em;
	width: 15em;	
	padding: 0.5em 1em 0.5em 1em;
	border: 0px solid black;
	color: black;
}

.sbe-button,
.sbe-button2
{
	box-shadow: 0px 10px 14px -7px var(--sbe-red-dark);
	background:linear-gradient(to bottom, var(--sbe-red-light) 5%, var(--sbe-red-dark) 100%);
	background-color:var(--sbe-red-light);
	border-radius:8px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:20px;
	font-weight:bold;
	padding:13px 32px;
	text-decoration:none;
	text-shadow:0px 1px 0px var(--sbe-red-dark);
}

.sbe-button
{
	position: absolute;
	left: 15%;
	top: 300px;
}

@media (max-width: 768px)
{
	.sbe-button 
	{
		top: calc(50px + 4em);	
		font-size:16px;
	}
}

.sbe-button:hover,
.sbe-button2:hover
{
	background:linear-gradient(to bottom, var(--sbe-red-dark) 5%, var(--sbe-red-light) 100%);
	background-color:var(--sbe-red-dark);
}

.sbe-button i,
.sbe-button2 i
{
	padding-right: 1em;
}

/* Termin vereinbaren */
#terminvereinbaren .nav-tabs .nav-link
{
	color: #444;
}

#terminvereinbaren .nav-tabs .nav-link:hover
{
	color: var(--sbe-red);
	text-decoration: underline;
}


#terminvereinbaren .nav-tabs .nav-link.active
{
	background: var(--sbe-red);
	color: whitesmoke;
}

/* Aktuelles */
article.post:nth-child(2) .blog-container
{
	background-color: var(--bs-light);
}

.blog-header,
.blog-header span
{
	color: var(--sbe-red);
}

.blog-container h1,
.blog-container h2,
.blog-container h3,
.blog-container h4,
.blog-container h5,
.blog-container h6
{
	padding-top:1em;
	padding-bottom: 1.5em;
}

.blog-header a,
.blog-header a:hover,
.blog-header a:focus,
.blog-header a:active,
.blog-header a:visited,
.blog-navigation a,
.blog-navigation a:focus,
.blog-navigation a:active,
.blog-navigation a:visited,
.blog-container a,
.blog-container a:focus,
.blog-container a:active,
.blog-container a:visited
{
	color: var(--sbe-red) !important;
	text-decoration: none !important;
}

.blog-navigation a:hover,
.blog-header a:hover
{
	text-decoration: underline !important;
}

.blog-navigation
{
	padding-top: 1em;
	padding-bottom: 1.5em;
}

.blog-navigation .nav-links .nav-subtitle
{
	font-weight: bold;
}

.legal-container h1,
.legal-container h2
{
	color: var(--sbe-red);
}

.legal-container h3
{
	color: var(--sbe-red-dark);
}


/* Footer */

#sbe-footer a
{	
	color: white;
	text-decoration-color: white;
	text-decoration: none;
}

#sbe-footer a:hover
{	
	color: white;
	text-decoration-color: white;
	text-decoration: underline;
}

.sbe-footer-adress
{
	color: var(--sbe-red);
}

.sbe-footer-legal,
.sbe-footer-legal a
{
}

.fischer-softwaredesign
{
	color: #336699;
	font-weight: bold;
}

/* Contact buttons */
	.contact-buttons
	{
		position:fixed;
		right: 10px;
		top: 50%;
		display:grid;
		z-index: 99;
		color: white;
	}

	.contact-buttons a,
	.contact-buttons a:hover,
	.contact-buttons a:focus,
	.contact-buttons a:active,
	.contact-buttons a:visited
	{
		color: white;
	}
	
	.info-button
	{
		position: relative;
		opacity: 0.7;
		transition:all 1s ease;
	}
	
	.info-button:hover
	{
		opacity: 1.0;
	}
	
	.info-button 
	{		
		left: calc(100% - 70px);
		width: 50px;
		height: 50px;		
		cursor: pointer;
		border-radius: 50%;
		border: 3px solid var(--sbe-red-dark);
		background: var(--sbe-red);
		margin: 5px;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
		display: flex;
    	justify-content: center;
    	align-items: center;
	}	
	
	.contact-container
	{
		position:absolute;
		right: 50px;
		top: 0px;
		max-width: none;
		height: 0px;
		width: 95vw;	
	}
	
	.contact-info
	{
		position:absolute;		
		background-color: var(--sbe-red);
		right:0px;
		font-size: 0px;
		transition:all 1s ease;
		display:inline-block;
		box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
	}	

	.info-button:hover .contact-info	
	{		
		font-size: 1em;
		margin-right:0.5em;
		padding: 10px;
	}

/* Terminkalender */
.iconbutton,
.iconbutton:hover,
.iconbutton:focus,
.iconbutton:active
{
	color: 	var(--sbe-red);
	font-size: 2em;
	text-decoration: none;
}

/* Auswahl Beratungsstelle */
#beratungsstellewahl a,
#beratungsstellewahl a:focus,
#beratungsstellewahl a:active,
#beratungsstellewahl a:visited
{
	color: var(--sbe-red) !important;
	text-decoration: none !important;
}