/* --- Media Query für kleine Bildschirme (Smartphones) --- */
/* Passe die max-width an deinen Breakpoint an (z.B. 768px) */
@media screen and (max-width: 768px) { 
    /* Consolidated styles for smartphones */
    .hamburger {
        display: block;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        top: 15px;
        right: 20px;
        z-index: 1001;
    }

    .hamburger div {
        width: 25px;
        height: 3px;
        background-color: rgb(200, 194, 194);
        margin: 5px 0;
        transition: 0.4s;
    }

    nav ul#navList {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 35px;
        left: 0;
        background-color: #f1f1f1;
        padding: 10px 0;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    nav ul#navList.active {
        display: flex;
    }
   

    nav ul#navList li {
        margin: 0;
        text-align: center;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

    nav ul#navList li:last-child {
        border-bottom: none;
    }

    nav ul#navList li a {
        display: block;
        padding: 15px 20px;
        color: #353333;
        text-decoration: none;
    }
    
    nav ul#navList ul li a:hover {
        background-color: rgb(178, 186, 186);
    }

    nav ul#navList ul {
        padding-left: 0;
        margin-left: 0;
        list-style: none;
        display: none;
        width: 100%;
        background-color: #d9dede;
        margin-top: 5px; /* Adjusted margin for better spacing */
    }

    nav ul#navList ul li {
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        text-align: center;
        border-top: 1px solid #ccc;
    }

    nav ul#navList ul li a {
        display: block;
        padding: 10px 20px;
        font-size: 0.9em;
        color: #20abe2;
    }
    nav ul#navList ul li a :hover {
       background-color: rgb(130, 133, 135);
    }

    nav ul#navList li.submenu-open > ul {
        display: block;
    }

    nav ul#navList li > a:has(+ ul)::after {
        content: ' ▼';
        font-size: 0.8em;
        margin-left: 5px;
        display: inline-block;
        transition: transform 0.3s ease;
    }

    nav ul#navList li.submenu-open > a:has(+ ul)::after {
        transform: rotate(180deg);
    }
   
   

    .infoImage {
        width: 60%;
        border: #bcc4c5 2px solid;
        border-radius: 5px;
    }

    #infoImage {
        width: 80%;
    }

    body {
        margin: 0;
        padding: 0;
        text-align: left; /* Stelle sicher, dass der Text standardmäßig links ausgerichtet ist */
    }

    #textBookSection button {
        padding: 5px 10px; /* Reduce padding */
        font-size: 12px; /* Smaller font size */
    }

    #textBookSection #textPageInfo {
        font-size: 13px; /* Smaller font size for page info */
    }


    button {
        font-size: 10px; /* Uniform font size for buttons */
    }
    

    .read-more-btn {
        font-size: 10px; /* Smaller font size for "read more" buttons */
    }

    .search-container {
        justify-content: center; /* Center the search container */
        align-items: center; /* Align items vertically */
    }

    #search-input, #search-button {
        display: block; /* Ensure they are block elements */
        margin: 10px auto; /* Center them horizontally */
        margin-left: 50px;
        
    }

    .infopage {
        max-height: 200px; /* Limit the height initially */
        overflow: hidden; /* Hide overflowing content */
        transition: max-height 0.3s ease-in-out; /* Smooth transition for height */
    }

    .infopage.show-more {
        max-height: 1000px; /* Expand to show full content */
    }

    #scheduleTable {
        max-height: 200px; /* Limit the height initially */
        overflow: hidden; /* Hide overflowing content */
        transition: max-height 0.3s ease-in-out; /* Smooth transition for height */
        overflow-x: auto; /* Allow horizontal scrolling for the table */
        display: block; /* Ensure the table behaves as a block element */
    }

    #scheduleTable.show-more {
        max-height: 100%; /* Expand to show full content */
    }
   
    .firstpage {
        width: 95%; /* Ensure the container takes up most of the screen width */
        margin: 20px auto; /* Center the container */
        background-color: #ffffff; /* Neutral background */
        border-radius: 10px; /* Add rounded corners */
        padding: 10px; /* Add padding for spacing */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        overflow-x: auto; /* Enable horizontal scrolling if content overflows */
        text-align: left; /* Links ausrichten */
    }

    table {
        width: 100%; /* Ensure the table takes up the full width of the container */
        font-size: 12px; /* Adjust font size for better readability */
        border-collapse: collapse; /* Remove gaps between table cells */
        margin: 0; /* Remove any extra margin */
        table-layout: fixed; /* Ensure fixed layout for consistent column widths */
        text-align: left; /* Links ausrichten */
    }

    thead, tbody {
        font-size: 12px; /* Ensure consistent font size */
        text-align: center; /* Center-align text */
    }

    th, td {
        width: 33.33% !important; /* Ensure equal width for all columns */
        padding: 8px; /* Adjust padding for smaller screens */
        font-size: 12px !important; /* Smaller font size for table content */
        text-align: left; /* Links ausrichten */
        border: 1px solid #ddd; /* Add borders for better visibility */
        word-wrap: break-word; /* Ensure long text wraps within cells */
    }

    th {
        background-color: #f4f4f4; /* Light background for table headers */
        font-weight: bold; /* Emphasize headers */
    }

    td {
        background-color: #ffffff; /* Ensure a neutral background for table cells */
    }

    /* Adjust margin for expanded content when "Mehr lesen" is clicked */
    .show-more {
        margin-top: 20px; /* Add spacing above the expanded content */
    }
   
}

