/*
Theme Name: Koji Child Theme
Theme URI: https://andersnoren.se/teman/koji-wordpress-theme/
Description: A child theme for Koji.
Author: Gloria Feldner
Author URI: https://gloriari.at/
Template: koji
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* --------------------------------------------------------------------------------------------- */
/*	CSS Variables
/* --------------------------------------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
   
    --dunkel: #405A7D;
    --hell: #B6C2D5;
    --rot: #F28C7E;
    --weisstext: #fff;
    --aside-width: 7vw;
}

body {
    background-color: #fff;
    font-family: 'Poppins';
    color: #000;
}

.color-white {
    color:#fff;
}

::selection {
    background-color: var(--rot);
}

/* Font Awesome */

@font-face {
	font-family: 'Font Awesome 6';
	font-style: normal;
	font-weight: normal;
	src: url( ./assets/font-awesome/fonts/fa-solid-900.woff2 ) format( 'woff2' );
}
@font-face {
	font-family: 'Font Awesome 6 Brands';
	font-style: normal;
	font-weight: normal;
	src: url( ./assets/font-awesome/fonts/fa-brands-400.woff2 ) format( 'woff2' );
}

/* DESKTOP/MOBILE VISIBILITY */

.desk-visible {
    display: none;
}
.mobile-visible {
    display: flex;
}

/* --------------------------------------------------------------------------------------------- */
/*	Typo
/* --------------------------------------------------------------------------------------------- */

body, p {
    font-size: 1.8rem;
}
b, strong {
    font-weight: 600;
}
.widget-content p {
    color: #000;
    font-size: 1.6rem;
}
h1, h1.heading-up {
    font-family: "Montserrat";
    font-size: 3.7rem;
    font-style: italic;
    line-height: 0.8;
    text-transform: uppercase;
    color: var(--hell);
    margin: 4rem 0 2.5rem 0;
    font-weight: 900;
}
h2, h2.heading-mid {
    font-family: "Montserrat";
    font-size: 2.6rem;
    /*font-style: italic;*/
    line-height: 0.8;
    text-transform: uppercase;
    font-weight: 600;
}
.team-member h2.heading-mid {
    color: var(--weisstext);
    text-transform: unset;
    padding-bottom: 1rem;
}
h3, h3.preview-title {
    font-size: 2.2rem;
    color: #000;
    font-weight: 500;
}
h3.preview-title a {
    color: #000;
    font-style: normal;
    font-weight: 500;
}
.audio-header h3.preview-title a {
    color: var(--weisstext);
}
h4, .content h4 a {
    font-size: 2.2rem;
    font-weight: 500;
    color: #000;
    font-style: normal;
}
.related-posts-title {
    color: var(--dunkel);
}

.single-format-audio .excerpt {
    color: var(--weisstext);
}

.entry-content .buch-einzel p {
    margin-bottom: 1rem;
}

/* Links */ 

body a {
    font-style: italic;
    font-weight: 600;
    text-decoration: none;
    color: var(--dunkel);
}

.social-menu a {
    font-style: normal;
}

.mobile-head .widget-content a {
    font-size: 1rem;
}

li.search-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    color: var(--dunkel);
    font-style: italic;
    font-weight: 600;
}
a.readmore {
    color: var(--hell);
    font-size: 2rem;
    letter-spacing: 0.2rem;
}
.link-pagination a, .pagination-single a {
    color: var(--dunkel);
}

.filter-nav .current-menu-item a, .filter-nav a:hover {
    background: var(--hell);
	padding: 0.3rem;
	border-radius: 5px;
    color: var(--weisstext);
}

body a:hover, body a:focus, .preview-title a:hover, preview-title a:focus {
    color: var(--rot);
}
.pagination-single a:hover, .pagination-single a:focus, .post-meta a:hover, .post-meta a:focus {
    text-decoration: none;
}

.widget-content a {
    text-decoration: none;
}
.widget-content a:hover, .widget-content a:focus, .btn-more a:hover, .btn-more a:focus, .site-footer__content a:hover, .site-footer__content a:focus {
    color: var(--weisstext);
}

.buch-einzel a.episode-link {
    font-size: 1.2rem;
    font-style: italic;
    color: var(--dunkel);
    font-weight: 500;
}
.buch-einzel a.episode-link:hover, .buch-einzel a.episode-link:focus {
    color: var(--rot);
}

/* Menü Hover */

#primary-menu a:hover, #primary-menu a:focus, #mobile-menu a:hover, #mobile-menu a:focus {
    font-weight: 700;
}
#main-menu a:hover, #main-menu a:focus {
    font-weight: 700;
}

