/**
 * Theme Name: KunstWolf
 * Template:   twentytwentyone
 * Author: Willem Allroggen
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;1,700&display=swap');
strong, b {font-weight: 700;}

.hidden {display: none;}

/* Variables */
:root {

	/* Font Family */
	--global--font-primary: "Montserrat", "Helvetica Neue", sans-serif !important;
	--global--font-secondary: "Montserrat", "Helvetica Neue", sans-serif !important;

	/* Font Size */
	--global--font-size-base: 1rem !important;
	--global--font-size-xxs: .8rem;
	--global--font-size-xs: 1rem;
	--global--font-size-sm: 1.125rem;
	--global--font-size-md: 1.25rem;
	--global--font-size-lg: 1.5rem;
	--global--font-size-xl: 2.25rem;
	--global--font-size-xxl: 4rem;
	--global--font-size-xxxl: 5rem;
	--global--font-size-page-title: var(--global--font-size-xl) !important;
	--global--letter-spacing: normal;

	/* Line Height */
	--global--line-height-body: 1.7;
	--global--line-height-heading: 1.3;
	--global--line-height-page-title: 1.1;

	/* Headings */
	--heading--font-family: var(--global--font-primary) !important;
	--heading--font-size-h6: var(--global--font-size-base) !important;
	--heading--font-size-h5: var(--global--font-size-base) !important;
	--heading--font-size-h4: var(--global--font-size-lg) !important;
	--heading--font-size-h3: var(--global--font-size-lg) !important;
	--heading--font-size-h2: calc(1.15 * var(--global--font-size-lg)) !important;
	--heading--font-size-h1: var(--global--font-size-page-title) !important;
	--heading--letter-spacing-h6: 0.05em;
	--heading--letter-spacing-h5: 0.05em;
	--heading--letter-spacing-h4: var(--global--letter-spacing);
	--heading--letter-spacing-h3: var(--global--letter-spacing);
	--heading--letter-spacing-h2: var(--global--letter-spacing);
	--heading--letter-spacing-h1: var(--global--letter-spacing);
	--heading--line-height-h6: var(--global--line-height-heading);
	--heading--line-height-h5: var(--global--line-height-heading);
	--heading--line-height-h4: var(--global--line-height-heading);
	--heading--line-height-h3: var(--global--line-height-heading);
	--heading--line-height-h2: var(--global--line-height-heading);
	--heading--line-height-h1: var(--global--line-height-page-title);
	--heading--font-weight: normal;
	--heading--font-weight-page-title: 300;
	--heading--font-weight-strong: 700;
	--global--font-weight-bold: 700;

	/* Block: Latest posts */
	--latest-posts--title-font-family: var(--heading--font-family);
	--latest-posts--title-font-size: var(--heading--font-size-h3);
	--latest-posts--description-font-family: var(--global--font-secondary);
	--latest-posts--description-font-size: var(--global--font-size-sm);
	--list--font-family: var(--global--font-secondary);
	--definition-term--font-family: var(--global--font-primary);

	/* Colors */
	--global--color-black: #000;
	--global--color-dark-gray: #28303d;
	--global--color-gray: #39414d;
	--global--color-light-gray: #f0f0f0;
	--global--color-green: #d1e4dd;
	--global--color-blue: #d1dfe4;
	--global--color-purple: #d1d1e4;
	--global--color-red: #bb562a !important;
	--global--color-red-15: rgba(187,86,42,.15);
	--global--color-red-50: rgba(187,86,42,.5);
	--global--color-red-90: rgba(187,86,42,.9);
	--global--color-orange: #e4dad1;
	--global--color-yellow: #eeeadd;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);
	--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
	--global--color-secondary: var(--global--color-gray); /* Headings */
	--global--color-primary-hover: var(--global--color-primary);
	--global--color-background: var(--global--color-green); /* Mint, default body background */
	--global--color-border: var(--global--color-red) !important; /* Used for borders (separators) */

	/* Spacing */
	--global--spacing-unit: 20px;
	--global--spacing-measure: unset;
	--global--spacing-horizontal: 25px;
	--global--spacing-vertical: 30px;

	/* Elevation */
	--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);

	/* Forms */
	--form--font-family: var(--global--font-secondary);
	--form--font-size: var(--global--font-size-sm);
	--form--line-height: var(--global--line-height-body);
	--form--color-text: var(--global--color-dark-gray);
	--form--color-ranged: var(--global--color-secondary);
	--form--label-weight: 500;
	--form--border-color: var(--global--color-secondary);
	--form--border-width: 3px;
	--form--border-radius: 0;
	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));

	/* Cover block */
	--cover--height: calc(15 * var(--global--spacing-vertical));
	--cover--color-foreground: var(--global--color-white);
	--cover--color-background: var(--global--color-black);

	/* Buttons */
	--button--color-text: var(--global--color-background);
	--button--color-text-hover: var(--global--color-secondary);
	--button--color-text-active: var(--global--color-secondary);
	--button--color-background: var(--global--color-secondary);
	--button--color-background-active: var(--global--color-background);
	--button--font-family: var(--global--font-primary);
	--button--font-size: var(--global--font-size-base);
	--button--font-weight: 500;
	--button--line-height: 1.5;
	--button--border-width: 3px;
	--button--border-radius: 0;
	--button--padding-vertical: 15px;
	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));

	/* entry */
	--entry-header--color: var(--global--color-primary);
	--entry-header--color-link: currentColor;
	--entry-header--color-hover: var(--global--color-primary-hover);
	--entry-header--color-focus: var(--global--color-secondary);
	--entry-header--font-size: var(--heading--font-size-h2);
	--entry-content--font-family: var(--global--font-secondary);
	--entry-author-bio--font-family: var(--heading--font-family);
	--entry-author-bio--font-size: var(--heading--font-size-h4);

	/* Header */
	--branding--color-text: var(--global--color-primary);
	--branding--color-link: var(--global--color-primary);
	--branding--color-link-hover: var(--global--color-secondary);
	--branding--title--font-family: var(--global--font-primary);
	--branding--title--font-size: var(--global--font-size-lg);
	--branding--title--font-size-mobile: var(--heading--font-size-h4);
	--branding--title--font-weight: normal;
	--branding--title--text-transform: uppercase;
	--branding--description--font-family: var(--global--font-secondary);
	--branding--description--font-size: var(--global--font-size-sm);
	--branding--logo--max-width: 350px !important;
	--branding--logo--max-height: 150px !important;
	--branding--logo--max-width-mobile: 200px !important;
	--branding--logo--max-height-mobile: 96px;

	/* Main navigation */
	--primary-nav--font-family: var(--global--font-secondary);
	--primary-nav--font-family-mobile: var(--global--font-primary);
	--primary-nav--font-size: var(--global--font-size-md);
	--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
	--primary-nav--font-size-mobile: var(--global--font-size-sm);
	--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
	--primary-nav--font-size-button: var(--global--font-size-xs);
	--primary-nav--font-style: normal;
	--primary-nav--font-style-sub-menu-mobile: normal;
	--primary-nav--font-weight: normal;
	--primary-nav--font-weight-button: 500;
	--primary-nav--color-link: var(--global--color-primary);
	--primary-nav--color-link-hover: var(--global--color-primary-hover);
	--primary-nav--color-text: var(--global--color-primary);
	--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
	--primary-nav--border-color: var(--global--color-primary);

	/* Pagination */
	--pagination--color-text: var(--global--color-primary);
	--pagination--color-link-hover: var(--global--color-primary-hover);
	--pagination--font-family: var(--global--font-secondary);
	--pagination--font-size: var(--global--font-size-lg);
	--pagination--font-weight: normal;
	--pagination--font-weight-strong: 600;

	/* Footer */
	--footer--color-text: var(--global--color-primary);
	--footer--color-link: var(--global--color-primary);
	--footer--color-link-hover: var(--global--color-primary-hover);
	--footer--font-family: var(--global--font-primary);
	--footer--font-size: var(--global--font-size-sm);

	/* Block: Pull quote */
	--pullquote--font-family: var(--global--font-primary);
	--pullquote--font-size: var(--heading--font-size-h3);
	--pullquote--font-style: normal;
	--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
	--pullquote--line-height: var(--global--line-height-heading);
	--pullquote--border-width: 3px;
	--pullquote--border-color: var(--global--color-primary);
	--pullquote--color-foreground: var(--global--color-primary);
	--pullquote--color-background: var(--global--color-background);
	--quote--font-family: var(--global--font-secondary);
	--quote--font-size: var(--global--font-size-md);
	--quote--font-size-large: var(--global--font-size-xl);
	--quote--font-style: normal;
	--quote--font-weight: 700;
	--quote--font-weight-strong: bolder;
	--quote--font-style-large: normal;
	--quote--font-style-cite: normal;
	--quote--line-height: var(--global--line-height-body);
	--quote--line-height-large: 1.35;
	--separator--border-color: var(--global--color-border);
	--separator--height: 1px;

	/* Block: Table */
	--table--stripes-border-color: var(--global--color-light-gray);
	--table--stripes-background-color: var(--global--color-light-gray);
	--table--has-background-text-color: var(--global--color-dark-gray);

	/* Widgets */
	--widget--line-height-list: 1.9;
	--widget--line-height-title: 1.4;
	--widget--font-weight-title: 700;
	--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
}

