/*
Theme Name:     Voice Child Markusgemeinde
Theme URI:      https://mekshq.com/voice/
Description:    Theme auf Basis von Voice Child von Meks, individuell angepasst an die Bedürfnisse der Markusgemeinde Butzbach
Author:         Stefan Erbe
Author URI:     https://stefan-erbe.com
Template:       voice
Version:        1.1.0
*/


/* ==================================================
   COLOR-VARIABLEN Import
   ================================================== */

@import 'colors-markusgemeinde.css';


/* ==================================================
   FONTS
   ================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wdth,wght@62.5..100,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lekton:ital,wght@0,400;0,700;1,400');

/*
body {
    font-family: 'Uncut Sans';
    font-size: 130%;
}


h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
.vce-post-link,
.site-title,
.site-title a,
.main-box-title,
.comment-reply-title,
.entry-title a,
.vce-single .entry-headline p,
.vce-prev-next-link,
.author-title,
.mks_pullquote,
.widget_rss ul li .rsswidget,
#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-permalink {
    font-family: Wremena,'Noto Serif';
    font-weight: 700;
    font-size: 130%;
}
*/

/* ==================================================
   VOICE BREAKPOINTS:
   - Mobile: ≤670px
   - Tablet Portrait: 671-1023px
   - Tablet Landscape: 1024-1200px
   - Desktop: 1201px+
   ================================================== */


/* ==================================================
   TYPOGRAFIE
   ================================================== */

/* Überschriften - Verbesserte Abstände */
.main-box-single h2, 
.main-box-single h3, 
.main-box-single h4 {
    margin: 70px 0 50px 0;
}

.main-box-single h5, 
.main-box-single h6, 
.main-box-single h7 {
    margin: 30px 0 15px 0;
}

.site-footer h6 {
    font-size: 15px !important;
    color: var(--color-markus-hellviolett-40);
}

.site-footer .widget {
    margin-bottom: 0;
}

/* Zitate - Grundstyle */
.wp-block-quote {
    font-style: italic;
    font-size: 20px;
}

blockquote::before, 
q::before {
    color: #ddd;
}

/* Zitate - Mobile (≤670px) */
@media (max-width: 670px) {
    .wp-block-quote,
    .herrnhuter_heading,
    .herrnhuter_copyright {
        margin: 40px 0px 40px 10px !important;
    }
}

/* Zitate - Ab Tablet Portrait (671px+) */
@media (min-width: 671px) {
    .wp-block-quote,
    .herrnhuter_heading,
    .herrnhuter_copyright {
        margin: 40px 0px 40px 200px !important;
    }

    .vce-sid-none > .wp-block-quote {
        margin: 60px -100px 60px 200px !important;
    }
}

/* Zitate - Ab Tablet Landscape (1024px+) */
@media (min-width: 1024px) {
    .herrnhuter_wrapper > .wp-block-quote {
        margin-right: 140px !important;
    }

    /* Playerfenster abgesetzt nach rechts */
    .wp-block-columns.fullwidth {
        margin-right: -150px;
    }
}


/* ==================================================
   CONTENT - ALLGEMEIN
   ================================================== */

/* Entry Meta */
.entry-meta {
    line-height: 1;
}

/* Meta-Daten ausblenden */
article.person .entry-meta,
article.gruppe .entry-meta,
article.location .entry-meta {
    display: none;
}

/* Entry Content - Erhöhte Margins */
.error404 .entry-content, 
.vce-page .entry-content, 
.vce-single .entry-content, 
.vce-single .entry-footer, 
.vce-single .entry-headline {
    margin: 60px auto;
}

/* Entry Headline */
.vce-single .entry-headline p {
    line-height: 1.63;
    font-weight: bold;
    margin-top: 70px;
}

button a,
button a:hover {
    color:white;
    text-decoration: none !important;
    font-size: 85%;
    font-family: "Noto Sans";
}

