/*
Theme Name: Tagungszentrum TT5-Child
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: tagungszentrum-tt5-child
Tags: 
*/


/* --- 1. DER HEADER-BALKEN - Animiertes Logo --- */
/* 1. Der äußere Header-Behälter wird sticky und schrumpft nicht schlagartig */
header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: -50px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: inherit; /* Verhindert, dass der Inhalt beim Scrollen durchscheint */
}

@media (max-width: 783px) {
    header {
    
        top: 0px !important;

    }
}

/* 2. Standard-Zustand: Großer Header */
header > .wp-block-group {
    padding: 20px 0 20px 0 !important; 
    transition: padding 0.4s ease-in-out, box-shadow 0.3s ease-in-out !important;
    width: 100% !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* 3. Scroll-Zustand: Header wird kleiner, bleibt aber sticky anstatt fixed zu springen */
header.scrolled > .wp-block-group {
    /* WICHTIG: position: fixed wurde entfernt! */
    padding: 5px 0 5px 0 !important; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; /* Etwas stärkerer Schatten beim Scrollen */
}



/* --- 2. DER ISOLIERTE VORHANG NUR FÜR DAS LOGO --- */

.logo-vorhang {
    display: block !important;
    position: relative !important;
    overflow: hidden !important; /* Erzwingt, dass nichts aus dieser Box herausragt! */
    width: 224px !important;    
    height: 102px !important;   
    margin: 0 !important;
    transition: transform 0.4s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out !important;
}

/* Scroll-Zustand für den Vorhang-Kasten */
header.scrolled .logo-vorhang {
    height: 50px !important;            
    width: 55px !important; 
    transform: translateY(0px) !important; 
}

/* Das eigentliche Logo-Bild im Kasten */
.logo-voll {
    display: block !important;
    width: 222px !important;    
    height: 97px !important;    
    transition: transform 0.4s ease-in-out !important;
    transform: translate(0, 0) scale(1) !important; 
}



/* Scroll-ZUSTAND FÜR DAS LOGO */
header.scrolled .logo-vorhang .logo-voll {
    transform: translate(-135px, -15px) scale(0.7) !important; 
}




/* --- 3. BARRIEREFREIHEIT: FOKUSRAHMEN FÜR DAS LOGO --- */

/* 1. Verhindert, dass der Fokusrahmen durch overflow:hidden abgeschnitten wird */
.logo-voll:has(a:focus-visible) {
    overflow: visible !important;
}

/* 2. Der eigentliche Fokusrahmen auf dem Link im Vorhang */
.logo-voll a:focus-visible {
    outline: 2px solid #ffffff !important; /* Weißer Rahmen */
    outline-offset: -2px !important;       /* Zieht den Rahmen leicht nach INNEN, um sicherzugehen */
    position: relative !important;
    z-index: 99999 !important;
    display: block !important;
}







/* FONTS */

/* Erzwingt das Medium-Gewicht (500) für alle fetten Texte */
strong, b, .has-font-weight-bold {
    font-weight: 600 !important;
}









/* BREAKPOINT: Ab 900px abwärts schaltet das Menü zum Hamburger um */
@media (max-width: 900px) {

    /* 1. Erzwinge das Anzeigen des Hamburger-Icons */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex !important;
    }

    /* 2. Verstecke die horizontale Link-Leiste, außer das Menü-Overlay wurde geöffnet */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
}

/* DESKTOP-REGELN: Ab 900px bleibt alles horizontal */
@media (min-width: 900px) {

    /* Verstecke das Hamburger-Icon im Desktop-Bereich */
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    /* Zeige die normale Link-Leiste horizontal an */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: flex !important;
        position: relative;
        flex-direction: row !important;
    }
}










/* Macht das Hamburger-Icon im Header breiter */
body .wp-block-navigation .wp-block-navigation__responsive-container-open svg {
    width: 44px !important;    /* Standard ist ca. 24px - macht das Icon breiter */
    height: 39px !important;   /* Hält die Höhe flach, damit es gestreckt wirkt */
    overflow: visible !important;
}

/* Dehnt die Linien im Vektor selbst aus, damit sie nicht verzerrt wirken */
body .wp-block-navigation .wp-block-navigation__responsive-container-open svg rect,
body .wp-block-navigation .wp-block-navigation__responsive-container-open svg path {
    transform: scaleX(1.2) !important; /* Streckt die 3 Linien um 40% in die Breite */
    transform-origin: center;
}



