@font-face {
    font-family: "Ibarra Real Nova";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-400.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-500.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-600.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-700.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-400-italic.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-500-italic.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-600-italic.woff") format("woff");
}

@font-face {
    font-family: "Ibarra Real Nova";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/IbarraRealNova-700-italic.woff") format("woff");
}

:root {
    --site-font: "Ibarra Real Nova", Georgia, "Times New Roman", serif;
    --site-text: #363636;
    --site-muted: #717171;
    --site-border: #dddedf;
    --site-accent: #9b2f2f;
    --site-header-bg: #fff;
    --header-height: 102px;
    --mobile-header-height: 66px;
    --sidebar-width: 190px;
    --content-gap: 30px;
    --content-measure: 33em;
    --site-max-width: 930px;
    /* Center the desktop shell, but keep a readable gutter before the mobile breakpoint. */
    --site-inline-gutter: 1em;
    --site-shell-width: min(var(--site-max-width), calc(100% - (var(--site-inline-gutter) * 2)));
    /* Fixed elements need an explicit viewport offset because auto margins do not apply to them. */
    --site-shell-offset: max(var(--site-inline-gutter), calc((100% - var(--site-max-width)) / 2));
}

*,
*::before,
*::after {
    box-sizing: border-box;
    border-color: var(--site-border);
}

body {
    margin: 0;
    font-family: var(--site-font);
    font-size: 20px;
    line-height: 1.66;
    color: var(--site-text);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    /* Keep document scrolling native so hash links like #m716 work without JavaScript. */
    min-height: 100vh;
    word-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: currentColor;
}

.nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Hidden by default; the backdrop is only used for closing the mobile menu. */
.nav-backdrop {
    display: none;
}

header {
    background-color: #fff;
    color: var(--site-text);
    text-align: left;
    height: var(--header-height);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 0;
    border-radius: 0;
}

@media (min-width: 769px) {
    header {
        /* Align the fixed header with the centered desktop shell. */
        left: var(--site-shell-offset);
        width: var(--site-shell-width);
    }

    .sidebar ul li.nav-item--home {
        display: none;
    }
}

header h1 {
    margin: 0 0 0 0.58em;
    font-size: 43px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 1px;
}

.header-title--mobile-site,
.header-title--mobile-page {
    display: none;
}

