/* Zentrales Design im Stil des Buchcovers. Gilt fuer alle Seiten.
   Eingebunden per <link rel="stylesheet" href="/theme.css"> vor dem Seiten-CSS.
   Kontrast (WCAG): Navy auf Hellblau 11,2:1, Kirschrot auf Hellblau 7,9:1,
   Kirschrot auf Kartenflaeche 9,6:1, Hellgrau auf Navy 13,5:1. */

@font-face{font-family:"Lora"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/lora-400.woff2") format("woff2")}
@font-face{font-family:"Lora"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/lora-500.woff2") format("woff2")}
@font-face{font-family:"Lora"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/lora-600.woff2") format("woff2")}
@font-face{font-family:"Lora"; font-style:italic; font-weight:400; font-display:swap;
  src:url("/lora-400-italic.woff2") format("woff2")}

:root{
  --bg:#DCE3EA;          /* Standardflaeche */
  --card:#F5F8FA;        /* Karten, helle Hervorhebung */
  --ink:#1B2A41;         /* Text, Ueberschriften, Linien */
  --muted:#3A4A62;       /* Nebentext */
  --line:#1B2A41;        /* Linien und Rahmen, 1 px */
  --cherry:#7B1E1E;      /* Akzent: Kennzeilen, Links, Icons */
  --cherry-dark:#5E1616; /* Hover */
  --dark:#1B2A41;        /* dunkle Flaechen */
  --on-dark:#F5F8FA;     /* Text auf dunklen Flaechen */
  --ok:#2E6B3A;
  --serif:"Lora",Georgia,"Iowan Old Style","Times New Roman",serif;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.6;
  -webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--serif); font-weight:600}
strong,b{font-weight:600}

a{color:var(--cherry); text-decoration:underline; text-underline-offset:.15em}
a:hover{color:var(--cherry-dark)}
:focus-visible{outline:3px solid var(--cherry); outline-offset:3px; border-radius:3px}

/* Navigationszeilen: Tippflaeche mindestens 48 px, Logo rechts */
nav.top, .footerlinks{font-size:15px}
nav.top a, .footerlinks a, .back{display:inline-flex; align-items:center; min-height:48px}
nav.top{color:var(--muted)}
.logo{float:right; margin:0 0 0 16px}

/* Fussbereich der Unterseiten: dunkle Flaeche */
.footerlinks{margin-top:44px; padding:10px 20px; background:var(--dark); color:var(--on-dark); border-radius:10px}
.footerlinks a{color:var(--on-dark)}
.footerlinks a:hover{color:#fff}
.footerlinks :focus-visible{outline-color:var(--on-dark)}

/* Schaltflaechen */
.btn, button{min-height:48px}