/* Design „Digitale Zeitreise“ für miesfelle.de: themes/zeitreise/public/zeitreise.css, ausgeliefert unter /theme/zeitreise/ (Schriften liegen daneben) */
/* ---------- Schriften (SIL Open Font License) ---------- */
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(atkinson-400-latin.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:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(atkinson-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(atkinson-700-latin.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:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(atkinson-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-weight:200 900;font-display:swap;src:url(literata-latin.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:"Literata";font-weight:200 900;font-display:swap;src:url(literata-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Farben wie die Zeitreise (Ortschronik-Blau, Wappen) ---------- */
html:root {
  --mf-50:#f2f4fb; --mf-100:#e3e7f6; --mf-200:#c7cfec; --mf-300:#9eacdc; --mf-400:#7385c9;
  --mf-500:#5a6ab8; --mf-600:#454c9d; --mf-700:#223788; --mf-800:#1b2c6d; --mf-900:#152255; --mf-950:#0d1638;
  --mf-bg:#f8fafc; --mf-card:#fff; --mf-text:#0f172a; --mf-muted:#475569; --mf-border:#e2e8f0;
  --mf-band:var(--mf-700); --mf-band-hover:var(--mf-600);

  --font-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-heading:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Literata",Georgia,"Times New Roman",serif;

  --color-primary:var(--mf-700);
  --color-primary-light:rgba(34,55,136,.12);
  --color-link:var(--mf-700);
  --color-bookshelf:#475569;
  --color-book:var(--mf-700);
  --color-chapter:var(--mf-600);   /* Buch, Kapitel, Seite: vom dunklen zum hellen Blau */
  --color-page:var(--mf-500);
  --color-page-draft:#7e50b1;
  --editor-color-primary:var(--mf-700);
}
/* Dunkelmodus wie Zeitreise „Dunkel“: fast schwarze Flächen, Blau für Band und Akzente */
html.dark-mode:root {
  --mf-bg:#0a0a0a; --mf-card:#171717; --mf-text:#f5f5f5; --mf-muted:#a3a3a3; --mf-border:#262626;
  --mf-band:var(--mf-950); --mf-band-hover:var(--mf-800);
  --color-primary:var(--mf-600);
  --color-primary-light:rgba(158,172,220,.15);
  --color-link:var(--mf-300);
  --color-bookshelf:#a3a3a3;
  --color-book:var(--mf-200);
  --color-chapter:var(--mf-300);
  --color-page:var(--mf-400);
  --color-page-draft:#c4a1f0;
}

/* ---------- Grundflächen ---------- */
html, html.dark-mode { background-color:var(--mf-bg); }
body, html.dark-mode body { color:var(--mf-text); font-size:15px; }
h1,h2,h3,h4,h5,h6, html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,
html.dark-mode h4,html.dark-mode h5,html.dark-mode h6 { color:var(--mf-text); font-weight:700; }
.card, html.dark-mode .card {
  background-color:var(--mf-card); border:1px solid var(--mf-border);
  border-radius:.5rem; box-shadow:none;
}
.card-title { color:var(--mf-text); font-weight:700; }
.text-muted, html.dark-mode .text-muted { color:var(--mf-muted) !important; }
html.dark-mode .tri-layout-left-contents>*, html.dark-mode .tri-layout-right-contents>* { opacity:1; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--color-link); outline-offset:2px;
}

/* ---------- Kopfband wie das Titelblatt der Chronik ---------- */
header#header, html.dark-mode header#header {
  background-color:var(--mf-band) !important; border-bottom:0; box-shadow:none;
}
header .logo-text { font-family:var(--font-heading); font-weight:700; font-size:1.35em; }
header .logo-image { height:32px; }
header .logo:hover, header .links a:hover, header .user-name:hover { background-color:var(--mf-band-hover); }
header .links a { border-radius:.375rem; }
header :focus-visible { outline-color:#fff !important; }
header .search-box input {
  background-color:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25);
  border-radius:.5rem; color:#fff;
}

/* ---------- Lesetext der Chronik in Literata ---------- */
.page-content p, .page-content li, .page-content blockquote, .page-content td,
.entity-list-item .entity-item-snippet p {
  font-family:var(--font-serif); line-height:1.7;
}
.page-content { font-size:1.06em; }
.page-content h1,.page-content h2,.page-content h3,.page-content h4 { font-family:var(--font-heading); }
.page-content blockquote, html.dark-mode .page-content blockquote {
  background:var(--color-primary-light); border-inline-start:4px solid var(--mf-700);
}
html.dark-mode .page-content blockquote { border-inline-start-color:var(--mf-300); }

/* ---------- Listen und Schaltflächen ---------- */
.entity-list-item { border-radius:.375rem; }
.entity-list-item:hover { background-color:var(--color-primary-light); }
.button, button.button { border-radius:.375rem; font-weight:700; }
.tag-item { border-radius:999px; }

/* ---------- Eingabefelder ---------- */
.input-base, input[type=text], input[type=search], input[type=email], input[type=password], select, textarea {
  border-radius:.375rem;
}
html.dark-mode .input-base, html.dark-mode input[type=text], html.dark-mode input[type=search],
html.dark-mode input[type=email], html.dark-mode input[type=password], html.dark-mode select, html.dark-mode textarea {
  background-color:#0a0a0a; border-color:#525252; color:var(--mf-text);
}
html.dark-mode header .search-box input { background-color:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }

/* ---------- Fußband wie in der Zeitreise (layouts/parts/footer.blade.php) ---------- */
footer.zeitreise-footer, html.dark-mode footer.zeitreise-footer {
  padding:0; text-align:start; background-color:var(--mf-band); color:#fff; font-size:14px;
}
.zeitreise-footer-inner {
  display:flex; flex-direction:column; gap:4px; max-width:80rem; margin:0 auto; padding:24px 16px;
}
@media (min-width:640px) { .zeitreise-footer-inner { flex-direction:row; justify-content:space-between; padding:24px; } }
.zeitreise-footer p { margin:0; }
.zeitreise-footer ul { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; list-style:none; }
.zeitreise-footer a { margin:0; color:#fff; text-underline-offset:4px; }
.zeitreise-footer a:hover { color:#fff; text-decoration:underline; }
.zeitreise-footer a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (pointer:coarse) { .zeitreise-footer a { display:inline-flex; align-items:center; min-height:44px; } }

/* ---------- Impressum und Datenschutz (legal/) wie in der Zeitreise ---------- */
.zeitreise-legal { width:100%; max-width:48rem; margin:0 auto; padding:32px 16px; }
@media (min-width:640px) { .zeitreise-legal { padding:32px 24px; } }
.zeitreise-legal h1 { margin:0 0 24px; font-size:1.875rem; line-height:1.2; }
.zeitreise-legal-body { display:flex; flex-direction:column; gap:24px; font-family:var(--font-serif); font-size:16px; line-height:1.625; }
.zeitreise-legal-body section { display:flex; flex-direction:column; gap:8px; }
.zeitreise-legal-body h2 { margin:0; font-family:var(--font-heading); font-size:1.25rem; line-height:1.4; }
.zeitreise-legal-body p, .zeitreise-legal-body ul { margin:0; }
.zeitreise-legal-body ul { padding:0; }
.zeitreise-legal-body li { margin-left:20px; list-style:disc; }
.zeitreise-legal-body a { color:var(--color-link); text-decoration:underline; text-underline-offset:4px; }
.zeitreise-legal-updated { font-family:var(--font-body); font-size:14px; color:var(--mf-muted); }

@media print {
  .page-content p, .page-content li { font-family:var(--font-serif); }
}

/* ---------- Farbschema-Schalter wie in der Zeitreise (Ghost-Button, Menü mit Häkchen) ---------- */
html:root { --mf-popover:#fff; --mf-popover-text:#0f172a; --mf-accent:var(--mf-100); --mf-accent-text:var(--mf-900); }
html.dark-mode:root { --mf-popover:#171717; --mf-popover-text:#f5f5f5; --mf-accent:#262626; --mf-accent-text:#f5f5f5; }
.zeitreise-icon { width:16px; height:16px; flex-shrink:0; fill:none !important; }
header .zeitreise-mode.dropdown-container { padding-inline-start:4px; }
header .zeitreise-mode-trigger {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  border:1px solid transparent; border-radius:.5rem; background:none; color:#fff; cursor:pointer;
}
header .zeitreise-mode-trigger:hover, header .zeitreise-mode-trigger[aria-expanded="true"] { background-color:var(--mf-band-hover); }
header .zeitreise-mode-trigger:focus { outline:none; }
header .zeitreise-mode-trigger:focus-visible { outline:none; box-shadow:0 0 0 3px #fff; }
@media (pointer:coarse) { header .zeitreise-mode-trigger { width:44px; height:44px; } }
header .zeitreise-mode .dropdown-menu {
  min-width:8rem; padding:4px; margin:8px 0; border-radius:.5rem; background:var(--mf-popover); color:var(--mf-popover-text);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1), 0 0 0 1px rgba(15,23,42,.1);
}
header .zeitreise-mode .dropdown-menu li { display:block; }
header .zeitreise-mode .dropdown-menu form { margin:0; }
header .zeitreise-mode .dropdown-menu .zeitreise-mode-item {
  position:relative; display:flex; align-items:center; gap:6px; width:100%; margin:0;
  padding:4px 32px 4px 6px; border:0; border-radius:.375rem; background:none;
  color:var(--mf-popover-text); font:inherit; font-size:14px; line-height:20px; text-align:start; cursor:default;
}
header .zeitreise-mode .dropdown-menu .zeitreise-mode-item:hover,
header .zeitreise-mode .dropdown-menu .zeitreise-mode-item:focus { background:var(--mf-accent); color:var(--mf-accent-text); outline:none; }
header .zeitreise-mode-check { position:absolute; right:8px; }
@media (pointer:coarse) { header .zeitreise-mode .dropdown-menu .zeitreise-mode-item { min-height:44px; } }
/* Breite Bildschirme: in einer Zeile mit den Links im Kopfband */
@media screen and (min-width:1001px) {
  header .links { display:inline-flex; align-items:center; }
  header .zeitreise-mode.dropdown-container { position:relative; }
  /* BookStacks Dropdown-Skript setzt top:0 direkt am Element; das Menü soll unter dem Knopf aufgehen. */
  header .zeitreise-mode .dropdown-menu { top:100% !important; inset-inline-end:0; margin:4px 0 0; }
}
/* Schmale Bildschirme: in der aufgeklappten Liste stehen beide Einträge direkt da */
@media screen and (max-width:1000px) {
  header .zeitreise-mode.dropdown-container { display:block; padding:0; }
  header .zeitreise-mode-trigger { display:none; }
  header .zeitreise-mode .dropdown-menu {
    display:block !important; position:static; margin:0; padding:0; min-width:0; box-shadow:none; background:none;
  }
  header .zeitreise-mode .dropdown-menu .zeitreise-mode-item { padding:8px 40px 8px 16px; gap:16px; color:#444; font-size:inherit; line-height:1.4; }
  html.dark-mode header .zeitreise-mode .dropdown-menu .zeitreise-mode-item { color:#eee; }
}

/* ---------- Buchseite: Kopf mit Cover ---------- */
.zeitreise-book-hero { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2rem; margin-bottom:1.5rem; }
.zeitreise-book-cover {
  width:100%; max-width:320px; height:auto; border-radius:.375rem;
  box-shadow:0 10px 28px -10px rgba(13,22,56,.55);
}
.zeitreise-book-intro { flex:1 1 260px; }
.zeitreise-book-intro h1 { margin-top:0; font-size:2.6em; }
.zeitreise-book-intro .button { margin:0; }
.zeitreise-title-main, .zeitreise-title-sub { display:block; }
.zeitreise-title-sub { font-size:.62em; line-height:1.25; color:var(--color-book); }
.zeitreise-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }