@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lilita-one-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lilita-one-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-serif-display-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* lorbyte.de – "Halb bunt"
   Paper-white sheets with an ink outline and a hard offset shadow; headline
   underline half filled, half outlined. Mobile first. No external resources.
   (@font-face rules are generated by build.mjs and prepended to this file.) */

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --paper: #fffdf8;
  --ink: #1d1b2e;
  --muted: #5a5670;
  --line: #1d1b2e;

  /* spacing scale (4 px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* radii */
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;

  --bw: 2px;
  --off: 6px;      /* hard shadow offset for sheets and cards */
  --off-btn: 4px;  /* hard shadow offset for buttons */
  --gutter: 16px;
  --measure: 68ch;

  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-rock: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;

  /* type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.125rem;   /* 18 px */
  --fs-lead: 1.25rem;
  --fs-h3: 1.5rem;
  --fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --fs-h1: clamp(2.125rem, 1.2rem + 4.2vw, 2.75rem);
}

/* ---------- Themes (set via data-theme on body or on a component) ---------- */

[data-theme='brand'] {
  --bg: #fbf8f3;
  --tint: #f3ecf9;
  --accent: #6b3fa0;
  --accent-2: #ffcf3f;
  --accent-text: #6b3fa0;
  --on-accent: #ffffff;
  --display: var(--font-serif);
  --hero-bg: #fbf8f3;
  --hero-ink: var(--ink);
  --hero-muted: var(--muted);
  --hero-stroke: var(--ink);
  --hero-focus: #6b3fa0;
  --deco: rgba(255, 207, 63, 0.55);
}

[data-theme='rock'] {
  --bg: var(--paper);
  --tint: #fff4c4;
  --accent: #ffd23f;
  --accent-2: #ff4f9a;
  --accent-text: #b3135d;   /* text-safe pink on paper (AA) */
  --on-accent: #1d1b2e;
  --display: var(--font-rock);
  --hero-bg: #1b1a4a;
  --hero-ink: #ffffff;
  --hero-muted: #dcd9f2;
  --hero-stroke: #ffd23f;
  --hero-focus: #ffd23f;
  --deco: rgba(255, 79, 154, 0.32);
}

[data-theme='mandala'] {
  --bg: #f5f0fb;
  --tint: #ebe2f6;
  --accent: #6b3fa0;
  --accent-2: #c8962e;
  --accent-text: #6b3fa0;
  --on-accent: #ffffff;
  --display: var(--font-serif);
  --hero-bg: #f5f0fb;
  --hero-ink: var(--ink);
  --hero-muted: var(--muted);
  --hero-stroke: var(--ink);
  --hero-focus: #6b3fa0;
  --deco: rgba(200, 150, 46, 0.4);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-base) / 1.6 var(--font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}

p {
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
}

a {
  color: var(--accent-text);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

a:hover {
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus, var(--accent-text));
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-s);
  font-weight: 600;
}

.skip-link:focus {
  top: var(--s-3);
  --focus: #ffcf3f;
}

.wrap {
  width: calc(100% - 2 * var(--gutter));
  max-width: 1120px;
  margin-inline: auto;
}

.narrow {
  max-width: 46rem;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --off: 7px;
    --off-btn: 5px;
    --fs-h1: clamp(2.25rem, 0.9rem + 3.1vw, 3.5rem);
  }
}

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

.site-header {
  background: var(--paper);
  border-bottom: var(--bw) solid var(--ink);
}

.site-header__in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--s-2);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  color: #6b3fa0;
}

.site-header nav {
  margin-left: calc(-1 * var(--s-2));
  --focus: #6b3fa0;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 var(--s-2);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 4px solid transparent;
  border-radius: 0;
}

.nav a:hover {
  border-bottom-color: #ffcf3f;
}

.nav a[aria-current='page'],
.nav a.is-here {
  border-bottom-color: #6b3fa0;
}

@media (min-width: 640px) {
  .site-header__in {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    min-height: 4.5rem;
  }

  .site-header nav {
    margin-left: 0;
    margin-right: calc(-1 * var(--s-2));
  }

  .nav a {
    padding: 0 var(--s-3);
  }
}

/* ---------- Typography blocks ---------- */

.title-half,
.prose h1 {
  font-family: var(--display);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin-bottom: var(--s-5);
}

.title-xl {
  font-size: clamp(2.75rem, 1.4rem + 7vw, 5.25rem);
}

@media (min-width: 768px) {
  .title-xl {
    font-size: clamp(3.5rem, 1.5rem + 5vw, 5.25rem);
  }
}