#main-menu .current-menu-item, #main-menu .current-menu-parent  {
    font-weight: 700;
    background-color: var(--rot);
    padding: 0.3rem;
    border-radius: 10px;
}

#primary-menu .current-menu-item a, #primary-menu .current-menu-parent > a {
    font-weight: 700;
}

/* Buttons */

button.btn-more, input[type="submit"] {
    font-family: 'Poppins';
    font-style: italic;
    background: var(--rot);
    border-radius: 10px;
    font-size: 1.5rem;
    padding: 0.8rem;
    margin-top: 2rem;
}

input[type="submit"]:hover, input[type="submit"]:focus {
    background-color: var(--dunkel);
    color: var(--weisstext);
    /*border: var(--rot) 2px solid;*/
    box-sizing: border-box;
    text-decoration: none;
}

.btn-more a, .schwerpunkt a {
    color: var(--weisstext);
    text-decoration: none;
}
button.btn-more:hover {
    background: var(--dunkel);
}

.widget-content .wp-block-buttons {
    display: flex;
    justify-content: flex-end;
}
.wp-block-button__link {
    padding: 0.5rem;
}
.wp-block-button__link:hover {
    background-color: var(--dunkel) !important;
}


/* Post Meta */

.post-meta-preview {
    margin-bottom: 0;
}

.post-meta {
    color: var(--dunkel);
    font-size: 1.2rem;
    font-style: italic;
}
.post-meta a {
    font-weight: unset;
}
.audio-header .post-meta {
    color:var(--weisstext);
}

/* --------------------------------------------------------------------------------------------- */
/*	IMG
/* --------------------------------------------------------------------------------------------- */

.custom-logo-link img {
    max-width: 60vw;
}

.preview-image img {
    border-radius: 10px 10px 0 0;
}

/* Startseite */
.recent-episode .preview-image img {
    aspect-ratio: 7/4;
    object-fit: cover;
}
.buchtipp img {
    max-height: 40vh;
    margin-bottom: 2rem;
}
.team-member img {
    aspect-ratio: 4/3;
    /*max-width: 110%;*/
    height: auto;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}
.monat img {
    aspect-ratio: 1/1;
    max-width: 80%;
    height: auto;
    object-fit: cover;
}
/* Archiv*/
.preview-hoererin img {
    aspect-ratio: 1/1;
    object-fit: cover;
    max-width: 300px;
}


/* --------------------------------------------------------------------------------------------- */
/*	ICONS
/* --------------------------------------------------------------------------------------------- */

.search-toggle-wrapper button, .pagination-single .arrow {
    background-color: var(--hell);
}

/* social menu*/

.social-icons a {
    width: 3rem;
    height: 3rem;
    background: var(--hell);
    font-weight: unset;
}
.social-icons a::before {
    font-size: 1.5rem;
}
ul.social-icons {
    margin: 0;
    flex-wrap: nowrap;
    justify-content: space-between;
}
ul.social-icons li {
    margin: 0 0 0.7rem 0.7rem;
}

.s-icons a[href*="youtube.com"]::before { content: '\f167'; font-family: 'Font Awesome 6 Brands'; }
.s-icons a[href*="signal.group"]::before { content: '\e663'; font-family: 'Font Awesome 6 Brands'; }
.s-icons a[href*="t.me"]::before { content: '\f2c6'; font-family: 'Font Awesome 6 Brands'; }
.s-icons a[href*="rss.simplecast.com"]::before { content: '\f09e'; font-family: 'Font Awesome 6'; }
.s-icons a[href*="podcasts.apple.com"]::before { content: '\f2ce'; font-family: 'Font Awesome 6'; }
.s-icons a[href*="twitter.com"]::before { content: '\e61b'; font-family: 'Font Awesome 6 Brands'; }

/* Primary Menu */

.fa a::before {
    font-size: 2.5rem;
    display: inline-block;
    width: 3rem;
    text-align: center;
    margin-right: 1rem;
    content: '\f1ce   '; font-family: 'Font Awesome 6';
}
/* Im Wordpress Dashboard - Menüs kann über 'Ansicht anpassen' ganz oben, ein Feld für CSS-Klassen zu den einzelnen Menüpunkten hinzugefügt werden. So können die Menüpunkte gestaltet werden, z.B mit Icons als ::before */

