/* Hilfe-Schicht: Begriffe, ?-Knöpfe, Popover, Erste-Besuch-Hinweis.
   Gehört zu assets/cc-help.js — Tokens kommen aus style.css. */

/* ---------- Erklärbare Begriffe ---------- */
.cc-term {
  color: var(--grass-bright);
  border-bottom: 1px dashed rgba(163, 230, 53, .55);
  cursor: help;
  font-weight: 700;
}
.cc-term:hover { border-bottom-style: solid; }
.cc-term:focus-visible { outline: 3px solid var(--grass); outline-offset: 2px; border-radius: 3px; }

/* ---------- ?-Knopf ---------- */
.cc-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; flex: none; margin-left: .35rem; padding: 0;
  border: 1px solid rgba(163, 230, 53, .45); border-radius: 50%;
  background: rgba(132, 204, 22, .1); color: var(--grass-bright);
  font: inherit; font-size: .78rem; font-weight: 800; line-height: 1; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cc-help::before { content: '?'; }
.cc-help:hover { background: rgba(132, 204, 22, .22); border-color: var(--grass); }
/* Touch-Ziel auf 44px bringen, ohne das Kreis-Icon aufzublasen */
.cc-help::after {
  content: ''; position: absolute; width: 44px; height: 44px;
  transform: translate(-50%, -50%); left: 50%; top: 50%;
}
.cc-help { position: relative; }

/* ---------- Popover ---------- */
.cc-pop {
  position: absolute; z-index: 200; width: min(340px, calc(100vw - 24px));
  background: rgba(15, 15, 18, .98); backdrop-filter: blur(12px);
  border: 1px solid rgba(132, 204, 22, .3); border-radius: 10px;
  padding: 1rem 1.1rem .9rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}
.cc-pop[hidden] { display: none; }
.cc-pop-title { margin: 0 1.4rem .35rem 0; font-size: 1rem; font-weight: 800; color: var(--grass-bright); }
.cc-pop-text { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--text); }
.cc-pop-more { display: inline-block; margin-top: .7rem; font-size: .88rem; font-weight: 700; }
.cc-pop-close {
  position: absolute; top: .45rem; right: .45rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--border); border-radius: 6px;
  color: var(--dim); font: inherit; font-size: .8rem; cursor: pointer;
}
.cc-pop-close:hover { border-color: var(--grass); color: var(--grass-bright); }

/* Am Handy als Leiste unten: mehr Platz, näher am Daumen */
.cc-pop.sheet {
  position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto;
  width: auto; border-radius: 12px; padding: 1.1rem 1.2rem 1rem;
}

/* ---------- Erste-Besuch-Hinweis ---------- */
.cc-hint {
  display: flex; gap: .8rem; align-items: flex-start;
  background: linear-gradient(100deg, rgba(132, 204, 22, .14), rgba(132, 204, 22, .04));
  border: 1px solid rgba(132, 204, 22, .38); border-radius: var(--radius);
  padding: .85rem 1rem; margin: 0 0 1rem; font-size: .95rem;
}
.cc-hint[hidden] { display: none; }
.cc-hint .ic { font-size: 1.2rem; line-height: 1.3; flex: none; }
.cc-hint p { margin: 0; }
.cc-hint b { color: var(--text); }
.cc-hint button {
  flex: none; align-self: center; margin-left: auto;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--dim); font: inherit; font-size: .82rem; padding: .35rem .7rem; cursor: pointer;
}
.cc-hint button:hover { border-color: var(--grass); color: var(--grass-bright); }

/* ---------- „So geht's"-Box ----------
   Als <details> zugeklappt: ausgeklappt schiebt die Anleitung das Werkzeug
   unter die Falz (auf dem Handy um mehr als einen Bildschirm), und wer schon
   weiß, wie es geht, scrollt jedes Mal daran vorbei. Die Titelzeile bleibt
   sichtbar, damit die Hilfe trotzdem auffindbar ist. */
.cc-howto {
  background: linear-gradient(100deg, rgba(132, 204, 22, .09), rgba(132, 204, 22, 0) 55%), var(--card);
  border: 1px solid rgba(132, 204, 22, .28); border-radius: var(--radius);
  padding: 0; margin: 0 0 1.2rem;
}
.cc-howto > summary {
  list-style: none; cursor: pointer; padding: .8rem 1.2rem;
  display: flex; align-items: center; gap: .5rem;
}
.cc-howto > summary::-webkit-details-marker { display: none; }
.cc-howto > summary::after {
  content: ''; margin-left: auto; flex: none;
  width: .5rem; height: .5rem; border-right: 2px solid var(--dim); border-bottom: 2px solid var(--dim);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.cc-howto[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cc-howto > summary:hover::after, .cc-howto > summary:focus-visible::after { border-color: var(--grass); }
.cc-howto h2, .cc-howto h3 {
  margin: 0; font-size: 1.02rem; font-weight: 800;
  display: flex; align-items: center; gap: .45rem;
}
.cc-howto ol { counter-reset: cc-ho; list-style: none; margin: 0; padding: 0 1.2rem; display: grid; gap: .5rem; }
.cc-howto > ol:last-child { padding-bottom: 1rem; }
.cc-howto ol li { position: relative; padding-left: 2.1rem; font-size: .96rem; }
.cc-howto ol li::before {
  counter-increment: cc-ho; content: counter(cc-ho);
  position: absolute; left: 0; top: .02rem; width: 1.5rem; height: 1.5rem; border-radius: 5px;
  background: var(--grass); color: #09090b; font-weight: 800; font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
}
.cc-howto .cc-howto-foot {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: .9rem 1.2rem 1rem; padding-top: .8rem; border-top: 1px solid var(--border);
  font-size: .89rem; color: var(--dim);
}
.cc-howto .cc-howto-foot b { color: var(--text); }