@media only screen and (min-width: 652px) {

	:root {
		--global--font-size-base: 1.25rem !important;
		--global--font-size-xl: 2.5rem;
		--global--font-size-xxl: 6rem;
		--global--font-size-xxxl: 9rem;
		--heading--font-size-h3: 2rem;
		--heading--font-size-h2: 3rem;
	}

}


/**
 * Root Media Query Variables
 */

@media only screen and (min-width: 822px) {

	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 880px) !important;
	}
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
h1.entry-title, 
body.home .wp-element-caption {color: var(--global--color-red);}
h2, .h2, h3, .h3 {margin-top: 2em !important;}


.singular #main .entry-header { border-bottom: none;}
#main .page-header {border-bottom: none; padding-bottom: 0;}


.portfolio-grid {
    display: grid;
    gap: 10px; /* Abstand zwischen den Elementen */
}

.portfolio-grid.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.portfolio-grid.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.portfolio-grid.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
    .portfolio-grid.columns-3,
    .portfolio-grid.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
	.wp-block-image .alignright {float: none; width: 100%;}
    .portfolio-grid,
    .portfolio-grid.columns-2,
    .portfolio-grid.columns-3,
    .portfolio-grid.columns-4 {
        grid-template-columns: 1fr;
    }
}

.page-header {margin-left: auto; margin-right: auto; width: var(--responsive--aligndefault-width); max-width: 100%;}

