/* evil3d.ch theme on top of Bootstrap 5: black, white, red accents. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../Fonts/space-grotesk-latin.woff2) format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url(../Fonts/dm-sans-latin.woff2) format('woff2');
}

:root {
  --evil-black: #0b0b0b;
  --evil-ink: #161616;
  --evil-white: #ffffff;
  --evil-paper: #f4f4f2;
  --evil-line: #d9d9d6;
  --evil-muted: #5d5d5a;
  --evil-red: #d60000;
  --evil-red-dark: #a80000;

  --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --bs-body-color: var(--evil-ink);
  --bs-body-bg: var(--evil-white);
  --bs-link-color-rgb: 214, 0, 0;
  --bs-link-hover-color-rgb: 168, 0, 0;
  --bs-border-radius: 0;
}

body.evil3d {
  font-size: 1.0625rem;
  line-height: 1.6;
}

h1, h2, h3, h4, .navbar-brand, .banner-title {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.skip-link {
  position: absolute;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--evil-red);
  color: var(--evil-white);
}

/* ---------- Header / navigation ---------- */

.site-header {
  background: var(--evil-black);
  border-bottom: 3px solid var(--evil-red);
}

.site-header .navbar { padding-block: 0.6rem; }

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  color: var(--evil-white);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--evil-white);
  border-radius: 50%;
  font-size: 0.95rem;
}

.brand-mark span, .brand-dot { color: var(--evil-red); }

.site-header .nav-link {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 500;
  color: var(--evil-white);
  padding-inline: 0.9rem !important;
  border-bottom: 2px solid transparent;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible { color: var(--evil-white); border-bottom-color: var(--evil-white); }
.site-header .nav-link.active { color: var(--evil-white); border-bottom-color: var(--evil-red); }

.site-header .dropdown-menu {
  --bs-dropdown-bg: var(--evil-black);
  --bs-dropdown-link-active-bg: var(--evil-red);
  --bs-dropdown-link-hover-bg: #262626;
  border: 1px solid #333;
  border-top: 3px solid var(--evil-red);
}

.language-switch {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid #444;
  flex-direction: row;
}

.language-switch .nav-link { padding-inline: 0.5rem !important; font-size: 0.9rem; }

@media (max-width: 991.98px) {
  .language-switch { margin: 0.5rem 0 0; padding: 0.5rem 0 0; border-left: 0; border-top: 1px solid #444; }
}

/* ---------- Banner ---------- */

.site-banner {
  background: var(--evil-black);
  color: var(--evil-white);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.site-banner::after {            /* thin red rule under every banner */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--evil-red) 0 28px, transparent 28px 40px);
}

.banner-title, .site-banner h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); margin: 0; }
.site-banner h1 em, .site-main h2 em { font-style: normal; color: var(--evil-red); }
.banner-lead, .site-banner .ce-bodytext p { font-size: 1.25rem; max-width: 38rem; margin: 1.25rem 0 0; color: #d6d6d6; }

.site-banner .breadcrumb {
  --bs-breadcrumb-divider-color: #888;
  --bs-breadcrumb-item-active-color: #bbb;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.site-banner .breadcrumb a { color: var(--evil-white); text-decoration: none; }
.site-banner .breadcrumb a:hover { color: var(--evil-red); }

/* banner content elements: text left, image right */
.site-banner .frame { margin: 0; padding: 0; }
.site-banner .ce-textpic { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 2rem; align-items: center; }
.site-banner .ce-textpic .ce-gallery { order: 2; margin: 0; float: none; justify-self: center; }
.site-banner .ce-textpic img { max-height: 26rem; width: auto; max-width: 100%; }
.site-banner .frame header > * { color: var(--evil-white); }

@media (max-width: 767.98px) {
  .site-banner .ce-textpic { grid-template-columns: 1fr; }
  .site-banner .ce-textpic .ce-gallery { order: 0; }
  .site-banner .ce-textpic img { max-height: 15rem; }
}

/* ---------- Main content (fluid_styled_content frames) ---------- */

.site-main > .frame {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--evil-line);
}

.site-main > .frame > * {
  width: min(100% - 1.5rem, 1140px);
  margin-inline: auto;
}

/* fluid_styled_content prints the subheader after the header: show it above as kicker */
.site-main .frame header { display: flex; flex-direction: column-reverse; }
.site-main .frame header h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 1.25rem; }
.site-main .frame header h2 + h3 { margin-bottom: 0.6rem; }
.site-main .frame header h3 { font-size: 1.5rem; }

