/*
Theme Name:   Tagungshaus
Theme URI:    
Author:       armin
Author URI:   
Description:  Eigenständiges WordPress-Theme für Tagungs-, Seminar- und Veranstaltungsorte. Klassisches PHP-Theme, Gutenberg-kompatibel, ohne ACF-Abhängigkeit.
Version:      1.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  tagungshaus
*/

/* ==========================================================================
   CSS-VARIABLEN / DESIGN TOKENS
   ========================================================================== */

:root {
  /*  – Festes/Transparentes Blau & edle Akzente für TJP */
  --color-primary: #182b49;          
  --color-primary-dark: #3D7A28;     /* für Hover/Hintergründe */
  --color-primary-light: #DEC63E;    
  --header-blue: rgba(24, 43, 73); 
  --color-tjp-footer:#005784;          /* Footer-Farbe für TJP */
  
  --color-accent: #89b1de;          
  --color-accent-dark: #507bab;        /* für Hover/Hintergründe */
  
  --color-sand: #f4efe6;             /* Heller Hintergrund für Sektionen */
  --color-sand-dark: #c8b692;
  
  --color-ink: #1a1a1a;              /* Fast Schwarz für optimal lesbaren Text */
  --color-ink-soft: #615c5c;
  --color-box: #666666;         /* Sanfteres Grau für Nebeninfos */
  --color-white: #ffffff;
  --color-border: #dcdcdc;

  --color-button: #82B84C;

  --color-footer-bar: #89b1de;

  /* TYPOGRAFIE */
  --font-heading: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  --font-body: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

  /* ABSTÄNDE */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* LAYOUT */
  --content-width: 1180px;
  --radius: 6px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
  --header-height: 80px; /* tatsächliche Höhe des fixierten Headers */
}

/* ==========================================================================
   RESET & BASICS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: 72px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--color-primary); }


h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}
h1, h2, h4 {
  
  color: var(--color-primary); 
 }
h3 {
  color: var(--color-ink-soft); 

}

h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--space-sm); }

ul { padding-left: 1.2rem; }

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 600px) {
  .container { padding: 0 var(--space-sm); }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
/* Basis für alle normalen Buttons UND Formular-Absende-Buttons */

input[type="submit"],
input[type="button"],
button,
.wp-block-button__link {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  background: var(--color-accent); 
  color: var(--color-white) !important; 
  border: 2px solid var(--color-accent); 
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
 
}

/* Zentraler Hover-Effekt für die Standard- und Formular-Buttons */

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.wp-block-button__link:hover {
  background: var(--color-primary) !important; 
  color: var(--color-accent-dark) !important; 
  border-color: var(--color-primary) !important;
  transform: translateY(-1px);
}
/* Spezielle Button-Varianten */
.btn {
  display: inline-block;
  padding: 0.85rem 1.8rem;
  background: var(--color-button);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-1px);
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: var(--color-primary) !important;
  /* border-bottom: 8px solid var(--color-accent); */
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  min-height: var(--header-height);
}

/* WordPress Admin-Bar: schiebt den fixierten Header entsprechend nach unten,
   damit er nicht dahinter verschwindet (nur relevant für eingeloggte Admins) */

@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.site-branding { display: flex; align-items: center; gap: 0.6rem; }
.site-branding img { max-height: 48px; }
.site-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-primary-dark);
  margin: 0;
}
.site-title a { color: inherit; }

.main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-md);
}
.main-navigation a {
  color: var(--color-white) !important;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 1.15rem !important; 
  font-weight: 600 !important;  
}

.site-header .main-navigation a:hover {
  color: var(--color-accent) !important;
}