/* Variante Font Awesome */
.fa-home a::before {content: '\f015   '; font-family: 'Font Awesome 6';}
.fa-info a::before {content: '\f129   '; font-family: 'Font Awesome 6';}
.fa-podcast a::before {content: '\f2ce   '; font-family: 'Font Awesome 6';}
.fa-blog a::before {content: '\f044   '; font-family: 'Font Awesome 6';}
.fa-newsletter a::before {content: '\f1ea   '; font-family: 'Font Awesome 6';}
.fa-empfehlung a::before {content: '\f02d   '; font-family: 'Font Awesome 6';}
.fa-steady a::before {content: '\f4c6   '; font-family: 'Font Awesome 6';}
#menu-item-193 {
    padding-top: 0.5rem;
}
.fa-community a::before {content: '\e533   '; font-family: 'Font Awesome 6';}
.fa-merch a::before {content: '\f291   '; font-family: 'Font Awesome 6';}
.fa-offenlegung a::before {content: '\31 \30   '; font-family: 'Font Awesome 6';}
#menu-item-1145 {
	margin-top: 0.4rem;
}

/* Variante file in Theme-Ordner (schwarz im Hintergrund) */
/*.fa-home a::before {
    background: url('assets/images/icons/house-solid.svg') no-repeat center;
    background-size:contain;
}*/

#mobile-menu .menu-item-has-children > a::after {
    content: '   \f078   '; font-family: 'Font Awesome 6';
    color: var(--dunkel);
    padding-left: 2rem;
}
/* --------------------------------------------------------------------------------------------- */
/*	NAVIGATION
/* --------------------------------------------------------------------------------------------- */

ul.site-nav ul {
	margin: .6rem 0 0 1rem;
}
ul.site-nav a{
    color: var(--dunkel);
    font-style: normal;
    font-weight: 400;
}

.sub-menu .menu-item a:before {
    content: '\f101   '; font-family: 'Font Awesome 6';  
}

.site-nav a:hover, .site-nav .current-menu-item > a {
	text-decoration: none;
	border-radius: 5px;
}

.site-nav li a {
    font-size: unset;
}

.primary-menu .fa a::before{
    visibility: hidden;
    color: aliceblue;
}

/* mobile-head */

.mobile-head .footer-widgets.mobile {
    align-self: flex-end;
}
.mobile-head .mobile-header-rechts {
    display: flex;
    flex-direction: column;
}
.mobile-head.mobile-visible {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Menü Toggle Arrow > */
.header-inner.section-inner .arrow::before {
    content: '\f054'; font-family: 'Font Awesome 6';
}
button.primary-toggle {
    position: fixed;
    top: 0;
}
button.primary-toggle:focus {
    text-decoration: none;
}

/* Primary Menu Wrapper - Desktop */
.primary-menu-wrapper {
	background: var(--dunkel);
	display: none;
    visibility: hidden;
	overflow: auto;
	padding: 0;
	position: fixed;
		bottom: 0;
		left: 0;
		right: 75vw;
		top: 0;
	transition: opacity .25s ease-in, left 0s .25s, right 0s .25s;
	z-index: 99;
}

.primary-menu-wrapper {
    padding-left: var(--aside-width);
}

.primary-menu-wrapper.active {
	/*display: flex;*/
    visibility: visible;
}

.primary-menu {
	display: flex;
	flex-direction: column;
	justify-content: space-between;	
}

.primary-menu-wrapper .primary-menu-top,
.primary-menu-wrapper .social-menu-wrapper {
	padding-bottom: 4rem;
}

.primary-menu-wrapper .social-menu-wrapper {
	margin-top: 0;
}

.social-menu-wrapper.mobile-visible {
    margin-top: 0;
    margin-bottom: 2rem;
}

/* Submenü */

.sub-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* mobile-menu */

.nav-toggle .bars {
    height: 3rem;
    width: 3rem
}
.nav-toggle .bar {
    background-color: var(--dunkel);
    height: .3rem
}
.nav-toggle .bar:nth-child(1) { margin-top: -1.3rem; }
.nav-toggle .bar:nth-child(3) { margin-top: 1.3rem; }



/* --------------------------------------------------------------------------------------------- */
/*	SEITENSTRUKTUR
/* --------------------------------------------------------------------------------------------- */

.post-inner {
    padding-top: 4rem;
}

/* Header */

.header-top {
    padding: 0;
    align-items: unset;
}
.header-top.section-inner {
    width: auto;
    /*margin: 0 2rem 1rem 1rem;*/
}

.mobile-menu {
    justify-content: start;
    margin-top: 4rem;
}

.primary-menu.section-inner {
    padding-left: 0;
    margin-left: -2.5rem;
}

.mobile-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: var(--weisstext);
    padding: 1rem 1rem 0.5rem 1rem;
    gap: 0 0.5rem;
}
.mobile-head .social-menu-wrapper {
    margin-top: 0;
    width: fit-content;
}

/* Footer */

