/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}
/* --- Handy (bis 767px) + Grundstil ---
   Button unter dem Schriftzug, zentriert, Text mittig */
.btn.book.btn-has-icon {
    display: inline-block;
    margin-top: 40px !important;
}

body a.btn.book.btn-has-icon {
    position: relative !important;
    top: 120px !important;     /* Abstand für Handy */
    
    /* Text im Button mittig */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* --- Tablet (768px bis 1023px) ---
   Button unten mittig fixieren, damit oben Platz bleibt */
@media (min-width: 768px) and (max-width: 1023px) {
    body a.btn.book.btn-has-icon {
        position: relative !important;
        top: 160px !important;              /* hier kannst du später feinjustieren */
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 40px auto 0 !important;     /* oben Abstand + zentriert */
        
        display: flex !important;           /* Text mittig im Button */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 9999 !important;
    }
}



/* --- Desktop (ab 1024px) ---
   Button wieder näher zum Logo, nicht zu tief */
@media (min-width: 1024px) {
    body a.btn.book.btn-has-icon {
        position: relative !important;
        top: 230px !important;    /* war für dich ursprünglich perfekt */
        transform: none !important;
        bottom: auto !important;
        margin-top: 40px !important;
    }
}
/* --- TABLET FIX (Button wieder sichtbar) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body a.btn.book.btn-has-icon {
        position: relative !important;
        top: 150px !important;     /* Abstand nach unten – hier kannst du später feinjustieren */
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 40px auto 0 !important;   /* zentriert */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 9999 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* --- BUCHUNGS-BUTTON: Version, die bei dir schon funktioniert hat --- */

/* Grundstil für den Button */
.btn.book.btn-has-icon {
    display: inline-block;
    margin-top: 40px !important;
}

/* Standardposition: erstmal für alle */
body a.btn.book.btn-has-icon {
    position: relative !important;
    top: 120px !important;   /* Abstand nach unten */
}

/* Handy (bis 767px) – so hat es bei dir gut gepasst */
@media (max-width: 767px) {
    body a.btn.book.btn-has-icon {
        position: relative !important;
        top: 120px !important;   /* Handy-Wert */
    }
}

/* Desktop + Tablet (ab 768px) – hier ist auch dein MateBook dabei */
@media (min-width: 768px) {
    body a.btn.book.btn-has-icon {
        position: relative !important;
        top: 230px !important;   /* dein Wunschwert für Desktop */
    }
}

/* Text im Button zentrieren */
body a.btn.book.btn-has-icon {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
/* --- Tablet: alten funktionierenden Stil verwenden (Button unten rechts) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .btn.book.btn-has-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }
}
/* --- Tablet: alten funktionierenden Stil verwenden (Button unten rechts) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    html body .btn.book.btn-has-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 9999 !important;
    }
}
/* --- GLOBALER FIX: Immer sichtbarer Buchen-Button für ALLE Desktop-Geräte --- */
@media (min-width: 1024px) {
    html body .btn.book.btn-has-icon {
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 99999 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}
/* --- DESKTOP: Buchen-Button größer machen --- */
@media (min-width: 1024px) {
    html body .btn.book.btn-has-icon {
        padding: 14px 28px !important;      /* größerer Innenabstand */
        font-size: 18px !important;         /* größere Schrift */
        border-radius: 8px !important;      /* leicht runder */
        min-width: 160px !important;        /* Mindestbreite */
        height: auto !important;
    }
}
/* --- DESKTOP: Buchen-Button doppelt so groß + andere Ausgangsposition --- */
@media (min-width: 1024px) {
    html body .btn.book.btn-has-icon {
        position: fixed !important;
        bottom: 40px !important;          /* weiter vom unteren Rand weg */
        right: 40px !important;           /* weiter vom Rand nach innen */
        
        padding: 20px 40px !important;    /* doppelte Größe */
        font-size: 22px !important;       /* große Schrift */
        min-width: 220px !important;      /* deutlich breiter */
        border-radius: 12px !important;   /* schön rund */
        
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        z-index: 99999 !important;
    }
}
/* --- DESKTOP: Buchen-Button höher platzieren --- */
@media (min-width: 1024px) {
    html body .btn.book.btn-has-icon {
        position: fixed !important;
        bottom: 80px !important;          /* vorher 40px – jetzt deutlich höher */
        right: 40px !important;

        padding: 20px 40px !important;
        font-size: 22px !important;
        min-width: 220px !important;
        border-radius: 12px !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        z-index: 99999 !important;
    }
}
/* --- DESKTOP: Buchen-Button noch höher platzieren --- */
@media (min-width: 1024px) {
    html body .btn.book.btn-has-icon {
        position: fixed !important;
        bottom: 130px !important;        /* vorher 80px → jetzt ca. 2 cm höher */
        right: 40px !important;

        padding: 20px 40px !important;
        font-size: 22px !important;
        min-width: 220px !important;
        border-radius: 12px !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        z-index: 99999 !important;
    }
}
/* --- KLEINERE DESKTOPS (z.B. Huawei MateBook 13): Button höher setzen --- */
@media (min-width: 1024px) and (max-width: 2200px) {
    html body .btn.book.btn-has-icon {
        bottom: 200px !important;   /* höher, damit er die Kontaktdaten nicht verdeckt */
    }
}
/* --- KLEINERE DESKTOPS (z.B. Huawei MateBook 13): Button noch höher setzen --- */
@media (min-width: 1024px) and (max-width: 2200px) {
    html body .btn.book.btn-has-icon {
        bottom: 260px !important;   /* vorher 200px → jetzt ca. 2 cm höher */
    }
}
/* --- HANDY: Buchen-Button größer & breiter machen --- */
@media (max-width: 767px) {
    html body .btn.book.btn-has-icon {
        padding: 18px 34px !important;   /* größer & höher */
        font-size: 20px !important;      /* deutlich größere Schrift */
        min-width: 220px !important;     /* breiterer Button */
        border-radius: 12px !important;  /* schöner rund */
        margin-top: 50px !important;     /* etwas Abstand nach oben */
    }
}

 /* --- HANDY: Button exakt zentrieren unter dem Schriftzug --- */
@media (max-width: 767px) {
    html body .btn.book.btn-has-icon {
        display: flex !important;           /* Flexbox zur Zentrierung */
        justify-content: center !important; /* horizontal zentriert */
        align-items: center !important;     /* vertikal sauber */
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
}
/* --- HANDY: Button minimal nach rechts verschieben (+2mm) --- */
@media (max-width: 767px) {
    html body .btn.book.btn-has-icon {
        margin-left: 8px !important;   /* ca. +2mm nach rechts */
    }
}
/* Wenn das Buchungsformular (#eventForm) auf der Seite ist,
   den schwebenden Startseiten-Button ausblenden */
@media (min-width: 1024px) {
    body:has(#eventForm) .btn.book.btn-has-icon {
        display: none !important;
    }
}
/* Buchungs-Unterseite (mit #eventForm):
   Buchen-Button NICHT schwebend, sondern normal im Layout anzeigen */
#eventForm .btn.book.btn-has-icon {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    margin: 20px 0 0 !important;   /* etwas Abstand nach oben */
    z-index: 1 !important;
}
/* --- Auf Buchungs-Unterseiten KEIN schwebender Button --- */
body:has(#events) .btn.book.btn-has-icon,
body:has(#eventForm) .btn.book.btn-has-icon,
body:has(#timeline-container) .btn.book.btn-has-icon {
    display: none !important;
}
/* --- VARIANTE 1: Auf Desktop/Tablet kein schwebender Button mehr --- */
@media (min-width: 768px) {
    html body .btn.book.btn-has-icon {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        left: auto !important;
        margin: 40px auto 0 !important;  /* normal im Layout, zentriert */
    }
}
top: 230px;
/* --- DESKTOP: Button wieder normal unter dem Schriftzug platzieren --- */
@media (min-width: 1024px) {
    html body a.btn.book.btn-has-icon {
        position: relative !important;
        top: 230px !important;          /* Abstand nach unten – bei dir „perfekt“ */
        margin: 40px auto 0 !important; /* zentriert in eigener Zeile */

        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}