/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Stefanie Murphy
 Author URI:   https://murphydesignsolutions.de/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	--radius: 1rem;
	--header-block-padding: 1.6rem;
	--header-inline-padding: 2rem;
	--seite-block-padding: 2.2rem;
	--seite-inline-padding: 1.4rem;
	--frame-block-padding: 1.4rem;
	--frame-inline-padding: 1.2rem;
	--sidebar-block-padding: .3rem;
	--h1-datenschutz: 2rem;
	--h2-datenschutz: var(--h1-datenschutz);
	--h3-datenschutz: 1.6rem;
	--h4-datenschutz: var(--p-body);
	--h1-post: 2.2rem;
	--extra-small: 1.2rem;
	--meta-post: 1.3rem;
	--font-weight-light: 300;
	--p-body: 1.4rem;
	--line-height-main: 1.8rem;
	--p-body-weight: 800;
	--list-title: 1.6rem;
	--list-item: 1.4rem;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-off-black: #333333;
	--color-bg: #F5F5F5;
	--color-gray: #6C6C6C;
	--color-light-gray: #b8b8b8;
	--color-orange: #ff8800;
	--color-yellow: #FFD64F;
	--color-highlight: #0a0571;
	--color-shadow: #acacac;	
	--color-menu: #0377a7;
	--color-menu-hover: #000;
	--color-hellgrau-1: #f5f5f5;
	--color-hellgrau-2: #ececec;
	--color-hellgrau-3: #e3e3e3;
	--balloon-color: red;
	--gap-m: 3.5rem;
	--gap-s: 1.5rem;
	--gap-smaller: 1rem;
	--gap-menu: 1.8rem;
}

.header-phone-email {
	font-style: italic;
	font-weight: 900;
	color: var(--color-gray);
	font-size: calc(var(--p-body)*1.2);
	letter-spacing: -0.05rem;
}

body {
	font-family: Verdana,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
	Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;}

/* tree view list start */

ul.tree {
    list-style: none;
    line-height: 2em;
}

ul.tree summary {
    cursor: pointer;
}

ul.tree summary::marker {
    content: "";
}

ul.tree summary::-webkit-details-marker {
    content: "";
}

ul.tree li {
    position: relative;
	list-style: none;
}

ul.tree li::before {
    position: absolute;
    left: -10px;
    top: 0px;
    border-left: 2px solid gray;
    border-bottom: 2px solid gray;
    content: "";
    width: 10px;
    height: 1em;
}

ul.tree li::after {
    position: absolute;
    left: -10px;
    bottom: 0px;
    border-left: 2px solid gray;
    content: "";
    width: 10px;
    height: 100%;
}

ul.tree li:last-child::after {
    display: none;
}

ul.tree > li:after,
ul.tree > li:before {
    display: none;
}

ul.tree summary::before: {
    position: absolute;
    left: -1.25em;
    top: .5em;
    content: "+";
    background: orange;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50em;
    z-index: 999;
    text-align: center;
    line-height: .9em;
}

ul.tree details[open] > summary::before {
    content: "-";
}



/* tree-view list start */

ul.tree-view {
	list-style: none;
    line-height: 2em;
	cursor: pointer;
	color:var(--color-menu);
	font-weight:var(--p-body-weight);
}

ul.tree-view-3 {
	list-style: none;
    line-height: 2em;
	cursor: pointer;
	color:var(--color-menu);
	font-weight:var(--p-body-weight);
}

ul.tree-view li {
    position: relative;
	list-style: none;
}

ul.tree-view-3 li {
    position: relative;
	list-style: none;
}

ul.tree-view li::before {
    position: absolute;
    left: -10px;
    top: 0px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    content: "";
    width: 10px;
    height: 1em;
}

ul.tree-view-3 li::before {
    position: absolute;
    left: -10px;
    top: 0px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    content: "";
    width: 10px;
    height: 1em;
}


ul.tree-view-4 li::before {
	position: absolute;
    left: -10px;
    top: 0px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    content: "";
    width: 20px;
    height: 1em;
}


ul.tree-view li::after {
    position: absolute;
    left: -10px;
    bottom: 0px;
    border-left: 1px solid gray;
    content: "";
    width: 10px;
    height: 100%;
}

ul.tree-view-3 li::after {
    position: absolute;
    left: -10px;
    bottom: 0px;
    border-left: 1px solid gray;
    content: "";
    width: 10px;
    height: 100%;
}

ul.tree-view li:last-child::after {
    display: none;
}

ul.tree-view-4 li:last-child::after {
    display: none;
}


/* End tree view list end */

.tier1::before {
    position: absolute;
    left: 1.25em;
	top:1.2rem;
    content: "+";
    background: var(--color-orange);
	border: 1px solid gray;
    display: block;
    width: 14px;
    height: 14px;
    z-index: 9;
	font-weight:600;
    text-align: center;
    line-height: .6em;
	font-weight: 400;
}