.portfolio-item-summary {
    border: 1px solid #eee;
    padding: 15px;
    text-align: center;
}
.portfolio-item-summary img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}
.portfolio-category-page-title {
    text-align: center;
    margin-bottom: 30px;
}

.portfolio-breadcrumb > a {
	text-decoration: none;
	font-size: var(--global--font-size-xxs);
}




/* STARTSEITE */

@media (max-width: 781px) {
	.site-header {padding-bottom: var(--global--spacing-vertical) !important;}
	:where(.wp-block-columns.is-layout-flex) {gap: 0;}
	.wp-block-columns .wp-block-column .homepage-cover-img {max-width: 400px !important; margin-left: auto; margin-right: auto;}
}
@media (min-width: 782px) {
	.site-header {padding-bottom: var(--global--spacing-vertical) !important;}
	.wp-block-columns .wp-block-column .homepage-cover-fotografie {margin-top: 70px !important;}
	.wp-block-columns .wp-block-column .homepage-cover-farbe {margin-top: 40px !important;}
	.wp-block-columns .wp-block-column .homepage-cover-bild-film-ton {margin-top: 0 !important;}
	.wp-block-columns .wp-block-column .homepage-cover-objekte {margin-top: -60px !important}
	.homepage-cols-2 {max-width: calc(var(--responsive--alignwide-width) * 0.66 ) !important}
}
@media (min-width: 1200px) {
	:where(.wp-block-columns.is-layout-flex) {gap: 3em;}
	.wp-block-columns .wp-block-column .homepage-cover-fotografie {margin-top: 120px !important;}
	.wp-block-columns .wp-block-column .homepage-cover-farbe {margin-top: 60px !important;}
	.wp-block-columns .wp-block-column .homepage-cover-bild-film-ton {margin-top: 0 !important;}	
	.wp-block-columns .wp-block-column .homepage-cover-objekte {margin-top: -150px !important}
	.homepage-cols-2 {max-width: 790px !important}
}
.site-main #primary{
	margin-bottom: 0;
}
.no-widgets .site-footer,
.footer-navigation {margin-top: 0 !important;}
.footer-navigation {margin-bottom: 0 !important;}
.footer-navigation-wrapper li a {padding: 0 15px 0 0 !important;}

@media only screen AND (min-width: 822px){
	.site-footer > .site-info {
		justify-content: space-between;
	}
}
/* Portfolio Navigation Menu - style.css Child-Theme */

