/* =====================================================================
   Reisetagebuch – Design
   Konzept: kartografisches Logbuch. Koordinaten-Stempel als Signatur,
   warmes Papier, Pinien-Tinte als Text, Ocker als einziger Akzent
   (Kartennadel & Stempel – dort, wo er etwas bedeutet).
   ===================================================================== */

:root{
  --ink:#1C3B35;          /* Pinien-Tinte, Haupttext */
  --ink-soft:#50615B;     /* gedämpfter Text */
  --paper:#ECEDE6;        /* kühles Papier */
  --raised:#F6F6F1;       /* Karten / Flächen */
  --line:#D3D5C9;         /* Höhenlinien / Haarlinien */
  --accent:#C77D3E;       /* Ocker – Akzent */
  --accent-deep:#A45F2A;
  --shadow:0 1px 2px rgba(28,59,53,.05), 0 8px 24px rgba(28,59,53,.06);

  --display:"Fraunces", Georgia, serif;
  --body:"Hanken Grotesque", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:860px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:560px}

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

/* ---------- Kopf ---------- */
.masthead{
  position:relative;
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* zarte Höhenlinien im Hintergrund */
.masthead::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(120% 120% at 80% -10%, transparent 38%, rgba(28,59,53,.05) 38.4%, transparent 39%),
    radial-gradient(120% 120% at 80% -10%, transparent 48%, rgba(28,59,53,.05) 48.4%, transparent 49%),
    radial-gradient(120% 120% at 80% -10%, transparent 58%, rgba(28,59,53,.05) 58.4%, transparent 59%),
    radial-gradient(120% 120% at 80% -10%, transparent 68%, rgba(28,59,53,.05) 68.4%, transparent 69%);
  pointer-events:none;
}
.masthead .wrap{position:relative}
.masthead-sm{padding:40px 0 28px}

.eyebrow{
  font-family:var(--mono);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-deep);
  margin:0 0 14px;
}
.masthead h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(2.4rem, 7vw, 4rem);
  line-height:1.02;
  letter-spacing:-.015em;
  margin:0;
}
.lede{
  font-family:var(--display);
  font-weight:400; font-style:italic;
  font-size:1.2rem; color:var(--ink-soft);
  margin:14px 0 0; max-width:34em;
}
.meta{
  font-family:var(--mono); font-size:13px;
  color:var(--ink-soft); margin:22px 0 0;
}
.meta .dot{margin:0 8px;color:var(--line)}

/* ---------- Eintrag ---------- */
main{padding:8px 0 40px}
.entry{
  padding:54px 0;
  border-bottom:1px solid var(--line);
}
.entry:last-child{border-bottom:none}

.entry-head{margin-bottom:22px}
.stamp{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  font-family:var(--mono); font-size:12.5px;
  color:var(--ink-soft);
  margin:0 0 12px;
}
.stamp-date{
  color:var(--ink);
  border-left:3px solid var(--accent);
  padding-left:9px; letter-spacing:.01em;
}
.stamp-coord{letter-spacing:.02em}
.stamp-place{
  background:rgba(199,125,62,.12);
  color:var(--accent-deep);
  padding:2px 9px; border-radius:3px;
  letter-spacing:.02em;
}
.entry h2{
  font-family:var(--display);
  font-weight:600; font-size:clamp(1.7rem, 4.5vw, 2.4rem);
  line-height:1.08; letter-spacing:-.01em;
  margin:0; max-width:18em;
}

.prose{max-width:38em}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}

