:root{
  --bg:#2f2f2f;
  --panel:rgba(0,0,0,0.60);
  --panel2:rgba(0,0,0,0.42);
  --text:#f2f2f2;
  --muted:rgba(255,255,255,0.75);
  --accent:#ffb000;
  --blue:#2d7ff9;
  --ok:#3bd16f;
  --warn:#ffb000;
  --bad:#ff5a5a;
  --border:rgba(255,255,255,0.12);
}

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

body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
}

/* ===== NAPI HÁTTÉR ===== */
body.bg-day01{
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
    url('../../day01/images/Durnstein.jpg') center / cover no-repeat fixed;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

/* ===== FEJLÉC ===== */
.topbar{
  position:relative;
  background:rgba(20,20,20,0.78);
  border-bottom:1px solid var(--border);
}

.topbar .inner{
  max-width:980px;
  margin:0 auto;
  padding:10px 14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.brand .title{
  font-weight:800;
  color:var(--accent);
  font-size:18px;
}

.brand .subtitle{
  font-size:12px;
  color:var(--muted);
}

/* ===== GOMBOK ===== */
.btnrow{
  display:flex;
  gap:10px;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
}

.btn-accent{
  background:var(--accent);
  color:#1b1b1b;
  border-color:transparent;
}

.btn-blue{
  background:var(--blue);
  color:#fff;
}

/* ===== MÉRÉS GOMB ===== */
.btn-measure{
  padding:8px 10px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,0.12);
}

.btn-measure.active{
  background:rgba(59,209,111,0.28);
  border-color:rgba(59,209,111,0.65);
  color:#eafff0;
}

/* ===== TARTALOM ===== */
.container{
  max-width:980px;
  margin:0 auto;
  padding:18px 14px 34px;
  width:100%;
  flex:1;
}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

.h1{
  margin:0 0 10px 0;
  font-size:32px;
}

.small{
  font-size:13px;
  color:var(--muted);
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* ===== HELYSZÍN ===== */
.poi{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.poi-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.poi-title{
  font-size:18px;
  font-weight:900;
}

.coords{
  font-size:13px;
  color:var(--muted);
}

.poibtns{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  align-items:center;
}

/* ===== KÉPEK ===== */
.inline-image,
.hero-image{
  width:100%;
  border-radius:14px;
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 10px 22px rgba(0,0,0,0.30);
}