#site-footer {
    padding: 0;
}
#site-footer h1 {
    color: var(--weisstext);
}
.footer-widgets-outer-wrapper {
    background-color: var(--rot);
}
.footer-widgets-outer-wrapper {
    padding: 0;
}
.footer-widgets-wrapper {
    margin: 0;
}
.footer-widgets {
    width: 100%;
    margin: 0;
}
.footer-widgets.mobile {
    width: fit-content;
    margin: 0;
    padding: 0;
}
.footer-widgets .wp-block-buttons {
    margin:0;
}
/* Copyright/Offenlegung */
.site-footer__content, .footer-copyright{
    font-size: 1.4rem;
}
.header-bottom.section-inner {
    padding-bottom: 2%;
    padding-top: 2%;
}


/* --------------------------------------------------------------------------------------------- */
/*	KOMPONENTEN
/* --------------------------------------------------------------------------------------------- */

/* Cards */

.card {
    border-radius: 10px;
    width: calc(100% - 3rem);
    margin: 3rem auto;
}
.card .section-inner {
    padding: 2rem 0;
    margin: auto;
}
.card h1.heading-up {
    margin-top: 0;
}

/* Accordion */

#ui-id-8 img {
    display: inline-block;
}
.ui-widget {
    font-family: "Poppins";
    font-size: 1.6rem;
    color: #000;
}
.ui-widget-content {
    color: #000;
    border: unset;
}
.ui-accordion .ui-accordion-content {
    padding: 2rem 0;
    border-top: 0;
    overflow: auto;
  }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button{
    color: var(--dunkel);
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: var(--weisstext);
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 2px solid var(--dunkel);
    border-radius: 5px;
    background: unset;
    font-weight: normal;
    color: #000;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: var(--dunkel);
    font-weight: normal;
    color: #000;
  }
  .accordion.no-collapse span {
    display: none;
  }
  .accordion.no-collapse .ui-accordion-header {
    border: 2px solid var(--dunkel);
    border-radius: 5px;
    background: unset;
  }
  .accordion.no-collapse .ui-state-active a {
    color: var(--dunkel);
  }


/* --------------------------------------------------------------------------------------------- */
/*  WIDGETS, SHORTCODES
/* --------------------------------------------------------------------------------------------- */

/* Player */

.entry-content #mep_1 {
    display: none;
}

.preview-audio {
    margin-top: 1rem;
}
.audio-header .preview-audio {
    background: var(--dunkel);
}

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {background: transparent !important;}

/* Playerdesign */

.mejs-button > button {
    margin: 10px 10px;
    border-radius: 10px;
}

.mejs-button.mejs-playpause-button.mejs-play:hover, .mejs-button.mejs-volume-button.mejs-mute:hover {
    background: var(--rot);
}
.mejs-button.mejs-playpause-button, .mejs-button.mejs-volume-button {
	border-radius: 20px;
    margin-right: 1rem;
}
.mejs-button, .mejs-time, .mejs-time-rail {
    height: 40px;
    width: 40px;
    color: var(--dunkel);
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.mejs-controls .mejs-time-rail .mejs-time-total, .mejs-button.mejs-playpause-button, .mejs-button.mejs-volume-button {
  background:var(--dunkel);
}

/* Player Folgenansicht */
.single-format-audio .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.single-format-audio .mejs-controls .mejs-time-rail .mejs-time-total, /**/ .single-format-audio .mejs-button.mejs-playpause-button, .single-format-audio .mejs-button.mejs-volume-button {
  background:var(--hell);
}
.single-format-audio .mejs-time, .single-format-audio .mejs-time-float {
    color: var(--weisstext);
}
/**/

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
.mejs-controls .mejs-time-rail .mejs-time-loaded {
  background:var(--rot);
}

.mejs-time-rail {
    padding-top: 16px;
}

.mejs-time-buffering, .mejs-time-current, .mejs-time-float, .mejs-time-float-corner, .mejs-time-float-current, .mejs-time-hovered, .mejs-time-loaded, .mejs-time-marker, .mejs-time-total, .mejs-horizontal-volume-total {
    height: 5px;
}

.mejs-time-float {
    background: none;
    border: none;
    bottom: 1,5rem;
    color: var(--dunkel);
    display: none;
    height: 17px;
    margin-bottom: 9px;
    position: absolute;
    text-align: center;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 36px;
}

/* Contact Form */

.nf-form-content {
    margin: 4rem 0 !important;
}

/* --------------------------------------------------------------------------------------------- */
/*	PREVIEW
/* --------------------------------------------------------------------------------------------- */

article.preview {
    margin-bottom: 0;
}
.preview-wrapper {
    box-shadow: unset;
    margin: 1rem 0;
    overflow: clip;
}
.preview-inner {
    padding: 0;
}
.preview-inner p {
    padding-top: 1.6rem;
}

/* preview groß: Startseite / content-audio */
.template-startseite .preview, .audio-header .preview, .category-blog .preview, .post-type-archive-hoererin .preview {
    width: 100%;
}
.template-startseite .preview-wrapper, .audio-header .preview-wrapper {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;

}
.template-startseite .post-meta-wrapper, .audio-header .post-meta-wrapper {
    grid-row-start: 4;
    padding-top: 1rem;
    }
.template-startseite .preview-title, .audio-header .preview-title {
    grid-row-start: 1;
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}
.template-startseite .preview-image, .audio-header .preview-image {
    grid-row-start: 2;
}
.template-startseite .preview-inner, .audio-header .preview-inner {
    grid-row-start: 3;
}


/* Archiv Blog - Liste*/
.blog .preview-wrapper {
    display: flex;
    flex-direction: column;
}

/* Archiv category-blog */
.archive.category-blog .preview-wrapper {
    margin-top: 3rem;
}

/* --------------------------------------------------------------------------------------------- */
/*	STARTSEITE
/* --------------------------------------------------------------------------------------------- */


.recent-episode .post-meta-wrapper {
    visibility: hidden;
}
.next-episode .section-inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 3rem;
}
.next-episode p {
    text-align: center;
}
.next-episode, .schwerpunkt, .audio-header {
    background: var(--dunkel);
}
.news .section-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.news .buchtipp {
    border-bottom: solid var(--hell) 2px;
    padding-bottom: 3rem;
}