/* ---------- Galerie ---------- */
.gallery{margin:26px 0 0; display:grid; gap:8px}
.gallery-1{grid-template-columns:1fr}
.gallery-2{grid-template-columns:1fr 1fr}
.gallery-3,.gallery-4{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

.shot{
  display:block; overflow:hidden; border-radius:5px;
  background:var(--raised); box-shadow:var(--shadow);
  transition:transform .25s ease;
}
.shot img{display:block; width:100%; height:100%; object-fit:cover}
/* Einzelbild in natürlichem Format, gedeckelt */
.gallery-1 .shot{aspect-ratio:auto}
.gallery-1 .shot img{max-height:74vh; width:100%; object-fit:contain; background:#11211d}
/* mehrere Bilder: ruhiges Raster */
.gallery-2 .shot, .gallery-3 .shot, .gallery-4 .shot{aspect-ratio:4/3}
.shot:hover{transform:translateY(-3px)}

/* ---------- Karte ---------- */
.map{
  height:300px; margin:26px 0 0;
  border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow);
  background:var(--raised);
  z-index:0;
}
.leaflet-container{font-family:var(--mono);font-size:11px;border-radius:6px}
.pin{
  width:16px; height:16px; border-radius:50%;
  background:var(--accent); border:2.5px solid var(--paper);
  box-shadow:0 0 0 1px var(--accent-deep), 0 2px 5px rgba(0,0,0,.3);
}
.dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:3px solid var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* ---------- leer ---------- */
.empty{padding:70px 0; text-align:center}
.empty p{margin:.3em 0; font-family:var(--display); font-size:1.5rem}
.empty-hint{font-family:var(--body); font-size:1rem; color:var(--ink-soft)}

/* ---------- Fußzeile ---------- */
.foot{border-top:1px solid var(--line); padding:26px 0; margin-top:20px}
.foot .wrap{display:flex; justify-content:space-between; align-items:center}
.foot span{font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:.04em}

/* =====================================================================
   Lightbox
   ===================================================================== */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  background:rgba(15,28,25,.92);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.lightbox[hidden]{display:none}   /* ausgeblendet, solange kein Foto offen ist */
.lightbox img{max-width:100%; max-height:100%; border-radius:4px}
.lb-close{
  position:absolute; top:14px; right:18px;
  background:none; border:none; color:#fff;
  font-size:40px; line-height:1; cursor:pointer; opacity:.8;
}
.lb-close:hover{opacity:1}

/* =====================================================================
   Schreib-Seite
   ===================================================================== */
.admin .card{
  background:var(--raised);
  border:1px solid var(--line); border-radius:10px;
  padding:26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.card label{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  margin:18px 0 7px;
}
.card label:first-of-type{margin-top:0}
.opt{text-transform:none; letter-spacing:0; opacity:.7}

.card input[type=text],
.card input[type=password],
.card textarea{
  font-family:var(--body); font-size:17px; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line); border-radius:7px;
  padding:12px 13px; width:100%;
}
.card textarea{resize:vertical; line-height:1.55}
.card input:focus, .card textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(199,125,62,.18);
}
.card input[type=file]{font-family:var(--body); font-size:15px; margin-top:2px}

.card button, .btn{
  margin-top:24px;
  font-family:var(--body); font-weight:600; font-size:16px;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:7px; padding:13px 18px;
  cursor:pointer; text-align:center;
  transition:background .2s ease;
}
.card button:hover, .btn:hover{background:#13302b; text-decoration:none}
.card button:disabled{opacity:.6; cursor:default}
.btn-ghost{background:none; color:var(--ink); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--paper)}
.card-actions{gap:12px}
.card-actions .btn{margin-top:0}

.hint{font-size:14px; color:var(--ink-soft); margin:8px 0 0}

.note{
  border-radius:8px; padding:13px 16px; margin:0 0 22px;
  font-size:15px;
}
.note-error{background:#f6e4dc; color:#8a3b1a; border:1px solid #e3b9a4}
.note-ok{background:#dfeae2; color:#1f5538; border:1px solid #b6cfc0}

.signout{text-align:center; margin-top:22px}
.signout a{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft)}

/* =====================================================================
   Bewegung & Barrierefreiheit
   ===================================================================== */
.entry{opacity:1}
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
}

@media (max-width:520px){
  body{font-size:17px}
  .masthead{padding:48px 0 32px}
  .entry{padding:42px 0}
  .map{height:240px}
}