/*
Theme Name: BasicDPH
Theme URI: http://designstudio-ph.de/
Author: Designstudio Patrick Heuser
Author URI: http://designstudio-ph.de
Description: Ein super blankes Theme, dass ich als Ausgangsbasis für meine Websites nehme.
Version: 1.0
License: GNU General Public License
*/


/* ---------- Reset -------------------------------------------------------------- */

html {font-size: 62.5%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display: block;}
ol, ul {list-style: none;}
table { border-collapse: separate; border-spacing: 0;}
caption, th, td {font-weight: normal; text-align: left; vertical-align:middle}
a:hover, a:active {outline: 0;}
a img {border: 0;}
a:has(img) {
  border-bottom: none !important;
}
hr{border:none; display:block; height:1px; background-color:#E6E6E6}

/* ----------- Font --------------------------------------------------------------------- */
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/montserrat-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/montserrat-v29-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/montserrat-v29-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/montserrat-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/montserrat-v29-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ---------- HTML-Section -------------------------------------------------------------- */
html {
    font-size: 18px; /* Setzt 1rem auf 18px */
}
body{font-family: "Montserrat", sans-serif; font-weight:400; font-size:1rem; color:#000;}
a{text-decoration:none; color:#000; border-bottom:2px dotted #000}
a:hover{text-decoration:none; color:#bd0926; border-bottom:2px solid #bd0926}
h1{margin-bottom:10px; font-size:2.5rem; font-weight:300; margin-bottom: 0.75em; line-height:1.2; max-width:840px}
.home h1{margin-bottom:0 !important}
h2, span.counter{margin-bottom:10px; font-size:2rem; font-weight:300; margin-bottom: 0.75em; line-height:1.3}
h3, .wp-block-latest-posts.wp-block-latest-posts__list li a.wp-block-latest-posts__post-title, .wps-widget--team .wps-team--member-title{font-size:1.25rem !important; font-weight:400 !important; color:#000 !important; line-height:1.35 !important; font-family: "Montserrat", sans-serif !important;}
h3{display:inline-block; margin-bottom: 0.75em !important;}
h4, .wps-widget--team .wps-team--member-desig {color: #000 !important; font-family: "Montserrat", sans-serif !important; font-size:1rem !important; font-weight:400 !important; margin-bottom: 0.75em !important;}
p, ul, ol, time, .wp-block-file{font-size:1rem; margin-bottom:1.5em; line-height:1.6;}
.wps-team--member-details p{font-family: "Montserrat", sans-serif !important; font-size:1rem !important; font-weight:400 !important; }

b, strong{font-weight:700}
i, em{font-style:italic}
article ul{list-style-type:square; margin-left:20px}

main ul{list-style-type:square; margin-left:20px}
main ul li{margin-bottom:.5em}


/* Standard-Fokus unterdrücken */
:focus {
  outline: none;
}

/* Nur bei Tastatur: sichtbarer Fokus */
:focus-visible {
  outline: 3px solid #f25b28;
  outline-offset: 2px;
}

.n2-ss-slider [tabindex]:focus{
  outline: 3px solid #f25b28 !important;
  outline-offset: 2px !important;
}


/* ------------- Direkt zum Inhalt springen */
.skip-link {
  position: absolute;
  top: -400px;
  left: 0;
  background: #fff;
  color: #333;
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  border-radius: 4px;
  transition: top 0.3s;
  border:2px solid #f25b28
}

.skip-link:focus {
  top: 0;
}


/* -------------- Counter --------------------- */
span.counter{font-family: "Montserrat", sans-serif !important}
.wpsm_counterbox .wpsm_count-title {letter-spacing:0px !important}
.wpsm_counter_b_row{background-color:#fff !important; margin-bottom:1.5em !important;}

/* ------------ YouTube ---------------------------------- */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Format */
  height: 0;
  overflow: auto;
  max-width: 100%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ----------------------- Post Layout ------------------------------------- */
.my-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
}

.my-layout-wrapper .text-column {
    flex: 0 1 calc(60% - 1rem);
}

.my-layout-wrapper .image-column {
    flex: 0 1 calc(40% - 1rem);
}

.my-layout-wrapper .image-column img {
    max-width:100%;
	width:100%;
	height:auto
}

@media (max-width: 768px) {
    .my-layout-wrapper {
        flex-direction: column;
    }

    .text-column,
    .image-column {
        flex: 1 1 100%;
    }
}


.wp-block-latest-posts__featured-image.alignleft{
    margin-right: 0 !important;
}

.wp-block-latest-posts__post-author, .wp-block-latest-posts__post-date {margin-top: 1rem;}



/* ---------- Layout-Helferlein -------------------------------------------------------------- */
.clear{width:100%; height:0; display:block; clear:both}
.wp-block-group{width:100%; padding:3em 2em; box-sizing:border-box}
.wp-block-group.hero, .wp-block-group.xl{padding-top:0 !important; padding-bottom:0 !important}
.wp-block-group__inner-container, .wp-block-group.is-layout-grid, .postcontent{width:1200px; margin:0 auto}
.wp-block-group.xl .wp-block-group__inner-container{width:100%;}

.info .wp-block-group__inner-container, .wpsm_counter_b_row{
    border:1px solid #efefef;
	/*border-left:4px solid #6bbce0;
	border-top:4px solid #f97028;
	border-right:4px solid #b2cb20;
	border-bottom:4px solid #c60827;*/
	padding:20px;
	box-sizing:border-box
}

.wp-block-group-is-layout-grid{
	display: grid !important;
	gap: 1.5rem !important;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
}

.wpsm_counter_b_row{background-color:#b0c91b}

.counterspalte{box-sizing:border-box; padding:0 40px 0 40px; display:flex;}

.counterspalte{
	background-image:url("/wp-content/uploads/2025/06/logobg.png");
	background-position:bottom right;
	background-size:300px; 
	background-repeat:no-repeat
}

ul.counter{
	list-style-type:none;
	margin-left:0;
	margin-top:2em;
	display:flex;
	flex-direction: column;
}

.counter li {
  position: relative;
  padding-left: 30px;
}
.counter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 16px;
  height: 16px;
  background-color: #b0c91b; 
}
.counter li.rot::before {
  background-color: #bd0926; 
}
.counter li.blau::before {
  background-color: #66b8dc; 
}
.counter li.orange::before {
  background-color: #eb6a27; 
}

.sptp-grid .sptp-member-avatar {
  max-width: 300px !important;
  max-height: 300px !important;
}


.kastenbg{
	background-image:url(/wp-content/uploads/2025/07/kastenbg.png);
	background-repeat:no-repeat;
	background-position:bottom right
}

.wp-element-button {
	margin-bottom:40px !important
}


/* --------------------------- Eigener Counter */
/* Container für alle Counter */
.counter-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 20px 0 60px 0;
}

/* Jede einzelne Counter-Box */
.counter-box {
    text-align: center;
    padding: 20px;
	box-sizing:border-box;
    border: 1px solid #efefef;
    border-radius: 10px;
    width: 23%;
    transition: transform 0.3s ease;
	box-shadow: 0 0px 0px rgba(0,0,0,0);
}

/* Hover-Effekt */
.counter-box:hover {
    transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Die Dashicons Icons */
.counter-icon {
    display: flex;                /* Flexbox für zentrierte Ausrichtung */
    justify-content: center;       /* Horizontal zentrieren */
    align-items: center;           /* Vertikal zentrieren */
    margin-bottom: 10px;
    color: #b0c91b;
}

/* Dashicon-spezifische Anpassung */
.counter-icon span.dashicons:before {
    font-size: 80px !important;    /* Skalierung des Dashicons-Icons auf 80px */
}

/* Dashicon-spezifische Anpassung */
.dashicons, .dashicons-before:before {
	font-size: 80px !important;
	height:80px !important;
	width:80px !important
}


/* ---------------------- Latest Posts Liste */
.wp-block-latest-posts__list{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap
}

.wp-block-latest-posts__list li{
	width:31%
}

a.wp-block-latest-posts__post-title{
	border-bottom:2px solid #fff
}

body .wp-block-latest-posts.wp-block-latest-posts__list li a.wp-block-latest-posts__post-title:hover{
	color:#bd0926 !important; border-bottom:2px solid #bd0926
}

.wp-block-latest-posts__featured-image{
}

.wp-block-latest-posts__featured-image img{
	max-width:100% !important
}

.wps-container{margin-bottom:40px !important}

/* Fetter Text */
.counter strong{font-size:1.5em; font-weight:900}


/* News auf Startseite */

.wp-block-latest-posts.wp-block-latest-posts__list li::after {
  content: "";
  display: table;
  clear: both;
}

.wp-block-latest-posts.wp-block-latest-posts__list {
    list-style: none;
	margin-left:0
}

.wp-block-latest-posts.wp-block-latest-posts__list li{
	background-color:#fff;
	margin-bottom:2em;
	box-sizing:border-box;
	border:1px solid #ccc;
}

.wp-block-latest-posts__post-title, time, .wp-block-latest-posts__post-excerpt{
	margin:0 1.25rem;
	display:inline-block
}

.wp-block-latest-posts__post-title{
	margin-top:1.25rem
}

.wp-block-latest-posts__post-excerpt{
	margin-bottom:1.25rem !important
}





/*
.wp-block-latest-posts.wp-block-latest-posts__list li:nth-child(4n+1) {
  border-bottom:4px solid #b0c91b
}
.wp-block-latest-posts.wp-block-latest-posts__list li:nth-child(4n+2) {
  border-bottom: 4px solid #bd0926;
}
.wp-block-latest-posts.wp-block-latest-posts__list li:nth-child(4n+3) {
  border-bottom: 4px solid #66b8dc;
}
.wp-block-latest-posts.wp-block-latest-posts__list li:nth-child(4n+4) {
  border-bottom: 4px solid #eb6a27;
}
*/


.fontred strong{color:#bd0926 !important}


.sponsoren img{width:200px !important}
.sponsoren figure{text-align:center}

.wp-block-file{font-size:1em !important}


/* ---------- Header -------------------------------------------------------------- */
.logo{position:absolute; top:0; right:2em; width:280px; display:block; z-index:9;}
.logo img{max-width:100%}


/* ---------- Basis-Layout -------------------------------------------------------------- */
.wpsm_count-icon i{color:#b0c91b !important}

/* ---------- Navigation -------------------------------------------------------------- */
nav{padding:0 2em}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{padding-top:30px !important}


/* ---------- Content-Page -------------------------------------------------------------- */



/* ---------- Footer -------------------------------------------------------------- */
footer li{margin-bottom:.5em}
footer section{display:flex; }
footer section div{margin-right:4em}

footer{background-color:#fff; border-top:4px solid #b0c91b}
footer{	background-image:url("/wp-content/uploads/2025/06/logobg.png"); background-position:bottom right; background-size:300px; background-repeat:no-repeat}


/* ---------- Mobil-Section -------------------------------------------------------------- */

@media all and (max-width:1800px) {
	.counter strong{font-size:1.2em; font-weight:900}
	.counterspalte{background-size:200px; padding:0 20px 0 20px !important}
}

@media all and (max-width:1500px) {
	.counterspalte{background-size:150px;}
}

@media all and (max-width:1300px) {
	.hero .wp-block-columns {flex-wrap: wrap !important;}
	.hero .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {flex-basis: 100% !important;}
	.counterspalte{box-sizing:border-box; padding:20px 20px 20px 20px; justify-content:left}
	.counter strong{font-size:1.2em; font-weight:900}
	.wp-block-group__inner-container, .wp-block-group.is-layout-grid, .postcontent{width:100%; margin:0 auto}
	.counterspalte{background-size:300px; }
	footer{background-image:none}
}

@media all and (max-width:1170px) {
	.logo{width:200px}
	body, h3{font-size:1em}
	h1, h2{font-size:1.5em;}
	.counter-box {width: 48%;}
}

@media all and (max-width:1170px) {
.wp-block-latest-posts__featured-image.alignleft {margin-right: 0em !important; margin-bottom:1em !important; float:none !important}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {padding-top: 0px !important;}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {font-size: 14px !important;}
	li.mega-menu-item-has-children{border-bottom:4px solid #fff !important}
	
@media all and (max-width:900px) {
	footer section, .wp-block-latest-posts__list{flex-direction:column !important}
	.wp-block-latest-posts__list li{width:400px !important}
	}

@media all and (max-width:680px) {
	nav, .wp-block-group{padding:1em;}
	.wp-block-latest-posts__featured-image.alignleft{float:none !important; margin-bottom:2em}
	.logo{top:15px}
	.counter-box {width: 100%;}
}
	
@media all and (max-width:450px) {
	.wp-block-latest-posts__list li{width:100% !important}
	.sponsoren{}
	}

@media all and (max-width:400px) {
	.wp-block-group-is-layout-grid {
    gap: .5rem !important;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)) !important;
}
}