/* DIE OVERLAY-ANIMATION: VON OBEN NACH UNTEN SLIDEN */
.wp-block-navigation__responsive-container.is-menu-open {
    /* Spielt die Slide-Animation ab (Dauer: 0.8 Sekunden) */
    animation: slideVonOben 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}


/* DEFINITION DER ANIMATIONEN */
/* 1. Das gesamte Overlay slidet von oben (-100%) in den sichtbaren Bereich (0) */
@keyframes slideVonOben {
    from {
        transform: translateY(-100%);
        
    }
    to {
        transform: translateY(0);
        
    }
}


.no-decoration{
	text-decoration: none;
}

.title-decoration{
	text-decoration: none;
}
.title-decoration:hover{
	text-decoration: underline;
}

.close-icon svg{
	width: 50px;
	height: 50px;
	
}

@media (max-width: 781px) {
  .wp-block-columns.mobil-umkehren {
    flex-direction: column-reverse !important;
  }
}




/* 1. Barrierefreiheit: Unsichtbarer Text für Screenreader erzeugen */
.btn-extern a[target="_blank"]::before {
    content: " (externer Link)";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 10px!important;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 2. Das WebP-Icon für Sehende über die absolute URL hinzufügen */
.btn-extern a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.8rem;   
    height: 0.9rem; 
    margin-left: 6px;
    vertical-align: middle;
	transform: translateY(-2px);
    background-image: url('https://tagungszentrum-muenchen.de/wp-content/uploads/externerlink.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 3. Dein gewünschter Hover-Effekt */
.btn-extern a:hover {
    background-color: var(--wp--preset--color--accent-4) !important;
    color: var(--wp--preset--color--base) !important;
}







.custom-col-width{
	
	min-width: 230px;
}













/* Lightbox */

#custom-lightbox {
	display: none;
	position: fixed;
	z-index: 999991;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	text-align: center;
}

.lightbox-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 12px;
	z-index: 999992;
	text-align: center;
	width: 90%;
	max-width: 70vh;
	height: auto;
	max-height: 94vh;
	overflow: visible; /* Wichtig, damit der Text fließen kann */
}


.lightbox-image {
	max-width: 100%;
	/* 130px Platzhalter für deine 3 Zeilen Text auf dem Desktop */
	max-height: calc(94vh - 130px); 
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	z-index: 999993;
	border-radius: 0!important;
}

.close-lightbox {
	width: 23px;
	height: 24px;
	color: #444;
	position: absolute;
	top: 0;
	right:10px;
	font-size: 29px;
	background-color: #eee;
	border: 0 solid #444;
	border-radius: 50%;
	padding: 0 0 0 1px;
	cursor: pointer;
	text-align: center;
	/* Horizontal zentrieren */
	line-height: 23px;
	/* Vertikal zentrieren */
	box-shadow: 0 0 10px #000;
	z-index: 999994;
}

.prev-image {
	position: relative;
	width: 21px;
	height: 24px;
	color: #333;
	float: left;
	margin-top: -40%;
	left: 0;
	font-size: 32px;
	background-color: #eee;
	border: none;
	border-radius: 50%;
	box-shadow: 0 0 10px #000;
	padding: 0 3px 0 0;
	cursor: pointer;
	text-align: center;
	line-height: 19px;
	/* Vertikal zentrieren */
	border: 0 solid #ddd;
	z-index: 999995;
}

.next-image {
	position: relative;
	width: 21px;
	height: 24px;
	color: #333;
	float: right;
	margin-top: -40%;
	right: 8;
	font-size: 32px;
	background-color: #eee;
	border: none;
	border-radius: 50%;
	padding: 0 0 0 3px;
	cursor: pointer;
	text-align: center;
	line-height: 19px;
	/* Vertikal zentrieren */
	border: 0 solid #ddd;
	z-index: 999995!important;
	box-shadow: 0 0 10px #000;
}

.prev-image:hover, .next-image:hover, .close-lightbox:hover  {
	background-color: #fff;
	box-shadow: 0 0 0px #000;
	color: #666;
}

.prev-image:active, .prev-image:focus, .next-image:active, .next-image:focus {
	background-color: #fff;
	color: #333;
}


.lightbox-caption {
	display: none;
	color: #fff;
	font-size: 12px;
	font-family: "Roboto Light", sans-serif !important;
	font-weight: normal !important;
	line-height: 1.2 !important; 
	text-align: center;
	margin-top: 10px; /* Rückt den gesamten Textblock näher an das Bild */
	padding: 0 10px;
	z-index: 999996;
}