.schwerpunkt .content {
    color: var(--weisstext);
}
.team-main {
    display: flex;
    flex-direction: column;
}
.template-startseite #site-content .team-top .section-inner {
    padding-top: 0;
    padding-bottom: 0;
}
.team-member /*.section-inner*/ {
    background-color: var(--hell);
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    /*gap: 3rem;*/
    /*margin: 3rem 0;*/
    margin-top: unset; 
}
.monat /*.section-inner*/ {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
}
.monat .content {
    background-color: var(--dunkel);   
}
.monat .content .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.monat .content.card {
    margin: unset;
}
.monat .content p, .monat .content h2 {
    text-align: center;
    color: var(--weisstext);
    padding: 2rem 0;
}
.monat h1 {
    text-align: center;
}


/* More Episodes: Only show 4 posts */
.more-posts article {
    display: none;
}
.more-posts article:nth-child(-n+4) {
    display: block;
}

/* --------------------------------------------------------------------------------------------- */
/*	SINGLE 
/* --------------------------------------------------------------------------------------------- */

.single .post-inner {
    padding-top: 1rem;
}

/* content */

.buchtipp-liste, .buchtipp-loop {
    display: flex;
    flex-direction: column;
    /*margin-top: 3rem;*/
	gap: 1rem;
}

.entry-content .buchtipp-loop  p {
    margin-bottom: 0.5rem;
    padding-top: 1rem;
}
.entry-content .buchtipp-loop  p img {
    margin-top: -1rem;
}

.buch-einzel {
    display: flex;
    gap: 1rem;
}
.buch-einzel a  {
    display: flex;
	gap: 1rem;
    font-weight: initial;
    font-style: initial;
    color: #000;
}

.buch-einzel img {
    max-width: 100px;
    height: auto;
}

/* Buchtipps Archiv */

.page-id-1136 .entry-content {
	padding-right: initial;
}
.buchtipp-loop-archiv {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 2rem;
}

.buchtipp-loop-archiv .buch-einzel {
	flex-direction: column;
	max-width: 100%;
}
.buchtipp-loop-archiv .buch-einzel img {
    max-width: 100%;
}

/* content-audio */
.audio-header {
    background: var(--dunkel);
    margin-top: 0.5rem;
}
.audio-header .preview-wrapper {
    background-color: unset;
}
.credits-single {
	border-top: solid var(--dunkel) 2px;
	padding-top: 1rem;
}

.related-posts .posts {
    margin-bottom: unset;
}

/* --------------------------------------------------------------------------------------------- */
/*	ARCHIV allgemein
/* --------------------------------------------------------------------------------------------- */

.archive-header .post-inner {
    padding: 4rem 0 2rem 0;
}

.preview-hoererin .content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    border-radius: 10px;
}
/* --------------------------------------------------------------------------------------------- */
/*	SUCHE/ARCHIV 
/* --------------------------------------------------------------------------------------------- */

.rechteseite {
    width: 100%;
}
.rechteseite .search-form {
    display: none;
}
.rechteseite .search-form input, .sidebar-filter .search-form input {
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    border: 2px solid var(--dunkel);
    border-radius: 5px;
}
.sidebar-filter .search-form {
    margin-bottom: 2rem;
    display: flex;
    gap: 2rem;
}

