/*   General   */

html, body {
    margin: 0;
    padding: 0;
    height: 100%; /* Full viewport height */
    overflow: hidden; /* Prevent scrolling on the entire page */
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
}

html { font-size: 100%; }     /* 1rem = the user's browser setting, normally 16px */
body { font-size: 0.84rem; }  /* about 13.5px, as now */

body {
    margin: 0;
    font-family: 'Josephine Sans', sans-serif; /* Ensure consistency */
    color: #333; /* Default text color */
    line-height: 1.5; /* Ensure good readability */
}

main.container, .column, .project-info, .project-details, .image-description, .plan-description, footer {
    font-family: 'Relaxed Typing Mono', normal; /* Replace with the new font */
}



/*   Header   */

header {
    position: fixed; /* Fix the header at the top */
    top: var(--header-top);
    left: 0;
    width: 100%; /* Full width of the viewport */
    z-index: 10; /* Ensure the header is above other content */
    text-align: center;
    padding: 0; /* Remove padding */
    background-color: transparent; /* Keep your existing background */
    display: flex; /* Use Flexbox for layout */
    justify-content: center; /* Center the header-box horizontally */
    align-items: baseline;
}

header h1 {
    margin: 0; /* Remove default margin */
    font-size: var(--header-size);
    line-height: var(--header-line);    font-weight: 700;
    display: block; /* Ensure h1 behaves like a block element */
}

header h1::after {
    content: '\00a0'; /* Add a non-breaking space to force justification */
    display: inline-block; /* Treat it as an inline element */
    height: 0; /* Ensure it doesn't affect layout */
    line-height: 0;
    visibility: hidden; /* Make it invisible */
}

header h1 a {
    margin: 0; /* Remove default margin */
    font-weight: 700;
    padding: 0; /* Remove padding */
    width: 100%; /* Ensure h1 spans the full width */
    display: block; /* Ensure h1 behaves like a block element */

    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the text color */
    font-family: inherit; /* Use the same font as the header */
    transition: color 0.3s ease; /* Smooth transition for text color */

}

header h1 a::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    z-index: 2000; /* Ensure it is above other content */
    left: 50%; /* Start from the middle */
    top: calc(var(--header-size) * 1.05);
    width: 0; /* Initially, the underline has no width */
    height: 1px; /* Set the thickness of the underline */
    background-color: #acacac; /* Use the current text color for the underline */
    transition: width 0.6s ease, left 0.6s ease; /* Animate the width and position */
    transform: translateX(-50%);
}

    header h1 a:hover::after {
        width: 200vw; /* Expand the underline to the full width */
    }

.off-canvas-trigger {
    position: absolute;   /* removed from the flex flow */
    top: 0;               /* same top edge as the h1 */
    right: 2vw;           /* distance from the right edge of the viewport */
    margin: 0;
    padding: 0;
    font-size: var(--header-size);
    line-height: var(--header-line);
    color: #666;
    font-weight: 300;
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;    
}

.off-canvas-trigger:hover {
    color: #171717; /* Darker color */
}

.off-canvas-trigger::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    z-index: 2000; /* Ensure it is above other content */
    left: 50%; /* Start from the middle */
    top: calc(var(--header-size) * 1.05);
    width: 0; /* Initially, the underline has no width */
    height: 1px; /* Set the thickness of the underline */
    background-color: #acacac; /* Use the current text color for the underline */
    transition: width 0.6s ease, left 0.6s ease; /* Animate the width and position */
    transform: translateX(-50%);
}

.off-canvas-trigger:hover::after {
    width: 200vw; /* Expand the underline to the full width */
    left: 0; /* Move the starting point to the left */
}

.off-canvas-trigger.active::after {
    width: 0; /* Reset the underline width */
    left: 50%; /* Reset the starting point */
}

header p {
    font-family: 'Josefin Sans', sans-serif; /* Ensure consistency */
    font-weight: 300;
    color: #000000; /* Default text color */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 16px */
    margin: 5px 0 0; /* Adjust the margin */
    padding: 0; /* Remove padding */
    text-align: center; /* Center the paragraph text */
    display: inline-block; /* Ensure proper justification behavior */
    line-height: 1.4; /* Adjust line height for readability */
    position: relative; /* Enable positioning */
    top: -30px; /* Move the paragraph upwards */
    width: 100%; /* Ensure the paragraph spans the full width of the container */
}

