/*
 * DACHELA theme
 * -------------
 * The palette is sampled from dachela.org: the banner gradient (#4c88df →
 * #295aba), the sidebar group headers (#0062b0) and the link blue (#0055b5).
 *
 * Two deliberate departures from the original:
 *
 *  1. Base size is 16px, not 13px. 13px is below the accessible minimum and
 *     reads as cramped on modern displays; everything here scales from
 *     --dachela-base-size, so the proportions are preserved.
 *
 *  2. No web fonts are loaded. The original asks for Roboto; serving it from a
 *     CDN would send every visitor's IP to a third party, which for an
 *     association operating under German and Austrian data protection law is a
 *     liability rather than a convenience. Roboto is used when the visitor
 *     already has it, and the stack falls back to the system UI face, which is
 *     metrically close enough that the design is unchanged.
 *
 * Every value the theme configuration exposes arrives as a custom property on
 * :root, injected by the theme class — this file only ever reads them.
 */

:root {
    --dachela-header-from: #4c88df;
    --dachela-header-to:   #295aba;
    --dachela-primary:     #0062b0;
    --dachela-accent:      #4a90d9;
    --dachela-link:        #0055b5;
    --dachela-navbar:      #a9c9ea;

    --dachela-width:       1180px;
    --dachela-base-size:   16px;

    --dachela-text:        #444;
    --dachela-heading:     #222;
    --dachela-muted:       #6b6b6b;
    --dachela-rule:        #c7c7c7;
    --dachela-surface:     #fff;
    --dachela-shell:       #ececec;
    --dachela-sidebar-bg:  #f1f1f1;
    --dachela-focus:       #b8860b;

    --dachela-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
                    "Liberation Sans", FreeSans, sans-serif;
    --dachela-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --dachela-gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: var(--dachela-base-size);
    /* The original tiles a grey gradient behind the white content panel; a
       flat tone does the same job without an image request. */
    background: var(--dachela-shell);
}

body {
    margin: 0;
    font-family: var(--dachela-font);
    line-height: 1.55;
    color: var(--dachela-text);
    background: var(--dachela-shell);
    -webkit-text-size-adjust: 100%;
}

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

a { color: var(--dachela-link); }
a:hover { color: var(--dachela-accent); }

:focus-visible {
    outline: 2px solid var(--dachela-focus);
    outline-offset: 2px;
}

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

.skip-link {
    position: absolute; left: -9999px;
    background: var(--dachela-surface); color: var(--dachela-link);
    padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ── Banner ──────────────────────────────────────────────────────────────── */

.banner {
    background: linear-gradient(to bottom, var(--dachela-header-from), var(--dachela-header-to));
    color: #fff;
}

.banner__inner {
    max-width: var(--dachela-width);
    margin: 0 auto;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: var(--dachela-gap);
    flex-wrap: wrap;
}

.banner__brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    color: #fff;
    text-decoration: none;
    margin-right: auto;
}