.frame .kicker,
.site-main .frame header .ce-subheader,
.site-main .frame header h2 + h3,
.site-main .frame header h2 + h3 + * {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--evil-red);
}

.site-main .ce-bodytext > p { max-width: 46rem; }

.site-main .ce-textpic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.site-main .ce-textpic .ce-gallery { margin: 0; float: none; }
.site-main .ce-gallery img { max-width: 100%; width: auto; height: auto; max-height: 34rem; border: 1px solid var(--evil-black); }
.site-main .ce-gallery figcaption { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--evil-muted); margin-top: 0.5rem; }
.site-main .ce-gallery .ce-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1rem; }

@media (max-width: 767.98px) {
  .site-main .ce-textpic { grid-template-columns: 1fr; }
}

/* dark band */
.site-main > .frame-dark,
.site-main > .frame-steps-dark { background: var(--evil-black); color: var(--evil-white); border-bottom: 0; }
.site-main > .frame-dark a,
.site-main > .frame-steps-dark a { color: var(--evil-white); text-decoration-color: var(--evil-red); }

/* cards: used for "Menu of subpages with abstract" and bullet lists */
.frame-cards > ul,
.frame-type-menu_abstract > ul,
.frame-type-menu_subpages > ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.frame-cards > ul > li,
.frame-type-menu_abstract > ul > li,
.frame-type-menu_subpages > ul > li {
  position: relative;
  padding: 1.5rem;
  border: 2px solid var(--evil-black);
  background: var(--evil-white);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.frame-type-menu_abstract > ul > li:hover,
.frame-type-menu_subpages > ul > li:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--evil-red); }

.frame-type-menu_abstract li > a,
.frame-type-menu_subpages li > a {
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--evil-black);
  text-decoration: none;
}

.frame-type-menu_abstract li > a::after,
.frame-type-menu_subpages li > a::after { content: ''; position: absolute; inset: 0; }   /* whole card clickable */
.frame-type-menu_abstract li > a::before { content: '↗'; float: right; color: var(--evil-red); }
.frame-type-menu_abstract li p { margin: 0.75rem 0 0; color: var(--evil-muted); }

/* numbered steps */
.frame-steps ol,
.frame-steps-dark ol { list-style: none; counter-reset: step; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem; }
.frame-steps ol > li,
.frame-steps-dark ol > li { counter-increment: step; border-top: 2px solid currentColor; padding-top: 1rem; }
.frame-steps ol > li::before,
.frame-steps-dark ol > li::before { content: counter(step, decimal-leading-zero); display: block; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--evil-red); }
.frame-steps ol > li strong,
.frame-steps-dark ol > li strong { display: block; font-family: 'Space Grotesk', Arial, sans-serif; font-size: 1.3rem; margin-bottom: 0.4rem; }

/* buttons written in the RTE as links with class "btn" */
.ce-bodytext p:has(> a.btn) { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn-evil,
.site-banner .ce-bodytext a.btn:not(.btn-outline-light),
.site-main .ce-bodytext a.btn {
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-padding-y: 0.75rem;
  background: var(--evil-red);
  border: 2px solid var(--evil-red);
  color: var(--evil-white);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.btn-evil:hover,
.site-banner .ce-bodytext a.btn:not(.btn-outline-light):hover,
.site-main .ce-bodytext a.btn:hover { background: var(--evil-red-dark); border-color: var(--evil-red-dark); color: var(--evil-white); }

.contact-mail {
  display: inline-block;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--evil-black);
  text-decoration: underline;
  text-decoration-color: var(--evil-red);
  text-underline-offset: 0.2em;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--evil-black);
  color: #cfcfcf;
  border-top: 3px solid var(--evil-red);
  padding-block: 2rem 1.25rem;
  font-size: 0.95rem;
}

.footer-brand { font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--evil-white); }
.footer-motto { display: block; color: #9a9a9a; }
.site-footer a { color: var(--evil-white); }
.site-footer a:hover { color: var(--evil-red); }
.site-footer .nav-link { padding: 0.25rem 0.75rem; }
.footer-copy { margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid #2c2c2c; color: #8a8a8a; font-size: 0.85rem; }

.site-banner .ce-bodytext a.btn-outline-light { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: 0.75rem; border-width: 2px; font-family: 'Space Grotesk', Arial, sans-serif; font-weight: 700; }