:root{
  --paper:#faf7f2;
  --ink:#1d1a16;
  --muted:#6b6258;
  --rule:rgba(0,0,0,.10);
  --card:rgba(255,255,255,.55);
}



/* === Theme variables (system + override) === */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1115;
    --ink:#ece8e1;
    --muted:#b9b2a8;
    --rule:rgba(255,255,255,.14);
    --card:rgba(255,255,255,.06);
  }
}

/* Explicit overrides when user toggles */
:root[data-theme="dark"]{
  --paper:#0f1115;
  --ink:#ece8e1;
  --muted:#b9b2a8;
  --rule:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.06);
}

:root[data-theme="light"]{
  --paper:#faf7f2;
  --ink:#1d1a16;
  --muted:#6b6258;
  --rule:rgba(0,0,0,.10);
  --card:rgba(255,255,255,.55);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height:1.75;
}

a{color:inherit}
a:hover{opacity:.86}

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(250,247,242,.86);
  border-bottom:1px solid var(--rule);
}

.wrap{max-width:980px;margin:0 auto;padding:0 18px}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 0;
  gap:12px;
}

.brand{font-weight:700; letter-spacing:.02em}
.navlinks{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

.pill{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--rule);
  background:var(--card);
  font-size:.95rem;
}

.hero{padding:26px 0 10px}
h1{font-size:2rem; line-height:1.2; margin:0}
.subtitle{margin:.35rem 0 0; color:var(--muted)}

.card{
  margin:16px 0 28px;
  border:1px solid var(--rule);
  background:var(--card);
  border-radius:18px;
  padding:18px;
}

.content{padding:10px 0 40px}
article{font-size:1.05rem}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

.item{
  border:1px solid var(--rule);
  background:rgba(255,255,255,.45);
  border-radius:18px;
  padding:14px;
}

.item h3{margin:0 0 6px; font-size:1.1rem; line-height:1.35}
.item p{margin:0; color:var(--muted)}
.item a{display:inline-block; margin-top:10px}

hr{border:none;border-top:1px solid var(--rule); margin:18px 0}

.bottomnav{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}

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

/* Make old HTML elements look nicer */
img{max-width:100%; height:auto; border-radius:14px}
table{border-collapse:collapse; width:100%}
td,th{border:1px solid var(--rule); padding:8px; vertical-align:top}

@media (max-width: 860px){
  .grid{grid-template-columns: 1fr;}
}

/* === Reisejournal polish === */
html{ background: var(--paper);  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body{ transition: background-color .25s ease, color .25s ease; }

.topbar, .card, .item, .pill{
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}

article{
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.12rem);
  line-height: 1.85;
}

article p{ margin: 0.8rem 0; }
article h1, article h2, article h3{ line-height:1.25; }
article h2{ margin-top: 1.6rem; }
article h3{ margin-top: 1.2rem; }

article blockquote{
  margin: 1.1rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}

.pill#themeToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
}

.pill#themeToggle .ico{
  font-size: 1rem;
  line-height: 1;
}


.topbar{ background: rgba(250,247,242,.86); }
/* topbar theme bg */
.topbar{
  background: rgba(250,247,242,.86);
}
:root[data-theme="dark"] .topbar{
  background: rgba(15,17,21,.86);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .topbar{ background: rgba(15,17,21,.86); }
}


/* Global theme binding */
body{
  background: var(--paper);
  color: var(--ink);
}

p, li, td, th, blockquote{ color: var(--ink); }
h1, h2, h3, h4{ color: var(--ink); }
a{ color: inherit; }
.subtitle{ color: var(--muted); }
.footer{ color: var(--muted); border-top: 1px solid var(--rule); }

/* Ensure components use theme variables */
.pill{ background: var(--card); border-color: var(--rule); }
.card{ background: var(--card); border-color: var(--rule); }
.item{ background: var(--card); border-color: var(--rule); }
.topbar{ border-bottom: 1px solid var(--rule); }
hr{ border-top: 1px solid var(--rule); }

:root[data-theme="light"] .topbar{ background: rgba(250,247,242,.86); }