/* Gemeinsame Bausteine fuer alle Seiten auf moritzgb.de:
   Bildlaufleiste, Fortschrittsanzeige, Cookie-Hinweis, Fusszeile.
   Die Farben kommen aus der jeweiligen Seite; die Rueckfallwerte sorgen
   dafuer, dass die Datei auch allein funktioniert. */

/* ---------- Bildlaufleiste ausblenden ---------- */
/* Die Leiste verschwindet, gescrollt wird weiterhin normal.
   Als Ersatz zeigt die Fortschrittsanzeige oben die Position. */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* aeltere Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Innenliegende Bereiche behalten eine schmale, dezente Leiste,
   damit man dort nicht blind scrollt. */
.vorschlaege, dialog, pre {
  scrollbar-width: thin;
  scrollbar-color: var(--linie-hell, rgba(0,0,0,.2)) transparent;
}

/* ---------- Fortschrittsanzeige ---------- */
.fortschritt {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: var(--text, #131316);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .55;
  pointer-events: none;
  will-change: transform;
}

@supports (animation-timeline: scroll()) {
  .fortschritt {
    animation: fortschrittWachsen linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fortschrittWachsen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Cookie-Hinweis ----------
   Schmaler Streifen am unteren Rand. Er verdeckt die Seite nicht und sperrt
   nichts - die Seite ist sofort benutzbar. */
.cookie-leiste {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 70;
  width: min(38rem, calc(100% - 2rem));
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--flaeche, #fff);
  border: 1px solid var(--linie, rgba(0,0,0,.1));
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 20px 46px -26px rgba(0,0,0,.55);
  color: var(--gedaempft, #6c6c75);
  font-size: .86rem;
  line-height: 1.55;
  transform: translateY(150%);
  animation: leisteRein .8s cubic-bezier(.16, 1, .3, 1) .45s forwards;
}
@keyframes leisteRein { to { transform: none; } }

.cookie-leiste.geht { animation: leisteRaus .45s cubic-bezier(.4, 0, 1, 1) forwards; }
@keyframes leisteRaus { to { transform: translateY(150%); opacity: 0; } }

.cookie-leiste .zeichen {
  flex: 0 0 auto;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--linie, rgba(0,0,0,.1));
  border-radius: 9px;
  color: var(--text, #131316);
  margin-top: .1rem;
}
.cookie-leiste .zeichen svg { width: 16px; height: 16px; }

.cookie-leiste .text { flex: 1; min-width: 10rem; }
.cookie-leiste .text b {
  display: block;
  color: var(--text, #131316);
  font-weight: 550;
  font-size: .92rem;
  letter-spacing: -.01em;
  margin-bottom: .1rem;
}
.cookie-leiste .text p { margin: 0; }
.cookie-leiste code {
  font-size: .88em;
  background: var(--flaeche2, rgba(0,0,0,.05));
  border-radius: 4px; padding: .02rem .28rem;
}

.cookie-leiste .rechtslinks {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .35rem;
  font-size: .8rem;
}
.cookie-leiste .rechtslinks a {
  color: var(--leise, #9a9aa1);
  text-decoration: none;
  transition: color .3s ease;
}
.cookie-leiste .rechtslinks a:hover {
  color: var(--text, #131316);
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie-leiste .rechtslinks .trenner { opacity: .45; }

.cookie-leiste .annehmen {
  flex: 0 0 auto;
  align-self: center;
  background: var(--text, #131316);
  color: var(--grund, #fff);
  border: 0; border-radius: 9px;
  padding: .5rem 1.25rem;
  font: inherit; font-size: .87rem; font-weight: 550;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.cookie-leiste .annehmen:hover {
  opacity: .9; transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5);
}
.cookie-leiste .annehmen:active { transform: none; }
.cookie-leiste .annehmen:focus-visible { outline: 2px solid var(--text, #131316); outline-offset: 3px; }

@media (max-width: 32rem) {
  .cookie-leiste {
    flex-wrap: wrap;
    padding: .95rem 1rem;
    gap: .75rem;
  }
  .cookie-leiste .zeichen { display: none; }
  .cookie-leiste .annehmen { width: 100%; align-self: stretch; }
}

/* ---------- Fusszeile mit Rechtslinks ---------- */
.rechtsfuss {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  color: var(--leise, #9a9aa1);
  font-size: .78rem;
}
.rechtsfuss a {
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}
.rechtsfuss a:hover { color: var(--text, #131316); }
.rechtsfuss .trenner { opacity: .45; }

@media (prefers-reduced-motion: reduce) {
  .fortschritt { animation: none !important; transform: scaleX(0) !important; opacity: 0; }
  .cookie-leiste { animation: none !important; transform: none !important; }
  .cookie-leiste.geht { display: none; }
  .cookie-leiste .annehmen:hover { transform: none; }
}