/* Generated by dropbits_write_theme_base_css — do not edit by hand */
:root {
  --color-primary: #384848;
  --color-accent: #a89868;
  --color-content-bg: #384848;
  --color-content-fg: #d8c8b8;
  --color-content-heading: #ffffff;
  --color-nav-fg: #384848;
  --color-nav-sub-fg: #384848;
  --color-gutter: #384848;
  --color-bg: #f7f4ef;
  --color-text: #384848;
  --max-width: 52rem;
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/SourceSans3-Variable.ttf") format("truetype");
}
:root {
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Page shell matches content (left/right/below). Header stays --color-surface. */
body.db-page {
  background: var(--color-gutter, var(--color-content-bg));
  color: var(--color-content-fg, var(--color-text));
}
.db-page > article[data-page-canvas] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-gutter, var(--color-content-bg));
}

/* decorative_snake — one continuous tile on the main region (not per richtext band).
 * Width is owned by .db-page-body center track (page-layout.css + --db-content-max). */
.region-main {
  position: relative;
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  width: 100%;
  background: var(--color-content-bg);
  color: var(--color-content-fg);
  container-type: inline-size;
}
.db-page > article[data-page-canvas] > .db-page-body {
  flex: 1 1 auto;
  width: 100%;
  background: var(--color-gutter, var(--color-content-bg));
}
/* Bands share the region background so the snake is not restarted per widget */
.region-main > .db-content-band {
  background: transparent;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.region-main::before {
  content: "";
  position: absolute;
  right: -1rem;
  top: calc(2rem + 4 * 1.65em);
  bottom: 0;
  width: 32rem;
  background: url("assets/schlange-tile.png") repeat-y right top / 32rem auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.12));
  pointer-events: none;
  z-index: 1;
}
/* Legacy: no per-band snake (avoids restart when adding another richtext block) */
.db-content-band::before {
  content: none;
  display: none;
}
.region-main .db-content-band img,
.region-main .db-content-band picture,
.region-main .db-content-band .db-img,
.region-main .db-content-band .hero-media {
  position: relative;
  z-index: 0;
}
.region-main .db-content-band :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, table, dl, fieldset, .db-list, figcaption) {
  position: relative;
  z-index: 2;
}
body:has(.hero-jumbo) .region-main > .db-content-band:first-child {
  margin-top: 0;
}
@media (max-width: 900px) {
  .region-main::before {
    width: 22rem;
    right: 0;
    background-size: 22rem auto;
  }
}

/* jumbo_hide_subtitle_mobile — hide hero subtitle on narrow viewports */
@media (max-width: 480px) {
  .hero-jumbo .hero-subtitle {
    display: none;
  }
  .hero-jumbo .hero-title-box {
    padding-block: 1rem;
  }
}