/*
Theme Name:         Universal Site TPL
Theme URI:          https://www.nachbars-sohn.de
Description:        Universal Site Template Theme
Version:            1.0.0
Author:             Steffen Sauer
Author URI:         https://www.akasu.de/
Text Domain:        universal-site-tpl
License:            MIT License
License URI:        https://opensource.org/licenses/MIT
Requires PHP:       8.0
Requires at least:  6.0
*/

/* Reset und Basis-Stil */

/* overpass-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: 'Overpass';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/overpass-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-italic - 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: 'Overpass';
  font-style: italic;
  font-weight: 400;
  src: url('./assets/fonts/overpass-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-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: 'Overpass';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/overpass-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-700italic - 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: 'Overpass';
  font-style: italic;
  font-weight: 700;
  src: url('./assets/fonts/overpass-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Overpass";
}

body {
    font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

a {
    color: #0073aa;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #00a0d2;
}

h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin-bottom: 0.5em;
    line-height: 1.4;
    font-weight: 600;
    font-family: "Overpass";
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1.125em;
}

h6 {
    font-size: 1em;
}

p {
    margin-bottom: 1.5em;
}

img {
    height: auto;
    max-width: 100%;
}

/* Layout */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1 0 auto;
    padding: 2em 0;
}

.site-content .layout-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Layout-Varianten basierend auf Sidebar-Einstellungen */
.layout-none {
    display: block;
}

.layout-none .content-area {
    width: 100%;
    max-width: 100%;
}

.layout-left {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-gap: 30px;
}

.layout-right {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-gap: 30px;
}

.layout-both {
    display: grid;
    grid-template-columns: 250px 1fr 250px;
    grid-gap: 30px;
}

/* Sidebar Stile */
.sidebar {
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: fit-content;
}

.sidebar-left {
    grid-column: 1;
}

.sidebar-right {
    grid-column: 3;
}

.sidebar .widget {
    margin-bottom: 30px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.sidebar .widget:last-child {
    margin-bottom: 0;
}

/* Header-Bereich */

header#masthead {
  position: fixed;
  top: 0;
  /*height: 100px;*/
  width: 100%;
  left: 0;
  background: rgba(255,255,255,.8);
  z-index: 100;
}

.header-wrapper {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  margin: 0 auto;
  width: 100%;
  max-width: 1170px;
 
}

.main-navigation {
  max-width: 1200px;
  margin: 1em 0;
  padding: 0 15px;
  font-size: 0.875em;
}

.site-header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1em 0;
    position: relative;
}