/* Filter */
.filter-category .section-inner {
    padding-top: 0;
    padding-bottom: 0;
}
 ul.filter-nav {
    display: flex;
    flex-wrap: wrap;
    color: var(--dunkel);
    gap: 1rem;
 }

.filter-nav li::before {
	content: "> ";
}

#category-filter label {
    color: #000;
    font-size: unset;
    font-weight: unset;
}

.filter li {
    margin: 1rem 0;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: #f06760;
  }

.sortierung {
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
}

/* --------------------------------------------------------------------------------------------- */
/*  MEDIA QUERIES - MIN-WIDTH
/* --------------------------------------------------------------------------------------------- */

@media ( min-width: 600px) {
    .social-icons a {
        width: 3rem;
        height: 3rem;
    }

    .custom-logo-link img {
        max-width: 40vw;
    }

    .archive .preview-wrapper, .search .preview-wrapper /*, .blog .preview-wrapper*/ {
        aspect-ratio: 1/1.7;
    }
    .archive.category-blog .preview-wrapper, .post-type-archive-hoererin .preview .preview-wrapper {
        aspect-ratio: unset;
    }

    /* Seite */
    .single .post-inner, .page .post-inner, .post-inner, .footer-widgets-wrapper.post-inner, .single .footer-widgets-wrapper.post-inner {
        max-width: unset;
    }
}

@media ( min-width: 800px) {
   
    .archive .preview-wrapper, .search .preview-wrapper {
        aspect-ratio: 1/1.5;
    }
    h3.preview-title {
        font-size: 2.4rem;
    }
}