/* Marker underline: left half filled, right half outline only */
.title-half::after,
.prose h1::after {
  content: '';
  display: block;
  width: min(13rem, 62%);
  height: 0.8rem;
  margin-top: var(--s-4);
  border: var(--bw) solid var(--hero-stroke, var(--ink));
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%);
}

h2 {
  font-family: var(--display);
  font-size: var(--fs-h2);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}

h3 {
  font-family: var(--display);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.eyebrow {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.lead {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.hero__sub {
  max-width: var(--measure);
  margin: 0 0 var(--s-4);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.4;
}

.section-lead {
  max-width: var(--measure);
  margin-bottom: var(--s-5);
  color: var(--muted);
}

.hint {
  margin: var(--s-4) 0 0;
  font-size: var(--fs-sm);
  color: var(--hero-muted, var(--muted));
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--s-6) var(--s-7);
  background: var(--hero-bg);
  color: var(--hero-ink);
  border-bottom: var(--bw) solid var(--ink);
  --focus: var(--hero-focus);
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -130px;
  right: -90px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  border: var(--bw) solid var(--hero-stroke);
  background: linear-gradient(90deg, var(--deco) 0 50%, transparent 50% 100%);
}

.hero a:not(.btn) {
  color: inherit;
}

.hero .eyebrow {
  color: var(--hero-muted);
}

.hero__grid {
  display: grid;
  gap: var(--s-6);
}

.hero__text > :last-child {
  margin-bottom: 0;
}

.hero .credit {
  color: var(--hero-muted);
}

.hero .credit__icon {
  color: var(--hero-stroke);
}

/* Breadcrumb: Start > Sammlung > Motiv */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  margin-inline: 0.7em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.breadcrumb [aria-current] {
  opacity: 0.85;
}

.hero--plain {
  padding-block: var(--s-6) var(--s-6);
}

.hero--plain .lead {
  margin-bottom: 0;
}

.hero--collection .hero__media {
  max-width: 640px;
}

/* Single-motif page: portrait sheet next to the text */
.hero--motif .hero__media {
  max-width: 26rem;
}

@media (min-width: 768px) {
  .hero {
    padding-block: var(--s-8);
  }

  .hero--plain {
    padding-block: var(--s-8) var(--s-7);
  }

  .hero::before {
    top: -110px;
    right: -90px;
    width: 300px;
    height: 300px;
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--s-7);
  }

  .hero--brand .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .hero--collection .hero__media {
    max-width: none;
  }

  .hero--motif .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: var(--s-8);
  }
}

/* The brand hero has a long intro: keep one column until there is room for two */
@media (min-width: 768px) and (max-width: 959.98px) {
  .hero--brand .hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Two tilted sheets (www hero) */
.sheet-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: var(--s-2) var(--s-3) var(--s-5);
  max-width: 560px;
  margin-inline: auto;
}

.sheet-stack__a {
  position: relative;
  z-index: 1;
  transform: rotate(-4deg);
}

.sheet-stack__b {
  margin-top: var(--s-5);
  margin-left: -6%;
  transform: rotate(3.5deg);
}

/* ---------- Sheets (paper with ink outline and hard shadow) ---------- */

.sheet {
  display: block;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: var(--off) var(--off) 0 var(--sheet-shadow, var(--accent-2));
  overflow: hidden;
  line-height: 0;
}

.sheet img {
  width: 100%;
  height: auto;
}

.sheet--cover {
  --sheet-shadow: var(--accent);
}

/* ---------- Buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  margin-top: var(--s-5);
}

.actions--hero {
  margin-top: var(--s-5);
}

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-shadow: var(--accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.65rem 1.25rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: var(--off-btn) var(--off-btn) 0 var(--btn-shadow);
  font: 600 1rem / 1.25 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  text-decoration: none;
}

.btn__icon {
  flex: none;
}

.btn__meta {
  white-space: nowrap;
  display: block;
  font-size: 0.9em;
  font-weight: 400;
}

@media (min-width: 640px) {
  .btn__meta {
    display: inline;
    font-weight: 600;
    font-size: inherit;
  }
}

.btn--ghost {
  --btn-bg: var(--paper);
  --btn-fg: var(--ink);
  --btn-shadow: var(--accent);
}

.hero[data-theme='rock'] .btn--ghost,
[data-theme='rock'] .hero .btn--ghost {
  --btn-shadow: #ffd23f;
}

.btn--xl {
  min-height: 3.5rem;
  padding: 0.9rem 1.5rem;
  font-size: 1.125rem;
}

@media (max-width: 639.98px) {
  .actions--hero .btn--xl,
  .actions--hero .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .sheet,
  .tile {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .btn:hover {
    transform: translate(2px, 2px);
    box-shadow: calc(var(--off-btn) - 2px) calc(var(--off-btn) - 2px) 0 var(--btn-shadow);
  }

  .btn:active {
    transform: translate(var(--off-btn), var(--off-btn));
    box-shadow: 0 0 0 var(--btn-shadow);
  }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--s-7);
}

.section--tight {
  padding-block: var(--s-6);
}

/* A section that continues the one above it (no double padding) */
.section--follow {
  padding-top: 0;
}