.site-branding {
    max-width: 1200px;
    margin: 0;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-title {
    font-size: 1.5em;
    margin: 0;
    font-weight: 700;
}

.site-description {
    margin: 0;
    font-size: 0.875em;
    font-style: italic;
    color: #666;
}

/* Navigation */
.main-navigation {
    max-width: 1200px;
    margin: 1em 0;
    padding: 0 15px;
    font-size: 0.875em;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation li {
    position: relative;
    margin-right: 1.5em;
}

.main-navigation a {
    display: block;
    padding: 0.5em 0;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.main-navigation a:hover {
    color: #0073aa;
}

.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99999;
    background-color: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    min-width: 200px;
}

.main-navigation .sub-menu li {
    margin-right: 0;
    width: 100%;
}

.main-navigation .sub-menu a {
    padding: 0.5em 1em;
    border-bottom: 1px solid #f0f0f0;
}

.main-navigation li:hover > .sub-menu,
.main-navigation .sub-menu.focused {
    display: block;
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid #ddd;
    padding: 0.5em 1em;
    font-size: 1em;
    cursor: pointer;
}

/* Hero-Bereich */
.hero-section {
    width: 100%;
    margin-bottom: 2em;
}

.hero-image {
    position: relative;
}

.hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Hero-Position: below */
.hero-position-below {
    display: block;
}

.hero-content-below {
    max-width: 1200px;
    margin: 2em auto;
    padding: 0 15px;
}

/* Hero-Position: left */
.hero-position-left {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Hero-Position: right */
.hero-position-right {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hero-content {
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Gutenberg-Inhalte im Hero-Bereich */
.hero-content .wp-block-buttons {
    margin-top: 1em;
}

.hero-content h1, 
.hero-content h2, 
.hero-content h3, 
.hero-content h4, 
.hero-content h5, 
.hero-content h6 {
    margin-top: 0;
}

.hero-content > *:first-child {
    margin-top: 0;
}

.hero-content > *:last-child {
    margin-bottom: 0;
}

.hero-content-below {
    max-width: 1200px;
    margin: 2em auto;
    padding: 0 15px;
}

.hero-content-below .wp-block-buttons {
    margin-top: 1em;
}

/* Content-Bereich */
.content-area {
    background-color: #fff;
    padding: 2em;
}

/* Artikel-Styling */
.entry-title {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.entry-meta {
    font-size: 0.875em;
    color: #666;
    margin-bottom: 1em;
}

.entry-meta span {
    margin-right: 1em;
}

.post-thumbnail {
    margin-bottom: 1.5em;
}

.entry-content {
    margin-bottom: 1.5em;
}

.read-more-link {
    display: inline-block;
    margin-top: 1em;
    padding: 0.5em 1em;
    background-color: #0073aa;
    color: #fff;
    font-size: 0.875em;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.read-more-link:hover {
    background-color: #005d8c;
    color: #fff;
}

.entry-footer {
    font-size: 0.875em;
    color: #666;
    border-top: 1px solid #f0f0f0;
    padding-top: 1em;
}

.entry-footer span {
    display: block;
    margin-bottom: 0.5em;
}

/* Sidebars */
.widget-area {
    font-size: 0.875em;
}

.widget {
    margin-bottom: 2em;
    padding: 1.5em;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.widget-title {
    margin-top: 0;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #f0f0f0;
    font-size: 1.25em;
}

.widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget li {
    padding: 0.5em 0;
    border-bottom: 1px dotted #f0f0f0;
}

.widget li:last-child {
    border-bottom: none;
}

:root :where(.wp-block-group) {
    background: transparent;
}

p.wp-block-button__link {
    display:grid;
    place-items: center;
}




.before-footer-widget {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  margin-top: -5em;
}

.before-footer-widget figure {
    position: relative;
    bottom: -90px;
}



/* Footer */


footer#colophon {
    font-size:0.8em;
    padding-top: 4em;
}


.footer-container, .after-footer {
    display: flex;
    flex-wrap: nowrap;
    max-width: 1170px;
    margin: 0 auto;
}

.site-footer {
    background-color: #333;
    color: #ccc;
    padding: 2em 0;
    margin-top: 2em;
}

.footer-widgets {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 30px;
    margin-bottom: 2em;
    background-color: transparent;
}

.footer-widgets .widget {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
}

.footer-widgets .widget-title {
    color: #fff;
    border-bottom: 1px solid #444;
}

.site-info {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em 15px 0;
    border-top: 1px solid #444;
    text-align: center;
    font-size: 0.75em;
}

.footer-navigation {
    max-width: 1200px;
    margin: 1em auto 0;
    padding: 0 15px;
    text-align: center;
}

.footer-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.footer-navigation li {
    margin: 0 1em;
}

.footer-navigation a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.875em;
}

.footer-navigation a:hover {
    color: #fff;
}

.footer-widget-first, .footer-widget-fourth {
    width: 35%;
}

.footer-widget-second, .footer-widget-third {
    width: 15%;
}

.footer-1-widget .is-layout-flex {
    display: block;
}

.footer-1-widget figure {
    display: block;
    float: left;
    margin-right: 10px;
}

/* Barrierefreiheit */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #0073aa;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}



.hero-overlay {
    position: absolute;
    top: 30px;
    left: 30px;
    background: #0a4b78;
    color: #fff;
    padding: 1em;
    display: inline-block;
}

.hero-overlay .hero-overlay-title {
    font-size: 1.5em;
    font-weight: bold;
    display: block;
}

.hero-overlay .hero-overlay-description {
    font-size: 1em;
}

.hero-overlay-button {
    display: block;
}

.hero-overlay-button a {
    display: inline-block;
    padding: 0.5em 1em;
    background: #fff;
    color: #0073aa;
    text-decoration: none;
    border-radius: 5px;
    border-color: #00a0d2;
}

div.posts-grid-more-news {
    text-align: center;
}


:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: transparent;
    color: unset;
    border-radius: unset;
    padding: unset;
}

a.more-news-link {
    margin-top: 1em;
}

/* Base Button Design */
p.wp-block-button__link a, a.wp-block-button__link, div.posts-grid-more-news a.more-news-link {
    position: relative;
    background-color: #004892; /* blue */
    color: #FFFFFF;
    font-weight: bold;
    font-family: sans-serif;
    padding: 0.75em 1.5em;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    }

/* Color Bar */
p.wp-block-button__link a::after, a.wp-block-button__link::after, div.posts-grid-more-news a.more-news-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
	background: repeating-linear-gradient(
    	to right,
		#004892 0%,   #004892 10%,
		#e4007d 10%,  #e4007d 25%,
		#ed7c00 25%,  #ed7c00 40%,
		#009440 40%,  #009440 60%,
		#ffeb00 60%,  #ffeb00 100%
	);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  	background-size: 100% 100%;
  	background-position: 0 0;
  	transition: background-position 2s ease;
    }

	a.wp-block-button__link:hover::after,
	div.posts-grid-more-news a.more-news-link:hover::after,
	a.read-more-link:hover::after {
	  animation: movebar 2s linear infinite;
	  transition: none;
	}

	@keyframes movebar {
	  from { background-position: 0 0; }
	  to   { background-position: -300px 0; }
	}

a.read-more-link {
    position: relative;
    background-color: transparent; 
    color: #004892;
    font-weight: bold;
    font-family: sans-serif;
    padding: 0.75em 1.5em .75em 0;
    text-decoration: none;
    display: inline-block;
    overflow: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    text-align: left;
    width: 90%;
    }

a.read-more-link:hover {
    background: transparent;
    color: #000;
}    

/* Color Bar */
a.read-more-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
	background: repeating-linear-gradient(
    	to right,
		#004892 0%,   #004892 10%,
		#e4007d 10%,  #e4007d 25%,
		#ed7c00 25%,  #ed7c00 40%,
		#009440 40%,  #009440 60%,
		#ffeb00 60%,  #ffeb00 100%
	);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
	background-size: 100% 100%;
  	background-position: 0 0;
  	transition: background-position 2s ease;
    }

.yellow-box, .green-box {
    margin: 4rem 0;
    padding: 4rem 0;

}    

.yellow-box {
    background: rgba(255,235,0,.25);
}

.green-box {
    background: rgba(0,148,64,.75);
    color: #fff;
    overflow:auto;
}

h1,h2 {
    color: #004892;
    font-weight: 700;
}


h3,h4,h5,h6 {
    color: #000;
    font-weight: 700;
}

.header-wrapper {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}

.site-branding img {
    max-width: 200px;
}

#site-navigation {
    position: relative;
    top: 35px;
    text-transform: uppercase;
}

.menu-item {
    border-top: 2px solid transparent;
}

.current-page-ancestor, .current_page_item {
    border-top: 2px solid #004892;
}

.main-navigation .sub-menu {
    background: #004892;
    color: #fff;
    padding: 0.5rem;
}

.main-navigation ul.sub-menu li a {
    color: #fff;
    border: 0;
}

.main-navigation ul.sub-menu li {
    border: 0;
}

.after-footer-right {
    display: flex;
}


.back-to-top-link {
    display: inline-block;
    text-decoration: none;
    font-size: 2rem;
    line-height: 2.4rem;
    text-align: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #d6e3f0;
    padding: .25rem;
    position: sticky;
    pointer-events: all;
    top: calc(100vh - 5rem);
    z-index:100;
    background: url('./assets/images/leipziger-kinderstiftung-button-back-to-top.svg') no-repeat;
}

.back-to-top-wrapper {
    position: fixed;
    right: .25rem;
    width: 3em;
    pointer-events: none;
    bottom:2em;
}

footer#colophon li {
    list-style-type: none;
}


/* Responsive Design */
@media screen and (max-width: 768px) {
    .layout-left,
    .layout-right,
    .layout-both,
    .hero-position-left,
    .hero-position-right {
        grid-template-columns: 1fr;
    }
    
    .site-branding {
        flex-direction: column;
        text-align: center;
    }
    
    .menu-toggle {
        display: block;
        margin: 0 auto;
    }
    
    .main-navigation ul {
        display: none;
    }
    
    .main-navigation.toggled ul {
        display: block;
    }
    
    .main-navigation li {
        display: block;
        margin-right: 0;
        text-align: center;
    }
    
    .main-navigation .sub-menu {
        position: static;
        display: block;
        box-shadow: none;
        padding-left: 1em;
    }
    
    .main-navigation .sub-menu a {
        width: auto;
    }

    .footer-widget-first, .footer-widget-fourth, .footer-widget-second, .footer-widget-third {
        width: 50%;
    }

}

@media screen and (max-width: 480px) {
    .footer-widgets {
        grid-template-columns: 1fr;
    }
    
    .footer-navigation ul {
        flex-direction: column;
    }
    
    .footer-navigation li {
        margin: 0.5em 0;
    }
}


@media screen and (max-width: 1020px) {

    .menu-hauptmenue-container {
        display: none;
    }

    .footer-container, .after-footer {
        flex-wrap: wrap;
    }

    
}


@media screen and (max-width: 640px) {

    .footer-widget-first, .footer-widget-fourth, .footer-widget-second, .footer-widget-third {
        width: 100%;
    }
}