header p a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the default underline */
    font-family: inherit; /* Ensure the font matches the rest of the paragraph */
    position: relative; /* Set the link as a positioning context for the pseudo-element */
    
}

header p a::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 50%; /* Start from the middle */
    bottom: 0; /* Position the underline at the bottom of the text */
    width: 0; /* Initially, the underline has no width */
    height: 0.5px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    transition: width 0.3s ease, left 0.3s ease; /* Animate the width and position */
}

header p a:hover::after {
    width: 100%; /* Expand the underline to the full width */
    left: 0; /* Move the starting point to the left */
}




/*   Project Container in General   */

header h3 {
    font-family: 'Josefin Sans', sans-serif; /* Ensure consistency */
    font-weight: 300;
    color: #999; /* Default text color */
    font-size: 2em; /* Set the font size */
    margin: -10px 0 0; /* Adjust the margin */
    padding: 0; /* Remove padding */
    text-align: right; /* Justify the paragraph text */
    text-align-last: right; /* Force justification for the last line */
    display: inline-block; /* Ensure proper justification behavior */
    line-height: 1.4; /* Adjust line height for readability */
    position: relative; /* Enable positioning */
    top: -30px; /* Move the paragraph upwards */
    width: 100%; /* Ensure the paragraph spans the full width of the container */
}

main.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin-top: var(--content-top);
    padding: 0 var(--margin);                 /* was 0 50px */
    height: calc(100vh - var(--content-top) - var(--content-bottom));
    overflow: hidden;
    gap: var(--gutter);
}

.container {
    display: flex;
    flex-direction: row; /* Arrange columns horizontally */
    height: 100vh; /* Full viewport height */
    gap: 30px; /* Add spacing between columns */
    overflow: hidden; /* Prevent scrolling on the container */
}

.column {
    flex: 1; /* Allow columns to take up equal space */
    overflow-y: scroll; /* Allow scrolling even though the scrollbar is hidden */
    height: 100%; /* Ensure columns fill the height of the container */
    padding: 0; /* Keep your existing padding */
    margin: 0; /* Keep your existing margin */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align children at the top */
    scrollbar-width: none; /* Disable the scrollbar */
}

main.container .column::-webkit-scrollbar {
    display: none; /* Completely hide the scrollbar */
}

main.container .column::-webkit-scrollbar-track {
    background: #f0f0f0 !important;
}

main.container .column::-webkit-scrollbar-thumb {
    background: #bbb !important;
    border-radius: 2px !important;
}

main.container .column::-webkit-scrollbar-thumb:hover {
    background: #999 !important;
}

main.container .column {
    scrollbar-width: none !important; /* Disable the scrollbar */
    scrollbar-color: #bbb #f0f0f0 !important;
}


/*   Column 1: Project Description   */

.project-info {
    flex: 1; /* Take 1/3 of the width */
    padding: 0px; /* Add padding around the section */
    color: #333; /* Default text color */
    line-height: 1.6; /* Ensure good readability */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack child elements vertically */
    align-items: flex-start; /* Align child elements to the left */
}

.project-info h2 {
    font-size: var(--text-size); /* Adjust the font size for the title */
    font-weight: 700; /* Make the title bold */
    margin: 0; /* Remove all default margins */
    padding: 0; /* Ensure no padding is applied */
    color: #000; /* Set the title color */
    line-height: 1.6; /* Adjust line height to minimize vertical spacing */
}

.project-info p {
    font-size: var(--text-size); /* Adjust the font size for the description */
    margin-bottom: 2em; /* Add spacing below each paragraph */
    color: #555; /* Set a slightly lighter color for the description */
    text-align: left;
}

.project-info p2 {
    font-size: var(--text-size); /* Adjust the font size for the description */
    color: #555; /* Set a slightly lighter color for the description */
    text-align: left;
}


/*   Column 2: Images   */

.image-container {
    width: 100%; /* Full width of the column */
    display: flex;
    flex-direction: column; /* Stack image and description vertically */
    margin-bottom: 20px; /* Add spacing between image blocks */
}

.image-container img {
    width: 100%; /* Make the image fill the column width */
    height: auto; /* Maintain aspect ratio */
    align-items: center; /* Center content horizontally */
    display: block; /* Ensure the image is displayed as a block element */
}