.section--tint {
  background: var(--tint);
  border-block: var(--bw) solid var(--ink);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--s-8);
  }

  .section--tight {
    padding-block: var(--s-7);
  }
}

.stack {
  display: grid;
  gap: var(--s-6);
}

/* ---------- Credit line (visible AI labelling under every image group) ---------- */

.credit {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  margin: var(--s-3) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--muted);
}

.credit__icon {
  flex: none;
  margin-top: 0.15em;
  color: var(--accent-text);
}

.credit a {
  color: inherit;
  position: relative;
  z-index: 2;
}

.credit--block {
  margin-top: var(--s-4);
}

/* Caption with the motif name in words (figure/figcaption), above the credit line */

.fig-title {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--hero-muted, var(--muted));
}

/* ---------- Book card ---------- */

.book {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-5);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--off) var(--off) 0 var(--accent-2);
}

.book__cover {
  width: min(260px, 100%);
  margin-inline: auto;
}

.book__title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  margin-bottom: var(--s-2);
}

.book__sub {
  max-width: 52ch;
  margin-bottom: var(--s-4);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.facts li {
  padding: 0.15rem 0.8rem;
  background: var(--tint);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  line-height: 1.5;
}

.book .actions {
  margin-top: var(--s-5);
}

@media (min-width: 640px) {
  .book {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--s-6);
    align-items: center;
    padding: var(--s-6);
  }

  .book__cover {
    width: 100%;
  }
}

/* ---------- Galleries ---------- */

.gallery,
.motifs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .motifs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .gallery,
  .motifs {
    gap: var(--s-6) var(--s-5);
  }
}

.sheet-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sheet-link__cap {
  display: block;
  margin-top: var(--s-3);
  line-height: 1.35;
}

.sheet-link__cap strong {
  display: block;
  font-weight: 600;
}

.sheet-link__sub {
  font-size: var(--fs-xs);
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .sheet-link:hover .sheet {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--off) + 2px) calc(var(--off) + 2px) 0 var(--sheet-shadow, var(--accent-2));
  }
}

.sheet-link:hover .sheet-link__cap strong {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.motif figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

.motif__from {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--muted);
}

.motif-block {
  margin-top: var(--s-7);
}

.motif-block h3 {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
}

/* ---------- Notes (print + usage) ---------- */

.notes {
  display: grid;
  gap: var(--s-5);
}

.note {
  padding: var(--s-5);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--off) var(--off) 0 var(--accent-2);
}

.note h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  margin-bottom: var(--s-4);
}

.note p:last-child {
  margin-bottom: 0;
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--s-3);
}

.ticks li:last-child {
  margin-bottom: 0;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 1rem;
  height: 1rem;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: linear-gradient(90deg, var(--accent) 0 50%, transparent 50% 100%);
}

@media (min-width: 768px) {
  .notes {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }

  .note {
    padding: var(--s-6);
  }
}

.note h3 {
  margin-bottom: var(--s-2);
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
}

@media (min-width: 960px) {
  .notes--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 959.98px) {
  .notes--three {
    grid-template-columns: 1fr;
  }
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: var(--s-4);
  max-width: 52rem;
}

.faq__item {
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-m);
}

.faq__item h3 {
  margin-bottom: var(--s-2);
  font-size: 1.25rem;
}

.faq__item p {
  margin-bottom: 0;
}

/* ---------- Links to single motifs ---------- */

.motif-link {
  display: block;
  min-height: 2.75rem;
  padding-block: 0.65rem 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.gallery--duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 36rem;
}

.nobr {
  white-space: nowrap;
}

.collection__pills-label {
  margin: 0 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hero-muted);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}

.pills a {
  position: relative;
  z-index: 2; /* above the card-sized overlay of the card button */
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--accent-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.pills a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* ---------- Collection cards (ausmalbilder start page) ---------- */

.collections {
  display: grid;
  gap: var(--s-6);
}

.collection {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hero-bg);
  color: var(--hero-ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--off) var(--off) 0 var(--accent-2);
  --focus: var(--hero-focus);
}