.site-logo {
    padding: 5px 5px 5px 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.site-logo img {
    display: block;
    height: 92px;
    width: auto;
    max-height: 92px;
    border-style: none;
    border-radius: 0;
}

.site-logo--mobile {
    display: none;
    cursor: pointer;
}

.site-logo__image--mobile-white {
    display: none;
}

.container {
    display: flex;
    margin-top: var(--header-height);
    margin-right: auto;
    margin-left: auto;
    /* Reserve the same side gutter as the fixed desktop header/sidebar. */
    width: var(--site-shell-width);
    max-width: var(--site-max-width);
    /* Avoid making .content a nested scroll area; fragment links scroll the page. */
    min-height: calc(100vh - var(--header-height));
    padding-bottom: 3rem;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: #fff;
    color: var(--site-text);
    padding: 0.45em 0 1em;
    position: fixed;
    top: var(--header-height);
    /* Match the fixed sidebar to the centered desktop shell's left edge. */
    left: var(--site-shell-offset);
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
    border: 0;
    border-radius: 0;
    font-size: 0.96em;
}

.sidebar.hidden {
    transform: translateX(-100%);
}

.sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.sidebar ul li {
    margin: 0 0 0.42em;
    line-height: 1.4;
}

.sidebar ul li.nav-item--gap-before {
    margin-top: 2.15rem;
}

.sidebar ul li a {
    color: currentColor;
    font-size: 1em;
    line-height: 1.4;
    letter-spacing: 0;
    text-decoration: none;
    text-underline-offset: 0.18em;
}

.sidebar ul li.nav-item--secondary a {
    opacity: 0.65;
}

.sidebar ul li a.active {
    font-style: italic;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: from-font;
}

.content {
    background-color: #fff;
    color: var(--site-text);
    margin-left: calc(var(--sidebar-width) + var(--content-gap));
    padding: 0 0 2em;
    flex-grow: 1;
    max-width: min(var(--content-measure), calc(var(--site-max-width) - var(--sidebar-width) - var(--content-gap)));
    transition: margin-left 0.3s ease-in-out;
    border: 0;
    border-radius: 0;
}

.content > *:first-child {
    margin-top: 0;
}

.content p {
    margin: 0 0 1.15em;
}

.content--home > p:first-of-type {
    max-width: 29em;
    margin-bottom: 0.95em;
    font-size: 1.13em;
    line-height: 1.48;
}

.content--home > p:nth-of-type(2) {
    max-width: 30em;
    margin-bottom: 1.65em;
    color: var(--site-muted);
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    margin: 1.85em 0 0.58em;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.34;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

/* Keep anchored headings visible below the fixed desktop header. */
.content [id] {
    scroll-margin-top: calc(var(--header-height) + 0.75em);
}

.content p:last-of-type + h1,
.content p:last-of-type + h2,
.content p:last-of-type + h3,
.content p:last-of-type + h4,
.content p:last-of-type + h5,
.content p:last-of-type + h6 {
    margin-top: 1.9em;
}

.content ul,
.content ol {
    margin: 0 0 1.25em 1.05em;
    padding-left: 1em;
}

.content li {
    margin: 0 0 0.2em;
}

.content a {
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.16em;
}

.content .callout {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 1.45em;
    padding: 0.45em 0.65em 0.5em;
    color: var(--site-accent);
    border: 1px solid var(--site-accent);
    font-weight: 700;
    line-height: 1.45;
}

.content .callout p {
    margin: 0;
}

.content .callout p + p {
    margin-top: 0.45em;
}

.content img {
    display: block;
    max-width: min(100%, 26rem);
    height: auto;
    margin: 0.15em 0 1.35em;
    border-style: none;
    border-radius: 0;
}

.content--ueber-mich > p:first-child {
    margin-bottom: 1.45em;
}

.content--ueber-mich > p:first-child img {
    max-width: min(100%, 20.5rem);
}

.content--kontakt img {
    max-width: min(100%, calc(var(--content-measure) - 1.5rem));
}

@media (max-width: 768px) {
    body {
        font-size: 18px;
    }

    header {
        height: var(--mobile-header-height);
        background-color: var(--site-header-bg);
        color: var(--site-text);
        justify-content: flex-start;
        padding-right: 1em;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14);
    }

    header h1 {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        margin-left: 0.75rem;
        font-size: 1rem;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .header-title--desktop {
        display: none;
    }

    .header-title--mobile-site {
        display: block;
        overflow: hidden;
        color: var(--site-text);
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .header-title--mobile-page {
        display: block;
        overflow: hidden;
        margin-top: 0.1rem;
        color: currentColor;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.18;
        opacity: 0.65;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-logo--desktop {
        display: none;
    }

    .site-logo--mobile {
        display: flex;
        position: relative;
        width: var(--mobile-header-height);
        height: 100%;
        justify-content: center;
        background-color: transparent;
    }

    .site-logo {
        padding: 0;
    }

    .site-logo img {
        height: 40px;
        width: 40px;
        max-height: 40px;
    }

    .site-logo--mobile img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% - 1px), -50%);
        z-index: 1;
    }

    .site-logo--mobile .site-logo__image--mobile-white {
        display: block;
        opacity: 0;
    }

    #nav-toggle:checked ~ header .site-logo--mobile {
        background-color: var(--site-text);
    }

    #nav-toggle:checked ~ header .site-logo__image--mobile-black {
        opacity: 0;
    }

    #nav-toggle:checked ~ header .site-logo__image--mobile-white {
        opacity: 1;
    }

    .container {
        margin-top: var(--mobile-header-height);
        width: 100%;
        max-width: none;
        min-height: calc(100vh - var(--mobile-header-height));
        padding-bottom: 0;
    }

    .sidebar {
        width: max-content;
        max-width: calc(100vw - 1em);
        top: calc(var(--mobile-header-height) - 1px);
        /* Mobile menu opens from the viewport edge and overlaps the header rule so the panel obscures its own section of the line. */
        left: 0;
        height: auto;
        max-height: calc(100vh - var(--mobile-header-height) - 1em);
        background-color: var(--site-text);
        color: #fff;
        padding: 1em;
        overflow-y: auto;
        clip-path: inset(0 0 100% 0);
        opacity: 0;
        pointer-events: none;
        transform: none;
        /* Keep the open menu above the header rule and invisible backdrop so its links stay clickable. */
        z-index: 1001;
        transition: clip-path 0.2s ease, opacity 0.16s ease;
    }

    /* Covers the page below the fixed header when the mobile menu is open. */
    .nav-backdrop {
        position: fixed;
        inset: var(--mobile-header-height) 0 0;
        display: block;
        pointer-events: none;
        z-index: 900;
    }

    /* The backdrop only catches taps while the checkbox-driven menu is open. */
    #nav-toggle:checked ~ .nav-backdrop {
        pointer-events: auto;
    }

    .sidebar ul li {
        margin-bottom: 0.55em;
    }

    #nav-toggle:checked ~ .container .sidebar {
        clip-path: inset(0);
        opacity: 1;
        pointer-events: auto;
    }

    .content {
        margin-left: 0;
        max-width: none;
        padding: 1.35em 1.1em 2.4em;
    }

    .content [id] {
        scroll-margin-top: calc(var(--mobile-header-height) + 0.75em);
    }

    .content--home > p:first-of-type {
        font-size: 1.07em;
    }

    .content h1,
    .content h2,
    .content h3,
    .content h4,
    .content h5,
    .content h6 {
        margin-top: 1.65em;
    }

    .content--ueber-mich > p:first-child img {
        max-width: min(100%, 18rem);
    }
}