.regelmaessige_termine {
    margin-bottom: 5em;
}


/* ==================================================
   MEDIEN - AB TABLET LANDSCAPE (1024px+)
   ================================================== */

@media (min-width: 1024px) {
    
    /* Galerien - Full Width ohne Sidebar */
    .main-box-single .entry-content .wp-block-gallery {
        margin-left: -200px;
        margin-right: -200px;
        margin-bottom: 60px;
        margin-top: 60px;
    }

    /* Galerien - Mit Sidebar */
    .vce-sid-right .main-box-single .entry-content .wp-block-gallery,
    .vce-sid-left .main-box-single .entry-content .wp-block-gallery {
        margin-left: -105px;
        margin-right: -105px;
        margin-bottom: 60px;
        margin-top: 60px;
    }

    /* Video Embeds - Full Width ohne Sidebar */
    .main-box-single .entry-content .wp-block-embed.is-type-video {
        margin-bottom: 60px;
        margin-top: 60px;
        margin-left: -200px;
        margin-right: -200px;
    }

    /* Video Embeds - Mit Sidebar */
    .vce-sid-right .main-box-single .entry-content .wp-block-embed.is-type-video,
    .vce-sid-left .main-box-single .entry-content .wp-block-embed.is-type-video {
        margin-bottom: 60px;
        margin-top: 60px;
        margin-left: -105px;
        margin-right: -105px;
    }

    /* Bilder - Links ausgerichtet ohne Sidebar */
    .main-box-single .entry-content .wp-block-image.left-fit {
        margin: 60px 0px 60px -270px;
    }

    /* Bilder - Links ausgerichtet mit Sidebar */
    .vce-sid-right .main-box-single .entry-content .wp-block-image.left-fit,
    .vce-sid-left .main-box-single .entry-content .wp-block-image.left-fit {
        margin: 60px 150px 60px -105px;
    }
}


/* ==================================================
   HEADER
   ================================================== */

header .site-title img {
    height: 100px;
}

.header-sticky .site-title img {
    max-height: 35px;
}

.search-header-form-ul .vce-search-form .vce-search-input, .search-header-form-ul .vce-search-form .vce-search-input:focus {
    color: white;
}

/* ==================================================
   VIDEO MODUL (Custom)
   ================================================== */

/* Responsive Video Container - 16:9 Standard */
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    overflow: hidden;
    background: #000;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* Video Modul Wrapper */
.vce-video-module {
    margin-bottom: 30px;
}

.vce-video-module .main-box-inside {
    padding: 0;
}

/* Hover Effekt */
.vce-video-module:hover .video-container {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Loading Animation */
.video-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: video-loading 0.8s linear infinite;
}

.video-container iframe + * {
    display: none; /* Hide loading when iframe is loaded */
}

@keyframes video-loading {
    to { transform: rotate(360deg); }
}

/* Alternative Aspect Ratios */
.video-container.ratio-4-3 {
    padding-top: 75%; /* 4:3 Classic */
}

.video-container.ratio-21-9 {
    padding-top: 42.857%; /* 21:9 Ultrawide */
}

.video-container.ratio-1-1 {
    padding-top: 100%; /* 1:1 Square */
}

/* Mobile Anpassung - Voice Breakpoint */
@media (max-width: 670px) {
    .vce-video-module {
        margin-bottom: 20px;
    }
}


/* ==================================================
   LISTEN & NAVIGATION
   ================================================== */

/* Listen - Entferne Standard-Bullets */
.entry-content .wp-block-categories ul, 
.entry-content .wp-block-latest-posts, 
.entry-content .wp-block-latest-posts.is-grid {
    list-style: none;
    margin-left: 0;
}

/* Latest Posts - Styling */
.wp-block-latest-posts a {
    margin: 0 0 30px 0;
    font-weight: bold;
}

.wp-block-latest-posts__post-excerpt {
    font-size: 90%;
}