.site-header .main-navigation .current-menu-item > a {
  color: var(--color-accent) !important;
  font-size:large;
  font-weight: bold !important;
  text-decoration: underline !important;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-primary-dark);
  margin: 5px 0;
}

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .main-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-primary);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .main-navigation.is-open { display: block; }
  .main-navigation ul {
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
  .main-navigation li { border-bottom: 1px solid var(--color-border); }
  .main-navigation a { display: block; padding: 0.9rem 0; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section { padding: var(--space-xl) 0; }
.section--sand { background: var(--color-sand); }

.section__header { max-width: 680px; margin: 0 auto var(--space-lg); text-align: center; }
.section__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

/* Feature-Grid (Über uns / Vorteile) */
.feature-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.feature-card .icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
}

/* ==========================================================================
   KONTAKT / ANFRAGE-FORMULAR
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-lg);
}
@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-info-card {
  background: var(--color-sand);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.contact-info-card h3 { margin-top: var(--space-sm); }
.contact-info-card h3:first-child { margin-top: 0; }

.form-row { margin-bottom: var(--space-sm); }
.form-row label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-white);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-primary);
  color: var(--color-sand);
  padding: var(--space-lg) 0 var(--space-md);
}

/* Das Grid auf 4 Spalten aufgeteilt */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  align-items: start;
}

/* Responsiv: Auf Mobilgeräten untereinander stapeln */
@media (max-width: 880px) { 
  .footer-grid { 
    grid-template-columns: 1fr; 
    gap: var(--space-md); 
    text-align: center;
  } 
  
  .footer-col {
    align-items: center;
  }

  .footer-colored-links a {
    justify-content: center;
  }

  .footer-social {
    justify-content: center;
  }
}

.site-footer h3 { 
  color: var(--color-white); 
  font-size: 1.05rem; 
}

/* Spalten-Layout */
.footer-col {
  display: flex;
  flex-direction: column;
  
}

.footer-logo-col img {
  max-width: 120px;
  height: auto;
  display: block;
}

.footer-address {
  margin-top: var(--space-xs);
  line-height: 1.4;
  font-size: 0.95rem;
  margin-left:20px;
  
}