.tier1:hover::before {
    content: "+";
	background: var(--color-menu);
	color: white;
}

.tier1:hover {
	color: var(--color-menu);
}

/* tree-list start */



.li-no-style {
	list-style: none;
}


ul.tree-list li {
            padding-left: 2rem; /* Platz für das Icon */
            background-image: url('https://website-update.wordpressplus.de/wp-content/uploads/2024/04/icon-document-s.png');
            background-repeat: no-repeat; 
            background-position: left center; /* Bild links zentriert positioniert */
            background-size: 1.3rem 1.7rem; /* Größe des Hintergrundbilds anpassen */			
        }

ul.tree-list {
	list-style: none;
    line-height: 32px;
	cursor: pointer;
	color:var(--color-menu);
	font-weight:var(--p-body-weight);
	padding-left: 7rem;
}

ul.tree-list li {
    position: relative;
	list-style: none;
}

ul.tree-list li::before {
    position: absolute;
    left: -10px;
    top: -19px;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    content: "";
    width: 10px;
    height: 36px;
}

ul.tree-list li::after {
    position: absolute;
    left: -10px;
    bottom: 0px;
    border-left: 1px solid gray;
    content: "";
    width: 10px;
    height: 100%;
}


.thema-title:hover {
	color: var(--color-menu);
}

.thema-title {
	background-color: transparent;
	font-size: var(--list-title);
	font-weight: 900;
	color: var(--color-menu);
	padding: 0 0 .5rem 0;

}

.thema-list-item {
	font-size: var(--list-item);
	font-weight: 900;
}

.thema-list-beschreibung {
	font-size: var(--p-body);
	font-weight: 300;
	font-style: italic;
	padding-bottom: 2rem;
	background-color: var(--color-bg);
	padding-bottom: 1rem;
	z-index: 99;
}

/* tree-list end */

.breadcrumbs::before {
    content: "Wegweiser: ";
	font-weight: 400;
	color: var(--color-menu);
}

.page-frame {
	padding: var(--frame-block-padding) var(--frame-inline-padding);
	background-color: var(--color-bg);
	border: 1px solid var(--color-light-gray);
	border-radius: 1rem;
}

.page-frame-white {
	padding: var(--frame-block-padding) var(--frame-inline-padding);
	background-color: white;
	border: 1px solid var(--color-hellgrau-3);
	border-radius: 1rem;
}

.page-frame-post {
	padding: var(--frame-block-padding) var(--frame-inline-padding);
	background-color: var(--color-bg);
	border: 1px solid var(--color-hellgrau-3);
	border-radius: 1rem;
}

.page-frame-square {
	padding: var(--frame-block-padding) var(--frame-inline-padding);
	background-color: var(--color-hellgrau-2);
	border-bottom: 1px solid var(--color-light-gray);
	border: 0px solid var(--color-light-gray);
	border-radius: 0rem;
	font-weight: 600;
}


.page-content h1 {
	font-size: var(--h1-datenschutz);
}

.page-content h2 {
	font-size: var(--h1-datenschutz);
}

.page-content h1,h2,h3 {
	color: var(--color-highlight);
}

.page-content h3 {
	font-size: var(--h3-datenschutz);
}

.page-content h4 {
	font-size: var(--h4-datenschutz);
}

.page-content p, .page-content ul{
	font-size: var(--p-body);
	font-weight: 400;
	color: var(--color-black);
}

.page-content a{
	color: blue;
	text-decoration: underline;
}

.page-content-impressum h2 {
	font-size: var(--h3-datenschutz);
}

.source {
	font-size: var(--extra-small);
	color: var(--color-highlight);
}

.bricks-mobile-menu {
  width: 100%; /* Ensure the menu spans the entire width */
}

.main-container-padding {
	padding: var(--seite-block-padding) var(--seite-inline-padding);
}

ul.tree-list li:last-child::after {
    display: none;
}

/* Output Containter Styles */

.output-container-styles {
	font-size: var(--p-body);
	font-weight: 400;
	padding: var(--frame-block-padding) var(--frame-inline-padding);
}

.dropdown {
	background-color: transparent;
}

/* Posts */

.screenshot {
	border: 1px solid var(--color-gray);
	border-radius: .5rem;
	padding: var(--frame-block-padding);
}

.posts-allgemein img {
		border: 1px solid var(--color-hellgrau-3);
	border-radius: .5rem;
	padding: var(--frame-block-padding);
}

.posts-allgemein h1 {
	font-size: var(--h1-datenschutz);
	color: var(--color-menu);
}

.posts-allgemein h3 {
	font-size: var(--h3-datenschutz);
	color: var(--color-menu);
}

.posts-allgemein p {
	font-size: var(--p-body);
	font-weight: 400;
}

.post-content-meta {
	font-size: var(--meta-post);
	font-weight: 400;
	color: var(--color-gray);
}

.post-content div {
	font-size: var(--meta-post);	
	font-weight: 600;
	color: var(--color-gray);
}