/* ==================================================
   FOOTER
   ================================================== */

/* Footer Widgets - Entferne Hintergrund */
.site-footer .widget {
    background: none;
    border: none;
}

/* Footer Widget Titel */
.site-footer .widget-title {
    background: none;
    border: none;
    text-align: left;
    text-transform: none;
}


/* ==================================================
   FEATURED CONTENT
   ================================================== */

/* Featured Grid - Text Padding */
.vce-featured-grid-big .vce-grid-text .vce-featured-info {
    padding: 36% 20px 0 20px;
}


/* ==================================================
   SPEZIELLE CONTENT-BOXEN
   ================================================== */

/* Transparente Box */
.main-box.transparent {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Borderless - Komplett ohne Abstände */
.borderless .main-box-inside {
    margin: 0px;
    padding: 0px;
}

.borderless p {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* Abstand - Zusätzlicher vertikaler Raum */
.abstand {
    margin-top: 5em;
    margin-bottom: 6em;
}


/* ==================================================
   HINWEIS-BOXEN
   ================================================== */

.hinweis,
.kurz-hinweis {
    background: var(--color-ekhn-violett) !important;
    margin: 3em 0px; 
    padding: 1em;
    color: var(--color-ekhn-grau-5);
}

.kurz-hinweis p::before {
    content: "🛈 ";
    font-size: 180%;
}

/* Versteckt kurz-hinweis wenn nur no-content Marker vorhanden */
.kurz-hinweis:has(.no-content) {
    display: none;
}

/* ODER: Zeigt nur an wenn has-content vorhanden */
.kurz-hinweis:not(:has(.has-content)) {
    display: none;
}


/* ==================================================
   PERSONEN-DARSTELLUNG
   ================================================== */

/* Gruppen-Container */
.persons-group {
    margin-bottom: 40px;
    margin-top: 40px;
}
.persons-group h5 {
    padding-top: 40px;
    border-top: 1px solid var(--color-markus-hellviolett-70);
}

.person_funktion ul {
    list-style: none;         /* Bulletpoints entfernen */
    margin: 0;
    padding: 0;
}

.person_funktion li {
    display: inline;          /* Listenelemente in einer Zeile */
}

.person_funktion li::after {
    content: " · ";           /* Mittepunkt als Trenner */
}

.person_funktion li:last-child::after {
    content: "";              /* kein Trenner nach dem letzten */
}

.person-small .person_funktion li::after {
    content: "";
}

.person-small li:not(:first-child) {
    display: none;
}


/* ==================================================
   STANDARD LAYOUT (nebeneinander: Bild links, Text rechts)
   ================================================== */
/* Einzelne Person */
.person-container {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 30px;
    align-items: start;
    padding: 20px 0;
}

/* Letzte Person ohne Trennlinie */
.person-container:last-child {
    border-bottom: none;
}

/* Bild */
.person_img img {
    border-radius: 100%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
}
.person_img .person_empty {
    background-image: url("assets/img/account-grey-icon.svg");
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;  /* <- Hinzufügen */
}

footer .person_img img {
    width: 100px;
    height: 100px;
}

.site-footer .widget-title {
    margin: 0 0 0 0; 
}


/* Details */
.person_details {
    padding: 0px 0;
}
h6.person_name {
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: bold;
}
.person_funktion {
    font-size: 14px;
    color: var(--color-ekhn-grau-3);
    margin-bottom: 15px;
}
.person_telefon,
.person_email {
    margin-bottom: 0px;
}
.person_bio {
    font-size: 85%;
    line-height: 150%;
    margin-bottom: 1rem;
}

.person-manuell {
    text-align: center;
}

/* ==================================================
   KLEINES LAYOUT (Kacheln nebeneinander)
   ================================================== */
.person-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
    margin-top: 30px;
}

/* Container innerhalb von person-small */
.person-small .person-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px 5px;
    gap: 10px;
    border: none; /* Keine Trennlinien */
    /* background: #f9f9f9; */ /* Optionaler Hintergrund */
    /* border-radius: 8px; */ /* Abgerundete Ecken */
    /* transition: transform 0.2s ease, box-shadow 0.2s ease; */
}