.banner__mark { width: 3.2rem; height: 2.7rem; color: #fff; flex: none; }
.banner__logo { max-height: 3rem; width: auto; }

.banner__wordmark { display: flex; flex-direction: column; line-height: 1.2; }

.banner__title {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .01em;
}

.banner__subtitle {
    font-size: .8rem;
    font-weight: 400;
    opacity: .9;
    margin-top: .15rem;
    max-width: 46ch;
}

.banner__tools {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── Login / logout ──────────────────────────────────────────────────────── */

.user-menu {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.user-menu__name {
    color: #fff;
    font-weight: 500;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu__link { color: #fff; text-decoration: underline; }
.user-menu__link:hover { color: #fff; text-decoration: none; }

.btn-auth {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 3px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .9rem;
    text-decoration: none;
    white-space: nowrap;
}
.btn-auth:hover {
    background: #fff;
    color: var(--dachela-header-to);
    border-color: #fff;
}
.btn-auth:hover .icon-key { fill: var(--dachela-header-to); }
.icon-key { fill: currentColor; flex: none; }

/* ── Search ──────────────────────────────────────────────────────────────── */

.search { display: flex; }

.search { flex: 0 1 auto; }

.search input {
    font: inherit;
    font-size: .9rem;
    padding: .4rem .6rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    background: rgba(255, 255, 255, .95);
    color: #222;
    width: 11rem;
    /* Never let the auth button squeeze this to a sliver: below this the whole
       search wraps to its own line instead of collapsing. The label is
       configurable and can be long — "Zum Mitgliederbereich" is the default. */
    min-width: 7rem;
}

.search button {
    border: 1px solid rgba(255, 255, 255, .5);
    border-left: 0;
    border-radius: 0 3px 3px 0;
    background: rgba(255, 255, 255, .95);
    padding: 0 .6rem;
    cursor: pointer;
}
.search button svg { fill: #5a5a5a; display: block; }
.search button:hover svg { fill: var(--dachela-primary); }

/* ── Navigation strip ────────────────────────────────────────────────────── */

.navbar { background: var(--dachela-navbar); }

.navbar__list {
    max-width: var(--dachela-width);
    margin: 0 auto;
    padding: 0 1.25rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.navbar__item a {
    display: block;
    padding: .6rem 1.1rem;
    color: #14406e;
    text-decoration: none;
    font-size: .95rem;
}
.navbar__item a:hover { background: rgba(255, 255, 255, .5); }

.navbar__item.is-active a {
    background: var(--dachela-primary);
    color: #fff;
    font-weight: 500;
}

.nav-toggle { display: none; }

/* ── Shell ───────────────────────────────────────────────────────────────── */

.shell {
    max-width: var(--dachela-width);
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
}

.shell-inner {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    background: var(--dachela-surface);
    border: 1px solid #d5d5d5;
    border-top: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.layout-sidebar-right .shell-inner { grid-template-columns: minmax(0, 1fr) 15.5rem; }
.layout-sidebar-right .sidebar { order: 2; border-right: 0; border-left: 1px solid #e0e0e0; }
.layout-sidebar-none .shell-inner { grid-template-columns: minmax(0, 1fr); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
    background: var(--dachela-sidebar-bg);
    border-right: 1px solid #e0e0e0;
    padding-bottom: 2rem;
}

.sidebar__title {
    margin: 0;
    padding: .5rem .9rem;
    background: var(--dachela-primary);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.sidebar__list, .sidebar__sublist { list-style: none; margin: 0; padding: 0; }

.sidebar__list > li > a {
    display: block;
    padding: .5rem .9rem;
    color: #2b2b2b;
    text-decoration: none;
    border-bottom: 1px solid #e4e4e4;
    font-size: .95rem;
}
.sidebar__list > li > a:hover { background: #e4ecf5; color: var(--dachela-primary); }

.sidebar__list > li.is-active > a {
    font-weight: 600;
    color: var(--dachela-primary);
    box-shadow: inset 3px 0 0 var(--dachela-accent);
}

.sidebar__sublist > li > a {
    display: block;
    padding: .4rem .9rem .4rem 1.8rem;
    font-size: .9rem;
    color: #4a4a4a;
    text-decoration: none;
    border-bottom: 1px solid #e9e9e9;
}
.sidebar__sublist > li > a:hover { background: #e4ecf5; }
.sidebar__sublist > li.is-active > a { font-weight: 600; color: var(--dachela-primary); }

.sidebar__lock { font-size: .8em; opacity: .55; margin-left: .35em; }

/* ── Content ─────────────────────────────────────────────────────────────── */

.content { padding: 1.5rem 2rem 3rem; min-width: 0; }

.breadcrumbs {
    font-size: .85rem;
    color: var(--dachela-muted);
    margin-bottom: 1.5rem;
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: inline; }
.breadcrumbs li { display: inline; }
.breadcrumbs li + li::before { content: " › "; color: #aaa; }
.breadcrumbs__label { margin-right: .35rem; }

.page__title {
    margin: 0 0 .35rem;
    font-size: 2rem;
    font-weight: 400;      /* the original sets headings at normal weight */
    line-height: 1.2;
    color: var(--dachela-heading);
}

.page__meta {
    margin: 0 0 1.5rem;
    font-size: .85rem;
    color: var(--dachela-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding-bottom: .75rem;
    border-bottom: 1px solid #eee;
}
.page__meta-item { display: inline-flex; align-items: center; gap: .3rem; }
.page__meta-item svg { fill: currentColor; }
.page__meta-sep { color: #ccc; }

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

.page__content h2 {
    margin: 2.25rem 0 .9rem;
    padding-bottom: .3rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--dachela-heading);
    border-bottom: 1px solid var(--dachela-rule);   /* the site's section rule */
}

.page__content h3 { margin: 1.75rem 0 .6rem; font-size: 1.25rem; font-weight: 500; color: var(--dachela-heading); }
.page__content h4 { margin: 1.5rem 0 .5rem;  font-size: 1.1rem;  font-weight: 600; color: var(--dachela-heading); }

.page__content p, .page__content ul, .page__content ol { margin: 0 0 1rem; }
.page__content li { margin-bottom: .35rem; }

.page__content blockquote {
    margin: 1.25rem 0;
    padding: .5rem 1rem;
    border-left: 4px solid var(--dachela-accent);
    background: #f6f9fc;
    color: #3c3c3c;
}

.page__content code {
    font-family: var(--dachela-mono);
    font-size: .9em;
    background: #f4f4f4;
    padding: .1em .35em;
    border-radius: 2px;
}

.page__content pre {
    font-family: var(--dachela-mono);
    font-size: .875rem;
    background: #f6f6f6;
    border: 1px solid #e2e2e2;
    padding: .9rem 1rem;
    overflow-x: auto;
}
.page__content pre code { background: none; padding: 0; }

.page__content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.25rem 0;
    font-size: .95rem;
}
.page__content th, .page__content td {
    border: 1px solid #dcdcdc;
    padding: .5rem .7rem;
    text-align: left;
}
.page__content th { background: #eef3f9; font-weight: 600; color: var(--dachela-heading); }
.page__content tbody tr:nth-child(even) { background: #fafafa; }

/* Wide content scrolls inside its own box rather than the page. */
.page__content .table-wrap { overflow-x: auto; }

.page__content hr { border: 0; border-top: 1px solid var(--dachela-rule); margin: 2rem 0; }

.btn {
    display: inline-block;
    padding: .5rem 1.1rem;
    background: var(--dachela-primary);
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
}
.btn:hover { background: var(--dachela-header-to); color: #fff; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
    background: #3a3a3a;
    color: #d6d6d6;
    font-size: .875rem;
}

.footer__inner {
    max-width: var(--dachela-width);
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    display: flex;
    justify-content: space-between;
    gap: var(--dachela-gap);
    flex-wrap: wrap;
}

.footer p { margin: 0 0 .4rem; }
.footer a { color: #9ec8f0; }
.footer a:hover { color: #fff; }
.footer__links ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .shell { padding: 0 0 2rem; }

    .shell-inner,
    .layout-sidebar-right .shell-inner { grid-template-columns: minmax(0, 1fr); border-left: 0; border-right: 0; }

    /* Below the fold on a phone the grouped sidebar is navigation, not
       context — it moves under the content rather than pushing it down. */
    .sidebar,
    .layout-sidebar-right .sidebar {
        order: 2;
        border: 0;
        border-top: 1px solid #e0e0e0;
    }

    .content { padding: 1.25rem 1.25rem 2rem; }

    .banner__title { font-size: 1.5rem; }
    .banner__subtitle { display: none; }
    .banner__mark { width: 2.4rem; height: 2rem; }

    .search input { width: 8rem; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem; height: 2.4rem;
        border: 1px solid rgba(255, 255, 255, .55);
        border-radius: 3px;
        background: rgba(255, 255, 255, .12);
        cursor: pointer;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        display: block; width: 1.1rem; height: 2px; background: #fff; content: "";
    }
    .nav-toggle__bars { position: relative; }
    .nav-toggle__bars::before { position: absolute; top: -6px; }
    .nav-toggle__bars::after  { position: absolute; top: 6px; }

    .navbar { display: none; }
    .navbar.is-open { display: block; }
    .navbar__list { flex-direction: column; padding: 0; }
    .navbar__item a { padding: .75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .35); }
}

@media (max-width: 560px) {
    .banner__inner { gap: .75rem; }
    .banner__tools { width: 100%; justify-content: space-between; }

    /* Own line: the auth button and the menu toggle share the row above, and
       a full-width field is easier to hit than a squeezed one. */
    .search { order: 3; flex: 1 0 100%; }
    .search input { width: 100%; min-width: 0; }

    .user-menu { flex: 1 1 auto; }
    .btn-auth { flex: 0 1 auto; min-width: 0; }
    .user-menu__name { display: none; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .banner, .navbar, .sidebar, .footer, .breadcrumbs, .skip-link, .search, .user-menu { display: none !important; }
    html, body { background: #fff; color: #000; font-size: 11pt; }
    .shell, .shell-inner { max-width: none; border: 0; box-shadow: none; display: block; }
    .content { padding: 0; }
    .page__content a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* Honour a reduced-motion preference: nothing here animates, but any
   JS-toggled transition added later inherits this. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}