@font-face {
    font-family: 'Orkney';
    src: url('../fonts/Orkney Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Orkney Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Orkney Regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/Orkney Regular.ttf')  format('truetype') /* Safari, Android, iOS */
}

/* https://docs.tabler.io/ui/getting-started/customize */
:root {
    --tblr-font-sans-serif: "Orkney";
    --tblr-body-font-size: 1.1rem;
    --tblr-font-size-h1: 2.1rem;
    --tblr-line-height-h1: 2.6rem;
    --tblr-primary: #d5112e;
}

/* Blog: post head and body (site/snippets/post-article.php) */
.post-header {
    display: block;
}

.post-title {
    margin: 0 0 .25rem;
    font-size: var(--tblr-font-size-h2);
    line-height: 1.3;
}

.post-title a {
    color: inherit;
}

.post-meta > * + *::before {
    content: "·";
    margin: 0 .4em;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-top: .5rem;
}

.post-body img {
    max-width: 100%;
    height: auto;
}

/* Images in posts (KirbyTags image and images, docs/image-format.md) */
.post-body {
    /* contains floated images */
    display: flow-root;
}

.post-image {
    margin: 0 0 1rem;
}

/* never wider than the original: small images aren't scaled up */
.post-image img {
    display: block;
}

.post-image figcaption {
    display: flex;
    align-items: baseline;
    gap: .25rem .75rem;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--tblr-secondary);
}

/* the caption wraps, the copyright stays on its first line, right-aligned */
.post-image-caption {
    flex: 1 1 auto;
    min-width: 0;
}

.post-image figcaption .post-image-copyright {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: inherit;
    line-height: inherit;
    text-align: right;
}

.post-images {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    clear: both;
}

.post-images > .post-image {
    margin: 0;
}

.post-body :is(h2, h3, h4, h5, h6) {
    clear: both;
}

/* side by side and floated only from 576px, below that full width */
@media (min-width: 576px) {
    .post-images-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .post-images-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .post-image.post-image-1-2:not(.post-images > *) {
        width: 50%;
    }

    .post-image.post-image-1-3:not(.post-images > *) {
        width: 33.333%;
    }

    /* a smaller image without align is centered */
    .post-image:is(.post-image-1-2, .post-image-1-3):not(.post-image-left, .post-image-right) {
        margin-inline: auto;
    }

    .post-image-left {
        float: left;
        margin: .25rem 1.5rem 1rem 0;
    }

    .post-image-right {
        float: right;
        margin: .25rem 0 1rem 1.5rem;
    }
}

/* Lightbox caption (public/assets/js/lightbox.js) */
.pswp__caption {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    max-width: min(48rem, calc(100% - 2rem));
    padding: .5rem 1rem;
    border-radius: var(--tblr-border-radius);
    background: rgba(0, 0, 0, .6);
    color: #fff;
    text-align: center;
}

.pswp__caption a {
    color: inherit;
    text-decoration: underline;
}

/* Comments (site/snippets/comments-section.php, komments snippets) */
.post-comments .list-comments,
.post-comments .list-comments ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.post-comments .list-comments ul {
    margin-top: 1rem;
    padding-left: 1.25rem;
    border-left: 2px solid var(--tblr-border-color);
}

.post-comments .u-comment {
    margin-bottom: 1.5rem;
}

.post-comments .h-card {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
    font-weight: var(--tblr-font-weight-medium);
}