.image-description {
    font-size: var(--text-size); /* Adjust the font size for the description */
    font-weight: 300;
    color: #555; /* Set a slightly lighter color for the description */
    text-align: left; /* Align the text to the left */
    margin-top: 5px; /* Add spacing above the description */
}


/*   Column 3: Plan   */

.plan-container {
    width: 100%; /* Full width of the column */
    display: flex;
    flex-direction: column; /* Stack plan and description vertically */
    margin-bottom: 20px; /* Add spacing between plan blocks */
}

.plan-container img {
    width: 100%; /* Make the plan fill the column width */
    height: auto; /* Maintain aspect ratio */
    align-items: center; /* Center content horizontally */
    display: block; /* Ensure the plan is displayed as a block element */
}

.plan-description {
    font-size: var(--text-size); /* Adjust the font size for the description */
    font-weight: 300; /* Light */
    color: #555; /* Set a slightly lighter color for the description */
    text-align: left; /* Align the text to the left */
    margin-top: 5px; /* Add spacing above the description */
}

.project-details {
    flex: 1; /* Take 1/3 of the width */
}

.project-details p {
    font-size: var(--text-size); /* Adjust the font size for the description */
    margin: 2px 0; /* Add spacing between each detail */
    color: #444; /* Set a slightly darker color for project details */
}

.project-details p strong {
    font-size: var(--text-size); /* Adjust the font size for the description */
    color: #000; /* Set the color for bold text */
    /* color: white; /* Set text color to white */
    /* background-color: rgb(230, 230, 230); /* Set background color to black */
    /* padding: 1.5px;
    /* border-radius: 0px; */
}

/*   Footer   */

footer {
    position: fixed; /* Establish a common positioning context */
    font-weight: 300;
    text-align: right;
    padding: 10px 5vw; /* Add horizontal padding */
    font-family: 'Josefin Sans', sans-serif;
    font-size: clamp(6px, 1vw, 12px); /* Scale font size between 6px and 12px */
    color: #333;
    z-index: 2000;
}


.footer-paragraph {
    position: fixed;
    bottom: 15px;
    right: var(--margin);                     /* was 15px */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 10px */
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    cursor: pointer; /* Indicate that the text is clickable */
}

.footer-links {
    display: none; /* Initially hidden */
    position: fixed;
    bottom: 15px; /* Match the bottom value of .footer-paragraph */
    right: calc(var(--margin) + 2.5em);       /* was 40px: stays to the left of "2026" */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 10px */
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    color: #333; /* Ensure the links match the footer's text color */
}

.footer-links a {
    color: inherit; /* Inherit the color from the parent element */
    text-decoration: none; /* Remove the default underline */
    font-family: inherit; /* Ensure the font matches the rest of the footer */
    line-height: 1; /* Ensure consistent line height */
    margin: 0; /* Remove any default margins */
    padding: 0; /* Remove any default padding */
    position: relative;
}

.footer-links a::after {
    content: " | "; /* Add the separator */
    color: inherit; /* Match the text color */
    margin: 0 5px; /* Add spacing around the separator */
}

.footer-links a:last-child::after {
    content: ""; /* Remove the separator */
}

.footer-links a:hover {
    text-decoration: underline; /* Add underline on hover */
}


/*   Popup   */

.embedded-content {
    width: 100%;
    height: 100%;
    border: none;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* Full width of the viewport */
    height: 100%; /* Full height of the viewport */
    background-color: rgba(0, 0, 0, 0.8); /* Black overlay with 70% opacity */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it appears above all other content */
    padding: 20px; /* Add padding around the popup */
    box-sizing: border-box; /* Include padding in the dimensions */
}

.popup.hidden {
    display: none;
}

.popup-content {
    background: transparent; /* Keep the popup background transparent */
    max-width: 100%; /* Limit the popup width to 80% of the viewport */
    max-height: 100%; /* Limit the popup height to 80% of the viewport */
    display: flex;
    flex-direction: column; /* Stack image and description vertically */
    justify-content: center; /* Center content vertically */
    overflow: visible; /* Prevent scrolling */
    box-sizing: border-box; /* Include padding in dimensions */
}

.popup-content img {
    max-width: 90vw; /* Ensure the image doesn't exceed the popup width */
    max-height: 90vh; /* Ensure the image doesn't exceed the popup height */
    object-fit: scale-down; /* Scale the image proportionally to fit within the container */
    display: block; /* Ensure the image is treated as a block element */
    align-items: center; /* Center content horizontally */
}

