/* Der Rabenhof Wiki: Erscheinungsbild nach der Website der-rabenhof.de.
   Dunkles Grün, Messing, Papier. Nur Gestaltung, keine Funktion. */

@font-face { font-family: 'Bodoni Moda'; src: url('/theme/rabenhof/fonts/bodoni-v2.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bodoni Moda'; src: url('/theme/rabenhof/fonts/bodoni-italic-v2.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/theme/rabenhof/fonts/franklin-v2.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Libre Franklin'; src: url('/theme/rabenhof/fonts/franklin-italic-v2.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url('/theme/rabenhof/fonts/typewriter-v2.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --rh-green: #12271f;
  --rh-green-2: #1d3a2e;
  --rh-green-3: #2f5a47;
  --rh-brass: #c49a5a;
  --rh-brass-2: #e2bf82;
  --rh-brass-dark: #7c5a2a;
  --rh-paper: #eadcbc;
  --rh-paper-edge: #c9b285;
  --rh-card: #f7f0de;
  --rh-ink: #1f1810;
  --rh-ink-2: #4a3c2b;
  --rh-bordeaux: #6d1a1e;
  --f-display: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --f-text: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --font-body: var(--f-text);
  --color-primary: var(--rh-green-2);
  --color-primary-light: rgba(29, 58, 46, .12);
  --color-link: #5b3a12;
  --color-bookshelf: var(--rh-green-3);
  --color-book: var(--rh-green-2);
  --color-chapter: var(--rh-brass-dark);
  --color-page: var(--rh-bordeaux);
}

html, body { font-family: var(--f-text); }
html { background-color: var(--rh-paper); }
body {
  color: var(--rh-ink);
  background-color: var(--rh-paper);
  background-image: url('/theme/rabenhof/paper.webp');
  font-size: 16.5px;
}

/* Kopfleiste */
header#header, #header.primary-background {
  background: var(--rh-green) !important;
  border-bottom: 2px solid var(--rh-brass);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
#header .logo-text {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--rh-brass-2);
  font-size: 1.45rem;
}
#header .logo-image { max-height: 40px; }
#header .header-links a, #header .header-links .button, #header .user-name, #header .header-links .icon-list-item {
  color: var(--rh-brass-2) !important;
  font-family: var(--f-text);
  letter-spacing: .02em;
}
#header .header-links a:hover { color: #fff !important; background: rgba(196, 154, 90, .14); }
#header .search-box input {
  background: rgba(234, 220, 188, .1);
  border: 1px solid rgba(196, 154, 90, .55);
  color: var(--rh-paper);
}
#header .search-box input::placeholder { color: rgba(234, 220, 188, .7); }
#header .search-box button { color: var(--rh-brass-2); }

/* Überschriften */
h1, h2, .page-content h1, .page-content h2, .page-content h3 {
  font-family: var(--f-display);
  color: var(--rh-green);
  font-weight: 600;
  letter-spacing: .005em;
}
h1, .page-content h1 { font-size: 2.35rem; line-height: 1.15; }
.page-content h2 { font-size: 1.65rem; margin-top: 1.6em; padding-bottom: .25em; border-bottom: 1px solid var(--rh-paper-edge); }
.page-content h3 { font-size: 1.3rem; margin-top: 1.4em; }

/* Karteikarten und Akten */
.card, .tri-layout-middle-contents > .card, .content-wrap.card {
  background: var(--rh-card);
  border: 1px solid var(--rh-paper-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px rgba(31, 24, 16, .12);
  border-radius: 3px;
}
.card .card-title, .card > h3, .tri-layout-left h5, .tri-layout-right h5, .sidebar h5 {
  font-family: var(--f-type);
  text-transform: none;
  letter-spacing: .04em;
  color: var(--rh-ink-2);
  font-size: .95rem;
}
.tri-layout-left, .tri-layout-right { color: var(--rh-ink-2); }

.page-content {
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--rh-ink);
  max-width: 52em;
}
.page-content p, .page-content li { color: var(--rh-ink); }
.page-content a, .text-link, a.text-link { color: #5b3a12; text-decoration: underline; text-decoration-color: rgba(196, 154, 90, .7); text-underline-offset: 3px; }
.page-content a:hover { color: var(--rh-bordeaux); text-decoration-color: var(--rh-bordeaux); }
.page-content blockquote {
  border-left: 3px solid var(--rh-brass);
  background: rgba(196, 154, 90, .1);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--rh-ink-2);
}
.page-content hr { border: 0; height: 20px; background: url('/theme/rabenhof/rule.svg') center / 240px 20px no-repeat; }
.page-content table { border-collapse: collapse; background: rgba(255, 255, 255, .35); }
.page-content table th, .page-content table td { border: 1px solid var(--rh-paper-edge); padding: .45em .7em; vertical-align: top; }
.page-content table th { background: rgba(29, 58, 46, .08); font-family: var(--f-text); font-weight: 600; }
.page-content img { border-radius: 2px; }
.page-content code { background: rgba(31, 24, 16, .07); color: var(--rh-ink); }

/* Einleitungssatz einer Seite */
.page-content p.rh-lead { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.5; color: var(--rh-ink-2); font-style: italic; }