.post-comments .u-photo {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.post-comments .u-comment > footer {
    display: flex;
    gap: 1rem;
    font-size: .875em;
    color: var(--tblr-secondary);
}

/*
 * Comment form (site/snippets/komments/kommentform.php). Replaces the
 * plugin's komments.css; komments.js toggles these classes.
 */
.komment-form .msg:not(.visible) {
    display: none;
}

.komment-form .loader.visible {
    display: flex;
    align-items: center;
}

.komment-form .user-feedback.msg-success {
    --tblr-alert-variant-color: var(--tblr-success);
}

.komment-form .user-feedback.msg-error {
    --tblr-alert-variant-color: var(--tblr-danger);
}

.komment-form .user-feedback p:last-child {
    margin-bottom: 0;
}

.komment-form .replyHandleDisplay:empty {
    display: none;
}

/* fields the server rejected, like Tabler's .is-invalid */
.komment-form .form-error {
    border-color: var(--tblr-danger);
}

/* out of sight, but not display: none, which bots recognize */
.komment-form .komment-honeypot {
    position: absolute;
    left: -200vw;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Webmentions (site/snippets/webmentions-section.php) */
/*
 * Collapsed to its number; the <details> opens without JS. The chevron
 * replaces the marker, which a flex card-header does not show.
 */
.post-webmentions summary {
    cursor: pointer;
    list-style: none;
}

.post-webmentions summary::-webkit-details-marker {
    display: none;
}

.post-webmentions summary .card-title {
    margin: 0;
}

.post-webmentions summary::after {
    content: "";
    width: .5rem;
    height: .5rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
}

.post-webmentions details[open] summary::after {
    transform: rotate(225deg);
}

/* no line between header and nothing when closed */
.post-webmentions details:not([open]) summary {
    border-bottom-color: transparent;
}

.post-webmentions .list-webmentions {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.post-webmentions .webmention {
    margin-bottom: 1.5rem;
}

.post-webmentions .webmention > header {
    margin-bottom: .25rem;
    font-weight: var(--tblr-font-weight-medium);
}

.post-webmentions .webmention > header .text-secondary {
    font-weight: normal;
}

.post-webmentions .webmention > footer {
    font-size: .875em;
    color: var(--tblr-secondary);
}

/*
 * The left column's navigation from md to xl, in the footer (layout.php,
 * footer.php; below md it is in the hamburger menu): "Themen" (with
 * "Seiten") and "Archiv" side by side, the years of the archive in several
 * columns so the list doesn't get too long.
 */
.footer-nav {
    padding-top: 1rem;
}

.footer-nav .blog-nav {
    display: flex;
    align-items: flex-start;
    gap: 1rem 2rem;
}

.footer-nav .blog-nav-primary,
.footer-nav .blog-nav-archive-section {
    flex: 1 1 0;
    min-width: 0;
}

.footer-nav .blog-nav-archive {
    column-count: 2;
    column-width: 7rem;
}

.footer-nav .blog-nav-archive > li {
    break-inside: avoid;
}

/* Left blog navigation (site/snippets/sidebar-left.php) */
/*
 * As large as a plain h2, and a bit fainter than Tabler's subheader
 * (halfway between its gray and the next lighter one, in dark mode the
 * next darker one).
 */
.blog-nav .subheader {
    margin: 0 0 .5rem;
    font-size: var(--tblr-font-size-h2);
    line-height: var(--tblr-line-height-h2);
    color: light-dark(
        color-mix(in oklch, var(--tblr-gray-500), var(--tblr-gray-400)),
        color-mix(in oklch, var(--tblr-gray-400), var(--tblr-gray-500))
    );
}

/* the left column's navigation in the hamburger menu below md: folded-in groups */
.navbar-mobile-nav {
    padding: .25rem 1.25rem 1rem;
}

.navbar-mobile-nav .blog-nav-group {
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
}

.navbar-mobile-nav > .blog-nav-group:last-child,
.navbar-mobile-nav .blog-nav > .blog-nav-group:last-child {
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}

/* years inside the archive are groups of their own, without separators */
.navbar-mobile-nav .blog-nav-group .blog-nav-group {
    border-top: 0;
    border-bottom: 0;
}

.navbar-mobile-nav .blog-nav-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-block: .75rem;
    cursor: pointer;
    list-style: none;
    font-size: var(--tblr-body-font-size);
    font-weight: var(--tblr-font-weight-medium);
}

.navbar-mobile-nav .blog-nav-group > summary::-webkit-details-marker {
    display: none;
}

.navbar-mobile-nav .blog-nav-group .blog-nav-group > summary {
    padding-block: .5rem;
    font-weight: var(--tblr-font-weight-normal);
}

.navbar-mobile-nav .blog-nav-group-chevron {
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.navbar-mobile-nav .blog-nav-group[open] > summary .blog-nav-group-chevron {
    transform: rotate(180deg);
}

.navbar-mobile-nav .blog-nav-group > ul {
    margin: 0 0 .75rem 1rem;
    padding-left: 0;
    list-style: none;
}

/* entries in the lists; a year's link shares its line with the marker */
.navbar-mobile-nav .blog-nav-group ul li > a {
    display: block;
    padding-block: .3rem;
    color: var(--tblr-body-color);
}

.navbar-mobile-nav .blog-nav-group ul li > a:hover {
    color: var(--tblr-primary);
    text-decoration: none;
}

.navbar-mobile-nav .blog-nav-group a.active {
    text-decoration: underline;
    text-decoration-color: var(--tblr-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: .35em;
}

.blog-nav ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5rem;
}

.blog-nav ul ul {
    padding-left: 1rem;
    margin: .25rem 0 0;
}

.blog-nav li {
    margin-bottom: .25rem;
}

.blog-nav a {
    color: var(--tblr-body-color);
}

.blog-nav a:hover {
    color: var(--tblr-primary);
    text-decoration: none;
}

/* like .nav-item.active of the top navigation: a red line below */
.blog-nav a.active {
    text-decoration: underline;
    text-decoration-color: var(--tblr-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: .35em;
}

/* Archive in the left blog navigation: years fold out to their months */
.blog-nav .inactive {
    color: var(--tblr-secondary);
    opacity: .6;
}

.blog-nav summary {
    cursor: pointer;
}

.blog-nav summary::marker {
    color: var(--tblr-secondary);
}

/* years without posts have no fold-out marker: indent them like the others */
.blog-nav-archive > li > .inactive {
    display: inline-block;
    margin-left: 1.1em;
}

/* Author at the top of the right column (site/snippets/author-card.php) */
.author-name {
    font-size: var(--tblr-font-size-h3);
}

.author-info p:last-child,
.author-bio p:last-child {
    margin-bottom: 0;
}

/* User menu at the right of the top navigation (site/snippets/navigation_top.php) */
.user-menu {
    min-width: 16rem;
}

.user-menu-info p:last-child {
    margin-bottom: 0;
}

/*
 * Menus of the icon toggles (theme, feeds): the toggle is only the 24px
 * icon (no padding), so Tabler's arrow (14px, 0.75rem from the right edge,
 * placed for the wider avatar toggle) moves under the icon's center.
 */
.navbar-icon-menu {
    --tblr-dropdown-arrow-inset: 5px;
}

/*
 * Top navigation in two rows (site/snippets/navigation_top.php): the first
 * row (site name, area, actions) a bit darker than the page, the menu below
 * on the page's background.
 */
.navbar-top {
    --tblr-navbar-bg: light-dark(
        color-mix(in oklch, var(--tblr-body-bg), black 3%),
        color-mix(in oklch, var(--tblr-body-bg), white 3%)
    );
    --tblr-navbar-border-color: transparent;
}

.navbar-top .navbar-brand {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.navbar-top .navbar-brand a {
    color: inherit;
}

.navbar-section {
    min-width: 0;
    font-weight: var(--tblr-font-weight-normal);
}

.navbar-main {
    --tblr-navbar-bg: transparent;
}

/* "Home" starts in line with "Olbertz.de" above */
@media (min-width: 768px) {
    .navbar-main .navbar-nav {
        margin-inline-start: calc(-1 * var(--tblr-navbar-nav-link-padding-x));
    }
}

/* Slashpages (template slashpage, slashes) */
/* the short description next to the title, below it when there is no room */
.slashpage-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: .75rem;
}

.slashpage-summary {
    font-size: var(--tblr-font-size-h4);
    color: var(--tblr-secondary);
}

.slashpage-updated {
    margin: .25rem 0 0;
    font-size: var(--tblr-font-size-h5);
}

.slashpage-list dt {
    font-weight: var(--tblr-font-weight-bold);
}

.slashpage-list dd {
    margin: 0 0 .75rem;
    color: var(--tblr-secondary);
}

/* Start page: the dashboard's cards (site/snippets/dashboard/) */
.dashboard-card .card-title {
    font-size: var(--tblr-font-size-h2);
}

.dashboard-card .card-actions a {
    font-size: var(--tblr-font-size-h4);
}

.dashboard-card .list-group-item {
    padding-block: .6rem;
}

/* the card "Blog": title and date in one row, one line of the text below */
/* as high as the card next to it (row-deck): the posts share the height */
.dashboard-posts .list-group {
    flex: 1 1 auto;
}

.dashboard-posts .list-group-item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
}

.dashboard-post-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

/* a long title ends with "…" before the date */
.dashboard-post-head a {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-post-head time {
    flex-shrink: 0;
    margin-left: auto;
    text-align: right;
}

.dashboard-post-excerpt {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* lg: the card stands next to Bookmarks and is as tall as it, so it shows
   more of each text, from the top */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .dashboard-posts .list-group-item {
        justify-content: flex-start;
    }

    .dashboard-post-excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;
        white-space: normal;
    }
}

/* the card "Kacheln": 3×2 square images linking to their pages */
.dashboard-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--tblr-border-radius);
}

.dashboard-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.dashboard-tile-title {
    position: absolute;
    inset: auto 0 0;
    padding: 1.5rem .5rem .4rem;
    font-size: var(--tblr-font-size-h5);
    line-height: 1.3;
    hyphens: auto;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    opacity: 0;
    transition: opacity .2s ease;
}

.dashboard-tile:hover img,
.dashboard-tile:focus-visible img {
    transform: scale(1.04);
}

.dashboard-tile:hover .dashboard-tile-title,
.dashboard-tile:focus-visible .dashboard-tile-title {
    opacity: 1;
}

/* touch screens have no hover: titles always visible */
@media (hover: none) {
    .dashboard-tile-title {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-tile img,
    .dashboard-tile-title {
        transition: none;
    }
}

/*
 * Code blocks in every text (Olbertz\CodeBlock, docs/code-format.md),
 * colored by Prism (public/assets/vendor/prism/). Light and dark like the
 * page, colors after GitHub's. Prism wraps <pre> in .code-toolbar and adds
 * .toolbar after it, shown here as a bar above the code (language on the
 * left, copy button on the right), empty without language and copy.
 */
pre.code-block {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    color: light-dark(#1f2328, #e6edf3);
    background: light-dark(#f6f8fa, #151b23);
    border: 1px solid light-dark(#d1d9e0, #3d444d);
    border-radius: var(--tblr-border-radius);
    tab-size: 4;
}

.code-toolbar {
    display: flex;
    flex-direction: column;
    margin: 0 0 1rem;
}

.code-toolbar > pre.code-block {
    order: 1;
    margin: 0;
}

div.code-toolbar > .toolbar {
    position: static;
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Tabler has a .toolbar of its own, with negative margins */
    margin: 0;
    padding: .25rem .5rem .25rem 1rem;
    font-size: .8rem;
    background: light-dark(#f6f8fa, #151b23);
    border: 1px solid light-dark(#d1d9e0, #3d444d);
    border-bottom: 0;
    border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0;
    opacity: 1;
}

div.code-toolbar > .toolbar:empty {
    display: none;
}

div.code-toolbar:has(> .toolbar:not(:empty)) > pre.code-block {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* the copy button on the right, also when there is no language */
div.code-toolbar > .toolbar > .toolbar-item {
    margin: 0;
}

div.code-toolbar > .toolbar > .toolbar-item:has(> button) {
    margin-left: auto;
}

div.code-toolbar > .toolbar > .toolbar-item > span,
div.code-toolbar > .toolbar > .toolbar-item > button {
    padding: .125rem .5rem;
    font-size: inherit;
    color: light-dark(#59636e, #9198a1);
    background: none;
    border-radius: var(--tblr-border-radius-sm);
    box-shadow: none;
}

div.code-toolbar > .toolbar > .toolbar-item > span {
    padding-left: 0;
}

div.code-toolbar > .toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar > .toolbar-item > button:focus-visible {
    color: light-dark(#1f2328, #e6edf3);
    background: light-dark(#e6eaef, #262c36);
}

/* option wrap: long lines break at the edge (only visually: copying keeps them) */
pre.code-block.code-block-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

pre.code-block.line-numbers .line-numbers-rows {
    border-right-color: light-dark(#d1d9e0, #3d444d);
}

pre.code-block .line-numbers-rows > span::before {
    color: light-dark(#59636e, #9198a1);
}

.code-block .token.comment,
.code-block .token.prolog,
.code-block .token.doctype,
.code-block .token.cdata {
    color: light-dark(#59636e, #9198a1);
    font-style: italic;
}

.code-block .token.keyword,
.code-block .token.atrule,
.code-block .token.important,
.code-block .token.rule {
    color: light-dark(#cf222e, #ff7b72);
}

.code-block .token.string,
.code-block .token.char,
.code-block .token.attr-value,
.code-block .token.regex,
.code-block .token.url {
    color: light-dark(#0a3069, #a5d6ff);
}

.code-block .token.number,
.code-block .token.boolean,
.code-block .token.constant,
.code-block .token.symbol,
.code-block .token.property,
.code-block .token.attr-name {
    color: light-dark(#0550ae, #79c0ff);
}

.code-block .token.function,
.code-block .token.class-name {
    color: light-dark(#6639ba, #d2a8ff);
}

.code-block .token.tag,
.code-block .token.selector,
.code-block .token.inserted {
    color: light-dark(#116329, #7ee787);
}

.code-block .token.variable,
.code-block .token.builtin {
    color: light-dark(#953800, #ffa657);
}

.code-block .token.deleted {
    color: light-dark(#82071e, #ffa198);
}

.code-block .token.bold {
    font-weight: bold;
}

.code-block .token.italic {
    font-style: italic;
}