.popup-content p {
    font-family: 'Relaxed Typing Mono', monospace; /* Same font as the image descriptions */
    font-size: var(--text-size); /* Paragraph text size from tokens.css */
    font-weight: 300; /* Same as .image-description */
    color: white; /* Keep the text color white */
    margin: 10px 0 0; /* Add spacing above the description */
    text-align: left; /* Center the description text */
    word-wrap: break-word; /* Ensure long text wraps properly */
    max-width: 100%; /* Ensure the description doesn't exceed the popup width */
    padding: 0; /* Remove unnecessary padding */
    box-sizing: border-box; /* Include padding in dimensions */
}

#popup-close {
    margin-top: 10px;
    padding: 5px 10px;
    font-size: 10px;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#popup-close:hover {
    background-color: #555;
}

.popup-close {
    position: absolute;
    top: 10px; /* Position it near the top of the popup */
    right: 10px; /* Position it near the right of the popup */
    font-size: 20px; /* Adjust the size of the "+" */
    color: white; /* Set the color to white */
    background: none; /* Remove any background */
    border: none; /* Remove any border */
    cursor: pointer; /* Change the cursor to a pointer */
    z-index: 1001; /* Ensure it appears above the popup content */
    transition: transform 1s ease; /* Smooth rotation animation */
}

.popup-close::before {
    content: "+"; /* Display the "+" sign */
    display: inline-block; /* Ensure it behaves like an inline element */
    transform-origin: center; /* Set the rotation point to the center */
}

.popup-close:hover::before {
    transform: rotate(-45deg); /* Rotate the "+" 45° to the left */
}


/*   Off-Canvas-Panel (not in use)   */


.off-canvas-panel {
    position: fixed;
    top: 0;
    right: calc(-21vw + 5px); /* Initially hidden off-screen */
    width: 21vw; /* Approx. 1/8 of the screen */
    height: 100%;
    z-index: 5; /* Ensure it appears above other content */
    transition: right 0.3s ease; /* Smooth slide-in animation */
    display: flex;
    flex-direction: column;
    padding: 0px;
    overflow-y: auto; /* Allow scrolling if content overflows */
    background-color:#f4f4f4; /* Background color for the off-canvas panel */
}

.off-canvas-panel.active {
    right: 0; /* Slide into view */
}

.off-canvas-panel p,
.off-canvas-panel p a {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    font-weight: 400; /* Light font weight */
    font-size: clamp(8px, 3vw, 18px); /* Scale font size between 8px and 12px */
    color: #171717; /* Default text color */
    line-height: 1.5; /* Adjust line height for readability */
    margin: 0 0; /* Add spacing between paragraphs */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align text to the left */
    position: relative; /* Enable positioning for the pseudo-element */
    text-decoration: none;
    margin-right: 15px;
    margin-left: 10px;
}

.off-canvas-panel p:hover::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    left: 0; /* Start the underline from the left */
    bottom: -2px; /* Position the underline slightly below the text */
    width: calc(100%); /* Subtract 15px from the full width */    height: 1px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    transition: width 0.3s ease; /* Smooth transition for the underline */
}

.off-canvas-panel p1,
.off-canvas-panel p1 a {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    font-weight: 300; /* Light font weight */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 12px */
    color: #171717; /* Default text color */
    line-height: 1.5; /* Adjust line height for readability */
    margin: 0 0; /* Add spacing between paragraphs */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align text to the left */
    display: block;
    text-decoration: none;
    margin-right: 15px;
    margin-left: 10px;
}

.off-canvas-panel p1 a:hover {
    font-weight: 500; /* Change font weight on hover */
    text-decoration: none; /* Ensure no underline appears */
}

.off-canvas-panel p2 {
    font-family: 'Roboto mono', sans-serif; /* Ensure consistency with the rest of the site */
    font-weight: 300; /* Light font weight */
    font-size: clamp(8px, 1vw, 10px); /* Scale font size between 8px and 12px */
    color: #171717; /* Default text color */
    line-height: 3; /* Adjust line height for readability */
    margin: 0 0; /* Add spacing between paragraphs */
    padding: 0; /* Remove default padding */
    text-align: left; /* Align text to the left */
    display: block;
    margin-right: 15px;
    margin-left: 10px;
    position: relative; /* Enable positioning for the pseudo-element */
}