/* ==========================================================================
   Allgemeine Menüstruktur & Desktop Panel (Offen & Minimiert)
   ========================================================================== */

/* Hauptcontainer des Menüs (Panel auf Desktop, Overlay-Inhalt auf Mobile) */
.portfolio-sidebar-menu-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px; /* Breite des offenen Desktop-Panels */
    background-color: var(--global--color-background, #ffffff);
    padding: 20px 2px; /* Vertikales Padding, horizontales Padding kommt zu den Listenelementen */
    z-index: 999;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, padding 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Anpassung für WordPress Admin Bar */
body.admin-bar .portfolio-sidebar-menu-wrapper {
    top: 32px;
}
@media screen and (max-width: 782px) { /* Admin Bar Höhe Mobile */
    body.admin-bar .portfolio-sidebar-menu-wrapper {
        top: 46px;
    }
    /* Für Mobile wird der #mobile-minimize-portfolio-menu Button auch von der Admin Bar beeinflusst, falls er oben wäre.
       Da er unten ist, ist es hier weniger relevant für den Button selbst. */
}

/* Button zum Schließen des Menüs (X-Button im Panel/Overlay) */
.portfolio-menu-content button.close-portfolio-menu-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 1px solid var(--global--color-red);
    color: var(--global--color-red);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
    z-index: 2; /* Über dem Menüinhalt im Overlay */
}
.portfolio-menu-content button.close-portfolio-menu-btn:not(:hover):not(:active):not(.has-background){
    background: transparent;
	border: 1px solid var(--global--color-red);
	color: var(--global--color-red);
}

.portfolio-menu-content .close-portfolio-menu-btn:hover {
    background: var(--global--color-red);
    color: var(--global--color-white);
}

/* Desktop: Panel minimiert */
.portfolio-sidebar-menu-wrapper.minimized {
    width: 60px; /* Deine gewünschte Breite für den vertikalen Button-Streifen */
    padding: 0;
    overflow: hidden; /* Wichtig, damit der Inhalt nicht rausragt */
    margin-top: 2px;
}
.portfolio-sidebar-menu-wrapper.minimized .portfolio-menu-content {
    display: none; /* Inhalt ausblenden, wenn Panel minimiert */
}

/* Desktop: "Werke"-Button im minimierten Panel (#desktop-minimize-portfolio-menu) */
.site .portfolio-sidebar-menu-wrapper.minimized button.desktop-internal-toggle-button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--global--color-red-15);
	margin: -2px 0 0 2px;
    border: none;
    color: var(--global--color-red);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    cursor: pointer;
    font-family: var(--global--font-primary);
}

.portfolio-sidebar-menu-wrapper.minimized .desktop-internal-toggle-button span {
    display: inline-block;
    transform-origin: center;
    white-space: nowrap;
    font-size: var(--global--font-size-md, 1rem);
    font-weight: var(--global--font-weight-bold);
    padding: 15px 5px 15px 12px; /* Vertikales Padding für den Text im Button */
    letter-spacing: 0.05em;
}

.site .portfolio-sidebar-menu-wrapper.minimized .desktop-internal-toggle-button:hover {
	background-color: var(--global--color-red) !important;
}
.portfolio-sidebar-menu-wrapper.minimized .desktop-internal-toggle-button:hover span {
    color: var(--global--color-white);
}

/* Desktop: "Werke"-Button verstecken, wenn Panel offen ist */
.portfolio-sidebar-menu-wrapper:not(.minimized) .desktop-internal-toggle-button {
    display: none;
}


/* ==========================================================================
   Menü-Listen Styling (Kategorien & Portfolio-Einträge)
   ========================================================================== */
.portfolio-menu {
    list-style: none;
    padding-left: 0;
    margin: 40px 0 0 0; /* Platz für X-Button oben */
}
.portfolio-menu .category-item {
    margin-bottom: 10px;
}
.portfolio-menu .category-item > a {
    text-decoration: none;
    color: var(--global--color-primary, #333333);
    background-color: var(--global--color-red-15);
    display: block;
    padding: 0.6em 20px; /* Horizontales Padding für die Menüpunkte */
    font-weight: var(--global--font-weight-bold);
    transition: color 0.2s ease;
    position: relative; /* Für mögliche ::before/::after Dekorationen */
}
.portfolio-menu .category-item > a:hover,
.portfolio-menu .category-item > a:focus,
.has-background-white .site .category-item a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
    color: var(--global--color-white);
	background-color: var(--global--color-red);
}