@media ( min-width: 1000px ){

    /* DESKTOP/MOBILE VISIBILITY */
    .desk-visible {
        display: flex;
    }
    .mobile-visible {
        display: none;
    }
    .mobile-head.mobile-visible {
        display: none;
    
    }

    /* TYPO */

    h1, h1.heading-up {
        margin-top: 0;
    }

    h3.preview-title {
        font-size: 2.6rem;
    }
   
    /* IMG */

    .custom-logo-link img{
        max-width: 20vw;
    }
    
    .template-startseite .preview-image img {
        border-radius: 10px 0 0 10px;
    }

    .recent-episode .preview-image img {
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    .buchtipp img {
        max-height: 30vh;
    }

    .team-member .content {
        width: inherit;
    }

    .team-member img {
        max-width: 30%;
        margin: 0;
        border-radius: 0 10px 10px 0;
    }

    .monat img {
        max-width: 50%;
    }

    .preview-hoererin img {
        max-width: 25%;
    }

    .single .preview-image {
        max-width: 20vw;
    }

    /* ICONS + BUTTONS */

    .social-icons a {
        width: 3.5rem;
        height: 3.5rem;
    }
    .social-icons a::before {
        font-size: 1.5rem;
    }

    .fa a::before {
        margin-right: 0;
        }

    .main-head .widget-content a {
        font-size: 1.5rem;
    }
    .wp-block-button__link {
        padding: 0.8rem;
    }
    .widget-content .wp-block-buttons {
        display: flex;
        justify-content: start;
    }

    li.search-toggle-wrapper {
        color: var(--weisstext);
    }

    /* NAVIGATION */

    ul.site-nav{
        margin-top: 0;
        display: flex;
        flex-direction: column;
        align-items: start;
        }
    #main-menu.site-nav {
        align-items: center;
    }
    
    ul.site-nav a{
        color: var(--weisstext);
    }

    .primary-menu ul.site-nav {
        position: fixed;
    }
    .site-nav li a {
        font-size: 0rem;
    }
    #primary-menu.site-nav li a {
        font-size: 1.7rem;
    }
    .search-toggle-wrapper span.toggle {
        display: none;
    }

    /* !!! */
    .primary-menu-wrapper {
        display: unset;
    }

    /* Zweites Ausklappen */
    .sub-menu {
        display: none; /* Standardmäßig ausgeblendet */
        position: absolute; /* Positioniert relativ zum übergeordneten Element */
        left: 100%; /* Startposition rechts vom übergeordneten Menüelement */
        top: 0; /* Vertikale Ausrichtung */
        width: max-content; /* Breite des Submenus */
        height: 100vh;
        background-color: var(--dunkel); /* Hintergrundfarbe für das Submenu */
        list-style: none;
        margin: 0;
        padding-right: 2rem;
        z-index: 1000; /* Sicherstellen, dass das Submenu über dem Hauptmenü liegt */
    }
    #primary-menu .menu-item-has-children > a::after {
        content: '   \f054   '; font-family: 'Font Awesome 6';
        color: var(--weisstext);
        padding-left: 2rem;
    }
    
    #primary-menu li {
        position: relative;
    }
    
    #primary-menu li a {
        display: block;
        /*padding: 10px;*/
        text-decoration: none;
    }

    /* SEITENSTRUKTUR */

    #site-wrapper {
		padding-left: var(--aside-width);
	}
    #site-header {
        background-color: var(--dunkel);
        padding: 0;
        padding-top: 0;
        width: var(--aside-width);
    }

    #site-content {
        min-height: 100vh;
        padding: 0;
    }
    .section-inner {
        padding: 0 5%;
    }

    .search-overlay.active {
        left: var(--aside-width);
    }

    /* Header */

    .header-inner {
        justify-content: start;
        align-items: center;
    }

    .header-inner-top {
        position: fixed;
    }

    .main-head.desk-visible {
        /*display: flex;
        flex-direction: row;*/
        display: grid;
        grid-template-columns: 350px auto;
        /*grid-template-rows: 180px auto;*/
        justify-items: start;
        /*width: calc(100% - 3rem);*/
        margin: 3rem 5%;
    }
    .main-head .custom-logo-link {
        grid-area: 1/1;
    }
    
    .main-head .head-end {
        display: flex;
        flex-direction: row;
        justify-content: start;
        grid-area: 1/2/1/4;
        justify-self: end;
        align-items: center;
    }

    .main-head .footer-widgets {
        width:fit-content;
        margin-left: 3rem;
    }

    .wp-block-button__link.has-background.wp-element-button {
        word-break: initial;
    }
   
    .main-head .social-menu-wrapper {
        margin: 0 3rem;
        display: flex;
        padding-bottom: 0;
    }

    /* Footer */
    .site-footer__content a:hover, .site-footer__content a:focus {
        color: var(--rot);
    }

    .header-bottom.section-inner {
        padding-bottom: 2rem;
        padding-top: 0;
    }
    p.footer-copyright {
        margin-bottom: 0;
    }

    

    /* KOMPONENTEN */
    /* WIDGETS/SHORTCODES */
    /* PREVIEW */

    .template-startseite .preview-wrapper, .audio-header .preview-wrapper {
        grid-template-columns: 20vw auto;
        grid-template-rows: auto auto;
        /*padding-right: 10%;*/
    }
    .template-startseite .post-meta-wrapper, .audio-header .post-meta-wrapper {
        grid-area: 1/2/1/2;
        padding: 1rem 3rem 0.2rem 3rem;
        align-self: end;
    }
    .template-startseite .preview-title, .audio-header .preview-title {
        grid-area: 2/2/2/2;
        padding: 1rem 6rem 1rem 3rem;
        align-self: end;
    }
    .template-startseite .blog .preview-title {
        padding-left: 0;
    }
    .template-startseite .preview-image, .audio-header .preview-image {
        grid-area: 1/1/4/1;
        align-self: center;
    }
    .template-startseite .preview-inner, .audio-header .preview-inner {
        grid-area: 3/2/3/2;
        padding: 1rem 3rem;
        align-self: start;
    }
    .template-startseite .blog .preview-inner {
        padding-left: 0;
    }
    .blog .post-meta-wrapper, .blog .preview-title {
        align-self: start;
    }

    /* Archiv category-blog */
    .archive.category-blog .section-inner {
        padding-right: 15%;
    }

    /* STARTSEITE */

    .template-startseite #site-content .section-inner {
        padding: 5%;
    }

    .next-episode .section-inner {
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: center;
        padding: 3% 5% !important;
    }
    .next-episode p {
        margin-right: 15%;
        text-align: left;
    }
    .next-episode h2 {
        min-width: fit-content;
    }

    .news .section-inner {
        gap: 4rem;
    }
    .template-startseite #site-content .news .section-inner {
        flex-direction: column;
        padding-right: 20%;
    }

    .buchtipp {
        display: flex;
        flex-direction: column;
    }
    .buchtipp .content {
        display: flex;
        flex-direction: row-reverse;
        gap: 2rem;
        align-items: center;
        justify-content: space-between;
    }
  
    .team-member {
        flex-direction: row;
        align-items: center;   
    }

    .monat {
        max-width: 60vw;
        margin-bottom: 6rem;
    }

    /* More Episodes */ 
    .template-startseite .more-posts {
        display: flex;
        flex-wrap: wrap;
    }
    .template-startseite .more-posts .preview {
        width: 50%;
    }

    .template-startseite .more-episodes .preview-wrapper {
        display: flex;
        flex-direction: column;
    }
    .template-startseite .more-episodes .preview-inner {
        padding: 0;
    }
    .template-startseite .more-episodes .preview-title {
        padding: 0;
    }
    .template-startseite .more-episodes .post-meta-wrapper {
        padding: 0;
    }


    /* SINGLE */

    .single .post-inner, .page .post-inner, .post-inner, .footer-widgets-wrapper.post-inner, .single .footer-widgets-wrapper.post-inner {
        max-width: unset;
        padding: 5%;
    }
    .single .post-inner {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .entry-content {
        padding-right: 35%;
    }
	.entry-content .extra-margin {
		margin-right: -35%;
	}

    .single-container {
        border-radius: 0;
        box-shadow: unset;
        overflow: hidden;
    }

    /* content-audio */
    .audio-header {
        margin-top: 5vh;
    }

    /* !!!!!!!!!!!!!!!!!!!!!!!!!!! */
    .audio-header .preview-title {
        grid-area: 1/2/2/2;
        /*padding-top: 10rem;*/
    }
     /* !!!!!!!!!!!!!!!!!!!!!!!!!!! */
     .audio-header .preview-inner {
        grid-area: 4/2/2/3;
    }

    /* ARCHIV */

    .archive-header .section-inner {
        padding: 4rem 5% 0 5%;
    }

    .archive-header-inner {
        padding-right: 30%;
		margin-bottom: 2rem;
    }

    .preview-hoererin .content {
        flex-direction: row;
        align-items: center;
    }

    .posts-wrapper {
        display: flex;
    }

    /* Suche/Filter */
    .sidebar-filter {
        width: 30%;
        padding-right: 3rem;
    }

    ul.filter-nav {
        flex-direction: column;
     }

     .rechteseite .search-form {
        display: flex;
        gap: 2rem;
    }

    .sidebar-filter .search-form {
        display: none;
    }

    .buchtipp-loop-archiv {
		flex-direction: row;
	}
	.buchtipp-loop-archiv .buch-einzel {
	max-width: 18%;
    }

}

