/* Die Rechtstexte: Impressum und Datenschutzerklaerung in drei Sprachen.
   Dieselbe Welt wie die Seite (DESIGN.md, "Das Fenster"): Papier, eine
   Scheibe aus mattem Glas, Tinte. Die Schriften kommen von diesem Server
   (`/fonts/`, ausgeliefert von der Anwendung), nichts von fremden Servern.
   Nur ein helles Schema: das Namensbild ist dunkle Tinte auf durchsichtigem
   Grund und waere auf Nacht unsichtbar. */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/figtree-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: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/figtree-latin-ext.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: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/source-sans-3-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: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext.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: "Noto Sans Arabic"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/noto-sans-arabic-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF; }

:root {
  --tinte: #1b1610;
  --tinte-weich: #3d342b;
  --leise: #6d6155;
  --rot: #8d3320;
  --papier: #efe9df;
  --glas: rgba(255, 253, 250, .88);
  --glas-kante: rgba(255, 255, 255, .85);
  --linie: rgba(60, 44, 28, .15);
  --linie-zart: rgba(60, 44, 28, .08);
}

html { background: var(--papier); color-scheme: light; }
body {
  margin: 0; color: var(--tinte);
  font: 17px/1.62 "Source Sans 3", system-ui, -apple-system, sans-serif;
  padding: clamp(1.1rem, 3.4vw, 2.4rem) clamp(1.1rem, 3.4vw, 2.4rem) 4rem;
}
html[lang="ar"] body { font-family: "Noto Sans Arabic", "Source Sans 3", sans-serif; font-size: 18px; line-height: 1.9; }

.bahn { max-width: 46rem; margin: 0 auto; }

.kopf {
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between; align-items: baseline;
  font: 600 14px/1.5 "Figtree", "Source Sans 3", sans-serif; margin-bottom: 1.1rem;
}
html[lang="ar"] .kopf { font-family: "Noto Sans Arabic", "Figtree", sans-serif; }
.kopf a { color: var(--tinte-weich); text-decoration: none; border-bottom: 1px solid var(--linie); }
.kopf a:hover { color: var(--rot); border-color: currentColor; }
.sprachen { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sprachen [aria-current] { color: var(--leise); }

.scheibe {
  background: var(--glas); border: 1px solid var(--glas-kante); border-radius: 20px;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) clamp(1.1rem, 2.6vw, 2.2rem);
  box-shadow: 0 1px 2px rgba(60, 44, 28, .06), 0 12px 40px rgba(60, 44, 28, .08);
}

h1 { font: 800 clamp(1.6rem, 3.4vw, 2.2rem)/1.1 "Figtree", "Source Sans 3", sans-serif; letter-spacing: -.03em; margin: 0 0 .3rem; }
h2 { font: 600 1.22rem/1.3 "Figtree", "Source Sans 3", sans-serif; letter-spacing: -.02em; margin: 2rem 0 .5rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1.4rem 0 .3rem; }
html[lang="ar"] h1, html[lang="ar"] h2 { font-family: "Noto Sans Arabic", "Figtree", sans-serif; letter-spacing: 0; }
p, li, dd { max-width: 66ch; }
p { margin: .6rem 0; }
.stand { color: var(--leise); font-size: 14px; margin: 0 0 1.2rem; }

dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .4rem 1.4rem; margin: .8rem 0; }
dt { color: var(--leise); font-size: 14px; padding-top: .15em; }
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { dl { grid-template-columns: 1fr; gap: .1rem; } dt { margin-top: .6rem; } }

.name-bild { height: 1.45em; width: auto; max-width: 100%; vertical-align: -.35em; }
.platzhalter { background: #f3d9d2; color: var(--rot); padding: 0 .35em; border-radius: 4px; font-weight: 600; }
ul { padding-inline-start: 1.2rem; }
li { margin: .25rem 0; }
a { color: inherit; text-decoration-color: var(--linie); text-underline-offset: .15em; }
a:hover { color: var(--rot); text-decoration-color: currentColor; }
.hinweis { border-inline-start: 3px solid var(--rot); padding: .2rem .9rem; margin: 1rem 0; color: var(--tinte-weich); }

table { border-collapse: collapse; font-size: 15px; margin: .6rem 0; width: 100%; }
td, th { padding: .3rem .6rem; border-bottom: 1px solid var(--linie-zart); text-align: start; vertical-align: top; }
th { color: var(--leise); font-weight: 600; font-size: 13px; }

.fuss {
  margin-top: 1.7rem; padding-top: 1rem; border-top: 1px solid var(--linie);
  color: var(--leise); font-size: 14px; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;
}