/* ==========================================================================
   GipfelPfad – Gipfelbuch (Tab der Testversion), siehe gipfelbuch.js
   Papier, Handschrift, Gipfelstempel und gelbe Wanderwegweiser – damit
   Feedback geben sich nach Wandern anfühlt und nicht nach Formular.
   ========================================================================== */
:root{
  --gb-paper:#fbf6e9;
  --gb-paper-edge:#efe4c8;
  --gb-line:rgba(120,96,52,.16);
  --gb-margin:rgba(214,69,61,.35);
  --gb-ink:#3a2f1f;
  --gb-ink-soft:#7a6a4f;
  --gb-stamp:#b9382e;
  --gb-sign:#f2c230;
  --gb-sign-dark:#d9a913;
  --gb-sign-ink:#1f1d17;
  --gb-hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --gb-radius:18px;
}

.gb{display:flex;flex-direction:column;gap:14px;padding-bottom:18px;}
.gb-intro{margin:2px 2px 0;font-size:14px;line-height:1.45;color:var(--muted);}
.gb-card{background:var(--card);border:1px solid var(--line);border-radius:var(--gb-radius);padding:14px;}
.gb-card h3{font-family:var(--font-head);font-weight:400;font-size:19px;margin:0;color:#13402a;}
.gb-i{width:16px;height:16px;flex:0 0 auto;}

.gb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;padding:10px 14px;
  background:var(--green);color:#fff;font:600 14px/1 var(--font-body);cursor:pointer;flex:0 0 auto;
  transition:transform .12s var(--ease-out,ease),background .15s;}
.gb-btn:hover{background:var(--green-dark,#16562f);}
.gb-btn:active{transform:scale(.96);}
.gb-btn:focus-visible,.gb-kind:focus-visible,.gb-area:focus-visible,.gb-link:focus-visible,.gb-board summary:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;}
.gb-btn.busy{opacity:.7;pointer-events:none;}

/* ---------- Gipfelbuch (Papier) ---------- */
.gb-book{padding:0;border:0;background:transparent;}
/* Blatt mit rotem Rand, aber ohne durchgehende Linien: Überschrift, Chips und
   Felder haben eigene Höhen und lagen nie auf einem festen Raster. Linien gibt
   es nur im Schreibfeld – dort exakt im Zeilenabstand der Schrift. */
.gb-paper{position:relative;overflow:hidden;border-radius:var(--gb-radius);padding:16px 16px 18px 30px;color:var(--gb-ink);
  background:
    linear-gradient(90deg,transparent 21px,var(--gb-margin) 21px,var(--gb-margin) 22.5px,transparent 22.5px),
    radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.55),transparent 60%),
    var(--gb-paper);
  border:1px solid var(--gb-paper-edge);box-shadow:0 1px 0 #fff inset,0 8px 20px rgba(90,70,30,.08);}
.gb-book-head{display:flex;flex-direction:column;margin-bottom:10px;}
.gb-book-head h3{font-family:var(--gb-hand);font-weight:700;font-size:34px;line-height:1;color:var(--gb-ink);}
.gb-book-head span{font-size:12px;color:var(--gb-ink-soft);letter-spacing:.02em;}
.gb-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.gb-kind{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;border:1.5px dashed var(--gb-ink-soft);
  background:rgba(255,255,255,.55);color:var(--gb-ink);font:600 13px/1 var(--font-body);cursor:pointer;transition:background .15s,transform .12s;}
.gb-kind:active{transform:scale(.96);}
.gb-kind.on{border-style:solid;border-color:var(--gb-ink);background:var(--gb-ink);color:var(--gb-paper);}
.gb-label{display:block;font-size:12px;font-weight:600;color:var(--gb-ink-soft);margin:0 0 4px;}
.gb-label small{font-weight:400;}
/* Schreiblinien: eine Linie je Textzeile (--gb-lh), knapp unter der Grundlinie der
   Handschrift; background-attachment:local lässt sie beim Scrollen mitlaufen */
.gb-msg{--gb-lh:32px;width:100%;box-sizing:border-box;min-height:calc(var(--gb-lh) * 5);resize:vertical;border:0;outline:0;
  padding:0 2px;margin:0;color:var(--gb-ink);font:400 22px/var(--gb-lh) var(--gb-hand);
  background:repeating-linear-gradient(180deg,transparent 0 calc(var(--gb-lh) - 7px),var(--gb-line) calc(var(--gb-lh) - 7px) calc(var(--gb-lh) - 6px),transparent calc(var(--gb-lh) - 6px) var(--gb-lh));
  background-attachment:local;}
.gb-msg::placeholder{color:rgba(122,106,79,.7);}
.gb-msg:focus{background-color:rgba(255,255,255,.35);}
.gb-areas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 12px;font-size:12.5px;color:var(--gb-ink-soft);}
.gb-area{padding:5px 10px;border-radius:999px;border:1px solid var(--gb-paper-edge);background:rgba(255,255,255,.6);
  color:var(--gb-ink);font:500 12.5px/1.2 var(--font-body);cursor:pointer;}
