/* Grüner Weiler eG: Fira Sans, Originalfarben und automatische Systemdarstellung. */
@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-Book.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Fira Sans";
  src: url("FiraSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --weiler-green: #629900;
  --weiler-red: #c00000;
  --weiler-background: #f2f3f5;
  --weiler-surface: #ffffff;
  --weiler-subtle: #e7f0d9;
  --weiler-text: #1d1d1b;
  --weiler-muted: #5f5f5e;
  --weiler-border: #ccd0c5;
  --weiler-field: #ffffff;
  --weiler-link: #1d1d1b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --weiler-background: #191d21;
    --weiler-surface: #23282d;
    --weiler-subtle: #292e33;
    --weiler-text: #f1f1ef;
    --weiler-muted: #b9bdb6;
    --weiler-border: #4c5348;
    --weiler-field: #191d21;
    --weiler-link: #d0e0b2;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--weiler-background);
  color: var(--weiler-text);
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  text-align: left;
}

main {
  flex: 1 0 auto;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--weiler-text);
  font-weight: 400;
  line-height: 1.25;
}

h1, h2 { font-size: 2rem; }
h3, h4 { font-size: 1.5rem; }
h5, h6 { font-size: 1.25rem; }
strong, b { font-weight: 600; }

a, .btn-link {
  color: var(--weiler-link);
  text-decoration: underline;
  text-underline-offset: .18em;
}

a:hover, .btn-link:hover {
  color: var(--weiler-link);
  text-decoration-thickness: .15em;
}

a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--weiler-green);
  outline-offset: 3px;
}

.navbar.bg-dark, .navbar .language-switch .bg-dark {
  background: var(--weiler-surface) !important;
}

.navbar {
  gap: .75rem;
  padding: 1.25rem max(1rem, calc((100% - 1110px) / 2));
  border-bottom: 3px solid var(--weiler-green);
}

.navbar .navbar-brand {
  color: var(--weiler-text);
  font-size: 1.25rem;
  text-decoration: none;
}

.navbar .navbar-brand:hover, .navbar .navbar-brand:focus,
.navbar .navbar-nav .nav-link, .navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus, .navbar .navbar-nav .active > .nav-link,
.navbar .language-switch select {
  color: var(--weiler-text) !important;
}

.navbar .navbar-toggler {
  color: var(--weiler-text);
  border-color: var(--weiler-border);
}

.navbar-toggler-icon {
  background-image: none !important;
  width: 1.25rem;
  height: .9rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}

.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - 1px);
  border-top: 2px solid currentColor;
}

.weiler-logo {
  order: 2;
  margin-left: auto;
  flex-shrink: 0;
  padding: .75rem;
  background: transparent;
}

.weiler-logo img {
  display: block;
  width: 200px;
  height: auto;
}

.navbar-collapse { order: 1; }
.navbar-toggler { order: 3; }

/* Das Originaltemplate zeigt auf schmalen Formularseiten ein zweites Logo. */
.narrow-card > .text-center:has(> img[alt="branding logo"]) {
  display: none;
}

.narrow-card, .card, .modal-content, .dropdown-menu {
  color: var(--weiler-text);
  background: var(--weiler-surface);
  border: 1px solid var(--weiler-border);
  border-radius: 0;
  box-shadow: none;
}

.narrow-card {
  border-top: 3px solid var(--weiler-green);
  padding: 2rem;
}

.narrow-card h2.text-center { text-align: left !important; }
.weiler-login-banner { margin-bottom: 1.5rem; }
.weiler-login-banner p { margin-bottom: 1rem; }
.weiler-login-banner p:last-child { margin-bottom: 0; }
.card { border-top: 3px solid var(--weiler-green); }
.card-body { padding: 1.5rem; }
.card-title { font-weight: 500; }
.card-title a { color: var(--weiler-text) !important; }
.text-muted, .card-subtitle { color: var(--weiler-muted) !important; }

.form-control, .custom-select, .input-group-text {
  background: var(--weiler-field);
  color: var(--weiler-text);
  border-color: var(--weiler-border);
  border-radius: 0;
}

.form-control:focus, .custom-select:focus {
  background: var(--weiler-field);
  color: var(--weiler-text);
  border-color: var(--weiler-green);
  box-shadow: none;
}

.form-control::placeholder { color: var(--weiler-muted); }
.form-control:disabled, .form-control[readonly] { background: var(--weiler-subtle); }
.form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--weiler-green); }

.btn { border-radius: 0; font-weight: 500; }
.btn:focus, .btn:active:focus { box-shadow: none !important; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
  color: #1d1d1b;
  background: #629900;
  border-color: #629900;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  color: #1d1d1b;
  background: #d0e0b2;
  border-color: #629900;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:focus,
.list-group-item, .dropdown-item, .dropdown-item:hover, .dropdown-item:focus {
  color: var(--weiler-text);
  background: var(--weiler-subtle);
  border-color: var(--weiler-border);
}

.btn-danger { color: #ffffff; background: #c00000; border-color: #c00000; }
.table { color: var(--weiler-text); }
.table th, .table td, .table thead th, .modal-header, .modal-footer, hr {
  border-color: var(--weiler-border);
}
.table-striped tbody tr:nth-of-type(odd) { background: var(--weiler-subtle); }
.table-hover tbody tr:hover { color: var(--weiler-text); background: var(--weiler-subtle); }
.alert-primary, .alert-info, .alert-success {
  color: var(--weiler-text);
  background: var(--weiler-subtle);
  border-color: var(--weiler-green);
  border-radius: 0;
}
.alert-warning, .alert-danger {
  color: var(--weiler-text);
  background: var(--weiler-subtle);
  border-color: var(--weiler-red);
  border-radius: 0;
}
.alert a { color: inherit; }
.close, .close:hover { color: var(--weiler-text); text-shadow: none; }

.footer {
  position: static;
  flex-shrink: 0;
  height: auto;
  padding: .75rem 1rem;
  line-height: 1.6;
  color: var(--weiler-muted);
  background: var(--weiler-surface);
  border-top: 1px solid var(--weiler-border);
}
.footer ul { margin: 0; }
.qrcode { background: #ffffff; }

@media (max-width: 767.98px) {
  .navbar { padding: 1rem; gap: .75rem; }
  .navbar .navbar-brand { flex-basis: 100%; }
  .navbar-collapse { order: 4; }
  .weiler-logo { margin-left: 0; }
  .navbar-toggler { margin-left: auto; }
  .narrow-card { margin: 0 1rem; padding: 1.5rem 1rem; }
}

@media (max-width: 359.98px) {
  .weiler-logo img { width: 192px; }
}