@media only screen and (max-width: 768px) {
    #scheduleTable thead, #scheduleTable tbody, #infoPage {
        display: none;
    }
    #scheduleTable.show-more thead, #scheduleTable.show-more tbody,
    #infoPage.show-more {
        display: block;
    }
    #scheduleTable thead th, #scheduleTable tbody td, #infoPage img, #infoPage p {
        height: auto; /* Ensure equal visibility */
    }
    #infoPage img, #infoPage h2 {
        display: block; /* Ensure visibility of the title and image */}
  
    
    .read-more-btn {
        display: block;
        margin: 30px auto !important;
        padding: 10px 20px;
        background-color: #298d90;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        text-align: center;
    }
    #currentInfoTitle1{
    font-size: 14px;
    color: #c4a012;
}
}

@media screen and (min-width: 769px) {
    .read-more-btn {
        display: none; /* Hide the button for larger screens */
    }
    #currentInfoTitle1{
    display: none;
}

    .infopage, #scheduleTable {
        max-height: none; /* Remove height limitation */
        overflow: visible; /* Ensure full visibility */
    }

    .gottesdienstplan-table,
    #gottesdienstplan-readmore-btn {
        display: none !important;
    }
}


/* Adjustments for iPad screens */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* Hamburger menu adjustments */
    .hamburger {
        display: none; /* Hide hamburger menu on iPad */
    }

    nav ul#navList {
        display: flex !important; /* Ensure navigation is visible */
        flex-direction: row;
        justify-content: space-around;
    }

    nav ul#navList li {
        margin: 0 10px;
    }

    nav ul#navList li a {
        font-size: 1rem;
        padding: 10px 15px;
    }

    /* Dropdown adjustments */
    .dropdown-content {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: transparent;
        box-shadow: none;
    }

    .dropdown-content a {
        padding: 5px 10px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 465px) {
    .firstpage {
        width: 90%; /* Adjust width for smaller screens */
        margin: 20px auto; /* Center the table */
    }

    table {
        width: 100%; /* Make the table take full width */
        font-size: 14px; /* Reduce font size */
    }

    th, td {
        padding: 8px; /* Adjust padding for smaller screens */
        font-size: 12px; /* Smaller font size for table content */
    }

    #komesProjectTitle {
        font-size: 16px;
    }

    #komesProjectDescription {
        font-size: 14px;
    }

    #komesProjectDetails {
        font-size: 12px;
    }

    #komesProjectNameMeaning {
        font-size: 12px;
    }

    #childrenAbbreviation {
        font-size: 12px;
    }

    #youthAbbreviation {
        font-size: 12px;
    }

    #familiesAbbreviation {
        font-size: 12px;
    }

    #projectNameApproach {
        font-size: 12px;
    }
}

@media screen and (max-width: 320px) and (max-height: 658px) {
    .firstpage {
        width: 100%; /* Use full width for smaller devices */
        margin: 10px auto; /* Center the table */
        background-color: #ffffff; /* Neutral background */
        border-radius: 5px; /* Slightly smaller rounded corners */
        padding: 5px; /* Reduce padding */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

    table {
        width: 100%; /* Ensure the table takes full width */
        font-size: 12px; /* Reduce font size for better readability */
        border-collapse: collapse; /* Remove gaps between table cells */
        margin: 0 auto; /* Center the table */
    }

    th, td {
        padding: 5px; /* Reduce padding for smaller screens */
        font-size: 10px; /* Smaller font size for table content */
        text-align: center; /* Center-align text */
        border: 1px solid #ddd; /* Add borders for better visibility */
    }

    th {
        background-color: #f4f4f4; /* Light background for table headers */
        font-weight: bold; /* Emphasize headers */
    }

    .search-container {
        flex-direction: column; /* Stack search input and button vertically */
        align-items: center; /* Center-align items */
        gap: 5px; /* Reduce spacing between elements */
        padding: 5px; /* Reduce padding */
    }

    #search-input {
        width: 90%; /* Adjust width for smaller screens */
        font-size: 12px; /* Smaller font size */
        padding: 5px; /* Adjust padding */
    }

    #search-button {
        width: 90%; /* Match the width of the input */
        font-size: 12px; /* Smaller font size */
        padding: 5px; /* Adjust padding */
    }

    .responsive-logo {
        width: 80%; /* Smaller logo size */
        height: auto; /* Maintain aspect ratio */
        margin: 0 auto; /* Center the logo */
    }

    .header-title {
        font-size: 12px; /* Reduce font size for smaller screens */
    }

    .infopage {
        width: 95%; /* Adjust width for smaller screens */
        margin: 10px auto; /* Center the infopage */
        padding: 5px; /* Reduce padding */
        font-size: 12px; /* Smaller font size */
    }

    .read-more-btn {
        font-size: 12px; /* Adjust font size for smaller screens */
        padding: 5px 10px; /* Adjust padding */
    }

    footer {
        font-size: 10px; /* Smaller font size for footer */
        padding: 5px; /* Reduce padding */
    }
}

/* Media queries for tablets */
@media (min-width: 600px) and (max-width: 1024px) {
    body {
        font-size: 16px;
    }

    .header-title {
        font-size: 20px;
    }

    .search-feld input, .search-button button {
        width: 80%;
    }

    table {
        font-size: 14px;
    }
}

/* Media queries for smartphones */
@media (max-width: 599px) {
    body {
        font-size: 14px;
    }

    .header-title {
        font-size: 14px;
    }

    .search-feld input, .search-button button {
        width: 90%;
    }

    table {
        font-size: 12px;
    }
}