@media ( min-width: 1200px ){

    .archive .grid-sizer, .search .grid-sizer,
	.archive .preview, .search .preview {
         width: 50%;
     }
     .archive.post-type-archive-hoererin .grid-sizer, .archive.post-type-archive-hoererin .preview, .archive.category-blog .preview {
        width: unset;
     }
 
     .preview {
         margin-bottom: 4rem;
     }
 
     .preview-wrapper {
         width: calc( 100% - 3rem );
     }

     .archive .preview-wrapper, .search .preview-wrapper {
        aspect-ratio: 1/1.35;
    }

    .entry-content .alignleft {
        margin-left: unset;
      }

    /*More Episodes */
    .template-startseite .more-posts .preview {
        width: 33%;
    }

    /* Show all 6 posts */
    .more-posts article {
        display: block;
    }

}

@media (min-width: 1600px){

    /* PREVIEW */
 
     .archive .grid-sizer, .search .grid-sizer,
     .archive .preview, .search .preview {
         width: 33.333%;
     }
     .archive.category-blog .preview {
         width: unset;
     }
 
     .preview {
         margin-bottom: 5rem;
     }
 
     .preview-wrapper {
         width: calc( 100% - 4rem );
     }
 
     .archive .preview-wrapper, .search .preview-wrapper {
         aspect-ratio: 1/1.5;
     }

      /*More Episodes */
    .template-startseite .more-posts .preview {
        width: 25%;
    }
     
    /* Only show 4 posts */
    .more-posts article {
        display: none;
    }
    .more-posts article:nth-child(-n+4) {
        display: block;
    }
 }


/* --------------------------------------------------------------------------------------------- */
/*  MEDIA QUERIES - MAX-WIDTH
/* --------------------------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    
    /*.main-head .head-end {
        flex-direction: column-reverse;
    }
    .main-head .footer-widgets {
        margin-top: 0.5rem;
    }*/
}

@media (max-width: 999px) {

.section-inner {
    margin: 0 auto;
    width: calc( 100% - 3rem );
  }

/* STARTSEITE */
.schwerpunkt.card, .team, .blog, .monat{
    margin: 6rem auto;
}

.more-episodes article {
    margin: 3rem auto;
}
.rechteseite article {
    margin-bottom: 2.5rem;
}
.rechteseite .preview-title, .related-posts .preview-title {
    margin-top: 0.5rem;
}

}

@media (max-width: 370px) {
    .social-icons a {
        width: 2.5rem;
        height: 2.5rem;
    }
    .social-icons a::before {
        font-size: 1.2rem;
    }
    ul.social-icons li {
        margin: 0 0 0.2rem 0.4rem;
    }
}