.collection__media {
  padding: var(--s-4) var(--s-4) 0;
}

.collection__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding: var(--s-4) var(--s-5) var(--s-5);
}

.collection__title {
  margin-bottom: var(--s-2);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
}

.collection__meta {
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--hero-muted);
}

.collection .credit {
  color: var(--hero-muted);
}

.collection .credit__icon {
  color: var(--accent-text);
}

[data-theme='rock'].collection .credit__icon {
  color: #ffd23f;
}

.collection .btn {
  margin-top: auto;
}

/* The whole card is one big link target through the button */
.collection .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
}

.collection .btn:focus-visible {
  outline: none;
}

.collection .btn:focus-visible::after {
  outline: 3px solid var(--hero-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  /* A transform on the button would shrink its card-sized overlay, so only the shadow moves here. */
  .collection .btn:hover,
  .collection .btn:active {
    transform: none;
  }

  .collection:hover .btn {
    box-shadow: 2px 2px 0 var(--btn-shadow);
  }
}

@media (min-width: 768px) {
  .collections {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .collection__media {
    padding: var(--s-5) var(--s-5) 0;
  }

  .collection__body {
    padding: var(--s-5);
  }
}

/* ---------- Tiles (link cards) ---------- */

.tiles {
  display: grid;
  gap: var(--s-5);
}

.tile {
  position: relative;
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5) 4.5rem var(--s-5) var(--s-5);
  background: var(--paper);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--off) var(--off) 0 var(--accent-2);
  text-decoration: none;
}

.tile__title {
  font-family: var(--display);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.tile__text {
  max-width: 52ch;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.tile__go {
  position: absolute;
  right: var(--s-4);
  top: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  background: var(--accent);
  color: var(--on-accent);
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .tile:hover {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--off) + 2px) calc(var(--off) + 2px) 0 var(--accent-2);
  }
}

.tile:hover .tile__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

@media (min-width: 768px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Callout ---------- */

.callout {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-l);
  box-shadow: var(--off) var(--off) 0 var(--accent-2);
}

.callout h2 {
  margin-bottom: var(--s-2);
}

.callout p {
  margin: 0;
  max-width: 52ch;
}

.callout .btn {
  justify-self: start;
}

@media (min-width: 768px) {
  .callout {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-6);
  }
}

@media (max-width: 639.98px) {
  .callout .btn {
    justify-self: stretch;
  }
}

/* ---------- Prose (legal pages) ---------- */

.prose {
  padding-block: var(--s-7) var(--s-8);
}

.prose h1 {
  margin-bottom: var(--s-6);
}

.prose h2 {
  margin: var(--s-6) 0 var(--s-2);
  font-family: var(--font-body);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.3;
}

.prose p,
.prose li {
  max-width: var(--measure);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.4rem;
}

.prose li {
  margin-bottom: var(--s-2);
}

.prose a {
  overflow-wrap: anywhere;
}

/* About page: lead paragraph and one fact table per book */

.prose .lead {
  max-width: var(--measure);
}

.prose h3 {
  margin: var(--s-6) 0 var(--s-3);
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.facts-table {
  width: 100%;
  max-width: var(--measure);
  margin: 0 0 var(--s-5);
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-m);
  box-shadow: var(--off) var(--off) 0 var(--accent-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.facts-table th,
.facts-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid rgba(29, 27, 46, 0.18);
  overflow-wrap: anywhere;
}

.facts-table tr:first-child th,
.facts-table tr:first-child td {
  border-top: 0;
}

.facts-table th {
  width: 8.5rem;
  font-weight: 600;
  color: var(--muted);
}

@media (min-width: 640px) {
  .facts-table th,
  .facts-table td {
    padding: var(--s-2) var(--s-4);
  }

  .facts-table th {
    width: 12rem;
  }
}

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

.site-footer {
  position: relative;
  margin-top: auto;
  padding-block: var(--s-7) var(--s-6);
  background: var(--ink);
  color: #efeaf7;
  font-size: var(--fs-sm);
  --focus: #ffcf3f;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 10px;
  background: linear-gradient(90deg, #ffcf3f 0 50%, transparent 50% 100%);
}

.site-footer a {
  color: #fff;
}

.site-footer p {
  max-width: 62ch;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
  margin: 0 0 var(--s-3);
  padding: 0;
  list-style: none;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 600;
}

.site-footer__ad {
  color: #d9d3ea;
}

.site-footer__copy {
  margin: var(--s-5) 0 0;
  color: #bdb6d3;
}