/* Link-Listen (Spalte 2 & 3) */
.footer-links,
.footer-colored-links {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-links li,
.footer-colored-links li {
  list-style: none !important;
  background: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Standard-Linkfarbe */
.site-footer a { 
  color: var(--color-sand); 
  text-decoration: none;
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.site-footer .footer-links a:hover { 
  color: #89B1DE !important; 
}

/* Farbige Links (Spalte 4) */
.footer-colored-links a {
  font-weight: 600;
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease; 
}

.footer-colored-links a.link-tjp { color: #3265ac !important; }
.footer-colored-links a.link-aeh { color: #26d07c !important; }
.footer-colored-links a.link-kita { color: #fff6a3 !important; }
.footer-colored-links a.link-event { color: #00c3ff !important; }
.footer-colored-links a.link-gwl { color: #ff5500 !important; }

.footer-colored-links a:hover {
  opacity: 0.85;
display: inline-block;
  transform: scale(1.1); 
}

/* Social Icons */
.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.footer-social a {
  color: var(--color-sand);
}

.footer-social a:hover {
  color: #89B1DE !important;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(244,239,230,0.15);
  padding-top: var(--space-sm);
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  color: rgba(244,239,230,0.7);
}

.footer-bottom a { 
  color: rgba(244,239,230,0.7); 
}


/* ==========================================================================
   PRE-FOOTER BORDER
   ========================================================================== */
.pre-footer-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-footer-bar);
    display: block;
    margin: 0;
    padding: 0;
    clear: both; 
}

/* ==========================================================================
   GUTENBERG / EDITOR CONTENT
   ========================================================================== */

.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content > * { margin-bottom: var(--space-sm); }
.entry-content h2 { margin-top: var(--space-lg); }
.entry-content figure { margin: var(--space-md) 0; }
.entry-content figcaption { font-size: 0.85rem; color: var(--color-ink-soft); text-align: center; margin-top: 0.4rem; }
.alignfull { width: 100%; max-width: 100%; }
.alignwide { max-width: 1000px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  background: var(--color-white);
  padding: 0.5rem 1rem;
  z-index: 999;
}

/* Limitiert das Logo kompromisslos in der Breite */
.site-branding img,
.custom-logo {
    max-width: 250px !important;
    height: auto !important;
    display: block;
}



/* ==========================================================================
   ASYMMETRISCHES LAYOUT (TITEL LINKS, BILD RECHTS)
   ========================================================================== */
.split-hero {
    display: flex;
    width: 100%;
    height: 45vh;
    min-height: 350px;
    margin-top: 0;
    margin-bottom: var(--space-md);
}

/* Die Box für den Titel */
.split-hero__text {
    flex: 0 0 45%; 
    background-color: var(--color-accent); 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.split-hero__text h1 {
    color: var(--color-white) !important;
    font-size: clamp(2.5rem, 5vw, 4rem);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 2px;
}

/* Die Box für das Bild */
.split-hero__image {
    flex: 0 0 55%; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 8px solid var(--color-accent);  /* Passe die Breite (8px) nach Wunsch an */
}

/* Mobile Verteidigungslinie: Bild oben, Text unten (oder umgekehrt, je nach Flex-Order) */
@media screen and (max-width: 850px) {
    .split-hero {
        flex-direction: column-reverse; /* Zieht auf dem Handy das Bild nach oben, Titel darunter */
        height: auto;
        margin-top: 0;
        margin-bottom: var(--space-xs);
    }
    .split-hero__image {
        height: 300px;
        flex: auto;
    }
    .split-hero__text {
        padding: 3rem 1rem;
        flex: auto;
    }
}



/*========================================================================= 
  KONTAKT
  =========================================================================*/
/* Container fixiert an der rechten Bildschirmkante in der Mitte */
.global-kontakt-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    font-family: sans-serif;
    
}

/* Versteckte Checkbox für die Klick-Logik */
.kontakt-checkbox {
    display: none;
}


/* Der grüne, vertikale Button */
.kontakt-button {
    display: block;
    background-color: var(--color-accent);
    color: var(--color-primary); 
    font-weight: bold;
    padding: 20px 15px;
    cursor: pointer;
    writing-mode: vertical-rl; /* Dreht den Text vertikal */
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}



/* Das Infofeld  */
.kontakt-flyout {
    position: absolute;
    top: 50%;
    right: -320px; /* Breite des Feldes außerhalb des Sichtbereichs */
    transform: translateY(-50%);
    width: 280px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    padding: 40px;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
    transition: right 0.3s ease;
    border-radius: 6px 0 0 6px;
}

/* Typografie im Flyout (passend zu deinen Bildern) */
.kontakt-flyout h3 {
    margin-top: 0;
    font-size: 16px;
    margin-bottom: 5px;
}
.kontakt-flyout p {
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.4;
}
.kontakt-flyout .kontakt-tel,
.kontakt-flyout .kontakt-email {
    color: #ffffff; /* Weiße Schrift für die Kontaktdaten */
    font-weight: 500;
}

/* Der weiße Button/Link unten */
.kontakt-link {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 2px solid #ffffff;
    padding-bottom: 2px;
    font-weight: bold;
    font-size: 13px;
    margin-top: 10px;
}

/* Schließen-Kreuz */
.kontakt-close {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
}

/* --- LOGIK BEIM ANKLICKEN --- */

/* Wenn aktiv: Verschiebe das Infofeld ins Bild und verstecke den Button */
.kontakt-checkbox:checked ~ .kontakt-flyout {
    right: 0;
}
.kontakt-checkbox:checked ~ .kontakt-button {
    transform: translateX(100%); /* Button rutscht aus dem Bild */
}


.hero-text-bottom-left h1
{
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3rem, 10vw, 6rem);    
    text-shadow: 
                 3px  3px 3px black,
                  3px -3px 3px black,
                 -3px  3px 3px black,
                 -3px -3px 3px black;
}
.hero-text-bottom-left h2 {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(1.5rem, 7vw, 4rem);
    text-shadow: 
                 3px  3px 3px black,
                  3px -3px 3px black,
                 -3px  3px 3px black,
                 -3px -3px 3px black;
}


/* ========== Basis-Styles (Frontend & Editor) ========== */
.front-page-hero {
    position: relative;
    margin-top: 0px;
    height: calc(100vh + 0px);
    overflow: hidden;
}

.hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('/wp-content/uploads/2026/07/Aussenansicht.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-text-bottom-left {
    position: absolute;
    bottom: 350px;
    left: 100px;
    z-index: 1;
    font-size: 50px !important;
    line-height: 1.1;
    opacity: 1;
    display: block;
}

/* ========== NUR Frontend ========== */
body:not(.wp-admin) .front-page-hero {
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

body:not(.wp-admin) .hero-image {
    transform: scale(1.25);
    animation: heroZoomOut 6s ease-out forwards;
}

@keyframes heroZoomOut {
    from { transform: scale(1.25); }
    to { transform: scale(1); }
}

/* ========== NUR Editor (optional, für Vorschau) ========== */
body.wp-admin .hero-image {
    transform: scale(1);
    animation: none;
}

/* ==========================================================================
   MEDIEN UND TEXT BLOCK
   ========================================================================= */
@media (min-width: 600px) {

    /* --- BASIS-GRID  --- */
    .medien-ueberlagerung {
        display: grid !important;
        grid-template-columns: repeat(20, 1fr) !important; /* 20 absolut gleiche Spalten */
        overflow: visible !important;
        width: 100% !important;
        
    }

    /* Bild bleibt volle Breite/Höhe der Grid-Zeile */
    .medien-ueberlagerung .wp-block-media-text__media {
        width: 100% !important;
        margin: 0 !important;
    }
    .medien-ueberlagerung .wp-block-media-text__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Textkästen-Basis: Höhe richtet sich jetzt nach dem Inhalt, nicht mehr nach dem Bild */
    .medien-ueberlagerung .wp-block-media-text__content {
        padding: 40px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        z-index: 10;
        width: 100% !important;
        height: auto !important;     
        margin: 0 !important;
        box-sizing: border-box !important;
    }

   
    .medien-ueberlagerung .wp-block-media-text__content h2,
    .medien-ueberlagerung .wp-block-media-text__content p {
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 0 15px 0 !important;
    }
    .medien-ueberlagerung .wp-block-media-text__content p:last-child {
        margin-bottom: 0 !important;
    }


    /* --- BLOCK 1 (OBEN): BILD LINKS, TEXT RECHTS-OBEN --- */

    .medien-ueberlagerung:not(.has-media-on-the-right) .wp-block-media-text__media {
        grid-column: 1 / 14 !important;
        grid-row: 1 !important;
    }

    .medien-ueberlagerung:not(.has-media-on-the-right) .wp-block-media-text__content {
        grid-column: 12 / 21 !important;
        grid-row: 1 !important;
        align-self: start !important;   /* <-- Box sitzt oben, nicht zentriert */
        background-color: rgba(137, 177, 222, 0.75) !important; 
    }

    /* Farben Block 1 */
    .medien-ueberlagerung:not(.has-media-on-the-right) .wp-block-media-text__content h2 {
        color: #ffffff !important;
    }
    .medien-ueberlagerung:not(.has-media-on-the-right) .wp-block-media-text__content p {
        color: #182b49 !important;
    }


    /* --- BLOCK 2 (UNTEN): TEXT LINKS-UNTEN, BILD RECHTS --- */

    .medien-ueberlagerung.has-media-on-the-right .wp-block-media-text__media {
        grid-column: 8 / 21 !important;
        grid-row: 1 !important;
    }

    .medien-ueberlagerung.has-media-on-the-right .wp-block-media-text__content {
        grid-column: 1 / 10 !important;
        grid-row: 1 !important;
        align-self: end !important;     /* <-- Box sitzt unten, nicht zentriert */
        background-color: rgba(137, 177, 222, 0.75) !important;
    }

    /* Farben Block 2 */
    .medien-ueberlagerung.has-media-on-the-right .wp-block-media-text__content h2 {
        color: #ffffff !important;
    }
    .medien-ueberlagerung.has-media-on-the-right .wp-block-media-text__content p {
        color: #182b49 !important;
    }
}

/*==============================
 * Uhrzeit Forminator
 * =============================*/
/* Zwingt Stunden und Minuten nebeneinander */
.kompakte-zeit .forminator-row {
    display: flex !important;
    gap: 15px; /* Abstand zwischen Stunden und Minuten */
}

/* Verhindert, dass die Felder untereinander brechen */
.kompakte-zeit .forminator-col {
    flex: 1 !important;
    margin-bottom: 0 !important;
}

/* Fügt ein kleines optisches Trennzeichen (Doppelpunkt) zwischen die Felder */
.kompakte-zeit .forminator-col:first-child::after {
   /* content: ":";*/
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 18px;
    color: #333;
}

/* Setzt die relative Positionierung, damit der Doppelpunkt richtig sitzt */
.kompakte-zeit .forminator-col:first-child {
    position: relative;
}
#time-1-minutes {
    display: none;
}
#time-2-minutes {
    display: none;
}

/* ==========================================================================
   Foto und Text Slider
   ========================================================================== */
   .slide-left,
.slide-right {
    opacity: 0;
    transition: transform 0.9s ease-out, opacity 0.9s ease-out;
    will-change: transform, opacity;
}

.slide-left {
    transform: translateX(-120px);
}

.slide-right {
    transform: translateX(120px);
}

.slide-left.is-visible,
.slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Zeitversatz für Staffelung */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }
.delay-5 { transition-delay: 0.75s; }

@media (max-width: 782px) {
    .slide-left,
    .slide-right {
        transform: translateY(40px);
    }
    .slide-left.is-visible,
    .slide-right.is-visible {
        transform: translateY(0);
    }
}

/* Die Columns-Reihe: Spalten auf gleiche Höhe strecken */
.wp-block-columns {
    align-items: stretch;
    gap: 0;
}

/* Die einzelne Spalte mit dem Bild: volle Höhe nutzen */
.wp-block-columns .wp-block-column {
    display: flex;
    flex-direction: column;
    
}

/* Das Bild selbst: Höhe der Spalte füllen, Seitenverhältnis behalten via Crop */
.wp-block-columns .wp-block-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wp-block-columns .wp-block-column .wp-block-image {
    height: 100%;
    margin: 0;
}

/* ===== box-blue ===== */
.box-blue {
    background-color: rgba(137, 177, 222, 0.75); /* Fallback für Edge/Mobile */
    background-color: color-mix(in srgb, var(--color-accent) 75%, transparent); /* moderne Browser */
    color: var(--color-primary);
    padding: var(--space-sm);
    position: relative; /* Box bekommt eine Ebene über dem Bild */
    z-index: 2;
    border-radius: var(--radius);
}

.box-blue h2,
.box-blue h4 {
    color: var(--color-white);
}

.box-blue a,
.box-blue .wp-block-button__link {
    color: var(--color-white);
}
.box-blue a:hover,
.box-blue .wp-block-button__link:hover {
    color: var(--color-accent-dark);
}
/* Überlappungs-Effekt aktuell deaktiviert – bei Bedarf einfach wieder aktivieren
.wp-block-column.overlap-right {
    margin-right: -80px;
}

.wp-block-column.overlap-left {
    margin-left: -80px;
}
*/
/* Damit die Überlappung nicht abgeschnitten wird */
.wp-block-columns {
    overflow: visible;
}
/*Die Hauptspalte als Flexbox definieren */
.wp-block-column.box-blue {
    display: flex;
    flex-direction: column;
}

/* Die inneren WordPress-Gruppen-Container auf volle Höhe zwingen */
.box-blue .wp-block-group,
.box-blue .wp-block-group__inner-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Sorgt dafür, dass der Container den restlichen Platz ausfüllt */
    height: 100%;
    width: 100%;
}

/*Den Button-Block ganz nach unten schieben */
.box-blue .wp-block-buttons {
    margin-top: auto; 
    padding-bottom: 15px; /* Optional: Etwas Abstand nach unten, damit er nicht direkt auf der Kante klebt */
}
/* Button in der linken Box nach links ausrichten */
.box-blue.overlap-right .wp-block-buttons {
    justify-content: flex-start;
}

/* Button in der rechten Box nach rechts ausrichten */
.box-blue.overlap-left .wp-block-buttons {
    justify-content: flex-end;
}
/* ==========================================================================
   RESPONSIVE ANPASSUNGEN
   ========================================================================== */
@media (max-width: 1023px) {
    /*Verhindert, dass der Hero-Bereich die Seite nach rechts aufbläht */
    .front-page-hero {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important; /* Holt den Bereich unter den Header */
        height: auto !important;   /* Verhindert verzerrte Höhen auf Mobilgeräten */
    }

    /* Sorgt dafür, dass das Hintergrundbild im Mobil-Hero sauber skaliert */
    .hero-image {
        position: relative !important;
        height: 40vh !important; /* Setzt eine feste, gute Höhe für Smartphones */
        transform: none !important;
        animation: none !important;
    }

    /* Setzt den Text im Hero-Bereich mittig unter oder über das Bild, statt ihn rechts rauszuschieben */
    .hero-text-bottom-left {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 20px !important;
        text-align: center !important;
        background: #3d7a28 !important; /* TJP-Grün als Hintergrund, damit man den Text auf weiß sieht */
    }
    
    .hero-text-bottom-left h1, 
    .hero-text-bottom-left h2 {
        color: #ffffff !important; /* Weißer Text für besseren Kontrast auf Mobilgeräten */
    }
    .wp-block-column.overlap-right,
    .wp-block-column.overlap-left {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .box-blue {
        padding: var(--space-sm) !important;
    }
    .hero-text-bottom-left h1,
    .hero-text-bottom-left h2,
    .box-blue h2,
    .box-blue p {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Der globale Sicherheitsgurt für die gesamte Website */
    html, body {
        overflow-x: hidden !important; /* Schneidet alles ab, was heimlich nach rechts ausbrechen will */
        width: 100% !important;
    }
  }
/*innerabstand Text-Box Spalte*/
.text-box {
  padding-left: 20px !important;
}
/* ==========================================================================
   iOS-Spezialfall: Kontakt-Button sitzt zu weit rechts
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
  .global-kontakt-container {
    right: 12px;
  }
}
/* ==========================================================================
   Anpassung für Hauptseite Einleitungstext
   ========================================================================== */
.wp-block-group.einleitung-main {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 40px !important; 
    margin-bottom: 40px !important; 
}
.wp-block-group.einleitung-main > .wp-block-group__inner-container {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;  
    padding-right: 20px !important;
}
/* ==========================================================================
   Eigene Anpassungen für Hauptseite: Text-Gruppe mit 3 Spalten
   ========================================================================== */

/*Breite aus dem starren Theme-Container befreien (volle Bildschirmbreite) */
.wp-block-group.text-gruppe-main {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 40px !important; 
    margin-bottom: 40px !important; 
    
}


.wp-block-group.text-gruppe-main > .wp-block-group__inner-container {
    max-width: 1400px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;  
    padding-right: 20px !important;
    border-radius: var(--radius) !important;
    background-color: rgba(24, 43, 73) !important;
}


.wp-block-group.text-gruppe-main h1,
.wp-block-group.text-gruppe-main h2,
.wp-block-group.text-gruppe-main h3,
.wp-block-group.text-gruppe-main .wp-block-heading {
    margin-bottom: 20px !important;
    
    color: var(--color-sand-dark) !important; 
}
.wp-block-group.text-gruppe-main h1,
.wp-block-group.text-gruppe-main .wp-block-heading {
    margin-top: 20px !important;
    padding-top: 20px !important;
  
}


.wp-block-group.text-gruppe-main .wp-block-columns {
    --wp--style--block-gap: 100px !important; 
    gap: 100px !important; 
    column-gap: 100px !important;
}

/*Flexbox-Reset für Spalten */
.wp-block-group.text-gruppe-main .wp-block-columns .wp-block-column {
    margin-left: 0 !important; 
    margin-right: 0 !important;
}
/*Responsive Anpassung für kleinere Bildschirme */
@media screen and (max-width: 1440px) {
    .wp-block-group.text-gruppe-main > .wp-block-group__inner-container {
        width: calc(100% - 30px) !important; /* Zwingt den blauen Kasten zu 15px Abstand links und rechts */
    }
}
/* ==========================================================================
   Seitenübergreifend: Runde Ecken für alle Inhalts-Bilder (ohne Hero)
   ========================================================================== */

/*Betrifft ausnahmslos alle Standard-Inhaltsbilder auf der gesamten Website */
img,
.wp-block-image img {
    border-radius: var(--radius) !important;
}

/*AUSNAHME: Alle Hero- und Zoom-Bilder bleiben auf jeder Seite strikt eckig */
.front-page-hero img,
.hero-image img,
[class*="hero"] img,
[class*="zoom"] img {
    border-radius: 0 !important;
}


/* ==========================================================================
   Manuelle Galerie in Eventraum-Spalten
   ========================================================================== */

/* Der Bild-Container in der Spalte bekommt eine relative Position für absolute Bilder */
.wp-block-column .raum-galerie-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px; /* Damit die Box auch ohne Inhalt/Bild eine Höhe hat */
    overflow: hidden;
}

/* Alle Bilder in der Galerie absolut übereinander legen */
.wp-block-column .raum-galerie-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    display: block;
    margin: 0;
}
/* ==========================================================================
   FooBox & Galerie Styling (Mit eigenen CSS-Variablen)
   ========================================================================== */
/* Das aktive Bild wird sichtbar */
.wp-block-column .raum-galerie-container img.active {
    opacity: 1;
}
/* Nur das sichtbare (aktive) Bild soll klickbar sein */
.wp-block-column .raum-galerie-container img:not(.active) {
    pointer-events: none;
}

/* Lupe (+ Zoom) für alle FooBox-Bilder */
a.foobox,
a.foobox img,
.wp-block-image a,
.wp-block-image a img {
    cursor: zoom-in !important;
}
/* Gutenberg-Bilder an Spaltenhöhe und -breite anpassen */
.wp-block-image {
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.wp-block-image a,
.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sorgt dafür, dass das Bild sauber ausfüllt ohne zu verzerren */
    display: block;
}
/*Hintergrund der FooBox-Großansicht */
.fbx-modal,
.fbx-stage {
    background-color: var(--color-accent-dark, #507bab) !important;
}

/*Abgerundete Ecken & Schatten für die Bilder in der Lightbox */
.fbx-inner img,
.fbx-item-image img {
    border-radius: var(--radius, 6px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

/*Text / Beschriftung unter dem Bild */
.fbx-caption {
    color: var(--color-white, #ffffff) !important;
    font-weight: 600 !important;
}
/*===========*/
/*Vor- und Zurück-Buttons der Raum-Galerie */
.galerie-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(26, 26, 26, 0.5); 
    color: var(--color-white, #ffffff);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background-color 0.2s ease;
}

.galerie-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

/* Globale Abrundung für ALLE FooGallery-Thumbnails, Karussells & Lightboxen */
/* Äußerer Karussell-Container behält den abgerundeten Rahmen */
.foogallery-carousel .fg-item {
    border-radius: 15px !important;
     border: 15px groove #89B1DE !important;
    overflow: hidden !important;
}

/* Innerem Bild den eigenen Rahmen und eigene Abrundung WEGNEHMEN */
.foogallery-carousel .fg-item img,
.foogallery-carousel .fg-item a {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}
.fg-media{
    background-color: var(--color-accent-dark) !important;
    border-radius: 15px !important;
}
/* LIGHTBOX: Runde Ecken UND blauer Groove-Rahmen für das große Bild */
.fg-lightbox-content .fg-media-content,
.fg-media-content,
img.fg-media-content,
div.fg-media-content img,
.fg-lightbox .fg-media-content{
    max-width: 100% !important;
    max-height: 75vh !important; 
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border: 15px groove #89B1DE !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.fg-media-content img {
    border-radius: 22px !important;
    border: none !important;
    display: block !important;
}

.fg-panel-area .fg-panel-thumbs {
    background-color: var(--color-accent) !important;
    display: block !important;
}
@media print {
  /* Navigation, Header, Footer und Formulare beim Drucken ausblenden */
  header, 
  footer, 
  .site-header, 
  .site-footer, 
  nav, 
  .wp-block-buttons {
    display: none !important;
  }

  /* Hintergrund weiß und Text schwarz für maximale Lesbarkeit & Papiersparen */
  body, .wp-block-group {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  /* Link-URLs auf dem Papier hinter dem Text anzeigen */
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.9em;
  }

  /* Seitenumbrüche innerhalb von Blöcken verhindern */
  .wp-block-column, p, ul {
    page-break-inside: avoid;
  }
}