.portfolio-menu .category-item.active-category > a {
	color: var(--global--color-white);
	background-color: var(--global--color-red);
}

.category-toggle .toggle-icon { /* Das +/- Icon */
    float: right;
    font-size: 1.1em;
    line-height: 1.5;
    margin-left: 5px;
    user-select: none;
	font-weight: var(--global--font-weight-bold);
}

.portfolio-menu-content .portfolio-submenu {
    list-style: none;
    padding-left: 0; /* Einrückung für Unterpunkte */
    margin-top: 0.25em;
    margin-bottom: 5px;
    margin-left: 20px; /* Damit es mit dem Padding der Hauptpunkte übereinstimmt */
    margin-right: 0px; /* Falls das Submenü nicht die volle Breite nehmen soll */
}
.portfolio-submenu .portfolio-item {
    font-weight: var(--global--font-weight-normal);
    margin-bottom: 5px;
}
.portfolio-submenu .portfolio-item a {
    text-decoration: none;
    color: var(--global--color-text, #555555);
    display: block;
    padding: 0.4em 0 0.4em 18px;
    font-size: 0.8em;
    transition: color 0.2s ease;
    background-color: var(--global--color-red-15);
}
.portfolio-submenu .portfolio-item a:hover,
.portfolio-submenu .portfolio-item a:focus,
.portfolio-submenu .portfolio-item a:active,
.has-background-white .site .portfolio-item a:focus:not(.wp-block-button__link):not(.wp-block-file__button)
{
    color: var(--global--color-white);
	background-color: var(--global--color-red);
	text-decoration: none !important;
}
.portfolio-submenu .portfolio-item a:focus,
.has-background-white .site .portfolio-item a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
	
    font-weight: var(--global--font-weight-bold);	
}
.portfolio-submenu .portfolio-item.current-portfolio-item a {
    color: var(--global--color-white);
	background-color: var(--global--color-red);
    font-weight: var(--global--font-weight-bold);
}

.site .portfolio-menu a:focus:not(.wp-block-button__link):not(.wp-block-file__button){
	text-decoration: none;
}


/* ==========================================================================
   Desktop: Seiteninhalt verschieben, wenn Panel offen/minimiert
   ========================================================================== */
body.portfolio-menu-open .site-content,
body.single-jetpack-portfolio.portfolio-menu-open .site-content,
body.portfolio-menu-open #page > #primary {
    margin-left: 280px; /* Breite des offenen Panels */
    transition: margin-left 0.3s ease-in-out;
}
body.single-jetpack-portfolio .site-content,
body.single-jetpack-portfolio.portfolio-menu-closed .site-content,
body.portfolio-menu-closed .site-content,
body.portfolio-menu-closed #page > #primary {
    margin-left: 60px; /* Breite des minimierten Panels (muss mit .portfolio-sidebar-menu-wrapper.minimized width übereinstimmen) */
    transition: margin-left 0.3s ease-in-out;
}

/* Anpassung für etwas kleinere Desktop-Screens (optional) */
@media (max-width: 992px) and (min-width: 782px) { /* Nur Desktop, nicht Mobile */
    .portfolio-sidebar-menu-wrapper:not(.minimized) { /* Offenes Panel */
        width: 240px;
    }
    body.portfolio-menu-open .site-content,
	body.single-jetpack-portfolio.portfolio-menu-open .site-content,
    body.portfolio-menu-open #page > #primary {
        margin-left: 240px;
    }
    /* Minimiertes Panel bleibt bei 60px */
	body.single-jetpack-portfolio .site-content,
	body.single-jetpack-portfolio.portfolio-menu-closed .site-content,
	body.portfolio-menu-closed .site-content,
    body.portfolio-menu-closed #page > #primary {
        margin-left: 60px;
    }
    .mobile-fixed-toggle-button {display: none};
}
@media (min-width: 993px){
	.mobile-fixed-toggle-button {display: none;}
}