.off-canvas-panel p2::after {
    content: ''; /* Add a pseudo-element for the underline */
    position: absolute;
    bottom: 8px;
    left: 0; /* Start the underline from the left edge of the container */
    width: 100%; /* Make the underline span the full width of the container */
    height: 0.5px; /* Set the thickness of the underline */
    background-color: currentColor; /* Use the current text color for the underline */
    z-index: -1; /* Place the underline behind the text */
    margin-right: 0;
}

.off-canvas-panel p1 a,
.off-canvas-panel p a {
    margin-left: 0; /* Remove any extra margin */
    padding: 0; /* Remove any extra padding */
    display: inline; /* Ensure it behaves as an inline element */
}

.close-panel {
    background: none;
    border: none;
    z-index: 2000; /* Ensure it is above the off-canvas panel */
    font-size: 1.5em;
    color: #333;
    cursor: pointer;
    align-self: flex-end; /* Align close button to the top-right */
}


/*   Fonts   */

@font-face {
    font-family: 'Josefin Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-ExtraLight.ttf') format('truetype');
    font-weight: 200; /* Extra-Light */
    font-style: normal;
}

@font-face {
    font-family: 'Josephine Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-SemiBold.ttf') format('truetype');
    font-weight: 600; /* Semi-Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Josefin Sans';
    src: url('/B__Assets/Utilities/fonts/Josefin_Sans/JosefinSans-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Define font weights for Roboto Mono */
@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Light.ttf') format('truetype');
    font-weight: 200; /* Extra-Light */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 600; /* Semi-Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/B__Assets/Utilities/fonts/Roboto_Mono/RobotoMono-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Define font weights for Relaxed Typing Mono */
@font-face {
    font-family: 'Relaxed Typing Mono';
    src: url('/B__Assets/Utilities/fonts/Relaxed_Typing_Mono/RelaxedTypingMonoJP-Light.ttf') format('truetype');
    font-weight: 500; 
    font-style: normal;
}

@font-face {
    font-family: 'Relaxed Typing Mono';
    src: url('/B__Assets/Utilities/fonts/Relaxed_Typing_Mono/RelaxedTypingMonoJP-Medium.ttf') format('truetype');
    font-weight: 700; 
    font-style: bold;
}

/* "(mehr)" button of the project description: only used on phones (see below) */
.more-toggle {
    display: none;
}

/* Responsive layout: One column (tablets and phones) */
@media (max-width: 768px) {

    /* Project description: three lines, then "(mehr)" (button added by scripts-subpage.js) */
    .column.project-info > p.is-clamped {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }

    .column.project-info > p:has(+ .more-toggle:not([hidden])) {
        margin-bottom: 0;                    /* the button takes over the space below the text */
    }

    .more-toggle {
        display: block;
        margin: -0.3em 0 2em;                /* negative top margin cancels the padding: */
        padding: 0.3em 0;                    /* larger tap target, same line spacing as the text */
        background: none;
        border: 0;
        font: inherit;
        font-size: var(--text-size);
        color: #555;
        text-align: left;
        cursor: pointer;
    }

    .more-toggle[hidden] {
        display: none;
    }

    /* More space between the project text and the images below it */
    .column.project-info {
        margin-bottom: 2rem;
    }


    html, body {
        overflow: visible; /* Allow scrolling on the entire page */
    }

    main.container {
        flex-direction: column; /* Stack columns vertically */
        overflow: auto; /* Allow content to grow beyond the container */
        justify-content: flex-start;
        margin-top: calc(55px + 50px + 3vh);
        padding-top: 0px;
        scrollbar-width: none;
    }

    .off-canvas-panel,
    .off-canvas-trigger,
    .off-canvas-hint,
    footer {
        display: none; /* Hide the side panel, hint and footer ("2026") on smaller screens */
    }

    .container {
        flex-direction: column; /* Stack columns vertically */
        height: auto; /* Allow the container to grow with content */
        align-items: stretch;
        overflow: visible; /* Allow content to grow beyond the container */
    }

    .ueber-uns-link {
        display: none;
    }

    .column {
        flex: none; /* Remove equal spacing */
        width: 100%; /* Make each column take up the full width */
        height: auto; /* Allow columns to grow with content */
        display: flex;
        flex-direction: column;
        overflow: visible; /* Prevent clipping of content */
    }


    .column::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge: Hide scrollbar */
    }

}