/* additions of the Grav port (everything else is the original theme css) */

/* Mastodon icon: the icon font has no Mastodon glyph, so a self-hosted single-colour svg mask is used (takes the text colour like the other icons) */
.fa-mastodon:before {
  content: "" !important;
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: middle;
  position: relative;
  top: -.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Konto"/login hint and forms */
.notice-box { border-left: 4px solid #e32d6d; padding: 1rem 1.5rem; background: rgba(0, 0, 0, .04); margin: 2rem 0; }

/* click-to-load video / external hint, no third party request before the click */
.video-consent { text-align: center; padding: 3rem 1rem; background: rgba(0, 0, 0, .06); }

/* Grav form plugin markup */
.form-field { margin-bottom: 1.5rem; }
.form-field .form-label label, .form-field label { display: block; margin-bottom: .5rem; }
.form-field .form-control, .form-field select.form-control { max-width: 100%; }
.form-field .form-input-wrapper { max-width: 40rem; }
.form-field.checkboxes label, .form-field .checkbox { display: inline; }
.form-errors, .notices { margin-bottom: 1.5rem; padding: 1rem 1.5rem; }
.notices, .form-errors { color: var(--notice-fg); }
.notices a, .form-errors a { color: inherit; text-decoration: underline; }
.notices.green { background: var(--notice-ok-bg); }
.notices.yellow { background: var(--notice-warn-bg); }
.notices.red, .form-errors { background: var(--notice-err-bg); }

/* Mastodon posts on the home page: long posts are cut, the link below leads to the full post */
/* Mastodon posts are shown in full (no cut), left aligned: justified text makes ugly gaps in narrow columns */
.twitter .toot { overflow-wrap: anywhere; }
.twitter .toot, .twitter .toot p { text-align: left; }
.twitter .information a { color: inherit; font-weight: 700; }
.twitter .information a:hover { color: var(--link); }
.twitter .toot p { margin-bottom: .5em; }

/* Grafana frames: heights come from the dashboard layout (cron job), not a fixed 2800px */
iframe#stats { min-height: 0; height: var(--h-desktop, 2800px); }
@media (max-width: 800px) { iframe#stats { height: var(--h-stacked, 2800px); } }

/* native statistics boards */
.stats-toolbar { display: flex; gap: .4rem; margin: .25rem 0 .75rem; }
.stats-toolbar .btn { margin: 0; border-radius: 1rem; }
.stats-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.stats-tiles:empty { display: none; }
.stats-tile { border: 1px solid var(--border); background: var(--tile-bg); border-radius: .25rem; padding: .35rem .6rem; }
.stats-tile h4 { font-size: .7rem; margin: 0; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-value { font-size: 1.15rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stats-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.stats-wide { grid-column: 1 / -1; }
.stats-panel h4 { font-size: 1rem; margin: 0 0 .25rem; }
.stats-panel { min-width: 0; }
.stats-section { margin-top: 1.5rem; }
.stats-plot .u-legend { text-align: left; font-size: .8rem; }
.stats-loading { opacity: .5; transition: opacity .2s; }

/* chart tooltip */
.stats-plot .u-over { overflow: visible; }
.stats-tip { position: absolute; z-index: 20; pointer-events: none; background: rgba(30,30,30,.94); color: #fff; font-size: .78rem; line-height: 1.35;
             padding: .4rem .55rem; border-radius: .25rem; box-shadow: 0 2px 8px rgba(0,0,0,.35); white-space: nowrap; max-width: 90vw; }
.stats-tip-time { font-weight: 700; margin-bottom: .2rem; }
.stats-tip-sw { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; }
.stats-tip-more { opacity: .7; }

/* ---------- colours as CSS variables: dark mode only switches the values ----------
   Follows the OS setting (set by the script in <head>), the button bottom right overrides it, ?theme=dark|light for links/tests. */
:root {
    --bg: #fff;            --fg: #373636;        --fg-muted: #666;     --heading: #373636;
    --surface: #e9e9e9;    --surface-2: #504f4e; --tile-bg: #fff;      --border: #ddd;
    --input-bg: #fff;      --input-border: #e9e9e9; --input-focus: #e9e9e9;
    --link: #e32d6d;       --link-dark: #e32d6d;  --nav-link: #3f3f3e;  --btn-bg: #e9e9e9;    --btn-fg: #373636;
    --chart-axis: #444;    --chart-grid: rgba(0, 0, 0, .1);
    --gray: #e9e9e9;
    --icon-bg: #fff;      /* fill of the round icons in news lists (original: white) */
    --show-moon: block; --show-sun: none;   /* theme switch icon: moon while light (click = dark), sun while dark */
    --notice-fg: #373636; --notice-ok-bg: #dff0d8; --notice-warn-bg: #fcf8e3; --notice-err-bg: #f2dede;
}
html[data-theme="dark"] {
    --bg: #242424;         --fg: #d8d8d8;        --fg-muted: #9a9a9a;  --heading: #f2f2f2;
    --surface: #323232;    --surface-2: #3c3c3c; --tile-bg: #2c2c2c;   --border: #484848;
    --input-bg: #2f2f2f;   --input-border: #484848; --input-focus: #3a3a3a;
    --link: #ff5c93;       --link-dark: #ff5c93;  --nav-link: #cfcfcf;  --btn-bg: #3a3a3a;    --btn-fg: #eee;
    --chart-axis: #bbb;    --chart-grid: rgba(255, 255, 255, .12);
    --gray: #2e2e2e;
    --icon-bg: #fff;
    --show-moon: none; --show-sun: block;
    --notice-fg: #f3e6e6; --notice-ok-bg: #22402a; --notice-warn-bg: #4a3f1c; --notice-err-bg: #5a2626;
    color-scheme: dark;
}
body, .light, .card-white { background: var(--bg); color: var(--fg); }
.page-header, .footer { color: #fff; }   /* these bands stay dark in both themes */
h1, h2, h3, h4, h5, h6 { color: var(--heading); }
.page-header h1, .page-header h2, .footer h1, .footer h2, .footer h3 { color: #fff; }
a { color: var(--link); }
/* links per section background (not per theme): dark bands, pink band, pink information blocks */
.dark a:not(.btn), .page-header a:not(.btn), .footer a:not(.btn), .gray .dark a:not(.btn) { color: var(--link-dark); }
.pink a:not(.btn), .information-block a:not(.btn), .card-primary a:not(.btn) { color: #f4c72f; }
.light .information-block a:not(.btn), .gray a:not(.btn) { color: var(--link); }
.navbar-dark a, .offcanvas a, .footer .nav a { color: inherit; }
.btn-primary, .btn-primary:hover, .btn-primary:focus { color: #fff; }
.news-menu-view a, a.link-unstyled { color: var(--nav-link); }
.news-menu-view a.active, .news-menu-view a:hover { color: var(--link); }
.bubble, blockquote, .notice-box { background: var(--surface); color: var(--fg); }
.bubble blockquote { background: var(--surface-2); color: #fff; }
.form-control { background: var(--input-bg); color: var(--fg); border-color: var(--input-border); }
.form-control:focus { background: var(--input-focus); }
hr, .table td, .table th { border-color: var(--border); }
.btn-secondary { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-secondary.active { background: var(--link); border-color: var(--link); color: #fff; }
.text-muted { color: var(--fg-muted) !important; }
.pagination > li > a, .pagination > li > span { background: transparent; border-color: var(--border); }
.page-navigation .pagination li > a, .page-navigation .pagination li > span { background: transparent; color: var(--fg); }
.page-navigation .pagination li.current > span { color: var(--link); }
.page-navigation .pagination li.disabled > a, .page-navigation .pagination li.disabled > span { color: var(--border); }
.page-navigation .pagination li.current > span, .page-navigation .pagination li > a:hover { color: var(--link); background: transparent; }
.page-navigation .pagination li.first > a, .page-navigation .pagination li.last > a, .page-navigation .pagination li.previous > a, .page-navigation .pagination li.next > a,
.page-navigation .pagination li.previous > span, .page-navigation .pagination li.next > span { color: var(--fg); border-color: var(--border); background: transparent; }
.page-navigation .pagination li.first > a:hover, .page-navigation .pagination li.last > a:hover, .page-navigation .pagination li.previous > a:hover, .page-navigation .pagination li.next > a:hover { color: var(--link); background: transparent; }
.page-navigation .pagination li.previous.disabled > span, .page-navigation .pagination li.next.disabled > span { color: var(--border); }
.article .news-img-wrap a [class^="fa-"], .article .news-img-wrap a [class*="fa-"] { background: var(--icon-bg); }
.u-legend { color: var(--fg); }

/* theme switch (menu on desktop, top bar on mobile): no UA button chrome in any browser */
.theme-switch, .theme-switch:hover, .theme-switch:active, .theme-switch:focus {
    -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none;
    outline: 0; padding: 0; margin: 0; font: inherit; color: #fff; cursor: pointer; line-height: 1; -webkit-tap-highlight-color: transparent; }
.theme-switch::-moz-focus-inner { border: 0; padding: 0; }
.theme-switch:hover { color: #a6a6a6; }
.theme-switch:focus-visible { outline: 2px solid #f4c72f; outline-offset: 4px; border-radius: 4px; }
.theme-switch .theme-icon { display: block; }
.navbar .hidden-lg-up .theme-switch { float: right; margin: .45rem .5rem 0 0; }
/* account pages (login, register, forgot, reset): the old site's look */
/* the login page has its own column headings; forgot/reset password keep the plugin's heading */
.account-columns #grav-login > h1 { display: none; }
#grav-login, .form-wrapper { max-width: 100%; }
.light .form-field { margin-bottom: 1.25rem; }
.light .form-field.has-placeholder .form-label { position: absolute; left: -9999px; }
.light .form-input-wrapper input[type="text"], .light .form-input-wrapper input[type="email"], .light .form-input-wrapper input[type="password"] {
    display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; line-height: 1.5; color: var(--fg); background: var(--input-bg);
    border: 3px dashed var(--input-border); border-radius: 0; box-shadow: none; }
.light .form-input-wrapper input:focus { outline: none; border-color: var(--link); }
.light .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.light .form-actions .rememberme { flex-basis: 100%; }
.light .form-actions a.button { color: var(--link); order: 1; }
.light .form-actions button, .light #user-register button, .light form button[type="submit"], .light form button[type="reset"] {
    order: 2; background: #e32d6d; color: #fff; border: 0; border-radius: 2rem; padding: .55rem 1.4rem; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.light form button[type="reset"] { background: transparent; color: var(--link); }
.light form button:hover { filter: brightness(1.1); }
.light button .fa, .light a.button .fa { display: none; }
.account-columns .row { margin: 0; }
@media (max-width: 991px) { .account-columns > div + div { margin-top: 2rem; } }
.light #grav-login form, .light .login-form { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; max-width: none; }
.light #grav-login { margin-top: 1.5rem; }
.light .form-actions .rememberme { text-align: left; }
.light .form-actions .rememberme label { margin-left: .4rem; }
.light #grav-login { border: 0; background: transparent; box-shadow: none; padding: 0; max-width: none; margin: 1.5rem 0 0; }

/* sections with their own background: the text colour has to follow the section, not just the theme */
.gray, .light .information-block { background: var(--gray); color: var(--fg); }
.gray h1, .gray h2, .gray h3, .gray h4, .gray h5, .gray h6 { color: var(--heading); }
.dark, .pink { color: #fff; }
.dark blockquote, .dark pre, .dark code, .dark .alert, .dark .bubble { color: #fff; }
.dark .bubble { background: var(--surface-2); }
.dark .bubble:before { border-bottom-color: var(--surface-2); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .pink h1, .pink h2, .pink h3, .pink h4, .pink h5, .pink h6 { color: #fff; }
.bubble:before { border-bottom-color: var(--surface); }
.light .information-block:before { border-bottom-color: var(--gray); }
.bubble h3 a, .bubble .header a { color: var(--heading); }
.bubble h3 a:hover { color: var(--link); }
/* desktop: the theme switch sits at the left end of the menu (globe on the right), without moving the links */
.nav-left { position: relative; }
.nav-left .theme-switch { position: absolute; left: .4rem; top: 1.4rem; float: none; margin: 0; }

.footer-links a, .footer .footer-links a { vertical-align: top; color: #f4c72f; }


/* Mastodon icon positioning */
/* in buttons the original theme places the icon absolutely at the left padding: keep that (my svg icon must not turn it relative) */
.btn-icon-left.fa-mastodon:before { position: absolute; top: 50%; left: .8rem; transform: translateY(-50%); margin: 0; }
/* footer ring: centre the glyph exactly like the font icons next to it */
.footer-links .fa-mastodon { display: flex; align-items: center; justify-content: center; height: 36px; }
.footer-links .fa-mastodon:before { display: block; position: static; top: 0; width: 1.3rem; height: 1.3rem; vertical-align: baseline; }
/* desktop menu (>= 1200px): reserve room for the theme switch at the left end */
@media (min-width: 1200px) { .nav-left { padding-left: 2.4rem; } }
/* 992-1199px: the full menu does not fit without squeezing the links, so use the burger/offcanvas menu up to 1199px (the original theme only did so below 992px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .hidden-md-down { display: none !important; }
    .navbar .hidden-lg-up { display: block !important; }
    #offcanvas { display: block; }
    .offcanvas-open #page { left: 15em; }   /* the original theme turns the slide off from 992px: keep it, otherwise the header covers the menu logo */
}
/* the Mastodon glyph is an svg mask (not a font glyph): in the ring spans of the cards it is centred like the font icons (the span IS the ring, keep its size) */
.border-icon span.fa-mastodon, .small-icon span.fa-mastodon, .page-icon span.fa-mastodon { display: inline-flex; align-items: center; justify-content: center; }
.border-icon span.fa-mastodon:before, .small-icon span.fa-mastodon:before, .page-icon span.fa-mastodon:before { display: block; position: static; top: 0; width: 1.05em; height: 1.05em; margin: 0; vertical-align: baseline; }

.theme-switch .icon-moon { display: var(--show-moon); }
.theme-switch .icon-sun { display: var(--show-sun); }

/* sticky footer: the page is at least window high, the content band grows, so the footer always ends at the bottom edge (no bar below it) */
#page { min-height: 100vh; display: flex; flex-direction: column; }
#page > .content { flex: 1 0 auto; }
#page > .footer { flex: 0 0 auto; }
#page.map { display: block; min-height: 0; }   /* the map page has its own fixed height layout */
/* registration form: e-mail on its own row, both password fields side by side (like the old site) */
.register-passwords { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 575px) { .register-passwords { grid-template-columns: 1fr; } }

/* tablet / phone: logo in the top bar (the desktop menu has it in the middle), burger left, theme switch right */
.navbar .hidden-lg-up { position: relative; min-height: 3.4rem; }
.mobile-logo { position: absolute; left: 50%; top: .35rem; transform: translateX(-50%); display: block; line-height: 0; }
.mobile-logo img { height: 2.7rem; width: auto; display: block; }

.stats-plot { max-width: 100%; overflow: hidden; }

/* secondary buttons inside forms (e.g. "Neu generieren" for the 2FA secret): outlined pill in the site's pink */
.light form .button.button-small, .light form button.button:not([type="submit"]):not([type="reset"]) {
    background: transparent; color: var(--link); border: 2px solid var(--link); border-radius: 2rem;
    padding: .3rem 1.1rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; cursor: pointer; }
.light form .button.button-small:hover { background: var(--link); color: #fff; }
.light .twofa-wrapper { margin: .5rem 0 1rem; }
/* Ja / Nein switch (2FA): two pill segments, the active one is pink */
.light .switch-toggle { display: inline-flex; border: 2px solid var(--border); border-radius: 2rem; overflow: hidden; background: var(--input-bg); }
.light .switch-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.light .switch-toggle label { margin: 0; padding: .35rem 1.4rem; cursor: pointer; font-weight: 700; color: var(--fg-muted); background: transparent; border: 0; }
.light .switch-toggle input:checked + label { background: var(--link); color: #fff; }
.light .switch-toggle input:focus-visible + label { outline: 2px solid #f4c72f; outline-offset: -4px; }

[hidden] { display: none !important; }

/* white button (e.g. "Abbestellen" on the pink node cards): white with pink text, also inside forms (overrides the generic pink submit button) */
.light form button.btn.btn-white[type="submit"], .btn.btn-white { background: #fff; color: #e32d6d; border: 0; border-radius: 2rem; }
.light form button.btn.btn-white[type="submit"]:hover, .btn.btn-white:hover { background: #fdeaf1; color: #c31a55; filter: none; }