/* Fallback für keine Kategorien */
.no-portfolio-categories {
    padding: 20px;
    color: var(--global--color-text-light, #767676);
}


/* ==========================================================================
   Mobile Ansicht (max-width: 782px)
   ========================================================================== */
@media (max-width: 781px) {

    /* --- Buttons auf Mobile steuern --- */
    /* Verstecke den Desktop-internen Button */
    .desktop-internal-toggle-button {
        display: none !important;
    }
    /* Zeige und style den Mobile Fixed Button (#mobile-minimize-portfolio-menu) */
    .site-main .mobile-fixed-toggle-button {
        display: flex !important; /* Sicherstellen, dass es sichtbar ist und flex für Inhalt */
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%); /* Horizontale Zentrierung */
        writing-mode: horizontal-tb; /* Normaler Textfluss */
        background-color: var(--global--color-primary, #333);
        color: var(--global--color-background, #fff);
        padding: 12px 22px; /* Etwas größer für Touch */
        border-radius: 0px; /* Stärker abgerundet */
        border: none;
        z-index: 1002; /* Über dem Overlay-Menü */
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease; /* Kleine Hover-Animation */
        width: 100%; /* Automatische Breite basierend auf Inhalt */
        height: 60px; /* Automatische Höhe */
        margin-bottom: 0;
        margin-left: 0px;
        margin-right: 0px;
    }
    .site-main button.mobile-fixed-toggle-button:not(:hover):not(:active):not(.has-background){
    	background-color: var(--global--color-red);
    }

    .mobile-fixed-toggle-button:hover {
        background-color: var(--global--color-secondary, #0073aa);
        transform: translateX(-50%) translateY(-2px); /* Leichter Hover-Effekt */
    }
    .site-main button.mobile-fixed-toggle-button:hover:not(.has-background),
    .site-main button.mobile-fixed-toggle-button:active:not(.has-background),
    .site-main button.mobile-fixed-toggle-button:focus:not(.has-background){
    	background-color: var(--global--color-red);
    	outline: none;
    }
    .mobile-fixed-toggle-button span {
        transform: none !important; /* Keine Rotation */
        font-size: var(--global--font-size-sm, 0.875rem); /* Passende Schriftgröße */
        font-weight: var(--global--font-weight-bold);
        padding: 0;
        line-height: 1; /* Wichtig für vertikale Zentrierung im Button */
    }

    /* --- Overlay-Menü auf Mobile --- */
    /* Der .portfolio-sidebar-menu-wrapper wird zum Overlay-Container */
    .site-main .portfolio-sidebar-menu-wrapper {
        width: 100%; /* Breite des Overlays */
        max-width: 100%; /* Maximale Breite, etwas mehr Platz */
        padding: 20px; /* Innenabstand für das Overlay */
        transform: translateX(-100%); /* Standardmäßig aus dem Bildschirm geschoben */
        z-index: 1001; /* Unter dem Mobile Fixed Button, aber über Seiteninhalt */
        /* transition ist schon oben global definiert */
        margin-top: 0;
        padding-bottom: 70px;
    }

    /* Wenn das Mobile Overlay geöffnet ist (JS setzt .mobile-menu-open) */
    .portfolio-sidebar-menu-wrapper.mobile-menu-open {
        transform: translateX(0); /* Overlay einschieben */
        box-shadow: 3px 0 15px rgba(0,0,0,0.15); /* Deutlicherer Schatten für Overlay */
    }

    /* Die .minimized Klasse am Wrapper hat auf Mobile keine direkte Auswirkung auf die Breite/Padding des Overlays.
       Sie dient primär als Status für JS und um sicherzustellen, dass der Inhalt (.portfolio-menu-content)
       im ausgeblendeten Zustand (transform: translateX(-100%)) noch für das Overlay vorhanden ist. */
    .portfolio-sidebar-menu-wrapper.minimized {
        /* Überschreibe Desktop-Minimierungs-Styles für Breite/Padding */
        width: 85% !important;
        max-width: 320px !important;
        padding: 20px !important;
        overflow-y: auto !important; /* Scrollen im Overlay erlauben */
    }
    .portfolio-sidebar-menu-wrapper.minimized .portfolio-menu-content {
         display: block !important; /* Inhalt muss für Overlay da sein, auch wenn "logisch minimiert" */
    }


    /* --- Seiteninhalt auf Mobile --- */
    /* Kein Verschieben des Seiteninhalts, da Overlay verwendet wird */
	body.single-jetpack-portfolio .site-content,
	body.portfolio-menu-open .site-content,
    body.portfolio-menu-open #page > #primary,
    body.portfolio-menu-closed .site-content,
    body.portfolio-menu-closed #page > #primary {
        margin-left: 0 !important;
    }

    /* Verhindere Scrollen der Seite, wenn das Mobile Overlay offen ist */
    body.mobile-overlay-open {
        overflow: hidden;
    }
}