.gb-area.on{background:#f6c453;border-color:#e2ad2f;font-weight:700;}
.gb-sign,.gb-mail{margin-bottom:14px;}
.gb-name,.gb-email{width:100%;max-width:300px;box-sizing:border-box;border:0;border-bottom:1.5px solid var(--gb-ink-soft);
  background:transparent;outline:0;padding:2px 2px 4px;color:var(--gb-ink);font:600 22px/1.1 var(--gb-hand);}
.gb-name:focus,.gb-email:focus{border-bottom-color:var(--gb-ink);}
.gb-email[aria-invalid="true"]{border-bottom-color:var(--gb-stamp);}
.gb-optin{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12.5px;line-height:1.4;color:var(--gb-ink-soft);cursor:pointer;}
.gb-optin input{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--gb-ink);}
.gb-submit{width:100%;padding:13px;font-size:15px;background:var(--gb-ink);}
.gb-submit:hover{background:#241c11;}
/* Gipfelstempel nach dem Eintragen */
.gb-stamp{display:none;position:absolute;inset:0;align-items:center;justify-content:center;flex-direction:column;gap:12px;
  padding:20px;text-align:center;background:rgba(251,246,233,.9);pointer-events:none;}
.gb-stamp.show{display:flex;animation:gbStampFade 2.4s ease forwards;}
.gb-stamp-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border-radius:50%;
  border:4px double var(--gb-stamp);color:var(--gb-stamp);transform:rotate(-12deg);animation:gbStampHit .45s cubic-bezier(.2,1.6,.4,1) both;}
.gb-stamp-inner span{font:700 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;}
.gb-stamp-inner b{font-family:var(--gb-hand);font-size:30px;line-height:1.05;margin:4px 0;}
.gb-stamp-inner small{font:600 11px/1 var(--font-body);letter-spacing:.06em;}
.gb-stamp p{margin:0;max-width:260px;font-size:14px;line-height:1.4;color:var(--gb-ink);}
@keyframes gbStampHit{from{opacity:0;transform:rotate(-30deg) scale(1.8)}to{opacity:1;transform:rotate(-12deg) scale(1)}}
@keyframes gbStampFade{0%,82%{opacity:1}100%{opacity:0;visibility:hidden}}

/* ---------- Eigene Einträge ---------- */
.gb-entries ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;}
.gb-entry{padding:10px 2px;border-top:1px dashed var(--line);}
.gb-entry:first-child{border-top:0;}
.gb-entry p{margin:0 0 6px;font:400 20px/1.25 var(--gb-hand);color:var(--gb-ink);overflow-wrap:anywhere;}
.gb-entry-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);}
.gb-st{display:inline-block;padding:3px 8px;border:1.5px solid currentColor;border-radius:6px;transform:rotate(-3deg);
  font:700 11px/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;}
.gb-st.ok{color:#2f6b46;} .gb-st.wait{color:#a36f00;} .gb-st.work{color:#1f6fa8;}
.gb-st.done{color:var(--gb-stamp);} .gb-st.muted{color:var(--muted);}
.gb-reply{margin-top:8px;padding:8px 10px;border-radius:10px;background:#eef5f0;font-size:13px;line-height:1.4;color:var(--ink);}

/* ---------- Roadmap als Wegweiser ---------- */
.gb-post{position:relative;margin-top:12px;padding-left:18px;}
.gb-post::before{content:'';position:absolute;left:4px;top:0;bottom:0;width:8px;border-radius:4px;
  background:linear-gradient(90deg,#8a8f8c,#b9bdba 50%,#8a8f8c);}
.gb-group + .gb-group{margin-top:14px;}
.gb-group h4{margin:0 0 6px;font:700 12px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.gb-board{margin:0 0 6px;}
.gb-board summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;
  padding:10px 30px 10px 12px;background:var(--gb-sign);color:var(--gb-sign-ink);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);
  box-shadow:inset 0 -3px 0 var(--gb-sign-dark);transition:transform .15s var(--ease-out,ease);}
.gb-board summary::-webkit-details-marker{display:none;}
.gb-board summary:active{transform:translateX(2px);}
.gb-board-title{font:700 14.5px/1.2 var(--font-body);}
.gb-board-sign{display:inline-flex;align-items:center;gap:4px;font:600 12px/1 var(--font-body);white-space:nowrap;opacity:.8;}
.gb-board-sign .gb-i{width:14px;height:14px;}
.gb-board.done summary{background:#fff;box-shadow:inset 0 -3px 0 #d9ded9,inset 0 0 0 1.5px #d9ded9;}
.gb-board.done .gb-board-title{color:#2f6b46;}
.gb-board.later summary{background:#fbe9a8;box-shadow:inset 0 -3px 0 #ead48a;}
.gb-board p{margin:6px 6px 8px 12px;font-size:13.5px;line-height:1.45;color:var(--ink);}
.gb-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 2px;border:0;background:none;
  color:var(--green);font:600 13.5px/1.3 var(--font-body);cursor:pointer;text-align:left;}

/* ---------- Testversion-Abzeichen in der Kopfzeile ----------
   Als Aufkleber an der Logo-Ecke (absolut positioniert): Als normales Element
   machte es das Logo-Feld so breit, dass der Hinweis daneben Wort für Wort
   umbrach und das Logo hinter die Suchleiste rutschte. */
.gb-beta{display:none;position:absolute;top:-7px;right:-12px;padding:3px 6px;border-radius:6px;background:#f2c230;color:#3a2f1f;
  font:800 9.5px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;transform:rotate(8deg);
  box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none;}
body.demo .topbar .brand{position:relative;}
body.demo .gb-beta{display:block;}

/* Demo-Modus: Freunde-Funktionen ausblenden, Gipfelbuch-Tab zeigen */
body.demo .no-demo{display:none !important;}
body:not(.demo) .demo-only{display:none !important;}

@media (prefers-reduced-motion:reduce){
  .gb-stamp.show,.gb-stamp-inner{animation:none;}
}