/* Hover-Effekt für Kacheln */
/*
.person-small .person-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
*/

/* Kleines Bild (75x75) */
.person-small .person_img img {
    width: 75px;
    height: 75px;
    margin: 0; /* Kein margin bei zentriertem Layout */
}

.person-small .person_img .person_empty {
    width: 75px;
    height: 75px;
    background-size: contain;
    display: block;
    margin: 0 auto;  /* <- Hinzufügen */
}

/* Details zentriert */
.person-small .person_details {
    padding: 0;
    width: 100%; /* Volle Breite für zentrierten Text */
}

.person-small h6.person_name {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 16px;
}

.person-small .person_funktion {
    font-size: 13px;
    margin-bottom: 0;
}

/* Telefon/Email/Bio bei kleinem Layout ausblenden */
.person-small .person_telefon,
.person-small .person_email,
.person-small .person_kontaktformular,
.person-small .person_bio {
    display: none;
}

/* ==================================================
   RESPONSIVE
   ================================================== */
/* Standard Layout - Mobile */
@media (max-width: 670px) {
    .person-container {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }
    
    .person_img img {
        margin: 0 auto;
    }
}

/* Kleines Layout - Mobile (2 Spalten statt 3-4) */
@media (max-width: 670px) {
    .person-small {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Kleines Layout - Sehr kleine Geräte (1 Spalte) */
@media (max-width: 400px) {
    .person-small {
        grid-template-columns: 1fr;
    }
}


/* ==================================================
   GEMEINDEBRIEF
   ================================================== */

/* Verstecke Header in Einzelansicht */
.single-gemeindebrief .entry-header {
    display: none;
}

/* Post Liste - Kompakte Darstellung */
.gemeindebrief .post-list li {
    margin-bottom: 0.5em;
}

.gemeindebrief .post-list ul {
    list-style-type: none !important;
}

/* Gemeindebrief Text-Elemente */
.autor {
    font-style: italic;
}

.excerpt {
    font-weight: bold;
}

.gemeindebrief-verweis img {
    max-width: 220px;
}


/* ==================================================
   BIBELTEXT
   ================================================== */
   
.bibeltext {
    font-family: "Noto Serif";
    padding-bottom: 1em;
}

.bibeltext_linktext {
    font-size: 80%;
}


/* ==================================================
   VERANSTALTUNG
   ================================================== */
   
   
.veranstaltung_abgesagt {
    margin-bottom: 2em; 
    padding: 1em;
    background-color: var(--color-markus-rot);
    color: white;
    margin-top: 0;
    margin-bottom: 60px;
}

.veranstaltung_abgesagt a {
    color: white;
}

.veranstaltung_abgesagt p {
    font-size: 150%;
    font-weight: bold;
    margin-bottom: 0.3em;
}

@media (min-width: 1024px) {
    .single-location .veranstaltung_meta {
      margin-left: -200px;
      margin-right: -200px;
    }
}

.veranstaltung_meta {
    margin-bottom: 3em;
    padding: 1em;
    background-color: var(--color-ekhn-violett-80);
    color: var(--color-ekhn-grau-5);
}

.veranstaltung_meta a {
    color: var(--color-ekhn-grau-5);
}

.veranstaltung_meta table,
.veranstaltung_meta table * {
    background: none;
    border: none;
}

.veranstaltung_meta td,
.veranstaltung_meta th {
    padding-left: 0;
}

.veranstaltung_meta .date_time {
    font-family: "Lekton";
    font-size: 110%;
}

.datum {

}

.datum_abgesagt {
    text-decoration: line-through;
}

.zeit {
    padding-left: 0.3em;
}

.ort {

}


/* ==================================================
   HERRNHUTER LOSUNGEN
   ================================================== */

.herrnhuter_heading {
    border-top: none !important;
    background: none !important;
    box-shadow: none !important;
    text-align: unset;
    padding: 0;
    color: var(--color-markus-violett);
}

.herrnhuter_copyright,
.herrnhuter_copyright a {
    color: #888888 !important;
    font-size: 12px;
}


/* KONTAKTFORMULAR */

label {
    font-size: 120%;    
}


/* KONTAKTFORUMLAR POPUP */

.swal2-close {
    margin-bottom: 10px !important;
    background-color: var(--color-markus-violett) !important;
}

.swal2-close:hover {
    background: var(--color-markus-violett) !important;
}

.wpb-pcf-btn {
  display: inline;
  margin-top: 1rem;
  margin-bottom: 1rem;
}


/* MAP */

/*
@media (min-width: 1201px) {
    .vce-sid-none .entry-content .leaflet-map,
    .vce-sid-none .entry-content .leafext-dsgvo {
        margin-left: -270px;
        margin-right: -270px;
        margin-bottom: -60px;
    }
}
*/


/* PERSON SINGLE */

.single-person .meta-image,
.single-person .entry-header,
.single-person .entry-headline {
    display: none;
}

/* Header Ads (Logo GKG) ausblenden bei kleinen Displays */
@media (max-width: 1023px) {
    .vce-header-ads {
        display: none;
    }
}


/* Burger-Menu */
.vce-responsive-nav {
  color: var(--color-markus-violett);
}


/* In Single Location Veranstaltung-Meta nach 2. Absatz anzeigen */

.single-location .entry-content {
    display: grid;
}

/* Erste 3 Paragraphen kommen zuerst */
/*.single-location .entry-content > p:nth-of-type(1),
.single-location .entry-content > p:nth-of-type(2) {
    order: -1;
}*/

/* Dann das veranstaltung_meta div */
.single-location .entry-content > .veranstaltung_meta {
    order: 0;
}

/* Restliche Paragraphen kommen danach (haben automatisch order: 0,
   erscheinen aber nach veranstaltung_meta wegen HTML-Reihenfolge) */

.veranstaltung_tabelle {
    font-size: 80%;
    width:100%;
    margin-top: 0.8em;
}


.leaflet-container {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
}


.visdp .person_funktion ul {
    display: none;
}

.visdp .person_funktion::before {
    content: "V.i.s.d.P.";
}


/* Tabelle Probenplan, von Kirchenmusik übernommen */
@media (min-width: 1024px) {
    .imported-content .no-margin .wp-block-table,
    .imported-content .wp-block-table.no-margin {
        margin-left: -200px;
        margin-right: -200px;
        margin-top: 60px;
        margin-bottom: 60px;
    }
}

.nachbargemeinden a {
    color: rgb(223, 213, 230) !important;
}

.nachbargemeinden a:hover {
    color: inherit;
}

.vce-photo-caption,
.wp-block-image figcaption,
.wp-caption .wp-caption-text {
    font-style: italic;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}

.vce-photo-caption a,
.wp-block-image figcaption a,
.wp-caption .wp-caption-text a {
    color: inherit;
}

.main-box-title a:after {
    content: "";
}

.main-box-title a,
.main-box-title a:hover {
    color: inherit;
}

strong {
    font-weight: bold;
}

.leafext-dsgvo {
  color: var(--color-ekhn-violett);
}



.wp-block-image figcaption {
  /* color: #b097c2; */
  color: inherit;
}

.vce-photo-caption, .wp-block-image figcaption, .wp-caption .wp-caption-text {
  /* background-color: rgba(0, 0, 0, 0.2) !important; */
  /* text-shadow: 0px 0px 5px rgba(0, 0, 0, 1); */
  background-color: white;
  text-shadow:inherit;
}