/* Personalakte und Raumkarte */
.page-content .rh-akte { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.page-content .rh-akte > .rh-bild { flex: 0 0 220px; max-width: 100%; }
.page-content .rh-akte > .rh-bild img { width: 100%; height: auto; border: 1px solid var(--rh-paper-edge); box-shadow: 0 4px 12px rgba(31, 24, 16, .25); background: #fff; padding: 6px; transform: rotate(-1deg); }
.page-content .rh-akte > .rh-daten { flex: 1 1 260px; min-width: 0; }
.page-content .rh-daten dl, .page-content dl.rh-felder { margin: 0; }
.page-content .rh-daten dt, .page-content dl.rh-felder dt { font-family: var(--f-type); color: var(--rh-ink-2); font-size: .92rem; margin-top: .55rem; }
.page-content .rh-daten dd, .page-content dl.rh-felder dd { margin: .1rem 0 0; }
.page-content .rh-stempel { display: inline-block; font-family: var(--f-type); color: var(--rh-bordeaux); border: 2px solid var(--rh-bordeaux); padding: .1rem .5rem; transform: rotate(-2deg); font-size: .9rem; letter-spacing: .05em; opacity: .85; }

/* Kachelraster auf Übersichtsseiten */
.page-content .rh-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.page-content .rh-kacheln > li { margin: 0; padding: 0; background: rgba(255, 255, 255, .45); border: 1px solid var(--rh-paper-edge); border-radius: 3px; overflow: hidden; }
.page-content .rh-kacheln > li a { display: block; text-decoration: none; color: var(--rh-ink); }
.page-content .rh-kacheln > li img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.page-content .rh-kacheln > li img.rh-hoch { aspect-ratio: 3 / 4; }
.page-content .rh-kacheln > li span { display: block; padding: .5rem .7rem .65rem; font-family: var(--f-text); font-weight: 650; color: var(--rh-green); line-height: 1.25; }
.page-content .rh-kacheln > li small { display: block; padding: 0 .7rem .7rem; color: var(--rh-ink-2); font-size: .88rem; }
.page-content .rh-kacheln > li a:hover span { color: var(--rh-bordeaux); }

/* Hinweis- und Quellenkästen */
.page-content .rh-hinweis { border: 1px solid var(--rh-brass); background: rgba(196, 154, 90, .12); padding: .8rem 1rem; border-radius: 3px; }
.page-content .rh-quellen { font-size: .92rem; color: var(--rh-ink-2); }

/* Listen der Bücher und Seiten */
.entity-list-item-name, .book-contents .entity-list-item-name, .entity-list .entity-list-item .entity-list-item-name { font-family: var(--f-text); font-weight: 600; }
h3, h4, h5, .page-content h4 { font-family: var(--f-text); font-weight: 650; color: var(--rh-green); }
.entity-list-item:hover, .entity-list-item.selected { background: rgba(196, 154, 90, .12); }
.grid-card { background: var(--rh-card); border: 1px solid var(--rh-paper-edge); }
.grid-card .grid-card-content h2 { font-family: var(--f-display); font-weight: 700; }

/* Schaltflächen */
.button, button.button, .button.outline {
  font-family: var(--f-text);
  border-radius: 3px;
}
.button:not(.outline):not(.icon) { background: var(--rh-green-2); border-color: var(--rh-green-2); color: var(--rh-brass-2); }
.button:not(.outline):not(.icon):hover { background: var(--rh-green); color: #fff; }

/* Brotkrumen und Metaangaben in Aktenschrift */
.breadcrumbs, .breadcrumbs .text-muted, .entity-meta, .text-muted.small { font-family: var(--f-type); letter-spacing: .02em; }
.breadcrumbs a, .breadcrumbs .entity-list-item-link { color: var(--rh-ink-2); }

/* Fußzeile mit Weg zur Website und zum Spiel */
.rh-fuss { text-align: center; padding: 1.5rem 1rem 2.5rem; color: var(--rh-ink-2); font-size: .95rem; }
.rh-fuss a { color: #5b3a12; margin: 0 .5rem; }
.rh-fuss img { width: 28px; height: 28px; vertical-align: middle; margin-right: .4rem; }

/* Fokus gut sichtbar */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--rh-brass); outline-offset: 2px; }

/* Schmale Bildschirme */
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1, .page-content h1 { font-size: 1.8rem; }
  .page-content h2 { font-size: 1.4rem; }
  .page-content .rh-akte > .rh-bild { flex: 0 0 100%; max-width: 260px; margin: 0 auto; }
  .page-content .rh-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .page-content .rh-kacheln > li span { font-size: .95rem; }
  #header .logo-text { font-size: 1.15rem; }
  .page-content table { display: block; overflow-x: auto; }
}

/* Dunkle Darstellung, falls ein Leser sie einschaltet */
html.dark-mode body { background: #0f1a15; color: #ece2cc; }
html.dark-mode .card, html.dark-mode .grid-card { background: #16241d; border-color: #3a3424; }
html.dark-mode .page-content, html.dark-mode .page-content p, html.dark-mode .page-content li { color: #ece2cc; }
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode h4, html.dark-mode .page-content h1, html.dark-mode .page-content h2, html.dark-mode .page-content h3, html.dark-mode .page-content .rh-kacheln > li span { color: var(--rh-brass-2); }
html.dark-mode .page-content a, html.dark-mode .rh-fuss a { color: var(--rh-brass-2); }
html.dark-mode .page-content .rh-kacheln > li { background: rgba(255, 255, 255, .04); border-color: #3a3424; }
html.dark-mode .page-content .rh-kacheln > li small, html.dark-mode .rh-fuss, html.dark-mode .page-content .rh-daten dt { color: #b9ad96; }

/* Zitate tragen eigene Anführungszeichen */
.page-content blockquote:before { display: none; }
.page-content blockquote { padding-left: 1rem; }
/* Ausblendverlauf der Seitenleisten in Papierfarbe */
.tri-layout-left-contents, .tri-layout-right-contents { --bg-fade: var(--rh-paper); }
.tri-layout-sides-content::after, .tri-layout-left-contents::after, .tri-layout-right-contents::after { background: linear-gradient(to bottom, rgba(234, 220, 188, 0), var(--rh-paper)) !important; }