/* base.css — gemeinsame CSS-Basis */

/* ---------- Tokens ---------- */
:root{
  --bg:#f6f6f4;
  --surface:#ffffff;
  --text:#1b1c1e;
  --muted:#5a5f68;
  --rule:rgba(0,0,0,.10);
  --accent:#2a5d7c;

  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);

  --maxw:72ch;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1114;
    --surface:#141821;
    --text:#f3f5f7;
    --muted:#b6bdc7;
    --rule:rgba(255,255,255,.12);
    --accent:#66b3e0;

    --shadow:0 14px 40px rgba(0,0,0,.45);
  }
}

/* ---------- Reset / Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(42,93,124,.12), transparent 55%),
    radial-gradient(900px 500px at 90% 10%, rgba(42,93,124,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font:400 16px/1.65 ui-serif, "Superclarendon", "Times New Roman", Times, serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:inherit; }
p{ margin:0; }
.absatz{
  margin-top: 2em; margin-bottom: 2em;
}

:focus-visible{
  outline:3px solid color-mix(in oklab, var(--accent) 65%, transparent);
  outline-offset:3px;
  border-radius:10px;
}

/* ---------- Layout ---------- */
.page{
  min-height:100%;
  padding:clamp(16px,3vw,40px);
  display:grid;
  place-items:start center;
}

.card{
  width:100%;
  max-width: calc(var(--maxw) + 6rem);
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

header{
  padding:clamp(18px,3vw,36px);
  border-bottom:1px solid var(--rule);
  background:
    linear-gradient(180deg, rgba(42,93,124,.08), transparent 60%);
}

main{
  padding:clamp(16px,3vw,36px);
}

mark{
  background: rgba(250, 204, 21, .35);
  padding: 0 .15em;
  border-radius: .25em;
}

.footer{
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .95rem;
}


h1{
  margin:0;
  font-size:clamp(1.35rem, 1.2rem + 1.4vw, 2.2rem);
  line-height:1.15;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.subtitle{
  margin-top:.9rem;
  color:var(--muted);
  max-width:var(--maxw);
  font-size:1rem;
}

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

/* ---------- Index-Navigation (Kacheln) ---------- */
nav{ max-width:var(--maxw); }

ul.nav{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:1rem;
}

ul.nav a{
  display:block;
  padding:1rem 1.2rem;
  border:1px solid var(--rule);
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(42,93,124,.06), transparent 70%);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

ul.nav a:hover,
ul.nav a:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  border-color:color-mix(in oklab, var(--accent) 45%, var(--rule));
  outline:none;
}

.nav-title{
  font-style:italic;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.01em;
}

.nav-desc{
  margin-top:.35rem;
  color:var(--muted);
  font-size:.95rem;
}

/* ---------- Wörterbuch: Suche ---------- */
.meta{
  margin-top:.9rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
}

.search{
  margin-top:1rem;
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  align-items:center;
}

.search input[type="search"]{
  flex: 1 1 18rem;
  min-width: 14rem;
  padding:.72rem .9rem;
  border-radius:12px;
  border:1px solid var(--rule);
  background: color-mix(in oklab, var(--surface) 88%, var(--bg));
  color:var(--text);
  font: 500 1rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline:none;
}

.search input[type="search"]:focus{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--rule));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
}

.search button{
  padding:.72rem .9rem;
  border-radius:12px;
  border:1px solid var(--rule);
  background: color-mix(in oklab, var(--accent) 18%, var(--surface));
  color:var(--text);
  font: 600 0.95rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor:pointer;
}
.search button:hover{ filter: brightness(1.02); }

.search .hint{
  width:100%;
  color:var(--muted);
  font-size:.95rem;
}

.status{
  margin-top:.4rem;
  color: var(--muted);
  font: 500 .92rem/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.status code{
  font-family: var(--mono);
  font-size: .92em;
}

/* ---------- Wörterbuch: Dictionary (DL) ---------- */
dl.dict{
  margin:0;
  max-width:var(--maxw);
}

.entry{
  margin:0;
  padding:1rem 0;
  border-top:1px solid var(--rule);
}
.entry:first-child{
  border-top:0;
  padding-top:0;
}

dt{
  margin:0 0 .35rem 0;
  font-style:italic;
  font-weight:700;
  letter-spacing:.01em;
  font-size:1.06rem;
}

dt .term{
  display:inline-block;
  scroll-margin-top: 120px;
}

dd{
  margin:0;
  color:var(--text);
  hyphens:auto;
  overflow-wrap:anywhere;
}

dd .cont{ margin-top:.5rem; }

mark{
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  color: inherit;
  padding: 0 .15em;
  border-radius: .35em;
}

/* Originalquelle beim Wörterbuch: optional ausblenden */
#source{ display:none; }

/* ---------- Print ---------- */
@media print{
  body{ background:#fff; }
  .page{ padding:0; }
  .card{ border:0; box-shadow:none; border-radius:0; }
  header{ background:none; }
  .search{ display:none; }
  ul.nav a{ box-shadow:none; transform:none; }
}
/* ---------- Rücknavigation ---------- */
.topnav{
  max-width:var(--maxw);
  margin-bottom:1.2rem;
}

.backlink{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .75rem;
  border:1px solid var(--rule);
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  font:600 .92rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: color-mix(in oklab, var(--surface) 85%, var(--bg));
  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.backlink::before{
  content:"←";
  font-weight:700;
}

.backlink:hover,
.backlink:focus-visible{
  background: color-mix(in oklab, var(--accent) 12%, var(--surface));
  border-color: color-mix(in oklab, var(--accent) 45%, var(--rule));
  transform: translateX(-2px);
  outline:none;
}

.callout{
  border-left: 4px solid rgba(17,24,39,.25);
  padding: 10px 12px;
  background: rgba(17,24,39,.03);
  border-radius: 12px;
  margin: 12px 0;
}
/* ---------- Links ---------- */

a{
  color: #1f3a5f;                 /* ruhiges, seriöses Blau */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(31,58,95,.45);
  transition:
    color .15s ease,
    text-decoration-color .15s ease;
}

a:hover,
a:focus-visible{
  color: #102a43;
  text-decoration-thickness: 2px;
  text-decoration-color: #102a43;
  outline: none;
}

/* Links in Fließtexten */
p a{
  font-weight: 500;
}

/* Dezente Darstellung in Fußnoten, Hinweisen, Meta-Texten */
.muted a{
  color: #334155;
  text-decoration-color: rgba(51,65,85,.4);
}

.muted a:hover,
.muted a:focus-visible{
  color: #1e293b;
  text-decoration-color: #1e293b;
}

/* Buttons und Navigationslinks sollen nicht unterstrichen sein */
.btn,
.backlink{
  text-decoration: none;
}

/* Druckansicht: URLs sichtbar machen */
@media print{
  a[href]::after{
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }

  .btn::after,
  .backlink::after{
    content: "";
  }
}