/*
Theme Name: SZ-W-2Sp-2610-4
Author: Birgit Stoessel
Description: Minimalistisches Portfolio-Theme fuer Birgit Stoessel mit zweispaltigem Arbeiten-Raster bis 1200 Pixel Breite.
Version: 1.9.16
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: birgitstoessel
License: GPL-2.0-or-later
*/
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url('assets/fonts/inter-latin.woff2') format('woff2');
}
:root{--bg:#fff;--fg:#000;--accent:#000;--muted:#555;--pad:24px;--site-title-size:clamp(16px,calc(3vw - 3pt),34px)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.45}
#content,.site-header,.site-footer{width:100%;max-width:1200px;margin-inline:auto}
#content .alignfull{width:100%;max-width:100%;margin-inline:0}
#content iframe,#content video{max-width:100%}
a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}
.site-header{display:flex;justify-content:flex-end;padding:18px 24px;position:relative;z-index:20}
.site-title{font-size:var(--site-title-size);letter-spacing:.06em;white-space:nowrap}
.menu-toggle{position:fixed;top:18px;left:24px;z-index:30;border:0;background:none;color:#000;font:inherit;cursor:pointer;text-transform:uppercase;letter-spacing:.05em}
.primary-nav{position:fixed;top:0;left:0;width:360px;max-width:90vw;height:100vh;background:#fff;border-right:1px solid #bbb;padding:64px 24px 24px;transform:translateX(-101%);transition:transform .25s ease;z-index:25}
.primary-nav.is-open{transform:translateX(0)}.primary-nav ul{list-style:none;margin:0;padding:0}
.primary-nav li{margin:0 0 8px}.primary-nav a{font-size:18px;text-transform:none}
.primary-nav .sub-menu{padding-left:16px;margin-top:4px}
.intro{padding:30px 24px 50px;max-width:1000px;font-size:clamp(20px,3vw,38px)}
.intro-heading{margin:0 0 .45em;font:inherit;font-weight:600;line-height:1.15}
.intro-subheading{margin:0 0 .65em;font:inherit;font-size:.72em;font-weight:500;line-height:1.25}
.intro-text p{margin:0 0 .8em}.intro-text p:last-child{margin-bottom:0}
.selection-content{padding:30px 24px 50px;max-width:1800px;margin:0 auto}
.selection-content h1{font-size:var(--site-title-size)!important;line-height:1.15}
.selection-content h2{font-size:clamp(15px,2.4vw,28px);line-height:1.2}
.selection-content h3{font-size:clamp(14px,2vw,23px);line-height:1.25}
.has-small-font-size{font-size:14px}.has-normal-font-size{font-size:18px}.has-large-font-size{font-size:26px}.has-maximum-font-size{font-size:var(--site-title-size)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;width:100%;max-width:1200px;margin-inline:auto}
.tile{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#fff}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.tile:hover img{transform:scale(1.02)}
.tile-title{color:#fff;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:25px;background:rgba(0,0,0,.48);opacity:0;transition:opacity .2s ease;font-size:clamp(18px,2.4vw,32px)}
.tile:hover .tile-title,.tile:focus-visible .tile-title{opacity:1}
.page-wrap,.single{padding:30px 24px 80px;max-width:1800px;margin:auto}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover}
.entry-content{font-size:18px}.entry-content img{max-width:100%;height:auto}
.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.button,.submit{display:inline-block;border:1px solid var(--accent);padding:11px 18px;text-transform:uppercase;font-size:13px;background:transparent;color:#000}
.button:hover,.submit:hover{background:#eee;color:#000}
.work-filters{display:flex;gap:12px;flex-wrap:wrap;padding:24px}
.work-filter{cursor:pointer;font-family:inherit;background:#fff;color:#000}
.work-filter:hover{background:#fff;color:#000}
.work-filter[aria-current="true"]{background:#000;color:#fff}
.tile[hidden]{display:none}
.single{max-width:1100px}.single h1{font-size:clamp(30px,5vw,70px);font-weight:400;margin:0 0 12px}
.single-extra{width:100%;margin:0 0 35px}.single-extra img{display:block;width:100%;height:auto}
body.bst-slider-active{overflow:hidden}
.bst-slider{margin:30px 0}
.bst-slider-open{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.bst-slider-open img{display:block;width:100%;height:auto}
.bst-slider-open::after{content:"";position:absolute;inset:0;background:url("assets/icons/zoom-in.svg") center / clamp(64px,12vw,140px) auto no-repeat;filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));pointer-events:none}
.bst-slider-overlay[hidden],.bst-slider-stage img[hidden]{display:none}
.bst-slider-overlay{position:fixed;inset:0;z-index:1000;background:#fff;color:#000;display:flex;align-items:center;justify-content:center}
.bst-slider-stage{width:min(1050px,100vw);height:100vh;display:flex;align-items:center;justify-content:center}
.bst-slider-stage img{display:block;width:100%;height:100%;object-fit:contain}
.bst-slider-close,.bst-slider-prev,.bst-slider-next{position:absolute;z-index:2;border:0;background:rgba(255,255,255,.85);color:#000;cursor:pointer;line-height:1;padding:8px 14px}
.bst-slider-close{top:16px;right:16px;font-size:68px}
.bst-slider-prev,.bst-slider-next{top:50%;transform:translateY(-50%);font-size:96px}
.bst-slider-prev{left:16px}.bst-slider-next{right:16px}
.bst-slider-editor-images{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bst-slider-editor-images img{width:100px;height:100px;object-fit:cover}
.site-footer{border-top:1px solid #bbb;padding:20px 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:18px}
.footer-menu,.socials{display:flex;gap:20px;flex-wrap:wrap}
.footer-menu{font-size:calc(1em - 2pt)}
.footer-menu-list{display:flex;gap:20px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-menu-list li{list-style:none;margin:0;padding:0}
.footer-menu a{text-transform:none}
.contact-form{max-width:800px}.contact-form label{display:block;margin:0 0 6px}
.contact-form input,.contact-form textarea{width:100%;background:#fff;color:#000;border:1px solid #777;padding:12px;font:inherit;margin-bottom:18px}
.contact-form textarea{min-height:180px}.contact-form .consent{display:flex;gap:10px;align-items:flex-start}.contact-form .consent input{width:auto;margin:4px 0 0}
.cookie-notice{position:fixed;right:24px;bottom:24px;z-index:90;width:min(420px,calc(100vw - 48px));padding:18px 20px;border:1px solid #777;background:#fff;color:#000;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.cookie-notice[hidden]{display:none}.cookie-notice p{margin:0 0 14px}.cookie-consent{display:flex;align-items:center;gap:9px;cursor:pointer}.cookie-consent input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
@media(max-width:800px){.grid,.two-col{grid-template-columns:1fr}.site-header{padding:18px 16px}.menu-toggle{left:16px}.page-wrap,.single{padding-left:16px;padding-right:16px}.site-footer{padding-left:16px;padding-right:16px}}
@media(max-width:1024px){.grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ---------------------------------------------------------
   Header + Hauptnavigation
   --------------------------------------------------------- */
.site-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 18px 24px;
    position: relative;
    z-index: 30;
    pointer-events: none;
}

.site-title {
    pointer-events: auto;
    display: block;
    font-size: var(--site-title-size);
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: none;
    white-space: nowrap;
}

.menu-toggle {
    pointer-events: auto;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 60px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 40;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 4px;
    background: currentColor;
    transform-origin: center;
    transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(20px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-20px) rotate(-45deg);
}

.primary-nav {
    position: fixed;
    top: 0;
    right: max(0px, calc((100vw - 1200px) / 2));
    left: auto;
    width: 380px;
    max-width: 100vw;
    height: 100vh;
    padding: 76px 24px 24px;
    background: #fff;
    border: 0;
    transform: translateX(101%);
    transition: transform .25s ease;
    z-index: 25;
}

.primary-nav.is-open {
    transform: translateX(0);
}
.primary-nav[hidden]{display:none}

.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-nav li {
    margin: 0;
    padding: 0;
    border-top: 1px solid #bbb;
}

.primary-nav li:last-child {
    border-bottom: 1px solid #bbb;
}

.primary-nav a {
    display: block;
    padding: 13px 0;
    font-size: 18px;
    line-height: 1.2;
    text-transform: none;
}

.tile-placeholder {
    position: absolute;
    inset: 0;
    display: block;
    background: #fff;
}

@media (max-width: 800px) {
    .primary-nav a,
    .site-footer {
        font-size: 16px;
    }

    .site-header {
        padding: 18px 16px;
        gap: 12px;
    }

    .selection-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .primary-nav {
        right: 0;
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .cookie-notice {
        right: 16px;
        bottom: 16px;
        width: calc(100vw - 32px);
    }
}

/* Desktop: 5 points = 6.67 CSS pixels between the work tiles. */
@media(min-width:1025px){.work-grid-spaced{gap:5pt}}

/* Align desktop tiles and filters with the padded header content. */
@media(min-width:1025px){
    .work-grid-spaced{width:calc(100% - 48px);max-width:1152px;gap:5pt}
    .work-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:1200px;margin-inline:auto;padding:24px;gap:12px}
    .work-filter{text-align:center;min-width:0}
}

/* Back to top on the complete works list. */
.bst-scroll-top{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:80;display:flex;align-items:center;justify-content:center;width:52px;height:52px;padding:12px;border:1px solid #000;border-radius:50%;background:rgba(255,255,255,.94);color:#000;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.bst-scroll-top[hidden]{display:none}
.bst-scroll-top svg{display:block;width:100%;height:100%}
.bst-scroll-top:hover{background:#eee}
.bst-scroll-top:focus-visible{outline:3px solid #000;outline-offset:4px}
@media(max-width:800px){.bst-scroll-top{right:16px}}